@charset "UTF-8";

/* ==================================================
   ヘッダー高さの定義（重なり防止用）
================================================== */
:root {
  --header-height: 80px;
}

html {
  font-size: 10px;
  -webkit-text-size-adjust: 100%;
}

/* 1440px以下：画面幅に比例して拡大縮小 */
@media screen and (max-width: 1440px) {
  html {
    font-size: 0.6944444444vw; /* 1440px基準で 10px = 1rem */
  }
}

/* 1920px以上の超広幅モニターでの無限肥大化を防止 */
@media screen and (min-width: 1920px) {
  html {
    font-size: 13.333px;
  }
}

body {
  margin: 0;
  background-color: #ffffff;
}

.l-container {
  width: 100%;
}

.l-footer {
  padding: 0;
}

.pc-footer {
  margin: 0;
}

.sp {
  display: none !important;
}

/* ==================================================
   ベース設定
================================================== */
.feature {
  box-sizing: border-box;
  margin: 0 auto;
  overflow: clip;
  position: relative;
  width: 100%;
  background-color: #ffffff;
}

.feature * {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}

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

.feature a:hover {
  opacity: 0.8;
}

.feature img {
  vertical-align: bottom;
  max-width: 100%;
  display: block;
  transition: opacity 0.3s;
}

.feature .link-svg {
  display: inline-flex;
  width: auto;
}

/* ==================================================
   PCレイアウト
   左側：MV
   右側：スクロールコンテンツ
================================================== */
.feature .container {
  position: relative;
  width: 100%;
  z-index: 1;
}

.feature .container__inner {
  width: calc(100% - 2px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ==================================================
   左エリア
================================================== */
.feature .container__left {
  width: 50%;
  position: relative;
  align-self: stretch;
  z-index: 100;
}

.feature .fixed__wrapper {
  --mv-height: 117vh;
  --image-ratio: 0.9;

  position: sticky;
  top: max(var(--header-height), calc(100vh - (var(--mv-height) * var(--image-ratio))));
  width: 100%;
  height: calc(var(--mv-height) * var(--image-ratio));
}

/* ==================================================
   右エリア
================================================== */
.feature .container__right {
  width: 50%;
  position: relative;
  padding-bottom: 15rem;
}

/* ==================================================
   コンテンツエリア（右エリア）の縦罫線
================================================== */

/* 中央の区切り線 */
.feature .container__right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #000000;
  z-index: 10;
}

/* 画像幅に合わせた左右の縦罫線 (有効幅 57%) */
.feature .vertical-line-left,
.feature .vertical-line-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #000000;
  z-index: 5;
  pointer-events: none;
}

.feature .vertical-line-left {
  left: 21.5%;
}

.feature .vertical-line-right {
  right: 21.5%;
}

/* ==================================================
   クレジット設定 (ベース・横並び処理)
================================================== */
.feature .creditContainer {
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #000000;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-size: 1.2rem;
  box-sizing: border-box;
}

.feature .creditContainer * {
  color: #000000;
}

/* リスト全体の横並び・折り返し設定（ベースを中央揃えに） */
.feature .creditContainer .credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* ★ 中央揃えにして右側の不自然な余白を解消 */
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各アイテムのインライン配置と改行禁止（文字とスラッシュを絶対に分離させない） */
.feature .creditContainer .credit .item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap; /* ★ 単語やスラッシュの途中での改行を完全に防止 */
}

.feature .creditContainer .credit .item .txt {
  display: inline-block;
}

.feature .creditContainer .credit .item::after {
  content: "/";
  margin: 0 0.4rem;
  color: #000000;
}

/* 最後のアイテムの後ろのスラッシュを消去 */
.feature .creditContainer .credit .item:last-child::after {
  content: "";
  margin: 0;
}

/* ==================================================
   クレジット 個別調整用
================================================== */
.feature .creditContainer.credit01 {
  width: 52%;
  max-width: 32rem; /* ★ 大画面でも1行にならず2行を維持 */
  margin: 2rem auto 0 25%;
}

.feature .creditContainer.credit01 .credit {
  justify-content: flex-start; /* credit01は左揃えベース */
}

.feature .creditContainer.credit01 .item:nth-child(3)::after {
  content: "";
  margin: 0;
}

.feature .creditContainer.credit02 {
  width: 20%;
  max-width: 14rem;
  position: absolute;
  bottom: 1%;
  right: 25%;
}

.feature .creditContainer.credit02 .credit {
  justify-content: flex-end; /* credit02は右揃え */
}

.feature .creditContainer.credit02 .item:nth-child(1)::after,
.feature .creditContainer.credit02 .item:nth-child(2)::after,
.feature .creditContainer.credit02 .item:nth-child(3)::after,
.feature .creditContainer.credit02 .item:nth-child(4)::after {
  content: "";
  margin: 0;
}

.feature .creditContainer.credit03 {
  width: 40%;
  max-width: 26rem;
  margin: -3.8rem auto 0;
}

.feature .creditContainer.credit03 .credit {
  justify-content: center;
}

