@charset "UTF-8";
/* =========================================================================
   iteee LP — 情シス業務代行サービス
   Figma: iteee-LP (node 1-3) を静的HTML/WordPressテンプレート用に実装
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* brand */
  --c-brand: #00a0e9;
  --c-brand-mid: #58bbe8;
  --c-brand-pale: #c2ecff;
  --c-brand-bg: #def2fe;
  --c-brand-tint: #f1fbff;
  --c-aside: #b7e6ff;

  /* accents (プラン別) */
  --c-security: #e4007f;
  --c-standard: #22ac38;
  --c-dx: #f6ab00;

  /* neutrals */
  --c-ink: #000;
  --c-ink-soft: #231815;
  --c-gray: #7e7e7e;
  --c-gray-line: #c6c6c6;
  --c-placeholder: #b3b3b3;
  --c-required: #ff0640;

  --bg-white: #fff;
  --bg-05: #f7f7f7;
  --bg-06: #f6f6f6;
  --bg-about: #e1e6e8;
  --bg-legend: #eeeff0;
  --bg-compare: #eaeaea;
  --c-footer: #575554;

  /* pricing table bands */
  --band-basic: #f2f2f3;
  --band-security: #fceff5;
  --band-standard: #ecf4d9;
  --band-dx: #feecd2;
  --band-plan: #dee9f1;

  /* layout */
  --design-w: 1400px;
  --header-h: 72.8px;
  --main-w: 1010.8px;
  --aside-w: 389.2px;
  --content-w: 905.8px;

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", Meiryo, sans-serif;
}

/* -------------------------------------------------------------------------
   2. Reset / base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  color: var(--c-ink);
  background: var(--bg-white);
  line-height: 1.6;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* デザイン(1400px)どおりの改行。幅が足りない場合は自然折り返しにする */
@media (max-width: 1399px) { .br-pc { display: none; } }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------------------
   3. Page shell — 左:本文 1010.8px / 右:資料請求フォーム 389.2px
   ------------------------------------------------------------------------- */
/* デザイン幅 1400px を保ったまま中央に置く。
   画面が広がるとレールは大きさそのままで右へスライドする */
.lp-shell {
  display: flex;
  align-items: flex-start;
  max-width: var(--design-w);
  margin-inline: auto;
}

.lp-main {
  flex: 1 1 var(--main-w);
  min-width: 0;
  max-width: var(--main-w);
  container-type: inline-size;
  container-name: main;
}

.lp-aside {
  flex: 0 0 var(--aside-w);
  width: var(--aside-w);
  align-self: stretch;
  background: var(--c-aside);
  box-shadow: -2.8px 0 2.8px rgba(0, 0, 0, .1);
}

/* セクション共通 */
.section { position: relative; }
.section__inner {
  width: min(var(--content-w), 100% - 40px);
  margin-inline: auto;
}

/* 見出し */
.sec-title {
  font-size: 33.6px;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.25;
  text-align: center;
  color: var(--c-ink-soft);
}
.sec-title--plain { color: var(--c-ink); }
.sec-lead {
  margin-top: 14px;
  font-size: 19.6px;
  font-weight: 900;
  letter-spacing: .05em;
  text-align: center;
}
.txt-brand { color: var(--c-brand); }

/* 日本語の改行位置を整える。
   auto-phrase = 文節で折り返す / balance = 行の長さを揃えて1文字だけ余るのを防ぐ。
   未対応ブラウザでは従来どおりの折り返しになる（見た目が壊れることはない） */
.sec-title,
.sec-lead,
.nayami__title,
.nayami__text,
.about__title,
.about__lead,
.about__name,
.tasks__title,
.tasks__balloon,
.hours__title,
.compare__summary,
.compare__td p,
.cases__client,
.cases__headline,
.cases__effect-list li,
.faq__q-text,
.pricing__lead,
.pricing__lead-sp,
.pricing__packs-lead,
.contact__label,
.dl-form__title,
.solution__bar p,
.legend__name,
.plan-head__name,
.strip__card,
.dl-form__label,
.dl-form__consent {
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 本文は最終行に1語だけ残らないようにする */
.about__desc,
.cases__body,
.flow__text,
.legend__desc,
.hours__note,
.tasks__items li,
.dl-form__notes p {
  text-wrap: pretty;
}

/* 料金表のセルは幅が狭く語中で切れやすいので、文節での折り返しも効かせる */
.pricing__table tbody th,
.pricing__table .cell-desc,
.pricing__meta span {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* CTA ボタン */
.btn-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 417.2px;
  max-width: 100%;
  height: 49px;
  margin-inline: auto;
  padding: 0 34px;
  font-size: 19.6px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  background: var(--c-brand);
  border-radius: 17.5px;
  transition: opacity .2s, transform .2s;
}
.btn-cta:hover { opacity: .85; transform: translateY(-1px); }
.btn-cta::after {
  content: "";
  position: absolute;
  right: 22px;
  width: 8.33px;
  height: 12.83px;
  background: url("../img/icon-arrow-cta.svg") center / contain no-repeat;
}

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding-left: max(14px, calc((100% - var(--design-w)) / 2 + 14px));
  padding-right: max(9.2px, calc((100% - var(--design-w)) / 2 + 9.2px));
  background: var(--bg-05);
  box-shadow: 0 2.8px 2.8px rgba(0, 0, 0, .14);
}

.site-header__brand { display: flex; align-items: center; gap: 14px; }
.site-header__logo { width: 123.2px; }
.site-header__logo img { width: 100%; }

