@charset "UTF-8";
/* =====================================================================
   KAMIWAZA 公式サイト — 共通コンポーネント
   =====================================================================
   前提 : kwz-tokens.css を先に読み込むこと（値はすべてそこから取る）
   方針 : 影を使わない／境界は1px罫線／角丸2px／余白を削らない
   ===================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  max-width:100%;
  overflow-x:clip;
}

body{
  margin:0;
  max-width:100%;
  overflow-x:clip;
  background:var(--kwz-paper);
  color:var(--kwz-ink);
  font-family:var(--kwz-sans);
  font-size:var(--kwz-fs-body);
  line-height:var(--kwz-lh-body);
  -webkit-font-smoothing:antialiased;
}

/* 100vwを使うFVの右端断ち切りで、縦スクロールバー幅ぶん横スクロールが出る環境への対策。 */
@supports not (overflow:clip){
  html,body{ overflow-x:hidden; }
}

h1,h2,h3,h4,p,figure,figcaption,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--kwz-blue); }
a:hover{ color:var(--kwz-blue-d); }

:focus-visible{
  outline:2px solid var(--kwz-blue);
  outline-offset:3px;
}

.kwz-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* スキップリンク */
.kwz-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--kwz-blue); color:#fff; padding:10px 16px;
}
.kwz-skip:focus{ left:0; }

/* ---------------------------------------------------------------------
   レイアウト
   --------------------------------------------------------------------- */
.kwz-wrap{
  width:100%; max-width:var(--kwz-max);
  margin-inline:auto;
  padding-inline:var(--kwz-gutter);
}
@media (min-width:768px){
  .kwz-wrap{ padding-inline:var(--kwz-gutter-lg); }
}

.kwz-sec{ padding-block:var(--kwz-sec); }
@media (min-width:768px){ .kwz-sec{ padding-block:var(--kwz-sec-lg); } }

.kwz-sec--wash{ background:var(--kwz-wash); }

/* セクション見出し。太罫1本で構造を立ち上げる */
.kwz-shead{ margin-bottom:var(--kwz-sp-6); }
.kwz-shead__label{
  display:inline-block;
  font-family:var(--kwz-mono);
  font-size:var(--kwz-fs-label);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--kwz-ink-3);
  padding-bottom:var(--kwz-sp-2);
  border-bottom:2px solid var(--kwz-rule-ink);
  margin-bottom:var(--kwz-sp-5);
}
.kwz-shead h2{
  font-size:var(--kwz-fs-h2);
  font-weight:700;
  line-height:var(--kwz-lh-head);
  text-wrap:balance;
}
.kwz-shead p{
  margin-top:var(--kwz-sp-4);
  color:var(--kwz-ink-2);
  font-size:var(--kwz-fs-small);
  max-width:66ch;
}
@media (min-width:768px){
  .kwz-shead p{ font-size:var(--kwz-fs-body); }
}

/* ---------------------------------------------------------------------
   ボタン
   --------------------------------------------------------------------- */
.kwz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:54px; padding:0 22px;
  border:1px solid var(--kwz-blue);
  border-radius:var(--kwz-radius);
  font-size:15px; font-weight:700; text-decoration:none;
  background:var(--kwz-paper); color:var(--kwz-blue);
  transition:background var(--kwz-dur) var(--kwz-ease), color var(--kwz-dur) var(--kwz-ease);
  cursor:pointer;
}
@media (min-width:768px){ .kwz-btn{ min-height:52px; } }

