@charset "UTF-8";
html {
  font-size: 62.5%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --black: #434343;
  --main: #61beed;
  --bg_blue: #e9f0f6;
  --white: #ffffff;
}

body {
  background-color: var(--bg_blue);
}

.site-wrapper {
  position: relative;
  font-family: "Noto Sans JP", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  font-weight: 400;
  color: var(--black);
  width: 100vw;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-shadow: 0px 0px 60px rgba(96, 76, 63, 0.15);
}

main {
  flex: 1;
  overflow-x: hidden;
  letter-spacing: 0.1em;
}

img,
video {
  vertical-align: bottom;
  width: 100%;
}

a {
  color: var(--white);
  text-decoration: none;
  display: block;
}

ul,
ol {
  list-style: none;
}

ol {
  counter-reset: number; /*数字をリセット*/
}

section {
  position: relative;
  width: 100%;
  margin: auto;
}

em {
  font-style: normal;
}

/* --------------------------------------------
 *             common
 * -------------------------------------------- */
.en {
  font-family: "Heebo", sans-serif;
}

.serif {
  font-family: "Shippori Mincho", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", serif;
}

.inner {
  position: relative;
  width: 92%;
  margin: 0 auto;
  padding: 10px 0;
}

.note {
  font-size: 1.4rem;
}

.white {
  color: var(--white);
}

.txt-blue {
  color: var(--main);
}

/* --------------------------------------------
 *              cta
 * -------------------------------------------- */
.cta {
  background-color: var(--white);
}

.cta-btn {
  margin-bottom: 10px;
}

.cta_btn_wrap {
  position: relative;
}
.cta_btn_wrap .cta-btn {
  position: relative;
  margin-top: -10px;
  z-index: 10;
}

.cta_btn_sub {
  position: relative;
  z-index: 100;
  padding: 0 30px;
}

.poyopoyo {
  animation: poyopoyo 5s ease-out infinite;
  opacity: 1;
}

@keyframes poyopoyo {
  0%, 60%, 72%, 84% {
    transform: scale(1);
  }
  66%, 78% {
    transform: scale(0.96);
  }
}
/* --------------------------------------------
 *                   insurance
 * -------------------------------------------- */
