/* ========================================================= 日本の薬価制度 解説 — stylesheet ========================================================= */ /* 配色は既定でOSの設定に従う。ヘッダーの切替ボタンを押すと その選択を localStorage に覚えて、 で上書きする。 ★暗い配色の指定は2か所にある（下の @media と :root[data-theme="dark"]）。 同じ内容なので、片方だけ直さないこと */ :root { color-scheme: light; --bg: #f7f8fa; --bg-elev: #ffffff; --bg-sunken: #eef1f5; --ink: #16202e; --ink-mid: #46556a; --ink-soft: #6b7c92; --line: #dfe4ec; --line-soft: #eaeef4; --accent: #0e6e8c; --accent-deep: #084c62; --accent-soft: #e3f1f6; --on-accent: #ffffff; /* アクセント色の上に置く文字 */ /* レーン図の帯。白文字を載せるので --ink-soft と --warn そのままだと 4.27／4.34で4.5に届かない。明るい配色だけ少し濃くする */ --lane-1: #5f7086; --lane-2: var(--accent); --lane-3: #a35a19; --accent-2: #1f8a6d; /* 立場別の「＋（追い風）」の印に使う緑。輪郭と字の両方をこの色で描くので、 --accent-2 のままだと白地に対して4.27で4.5に届かない。その分だけ濃くする */ --sign-up: #17715b; --accent-2-soft: #e2f3ed; --warn: #b5651d; --warn-soft: #fbf0e4; --danger: #b23c4a; /* 基礎的医薬品・最低薬価のような「価格を下支えする」制度の札。 引下げでも加算でもないので、レーン図と同じ青みグレーで控えめに置く */ --hold: #5f7086; --hold-soft: #eceff4; --radius: 12px; --radius-lg: 18px; --shadow-sm: 0 1px 2px rgba(16, 32, 48, .06), 0 2px 8px rgba(16, 32, 48, .04); --shadow-md: 0 2px 6px rgba(16, 32, 48, .07), 0 12px 32px rgba(16, 32, 48, .07); --sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", Meiryo, system-ui, sans-serif; /* 明朝を使うのは r8.html の見出しと図。欧文だけ Times に置き換わる （NominaTimes の実体はこのファイルの末尾の @font-face） */ --serif: "NominaTimes", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif; --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* 札の数字用。Consolas などの等幅は 0 に斜線が入って読みにくい。 札は1枚ずつ幅を決めて中央に置くので、等幅でなくても桁はそろう */ --flap-font: "Segoe UI", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif; /* 反転フラップの札。明暗どちらでも暗い札にする（これは意図した見た目） */ --flap-top: #2b3644; --flap-bot: #1c242f; --flap-ink: #f3f7fb; --flap-edge: rgba(255, 255, 255, .10); /* 使っていない桁の札。塗りだけだとカードの地色に沈むので、 形は1pxの縁で見せる（白地に対して2.94:1） */ --flap-off: #d3dae3; --flap-off-edge: #8b98a8; /* 桁の段の色（下記 .sl-digits[data-tier] から参照） */ --tier2-top: #234653; --tier2-bot: #153541; --tier3-top: #1a5568; --tier3-bot: #0d4353; --tier4-top: #0f6580; --tier4-bot: #065168; --tier5-top: #07789a; --tier5-bot: #005f7c; /* 帯は1本ずつ別の枠に入るようになったので、隣の段と見分けるためではなく 枠の地色に対して見えることを基準に選ぶ。4段とも3:1以上ある */ --fund-1: #0e6e8c; --fund-2: #2d819b; --fund-3: #4d94aa; --fund-4: #728a99; --fund-ring: rgba(16, 32, 48, .16); --wrap: 1180px; --header-h: 44px; /* 上端の帯。ヘッダそのものを濃い色で塗り、いつ時点の薬価かの札と ナビを1本にまとめている。明るい配色では --accent-deep と同じ色。 暗い配色では --accent-deep が明るい水色になってしまうので、 帯としては使えない。専用の色を別に持たせる */ --bar: #084c62; --on-bar: #ffffff; /* 帯の上の控えめな文字。color-mix で薄めると配色を切り替えたときに 計算し直されないことがあるので、明暗それぞれの値を直接持たせる */ --on-bar-dim: rgba(255, 255, 255, .88); --bar-line: rgba(255, 255, 255, .16); --bar-soft: rgba(255, 255, 255, .15); --bar-mark: rgba(255, 255, 255, .22); --bar-edge: rgba(255, 255, 255, .42); /* ---- 暗い配色の値。置き場所はここだけ ---- 下の2つのブロック（OSの設定に従う場合／自分で選んだ場合）は どちらもここを参照するだけにする。値を2度書かないので食い違わない */ --d-bg: #10151c; --d-bg-elev: #171e27; --d-bg-sunken: #1d2631; --d-ink: #e6ecf3; --d-ink-mid: #b0bccb; --d-ink-soft: #8394a7; --d-line: #2b3644; --d-line-soft: #232d3a; --d-accent: #56b6d4; --d-accent-deep: #8fd2e8; --d-accent-soft: #14313d; --d-on-accent: #10151c; --d-accent-2: #5cc3a2; --d-accent-2-soft: #14332a; /* 帯。明るい配色の濃紺緑をそのまま暗くした色。--accent-deep（水色）を 背景に使うと、暗い画面で上端だけが光ってしまう */ --d-bar: #0d2530; --d-on-bar: #e3eef4; --d-on-bar-dim: rgba(227, 238, 244, .88); --d-bar-line: rgba(255, 255, 255, .12); --d-bar-soft: rgba(255, 255, 255, .1); --d-bar-mark: rgba(255, 255, 255, .14); --d-bar-edge: rgba(255, 255, 255, .3); --d-warn: #d99b58; --d-warn-soft: #33261a; --d-danger: #e0798a; --d-hold: #93a4bb; --d-hold-soft: #232c39; --d-fund-1: #56b6d4; --d-fund-2: #4795ae; --d-fund-3: #38768a; --d-fund-4: #8199a6; --d-fund-ring: rgba(255, 255, 255, .20); /* 暗い配色では札とカードの地色が近づいて札が消えるので、札のほうを持ち上げる */ --d-flap-top: #3d4a5b; --d-flap-bot: #2c3746; --d-flap-edge: rgba(255, 255, 255, .22); --d-flap-off: #101821; --d-flap-off-edge: #5c6a7a; --d-lane-1: #8394a7; --d-lane-3: #d99b58; /* 桁の段の色。暗い配色では札の地が明るいので合わせて持ち上げる */ --d-tier2-top: #345868; --d-tier2-bot: #244455; --d-tier3-top: #2c6474; --d-tier3-bot: #1c4e5f; --d-tier4-top: #237080; --d-tier4-bot: #145866; --d-tier5-top: #1a7a8c; --d-tier5-bot: #0b6273; --d-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --d-shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .3); } /* ①OSが暗い設定のとき。ただし本人が明るいほうを選んでいれば適用しない */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--d-bg); --bg-elev: var(--d-bg-elev); --bg-sunken: var(--d-bg-sunken); --ink: var(--d-ink); --ink-mid: var(--d-ink-mid); --ink-soft: var(--d-ink-soft); --line: var(--d-line); --line-soft: var(--d-line-soft); --accent: var(--d-accent); --accent-deep: var(--d-accent-deep); --accent-soft: var(--d-accent-soft); --on-accent: var(--d-on-accent); --accent-2: var(--d-accent-2); --sign-up: var(--d-accent-2); --accent-2-soft: var(--d-accent-2-soft); --bar: var(--d-bar); --on-bar: var(--d-on-bar); --on-bar-dim: var(--d-on-bar-dim); --bar-line: var(--d-bar-line); --bar-soft: var(--d-bar-soft); --bar-mark: var(--d-bar-mark); --bar-edge: var(--d-bar-edge); --warn: var(--d-warn); --warn-soft: var(--d-warn-soft); --danger: var(--d-danger); --hold: var(--d-hold); --hold-soft: var(--d-hold-soft); --fund-1: var(--d-fund-1); --fund-2: var(--d-fund-2); --fund-3: var(--d-fund-3); --fund-4: var(--d-fund-4); --fund-ring: var(--d-fund-ring); --flap-top: var(--d-flap-top); --flap-bot: var(--d-flap-bot); --flap-edge: var(--d-flap-edge); --flap-off: var(--d-flap-off); --flap-off-edge: var(--d-flap-off-edge); --lane-1: var(--d-lane-1); --lane-3: var(--d-lane-3); --tier2-top: var(--d-tier2-top); --tier2-bot: var(--d-tier2-bot); --tier3-top: var(--d-tier3-top); --tier3-bot: var(--d-tier3-bot); --tier4-top: var(--d-tier4-top); --tier4-bot: var(--d-tier4-bot); --tier5-top: var(--d-tier5-top); --tier5-bot: var(--d-tier5-bot); --shadow-sm: var(--d-shadow-sm); --shadow-md: var(--d-shadow-md); } } /* ②本人が暗いほうを選んだとき。中身は①と同じ */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--d-bg); --bg-elev: var(--d-bg-elev); --bg-sunken: var(--d-bg-sunken); --ink: var(--d-ink); --ink-mid: var(--d-ink-mid); --ink-soft: var(--d-ink-soft); --line: var(--d-line); --line-soft: var(--d-line-soft); --accent: var(--d-accent); --accent-deep: var(--d-accent-deep); --accent-soft: var(--d-accent-soft); --on-accent: var(--d-on-accent); --accent-2: var(--d-accent-2); --sign-up: var(--d-accent-2); --accent-2-soft: var(--d-accent-2-soft); --bar: var(--d-bar); --on-bar: var(--d-on-bar); --on-bar-dim: var(--d-on-bar-dim); --bar-line: var(--d-bar-line); --bar-soft: var(--d-bar-soft); --bar-mark: var(--d-bar-mark); --bar-edge: var(--d-bar-edge); --warn: var(--d-warn); --warn-soft: var(--d-warn-soft); --danger: var(--d-danger); --hold: var(--d-hold); --hold-soft: var(--d-hold-soft); --fund-1: var(--d-fund-1); --fund-2: var(--d-fund-2); --fund-3: var(--d-fund-3); --fund-4: var(--d-fund-4); --fund-ring: var(--d-fund-ring); --flap-top: var(--d-flap-top); --flap-bot: var(--d-flap-bot); --flap-edge: var(--d-flap-edge); --flap-off: var(--d-flap-off); --flap-off-edge: var(--d-flap-off-edge); --lane-1: var(--d-lane-1); --lane-3: var(--d-lane-3); --tier2-top: var(--d-tier2-top); --tier2-bot: var(--d-tier2-bot); --tier3-top: var(--d-tier3-top); --tier3-bot: var(--d-tier3-bot); --tier4-top: var(--d-tier4-top); --tier4-bot: var(--d-tier4-bot); --tier5-top: var(--d-tier5-top); --tier5-bot: var(--d-tier5-bot); --shadow-sm: var(--d-shadow-sm); --shadow-md: var(--d-shadow-md); } * { box-sizing: border-box; } /* hidden 属性は display を持つクラス（.empty-state など）に負けて効かなくなる。 要素ごとに打ち消していると取りこぼすので、1か所でまとめて効かせる */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.9; letter-spacing: .015em; text-rendering: optimizeLegibility; } /* 日本語の折り返し。既定は文節を見ずに折るため、最終行に1〜2文字だけ残る行が 量産される。その1〜2文字のために前の行の右端が大きく空き、行の形が崩れて読みにくい。 auto-phrase で文節の切れ目に折り、pretty で短すぎる最終行そのものを避ける。 見出しは行数が少ないので、最終行を避けるより行長をそろえるほうがきれいに収まる。 未対応のブラウザでは無視され、従来どおりの折り返しに戻るだけ */ main { word-break: auto-phrase; } main p, main li, main td, main dd, main .sub { text-wrap: pretty; } main h1, main h2, main h3, main h4 { text-wrap: balance; } .wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 0 0 8px 8px; text-decoration: none; transition: top .2s; } .skip-link:focus { top: 0; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------------- header ---------------- */ /* 濃い一本の帯。いつ時点の薬価かの札とナビをここにまとめてある。 すりガラスは使わない。下の本文が透けると、白い文字が読みにくくなる */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bar); color: var(--on-bar); border-bottom: 1px solid var(--bar-line); } .header-inner { height: var(--header-h); display: flex; align-items: center; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-bar); font-weight: 700; letter-spacing: .04em; white-space: nowrap; } /* ロゴの印「符号」。幅の違う塊が横に並んだ、符号化された信号。 箱を持たず、白い形が帯の上に直接乗る */ .brand-mark { display: block; flex: 0 0 auto; width: 26px; height: 26px; color: var(--on-bar); } .brand-mark svg { width: 100%; height: 100%; display: block; } /* ロゴ。絵を持たず、字間と1本の罫だけで組む。 罫は字の幅いっぱいに引き、帯の上でも本文の地の上でも同じ形になる */ .brand-word { position: relative; display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: .16em; line-height: 1.2; padding-bottom: 5px; } .brand-word::after { content: ""; position: absolute; left: 0; right: .16em; bottom: 0; height: 2px; background: currentColor; opacity: .55; } /* サイトが何かを言う説明。名前の脇に控えめに置く */ .brand-text { font-size: 11.5px; font-weight: 400; color: var(--on-bar-dim); letter-spacing: .02em; } /* 名前のとなりに並ぶ2つの札。左が制度の年度（版表示）、右が薬価データの 日付。指しているものは別だが、同じ性質の但し書きなので形はそろえる。 日付は tools/build-database.mjs が書き換える */ .brand-ver, .tn-chip { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.5; background: transparent; color: var(--on-bar-dim); border: 1px solid var(--bar-edge); white-space: nowrap; } .tn-chip b { font-weight: 700; } .global-nav { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; align-items: center; } .global-nav a { position: relative; /* 問い合わせだけ枠線を持つと 1px 分だけ背が高くなるので、 すべての項目に透明の枠線を持たせて高さをそろえる */ padding: 6px 11px; border: 1px solid transparent; border-radius: 999px; font-size: 13.5px; text-decoration: none; color: var(--on-bar-dim); white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .global-nav a:hover { background: var(--bar-soft); color: var(--on-bar); } /* 造語の項目（nominaR8・nominaDB）は、名前だけでは中身が分からない。 下に小さく日本語を敷いて2段に組む。横には伸ばさず、帯を数px高くするだけで済ませる */ .global-nav a.nav-two { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 11px; line-height: 1.25; } .global-nav a.nav-two .nav-ja { font-size: 10px; letter-spacing: .04em; opacity: .78; } .global-nav a.current { background: var(--bar-mark); color: var(--on-bar); } /* 「解説トップ」にふれると、15項目の目次を下に開く。 リンクとパネルのあいだにすき間があるとカーソルが外れてしまうので、 ::after で見えない橋を渡してある */ .nav-hub { position: relative; display: flex; } .nav-hub > a { flex: 1 1 auto; } .nav-hub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; } .nav-menu { position: absolute; top: calc(100% + 13px); left: -8px; z-index: 130; /* 3列。幅は中身に合わせる。等分にすると短い列に無駄が出る */ width: max-content; max-width: calc(100vw - 24px); display: grid; grid-template-columns: repeat(3, auto); gap: 0 20px; padding: 16px 18px 18px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); visibility: hidden; opacity: 0; transition: opacity .12s; } .nav-hub:hover > .nav-menu, .nav-hub:focus-within > .nav-menu { visibility: visible; opacity: 1; } /* Esc で閉じたあいだ。カーソルを外すか焦点が抜けると戻る */ .nav-hub.is-off > .nav-menu { visibility: hidden; opacity: 0; } .nm-col { display: flex; flex-direction: column; min-width: 0; } .nm-cat { margin: 0 0 5px; padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--accent); } .nm-col .nm-cat ~ .nm-cat { margin-top: 14px; } /* ナビの丸いピル型が効いてしまうので、パネルの中だけ打ち消す */ .global-nav .nav-menu a { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border: 0; border-radius: 7px; font-size: 13px; line-height: 1.5; color: var(--ink); white-space: nowrap; } .global-nav .nav-menu a b { flex: 0 0 auto; font-size: 10.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: .04em; } .global-nav .nav-menu a:hover { background: var(--accent-soft); color: var(--accent-deep); } .global-nav .nav-menu a:hover b { color: var(--accent); } .global-nav .nav-menu a.current { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; } .global-nav .nav-menu a.current b { color: var(--accent); } /* 資料を読む項目と問い合わせが一続きに並ぶと読む順が立たないので、 問い合わせの手前だけ余白を広げて切れ目をつくる。 問い合わせは枠を持つので、細い縦線を足すと線が二重になる */ .global-nav a.nav-contact { border-color: var(--bar-edge); margin-left: 16px; color: var(--on-bar); } .global-nav a.nav-contact:hover { border-color: var(--on-bar); background: var(--bar-soft); } /* たたむメニューに切り替わる 980px の直上では、8項目＋切替ボタンが そのままだと2行に折れるので、余白を詰めて1行に収める。 下限は書かない。min-width: 981px と対で書くと 980.5px のような 端数の幅でどちらのルールも当たらず、そこだけ2行に折れる。 980px 以下はあとに書いたたたむメニューの指定が上書きする */ @media (max-width: 1130px) { .header-inner { gap: 10px; } .global-nav a { padding: 6px 7px; font-size: 13px; } .global-nav a.nav-contact { margin-left: 11px; } :root[data-js] .theme-btn { margin-left: 3px; width: 30px; height: 28px; } } /* 配色の切替ボタン。JSが動かないと押しても何も起きないので、 head のスクリプトが data-js を付けたときだけ出す */ .theme-btn { display: none; } :root[data-js] .theme-btn { display: grid; place-items: center; flex: 0 0 auto; margin-left: 6px; width: 30px; height: 28px; padding: 0; border: 1px solid var(--bar-edge); border-radius: 999px; background: transparent; color: var(--on-bar); cursor: pointer; } .theme-btn:hover { border-color: var(--on-bar); color: var(--on-bar); background: var(--bar-soft); } .theme-btn svg { width: 15px; height: 15px; display: block; fill: currentColor; } /* 明るいときは「暗くする」月、暗いときは「明るくする」太陽を出す */ .theme-btn .i-sun { display: none; } :root[data-theme="dark"] .theme-btn .i-moon { display: none; } :root[data-theme="dark"] .theme-btn .i-sun { display: block; } .nav-toggle { display: none; margin-left: auto; width: 38px; height: 32px; border: 1px solid var(--bar-edge); border-radius: 9px; background: transparent; cursor: pointer; padding: 8px 9px; flex-direction: column; justify-content: space-between; } .nav-toggle .bar { display: block; height: 2px; background: var(--on-bar); border-radius: 2px; } /* 読み進みの線。濃い帯の上に乗るので、--accent（#0e6e8c）のままだと 下地（#084c62）とほとんど見分けがつかない。明るい側の色で引く */ .scroll-progress { height: 2px; background: transparent; } .scroll-progress > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #5fc9e6, #5cc3a2); transition: width .1s linear; } /* ---------------- hero ---------------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(1000px 380px at 15% -10%, var(--accent-soft), transparent 65%), radial-gradient(800px 340px at 90% 0%, var(--accent-2-soft), transparent 60%), var(--bg); border-bottom: 1px solid var(--line); } .hero-inner { padding: 68px 0 36px; } /* 最後の枠の下マージンは、下の余白と二重に効いてしまうので落とす */ .hero-inner > :last-child { margin-bottom: 0; } .eyebrow { margin: 0 0 14px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .hero h1 { margin: 0 0 22px; font-size: clamp(30px, 5.4vw, 52px); line-height: 1.32; letter-spacing: .01em; font-weight: 700; } .lead { margin: 0 0 32px; font-size: clamp(15px, 1.7vw, 17px); color: var(--ink-mid); /* 語の途中で折らず文節で折る。未対応ブラウザは通常の禁則のみになる */ word-break: auto-phrase; } .lead strong { color: var(--ink); font-weight: 700; } /* 節の末尾に置く「次はこのページ」への送り。pager と違い本文の流れの一部 */ .next-read { margin: 30px 0 0; padding: 16px 18px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 0 8px 8px 0; font-size: 15px; color: var(--ink-mid); } .next-read a { font-weight: 700; white-space: nowrap; } /* ヒーローの数字はひとつだけ。その内訳を帯で見せる */ .hero-stats { margin-bottom: 32px; padding: 22px 26px 24px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .hs-label { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink-soft); } .hs-num { margin: 0; font-size: clamp(30px, 4.4vw, 40px); font-weight: 700; line-height: 1.25; letter-spacing: .01em; color: var(--accent-deep); } .hs-num .hs-unit { font-size: .55em; margin-left: 2px; } .hs-sub { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-mid); line-height: 1.8; } /* 読み込み時に数字を回すので、桁の幅を固定して字がガタつかないようにする */ .hs-v, .hs-t, .hs-p { font-variant-numeric: tabular-nums; } /* 数字のかたまりは左に寄っていて右上が空くので、そこに「9兆円がどのくらいか」の ものさしを1つだけ置く。比較対象を増やすと主役の数字がぼやけるので1つに絞る */ .hs-head { display: flex; align-items: flex-start; gap: 40px; } .hs-head > .hs-main { flex: 1 1 auto; min-width: 0; } /* 幅は説明文に合わせて決めている。狭いと文の途中で折り返してしまうので、 説明文がそのまま1行に収まるところまで左に伸ばしてある */ .cmp { flex: 0 0 auto; margin-left: auto; width: min(590px, 52%); padding-left: 24px; border-left: 1px solid var(--line); } /* 幅が足りない画面では縦に積む。仕切り線は左から上に回す */ @media (max-width: 860px) { .hs-head { flex-direction: column; gap: 18px; } .cmp { width: auto; margin-left: 0; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); } } .cmp-k { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--ink-soft); } .cmp-eq { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; } .cmp-eq .eq { font-size: 26px; font-weight: 700; color: var(--accent); line-height: 1; } .cmp-eq .eqv { font-size: 17px; font-weight: 700; color: var(--ink); } .cmp-n { margin: 8px 0 0; font-size: 12px; line-height: 1.8; color: var(--ink-soft); } .cmp-n strong { color: var(--ink-mid); } /* 幅が足りない画面でも文の途中では折らず、文の切れ目で改行させる */ .cmp-n span { display: inline-block; } .cmp-src { margin: 6px 0 0; font-size: 11px; line-height: 1.75; color: var(--ink-soft); } .fund { margin: 18px 0 0; } .fund figcaption { margin-bottom: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-mid); } /* 負担者ごとに1本ずつ。左に項目名、右に金額を置く */ .fund-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .fund-rows li { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; } .fund-rows .fr-l { font-size: 14px; font-weight: 700; color: var(--ink-mid); } .fund-rows .fr-t { height: 16px; border-radius: 4px; overflow: hidden; background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--fund-ring); } .fund-rows .fr-t i { display: block; height: 100%; width: 0; /* その他は0.5%しかなく、狭い画面だと1px未満になって消える。 消えると「ゼロ」に見えてしまうので、下限を2pxだけ設ける。 長さが足りない区分は元々ごくわずかなものに限られ、 正確な数値は右の金額と下の注記に出している */ min-width: 2px; transition: width 1s cubic-bezier(.22, .8, .3, 1); } /* 金額の欄は幅を決め打ちにする。行ごとに文字の幅が違う（「約500億円」は 「約5.0兆円」より4px広い）ため、成り行きに任せると帯の長さが行ごとに ずれる。右端をそろえたいので右寄せにする */ .fund-rows .fr-v { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 72px; text-align: right; } .fund-rows li:nth-child(1) .fr-t i { background: var(--fund-1); } .fund-rows li:nth-child(2) .fr-t i { background: var(--fund-2); } .fund-rows li:nth-child(3) .fr-t i { background: var(--fund-3); } .fund-rows li:nth-child(4) .fr-t i { background: var(--fund-4); } /* どの区分を見ているかが分かるように、行ごと縁取る */ .fund-rows li { cursor: help; border-radius: 6px; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .12s; } .fund-rows li:hover, .fund-rows li:focus, .fund-rows li:focus-visible { outline-color: var(--accent); } /* 説明は常設の枠を持たず、ふれたときだけ浮かせて出す。 目次の副題と同じ作り。位置は開く直前にJSが入れる */ .fund-pop { position: fixed; left: 0; top: 0; z-index: 120; width: min(400px, calc(100vw - 24px)); padding: 12px 15px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-md); font-size: 12.5px; line-height: 1.85; color: var(--ink-mid); visibility: hidden; opacity: 0; transition: opacity .12s; pointer-events: none; /* 吹き出し自体はカーソルを受けない */ } .fund-pop.is-on { visibility: visible; opacity: 1; } .fund-pop .fd { display: none; margin: 0; } .fund-pop .fd.is-on { display: block; } .fund-pop b { color: var(--ink); font-weight: 700; } .fund-pop strong { color: var(--ink); } .fund-foot { margin: 12px 0 0; } .fund-note { margin: 12px 0 0; font-size: 12px; line-height: 1.85; color: var(--ink-soft); } .fund-note strong { color: var(--ink-mid); } @media (max-width: 560px) { .hero-stats { padding: 18px 18px 20px; } } /* ========================================================= ヒーロー右側「今日の薬価」— 反転フラップ ========================================================= */ /* 既定は1カラム。札は本文と数字の間に入る。 広い画面だけ2カラムに切り替える（max-width と min-width を対で書くと、 端数の幅でどちらも当たらない隙間ができるため、上書きの形にしている） */ .spotlight { max-width: 560px; margin: 34px 0 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 22px 14px; } /* 本文の右の余白に置く。本文側がリード文の最大幅（586px）を下回ると 折り返しが変わってしまうので、余りが足りない画面では札のほうを縮める。 690px ＝ 586（本文の最大幅）＋48（間隔）＋56（.wrap の左右余白） */ @media (min-width: 1180px) { .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) min(540px, calc(100vw - 690px)); column-gap: 48px; } .hero-inner .hero-stats { grid-column: 1 / -1; } .spotlight { max-width: none; margin: 0; align-self: center; } } .sl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .sl-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--accent); } /* data/spotlight.json の verified が false の間だけ出す */ .sl-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; line-height: 1.5; padding: 2px 7px; border-radius: 4px; color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); } .sl-badge[hidden] { display: none; } /* 区分の切替。札の中身が変わるだけなので、目立たせずに並べる */ .sl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; } .sl-chip { font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.6; padding: 3px 10px; border-radius: 999px; cursor: pointer; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); } .sl-chip:hover { border-color: var(--accent); color: var(--accent); } .sl-chip[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } .spotlight .sl-name { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.45; /* 品目名は長短の差が大きい。2行分の高さを先に確保して札が上下に動かないようにする */ min-height: calc(19px * 1.45 * 2); } .spotlight .sl-generic { margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); min-height: calc(12.5px * 1.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 品目が切り替わるとき、文字は札と違って静かに差し替える */ .sl-name.is-in, .sl-generic.is-in { animation: slFade .34s ease-out; } @keyframes slFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* ---- 札の列 ---- */ /* min-height は単位が2行になったときの高さ。単位の長さで札が上下に動かないよう、 いちばん高くなる状態を先に確保しておく（札そのものは40px） */ .sl-row { display: flex; align-items: flex-end; gap: 3px; margin: 12px 0 0; min-height: 45px; } /* 札の側は縮ませない。縮めると中の札は 26px のままなので、 はみ出した数字が右隣の単位の文字に重なる */ .sl-digits { display: flex; align-items: flex-end; gap: 3px; flex: 0 0 auto; } /* 札の幅は26px。どの品目も億の位まで14枚並べるようになったので、 1180px ちょうどでヒーロー右の枠が490pxまで縮んだときに、 短い単位「/ 20mL1管」なら1行で収まる大きさに合わせている。 長い単位は下の .sl-yen 側で2行に折り返す */ /* 折り目の線は引かない。どこに引いても数字の横棒と重なって読みにくくなる。 上下にゆるく色を振るだけにして、めくる感じは動きのほうで出す */ .flap { position: relative; width: 26px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 5px; background: linear-gradient(180deg, var(--flap-top), var(--flap-bot)); box-shadow: inset 0 0 0 1px var(--flap-edge); overflow: hidden; perspective: 140px; } .flap i { font: 700 23px/1 var(--flap-font); font-style: normal; color: var(--flap-ink); font-variant-numeric: tabular-nums; transform-origin: 50% 0%; } .flap.is-flip i { animation: flapIn .11s ease-out; } @keyframes flapIn { 0% { transform: rotateX(-85deg); opacity: .3; } 100% { transform: rotateX(0); opacity: 1; } } /* 使っていない桁の札。数字を入れず、点いていない札として置いておく。 ここが何枚埋まるかが、そのまま品目の高さになる */ .flap.off { background: var(--flap-off); box-shadow: inset 0 0 0 1px var(--flap-off-edge); } /* 桁が上がるほど札の色を濃くする。同系色ひと並びで、段が上がるほど 青みが強くなる。段は 2桁ごと（〜99円／〜9,999円／〜99万円／〜9,999万円／1億円〜）。 数字はどの段でも 4.5:1 以上を保つ */ .sl-digits[data-tier="2"] .flap:not(.off) { --flap-top: var(--tier2-top); --flap-bot: var(--tier2-bot); } .sl-digits[data-tier="3"] .flap:not(.off) { --flap-top: var(--tier3-top); --flap-bot: var(--tier3-bot); } .sl-digits[data-tier="4"] .flap:not(.off) { --flap-top: var(--tier4-top); --flap-bot: var(--tier4-bot); } .sl-digits[data-tier="5"] .flap:not(.off) { --flap-top: var(--tier5-top); --flap-bot: var(--tier5-bot); } /* 銭の位は札を小さくして、円の位と一段差をつける。 6.30円 のような品目でも、まず「6」が目に入るようにするため */ .flap.sm { width: 19px; height: 28px; border-radius: 4px; } .flap.sm i { font-size: 16px; } /* 3桁区切りと小数点。札にはせず、字も小さく色も落として、 数字の列に割り込まないようにする */ .sl-comma, .sl-dot { flex: 0 0 auto; text-align: center; color: var(--ink-soft); font-family: var(--flap-font); font-weight: 700; } .sl-comma { width: 6px; font-size: 18px; line-height: 40px; } .sl-dot { width: 6px; font-size: 18px; line-height: 28px; color: var(--ink-mid); } /* 規格は「血液400mLに由来する赤血球に血漿約120mLを混和した血液1袋」のように 長いものがある。札の側は縮まないので、あふれる分はここで折り返す。 2行までに収めれば札（40px）より低いままなので、品目が変わっても札は動かない。 省いた分は title と読み上げ用の行に全文が入っている */ .sl-yen { flex: 1 1 auto; min-width: 0; margin-left: 7px; padding-bottom: 4px; font-size: 13px; line-height: 1.4; color: var(--ink-mid); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .sl-yen b { font-size: 16px; } /* ---- 札の下 ---- */ /* 折り返さない。「クリスタルバイオテック・ジャパン」のような長い企業名で 2行になると、狭い画面でカードの高さが品目ごとに変わってしまう */ .spotlight .sl-meta { margin: 15px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); line-height: 1.6; } .sl-maker { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-cat { flex: 0 0 auto; font-weight: 700; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor; text-decoration: none; } .sl-cat.c-new { color: var(--accent); } .sl-cat.c-long { color: var(--warn); } .sl-cat.c-ge { color: var(--accent-2); } .sl-cat.c-regen { color: var(--danger); } .sl-cat.c-base { color: var(--ink-mid); } .sl-cat:hover, .sl-cat:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); } .spotlight .sl-note { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink-mid); min-height: 40px; } .sl-foot { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 12px; } /* 帯は3等分した枠を並べる。1枠ずつ点いていくので、たまり方が 「あと何回ぶん」として数えられる */ .sl-bar { flex: 1 1 auto; display: flex; gap: 4px; } .sl-bar i { flex: 1 1 0; height: 3px; border-radius: 2px; background: var(--bg-sunken); } .sl-bar i.is-on { background: var(--accent); } .sl-btn, .fund-btn { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 999px; cursor: pointer; color: var(--accent); background: transparent; border: 1px solid var(--line); } .sl-btn:hover, .fund-btn:hover { background: var(--accent-soft); border-color: var(--accent); } /* 「前へ」は控えがたまるまで押せない。押せないことが見て分かるようにする */ .sl-btn:disabled { color: var(--ink-soft); cursor: default; opacity: .55; } .sl-btn:disabled:hover { background: transparent; border-color: var(--line); } /* 止めている間は、区分チップと同じように塗って状態を見せる */ .sl-btn[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } .sl-btn[aria-pressed="true"]:hover { background: var(--accent); } /* ボタンが3つ並ぶので、間は帯より詰めて1組に見せる */ .sl-foot .sl-prev, .sl-foot .sl-pause { margin-right: -4px; } .spotlight .sl-asof { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: var(--ink-soft); } /* 狭い画面では札を小さくする。いちばん長い 304,972,042 は札11枚あり、 既定の大きさのままだと1行に収まらない。単位の折り返しは2行までなので、 min-height はその高さに合わせて品目ごとに動かないようにしている */ @media (max-width: 560px) { .spotlight { padding: 16px 16px 14px; } .sl-row { gap: 2px; min-height: 41px; margin-top: 14px; } .sl-digits { gap: 2px; } .flap { width: 19px; height: 30px; border-radius: 4px; } .flap i { font-size: 16.5px; } .flap.sm { width: 14px; height: 22px; border-radius: 3px; } .flap.sm i { font-size: 12.5px; } .sl-comma { width: 6px; font-size: 15px; line-height: 30px; } .sl-dot { width: 6px; font-size: 15px; line-height: 22px; } .sl-yen { margin-left: 5px; font-size: 11.5px; padding-bottom: 2px; } .sl-yen b { font-size: 14px; } .sl-name { font-size: 17.5px; min-height: calc(17.5px * 1.45 * 2); } } /* 320px級の端末では既定でも1px しか余らない。字形の差で溢れないよう、もう一段詰める。 min-height は下の 420px の指定（単位が下の行に回る）が後にあるのでそちらに任せる */ @media (max-width: 380px) { .flap { width: 16px; height: 28px; } .flap i { font-size: 14.5px; } .flap.sm { width: 13px; height: 20px; } .flap.sm i { font-size: 11.5px; } .sl-comma { width: 5px; font-size: 13.5px; line-height: 28px; } .sl-dot { width: 5px; font-size: 13.5px; line-height: 20px; } } /* 札14枚ぶんの 304,972,042.00 は、この幅から単位まで1行に入らない。 品目によって折り返したりしなかったりすると高さが変わるので、 単位は常に下の行へ回す。その行が2行になる品目もあるので、 min-height はその高さ（札の段＋単位2行）で先に確保しておく */ @media (max-width: 420px) { .sl-row { flex-wrap: wrap; min-height: 68px; } .sl-yen { flex-basis: 100%; margin-left: 0; padding-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .flap.is-flip i, .sl-name.is-in, .sl-generic.is-in { animation: none; } } .btn { display: inline-block; padding: 12px 26px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14.5px; transition: transform .15s, box-shadow .15s, background .15s; } .btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); } .btn.primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn.ghost { border: 1px solid var(--line); color: var(--ink-mid); background: var(--bg-elev); } .btn.ghost:hover { border-color: var(--accent); color: var(--accent-deep); } /* ---------------- layout ---------------- */ .layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 52px; align-items: start; /* 上は詰めてある。この下に来る .sec が内側に 40px 持っているので、 ここで大きく取るとパンくずと本文の間が二重に空く */ padding: 18px 0 80px; } /* トップだけは上のヒーローと直に続く。ここが145px空いていて間延びしていた （カード同士の間隔は30px）。区切りの罫線が上下ほぼ真ん中に来る幅にする。 .hero を持つのはトップページだけ */ .hero + .layout { padding-top: 34px; } main { min-width: 0; } /* z-index を明示しているのは、position: sticky が z-index の値によらず スタッキングコンテキストを作るため。指定しないと目次全体が auto（＝0相当） として重ねられ、中の小見出しポップアップがいくら z-index を上げても、 本文側の position 指定された要素（分岐図の札やレールなど）より下に潜る。 本文で使っている最大値は 2、ヘッダーは 100 なので、その間に置く */ .toc { min-width: 0; position: sticky; top: calc(var(--header-h) + 24px); z-index: 20; font-size: 13.5px; line-height: 1.75; max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding-right: 6px; } .toc-title { margin: 0 0 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; } /* ---- 目次の開閉 ---- 閉じた状態は :root の class で持つ。localStorage にも残すので、 ページを移動しても開き直さずに済む。ボタンは script.js が差し込む */ .toc-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; } .toc-head .toc-title { margin: 0; flex: 1 1 auto; } .toc-btn { appearance: none; cursor: pointer; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-elev); color: var(--ink-mid); font: inherit; font-size: 11.5px; line-height: 1.4; padding: 5px 9px; white-space: nowrap; transition: border-color .15s, color .15s; } .toc-btn:hover { border-color: var(--accent); color: var(--ink); } .toc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .toc-btn svg { width: 15px; height: 15px; display: block; flex: 0 0 auto; } /* 目次の中は記号だけ。正方形にして見出しの横で主張させない */ .toc-btn.icon { width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; } /* 閉じたら本文を全幅にして、開き直すボタンだけ残す */ :root.toc-off .toc { display: none; } :root.toc-off .layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .toc-reopen { display: none; } :root.toc-off .toc-reopen { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; justify-self: start; } .toc ol { list-style: none; margin: 0; padding: 0; } .toc ol ol { padding-left: 13px; margin-top: 2px; } .toc li { margin: 1px 0; } .toc a { display: block; padding: 4px 10px; border-radius: 7px; color: var(--ink-mid); text-decoration: none; border-left: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; } .toc a:hover { background: var(--bg-sunken); color: var(--ink); } .toc a.current { color: var(--accent-deep); background: var(--accent-soft); border-left-color: var(--accent); font-weight: 700; } .toc ol ol a { font-size: 12.5px; color: var(--ink-soft); } /* 目次のグループ見出し。14項目を一続きに並べると現在地を見失うため、 トップページのカード群と同じ区切りで3つに割る */ .toc-cat { margin: 18px 0 4px; padding-left: 12px; font-size: 11px; font-weight: 700; color: var(--ink-soft); letter-spacing: .08em; } .toc-title + .toc-cat { margin-top: 12px; } .toc .toc-list > li > a { display: grid; grid-template-columns: 1.75em 1fr; gap: 4px; align-items: baseline; } /* 番号は本文の Section 表記と一致させ、ページ間の対応を取れるようにする */ .toc .toc-list > li { counter-increment: sec; } .toc .toc-list > li > a::before { content: counter(sec, decimal-leading-zero); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .toc .toc-list > li > a:hover::before { color: var(--ink-mid); } .toc .toc-list > li > a.current::before { color: var(--accent); } .toc .toc-list .t-label { min-width: 0; } /* ---------------- sections ---------------- */ .sec { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 44px 46px; margin-bottom: 30px; box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h) + 20px); } .sec-num { margin: 0 0 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 700; } /* 1項目1ページに分割したページでは、見出しが h1 になる。 その下の節見出しは h2.sec-h（見出しの段を飛ばさないため）で、 トップの h2 と同じ見た目にならないよう、こちらだけ除外する。 h2.grp（論点の群）も同じ理由で外す */ .sec h1, .sec h2:not(.sec-h):not(.grp) { margin: 0 0 26px; font-size: clamp(21px, 3vw, 28px); line-height: 1.5; font-weight: 700; letter-spacing: .01em; padding-bottom: 14px; border-bottom: 2px solid var(--line-soft); } /* 見出しの中で、途中で切れると意味が読み取りにくくなる並び。 狭い画面では見出し自体は折り返すが、この単位の中では折らない */ .nb { white-space: nowrap; } .sec h3, .sec h2.sec-h { margin: 40px 0 14px; font-size: 17.5px; font-weight: 700; line-height: 1.6; padding-left: 13px; border-left: 4px solid var(--accent); letter-spacing: .01em; scroll-margin-top: calc(var(--header-h) + 20px); } .sec > p:first-of-type + h3, .sec > p:first-of-type + h2.sec-h { margin-top: 30px; } .sec p { margin: 0 0 17px; } .sec p:last-child { margin-bottom: 0; } .hl { background: linear-gradient(transparent 62%, var(--accent-soft) 62%); font-weight: 700; padding: 0 2px; } .note { font-size: 13px; color: var(--ink-soft); line-height: 1.85; border-left: 2px solid var(--line); padding-left: 12px; margin-top: 14px !important; } /* 但し書き。読んでほしいが目立たせたくないので、色は持たせず罫線1本で区切る。 左右の余白は .sec に合わせて、本文の始まりが上のカードと揃うようにする。 小さくしすぎると読めないので、本文よりわずかに小さい程度に留める */ .fineprint { margin: 26px 0 0; padding: 18px 44px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); } /* 見出し（かたまりの名前）→ 項目名 → 本文、の3段だと分かるように、 大きさ・太さ・色を1段ずつ落とす */ .fineprint .fp-title { margin: 0 0 7px; font-size: 15px; font-weight: 700; color: var(--ink); } /* 2つ目以降のかたまり。罫線で前のかたまりと切る */ .fineprint .fp-sub { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .fineprint > p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-mid); } .fineprint > p strong { color: var(--ink); font-weight: 700; } /* 本文が続くときだけ間を空ける。見出し（fp-title）は自前で余白を持っている */ .fineprint > p:not(.fp-title) + p:not(.fp-title) { margin-top: 12px; } /* 中の定義リストからも枠と背景を外す */ .fineprint .spec { border: 0; border-radius: 0; margin-top: 4px; } .fineprint .spec dt { background: none; padding: 8px 18px 8px 0; font-size: 13px; font-weight: 700; color: var(--ink-mid); } .fineprint .spec dd { padding: 8px 0; font-size: 13.5px; line-height: 1.75; color: var(--ink-mid); } .fineprint .spec dd strong { color: var(--ink); } /* 項目名の頭に付ける可否の印。.scope の .mark とは別物 */ .fineprint .spec dt .dt-mark { display: inline-grid; place-items: center; vertical-align: -3px; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; font-size: 10.5px; font-weight: 700; color: var(--on-accent); } .fineprint .spec dt .dt-mark.ok { background: var(--accent-2); } .fineprint .spec dt .dt-mark.ng { background: var(--danger); } /* 中の式は本文より小さいままにする。.fineprint > p のほうが指定が強いので上書きする */ .fineprint > p.mini-formula { font-size: 13px; color: var(--ink); } /* 中の出典リストは、注記の一部として軽く見せる。枠も背景も外して行に近づける */ .fineprint .links { margin-top: 10px; gap: 2px; } .fineprint .links li { padding: 7px 0; border: 0; border-radius: 0; background: none; } .fineprint .links a { font-size: 13.5px; } /* 節の中に置く場合。左右の余白は .sec が持っているので、ここでは足さない */ .sec > .fineprint { padding-left: 0; padding-right: 0; } /* 見出しのすぐ下に置く場合。h2 が既に罫線を持っているので、二重に引かない */ .sec h2 + .fineprint { margin-top: 22px; padding-top: 0; border-top: 0; } .fineprint > .spec:first-child { margin-top: 0; } /* ---------------- cards ---------------- */ .cards { display: grid; gap: 16px; margin: 22px 0 8px; } .cards.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* 加算率の列。「70〜120%」が「70〜」と「120%」に割れると読み取れないので折らない。 はみ出す幅では .table-scroll が横に逃がす */ .rate-table td:nth-child(2), .rate-table th:nth-child(2) { white-space: nowrap; } /* 中に式を持つ2枚。式が折り返すと読みにくいので、2枚並べる下限を式の幅に 合わせてある。これより狭ければ縦に積み、カードに本文幅いっぱいを使わせる */ .cards.two.formula-cards { grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)); } .formula-cards .mini-formula { font-size: 13px; padding: 6px 10px; } .cards.three { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .cards.four { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); } /* 4枚を2×2に組む。2枚ずつ対になっていて、並びそのものに意味があるときに使う。 .four（205px）は本文幅816pxでは3列にしかならず、4枚目だけが次の行に取り残される */ .cards.pair { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .card { background: var(--bg-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 20px 22px; } .card h3 { margin: 0 0 8px; padding: 0; border: 0; font-size: 15.5px; font-weight: 700; color: var(--accent-deep); } .card .card-sub { margin: -4px 0 10px; font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; } .card p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.85; color: var(--ink-mid); } .card p:last-child { margin-bottom: 0; } .card ul { margin: 0; padding-left: 1.2em; font-size: 14.5px; color: var(--ink-mid); } .card ul li { margin-bottom: 5px; } .card.up { border-color: color-mix(in srgb, var(--accent-2) 40%, var(--line)); background: var(--accent-2-soft); } .card.up h3 { color: var(--accent-2); } .card.down { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); } /* 二面を持つ1つのもの。カードを2枚並べると別々の存在に見えてしまうので、 枠は1つのままにして中を割る。上端の帯が「割る前の1つ」の名前になる */ .tf { margin: 22px 0 8px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-elev); } .tf p { margin: 0; } .tf .tf-head { padding: 10px 18px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); } .tf .tf-head b { color: var(--ink-mid); } .tf-body { display: grid; grid-template-columns: 1fr 1fr; } .tf-face { padding: 18px 20px 20px; } .tf-face + .tf-face { border-left: 1px solid var(--line); } .tf .tf-n { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--accent); } .tf-face + .tf-face .tf-n { color: var(--accent-2); } .tf .tf-face h3 { margin: 0 0 3px; padding: 0; border: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); } .tf .tf-role { margin-bottom: 10px; font-size: 12.5px; color: var(--ink-soft); } .tf .tf-face > p:last-child { font-size: 14.5px; line-height: 1.85; color: var(--ink-mid); } /* 横に割れる幅がなくなったら上下に積む。境目は左の罫線から上の罫線に移す */ @media (max-width: 640px) { .tf-body { grid-template-columns: 1fr; } .tf-face + .tf-face { border-left: 0; border-top: 1px solid var(--line); } } /* ---------------- 役割つきの一覧 ---------------- */ /* 顔ぶれの紹介に使う全幅1列の一覧。カードを横に並べると、1枚の幅に対して 文字数が多くなりすぎて細長い柱になる（.cards.four は本文幅806pxでは 3列にしかならず、4枚目だけが2段目に落ちる）。 左に名前、右に説明という固定の形にして1行の文字数を稼ぎ、 説明の頭に .pl-one（一言でいうと）を独立させて、 名前 → 役割 → 詳細 の順に必要なところで読み止められるようにする */ .pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } /* 地色は .card と同じ --bg-sunken。--bg-elev だと暗い配色で .sec と同色になり、 行が本文に沈む。左右は塗り分けず、1本の罫線で仕切る */ .pl > li { display: grid; grid-template-columns: 196px 1fr; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-sunken); overflow: hidden; } /* 決定権を持たない側。同じ列に並べたまま種類の違いを見せたいので、 色は足さず、地色を抜いて枠を点線にするだけにする。 塗りがないぶん枠は --line-soft では弱いので --line にする */ .pl > li.off { border-style: dashed; border-color: var(--line); background: transparent; } .pl-id { padding: 14px 16px; border-right: 1px solid var(--line); } .pl > li.off .pl-id { border-right-style: dashed; } .pl-id b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.5; } /* 正式名称。大きさと色は .card-sub にそろえる */ .pl-id span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.65; color: var(--ink-soft); letter-spacing: .04em; } .pl-body { padding: 14px 18px; } .pl-body .pl-one { margin: 0 0 5px; font-size: 14.5px; font-weight: 700; line-height: 1.6; color: var(--accent-deep); } .pl > li.off .pl-body .pl-one { color: var(--ink-mid); } .pl-body p:last-child { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-mid); } .pl-body strong { color: var(--ink); } /* 左右に割れる幅がなくなったら上下に積む。境目は左の罫線から上の罫線に移す */ @media (max-width: 700px) { .pl > li { grid-template-columns: 1fr; } .pl-id { border-right: 0; border-bottom: 1px solid var(--line); } .pl > li.off .pl-id { border-right: 0; border-bottom-style: dashed; } } /* 一覧を2つに割るときの見出し帯。本文1文で書き分けるより境目が立つ。 .sec p の余白に負けるので margin だけ !important で通す */ .pg-band { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 26px 0 10px !important; padding: 0 0 7px; border-bottom: 2px solid var(--line-soft); } .pg-band b { font-size: 14px; font-weight: 700; color: var(--ink); } .pg-band span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; } .pg-band.soft { border-bottom-style: dashed; } .pg-band.soft b { color: var(--ink-mid); } /* ---------------- callouts ---------------- */ .callout { margin: 26px 0; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-left: 4px solid var(--accent); border-radius: 10px; padding: 18px 22px; } .callout .callout-title { margin: 0 0 7px; font-weight: 700; font-size: 14px; color: var(--accent-deep); letter-spacing: .05em; } .callout p { margin: 0; font-size: 14.5px; line-height: 1.9; } .callout.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); border-left-color: var(--warn); } .callout.warn .callout-title { color: var(--warn); } .callout.subtle { background: var(--bg-sunken); border-color: var(--line); border-left-color: var(--ink-soft); } .callout.subtle .callout-title { color: var(--ink-mid); } /* 背景を敷かない版。枠と左の線だけで囲みだと分かればよい場面で使う */ .callout.plain { background: none; } /* 1枚の枠に2つの話題を入れる場合。小見出しを立て、間を細い線で区切る */ .callout .co-part + .co-part { margin-top: 15px; padding-top: 15px; border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .callout .co-h { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); } /* 説明文の右に誘導ボタンを置く。ボタンは文字が折れると読みにくいので縮めず、 本文の側が伸び縮みする。並べる幅が足りなくなればボタンが下へ回る */ .callout .co-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .callout .co-row > p { flex: 1 1 420px; } .callout .co-row > .btn { flex: none; } .callout.warn .co-part + .co-part { border-top-color: color-mix(in srgb, var(--warn) 26%, transparent); } /* 通知や政府決定の原文をそのまま置く引用。要約した地の文と原文を見分けさせる。 callout の中に置くことが多いので、背景を一段持ち上げて枠から浮かせる。 blockquote を使うのは、.callout p の余白リセットを受けずに済ませるため */ .quote { margin: 13px 0; padding: 12px 16px; background: var(--bg-elev); border-left: 3px solid var(--accent-2); border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.85; color: var(--ink-mid); } .quote strong { color: var(--ink); } /* 出典は引用の一部ではないので、行を替えて一段落とす */ .quote .q-src { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .03em; color: var(--ink-soft); } .quote .q-src::before { content: "— "; } /* ---------------- flow line ---------------- */ .flow-line { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; margin: 24px 0 8px; } .flow-line .node { flex: 1 1 150px; min-width: 140px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; padding: 14px 12px; text-align: center; } .flow-line .node.accent { background: var(--accent-soft); border-color: var(--accent); } .flow-line .n-t { display: block; font-weight: 700; font-size: 14.5px; } .flow-line .n-s { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px; } .flow-line .arrow { align-self: center; flex: 0 0 20px; height: 2px; background: var(--line); position: relative; } .flow-line .arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--line); } /* ---------------- timeline ---------------- */ .timeline { list-style: none; margin: 26px 0 0; padding: 0 0 0 30px; position: relative; } /* 縦線は項目ごとに引く。自分の丸から次の丸までをつなぐ。 1本まとめて引くと、末尾の切れ目が項目の高さに左右されて合わない */ .timeline li { position: relative; margin-bottom: 26px; --ph: var(--accent); } .timeline li::before { content: ""; position: absolute; left: -30px; top: 9px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-elev); border: 3px solid var(--ph); } .timeline li::after { content: ""; position: absolute; left: -25.5px; top: 15px; z-index: 0; width: 3px; height: calc(100% + 26px); background: var(--ph); border-radius: 2px; } .timeline li:last-child::after { height: calc(100% - 15px); } .timeline li:last-child { margin-bottom: 0; } .timeline .t-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--accent-deep); background: var(--accent-soft); padding: 2px 10px; border-radius: 999px; margin-bottom: 5px; } /* 節見出しが h3 のページでは項目を h4 にするので、どちらでも同じ見え方にする */ .timeline h3, .timeline h4 { margin: 0 0 5px; padding: 0; border: 0; font-size: 16px; font-weight: 700; } .timeline p { margin: 0; font-size: 14.5px; color: var(--ink-mid); } /* 施行済みの節目と、これから効く節目を分ける。済んだものは丸と札の色を落とす */ .timeline li.done { --ph: var(--line); } .timeline li.done .t-badge { color: var(--ink-soft); background: var(--bg-sunken); } .timeline li.ahead { --ph: var(--accent-2); } .timeline li.ahead .t-badge { color: var(--accent-2); background: var(--accent-2-soft); } /* 縦に長い一覧を、ページを伸ばさずその場で送って読ませる箱。 スクロールできることは、上下の影（中身が隠れている側にだけ出る）で示す。 キーボードだけでも送れるよう、使うときは tabindex="0" と role="group" / aria-label を付ける */ .scroll-box { /* overscroll-behavior は既定（auto）のまま。contain にすると 端まで送ってもページが続かず、枠の中で行き止まりになる */ /* 高さは変数で受ける。--sb-h を上書きすれば、印刷時の max-height: none を 打ち消さずに（＝詳細度を上げずに）1か所だけ高くできる */ max-height: var(--sb-h, 420px); overflow-y: auto; margin: 26px 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); /* 影を隠す蓋（local＝中身と一緒に動く）と、影そのもの（scroll＝箱に固定）。 端まで送ると蓋が影に重なって影が消える */ background: linear-gradient(var(--bg-sunken) 40%, transparent) top / 100% 34px no-repeat local, linear-gradient(transparent, var(--bg-sunken) 60%) bottom / 100% 34px no-repeat local, radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--ink) 13%, transparent), transparent) top / 100% 12px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 13%, transparent), transparent) bottom / 100% 12px no-repeat scroll, var(--bg-sunken); } /* 1項目が長い一覧（本文・表・箇条書きを持つニュース項目など）向け。 420pxだと1項目すら収まらず、送っている感覚だけが残る。 いちばん背の高い項目（表を持つもの）が810px前後なので、 上限はそれを収めきれる高さに取る。 画面が低いときは vh 側が効き、枠だと分かる余白が上下に残る */ .scroll-box.tall { --sb-h: min(820px, 76vh); } /* 上に貼り付ける見出し（凡例など）を持つ枠。上の余白は見出し側が持つ。 枠に padding-top を残すと、貼り付く位置がその分だけ下がり （Chromeは枠の content box を基準に止める）、見出しの上に細い帯ができて そこを項目が流れていくのが見えてしまう */ .scroll-box.sticky-head { padding-top: 0; } .scroll-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* 箱の内側では上下の余白を持たせない。蓋の高さと喧嘩する */ .scroll-box > :first-child { margin-top: 0; } .scroll-box > :last-child { margin-bottom: 0; } /* 印刷時は畳まずに全部出す。畳んだままだと紙に出るのは枠の高さぶんだけで、 残りが黙って消える。枠内スクロールを足すときは必ずここも足すこと */ @media print { .scroll-box { max-height: none; overflow: visible; border-color: var(--line); } .table-scroll.tall { max-height: none; overflow: visible; } .table-scroll.tall thead th { position: static; } } /* ---------------- 立場別の影響（横レーン） ---------------- */ /* 1立場＝1本の帯。左に名札と結論、右に項目を2列で流す。 カードを縦に3枚並べるより1行が長くなるので、折り返しが減る */ /* 導入文と凡例は同じ行に載せる。別々の行にすると、 それだけで節の高さが40px伸びて1画面に収まらなくなる */ .imp-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin-top: 14px; } .imp-intro > p { margin: 0; } .imp-lanes { display: grid; gap: 10px; margin: 14px 0 0; } .imp-lane { display: grid; grid-template-columns: 232px minmax(0, 1fr); background: var(--bg-elev); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: var(--radius); overflow: hidden; } /* 名札の側は淡い面で塗る。ベタ塗り＋白抜きだと帯が強く出すぎて、 本文より先に名札に目が行ってしまう。濃い色に白を混ぜて薄めるやり方は 使えない（白文字が92%混合で早々に4.5を割る）ので、面ごと淡い色に替える */ .il-head { padding: 14px 18px 13px; background: var(--accent-soft); border-right: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); } .il-role { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--accent-deep); } .il-verdict { margin: 5px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink-mid); } .il-items { list-style: none; margin: 0; padding: 12px 18px; display: grid; gap: 7px 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .il-items li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; font-size: 13px; line-height: 1.75; color: var(--ink-mid); } .il-items li strong { color: var(--ink); } /* 向きの印。ベタ塗り＋白抜きは強すぎたので、輪郭で見せる。 丸の形と輪郭が残るので、字だけに色を付けていた頃のように沈まない。 地はごく薄く敷くだけ（濃く敷くと項目の地の白とぶつかって濁る） */ .sign { width: 20px; height: 20px; border-radius: 50%; margin-top: 2px; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; border: 1.5px solid currentColor; background: color-mix(in srgb, currentColor 10%, transparent); } .sign.up { color: var(--sign-up); } .sign.down { color: var(--lane-3); } .sign.mid { color: var(--lane-1); } .il-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 !important; font-size: 12px; color: var(--ink-mid); } .il-legend span.k { display: inline-flex; align-items: center; gap: 7px; } .il-legend .sign { margin-top: 0; width: 18px; height: 18px; font-size: 11px; } @media (max-width: 700px) { .imp-lane { grid-template-columns: minmax(0, 1fr); } .il-head { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); } } /* ---------------- レーン図（全体像） ---------------- */ /* 段階の帯を横一列に敷き、その下にその段階で起きることを並べる。 図と本文が同じ場所にあるので往復せずに読める */ .lanes { margin: 24px 0 0; display: grid; gap: 26px; } /* 帯と項目の間は gap で空けない。空けると縦線が帯から離れて切れて見えるので、 間隔は下の .lane-items の padding-top で取る */ .lane { display: grid; } .lane.p1 { --bc: var(--lane-1); } .lane.p2 { --bc: var(--lane-2); } .lane.p3 { --bc: var(--lane-3); } /* べた塗りに白文字だと、3本並んだ帯が下の解説より先に目に入る。 面は薄い色に落とし、段階の色は左の棒と数値だけが持つ */ .lane-h { background: color-mix(in srgb, var(--bc) 10%, var(--bg-elev)); border-left: 4px solid var(--bc); border-radius: 0 8px 8px 0; padding: 10px 16px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } /* .sec p の下マージンより強く打ち消す必要があるので p を付けている */ .lane-h p { margin: 0; } .lane-h .lane-n { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); } /* 数値が何の期間かを示す一行 */ .lane-h .lane-w { font-size: 12.5px; line-height: 1.5; color: var(--ink-mid); } /* 段階の色をそのまま文字にすると、薄い面の上で --lane-1 が 4.47 までしか出ない。 少しだけ本文色を混ぜて 4.5 を超えさせる（暗い配色では逆に明るく寄る） */ .lane-h .lane-d { margin-left: auto; font-size: 18px; font-weight: 700; color: color-mix(in srgb, var(--bc) 80%, var(--ink)); } /* つなぎの語まで大きいと数値が埋もれるので、そこだけ本文の大きさに戻す */ .lane-h .lane-d .ld-s { font-size: 12.5px; font-weight: 400; color: var(--ink-mid); } /* 帯の左の棒と同じ幅・同じ位置で下ろし、帯の上端から最後の項目までを 1本の線でつなぐ。padding-left は帯の文字の左端に合わせてある */ .lane-items { list-style: none; margin: 0; padding: 14px 0 0 16px; border-left: 4px solid var(--bc); display: grid; gap: 18px; } .lane-items > li { min-width: 0; } .ln-badge { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--on-accent); background: var(--bc); padding: 2px 10px; border-radius: 999px; margin-bottom: 6px; } .lane-items h3 { margin: 0 0 5px; padding: 0; border: 0; font-size: 16px; font-weight: 700; line-height: 1.5; } .lane-items p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-mid); } .lane-items p a { font-weight: 700; white-space: nowrap; } /* 帯の中が一行に収まらない幅では、上段に段階名と年数、下段に説明を置く */ @media (max-width: 560px) { /* 段階名は折り返させない。年数の側を1frにして、長ければそちらを折り返す */ .lane-h { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 11px 14px; } .lane-h .lane-n { grid-area: 1 / 1; } .lane-h .lane-d { grid-area: 1 / 2; margin-left: 0; text-align: right; } .lane-h .lane-w { grid-area: 2 / 1 / 3 / 3; } /* 帯の padding が 14px になるので、項目の文字もそれに合わせる */ .lane-items { padding-left: 14px; } } /* ---------------- branch diagram ---------------- */ /* 質問→分岐→処理→決定までが一続きの流れなので、目を上下に往復させずに 全体を一度に見渡せる高さに収める。広い画面では下の4段を横一列に敷く */ /* --rail は縦積みのときの背骨の色。明暗どちらでも罫線より濃く、 本文より主張しない濃さになるよう accent と line を混ぜて作る。 padding-top は枠の上辺の外に浮く「STEP 1」の札の場所。マージンで取ると 相殺の有無で余白が変わって読みにくいので padding で確保する */ .branch { margin: 24px 0 10px; padding-top: 27px; --rail: color-mix(in srgb, var(--accent) 55%, var(--line)); } /* 質問と2つの分岐で1つの工程（基礎価格をつくる）なので、まとめて1枚の枠に入れる。 これで STEP 1 も、下の STEP 2〜4 と同じ「枠の外に札が浮く」形になる */ .branch-head { position: relative; padding: 12px 14px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; } .branch-q { text-align: center; font-weight: 700; font-size: 14px; line-height: 1.7; } /* 下限を min() で包んでいるのは、枠が 240px より狭くなる場面（縦積みで 左に背骨のぶん字下げしたとき）にトラックがはみ出さないようにするため */ .branch-arms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; margin: 10px 0 0; } .arm { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; text-align: center; background: var(--bg-elev); } .arm.yes { border-color: var(--accent); background: var(--accent-soft); } .arm.no { border-color: var(--accent-2); background: var(--accent-2-soft); } .arm-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; padding: 1px 10px; border-radius: 999px; margin-bottom: 6px; background: var(--bg-elev); color: var(--ink-mid); border: 1px solid var(--line); } .arm strong { display: block; font-size: 15px; } .arm p { margin: 3px 0 0 !important; font-size: 12.5px; color: var(--ink-mid); } /* 適用順序をもつ工程なので ol。番号は counter で振るため list-style は消す。 分岐そのものが1番目の工程（基礎価格をつくる）なので、ここは 2 から始める */ .branch-tail { position: relative; display: grid; gap: 7px; margin: 12px 0 0; list-style: none; padding: 0 0 0 76px; counter-reset: tstep 1; } .tail-step { position: relative; text-align: center; font-size: 13.5px; font-weight: 700; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; line-height: 1.6; } /* 段の名前（b）と、その中身の例示（span）。span は添え物なので落として置く */ .tail-step span { font-weight: 400; font-size: 12px; color: var(--ink-soft); } .tail-step.accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .tail-step.accent span { color: color-mix(in srgb, var(--on-accent) 75%, transparent); } /* STEP 1〜4 と GOAL は同じ並びなので、寸法も塗りも 1 枚の書式に揃える。 box-sizing を明示しているのは、全称セレクタ（* { box-sizing: border-box }）が 疑似要素には効かないため。これがないと ::after 側だけ枠と余白ぶん大きくなる。 幅を固定するのは、縦積みのときに背骨を通す位置を決めるため。 min-width なので、字が想定より広く出る環境でも溢れずに伸びる */ .q-step, .tail-step::after { box-sizing: border-box; min-width: 64px; height: 26px; padding: 0 6px; border-radius: 999px; place-items: center; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1; background: var(--bg-elev); border: 2px solid var(--accent); color: var(--accent-deep); } .tail-step::after { counter-increment: tstep; content: "STEP " counter(tstep); position: absolute; z-index: 1; display: grid; } /* 「STEP 1」の置き場所。既定は枠の上辺の外（横並びのときの下の段と同じ）。 下のメディアクエリで上書きするので、それより前に書いておく必要がある */ .q-step { position: absolute; left: 50%; top: -27px; transform: translateX(-50%); display: grid; z-index: 1; } /* 終点だけは工程ではないので、STEP と同じ4文字の GOAL にして塗りで区別する。 決定の箱と同じ色になるため、背景色のリングで縁を切る */ .tail-step.accent::after { content: "GOAL"; background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px var(--bg-elev); } /* 縦積みのときは札を左端に落とし、STEP 1 から GOAL まで1本の背骨で貫く。 名前と例示は1行に流したほうが縦幅を食わないので、段の中は block のまま。 背骨は札の幅（64px）の中心 ＝ 左端から 31px を通す。 札の左端は枠から 76px（札64 + すき間12）戻した位置 */ .branch-tail::before { content: ""; position: absolute; left: 31px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--rail) 0%, var(--rail) 88%, transparent 100%); } .tail-step::after { left: -76px; top: 50%; transform: translateY(-50%); } @media (max-width: 719px) { .tail-step b + span::before { content: "　"; } /* STEP 1 も同じ背骨に乗せる。枠が縦に長いので札は上寄せにし、 そこから枠の下（＋段までのすき間 12px）まで線を伸ばして下へつなぐ。 札が枠の外に出ないので、上に空けておいた場所も返す */ .branch { padding-top: 0; } .branch-head { margin-left: 76px; } .q-step { left: -76px; top: 15px; transform: none; } .branch-head::before { content: ""; position: absolute; left: -45px; top: 28px; bottom: -12px; width: 2px; background: var(--rail); } } /* 4段を横一列に。縦に積むと図が1画面に収まらず、流れを俯瞰できなくなる */ @media (min-width: 720px) { .branch-tail { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; margin-top: 14px; padding: 27px 0 0; /* 27 ＝ 札の高さ26 ＋ 箱との1px */ } .branch-tail::before { content: none; } /* 背骨は横並びでは使わない */ .tail-step { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 10px 12px; font-size: 13px; } .tail-step span { font-size: 11.5px; line-height: 1.55; } .tail-step::after { left: 50%; top: -27px; transform: translateX(-50%); } /* 丸と丸をつなぐレールを1区間ずつ引く。列は等幅なので、自分の中心から 「列幅＋すき間」だけ左へ戻せば、ちょうど前の丸の中心に届く。 区間ごとに濃くしていくと、番号を読まなくても進む向きが分かる */ .tail-step + .tail-step::before { content: ""; position: absolute; z-index: 0; left: calc(-50% - 20px); width: calc(100% + 20px); top: -15px; height: 2px; background: var(--accent); } .tail-step:nth-child(2)::before { background: color-mix(in srgb, var(--accent) 45%, var(--line)); } .tail-step:nth-child(3)::before { background: color-mix(in srgb, var(--accent) 70%, var(--line)); } /* 腕から降りる矢印は置かない。左端の丸の上に出すと左の腕だけが次に進むように、 図の中央に出すと列の切れ目を指しているように読める。順序は番号とレールで足りる */ /* 腕も1行に収める */ .arm { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 3px 10px; text-align: left; padding: 10px 16px; } .arm-label { margin-bottom: 0; } .arm strong { display: inline; } .arm p { margin: 0 !important; } /* 【お試し】STEP 1 の札だけ横長にする。この札が受け持つ枠は下の段より ずっと大きいので、幅で格の違いを出す。高さは揃えたまま。 縦積みのときは左の余白（76px）に収める必要があるので広げない */ .q-step { min-width: 132px; } } /* ---------------- 2方式の対比カード ---------------- */ /* 類似薬効比較方式（Ⅰ）（Ⅱ）を1枚ずつ縦に積む。横に並べると1枚あたりの幅が 半分になって行が折り返し、かえって読みにくいので、幅を本文いっぱいに使う。 （Ⅱ）は（Ⅰ）が使えないときの受け皿なので、読む順も上から下で無理がない */ .vsgrid { margin: 20px 0 0; display: grid; gap: 14px; } .vscard { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); padding: 0 0 14px; overflow: hidden; } .vscard.m1 { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .vscard.m2 { border-color: color-mix(in srgb, var(--accent-2) 50%, transparent); } .vs-h { padding: 11px 16px; } .vscard.m1 .vs-h { background: var(--accent-soft); } .vscard.m2 .vs-h { background: var(--accent-2-soft); } .vs-h b { display: block; font-size: 14.5px; line-height: 1.6; } .vs-h span { display: block; font-size: 12.5px; color: var(--ink-mid); line-height: 1.7; margin-top: 1px; } /* 場合分け（ul.cases）と候補（ul.pick）で1つのカウンタを共有し、 ①② のあとに ③④⑤ と続ける。行ごとに振り直すので、項目を 増減しても番号が自動で追従する */ .vs-row { padding: 11px 16px 0; counter-reset: calcstep; } .vs-row > p:first-child { margin: 0 0 4px !important; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-soft); } .vs-row p, .vs-row ul { font-size: 13.5px; line-height: 1.8; color: var(--ink-mid); margin: 0 !important; } .vs-row ul:not(.pick):not(.cases) { padding-left: 1.1em; } .vs-row strong { color: var(--ink); } /* 下の段すべてに掛かる前置き。段の中に入れると片方だけの話に見えるので外に出す */ .vs-row .vs-pre { font-size: 12px !important; line-height: 1.75 !important; color: var(--ink-soft); margin: 0 0 8px !important; } /* カードの中でさらに一段落とす入れ子。手順が2段あるときに使う */ .vs-sub { margin-top: 7px; padding: 8px 11px; border-radius: 7px; background: var(--bg-sunken); border: 1px solid var(--line); } .vs-sub > b { display: block; font-size: 12px; margin-bottom: 4px; color: var(--ink); } .vs-sub p, .vs-sub ul { font-size: 12.5px !important; line-height: 1.75 !important; } /* 年数は読み飛ばされやすいので拾えるようにするが、囲うと figure が バッジだらけになる。太字だけにとどめ、色は地の文から引き継ぐ */ .yr { font-weight: 700; } /* 全部出していちばん低い額を取る「候補」。区切りに「／」を使うと、 場合によって変わる年数の区切りと同じ記号になって読み分けられないので、 候補は必ず番号付きの箱にする */ ul.pick { list-style: none; margin: 6px 0 0 !important; padding: 0 !important; display: grid; gap: 5px; } ul.pick > li { position: relative; padding: 5px 10px 5px 30px; line-height: 1.75; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 6px; } ul.pick > li::before { content: counter(calcstep); counter-increment: calcstep; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%; box-sizing: border-box; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; line-height: 1; background: var(--accent-soft); color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } ul.pick > li.cap { border-style: dashed; } .pick-lead { margin: 0 !important; font-size: 12.5px; font-weight: 700; color: var(--ink); } /* どちらか一方だけが起きる「場合分け」。候補と違って箱では囲まない */ ul.cases { list-style: none; margin: 5px 0 0 !important; padding: 0 !important; display: grid; gap: 6px; } ul.cases > li { position: relative; padding-left: 25px; line-height: 1.8; } ul.cases > li::before { content: counter(calcstep); counter-increment: calcstep; position: absolute; left: 0; top: .3em; width: 17px; height: 17px; border-radius: 50%; box-sizing: border-box; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; line-height: 1; background: var(--accent-soft); color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } /* 年数が場合で変わる箇所は「〜のとき○年、〜のとき○年」と書き下す */ .cond { display: block; font-size: 11.5px; color: var(--ink-soft); line-height: 1.7; margin-top: 1px; } /* ---------------- formula ---------------- */ .formula { margin: 22px 0; background: var(--bg-sunken); border: 1px solid var(--line); border-left: 4px solid var(--accent-2); border-radius: 10px; padding: 18px 22px; font-size: 15.5px; font-weight: 700; line-height: 1.9; overflow-x: auto; } .formula .f-label { display: block; font-size: 11px; letter-spacing: .16em; font-weight: 700; color: var(--accent-2); margin-bottom: 6px; } .formula .f-note { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-soft); margin-top: 8px; line-height: 1.8; } /* 別表の算式は分数と指数だらけなので、通知の見た目に寄せる。 分子と分母を上下に積んで、間に横線を引く */ .frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 5px; line-height: 1.4; } .frac > span { display: block; padding: 0 7px; white-space: nowrap; } .frac > span:first-child { border-bottom: 1.5px solid currentColor; padding-bottom: 2px; } .frac > span:last-child { padding-top: 2px; } /* 分子・分母が長い式のときは折り返しを許す */ .frac.wide > span { white-space: normal; min-width: 15em; } .formula sup { font-size: .76em; font-weight: 700; } .formula .f-cond { display: block; font-size: 13px; font-weight: 400; color: var(--ink-mid); margin-top: 6px; } /* 算式で使う記号の説明。式のすぐ下に小さく置く */ .f-where { list-style: none; margin: -12px 0 24px; padding: 0 6px; font-size: 13px; color: var(--ink-mid); line-height: 1.9; display: grid; gap: 3px; } .f-where li { padding-left: 1.6em; text-indent: -1.6em; } .f-where b { color: var(--ink); font-weight: 700; } /* ---------------- stack formula ---------------- */ /* ---------------- 原価計算方式と開示度：つまみを動かすと帯が縮む ---------------- */ /* 原価計算方式と開示度を、同じ骨格の2枚で出す。片方が本文で片方が注記という 上下関係を作らないための構成。どちらのパネルも「帯 ＋ つまみ」でできていて、 制度が触る項にだけつまみが付く。 帯の長さは、その要素が自分の満額に対して何割かだけを表す。要素どうしの 比率は品目ごとに違い公表もされていないので、行を分けて全要素を同じ満額から 始めることで、横断の比較ができないようにしている */ .duo { margin: 18px 0 0; display: grid; gap: 14px; } .pane { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); overflow: hidden; } .pane-h { padding: 11px 15px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); } .pane-h > b { display: block; font-size: 13.5px; line-height: 1.6; } .pane-h > span { display: block; font-size: 11.5px; line-height: 1.7; color: var(--ink-soft); margin-top: 1px; } .pane-b { padding: 13px 15px 15px; } .pane-f { margin: 0 !important; padding: 10px 15px; border-top: 1px solid var(--line); background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 700; line-height: 1.6; text-align: center; font-variant-numeric: tabular-nums; } .pane-f small { font-weight: 400; font-size: 11.5px; opacity: .9; } /* 加算が残らない状態のときだけ、結論の帯を落とす */ .pane-f.dead { background: var(--danger); } .pane-note { margin: 0 !important; padding: 0 15px 13px; font-size: 11.5px !important; line-height: 1.7 !important; color: var(--ink-soft); } .rig-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 7px 0; } .rig-row + .rig-row { border-top: 1px solid var(--line-soft); } .rig-l > b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.55; } .rig-l > span { display: block; font-size: 10.5px; line-height: 1.6; color: var(--ink-soft); } .rig-t { height: 22px; border-radius: 5px; overflow: hidden; position: relative; background: var(--bg-sunken); border: 1px solid var(--line); } .rig-t > i { display: block; height: 100%; width: 100%; background: var(--accent-soft); border-right: 2px solid var(--accent); transition: width .22s ease; } .rig-row.cut .rig-t > i { background: var(--warn-soft); border-right-color: var(--warn); } .rig-t > u { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; font-size: 11px; font-weight: 700; color: var(--ink-mid); font-variant-numeric: tabular-nums; } /* つまみは JS が動いているときだけ出す。無ければ全部が満額のまま読める */ .rig-c { display: none; } :root[data-js] .rig-c { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 2px 0 3px; } .rig-c label { font-size: 11px; font-weight: 700; color: var(--warn); line-height: 1.6; } .rig-c output { font-size: 11.5px; font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; min-width: 74px; } .rig-c input[type="range"] { flex: 1 1 130px; min-width: 0; accent-color: var(--warn); height: 20px; } .rig-sw { border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: var(--bg-elev); color: var(--warn); border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.7; cursor: pointer; } .rig-sw[aria-pressed="true"] { background: var(--warn); color: var(--on-accent); border-color: var(--warn); } /* 狭い画面では帯を名前の下に落とす。168px の列を残すと帯がつぶれる */ @media (max-width: 620px) { .rig-row { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .rig-t > i { transition: none; } } /* ---------------- steps ---------------- */ .steps { list-style: none; margin: 24px 0 10px; padding: 0; display: grid; gap: 12px; } .steps li { display: flex; gap: 15px; align-items: flex-start; background: var(--bg-sunken); border: 1px solid var(--line-soft); border-radius: 10px; padding: 15px 18px; } .steps .s-n { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; } .steps h3, .steps h4 { margin: 0 0 3px; padding: 0; border: 0; font-size: 15.5px; } .steps p { margin: 0; font-size: 14px; color: var(--ink-mid); } /* ---------------- tables ---------------- */ .table-scroll { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; } /* 行内で列ごとの行数が違う表。既定の上揃えだと短いセルが浮くので上下中央に置く */ .table-scroll.mid tbody td { vertical-align: middle; } /* 行数が多い表を、ページを伸ばさずその場で送って読ませる。 縦に送るあいだ見出し行は貼り付けておく。どの列を見ているか見失うため。 overscroll-behavior は既定のままにして、端まで送ればページへ続くようにする */ .table-scroll.tall { max-height: 480px; overflow: auto; } .table-scroll.tall thead th { position: sticky; top: 0; z-index: 2; /* border-collapse: collapse では sticky した th の枠線が一緒に動かないので、 見出し下の罫は影で引く */ border-bottom: 0; box-shadow: inset 0 -2px 0 var(--line); } /* 表題（caption）は貼り付けない。見出し行と同じ top で競合するうえ、 何の表かは直前の見出しと見出し行で分かる */ caption { caption-side: top; text-align: left; padding: 14px 18px 10px; font-weight: 700; font-size: 13px; color: var(--ink-soft); letter-spacing: .06em; } thead th { background: var(--bg-sunken); text-align: left; padding: 11px 16px; font-size: 13px; font-weight: 700; border-bottom: 2px solid var(--line); white-space: nowrap; color: var(--ink); } tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.8; color: var(--ink-mid); } tbody td strong { color: var(--ink); } /* セルごとに行数が違う表は、上ぞろえだと行が散らかって見えるので上下中央にそろえる */ table.vmid thead th, table.vmid tbody td { vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); } tbody td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; } /* 加算率セル。td 内の strong は tbody td strong の色指定に負けるため inherit させる */ tr.rank-a td:nth-child(2), tr.rank-a td:nth-child(2) strong { color: var(--danger); font-size: 15px; } tr.rank-b td:nth-child(2), tr.rank-b td:nth-child(2) strong { color: var(--warn); font-size: 15px; } tr.rank-c td:nth-child(2), tr.rank-c td:nth-child(2) strong { color: var(--accent); font-size: 15px; } /* 価格の流れのシェーマ。モノとお金を上下2段に分け、向きで区別する */ .pf-lane { font-size: 10.5px; font-weight: 700; fill: var(--ink-soft); letter-spacing: .04em; } .pf-lane.money { fill: var(--accent-2); } .pf-box rect { fill: var(--bg-sunken); stroke: var(--line); stroke-width: 1; } .pf-box rect.accent { fill: var(--accent-soft); stroke: var(--accent); } .pf-t { font-size: 13px; font-weight: 700; fill: var(--ink); text-anchor: middle; } .pf-s { font-size: 10.5px; fill: var(--ink-soft); text-anchor: middle; } .pf-arrow { stroke-width: 2; } .pf-arrow.goods { stroke: var(--ink-soft); } .pf-arrow.money { stroke: var(--accent-2); } .pf-head.goods { fill: var(--ink-soft); } .pf-head.money { fill: var(--accent-2); } .pf-price { font-size: 11.5px; font-weight: 700; fill: var(--accent-2); text-anchor: middle; } .pf-price.accent { fill: var(--accent-deep); } .pf-brace { fill: none; stroke: var(--line); stroke-width: 1.5; } .pf-diff { font-size: 12.5px; font-weight: 700; fill: var(--ink); text-anchor: middle; } .pf-diffs { font-size: 10.5px; fill: var(--ink-soft); text-anchor: middle; } /* 通知の構成（章→節）の索引。表にすると最低520px幅を取って狭い画面で横に 振れてしまうので、階層を字下げで見せる入れ子のリストにする */ .idx { list-style: none; margin: 22px 0 8px; padding: 0; } .idx > li { padding: 13px 0; border-bottom: 1px solid var(--line-soft); } .idx > li:last-child { border-bottom: 0; } .idx-k { display: inline-block; min-width: 5.2em; margin-right: 10px; font-size: 12.5px; font-weight: 700; color: var(--accent); } .idx-t { font-weight: 700; color: var(--ink); } .idx-d { display: block; margin: 4px 0 0 calc(5.2em + 10px); font-size: 13.5px; line-height: 1.85; color: var(--ink-mid); } .idx-sub { list-style: none; margin: 12px 0 0 calc(5.2em + 10px); padding: 0; border-left: 2px solid var(--line); } .idx-sub li { display: flex; gap: 10px; flex-wrap: wrap; padding: 7px 0 7px 14px; font-size: 13.5px; line-height: 1.8; color: var(--ink-mid); } .idx-sub .n { min-width: 3.6em; font-weight: 700; color: var(--ink-soft); } .idx-sub .t { flex: 1 1 260px; color: var(--ink); } .idx-sub .g { flex: 0 1 auto; } /* 字下げに使える幅がなくなったら、章番号を上に出して左端をそろえる */ @media (max-width: 640px) { .idx-d, .idx-sub { margin-left: 0; } .idx-k { display: block; margin-bottom: 3px; } } /* グラフ中の基準線。データではなく、期間の区切りを示すための線 */ .refline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; } .reflabel { font-size: 10.5px; fill: var(--ink-soft); } /* ---------------- issues ---------------- */ .issue-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 24px; } .issue { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--bg-sunken); border-top: 3px solid var(--accent); } /* 群（h3）の下に置くときは札の見出しが h4 になる。見え方は同じにする */ .issue h3, .issue h4 { margin: 0 0 8px; padding: 0; border: 0; font-size: 15.5px; font-weight: 700; } .issue p { margin: 0; font-size: 14px; color: var(--ink-mid); line-height: 1.85; } .issue p + p { margin-top: 12px; } /* 札が同じ重さで並ぶと、どれが割れていてどれが決着済みなのか区別できない。 状態を上端の色と札で示し、見出しの前に「いつ決まるのか」を置く */ .issue.st-open { border-top-color: var(--warn); } .issue.st-dir { border-top-color: var(--accent-2); } .issue.st-watch { border-top-color: var(--lane-1); } .issue .i-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 0 0 9px; } .issue .i-when { font-size: 12px; color: var(--ink-soft); line-height: 1.6; } .tag.st-open { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 32%, transparent); } .tag.st-dir { background: var(--accent-2-soft); color: var(--sign-up); border-color: color-mix(in srgb, var(--accent-2) 32%, transparent); } .tag.st-watch { background: var(--bg-elev); color: var(--ink-soft); border-color: var(--line); } /* 争点の一行。本文を読む前に、何が問われているかだけ取れるようにする。 本文より濃くして、段落の連なりから浮かせる */ .issue .i-lede { margin: 0 0 11px; padding-bottom: 11px; border-bottom: 1px dashed var(--line); font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.8; } /* 状態の札の凡例。札と説明を2列で並べる（狭い画面では1列に落とす） */ .i-legend { margin: 16px 0 0; display: grid; gap: 6px 14px; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; } .i-legend dt { margin: 0; } .i-legend dd { margin: 0; font-size: 13px; color: var(--ink-mid); line-height: 1.8; } @media (max-width: 560px) { .i-legend { grid-template-columns: 1fr; gap: 2px; } .i-legend dd { margin-bottom: 8px; } } /* 群の見出し。節の h2 と札の h4 のあいだの段 */ .sec h3.issue-grp { margin: 34px 0 0; padding-left: 13px; font-size: 15px; font-weight: 700; line-height: 1.6; border-left: 4px solid var(--line); } .sec h3.issue-grp:first-of-type { margin-top: 26px; } .sec h3.issue-grp .ig-d { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--ink-soft); } .sec h3.issue-grp + .issue-grid { margin-top: 14px; } /* 4枚の群が3列に入ると3＋1で割れ、2行目に大きな余白が残る。 2列に寄せると2×2で収まり、2枚の群と札の幅もそろう。 下限を min(…, 100%) にしているのは、容器が400pxより狭いときに minmax の下限が勝って札が枠からはみ出すため */ .issue-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); } .issue ul { margin: 12px 0 0; padding-left: 1.15em; font-size: 13.5px; color: var(--ink-mid); line-height: 1.8; } .issue ul + p { margin-top: 12px; } .issue li { margin-bottom: 7px; } .issue li:last-child { margin-bottom: 0; } .issue li strong { color: var(--ink); } /* ---- 論点の群（Section 16） ---- h1（ページ）と h3（個々の論点）のあいだにもう1段いる。 h3 と同じ大きさにすると段の違いが読めないので、 字は大きくせず、帯にして地色で切る */ .sec h2.grp { margin: 46px 0 0; padding: 12px 18px; font-size: 15.5px; font-weight: 700; line-height: 1.6; border: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; scroll-margin-top: calc(var(--header-h) + 20px); } .sec h2.grp .grp-n { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--accent); } .sec h2.grp .grp-d { font-size: 12.5px; font-weight: 400; color: var(--ink-mid); } /* 帯の直後の見出しは間を詰めて、同じかたまりに見せる */ .sec h2.grp + h3 { margin-top: 20px; } /* 論点1つを「争点／答え／宿題」の3行で受ける定型。 本文を読む前に、割れている点と決着の有無だけ先に取れるようにする */ .stance { margin: 14px 0 18px; display: grid; grid-template-columns: max-content minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken); overflow: hidden; } .stance dt { padding: 11px 16px; font-size: 12.5px; font-weight: 700; line-height: 1.7; white-space: nowrap; border-bottom: 1px solid var(--line-soft); } .stance dd { margin: 0; padding: 11px 18px 11px 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-mid); border-bottom: 1px solid var(--line-soft); } .stance dt:last-of-type, .stance dd:last-of-type { border-bottom: 0; } .stance dd strong { color: var(--ink); } /* 3行の役割を色で分ける。争点＝中立、答え＝決着済み、宿題＝未決 */ .stance .s-q { color: var(--ink-soft); } .stance .s-a { color: var(--accent-2); } .stance .s-t { color: var(--warn); } /* 論点マップ。薬価の一生の3つの場面に9つの論点を置いた図。 枠は本文の見出しへのリンクなので、当てたときに動くようにする */ .issue-map .im-band { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 32%, transparent); } .issue-map .im-band-t { fill: var(--accent-deep); font-size: 12.5px; font-weight: 700; text-anchor: middle; } .issue-map .im-arrow { fill: var(--accent); } .issue-map .im-tick { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; } .issue-map .im-panel { fill: var(--bg-sunken); stroke: var(--line); } .issue-map .im-gn { fill: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; } .issue-map .im-gt { fill: var(--ink); font-size: 13.5px; font-weight: 700; } .issue-map .im-box { fill: var(--bg-elev); stroke: var(--line); transition: fill .12s, stroke .12s; } .issue-map .im-t { fill: var(--ink); font-size: 13px; font-weight: 700; } .issue-map .im-s { fill: var(--ink-soft); font-size: 10.5px; } .issue-map a { text-decoration: none; } .issue-map a:hover .im-box, .issue-map a:focus-visible .im-box { fill: var(--accent-soft); stroke: var(--accent); } .issue-map a:hover .im-t { fill: var(--accent-deep); } /* ---------------- glossary ---------------- */ .glossary { margin: 24px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .glossary dt { font-weight: 700; padding: 12px 18px; font-size: 14px; background: var(--bg-sunken); border-bottom: 1px solid var(--line-soft); white-space: nowrap; } .glossary dd { margin: 0; padding: 12px 20px; font-size: 14px; color: var(--ink-mid); border-bottom: 1px solid var(--line-soft); line-height: 1.85; } .glossary dt:last-of-type, .glossary dd:last-of-type { border-bottom: 0; } /* 絞り込みで最後になった行。枠の下辺と二重線にならないよう、罫線を消す */ .glossary dt.is-last, .glossary dd.is-last { border-bottom: 0; } .gl-empty { margin: 24px 0 0; font-size: 14px; color: var(--ink-soft); } /* 用語集の絞り込みバー。検索欄は1つだけなので、語数を同じ行に並べる */ .gl-filterbar .filter-row.search { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .gl-filterbar .filter-field { flex: 1 1 220px; max-width: 26em; } /* 入力欄と同じ高さの箱にして、上下の中心をそろえる */ .gl-filterbar .result-count { margin-left: 0; line-height: 1.7; padding: 9px 0; border: 1px solid transparent; } /* ---------------- links ---------------- */ .links { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; } .links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-sunken); } .links a { font-weight: 700; text-decoration: none; font-size: 14.5px; } .links a:hover { text-decoration: underline; } .links span { font-size: 13px; color: var(--ink-soft); } /* 2列に並べる版。左の列を上から下まで埋めてから右の列へ移る（新聞の段組みと同じ）。 grid のままだと左右に振り分けられてしまうので、段組みに切り替える。 列数を決め打ちしないので、項目が増減しても振り分けは自動で釣り合う */ .links.two { display: block; columns: 2; column-gap: 10px; } .links.two li { break-inside: avoid; margin-bottom: 10px; } @media (max-width: 760px) { .links.two { columns: 1; } } /* ---------------- footer ---------------- */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-elev); padding: 34px 0 44px; } .footer-inner { text-align: center; } .f-brand { margin: 0 0 6px; font-weight: 700; letter-spacing: .06em; } .f-note { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-soft); } .f-back a { font-size: 13px; text-decoration: none; } .f-back a:hover { text-decoration: underline; } /* 区画名の添え字（.nav-ja）は、上の帯の中では .global-nav の指定で1行下に置かれる。 フッターに同じ札を置くとその指定が効かず、「nominaR8制度の解説」と字が続いてしまう。 ここでは括弧でくくって、名前と添え字の切れ目を作る */ .f-back .nav-ja { color: var(--ink-soft); font-size: 12px; } .f-back .nav-ja::before { content: '（'; } .f-back .nav-ja::after { content: '）'; } /* ---------------- 令和8年度対応：追加コンポーネント ---------------- */ /* ヘッダーの版表示は、隣の日付の札と形をそろえるため ヘッダの節（.brand-ver, .tn-chip）でまとめて指定している */ /* ヒーローの出典注記 */ /* トップの .hero では直前の .lead が下マージン32pxを持つため、 負のマージンで詰めて net 14px の間隔にしている。 */ .lead-src { max-width: 62ch; margin: -18px 0 30px; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); border-left: 3px solid var(--accent-2); padding-left: 14px; } .lead-src strong { color: var(--ink-mid); } /* 強調セクション（改革の要点 / PMP） */ .highlight-sec { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--shadow-md); /* 上端のグラデーション帯。負のマージンを使わないので横幅を広げない */ background-image: linear-gradient(90deg, var(--accent), var(--accent-2)); background-size: 100% 3px; background-repeat: no-repeat; background-position: top left; } .sec-sub { margin: -18px 0 22px !important; font-size: 12.5px; letter-spacing: .1em; color: var(--ink-soft); font-weight: 700; } h4.sub-h { margin: 28px 0 12px; font-size: 15px; font-weight: 700; color: var(--ink-mid); letter-spacing: .02em; } .tiny { font-size: 12px; color: var(--ink-soft); line-height: 1.7; } /* 新旧対照表。行の情報量が多いので、列の境界と行の境界を両方立てて 格子として読めるようにする。下線だけだとどこまでが1行か目で追えない */ table.diff { min-width: 580px; } table.diff td { vertical-align: top; } /* 幅20%だと「特許期間中の価格維持」「類似薬効比較方式（Ⅱ）」あたりが 2行に割れて右端が大きく空くので、見出しが1行に収まる幅を取る */ table.diff thead th:first-child, table.diff td:first-child { white-space: normal; width: 26%; } /* 左端は行の見出しとして扱う。面で塗ると行の起点がはっきりする */ table.diff tbody td:first-child { background: var(--bg-sunken); } /* 塗った分、既定のホバーが左端だけ効かなくなるので当て直す */ table.diff tbody tr:hover td:first-child { background: color-mix(in srgb, var(--accent) 7%, var(--bg-sunken)); } table.diff td.new { background: color-mix(in srgb, var(--accent-2) 9%, transparent); color: var(--ink); } table.diff td.new strong { color: var(--accent-2); } /* 令和8年度基準の欄は、色の面だけでなく縦罫でも切る。 欄そのものを塗ってあるぶん、罫は境目が分かる最小限でよい。 太いと緑の帯として目に残るので、行の線と同じ1pxに揃える */ table.diff thead th:last-child, table.diff tbody td.new { border-left: 1px solid color-mix(in srgb, var(--accent-2) 50%, transparent); } /* 領域｜従来 の境目は控えめに */ table.diff thead th:nth-child(2), table.diff tbody td:nth-child(2) { border-left: 1px solid var(--line); } /* 行の区切り。列を塗り分けている表なので、--line 程度の線では 塗りの帯が縦につながって見え、どこで行が変わるか分からなくなる。 塗りの上に重ねて必ず濃く出るよう、地の色ではなく半透明のインクで引き、 太さは1pxに留める。2pxまで太らせると線そのものが目を引いて 中身より先に飛び込んでくるので、太さではなく濃さで見せる */ table.diff tbody td { border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 60%, transparent); } table.diff tbody tr:last-child td { border-bottom: 0; } table.diff .sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; } /* 新設ルールの行 */ tbody tr.new-row td { background: color-mix(in srgb, var(--accent-2) 8%, transparent); } tbody tr.new-row:hover td { background: color-mix(in srgb, var(--accent-2) 13%, transparent); } /* 開示度などのキー・バリュー表示 */ .kv-grid { display: grid; gap: 8px; margin: 14px 0 6px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .kv { display: flex; flex-direction: column; gap: 2px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px; } .kv .k { font-size: 12.5px; color: var(--ink-soft); } .kv .v { font-size: 15px; font-weight: 700; } .kv .v.good { color: var(--accent-2); } .kv .v.mid { color: var(--warn); } .kv .v.bad { color: var(--danger); } .kv-note { margin: 8px 0 0 !important; font-size: 12px; color: var(--ink-soft); } /* 本文中の小さな算式 */ .mini-formula { display: inline-block; margin-top: 6px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px; font-size: 13px; font-weight: 700; line-height: 1.8; } /* PMP の期間構造図 */ /* 3つの段階は「維持→終了→控除」の並びなので、幅があるうちは横に並べる。 1段あたりの文字数が少なく、縦に積むと右側が空いたまま3行流れてしまう */ .pmp-diagram { margin: 26px 0 10px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0 10px; } .pmp-phase { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: grid; gap: 5px; align-content: start; } .pmp-phase .ph-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .pmp-phase .ph-desc { font-size: 15px; font-weight: 700; line-height: 1.7; } .pmp-phase .ph-cond { font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; } /* 列幅では「A または B または C」が横に流れないので、接続詞ごとに行を折る */ .pmp-phase .or { display: block; font-weight: 400; color: var(--ink-soft); font-size: 11.5px; line-height: 1.5; padding: 1px 0 0; } .pmp-phase.maintain { background: var(--accent-2-soft); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); } .pmp-phase.maintain .ph-label { color: var(--accent-2); } .pmp-phase.end { background: var(--bg-sunken); border-style: dashed; } .pmp-phase.end .ph-label { color: var(--ink-soft); } .pmp-phase.deduct { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } .pmp-phase.deduct .ph-label { color: var(--warn); } .pmp-arrow { align-self: center; text-align: center; font-size: 11px; color: var(--ink-soft); line-height: 1; } .pmp-arrow::before { content: "▶"; } /* 3列だと1列が狭くなりすぎる幅では、元どおり縦に積む */ @media (max-width: 760px) { .pmp-diagram { grid-template-columns: 1fr; gap: 4px; } .pmp-arrow::before { content: "▼"; } .pmp-phase .or { display: inline; font-size: 13px; padding: 0 4px; } } /* 要件リスト */ .req-list { margin: 16px 0 8px; padding-left: 1.4em; display: grid; gap: 8px; } .req-list li { font-size: 14.5px; line-height: 1.85; color: var(--ink-mid); } .req-list li strong { color: var(--ink); } /* 費用対効果のβ行 */ tr.beta-up td:nth-child(3), tr.beta-up td:nth-child(3) strong { color: var(--accent-2); font-size: 15.5px; } tr.beta-d1 td:nth-child(3), tr.beta-d1 td:nth-child(3) strong { color: var(--warn); font-size: 15.5px; } tr.beta-d2 td:nth-child(3), tr.beta-d2 td:nth-child(3) strong { color: var(--warn); font-size: 15.5px; } tr.beta-d3 td:nth-child(3), tr.beta-d3 td:nth-child(3) strong { color: var(--danger); font-size: 15.5px; } /* ---------------- 下層ページ（問い合わせ） ---------------- */ .page-hero { background: radial-gradient(900px 300px at 20% -20%, var(--accent-soft), transparent 65%), var(--bg); border-bottom: 1px solid var(--line); } .page-hero-inner { padding: 46px 0 40px; } .page-hero h1 { margin: 0 0 16px; font-size: clamp(26px, 4.2vw, 40px); line-height: 1.35; font-weight: 700; } .page-hero .lead { margin-bottom: 0; } /* 下層ページでは .lead の下マージンが 0 のため、.lead-src の負のマージンを そのまま効かせると文字が重なる。ここでは正の間隔に戻す。 */ .page-hero .lead-src { margin-top: 14px; margin-bottom: 0; } .breadcrumb { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .breadcrumb a { text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb .sep { opacity: .5; } /* 単一カラムレイアウト */ .layout.single { grid-template-columns: minmax(0, 1fr); gap: 0; } /* ---------------- 毎回出す注意書き ---------------- */ /* の showModal を使う。背景の覆いと Esc、焦点の閉じ込めが ブラウザ側で用意されているので、自前で作らない。 JSが動かない環境では開かない。本文中の同じ注意書きが残る */ .notice { width: min(520px, calc(100vw - 32px)); margin: auto; padding: 24px 26px 22px; border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-left: 4px solid var(--warn); border-radius: var(--radius); background: var(--bg-elev); color: var(--ink-mid); font-size: 14px; line-height: 1.9; box-shadow: var(--shadow-md); } .notice::backdrop { background: rgba(16, 24, 34, .55); } .notice p { margin: 0 0 14px; } .notice strong { color: var(--ink); font-weight: 700; } .notice-t { font-size: 15px; font-weight: 700; color: var(--warn); letter-spacing: .02em; } /* 「今日はもう表示しない」は毎回押すものではないので、 ボタンらしくは作らず、確認のボタンの左に控えめに置く */ .notice form { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: flex-end; } .notice-skip { font: inherit; font-size: 12.5px; cursor: pointer; padding: 6px 2px; border: 0; background: transparent; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; } .notice-skip:hover { color: var(--ink-mid); } .notice-skip:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 4px; } .notice-ok { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 9px 22px; border-radius: 999px; color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); } .notice-ok:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .notice-ok:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; } @media (max-width: 560px) { .notice { padding: 20px 18px 18px; font-size: 13.5px; } /* 縦に積む。確認のボタンが上、控えめなほうが下 */ .notice form { flex-direction: column-reverse; align-items: stretch; gap: 10px; } .notice-ok { width: 100%; } .notice-skip { padding: 2px; } } /* ---------------- フォーム ---------------- */ .form-card { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px 28px; margin-top: 22px; } .field { margin-bottom: 22px; } .field:last-of-type { margin-bottom: 0; } /* 種別のように fieldset で組む欄。ブラウザ既定の枠と字下げを消す */ .field-set { border: 0; padding: 0; margin-inline: 0; } /* 短い入力欄を横に並べる。幅が足りなければ自動で縦積みになる。 2列に分かれるぶん塊として見えるので、上の項目とは少し離す */ .field-pair { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 34px 0 22px; } /* 直前が自分の説明文なら、離してはいけないので詰め直す */ .hint + .field-pair { margin-top: 8px; } .field-pair .field { margin-bottom: 0; } /* セクションを選ぶと下に出てくる「中の項目」 */ .field select + select { margin-top: 8px; } .field > label, .field-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; font-size: 14.5px; font-weight: 700; color: var(--ink); } .req, .opt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 7px; border-radius: 4px; line-height: 1.6; } .req { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); } .opt { background: var(--bg-elev); color: var(--ink-soft); border: 1px solid var(--line); } .hint { margin: 0 0 8px !important; font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; } .field input[type="text"], .field input[type="email"], .field select, .field textarea { width: 100%; font-family: inherit; font-size: 15px; line-height: 1.8; color: var(--ink); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 9px; padding: 11px 14px; transition: border-color .15s, box-shadow .15s; } .field textarea { resize: vertical; min-height: 120px; } .field textarea.tall { min-height: 190px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .field input:invalid:not(:placeholder-shown), .field textarea:invalid:not(:placeholder-shown) { border-color: var(--danger); } .field select { appearance: none; cursor: pointer; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } /* 種別のカード型ラジオ */ .choice-group { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* ラジオと見出しを1行目に、説明文は2行目に全幅で置く。 説明文の左端がラジオの左端に揃うよう、位置は grid で決めて数値合わせをしない */ .choice { display: grid; cursor: pointer; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; row-gap: 2px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; transition: border-color .15s, background .15s; } .choice input { grid-column: 1; grid-row: 1; align-self: start; /* ブラウザ既定の左マージンが残ると説明文と頭がずれる */ margin: 3px 0 0; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .choice .c-t { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 14.5px; } .choice .c-d { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; } .choice:hover { border-color: var(--accent); } .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } /* チェックボックス行 */ .check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.8; color: var(--ink-mid); cursor: pointer; } .check-row input { margin-top: 5px; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .char-count { display: block; text-align: right; font-size: 12px; color: var(--ink-soft); margin-top: 4px; } .char-count.over { color: var(--danger); font-weight: 700; } /* ハニーポット（スパム対策・視覚的に隠す） */ .honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); } button.btn { font: inherit; cursor: pointer; border: 0; } button.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); } button.btn.primary:hover:not(:disabled) { background: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); } button.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } button.btn.ghost { border: 1px solid var(--line); color: var(--ink-mid); background: var(--bg-elev); } button.btn.ghost:hover { border-color: var(--accent); color: var(--accent-deep); } /* 送信結果の表示 */ .form-status { margin-top: 18px; padding: 16px 20px; border-radius: 10px; border: 1px solid var(--line); font-size: 14.5px; line-height: 1.85; } .form-status[hidden] { display: none; } .form-status .fs-title { display: block; font-weight: 700; margin-bottom: 4px; } .form-status.ok { background: var(--accent-2-soft); color: var(--ink); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); } .form-status.ok .fs-title { color: var(--accent-2); } .form-status.ng { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .form-status.ng .fs-title { color: var(--danger); } .form-status.info { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .form-status.info .fs-title { color: var(--warn); } .form-status code { font-size: 12.5px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; } /* 対応できること／できないこと */ .scope-grid { display: grid; gap: 16px; margin: 22px 0 8px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .scope { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--bg-sunken); } .scope h3 { margin: 0 0 10px; padding: 0; border: 0; font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .scope .mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--on-accent); flex: 0 0 22px; } .scope.can { border-top: 3px solid var(--accent-2); } .scope.can .mark { background: var(--accent-2); } .scope.cannot { border-top: 3px solid var(--danger); } .scope.cannot .mark { background: var(--danger); } .scope ul { margin: 0; padding-left: 1.2em; font-size: 14px; color: var(--ink-mid); line-height: 1.85; } .scope li { margin-bottom: 6px; } .scope li:last-child { margin-bottom: 0; } /* 色を持たせない版。カードとして見せず、注記として読ませたいときに使う。 横に並べず縦に積み、区切りは罫線1本でつける */ .scope-grid.quiet { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 20px 0 0; } .scope-grid.quiet .scope { border: 0; border-top: 0; border-radius: 0; background: none; padding: 0; } /* 2つ目以降は罫線で区切る。上の border: 0 を打ち消すので、必ずあとに置く */ .scope-grid.quiet .scope + .scope { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .scope-grid.quiet .scope h3 { font-size: 14.5px; color: var(--ink); margin-bottom: 8px; gap: 7px; } /* 枠は外しても、✓と!の丸は色で塗って可否が一目で分かるようにする */ .scope-grid.quiet .scope .mark { width: 18px; height: 18px; flex: 0 0 18px; font-size: 11.5px; border: 0; color: var(--on-accent); } .scope-grid.quiet .scope.can .mark { background: var(--accent-2); } .scope-grid.quiet .scope.cannot .mark { background: var(--danger); } /* 見出しで「何の並びか」は分かるので、行頭の記号は落とす */ .scope-grid.quiet .scope ul { list-style: none; padding-left: 0; font-size: 14px; line-height: 1.7; } .scope-grid.quiet .scope li { margin-bottom: 5px; } /* 1項目1行だと空きが目立つので、句点でつないだ地の文でも置けるようにする */ .scope-grid.quiet .scope p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink-mid); } .scope-grid.quiet .scope p strong { color: var(--ink); font-weight: 700; } /* ---------------- チャート（過去の制度分析） ---------------- */ /* データビズ用のスロット。ライト／ダークで別々に選定し、 それぞれの実サーフェス（#ffffff / #171e27）に対して検証済み。 */ .viz { --viz-surface: #ffffff; --viz-grid: #e1e0d9; --viz-axis: #c3c2b7; --viz-muted: #898781; --viz-ink: #0b0b0b; --series-1: #2a78d6; /* 内用薬 */ --series-2: #eb6834; /* 注射薬 */ --series-3: #1baf7a; /* 外用薬 */ --series-4: #eda100; /* 歯科用薬剤 */ --ord-prev: #86b6ef; /* 序列ランプ：前年 */ --ord-curr: #2a78d6; /* 序列ランプ：当年 */ } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .viz { --viz-surface: #171e27; --viz-grid: #2c2c2a; --viz-axis: #383835; --viz-muted: #898781; --viz-ink: #ffffff; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --ord-prev: #184f95; --ord-curr: #3987e5; } } :root[data-theme="dark"] .viz { --viz-surface: #171e27; --viz-grid: #2c2c2a; --viz-axis: #383835; --viz-muted: #898781; --viz-ink: #ffffff; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --ord-prev: #184f95; --ord-curr: #3987e5; } .fig { margin: 26px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); padding: 20px 22px 18px; } .fig-title { margin: 0 0 2px !important; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.6; } .fig-sub { margin: 0 0 14px !important; font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; } .fig-note { margin: 12px 0 0 !important; font-size: 12px; color: var(--ink-soft); line-height: 1.8; } .chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .chart-wrap svg { display: block; min-width: 560px; width: 100%; height: auto; } /* 凡例 */ .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0; list-style: none; } .legend li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-mid); } .legend .swatch { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; } .legend .s1 { background: var(--series-1); } .legend .s2 { background: var(--series-2); } .legend .s3 { background: var(--series-3); } .legend .s4 { background: var(--series-4); } .legend .op { background: var(--ord-prev); } .legend .oc { background: var(--ord-curr); } /* SVG 内の共通クラス */ .grid { stroke: var(--viz-grid); stroke-width: 1; } .zeroline{ stroke: var(--viz-axis); stroke-width: 1.5; } .axis { stroke: var(--viz-axis); stroke-width: 1; } .tick { fill: var(--viz-muted); font-size: 11px; font-variant-numeric: tabular-nums; } .tick.y { text-anchor: end; } .tick.x { text-anchor: middle; } .serieslabel { font-size: 11.5px; font-weight: 700; } .pointlabel { font-size: 11.5px; font-weight: 700; fill: var(--viz-ink); font-variant-numeric: tabular-nums; } /* 点の数が多く全点に値を添える図。字を詰めて、隣と競らないようにする */ .pointlabel.dense { font-size: 10px; font-weight: 400; fill: var(--ink-mid); } /* 改定の理由。カーソルを当てなくても読めるよう点のそばに置く。 数値より一段弱くして、線と数字の読み取りを邪魔しないようにする */ .reasonlabel { font-size: 9.5px; fill: var(--ink-soft); } .catlabel { fill: var(--viz-ink); font-size: 11.5px; text-anchor: end; } /* 薬価の推移の下に並べる制度の帯の名前。線と数字より一段弱くする */ .bandlabel { fill: var(--ink-soft); font-size: 10.5px; } /* 同じ軸の図を上下に並べて比べるとき、各段に付ける見出し */ .paneltitle { fill: var(--viz-ink); font-size: 12.5px; font-weight: 700; } .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .dot { stroke: var(--viz-surface); stroke-width: 2; } .l1 { stroke: var(--series-1); } .f1 { fill: var(--series-1); } .l2 { stroke: var(--series-2); } .f2 { fill: var(--series-2); } .l3 { stroke: var(--series-3); } .f3 { fill: var(--series-3); } .l4 { stroke: var(--series-4); } .f4 { fill: var(--series-4); } .bar-prev { fill: var(--ord-prev); } .bar-curr { fill: var(--ord-curr); } /* 表ビュー（アクセシビリティの担保） */ .table-view { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; } .table-view > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent-deep); list-style: none; display: flex; align-items: center; gap: 7px; } .table-view > summary::-webkit-details-marker { display: none; } .table-view > summary::before { content: "▶"; font-size: 9px; transition: transform .15s; display: inline-block; } .table-view[open] > summary::before { transform: rotate(90deg); } .table-view > summary:hover { text-decoration: underline; } .table-view table { min-width: 460px; font-size: 13px; } .table-view tbody td { padding: 9px 14px; font-variant-numeric: tabular-nums; } .table-view thead th { padding: 9px 14px; } /* 数値を強調する行 */ tbody td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* 計算例のボックス */ .calc { margin: 22px 0; border: 1px solid var(--line); border-left: 4px solid var(--accent-2); border-radius: 10px; background: var(--bg-sunken); padding: 18px 22px; } .calc-title { margin: 0 0 12px !important; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--accent-2); } .calc-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .calc-steps li { display: flex; gap: 12px; align-items: baseline; font-size: 14px; line-height: 1.8; flex-wrap: wrap; } .calc-steps .cs-n { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ink-soft); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; } .calc-steps .cs-v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .calc-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 700; font-size: 15px; } .calc-total .t-v { color: var(--accent-2); font-variant-numeric: tabular-nums; } /* ---------------- 分割ページ用のナビゲーション ---------------- */ /* パンくず帯 */ .crumbbar { padding: 20px 0 0; } .crumbbar .breadcrumb { margin: 0; } /* サイドバーをサイト全体の目次として使う */ /* 小見出しは全セクション分を持たせておく。 今いるセクションはその場に開いたまま、それ以外は浮かせて出す。 その場で開くと、下の項目が押し下げられて狙った項目が逃げてしまうため */ .toc .toc-list > li { position: relative; } .toc .toc-sub.pop { position: fixed; z-index: 60; margin: 0; min-width: 186px; max-width: 260px; padding: 7px 10px 8px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateX(-4px); /* 通り過ぎただけで開かないよう、出るときだけ遅らせる */ transition: opacity .12s ease, transform .12s ease, visibility 0s .12s; } .toc .toc-list > li:hover > .toc-sub.pop, .toc .toc-list > li:focus-within > .toc-sub.pop { opacity: 1; visibility: visible; transform: none; transition: opacity .12s ease .18s, transform .12s ease .18s, visibility 0s .18s; } /* 浮かせた側では罫線と字下げをやめ、独立したパネルとして見せる */ .toc .toc-sub.pop { border-left-width: 1px; padding-left: 10px; margin-left: 0; } .toc .toc-sub.pop a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ホバーできない環境では出しようがないので、現在地の分だけを見せる */ @media (hover: none) { .toc .toc-sub.pop { display: none; } } /* 小見出しは番号の下ではなく見出しの真下から始めたいので、 番号カラム（1.75em）＋グリッドの隙間（4px）分だけ字下げする */ .toc .toc-sub { /* リンク自身の左パディング10pxを差し引いて、文字の頭を見出しにそろえる */ padding-left: calc(1.75em - 10px); margin: 3px 0 6px; list-style: none; border-left: 1px solid var(--line); margin-left: calc(0.875em + 2px); } .toc .toc-sub a { font-size: 12.5px; color: var(--ink-soft); padding-block: 3px; } .toc .toc-sub a:hover { color: var(--ink); } /* スクロール連動で付く current。親項目の強い塗りとは変えて、控えめに示す */ .toc .toc-sub a.current { color: var(--accent-deep); font-weight: 700; background: transparent; border-left-color: transparent; } .toc-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 2px; } .toc-foot a { display: block; padding: 4px 10px; border-radius: 7px; font-size: 12.5px; color: var(--ink-soft); text-decoration: none; } .toc-foot a:hover { background: var(--bg-sunken); color: var(--ink); } .toc-foot a.current { color: var(--accent-deep); background: var(--accent-soft); font-weight: 700; } /* サイドバーの見出し付きグループ（用語集・参考リンク／あわせて読む） */ /* 前後ページの送り */ .pager { display: grid; gap: 12px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .pager a { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); padding: 15px 18px; text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s, box-shadow .15s; } .pager a:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-md); } .pager .p-dir { font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); font-weight: 700; } .pager .p-t { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.6; } .pager .next { text-align: right; } /* トップページのカード一覧 */ .hub-grid { display: grid; gap: 14px; margin: 24px 0 8px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* 1行3枚で折り返す。4枚並ぶ幅では「番号＋役割ラベル」が1行に収まらず、 カードごとに折り返しの有無が変わって見出しの高さがそろわないため */ @media (min-width: 900px) { .hub-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .hub-card { display: grid; gap: 3px; align-content: start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken); padding: 12px 18px 13px; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s, background .15s; } .hub-card:hover { border-color: var(--accent); background: var(--bg-elev); transform: translateY(-2px); box-shadow: var(--shadow-md); } .hub-card .h-n { font-size: 10.5px; letter-spacing: .16em; font-weight: 700; color: var(--accent); line-height: 1.5; } /* 目次のまとまり（導入／制度本体／状況） */ /* カード上部の「番号＋役割」の行 */ .hub-card .h-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hub-card .h-role { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } .hub-card .h-t { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.4; } .hub-card .h-d { font-size: 13px; color: var(--ink-mid); line-height: 1.65; } /* ニュース項目の出典行 */ .news-src { margin: 10px 0 0 !important; font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; } .news-src a { text-decoration: none; } .news-src a:hover { text-decoration: underline; } /* 日付バッジは詰まりやすいので数字を等幅に */ .timeline .t-badge { font-variant-numeric: tabular-nums; } /* 日付と、誰が動かしたのかの札を横に並べる。 狭い画面では札が下に落ちるので、行間ではなく gap で間を取る */ .timeline .t-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; } .timeline .t-head .t-badge { margin-bottom: 0; } /* 誰が動かしたのか（中医協・政府・財務省・施行）を、点の色と札で分ける。 時系列は主体が入り混じるので、日付だけだと読み手が毎回本文で確かめることになる。 色は --ph（点と縦線の色）を差し替えるだけで済むよう作ってある */ .timeline li.t-chuikyo { --ph: var(--accent); } .timeline li.t-gov { --ph: var(--accent-2); } .timeline li.t-mof { --ph: var(--warn); } .timeline li.t-apply { --ph: var(--lane-1); } .timeline li.t-gov .t-badge { color: var(--sign-up); background: var(--accent-2-soft); } .timeline li.t-mof .t-badge { color: var(--warn); background: var(--warn-soft); } .timeline li.t-apply .t-badge { color: var(--ink-soft); background: var(--bg-sunken); } .t-who { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 1px 9px; border-radius: 999px; white-space: nowrap; color: var(--ink-soft); border: 1px solid var(--line); } .timeline li.t-chuikyo .t-who { color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 34%, transparent); } .timeline li.t-gov .t-who { color: var(--sign-up); border-color: color-mix(in srgb, var(--accent-2) 34%, transparent); } .timeline li.t-mof .t-who { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 34%, transparent); } /* 色の凡例。点そのものと同じ描き方にして、見比べなくても対応が分かるようにする */ .t-legend { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--ink-soft); } .t-legend li { display: inline-flex; align-items: center; gap: 7px; } .t-legend i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-elev); border: 3px solid var(--lg); } .t-legend li.t-chuikyo { --lg: var(--accent); } .t-legend li.t-gov { --lg: var(--accent-2); } .t-legend li.t-mof { --lg: var(--warn); } .t-legend li.t-apply { --lg: var(--lane-1); } /* 枠の中を送るあいだ、凡例は上に貼り付けたままにする。 外に出すと年表を読んでいる最中に画面から外れ、点の色を確かめられない。 セレクタを ul まで書いているのは、あとに来る .scroll-box > :first-child { margin-top: 0 } に負けないため。 左右は負のマージンで枠の内側いっぱいに広げ、下を流れる項目が 札の横から覗かないようにする */ .scroll-box > ul.t-legend { position: sticky; top: 0; z-index: 2; margin: 0 -22px; padding: 15px 22px 13px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); } /* 貼り付いた凡例の下端と、最初の項目の丸との間合い */ .scroll-box > ul.t-legend + .timeline, .scroll-box > .tf + .timeline { margin-top: 20px; } /* ---- 年表の絞り込み ---- 凡例（.t-legend）を script.js がこの操作卓に作り替える。 JSが動かない環境では凡例のまま残るので、色の対応は失われない。 押す札そのものが凡例を兼ねるため、色の点と件数を載せる */ .scroll-box > .tf { position: sticky; top: 0; z-index: 2; margin: 0 -22px; padding: 14px 22px 12px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); } .tf .tf-t { margin: 0 0 9px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; } .tf-btns { display: flex; flex-wrap: wrap; gap: 7px; } .tf-b { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--bg-elev); font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-mid); transition: border-color .12s, background .12s, color .12s, opacity .12s; } .tf-b i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-elev); border: 3px solid var(--tfc, var(--line)); } .tf-b b { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .tf-b.t-chuikyo { --tfc: var(--accent); } .tf-b.t-gov { --tfc: var(--accent-2); } .tf-b.t-mof { --tfc: var(--warn); } .tf-b.t-apply { --tfc: var(--lane-1); } /* 押されている＝残す。色を載せて、外したものと形ではなく面で分ける */ .tf-b[aria-pressed="true"] { border-color: color-mix(in srgb, var(--tfc, var(--accent)) 55%, transparent); background: color-mix(in srgb, var(--tfc, var(--accent)) 11%, var(--bg-elev)); color: var(--ink); } .tf-b[aria-pressed="false"] { opacity: .55; } .tf-b[aria-pressed="false"] i { border-color: var(--line); } .tf-b:hover { border-color: var(--tfc, var(--accent)); } .tf-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tf .tf-n { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.7; } /* 狭い画面では札が1行に1枚しか入らず、操作卓だけで枠の4割を占める。 字と余白を詰めて2枚ずつ入るようにし、見出しは畳む （用は .tf の aria-label が足りている） */ @media (max-width: 560px) { .scroll-box > .tf { padding: 12px 22px 10px; } .tf .tf-t { display: none; } .tf-btns { gap: 6px; } .tf-b { padding: 4px 10px; font-size: 12px; gap: 6px; } .tf .tf-n { margin-top: 8px; } } .timeline li[hidden] { display: none; } /* 絞ると :last-child は隠れた項目にも当たるので、縦線が下へ突き抜ける。 残った最後の項目に .is-last を付けて、そこで止める */ .timeline li.is-last::after { height: calc(100% - 15px); } .timeline li.is-last { margin-bottom: 0; } /* 隠した場所に残す行。絞ると年表から時間が飛ぶが、この行がないと 飛んだこと自体に気づけない（8月5日の次が7月8日に見えてしまう） */ .timeline li.t-gapline { margin-bottom: 18px; } /* 項目の丸と実線は引かない。代わりに破線のレールでつなぐ */ .timeline li.t-gapline::before { content: ""; left: -25.5px; top: 2px; width: 3px; height: calc(100% + 22px); border-radius: 0; background: none; border: 0; background-image: repeating-linear-gradient(var(--line) 0 3px, transparent 3px 7px); } .timeline li.t-gapline::after { display: none; } .timeline li.t-gapline button { font: inherit; font-size: 12px; color: var(--ink-soft); background: none; border: 0; border-radius: 6px; padding: 3px 8px; margin-left: -8px; cursor: pointer; text-align: left; } .timeline li.t-gapline button:hover { background: var(--bg-sunken); color: var(--ink); } .timeline li.t-gapline button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ページ内の目次。節が7つあり、上から順に読む種類のページではないので、 入口で全体の見取りを見せて、読みたい節に直接入れるようにする */ .page-toc { margin: 0 0 30px; padding: 18px 22px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-sunken); } .page-toc .ptoc-t { margin: 0 0 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; } .page-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: ptoc; display: flex; flex-wrap: wrap; gap: 8px; } .page-toc li { counter-increment: ptoc; } .page-toc a { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--ink-mid); text-decoration: none; transition: border-color .15s, background .15s, color .15s; } .page-toc a::before { content: counter(ptoc, decimal-leading-zero); font-size: 10.5px; letter-spacing: .06em; color: var(--accent); font-variant-numeric: tabular-nums; } .page-toc a:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); } .page-toc a:hover::before { color: var(--accent-deep); } /* 狭い画面では札が7段近くまで折り返して、目次だけで一画面の1/3を使う。 本文に入る前の案内なので、ここは詰めてよい */ @media (max-width: 560px) { .page-toc { padding: 14px 16px 16px; } .page-toc ol { gap: 6px; } .page-toc a { padding: 5px 11px; font-size: 12.5px; gap: 6px; } } /* 引下げ率の欄。下がったことが数字を読まなくても分かるようにする */ tbody td.cut { color: var(--warn); font-weight: 700; } /* ---------------- 薬価データベース ---------------- */ /* 検索・絞り込みバー */ .filterbar { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken); padding: 18px 20px; margin: 22px 0; } .filter-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .filter-row.search { grid-template-columns: 1fr; } .filter-field { display: grid; gap: 5px; } .filter-field > label { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; } .filter-field input, .filter-field select { width: 100%; font-family: inherit; font-size: 14.5px; line-height: 1.7; color: var(--ink); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; transition: border-color .15s, box-shadow .15s; } .filter-field select { appearance: none; cursor: pointer; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .filter-field input:focus, .filter-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* 検索ボタンを右に並べる行。ボタンはラベルの高さぶん下げて、入力欄と底をそろえる */ .filter-row.search.has-btn { grid-template-columns: 1fr auto; align-items: end; } .search-btn { padding: 9px 26px; font-size: 14.5px; white-space: nowrap; } .filter-hint { margin: -6px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink-soft); } @media (max-width: 480px) { .filter-row.search.has-btn { grid-template-columns: 1fr; } } /* 検索欄の下に右詰めで出す件数。0件のときは何も入らないので場所も取らない */ .result-count { justify-self: end; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .result-count:empty { display: none; } .result-count strong { color: var(--ink); font-size: 15px; } /* データ表 */ /* 横スクロールはさせない。列を減らし、長い品名は折り返して幅に収める */ .datatable-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); } table.datatable { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; /* 品名が長くても、他の列を押しのけない */ } /* 同一成分規格・品名・成分・規格・企業名・区分・価格帯・薬価2列・改定率・制度の11列 */ /* 「同一成分規格」の札が1行で収まる幅 */ table.datatable th:nth-child(1) { width: 7.5%; } table.datatable th:nth-child(2) { width: 15%; } table.datatable th:nth-child(3) { width: 10.5%; } table.datatable th:nth-child(4) { width: 9%; } table.datatable th:nth-child(5) { width: 10%; } /* 区分は「長期収載品」が1行に収まるだけの幅を取る（下で折り返しを止めている） */ table.datatable th:nth-child(6) { width: 10.5%; } /* 価格帯は「高」「中」「低」の1文字 */ table.datatable th:nth-child(7) { width: 5%; } /* 薬価の2列は「2026年度薬価」と年度で書くので、その分だけ幅を持たせる */ table.datatable th:nth-child(8) { width: 9.5%; } table.datatable th:nth-child(9) { width: 9.5%; } table.datatable th:nth-child(10) { width: 6.5%; } table.datatable th:nth-child(11) { width: 8%; } /* 改定率は下げ・上げで色を分ける */ table.datatable td.n.down { color: var(--accent); } table.datatable td.n.up { color: var(--danger); } /* 検索結果の凡例。表の下に置き、結果があるあいだだけ出す */ .legend { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken); font-size: 12.5px; line-height: 2.1; color: var(--ink-mid); } .legend .lg-title { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; } .legend .lg-row { margin: 0 0 4px; } .legend .lg-row .tag { margin: 0 4px 0 10px; } .legend .lg-row .tag:first-of-type { margin-left: 0; } .legend .lg-label { display: inline-block; min-width: 6.5em; font-weight: 700; color: var(--ink); } /* 札と説明を1行ずつ並べ、「区分」と「制度の適用」を左右に分ける */ .legend .lg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 30px; } /* 制度が10種類あると1列では縦に長い。列を増やして高さを詰める。 札の幅がまちまちなので、列幅は中身に合わせて配る */ .legend .lg-cols.three { grid-template-columns: repeat(3, minmax(0, auto)); gap: 4px 26px; justify-content: start; } .legend .lg-col + .lg-col { border-left: 1px solid var(--line); padding-left: 28px; } .legend .lg-cols.three .lg-col + .lg-col { padding-left: 24px; } .legend .lg-head { margin: 0 0 7px; font-weight: 700; color: var(--ink); font-size: 12px; letter-spacing: .04em; } .legend .lg-defs { display: grid; grid-template-columns: max-content 1fr; gap: 5px 12px; align-items: baseline; } .legend .lg-defs .tag { margin: 0; } .legend .lg-desc { line-height: 1.6; } .legend .lg-note { margin: 10px 0 0; font-size: 12px; line-height: 1.9; color: var(--ink-soft); } .legend .lg-down { color: var(--accent); font-weight: 700; } .legend .lg-up { color: var(--danger); font-weight: 700; } @media (max-width: 560px) { .legend .lg-label { display: block; min-width: 0; margin-bottom: 2px; } .legend .lg-row .tag { margin-left: 0; } } @media (max-width: 720px) { .legend .lg-cols, .legend .lg-cols.three { grid-template-columns: 1fr; gap: 12px; } .legend .lg-col + .lg-col, .legend .lg-cols.three .lg-col + .lg-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; } } /* 「G1（前倒し1回目）」など、札が列より広くなることがある。 「制度の適用」の列は札がいくつも並ぶので、そこだけ折り返しを許す。 区分（5列目）は札が1つだけなので、1行のまま出す */ table.datatable td:nth-child(11) .tag { white-space: normal; } table.datatable td:nth-child(6) .tag, table.datatable td:nth-child(7) .tag { white-space: nowrap; } table.datatable thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-sunken); text-align: left; padding: 11px 12px; font-size: 12.5px; font-weight: 700; border-bottom: 2px solid var(--line); } /* 列ごとの絞り込みの行。見出しの行の下に貼り付ける */ table.datatable thead tr.filters th { /* 見出しの行（padding 11px＋文字12.5px＝47px）の真下に貼り付ける */ top: 47px; z-index: 1; padding: 6px 7px; background: var(--bg-sunken); font-weight: 400; border-bottom: 2px solid var(--line); } table.datatable thead tr.filters select, table.datatable thead tr.filters input { width: 100%; box-sizing: border-box; font: inherit; font-size: 11.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-elev); color: var(--ink-mid); } table.datatable thead tr.filters select:focus, table.datatable thead tr.filters input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } table.datatable thead th.sortable { cursor: pointer; user-select: none; } table.datatable thead th.sortable:hover { color: var(--accent-deep); } table.datatable thead th .arrow { font-size: 9px; opacity: .45; margin-left: 4px; } table.datatable thead th[aria-sort] .arrow { opacity: 1; color: var(--accent); } table.datatable tbody td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-mid); line-height: 1.7; /* 解説ページの表向けに tbody td:first-child へ nowrap が掛かっているので打ち消す。 品名は長いものが多く、折り返さないと列からはみ出す */ white-space: normal; overflow-wrap: anywhere; } table.datatable tbody tr:last-child td { border-bottom: 0; } table.datatable tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); } table.datatable td.name { color: var(--ink); font-weight: 700; } table.datatable td.name a { text-decoration: none; } table.datatable td.name a:hover { text-decoration: underline; } table.datatable td.n { text-align: right; font-variant-numeric: tabular-nums; } /* 最類似薬の列。押すと、成分と規格が同じ品目だけを出す */ table.datatable th.sim, table.datatable td.sim { padding-left: 12px; padding-right: 4px; } .sim-btn { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--ink-mid); font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; } .sim-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); } .sim-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* 区分バッジ */ .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .tag.shinyaku { background: var(--accent-soft); color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .tag.choki { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .tag.kohatsu { background: var(--accent-2-soft); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 30%, transparent); } .tag.sonota { background: var(--bg-sunken); color: var(--ink-soft); border-color: var(--line); } .tag.pmp { background: var(--accent-2-soft); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); } .tag.fusaisan { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .tag.muted { background: var(--bg-sunken); color: var(--ink-soft); border-color: var(--line); } .tag.hold { background: var(--hold-soft); color: var(--hold); border-color: color-mix(in srgb, var(--hold) 33%, transparent); } /* 制度の適用の札。その制度が主に効く区分の色を借りる。 区分の列と制度の列が同じ色の約束で読めるようにするため、 青＝新薬まわり、橙＝長期収載品まわり、緑＝後発品まわり、で塗る。 （効く先は目安。市場拡大再算定が長期収載品にかかることもある） */ .tag.t-new { background: var(--accent-soft); color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .tag.t-long { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .tag.t-ge { background: var(--accent-2-soft); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 30%, transparent); } /* 革新的新薬薬価維持制度の「非維持」と「控除」。 その状態にある札は地を塗り、差し引かれた側は地を塗らず破線で出す。 青はその品目自身の維持・非維持、橙は控除（長期収載品まわりの色） */ .tag.t-new-off { background: none; color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 45%, transparent); border-style: dashed; } .tag.t-long-off { background: none; color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); border-style: dashed; } /* 区分の札。トップページの「現行薬価」カードの区分表示（.sl-cat）と同じ、 地は塗らずに輪郭だけで色を出す形にそろえる */ .tag.cat { background: none; border-color: currentColor; font-size: 11.5px; padding: 2px 9px; } .tag.cat.shinyaku { color: var(--accent); } .tag.cat.choki { color: var(--warn); } .tag.cat.kohatsu { color: var(--accent-2); } .tag.cat.saisei { color: var(--danger); } .tag.cat.sonota { color: var(--ink-mid); } /* 空状態・読み込み中 */ .empty-state { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 54px 26px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg-sunken); } .empty-state .es-icon { font-size: 30px; line-height: 1; opacity: .75; } .empty-state .es-title { font-size: 16px; font-weight: 700; color: var(--ink); } .empty-state .es-body { font-size: 14px; color: var(--ink-mid); line-height: 1.9; max-width: 62ch; } .empty-state code { font-size: 12.5px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; } .empty-state.err { border-style: solid; border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .empty-state.err .es-title { color: var(--danger); } /* 品目詳細のヘッダー */ .drug-head { display: grid; gap: 12px; margin-bottom: 4px; } .drug-title { display: grid; gap: 4px; } .drug-title .d-generic { font-size: 13px; color: var(--ink-soft); } .drug-title .d-name { font-size: clamp(20px, 3vw, 27px); font-weight: 700; line-height: 1.45; color: var(--ink); } .drug-tags { display: flex; gap: 7px; flex-wrap: wrap; } /* 現行薬価の大きな表示 */ .price-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken); padding: 16px 20px; margin: 18px 0 0; } .price-now .pn-label { font-size: 12px; color: var(--ink-soft); font-weight: 700; letter-spacing: .06em; } .price-now .pn-value { font-size: 30px; font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .price-now .pn-unit { font-size: 14px; color: var(--ink-mid); } .price-now .pn-date { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); } /* 定義リスト（属性表示） */ .spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 20px 0 0; } .spec dt { padding: 11px 16px; font-size: 13px; font-weight: 700; white-space: nowrap; background: var(--bg-sunken); border-bottom: 1px solid var(--line-soft); } .spec dd { margin: 0; padding: 11px 18px; font-size: 13.5px; color: var(--ink-mid); border-bottom: 1px solid var(--line-soft); line-height: 1.8; } .spec dt:last-of-type, .spec dd:last-of-type { border-bottom: 0; } .spec .unset { color: var(--ink-soft); font-style: normal; opacity: .8; } /* 履歴タイムライン（コンパクト版） */ .histlist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .histlist li { display: grid; gap: 4px; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: baseline; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-sunken); padding: 13px 16px; } .histlist .h-date { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .histlist .h-body { display: grid; gap: 3px; } .histlist .h-kind { font-size: 14px; font-weight: 700; color: var(--ink); } .histlist .h-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; } /* 適用日をこちらで推定したものの断り書き。確定した記録と見分けがつくようにする */ .histlist .h-guess { display: inline-block; margin-top: 4px; padding: 2px 8px; border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 6px; font-size: 11.5px; line-height: 1.7; color: var(--ink-mid); } /* 履歴の1行の根拠になった資料へのリンク。 まとめて並べると「どの年のどの資料か」が分からなくなるので、行ごとに置く */ .histlist .h-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; } .histlist .h-src { font-size: 11.5px; line-height: 1.7; padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); text-decoration: none; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .histlist .h-src:hover { border-color: var(--accent); color: var(--accent); } /* 薬価の推移の表。1つの年度から2行出るとき（改定の直後と、期の途中で 動いたあと）に、年度の下へその日付を小さく添える */ .price-when { display: block; font-size: 11.5px; line-height: 1.7; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .histlist .h-delta { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .histlist .h-delta.down { color: var(--danger); } .histlist .h-delta.up { color: var(--accent-2); } .histlist .h-delta.flat { color: var(--ink-soft); } /* データ提供元の注記 */ .data-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-soft); } /* 最低薬価の表：2つの系統を色帯で見分けやすくする */ table.mlp th.jp, table.mlp td.jp { background: color-mix(in srgb, var(--accent) 7%, transparent); } table.mlp th.ot, table.mlp td.ot { background: color-mix(in srgb, var(--accent-2) 7%, transparent); } table.mlp th.jp:first-of-type, table.mlp td.jp:first-of-type { border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); } table.mlp th.ot:first-of-type, table.mlp td.ot:first-of-type { border-left: 2px solid color-mix(in srgb, var(--accent-2) 40%, transparent); } table.mlp thead th.grp { text-align: center; letter-spacing: .04em; } table.mlp thead th.grp.jp { color: var(--accent-deep); } table.mlp thead th.grp.ot { color: var(--accent-2); } table.mlp tbody tr:hover td.jp { background: color-mix(in srgb, var(--accent) 13%, transparent); } table.mlp tbody tr:hover td.ot { background: color-mix(in srgb, var(--accent-2) 13%, transparent); } .mlp-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-mid); } .mlp-legend span { display: flex; align-items: center; gap: 7px; } .mlp-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; } .mlp-legend i.jp { background: color-mix(in srgb, var(--accent) 30%, transparent); border: 1px solid var(--accent); } .mlp-legend i.ot { background: color-mix(in srgb, var(--accent-2) 30%, transparent); border: 1px solid var(--accent-2); } /* ICERの表：β と方向の列は折り返さない。 列が狭くなっても .table-scroll が横に逃がすので、短い語を2行に割る必要はない */ table.beta-table th:nth-child(3), table.beta-table td:nth-child(3), table.beta-table th:nth-child(4), table.beta-table td:nth-child(4) { white-space: nowrap; } /* 金額の範囲は空白の位置でだけ折り返す。「1,125万円未／満」のように 数字と単位の途中で割れるのを防ぐ */ table.beta-table td:nth-child(1), table.beta-table td:nth-child(2) { word-break: keep-all; } /* 額の大小と限定条件の折り返しで行の高さがまちまちになるため、上下中央にそろえる */ table.mlp thead th, table.mlp tbody td { vertical-align: middle; } /* 19行×8列と縦に長いので、余白を詰めて全体の丈を抑える */ table.mlp thead th { padding: 7px 10px; line-height: 1.4; } table.mlp tbody td { padding: 6px 10px; line-height: 1.5; font-size: 13.5px; } table.mlp tbody td.num { padding-left: 12px; padding-right: 12px; } /* 表そのものをスクロール領域にして高さを頭打ちにし、見出しは上に貼り付ける。 8列あるため、スクロール中もどの系統・どの年度の列かを見失わないようにする */ .mlp-scroll { max-height: min(66vh, 560px); overflow: auto; } .mlp-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mlp-scroll table.mlp thead th { position: sticky; z-index: 2; /* 貼り付いた見出しの下に本文が透けないよう、地の色を混ぜた不透明色にする */ background: var(--bg-elev); box-shadow: inset 0 -1px 0 var(--line); } /* 見出しは2段。1段目の丈を固定し、2段目をその真下に貼り付ける */ .mlp-scroll table.mlp thead tr:first-child th { top: 0; height: 33px; } .mlp-scroll table.mlp thead tr:nth-child(2) th { top: 33px; } .mlp-scroll table.mlp thead th.jp { background: color-mix(in srgb, var(--accent) 7%, var(--bg-elev)); } .mlp-scroll table.mlp thead th.ot { background: color-mix(in srgb, var(--accent-2) 7%, var(--bg-elev)); } /* 表題は箱の外に出したので、キャプションと同じ体裁を段落側に持たせる */ .tbl-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-mid); letter-spacing: .02em; } /* 区分名に付く限定条件は、剤形名と混ざらないよう行を変えて添える */ table.mlp td .qual { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.6; } /* 過去の額は控えめに、現行（R8）の額を主役にする */ table.mlp tbody td.num.past { font-size: 12.5px; color: var(--ink-soft); } table.mlp tbody td.num.now { font-size: 16px; font-weight: 700; color: var(--ink); } table.mlp thead th.past { font-size: 11.5px; color: var(--ink-soft); font-weight: 400; } table.mlp thead th.now { font-size: 13.5px; } table.mlp thead th.now .hd-now { display: block; margin-top: 2px; font-size: 10px; font-weight: 400; letter-spacing: .04em; color: var(--ink-soft); } /* ---------------- 下支え措置の効きどころ図 ---------------- */ /* 3つの措置を同じ横軸（改定のたび）に載せた3段の図。段ごとに 「措置がなければたどる道」を点線、「措置が効いたあとの薬価」を実線で重ねる。 点線と実線は途中まで同じ道なので、分かれる場所がそのまま各措置の効きどころになる */ /* 中身は線が3本だけなので、本文幅いっぱいに伸ばさず等倍で置く。 狭い画面では min-width まで縮み、それより狭ければ .sch-scroll が横に逃がす */ .sf-svg { display: block; width: 100%; max-width: 560px; min-width: 470px; height: auto; } .sf-lane { fill: var(--bg-sunken); opacity: .5; } .sf-guide { stroke: var(--line-soft); stroke-width: 1; } .sf-axis { stroke: var(--line); stroke-width: 1.4; } /* 措置がなければたどる道。実線より細く薄くして、実線を主役にする */ .sf-base { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 5 4; opacity: .5; stroke-linejoin: round; } .sf-path { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .sf-p1 { stroke: var(--accent); } .sf-p2 { stroke: var(--accent-2); } .sf-p3 { stroke: var(--warn); } /* 下限そのものを示す横線と、その下の「行かない」帯 */ .sf-floor { fill: none; stroke: var(--warn); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .75; } .sf-under { fill: var(--warn); opacity: .07; } /* 道が分かれる点。地色で抜いてから縁を付けると、線の上でも点として読める */ .sf-dot { fill: var(--bg-elev); stroke-width: 2.4; } .sf-dot.d1 { stroke: var(--accent); } .sf-dot.d2 { stroke: var(--accent-2); } .sf-dot.d3 { stroke: var(--warn); } .sf-name { font-size: 12px; font-weight: 700; fill: var(--ink); text-anchor: end; } .sf-verb { font-size: 10px; fill: var(--ink-soft); text-anchor: end; } .sf-note { font-size: 11px; font-weight: 700; } .sf-note.n1 { fill: var(--accent); } .sf-note.n2 { fill: var(--accent-2); } .sf-note.n3 { fill: var(--warn); } .sf-tick { font-size: 10px; fill: var(--ink-soft); text-anchor: middle; } .sf-cap { font-size: 10px; fill: var(--ink-soft); } /* 見本。線の見た目そのものを並べたいので、四角ではなく短い線分で示す */ .sf-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; font-size: 11.5px; color: var(--ink-soft); } .sf-legend span { display: flex; align-items: center; gap: 7px; } .sf-legend i { width: 22px; height: 0; display: inline-block; border-top-width: 2.5px; border-top-color: var(--ink-mid); } .sf-legend i.solid { border-top-style: solid; } .sf-legend i.dashed { border-top-style: dashed; border-top-width: 2px; opacity: .6; } /* ---------------- 長期収載品の俯瞰図 ---------------- */ /* G1・選定療養・G1撤退を1本の時間軸に載せる。行ごとに別のグリッドだが、 同じ列指定を共有しているので目盛と升目が縦にそろう */ .schema { margin: 26px 0 30px; padding: 20px 22px 18px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .sch-cap { margin: 0 0 16px; font-size: 13.5px; line-height: 1.85; color: var(--ink-mid); } .sch-cap b { display: block; margin-bottom: 4px; font-size: 15.5px; color: var(--ink); } .sch-hint { color: var(--ink-soft); } /* 目盛が6つ並ぶと狭い画面で潰れる。升目は縮めずに横へ送れるようにする */ .sch-scroll { overflow-x: auto; padding-bottom: 2px; } .sch-grid { position: relative; min-width: 620px; } .sch-row { display: grid; grid-template-columns: 116px repeat(6, minmax(0, 1fr)); gap: 6px; } .sch-row + .sch-row { margin-top: 6px; } /* 選んだ列を上から下まで通す帯。JSが位置を入れるまでは出さない */ .sch-cursor { position: absolute; top: 0; bottom: 0; border-radius: 11px; background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent); pointer-events: none; opacity: 0; transition: left .3s cubic-bezier(.4, .1, .2, 1), width .3s cubic-bezier(.4, .1, .2, 1), opacity .2s; } .sch-cursor.is-on { opacity: 1; } .sch-lh { display: flex; flex-direction: column; justify-content: center; padding: 8px 12px 8px 0; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--ink); } .sch-lh i { display: block; font-style: normal; font-size: 10.5px; font-weight: 400; letter-spacing: .03em; color: var(--ink-soft); } .sch-axis .sch-lh { font-size: 10.5px; font-weight: 400; color: var(--ink-soft); } .ax { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 8px; appearance: none; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 9px; font: inherit; text-align: center; transition: background .15s, border-color .15s; } .ax b { font-size: 13.5px; color: var(--ink); } .ax span { font-size: 10.5px; line-height: 1.4; color: var(--ink-soft); } .ax:hover { background: var(--bg-sunken); } .ax.is-on { background: var(--accent); border-color: var(--accent); } .ax.is-on b, .ax.is-on span { color: var(--on-accent); } .cell { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px; border-radius: 9px; background: var(--bg-sunken); font-size: 12px; line-height: 1.45; text-align: center; color: var(--ink-mid); transition: box-shadow .2s, background .2s; } .cell b { font-size: 15px; font-weight: 700; color: var(--ink); } /* まだ効いていない期間は、罫線だけの空き升にして進行を見せる */ .cell.off { background: transparent; color: var(--ink-soft); font-size: 11.5px; box-shadow: inset 0 0 0 1px var(--line-soft); } .cell.mark { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; } /* 撤退はG1該当以降ずっと使える手続なので、その区間をひと続きの帯で示す。 1列目は見出し、2列目が0年なので、3列目から右端まで */ .cell.span { grid-column: 3 / -1; justify-content: flex-start; text-align: left; font-size: 11.5px; } /* レーンごとに色を分ける。薬価＝アクセント、患者負担＝警告色、撤退＝もう一つの色 */ [data-lane="price"] .cell.hit { background: color-mix(in srgb, var(--accent) 15%, var(--bg-elev)); } [data-lane="price"] .cell.hit b { color: var(--accent-deep); } [data-lane="price"] .cell.fin { background: var(--accent); } [data-lane="price"] .cell.fin b { color: var(--on-accent); } [data-lane="pay"] .cell.hit { background: color-mix(in srgb, var(--warn) 15%, var(--bg-elev)); } [data-lane="pay"] .cell.hit b { color: var(--warn); } /* 負担が消える升だけは、色を持たせず「なくなった」ことを示す */ [data-lane="pay"] .cell.fin { background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft); } [data-lane="pay"] .cell.fin b { color: var(--ink-soft); } [data-lane="exit"] .cell.span { background: color-mix(in srgb, var(--accent-2) 13%, var(--bg-elev)); } .cell.is-on { box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-sm); } [data-lane="pay"] .cell.fin.is-on { box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-sm); } /* ---- 目盛ごとの説明 ---- */ .sch-detail { margin-top: 18px; } .sd { display: none; } .sd.is-on { display: block; animation: sd-in .25s ease-out; } @keyframes sd-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .sd-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 13px; font-size: 15px; font-weight: 700; color: var(--ink); } .sd-y { padding: 3px 11px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; letter-spacing: .02em; } .sd-l { display: grid; grid-template-columns: 88px 1fr; gap: 9px 14px; margin: 0; } .sd-l dt { height: fit-content; padding: 3px 0; border-radius: 6px; font-size: 11.5px; font-weight: 700; text-align: center; } .sd-l dd { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-mid); } .sd-l dd strong { color: var(--ink); } .k-price { background: var(--accent-soft); color: var(--accent-deep); } .k-pay { background: var(--warn-soft); color: var(--warn); } .k-exit { background: var(--accent-2-soft); color: var(--accent-2); } /* ---- 後発品を100とした帯 ---- */ .sd-bar { margin-top: 16px; padding: 14px 16px; background: var(--bg-sunken); border-radius: 10px; } .sb-t { margin: 0 0 10px; font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); } /* 値の欄は幅を決め打ちにする。文字数で幅が動くと、 2本の帯の右端がそろわず長さを見比べられなくなる */ .sb-row { display: grid; grid-template-columns: 84px 1fr 46px; gap: 12px; align-items: center; } .sb-row + .sb-row { margin-top: 9px; } .sb-k { font-size: 12px; color: var(--ink-mid); } .sb-t2 { display: flex; height: 18px; border-radius: 5px; overflow: hidden; background: color-mix(in srgb, var(--ink-soft) 12%, transparent); } .sg { display: block; height: 100%; } .sg.ge, .sg.base { background: var(--accent); } .sg.cov { background: color-mix(in srgb, var(--warn) 38%, var(--bg-elev)); } .sg.pay { background: var(--warn); } /* 引下げ前で水準が定まらない区間は、数字を入れずに斜線で埋める */ .sg.na { width: 100%; background: repeating-linear-gradient(135deg, var(--line) 0 5px, transparent 5px 11px); } .sb-v { font-size: 12.5px; font-weight: 700; color: var(--ink); text-align: right; } .sb-n { margin: 10px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-soft); } .sch-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .sch-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; font-size: 11px; color: var(--ink-soft); } .lg { display: inline-flex; align-items: center; gap: 6px; } .lg::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--c); } .lg.base { --c: var(--accent); } .lg.cov { --c: color-mix(in srgb, var(--warn) 38%, var(--bg-elev)); } .lg.pay { --c: var(--warn); } .sch-nav { display: flex; gap: 8px; margin-left: auto; } .sch-btn { padding: 7px 14px; border-radius: 999px; appearance: none; cursor: pointer; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-mid); font: inherit; font-size: 12.5px; transition: background .15s, color .15s, border-color .15s; } .sch-btn:hover:not(:disabled) { background: var(--bg-sunken); color: var(--ink); } .sch-btn:disabled { opacity: .4; cursor: default; } .sch-play[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .sch-note { margin-top: 14px; } /* ---------------- 乖離率の図 ---------------- */ /* つまみひとつで左右が同時に動く。左右とも同じ見方で、 「基準になる価格は輪郭だけの棒、実際の価格は塗った棒、 届いていない分は右の寸法」という3つの約束だけで読める。 色に頼らない作りにしてある： ・基準と実際は〈枠か塗りか〉という形の違いで分かれる ・納入価と調整幅は同じ色相の明度違い（塗り分けではなく濃淡） ・差は塗らず、寸法線と数字で示す 明度だけで分けているので、どの色覚特性でも、白黒でも順序が保たれる */ .gf-ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; padding: 13px 16px; background: var(--bg-sunken); border-radius: 10px; cursor: pointer; } .gf-ctl-k { font-size: 13px; font-weight: 700; color: var(--ink); } .gf-ctl input { flex: 1 1 180px; min-width: 0; accent-color: var(--accent); } .gf-ctl-v { min-width: 76px; text-align: right; font-size: 24px; font-weight: 700; line-height: 1; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .gf-ctl-v i { font-style: normal; font-size: .55em; margin-left: 1px; } /* つまみの入れ物。中に2%の目印を絶対配置する */ .gf-slot { position: relative; flex: 1 1 180px; min-width: 0; display: flex; } .gf-slot input { flex: 1 1 auto; min-width: 0; margin: 0; } /* 調整幅（2%）の位置。つまみは半径ぶん内側で止まるので、その分を足して合わせる。 目盛が 0〜10% なので 2% は全体の 1/5 */ .gf-thresh { position: absolute; top: 50%; left: calc(8px + (100% - 16px) * 0.2); width: 1px; height: 22px; margin-top: -11px; background: var(--lane-3); pointer-events: none; } .gf-thresh b { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--lane-3); white-space: nowrap; } /* 実際の値へ一息で飛ぶ札 */ .gf-presets { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 12px 0 0; } .gf-presets-k { font-size: 11.5px; color: var(--ink-soft); } .gf-chip { padding: 5px 11px; border-radius: 999px; appearance: none; cursor: pointer; font: inherit; font-size: 11.5px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-mid); transition: background .15s, color .15s, border-color .15s; } .gf-chip b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .gf-chip:hover { border-color: var(--accent); color: var(--accent-deep); } .gf-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .gf-chip[aria-pressed="true"] b { color: var(--on-accent); } /* 棒3本と寸法2つが並ぶので、狭い画面では入りきらない。 詰めて潰すより、他のシェーマと同じように横へ送れるようにする */ .gf-chart { padding: 20px 18px 16px; background: var(--bg-sunken); border-radius: 12px; overflow-x: auto; } /* 幅は中身なりに決め、余裕があるときだけ中央に置く。 入りきらないときは auto マージンが0になり、左端から送れる */ .gf-pair { position: relative; display: flex; align-items: flex-end; gap: 26px; width: max-content; margin-inline: auto; } /* 100（薬価）の高さを横に通す線。数字の行（20px）と間隔（7px）のぶん下げると 棒の上端＝目盛100 にそろう。差も下げ幅もこの線から測っている */ .gf-base { position: absolute; left: 0; right: 0; top: calc(20px + 15px + 1px + 7px); border-top: 1px dashed color-mix(in srgb, var(--ink-soft) 55%, transparent); pointer-events: none; } /* 枠はいちばん長い名前（改定後薬価）に合わせる。棒より広いのは意図したもので、 これを棒幅にすると名前が枠を押し広げ、その列の棒だけ太くなってしまう */ .gf-col { flex: 0 0 62px; display: flex; flex-direction: column; align-items: center; gap: 7px; } /* 棒どうしの間隔はすべて同じにする。寸法（差・下げ幅）は棒の右に出るので、 札が次の棒に届かない幅を確保したうえで、その幅を全部の隙間に使う。 目盛と最初の棒の間だけは、軸なので詰めたまま（.gf-pair の gap） */ .gf-col + .gf-col { margin-left: 38px; } /* 最後の列の札は次の棒を気にしなくてよいが、枠の内側には収める */ .gf-pair > .gf-col:last-child { margin-right: 72px; } /* 行の高さを固定しておく。100の基準線を上から決め打ちで置くため */ .gf-n { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; text-align: center; } /* 数字の下の変化量。値のない列にも空で置いて、行数をそろえる */ .gf-v { font-weight: 700; } .gf-delta { display: block; min-height: 15px; margin-top: 1px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 15px; color: var(--lane-3); font-variant-numeric: tabular-nums; } .gf-n-n, .gf-after { color: var(--accent-deep); } /* 棒は下から積む。幅は枠と切り離して固定し、3本とも同じ太さにする */ .gf-t { display: flex; flex-direction: column; justify-content: flex-end; width: 52px; height: 158px; } /* 名前は折り返さない。高さを1行ぶん確保しておくと、 名前を持たない目盛の列とも下端がそろう */ .gf-k { min-height: 1.5em; white-space: nowrap; font-size: 12px; line-height: 1.45; text-align: center; color: var(--ink-mid); } /* ---- 縦の目盛 ---- */ /* 棒は 85〜100 の範囲だけを描く。0〜100 のままでは乖離4.8が8px、 調整幅2.0が3pxにしかならない。省いていることは目盛の数字で示す */ .gf-yax { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 7px; } /* 目盛線は読み取りの補助なので、本文より静かに。ただし消えない濃さにする */ .gf-yax .gf-t { position: relative; width: 26px; border-right: 1px solid color-mix(in srgb, var(--ink-soft) 40%, transparent); } .gf-yax i { position: absolute; right: 7px; transform: translateY(-50%); font-size: 10px; font-style: normal; line-height: 1; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .gf-yax i:nth-child(1) { top: 0; } .gf-yax i:nth-child(2) { top: 33.333%; } .gf-yax i:nth-child(3) { top: 66.667%; } .gf-yax i:nth-child(4) { top: 100%; } /* ---- 棒 ---- */ .gf-f { display: block; width: 100%; transition: height .25s ease-out; } /* 基準になる価格（薬価・改定前の薬価）。公定価格＝名目なので、 塗らずに輪郭で置く。塗りの棒とは色ではなく形で分かれる */ .f-ref { background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--ink-soft); } /* 実際に動いた価格。ここだけが濃い塗り */ .f-n, .f-n2 { background: var(--accent); } /* 調整幅は納入価と同じ色を薄く敷き、同じ色で縁取ったもの。 色相を変えず明度だけで分けるので、色の見え方に関わらず 「濃いほうが納入価」の順序が保たれる。縁は地との境も兼ねる */ .f-adj { background: color-mix(in srgb, var(--accent) 30%, var(--bg-elev)); box-shadow: inset 0 0 0 1px var(--accent); } /* ---- 差の寸法 ---- */ /* 塗らない。棒の右に寸法の記号（コの字）を置き、数字を添えるだけ。 面で見せると隣の段と紛れるが、線と数字なら混ざりようがない */ .gf-g { position: relative; display: block; width: 100%; transition: height .25s ease-out; } .gf-g::before { content: ""; position: absolute; left: calc(100% + 7px); top: 0; bottom: 0; width: 5px; border: 1px solid var(--lane-3); border-left: 0; } .gf-g b { position: absolute; left: calc(100% + 19px); top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 700; color: var(--lane-3); white-space: nowrap; font-variant-numeric: tabular-nums; } /* 差がないときは寸法ごと消す */ .gf-g.is-none::before, .gf-g.is-none b { display: none; } .gf-note { margin: 16px 0 0; font-size: 13px; line-height: 1.85; color: var(--ink-mid); } .gf-note strong { color: var(--ink); } .gf-msg { margin: 12px 0 0; padding: 11px 14px; border-radius: 9px; background: var(--accent-soft); font-size: 12.5px; line-height: 1.8; color: var(--accent-deep); } .gf-msg strong { font-weight: 700; } /* 乖離率が調整幅を下回り、薬価が動かなくなったとき */ .gf-msg.is-flat { background: var(--warn-soft); color: var(--lane-3); } /* ---- 凡例 ---- */ /* 棒の名前は図の中に書いてあるので、見本が要るのは塗り分けている2段だけ */ .lg.l-n { --c: var(--accent); } .lg.l-a::before { background: color-mix(in srgb, var(--accent) 30%, var(--bg-elev)); box-shadow: inset 0 0 0 1px var(--accent); } @media (prefers-reduced-motion: reduce) { .gf-f, .gf-g { transition: none; } } /* 狭い画面では、横に送る量が減るよう全体を少し詰める。 寸法の名前と数字は2行に折る */ @media (max-width: 620px) { .gf-chart { padding: 18px 12px 14px; } .gf-pair { gap: 8px; } .gf-col + .gf-col { margin-left: 36px; } .gf-pair > .gf-col:last-child { margin-right: 48px; } .gf-yax .gf-t { width: 22px; } /* いちばん長い名前（改定後薬価）が入る幅にしておく。足りないとその列だけ 押し広げられ、棒の間隔がずれる */ .gf-col { flex-basis: 58px; } .gf-t { width: 46px; } .gf-k { font-size: 11px; } .gf-g::before { left: calc(100% + 5px); } .gf-g b { left: calc(100% + 12px); white-space: normal; width: 34px; line-height: 1.3; font-size: 11px; } } /* ---------------- 累積額控除の図 ---------------- */ /* 段送りはしない。先発品の薬価（本体＋累積額）→ 累積額を剥がしたみなし額 → それを半分にした後発品の初収載価格を、3行そのまま並べる。 何をしたのかは行と行のあいだに置き、平文で説明し直さずに済ませる */ .dd-fig { margin: 22px 0; } .dd-cap { margin: 0 0 10px; font-size: 12.5px; line-height: 1.7; color: var(--ink-mid); } .dd-cap b { display: block; margin-bottom: 2px; font-size: 14.5px; color: var(--ink); } .dd-stage { --lab: 152px; --val: 76px; --pad: 14px; position: relative; padding: 16px 0 20px; background: var(--bg-sunken); border-radius: 10px; } .dd-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--val); align-items: center; line-height: 1.35; } .dd-k { padding-left: var(--pad); padding-right: 8px; font-size: 11.5px; font-weight: 700; color: var(--ink); } .dd-k em { display: block; font-style: normal; font-weight: 400; font-size: 10px; color: var(--ink-soft); } .dd-t { position: relative; height: 26px; } .dd-b { position: absolute; left: 0; top: 0; height: 100%; width: var(--w); border-radius: 0 4px 4px 0; background: var(--accent); } /* 維持されてきた分。本体の右に積む */ .dd-acc { position: absolute; left: var(--x); top: 0; height: 100%; width: var(--aw); border-radius: 0 4px 4px 0; background: var(--warn); } .dd-acc b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--on-accent); white-space: nowrap; } /* 控除しなかった場合の位置（1,000円の半分） */ .dd-ref { position: absolute; left: 50%; top: -7px; bottom: -7px; border-left: 2px dotted var(--danger); } .dd-ref b { position: absolute; left: 6px; bottom: -17px; font-size: 10px; font-weight: 700; color: var(--danger); white-space: nowrap; } .dd-v { padding-right: var(--pad); text-align: right; font-size: 13.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .dd-v em { font-style: normal; font-weight: 400; font-size: 10px; color: var(--ink-soft); margin-left: 3px; } /* 行と行のあいだの操作。棒の列に頭をそろえる */ .dd-op { margin: 5px 0; padding-left: var(--lab); font-size: 11px; font-weight: 700; color: var(--ink-soft); } .dd-sum { margin: 14px var(--pad) 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.8; color: var(--ink-mid); } .dd-sum b { color: var(--danger); font-size: 13px; } @media (max-width: 620px) { .dd-stage { --lab: 104px; --val: 62px; --pad: 10px; } .dd-k { font-size: 10.5px; } .dd-k em { display: none; } } /* 上の2つと同じ外枠・同じ操作を使う。中身は品目ごとの横棒で、 長さがそのまま価格。目盛②で帯の境目が入り、③で棒が帯の加重平均まで 伸び縮みする。安く売った品目が伸びる（＝値上がりする）のが要点なので、 棒は瞬時に切り替えず動かして見せる */ .bandf .sch-grid { min-width: 0; } .bandf .sch-row { grid-template-columns: 56px repeat(3, minmax(0, 1fr)); } /* 図と説明を1画面に収めたいので、この図だけ各部を詰める。 説明の枠は段ごとに文量が違うので、下限を決めて高さが跳ねないようにする */ .bandf .sch-cap { margin-bottom: 10px; font-size: 12.5px; line-height: 1.7; } .bandf .sch-cap b { margin-bottom: 2px; font-size: 14.5px; } .bandf .ax { padding: 5px 8px; } .bandf .ax b { font-size: 12.5px; } .bandf .sch-detail { margin-top: 10px; min-height: 100px; } .bandf .sd p { font-size: 13px; line-height: 1.8; } .bandf .sd-h { margin-bottom: 5px; } /* 凡例と送りボタンを必ず1行に収める。折り返すと図全体が30px以上高くなる */ .bandf .sch-foot { margin-top: 10px; padding-top: 10px; flex-wrap: nowrap; gap: 10px; } .bandf .sch-legend { gap: 9px; font-size: 10px; flex-wrap: nowrap; min-width: 0; } .bandf .lg { white-space: nowrap; } .bandf .lg::before { width: 9px; height: 9px; } .bandf .sch-btn { padding: 5px 11px; font-size: 12px; } .bandf .sch-note { margin-top: 8px; font-size: 11.5px; line-height: 1.7; } .pb-stage { --lab: 132px; --val: 66px; --pad: 14px; position: relative; margin: 12px 0 4px; padding: 10px 0 12px; background: var(--bg-sunken); border-radius: 10px; } /* 見出しの行。下の品目行とまったく同じ3列で組み、列の字下げも .pb-k / .pb-v をそのまま使う。絶対配置で置くと枠から飛び出すので、 グリッドに載せて位置を保証する。真ん中の列がものさしの線になる */ .pb-head { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--val); align-items: end; margin-bottom: 6px; line-height: 1.3; opacity: 0; transition: opacity .3s; } .pb-head.is-on { opacity: 1; } .pb-head .pb-k, .pb-head .pb-v { font-size: 10px; font-weight: 700; color: var(--ink-soft); } /* 帯の境目。棒の領域にだけ引きたいので、左右を列幅ぶん逃がす */ .pb-guides { position: absolute; left: var(--lab); right: var(--val); top: 0; bottom: 0; pointer-events: none; } /* 帯の境目。棒の色より前に出る線なので、細い点線では棒に負ける。 2本の線こそがこの図の主役なので、太さと濃さで前に出す */ .pb-g { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 2px dashed var(--ink-mid); opacity: 0; transition: opacity .3s; } .pb-g.is-on { opacity: 1; } .pb-g.g50 { left: 50%; } .pb-g.g30 { left: 30%; } /* 3つの領域の下敷き。境目を「線」ではなく「色の変わり目」にすると、 棒の先端がどの色の上で終わるかを見るだけで帯が分かる。 棒の色と領域の色は一致する（帯の加重平均は必ずその帯の中に収まるので、 ②③で棒が動いても領域をまたぐことはない） */ .pz { position: absolute; top: 2px; bottom: 2px; opacity: 0; transition: opacity .3s; } .pz.is-on { opacity: 1; } .pz.z1 { left: 50%; right: 0; background: color-mix(in srgb, var(--accent) 8%, transparent); } .pz.z2 { left: 30%; width: 20%; background: color-mix(in srgb, var(--accent-2) 8%, transparent); } .pz.z3 { left: 0; width: 30%; background: color-mix(in srgb, var(--warn) 8%, transparent); } /* 領域の名前。これが凡例を兼ねる */ .pzl { position: absolute; bottom: -3px; padding: 0 5px; font-size: 9.5px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .3s; } .pzl.is-on { opacity: 1; } .pzl.z1 { left: 50%; color: var(--accent-deep); } .pzl.z2 { left: 30%; color: var(--accent-2); } .pzl.z3 { left: 0; color: var(--warn); } /* ものさしの目盛。「100円の棒の半分が50円」という関係を、 基準の棒そのものの上で示す。見出し行の真ん中の列に置く */ .pb-hr { position: relative; } .tk { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--ink-mid); white-space: nowrap; opacity: 0; transition: opacity .3s; } .tk.is-on { opacity: 1; } .tk::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 0; height: 5px; border-left: 1px solid var(--ink-mid); } .notch { position: absolute; top: -3px; bottom: -3px; left: var(--x); width: 0; border-left: 1px solid var(--ink-mid); opacity: 0; transition: opacity .3s; } .notch.is-on { opacity: 1; } /* ものさしの名前は棒の中に書く。列見出しの位置に置くと、 下に続く他社の行まで含めた見出しに見えてしまう */ .pb-refl { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; color: var(--ink-mid); white-space: nowrap; } /* 行の高さは棒（.pb-t）で決めたい。本文の行送りのままだと ラベルのほうが高くなり、8行ぶんで30px以上むだになる */ .pb-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--val); align-items: center; line-height: 1.3; } .pb-row + .pb-row { margin-top: 3px; } .pb-k { display: flex; align-items: baseline; padding-left: var(--pad); padding-right: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink); } .pb-k .pb-tag { margin-left: 4px; font-style: normal; font-weight: 400; font-size: 10px; color: var(--ink-soft); } .pb-t { position: relative; height: 17px; } /* 長さは価格、太さは数量（--q は最大数量を1とした比）。 帯の値は数量で重みをつけた平均なので、太い棒ほど平均を引き寄せる。 その効き方が見えるように、重みを棒の太さそのものに出している */ .pb-b { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: calc(7px + var(--q, 1) * 10px); width: var(--w); border-radius: 0 4px 4px 0; background: var(--ink-soft); transition: width .55s cubic-bezier(.4, 0, .2, 1), background-color .3s; } .pb-row.is-on .pb-b { background: var(--c); } /* 加重に使う数量は棒の先端の外側に置く。棒が伸び縮みすると数字も一緒に 動くので、どの棒がどれだけの重みを持っているかを追いながら見られる */ .pb-b b { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 5px; font-size: 10px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* ③で帯の加重平均へ。④はA区分の1品目だけ元の長さに戻り、 同じ帯の残りは取り直した平均へ動く（--w3）。 .pb-mode は④のときだけ点く目印で、後ろに並ぶ行をまとめて上書きする */ .pb-track.is-on .pb-b { width: var(--w2); } .pb-mode.is-on ~ .pb-row .pb-b { width: var(--w3); } .pb-v { padding-right: var(--pad); text-align: right; font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .pb-v b { display: none; font-weight: 700; } .pb-v b.is-on { display: inline; } .pb-v em { font-style: normal; font-weight: 400; font-size: 10px; color: var(--ink-soft); } /* 最終段から前提へ戻るところ。中身をいったん消してから戻す （スライドのフェード切替と同じ考え方）。枠と背景は残したまま、 ものさし・境目・棒だけを送り出して、透けきった隙に前提へ入れ替える */ .schema.is-rewind .pb-head, .schema.is-rewind .pb-guides, .schema.is-rewind .pb-track { animation: pb-fade .72s ease-in-out; } /* 透けているあいだに入れ替えるので、棒は動かさず一瞬で戻す */ .schema.is-rewind .pb-b { transition: none; } @keyframes pb-fade { 0% { opacity: 1; } 38% { opacity: 0; } 62% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .schema.is-rewind .pb-head, .schema.is-rewind .pb-guides, .schema.is-rewind .pb-track { animation: none; } } /* ものさしの1本。集約に加わらないので、色で塗らず輪郭だけにする */ .pb-row.is-ref .pb-b { background: transparent; border: 1.5px dashed var(--ink-soft); border-radius: 0 4px 4px 0; } .pb-row.is-ref .pb-k { color: var(--ink-mid); } @media (max-width: 620px) { /* 1行に押し込むのは横幅がある画面だけ。狭い画面では潰れてボタンが縦に伸びる */ .bandf .sch-foot { flex-wrap: wrap; } .bandf .sch-legend { flex-wrap: wrap; } .bandf .sch-nav { margin-left: 0; } .pb-stage { --lab: 92px; --val: 56px; --pad: 10px; } /* 見出しの「類似薬の最高価格」は8字あり、10px のままだと列をはみ出す */ .bandf .pb-head .pb-k { font-size: 9px; } .pb-k { font-size: 11px; } .pb-k em { display: none; } .pb-v { font-size: 11.5px; } } /* ---------------- 価格の階段（長期収載品の俯瞰図） ---------------- */ /* 情報量が多い図は、節の左右余白（40px前後）を食って内側いっぱいまで広げる。 節の枠と二重線に見えないよう、8pxだけ内側に残す */ .schema.wide { margin-inline: -36px; padding: 18px 16px 16px; } .schema.wide .sch-cap { padding-inline: 6px; } .schema.wide .stair-hint { padding-inline: 6px; } /* 縦軸は後発品価格の何倍か、横軸は各年4月＝薬価改定の日。 G1（階段）・選定療養（塗りの上半分）・G1撤退（軸下の帯）を1枚に載せる */ /* 切替は4組ある。詰められるところを詰めて、本文幅では1行に収める */ .stair-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 10px; } .sw-g { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sw-g > span { font-size: 11px; color: var(--ink-soft); white-space: nowrap; } .pace { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-sunken); } .pace button { appearance: none; cursor: pointer; border: 0; background: transparent; padding: 7px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--ink-mid); white-space: nowrap; transition: background .18s, color .18s; } .pace button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; } /* X に西暦を入れる欄。空欄なら図は X 表記のまま */ .yr-in { width: 68px; padding: 6px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elev); color: var(--ink); font: inherit; font-size: 12.5px; text-align: center; font-variant-numeric: tabular-nums; } .yr-in:focus { border-color: var(--accent); } /* 適用前の薬価は連続量なので、つまみで動かす。切替の列とは行を分ける */ .p0-row { margin-bottom: 12px; } .p0-in { width: 132px; accent-color: var(--accent); } .p0-out { min-width: 44px; font-size: 12px; font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .pace-n { margin: 0 0 14px; font-size: 12px; line-height: 1.8; color: var(--ink-soft); } .pace-n b { color: var(--ink); } .stair svg { display: block; width: 100%; height: auto; } .stair .grid-l { stroke: var(--line-soft); stroke-width: 1; } /* 目盛の補助線より濃くして、作図の枠がどこまでかを分かるようにする */ .stair .ax-line { stroke: var(--ink-soft); stroke-width: 1; opacity: .5; } .stair .ax-arrow { fill: none; stroke: var(--ink-soft); stroke-width: 1; opacity: .5; stroke-linejoin: round; stroke-linecap: round; } /* 薬価改定は毎年4月。段が落ちるのは本改定（偶数年）の上だけ。 中間年改定は薄くして、改定はあるのにG1が動かないことを見せる */ .stair .rev-l { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; opacity: .38; } .stair .rev-l.mid { stroke-dasharray: 1 4; opacity: .2; } .stair .base-l { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; } .stair .tick { fill: var(--ink-soft); font-size: 11px; } .stair .tick.y { text-anchor: end; } .stair .tick.x { text-anchor: middle; } .stair .tick.on { fill: var(--ink); font-weight: 700; } /* 西暦は4桁で幅を食うので、目盛が詰まらないよう一段小さくする */ .stair .tick.x.yr { font-size: 9.5px; font-variant-numeric: tabular-nums; } .stair .ax-unit { fill: var(--ink-soft); font-size: 10px; letter-spacing: .02em; text-anchor: start; } .stair .tick.y.base { fill: var(--accent); font-weight: 700; font-size: 12px; } .stair .ax-title { fill: var(--ink-soft); font-size: 11px; text-anchor: start; } .stair .lt-line { stroke: var(--accent-deep); stroke-width: 2.5; fill: none; stroke-linejoin: round; } /* 透過で重ねると下の補助線が透けて帯が分断されて見える。同じ見えの不透明色にする */ .stair .a-cov { fill: color-mix(in srgb, var(--warn) 20%, var(--bg-elev)); } .stair .a-pay { fill: color-mix(in srgb, var(--warn) 60%, var(--bg-elev)); } .stair .pre { fill: url(#hatch); } .stair .pre-bg { fill: var(--bg-elev); } .stair .pre-t { fill: var(--ink-soft); font-size: 11.5px; text-anchor: middle; } .stair .in-lbl { fill: var(--ink); font-size: 9px; text-anchor: middle; } .stair .step-t { fill: var(--accent-deep); font-size: 11.5px; font-weight: 700; text-anchor: middle; } /* 表の倍率ではなく補完的引下げ（98%）のほうが効いた段と、適用前の水準 */ .stair .step-t.sup { fill: var(--warn); } .stair .step-t.tag { font-size: 9px; } .stair .step-t.pre-p { fill: var(--ink-mid); font-weight: 400; } /* 注記から図の色を指すときに使う */ .warn-t { color: var(--warn); font-weight: 700; } /* 収載＝すべての起点。実線で立て、条件になっている期間に寸法線を渡す */ .stair .org-l { stroke: var(--accent-2); stroke-width: 2; } .stair .y5-l { stroke: var(--accent-2); stroke-width: 1.5; stroke-dasharray: 4 3; } .stair .span-l { stroke: var(--accent-2); stroke-width: 1.5; } .stair .span-a { fill: none; stroke: var(--accent-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .stair .apply-l { stroke: var(--accent-2); stroke-width: 1.5; } .stair .mk-t { fill: var(--accent-2); font-size: 11px; font-weight: 700; } .stair .mk-t.mid { text-anchor: middle; } .stair .org-t { fill: var(--accent-2); font-size: 10.5px; font-weight: 700; text-anchor: middle; } /* 置換え率の確認まわりだけ別の色。G1該当・適用・撤退のしるし（緑）と 同じ色にすると、条件と結果のどちらを指しているのか読み分けられない */ .stair .chk { fill: var(--danger); } .stair .span-l.chk-c, .stair .y5-l.chk-c, .stair .span-a.chk-c { stroke: var(--danger); } .stair .mk-t.chk-c { fill: var(--danger); } .stair .exit-b { fill: var(--accent-2); opacity: .25; } .stair .exit-t { fill: var(--accent-2); font-size: 11px; font-weight: 700; } /* 線の名前は図の右上の凡例にまとめる。下の補助線を隠すため地色で塗る */ .stair .lg-bg { fill: var(--bg-elev); stroke: var(--line); stroke-width: 1; } .stair .note-t { font-size: 11px; font-weight: 700; text-anchor: start; } .stair .note-t.ser { fill: var(--accent-deep); } .stair .note-t.ge { fill: var(--accent); } /* 補完的引下げが効いたときだけ出る説明。図の色が何を指すのかを言葉で補う */ .sup-note { margin: 12px 0 0; padding: 11px 14px; border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--warn) 8%, transparent); font-size: 12.5px; line-height: 1.85; color: var(--ink-mid); } .sup-note b { color: var(--ink); } .stair-hint { margin-top: 12px; } /* ---------------- 費用対効果評価：評価の手順（目盛送り） ---------------- */ /* 6段の説明を縦に積むと1画面を超えるので、目盛だけ並べて、選んだ段を下に1枚出す。 目盛の下段に期間を書いてあるので、開かなくても全体の長さは読める */ .flowf .sch-grid { min-width: 560px; } .flowf .sch-row { grid-template-columns: 52px repeat(6, minmax(0, 1fr)); } .flowf .ax b { font-size: 13px; } /* 期間は目盛そのものの情報なので、選んでいない目盛でも読める濃さにする */ .flowf .ax span { font-size: 11px; font-variant-numeric: tabular-nums; } /* 段によって文量が違う。いちばん長い段に合わせて高さを止め、 目盛を送るたびに下の本文が上下しないようにする */ .flowf .sch-detail { margin-top: 16px; min-height: 122px; } .flowf .sd p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink-mid); } .flowf .sd-h { margin-bottom: 9px; font-size: 14.5px; } .flowf .sch-note { margin-top: 14px; } /* 狭い画面で6つを横一列に残すと、後ろの3つが画面の外に出て気づかれない。 横へ送らせるより、3列2段に折り返して全部を一度に見せる */ @media (max-width: 620px) { .flowf .sch-scroll { overflow-x: visible; } .flowf .sch-grid { min-width: 0; } .flowf .sch-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .flowf .sch-axis .sch-lh { display: none; } .flowf .ax { padding: 7px 2px 8px; } .flowf .ax b { font-size: 12.5px; } .flowf .ax span { font-size: 10.5px; } .flowf .sch-detail { min-height: 0; } } /* ---------------- 費用対効果評価：価格のどこが動くかの図 ---------------- */ /* 帯の長さがそのまま価格。上が調整前、下が調整後で、同じ目盛に載せてある。 基礎部分は左端で固定なので、動くのは右側の加算部分だけだと形で読める。 削られた分は塗らずに斜線の枠で残し、「そこにあった長さ」を見せる。 引上げのときだけ、100 の位置を示す破線より右へ帯が伸びる */ .htaf .hf-ctl { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } /* 乖離率の図と同じつまみを使う。あちらは単独で置くので下に余白を持っているが、 ここでは右に配慮の切替が並ぶので、余白は外側の .hf-ctl に任せる */ .htaf .gf-ctl { flex: 1 1 300px; margin: 0; } .htaf .gf-ctl-v { min-width: 92px; } .hf-care { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 10px 14px; background: var(--bg-sunken); border-radius: 10px; } .hf-care > span { font-size: 12px; color: var(--ink-mid); } .hf-care .sch-btn { padding: 6px 12px; font-size: 12px; } .hf-care .sch-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* 区分とβは図の結論なので、帯の直前に一行で置く */ .hf-out { display: flex; gap: 4px 24px; flex-wrap: wrap; align-items: baseline; margin: 0 0 14px !important; padding: 11px 16px; background: var(--accent-soft); border-radius: 10px; } .hf-out .ho-k { font-size: 11.5px; color: var(--ink-mid); } .hf-out b { margin-left: 8px; font-size: 15px; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .hf-out .ho-beta { font-size: 21px; line-height: 1.2; } .hf-bars { padding: 18px 18px 15px; background: var(--bg-sunken); border-radius: 12px; } .hf-row { display: grid; grid-template-columns: 86px minmax(0, 1fr) 58px; align-items: center; gap: 12px; } .hf-row + .hf-row { margin-top: 13px; } .hf-k { font-size: 12.5px; line-height: 1.4; color: var(--ink-mid); } /* 角丸は帯の側ではなく枠で作る。区間の幅が0になることがあるので、 端の区間に角丸を当てると、そのときだけ角が立ってしまう */ .hf-tw { position: relative; display: block; } .hf-t { display: flex; height: 30px; border-radius: 6px; overflow: hidden; } /* 100 の位置。引上げでここを越えるのが分かるよう、調整後の行にだけ引く。 目盛は 110 までなので 100 は 90.909% にあたる */ .hf-row.after .hf-tw::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: 90.909%; border-left: 1px dashed color-mix(in srgb, var(--ink-soft) 60%, transparent); } .hf-b { display: block; height: 100%; transition: width .25s ease-out; } /* 基礎部分と加算部分は同じ色相の濃淡にする。塗り分けではないので、 白黒でも「濃いほうが動く側」という順序が保たれる */ .hf-b.base { background: color-mix(in srgb, var(--accent) 30%, var(--bg-elev)); } .hf-b.prem { background: var(--accent); } .hf-b.add { background: var(--accent-2); } .hf-b.cut { background: repeating-linear-gradient(135deg, var(--line) 0 4px, transparent 4px 9px); box-shadow: inset 0 0 0 1px var(--line); } .hf-v { font-size: 15px; font-weight: 700; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; } .hf-after { color: var(--accent-deep); } .hf-msg { margin: 14px 0 0 !important; padding: 12px 15px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 9px; font-size: 13.5px; line-height: 1.9; color: var(--ink-mid); } .hf-msg strong { color: var(--ink); font-variant-numeric: tabular-nums; } /* 下限・上限に当たった状態。数字どおりに動かないことを色で断る */ .hf-msg.is-cap { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .lg.h-base { --c: color-mix(in srgb, var(--accent) 30%, var(--bg-elev)); } .lg.h-prem { --c: var(--accent); } .lg.h-add { --c: var(--accent-2); } .lg.h-cut::before { background: repeating-linear-gradient(135deg, var(--line) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--line); } /* 3列のままだと帯に100px ほどしか残らず、区間の長さを読み取れない。 名前と金額を1行に載せ、帯はその下に全幅で敷く */ @media (max-width: 620px) { .hf-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "t t"; gap: 5px 10px; } .hf-k { grid-area: k; font-size: 12px; } .hf-v { grid-area: v; } .hf-tw { grid-area: t; } .hf-row + .hf-row { margin-top: 15px; } .hf-bars { padding: 15px 14px 13px; } .hf-out { gap: 2px 18px; padding: 10px 14px; } } /* ---------------- responsive ---------------- */ @media (max-width: 980px) { /* minmax(0,1fr) にしないと、中の表などの min-content でトラックが広がってしまう */ .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 34px; } .toc { position: static; max-height: none; margin-bottom: 26px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .toc ol { columns: 2; column-gap: 24px; } .toc ol ol { columns: 1; } /* 8項目を横一列に並べるとここから2行に折れ、ヘッダーの枠から はみ出して上下に飛び出す。980px 以下はたたむメニューに切り替える */ .nav-toggle { display: flex; } .global-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; /* 横並びのときの中央そろえを解除しないと、縦一列で左端が不ぞろいになる */ flex-direction: column; align-items: stretch; gap: 0; padding: 8px; /* 帯と同じ色にする。白い文字のまま白い板に落とすと読めなくなる */ background: var(--bar); border-bottom: 1px solid var(--bar-line); box-shadow: var(--shadow-md); } .global-nav.open { display: flex; } .global-nav a { padding: 11px 14px; border-radius: 8px; font-size: 15px; } /* たたんだメニューは縦一列。区切りは横の余白ではなく上の罫線にする */ .global-nav a.nav-contact { margin-left: 0; margin-top: 7px; padding-top: 16px; border-color: transparent; border-top: 1px solid var(--bar-line); border-radius: 0 0 8px 8px; } /* たたむメニューでは、ふれて開くパネルは出さない（たたんだ一覧で足りる） */ .nav-hub { display: block; } .nav-hub::after, .nav-menu { display: none; } /* 指で押す幅にする。ハンバーガー（40x36）と同じ大きさにそろえる */ :root[data-js] .theme-btn { width: 40px; height: 36px; margin-left: 8px; border-radius: 9px; } .theme-btn svg { width: 17px; height: 17px; } } @media (max-width: 760px) { body { font-size: 15.5px; line-height: 1.85; } .wrap { width: min(100% - 28px, var(--wrap)); } .hero-inner { padding: 44px 0 30px; } .sec { padding: 28px 22px 32px; border-radius: 14px; } .fineprint { padding: 18px 22px 0; } .highlight-sec::before { margin: -28px -22px 22px; } .brand-ver { display: none; } .toc ol { columns: 1; } .flow-line .arrow { display: none; } .histlist li { grid-template-columns: 1fr; } .histlist .h-delta { justify-self: start; } .spec { grid-template-columns: 1fr; } .spec dt { border-bottom: 0; padding-bottom: 3px; } .spec dd { padding-top: 0; } .price-now .pn-date { margin-left: 0; width: 100%; } .form-card { padding: 20px 18px 22px; } .form-actions > .btn { width: 100%; text-align: center; } .glossary { grid-template-columns: 1fr; } .glossary dt { border-bottom: 0; padding-bottom: 4px; } .glossary dd { padding-top: 0; } .stance { grid-template-columns: 1fr; } .stance dt { border-bottom: 0; padding-bottom: 2px; } .stance dd { padding: 0 16px 12px; } .brand-text { font-size: 11px; } .schema { padding: 16px 14px 14px; } /* 狭い画面では節の余白も薄いので、はみ出させる余地がない */ .schema.wide { margin-inline: 0; padding: 16px 12px 14px; } /* 見出しの札を上に置き、説明を全幅で読ませる */ .sd-l { grid-template-columns: 1fr; gap: 3px; } .sd-l dt { width: 88px; } .sd-l dd { margin-bottom: 9px; } .sd-l dd:last-child { margin-bottom: 0; } .sb-row { grid-template-columns: 72px 1fr; } .sb-v { grid-column: 2; text-align: left; } .sch-nav { margin-left: 0; width: 100%; } .sch-btn { flex: 1; text-align: center; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } @media print { .toc, .nav-toggle, .site-footer { display: none; } /* ヘッダは丸ごと消していたが、いつ時点の薬価かの札がここに入ったので、 名前と札だけを1行残す。紙に落ちたとき出所が分からなくなるのを防ぐ */ .site-header { position: static; background: none; color: #000; border-bottom: 1px solid #999; margin-bottom: 12pt; } .header-inner { height: auto; padding: 0 0 6pt; gap: 10pt; } .brand { color: #000; } .brand-mark, .global-nav, .theme-btn, .scroll-progress { display: none; } .brand-word { color: #000; } .brand-text { color: #000; } .brand-ver, .tn-chip { background: none; color: #000; border: 0; padding: 0; font-size: 9pt; } body { background: #fff; font-size: 10.5pt; line-height: 1.7; } .layout { display: block; padding: 0; } .sec { border: 0; box-shadow: none; padding: 0; margin-bottom: 24pt; break-inside: avoid; } .sec h2 { break-after: avoid; } a { color: #000; text-decoration: underline; } } /* ========================================================= トップページ — 表紙・入口・道・札の並び （案H＝表紙は金額、入口は読む／調べる、目次は一本道） ========================================================= */ /* --------------------------------------------------------- 1. 上端の帯（見た目はヘッダの節、ここは札の幅の調整だけ） 狭い画面では、名前・札・メニューが1行に収まらなくなる。 落とす順は 版表示 → 品目数 → 札そのもの。日付は最後まで残す --------------------------------------------------------- */ /* 携帯の幅では札の枠を外して地の文にする。枠と余白の分だけ幅が浮く。 日付そのものは残す。いつ時点の薬価かは、この帯の一番の役目 */ @media (max-width: 470px) { .header-inner { gap: 10px; } .tn-chip { padding: 0; border-color: transparent; } } /* ここまで狭いと、札を残すとハンバーガーがつぶれる（38px→20px）。 押せる大きさのほうを取る */ @media (max-width: 380px) { .tn-chip { display: none; } } /* --------------------------------------------------------- 2. 表紙 — 数字から入る 見出しより先に金額を出す。入口カードが最初の画面に入る大きさに抑える --------------------------------------------------------- */ /* 上の余白は、開いた直後に伸びた数字が収まる高さを見込んでいる。 1.7倍で上に出る分（数字の高さの0.7倍）＋見出しの行を足した値 */ .hy-hero { padding: 58px 0 40px; } @media (min-width: 1080px) { .hy-top { display: grid; grid-template-columns: minmax(0, 1fr) min(420px, 38%); gap: 52px; align-items: start; } } .hy-k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--accent); } .hy-fig { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 24px; margin: 10px 0 0; } /* 幅があるときは、3項目を金額の右の空きに置く。縦に積むと金額の右が 336pxほど空き、そのぶん表紙が88px高くなる。 金額は縮ませない。縮むと「兆円」が2行目に落ちて、かえって背が伸びる。 すき間32pxは「東京都…」の行（素の幅371px）が1行に収まる値 */ @media (min-width: 760px) { .hy-fig { flex-wrap: nowrap; column-gap: 32px; } .hy-num { flex: 0 0 auto; white-space: nowrap; } /* ul の既定の左余白40pxをここでは外す。残すと文字に使える幅が 346pxになり、「東京都…」の行が折り返す。点は li 側で打っている */ .hy-lab { flex: 1 1 auto; min-width: 0; padding-left: 0; } } /* 動かす量を測るあいだだけ、元の縦積みに戻す（script.js が使う）。 flex-wrap を戻すだけでは足りない。左余白を外したことで横一列に収まって しまい、折り返さなくなるため、並べ方そのものを block に戻す */ .hy-fig.is-measuring { display: block; } /* 6px は、折り返していたころの行間（gap の縦方向）。 これを足さないと、開いた直後の位置が以前より6px上にずれる */ .hy-fig.is-measuring .hy-lab { padding-left: 40px; margin-top: 6px; } /* 数字の大きさはこの案の売りなので、案C単体のときの大きさに戻す。 縦に余裕のない画面では、下の入口カードが隠れてしまう手前で頭打ちにする。 min(10vw, 17vh) ＝ 横にも縦にも合わせる、という指定 */ /* 文字の大きさ（font-size）は最初から最後まで変えない。 変えると下の内容が動いてしまい、読み込み後のレイアウト移動として 計測されてしまう（Core Web Vitals の CLS）。 大きく見せるのは transform: scale() の側で行う。transform は場所を 取らないので、下の内容は1pxも動かない。上へ伸びるよう原点を左下に置く */ .hy-hero { --num-final: clamp(56px, min(10vw, 17vh), 104px); --open-scale: 1.7; /* 開いた直後の見かけの倍率 */ } .hy-num { margin: 0; line-height: 1; letter-spacing: -.01em; color: var(--accent-deep); font-size: var(--num-final); font-weight: 700; font-variant-numeric: tabular-nums; transform-origin: left bottom; } /* ---- 開いた直後だけ大きく出す ---- 最初の数秒は表紙として金額だけを見せ、そのあと元の大きさに戻り、 見出し・内訳・入口カードが現れる。JSが動く環境でだけ効かせたいので、 head で付く data-js を条件にしている。JSが無ければ最初から落ち着いた形 */ html[data-js="1"] .hy-hero .hy-num { transition: transform 1.1s cubic-bezier(.22, .8, .3, 1); } /* 表紙のあいだは、見出しも内訳も伏せて金額だけが残る。 そのままだと金額がヒーローの上端に貼り付いて見えるので、少し下ろして 空いた面の中に置く。translateY は scale より先に効くため、 実際に下がる量は 0.6em × 1.7 ＝ 約1em ぶん。em で指定してあるので 画面の大きさに応じて下がる量も変わる */ html[data-js="1"] .hy-hero.is-open .hy-num { transform: scale(var(--open-scale)) translateY(.6em); } /* 伸びた数字と重なるものは、表紙のあいだだけ伏せる。 opacity だけを動かすので、ここでも場所は動かない */ html[data-js="1"] .hy-hero .hy-k, html[data-js="1"] .hy-hero .hy-lab, html[data-js="1"] .hy-hero .hy-fund { transition: opacity .6s ease .35s; } html[data-js="1"] .hy-hero.is-open .hy-k, html[data-js="1"] .hy-hero.is-open .hy-lab, html[data-js="1"] .hy-hero.is-open .hy-fund { opacity: 0; } /* 開いた直後は、3項目を金額の下に、見出しから下を1ブロックぶん下に置く。 つまり金額が大きいあいだは、3項目が横に並ぶ前の姿でいる。 落ち着くときに transform が解けて、金額が縮むのと同じ動きで所定の 位置へ収まる。長さも曲線も金額（1.1s）にそろえてあり、待ちは入れない。 待ちを入れると、金額が縮んでから本文が動く二段構えに見える。 ずらす量は画面の幅で変わるので、script.js が測って変数に入れる。 変数が無いときは 0＝動かないので、JSが届かなくても崩れない */ html[data-js="1"] .hy-hero .hy-lab { transition: opacity .6s ease .35s, transform 1.1s cubic-bezier(.22, .8, .3, 1); } html[data-js="1"] .hy-hero.is-open .hy-lab { transform: translate(var(--lab-dx, 0px), var(--lab-dy, 0px)); } html[data-js="1"] .hy-hero .hy-turn, html[data-js="1"] .hy-hero .hy-lead { transition: transform 1.1s cubic-bezier(.22, .8, .3, 1); } html[data-js="1"] .hy-hero.is-open .hy-turn, html[data-js="1"] .hy-hero.is-open .hy-lead { transform: translateY(var(--body-dy, 0px)); } /* 下がっている分だけ表紙の背を伸ばす。無いと入口カードが次の節に食い込む */ html[data-js="1"] .hy-hero { transition: margin-bottom 1.1s cubic-bezier(.22, .8, .3, 1); } html[data-js="1"] .hy-hero.is-open { margin-bottom: var(--body-dy, 0px); } /* 入口カードは、もとの14pxの浮きに下がる分を足す。 現れ方（opacity）は遅らせたまま、動きだけ金額にそろえる */ html[data-js="1"] .hy-hero .gate { transition: opacity .7s ease .35s, transform 1.1s cubic-bezier(.22, .8, .3, 1); } html[data-js="1"] .hy-hero.is-open .gate { opacity: 0; transform: translateY(calc(var(--body-dy, 0px) + 14px)); } /* 読み始めた人の足元を動かさないため、途中で触られたら動かずに確定させる */ html[data-js="1"] .hy-hero.no-anim, html[data-js="1"] .hy-hero.no-anim * { transition: none !important; } /* 動きを減らす設定のときは、最初から落ち着いた形で出す */ @media (prefers-reduced-motion: reduce) { html[data-js="1"] .hy-hero.is-open .hy-num { transform: none; } html[data-js="1"] .hy-hero.is-open .hy-k, html[data-js="1"] .hy-hero.is-open .hy-lab, html[data-js="1"] .hy-hero.is-open .hy-fund, html[data-js="1"] .hy-hero.is-open .gate { opacity: 1; transform: none; } /* 位置替えも見せない。最初から並び終わった形で出す */ html[data-js="1"] .hy-hero.is-open .hy-turn, html[data-js="1"] .hy-hero.is-open .hy-lead { transform: none; } html[data-js="1"] .hy-hero.is-open { margin-bottom: 0; } html[data-js="1"] .hy-hero * { transition: none; } } .hy-num .u { font-size: .34em; margin-left: 6px; letter-spacing: .02em; } /* 兆という単位は実感が湧かないので、規模の見当がつくものを3つ並べる。 どれも数え方を変えただけの中立な事実で、良し悪しの評価は入れない。 主役は金額そのものなので、色も枠も付けず静かに置く */ .hy-lab { padding-bottom: 6px; margin: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--ink-mid); } .hy-lab li { padding: 3px 0 3px 14px; position: relative; } .hy-lab li::before { content: ''; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--line); } .hy-lab b { color: var(--ink); font-weight: 700; } /* 数字を受けて、ここでサイトの主題を名乗る。h1 はこの1行。 style.css の .hero h1（52px）に負けないよう、同じ強さで指定する */ .hy-hero h1.hy-turn { /* 1行に収まる幅を取る。収まらない画面では balance で行の長さをそろえ、 「す」だけが次の行に落ちるような切れ方を避ける */ max-width: 720px; margin: 22px 0 0; font-size: clamp(19px, 2.2vw, 26px); font-weight: 700; line-height: 1.65; letter-spacing: normal; color: var(--ink); text-wrap: balance; } .hy-turn em { font-style: normal; color: var(--accent-deep); } .hy-lead { max-width: 620px; margin: 14px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--ink-mid); } /* 財源の帯は枠を持たせず、表紙の地の上に直接置く */ .hy-fund .fund { margin: 0; } .hy-src { margin: 14px 0 0; font-size: 11px; line-height: 1.75; color: var(--ink-soft); } @media (max-width: 1079px) { .hy-fund { margin-top: 30px; max-width: 620px; } } /* --------------------------------------------------------- 3. 入口 — 読む / 調べる の2枚だけ 表紙のすぐ下。3枚目を足したくなったらこの作りは成立しない --------------------------------------------------------- */ .gate { display: grid; gap: 18px; margin: 30px 0 0; } @media (min-width: 820px) { .gate { grid-template-columns: 1fr 1fr; } } .gate-card { display: block; padding: 22px 24px 20px; text-decoration: none; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color .14s, transform .14s, box-shadow .14s; } .gate-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); } .gate-card.g-read { border-top: 3px solid var(--accent); } .gate-card.g-find { border-top: 3px solid var(--accent-2); } .g-k { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--ink-soft); } .g-t { display: block; margin: 6px 0 0; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.4; } .g-d { display: block; margin: 9px 0 0; font-size: 13px; line-height: 1.8; color: var(--ink-mid); } .g-stat { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 0; } .g-stat div { line-height: 1.3; } .g-stat b { display: block; font-size: 20px; font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .g-find .g-stat b { color: var(--accent-2); } .g-stat span { font-size: 11.5px; color: var(--ink-soft); } .g-go { display: block; margin: 15px 0 0; font-size: 13.5px; font-weight: 700; color: var(--accent); } .g-find .g-go { color: var(--accent-2); } /* --------------------------------------------------------- 4. 目次 — 縦の1本道 セクション番号の並びが、そのまま薬価の一生の順になっている --------------------------------------------------------- */ .rt { list-style: none; margin: 0; padding: 0; position: relative; } .rt::before { content: ''; position: absolute; left: 21px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } /* 区切りは道の途中の「駅名標」。ここで一段落つくよう、前後を広く空けて 文字も大きくする。17項目が同じ調子で続くと、どこまで来たか分からなくなる */ .rt-phase { position: relative; margin: 34px 0 13px; padding-left: 56px; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--ink); } .rt-phase small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); } .rt-phase:first-child { margin-top: 0; } /* 区切りの位置で線を隠し、見出しが線の上に乗るようにする。 道の途中の区切りも「いま見ている位置」の対象なので、 ここに来たときはこの帯をそのまま塗る */ .rt-phase::before { content: ''; position: absolute; left: 14px; top: -6px; width: 16px; bottom: -6px; background: var(--bg); transition: background .18s; } .rt-phase.is-here::before { background: var(--accent); } .rt-item { position: relative; margin: 0 0 10px; } /* 狭いうちは縦に積む。役割ラベル・見出し・説明の順 */ .rt-item a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; column-gap: 16px; row-gap: 2px; padding: 15px 16px 15px 0; border-radius: 10px; text-decoration: none; } .rt-item .rt-role { grid-column: 2; grid-row: 1; } .rt-item .rt-t { grid-column: 2; grid-row: 2; } .rt-item .rt-d { grid-column: 2; grid-row: 3; } /* 幅があるときは、見出しと説明を同じ行に並べる。 見出しは中身なりの幅、説明が残りを取る。役割のラベルは上に1行だけ乗り、 ラベルを持たない項目ではその行に中身がないので高さを持たない */ @media (min-width: 900px) { .rt-item a { grid-template-columns: 44px minmax(0, auto) minmax(0, 1fr); align-items: baseline; column-gap: 18px; } .rt-item .rt-role { grid-column: 2 / -1; grid-row: 1; } .rt-item .rt-t { grid-column: 2; grid-row: 2; } .rt-item .rt-d { grid-column: 3; grid-row: 2; } .rt-item .rt-n { grid-row: 1 / span 2; align-self: center; } } .rt-item a:hover { background: var(--bg-elev); } .rt-n { grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); background: var(--bg); border: 2px solid var(--line); } .rt-item a:hover .rt-n { color: var(--accent); border-color: var(--accent); } /* いま見ている位置は輪が塗りつぶしになっている。そこにカーソルを当てると、 上の指定で字までアクセント色になり、地と同じ色で数字が消える。 塗りつぶしのときは字を白のままにして、地のほうを濃くして反応を返す */ .rt-item.is-here a:hover .rt-n { color: var(--on-accent); background: var(--accent-deep); border-color: var(--accent-deep); } .rt-role { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--ink-soft); } /* 行の高さは倍率ではなく px で決める。いま見ている項目だけ字を大きくするが、 倍率のままだと大きくした分だけ行が伸び、下の内容が動いてしまう。 大きいほうの字が入る高さを先に確保しておけば、場所は動かない */ .rt-t { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 32px; } .rt-d { font-size: 13px; line-height: 26px; color: var(--ink-mid); } .rt-t, .rt-d { transition: font-size .18s, color .18s; } /* ---- 緩急 ---- 17項目が全部同じ重さだと、どこから読めばいいか決められない。 意味のある2つの軸で差をつける。飾りでは差をつけない 1つめ：価格に働く力の向き。番号の輪と役割ラベルに色を乗せる。 つける＝濃いアクセント、上げる・守る＝アクセント、下げる＝もう一方の色。 費用対効果評価は上下どちらもあるので、あえて色を付けない */ .rt-item.r-set .rt-n { color: var(--accent-deep); border-color: var(--accent-deep); } .rt-item.r-up .rt-n { color: var(--accent); border-color: var(--accent); } .rt-item.r-down .rt-n { color: var(--accent-2); border-color: var(--accent-2); } .rt-item.r-set .rt-role { color: var(--accent-deep); } .rt-item.r-up .rt-role { color: var(--accent); } .rt-item.r-down .rt-role { color: var(--accent-2); } /* 2つめ：読み始める場所。最初の1本だけ見出しを一回り大きく、 説明も1行ぶん厚くする。「まずここから」が言葉なしで伝わる */ .rt-item.is-first a { padding-top: 17px; padding-bottom: 17px; } .rt-item.is-first .rt-t { font-size: 20px; } .rt-item.is-first .rt-d { font-size: 13.5px; } /* 3つめ：いま見ている位置。塗りつぶす輪はスクロールに合わせて動く。 1本の道を下りていく途中で、自分がどこにいるかが分かる。 あわせて見出しと説明を一回り大きくする。行の高さは上で先に確保して あるので、大きくなっても下の内容は動かない */ .rt-item.is-here .rt-n { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } /* 項目ごとの大きさ（is-first の20px、is-sub の15.5px）と同じ強さだと、 あとに書いたほうが勝ってしまう。アピール中はどの項目でも同じ扱いに したいので、道（.rt）を1つ挟んで一段強くしておく */ .rt .rt-item.is-here .rt-t { font-size: 21px; } /* 説明は大きくせず、色だけ濃くする。字を1px上げるだけで折り返しが1行増える 項目があり（14 計算方法など）、その分だけ下の内容が動いてしまう。 見出しの行の高さは上で固定してあるので、見出しだけなら動かない */ .rt .rt-item.is-here .rt-d { color: var(--ink); } .rt-item .rt-n { transition: background .18s, border-color .18s, color .18s; } .rt-start { display: inline-block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--accent); } /* 補足的な項目は文字を落として、本体との差を出す */ .rt-item.is-sub .rt-t { font-size: 15.5px; } .rt-item.is-sub .rt-d { font-size: 12.5px; color: var(--ink-soft); } @media (max-width: 560px) { .rt::before { left: 17px; } .rt-phase { padding-left: 46px; } .rt-phase::before { left: 11px; width: 14px; } .rt-item a { grid-template-columns: 36px 1fr; gap: 12px; } .rt-n { width: 36px; height: 36px; font-size: 12.5px; } } /* ---- 札を2枚並べる ---- 1枚だと本文欄の幅に対して札が広がりすぎ、数字列の右に700px以上余っていた。 2枚並べると幅が埋まるうえ、10円台と数百万円台が同時に出ることがあり、 薬価の幅がそのまま目に入る。それぞれ独立して動き、送りも別々に操作できる */ /* 札は中身が端まで詰まっているので、間は広めに取る。 数字列の右端から札の縁までが23pxしかなく、20px程度だと 隣の札の「後発品」バッジと地続きに見えてしまう */ /* 2列にするのは、札1枚が約500pxを保てる幅から。 札の数字列は億の位まで常に並べるので329px固定で、 これより狭いと右の「円 / 2.5mg1錠」の欄が潰れて読めなくなる */ .sl-pair { display: grid; gap: 20px; } @media (min-width: 1180px) { .sl-pair { grid-template-columns: 1fr 1fr; gap: 36px; } } .sl-pair .spotlight { max-width: none; margin: 0; } /* 説明を1行に収めたので、広い画面では4枚を横一列に置く。 1,180px を下回ると1枚あたりが狭くなって説明が2行に折れるため、 そこからは2列（2×2）に戻す */ @media (min-width: 900px) { .hub-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1180px) { .hub-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---- 札の並び ---- 広い画面で5枚を横一列に。狭くなると2列、さらに狭ければ1列に落とす。 札の数字列は億の位まで常に同じ枚数のタイルを並べるので、 6円の品目でも3億円の品目でもタイルの位置がそろい、 埋まり具合の差がそのまま桁の差として見える */ .deck { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 620px) { .deck { grid-template-columns: 1fr 1fr; } } @media (min-width: 1180px) { .deck { grid-template-columns: repeat(5, 1fr); gap: 14px; } } /* ---- 札の中身 ---- 数字は15px。品名・成分名・価格・区分だけに削る。 枠の高さは決め打ちで、品目が変わっても動かない。 品名の長さで枠が伸びると、5枚の下端がばらついて一覧に見えなくなるため */ .deck .spotlight { padding: 12px 12px 10px; height: 185px; overflow: hidden; } .deck .flap { width: 15px; height: 24px; border-radius: 3px; } .deck .flap i { font-size: 13px; } .deck .flap.sm { width: 11px; height: 18px; } .deck .flap.sm i { font-size: 10px; } .deck .sl-comma { width: 3px; font-size: 10px; line-height: 24px; } .deck .sl-dot { width: 3px; font-size: 10px; line-height: 18px; } .deck .sl-row { flex-wrap: wrap; min-height: 0; gap: 2px; margin-top: 6px; } .deck .sl-digits { gap: 2px; } /* 規格はいちばん長いもので37字（（人免疫グロブリン12mg…）1瓶（溶解液付））。 折り返させると枠が3行ぶん伸びるので、1行に固定して末尾を省く。 全文は script.js が title に入れているので、カーソルを乗せれば読める */ /* 「円」だけは style.css で16px固定になっている。札を縮めた分ここも下げないと、 指定した行の高さを超えて下の区分バッジに重なる */ .deck .sl-yen { /* 行の高さは倍率ではなく px で決める。倍率だと「円」の分だけ行が伸び、 枠の高さと合わなくなる */ flex: 1 0 100%; margin-top: 4px; font-size: 10.5px; line-height: 18px; height: 18px; padding-bottom: 0; /* 既定の下パディング4pxを外す */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line-height を1にしておかないと、「円」が自分の行の高さを主張して 行全体が伸びる。字の大きさは変えずに、行だけ広げないようにする */ .deck .sl-yen b { font-size: 12px; line-height: 1; } { font-size: 13px; } { font-size: 14px; } /* 品名の欄は3行ぶんで固定。いちばん長い40字の品名も13pxのまま3行で入るので、 ふだんは字を小さくせず改行だけで足りる。3行でも入らないときだけ 下の fitName が字を詰める */ .deck .sl-name { font-size: 13px; line-height: 1.4; height: calc(13px * 1.4 * 3); min-height: 0; overflow: hidden; /* 「フルチカゾン…27.5μg「武田テバ」120噴霧用」のように、途中に 区切れない英数字が挟まる品名がある。行末が余ると2行に収まらないので、 入りきらないときだけ englishの語中でも折る */ overflow-wrap: anywhere; } .deck .sl-meta { margin-top: 6px; } /* 成分名は1行で固定。「アンピシリンナトリウム・スルバクタムナトリウム」の ように長いものがあるので、はみ出す分は末尾を省く */ .deck .sl-generic { margin-top: 3px; font-size: 11px; line-height: 1.6; height: calc(11px * 1.6); min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 4枚・5枚では、札ごとの見出し・注記・操作を落として高さを詰める */ .deck .sl-head, .deck .sl-note, .deck .sl-foot, .deck .sl-asof { display: none; } /* 3枚以上では区分の切替を札ごとに置かず、下の共通の操作列にまとめる */ .deck .sl-filter { display: none; } { margin-bottom: 8px; } { display: none; } /* ---- 3枚以上のときの共通の操作列 ---- */ .deck-foot { display: none; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); align-items: center; gap: 12px; flex-wrap: wrap; } .deck-foot.is-on { display: flex; } .deck-foot .df-note { font-size: 11.5px; color: var(--ink-soft); margin: 0 auto 0 0; flex: 1 0 100%; } /* 区分の切替。札ごとの .sl-chip と同じ見た目にそろえる */ .df-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; } .df-filter .df-chip { font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.6; padding: 3px 10px; border-radius: 999px; cursor: pointer; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); } .df-filter .df-chip:hover { border-color: var(--accent); color: var(--accent); } .df-filter .df-chip[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } .deck-foot button { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--accent); background: transparent; border: 1px solid var(--line); } .deck-foot button:hover { background: var(--accent-soft); border-color: var(--accent); } .deck-foot button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } /* ========================================================= 道の窓 — 5項目ずつ、真ん中がフォーカス 円をつなぐ線は円弧で、真ん中がいちばん右へ膨らむ。 送りはページのスクロールから受け取る。貼り付く塊が画面を覆うので、 走行距離のぶんの空きが見えることはない。 JS が動かないときは、下の .rt（縦一列の道）がそのまま残る ========================================================= */ /* ---- 窓 ---- */ .win { --row: 78px; position: relative; height: calc(var(--row) * 5); margin: 22px 0 0; } /* 円弧は窓に貼り付けて動かさない。中身だけがこの下を通る */ .win-arc { position: absolute; inset: 0; overflow: visible; z-index: 0; pointer-events: none; } .win-arc path { fill: none; stroke: var(--line); stroke-width: 2; } /* 中身は窓で切り取るだけ。送りはページのスクロールから受け取る */ .win-clip { position: absolute; inset: 0; z-index: 1; overflow: hidden; } /* 上下に2行ぶん空けて、最初と最後の行も真ん中に来られるようにする */ /* will-change は付けない。別レイヤーに載ると字の描き方が変わってにじむ */ .win-track { padding: calc(var(--row) * 2) 0; } /* ---- ページのスクロールで送る器 ---- */ /* 器の高さは JS が「段数 × 1段あたりの距離」で決める。 貼り付く塊は画面いっぱいの高さを持ち、中身をその中で上下中央に置く。 塊が画面を覆うので、器の空き部分は見えない */ .scrolly { position: relative; } /* 塊の高さは中身のぶんだけ。画面いっぱいにすると、中身との差が そのまま空きとして見えてしまう。画面の中ほどに置くための top は、 中身の高さを測ってから JS が入れる */ .scrolly-stick { position: sticky; top: 0; } /* 白い枠は、器ではなく貼り付く塊のほうに持たせる。 器は送りの走行距離のぶんだけ高いので、器を枠にすると 中身の下に枠の空きが延々と続いて見えてしまう。 枠が塊と一緒に動けば、空いた場所はページの地になる */ .sec:has(> .scrolly) { background: transparent; border: 0; box-shadow: none; padding: 0; } .scrolly-stick { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 44px 46px; box-shadow: var(--shadow-sm); } /* 見出しから窓までのすき間。本文の見出しと同じ間隔（17+26+22＝65px）だと 窓が下に離れて見えるので、この塊の中だけ詰める（8+12+10＝30px）。 .sec h2 と .sec p の指定に届くよう、.sec を挟んで書いている */ .sec .scrolly-stick .sec-num { margin-bottom: 8px; } .sec .scrolly-stick h2:not(.sec-h):not(.grp) { margin-bottom: 12px; } .sec .scrolly-stick > p { margin-bottom: 0; } .sec .scrolly-stick .win { margin-top: 10px; } /* 横のずれ（弧の膨らみ）は JS が transform で入れる。 padding で動かすと毎フレーム配置の計算がやり直しになる */ .win-row { display: flex; align-items: center; height: var(--row); text-decoration: none; } /* ---- 印（円と番号）---- */ /* 番号は円の上に載せたまま。円は真ん中に近いほど右へ出て弧をなす */ .w-mark { position: relative; flex: 0 0 44px; height: 44px; } .w-dot { position: absolute; inset: 0; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: background .2s, border-color .2s; } .w-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); transition: color .2s; } .w-body { flex: 1 1 auto; min-width: 0; padding-left: 16px; } .w-role { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--ink-soft); } .w-t { display: block; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 28px; } /* 窓の1行は78pxで固定（script.js の ROW と対になっている）。 狭い画面では説明が4行（88px）になり、次の行の題に重なる。 題の28pxを引いた残りは50pxなので、説明は2行までで切る */ .w-d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 22px; color: var(--ink-mid); } /* 役割の札を持つ行（制度の本体の11項目）は、題28＋役割21で先に49px使う。 残りは29pxなので説明は1行まで。2行だと93pxになり次の行に重なる。 1400px幅では説明がもともと1行に収まるため、この指定が効くのは だいたい760〜1190pxの範囲になる */ .win-row.has-role .w-d { -webkit-line-clamp: 1; line-clamp: 1; } /* 題が真ん中で大きくなるときの上限。script.js がここを読む。 広い画面では21px、狭い画面では18px。21pxのままだと 「革新的新薬薬価維持制度」のような題が2行に折れ、説明と合わせて 78pxを超えて次の行に重なる */ :root { --win-t-max: 21px; } /* 携帯の幅では、題（28）＋役割（21）＋説明で78pxに収める。 説明は1行、題は18pxまで。合計69pxで9px残る */ @media (max-width: 760px) { :root { --win-t-max: 18px; } .w-d { -webkit-line-clamp: 1; line-clamp: 1; font-size: 12.5px; line-height: 20px; } /* 相の見出し（「薬価はこう決まり、こう動く — 制度の本体」）は 360px幅で3行に折れる。題も2行までで切る */ .w-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } } /* 携帯の幅では、本文に使える幅が200px前後まで落ちる。 「革新的新薬薬価維持制度」のような題は2行になり、題56＋役割21で すでに77px。説明を置く余地が無いので、ここでは題と役割だけにする。 説明は開いた先のページの冒頭にある */ @media (max-width: 480px) { .w-d { display: none; } } /* 力の向きの色 */ .win-row.r-set .w-num, .win-row.r-set .w-role { color: var(--accent-deep); } .win-row.r-up .w-num, .win-row.r-up .w-role { color: var(--accent); } .win-row.r-down .w-num, .win-row.r-down .w-role { color: var(--accent-2); } .win-row.r-set .w-dot { border-color: var(--accent-deep); } .win-row.r-up .w-dot { border-color: var(--accent); } .win-row.r-down .w-dot { border-color: var(--accent-2); } /* ---- 真ん中（フォーカス）---- */ /* 円の塗りだけを段で切り替える。見出しの大きさ・説明の濃さ・行全体の薄さは、 中心からの距離から連続で決めるので、ここでは指定しない（JS が入れる）*/ .win-row.is-on .w-dot { background: var(--accent); border-color: var(--accent); } .win-row.is-on .w-num { color: var(--on-accent); } .win-row.is-on .w-d { color: var(--ink); } /* 区切りの行。番号を持たないので、円のところに帯を出す */ .win-row.is-phase .w-dot { border: 0; background: var(--line); border-radius: 3px; inset: 8px 15px; } .win-row.is-phase.is-on .w-dot { background: var(--accent); } .win-row.is-phase .w-t { font-size: 14px; } .win-row.is-phase.is-on .w-t { font-size: 19px; } .win-hint { margin: 0 0 4px; font-size: 12.5px; line-height: 1.9; color: var(--ink-soft); } /* 引下げの下限（後発品の最高価格）。1倍と紛れないよう細くする */ .stair .fl-l { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; opacity: .75; } .stair .fl-t { fill: var(--accent); font-size: 10px; font-weight: 700; text-anchor: start; } .stair .step-t.floor { fill: var(--accent); } /* 激変緩和（令和8年度改定限りの50%上限）で止まった段 */ .stair .step-t.cap { fill: var(--danger); } /* ========================================================= 薬価データベースの画面（database.html / dbpro.html） --------------------------------------------------------- どちらもページ自体は動かさず、結果の枠の中だけが動く。 .ns- は2つの画面で共通の骨組み、.qc- は検索の画面、 .rb- は分析の画面だけで使う。 ========================================================= */ /* ---- 1画面に収める ---- */ html:has(body.ns), body.ns { height: 100%; } body.ns { display: flex; flex-direction: column; overflow: hidden; } body.ns .site-header { flex: 0 0 auto; } /* ページが動かないので、読み進みのバーは意味がない */ body.ns .scroll-progress { display: none; } .ns-app { flex: 1 1 auto; min-height: 0; display: grid; } /* ---- 結果の枠。ここだけがスクロールする ---- */ .ns-scroll { min-height: 0; overflow: auto; background: var(--bg-elev); overscroll-behavior: contain; /* 端まで来てもページごと動かさない */ } /* 1画面に収めるぶん、行は解説ページの表より詰める */ .ns-scroll table.datatable { border: 0; border-radius: 0; } .ns-scroll table.datatable tbody td { padding: 7px 12px; } .ns-scroll table.datatable thead th { padding: 9px 12px; } /* 見出しの下の絞り込みの行は、見出し（padding 9px＋文字12.5px＝43px）の真下に貼る */ .ns-scroll table.datatable thead tr.filters th { top: 43px; } /* 読み込み中・該当なしの案内 */ .ns-note { margin: 0; padding: 56px 20px; text-align: center; color: var(--ink-soft); font-size: 13px; line-height: 2; } .ns-note b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; } .ns-note code { font-family: var(--mono); font-size: 12px; background: var(--bg-sunken); padding: 1px 5px; border-radius: 4px; } /* ---- 件数 ---- */ .ns-count { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .ns-count b { margin-right: 3px; font-size: 15px; color: var(--ink); } /* ---- 下端の帯。フッターに置いていた出所と注記の行き先 ---- */ .ns-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 5px 16px; border-top: 1px solid var(--line); background: var(--bg-sunken); color: var(--ink-soft); font-size: 11.5px; line-height: 1.7; } .ns-status .ns-sp { flex: 1 1 auto; } .ns-status a { color: var(--ink-mid); } .ns-linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--ink-mid); text-decoration: underline; cursor: pointer; } .ns-linkbtn:hover { color: var(--accent-deep); } /* ---- 検索欄 ---- */ .ns-q { position: relative; display: flex; align-items: center; } .ns-q input[type="search"] { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 92px 8px 34px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--ink); -webkit-appearance: none; appearance: none; } /* 消す操作は自前の✕に任せる。ブラウザ既定の×と二重に出さない */ .ns-q input[type="search"]::-webkit-search-cancel-button { display: none; } .ns-q input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .ns-q .ns-mag { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink-soft); pointer-events: none; } .ns-q .ns-x { position: absolute; right: 74px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--ink-soft); font-size: 15px; line-height: 1; } .ns-q .ns-x:hover { background: var(--bg-sunken); color: var(--ink); } .ns-q .ns-go { position: absolute; right: 4px; padding: 6px 17px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .ns-q .ns-go:hover { background: var(--accent-deep); } /* ---- 条件の札（押すと入り、もう一度押すと外れる） ---- */ .ns-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--ink-mid); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; } .ns-chip:hover { border-color: var(--accent); color: var(--accent-deep); } .ns-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); } .ns-chip .n { font-weight: 400; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .ns-chip[aria-pressed="true"] .n { color: var(--accent-deep); } /* ---- 凡例。1画面に収めるので、表の下ではなくダイアログに置く ---- */ dialog.ns-legend { width: min(1000px, 92vw); max-height: 86vh; overflow: auto; padding: 18px 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow-md); } dialog.ns-legend::backdrop { background: rgba(16, 32, 48, .45); } dialog.ns-legend .legend { margin: 0; padding: 0; border: 0; background: none; } .ns-legend-x { float: right; margin: -4px -4px 0 0; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--ink-mid); font: inherit; font-size: 12px; cursor: pointer; } .ns-legend-x:hover { border-color: var(--accent); color: var(--accent-deep); } /* ========================================================= 検索の画面（database.html） 入口は検索欄だけの1面、探しはじめたら表だけの1面 ========================================================= */ .qc-app { grid-template-rows: minmax(0, 1fr) auto; } .qc-app[data-view="result"] { grid-template-rows: auto minmax(0, 1fr) auto; } .qc-entry[hidden], .qc-bar[hidden], .qc-res[hidden] { display: none; } /* ---- 入口 ---- */ .qc-entry { display: grid; align-content: center; justify-items: center; padding: 16px 20px; text-align: center; min-height: 0; overflow: auto; } /* 名前のロゴ。ヘッダーの .brand-word と同じ組み方（字間＋1本の罫）を、 大きさだけ変えて使う。字だけでは意味が伝わらないぶん、 下の1行（.qc-sub）が何の画面かを必ず言う */ .qc-entry h1 { display: block; width: fit-content; margin: 0 auto 10px; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.15; letter-spacing: .08em; } /* 「DB」は名前の一部だが、主役は nomina。細く、少し小さく続ける */ .qc-entry h1 small { font-size: .62em; font-weight: 400; letter-spacing: .06em; color: var(--ink-soft); } .qc-entry h1::after { content: ""; display: block; height: 2px; margin: 9px 0 0; background: currentColor; opacity: .32; } .qc-sub { margin: 0 0 20px; font-size: 13px; line-height: 1.9; color: var(--ink-soft); } .qc-entry .ns-q { width: min(700px, 88vw); } .qc-entry .ns-q input[type="search"] { font-size: 16px; padding: 13px 112px 13px 46px; box-shadow: var(--shadow-sm); } .qc-entry .ns-q .ns-mag { left: 18px; width: 17px; height: 17px; } .qc-entry .ns-q .ns-x { right: 92px; } .qc-entry .ns-q .ns-go { right: 6px; padding: 9px 21px; font-size: 14px; } .qc-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-soft); } /* 見つからなかったときの知らせ。打ち方の案内と入れ替えて出すので、 入口の高さは変わらない。責める色は使わず、地を沈めるだけにする */ .qc-miss { margin: 10px 0 0; padding: 6px 14px; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-mid); font-size: 12px; line-height: 1.7; } .qc-miss b { color: var(--ink); font-weight: 700; } /* 分析の画面への入口。検索欄から離して、探しに来た人の邪魔をしない。 地はヘッダーの帯と同じ濃紺で、乗せても離しても色は変えない。 応答は「2px浮いて影が伸びる」動きだけで返す */ .qc-pro { position: relative; display: inline-flex; align-items: center; gap: 14px; margin: 26px 0 0; padding: 12px 20px; border-radius: 999px; background: var(--bar); color: var(--on-bar); text-decoration: none; line-height: 1.5; box-shadow: 0 1px 2px rgba(8, 40, 55, .18); transition: transform .2s, box-shadow .2s; } .qc-pro:hover, .qc-pro:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(8, 40, 55, .28); } /* キーボードで辿ったときの居場所。色を使うのはここだけ */ .qc-pro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .qc-pro-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .26em; color: var(--on-bar-dim); } .qc-pro-t { font-size: 14px; font-weight: 700; letter-spacing: .18em; } .qc-pro-arw { font-size: 14px; transition: transform .25s cubic-bezier(.2, .7, .3, 1); } .qc-pro:hover .qc-pro-arw, .qc-pro:focus-visible .qc-pro-arw { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .qc-pro, .qc-pro-arw { transition: none; } } /* ---- 結果 ---- */ .qc-bar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg); } .qc-bar .ns-q { flex: 1 1 320px; max-width: 480px; } .qc-bar .ns-q input[type="search"] { font-size: 13px; padding: 7px 78px 7px 30px; } .qc-bar .ns-q .ns-x { right: 62px; } .qc-bar .ns-q .ns-go { padding: 5px 14px; font-size: 12px; } /* 最類似薬で絞っているときの札 */ .qc-cond { display: flex; flex-wrap: wrap; gap: 6px; } .qc-cond .ns-chip { font-weight: 400; } .qc-cond .ns-chip b { font-weight: 700; } .qc-back { margin-left: auto; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--ink-mid); font: inherit; font-size: 12px; cursor: pointer; } .qc-back:hover { border-color: var(--accent); color: var(--accent-deep); } /* 入口から結果へ移るときだけ、ひと呼吸だけ動かす */ @media (prefers-reduced-motion: no-preference) { .qc-app[data-view="result"] .qc-bar { animation: qc-in .18s ease-out; } @keyframes qc-in { from { opacity: 0; transform: translateY(-6px); } } } /* ========================================================= 分析の画面（dbpro.html） 左に条件、右に結果。動くのは左右それぞれの中だけ ========================================================= */ .rb-app { grid-template-columns: 294px minmax(0, 1fr); /* 行の高さを 1fr で止めないと、中身のぶんだけ縦に伸びてページごと動いてしまう */ grid-template-rows: minmax(0, 1fr); } /* ---- 左：条件 ---- */ .rb-rail { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--bg); } .rb-qwrap { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); } .rb-qwrap .ns-q input[type="search"] { font-size: 13px; padding: 7px 30px; } .rb-qwrap .ns-q .ns-x { right: 6px; } .rb-facets { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px 12px 14px; } .rb-g { margin: 14px 0 0; } .rb-gh { margin: 0 0 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); } .rb-f { display: grid; grid-template-columns: 13px auto 1fr auto; align-items: center; gap: 8px; padding: 3px 5px; border-radius: 6px; font-size: 12.5px; line-height: 1.6; color: var(--ink-mid); cursor: pointer; } .rb-f:hover { background: var(--bg-sunken); } .rb-f input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); } .rb-f .nm { grid-column: 2 / 4; } .rb-f .n { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* 0件の条件は選んでも何も出ない。押せる形のまま薄く置いて、 いまの絞り込みでは出ないことだけを見せる */ .rb-f.off { opacity: .4; } .rb-f.on { color: var(--ink); font-weight: 700; } /* 制度の色は表の札に合わせる（青＝新薬／橙＝長期収載品／緑＝後発品） */ .rb-f .sw { grid-column: 2; width: 8px; height: 8px; border-radius: 2px; background: var(--ink-soft); } .rb-f .sw + .nm { grid-column: 3; } .rb-f .sw.c-new { background: var(--accent); } .rb-f .sw.c-long { background: var(--warn); } .rb-f .sw.c-ge { background: var(--accent-2); } .rb-f .sw.c-none { background: var(--line); } .rb-sel { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-elev); color: var(--ink-mid); } .rb-foot { padding: 8px 12px; border-top: 1px solid var(--line-soft); } .rb-clear { width: 100%; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--ink-mid); font: inherit; font-size: 12px; cursor: pointer; } .rb-clear:hover { border-color: var(--accent); color: var(--accent-deep); } .rb-clear[disabled] { opacity: .4; cursor: default; } /* ---- 右：結果 ---- */ .rb-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; } .rb-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg); } /* 対象年度の帯。押した年度の薬価で表を見る */ .rb-years { display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto; } .rb-years button { padding: 3px 8px; border: 1px solid transparent; border-radius: 6px; background: none; font: inherit; font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; cursor: pointer; } .rb-years button:hover { background: var(--bg-sunken); color: var(--ink); } .rb-years button[aria-pressed="true"] { background: var(--bar); border-color: var(--bar); color: var(--on-bar); font-weight: 700; } /* 最新年度以外を見ているあいだ、下端の帯に出す但し書き */ .rb-asof { color: var(--ink-mid); } .rb-asof b { color: var(--ink); } .rb-cond { display: flex; flex-wrap: wrap; gap: 6px; } .rb-cond .ns-chip { font-weight: 400; } .rb-cond .ns-chip b { font-weight: 700; } .rb-cond .ns-chip .x { color: var(--ink-soft); } /* ---- 小さい画面 ---- 縦が足りない画面で1枚に収めると、結果が数行しか見えない。 幅の狭いところでは、ふつうに縦へ流す */ @media (max-width: 820px) { html:has(body.ns), body.ns { height: auto; } body.ns { display: block; overflow: visible; } .ns-app { display: block; } /* 結果だけは枠のままにする。ここも流してしまうと、 絞り込む前の1万2千件がそのまま縦に並ぶ */ .ns-scroll { max-height: 70vh; } .qc-entry { padding: 40px 20px; } .qc-bar .ns-q { max-width: none; } .rb-app { grid-template-columns: 1fr; } .rb-rail { border-right: 0; border-bottom: 1px solid var(--line); } .rb-facets { overflow: visible; } .rb-main { display: block; } } /* 薬価データベースの表：後発品の価格帯。 同じ成分・剤形・規格の後発品の最高価格に対して 50％以上が高、30％以上50％未満が中、30％未満が低 */ .tag.band-hi { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .tag.band-mid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .tag.band-lo { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); } /* ========================================================= 解説の入口（r8.html / nominaR8）— 一本の線 1つの薬の薬価が収載から20年でたどる線を描き、曲がる場所に番号を打つ。 図の下の「番号と制度の対応表」が、そのまま17項目への目次になっている。 このページだけ、他と組み方を変えている： ・見出しは明朝（欧文はTimes）。図は囲みから出して紙の上に置く ・目盛りの罫は髪の毛の太さまで落とし、線そのものを主役にする ・線は左から引かれて現れる（動きを止める設定のときは動かさない） ・目次は箱をやめ、罫だけで組む このページ専用のクラスはすべて r8- で始める（style.css は全ページ共通の1枚） ========================================================= */ /* ---------- 書体：欧文Times＋和文明朝 ---------- --serif はサイト共通のトークン。いま明朝を使っているのは r8.html だけだが、 他のページで使うときも同じ混植になる。 font-family は1字ずつ書体を探すので、Timesを先頭に置けば 英数字だけがTimesになり、かなと漢字は明朝に落ちる。 Timesは和文より字面が小さいので、欧文の範囲だけ6%持ち上げてから混ぜる。 src は local() だけ。外部からは何も読み込まない */ @font-face { font-family: "NominaTimes"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"); unicode-range: U+0000-024F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2150-218F; size-adjust: 106%; font-display: swap; } /* ---------- 表紙 ---------- */ .r8-page { padding: 0 0 40px; } .r8-hero { padding: 54px 0 0; } .r8-k { margin: 0 0 22px; font-size: 11px; font-weight: 700; letter-spacing: .32em; color: var(--accent); text-transform: uppercase; } .r8-h1 { margin: 0 0 26px; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 5vw, 58px); line-height: 1.5; letter-spacing: .06em; color: var(--ink); border: 0; padding: 0; } .r8-h1 em { font-style: normal; color: var(--accent-deep); } .r8-h1 .r8-thin { display: block; font-size: .46em; letter-spacing: .12em; color: var(--ink-soft); margin-top: 14px; } .r8-lead { max-width: 62ch; margin: 0 0 40px; font-size: 14.5px; line-height: 2.15; letter-spacing: .02em; color: var(--ink-mid); } .r8-lead strong { color: var(--ink); font-weight: 700; } /* 図。囲みも影も持たせない。紙の上に線が置いてあるだけにする */ .r8-fig { margin: 0; padding: 0; } .r8-svg { display: block; width: 100%; height: auto; overflow: visible; } /* 罫は髪の毛の太さ。数字は極小で、線の邪魔をしない位置に置く */ .r8-rule { stroke: var(--line-soft); stroke-width: 1; } .r8-rule.base { stroke: var(--line); } .r8-cut { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; } .r8-ax { fill: var(--ink-soft); font-size: 9.5px; letter-spacing: .12em; } .r8-phase { fill: var(--ink-soft); font-family: var(--serif); font-size: 13px; letter-spacing: .3em; } .r8-note { fill: var(--ink-mid); font-family: var(--serif); font-size: 12.5px; letter-spacing: .06em; } .r8-note.dim { fill: var(--ink-soft); font-size: 11.5px; } .r8-lead-line { stroke: var(--line); stroke-width: 1; } /* 配色の変数は、SVGの stop-color 属性には効かない（属性値では var() が解決されない）。 CSSプロパティとして当てれば、明暗の切り替えにも追従する */ .r8-g0 { stop-color: var(--accent-deep); } .r8-g1 { stop-color: var(--accent); } .r8-g2 { stop-color: var(--accent-deep); } .r8-f0 { stop-color: var(--accent); stop-opacity: .16; } .r8-f1 { stop-color: var(--accent); stop-opacity: 0; } .r8-area { fill: url(#r8Fade); } .r8-ln { fill: none; stroke: url(#r8Ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; } .r8-ln.ge { stroke: var(--accent-2); stroke-width: 2; } .r8-ln.no { stroke: var(--ink-soft); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .85; } .r8-floor { fill: none; stroke: var(--hold); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; } /* 番号。塗りつぶさず、細い輪だけ。図の密度を上げない */ .r8-p { cursor: pointer; } .r8-p circle { fill: var(--bg); stroke: var(--accent-deep); stroke-width: 1.2; transition: fill .2s, stroke-width .2s; } .r8-p text { fill: var(--accent-deep); font-family: var(--serif); font-size: 12px; text-anchor: middle; letter-spacing: 0; } .r8-p.ge circle { stroke: var(--accent-2); } .r8-p.ge text { fill: var(--accent-2); } .r8-p:hover circle, .r8-p:focus circle, .r8-p.is-on circle { fill: var(--accent-soft); stroke-width: 2; } .r8-p.ge:hover circle, .r8-p.ge:focus circle, .r8-p.ge.is-on circle { fill: var(--accent-2-soft); } .r8-p:focus { outline: none; } /* 触れているあいだだけ、その点から下へ細い糸を垂らす */ .r8-drop { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .2s; } .r8-p.is-on .r8-drop { opacity: .7; } .r8-p.ge.is-on .r8-drop { stroke: var(--accent-2); } /* 紙のざらつき。うっすら乗せると、平面が少しだけ物になる */ .r8-grain { pointer-events: none; opacity: .05; } /* 図の下、ひと呼吸おいて説明が出る場所。箱にしない */ .r8-say { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-height: 54px; margin: 18px 0 0; padding: 14px 2px 0; border-top: 1px solid var(--line-soft); } .r8-say .r8-name { font-family: var(--serif); font-size: 17px; letter-spacing: .06em; color: var(--ink); } .r8-say .r8-x { font-size: 13px; line-height: 1.9; color: var(--ink-mid); } .r8-say .r8-go { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--accent); } .r8-say .r8-hint { font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); } .r8-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 11.5px; letter-spacing: .04em; color: var(--ink-soft); } .r8-legend li { display: flex; align-items: center; gap: 8px; } .r8-legend i { display: block; width: 24px; height: 0; border-top: 2.4px solid var(--accent-deep); } .r8-legend i.ge { border-top: 2px solid var(--accent-2); } .r8-legend i.no { border-top: 1.2px dashed var(--ink-soft); } .r8-legend i.fl { border-top: 1.2px dotted var(--hold); } .r8-src { margin: 12px 0 0; font-size: 11.5px; line-height: 1.9; color: var(--ink-soft); } .r8-src a { color: var(--ink-mid); } /* ---------- 目次（罫だけで組む） ---------- */ .r8-sec { margin: 76px 0 0; } .r8-sec-h { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 0 6px; padding: 0 0 12px; border-bottom: 1px solid var(--ink); } .r8-sec-h h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: .12em; color: var(--ink); border: 0; padding: 0; } .r8-sec-h p { margin: 0; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); } .r8-list { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 56px; } .r8-list li { break-inside: avoid; } .r8-list a { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: baseline; gap: 0 14px; padding: 17px 0 16px; text-decoration: none; border-bottom: 1px solid var(--line-soft); transition: padding-left .22s ease, border-color .22s; } .r8-list a:hover, .r8-list a:focus-visible, .r8-list a.is-on { padding-left: 10px; border-color: var(--accent); } .r8-n { grid-row: 1 / span 2; font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink-soft); font-variant-numeric: tabular-nums; transition: color .22s; } .r8-list li.ge .r8-n { color: var(--accent-2); } .r8-list a:hover .r8-n, .r8-list a.is-on .r8-n { color: var(--accent); } .r8-t { font-size: 15.5px; font-weight: 700; line-height: 1.6; color: var(--ink); letter-spacing: .02em; } .r8-t .r8-sn { font-family: var(--serif); font-weight: 400; font-size: 12px; letter-spacing: .12em; color: var(--ink-soft); margin-right: 10px; } .r8-d { font-size: 12.5px; line-height: 1.85; color: var(--ink-mid); margin-top: 3px; } .r8-d em { font-style: normal; color: var(--ink); } @media (max-width: 860px) { .r8-list { columns: 1; } } /* 線の外にあるもの */ .r8-rest { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 26px 0 0; } .r8-rest h3 { margin: 0 0 10px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-weight: 400; font-size: 14px; letter-spacing: .18em; color: var(--ink); } .r8-rest ul { margin: 0; padding: 0; list-style: none; } .r8-rest a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; align-items: baseline; padding: 9px 0; text-decoration: none; border-bottom: 1px solid var(--line-soft); transition: padding-left .22s ease; } .r8-rest a:hover { padding-left: 8px; } .r8-rest a b { font-family: var(--serif); font-weight: 400; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .r8-rest a span { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.55; } .r8-rest a small { grid-column: 2; font-size: 12px; color: var(--ink-mid); line-height: 1.7; } .r8-rest a:hover span { color: var(--accent); } /* 順に読む道。表紙の下に、控えめに一行だけ置く */ .r8-start { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 34px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-soft); } .r8-start p { margin: 0; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); } .r8-start a { font-family: var(--serif); font-size: 16px; letter-spacing: .08em; color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .r8-start a:hover { color: var(--accent); } /* 末尾 */ .r8-foot { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-soft); } .r8-foot a { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink-mid); text-decoration: none; } .r8-foot a:hover { color: var(--accent); } .r8-foot a b { font-family: var(--serif); font-weight: 400; color: var(--ink-soft); margin-right: 8px; letter-spacing: .1em; } /* ---------- 線が引かれて現れる ---------- 引き始めるのは「読み込んだとき」ではなく「図が画面に入ったとき」。 図は表紙の見出しと導入文の下にあるので、開いた瞬間に走らせると 読み手がそこに着く前に引き終わってしまう。 消えた状態を持つのは、JSが動いていて必ず解除できるときだけ （:root[data-r8anim]）。動きが走らない環境・設定では この選択子が当たらず、最初から完成形で出る。 .main の 1085 と .ge の 578 は、それぞれのパスの実長（getTotalLength）。 長さを合わせておかないと、引き終わったあとに何も起きない時間ができる */ @media (prefers-reduced-motion: no-preference) { .r8-ln.main { stroke-dasharray: 1085; } .r8-ln.ge { stroke-dasharray: 578; } /* ---- 引く前の状態で待つ ---- data-r8anim は head のスクリプトが描画前に立てる（あとから当てると 完成形が一瞬見えてから消える）。値は状態を表すだけで、選択子は 属性があるかどうかだけを見る */ :root[data-r8anim] .r8-fig:not(.is-drawing) .r8-ln.main { stroke-dashoffset: 1085; } :root[data-r8anim] .r8-fig:not(.is-drawing) .r8-ln.ge { stroke-dashoffset: 578; } :root[data-r8anim] .r8-fig:not(.is-drawing) .r8-area, :root[data-r8anim] .r8-fig:not(.is-drawing) .r8-floor, :root[data-r8anim] .r8-fig:not(.is-drawing) .r8-note, :root[data-r8anim] .r8-fig:not(.is-drawing) .r8-lead-line, :root[data-r8anim] .r8-fig:not(.is-drawing) .r8-ln.no, :root[data-r8anim] .r8-fig:not(.is-drawing) .r8-p { opacity: 0; } /* ---- 画面に入ったら引く ---- .is-drawing はページ下のスクリプトが付ける。 いずれも fill-mode は backwards のままにしておく（待ち時間のあいだだけ from 側の状態を借り、走り終われば素の見え方に戻る） */ .r8-fig.is-drawing .r8-ln.main { animation: r8Draw 2.4s cubic-bezier(.16,.8,.24,1) .1s backwards; } .r8-fig.is-drawing .r8-ln.ge { animation: r8DrawGe 1.5s cubic-bezier(.16,.8,.24,1) 1.35s backwards; } .r8-fig.is-drawing .r8-area, .r8-fig.is-drawing .r8-floor, .r8-fig.is-drawing .r8-note, .r8-fig.is-drawing .r8-lead-line { animation: r8Fade .9s ease 1.75s backwards; } /* 破線（3 5）は引く動きと相性が悪いので、うっすら出すだけにする。 行き先を素の .85 に合わせておかないと、出たあとに一段暗くなる */ .r8-fig.is-drawing .r8-ln.no { animation: r8FadeDim .9s ease 1.75s backwards; } .r8-fig.is-drawing .r8-p { animation: r8Rise .7s cubic-bezier(.16,.8,.24,1) backwards; } @keyframes r8Draw { from { stroke-dashoffset: 1085; } to { stroke-dashoffset: 0; } } @keyframes r8DrawGe { from { stroke-dashoffset: 578; } to { stroke-dashoffset: 0; } } @keyframes r8Fade { from { opacity: 0; } to { opacity: 1; } } @keyframes r8FadeDim { from { opacity: 0; } to { opacity: .85; } } @keyframes r8Rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } } /* 破線の見え方（.no は 3 5 の破線）を、引く動きで壊さないよう opacity だけで出す */ .r8-ln.no { stroke-dasharray: 3 5; } /* ---------- 狭い画面 ---------- 線を縮めると目盛りも註も潰れる。最小幅を持たせて横に送り、 行き先は下の一覧で必ず取れるようにしてある */ @media (max-width: 820px) { .r8-hero { padding-top: 34px; } .r8-fig { overflow-x: auto; margin-inline: -20px; padding-inline: 20px; } .r8-svg { min-width: 760px; } .r8-say { min-height: 0; } } /* 分析画面の年度の並びに足した「全期間」。年度とは意味が違うので、 すこし離して枠を分ける */ #years .y-all { margin-left: 10px; border-left: 1px solid var(--line); padding-left: 14px; }