.feature .creditContainer.credit03 .item:nth-child(2)::after {
  content: "";
  margin: 0;
}

.feature .creditContainer.credit04 {
  width: 57%;
  max-width: 34rem;
  margin: 2.4rem auto 0;
}

.feature .creditContainer.credit04 .credit {
  justify-content: center;
}

.feature .creditContainer.credit04 .item:nth-child(3)::after {
  content: "";
  margin: 0;
}

.feature .creditContainer.credit05 {
  width: 46%;
  max-width: 30rem;
  margin: 2rem auto 0 30.7%;
}

.feature .creditContainer.credit05 .credit {
  justify-content: flex-start;
}

.feature .creditContainer.credit06 {
  width: 57%;
  max-width: 34rem;
  margin: 2.3rem auto 0;
}

.feature .creditContainer.credit06 .credit {
  justify-content: center;
}

/* ==================================================
   クレジット 個別調整用
================================================== */
.feature .creditContainer.credit01 {
  width: 52%;
  max-width: 32rem; /* ★ 追加：大画面で横に広がりすぎるのを防ぎ、3つ目で折り返す */
  margin: 2rem auto 0 25%;
}

.feature .creditContainer.credit01 .item:nth-child(3)::after {
  content: "";
  margin: 0;
}

.feature .creditContainer.credit02 {
  width: 20%;
  max-width: 14rem;
  position: absolute;
  bottom: 1%;
  right: 25%;
}

.feature .creditContainer.credit02 .credit {
  justify-content: flex-end;
}

.feature .creditContainer.credit02 .item:nth-child(1)::after,
.feature .creditContainer.credit02 .item:nth-child(2)::after,
.feature .creditContainer.credit02 .item:nth-child(3)::after,
.feature .creditContainer.credit02 .item:nth-child(4)::after {
  content: "";
  margin: 0;
}

.feature .creditContainer.credit03 {
  width: 30%;
  max-width: 24rem;
  margin: -3.8rem auto 0%;
}

.feature .creditContainer.credit03 .credit {
  justify-content: center;
}

.feature .creditContainer.credit03 .item:nth-child(2)::after {
  content: "";
  margin: 0;
}

.feature .creditContainer.credit04 {
  width: 44%;
  max-width: 34rem;
  margin: 2.4rem auto 0;
}

.feature .creditContainer.credit04 .credit {
  justify-content: center;
}

.feature .creditContainer.credit04 .item:nth-child(3)::after {
  content: "";
  margin: 0;
}

.feature .creditContainer.credit05 {
  width: 42%;
  max-width: 42rem;
  margin: 2rem auto 0 30.7%;
}

.feature .creditContainer.credit06 {
  width: 46%;
  max-width: 46rem;
  margin: 2.3rem auto 0;
}

/* ==================================================
   アニメーション・追従ボタン
================================================== */
.feature .js-fade {
  opacity: 0;
  filter: blur(10px);
  transition: 1s all 0s ease;
}

.feature .js-fade.is-active {
  opacity: 1;
  filter: blur(0);
}

.feature .fix__img {
  position: fixed;
  bottom: 8rem;
  right: 1rem;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2rem); /* ★ 追加：初期状態を少し下に下げる */
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease; /* ★ transformをアニメーションに追加 */
}

.feature .fix__img.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* ★ 追加：表示時に元の位置に浮き上がる */
}

/* ==================================================
   MVセクション
================================================== */
.feature .mv {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding: 0;
}

.feature .mv__line-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000000;
  z-index: 10;
}

.feature .mv__inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

.feature .mv__left {
  position: relative;
  display: flex;
  width: 9.5%;
  height: 100%;
  flex-shrink: 0;
}

.feature .mv__line-left,
.feature .mv__line-right {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #000000;
  z-index: 5;
}

.feature .mv__line-left {
  left: 0;
}

.feature .mv__line-right {
  right: 0;
}

/* ==================================================
   MV画像 / Swiper
================================================== */
.feature .mv__right {
  width: 85%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.feature .swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.feature .swiper-wrapper {
  height: 100%;
  align-items: flex-start;
  transition-timing-function: linear;
}

.feature .swiper-slide {
  width: auto;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}

.feature .swiper-slide img {
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  display: block;
}

.feature .img-mv-text {
  position: absolute;
  top: 3.5%;
  left: 50%;
  transform: translateX(-62%);
  width: 51.5%;
  height: auto;
  max-height: 80%;
  object-fit: contain;
  margin: 0;
}

/* ==================================================
   各セクション共通
================================================== */
.feature .sec {
  position: relative;
}

.feature .sec__title {
  position: relative;
  padding: 2rem 0;
  margin-bottom: 6rem;
}

.feature .sec__title-line-top,
.feature .sec__title-line-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000000;
}

.feature .sec__title-line-top {
  top: 0;
}

.feature .sec__title-line-bottom {
  bottom: 0;
}

.feature .sec__title-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 57%;
  margin: 0 auto;
  padding: 0 2.3rem;
  box-sizing: border-box;
}

