@charset "UTF-8";

/* ========================================================
   Base & Reset (PC)
======================================================== */
:root {
  --vw: 100vw;
  /* 1400px以上のディスプレイでもレイアウトが崩れないよう固定サイズベースに切り替えるなど適宜調整 */
  --formula: calc(100vw / 1400); 
}

@media screen and (min-width: 1400px) {
  :root {
    --formula: calc(1400px / 1400);
  }
}

body {
  margin: 0;
  padding: 0;
}

.l-container {
  width: 100%;
}

.l-footer,
.pc-footer {
  margin: 0;
}

#feature .main {
  display: flex;
}

#feature .main .left {
  flex: 1;
  position: sticky;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #011589;
  padding: calc(40 * var(--formula));
  height: calc(200 * var(--formula));
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease;
}

#feature .main .left.is_show {
  opacity: 1;
  pointer-events: auto;
}

#feature .main .left .left__img {
  width: calc(269 * var(--formula));
}

#feature .main .right {
  flex: 1;
  position: sticky;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #011589;
  padding: calc(40 * var(--formula));
  height: calc(200 * var(--formula));
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease;
}

#feature .main .right.is_show {
  opacity: 1;
  pointer-events: auto;
}

#feature .main .right .right__img {
  width: calc(269 * var(--formula));
}

.main-content {
  width: 100%;
  max-width: 684px;
  margin: 0 auto;
}

#feature a,
#feature p,
#feature p.txt {
  color: inherit;
}

#feature {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-feature-settings: "palt";
  position: relative;
  overflow-x: clip;
  opacity: 0;
  transition: 0.3s;
  background-color: #fff;
}

#feature.is_show {
  opacity: 1;
}

#feature * {
  box-sizing: border-box;
}

#feature img,
#feature video {
  width: 100%;
  height: auto;
  display: block;
}

#feature a {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s;
}

#feature a:hover {
  opacity: 0.7;
}

/* ========================================================
   Animation Classes (js_anime)
======================================================== */
#feature .js_anime.is_fadein,
#feature .js_anime .is_fadein {
  opacity: 0;
  translate: 0 calc(30 * var(--formula));
  transition: opacity 1.5s ease, translate 1.5s ease;
}

#feature .js_anime.is_blur,
#feature .js_anime .is_blur {
  opacity: 0.4;
  filter: blur(10px);
  transition: 0.8s ease-out;
}

#feature .js_anime.is_show.is_fadein,
#feature .js_anime.is_show .is_fadein {
  opacity: 1;
  translate: 0;
}

#feature .js_anime.is_show.is_blur,
#feature .js_anime.is_show .is_blur {
  opacity: 1;
  filter: blur(0);
}

/* 罫線アニメーション */
#feature .line-anm {
  transform: scaleY(0) translateZ(0);
  transform-origin: top center;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  backface-visibility: hidden;
}

#feature .line-anm.is_show {
  transform: scaleY(1) translateZ(0);
}

/* ========================================================
   Common Components (PCの余白やフォントサイズに合わせて要調整)
======================================================== */
.color-black {
  color: #000 !important;
}

.color-white {
  color: #fff !important;
}

.item-text {
  font-size: calc(26 * var(--formula));
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-align: center;
}

.item-text02 {
  font-size: calc(18 * var(--formula));
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-align: center;
}

/* 共通下線設定（指定されたテキストブロック） */
.sec01-text,
.sec02-text,
.sec03-text01,
.sec04-text,
.sec05-text {
  text-decoration: underline;
  text-underline-offset: calc(10 * var(--formula));
}

.sec02-text02,
.sec02-text03 {
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--formula));
}

/* Credit */
.credit-container {
  font-family: "nimbus-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(18 * var(--formula));
  letter-spacing: 0.04em;
}

.credit-container .credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(12 * var(--formula)) calc(18 * var(--formula));
}

.credit-container .item {
  display: flex;
}

/* クレジット全体（品名〜金額まで）に下線を引く（優先度を強化） */
#feature .credit-container a {
  display: inline;
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--formula));
}

#feature .credit-container a .txt {
  margin: 0;
}

/* Video Mute Button */
.sec__movie {
  position: relative;
}

.mutebtn {
  position: absolute;
  bottom: calc(20 * var(--formula));
  right: calc(20 * var(--formula));
  cursor: pointer;
  z-index: 10;
}

.mutebtn__txt {
  font-family: "nimbus-sans", sans-serif;
  font-size: calc(14 * var(--formula));
  color: #fff;
}

.mutebtn__txt span {
  transition: opacity 0.3s;
}

.mutebtn__txt .mutebtn__offtxt {
  opacity: 1;
}

.mutebtn__txt .mutebtn__ontxt {
  opacity: 0.5;
}

.mutebtn.on .mutebtn__offtxt {
  opacity: 0.5;
}

.mutebtn.on .mutebtn__ontxt {
  opacity: 1;
}

.mutebtn__icon {
  width: calc(30 * var(--formula));
  margin: calc(-10 * var(--formula)) auto 0;
}

