/* ============================================================
   databunseki.jp 公開ページ（トップ・データパレット・料金）の共通スタイル
   2026-10-08 作成。ナビ・フッター・見出し・表を3ページでそろえる。
   方針：主色は #5E5F97 の1色。区切りは罫線と余白で行い、
   丸数字・ピル型ラベル・チェック記号・色帯・アイコンの箱・
   スクロール時の出現演出・ホバーで浮く動きは使わない。
   ============================================================ */
:root{
  --paper:#F4F1EB; --bg2:#EFEBE2; --surface:#FFFFFF;
  --line:#E2DBCD; --line2:#D3CAB8;
  --ink:#2E2A26; --muted:#665F54; --faint:#8F8879;
  --accent:#5E5F97; --accent-deep:#474874;
  --sans:"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  --w:1080px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.85;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt";overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.container{max-width:var(--w);margin:0 auto;padding:0 22px;}
.narrow{max-width:820px;}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:200;}
.skip:focus{left:0;}
h1,h2,h3,h4{font-weight:700;letter-spacing:.01em;line-height:1.45;}
.num{font-variant-numeric:tabular-nums;}

/* ---- ナビ ---- */
.hp-nav{position:sticky;top:0;z-index:50;background:rgba(244,241,235,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;gap:24px;height:64px;}
.brand{display:flex;flex-direction:column;line-height:1.15;}
.brand b{font-size:18px;font-weight:700;color:var(--ink);}
.brand span{font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;font-weight:600;margin-top:3px;}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:14px;font-weight:500;white-space:nowrap;}
.nav-links a{color:var(--muted);padding:6px 0;border-bottom:2px solid transparent;}
.nav-links a:hover{color:var(--ink);}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent);}
.nav-cta{display:flex;gap:10px;}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line2);border-radius:8px;background:var(--surface);color:var(--ink);place-items:center;cursor:pointer;}
.burger svg{width:22px;height:22px;}
.drawer{display:none;flex-direction:column;padding:4px 22px 18px;border-top:1px solid var(--line);background:var(--surface);}
.drawer a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink);}
.drawer a:last-child{border-bottom:none;}
.drawer .dcta{margin-top:14px;background:var(--accent);color:#fff;border-radius:8px;text-align:center;font-weight:700;border-bottom:none;padding:14px;}
@media(max-width:880px){.nav-links,.nav-cta{display:none;}.burger{display:grid;}}

/* ---- ボタン ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;font-weight:700;font-size:14px;padding:11px 20px;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line2);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-deep);}
.btn-lg{font-size:15px;padding:14px 30px;}
.link{color:var(--accent-deep);font-weight:700;border-bottom:1px solid currentColor;}
.link:hover{color:var(--ink);}

/* ---- パンくず ---- */
.crumb{font-size:12.5px;color:var(--muted);padding-top:18px;}
.crumb a{color:var(--muted);border-bottom:1px solid var(--line2);}
.crumb a:hover{color:var(--ink);}

/* ---- 先頭 ---- */
.hero{padding:60px 0 56px;}
/* 画面の画像が横長（約2.8:1）なので、文章の下に全幅で置く */
.hero-grid{display:grid;grid-template-columns:1fr;gap:44px;}
.hero-grid>div:first-child{max-width:780px;}
.facts{max-width:620px;}
.hero .over{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:14px;}
.hero h1{font-size:clamp(26px,4.2vw,42px);line-height:1.45;}
.hero h1 .ib{display:inline-block;}
.hero h1 .ib:first-child{display:block;}
.hero .sub{color:var(--muted);font-size:clamp(14.5px,1.6vw,16px);max-width:540px;margin:20px 0 26px;}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.hero .note{margin-top:12px;font-size:12.5px;color:var(--faint);}

/* 先頭の要点（料金など） */
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line);}
.facts>div{padding:14px 14px 14px 0;}
.facts>div+div{padding-left:16px;border-left:1px solid var(--line);}
.facts dt{font-size:12px;color:var(--muted);}
.facts dd{font-size:18px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;}
.facts dd small{font-size:12px;font-weight:500;color:var(--muted);margin-left:3px;white-space:nowrap;}
@media(max-width:480px){.facts dd{font-size:16px;}.facts dd small{display:block;margin-left:0;}.facts>div+div{padding-left:10px;}
  .hero .actions .btn{width:100%;}}

/* ---- 画面の画像 ---- */
.shot{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.shot img{width:100%;}
.cap{font-size:12.5px;color:var(--muted);margin-top:10px;}

/* ---- セクション ---- */
section{padding:68px 0;}
.bg2{background:var(--bg2);}
.h2{font-size:clamp(22px,3vw,30px);margin-bottom:10px;}
.lead{color:var(--muted);max-width:680px;margin-bottom:34px;}
.more{margin-top:28px;}

/* 機能の一覧（左に名前、右に説明。罫線で区切る） */
.rows{border-top:1px solid var(--line2);}
.rows>div{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);}
.rows dt{font-weight:700;font-size:16.5px;}
.rows dt small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:2px;}
.rows dd{color:var(--muted);font-size:14.5px;}
.rows dd b{color:var(--ink);font-weight:700;}
@media(max-width:700px){.rows>div{grid-template-columns:1fr;gap:6px;padding:18px 0;}}