.powered-by {
  display: flex;
  align-items: center;
  gap: 9.8px;
}
.powered-by__label {
  font-size: 11.2px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.powered-by__logo { width: 91px; height: 26.6px; }

.site-nav { display: flex; align-items: center; gap: 18.6px; margin-left: auto; }
.site-nav__link {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s;
}
.site-nav__link:hover { color: var(--c-brand); }

.site-nav__contact {
  display: grid;
  place-items: center;
  width: 120.4px;
  height: 44.8px;
  margin-left: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-brand);
  white-space: nowrap;
  background: #fff;
  border: 1.4px solid var(--c-brand);
  border-radius: 22.4px;
  transition: background .2s, color .2s;
}
.site-nav__contact:hover { color: #fff; background: var(--c-brand); }

.nav-toggle { display: none; }

/* -------------------------------------------------------------------------
   5. FV
   ------------------------------------------------------------------------- */
.fv {
  position: relative;
  aspect-ratio: 1010.8 / 569.8;   /* Figma: y72.8..642.6 */
  overflow: hidden;
  background: #fff;
  container-type: inline-size;
  container-name: fv;
}
/* Figma 座標(1010.8 × 589.4 基準)をそのまま % に変換して配置 */
.fv__layer { position: absolute; }
.fv__art { position: absolute; inset: 0; z-index: 1; }
.fv__hex    { left: 36.98%; top: 15.48%; width: 63.02%; z-index: 0; }
.fv__woman  { left: 0.99%;  top: 50.05%; width: 48.38%; }
.fv__screen { left: 44.62%; top: 51.98%; width: 20.87%; height: 23.52%; background: #97cee7; }  /* Figma描画上の見え幅 x451..661 / y369..502 */
.fv__laptop { left: 41.55%; top: 49.88%; width: 27.01%; }
.fv__man    { left: 44.03%; top: 47.42%; width: 22.06%; }
.fv__bubble { left: 28.69%; top: 27.59%; width: 22.85%; }

.fv__title {
  position: absolute;
  z-index: 3;
  left: 24.34%;
  top: 7.406%;
  width: 57.28%;
  height: 18.60%;
  display: grid;
  place-items: center;
  background: var(--c-brand);
  border-radius: 4px;
}
.fv__title h1 {
  font-size: 3.324cqw;
  font-weight: 900;
  line-height: 1.19;
  letter-spacing: .054em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.fv__balloon-text {
  position: absolute;
  left: 31.44%;
  top: 35.21%;
  width: 17.51%;
  font-size: 1.583cqw;
  font-weight: 700;
  line-height: 2.374cqw;      /* Figma: leading 24px 固定（18pxのスパンも同じ）*/
  text-align: center;
  white-space: nowrap;
}
.fv__balloon-text .em { font-size: 1.781cqw; color: var(--c-brand); }

.fv__cta {
  position: absolute;
  z-index: 3;
  left: 54.71%;
  top: 85.33%;
  width: 41.27%;
  height: 8.60%;
  margin: 0;
  font-size: 1.939cqw;
  border-radius: 1.73cqw;
}
.fv__cta::after { right: 2.2cqw; width: .83cqw; height: 1.28cqw; }

/* FV 直下の細い水色帯 */
.fv-bar { height: 19.6px; background: var(--c-brand-mid); }

/* -------------------------------------------------------------------------
   6. サービス帯（青ストリップ）
   ------------------------------------------------------------------------- */
.strip {
  display: flex;
  justify-content: center;
  gap: 33.55px;
  padding: 22.4px 0 21px;
  background: var(--c-brand);
}
.strip__card {
  display: grid;
  place-items: center;
  flex: 0 1 141.2px;
  height: 106.4px;
  padding: 8px;
  background: #fff;
  border-radius: 7px;
}
.strip__card img { width: auto; }

.strip-after { height: 74.9px; background: var(--c-brand-tint); }

/* -------------------------------------------------------------------------
   7. お悩み
   ------------------------------------------------------------------------- */
.nayami { padding: 59px 0 58.6px; background: var(--c-brand-bg); }
.nayami__title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: center;
}
.nayami__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32.2px;
  margin-top: 44.8px;
}
.nayami__item {
  display: flex;
  align-items: center;
  gap: 16.8px;
  min-height: 124.6px;
  padding: 14px 14px 14px 22.4px;
  background: #fff;
  border-radius: 15.4px;
}
.nayami__icon { flex: 0 0 58.8px; width: 58.8px; height: 49px; }
.nayami__text {
  flex: 1;
  font-size: 16.8px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
}

/* -------------------------------------------------------------------------
   8. 解決バー
   ------------------------------------------------------------------------- */
.solution { padding: 24.8px 0 60px; background: #fff; }
.solution__arrow { width: 179.2px; margin: 0 auto 24.6px; }

.solution__bar-wrap { position: relative; width: min(984.2px, 100% - 26px); margin-inline: auto; }
.solution__bar {
  display: grid;
  place-items: center;
  min-height: 102.2px;
  padding: 16px 130px 16px 24px;
  background: var(--c-brand);
  border-radius: 22.4px;
}
.solution__bar p {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #fff;
  text-align: center;
}
.solution__figure {
  position: absolute;
  right: 11.9px;
  bottom: 0;
  width: 112px;
}

/* -------------------------------------------------------------------------
   9. iteeeとは
   ------------------------------------------------------------------------- */
.about { padding: 51.4px 0 77.2px; background: var(--bg-about); }
.about__title { font-size: 33.6px; font-weight: 900; line-height: 1.4; letter-spacing: .08em; text-align: center; }
.about__lead {
  margin-top: 20.2px;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .1em;
  text-align: center;
}
.about__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25.2px;
  width: min(904.4px, 100% - 40px);
  margin: 25.6px auto 0;
}
.about__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 277.2px;
  padding: 22.4px 7px 16.1px;
  background: var(--bg-05);
  border-radius: 7px;
}
.about__icon { height: 88.2px; display: grid; place-items: center; }
.about__name {
  margin-top: 37.8px;
  font-size: 18.2px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
}
.about__desc {
  margin-top: 17.9px;
  font-size: 15.4px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
}

/* -------------------------------------------------------------------------
   10. 依頼可能な業務一覧
   ------------------------------------------------------------------------- */
.tasks { padding: 67px 0 71.4px; background: var(--bg-06); }
.tasks__title {
  font-size: 33.6px;
  font-weight: 900;
  line-height: 1.19;
  letter-spacing: .02em;
  text-align: center;
}
.tasks__title .small { font-size: 22.4px; }

.tasks__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 19.6px;
  width: min(904.4px, 100% - 40px);
  margin: 43px auto 0;
}
.tasks__card {
  min-height: 253.4px;
  padding: 25.2px 18.2px 22.4px;
  background: #fff;
  border-radius: 0 30.8px 0 0;
}
.tasks__head { display: flex; align-items: flex-start; gap: 12.6px; }
.tasks__icon { flex: 0 0 32.2px; display: grid; place-items: center; min-height: 46.2px; }
.tasks__cat {
  flex: 1;
  padding-bottom: 6px;
  font-size: 15.4px;
  font-weight: 900;
  color: var(--c-brand);
  border-bottom: 1.4px solid var(--c-ink);
}
.tasks__items { margin-top: 16px; margin-right: -10px; }
.tasks__items li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-height: 29.4px;
  font-size: 12.6px;
  font-weight: 700;
  line-height: 1.55;
}
.tasks__items li::before {
  content: "";
  flex: 0 0 18.4px;
  width: 18.4px;
  height: 19.7px;
  background: url("../img/icon-check.svg") center / contain no-repeat;
}

/* Figma: 吹き出し x365..639.4 / 男性 x611.4..720.6 → ブロック幅 355.6px を
   本文カラム中央から +37.4px ずらした位置に置く（Figma のまま） */