/* Fixed Background Sections */
.has-bg {
  position: relative;
  padding: calc(120 * var(--formula)) 0;
}

.has-bg .sec__bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  pointer-events: none;
  z-index: 0;
}

.has-bg .sec__bg {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 画面中央に配置 */
  width: 100%;
  max-width: 686px;            /* コンテンツ幅と同じ最大幅に制限 */
  height: 100vh;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  z-index: -1;
  clip-path: inset(1px);
}

.has-bg .sec__content {
  position: relative;
  z-index: 1;
}

/* ========================================================
   Individual Margins & Widths (個別調整用クラス・PC版)
======================================================== */
/* --- hero --- */
.hero {
  position: relative;
}

.hero__title01 {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9%;
  z-index: 10;
}

.hero__title02 {
  position: absolute;
  top: 91%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 33%;
  z-index: 10;
}

.title01 {
  margin-bottom: calc(20 * var(--formula));
}

.item-border01,
.item-border02,
.item-border03,
.item-border04 {
  min-width: 1px; /* ★最低でも1pxの太さを保証する */
  width: max(1px, calc(1.1 * var(--formula)));
}

/* --- sec01 --- */
.item-img01 {
  width: 100%;
  margin: 0 auto;
}

.item-arrow_wrapper {
  position: relative;
  margin: calc(60 * var(--formula)) auto 0;
  height: calc(200 * var(--formula));
}

.item-arrow {
  position: absolute;
  width: calc(23 * var(--formula)) !important;
  left: 47%;
}

.item-arrow_text {
  position: absolute;
  width: calc(16 * var(--formula)) !important;
  left: 50%;
}

.item-movie {
  width: 100%;
  margin: calc(15 * var(--formula)) auto 0;
}

.sec01-text {
  width: 100%;
  margin: calc(123 * var(--formula)) auto 0;
}

.item-img02 {
  width: 93%;
  margin: calc(113 * var(--formula)) auto 0;
}

/* 重なり画像1 (img04ベース, img03が上) */
.overlap-sec01-top {
  position: relative;
  width: 90%;
  margin: calc(100 * var(--formula)) auto calc(100 * var(--formula));
}

.item-img04 {
  width: 96.5%;
  margin: calc(140 * var(--formula)) auto 0 calc(21 * var(--formula));
}

.item-img03 {
  position: absolute;
  width: 96%;
  top: -9%;
  left: -5.5%;
  z-index: 2;
}

.item-img03::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  clip-path: inset(1px);
  z-index: -1;
}

.item-img05 {
  width: 93%;
  margin: calc(100 * var(--formula)) auto 0;
}

.item-credit01 {
  width: 60%;
  margin: calc(34 * var(--formula)) auto 0;
}

/* 重なり画像2 (img06ベース, img07が上) */
.overlap-sec01-bottom {
  position: relative;
  width: 90%;
  height: calc(1700 * var(--formula));
  margin: calc(100 * var(--formula)) auto 0;
}

.item-img06 {
  width: 104%;
  margin: calc(160 * var(--formula)) auto 0 calc(-13 * var(--formula));
}

.item-img07 {
  position: absolute;
  width: 90%;
  bottom: 5.5%;
  left: 5%;
  z-index: 2;
  background-color: #fff;
}

.item-credit02 {
  width: 60%;
  margin: calc(-68 * var(--formula)) auto calc(160 * var(--formula));
}

/* --- sec02 --- */
.sec02-pinned-area {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.sec02-text {
  width: 90%;
  margin: calc(-9 * var(--formula)) auto calc(116 * var(--formula));
}

.sec02-text02 {
  width: 90%;
  margin: calc(30 * var(--formula)) auto 0;
}

.sec02-text03 {
  width: 90%;
  margin: calc(-13 * var(--formula)) auto 0;
}

/* GSAP スクロール切り替え画像1 */
.item-overlap-sec02 {
  position: relative;
  width: 86%;
  margin: 0 auto;
}

.item-img08 {
  width: 100%;
  margin: 0 auto;
}

.item-img09 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  z-index: 2;
}

.item-img10 {
  width: 93%;
  margin: calc(34 * var(--formula)) auto 0;
}

.item-credit03 {
  width: 60%;
  margin: calc(38 * var(--formula)) auto calc(43 * var(--formula));
}

/* --- sec03 --- */
.sec03-text01 {
  width: 90%;
  margin: calc(95 * var(--formula)) auto 0;
}

.sec03 .text-content.sec03-text {
  position: relative;
  z-index: 1;
  font-size: calc(19.5 * var(--formula));
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: justify;
}

