:root {
  --blue: #00A4B1;
  --black: #2D3944;
  --p-blue: #E2EFF0;
  --shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
  --ff-s: "Shippori Mincho", serif;
  --ff-en: "Cormorant SC", serif;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  /* scroll-behavior: smooth; */
  font-size: 62.5%;
}
body {
  margin: 0;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  color: #313131;

}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
  font-size: 1.6rem;
}
a {
  text-decoration: none;
  color: unset;
}
body {
  margin: 0;
}
main {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}
img {
  width: 100%;
  display: block;
}
h2 {
  margin: 0;
  font-size: 3rem;
}
h3 {
  margin: 0;
}

.btn {
  width: 100%;
  margin: 0 auto;
  animation: pulseEffect 1s ease-in-out infinite;
}
.cta-sub {
  margin-bottom: 1rem;
}
@keyframes pulseEffect {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.inner {
  padding: 5rem 5vw;
}
.txt {
  line-height: 2;
}
.txt b {
  color: var(--blue);
}
.tc {
  text-align: center;
}
.txt-14 {
  font-size: 1.4rem;
}
.hdg-area {
  text-align: center;
  margin-bottom: 3rem;
}
.h-en {
  font-family: var(--ff-en);
  font-weight: 600;
  color: var(--blue);
}
/*===================================================

SP FV

====================================================*/

.fv-sub {
  background: #F7F7F7;
}
#fv .inner {
  padding-top: 20px;
}
.cta-txt {
  font-size: 12px;
  line-height: 1.4;
}
#fv .cta-txt {
  margin-bottom: 30px;
}

/*===================================================

SP SOLUTION

====================================================*/

/*===================================================

SP ABOUT

====================================================*/
#about {
  background: url(/wp-content/uploads/about-bk-1.jpg);
  background-size: auto;
  background-size: cover;
}
.about-hdg {
  padding: 0 4vw 30px;
}
.about-main {
  margin-top: 2rem;
}
.about-copy {
  font-size: 3rem;
  font-family: var(--ff-s);
  text-align: center;
  margin-bottom: 3rem;
  font-weight: 600;
}
.about-copy span {
  font-family: var(--ff-s);
  font-size: 3rem;
  background: transparent linear-gradient(96deg, #00A4B1 0%, #3DBCC6 100%) 0% 0% no-repeat padding-box;
  color: #fff;
  padding: 0 0.5rem;
  line-height: 1.7;
  font-weight: 600;
}
.about-goal {
  font-size: 3rem;
  font-weight: bold;
  color: var(--blue);
  text-decoration: underline;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}
.about-goal-sub {
  color: var(--blue);
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/*===================================================

SP BEFORE AFTER

====================================================*/
#ba {
  background: url(/wp-content/uploads/ba-bk.jpg)
}
#ba .inner {
  padding-bottom: 20px;
}

/* swiper start */

#ba .ba-item {
  height: auto;
  display: flex;
  align-items: center;
  padding: 2rem;
  background: #fff;
}
.swiper-navigation-icon {
  display: none;
}
.swiper-button-next img,
.swiper-button-prev img {
  width: 40px;
}

/* swiper end*/
.ba-list {
  margin-bottom: 2rem;
}

#ba .txt-14 {
  text-align: center;
  padding-bottom: 30px;
}


/*===================================================

SP VOICE

====================================================*/
#voice {
  background: url(/wp-content/uploads/voice-bk.jpg);
  background-size: cover;
}
.voice-hdg {
  padding: 3rem 4vw 2rem;
}
#voice .voice-item {
  height: auto;
  display: flex;
  align-items: center;
  padding: 2rem;
  background: #fff;
}

#voice .cta {
  padding: 4rem 4vw 5rem;
}
/*===================================================

SP DEISGN

====================================================*/
.design-hdg {
  margin-bottom: 3rem;
}
#design {
  background: url(/wp-content/uploads/design-bk.jpg);
  background-size: cover;
}
/*===================================================

SP REASON

====================================================*/
#reason {
  background: #EBEBEB;
}
#reason .inner {
  padding: 5rem 3vw;
}
.reason-hdg {
  width: 80%;
  margin: 0 auto 40px;
}

.reason-sub {
  text-align: center;
  color: var(--blue);
  font-family: var(--ff-s);
  font-size: 2rem;
  position: relative;
  z-index: 2;
  font-weight: 600;
}
.reason-h3 {
  text-align: center;
  font-family: var(--ff-s);
  font-size: 3.5rem;
  margin: 0 0 20px;
  position: relative;
  z-index: 2;
  line-height: 1.1;
}
.reason-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.reason-main {
  background: #fff;
  padding-top: 4rem;
  position: relative;
}
.reaosn-num {
  width: 115px;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
}
.reason-main .txt {
  padding: 0 8vw 30px;
}
.reason-table {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 1rem;
}
/*===================================================

SP MESSAGE

====================================================*/
.message-main {
  background: url(/wp-content/uploads/message-bk.jpg);
  background-size: cover;
}
.message-btm {
  padding-bottom: 50px;
}