.feature .sec__content {
  width: 100%;
}

/* ==================================================
   bottom セクション
================================================== */
.feature .bottom {
  position: relative;
  padding: 2.2rem 0;
  margin: 9.5rem 0 0;
}

.feature .bottom__line-top,
.feature .bottom__line-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000000;
}

.feature .bottom__line-top {
  top: 0;
}

.feature .bottom__line-bottom {
  bottom: 0;
}

/* ==================================================
   画像個別サイズ・余白調整（aタグ自体のクリック可視領域化）
================================================== */
.feature .img-fix-btn {
  width: 24.5rem;
  margin: 0;
}

.feature .img-sec-title {
  width: auto;
  object-fit: contain;
  margin: 0;
}

.feature .img-sec-link {
  width: auto;
  object-fit: contain;
}

/* bottomボタンのリンク範囲を画像サイズに限定 */
.feature .bottom a:has(.img-bottom-btn) {
  width: 22%;
  margin: 0 auto;
}

.feature .img-bottom-btn {
  width: 100%;
  margin: 0;
}

/* MV画像 */
.feature .img-01, .feature .img-02, .feature .img-03, .feature .img-04, .feature .img-05 {
  width: auto;
  height: 100%;
  margin: 0;
}

.feature .img-sec-title { width: auto; height: 2.2rem; }
.feature .img-sec-link { width: auto; height: 1.5rem; margin: 0; }
.feature .sec05 .img-sec-link { height: 1.7rem; }
.feature .sec06 .img-sec-link { height: 1.6rem; }

/* sec01 コンテンツ画像リンク領域 */
.feature .sec__content a:has(.img-06) { width: 57%; margin: -6rem auto 0; }
.feature .sec__content a:has(.img-07) { width: 44.5%; margin: 4.6rem 18% 0 auto; }
.feature .sec__content a:has(.img-08) { width: 39%; margin: 5rem auto 0 21.5%; }

/* sec02 */
.feature .sec02 { margin-top: 9.5rem; }
.feature .sec__content a:has(.img-09) { width: 46%; margin: -6rem 21.5% 0 auto; }
.feature .sec__content a:has(.img-10) { width: 46%; margin: 0 21.5% 0 auto; }
.feature .sec__content a:has(.img-11) { width: 34%; margin: 4.5rem auto 0 21.5%; }

/* sec03 */
.feature .sec03 { margin-top: 9.6rem; }
.feature .sec__content a:has(.img-12) { width: 64%; margin: -6rem auto 6rem; }
.feature .sec__content a:has(.img-13) { width: 41%; margin: -1rem auto 6rem; position: relative; z-index: 2; background-color: #ffffff; }
.feature .sec__content a:has(.img-14) { width: 51%; margin: -9.5rem auto 6rem; z-index: 1; }

/* sec04 */
.feature .sec04 { margin-top: 9.7rem; }
.feature .sec__content a:has(.img-15) { width: 46%; margin: -6rem auto 0 21.5%; }
.feature .sec__content a:has(.img-16) { width: 36.4%; margin: 5rem 18.5% 0 auto; }
.feature .sec__content a:has(.img-17) { width: 40.5%; margin: 5rem auto 0 18.5%; }
.feature .sec__content a:has(.img-18) { width: 57%; margin: 5rem auto 0; }

/* sec05 */
.feature .sec05 { margin-top: 3rem; }
.feature .sec__content a:has(.img-19) { width: 51%; margin: -6rem auto 0; }
.feature .sec__content a:has(.img-20) { width: 39%; margin: 5rem auto 0 18.5%; }
.feature .sec__content a:has(.img-21) { width: 47.5%; margin: 5rem 21.5% 0 auto; }

/* sec06 */
.feature .sec06 { margin-top: 9.5rem; }
.feature .sec__content a:has(.img-22) { width: 51%; margin: -6rem auto 0; }
.feature .sec__content a:has(.img-23) { width: 64%; margin: 5rem auto 6rem; z-index: 1; }
.feature .sec__content a:has(.img-24) { width: 46%; margin: -9.5rem auto 0; position: relative; z-index: 2; background-color: #ffffff; }

/* 全てのコンテンツ画像のプロパティを統一 */
.feature .img-06, .feature .img-07, .feature .img-08,
.feature .img-09, .feature .img-10, .feature .img-11,
.feature .img-12, .feature .img-13, .feature .img-14,
.feature .img-15, .feature .img-16, .feature .img-17, .feature .img-18,
.feature .img-19, .feature .img-20, .feature .img-21,
.feature .img-22, .feature .img-23, .feature .img-24 {
  width: 100%;
  margin: 0;
}

/* 重なり画像（img13, img24）のホバー透過時に下の画像が透けないための白背景制御 */
.feature .sec__content a:has(.img-13):hover,
.feature .sec__content a:has(.img-24):hover {
  opacity: 1;
}

.feature .sec__content a:has(.img-13):hover .img-13,
.feature .sec__content a:has(.img-24):hover .img-24 {
  opacity: 0.8;
}

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