:root{
--ink:#55352f;--muted:#8d746e;--pink:#d77895;--pink2:#f5c6d3;--rose:#fff2f6;
--blue:#dff4fb;--blue2:#b8dfe9;--cream:#fffaf6;--line:#eed9df;--white:#fff;
--shadow:0 18px 50px rgba(106,69,83,.10);--soft-shadow:0 9px 28px rgba(106,69,83,.08)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#fff 0,#fffafc 48%,#fffdf9 100%);color:var(--ink);font-family:"Hiragino Sans","Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.hidden{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.site-header{height:86px;padding:12px clamp(20px,3vw,46px);display:flex;align-items:center;gap:24px;background:rgba(255,255,255,.94);border-bottom:1px solid #f2e5e9;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.site-brand{display:flex;align-items:center;text-decoration:none;gap:10px;min-width:max-content}
/* 2026-08-21修正: 旧アイコン(icon.svg、48x48の正方形)+テキストのブランドワードを、
   ユーザー指定の新ロゴ画像(logo-header.png、イラスト+ワードマークを1枚に収めたもの、
   縦横比約2.52:1)へ差し替え。高さはヘッダーの高さ(86px、上下padding12pxずつ)に
   収まる範囲でheight:56pxとし、widthはautoでアスペクト比を保つ。 */
.site-brand-logo{height:56px;width:auto}
.site-brand small{font-size:12px;line-height:1.55;color:#69534e;margin-left:4px}
.site-nav{display:flex;gap:30px;margin-left:auto}
.site-nav a{text-decoration:none;font-size:13px;font-weight:700;color:#6d5752}
.site-nav a:hover{color:var(--pink)}
.member-pill{padding:11px 18px;border:1px solid #edb7c7;border-radius:999px;color:#cc708a;font-size:13px;font-weight:800;white-space:nowrap;background:#fff8fa}
/* 2026-08-20 追加: 既存アカウントへ戻るための「ログイン」導線。Cookie切れ・別端末・別ブラウザ
   でも使えるよう常時表示するが、主要動線（無料体験・登録）より視覚的に控えめにするため、
   member-pillのような塗りピルにはせず、下線付きの淡いテキストリンク調にする。
   タップ領域はスマホの44px要件を満たすよう、見た目に反してpaddingで確保する。 */
.site-login-link{
appearance:none;
border:none;
background:none;
cursor:pointer;
color:#9a8078;
font-size:13px;
font-weight:700;
text-decoration:underline;
text-underline-offset:3px;
padding:11px 10px;
min-height:44px;
box-sizing:border-box;
border-radius:10px;
white-space:nowrap;
}
.site-login-link:hover{color:var(--pink)}

.fixed-hero{width:min(1700px,calc(100% - 48px));margin:18px auto 0}
.fixed-hero img{display:block;width:100%;height:auto;border-radius:28px;box-shadow:var(--soft-shadow)}

/* 2026-08-21追加: FVから通常入力エリアへの軽い橋渡し文。カード化・枠付けはせず、
   FV画像とははっきり間隔を空けたテキストのみの表示にとどめ、営業LP的な圧を出さない。 */
.hero-lead{width:min(760px,calc(100% - 36px));margin:26px auto 0;text-align:center}
.hero-lead h2{margin:0 0 10px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:.01em}
.hero-lead p{margin:0;font-size:15px;line-height:1.9;color:var(--muted)}

.try-wrap{width:min(1120px,calc(100% - 36px));margin:34px auto 46px}
.ask-card{display:grid;grid-template-columns:110px minmax(0,1fr) 210px;grid-template-rows:auto auto;align-items:center;gap:12px 20px;background:#fff;border:1px solid #edcfd8;border-radius:24px;padding:20px 24px 14px;box-shadow:var(--shadow)}
.child-speaker{grid-row:1 / 3;display:flex;flex-direction:column;align-items:center;justify-content:center}
.child-speaker img{width:90px;height:105px;object-fit:contain}
.child-speaker span{margin-top:-4px;padding:5px 12px;border-radius:999px;background:#fff0f4;color:#8d5b62;font-size:12px;font-weight:800}
.speech-input{position:relative;background:linear-gradient(180deg,#fbfeff,#f5fbff);border:1.5px solid #bfdbe7;border-radius:24px;padding:3px}
.speech-input:before{content:"";position:absolute;left:-16px;top:50%;width:28px;height:28px;background:#f8fdff;border-left:1.5px solid #bfdbe7;border-bottom:1.5px solid #bfdbe7;transform:translateY(-50%) rotate(45deg);z-index:0}
.speech-input input{position:relative;z-index:1;width:100%;border:0;outline:0;background:transparent;padding:17px 20px;font-size:18px;font-weight:700}
/* 2026-08-21: 例文プレースホルダーが実入力と同じ濃さ・太さで表示され、
   一見して「もう文字が入力されている」ように見えてしまっていた。
   実入力(color:inherit → var(--ink)、font-weight:700)よりも明確に
   薄く・細くして、プレースホルダーだと分かるようにする。 */
.speech-input input::placeholder{color:var(--muted);opacity:.72;font-weight:500}
.ask-submit{align-self:stretch;border:0;border-radius:999px;background:linear-gradient(180deg,#dc7d99,#cf708d);color:#fff;font-weight:900;font-size:17px;box-shadow:0 10px 22px rgba(209,112,140,.20)}
.ask-submit span{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:8px;border-radius:50%;background:#fff;color:#cb6f89}
.trust{grid-column:2 / 4;text-align:center;color:#8c716a;font-size:12px;padding-top:4px}
.trust i{font-style:normal;color:#d8b9c2;margin:0 6px}

/* 2026-08-21 追加: 「たいせつなおもいで」登録・変更への常時セカンダリ導線。
   主CTA(.ask-submit)の太字グラデーションピルに対し、下線テキスト調の
   淡い見た目にして視覚的な優先順位を明確に下げる。タップ領域は
   スマホ要件(44px以上)を満たすようpaddingで確保する。 */
.precious-photo-trigger-wrap{display:flex;justify-content:center;margin:10px 0 0}
.precious-photo-trigger{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:9px 22px;border:1px solid var(--line);background:transparent;color:#9c6473;font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;border-radius:999px;cursor:pointer}
.precious-photo-trigger:hover{color:var(--pink);background:#fff8fa}

.experience{width:min(980px,calc(100% - 36px));margin:0 auto 60px}
.phase{background:#fff;border:1px solid #ecd7dd;border-radius:30px;padding:34px;box-shadow:var(--shadow)}
.hug-phase{display:flex;align-items:center;justify-content:center;gap:26px;text-align:center;background:radial-gradient(circle at 12% 20%,#fff1f5 0,transparent 32%),#fff}
.wait-character img{width:170px}
.phase-copy .eyebrow,.answer-head .eyebrow,.pricing .eyebrow,.section-kicker{font-size:11px;font-weight:900;letter-spacing:.12em;color:#c97790}
.phase h2{font-size:30px;margin:5px 0 8px}
.phase p{line-height:1.8}
.countdown{font-size:62px;font-weight:900;color:#d37891;margin:6px 0}
.text-button,.source-button{border:0;background:none;text-decoration:underline;color:#9c6473;padding:5px}
.detail{max-width:560px;margin:10px auto 0;padding:14px 16px;border-radius:16px;background:#fff8fa;color:#765e58;font-size:13px;line-height:1.75}

.answer-phase{position:relative;overflow:visible;background:linear-gradient(180deg,#fff 0,#fffefd 100%)}
.answer-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.fuwarisu-head{width:118px;display:flex;flex-direction:column;align-items:center;flex:0 0 118px}
.fuwarisu-head img{width:96px;height:96px;object-fit:contain}
.fuwarisu-head span{font-size:12px;font-weight:900;color:#8d5b66;margin-top:-8px}
.answer-head h2{font-size:34px;margin:0;letter-spacing:.02em}

.reply-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 165px;align-items:end;gap:10px;margin:12px 0 18px}
#recommendedReply{position:relative;margin:0;padding:28px 34px;background:linear-gradient(180deg,#fff0f5,#ffedf3);border:1.5px solid #efb8c9;border-radius:32px;font-size:27px;line-height:1.55;font-weight:800;color:#573833}
#recommendedReply:after{content:"";position:absolute;right:-16px;top:50%;width:30px;height:30px;background:#ffeff4;border-right:1.5px solid #efb8c9;border-top:1.5px solid #efb8c9;transform:translateY(-50%) rotate(45deg)}
.answer-kokohagu{width:155px;justify-self:end}
.second-step{padding:16px 18px;background:#fffaf0;border:1px solid #eddfc8;border-radius:18px;margin-bottom:16px}
.second-step span{font-size:11px;font-weight:900;color:#9d8067}
.second-step p{margin:5px 0 0}

.why-box,.note-box{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center;gap:18px;border-radius:22px;padding:20px 22px;margin-top:16px}
.why-box{background:linear-gradient(180deg,#f6fcff,#eef8fc);border:1px solid #cce5ef}
.note-box{background:linear-gradient(180deg,#fffdfd,#fff9fb);border:1px solid #efd9df}
.why-box h3{margin:0 0 7px;font-size:18px}
.why-box p,.note-box p{margin:0;line-height:1.8}
.why-box img,.note-box img{width:105px;height:105px;object-fit:contain;justify-self:end}
.note-title{font-weight:900;margin-bottom:8px}
.application{margin-top:5px!important;color:#8b6b66}
.sources{display:grid;gap:6px;margin-top:10px;font-size:12px}
.sources a{color:#8b5c69}
.rule-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 0;font-size:12px;color:#816b65}
#ruleBadges{display:flex;gap:8px;flex-wrap:wrap}
.badge{padding:7px 11px;border-radius:999px;background:#f7eef1;color:#775f5a}
.usage-hint{text-align:center;font-size:12px;color:#9b817a;margin:22px 0 14px}
.reset{display:block;margin:0 auto;border:1px solid #dfa8b7;background:#fff;color:#b5657a;border-radius:999px;padding:12px 24px;font-weight:800}
.result-banner{margin:12px 0 16px;padding:16px 18px;border-radius:18px;display:grid;gap:4px;line-height:1.6}
.result-banner strong{font-size:16px}.result-banner span{font-size:13px}
.parent-support{margin:12px 0;padding:15px 17px;border-radius:16px;background:#fffaf1;border:1px solid #eadfcd}
.parent-support span{font-size:11px;font-weight:900}.parent-support p{margin:5px 0 0}
.special-action{display:block;width:max-content;max-width:100%;margin:18px 0 0;padding:13px 18px;border-radius:999px;background:#7c7f93;color:#fff;text-decoration:none;font-weight:800}

.answer-phase.mode-urgent{border-color:#e5b6b6}
.answer-phase.mode-urgent .result-banner{background:#fff1f1;border:1px solid #edc9c9}
.answer-phase.mode-urgent .answer-kokohagu{display:none}
.answer-phase.mode-urgent .reply-stage{grid-template-columns:1fr}
.answer-phase.mode-refer .answer-kokohagu,.answer-phase.mode-noevidence .answer-kokohagu{display:none}
.answer-phase.mode-refer .reply-stage,.answer-phase.mode-noevidence .reply-stage{grid-template-columns:1fr}
.answer-phase.mode-refer .result-banner{background:#f5f7fb;border:1px solid #dce2ee}
.answer-phase.mode-noevidence .result-banner{background:#f7f7f7;border:1px solid #e2e2e2}

.how{width:min(1120px,calc(100% - 36px));margin:70px auto 60px;text-align:center}
.how h2{font-size:31px;margin:7px 0 8px}
.section-lead{color:#90766f;margin:0 0 24px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.steps article{position:relative;min-height:245px;background:#fff;border:1px solid #efdbe1;border-radius:24px;padding:22px 150px 22px 22px;overflow:hidden;box-shadow:0 8px 26px rgba(106,69,83,.05)}
.steps article>b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f6d6df;color:#c66580}
.steps h3{margin:15px 0 8px;font-size:20px}
.steps p{margin:0;line-height:1.8;color:#7c6560;font-size:14px}
.steps img{position:absolute;right:12px;bottom:8px;width:132px;height:142px;object-fit:contain}

.soft-message{width:min(970px,calc(100% - 36px));margin:0 auto 60px;background:linear-gradient(135deg,#fff9fb,#f7fcff);border:1px solid #eadbe1;border-radius:28px;display:grid;grid-template-columns:240px 1fr;align-items:center;padding:24px 34px;box-shadow:var(--soft-shadow)}
.soft-message img{width:210px;justify-self:center}
.soft-message span{font-size:11px;font-weight:900;color:#c6748c}
.soft-message h2{font-size:27px;margin:6px 0 9px}
.soft-message p{margin:0;line-height:1.8;color:#7f6963}

.pricing{position:relative;width:min(900px,calc(100% - 36px));margin:0 auto 68px;background:linear-gradient(135deg,#fff9fb,#f5fbfe);border:1px solid #edd9df;border-radius:28px;padding:28px 260px 28px 34px;min-height:190px;display:flex;align-items:center;box-shadow:var(--soft-shadow)}
.pricing h2{font-size:28px;margin:4px 0 8px}
.pricing p{margin:0;line-height:1.75;color:#806b65}
.price-card{position:absolute;right:105px;top:28px;width:150px;height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #eccfda;border-radius:22px;background:#fff}
.price-card span,.price-card small{font-size:11px}.price-card strong{font-size:36px;color:#c9748d}
.price-deco{position:absolute;right:-44px;bottom:-20px;width:150px}

.faq{width:min(900px,calc(100% - 36px));margin:0 auto 70px}
.faq>h2{font-size:29px;margin:6px 0 18px}
.faq details{background:#fff;border:1px solid #eddee3;border-radius:18px;padding:16px 20px;margin:10px 0}
.faq summary{font-weight:800;cursor:pointer}
.faq p{line-height:1.8;color:#7d6862;margin:12px 0 0}

.modal{position:fixed;inset:0;z-index:50;background:rgba(74,54,62,.28);display:grid;place-items:center;padding:20px}
.modal-card{position:relative;width:min(470px,100%);background:#fff;border-radius:28px;padding:28px;text-align:center;box-shadow:0 30px 90px rgba(71,49,58,.24)}
.modal-x{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:24px}
.modal-mascot{width:110px;height:110px;object-fit:contain}
.modal-card h2{margin:5px 0 10px}
.modal-card p{line-height:1.7;color:#7b6660}
.modal-card form{display:flex;gap:8px;margin:18px 0}
.modal-card input{flex:1;border:1px solid #dec8cf;border-radius:13px;padding:12px}
.modal-card form button{border:0;border-radius:13px;background:#d47792;color:#fff;padding:0 16px;font-weight:800}
.modal-status{min-height:20px;color:#b14f67;font-size:12px}
/* 2026-08-21追加: IndexedDBが実用不可と判定された場合の専用案内(ログイン等への誘導はしない)。 */
.precious-photo-unavailable p{line-height:1.8;color:#7b6660}
.precious-photo-unavailable small{display:block;margin-top:6px;color:#9b817a}
.precious-photo-unavailable .precious-photo-choose-btn{margin-top:16px}
.pay-price{font-size:30px;font-weight:900;color:#c86f89}
body.modal-open{overflow:hidden}

/* 2026-08-21 追加: 本番スマホ実機で、「たいせつなおもいで」登録モーダルの
   下部（登録・変更・削除ボタン）が画面外へ見切れ、スクロールもできず
   操作不能になる不具合の修正。モーダルカードに上限高さを設け、
   カード内部だけをスクロール可能にする（背景は body.modal-open で
   ロック済みのまま）。100dvh未対応ブラウザ向けに90vhをフォールバックとして
   先に指定し、対応ブラウザでは90dvhで上書きする。 */
#preciousPhotoModal .modal-card{max-height:90vh;max-height:90dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}

footer{padding:28px 40px;border-top:1px solid #f0e5e8;display:flex;justify-content:center;gap:28px;color:#9a8078;font-size:12px}
footer span{font-weight:900;color:#cf748e}
footer a{color:#9a8078}

@media(max-width:980px){
.site-nav{display:none}
.steps{grid-template-columns:1fr}
.steps article{min-height:180px}
.pricing{padding-right:220px}
}
@media(max-width:700px){
/* ヘッダーに「うちでよかった返し方」ピルと「メール登録済み」ピルが同時に並ぶと、
   1行に収めようとして必要幅が画面幅を超え、右側のピルが切れてページ全体が
   横スクロール可能になっていた（登録済みユーザーの再訪時に常時再現）。
   固定1行を諦めて折り返しを許可し、はみ出さないようにする。 */
.site-header{height:auto;min-height:72px;padding:9px 14px;flex-wrap:wrap;row-gap:8px;gap:8px 10px}
.site-brand-logo{height:52px;width:auto}.site-brand small{display:none}
/* 2026-08-21追記(緊急修正): 40pxではロゴ画像内に描かれた「とげふわ」の文字部分
   (画像全体の高さのうち約40%しか占めていない)が視認できないほど小さくなり、
   表記が潰れて読めなくなっていた実機ベースの不具合を修正。PCの56pxに近い
   52pxまで高さを引き上げ、文字が判読できるサイズを確保する。
   .site-headerはheight:autoのflex-wrap構成のため、この程度の高さ増加は
   レイアウト崩れ(横スクロール・要素重なり)を起こさないことを実機検証済み。 */
.member-pill{font-size:11px;padding:8px 10px}
.site-login-link{font-size:12px;padding:11px 8px}
.fixed-hero{width:100%;margin:0}.fixed-hero img{border-radius:0}
.hero-lead{width:calc(100% - 32px);margin:20px auto 0}
.hero-lead h2{font-size:18px}
.hero-lead p{font-size:13.5px;line-height:1.85}
.try-wrap{width:calc(100% - 24px);margin:24px auto 34px}
.ask-card{grid-template-columns:78px 1fr;grid-template-rows:auto auto auto;padding:15px;gap:10px 12px}
.child-speaker{grid-row:1 / 2}.child-speaker img{width:65px;height:76px}
/* 2026-08-21: この宣言は後続の別@media(max-width:700px)ブロック(!important付き)
   に実際には常に上書きされており、レンダリングに影響しない死んだ宣言。紛らわしいため
   font-sizeはここでは指定しないことにする(paddingのみ残す)。実際に有効な
   font-size:16px!importantは本ファイル後方の.speech-input inputブロックを参照。 */
.speech-input input{padding:14px 14px}
.ask-submit{grid-column:1 / 3;min-height:50px}
.trust{grid-column:1 / 3;font-size:10px;line-height:1.7}.trust i{display:none}
.experience{width:calc(100% - 24px)}
.phase{padding:22px 16px}
.hug-phase{display:block}.wait-character img{width:120px}.phase h2{font-size:25px}
/* 2026-08-20: 「なぜ6秒？」「たいせつなおもいでを選ぶ」が下線付きテキストのみ（高さ31px実測）で、
   ストレス下の保護者には狙いづらいタップ領域だった。既存のcontinuous-toge-triggerと同系統の
   淡い背景ピルに変え、44px以上の高さを確保する。横並びのままだと窮屈になるため縦積みにする。 */
.text-button{
display:block;
width:100%;
box-sizing:border-box;
min-height:44px;
padding:11px 16px;
margin:6px 0 0;
border:1px solid var(--line);
background:var(--rose);
color:var(--ink);
border-radius:999px;
text-decoration:none;
font-size:13px;
font-weight:700;
}
.answer-head{align-items:center}.fuwarisu-head{width:88px;flex-basis:88px}.fuwarisu-head img{width:75px;height:75px}
.answer-head h2{font-size:25px}
.reply-stage{grid-template-columns:1fr 88px}
#recommendedReply{font-size:20px;padding:22px 22px;border-radius:24px}
.answer-kokohagu{width:88px}
.why-box,.note-box{grid-template-columns:1fr 72px;padding:16px}.why-box img,.note-box img{width:68px;height:68px}
.how{margin-top:48px}.how h2{font-size:26px}
.steps article{padding:20px 115px 20px 20px}.steps img{width:105px;height:118px}
.soft-message{grid-template-columns:105px 1fr;padding:18px}.soft-message img{width:100px}.soft-message h2{font-size:22px}
.pricing{display:block;padding:24px;min-height:0}.price-card{position:static;width:150px;height:120px;margin-top:18px}.price-deco{right:2px;width:120px}
.modal-card form{display:grid}.modal-card form button{min-height:46px}
}

/* ===== V8.1 character polish: no clipping + varied cuts ===== */

.steps article{
overflow:visible;
padding-right:138px;
}
.steps img{
right:14px;
bottom:12px;
width:112px;
height:124px;
object-fit:contain;
object-position:center;
max-width:32%;
}

.soft-message{
overflow:visible;
grid-template-columns:210px minmax(0,1fr);
column-gap:22px;
}
.soft-message>img{
width:185px;
max-height:175px;
object-fit:contain;
object-position:center;
}

.pricing{
overflow:hidden;
padding-right:285px;
}
.price-card{
right:128px;
}
.price-deco{
right:18px;
bottom:8px;
width:105px;
height:105px;
object-fit:contain;
}

.fuwarisu-head{
overflow:visible;
}
.fuwarisu-head img{
width:92px;
height:92px;
object-fit:contain;
}
.reply-stage{
overflow:visible;
}
.answer-kokohagu{
width:140px;
max-height:170px;
object-fit:contain;
align-self:center;
}
.why-box,.note-box{
overflow:visible;
}
.why-box img,.note-box img{
width:112px;
height:112px;
max-width:100%;
object-fit:contain;
object-position:center;
}
.note-box img{
width:120px;
height:105px;
}

.child-speaker{
overflow:visible;
}
/* 2026-08-21修正: このブロックには元々 .child-speaker img{width:82px;height:96px} という
   重複定義があった。実際の表示サイズは、793行目以降の「V8.7 APPROVED CUTOUTS」ブロック
   (.child-speaker img{width:96px!important;height:112px!important}、
   スマホは874行目以降で72px/84px!important)が!importantにより常に最優先で適用されるため、
   この82px/96pxの重複定義は元々一度も実際の表示に反映されていなかった、影響皆無の
   デッドコードだった(!importantは記述順によらず常に優先されるため)。
   58行目付近のwidth:90px;height:105pxも同様に、V8.7ブロックにより常に上書きされている。
   今回のFV説明追加・認証・IndexedDB対応とは無関係の、既存の重複・デッドコードであり、
   実際の表示への影響は無いことを確認した上で、可読性のためにこの重複したwidth/height指定
   のみを削除した(表示サイズはこの削除の前後で一切変化しない)。
   overflow:visibleはコンテナ側の設定として残す(画像サイズには影響しない)。
   なお、通常入力エリア左側のとげハリの実際の表示サイズは、この修正の前後を通じて一貫して
   「V8.7 APPROVED CUTOUTS」ブロックの値(PC:96×112px / スマホ:72×84px)のとおりであり、
   これは過去に承認済みの仕様として明示的にラベル付けされている値そのものである。 */

@media (min-width:701px){
.steps article:nth-child(1) img{width:104px;height:116px}
.steps article:nth-child(2) img{width:124px;height:112px}
.steps article:nth-child(3) img{width:98px;height:116px}
}

@media(max-width:700px){
.steps article{
overflow:visible;
padding-right:105px;
}
.steps img{
width:88px!important;
height:100px!important;
right:10px;
bottom:10px;
}
.soft-message{
grid-template-columns:95px minmax(0,1fr);
column-gap:12px;
}
.soft-message>img{
width:90px;
max-height:105px;
}
.pricing{
overflow:hidden;
padding-right:24px;
padding-bottom:112px;
}
.price-deco{
right:12px;
bottom:5px;
width:94px;
height:94px;
}
.why-box img,.note-box img{
width:66px;
height:66px;
}
.answer-kokohagu{
width:84px;
max-height:105px;
}
}

/* ===== V8.4 polish ===== */

.steps{
gap:20px;
}
.steps article{
min-height:286px;
padding:26px 150px 28px 26px;
overflow:visible;
}
.steps article>img{
position:absolute;
right:24px;
bottom:24px;
width:108px;
height:132px;
max-width:30%;
object-fit:contain;
object-position:center;
}
.steps article:nth-child(2)>img{
width:126px;
height:118px;
}
.steps article:nth-child(3)>img{
width:98px;
height:122px;
}

.soft-message{
grid-template-columns:220px minmax(0,1fr);
column-gap:30px;
padding:30px 38px;
overflow:visible;
}
.soft-message>img{
width:180px;
height:180px;
object-fit:contain;
object-position:center;
}

.pricing{
overflow:hidden;
padding-right:300px;
}
.price-deco{
right:24px;
bottom:14px;
width:112px;
height:112px;
object-fit:contain;
}

.fuwarisu-head{
width:124px;
flex:0 0 124px;
padding:6px;
}
.fuwarisu-head img{
width:100px;
height:100px;
object-fit:contain;
}
.reply-stage{
grid-template-columns:minmax(0,1fr) 180px;
gap:18px;
}
.answer-kokohagu{
width:154px;
height:180px;
object-fit:contain;
justify-self:center;
}
.why-box,.note-box{
grid-template-columns:minmax(0,1fr) 132px;
padding-right:26px;
}
.why-box img,.note-box img{
width:116px;
height:116px;
object-fit:contain;
object-position:center;
}

.speech-input{
background:#f8fdff;
border:1.5px solid #bfdbe7;
border-radius:24px;
padding:3px;
position:relative;
}
.speech-input:before{
content:"";
position:absolute;
left:-15px;
top:22px;
width:0;
height:0;
background:transparent;
border-top:11px solid transparent;
border-bottom:11px solid transparent;
border-right:15px solid #bfdbe7;
transform:none;
z-index:0;
}
.speech-input:after{
content:"";
position:absolute;
left:-12px;
top:23px;
width:0;
height:0;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-right:13px solid #f8fdff;
z-index:1;
}
.speech-input input{
position:relative;
z-index:2;
background:transparent;
}

@media(max-width:700px){
.ask-card{
grid-template-columns:74px minmax(0,1fr);
align-items:center;
}
.child-speaker{
align-self:center;
justify-self:center;
}
.speech-input:before{
top:16px;
left:-13px;
border-top-width:10px;
border-bottom-width:10px;
border-right-width:13px;
}
.speech-input:after{
top:17px;
left:-10px;
border-top-width:9px;
border-bottom-width:9px;
border-right-width:11px;
}

.steps article{
min-height:220px;
padding:22px 112px 24px 22px;
}
.steps article>img{
right:16px;
bottom:18px;
width:84px!important;
height:100px!important;
}
.soft-message{
grid-template-columns:104px minmax(0,1fr);
gap:16px;
padding:22px 18px;
}
.soft-message>img{
width:98px;
height:112px;
}
.pricing{
padding-right:24px;
padding-bottom:124px;
}
.price-deco{
width:100px;
height:100px;
right:14px;
bottom:10px;
}
.fuwarisu-head{
width:92px;
flex-basis:92px;
}
.fuwarisu-head img{
width:78px;
height:78px;
}
.reply-stage{
grid-template-columns:minmax(0,1fr) 94px;
gap:8px;
}
.answer-kokohagu{
width:88px;
height:110px;
}
.why-box,.note-box{
grid-template-columns:minmax(0,1fr) 74px;
}
.why-box img,.note-box img{
width:68px;
height:68px;
}
}

/* ===== V8.5: character safe-zones + single-path speech bubbles ===== */

.steps{
gap:22px!important;
}
.steps article{
min-height:310px!important;
padding:30px 174px 32px 30px!important;
overflow:hidden!important;
}
.steps article>img{
position:absolute!important;
right:34px!important;
bottom:34px!important;
width:76px!important;
height:92px!important;
max-width:none!important;
object-fit:contain!important;
object-position:center!important;
}
.steps article:nth-child(2)>img{
width:98px!important;
height:82px!important;
}
.steps article:nth-child(3)>img{
width:72px!important;
height:88px!important;
}

.soft-message{
overflow:hidden!important;
grid-template-columns:180px minmax(0,1fr)!important;
gap:30px!important;
padding:36px 46px!important;
}
.soft-message>img{
width:140px!important;
height:140px!important;
object-fit:contain!important;
justify-self:center!important;
}

.price-deco{
right:34px!important;
bottom:26px!important;
width:82px!important;
height:82px!important;
}

.fuwarisu-head{
padding:14px!important;
}
.fuwarisu-head img{
width:76px!important;
height:76px!important;
object-fit:contain!important;
}
.answer-kokohagu{
width:116px!important;
height:142px!important;
object-fit:contain!important;
}
.why-box img,.note-box img{
width:82px!important;
height:82px!important;
object-fit:contain!important;
}

.speech-input{
position:relative!important;
min-height:64px!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
padding:0!important;
}
.speech-input:before,.speech-input:after{
content:none!important;
display:none!important;
}
.speech-shape{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
overflow:visible!important;
pointer-events:none!important;
}
.speech-shape-child path{
fill:#f8fdff;
stroke:#bfdbe7;
stroke-width:2;
vector-effect:non-scaling-stroke;
}
.speech-input input{
position:relative!important;
z-index:2!important;
width:100%!important;
min-height:64px!important;
padding:16px 22px 16px 34px!important;
border:0!important;
outline:0!important;
background:transparent!important;
}

.reply-stage{
grid-template-columns:minmax(0,1fr) 146px!important;
gap:18px!important;
align-items:center!important;
}
.reply-bubble{
position:relative!important;
min-height:152px!important;
display:flex!important;
align-items:center!important;
}
.speech-shape-reply path{
fill:#fff0f5;
stroke:#efb8c9;
stroke-width:2;
vector-effect:non-scaling-stroke;
}
#recommendedReply{
position:relative!important;
z-index:2!important;
width:100%!important;
margin:0!important;
padding:30px 54px 30px 36px!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
font-size:24px!important;
line-height:1.6!important;
}
#recommendedReply:after{
content:none!important;
display:none!important;
}

@media(max-width:700px){
.steps article{
min-height:238px!important;
padding:24px 112px 28px 22px!important;
}
.steps article>img{
right:20px!important;
bottom:22px!important;
width:58px!important;
height:70px!important;
}
.steps article:nth-child(2)>img{
width:72px!important;
height:62px!important;
}
.steps article:nth-child(3)>img{
width:56px!important;
height:68px!important;
}

.soft-message{
grid-template-columns:80px minmax(0,1fr)!important;
gap:14px!important;
padding:24px 18px!important;
}
.soft-message>img{
width:64px!important;
height:80px!important;
}

.speech-input{
min-height:58px!important;
}
.speech-input input{
min-height:58px!important;
padding:14px 14px 14px 28px!important;
/* 2026-08-21修正(緊急対応): 15pxだとiOS Safari等がinputフォーカス時に
   「16px未満のフォントサイズは自動ズームする」という既定挙動により、
   タップした瞬間にページ全体が拡大され、表示が右にずれたように見える
   不具合が発生していた。16px以上にすることでこの自動ズームを防ぐ
   (モバイルWebの既知の仕様。デザイン変更ではなく不具合修正)。 */
font-size:16px!important;
}

.reply-stage{
grid-template-columns:minmax(0,1fr) 72px!important;
gap:6px!important;
}
.reply-bubble{
min-height:132px!important;
}
#recommendedReply{
padding:24px 38px 24px 22px!important;
font-size:19px!important;
line-height:1.55!important;
}
.answer-kokohagu{
width:62px!important;
height:84px!important;
}

.fuwarisu-head img{
width:68px!important;
height:68px!important;
}
.why-box img,.note-box img{
width:62px!important;
height:62px!important;
}
}

/* ===== V8.7 APPROVED CUTOUTS ===== */
.child-speaker img{
width:96px!important;
height:112px!important;
object-fit:contain!important;
}

.steps article{
min-height:268px!important;
padding:24px 146px 24px 24px!important;
overflow:hidden!important;
}
.steps article>img{
position:absolute!important;
right:16px!important;
bottom:14px!important;
width:124px!important;
height:145px!important;
max-width:none!important;
object-fit:contain!important;
object-position:center!important;
}
.steps article:nth-child(2)>img{
width:148px!important;
height:122px!important;
}
.steps article:nth-child(3)>img{
width:118px!important;
height:140px!important;
}

.soft-message{
grid-template-columns:218px minmax(0,1fr)!important;
gap:22px!important;
padding:28px 34px!important;
overflow:hidden!important;
}
.soft-message>img{
width:188px!important;
height:184px!important;
object-fit:contain!important;
}

.price-deco{
right:16px!important;
bottom:8px!important;
width:130px!important;
height:122px!important;
object-fit:contain!important;
}

.fuwarisu-head{
width:116px!important;
flex:0 0 116px!important;
padding:4px!important;
}
.fuwarisu-head img{
width:96px!important;
height:96px!important;
object-fit:contain!important;
}

.reply-stage{
grid-template-columns:minmax(0,1fr) 174px!important;
gap:12px!important;
}
.answer-kokohagu{
width:154px!important;
height:176px!important;
object-fit:contain!important;
}

.why-box,.note-box{
grid-template-columns:minmax(0,1fr) 138px!important;
}
.why-box img,.note-box img{
width:124px!important;
height:112px!important;
object-fit:contain!important;
}

@media(max-width:700px){
.child-speaker img{
width:72px!important;
height:84px!important;
}
.steps article{
min-height:218px!important;
padding:20px 108px 22px 20px!important;
}
.steps article>img{
right:10px!important;
bottom:10px!important;
width:90px!important;
height:108px!important;
}
.steps article:nth-child(2)>img{
width:100px!important;
height:86px!important;
}
.steps article:nth-child(3)>img{
width:86px!important;
height:104px!important;
}
.soft-message{
grid-template-columns:104px minmax(0,1fr)!important;
gap:12px!important;
padding:20px 16px!important;
}
.soft-message>img{
width:96px!important;
height:104px!important;
}
.price-deco{
width:104px!important;
height:98px!important;
}
.fuwarisu-head img{
width:78px!important;
height:78px!important;
}
.reply-stage{
grid-template-columns:minmax(0,1fr) 88px!important;
}
.answer-kokohagu{
width:82px!important;
height:104px!important;
}
.why-box img,.note-box img{
width:72px!important;
height:68px!important;
}
}

/* ===== pending_ratings (2026-08-20 新規機能) =====
既存の.parent-support/.try-wrapのカード意匠（丸角・rose系グラデーション・soft-shadow）に揃えた、
非モーダルのバナー。ヘッダーの直下・mainの直前に挿入される想定。 */
.pending-rating{
position:relative;
width:min(900px,calc(100% - 36px));
margin:18px auto 0;
background:linear-gradient(135deg,#fff9fb,#fff2f6);
border:1px solid var(--pink2);
border-radius:24px;
padding:22px 54px 22px 26px;
box-shadow:var(--soft-shadow);
}
.pending-rating-close{
position:absolute;
right:12px;
top:10px;
border:0;
background:transparent;
font-size:20px;
line-height:1;
color:#a97a86;
padding:8px;
}
.pending-rating-q{
margin:0 0 14px;
font-size:15px;
font-weight:800;
color:var(--ink);
}
/* 2026-08-21修正: 3択(よかった/変わらなかった/うまくいかなかった)のカード幅が
   ラベルの文字数(9文字/7文字/4文字)に引っ張られ96px/125px/151pxとバラバラになり、
   画像(56x56で3枚とも統一済み)の位置が段違いに見え、かつ行全体が左に寄って
   右側に大きな余白が残る不具合があった(ユーザー指摘・本番スクショで確認)。
   pending_ratingsの保存・評価ロジックには一切触れず、表示CSSのみを修正する。
   flex:1 1 0 + min-width:0で3カードを常に同一幅にし、text-align:centerで
   折り返した場合のラベルも中央揃えにし、justify-content:centerでカード群
   全体を評価ボックス内で中央配置する(左寄せによる余白の偏りを解消)。
   高さはflexの既定であるalign-items:stretch(親.pending-rating-choicesに
   align-itemsを指定していないため既定値)により、3カードとも最も高いものに
   自動的に揃う。画像はjustify-content:flex-start(カード先頭寄せ)にすることで、
   ラベルの行数が1行/2行と異なっても、画像の上端位置は3カードとも常に同じ
   (paddingからの一定オフセット)になるようにする
   (justify-content:centerだと、ラベルの行数差でブロック全体の高さが変わり、
   画像位置が段違いになってしまうため使わない)。 */
.pending-rating-choices{
display:flex;
gap:14px;
flex-wrap:wrap;
justify-content:center;
}
.pending-rating-choice{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:6px;
border:1px solid var(--line);
background:#fff;
border-radius:18px;
padding:12px 16px;
flex:1 1 0;
min-width:0;
max-width:200px;
text-align:center;
font-weight:800;
font-size:13px;
color:#6d5752;
}
.pending-rating-choice:hover{
border-color:var(--pink);
}
.pending-rating-choice img{
width:56px;
height:56px;
object-fit:contain;
flex:0 0 auto;
}
@media(max-width:700px){
.pending-rating{
width:calc(100% - 24px);
padding:18px 44px 18px 18px;
border-radius:20px;
margin-top:12px;
}
.pending-rating-q{
font-size:14px;
}
.pending-rating-choices{
gap:8px;
justify-content:center;
}
.pending-rating-choice{
min-width:0;
flex:1 1 0;
max-width:160px;
padding:10px 8px;
font-size:12px;
text-align:center;
}
.pending-rating-choice img{
width:44px;
height:44px;
flex:0 0 auto;
}
}

/* ===== good_replies「うちでよかった返し方」(2026-08-20 新規機能) =====
既存のmember-pill・pending-ratingと同じ丸角・rose/pink系の意匠に揃える。
ハート型の一般的なお気に入りUIにはせず、「保存状況の件数バッジ＋一覧モーダル」という
実務的な形にしている。 */
.good-replies-pill{
border:1px solid var(--pink2);
border-radius:999px;
padding:9px 16px;
background:#fff;
color:#a4657a;
font-size:12px;
font-weight:800;
white-space:nowrap;
margin-left:12px;
}
.good-replies-pill:hover{
border-color:var(--pink);
}

.good-reply-toast{
position:relative;
width:min(640px,calc(100% - 36px));
margin:14px auto 0;
padding:14px 20px;
border-radius:16px;
background:linear-gradient(135deg,#fff6ea,#fffaf0);
border:1px solid #eddfc8;
color:#7a5d33;
font-size:13px;
font-weight:800;
text-align:center;
}

.good-reply-choice{
position:relative;
width:min(900px,calc(100% - 36px));
margin:18px auto 0;
background:linear-gradient(135deg,#fff9fb,#fff2f6);
border:1px solid var(--pink2);
border-radius:24px;
padding:24px 26px;
box-shadow:var(--soft-shadow);
}
.good-reply-choice-q{
margin:0 0 16px;
font-size:15px;
font-weight:800;
color:var(--ink);
}
.good-reply-choice-compare{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-bottom:18px;
}
.good-reply-choice-item{
border:1px solid var(--line);
background:#fff;
border-radius:16px;
padding:14px 16px;
}
.good-reply-choice-item-new{
border-color:var(--pink);
background:#fff8fa;
}
.good-reply-choice-label{
display:inline-block;
font-size:11px;
font-weight:900;
color:#c97790;
margin-bottom:6px;
}
.good-reply-choice-words{
margin:0 0 4px;
font-size:13px;
font-weight:800;
color:#6d5752;
}
.good-reply-choice-reply{
margin:0;
font-size:13px;
color:#8b6b66;
}
.good-reply-choice-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.good-reply-choice-btn{
flex:1 1 auto;
border:1px solid #dfa8b7;
background:#fff;
color:#b5657a;
border-radius:999px;
padding:12px 16px;
font-weight:800;
font-size:13px;
min-width:120px;
}
.good-reply-choice-btn-primary{
border:0;
background:linear-gradient(180deg,#dc7d99,#cf708d);
color:#fff;
}
.good-reply-choice-btn-text{
border:0;
background:transparent;
color:#9c6473;
text-decoration:underline;
flex:0 0 auto;
min-width:0;
}

/* ===== good_replies 世界観リデザイン（design.md準拠、2026-08-20） =====
ふわリスの語りかけ＋とげハリ/ここハグのミニアイコンで、データ比較ではなく
「ふわふわことば」同士の見比べに見せる。有料導線はボタン群から切り離し、
控えめなテキストリンクにしている。 */
.good-reply-choice-lead{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:18px;
}
.good-reply-choice-lead-icon{
width:52px;
height:52px;
object-fit:contain;
flex:0 0 52px;
}
.good-reply-choice-lead-text p{
margin:0 0 4px;
font-size:15px;
font-weight:800;
color:var(--ink);
line-height:1.6;
}
.good-reply-choice-lead-text p:last-child{
margin-bottom:0;
}
.good-reply-choice-line{
display:flex;
align-items:center;
gap:8px;
margin-bottom:8px;
}
.good-reply-choice-line:last-child{
margin-bottom:0;
}
.good-reply-choice-line img{
width:28px;
height:28px;
object-fit:contain;
flex:0 0 28px;
}
.good-reply-choice-line p{
margin:0;
font-size:13px;
font-weight:800;
color:#6d5752;
}
.good-reply-choice-line-reply p{
font-weight:600;
color:#8b6b66;
}
.good-reply-choice-more{
display:block;
width:100%;
margin:14px 0 0;
border:0;
background:transparent;
color:#9c6473;
font-size:12px;
font-weight:700;
text-decoration:underline;
text-align:center;
padding:6px;
}

.modal-card-wide{
width:min(620px,100%);
text-align:left;
}
.modal-card-wide h2{
text-align:center;
word-break:keep-all;
overflow-wrap:break-word;
}
.good-replies-modal-lead{
text-align:center;
color:#8b6b66;
font-size:13px;
margin:0 0 16px;
}
.good-replies-list{
display:grid;
gap:10px;
max-height:50vh;
overflow-y:auto;
}
.good-reply-item{
position:relative;
border:1px solid var(--line);
border-radius:16px;
padding:14px 60px 14px 16px;
background:#fffaf6;
}
.good-reply-item-words{
margin:0 0 4px;
font-size:13px;
font-weight:800;
color:#6d5752;
}
.good-reply-item-reply{
margin:0;
font-size:13px;
color:#8b6b66;
}
.good-reply-item-delete{
position:absolute;
right:12px;
top:12px;
border:1px solid #dfa8b7;
background:#fff;
color:#b5657a;
border-radius:999px;
padding:6px 12px;
font-size:11px;
font-weight:800;
}
.good-replies-empty{
text-align:center;
color:#9b817a;
font-size:13px;
padding:20px 0;
}

@media(max-width:700px){
.good-replies-pill{
margin-left:6px;
padding:7px 11px;
font-size:11px;
}
.good-reply-choice{
width:calc(100% - 24px);
padding:18px 18px;
}
.good-reply-choice-compare{
grid-template-columns:1fr;
}
.good-reply-choice-actions{
flex-direction:column;
}
.good-reply-choice-btn{
min-width:0;
}
.good-reply-choice-lead-icon{
width:40px;
height:40px;
flex:0 0 40px;
}
.good-reply-choice-lead-text p{
font-size:13.5px;
}
.good-reply-choice-line img{
width:24px;
height:24px;
flex:0 0 24px;
}
.modal-card-wide{
/* .modalはCSS Gridのplace-items:centerでアイテムをstretchしないため、
   width:min(620px,100%)の「100%」が実際のビューポート幅ではなく内容依存で
   解決され、狭い画面でモーダルが右にはみ出すことがある。viewport単位を使い
   明示的に実際の画面幅基準でサイズを確定させる（デスクトップ側の挙動には
   影響しない、700px以下限定の上書き）。 */
width:calc(100vw - 40px);
max-width:calc(100vw - 40px);
padding:22px 18px;
}
.good-reply-item{
padding:14px 54px 14px 14px;
}
.good-reply-item-delete{
right:8px;
top:8px;
padding:5px 9px;
font-size:10px;
}
}

/* ===== たいせつなおもいで（precious_photo）2026-08-20 ドラフト =====
6秒待機画面は「静かな画面」を維持するため、写真まわりの文字量を最小限にする。
枠と余白だけで写真を落ち着かせ、キャプションは控えめな1行のみとする。 */
.precious-photo-display{
margin-top:14px;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}
.precious-photo-caption{
margin:0;
font-size:11px;
font-weight:800;
letter-spacing:.04em;
color:#b98a97;
}
/* 2026-08-20 改訂: 固定正方形+object-fit:coverだと、正方形以外の写真の上下・左右が
   初期表示で強制的に切られてしまっていた（縦長・横長ほど顕著）。「初期表示では絶対に
   見切れない」を最優先するため、枠自体を画像の縦横比のまま伸縮させる形に変更する。
   注意: max-height:100%はheight:autoな親を基準にすると計算不能（none扱い）になり、
   縦長画像の高さが制御できなくなるため、max-width/max-heightは実寸でimg自身に指定し、
   .precious-photo-frame側はinline-flexで画像の描画結果へ自然にshrink-wrapさせる。 */
.precious-photo-frame{
display:inline-flex;
border-radius:22px;
overflow:hidden;
background:#fff8fa;
box-shadow:0 10px 26px rgba(184,113,133,.18);
}
.precious-photo-frame img{
display:block;
width:auto;
height:auto;
max-width:200px;
max-height:200px;
object-fit:contain;
}
.precious-photo-frame-modal img{
max-width:260px;
max-height:260px;
}
.precious-photo-frame-modal{
margin:0 auto 14px;
}
.precious-photo-preview-wrap{
display:flex;
justify-content:center;
}
.precious-photo-modal-actions{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
margin:6px 0 4px;
}
.precious-photo-choose-btn{
border:0;
border-radius:999px;
background:linear-gradient(180deg,#dc7d99,#cf708d);
color:#fff;
font-weight:800;
font-size:13px;
padding:12px 22px;
}
.precious-photo-delete-btn{
border:1px solid #dfa8b7;
background:#fff;
color:#b5657a;
border-radius:999px;
padding:12px 18px;
font-weight:800;
font-size:13px;
}

@media(max-width:700px){
.precious-photo-frame{
border-radius:18px;
}
.precious-photo-frame img{
max-width:min(90vw,320px);
max-height:min(48vh,340px);
}
.precious-photo-frame-modal img{
max-width:min(90vw,340px);
max-height:min(50vh,360px);
}
.precious-photo-frame-modal{
margin:0 auto 12px;
}
.precious-photo-caption{
font-size:10px;
}
.precious-photo-modal-actions{
flex-direction:column;
}
.precious-photo-choose-btn,.precious-photo-delete-btn{
width:100%;
}
}