.tasks__note {
  position: relative;
  width: min(355.6px, 100% - 40px);
  min-height: 123.6px;
  margin: 50px auto 0;
  transform: translateX(37.4px);
}
.tasks__balloon {
  display: grid;
  place-items: center;
  width: 274.4px;
  max-width: 100%;
  min-height: 89.6px;
  padding: 12px 18px;
  font-size: 16.8px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  background: #fff;
  border: 1.4px solid var(--c-ink);
  border-radius: 11.2px;
}
.tasks__balloon { position: relative; }
.tasks__balloon::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: -11px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-right: 1.4px solid var(--c-ink);
  border-bottom: 1.4px solid var(--c-ink);
  transform: rotate(45deg) skew(10deg, 10deg);
}
.tasks__figure { position: absolute; left: 246.4px; top: 16.8px; width: 109.2px; }
.tasks .btn-cta { margin-top: 0; transform: translateX(25.2px); }

/* -------------------------------------------------------------------------
   11. ご契約時間の中で（円グラフ）
   ------------------------------------------------------------------------- */
.hours { padding: 79.6px 0 59px; background: #fff; }
.hours__inner { width: 73.27%; margin-left: 12.37%; }   /* Figma: x125..865.6 */
.hours__title { font-size: 32.2px; font-weight: 900; line-height: 1.4; }

.hours__body {
  display: grid;
  grid-template-columns: 45.96% 1fr;    /* Figma: 円 x134.8 / 凡例 x465.2 */
  gap: 0;
  align-items: start;
  margin-top: 43.9px;
}

.chart { position: relative; width: 81%; max-width: 275.8px; margin-left: 2.88%; container-type: inline-size; }
.chart__img { width: 100%; }
.chart__name,
.chart__num {
  position: absolute;
  font-weight: 900;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  /* Figma ではラベルが扇形からはみ出すため、白文字に扇色の縁取りが入っている */
  paint-order: stroke fill;
  -webkit-text-stroke: 3px var(--seg);
}
.chart__name { font-size: 7.11cqw; line-height: 1.19; }
.chart__num  { line-height: 1.05; }           /* Figma: 数字と単位の行間 29.4px */
.chart__num .num  { font-size: 10.15cqw; letter-spacing: -.02em; }
.chart__num .unit { font-size: 5.58cqw; }

.chart__name--security, .chart__num--security { --seg: var(--c-security); }
.chart__name--dx,       .chart__num--dx       { --seg: var(--c-dx); }
.chart__name--standard, .chart__num--standard { --seg: var(--c-standard); }

/* Figma: ドーナツ 275.8px 角(134.8, 2872) を原点とした % */
.chart__name--security { left: 23.24%; top:  8.63%; }
.chart__num--security  { left: 19.80%; top: 28.43%; }
.chart__name--dx       { left: 89.02%; top: 28.43%; }
.chart__num--dx        { left: 88.47%; top: 50.25%; }
.chart__name--standard { left: 14.39%; top: 69.54%; }
.chart__num--standard  { left: 34.45%; top: 74.62%; }

.chart__link {
  display: inline-block;
  margin: 12.6px 0 0 30.8px;
  font-size: 16.8px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-brand);
  border-bottom: 1.4px solid var(--c-brand);
}

.legend { display: grid; gap: 14px; margin-top: 23.8px; }
.legend__item {
  padding: 10px 12.6px;
  background: var(--bg-legend);
  border-radius: 0 25.2px 0 0;
}
.legend__name {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 18.2px;
  font-weight: 700;
}
.legend__name::before { content: ""; width: 2.8px; height: 21px; background: currentColor; }
.legend__item--dx .legend__name { color: var(--c-dx); }
.legend__item--security .legend__name { color: var(--c-security); }
.legend__item--standard .legend__name { color: var(--c-standard); }
.legend__name span { color: var(--c-ink); }
.legend__desc { margin-top: 4px; font-size: 16.8px; font-weight: 700; }

.hours__note { margin-top: 28.9px; font-size: 14px; font-weight: 700; line-height: 1.4; }

/* -------------------------------------------------------------------------
   12. 一般的な業務代行サービスとiteeeの違い
   ------------------------------------------------------------------------- */
.compare { padding: 46.2px 0 0; background: var(--bg-06); }
.compare .sec-title { line-height: 1.19; }          /* Figma: 33.6px / 行送り40px */
.compare .sec-lead  { margin-top: 15.2px; line-height: 1.224; }

.compare__card {
  position: relative;
  width: min(var(--content-w), 100% - 40px);
  margin: 50px auto 0;                              /* 見出し下端3456.8 → カード3506.8 */
  padding: 29.4px 40.6px;                           /* 表 x92.4 / 表上端 3536.2 */
  background: #fff;
  box-shadow: 5.6px 5.6px 5.6px rgba(0, 0, 0, .25);
}

/* 表 824.6px を 165.2 / 327.6 / 331.8 に分割（Figma実寸）。
   狭い幅でも比率を保ったまま縮小し、読める限界(620px)で横スクロールに切り替える */
.compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* cqw は「自分自身」ではなく祖先のコンテナを基準にするため、
   寸法の基準になる枠をひとつ外側に置く */
.compare__frame {
  width: clamp(620px, 100%, 824.6px);
  container-type: inline-size;
}
.compare__grid {
  position: relative;
  display: grid;
  grid-template-columns: 20.034% 39.729% 40.238%;   /* Figma: 165.2 / 327.6 / 331.8 ÷ 824.6 */
  padding-top: 21.732cqw;                           /* 見出し行 179.2 / 824.6 */
  /* 青カードが表の下に 12.6px はみ出す分を内側に持たせる。
     はみ出したままだと横スクロール枠に縦スクロールバーが出る */
  padding-bottom: 1.528cqw;
}

/* iteee列の青カード。表の上下に 12.6px はみ出す（Figma: 3536.2..4006.6 / h470.4） */
.compare__highlight {
  position: absolute;
  z-index: 1;
  left: 20.034%;
  top: 0;
  bottom: 0;                                        /* 表の下 12.6px 分はグリッドの padding-bottom が担う */
  width: 40.238%;
  background: var(--c-brand-pale);
  border: .34cqw solid var(--c-brand);              /* 2.8px */
  border-radius: 1.7cqw;                            /* 14px */
}