/*===================================================

SP PLAN
====================================================*/
#plan {
  background: url(/wp-content/uploads/plan-bk.jpg);
  background-size: cover;
}
.hdg-en {
  font-family: var(--ff-en);
  font-size: 1.6rem;
  color: var(--blue);
  text-align: center;
}
.plan-h2 {
  font-family: var(--ff-s);
  font-weight: 600;
  text-align: center;
  font-size: 3rem;
}
.plan-hdg {
  margin-bottom: 2rem;
}
.plan-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.plan-sub {
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  font-family: var(--ff-s);
  padding: 1rem 0;
  background: transparent linear-gradient(97deg, #00A4B1 0%, #3DBCC6 100%) 0% 0% no-repeat padding-box;
}

.plan-main {
  background: #fff;
  padding: 1rem 4vw 3rem;
}
.plan-name p {
  margin: 0;
  text-align: center;
  font-size: 2.6rem;
  font-family: var(--ff-s);
  font-weight: 600;
}
.plan-sub-name {
  font-family: var(--ff-s);
  text-align: center;
  font-size: 1.6rem;
  border-bottom: 1px solid;
  padding-bottom: 1rem;
}
.plan-num {
  font-size: 8rem;
  font-weight: bold;
  color: #FC7266;
  font-family:
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "MS PMincho",
    serif;
  line-height: 1;
}
.plan-price-sub {
  font-family:
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "MS PMincho",
    serif;
  color: #FC7266;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}
.plan-price {
  display: flex;
  align-items: end;
  justify-content: center;
  padding-top: 1rem;
}
.plan-yen {
  font-size: 3.9rem;
  line-height: 1;
}
.plan-tax {
  line-height: 1;
}
.plan-line {
  margin: 1rem auto 3rem;
}
/*===================================================

SP FLOW

====================================================*/
#flow {
  background: #E2EFF0;
}
#flow .inner {
  padding-bottom: 0;
}
.flow-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-bottom: 5rem;
}
.flow-main {
  background: #fff;
  padding: 2rem 7vw;
  width: calc(100% - 8vw);
  margin: -3rem auto 0;
  position: relative;
}
.flow-h3 {
  color: #00A4B1;
  font-size: 2.1rem;
  font-family: var(--ff-s);
  font-weight: normal;
  margin: 0 0 1rem;
  text-align: center;
  font-weight: 600;
}
/*===================================================

SP FAQ

====================================================*/
#faq {
  background: url(/wp-content/uploads/faq-bk.jpg);
  background-size: cover;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.faq-top {
  background: #3DBCC6;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 1.4rem 1rem;
}
.faq-q {
  font-family: var(--ff-en);
  font-size: 4rem;
  margin-right: 1rem;
}
.faq-q-txt {
  font-size: 2rem;
  font-weight: 600;
  font-family: var(--ff-s);
  line-height: 1.3;
  margin: 0;
}
.faq-a {
  background: var(--p-blue);
  padding: 4vw;
  line-height: 1.8;
}
.faq-a a {
  text-decoration: underline;
}
/*===================================================

SP POPUP

====================================================*/
.cta-btn {
  width: 100%;
  max-width: 320px;
  padding: 18px 24px;
  border: none;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.reservation-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.reservation-modal.is-active {
  display: block;
}

.reservation-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.reservation-modal__content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% - 40px);
  max-width: 345px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 8px;
  padding: 28px 18px 32px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.reservation-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  font-weight: 200;
  color: #555;
  cursor: pointer;
}
.reservation-modal__close:hover {
  background-color: unset;
}

.reservation-img {
  width: 80%;
  margin: 0 auto 2rem;
}

