@charset "UTF-8";
/* ===================================================================
  CSS information
  file name  :  style.css
=================================================================== */

/* --------------------------
  common
-------------------------- */
:root {
  --noto-sans: "Noto Sans JP", "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  --zenkaku: "Zen Kaku Gothic New",  "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  --navy: #485774;
  --lightblue: #05afb9;
  --beige: #f7f4f1;
  --yellow: #fff000;
}
body {
  background-color: #f2f2f2;
  font-family: var(--noto-sans);
  font-size: min(2.56vw, 20px);
  color:#000;
}
body.fixed {
  max-height: 100vh;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 10px 2px #d6d6d6;
}
.inner {
  width: 89.74%;
  max-width: 700px;
  margin: 0 auto;
}
.ttl-sub {
  display: block;
}

/* --------------------------
  cv
-------------------------- */
.cv-01 {
  background: url(../../assets/images/cv01_bg.png?v1) no-repeat center top / 100% auto;
}

.cv-02 {
  background: url(../../assets/images/cta02_bg.png?v1) no-repeat center bottom / 100% auto;
  margin-top: -2.56%;
}

a.cv_btn {
  display: block;
  position: relative;
  width: min(calc(700/780 * 100vw), 700px);
  margin: auto;
  filter: drop-shadow(0 min(calc(13/750 * 100vw), 13px) min(calc(13/750 * 100vw), 13px) rgba(0, 0, 0, 0.2));
  animation: ani-down 2.5s infinite;
}
a.cv_btn .cv_btn_icon {
  position: absolute;
  width: min(calc(89/780 * 100vw), 89px);
  right: -3.33%;
  top: 44%;
  transform: translateY(-50%);
}

/* --------------------------
  fv
-------------------------- */
.fv {
  background: url(../../assets/images/fv_bg.png?v2) no-repeat center top / 100%, #e2e5ea;
}

.fv .off {
  margin-top: min(calc(343/780 * 100vw), 343px);
  transform: translateY(-25px);
}

.off img {
  width: 95%;
}

.fv .fv_pricearea {
  position: relative;
  background: linear-gradient(45deg, #b3e0f4 0%,#d4fbe1 100%);
  padding-bottom: min(calc(55/780 * 100vw), 55px);
}

.fv .fv_pkg {
  position: absolute;
  top: -5.5%;
}

.fv_pricearea p:has(.fv_price_img) {
  padding-top: 40px;
}

.fv_price_img {
  display: block;
  width: 92%;
  height: auto;
  margin: 0 auto;
}


.fv img[src*="fv_btn_title"] {
  display: block;
  width: 85%;
  height: auto;
  margin: 55px auto 15px;
}

/* --------------------------
  nayami
-------------------------- */
.nayami {
  background :url(../../assets/images/nayami_bg.png) no-repeat center top / 100%;
  position: relative;
}

.nayami_icon {
  display: block;
  position: absolute;
  bottom: -7.2%;
}

/* --------------------------
  about
-------------------------- */
.about {
  background :url(../../assets/images/about_bg.png) no-repeat center top / 100%;
}

.about img[src*="about_05"] {
  display: block;
  width: 95%;
  height: auto;
  margin: 0 auto;
  padding-bottom: 5px;
}

/* --------------------------
  graph
-------------------------- */
.graph {
  background :url(../../assets/images/graph_bg.png) no-repeat center top / 100%;
}

/* --------------------------
  kaizen
-------------------------- */
.kaizen {
  background :url(../../assets/images/kaizen_bg.png) repeat-y center top / 100%;
  position: relative;
  padding-bottom: min(calc(210/780 * 100vw), 210px);
}

.kaizen_text {
  position: absolute;
  bottom: -14.3%;
}

/* --------------------------
  medicine
-------------------------- */
.medicine {
  background: url(../../assets/images/medicine_bg.png?v1) no-repeat center top / 100%;
  background-position: center min(calc(-44 / 780 * 100vw), -44px);
  padding-bottom: min(calc(119/780 * 100vw), 119px);
}

.medicine .inner {
  position: relative;
  background: #fff;
  border-radius:  min(calc(20/780 * 100vw), 20px);
  margin-bottom:  min(calc(56/780 * 100vw), 56px);
}
.medicine .inner.pkg03 {
  margin-bottom: 0;
}
.medicine .medicine_pkg {
  position: absolute;
}

.medicine .medicine_pkg.pkg01 {
  top:  min(calc(20/780 * 100vw), 20px);
}

.medicine .medicine_pkg.pkg02 {
  top: -3.1%;
}

.medicine .medicine_pkg.pkg03 {
  top:  min(calc(24/780 * 100vw), 24px);
}

.tab-area {
  height: min(calc(1255 / 780 * 100vw), 1255px);
}
.tab-area.inner {
  background-color: inherit;
  margin-bottom: 0;
}
.tab-area-ttl {
  font-size: min(4.36vw, 34px);
  text-align: center;
  margin-bottom: 1.09em;
}
.tab-list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: end;
  grid-gap: min(calc(5/780 * 100vw), 5px);
}
.tab-list li {
  text-align: center;
}
.tab-list li a {
  display: block;
  height: min(calc(80/780 * 100vw), 80px);
  transition: .3s;
}

