@charset "UTF-8";

/* =========================================================
   aw-agent+ LP
   Design: Figma "AGENT" — 1440px artboard
   All desktop values below are taken from the artboard 1:1.
   ========================================================= */

:root {
  /* colours sampled from the artboard */
  --c-bg:      #f5f5f5;
  --c-card:    #fcfcfc;
  --c-text:    #484848;
  --c-heading: #292929;
  --c-accent:  #c11a00;   /* STRENGTH / STEP labels, "A" mark */
  --c-orange:  #ffb177;   /* CTA */
  --c-marker:  #fff66f;   /* highlighter */
  --c-input:   #e6e6e6;
  --c-line:    #dcdcdc;
  --c-muted:   #7a7a7a;

  --maxw: 1200px;
  --header-h: 128px;

  /* 和文および文章中の英数字 = Noto Sans JP / 単独の英数字表記 = Roboto */
  --f-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --f-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-en: Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mark: "Bebas Neue", var(--f-en);   /* FAQ の Q / A マーク（アートボードの圧縮書体） */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-ja);
  font-size: 16px;
  line-height: 2;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

.br-sp { display: none; }   /* 1000px以下でのみ改行させる */

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: #fff; padding: 12px 20px; }
.skip-link:focus { left: 0; }

.inner { width: min(var(--maxw), calc(100% - 80px)); margin-inline: auto; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  transition: background-color .3s, box-shadow .3s, height .3s;
}
/* スクロール時の背景（すりガラス）はヘッダー本体ではなく擬似要素に持たせる。
   backdrop-filter を要素自身に指定すると、その要素が position: fixed の子孫の
   包含ブロックになり、全画面のはずのハンバーガーメニューがヘッダー内(84px)に
   閉じ込められてしまうため。 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(245, 245, 245, .63);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(0, 0, 0, .06);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.site-header.is-scrolled { height: 84px; }
.site-header.is-scrolled::before { opacity: 1; }
.site-header__inner {
  height: 100%;
  padding-inline: 40px;
  display: flex;
  align-items: center;
}
.site-header__logo { display: block; flex: none; color: #231815; }
.site-header__logo img { width: 230px; }
.site-header.is-scrolled .site-header__logo img { width: 230px; }

.gnav { margin-left: auto; display: flex; align-items: center; gap: 44px; }
.gnav__list { display: flex; align-items: center; gap: 42px; }
.gnav__list a {
  font-family: var(--f-en);
  font-size: 18px;
  letter-spacing: .03em;
  color: var(--c-heading);
  white-space: nowrap;
  transition: opacity .2s;
}
.gnav__list a:hover { opacity: .55; }

.gnav__cta {
  flex: none;
  display: grid;
  place-items: center;
  width: 185px; height: 58px;
  border-radius: 999px;
  background: var(--c-orange);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: filter .2s, transform .2s, box-shadow .2s;
}
.gnav__cta:hover  { filter: brightness(1.02); transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18); }
.gnav__cta:active { transform: translateY(3px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .24); }

.nav-toggle { display: none; }

/* =========================================================
   Fixed background wash
   Figma node 127:194 — image @70% + #f5f5f5 multiply, blur(45px).
   viewport に固定し、コンテンツだけがその上をスクロールする。
   ========================================================= */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--c-bg);
}
.page-bg__wash {
  position: absolute;
  inset: -7%;               /* blur が端で減衰して縁が出るのを防ぐ */
  isolation: isolate;       /* multiply をこのグループ内に閉じ込める */
  filter: blur(45px);
}
.page-bg__wash img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .7;
}
.page-bg__wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-bg);
  mix-blend-mode: multiply;
}

/* =========================================================
   Hero
   ========================================================= */
.hero { position: relative; overflow-x: clip; padding-top: var(--header-h); }

.hero__inner {
  position: relative; z-index: 1;
  width: min(var(--maxw), calc(100% - 80px));
  margin-inline: auto;
}

