@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@100;400;700;800&family=Noto+Sans+JP:wght@100..900&display=swap");

:root {
  --window-max-size: 750px;
  --clr-bg: #fff;
  --primary-color: #eb5505;

  --font-family: "Noto Sans JP", Arial, メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Helvetica, Verdana, sans-serif;
  --font-family-line-seed: "LINE Seed JP", sans-serif;
  --primary-font-color: #000;
  --headline-font-color: #eb5505;

  --main-margin-top: 76px;

  --btn-main-width: calc(530 / 750 * 100%);
  --section-padding-bottom: min(80px, 10.67vw);
}
@media (max-width: 767px) {
  :root {
    --main-margin-top: 76px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 400;
  font-feature-settings: "palt";

  user-select: none; /* CSS3 */
  -moz-user-select: none; /* Firefox */
  -webkit-user-select: none; /* Safari、Chromeなど */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}

html {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--clr-bg);
  width: 100%;
  height: 100vh;
  position: relative;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

body.page-loaded {
  opacity: 1;
}

a {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--headline-font-color);
  font-family: var(--font-family-line-seed);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
  font-feature-settings: "palt";
}

p {
  color: var(--primary-font-color);
  font-family: var(--font-family);
  font-size: min(22px, 3vw);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  font-feature-settings: "palt";
}
a {
  color: blue;
  text-decoration: underline;
}
img {
  max-width: 100%;
}

/* 共通 */
main {
  background-color: #fff;
}

.pconly {
  display: block;
}

.sponly {
  display: none;
}
.btn {
  filter: drop-shadow(0 min(10px, 1.33vw) 1px #ae8e7e);
  transform: translateY(0);
  will-change: filter, transform;
  transition:
    filter 0.1s ease-in-out,
    transform 0.2s ease-in-out;
  padding-bottom: min(5px, 0.67vw);
}
.btn:hover {
  filter: drop-shadow(0 min(10px, 1.33vw) 1px transparent);
  transform: translateY(5px);
}
.kome {
  margin-left: 1.2em;
  text-indent: -1.2em;
}
@media (max-width: 767px) {
  .pconly {
    display: none;
  }

  .sponly {
    display: block;
  }
}
#contentsWrapper {
  width: 100%;

  margin-inline: auto;
  z-index: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  opacity: 1;
  position: relative;
}
.loaded #contentsWrapper {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

header {
  width: 100%;
  height: auto;
  max-width: var(--window-max-size);
  margin-inline: auto;
  aspect-ratio: 750 / 76;
  max-height: 76px;
  background: #fff;
}
header .headerInner {
  width: 100%;
  margin-inline: auto;
  height: 100%;
  padding-inline: 20px;
}
header .headerTitle {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
header .headerTitle img {
  display: block;
  height: 24px;
  width: auto;
  object-fit: contain;
}
header .headerTitle .logoHikariplus {
  margin-right: 20px;
}
header .headerTitle .logoDenki {
  height: 23px;
}
@media (max-width: 767px) {
  header .headerTitle .logoHikariplus {
    margin-right: 10px;
    height: 18px;
  }
  header .headerTitle .logoDenki {
    height: 16px;
  }
}

/* Section topSection */
.topSection {
  width: 100%;
  height: auto;
  max-width: var(--window-max-size);
  max-height: 1131px;
  aspect-ratio: 750 / 1131;
  margin-inline: auto;
  background: var(--primary-color);
}
.topSection .inner {
  width: 100%;
  height: 100%;
  max-width: var(--window-max-size);
  margin-inline: auto;
  position: relative;
}
.topSection .topBg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0 !important;
}
.topSection .subTitle {
  width: 100%;
  height: auto;

  position: absolute;
  top: 0;
  left: 0;
}
.topSection .mainTitle {
  width: 100%;
  height: auto;

  position: absolute;
  top: calc(116 / 1131 * 100%);
  left: 0;
}
.topSection .topImg01 {
  width: 100%;
  height: auto;

  position: absolute;
  top: calc(336 / 1131 * 100%);
  left: 0;
}
.topSection .topImg02 {
  width: 100%;
  height: auto;

  position: absolute;
  top: calc(724 / 1131 * 100%);
  left: 0;
}

