@charset "UTF-8";

/* ==========================================================
   基準: SPデザイン幅 750px（レスポンなし）
   --u = デザイン上の 1px。.l-wrap をコンテナにして幅に比例させる
   z-index: 背景装飾=1 / 通常=2 / スライダー矢印=3
========================================================== */
:root {
  --u: calc(100cqw / 750);
  --c-navy: #0b3f86;
  --c-blue: #0e50aa;
  --c-blue-deep: #074fa3;
  --c-blue-light: #3a93d5;
  --c-red: #d81414;
  --c-text: #333;
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: #eef4fa;
  color: var(--c-text);
  font-family: var(--font);
  line-height: 1.6;
}

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

h1,
h2,
h3,
p,
ul,
dl,
dd {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

.u-hidden {
  display: none;
}

/* ---------- wrap ---------- */
.l-wrap {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  background: #fff;
  overflow-x: clip;
}

/* ---------- header ---------- */
.l-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--u) * 15) calc(var(--u) * 15) calc(var(--u) * 15) calc(var(--u) * 15);
  background: linear-gradient(90deg, #0057be 0%, #0171d7 55%, #035ac4 100%);
}

.l-header__logo {
  width: calc(var(--u) * 353);
}

/* 電話番号はデラコンで差し替えるためテキスト。ボタンの土台（受話器アイコン込み）は背景画像 */
.l-header__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 322);
  aspect-ratio: 306 / 69;
  padding: 0 calc(var(--u) * 6) calc(var(--u) * 2) calc(var(--u) * 58);
  background: url("../img/cta_header.png") center / 100% 100% no-repeat;
  color: #fff;
  text-decoration: none;
  transition: opacity .2s;
}

.l-header__telNum {
  font-family: "Helvetica Neue", Arial, var(--font);
  font-size: calc(var(--u) * 38);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(120, 0, 0, .45);
}

.l-header__tel:hover {
  opacity: .85;
}

/* ---------- FV ---------- */
.p-fv h1 {
  font-size: inherit;
}

/* ---------- CTA ---------- */
.c-cta__time {
  padding: calc(var(--u) * 22) calc(var(--u) * 10);
  background: linear-gradient(180deg, #0258bc 0%, #024ab0 100%);
  color: #fff6c4;
  font-size: calc(var(--u) * 34);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  letter-spacing: .02em;
}

/* 時間表示の点滅（「〜ご案内可能」まで。帯の背景は点滅させない） */
.c-cta__blink {
  display: inline-block;
  animation: c-blink 2.4s ease-in-out infinite;
}

@keyframes c-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
  .c-cta__blink {
    animation: none;
  }
}

.c-cta__body {
  padding: calc(var(--u) * 25) 0 calc(var(--u) * 30);
  background: #e1f7ff url("../img/cta_bg.png") center top / 100% auto no-repeat;
}

/* 背景画像（750×605）の高さを確保するのは支払い方法ありのCTA（1つ目）のみ */
.c-cta__body:has(.c-cta__pay) {
  min-height: calc(var(--u) * 605);
}

/* 2つ目以降（電話・メールのみ）は上下の余白を広めに */
.c-cta__body:not(:has(.c-cta__pay)) {
  padding: calc(var(--u) * 50) 0 calc(var(--u) * 55);
}

.c-cta__btn {
  display: block;
  width: calc(var(--u) * 623);
  margin: 0 auto;
  transition: opacity .2s;
}

.c-cta__btn + .c-cta__btn {
  margin-top: calc(var(--u) * 9);
}

.c-cta__btn:hover {
  opacity: .85;
}

.c-cta__pay {
  width: calc(var(--u) * 629);
  margin: calc(var(--u) * 22) auto 0;
}

/* ---------- 追従CTA ---------- */
/* 自身のサイズは --u（親コンテナ基準）が使えないため --fu で指定。子要素は自身をコンテナにして --u を使う */
.c-fixCta {
  --fu: calc(min(100vw, 650px) / 750);
  container-type: inline-size;
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 650px;
  padding: calc(var(--fu) * 12) 0 calc(var(--fu) * 14 + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .6);
  text-align: center;
  transform: translateX(-50%);
  visibility: hidden;
}

.c-fixCta.is-show {
  visibility: visible;
}

