@charset "UTF-8";
/* ==========================================================================
   会社設立の費用と相場 ｜ トップページ専用（接頭辞 kshf-）
   - is_front_page() のときだけ読み込む
   - 色は main.css の :root の --ksh-* だけを使う。Webフォントは読み込まない
   - ルール9：320/390/430px で横スクロールを出さない。固定列数を書かない
   - ルール10：カテゴリータイル4種・記事カード7種・タグピル 大きさ3×塗り3
   ========================================================================== */

/* ---------- 0. 共通 ---------- */
.kshf-main{ padding:0 0 clamp(30px,6vw,56px); }
/* 単位は数値より小さく、色を一段落とす */
.kshf-unit{ font-size:.66em; font-weight:700; color:var(--ksh-ink-3); margin-left:2px; }

/* セクション見出し */
.kshf-sechead{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 16px;
  border-bottom:2px solid var(--ksh-line); padding-bottom:16px; margin:0 0 30px;
}
.kshf-sechead h2{ font-size:clamp(21px,4.6vw,28.5px); margin:0; }
.kshf-sechead__note{ font-size:14.5px; color:var(--ksh-ink-3); margin:0; }
.kshf-sechead__more{ font-size:14.5px; color:var(--ksh-teal); text-decoration:underline; white-space:nowrap; }

/* 区切り（6→7） */
.kshf-rule{ border-top:3px solid var(--ksh-line); margin:clamp(30px,5vw,56px) 0 0; }

