/* ============================
   Story Page - 開発ストーリー
   /ceo/story/
============================ */

/* ============================
   CSS Variables
============================ */
:root {
  /* iOS viewport同期用（JSで動的に更新、フォールバックは1vh） */
  --vh: 1vh;

  /* 背景色 */
  --story-bg-01: #BA2A20;
  --story-bg-02: #3A5597;
  --story-bg-03: #F1CD3A;
  --story-bg-04: #4F4F4F;
  --story-bg-05: #BA2A20;
  --story-bg-06: #4F4F4F;
  --story-bg-07: #F1CD3A;
  --story-bg-08: #BA2A20;

  /* サイドバー色 */
  --story-sidebar-red: #BA2A20;
  --story-sidebar-blue: #2B4FAF;
  --story-sidebar-yellow: #F5E651;
}

/* ============================
   Story Page - Body Background
============================ */
/* ページ全体の背景色をセクション01の色に設定 */
body:has(.story-page) {
  background-color: var(--story-bg-01);
}

/* ============================
   Story Page - Breadcrumb
============================ */
/* パンくずリストの色を白に */
.story-section--01 .breadcrumb-inner > * {
  color: #FFFFFF;
}

.story-section--01 .breadcrumb .home span,
.story-section--01 .breadcrumb .post,
.story-section--01 .breadcrumb .current-item {
  color: #FFFFFF;
}

/* 区切り矢印も白に */
.story-section--01 .breadcrumb-inner > * + *::before {
  border-top-color: #FFFFFF;
  border-right-color: #FFFFFF;
}

/* パンくずリストのフェードアウト用transition */
.story-section--01 .breadcrumb {
  transition: opacity 0.5s ease-out;
}

/* SP版ではパンくずリストを非表示 */
@media screen and (max-width: 1024px) {
  .story-section--01 .breadcrumb {
    display: none;
  }
}

/* ============================
   Story Page Container
============================ */
.story-page {
  width: 100%;
  overflow-x: hidden;
}

/* Swiper用スタイル（全画面サイズ） */
.story-page {
  height: 100vh;   /* フォールバック（古いブラウザ用） */
  height: 100dvh;  /* dvh対応ブラウザ用 */
  height: calc(var(--vh) * 100);  /* iOS Chrome/Safari ツールバー追従（JS同期） */
  overflow: hidden;
}

/* ============================
   Story Section Base
============================ */
.story-section {
  position: relative;
  width: 100vw;
  height: 100vh;   /* フォールバック（古いブラウザ用） */
  height: 100dvh;  /* dvh対応ブラウザ用 */
  height: calc(var(--vh) * 100);  /* iOS Chrome/Safari ツールバー追従（JS同期） */
  overflow: hidden;
}

/* ============================
   Section Transition Overlay
   前セクションの背景色オーバーレイ
============================ */
.story-transition-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  /* 初期状態は1（完全に表示）- フラッシュ防止のため */
  /* JSで必要に応じて0に設定 */
  opacity: 1;
}

/* セクション3用: セクション2の背景色 (#3A5597) */
.story-transition-overlay[data-from-section="02"] {
  background-color: var(--story-bg-02);
}

/* セクション4用: セクション3の背景色 (#F1CD3A) */
.story-transition-overlay[data-from-section="03"] {
  background-color: var(--story-bg-03);
}

/* セクション5用: セクション4の背景色 (#4F4F4F) */
.story-transition-overlay[data-from-section="04"] {
  background-color: var(--story-bg-04);
}

/* セクション6用: セクション5の背景色 (#BA2A20) */
.story-transition-overlay[data-from-section="05"] {
  background-color: var(--story-bg-05);
}

/* セクション7用: セクション6の背景色 (#4F4F4F) */
.story-transition-overlay[data-from-section="06"] {
  background-color: var(--story-bg-06);
}

/* セクション8用: セクション7の背景色 (#F1CD3A) */
.story-transition-overlay[data-from-section="07"] {
  background-color: var(--story-bg-07);
}

/* ============================
   Background Layer (最背面)
============================ */
.story-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.story-bg-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* セクション01: bodyの背景色で表示されるため透明 */
.story-section--01 .story-bg-color {
  background-color: transparent;
}

/* セクション02: #B9D8E0 */
.story-section--02 .story-bg-color {
  background-color: var(--story-bg-02);
}

/* セクション03: #FFFAE8 */
.story-section--03 .story-bg-color {
  background-color: var(--story-bg-03);
}

/* セクション04: #F3F3F3 */
.story-section--04 .story-bg-color {
  background-color: var(--story-bg-04);
}

/* セクション05: #FFF4F2 */
.story-section--05 .story-bg-color {
  background-color: var(--story-bg-05);
}

/* セクション06: #E4E4E4 */
.story-section--06 .story-bg-color {
  background-color: var(--story-bg-06);
}

/* セクション07: #FFFAE8 */
.story-section--07 .story-bg-color {
  background-color: var(--story-bg-07);
}

/* セクション08: #BA2A20 */
.story-section--08 .story-bg-color {
  background-color: var(--story-bg-08);
}

/* ============================
   Sidebar Layer
============================ */
.story-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* サイズ・スタイルは後で追加 */
}

.story-number {
  /* スタイルは後で追加 */
}

/* サイドバー色バリエーション */
.story-sidebar--red {
  background-color: var(--story-sidebar-red);
}

.story-sidebar--blue {
  background-color: var(--story-sidebar-blue);
}

.story-sidebar--yellow {
  background-color: var(--story-sidebar-yellow);
}

/* ============================
   Content Layer
============================ */
.story-content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  /* レイアウトは後で追加 */
}

/* ============================
   Section Navigator
============================ */
.story-nav {
  position: absolute;
  top: calc(var(--vh) * 80);  /* iOS Chrome/Safari ツールバー追従（JS同期） */
  left: clamp(1.5rem, 0.608rem + 3.66vw, 5rem);
  /* 390px: 24px, 1920px: 80px */
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.5s ease-out;
}

/* 現在のページ番号（SVG画像） */
.story-nav-current {
  display: block;
  height: auto;
}

/* 01のサイズ: 1920px時 52.7px, 390px時 31.62px (60%) */
.story-nav-num-01 {
  width: clamp(1.976rem, 1.64rem + 1.378vw, 3.294rem);
  /* 390px: 31.62px, 1920px: 52.7px */
  margin-left: -2%;
}

/* 02のサイズ: 1920px時 63.234px, 390px時 37.94px (60%) */
.story-nav-num-02 {
  width: clamp(2.371rem, 1.968rem + 1.654vw, 3.952rem);
  /* 390px: 37.94px, 1920px: 63.234px */
}

/* 03のサイズ: 1920px時 64.134px, 390px時 38.48px (60%) */
.story-nav-num-03 {
  width: clamp(2.405rem, 1.996rem + 1.677vw, 4.008rem);
}

/* 04のサイズ: 1920px時 70.288px, 390px時 42.17px (60%) */
.story-nav-num-04 {
  width: clamp(2.636rem, 2.188rem + 1.838vw, 4.393rem);
  margin-left: 3%;
}

/* 05のサイズ: 1920px時 64.3px, 390px時 38.58px (60%) */
.story-nav-num-05 {
  width: clamp(2.411rem, 2.001rem + 1.681vw, 4.019rem);
}

/* 06のサイズ: 1920px時 67.653px, 390px時 40.59px (60%) */
.story-nav-num-06 {
  width: clamp(2.537rem, 2.106rem + 1.769vw, 4.228rem);
}

/* 07のサイズ: 1920px時 63.297px, 390px時 37.98px (60%) */
.story-nav-num-07 {
  width: clamp(2.374rem, 1.971rem + 1.655vw, 3.956rem);
}

/* 08のサイズ（分子用）: 1920px時 67.992px, 390px時 40.80px (60%) */
.story-nav-num-08 {
  width: clamp(2.55rem, 2.117rem + 1.778vw, 4.25rem);
}

/* 横線 (SVG) */
.story-nav-line {
  width: clamp(2.944rem, 2.444rem + 2.05vw, 4.906rem);
  /* 390px: 47.1px, 1920px: 78.5px */
  height: auto;
  margin-top: clamp(0.438rem, 0.358rem + 0.327vw, 0.75rem);
  /* 390px: 7px, 1920px: 12px */
}

/* SP用のストローク幅調整 */
@media screen and (max-width: 1024px) {
  .story-nav-line path {
    stroke-width: 1.2px;
  }
}

/* 全体のページ数（SVG画像） */
.story-nav-total {
  display: block;
  height: auto;
  width: clamp(1.896rem, 1.574rem + 1.322vw, 3.16rem);
  /* 390px: 30.339px (60%), 1920px: 50.565px */
  margin-top: clamp(0.313rem, 0.265rem + 0.196vw, 0.5rem);
  /* 390px: 5px, 1920px: 8px */
}

/* ============================
   Section 01 - ヒーロー
============================ */

/* SP用改行の表示制御 */
.sp-only {
  display: none;
}

/* PC用改行の表示制御 */
.pc-only {
  display: inline;
}

@media screen and (max-width: 1024px) {
  .sp-only {
    display: block;
  }

  .pc-only {
    display: none;
  }
}

/* セクション01 コンテンツレイアウト (PC) */
.story-section--01 .story-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding-left: clamp(3.25rem, -11.699rem + 31.103vw, 25.625rem);
  padding-top: 2%;
  gap: clamp(2.25rem, -2.617rem + 7.598vw, 6.5rem);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity 0.5s ease-out;
}

/* セクション01 フェードアウト（JSでクラス付与時） */
/* .story-nav は消えないようにする */
.story-section--01.is-fading-out .story-content,
.story-section--01.is-fading-out .breadcrumb {
  opacity: 0;
}

/* セクション02 フェードアウト（JSでクラス付与時） */
.story-section--02.is-fading-out .story-02-text-area,
.story-section--02.is-fading-out .story-02-image,
.story-section--02.is-fading-out .story-blob {
  opacity: 0 !important;
  transition: opacity 0.5s ease-out !important;
}