.kwz-btn--pri{ background:var(--kwz-blue); color:#fff; }
.kwz-btn--pri:hover{ background:var(--kwz-blue-d); border-color:var(--kwz-blue-d); color:#fff; }
.kwz-btn--sub:hover{ background:var(--kwz-blue-soft); color:var(--kwz-blue-d); }
.kwz-btn--sm{ min-height:40px; padding:0 14px; font-size:13px; }

.kwz-btns{ display:flex; flex-direction:column; gap:10px; }
@media (min-width:768px){
  .kwz-btns{ flex-direction:row; flex-wrap:wrap; }
  .kwz-btns .kwz-btn{ min-width:220px; }
}

/* リンク矢印 */
.kwz-arrow{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:14px; text-decoration:none; color:var(--kwz-blue);
}
.kwz-arrow::after{ content:"→"; font-family:var(--kwz-mono); }

/* ---------------------------------------------------------------------
   画像（C-03 と対で使う）
   --------------------------------------------------------------------- */
.kwz-fig{ display:block; }
.kwz-fig-media{
  aspect-ratio:var(--kwz-ar-sp, 3 / 2);
  overflow:hidden;
  background:var(--kwz-wash);
  border-radius:var(--kwz-radius);
}
@media (min-width:768px){
  .kwz-fig-media{ aspect-ratio:var(--kwz-ar, 3 / 2); }
}
.kwz-fig-media img{ width:100%; height:100%; object-fit:cover; }

/* 写真が未到着のときの枠。差し替えるとこの枠ごと画像に置き換わる */
.kwz-ph{
  border:1px dashed var(--kwz-rule-2);
  background:
    repeating-linear-gradient(135deg, var(--kwz-wash-2) 0 1px, transparent 1px 9px),
    var(--kwz-wash);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:16px;
}
.kwz-ph-in{ display:flex; flex-direction:column; gap:5px; }
.kwz-ph-cut{
  font-family:var(--kwz-mono); font-size:11px; font-weight:700;
  letter-spacing:.12em; color:var(--kwz-blue);
}
.kwz-ph-note{ font-size:12px; color:var(--kwz-ink-2); line-height:1.7; }
.kwz-ph-ar{ font-family:var(--kwz-mono); font-size:10px; color:var(--kwz-ink-3); }

/* キャプション。全写真に付ける（altとは別管理） */
.kwz-cap{
  margin-top:var(--kwz-sp-3);
  font-size:var(--kwz-fs-cap);
  line-height:1.75;
  color:var(--kwz-ink-3);
}

/* 画面端まで断ち切る。白ベースで強度を出すための主要な手段 */
.kwz-bleed{ margin-inline:calc(var(--kwz-gutter) * -1); }
.kwz-bleed .kwz-fig-media{ border-radius:0; }
@media (min-width:768px){
  .kwz-bleed{ margin-inline:0; }
  .kwz-bleed .kwz-fig-media{ border-radius:var(--kwz-radius); }
}

/* ---------------------------------------------------------------------
   ヘッダー
   --------------------------------------------------------------------- */
.kwz-hd{
  position:sticky; top:0; z-index:100;
  background:var(--kwz-paper);
  border-bottom:1px solid var(--kwz-rule);
}
.kwz-hd__in{
  display:flex; align-items:center; gap:var(--kwz-sp-4);
  min-height:64px;
}
.kwz-logo{
  display:flex; align-items:baseline; gap:10px;
  text-decoration:none; color:var(--kwz-navy); flex:none;
}
.kwz-logo b{ font-size:19px; font-weight:700; letter-spacing:.04em; }
.kwz-logo span{
  font-size:11.5px; color:var(--kwz-ink-2); font-weight:500; white-space:nowrap;
}
@media (max-width:519px){ .kwz-logo span{ display:none; } }

.kwz-gnav{ display:none; }
@media (min-width:1024px){
  .kwz-gnav{ display:flex; gap:22px; margin-left:var(--kwz-sp-5); }
  .kwz-gnav a{
    font-size:14px; font-weight:500; text-decoration:none; color:var(--kwz-ink);
    padding:6px 0; border-bottom:2px solid transparent;
  }
  .kwz-gnav a:hover{ color:var(--kwz-blue); border-bottom-color:var(--kwz-blue); }
}
.kwz-hd__cta{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.kwz-hd__cta .kwz-btn{ display:none; }
@media (min-width:1024px){ .kwz-hd__cta .kwz-btn{ display:inline-flex; } }

/* SPメニュー（JSなしでも開く details 方式） */
.kwz-menu{ margin-left:auto; }
@media (min-width:1024px){ .kwz-menu{ display:none; } }
.kwz-menu summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--kwz-rule);
  border-radius:var(--kwz-radius);
}
.kwz-menu summary::-webkit-details-marker{ display:none; }
.kwz-menu summary span,
.kwz-menu summary span::before,
.kwz-menu summary span::after{
  display:block; width:18px; height:1.5px; background:var(--kwz-ink); position:relative;
}
.kwz-menu summary span::before{ content:""; position:absolute; top:-6px; }
.kwz-menu summary span::after{ content:""; position:absolute; top:6px; }
.kwz-menu__panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--kwz-paper);
  border-bottom:1px solid var(--kwz-rule);
  padding:var(--kwz-sp-4) var(--kwz-gutter) var(--kwz-sp-6);
}
.kwz-menu__panel a{
  display:block; padding:13px 0; text-decoration:none; color:var(--kwz-ink);
  border-bottom:1px solid var(--kwz-rule); font-weight:500;
}
.kwz-menu__panel .kwz-btns{ margin-top:var(--kwz-sp-5); }

/* ---------------------------------------------------------------------
   01 FV
   --------------------------------------------------------------------- */
.kwz-fv{ border-bottom:1px solid var(--kwz-rule); }
.kwz-fv__grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:1024px){
  .kwz-fv__grid{
    grid-template-columns:52fr 48fr;
    align-items:stretch;
    min-height:640px;
  }
}
.kwz-fv__body{
  padding:var(--kwz-sp-6) 0 var(--kwz-sp-7);
  display:flex; flex-direction:column; justify-content:center;
}
@media (min-width:1024px){
  .kwz-fv__body{ padding:var(--kwz-sp-9) var(--kwz-sp-7) var(--kwz-sp-9) 0; }
}
.kwz-fv h1{
  font-size:var(--kwz-fs-hero);
  font-weight:700; line-height:1.45; letter-spacing:.005em;
  text-wrap:balance;
}
.kwz-fv__lead{
  margin-top:var(--kwz-sp-5);
  color:var(--kwz-ink-2); font-size:14.5px; max-width:44ch;
}
.kwz-fv .kwz-btns{ margin-top:var(--kwz-sp-6); }

/* FVの3領域。写真は置かず、線画アイコンとテキストだけ */
.kwz-fv__domains{
  margin-top:var(--kwz-sp-7);
  padding-top:var(--kwz-sp-5);
  border-top:1px solid var(--kwz-rule);
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--kwz-sp-3);
}
.kwz-fv__domains a{
  display:flex; flex-direction:column; gap:6px;
  text-decoration:none; color:var(--kwz-ink); font-size:13.5px; font-weight:700;
}
.kwz-fv__domains i{
  font-style:normal; font-family:var(--kwz-mono);
  font-size:11px; color:var(--kwz-ink-3); letter-spacing:.1em;
}
.kwz-fv__domains a:hover{ color:var(--kwz-blue); }

