/* 2026-09-26 下層ページ試作（redesign）。トップ（redesign.css）と同じ見た目の言葉を、共通テンプレート （article-hero / article-layout / article-body / article-sidebar / article-cta / 料金表）に広げる。 読み込むのはトップと問診票（contact）以外の全ページ（全言語）。仕様は /DESIGN.md ・色は深緑 #153e35 の1色。金色は塗り・線に使わない（フォーカス枠だけ site.css の値を残す） ・角ゼロ・影なし・罫線とリストで区切る ・日本語ページは端末の書体（Webフォントなし）。他言語は各言語の書体設定（site.css）のまま */ :root{ --rd-green:#153e35;--rd-green-hover:#245b4d;--rd-ink:#1d2b27;--rd-muted:#55635e;--rd-line:#dde4e0;--rd-line-2:#cfd9d3;--rd-bg:#fff;--rd-soft:#f2f5f3;--rd-off:#8d9a94; --rd-mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho",YuMincho,"Noto Serif JP","Noto Serif CJK JP",serif; --rd-gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",YuGothic,"Noto Sans JP","Noto Sans CJK JP",Meiryo,sans-serif; --rd-latin:"Hiragino Sans","Helvetica Neue",Arial,sans-serif; --ink:var(--rd-ink);--muted:var(--rd-muted);--line:var(--rd-line);--line-2:var(--rd-line-2);--soft:var(--rd-soft); --gold:var(--rd-green);--gold-light:var(--rd-line-2); /* 旧テンプレートの金色の線・文字を深緑系に寄せる（フォーカス枠 --gold-focus は残す） */ } html[lang=ja]{--serif:var(--rd-mincho);--sans:var(--rd-gothic);--display:var(--rd-latin)} html:not([lang=ja]){--display:var(--rd-latin)} body{color:var(--rd-ink);background:var(--rd-bg)} html[lang=ja] body{letter-spacing:.04em;line-break:strict} html[lang=ja] main h1,html[lang=ja] main h2,html[lang=ja] main h3,html[lang=ja] main h4{font-feature-settings:"palt";word-break:auto-phrase} main h1,main h2,main h3,main h4{text-wrap:balance} main p,main li,main dd,main td{text-wrap:pretty} .progress{background:var(--rd-green)} .nav-inner>a:hover{color:var(--rd-green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em} .languages a[aria-current]{text-decoration-color:var(--rd-green)} /* ── ボタン（角ゼロ・影なし・押すと1pxだけ沈む） ── */ main .button{min-height:52px;padding:13px 28px;letter-spacing:.06em;transition:background-color .2s ease,color .2s ease,transform .1s ease} main .button:active{transform:translateY(1px)} main .button.light{background:transparent;color:var(--rd-green);border-color:var(--rd-green)} main .button.light:hover{background:var(--rd-green);color:#fff} main .button.gold{background:var(--rd-green);border-color:var(--rd-green);color:#fff} main .button.gold:hover{background:var(--rd-green-hover)} .arrow{font-family:var(--rd-latin)} /* ── ページの題（濃い緑の全幅帯をやめ、白地に明朝の題と罫線） ── */ .article-hero{background:var(--rd-bg);color:var(--rd-ink);padding:72px 0 40px;border-bottom:1px solid var(--rd-line)} .article-hero h1{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.5;letter-spacing:.08em;font-weight:500;color:var(--rd-ink)} .article-hero .eyebrow{display:block;font:400 .875rem/1.6 var(--sans);letter-spacing:.06em;color:var(--rd-muted);margin-bottom:14px} .article-hero p{max-width:38em;color:var(--rd-muted);line-height:1.95;margin-top:16px} .article-hero p .button{margin-top:16px} .breadcrumb{font-size:.8125rem;color:var(--rd-muted);padding-block:18px 0} .breadcrumb a{color:var(--rd-muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em} .breadcrumb a:hover{color:var(--rd-green)} /* ── 本文と目次の2段 ── */ .article-layout{grid-template-columns:minmax(0,1fr) 248px;gap:88px;padding-top:56px;padding-bottom:112px} .article-body{font-size:1rem} .article-body [id]{scroll-margin-top:8rem} /* 見出し：英字の添え書き（span.en）は出さない。題の上に罫線1本 */ .article-body h3 .en{display:none} .article-body>h2,.article-body>h3{font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.6;letter-spacing:.06em;font-weight:500;border-top:1px solid var(--rd-line);padding-top:48px;margin:72px 0 28px;color:var(--rd-ink)} .article-body>h2:first-child,.article-body>h3:first-child{margin-top:0} .article-body>h2:first-child,.article-body>h3:first-child{border-top:0;padding-top:0} .article-body h3:not(.article-body>h3),.article-body>h2~h3{font-size:1.25rem;letter-spacing:.04em;border-top:0;padding-top:0;margin:40px 0 12px} .article-body>h2+h3{margin-top:24px} .article-body h4{font-family:var(--serif);font-size:1.125rem;font-weight:500;line-height:1.7;letter-spacing:.04em;color:var(--rd-ink);margin:32px 0 10px;padding:0;border:0} .article-body h5{font-size:1rem;margin:24px 0 8px} /* 本文：16px / 1.95、1行 38〜43字 */ .article-body p{max-width:40em;line-height:1.95;margin:0 0 20px} .article-body strong,.article-body .bold{font-weight:500;color:var(--rd-ink)} .article-body>p:first-child strong:only-child{display:block;font-family:var(--serif);font-size:1.1875rem;line-height:1.85;letter-spacing:.05em;padding-bottom:28px;margin-bottom:8px;border-bottom:1px solid var(--rd-line)} .article-body a:not(.button){color:var(--rd-green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em} .article-body a:not(.button):hover{text-decoration-thickness:2px} .article-body hr{border:0;border-top:1px solid var(--rd-line);margin:40px 0} .article-body .section{margin-bottom:24px} /* 写真：角ゼロ。回り込みの写真は少し小さく、周りに余白 */ .article-body .image_r{max-width:40%;margin:4px 0 28px 40px} .article-body .image_l{max-width:40%;margin:4px 40px 28px 0} .article-body .image_r img,.article-body .image_l img,.article-body .image_full img,.article-body .center img{background:var(--rd-soft)} .article-body .section_h4 h4{margin-top:0} .article-body .section_h4{padding-bottom:28px;border-bottom:1px solid var(--rd-line);margin-bottom:28px} .article-body .center{font-size:.8125rem;color:var(--rd-muted);line-height:1.8} .article-body .center img{margin:0 auto 12px} /* 箇条書き：点ではなく、行ごとの罫線。続けて置かれた ul は1つの表のようにつなげる */ .article-body ul:not([class]),.article-body .caselist ul{list-style:none;padding:0;margin:24px 0;max-width:44em;border-top:1px solid var(--rd-line)} .article-body ul:not([class]):has(+ul:not([class])){margin-bottom:0} .article-body ul:not([class])+ul:not([class]){margin-top:0;border-top:0} .article-body ul:not([class])>li,.article-body .caselist li{position:relative;margin:0;padding:14px 0 14px 26px;border-bottom:1px solid var(--rd-line);line-height:1.9} .article-body ul:not([class])>li::before,.article-body .caselist li::before{content:"";position:absolute;left:2px;top:calc(14px + .95em);width:10px;height:1px;background:var(--rd-green)} .article-body ol:not([class]){padding-left:1.6em;margin:24px 0;max-width:44em} .article-body ol:not([class])>li{margin:0;padding:8px 0 8px 6px;line-height:1.9} .article-body ol:not([class])>li::marker{font-family:var(--rd-latin);color:var(--rd-green);font-variant-numeric:tabular-nums} /* 表：縦罫・塗りをやめ、横の罫線だけ。数字は等幅 */ .article-body table{font-size:.9375rem;line-height:1.8;font-variant-numeric:tabular-nums;border-top:1px solid var(--rd-line-2)} .article-body td,.article-body th{padding:14px 16px 14px 0;border:0;border-bottom:1px solid var(--rd-line);text-align:left;vertical-align:top} .article-body th{background:transparent;font-weight:500;color:var(--rd-muted)} .article-body .deep-table{font-size:.9375rem;line-height:1.8;margin:0 0 24px;border-top:1px solid var(--rd-line-2)} .article-body .deep-table th,.article-body .deep-table td{border-top:0;border-bottom:1px solid var(--rd-line);padding:14px 20px 14px 0} .article-body .deep-table thead th{background:transparent;color:var(--rd-muted);font-size:.8125rem;letter-spacing:.06em;padding-block:12px;border-bottom:1px solid var(--rd-line-2)} .article-body .deep-table tbody td:first-child{color:var(--rd-green);white-space:nowrap} .article-body .deep-table tbody td:first-child:not(:only-child){min-width:4.5em} .article-body .table-scroll,.article-body .tb_scroll{margin-bottom:24px} .article-body .table-scroll .tb_scroll{margin-bottom:0} /* 診療時間の表（トップと同じ組み方）。休診の「—」は薄く */ .hours{border-top:1px solid var(--rd-line);font-size:.875rem;margin:8px 0 0;max-width:40em} .hours caption{font-family:var(--serif);font-weight:500;font-size:1.0625rem;margin-bottom:12px;text-align:left} .article-body .hours th,.article-body .hours td{padding:13px 6px;text-align:center;border-bottom:1px solid var(--rd-line)} .article-body .hours thead th{color:var(--rd-muted);font-weight:500} .article-body .hours tbody th{font-family:var(--rd-latin);font-weight:400;color:var(--rd-ink);white-space:nowrap} .article-body .hours td{color:var(--rd-green)} .article-body .hours td[aria-label="休診"]{color:var(--rd-off)} .hours-note{font-size:.875rem;color:var(--rd-muted);margin:16px 0 24px} .article-body .gg_map iframe{display:block;width:100%;aspect-ratio:4/3;height:auto;max-height:480px;border:0;background:var(--rd-soft)} .article-body .gg_map{margin-bottom:24px} /* 図・写真の一覧：角ゼロ、枠は1px */ .article-body .deep-figure img{border:1px solid var(--rd-line);border-radius:0} .article-body .deep-figure figcaption,.fee-shots figcaption{font-size:.8125rem;line-height:1.7;color:var(--rd-muted)} .article-body .course-gallery{margin:48px 0 56px;padding-top:24px;border-top:1px solid var(--rd-line)} .article-body .course-gallery .gallery-title{font-size:.875rem;color:var(--rd-ink)} .article-body .course-gallery .gallery-title span{color:var(--rd-muted)} .fee-shots{gap:24px 18px} .fee-shots a{border-radius:0} .fee-shots img{border-radius:0;border-color:var(--rd-line)} .fee-shots figcaption{margin-top:8px} /* 引用・補足 */ .article-body blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:1px solid var(--rd-green);background:transparent;border-radius:0} .article-summary{background:transparent;border:0;border-top:1px solid var(--rd-line);border-bottom:1px solid var(--rd-line);padding:28px 0} /* 検査項目の一覧 */ .exam-list{border-top:1px solid var(--rd-line-2)} .exam-list li{padding:13px 0;font-size:.9375rem} .exam-list .exam-name{font-weight:400} .exam-list .exam-method{font-size:.875rem} /* ページ内リンク（旧 btn_u の塗り箱）→ 罫線の行 */ .article-body .list_anchor{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 32px;margin:40px 0 0;padding:0;list-style:none} .article-body .btn_u{margin:0;border-top:1px solid var(--rd-line);border-bottom:1px solid var(--rd-line)} .article-body .btn_u a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;padding:16px 0;background:transparent;border:0;color:var(--rd-green);text-decoration:none;font-size:.9375rem} .article-body .btn_u a::after{content:"→";font-family:var(--rd-latin);transition:transform .2s ease} .article-body .btn_u a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em} .article-body .btn_u a:hover::after{transform:translateX(3px)} /* 治療ページ末尾の「期間・回数・費用・リスクについて → 料金表」（必ず残すリンク）を独立した1行に */ .article-body .price-note,.contact-fees-link{max-width:none;margin:48px 0 0;padding:0;font-size:1rem} .article-body .price-note a{display:flex;align-items:center;min-height:64px;padding:18px 0;border-top:1px solid var(--rd-green);border-bottom:1px solid var(--rd-green);text-decoration:none;color:var(--rd-green)} .article-body .price-note a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em} /* あわせてお読みください：塗り箱→罫線の行 */ .article-related{background:transparent;padding:0;margin-top:64px} .article-related h2{font:500 1.0625rem/1.7 var(--serif);letter-spacing:.06em;margin:0 0 14px;color:var(--rd-ink)} .article-related a{display:flex;align-items:center;min-height:52px;margin:0;padding:12px 0;border-top:1px solid var(--rd-line);color:var(--rd-green);text-decoration:none;font-size:.9375rem} .article-related a:last-child{border-bottom:1px solid var(--rd-line)} .article-related a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em} /* 目次（右の列） */ .article-sidebar{top:170px} .article-sidebar h2{font:500 .8125rem/1.6 var(--sans);letter-spacing:.06em;color:var(--rd-muted);margin-bottom:12px} .article-sidebar ol{border-top:1px solid var(--rd-line-2);margin-bottom:28px} .article-sidebar li a{padding:12px 0;font-size:.8125rem;line-height:1.7;color:var(--rd-ink)} .article-sidebar li a:hover{color:var(--rd-green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em} .article-sidebar ol:empty{display:none} .article-sidebar h2:has(+ol:empty){display:none} .article-sidebar .button{min-height:52px} /* ページ末のご相談：淡色の帯→上に罫線1本の白地 */ .article-cta{background:var(--rd-bg);padding:88px 0 104px;border-top:1px solid var(--rd-line)} .article-cta h2{font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.6;letter-spacing:.06em} .article-cta p{color:var(--rd-muted);line-height:1.95;margin-top:12px} /* ── 料金表：金額・注記・表は一字一句そのまま。組み方だけ ── */ .fees-wrap{max-width:1040px;padding:48px 0 112px} .fees-intro{max-width:40em;line-height:1.95;color:var(--rd-ink);margin-bottom:56px} .fees-section{margin:0 0 72px} .fees-section h2{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:.06em;color:var(--rd-ink);margin:0 0 20px;padding-top:32px;border-top:1px solid var(--rd-line)} .fees-section:first-of-type h2{border-top:0;padding-top:0} .fee-table{font-size:.9375rem;line-height:1.8;font-variant-numeric:tabular-nums;border-top:1px solid var(--rd-line-2)} .fee-table th,.fee-table td{border-top:0;border-bottom:1px solid var(--rd-line);padding:16px 16px 16px 0} .fee-table thead th{background:transparent;color:var(--rd-muted);font-size:.8125rem;letter-spacing:.06em;padding-block:12px;border-bottom:1px solid var(--rd-line-2)} .fee-table tbody th{font-family:var(--serif);font-weight:500;font-size:1rem;letter-spacing:.04em} .fee-table tbody td:nth-child(2){font-family:var(--rd-latin);font-weight:400;font-size:1rem;color:var(--rd-green);letter-spacing:.02em} html:not([lang=ja]) .fee-table tbody td:nth-child(2){font-family:inherit} .fee-table tr:has(+tr.fee-photos)>*{border-bottom:0} .fee-table tr.fee-photos td{padding:0 0 28px;border-bottom:1px solid var(--rd-line)} .fee-exams{font-size:.875rem;line-height:1.9;color:var(--rd-muted);max-width:60em} .fee-exams strong{color:var(--rd-ink)} .fee-exams a,.fees-wrap a:not(.button){color:var(--rd-green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em} .fees-notes{list-style:none;padding:0;margin:20px 0 0;font-size:.875rem;line-height:1.85;color:var(--rd-muted);max-width:48em} .fees-notes li{position:relative;padding-left:20px;margin:4px 0} .fees-notes li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:1px;background:var(--rd-muted)} .plans{gap:0 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));border-top:1px solid var(--rd-line-2);margin-top:4px} .plan{border:0;border-radius:0;padding:24px 0 20px;background:transparent;border-bottom:1px solid var(--rd-line)} .plan:hover{transform:none;box-shadow:none} .plan-num{font:400 .875rem/1.4 var(--rd-latin);font-style:normal;color:var(--rd-green);letter-spacing:.04em} .plan h3{font-family:var(--serif);font-size:1.125rem;letter-spacing:.04em;margin-top:6px} .plan-price{font-family:var(--rd-latin);font-size:1.75rem;letter-spacing:.01em;font-variant-numeric:tabular-nums;margin:16px 0 6px} html:not([lang=ja]) .plan-price{font-family:var(--display)} .plan-price small{font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;text-transform:none;color:var(--rd-muted)} .plan-for{font-size:.875rem} .plan h4{font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;text-transform:none;margin:16px 0 4px} .plan li{padding:8px 0 8px 18px;font-size:.875rem;font-variant-numeric:tabular-nums} .plan li::before{left:0;top:calc(8px + .8em);width:8px;height:1px;border-radius:0;background:var(--rd-green)} .fees-wrap>.actions,.fees-wrap .actions{display:flex;flex-wrap:wrap;gap:12px} /* ── 控えめな出現（pages.js が画面の外の塊にだけ付ける。JSなし・動きを減らす設定では最初から表示） ── */ .js .rd-reveal{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease} .js .rd-reveal.is-in{opacity:1;transform:none} /* タブレット */ @media(max-width:1150px){ .article-layout{grid-template-columns:minmax(0,1fr) 210px;gap:48px} } /* スマホ */ @media(max-width:800px){ .article-hero{padding:40px 0 28px} .article-hero h1{font-size:clamp(1.5rem,6.6vw,1.875rem);letter-spacing:.06em} .breadcrumb{padding-top:14px} .article-layout{padding-top:28px;padding-bottom:72px;gap:40px} /* 目次は本文の上。塗りをやめて罫線で囲む */ .article-sidebar{background:transparent;padding:16px 0 12px;border-top:1px solid var(--rd-line-2);border-bottom:1px solid var(--rd-line-2)} .article-sidebar h2{margin-bottom:4px} .article-sidebar ol{display:flex;flex-wrap:wrap;gap:0 22px;border-top:0;margin-bottom:0} .article-sidebar li{border:0} .article-sidebar li a{display:inline-flex;align-items:center;min-height:40px;padding:6px 0;color:var(--rd-green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em} .article-sidebar:has(ol:empty){display:none} .article-body>h2,.article-body>h3{font-size:1.3125rem;margin-top:56px;padding-top:36px} .article-body h3:not(.article-body>h3),.article-body>h2~h3{font-size:1.125rem;margin-top:32px;padding-top:0} .article-body>p:first-child strong:only-child{font-size:1.0625rem} .article-body p,.article-body li{font-size:.9375rem} .article-body .image_r,.article-body .image_l{max-width:100%;margin:0 0 24px} .article-body .deep-table{font-size:.875rem} .article-body .deep-table tbody td:first-child{white-space:normal} .article-body .hours{font-size:.8125rem} .article-body .hours th,.article-body .hours td{padding-inline:3px} .article-body td,.article-body th{padding-right:12px} .article-body .tb_block tr{margin-bottom:0;border-bottom:1px solid var(--rd-line)} .article-body .tb_block th{padding:14px 0 2px;border:0} .article-body .tb_block td{padding:0 0 14px;border:0} .article-related{margin-top:48px} .article-body .price-note{margin-top:40px} .article-cta{padding:64px 0 72px} .article-cta .actions{display:grid;grid-template-columns:1fr;gap:10px} .article-cta .actions .button{width:100%} .fees-wrap{padding:32px 0 72px} .fees-intro{margin-bottom:40px} .fees-section{margin-bottom:56px} .plan-price{font-size:1.5rem} } @media(max-width:640px){ /* 料金表はスマホで行ごとの縦組み（site.css）。角丸の箱をやめて罫線で区切る */ .fee-table{border-top:1px solid var(--rd-line-2)} .fee-table tr{border:0;border-bottom:1px solid var(--rd-line);border-radius:0;padding:18px 0;margin:0;background:transparent} .fee-table tr:has(+tr.fee-photos){border-bottom:0;border-radius:0;padding-bottom:6px} .fee-table tr.fee-photos{border-radius:0;padding:0 0 22px;border-bottom:1px solid var(--rd-line)} .fee-table tr.fee-photos td{border:0;padding:0} .fee-table tbody th{font-size:1.0625rem;color:var(--rd-ink);margin-bottom:10px} .fee-table td{margin-bottom:10px} .fee-table td:last-child{margin-bottom:0} .fee-table td::before{font-size:.75rem;color:var(--rd-muted)} .fee-table th,.fee-table td{border:0;padding:0} } @media(prefers-reduced-motion:reduce){ .js .rd-reveal{opacity:1;transform:none;transition:none} } @media print{ .js .rd-reveal{opacity:1;transform:none} .article-hero{border:0;padding:0 0 16px} } /* 他言語：英数字用の --rd-latin を各言語の書体に（Mac/iOSで Hiragino の全角キリル文字になるのを防ぐ）2026-09-27 */ html[lang=en]{--rd-latin:'Noto Sans JP','Helvetica Neue',Arial,sans-serif} html[lang=zh-Hans]{--rd-latin:'Noto Sans SC','PingFang SC','Helvetica Neue',Arial,sans-serif} html[lang=ru],html[lang=es],html[lang=fr],html[lang=it],html[lang=pl],html[lang=de]{--rd-latin:'Noto Sans','Helvetica Neue',Arial,sans-serif} /* 2026-09-27 韓国語 */ html[lang=ko]{--rd-latin:'Noto Sans KR','Helvetica Neue',Arial,sans-serif} /* ── 2026-09-27 スマホの読みやすさ（下層ページ）。801px 以上（PC）の見た目は変えない ── */ @media(max-width:800px){ /* 目次「このページの内容」：5項目以上あるときは1行にたたみ、押すと開く（開閉ボタンは pages.js）。 JS が無い・:has が使えないブラウザでは、今までどおり全部を表示 */ .js .article-sidebar:has(li:nth-child(5)),.article-sidebar.toc-collapsible{padding:0} .js .article-sidebar:has(li:nth-child(5))>h2,.article-sidebar.toc-collapsible>h2{display:flex;align-items:center;min-height:52px;margin:0;font-size:.875rem;color:var(--rd-ink)} .js .article-sidebar:has(li:nth-child(5)):not(.toc-open) ol,.article-sidebar.toc-collapsible:not(.toc-open) ol{display:none} .article-sidebar.toc-open ol{padding-bottom:10px} .toc-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer} .toc-toggle::after{content:"+";margin-left:auto;padding-right:2px;font:300 1.5rem/1 var(--rd-latin);color:var(--rd-green)} .toc-toggle[aria-expanded="true"]::after{content:"−"} .toc-count{font:400 .75rem/1 var(--rd-latin);letter-spacing:.02em;color:var(--rd-muted);padding:4px 7px;border:1px solid var(--rd-line)} /* 目次のリンク：押せる高さ 44px */ .article-sidebar li a{min-height:44px} /* 目次などから飛んだ見出しを、上の固定ヘッダーのすぐ下に（今は 240px 下に止まり、見出しが画面の中ほどになる） */ .article-body [id]{scroll-margin-top:0} /* 行ごとの罫線の箇条書き（関連する技術・参考にした資料など）の先頭のリンク：押せる範囲を行の上下の余白まで広げる（見た目は変えない） */ .article-body ul:not([class])>li>a:first-child,.article-body .tb_block td>a,main .article-body .gk-table td>a:first-child{position:relative} .article-body ul:not([class])>li>a:first-child::after,.article-body .tb_block td>a::after,main .article-body .gk-table td>a:first-child::after{content:"";position:absolute;left:0;right:0;top:-15px;bottom:-15px} /* 英語などの欧文：見出しの字間を和文用（.06〜.08em）から欧文用に */ html:not([lang=ja]):not([lang=zh-Hans]):not([lang=ko]) .article-hero h1, html:not([lang=ja]):not([lang=zh-Hans]):not([lang=ko]) .article-body h2, html:not([lang=ja]):not([lang=zh-Hans]):not([lang=ko]) .article-body h3, html:not([lang=ja]):not([lang=zh-Hans]):not([lang=ko]) .article-cta h2, html:not([lang=ja]):not([lang=zh-Hans]):not([lang=ko]) main .article-body>p:first-child strong:only-child, html:not([lang=ja]):not([lang=zh-Hans]):not([lang=ko]) main .article-body .gk-voices li, html:not([lang=ja]):not([lang=zh-Hans]):not([lang=ko]) main .article-body .gk-principle, html:not([lang=ja]):not([lang=zh-Hans]):not([lang=ko]) main .article-body .gk-quote{letter-spacing:.01em} /* 技術ページの題の下のタグ・治療ページの「この治療で使う技術」：押せる高さ 44px */ main .tech-tags a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;line-height:1.3} main .tech-links.tech-links ul{gap:8px} main .tech-links.tech-links a{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;font-size:.875rem;line-height:1.45} } @media(max-width:600px){ /* 「分かること・分からないこと」などの表：1行を1つの塊にして縦に並べる。 各欄の上に列の見出し（pages.js が data-label に写す）。JS が無いときは、表の上に列の見出しを1行で出す */ main .article-body .gk-table-wrap{overflow:visible} main .article-body .gk-table:not(.gk-table--key), main .article-body .gk-table:not(.gk-table--key)>thead, main .article-body .gk-table:not(.gk-table--key)>tbody, main .article-body .gk-table:not(.gk-table--key) tr, main .article-body .gk-table:not(.gk-table--key) th, main .article-body .gk-table:not(.gk-table--key) td{display:block;width:auto;min-width:0;white-space:normal} main .article-body .gk-table:not(.gk-table--key) thead tr{display:flex;flex-wrap:wrap;column-gap:.5em;padding:10px 0;border-bottom:1px solid var(--rd-line-2)} main .article-body .gk-table:not(.gk-table--key) thead th{padding:0;border:0} main .article-body .gk-table:not(.gk-table--key) thead th+th::before{content:"／";margin-right:.5em;color:var(--rd-muted)} main .article-body .gk-table.gk-labeled>thead{display:none} main .article-body .gk-table:not(.gk-table--key) tbody tr{padding:16px 0 18px;border-bottom:1px solid var(--rd-line)} main .article-body .gk-table:not(.gk-table--key) tbody th{padding:0;border:0;color:var(--rd-ink);font-weight:500;line-height:1.8} main .article-body .gk-table:not(.gk-table--key) td{padding:10px 0 0;border:0;line-height:1.85} main .article-body .gk-table:not(.gk-table--key) td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:.75rem;font-weight:400;line-height:1.6;letter-spacing:.04em;color:var(--rd-muted)} /* 縦長の写真1枚：画面いっぱいの高さにならないように（本文の流れを切らない）。 幅は100%のまま高さだけ抑え、写真は枠の中に収める（PC の max-height:420px と同じ考え方。読み込み前後で高さが変わらない） */ main .article-body .gk-exam-photo .gk-fig img, main .article-body .gk-one .gk-fig img{max-height:380px;object-fit:contain} } @media(max-width:640px){ /* 料金表（縦に並べた表）：欄の名前を少し大きく */ .fee-table td::before{font-size:.8125rem} } /* 2026-09-27 韓国語：記事の見出しは和文用の字間を詰め、語の途中で折れないように */ html[lang=ko] .article-hero h1,html[lang=ko] main h1,html[lang=ko] main h2{letter-spacing:.02em;word-break:keep-all} /* 2026-09-27 繁体字中国語 */ html[lang=zh-Hant]{--rd-latin:'Noto Sans TC','PingFang TC','Helvetica Neue',Arial,sans-serif} /* 2026-09-27 治療ページの「この治療で使う技術」（日本語はリンクの札、他言語はリンクなしの札 li>span）。 以前は各ページの