/* ============================================================
   ensō prototype — animation.css
   ------------------------------------------------------------
   主な調整ポイント:
   ・#stroke の stroke-width: 3.5 … 筆線の太さ
   ・.mist の opacity … 墨の気配の濃さ（0.04〜0.08が上品な範囲）
   ・.loop-node2 の transition 0.8s … 円周の言葉が浮かぶ速さ
   ・場面の切り替えタイミングは js/animation.js の SCENES で調整
   ============================================================ */

:root {
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 墨の気配（視差レイヤー2枚 ※外せます） ---------- */

.mist {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.mist-1 {
  width: 90vmax; height: 90vmax;
  left: -30vmax; top: -20vmax;
  background: radial-gradient(closest-side, rgba(28, 27, 24, 0.055), transparent 70%);
}
.mist-2 {
  width: 70vmax; height: 70vmax;
  right: -25vmax; bottom: -25vmax;
  background: radial-gradient(closest-side, rgba(28, 27, 24, 0.045), transparent 70%);
}

/* ---------- 場面（不透明度と位置はJSがスクロール量から毎フレーム計算） ---------- */

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---------- 円周の言葉（線が通過すると浮かぶ） ---------- */

.loop-node2 circle {
  fill: #F7F5F0;
  stroke: #1C1B18;
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 0.8s var(--ease-soft);
}
.loop-node2 text {
  font-size: 22px;
  fill: #1C1B18;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
}
.loop-node2.on circle,
.loop-node2.on text {
  opacity: 1;
  transform: translateY(0);
}
.loop-node2[data-karte].on circle {
  fill: #FB8446;
  stroke: #FB8446;
}

/* ---------- 落款 ----------
   物語の側では押さない（押すと物語がCTAの前に「完成」してしまう）。
   落款は円成CTAでユーザーが残りの一画を引いた瞬間にだけ押される */

#seal { display: none; }

/* ---------- スクロールの促し ---------- */

.scroll-cue {
  display: block;
  width: 1px;
  height: 48px;
  background: #1C1B18;
  transform-origin: top;
  animation: cue 2s var(--ease-soft) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- reduced-motion: 完成した一枚として静止 ---------- */

.rm-only { display: none; }

@media (prefers-reduced-motion: reduce) {
  #story { height: auto !important; }
  #stage { position: static; }
  .scene { display: none; }
  .scroll-cue { animation: none; }
  .mist { display: none; }
  #stroke { stroke-dashoffset: 0 !important; }
  .loop-node2 circle, .loop-node2 text, #seal rect {
    opacity: 1; transform: none; transition: none;
  }
  .rm-only { display: block; }
}

/* ============================================================
   洗練パス: 墨の質感 と 可読性
   ------------------------------------------------------------
   調整ポイント:
   ・bs-core / bs-mid / bs-halo … 筆線3層の太さと濃さ（にじみ量）
   ・HTML側 #ink-edge の scale="6" … 輪郭の揺らぎ（荒れ具合）
   ・.copy-veil::before の 0.95 / 0.75 … 紙ベールの濃さ
   ・.loop-node2 text の 26px と stroke-width 10 … 言葉の大きさと袋文字
   ============================================================ */

/* ---------- 筆線3層（芯・にじみ・暈し） ---------- */

.bs {
  fill: none;
  stroke: #1A1815;
  stroke-linecap: round;
}
.bs-core { stroke-width: 4.5; }
.bs-mid  { stroke-width: 8;  opacity: 0.14; }
.bs-halo { stroke-width: 13; opacity: 0.05; }

/* ---------- 円周の言葉: 大きく・紙色の袋文字で線に負けない ---------- */

.loop-node2 text {
  font-size: 26px;
  letter-spacing: 2px;
  paint-order: stroke;
  stroke: #F7F4EE;
  stroke-width: 10px;
  stroke-linejoin: round;
}
.loop-node2 circle {
  fill: #F7F4EE;
  stroke: #1A1815;
  stroke-width: 3;
}

/* ---------- 章コピーの背後に紙のベール ---------- */

.copy-veil { position: relative; }

/* 「二｜円」のコピーは、円周の言葉（上:LINEで予約 / 下:来店と、記録）の
   垂直の隙間に置く。10vh より小さくすると上のラベルと行が重なる */
#s2 .copy-veil { transform: translateY(10vh); }
.copy-veil::before {
  content: '';
  position: absolute;
  inset: -56px -72px;
  background: radial-gradient(ellipse at center,
    rgba(247, 244, 238, 0.95) 0%,
    rgba(247, 244, 238, 0.75) 45%,
    rgba(247, 244, 238, 0) 78%);
  z-index: -1;
}

.scroll-cue { background: #1A1815; }

@media (prefers-reduced-motion: reduce) {
  .bs { stroke-dashoffset: 0 !important; }
}

/* ============================================================
   完成系パス: かすれ・縦書きラベル・通常セクションの所作
   ------------------------------------------------------------
   調整ポイント:
   ・.scratch の stroke-dasharray … かすれの粗さ（間隔を広げると枯れる）
   ・.v-label … 章の縦書きラベル
   ・[data-reveal] の 26px / 1s … セクションが浮かぶ距離と長さ
   ============================================================ */

/* ---------- かすれ（乱れの区間だけ、紙色の細線で墨を削る） ---------- */

.scratch {
  fill: none;
  stroke: #F7F4EE;
  stroke-linecap: round;
  stroke-width: 1.7;
  stroke-dasharray: 4 12;
}
.scratch-2 {
  stroke-width: 1.2;
  stroke-dasharray: 2 14;
}

/* ---------- 固定ヘッダー（物語を抜けると現れる） ---------- */

#site-head {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-soft);
  background: linear-gradient(180deg, #F7F4EE 55%, rgba(247, 244, 238, 0));
}
#site-head.show {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- 章の縦書きラベル ---------- */

.v-label {
  writing-mode: vertical-rl;
  font-size: 14px;
  letter-spacing: 0.5em;
  color: #8B887F;
  height: fit-content;
}

/* ---------- ボタンの所作 ---------- */

.btn-ink {
  display: inline-block;
  background: #1A1815;
  color: #F7F4EE;
  transition: opacity 0.35s var(--ease-soft);
}
.btn-ink:hover { opacity: 0.82; }
.btn-line {
  display: inline-block;
  border: 1px solid #B8B4A8;
  color: #1A1815;
  transition: border-color 0.35s var(--ease-soft);
}
.btn-line:hover { border-color: #1A1815; }

/* LINE相談ボタン。LINE緑(#06C755)は「LINEへの導線」だけに許可
   (LPのCTAと、お問い合わせページの近道。装飾には使わない)。
   相談導線そのものをLINEにすることで、相談体験が製品デモを兼ねる */
.btn-line-green {
  display: inline-block;
  background: #06C755;
  color: #FFFFFF;
  transition: opacity 0.35s var(--ease-soft);
}
.btn-line-green:hover { opacity: 0.85; }

/* ---------- 通常セクションの浮かび上がり ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- カルテの朱点 と FAQの開閉 ---------- */

.karte-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 2px;
  background: #FB8446;
  vertical-align: 2px;
}
.faq-i { transition: transform 0.35s var(--ease-soft); }
.faq-w[open] .faq-i { transform: rotate(45deg); }

/* ---------- reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  #site-head { opacity: 1; pointer-events: auto; transition: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .faq-i { transition: none; }
}

/* ============================================================
   1本のストーリー化: 章を貫く線 と 円成CTA
   ------------------------------------------------------------
   調整ポイント:
   ・.chap-line の left: 18px … 章線の位置
   ・.splash の --dx/--dy はHTML側 … 墨のはねの飛び方
   ・#cta-gap の transition 0.9s … 最後の一画が引かれる速さ
   ・stagger の 0.07s刻み … 章の中身が順に浮かぶ間隔
   ============================================================ */

/* ---------- 章を貫く1本の線 ---------- */

.chap-line {
  position: absolute;
  left: 18px;
  top: 70px;
  bottom: 70px;
  width: 1px;
  background: #E3DFD4;
}
.chap-line-fill {
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 2px;
  height: 0;
  background: #1A1815;
}
.chap-node {
  position: absolute;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #F7F4EE;
  border: 2px solid #B8B4A8;
  transition: border-color 0.6s var(--ease-soft), background-color 0.6s var(--ease-soft);
}
.chap-node.on { border-color: #1A1815; background: #1A1815; }
.chap-node-karte.on { border-color: #FB8446; background: #FB8446; }

/* ---------- 章の中身が順に浮かぶ ---------- */

#chapters section .grid > div {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
}
#chapters section.is-visible .grid > div { opacity: 1; transform: none; }
#chapters section.is-visible .grid > div:nth-child(2) { transition-delay: 0.07s; }
#chapters section.is-visible .grid > div:nth-child(3) { transition-delay: 0.14s; }
#chapters section.is-visible .grid > div:nth-child(4) { transition-delay: 0.21s; }
#chapters section.is-visible .grid > div:nth-child(5) { transition-delay: 0.28s; }
#chapters section.is-visible .grid > div:nth-child(6) { transition-delay: 0.35s; }
#chapters section.is-visible .grid > div:nth-child(7) { transition-delay: 0.42s; }
#chapters section.is-visible .grid > div:nth-child(8) { transition-delay: 0.49s; }

/* ---------- 数字に墨が入る ---------- */

.num-ink {
  opacity: 0.15;
  filter: blur(7px);
  transition: opacity 1.3s var(--ease-soft), filter 1.3s var(--ease-soft);
}
section.is-visible .num-ink { opacity: 1; filter: blur(0); }
[data-pencil-name="Results"].is-visible .grid > div:nth-child(2) .num-ink { transition-delay: 0.3s; }
[data-pencil-name="Results"].is-visible .grid > div:nth-child(3) .num-ink { transition-delay: 0.6s; }

/* ---------- 円成CTA ---------- */

.cbs {
  fill: none;
  stroke: #1A1815;
  stroke-linecap: round;
}
.cbs-core { stroke-width: 5; }
.cbs-mid  { stroke-width: 9;  opacity: 0.14; }
.cbs-halo { stroke-width: 15; opacity: 0.05; }

/* 成就の瞬間、まだ描き途中だった本体の円も滑らかに描き切られる */
#cta-stage.done .cbs { transition: stroke-dashoffset 0.5s var(--ease-soft); }

#cta-gap {
  fill: none;
  stroke: #1A1815;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0;
  transition: stroke-dashoffset 0.9s var(--ease-soft), opacity 0.5s var(--ease-soft);
}
#cta-stage.peek #cta-gap { opacity: 0.5; } /* 予告の濃さ。1.0にすると成就と区別がつかなくなる */
#cta-stage.done #cta-gap { opacity: 1; }

#cta-seal rect {
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.35s var(--ease-soft), transform 0.45s var(--ease-soft);
}
#cta-stage.done #cta-seal rect { opacity: 1; transform: scale(1); }

.splash {
  position: absolute;
  left: 72.3%;  /* 620px時代の448px/66pxを%化。ステージが縮んでも欠けの位置に追従 */
  top: 10.6%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1A1815;
  opacity: 0;
  pointer-events: none;
}
#cta-stage.done .splash { animation: splash 0.7s var(--ease-soft) 0.6s forwards; }
@keyframes splash {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  25%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}

/* ボタンのホバー応答は「予告(peek)」と btn-ink の墨の濃度変化のみ。
   磁石の吸い寄せ・浮き上がり・影は、静けさと合わないため廃止 */

#cta-after {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s var(--ease-soft) 1s, transform 0.8s var(--ease-soft) 1s;
}
#cta-stage.done #cta-after { opacity: 1; transform: none; }

/* ---------- reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .chap-line-fill { height: 100% !important; }
  .chap-node { border-color: #1A1815; background: #1A1815; transition: none; }
  .chap-node-karte { border-color: #FB8446; background: #FB8446; }
  #chapters section .grid > div { opacity: 1; transform: none; transition: none; }
  .num-ink { opacity: 1; filter: none; transition: none; }
  .cbs { stroke-dashoffset: 0 !important; }
  #cta-gap, #cta-seal rect, #cta-after { transition: none; }
  #cta-stage.done .splash { animation: none; }
}

/* ============================================================
   モバイル(〜767px): 「一本線の語り直し」
   ------------------------------------------------------------
   デスクトップは「面(グリッド)」で見せ、モバイルは章線を主役に
   「線(スレッド)」で見せる。HTMLは触らず、目印属性から当てる。
   調整ポイント:
   ・#chapters の padding-left: 56px … 線と本文の間合い。
     変えたら Features のノード位置 left: -43px も連動して直すこと
     (ノード中心 = 章線の中心 18.5px − padding-left)
   ・Pricing の flex-basis 78vw … カードの見せ幅(次カードの覗き量)
   ・#cta-stage の 92vw … 円相の直径
   ============================================================ */

@media (max-width: 767px) {

  /* ---------- 下地: 余白・見出し・章ラベルは横書きの overline に ---------- */

  #chapters { padding-left: 56px; padding-right: 24px; }
  #chapters section { padding-top: 60px; padding-bottom: 60px; }
  #chapters section > div { flex-direction: column; gap: 14px; }
  #chapters section h2 { font-size: clamp(22px, 6.4vw, 28px); }
  .v-label {
    writing-mode: horizontal-tb;
    height: auto;
    font-size: 12px;
  }

  /* ---------- 三｜巡る: 機能は線上のノードの連なりとして縦に ---------- */

  [data-pencil-name="Features"] .grid {
    grid-template-columns: 1fr;
    gap: 36px 0;
  }
  [data-pencil-name="Features"] .grid > div { position: relative; }
  [data-pencil-name="Features"] .grid > div::before {
    content: '';
    position: absolute;
    left: -43px; /* 章線(18.5px)に乗る位置。#chapters の padding-left と連動 */
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F7F4EE;
    border: 2px solid #1A1815;
  }
  /* カルテ(差別化の核)のノードだけ朱 */
  [data-pencil-name="Features"] .grid > div:nth-child(2)::before {
    border-color: #FB8446;
    background: #FB8446;
  }

  /* ---------- 四｜一筆: 横のタイムラインを、番号を貫く縦の一筆に ---------- */

  [data-pencil-name="Karte"] .grid {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }
  [data-pencil-name="Karte"] .grid > span {
    left: 13px;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 1px;
    height: auto;
  }

  /* ---------- 五｜験: 数字はひとつずつ、大きく ---------- */

  [data-pencil-name="Results"] .grid {
    grid-template-columns: 1fr;
    gap: 44px 0;
  }

  /* ---------- 六｜構え: 縦スクロールがそのまま横の流れになる ----------
     セクションを縦に長く取り、その間カード列をピン留め。スクロール量を
     JS が scrollLeft に変換する（手でのスワイプもそのまま効く）。
     ・min-height の 260vh … 流れる区間の長さ（増やすほどゆっくり流れる）
     ・flex-basis 82vw …… カードの見せ幅（次カードの覗き量） */

  [data-pencil-name="Pricing"] { min-height: 260vh; }
  [data-pencil-name="Pricing"] > div {
    position: sticky;
    top: 68px;
  }
  [data-pencil-name="Pricing"] .grid {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    margin-right: -24px;   /* 右端は画面の縁まで抜く(次カードの気配) */
    padding: 14px 24px 8px 2px;
    scrollbar-width: none;
  }
  [data-pencil-name="Pricing"] .grid::-webkit-scrollbar { display: none; }
  [data-pencil-name="Pricing"] .grid > div {
    flex: 0 0 82vw;
    max-width: 300px;
  }
  [data-pencil-name="Pricing"] .grid > div:nth-child(3) { order: -1; }
  #chapters [data-pencil-name="Pricing"].is-visible .grid > div:nth-child(3) { transition-delay: 0s; }

  /* ---------- 七｜始筆 ---------- */

  [data-pencil-name="Steps"] .grid {
    grid-template-columns: 1fr;
    gap: 36px 0;
  }

  /* ---------- 終｜円成: 円相は画面からあふれる大きな弧として通す ----------
     画面幅ぴったりの円だと中身(見出し+ボタン)を内接できず、線がボタンで
     途切れて見える。そこでモバイルでは円を 130vw に広げ、弧が画面の縁を
     沿うように通し、中身は円の内側に自然に収める。欠けた一画は右上に残る */

  #cta { padding-top: 48px; padding-bottom: 48px; }
  #cta-stage {
    width: min(560px, 130vw);
    height: min(560px, 130vw);
    margin-left: calc((100% - min(560px, 130vw)) / 2);
  }
  #cta-stage > div { padding-left: 16px; padding-right: 16px; }
  #cta h2 { font-size: 20px; line-height: 1.9; }
  #cta-stage > div > p { font-size: 12px; margin-top: 8px; }
  #cta-mag { flex-direction: column; gap: 10px; margin-top: 20px; }
  #cta-mag a { padding: 12px 24px; font-size: 12px; }
  #cta-stage #cta-after { margin-top: 16px; font-size: 10px; letter-spacing: 0.2em; }
  /* ボタンは2つとも塗りがあるため、円の線が文字を横切ることはない */

  /* ---------- ヘッダーとフッター ---------- */

  #site-head { padding-left: 20px; padding-right: 20px; }
  footer[data-pencil-name="Footer"] { padding-left: 24px; padding-right: 24px; }
  [data-pencil-name="Footer"] .justify-between { flex-direction: column; gap: 28px; }
  [data-pencil-name="Footer"] .gap-12 { flex-wrap: wrap; gap: 12px 28px; }
}

/* reduced-motion: 料金の「流れ」を止め、素直なスワイプ（スナップ付き）に戻す */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  [data-pencil-name="Pricing"] { min-height: 0; }
  [data-pencil-name="Pricing"] > div { position: static; }
  [data-pencil-name="Pricing"] .grid { scroll-snap-type: x mandatory; }
  [data-pencil-name="Pricing"] .grid > div { scroll-snap-align: start; }
}