.tab-list li.tab-list01 a {
  background: url(../../assets/images/baiagura_tab_off.png) no-repeat center bottom / 100%;
}

.tab-list li.tab-list02 a {
  background: url(../../assets/images/rebitora_tab_off.png) no-repeat center bottom / 100%;
}

.tab-list li.tab-list03 a {
  background: url(../../assets/images/siarisu_tab_off.png) no-repeat center bottom / 100%;
}

.tab-list li.tab-list01 a.active {
  background: url(../../assets/images/baiagura_tab_on.png) no-repeat center bottom / 100%;
}

.tab-list li.tab-list02 a.active {
  background: url(../../assets/images/rebitora_tab_on.png) no-repeat center bottom / 100%;
}

.tab-list li.tab-list03 a.active {
  background: url(../../assets/images/siarisu_tab_on.png) no-repeat center bottom / 100%;
}

.tab-content-list {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.tab-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-content img {
  display: block;
  width: 100%;
  height: auto;
}

.medicine > p:has(img[src*="medicine_shinsatsu"]) {
  margin: 0;
  line-height: 0;
}

.medicine img[src*="medicine_cta_title"] {
  display: block;
  width: 85%;
  height: auto;
  margin: min(calc(32 / 780 * 100vw), 32px) auto 12px;
}

.medicine p:has(img[src*="medicine01_02"]),
.medicine p:has(img[src*="medicine02_02"]),
.medicine p:has(img[src*="medicine03_02"]) {
  padding-top: 45px;
  padding-bottom: 70px;
}

.medicine img[src*="medicine01_02"],
.medicine img[src*="medicine02_02"],
.medicine img[src*="medicine03_02"] {
  display: block;
  width: 85%;     
  height: auto;  
  margin: 0 auto; 
}
/* --------------------------
  osusume
-------------------------- */
.osusume {
  position: relative;
  background :url(../../assets/images/osusume_bg.png) repeat-y center top / 100%;
  padding-bottom: min(calc(90/780 * 100vw), 90px);
}

.arrow {
  display: block;
  position: absolute;
  top: -2.4%;
}

.osusume .inner {
  background: #fff;
  border-radius:  min(calc(20/780 * 100vw), 20px);
}

.osusume .inner.osusume01 {
  margin-bottom:  min(calc(53/780 * 100vw), 53px);
}

.osusume img[src*="osusume_cta_title"] {
  display: block;
  width: 85%;
  height: auto;
  margin: 80px auto 15px;
}

/* --------------------------
  flow
-------------------------- */
.flow {
  background :url(../../assets/images/flow_bg.png) no-repeat center top / 100%;
}

.flow_box {
  position: relative;
}

.flow_box img[src*="flow03_text"] {
  display: block;
  width: 66%;
  height: auto;
  margin: 20px auto 60px;
}

.flow_icon {
  position: absolute;
  top: min(calc(385/780 * 100vw), 385px);
}

/* --------------------------
  doctor
-------------------------- */ 
.doctor{
  padding-bottom: min(calc(22/780 * 100vw), 22px);
  background: linear-gradient(55deg, rgba(179, 224, 244,0.3) 0%, rgba(212, 251, 225, 0.3)100%) ;
}


/* --------------------------
  faq
-------------------------- */
.faq {
  padding-bottom:  min(calc(50/780 * 100vw), 50px);
}
.faq .cv_btn {
  margin-bottom: min(calc(90/780 * 100vw), 90px);
}
.faq-list {
  font-family: var(--zenkaku);
  line-height: 1.43;
}
.faq-box {
  padding-top: min(7.69vw, 60px);
  padding-bottom: min(7.69vw, 60px);
}
.faq-box + .faq-box {
  border-top: min(0.51vw, 4px) dotted currentColor;
}
.faq-box dt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  font-size: min(calc(40/780 * 100vw), 40px);
  font-weight: 700;
}
.faq-box dd {
  font-size: 1.4em;
  letter-spacing: -0.01em;
  padding-top: min(2.56vw, 20px);;
}
.faq-box dt .q {
  width: min(12.57vw, 88px);
}