/* ---------- 1. ヒーロー ---------- */
.kshf-hero{
  background:linear-gradient(160deg, var(--ksh-navy-d) 0%, var(--ksh-navy) 100%);
  color:#fff; padding:clamp(28px,5vw,56px) 0 0;
}
.kshf-hero__grid{ display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,40px); align-items:flex-start; }
.kshf-hero__left{ flex:1.15 1 340px; min-width:0; }
.kshf-hero__right{ flex:.85 1 280px; min-width:0; padding-top:4px; }
.kshf-eyebrow{
  display:inline-block; font-size:14px; letter-spacing:.03em; color:#f0c987;
  background:rgba(240,201,135,.12); border:1px solid rgba(240,201,135,.4);
  border-radius:999px; padding:5px 14px; margin-bottom:18px;
}
.kshf-hero h1{ font-size:clamp(23px,5.1vw,37.5px); line-height:1.5; margin:0 0 20px; color:#fff; max-width:22em; }
.kshf-lead{ font-size:clamp(15px,2.9vw,16.5px); line-height:1.95; color:rgba(255,255,255,.82); max-width:40em; margin:0 0 24px; }
.kshf-badges{ display:flex; flex-wrap:wrap; gap:8px; padding-bottom:clamp(28px,5vw,48px); }
.kshf-badge{
  font-size:14px; color:#fff; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:5px 13px;
}

/* 明細を切り取った紙片。上下を断ち切った紙に見せる。 */
.kshf-slip{
  position:relative; background:var(--ksh-paper); color:var(--ksh-ink);
  border-radius:3px; box-shadow:var(--ksh-shadow); overflow:hidden;
  margin-bottom:clamp(28px,5vw,48px);
}
.kshf-slip::before,
.kshf-slip::after{
  content:""; position:absolute; left:0; right:0; height:11px; pointer-events:none;
  background:repeating-linear-gradient(-45deg, var(--ksh-paper) 0 6px, var(--ksh-navy-d) 6px 7px);
  background-size:16px 16px;
}
.kshf-slip::before{ top:-1px; }
.kshf-slip::after{ bottom:-1px; transform:rotate(180deg); }
.kshf-slip__list{ margin:0; padding:24px clamp(16px,3vw,24px) 20px; }
.kshf-slip__row{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:2px 16px; padding:10px 0; border-bottom:1px dashed var(--ksh-line);
}
.kshf-slip__row:last-child{ border-bottom:0; }
.kshf-slip__label{ font-size:14.5px; color:var(--ksh-ink-2); line-height:1.6; min-width:0; }
.kshf-slip__amt{
  margin:0; margin-left:auto; font-family:var(--ksh-font-num); font-size:20px; font-weight:700;
  color:var(--ksh-navy); white-space:nowrap;
}

/* ヒーロー画像：紙片の下に、明細のレシートと電卓のイラスト（背景透過）。ヒーローの下端まで降ろす */
.kshf-hero__img{
  display:block; width:100%; max-width:500px; height:auto;
  margin:calc(clamp(28px,5vw,48px) * -0.5) auto 0;
}
@media (max-width:660px){
  .kshf-hero__img{ max-width:300px; margin-top:-14px; }
}

/* ---------- 2. 注意書き ---------- */
.kshf-note{
  display:flex; flex-wrap:wrap; gap:6px 20px; align-items:flex-start;
  margin:clamp(24px,4vw,34px) 0 0; padding:20px clamp(16px,3vw,26px);
  border-radius:var(--ksh-radius); font-size:15.5px; line-height:1.9;
}
.kshf-note .ksh-note__t{ flex:0 1 180px; margin:0; font-size:15.5px; }
.kshf-note__b{ flex:3 1 300px; min-width:0; }

/* ---------- 3. 費用の明細書 ---------- */
.kshf-ledger{ padding:clamp(34px,6vw,64px) 0 0; }
.kshf-ledger__head{ max-width:760px; }
.kshf-ledger__head h2{
  font-size:clamp(21px,4.6vw,28.5px); margin:0 0 12px;
  border-left:6px solid var(--ksh-navy); padding-left:16px;
}
.kshf-ledger__desc{ font-size:clamp(15px,2.9vw,16px); color:var(--ksh-ink-2); margin:0 0 26px; padding-left:22px; }

.kshf-receipt{
  background:var(--ksh-paper); border:1px solid var(--ksh-line);
  border-radius:var(--ksh-radius); box-shadow:var(--ksh-shadow); overflow:hidden;
}
.kshf-receipt__top{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px;
  padding:14px clamp(16px,3vw,26px); background:var(--ksh-green-l);
  border-bottom:2px solid var(--ksh-line);
  font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--ksh-green);
}
.kshf-lines{ list-style:none; margin:0; padding:0; }
.kshf-line{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 16px;
  margin:0; padding:18px clamp(16px,3vw,26px);
  border-bottom:1px solid var(--ksh-line-2);
}
/* 4行目の下だけ太罫線。摘要が「上の4つを足すと」と受けるため。 */
.kshf-line--rule{ border-bottom:2px solid var(--ksh-line); }
.kshf-line__no{ flex:0 0 34px; font-family:var(--ksh-font-num); font-size:14px; color:var(--ksh-ink-3); }
.kshf-line__item{ flex:1 1 100%; font-size:16.5px; font-weight:700; line-height:1.6; min-width:0; }
.kshf-line__amt{
  flex:1 1 100%; font-family:var(--ksh-font-num); font-size:22px; font-weight:700;
  color:var(--ksh-navy-d); white-space:nowrap; margin-top:2px;
}
.kshf-line__note{ flex:1 1 100%; font-size:16px; color:var(--ksh-ink-2); line-height:1.85; margin-top:4px; }
.kshf-line__note b{ font-weight:700; color:var(--ksh-ink); }
.kshf-line__src{ flex:1 1 100%; font-size:14px; color:var(--ksh-ink-3); line-height:1.7; margin-top:2px; }
.kshf-line__src a{ color:var(--ksh-teal); text-decoration:underline; }
.kshf-line__date{ margin-left:4px; color:var(--ksh-muted); }
@media (min-width:640px){
  /* 行番号｜項目｜金額（右揃え）。補足と出典は項目の位置から始める。 */
  .kshf-line__item{ flex:1 1 200px; }
  .kshf-line__amt{ flex:0 0 auto; margin-left:auto; margin-top:0; text-align:right; font-size:21px; }
  .kshf-line__note,
  .kshf-line__src{ padding-left:50px; }
}
.kshf-summary{
  margin:0; padding:22px clamp(16px,3vw,26px) 24px; background:var(--ksh-line-2);
  font-size:16px; line-height:1.95; color:var(--ksh-ink-2);
}
.kshf-summary b{ color:var(--ksh-ink); font-weight:700; }

/* ---------- 4. 扱っている費用の範囲（帳票の「計」欄） ---------- */
.kshf-scope{ padding:clamp(34px,6vw,64px) 0 0; }
.kshf-scope__in{
  display:flex; flex-wrap:wrap; gap:22px clamp(24px,4vw,40px); align-items:center;
  border-top:2px solid var(--ksh-line); padding-top:28px;
}
.kshf-scope__text{ flex:1 1 260px; min-width:0; }
.kshf-scope__text h2{ font-size:clamp(20px,4.2vw,24.5px); margin:0 0 10px; }
.kshf-scope__desc{ font-size:15.5px; color:var(--ksh-ink-2); margin:0; }
.kshf-tally{
  flex:1.4 1 300px; min-width:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));
}
.kshf-tally__cell{
  display:flex; flex-direction:column-reverse; justify-content:flex-end;
  text-align:center; padding:4px 10px; border-left:1px solid var(--ksh-line); min-width:0;
}
.kshf-tally__cell:first-child{ border-left:0; }
.kshf-tally__num{
  margin:0; font-family:var(--ksh-font-num); font-size:clamp(26.5px,5.5vw,35.5px);
  font-weight:700; line-height:1.25; color:var(--ksh-navy);
}
.kshf-tally__label{ font-size:14px; color:var(--ksh-ink-3); margin-top:5px; }
.kshf-scope__foot{
  font-size:15px; color:var(--ksh-ink-2);
  border-top:1px solid var(--ksh-line-2); padding-top:14px; margin:18px 0 0;
}
.kshf-scope__foot a{ color:var(--ksh-teal); text-decoration:underline; }