.compare__head { position: absolute; top: 0; }
.compare__head--iteee {
  z-index: 3;
  left: 18.68%;                                     /* 表左端から154px */
  width: 42.79%;                                    /* タブ 352.8px */
  height: 23.26cqw;                                 /* 191.8（下の切り欠き含む） */
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .728cqw;                                     /* 6px */
  padding-bottom: 5.336cqw;                         /* 44px */
  background: url("../img/compare-tab.svg") center top / 100% 19.864cqw no-repeat;  /* 163.8px */
}
.compare__head--iteee .logo { width: 18.299cqw; }   /* 150.9px */
.compare__head--iteee .powered {
  display: flex;
  align-items: flex-start;
  gap: .825cqw;                                     /* 6.8px */
  font-size: 1.358cqw;                              /* 11.2px */
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
/* Figma: 「Powered by」は 53.1px 幅で2行に折り返す */
.compare__head--iteee .powered span { width: 6.44cqw; text-align: center; }
.compare__head--iteee .powered img { width: 8.744cqw; margin-top: .12cqw; }

.compare__head--other {
  z-index: 2;
  left: auto;
  right: 0;
  top: 2.037cqw;                                    /* Figma: 3553 */
  width: 40.238%;
  height: 19.694cqw;                                /* 162.4px */
  display: grid;
  place-items: center;
  font-size: 2.037cqw;                              /* 16.8px */
  font-weight: 900;
  line-height: 1.19;
  letter-spacing: .05em;
  color: #fff;
  background: var(--c-gray);
}

/* 表本体：3行 95.2 / 89.6 / 93.8 */
.compare__body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 20.034% 39.729% 40.238%;
  grid-template-rows: minmax(11.545cqw, auto) minmax(10.865cqw, auto) minmax(11.375cqw, auto);
  background: var(--bg-compare);
  border: .17cqw solid var(--c-gray);               /* 1.4px */
}
.compare__row { display: contents; }
.compare__th,
.compare__td {
  position: relative;
  display: grid;
  place-items: center;
  padding: .728cqw .97cqw;
  text-align: center;
}
.compare__th {
  font-size: 1.698cqw;                              /* 14px */
  font-weight: 900;
  line-height: 1.214;
  letter-spacing: .05em;
  color: var(--c-gray);
}
.compare__td { color: var(--c-gray); }
.compare__td .main { font-size: 1.867cqw; font-weight: 900; line-height: 1.21;  letter-spacing: .05em; }
.compare__td .sub  { font-size: 1.698cqw; font-weight: 900; line-height: 1.214; letter-spacing: .05em; }

/* 区切り線は列幅いっぱいではなく内側に入る（Figma: Line 12〜16） */
.compare__row + .compare__row .compare__th::before,
.compare__row + .compare__row .compare__td::before {
  content: "";
  position: absolute;
  top: 0;
  height: .17cqw;
  background: #b7b7b7;
}
.compare__row + .compare__row .compare__th::before        { left: 11%; right: 10.2%; }
.compare__row + .compare__row .compare__td--iteee::before { left: 10.3%; right: 10.3%; background: #8fd4f2; }
.compare__row + .compare__row .compare__td--other::before { left: 10.5%;  right: 10.1%; }

.compare__td--iteee { z-index: 2; color: var(--c-ink); background: none; }
.compare__td--iteee .main {
  font-size: 2.716cqw;                              /* 22.4px */
  font-weight: 900;
  line-height: 1.205;
  letter-spacing: .05em;
  color: var(--c-brand);
}
.compare__td--iteee .sub { color: var(--c-ink); }

.compare__summary {
  margin: 37.8px 0 0;                               /* 表下端3994 → 4044.4（うち12.6pxは表側に持たせた）*/
  font-size: 22.4px;
  font-weight: 700;
  line-height: 1.205;
  letter-spacing: .04em;
  text-align: center;
}
.compare__card .btn-cta { margin-top: 37px; }       /* Figma: 4098.4 → 4135.4 */

/* 824.6px が入りきらない幅では横スクロールになる旨を明示 */
@media (max-width: 675px) {
  .compare__scroll::before {
    content: "← 横にスクロールできます →";
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-gray);
    text-align: right;
  }
}

/* -------------------------------------------------------------------------
   13. 導入事例・お客様の声
   ------------------------------------------------------------------------- */
.cases { padding: 122px 0 205.6px; background: var(--bg-06); }
.cases .sec-title { line-height: 1.19; }
.cases__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 29.4px;
  width: min(907.2px, 100% - 40px);
  margin: 50px auto 0;
}
.cases__item {
  min-height: 532px;                                /* Figma: 中身488.6 + 白地の下延長43.4 */
  padding: 42px 16.8px 0;
  background: #fff;
  border-radius: 12px;
}
.cases__client { font-size: 19.6px; font-weight: 900; line-height: 1.4; letter-spacing: .05em; }
.cases__effect {
  display: flex;
  min-height: 113.4px;
  margin-top: 17.4px;
  background: #fff;
  border: 1.4px solid var(--c-gray-line);
  border-radius: 2px;
  overflow: hidden;
}
.cases__effect-label {
  flex: 0 0 29.4px;
  display: grid;
  place-items: center;
  padding: 10px 0;
  font-size: 11.2px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .05em;
  color: #fff;
  background: var(--c-brand);
  writing-mode: vertical-rl;
}
.cases__effect-list {
  flex: 1;
  display: grid;
  align-content: center;
  gap: 9.5px;
  padding: 10px 10px 10px 12px;
}
.cases__effect-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.6px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .05em;
}
.cases__effect-list li::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 17px;
  margin-top: 1px;
  background: url("../img/icon-check.svg") center / contain no-repeat;
}
.cases__headline {
  margin-top: 18.2px;
  font-size: 16.8px;
  font-weight: 900;
  line-height: 21px;
  color: var(--c-brand);
}
.cases__body {
  margin-top: 19.6px;
  padding-top: 19.6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  border-top: 1.4px solid var(--c-gray-line);
}

/* -------------------------------------------------------------------------
   14. 料金プラン
   ------------------------------------------------------------------------- */
