/* ============================
   Story Page - SP版（1024px以下）
   通常スクロール形式

   注意: このファイルはstory.cssの後に読み込まれる
   Swiperの初期化をしないため、visibility等を強制的に上書き
============================ */

@media screen and (max-width: 1024px) {

  /* ============================
     オーバースクロール時の背景色（フッター下）
     Safariツールバー対策
     body:has(.story-page)の赤い背景色を上書き
  ============================ */
  html,
  body,
  body:has(.story-page) {
    background-color: #FFF !important;
  }

  /* ============================
     ヘッダー表示/非表示（スクロール方向対応）
  ============================ */
  .header {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  .header.header-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ============================
     最重要: Swiperのvisibility上書き
     Swiper未初期化時のhiddenを強制的にvisibleに
  ============================ */
  .story-page.swiper,
  .story-page.swiper .swiper-wrapper,
  .story-page.swiper .swiper-slide,
  .story-page .swiper-wrapper,
  .story-page .swiper-slide,
  .story-swiper,
  .story-swiper .swiper-wrapper,
  .story-swiper .swiper-slide,
  .story-section,
  .story-section.swiper-slide,
  .story-section--01,
  .story-section--02,
  .story-section--03,
  .story-section--04,
  .story-section--05,
  .story-section--06,
  .story-section--07,
  .story-section--08 {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ============================
     Swiperレイアウト無効化
  ============================ */
  .story-page.swiper,
  .story-swiper {
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
  }

  .story-page .swiper-wrapper,
  .story-swiper .swiper-wrapper {
    display: block !important;
    transform: none !important;
    height: auto !important;
    position: relative !important;
  }

  .story-page .swiper-slide,
  .story-swiper .swiper-slide,
  .story-section.swiper-slide {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    flex-shrink: unset !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* ============================
     背景 - JSで生成する固定背景を使用
  ============================ */
  .story-bg-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    transition: background-color 0.5s ease !important;
    pointer-events: none !important;
  }

  /* 各セクションの背景色のみ非表示（ブロブは表示） */
  .story-section .story-bg-color,
  .story-section .story-transition-overlay {
    display: none !important;
  }

  /* 背景コンテナ（ブロブを含む）の設定 */
  .story-section .story-bg {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: transparent !important;
  }

  /* ============================
     ブロブ非表示・背景色はJSでフェード制御
  ============================ */

  /* SVGブロブを非表示 */
  .story-blob {
    display: none !important;
  }

  /* ============================
     コンテンツ表示
  ============================ */
  .story-section .story-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* ============================
     アニメーション無効化 - transform解除
  ============================ */
  .story-section--01 .story-01-text-area,
  .story-section--01 .story-01-ceo-image,
  .story-section--02 .story-02-text-area,
  .story-section--02 .story-02-image,
  .story-section--03 .story-03-text-area,
  .story-section--03 .story-03-image,
  .story-section--04 .story-04-text-area,
  .story-section--04 .story-04-image,
  .story-section--05 .story-05-text-area,
  .story-section--05 .story-05-image,
  .story-section--06 .story-06-text-area,
  .story-section--06 .story-06-image,
  .story-section--07 .story-07-text-area,
  .story-section--07 .story-07-image,
  .story-section--08 .story-08-text-area,
  .story-section--08 .story-08-image {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }

  /* ============================
     セクション内ナビ非表示（JSの固定ナビを使用）
  ============================ */
  .story-section .story-nav {
    display: none !important;
  }

  /* スクロールインジケーター非表示 */
  .story-01-scroll {
    display: none !important;
  }

  /* 下部グラデーション・ぼかし非表示 */
  .story-section--01 .story-content::after,
  .story-02-blur,
  .story-03-blur,
  .story-04-blur,
  .story-05-blur,
  .story-06-blur,
  .story-07-blur {
    display: none !important;
  }

  /* ============================
     セクション01
  ============================ */
  .story-section--01 {
    padding: clamp(5rem, 4rem + 4.1vw, 7rem) 20px clamp(3rem, 2rem + 4.1vw, 5rem) !important;
  }

  .story-section--01 .story-content {
    padding: 0 !important;
    gap: 0 !important;
  }

  .story-section--01 .story-01-text-area {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 600px !important;
  }

  .story-01-title-image {
    width: clamp(14rem, 10rem + 16.4vw, 22rem) !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .story-01-title-pc {
    display: none !important;
  }

  .story-01-title-sp {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .story-01-heading {
    margin-top: clamp(1.5rem, 1rem + 2.05vw, 2.5rem) !important;
    text-align: center !important;
    font-size: clamp(1.125rem, 0.9rem + 0.92vw, 1.5rem) !important;
    line-height: 1.6 !important;
  }

  .story-01-body {
    margin-top: clamp(1.5rem, 1rem + 2.05vw, 2.5rem) !important;
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    font-size: clamp(0.875rem, 0.8rem + 0.31vw, 1rem) !important;
    line-height: 1.8 !important;
  }

  .story-01-body p + p {
    margin-top: 1.5em !important;
  }

  .story-section--01 .story-01-ceo-image {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    width: clamp(9.5rem, 47vw, 13.5rem) !important;
    height: auto !important;
    margin-top: clamp(2.75rem, 2.25rem + 2.05vw, 3.75rem) !important;
  }

  .story-section--01 .story-01-ceo-image img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: clamp(2rem, 1.385rem + 2.524vw, 3rem);
  }

  /* ============================
     セクション間の余白（400px）
  ============================ */
  .story-section--02,
  .story-section--03,
  .story-section--04,
  .story-section--05,
  .story-section--06,
  .story-section--07,
  .story-section--08 {
    padding-top: 200px !important;
  }

  /* ============================
     セクション02〜07 共通
  ============================ */
  .story-section--02,
  .story-section--03,
  .story-section--04,
  .story-section--05,
  .story-section--06,
  .story-section--07 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 0 !important;
  }

  .story-section--02 .story-content,
  .story-section--03 .story-content,
  .story-section--04 .story-content,
  .story-section--05 .story-content,
  .story-section--06 .story-content,
  .story-section--07 .story-content {
    gap: clamp(2.5rem, 1.885rem + 2.524vw, 3.5rem) !important;
  }

  /* 画像をテキストの下に表示（orderで順序制御） */
  .story-section--02 .story-02-text-area,
  .story-section--03 .story-03-text-area,
  .story-section--04 .story-04-text-area,
  .story-section--05 .story-05-text-area,
  .story-section--06 .story-06-text-area,
  .story-section--07 .story-07-text-area {
    order: 1 !important;
  }

  .story-section--02 .story-02-image,
  .story-section--03 .story-03-image,
  .story-section--04 .story-04-image,
  .story-section--05 .story-05-image,
  .story-section--06 .story-06-image,
  .story-section--07 .story-07-image {
    order: 2 !important;
  }

  /* テキストエリア共通 */
  .story-02-text-area,
  .story-03-text-area,
  .story-04-text-area,
  .story-05-text-area,
  .story-06-text-area,
  .story-07-text-area {
    position: static !important;
    left: auto !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 630px !important;
    padding: 0 !important;
  }

  /* 見出し枠共通 */
  .story-02-heading-box,
  .story-03-heading-box,
  .story-04-heading-box,
  .story-05-heading-box,
  .story-06-heading-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    margin-top: 0 !important;
  }

  .story-02-heading-line1,
  .story-02-heading-line2,
  .story-03-heading-line1,
  .story-03-heading-line2,
  .story-04-heading-line1,
  .story-04-heading-line2,
  .story-05-heading-line1,
  .story-05-heading-line2,
  .story-06-heading-line1,
  .story-06-heading-line2 {
    display: inline-block !important;
    
    font-size: clamp(1.25rem, 0.789rem + 1.893vw, 2rem) !important;
    line-height: 1.5 !important;
  }
  
  .story-04-heading-line2,
  .story-03-heading-line2
  {
    padding-left: 4%;
  }

  /* セクション02見出し「虚弱体質、」「健康へのあこがれ」 */
  .story-02-heading-line1,
  .story-02-heading-line2 {
    background: #001854 !important;
    color: #FFF !important;
  }
  .story-02-heading-line1 {
    width: clamp(10.5rem, 7.732rem + 11.356vw, 15rem) !important;
  }
  .story-02-heading-line2 {
    width: clamp(14.5rem, 10.194rem + 17.666vw, 21.5rem) !important;
  }

  /* セクション03見出し「己の使命を知り、」「開発のきっかけをつかむ」 */
  .story-03-heading-line1,
  .story-03-heading-line2 {
    background: #F1CD3A !important;
    color: #FFF !important;
  }
  .story-03-heading-line1 {
    width: clamp(12.5rem, 8.379rem + 16.909vw, 19.2rem) !important;
  }
  .story-03-heading-line2 {
    width: clamp(17rem, 11.464rem + 22.713vw, 26rem) !important;
  }

  /* セクション04見出し「失敗の繰り返し…」「それでも心は折れず」 */
  .story-04-heading-line1,
  .story-04-heading-line2 {
    background: #4F4F4F !important;
    color: #FFF !important;
  }
  .story-04-heading-line1 {
    width: clamp(13rem, 8.694rem + 17.666vw, 20rem) !important;
  }
  .story-04-heading-line2 {
    width: clamp(15rem, 10.898rem + 16.824vw, 21.75rem) !important;
  }

  /* セクション05見出し「すべてを懸け、」「リライブシャツが完成！」 */
  .story-05-heading-line1,
  .story-05-heading-line2 {
    background: #BA2A20 !important;
    color: #FFF !important;
    padding-left: 4%;
  }
  .story-05-heading-line1 {
    width: clamp(11rem, 7.309rem + 15.142vw, 17rem) !important;
  }
  .story-05-heading-line2 {
    width: clamp(17.5rem, 12.271rem + 21.451vw, 26rem) !important;
  }

  /* セクション06見出し「着るだけで」「健康になるなんて怪しい？」 */
  .story-06-heading-line1,
  .story-06-heading-line2 {
    background: #4F4F4F !important;
    color: #FFF !important;
  }
  .story-06-heading-line1 {
    width: clamp(10rem, 6.924rem + 12.618vw, 15rem) !important;
  }
  .story-06-heading-line2 {
    width: clamp(20.5rem, 14.656rem + 23.975vw, 30rem) !important;
  }

  /* 本文テキスト共通 */
  .story-02-body,
  .story-03-body,
  .story-04-body,
  .story-05-body,
  .story-06-body,
  .story-07-body {
    margin-top: clamp(1rem, 0.75rem + 1.02vw, 1.5rem) !important;
    width: 100% !important;
    font-size: clamp(0.875rem, 0.721rem + 0.631vw, 1.125rem) !important;
    line-height: 1.8 !important;
    text-align: center !important;
  }

  .story-02-body p,
  .story-03-body p,
  .story-04-body p,
  .story-05-body p,
  .story-06-body p,
  .story-07-body p {
    margin: 0 !important;
  }

  .story-02-body p + p,
  .story-03-body p + p,
  .story-04-body p + p,
  .story-05-body p + p,
  .story-06-body p + p,
  .story-07-body p + p {
    margin-top: 1.5em !important;
  }

  /* 本文色（デスクトップと同じ） */
  .story-02-body { color: #001854 !important; }
  .story-03-body { color: #EDB134 !important; }
  
  .story-04-body { color: #4F4F4F !important; }
  .story-05-body { color: #BA2A20 !important; }
  .story-05-highlight { font-weight: 700 !important; }
  .story-06-body { color: #4F4F4F !important; }
  .story-06-highlight { font-weight: 700 !important; }
  .story-07-body { color: #EDB134 !important; }
  .story-07-highlight { font-weight: 700 !important; }
  .story-07-footnote { font-size: 0.75em !important; opacity: 0.8 !important; }

  /* 画像エリア共通 */
  .story-02-image,
  .story-03-image,
  .story-04-image,
  .story-05-image,
  .story-06-image,
  .story-07-image {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: clamp(21.875rem, 14.186rem + 31.546vw, 34.375rem) !important;
    /* 390px: 350px, 1024px: 550px */
  }

  .story-02-image-pc,
  .story-03-image-pc,
  .story-04-image-pc,
  .story-05-image-pc,
  .story-06-image-pc,
  .story-07-image-pc {
    display: none !important;
  }

  .story-02-image-sp,
  .story-03-image-sp,
  .story-04-image-sp,
  .story-05-image-sp,
  .story-06-image-sp,
  .story-07-image-sp {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* ============================
     セクション07 特別スタイル
  ============================ */
  .story-07-heading-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* セクション07見出し「流れが変わったのは2022年」 */
  .story-07-heading-text {
    display: inline-block !important;
    padding: 0.3rem 0.8rem !important;
    background: #F1CD3A !important;
    color: #FFF !important;
    font-size: clamp(1.25rem, 0.789rem + 1.893vw, 2rem) !important;
    line-height: 1.5 !important;
    width: clamp(20rem, 14.156rem + 23.975vw, 29.5rem) !important;
  }

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

  .story-07-title-image-sp {
    display: block !important;
    width: clamp(12rem, 8.924rem + 12.618vw, 17rem) !important;
    height: auto !important;
    margin-top: clamp(-5rem, -0.154rem - 7.571vw, -2rem) !important;
    /* 390px: -2rem, 1024px: -5rem */
    margin-right: clamp(-1.875rem, 1.153rem - 4.732vw, 0rem) !important;
    /* 390px: 0px, 1024px: -30px */
  }

  /* ============================
     セクション08
  ============================ */
  .story-section--08 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: clamp(5rem, 3.77rem + 5.047vw, 7rem) !important;
    /* padding-topは200pxで上で設定済み */
  }

  .story-section--08 .story-content {
    gap: 5.5rem !important;
  }

  /* 画像をテキストの下に表示 */
  .story-section--08 .story-08-text-area {
    order: 1 !important;
  }

  .story-section--08 .story-08-image {
    order: 2 !important;
  }

  .story-08-text-area {
    position: static !important;
    width: 100% !important;
    max-width: 600px !important;
    text-align: center !important;
  }

  .story-08-title-pc {
    display: none !important;
  }

  .story-08-title-sp {
    display: block !important;
    width: clamp(20rem, 18.77rem + 5.047vw, 22rem) !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .story-08-body {
    margin-top: clamp(1rem, 0.75rem + 1.02vw, 1.5rem) !important;
    font-size: clamp(0.875rem, 0.8rem + 0.31vw, 1rem) !important;
    line-height: 1.8 !important;
    color: #FFF !important;
  }

  .story-08-body-pc {
    display: none !important;
  }

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

  .story-08-image {
    position: static !important;
    width: 100% !important;
    max-width: clamp(21.875rem, 14.186rem + 31.546vw, 34.375rem) !important;
    /* 390px: 350px, 1024px: 550px */
  }

  .story-08-image-pc {
    display: none !important;
  }

  .story-08-image-sp {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* ============================
     カードセクション（Swiperの外）
  ============================ */
  .story-cards-section {
    position: relative !important;
    z-index: 10 !important;
    background-color: #FFF !important;
    padding: clamp(3rem, 2rem + 4.1vw, 5rem) 0 !important;
  }

  /* ============================
     コンタクトセクション（09-contact）
  ============================ */
  #contact {
    position: relative !important;
    z-index: 10 !important;
  }

  /* ============================
     フッター（固定背景より前に表示）
  ============================ */
  .footer,
  footer {
    position: relative !important;
    z-index: 10 !important;
  }

  /* ============================
     JS生成の固定ナビゲーション（縦並び）
  ============================ */
  .story-nav-fixed {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 100 !important;
    transition: opacity 0.3s ease !important;
  }

  .story-nav-fixed.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 背景SVG（左下端に配置） */
  .story-nav-fixed .story-nav-bottom-svg {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: clamp(8.55rem, 6.797rem + 7.192vw, 11.4rem);
    height: clamp(7.35rem, 5.843rem + 6.183vw, 9.8rem);
    z-index: 1 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
  }

  .story-nav-fixed .story-nav-bottom-svg.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .story-nav-fixed .story-nav-bottom-path {
    transition: fill 0.5s ease !important;
  }

  /* ページ番号コンテナ（SVGの上に配置） */
  .story-nav-fixed .story-nav-numbers {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    /* SVGの上に配置するためのマージン */
    margin-left: clamp(1rem, 0.877rem + 0.505vw, 1.2rem) !important;
    /* 390px: 10px, 1024px: 14px */
    margin-bottom: clamp(0.8rem, 0.554rem + 1.009vw, 1.2rem) !important;
    /* 390px: 20px, 1024px: 32px */
  }

  .story-nav-fixed .story-nav-current {
    height: auto !important;
  }

  /* 各番号のサイズを統一（デスクトップ版のスタイルを上書き） */
  .story-nav-fixed img.story-nav-current.story-nav-num-01,
  .story-nav-fixed img.story-nav-current.story-nav-num-02,
  .story-nav-fixed img.story-nav-current.story-nav-num-03,
  .story-nav-fixed img.story-nav-current.story-nav-num-04,
  .story-nav-fixed img.story-nav-current.story-nav-num-05,
  .story-nav-fixed img.story-nav-current.story-nav-num-06,
  .story-nav-fixed img.story-nav-current.story-nav-num-07,
  .story-nav-fixed img.story-nav-current.story-nav-num-08 {
    width: clamp(2.25rem, 1.481rem + 3.155vw, 3.5rem) !important;
    margin-left: 0 !important;
  }

  /* 01のみ85%サイズで表示 */
  .story-nav-fixed img.story-nav-current.story-nav-num-01 {
    transform: scale(0.85) !important;
  }

  /* 04のみ110%サイズで表示 */
  .story-nav-fixed img.story-nav-current.story-nav-num-04 {
    transform: scale(1.09) !important;
  }

  .story-nav-fixed .story-nav-line {
    width:  clamp(2.65rem, 2.127rem + 2.145vw, 3.5rem) !important;
    height: 2px !important;
  }

  .story-nav-fixed .story-nav-total {
    height: auto !important;
    width: clamp(1.9rem, 1.439rem + 1.893vw, 2.65rem) !important;
  }

  /* SP版のみ表示される改行 */
  .sp-only-1024 {
    display: inline !important;
  }

}

/* ============================
   1025px以上ではSP専用改行を非表示
============================ */
.sp-only-1024 {
  display: none;
}

.sp-only-460 {
  display: none;
}

/* ============================
   500px以下でのみ表示される改行
============================ */
@media screen and (max-width: 500px) {
  .sp-only-460 {
    display: inline !important;
  }
}