/* セクション03 フェードアウト（JSでクラス付与時） */
.story-section--03.is-fading-out .story-03-text-area,
.story-section--03.is-fading-out .story-03-image,
.story-section--03.is-fading-out .story-blob {
  opacity: 0 !important;
  transition: opacity 0.5s ease-out !important;
}

/* セクション04 フェードアウト（JSでクラス付与時） */
.story-section--04.is-fading-out .story-04-text-area,
.story-section--04.is-fading-out .story-04-image,
.story-section--04.is-fading-out .story-blob {
  opacity: 0 !important;
  transition: opacity 0.5s ease-out !important;
}

/* セクション05 フェードアウト（JSでクラス付与時） */
.story-section--05.is-fading-out .story-05-text-area,
.story-section--05.is-fading-out .story-05-image,
.story-section--05.is-fading-out .story-blob {
  opacity: 0 !important;
  transition: opacity 0.5s ease-out !important;
}

/* セクション06 フェードアウト（JSでクラス付与時） */
.story-section--06.is-fading-out .story-06-text-area,
.story-section--06.is-fading-out .story-06-image,
.story-section--06.is-fading-out .story-blob {
  opacity: 0 !important;
  transition: opacity 0.5s ease-out !important;
}

/* セクション07 フェードアウト（JSでクラス付与時） */
.story-section--07.is-fading-out .story-07-text-area,
.story-section--07.is-fading-out .story-07-image,
.story-section--07.is-fading-out .story-blob {
  opacity: 0 !important;
  transition: opacity 0.5s ease-out !important;
}

/* CEO画像 (PC) */
.story-01-ceo-image {
  flex-shrink: 0;
  width: clamp(15.4rem, 10.991rem + 6.883vw, 19.25rem);
  height: clamp(33.32rem, 23.78rem + 14.892vw, 41.65rem);
}

.story-01-ceo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 55 / 119;
}

/* テキストエリア (PC) */
.story-01-text-area {
  flex-shrink: 0;
}

/* PC版のみ: transformアニメーション用 */
@media screen and (min-width: 1025px) {
  .story-01-text-area {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  }
}

/* セクション1が前のスライド（swiper-slide-prev）の時、テキストを上に配置
   これによりセクション2→1に戻る際、最初からテキストが上にある状態になる
   transitionを無効にしてアニメーションなしで即座に位置を設定 */
.story-section--01.swiper-slide-prev .story-01-text-area {
  transform: translateY(-50vh);
  transition: none;
}

.story-section--01.swiper-slide-prev .story-01-scroll {
  opacity: 0;
  transition: none;
}

/* セクション1が前のスライド時、コンテンツを非表示（セクション2→1に戻る時のフェードイン準備） */
.story-section--01.swiper-slide-prev .story-content,
.story-section--01.swiper-slide-prev .breadcrumb {
  opacity: 0;
  transition: none;
}