/* 右の写真。PCでは右端まで断ち切る */
.kwz-fv__media{ position:relative; }
@media (min-width:1024px){
  .kwz-fv__media{
    margin-right:calc((100vw - min(100vw, var(--kwz-max))) / -2 - var(--kwz-gutter-lg));
  }
  .kwz-fv__media .kwz-fig,
  .kwz-fv__media .kwz-fig-media{ height:100%; }
  .kwz-fv__media .kwz-fig-media{ aspect-ratio:auto; border-radius:0; }
}

/* 写真に重ねる白いUIカード。FVと事例の2箇所だけで使う */
.kwz-uicard{
  background:var(--kwz-paper);
  border:1px solid var(--kwz-rule);
  border-radius:var(--kwz-radius);
  padding:var(--kwz-sp-4) var(--kwz-sp-5);
  max-width:340px;
}
.kwz-uicard__label{
  font-family:var(--kwz-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--kwz-ink-3); display:block; margin-bottom:8px;
}
.kwz-uicard__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--kwz-rule); font-size:13px;
}
.kwz-uicard__row:last-child{ border-bottom:0; }
.kwz-uicard__row b{
  font-size:19px; font-weight:700; color:var(--kwz-blue);
  font-variant-numeric:tabular-nums;
}
.kwz-uicard__row span{ color:var(--kwz-ink-2); }

/* SPでは重ねない。写真の下に独立して置く */
.kwz-fv__uicard{ margin-top:var(--kwz-sp-4); }
@media (min-width:1024px){
  .kwz-fv__uicard{
    position:absolute; left:-28px; bottom:56px; margin:0; z-index:2;
  }
}

/* FV下の細帯 */
.kwz-fvbar{
  background:var(--kwz-wash);
  border-bottom:1px solid var(--kwz-rule);
  font-size:13px; color:var(--kwz-ink-2);
}
.kwz-fvbar__in{
  display:flex; flex-wrap:wrap; gap:6px 22px; align-items:center;
  padding-block:var(--kwz-sp-4);
}
.kwz-fvbar b{ color:var(--kwz-ink); font-weight:700; }

/* ---------------------------------------------------------------------
   02 3領域
   --------------------------------------------------------------------- */
.kwz-domains{ display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-7); }
@media (min-width:768px){
  .kwz-domains{ grid-template-columns:repeat(3,1fr); gap:var(--kwz-sp-5); }
}
.kwz-domain__no{
  font-family:var(--kwz-mono); font-size:11px; letter-spacing:.14em;
  color:var(--kwz-ink-3); display:block; margin-bottom:var(--kwz-sp-2);
}
.kwz-domain h3{
  font-size:var(--kwz-fs-h3); font-weight:700; margin-top:var(--kwz-sp-4);
}
.kwz-domain__lead{ margin-top:6px; font-weight:700; font-size:14.5px; }
.kwz-domain__body{ margin-top:var(--kwz-sp-3); color:var(--kwz-ink-2); font-size:13.5px; }
.kwz-domain__list{ margin-top:var(--kwz-sp-4); display:flex; flex-direction:column; gap:7px; }
.kwz-domain__list li{
  font-size:13px; color:var(--kwz-ink-2); padding-left:15px; position:relative;
}
.kwz-domain__list li::before{
  content:""; position:absolute; left:0; top:12px;
  width:8px; height:1px; background:var(--kwz-blue);
}
.kwz-domain .kwz-arrow{ margin-top:var(--kwz-sp-4); }

/* ---------------------------------------------------------------------
   03 AI横串（図解。写真は使わない）
   --------------------------------------------------------------------- */
.kwz-cross{ display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-6); }
@media (min-width:1024px){
  .kwz-cross{ grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:var(--kwz-sp-8); align-items:center; }
}
.kwz-diagram{
  border:1px solid var(--kwz-rule);
  border-radius:var(--kwz-radius);
  background:var(--kwz-paper);
  padding:var(--kwz-sp-5);
}
.kwz-diagram__rows{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:560px){ .kwz-diagram__rows{ grid-template-columns:repeat(3,1fr); } }
.kwz-diagram__cell{
  border:1px solid var(--kwz-rule);
  border-radius:var(--kwz-radius);
  padding:14px 12px; text-align:center;
}
.kwz-diagram__cell b{ display:block; font-size:14px; font-weight:700; }
.kwz-diagram__cell span{ display:block; margin-top:4px; font-size:11.5px; color:var(--kwz-ink-2); }
.kwz-diagram__bar{
  margin-top:10px;
  border:1px solid var(--kwz-blue);
  background:var(--kwz-blue-soft);
  border-radius:var(--kwz-radius);
  padding:12px; text-align:center;
  font-size:13px; font-weight:700; color:var(--kwz-blue);
}
.kwz-diagram__note{
  margin-top:10px; font-size:11.5px; color:var(--kwz-ink-3); text-align:center;
}

/* ---------------------------------------------------------------------
   04 印刷の根拠（＋数字）
   --------------------------------------------------------------------- */
.kwz-ground{ display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-6); }
@media (min-width:1024px){
  .kwz-ground{ grid-template-columns:1fr 1fr; gap:var(--kwz-sp-8); align-items:start; }
}
.kwz-reasons{ display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-5); }
@media (min-width:560px){ .kwz-reasons{ grid-template-columns:1fr 1fr; } }
.kwz-reason{ border-top:1px solid var(--kwz-rule); padding-top:var(--kwz-sp-4); }
.kwz-reason b{ display:block; font-size:14.5px; font-weight:700; }
.kwz-reason p{ margin-top:7px; font-size:13px; color:var(--kwz-ink-2); }

