/* ═══════════════════════════════════════════════════════
mobile-study-p0.css — D案確定（2026-07-30 社長「この方針ですべて進めて」）
フルブリード開幕 → 実機iPhone全身が1画面に収まって続く
common層の後・p1/p2の代わりに読み込む（p1/p2は温存・生成器不可侵）
正: mobile_study_20260729/D-1ヒーロー動作版.html ＋ SP最適解提案(D行)
═══════════════════════════════════════════════════════ */
@media (max-width: 560px) and (orientation: portrait) {
/* ① ヒーロー＝フルブリード（写真帯300-640pxを画面全体へ拡張） */
.hero-photo-stage,
.hero-shutter-flash {
top: 0;
bottom: 0;
height: auto;
}
.hero-photo-stage::after {
background:
linear-gradient(180deg, rgba(250, 248, 244, .95), rgba(250, 248, 244, .86) 200px, rgba(250, 248, 244, .18) 380px, transparent 55%),
linear-gradient(180deg, transparent 78%, rgba(60, 45, 25, .16));
}
.hero-photo { object-position: 60% 30%; }
/* カメラ枠＝顔中心（D-1確定: 168,285,170×190） */
.focus-corners {
top: 285px;
left: 168px;
width: 170px;
height: 190px;
}
/* ② 実機＝全身を1画面に（幅284px・見切れなし・下はCTAレールまで14px+）
※scaleは top-mobile-study.js measureSharedPhone が hero-phone-slot幅÷393 で算出するため、
.shared-phone 側でなく slot の幅を正とする。284×(852/393)=616 が実機の全高。 */
:root {
/* ヒーローの実機：コピーとCTAに被らない上限（452px控除で実測済み・2026-07-30） */
--p0-hero-phone: clamp(172px, min(56vw, (100dvh - 452px) * 393 / 852), 300px);
/* ジャーニー内の実機：ヘッダ/コピー帯118/CTAレール控除346pxに10px余裕を見て360で控除。
（2026-07-30実測修正：前の452控除はヒーロー用の値を流用していたため小さすぎた） */
--p0-journey-phone: clamp(196px, min(64vw, (100dvh - 360px) * 393 / 852), 262px);
}
/* 実機の中で見せるのでスクロールバーは出さない（実機Safariも同じ） */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* ヒーローの実機＝コピー帯の下・CTAレールの上に収める。
元は relative + top （流れの位置＋250）でコピーの高さ分だけ下がってしまうので、
P0では絶対位置にしてヒーロー上端基準で固定する（2026-07-30 実測修正） */
/* ヒーローの実機：元の relative レイアウトを崩さない（absoluteにすると top.js の
実機受け渡し座標が壊れてストーリーが進まなくなる・2026-07-30 実測）。
コピーの下に自然に置き、幅で全高をコントロールする。 */
.hero-inner .hero-phone-slot {
position: relative;
top: 0;
margin-top: 6px;
/* ★2026-07-30 実機是正: 実機はセルの中で上下中央だった。
画面が短い実機ではコピーとの間に無駄な空きができ、そのぶん実機が小さくなる
（社長「中のスマホの縦の長さが短い」）。下端基準にすると、空きは上にまとめて
出るのでなく実機の高さに回る。下の padding-bottom と組で、
393×852 では CD確定版と同じ位置（実機の下端741）に来る。 */
align-self: end;
}
.hero-inner {
/* CTAレールの上端(=100dvh - 98px - 安全域)より13px上でセルを終える。
113px は、393×852 で実機の上端がCD確定版と同じ329に来る実測値
（下端そろえなので、ここを2px動かすと実機が2px動く）。 */
/* レールから作る。113px = レール52 + CTAの高さ46 + 空き15。
レールが実機で下がれば、その分そのまま実機の高さに回る。 */
padding-bottom: calc(var(--sp-rail-bottom) + 61px);
}
/* D案: 説明文はFAQ/あしあととはに集約。ただしヒーローの1行は残す
（2026-07-30 社長FB「できるようになったことを そのときの写真と一緒に残せます→ヒーローに追加」） */
.hero-mobile-lead { row-gap: 3px; }
.hero-mobile-lead .lead-tail { display: block; margin: 0; font-size: 12px; line-height: 1.5; color: var(--sub); }
/* ── 表示可能領域（セーフエリア）を守る：上＝Dynamic Islandの下 ／ 下＝ホームインジケータ34px
確定値：ヘッダー top54 × h44 ／ CTA bottom52 ／ ドット bottom72（D-1ヒーロー動作版）
★2026-07-30 実機是正（社長スクショ iPhone 15 Pro）
`calc(54px + env(safe-area-inset-top))` は**二重取り**だった。
DevToolsエミュレーションでは env()=0 なので 54px になり気づけないが、
実機Safariは viewport-fit=cover で env(safe-area-inset-top)≈59px を返すため
ヘッダーが 113px まで落ちる（実測）。54px は「安全域の代わりに置いた仮の値」なので、
安全域があるならそちらを使う＝ max() が正しい。
以降の縦位置も同じ理由で二重取りしていたので、差分（--sp-top-delta）だけ足す。 ── */
:root {
/* ★2026-07-30 実機再是正（社長スクショ第2弾）
max(54px, env(...)) にしたが、実機Safariの env(safe-area-inset-top) は
ステータスバーの実高さ(59px)より大きい値を返すことがあり
（社長の実機では約92px相当＝ヘッダーが95px付近に落ちていた）、
上に大きな空きができる。縦向き固定なのでiPhoneの安全域は44〜62pxに収まる。
→ 下限54px（エミュ確定値）・上限62pxで挟む。
安全域は守りつつ、余計な空きは作らない。 */
--sp-top: clamp(54px, env(safe-area-inset-top), 62px);
--sp-top-delta: calc(var(--sp-top) - 54px);
/* 下のレール＝CD確定値（CTA bottom52 / ドット bottom72）。
2026-07-30 社長「claude designのまんまにして」で、いったん下げた分を戻した。
安全域は env で足す（実機のホームインジケータを避ける）。 */
--sp-rail-bottom: calc(52px + env(safe-area-inset-bottom));
}
.site-header,
.site-header.is-scrolled {
top: var(--sp-top);
padding-top: 0;
height: 44px;
min-height: 0;
background: none;
background-color: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.site-header .header-inner {
height: 44px;
min-height: 0;
padding-top: 0;
padding-bottom: 0;
}
/* デッキ側の `padding-top: calc(78px + env(safe-area-inset-top))` も二重取りになるので
差分だけ足す形へ置き換える（メニューを開いたときの上余白も同様） */
.hero-inner {
padding-top: calc(78px + var(--sp-top-delta));
}
.header-nav {
padding-top: calc(96px + var(--sp-top-delta));
}
/* ヒーローのコピーはヘッダー下端(98)より下から＝確定値 top112 */
.hero-copy .eyebrow { margin-top: 34px; }
/* 2026-07-31 社長「この子の できた を／成長の あしあと に で2行」
行の中で折り返させない＝狭い実機でも3行以上にならない */
.hero-copy h1 > span { white-space: nowrap; }
/* レールはCD確定値の位置（CTA bottom52 / ドット bottom72）。
env(safe-area-inset-bottom) を足して実機のホームインジケータを避ける。 */
.mobile-story-cta {
/* 2026-07-31 実機(/_vh.html)で確定: `bottom` はツールバーの展開/縮小どちらでも
「見えている下端」を基準にする。一度 dvh 基準へ替えたが、bottom で正しいと
裏が取れたのでCD納品版の書き方へ戻した。 */
bottom: var(--sp-rail-bottom);
top: auto;
}
/* 2026-07-31 社長指示「左下のステータスバー消す／右上のメニューも消す」
＝画面に残すのは ブランド と 「ベータ版を試す」 だけ。
ドットは表示のみの部品なので消して問題ない。メニューは開閉の入口なので、
開いている時だけ閉じられるよう .is-mobile-menu-open では出す（袋小路を作らない）。
下層ページへの導線はフッターにある。PC版は対象外（≤560pxの中だけ）。 */
.mobile-story-progress { display: none !important; }
/* ══ 背景の設計（2026-08-01 確定）══════════════════════════════
前提: iOS Safari のバーは **1色**（body の背景から取る）。ページ側の端の色が
それと違うと、そこが境目に見える。全面ベタ1色にすれば境目は消えるが、
紙の質感と奥行きまで失う（社長「色1つに統一させるの微妙？」）。
決めたルール ＝ **奥行きは持つ。ただし端には置かない。**
① 画面に貼りつく区間（.hero / .journey-sticky ＝ ちょうど100dvh）
上端・下端が常に画面の端と一致するので、
**地の色で始まり、地の色で終わる**グラデなら端は必ず地の色になる。
→ 暖かみは真ん中に置く（実機モックの後ろが光る形）。
② 流れて動く区間（.faq / .sp-closing / .site-footer）
どこが画面の端に来るか決まらないので、**地はベタ**。
奥行きはカードの影で作る（地では作らない）。
これで Safari の挙動に依存せず、境目が原理的に出ない。 */
/* ① ヒーロー: 地はほぼ平ら。
ここは**貼りつかず流れて動く**ので、グラデのどの高さも必ず画面の端を通過する
（実測: y=629 で 68%地点の #F7F0E8 が画面の上端に出てズレ6）。
＝ヒーローの地に持てる暖かみの上限は「バーとの差3」まで。
元: linear-gradient(180deg,#FAF8F4 0%,#FFFCF8 54%,#F8F1E9 100%)
→ 下端 (248,241,233)＝ズレ11 が画面の端に出ていた＝境目の正体 */
.hero {
background:
radial-gradient(circle at 84% 12%, rgba(240, 160, 121, .09), transparent 28%),
linear-gradient(180deg,
var(--site-bg, #FAF8F4) 0%,
#FDFBF7 30%,
rgb(250, 246, 241) 62%,
var(--site-bg, #FAF8F4) 100%) !important;
}
/* 物語の地の層は、**画面の上下14pxに触れない**ようにする。
注意: この層は sticky と一緒に動く（実測 入場 top=106 / 退場 top=-414）ので、
要素の端にマスクを掛けても画面の端とは一致しない。
finale-cheki.js が渡す --stick-top（ズレ量）でマスクを画面基準へ置き直す。
mask-size を画面の高さにして no-repeat にすると、画面の外にはみ出た部分は
自動的に隠れる（＝覆う帯を置かなくても端が地の色のままになる）。 */
.journey-backdrops {
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
-webkit-mask-size: 100% 100dvh;
mask-size: 100% 100dvh;
-webkit-mask-position: 0 calc(var(--stick-top, 0px) * -1);
mask-position: 0 calc(var(--stick-top, 0px) * -1);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* グラデが地の色で始まり地の色で終わるので、端を戻す処理はもう要らない */
.hero::after { display: none !important; }
/* ② 流れて動く区間: 地はベタ。
紙の粒子は残すが、粒子が乗ると実測で各成分 -2 されるので、
その分だけ下地を上げて **乗せた結果が (250,248,244)** になるようにする。
.site-footer だけ --card (254,252,251) と別の色だったので地の色へ寄せる。 */
.faq,
.site-footer {
background-color: rgb(252, 250, 246) !important;
}
/* ── ページの下端を平らにする（2026-07-31 社長「黄色のところも色が白なのは嫌だ」）──
実測: ページの最下行の色は区間で (240,229,220)〜(254,253,252) と幅がある
（カードの影とヒーローのグローが端まで乗るため）。
ツールバーの帯は1色なので、暖かい区間で必ず差が出る（社長の指摘は差9）。
帯を1色にしても合わないので、**ページ側の端を地の色へ戻す**。
置き方に注意: 前回は「画面に固定した帯」を上から被せてCTAのオレンジを消した。
今回は**セクションの内側・コンテンツの背面**に置く（z-index 0）。
実機(z1)・CTA(z31)・コピー(z40)より後ろなので、何も覆わない。
セクションと一緒に動くので位置もズレない。 */
.hero { position: relative; }
.hero::after,
.journey-sticky::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
/* ヒーロー: 暖かさは .hero 自身の背景なので z=0 で足りる（実測で効いている）。
高さは実機に届かない範囲で広めに取れる。 */
.hero::after {
z-index: 0;
height: 84px;
background: linear-gradient(to top, var(--site-bg, #FAF8F4) 34%, transparent);
}
/* 物語: 暖かさは .journey-layout(z=1) の中のカードの影。
z=0 だとその下にいて効かない（実測で効いていなかった）。
レイアウト(1)より上・CTA(31)より下の **z=10** に置く。
高さは実機（下端は画面下から約67px）に届かない56pxまで。 */
.journey-sticky::after {
z-index: 10;
height: 56px;
background: linear-gradient(to top, var(--site-bg, #FAF8F4) 45%, transparent);
}
/* ── セクションの高さを「実際に描ける高さ」へ（2026-07-31 根本是正）──
実機実測（?debug=edges）:
innerHeight 735 ／ 100svh 695 ／ 100dvh 735 ／ 100lvh 735
.journey-sticky 下端 695 ／ fixed bottom:0 735
→ **695〜735 の40pxがセクションの外**になり、そこに素の地色が出て横線に見えていた。
`svh` は「ツールバーが出ている時の高さ（最小）」。ツールバーが縮んで735になっても
セクションは695のままなので必ず差が空く。`dvh` は現在の可視高さに追従するので
常にぴったり埋まる＝**帯そのものが要らなくなる**。
土台(preview-top.html)は不可侵なので、ここで上書きする。 */
.hero {
height: 100dvh;
min-height: 100dvh;
}
.journey-sticky {
height: 100dvh;
}
/* ── 画面の端の色（2026-07-31 iOS26 Safariの仕様を調べて設計し直した）──
仕様（出典 benfrain.com / jahir.dev）:
・iOS26 Safari は を**無視**する
・バーの色は の背景色から決まる
・ただし**画面の端にある position:fixed 要素があれば、その background-color が優先**
（上から4px以内 or 下から3px以内／幅80%以上／高さ3px以上を走査）
・端の fixed 要素が複数あると競合する。隠すときは opacity:0 でなく display:none
前の実装は background-image のグラデだけで background-color が transparent だった＝
**Safariが読む色をこちらが壊していた**（社長「まだ下がおかしい」の真因）。
→ 端に置く要素は必ず solid な background-color を持たせ、
ふわっと消す勾配は ::before / ::after へ逃がす。 */
/* ★2026-08-01 この2つの帯は**廃止**した。
社長「帯で覆うのではなく、多分全体背景を一番下の階層に全体色を入れるべきなのでは？」
＝そのとおりだった。いちばん下の層＝`body` の背景色で、Safari はそこからバーの色を取る。
上の「背景の設計」でページ側の端も同じ色になったので、
覆う物はもう要らない（帯が残っていると計測も汚れる＝実際に汚れていた）。 */
.sp-edge-fade-top,
.sp-edge-tint {
display: none !important;
}
/* 物語のstickyは画面いっぱいで上下端に触れるため、Safariの走査対象になる。
background-color が透明だと読まれる色が不定になるので、地の色を明示しておく。
背後の .journey も同じ色なので見た目は変わらない。 */
.journey-sticky { background-color: var(--site-bg, #FAF8F4); }
/* ── スマホ版の締め（2026-07-31 社長「実機以外も最適な状態に」）──
終盤の点検で、FAQのあとに押せるものがフッターの小さなリンクだけだった。
主役はボタン1つ。コピーはその上に2行、注記はさらに小さく下に置く。
箱で囲まないのは、上のFAQカードと主役を取り合わないため。
ボタンは .mobile-story-cta と同値＝アプリのFAB言語をそのまま着る。
HTML側の style="display:none"（PC版に出さないための既定）に勝つため !important。 */
.sp-closing {
display: block !important;
padding: 54px 22px calc(var(--sp-rail-bottom) + 34px);
text-align: center;
}
.sp-closing-copy {
margin: 0;
color: var(--ink);
font-size: 17px;
font-weight: 800;
line-height: 1.78;
letter-spacing: .01em;
}
.sp-closing-cta {
display: inline-flex;
height: 52px;
min-width: 216px;
margin-top: 24px;
padding: 0 28px;
align-items: center;
justify-content: center;
border-radius: 26px;
/* 2026-08-04: 一度濃くしたが社長指示で元の色へ戻した（FABと同値を優先） */
background: linear-gradient(150deg, #F0A079 0%, #C2603A 100%);
color: #FEFDFB;
font-size: 15px;
font-weight: 800;
text-decoration: none;
box-shadow:
0 8px 22px rgba(194, 96, 58, .42),
inset 0 1px 0 rgba(255, 255, 255, .4);
}
/* フッターのリンクは文字の高さ19pxしかなく、指では押しづらい（実測）。
見た目は変えずに上下の当たり判定だけ広げる（44px以上）。
メニューを消した今、ここが下層ページへの唯一の入口なので確実に押せるようにする。 */
.site-footer .footer-links a {
display: inline-block;
padding: 13px 2px;
}
.site-footer .footer-links {
margin: -13px 0;
}
.sp-closing-note {
margin: 15px 0 0;
color: var(--sub);
font-size: 12px;
line-height: 1.7;
}
.site-header:not(.is-mobile-menu-open) .mobile-menu-toggle { display: none !important; }
.mobile-story-progress {
/* CTA(46px)の中心 = rail + 23px。ドットは約6pxなので中心を合わせて -3px
（いまは非表示だが、基準はCTAと揃えておく） */
bottom: calc(var(--sp-rail-bottom) + 20px);
top: auto;
}
/* ── 番号付きカテゴリ（01 できたカード）は common.css の既存実装（添う大きな数字フォント）をそのまま使う。
（以前ここで display:inline-flex + font-size:15px に上書きしており、
番号が15px×opacity.42に縮んで事実上消えていた。commonの38px淡色フォントに戻す。） */
.hero-phone-slot { width: var(--p0-hero-phone); min-width: 0; max-width: none; }
.journey-phone-slot {
width: var(--p0-journey-phone);
min-width: 0;
max-width: none;
height: auto;
min-height: 0;
aspect-ratio: 393 / 852;
margin: 0 auto;
}
/* 実機をビジュアルゾーン中央へ（少し下げて安定感を出す）2026-07-30実測修正 */
/* ヒーローと同じ理由で下端基準（実機の高さを稼ぐ）。
.journey-layout の padding-bottom 106px はそのままで、
393×852 では CD確定版と同じ実機下端754になる。 */
.journey-visual { display: flex; align-items: flex-end; justify-content: center; }
.journey-phone-slot { align-self: auto; margin-top: 12px; }
/* 確定版確認ビューアの実機ベゼルをページ内の実機にも。
ベゼル本体は base の .shared-phone-entrance が border で描いているので厚みだけ増す。
2026-08-08 社長指示により、HP内の実機には側面ボタンを付けない。 */
/* コピー帯を圧縮して実機の全高を確保（reading 118px＝チップ＋番号行＋見出し2行） */
.journey-layout {
padding-top: calc(112px + var(--sp-top-delta));
/* レールから作る。106px = レール52 + CTAの高さ46 + 空き8 */
padding-bottom: calc(var(--sp-rail-bottom) + 54px);
grid-template:
"reading" 132px
"visual" minmax(0, 1fr) / minmax(0, 1fr);
gap: 4px;
}
/* 2026-07-30 社長FB: SPは見出しを1行で流す（文言は一字も変えない）。
ただし「あしあととは」の見出しは2行のまま（PC版の改行を残す）。 */
.journey-copy h2 br { display: none; }
.journey-copy h2 {
white-space: nowrap;
text-wrap: nowrap;
}
.journey-copy[data-journey-copy="0"] h2 br { display: inline; }
.journey-copy[data-journey-copy="0"] h2 {
white-space: normal;
text-wrap: balance;
font-size: 21px;
}
.journey-reading { height: auto; min-height: 0; }
.journey-visual { min-height: 0; }
/* ③ コピー＝圧縮帯（チップ＋見出し1つ。説明文はFAQ/あしあととはに集約） */
.journey-copy > p:not(.journey-step):not(.journey-static-category) {
display: none !important;
}
.journey-copy h2 { font-size: 17px; line-height: 1.3; letter-spacing: -.035em; }
/* ③-b 2026-07-30 社長FB: HP内の実機の枠を確認ビューアの大きい枠と同じ厚みに。
base は inset:-8.9px / border:8.9px / radius:49.9px。厚みだけ 11px へ増やす。
内側の角丸は 52-11=41px。outline は base の 1.2px をそのまま使う（重ねると線が二重に見える）。 */
.shared-phone-entrance {
inset: -11px;
border: 11px solid #101012;
border-radius: 52px;
box-shadow: 0 4px 10px rgba(43, 31, 19, .2), 0 34px 72px -24px rgba(43, 31, 19, .46);
}
/* ベゼルが実体（border）なので、画面レイヤーは内容ボックスいっぱい＝inset:0 が正。
common.css の 8.9px の逃げはベゼルが薄かった時の暫定値なので P0 では打ち消す。 */
.shared-phone-entrance .journey-home-view,
.shared-phone-entrance .record-detail-view,
.shared-phone-entrance .journey-sodachi-view,
.shared-phone-entrance .sodachi-demo-view {
inset: 0;
border-radius: 41px;
}
/* JS が実機の位置を決める前（motion-ready 前）は出さない。
.journey-phone は position:fixed の初期位置が左上 0,0 なので、
一瞬だけホーム画面が「別画面」のように覗くのを防ぐ。
※ヒーロー中の表示制御は base の hero:not(.is-active) 側が持つので、
ここでスクロール量で隠してはいけない（実機が永久に出てこなくなる）。 */
html:not(.motion-ready) .journey-phone { opacity: 0; }
/* ── 2026-07-30 社長FB: 一瞬だけPC版の部品が覗く（トラスト3点行／前後ボタン／「01 06」の番号）。
JSで消しているとロード直後の1フレームに出るため、CSSで恒久的に落とす。
恒久ルール: トラスト3点行はSPで出さない ／ 進捗＝左下ドットのみ（番号・SCROLL表記は却下史） ── */
.hero-trust,
.mobile-story-arrows,
.mobile-story-progress-caption,
.mobile-story-progress-track { display: none !important; }
/* ── 2026-07-30 社長FB: 「あしあととは」のチップとヘッダーの位置をヒーローと統一。
ヒーロー実測＝ヘッダー top54 h44 ／ 貼り紙チップ top117（左31・高さ31）／ 見出し top163。
以降のセクションも同じ座標に載せる（ヘッダーは既に統一済みなのでコピー側を合わせる）。 ── */
.journey-layout { padding-top: calc(107px + var(--sp-top-delta)); }
/* 実体のチップは 。 側は font-size:0 の器なので地を付けない
（器に地を付けると二重チップになる。2026-07-30 実測）。
位置は base に多数のブレークポイント別マージンがあるので !important で揮う。 */
/* チップは見出しと完全に左揃え（ヒーローも含む全セクション・2026-07-30 社長FB） */
.eyebrow { padding-left: 0 !important; }
.ey-tag { margin-left: 0 !important; }
.journey-static-category {
width: max-content;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 10px !important;
padding: 0 !important;
}
.journey-static-category .cat-sheet {
display: inline-flex;
align-items: center;
min-height: 31px;
padding: 0 11px;
border: 0;
border-radius: 10px;
background: var(--card);
box-shadow: 0 1px 2px rgba(60, 45, 25, .06), 0 6px 16px rgba(60, 45, 25, .09);
transform: rotate(-.6deg);
color: var(--sub);
font-size: 9.5px;
font-weight: 800;
letter-spacing: .04em;
line-height: 1.25;
white-space: nowrap;
}
.journey-static-category + h2 { margin-top: 0; }
/* ── 番号行（主な機能 01〜03）＝PC版と同じ「淡い大きな数字に機能名を重ねる」。
2026-07-30 社長FB: 横に並べるのをやめ、重ねる（PC用と同じ語法）。
数字は見出しと同じ左端(x20)から、機能名は数字の上に少し送って載せる。 ── */
.journey-step { margin: 0 0 10px !important; }
.journey-step-detail {
position: relative;
min-height: 38px;
align-items: center;
margin-top: 0 !important;
}
.journey-step-number {
left: -3px;
/* 2026-08-04 社長「01 とかもっと濃くしていいよ」 → .16 → .26 */
color: rgba(194, 96, 58, .26);
font-size: 54px;
letter-spacing: -.07em;
line-height: .74;
}
.journey-step-detail strong {
position: relative;
z-index: 1;
margin-left: 22px;
padding-left: 0;
color: var(--ink);
font-family: var(--round);
font-size: 15.5px;
font-weight: 800;
letter-spacing: -.01em;
line-height: 1.2;
}
.journey-step-detail strong .kw {
color: var(--accent-deep);
font-style: normal;
font-weight: 800;
}
/* ④ ブランドロゴ拡大（33×38・原比率38:44維持・文字19px） */
.brand-mark { width: 33px; height: 38px; }
.brand-mark img { width: 265%; }
.brand-name { font-size: 19px; }
}
/* ═══════════════════════════════════════════════════════════
章番号と見出しの重なり（2026-08-04 社長
「せいちょうのきろくが03の3の真ん中と被っていて三と認識できないようになってる」）
実測(393px): 数字「03」 x17〜80（54px・rgba(194,96,58,.16)）
文字「成長の記録」 x42〜119（15.5px・黒）
＝ **横38px・縦19px 重なっている**。
文字が「3」の中央に乗るので、3の横棒と文字が混ざって「三」に見える。
→ 文字を数字の右へ逃がして重なりを無くし、数字はもう少し薄くして
「地の模様」として読ませる。PC版は触らない（数字が152pxで比率が違うため）。
═══════════════════════════════════════════════════════════ */
@media (max-width: 560px) and (orientation: portrait) {
.journey-step-detail strong {
margin-left: 68px;
/* 2026-08-04 社長「01 できたカードのこのもじをおおきくしてほしい」
章の見出し（できたカード／成長の記録 など）。SPは15.5pxで小さかった。
数字「01」の右へ逃がしたので、大きくしても重ならない。 */
font-size: 19px;
}
/* 2026-08-04 社長「01 これにするならスマホ版は薄くしなくてもいいかもね」→
さらに「01 とかもっと濃くしていいよ」。文字と重ならなくなったので濃くしてよい。
※上にも同じ指定があったが**後ろのこれが勝って .16 に戻っていた**（実測で気づいた）。
重複を残さず、濃さはここ1か所で決める。 */
.journey-step-number {
color: rgba(194, 96, 58, .26);
}
}
/* ═══════════════════════════════════════════════════════════
ヘッダーのロゴが本文に重なって読めない（2026-08-04 デザイン監査・高）
`sp-06-faq` / `sp-07-tail` で「FAQ」の見出しと「あしあと」のロゴが交差し判読不能。
原因: 2026-07-31 に**スマホのヘッダーを透明にした**（画面に残すのはブランドとCTAだけ）
ため、下に流れる本文の上に**地の無い文字**がそのまま乗る。
直し方の考え: 帯（バー）を戻すと「画面に残すのはブランドとCTAだけ」に反する。
→ **ロゴ自身にチップの地を持たせる**。サイト内で既に使っている
`.sheet-chip`（主な機能／ベータ版のはじめ方 等）と同じ語彙なので浮かない。
CTAは元から地を持っているので触らない。
═══════════════════════════════════════════════════════════ */
@media (max-width: 560px) and (orientation: portrait) {
/* SPのヘッダー（2026-08-06 社長確定）:
演出中=なし ／ ヒーロー(着地後)=バーあり ／ 物語中=消える ／ FAQ以降=バー */
.site-header,
.site-header.is-scrolled,
.site-header.is-past-story {
top: 0;
z-index: 60; /* 実機・物語のレイヤーより常に上 */
height: calc(var(--sp-top) + 44px);
padding-top: var(--sp-top);
background: rgba(250, 248, 244, .92);
box-shadow: 0 1px 0 rgba(60, 45, 25, .06);
-webkit-backdrop-filter: saturate(1.1) blur(12px);
backdrop-filter: saturate(1.1) blur(12px);
transition: opacity .35s ease;
}
/* 物語中（スクロールで進んでいる間・FAQ手前まで）は消える */
.site-header.is-scrolled:not(.is-past-story) {
opacity: 0;
pointer-events: none;
}
/* 演出中は出さない（バーの地ごと） */
html.is-intro .site-header {
opacity: 0;
pointer-events: none;
}
}
/* 本文のCTAが画面にある間は、固定の方を引く（2026-08-04 デザイン監査・中） */
@media (max-width: 560px) and (orientation: portrait) {
.mobile-story-cta.is-duplicated {
opacity: 0;
pointer-events: none;
transition: opacity .22s ease;
}
}