/* デザインシステム「ふたば」（mockup-DESIGN.md）を土台にした仮サイト用CSS — LP版
   色＝機能: 若葉グリーンは相談の入口（相談ボタン・電話番号・在宅/看取りページへの誘導・相談帯・固定バー）だけ。
   柿色は採用の小さなボタンだけ。それ以外は焦げ茶＋生成りで組む。 */
:root{--primary:#5c9e72;--primary-deep:#3d7a54;--kaki:#c96f45;--kaki-deep:#b25a33;--ink:#4a4038;--ink-strong:#332b25;--mute:#8a7f74;--canvas:#fff;--page-bg:#f5f1e8;--band-green:#edf3ee;--band-kaki:#f7efe7;--hairline:#e4ddd0;--shadow-flat:#dcd4c4;--footer-bg:#efe8da;--warn:#fff4d6;--jp:"Zen Maru Gothic",sans-serif;--en:"Quicksand",sans-serif;--leaf:50% 50% 50% 0;--ease:cubic-bezier(.32,.72,0,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:var(--jp);background:var(--page-bg);color:var(--ink);font-size:15px;line-height:2.2;letter-spacing:.08em;padding-bottom:64px;font-feature-settings:"palt" 0}
a{color:var(--ink-strong);text-underline-offset:.25em;text-decoration-color:var(--shadow-flat);text-decoration-thickness:1px;transition:color .4s var(--ease),text-decoration-color .4s var(--ease)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--primary-deep);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto}
h1,h2,h3{text-wrap:balance;word-break:auto-phrase}
p,li,dd{text-wrap:pretty}
.skip{position:absolute;left:12px;top:-60px;background:var(--canvas);padding:8px 16px;border-radius:999px;z-index:100}
.skip:focus{top:12px}
.proto-bar{background:var(--warn);color:var(--ink);font-size:12px;text-align:center;padding:4px 12px;line-height:1.8;letter-spacing:.06em}

/* カード（620px） */
.card{width:min(620px,100%);margin:0 auto;background:var(--canvas);border-radius:40px 40px 0 0;min-height:100vh;overflow:clip}
@media(min-width:660px){.card{margin:24px auto 72px;border-radius:40px}}
@media(max-width:640px){.card{border-radius:0}}
.vnav{display:none}
@media(min-width:1180px){.vnav{display:flex;position:fixed;right:calc(50% + 340px);top:50%;transform:translateY(-50%);gap:16px;flex-direction:row-reverse}.vnav a{writing-mode:vertical-rl;font-size:15px;letter-spacing:.2em;color:var(--ink);text-decoration:none}.vnav a:hover{color:var(--ink-strong)}.vnav a[aria-current]{color:var(--primary);font-weight:700}.vnav a[aria-current]::before{content:"";display:inline-block;width:8px;height:8px;margin-bottom:8px;border-radius:var(--leaf);background:var(--primary)}}
.decor{display:none}
/* 双葉（芽）の線画を左右に4個・3個。上下にずらし、左は縦書きナビ（中央）を、右は相談ミニカード（下）を避ける */
@media(min-width:991px){.decor{display:block;position:fixed;top:0;height:100vh;width:calc(50% - 310px);pointer-events:none;z-index:-1}.decor.dl{left:0}.decor.dr{right:0}.decor svg{position:absolute;color:var(--shadow-flat)}
.dl .s1{left:14%;top:7%;width:72px;height:81px;transform:rotate(-8deg)}.dl .s2{left:56%;top:23%;width:46px;height:52px;transform:rotate(12deg)}.dl .s3{left:22%;bottom:20%;width:58px;height:65px;transform:rotate(6deg)}.dl .s4{left:60%;bottom:5%;width:86px;height:97px;transform:rotate(-12deg)}
.dr .s1{right:18%;top:6%;width:64px;height:72px;transform:rotate(10deg)}.dr .s2{right:60%;top:21%;width:44px;height:50px;transform:rotate(-6deg)}.dr .s3{right:22%;top:38%;width:78px;height:88px;transform:rotate(-14deg)}}

