/* 診療報酬事典 LP — 「点数表の本」を開いた見開き。単色の表紙＋白い本文ページ。 */
:root{
  --paper:#FFFFFF; --ink:#000000; --text:#262626; --sub:#5C5C5C; --rule:#BDBDBD; --hair:#E2E2E2;
  --app:#1F4E82; --shu:#C8321E;
  --f:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --tab:44px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f);font-weight:500;font-size:16px;line-height:1.85;padding-right:var(--tab)}
a{color:var(--app);text-underline-offset:3px}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--app);outline-offset:2px}
h1,h2,h3,dt,th{color:var(--ink)}

/* 爪見出し（辞書の小口の索引） */
.tabs{position:fixed;top:0;right:0;bottom:0;width:var(--tab);display:flex;flex-direction:column;z-index:10;background:var(--paper);border-left:1px solid var(--hair)}
.tabs a{flex:1;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;text-decoration:none;font-weight:900;letter-spacing:.3em;font-size:15px;color:var(--t);border-bottom:1px solid var(--hair)}
.tabs a[aria-current]{background:var(--t);color:#fff}
.tabs a:not([aria-current]):hover{background:color-mix(in srgb,var(--t) 12%,#fff)}

.top{display:flex;align-items:center;justify-content:space-between;gap:6px 20px;flex-wrap:wrap;padding:12px clamp(20px,4vw,48px);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--ink);text-decoration:none;font-size:16px}
.brand img{border-radius:6px}
.top nav{display:flex;gap:4px 20px;flex-wrap:wrap;font-size:14px}
.top nav a{color:var(--text);text-decoration:none}
.top nav a:hover{text-decoration:underline}

/* 見開き */
.open{display:grid;grid-template-columns:minmax(300px,5fr) 7fr}
.cover{background:var(--app);color:#fff;padding:clamp(32px,5vw,64px) clamp(20px,4vw,48px) 0;display:flex;flex-direction:column;overflow:hidden}
.cover .hand{display:block;width:min(74%,300px);margin:40px auto 0;align-self:center;flex:none;margin-bottom:-46%;filter:drop-shadow(0 10px 0 rgba(0,0,0,.18))}
.cover .ed{margin:0 0 14px;font-size:14px;font-weight:700}
.cover h1{color:#fff;font-weight:900;font-size:clamp(30px,3.5vw,54px);line-height:1.25;white-space:nowrap;margin:0 0 22px;padding-bottom:22px;border-bottom:3px solid #fff;letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
.cover .what{margin:0 0 28px;font-size:17px;line-height:1.9;max-width:24em}
.get{display:inline-block;align-self:flex-start;background:#fff;color:var(--ink);font-weight:900;font-size:17px;text-decoration:none;padding:13px 24px;border-radius:4px}
.get:hover{background:#000;color:#fff}
.wait{margin:0;font-weight:700;border:1.5px solid currentColor;padding:10px 16px;border-radius:4px;align-self:flex-start;font-size:15px}
.vernote{font-size:13px;line-height:1.7;margin:18px 0 0;max-width:30em;opacity:.85}

.leaf{padding:clamp(28px,5vw,60px) clamp(20px,4vw,56px);min-width:0}
.leaf label{display:block;font-weight:900;font-size:15px;color:var(--ink);margin-bottom:8px}
.field input{width:100%;font:inherit;font-size:22px;font-weight:700;padding:12px 14px;border:2px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);-webkit-appearance:none;appearance:none}
.field input:focus{outline:3px solid var(--app);outline-offset:1px}
.chips{margin:10px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.chips button{font:inherit;font-size:14px;font-weight:700;background:none;border:1px solid var(--rule);border-radius:4px;padding:2px 12px;color:var(--text);cursor:pointer}
.chips button:hover{border-color:var(--ink)}
.count{margin:18px 0 0;font-size:13px;color:var(--sub);min-height:1.85em}
.hits{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.hits li{border-bottom:1px solid var(--rule)}
.hits button{width:100%;display:grid;grid-template-columns:5.2em 1fr auto;gap:10px;align-items:baseline;text-align:left;font:inherit;background:none;border:0;padding:11px 2px;cursor:pointer;color:var(--ink)}
.hits button:hover .t{text-decoration:underline}
.hits .c{font-weight:900;color:var(--app);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hits .t{font-weight:700}
.hits .p{font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.hits .d{padding:0 2px 14px 5.2em;font-size:14.5px;line-height:1.75}
.hits .d table{border-collapse:collapse;width:100%;margin-bottom:6px}
.hits .d th{font-weight:700;text-align:left;vertical-align:top;white-space:nowrap;padding:2px 10px 2px 0;width:1%}
.hits .d td{padding:2px 0;vertical-align:top}
.hits .d tr.sub th{padding-left:1em}
.hits .d .pt{text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums;padding-left:12px}
.hits .d p{margin:4px 0 0;color:var(--sub)}
.hits .d p b{color:var(--shu);margin-right:.6em}
.more{font-size:13.5px;color:var(--sub);margin:12px 0 0}

/* お知らせ */
.news{list-style:none;margin:0;padding:0}
.news li{display:grid;grid-template-columns:8.5em 4.5em minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hair);margin:0}
.news li:first-child{padding-top:0}
.news time{font-variant-numeric:tabular-nums;color:var(--sub);font-size:14.5px;white-space:nowrap}
.news .tag{font-size:12.5px;font-weight:900;text-align:center;color:var(--t);border:1.5px solid var(--t);border-radius:3px;line-height:1.7}
.news b{color:var(--ink);font-weight:900}
.news p{margin:2px 0 0;font-size:15px;line-height:1.8}
.row#news{border-top:0;padding-bottom:20px}
.shelf{border-top:2px solid var(--ink)}

/* 調べ方の比較 */
.cover .facts{list-style:none;margin:-10px 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-weight:900;font-size:15.5px}
.cover .facts li{padding:0 14px;border-left:2px solid #fff;line-height:1.3}
.cover .facts li:first-child{padding-left:0;border-left:0}
.lede{font-size:clamp(22px,2.6vw,32px);font-weight:900;line-height:1.45;color:var(--ink);margin:0 0 10px!important;text-wrap:balance}
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin:26px 0 14px}
.cmp .col{border-top:2px solid var(--rule);padding-top:16px;color:var(--sub)}
.cmp .col.me{border-top:6px solid var(--app);padding-top:12px;color:var(--text)}
.cmp svg{display:block;width:100%;max-width:220px;height:auto;margin:0 0 8px;opacity:.7}
.cmp .me svg{opacity:1}
.cmp h3{font-size:16.5px;font-weight:900;line-height:1.5;margin:0 0 8px;color:var(--sub)}
.cmp .me h3{color:var(--ink)}
.cmp ol{margin:0;padding-left:1.4em;font-size:15px;line-height:1.75}
.cmp .me ol{font-weight:700}
.cmp ol li{margin:2px 0}
.cmp dl{margin:12px 0 0;font-size:14.5px;line-height:1.7}
.cmp dl>div{display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:0 10px;padding:6px 0;border-top:1px solid var(--hair)}
.cmp dt{font-weight:900;color:inherit}
.cmp dd{margin:0}
.cmp .me dd{font-weight:900;color:var(--app)}

/* 本棚の図 */
.shelf{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:24px 48px;align-items:center;padding:56px 0 48px;max-width:1120px}
.shelf svg{display:block;width:100%;height:auto;font-family:var(--f)}
.shelf h2{text-wrap:balance;font-size:clamp(24px,2.8vw,34px);font-weight:900;line-height:1.4;margin:0 0 12px}
.shelf p{margin:0;font-size:16.5px}

/* 画面つきの機能紹介 */
.tour{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px}
.tour li{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:20px;align-items:start;margin:0}
.tour img{display:block;width:100%}
.tour h3{font-size:19px;font-weight:900;line-height:1.45;margin:14px 0 8px;padding-top:12px;border-top:4px solid var(--app)}
.tour p{font-size:15px;line-height:1.8;margin:0}
.pics svg{display:block;width:100%;max-width:240px;height:auto;margin-bottom:10px;font-family:var(--f)}
.defs.pics>div{border-bottom:0}

/* 本文：左に柱見出し、右に内容 */
main{padding:0 clamp(20px,4vw,48px) 40px}
.row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 32px;padding:44px 0;border-top:2px solid var(--ink);max-width:1120px}
.row:first-child{border-top:0}
.row>h2{font-size:20px;font-weight:900;line-height:1.5;margin:0}
.row p{margin:0 0 12px}
.fine{font-size:13.5px;color:var(--sub)}

.defs{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.defs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.defs>div{padding:14px 0;border-bottom:1px solid var(--hair)}
.defs dt{font-weight:900;font-size:16.5px}
.defs dd{margin:2px 0 0;font-size:15px;line-height:1.8}

.scroll{overflow-x:auto}
.src{border-collapse:collapse;width:100%;font-size:15px}
.src th,.src td{border-bottom:1px solid var(--hair);padding:10px 16px 10px 0;text-align:left;vertical-align:top}
.src tr:first-child>*{padding-top:0}
.src th{font-weight:900;white-space:nowrap}
.src .n{text-align:right;white-space:nowrap;font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink);padding-right:0}

.shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:28px 22px}
.shots li{margin:0}
.shots img{display:block;width:100%}
.shots span{display:block;margin-top:10px;font-size:14px;font-weight:700;line-height:1.5;color:var(--ink)}

#get .get{background:var(--app);color:#fff}
#get .get:hover{background:#000}
#get .wait{color:var(--app);display:inline-block}

.series{list-style:none;margin:0;padding:0}
.series li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:0 16px;align-items:center;padding:14px 0 14px 14px;border-bottom:1px solid var(--hair);border-left:6px solid var(--t)}
.series li+li{margin-top:10px}
.series img{grid-row:span 2;border-radius:12px}
.series a{font-weight:900;font-size:17px;color:var(--ink)}
.series span{grid-column:2;font-size:14px;color:var(--sub)}
.series em{grid-column:3;grid-row:1/span 2;font-style:normal;font-size:13.5px;font-weight:700;color:var(--t);text-align:right}

.row h3{font-size:16px;font-weight:900;margin:22px 0 6px}
.row ul{padding-left:1.3em;margin:6px 0}
.row .series,.row .shots{padding-left:0}
.mail{font-size:19px;font-weight:900;color:var(--ink);margin-right:10px;word-break:break-all}
.copy{font:inherit;font-size:13px;font-weight:700;border:1px solid var(--rule);background:#fff;color:var(--text);border-radius:4px;padding:2px 10px;cursor:pointer}
.note{border-left:4px solid var(--shu);padding:2px 0 2px 16px;font-size:15px}
.note b{color:var(--shu)}
dl.faq{margin:0}
dl.faq dt{font-weight:900;margin-top:18px}
dl.faq dt:first-child{margin-top:0}
dl.faq dd{margin:2px 0 0}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px clamp(20px,4vw,48px);border-top:1px solid var(--hair);font-size:13px;color:var(--sub)}
.foot a{margin-left:16px}

@media (max-width:860px){
  body{padding-right:0;padding-top:40px}
  .tabs{position:fixed;inset:0 0 auto 0;width:auto;height:40px;flex-direction:row;border-left:0;border-bottom:1px solid var(--hair)}
  .tabs a{writing-mode:horizontal-tb;border-bottom:0;border-right:1px solid var(--hair);letter-spacing:.2em}
  .open{grid-template-columns:1fr;min-height:0}
  .row{grid-template-columns:1fr;padding:32px 0}
  .shelf{grid-template-columns:1fr;padding:36px 0 28px}
  .news li{grid-template-columns:auto auto 1fr}
  .news li>div{grid-column:1/-1}
  .news .tag{padding:0 8px}
  .row#news{padding-bottom:12px}
  .tour{grid-template-columns:1fr;gap:36px}
  .cmp{grid-template-columns:1fr;gap:26px}
  .cmp .col.me{order:-1}
  .cmp svg{max-width:180px}
  .cover .hand{width:min(62%,240px);margin-top:28px}
  .row>h2{margin-bottom:10px}
  .defs,.defs.three{grid-template-columns:1fr}
  .shots{display:flex;overflow-x:auto;gap:18px;margin-right:calc(-1*clamp(20px,4vw,48px));padding:0 20px 8px 0;scroll-snap-type:x mandatory}
  .shots li{flex:none;width:58vw;max-width:230px;scroll-snap-align:start}
  .hits button{grid-template-columns:4.4em 1fr auto}
  .src,.src tbody,.src tr,.src th{display:block}
  .src tr{border-bottom:1px solid var(--hair);padding:10px 0}
  .src th,.src td{border:0;padding:0}
  .src td{display:inline}
  .src .n{margin-left:.8em}
  .src tr:first-child{padding-top:0}
  .hits .d{padding-left:0}
  .series li{grid-template-columns:52px minmax(0,1fr)}
  .series em{grid-column:2;grid-row:auto;text-align:left}
  .top nav{font-size:13px;gap:2px 14px}
}

/* 紹介動画 */
.movie{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px 44px;align-items:center}
.movie .frame{position:relative;aspect-ratio:9/16;background:#000;border-radius:14px;overflow:hidden;border:2px solid var(--ink)}
.movie iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.movie .say .get{background:var(--app);color:#fff;margin-top:8px}
.movie .say .get:hover{background:#000}
.movie .say .wait{margin-top:8px}
/* よく引かれる区分 */
.pop{margin-top:34px;border-top:2px solid var(--ink);padding-top:14px}
.pop h2{font-size:15px;font-weight:900;margin:0 0 8px}
.pop ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.pop li a{display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink);font-weight:700;font-size:15px;line-height:1.5}
.pop li a:hover span,.pop li a:hover{text-decoration:underline}
.pop b{font-weight:900;color:var(--app);font-variant-numeric:tabular-nums}
.pop p{margin:12px 0 0;font-size:14.5px}
.hits .d p.go{margin-top:8px;font-size:14.5px;font-weight:700}
@media (max-width:860px){
  .movie{grid-template-columns:1fr}
  .movie .frame{max-width:280px}
  .pop ul{grid-template-columns:1fr}
}