@charset "UTF-8";
/* ミューシフト LP（/service/mieux-shift/）
 * サイト共通 CSS は読み込まない独立 LP。色はチラシ（ai）を Illustrator で描画した値から取っている。 */
:root {
  --primary: #19408c;      /* チラシ濃紺（ボタン・フォーム） */
  --navy: #19408c;
  --blue: #006dbb;         /* ロゴ青・解決帯 */
  --blue_mid: #0068b7;     /* メリット2 上罫線・ステップ役割ラベル */
  --sky: #5b9ed1;          /* FV 左の三角・メリット1 上罫線 */
  --sky_pale: #d1def1;
  --yellow: #f5c950;
  --orange: #eb6101;
  --teal: #008c85;
  --cream: #fffde8;
  --red: #d70c18;          /* common.css --sub_color */
  --pale: #b3c5df;         /* common.css --sub_color_02 */
  --bg: #f3f6fb;
  --ink: #222;
  --gray: #595757;
  --line: #d5dbe5;
  --card_line: #dbdae3;
  --yellow_pale: rgba(245, 201, 79, .5);  /* #f5c94f の 50%（お悩み・料金プランの地） */
  --sky_bg: #eaf3fb;
  --step_bg: #f3f8fd;
  --shadow: 0 6px 20px rgba(25, 64, 140, .08);
  --gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --round: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.8;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--blue); }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