/* 画面の並び */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:34px 28px;}
@media(max-width:820px){.gallery{grid-template-columns:1fr;}}
.gallery h3{font-size:15.5px;margin-bottom:10px;}

/* 画面＋説明の行 */
.screen{display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:start;padding:36px 0;border-top:1px solid var(--line);}
.lead+.screen{border-top:none;padding-top:6px;}
.screen h3{font-size:19px;margin-bottom:8px;}
.screen p{color:var(--muted);font-size:14.5px;}
.screen p+p{margin-top:10px;}
@media(max-width:820px){.screen{grid-template-columns:1fr;gap:16px;}}

/* 表 */
.tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);font-size:14.5px;}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:15px 20px;border-top:1px solid var(--line);}
.tbl tr:first-child th,.tbl tr:first-child td{border-top:none;}
.tbl th{width:30%;font-weight:700;color:var(--ink);white-space:nowrap;}
.tbl td{color:var(--muted);}
.tbl td b{color:var(--ink);}
.tbl .price{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
@media(max-width:620px){.tbl th,.tbl td{display:block;width:auto;padding:0 16px;border-top:none;}
  .tbl th{padding-top:14px;border-top:1px solid var(--line);}.tbl td{padding-bottom:14px;}
  .tbl tr:first-child th{border-top:none;}.tbl th{white-space:normal;}}

/* 料金の枠 */
.price-box{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:28px 32px;}
.price-box .name{font-size:13px;color:var(--muted);font-weight:600;}
.price-box .amt{font-size:clamp(34px,5vw,44px);font-weight:700;line-height:1.2;margin-top:4px;font-variant-numeric:tabular-nums;}
.price-box .amt small{font-size:15px;font-weight:500;color:var(--muted);margin-left:4px;}
.price-box .tax{font-size:13.5px;color:var(--muted);margin-top:4px;}
.price-box .terms{font-size:14px;margin-top:12px;}
@media(max-width:700px){.price-box{grid-template-columns:1fr;padding:24px 22px;}}

/* 手順（番号は文字だけ） */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:st;border-top:1px solid var(--line2);}
.steps li{counter-increment:st;padding:22px 22px 6px 0;}
.steps li+li{padding-left:22px;border-left:1px solid var(--line);}
.steps li::before{content:counter(st);display:block;font-size:24px;font-weight:700;color:var(--accent);line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums;}
.steps h3{font-size:16px;margin-bottom:6px;}
.steps p{color:var(--muted);font-size:14px;}
@media(max-width:820px){.steps{grid-template-columns:1fr;}.steps li,.steps li+li{padding:18px 0;border-left:none;border-bottom:1px solid var(--line);}}

/* よくある質問 */
.faqs{border-top:1px solid var(--line2);}
.faqs details{border-bottom:1px solid var(--line);}
.faqs summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;font-weight:700;font-size:15px;}
.faqs summary::-webkit-details-marker{display:none;}
.faqs summary::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s;}
.faqs details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faqs .a{padding:0 0 20px;color:var(--muted);font-size:14.5px;max-width:760px;}
.faqs .a a{color:var(--accent-deep);font-weight:700;border-bottom:1px solid currentColor;}

/* そのほかのサービス */
.svc{border-top:1px solid var(--line2);}
.svc>div{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);}
.svc h3{font-size:15.5px;}
.svc p{color:var(--muted);font-size:14px;}
.svc a{color:var(--accent-deep);font-weight:700;}
@media(max-width:700px){.svc>div{grid-template-columns:1fr;gap:4px;}}

/* お知らせ */
.news{border-top:1px solid var(--line2);}
.news-item{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);}
.news-item .date{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;padding-top:2px;}
.news-item h4{font-size:15px;}
.news-item p{color:var(--muted);font-size:13.5px;margin-top:3px;}
.news-item .tag{font-size:12px;color:var(--muted);font-weight:500;}
a.news-item:hover h4{color:var(--accent-deep);}
@media(max-width:600px){.news-item{grid-template-columns:1fr;gap:2px;}}

/* 相談の案内 */
.cta{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:48px 32px;text-align:center;}
.cta h2{font-size:clamp(21px,3vw,28px);}
.cta p{color:var(--muted);margin:12px auto 26px;max-width:540px;}
.cta .mail{margin-top:22px;font-size:13.5px;color:var(--muted);}
.cta .mail a{color:var(--accent-deep);border-bottom:1px solid currentColor;}

/* フッター */
.hp-foot{border-top:1px solid var(--line);padding:44px 0 28px;color:var(--muted);font-size:13px;background:var(--surface);}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:22px;}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid .fh{font-size:12px;color:var(--ink);font-weight:700;margin-bottom:8px;}
.foot-grid a{display:block;padding:5px 0;color:var(--muted);}
.foot-grid a:hover{color:var(--ink);}
.foot-brand b{font-size:15px;color:var(--ink);}
.foot-brand p{margin-top:10px;font-size:12.5px;max-width:320px;line-height:1.8;}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);margin-top:28px;padding-top:18px;font-size:12.5px;}

/* スマホの下部固定ボタン */
.mcta{display:none;}
@media(max-width:880px){
  .mcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(244,241,235,.97);
    border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));}
  .mcta a{display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:700;font-size:15px;padding:13px;border-radius:8px;}
  body.has-mcta{padding-bottom:74px;}
}