/* 数字。値が無ければブロックごと出力しない（E-03） */
.kwz-figures{
  margin-top:var(--kwz-sp-7); padding-top:var(--kwz-sp-6);
  border-top:1px solid var(--kwz-rule);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--kwz-sp-5);
}
@media (min-width:768px){ .kwz-figures{ grid-template-columns:repeat(4,1fr); } }
.kwz-figure__k{ font-size:12px; color:var(--kwz-ink-3); }
.kwz-figure__v{
  font-size:var(--kwz-fs-num); font-weight:700; line-height:1.15;
  font-variant-numeric:tabular-nums; margin-top:4px;
}
.kwz-figure__u{ font-size:13px; color:var(--kwz-blue); font-weight:700; margin-left:4px; }

/* ---------------------------------------------------------------------
   05 自社で使っている（実UI）
   --------------------------------------------------------------------- */
.kwz-uigrid{ display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-5); }
@media (min-width:768px){ .kwz-uigrid{ grid-template-columns:1fr 1fr; } }

/* ---------------------------------------------------------------------
   06 導入事例（主1件）
   --------------------------------------------------------------------- */
.kwz-case{ position:relative; }
.kwz-case__body{ margin-top:var(--kwz-sp-6); }
@media (min-width:1024px){
  .kwz-case__grid{ display:grid; grid-template-columns:1fr minmax(0,420px); gap:var(--kwz-sp-8); align-items:center; }
  .kwz-case__body{ margin-top:0; }
}
.kwz-case__tag{
  display:inline-block; font-family:var(--kwz-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--kwz-blue);
  border:1px solid var(--kwz-blue); border-radius:999px; padding:2px 10px;
  margin-bottom:var(--kwz-sp-4);
}
.kwz-case h3{ font-size:var(--kwz-fs-h3); font-weight:700; line-height:1.55; }
.kwz-case p{ margin-top:var(--kwz-sp-4); color:var(--kwz-ink-2); font-size:14px; }
.kwz-case__pending{
  margin-top:var(--kwz-sp-4);
  border-left:2px solid var(--kwz-rule-2);
  padding:10px 14px; background:var(--kwz-wash);
  font-size:12.5px; color:var(--kwz-ink-2);
}

/* ---------------------------------------------------------------------
   07 事例3件 / サービスカード共通
   --------------------------------------------------------------------- */
.kwz-cards{ display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-4); }
@media (min-width:768px){ .kwz-cards{ grid-template-columns:repeat(3,1fr); } }
.kwz-card{
  border:1px solid var(--kwz-rule);
  border-radius:var(--kwz-radius);
  background:var(--kwz-paper);
  padding:var(--kwz-sp-5);
  display:flex; flex-direction:column; gap:var(--kwz-sp-3);
  text-decoration:none; color:inherit;
}
a.kwz-card:hover{ border-color:var(--kwz-blue); }
.kwz-card__label{
  font-family:var(--kwz-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--kwz-ink-3);
}
.kwz-card__name{ font-size:15px; font-weight:700; }
.kwz-card__desc{ font-size:13px; color:var(--kwz-ink-2); }
.kwz-card__badge{
  align-self:flex-start;
  font-size:11px; font-weight:700; color:var(--kwz-blue);
  background:var(--kwz-blue-soft); border:1px solid var(--kwz-blue);
  border-radius:999px; padding:1px 9px;
}
.kwz-card__go{ margin-top:auto; font-size:13px; font-weight:700; color:var(--kwz-blue); }
.kwz-card__go::after{ content:" →"; font-family:var(--kwz-mono); }

/* ---------------------------------------------------------------------
   08 導入の流れ
   --------------------------------------------------------------------- */
.kwz-steps{ display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-4); counter-reset:kwzstep; }
@media (min-width:768px){ .kwz-steps{ grid-template-columns:repeat(4,1fr); } }
.kwz-step{ border-top:2px solid var(--kwz-rule-ink); padding-top:var(--kwz-sp-4); counter-increment:kwzstep; }
.kwz-step::before{
  content:counter(kwzstep,decimal-leading-zero);
  font-family:var(--kwz-mono); font-size:12px; font-weight:700; color:var(--kwz-blue);
  display:block; margin-bottom:6px;
}
.kwz-step b{ display:block; font-size:15px; font-weight:700; }
.kwz-step p{ margin-top:7px; font-size:13px; color:var(--kwz-ink-2); }
.kwz-step small{ display:block; margin-top:8px; font-size:11.5px; color:var(--kwz-ink-3); }

/* ---------------------------------------------------------------------
   09 費用 + FAQ
   --------------------------------------------------------------------- */
.kwz-two{ display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-7); }
@media (min-width:1024px){ .kwz-two{ grid-template-columns:1fr 1fr; gap:var(--kwz-sp-8); } }
.kwz-h3{ font-size:var(--kwz-fs-h3); font-weight:700; margin-bottom:var(--kwz-sp-4); }

.kwz-price{ border-top:1px solid var(--kwz-rule); }
.kwz-price div{
  display:flex; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--kwz-rule); font-size:13.5px;
}
.kwz-price div b{ font-weight:700; }
.kwz-price div span{ color:var(--kwz-ink-2); text-align:right; }