.faq-notes-list {
  background-color: var(--beige);
  padding-bottom: min(14.62vw, 114px);
}
.faq-notes-box {
  font-size: 1.4em;
  line-height: 1.44;
}
.faq-notes-box + .faq-notes-box {
  margin-top: 0.95lh;
}
.faq-notes-box dt {
  font-weight: 700;
}
.faq-notes-box .img-box:first-of-type {
  margin-top: 1em;
}
.faq-notes-box .img-box:nth-last-child(2) {
  margin-bottom: 0.9em;
}

.faq-notes-box  sup{
  font-size: 0.5em;
  vertical-align: super;
}

/* --------------------------
  notes
-------------------------- */
.notes {
  font-family: "Zen Kaku Gothic New", sans-serif;
  padding-top: min(9.87vw, 77px);
  padding-bottom: min(19.49vw, 152px);
  margin-bottom: min(3.08vw, 24px);
  background-color: var(--beige);
}

.notes.notes01 {
  padding-top: 0;
}

.notes-area + .notes-area {
  margin-top: 4.7em;
}

.notes-box + .notes-box {
  margin-top: 3.5lh;
  padding-top: 2.5lh;
  border-top: min(0.51vw, 4px) dotted currentColor;
}
.notes-box .box-ttl {
  font-size: min(calc(40/780 * 100vw), 40px);
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 1em;
  line-height: 1.25;
}

.notes-box p {
  font-size: 1.4em;
  letter-spacing: 0.01em;
  line-height: 1.42;
  font-weight: 500;
}
.notes-02-02 p {
  letter-spacing: -0.01em;
}
.notes-list-box + .notes-list-box {
  margin-top: 1.3lh;
}

.notes-02 .notes-box + .notes-box {
  margin-top: 2.6lh;
  padding-top: 2.2lh;
}

/* --------------------------
  footer
-------------------------- */
footer {
  padding: min(14.1vw, 110px) 0;
  background-color: #e2f3f7;
  font-family: var(--zenkaku);
}
footer ul li {
  text-align: center;
}
footer ul li + li {
  margin-top: 1em;
}
footer ul li a,
footer ul li a:link,
footer ul li a:visited {
  display: inline-block;
  font-size: min(3.08vw, 24px);
  font-weight: 500;
  line-height: 1.74;
  color: var(--lightblue);
  border-bottom: 1px solid currentColor;
}

/* --------------------------
  Animations
-------------------------- */
/* ボタンの光 */
.shine {
  position: absolute;
  width: min(calc(700/780 * 100vw), 700px);
  height: min(calc(160/780 * 100vw), 160px);
  border-radius: 5em;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.shine::before {
  content: "";
  width: 200%;
  height: 200%;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: 1;
  animation: shine 2.5s linear infinite;
}

@keyframes ani-down {
  0% {
    translate: 0 0 0;
  }

  10% {
    translate: 0 1% 0;
  }

  20% {
    translate: 0 0 0;
  }

  30% {
    translate: 0 1% 0;
  }

  40% {
    translate: 0 0 0;
  }
}

@keyframes shine {

  from,
  0% {
    transform: translate3d(-100%, 0, 0) rotate(45deg);
    opacity: 0;
  }

  20% {
    transform: translate3d(-100%, 0, 0) rotate(45deg);
    opacity: 1;
  }

  70% {
    transform: translate3d(100%, 0, 0) rotate(45deg);
    opacity: 1;
  }

  80% {
    transform: translate3d(100%, 0, 0) rotate(45deg);
    opacity: 0;
  }

  to,
  100% {
    transform: translate3d(-100%, 0, 0) rotate(45deg);
    opacity: 0;
  }
}