/* 島クリエイト：料金とサービス（service.html）
   読み込む順：base.css → parts.css → ページの CSS（2026-11-03 site.css を分けた）
   2026-11-05 本人の選択で作り直し：章立ては「4つの問いに答える」（刷新案B。PC は左に問いの目次）、Q1 の料金だけ「3列の料金表＋公開後の保守の足し算」（刷新案A）。
   前の形と3つの案は work/archive/service-2026-11-05/ */

/* ---------- 4つの問い（左の目次と、答えの章） ---------- */

.sb{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,8fr); gap:40px; padding:0 var(--g); }

.sb-idx{ position:sticky; top:calc(var(--hds) + 40px); align-self:start; display:grid; gap:4px; margin-top:112px; border-top:3px solid var(--ink); }

.sb-idx a{ display:grid; gap:2px; padding:14px 0 14px 4px; border-bottom:1px solid var(--ink); font-weight:800; font-size:18px; line-height:1.4; text-decoration:none; color:var(--ink); transition:color .25s ease,padding .25s var(--sw); }

.sb-idx__s{ display:none; }

.sb-idx i{ font-style:normal; font-family:var(--en); font-weight:900; font-size:13px; }

.sb-idx a.is-on{ padding-left:18px; box-shadow:inset 6px 0 0 var(--or); }

.sb-q{ padding:112px 0 96px; border-bottom:3px solid var(--ink); }

.sb-q:last-child{ border-bottom:0; }

.sb-q__q{ display:flex; align-items:baseline; gap:12px; margin:0; font-weight:800; font-size:clamp(20px,1.8vw,26px); }

.sb-q__q i{ font-style:normal; font-family:var(--en); font-weight:900; padding:0 8px; background:var(--or); color:var(--ink); }

.sb-q__a{ word-break:keep-all; overflow-wrap:anywhere; margin:12px 0 0; font-weight:800; font-size:clamp(34px,4vw,60px); line-height:1.3; }

.sb-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:40px 0 24px; padding:0; }

.sb-tags li{ padding:10px 18px; border:3px solid var(--ink); font-weight:800; font-size:clamp(17px,1.5vw,22px); }

.sb-tags li.is-new{ background:var(--or); }

.sb-flow{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:40px 0 24px; padding:0; counter-reset:f; }

.sb-flow li{ counter-increment:f; display:grid; gap:8px; padding:20px 20px 24px; border:3px solid var(--ink); margin-left:-3px; }

.sb-flow li:first-child{ margin-left:0; }

.sb-flow li:nth-child(4){ background:var(--ink); color:var(--wh); }

.sb-flow b{ font-weight:800; font-size:24px; }

.sb-flow b::before{ content:counter(f); display:block; font-family:var(--en); font-weight:900; font-size:14px; }

.sb-flow span{ font-size:14px; line-height:1.7; }

#faq.sec{ border-top:3px solid var(--ink); }

/* ---------- Q1 の料金表（3列）と、保守の足し算 ---------- */

.sa-cols{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:48px 0 0; padding:0; border:3px solid var(--ink); }

.sa-col{ display:grid; align-content:start; gap:6px; padding:28px 24px 24px; }

.sa-col + .sa-col{ border-left:3px solid var(--ink); }

.sa-col--mid{ background:var(--or); }

.sa-col__n{ margin:0; font-weight:800; font-size:20px; }

.sa-col__y{ margin:0; display:flex; align-items:baseline; gap:4px; }

.sa-col__y b{ font-family:var(--en); font-weight:900; font-size:clamp(36px,3.4vw,54px); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

.sa-col__y span{ font-weight:800; font-size:18px; }

.sa-col__p{ margin:6px 0 0; padding-bottom:18px; border-bottom:2px solid var(--ink); font-weight:800; font-size:17px; }

.sa-col__dl{ margin:14px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:15px; }

.sa-col__dl dt{ font-weight:700; }

.sa-col__dl dd{ margin:0; }

.sa-plus{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px 32px; margin-top:-3px; padding:28px 32px; background:var(--ink); color:var(--wh); }

.sa-plus__mark{ font-family:var(--en); font-weight:900; font-size:56px; line-height:1; color:var(--or); }

.sa-plus .sa-plus__h{ margin:0; font-weight:800; font-size:22px; }

.sa-plus p{ margin:4px 0 0; font-size:15px; line-height:1.8; }

.sa-plus__y{ margin:0 !important; font-weight:800; font-size:17px !important; white-space:nowrap; }

.sa-plus__y b{ font-family:var(--en); font-weight:900; font-size:48px; letter-spacing:-.02em; color:var(--or); margin:0 4px; }

.sa-pay{ margin:28px 0 0; padding:18px 24px; background:var(--or-l); font-size:16px; }

.sa-pay b{ margin-right:8px; }

/* よくある質問 */

.faq__list{ border-top:3px solid var(--ink); }

.faq__list details{ border-bottom:1px solid var(--ink); }

.faq__list summary{ position:relative; list-style:none; cursor:pointer; padding:22px 56px 22px 0; font-weight:800; font-size:clamp(18px,1.6vw,21px); line-height:1.55; }

.faq__list summary::-webkit-details-marker{ display:none; }

.faq__list summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-family:var(--en); font-weight:900; font-size:32px; line-height:1; transition:transform .3s ease; }

