/* comicoco. — 確定デザイン v7（_diag/comicoco_design_mock_20261029/v7/index.html）の CSS を逐語コピー（見本用 .mockbar のみ除外）。2026-10-29 */
:root{
  --bg:#FFF7EA; --paper:#FFFFFF; --ink:#26213A; --ink2:#5E5873; --ink3:#8E889F;
  --orange:#FF6B2C; --orange-d:#E2531A; --mint:#22BFAE; --mint-l:#D7F5F0; --sun:#FFD23F; --sun-l:#FFF1B8;
  --peach:#FFE3D3; --line:#26213A; --soft:#F4EDE0;
  --r:16px; --r-s:10px; --sh:4px 4px 0 var(--ink); --sh-s:3px 3px 0 var(--ink);
  --round:"Kanit","M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
.dim{color:var(--ink3);font-weight:500}


/* header */
.hd{background:var(--sun);border-bottom:2.5px solid var(--ink)}
.hd-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 16px}
.logo{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mark{width:40px;height:40px;display:block}
.mark svg{width:100%;height:100%}
.lt{display:flex;flex-direction:column;line-height:1.1}
.lt b{font-family:var(--round);font-weight:800;font-size:24px;letter-spacing:.02em;color:var(--ink)}
.lt b i{font-style:normal;color:var(--orange);margin-left:1px}
.lt small{font-size:10.5px;font-weight:700;color:var(--ink2);margin-top:2px}
.pcnav{display:none;gap:6px;margin-left:12px}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.sbtn{width:40px;height:40px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);color:var(--ink);display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink)}
.sbtn svg{width:20px;height:20px}
.langsw{font-family:var(--round);font-weight:800;font-size:13px;height:40px;min-width:40px;padding:0 10px;border-radius:999px;background:var(--ink);color:var(--sun);display:grid;place-items:center}
.spnav{display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none}
.spnav::-webkit-scrollbar{display:none}
.nv{flex:0 0 auto;font-family:var(--round);font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;background:var(--paper);border:2px solid var(--ink)}
.nv.on{background:var(--ink);color:var(--paper)}