/* FV の巨大ロゴ。
   アートボード実測: x=100 / y=229 / 1240×511。
   文字ごとに異なる水彩テクスチャは、Figmaから書き出した透過PNGをそのまま使う
   （以前はテクスチャ画像＋SVGマスクで切り抜いていたが、字形とマスクの境界が
   わずかにずれて白フチが出るため、アルファ付きPNGに変更）。
   PNG本来の比率は 1240×523。アートボードではわずかに縦圧縮して置かれているため、
   aspect-ratio で 1240/511 に合わせて非等倍表示する。 */
.hero__mark {
  position: absolute;
  left: -20px;               /* artboard x = 100 */
  top: 101px;                /* artboard y = 229 */
  width: 1240px;
  max-width: 104%;
  height: auto;
  aspect-ratio: 1240 / 511;
  object-fit: fill;
  pointer-events: none;
}

.hero__copy { position: relative; padding-top: 478px; }
.hero__tagline {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .03em;
}
.hero__service {
  margin-top: 31px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--c-heading);
}
.hero__logotype { margin-top: 11px; color: #231815; }
.hero__logotype img { width: 430px; }
.hero__reading {
  margin-top: 5px;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: .04em;
}

/* =========================================================
   CTA block
   ========================================================= */
.cta {
  position: relative; z-index: 2;
  padding: 127px 20px 80px;
  text-align: center;
}
.cta__lead {
  position: relative;
  display: inline-block;
  padding-inline: 22px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--c-heading);
}
/* 文節ごとに inline-block。折り返しは文節の切れ目でのみ起こる */
.cta__lead span { display: inline-block; }

.cta__lead::before, .cta__lead::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 2px; height: 32px;
  background: var(--c-heading);
}
.cta__lead::before { left: 4px;  transform: rotate(-26deg); }
.cta__lead::after  { right: 4px; transform: rotate(26deg); }

.cta__btn {
  position: relative;
  margin: 25px auto 0;
  width: 600px; max-width: 100%;
  height: 115px;
  border-radius: 999px;
  background: var(--c-orange);
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: filter .2s, transform .2s, box-shadow .2s;
}
/* ホバーで沈み込ませる（押し込み表現） */
.cta__btn:hover {
  filter: brightness(.99);
  transform: translateY(3px);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .16);
}
.cta__btn:active {
  transform: translateY(5px);
  box-shadow: inset 0 5px 12px rgba(0, 0, 0, .22);
}
.cta__btn-sub  { font-size: 20px; font-weight: 500; line-height: 1.25; color: rgba(255, 255, 255, .9); }
.cta__btn-main { font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: .02em; }

/* 「会員登録する」と「無料」バッジは1行のグループとして中央寄せする。
   アートボードではバッジ左端が x=375（ボタン内）で、下の gap 21px の指定と一致する。 */
.cta__btn-row { display: flex; align-items: center; gap: 21px; }
.cta__btn-badge {
  flex: none;
  display: grid; place-items: center;
  width: 95px; height: 34px;
  border-radius: 999px;
  background: #fff;
  color: var(--c-orange);
  font-size: 18px; font-weight: 700; letter-spacing: .02em;
}

/* =========================================================
   Section heading (giant translucent English word behind)
   ========================================================= */
.section { position: relative; overflow-x: clip; }
.section > .inner, .strength__inner { position: relative; z-index: 1; }
/* ABOUT だけは重ね合わせコンテキストを作らない（イラストを背景と合成するため）。
   イラストは z-index:-1 なので、これでも本文より後ろに描画される。 */
.section--about > .inner { z-index: auto; }