.faq__list details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }

.faq__list details p{ padding:0 0 24px; max-width:36em; }

@media (max-width:1023px){
  .sb{ grid-template-columns:1fr; gap:0; }
  .sb-idx{ position:sticky; top:var(--hds); z-index:5; margin:0 calc(var(--g) * -1); padding:0 var(--g); grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; background:var(--wh); border-top:0; border-bottom:2px solid var(--ink); }
  .sb-idx a{ padding:10px 4px; border-bottom:0; font-size:13px; text-align:center; }
  .sb-idx__l{ display:none; }
  .sb-idx__s{ display:inline; }
  .sb-idx a.is-on{ padding-left:4px; background:var(--or); color:var(--ink); }
  .sb-q{ padding:72px 0 64px; }
  .sb-flow{ grid-template-columns:1fr 1fr; }
  .sb-flow li{ margin:-3px 0 0 -3px; }
}


@media (max-width:1023px){
  .sa-cols{ grid-template-columns:1fr; }
  .sa-col + .sa-col{ border-left:0; border-top:3px solid var(--ink); }
  .sa-plus{ grid-template-columns:auto minmax(0,1fr); }
  .sa-plus__y{ grid-column:2; }
}

@media (max-width:767px){
  .sa-col{ padding:24px 20px; }
  .sa-plus{ padding:22px 20px; gap:12px 16px; }
  .sa-plus__mark{ font-size:40px; }
  .sa-plus__y b{ font-size:38px; }
}

/* まずは1ページから（2026-11-08 本人の判断で、名刺代わりの小さなページも受ける）：3つのプランと公開後の保守の間に、白い帯で置く（本人の指示で位置を変更） */
.sa-mini{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px 32px; margin-top:-3px; padding:24px 32px; border:3px solid var(--ink); background:var(--wh); }
.sa-mini__n{ margin:0; font-weight:800; font-size:20px; line-height:1.35; color:var(--ink); }
.sa-mini__n em{ font-style:normal; background:var(--or); padding:.08em .35em; -webkit-box-decoration-break:clone; box-decoration-break:clone; line-height:1.6; }
.sa-mini__h{ margin:0; font-weight:800; font-size:20px; }
.sa-mini p:not([class]){ margin:4px 0 0; font-size:15px; line-height:1.8; }
.sa-mini__y{ margin:0; font-weight:800; font-size:16px; line-height:1.5; text-align:right; }
@media (max-width:767px){
  .sa-mini{ grid-template-columns:1fr; padding:20px; gap:8px; }
  .sa-mini__n br,.sa-mini__y br{ display:none; }
  .sa-mini__n{ font-size:15px; }
  .sa-mini__y{ text-align:left; }
}

/* 見出しの切れ目を語のまとまりで（2026-11-08） */
.sv-nw{ display:inline-block; }

/* ほかの制作会社との比べ（2026-11-09 本人「表がダサい」→ 5案から A）：島クリエイトの答えだけ黒い面、ほかは小さく灰色 */
.cmp-r{ display:grid; grid-template-columns:7em minmax(0,1fr) minmax(0,1.15fr); gap:0 28px; padding:28px 0; border-top:3px solid var(--ink); align-items:start; }
.cmp-r:last-child{ border-bottom:3px solid var(--ink); }
.cmp-k{ font-weight:800; font-size:20px; line-height:1.4; word-break:auto-phrase; }
.cmp-o{ margin:0; }
.cmp-o div + div{ margin-top:12px; }
.cmp-o dt{ font-size:12px; font-weight:800; }
.cmp-o dd{ margin:2px 0 0; font-size:14px; line-height:1.75; color:#555; }
.cmp-us{ margin:-8px 0; padding:20px 22px; background:var(--ink); color:var(--wh); font-weight:800; font-size:18px; line-height:1.6; }
.cmp-us b{ display:block; margin-bottom:4px; color:var(--or); font-size:13px; }
@media (max-width:767px){
  .cmp-r{ grid-template-columns:1fr; gap:12px; padding:22px 0 26px; }
  .cmp-us{ margin:0; font-size:17px; }
}

/* 進め方の4つの枠（2026-11-09 本人「図形が歪んでいる」）：スマホの2列で、左の列と上の段がはみ出していた */
@media (max-width:1023px){
  .sb-flow li:nth-child(odd){ margin-left:0; }
  .sb-flow li:nth-child(-n+2){ margin-top:0; }
}