.wrapper-flame .flame-img {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.item-img11 {
  width: 86%;
  margin: calc(104 * var(--formula)) auto 0;
}

.item-border01 {
  width: calc(1.1 * var(--formula));
  margin: calc(28 * var(--formula)) auto 0;
}

.sec03_text-content01 {
  width: calc(594 * var(--formula));
  margin: calc(11 * var(--formula)) auto 0;
}

.wrapper-flame01 {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.wrapper-flame01 .text-content {
  width: 89%;
  margin: calc(12 * var(--formula)) auto 0;
}

.wrapper-flame01 .flame-img {
  top: calc(-5 * var(--formula));
  left: calc(12 * var(--formula));
  width: 96.5%;
}

.item-credit04 {
  width: 90%;
  margin: calc(22 * var(--formula)) auto 0;
}

.item-img12 {
  width: 86%;
  margin: calc(82 * var(--formula)) auto 0;
}

.item-border02 {
  width: calc(1.1 * var(--formula));
  margin: calc(30 * var(--formula)) auto 0;
}

.sec03_text-content02 {
  width: calc(594 * var(--formula));
  margin: calc(9 * var(--formula)) auto 0;
}

.wrapper-flame02 {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.wrapper-flame02 .text-content {
  width: 89%;
  margin: calc(17 * var(--formula)) auto 0;
}

.wrapper-flame02 .flame-img {
  top: calc(-6 * var(--formula));
  left: calc(15 * var(--formula));
  width: 96.5%;
}

.item-img13 {
  width: 86%;
  margin: calc(126 * var(--formula)) auto 0;
}

.item-border03 {
  width: calc(1.1 * var(--formula));
  margin: calc(26 * var(--formula)) auto 0;
}

.sec03_text-content03 {
  width: calc(594 * var(--formula));
  margin: calc(8 * var(--formula)) auto 0;
}

.wrapper-flame03 {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.wrapper-flame03 .text-content {
  width: 89%;
  margin: calc(12 * var(--formula)) auto 0;
}

.wrapper-flame03 .flame-img {
  top: calc(-4 * var(--formula));
  left: calc(15 * var(--formula));
  width: 96.5%;
}

.item-img14 {
  width: 86%;
  margin: calc(130 * var(--formula)) auto 0;
}

.item-border04 {
  width: calc(1.1 * var(--formula));
  margin: calc(30 * var(--formula)) auto 0;
}

.sec03_text-content04 {
  width: calc(594 * var(--formula));
  margin: calc(10 * var(--formula)) auto 0;
}

.wrapper-flame04 {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.wrapper-flame04 .text-content {
  width: 89%;
  margin: calc(13 * var(--formula)) auto 0;
}

.wrapper-flame04 .flame-img {
  top: calc(-5 * var(--formula));
  left: calc(15 * var(--formula));
  width: 96.5%;
}

.item-credit05 {
  width: 90%;
  margin: calc(22 * var(--formula)) auto 0;
}

.item-img15 {
  width: 93.5%;
  margin: calc(160 * var(--formula)) auto 0 calc(44 * var(--formula));
  position: relative;
  z-index: 3;
  background-color: #fff;
}

.item-img16 {
  width: 87%;
  margin: calc(-58 * var(--formula)) auto 0 0;
  position: relative;
  z-index: 2;
  background-color: #fff;
}

.item-img17 {
  width: 86.5%;
  margin: calc(-71 * var(--formula)) auto 0;
}

.item-credit06 {
  width: 60%;
  margin: calc(40 * var(--formula)) auto calc(162 * var(--formula));
}

/* --- sec04 --- */
.sec04 {
  padding-bottom: calc(12 * var(--formula));
}

.sec04-pinned-area {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.sec04-text {
  width: 90%;
  margin: 0 auto calc(40 * var(--formula));
}

/* GSAP スクロール切り替え画像2 */
.item-overlap-sec04 {
  position: relative;
  width: 88%;
  margin: calc(115 * var(--formula)) auto;
}

.item-img18 {
  width: 100%;
  margin: 0 auto;
}

.item-img19,
.item-img20,
.item-img21 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  z-index: 2;
}

.item-img20 {
  z-index: 3;
}

.item-img21 {
  z-index: 4;
}

.item-img22 {
  width: 87%;
  margin: calc(126 * var(--formula)) auto 0 0;
}

.item-img23 {
  width: 86%;
  margin: calc(102 * var(--formula)) auto 0;
}

.item-credit07 {
  width: 60%;
  margin: calc(40 * var(--formula)) auto calc(162 * var(--formula));
}

/* 4枚それぞれの画像背面に白背景レイヤーを配置し、クリッピングを設定 */
.item-img18::before,
.item-img19::before,
.item-img20::before,
.item-img21::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  clip-path: inset(1px);
  z-index: -1;
}

/* --- sec05 --- */
.sec05-text {
  width: 90%;
  margin: calc(123 * var(--formula)) auto calc(90 * var(--formula));
}

.item-img24 {
  width: 100%;
  margin: 0 auto;
}

.item-credit08 {
  width: 60%;
  margin: calc(40 * var(--formula)) auto 0;
}

/* --- bottom --- */
.item-viewall {
  width: calc(140 * var(--formula));
  margin: calc(197 * var(--formula)) auto calc(196 * var(--formula));
}

.efs-system-notification {
  display: none !important;
}