.sec-head { text-align: center; padding: 197px 0 105px; }
.sec-head__stack { position: relative; display: inline-flex; }   /* inline-block だと行ボックスの下に余白が出て下端合わせがずれる */
.sec-head__bg {
  position: absolute;
  /* 見出し（.sec-head__title）のベースラインに下端を合わせる。
     0.15em = この文字自身のベースラインからボックス下端までの距離（Roboto / line-height:1）、
     9.2px  = 見出しのベースラインから .sec-head__stack 下端までの距離（見出し28px時） */
  left: 50%; top: auto; bottom: calc(9.2px - .15em);
  transform: translateX(-50%);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: min(160px, 19vw);   /* 1440px以上は160px固定。それ以下は最長の "HOW TO USE" が画面内に収まる大きさ */
  line-height: 1;
  color: rgba(255, 255, 255, .5);   /* アートボード実測: 白・不透明度50% */
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.sec-head__title {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: .14em;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--c-heading);
  white-space: nowrap;
}
.inline-logo { width: 199px; color: #231815; }

/* =========================================================
   ABOUT
   ========================================================= */
.section--about .sec-head { padding-top: 199px; }
.section--about {
  --about-gap: 100px;          /* 本文の下に確保する余白。イラストの底辺もここに揃える */
  padding-bottom: var(--about-gap);
}

.about__body {
  position: relative;
  font-size: 18px;
  line-height: 38px;
  letter-spacing: .01em;
}
.about__body > p { margin-top: 38px; }
.about__body > p:nth-of-type(3) { margin-top: 38px; }
.about__lead {
  font-family: var(--f-en);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--c-heading);
}
.about__note { font-size: 16px; margin-top: 96px !important; }

.about__illust {
  position: absolute;
  /* 1440pxで本文ブロックの左から30%。1440px未満では画面が狭まったぶんの半分だけ
     さらに左へ寄せる（1200px→約-120px / 1001px→約-220px） */
  left: calc(30% - max(0px, 1440px - 100vw) * 0.5);
  top: auto;
  bottom: calc(-1 * var(--about-gap));   /* 本文の下の余白の底に合わせる */
  width: 115%;                /* 98% → 115%（拡大） */
  max-width: none;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: multiply;   /* 白地を飛ばして固定背景のウォッシュとなじませる */
}

/* =========================================================
   STRENGTH
   ========================================================= */
.section--strength .sec-head { padding: 280px 0 189px; }   /* アートボード: 見出し字面 y=3447 */

/* --s は 1440px 幅を 1px とする等比スケール。1440px以下では画像も文字も
   アートボードの比率のまま縮む（本文と円の間隔も保たれる）。 */
.section--strength { --s: min(1px, 0.069444vw); }

.strength { position: relative; }
.strength--01 { min-height: calc(630 * var(--s)); }
.strength--02 { min-height: calc(613 * var(--s)); }
.strength--03 { min-height: calc(566 * var(--s)); }

.strength__inner { display: flex; }
.strength--left .strength__inner { justify-content: flex-end; }
.strength--right .strength__text { width: calc(600 * var(--s)); max-width: 100%; }
.strength--left  .strength__text { width: calc(600 * var(--s)); max-width: 100%; }

.strength__label {
  display: inline-flex;
  align-items: baseline;
  gap: calc(13 * var(--s));
  padding-bottom: calc(8 * var(--s));
  border-bottom: 2px solid var(--c-accent);
  color: var(--c-accent);
  line-height: 1;
}
.strength__label-en  { font-family: var(--f-en);  font-size: calc(28 * var(--s)); letter-spacing: 0; }
.strength__label-num { font-family: var(--f-en);  font-size: calc(46 * var(--s)); font-weight: 700; }
.strength__label-ja  { font-size: calc(26 * var(--s)); font-weight: 700; letter-spacing: .02em; }

/* 文節ごとに inline-block。折り返しは文節の切れ目でのみ起こる */
.strength__title span { display: inline-block; }
.strength__title {
  margin-top: calc(22 * var(--s));
  font-size: calc(30 * var(--s));
  font-weight: 700;
  line-height: 1.806;      /* 65 / 36 */
  letter-spacing: .01em;
  color: var(--c-heading);
}
.strength__desc {
  margin-top: calc(65 * var(--s));
  font-size: calc(18 * var(--s));
  line-height: 2;          /* 48 / 24 */
  letter-spacing: .01em;
}
.strength--03 .strength__desc { width: calc(660 * var(--s)); max-width: 100%; }

