/*
 * DAISEN ストーリーページ スタイルシート
 * daisen-story/daisen-story.css
 *
 * 依存: daisen-general/daisen-general.css（ヘッダー・ヒーロー・フッター共通CSS）
 *       footer/footer.css
 *
 * ヘッダー・ヒーローは daisen-general.css の .dg-header / .dg-hero をそのまま使用。
 * 本ファイルはストーリーメインエリア（.dst-*）専用スタイルを定義します。
 */

/* ----------------------------------------------------------------
   0. CSS 変数（daisen-general の :root を引き継ぎ、story 独自追加）
   ---------------------------------------------------------------- */
:root {
  /* story 独自トークン */
  --dst-bg:       #c0d6e4;          /* メインエリア背景（CF: general_content_bg） */
  --dst-card:     rgba(255,255,255,.82);
  --dst-card-b:   rgba(255,255,255,.95);
  --dst-ink:      #1a1a2e;
  --dst-muted:    #556;
  --dst-dark:     #08080f;
  --dst-dark2:    #0d1020;
  --dst-border:   rgba(255,255,255,.45);
  --dst-ease:     cubic-bezier(0.16,1,0.3,1);
  --font-d:       'Montserrat', sans-serif;
  --font-s:       'Noto Serif JP', serif;
  --font-b:       'Noto Sans JP', sans-serif;
}

/* ----------------------------------------------------------------
   1. メインラッパー
   ---------------------------------------------------------------- */
.dst-main {
  position: relative;
  background: var(--dst-bg);
  overflow: hidden;
}

/* 微細グレイン質感 */
.dst-main::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}

