/*
 * 公開サイトの見た目。
 *
 * 支給されたプロトタイプ（JEN_プロトタイプ_日本語版.html）の <style> を
 * そのまま持ち込んでいる。デザインを一致させることが目的なので、
 * ここは書き換えず、必要な追加は末尾の「本実装で足したもの」にまとめる。
 *
 * 埋め込み画像は assets/img/proto/ に切り出して参照している。
 */


*{box-sizing:border-box;margin:0;padding:0}
:root{--b50:#E6F1FB;--b100:#B5D4F4;--b400:#378ADD;--b600:#185FA5;--b800:#F24979;--b900:#F24979;--border:#e0e0e0;--border-s:#ccc;--text:#1a1a1a;--text2:#555;--text3:#999;--r:6px}
body{font-family:'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;background:#e0e4e8;min-height:100vh}
.hidden{display:none!important}
#app{max-width:920px;margin:0 auto;background:#fff;box-shadow:0 2px 24px rgba(0,0,0,.14)}

/* NAV */
.nav{background:#F24979;padding:7px 16px;display:flex;align-items:center;justify-content:space-between;min-height:54px;position:sticky;top:0;z-index:100;flex-wrap:wrap;gap:6px}
.nlogo{display:flex;align-items:center;gap:9px;cursor:pointer}
.nlm{width:30px;height:30px;background:#2B8853;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.nlt{font-size:13px;font-weight:600;color:#fff}
.nlinks{display:flex;align-items:center;gap:2px}
.nl{font-size:11px;color:#B8ECC9;padding:5px 9px;border-radius:var(--r);cursor:pointer;border:none;background:none;white-space:nowrap}
.nl:hover,.nl.on{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.nbtn{font-size:11px;padding:5px 12px;border-radius:var(--r);background:#2B8853;color:#fff;border:none;cursor:pointer;margin-left:5px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.nbtn:hover{background:#185FA5}
.nbtn.ghost{background:transparent;border:1px solid #B5D4F4;color:#B5D4F4}
.nbtn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* SCREEN BAR */
.sbar{background:#EFF6FF;border-bottom:1px solid #B5D4F4;padding:5px 16px;display:flex;align-items:center;gap:8px}
.slbl{font-size:10px;font-weight:700;color:#185FA5;background:#dbeafe;padding:2px 9px;border-radius:20px;white-space:nowrap}
.snm{font-size:10px;color:var(--text3)}

/* BANNER */
.banner{width:100%;background:#fff;display:block;position:relative;overflow:hidden;line-height:0}
.banner-img{width:100%;height:auto;display:block}
.banner-deco{display:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;opacity:.07;pointer-events:none}
.banner-cnt{text-align:center;position:relative;z-index:1;display:none}
.banner-title{font-size:17px;font-weight:700;color:#fff;margin-bottom:3px;letter-spacing:.3px}
.banner-sub{font-size:11px;color:#B5D4F4}
.banner-note{display:none;position:absolute;bottom:5px;right:12px;font-size:9px;color:#FBC8D7;background:rgba(0,0,0,.28);padding:2px 7px;border-radius:var(--r)}

/* ===== TOP PAGE ===== */
.top-wrap{max-width:700px;margin:0 auto;padding:22px 20px 30px}
.top-sec{margin-bottom:24px}
.top-sec-title{font-size:13px;font-weight:700;color:#F24979;border-left:3px solid #378ADD;padding-left:10px;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.top-sec-body{font-size:11px;color:var(--text2);line-height:1.85}
.divider{border:none;border-top:1px solid var(--border);margin:0 0 24px}

/* schedule timeline */
.tl{display:flex;flex-direction:column;gap:8px}
.tl-item{display:flex;gap:12px;align-items:flex-start}
.tl-num{width:24px;height:24px;min-width:24px;border-radius:50%;background:#378ADD;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;margin-top:1px}
.tl-body{flex:1;background:#f8fbff;border:1px solid #B5D4F4;border-radius:8px;padding:8px 12px}
.tl-ttl{font-size:11px;font-weight:700;color:#F24979;margin-bottom:4px}
.tl-tags{display:flex;flex-wrap:wrap;gap:4px}
.tl-tag{font-size:9.5px;padding:2px 7px;border-radius:20px;background:#E6F1FB;color:#185FA5;border:1px solid #B5D4F4}

/* lang pills */
.langs{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.lp{font-size:10px;padding:3px 9px;border-radius:20px;background:#f5f5f5;border:1px solid var(--border);color:var(--text2)}
.lp.main{background:#E6F1FB;color:#185FA5;border-color:#B5D4F4;font-weight:600}

/* FAQ accordion */
.faq-list{display:flex;flex-direction:column;gap:5px}
.faq-item{border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer}
.faq-q{padding:9px 13px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;color:#F24979;background:#f9fafb;user-select:none}
.faq-item:hover .faq-q{background:#E6F1FB}
.faq-a{font-size:11px;color:var(--text2);line-height:1.7;max-height:0;overflow:hidden;padding:0 13px;transition:max-height .22s ease,padding .22s}
.faq-item.open .faq-a{max-height:100px;padding:9px 13px}
.faq-item.open .faq-q{background:#E6F1FB;color:#F24979}

/* CTA box */
.cta-box{background:linear-gradient(135deg,#F24979,#CE3E67);border-radius:12px;padding:22px;text-align:center;margin:8px 0 0}
.cta-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:5px}
.cta-sub{font-size:11px;color:#B5D4F4;margin-bottom:14px;line-height:1.7}
.cta-btn{font-size:13px;padding:9px 28px;border-radius:var(--r);background:#378ADD;color:#fff;border:none;cursor:pointer;font-weight:700}
.cta-btn:hover{background:#185FA5}
.cta-note{font-size:10px;color:#FBC8D7;margin-top:7px}


/* ===== TOP SIMPLE (index only) ===== */
.top-simple{max-width:740px;margin:0 auto;padding:26px 20px 32px}
.ts-lang{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 14px}
.ts-lang-l{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#C43A63;white-space:nowrap}
.ts-lang-l svg{display:block}
.ts-lang select{font-family:inherit;font-size:12px;color:var(--text);background:#fff;border:1px solid #F6C2D3;border-radius:var(--r);padding:7px 30px 7px 11px;cursor:pointer;appearance:none;-webkit-appearance:none;min-width:190px;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F24979' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.ts-lang select:hover{border-color:#F24979}
.ts-lang select:focus{outline:none;border-color:#F24979;box-shadow:0 0 0 2px rgba(242,73,121,.15)}
.ts-lang-note{font-size:10px;color:var(--text3);text-align:right;margin:-9px 0 14px}
@media(max-width:560px){.ts-lang{justify-content:space-between}.ts-lang select{min-width:0;flex:1}}

.ts-welcome{text-align:center;margin-bottom:20px;position:relative;z-index:1;background:#fff;border-radius:14px;padding:22px 18px;box-shadow:0 2px 14px rgba(0,0,0,.06)}
#pg-top{background-image:url(../img/proto/sakura-bg.jpg);background-repeat:repeat;background-size:960px auto}
.ts-welcome-t{font-size:25px;font-weight:800;color:#F24979;margin-bottom:14px;line-height:1.3;letter-spacing:.01em}
.ts-welcome-s{font-size:11px;color:var(--text2);line-height:1.9}
.ts-intro-body{font-size:11px;color:var(--text2);line-height:1.95;text-align:left}
.ts-intro-body p{margin-bottom:9px}
.ts-intro-note{font-size:10px;color:var(--text3);background:#f8f9fb;border:1px solid var(--border);border-radius:7px;padding:9px 11px;line-height:1.8}
.ts-example{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:24px;background:#fff}
.ts-example-h{font-size:14px;font-weight:700;color:#fff;background:#F24979;padding:9px 14px}
.ts-example-grid{display:flex;flex-direction:column}
.ts-example-col{padding:11px 14px;border-bottom:1px solid var(--border)}
.ts-example-col:last-child{border-bottom:none}
.ts-example-cat{font-size:13px;font-weight:700;color:#185FA5;margin-bottom:5px}
.ts-example-grid .ts-example-col:nth-child(1) .ts-example-cat{color:#2E6FB0}
.ts-example-grid .ts-example-col:nth-child(2) .ts-example-cat{color:#2B8853}
.ts-example-grid .ts-example-col:nth-child(3) .ts-example-cat{color:#C4703A}
.ts-example-txt{font-size:10.5px;color:var(--text2);line-height:1.75}
.ts-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;margin-bottom:26px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ts-link{font-size:13px;color:#185FA5;cursor:pointer;text-decoration:none;white-space:nowrap;transition:color .12s}
.ts-link:hover{color:#F24979;text-decoration:underline}
.ts-login-box{background:linear-gradient(135deg,#F24979,#CE3E67);border-radius:12px;padding:22px;text-align:center}
.ts-login-txt{font-size:11px;color:#B8ECC9;line-height:1.8;margin:8px 0 14px}
.ts-login-btn{font-size:13px;padding:10px 30px;border-radius:var(--r);background:#2B8853;color:#fff;border:none;cursor:pointer;font-weight:700}
.ts-login-btn:hover{background:#256B44}
.ts-login-note{font-size:10px;color:#B8ECC9;margin-top:8px}

/* ===== COMMON LAYOUT (logged in) ===== */
.lay{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:14px;padding:14px 16px}
.sh{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.sh:first-child{margin-top:0}
.badge{font-size:9px;color:#185FA5;background:#E6F1FB;border-radius:var(--r);padding:1px 6px;margin-left:4px;font-weight:400}

/* cards */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.cd{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.cd:hover{filter:brightness(.96)}
.cd.hl{border-width:2px;font-weight:600}
.cd-img{width:100%;height:32px;background:#E6F1FB;border-radius:5px;margin-bottom:7px;display:flex;align-items:center;justify-content:center}
.cd-h{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.ct{font-size:11px;font-weight:600;color:var(--text)}
.cs{font-size:10px;color:var(--text2);line-height:1.4}

/* sidebar */
.sb{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:9px}
.sbt{font-size:10px;font-weight:700;color:var(--text);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.sbt svg{color:#378ADD;flex-shrink:0}
.sbi{width:100%;font-size:11px;padding:6px 9px;border-radius:var(--r);border:1px solid var(--border-s);margin-bottom:4px}
.sbn{font-size:9px;color:var(--text3);line-height:1.7}
.sb-banner{width:100%;height:60px;background:#F24979;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:6px}
.sb-bt{font-size:9px;color:#B5D4F4;margin-top:4px;text-align:center}
.sbl{font-size:10px;color:#185FA5;padding:3px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:5px;cursor:pointer}
.sbl:hover{color:#378ADD}
.sbl:last-child{border-bottom:none}
.sbl.on{font-weight:700;color:#F24979}

/* breadcrumb */
.bc{font-size:10px;color:var(--text3);padding:6px 16px;border-bottom:1px solid var(--border);background:#f8f8f8}
.bcc{color:#185FA5}

/* page hero */
.ph{background:#E6F1FB;border:1px solid #B5D4F4;border-radius:10px;padding:13px;margin-bottom:13px;display:flex;align-items:flex-start;gap:11px}
.phi{width:38px;height:38px;min-width:38px;border-radius:9px;background:#F24979;display:flex;align-items:center;justify-content:center}
.pht{font-size:14px;font-weight:700;color:#F24979;margin-bottom:3px}
.phs{font-size:11px;color:#185FA5;line-height:1.6}
/* 印刷ボタン。見出しの下に右寄せで置く（既存サイトと同じ位置）。 */
.print-row{display:flex;justify-content:flex-end;margin:-4px 0 11px}
.ph-print{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #B5D4F4;border-radius:var(--r);padding:6px 13px;font-size:11px;font-weight:600;color:#185FA5;cursor:pointer;font-family:inherit}
.ph-print:hover{background:#F3F9FE;border-color:#378ADD}

/* detail items */
.di{display:flex;align-items:flex-start;gap:7px;padding:6px 0;border-bottom:1px solid #f0f0f0;font-size:11px;color:var(--text)}
.di:last-child{border-bottom:none}
.dis{font-size:10px;color:var(--text3);margin-top:1px}
.ext{font-size:9px;padding:1px 5px;border-radius:var(--r);background:#E6F1FB;color:#185FA5;border:1px solid #B5D4F4;margin-left:4px}

/* checklist */
.pl{font-size:10px;font-weight:700;color:#185FA5;background:#E6F1FB;border-radius:var(--r);padding:2px 8px;display:inline-block;margin:7px 0 5px}
.ci{display:flex;align-items:flex-start;gap:7px;padding:5px 0;border-bottom:1px solid #f5f5f5;font-size:11px;color:var(--text)}
.ci:last-child{border-bottom:none}
.cbx{width:14px;height:14px;min-width:14px;border-radius:3px;border:2px solid #378ADD;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#fff}
.cbx.chk{background:#378ADD;border-color:#378ADD}
.cbx.chk::after{content:'';width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-top:-1px}

/* tabs */
.tabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.tab{font-size:10px;padding:4px 9px;border-radius:var(--r);border:1px solid var(--border);color:var(--text2);background:#fff;cursor:pointer;white-space:nowrap}
.tab:hover{border-color:#378ADD;color:#378ADD}
.tab.on{border-color:#378ADD;color:#185FA5;background:#E6F1FB;font-weight:700}

/* area card */
.area{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 11px;margin-bottom:5px;display:flex;justify-content:space-between;align-items:center}
.at{font-size:9px;padding:2px 7px;border-radius:20px;background:#E6F1FB;color:#185FA5;border:1px solid #B5D4F4;flex-shrink:0;margin-left:8px}

/* prev/next */
.pn{display:flex;gap:7px;margin-top:13px}
.pnb{flex:1;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:7px 9px;font-size:10px;color:var(--text2);text-align:center;cursor:pointer}
.pnb:hover{border-color:#378ADD;color:#185FA5}

/* LOGIN */
.lw{padding:48px 16px;display:flex;justify-content:center;background:#f5f5f5}
.lc{background:#fff;border:1px solid var(--border);border-radius:14px;padding:30px;width:290px}
.ll{width:54px;height:54px;background:#F24979;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:#FBC8D7;margin:0 auto 13px}
.lti{font-size:15px;font-weight:700;color:var(--text);text-align:center;margin-bottom:4px}
.lsu{font-size:11px;color:var(--text2);text-align:center;margin-bottom:20px;line-height:1.7}
/* 初回のパスワード変更。ここを通らないと先へ進めないので、注意書きの見た目にする。 */
.lfirst{font-size:11px;color:#8a6d1a;background:#fef6e0;border:1px solid #f5d78e;border-radius:6px;padding:9px 11px;margin:10px 0 18px;line-height:1.8}
.fl{font-size:11px;color:var(--text2);margin-bottom:4px}
.fw{margin-bottom:13px}
.fw input{width:100%;font-size:12px;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border-s)}
.lbtn{width:100%;padding:9px;border-radius:var(--r);background:#378ADD;color:#fff;font-size:12px;font-weight:700;border:none;cursor:pointer;margin-bottom:11px}
.lbtn:hover{background:#185FA5}
.lh{font-size:10px;color:var(--text3);text-align:center;line-height:1.6}

/* MY PAGE */
.mps{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
.mpr{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid #f5f5f5;font-size:11px}
.mpr:last-child{border-bottom:none}
.mpl{font-size:10px;color:var(--text3);width:108px;flex-shrink:0}
.lg{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.lb{font-size:10px;padding:3px 9px;border-radius:var(--r);border:1px solid var(--border);cursor:pointer;background:#fff;color:var(--text2)}
.lb.on{background:#E6F1FB;border-color:#378ADD;color:#F24979;font-weight:700}
.bmi{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f5f5f5;font-size:11px;cursor:pointer}
.bmi:hover{color:#185FA5}
.bmi:last-child{border-bottom:none}

/* ===== EDITOR ===== */
.ed-wrap{padding:16px}
.ed-hdr{background:#F24979;border-radius:10px;padding:13px 16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ed-hdr-t{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px}
.ed-hdr-s{font-size:10px;color:#B5D4F4}
.ed-btns{display:flex;gap:6px;flex-shrink:0}
.edbtn{font-size:11px;padding:6px 14px;border-radius:var(--r);border:none;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:5px;white-space:nowrap}
.edbtn.pri{background:#378ADD;color:#fff}
.edbtn.pri:hover{background:#185FA5}
.edbtn.sec{background:#185FA5;color:#fff}
.edbtn.sec:hover{background:#F24979}
.edbtn.grn{background:#16a34a;color:#fff}

.page-list{margin-bottom:12px}
.pi{background:#fff;border:1px solid var(--border);border-radius:9px;padding:9px 13px;margin-bottom:5px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:border-color .15s}
.pi:hover{border-color:#378ADD}
.pi.on{border-color:#378ADD;background:#EFF6FF}
.pi-info{flex:1}
.pi-t{font-size:11px;font-weight:600;color:#F24979}
.pi-c{font-size:10px;color:var(--text3);margin-top:2px}
.pi-badge{font-size:8.5px;padding:1px 6px;border-radius:20px;border:1px solid;margin-left:7px}
.pi-badge.pub{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.pi-badge.draft{background:#fef9c3;color:#854d0e;border-color:#fde68a}
.pi-btn{font-size:10px;padding:4px 10px;border-radius:var(--r);background:#E6F1FB;color:#185FA5;border:1px solid #B5D4F4;cursor:pointer;flex-shrink:0;margin-left:9px}

/* form fields */
.fg{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 15px;margin-bottom:10px}
.fl2{font-size:10px;font-weight:700;color:#F24979;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.fopt{font-size:9px;font-weight:400;color:var(--text3);background:#f5f5f5;padding:1px 6px;border-radius:var(--r);border:1px solid var(--border)}
.fi{width:100%;font-size:12px;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border-s);background:#fafafa}
.fi:focus{outline:none;border-color:#378ADD;background:#fff}
.fta{width:100%;font-size:12px;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border-s);background:#fafafa;resize:vertical;min-height:88px;line-height:1.7}
.fta:focus{outline:none;border-color:#378ADD;background:#fff}
.fh{font-size:9px;color:var(--text3);margin-top:4px;line-height:1.6}

/* photo upload */
.pz{border:2px dashed #B5D4F4;border-radius:9px;padding:22px;text-align:center;cursor:pointer;background:#f8fbff;transition:border-color .15s,background .15s}
.pz:hover{border-color:#378ADD;background:#E6F1FB}
.pz-icon{font-size:26px;margin-bottom:7px;opacity:.5}
.pz-t{font-size:11px;color:#185FA5;font-weight:600;margin-bottom:2px}
.pz-s{font-size:10px;color:var(--text3)}
.prev-img{width:100%;height:110px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:none}
.pa{display:flex;gap:6px;margin-top:6px}
.pbtn{font-size:10px;padding:3px 9px;border-radius:var(--r);border:1px solid var(--border);cursor:pointer;background:#fff;color:var(--text2)}
.pbtn:hover{border-color:#378ADD;color:#185FA5}
.pbtn.del{border-color:#fca5a5;color:#dc2626}
.pbtn.del:hover{background:#fef2f2}

/* link toggle */
.lt-row{display:flex;gap:6px;align-items:center}
.lt-btn{font-size:10px;padding:4px 10px;border-radius:var(--r);border:1px solid var(--border);cursor:pointer;background:#fff;color:var(--text2);white-space:nowrap}
.lt-btn.on{background:#E6F1FB;border-color:#378ADD;color:#185FA5;font-weight:600}
.lf{display:none;margin-top:8px}
.lf.show{display:block}
.lprev{background:#E6F1FB;border:1px solid #B5D4F4;border-radius:7px;padding:8px 11px;margin-top:7px;font-size:11px;color:#185FA5;display:flex;align-items:center;gap:6px;cursor:pointer}
.lprev:hover{background:#dbeafe}

/* live preview */
.prev-panel{background:#f8f8f8;border:1px solid var(--border);border-radius:10px;padding:13px;margin-bottom:10px}
.prev-lbl{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px;display:flex;align-items:center;gap:5px}
.prev-card{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.prev-img-area{width:100%;height:90px;background:#E6F1FB;display:flex;align-items:center;justify-content:center}
.prev-body{padding:10px 12px}
.prev-t{font-size:12px;font-weight:700;color:#F24979;margin-bottom:3px}
.prev-c{font-size:11px;color:var(--text2);line-height:1.6;margin-bottom:5px}
.prev-l{font-size:10px;color:#185FA5;display:flex;align-items:center;gap:4px}

/* publish bar */
.pub-bar{background:#f8fbff;border:1px solid #B5D4F4;border-radius:10px;padding:13px 15px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pub-status{font-size:10px;color:var(--text3)}
.pub-btns{display:flex;gap:6px}

/* FOOTER */
.ft{background:#F24979;padding:11px 16px;display:flex;justify-content:space-between;align-items:center}
.ftx{font-size:10px;color:#FBC8D7}
.ftl{display:flex;gap:10px;align-items:center}
.ft-lnk{font-size:11px;color:#cfe4f7;cursor:pointer;padding:4px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);line-height:1.35;display:inline-block;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.ft-lnk:hover{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.4)}
.ft-nr{font-size:12px;font-weight:600;color:#fff;letter-spacing:.03em;background:none;border:none;padding:0}
.fta:hover{color:#fff}

/* ===== TOKYO GUIDEBOOK INDEX ===== */
.gb-hero{background:linear-gradient(120deg,#eaf3fb,#f8fbff);border:1px solid #B5D4F4;border-radius:12px;padding:16px 18px;margin-bottom:14px;position:relative;overflow:hidden}
.gb-hero-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.12em;color:#fff;background:#d68910;padding:2px 9px;border-radius:20px;margin-bottom:7px}
.gb-hero-t{font-size:17px;font-weight:800;color:#F24979;margin-bottom:5px}
.gb-hero-s{font-size:11px;color:#185FA5;line-height:1.7}
.gb-list{display:flex;flex-direction:column;gap:8px}
.gb-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:11px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s,background .15s}
.gb-card:hover{border-color:#378ADD;box-shadow:0 3px 12px rgba(55,138,221,.13);transform:translateY(-1px)}
.gb-ic{width:46px;height:46px;min-width:46px;border-radius:11px;background:#f5f9fd;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.gb-body{flex:1;min-width:0}
.gb-t{font-size:13px;font-weight:700;color:#F24979;margin-bottom:2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gb-d{font-size:10.5px;color:var(--text2);line-height:1.5}
.gb-sig{font-size:8.5px;font-weight:700;color:#d68910;background:#fef6e0;border:1px solid #f5d78e;padding:1px 7px;border-radius:20px}
.gb-arrow{flex-shrink:0}
.gb-card:hover .gb-arrow{stroke:#378ADD}

/* ===== Guidebook detail + tables ===== */
.gd-hero{border-radius:12px;padding:14px 16px;margin-bottom:14px;display:flex;align-items:center;gap:13px;background:linear-gradient(120deg,#eaf3fb,#f8fbff);border:1px solid #B5D4F4}
.gd-hero .gb-ic{background:#fff}
.gd-ht{font-size:16px;font-weight:800;color:#F24979}
.gd-hs{font-size:11px;color:#185FA5;margin-top:2px;line-height:1.5}
.gd-sec{font-size:12px;font-weight:700;color:#F24979;margin:16px 0 8px;padding-left:9px;border-left:3px solid #d68910}
.gd-sec:first-of-type{margin-top:0}
/*
 * 本文は、管理画面に入れたとおりの改行・空行で出す。
 * HTMLは既定で改行を空白1つに潰すため、原稿の段落分けが
 * すべて1続きの文章になってしまう。
 */
.gd-p{font-size:11.5px;color:var(--text2);line-height:1.85;margin-bottom:10px;white-space:pre-wrap}
.gd-tbl{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:12px;background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.gd-tbl th{background:#F24979;color:#fff;font-weight:600;text-align:left;padding:7px 9px;font-size:10px;white-space:nowrap}
.gd-tbl td{padding:7px 9px;border-top:1px solid var(--border);color:var(--text);vertical-align:top;line-height:1.6}
.gd-tbl tr:nth-child(even) td{background:#f8fbfd}
.gd-tbl a{color:#185FA5;text-decoration:none}
.gd-tbl a:hover{text-decoration:underline}
.gd-tbl .tag{font-size:9px;background:#E6F1FB;color:#185FA5;border:1px solid #B5D4F4;border-radius:20px;padding:1px 7px;white-space:nowrap;display:inline-block}
.gd-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gd-note{font-size:10px;color:var(--text3);background:#f8f9fb;border:1px solid var(--border);border-radius:7px;padding:8px 11px;line-height:1.7;margin-bottom:12px;white-space:pre-wrap}
.sig-ribbon{display:inline-block;font-size:9px;font-weight:700;color:#d68910;background:#fef6e0;border:1px solid #f5d78e;padding:2px 9px;border-radius:20px;margin-bottom:10px}

/* ===== TOPICS / NEWS sidebar box ===== */
.sb-news{background:#fff;border:1px solid var(--border);border-radius:10px;padding:0 12px 10px;margin-bottom:9px;overflow:hidden}
.sb-news .sbt{color:#fff;background:#c0392b;margin:0 -12px 8px;padding:8px 12px;font-size:10.5px}
.sb-news .sbt svg{stroke:#fff!important;color:#fff}
.news-item{display:block;padding:7px 0;border-bottom:1px solid var(--border);cursor:pointer;text-decoration:none}
.news-item:last-child{border-bottom:none}
.news-date{font-size:9px;color:var(--text3);display:flex;align-items:center;gap:5px;margin-bottom:2px}
.news-tag{font-size:8px;font-weight:700;color:#fff;background:#c0392b;padding:1px 5px;border-radius:3px}
.news-tag.info{background:#185FA5}
.news-tag.upd{background:#F24979}
.news-ttl{font-size:10.5px;color:#F24979;line-height:1.5;font-weight:600}
.news-item:hover .news-ttl{color:#185FA5}

/* ===== Popular ranking box ===== */
.sb-rank{background:#fff;border:1px solid var(--border);border-radius:10px;padding:0 12px 10px;margin-bottom:9px;overflow:hidden}
.sb-rank .sbt{color:#fff;background:#d68910;margin:0 -12px 8px;padding:8px 12px;font-size:10.5px}
.sb-rank .sbt svg{stroke:#fff!important;color:#fff}
.rk-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);cursor:pointer;text-decoration:none}
.rk-item:last-child{border-bottom:none}
.rk-no{width:18px;height:18px;min-width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;background:#B5D4F4}
.rk-no.t1{background:#d4af37}.rk-no.t2{background:#a8b3bd}.rk-no.t3{background:#c8874b}
.rk-txt{font-size:10.5px;color:#F24979;line-height:1.4;flex:1;min-width:0}
.rk-item:hover .rk-txt{color:#185FA5}
.rk-cat{font-size:8.5px;color:var(--text3)}

/* ===== Top page contact block ===== */
.ts-contact{margin-top:22px;background:#f8f9fb;border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.ts-contact-h{font-size:11px;font-weight:700;color:#F24979;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.ts-contact-body{font-size:11px;color:var(--text2);line-height:1.85}
/* 会社名・担当・注記を、ひと組ずつの塊にして間を空ける */
.ts-contact-block{margin-bottom:9px}
.ts-contact-co{font-size:12px;font-weight:700;color:#F24979;margin-bottom:0}
/*
 * 連絡先の英語の行。日本語を主、英語を従とする。
 * 落差を付けすぎると別の要素に見えるので、1段だけ小さくして色で従属を示す。
 */
.ts-contact-en{font-size:10px;color:var(--text3);line-height:1.6;margin-top:1px}
/* 注記は本文から少し離し、区切り線で締める */
.ts-contact-foot{margin-top:11px;padding-top:9px;border-top:1px solid var(--border);font-size:10px;line-height:1.75}
.ts-contact-site{margin-top:4px}
.ts-contact-site a{color:#185FA5;text-decoration:none}
.ts-contact-site a:hover{text-decoration:underline}
.ts-contact-row{display:flex;gap:6px;flex-wrap:wrap}
.ts-contact-lbl{color:var(--text3);min-width:52px}

/* ===== MOBILE / RESPONSIVE ===== */
*{-webkit-tap-highlight-color:rgba(55,138,221,.2)}
.nl,.nbtn,.ts-link,.cd,.sbl,.faq-item,.pnb,.tab,.bmi,.pi,.lb,.ts-login-btn,.lbtn,.gb-card,.news-item,.rk-item{touch-action:manipulation}
/* prevent one-character-per-line: never let flex/grid children collapse to near-zero width */
.gb-body,.rk-txt,.news-ttl,.phs,.pht,.cs,.ct,.gd-ht,.gd-hs{min-width:0;word-break:normal;overflow-wrap:anywhere}
.lay>div{min-width:0}

/* ===== overflow safety ===== */
html,body{overflow-x:hidden}
#app{overflow-x:hidden}
.dchart svg,.dph,img{max-width:100%}
.gd-tbl,.tabs{max-width:100%}

/* tablet: collapse to single column */
@media(max-width:820px){
  .lay{grid-template-columns:1fr!important;gap:14px}
  .dmedia{grid-template-columns:1fr!important}
}
@media(max-width:640px){
  #app{box-shadow:none;max-width:100%}
  .nav{height:auto;flex-direction:column;align-items:stretch;gap:6px;padding:8px 10px;position:static}
  .nlogo{justify-content:center}
  .nlinks{flex-wrap:wrap;justify-content:center;gap:4px}
  .nl{padding:6px 9px;font-size:11px}
  .nbtn{margin-left:0}
  .sbar{flex-wrap:wrap}
  .banner{height:auto}
  .banner-title{font-size:12px}
  .banner-sub{font-size:9px}
  .banner-note{display:none;display:none}
  /* single column everywhere */
  .lay{grid-template-columns:1fr!important;gap:12px;padding:12px}
  .top-simple,.top-wrap{padding:20px 16px 26px}
  .ts-nav{flex-direction:column;align-items:stretch;gap:0;padding:6px 0}
  .ts-link{padding:15px 6px;font-size:14px;border-bottom:1px solid var(--border);text-align:center}
  .ts-link:last-child{border-bottom:none}
  /* card grids collapse */
  .g4,.g3,.g2{grid-template-columns:1fr!important}
  .dmedia{grid-template-columns:1fr!important}
  .ts-example-grid{display:flex;flex-direction:column}
  .dph{min-height:150px}
  /* tabs & tables scroll horizontally, never wrap to 1 char */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:3px}
  .tab{flex-shrink:0}
  .gd-tbl{font-size:10.5px}
  .gd-tbl th,.gd-tbl td{white-space:normal}
  /* editor stacks */
  .ed-hdr{flex-direction:column;align-items:stretch;gap:10px}
  .ed-btns{justify-content:flex-end}
  .pub-bar{flex-direction:column;align-items:stretch}
  .pub-btns{justify-content:flex-end}
  .lw{padding:32px 16px}
  .lc{width:100%;max-width:320px}
  .ft{flex-direction:column;gap:6px;text-align:center}
  .gb-hero-t{font-size:15px}
}


/* ===== PASTEL COLOR-CODING ===== */
#pg-basic-top .ph{background:linear-gradient(120deg,#E1F0FF,#ffffff);border:1px solid #BEDBF7;border-radius:10px;padding:12px 14px}#pg-basic-top .phi{background:#fff;border:1px solid #BEDBF7}#pg-basic-top .phi svg{stroke:#2E6FB0}#pg-basic-top .pht{color:#2E6FB0}#pg-basic-top .sh{border-left:3px solid #2E6FB0;padding-left:9px}
#pg-living-top .ph{background:linear-gradient(120deg,#E6FAEE,#ffffff);border:1px solid #C4EED6;border-radius:10px;padding:12px 14px}#pg-living-top .phi{background:#fff;border:1px solid #C4EED6}#pg-living-top .phi svg{stroke:#2B8853}#pg-living-top .pht{color:#2B8853}#pg-living-top .phs{color:#2B8853}#pg-living-top .sh{border-left:3px solid #2B8853;padding-left:9px}
#pg-basic-detail .ph{background:linear-gradient(120deg,#E1F0FF,#fff);border:1px solid #BEDBF7}#pg-basic-detail .phi{background:#fff;border:1px solid #BEDBF7}#pg-basic-detail .phi svg{stroke:#2E6FB0}#pg-basic-detail .pht{color:#2E6FB0}#pg-basic-detail .sh{border-left:3px solid #2E6FB0;padding-left:9px}
#pg-living-detail .ph{background:linear-gradient(120deg,#E6FAEE,#fff);border:1px solid #C4EED6}#pg-living-detail .phi{background:#fff;border:1px solid #C4EED6}#pg-living-detail .phi svg{stroke:#2B8853}#pg-living-detail .pht{color:#2B8853}#pg-living-detail .sh{border-left:3px solid #2B8853;padding-left:9px}
#pg-intro-about .ph{background:linear-gradient(120deg,#E1F0FF,#fff);border:1px solid #BEDBF7;border-radius:10px;padding:12px 14px}#pg-intro-about .phi{background:#fff;border:1px solid #BEDBF7}#pg-intro-about .phi svg{stroke:#2E6FB0}#pg-intro-about .pht{color:#2E6FB0}#pg-intro-about .sh{border-left:3px solid #2E6FB0;padding-left:9px}
#pg-intro-purpose .ph{background:linear-gradient(120deg,#EBE6FA,#fff);border:1px solid #D0C4EE;border-radius:10px;padding:12px 14px}#pg-intro-purpose .phi{background:#fff;border:1px solid #D0C4EE}#pg-intro-purpose .phi svg{stroke:#4F319B}#pg-intro-purpose .pht{color:#4F319B}#pg-intro-purpose .sh{border-left:3px solid #4F319B;padding-left:9px}
#pg-intro-howto .ph{background:linear-gradient(120deg,#E6FAEE,#fff);border:1px solid #C4EED6;border-radius:10px;padding:12px 14px}#pg-intro-howto .phi{background:#fff;border:1px solid #C4EED6}#pg-intro-howto .phi svg{stroke:#2B8853}#pg-intro-howto .pht{color:#2B8853}#pg-intro-howto .sh{border-left:3px solid #2B8853;padding-left:9px}
#pg-intro-langs .ph{background:linear-gradient(120deg,#D8F1EF,#fff);border:1px solid #B4E2DD;border-radius:10px;padding:12px 14px}#pg-intro-langs .phi{background:#fff;border:1px solid #B4E2DD}#pg-intro-langs .phi svg{stroke:#248079}#pg-intro-langs .pht{color:#248079}#pg-intro-langs .sh{border-left:3px solid #248079;padding-left:9px}
#pg-intro-schedule .ph{background:linear-gradient(120deg,#FFF3D6,#fff);border:1px solid #F1DFA6;border-radius:10px;padding:12px 14px}#pg-intro-schedule .phi{background:#fff;border:1px solid #F1DFA6}#pg-intro-schedule .phi svg{stroke:#A87A12}#pg-intro-schedule .pht{color:#A87A12}#pg-intro-schedule .sh{border-left:3px solid #A87A12;padding-left:9px}
#pg-mypage .ph{background:#FDEBF1;border:1px solid #F6C2D3}#pg-mypage .phi{background:#F24979;border:1px solid #F6C2D3}#pg-mypage .phi svg{stroke:#FBC8D7}#pg-mypage .pht{color:#C43A63}#pg-mypage .phs{color:#C43A63}
#pg-intro-faq .ph{background:linear-gradient(120deg,#FBE6F2,#fff);border:1px solid #F1C9E0;border-radius:10px;padding:12px 14px}#pg-intro-faq .phi{background:#fff;border:1px solid #F1C9E0}#pg-intro-faq .phi svg{stroke:#B0468A}#pg-intro-faq .pht{color:#B0468A}#pg-intro-faq .sh{border-left:3px solid #B0468A;padding-left:9px}
#pg-tokyo .gb-hero{background:linear-gradient(120deg,#FFEBDD,#fffaf6);border:1px solid #F5D2B8}#pg-tokyo .gb-hero-t{color:#C4703A}#pg-tokyo .gb-hero-s{color:#C4703A}
#pg-tokyo-city .gd-hero{background:linear-gradient(120deg,#E1F0FF,#ffffff);border:1px solid #BEDBF7}#pg-tokyo-city .gd-hero .gb-ic{background:#fff;border:1px solid #BEDBF7}#pg-tokyo-city .gd-ht{color:#2E6FB0}#pg-tokyo-city .gd-hs{color:#2E6FB0;opacity:.85}#pg-tokyo-city .gd-sec{border-left-color:#2E6FB0}#pg-tokyo-city .gd-tbl th{background:#2E6FB0}
#pg-tokyo-gov .gd-hero{background:linear-gradient(120deg,#EBE6FA,#ffffff);border:1px solid #D0C4EE}#pg-tokyo-gov .gd-hero .gb-ic{background:#fff;border:1px solid #D0C4EE}#pg-tokyo-gov .gd-ht{color:#4F319B}#pg-tokyo-gov .gd-hs{color:#4F319B;opacity:.85}#pg-tokyo-gov .gd-sec{border-left-color:#4F319B}#pg-tokyo-gov .gd-tbl th{background:#4F319B}
#pg-tokyo-area .gd-hero{background:linear-gradient(120deg,#FFEBDD,#ffffff);border:1px solid #F5D2B8}#pg-tokyo-area .gd-hero .gb-ic{background:#fff;border:1px solid #F5D2B8}#pg-tokyo-area .gd-ht{color:#C4703A}#pg-tokyo-area .gd-hs{color:#C4703A;opacity:.85}#pg-tokyo-area .gd-sec{border-left-color:#C4703A}#pg-tokyo-area .gd-tbl th{background:#C4703A}
#pg-tokyo-transport .gd-hero{background:linear-gradient(120deg,#E6FAEE,#ffffff);border:1px solid #C4EED6}#pg-tokyo-transport .gd-hero .gb-ic{background:#fff;border:1px solid #C4EED6}#pg-tokyo-transport .gd-ht{color:#2B8853}#pg-tokyo-transport .gd-hs{color:#2B8853;opacity:.85}#pg-tokyo-transport .gd-sec{border-left-color:#2B8853}#pg-tokyo-transport .gd-tbl th{background:#2B8853}
#pg-tokyo-med .gd-hero{background:linear-gradient(120deg,#FFE4E7,#ffffff);border:1px solid #F7C9CF}#pg-tokyo-med .gd-hero .gb-ic{background:#fff;border:1px solid #F7C9CF}#pg-tokyo-med .gd-ht{color:#C1466B}#pg-tokyo-med .gd-hs{color:#C1466B;opacity:.85}#pg-tokyo-med .gd-sec{border-left-color:#C1466B}#pg-tokyo-med .gd-tbl th{background:#C1466B}
#pg-tokyo-edu .gd-hero{background:linear-gradient(120deg,#FFF3D6,#ffffff);border:1px solid #F1DFA6}#pg-tokyo-edu .gd-hero .gb-ic{background:#fff;border:1px solid #F1DFA6}#pg-tokyo-edu .gd-ht{color:#A87A12}#pg-tokyo-edu .gd-hs{color:#A87A12;opacity:.85}#pg-tokyo-edu .gd-sec{border-left-color:#A87A12}#pg-tokyo-edu .gd-tbl th{background:#A87A12}
#pg-tokyo-shop .gd-hero{background:linear-gradient(120deg,#FBE6F2,#ffffff);border:1px solid #F1C9E0}#pg-tokyo-shop .gd-hero .gb-ic{background:#fff;border:1px solid #F1C9E0}#pg-tokyo-shop .gd-ht{color:#B0468A}#pg-tokyo-shop .gd-hs{color:#B0468A;opacity:.85}#pg-tokyo-shop .gd-sec{border-left-color:#B0468A}#pg-tokyo-shop .gd-tbl th{background:#B0468A}
#pg-tokyo-leisure .gd-hero{background:linear-gradient(120deg,#D8F1EF,#ffffff);border:1px solid #B4E2DD}#pg-tokyo-leisure .gd-hero .gb-ic{background:#fff;border:1px solid #B4E2DD}#pg-tokyo-leisure .gd-ht{color:#248079}#pg-tokyo-leisure .gd-hs{color:#248079;opacity:.85}#pg-tokyo-leisure .gd-sec{border-left-color:#248079}#pg-tokyo-leisure .gd-tbl th{background:#248079}
#nl-basic{box-shadow:inset 0 -2px 0 #7FB3E6}#nl-living{box-shadow:inset 0 -2px 0 #8FD3A6}#nl-tokyo{box-shadow:inset 0 -2px 0 #F3B58A}

/* ===== PASTEL HOVER (darken on hover) ===== */

/* ===== TOKYO UPLOADED ICONS ===== */
.tic{width:38px;height:38px;background-size:contain;background-repeat:no-repeat;background-position:center;display:block}
.tic-city{background-size:85% auto}
.tic-city{background-image:url(../img/proto/tokyo-city.png)}
.tic-gov{background-image:url(../img/proto/tokyo-gov.png)}
.tic-area{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E %3C!-- large building body --%3E %3Crect x='9' y='12' width='24' height='32' rx='2' fill='%23AECBEB'/%3E %3C!-- roof line --%3E %3Crect x='7' y='9' width='28' height='5' rx='1.5' fill='%234F93D9'/%3E %3C!-- windows grid --%3E %3Cg fill='%23ffffff'%3E %3Crect x='13' y='18' width='4.5' height='4.5' rx='0.6'/%3E %3Crect x='20' y='18' width='4.5' height='4.5' rx='0.6'/%3E %3Crect x='27' y='18' width='4.5' height='4.5' rx='0.6'/%3E %3Crect x='13' y='26' width='4.5' height='4.5' rx='0.6'/%3E %3Crect x='20' y='26' width='4.5' height='4.5' rx='0.6'/%3E %3Crect x='27' y='26' width='4.5' height='4.5' rx='0.6'/%3E %3C/g%3E %3C!-- door --%3E %3Crect x='18' y='35' width='6' height='9' fill='%2386C04A'/%3E %3C!-- location pin (small, top-right) --%3E %3Cg%3E %3Cpath d='M37 6c-2.4 0-4.3 1.9-4.3 4.3 0 3 4.3 6.7 4.3 6.7s4.3-3.7 4.3-6.7C41.3 7.9 39.4 6 37 6Z' fill='%23E0544B'/%3E %3Ccircle cx='37' cy='10.3' r='1.5' fill='%23ffffff' stroke='none'/%3E %3C/g%3E %3C/svg%3E")}
.tic-transport{background-image:url(../img/proto/tokyo-transport.png)}
.tic-med{background-image:url(../img/proto/tokyo-med.png)}
.tic-edu{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E %3C!-- large notebook --%3E %3Crect x='9' y='8' width='26' height='33' rx='2.5' fill='%23AECBEB'/%3E %3C!-- spiral binding --%3E %3Cline x1='9' y1='8' x2='9' y2='41' stroke='%234F93D9' stroke-width='4'/%3E %3Cg stroke='%231c1c1c' stroke-width='1.4'%3E %3Cline x1='9' y1='13' x2='6' y2='13'/%3E %3Cline x1='9' y1='20' x2='6' y2='20'/%3E %3Cline x1='9' y1='27' x2='6' y2='27'/%3E %3Cline x1='9' y1='34' x2='6' y2='34'/%3E %3C/g%3E %3C!-- ruled lines --%3E %3Cg stroke='%23ffffff' stroke-width='1.8'%3E %3Cline x1='15' y1='16' x2='30' y2='16'/%3E %3Cline x1='15' y1='22' x2='30' y2='22'/%3E %3Cline x1='15' y1='28' x2='30' y2='28'/%3E %3C/g%3E %3C!-- pencil (moderate, diagonal, over corner) --%3E %3Cg transform='rotate(45 34 30)'%3E %3Crect x='31.5' y='20' width='5' height='18' rx='1' fill='%23F5C33B'/%3E %3Cpath d='M31.5 38 L34 43 L36.5 38 Z' fill='%23ffffff'/%3E %3Cpath d='M33.2 40.4 L34 42 L34.8 40.4 Z' fill='%231c1c1c' stroke='none'/%3E %3Crect x='31.5' y='20' width='5' height='3' fill='%23E0544B'/%3E %3C/g%3E %3C/svg%3E")}
.tic-shop{background-image:url(../img/proto/tokyo-shop.png)}
.tic-leisure{background-image:url(../img/proto/tokyo-leisure.png)}

/* ===== table links with URL (2-line) ===== */
.gd-tbl a{color:#185FA5;font-weight:600;text-decoration:none}
.gd-tbl a:hover{text-decoration:underline}
.lk{display:block}
.lk-url{font-size:9px;color:#94a2ae;word-break:break-all;line-height:1.35;margin-top:2px;font-weight:400}
.gd-tbl td .nolink{color:#94a2ae;font-size:9.5px}

/* ===== DUMMY MEDIA (photos / charts) ===== */
.dmedia{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.dph{position:relative;border-radius:10px;overflow:hidden;min-height:130px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E1F0FF,#E6FAEE);border:1px solid var(--border)}
.dph .dph-ic{opacity:.5}
.dph .dph-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(242,73,121,.62);color:#fff;font-size:9.5px;padding:4px 8px}
.dph.wide{grid-column:1 / -1;min-height:150px}
.dchart{border:1px solid var(--border);border-radius:10px;padding:11px 12px;background:#fff}
.dchart-t{font-size:10.5px;font-weight:700;color:#F24979;margin-bottom:8px}
.dchart svg{display:block;width:100%;height:auto}
.dcap{font-size:9px;color:var(--text3);margin-top:6px}
.ddash{font-size:9px;color:#d68910;background:#fef6e0;border:1px solid #f5d78e;border-radius:5px;padding:2px 7px;display:inline-block;margin-bottom:8px}
[onclick]{cursor:pointer;-webkit-tap-highlight-color:rgba(55,138,221,.25)}

/* ===== BACK TO TOP ===== */
.backtop{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;background:#F24979;color:#fff;border:none;box-shadow:0 4px 14px rgba(242,73,121,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,background .15s,visibility .2s;z-index:200}
.backtop.show{opacity:1;visibility:visible;transform:translateY(0)}
.backtop:hover{background:#185FA5}
.backtop svg{display:block}
.backtop-label{position:absolute;right:52px;background:rgba(242,73,121,.9);color:#fff;font-size:10px;padding:3px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.backtop:hover .backtop-label{opacity:1}
@media(max-width:640px){.backtop{right:14px;bottom:14px;width:42px;height:42px}}

/* ===== TYPOGRAPHY SCALE-UP (comfortable article-site sizing) ===== */
#app{font-size:15px}
/* breadcrumbs / labels */
.bc{font-size:12.5px}
/* page hero */
.pht{font-size:20px;line-height:1.45}
.phs{font-size:13.5px;line-height:1.7}
.gd-ht{font-size:21px}
.gd-hs{font-size:13.5px;line-height:1.65}
.gb-hero-t{font-size:21px}
.gb-hero-s{font-size:13.5px;line-height:1.75}
.gb-hero-badge{font-size:10.5px}
/* section headings */
.sh{font-size:17px}
.gd-sec{font-size:16px}
/* body copy */
.gd-p{font-size:15px;line-height:1.95}
.gd-note{font-size:12.5px;line-height:1.8}
.ddash{font-size:11.5px}
/* tables */
.gd-tbl{font-size:13.5px}
.gd-tbl th{font-size:12.5px}
.gd-tbl .tag{font-size:10.5px}
/* cards */
.cd{padding:12px 14px}
.ct{font-size:15px}
.cs{font-size:12.5px;margin-top:2px}
.badge{font-size:11px}
/* guidebook cards */
.gb-card{padding:13px 15px}
.gb-t{font-size:15px}
.gb-d{font-size:12.5px;line-height:1.55}
.gb-sig{font-size:10px}
/* nav */
.nlt{font-size:15px}
.nl{font-size:14px;padding:7px 11px}
.nbtn{font-size:13px}
/* sidebar */
.sbt{font-size:12.5px}
.sbl{font-size:13px;padding:6px 2px}
.sbi{font-size:13px}
.sbn{font-size:11px}
.sb-bt{font-size:12px}
/* news + ranking */
.news-ttl{font-size:12.5px;line-height:1.55}
.news-date{font-size:10.5px}
.news-tag{font-size:9.5px}
.rk-txt{font-size:12.5px}
.rk-cat{font-size:10.5px}
.rk-no{font-size:11px}
/* tabs / pager */
.tab{font-size:13px}
.pnb{font-size:13px}
/* top page */
.ts-welcome-t{font-size:27px}
.ts-intro-body{font-size:14.5px;line-height:2}
.ts-intro-note{font-size:12.5px;line-height:1.85}
.ts-example-h{font-size:15px}
.ts-example-cat{font-size:14.5px}
.ts-example-txt{font-size:13px;line-height:1.8}
.ts-link{font-size:15px}
.ts-welcome-s{font-size:13.5px}
.ts-login-note{font-size:12px}
/* チェックリストの文字の大きさは、このファイルの下の
 * 「チェックリスト」の並びで直接指定している。ここに書くと、
 * 後から来るあちらの指定に負けて効かない。 */
.ts-contact-h{font-size:13px}
.ts-contact-body{font-size:13px;line-height:1.9}
.ts-contact-co{font-size:14px}
/* 英語と注記も、他と同じ比率で大きくする（ここから漏らすと英語だけ極端に小さくなる） */
.ts-contact-en{font-size:11.5px}
.ts-contact-foot{font-size:11.5px}
.ts-contact-lbl{min-width:46px}
/* dummy media */
.dph-cap{font-size:11px}
.dchart-t{font-size:12.5px}
.dcap{font-size:10.5px}
/* footer */
.ftx{font-size:11px}
.ft-lnk{font-size:12px;padding:5px 13px}
.ft-nr{font-size:13px}
/* banner */
.banner-title{font-size:17px}
.banner-sub{font-size:11px}
/* editor form labels stay usable */
.fl2{font-size:13px}
.fi{font-size:13px}

@media(max-width:640px){
  .nav{flex-direction:column;align-items:stretch;gap:6px;padding:8px 10px}
  .nlinks{flex-wrap:wrap;justify-content:center;gap:5px}
  .nl{font-size:13.5px;padding:7px 10px}
  .lay{grid-template-columns:1fr!important;gap:14px;padding:12px}
  .dmedia,.g4,.g3,.g2{grid-template-columns:1fr!important}
  .banner-title{font-size:15px}
  .banner-note{display:none;display:none}
  .ts-welcome-t{font-size:22px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gd-wrap{overflow-x:auto}
}

/* ===== HEADER/HOME FINE-TUNE ===== */
.nlt{font-size:15px;line-height:1.25;white-space:nowrap}
.nlm{width:28px;height:28px;font-size:12px}
.nlogo{gap:8px;flex-shrink:0}
/* welcome title on one line for desktop/tablet; wraps only on small phones */
@media(min-width:561px){.ts-welcome-t{white-space:nowrap}}
@media(max-width:560px){.ts-welcome-t{white-space:normal;font-size:22px}}
/* keep home wider on tablet too */
@media(max-width:820px){.top-simple{max-width:100%}}

/* ===== dedicated living pages match card colors ===== */
/* 1. 赴任前準備 = mint */
#pg-living-prep .ph{background:linear-gradient(120deg,#E6FAEE,#fff)!important;border:1px solid #C4EED6!important}
#pg-living-prep .phi{background:#fff!important;border:1px solid #C4EED6!important}
#pg-living-prep .phi svg{stroke:#2B8853!important}
#pg-living-prep .pht{color:#2B8853!important}
#pg-living-prep .phs{color:#2B8853!important}
#pg-living-prep .pl{color:#2B8853;background:#E6FAEE}
#pg-living-prep .cbx{border-color:#2B8853}
#pg-living-prep .cbx.chk{background:#2B8853;border-color:#2B8853}
#pg-living-prep .tab.on{background:#E6FAEE;color:#2B8853;border-color:#C4EED6}
/* 2. 来日後の手続き = lavender */
#pg-living-detail .ph{background:linear-gradient(120deg,#EBE6FA,#fff)!important;border:1px solid #D0C4EE!important}
#pg-living-detail .phi{background:#fff!important;border:1px solid #D0C4EE!important}
#pg-living-detail .phi svg{stroke:#4F319B!important}
#pg-living-detail .pht{color:#4F319B!important}
#pg-living-detail .phs{color:#4F319B!important}
#pg-living-detail .pl{color:#4F319B;background:#EBE6FA}
#pg-living-detail .cbx{border-color:#4F319B}
#pg-living-detail .cbx.chk{background:#4F319B;border-color:#4F319B}
#pg-living-detail .tab.on{background:#EBE6FA;color:#4F319B;border-color:#D0C4EE}

/* ===== breadcrumb links + category badge ===== */
.bcl{cursor:pointer;color:#185FA5;text-decoration:none}
.bcl:hover{text-decoration:underline}
.cat-wrap{margin:14px 16px 12px}
.cat-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;line-height:1.5}
.cat-tag svg{display:block}
@media(max-width:640px){.cat-wrap{margin:12px 12px 10px}}

/* ===== hero photo (basic-top / living-top) ===== */
.hero-photo{border-radius:12px;height:150px;border:1px solid var(--border);margin:0 0 14px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-size:cover;background-position:center}
.hero-photo.basic{background:linear-gradient(135deg,#E1F0FF,#f6faff)}
.hero-photo.living{background:linear-gradient(135deg,#E6FAEE,#f6fff9)}
.hero-photo .hp-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(242,73,121,.58);color:#fff;font-size:11.5px;padding:6px 12px}
.hero-photo .hp-ic{opacity:.55}
@media(max-width:640px){.hero-photo{height:120px}}.ph-body{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:center}.ph-body .ph-text{min-width:0}.ph-body .hero-photo{margin:0;width:100%;height:160px}@media(max-width:820px){.ph-body{grid-template-columns:1fr 220px}.ph-body .hero-photo{height:130px}}@media(max-width:640px){.ph-body{grid-template-columns:1fr;gap:10px}.ph-body .hero-photo{height:160px;order:2}.ph-body .ph-text{order:1}}

/* ================================================================
   ここから下は本実装で足したもの。
   プロトタイプは静的なモックのため、実際の動作に要る部品がない。
   ================================================================ */

/* ---- リンクの既定 ---- */
a{color:inherit;text-decoration:none}
.nl,.ft-lnk,.ts-link,.sbl,.cd,.gb-card,.news-item,.rk-item,.bmi,.pnb,.tab{text-decoration:none}

/* ---- フォームをボタンに見せる（ログアウト・言語切替）---- */
.inline-form{display:inline}
.inline-form button{font:inherit;cursor:pointer}

/* ---- お知らせ・エラーの帯 ---- */
.flash{font-size:11px;border-radius:8px;padding:9px 12px;margin-bottom:10px;border:1px solid}
.flash.ok{background:#E6FAEE;border-color:#C4EED6;color:#1f6b42}
.flash.err{background:#FFE4E7;border-color:#F7C9CF;color:#C1466B}

/* ---- 検索結果 ---- */
.sr{display:flex;flex-direction:column;gap:7px}
.sr-item{background:#fff;border:1px solid var(--border);border-radius:9px;padding:9px 12px}
.sr-item:hover{border-color:#378ADD}
.sr-t{font-size:11.5px;font-weight:700;color:#F24979;margin-bottom:2px}
.sr-x{font-size:10.5px;color:var(--text2);line-height:1.6}
.sr-x mark{background:#FFF3D6;color:#A87A12;padding:0 2px;border-radius:2px}
.sr-empty{font-size:11px;color:var(--text3);padding:14px 0}

/* ---- お知らせ ----
 * プロトタイプにお知らせの一覧・詳細の画面が無い（pg-topic は「項目」の詳細）。
 * そこで一覧は検索結果（.sr）、本文は項目の詳細（.ph / .gd-p / .pn）を
 * そのまま使い、ここで足すのは種別ラベルと日付を1行に並べる調整だけにする。
 */
.nw-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text3);margin-bottom:4px}
.ph .nw-meta{font-size:12.5px;margin-bottom:5px}

/* ---- 本文ブロック ---- */
.bd-img{width:100%;border-radius:8px;border:1px solid var(--border);margin-bottom:10px;display:block}

/* ---- 自動翻訳ウィジェットをナビになじませる ---- */
.gtranslate_wrapper{display:inline-flex;align-items:center}
.gtranslate_wrapper select{font-family:inherit;font-size:11px;padding:4px 7px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.gtranslate_wrapper select option{color:var(--text);background:#fff}

/* ---- 右から左（アラビア語など）---- */
.translated-rtl .lay{direction:rtl}
.translated-rtl .nav,.translated-rtl .ft{flex-direction:row-reverse}
.translated-rtl .bc{text-align:right}
.translated-rtl .sh,.translated-rtl .gd-sec{border-left:none;border-right:3px solid #378ADD;padding-left:0;padding-right:9px}
.translated-rtl .ph,.translated-rtl .gd-hero,.translated-rtl .gb-card{flex-direction:row-reverse}
.translated-rtl .gd-tbl th,.translated-rtl .gd-tbl td{text-align:right}
.rtl-notice{position:fixed;left:0;right:0;bottom:0;background:#185FA5;color:#fff;font-size:10px;padding:6px 12px;text-align:center;z-index:200}

/* ---- 先頭へ戻る（プロトタイプはJSで出し入れしている）---- */
.backtop{position:fixed;right:16px;bottom:16px;z-index:150;display:none;align-items:center;gap:6px;
  background:#378ADD;color:#fff;border:none;border-radius:24px;padding:8px 14px;font-size:11px;
  font-weight:700;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.2)}
.backtop.show{display:flex}
.backtop:hover{background:#185FA5}
.backtop-label{white-space:nowrap}



/* ---- 言語切替（15言語をまとめた自前のプルダウン）----
 * 見た目はデザインの .ts-lang select に合わせる。
 * GTranslate 本体のプルダウンは使わないので画面外へ出す。
 * ただし翻訳そのものは本体が行うため、DOMからは外さないこと。
 */
.jen-lang{display:inline-flex}
.jen-lang select{font-family:inherit;font-size:12px;color:var(--text);background:#fff;
  border:1px solid #F6C2D3;border-radius:var(--r);padding:7px 30px 7px 11px;cursor:pointer;
  appearance:none;-webkit-appearance:none;min-width:230px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F24979' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.jen-lang select:hover{border-color:#F24979}
.jen-lang select:focus{outline:none;border-color:#F24979;box-shadow:0 0 0 2px rgba(242,73,121,.15)}
.gtranslate_wrapper{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.jen-lang{flex:1}.jen-lang select{min-width:0;width:100%}}

/* ---- カードの色 ----
 * 支給デザインは nth-child で色を決め打ちしているが、その並びは
 * 明度・彩度が揃っておらず、項目が増えると色も足りなくなる。
 * このサイトでは OKLCH の計算式で20色を生成する方式を採っているため、
 * 色はテンプレート側から1件ずつ style で当てている（app/Core/Palette.php）。
 * ここでは、決め打ちのルールを外した分の土台だけを用意する。
 */
.cd{background:var(--c-bg,#fff);border-color:var(--c-border,var(--border))}
.cd:hover{background:var(--c-hover,#f7f7f7);filter:none}
.cd .ct{color:var(--c-accent,var(--text))}
.cd .cs{color:var(--c-accent,var(--text2));opacity:.82}
.cd .cd-h svg{stroke:var(--c-accent,#378ADD)}

.gb-card{border-left:4px solid var(--c-accent,transparent);
  background:linear-gradient(90deg,var(--c-bg,#fff),#fff 60%)}
.gb-card:hover{background:linear-gradient(90deg,var(--c-hover,#f7f7f7),#fff 70%)}
.gb-card .gb-ic{background:var(--c-bg,#f5f9fd);border:1px solid var(--c-border,transparent)}
.gb-card .gb-t{color:var(--c-accent,#F24979)}

/* ---- ヘッダーの言語切替 ----
 * TOPやマイページの大きな切替（.jen-lang）と同じ部品だが、
 * ピンクの帯に載るので配色と大きさを合わせ直す。
 */
.jen-lang-nav{display:inline-flex;align-items:center;margin-left:5px}
.jen-lang-nav .jen-lang select{font-size:11px;padding:5px 20px 5px 7px;min-width:0;max-width:104px;
  color:#fff;background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position:right 7px center;text-overflow:ellipsis}
.jen-lang-nav .jen-lang select:hover{background-color:rgba(255,255,255,.24);border-color:rgba(255,255,255,.7)}
.jen-lang-nav .jen-lang select:focus{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.jen-lang-nav .jen-lang select option{color:var(--text);background:#fff}
@media(max-width:640px){.jen-lang-nav{margin-left:0}.jen-lang-nav .jen-lang select{max-width:none}}

/* ---- ナビが揺れないようにする ----
 * .nl はマウスを載せると太字（font-weight:600）になる。欧文では
 * 文字幅が2〜5px広がるため、余白の少ないヘッダーでは折り返しが起き、
 * 項目が上下にずれる。ずれるとカーソルが外れて元に戻り、また載って…と
 * 往復してちらつく。
 *
 * そこで、見えない位置に太字の同じ文字を置いて、あらかじめ太字の幅を
 * 確保しておく。こうすると通常時も太字時も幅が変わらない。
 */
.nl{display:inline-block}
.nl::after{content:attr(data-label);display:block;height:0;overflow:hidden;
  font-weight:600;visibility:hidden;pointer-events:none}

/* 折り返しが起きたときに行が詰まりすぎないようにする */
.nlinks{row-gap:4px}

/* ---- 箇条書き・リンク集・動画 ----
 * 箇条書きとリンク集は、プロトタイプにある部品をそのまま使っている。
 *   .ci / .cbx    … pg-living-prep のチェックリスト
 *   .lk / .lk-url … 表の中のリンク。表の外でも使えるよう、間隔だけここで足す
 * 動画はプロトタイプに元が無い。再生する前から動画サイトに
 * 会員の閲覧が伝わらないよう、埋め込まずに押したら別のタブで開くカードにしている。
 */
.ci-list,.lk-list,.vd-list{margin:0 0 12px}
.ci-t{flex:1;line-height:1.7;font-size:11.5px}
/* 押してもチェックは残せないので、押せるようには見せない */
.ci .cbx{cursor:default}

.lk-item{padding:7px 0;border-bottom:1px solid #f2f2f2}
.lk-item:last-child{border-bottom:none}
.lk-item .lk{font-size:11.5px;font-weight:600;color:#2E6FB0}
.lk-item .lk:hover{text-decoration:underline}
.lk-item .nolink{color:var(--text3);font-weight:400}
.lk-item .lk-url{display:block;margin-top:1px}
.lk-note{font-size:10px;color:var(--text2);line-height:1.6;margin-top:2px}

.vd-list{display:block}
.vd{display:flex;gap:11px;align-items:center;border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;margin-bottom:8px;background:#fff;text-decoration:none}
.vd:hover{border-color:#B5D4F4}
.vd-thumb{width:74px;min-width:74px;height:52px;border-radius:7px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center}
.vd-body{min-width:0;overflow:hidden}
.vd-t{display:block;font-size:11.5px;font-weight:700;line-height:1.5}
.vd-svc{display:inline-block;font-size:9px;padding:1px 6px;border-radius:20px;
  background:#EAF2FB;color:#2E6FB0;border:1px solid #C4D9EE;margin:3px 0 2px}
.vd .lk-url{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.vd-thumb{width:56px;min-width:56px;height:42px}}


/* ---- チェックリスト ----
 * 支給された見本（JEN_書類チェックリスト）の作りに合わせつつ、
 * 色と字の大きさはこのサイトのものに揃える。
 * 見本は独自の配色を持っていたが、記事の中に置く以上、
 * 前後の本文から浮かないほうがよい。
 */
.cl{margin-bottom:14px}

/* 進み具合 */
.cl-prog{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 13px;margin-bottom:10px}
.cl-prog-txt{font-size:12.5px;color:var(--text2);font-weight:600;white-space:nowrap}
.cl-prog-txt b{color:#185FA5;font-size:15px}
.cl-prog-bar{flex:1;min-width:110px;height:8px;background:#E6F1FB;border-radius:999px;overflow:hidden}
.cl-prog-fill{display:block;height:100%;width:0;background:#378ADD;border-radius:999px;transition:width .3s ease}
.cl-reset{border:1px solid var(--border);background:#fff;color:var(--text2);cursor:pointer;
  font-size:12px;padding:5px 11px;border-radius:var(--r);font-family:inherit}
.cl-reset:hover{background:#F3F9FE;color:#185FA5;border-color:#B5D4F4}

/* 一覧 */
.cl-list{display:flex;flex-direction:column;gap:7px}
.cl-item{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  background:#fff;border:1px solid var(--border);border-radius:9px;padding:10px 12px}
.cl-item:hover{border-color:#B5D4F4;background:#FBFDFF}

/* 本物のチェック箱は隠し、見た目は .cl-box が受け持つ */
.cl-cbx{position:absolute;opacity:0;width:0;height:0}
.cl-box{width:19px;height:19px;min-width:19px;margin-top:1px;border:2px solid #B5D4F4;border-radius:5px;
  background:#fff;position:relative}
.cl-cbx:checked + .cl-box{background:#2B8853;border-color:#2B8853}
.cl-cbx:checked + .cl-box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cl-cbx:focus-visible + .cl-box{outline:2px solid #378ADD;outline-offset:2px}
.cl-cbx:checked ~ .cl-body .cl-name{color:var(--text3);text-decoration:line-through}

.cl-body{flex:1;min-width:0}
.cl-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cl-name{font-size:14px;font-weight:700;color:var(--text)}
.cl-tag{font-size:11px;color:#185FA5;background:#E6F1FB;border:1px solid #B5D4F4;
  border-radius:20px;padding:1px 8px;white-space:nowrap}
.cl-desc{display:block;font-size:12.5px;color:var(--text2);line-height:1.75;margin-top:3px}

/* 詳細（ラベルと値の組）
 *
 * ラベルの幅は決め打ちにしない。日本語の「取得先」と英語の
 * 「Where to obtain it」では倍以上ちがい、固定にするとどちらかで
 * 値の頭がそろわなくなる。max-content にすると、その言語で
 * 一番長いラベルに合わせて列幅が決まる。
 * 行を格子の一員にするため .cl-d は display:contents にする。
 */
.cl-details{display:grid;grid-template-columns:max-content 1fr;gap:0 10px;
  margin-top:6px;border-top:1px dashed var(--border);padding-top:5px}
.cl-d{display:contents;font-size:11.5px;line-height:1.7}
.cl-dl{color:var(--text3)}
.cl-dv{color:var(--text2);word-break:break-word}
a.cl-dv{color:#185FA5;text-decoration:none}
a.cl-dv:hover{text-decoration:underline}

@media(max-width:640px){
    /* 狭い画面ではラベルと値を上下に並べる */
    .cl-details{grid-template-columns:1fr;gap:0}
}

/* ---- 印刷 ----
 * 項目ページの「印刷」から刷ったときの体裁。
 *
 * 画面用のまま刷ると、写真バナー・ナビ・サイドバー・言語プルダウンが
 * 紙の大半を占めて本文が数行しか載らない。紙に要るのは
 * 「どの区分の何番の項目か」と本文だけなので、それ以外は落とす。
 *
 * 色は落とさない。項目ごとの色が見出しに付いていることで、
 * 刷ったあとでも何の項目かを見分けられるため。
 */
@media print {
    /* 地色や色つきの帯を、印刷でも出す（既定では省かれる） */
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

    body{background:#fff}
    #app{max-width:none;margin:0;padding:0}

    /* 紙に要らないもの */
    .banner,.nav,.bc,.backtop,.ft,.jen-lang,.jen-lang-nav,
    .gtranslate_wrapper,.print-row,.pn,.sb{display:none !important}

    /* 本文を紙幅いっぱいに */
    .lay{display:block}
    .lay > div{width:auto}

    .cat-wrap{margin:0 0 6px}
    .ph{border:none;padding:0 0 8px;margin:0 0 10px;border-bottom:2px solid #ddd}
    .pht{font-size:17px}

    /* 途中で切れると読みにくいものは、まとまりごと次の紙へ送る */
    .gd-sec,.dph,.dchart,.gd-tbl,.ci,.lk-item,.vd{break-inside:avoid;page-break-inside:avoid}
    .gd-sec{break-after:avoid;page-break-after:avoid}

    /* 押せない紙の上では、リンク先そのものが情報になる */
    .lk-url{display:block !important;font-size:9px}
    .vd .lk-url{white-space:normal;overflow:visible}
    .vd{border:1px solid #ddd}

    /*
     * チェックリストは、付けたチェックのまま刷る。
     * 進み具合の帯とリセットは紙に要らない。
     */
    .cl-prog{display:none !important}
    .cl-item{break-inside:avoid;page-break-inside:avoid;border:1px solid #ddd}
    .cl-item:hover{background:#fff}
    .cl-box{border-color:#888}
    .cl-cbx:checked + .cl-box{background:#2B8853;border-color:#2B8853}

    .gd-p{font-size:11px;line-height:1.8}
    .gd-tbl{font-size:10px}
}