/* PC右余白の相談ミニカード（相談の入口なので若葉グリーン。白抜きボタンで塗りボタンの数を増やさない） */
.side-consult{display:none}
@media(min-width:1180px){.side-consult{display:block;position:fixed;left:calc(50% + 334px);bottom:40px;width:min(216px,calc(50% - 358px));background:var(--primary);color:#fff;border-radius:24px;padding:20px 20px 16px;box-shadow:0 3px 0 var(--shadow-flat);z-index:40;line-height:1.8;letter-spacing:.06em}
.sc-h{font-size:14px;font-weight:700;margin-bottom:12px}
.sc-btn{display:block;text-align:center;background:var(--canvas);color:var(--primary-deep);font-weight:700;font-size:14px;border-radius:999px;padding:10px 16px;text-decoration:none;transition:background .4s var(--ease)}
.sc-btn:hover{background:var(--band-green)}
.sc-or{font-size:12px;margin:16px 0 0}
.side-consult .any-store{font-size:11.5px;color:#fff;margin:0 0 4px;line-height:1.7}
.side-consult ul{list-style:none}
.side-consult li{border-top:1px dotted rgb(255 255 255 / .5);padding:4px 0;line-height:1.5}
.side-consult small{display:block;font-size:11px}
.side-consult li a{font-family:var(--en);font-weight:700;font-size:18px;letter-spacing:.04em;color:#fff;text-decoration:none}
.side-consult li a:hover{text-decoration:underline}}

/* ヘッダー */
header{position:sticky;top:0;z-index:50;background:rgb(255 255 255 / .96);display:flex;align-items:center;gap:12px;padding:12px 24px}
header .logo{margin-right:auto}
header .logo img{height:32px;width:auto;display:block}
.menu-btn{position:relative;width:44px;height:44px;border:0;background:var(--page-bg);border-radius:999px;cursor:pointer}
.menu-btn i{position:absolute;left:14px;width:16px;height:2px;background:var(--ink-strong);border-radius:2px;transition:transform .5s var(--ease),opacity .3s var(--ease)}
.menu-btn i:nth-child(1){top:16px}.menu-btn i:nth-child(2){top:21px}.menu-btn i:nth-child(3){top:26px}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.menu{display:none;padding:8px 24px 24px}
.menu.open{display:block}
.menu a{display:block;padding:8px 4px;font-size:14px;border-bottom:1px dotted var(--hairline);text-decoration:none}
.menu a[aria-current]{color:var(--mute)}
@media(max-width:400px){.head-cta{display:none}}

/* 組版 */
section{padding:72px 28px 0}
.en{font-family:var(--en);font-size:15px;font-weight:600;letter-spacing:.28em;color:var(--mute);margin-bottom:4px}
h1,h2{font-size:24px;font-weight:700;letter-spacing:.12em;line-height:1.7;color:var(--ink-strong);margin-bottom:16px}
h3,.h3{font-size:19px;font-weight:700;letter-spacing:.08em;color:var(--ink-strong);margin:24px 0 8px;line-height:1.7}
p{margin-bottom:16px}
.small{font-size:13px}
.page-head{padding:48px 28px 0}
.page-head .lead{font-size:17px;font-weight:500;letter-spacing:.16em;line-height:2;color:var(--ink-strong);margin-top:8px}
.crumb{font-size:12.5px;color:var(--mute);margin-bottom:24px}
section.first{padding-top:24px}
section.first>h2,section>.photo+h2,section>.ph+h2{margin-top:32px}

/* ボタン（全てピル・ベタ落ち影） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:700;letter-spacing:.1em;padding:12px 28px;font-size:15px;line-height:1.6;color:#fff;background:var(--primary);box-shadow:0 3px 0 var(--shadow-flat);text-decoration:none;transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.btn:hover{background:var(--primary-deep);box-shadow:0 0 0 var(--shadow-flat);transform:translateY(3px)}
.btn:active{transform:translateY(3px) scale(.98)}
.btn.lg{padding:16px 40px;font-size:16px;min-width:min(100%,320px)}
.btn.sm{padding:8px 16px;font-size:13px;box-shadow:none}
.btn.sm:hover{transform:none}
.btn.ghost{background:var(--canvas);color:var(--primary-deep);border:2px solid var(--primary);box-shadow:none}
.btn.ghost:hover{background:var(--band-green);transform:none}
.btn.kaki{background:var(--kaki)}
.btn.kaki:hover{background:var(--kaki-deep)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
a.go{color:var(--primary-deep);font-weight:700;text-decoration-color:var(--primary)}
a.go::after{content:"";display:inline-block;width:9px;height:9px;margin-left:10px;border-radius:var(--leaf);background:var(--primary);transform:rotate(-45deg) translateY(-1px);transition:transform .5s var(--ease)}
a.go:hover::after{transform:rotate(-45deg) translate(3px,-4px)}

/* FV（トップ） */
.hero{padding-top:40px}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;margin-bottom:32px}
.hero-copy{writing-mode:vertical-rl;font-size:26px;font-weight:500;line-height:1.9;letter-spacing:.22em;color:var(--ink-strong);margin:0;padding-top:8px;text-wrap:nowrap}
@media(min-width:560px){.hero-copy{font-size:32px}.hero-grid{gap:40px}}
.hero-lead{font-size:16px;line-height:2.1}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13px;margin-bottom:24px}
.chip{display:inline-block;background:var(--page-bg);color:var(--ink-strong);border-radius:999px;padding:4px 16px}
.fact{color:var(--mute)}
.fact::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:var(--leaf);background:var(--shadow-flat)}
.hero-sub{font-size:13px;margin-top:16px}
.after-worry{margin:24px 0 0;text-align:center}
.after-worry .btn{padding:12px 32px}