.c-fixCta__lead {
  color: var(--c-navy);
  font-size: calc(var(--u) * 28);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
}

.c-fixCta__btn {
  display: block;
  width: calc(var(--u) * 560);
  margin: calc(var(--u) * 6) auto 0;
  transition: opacity .2s;
}

.c-fixCta__btn:hover {
  opacity: .85;
}

/* PC: 画面右下に小さく表示（子要素は --u で幅に比例して縮小） */
@media (min-width: 800px) {
  .c-fixCta {
    --fu: calc(400px / 750);
    right: 20px;
    bottom: 20px;
    left: auto;
    width: 400px;
    border-radius: 10px;
    transform: none;
  }
}

/* ---------- 画像セクション ---------- */
.p-img h2 {
  font-size: inherit;
}

/* ---------- 選ばれる理由 ---------- */
.p-reason {
  min-height: calc(var(--u) * 1255);
  padding: calc(var(--u) * 8) 0 calc(var(--u) * 40);
  background: #239cd5 url("../img/reason_bg.jpg") center top / 100% auto no-repeat;
}

.p-reason__ttl {
  width: calc(var(--u) * 580);
  margin: 0 auto;
}

.p-reason__inner {
  width: calc(var(--u) * 699);
  margin: calc(var(--u) * 53) auto 0;
}

/* ---------- お客様の声 ---------- */
.p-voice {
  padding: calc(var(--u) * 7) 0 calc(var(--u) * 38);
  background: #0951a5 url("../img/voice_bg.jpg") center top / 100% auto no-repeat;
}

.p-voice__ttl {
  width: calc(var(--u) * 409);
  margin: 0 auto;
}

.p-voice__slider {
  position: relative;
  margin-top: calc(var(--u) * 35);
}

.p-voice__viewport {
  overflow: hidden;
  touch-action: pan-y;
  transition: height .4s ease;
}

.p-voice__track {
  display: flex;
  align-items: flex-start;
  transition: transform .4s ease;
}

.p-voice__slide {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}

.p-voice__slide img {
  width: calc(var(--u) * 633);
  -webkit-user-drag: none;
  user-select: none;
}

/* 各画像は等倍表示。書き出しごとに透明余白が違うため、
   カード本体の上端・左右中心・スライド高さ（752）を voice01 にそろえる */
/* ループ用にJSで先頭・末尾の複製を足すため、nth-child ではなくクラスで指定 */
.p-voice__slide--02 img {
  width: calc(var(--u) * 597);
  margin-bottom: calc(var(--u) * 1);
}

.p-voice__slide--03 img {
  width: calc(var(--u) * 612);
  margin: calc(var(--u) * -1) 0 calc(var(--u) * -5) calc(var(--u) * -1);
}

.p-voice__slide--04 img {
  width: calc(var(--u) * 630);
  margin: calc(var(--u) * -34) 0 calc(var(--u) * -31) calc(var(--u) * 1);
}

.p-voice__arrow {
  position: absolute;
  z-index: 3;
  top: calc(var(--u) * 348);
  width: calc(var(--u) * 96);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.p-voice__arrow--prev {
  left: calc(var(--u) * 35);
}

.p-voice__arrow--next {
  right: calc(var(--u) * 8);
}

.p-voice__dots {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 10);
  margin-top: calc(var(--u) * 15);
}