/* 円形写真はビューポート端ではなくコンテンツ中央を基準に固定する。
   1440px幅ではアートボードどおりの位置になり、ウィンドウを広げるほど
   欠けが減って円全体が見える。 */
.strength__photo { position: absolute; z-index: -1; border-radius: 50%; }   /* .strength__inner の内側なので本文より後ろに */
.strength__photo--01 { width: calc(602 * var(--s)); left: calc(50% + 115 * var(--s)); top: calc(-99 * var(--s)); }  /* Figma 151:413 実測: 円642px / x=835 / y=3583 */
.strength__photo--02 { width: calc(602 * var(--s)); left: calc(50% - 756 * var(--s)); top: calc(-108 * var(--s)); }  /* Figma 151:415 実測: 円642px / x=-36 / y=4224 */
.strength__photo--03 { width: calc(602 * var(--s)); left: calc(50% + 116 * var(--s)); top: calc(-82 * var(--s)); }   /* Figma 151:417 実測: 円642px / x=836 / y=4863 */

/* =========================================================
   HOW TO USE
   ========================================================= */
.section--howtouse .sec-head { padding: 208px 0 62px; }    /* アートボード: 見出し字面 y=6171 */

.howtouse__lead {
  text-align: center;
  font-size: 18px;
  line-height: 38px;
  letter-spacing: .01em;
  padding-bottom: 109px;
}
.howtouse__lead p + p { margin-top: 48px; }

/* --- steps ---
   アートボード実測（パネル上端 y=6719 基準）:
   「STEP & POINT」字面上端 +153 / カード上端の赤バー 64x5 / 番号字面上端 +22 /
   アイコン円 219px・左 189・上端 +28 / 見出し字面上端 +285 / 本文1行目 +358    */
.steps { background: var(--c-card); }
.steps__head { padding: 60px 40px 60px; text-align: center; }
.steps__title {
  font-family: var(--f-en);
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--c-accent);
  margin-bottom: 35px;
}
.steps__head-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 53px;
  letter-spacing: .01em;
  color: var(--c-heading);
}
/* 文節ごとに inline-block。マーカーは背景グラデーションを連続させたいので
   .marker 自体は inline のままにして、内側の文節スパンで折り返し位置を決める */
.steps__head-title > span:not(.marker),
.steps__head-title .marker > span { display: inline-block; }
.steps__head-title .marker { font-size: 30px; color: var(--c-accent); }
.marker { background: linear-gradient(transparent 60%, var(--c-marker) 60%); padding-inline: 2px; }
.steps__head-note {
  margin-top: 34px;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: .01em;
}

/* 見出しとアイコンをカード幅基準で可変にするため、リストをコンテナにする。
   50cqi = カード1枚分の幅（リスト幅の半分）。奇数カードには右ボーダー1pxがあるため、
   カード自身をコンテナにすると左右で値が 0.5px ずれて本文位置が揃わない。 */
.steps__list {
  display: grid; grid-template-columns: 1fr 1fr;
  container-type: inline-size;
  border-top: 1px solid var(--c-line);
}
.step { position: relative; padding: 16px 80px 50px; border-bottom: 1px solid var(--c-line); }
.step:nth-child(odd) { border-right: 1px solid var(--c-line); }
.step::before {
  content: "";
  position: absolute;
  left: 80px; top: 0;
  width: 67px; height: 5px;
  background: var(--c-accent);
}

/* 番号は左上に固定し、アイコンはカード内で中央に置く（番号と重ならない幅まで縮む）。
   アイコンが縮んだぶん（--icon-slack）は上下の余白に振り分けるので、
   約1012px以下ではアイコンの上に余白が入り、カード内の縦位置（見出し226px /
   本文286.7px）は幅によらず一定に保たれる。 */