.pricing { padding: 57.8px 0 60.3px; background: #fff; }
.pricing .sec-title { line-height: 1.19; }

.pricing__scroll { margin-top: 56.2px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pricing__table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
  border-collapse: separate;                         /* リセットの collapse を打ち消す */
  border-spacing: 0 4.77px;                          /* Figma: 行ピッチ33.37 − 行高28.6 */
}
.pricing__table col.c-name { width: 24.39%; }   /* Figma: 220.9 / 905.8 */
.pricing__table col.c-desc { width: 26.26%; }   /* 237.9 */
.pricing__table col.c-plan { width: 15.79%; }   /* 143 */
.pricing__table col.c-gap  { width: .53%; }     /* 4.8 */

/* 見出し行：5321..5442.7（h121.7） */
.pricing__table thead th,
.pricing__table thead td { height: 121.7px; padding: 0; vertical-align: bottom; }
.plan-head {
  display: grid;
  align-content: center;
  gap: 1px;
  height: 121.7px;
  padding: 6px 4px;
  color: #fff;
  text-align: center;
  background: var(--c-brand);
  border-radius: 8px 8px 0 0;
}
.plan-head__name { font-size: clamp(12px, 1.215vw, 17px); font-weight: 900; letter-spacing: .02em; white-space: nowrap; }
.plan-head--pro .plan-head__name { font-size: clamp(10.5px, 1.03vw, 14.4px); }
.plan-head__row { font-size: 15px; font-weight: 500; }
.plan-head__row .big { font-size: 18px; font-weight: 700; }
.plan-head__row .lbl { font-size: 12.6px; }

/* 左のリード文（Figma: x57.4 y5326.2 w375 h101.9 = 3行×34px） */
.pricing__lead-cell { vertical-align: top; padding: 5.2px 0 0 5.4px; }
.pricing__lead-sp { display: none; }
.pricing__lead {
  width: 170%;              /* Figma: 375px（名称列220.9pxをはみ出して配置）*/
  font-size: clamp(16px, 1.6vw, 22.4px);
  font-weight: 900;
  line-height: 34px;
  letter-spacing: .02em;
}

.pricing__meta { text-align: right; vertical-align: bottom; }
.pricing__meta span {
  display: block;
  padding-right: 8px;
  font-size: 12.6px;
  font-weight: 700;
  line-height: 33.37px;                              /* 行ピッチに合わせる */
  color: #4d4d4d;
}

.pricing__table tbody th,
.pricing__table tbody td {
  height: 28.6px;
  padding: 0 10px;
  font-size: 13px;
  vertical-align: middle;
}
.pricing__table tbody th {
  font-weight: 700;
  text-align: center;
  border-radius: 6px 0 0 6px;
}
.pricing__table tbody .cell-desc {
  font-size: 12.6px;
  font-weight: 500;
  color: #333;
  background: var(--band-basic);
}
.pricing__table tbody .cell-plan { text-align: center; background: var(--band-plan); }
.pricing__table tbody .cell-gap  { padding: 0; background: none; }
/* プラン列は最終行の 10.2px 下まで伸びる（Figma: 5442.7..5988.8） */
.pricing__table tbody tr:last-child .cell-plan { box-shadow: 0 10.2px 0 var(--band-plan); }

.row--basic    th { background: var(--band-basic); }
.row--security th { background: var(--band-security); }
.row--standard th { background: var(--band-standard); }
.row--dx       th { background: var(--band-dx); }

.mark-yes::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  margin-inline: auto;
  background: var(--c-brand);
  border-radius: 50%;
}
.mark-no::before {
  content: "";
  display: block;
  width: 14px;
  height: 1.4px;
  margin-inline: auto;
  background: #a5a5a5;
}
.mark-text { font-size: 13px; font-weight: 500; color: var(--c-brand); }

/* オプションパック：Figma y6008.8 h141.9 / x337.2・549・762.2 */
.pricing__packs {
  display: grid;
  grid-template-columns: 28.37% 21.7% 21.7% 21.7%;  /* Figma: 257 / 196.6 ÷ 905.8 */
  gap: 0 1.72%;
  align-items: start;
  margin-top: 30.2px;   /* Figma: 表下端5988.8 → パック6008.8（列の延長10.2を含む）*/
}
.pricing__packs-lead {
  padding-top: 11.3px;                               /* Figma: 6008.8 → 6020.1 */
  font-size: 18px;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .02em;
}
.pricing__packs img { width: 100%; }
.pricing .btn-cta { margin-top: 50px; }              /* Figma: 6150.7 → 6200.7 */

/* -------------------------------------------------------------------------
   15. 導入までの流れ
   ------------------------------------------------------------------------- */
.flow { padding: 74.2px 0 67.8px; background: var(--bg-06); }
.flow .sec-title { line-height: 1.19; }
/* Figma: 4枚が隙間なく並び、罫線を共有する（1枚 226.45px / 51.8..957.65） */
.flow__scroll { margin-top: 50px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.flow__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  /* Figma 実寸 905.8px。狭い幅では比率を保ったまま縮小し、
     読める限界(680px)を下回ったら横スクロールに切り替える */
  width: clamp(780px, 100%, 905.8px);
  container-type: inline-size;
}
/* カード1枚(226.45px)を基準に、内部の寸法をすべて cqw で持つ。
   幅が変わってもデザインと同じ比率のまま拡縮し、文字が切り欠きに掛からない */