/* セクション1がアクティブになった時、コンテンツをフェードイン */
.story-section--01.swiper-slide-active .story-content,
.story-section--01.swiper-slide-active .breadcrumb {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* ============================
   セクション02〜07: 上スクロールで戻る時の設定
   （セクション01と同様の処理）
============================ */

/* セクション02が前のスライド時（セクション03→02に戻る準備） */
.story-section--02.swiper-slide-prev .story-02-text-area,
.story-section--02.swiper-slide-prev .story-02-image {
  transform: translateY(-50vh);
  transition: none;
}
.story-section--02.swiper-slide-prev .story-content {
  opacity: 0;
  transition: none;
}
.story-section--02.swiper-slide-active .story-content {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* セクション03が前のスライド時（セクション04→03に戻る準備） */
.story-section--03.swiper-slide-prev .story-03-text-area,
.story-section--03.swiper-slide-prev .story-03-image {
  transform: translateY(-50vh);
  transition: none;
}
.story-section--03.swiper-slide-prev .story-content {
  opacity: 0;
  transition: none;
}
.story-section--03.swiper-slide-active .story-content {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* セクション04が前のスライド時（セクション05→04に戻る準備） */
.story-section--04.swiper-slide-prev .story-04-text-area,
.story-section--04.swiper-slide-prev .story-04-image {
  transform: translateY(-50vh);
  transition: none;
}
.story-section--04.swiper-slide-prev .story-content {
  opacity: 0;
  transition: none;
}
.story-section--04.swiper-slide-active .story-content {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* セクション05が前のスライド時（セクション06→05に戻る準備） */
.story-section--05.swiper-slide-prev .story-05-text-area,
.story-section--05.swiper-slide-prev .story-05-image {
  transform: translateY(-50vh);
  transition: none;
}
.story-section--05.swiper-slide-prev .story-content {
  opacity: 0;
  transition: none;
}
.story-section--05.swiper-slide-active .story-content {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* セクション06が前のスライド時（セクション07→06に戻る準備） */
.story-section--06.swiper-slide-prev .story-06-text-area,
.story-section--06.swiper-slide-prev .story-06-image {
  transform: translateY(-50vh);
  transition: none;
}
.story-section--06.swiper-slide-prev .story-content {
  opacity: 0;
  transition: none;
}
.story-section--06.swiper-slide-active .story-content {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* セクション07が前のスライド時（セクション08→07に戻る準備） */
.story-section--07.swiper-slide-prev .story-07-text-area,
.story-section--07.swiper-slide-prev .story-07-image {
  transform: translateY(-50vh);
  transition: none;
}
.story-section--07.swiper-slide-prev .story-content {
  opacity: 0;
  transition: none;
}
.story-section--07.swiper-slide-active .story-content {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* 見出し画像 (PC) */
.story-01-title-image {
  width: clamp(33.6rem, 23.98rem + 15.017vw, 42rem);
  height: clamp(3.04rem, 2.17rem + 1.359vw, 3.8rem);
}

.story-01-title-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* PC版見出し画像の表示切り替え */
.story-01-title-pc {
  display: block;
}

.story-01-title-sp {
  display: none;
}

/* 見出しテキスト (PC) */
.story-01-heading {
  margin-top: clamp(3rem, 2.141rem + 1.341vw, 3.75rem);
  color: #FFF;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.5rem, 0.927rem + 0.894vw, 2rem);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(0.25rem, 0.124rem + 0.197vw, 0.36rem);
}

/* 本文テキスト (PC) */
.story-01-body {
  margin-top: clamp(1.3rem, 0.928rem + 0.581vw, 1.625rem);
  margin-left: clamp(0.8rem, 0.571rem + 0.358vw, 1rem); /* 見出しテキストより15px右 */
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1rem, 0.571rem + 0.67vw, 1.375rem);
  font-style: normal;
  font-weight: 700;
  line-height: clamp(2.25rem, 2.083rem + 0.347vw, 2.5rem);
  letter-spacing: clamp(0.22rem, 0.157rem + 0.098vw, 0.275rem);
}

.story-01-body p {
  margin: 0;
}

.story-01-body p + p {
  margin-top: 1em;
}

/* Scrollインジケーター */
.story-01-scroll {
  position: absolute;
  top: 55%;
  right: 6%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story-01-scroll-text {
  color: #FFF;
  font-size: clamp(0.875rem, 0.811rem + 0.26vw, 1.125rem);
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: none;
  writing-mode: vertical-lr;
}

/* 縦線 */
.story-01-scroll-line {
  display: block;
  --scroll-line-thickness: clamp(1.28px, 1.097px + 0.047vw, 2px);
  width: var(--scroll-line-thickness);
  height: clamp(2.5rem, 2.181rem + 1.31vw, 3.75rem);
  background: rgba(255, 255, 255, 0.2);
  margin-top: clamp(0.5rem, 0.436rem + 0.26vw, 0.75rem);
  position: relative;
  overflow: hidden;
  color: #FFF;
}

.story-01-scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  animation: scrollLineFill 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
  backface-visibility: hidden;
  z-index: 1;
}

@keyframes scrollLineFill {
  0% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

/* ============================
   Section 01 - SP版
============================ */
@media screen and (max-width: 1024px) {
  /* セクション01 コンテンツレイアウト (SP) */
  .story-section--01 .story-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding-left: 0;
    padding-top: 0;
    gap: 0;
  }

  /* テキストエリア (SP) - 上部に配置、スクロール可能 */
  .story-01-text-area {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(8.75rem, 7.981rem + 3.155vw, 10rem);
    max-height: 55vh;
    overflow-y: auto;
    padding-bottom: 14vh; /* ぼかし領域を避けるための余白 */
    /* スクロールバー非表示 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
    /* タッチスクロールを有効化 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* スクロールバー非表示 (Webkit) */
  .story-01-text-area::-webkit-scrollbar {
    display: none;
  }

  /* 見出し画像 (SP) */
  .story-01-title-image {
    width: clamp(16rem, 11.079rem + 20.189vw, 24rem);
    height: clamp(5rem, 3.462rem + 6.309vw, 7.5rem);
  }

  /* SP版見出し画像の表示切り替え */
  .story-01-title-pc {
    display: none;
  }

  .story-01-title-sp {
    display: block;
  }

  /* 見出しテキスト (SP) */
  .story-01-heading {
    margin-top: 40px;
    text-align: center;
    font-size: clamp(1.25rem, 0.866rem + 1.577vw, 1.875rem);
    line-height: 32px;
    letter-spacing: 3.2px;
  }

  /* 本文テキスト (SP) */
  .story-01-body {
    margin-top: 32px;
    margin-left: 0;
    width: clamp(19.375rem, 5.457rem + 57.098vw, 42rem);
    text-align: center;
    font-size: clamp(0.875rem, 0.567rem + 1.262vw, 1.375rem);
    font-weight: 500;
    line-height: clamp(1.875rem, 1.491rem + 1.577vw, 2.5rem);
    letter-spacing: 1.68px;
  }

  /* CEO画像 (SP) - 画面下部に配置、下半分はみ出し */
  .story-01-ceo-image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(-19.375rem, -8.069rem - 17.666vw, -12.375rem);
    /* 1024px: -310px, 390px: -198px */
    top: auto;
    width: clamp(20rem, 85vw, 24rem);
    height: auto;
    aspect-ratio: 366 / 418;
    z-index: 6; /* グラデーションより上 */
  }

  .story-01-ceo-image img {
    height: auto;
    object-fit: contain;
    aspect-ratio: auto;
  }
  .story-nav {
    top: calc(var(--vh) * 86);  /* iOS Chrome/Safari ツールバー追従（JS同期） */
  }
  /* Scrollインジケーター */
.story-01-scroll {
  position: absolute;
  top: 78%;
  right: 3%;
  z-index: 6
}
.story-01-body p + p {
  margin-top: 2em;
}

  /* 下部グラデーションぼかし */
  .story-section--01 .story-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44%;
    background: linear-gradient(180deg, rgba(186, 42, 32, 0.00) 0%, #BA2A20 34.13%);
    z-index: 4; /* テキストより上、CEO画像(z-index:6)より下 */
    pointer-events: none;
  }
}

/* ============================
   共通ブロブ（セクション02〜07）
============================ */
/* セクション2〜7の背景でブロブのはみ出しを非表示 */
.story-section--02 .story-bg,
.story-section--03 .story-bg,
.story-section--04 .story-bg,
.story-section--05 .story-bg,
.story-section--06 .story-bg,
.story-section--07 .story-bg {
  overflow: hidden;
}

.story-blob {
  position: absolute;
  pointer-events: none;
  max-width: none; /* グローバルのimg max-width: 100%を上書き */
  border: none !important; /* 枠線を削除 */
  outline: none !important; /* アウトラインを削除 */
  box-shadow: none !important;
}

/* SVGの枠線を確実に削除 */
.story-blob path,
.story-blob-path {
  stroke: none !important;
  stroke-width: 0 !important;
}

/* SP版: ドロップシャドウフィルターを無効化（枠線のように見える問題を解消） */
@media screen and (max-width: 3024px) {
  .story-blob g {
    filter: none !important;
  }
}

/* ブロブの色（各セクションで設定） */
.story-section--02 .story-blob-path { fill: #B9D8E0; }
.story-section--03 .story-blob-path { fill: #FFFAE8; }
.story-section--04 .story-blob-path { fill: #F3F3F3; }
.story-section--05 .story-blob-path { fill: #FFF4F2; }
.story-section--06 .story-blob-path { fill: #E4E4E4; }
.story-section--07 .story-blob-path { fill: #FFFAE8; }

/* ほわほわアニメーション（GPU加速、軽量） */
@keyframes blob-float {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.015) rotate(0.6deg);
  }
  50% {
    transform: scale(0.99) rotate(-0.4deg);
  }
  75% {
    transform: scale(1.01) rotate(0.3deg);
  }
}

/* SVG内部のg要素にアニメーション適用（スクロールtransformと競合しない） */
.story-blob > g {
  transform-origin: center center;
  animation: blob-float 18s ease-in-out infinite;
  will-change: transform;
}

/* PC版（1025px以上）のブロブサイズ */
/* アニメーションで拡大・移動するため、基本サイズを小さめに設定 */
@media screen and (min-width: 1025px) {
  .story-blob {
    right: -7vw;
    top: -6vh;
    width: 98vw;
    height: auto;
    aspect-ratio: 2008.466 / 1974.85;
  }
}

/* ============================
   セクション02〜07 - ブロブアニメーション（PC版）
============================ */
@media screen and (min-width: 1025px) {
  /* 初期状態: ブロブは画面外（下）に配置 */
  .story-section--02 .story-blob,
  .story-section--03 .story-blob,
  .story-section--04 .story-blob,
  .story-section--05 .story-blob,
  .story-section--06 .story-blob,
  .story-section--07 .story-blob {
    transform: translateY(120vh);
    transition: transform 0.15s ease-out;
    will-change: transform;
  }
}

/* ============================
   セクション02〜07 - ブロブアニメーション（SP版）
============================ */
@media screen and (max-width: 1024px) {
  .story-section--02 .story-blob,
  .story-section--03 .story-blob,
  .story-section--04 .story-blob,
  .story-section--05 .story-blob,
  .story-section--06 .story-blob,
  .story-section--07 .story-blob {
    right: clamp(-21rem, -28.5rem + 31vw, -8.5rem);
    top: calc(-6vh - 54vh * (100vw - 390px) / 634px);
    width: clamp(54rem, 37rem + 71vw, 82rem);
    height: auto;
    aspect-ratio: 926 / 917;
    /* 初期状態: 画面外（下）に配置 + 反転・回転 */
    transform: scaleX(-1) rotate(-10.968deg) translateY(150vh);
    transition: transform 0.25s ease-out;
    will-change: transform;
  }
}

/* ============================
   Section 02 - コンテンツアニメーション
============================ */
@media screen and (min-width: 1025px) {
  /* 初期状態: テキストエリアは画面外（下）に配置 */
  /* セクション1と同じ0.3sで滑らかにスクロール */
  .story-section--02 .story-02-text-area {
    transform: translateY(100vh);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    will-change: transform, opacity;
  }

  /* 初期状態: 画像は画面外（下）に配置 */
  .story-section--02 .story-02-image {
    transform: translateY(100vh);
    transition: transform 0.15s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

@media screen and (max-width: 1024px) {
  /* SP版: テキストエリアの初期状態 */
  /* セクション1と同じ0.3sで滑らかにスクロール */
  .story-section--02 .story-02-text-area {
    transform: translateY(120vh);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    will-change: transform, opacity;
  }

  /* SP版: 画像の初期状態（中央配置を維持） */
  .story-section--02 .story-02-image {
    transform: translateX(-50%) translateY(120vh);
    transition: transform 0.25s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

/* ============================
   Section 02 - コンテンツ（PC版）
============================ */

/* セクション02 コンテンツレイアウト */
.story-section--02 .story-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* テキストエリア */
.story-02-text-area {
  position: absolute;
  left: clamp(10.625rem, -5.91rem + 25.81vw, 25.063rem);
  /* 1025px: 214px, 1920px: 401px */
  top: 30%;
}

/* 見出し枠 */
.story-02-heading-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: clamp(21rem, -0.656rem + 33.8vw, 39.375rem);
  /* 1025px: 336px, 1920px: 630px */
  height: clamp(1.875rem, -0.069rem + 3.03vw, 3.5rem);
  /* 1025px: 30px, 1920px: 56px */
  background: #001854;
}

/* 見出しテキスト（PC版は1行） */
.story-02-heading-line1,
.story-02-heading-line2 {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.2rem, -0.013rem + 1.89vw, 2.25rem);
  /* 1025px: 19.2px, 1920px: 36px */
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(0.192rem, -0.002rem + 0.3vw, 0.36rem);
  /* 1025px: 3.07px, 1920px: 5.76px */
}

/* 本文テキスト */
.story-02-body {
  margin-top: clamp(1.333rem, -0.016rem + 2.105vw, 2.5rem);
  /* 1025px: 21.3px, 1920px: 40px */
  width: clamp(21rem, -0.656rem + 33.8vw, 39.375rem);
  /* 1025px: 336px, 1920px: 630px */
  color: #001854;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.8rem, -0.01rem + 1.264vw, 1.5rem);
  /* 1025px: 12.8px, 1920px: 24px */
  font-style: normal;
  font-weight: 700;
  line-height: clamp(1.6rem, -0.02rem + 2.527vw, 3rem);
  /* 1025px: 25.6px, 1920px: 48px */
  letter-spacing: clamp(0.16rem, -0.002rem + 0.253vw, 0.3rem);
  /* 1025px: 2.56px, 1920px: 4.8px */
}

.story-02-body p {
  margin: 0;
}

.story-02-body p + p {
  margin-top: 1em;
}

/* 画像エリア */
.story-02-image {
  position: absolute;
  right: clamp(1.5rem, -4.226rem + 8.939vw, 6.5rem);
  top: 11%;
}

.story-02-image-pc {
  display: block;
  width: clamp(29rem, 7.527rem + 33.52vw, 47.75rem);
  /* 1025px: 405px, 1920px: 764px */
  height: auto;
  aspect-ratio: 764 / 805.635;
  max-width: none;
}

.story-02-image-sp {
  display: none;
}

/* ============================
   Section 02 - コンテンツ（SP版）
============================ */
@media screen and (max-width: 1024px) {
  /* テキストエリア（SP版） */
  .story-02-text-area {
    position: relative;
    /* PC版のabsolute位置をリセット */
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    /* SP版スタイル */
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding-bottom: 5vh;
    /* スクロールバー非表示 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
    /* タッチスクロールを有効化 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* スクロールバー非表示 (Webkit) */
  .story-02-text-area::-webkit-scrollbar {
    display: none;
  }

  /* 見出し枠（SP版：2行に分割） */
  .story-02-heading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    background: transparent;
    margin-top: 12vh;
  }

  /* 見出し各行の枠 */
  .story-02-heading-line1,
  .story-02-heading-line2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #001854;
    font-size: clamp(1.25rem, 0.866rem + 1.577vw, 1.875rem);
    letter-spacing: 3.2px;
  }

  .story-02-heading-line1 {
    width: clamp(10.5rem, 7.732rem + 11.356vw, 15rem)!important;
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
  }

  .story-02-heading-line2 {
    width: clamp(13.875rem, 10.107rem + 15.457vw, 20rem);
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
    padding-left: 7%;
  }

  /* 本文テキスト（SP版） */
  .story-02-body {
    margin-top: 30px;
    width: clamp(19.375rem, 14.069rem + 21.767vw, 28rem);
    text-align: center;
    font-size: clamp(0.875rem, 0.644rem + 0.946vw, 1.25rem);
    line-height: clamp(1.875rem, 1.306rem + 2.334vw, 2.8rem);
    letter-spacing: 1.68px;
  }

  /* 画像エリア（SP版） */
  .story-02-image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4vh;
    top: auto;
    right: auto;
    z-index: 6;  /* ぼかしより上に表示 */
  }

  .story-02-image-pc {
    display: none;
  }

  .story-02-image-sp {
    display: block;
    width: clamp(20rem, 13.849rem + 25.237vw, 30rem);
    height: auto;
    aspect-ratio: 327.269 / 290.595;
    max-width: none;
  }

  /* 下部グラデーションぼかし（SP版のみ）- ブロブの色 #B9D8E0 をベースに */
  .story-02-blur {
    display: none !important;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;   /* フォールバック（古いブラウザ用） */
    height: 100dvh;  /* iOS対応（ツールバー追従） */
    top: 40%;
    background: linear-gradient(180deg, rgba(185, 216, 224, 0.00) 0%, #B9D8E0 15%, #B9D8E0 100%);
    pointer-events: none;
    z-index: 4;
  }

  .story-02-blur.blur-active {
    display: block !important;
  }
}

/* ============================
   Section 03 - コンテンツアニメーション
============================ */
@media screen and (min-width: 1025px) {
  /* 初期状態: テキストエリアと画像は画面外（下）に配置 */
  .story-section--03 .story-03-text-area,
  .story-section--03 .story-03-image {
    transform: translateY(100vh);
    transition: transform 0.15s ease-out;
    will-change: transform;
  }

  .story-section--03 .story-03-image {
    transition: transform 0.15s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

@media screen and (max-width: 1024px) {
  /* SP版: テキストエリアの初期状態 */
  .story-section--03 .story-03-text-area {
    transform: translateY(120vh);
    transition: transform 0.25s ease-out;
    will-change: transform;
  }

  /* SP版: 画像の初期状態（中央配置を維持） */
  .story-section--03 .story-03-image {
    transform: translateX(-50%) translateY(120vh);
    transition: transform 0.25s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

/* ============================
   Section 03 - コンテンツ（PC版）
============================ */

/* セクション03 コンテンツレイアウト */
.story-section--03 .story-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 画像エリア（左側） */
.story-03-image {
  position: absolute;
  left: 15%;
  top: 14vh;
}

.story-03-image-pc {
  display: block;
  width: clamp(24rem, 5.676rem + 28.6vw, 40rem);
  /* 1025px: 384px, 1920px: 640px */
  height: clamp(24rem, 5.676rem + 28.6vw, 40rem);
  /* 1025px: 384px, 1920px: 640px */
  object-fit: cover;
  max-width: none;
}

.story-03-image-sp {
  display: none;
}

/* テキストエリア（右側） */
.story-03-text-area {
  position: absolute;
  left: calc(15% + clamp(24rem, 5.676rem + 28.6vw, 40rem) + clamp(1.838rem, 0.434rem + 2.19vw, 3.063rem));
  /* 画像の右端 + gap (1025px: 29.4px, 1920px: 49px) */
  top: 15vh;
  width: clamp(23rem, 4.103rem + 29.497vw, 39.5rem);
}

/* 下部グラデーションぼかし（PC版） */
/* PC版ではぼかしを常に非表示 */
.story-03-blur {
  display: none !important;
  position: absolute;
  width: clamp(23rem, 4.103rem + 29.497vw, 39.5rem);
  height: 100vh;   /* フォールバック（古いブラウザ用） */
  height: 100dvh;  /* iOS対応（ツールバー追従） */
  top: 50%;
  background: linear-gradient(180deg, rgba(255, 250, 232, 0.00) 0%, #FFFAE8 15%, #FFFAE8 100%);
  pointer-events: none;
  z-index: 4;
}

/* 見出し枠 */
.story-03-heading-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: clamp(17rem, 13.431rem + 14.641vw, 31rem);
  /* 1025px: 285px, 1920px: 475px */
  height: clamp(4.05rem, 0.958rem + 4.83vw, 6.75rem);
  /* 1025px: 64.8px, 1920px: 108px */
  background: #F1CD3A;
  padding-left: clamp(0.75rem, 0.177rem + 0.89vw, 1.25rem);
  /* 1025px: 12px, 1920px: 20px */
}

/* 見出しテキスト（PC版は2行） */
.story-03-heading-line1,
.story-03-heading-line2 {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.35rem, 0.319rem + 1.61vw, 2.25rem);
  /* 1025px: 21.6px, 1920px: 36px */
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(0.216rem, 0.052rem + 0.26vw, 0.36rem);
  /* 1025px: 3.456px, 1920px: 5.76px */
}

/* 本文テキスト */
.story-03-body {
  margin-top: clamp(1.5rem, 0.355rem + 1.79vw, 2.5rem);
  /* 1025px: 24px, 1920px: 40px */
  color: #EDB134;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.9rem, 0.213rem + 1.07vw, 1.5rem);
  /* 1025px: 14.4px, 1920px: 24px */
  font-style: normal;
  font-weight: 700;
  line-height: clamp(1.8rem, 0.426rem + 2.15vw, 3rem);
  /* 1025px: 28.8px, 1920px: 48px */
  letter-spacing: clamp(0.18rem, 0.043rem + 0.21vw, 0.3rem);
  /* 1025px: 2.88px, 1920px: 4.8px */
}

.story-03-body p {
  margin: 0;
}

.story-03-body p + p {
  margin-top: 1em;
}

/* 引用部分のスタイル（PC版のみ） */
.story-03-quote {
  font-size: clamp(1.2rem, 0.284rem + 1.43vw, 2rem) !important;
  /* 1025px: 19.2px, 1920px: 32px */
  letter-spacing: clamp(0.24rem, 0.057rem + 0.29vw, 0.4rem) !important;
  /* 1025px: 3.84px, 1920px: 6.4px */
}

/* ============================
   Section 03 - コンテンツ（SP版）
============================ */
@media screen and (max-width: 1024px) {
  /* テキストエリア（SP版） */
  .story-03-text-area {
    position: relative;
    /* PC版のabsolute位置をリセット */
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    /* SP版スタイル */
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* 見出し枠（SP版：2行に分割） - ぼかしより上に表示 */
  .story-03-heading-box {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    background: transparent;
    margin-top: 9vh;
    padding-left: 0;
  }

  /* 見出し各行の枠 */
  .story-03-heading-line1,
  .story-03-heading-line2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1CD3A;
    font-size: clamp(1.25rem, 0.866rem + 1.577vw, 1.875rem);
    letter-spacing: 3.2px;
  }

  .story-03-heading-line1 {
    width: clamp(12.3rem, 9.04rem + 13.375vw, 17.6rem);
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
    padding-left: 4%;
  }

  .story-03-heading-line2 {
    width: clamp(17.5rem, 13.271rem + 17.35vw, 24.375rem);
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
  }

  /* 本文テキスト（SP版） */
  .story-03-body {
    margin-top: 30px;
    width: clamp(20rem, 15.079rem + 20.189vw, 28rem);
    text-align: center;
    font-size: clamp(0.875rem, 0.644rem + 0.946vw, 1.25rem);
    line-height: clamp(1.875rem, 1.306rem + 2.334vw, 2.8rem);
    letter-spacing: 1.68px;
    
  }

  /* SP版では引用スタイルを適用しない */
  .story-03-quote {
    font-size: inherit !important;
    letter-spacing: inherit !important;
  }

  /* 画像エリア（SP版） */
  .story-03-image {
    position: absolute;
    left: 50%;
    bottom: 0px;
    top: auto;
    right: auto;
  }

  .story-03-image-pc {
    display: none;
  }

  .story-03-image-sp {
    display: block;
    width: clamp(20rem, 13.849rem + 25.237vw, 30rem);
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: none;
  }

  /* 画像をぼかしより上に表示 */
  .story-03-image {
    z-index: 6;
  }

  /* 下部グラデーションぼかし（SP版） */
  /* デフォルトは非表示、JSでdisplay:blockを直接設定 */
  .story-03-blur {
    display: none !important;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;   /* フォールバック（古いブラウザ用） */
    height: 100dvh;  /* iOS対応（ツールバー追従） */
    top: 40%;
    background: linear-gradient(180deg, rgba(255, 250, 232, 0.00) 0%, #FFFAE8 15%, #FFFAE8 100%);
    pointer-events: none;
    z-index: 4;
  }

  /* SP版: blur-activeクラス時に表示（JSでも直接display設定するため両方対応） */
  .story-03-blur.blur-active {
    display: block !important;
  }
}

/* ============================
   Section 04 - 背景色
============================ */
.story-section--04 .story-bg-color {
  background-color: var(--story-bg-04);
}

/* ============================
   Section 04 - コンテンツアニメーション
============================ */
@media screen and (min-width: 1025px) {
  /* 初期状態: テキストエリアと画像は画面外（下）に配置 */
  .story-section--04 .story-04-text-area,
  .story-section--04 .story-04-image {
    transform: translateY(100vh);
    transition: transform 0.15s ease-out;
    will-change: transform;
  }

  .story-section--04 .story-04-image {
    transition: transform 0.15s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

@media screen and (max-width: 1024px) {
  /* SP版: テキストエリアの初期状態 */
  .story-section--04 .story-04-text-area {
    transform: translateY(120vh);
    transition: transform 0.25s ease-out;
    will-change: transform;
  }

  /* SP版: 画像の初期状態（中央配置を維持） */
  .story-section--04 .story-04-image {
    transform: translateX(-50%) translateY(120vh);
    transition: transform 0.25s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

/* ============================
   Section 04 - コンテンツ（PC版）
============================ */
/* テキストエリア（セクション2と同じ位置） */
.story-04-text-area {
  position: absolute;
  left: clamp(10.625rem, -5.91rem + 25.81vw, 25.063rem);
  /* 1025px: 214px, 1920px: 401px（セクション2と同じ） */
  top: 25%;
}

/* 見出し枠 */
.story-04-heading-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: clamp(14rem, 0.257rem + 21.453vw, 26rem);
  height: clamp(4.25rem, 1.101rem + 4.916vw, 7rem);
  background: #4F4F4F;
  padding-left: clamp(0.75rem, 0.177rem + 0.89vw, 1.25rem);
  /* 1025px: 12px, 1920px: 20px */
}

/* 見出しテキスト（PC版は2行） */
.story-04-heading-line1,
.story-04-heading-line2 {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.2rem, -0.013rem + 1.89vw, 2.25rem);
  /* 1025px: 19.2px, 1920px: 36px */
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(0.192rem, -0.002rem + 0.3vw, 0.36rem);
  /* 1025px: 3.07px, 1920px: 5.76px */
}

/* 本文テキスト */
.story-04-body {
  margin-top: clamp(1.333rem, -0.016rem + 2.105vw, 2.5rem);
  /* 1025px: 21.3px, 1920px: 40px */
  width: clamp(20rem, 5.255rem + 23.017vw, 32.875rem);
  /* 1025px: 282px, 1920px: 528px */
  color: #4F4F4F;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.8rem, -0.01rem + 1.264vw, 1.5rem);
  /* 1025px: 12.8px, 1920px: 24px */
  font-style: normal;
  font-weight: 700;
  line-height: clamp(1.6rem, -0.02rem + 2.527vw, 3rem);
  /* 1025px: 25.6px, 1920px: 48px */
  letter-spacing: clamp(0.16rem, -0.002rem + 0.253vw, 0.3rem);
  /* 1025px: 2.56px, 1920px: 4.8px */
}

.story-04-body p {
  margin: 0;
}

.story-04-body p + p {
  margin-top: 1em;
}

/* 画像エリア（セクション2と同じ位置） */
.story-04-image {
  position: absolute;
  right: clamp(3.5rem, 0.064rem + 5.363vw, 6.5rem);
  top: 11%;
}

.story-04-image-pc {
  display: block;
  width: clamp(28rem, 6.884rem + 32.962vw, 46.438rem);
  /* 1025px: 396.6px, 1920px: 743px */
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: none;
}

.story-04-image-sp {
  display: none;
}

/* ============================
   Section 04 - コンテンツ（SP版）
============================ */
@media screen and (max-width: 1024px) {
  /* テキストエリア（SP版） */
  .story-04-text-area {
    position: relative;
    /* PC版のabsolute位置をリセット */
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    /* SP版スタイル */
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding-bottom: 5vh;
    /* スクロールバー非表示 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
    /* タッチスクロールを有効化 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* スクロールバー非表示 (Webkit) */
  .story-04-text-area::-webkit-scrollbar {
    display: none;
  }

  /* 見出し枠（SP版：2行に分割） */
  .story-04-heading-box {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    background: transparent;
    margin-top: 9vh;
    padding-left: 0;
  }

  /* 見出し各行の枠 */
  .story-04-heading-line1,
  .story-04-heading-line2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4F4F4F;
    font-size: clamp(1.25rem, 0.866rem + 1.577vw, 1.875rem);
    letter-spacing: 3.2px;
  }

  .story-04-heading-line1 {
    width: clamp(12.5rem, 9.24rem + 13.375vw, 17.8rem);
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
    padding-left: 4%;
  }

  .story-04-heading-line2 {
    width: clamp(15rem, 10.771rem + 17.35vw, 21.875rem);
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
  }

  /* 本文テキスト（SP版） */
  .story-04-body {
    margin-top: 30px;
    width: clamp(19.5rem, 14.271rem + 21.451vw, 28rem);
    text-align: center;
    font-size: clamp(0.875rem, 0.644rem + 0.946vw, 1.25rem);
    line-height: clamp(1.875rem, 1.306rem + 2.334vw, 2.8rem);
    letter-spacing: 1.68px;
  }

  /* 画像エリア（SP版） */
  .story-04-image {
    position: absolute;
    left: 56%;
    transform: translateX(-50%);
    bottom: 5vh;
    top: auto;
    right: auto;
    z-index: 6;
  }

  .story-04-image-pc {
    display: none;
  }

  .story-04-image-sp {
    display: block;
    width: clamp(20.75rem, 15.06rem + 23.344vw, 30rem);
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: none;
  }

  /* 下部グラデーションぼかし（SP版のみ）- ブロブの色 #F3F3F3 をベースに */
  .story-04-blur {
    display: none !important;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;   /* フォールバック（古いブラウザ用） */
    height: 100dvh;  /* iOS対応（ツールバー追従） */
    top: 40%;
    background: linear-gradient(180deg, rgba(243, 243, 243, 0.00) 0%, #F3F3F3 15%, #F3F3F3 100%);
    pointer-events: none;
    z-index: 4;
  }

  .story-04-blur.blur-active {
    display: block !important;
  }
}

/* ============================
   Section 05 - コンテンツアニメーション
============================ */
@media screen and (min-width: 1025px) {
  /* 初期状態: テキストエリアと画像は画面外（下）に配置 */
  .story-section--05 .story-05-text-area,
  .story-section--05 .story-05-image {
    transform: translateY(100vh);
    transition: transform 0.15s ease-out;
    will-change: transform;
  }

  .story-section--05 .story-05-image {
    transition: transform 0.15s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

@media screen and (max-width: 1024px) {
  /* SP版: テキストエリアの初期状態 */
  .story-section--05 .story-05-text-area {
    transform: translateY(120vh);
    transition: transform 0.25s ease-out;
    will-change: transform;
  }

  /* SP版: 画像の初期状態（中央配置を維持） */
  .story-section--05 .story-05-image {
    transform: translateX(-50%) translateY(120vh);
    transition: transform 0.25s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

/* ============================
   Section 05 - コンテンツ（PC版）
   レイアウトはセクション03と同じ（左画像、右テキスト）
============================ */

/* セクション05 コンテンツレイアウト */
.story-section--05 .story-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 画像エリア（左側） - セクション3と同じ位置 */
.story-05-image {
  position: absolute;
  left: 15%;
  top: 15vh;
}

.story-05-image-pc {
  display: block;
  width: clamp(25.5rem, 6.03rem + 30.39vw, 42.5rem);
  /* 1025px: 408px, 1920px: 680px */
  height: clamp(24.45rem, 5.785rem + 29.15vw, 40.75rem);
  /* 1025px: 391.2px, 1920px: 652px */
  object-fit: cover;
  max-width: none;
}

.story-05-image-sp {
  display: none;
}

/* テキストエリア（右側） - セクション3と同じ位置 */
.story-05-text-area {
  position: absolute;
  left: calc(15% + clamp(25.5rem, 6.03rem + 30.39vw, 42.5rem) + clamp(1.838rem, 0.434rem + 2.19vw, 3.063rem));
  /* 画像の右端 + gap */
  top: 16vh;
  width: clamp(23rem, 4.103rem + 29.497vw, 39.5rem);
}

/* 見出し枠 */
.story-05-heading-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: clamp(20.1rem, 7.643rem + 19.464vw, 31rem);
  /* 1025px: 321.6px, 1920px: 536px */
  height: clamp(4.05rem, 0.958rem + 4.83vw, 6.75rem);
  /* 1025px: 60.6px, 1920px: 101px */
  background: #BA2A20;
  padding-left: clamp(0.75rem, 0.177rem + 0.89vw, 1.25rem);
  /* 1025px: 12px, 1920px: 20px */
}

/* 見出しテキスト（PC版は2行） */
.story-05-heading-line1,
.story-05-heading-line2 {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.35rem, 0.319rem + 1.61vw, 2.25rem);
  /* 1025px: 21.6px, 1920px: 36px */
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(0.216rem, 0.052rem + 0.26vw, 0.36rem);
  /* 1025px: 3.456px, 1920px: 5.76px */
}

/* 本文テキスト */
.story-05-body {
  margin-top: clamp(1.5rem, 0.355rem + 1.79vw, 2.5rem);
  /* 1025px: 24px, 1920px: 40px */
  width: clamp(26rem, 5.385rem + 32.179vw, 44rem);
  /* 1025px: 316.8px, 1920px: 528px */
  color: #BA2A20;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.9rem, 0.213rem + 1.07vw, 1.5rem);
  /* 1025px: 14.4px, 1920px: 24px */
  font-style: normal;
  font-weight: 700;
  line-height: clamp(1.8rem, 0.426rem + 2.15vw, 3rem);
  /* 1025px: 28.8px, 1920px: 48px */
  letter-spacing: clamp(0.18rem, 0.043rem + 0.21vw, 0.3rem);
  /* 1025px: 2.88px, 1920px: 4.8px */
}

.story-05-body p {
  margin: 0;
}

.story-05-body p + p {
  margin-top: 1em;
}

/* ハイライトテキスト（赤色・大きめ） */
.story-05-highlight {
  color: #BA2A20;
  font-size: clamp(1.2rem, 0.284rem + 1.43vw, 2rem) !important;
  /* 1025px: 19.2px, 1920px: 32px */
  line-height: clamp(1.8rem, 0.426rem + 2.15vw, 3rem) !important;
  /* 1025px: 28.8px, 1920px: 48px */
  letter-spacing: clamp(0.24rem, 0.057rem + 0.29vw, 0.4rem) !important;
  /* 1025px: 3.84px, 1920px: 6.4px */
}

@media screen and (max-width: 1440px) {
  .story-05-image {
    left: 11%;
  }
  .story-05-text-area {
    position: absolute;
    left: calc(11% + clamp(25.5rem, 6.03rem + 30.39vw, 42.5rem) + clamp(1.838rem, 0.434rem + 2.19vw, 3.063rem));
  }
}

/* ============================
   Section 05 - コンテンツ（SP版）
============================ */
@media screen and (max-width: 1024px) {
  /* テキストエリア（SP版） */
  .story-05-text-area {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding-bottom: 5vh;
    /* スクロールバー非表示 */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .story-05-text-area::-webkit-scrollbar {
    display: none;
  }

  /* 見出し枠（SP版：2行に分割） */
  .story-05-heading-box {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    background: transparent;
    margin-top: 9vh;
    padding-left: 0;
  }

  /* 見出し各行の枠 */
  .story-05-heading-line1,
  .story-05-heading-line2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #BA2A20;
    font-size: clamp(1.25rem, 0.866rem + 1.577vw, 1.875rem);
    letter-spacing: 3.2px;
  }

  .story-05-heading-line1 {
    width: clamp(10.7rem, 7.932rem + 11.356vw, 15.2rem);
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
    padding-left: 4%;
  }

  .story-05-heading-line2 {
    width: clamp(17rem, 12.771rem + 17.35vw, 23.875rem);
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
  }

  /* 本文テキスト（SP版） */
  .story-05-body {
    margin-top: 30px;
    width: clamp(20rem, 13.849rem + 25.237vw, 30rem);
    text-align: center;
    font-size: clamp(0.875rem, 0.644rem + 0.946vw, 1.25rem);
    line-height: clamp(1.875rem, 1.306rem + 2.334vw, 2.8rem);
    letter-spacing: 1.68px;
  }

  /* SP版ハイライトテキスト */
  .story-05-highlight {
    font-size: clamp(1rem, 0.692rem + 1.262vw, 1.5rem) !important;
    line-height: clamp(1.875rem, 1.306rem + 2.334vw, 2.8rem) !important;
    letter-spacing: 2.4px !important;
  }

  /* 画像エリア（SP版） - セクション3と同じ配置 */
  .story-05-image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    top: auto;
    right: auto;
    z-index: 6;
  }

  .story-05-image-pc {
    display: none;
  }

  .story-05-image-sp {
    display: block;
    width: clamp(21.875rem, 16.877rem + 20.505vw, 30rem);
    height: auto;
    aspect-ratio: 680 / 652;
    max-width: none;
  }

  /* 下部グラデーションぼかし（SP版のみ）- ブロブの色 #FFF4F2 をベースに */
  .story-05-blur {
    display: none !important;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;   /* フォールバック（古いブラウザ用） */
    height: 100dvh;  /* iOS対応（ツールバー追従） */
    top: 40%;
    background: linear-gradient(180deg, rgba(255, 244, 242, 0.00) 0%, #FFF4F2 15%, #FFF4F2 100%);
    pointer-events: none;
    z-index: 4;
  }

  .story-05-blur.blur-active {
    display: block !important;
  }
}

/* ============================
   Section 06 - コンテンツアニメーション
============================ */
@media screen and (min-width: 1025px) {
  /* 初期状態: テキストエリアと画像は画面外（下）に配置 */
  .story-section--06 .story-06-text-area,
  .story-section--06 .story-06-image {
    transform: translateY(100vh);
    transition: transform 0.15s ease-out;
    will-change: transform;
  }

  .story-section--06 .story-06-image {
    transition: transform 0.15s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

@media screen and (max-width: 1024px) {
  /* SP版: テキストエリアの初期状態 */
  .story-section--06 .story-06-text-area {
    transform: translateY(120vh);
    transition: transform 0.25s ease-out;
    will-change: transform;
  }

  /* SP版: 画像の初期状態（中央配置を維持） */
  .story-section--06 .story-06-image {
    transform: translateX(-50%) translateY(120vh);
    transition: transform 0.25s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

/* ============================
   Section 06 - コンテンツ（PC版）
   レイアウトはセクション02/04と同じ（左テキスト、右画像）
============================ */

/* セクション06 コンテンツレイアウト */
.story-section--06 .story-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* テキストエリア（セクション2/4と同じ位置） */
.story-06-text-area {
  position: absolute;
  left: clamp(10.625rem, -5.91rem + 25.81vw, 25.063rem);
  /* 1025px: 214px, 1920px: 401px（セクション2/4と同じ） */
  top: 23vh;
}

/* 見出し枠 */
.story-06-heading-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: clamp(21rem, 4.966rem + 25.028vw, 35rem);
  /* 1025px: 324px, 1920px: 540px */
  height: clamp(4.05rem, 0.958rem + 4.83vw, 6.75rem);
  /* 1025px: 64.8px, 1920px: 108px */
  background: #4F4F4F;
  padding-left: clamp(0.75rem, 0.177rem + 0.89vw, 1.25rem);
  /* 1025px: 12px, 1920px: 20px */
}

@media screen and (min-width: 1025px) and (max-width: 1600px) {
  .story-section--06 .story-06-heading-box {
    height: auto;
    min-height: clamp(4.05rem, 0.958rem + 4.83vw, 6.75rem);
  }

  .story-section--06 .story-06-heading-line2 {
    letter-spacing: clamp(0.12rem, 0.05rem + 0.16vw, 0.24rem);
  }
}

/* 見出しテキスト（PC版は2行） */
.story-06-heading-line1,
.story-06-heading-line2 {
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.35rem, 0.319rem + 1.61vw, 2.25rem);
  /* 1025px: 21.6px, 1920px: 36px */
  font-style: normal;
  font-weight: 700;
  line-height: clamp(1.875rem, 0.443rem + 2.23vw, 3.125rem);
  /* 1025px: 30px, 1920px: 50px */
  letter-spacing: clamp(0.216rem, 0.052rem + 0.26vw, 0.36rem);
  /* 1025px: 3.456px, 1920px: 5.76px */
}

/* 本文テキスト */
.story-06-body {
  margin-top: clamp(1.5rem, 0.355rem + 1.79vw, 2.5rem);
  /* 1025px: 24px, 1920px: 40px */
  width: clamp(19.8rem, 4.686rem + 23.6vw, 33rem);
  /* 1025px: 316.8px, 1920px: 528px */
  color: #4F4F4F;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.9rem, 0.213rem + 1.07vw, 1.5rem);
  /* 1025px: 14.4px, 1920px: 24px */
  font-style: normal;
  font-weight: 700;
  line-height: clamp(1.8rem, 0.426rem + 2.15vw, 3rem);
  /* 1025px: 28.8px, 1920px: 48px */
  letter-spacing: clamp(0.18rem, 0.043rem + 0.21vw, 0.3rem);
  /* 1025px: 2.88px, 1920px: 4.8px */
}

.story-06-body p {
  margin: 0;
}

.story-06-body p + p {
  margin-top: 2em;
}

/* ハイライトテキスト（大きめ） */
.story-06-highlight {
  font-size: clamp(1.2rem, 0.284rem + 1.43vw, 2rem) !important;
  /* 1025px: 19.2px, 1920px: 32px */
  line-height: clamp(1.95rem, 0.462rem + 2.32vw, 3.25rem) !important;
  /* 1025px: 31.2px, 1920px: 52px */
  letter-spacing: clamp(0.24rem, 0.057rem + 0.29vw, 0.4rem) !important;
  /* 1025px: 3.84px, 1920px: 6.4px */
}

/* 画像エリア（セクション2/4と同じ位置） */
.story-06-image {
  position: absolute;
  right: clamp(5rem, -3.017rem + 12.514vw, 12rem);
  top: 18%;
}

.story-06-image-pc {
  display: block;
  width: clamp(26rem, 7.103rem + 29.497vw, 42.5rem);
  /* 1025px: 408px, 1920px: 680px */
  height: auto;
  aspect-ratio: 680 / 469.641;
  object-fit: cover;
  max-width: none;
}

.story-06-image-sp {
  display: none;
}

@media screen and (max-width: 1440px) {
  .story-06-image {
    top: 21vh;
  }
}
/* ============================
   Section 06 - コンテンツ（SP版）
============================ */
@media screen and (max-width: 1024px) {
  /* テキストエリア（SP版） */
  .story-06-text-area {
    position: relative;
    /* PC版のabsolute位置をリセット */
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    /* SP版スタイル */
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding-bottom: 5vh;
    /* スクロールバー非表示 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
    /* タッチスクロールを有効化 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* スクロールバー非表示 (Webkit) */
  .story-06-text-area::-webkit-scrollbar {
    display: none;
  }

  /* 見出し枠（SP版：2行に分割） */
  .story-06-heading-box {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    background: transparent;
    margin-top: 9vh;
    padding-left: 0;
  }

  /* 見出し各行の枠 */
  .story-06-heading-line1,
  .story-06-heading-line2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4F4F4F;
    font-size: clamp(1.25rem, 0.866rem + 1.577vw, 1.875rem);
    line-height: normal;
    letter-spacing: 3.2px;
  }

  .story-06-heading-line1 {
    width: clamp(9.5rem, 6.963rem + 10.41vw, 13.625rem);
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
    padding-right: 5%;
  }

  .story-06-heading-line2 {
    width: clamp(20rem, 15.079rem + 20.189vw, 28rem);
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
    padding-left: 4%;
  }

  /* 本文テキスト（SP版） */
  .story-06-body {
    margin-top: 30px;
    width: clamp(19.5rem, 14.271rem + 21.451vw, 28rem);
    text-align: center;
    font-size: clamp(0.875rem, 0.644rem + 0.946vw, 1.25rem);
    line-height: clamp(1.875rem, 1.306rem + 2.334vw, 2.8rem);
    letter-spacing: 1.68px;
  }

  /* SP版ハイライトテキスト */
  .story-06-highlight {
    font-size: clamp(1rem, 0.692rem + 1.262vw, 1.5rem) !important;
    line-height: clamp(1.875rem, 1.306rem + 2.334vw, 2.8rem) !important;
    letter-spacing: 2.4px !important;
  }

  /* 画像エリア（SP版） */
  .story-06-image {
    position: absolute;
    left: 55%;
    transform: translateX(-50%);
    bottom: 13vh;
    top: auto;
    right: auto;
    z-index: 6;
  }

  .story-06-image-pc {
    display: none;
  }

  .story-06-image-sp {
    display: block;
    width: clamp(20.75rem, 15.06rem + 23.344vw, 30rem);
    height: auto;
    aspect-ratio: 680 / 469.641;
    max-width: none;
  }

  /* 下部グラデーションぼかし（SP版のみ）- ブロブの色 #E4E4E4 をベースに */
  .story-06-blur {
    display: none !important;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;   /* フォールバック（古いブラウザ用） */
    height: 100dvh;  /* iOS対応（ツールバー追従） */
    top: 40%;
    background: linear-gradient(180deg, rgba(228, 228, 228, 0.00) 0%, #E4E4E4 15%, #E4E4E4 100%);
    pointer-events: none;
    z-index: 4;
  }

  .story-06-blur.blur-active {
    display: block !important;
  }
}

/* ============================
   Section 07 - コンテンツアニメーション
============================ */
@media screen and (min-width: 1025px) {
  /* 初期状態: テキストエリアと画像は画面外（下）に配置 */
  .story-section--07 .story-07-text-area,
  .story-section--07 .story-07-image {
    transform: translateY(100vh);
    transition: transform 0.15s ease-out;
    will-change: transform;
  }

  .story-section--07 .story-07-image {
    transition: transform 0.15s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

@media screen and (max-width: 1024px) {
  /* SP版: テキストエリアの初期状態 */
  .story-section--07 .story-07-text-area {
    transform: translateY(120vh);
    transition: transform 0.25s ease-out;
    will-change: transform;
  }

  /* SP版: 画像の初期状態（中央配置を維持） */
  .story-section--07 .story-07-image {
    transform: translateX(-50%) translateY(120vh);
    transition: transform 0.25s ease-out, opacity 0.6s ease-out 0.2s;
    will-change: transform, opacity;
  }
}

/* ============================
   Section 07 - コンテンツ（PC版）
   レイアウトはセクション03/05と同じ（左画像、右テキスト）
============================ */

/* セクション07 コンテンツレイアウト */
.story-section--07 .story-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 画像エリア（左側） - セクション3/5と同じ位置 */
.story-07-image {
  position: absolute;
  left: 15%;
  top: 18vh;
}

.story-07-image-pc {
  display: block;
  width: clamp(24.117rem, 5.703rem + 28.74vw, 40.195rem);
  /* 1025px: 385.875px, 1920px: 643.125px */
  height: clamp(23.417rem, 5.538rem + 27.9vw, 39.028rem);
  /* 1025px: 374.67px, 1920px: 624.451px */
  object-fit: cover;
  max-width: none;
}

.story-07-image-sp {
  display: none;
}

/* テキストエリア（右側） - セクション3/5と同じ位置 */
.story-07-text-area {
  position: absolute;
  left: calc(15% + clamp(24.117rem, 5.703rem + 28.74vw, 40.195rem) + clamp(1.838rem, 0.434rem + 2.19vw, 3.063rem));
  /* 画像の右端 + gap */
  top: 25vh;
  width: clamp(25rem, 6.676rem + 28.603vw, 41rem);
}

/* 見出し枠（1行） */
.story-07-heading-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: clamp(21.75rem, 6.003rem + 24.581vw, 35.5rem);
  /* 1025px: 319.8px, 1920px: 533px */
  height: clamp(2rem, 0.282rem + 2.682vw, 3.5rem);
  /* 1025px: 30px, 1920px: 50px */
  padding-left: clamp(0.75rem, 0.177rem + 0.89vw, 1.25rem);
  /* 1025px: 12px, 1920px: 20px */
}

/* 見出し枠の背景（擬似要素で画像の上に配置） */
.story-07-heading-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F1CD3A;
  z-index: 0;
}

/* 見出しテキスト */
.story-07-heading-text {
  position: relative;
  z-index: 1;
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.35rem, 0.319rem + 1.61vw, 2.25rem);
  /* 1025px: 21.6px, 1920px: 36px */
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(0.216rem, 0.052rem + 0.26vw, 0.36rem);
  /* 1025px: 3.456px, 1920px: 5.76px */
}

/* タイトル画像（PC版） */
.story-07-title-image-pc {
  position: absolute;
  z-index: -1;
  width: clamp(14rem, 1.402rem + 19.665vw, 25rem);
  /* 390px: 281.999px, 1920px: 458.203px */
  height: auto;
  top: -240%;
  right: -23%;
  object-fit: contain;
}

/* タイトル画像（SP版）は非表示 */
.story-07-title-image-sp {
  display: none;
}

/* 本文テキスト */
.story-07-body {
  margin-top: clamp(1.5rem, 0.355rem + 1.79vw, 2.5rem);
  /* 1025px: 24px, 1920px: 40px */
  color: #EDB134;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.9rem, 0.213rem + 1.07vw, 1.5rem);
  /* 1025px: 14.4px, 1920px: 24px */
  font-style: normal;
  font-weight: 700;
  line-height: clamp(1.8rem, 0.426rem + 2.15vw, 3rem);
  /* 1025px: 28.8px, 1920px: 48px */
  letter-spacing: clamp(0.18rem, 0.043rem + 0.21vw, 0.3rem);
  /* 1025px: 2.88px, 1920px: 4.8px */
}

.story-07-body p {
  margin: 0;
}

.story-07-body p + p {
  margin-top: 1em;
}

/* 脚注マーク（本文中の*） */
.story-07-footnote-mark {
  font-size: inherit;
}

/* 脚注テキスト */
.story-07-footnote {
  font-size: clamp(0.525rem, 0.124rem + 0.63vw, 0.875rem) !important;
  /* 1025px: 8.4px, 1920px: 14px */
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: clamp(0.105rem, 0.025rem + 0.13vw, 0.175rem) !important;
  /* 1025px: 1.68px, 1920px: 2.8px */
  margin-top: 0.5em !important;
}

/* ハイライトテキスト（大きめ） */
.story-07-highlight {
  font-size: clamp(1.2rem, 0.284rem + 1.43vw, 2rem) !important;
  /* 1025px: 19.2px, 1920px: 32px */
  line-height: clamp(1.95rem, 0.462rem + 2.32vw, 3.25rem) !important;
  /* 1025px: 31.2px, 1920px: 52px */
  letter-spacing: clamp(0.24rem, 0.057rem + 0.29vw, 0.4rem) !important;
  /* 1025px: 3.84px, 1920px: 6.4px */
}

/* ============================
   Section 07 - コンテンツ（SP版）
============================ */
@media screen and (max-width: 1024px) {
  /* テキストエリア（SP版） */
  .story-07-text-area {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding-bottom: 5vh;
    /* スクロールバー非表示 */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .story-07-text-area::-webkit-scrollbar {
    display: none;
  }

  /* 見出し枠（SP版） */
  .story-07-heading-box {
    position: relative;
    z-index: 5;
    justify-content: center;
    width: clamp(19.5rem, 14.886rem + 18.927vw, 27rem);
    height: clamp(2rem, 1.385rem + 2.524vw, 3rem);
    margin-top: 12vh;
    padding-left: 0;
  }

  /* 見出しテキスト（SP版） */
  .story-07-heading-text {
    font-size: clamp(1.25rem, 0.866rem + 1.577vw, 1.875rem);
    letter-spacing: 3.2px;
  }

  /* タイトル画像（SP版） */
  .story-07-title-image-pc {
    display: none;
  }

  .story-07-title-image-sp {
    display: block;
    position: absolute;
    z-index: -1;
    width: clamp(14rem, 8.464rem + 22.713vw, 23rem);
    height: auto;
    top: -7vh;
    right: -16%;
    object-fit: contain;
  }

  /* 本文テキスト（SP版） */
  .story-07-body {
    position: relative;
    z-index: 7;
    margin-top: 30px;
    width: clamp(23rem, 17.464rem + 22.713vw, 32rem);
    text-align: center;
    font-size: clamp(0.875rem, 0.644rem + 0.946vw, 1.25rem);
    line-height: clamp(1.875rem, 1.306rem + 2.334vw, 2.8rem);
    letter-spacing: 1.68px;
  }

  /* SP版脚注テキスト */
  .story-07-footnote {
    font-size: clamp(0.625rem, 0.471rem + 0.63vw, 0.875rem) !important;
    line-height: 1.5 !important;
    margin-top: 0.3em !important;
  }

  /* SP版ハイライトテキスト */
  .story-07-highlight {
    font-size: clamp(1rem, 0.692rem + 1.262vw, 1.5rem) !important;
    line-height: clamp(1.875rem, 1.306rem + 2.334vw, 2.8rem) !important;
    letter-spacing: 2.4px !important;
  }

  /* 画像エリア（SP版） - セクション3/5と同じ配置 */
  .story-07-image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    top: auto;
    right: auto;
    z-index: 6;
  }

  .story-07-image-pc {
    display: none;
  }

  .story-07-image-sp {
    display: block;
    width: clamp(18rem, 10.618rem + 30.284vw, 30rem);
    height: auto;
    aspect-ratio: 643.125 / 624.451;
    max-width: none;
  }

  /* 下部グラデーションぼかし（SP版のみ）- ブロブの色 #FFFAE8 をベースに */
  .story-07-blur {
    display: none !important;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;   /* フォールバック（古いブラウザ用） */
    height: 100dvh;  /* iOS対応（ツールバー追従） */
    top: 40%;
    background: linear-gradient(180deg, rgba(255, 250, 232, 0.00) 0%, #FFFAE8 15%, #FFFAE8 100%);
    pointer-events: none;
    z-index: 4;
  }

  .story-07-blur.blur-active {
    display: block !important;
  }
}

/* ========================================
   セクション08: CTA
   ======================================== */



/* コンテンツエリア */
.story-section--08 .story-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* テキストエリア */
.story-08-text-area {
  position: absolute;
  top: 21vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
}

/* メインタイトル */
.story-08-title {
  margin: 0;
  text-align: center;
}

/* タイトル画像（PC版） */
.story-08-title-pc {
  display: block;
  width: clamp(18.938rem, 10.51rem + 34.575vw, 52rem);
  /* 390px: 303px, 1920px: 850px */
  height: auto;
  max-width: none;
}

/* タイトル画像（SP版）非表示 */
.story-08-title-sp {
  display: none;
}

/* サブテキスト共通 */
.story-08-body {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.748rem + 0.52vw, 1.375rem);
  /* 390px: 14px, 1920px: 22px */
  font-style: normal;
  font-weight: 700;
  line-height: clamp(1.875rem, 1.716rem + 0.65vw, 2.5rem);
  /* 390px: 30px, 1920px: 40px */
  letter-spacing: clamp(0.105rem, 0.061rem + 0.18vw, 0.275rem);
  /* 390px: 1.68px, 1920px: 4.4px */
  margin: clamp(2.5rem, 2.341rem + 0.65vw, 3.125rem) 0 0 0;
  /* 390px: 40px, 1920px: 50px */
}

/* PC版サブテキスト表示、SP版非表示 */
.story-08-body-pc {
  display: block;
}

.story-08-body-sp {
  display: none;
}

/* 画像エリア */
.story-08-image {
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* PC版画像 */
.story-08-image-pc {
  display: block;
  width: clamp(24.375rem, 14.529rem + 40.392vw, 63rem);
  object-fit: cover;
  max-width: none;
}

/* SP版画像非表示 */
.story-08-image-sp {
  display: none;
}

/* ========================================
   セクション08 レスポンシブ（SP版）
   ======================================== */
@media screen and (max-width: 1024px) {
  /* テキストエリア（SP版） */
  .story-08-text-area {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  /* タイトル画像（PC版）非表示 */
  .story-08-title-pc {
    display: none;
  }

  /* タイトル画像（SP版）表示 */
  .story-08-title-sp {
    display: block;
    width: clamp(18.938rem, 14.424rem + 18.517vw, 26.25rem);
    /* 390px: 303px, 1024px: 420px */
    height: auto;
    max-width: none;
    margin: 0 auto;
  }

  /* PC版サブテキスト非表示、SP版表示 */
  .story-08-body-pc {
    display: none;
  }

  .story-08-body-sp {
    display: block;
  }

  /* サブテキスト（SP版） */
  .story-08-body {
    font-size: clamp(0.875rem, 0.644rem + 0.946vw, 1.25rem);
    /* 390px: 14px, 1024px: 20px */
    line-height: clamp(1.875rem, 1.306rem + 2.334vw, 2.8rem);
    /* 390px: 30px, 1024px: 44.8px */
    letter-spacing: 1.68px;
    margin-top: clamp(2.5rem, 2.181rem + 1.31vw, 3rem);
    /* 390px: 40px, 1024px: 48px */
  }

  /* 画像エリア（SP版） */
  .story-08-image {
    bottom: 7vh;
    transform: translateX(-50%);
  }

  /* PC版画像非表示 */
  .story-08-image-pc {
    display: none;
  }

  /* SP版画像表示 */
  .story-08-image-sp {
    display: block;
    width: clamp(24.375rem, 17.839rem + 26.814vw, 35rem);
    /* 390px: 390px, 1024px: 560px */
    height: clamp(16.25rem, 11.792rem + 18.296vw, 23.5rem);
    /* 390px: 260px, 1024px: 376px */
    object-fit: cover;
    max-width: none;
  }
}

/* ========================================
   カードセクション（Swiper外）
   ======================================== */

.story-cards-section {
  background-color: #FFF;
  padding-top: clamp(3.75rem, 0.962rem + 11.438vw, 14.688rem);
  padding-bottom: clamp(7.5rem, 6.863rem + 2.614vw, 10rem);
  /* 390px: 60px, 1920px: 160px */
}

.story-cards-container {
  max-width: 100rem; /* 1600px */
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 0.625rem + 2.56vw, 3rem);
}

/* Grid Layout */
.story-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0rem, -2.632rem + 10.79vw, 5.063rem) clamp(0rem, -1.316rem + 5.39vw, 2.5rem);
  max-width: 100%;
  margin: 0 auto;
}

/* Card */
.story-card {
  width: 100%;
  height: clamp(15rem, 8.743rem + 25.68vw, 37.375rem);
  /* 390px: 240px, 1920px: 598px */
  background: #FFF;
  border-radius: clamp(0.5rem, 0.402rem + 0.4vw, 1.194rem);
  border: 1px solid #B7B7B7;
  overflow: hidden;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
  position: relative;
}

@media (hover: hover) {
  .story-card:hover {
    opacity: 0.8;
  }
}

.story-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  position: relative;
}

/* Card Image - 固定比率79.6% */
.story-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 79.6%;
  overflow: hidden;
  background: #F5F5F5;
}

.story-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card Content - 固定比率20.4% */
.story-card-content {
  position: absolute;
  top: 79.6%;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 0.857rem + 1.61vw, 3.75rem);
  background: #FFF;
}

.story-card-title {
  color: #000;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.678rem + 0.81vw, 1.25rem);
  /* 390px: 14px, 1920px: 20px */
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: clamp(0.088rem, 0.068rem + 0.08vw, 0.125rem);
  margin: 0;
}

@media screen and (min-width: 769px) {
  .story-card-title {
    font-weight: 400;
  }
}

/* Arrow Icon */
.story-card-arrow {
  display: block;
  width: clamp(1.75rem, 1.065rem + 2.81vw, 4.375rem);
  /* 390px: 28px, 1920px: 70px */
  height: clamp(1.75rem, 1.065rem + 2.81vw, 4.375rem);
  flex-shrink: 0;
  transition: opacity 0.3s ease;
  position: relative;
  background-image: url('../../images/pickup-arrow-right.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (hover: hover) {
  .story-card:hover .story-card-arrow {
    opacity: 0.7;
  }
}

/* カードのレスポンシブ対応 */
@media screen and (max-width: 768px) {
  .story-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .story-cards-container {
    width: 79.49%;
    padding: 0;
    margin: 0 auto;
  }

  .story-card {
    height: auto;
    aspect-ratio: 780 / 600;
  }

  .story-card-image {
    height: 73.08%;
  }

  .story-card-content {
    top: 73.08%;
    height: 26.92%;
  }
}

/* ========================================
   storyページ用 #contact上書き
   ======================================== */
body:has(.story-page) #contact {
  margin: 0;
}

/* ========================================
   スマホ専用スタイル（768px以下）
   ======================================== */
@media screen and (max-width: 768px) {
  /* ページナビゲーション（左下の01/08）- スマホでは位置を上げる */
  .story-nav {
    top: calc(var(--vh) * 78);  /* iOS Chrome/Safari ツールバー追従（JS同期） */
  }
}

/* ========================================
   iOS Safari 対応
   ======================================== */
/* iOS Safariでのフォントレンダリング差を考慮し、見出しボックス幅を微調整 */
@media screen and (max-width: 768px) {
  /* セクション2の見出し - 幅を少し広げる */
  .story-section--02 .story-02-heading-line1 {
    width: clamp(10rem, 7.3rem + 11vw, 14.5rem);
  }
  .story-section--02 .story-02-heading-line2 {
    width: clamp(14.5rem, 10.5rem + 16.5vw, 21rem);
  }

  /* セクション5の見出し - 幅を少し広げる */
  .story-section--05 .story-05-heading-line1 {
    width: clamp(11.2rem, 8.3rem + 12vw, 16rem);
  }
  .story-section--05 .story-05-heading-line2 {
    width: clamp(17.5rem, 13rem + 18vw, 24.5rem);
  }

  /* セクション6の見出し - 幅を少し広げる */
  .story-section--06 .story-06-heading-line1 {
    width: clamp(10rem, 7.3rem + 11vw, 14.5rem);
  }
  .story-section--06 .story-06-heading-line2 {
    width: clamp(20.5rem, 15.5rem + 21vw, 29rem);
  }
}

/* iOS Safariでは100vhがツールバーを含む高さになるため、
   bottom配置の要素が見切れる。スマホのみbottom値を増やして調整 */
@media screen and (max-width: 768px) {
  /* セクション1のCEO画像 - 元: clamp(-19.375rem, ...) → 調整: 上に移動 */
  .story-section--01 .story-01-ceo-image {
    bottom: clamp(-16rem, -6rem - 15vw, -10rem);
  }

  /* セクション2の画像 - 元: 4vh → 調整: 10vh */
  .story-section--02 .story-02-image {
    bottom: 8vh;
  }

  /* セクション3の画像 - 元: 0px → 調整: 6vh */
  .story-section--03 .story-03-image {
    bottom: 5vh;
  }

  /* セクション4の画像 - 元: 0px → 調整: 6vh */
  .story-section--04 .story-04-image {
    bottom: 6vh;
  }

  /* セクション5の画像 - 元: 0px → 調整: 6vh */
  .story-section--05 .story-05-image {
    bottom: 6vh;
  }

  /* セクション6の画像 - 元: 0px → 調整: 6vh → さらに調整: 10vh */
  .story-section--06 .story-06-image {
    bottom: 10vh;
  }

  /* セクション7の画像 - 元: 0px → 調整: 6vh */
  .story-section--07 .story-07-image {
    bottom: 5vh;
  }

  /* セクション8の画像 - 元: 7vh → 調整: 13vh */
  .story-section--08 .story-08-image {
    bottom: 13vh;
  }
}

/* iOS Safariでは100vhがツールバーを含む高さになるため、
   vh単位のmargin-topが期待より小さくなる。スマホのみ増やして調整 */
@media screen and (max-width: 768px) {
  /* セクション2の見出し - 元: 12vh → 調整: 18vh */
  .story-section--02 .story-02-heading-box {
    margin-top: 18vh;
  }

  /* セクション3の見出し - 元: 9vh → 調整: 15vh */
  .story-section--03 .story-03-heading-box {
    margin-top: 15vh;
  }

  /* セクション4の見出し - 元: 9vh → 調整: 15vh */
  .story-section--04 .story-04-heading-box {
    margin-top: 15vh;
  }

  /* セクション5の見出し - 元: 9vh → 調整: 15vh */
  .story-section--05 .story-05-heading-box {
    margin-top: 15vh;
  }

  /* セクション6の見出し - 元: 9vh → 調整: 15vh */
  .story-section--06 .story-06-heading-box {
    margin-top: 15vh;
  }

  /* セクション7の見出し - 元: 12vh → 調整: 18vh */
  .story-section--07 .story-07-heading-box {
    margin-top: 18vh;
  }
}