.step__head {
  position: relative;
  --icon-size:  min(160px, calc(50cqi - 326px));   /* カード内容幅(50cqi-160) − 番号ぶんの余白(166) */
  --icon-slack: calc((200px - var(--icon-size)) / 2);
  padding-block: var(--icon-slack);   /* margin ではなく padding（相殺を防ぎ、ヘッド高さを200pxに保つ） */
}
.step__num {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--f-en);
  font-size: 60px;
  font-weight: 500;            /* Figma: Roboto Medium */
  line-height: 56px;
  color: var(--c-accent);
}
.step__icon {
  width: var(--icon-size);                   /* 左右に番号ぶんの余白(83px×2) を確保 */
  margin: 0 auto 0;                       /* カード上端から 27px＋余白 / 左右中央 */
}

.step__title {
  margin-top: 10px;            /* カード上端から 226px */
  /* 最長の1行「手続きサポート・書類選考」(12文字) が折り返さない上限 */
  font-size: min(24px, calc((50cqi - 160px) / 12.5));   /* 12文字 + letter-spacing .02em ぶんの余裕 */
  font-weight: 700;
  line-height: 1.406;          /* 45 / 32 */
  letter-spacing: .02em;
  color: var(--c-heading);
}
.step__desc {
  margin-top: 27px;            /* カード上端から 286.7px */
  font-size: 15px;
  line-height: 32.4px;
  letter-spacing: 0;
}
.step__desc strong { font-weight: 700; color: var(--c-heading); }
/* 02 / 05 / 06 は本文全体がボールド（Figmaの指定どおり） */
.step__desc--bold { font-weight: 700; color: var(--c-heading); }
/* 2行目・3行目のカード（03〜06）は見出しを2行分の高さに固定し、
   同じ行の本文開始位置を完全に揃える。
   （03・05 は見出しが1行。05 は Figma 上でも見出しに空行が入っている。
     04・06 にも同じ指定を当てるのは、自然な2行の高さが 2lh より 0.01px 低く
     なるブラウザの丸めを吸収するため） */
.step:nth-child(n+3) .step__title { min-height: 2lh; }

/* =========================================================
   FAQ
   アートボード実測: カード白 #fff / 角丸10 / 間隔80 /
   Q字面上端 = カード上端+48 / 罫線 +131 / A本文1行目 +193 / 行送り45
   ========================================================= */
.section--faq .sec-head { padding: 202px 0 60px; }         /* アートボード: 見出し字面 y=10217 */
.section--faq { padding-bottom: 120px; }

.faq__item {
  background: #fff;
  border-radius: 10px;
  padding: 38px 34px 42px;
  margin-bottom: 60px;
}
.faq__item:last-child { margin-bottom: 0; }

.faq__mark {
  position: absolute;
  left: 2px; top: -5px;
  font-family: var(--f-mark);
  font-weight: 400;
  font-size: 55px;
  line-height: 1;
}
.faq__mark--q { color: #c4c4c4; }
.faq__mark--a { color: var(--c-accent); }

.faq__q {
  position: relative;
  padding: 0 0 40px 84px;
  border-bottom: 1px solid var(--c-accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--c-heading);
}
.faq__a {
  position: relative;
  padding: 42px 0 0 84px;
  font-size: 18px;
  line-height: 35px;
  letter-spacing: 0;
}
.faq__a .faq__mark { top: 44px; }

/* =========================================================
   CONTACT
   ========================================================= */
.section--contact .sec-head { padding: 143px 0 93px; }       /* アートボード: 見出し字面 y=15799 */
.section--contact { padding-bottom: 200px; }

.form__row { display: flex; align-items: flex-start; margin-bottom: 116px; }
.form__label {
  flex: none;
  width: 430px;
  padding: 9px 0 0 14px;
  font-family: var(--f-mincho);
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--c-heading);
}
.req { color: var(--c-accent); margin-left: 1px; }
.form__field { flex: 1 1 auto; min-width: 0; }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form select,
.form textarea {
  display: block;
  width: 100%;
  background: var(--c-input);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 14px 20px;
  font-size: 20px;
  line-height: 1.7;
  transition: border-color .2s, background-color .2s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--c-orange); background: #fff;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form select { height: 62px; }