.reservation-modal__title {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.reservation-modal__buttons {
  display: grid;
}

/*===================================================

SP END

====================================================*/

.end-main {
  background: #F7F7F7;
  padding: 4vw;
}
img.end-txt {
  margin: 2rem auto 5rem;
}
#end .cta {
  padding-bottom: 5rem;
}
/*===================================================

SP ACCSESS

====================================================*/
#info {
  background: #EDEDED;
  padding-bottom: 5rem;
}
.info-img {
  width: 100%;
  margin: 0;
}
#info .hdg-area {
  padding: 5rem 4vw 0;
}
.shop-wrap {
  width: calc(100% - 8vw);
  background: #fff;
  padding: 4vw;
  margin: -2rem auto 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.shop-h2 {
  text-align: center;
  color: var(--blue);
  font-family: var(--ff-s);
  font-weight: 600;
  font-size: 2.5rem;
  border-bottom: 1px solid;
  display: inline-block;
  margin-bottom: 2rem;
}
.shop-info {
  text-align: center;
}
.shop-label {
  font-size: 1.5rem;
  background: var(--p-blue);
  font-weight: normal;
}
.shop-value {
  font-size: 1.5rem;
  margin: 1rem 0;
}
iframe {
  margin-top: 3rem;
}
small {
  color: #fff;
  text-align: center;
  font-weight: bold;
}
footer {
  background: var(--blue);
  text-align: center;
  padding: 1rem;
}
/*===================================================

SP 375px〜

====================================================*/
@media (max-width: 375px) {
  .txt {
    font-size: 14px;
  }
  h2 {
    font-size: 2.4rem;
  }
  .inner {
    padding: 3rem 4vw;
  }


  .about-copy span {
    font-size: 2.4rem;
  }
  .about-copy {
    font-size: 2.4rem;
  }

  .about-goal {
    font-size: 2.5rem;
  }
  .about-goal-sub {
    font-size: 2rem;
  }
  .about-copy span {
    font-size: 2.4rem;
  }
  .about-copy {
    font-size: 2.4rem;
  }
  .inner {
    padding: 3rem 4vw;
  }
  .about-goal {
    font-size: 2.5rem;
  }
  .about-goal-sub {
    font-size: 2rem;
  }
  .reason-h3 {
    font-size: 3rem;
  }
  .reason-sub {
    font-size: 1.6rem;
  }
  .reaosn-num {
    width: 80px;
    top: -30px;
  }
  .plan-name p {
    font-size: 2rem;
  }
  .plan-sub {
    font-size: 1.8rem;
    padding: 0.7rem;
  }
  .plan-num {
    font-size: 6rem;
  }
  .plan-yen {
    font-size: 3rem;
  }
  .plan-tax {
    font-size: 1.1rem;
  }
  #flow .hdg-area {
    margin: 0;
  }
  .flow-h3 {
    font-size: 2rem;
  }
  .plan-h2 {
    font-size: 2.4rem;
  }
  .hdg-en {
    font-size: 1.4rem;
  }
  .faq-q-txt {
    font-size: 1.8rem;
  }
  .faq-q {
    font-size: 3rem;
  }
  .faq-a {
    font-size: 1.4rem;
  }
  .end-txt {
    margin-bottom: 2rem;
  }
}
/*===================================================

PC

====================================================*/
@media (min-width: 768px) {
  h2 {
    font-size: 5rem;
  }
  .txt {
    font-size: 2.6rem;
  }
  .txt-14 {
    font-size: 2.3rem;
  }
  .h-en {
    font-size: 2.5rem;
  }

  .inner {
    padding: 10rem 5vw;
  }

  .cta-txt {
    font-size: 2rem;
    text-align: center;
  }
  .swiper-button-next img,
  .swiper-button-prev img {
    width: 100px;
  }

  .swiper-horizontal {
    &.swiper-rtl .swiper-button-prev,
    &.swiper-rtl~.swiper-button-prev,
    &~.swiper-button-next,
    & .swiper-button-next {
      left: auto;
      right: var(--swiper-navigation-sides-offset, 50px);
    }
  }
  .about-copy span {
    font-size: 6rem;
  }

  .about-copy {
    font-size: 6rem;
  }
  .about-goal {
    font-size: 6rem;
  }
  .about-goal-sub {
    font-size: 4rem;
  }
  .reason-h3 {
    font-size: 7rem;
  }
  .reason-sub {
    font-size: 4rem;
  }
  .reason-main .txt {
    padding: 0 60px 50px;
  }
  .plan-h2 {
    font-size: 5rem;
  }
  .hdg-en {
    font-size: 3rem;
  }
  .plan-sub {
    font-size: 3rem;
  }
  .plan-name p {
    font-size: 5rem;
    line-height: 1.2;
  }
  .plan-sub-name {
    font-size: 3rem;
  }
  .plan-num {
    font-size: 12rem;
  }
  .plan-yen {
    font-size: 5rem;
  }
  .plan-tax {
    font-size: 2rem;
  }
  .flow-list {
    gap: 5rem;
  }
  .flow-h3 {
    font-size: 4rem;
  }
  .flow-main {
    padding: 3vw;
  }
  .faq-top {
    padding: 2rem;
  }
  .faq-q-txt {
    font-size: 3rem;
  }
  .faq-a {
    padding: 2vw;
    font-size: 2.6rem;
  }
  .end-txt {
    width: 80%;
  }
  .end-txt {
    width: 80%;
  }
  .shop-h2 {
    font-size: 4rem;
  }
  .shop-label {
    font-size: 2rem;
  }
  .shop-value {
    font-size: 2rem;
  }
  iframe {
    height: 300px;
  }

}