/* CHANGES-LP-11: トップ（index.html）だけが読み込む上書き。CRITIQUE-LOG.md 批評1〜7と ../reference/rhythm/NOTES.md 案A・案B。
   緑は相談入口だけ（番号・飾り・曲線はベージュ系と薄緑帯のみ）。動きは足していない */

/* 批評2: 本文は W500・15px 以下は字間 .04em・行間 2。.08em 以上は見出し・英字ラベル・ヒーローコピーだけ */
.top{font-weight:500;letter-spacing:.04em;line-height:2}
.top h1,.top h2{letter-spacing:.12em}.top h3{letter-spacing:.08em}.top .en{letter-spacing:.28em}
.top .btn{letter-spacing:.1em}.top .hero-copy{letter-spacing:.22em}
.top .hero-lead{font-size:16px;line-height:2;max-width:29em;margin-bottom:20px}
@media(max-width:559px){.top .hero-lead{font-size:15px}.top .hero-lead .nb{display:inline}.top .hero-lead .s1{display:block}}  /* 狭い画面: 1文目「能美市と…ふたば薬局です。」は1行（入らなければ読点で折る）、2文目は文節（.bx）で行を埋める */
.top .nb.kw,.top .hero-lead .nb.kw{display:inline-block}  /* 社名「ふたば薬局です。」と「能美市と小松市の調剤薬局、」は、どの幅でも途中で切らない */
.top .hero-meta,.top .recruit-line p,.top .news time,.top .consult .or,.top .tels summary,.top .tel-pop .addr,.top .map-open,.top .btn.sm,.top .hero-tel-note,.top .hero-tel-store,.top .hero-tels summary,.top .hero-tels small{font-size:14.5px}
.top .svc-txt p,.top .faq details p,.top .steps p{font-size:15px;line-height:2}
.top footer{font-size:14.5px}
/* 批評3: 意味のかたまり（span.nb）の切れ目でだけ折り返す。中の文節 span.bx は従来どおり */
.top .nb{display:inline-block;max-width:100%}
/* 批評4: 縦書きナビは 1項目=1列。折らない。項目のあいだは 24px＋点線 */
@media(min-width:1180px){.top .vnav{gap:0}.top .vnav a{white-space:nowrap;text-orientation:mixed;padding:4px 12px;border-left:1px dotted var(--hairline)}.top .vnav a:last-child{border-left:0}}
/* 批評5: 最初の画面に代表番号そのもの。営業時間チップは open-badge の地＋primary-deep（無効ボタンに見せない） */
.top .chip{background:#e9f4dc;color:var(--primary-deep)}
.top .hero-tel{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;margin:20px 0 0}
.top .hero-tel-store{flex-basis:100%;color:var(--mute);line-height:1.8}
.top .hero-num{display:inline-flex;align-items:center;min-height:44px;font-family:var(--en);font-weight:700;font-size:26px;letter-spacing:.04em;line-height:1.4;color:var(--primary-deep);text-decoration:none}
.top .hero-num:hover{color:var(--primary)}
.top .hero-tel-note{display:inline-block;background:#fff4d6;color:var(--ink-strong);border-radius:999px;padding:1px 12px;line-height:1.8}
.top .hero-tels{margin-top:4px}
.top .hero-tels summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink-strong)}
.top .hero-tels summary::-webkit-details-marker{display:none}
.top .hero-tels summary::before{content:"";flex:none;margin-right:10px;width:9px;height:9px;border-radius:var(--leaf);background:var(--shadow-flat);transform:rotate(-45deg);transition:transform .5s var(--ease)}
.top .hero-tels[open] summary::before{transform:rotate(135deg)}
.top .hero-tels ul{list-style:none;margin:0 0 8px}
.top .hero-tels li{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;padding:2px 0;border-top:1px dotted var(--hairline)}
.top .hero-tels small{color:var(--mute)}
.top .hero-tels li a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--en);font-weight:700;font-size:22px;letter-spacing:.04em;color:var(--primary-deep);text-decoration:none}
.top .hero-tels li a:hover{color:var(--primary)}
/* 批評1・案A・案B: 見出しの型3種。hd-center=中央（こんなとき）、hd-wm=左＋透かし番号（できること 01・Q&A 03）、hd-chip=双葉の番号チップ（流れ 02。下の3ステップと同じ48px列）
   透かし番号は英字ラベルに重ねず、h2 と双葉飾りの背後だけに置く（スクショ確認の指摘）。96px の数字は箱の上端から約17px 下に字面が始まるので、top:20px で字面はラベル文字の約13px 下から */
