/* ==========================================================================
   coding8 - SNS戦略・運用支援 フルスクラッチLP
   ========================================================================== */

/* ---- リセット ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p,
ul, ol, li,
figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

img, svg {
  display: block;
  max-width: 100%;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* ---- カラー / 変数 ---- */
:root {
  --color-white: #FFFFFF;
  --color-white-soft: #FAFAFA;
  --color-dark: #464646;
  --color-text: #333333;
  --color-cyan: #00BFDC;
  --color-pink: #FF82D1;
  --color-orange: #FF9655;
  --color-red: #FF5035;
  --color-border: #EEEEEE;
  --color-line: #00C301; /* 元サイト実測値 rgb(0,195,1) */
  --color-green: #06C88B; /* 元サイト実測値: 課題提起セクション背景 */
  --color-voice-gray: #E1E1E1; /* 元サイト実測値: user's voice大型飾り文字 */

  --font-body: "Noto Sans JP", sans-serif;
  --font-heading: "Inter", "Noto Sans JP", sans-serif;

  --container-width: 1080px;
  --header-height: 118px;
}

body {
  font-family: var(--font-body);
  /* 元サイトの基本書体は「あおとゴシック M」(Medium族) → weight500を既定にする。
     L(Light)相当の箇所だけ個別に400へ戻す */
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container,
.header__inner,
.hero__inner,
.problem__inner,
.services__inner,
.reasons__inner,
.plans__inner,
.voice__inner,
.faq__inner,
.contact__inner,
.company__inner {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- 共通ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 40px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.btn--primary {
  background-color: var(--color-cyan);
  color: var(--color-white);
}

.btn--outline {
  background-color: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  padding: 10px 28px;
  font-size: 14px;
}

.btn--line {
  background-color: var(--color-line);
  color: var(--color-white);
}

.btn--outline-cta {
  /* 元サイト実測値: 500x68、透明背景、白4px枠、radius34、20px白文字(ピンク帯・プランCTA帯で共通使用) */
  width: 500px;
  max-width: 100%;
  height: 68px;
  padding: 0;
  background-color: transparent;
  border: 4px solid var(--color-white);
  border-radius: 34px;
  color: var(--color-white);
  font-size: 20px;
  font-weight: 800;
  /* 元サイト実測値: 影 rgba(0,0,0,.2) 0 2px 10px・文字line-height 20px */
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 10px;
  line-height: 20px;
}

.btn--large {
  /* 元サイト実測値: 20px/あおとゴシックEB → weight800 */
  padding: 18px 56px;
  font-size: 20px;
  font-weight: 800;
}

/* ---- 画像プレースホルダー ---- */
.img-placeholder {
  display: block;
  width: 100%;
  max-width: var(--ph-max, var(--ph-w, 200px));
  /* --ph-w/--ph-h はpx単位で渡されるため、calcで無単位の比率に変換する(pxのままだとaspect-ratioが無効になりautoへフォールバックしていたバグの修正) */
  aspect-ratio: calc(var(--ph-w, 4px) / 1px) / calc(var(--ph-h, 3px) / 1px);
  margin: 0 auto;
  background:
    repeating-linear-gradient(
      45deg,
      #e9e9e9,
      #e9e9e9 10px,
      #f4f4f4 10px,
      #f4f4f4 20px
    );
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* 実画像に差し替えた箇所(<img>タグ)はプレースホルダー用の背景・枠線を除去 */
img.img-placeholder {
  background: none;
  border: none;
  border-radius: 0;
  object-fit: contain;
  /* height:auto を明示指定しないと、画像本来の縦横比とaspect-ratio指定値が僅かに異なる場合に
     ブラウザが本来のサイズを優先してしまう(max-width適用後にaspect-ratioが再計算されない)不具合の回避 */
  height: auto;
}

.img-placeholder--logo {
  margin: 0;
  border-radius: 4px;
}


/* ---- フェードインアニメーション ----
   元サイト実測(appearルール直読): アニメするのは29要素のみ。見出し・CTA・フォームは動かない。
   既定=上20px/1000ms/ease-in-out、ヘッダー=下-8px/500ms/ease、
   ヒーローリード・LINEボタン・サービス画像=blur(100px)/1000ms、会社概要=800ms。
   ディレイは要素ごとにdata-delayで指定(元のtransition-delayを転記) */
.fade-in {
  opacity: 0;
  transform: translate(0, 20px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.fade-in--blur {
  transform: none;
  filter: blur(100px);
  transition: opacity 1s ease-in-out, filter 1s ease-in-out;
}

.fade-in--down {
  transform: translate(0, -8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in--dur800 {
  transition-duration: 0.8s;
}

/* LINEボタンは.btnのhover用transitionに上書きされないよう明示的に合成する */
.line-cta__btn.fade-in--blur {
  transition: opacity 1s ease-in-out, filter 1s ease-in-out, transform 0.25s ease, box-shadow 0.25s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.header {
  /* 元サイト実測値: ヘッダーは非sticky(スクロールで流れる)・高さ118px。
     追従するのはLINE登録ボタン(.line-cta)の方 */
  position: relative;
  z-index: 100;
  height: var(--header-height);
  background-color: var(--color-white);
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 16px;
}

.header__logo {
  flex: none;
}

.header__logo img {
  /* 元サイト実測値: ロゴ125x47 @(109,36) */
  display: block;
  width: 125px;
  height: 47px;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 0;
}

.header__nav-list a {
  font-family: var(--font-heading);
  /* 元サイト実測値: ナビはLato 15px/400、各項目padding 4px 12px、項目同士は隣接(gap0) */
  font-size: 15px;
  font-weight: 400;
  /* 元サイト実測値: ナビ文字色 rgb(34,34,34) */
  color: #222222;
  padding: 4px 12px;
  display: inline-block;
  transition: color 0.2s ease;
}

.header__nav-list a:hover {
  color: var(--color-cyan);
}

.header__nav-list-mobile-only {
  display: none;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.header__icon-link {
  /* 元サイト実測値: 50x50の#FAFAFA円ボタン。Instagramはアイコン18px/#222、LINEは画像15x15 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #FAFAFA;
  color: #222222;
  transition: color 0.2s ease;
}

.header__icon-link:hover {
  color: var(--color-cyan);
}

.header__actions-contact {
  /* 元サイト実測値: 156.2x54、bg#515151、radius999、白16px */
  width: 156.2px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  letter-spacing: -0.3px;
  background-color: #515151;
  border: 2px solid #515151;
  border-radius: 999px;
  color: var(--color-white);
  /* 元サイト実測値: Lato 15px/700 */
  font-size: 15px;
  font-weight: 700;
}

.header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 32px;
  height: 32px;
}

.header__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ドロワー内のピルボタン(モバイルメニュー専用、元サイト実測: 202x38・radius999) */
/* ピルは.header__nav-list a(display:inline-block/block)より優先させるため
   a付きセレクタで指定する(specificity負けでdisplay:flexが効かず
   文字が左上に寄る崩れの修正 2026-08-26) */
.header__nav-list a.header__nav-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 202px;
  height: 38px;
  border-radius: 999px;
  font-size: 14px;
}

.header__nav-list a.header__nav-pill,
.header__nav-list a.header__nav-pill:hover {
  color: var(--color-white);
}

.header__nav-pill--line {
  background-color: #00C301;
}

.header__nav-pill--contact {
  background-color: #515151;
  font-weight: 700;
}

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.hero {
  /* 元サイト実測値(2026-08-19再測定): 白背景。筆文字y263・タイトルy382で下端607、
     sticky LINE帯(76px)に続く */
  background-color: var(--color-white);
  padding: 145px 0 39px;
  position: relative;
  overflow: hidden;
}

/* 背景装飾(有機形の散らし装飾)。フローに影響しない絶対配置。
   元サイト実測(1280): 装飾ボックスは(y118, 1080x489)=ヒーロー上端ちょうどから開始・クリップなし。
   旧top:-17pxは誤校正で上端17pxが刈られていた(ユーザー報告の見切れの原因) */
.hero__decoration {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 100%);
  z-index: 0;
  pointer-events: none;
}

.hero__decoration img {
  display: block;
  width: 100%;
  height: auto;
}

/* 縦型バリアント(577x719)は≦540専用。基本帯では横型(1079x488)のみ表示 */
.hero__decoration .hero__decoration-img--sp {
  display: none;
}

/* モバイル(≦540)専用ヒーロー写真(元サイト実測: 411x235を全幅表示、筆文字と入替) */
.hero__photo {
  display: none;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}

.img-placeholder--hero {
  /* 元サイト実測値(2026-08-19): 筆文字下端366→タイトル382=間隔16px(innerのgap40と相殺) */
  margin-bottom: -24px;
}

.hero__title {
  font-family: var(--font-body);
  /* 元サイト実測値: 20px/あおとゴシックM → weight500 */
  font-size: 20px;
  font-weight: 500;
  /* 元サイト実測値: line-height 28px(1.4) */
  line-height: 1.4;
  color: var(--color-text);
  max-width: 720px;
  /* 元サイト実測値: タイトル下端410→統計ラベル490(flex gap40と合わせ80) */
  margin-bottom: 40px;
}

.hero__stats {
  display: flex;
  /* 元サイト実測値: 3列の中心間隔183px(→gap約98px) */
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__stat {
  /* 元サイト実測値: 等幅カラム151px(gap32 → 中心間隔183px) */
  width: 151px;
  color: var(--color-text);
  text-align: center;
}

.hero__stat-label {
  /* 元サイト実測値: 16px/あおとゴシックM → weight500、line-height 22.4px(1.4)、数値行が直後に続く(margin 0) */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0;
}

.hero__stat-value {
  font-family: var(--font-heading);
  /* 元サイト実測値: 40px/lh56、フォントは「あおとゴシック EB」(ExtraBold) → weight800で代替 */
  font-weight: 800;
  font-size: 40px;
  line-height: 1.4;
  color: var(--color-text);
}

.hero__stat-suffix {
  /* 元サイト実測値: +/%はあおとゴシックM 20px → weight500(数値のEB800とは別書体) */
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  margin-left: 2px;
}

/* ==========================================================================
   LINE登録CTA帯
   ========================================================================== */
.line-cta {
  /* ユーザー要望(2026-08-26): 元サイトのsticky帯76pxをやめ、縦書きボタンを
     右端中央にfixedで固定してスクロール追従させる(全帯共通)。
     z-indexはモバイルドロワー(1200)より下に置く */
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1100;
  height: auto;
  padding: 0;
  background-color: transparent;
  pointer-events: none;
}

.line-cta__btn {
  /* 縦書き(writing-mode)でアイコン→文字が上から下へ並ぶ。
     右端に接するため角丸は左側のみ。色はbg rgb(0,195,1)を継承(.btn--line) */
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  margin: 0;
  width: 53px;
  height: auto;
  padding: 20px 0 24px;
  gap: 8px;
  border-radius: 24px 0 0 24px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.line-cta__btn img {
  display: block;
  width: 40px;
  height: 40px;
}

/* ==========================================================================
   課題提起
   ========================================================================== */
.problem {
  /* 元サイト実測値: 背景 #06C88B、見出し・本文とも白文字。
     開始683(sticky帯の直後)・見出し803・下端1317(マーキー171px帯に接続) */
  background-color: var(--color-green);
  padding: 120px 0 120px;
}

.problem__inner {
  text-align: center;
  max-width: 860px;
}

.problem__heading {
  font-family: var(--font-heading);
  /* 元サイト実測値: 30px/あおとゴシックEB → weight800、line-height 42px(1.4) */
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 64px;
  color: var(--color-white);
}

.problem__lead {
  /* 元サイト実測値: 20px/400、幅約631px、line-height 32px(1.6) */
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 631px;
  margin: 0 auto;
  text-align: left;
  color: var(--color-white);
}

/* ==========================================================================
   課題提起 見出し繰り返し(元サイト実測: 白背景・画像なし・高さ138px)
   ========================================================================== */
.problem-repeat {
  /* 元サイト実測値: 帯1488..1575(87px)、見出しy1536は帯下端に3pxはみ出す(白地同士で不可視) */
  background-color: var(--color-white);
  padding: 48px 0 0;
  height: 87px;
}

.problem-repeat__inner {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.problem-repeat__heading {
  /* 元サイト実測値: 30px / あおとゴシックEB → weight800 / #444444 / 中央揃え(x318) / line-height 42px(1.4) */
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  color: #444444;
  text-align: center;
}

/* ==========================================================================
   サービス紹介画像帯(元サイト実測: 白背景・画像758x494のみ・高さ638px)
   ========================================================================== */
.services-image {
  background-color: var(--color-white);
  padding: 83px 0 107px;
  text-align: center;
}

.services-image__inner {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* お悩みイラストは≦540で縦型バリアント(536x731)に切替(元サイト実測) */
.services-image__sp {
  display: none;
}

/* ==========================================================================
   マーキー(帯状スクロールバナー)
   ========================================================================== */
.marquee {
  overflow: hidden;
  background-color: var(--color-dark);
  padding: 20px 0;
}

.marquee__track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: marquee-scroll 18s linear infinite;
}

.marquee__track span {
  font-family: var(--font-heading);
  font-size: 28px;
  /* 元サイト実測値: マーキー文字はweight 400、line-height 1(ボックス高=フォントサイズ) */
  font-weight: 400;
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
}

.marquee--logos {
  background-color: transparent;
  margin-top: 32px;
}

.marquee--logos .marquee__track {
  align-items: center;
  animation-duration: 24s;
}

.marquee--worries {
  /* 元サイト実測値: 帯高171px、文字line100pxを上下中央に格納(ディセンダーが切れない)。
     流速65px/s(JSがセット幅から正確なdurationを算出して上書き) */
  background-color: transparent;
  padding: 0;
  height: 171px;
  display: flex;
  align-items: center;
}

.marquee--worries .marquee__track {
  gap: 0;
  animation-duration: 47s;
}

.marquee__set {
  /* 元サイト実測値: コピー間隔はworries/voiceとも73px(周期=コピー幅+73) */
  display: flex;
  flex: none;
  gap: 73px;
  padding-right: 73px;
}

.marquee--worries .marquee__track span,
.marquee--voice .marquee__track span {
  color: var(--color-voice-gray);
  font-style: normal;
  /* 元サイト実測値: 100px「Clarimo UD PE Narrow Ultra」(極太コンデンス) → Inter weight900で代替。
     line-height 1、letter-spacing 10px */
  font-size: 100px;
  font-weight: 900;
  line-height: 1;
  /* Interは元書体(Narrow)より字幅が広いため、コピー幅を元実測値に合わせて校正:
     worries 1337px(ls7.5) / voice 679px(ls5) */
  letter-spacing: 7.5px;
}

.marquee--voice .marquee__track span {
  letter-spacing: 5px;
}

.marquee--voice {
  /* 元サイト実測値: voiceもマーキー(track keyframe -1504px・60px/s)。帯180px、line100を上下中央 */
  background-color: transparent;
  padding: 0;
  height: 180px;
  display: flex;
  align-items: center;
}

.marquee--voice .marquee__track {
  gap: 0;
  animation-duration: 25s;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   提供のサービス
   ========================================================================== */
.services {
  /* 元サイト実測値: 背景 #FF82D1、見出し装飾アイコンが帯の最上部に接する(padding-top実質0)、CTAボタン下48pxで帯終了 */
  background-color: var(--color-pink);
  padding: 0 0 71px;
}

.services__inner {
  /* 元サイト実測値: グリッド幅1048(左右16px) */
  padding-left: 16px;
  padding-right: 16px;
}

.section-heading {
  text-align: center;
  /* 元サイト実測値: 見出し下〜カード群まで32px */
  margin-bottom: 32px;
}

.img-placeholder--icon {
  /* 元サイト実測値: アイコン下〜見出しまで32px */
  margin-bottom: 32px;
}

.section-heading h2,
.reasons__heading,
.plans__heading,
.faq__heading,
.contact__heading,
.company__heading {
  /* 元サイト実測値: 見出しは軒並み30px「あおとゴシックEB」 → weight800、line-height 42px(1.4) */
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

/* 色付き帯セクションの見出しは白文字(可読性のため個別指定) */
.section-heading h2,
.plans__heading,
.contact__heading {
  color: var(--color-white);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 元サイト実測値: カード間隔16px、カード上端2457(見出しブロック+20)。
     margin-topは見出しのmb32と相殺されるためpaddingで確保する */
  gap: 16px;
}

.service-card {
  /* 元サイト実測値: 338x257・padding24・ボーダーなし・コンテンツ上下中央寄せ
     (本文の行数が少ないカードはタイトルが下がる=元サイトの挙動) */
  background-color: var(--color-white);
  border-radius: 30px;
  padding: 24px;
  height: 257px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-card__title {
  font-family: var(--font-heading);
  /* 元サイト実測値: 30px/あおとゴシックEB → weight800/lh1.4(ピンク文字は元サイト準拠) */
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-pink);
  text-align: center;
  margin-bottom: 16px;
}

.service-card__text {
  /* 元サイト実測値: 16px/あおとゴシックL → weight400(本文既定500より軽い)/lh25.6(1.6) */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-pink);
}

.services__cta {
  /* 元サイト実測値: カード群下端(2987)→CTAボタン文字(3038)=51px */
  text-align: center;
  padding: 48px 0 0;
}

/* ==========================================================================
   私たちが選ばれる理由
   ========================================================================== */
.reasons {
  /* 元サイト実測値: 白背景。padding-bottomはカルーセル(全幅)がセクション内で完結するため最小限 */
  background-color: var(--color-white);
  /* 元サイト実測値: 見出し(ブラケット込みh70)上端はセクション+49px(3203) */
  padding: 49px 0 75px;
}

.reasons__heading {
  /* 元サイト実測値: 30px/あおとゴシックEB → weight800(セクション背景は白のまま) */
  font-size: 30px;
  font-weight: 800;
  color: #444444;
  /* 元サイト実測値: 見出し下端(3273)→バッジ上端(3345)=72px */
  margin-bottom: 72px;
  letter-spacing: 0;
}

.reason {
  /* 元サイト実測値: サイクル図下端→reason2バッジ上端=80px */
  margin-bottom: 80px;
}

.reason:last-child {
  margin-bottom: 0;
}

.reason__head {
  /* 元サイト実測値: バッジ+見出しのブロック全体を中央寄せ */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 59px;
}

.reason:first-of-type .reason__head {
  /* 元サイト実測値: reason1見出し下端(3418)→サイクル図(3478)=60px */
  margin-bottom: 40px;
}

.reason:last-of-type .reason__head {
  /* 元サイト実測値: reason2見出し下端(4220)→カルーセル(4244)=24px */
  margin-bottom: 24px;
}

.reason__badge {
  /* 元サイト実測値: 74x73、赤い星型SVGを背景に敷き白数字を中央重ね */
  position: relative;
  width: 74px;
  height: 73px;
  flex: none;
}

.reason__badge-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reason__badge-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-white);
  font-family: var(--font-heading);
  /* 元サイト実測値: 番号はあおとゴシックEB 30px白 → weight800 */
  font-weight: 800;
  font-size: 30px;
  line-height: 42px;
}

.reason__title {
  font-family: var(--font-heading);
  /* 元サイト実測値: 30px/あおとゴシックEB → weight800/rgb(241,58,59)/lh42(バッジ73の中央=+16) */
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  color: rgb(241, 58, 59);
  margin: 0;
}

/* サイクル図(元サイト実測: 622x609、2x2セル250x250、矢印コネクタ素材は取得不能のため未配置) */
.reason__cycle {
  position: relative;
  width: 622px;
  max-width: 100%;
  height: 609px;
  margin: 0 auto;
}

.reason__cycle-cell {
  position: absolute;
  width: 250px;
  height: 250px;
}

.reason__cycle-cell--1 { left: 15px; top: 0; }
.reason__cycle-cell--2 { left: 356px; top: 0; }
.reason__cycle-cell--3 { left: 15px; top: 359px; }
.reason__cycle-cell--4 { left: 356px; top: 359px; }

.reason__cycle-cell img {
  position: absolute;
  display: block;
}

.reason__cycle-arrow {
  /* 元サイト実測値: 矢印コネクタ(::before背景画像)をimgで再現。セルの背面に置く */
  position: absolute;
  display: block;
  pointer-events: none;
}

.reason__cycle-arrow--top { left: 278px; top: 117px; width: 66px; height: 16px; }
.reason__cycle-arrow--left { left: 132.5px; top: 271.5px; width: 16px; height: 66px; }
.reason__cycle-arrow--right { left: 473.5px; top: 271.5px; width: 16px; height: 66px; }
.reason__cycle-arrow--bottom { left: 278px; top: 477px; width: 66px; height: 14px; }

.reason__cycle-cell--1 img { width: 238px; height: 198px; left: 6px; top: 26px; }
.reason__cycle-cell--2 img { width: 223px; height: 224px; left: 14px; top: 13px; }
.reason__cycle-cell--3 img { width: 230px; height: 168px; left: 10px; top: 41px; }
.reason__cycle-cell--4 img { width: 236px; height: 208px; left: 7px; top: 21px; }

.reason__cycle-cell p {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--color-white);
  /* 元サイト実測値: サイクル語はあおとゴシックEB → weight800 */
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

/* 事例カルーセル(元サイト実測: 全幅1265x519のfull-bleedマーキー、.reasons__innerの外に置き全幅を確保) */
.carousel {
  width: 100%;
  padding: 16px 0 15px;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  gap: 16px;
  width: max-content;
  /* 元サイト実測値: 3枚1セット(1392px)を60px/s(keyframe -1392px / rate60)で流す。
     周期は変数化(モバイルでカード幅と連動して縮小するため) */
  --carousel-cycle: -1392px;
  animation: carousel-scroll 23.2s linear infinite;
}

.carousel__track .carousel__slide {
  /* 元サイト実測値: 448x488固定(旧--logo-cardスタイルの流用ではなくカルーセル専用クラス) */
  width: 448px;
  max-width: none;
  height: 488px;
  flex: none;
}

/* 事例カード(元サイトでは528x576の画像。ユーザー提供スクショを基にコードで再現) */
.case-card {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 26px 30px 24px;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: #333;
  overflow: hidden;
}

.case-card__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9b9b9b;
}

.case-card__title {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: #F13A3B;
}

.case-card__stats {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.case-card__stat {
  text-align: center;
}

.case-card__value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #F13A3B;
}

.case-card__value span {
  font-size: 15px;
  font-weight: 700;
  margin-left: 1px;
}

.case-card__caption {
  margin-top: 7px;
  font-size: 11px;
  color: #333;
}

.case-card__divider {
  margin: 20px 0 0;
  border: none;
  border-top: 1px solid #333;
  width: 100%;
}

.case-card__before-label {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #333;
}

.case-card__after-label {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #F13A3B;
}

.case-card__list {
  margin-top: 6px;
  list-style: none;
  padding: 0;
}

.case-card__list li {
  font-size: 13px;
  line-height: 1.85;
}

.case-card__list li::before {
  content: "・";
}

.case-card__list--after li {
  color: #F13A3B;
  font-weight: 700;
}

@keyframes carousel-scroll {
  /* 1セット=3枚×(448+16gap)=1392px ちょうどで折り返すことでシームレスに繋ぐ。
     -50%だと末尾にgapが無い分ずれて1周ごとに飛びが出る */
  from { transform: translateX(0); }
  to { transform: translateX(var(--carousel-cycle, -1392px)); }
}

/* ==========================================================================
   プラン(元サイト実測: 1265x1503、y4838〜6341)
   ========================================================================== */
.plans {
  background-color: var(--color-cyan);
  /* 元サイト実測値: 見出し[プラン]は帯上端+96px(4934)、LP行下端→帯下端(10/2再計測で40) */
  padding: 96px 0 40px;
}

.plans__heading {
  /* 元サイト実測値: 「[」「プラン」「]」はgap16の横並び(字間なし) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 64px;
}

.plans__bracket {
  /* 元サイト実測値: 角括弧は50px/fw200/lh70(box15x70) */
  font-size: 50px;
  font-weight: 200;
  line-height: 70px;
  vertical-align: middle;
}

.plans__group-title {
  font-family: var(--font-heading);
  /* 元サイト実測値: 30px/あおとゴシックEB → weight800/lh42、上下padding16(box h74)、下46でカード行 */
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  /* 元サイト実測値(10/2再計測): 見出し上下に白2pxの区切り線(幅1048・箱の外側に接する)。
     [線2][見出し74][線2]の直後24pxでカード行 */
  padding: 16px 0;
  margin: 0 -1px 24px;
  border-top: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  color: var(--color-white);
}

.plans__inner {
  /* 元サイト実測値: プランカード3×338+gap16×2=1046pxの内寸を確保するため、
     共通.xxx__innerのpadding(20px)よりわずかに狭める */
  padding: 0 17px;
}

.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1046px;
  margin: 0 auto;
  /* 元サイト実測: 背の低いプレミアムカードは行の中で縦中央(上下3.5pxずつ) */
  align-items: center;
}

.plan-card {
  /* 元サイト実測値: 338x375、白背景・border-radius30・境界線なし。
     内部要素(名称+56/価格+78/リスト+144)の相対位置は現状維持のためmin-heightで下方に余白を追加 */
  background-color: var(--color-white);
  border-radius: 30px;
  padding: 56px 32px;
  /* 元サイト実測値(10/2再計測): カードはflex縦並び・中央寄せ(リストは内容幅のブロックで中央)。
     高さはpadding+内容で決まる(スタータ/スタンダード374.7、プレミアム367.7) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.plan-card__title {
  font-family: var(--font-heading);
  /* 元サイト実測値: 16px/あおとゴシックEB → weight800/lh22.4(1.4) */
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 0;
  color: var(--color-cyan);
}

.plan-card__price {
  font-family: var(--font-heading);
  font-size: 16px;
  /* 元サイト実測値: 「円〜」は16px/800/lh22.4 */
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  /* 元サイト実測値: 数字と「円〜」は縦中央揃えの横並び */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--color-cyan);
}

.plan-card__price span {
  /* 元サイト実測値: 30px/あおとゴシックEB → weight800/lh42 */
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
}

.plan-card__price--inquiry span {
  /* 元サイト実測値: 「お問合せください」は25px/400/lh35 */
  font-size: 25px;
  line-height: 1.4;
}

.plan-card__list {
  /* 元サイト実測値: リスト箱は内容幅(最長項目の幅)でカード中央、項目は左揃え */
  width: fit-content;
  text-align: left;
}

.plan-card__list li {
  /* 元サイト実測値: 16px/lh22.4、有効=シアン、無効=#C6C6C6 */
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-cyan);
  margin-bottom: 8px;
}

.plan-card__list li:last-child {
  margin-bottom: 0;
}

.plan-card__list li.is-disabled {
  color: #C6C6C6;
}

.plans__plus {
  /* 元サイト実測値: 60px/白/あおとゴシックEB → weight800/lh84(1.4) */
  text-align: center;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-white);
  /* 元サイト実測値(10/2再計測): カード行下端→+(box84)→オプションカードは上下とも16px */
  margin: 16px 0 16px;
}

.plans__option {
  /* 元サイト実測値: 1048x189、白背景・radius30 */
  background-color: var(--color-white);
  border-radius: 30px;
  max-width: 1048px;
  /* 元サイト実測値: 線・オプション・LP行は内寸より左右1pxずつ広い1048 */
  margin: 0 -1px;
  /* 元サイト実測値(10/2再計測): 左右padding216(内寸616)。1000幅で注記が折り返す位置もこれで決まる */
  padding: 24px 216px;
  text-align: center;
}

.plans__option-title {
  font-family: var(--font-heading);
  /* 元サイト実測値: 30px/あおとゴシックEB → weight800/シアン/lh1.4 */
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 16px;
  color: var(--color-cyan);
}

.plans__option-items {
  /* 元サイト実測値: 16px/あおとゴシックEB → weight800 */
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 16px;
  color: var(--color-cyan);
}

.plans__option-note {
  /* 元サイト実測値(10/2再計測): 16px/あおとゴシックL → weight400、幅約616px、シアン/lh1.4 */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-cyan);
  max-width: 616px;
  margin: 0 auto;
}

.plans__lp-heading {
  /* 元サイト実測値: 30px/白/あおとゴシックEB → weight800/lh42、上下padding16(box h74)、上86・下46 */
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-white);
  text-align: center;
  padding: 16px 0;
  /* 元サイト実測値(10/2再計測): オプション下端→上の線104(PC/タブレット)・線の下端→カード24。
     見出しは.plans__group-titleと同じ[線2][見出し74][線2]の構造 */
  margin: 104px -1px 24px;
  border-top: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
}

.plans__lp-row {
  /* 元サイト実測値(10/2再計測): 左右の箱は幅calc(45% - 13.2px)で両端、+は間の中央 */
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  max-width: 1048px;
  margin: 0 -1px;
}

.plans__lp-card {
  /* 元サイト実測値: 458x245、白背景、radius16、内容は上下60pxで中央寄せ */
  background-color: var(--color-white);
  border-radius: 16px;
  width: calc(45% - 13.2px);
  max-width: 100%;
  padding: 24px 40px;
  text-align: center;
}

@media screen and (min-width: 541px) {
  .plans__lp-card {
    /* 元サイト実測値(10/2再計測): カードはflex縦並び・中央寄せ。注記は左揃え(箱幅=カード内寸) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .plans__lp-price {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .plans__lp-note {
    text-align: left;
  }
}

@media screen and (min-width: 541px) and (max-width: 840px) {
  .plans__lp-price {
    /* 元サイト実測値(10/2再計測): タブレットの「円〜」は30px */
    font-size: 30px;
  }
}

.plans__lp-price-label {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--color-cyan);
}

