body, html {
  margin: 0;
  padding: 0;
  background-color: #000000;
  /* 欧文は Noto Sans、日本語は Noto Sans JP（Noto Sans は日本語グリフを含まないため） */
  font-family: 'Noto Sans', 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================
    ローディング
========================================== */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeOutLoader 1s ease-in-out 3s forwards;
}

@keyframes fadeOutLoader {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

.loader {
  width: 400px;
  max-width: 85vw;
  height: 100px;
  -webkit-mask-image: url('/assets/img/mufg_suite/header_logo_mufgsuite.png');
  mask-image: url('/assets/img/mufg_suite/header_logo_mufgsuite.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: linear-gradient(
    90deg, 
    #111111 20%, 
    #5E433B 40%, 
    #C48C7B 50%, 
    #5E433B 60%, 
    #111111 80%
  );
  background-size: 200% 100%;
  animation: shimmer 5s infinite linear;
}
@media screen and (max-width: 768px) { .loader { margin-top: -100px; } }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================
    ヘッダー
========================================== */
.suite_nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

@media screen and (min-width: 769px) {
  #location, #scene, #quality, #access, #guide, #contact {
    scroll-margin-top: 70px;
  }
}

.suite_header {
  height: 70px;
  display: flex;
  background: rgba(255, 255, 255, .95);
}

.mufg_logo {
  width: 350px;
  height: 70px;
  display: block;
  background: url('/assets/img/mufg_suite/header_logo_mufgsuite.png') no-repeat 50% 50%;
  background-size: auto 50px;
  overflow: hidden;
}

.mufg_logo a {
  width: 350px;
  height: 70px;
  font-size: 0;
  display: block;
}

.menu_container {
  width: calc(100% - 350px);
  height: 70px;
  display: flex;
  background: url('/assets/img/mufg_suite/heager_bg.svg') no-repeat 0 bottom;
  background-size: auto 120px;
  overflow: hidden;
}

.ig_logo {
  width: 180px;
  height: 70px;
  display: block;
  position: absolute;
  right: 0;
  background: url('/assets/img/mufg_suite/header_logo_igarena.png') no-repeat 50% 50%;
  background-size: 120px auto;
  overflow: hidden;
}

.ig_logo a {
  width: 180px;
  height: 70px;
  display: block;
  font-size: 0;
}

.menu_item {
  width: calc(100% - 180px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 10px 0 30px;
}

.menu_item li {
  width: 16.67%;
  text-align: center;
}

.menu_item li a {
  color: #fff; 
  display: block;
  transition: color .5s;
  text-decoration: none;
  font-weight: bold;
}

.menu_item li a:hover {
  color: #C48C7B;
}

.hamburger {
  display: none;
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
  .mufg_logo, .mufg_logo a { width: 220px; }
  .mufg_logo { background-size: auto 36px; }
  .menu_container { width: calc(100% - 220px); }
  .ig_logo, .ig_logo a { width: 130px; }
  .ig_logo { background-size: 100px auto; }
  .menu_item { width: calc(100% - 130px); padding: 0 5px; }
  .menu_item li a { font-size: 12px; }
}

@media screen and (max-width: 768px) {
  .hamburger {
    display: block;
    position: fixed;
    right: 10px;
    top: 10px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0);
    border: 0px;
    border-radius: 30px;
    cursor: pointer;
    z-index: 1000;
  }

  .hamburger span {
    display: block;
    position: absolute;
    left: 13px;
    width: 24px;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
  }

  .hamburger span:nth-child(1) { top: 16px; }
  .hamburger span:nth-child(2) { top: 24px; }
  .hamburger span:nth-child(3) { top: 32px; }

  .hamburger.is-active span {
    background-color: #333;
  }
  .hamburger.is-active span:nth-child(1) { top: 24px; transform: rotate(45deg); }
  .hamburger.is-active span:nth-child(2) { opacity: 0; }
  .hamburger.is-active span:nth-child(3) { top: 24px; transform: rotate(-45deg); }

  .suite_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 0 40px;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 999;
  }

  .suite_header.is-active {
    opacity: 1;
    visibility: visible;
  }

  .mufg_logo { width: 100%; height: 60px; background-size: auto 40px; margin-bottom: 30px; }
  .mufg_logo a { width: 100%; height: 60px; }
  .menu_container { width: 100%; height: auto; flex-direction: column; align-items: center; background: none; overflow: visible; }
  .menu_item { width: 100%; flex-direction: column; padding: 0; margin-bottom: 40px; }
  .menu_item li { width: 100%; margin: 15px 0; }
  .menu_item li a { color: #333; font-size: 1.25rem; font-weight: bold; }
  .ig_logo { position: relative; right: auto; width: 100%; height: 50px; background-image: url('/assets/img/mufg_suite/header_logo_igarena_b.png'); background-size: auto 25px; }
  .ig_logo a { width: 100%; height: 50px; }
}

