@charset "utf-8";

/************************************
 * Reset
************************************/
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  line-height: 1.5;
}
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}
a:not([class]) {
  color: currentColor;
}
img,
picture {
  max-width: 100%;
  display: block;
}
input,
button,
textarea,
select {
  font: inherit;
}
textarea:not([rows]) {
  min-height: 10em;
}
:target {
  scroll-margin-block: 5ex;
}
em {
  font-style: normal;
}

/************************************
 * Base
 ************************************/
:root {
  --base-width: 375; /* 基準幅 */
  --max-width: 640; /* 最大幅 */
  --base-font-size: 10; /* 基準フォントサイズ (10px) */
  /* 最大横幅サイズ時の最大フォントサイズ */
  --max-font-size: calc((var(--base-font-size) / var(--base-width)) * var(--max-width) * 1px);
}

html {
  /** 以下指定で、横幅が --base-width 時に 1rem が 10pxとなる */
  font-size: min(calc((var(--base-font-size) / var(--base-width)) * 100vw), var(--max-font-size));
  scroll-behavior: smooth;
}

body {
  background: #fff;
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  font-style: normal;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  -webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.4rem;
}
img,
video {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.6;
    transition: opacity 0.2s;
  }
  button:hover {
    cursor: pointer;
  }
  label:hover {
    cursor: pointer;
  }
}
input,
textarea,
select,
button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  font-size: 1.4rem;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background-color: #fff;
  border: 1px solid #959595;
  border-radius: 0.7rem;
  padding: .6rem 1rem;
  background-image: url(../img/icon_arrow_down.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - 0.5rem) center;
  background-size: 1rem;
  font-size: 1.2rem;
  color: #000;
}
select:disabled {
  background-color: #efefef;
  border: 1px solid #c4c4c4;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
}

button {
  border: none;
  border-radius: 0.7rem;
  cursor: pointer;
}

/************************************
 * Utility
************************************/
.u-fs-1 {
  font-size: 1rem !important;
}
.u-fs-2 {
  font-size: 2rem !important;
}
.u-color-red {
  color: #2fb8ff !important;
}
.u-mr-1 {
  margin-right: 1rem !important;
}
.u-mb-1 {
  margin-bottom: 1rem !important;
}
.u-mb-2 {
  margin-bottom: 2rem !important;
}
.u-mb-3 {
  margin-bottom: 3rem !important;
}
.u-mb-4 {
  margin-bottom: 4rem !important;
}
.u-mb-5 {
  margin-bottom: 5rem !important;
}