.kwz-faq details{ border-bottom:1px solid var(--kwz-rule); }
.kwz-faq summary{
  cursor:pointer; list-style:none; padding:15px 28px 15px 0; position:relative;
  font-size:14px; font-weight:700;
}
.kwz-faq summary::-webkit-details-marker{ display:none; }
.kwz-faq summary::after{
  content:"+"; position:absolute; right:2px; top:14px;
  font-family:var(--kwz-mono); color:var(--kwz-blue); font-size:17px;
}
.kwz-faq details[open] summary::after{ content:"−"; }
.kwz-faq p{ padding:0 0 16px; font-size:13.5px; color:var(--kwz-ink-2); }

/* ---------------------------------------------------------------------
   10 最終CTA（白背景で確定。濃紺版は作らない）
   --------------------------------------------------------------------- */
.kwz-final{ border-top:2px solid var(--kwz-rule-ink); }
.kwz-final__grid{ display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-6); align-items:center; }
@media (min-width:1024px){
  .kwz-final__grid{ grid-template-columns:1fr 1fr; gap:var(--kwz-sp-8); }
}
/* 最終CTA写真が未到着なら、開発用プレースホルダーは出さず文章を主役にする。 */
.kwz-final__grid--solo{
  grid-template-columns:minmax(0,760px);
  justify-content:center;
}
@media (min-width:1024px){
  .kwz-final__grid--solo{ grid-template-columns:minmax(0,760px); }
}
.kwz-final h2{ font-size:var(--kwz-fs-h2); font-weight:700; line-height:var(--kwz-lh-head); text-wrap:balance; }
.kwz-final p{ margin-top:var(--kwz-sp-4); color:var(--kwz-ink-2); font-size:14px; }
.kwz-final .kwz-btns{ margin-top:var(--kwz-sp-6); flex-direction:column; }
@media (min-width:768px){ .kwz-final .kwz-btns{ flex-direction:row; } }
.kwz-final__note{ margin-top:var(--kwz-sp-4); font-size:12px; color:var(--kwz-ink-3); }

/* パートナー帯。面積を与えない */
.kwz-partner{
  border-top:1px solid var(--kwz-rule);
  background:var(--kwz-wash);
}
.kwz-partner__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  padding-block:var(--kwz-sp-4); font-size:13px; color:var(--kwz-ink-2);
}

/* ---------------------------------------------------------------------
   11 Footer（唯一、濃紺を全面で使う場所）
   --------------------------------------------------------------------- */
