/* =========================================================
   GAME DOCK — main.css   ゲーム画面風 UI
   ========================================================= */
:root{
  --blue:#2f6bff; --blue-d:#1b46c9;
  --cyan:#1fd0ff; --yellow:#ffd02e; --red:#ff4d5e;
  --green:#28d979; --purple:#7c3aed;
  --ink:#16123a; --ink-2:#3a3568;
  --bg:#eef3ff; --card:#ffffff; --line:#e2e8ff;
  --shadow:0 8px 0 rgba(22,18,58,.12);
  --shadow-lg:0 14px 0 rgba(22,18,58,.16);
  --r:18px; --r-lg:26px;
  --pixel:"DotGothic16",monospace;
  --round:"M PLUS Rounded 1c",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--round);color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(47,107,255,.10), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(124,58,237,.10), transparent 40%);
  line-height:1.8;font-weight:500;-webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-d);text-decoration:none}
.wrap{width:min(1080px,92%);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- pixel/RPG bits ---- */
.pixel{font-family:var(--pixel);letter-spacing:.5px}
.badge{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--pixel);font-size:.74rem;line-height:1;
  background:var(--ink);color:#fff;padding:.5em .8em;border-radius:8px;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.badge.y{background:var(--yellow);color:var(--ink)}
.badge.g{background:var(--green);color:#06351c}
.badge.r{background:var(--red);color:#fff}
.tag{display:inline-block;font-size:.78rem;font-weight:700;padding:.25em .7em;border-radius:999px;background:#eaf0ff;color:var(--blue-d)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:800;font-size:1.05rem;padding:.85em 1.5em;border-radius:14px;
  border:none;cursor:pointer;color:#fff;background:var(--blue);
  box-shadow:0 6px 0 var(--blue-d);transition:transform .08s, box-shadow .08s;
  text-align:center;
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--blue-d)}
.btn.line{background:#06c755;box-shadow:0 6px 0 #04913f}
.btn.tel{background:var(--yellow);color:var(--ink);box-shadow:0 6px 0 #d8a800}
.btn.ghost{background:#fff;color:var(--blue-d);box-shadow:0 6px 0 var(--line);border:2px solid var(--line)}
.btn.lg{font-size:1.15rem;padding:1em 1.8em}
.btn.block{display:flex;width:100%}

/* ---- section heading ---- */
.sec{padding:72px 0}
.sec h2{
  font-size:clamp(1.5rem,5vw,2.2rem);font-weight:900;text-align:center;
  margin:0 0 .8em;line-height:1.45;
}
.sec h2 .pixel{display:block;font-size:.8rem;color:var(--blue);margin-bottom:.5em}
.sec .lead{text-align:center;color:var(--ink-2);margin:0 auto 36px;max-width:680px;line-height:1.9}
.sec.alt{background:linear-gradient(180deg,#fff,#f6f9ff)}

/* =====================  HEADER  ===================== */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border-bottom:3px solid var(--ink);
}
.site-header .wrap{display:flex;align-items:center;gap:14px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand .logo-mark{width:42px;height:auto;flex:none}
.brand .logo-txt b{font-size:1.1rem;letter-spacing:.3px;line-height:1;white-space:nowrap}
.brand .logo-txt small{display:block;font-size:.58rem;color:var(--ink-2);font-weight:700;white-space:nowrap}
.gnav{margin-left:auto;display:flex;align-items:center;gap:13px}
.gnav a{font-weight:800;color:var(--ink);font-size:.86rem;white-space:nowrap}
.gnav a:hover{color:var(--blue)}
.gnav .btn{padding:.55em .9em;font-size:.82rem;white-space:nowrap}
.nav-toggle{display:none;margin-left:auto;background:var(--ink);color:#fff;border:none;border-radius:10px;width:46px;height:42px;font-size:1.3rem}
@media(max-width:1180px){
  .gnav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:3px solid var(--ink);padding:16px 6%;gap:12px;display:none}
  .gnav.open{display:flex}
  .gnav a{padding:.5em 0;border-bottom:1px dashed var(--line);font-size:1rem;white-space:normal}
  .nav-toggle{display:block}
}

/* =====================  HERO（スタート画面風）  ===================== */
.hero{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:
    radial-gradient(circle at 50% 120%, var(--purple), transparent 60%),
    linear-gradient(160deg,#2540c8,#2f6bff 55%,#1fd0ff);
  border-bottom:5px solid var(--ink);
}
.hero::before{ /* pixel star field */
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:
    radial-gradient(2px 2px at 20% 30%,#fff,transparent),
    radial-gradient(2px 2px at 70% 20%,#fff,transparent),
    radial-gradient(2px 2px at 40% 70%,#fff,transparent),
    radial-gradient(2px 2px at 85% 60%,#fff,transparent),
    radial-gradient(2px 2px at 10% 80%,#fff,transparent);
  background-size:cover;animation:twinkle 3s steps(2) infinite;
}
@keyframes twinkle{50%{opacity:.15}}
.hero .wrap{position:relative;padding:48px 0 56px}
.hero .press{font-family:var(--pixel);font-size:.85rem;letter-spacing:2px;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero h1{font-size:clamp(1.8rem,7vw,3.2rem);font-weight:900;margin:.3em 0 .2em;text-shadow:0 4px 0 rgba(0,0,0,.25);line-height:1.25}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero p.sub{font-size:clamp(1rem,3.5vw,1.25rem);font-weight:700;margin:0 0 1.4em;opacity:.95}
.hero .mascot{width:min(230px,52vw);margin:6px auto 0;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.hero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.hero .stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.hero .stats div{background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.4);border-radius:14px;padding:8px 14px;font-weight:800;font-size:.9rem}
.hero .stats b{display:block;font-size:1.35rem;color:var(--yellow);font-family:var(--pixel)}

/* ticker */
.ticker{background:var(--ink);color:var(--yellow);font-family:var(--pixel);font-size:.78rem;
  white-space:nowrap;overflow:hidden}
.ticker span{display:inline-block;padding:8px 0;animation:slide 22s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =====================  CARDS / GRIDS  ===================== */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g3,.g4,.g2{grid-template-columns:1fr}}

.card{
  background:var(--card);border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px;transition:transform .1s, box-shadow .1s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

/* quest card (機種/症状) */
.quest{display:flex;flex-direction:column;text-align:center;align-items:center}
.quest .ic{width:64px;height:64px;margin-bottom:8px}
.quest h3{margin:.2em 0;font-size:1.1rem;font-weight:900}
.quest p{margin:0;font-size:.85rem;color:var(--ink-2)}
.quest .price{margin-top:10px;font-family:var(--pixel);color:var(--blue);font-size:1rem}
.quest .price s{color:#aab}
.quest .more{margin-top:auto;padding-top:12px;font-weight:800;color:var(--blue);font-size:.9rem}

/* strength */
.str{display:flex;gap:14px;align-items:flex-start}
.str .ic{width:54px;height:54px;flex:none}
.str h3{margin:.1em 0 .2em;font-size:1.05rem;font-weight:900}
.str p{margin:0;font-size:.9rem;color:var(--ink-2)}

/* =====================  郵送フロー（双六/ステージ風）  ===================== */
.flow{counter-reset:step;display:grid;gap:16px}
.flow .step{
  position:relative;background:#fff;border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px 18px 18px 78px;
}
.flow .step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:12px;background:var(--yellow);color:var(--ink);
  font-family:var(--pixel);font-size:1.4rem;display:grid;place-items:center;
  box-shadow:0 4px 0 #d8a800;
}
.flow .step h3{margin:0 0 .2em;font-size:1.05rem;font-weight:900}
.flow .step p{margin:0;font-size:.9rem;color:var(--ink-2)}

/* =====================  料金テーブル  ===================== */
.pricewrap{overflow-x:auto;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);background:#fff}
table.price{width:100%;border-collapse:collapse;min-width:520px}
table.price caption{caption-side:top;text-align:left;font-weight:900;font-size:1.15rem;padding:14px 16px;background:var(--ink);color:#fff;display:flex;gap:8px;align-items:center}
table.price th,table.price td{padding:11px 14px;border-bottom:2px solid var(--line);text-align:left}
table.price thead th{background:#eaf0ff;font-family:var(--pixel);font-size:.82rem;color:var(--blue-d)}
table.price tbody th{font-weight:700}
table.price td.yen{text-align:right;font-family:var(--pixel);color:var(--blue-d);white-space:nowrap}
table.price td.ask{text-align:right;color:var(--red);font-weight:800;white-space:nowrap}
table.price tbody tr:hover{background:#f6f9ff}
.note{background:#fff7e6;border:2px dashed var(--yellow);border-radius:14px;padding:14px 16px;font-size:.9rem;margin-top:16px}
.note b{color:#a8730a}
.note.warn{background:#ffeef0;border-color:var(--red)}
.note.warn b{color:var(--red)}

/* =====================  FAQ  ===================== */
.faq details{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 50px 16px 56px;font-weight:800;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:16px;top:14px;width:30px;height:30px;background:var(--blue);color:#fff;border-radius:8px;display:grid;place-items:center;font-family:var(--pixel)}
.faq summary::after{content:"＋";position:absolute;right:18px;top:16px;font-weight:900;color:var(--blue)}
.faq details[open] summary::after{content:"－"}
.faq .a{padding:0 18px 18px 56px;color:var(--ink-2);font-size:.95rem}

/* =====================  CTA band  ===================== */
.ctaband{background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;text-align:center;border-block:5px solid var(--ink)}
.ctaband .wrap{padding:46px 0}
.ctaband h2{color:#fff;font-size:clamp(1.4rem,5vw,2rem);font-weight:900;margin:0 0 .4em}
.ctaband p{margin:0 0 1.2em;font-weight:700;opacity:.95}
.ctaband .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* =====================  FORM  ===================== */
.form{max-width:680px;margin-inline:auto;background:#fff;border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px}
.form label{display:block;font-weight:800;margin:14px 0 6px}
.form label .req{color:var(--red);font-size:.8rem;margin-left:.3em}
.form input,.form select,.form textarea{width:100%;padding:.8em;border:2px solid var(--line);border-radius:12px;font:inherit;background:#f8faff}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue)}
.form .hint{font-size:.8rem;color:var(--ink-2);margin-top:4px}

/* =====================  FOOTER  ===================== */
.site-footer{background:var(--ink);color:#cdd4ff;margin-top:40px;border-top:5px solid var(--yellow)}
.site-footer .wrap{padding:40px 0 24px}
.site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px}
@media(max-width:980px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-size:.95rem;margin:0 0 10px}
.site-footer a{color:#cdd4ff;display:block;padding:3px 0;font-size:.9rem}
.site-footer a:hover{color:var(--yellow)}
.site-footer .opname{color:#fff;font-weight:800}
.site-footer .legal{font-size:.78rem;opacity:.8;line-height:1.7}
.site-footer .copy{text-align:center;margin-top:26px;font-family:var(--pixel);font-size:.72rem;color:#8b93d8}

/* =====================  sticky mobile CTA  ===================== */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;padding:8px;background:rgba(255,255,255,.95);border-top:3px solid var(--ink);backdrop-filter:blur(6px)}
.sticky-cta .btn{flex:1;padding:.7em;font-size:.95rem}
@media(max-width:860px){.sticky-cta{display:flex}body{padding-bottom:72px}}

/* breadcrumb */
.crumb{font-size:.8rem;color:var(--ink-2);padding:12px 0}
.crumb a{color:var(--blue-d)}

/* page hero (下層) */
.phero{background:linear-gradient(160deg,#2f6bff,#1fd0ff);color:#fff;border-bottom:5px solid var(--ink);text-align:center}
.phero .wrap{padding:34px 0}
.phero h1{font-size:clamp(1.5rem,5vw,2.3rem);font-weight:900;margin:.2em 0;text-shadow:0 3px 0 rgba(0,0,0,.2)}
.phero p{margin:0;font-weight:700;opacity:.95}

.prose{max-width:760px;margin-inline:auto}
.prose h2{font-size:1.4rem;font-weight:900;margin:1.6em 0 .5em;border-left:8px solid var(--yellow);padding-left:.5em}
.prose p{margin:.6em 0}
.prose ul{padding-left:1.2em}

/* =========================================================
   v0.2.0 追加：機種LP・症状LP・地域LP・送客カード
   ========================================================= */

.is-center{text-align:center}
.gd-lead{color:var(--ink-2);margin:0 0 20px;line-height:1.9}
.gd-body{line-height:1.95;margin:24px 0}
.gd-body h2,.gd-body h3{margin-top:1.6em}

/* --- カード（機種・症状・事例の共通） --- */
.gd-cards{
  display:grid;gap:14px;margin:18px 0 28px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.gd-card{
  display:flex;flex-direction:column;gap:4px;
  background:var(--card);border:3px solid var(--ink);border-radius:var(--r);
  padding:14px 16px;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;
}
.gd-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.gd-card h3{margin:0;font-size:1.02rem;line-height:1.4}
.gd-card-price{margin:0;font-family:var(--pixel);color:var(--blue);font-size:1.1rem;font-weight:700}
.gd-card-note{margin:0;font-size:.82rem;color:var(--ink-2);line-height:1.6}
.gd-card-cta{margin-top:auto;padding-top:6px;font-size:.82rem;color:var(--blue);font-weight:700}

/* --- カテゴリナビ --- */
.gd-catnav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 24px}
.gd-catnav-item{
  padding:8px 16px;border:3px solid var(--ink);border-radius:999px;
  background:#fff;color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;
  box-shadow:0 4px 0 rgba(22,18,58,.12);
}
.gd-catnav-item:hover{background:var(--yellow)}
.gd-catnav-item.is-current{background:var(--blue);color:#fff}

/* --- 料金表の補足 --- */
.price .pnote{display:block;font-size:.78rem;color:var(--ink-2);font-weight:400;margin-top:3px;line-height:1.5}
.price td.none{color:#999;font-size:.86rem}
.pcaution{background:#ffeef0;border:2px solid var(--red);border-radius:12px;padding:10px 14px;font-size:.88rem;color:#c1121f;margin:12px 0}
.plead{font-size:.86rem;color:var(--ink-2);margin:8px 0 0}
.gd-pricenav{
  background:#fff;border:2px solid var(--line);border-radius:14px;
  padding:12px 14px;margin:0 0 24px;font-size:.86rem;line-height:2
}
.gd-pricenav a{display:inline-block;margin:0 10px 0 0;color:var(--blue);font-weight:700}

/* --- 手順（機種LP・地域LP） --- */
.gd-flow{counter-reset:gdstep;list-style:none;padding:0;margin:18px 0 28px;display:grid;gap:12px}
.gd-flow li{
  position:relative;background:#fff;border:3px solid var(--ink);border-radius:var(--r);
  padding:14px 16px 14px 58px;box-shadow:var(--shadow);line-height:1.8
}
.gd-flow li::before{
  counter-increment:gdstep;content:counter(gdstep);
  position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:#fff;font-family:var(--pixel);
  display:grid;place-items:center;font-size:1rem
}
.gd-list{line-height:2;padding-left:1.2em}

/* --- 地域リンク --- */
.gd-arealinks{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin:16px 0}
.gd-arealinks-group{background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px 14px}
.gd-arealinks-group h3{margin:0 0 8px;font-size:.9rem;color:var(--blue);font-family:var(--pixel)}
.gd-arealinks-group ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.gd-arealinks-group a{font-size:.86rem;color:var(--ink-2);text-decoration:none}
.gd-arealinks-group a:hover{color:var(--blue);text-decoration:underline}

/* --- 用件はどれですか？（姉妹サイト送客） --- */
.gd-sitekind{
  display:grid;gap:14px;margin:20px 0 14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.gd-sitekind-card{
  position:relative;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
  background:#fff;border:3px solid var(--ink);border-radius:var(--r);
  padding:20px 14px 16px;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow);
}
.gd-sitekind-card.is-link{transition:transform .12s,box-shadow .12s}
.gd-sitekind-card.is-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.gd-sitekind-card.is-current{background:#f6f9ff;border-color:var(--blue)}
.gd-sitekind-emoji{font-size:2rem;line-height:1}
.gd-sitekind-tag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:.68rem;font-weight:700;
  padding:3px 10px;border-radius:999px;white-space:nowrap
}
.gd-sitekind-card h3{margin:0;font-size:1rem}
.gd-sitekind-card p{margin:0;font-size:.8rem;color:var(--ink-2);line-height:1.6}
.gd-sitekind-cta{color:var(--blue);font-weight:700;font-size:.8rem;margin-top:auto!important;padding-top:6px}
.gd-sitekind-card.is-current .gd-sitekind-cta{color:var(--ink-2)}
.gd-sitekind-note{text-align:center;font-size:.8rem;color:var(--ink-2);margin:10px 0 0;line-height:1.7}

/* --- 事例 --- */
.gd-case-thumb img{max-width:100%;height:auto;border-radius:var(--r);border:3px solid var(--ink)}
.gd-pagination{margin-top:24px;text-align:center}
.gd-pagination .page-numbers{
  display:inline-block;padding:6px 12px;margin:0 3px;border:2px solid var(--ink);
  border-radius:10px;background:#fff;color:var(--ink);text-decoration:none;font-weight:700
}
.gd-pagination .page-numbers.current{background:var(--blue);color:#fff}

@media(max-width:640px){
  .gd-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gd-sitekind{grid-template-columns:repeat(2,1fr)}
  .gd-arealinks{grid-template-columns:1fr 1fr}
}

/* v0.2.1: 料金表のキャプションを全幅に（実WPで途中までしか背景が伸びていなかった） */
.price caption{width:100%;box-sizing:border-box}

/* v0.2.1: CTA行が .hero / .ctaband の中でしか定義されておらず、
   機種LP・症状LP・地域LPで単独使用すると次の見出しと重なっていた。汎用定義を追加。
   （.hero .cta-row / .ctaband .cta-row の方が詳細度が高いので既存の見た目は変わらない） */
.cta-row{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  margin:22px 0 30px;
}

/* =========================================================
   v0.3.0：基板修理を別枠に／ポータブルゲーミングPC
   ========================================================= */

/* 基板修理バナー（症状カードの下・各LPに出す） */
.gd-board{
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(135deg,#16123a,#2a2360);
  border:3px solid var(--ink);border-radius:var(--r-lg);
  padding:22px 24px;margin:28px 0;box-shadow:var(--shadow-lg);color:#fff;
}
.gd-board-body{flex:1 1 380px}
.gd-board-tag{
  display:inline-block;background:var(--cyan);color:var(--ink);
  font-family:var(--pixel);font-size:.82rem;font-weight:700;
  padding:4px 12px;border-radius:999px;margin-bottom:10px;
}
.gd-board h3{margin:0 0 8px;font-size:1.25rem;line-height:1.45;color:#fff}
.gd-board p{margin:0;font-size:.88rem;line-height:1.85;color:#d7d9f5}
.gd-board p b{color:var(--yellow)}
.gd-board-cta{flex:0 0 auto}
.gd-board-cta .btn{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.gd-board-cta .btn:hover{background:#ffdb5e}
.gd-board.is-slim{padding:16px 18px;margin:22px 0}
.gd-board.is-slim h3{font-size:1.05rem}
.gd-board.is-slim p{font-size:.82rem}

/* ヘッダーの基板修理リンクを目立たせる */
.gnav-board{
  background:var(--ink);color:#fff!important;border-radius:999px;
  padding:.42em .8em;white-space:nowrap;
}
.gnav-board:hover{background:var(--blue);color:#fff!important}

@media(max-width:1180px){
  .gnav-board{background:none;color:var(--ink)!important;padding:.5em 0;border-radius:0}
}
@media(max-width:640px){
  .gd-board{padding:18px 16px}
  .gd-board-cta{flex:1 1 100%}
  .gd-board-cta .btn{width:100%;text-align:center}
}

/* =========================================================
   v0.3.1：余白の見直し（各セクション・見出し・要素の間が詰まっていた）
   ========================================================= */

/* セクション内の2つ目以降の見出しは、前の要素から十分に離す */
.sec h2:not(:first-child){ margin-top:2.4em }
.sec h3{ margin-top:1.8em; margin-bottom:.7em }

/* 各パーツの上下の余白 */
.gd-cards{ margin:20px 0 40px }
.gd-lead{ margin:0 0 28px; line-height:2 }
.gd-list{ line-height:2.1; padding-left:1.3em; margin:16px 0 32px }
.gd-list li{ margin-bottom:.7em }
.gd-flow{ margin:20px 0 40px; gap:14px }
.gd-arealinks{ margin:20px 0 32px }
.note{ margin:20px 0 28px; line-height:1.9; padding:16px 18px }
.pricewrap{ margin:20px 0 36px }
.gd-catnav{ margin:0 0 36px }
.gd-pricenav{ margin:0 0 32px; line-height:2.2 }
.gd-board{ margin:36px 0 }
.gd-sitekind{ margin:24px 0 16px }
.crumb{ padding:18px 0 6px }
.phero{ padding:44px 0 }
.gd-body{ margin:28px 0; line-height:2 }

/* 料金表の行の高さ（詰まって見えた） */
.price th,.price td{ padding-top:14px; padding-bottom:14px }

/* 基板修理ラボの説明ブロック */
.gd-kiban{
  background:#fff;border:3px solid var(--ink);border-radius:var(--r-lg);
  padding:26px 26px 22px;margin:22px 0 36px;box-shadow:var(--shadow);
}
.gd-kiban-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.gd-kiban-emoji{font-size:2.2rem;line-height:1;flex:none}
.gd-kiban-head h3{margin:0 0 6px;font-size:1.2rem}
.gd-kiban-head p{margin:0;font-size:.88rem;color:var(--ink-2);line-height:1.8}
.gd-kiban-lead{margin:0 0 20px;line-height:2;font-size:.95rem}
.gd-kiban-list{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.gd-kiban-list li{
  background:#f6f9ff;border:2px solid var(--line);border-radius:14px;
  padding:14px 16px;font-size:.86rem;line-height:1.85;
}
.gd-kiban-list li b{color:var(--blue);font-size:.94rem}
.gd-kiban-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.gd-kiban-note{margin:0;font-size:.8rem;color:var(--ink-2);line-height:1.8}

@media(max-width:640px){
  .sec{padding:52px 0}
  .gd-kiban{padding:20px 16px 16px}
  .gd-kiban-cta .btn{width:100%;text-align:center}
  .gd-list{padding-left:1.1em}
}

/* =========================================================
   v0.3.1：スマホのタップ領域（実測でリンク高さ20pxしかなかった）
   ========================================================= */

/* 47都道府県リンクを指で押せるチップに（旧＝ただのテキストで高さ20px） */
.gd-arealinks-group ul{ gap:6px }
.gd-arealinks-group a{
  display:inline-block;padding:8px 11px;border-radius:9px;
  background:#f6f9ff;border:1px solid var(--line);
  font-size:.84rem;line-height:1.2;color:var(--ink-2);
}
.gd-arealinks-group a:hover{ background:var(--yellow);border-color:var(--ink);color:var(--ink);text-decoration:none }

/* フッターの著作権が11.5pxで小さすぎた */
.site-footer .copy{ font-size:.78rem }

@media(max-width:640px){
  /* スマホはさらに押しやすく */
  .gd-arealinks-group a{ padding:10px 12px;font-size:.86rem }
  .gd-arealinks-group ul{ gap:8px }
  /* 料金表は枠内で横スクロールするが、スマホでは指で送れることを示す */
  .pricewrap{ position:relative }
}

/* フッターのリンクが31.5pxで指では押しにくかった（実測） */
.site-footer .cols a{ padding:9px 0; line-height:1.5 }
@media(max-width:720px){
  /* 1カラムになるスマホではさらに広く・区切りを入れる */
  .site-footer .cols{ gap:30px }
  .site-footer .cols a{ padding:11px 0; border-bottom:1px solid rgba(255,255,255,.08) }
  .site-footer .cols a:last-child{ border-bottom:0 }
}

/* 料金ページの機種ジャンプもチップ化（実測30.3px＝指では押しにくい） */
.gd-pricenav a{
  display:inline-block;margin:3px 6px 3px 0;padding:8px 11px;
  background:#f6f9ff;border:1px solid var(--line);border-radius:9px;
  font-size:.84rem;line-height:1.2;
}
.gd-pricenav a:hover{ background:var(--yellow);border-color:var(--ink);color:var(--ink);text-decoration:none }
@media(max-width:640px){ .gd-pricenav a{ padding:10px 12px } }

/* =========================================================
   v0.4.0：ドックくんの吹き出しナビ（構成案の方針）
   ========================================================= */

.gd-dock{ width:100%; height:auto; display:block }

/* 吹き出し＋キャラ */
.gd-say{
  display:flex;align-items:center;gap:16px;
  margin:28px 0 34px;
}
.gd-say.is-right{ flex-direction:row-reverse }
.gd-say-char{ flex:0 0 96px; width:96px }
.gd-say-char .gd-dock{ animation:float 3s ease-in-out infinite }

.gd-say-bubble{
  position:relative;flex:1 1 auto;
  background:#fff;border:3px solid var(--ink);border-radius:18px;
  padding:16px 18px;line-height:1.9;font-size:.92rem;
  box-shadow:var(--shadow);
}
.gd-say-bubble b{ color:var(--blue) }
/* しっぽ */
.gd-say-bubble::before,.gd-say-bubble::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:0;height:0;border-style:solid;
}
.gd-say.is-left .gd-say-bubble::before{
  left:-16px;border-width:11px 16px 11px 0;border-color:transparent var(--ink) transparent transparent;
}
.gd-say.is-left .gd-say-bubble::after{
  left:-11px;border-width:8px 12px 8px 0;border-color:transparent #fff transparent transparent;
}
.gd-say.is-right .gd-say-bubble::before{
  right:-16px;border-width:11px 0 11px 16px;border-color:transparent transparent transparent var(--ink);
}
.gd-say.is-right .gd-say-bubble::after{
  right:-11px;border-width:8px 0 8px 12px;border-color:transparent transparent transparent #fff;
}

/* 濃い背景（基板修理バナー）の中では白抜きに */
.gd-board .gd-say-bubble{ background:#fff;color:var(--ink) }

@media(max-width:640px){
  .gd-say{ gap:10px;margin:22px 0 28px }
  .gd-say-char{ flex:0 0 70px;width:70px }
  .gd-say-bubble{ font-size:.86rem;padding:13px 14px;border-radius:14px }
  .gd-say.is-left .gd-say-bubble::before{ left:-14px;border-width:9px 14px 9px 0 }
  .gd-say.is-left .gd-say-bubble::after{ left:-9px;border-width:7px 10px 7px 0 }
  .gd-say.is-right .gd-say-bubble::before{ right:-14px;border-width:9px 0 9px 14px }
  .gd-say.is-right .gd-say-bubble::after{ right:-9px;border-width:7px 0 7px 10px }
}

/* =========================================================
   v0.4.4：ヘッダーの見切れ修正
   実測：器1080px に対し ロゴ272＋ナビ850＝1135px 必要で55px不足
   → flexが項目を押し潰し、パディングを持つ「基板修理」だけ 96.7→83px に潰れて文字が切れていた
   ========================================================= */

/* ヘッダーだけ器を広げる（本文の1080pxはそのまま） */
.site-header .wrap{ width:min(1240px,96%) }

/* 押し潰し禁止＝文字が切れるくらいならハンバーガーに落とす */
.gnav a{ flex:0 0 auto }
.gnav-board{ overflow:visible }

/* 収まらない幅ではハンバーガーへ（実測1136px必要なので1240pxで切替） */
@media(max-width:1240px){
  .gnav{ position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;
         background:#fff;border-bottom:3px solid var(--ink);padding:14px 6%;display:none;gap:0 }
  .gnav.open{ display:flex }
  .gnav a{ padding:.7em 0;border-bottom:1px dashed var(--line);font-size:1rem;white-space:normal;flex:0 0 auto }
  .gnav .btn{ margin-top:10px;text-align:center }
  .gnav-board{ background:none;color:var(--ink)!important;padding:.7em 0;border-radius:0 }
  .nav-toggle{ display:block }
}

/* =========================================================
   v0.5.0：ゲーム世界観（背景・レトロUI）
   ※ 任天堂等の実在モチーフ（土管・？ブロック等）は権利上使えないので、
     すべてオリジナルの図形で「ゲームを連想させる」方向で作る
   ========================================================= */

/* --- ヒーロー：ゲームステージ風（雲＋丘＋地面ブロック） --- */
.hero{ padding-bottom:44px }

/* 流れる雲（ピクセル風の角丸） */
.hero .stage-cloud{
  position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;z-index:0;
  overflow:hidden;
}
.hero .stage-cloud i{
  position:absolute;display:block;background:rgba(255,255,255,.16);
  border-radius:999px;box-shadow:0 0 0 6px rgba(255,255,255,.08);
  animation:gd-cloud linear infinite;
}
.hero .stage-cloud i:nth-child(1){ width:120px;height:26px;top:14%;left:-160px;animation-duration:38s }
.hero .stage-cloud i:nth-child(2){ width:80px;height:20px;top:30%;left:-120px;animation-duration:52s;animation-delay:-8s }
.hero .stage-cloud i:nth-child(3){ width:160px;height:30px;top:52%;left:-200px;animation-duration:64s;animation-delay:-20s }
.hero .stage-cloud i:nth-child(4){ width:100px;height:22px;top:70%;left:-140px;animation-duration:44s;animation-delay:-30s }
@keyframes gd-cloud{ to{ transform:translateX(calc(100vw + 260px)) } }

/* 遠景の丘（ピクセル階段） */
.hero .stage-hill{
  position:absolute;left:0;right:0;bottom:22px;height:90px;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg, transparent 6%, rgba(40,217,121,.30) 6% 10%, transparent 10%),
    linear-gradient(90deg, transparent 4%, rgba(40,217,121,.30) 4% 12%, transparent 12%);
  background-repeat:no-repeat;
  filter:blur(.3px);
}
.hero .stage-hill::before,.hero .stage-hill::after{
  content:"";position:absolute;bottom:0;
  background:rgba(40,217,121,.28);
  clip-path:polygon(0 100%, 22% 44%, 40% 44%, 62% 0, 78% 0, 100% 100%);
}
.hero .stage-hill::before{ left:4%;width:230px;height:78px }
.hero .stage-hill::after{ right:6%;width:180px;height:60px;opacity:.75 }

/* 地面：ピクセルブロックの帯 */
.hero .stage-ground{
  position:absolute;left:0;right:0;bottom:0;height:22px;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      #7a4a1f 0 22px, #16123a 22px 25px, #9a5f28 25px 47px, #16123a 47px 50px);
  border-top:3px solid var(--ink);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.14);
}

/* --- セクションの背景：うっすらドット（ゲーム画面の粒） --- */
.sec{ position:relative }
.sec.alt{
  background:
    radial-gradient(rgba(47,107,255,.07) 1.6px, transparent 1.6px) 0 0/22px 22px,
    linear-gradient(180deg,#fff,#f6f9ff);
}

/* --- セクションの区切り：ブロックの帯 --- */
.gd-blocks{
  height:16px;
  background:repeating-linear-gradient(90deg,
    var(--blue) 0 16px, #1b46c9 16px 18px, var(--cyan) 18px 34px, #1b46c9 34px 36px);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
}

/* --- 見出しにカーソル（コマンド選択風） --- */
.sec h2 .pixel{ position:relative }
.sec h2 .pixel::before{
  content:"▶";margin-right:.5em;color:var(--yellow);
  animation:blink 1.2s steps(2) infinite;
}

/* --- レトロなステータス表示（ヒーロー下の stats） --- */
.hero .stats{ position:relative;z-index:2 }

/* --- HPバー風の見出し装飾 --- */
.gd-hp{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--pixel);font-size:.78rem;color:#fff;
}
.gd-hp-bar{
  width:120px;height:12px;background:#16123a;border:2px solid #fff;border-radius:3px;overflow:hidden;
}
.gd-hp-bar i{ display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--cyan)) }

@media(max-width:640px){
  .hero .stage-hill{ height:60px;bottom:18px }
  .hero .stage-hill::before{ width:150px;height:52px }
  .hero .stage-hill::after{ width:110px;height:40px }
  .hero .stage-ground{ height:18px }
}

/* --- 故障モンスター --- */
.gd-mon{ width:100%;height:auto;display:block }
.gd-mon.is-big{ width:96px }

/* 症状カード（gd-cards側） */
.gd-card--mon{ position:relative;padding-top:64px }
.gd-card-mon{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:48px;height:48px;
  animation:gd-hover 2.4s ease-in-out infinite;
}
.gd-card-monname{
  display:block;text-align:center;font-family:var(--pixel);
  font-size:.68rem;color:var(--purple);margin:0 0 6px;letter-spacing:.5px;
}
@keyframes gd-hover{ 50%{ transform:translateX(-50%) translateY(-5px) } }

/* トップのクエストカード */
.card.quest.is-mon{ position:relative }
.card.quest.is-mon .ic{ display:none }
.quest-mon{
  display:block;width:58px;height:58px;margin:0 auto 4px;
  animation:gd-hover 2.4s ease-in-out infinite;
}
.quest-monname{
  display:block;font-family:var(--pixel);font-size:.7rem;
  color:var(--purple);margin-bottom:6px;letter-spacing:.5px;
}

/* 症状LPのヒーロー：「〇〇があらわれた！」 */
.phero-mon{ display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:10px }
.phero-mon .gd-mon{ animation:gd-hover 2.2s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(0,0,0,.18)) }
.phero-monname{
  font-family:var(--pixel);font-size:.9rem;color:#fff;
  background:rgba(22,18,58,.55);border:2px solid #fff;border-radius:999px;
  padding:4px 14px;
}

@media(max-width:640px){
  .gd-card--mon{ padding-top:56px }
  .gd-card-mon{ width:40px;height:40px }
  .quest-mon{ width:48px;height:48px }
  .gd-mon.is-big{ width:76px }
}

/* =========================================================
   v0.6.0：ドックくんの仲間／修理ドック
   ========================================================= */

/* 吹き出しにキャラ名を出す */
.gd-say-name{
  display:block;text-align:center;margin-top:2px;
  font-family:var(--pixel);font-size:.66rem;color:var(--ink-2);
  white-space:nowrap;
}

/* --- 修理ドック（屋号のモチーフ／土管の代わり） --- */
.gd-dockpod{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:
    radial-gradient(rgba(255,255,255,.07) 1.6px, transparent 1.6px) 0 0/20px 20px,
    linear-gradient(160deg,#1b1748,#2a2360);
  border:3px solid var(--ink);border-radius:var(--r-lg);
  padding:26px 22px;margin:30px 0 38px;box-shadow:var(--shadow-lg);
}
.gd-dockpod-step{ display:flex;flex-direction:column;align-items:center;gap:6px;width:104px }
.gd-dockpod-label{
  font-family:var(--pixel);font-size:.72rem;color:#cdd4ff;
  border:2px solid #4a4482;border-radius:999px;padding:2px 10px;
}
.gd-dockpod-label.is-ok{ color:var(--ink);background:var(--yellow);border-color:var(--ink) }
.gd-dockpod-mon{ width:56px;animation:gd-hover 2.4s ease-in-out infinite }
.gd-dockpod-char{ width:86px }
.gd-dockpod-arrow{ color:var(--yellow);font-size:1.3rem;animation:blink 1.2s steps(2) infinite }

/* カプセル本体 */
.gd-dockpod-pod{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:linear-gradient(180deg,#2f6bff,#1b46c9);
  border:4px solid var(--ink);border-radius:22px 22px 14px 14px;
  padding:26px 20px 14px;width:150px;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.14);
}
.gd-dockpod-lamp{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:var(--green);
  border:2px solid var(--ink);animation:blink 1s steps(2) infinite;
}
.gd-dockpod-name{ font-family:var(--pixel);font-size:.64rem;color:#bcd0ff;letter-spacing:1px }
.gd-dockpod-capsule{
  width:86px;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.5);border-radius:14px;padding:6px;
}
.gd-dockpod-bars{ display:flex;gap:4px;margin-top:2px }
.gd-dockpod-bars i{
  width:16px;height:7px;background:var(--cyan);border:2px solid var(--ink);border-radius:2px;
  animation:gd-bar 1.2s steps(2) infinite;
}
.gd-dockpod-bars i:nth-child(2){ animation-delay:.2s }
.gd-dockpod-bars i:nth-child(3){ animation-delay:.4s }
@keyframes gd-bar{ 50%{ background:var(--yellow) } }

@media(max-width:640px){
  .gd-dockpod{ gap:8px;padding:18px 12px }
  .gd-dockpod-step{ width:76px }
  .gd-dockpod-pod{ width:120px;padding:22px 12px 12px }
  .gd-dockpod-char{ width:64px }
  .gd-dockpod-mon{ width:44px }
  .gd-dockpod-arrow{ font-size:1rem }
  .gd-say-name{ font-size:.6rem }
}

/* --- なかまたち（キャラ紹介） --- */
.gd-party{
  display:grid;gap:16px;margin:22px 0 10px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.gd-party-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  background:#fff;border:3px solid var(--ink);border-radius:var(--r-lg);
  padding:18px 14px 16px;box-shadow:var(--shadow);
}
.gd-party-card .gd-dock{ width:104px;animation:float 3s ease-in-out infinite }
.gd-party-card:nth-child(2) .gd-dock{ animation-delay:.4s }
.gd-party-card:nth-child(3) .gd-dock{ animation-delay:.8s }
.gd-party-card:nth-child(4) .gd-dock{ animation-delay:1.2s }
.gd-party-card b{ font-family:var(--pixel);font-size:1rem;color:var(--blue);margin-top:6px }
.gd-party-card span{ font-size:.8rem;color:var(--ink-2);line-height:1.7 }
@media(max-width:640px){
  .gd-party{ grid-template-columns:1fr 1fr;gap:12px }
  .gd-party-card{ padding:14px 10px 12px }
  .gd-party-card .gd-dock{ width:78px }
  .gd-party-card b{ font-size:.86rem }
  .gd-party-card span{ font-size:.72rem }
}