.flow__item {
  position: relative;
  min-height: 16.053cqw;                             /* 145.4 / 905.8 */
  padding-top: 4.361cqw;                             /* 見出し帯 39.5 */
  /* Figma: 白地は見出し帯より下だけ。帯の切り欠きはセクション背景が見える */
  background: linear-gradient(#fff, #fff) 0 100% / 100% calc(100% - 4.361cqw) no-repeat;
}
/* Figma: 罫線も本文部分だけ。見出し帯の高さには引かれていない */
.flow__item::after {
  content: "";
  position: absolute;
  inset: 4.361cqw 0 0 0;
  border-left: 1px solid #7bcbef;
  border-bottom: 1px solid #7bcbef;
  pointer-events: none;
}
.flow__item:last-child::after { border-right: 1px solid #7bcbef; }
.flow__step {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 4.361cqw;                                  /* 39.5 / 905.8 */
  padding-left: 0.773cqw;                            /* Figma: 文字の墨が 51.8 → 63.8 */
  font-size: 1.822cqw;                               /* 16.5 / 905.8 */
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  background: var(--c-brand);
  clip-path: polygon(0 0, 87.9% 0, 98.45% 100%, 0 100%);  /* Figma: 上端199px / 下端222.95px / カード226.45px */
}
.flow__text {
  padding: 0.497cqw 1.104cqw 1.115cqw 1.457cqw;      /* Figma: 本文 x67 / 1行目 y6521 */
  font-size: 1.391cqw;                               /* 12.6 / 905.8 */
  font-weight: 500;
  line-height: 2.506cqw;                             /* 22.7 / 905.8 */
}
/* カードは常にデザインの相似形なので、改行位置もデザイン通りに出す */
.flow__text .br-pc { display: inline; }
.flow .btn-cta { margin-top: 50px; }                 /* Figma: 6613.6 → 6663.6 */

/* 819px 以下は横スクロールをやめて縦積みにする。
   cqw 指定はすべて px に上書きする（コンテナ幅が変わるため） */
@media (max-width: 819px) {
  .flow__scroll { overflow-x: visible; }
  .flow__list {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .flow__item {
    min-height: 0;
    padding-top: 40px;
    background: linear-gradient(#fff, #fff) 0 100% / 100% calc(100% - 40px) no-repeat;
  }
  .flow__item::after {
    inset: 40px 0 0 0;
    border-right: 1px solid #7bcbef;
  }
  .flow__step {
    height: 40px;
    padding-left: 12px;
    font-size: 15px;
    clip-path: polygon(0 0, calc(100% - 27px) 0, 100% 100%, 0 100%);
  }
  .flow__text {
    padding: 12px 14px 16px;
    font-size: 13px;
    line-height: 1.85;
  }
  /* デザイン幅前提の改行は使わず、ボックス幅に合わせて折り返す */
  .flow__text .br-pc { display: none; }
}

/* -------------------------------------------------------------------------
   16. よくある質問
   ------------------------------------------------------------------------- */
.faq { padding: 58.6px 0 70.8px; background: #fff; }
.faq .sec-title { line-height: 1.19; }
.faq__link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 50px;                                  /* Figma: 6880 → 6930 */
  font-size: 16.8px;
  font-weight: 900;
  line-height: 1.19;
  letter-spacing: .05em;
  color: var(--c-ink-soft);
}
.faq__link img { width: 16.8px; height: 16.8px; }

.faq__list { display: grid; gap: 8.4px; margin-top: 19px; }
.faq__item { background: var(--bg-05); border-radius: 12px; overflow: hidden; }
.faq__q {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 70px;
  padding: 10px 20px 10px 18.2px;
  text-align: left;
}
.faq__q::before {
  content: "Q";
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  font-size: 16.8px;
  font-weight: 900;
  letter-spacing: .05em;
  color: #fff;
  background: var(--c-ink-soft);
  border-radius: 50%;
}
.faq__q-text { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.faq__q-mark {
  flex: 0 0 auto;
  font-size: 22.4px;
  font-weight: 700;
  line-height: 1;
  transition: transform .25s;
}
.faq__q[aria-expanded="true"] .faq__q-mark { transform: rotate(45deg); }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 20px 22px 68px; font-size: 14px; font-weight: 500; line-height: 1.8; }

/* -------------------------------------------------------------------------
   17. お問い合わせ
   ------------------------------------------------------------------------- */
.contact { padding: 74px 0 28px; background: var(--bg-06); }
.contact .sec-title { line-height: 1.19; }

/* Figma: ラベル右端 x342 / 入力 x370..945 → ブロックは x208..945（中央寄せではない） */
.contact__form {
  width: 72.91%;                                     /* Figma: 737 / 1010.8 */
  margin: 60px 0 0 20.58%;                           /* x208 */
}
.contact__row {
  display: grid;
  grid-template-columns: 18.18% 1fr;                 /* ラベル134 / 入力575 */
  gap: 3.8%;
  align-items: center;
}
.contact__row + .contact__row { margin-top: 31px; }
.contact__row--tel  { margin-top: 28px; }
.contact__row--body { margin-top: 30px; align-items: start; }
.contact__label {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.19;
  letter-spacing: .05em;
  color: var(--c-ink-soft);
  text-align: right;
  white-space: nowrap;
}
.contact__row input[type="text"],
.contact__row input[type="email"],
.contact__row input[type="tel"],
.contact__row textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .25);
}
.contact__row input { height: 45px; }
.contact__row textarea { height: 81px; line-height: 1.5; resize: vertical; }
.contact__row ::placeholder { color: var(--c-placeholder); }
.contact__submit { margin: 21px 0 0 29.2%; }         /* Figma: 7903 → 7924 / x423 */
.contact .btn-cta { width: 165px; margin-inline: 0; padding: 0 24px; }

/* フォームの状態表示（テーマ内蔵PHPフォーム / スタンドアロン版 共通） */
.iteee-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  border-radius: 8px;
}
.form-notice--ok { color: #0b6b3a; background: #e7f6ed; border: 1px solid #9ad3b0; }
.form-notice--ng { color: #a3103a; background: #fdeaf0; border: 1px solid #f1a9bf; }
.form-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-required);
}
.contact__field { display: grid; min-width: 0; }   /* textarea 下の行間の隙間を出さない */
.dl-form .form-notice { margin-bottom: 16px; padding: 10px 12px; font-size: 12px; }
.dl-form .form-error { font-size: 11px; }

/* Contact Form 7 を差し込んだ場合も同じ見た目に */
.contact__form .wpcf7-form-control-wrap { display: block; }
.contact__form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: var(--c-required); }
.contact__form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 8px;
}

/* -------------------------------------------------------------------------
   18. 右カラム：資料ダウンロードフォーム
   ------------------------------------------------------------------------- */
.dl-form { position: sticky; top: var(--header-h); padding: 19.6px 15.4px 30px; }
.dl-form__title {
  position: relative;
  padding: 0 36px;
  font-size: 22.4px;
  font-weight: 900;
  line-height: 1.19;
  letter-spacing: .1em;
  text-align: center;
}
.dl-form__title::before,
.dl-form__title::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 26.6px;
  height: 47.6px;
  background: url("../img/form-brackets.svg") no-repeat;
}
.dl-form__title::before { left: 17px; background-position: left top; }
.dl-form__title::after  { right: 17px; background-position: right top; }

.dl-form__fields { margin-top: 26px; padding: 0 5.6px; }
.dl-form__field { margin-bottom: 22.4px; }
.dl-form__label {
  display: block;
  margin-bottom: 5px;
  font-size: 11.2px;
  font-weight: 500;
  letter-spacing: .08em;
}
.dl-form__label .req { color: var(--c-required); }