/* layout */
.wrap{max-width:1200px;margin:0 auto;padding:0 16px 24px}
.sec{margin-top:32px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.sec-h h2{font-family:var(--round);font-weight:800;font-size:21px;display:flex;align-items:center;gap:8px}
.hic{width:32px;height:32px;border-radius:10px;border:2px solid var(--ink);display:grid;place-items:center;font-size:16px;line-height:1;transform:rotate(-6deg)}
.hic-o{background:var(--orange);color:#fff}.hic-m{background:var(--mint);color:#fff}.hic-y{background:var(--sun);color:var(--ink)}
.sec-link{font-family:var(--round);font-weight:700;font-size:13px;color:var(--orange-d)}
.sec-note{font-size:13px;color:var(--ink2);font-weight:700}
.more{display:block;margin:18px auto 0;width:max-content;max-width:100%;font-family:var(--round);font-weight:800;font-size:14px;padding:10px 22px;border-radius:999px;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--sh-s)}
.sp{display:inline}

/* hero */
.hero{margin-top:20px;background:var(--paper);border:2.5px solid var(--ink);border-radius:22px;box-shadow:var(--sh);padding:18px 16px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:var(--mint-l);z-index:0}
.hero::before{content:"";position:absolute;right:40px;bottom:-40px;width:90px;height:90px;border-radius:50%;background:var(--peach);z-index:0}
.hero-txt,.search{position:relative;z-index:1}
.kick{display:inline-block;font-family:var(--round);font-weight:800;font-size:12px;background:var(--orange);color:#fff;padding:2px 10px;border-radius:999px}
.hero h1{font-family:var(--round);font-weight:800;font-size:21px;line-height:1.45;margin-top:8px}
.search{display:flex;margin-top:14px;border:2px solid var(--ink);border-radius:999px;background:var(--bg);overflow:hidden}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:11px 16px;font-size:15px;outline:none;color:var(--ink)}
.search button{border:0;background:var(--ink);color:var(--sun);font-family:var(--round);font-weight:800;padding:0 18px;flex:0 0 auto}

/* segmented */
.seg{display:flex;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;font-family:var(--round);font-weight:700;font-size:13px;padding:4px 12px;border-radius:999px;color:var(--ink2)}
.seg button.on{background:var(--orange);color:#fff}

/* cards */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-s);overflow:hidden;min-width:0;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.thumb{position:relative;aspect-ratio:4/3;background:var(--soft);border-bottom:2px solid var(--ink)}
.thumb{overflow:hidden}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.medal{position:absolute;top:6px;left:6px;z-index:2;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--round);font-weight:800;font-size:14px;background:var(--paper);box-shadow:2px 2px 0 var(--ink)}
.medal.gold{background:var(--sun)}.medal.silver{background:#DCE3EE}.medal.bronze{background:#F7B68A}
.bds{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:3px}
.bds-inline{position:static;flex-wrap:wrap}
.bd{font-family:var(--round);font-weight:800;font-size:10.5px;line-height:1;padding:4px 7px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper)}
.bd-new{background:var(--orange);color:#fff}.bd-en{background:var(--mint);color:#fff}.bd-type{background:var(--paper)}.bd-rank{background:var(--sun)}
.cbody{padding:9px 10px 10px;display:flex;flex-direction:column;gap:3px;flex:1}
.ctitle{font-weight:700;font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em;word-break:break-all}
.ccircle{font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmeta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:12px;font-weight:700}
.star{color:var(--orange-d)}
.dl{color:var(--ink2);margin-left:auto}
.card--big .ctitle{font-size:15px}
.grid-rank .card--big{grid-column:1/-1}
.grid-rank .card--big .medal{width:38px;height:38px;font-size:18px}

.row-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:64%;gap:14px;overflow-x:auto;padding:2px 6px 8px 2px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-snap-type:x mandatory;scrollbar-width:none}
.row-scroll::-webkit-scrollbar{display:none}
.row-scroll .card{scroll-snap-align:start}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--round);font-weight:700;font-size:14px;padding:6px 12px;border-radius:12px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.tag small{font-size:11px;background:rgba(38,33,58,.12);border-radius:999px;padding:0 6px}
.t1{background:var(--sun-l)}.t2{background:var(--mint-l)}.t3{background:var(--peach)}.t4{background:var(--paper)}

/* circles + en banner */
.two{display:grid;gap:0 24px}
.cirs{display:grid;gap:8px}
.cir{display:flex;align-items:center;gap:10px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:8px 12px}
.cav{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--mint-l);border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--round);font-weight:800}
.cn{font-weight:700;font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc{font-weight:800;color:var(--ink3);font-size:20px}
.enbn{display:flex;align-items:center;gap:12px;background:var(--mint);color:#fff;border:2.5px solid var(--ink);border-radius:18px;box-shadow:var(--sh);padding:14px 16px}
.enbn b{display:block;font-family:var(--round);font-weight:800;font-size:18px}
.enbn small{font-size:12px;font-weight:600;opacity:.95}
.enbn-b{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:var(--sun);color:var(--ink);border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--round);font-weight:800;font-size:18px;transform:rotate(-6deg)}
.enbn .cc{color:#fff;margin-left:auto}

/* breadcrumb */
.bc{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);margin-top:14px;white-space:nowrap;overflow:hidden}
.bc a{font-weight:700}
.bc em{font-style:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* work page */
.wk{display:grid;gap:18px;margin-top:12px}
.wk-media{display:flex;flex-direction:column;gap:12px;min-width:0}
.cover{background:var(--paper);border:2.5px solid var(--ink);border-radius:20px;box-shadow:var(--sh);padding:8px;overflow:hidden}
.cover img{width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:12px;margin:0 auto}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--orange);color:#fff;border:2.5px solid var(--ink);border-radius:999px;box-shadow:var(--sh);padding:15px 20px;font-family:var(--round);font-weight:800;font-size:18px;letter-spacing:.04em;margin-top:2px}
.cta svg{width:22px;height:22px}
.cta:hover{background:var(--orange-d)}
.cta:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.sec .cta{margin-top:16px}
.wk-main{min-width:0}
.wk-title{font-family:var(--round);font-weight:800;font-size:22px;line-height:1.45;margin-top:10px;word-break:break-all}
.wk-circle{margin-top:6px;font-weight:700;font-size:14px}
.wk-circle a{color:var(--orange-d);border-bottom:2px solid var(--sun)}
.catch{margin-top:12px;font-size:13.5px;color:var(--ink2);background:var(--paper);border-left:4px solid var(--mint);border-radius:0 10px 10px 0;padding:8px 12px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-top:16px}
.st-lang{grid-column:1/-1}
.st{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:10px 12px;min-width:0}
.st-rate{grid-column:1/-1;background:var(--sun-l)}
.stl{font-size:11.5px;font-weight:700;color:var(--ink2)}
.stv{font-family:var(--round);font-weight:800;font-size:22px;line-height:1.3}
.st-rate .stv{font-size:30px;color:var(--orange-d)}
.sts{font-size:11.5px;color:var(--ink2);font-weight:600}
.rbs{display:grid;gap:3px;margin-top:8px}
.rb{display:grid;grid-template-columns:30px 1fr 34px;align-items:center;gap:8px;font-size:12px;font-weight:700}
.rb i{height:10px;border-radius:999px;background:var(--paper);border:1.5px solid var(--ink);overflow:hidden}
.rb i b{display:block;height:100%;background:var(--orange)}
.rb em{font-style:normal;text-align:right;color:var(--ink2)}
.lgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.lg{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--mint-l);border:1.5px solid var(--ink)}