/* ==========================================
    YouTube
========================================== */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: #000;
}

.video-background iframe {
  width: 100vw ;
  height: 56.25vw;
  min-height: 115vh ;
  min-width: 177.77vh;
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.2);
}


.fv-spacer {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100vh;
}

.content { position:absolute; right:0; left:0; bottom:20px; text-align: center; }
.content img { height:50px; width: auto; }
.content h1 { display:none; }

@media screen and (max-width: 768px) {
  .content {
    display: block;
    position: relative;
    z-index: 10;
    color: #ffffff;
    text-align: center;
    padding-top: 20px;
    height:35vh;
  }
  .video-background {
    height: 35vh;
  }
  .video-background iframe {min-height: 40vh !important;}
  .fv-spacer {
    height: auto;
  }
  .content h1 { display:block; }
  .content img { height:60px; width: auto; }
  .content img.sc { /*height:40px; width: auto; position:absolute; bottom:0; right:0; left:0; margin:auto;*/ display: none; }
}


.scroll-area {
  position: relative;
  z-index: 10;
  background-color: #000;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
}

.blocks-wrapper { position: relative; width: 100%; }
.container { width: 100%; overflow: hidden; position: relative; max-width: 1920px; margin: auto; }

.container-1 { height: 850px; }
.container-2 { height: 350px; position: absolute; bottom: 0; }
.container-3 { height: 480px; }
.container-4 { height: 480px; }

@media (max-width: 768px) {
  .scroll-area { width: 100%; }
  .container-1 { height: 130vw; }
  .container-2 { height: 55vw; }
  .container-3 { height: 90vw; }
  .container-4 { height: 60vw; }
}

.masked-bg {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  -webkit-mask-size: auto 100%; mask-size: auto 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  z-index: 1; position: relative;
}

.text-box {
  position: absolute; bottom: 60px; left: 60px;
  color: #fff; max-width: 550px; padding: 30px; box-sizing: border-box;
  z-index: 2; opacity: 0; transform: scale(1);
}
.text-box h2 { margin: 0 0 15px 0; text-align: center; font-size: 36px; font-weight: bold; line-height: 1.3; letter-spacing: 0.05em; }
.text-box h2 img { height: 50px; }
.text-box p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.9); }
.cp_dd { font-size: x-small; color: #C48C7B; position: absolute; right: 20px; bottom: 10px; z-index: 500;}

@media (max-width: 768px) {
  .text-box { bottom: 0px; left: 20px; right: 20px; max-width: none; padding: 20px 40px; }
  .text-box br { display: none; }
  .container-2 .text-box { left: 20px !important; right: 20px !important; }
  .text-box h2 { font-size: 22px; margin-bottom: 10px; }
  .text-box h2 img { height: 40px; }
  .text-box p { font-size: 12px !important; line-height: 1.6; }
  /* container-3/4: グラデ背景を画像の左右端まで広げる。
     後続の PC 用ルール(.container-4 .text-box { left:auto; right:100px })に負けないよう !important */
  .container-3 .text-box, .container-4 .text-box { background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); left: 0 !important; right: 0 !important; }
  .cp_dd { top: 5px; bottom: auto;}
}

.block-1 {
  background-image: url('/assets/img/mufg_suite/bg_image.jpg'); -webkit-mask-image: url('/assets/img/mufg_suite/rt.svg'); mask-image: url('/assets/img/mufg_suite/rt.svg');
  --start-pos: -9999px center; -webkit-mask-position: var(--start-pos); mask-position: var(--start-pos);
}
.block-2 {
  background-color: rgba(255,255,255,0.9); -webkit-mask-image: url('/assets/img/mufg_suite/lb.svg'); mask-image: url('/assets/img/mufg_suite/lb.svg');
  --start-pos: 9999px center; -webkit-mask-position: var(--start-pos); mask-position: var(--start-pos);
}