.dl-form input[type="text"],
.dl-form input[type="email"],
.dl-form input[type="tel"],
.dl-form select {
  width: 100%;
  height: 36.4px;
  padding: 0 10px;
  font-size: 11.2px;
  letter-spacing: .08em;
  background: rgba(255, 255, 255, .6);
  border: 0;
  border-radius: 3px;
}
.dl-form select {
  border-radius: 4.2px;
  background-image: url("../img/icon-select.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10.7px 6.2px;
  appearance: none;
}
.dl-form ::placeholder { color: #777; }

.dl-form__consent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 11.2px;
  font-weight: 500;
  letter-spacing: .08em;
}
.dl-form__consent input {
  flex: 0 0 12.6px;
  width: 12.6px;
  height: 12.6px;
  margin: 0 0 0 auto;
  accent-color: var(--c-brand);
  border: 1.4px solid #767676;
  border-radius: 2.8px;
}

.dl-form__submit {
  display: grid;
  place-items: center;
  width: 194.6px;
  height: 43.4px;
  margin: 22px auto 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-brand);
  background: #fff;
  border: 1.4px solid var(--c-brand);
  border-radius: 19.6px;
  transition: background .2s, color .2s;
}
.dl-form__submit:hover { color: #fff; background: var(--c-brand); }

.dl-form__notes { margin-top: 24px; font-size: 8.4px; font-weight: 500; line-height: 14px; letter-spacing: .1em; }
.dl-form__notes p + p { margin-top: 7px; }
.dl-form__notes a { color: #ff0e40; }

/* -------------------------------------------------------------------------
   19. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  display: flex;
  align-items: center;
  height: 72.8px;
  padding-left: max(38px, calc((100% - var(--design-w)) / 2 + 38px));
  padding-right: max(38px, calc((100% - var(--design-w)) / 2 + 410px));  /* Figma: 内容 x38..990 */
  background: var(--c-footer);
}
.site-footer__nav { display: flex; align-items: center; }
.site-footer__nav a { font-size: 14px; font-weight: 500; line-height: 1.4; color: #fff; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__nav li + li { position: relative; margin-left: 48px; }
.site-footer__nav li + li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 50%;
  width: 1px;
  height: 24px;
  background: #fff;
  transform: translateY(-50%);
}
.site-footer__copy { margin-left: auto; font-size: 14px; font-weight: 500; color: #fff; }

/* -------------------------------------------------------------------------
   20. スマホ固定CTA（PC では非表示）
   ------------------------------------------------------------------------- */
.sp-cta { display: none; }

/* -------------------------------------------------------------------------
   21. Responsive
   ------------------------------------------------------------------------- */

/* --- 中間サイズ：ヘッダーを詰める --- */
@media (max-width: 1240px) {
  .site-nav { gap: 14px; }
  .site-nav__link { font-size: 13px; }
}

/* --- タブレット以下：右カラムを下に落とす --- */
@media (max-width: 1100px) {
  .lp-shell { display: block; }
  .lp-main { max-width: none; }
  .lp-aside { width: 100%; box-shadow: none; }
  .dl-form { position: static; max-width: 420px; margin-inline: auto; padding: 40px 20px 56px; }

  .compare__card { padding-inline: 20px; }

  .pricing__packs { grid-template-columns: 1fr 1fr 1fr; }
  .pricing__packs-lead { grid-column: 1 / -1; }

  /* Figma の非対称配置（本文カラム1010.8px前提）は中央寄せに戻す */
  .hours__inner { width: min(740.6px, 100% - 40px); margin-inline: auto; }
  .hours__title { text-align: center; }
  .hours__note  { text-align: center; }
  .contact__form { width: min(737px, 100% - 40px); margin-inline: auto; }
  .cases__item { min-height: 0; padding-bottom: 32px; }
}

/* --- タブレット --- */
@media (max-width: 900px) {
  .hours__body { grid-template-columns: 1fr; gap: 28px; }
  .chart { margin-inline: auto; }
  .chart__link { margin-left: 0; }

  .about__list { grid-template-columns: repeat(2, 1fr); }
  .tasks__list { grid-template-columns: repeat(2, 1fr); }
  .cases__list { grid-template-columns: 1fr; max-width: 420px; }
}

/* --- スマホ --- */
@media (max-width: 768px) {
  :root { --header-h: 60px; }

  /* Header */
  .site-header { padding: 0 12px; }
  .site-header__logo { width: 92px; }
  .powered-by { display: none; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: var(--bg-05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
    transform: translateY(-120%);
    transition: transform .28s ease;
  }
  .site-nav[data-open="true"] { transform: translateY(0); }
  .site-nav__link { padding: 14px 4px; font-size: 15px; border-bottom: 1px solid #e2e2e2; }
  .site-nav__contact { width: 100%; margin: 16px 0 0; }

  .nav-toggle {
    display: grid;
    place-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-ink);
    transition: transform .25s, opacity .25s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* FV：縦積みに切り替え */
  .fv { aspect-ratio: auto; padding: 26px 0 30px; }
  .fv__title {
    position: relative;   /* 背景ヘックスより前面に置く */
    z-index: 3;
    left: auto;
    top: auto;
    width: min(100% - 32px, 480px);
    margin: 0 auto;
    padding: 14px 12px;
    height: auto;
  }
  .fv__title h1 { font-size: clamp(15px, 4.85vw, 26px); white-space: normal; }
  /* Figma のイラスト群（x10..693 / y230..652）をひとかたまりとして
     そのままの比率で縮小する。個々の位置関係は PC と同一。 */
  .fv__art {
    position: relative;
    inset: auto;
    width: min(100% - 24px, 480px);
    margin: 18px auto 0;
    aspect-ratio: 683 / 422;
    container-type: inline-size;
  }
  .fv__woman  { left: 0;      top: 30.33%; width: 71.60%; }
  .fv__laptop { left: 60.03%; top: 30.09%; width: 39.97%; }
  .fv__screen { left: 64.57%; top: 32.94%; width: 30.89%; height: 31.75%; }
  .fv__man    { left: 63.69%; top: 26.78%; width: 32.65%; }
  .fv__bubble { left: 40.99%; top: 0;      width: 33.82%; }
  .fv__balloon-text {
    left: 45.07%;
    top: 10.28%;
    width: 25.91%;
    font-size: max(9.5px, 2.343cqw);
    line-height: 1.4;
  }
  .fv__balloon-text .em { font-size: max(10.5px, 2.635cqw); }
  .fv__hex { left: auto; right: 0; top: 84px; width: 62%; opacity: .8; }

  .fv__cta {
    position: static;
    width: min(100% - 32px, 420px);
    height: 52px;
    margin: 24px auto 0;
    font-size: 16px;
    border-radius: 26px;
  }
  .fv__cta::after { right: 18px; width: 8px; height: 12px; }

  /* Sections */
  .section__inner { width: calc(100% - 32px); }
  .sec-title { font-size: 24px; }
  .sec-lead { font-size: 15px; }
  .btn-cta { width: min(100% - 16px, 420px); height: 54px; font-size: 16px; border-radius: 27px; }

  .strip { flex-wrap: wrap; gap: 12px; padding: 20px 16px; }
  .strip__card { flex: 0 1 calc(50% - 6px); height: 88px; padding: 6px; }
  .strip-after { height: 30px; }

  .nayami { padding: 36px 0; }
  .nayami__title { font-size: 19px; }
  .nayami__list { grid-template-columns: 1fr; gap: 14px; }
  .nayami__item { min-height: 0; padding: 16px; }
  .nayami__text { font-size: 15px; }   /* 中央寄せはデザイン通り（基本指定を継承）*/

  .solution { padding: 18px 0 40px; }
  .solution__arrow { width: 120px; }
  .solution__bar { min-height: 0; padding: 18px 92px 18px 18px; border-radius: 16px; }
  .solution__bar p { font-size: clamp(15px, 4.2vw, 22px); letter-spacing: .04em; }
  .solution__figure { width: 84px; right: 6px; }

  .about { padding: 36px 0 44px; }
  .about__title { font-size: 24px; }
  .about__lead { font-size: 15px; }
  .about__list { grid-template-columns: repeat(2, 1fr); gap: 12px; width: calc(100% - 32px); }
  .about__item { min-height: 0; padding: 18px 12px 22px; }
  .about__name { font-size: 15px; }
  .about__desc { font-size: 13px; }

  .tasks { padding: 36px 0 44px; }
  .tasks__title { font-size: 22px; }
  .tasks__title .small { font-size: 15px; }
  .tasks__list { width: calc(100% - 32px); }   /* 2カラムは維持（600px以下で1カラム）*/
  .tasks__card { min-height: 0; }
  .tasks__note { width: calc(100% - 32px); min-height: 0; margin: 32px auto 0; transform: none; }
  .tasks .btn-cta { transform: none; }
  .tasks__balloon { max-width: calc(100% - 96px); }
  .tasks__balloon::after { right: 24px; bottom: -10px; width: 18px; height: 18px; }
  .tasks__figure { width: 88px; right: 0; top: auto; bottom: -6px; }

  .hours { padding: 36px 0 44px; }
  .hours__inner { width: calc(100% - 32px); margin-inline: auto; }
  .hours__title { font-size: 20px; }
  .chart { width: min(100%, 275.8px); margin-inline: auto; }
  .chart__name { font-size: 6.6cqw; }
  .legend__name { font-size: 15px; }
  .legend__desc { font-size: 13px; }
  .hours__note { font-size: 12px; }

  .compare { padding: 36px 0 44px; }
  .compare__card { margin-top: 28px; padding: 20px 12px; box-shadow: 3px 3px 6px rgba(0, 0, 0, .18); }
  .compare__summary { font-size: 15px; padding-bottom: 28px; }

  .cases { padding: 36px 0 44px; }
  .cases__effect { min-height: 0; }
  .cases__list { margin-top: 26px; width: calc(100% - 32px); }
  .cases__item { min-height: 0; padding: 24px 16px 28px; }
  .cases__client { font-size: 17px; }

  .pricing { padding: 36px 0 44px; }
  .pricing__lead-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .pricing__lead { font-size: 16px; }
  .pricing__lead-cell .pricing__lead { display: none; }   /* セルは残す（消すと列がずれる）*/
  .pricing__lead-sp { display: block; margin-top: 24px; font-size: 16px; font-weight: 900; line-height: 1.6; }
  .pricing__scroll { position: relative; margin-top: 16px; }
  .pricing__scroll::before {
    content: "← 横にスクロールできます →";
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-gray);
    text-align: right;
  }
  /* 横スクロール中も項目名が見えるように左列を固定 */
  .pricing__table { min-width: 620px; }
  .pricing__table tbody th { position: sticky; left: 0; z-index: 1; font-size: 12px; }
  .pricing__table tbody td { font-size: 12px; }
  .pricing__table tbody .cell-desc { font-size: 11px; }
  .plan-head { padding: 6px 3px; }
  .plan-head__row { font-size: 13px; }
  .plan-head__row .big { font-size: 15px; }
  .plan-head__row .lbl { font-size: 11px; }
  .pricing__meta span { font-size: 11px; }
  .pricing__packs { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
  .pricing__packs-lead { font-size: 15px; }
  .pricing__packs img { max-width: 320px; margin-inline: auto; }

  .flow { padding: 36px 0 44px; }
  .flow__scroll { margin-top: 26px; }

  .faq { padding: 36px 0 44px; }
  .faq__link { font-size: 14px; }
  .faq__q { padding: 12px 14px; gap: 10px; min-height: 60px; }
  .faq__q::before { flex-basis: 28px; width: 28px; height: 28px; font-size: 14px; }
  .faq__q-text { font-size: 13.5px; letter-spacing: .04em; }
  .faq__a p { padding: 0 14px 18px 52px; font-size: 13.5px; }

  .contact { padding: 36px 0 44px; }
  .contact__form { width: calc(100% - 32px); margin: 28px auto 0; }
  .contact__row { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
  .contact__label { text-align: left; font-size: 14px; white-space: normal; }
  .contact__submit { margin-left: 0; }
  .contact .btn-cta { width: 100%; }

  /* 右カラムのフォーム：スマホでの可読性とiOSの自動ズーム対策 */
  .dl-form__title { font-size: 20px; padding: 0 30px; }
  .dl-form__label { font-size: 13px; }
  .dl-form input[type="text"],
  .dl-form input[type="email"],
  .dl-form input[type="tel"],
  .dl-form select { height: 46px; font-size: 16px; border-radius: 6px; }
  .dl-form select { background-size: 13px 8px; background-position: right 14px center; }
  .dl-form__consent { font-size: 13px; }
  .dl-form__consent input { flex-basis: 20px; width: 20px; height: 20px; }
  .dl-form__submit { width: 100%; max-width: 280px; height: 50px; font-size: 15px; border-radius: 25px; }
  .dl-form__notes { font-size: 11px; line-height: 1.7; }
  .contact__row input,
  .contact__row textarea { font-size: 16px; }

  /* Footer */
  .site-footer { flex-wrap: wrap; gap: 12px; padding: 18px 16px 88px; }
  .site-footer__nav li + li::before { display: none; }
  .site-footer__nav { flex-wrap: wrap; gap: 10px 20px; }   /* 区切り線が無いぶん間隔を広げる */
  .site-footer__nav li + li { margin-left: 0; padding-left: 0; }
  .site-footer__nav a { font-size: 12.5px; }
  .site-footer__copy { margin-left: 0; width: 100%; font-size: 12px; }

  /* 固定CTA */
  .sp-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: block;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .14);
  }
  .sp-cta .btn-cta { width: 100%; height: 50px; font-size: 15px; }
}

@media (max-width: 600px) {
  .tasks__list { grid-template-columns: 1fr; }
  .pricing__packs { grid-template-columns: 1fr; gap: 14px; }
  .pricing__packs img { max-width: 320px; margin-inline: auto; }
}

@media (max-width: 400px) {
  .about__list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-header, .sp-cta, .lp-aside { display: none !important; }
}