/* こんなとき */
.worry{display:grid;gap:24px}
@media(min-width:560px){.worry{grid-template-columns:160px 1fr;align-items:start}}
ul.leaf{list-style:none;margin:0 0 16px}
ul.leaf li{position:relative;padding:8px 0 8px 24px;border-bottom:1px dotted var(--hairline)}
ul.leaf li:last-child{border-bottom:0}
ul.leaf li::before{content:"";position:absolute;left:2px;top:1.35em;width:10px;height:10px;background:var(--shadow-flat);border-radius:var(--leaf)}

/* できること（同じ箱の繰り返しにしない: 主役1つ＋脇2つ） */
.svc.main{margin-bottom:48px}
.svc.main h3{font-size:24px;letter-spacing:.12em;margin-top:16px}
.svc-pair{display:grid;gap:40px}
@media(min-width:560px){.svc-pair{grid-template-columns:1fr 1fr;gap:24px}}
.svc-pair .ph,.svc-pair .photo{min-height:0;aspect-ratio:3/2;margin-bottom:8px}
.svc-pair p{font-size:14px;line-height:2}

/* 思い（タグライン）: 文節ごとに読む順で濃くなる。CSS scroll-driven animation、非対応環境は最初から全表示 */
.tagline-band{margin-top:72px}
.tagline-band .wave{margin:0}
.wave.bottom{transform:scaleY(-1)}
.tagline{background:var(--band-green);padding:48px 28px}
.tagline p{font-size:26px;font-weight:500;line-height:2;letter-spacing:.14em;color:var(--ink-strong);margin:0}
@media(min-width:560px){.tagline p{font-size:30px}}
@supports (animation-timeline:view()){
@media(prefers-reduced-motion:no-preference){
.tagline{view-timeline:--tl block}
.tagline span{color:#d6cfc6;animation:ink linear both;animation-timeline:--tl;animation-range:cover calc(18% + var(--i) * 3.5%) cover calc(24% + var(--i) * 3.5%)}
@keyframes ink{to{color:var(--ink-strong)}}
}}

/* 流れ（3ステップ: 本当に順序があるので番号を使う） */
.steps{list-style:none;counter-reset:s;margin-bottom:8px}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:16px 0;position:relative}
.steps li:not(:last-child)::after{content:"";position:absolute;left:23px;top:72px;bottom:-8px;border-left:2px dotted var(--hairline)}
.steps .num{width:48px;height:48px;border-radius:var(--leaf);background:var(--page-bg);display:grid;place-items:center;font-family:var(--en);font-weight:700;font-size:19px;color:var(--ink-strong);letter-spacing:0}
.steps h3{margin:8px 0 4px}
.steps p{margin:0}

/* FAQ */
.faq details{border-bottom:1px dotted var(--hairline)}
.faq details:first-child{border-top:1px dotted var(--hairline)}
.faq summary{list-style:none;cursor:pointer;padding:16px 40px 16px 0;position:relative;font-weight:500;color:var(--ink-strong);line-height:1.9}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:24px;width:12px;height:12px;border-radius:var(--leaf);background:var(--shadow-flat);transform:rotate(-45deg);transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding:0 0 16px;margin:0;font-size:14px;line-height:2.1}

/* 相談ブロック（相談導線の主役。ここだけ薄緑帯） */
.wave{display:block;width:100%;height:28px;margin-top:72px;color:var(--band-green)}
.consult{background:var(--band-green);padding:40px 28px 64px}
.consult .en{color:var(--primary-deep)}
.consult .or{font-size:13px;color:var(--mute);margin:32px 0 8px}
.any-store{font-size:13px;color:var(--ink-strong);margin:0 0 4px}
.tels{list-style:none;margin-bottom:16px}
.tels li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 16px;padding:8px 0;border-bottom:1px dotted #cfe0d3}
.tels span{font-size:14px}
.tel{font-family:var(--en);font-weight:700;font-size:30px;letter-spacing:.06em;color:var(--primary-deep);text-decoration:none}
.tel:hover{color:var(--primary)}
.consult .draft{border-color:#cfe0d3}

/* 下部の静かなブロック */
section.quiet{padding-top:56px}
.recruit-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:24px}
.recruit-line p{flex:1 1 280px;font-size:13px;color:var(--mute);margin:0}
.band-kaki{background:var(--band-kaki);margin-top:72px;padding-bottom:56px}
.news{list-style:none;margin-bottom:16px}
.news li{border-bottom:1px dotted var(--hairline);padding:12px 0}
.news time{font-family:var(--en);color:var(--mute);font-size:13px;margin-right:16px}