/* ヘッダー */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 32, 80, .08);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
.brand-link { display: block; }
.is_fvready .site-header .brand-link { transition: opacity .3s ease, visibility .3s ease; }
/* logo-full.svg（497:110）を高さ 40px で置く＝幅約 180px */
.brand { display: block; width: auto; height: 40px; }
/* LP では FV に大きなロゴがあるので、FV を過ぎるまでヘッダーのロゴを隠す（ボタンは常に表示） */
.is_fvwatch:not(.is_pastfv) .site-header .brand-link { opacity: 0; visibility: hidden; }
.header-cta { display: flex; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .2s ease;
}
.btn:hover { opacity: .8; }
.btn.is_apply { border-color: var(--red); background: var(--red); }
.btn.is_outline { background: #fff; color: var(--primary); }
.sp-cta { display: none; }

/* 右下のご案内カード（PC のみ。FV の下端が画面上端を越え、フォームが画面に入っていない間だけ出す） */
.float-card {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  width: 300px;
  padding: 20px 18px 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(8, 20, 48, .24);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(60px);
}
/* 隠す時はすっと消し、出す時は下からゆっくり浮かび上がらせて気づきやすくする */
.is_fvready .float-card { transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.is_fvgone:not(.is_formview) .float-card { opacity: 1; visibility: visible; transform: none; }
.is_fvready.is_fvgone:not(.is_formview) .float-card { transition: opacity .8s ease-out, transform .9s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.float-card-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.float-card-img { display: block; width: 72%; margin: 0 auto 6px; }
.float-card-badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--round);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}
.float-card-title { margin: 0 0 10px; color: var(--navy); font-family: var(--round); font-size: 17px; font-weight: 800; line-height: 1.45; }
.float-card .btn { width: 100%; padding: 0 16px; font-size: 15px; }
.float-card-link { display: inline-block; margin-top: 8px; color: var(--primary); font-size: 13px; }

/* FV（チラシ表面の FV を 1 枚のステージにし、各パーツをチラシの座標から % で置く。
 * 基準はチラシの x -306.2〜306.0 / y -330〜146.4 pt（612.2×476.4）。文字は cqw でステージ幅に比例させる） */
.fv {
  --stage: min(880px, calc(100cqw - 32px));
  position: relative;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: linear-gradient(180deg, #fff 37.8%, #eeefef 100%);
}
.fv::before,
.fv::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
}
/* 左下の水色三角。右下の頂点をステージ幅 39.2% に置き、チラシと同じ傾きのまま画面左端まで延ばす */
.fv::before {
  left: 0;
  width: calc(50cqw - .108 * var(--stage));
  aspect-ratio: 1 / 1.0977;
  background: var(--sky);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* 右下の淡い青の三角。左下の頂点をステージ幅 77.9% に置き、同じ傾きのまま画面右端まで延ばす */
.fv::after {
  right: 0;
  width: calc(50cqw - .279 * var(--stage));
  aspect-ratio: 1 / 1.225;
  background: var(--sky_pale);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.fv-stage {
  position: relative;
  width: var(--stage);
  margin: 0 auto;
  aspect-ratio: 612.2 / 476.4;
  container-type: inline-size;
}
.fv-stage > * { position: absolute; margin: 0; }
.fv-logo { left: 9.52%; top: 5.88%; width: 81.2%; }
.fv-logo img,
.fv-hero img { display: block; width: 100%; }
.fv-catch {
  left: 9.39%;
  top: 32.4%;
  width: 80.4%;
  height: 12.28%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .75cqw solid #d4ecf1;
  border-radius: 999px;
  background: var(--cream);
  font-family: var(--round);
  font-size: 5.1cqw;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.fv-catch em { color: var(--teal); font-style: normal; }
.fv-catch-mark { display: inline-block; transform: skewX(-14deg); }  /* チラシの斜めの「！」 */
.fv-copy { left: 31.75%; top: 47.2%; z-index: 1; }  /* イラストと重なってもコピーを前面に出す */
.fv-question {
  margin: 0;
  color: var(--navy);
  font-family: var(--round);
  font-size: 3.3cqw;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.fv-question img { width: 5.33cqw; margin-right: .55cqw; vertical-align: -.9cqw; }
.fv-question em { color: var(--blue); font-size: 1.4em; font-style: normal; line-height: 1; }
.fv-text {
  margin: .9cqw 0 0 5.9cqw;
  font-family: var(--round);
  font-size: 2.4cqw;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.fv-text em { color: var(--blue); font-style: normal; }
.fv-hero { left: 10.29%; top: 46.9%; width: 84.68%; }  /* チラシどおり女性の下端はステージ下で切れる */
/* コンテナクエリ単位（cqw）に対応していないブラウザでは、比率固定をやめて縦に積む */
@supports not (width: 1cqw) {
  .fv::before,
  .fv::after { display: none; }
  .fv-stage { width: auto; aspect-ratio: auto; padding: 32px 16px 0; text-align: center; }
  .fv-stage > * { position: static; }
  .fv-logo { width: auto; max-width: 560px; margin: 0 auto; }
  .fv-catch { display: inline-block; width: auto; max-width: 100%; height: auto; margin-top: 16px; padding: 6px 16px; border: 3px solid #d4ecf1; font-size: 20px; line-height: 1.4; white-space: normal; }  /* cqw 付きの border 一括指定は非対応ブラウザで捨てられるため、枠を指定し直す */
  .fv-copy { margin-top: 16px; }
  .fv-question { font-size: 19px; white-space: normal; }
  .fv-question img { width: 28px; margin-right: 6px; vertical-align: -6px; }
  .fv-text { margin: 8px 0 0; font-size: 15px; line-height: 1.7; white-space: normal; }
  .fv-hero { width: auto; max-width: 700px; margin: 16px auto 0; }
}

/* FV 下部のボタン（FV の背景の上に載せる）。注記は紺の文字を白で縁取り、「無料」だけ赤く大きくする */
.fv-cta { position: relative; padding: 0 16px 36px; text-align: center; }
.fv-cta-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.fv-cta .btn { min-height: 60px; padding: 0 36px; font-size: 18px; box-shadow: 0 6px 16px rgba(25, 64, 140, .18); }
.fv-cta-note {
  margin: 14px 0 0;
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px -1.5px 0 #fff;
}
.fv-cta-note em { padding: 0 3px; color: var(--red); font-size: 1.35em; font-style: normal; }

/* セクション見出し（チラシの丸ゴシック） */
.section-heading,
.pain-heading,
.needs-heading,
.solve p,
.price-trial p,
.section h2 { word-break: auto-phrase; overflow-wrap: anywhere; }  /* 日本語の文節で折り返す（未対応ブラウザは通常の折り返し）。1 文節が幅に収まらない時は文節内でも折る */
.section-heading,
.pain-heading,
.needs-heading {
  margin: 0 0 32px;
  font-family: var(--round);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

/* お悩み */
.pain {
  padding: 56px 0 64px;
  background: var(--yellow_pale);
}
.pain-heading .is_navy { color: var(--navy); }
.pain-heading .is_orange { color: var(--orange); }
.pain-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pain-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 8px 24px;
  border: 1px solid var(--card_line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}
.pain-list img { flex-shrink: 0; width: 88px; height: 72px; object-fit: contain; }
.pain-list p { margin: 0; font-size: 15px; font-size: min(15px, 1.75vw); font-weight: 700; line-height: 1.5; word-break: auto-phrase; }  /* 4 列で幅が狭い時もチラシの改行位置のまま収める */

/* 解決帯（「15時間→約15分」の行も帯の中に置く） */
.solve {
  position: relative;
  padding: 48px 16px 36px;
  background: var(--blue);
  color: #fff;
  text-align: center;
}
.solve::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 112px;
  height: 36px;
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}
.solve p { margin: 0; font-family: var(--round); font-weight: 800; }
.solve-title { font-size: 36px; line-height: 1.4; }
.solve-short {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
}
.solve-short img { flex-shrink: 0; }
.solve-short p { font-size: 24px; line-height: 1.5; }
.solve-short b { color: var(--yellow); font-size: 1.6em; }

/* 3つのメリット・多様なニーズ（絵を上に置いた縦型カード） */
.merit { padding: 64px 0; }
.merit-list,
.needs-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.merit-list li,
.needs-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 28px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}
.merit-list li { border-top: 4px solid var(--sky); }
.merit-list li:nth-child(2) { border-top-color: var(--blue_mid); }
.merit-list li:nth-child(3) { border-top-color: var(--navy); }
.merit-list h3 {
  order: 2;
  margin: 0 0 10px;
  color: var(--navy);
  font-family: var(--round);
  font-size: 20px;
  line-height: 1.4;
}
.merit-body,
.needs-body { display: contents; }  /* 絵・見出し・本文の順に並べ替えるため、中身をカード直下に展開する */
.merit-body img,
.needs-body img { order: 1; margin-bottom: 16px; object-fit: contain; }
.merit-body img { width: 96px; height: 80px; }
.needs-body img { width: 88px; height: 72px; }
.merit-body p,
.needs-body p { order: 3; margin: 0; font-size: 15px; line-height: 1.7; text-align: left; }

/* 簡単ステップ */
.step {
  padding: 64px 0;
  background: var(--step_bg);
}
.step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.step-card {
  padding: 28px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}
.step-card h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--navy);
  font-family: var(--round);
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
}
.step-role {
  padding: 2px 16px;
  border-radius: 999px;
  background: var(--blue_mid);
  color: #fff;
  font-family: var(--gothic);
  font-size: 13px;
  line-height: 1.8;
}
.step-card:nth-child(2) .step-role { background: var(--navy); }
.step-card img { display: block; width: 100%; max-width: 532px; margin: 0 auto; padding: 12px; border-radius: 8px; background: var(--bg); }  /* 1 列の時に 2x 解像度を割らない幅まで（画像 1016px ÷ 2 ＋ 余白 24px） */
.step-card ul { margin: 16px 0 0; padding: 0; list-style: none; }
.step-card li { position: relative; margin-top: 8px; padding-left: 28px; line-height: 1.7; }
.step-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .3em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* 多様なニーズ */
.needs {
  padding: 56px 0 64px;
  background: var(--sky_bg);
}
.needs-heading { color: var(--navy); }
.needs-list h3 {
  order: 2;
  margin: 0 0 12px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--yellow);
  font-size: 17px;
  line-height: 1.6;
}

/* 料金プラン（説明・無料相談・トライアル・ボタンを 1 枚のカードにまとめる） */
.price { padding: 72px 0 64px; background: var(--yellow_pale); }
.price-card {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 32px;
  border: 2px solid var(--sky_pale);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.price-card .section-heading { margin-bottom: 20px; color: var(--navy); }
.price-lead { margin: 0; font-weight: 700; }
.price-free {
  margin: 24px 0 0;
  color: var(--navy);
  font-size: 20px;
  font-weight: 700;
}
.price-free small { display: block; color: var(--ink); font-size: 15px; font-weight: 400; }
.price-trial { margin-top: 28px; }
.price-trial p { margin: 0; font-family: var(--round); font-weight: 800; }
.price-trial-badge {
  padding: 6px 24px;
  border: 1px solid var(--card_line);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 30px;
  line-height: 1.5;
}
.price-trial-badge span { color: var(--navy); }
.price .price-trial-note { margin-top: 8px; color: var(--teal); font-size: 18px; }

/* フォームのセクション */
.section { padding: 72px 0; }
.section h2 {
  margin: 0 0 32px;
  color: var(--navy);
  font-family: var(--round);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.cta-row { display: flex; justify-content: center; gap: 16px; margin-top: 24px; }

/* フォーム */
.contact { background: var(--bg); }
.steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
.steps li {
  min-width: 140px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--gray);
  font-weight: 700;
  text-align: center;
}
.steps li.active { background: var(--primary); color: #fff; }
.form-lead { margin: 0 0 24px; text-align: center; }
.form-error-summary {
  margin: 0 auto 24px;
  padding: 16px 24px;
  border: 2px solid var(--red);
  border-radius: 8px;
  background: #fff;
  color: var(--red);
}
.form-error-summary ul { margin: 0; padding-left: 1.2em; }
.contact-form {
  max-width: 920px;
  margin: 0 auto;
  padding: 16px 48px 48px;
  border-radius: 12px;
  background: #fff;
}
.form-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.field-label { font-weight: 700; }
.field-label i {
  display: inline-block;
  margin-right: 10px;
  padding: 0 8px;
  border: 1px solid transparent;  /* 任意（枠線あり）と幅を揃え、切替時に後ろの文字がずれないようにする */
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  line-height: 22px;
  vertical-align: 2px;
}
.field-label i.any { border-color: #8b8b8b; background: #fff; color: var(--gray); }
.field-control small { display: block; color: var(--gray); font-size: 13px; }
.field-control input[type="text"],
.field-control input[type="email"],
.field-control input[type="tel"],
.field-control textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font: inherit;
}
.field-control [aria-invalid="true"] { border-color: var(--red); background: #fff5f5; }
.field-control :focus-visible,
.btn:focus-visible,
.contact-form button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.choices label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.choices input[type="radio"],
.choices input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.choices .other { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.choices .other input[type="text"] { width: 240px; }
/* ご用件（縦に並べるカード 2 枚） */
.type-cards { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 560px; }
.type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 14px 44px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.type-card input { position: absolute; top: 18px; left: 16px; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.type-card b { color: var(--navy); font-size: 16px; line-height: 1.5; }
.type-card small { color: var(--gray); font-size: 12.5px; line-height: 1.5; }
.type-card:has(input:checked) { border-color: var(--primary); background: var(--sky_bg); }
.type-card:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
/* 「お問い合わせ」の時は申し込み専用の行を隠す。JS が動かない時は選び直しても表示が戻らないので隠さない */
.is_js .contact-form.is_ask .form-apply-only { display: none; }
.error { display: block; margin-top: 4px; color: var(--red); font-size: 14px; }
.confirm-value { white-space: pre-wrap; word-break: break-all; }
.confirm-value.blank { color: var(--gray); }
.form-actions { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
.contact-form button {
  min-width: 280px;
  min-height: 60px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s ease;
}
.contact-form button:hover { opacity: .8; }
.contact-form .back-button { background: #fff; border: 2px solid var(--gray); color: var(--gray); }
.complete-text { max-width: 720px; margin: 0 auto; text-align: center; }
.complete-text .btn { margin-top: 24px; }

/* フッター */
.site-footer { padding: 40px 0; background: var(--navy); color: #fff; font-size: 14px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-company { display: flex; align-items: center; gap: 24px; }
.footer-company a { display: block; border-radius: 6px; }
.footer-company a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }  /* 濃紺の地でも見えるよう白で囲む */
.footer-company img { display: block; width: 150px; padding: 8px; border-radius: 6px; background: #fff; }
.footer-company p { margin: 0; }

@media screen and (max-width: 800px) {
  html { scroll-padding-top: 72px; }
  .site-header .container { justify-content: center; min-height: 60px; }
  .brand { height: 36px; }
  /* ボタンは画面下の固定バーへ移し、ヘッダーはロゴだけにする */
  .header-cta { display: none; }
  /* LP では FV 中はヘッダーごと隠し、FV を過ぎたら上からスライドインさせる */
  .is_fvwatch .site-header { position: fixed; right: 0; left: 0; }
  .is_fvready .site-header { transition: transform .3s ease, box-shadow .3s ease; }
  .is_fvwatch:not(.is_pastfv) .site-header { box-shadow: none; transform: translateY(-100%); }
  .sp-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    gap: 8px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -2px 8px rgba(0, 32, 80, .12);
  }
  .sp-cta .btn { flex: 1; padding: 0 8px; font-size: 15px; }
  /* 申込ボタンの上を 3 秒ごとに光が走る */
  .sp-cta .btn.is_apply { position: relative; overflow: hidden; }
  .sp-cta .btn.is_apply::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
    transform: skewX(-20deg);
    animation: btn-shine 3s ease-in-out infinite;
    pointer-events: none;
  }
  .float-card { display: none; }
  .fv-cta { padding: 0 16px 28px; }
  .fv-cta-buttons { flex-direction: column; gap: 10px; }
  .fv-cta .btn { width: 100%; min-height: 54px; padding: 0 16px; font-size: 16px; }
  .fv-cta-note { margin-top: 12px; }
  .sp-cta ~ .site-footer { padding-bottom: calc(40px + 64px + env(safe-area-inset-bottom)); }  /* 固定バー（高さ 64px）の下にフッターの末尾が隠れないようにする */
  .section-heading,
  .pain-heading,
  .needs-heading { margin-bottom: 24px; font-size: 20px; }
  .pain { padding: 40px 0 44px; }
  .pain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pain-list li { gap: 10px; padding: 18px 6px; }
  .pain-list img { width: 60px; height: 50px; }
  .pain-list p { font-size: 13px; }
  .solve { padding: 36px 16px 24px; }
  .solve::before { width: 72px; height: 24px; }
  .solve-title { font-size: 24px; }
  .solve-short { margin-top: 6px; }
  .solve-short img { display: none; }
  .solve-short p { font-size: 15px; }
  .merit,
  .step { padding: 48px 0; }
  .merit-list,
  .step-list,
  .needs-list { grid-template-columns: 1fr; gap: 16px; }
  .merit-list li,
  .needs-list li { padding: 24px 16px 20px; }
  .step-card { padding: 20px 16px; }
  .step-card h3 { font-size: 18px; }
  .needs { padding: 40px 0 48px; }
  .price { padding: 48px 0; }
  .price-card { padding: 28px 16px; }
  .price-lead { font-size: 14px; text-align: left; }
  .price-free { font-size: 17px; }
  .price-trial-badge { padding: 6px 12px; font-size: 20px; }
  .price .price-trial-note { font-size: 14px; }
  .section { padding: 48px 0; }
  .section h2 { font-size: 22px; }
  .cta-row { flex-direction: column; }
  .steps li { min-width: 0; flex: 1; padding: 6px 4px; font-size: 13px; }
  .contact-form { padding: 8px 16px 32px; }
  .form-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .choices .other input[type="text"] { width: 100%; }
  .form-actions { flex-direction: column-reverse; }
  .contact-form button { width: 100%; min-width: 0; }
  .footer-inner, .footer-company { flex-direction: column; text-align: center; }
}

@keyframes btn-shine {
  0%, 62% { left: -60%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-cta .btn.is_apply::after { animation: none; }
  .float-card { transform: none; }
}

@media screen and (max-width: 359px) {
  .pain-list { grid-template-columns: 1fr; }
}