@charset "UTF-8";
/* =========================================================
   PURPOSE
   社会保険労務士事務所サイト（制作サンプル）の共通スタイル。
   全8ページから読み込む。ページ固有のスタイルは各HTMLに書かない。

   設計方針
   - 色数を絞る：墨・深緑・若葉・紙。朱は注意書きだけに使う。
   - 罫線と欄の意匠を使う。士業の書類の見え方に寄せる。
   - モバイル優先。760pxで本文、1000pxで一覧系を組む。

   目次
   1. トークン / 2. 基本 / 3. ヘッダー / 4. ヒーロー
   5. セクション共通 / 6. 部品 / 7. 助成金ブラウザ
   8. フォーム / 9. フッター / 10. 個別調整
   ========================================================= */

/* ---- 1. トークン ---- */
:root{
  --sumi:#12211F;      /* 墨：本文 */
  --midori:#1F4B3F;    /* 深緑：主色 */
  --wakaba:#5E8A72;    /* 若葉：補助 */
  --shu:#B33A2B;       /* 朱：注意のみ */
  --kohaku:#C79A3A;    /* 琥珀：注釈の帯 */
  --kami:#F2F4F1;      /* 紙：背景 */
  --shiro:#FFFFFF;
  --kei:#D3DAD4;       /* 罫線 */
  --usu:#6C7B74;       /* 薄墨 */
  --min:"Shippori Mincho B1", serif;
  --goth:"Zen Kaku Gothic New", sans-serif;
}