/* 仮サイト用の注記 */
.todo{background:var(--warn);border-radius:999px;padding:1px 10px;font-size:12.5px;color:#7a5a00;white-space:nowrap;letter-spacing:.04em}
.note{background:var(--warn);border-radius:24px;padding:16px 24px;font-size:13px;line-height:1.9;margin:0 0 32px}
.draft{font-size:12px;color:var(--mute);margin:8px 0 16px;line-height:1.8;letter-spacing:.04em}
.draft::before{content:"メモ";display:inline-block;font-size:11px;border:1px solid var(--hairline);border-radius:999px;padding:0 8px;margin-right:8px;line-height:1.6}

/* 店舗・会社情報（表ではなく定義リストで） */
.store{padding:32px 0;border-bottom:1px dotted var(--hairline)}
.store:first-child{padding-top:8px}
.store h2{font-size:19px;letter-spacing:.08em;margin-bottom:8px}
dl.info{display:grid;grid-template-columns:7em 1fr;font-size:14px;line-height:1.9;margin:8px 0 24px}
dl.info dt,dl.info dd{padding:8px 0;border-bottom:1px dotted var(--hairline)}
dl.info dt{color:var(--mute)}
.map{background:var(--page-bg);border-radius:24px;min-height:120px;display:grid;place-items:center;font-size:13px;color:var(--mute)}

/* フォーム */
form .field{margin-bottom:16px}
form label{display:block;font-size:14px;font-weight:500;color:var(--ink-strong)}
form input,form select,form textarea{width:100%;font:inherit;padding:8px 16px;border:2px solid var(--hairline);border-radius:24px;background:#fff;color:var(--ink)}
form input:focus,form select:focus,form textarea:focus{border-color:var(--ink);outline:none}
form textarea{min-height:120px}
form .btn{border:0;margin:8px 0 24px}

/* フッター（明るい地。ダーク背景は使わない） */
footer{position:relative;margin-top:72px;background:var(--footer-bg);color:var(--ink);padding:40px 28px 48px;font-size:13px;line-height:2;border-radius:40px 40px 0 0}
@media(min-width:660px){footer{border-radius:40px}}
footer .fnav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:16px}
footer .fnav a{text-decoration:none}
footer .fine{font-size:11.5px;color:var(--mute)}
.totop{position:absolute;right:28px;top:-24px;width:52px;height:52px;border-radius:var(--leaf);background:var(--canvas);border:2px solid var(--hairline);display:grid;place-items:center;font-family:var(--en);font-weight:700;font-size:12px;letter-spacing:.1em;text-decoration:none;transition:transform .5s var(--ease)}
.totop:hover{transform:translateY(-4px)}
.fixbar{position:fixed;left:0;right:0;bottom:0;display:flex;z-index:60}
.fixbar a{flex:1;text-align:center;color:#fff;font-weight:700;padding:16px 0;text-decoration:none;font-size:14px;line-height:1.6}
.fixbar .f1{background:var(--primary)}.fixbar .f2{background:var(--primary-deep)}
@media(min-width:1180px){.fixbar{display:none}body{padding-bottom:0}}

/* 写真の置き場（イラスト箱 .ph と区別：濃いグレー・実線・カメラ表示・比率固定）— 仮サイトの表示ルールを維持 */
.photo{position:relative;background:#9a9a9a;color:#fff;border:3px solid #6f6f6f;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.6;padding:16px;overflow:hidden;margin:0 0 16px}
.photo::before{content:"📷 写真";position:absolute;left:12px;top:12px;background:#555;border-radius:999px;padding:2px 14px;font-size:15px;font-weight:700;line-height:1.6}
.photo b{font-size:14.5px}.photo small{font-size:11.5px;opacity:.95}
.photo.r32{aspect-ratio:3/2}.photo.r43{aspect-ratio:4/3}.photo.r11{aspect-ratio:1/1}.photo.r21{aspect-ratio:2/1}
.photo.arch{border-radius:999px 999px 24px 24px / 160px 160px 24px 24px}
.photo.circle{border-radius:50%;width:min(220px,70%);margin:0 auto 16px}
.ph{background:#e6e6e6;color:#555;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.7;padding:16px;min-height:200px;border:2px dashed #b5b5b5;margin-bottom:16px}
.ph::before{content:"✎ イラスト";display:block;font-size:15px;font-weight:700;color:#666;margin-bottom:8px}
.ph b{font-size:14px}.ph small{font-size:11.5px;color:#666;margin-top:4px}
.ph.lg{min-height:300px;margin:0}
@media(min-width:560px){.ph.lg{min-height:360px}}
.ph.sm{min-height:140px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photo.circle::before{left:50%;top:20px;transform:translateX(-50%);white-space:nowrap}