/* Aside followBtnDiagnosis */
.followBtnDiagnosis {
  width: 100%;
  max-width: var(--window-max-size);
  margin-inline: auto;
  height: auto;
  max-height: 188px;
  aspect-ratio: 750 / 188;
  background: url(../images/diagnosis_bg.png) no-repeat center bottom / cover;

  position: relative;
  top: 0;
  z-index: 100;

  margin-top: max(-48px, -6.4vw);
}
.followBtnDiagnosis.is-fixed {
  background: none;
  aspect-ratio: 750 / 120;
  position: fixed;
  top: initial;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0; /* 元設定されているマイナスマージンを打ち消す */
  z-index: 100;

  /* オプション: 固定時に不自然に見えないよう、ふわっと上から現れるアニメーション */
  animation: fadeInDown 0.3s ease-out forwards;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.btnDiagnosis {
  width: var(--btn-main-width);
  height: auto;
  display: block;
  margin-inline: auto;
  position: absolute;
  bottom: calc(47.5 / 188 * 100%);
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 min(10px, 1.33vw) 1px #a33b03);
  will-change: filter;
}
.btnDiagnosis:hover {
  filter: drop-shadow(0 10px 1px transparent);
  transform: translateX(-50%) translateY(5px);
}
.followBtnDiagnosis.is-fixed .btnDiagnosis {
  width: 82%;
  max-width: initial;
  aspect-ratio: initial;
  max-height: initial;
  margin-inline: auto;
  padding-inline: 0 !important;
}
body.pause .followBtnDiagnosis.is-fixed {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  animation: fadeOut 0.5s ease-in-out forwards;
}
/* Section diagnosisSection */
.diagnosisSection {
  width: 100%;
  max-width: var(--window-max-size);
  margin-inline: auto;
  height: auto;
  background: var(--clr-bg);
  padding-top: min(83px, 11.07vw);
  background-color: #fef6f2;
  padding-inline: min(31px, 4.13vw);
  padding-bottom: var(--section-padding-bottom);
}
.diagnosisSection .wrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  padding: min(15px, 2vw);
  margin-inline: auto;
  background-color: #fff;
  border-radius: 23px;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
  will-change: filter;
}
.diagnosisSection .wrapper .inner {
  width: 100%;
  height: auto;
  padding: min(28px, 3.73vw) min(37px, 5vw);
  max-width: var(--window-max-size);
  border: 2px solid var(--primary-color);
  margin-inline: auto;
}
.diagnosisSection .wrapper .inner h2 {
  font-size: min(29px, 3.87vw);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  font-family: var(--font-family);
  color: var(--primary-font-color);
  margin-bottom: min(25px, 3.33vw);
}

.diagnosisSection .wrapper .inner h2 span {
  display: inline;
  margin-top: min(10px, 1.33vw);
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-size: min(50px, 6.67vw);
  font-family: var(--font-family-line-seed);
  font-weight: 800;
  line-height: 1.2;
  color: var(--primary-color);
  letter-spacing: 0;
  text-align: center;
  position: relative;
  z-index: 0;
}

.diagnosisSection .wrapper .inner h2 span::before {
  content: "";
  width: 100%;
  height: 20%;
  background-color: #ffff00;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.diagnosisSection .wrapper .inner p.ttl {
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-size: min(20px, 2.67vw);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: var(--primary-font-color);
  text-align: center;
  margin-bottom: min(25px, 3.33vw);
  padding-top: min(20px, 2.67vw);
  border-top: 2px solid var(--primary-color);
}
/* チェックボックスのアイコン */
.diagnosisSection .wrapper .inner form .formItem {
  width: 100%;
  height: auto;
  margin-inline: auto;
  margin-bottom: min(25px, 3.33vw);
  padding-bottom: min(20px, 2.67vw);
  border-bottom: 1px dashed #000;
}
.diagnosisSection .wrapper .inner form .formItem:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}
.diagnosisSection .wrapper .inner form .formItem .formItemInner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.diagnosisSection .wrapper .inner form .formItem .formItemInner .checkbox {
  margin-right: min(20px, 2.67vw);
}
.diagnosisSection .wrapper .inner form .formItem label {
  font-size: min(27px, 3.6vw);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: var(--primary-font-color);
}
.checkbox {
  position: relative;
  width: min(51px, 6.8vw);
  height: min(51px, 6.8vw);
  aspect-ratio: 1;
  appearance: none;
  background: #ffffff;
  border: solid min(4px, 0.53vw) var(--primary-color);
  border-radius: 4px;
  box-shadow: 0 0 0 0 transparent;
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out;

  /* チェックマーク */
  &:checked {
    opacity: 1;
  }
  &::before {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;

    content: "";
    opacity: 0;
    /* mask-image: url("icon.svg"); */
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #ffffff;
  }
  &:checked::after {
    content: "";
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: min(38px, 5.07vw);
    height: min(22px, 2.93vw);
    border-bottom: min(6px, 0.8vw) solid var(--primary-color);
    border-left: min(6px, 0.8vw) solid var(--primary-color);
  }
  &:disabled {
    opacity: 0.2;
  }
  &:disabled + label {
    opacity: 0.3;
    cursor: default;
  }
}
.btnSubmit {
  width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  position: relative;
  margin-top: min(50px, 6.67vw);
  margin-bottom: min(50px, 6.67vw);
}

