@charset "UTF-8";
/* ============================================================
   看板屋比較ガイド — column のスタイル
   ------------------------------------------------------------
   build-assets.js が組み立てています。直接編集しても次のビルドで消えます。
   見た目を変えるときは restyle.js と各ページの生成側を直してください。
   ============================================================ */

/* ============================================================
   名古屋看板屋比較ガイド（実データ版）
   ベース：ホワイト／アクセント：ネイビー・ライトグリーン・グレー
   ============================================================ */
:root{
  --navy:#0d0d0d;
  --navy-dark:#333333;
  --navy-soft:#c9c9c9;
  --navy-tint:#f5f4f2;
  --green:#0d0d0d;
  --green-hover:#333333;
  --green-mid:#0d0d0d;
  --green-light:#c9c9c9;
  --green-tint:#f5f4f2;
  --gray-bg:#f5f4f2;
  --gray-line:#e2e2e2;
  --gray-mid:#8a8a8a;
  --text:#333333;
  --text-sub:#767676;
  --amber:#a3760f;
  --amber-tint:#fdf5e0;
  --radius:12px;
  --radius-lg:18px;
  --shadow:0 2px 12px rgba(0,0,0,.05);
  --shadow-md:0 8px 26px rgba(0,0,0,.09);
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,system-ui,-apple-system,sans-serif;
  color:var(--text);background:#fff;line-height:1.8;font-size:16px;-webkit-text-size-adjust:100%;
}
img,svg{max-width:100%;display:block;}
a{color:var(--navy);}
a:hover{text-decoration:underline;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
table{border-collapse:collapse;width:100%;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.section{padding:56px 0;}
.section--gray{background:var(--gray-bg);}
.section--tint{background:var(--navy-tint);}
.stack>*+*{margin-top:14px;}

/* 見出し */
.sec-head{text-align:center;margin-bottom:32px;}
.sec-head__en{display:block;font-size:12px;letter-spacing:.18em;color:var(--green);font-weight:700;margin-bottom:6px;text-transform:uppercase;}
.sec-head__ttl{font-size:27px;font-weight:700;color:var(--navy-dark);line-height:1.5;}
.sec-head__ttl::after{content:"";display:block;width:48px;height:3px;background:var(--green-mid);margin:14px auto 0;border-radius:2px;}
.sec-head__lead{margin-top:14px;color:var(--text-sub);font-size:15px;}
.ttl-bar{font-size:21px;font-weight:700;color:var(--navy-dark);border-left:5px solid var(--green-mid);padding-left:12px;margin-bottom:18px;line-height:1.5;}

/* ヘッダー */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--gray-line);backdrop-filter:blur(6px);}
.header__inner{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo:hover{text-decoration:none;}
.logo__mark{width:38px;height:38px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px;flex:none;}
.logo__mark span{display:block;line-height:1;}
.logo__name{font-size:17px;font-weight:700;color:var(--navy-dark);}
.logo__cap{display:block;font-size:10.5px;color:var(--gray-mid);}
.gnav{margin-left:auto;}
.gnav__list{display:flex;align-items:center;gap:20px;}
.gnav__list a{font-size:14px;font-weight:600;color:var(--text);text-decoration:none;}
.gnav__list a:hover{color:var(--green);}
.hamburger{display:none;margin-left:auto;width:44px;height:40px;border:1px solid var(--gray-line);background:#fff;border-radius:8px;cursor:pointer;padding:0;}
.hamburger span{display:block;width:20px;height:2px;background:var(--navy);margin:4px auto;border-radius:2px;}

/* パンくず */
.breadcrumb{background:var(--gray-bg);border-bottom:1px solid var(--gray-line);}
.breadcrumb ol{max-width:var(--maxw);margin:0 auto;padding:9px 20px;display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--text-sub);}
.breadcrumb li+li::before{content:"›";margin-right:6px;color:var(--gray-mid);}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 22px;border-radius:8px;font-weight:700;font-size:15px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:.15s;}
.btn:hover{text-decoration:none;opacity:.92;}
.btn--green{background:var(--green);color:#fff;}
.btn--navy{background:var(--navy);color:#fff;}
.btn--ghost{background:#fff;color:var(--navy-dark);border-color:var(--navy-soft);}
.btn--sm{padding:7px 13px;font-size:13px;border-radius:6px;}
.btn--block{width:100%;}

/* FV */
.hero{position:relative;background:linear-gradient(135deg,#f4f8fc 0%,#f4f8fc 52%,#f4f8fc 100%);border-bottom:1px solid var(--gray-line);overflow:hidden;}
.hero::before{content:"";position:absolute;left:-120px;top:-120px;width:300px;height:300px;border-radius:50%;background:rgba(9,111,200,.08);}
.hero::after{content:"";position:absolute;right:-90px;bottom:-90px;width:320px;height:320px;border-radius:50%;background:rgba(9,111,200,.06);}
.hero__inner{max-width:var(--maxw);margin:0 auto;padding:48px 20px 44px;position:relative;z-index:1;}
.hero__badge{display:inline-block;background:#fff;color:var(--green);border:1px solid var(--green-light);font-size:12.5px;font-weight:700;padding:5px 13px;border-radius:999px;margin-bottom:16px;}
.hero__copy{font-size:31px;font-weight:700;line-height:1.45;color:var(--navy-dark);}
.hero__copy em{font-style:normal;color:var(--green);}
.hero__lead{margin-top:15px;font-size:15px;color:var(--text-sub);line-height:1.9;max-width:760px;}
.hero__stat{display:flex;gap:30px;margin-top:24px;flex-wrap:wrap;}
.hero__stat div{font-size:12.5px;color:var(--text-sub);}
.hero__stat strong{display:block;font-size:25px;color:var(--navy);line-height:1.2;}
.hero__stat strong small{font-size:13px;font-weight:600;margin-left:2px;}

/* 注記ボックス */
.note-box{background:#fff;border:1px solid var(--gray-line);border-left:4px solid var(--green-mid);border-radius:var(--radius);padding:18px 20px;}
.note-box--amber{border-left-color:#767676;background:var(--amber-tint);}
.note-box__ttl{font-size:15.5px;font-weight:700;color:var(--navy-dark);margin-bottom:8px;}
.note-box__txt{font-size:13.5px;color:var(--text-sub);}
.note-box__txt b{color:var(--text);}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:13px;}
.legend span{display:inline-flex;align-items:center;gap:6px;color:var(--text-sub);}
.legend--bar{
  justify-content:center;gap:20px;margin:0 0 16px;padding:10px 16px;
  background:#fff;border:1px solid var(--gray-line);border-radius:999px;font-size:12.5px;
}
.mark-o{color:var(--green);font-weight:700;font-size:15px;}
.mark-d{color:var(--gray-mid);font-weight:700;}

/* フィルタ */
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px;}
.tab{padding:10px 18px;border:1px solid var(--gray-line);background:#fff;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--text-sub);cursor:pointer;font-family:inherit;transition:.15s;}
.tab:hover{border-color:var(--green-mid);color:var(--green);}
.tab.is-active{background:var(--navy);border-color:var(--navy);color:#fff;}
.filter-info{text-align:center;font-size:13.5px;color:var(--text-sub);margin-bottom:22px;}
.filter-info b{color:var(--navy-dark);}

/* 比較表 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gray-line);border-radius:var(--radius);background:#fff;}
.tbl{min-width:1080px;font-size:13px;}
.tbl th,.tbl td{border-bottom:1px solid var(--gray-line);padding:11px 13px;text-align:left;vertical-align:top;}
.tbl thead th{background:#f5f4f2;color:var(--navy-dark);font-weight:700;font-size:12.5px;white-space:nowrap;position:sticky;top:0;border-bottom:2px solid #c9c9c9;}
.tbl tbody tr:nth-child(even){background:#fafafa;}
.tbl tbody tr:hover{background:var(--green-tint);}
.tbl .name{font-weight:700;color:var(--navy-dark);}
.tbl .corp{display:block;font-size:11px;color:var(--gray-mid);font-weight:400;}
.tbl td.c{text-align:center;}
.scroll-hint{display:none;font-size:12px;color:var(--gray-mid);margin-bottom:8px;}
.tbl-note{font-size:12px;color:var(--text-sub);margin-top:10px;}

/* 会社カード */
.co-list{display:grid;gap:18px;}
.co{background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);}
.co__head{padding:18px 22px;border-bottom:1px solid var(--gray-line);background:#ffffff;}
.co__name{font-size:20px;font-weight:700;color:var(--navy-dark);line-height:1.4;}
.co__corp{font-size:12.5px;color:var(--text-sub);margin-top:2px;}
.co__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.tag{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:4px;background:var(--navy-tint);color:var(--navy-dark);border:1px solid #e2e2e2;}
.tag--green{background:var(--green-tint);color:var(--green);border-color:#c9c9c9;}
.tag--amber{background:var(--amber-tint);color:var(--amber);border-color:#e2e2e2;}
.co__body{display:grid;grid-template-columns:1fr 300px;gap:0;}
.co__main{padding:18px 22px 20px;}
.co__side{padding:18px 22px 20px;background:var(--gray-bg);border-left:1px solid var(--gray-line);}
.spec dl{display:grid;grid-template-columns:120px 1fr;font-size:13.5px;}
.spec dt{padding:8px 0;color:var(--text-sub);font-weight:600;border-bottom:1px dashed var(--gray-line);}
.spec dd{margin:0;padding:8px 0;border-bottom:1px dashed var(--gray-line);}
.svc{display:flex;flex-wrap:wrap;gap:6px;}
.svc span{font-size:12.5px;background:var(--green-tint);color:var(--green);border:1px solid #c9c9c9;padding:3px 10px;border-radius:999px;font-weight:600;}
.price-list{font-size:13px;}
.price-list li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--gray-line);}
.price-list li:last-child{border-bottom:0;}
.price-list b{color:var(--green);white-space:nowrap;}
.side-ttl{font-size:13px;font-weight:700;color:var(--navy-dark);margin-bottom:8px;}
.src{font-size:12px;color:var(--text-sub);margin-top:12px;word-break:break-all;}
.no-data{font-size:13px;color:var(--gray-mid);}

/* 条件別おすすめ */
.pick-block{margin-bottom:30px;}
.pick-head{background:var(--navy-tint);border:1px solid #e2e2e2;border-radius:var(--radius) var(--radius) 0 0;padding:16px 20px;}
.pick-head__q{font-size:12px;font-weight:700;color:var(--green);letter-spacing:.02em;}
.pick-head__ttl{font-size:19px;font-weight:700;color:var(--navy-dark);margin-top:3px;line-height:1.5;}
.pick-head__txt{font-size:13.5px;color:var(--text-sub);margin-top:7px;}
.pick-items{border:1px solid var(--gray-line);border-top:0;border-radius:0 0 var(--radius) var(--radius);background:#fff;}
.pick-item{display:grid;grid-template-columns:1fr 190px;gap:18px;padding:17px 20px;border-bottom:1px solid var(--gray-line);align-items:start;}
.pick-item:last-child{border-bottom:0;}
.pick-item__name{font-size:16.5px;font-weight:700;color:var(--navy-dark);}
.pick-item__corp{font-size:11.5px;color:var(--gray-mid);font-weight:400;margin-left:6px;}
.pick-item__why{font-size:13.5px;color:var(--text);margin-top:6px;}
.pick-item__why b{color:var(--green);}
.pick-item__src{font-size:11.5px;color:var(--gray-mid);margin-top:6px;}
.pick-item__act{display:grid;gap:7px;}
.pick-item__tel{font-size:13px;font-weight:700;color:var(--navy-dark);text-align:center;}

/* ============================================================
   会社紹介ページ（詳細ビュー）
   ※ 当ガイドによる紹介ページ。公式サイトではない旨を上部に明示する
   ============================================================ */
#detail{display:none;}
.dt-ribbon{
  background:var(--navy-dark);color:#fff;font-size:12.5px;
  padding:9px 20px;text-align:center;
}
.dt-ribbon b{color:var(--green-light);}
.dt-ribbon a{color:#fff;text-decoration:underline;}
.dt-hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--gray-line);
  background:linear-gradient(135deg,#f4f8fc 0%,#f4f8fc 55%,#f4f8fc 100%);
}
.dt-hero::before{content:"";position:absolute;right:-110px;top:-110px;width:340px;height:340px;border-radius:50%;background:rgba(9,111,200,.07);}
.dt-hero::after{content:"";position:absolute;left:-130px;bottom:-150px;width:320px;height:320px;border-radius:50%;background:rgba(9,111,200,.08);}
.dt-hero__inner{max-width:var(--maxw);margin:0 auto;padding:34px 20px 30px;position:relative;z-index:1;}
.dt-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:14px;}
.dt-eyebrow{font-size:12.5px;font-weight:700;color:var(--green);letter-spacing:.04em;}
.dt-name{font-size:34px;font-weight:700;color:var(--navy-dark);line-height:1.35;margin-top:4px;letter-spacing:.01em;}
.dt-corp{font-size:13.5px;color:var(--text-sub);margin-top:4px;}
.dt-lead{font-size:15.5px;color:var(--text);line-height:1.95;margin-top:14px;max-width:780px;}
.dt-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.dt-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;align-items:center;}
.dt-tel{
  display:inline-flex;flex-direction:column;background:#fff;border:1px solid var(--gray-line);
  border-radius:8px;padding:7px 16px;line-height:1.3;
}
.dt-tel small{font-size:10.5px;color:var(--text-sub);}
.dt-tel b{font-size:18px;color:var(--navy-dark);}
.dt-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px;
}
.fact{background:#fff;border:1px solid var(--gray-line);border-radius:10px;padding:12px 14px;}
.fact__k{font-size:11px;color:var(--text-sub);font-weight:600;}
.fact__v{font-size:14px;font-weight:700;color:var(--navy-dark);margin-top:2px;line-height:1.5;}
.fact__v.is-none{color:var(--gray-mid);font-weight:600;}

.dt-body{max-width:var(--maxw);margin:0 auto;padding:44px 20px 10px;}
.dt-sec{margin-bottom:40px;}
.dt-sec__ttl{
  font-size:22px;font-weight:700;color:var(--navy-dark);margin-bottom:6px;line-height:1.5;
}
.dt-sec__sub{font-size:13.5px;color:var(--text-sub);margin-bottom:18px;}
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.hl{
  background:#fff;border:1px solid var(--gray-line);border-top:3px solid var(--green-mid);
  border-radius:var(--radius);padding:20px;
}
.hl__n{font-size:11.5px;font-weight:700;color:var(--green);letter-spacing:.06em;}
.hl__t{font-size:16.5px;font-weight:700;color:var(--navy-dark);margin:6px 0 8px;line-height:1.5;}
.hl__d{font-size:13.5px;color:var(--text-sub);}
.dt-svc{display:flex;flex-wrap:wrap;gap:8px;}
.dt-svc span{
  font-size:13.5px;background:var(--green-tint);color:var(--green);border:1px solid #c9c9c9;
  padding:6px 14px;border-radius:999px;font-weight:600;
}
.dt-official{
  background:linear-gradient(135deg,#f4f8fc 0%,#f5f4f2 100%);
  border:1px solid var(--gray-line);border-radius:var(--radius-lg);
  padding:28px;text-align:center;
}
.dt-official__t{font-size:20px;font-weight:700;color:var(--navy-dark);}
.dt-official__d{font-size:14px;color:var(--text-sub);margin-top:8px;}
.dt-official__u{
  display:inline-block;margin-top:14px;font-size:13px;color:var(--text-sub);
  background:#fff;border:1px solid var(--gray-line);border-radius:999px;padding:6px 16px;word-break:break-all;
}
.dt-official .dt-cta{justify-content:center;}
.dt-other{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.dt-other a{
  display:block;background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);
  padding:16px 18px;color:inherit;transition:.15s;
}
.dt-other a:hover{text-decoration:none;border-color:var(--green-light);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.dt-other__n{font-size:15px;font-weight:700;color:var(--navy-dark);}
.dt-other__d{font-size:12.5px;color:var(--text-sub);margin-top:4px;}
.dt-note{font-size:12.5px;color:var(--text-sub);background:var(--gray-bg);border-radius:var(--radius);padding:16px 20px;}

@media(max-width:980px){
  .dt-facts{grid-template-columns:1fr 1fr;}
  .hl-grid,.dt-other{grid-template-columns:1fr;}
  .dt-name{font-size:26px;}
}
@media(max-width:760px){
  .dt-facts{grid-template-columns:1fr;}
  .dt-name{font-size:23px;}
  .dt-cta .btn{width:100%;}
  .dt-tel{width:100%;align-items:center;}
}

/* 料金まとめ */
.tbl-simple{font-size:14px;background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);overflow:hidden;}
.tbl-simple th,.tbl-simple td{border-bottom:1px solid var(--gray-line);padding:12px 16px;text-align:left;}
.tbl-simple th{background:var(--navy-tint);color:var(--navy-dark);font-weight:700;width:46%;}
.tbl-simple tr:last-child th,.tbl-simple tr:last-child td{border-bottom:0;}
.tbl-simple td strong{color:var(--green);}

/* チェックリスト */
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.check{display:grid;grid-template-columns:40px 1fr;gap:13px;background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);padding:17px 19px;}
.check__mark{width:40px;height:40px;border-radius:50%;background:var(--green-tint);border:1px solid var(--green-light);display:grid;place-items:center;}
.check__mark::before{content:"";width:19px;height:19px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;}
.check__ttl{font-size:15.5px;font-weight:700;color:var(--navy-dark);}
.check__txt{font-size:13px;color:var(--text-sub);margin-top:4px;}

/* FAQ */
.faq{max-width:840px;margin:0 auto;}
.faq details{background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;}
.faq summary{cursor:pointer;padding:16px 46px 16px 52px;font-weight:700;font-size:15px;color:var(--navy-dark);position:relative;list-style:none;line-height:1.6;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"Q";position:absolute;left:16px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:13px;}
.faq summary::after{content:"";position:absolute;right:20px;top:22px;width:9px;height:9px;border-right:2px solid var(--gray-mid);border-bottom:2px solid var(--gray-mid);transform:rotate(45deg);transition:.2s;}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq__a{padding:0 20px 18px 52px;font-size:14px;color:var(--text-sub);position:relative;}
.faq__a::before{content:"A";position:absolute;left:16px;top:0;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;}

/* 出典 */
.src-list{background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);padding:20px 24px;font-size:13px;}
.src-list li{padding:6px 0;border-bottom:1px dashed var(--gray-line);}
.src-list li:last-child{border-bottom:0;}

/* フッター */
.footer{background:#f5f4f2;color:var(--text-sub);font-size:13.5px;border-top:1px solid var(--gray-line);}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:40px 20px 18px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px;}
.footer h4,.footer .footer__h{color:var(--navy-dark);font-size:14px;margin-bottom:12px;font-weight:700;padding-bottom:8px;border-bottom:1px solid #e2e2e2;}
.footer a{color:var(--text-sub);}
.footer li{margin-bottom:7px;}
.footer__desc{font-size:12.5px;line-height:1.9;}
.footer__bottom{border-top:1px solid #e2e2e2;text-align:center;padding:14px 20px 20px;font-size:12px;color:var(--gray-mid);}
.footer .logo__name{color:var(--navy-dark);}

@media(max-width:1040px){
  .gnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--gray-line);box-shadow:var(--shadow-md);z-index:60;}
  .gnav.is-open{display:block;}
  .gnav__list{flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 14px;}
  .gnav__list li{border-bottom:1px solid var(--gray-line);}
  .gnav__list li:last-child{border-bottom:0;}
  .gnav__list a{display:block;padding:12px 0;}
  .hamburger{display:block;}
  .header{position:relative;}
}
@media(max-width:980px){
  .pick-item{grid-template-columns:1fr;}
  .co__body{grid-template-columns:1fr;}
  .co__side{border-left:0;border-top:1px solid var(--gray-line);}
  .check-grid{grid-template-columns:1fr;}
  .footer__inner{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  body{font-size:15px;}
  .section{padding:40px 0;}
  .sec-head__ttl{font-size:21px;}
  .ttl-bar{font-size:18px;}
  .hero__copy{font-size:22px;}
  .hero__stat{gap:18px;}
  .gnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--gray-line);box-shadow:var(--shadow-md);}
  .gnav.is-open{display:block;}
  .gnav__list{flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 14px;}
  .gnav__list li{border-bottom:1px solid var(--gray-line);}
  .gnav__list li:last-child{border-bottom:0;}
  .gnav__list a{display:block;padding:12px 0;}
  .hamburger{display:block;}
  .header{position:relative;}
  .scroll-hint{display:block;}
  .spec dl{grid-template-columns:96px 1fr;font-size:13px;}
  .footer__inner{grid-template-columns:1fr;}
}

/* ===== REDESIGN-START ===== */
/* ------------------------------------------------------------
   配色トークンの入れ替え（後から宣言した :root が優先される）
   アクセントを青1色にまとめ、背景はごく薄いグレー、文字は #333
   ------------------------------------------------------------ */
:root{
  /* もとは青1色だった。モノクロにそろえるため、
     変数名はそのままに中身だけ黒と灰へ入れ替える。 */
  --navy:#0d0d0d;
  --navy-dark:#1a1a1a;
  --navy-soft:#c9c9c9;
  --navy-tint:#f5f4f2;
  --green:#0d0d0d;
  --green-hover:#333333;
  --green-mid:#0d0d0d;
  --green-light:#c9c9c9;
  --green-tint:#f5f4f2;
  --gray-bg:#f5f4f2;
  --gray-line:#e2e2e2;
  --gray-mid:#767676;   /* 小さな注記にも使うので AA（4.5:1）を満たす濃さにする */
  --text:#333333;
  --text-sub:#767676;
  --amber:#1a1a1a;      /* 黄色は使わない。強調も黒でそろえる */
  /* 角は丸めない */
  --radius:0px;
  --radius-lg:0px;
  --shadow:none;
  --shadow-md:none;
}

/* ------------------------------------------------------------
   本文：行間2.0、段落間をゆったり
   ------------------------------------------------------------ */
body{line-height:1.9;background:#fff;font-feature-settings:"palt";}
.section{padding:64px 0;}
.stack>*+*{margin-top:26px;}
a{color:var(--navy);}

/* ------------------------------------------------------------
   見出し：中央寄せの下線をやめ、左に丸い青バーを置く
   ------------------------------------------------------------ */
.sec-head{text-align:left;margin-bottom:30px;}
.sec-head__en{color:var(--gray-mid);font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px;}
.sec-head__ttl{
  position:relative;padding-left:26px;font-size:26px;font-weight:500;
  color:var(--navy-dark);line-height:1.6;
}
.sec-head__ttl::after{display:none;}
.sec-head__ttl::before{
  content:"";position:absolute;left:0;top:.22em;
  width:6px;height:1.12em;background:var(--navy);border-radius:0;
}
.sec-head__lead{margin-top:14px;font-size:14.5px;line-height:1.95;}
.ttl-bar{
  position:relative;border-left:0;padding-left:26px;
  font-size:22px;font-weight:500;line-height:1.6;margin-bottom:22px;
}
.ttl-bar::before{
  content:"";position:absolute;left:0;top:.22em;
  width:6px;height:1.12em;background:var(--navy);border-radius:0;
}

/* ------------------------------------------------------------
   ヘッダー／パンくず
   ------------------------------------------------------------ */
.header{background:#fff;border-bottom:1px solid var(--gray-line);}
.logo__mark{border-radius:0;}
.gnav__list a:hover{color:var(--navy);}
.breadcrumb{background:#fff;border-bottom:1px solid var(--gray-line);}

/* ------------------------------------------------------------
   ファーストビュー：グラデーションと飾り円をやめてフラットに
   ------------------------------------------------------------ */
.hero,.dt-hero{background:#fff;border-bottom:1px solid var(--gray-line);}
.hero::before,.hero::after,.dt-hero::before,.dt-hero::after{display:none;}
.hero__inner{padding:56px 20px 52px;}
.hero__badge{border-radius:0;border-color:var(--navy-soft);color:var(--navy);}
.hero__copy{font-size:34px;font-weight:700;line-height:1.5;letter-spacing:.01em;}
.hero__copy em{color:var(--navy);}
.hero__lead{line-height:2;font-size:15.5px;}
.hero__stat strong{color:var(--navy);}
.dt-name{font-weight:700;}
.dt-lead{line-height:2;}

/* ------------------------------------------------------------
   ボタン：ピル形状、青1色
   ------------------------------------------------------------ */
.btn{border-radius:0;padding:14px 28px;font-size:15px;}
.btn--sm{border-radius:0;padding:8px 17px;font-size:13px;}
.btn--green,.btn--navy{background:var(--navy);border-color:var(--navy);color:#fff;}
.btn--green:hover,.btn--navy:hover{background:var(--green-hover);border-color:var(--green-hover);}
.btn--ghost{background:#fff;color:var(--navy);border-color:var(--navy);}
.btn--ghost:hover{background:var(--navy-tint);}

/* ------------------------------------------------------------
   比較表：ヘッダーを青地に白、全セルに罫線、余白を広く
   ------------------------------------------------------------ */
.table-wrap{border-radius:0;border-color:var(--gray-line);}
.tbl th,.tbl td{border:1px solid var(--gray-line);padding:14px 15px;}
.tbl thead th{
  background:var(--navy);color:#fff;font-weight:700;font-size:13px;
  border:1px solid var(--navy);border-right-color:rgba(255,255,255,.3);
}
.tbl tbody tr:nth-child(even){background:#fafafa;}
.tbl tbody tr:hover{background:var(--navy-tint);}
.tbl .name{color:var(--navy);}

.tbl-simple{border-radius:0;border-color:var(--gray-line);}
.tbl-simple th,.tbl-simple td{border:1px solid var(--gray-line);padding:16px 20px;}
.tbl-simple th{background:var(--navy);color:#fff;font-weight:700;}
.tbl-simple tr:last-child th,.tbl-simple tr:last-child td{border-bottom:1px solid var(--gray-line);}
.tbl-simple td strong{color:var(--navy);}

/* ------------------------------------------------------------
   カード類：角丸を控えめに、影を薄く
   ------------------------------------------------------------ */
.co,.hl,.check,.note-box,.src-list,.pick-items,.pick-head,.dt-other a,.faq details,.fact{
  border-radius:0;
}
.co{box-shadow:none;}
.co__head{background:#fff;}
.hl{border-top:3px solid var(--navy);box-shadow:none;}
.hl__n{color:var(--navy);}
.hl__t{font-weight:700;}
.dt-other a:hover{box-shadow:var(--shadow-md);border-color:var(--navy-soft);}
.check__mark{background:var(--navy-tint);border-color:var(--navy-soft);}
.check__mark::before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");}
.note-box{border-left:4px solid var(--navy);}
.note-box--amber{border-left-color:var(--gray-mid);background:var(--gray-bg);}
/* 旧配色に残っていた薄い黄色。灰色にそろえる */
:root{--amber-tint:#f5f4f2;}

/* ------------------------------------------------------------
   タグ・チップ：ピル形状で青にそろえる
   ------------------------------------------------------------ */
.tag,.tag--green,.svc span,.dt-svc span,.dt-badges .tag{border-radius:0;}
.tag,.tag--green{background:var(--navy-tint);color:var(--navy);border-color:var(--navy-soft);}
.tag--amber{background:#fff;color:var(--amber);border-color:var(--navy-dark);}
.svc span,.dt-svc span{background:var(--navy-tint);color:var(--navy);border-color:var(--navy-soft);}
.legend--bar{border-color:var(--gray-line);}
.mark-o{color:var(--navy);}

/* ------------------------------------------------------------
   比較表：1列目（会社名）を固定して、横スクロールしても
   どの会社の行か分かるようにする
   ------------------------------------------------------------ */
.tbl th:first-child,.tbl td:first-child{
  position:sticky;left:0;z-index:2;background:#fff;
  box-shadow:2px 0 5px rgba(0,0,0,.05);
}
.tbl thead th:first-child{background:var(--navy);z-index:3;}
.tbl tbody tr:nth-child(even) td:first-child{background:#fafafa;}
.tbl tbody tr:hover td:first-child{background:var(--navy-tint);}

/* ------------------------------------------------------------
   業者一覧の要約カード（詳しい内容は紹介ページに任せる）
   ------------------------------------------------------------ */
.co__sum{padding:14px 20px 18px;}
.co__txt{font-size:13.5px;color:var(--text);line-height:1.9;}
.co__act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
.co__tel{font-weight:700;font-size:14px;margin-right:4px;}
.co--sum .co__name a{color:var(--navy-dark);text-decoration:none;}
.co--sum .co__name a:hover{color:var(--navy);text-decoration:underline;}
a.tel{white-space:nowrap;}

/* フィルタタブ */
.tab{border-color:var(--gray-line);}
.tab:hover{border-color:var(--navy);color:var(--navy);}
.tab.is-active{background:var(--navy);border-color:var(--navy);color:#fff;}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq summary{font-weight:700;}
.faq summary::before,.faq__a::before{background:var(--navy);}
.faq__a{line-height:2;}

/* ------------------------------------------------------------
   会社紹介ページ（詳細ビュー）
   ------------------------------------------------------------ */
.dt-sec__ttl{
  position:relative;padding-left:26px;font-weight:500;font-size:23px;
}
.dt-sec__ttl::before{
  content:"";position:absolute;left:0;top:.22em;
  width:6px;height:1.12em;background:var(--navy);border-radius:0;
}
.dt-sec__sub{padding-left:26px;}
.dt-ribbon{background:var(--navy);}
.dt-ribbon b{color:#fff;text-decoration:underline;}
.dt-official{background:var(--navy-tint);border-color:var(--navy-soft);border-radius:0;}
.dt-official__t{font-weight:700;}
.price-list b{color:var(--navy);}

/* ------------------------------------------------------------
   目的別ボタン（市ページの「目的から探す」）
   ------------------------------------------------------------ */
.purpose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.purpose{
  display:block;background:#fff;border:1px solid var(--gray-line);border-radius:0;
  padding:18px 20px;color:inherit;text-decoration:none;transition:.15s;
}
.purpose:hover{text-decoration:none;border-color:var(--navy);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.purpose__t{display:block;font-size:17px;font-weight:700;color:var(--navy);line-height:1.5;}
.purpose__d{display:block;font-size:13px;color:var(--text-sub);margin-top:4px;line-height:1.7;}
.purpose__n{
  display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--navy);
  background:var(--navy-tint);border:1px solid var(--navy-soft);border-radius:0;padding:2px 12px;
}
@media(max-width:980px){ .purpose-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .purpose-grid{grid-template-columns:1fr;} }

/* ------------------------------------------------------------
   フッター
   ------------------------------------------------------------ */
.footer{background:var(--gray-bg);border-top:1px solid var(--gray-line);}
.footer h4{border-bottom-color:var(--gray-line);}
.footer__bottom{border-top-color:var(--gray-line);}

/* ------------------------------------------------------------
   スマートフォン
   ------------------------------------------------------------ */
@media(max-width:760px){
  .sec-head__ttl{font-size:21px;padding-left:20px;}
  .sec-head__ttl::before{width:5px;}
  .ttl-bar{font-size:18.5px;padding-left:20px;}
  .ttl-bar::before{width:5px;}
  .hero__copy{font-size:24px;}
  .section{padding:46px 0;}
  .btn{padding:13px 22px;}
  .dt-sec__ttl{font-size:19.5px;padding-left:20px;}
  .dt-sec__ttl::before{width:5px;}
  .dt-sec__sub{padding-left:20px;}
  /* スマホではヘッダーを簡略化する（ロゴの折り返しで画面を圧迫しない） */
  .logo__name{font-size:13.5px;}
  .logo__cap{display:none;}
  .logo__mark{width:32px;height:32px;font-size:14px;}
}

/* ------------------------------------------------------------
   文字まわりを「店舗デザイン」とそろえる
   書体、行間、見出しの大きさ、リンクの反応。
   見出しは向こうが h1=56px / h2=40px だが、こちらは市名や県名が
   入って行が長くなるため、少し抑えた大きさにしている。
   ------------------------------------------------------------ */
body,.hero__copy,.sec-head__ttl,.ttl-bar,.co__name,.dt-name{
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;
}
a{transition:opacity .25s ease,color .25s ease;}
a:hover{opacity:.65;}

.hero__copy{font-size:44px;line-height:1.4;letter-spacing:.01em;color:var(--navy-dark);}
.hero__copy em{color:var(--navy-dark);font-style:normal;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;}
.hero__lead{font-size:15.5px;line-height:1.95;color:var(--text-sub);}

.sec-head__ttl{font-size:32px;font-weight:700;line-height:1.5;}
.ttl-bar{font-size:26px;font-weight:700;}
.section{padding:72px 0;}

/* 取りこぼしていた丸み。絞り込みタブ、メニューボタン、チェック印 */
.tab,.tab:hover,.tab.is-active{border-radius:0;}
.hamburger{border-radius:0;}
.check__mark{border-radius:0;}

/* トップページだけが持っているパーツ。ここも四角にそろえる */
.purpose-card__icon,.purpose-card__price,.point-card__no,
.rule__mark,.news__tag,.area-card,.step__no,.badge{border-radius:0;}
.pick__list a,.pick__list span{border-radius:0;}
.pref-card__cities span,.pref-card__cities a{border-radius:0;}

/* ------------------------------------------------------------
   ヘッダー上段（サイト共通のページへ）
   高さを抑えたいので、文字は小さく、余白は詰める。
   ------------------------------------------------------------ */
.utilnav{
  background:var(--navy-dark);color:#fff;
  border-bottom:1px solid var(--navy-dark);
}
.utilnav__inner{
  max-width:1200px;margin-inline:auto;padding:0 20px;
}
.utilnav__list{
  display:flex;flex-wrap:wrap;gap:0 22px;
  margin:0;padding:0;list-style:none;
  font-size:11.5px;letter-spacing:.06em;line-height:34px;
}
.utilnav__list a{color:#fff;text-decoration:none;opacity:.82;}
.utilnav__list a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}
.utilnav__here{color:#fff;opacity:.5;}
/* 上段はスクロールで流れる（貼り付かない）。
   下段のヘッダーだけが画面上部に貼り付くので top は 0 のままにする。
   ページ内リンクで飛んだときに見出しがヘッダーの下に隠れないよう、
   その分の余白をとっておく。 */
html{scroll-padding-top:64px;}
@media(max-width:760px){
  .utilnav__list{gap:0 14px;font-size:11px;line-height:30px;}
}

/* ------------------------------------------------------------
   画像の置き場所
   写真はまだ無い。灰色の枠に小さな文字が入るだけのダミーを置き、
   用意できたら中に <img> を入れて .is-photo を足せば差し替わる。
   ------------------------------------------------------------ */
.ph{
  position:relative;overflow:hidden;margin:0;
  background:
    repeating-linear-gradient(135deg,rgba(0,0,0,.028) 0 2px,transparent 2px 7px),
    linear-gradient(150deg,#ececea 0%,#dedcd8 55%,#cfcdc9 100%);
}
.ph::after{
  content:attr(data-label);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:.24em;color:#8d8b87;text-align:center;padding:8px;
}
.ph.is-photo{background:none;}
.ph.is-photo::after{display:none;}
.ph.is-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.ph-sq{aspect-ratio:1/1;}
.ph-tall{aspect-ratio:3/4;}
.ph-wide{aspect-ratio:3/2;}

/* ヒーローを2段組みにする。文章が左、写真の枠が右 */
.hero__inner{display:grid;grid-template-columns:1fr minmax(240px,332px);gap:44px;align-items:center;}
.hero__body{min-width:0;}
.hero__visual{width:100%;}

/* 目的別カードの上に正方形の枠 */
.purpose{display:flex;flex-direction:column;}
.purpose__ph{display:block;width:100%;margin-bottom:14px;}

@media(max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:26px;}
  .hero__visual{display:none;}
}
.pref-card__cities span,.pref-card__cities a{border-radius:0;}

@media(max-width:760px){
  .hero__copy{font-size:30px;}
  .sec-head__ttl{font-size:23px;}
  .ttl-bar{font-size:20px;}
  .section{padding:52px 0;}
}
/* ===== REDESIGN-END ===== */

/* 作業の流れ（このページのみ） */
.flow{counter-reset:f;max-width:860px;margin:0 auto;}
.flow__i{display:grid;grid-template-columns:44px 1fr;gap:15px;background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;align-items:start;}
.flow__n{width:34px;height:34px;border-radius:0;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;}
.flow__t{font-size:16px;font-weight:700;color:var(--navy-dark);line-height:1.5;}
.flow__d{font-size:13.5px;color:var(--text-sub);margin-top:5px;}
@media(max-width:760px){
  .flow__i{grid-template-columns:36px 1fr;gap:12px;padding:14px 16px;}
  .flow__n{width:30px;height:30px;font-size:13.5px;}
}

/* 作業の流れ（このページのみ） */
.flow{counter-reset:f;max-width:860px;margin:0 auto;}
.flow__i{display:grid;grid-template-columns:44px 1fr;gap:15px;background:#fff;border:1px solid var(--gray-line);border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;align-items:start;}
.flow__n{width:34px;height:34px;border-radius:0;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;}
.flow__t{font-size:16px;font-weight:700;color:var(--navy-dark);line-height:1.5;}
.flow__d{font-size:13.5px;color:var(--text-sub);margin-top:5px;}
@media(max-width:760px){
  .flow__i{grid-template-columns:36px 1fr;gap:12px;padding:14px 16px;}
  .flow__n{width:30px;height:30px;font-size:13.5px;}
}