.plans__lp-price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--color-cyan);
}

.plans__lp-price span {
  /* 元サイト実測値: 30px/あおとゴシックEB → weight800 */
  font-size: 30px;
  font-weight: 800;
  color: var(--color-cyan);
}

.plans__lp-note {
  /* 元サイト実測値: 16px/#C6C6C6/幅378、2行中央/lh22.4 */
  font-size: 16px;
  line-height: 1.4;
  color: #C6C6C6;
  max-width: 378px;
  margin: 0 auto;
}

.plans__lp-plus {
  /* 元サイト実測値(10/2再計測): 60px/白/lh84、行の縦中央(カード・ピル列の中心) */
  font-size: 60px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-white);
  flex: none;
  width: auto;
  text-align: center;
  align-self: center;
}

.plans__lp-pills {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: calc(45% - 13.2px);
  max-width: 100%;
}

.plans__lp-pill {
  /* 元サイト実測値: 458x71、gap16(列高245=カード高と一致)、白ピル、radius16 */
  background-color: var(--color-white);
  border-radius: 16px;
  height: 71px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plans__lp-pill p {
  /* 元サイト実測値: 20px/lh28/あおとゴシックEB → weight800/シアン */
  font-size: 20px;
  line-height: 1.4;
  font-weight: 800;
  color: var(--color-cyan);
  text-align: center;
}

/* ==========================================================================
   プランCTA帯(青帯直後の別セクション、元サイト実測: 1265x132)
   ========================================================================== */
.plans-cta {
  background-color: var(--color-cyan);
  padding: 32px 0;
  text-align: center;
}

/* ==========================================================================
   お客様の声
   ========================================================================== */
.voice {
  background-color: var(--color-white);
}

.voice__inner {
  /* 元サイト実測値(10/2再計測): 吹き出し画像は帯下端+32、画像下端+112でカード(=空白節の下32+カード節の上80)、
     カード下80。左右16(カード3列=333px)。過去に出現アニメ未発火の20px下を写していたのを是正 */
  padding: 32px 16px 80px;
}

.img-placeholder--voice {
  margin-bottom: 112px;
}

.voice__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.voice-card {
  /* 元サイト実測値: 背景 #FF9655(オレンジ)・白文字・高さ257px */
  background-color: var(--color-orange);
  border-left: none;
  border-radius: 30px;
  padding: 24px;
  min-height: 257px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.voice-card__text {
  /* 元サイト実測値: 16px/400/lh1.6(285x102) */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  /* 元サイト実測値(10/2再計測): 本文と肩書きの間はflex gap16 */
  margin-bottom: 16px;
  color: var(--color-white);
}

.voice-card__role {
  font-family: var(--font-heading);
  /* 元サイト実測値: 20px/あおとゴシックEB → weight800、行高28(1.4) */
  font-weight: 800;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-white);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  /* 元サイト実測値: 白背景、総高542px相当。後続に101pxの白ギャップ(何も置かない) */
  background-color: var(--color-white);
  /* 10/2再計測: 全帯共通で上96・下24(見出しは上下pad16の箱)。出現アニメ未発火の20px下を写していたのを是正 */
  padding: 96px 0 24px;
  margin-bottom: 101px;
  position: relative;
}

.faq__heading {
  /* 元サイト実測値: 見出しは上下padding16・色#444・下16で項目 */
  padding: 16px 0;
  margin-bottom: 16px;
  color: #444444;
}

.faq__list {
  max-width: 796px;
  margin: 0 auto;
}

.faq__item {
  /* 元サイト実測値(10/2再計測): 枠線なし・白背景・radius12、項目ピッチ68(高さ60+間隔8) */
  background-color: var(--color-white);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}

.faq__item:last-child {
  margin-bottom: 0;
}

.faq__question {
  /* 元サイト実測値: 閉時の高さ約60px */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  min-height: 60px;
  text-align: left;
}

.faq__question p {
  /* 元サイト実測値: 16px/700、line-height 1 */
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.faq__icon {
  flex: none;
  /* 元サイト実測値(10/2再計測): ▼は#333(シアンではない) */
  color: #333333;
  /* 元サイト実測(2026-08-26): 閉時はarrow_drop_upをrotate(180deg)=下向きで表示し、
     開時に上向きへ戻す(グリフはサブセットの都合でarrow_drop_up固定、向きはCSSで制御) */
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.faq__question[aria-expanded="true"] .faq__icon {
  transform: rotate(0deg);
}

.faq__answer {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.faq__answer-inner {
  padding: 12px;
}

.faq__answer-inner p {
  /* 原本実測値: FAQ本文は14px/400/行高19.6px */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
}

.back-to-top {
  /* ユーザー指定: 星型SVG(asset_172x165.svg)を95x94枠に表示+「↑」30px/#333。
     ユーザー要望によりスクロール追従(fixed)。600pxスクロールでフェードイン(JS) */
  position: fixed;
  right: 29px;
  bottom: 29px;
  width: 95px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  color: #333333;
  background: none;
  border: none;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.back-to-top.is-shown {
  opacity: 1;
  visibility: visible;
}

.back-to-top img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.back-to-top__arrow {
  position: relative;
}

/* ==========================================================================
   問合せフォーム
   ========================================================================== */
.contact {
  /* 元サイト実測値: 背景 #464646、総高1034px相当、見出し・ラベルは白文字。
     ↑リンクをposition:absoluteで内側に配置するための基準 */
  position: relative;
  background-color: var(--color-dark);
  padding: 104px 0 104px;
}

.contact__heading {
  /* 元サイト実測値(1280/700/375すべて同一): 208x90・font-size30px・line-height42px・
     padding24px 0・text-align:left。テキストは折り返さず1行「問合せフォーム」で、
     高さ90pxは 24+42+24 の1行ボックス。
     旧実装は90pxを「45px×2行の折返し」と誤読しており、そのため「問合せフォー/ム」と
     1文字だけ落ちて改行していた。総高90pxは変わらないので以降のアンカーには影響しない。
     代替フォントのNoto Sans JPはCJKの送りが1emちょうどで7文字=210px>208pxとなり
     放置すると再び折り返すため、nowrapで1行に固定する
     (右に2pxはみ出すが親は1080pxなので見た目・横スクロールとも影響なし)。 */
  max-width: 208px;
  margin: 0 auto 0;
  padding: 24px 0;
  line-height: 42px;
  text-align: left;
  white-space: nowrap;
}

.contact-form {
  /* 元サイト実測値: 600x736、グループ間20px */
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form__label-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 11px;
}

/* セクション背景がダークグレーのため、フォームのラベル・選択肢テキストは白文字にする
   (入力欄そのものは白背景のまま、内部の文字色は初期値の濃色を維持) */
.contact-form,
.contact-form__label,
.contact-form__radio,
.contact-form__checkbox {
  /* 元サイト実測値: 16px/あおとゴシックM → weight500、行間1.4 */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-white);
}

.contact-form__group > .contact-form__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 11px;
  font-weight: 500;
}

.contact-form__required {
  color: var(--color-red);
  font-weight: 700;
}

.contact-form__label,
.contact-form__required {
  /* 元サイト実測値: ラベル行高は22px丁度(16px×1.4=22.4だと4行分で+1.6pxずれる) */
  line-height: 22px;
}

.contact-form__radios {
  /* 元サイト実測値: 各行42px縦積み、行間ギャップなし */
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-form__radio {
  /* 元サイト実測値: 行高42px、16px文字、左インデント16px、ラジオ15px */
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding-left: 16px;
  font-size: 16px;
  cursor: pointer;
}

.contact-form__radio input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--color-cyan);
}

.contact-form__input,
.contact-form__textarea {
  /* 元サイト実測値: 600x50、16px。display:blockでインライン下端余白(+2〜5px)を排除 */
  display: block;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  height: 50px;
  padding: 10px 16px;
  font-size: 16px;
  background-color: var(--color-white);
  color: var(--color-text);
}

.contact-form__textarea {
  /* 元サイト実測値: 高160px */
  height: auto;
  min-height: 160px;
  padding: 10px 16px;
  resize: none;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: rgb(204, 204, 204);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-cyan);
}

.contact-form__group--privacy {
  display: flex;
  align-items: center;
  gap: 4px;
}

.contact-form__checkbox {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
}

.contact-form__checkbox input {
  /* 元サイト実測値: チェックボックス自体は非表示(テキストのみ表示) */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-form__submit {
  /* 元サイト実測値: 600x54、白背景、border 2px solid #464646、radius4、18px #464646 */
  width: 600px;
  max-width: 100%;
  height: 54px;
  background-color: var(--color-white);
  border: 2px solid #464646;
  border-radius: 4px;
  color: #464646;
  /* 原本実測値: ボタン16px/#333/padding15pxの内側にp(18px/行高18px/#464646/EB)。
     見える文字(Range実測)は18px・行高18px・#464646なのでボタン側で合わせる */
  font-size: 18px;
  line-height: 18px;
  padding: 15px;
  font-weight: 800;
  align-self: center;
  margin-top: 0;
}

/* ==========================================================================
   会社概要
   ========================================================================== */
.company {
  /* 元サイト実測値: 白背景。見出しはcontact下端+32px */
  background-color: var(--color-white);
  padding: 32px 0 0;
}

.company__heading {
  /* 元サイト実測値(10/2再計測): 見出しの要素上端→会社名ラベル上端=105.6px(1280・700とも) */
  margin-bottom: 64px;
  color: #444444;
}

.company__list {
  /* 元サイト実測値: 表は幅826pxで中央寄せ(1000〜1440で固定)。ラベル30%・値70%。
     最終行ラベル下端→フッターロゴ上端=23.6px(フッター側のpadding-top4pxと合わせて) */
  max-width: 826px;
  margin: 0 auto;
  padding-bottom: 19.6px;
}

.company__row {
  /* 元サイト実測値: 行box高29px、行ピッチ52px(=29+間隔23px)。罫線は無い */
  display: flex;
  align-items: center;
  padding: 0;
}

.company__row + .company__row {
  margin-top: 23px;
}

.company__row-label {
  flex: 0 0 30%;
  font-weight: 600;
  /* 元サイト実測値: 16px/600、列の中で中央揃え */
  font-size: 16px;
  letter-spacing: 0.8px;
  text-align: center;
}

.company__row-value {
  flex: 1;
  /* 元サイト実測値: 16px/あおとゴシックR → weight400、line-height 25.6px(1.6) */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.48px;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.footer {
  /* 元サイト実測値: 白背景。ロゴ下端=ページ最下端のため下部余白なし。
     ロゴは右寄せで右端が+30pxはみ出す(margin-right:-30px)ためoverflow hiddenでクリップ */
  background-color: var(--color-white);
  padding: 4px 0 0;
  text-align: right;
  overflow: hidden;
}

.footer__logo {
  font-family: var(--font-heading);
  /* 元サイト実測値: 160px/あおとゴシックEB → weight800、右寄せmargin-right -30px、
     line-height 212px(1.325)・色rgb(108,108,108)・letter-spacingなし。375px幅対策でclamp縮小 */
  font-size: clamp(48px, 22vw, 160px);
  font-weight: 800;
  line-height: 1.325;
  color: rgb(108, 108, 108);
  letter-spacing: normal;
  margin-right: -30px;
  white-space: nowrap;
}

/* ==========================================================================
   レスポンシブ: タブレット以下 (840px)
   元サイトのBPは screen and (max-width:840px) / (max-width:540px) の2段(Studio標準)。
   2026-08-19 元サイト実測(700px/375px・アンカーテキスト方式)に基づき全面構築
   ========================================================================== */
@media screen and (max-width: 840px) {
  :root {
    /* 元サイト実測値: タブレット帯のヘッダー高110px */
    --header-height: 110px;
  }

  /* 共通コンテナの左右余白は16px(元サイト実測: 全帯で16px) */
  .container,
  .header__inner,
  .hero__inner,
  .problem__inner,
  .services__inner,
  .reasons__inner,
  .plans__inner,
  .voice__inner,
  .faq__inner,
  .contact__inner,
  .company__inner,
  .problem-repeat__inner,
  .services-image__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ---- ヘッダー: ロゴ+ハンバーガーのみ(SNSアイコン・お問い合わせボタンは非表示)。
          メニューは元サイト実測の右ドロワー(幅250・白・影・pad80/24、リンクfs14、
          下部にLINE緑ピル+お問い合わせ黒ピル202x38) ---- */
  .header__nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    background-color: var(--color-white);
    box-shadow: rgba(0, 0, 0, 0.2) 0 6px 15px;
    padding: 80px 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1200;
    overflow-y: auto;
  }

  .header__nav.is-open {
    transform: translateX(0);
  }

  /* 開いた時もハンバーガー(×)がドロワーの上に残るようにする */
  .header__hamburger {
    display: flex;
    position: relative;
    z-index: 1300;
  }

  /* ヘッダー入場アニメのtransformが生きている間、内側のfixedドロワーが
     ヘッダーを包含ブロックとして右へはみ出す(横スクロール発生)ため、
     840px以下はtransformアニメを外す(opacityフェードは維持) */
  .header .header__inner.fade-in--down {
    transform: none;
  }

  .header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
  }

  .header__nav-list a {
    display: block;
    font-size: 14px;
    color: #222;
    padding: 4px 12px;
  }

  .header__nav-list-mobile-only {
    display: block;
  }

  .header__nav-pill-li--line {
    margin-top: 80px;
  }

  .header__nav-list li + li:not(.header__nav-pill-li--line) {
    margin-top: 8px;
  }

  .header__nav-list a.header__nav-pill {
    padding: 0;
  }

  .header__icon-link {
    display: none;
  }

  /* 541〜840: お問い合わせボタンはヘッダーに表示(元サイト実測: 156.2x54.3)。ハンバーガーは48x48枠(線は3本のまま) */
  .header__hamburger {
    width: 48px;
    height: 48px;
    padding: 0 8px;
  }

  /* 問合せフォーム見出しの≦840上書き(max-width:none)は削除した。
     元サイトは全帯で208px枠・1行であることを実測で確認し、上のnowrapで
     デスクトップ含め全帯が1行になったため、幅を広げる必要がなくなったもの。 */

  /* ---- ヒーロー: 筆文字y267(=ヒーロー上端+157)・タイトル間隔16・統計はgap32の3列維持。
          有機形装飾は元サイトだと≦840で出現しないが、ユーザー要望(2026-08-26)で
          表示継続し、ヒーロー中央に重ねる ---- */
  .hero {
    padding: 157px 0 50px;
  }

  .hero__decoration {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .hero__stat {
    width: 94px;
  }

  .hero__stat:nth-child(3) .hero__stat-label {
    text-align: left;
  }

  .hero__stat-label {
    font-size: 14px;
  }

  .hero__stat-value {
    font-size: 35px;
  }

  .hero__stat-suffix {
    font-size: 16px;
  }

  /* ---- 課題提起: 見出し30px維持。リードも20px維持(帯高634は全帯共通) ---- */

  /* ---- 見出し繰り返し帯: 固定高をやめpadding 48で組む(モバイルで2行になるため) ---- */
  .problem-repeat {
    height: auto;
    padding: 48px 0;
  }

  /* ---- サービス紹介画像帯: 上下32px(元サイト実測、デスクトップの83/107から縮小) ---- */
  .services-image {
    padding: 32px 0;
  }

  /* ---- 提供のサービス: 2列グリッド。カードタイトル25px中央寄せ ---- */
  .img-placeholder--icon {
    /* 元サイト実測値: 見出し装飾はピンク帯上端から5pxはみ出して重なる。
       margin-top:-5pxだとマージン相殺で帯自体が持ち上がるためrelativeでずらす */
    position: relative;
    top: -5px;
    margin-bottom: 26px;
  }

  .services {
    padding-bottom: 48px;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 0;
  }

  .service-card__title {
    font-size: 25px;
    text-align: center;
  }

  .services__cta {
    padding-top: 48px;
  }

  /* ---- 選ばれる理由: 見出しpt48/mb48。角括弧は30px(デスクトップ50px) ---- */
  .reasons {
    padding: 48px 0 160px;
  }

  .reasons__heading {
    /* 括弧30pxとの行高差で見出し箱が2.8px高くなる分を補正(45.2) */
    margin-bottom: 45.2px;
  }

  .plans__bracket {
    font-size: 30px;
    line-height: 42px;
  }

  .reason:first-of-type .reason__head {
    /* 元サイト実測値: バッジ下端→サイクル図=40px(700px/375px共通) */
    margin-bottom: 40px;
  }

  /* サイクル図: 元サイト実測(700px)は484x406。scaleをやめ、画像・矢印・ラベルを
     元サイト実測の座標(図の箱内)で直接配置する。セルはstaticにして子を箱基準にする */
  .reason__cycle {
    width: 484px;
    height: 406px;
    max-width: 100%;
    margin: 0 auto;
  }

  .reason__cycle .reason__cycle-cell {
    position: static;
    width: auto;
    height: auto;
  }

  .reason__cycle .reason__cycle-cell--1 img { left: 4.5px; top: 0; width: 180px; height: 150px; }
  .reason__cycle .reason__cycle-cell--2 img { left: 308.5px; top: -6px; width: 162px; height: 162px; }
  .reason__cycle .reason__cycle-cell--3 img { left: 4.5px; top: 267px; width: 180px; height: 131px; }
  .reason__cycle .reason__cycle-cell--4 img { left: 301.5px; top: 254.5px; width: 176px; height: 156px; }

  .reason__cycle .reason__cycle-cell p {
    inset: auto;
    display: block;
    height: 35px;
    font-size: 25px;
    line-height: 35px;
    white-space: nowrap;
  }

  .reason__cycle .reason__cycle-cell--1 p { left: 44.5px; top: 57.5px; width: 100px; }
  .reason__cycle .reason__cycle-cell--2 p { left: 327px; top: 57.5px; width: 125px; }
  .reason__cycle .reason__cycle-cell--3 p { left: 44.5px; top: 315px; width: 100px; }
  .reason__cycle .reason__cycle-cell--4 p { left: 339.4px; top: 315px; width: 100.3px; }

  .reason__cycle-arrow--top { left: 209px; top: 67px; }
  .reason__cycle-arrow--left { left: 98.5px; top: 171.5px; }
  .reason__cycle-arrow--right { left: 369.5px; top: 171.5px; }
  .reason__cycle-arrow--bottom { left: 209px; top: 325.5px; }

  .reason {
    /* 元サイト実測値: サイクル図下端→reason2バッジ上端=約80px */
    margin-bottom: 80px;
  }

  /* ---- 事例カルーセル: スライド398px(gap16)、周期3x414=1242px、60px/s ---- */
  .carousel {
    padding: 0;
  }

  .carousel__track {
    --carousel-cycle: -1242px;
    animation-duration: 20.7s;
  }

  .carousel__track .carousel__slide {
    /* 元サイト実測: 398x434(528x576画像の縦横比)。448x488の中身を縦横比ごと縮小(zoom)して
       折返し・高さを崩さない */
    width: 448px;
    height: 488px;
    zoom: 0.8884;
  }

  /* ---- プラン: カード縦積み(タブレットでも1列)。タイトル25px/価格40px ---- */
  .plans {
    padding: 96px 0 40px;
  }

  .plans__heading {
    margin-bottom: 64px;
  }

  .plans__group-title {
    /* 区切り線は内寸いっぱい(668)。線の外側へはみ出さない */
    margin: 0 0 24px;
  }

  /* ユーザー要望(2026-08-26): 元サイトの全幅1列積み(668x401)は間延びして見づらい。
     2列+3枚目中央はピラミッド状でバランスが悪いとの指摘を受け、
     全カード同幅480pxの1列中央寄せに変更(フォントはPC比率16/30pxのまま) */
  .plans__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .plans__option {
    /* カード列と同じ480px幅に揃えて縦のラインを通す */
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 32px;
  }

  .plans__option-title {
    font-size: 40px;
  }

  .plans__option-note {
    font-weight: 400;
    max-width: none;
  }

  .plans__lp-heading {
    /* 元サイト実測値(10/2再計測): オプション→上の線104、下の線→カード24 */
    margin: 104px 0 24px;
  }

  /* LP制作行: カード→+→ピルの縦積み */
  .plans__lp-row {
    flex-direction: column;
    gap: 0;
    margin: 0;
  }

  .plans__lp-card {
    width: 100%;
    padding: 24px 40px;
  }

  .plans__lp-price-label {
    font-size: 25px;
  }

  .plans__lp-price span {
    font-size: 40px;
  }

  .plans__lp-plus {
    align-self: center;
    width: auto;
    margin: -12px 0 28px;
  }

  .plans__lp-pills {
    width: 100%;
  }

  .plans__lp-note {
    /* 元サイト実測値: タブレット以下は幅制限なし(カードpadding内いっぱい) */
    max-width: none;
  }

  /* ---- お客様の声: 帯129px。カード2列・角丸30・肩書き25px ---- */
  .marquee--voice {
    height: 129px;
  }

  .voice__inner {
    padding: 32px 16px 80px;
  }

  .img-placeholder--voice {
    margin-bottom: 112px;
  }

  .voice__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .voice-card {
    border-radius: 30px;
  }

  .voice-card__role {
    font-size: 25px;
    line-height: 1.4;
  }

  /* ---- FAQ: 全帯共通の寸法に統一したため、この帯での上書きは不要(10/2再計測) ---- */

  /* ---- 会社概要: 表は全幅(ラベル30%=200.4px、横並び維持)・最終行→フッター23.6px ---- */
  .company__list {
    max-width: none;
    padding-bottom: 23.6px;
  }

  /* ---- フッター: ロゴ100px(ボックス高212) ---- */
  .footer {
    padding: 0;
  }

  .footer__logo {
    font-size: 100px;
    line-height: 1.4;
    padding: 36px 0;
  }
}

/* ==========================================================================
   レスポンシブ: モバイル (540px)
   ========================================================================== */
@media screen and (max-width: 540px) {
  :root {
    /* 元サイト実測値: モバイル帯のヘッダー高96px */
    --header-height: 96px;
  }

  .header__logo img {
    width: 97px;
    height: 36px;
  }

  /* ≦540: お問い合わせボタンは非表示・ハンバーガーは従来の32px */
  .header__actions-contact {
    display: none;
  }

  .header__hamburger {
    width: 32px;
    height: 32px;
    padding: 0;
  }

  /* ---- ヒーロー: 筆文字→写真411x235に入替。タイトル14px・統計は3列のまま縮小。
          有機形装飾は縦型バリアント(577x719)に入替(ユーザー要望2026-08-26) ---- */
  .hero {
    padding: 96px 0 96px;
  }

  .hero__decoration .hero__decoration-img--pc {
    display: none;
  }

  .hero__decoration .hero__decoration-img--sp {
    display: block;
  }

  .img-placeholder--hero {
    display: none;
  }

  .hero__photo {
    display: block;
    width: 100%;
    max-width: 411px;
    height: auto;
    margin: 0 auto -32px; /* innerのgap40と相殺して写真→タイトル間隔8px */
  }

  .hero__title {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 24px; /* gap40と合わせてタイトル→統計64px */
  }

  /* ユーザー要望: スマホでも実績3項目は横並びを維持する */
  .hero__stats {
    flex-wrap: nowrap;
    gap: 32px;
    justify-content: center;
  }

  .hero__stat {
    flex-shrink: 0;
    width: 72px;
  }

  .hero__stat:nth-child(3) .hero__stat-label {
    text-align: center;
  }

  .hero__stat-label {
    font-size: 12px;
    white-space: nowrap;
  }

  .hero__stat-value {
    font-size: 25px;
    white-space: nowrap;
  }

  /* ---- LINE登録ボタン: 縦書きのままスマホでは一回り細く(44px幅・文字14px) ---- */
  .line-cta__btn {
    width: 44px;
    padding: 16px 0 18px;
    gap: 6px;
    font-size: 14px;
  }

  .line-cta__btn img {
    width: 32px;
    height: 32px;
  }

  /* ---- 課題提起: リード14px(見出しは30pxのまま) ---- */
  .problem__heading {
    text-align: left;
  }

  .problem__lead {
    font-size: 14px;
  }

  /* ---- 見出し繰り返し帯 ---- */
  .problem-repeat {
    padding: 32px 0;
  }

  .problem-repeat__heading {
    text-align: left;
  }

  /* ---- お悩みイラスト: 縦型536x731に切替 ---- */
  .services-image__pc {
    display: none;
  }

  .services-image__sp {
    display: block;
  }

  /* ---- サービス: カード1列 ---- */
  .services__grid {
    grid-template-columns: 1fr;
  }

  /* ---- 選ばれる理由: 見出し20px・理由タイトル16px・バッジ51x50 ---- */
  .reasons {
    padding: 32px 0 42px;
  }

  .reasons__heading {
    font-size: 20px;
    margin-bottom: 44.4px;
  }

  .reasons__heading .plans__bracket {
    font-size: 20px;
    line-height: 28px;
  }

  .reason__title {
    font-size: 16px;
  }

  .reason__head {
    gap: 16px;
  }

  .reason__badge {
    width: 51px;
    height: 50px;
  }

  .reason__badge-num {
    font-size: 20px;
    line-height: 28px;
  }

  .reason:last-of-type .reason__head {
    /* 元サイト実測値: バッジ下端=カルーセル上端(間隔0) */
    margin-bottom: 0;
  }

  /* サイクル図: 元サイト実測(375px)は301x315。scaleをやめ実測座標で直接配置 */
  .reason__cycle {
    width: 301px;
    height: 315px;
  }

  .reason__cycle .reason__cycle-cell--1 img { left: 0; top: 9.5px; width: 100px; height: 84px; }
  .reason__cycle .reason__cycle-cell--2 img { left: 201px; top: 2px; width: 100px; height: 99px; }
  .reason__cycle .reason__cycle-cell--3 img { left: 0; top: 227.5px; width: 100px; height: 72px; }
  .reason__cycle .reason__cycle-cell--4 img { left: 201px; top: 219px; width: 100px; height: 89px; }

  .reason__cycle .reason__cycle-cell p {
    height: 22.4px;
    font-size: 16px;
    line-height: 22.4px;
  }

  .reason__cycle .reason__cycle-cell--1 p { left: 18px; top: 40.3px; width: 64px; }
  .reason__cycle .reason__cycle-cell--2 p { left: 211px; top: 40.3px; width: 80px; }
  .reason__cycle .reason__cycle-cell--3 p { left: 18px; top: 252.3px; width: 64px; }
  .reason__cycle .reason__cycle-cell--4 p { left: 218.9px; top: 252.3px; width: 64.2px; }

  .reason__cycle-arrow--top { left: 117.5px; top: 43.5px; }
  .reason__cycle-arrow--left { left: 62px; top: 124.5px; }
  .reason__cycle-arrow--right { left: 223px; top: 124.5px; }
  .reason__cycle-arrow--bottom { left: 117.5px; top: 256.5px; }

  .reason {
    /* 元サイト実測値: サイクル図下端→reason2バッジ上端=約48px */
    margin-bottom: 48px;
  }

  /* ---- 事例カルーセル: スライド368px、周期3x384=1152px、60px/s ---- */
  .carousel {
    padding: 0;
  }

  .carousel__track {
    --carousel-cycle: -1152px;
    animation-duration: 19.2s;
  }

  .carousel__track .carousel__slide {
    /* 368x401(元サイト実測) = 448x488のzoom 0.8214 */
    zoom: 0.8214;
  }

  /* ---- プラン: 見出し20px・カードタイトル16px・価格30px ---- */
  .plans {
    padding: 96px 0 72px;
  }

  .plans__heading {
    font-size: 20px;
  }

  .plans__group-title {
    font-size: 20px;
  }

  .plan-card {
    padding: 56px 32px;
    min-height: 0;
  }

  .plan-card__title {
    font-size: 16px;
  }

  .plan-card__price {
    /* 元サイト実測値(10/2再計測): モバイルの「円〜」は20px */
    font-size: 20px;
  }

  .plan-card__price span {
    font-size: 30px;
  }

  .plan-card__price--inquiry span {
    font-size: 25px;
  }

  .plan-card__list li {
    font-size: 14px;
    line-height: 1.4;
  }

  /* 元サイト実測値(10/2再計測): 2・3枚目の項目だけ12px/lh16.8 */
  .plan-card:nth-child(n + 2) .plan-card__list li {
    font-size: 12px;
  }

  .plans__option {
    padding: 24px;
  }

  .plans__option-title {
    font-size: 25px;
  }

  .plans__option-items {
    font-size: 14px;
    line-height: 1.4;
    /* 原本(あおとEB)は1行幅300.4pxで箱295pxに収まらず「…運/用」と2行。
       代替フォントは293pxで1行に収まり以降が19.6px上がるため、字間で原本幅に揃える */
    letter-spacing: 0.33px;
  }

  .plans__option-note {
    font-size: 14px;
    line-height: 1.4;
  }

  .plans__lp-heading {
    font-size: 20px;
    line-height: 28px;
    /* 元サイト実測値(10/2再計測): モバイルはオプション→上の線64(タブレット104)、下の線→カード24 */
    margin: 64px 0 24px;
  }

  /* ユーザー要望: カードは低く横に広く(ラベル+価格を1行に)、+を挟んでピル3枚を横並びに */
  .plans__lp-card {
    padding: 24px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 10px;
  }

  .plans__lp-price-label {
    font-size: 14px;
    margin-bottom: 0;
  }

  .plans__lp-price {
    margin-bottom: 0;
  }

  .plans__lp-price span {
    font-size: 30px;
  }

  .plans__lp-note {
    flex-basis: 100%;
    font-size: 12px;
    line-height: 18px;
    max-width: none;
    margin-top: 10px;
  }

  .plans__lp-plus {
    font-size: 40px;
    margin: 4px 0 8px;
  }

  .plans__lp-pills {
    flex-direction: row;
    gap: 8px;
  }

  .plans__lp-pill {
    flex: 1 1 0;
    height: auto;
    min-height: 56px;
    padding: 8px 4px;
  }

  .plans__lp-pill p {
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
  }

  /* ---- お客様の声: 帯142px・カード1列 ---- */
  .marquee--voice {
    height: 142px;
  }

  .voice__inner {
    padding: 32px 16px 16px;
  }

  .img-placeholder--voice {
    /* 元サイト実測値(10/2再計測): 画像は内寸より左右8pxずつ広い359x88.5、下端→カード48 */
    width: calc(100% + 16px);
    max-width: none;
    margin: 0 -8px 48px;
  }

  .voice__grid {
    grid-template-columns: 1fr;
  }

  /* ---- FAQ: 質問文13px・太さ500(元サイト実測値) ---- */
  .faq__question p {
    font-size: 13px;
    font-weight: 500;
  }

  .faq__answer-inner p {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }

  /* ---- 会社概要: ラベル列80px+間隔8px・値14px/19.6px・右余白8px・行間隔8px ---- */
  .company__heading {
    margin-bottom: 56px;
  }

  .company__list {
    padding-bottom: 16px;
  }

  .company__row {
    padding-right: 8px;
  }

  .company__row-label {
    flex: 0 0 80px;
    margin-right: 8px;
  }

  .company__row-value {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.42px;
  }

  .company__row + .company__row {
    margin-top: 8px;
  }

  /* ---- フッター: ロゴ60px(ボックス高100)・右はみ出し15px ---- */
  .footer__logo {
    font-size: 60px;
    padding: 8px 0;
    margin-right: -15px;
  }

  /* ---- 上に戻るボタン(ユーザー要望のfixed追従・独自縮小) ---- */
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 76px;
    height: 75px;
    margin: 0;
  }
}

/* ==========================================================================
   問合せフォームの送信まわり(元サイトには無い当実装独自の要素)
   元サイトはStudio内蔵フォームだったため、この2つに対応する実測値は存在しない。
   既存の.contact-form__*のアンカーには影響しない新規クラスのみで構成している。
   ========================================================================== */

/* ハニーポット。**display:noneにしない。**
   CSSを解釈するbotはdisplay:noneの欄を避けるため、埋めさせたいこちらの目的に反する。
   視覚的にだけ消す定番の書き方で、1pxにクリップして退かせる
   (負のleftで飛ばす書き方は横スクロールを誘発しうるので使わない)。 */
.contact-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 送信結果。フォーム本体と同じ600px幅の箱に左揃えで置く。 */
.contact-form__status {
  width: 600px;
  max-width: 100%;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 500;
  text-align: left;
}

.contact-form__status--success {
  color: var(--color-green);
}

/* 暗い帯(#464646)の上に載るので、赤は明るめにしないと読めない。 */
.contact-form__status--error {
  color: #ffb3b3;
}

/* 送信中。押せないことを見た目でも示す。 */
.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}