#diagnosisResults > div {
  width: 100%;
  height: auto;
  margin-inline: auto;
  padding-inline: min(21px, 2.8vw);
  padding-block: min(32px, 4.27vw);
  border-radius: 23px;
}
#diagnosisResults > div h3 {
  width: fit-content;
  margin-inline: auto;
  font-size: min(42px, 5.6vw);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: var(--primary-color);
  text-align: center;
  margin-bottom: min(25px, 3.33vw);
  position: relative;
  z-index: 0;
}
#diagnosisResults > div h3::before {
  content: "";
  display: block;
  width: 100%;
  height: 40%;
  background-color: #fff;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

#diagnosisResults .btn {
  display: block;
  margin-block: min(20px, 2.67vw) min(20px, 3.33vw);
}
.speechBubble {
  width: 100%;
  position: relative;
  display: inline-block;
  margin-bottom: min(35px, 4.67vw);
  padding: min(16px, 2.13vw);
  border-radius: 8px;
  background-color: #ffffff;
  text-align: center;
  font-size: min(30px, 4vw);
  font-weight: 700;
  line-height: 1.5;
  color: var(--primary-color);
  font-family: var(--font-family);
}

.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}
@media (max-width: 767px) {
  .speechBubble::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #ffffff transparent transparent;
    translate: -50% 100%;
  }
}
#diagnosisResults a.btnApplyCondition {
  font-size: min(23px, 3.07vw);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
}
#diagnosisResults a.btnApplyCondition::before {
  content: "";
  display: block;
  width: min(24px, 3.2vw);
  height: min(24px, 3.2vw);
  background-image: url("../images/arrow_apply.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: min(10px, 1.33vw);
}
/* 診断結果 */
#diagnosisResults > div {
  display: none;
}
body[data-result="05"] .btnSubmit,
body[data-result="01"] .btnSubmit,
body[data-result="02"] .btnSubmit,
body[data-result="03"] .btnSubmit,
body[data-result="04"] .btnSubmit {
  pointer-events: none;
  filter: drop-shadow(0 min(10px, 1.33vw) 1px transparent);
  transform: translateY(5px);
  opacity: 0.5;
}
body[data-result="01"] #diagnosisResults .result01,
body[data-result="02"] #diagnosisResults .result02,
body[data-result="03"] #diagnosisResults .result03,
body[data-result="04"] #diagnosisResults .result04,
body[data-result="05"] #diagnosisResults .result05 {
  display: block;
  animation: fadeInResult 0.3s ease-in-out forwards;
}
@keyframes fadeInResult {
  0% {
    opacity: 0;
    transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#diagnosisResults .result01,
#diagnosisResults .result02,
#diagnosisResults .result03,
#diagnosisResults .result04 {
  width: 100%;
  height: auto;
  margin-inline: auto;
  background-color: #f2f2e6;
}
#diagnosisResults .type01 {
  filter: drop-shadow(0 min(10px, 1.33vw) 1px #5e8415);
}
#diagnosisResults .type02 {
  filter: drop-shadow(0 min(10px, 1.33vw) 1px #aa7900);
}
#diagnosisResults .type03 {
  filter: drop-shadow(0 min(10px, 1.33vw) 1px #a53c02);
}
#diagnosisResults .result05 {
  width: 100%;
  height: auto;
  margin-inline: auto;
  background-color: #ffff80;
}

/* priceSection */