.kwz-ft{ background:var(--kwz-navy); color:#C7D2DC; }
.kwz-ft__in{ padding-block:var(--kwz-sp-8); }
.kwz-ft__cols{ display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-6); }
@media (min-width:768px){ .kwz-ft__cols{ grid-template-columns:repeat(4,1fr); } }
.kwz-ft h3{
  font-family:var(--kwz-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#7C8D9C; margin-bottom:var(--kwz-sp-3);
}
.kwz-ft a{ color:#DCE5EC; text-decoration:none; font-size:13.5px; }
.kwz-ft a:hover{ color:#fff; text-decoration:underline; }
.kwz-ft li{ margin-bottom:9px; }
.kwz-ft__bottom{
  margin-top:var(--kwz-sp-7); padding-top:var(--kwz-sp-5);
  border-top:1px solid #1E2C3A;
  display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
  font-size:12px; color:#8395A4;
}

/* ---------------------------------------------------------------------
   SP 追従バー（1本だけ）
   --------------------------------------------------------------------- */
.kwz-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--kwz-paper);
  border-top:1px solid var(--kwz-rule);
  padding:10px var(--kwz-gutter);
  transform:translateY(110%);
  transition:transform var(--kwz-dur) var(--kwz-ease);
}
.kwz-sticky.is-on{ transform:translateY(0); }
.kwz-sticky .kwz-btn{ width:100%; }
@media (min-width:1024px){ .kwz-sticky{ display:none; } }

/* ---------------------------------------------------------------------
   モーション（フェードインのみ）
   --------------------------------------------------------------------- */
.kwz-rise{ opacity:1; transform:none; }
html.kwz-anim .kwz-rise{
  opacity:0; transform:translateY(8px);
  transition:opacity var(--kwz-dur) var(--kwz-ease), transform var(--kwz-dur) var(--kwz-ease);
}
html.kwz-anim .kwz-rise.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  html.kwz-anim .kwz-rise{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------------
   フォーム（/contact/ 配下）
   --------------------------------------------------------------------- */
.kwz-form{ display:flex; flex-direction:column; gap:var(--kwz-sp-5); max-width:660px; }
.kwz-field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:7px; }
.kwz-field .req{
  font-size:11px; font-weight:700; color:var(--kwz-blue);
  border:1px solid var(--kwz-blue); border-radius:2px; padding:0 5px; margin-left:7px;
}
.kwz-field .opt{ font-size:11px; color:var(--kwz-ink-3); margin-left:7px; font-weight:500; }
.kwz-field input[type=text],
.kwz-field input[type=email],
.kwz-field input[type=tel],
.kwz-field select,
.kwz-field textarea{
  width:100%; padding:13px 14px;
  border:1px solid var(--kwz-rule-2); border-radius:var(--kwz-radius);
  font-family:inherit; font-size:16px; /* iOSの自動ズーム防止 */
  background:var(--kwz-paper); color:var(--kwz-ink);
}
.kwz-field textarea{ min-height:140px; resize:vertical; }
.kwz-field__hint{ margin-top:6px; font-size:12px; color:var(--kwz-ink-3); }
.kwz-choices{ display:flex; flex-direction:column; gap:9px; }
.kwz-choices label{
  display:flex; gap:9px; align-items:flex-start; font-weight:500; font-size:13.5px;
  border:1px solid var(--kwz-rule); border-radius:var(--kwz-radius); padding:11px 13px;
  cursor:pointer; margin:0;
}
.kwz-choices input{ margin-top:4px; flex:none; }
.kwz-errors{
  border-left:2px solid var(--kwz-alert); background:var(--kwz-alert-soft);
  padding:14px 18px; font-size:13.5px;
}
.kwz-errors b{ display:block; margin-bottom:6px; }
.kwz-errors li{ margin-top:4px; }
.kwz-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* =====================================================================
   /services/ と /contact/ で追加した部品（2026-08-30）
   =====================================================================
   ここから下はトップページでは使わない。上の定義には手を入れていない。
   影ゼロ・1px罫線・角丸2px・サービス別カラー禁止のルールは同じ。
   ===================================================================== */

/* --- 領域へのショートカット（/services/ 冒頭）------------------------- */
.kwz-svc-index{
  display:grid; grid-template-columns:1fr; gap:0;
  border-top:1px solid var(--kwz-rule);
  margin-top:var(--kwz-sp-7);
}
@media (min-width:768px){
  .kwz-svc-index{ grid-template-columns:repeat(3,1fr); gap:var(--kwz-gutter-lg); }
}
.kwz-svc-index a{
  display:block; padding:var(--kwz-sp-5) 0;
  border-bottom:1px solid var(--kwz-rule);
  text-decoration:none; color:var(--kwz-ink);
}
@media (min-width:768px){
  .kwz-svc-index a{ border-top:2px solid var(--kwz-rule-ink); border-bottom:0; }
}
.kwz-svc-index a:hover b{ color:var(--kwz-blue); }
.kwz-svc-index i{
  font-style:normal; font-family:var(--kwz-mono); font-size:var(--kwz-fs-label);
  color:var(--kwz-blue); letter-spacing:.12em; display:block; margin-bottom:var(--kwz-sp-2);
}
.kwz-svc-index b{ display:block; font-size:var(--kwz-fs-h3); font-weight:700; }
.kwz-svc-index span{
  display:block; margin-top:6px; font-size:var(--kwz-fs-small); color:var(--kwz-ink-2);
}

/* --- できることの一覧。罫線だけで区切る（カードにしない）-------------- */
.kwz-worklist{ border-top:1px solid var(--kwz-rule); }
.kwz-worklist.is-under-photo{ margin-top:var(--kwz-sp-5); }
.kwz-worklist li{
  padding:var(--kwz-sp-4) 0; border-bottom:1px solid var(--kwz-rule);
}
.kwz-worklist b{ display:block; font-size:14.5px; font-weight:700; }
.kwz-worklist span{
  display:block; margin-top:5px; font-size:13px; color:var(--kwz-ink-2); line-height:1.8;
}

/* --- 補足文。本文より弱く、キャプションより強い ---------------------- */
.kwz-note{
  font-size:13.5px; color:var(--kwz-ink-2); line-height:1.9;
  border-left:2px solid var(--kwz-rule-2); padding-left:var(--kwz-sp-4);
}

/* --- 問い合わせ3分岐の行き来 ----------------------------------------- */
.kwz-switch{
  display:flex; flex-wrap:wrap; gap:var(--kwz-sp-3);
  margin-top:var(--kwz-sp-7); padding-top:var(--kwz-sp-5);
  border-top:1px solid var(--kwz-rule);
}
.kwz-switch a,
.kwz-switch span{
  font-size:13px; font-weight:700; text-decoration:none;
  border:1px solid var(--kwz-rule-2); border-radius:var(--kwz-radius);
  padding:8px 13px;
}
.kwz-switch a{ color:var(--kwz-blue); }
.kwz-switch a:hover{ background:var(--kwz-blue-soft); border-color:var(--kwz-blue); }
/* 現在地。押せないことを色だけで示さず、枠も塗りも変える */
.kwz-switch span{
  color:var(--kwz-ink-3); background:var(--kwz-wash); border-color:var(--kwz-rule);
}

/* --- フォーム見出し（/contact/ は h1 が本文側に来る）------------------ */
.kwz-contact h1{
  font-size:var(--kwz-fs-h2); font-weight:700;
  line-height:var(--kwz-lh-head); text-wrap:balance;
}
.kwz-field .opt{
  font-size:11px; font-weight:700; color:var(--kwz-ink-3);
  border:1px solid var(--kwz-rule-2); border-radius:2px; padding:0 5px; margin-left:7px;
}
.kwz-choices label span b{ font-weight:700; }
.kwz-choices label:hover{ border-color:var(--kwz-rule-2); background:var(--kwz-wash); }
.kwz-form select{ appearance:auto; }

/* --- 送信完了 --------------------------------------------------------- */
.kwz-done{ max-width:660px; }
.kwz-done h1{
  font-size:var(--kwz-fs-h2); font-weight:700; line-height:var(--kwz-lh-head);
  margin-bottom:var(--kwz-sp-5);
}
.kwz-done p{ margin-bottom:var(--kwz-sp-5); }
.kwz-done .kwz-btns{ margin-top:var(--kwz-sp-7); }

/* 下層ページの見出し。1ページに h1 は1つ。
   .kwz-shead の中に来るのが h2 とは限らないため、h1 にも同じ組みを与える。 */
.kwz-shead h1{
  font-size:var(--kwz-fs-h2);
  font-weight:700;
  line-height:var(--kwz-lh-head);
  text-wrap:balance;
}

/* --- /contact/ の3分岐 ------------------------------------------------
   カードだが、サービスごとの色は付けない（AD確定事項）。
   区別は「順番」と「主導線の1本だけブルー枠」で付ける。 */
.kwz-branches{
  display:grid; grid-template-columns:1fr; gap:var(--kwz-sp-4);
  margin-top:var(--kwz-sp-7);
}
@media (min-width:768px){
  .kwz-branches{ grid-template-columns:repeat(3,1fr); gap:var(--kwz-gutter-lg); }
}
.kwz-branch{
  display:flex; flex-direction:column; gap:var(--kwz-sp-3);
  border:1px solid var(--kwz-rule); border-radius:var(--kwz-radius);
  padding:var(--kwz-sp-5); text-decoration:none; color:var(--kwz-ink);
  transition:border-color var(--kwz-dur) var(--kwz-ease);
}
.kwz-branch:hover{ border-color:var(--kwz-blue); color:var(--kwz-ink); }
/* 主導線は1本だけ枠を強くする。色を増やさずに序列を作るため */
.kwz-branch:first-child{ border-color:var(--kwz-blue); background:var(--kwz-blue-soft); }
.kwz-branch__note{
  font-family:var(--kwz-mono); font-size:var(--kwz-fs-label);
  letter-spacing:.12em; color:var(--kwz-blue);
}
.kwz-branch b{ font-size:var(--kwz-fs-h3); font-weight:700; }
.kwz-branch__p{ font-size:13px; color:var(--kwz-ink-2); line-height:1.85; flex:1; }

/* =====================================================================
   目視QAでの修正（2026-08-30）
   =====================================================================
   PC1440 / 1024 / SP390 / SP375 の実レンダリングを見て直した分だけ。
   上の定義は消していない。ここでの上書きは、どれも「設計どおりに
   見えていなかったもの」を設計に戻すためのもの。
   ===================================================================== */

/* --- 1. 見出しと本文の折返し ------------------------------------------
   日本語で「〜構いませ / ん。」のように1文字だけ次行に落ちていた。
   ch は半角基準なので 66ch は日本語だと約33字にしかならず狭すぎた。
   em に変えて実際の字数で測り、あわせて禁則と均等割りを効かせる。 */
.kwz-shead p{ max-width:40em; text-wrap:pretty; }
.kwz-shead h1,
.kwz-shead h2,
.kwz-final h2,
.kwz-contact h1,
.kwz-done h1{
  /* 「大丈夫で / す。」のような文節途中での改行を防ぐ。
     未対応ブラウザは無視するだけなので安全に足せる。 */
  word-break:auto-phrase;
  text-wrap:balance;
}
.kwz-fv h1{ word-break:auto-phrase; }

/* --- 2. サービスカード ------------------------------------------------
   .kwz-cards は3列固定だったため、/services/ の半分幅カラムに置くと
   1枚あたり約140pxまで潰れ、「KAMIWAZAネッ／ト印刷」と割れていた。
   狭いカラム用に1列版を用意する（トップの3列は変えない）。 */
.kwz-cards--col{ grid-template-columns:1fr !important; }
@media (min-width:768px){
  .kwz-cards--col{ grid-template-columns:1fr !important; }
}

/* --- 3. 3領域の下端を揃える -------------------------------------------
   事業名の数が3つ／4つで違うため「◯◯の事業を見る」の位置がバラついていた。
   一覧を伸ばしてリンクを最下部に揃える。 */
.kwz-domain{ display:flex; flex-direction:column; }
.kwz-domain__list{ flex:1; }

/* --- 4. AI横串の左カラム ----------------------------------------------
   380px では36pxの見出しが3行に割れていた。少しだけ広げる。 */
@media (min-width:1024px){
  .kwz-cross{ grid-template-columns:minmax(0,440px) minmax(0,1fr); }
}

/* --- 5. SPのFV：コピーを先に出す --------------------------------------
   最終確定：スマホの1画面目は「何の会社か」を先に理解させる。
   DOM順どおり コピー・CTA → 実UI の順にし、実UIは証拠として直後に置く。 */
@media (max-width:1023px){
  .kwz-fv__grid{ display:flex; flex-direction:column; }
  .kwz-fv__body{ order:1; padding-top:var(--kwz-sp-6); }
  .kwz-fv__media{ order:2; margin-inline:calc(var(--kwz-gutter) * -1); }
  .kwz-fv__media .kwz-fig-media{ border-radius:0; }
}

/* --- 6. SPのFooter ----------------------------------------------------
   4ブロックを縦1列に積んで1050pxあり、短いページでは濃紺が画面の3割を
   超えていた（面積目標は3〜5%）。SPだけ2列に畳んで高さを半分にする。 */
@media (max-width:767px){
  .kwz-ft__cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--kwz-sp-6) var(--kwz-sp-5); }
  .kwz-ft__in{ padding-block:var(--kwz-sp-7); }
  .kwz-ft li{ margin-bottom:6px; }
}