.top .hd{position:relative;margin-bottom:24px}
.top .hd .en,.top .hd h2{position:relative;z-index:1}
.top .hd h2{margin-bottom:0}
.top .wm{position:absolute;top:20px;left:20px;z-index:0;font-family:var(--en);font-weight:600;font-size:96px;line-height:1;letter-spacing:0;color:var(--hairline);pointer-events:none;user-select:none}
.top .leaf2{display:block;width:28px;height:16px;margin-top:12px;color:#cfc3ad}
.top .leaf2 svg{display:block;width:100%;height:100%;fill:currentColor}
.top .hd-center{text-align:center}.top .hd-center .leaf2{margin-left:auto;margin-right:auto}
.top .hd-chip{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center}
.top .hchip{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:17px;letter-spacing:0;color:var(--ink-strong)}
/* 批評1・案A: 余白の緩急。ヒーロー→こんなとき 96、こんなとき→できること 56、帯→流れ 72、流れ→人 64、人→Q&A 56 */
.top .s-worry{padding-top:96px}
.top .s-svc{padding-top:56px}
.top .s-flow{padding-top:72px}
.top .s-staff{padding-top:64px}
.top .s-faq{padding-top:56px}
/* 案A: 「できること」の2カードは、絵を左右交互・大小ちがいで置く（左に大きく／右に小さく）。560px 未満は縦積み */
.top .svc.main{margin-bottom:40px}
.top .svc-rows{display:grid;gap:40px}
.top .svc-row{display:grid;gap:16px 24px;align-items:center}
.top .svc-row .ph,.top .svc-row .photo{min-height:0;aspect-ratio:3/2;margin:0}
.top .svc-row h3{margin:0 0 8px}
.top .svc-row p{margin-bottom:12px}
@media(min-width:560px){.top .svc-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.top .svc-row.rev{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}.top .svc-row.rev>.ph,.top .svc-row.rev>.photo{order:2}}
/* 案B・批評7: 「家で過ごすと決めた日から…」は、上下の余白を大きくとった1文だけの画面。文字は最初から ink-strong（アニメなし）。境界はゆるい曲線1本 */
.top .tagline-band{margin-top:64px}
.top .curve{display:block;width:100%;height:36px;color:var(--band-green)}
.top .curve.bottom{transform:scaleY(-1)}
.top .tagline{background:var(--band-green);padding:88px 28px;text-align:center}
.top .tagline p{font-size:26px;font-weight:500;line-height:2;letter-spacing:.14em;color:var(--ink-strong);margin:0}
.top .tagline span{color:var(--ink-strong);animation:none}
@media(min-width:560px){.top .tagline{padding:112px 28px}.top .tagline p{font-size:30px}}
/* 批評6: テキストリンクは1種（primary-deep・W700・15px・双葉矢印）。タップ領域 44px */
.top a.go{display:inline-flex;flex-wrap:wrap;align-items:center;min-height:44px;font-size:15px;font-weight:700;color:var(--primary-deep);text-decoration:none}
.top a.go:hover{text-decoration:underline;text-decoration-color:var(--primary)}
.top .tels .see{font-weight:700;color:var(--primary-deep);text-decoration:none}
/* 余裕があれば: FAQ 右端の双葉マーカーを一段濃く */
.top .faq summary::after{background:#cfc3ad}
/* 撮影の注意にあった左上の白い角丸: 1240px 以上で body が position:relative になり（LP-10）、.card の上マージン 24px が body に抜けて .skip（top:-60px）の下端が画面に出ていた */
.top .skip{top:-100px}.top .skip:focus{top:12px}

/* 仮写真（photos-temp）: 仮枠の灰色・枠線を消して画像を角丸で切る */
.photo.has-img{background:none;border:0;display:block}
.photo.has-img img{display:block;width:100%;height:100%;object-fit:cover}