@charset "UTF-8";

/* =========================================================
   base
   design width : 800px / display max width : 680px
   1 design px  = var(--u)
   ========================================================= */
:root {
  --maxw: 680px;
  --u: calc(min(100vw, 680px) / 800);
  --navy: #263a6d;
  --navy-d: #161e35;
  --orange: #f0430a;
  --yellow: #ffee72;
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: #f0f8ff;
  color: #1a1a1a;
  font-family: var(--font);
  line-height: 1.7;
}

img {
  border: 0;
  vertical-align: bottom;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   header (logo / h_tell / h_mail)
   ========================================================= */
.hdr__inner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 800 / 133;
  background: #fff;
}

.hdr__logo {
  position: absolute;
  left: 3.75%;
  top: 50%;
  width: 36.5%;
  transform: translateY(-50%);
}

.hdr__logo img,
.hdr__btn img {
  display: block;
  width: 100%;
  height: auto;
}

.hdr__btn {
  position: absolute;
  top: 15.04%;
  width: auto;
  display: block;
}

.hdr__btn--tel {
  left: 43.125%;
  width: 13.625%;
}

.hdr__btn--mail {
  left: 58%;
  width: 38.25%;
}

/* フォーム・サンクス：メールボタンなしで電話を右寄せ */
.hdr--tel-only .hdr__btn--tel {
  left: auto;
  right: 3.75%;
}

/* =========================================================
   MV (mv.jpg のヘッダー部分を隠して表示)
   ========================================================= */
.mv {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 800 / 1034;
  font-size: 0;
}

.mv__img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -16.625%;
}

/* =========================================================
   共通セクション（背景画像＋絶対配置パーツ）
   ========================================================= */
.sec {
  position: relative;
  font-size: 0;
}

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

.ov {
  position: absolute;
  margin: 0;
  padding: 0;
}

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

/* =========================================================
   CTA
   ========================================================= */
.cta {
  background: #fff;
  padding: 3.5% 0 9.125%;
}

.cta__card {
  position: relative;
  width: 93.125%;
  margin: 0 auto;
  font-size: 0;
}

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

.cta__head {
  position: absolute;
  left: 6.711%;
  top: 7.27%;
  margin: 0;
  letter-spacing: .01em;
}

.cta__head b {
  display: block;
  white-space: nowrap;
  font-size: calc(56 * var(--u));
  line-height: 1.22;
  font-weight: 700;
  color: var(--yellow);
}