/* ---- 2. 基本 ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--kami);color:var(--sumi);font-family:var(--goth);line-height:1.9;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--midori);outline-offset:3px}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
.wrap-wide{max-width:1000px;margin:0 auto;padding:0 22px}

.demobar{background:var(--sumi);color:#E6EDE8;font-size:11px;letter-spacing:.1em;text-align:center;padding:8px 16px;line-height:1.75}
.demobar b{color:#fff}

/* ---- 3. ヘッダー ---- */
.head{position:sticky;top:0;z-index:60;background:rgba(242,244,241,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--kei)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;max-width:1000px;margin:0 auto}
.logo{font-family:var(--min);font-weight:800;font-size:15px;letter-spacing:.04em;line-height:1.4;text-decoration:none;color:var(--sumi);flex:none}
.logo span{display:block;font-family:var(--goth);font-weight:500;font-size:9.5px;letter-spacing:.2em;color:var(--usu);margin-top:2px}
.head-right{display:flex;align-items:center;gap:6px}
.gnav{display:flex;gap:2px}
.gnav a{font-size:12.5px;font-weight:500;color:var(--sumi);text-decoration:none;padding:8px 9px;border-radius:2px}
.gnav a:hover{background:#E5EAE5}
.gnav a[aria-current="page"]{font-weight:700;color:var(--midori);box-shadow:inset 0 -2px 0 var(--midori)}
.btn-head{flex:none;background:var(--midori);color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:9px 15px;border-radius:2px;white-space:nowrap}
.menu-toggle{display:none;background:none;border:1px solid var(--kei);border-radius:2px;font-family:var(--goth);font-size:12px;font-weight:700;color:var(--sumi);padding:8px 11px;cursor:pointer}
.drawer{display:none;border-top:1px solid var(--kei);background:var(--kami)}
.drawer.open{display:block}
.drawer a{display:block;padding:14px 22px;border-bottom:1px solid var(--kei);font-size:14px;font-weight:500;color:var(--sumi);text-decoration:none}

/* ---- 4. ヒーロー ---- */
.hero{padding:60px 0 46px}
.hero h1{font-family:var(--min);font-weight:800;font-size:clamp(28px,7.4vw,44px);line-height:1.55;letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--midori)}
.hero p{margin-top:20px;font-size:15px;color:#33443D;max-width:32em}
.hero-note{margin-top:16px;font-size:12.5px;color:var(--usu)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

.page-head{padding:48px 0 26px}
.page-head h1{font-family:var(--min);font-weight:800;font-size:clamp(25px,6.4vw,36px);line-height:1.55;letter-spacing:.02em}
.page-head p{margin-top:16px;font-size:14.5px;color:#33443D;max-width:34em}

/* ---- 5. セクション共通 ---- */
.sec{padding:52px 0;border-top:1px solid var(--kei)}
.sec-plain{padding:44px 0}
.sec h2{font-family:var(--min);font-weight:800;font-size:23px;line-height:1.55;letter-spacing:.03em}
.lead{margin-top:14px;font-size:14.5px;color:#3A4A44;max-width:36em}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--wakaba);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--kei)}
.eyebrow-en{font-family:var(--goth);font-size:10.5px;letter-spacing:.3em;color:var(--wakaba);font-weight:700;margin-bottom:8px;display:block}

/* ---- 6. 部品 ---- */
.btn{display:inline-block;text-decoration:none;font-size:14px;font-weight:700;padding:14px 24px;border-radius:2px;letter-spacing:.03em;border:1px solid transparent;cursor:pointer;font-family:var(--goth)}
.btn-main{background:var(--midori);color:#fff}
.btn-sub{background:transparent;color:var(--midori);border-color:var(--midori)}
.btn-light{background:#fff;color:var(--midori)}

/* 数値バッジ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--kei);border:1px solid var(--kei);margin-top:34px}
.stat{background:var(--kami);padding:18px 16px}
.stat dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--usu)}
.stat dd{font-family:var(--min);font-weight:800;font-size:22px;line-height:1.4;margin-top:4px;letter-spacing:.02em}
.stat dd small{display:block;font-family:var(--goth);font-weight:400;font-size:11.5px;color:var(--usu);letter-spacing:0;margin-top:3px}

/* 番号つきの理由 */
.reasons{margin-top:28px;display:grid;gap:2px}
.reason{background:var(--shiro);border:1px solid var(--kei);padding:20px}
.reason .num{font-family:var(--min);font-weight:800;font-size:13px;color:var(--wakaba);letter-spacing:.1em}
.reason b{font-family:var(--min);font-weight:800;font-size:17px;display:block;line-height:1.6;margin-top:5px}
.reason p{font-size:13.5px;color:#3E4E48;margin-top:7px}

/* カード（業務・料金など） */
.cards{margin-top:26px;display:grid;gap:2px}
.card{background:var(--shiro);border:1px solid var(--kei);padding:22px 20px}
.card h3{font-family:var(--min);font-weight:800;font-size:18px;line-height:1.6}
.card .tagline{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--wakaba);margin-bottom:6px;display:block}
.card p{font-size:13.5px;color:#3E4E48;margin-top:9px}
.card .price{font-size:14px;font-weight:700;color:var(--midori);margin-top:12px;border-top:1px solid var(--kei);padding-top:12px}
.card .price small{display:block;font-weight:400;font-size:11.5px;color:var(--usu);margin-top:3px}
.card ul{list-style:none;font-size:13.5px;margin-top:10px}
.card li{padding-left:17px;position:relative;line-height:1.8}
.card li::before{content:"";position:absolute;left:2px;top:12px;width:5px;height:5px;background:var(--wakaba);border-radius:50%}

/* 帯（緑背景の訴求） */
.promo{background:var(--midori);color:#EAF2ED;padding:36px 24px;margin-top:10px}
.promo .eyebrow{color:#9CC4AE}
.promo .eyebrow::after{background:rgba(255,255,255,.25)}
.promo h2{font-family:var(--min);font-weight:800;font-size:22px;line-height:1.6;color:#fff}
.promo p{font-size:14px;margin-top:14px;color:#C9DCD1;max-width:31em}
.promo .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.promo .chips span{font-size:12.5px;background:rgba(255,255,255,.13);padding:6px 12px;border-radius:2px}
.promo .btn{margin-top:22px}

/* 罫線つきの一覧（事務所概要など） */
.rows{margin-top:24px;border-top:1px solid var(--kei)}
.row{display:flex;gap:16px;border-bottom:1px solid var(--kei);padding:14px 2px;align-items:baseline}
.row dt{flex:none;width:108px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--usu);border:1px solid var(--kei);border-radius:2px;text-align:center;padding:3px 0;background:var(--shiro)}
.row dd{font-size:14px;line-height:1.8}

/* 年表 */
.years{margin-top:22px}
.year{display:flex;gap:18px;padding:15px 0;border-top:1px solid var(--kei)}
.year time{flex:none;width:76px;font-size:12px;font-weight:700;color:var(--wakaba);padding-top:3px}
.year p{font-size:14px}
.year p b{font-family:var(--min);font-weight:800;font-size:15px}

/* 手順 */
.steps{margin-top:26px;counter-reset:step}
.step{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--kei)}
.step .no{flex:none;width:34px;height:34px;border:1.5px solid var(--midori);border-radius:50%;color:var(--midori);font-family:var(--min);font-weight:800;font-size:14px;display:grid;place-content:center}
.step b{font-family:var(--min);font-weight:800;font-size:16.5px;display:block;line-height:1.6}
.step p{font-size:13.5px;color:#3E4E48;margin-top:6px}
.step .dur{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--wakaba);margin-top:8px;display:block}

/* Q&A */
.qa{margin-top:24px;border-top:1px solid var(--kei)}
.qa details{border-bottom:1px solid var(--kei);background:var(--shiro)}
.qa summary{cursor:pointer;list-style:none;padding:17px 18px;font-size:14.5px;font-weight:500;line-height:1.75;position:relative;padding-right:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";font-family:var(--min);font-weight:800;color:var(--wakaba);margin-right:9px}
.qa summary::after{content:"";position:absolute;right:19px;top:26px;width:8px;height:8px;border-right:1.5px solid #9DA9A2;border-bottom:1.5px solid #9DA9A2;transform:rotate(45deg)}
.qa details[open] summary::after{transform:rotate(-135deg);top:29px}
.qa .a{padding:0 18px 20px;font-size:13.5px;color:#3E4E48;line-height:1.85}

/* 注記 */
.note{margin-top:20px;font-size:12px;line-height:1.85;color:var(--usu);border:1px dashed var(--kei);padding:14px 16px}
.warn{background:var(--kami);border-left:3px solid var(--kohaku);padding:13px 15px;font-size:13px;line-height:1.8}

/* ---- 7. 助成金ブラウザ ---- */
.browser{background:var(--shiro);border:1px solid var(--kei);margin-bottom:16px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:12px 16px;border-bottom:1px solid var(--kei);background:var(--kami);font-size:12px;min-height:44px}
.crumb button{background:none;border:none;font-family:var(--goth);font-size:12px;font-weight:700;color:var(--midori);cursor:pointer;padding:4px 2px;text-decoration:underline}
.crumb .sep{color:#A9B3AD;padding:0 2px}
.crumb .now{color:var(--usu);font-weight:500}
.cols{display:grid;grid-template-columns:1fr}
.col{border-right:1px solid var(--kei);min-width:0}
.col:last-child{border-right:none}
.coltitle{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--usu);padding:14px 16px 8px;display:block}
.item{display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid #EAEEE9;cursor:pointer;font-family:var(--goth);color:var(--sumi);padding:14px 40px 14px 16px;position:relative;line-height:1.65}
.item:hover{background:#F6F9F5}
.item .t{font-size:14.5px;font-weight:500;display:block}
.item .d{font-size:11.5px;color:var(--usu);display:block;margin-top:2px}
.item::after{content:"";position:absolute;right:17px;top:50%;width:7px;height:7px;border-right:1.5px solid #9DA9A2;border-bottom:1.5px solid #9DA9A2;transform:translateY(-60%) rotate(-45deg)}
.item[aria-current="true"]{background:var(--midori)}
.item[aria-current="true"] .t{color:#fff;font-weight:700}
.item[aria-current="true"] .d{color:#BBD2C4}
.item[aria-current="true"]::after{border-color:#fff}
.empty{padding:22px 16px;font-size:13px;color:var(--usu)}

.detail{background:var(--shiro);border:1px solid var(--kei);border-top:3px solid var(--midori);padding:26px 22px;display:none}
.detail.on{display:block}
.dpath{font-size:11px;letter-spacing:.1em;color:var(--wakaba);font-weight:700}
.detail h3{font-family:var(--min);font-weight:800;font-size:22px;line-height:1.5;margin-top:8px}
.dsum{font-size:14px;margin-top:14px;color:#33443D}
.field{margin-top:22px;border-top:1px solid var(--kei);padding-top:16px}
.flabel{font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--usu);display:block;margin-bottom:8px}
.field ul{list-style:none;font-size:13.5px}
.field li{padding-left:18px;position:relative;margin-bottom:6px;line-height:1.8}
.field li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;background:var(--wakaba);border-radius:50%}
.field p{font-size:13.5px}
.blank{color:var(--shu);font-weight:700;font-size:13px;background:#FBF0EE;border:1px dashed #E2B7AF;padding:9px 12px;border-radius:2px}

/* ---- 8. フォーム ---- */
.form{background:var(--shiro);border:1px solid var(--kei);padding:26px 22px;margin-top:24px}
.f{margin-bottom:18px}
.f label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--usu);margin-bottom:7px}
.f input,.f textarea,.f select{width:100%;font-family:var(--goth);font-size:14.5px;color:var(--sumi);background:var(--kami);border:1px solid var(--kei);border-radius:2px;padding:12px 13px}
.f textarea{min-height:130px;resize:vertical;line-height:1.8}
.submit{width:100%;background:var(--midori);color:#fff;border:none;font-family:var(--goth);font-size:15px;font-weight:700;letter-spacing:.06em;padding:15px;border-radius:2px;cursor:pointer}
.formnote{font-size:11.5px;color:var(--usu);margin-top:12px;line-height:1.8}

/* ---- 9. フッター ---- */
.cta-band{background:var(--midori);color:#EAF2ED;padding:44px 22px;text-align:center;margin-top:52px}
.cta-band h2{font-family:var(--min);font-weight:800;font-size:22px;line-height:1.6;color:#fff}
.cta-band p{font-size:13.5px;margin-top:14px;color:#C9DCD1;max-width:30em;margin-left:auto;margin-right:auto}
.cta-band .btn{margin-top:22px}

.foot{border-top:1px solid var(--kei);padding:34px 0 44px;font-size:12px;color:var(--usu);line-height:1.95}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:26px}
.foot-cols h4{font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--sumi);margin-bottom:9px}
.foot-cols a{display:block;color:var(--usu);text-decoration:none;font-size:13px;padding:3px 0}
.foot-cols a:hover{color:var(--midori)}
.credit{margin-top:12px;font-weight:700;color:var(--wakaba);letter-spacing:.05em}

/* ---- 10. 個別調整 ---- */
@media (min-width:600px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .gnav{display:none}
  .menu-toggle{display:block}
}
@media (max-width:819px){
  .col{display:none;border-right:none}
  .col.active{display:block}
}
@media (min-width:820px){
  .cols{grid-template-columns:1fr 1fr 1fr}
  .col{max-height:520px;overflow-y:auto}
}
@media (max-width:520px){
  .row{flex-direction:column;gap:7px}
  .year{gap:12px}
  .year time{width:70px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}