.info{background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;overflow:hidden}
.info>div{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:11px 14px;border-top:1.5px dashed #CFC6B5}
.info>div:first-child{border-top:0}
.info dt{font-size:12.5px;font-weight:800;color:var(--ink2);font-family:var(--round)}
.info dd{font-size:14px;font-weight:600;min-width:0;word-break:break-all}
.info dd a{color:var(--orange-d)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--sun-l);border:1.5px solid var(--ink);color:var(--ink)!important}
.note{margin-top:12px;font-size:12.5px;color:var(--ink2);background:var(--paper);border:1.5px dashed var(--ink3);border-radius:12px;padding:10px 12px}

.smps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.smp{display:block;background:var(--paper);border:2px solid var(--ink);border-radius:14px;overflow:hidden;aspect-ratio:4/3;padding:4px}
.smp img{width:100%;height:100%;object-fit:contain}
.smp:first-child{grid-column:1/-1}

/* footer */
.ft{background:var(--ink);color:#EDE8F5;margin-top:36px;border-top:2.5px solid var(--ink);position:relative}
.ft::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:radial-gradient(circle at 10px 14px,var(--ink) 9px,transparent 10px) repeat-x;background-size:20px 14px}
.ft-in{max-width:1200px;margin:0 auto;padding:28px 16px 24px}
.ft-logo{font-family:var(--round);font-weight:800;font-size:22px;color:var(--sun)}
.ft-logo i{font-style:normal;color:var(--orange)}
.ft-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ft-tags a{font-size:12.5px;padding:3px 10px;border-radius:999px;border:1.5px solid #5A5470}
.ft-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;font-size:13px;font-weight:700}
.pr{margin-top:16px;font-size:11.5px;color:#A9A2BD}
.cp{margin-top:4px;font-size:11px;color:#7D7792}

/* SP bottom nav */
.bnav{position:sticky;margin:0 12px;bottom:12px;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper);border:2.5px solid var(--ink);border-radius:20px;box-shadow:var(--sh);padding:6px}
.bnav a{display:flex;flex-direction:column;align-items:center;font-size:10.5px;font-weight:800;font-family:var(--round);color:var(--ink2);padding:4px 0;border-radius:14px;line-height:1.2}
.bnav a span{font-size:18px;line-height:1.2}
.bnav a.on{background:var(--sun);color:var(--ink)}

/* ===== tablet / PC ===== */
@media (min-width:768px){
  .sp{display:none}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .row-scroll{grid-auto-columns:calc((100% - 54px)/4);margin:0;padding:2px 6px 10px 2px}
  .smps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  body{font-size:15.5px}
  .spnav,.bnav{display:none}
  .pcnav{display:flex}
  .hd-in{padding:14px 24px}
  .wrap{padding:0 24px 40px}
  .ft-in{padding:32px 24px 40px}
  .hero{display:grid;grid-template-columns:1fr 440px;align-items:center;gap:24px;padding:26px 30px}
  .hero h1{font-size:28px}
  .search{margin-top:0}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .row-scroll{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;gap:20px;overflow:visible;padding:0}
  .grid-rank{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid-rank .card--big{grid-column:span 2;grid-row:span 2}
  .grid-rank .card--big .thumb{aspect-ratio:auto;flex:1 1 auto;min-height:0}
  .grid-rank .card--big .thumb img{position:absolute;inset:0}
  .grid-rank .card--big .cbody{flex:0 0 auto}
  .grid-rank .card--big .ctitle{font-size:18px;min-height:auto}
  .sec{margin-top:40px}
  .two{grid-template-columns:1.4fr 1fr;align-items:start}
  .wk{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:start;margin-top:18px}
  .wk-media{position:sticky;top:44px}
  .wk-title{font-size:26px;margin-top:12px}
  .st-rate{grid-column:1/-1}
  .st-lang{grid-column:1/-1}
  .info>div{grid-template-columns:120px 1fr;padding:13px 20px}
  .sec .cta{max-width:460px;margin-left:auto;margin-right:auto}
}
.lt b .dot,.ft-logo .dot{color:#FF6B2C}

/* ===== 以下は実サイトで追加した部品（見本の色・枠・角丸・書体の変数だけを使う） ===== */
.seg a,.seg button{display:block;border:0;background:transparent;font-family:var(--round);font-weight:700;font-size:13px;padding:4px 12px;border-radius:999px;color:var(--ink2)}
.seg a.on,.seg button.on{background:var(--orange);color:#fff}
.rk-pane[hidden]{display:none}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.pager a,.pager span{font-family:var(--round);font-weight:800;font-size:14px;min-width:40px;height:40px;padding:0 12px;display:grid;place-items:center;border-radius:999px;background:var(--paper);border:2px solid var(--ink)}
.pager a{box-shadow:2px 2px 0 var(--ink)}
.pager .cur{background:var(--ink);color:var(--paper)}
.pager .gap{border:0;background:transparent;min-width:auto;padding:0 2px}
.cirs-all{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.cir .cnt{font-size:12px;font-weight:700;color:var(--ink3);flex:0 0 auto}
.empty{background:var(--paper);border:2px dashed var(--ink3);border-radius:14px;padding:16px;font-size:14px;color:var(--ink2);font-weight:700}
.prose{background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;padding:18px 16px;margin-top:18px;font-size:14.5px;line-height:1.85}
.prose h1{font-family:var(--round);font-weight:800;font-size:22px;line-height:1.45;margin-bottom:6px}
.prose h2{font-family:var(--round);font-weight:800;font-size:17px;margin:20px 0 6px}
.prose p,.prose ul{margin-top:8px}
.prose ul{padding-left:1.4em}
.prose a{color:var(--orange-d);border-bottom:2px solid var(--sun)}
.prose input,.prose select,.prose textarea{width:100%;font:inherit;padding:9px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--bg);color:var(--ink);margin-top:4px}
.prose button{font-family:var(--round);font-weight:800;padding:10px 22px;border-radius:999px;background:var(--orange);color:#fff;border:2px solid var(--ink);box-shadow:var(--sh-s);margin-top:12px}
.page-h{font-family:var(--round);font-weight:800;font-size:22px;line-height:1.45;margin-top:16px;word-break:break-all}
.page-sub{font-size:13px;color:var(--ink2);font-weight:700;margin-top:4px}
@media (min-width:1024px){.prose{padding:26px 30px}.page-h{font-size:26px}}
.sec-h h1{font-family:var(--round);font-weight:800;font-size:21px;display:flex;align-items:center;gap:8px;line-height:1.45}