/************************************
 * Page
************************************/
.page-wrap {
  width: 100%;
  max-width: calc(var(--max-width) * 1px);
  margin: 0 auto;
  overflow-x: hidden;
  border-top: 1rem solid #3D4355;
}
.page-footer {
  padding: 4rem 2rem;
  text-align: center;
  font-size: .85rem;
}
.page-footer a {
  margin: 0 0.5rem;
  color: #6A6A6A;
}
/******** Nav ********/
.csl__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: flex-end;
  column-gap: .5rem;
  margin-bottom: 1rem;
  padding: 1.5rem 1.2rem 0 1.2rem;
}
.csl__nav-item {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  column-gap: .5rem;
}
.csl__nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.csl__nav-inner img {
  width: 2rem;
  height: auto;
  margin-bottom: .3rem;
}
.csl__nav-inner span {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  border: 1px solid transparent;
  border-radius: 100%;
  text-align: center;
  background-color: #2fb8ff;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  opacity: .3;
}
.csl__nav-item.coupon .csl__nav-inner span {
  background-color: #effbff;
  border-color: #2fb8ff;
  color: #2fb8ff;
  opacity: 1 !important;
}
.csl__nav-item:not(.csl__nav-item:first-child):before {
  content: '';
  display: block;
  width: .7rem;
  height: 1px;
  background-color: #2fb8ff;
  opacity: .3;
  transform: translateY(-.8rem);
}
.csl__nav-item.is-active .csl__nav-inner span {
  border: 1px solid transparent;
  background-color: #2fb8ff;
  color: #fff;
  opacity: 1 !important
}
.csl__nav-item.is-active:before {
  opacity: 1 !important;
}
/******** / Nav ********/
/******** Coupon ********/
.csl__coupon-notice {
  text-align: center;
}
.csl__coupon-notice-inner {
  display: inline-block;
  background-color: #FFFFE6;
  text-align: center;
  padding: 0 6.5rem;
  margin: 0 auto 1rem auto;
  font-size: 1.1rem;
}
.csl__coupon-notice-num {
  color: #FF3866;
  font-size: 1.3rem;
  font-weight: bold;
}
.csl__coupon-notice-complete {
  font-weight: bold;
  color: #FF3866;
  font-size: 1.5rem;
}
/******** / Coupon ********/
/******** Carousel ********/
.csl__inner {
  padding: 3.5rem;
  background-color: #effbff;
}
.csl__box {
  margin-bottom: 1.5rem;
  border-radius: 0.7rem;
}
.csl__head {
  width: 100%;
  padding-bottom: .7rem;
  margin-bottom: 2rem;
  border-bottom: dotted 4px #2fb8ff;
  display: flex;
  align-items: flex-start;
  -moz-column-gap: 2%;
  column-gap: 2%;
  line-height: 1.3;
}
.csl__head h2 {
  font-weight: normal;
  line-height: 1.4;
  font-size: 1.4rem;
  letter-spacing: 0;
}
.csl__head-number {
  width: 12%;
}
.csl__foot-btn-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5%;
}
.csl__foot-btn-box .csl__prev-btn,
.csl__foot-btn-box div {
  width: 22%;
}
.csl__foot-btn-box .csl__next-btn {
  width: 100%;
}
.csl__btn-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.csl__next-btn {
  display: block;
  padding: 1rem 1rem;
  background-color: #109ed2;
  color: #fff;
  line-height: 1.3;
  transition: all 0.2s;
  font-size: 1.5rem;
}
.csl__next-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
@media (hover: hover) {
  .csl__next-btn:hover:not(.csl__next-btn:disabled) {
    opacity: .6;
    transition: all 0.2s;
  }
}
.csl__btn-wrap.column-one .csl__select-btn {
  width: 100%;
}
.csl__btn-wrap.column-two .csl__select-btn {
  width: 48.5%;
}
.csl__select-btn {
  padding: 1rem;
  margin-bottom: 3%;
  background-color: #109ed2;
  border-radius: .7rem;
  color: #fff;
  line-height: 1.3;
  transition: all 0.2s;
  text-align: center;
  font-size: 1.5rem;
}
.csl__select-btn.q2 {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  height: 5.5rem;
  padding: 0 1rem;
}
.csl__select-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
@media (hover: hover) {
  .csl__select-btn:hover:not(.csl__select-btn:disabled) {
    opacity: .6;
    transition: all 0.2s;
  }
}
.csl__select-btn input {
  display: none;
}
.csl__prev-btn {
  padding: .5rem .5rem;
  width: 20%;
  background-color: #CCCCCC;
  font-size: 1.4rem;
  color: #000000;
}
@media (hover: hover) {
  .csl__prev-btn:hover {
    opacity: .6;
    transition: all 0.2s;
  }
}
/******** / Carousel ********/
/******** Part ********/
.part-list__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 3%;
  margin-bottom: 3rem;
}
.part-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  width: calc((100% - 6%) / 2);
  height: 10rem;
  margin-bottom: 3%;
  border-radius: 0.7rem;
  line-height: 1.3;
  text-align: center;
  background-color: #70c9eb;
  color: #fff;
}
.part-list__item input {
  display: none;
}
.part-list__item:has(input:checked) {
  border: #28abdc 3px solid;
}