/* ---------- 5. 費用を見るときの3点 ---------- */
.kshf-points{ padding:clamp(34px,6vw,64px) 0 0; }
.kshf-points h2{ font-size:clamp(20px,4.2vw,24.5px); text-align:center; margin:0 0 30px; }
.kshf-points__list{ list-style:none; margin:0 auto; padding:0; max-width:820px; }
.kshf-point{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:flex-start;
  margin:0; padding:22px 2px; border-bottom:1px solid var(--ksh-line-2);
}
.kshf-point:last-child{ border-bottom:0; }
.kshf-point__no{ flex:0 0 auto; font-family:var(--ksh-font-num); font-weight:700; line-height:1; }
.kshf-point p{ flex:1 1 220px; min-width:0; margin:0; color:var(--ksh-ink-2); font-size:16.5px; }
/* 1つ目：大きい番号 */
.kshf-point:nth-child(1){ padding-top:4px; }
.kshf-point:nth-child(1) .kshf-point__no{ flex-basis:54px; font-size:clamp(35.5px,7.6vw,47.5px); color:var(--ksh-accent); }
/* 2つ目：左太罫線＋淡緑の面 */
.kshf-point:nth-child(2){
  border-left:4px solid var(--ksh-navy); background:var(--ksh-green-l);
  border-radius:0 var(--ksh-radius-s) var(--ksh-radius-s) 0; padding:22px 16px;
}
.kshf-point:nth-child(2) .kshf-point__no{ flex-basis:36px; font-size:22px; color:var(--ksh-navy); padding-top:4px; }
/* 3つ目：下線のみ */
.kshf-point:nth-child(3) .kshf-point__no{ flex-basis:36px; font-size:22px; color:var(--ksh-ink-3); padding-top:4px; }
.kshf-point:nth-child(3) p{ border-bottom:2px solid var(--ksh-accent); padding-bottom:12px; }

/* ---------- 6. 費用の項目から探す（カテゴリータイル4種） ---------- */
.kshf-cats{ padding:clamp(34px,6vw,64px) 0 0; }
/* ---------- 7. 新しく公開した記事 ---------- */
.kshf-arts{ padding:clamp(30px,5vw,56px) 0 0; }
/* 画像を横に置く変種（imgleft / imgright）が窮屈にならない列幅にする。
   1280px で3列。hero が2列ぶちなので、9枚がちょうど3行＋1枚に収まる。 */
.kshf-art-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  align-items:start;
}
/* hero は2列ぶち。2列以上ある幅でだけ効かせる。 */
@media (min-width:820px){ .kshf-art-grid .ksh-card--hero{ grid-column:span 2; } }

/* ---------- 8. 気になる言葉から探す（タグピル） ---------- */
.kshf-tagsec{ padding:clamp(34px,6vw,60px) 0 0; }
.kshf-tagcloud{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.kshf-tagcloud li{ margin:0; min-width:0; }
.kshf-pill{
  display:inline-flex; align-items:baseline; gap:5px; border-radius:999px;
  border:1px solid transparent; font-weight:600; text-decoration:none; transition:.15s;
}
.kshf-pill__n{ font-family:var(--ksh-font-num); font-size:max(12px,.75em); font-weight:400; opacity:.65; }
/* 大きさ（長さ7の表） */
.kshf-pill--sm{ font-size:14px; padding:6px 13px; }
.kshf-pill--md{ font-size:16px; padding:8px 17px; }
.kshf-pill--lg{ font-size:19px; padding:10px 21px; }
/* 塗り（長さ5の表） */
.kshf-pill--solid{ background:var(--ksh-navy); color:#fff; }
.kshf-pill--solid:hover{ background:var(--ksh-navy-d); color:#fff; }
.kshf-pill--soft{ background:var(--ksh-green-l); color:var(--ksh-navy); }
.kshf-pill--soft:hover{ background:#e2ebd8; color:var(--ksh-navy); }
.kshf-pill--outline{ background:transparent; color:var(--ksh-ink-2); border-color:var(--ksh-line); }
.kshf-pill--outline:hover{ border-color:var(--ksh-navy); color:var(--ksh-navy); }