.p-voice__dot {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.p-voice__dot.is-current {
  background: #a4e2ff;
}

/* ---------- ご利用の流れ ---------- */
.p-flow {
  min-height: calc(var(--u) * 1387);
  padding: calc(var(--u) * 25) 0 calc(var(--u) * 100);
  background: #d9eaf4 url("../img/flow_bg.jpg") center top / 100% auto no-repeat;
}

.p-flow__ttl {
  width: calc(var(--u) * 403);
  margin: 0 auto;
}

.p-flow__inner {
  width: calc(var(--u) * 690);
  margin: calc(var(--u) * 90) auto 0;
}

/* ---------- Q&A ---------- */
.p-faq {
  min-height: calc(var(--u) * 1300);
  padding: calc(var(--u) * 40) 0 calc(var(--u) * 150);
  background: #eaf6fc url("../img/qa_bg.jpg") center bottom / cover no-repeat;
}

.p-faq__ttl {
  width: calc(var(--u) * 238);
  margin: 0 auto;
}

.p-faq__list {
  width: calc(var(--u) * 708);
  margin: calc(var(--u) * 42) auto 0;
}

.p-faq__item {
  position: relative;
  border: calc(var(--u) * 3) solid #d4effb;
  border-radius: calc(var(--u) * 14);
  background: #fff;
}

.p-faq__item + .p-faq__item {
  margin-top: calc(var(--u) * 32);
}

.p-faq__q {
  font-size: inherit;
}

.p-faq__btn {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  width: 100%;
  min-height: calc(var(--u) * 88);
  padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 17);
  border: 0;
  background: none;
  color: var(--c-navy);
  font-size: calc(var(--u) * 28);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

/* Q アイコン（画像）。A.png と同じ書き出し仕様（107×105・周囲に余白）を想定 */
.p-faq__btn::before {
  content: "";
  flex: 0 0 auto;
  width: calc(var(--u) * 90);
  aspect-ratio: 107 / 105;
  margin: 0 calc(var(--u) * 2) 0 calc(var(--u) * -13);
  background: url("../img/Q.png") center / contain no-repeat;
}

.p-faq__btn::after {
  content: "";
  flex: 0 0 auto;
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
  margin-left: auto;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / calc(var(--u) * 24) calc(var(--u) * 4) no-repeat,
    linear-gradient(#fff, #fff) center / calc(var(--u) * 4) calc(var(--u) * 24) no-repeat,
    var(--c-blue-light);
}

.p-faq__btn.is-open::after {
  background:
    linear-gradient(#fff, #fff) center / calc(var(--u) * 24) calc(var(--u) * 4) no-repeat,
    var(--c-blue-light);
}

/* 開閉アニメーションは panel の height を JS で 0 ⇔ 中身の高さに切り替える */
.p-faq__a {
  overflow: hidden;
  border-radius: 0 0 calc(var(--u) * 11) calc(var(--u) * 11);
  transition: height .35s ease;
}

.p-faq__a[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .p-faq__a {
    transition: none;
  }
}

.p-faq__a > p {
  position: relative;
  min-height: calc(var(--u) * 138);
  padding: calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 26) calc(var(--u) * 118);
  background: #e9f6fe;
  color: var(--c-text);
  font-size: calc(var(--u) * 26);
  line-height: 1.45;
}

.p-faq__a > p::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 22);
  left: calc(var(--u) * 4);
  width: calc(var(--u) * 90);
  aspect-ratio: 107 / 105;
  background: url("../img/A.png") center / contain no-repeat;
}

/* ---------- フォームのエラー文 ---------- */
.c-form__error {
  margin-top: calc(var(--u) * 8);
  color: #c0392b;
  font-size: calc(var(--u) * 20);
  font-weight: 700;
  line-height: 1.5;
}

.c-form__error[hidden] {
  display: none;
}

/* ---------- お問い合わせ ---------- */
.p-contact {
  padding: calc(var(--u) * 5) 0 calc(var(--u) * 68);
  background: var(--c-blue-deep);
}

.p-contact__ttl {
  width: calc(var(--u) * 661);
  margin: 0 auto;
}

.c-form {
  width: calc(var(--u) * 646);
  margin: calc(var(--u) * 66) auto 0;
  padding: calc(var(--u) * 28) calc(var(--u) * 30) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 14);
  background: #fff;
}

.c-form__row {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.c-form__row + .c-form__row {
  margin-top: calc(var(--u) * 26);
}

.c-form__label {
  display: flex;
  align-items: center;
  float: none;
  width: 100%;
  padding: 0 0 0 calc(var(--u) * 14);
  border-left: calc(var(--u) * 8) solid var(--c-blue);
  color: #0e3a7a;
  font-size: max(15px, calc(var(--u) * 28));
  font-weight: 700;
  line-height: 1.45;
}

.c-form__req {
  margin-left: calc(var(--u) * 16);
  padding: 0 calc(var(--u) * 12);
  background: var(--c-red);
  color: #fff;
  font-size: max(11px, calc(var(--u) * 20));
  line-height: 1.7;
}

.c-form__input {
  display: block;
  width: 100%;
  height: max(44px, calc(var(--u) * 48));
  margin-top: calc(var(--u) * 13);
  padding: 0 max(12px, calc(var(--u) * 18));
  border: calc(var(--u) * 2) solid #d3d6db;
  border-radius: calc(var(--u) * 6);
  background: #fff;
  color: var(--c-text);
  font-family: var(--font);
  /* iOSのフォーカス時ズーム防止のため16px以上 */
  font-size: max(16px, calc(var(--u) * 22));
  -webkit-appearance: none;
  appearance: none;
}

.c-form__input::placeholder {
  color: #8a8f96;
}

.c-form__input:focus {
  border-color: var(--c-blue-light);
  outline: none;
}

.c-form__input.is-error {
  border-color: #e08a80;
  background: #fff0ef;
}

.c-form__textarea {
  height: max(120px, calc(var(--u) * 115));
  padding: max(10px, calc(var(--u) * 14)) max(12px, calc(var(--u) * 18));
  line-height: 1.5;
  resize: vertical;
}

.c-form__sub {
  display: flex;
  align-items: flex-start;
  margin-top: calc(var(--u) * 12);
}

.c-form__addr .c-form__sub:first-of-type {
  margin-top: calc(var(--u) * 18);
}

.c-form__subLabel {
  flex: 0 0 4.3em;
  color: #222;
  font-size: max(13px, calc(var(--u) * 20));
  font-weight: 700;
  line-height: max(44px, calc(var(--u) * 48));
  white-space: nowrap;
}

.c-form__subBody {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: calc(var(--u) * 28);
}

.c-form__sub .c-form__input {
  margin-top: 0;
}

.c-form__zip {
  position: relative;
}

.c-form__zipMark {
  position: absolute;
  top: 50%;
  left: calc(var(--u) * -26);
  transform: translateY(-50%);
  color: #222;
  font-size: max(13px, calc(var(--u) * 20));
}

.c-form__input--zip {
  width: calc(var(--u) * 243);
}

.c-form__note {
  margin: calc(var(--u) * 10) 0 0 calc(var(--u) * -28);
  color: #666;
  font-size: max(12px, calc(var(--u) * 15));
  line-height: 1.6;
}

.c-form__submit {
  margin-top: calc(var(--u) * 20);
  text-align: center;
}

.c-form__btn {
  width: calc(var(--u) * 315);
  min-height: max(48px, calc(var(--u) * 60));
  padding: 0 calc(var(--u) * 10);
  border: 0;
  border-radius: calc(var(--u) * 6);
  background: linear-gradient(180deg, #2163bd 0%, #12479a 100%);
  color: #fff;
  font-family: var(--font);
  font-size: max(16px, calc(var(--u) * 28));
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: opacity .2s;
  -webkit-appearance: none;
  appearance: none;
}

.c-form__submit--confirm .c-form__btn + .c-form__btn {
  margin-top: calc(var(--u) * 16);
}

.c-form__btn:hover {
  opacity: .85;
}

.c-form__btn:disabled {
  opacity: .6;
  cursor: default;
}

.c-form__btn--back {
  margin-top: calc(var(--u) * 16);
  background: #8a95a5;
}

/* ---------- 確認・完了ページ ---------- */
.p-formPage {
  min-height: 100vh;
  padding: calc(var(--u) * 68) 0 calc(var(--u) * 80);
  background: var(--c-blue-deep);
}

/* 文字サイズ・余白は index の見出し画像（form.png）内「お問い合わせ」に合わせる */
.p-formPage__ttl {
  color: #fff;
  font-size: calc(var(--u) * 64);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.c-confirm__item + .c-confirm__item {
  margin-top: calc(var(--u) * 26);
}

.c-confirm__value {
  margin-top: calc(var(--u) * 12);
  padding: calc(var(--u) * 10) calc(var(--u) * 18);
  border-bottom: calc(var(--u) * 2) solid #e3e8ee;
  font-size: max(16px, calc(var(--u) * 24));
  line-height: 1.6;
  word-break: break-all;
  white-space: pre-wrap;
}

.c-form__submit--confirm {
  margin-top: calc(var(--u) * 40);
}

.c-form__submit--confirm .c-form__btn {
  display: block;
  margin: 0 auto;
}

.p-thanks__text {
  font-size: calc(var(--u) * 26);
  line-height: 1.8;
  text-align: center;
}

.p-thanks__back {
  margin-top: calc(var(--u) * 40);
  text-align: center;
}

.p-thanks__back a {
  display: inline-grid;
  place-items: center;
  width: calc(var(--u) * 315);
  min-height: calc(var(--u) * 60);
  border-radius: calc(var(--u) * 6);
  background: linear-gradient(180deg, #2163bd 0%, #12479a 100%);
  color: #fff;
  font-size: calc(var(--u) * 26);
  font-weight: 700;
  text-decoration: none;
}

/* ---------- footer（運営会社） ---------- */
.l-footer {
  padding-top: calc(var(--u) * 40);
  background: #fff;
}

.l-footer__ttl {
  color: #0e4d9a;
  font-size: calc(var(--u) * 40);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.l-footer__table {
  margin-top: calc(var(--u) * 28);
  padding: calc(var(--u) * 30) 0;
  background: linear-gradient(90deg, #eaeef2 calc(var(--u) * 212), #fff calc(var(--u) * 212));
  font-size: calc(var(--u) * 22);
  line-height: 1.45;
}

.l-footer__row {
  display: grid;
  grid-template-columns: calc(var(--u) * 212) 1fr;
}

.l-footer__row + .l-footer__row {
  margin-top: calc(var(--u) * 8);
}

.l-footer__row--gap + .l-footer__row {
  margin-top: calc(var(--u) * 22);
}

.l-footer__row dt {
  padding-left: calc(var(--u) * 42);
  color: #1d64b5;
  font-weight: 500;
}

.l-footer__row dd {
  padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 18);
  color: var(--c-text);
}

.l-footer__row dd a {
  text-decoration: none;
}

.l-footer__copy {
  padding: calc(var(--u) * 22) calc(var(--u) * 20);
  background: var(--c-blue-deep);
  color: #fff;
  text-align: center;
}

.l-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.l-footer__links li + li::before {
  content: "｜";
  margin: 0 calc(var(--u) * 16);
  opacity: .6;
}

.l-footer__links a {
  color: #fff;
  font-size: calc(var(--u) * 22);
  text-decoration: none;
}

.l-footer__links a:hover {
  text-decoration: underline;
}

/* ---------- 下層ページ（プライバシーポリシー・免責事項） ---------- */
.p-legal {
  padding: calc(var(--u) * 80) calc(var(--u) * 60) calc(var(--u) * 40) calc(var(--u) * 52);
  color: #1a1a1a;
  font-size: calc(var(--u) * 30);
  line-height: 1.93;
}

@media (min-width: 800px) {
  .p-legal {
    font-size: 1.8rem;
  }
}

.p-legal__ttl {
  margin-bottom: calc(var(--u) * 62);
  font-size: calc(var(--u) * 52);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.p-legal__sec + .p-legal__sec {
  margin-top: calc(var(--u) * 58);
}

.p-legal__h2 {
  margin-bottom: calc(var(--u) * 10);
  padding-left: calc(var(--u) * 18);
  border-left: calc(var(--u) * 6) solid var(--c-blue-deep);
  font-size: calc(var(--u) * 36);
  font-weight: 700;
  line-height: 1.45;
}

.p-legal__list {
  margin-top: calc(var(--u) * 6);
}

.p-legal__list li {
  position: relative;
  padding-left: calc(var(--u) * 28);
}

.p-legal__list li::before {
  content: "";
  position: absolute;
  top: calc(1em * .93 - var(--u) * 4);
  left: calc(var(--u) * -4);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  background: #1a1a1a;
}

.p-legal__back {
  margin-top: calc(var(--u) * 100);
  text-align: center;
}

.p-legal__back a {
  display: inline-grid;
  place-items: center;
  width: calc(var(--u) * 370);
  min-height: calc(var(--u) * 88);
  border: calc(var(--u) * 2) solid var(--c-blue-deep);
  border-radius: 9999px;
  background: #fff;
  color: var(--c-blue-deep);
  font-size: calc(var(--u) * 30);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

.p-legal__back a:hover {
  background: var(--c-blue-deep);
  color: #fff;
}