.container-2 .text-box, .container-4 .text-box { left: auto; right: 100px; }
.container-2 .text-box { color: #222; bottom:30px; }
@media (min-width: 1600px) { .container-2 .text-box br {display:none;} .container-2 .text-box { bottom:60px;} }
@media (max-width: 1399px) { .container-2 .text-box {right: 20px; bottom:20px;} .container-2 .text-box p {font-size:14px;} }
.container-2 .text-box p { color: #444; }

@media (max-width: 768px) { .block-3,.block-4 { opacity: .9; } }

.block-3 {
  background-image: url('/assets/img/mufg_suite/scene_bg1.jpg'); -webkit-mask-image: url('/assets/img/mufg_suite/lt.svg'); mask-image: url('/assets/img/mufg_suite/lt.svg');
  --start-pos: 9999px center; -webkit-mask-position: var(--start-pos); mask-position: var(--start-pos);
}
.block-4 {
  background-image: url('/assets/img/mufg_suite/scene_bg2.jpg'); -webkit-mask-image: url('/assets/img/mufg_suite/rt.svg'); mask-image: url('/assets/img/mufg_suite/rt.svg');
  --start-pos: -9999px center; -webkit-mask-position: var(--start-pos); mask-position: var(--start-pos);
}

.container.is-animated .masked-bg { -webkit-animation: maskSlide 1s ease forwards; animation: maskSlide 1s ease forwards; }
.container.is-animated .text-box { -webkit-animation: fadeIn 1s ease forwards, zoomIn 3s ease-out forwards; animation: fadeIn 1s ease forwards, zoomIn 3s ease-out forwards; }

@-webkit-keyframes maskSlide { 0% { -webkit-mask-position: var(--start-pos); } 100% { -webkit-mask-position: var(--end-pos); } }
@keyframes maskSlide { 0% { -webkit-mask-position: var(--start-pos); mask-position: var(--start-pos); } 100% { -webkit-mask-position: var(--end-pos); mask-position: var(--end-pos); } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1.05); } }
@keyframes zoomIn { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }


.bottom-content-area {
  position: relative;
  z-index: 10;
  background-color: #111; 
  padding-bottom: 60px;
}

.content_wrap h2 { padding:60px; }
.content_wrap h2 img { height:80px; }

.quality_inner {
  width: 1260px;
  max-width: 100%;
  height: 550px;
  margin: 60px auto;
  position: relative;
  display: flex;
  align-items: center;
}

.quality_text {
  width: 500px;
  height: 350px;
  padding: 60px;
  display: flex;
  position: absolute;
  background-color: rgba(255,255,255,0.9);
  z-index:1000;
  align-items: center;
  color: #5E433B;
  box-sizing: border-box;
}