.cta__head .js-clock {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

.cta__head > span {
  display: block;
  font-size: calc(36 * var(--u));
  line-height: 1.22;
  font-weight: 700;
  color: #fff;
}

.cta__tel,
.cta__mail {
  position: absolute;
  left: 3.557%;
  width: 92.752%;
  display: block;
}

.cta__tel {
  top: 22.55%;
}

.cta__mail {
  top: 42.887%;
}

.cta__tel img,
.cta__mail img {
  display: block;
  width: 100%;
  height: auto;
}

/* 電話CTAのアニメーション */
@keyframes ctaPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

.js-pulse {
  animation: ctaPulse 1.4s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

/* =========================================================
   見出しフェードイン
   ========================================================= */
.js-fade {
  opacity: 0;
  transform: translateY(calc(34 * var(--u)));
  transition: opacity .34s ease-out, transform .34s cubic-bezier(.2, .8, .3, 1);
}

.js-fade.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   明朗会計セクション
   ========================================================= */
.ov--account-ttl  { left: 3.863%;  top: 4.186%;  width: 92.25%; }
.ov--account-01   { left: 1.338%;  top: 23.497%; width: 97.375%; }
.ov--account-02   { left: 3.738%;  top: 45.318%; width: 92.5%; }
.ov--account-03   { left: 3.738%;  top: 71.291%; width: 96.25%; }

/* =========================================================
   選ばれる3つの理由
   ========================================================= */
.ov--reason-ttl { left: 13.863%; top: 2.122%;  width: 72.125%; }
.ov--reason-01  { left: 0;       top: 12.566%; width: 100%; }
.ov--reason-02  { left: 0;       top: 38.952%; width: 100%; }
.ov--reason-03  { left: 0;       top: 66.983%; width: 100%; }

/* =========================================================
   心配は不要です
   ========================================================= */
.ov--relief-ttl   { left: 0;      top: .759%;   width: 100%; }
.ov--relief-ttl02 { left: 2.8%;   top: 41.609%; width: 94.375%; }
.ov--relief-01    { left: .4%;    top: 57.499%; width: 99.625%; }
.ov--relief-02    { left: 0;      top: 73.39%;  width: 100%; }

/* =========================================================
   悪徳業者にご注意
   ========================================================= */
.ov--caution-ttl { left: 0;      top: .02%;    width: 100%; }
.ov--caution-01  { left: 6.263%; top: 53.918%; width: 87.5%; }

/* =========================================================
   お客様の声（スライダー）
   ========================================================= */
.ov--voice-ttl    { left: 21.463%; top: 9.775%;  width: 57.125%; }
.ov--voice-slider { left: 6.25%;   top: 25.253%; width: 87.5%; }

.slider {
  overflow: hidden;
}

.slider__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.slider__item {
  flex: 0 0 100%;
  width: 100%;
  padding: 1%;
}

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

.ov--voice-prev,
.ov--voice-next {
  top: 58.008%;
  width: 10.75%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: opacity .2s;
}

.ov--voice-prev { left: 3.463%; }
.ov--voice-next { left: 85.6%; }

.ov--voice-prev:hover,
.ov--voice-next:hover {
  opacity: .8;
}

.ov--voice-prev img,
.ov--voice-next img {
  display: block;
  width: 100%;
  height: auto;
}

.ov--voice-dots {
  left: 0;
  top: 90.5%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(18 * var(--u));
  font-size: 0;
}

.slider__dot {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(22, 30, 53, 0.2);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background .25s, transform .25s;
}

.slider__dot.is-active {
  background: #5e6a8b;
  transform: scale(1.15);
}

.slider__dot:hover {
  background: #fff;
}

/* =========================================================
   解決までの流れ
   ========================================================= */
.ov--flow-ttl { left: 4.4%;   top: 3.215%;  width: 91.375%; }
.ov--flow-01  { left: 3.463%; top: 14.259%; width: 95.25%; }
.ov--flow-02  { left: 3.338%; top: 33.879%; width: 95.25%; }
.ov--flow-03  { left: 3.338%; top: 54.893%; width: 95.25%; }
.ov--flow-04  { left: 3.463%; top: 76.191%; width: 95.25%; }

/* =========================================================
   対応エリア
   ========================================================= */
.ov--area-ttl { left: 16.663%; top: 9.087%;  width: 65.375%; }
.ov--area-01  { left: 3.738%;  top: 22.544%; width: 96.25%; }

/* =========================================================
   よくある質問（アコーディオン開閉で高さ可変）
   ========================================================= */
.sec--faq {
  padding: calc(88 * var(--u)) 0 calc(80 * var(--u));
}

.sec--faq .sec__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
}

.ov--faq-ttl {
  position: relative;
  left: auto;
  top: auto;
  z-index: 1;
  display: block;
  width: 77%;
  margin: -2% auto calc(48 * var(--u)) 9%;
}

.ov--faq-list {
  position: relative;
  left: auto;
  top: auto;
  z-index: 1;
  width: 92.5%;
  margin: 0 auto;
}

.faq {
  margin: 0;
  font-size: 0;
}

.faq__item {
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.28);
}

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

.faq dt {
  margin: 0;
}

.faq__q {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: calc(22 * var(--u)) calc(100 * var(--u)) calc(22 * var(--u)) calc(37 * var(--u));
  border: 0;
  border-radius: calc(20 * var(--u));
  background: var(--navy);
  color: #fff;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.faq__item.is-open .faq__q {
  border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
}