/* 読了プログレスバー */
.dst-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  z-index: 10001;
  background: linear-gradient(90deg, var(--color, #ffd700), #ffaa00);
  box-shadow: 0 0 8px rgba(255,215,0,.5);
  transition: width .1s linear;
  pointer-events: none;
}

/* ----------------------------------------------------------------
   2. チャプターナビゲーション（スクロール連動）
   ---------------------------------------------------------------- */
.dst-chapnav {
  position: sticky;
  top: 64px;
  margin-top: 40px;      /* ヒーローとの間 */
  margin-bottom: 40px;   /* メインコンテンツとの間 */
  z-index: 100;
  background: linear-gradient(
  to right,
  rgba(10, 14, 20, 0.95),
  rgba(26, 38, 52, 0.95)
);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dst-chapnav::-webkit-scrollbar { display: none; }

.dst-chapnav ul {
  display: flex;
  align-items: center;
  justify-content: center;	
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.dst-chapnav ul li {
  flex-shrink: 0;
}
.dst-chapnav ul li a {
  display: block;
  font-family: var(--font-d);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #e0ecff;
  padding: 14px 16px;
  white-space: nowrap;
  transition: color .3s, background .3s;
  border-bottom: 2px solid transparent;
}
.dst-chapnav ul li a:hover,
.dst-chapnav ul li a.is-active {
  color: var(--dst-ink);
  border-bottom-color: var(--color, #ffd700);
  background: rgba(255,215,0,.05);
}

/* ----------------------------------------------------------------
   3. インナー
   ---------------------------------------------------------------- */
.dst-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 40px 0;
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------------
   4. スクロールリビール
   ---------------------------------------------------------------- */
.dst-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s var(--dst-ease),
    transform .8s var(--dst-ease);
}
.dst-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------
   5. チャプター（共通）
   ---------------------------------------------------------------- */
.dst-chapter {
  margin-bottom: 80px;
  padding: 48px 48px 44px;
  background: var(--dst-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  border: 1.5px solid var(--dst-border);
  box-shadow:
    0 4px 24px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.7);
  position: relative;
  overflow: hidden;
  transition: box-shadow .4s var(--dst-ease);
}
.dst-chapter:hover {
  box-shadow:
    0 12px 48px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* チャプター左上：カラーアクセントライン */
.dst-chapter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color, #ffd700), transparent 70%);
}

/* チャプターラベル（01 BEGINNING 等） */
.dst-chapter__label {
  font-family: var(--font-d);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .45em;
  color: var(--color, #ffd700);
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: .85;
}

/* チャプタータイトル */
.dst-chapter__title {
  font-family: var(--font-d);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 900;
  color: var(--dst-ink);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 28px;
  padding: 0;
  border: none;
}
.dst-chapter__title::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--color, #ffd700);
  border-radius: 2px;
  margin-top: 14px;
  box-shadow: 0 0 12px rgba(255,215,0,.4);
}

/* チャプターイントロ（タイムラインなど用） */
.dst-chapter__intro {
  font-family: var(--font-s);
  font-size: 1rem;
  color: var(--dst-muted);
  margin-bottom: 28px;
  line-height: 2;
}

/* チャプター本文 */
.dst-chapter__body p {
  font-family: var(--font-s);
  font-size: 1rem;
  color: #333;
  line-height: 2.1;
  margin-bottom: 1.4em;
}
.dst-chapter__body p:last-child { margin-bottom: 0; }
.dst-chapter__body strong { color: var(--dst-ink); font-weight: 700; }
.dst-chapter__body em {
  color: var(--color, #ffd700);
  font-style: normal;
  font-weight: 700;
}

/* ----------------------------------------------------------------
   6. 引用ブロック
   ---------------------------------------------------------------- */
.dst-quote {
  margin: 1.6em 0;
  padding: 24px 28px;
  border-left: 3px solid var(--color, #ffd700);
  background: rgba(255,215,0,.04);
  border-radius: 0 14px 14px 0;
  font-family: var(--font-s);
  font-style: italic;
  color: #445;
  line-height: 2.2;
  box-shadow: 0 2px 14px rgba(0,0,0,.04);
}
.dst-quote p { margin-bottom: .5em; color: inherit; font-size: .95rem; }
.dst-quote p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   7. インサイトブロック（DAISENネーム発見）
   ---------------------------------------------------------------- */
.dst-insight {
  margin: 32px 0;
  padding: 32px 36px;
  background: linear-gradient(135deg, rgba(8,8,15,.92), rgba(13,16,32,.9));
  border-radius: 16px;
  border: 1px solid rgba(255,215,0,.18);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.dst-insight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,215,0,.06) 0%, transparent 65%);
  pointer-events: none;
}
.dst-insight p {
  font-family: var(--font-s);
  color: rgba(240,235,220,.75);
  font-size: .95rem;
  line-height: 2;
  margin-bottom: 20px;
}
.dst-insight p strong {
  color: rgba(240,235,220,.95);
}
.dst-insight__word {
  font-family: var(--font-d);
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 900;
  letter-spacing: .25em;
  margin: 20px 0;
  position: relative;
  z-index: 1;
}
.dst-insight__d,
.dst-insight__sen {
  color: rgba(240,235,220,.4);
}
.dst-insight__ai {
  color: var(--color, #ffd700);
  text-shadow: 0 0 24px rgba(255,215,0,.5);
}

/* ----------------------------------------------------------------
   8. タイムライングリッド
   ---------------------------------------------------------------- */
.dst-chapter--timeline {
  overflow: visible;
}
.dst-timeline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 4px 0 0;
}
.dst-timeline__card {
  background: var(--dst-card-b);
  border-radius: 16px;
  padding: 28px 24px;
  border: 1.5px solid rgba(255,255,255,.6);
  box-shadow: 0 4px 18px rgba(0,0,0,.07);
  position: relative;
  overflow: hidden;
  transition: transform .38s var(--dst-ease), box-shadow .38s var(--dst-ease);
  animation-delay: var(--delay, 0s);
}
.dst-timeline__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color, #ffd700);
  opacity: .8;
}
.dst-timeline__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}
.dst-timeline__era {
  font-family: var(--font-d);
  font-size: 1rem;
  font-weight: 900;
  color: var(--dst-ink);
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.dst-timeline__bar {
  width: 28px;
  height: 2px;
  background: var(--color, #ffd700);
  border-radius: 2px;
  margin-bottom: 12px;
  box-shadow: 0 0 8px rgba(255,215,0,.35);
}
.dst-timeline__text {
  font-family: var(--font-s);
  font-size: .875rem;
  color: #445;
  line-height: 1.9;
}

/* ----------------------------------------------------------------
   9. ハイライトブロック
   ---------------------------------------------------------------- */
.dst-highlight {
  margin: 1.6em 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(255,215,0,.07), rgba(255,215,0,.02));
  border: 1.5px solid rgba(255,215,0,.22);
  border-radius: 14px;
}
.dst-highlight p {
  font-family: var(--font-s);
  font-size: 1rem;
  color: var(--dst-ink);
  line-height: 2;
  margin: 0;
}
.dst-highlight p strong { color: var(--dst-ink); }

/* ----------------------------------------------------------------
   10. ピラー（変わらないもの）
   ---------------------------------------------------------------- */
.dst-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}
.dst-pillar {
  padding: 24px;
  background: linear-gradient(135deg, rgba(8,8,15,.88), rgba(13,16,32,.85));
  border-radius: 12px;
  border: 1px solid rgba(255,215,0,.14);
  text-align: center;
}
.dst-pillar__q {
  font-family: var(--font-s);
  font-size: clamp(.9rem, 2vw, 1.05rem);
  font-weight: 700;
  color: rgba(240,235,220,.88);
  line-height: 1.8;
  letter-spacing: .03em;
}

/* ----------------------------------------------------------------
   11. ビジョンブロック（フルワイドダーク）
   ---------------------------------------------------------------- */
.dst-vision {
  background: linear-gradient(150deg, #08080f 0%, #0d1020 45%, #08080f 100%);
  padding: clamp(60px, 12vw, 100px) clamp(24px, 8vw, 80px);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0;
}

/* 背景装飾：放射グロー */
.dst-vision::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  padding-bottom: 70%;
  background: radial-gradient(circle, rgba(0,200,230,.06) 0%, transparent 65%);
  pointer-events: none;
}
/* 背景装飾：ゴールドグロー */
.dst-vision::after {
  content: '';
  position: absolute;
  bottom: 0; right: 10%;
  width: 40%;
  padding-bottom: 40%;
  background: radial-gradient(circle, rgba(255,215,0,.04) 0%, transparent 65%);
  pointer-events: none;
}

.dst-vision__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}
.dst-vision__label {
  font-family: var(--font-d);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .5em;
  color: var(--color, #ffd700);
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: .8;
}
.dst-vision__title {
  font-family: var(--font-d);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  color: rgba(240,235,220,.9);
  letter-spacing: -.02em;
  margin: 0 0 12px;
  padding: 0;
  border: none;
}
.dst-vision__intro {
  font-family: var(--font-s);
  font-size: .95rem;
  color: rgba(200,195,185,.55);
  margin-bottom: 40px;
  line-height: 1.9;
}

/* ビジョン声明 */
.dst-vision__statement {
  margin: 0 auto 44px;
  padding: 40px 32px;
  border: 1px solid rgba(0,200,230,.14);
  border-radius: 20px;
  background: rgba(0,200,230,.02);
  box-shadow: inset 0 0 60px rgba(0,200,230,.03);
}
.dst-vision__en {
  font-family: var(--font-d);
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  font-weight: 900;
  color: #00ffe5;
  text-shadow: 0 0 40px rgba(0,255,229,.45), 0 0 80px rgba(0,255,229,.2);
  line-height: 1.35;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}
.dst-vision__en span {
  font-size: .55em;
  font-weight: 300;
  color: rgba(0,255,229,.5);
  letter-spacing: .2em;
  display: block;
}
.dst-vision__ja {
  font-family: var(--font-b);
  font-size: clamp(.85rem, 1.5vw, 1rem);
  color: rgba(200,195,185,.5);
  letter-spacing: .2em;
}

/* ビジョンメッセージ */
.dst-vision__message {
  padding: 32px 36px;
  border: 1px solid rgba(255,215,0,.12);
  border-radius: 14px;
  background: rgba(255,215,0,.02);
  text-align: left;
  max-width: 640px;
  margin: 0 auto;
}
.dst-vision__message p {
  font-family: var(--font-s);
  font-size: .95rem;
  color: rgba(220,215,200,.65);
  line-height: 2.1;
  margin-bottom: 1em;
}
.dst-vision__message p:last-child { margin-bottom: 0; }
.dst-vision__message strong {
  color: rgba(220,215,200,.88);
  font-weight: 700;
}

/* ----------------------------------------------------------------
   12. CTAブロック → /origin/
   ---------------------------------------------------------------- */
.dst-cta {
  margin: 80px 0 96px;
  border-radius: 28px;
  background: linear-gradient(150deg, #0d1020 0%, #111428 50%, #0d1020 100%);
  border: 1.5px solid rgba(255,215,0,.14);
  overflow: hidden;
  position: relative;
  box-shadow:
    0 24px 64px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* 山シルエットSVG */
.dst-cta__mountain {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.dst-cta__mountain svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
}

/* CTA コンテンツ */
.dst-cta__content {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 7vw, 64px) clamp(28px, 6vw, 60px);
  text-align: center;
}
.dst-cta__eyebrow {
  font-family: var(--font-d);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .5em;
  color: var(--color, #ffd700);
  margin-bottom: 20px;
  opacity: .8;
}
.dst-cta__heading {
  font-family: var(--font-s);
  font-size: clamp(1.2rem, 3vw, 1.75rem);
  font-weight: 700;
  color: rgba(240,235,220,.92);
  line-height: 1.6;
  letter-spacing: .03em;
  margin: 0 0 20px;
  padding: 0;
  border: none;
}
.dst-cta__body {
  font-family: var(--font-s);
  font-size: .925rem;
  color: rgba(200,195,185,.6);
  line-height: 2.1;
  max-width: 540px;
  margin: 0 auto 36px;
}
.dst-cta__body em {
  color: var(--color, #ffd700);
  font-style: normal;
  font-weight: 700;
}

/* CTA ボタン */
.dst-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 56px;
  padding: 3px;
  background: linear-gradient(135deg, var(--color, #ffd700), #ffaa00);
  box-shadow: 0 6px 28px rgba(255,215,0,.28), 0 0 0 0 rgba(255,215,0,.1);
  transition:
    transform .35s var(--dst-ease),
    box-shadow .35s var(--dst-ease);
}
.dst-cta__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(255,215,0,.42), 0 0 0 8px rgba(255,215,0,.06);
}
.dst-cta__btn-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0d1020;
  border-radius: 54px;
  padding: 16px 36px;
  transition: background .3s;
}
.dst-cta__btn:hover .dst-cta__btn-inner {
  background: #111428;
}
.dst-cta__btn-text {
  font-family: var(--font-d);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color, #ffd700);
}
.dst-cta__btn-text em {
  font-style: normal;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 12px rgba(255,255,255,.5);
}
.dst-cta__btn-arrow {
  font-size: .9rem;
  color: var(--color, #ffd700);
  transition: transform .3s var(--dst-ease);
}
.dst-cta__btn:hover .dst-cta__btn-arrow {
  transform: translateX(5px);
}

/* ----------------------------------------------------------------
   13. Back to Top ボタン
   ---------------------------------------------------------------- */
.dst-btt {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(8,8,15,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,215,0,.25);
  color: var(--color, #ffd700);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity .4s var(--dst-ease),
    visibility .4s,
    transform .4s var(--dst-ease),
    box-shadow .3s;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.dst-btt.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dst-btt:hover {
  box-shadow: 0 8px 28px rgba(255,215,0,.25);
  border-color: rgba(255,215,0,.55);
}

/* ----------------------------------------------------------------
   14. daisen-general.css の .dg-page-nav を story 用に微調整
   ---------------------------------------------------------------- */
.dst-main .dg-page-nav {
  margin-top: 0;
  padding-bottom: 80px;
}

/* ----------------------------------------------------------------
   15. レスポンシブ
   ---------------------------------------------------------------- */

/* タブレット（〜900px） */
@media (max-width: 900px) {
  .dst-inner {
    padding: 56px 24px 0;
  }
  .dst-chapter {
    padding: 36px 32px 32px;
    border-radius: 18px;
  }
  .dst-timeline {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .dst-pillars {
    grid-template-columns: 1fr 1fr;
  }
  .dst-vision {
    padding: 64px 32px;
  }
}

/* スマートフォン（〜640px） */
@media (max-width: 640px) {
  .dst-inner {
    padding: 40px 16px 0;
  }
  .dst-chapter {
    padding: 28px 22px 24px;
    border-radius: 16px;
    margin-bottom: 56px;
  }
  .dst-chapter__title {
    font-size: 1.25rem;
  }
  .dst-timeline {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dst-timeline__card {
    padding: 20px 18px;
  }
  .dst-pillars {
    grid-template-columns: 1fr;
  }
  .dst-pillar {
    padding: 20px;
  }
  .dst-insight {
    padding: 24px 20px;
  }
  .dst-insight__word {
    font-size: clamp(1.6rem, 9vw, 2.4rem);
  }
  .dst-vision {
    padding: 48px 20px;
  }
  .dst-vision__statement {
    padding: 28px 20px;
  }
  .dst-vision__message {
    padding: 24px 20px;
    text-align: center;
  }
  .dst-cta {
    margin: 56px 0 72px;
    border-radius: 20px;
  }
  .dst-cta__content {
    padding: 36px 20px;
  }
  .dst-cta__heading {
    font-size: 1.15rem;
  }
  .dst-cta__btn-inner {
    padding: 14px 24px;
  }
  .dst-cta__btn-text {
    font-size: .82rem;
  }
.dst-chapnav ul {
  flex-wrap: wrap;           /* ← 折り返し有効化（2段表示の核心） */
}
.dst-chapnav ul li {
  width: 25%;                /* ← 4アイテム × 2行 = 8アイテム */
  flex-shrink: 0;
}
.dst-chapnav ul li a {
  padding: 10px 4px;
  font-size: .62rem;
  white-space: normal;       /* ← 折り返し許可 */
  text-align: center;        /* ← テキスト中央揃え */
  line-height: 1.4;
}
	
  .dst-btt {
    bottom: 20px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
}

/* 極小画面（〜375px） */
@media (max-width: 375px) {
  .dst-chapter {
    padding: 22px 16px 20px;
  }
  .dst-quote {
    padding: 16px 18px;
  }
}

.ds-nav__origin {
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 2px;
  padding: .3em .85em;
  color: rgba(255,255,255,.8);
  letter-spacing: .1em;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}
.ds-nav__origin:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.65);
  color: #fff;
}

/* ハンバーガー → × スムーズ切替 */
.dg-header__toggle span {
  transition: transform .3s ease, opacity .3s ease;
  transform-origin: center;
}
.dg-header__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dg-header__toggle.is-active span:nth-child(2) { opacity: 0; }
.dg-header__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }