@import url("https://fonts.googleapis.com/css2?family=Yellowtail&display=swap");
/* ============================================================================
   Suttalog LP — src/suttalog/suttalog-lp.css（2026-09-30 新設）
   ----------------------------------------------------------------------------
   ★ 読み込み順は tokens.css → shell.css → themes.css → このファイル。
   ★ 規則はすべて .lpst の中に閉じ込める。アニメ名にも st- を付ける
     （shell.css と名前がぶつかると、別のページの動きが黙って置き換わる）。
   ★ 地・字はサイトの白ベース（tokens.css と同じ値）。差し色だけアプリのもの。
   ★ ロゴの Yellowtail はアプリのサイト（suttalog.web.app）と同じ筆記体。
     このページでしか使わないので、ここで読む（base.njk には足さない）。
   ========================================================================== */

/* ═══ §1  トークン ═══════════════════════════════════════════════════════ */
html[data-app="suttalog"]{
  color-scheme: light;
  --bg          : #F3F3F3;
  --surface     : #FFFFFF;
  --surface-2   : #E7E7E7;
  --fg-1        : #101010;   /* 17.15:1 */
  --fg-2        : #4A4A4A;   /*  7.99:1 */
  --fg-3        : #656565;   /*  5.25:1 */
  --rule        : rgba(16,16,16,.12);
  --rule-2      : rgba(16,16,16,.07);
  --rule-hair   : rgba(0,0,0,.08);
  /* ★ 残り火。アプリの #C95524 は白地で 3.94:1 なので、字に使うのは
     色相と彩度はそのまま明るさだけ落とした #A3451D（5.52:1）。
     #C95524 は点・波形・輪など «字でないもの» だけに使う。 */
  --accent      : #A3451D;
  --accent-2    : #C95524;
  --accent-line : rgba(201,85,36,.30);
  --accent-soft : rgba(201,85,36,.09);
  --accent-ink  : #FFFFFF;
  --shadow-card : 0 4px 18px rgba(0,0,0,.07);
  --shadow-flat : 0 1px 3px rgba(0,0,0,.05);
  --font-display: "Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-num    : var(--font-body);
  --btn-r       : var(--r-md);
}

/* ═══ §2  版面 ═══════════════════════════════════════════════════════════ */
.lpst{
  --st-gut : var(--gutter, clamp(20px, 5vw, 40px));
  --st-max : calc(var(--shell-max-wide, 1120px) + var(--st-gut) * 2);
  --ember  : var(--accent-2);
  overflow-x: clip;
  padding-block-end: clamp(20px, 3vw, 40px);
}
.lpst img{ display: block; max-inline-size: 100%; block-size: auto; }
.lpst .st-wrap{ inline-size: 100%; max-inline-size: var(--st-max); margin-inline: auto; padding-inline: var(--st-gut); }
.lpst .badge-link{ display: inline-block; border-radius: 10px; }
.lpst .badge-link img{ inline-size: 150px; }

/* ═══ §3  名のり ═════════════════════════════════════════════════════════ */
.lpst .st-hero{ position: relative; overflow: clip; padding-block: clamp(16px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.lpst .st-hero__in{ position: relative; z-index: 1; display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 860px){ .lpst .st-hero__in{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.lpst .st-appmark{ display: flex; align-items: center; gap: 14px; }
.lpst .st-appmark img{ inline-size: 48px; block-size: 48px; border-radius: 22.5%; box-shadow: 0 0 0 1px var(--rule-2); }
.lpst .st-wordmark{ font-family: "Yellowtail", cursive; font-size: 40px; line-height: 1; color: var(--fg-1); letter-spacing: 0; }
.lpst .st-wordmark i{ font-style: normal; color: var(--ember); }
.lpst .st-kicker{ margin: 12px 0 0; font-size: 12px; letter-spacing: .3em; color: var(--fg-3); }
.lpst .st-h1{ margin: 28px 0 0; font-family: var(--font-display); font-weight: 600; color: var(--fg-1);
  font-size: clamp(28px, 1.2rem + 3vw, 48px); line-height: 1.5; letter-spacing: .08em; }
.lpst .st-h1 em{ font-style: normal; color: var(--accent); }
.lpst .st-lede{ margin: 22px 0 0; max-inline-size: 32em; font-size: clamp(15px, .9rem + .2vw, 16.5px); line-height: 1.95; color: var(--fg-2); }
.lpst .st-lede + .st-lede{ margin-block-start: 10px; }
.lpst .st-cta{ margin: 30px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.lpst .st-cta span{ font-size: 12.5px; color: var(--fg-3); }

.lpst .st-shot{ margin: 0; border-radius: 18px; overflow: clip; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 16px 36px rgba(0,0,0,.10); }
.lpst .st-hero__phone{ max-inline-size: 360px; justify-self: center; }

/* ═══ §4  署名 «色を、ひとつだけ戻す» ══════════════════════════════════════ */
.lpst .st-sig{ padding-block: clamp(48px, 7vw, 88px); background: var(--surface); border-block: 1px solid var(--rule-2); }
.lpst .st-sig__in{ display: grid; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (min-width: 860px){ .lpst .st-sig__in{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.lpst .st-eyebrow{ margin: 0; font-size: 11px; letter-spacing: .34em; color: var(--fg-3); }
.lpst .st-h2{ margin: 10px 0 0; font-family: var(--font-display); font-weight: 600; color: var(--fg-1);
  font-size: clamp(22px, 1rem + 1.6vw, 32px); line-height: 1.55; letter-spacing: .08em; }
.lpst .st-h2 em{ font-style: normal; color: var(--accent); }
.lpst .st-sig p{ margin: 16px 0 0; max-inline-size: 30em; color: var(--fg-2); }
.lpst .st-photo{ position: relative; margin: 0; border-radius: 16px; overflow: clip; aspect-ratio: 900 / 1470;
  inline-size: 100%; max-inline-size: 420px; justify-self: center; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 18px 40px rgba(0,0,0,.14); }
.lpst .st-photo img{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.lpst .st-photo figcaption{ position: absolute; inset-inline: 0; inset-block-end: 0; padding: 14px 16px;
  font-size: 12px; letter-spacing: .14em; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.lpst .st-replay{ margin-block-start: 18px; min-block-size: 40px; padding-inline: 18px; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--surface); color: var(--fg-1); font: inherit; font-size: 13px; letter-spacing: .1em; cursor: pointer; }
.lpst .st-replay:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* ═══ §5  節 ═════════════════════════════════════════════════════════════ */
.lpst .st-act{ padding-block: clamp(52px, 7vw, 92px) 0; }
.lpst .st-sec-head{ display: flex; align-items: baseline; gap: 16px; padding-block-end: 14px; border-block-end: 1px solid var(--rule); }
.lpst .st-sec-head .st-h2{ margin: 0; font-size: clamp(19px, .9rem + 1vw, 24px); }
.lpst .st-sec-head .mark{ inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ember); flex: none; transform: translateY(-3px); }
.lpst .st-feat{ display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; margin-block-start: clamp(24px, 3.4vw, 40px); }
@media (min-width: 860px){ .lpst .st-feat--img{ grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.lpst .st-feat p{ margin: 0; max-inline-size: 34em; font-size: 15.5px; line-height: 1.95; color: var(--fg-2); }
.lpst .st-feat .st-shot{ max-inline-size: 300px; justify-self: center; }

/* ═══ §6  扉 ═════════════════════════════════════════════════════════════ */
.lpst .st-gate{ margin-block: clamp(60px, 8vw, 100px) clamp(40px, 6vw, 80px); padding: clamp(26px, 4vw, 44px);
  background: var(--surface); border-radius: 18px; box-shadow: 0 0 0 1px var(--rule-2), 0 4px 18px rgba(0,0,0,.06); }
.lpst .st-tag{ display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 12px; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.lpst .st-gate .st-h2{ margin-block-start: 16px; }
.lpst .st-gate p{ margin: 10px 0 0; color: var(--fg-2); }
.lpst .st-gate .st-cta{ margin-block-start: 22px; }
.lpst .st-mail{ font-size: 13.5px; color: var(--fg-3); }

/* ═══ §7  動き（Ryo さん「CSSアニメーションを大胆にほしい」）══════════════
   ★★ 家の決まり：**止まった姿が «出来上がり»**。隠す・ずらす姿は
     html.js … :not(.is-in) ／ .is-play の中にしか無い。JS が動かなければ全部見える。
   ★ «走ったまま進まない» 枠のために、入ってから 3 秒で終わりのある動きを
     finish()（suttalog-lp.js）。署名は 4.2 秒で .is-play を外す。
   ★ 動きを減らす設定では全部止める（§8）。 */

/* ① ひと息の煙。名のりの奥で、残り火色の靄がゆっくり昇って消える */
.lpst .st-smoke{ position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lpst .st-smoke i{ position: absolute; inset-block-end: -20%; inline-size: 46vmin; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,85,36,.16), rgba(201,85,36,0) 62%); filter: blur(22px);
  opacity: 0; animation: st-kemuri 13s ease-in-out infinite; }
.lpst .st-smoke i:nth-child(1){ inset-inline-end: 8%;  animation-delay: 0s; }
.lpst .st-smoke i:nth-child(2){ inset-inline-end: 26%; animation-delay: -3.4s; background: radial-gradient(circle, rgba(16,16,16,.08), rgba(16,16,16,0) 62%); }
.lpst .st-smoke i:nth-child(3){ inset-inline-end: 2%;  animation-delay: -6.6s; inline-size: 34vmin; }
.lpst .st-smoke i:nth-child(4){ inset-inline-end: 40%; animation-delay: -9.8s; inline-size: 28vmin; background: radial-gradient(circle, rgba(16,16,16,.07), rgba(16,16,16,0) 62%); }
@keyframes st-kemuri{
  0%  { transform: translate3d(0,0,0) scale(.6); opacity: 0; }
  22% { opacity: 1; }
  70% { opacity: .7; }
  100%{ transform: translate3d(-6vmin,-95vh,0) scale(1.5); opacity: 0; }
}

/* ② ロゴを «書く»。筆記体を左から書き出し、最後に残り火の点が灯って息をする */
.lpst .st-wordmark .w{ display: inline-block; }
html.js .lpst .st-wordmark .w{ animation: st-kaku 1.5s cubic-bezier(.6,.05,.3,1) .15s backwards; }
@keyframes st-kaku{ from{ clip-path: inset(-10% 100% -20% 0); } to{ clip-path: inset(-10% -2% -20% 0); } }
.lpst .st-wordmark i{ display: inline-block; transform-origin: 50% 70%; }
html.js .lpst .st-wordmark i{ animation: st-tomoru .6s cubic-bezier(.3,1.6,.5,1) 1.55s backwards, st-iki 4.8s ease-in-out 2.4s infinite; }
@keyframes st-tomoru{ 0%{ transform: scale(0); opacity: 0; } 100%{ transform: none; opacity: 1; } }
@keyframes st-iki{ 0%,100%{ text-shadow: 0 0 0 rgba(201,85,36,0); } 45%{ text-shadow: 0 0 14px rgba(201,85,36,.75), 0 0 34px rgba(201,85,36,.35); } }

/* ③ 見出しの行が、下の溝からせり上がる */
.lpst .st-h1 .ln{ display: inline-block; overflow: clip; vertical-align: bottom; padding-block-end: .06em; }
.lpst .st-h1 .ln > span{ display: inline-block; }
html.js .lpst .st-h1 .ln > span{ animation: st-seri .9s cubic-bezier(.2,.8,.2,1) var(--d,0s) backwards; }
@keyframes st-seri{ from{ transform: translateY(105%); } to{ transform: none; } }

/* ④ «入ってくる»：下からふわっと。一番上の画面は傾いた位置から起き上がる */
html.js .lpst [data-rv]:not(.is-in){ opacity: 0; }
html.js .lpst [data-rv].is-in{ animation: st-fuwa .9s cubic-bezier(.2,.75,.2,1) var(--d,0s) backwards; }
@keyframes st-fuwa{ from{ opacity: 0; transform: translateY(34px); } to{ opacity: 1; transform: none; } }
html.js .lpst .st-hero__phone.is-in{ animation: st-tatsu 1.2s cubic-bezier(.2,.9,.25,1.12) var(--d,0s) backwards; }
@keyframes st-tatsu{ from{ opacity: 0; transform: translate3d(60px,90px,0) rotate(8deg) scale(.92); } to{ opacity: 1; transform: none; } }

/* ⑤ 節：印の点が火花のように灯り、見出しが横から、画面は傾いて立ち上がる */
html.js .lpst .st-act.is-in{ animation: none; }
html.js .lpst .st-act.is-in .mark{ animation: st-hibana .7s cubic-bezier(.3,1.7,.5,1) .05s backwards; }
@keyframes st-hibana{ 0%{ transform: translateY(-3px) scale(0); box-shadow: 0 0 0 0 rgba(201,85,36,.6); }
  60%{ box-shadow: 0 0 0 14px rgba(201,85,36,0); } 100%{ transform: translateY(-3px) scale(1); } }
html.js .lpst .st-act.is-in .st-sec-head .st-h2{ animation: st-yoko .8s cubic-bezier(.2,.8,.2,1) .12s backwards; }
@keyframes st-yoko{ from{ opacity: 0; transform: translateX(-40px); letter-spacing: .3em; } to{ opacity: 1; transform: none; } }
html.js .lpst .st-act.is-in .st-feat p{ animation: st-fuwa .9s cubic-bezier(.2,.75,.2,1) .28s backwards; }
html.js .lpst .st-act.is-in .st-shot{ animation: st-katamuku 1.1s cubic-bezier(.2,.85,.25,1.08) .35s backwards; }
@keyframes st-katamuku{ from{ opacity: 0; transform: perspective(900px) rotateY(-28deg) rotateZ(4deg) translate3d(60px,50px,0); } to{ opacity: 1; transform: none; } }

/* ⑥ 声 → 波形。画面に入っているあいだ、声の波が揺れつづける（飾り） */
.lpst .st-wave{ display: flex; align-items: center; gap: 3px; block-size: 46px; margin: 0 0 18px; }
.lpst .st-wave i{ flex: 0 0 4px; block-size: 100%; border-radius: 2px; background: var(--ember); opacity: .85; transform: scaleY(.4); }
.lpst .st-wave i:nth-child(3n){ transform: scaleY(.7); }
.lpst .st-wave i:nth-child(4n+1){ transform: scaleY(.25); }
html.js .lpst .st-act.is-in .st-wave i{ animation: st-koe 1.1s ease-in-out calc(var(--i) * -.13s) infinite alternate; }
@keyframes st-koe{ 0%{ transform: scaleY(.14); } 50%{ transform: scaleY(.92); } 100%{ transform: scaleY(.36); } }

/* ⑦ 署名：灰色の写真の上に «色を選ぶ» 輪が現れて押され、そこから赤が円で戻る。
   ★ 素の姿は «色が戻った後»（上の層は全部見えている）。 */
.lpst .st-photo .gray{ filter: grayscale(1) contrast(1.05); }
.lpst .st-photo .col{ clip-path: circle(150% at 58% 50%); }
.lpst .st-photo .picker{ position: absolute; inset-inline-start: 58%; inset-block-start: 50%; inline-size: 54px; aspect-ratio: 1;
  margin: -27px 0 0 -27px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(201,85,36,.9), 0 6px 18px rgba(0,0,0,.35); opacity: 0; }
.lpst .is-play .st-photo .col{ animation: st-modoru 2.2s cubic-bezier(.65,0,.2,1) 1.25s backwards; }
@keyframes st-modoru{ from{ clip-path: circle(0% at 58% 50%); } to{ clip-path: circle(150% at 58% 50%); } }
.lpst .is-play .st-photo .picker{ animation: st-erabu 2.6s cubic-bezier(.3,1.4,.4,1) .2s both; }
@keyframes st-erabu{
  0%  { opacity: 0; transform: scale(2.2); }
  25% { opacity: 1; transform: scale(1); }
  38% { transform: scale(.82); }
  48% { transform: scale(1); opacity: 1; }
  100%{ opacity: 0; transform: scale(3.4); }
}

/* ⑧ 扉：バッジに残り火のふち */
.lpst .st-gate .badge-link{ transition: box-shadow .3s, transform .3s; }
.lpst .st-gate .badge-link:hover{ transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(201,85,36,.35), 0 10px 26px rgba(201,85,36,.25); }

/* ═══ §8  門番 ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html.js .lpst [data-rv]:not(.is-in){ opacity: 1; }
  .lpst .st-smoke{ display: none; }
  html.js .lpst *, html.js .lpst *::before, html.js .lpst *::after{ animation: none !important; }
  .lpst .st-photo .col{ clip-path: circle(150% at 58% 50%) !important; }
}
@media print{
  .lpst .st-smoke, .lpst .st-replay, .lpst .st-photo .picker{ display: none !important; }
  html.js .lpst [data-rv]{ opacity: 1 !important; animation: none !important; }
}