.faq__mark {
  flex: 0 0 calc(50 * var(--u));
  font-size: calc(48 * var(--u));
  line-height: calc(56 * var(--u));
  font-weight: 700;
}

.faq__mark--a {
  color: var(--orange);
}

.faq__q .faq__text {
  flex: 1 1 auto;
  font-size: calc(32 * var(--u));
  line-height: calc(54 * var(--u));
  font-weight: 700;
}

.faq__icon {
  position: absolute;
  right: calc(38 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 50%;
  background: #fff;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--navy);
  border-radius: calc(3 * var(--u));
  transform: translate(-50%, -50%);
  transition: opacity .25s, transform .25s;
}

.faq__icon::before {
  width: calc(22 * var(--u));
  height: calc(6 * var(--u));
}

.faq__icon::after {
  width: calc(6 * var(--u));
  height: calc(22 * var(--u));
}

.faq__item.is-open .faq__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__a {
  height: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 0 0 calc(20 * var(--u)) calc(20 * var(--u));
  transition: height .3s ease;
}

.faq__a-inner {
  display: flex;
  align-items: flex-start;
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(32 * var(--u)) calc(37 * var(--u));
}

.faq__a .faq__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: calc(30 * var(--u));
  line-height: calc(50 * var(--u));
  font-weight: 700;
  color: #1a1a1a;
}

/* =========================================================
   footer
   ========================================================= */
.ftr {
  background: var(--navy-d);
  color: #fff;
  text-align: center;
  padding: calc(72 * var(--u)) calc(24 * var(--u));
  letter-spacing: .04em;
}

.ftr p {
  margin: 0;
  font-size: calc(26 * var(--u));
  line-height: calc(42 * var(--u));
  font-weight: 700;
}

.ftr a {
  color: #fff;
  text-decoration: none;
}

.ftr a:hover {
  text-decoration: underline;
}

.ftr__link {
  margin-top: calc(46 * var(--u)) !important;
  font-size: calc(32 * var(--u)) !important;
  line-height: calc(48 * var(--u)) !important;
}

.ftr__link a {
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--u));
}

/* =========================================================
   追従CTA
   ========================================================= */
.fcta {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  width: 100%;
  max-width: var(--maxw);
  padding: calc(16 * var(--u)) 0;
  background: rgb(21 30 52 / 77%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  opacity: 0;
  transform: translateX(-50%) translateY(110%);
  transition: transform .35s ease, opacity .35s ease;
  pointer-events: none;
}

.fcta.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.fcta__btn {
  display: block;
  width: 90%;
  margin: 0 auto;
  animation: ctaPulse 1.4s ease-in-out infinite;
}

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

/* =========================================================
   下層ページ共通
   ========================================================= */
.page {
  padding: calc(70 * var(--u)) calc(40 * var(--u)) calc(110 * var(--u));
  background: #fff;
}

.ttl_img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(-70 * var(--u)) calc(-40 * var(--u)) calc(40 * var(--u));
  padding: calc(40 * var(--u)) calc(32 * var(--u));
  min-height: calc(180 * var(--u));
  background: #112353;
  text-align: center;
  font-size: 0;
  overflow: hidden;
}

.ttl_img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100 * var(--u));
  object-fit: contain;
}

.page__ttl {
  margin: 0 0 calc(20 * var(--u));
  text-align: center;
  font-size: calc(46 * var(--u));
  line-height: 1.4;
  font-weight: 700;
  color: var(--navy);
}

.page__ttl::after {
  content: "";
  display: block;
  width: calc(90 * var(--u));
  height: calc(7 * var(--u));
  margin: calc(18 * var(--u)) auto 0;
  border-radius: calc(4 * var(--u));
  background: var(--orange);
}

.page__lead {
  margin: 0 0 calc(46 * var(--u));
  text-align: center;
  font-size: calc(27 * var(--u));
  line-height: 1.85;
}