/* --- 7. /contact/ の3分岐カードの頭を揃える ---------------------------
   注記があるのは主導線の1枚だけ。空でも同じ高さを確保して、
   3枚の見出しが同じ位置から始まるようにする。 */
.kwz-branch__note{ min-height:1.5em; }

/* --- 8. フォームの補助文 ----------------------------------------------
   「〜いたしませ / ん。」のように1文字だけ次行に落ちていた。 */
.kwz-field__hint{ text-wrap:pretty; }

/* --- 9. SPでの選択肢の高さ --------------------------------------------
   任意項目の選択肢が縦に積み上がり、必須3項目のフォームが実際より
   長く見えていた。行間と余白だけ詰める（項目は減らさない）。 */
@media (max-width:767px){
  .kwz-choices{ gap:7px; }
  .kwz-choices label{ padding:9px 11px; line-height:1.6; }
  .kwz-form{ gap:var(--kwz-sp-4); }
}

/* --- 10. 1024px でのヘッダー折返し -------------------------------------
   ちょうど1024pxで「事業を見／る」「お知ら／せ」のようにメニューが
   2行に割れていた。ロゴ＋タグライン＋メニュー5本＋ボタン2本が
   976pxに収まらないため。表示の閾値を上げ、1024〜1179pxは
   ハンバーガーに任せる（タブレット横では一般的な畳み方）。 */
