/* ==========================================================
   視覚重視版（BOXIL型に寄せた比較用）
   玉子屋の黄色はそのまま。CSSはこのファイルに同梱。
   ========================================================== */

:root {
  --yellow: #fdc500;
  --yellow-deep: #f0a800;
  --yellow-soft: #fff3c4;
  --yellow-pale: #fffae6;
  --ink: #0f0e0c;
  --ink-soft: #4a453c;
  --line: #eae4d2;
  --panel: #fff;
  --radius: 12px;
  --font: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",system-ui,sans-serif;
  --ink-muted: #5a554c;
  --fs-body: 1rem;
  --fs-sub: 0.9rem;
  --fs-small: 0.84rem;
}
* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); color:var(--ink); line-height:1.85; background:#fff; }
.wrap { max-width:1040px; margin-inline:auto; padding-inline:20px; }

/* ---------- ヘッダー ---------- */
.hd { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.hd__in { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; flex-wrap:wrap; }
.brand { text-decoration:none; }
.brand b { display:block; font-size:1.02rem; color:var(--ink); }
.brand span { display:block; font-size:.75rem; color:var(--ink-soft); }
.hd__nav { display:flex; gap:18px; flex-wrap:wrap; }
.hd__nav a { font-size:.85rem; color:var(--ink); text-decoration:none; }
.hd__nav a:hover { color:#8a6a00; }

/* ---------- 帯 ---------- */
.band { padding-block:72px; }
.band--yellow { background:var(--yellow); }
.band--soft   { background:var(--yellow-pale); }
.band--white  { background:#fff; }
.band--grad   { background:linear-gradient(180deg,#fffdf5 0%, var(--yellow-soft) 100%); }

/* ---------- ヒーロー ---------- */
.hero { position:relative; border-radius:0 0 50% 50% / 0 0 44px 44px; padding-block:56px 76px; }
.hero__chips { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.chip { background:rgba(255,255,255,.85); border-radius:999px; padding:5px 16px; font-size:.8rem; font-weight:700; }
.hero h1 { text-align:center; font-size:clamp(1.7rem,5vw,2.6rem); line-height:1.4; margin:0 0 18px; }
.hero__lead { text-align:center; max-width:600px; margin:0 auto 30px; font-size:var(--fs-body); color:var(--ink); }
.hero__nums { display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.laurel { position:relative; padding:6px 34px; text-align:center; }
.laurel::before, .laurel::after {
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:16px; height:52px; border:2px solid rgba(36,33,28,.45);
}
.laurel::before { left:0; border-right:0; border-radius:26px 0 0 26px; }
.laurel::after  { right:0; border-left:0;  border-radius:0 26px 26px 0; }
.laurel small { display:block; font-size:.74rem; font-weight:700; }
.laurel b { display:block; font-size:1.5rem; line-height:1.3; }

/* ---------- セクション見出し ---------- */
.sh { text-align:center; margin-bottom:44px; }
.sh h2 { font-size:clamp(1.35rem,3.6vw,1.8rem); margin:0 0 8px; line-height:1.45; }
.sh__en { display:block; font-size:.78rem; letter-spacing:.2em; color:var(--ink-soft); font-weight:700; }
.sh p { max-width:640px; margin:16px auto 0; font-size:var(--fs-body); color:var(--ink); }

/* ---------- 4カラム（アイコン＋見出し＋短文） ---------- */
.cols { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.col { text-align:center; }
.col__ico { width:96px; height:96px; margin:0 auto 16px; display:grid; place-items:center;
            background:var(--yellow-soft); border-radius:50%; }
.col__ico svg { width:46px; height:46px; }
.col h3 { font-size:1rem; margin:0 0 8px; line-height:1.5; }
.col p { font-size:var(--fs-sub); color:var(--ink-soft); margin:0; line-height:1.8; }

/* ---------- 診断 ---------- */
.opts { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.opt {
  display:flex; align-items:center; gap:14px; text-align:left;
  background:#fff; border:2px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; cursor:pointer; font-family:inherit; font-size:.95rem;
  font-weight:700; color:var(--ink); line-height:1.55; transition:.15s;
}
.opt:last-child:nth-child(odd) { grid-column:1/-1; }
.opt:hover { border-color:var(--yellow-deep); background:#fffbe8; }
.opt.on { border-color:var(--yellow-deep); background:var(--yellow); }
.opt__ico { flex:none; width:44px; height:44px; border-radius:50%; background:var(--yellow-soft);
            display:grid; place-items:center; }
.opt.on .opt__ico { background:rgba(255,255,255,.75); }
.opt__ico svg { width:24px; height:24px; }

.ans { margin-top:36px; }
.ans.hide { display:none; }
.ans__point { background:#fff; border-radius:var(--radius); padding:30px; border-top:6px solid var(--yellow); }
.ans__label { font-size:.76rem; font-weight:700; letter-spacing:.14em; color:#8a6a00; margin:0 0 10px; }
.ans__head { font-size:1.32rem; font-weight:700; line-height:1.55; margin:0 0 14px; }
.ans__head em { font-style:normal; background:linear-gradient(transparent 58%, var(--yellow) 58%); }
.ans__body { margin:0; font-size:var(--fs-body); color:var(--ink); line-height:1.95; }

.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:24px; }
.card { background:#fff; border-radius:var(--radius); padding:26px; border:1px solid var(--line); }
.card h4 { margin:0 0 6px; font-size:1.05rem; line-height:1.5; }
.card__tag { display:inline-block; background:var(--yellow); border-radius:999px;
             padding:3px 12px; font-size:.72rem; font-weight:700; margin-bottom:10px; }
.card p { font-size:var(--fs-body); color:var(--ink); margin:0 0 18px; }
.cta { display:block; text-align:center; background:var(--ink); color:#fff; text-decoration:none;
       font-weight:700; font-size:.9rem; padding:14px; border-radius:var(--radius); }
.cta:hover { background:#000; }
.note { font-size:var(--fs-sub); color:var(--ink); margin:22px 0 0; line-height:1.85; }
.reset { margin-top:16px; background:none; border:1px solid var(--line); border-radius:var(--radius);
         padding:9px 20px; font-family:inherit; font-size:.85rem; color:var(--ink-soft); cursor:pointer; }

/* ---------- ステップ ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; align-items:start; }
.step { text-align:center; position:relative; }
.step__circle { width:120px; height:120px; margin:0 auto 14px; border-radius:50%;
                background:#fff; display:grid; place-items:center; }
.step__circle svg { width:54px; height:54px; }
.step__no { display:block; font-size:1.05rem; font-weight:700; color:#8a6a00; letter-spacing:.08em; }
.step__t { display:block; font-size:.92rem; font-weight:700; margin-top:4px; }
.step:not(:last-child)::after {
  content:""; position:absolute; top:52px; right:-14px;
  border-left:11px solid var(--yellow-deep);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}

/* ---------- 記事カード ---------- */
.arts { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.art { display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
       padding:26px; text-decoration:none; color:var(--ink); transition:.15s; }
.art:hover { border-color:var(--yellow-deep); transform:translateY(-2px); }
.art__ico { width:56px; height:56px; border-radius:50%; background:var(--yellow-soft);
            display:grid; place-items:center; margin-bottom:14px; }
.art__ico svg { width:28px; height:28px; }
.art__num { display:block; font-size:.72rem; font-weight:700; color:#8a6a00; letter-spacing:.08em; margin-bottom:6px; }
.art__t { display:block; font-weight:700; font-size:1rem; line-height:1.55; margin-bottom:8px; }
.art__d { display:block; font-size:var(--fs-sub); color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq { max-width:820px; margin-inline:auto; }
.faq__item { background:#fff; border:1px solid var(--line); border-radius:var(--radius);
             padding:22px 26px; margin-bottom:16px; }
.faq__q { display:flex; gap:12px; font-weight:700; font-size:.98rem; margin:0 0 10px; line-height:1.6; }
.faq__a { display:flex; gap:12px; font-size:var(--fs-body); color:var(--ink); margin:0; line-height:1.9; }
.faq__mark { flex:none; font-weight:700; color:#8a6a00; font-size:1.05rem; }

/* ---------- 追従CTA ---------- */
.float { position:fixed; right:14px; bottom:20px; z-index:60; display:grid; gap:10px; }
.float a { width:96px; height:96px; border-radius:50%; display:grid; place-items:center; text-align:center;
           font-size:.74rem; font-weight:700; text-decoration:none; line-height:1.45;
           box-shadow:0 3px 10px rgba(36,33,28,.18); }
.float__y { background:var(--yellow); color:var(--ink); }
.float__w { background:#fff; color:var(--ink); border:2px solid var(--yellow); }

/* ---------- フッター ---------- */
.ft { background:#fff; border-top:1px solid var(--line); padding-block:34px; }
.ft nav { display:flex; gap:8px 20px; flex-wrap:wrap; margin-bottom:16px; }
.ft nav a { font-size:.85rem; color:var(--ink); text-decoration:none; }
.ft p { font-size:var(--fs-sub); color:var(--ink); margin:0 0 10px; line-height:1.8; }

/* ---------- スマホ ---------- */
@media (max-width:880px) {
  .cols { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); gap:26px 10px; }
  .step:nth-child(2)::after { display:none; }
  .arts { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .band { padding-block:48px; }
  .cols { grid-template-columns:1fr; gap:32px; }
  .opts, .cards { grid-template-columns:1fr; }
  .opt:last-child:nth-child(odd) { grid-column:auto; }
  .steps { grid-template-columns:1fr; }
  .step::after { display:none !important; }
  /* スマホでは2ボタンが本文に被るため1つに絞る（6社比較ボタンのみ残す） */
  .float { right:12px; bottom:16px; }
  .float__w { display:none; }
  .float a { width:64px; height:64px; font-size:.64rem; }
  .hd__in { flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* ===== 比較表 ===== */
.wrap-wide { max-width:1320px; margin-inline:auto; padding-inline:20px; }

.hk-title { font-size:clamp(1.5rem,4.4vw,2.15rem); line-height:1.55; margin:0 0 10px; }
.hk-date { font-size:.85rem; font-weight:700; color:var(--ink-soft); margin:0; }
.hk-h2 { font-size:1.2rem; line-height:1.55; margin:0 0 16px; }

.hk-list { margin:0; padding-left:1.3em; font-size:var(--fs-body); color:var(--ink); line-height:2; }
.hk-list li { margin-bottom:6px; }

.hk-co-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.hk-co { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; }
.hk-co h3 { margin:0 0 8px; font-size:1rem; line-height:1.5; }
.hk-co p { margin:0; font-size:var(--fs-body); color:var(--ink); line-height:1.9; }
/* 補足文が2段落になる社があるため、段落間に余白を入れる */
.hk-co p + p { margin-top:14px; }

/* ---------- 比較表本体（PC：横スクロール表） ---------- */
.cmp-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; -webkit-overflow-scrolling:touch; }
table.compare { border-collapse:collapse; width:100%; min-width:1010px; font-size:.94rem; }
table.compare th, table.compare td { padding:16px 14px; text-align:left; vertical-align:top; line-height:1.8; border-bottom:1px solid var(--line); }

/* 列幅（1:サービス名 2:本体10食 3:送料 4:最小食数 5:メニュー 6:解約経路） */
table.compare th:nth-child(1), table.compare td:nth-child(1) { min-width:180px; }
table.compare th:nth-child(2), table.compare td:nth-child(2) { min-width:200px; }
table.compare th:nth-child(3), table.compare td:nth-child(3) { min-width:150px; }
table.compare th:nth-child(4), table.compare td:nth-child(4) { min-width:90px; }
table.compare th:nth-child(5), table.compare td:nth-child(5) { min-width:170px; }
table.compare th:nth-child(6), table.compare td:nth-child(6) { min-width:220px; }

table.compare thead th { background:var(--yellow-soft); font-weight:700; font-size:.88rem; white-space:nowrap; }
table.compare tbody tr:nth-child(odd) { background:#fff; }
table.compare tbody tr:nth-child(even) { background:var(--yellow-pale); }

/* sticky列（1列目）：奇数行・偶数行の背景を明示指定（inheritをやめる。透け防止） */
table.compare th.cmp-fixed, table.compare td.cmp-fixed { position:sticky; left:0; z-index:1; box-shadow:2px 0 4px rgba(36,33,28,.08); font-weight:700; }
table.compare tbody tr:nth-child(odd) th.cmp-fixed, table.compare tbody tr:nth-child(odd) td.cmp-fixed { background:#fff; }
table.compare tbody tr:nth-child(even) th.cmp-fixed, table.compare tbody tr:nth-child(even) td.cmp-fixed { background:var(--yellow-pale); }
table.compare thead th.cmp-fixed { z-index:2; background:var(--yellow-soft); }

table.compare .cmp-sub { display:block; font-size:var(--fs-small); color:var(--ink-soft); margin-top:4px; font-weight:400; }
table.compare .mut { color:var(--ink-muted); }

@media (max-width:640px) {
  .hk-co-grid { grid-template-columns:1fr; }
}

/* ---------- 比較表：スマホはカード表示に切り替え ---------- */
@media (max-width:640px) {
  .cmp-wrap { overflow-x:visible; border:none; border-radius:0; background:transparent; }
  table.compare { min-width:0; width:100%; }
  table.compare thead { display:none; }
  table.compare, table.compare tbody, table.compare tr, table.compare th, table.compare td { display:block; width:100%; }

  /* PC用の table.compare tbody tr:nth-child(odd/even) による交互背景は
     .compare + :nth-child ぶんクラス詳細度が高く、table.compare tr だけでは上書きできない。
     ここでは同じ詳細度のセレクタを使って、スマホでは意図的に全カードを白で統一している */
  table.compare tbody tr:nth-child(odd),
  table.compare tbody tr:nth-child(even) {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 20px;
    margin-bottom:24px;
    box-shadow:0 2px 8px rgba(36,33,28,.08);
  }
  table.compare tr:last-child { margin-bottom:0; }

  /* サービス名（カード見出し）：sticky解除。1列目の奇数/偶数行別背景（table.compare tbody tr:nth-child(odd/even) th.cmp-fixed）も
     同様に高詳細度のため、同じ詳細度で上書きして透明にしている */
  table.compare tbody tr:nth-child(odd) th.cmp-fixed,
  table.compare tbody tr:nth-child(odd) td.cmp-fixed,
  table.compare tbody tr:nth-child(even) th.cmp-fixed,
  table.compare tbody tr:nth-child(even) td.cmp-fixed {
    position:static; box-shadow:none; background:transparent;
    font-size:1.15rem; padding:0 0 12px; margin-bottom:12px; border-bottom:2px solid var(--yellow);
  }

  table.compare td { position:static; padding:10px 0; border-bottom:1px solid var(--line); }
  table.compare tr td:last-of-type { border-bottom:none; }
  table.compare td::before {
    content:attr(data-label); display:block; font-size:var(--fs-small); font-weight:700; color:var(--ink-soft); margin-bottom:4px;
  }
  table.compare .cmp-sub { margin-top:2px; }

  /* カードの縦を詰める（行間・パディングの圧縮） */
  table.compare tbody tr:nth-child(odd),
  table.compare tbody tr:nth-child(even) { padding:16px 18px; }
  table.compare td { padding:8px 0; line-height:1.6; }
  table.compare td::before { margin-bottom:2px; }
  table.compare .cmp-sub { margin-top:1px; line-height:1.5; }
}

/* ===== 2列の価格表（table.simple） ===== */
table.simple { border-collapse:collapse; width:100%; max-width:680px; font-size:.94rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
table.simple th, table.simple td { padding:12px 16px; text-align:left; line-height:1.7; border-bottom:1px solid var(--line); }
table.simple thead th { background:var(--yellow-soft); font-weight:700; font-size:.88rem; }
table.simple tbody tr:last-child th, table.simple tbody tr:last-child td { border-bottom:none; }
table.simple th[scope="row"] { font-weight:700; width:auto; }
table.simple td { text-align:right; white-space:nowrap; width:1%; }
/* 2列表：価格列（2列目）はヘッダーも折り返さない */
table.simple thead th:nth-child(2) { white-space:nowrap; width:1%; text-align:right; }

@media (max-width:640px) {
  table.simple { font-size:.9rem; }
  table.simple th, table.simple td { padding:10px 12px; }
}