.insurance {
  width: 100%;
  position: relative;
  background: var(--Linear, linear-gradient(94deg, #54a8e5 0%, #6ed5f6 100%));
  color: var(--white);
  padding: 20px 0;
}

.insurance-inner {
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.insurance-inner p {
  font-size: 17px;
  letter-spacing: 0;
}
.insurance-inner p:last-of-type {
  color: var(--main);
  padding: 5px 10px;
  margin: 10px 10px 0;
  background-color: var(--white);
  border-radius: 30px;
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------
 *              fv
 * -------------------------------------------- */
.fv-img {
  position: relative;
  width: 100%;
  z-index: 1;
}

/* --------------------------------------------
 *                   sec2
 * -------------------------------------------- */
.sec2 {
  background-color: var(--bg_blue);
}

/* --------------------------------------------
 *                   swiper
 * -------------------------------------------- */
.sec2-swiper {
  position: relative;
}

.swiper {
  position: relative;
  overflow: visible;
}

.swiper-wrapper {
  position: relative;
  /* wrapperのサイズを調整 */
  width: 100%;
  height: auto;
  counter-reset: number; /*数字をリセット*/
}

.swiper-slide {
  position: relative;
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  border: 1px solid var(--main-color);
  border-radius: 10px;
  width: 100%;
  height: auto;
  margin-right: 20px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
}

.swiper-button-prev,
.swiper-button-next {
  display: grid;
  place-content: center;
  width: 45px;
  height: 45px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.swiper-button-prev {
  left: -15px;
}

.swiper-button-next {
  right: -15px;
}

.swiper-button-prev::before,
.swiper-button-next::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background: var(--Linear, linear-gradient(94deg, #54a8e5 0%, #6ed5f6 100%));
  border-radius: 4px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  border: solid var(--white);
  border-width: 3px 3px 0 0;
}

.swiper-button-next::after {
  margin-right: 8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.swiper-button-prev::after {
  margin-left: 8px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.swiper-pagination {
  position: relative;
  margin-top: 20px;
}

.swiper-pagination-bullet-active {
  background-color: var(--main);
}

/* --------------------------------------------
 *                   compare
 * -------------------------------------------- */
.compare {
  background-image: url(../img/comparison-bg.png); /* 背景画像指定 */
  background-size: cover; /* 画像のサイズ指定 */
  background-repeat: no-repeat;
  background-position: center;
}
.compare .inner {
  padding: 40px 0;
}
.compare .compare-chart {
  margin: 0 auto;
  max-width: 600px;
}

/* --------------------------------------------
 *                   flow
 * -------------------------------------------- */
.flow {
  background-color: var(--bg_blue);
}

.flowList__item {
  position: relative;
  margin: 25px 0px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  border-radius: 4px;
  background: var(--white, #fff);
  box-shadow: 0px 0px 9px 2px rgba(67, 199, 243, 0.2);
}
.flowList__item:last-of-type::before {
  display: none;
}
.flowList__item--body {
  width: 100%;
}
.flowList__item--img {
  width: 100%;
}

.flowList-h {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--main);
}
.flowList-h .flowList-h-num {
  background: var(--Linear, linear-gradient(94deg, #54a8e5 0%, #6ed5f6 100%));
  color: var(--white);
  display: inline-block;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-right: 20px;
  border-radius: 4px;
}

.flowList-txt {
  font-size: 1.4rem;
  line-height: 2;
  margin-bottom: 20px;
}

/* --------------------------------------------
 *                   faq
 * -------------------------------------------- */
.faq {
  background-color: var(--bg_blue);
  padding-bottom: 40px;
}

.accordion {
  max-width: 800px;
  margin: 0 auto;
}

.accordion__item {
  border-radius: 4px;
  background: #fff;
  margin-top: 10px;
  cursor: pointer;
}
.accordion__item .accordion__title {
  position: relative;
  padding: 15px 60px 15px 20px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  background: var(--Linear, linear-gradient(94deg, #54a8e5 0%, #6ed5f6 100%));
  color: var(--white);
}
.accordion__item .accordion__title::after {
  border-right: solid 2px var(--white);
  border-top: solid 2px var(--white);
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  right: 20px;
  top: 38%;
  transform: rotate(135deg);
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
  width: 8px;
}

.accordion__item.is-open .accordion__title::after {
  transform: rotate(-45deg);
}

.accordion__content {
  padding: 20px;
  display: none;
  cursor: pointer;
}

.accordion__content.is-open {
  display: block;
}

/* --------------------------------------------
 *                   cllinic-detail
 * -------------------------------------------- */
.clinic {
  background-color: var(--white);
}

.cllinic-detail {
  background-color: var(--bg_blue);
  border-radius: 4px;
  padding: 60px 0;
  margin-top: 50px;
}
.cllinic-detail .clinic-detail_em {
  position: absolute;
  top: 25px;
  width: 90%;
  left: 5%;
  text-align: center;
}
.cllinic-detail .cllinic-detail_inner {
  width: 90%;
  margin: 0 auto;
}
.cllinic-detail .cllinic-detail_access {
  margin: 20px 0;
}
.cllinic-detail .cllinic-detail_access .cllinic-detail_access_ttl {
  text-align: center;
  font-size: 2.4rem;
  color: var(--main);
}
.cllinic-detail .cllinic-detail_access .cllinic-detail_access_txt {
  font-size: 1.4rem;
  margin-bottom: 1em;
}
.cllinic-detail .cllinic-detail_access iframe {
  width: 100%;
  height: 200px;
}

/* --------------------------------------------
 *                medical
 * -------------------------------------------- */
.medical {
  background-color: var(--white);
}

.medicalList {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 20px;
}
.medicalList__item {
  position: relative;
  overflow: hidden;
  max-width: 400px;
  width: 48.5%;
  height: 200px;
  margin-top: 20px;
}
.medicalList__item::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(12, 12, 12, 0.4);
  content: "";
}
.medicalList__item--img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.medicalList__item--img img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  width: auto;
  height: 100%;
}
.medicalList__item--txt {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  padding: 24px 7.5%;
  color: var(--white);
  letter-spacing: 0;
}
.medicalList__item--txt p {
  font-size: 14px;
}
.medicalList__item--txt .medicalList-ttl {
  font-size: 20px;
  margin-bottom: 10px;
}

/* --------------------------------------------
 *                    cta-bottom
 * -------------------------------------------- */
.cta-bottom {
  width: 100%;
  max-width: 500px;
  padding: 5px 0 0;
  position: fixed;
  bottom: 0;
  z-index: 100;
}
.cta-bottom .cta-bottom_btn {
  margin: 0 auto;
  width: 95%;
}

.cta-bottom_btn_sub {
  position: absolute;
  top: -35px;
  width: 70%;
  left: 15%;
}

footer {
  background: var(--Linear, linear-gradient(94deg, #54a8e5 0%, #6ed5f6 100%));
  color: var(--white);
  text-align: center;
  padding: 10px 0 160px;
  font-size: 14px;
}/*# sourceMappingURL=index.css.map */