@media (min-width:1024px) and (max-width:1179px){
  .kwz-gnav{ display:none; }
  .kwz-hd__cta .kwz-btn{ display:none; }
  .kwz-menu{ display:block; }
}
/* 念のため、出ているときは折り返さない */
.kwz-gnav a{ white-space:nowrap; }
.kwz-hd__cta .kwz-btn{ white-space:nowrap; }

/* =====================================================================
   トップ7ブロック再編にともなう追加（2026-08-30）
   =====================================================================
   ブランド・情報設計の確定を受けた構成変更で必要になった分だけ。
   既存の定義には手を入れていない。影ゼロ・1px罫線・角丸2px は同じ。
   ===================================================================== */

/* --- FVの2本目のCTA ---------------------------------------------------
   確定仕様：PCは「無料で相談する」＋「会社資料をダウンロード」の2本、
   SPは「無料で相談する」の1本。SPで2本並べると主導線が決まらず、
   FV通過後に出る追従バー1本とも整合しなくなるため。 */
.kwz-fv__cta2{ display:none; }
@media (min-width:1024px){
  .kwz-fv__cta2{ display:inline-flex; }
}

/* --- ブロック02の締め -------------------------------------------------
   一覧に無いものは相談で受ける、という逃げ道をここで示す。 */
.kwz-offer__more{
  margin-top:var(--kwz-sp-6);
  padding-top:var(--kwz-sp-5);
  border-top:1px solid var(--kwz-rule-2);
  font-size:var(--kwz-fs-small);
  color:var(--kwz-ink-2);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px var(--kwz-sp-4);
}

/* --- ブロック04の自社案件 ---------------------------------------------
   掲載許諾が要らないぶん、今日から見せられる実例。
   カードにせず罫線だけで区切り、上の主事例より一段弱く置く。 */
.kwz-selfcase{
  display:grid; grid-template-columns:1fr; gap:0;
  margin-top:var(--kwz-sp-8);
  border-top:2px solid var(--kwz-rule-ink);
}
@media (min-width:768px){
  .kwz-selfcase{ grid-template-columns:repeat(3,1fr); gap:var(--kwz-gutter-lg); }
}
.kwz-selfcase > div{
  padding:var(--kwz-sp-5) 0;
  border-bottom:1px solid var(--kwz-rule);
}
@media (min-width:768px){
  .kwz-selfcase > div{ border-bottom:0; }
}
.kwz-selfcase b{ display:block; font-size:14.5px; font-weight:700; }
.kwz-selfcase p{
  margin-top:8px; font-size:13px; color:var(--kwz-ink-2); line-height:1.85;
}
.kwz-selfcase .kwz-arrow{ margin-top:var(--kwz-sp-4); }

/* --- FAQを1カラムで使うとき -------------------------------------------
   独立ブロックになったため、行長が伸びすぎないよう上限をかける。 */
.kwz-faq--wide{ max-width:800px; }
.kwz-faq--wide summary{ font-size:15px; padding-block:17px; }

/* --- FVサブコピーの行長 ------------------------------------------------
   確定コピーが長くなり、44ch（＝日本語で約22字）では4行に割れて
   「自分た／ちで」「仕組みづ／くりに」のように語の途中で切れていた。
   ch は半角基準のため日本語では狭すぎる。em で実字数を基準にし、
   あわせて文節での改行を効かせる。FV全体の高さも約720pxへ戻る。 */
.kwz-fv__lead{
  max-width:34em;
  word-break:auto-phrase;
  text-wrap:pretty;
}

/* --- FVの高さ --------------------------------------------------------
   確定仕様は「FV高さ約720px・100vhにしない・次セクションの頭を少し見せる」。
   サブコピーが3行になったぶん上下の余白を1段詰めて、目標値へ戻す。
   grid の min-height:640px が下限を守るので、詰めすぎにはならない。 */
@media (min-width:1024px){
  .kwz-fv__body{ padding-block:var(--kwz-sp-8); }
}

/* --- FV 強調語 ------------------------------------------------------ */
.kwz-blueword{
  color:var(--kwz-blue, #1273B8);
}