.priceSection {
  width: 100%;
  max-width: var(--window-max-size);
  margin-inline: auto;
  height: auto;
  background: var(--clr-bg);
  padding-top: min(50px, 6.67vw);
  background-color: #fef6f2;
  padding-inline: min(31px, 4.13vw);
  padding-bottom: var(--section-padding-bottom);
}
.titleWrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  margin-inline: auto;
  margin-bottom: min(30px, 4vw);
}
.titleWrapper h2 {
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-size: min(46px, 6.13vw);
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
  letter-spacing: -0.03em;
  font-family: var(--font-family-line-seed);
  color: var(--primary-color);
}
.priceSection .wrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  padding-block: 0 min(15px, 2vw);
  margin-inline: auto;
  background-color: #fff;
  border-radius: 23px;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
  will-change: filter;
}
.priceSection .wrapper .ttl {
  font-size: min(24px, 3.2vw);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: 000;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: min(10px, 1.33vw);
  margin-bottom: min(25px, 3.33vw);
}
.priceSection .wrapper ul {
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.priceSection .wrapper ul li {
  font-size: min(22px, 3vw);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  padding-bottom: min(10px, 1.33vw);
  list-style: disc;
  margin-left: 1em;
}
.priceSection .wrapper .ex {
  font-size: min(22px, 3vw);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  margin-bottom: min(25px, 3.33vw);
}
.priceSection .wrapper h3 {
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-size: min(30px, 4vw);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #fff;
  text-align: center;
  background-color: var(--primary-color);
  padding-block: min(26px, 3.47vw);
  border-radius: 23px 23px 0 0;
  margin-bottom: min(25px, 3.33vw);
}
.priceSection .wrapper .inner {
  width: 100%;
  height: auto;
  padding: 0 min(30px, 4vw) min(20px, 2.67vw);
  max-width: var(--window-max-size);
  margin-inline: auto;
}
.priceSection .wrapper h4 {
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-size: min(20px, 2.67vw);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: var(--primary-color);
  text-align: center;
  background-color: #fdeee6;
  border-radius: 15px;
  padding-block: min(10px, 1.33vw);
  margin-bottom: min(25px, 3.33vw);
}
.priceItem {
  width: 100%;
  height: auto;
  margin-inline: auto;
  display: grid;
  grid-template-columns: min(143.7px, 19.16vw) 1fr;
  align-items: center;
  margin-bottom: min(25px, 3.33vw);
}
.priceItem .days {
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-size: min(22px, 3vw);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #fff;
  text-align: center;
  background-color: var(--primary-color);
  border-radius: min(12px, 1.6vw);
  padding-block: min(24px, 3.2vw);
}
.priceItem .price {
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-size: min(99px, 13.2vw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-family: var(--font-family-line-seed);
  color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.priceItem .price span {
  font-size: min(74px, 9.87vw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-family: var(--font-family-line-seed);
  color: var(--primary-color);
}
.priceItemEx {
  width: 100%;
  height: auto;
  margin-inline: auto;
  display: grid;
  grid-template-columns: min(119px, 15.87vw) 1fr;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: min(12px, 1.6vw);
  overflow: hidden;
}
.priceItemEx:last-of-type {
  margin-bottom: min(20px, 2.67vw);
}
.priceItemEx .breakdown {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-inline: auto;
  font-size: min(20px, 2.67vw);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  background-color: #ccc;
  padding-block: min(25px, 3.33vw);
}
.priceItemEx .breakdownEx {
  width: 100%;
  height: auto;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: min(25px, 3.33vw) min(20px, 2.67vw);
}
.priceItemEx .breakdownEx .ex {
  font-size: min(22px, 3vw);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
}
.priceItemEx .breakdownEx .discount {
  font-size: min(44px, 5.87vw);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  font-family: var(--font-family-line-seed);
  color: #000;
}
.priceItemEx .breakdownEx .discount span {
  font-size: min(36px, 4.8vw);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  font-family: var(--font-family-line-seed);
  color: #000;
}
.priceItemEx .breakdownEx .saidai {
  font-size: min(20px, 2.67vw);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: var(--font-family);
  color: #000;
  background-color: #ccc;
  padding: min(15px, 2vw) min(10px, 1.33vw);
  border-radius: min(12px, 1.6vw);
  margin-left: auto;
  margin-right: min(10px, 1.33vw);
}
.priceSection .arrow {
  width: min(120px, 16vw);
  height: auto;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: min(25px, 3.33vw);
}
.priceSection .arrow img {
  width: 100%;
  height: auto;
}

/* conditionSection */
.conditionSection {
  width: 100%;
  margin-inline: auto;
  height: auto;
  background: var(--clr-bg);
  padding-top: min(80px, 10.67vw);
  background-color: #fff;
  padding-inline: min(31px, 4.13vw);
  padding-bottom: var(--section-padding-bottom);
}
.conditionSection .wrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  padding-block: 0 min(15px, 2vw);
  margin-inline: auto;
  border-radius: 23px;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
  will-change: filter;
  background-color: #fef6f2;
}
.conditionSection .wrapper h3 {
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-size: min(30px, 4vw);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  text-align: center;
  background-color: #fbddcd;
  padding-block: min(26px, 3.47vw);
  border-radius: 23px 23px 0 0;
  margin-bottom: min(25px, 3.33vw);
}
.conditionSection .wrapper .inner {
  width: 100%;
  height: auto;
  padding: 0 min(30px, 4vw) min(20px, 2.67vw);
  max-width: var(--window-max-size);
  margin-inline: auto;
}
.conditionSection .wrapper .inner p {
  width: 100%;
  height: auto;
  margin-inline: auto;
  text-align: center;
  font-size: min(24px, 3.2vw);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  padding-bottom: min(20px, 2.67vw);
  margin-bottom: min(20px, 2.67vw);
  border-bottom: 1px solid #000;
}
.conditionSection .wrapper .inner p span {
  color: var(--primary-color);
}
.conditionSection .wrapper .inner ul li {
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-size: min(26px, 3.47vw);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-family: var(--font-family);
  color: #000;
  padding-bottom: min(20px, 2.67vw);
  margin-bottom: min(20px, 2.67vw);
  border-bottom: 1px dashed #000;
  display: flex;
  flex-wrap: wrap;
  gap: min(5px, 0.67vw);
}
.conditionSection .wrapper .inner ul li:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.conditionSection .wrapper .inner ul li span:nth-child(1) {
  width: fit-content;
  color: var(--primary-color);
}
.conditionSection .wrapper .inner ul li span:nth-child(2) {
  flex: 1 1 90%;
  font-weight: 700;
}
.conditionSection .wrapper .inner ul li span:nth-child(3) {
  flex: 1 1 100%;
  font-size: min(22px, 3vw);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  text-align: center;
  background-color: #fff;
  padding: min(20px, 2.67vw) min(20px, 2.67vw);
  border-radius: min(12px, 1.6vw);
}

/* applySection */
.applySection {
  width: 100%;
  margin-inline: auto;
  height: auto;
  background: var(--clr-bg);
  /* padding-top: min(80px, 10.67vw); */
  background-color: #fff;
  padding-inline: min(31px, 4.13vw);
  padding-top: var(--section-padding-bottom);
  padding-bottom: var(--section-padding-bottom);
}
.applySection .titleWrapper,
.applySection2 .titleWrapper {
  margin-bottom: min(18px, 2.4vw);
}
.applySection .wrapper,
.applySection2 .wrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  padding-block: 0 min(15px, 2vw);
  margin-inline: auto;
}
.applySection .wrapper .tabsWrapper,
.applySection2 .wrapper .tabsWrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  margin-inline: auto;
  position: relative;
}
.applySection .wrapper .tabsWrapper .tabsTitleWrapper,
.applySection2 .wrapper .tabsWrapper .tabsTitleWrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: min(7px, 0.93vw);
  position: relative;
}
.applySection .wrapper .tabsWrapper .tabsTitleWrapper .tabTitle,
.applySection2 .wrapper .tabsWrapper .tabsTitleWrapper .tabTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  max-width: 690px;
  margin-inline: auto;
  font-size: min(17px, 2.27vw);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  text-align: center;
  background-color: #f2f2e6;
  padding-block: min(10px, 1.33vw) min(30px, 4vw);
  border-radius: min(23px, 3.07vw) min(23px, 3.07vw) 0 0;
  border: 1px solid #d1cecd;
  border-bottom: none;
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.2);
  position: relative;
}
.tabsContentWrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  min-height: min(289px, 38.53vw);
  margin-inline: auto;
  background-color: #fbddcd;
  border-radius: 0 0 min(23px, 3.07vw) min(23px, 3.07vw);
  border: 1px solid #d1cecd;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
  margin-top: max(-20px, -2.67vw);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.tabsContentWrapper .tabContent {
  width: 100%;
  height: auto;
  max-width: 690px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: min(20px, 2.67vw);
  padding: min(10px, 1.33vw) min(40px, 5.33vw) min(44px, 5.87vw);
  display: none;
  position: relative;
}
body[data-tab="01"] .tabTitle:nth-child(1) {
  background-color: #fbddcd !important;
  filter: none !important;
  z-index: 1;
}
body[data-tab="01"] .tabTitle:nth-child(1)::after {
  content: "";
  display: block;
  width: 110%;
  height: 20%;
  background-color: #fbddcd;
  position: absolute;
  bottom: max(-3px, -0.4vw);
  left: 1px;

  z-index: -1;
}
.tabsContentWrapper .tabContent .btnApplyCondition {
  font-size: min(23px, 3.07vw);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.tabsContentWrapper .tabContent .btnApplyCondition::before {
  content: "";
  display: block;
  width: min(24px, 3.2vw);
  height: min(24px, 3.2vw);
  background-image: url("../images/arrow_apply.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: min(10px, 1.33vw);
}
body[data-tab="01"] .tabsContentWrapper {
  border-radius: 0 min(23px, 3.07vw) min(23px, 3.07vw) min(23px, 3.07vw);
}
body[data-tab="01"] .tabContent:nth-child(1) {
  display: flex !important;
}

body[data-tab="02"] .tabsContentWrapper {
  border-radius: min(23px, 3.07vw);
  background-color: #ffffcd;
}
body[data-tab="02"] .tabTitle:nth-child(2) {
  background-color: #ffffcd !important;
  z-index: 1;
}
body[data-tab="02"] .tabTitle:nth-child(2)::after {
  content: "";
  display: block;
  width: 110%;
  height: 20%;
  background-color: #ffffcd;
  position: absolute;
  bottom: max(-3px, -0.4vw);
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
body[data-tab="02"] .tabContent:nth-child(2) {
  display: flex !important;
}
body[data-tab="03"] .tabTitle:nth-child(3) {
  background-color: #d7ffcb !important;
  z-index: 1;
}
body[data-tab="03"] .tabsContentWrapper {
  border-radius: min(23px, 3.07vw);
  background-color: #d7ffcb;
}
body[data-tab="03"] .tabTitle:nth-child(3)::after {
  content: "";
  display: block;
  width: 110%;
  height: 20%;
  background-color: #d7ffcb;
  position: absolute;
  bottom: max(-3px, -0.4vw);
  right: 0;
}
body[data-tab="03"] .tabContent:nth-child(3) {
  display: flex !important;
}

/* judgmentSection */
.judgmentSection,
.discountAmountSection,
.timingOfDiscountSection,
.notesWrapper {
  width: 100%;
  max-width: var(--window-max-size);
  margin-inline: auto;
  height: auto;
  background: var(--clr-bg);
  background-color: #fff;
  padding-inline: min(31px, 4.13vw);
  padding-bottom: var(--section-padding-bottom);
}
.notesWrapper {
  padding-bottom: 0;
}
.timingOfDiscountSection {
  padding-bottom: min(40px, 5.33vw);
}
.judgmentSection .wrapper,
.discountAmountSection .wrapper,
.timingOfDiscountSection .wrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  padding-block: 0 min(15px, 2vw);
  margin-inline: auto;
  border-radius: 23px;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
  will-change: filter;
  background-color: #fef6f2;
}
.notesWrapper .wrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  padding-block: 0 min(15px, 2vw);
  margin-inline: auto;
  border-radius: 23px;
}
.notesWrapper .wrapper p span.star {
  font-size: min(20px, 2.67vw);
  line-height: 1.3;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000 !important;
}
.judgmentSection .wrapper .inner,
.discountAmountSection .wrapper .inner,
.timingOfDiscountSection .wrapper .inner {
  width: 100%;
  height: auto;
  padding: 0 min(30px, 4vw) min(20px, 2.67vw);
  max-width: var(--window-max-size);
  margin-inline: auto;
}
.judgmentSection .wrapper h3,
.discountAmountSection .wrapper h3,
.timingOfDiscountSection .wrapper h3 {
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-size: min(30px, 4vw);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  text-align: center;
  background-color: #fbddcd;
  padding-block: min(26px, 3.47vw);
  border-radius: 23px 23px 0 0;
  margin-bottom: min(25px, 3.33vw);
}
.judgmentSection .wrapper .inner p b,
.discountAmountSection .wrapper .inner p b,
.timingOfDiscountSection .wrapper .inner p b {
  font-size: min(28px, 3.73vw);
  font-weight: 500;
  display: block;
  margin-bottom: 0.3em;
}
.discountAmountSection .wrapper .inner p sup,
.timingOfDiscountSection .wrapper .inner p sup {
  color: #e60012;
}
.notesWrapper .wrapper .inner p {
  width: 100%;
  height: auto;
  margin-inline: auto;
  line-height: 1.56;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
}
.notesWrapper .wrapper .inner p.kome {
  padding-left: 1.2em;
}
.notesWrapper .wrapper .inner p span {
  color: #e60012;
}
.notesWrapper .wrapper .inner p span.underline {
  text-decoration: underline !important;
}
/* faqSection */
.faqSection {
  width: 100%;
  max-width: var(--window-max-size);
  margin-inline: auto;
  height: auto;
  background: var(--clr-bg);
  padding-top: min(50px, 6.67vw);
  background-color: #fef6f2;
  padding-inline: min(31px, 4.13vw);
  padding-bottom: var(--section-padding-bottom);
}
.faqSection .wrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  padding-block: 0 min(15px, 2vw);
  margin-inline: auto;
}
.faqSection .wrapper .accordion {
  width: 100%;
  height: auto;
  max-width: 690px;
  margin-inline: auto;
  border-radius: min(23px, 3.07vw);
  background-color: #fff;
  margin-bottom: min(20px, 2.67vw);
}
.accordion .btnFaq {
  width: 100%;
  height: auto;
  padding: min(20px, 2.67vw) min(30px, 4vw);
  max-width: var(--window-max-size);
  margin-inline: auto;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: min(10px, 1.33vw);
  font-size: min(26px, 3.47vw);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: var(--primary-color);
  text-align: left;
  cursor: pointer;
  position: relative;
}
.accordion .btnFaq::after {
  content: "";
  display: block;
  width: min(24px, 3.2vw);
  height: min(24px, 3.2vw);
  background-image: url("../images/arrow_faq.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);
  transition: transform 0.2s ease-in-out;
}
.accordion .accordion-content .inner {
  width: 100%;
  height: auto;
  padding: 0 min(30px, 4vw);
  max-width: var(--window-max-size);
  margin-inline: auto;
}
.accordion .accordion-content .inner p {
  width: 100%;
  height: auto;
  line-height: 1.56;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  font-size: min(22px, 2.93vw);
  font-weight: 400;
  text-align: left;
}
.accordion .accordion-content .inner p span {
  color: #e60012;
}
.accordion-content {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.5s;

  overflow: hidden;
}

.accordion-content > div {
  overflow: hidden;
}

.open .accordion-content {
  grid-template-rows: 1fr;
  padding-block: min(20px, 2.67vw);
  border-top: 1px solid #d9d9d9;
}
.accordion.open .btnFaq::after {
  transform: rotate(0deg);
}

.applySection2 {
  width: 100%;
  margin-inline: auto;
  height: auto;
  background: var(--clr-bg);
  /* padding-top: min(80px, 10.67vw); */
  background-color: #fef6f2;
  padding-inline: min(31px, 4.13vw);
  padding-bottom: var(--section-padding-bottom);
}

/* freecallSection */
.freecallSection {
  width: 100%;
  margin-inline: auto;
  height: auto;
  padding-top: min(50px, 6.67vw);
  background: var(--clr-bg);
  background-color: #fff;
  padding-inline: min(31px, 4.13vw);
  padding-bottom: var(--section-padding-bottom);
}
.freecallSection .titleWrapper {
  width: 100%;
  height: auto;
  max-width: 690px;
  margin-inline: auto;
}
.freecallSection .titleWrapper h2 {
  width: 100%;
  height: auto;
}

.freecallSection .wrapper {
  width: 100%;
  height: auto;
  max-width: 750px;
  padding-block: 0 min(15px, 2vw);
  margin-inline: auto;
  border-radius: 23px;
  background-color: #fef6f2;
  margin-bottom: min(23px, 3.07vw);
}
.freecallSection .wrapper .inner {
  width: 100%;
  height: auto;
  padding: min(80px, 10.67vw) min(66px, 8.8vw);
  max-width: var(--window-max-size);
  margin-inline: auto;
}
.freecallSection .wrapper .inner .ttl {
  width: 100%;
  height: auto;
  font-size: min(28px, 3.73vw);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  text-align: center;
  margin-bottom: min(30px, 4vw);
}
.freecallSection .wrapper .inner .telWrapper {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: min(72px, 9.6vw) 1fr;
  align-items: center;
  gap: min(18px, 2.4vw);
  margin-bottom: min(20px, 2.67vw);
}
.freecallSection .wrapper .inner .telWrapper img {
  width: 100%;
  height: auto;
  padding-top: 10px;
}
.freecallSection .wrapper .inner .telWrapper a {
  width: 100%;
  height: auto;
  text-decoration: none;
  color: #000;
  font-size: min(64px, 8.53vw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-family: var(--font-family-line-seed);
  color: #000;
  text-align: left;
  display: inline-block;
  vertical-align: middle;
  color: #000;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}
.freecallSection .wrapper .inner .free {
  width: 100%;
  height: auto;
  font-size: min(24px, 3.2vw);
  font-weight: 400;
  line-height: 1.56;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  text-align: center;
  margin-bottom: min(30px, 4vw);
}
.freecallSection .wrapper .inner .ex {
  width: 100%;
  height: auto;
  font-size: min(24px, 3.2vw);
  font-weight: 400;
  line-height: 1.56;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  text-align: center;
}

.freecallSection .exWrapper {
  width: 100%;
  height: auto;
  max-width: 540px;
  padding-block: 0 min(15px, 2vw);
  margin-inline: auto;
  margin-bottom: min(50px, 6.67vw);
}
.freecallSection .exWrapper p {
  width: 100%;
  height: auto;
  font-size: min(22px, 2.93vw);
  font-weight: 400;
  line-height: 1.56;
  letter-spacing: 0;
  font-family: var(--font-family);
  color: #000;
  text-align: left;
}
.freecallSection .exWrapper p img {
  display: inline-block;
  vertical-align: middle;
  width: min(26px, 3.47vw);
  height: auto;
  margin-right: min(5px, 0.67vw);
  padding-bottom: 3px;
}
.freecallSection .exWrapper p a {
  text-decoration: none;
  color: #000;
  font-size: min(25px, 3.33vw);
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0;
  font-family: var(--font-family);
}

/* アニメーション */

/*----------------------------------------------------
  01.keyframes
----------------------------------------------------*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleUp {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce {
  from {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  20%,
  53%,
  to {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -1000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;

    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn2 {
  0% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1, 1, 1);
  }

  72% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1, 1, 1);
  }

  75% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1, 1, 1);
  }

  85% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(0.8, 0.8, 0.8);
  }

  90% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  95% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes fadeInTopRight {
  from {
    opacity: 0;
    transform: translate3d(20%, -20%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-40%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes scaleDown {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.headerTitle {
  opacity: 0;
  transform: translateY(-60px);
  transition:
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}
.loaded .headerTitle {
  opacity: 1;
  transform: translateY(0);
}

/* アニメーション */
.topSection .inner * {
  opacity: 0;
  z-index: 1;
}
.loaded .fadeIn {
  --dur: 0.5s;
  --delay: 0s;
  animation: fadeIn var(--dur) ease-in-out var(--delay) 1 normal forwards;
}
.loaded .fadeInUp {
  --dur: 0.5s;
  --delay: 0s;
  animation: fadeInUp var(--dur) ease-in-out var(--delay) 1 normal forwards;
}
.loaded .scaleDownBounce {
  --dur: 0.5s;
  --delay: 1s;
  animation:
    scaleDown var(--dur) ease var(--delay) 1 normal forwards,
    bounceIn2 3s ease-in 1.5s normal infinite;
}

@keyframes scroll_fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes view_zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes view_fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.viewFadeIn {
  animation: scroll_fadein linear;
  animation-timeline: view();
  animation-range: entry 10% cover 20%;
}
.viewFadeInUp {
  animation: view_fadeInUp linear;
  animation-timeline: view();
  animation-range: entry 0 cover 35%;
}
.viewZoomIn {
  animation: view_zoomIn linear;
  animation-timeline: view();
  animation-range: entry 0 cover 35%;
}