.page__back {
  margin: calc(60 * var(--u)) 0 0;
  text-align: center;
  font-size: calc(26 * var(--u));
}

.page__back a {
  color: var(--navy);
  font-weight: 700;
}

/* --- privacy --- */
.policy h2 {
  margin: calc(50 * var(--u)) 0 calc(16 * var(--u));
  padding-left: calc(20 * var(--u));
  border-left: calc(8 * var(--u)) solid var(--orange);
  font-size: calc(30 * var(--u));
  line-height: 1.5;
  font-weight: 700;
  color: var(--navy);
}

.policy h2:first-of-type {
  margin-top: calc(30 * var(--u));
}

.policy p {
  margin: 0 0 calc(24 * var(--u));
  font-size: calc(26 * var(--u));
  line-height: 1.9;
}

.policy ul {
  margin: 0 0 calc(24 * var(--u));
  padding-left: calc(30 * var(--u));
  font-size: calc(26 * var(--u));
  line-height: 1.9;
}

.policy a {
  color: #1554a8;
  word-break: break-all;
}

/* --- form --- */
.form__list {
  margin: 0;
}

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

.form__label {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin: 0 0 calc(12 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: 1.5;
  font-weight: 700;
  color: var(--navy);
}

.form__req {
  display: inline-block;
  padding: calc(3 * var(--u)) calc(14 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--orange);
  color: #fff;
  font-size: calc(20 * var(--u));
  line-height: 1.6;
  font-weight: 700;
}

.form__field input,
.form__field textarea {
  display: block;
  width: 100%;
  padding: calc(18 * var(--u)) calc(20 * var(--u));
  border: calc(2 * var(--u)) solid #c6cede;
  border-radius: calc(10 * var(--u));
  background: #fafbfd;
  color: #1a1a1a;
  font-family: inherit;
  font-size: max(16px, calc(28 * var(--u)));
  line-height: 1.6;
}

.form__field textarea {
  min-height: calc(320 * var(--u));
  resize: vertical;
}

.form__field input:focus,
.form__field textarea:focus {
  outline: calc(3 * var(--u)) solid rgba(38, 58, 109, .35);
  outline-offset: 0;
  background: #fff;
}

.form__note {
  margin: calc(34 * var(--u)) 0 0;
  text-align: center;
  font-size: calc(26 * var(--u));
  line-height: 1.8;
}

.form__note a {
  color: #1554a8;
  font-size: calc(30 * var(--u));
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--u));
}

.form__submit {
  margin: calc(40 * var(--u)) 0 0;
  text-align: center;
}

.form__submit button {
  display: block;
  width: 100%;
  padding: calc(26 * var(--u)) 0;
  border: 0;
  border-radius: calc(70 * var(--u));
  background: linear-gradient(180deg, #4ec911 0%, #22bd1c 55%, #13b915 100%);
  box-shadow: 0 calc(7 * var(--u)) 0 #165401;
  color: #fff;
  font-size: calc(36 * var(--u));
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.form__submit button:hover {
  filter: brightness(1.05);
}

.form__submit button:active {
  transform: translateY(calc(4 * var(--u)));
  box-shadow: 0 calc(3 * var(--u)) 0 #165401;
}

/* --- finish --- */
.finish {
  text-align: center;
}

.finish__msg {
  margin: 0 0 calc(56 * var(--u));
  font-size: calc(34 * var(--u));
  line-height: 1.9;
  font-weight: 700;
  color: var(--navy);
}

.finish__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto calc(56 * var(--u));
}

.finish__tel {
  display: block;
  width: 100%;
  max-width: calc(691 * var(--u));
  margin: 0 auto;
}

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

/* =========================================================
   アニメーション抑制
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .js-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-pulse,
  .fcta__btn {
    animation: none;
  }

  .slider__track,
  .faq__a,
  .fcta {
    transition: none;
  }
}