.q2{
  width: 100%!important;
  height: 5rem!important;
}
.price-list__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #000;
}
.price-list__footer-item {
  width: 50%;
  text-align: center;
}
.price-list__footer-item div {
  padding: .5rem .1rem;
  font-size: 1.2rem;
}
/******** / Part ********/
/******** 入力項目 ********/
.form__wrap {
  padding: 2.2rem 2.2rem;
  border-radius: .5rem;
  background-color: #fff;
  margin-bottom: 3rem;
}
.form__item {
  margin-bottom: 2.5rem;
  margin-top: 2.5rem;
}
.form__select-month {
  width: 35%;
}
.form__select-day {
  width: 35%;
}
.form__select-clinic {
  width: 48.7%;
}
.form__sub-title {
  margin-bottom: .7rem;
  margin-left: -1rem;
  font-size: 1.3rem;
}
.form__icon-require {
  display: inline-block;
  padding: .05rem .5rem;
  background-color: #CC002F;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  font-size: .8rem;
  vertical-align: text-top;
}
.secret {
  margin-top:10px;
  text-align:center;
  font-size:11px;
}
/******** /入力項目 ********/
/******** 最終画面 ********/
.last-screen {
  padding: 1.5rem;
}
/******** / 最終画面 ********/
/******** CTA ********/
.cta-btn {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
.cta-btn:after {
  display: block;
  width: 100%;
  height: 5.8rem;
  content: '';
  border-radius: 10rem;
  background-color: #ff417b;
  transform: translate3d(0,0,0);
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}
.cta-btn:after {
  animation: ripples 2s ease-out infinite;
}
/******** /CTA ********/
/******** フッター固定 ********/
.fixed-btn__wrap {
  width: 100%;
  padding: .5rem 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
}
.fixed-btn__inner {
  width: 100%;
  max-width: calc(var(--max-width) * 1px);
  margin: 0 auto;
}
.fixed-btn__btn {
  margin-bottom: .5rem;
}
.fixed-btn__text {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}
/******** /フッター固定 ********/
/************************************
 * JS
************************************/
/******** Carousel ********/
.js-csl__item {
  display: none;
  animation: fadeOut 2.5s ease-out forwards;
}

.js-csl__item.is-active {
  display: block;
  animation: fadeIn.5s ease-out forwards;
}
/******** / Carousel ********/

/******** Modal ********/
.js-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: none;
}
.js-modal__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100dvh;
  background-color: rgb(0, 0, 0, .85);
  padding: 2rem 1rem;
}
.js-modal__content {
  width: 100%;
  max-width: calc(var(--max-width) * 1px);
  border-radius: 1rem;
  position: relative;
  -webkit-animation: zoomIn 1s cubic-bezier(0.79, 0, 0.31, 1) forwards;
  animation: zoomIn 1s cubic-bezier(0.79, 0, 0.31, 1) forwards;
}
.js-modal__content .js-modal__main-img {
  border-radius: 1rem;
}
.js-modal__close-btn {
  cursor: pointer;
}
.js-modal__close-btn-top {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 3.5rem;
  background-color: #FFFFFF;
  position: absolute;
  top: 0rem;
  right: 0rem;
  color: #5D5D5D;
  font-size: 2.3rem;
  cursor: pointer;
  font-weight: bold;
}
.js-modal__footer {
  width: 100%;
  position: absolute;
  top: 42%;
  left: 0;
}
.js-modal__footer-btn-reject {
  display: block;
  max-width: 500px;
  margin: 0 auto;
}
/* オープニングモーダル */
.js-first-modal .js-modal__content {
  width: 100%;
  max-width: calc(var(--max-width) * 1px);
  border-radius: 1rem;
  position: relative;
  background: #fff url(../img/popup__bg.webp) 50% 0/100% no-repeat;
  -webkit-animation: zoomIn 1s cubic-bezier(0.79, 0, 0.31, 1) forwards;
  animation: zoomIn 1s cubic-bezier(0.79, 0, 0.31, 1) forwards;
}
/* 診断結果モーダル */
.js-result-modal {
  display: none;
}
/******** / Modal ********/
/************************************
 * Animation
************************************/
@keyframes zoomIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ripples {
  0% {
    transform: scale(.95);
    opacity:1;
  }
  90% {
    opacity: .1;
  }
  to {
    transform: scale(1.1,1.4);
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* カウントダウン */
.countdown_wrap{
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
}
.countdown_innner{
  font-size: 5rem;
  text-align: center;
  letter-spacing: .5rem;
}