.form textarea { resize: vertical; height: 269px; }
.form .textarea--lg { height: 259px; }
.form ::placeholder { color: #9a9a9a; }

.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 58px; }
.select::after {
  content: "";
  position: absolute;
  right: 24px; top: 50%;
  width: 0; height: 0;
  transform: translateY(-25%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid #8a8a8a;
  pointer-events: none;
}

.filefield { margin-top: 26px; }
.filefield__btn {
  display: grid; place-items: center;
  width: 305px; height: 56px;
  border: 1px solid var(--c-heading);
  border-radius: 6px;
  background: #fff;
  font-family: var(--f-mincho);
  font-size: 19px;
  letter-spacing: .02em;
  color: var(--c-heading);
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.filefield__btn:hover  { background: var(--c-heading); color: #fff; transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28); }
.filefield__btn:active { transform: translateY(3px); }
.filefield__name { display: block; margin-top: 12px; font-size: 16px; color: #a0a0a0; }

.form__row--agree { margin-bottom: 0; }
.form__row--agree .form__field { margin-left: 430px; }

.checkbox {
  display: flex; align-items: flex-start; gap: 14px;
  cursor: pointer;
  font-family: var(--f-mincho);
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--c-heading);
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
  flex: none;
  width: 26px; height: 26px;
  margin-top: 3px;
  border-radius: 4px;
  background: var(--c-input);
  position: relative;
  transition: background-color .2s;
}
.checkbox input:checked + .checkbox__box { background: var(--c-orange); }
.checkbox input:checked + .checkbox__box::after {
  content: "";
  position: absolute;
  left: 9px; top: 3px;
  width: 6px; height: 13px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--c-orange); outline-offset: 2px; }
.checkbox__link { color: #2f5fa8; text-decoration: underline; }

.form__submit {
  display: block;
  margin-top: 38px;
  width: 448px; max-width: 100%;
  height: 78px;
  border: 0; border-radius: 4px;
  background: var(--c-heading);
  color: #fff;
  font-size: 28px; font-weight: 700; letter-spacing: .16em;
  cursor: pointer;
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
.form__submit:hover  { opacity: .92; transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .38); }
.form__submit:active { transform: translateY(3px); box-shadow: inset 0 4px 10px rgba(0, 0, 0, .45); }

.form__error { display: block; margin-top: 8px; font-size: 16px; color: var(--c-accent); }
.form .is-invalid { border-color: var(--c-accent); }

/* =========================================================
   Footer  (not part of the artboard — minimal credit bar)
   ========================================================= */
.site-footer { padding: 40px 20px; text-align: center; }
.site-footer__copy { font-family: var(--f-en); font-size: 14px; letter-spacing: .08em; color: var(--c-muted); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  :root { --header-h: 96px; }
  .site-header.is-scrolled { height: 74px; }
  .site-header__inner { padding-inline: 24px; }
  .site-header__logo img { width: 180px; }
  .site-header.is-scrolled .site-header__logo img { width: 180px; }

  .nav-toggle {
    display: grid; place-content: center; gap: 6px;
    margin-left: auto; width: 48px; height: 48px;
    border: 0; background: none; cursor: pointer; z-index: 2;
  }
  .nav-toggle span { display: block; width: 28px; height: 2px; background: var(--c-heading); transition: transform .3s, opacity .3s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .gnav {
    position: fixed; inset: 0; margin: 0;
    flex-direction: column; justify-content: center; gap: 40px;
    background: var(--c-bg);   /* 不透明にする。rgba(…,.98) だと下のコンテンツが透けて見える */
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .gnav.is-open { opacity: 1; visibility: visible; }
  .gnav__list { flex-direction: column; gap: 30px; }
}

@media (max-width: 1000px) {
  .inner, .hero__inner { width: calc(100% - 48px); }

  /* ロゴを通常フローに戻し、キャッチコピーとの間隔を20pxで固定する
     （絶対配置＋vw指定では画面幅によって間隔が変わり、狭い幅では重なっていた） */
  .hero { padding-bottom: 100px; }
  .hero__mark { position: static; width: 100%; margin-top: 40px; }
  .hero__copy { padding-top: 70px; }
  .hero__tagline { font-size: 26px; }
  .hero__service { margin-top: 24px; font-size: 20px; }
  .hero__logotype img { width: 280px; }
  .hero__reading { font-size: 15px; }

  .cta { padding: 50px 10px 50px; }
  .cta__lead { font-size: 18px; width: 80%; max-width: 480px; }   /* ボタンと同じ幅にして ＼／ を揃える */
  .cta__btn { width: 90%; max-width: 480px; height: 86px; }
  .cta__btn-sub { font-size: 16px; padding-bottom: 5px; }
  .cta__btn-main { font-size: 22px; }
  .cta__btn-row { gap: 12px; }
  .cta__btn-badge { width: 76px; height: 28px; font-size: 14px; }

  /* 余白は1001px以上の指定の 2/3 */
  .sec-head { padding: 131px 0 70px; }
  .section--about .sec-head { padding: 99px 0 70px; }
  /* ロゴと和文をそれぞれ1つのまとまりとして折り返す（語中で切れないように） */
  .sec-head__title { font-size: 19px; white-space: normal; flex-wrap: wrap; justify-content: center; }
  .sec-head__bg { bottom: calc(6.2px - .15em); }   /* 見出し19px時のベースライン合わせ */
  /* 最長の "HOW TO USE"（5.875em）だけ、1行のまま画面内に収まるサイズにする */
  .section--howtouse .sec-head__bg { font-size: min(160px, 16vw); }
  .inline-logo { width: 132px; }

  .section--about { padding-bottom: 63px; }
  .about__body { font-size: 15px; line-height: 32px; }
  .about__body > p { margin-top: 22px; }
  .about__body > p:nth-of-type(3) { margin-top: 22px; }
  .about__note { font-size: 13px; margin-top: 48px !important; }
  .about__lead { font-size: 28px; }
  /* イラストは本文の下に置く（order で最後へ） */
  .about__body { display: flex; flex-direction: column; }
  .about__illust { order: 1; position: static; width: calc(100% + 48px); margin: 40px -24px 0; }
  .about__body br { display: none; }
  .about__body .about__note br { display: block; }

  .section--strength .sec-head { padding: 90px 0 56px; }
  .strength, .strength--01, .strength--02, .strength--03 { min-height: 0; margin-bottom: 44px; }
  .strength__inner { display: block; }
  .strength--right .strength__text, .strength--left .strength__text { width: 100%; }
  .strength__photo, .strength__photo--01, .strength__photo--02, .strength__photo--03 {
    position: static; inset: auto;
    width: 74%; max-width: 300px;
    margin: 28px auto 0;
  }
  /* ラベルと見出しは中央、本文は左寄せのまま */
  .strength__text { text-align: center; }
  .strength__desc { text-align: left; }
  .strength__title br { display: none; }
  .strength__label { gap: 9px; }
  .strength__label-en  { font-size: 18px; }
  .strength__label-num { font-size: 34px; }
  .strength__label-ja  { font-size: 18px; }
  .strength__title { margin-top: 20px; font-size: 21px; line-height: 1.7; }
  .strength__desc { margin-top: 26px; font-size: 15px; line-height: 32px; }
  .strength--03 .strength__desc { width: 100%; }

  .section--howtouse .sec-head { padding: 99px 0 41px; }
  .howtouse__lead { font-size: 15px; line-height: 32px; text-align: left; padding: 50px 0 50px; }
  .howtouse__lead p + p { margin-top: 32px; }
  .howtouse__lead br { display: none; }

  .steps__head { padding: 45px 24px 42px; }
  .steps__title { font-size: 40px; margin-bottom: 24px; }
  .steps__head-title { font-size: 15px; line-height: 34px; text-align: left; }
  .steps__title br { display: none; }
  .steps__head-title .marker { font-size: 20px; }
  .steps__head-title .marker > span { display: inline; }
  .br-sp { display: inline; }

  /* 注記は左寄せ。折り返した2行目以降は ※ の1文字分だけ字下げする */
  .steps { margin-bottom: 40px; }
  .steps__head-note {
    margin-top: 24px;
    font-size: 13px;
    text-align: left;
    padding-left: 1em;
    text-indent: -1em;
  }
  .steps__list { grid-template-columns: 1fr; }
  .step { padding: 20px 24px 40px; }
  .step:nth-child(odd) { border-right: 0; }
  .step::before { left: 24px; }
  /* 番号は左上に固定し、アイコンはカード内で中央に置く。
     可変アイコン用の余白（--icon-slack）はここでは不要なので解除する */
  .step__head { display: block; position: relative; min-height: 0; padding-block: 0; }
  .step__num { position: absolute; left: 0; top: 0; width: auto; font-size: 38px; }
  .step__icon { width: 128px; margin: 0 auto; }
  .step { padding-top: 20px; }
  .step__title { margin-top: 18px; font-size: 21px; line-height: 1.4; }
  .step:nth-child(n+3) .step__title { min-height: 0; }
  .step__desc { margin-top: 16px; font-size: 14px; line-height: 28px; }

  .section--faq { padding-bottom: 80px; }
  .section--faq .sec-head { padding: 68px 0 40px; }
  .faq__item { padding: 28px 20px 30px; margin-bottom: 32px; border-radius: 8px; }
  .faq__mark { font-size: 34px; top: 1px; }
  .faq__q { padding: 0 0 18px 36px; font-size: 16px; }
  .faq__a { padding: 15px 0 0 36px; font-size: 14px; line-height: 30px; }
  .faq__a .faq__mark { top: 18px; }
  .faq__q br, .faq__a br { display: none; }

  .section--contact { padding-bottom: 133px; }
  .section--contact .sec-head { padding: 65px 0 62px; }
  .form__row { display: block; margin-bottom: 32px; }
  .form__label { width: auto; padding: 0 0 10px; font-size: 16px; }
  .form input[type="text"], .form input[type="email"],
  .form input[type="tel"], .form input[type="url"],
  .form select { height: 54px; }
  .form input, .form select, .form textarea { font-size: 16px; }
  .form textarea { height: 180px; }
  .form .textarea--lg { height: 200px; }
  .form__row--agree .form__field { margin-left: 0; }
  .checkbox { font-size: 15px; }
  .filefield__btn { width: 100%; max-width: 305px; font-size: 16px; }
  .form__submit { margin-top: 32px; width: 100%; height: 66px; font-size: 21px; }
}

@media (max-width: 440px) {
  .strength-head .sec-head__bg{
    bottom: calc(6.2px - .15em + 0.3em);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
  /* COMPANY以下 */
#contents_index_company{
  background:none;
}
#contents_index_company:before{
  background:none;
  background-image:linear-gradient(rgba(255,255,255,0.6) 40%, rgba(255,255,255,0) 60%);
}
#contents_index_company.visible:before{
}
#contents_index_clients.visible{
  border-top:none;
}
@media screen and (max-width: 768px) {
#contents_index_company:before{
  background:none;
  background-image:linear-gradient(rgba(255,255,255,0.6) 60%, rgba(255,255,255,0) 90%);
}
}