.quality_text h3 {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #5E433B;
  border-image: linear-gradient(to right, #C48C7B 0%, #5E433B 100%) 1;
}

.quality_text h3 img { height: 30px; }

.quality_img {
  width: 800px;
  height: 550px;
  position: absolute;
  right: 0;
  overflow: hidden;
}

.quality_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quality_inner:nth-child(odd) .quality_text { right:0; }
.quality_inner:nth-child(odd) .quality_img { left:0; }

.quality_text,
.quality_img {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.quality_text.is-visible,
.quality_img.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.access_inner {
  width: 1260px;
  max-width: 100%;
  margin: 60px auto;
  font-size: 16px;
  box-sizing: border-box;
}

.access_cont {
  background: #222;
  padding: 80px;
  box-sizing: border-box;
}

.access_main { margin-bottom: 40px; }
.access_main img.pc { display: block; }
.access_main img.sp { display: none; }

.access_sub { display: flex; }
.access_sub_cont { flex: 1; }
.access_sub_cont:nth-child(2) { margin: 0 40px; } 
.access_img { margin-bottom: 20px; height: 200px; overflow: hidden; }
.access_img img { width: 100%; height: 100%; object-fit: cover; }
.access_text { color: white; line-height: 1.6; }

.tab_item { display:flex; }
.tab_item input[type="radio"] { display: none; }
.tab_lab1, .tab_lab2 {
  text-align: center; padding: 16px 40px; color: #999; cursor: pointer;
  font-size: 16px; transition: all 0.3s ease; width: 50%; box-sizing: border-box;
}
.tab_lab1:hover, .tab_lab2:hover { background: #444; color: #fff; }
.tab_item input[type="radio"]:checked + label { background: #222; color: #fff; }
#train, #car { display: none; }
.access_inner:has(#tab1:checked) #train,
.access_inner:has(#tab2:checked) #car {
  display: block; animation: tabFadeIn 1s ease forwards;
}
@keyframes tabFadeIn { from { opacity: 0; } to { opacity: 1; } }

.guide_inner {
  width: 1260px;
  max-width: 100%;
  margin: 60px auto;
  font-size: 16px;
  box-sizing: border-box;
}
.guide_cont {
  background: #222; padding: 80px 80px 40px; text-align: center; box-sizing: border-box;
}
.guide_cont h3 { font-size: 36px; color: #C48C7B; }
.guide_cont h4 { font-size: 24px; color: #C48C7B; margin: 60px auto 40px; }
.guide_cont h5 { font-size: 24px; margin-bottom: 10px; }
.guide_img { margin-bottom: 20px; }
.guide_img img { max-height: 400px; width: auto; }
.guide_icn { margin-bottom: 5px; }
.guide_icn img { height: 120px; width: auto; }
.guide_text { color: white; line-height: 1.6; margin-bottom: 60px; }
.guide_text a, .guide_text a:visited { color: #E61E1E; text-decoration: underline; }

.contact_inner p {
  color: white; font-size: 20px; padding-bottom: 80px; text-align: center;
}
.contact_inner a {
  font-size: 20px; color: #C48C7B; background: #222; border: 1px solid #C48C7B;
  border-radius: 40px; padding: 20px 40px; transition: all 1s ease; display: inline-block;
}
.contact_inner a:hover {
  color: #EBD2CA; background: #5E433B; border: 1px solid #000; text-decoration:none;
}

@media screen and (max-width: 768px) {
  .content_wrap h2 { padding: 40px 20px 30px; text-align: center; }
  .content_wrap h2 img { height: 50px; }

  .quality_inner { flex-direction: column; height: auto; padding: 0 20px; margin: 30px auto; }
  .quality_img { position: relative; width: 100%; height: auto; right: auto !important; left: auto !important; }
  .quality_text {
    position: relative; width: 90%; height: auto; padding: 30px 20px;
    margin-top: -30px; z-index: 10; right: auto !important; left: auto !important; font-size: 12px;
  }
  .quality_text h3 { margin-bottom: 10px; padding-bottom: 10px; }
  .quality_text h3 img { height: 25px; }
  .quality_inner:nth-child(even) .quality_text,
  .quality_inner:nth-child(odd) .quality_text { right: auto; left: auto; }

  .access_inner { padding: 0 20px; margin: 30px auto; }
  .tab_item { /*flex-direction: column;*/ }
  .tab_lab1, .tab_lab2 { /*width: 100%;*/ padding: 15px 10px; font-size: 14px; }
  .access_cont { padding: 30px 20px; }
  .access_main img.pc { display: none; }
  .access_main img.sp { display: block; }
  .access_sub { flex-direction: column; }
  .access_sub_cont:nth-child(2) { margin: 30px 0; }
  .access_img { height: auto; }
  .access_text { font-size: 12px; }

  .guide_inner { padding: 0 20px; margin: 30px auto; }
  .guide_cont { padding: 30px 20px 20px; }
  .guide_cont h3 { font-size: 20px; }
  .guide_cont h4 { font-size: 14px; margin: 20px auto 20px; }
  .guide_cont h5 { font-size: 16px; }
  .guide_icn img { height: 80px; }
  .guide_text { font-size: 12px; text-align: left; margin-bottom: 40px; }
  .guide_text h5 { text-align: center; }
  .guide_text br { display: none; }

  .contact_inner p { font-size: 14px; padding: 0 20px 40px; }
  .contact_inner a { font-size: 16px; padding: 15px 30px; }
}

@media screen and (min-width: 769px) {
html, body {
  overflow-x: clip !important; 
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.fv-spacer,
.scroll-area,
.bottom-content-area,
.content {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3. 画面を押し広げる原因（100vw）の無効化 */
.loading-screen {
  width: 100% !important; /* 100vw から 100% に上書き */
}

/* 4. PCでは動画背景を独自ヘッダーの下から画面下まで固定 */
.video-background {
  width: auto !important;
  height: auto !important;
  top: 70px !important;
  left: 0 !important;
  right: 0 !important;  /* 右端を画面枠に強制接着 */
  bottom: 0 !important; /* 下端を画面枠に強制接着 */
}
}
/* ==========================================
    パートナーロゴ・フッター（固定動画背景の透け防止）
    .video-background が position:fixed; z-index:0 のため、
    非配置要素の背景より前面に描画される。共通パーツ側を
    配置要素 + z-index にして動画の上に重ねる。
========================================== */
.l-partner {
  position: relative;
  z-index: 10;
  background-color: #fff;
}

.l-footer {
  z-index: 10;
}