@charset "utf-8";

/* ==========================================================================
   水回りのアクアマイスター LP  /  SP専用（body max-width: 700px）
   画像は切り出しのまま使用。タイトル画像・CTAボタン画像は
   ベース画像の上に position:absolute で重ねて配置しています。
   ========================================================================== */

/* --------------------------------------------------
   base
-------------------------------------------------- */
:root{
  --blue:      #0033A6; /* CTAエリア・フッターの濃紺 */
  --blue2:     #1C68B4; /* 見出し・お客様の声の青 */
  --lightblue: #D0EBFF; /* 料金・仕組みセクションの背景 */
  --skyblue:   #DAF0FD; /* 流れセクションの背景 */
  --yellow:    #FFF100;
  --accent:    #fdf104; /* 現在時刻など強調テキスト */
  --red:       #E60012;
  --orange1:   #F9A825;
  --orange2:   #EF7D00;
  --text:      #222222;
}

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

html{
  background: #eaf1f7;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body{
  margin: 0;
  padding: 0;
}

body{
  max-width: 700px;
  margin: 0 auto;
  background: #ffffff;
  color: var(--text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
               "Yu Gothic", "游ゴシック", Meiryo, sans-serif;
  font-weight: 500;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

img{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

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

/* タップフィードバック（CTAボタン画像・リンク共通） */
.btn-link{
  display: block;
  transition: opacity .2s ease, transform .2s ease;
}
.btn-link:hover{ opacity: .88; }
.btn-link:active{ opacity: .8; transform: scale(.985); }

/* --------------------------------------------------
   電話CTAの「きらっ」と光るアニメーション
   白い帯を45度に傾け、一定間隔で一瞬だけ走らせます。
   光のはみ出しは overflow:hidden で抑えています
   （mask-image はローカルファイル閲覧時に読み込みが拒否され、
     ボタンごと透明になる場合があるため使用していません）。
-------------------------------------------------- */
.shine{
  position: relative;
  overflow: hidden;
}

.shine::before{
  content: "";
  position: absolute;
  top: -367%;
  left: 0;
  width: 7%;
  height: 100%;
  background: #fff;
  transform: scale(0) rotate(45deg);
  animation: shine 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine{
  0%   { transform: scale(0)  rotate(45deg); opacity: 0; }
  80%  { transform: scale(0)  rotate(45deg); opacity: .5; }
  81%  { transform: scale(4)  rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/* tell_sp.png / tell2_sp.png / follow_tell_sp.png は左右が半円の完全な角丸
   （半径＝高さの半分）。濃紺の背景の上に乗るので、同じ形に切り抜いて
   光のはみ出しを防ぎます */
.btn-link--tel{ border-radius: 999px; }

/* trouble_tell_sp.png は吹き出しが上に飛び出した形。背景が白のため、
   透明部分に光が出ても白同士で見えないので角丸の指定は不要です */

/* アンカー遷移時に少し余白を残す */
[id]{ scroll-margin-top: 8px; }

/* --------------------------------------------------
   セクション共通（ベース画像＋重ね配置）
-------------------------------------------------- */
.sec{
  position: relative;
  line-height: 0;
}

.sec__inner{ position: relative; }

.sec__base{ width: 100%; }

/* 重ねる要素の共通指定：左右中央そろえ（h2・aどちらにも付きます） */
.sec__ov{
  position: absolute;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  z-index: 2;
}

/* fv を囲む h1 */
.fv{ margin: 0; }

/* --- trouble：trouble_sp.jpg 800×1094 ------------------------------------
   タイトル trouble_title_sp.png 585×181 → 上部余白 0-238px の中央 (y=29)
   CTA      trouble_tell_sp.png  696×146 → 下部余白 854-1093px の中央 (y=901) */
.trouble__title{ width: 73.125%; top: 5.651%; }
.trouble__cta  { width: 87%;     top: 82.359%; }

/* --- price：price_sp.jpg 800×1318 ----------------------------------------
   タイトル price__title_sp.png 516×192 → 上部余白 0-242px の中央 (y=26) */
.price__title{ width: 64.5%; top: 3.973%; }

/* --- reason：reason_sp.jpg 800×2706 --------------------------------------
   タイトル reason__title_sp.png 800×223 → 上部余白 0-305px の中央 (y=42) */
.reason__title{ width: 100%; top: 3%; }

/* --- flow：flow_sp.jpg 800×2292 ------------------------------------------
   タイトル flow_title_sp.png 724×107 → 波線下の余白 43-219px の中央 (y=78) */
.flow__title{ width: 90.5%; top: 5%; }

/* --- area：area_sp.jpg 800×876 -------------------------------------------
   タイトル area_title_sp.png 423×111 → 旧デザインの描き込み位置 (y=56) */
.area__title{ width: 52.875%; top: 7.9%; }

/* --------------------------------------------------
   voice（お客様の声スライダー）
   旧 voice_sp.jpg（カード描き込み済み）の各パーツ位置を基準に、
   すべて幅に対する％で組んでいるため元デザインと同じ比率で拡縮します。
   基準：800×893px / 背景 #1C68B4 / カード上端222px・下端785px
-------------------------------------------------- */
.voice{
  background: var(--blue2);
  padding: 2.25% 0 5%;
  line-height: 0;
  /* flow_sp.jpg の下端は voice と同じ青（#1C68B4）で繋がるデザインです。
     端末幅によっては画像の高さが小数（例：幅700pxで2005.5px）になり、
     境目に body の白が透けて「白い隙間」に見えるため、青を1px分
     上に重ねて隠しています。見た目の位置は1pxしか変わりません。 */
  margin-top: -1px;
}

.voice__title{
  position: relative;
  /* ▼ 左右の位置調整はここだけ変えてください（マイナスで左へ／プラスで右へ）
       例）left: -3%;  left: 20px;  right も同様に使えます */
  left: 7%;
  padding-top: 3%;
  width: 85.625%;          /* voice_title_sp.png 685px ÷ 800px */
  margin: 0 auto;          /* ← 中央揃えの基準。left はこの位置からのズレになります */
}

.voice__slider{
  position: relative;
  margin-top: 2.1%;
}

/* カードの表示窓 */
.voice__viewport{
  width: 82.875%;          /* voice_0*_sp.png 663px ÷ 800px */
  margin: 0 auto;
  overflow: hidden;
}

/* スライド同士の間隔。JS がこの値を読んで移動量を計算します */
.voice__track{
  display: flex;
  gap: 5%;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .4s ease;
  will-change: transform;
}
/* ドラッグ中・ループの巻き戻し時はアニメーションを切る */
.voice__track.is-dragging,
.voice__track.is-jumping{ transition: none; }

.voice__slide{
  flex: 0 0 100%;
  max-width: 100%;
}

/* 左右の矢印（カードに少し重なる位置）
   画像は voice_arrow_sp.png 1点のみ。左向きは scaleX(-1) で反転しています */
.voice__arrow{
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 8.875%;           /* voice_arrow_sp.png 71px ÷ 800px */
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: url(../img/voice_arrow_sp.png) center / contain no-repeat;
  cursor: pointer;
  transition: opacity .2s ease;
}
.voice__arrow:hover{ opacity: .8; }
.voice__arrow:active{ opacity: .65; }

.voice__arrow--next{
  right: 3%;
  transform: translateY(-50%);
}
.voice__arrow--prev{
  left: 3%;
  transform: translateY(-50%) scaleX(-1);
}

/* ページャー（ドット） */
.voice__dots{
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: -1%;
}

.voice__dot{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5%;               /* 40px ÷ 800px：元デザインのドット間隔と同じ */
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.voice__dot::before{
  content: "";
  width: 35%;              /* 実際に見えるドットは約14px */
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background .2s ease, transform .2s ease;
}
.voice__dot.is-active::before{
  background: #fff;
  transform: scale(1.05);
}

/* --------------------------------------------------
   header（画像なしのためコーディング）
-------------------------------------------------- */

.header{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 800 / 105;
}

.header__logo{
  width: 43%;              /* rogo_sp.png の実描画幅が298px相当になる比率 */
  margin: 0;
}

@media screen and (max-width: 700px) {
.header{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 600 / 105;
}

.header__logo{
  width: 53%;              /* rogo_sp.png の実描画幅が298px相当になる比率 */
  margin: 0;
}
}
/* --------------------------------------------------
   CTAエリア共通
   背景画像＋背景色（#0033A6）を敷き、その上に
   「現在時刻テキスト」「CTAボタン画像」を重ねる。
   背景色が続くため、ボタン量が画像の高さを超えても破綻しません。
-------------------------------------------------- */
.cta{
  position: relative;
  background-color: var(--blue);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  line-height: 0;
}

.cta--1{ background-image: url(../img/cta_area_sp.jpg); }
.cta--2{ background-image: url(../img/cta_area2_sp.jpg); }

/* 画像に描き込まれた見出し部分のスペーサー */
.cta__lead{
  width: 100%;
  aspect-ratio: 800 / 78;   /* cta_area_sp.jpg：113px〜191px */
}
.cta__lead--2{
  aspect-ratio: 800 / 202;  /* cta_area2_sp.jpg：0px〜202px */
}

/* ボタン置き場 */
.cta__btns{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(16px, 4.4vw, 31px);
  padding: clamp(16px, 4.4vw, 31px) 0 clamp(20px, 5.6vw, 39px);
}

/* 画像内の余白にぴったり収まる場合は高さを固定して均等配置 */
.cta__btns--fit{
  aspect-ratio: 800 / 575;  /* cta_area_sp.jpg：191px〜766px */
  gap: 0;
  padding: 0;
}
.cta--slim .cta__btns{
  aspect-ratio: 800 / 352;  /* cta_area2_sp.jpg：202px〜554px */
  gap: 0;
  padding: 0;
}

.cta__btns .btn-link{ width: 86.25%; }   /* tell/mail 690px ÷ 800px */
.cta__card{
  margin: 0;
  width: 87.75%;                          /* card2_sp 702px ÷ 800px */
}
.cta__card--s{ width: 87.375%; }          /* card_sp  699px ÷ 800px */

/* --- 「最短15分で到着！」の上に重ねる現在時刻テキスト --------------------
   cta_area_sp.jpg の上部余白 0〜112px（= aspect-ratio 800/113）に
   ぴったり収まるように配置しています。 */
.cta__now{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 800 / 113;
  padding: 0 3%;
  line-height: 1.35;
}

.nowbar{
  margin: 0;
  color: #fff;
  font-size: clamp(11px, 3.4vw, 23.8px);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.nowbar__time{
  margin: 0 .1em;
  color: var(--accent);
  font-size: 1.22em;
  font-weight: 900;
  letter-spacing: .02em;
}

/* --------------------------------------------------
   FAQ（画像なしのためコーディング）
-------------------------------------------------- */
.faq{
  background: #ffffff;
  padding: clamp(34px, 9vw, 75px) 5% clamp(37px, 10vw, 70px);
  line-height: 1.75;

  /* ▼ Q・A アイコンの調整はここだけ触ればOKです ------------------
     --faq-q-size / --faq-a-size … 文字の大きさ（丸の直径は文字サイズ×1.7）
     --faq-q-x / --faq-q-y      … 丸の中での「Q」の位置（＋で右へ／＋で下へ、マイナス可）
     --faq-a-x / --faq-a-y      … 丸の中での「A」の位置（＋で右へ／＋で下へ、マイナス可）
     ※ 0 だと書体の都合で文字が少し下寄りに見えるため、初期値でマイナス（上へ）に
       補正しています。単位は em でも px でもOKです。
       例）Qをもう少し下げたい → --faq-q-y: -0.05em;（数値を 0 に近づける）
           Qをもっと上げたい   → --faq-q-y: -0.15em;
  ------------------------------------------------------------- */
  --faq-q-size: clamp(18px, 4.5vw, 25.5px);
  --faq-q-x: 0em;
  --faq-q-y: -0.105em;

  --faq-a-size: 1.5em;   /* 回答文の文字サイズ基準 */
  --faq-a-x: 0em;
  --faq-a-y: -0.058em;
}

.faq__title{
  width: 80.3%;            /* faq_title_sp.png 578px ÷ 800px（左右padding 5%を考慮） */
  max-width: 506px;
  margin: 0 auto clamp(18px, 5vw, 34px);
}

/* 支払方法一覧（FAQの最後に配置） */
.faq__card{
  width: 97.5%;            /* card2_sp.png 702px ÷ 800px（同上） */
  max-width: 614px;
  margin: clamp(20px, 5.4vw, 36px) auto 0;
}

.faq__list{
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.6vw, 18px);
}

/* 質問だけを青ボックスにし、回答は独立した白ボックスにする */
.faq__item{
  background: transparent;
}

.faq__q{
  display: flex;
  align-items: center;      /* Qアイコンと質問文を縦中央そろえ */
  gap: .6em;
  background: #1c68b5;
  width: 100%;
  margin: 0;
  padding: clamp(13px, 3.6vw, 22px) clamp(40px, 11vw, 62px) clamp(13px, 3.6vw, 22px) clamp(13px, 3.6vw, 22px);
  border: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(14px, 5.8vw, 20px);
  font-weight: 700;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  position: relative;
}

/* Q・A の丸アイコン（HTML の <span class="faq__mark"> が丸、文字は ::before）。
   丸と文字を別々にしているので、文字だけを top / left で自由に動かせます。 */
.faq__mark{
  position: relative;
  flex: 0 0 auto;
  width: 1.7em;            /* 丸の直径＝文字サイズ×1.7 */
  height: 1.7em;
  border-radius: 50%;
  font-weight: 900;
  line-height: 1;
}
.faq__mark::before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   /* ← 文字の中心を基準にする */
  white-space: nowrap;
}

/* 質問側「Q」 */
.faq__mark--q{
  background: #ffffff;
  color: #1c68b5;
  /* 質問文のサイズに連動させないため em ではなく独立指定。
     質問文を大きくしてもアイコンの大きさは変わりません */
  font-size: var(--faq-q-size);
}
.faq__mark--q::before{
  content: "Q";
  top: calc(50% + var(--faq-q-y));
  left: calc(50% + var(--faq-q-x));
}

/* 回答側「A」 */
.faq__mark--a{
  background: #fc6900;
  color: #ffffff;
  font-size: var(--faq-a-size);
}
.faq__mark--a::before{
  content: "A";
  top: calc(50% + var(--faq-a-y));
  left: calc(50% + var(--faq-a-x));
}

/* ＋／− アイコン */
.faq__q::after{
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(14px, 4vw, 24px);
  width: clamp(13px, 3.6vw, 20px);
  height: 2px;
  background: #ffffff;
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 transparent;
}
.faq__icon{
  position: absolute;
  top: 50%;
  right: clamp(14px, 4vw, 24px);
  width: clamp(13px, 3.6vw, 20px);
  height: 2px;
  background: #ffffff;
  transform: translateY(-50%) rotate(90deg);
  transition: transform .3s ease, opacity .3s ease;
}
.faq__q[aria-expanded="true"] .faq__icon{
  transform: translateY(-50%) rotate(180deg);
  opacity: 0;
}

/* 開閉アニメーション（grid の 0fr → 1fr を使用） */
.faq__a{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq__q[aria-expanded="true"] + .faq__a{ grid-template-rows: 1fr; }

/* クリップ用の入れ物。padding を持たせると閉じた時に高さが残るので空にしておく */
.faq__a-inner{
  min-height: 0;
  overflow: hidden;
}

/* 回答は青ボックスで囲まず、白ボックスに軽く影を付けて浮かせています。
   幅は質問の青ボックスと同じにし、上端は青ボックスの下にぴったり付けます。
   下の margin は影が切れないための余白（overflow:hidden の内側なので、
   閉じている時は一緒にクリップされます）。                              */
.faq__a-inner p{
  display: flex;
  align-items: flex-start;  /* Aアイコンは回答文の1行目と上そろえ */
  gap: .6em;
  margin: 0 0 12px;
  padding: clamp(13px, 3.6vw, 20px) clamp(13px, 3.6vw, 22px);
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 40, 90, .18);
  font-size: clamp(13px, 4vw, 17px);
  line-height: 1.8;
}

/* 700px以下で「A」を少し小さく */
@media screen and (max-width: 700px) {
  .faq{
    --faq-a-size: 1.3em;
  }
}

/* --------------------------------------------------
   お問い合わせフォーム（画像なしのためコーディング）
-------------------------------------------------- */
.form{
  background: var(--skyblue);
  padding: clamp(34px, 9vw, 70px) 5% clamp(40px, 10vw, 70px);
}

.form__title{
  width: 85%;
  max-width: 536px;             /* form_title_sp.png 613px 相当 */
  margin: 0 auto clamp(14px, 3.6vw, 24px);
}

.form__lead{
  margin: 0 0 clamp(20px, 5vw, 34px);
  text-align: center;
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 1.8;
}
.form__lead-tel{
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
}

.form__body{
  background: #fff;
  border-radius: 12px;
  padding: clamp(18px, 5vw, 34px) clamp(15px, 4.4vw, 30px) clamp(24px, 6vw, 40px);
  box-shadow: 0 2px 8px rgba(0, 40, 90, .10);
}

.form__row{ margin-bottom: clamp(13px, 3.4vw, 22px); }

.form__label{
  display: block;
  margin-bottom: 6px;
  color: #10305a;
  font-size: clamp(13px, 3.7vw, 17px);
  font-weight: 700;
  line-height: 1.5;
}
.form__label-note{
  font-size: .82em;
  font-weight: 500;
  color: #5b7a94;
}

.badge{
  display: inline-block;
  margin-left: .6em;
  padding: .1em .6em;
  border-radius: 3px;
  color: #fff;
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: 2px;
}
.badge--req{ background: var(--red); }

.form__input{
  display: block;
  width: 100%;
  padding: .7em .8em;
  border: 1px solid #b9cede;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font-family: inherit;
  font-size: clamp(16px, 4vw, 17px);   /* iOSの自動ズーム防止のため16px以上 */
  line-height: 1.5;
}
.form__input::placeholder{ color: #a8b6c2; }
.form__input:focus{
  outline: none;
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(28, 104, 180, .18);
}
/* 未入力・入力内容に誤りのある項目は赤枠にする（背景は白のまま） */
.form__input:user-invalid,
.form__input.is-invalid{
  border-color: var(--red);
  background: #fff;
}

.form__textarea{ resize: vertical; min-height: 7em; }

.form__select-wrap{ position: relative; }
.form__select-wrap::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--blue2);
  border-bottom: 2px solid var(--blue2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.form__select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4em;
}

/* 電話番号・郵便番号の分割入力 */
.form__split{
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.6vw, 10px);
}
.form__split .form__input{
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.form__split-sep{
  flex: 0 0 auto;
  color: #8ba3b8;
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 700;
}
/* 郵便番号は「3桁 - 4桁」なので右側を少し広く取る */
.form__split--zip .form__input:first-child{ flex: 3 1 0; }
.form__split--zip .form__input:last-child { flex: 4 1 0; }
/* 残りの余白を埋めないように全体幅を抑える */
.form__split--zip{ max-width: 15em; }

/* 未入力時のメッセージ。背景は白、文字色は「必須」バッジと同じ赤 */
.form__error{
  margin: clamp(12px, 3.4vw, 20px) 0 0;
  padding: .7em 1em;
  border-radius: 6px;
  background: #ffffff;
  color: var(--red);
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
.form__error[hidden]{ display: none; }

.form__submit-wrap{
  margin-top: clamp(20px, 5.4vw, 36px);
  text-align: center;
}

.form__submit{
  display: inline-block;
  width: clamp(130px, 27.6vw, 150px);  /* form_btn01_sp.png 229px 相当 */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.form__submit:hover{ opacity: .88; }
.form__submit:active{ opacity: .8; transform: scale(.985); }

.form__done{
  margin: clamp(16px, 4.4vw, 28px) 0 0;
  padding: 1em 1.1em;
  border-radius: 8px;
  background: #e8f7ec;
  border: 1px solid #a8ddb8;
  color: #14682f;
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

/* --------------------------------------------------
   追従CTA
   achievement セクションの中央までスクロールすると下からせり上がります。
   ページ最下部まで来ると、フッターの一番下にぴったり収まります
   （フッターに追従CTAぶんの余白を確保し、同じ #0033A6 で繋げています）。
-------------------------------------------------- */
:root{
  /* 追従CTAの高さ ＝ ボタン 80% × (138 ÷ 690) ＋ 上下padding 2.2%×2 */
  --sticky-cta-h: 20.4%;
}

.sticky-cta{
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  background: #0033a6;
  box-shadow: 0 -2px 12px rgba(0, 20, 70, .25);
  transform: translateY(110%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .4s ease, visibility .4s ease;
}

/* ％指定の基準を「本体と同じ幅（最大700px）」に揃えるためのラッパー。
   position:fixed のままだと％が画面幅基準になり、
   フッターに確保した余白と高さが合わなくなります */
.sticky-cta__inner{
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 2.2% 0;
}

.sticky-cta.is-visible{
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* 最下部まで来たらフッターと一体化させるため影を消す */
.sticky-cta.is-docked{
  box-shadow: none;
  transition: transform .4s ease, visibility .4s ease, box-shadow .2s ease;
}

.sticky-cta__btn{
  width: 80%;
}

/* --------------------------------------------------
   confirm.php / thanks.php（確認画面・完了画面）
-------------------------------------------------- */
.form--page{
  min-height: 60vh;
}

.page-title{
  margin: 0 auto clamp(18px, 4.6vw, 30px);
}
/* comfirm_title_sp.png 836×113 */
.page-title--confirm{ width: 100%; max-width: 731px; }
/* thanks_title_sp.png 411×111 */
.page-title--thanks { width: 57%;  max-width: 360px; }

/* 入力内容の確認リスト */
.confirm{
  margin: 0;
}

.confirm__row{
  padding: clamp(12px, 3.2vw, 20px) 0;
  border-bottom: 1px dashed #c3d8e8;
}
.confirm__row:first-child{ padding-top: 0; }
.confirm__row:last-child { border-bottom: 0; padding-bottom: 0; }

.confirm__label{
  margin-bottom: .35em;
  color: #10305a;
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 700;
}

.confirm__value{
  margin: 0;
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 500;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.confirm__empty{
  color: #9badbd;
  font-size: .9em;
}

/* 確認画面のボタン */
.confirm__btns{
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 18px);
  margin-top: clamp(22px, 5.6vw, 38px);
}

/* confirm_btn_sp1.png（送信）／confirm_btn_sp2.png（戻る）どちらも 229×90 */
.confirm__btn{
  width: clamp(130px, 28.6vw, 150px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.confirm__btn:hover { opacity: .85; }
.confirm__btn:active{ opacity: .75; transform: scale(.98); }

/* 送信完了画面 */
.thanks{
  text-align: center;
  font-size: clamp(13px, 3.7vw, 16px);
  line-height: 1.9;
}
.thanks p{ margin: 0 0 1.2em; }
.thanks p:last-child{ margin-bottom: 0; }

.thanks__lead{
  color: var(--blue);
  font-size: clamp(15px, 4.2vw, 19px);
  font-weight: 700;
  line-height: 1.7;
}

.thanks__note{
  display: inline-block;
  margin-top: .4em;
  color: #5b7a94;
  font-size: .88em;
  line-height: 1.7;
}

.thanks__tel-link{
  display: inline-block;
  margin-top: .3em;
  color: var(--blue);
  font-size: clamp(18px, 5.4vw, 24px);
  font-weight: 900;
  letter-spacing: .01em;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.thanks__tel-link:hover{ opacity: .8; }

/* thanks_btn_sp1.png 524×90 */
.thanks__back{
  margin-top: clamp(20px, 5vw, 32px) !important;
}
.thanks__back a{
  display: block;
  width: 100%;
  max-width: 459px;
  margin: 0 auto;
  transition: opacity .2s ease, transform .2s ease;
}
.thanks__back a:hover { opacity: .85; }
.thanks__back a:active{ opacity: .75; transform: scale(.985); }

/* --------------------------------------------------
   privacy.html（個人情報保護方針）
-------------------------------------------------- */
.privacy{
  padding: clamp(28px, 7vw, 48px) 5% clamp(36px, 9vw, 60px);
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 1.9;
}

.privacy__title{
  margin: 0 0 clamp(20px, 5vw, 34px);
  text-align: center;
  color: var(--blue);
  font-size: clamp(19px, 5.2vw, 27px);
  font-weight: 900;
  line-height: 1.5;
}
.privacy__title-sub{
  font-size: .8em;
}

.privacy__lead{
  margin: 0 0 clamp(24px, 6vw, 40px);
}

.privacy__block{
  margin-bottom: clamp(24px, 6vw, 40px);
}

.privacy__heading{
  margin: 0 0 .8em;
  padding: .35em 0 .35em .7em;
  border-left: 5px solid var(--blue2);
  background: var(--lightblue);
  color: var(--blue);
  font-size: clamp(15px, 4.2vw, 19px);
  font-weight: 700;
  line-height: 1.5;
}

.privacy p{
  margin: 0 0 .9em;
}
.privacy p:last-child{ margin-bottom: 0; }

.privacy a{
  color: var(--blue2);
  text-decoration: underline;
  word-break: break-all;
}
.privacy a:hover{ opacity: .8; }

.privacy__list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.privacy__list li{
  position: relative;
  padding-left: 1em;
  margin-bottom: .5em;
  font-size: .94em;
}
.privacy__list li::before{
  content: "・";
  position: absolute;
  left: 0;
}

/* トップページへ戻るボタン（thanks_btn_sp1.png 524×90／thanks.php と共通の見た目） */
.privacy__back{
  margin: clamp(30px, 8vw, 52px) 0 0;
  text-align: center;
}
.privacy__back a{
  display: block;
  width: 100%;
  max-width: 459px;
  margin: 0 auto;
  transition: opacity .2s ease, transform .2s ease;
}
.privacy__back a img{
  display: block;
  width: 100%;
  height: auto;
}
.privacy__back a:hover { opacity: .85; }
.privacy__back a:active{ opacity: .75; transform: scale(.985); }

/* --------------------------------------------------
   footer（画像なしのためコーディング）
-------------------------------------------------- */
.footer{
  background: var(--blue);
  color: #fff;
  padding: clamp(28px, 7vw, 48px) 6% clamp(22px, 5.4vw, 38px);
  text-align: center;
}

/* 追従CTAが最後にここへ収まるぶんの余白（index.html のみ有効） */
.has-sticky-cta .footer{
  padding-bottom: calc(clamp(22px, 5.4vw, 38px) + var(--sticky-cta-h));
}

/* privacy.html はフッター内のリンクが無く下側が空いて見えるため、上下の余白を揃えます */
.page-privacy .footer{
  padding-bottom: clamp(28px, 7vw, 48px);
}
.page-privacy .footer__info{
  margin-bottom: 0;
}

/* ロゴは透過PNG。背景は敷かずフッターの紺の上に直接置きます */
.footer__logo{
  width: clamp(190px, 47vw, 273px);   /* footer_rogo_sp.png 312px 相当 */
  margin: 0 auto clamp(20px, 5.4vw, 36px);
}
.footer__logo a{
  display: block;
  transition: opacity .2s ease;
}
.footer__logo a:hover{ opacity: .8; }

.footer__info{
  max-width: 520px;
  margin: 0 auto clamp(22px, 6vw, 40px);
  text-align: left;
  font-size: clamp(13px, 3.6vw, 17px);
  font-weight: 700;
  line-height: 1.6;
}
.footer__info-row{
  display: flex;
  align-items: baseline;
  gap: .2em;
  padding: .55em 0;
}
.footer__info dt{
  flex: 0 0 auto;
}
.footer__info dt::after{ content: "："; }
.footer__info dd{
  margin: 0;
  flex: 1 1 auto;
}
.footer__info a{ text-decoration: none; }

.footer__privacy{
  margin: 0;
  font-size: clamp(13px, 4.6vw, 28px);
  font-weight: 700;
}
.footer__privacy a{
  text-decoration: underline;
  text-underline-offset: .3em;
}
.footer__privacy a:hover{ opacity: .8; }

/* --------------------------------------------------
   アニメーションを控えたいユーザー向け
-------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,
  *::before,
  *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}