/* ========================================================= PAGE-SPECIFIC STYLES — appended per channel page. Each block is scoped to its page's body class (.pg-*). Do not edit styles.css from here; only add to this file. ========================================================= */ /* --------------------------------------------------------- BLOCK: shared .pg-* channel-page components — used by both /hataraku.html (.pg-hataraku) and /seikatsushukanbyo.html (.pg-seikatsu). No new rules needed for .pg-seikatsu: it reuses every class below as-is (crumb, hero, sec, body, doc-table, doc-notes, scope-list, faq-list, updated, mini glyphs). Add new rules only if a future page needs a shape these don't cover — keep selectors generic (.pg-*) so both pages keep benefiting from one source of truth. --------------------------------------------------------- */ .pg-crumb{padding-top:16px;font-size:12px;color:var(--ink-2)} .pg-crumb a{color:var(--ink-2);text-decoration:underline;display:inline-block;padding-block:12px;margin-block:-12px} /* --------------------------------------------------------- BLOCK: .pg-plate — the channel-page sign that replaces the hero. The glyph takes its hue from the plate's own .c-nai/.c-shin via the existing styles.css descendant selectors. The plate carries NO fact-strip, NO call button and NO ghost button — conversion is held by the sticky header button, the mobile bar, .hours-mini's phone line and the closing band. --------------------------------------------------------- */ .pg-plate{background:var(--paper);border-bottom:1px solid var(--line);padding-block:28px 32px} .pg-plate .pg-crumb{padding-top:0} .pg-plate .care-glyph{width:40px;height:40px;font-size:19px;margin-top:14px} .pg-plate .roundels{margin-top:14px} .pg-plate h1{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1.4;letter-spacing:.01em;color:var(--ink);margin-top:12px;font-feature-settings:'palt';text-wrap:balance} .pg-acts{list-style:none;display:flex;flex-wrap:wrap;margin-top:24px;border-top:1px solid var(--line)} .pg-acts li{flex:1 1 200px;border-bottom:1px solid var(--line)} .pg-acts a{display:flex;align-items:center;min-height:48px;padding:10px 4px;font-family:var(--font-display);font-weight:700;font-size:var(--t-sub);color:var(--ink);text-decoration:none} @media (min-width:768px){.pg-acts li+li{border-left:1px solid var(--line)}.pg-acts a{padding-inline:16px}} /* --------------------------------------------------------- BLOCK: .pg-band — the full-bleed breathing band (two fills). CRITICAL: the corner mark sits at left:24px, NOT var(--gutter) — it mirrors .band::before exactly (panel-relative decoration, deliberately unaligned to the text column). The wrapper MUST carry .c-nai or .c-shin (disc and glyph hues bind to it). FILL A — .pg-band--chapter（seikatsu Ch.2）：帯が章そのもの。.sec-head ＋ 行き先案内板 ＋ 一文 ＋ h3 ＋ .pg-policy を、1枚のカード地と1つの角印で持つ。 FILL B — .pg-band--hinge（hataraku Ch.3）：.hinge-mark ＋ h3 ＋ .pg-body 3本。 --------------------------------------------------------- */ .pg-band{padding:0;background:var(--card);border-block:1px solid var(--line);position:relative} .pg-sec-alt + .pg-band, .pg-band + .pg-sec-alt{border-top:0} .pg-band::before{content:"";position:absolute;top:-12px;left:24px;width:60px;height:60px;border-top:2px solid var(--vermilion);border-left:2px solid var(--vermilion);z-index:1;pointer-events:none} .pg-band .wrap{padding-block:40px} @media (min-width:768px){.pg-band .wrap{display:grid;gap:48px;align-items:center;padding-block:56px} .pg-band--hinge .wrap{grid-template-columns:minmax(0,180px) minmax(0,1fr)}} .hinge-mark{display:flex;align-items:center;gap:0} .hinge-mark .care-glyph{width:40px;height:40px;font-size:19px} /* --------------------------------------------------------- BLOCK: .norikae — the end-of-content hand-off card (channel pages, /hajimete.html, /404.html). The whole row is the link; text stays ink, only the arrow is orange (text role). Nothing round is pressable. On index.html the hand-off is the lighter .nk-line instead, appended under each lane's .route-legend. --------------------------------------------------------- */ .norikae{max-width:760px;margin:0 auto 28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);display:grid} .nk-row{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 18px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)} .norikae .nk-row:last-child{border-bottom:0} .nk-mark{width:24px;height:2px;flex:none;margin-inline:4px;background:linear-gradient(90deg,var(--vermilion) 0 50%,var(--ink) 50% 100%)} .nk-text{flex:1;font-size:var(--t-sub);line-height:1.7;border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .12s} .nk-row:hover .nk-text{border-color:var(--ink)} .nk-arrow{color:var(--vermilion-text);font-weight:700;flex:none} /* .nk-line lives in styles.css — it is used only on index.html, which does not load this file. */ /* --------------------------------------------------------- BLOCK: .hours-mini — the hours summary of record on every non-home page. .hm-rule is the fixed string, never paraphrased. The card never grows a table, chips, or a .call-card. Its phone line satisfies the phone-digit invariant (--vermilion-text on light ground). /hajimete.html drops the second .hm-links row (it would link to itself). --------------------------------------------------------- */ .hours-mini{max-width:760px;margin:0 auto 8px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px} .hours-mini p{font-size:var(--t-sub);line-height:1.9;color:var(--ink)} .hm-times{font-weight:600} .hm-rule,.hm-off{color:var(--ink-2)} .hm-call{margin-top:8px} .hm-call .tel-big{font-family:var(--font-body);font-feature-settings:'tnum';font-weight:700;font-size:20px;color:var(--vermilion-text);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px} .hm-links{margin-top:10px;display:grid;gap:8px;font-size:var(--t-note)} .hm-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--steel);padding-bottom:1px;min-height:44px;display:flex;align-items:center} .hm-links a span{color:var(--vermilion-text);font-weight:700;margin-left:6px} /* JP TYPOGRAPHY (design-system corrections) — pretty wraps on flowing body copy; table cells never force horizontal scroll. */ .pg-body,.pg-faq p,.pg-scope-list li{text-wrap:pretty} .pg-doc-table td{overflow-wrap:anywhere} .pg-hero{padding-block:40px 32px} .pg-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.4;letter-spacing:.01em;color:var(--ink);margin-top:16px;text-wrap:balance} .pg-lead{font-family:var(--font-accent);font-weight:500;font-size:clamp(15px,1.8vw,18px);line-height:1.8;color:var(--ink);margin-top:14px;max-width:42em} .pg-br-d{display:none} @media (min-width:640px){.pg-br-d{display:inline}} .pg-sec{padding-block:var(--band)} .pg-sub{margin-top:var(--sec)} .pg-sec-alt{background:var(--card);border-block:1px solid var(--line)} .pg-sec > .wrap > .sec-head:only-child{margin-bottom:0} .pg-sec:has(> .wrap > .sec-head:only-child){padding-bottom:var(--head)} .pg-sec + .norikae{margin-top:var(--band)} /* note panels inside a channel-page chapter get more room than the 診療案内 lane cards; the 4px spine + 40px 体/心 head stay reserved for those two lanes. */ .pg-sec .care-card,.pg-sub .care-card{max-width:var(--measure-wide);padding:22px 24px 22px 26px} .pg-sec .care-card::before{width:3px} .pg-body{font-size:var(--t-body);line-height:1.9;color:var(--ink);margin-bottom:12px;max-width:42em} .pg-body:last-child{margin-bottom:0} .pg-check-list{list-style:none;display:grid;gap:8px;margin:16px 0;max-width:32em} .pg-check-list li{font-size:14px;line-height:1.7;padding-left:18px;position:relative;color:var(--ink)} .pg-check-list li::before{content:"";position:absolute;left:2px;top:.85em;width:8px;height:1.5px;background:var(--ink-2)} .pg-steps{list-style:none;display:grid;gap:20px;counter-reset:none;max-width:640px} .pg-steps li{display:flex;gap:16px;align-items:flex-start} .pg-step-n{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink)} .pg-steps h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px} .pg-steps p{font-size:14px;line-height:1.8;color:var(--ink-2)} .pg-doc-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)} .pg-doc-table{width:100%;border-collapse:collapse;min-width:560px} .pg-doc-table th,.pg-doc-table td{border-bottom:1px solid var(--line);padding:14px 16px;text-align:left;font-size:14px;vertical-align:top} .pg-doc-table thead th{font-family:var(--font-display);font-weight:700;font-size:var(--t-cap);color:var(--ink);background:var(--paper)} .pg-doc-table tbody tr:last-child td{border-bottom:0} .pg-doc-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap;display:table-cell} .cell-k{display:inline-flex;align-items:center;gap:8px} /* AA FIX (launch blocker) — white glyph on #F0533A must be >=19px (styles.css:410 ORANGE floor). */ .pg-mini-glyph{width:32px;height:32px;font-size:19px;padding:2px} .pg-mini-glyph::after{width:2px;height:4px} .pg-doc-notes{list-style:none;margin-top:16px;display:grid;gap:6px;max-width:42em} .pg-doc-notes li{font-size:var(--t-sub);color:var(--ink-2);padding-left:1.2em;text-indent:-1.2em} .pg-doc-notes li::before{content:"・";color:var(--ink-2)} .pg-doc-notes a{color:var(--vermilion-text);text-decoration:underline} /* MOBILE TABLES — stacked rows below 640px, no sideways drag. data-l attributes on every body cell of every .pg-doc-table carry the column label into the ::before content. */ @media (max-width:639px){ .pg-doc-table td:first-child{white-space:normal;display:block} .pg-doc-table{min-width:0} .pg-doc-table thead{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden} .pg-doc-table tr{display:block;border-bottom:1px solid var(--line);padding:14px 16px} .pg-doc-table tbody tr:last-child{border-bottom:0} .pg-doc-table td{display:block;border:0;padding:0 0 6px} .pg-doc-table td:first-child{font-family:var(--font-display);font-weight:700;font-size:var(--t-h4)} .pg-doc-table td:not(:first-child)::before{content:attr(data-l) "　";color:var(--steel-text);font-weight:700;font-size:var(--t-cap)} } .pg-scope-list{list-style:none;display:grid;gap:10px;max-width:42em} .pg-scope-list li{font-size:14px;line-height:1.8;color:var(--ink);padding-left:18px;position:relative} .pg-scope-list li::before{content:"";position:absolute;left:2px;top:.85em;width:8px;height:1.5px;background:var(--ink-2)} .pg-faq-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:760px} .pg-faq{background:var(--card);padding:0} .pg-faq summary{cursor:pointer;font-weight:600;font-size:var(--t-sub);color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;min-height:56px} .pg-faq summary::-webkit-details-marker{display:none} .pg-faq summary::after{content:"+";flex:none;font-size:18px;color:var(--ink-2);font-weight:400} .pg-faq[open] summary::after{content:"−"} .pg-faq p{font-size:14px;line-height:1.85;color:var(--ink-2);margin-top:0;padding:0 18px 16px} .pg-faq p a{color:var(--vermilion-text);text-decoration:underline} .pg-updated{padding-block:16px 32px;text-align:center;font-size:12px;color:var(--ink-2)} .c-nai-glyph{background-color:var(--vermilion) !important;border-color:var(--vermilion) !important} .c-shin-glyph{background-color:var(--ink) !important;border-color:var(--ink) !important} /* BLOCK: .pg-seikatsu — 進む道すじ / お薬について (merged from the GLP-1 playbook; 病名ベース, no product names) */ .pg-paths{list-style:none;counter-reset:p;display:grid;gap:10px;max-width:760px} .pg-paths li{counter-increment:p;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 14px 50px;position:relative;font-size:var(--t-sub);line-height:1.85;color:var(--ink)} .pg-paths li::before{content:counter(p);position:absolute;left:14px;top:15px;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:var(--radius);font-family:var(--font-body);font-feature-settings:'tnum';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center} .pg-paths b{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:2px} .pg-policy{max-width:760px;margin-top:20px;border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:var(--radius);background:var(--card);padding:14px 18px;font-size:var(--t-sub);line-height:1.9} /* --------------------------------------------------------- BLOCK: .pg-doc-page — the DOCUMENT template (/shisetsu-kijun.html, /privacy.html). No hero, no plate glyph, no photo, no .kicker, no .pg-sec-alt alternation, no .close-cta, no .norikae, no .mnav, no card fill on tables, no min-width forcing a horizontal scroll. Vermilion appears only in the header brand, the header call button and the footer. This template exists so the next legal notice arrives already designed instead of wearing a marketing hero. --------------------------------------------------------- */ .pg-doc-page main{background:var(--paper)} .pg-doc-head{border-top:1px solid var(--ink);margin-top:8px;padding-top:18px} .pg-doc-page h1{font-family:var(--font-display);font-weight:700;font-size:var(--t-h2);color:var(--ink);letter-spacing:.01em} .pg-doc-page section{padding-block:var(--sec)} .pg-doc-page h2{font-size:var(--t-h3);color:var(--ink);margin-bottom:12px} .pg-doc-page .doc-col{max-width:var(--measure);font-size:var(--t-note);line-height:1.9;color:var(--ink-2)} .pg-doc-page table{width:100%;border-collapse:collapse;min-width:0} .pg-doc-page th,.pg-doc-page td{border-bottom:1px solid var(--line);padding:12px 0;text-align:left;font-size:var(--t-note);vertical-align:top} /* ========================================================================= BLOCK: .pg-seikatsu v2 — 2026-09-24「clean・simple」pass. APPEND-ONLY. このページの活字は5段＋クローム1段。6段目を作らないこと。 COPY h1 clamp(28px,4vw,44px) .pg-plate h1 h2 var(--t-h2) .sec-title h3 var(--t-h3) 20px .pg-sub · .pg-hinge h3 · .care-card h3 body var(--t-body) 16px .pg-body · .ps-k · モバイル表のキー列 small var(--t-sub) 14px 表の本文セル · .pg-doc-notes · .pg-scope-list · FAQ · .pg-policy · .ps-v · .ps-def · .pg-acts CHROME（ラベルと日付。ラベルは中身と同じ号数にしない） chrome var(--t-cap) 12px .pg-crumb · .pg-updated · 表の列ラベル（thead th と縦積みの td::before の両方） 本文に 11/13/15/17/18 は無い。style 属性に font-size を書かない。 出荷ゲート：このページの本文を font-size:1[35]px で grep → 0件。 未指定だった3つのサイズをここで閉じる： (a) .pg-sub はリポジトリのどこにも font-size が無かった（pages.css:108 は margin-top のみ、 styles.css:61 は family/weight/line-height のみ、素の h3 規則は存在しない）。 結果、章内の4つの見出しが UA 既定 ≈18.72px で刷られ、直上のカード見出し 20px と 1.3px ずれていた。「文字サイズが揃っていない」の最大の原因。 (b) .pg-lead（pages.css:103）は clamp の床 15px に張り付き、375px では本文より1段小さい。 (c) モバイル表のキー列は var(--t-h4) 15px（pages.css:155）。 ページ限定にしてある：(a)(b) は hataraku・hajimete・404 も同じだが、今日見ていない 3ページを組み直さない。グローバル修正はコミットメッセージに次の1行として記録する。 ========================================================================= */ /* 1. 活字の梯子 */ .pg-sec h3,.pg-band h3,.pg-sub{font-size:var(--t-h3);line-height:1.5} /* site-wide 2026-09-24: was unset (UA 18.72px) on every channel page */ .pg-lead{font-size:clamp(16px,1.8vw,18px)} .pg-doc-notes li{font-size:var(--t-sub)} /* 列ラベルはクローム。>=640px の thead も、<640px の ::before（pages.css:156、無変更）も 同じ 12px。14px にすると「ラベルが中身と同じ号数」になり、階層が weight と色だけになる。 */ .pg-doc-table thead th{font-size:var(--t-cap)} /* C-A: column labels one size everywhere (12px chrome); revert to 14px here if it reads too small */ @media (max-width:639px){ .pg-seikatsu .pg-doc-table td:first-child{font-size:var(--t-body)} } /* 2. D3 — 区分のものさし。表ではなく定義リスト。 外枠なし・角丸なし・thead なし・data-l なし・min-width なし・639px の縦積み規則なし。 もともと表ではないのでメディアクエリが要らず、320 と 1440 で同じ形に組まれる。 C・D を強調しない——どちらを持って来た読者かはページに分からない。 */ .pg-scale{max-width:var(--measure-wide);margin-top:16px} .ps-row{display:grid;grid-template-columns:2.5em minmax(0,1fr);gap:12px; border-top:1px solid var(--line);padding-block:12px} .ps-row:last-child{border-bottom:1px solid var(--line)} .ps-k{font-family:var(--font-display);font-weight:700;font-size:var(--t-body); line-height:1.6;color:var(--ink)} .ps-v{font-size:var(--t-sub);line-height:1.8;color:var(--ink);overflow-wrap:anywhere} .ps-def{display:block;margin-top:4px;font-size:var(--t-sub);line-height:1.8; color:var(--ink-2);text-wrap:pretty} /* 3. CH.2 — 章そのものが帯。 カスケード注記：.pg-band--chapter .wrap は (0,2,0) で pages.css:54 の .pg-band .wrap と >=768px の .pg-band .wrap（:55）と同じ詳細度。メディアクエリは詳細度を足さない。 この規則が勝つのは「同じファイルの後ろにある」からだけ。並べ替えるなら .pg-band.pg-band--chapter .wrap (0,3,0) に書き直すこと。 角印（.pg-band::before top:-12px;left:24px）には触らない。 */ .pg-band--chapter{padding-block:var(--band)} .pg-band--chapter .wrap{display:block;padding-block:0} /* 4. 図のスロット — 1ユーザー単位 ＝ 1CSSpx。 どの図も CSS の max-width（px）が viewBox の幅と等しく、aspect-ratio は viewBox の比と 等しい（塗る前に箱が確保される＝CLS 0）。図は「決まった大きさで刷られた案内板」であって、 器に合わせて伸びるグラフィックではない。伸ばした瞬間に図の中の文字だけが本文より大きくなる ——退役した .rt（240幅を 420px で描画＝×1.75、12px の番号が 21px で刷られていた）がその実例。 272 ＝ 320px 端末の本文幅（styles.css:73 .wrap padding 24px×2）。327（375px 端末の本文幅）に しないのは、327 だと 320px 端末で 0.832 倍になり 14単位が 11.65px＝12px 下限を割るため。 .pg-fig は総称：次にどの診療案内ページへ図を足すときもこの法則を継承する。 */ .pg-fig{display:block;width:100%;height:auto;margin:0} .pg-fig--board{max-width:272px;aspect-ratio:272/196} .pg-fig--pace{max-width:272px;aspect-ratio:272/84;margin-top:16px} .pg-fig + .pg-body{margin-top:20px;max-width:var(--measure)} /* 図の中の文字は2種類だけ、どちらもページのトークン。11/12/13/15/19 は入れない。 どちらの図にもディスクの中の文字が無いので 19px の CHARACTER FLOOR は関与しない。 */ .pg-fig text{letter-spacing:.02em} .fig-lbl{font-family:var(--font-body);font-weight:400;font-size:var(--t-sub);fill:#4B4B55} .fig-val{font-family:var(--font-display);font-weight:700;font-size:var(--t-body);fill:#17171C} /* 5. D4 — ヒンジ（組版）。 1px のヘアライン、体|心 の印、h3、本文2行。カードなし・地色なし・緑なし （--plant / --plant-tint / --plant-line / .safety-line いずれも使わない）・ 2つめの .pg-band なし・印に新クラスを作らない。.hinge-mark は hataraku のものを そのまま再利用＝これで両方の字が同じ 40px になる（旧カードは 40px の体に 32px の .pg-mini-glyph の心が並んでいた）。 このページに緑の面は残らないので「受付も待合も、内科と同じです。」に戻る場所がない。 */ .pg-hinge{max-width:var(--measure-wide);margin-top:var(--sec);padding-top:var(--sec); border-top:1px solid var(--line)} .pg-hinge .hinge-mark{margin-bottom:14px} .pg-hinge h3{font-size:var(--t-h3);line-height:1.5;margin-bottom:12px} /* 6. JP 組版 — 削除する .route-legend が持っていた pretty wrap を新要素へ引き継ぐ。 */ .ps-def,.pg-hinge .pg-body{text-wrap:pretty} /* ========================================================================= MOTION — 描き込みは2本だけ。丸いものは動かない。文字も単独では動かない。 transform-box:fill-box は必須。styles.css:294 の .access-map .leg は セレクタが .access-map に限定されていて .pg-fig には届かず、アニメーター側の 規則にも transform-box は無い。これが無いと rect の scale 原点が SVG 座標系の 0,0 になり、枝も軸も画面外から伸びてくる。落とさないこと。 ========================================================================= */ .pg-fig .leg,.pg-fig .mb-spine{transform-box:fill-box} /* D1 — 幹が上から下へ 300ms、着いてから枝が左→右へ 160ms（開始 340ms）。500ms で静止。 .mb-tick は styles.css:652 の .js [data-reveal-mark] .leg を土台に、尺と遅延だけ上書き。 幹の animation:var(--rv-fail-m) は意図的（.am-sp と同じ）。rv-draw は to{transform:scaleX(1)} で、scaleY を「置き換えて」要素を可視のまま着地させる。 scaleY 版の keyframe を足して「直す」ことはしない。 */ .js .pg-fig[data-reveal-mark] .mb-spine{transform:scaleY(var(--rv-s));transform-origin:center top;transition:transform .30s var(--rv-e);animation:var(--rv-fail-m) 1ms linear 2.4s forwards} .js .pg-fig[data-reveal-mark].rv-in .mb-spine{transform:scaleY(1)} .js .pg-fig[data-reveal-mark] .mb-tick{transition-duration:.16s;transition-delay:340ms} /* 初期表示でフェードさせない。styles.css:661 は .rv-now と .rv-now .leg を止めるので .mb-tick は既に対象、.mb-spine は .leg ではないので対象外。これが無いと ファーストビューに入った案内板が冷間ロードで幹だけアニメーションする。 site.js は観測ノード自身（=）に .rv-now を付けるので複合セレクタで書く。 */ .js .rv-now.pg-fig .mb-spine{transition:none!important} /* D2 の軸は class="leg" だけ＝RULE プリミティブそのまま（左→右、--rv-r、+80ms）。 時間が走る向きに時間を描く。追加規則なし。 */ /* 印刷：styles.css:695 は [data-reveal-mark] .leg しか戻さないので、scaleY の幹が 取り残される（枝4本と軸だけ印刷される案内板になる）。ページ限定でここに置く—— 共有の styles.css の print ブロックに1ページ用セレクタを入れない。 */ @media print{.pg-fig .mb-spine{transform:none!important}} /* prefers-reduced-motion は追加規則不要：styles.css:706 で --rv-s:1 となり scaleY(var(--rv-s)) がそのまま終状態、加えて *,*::before,*::after の kill が効く。 */ /* ========================================================================= PHONES (<768px) — mobile pass 2026-09-25 (docs-internal/mobile-review/spec.md). APPEND-ONLY. ========================================================================= */ @media (max-width:767px){ /* cards that sit directly in
take the page gutter (they ran edge to edge on the screen) */ main > .norikae,main > .hours-mini{margin-inline:24px} .pg-404 .norikae{margin-top:24px} /* one call button per screen: the bar is up wherever .hours-mini is; the link stays in the DOM (tel: count holds) */ .hm-call{display:none} /* 44px targets */ .pg-crumb a{padding-inline:4px;margin-inline:-4px} /* marks: the 60px corner met the kicker / the 体 glyph on the 24px phone gutter; dashes on whole pixels */ .pg-band::before{width:40px;height:40px} .pg-check-list li::before,.pg-scope-list li::before{height:2px} /* headings never sit on their content */ .pg-sec .wrap > h3{margin-bottom:12px} .pg-sec .wrap > h3 + .pg-scale,.pg-sec .wrap > h3 + .pg-fig{margin-top:0} .pg-band--hinge .hinge-mark{margin-bottom:16px} .pg-band--hinge h3{margin-bottom:12px} .pg-hajimete .pg-sec h2{margin-bottom:24px} /* this page's h2s are bare (no .sec-head); 24 = .sec-head on phones */ /* document pages: 13px is band/footer-only on the ladder; one size with .kijun-body, and air between paragraphs */ .pg-doc-page .doc-col{font-size:var(--t-sub)} .pg-doc-page .doc-col p + p,.pg-doc-page .doc-col ul + p{margin-top:12px} } @media (max-width:767px){ .pg-sec:not(.pg-sec-alt) + .norikae{margin-top:0} /* paper chapter → paper card: the chapter's 48px is enough (was 96px of blank) */ .nk-row{min-height:56px} .pg-faq summary{text-wrap:pretty} .pg-404 .pg-doc-head{margin-top:24px} /* the notice's bottom line and the ink rule no longer read as a double rule */ } @media (max-width:639px){ .pg-doc-table td:first-child{font-size:var(--t-body)} /* one key size on both channel pages (seikatsu already 16) */ .pg-seikatsu .pg-doc-table td:not(:first-child)::before{content:none} /* two-column table: 「診察で行うこと」 x7 is noise under the h3 */ .pg-hataraku .pg-doc-table td:not(:first-child){display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:8px;align-items:baseline} /* labels in a column, values hang — no orphans under the label */ } /* 院内掲示ページの料金表（2026-10-07）：金額は折り返さず桁をそろえる。hataraku の診療時間カードの一行メモ。 */ .pg-doc-page td.yen{white-space:nowrap;font-variant-numeric:tabular-nums;padding-inline:12px} .pg-doc-page .kijun-title + table{margin-bottom:24px} /* three price tables share one column grid so 金額 and 備考 line up from table to table */ #hiyou table{table-layout:fixed} #hiyou th:nth-child(2),#hiyou td:nth-child(2){width:7.5em} #hiyou th:nth-child(3),#hiyou td:nth-child(3){width:12em} #hiyou .kijun-title{margin-top:20px} @media (max-width:639px){#hiyou th:nth-child(2),#hiyou td:nth-child(2){width:6.5em}#hiyou th:nth-child(3),#hiyou td:nth-child(3){width:5.5em}} .hm-note{font-size:var(--t-note);color:var(--ink-2)}