@charset "UTF-8";
/*
 * firsttime.css
 * Last modify 2024/10/29 17:22
 */
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDMincho:wght@400;700&family=BIZ+UDPMincho:wght@400;700&family=Cardo:wght@400;700&family=Zen+Kaku+Gothic+Antique&display=swap"); /* ==========================================================
!import
========================================================== */
/* ==========================================================
!mediaQuery
デザインベースは376px、1440px
========================================================== */
/* -----------------------------------------------------
Base Style
----------------------------------------------------- */
/* !main
---------------------------------------------------------- */
html.webp #main {
  background-image: url("../img/firsttime/bg_main01.webp");
}
@media screen and (max-width: 880px) {
  html.webp #main {
    background-image: url("../img/firsttime/bg_main01_sp.webp");
  }
}

html.no-webp #main {
  background-image: url("../img/firsttime/bg_main01.jpg");
}
@media screen and (max-width: 880px) {
  html.no-webp #main {
    background-image: url("../img/firsttime/bg_main01_sp.jpg");
  }
}

/* !content
---------------------------------------------------------- */
@media screen and (min-width: 881px) {
  #content {
    width: 85vw;
  }
}
@media screen and (min-width: 1281px) {
  #content {
    width: 1032px;
  }
}
@media screen and (min-width: 1441px) {
  #content {
    width: 71.66vw;
  }
}
#content .firstAction01,
#content .firstAction02 {
  position: relative;
  opacity: 0;
  top: 50px;
}
#content .firstAction01 {
  -webkit-animation: show01 0.5s ease 0s forwards;
  animation: show01 0.5s ease 0s forwards;
}
#content .firstAction02 {
  -webkit-animation: show01 0.5s ease 0.3s forwards;
  animation: show01 0.5s ease 0.3s forwards;
}
#content h1.h1_basic01 {
  margin-bottom: 4.25vw;
}
@media screen and (min-width: 881px) {
  #content h1.h1_basic01 {
    margin-bottom: 1.87vw;
  }
}
@media screen and (min-width: 1281px) {
  #content h1.h1_basic01 {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 1441px) {
  #content h1.h1_basic01 {
    margin-bottom: 1.66vw;
  }
}
#content .h2Box {
  text-align: center;
}
#content .h2Box h2 {
  position: relative;
  display: inline-block;
  padding: 0 1.5em;
  color: #717171;
  font-size: 6.91vw;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 880px) {
  #content .h2Box h2 {
    display: block;
    margin-bottom: 8.51vw;
    padding: 0;
    line-height: 1.46;
  }
}
@media screen and (min-width: 881px) {
  #content .h2Box h2 {
    margin-bottom: 5vw;
    font-size: 2.5vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .h2Box h2 {
    margin-bottom: 64px;
    font-size: 32px;
  }
}
@media screen and (min-width: 1441px) {
  #content .h2Box h2 {
    margin-bottom: 4.44vw;
    font-size: 2.22vw;
  }
}
#content .h2Box h2:before, #content .h2Box h2:after {
  position: absolute;
  display: inline-block;
  content: "";
  width: 24px;
  height: 9px;
  top: 28%;
  background: url("../common/img/bg_h2_01.svg") no-repeat center center;
  background-size: 100%;
}
@media screen and (max-width: 880px) {
  #content .h2Box h2:before, #content .h2Box h2:after {
    top: 44%;
    background: url("../common/img/bg_h2_01_sp.svg") no-repeat center center;
  }
}
@media screen and (min-width: 881px) {
  #content .h2Box h2:before, #content .h2Box h2:after {
    width: 10vw;
    height: 1.87vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .h2Box h2:before, #content .h2Box h2:after {
    width: 128px;
    height: 24px;
  }
}
@media screen and (min-width: 1441px) {
  #content .h2Box h2:before, #content .h2Box h2:after {
    width: 8.88vw;
    height: 1.66vw;
  }
}
#content .h2Box h2:before {
  left: 0;
}
@media screen and (min-width: 881px) {
  #content .h2Box h2:before {
    left: -10vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .h2Box h2:before {
    left: -128px;
  }
}
@media screen and (min-width: 1441px) {
  #content .h2Box h2:before {
    left: -8.88vw;
  }
}
#content .h2Box h2:after {
  right: 0;
}
@media screen and (min-width: 881px) {
  #content .h2Box h2:after {
    right: -10vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .h2Box h2:after {
    right: -128px;
  }
}
@media screen and (min-width: 1441px) {
  #content .h2Box h2:after {
    right: -8.88vw;
  }
}
#content .h2Box h2 strong {
  color: #BFB87D;
  font-size: 5.31vw;
  line-height: 1.4;
  font-weight: 500;
}
@media screen and (min-width: 881px) {
  #content .h2Box h2 strong {
    font-size: 1.87vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .h2Box h2 strong {
    font-size: 24px;
  }
}
@media screen and (min-width: 1441px) {
  #content .h2Box h2 strong {
    font-size: 1.66vw;
  }
}
#content .textWrap p {
  font-size: 4.25vw;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (min-width: 881px) {
  #content .textWrap p {
    font-size: 1.4vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .textWrap p {
    font-size: 18px;
  }
}
@media screen and (min-width: 1441px) {
  #content .textWrap p {
    font-size: 1.25vw;
  }
}
#content .textWrap p.cmnt {
  margin-bottom: 10.63vw;
  font-size: 5.31vw;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (min-width: 881px) {
  #content .textWrap p.cmnt {
    margin-bottom: 3.12vw;
    font-size: 1.87vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .textWrap p.cmnt {
    margin-bottom: 32px;
    font-size: 24px;
  }
}
@media screen and (min-width: 1441px) {
  #content .textWrap p.cmnt {
    margin-bottom: 2.77vw;
    font-size: 1.66vw;
  }
}
#content #greeting p,
#content #treatment p,
#content #pd p,
#content #faq p,
#content #payment p {
  font-size: 4.25vw;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: left;
}
@media screen and (min-width: 881px) {
  #content #greeting p,
#content #treatment p,
#content #pd p,
#content #faq p,
#content #payment p {
    font-size: 1.4vw;
  }
}
@media screen and (min-width: 1281px) {
  #content #greeting p,
#content #treatment p,
#content #pd p,
#content #faq p,
#content #payment p {
    font-size: 18px;
  }
}
@media screen and (min-width: 1441px) {
  #content #greeting p,
#content #treatment p,
#content #pd p,
#content #faq p,
#content #payment p {
    font-size: 1.25vw;
  }
}
#content #faq p,
#content #payment p {
  text-align: center;
}

/* !greeting
---------------------------------------------------------- */
#greeting {
  margin-top: 10.63vw;
}
@media screen and (max-width: 880px) {
  #greeting {
    background: none !important;
    text-align: center;
  }
  #greeting:before {
    position: relative;
    content: "";
    display: inline-block;
    width: 60.63vw;
    height: 74.46vw;
    margin-bottom: 14.89vw;
    border: 1px solid #DAD4A4;
  }
}
@media screen and (min-width: 881px) {
  #greeting {
    margin-top: 6.25vw;
    padding-left: 33.9vw;
    background-size: 30vw !important;
  }
}
@media screen and (min-width: 1281px) {
  #greeting {
    margin-top: 80px;
    padding-left: 434px;
    background-size: 384px !important;
  }
}
@media screen and (min-width: 1441px) {
  #greeting {
    margin-top: 5.55vw;
    padding-left: 30.13vw;
    background-size: 26.66vw !important;
  }
}
#greeting .h2Box02 {
  text-align: left;
}
@media screen and (max-width: 880px) {
  #greeting .h2Box02 {
    text-align: center;
  }
}
#greeting .h2Box02 h2 {
  color: #BFB87D;
}
@media screen and (max-width: 880px) {
  #greeting .h2Box02 h2 {
    position: relative;
    display: block;
    margin-bottom: 8.51vw;
    padding: 0;
    color: #717171;
    font-size: 6.91vw;
    line-height: 1.46;
    letter-spacing: 0.1em;
  }
  #greeting .h2Box02 h2:before, #greeting .h2Box02 h2:after {
    position: absolute;
    display: inline-block;
    content: "";
    width: 24px;
    height: 9px;
    top: 44%;
    background: url("../common/img/bg_h2_01_sp.svg") no-repeat center center;
    background-size: 100%;
  }
  #greeting .h2Box02 h2:before {
    left: 0;
  }
  #greeting .h2Box02 h2:after {
    right: 0;
  }
}
@media screen and (min-width: 881px) {
  #greeting .h2Box02 h2 {
    margin-bottom: 3.75vw;
    font-size: 1.87vw;
  }
}
@media screen and (min-width: 1281px) {
  #greeting .h2Box02 h2 {
    margin-bottom: 48px;
    font-size: 24px;
  }
}
@media screen and (min-width: 1441px) {
  #greeting .h2Box02 h2 {
    margin-bottom: 3.33vw;
    font-size: 1.66vw;
  }
}

@media screen and (max-width: 880px) {
  html.webp #greeting:before {
    background: url("../img/firsttime/pic_greeting01_sp.webp") no-repeat center top;
    background-size: 100%;
  }
}

@media screen and (max-width: 880px) {
  html.no-webp #greeting:before {
    background: url("../img/firsttime/pic_greeting01_sp.jpg") no-repeat center top;
    background-size: 100%;
  }
}

html.webp #greeting {
  background: url("../img/firsttime/pic_greeting01.webp") no-repeat left top;
}

html.no-webp #greeting {
  background: url("../img/firsttime/pic_greeting01.jpg") no-repeat left top;
}

/* !treatment
---------------------------------------------------------- */
#treatment {
  margin-top: 21.27vw;
}
@media screen and (min-width: 881px) {
  #treatment {
    margin-top: 6.25vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment {
    margin-top: 80px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment {
    margin-top: 5.55vw;
  }
}
#treatment h3 {
  position: relative;
  padding-left: 23.93vw;
  padding-top: 0.2em;
  color: #717171;
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 880px) {
  #treatment h3 {
    margin-top: 17.02vw;
    padding-top: 0.4em;
    line-height: 1.4;
  }
}
@media screen and (min-width: 881px) {
  #treatment h3 {
    margin-top: 6.25vw;
    margin-bottom: 2.96vw;
    padding-left: 10.31vw;
    font-size: 1.87vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment h3 {
    margin-top: 80px;
    margin-bottom: 38px;
    padding-left: 132px;
    font-size: 24px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment h3 {
    margin-top: 5.55vw;
    margin-bottom: 2.63vw;
    padding-left: 9.16vw;
    font-size: 1.66vw;
  }
}
#treatment h3:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 2em;
  height: 1em;
  font-family: "Cardo", sans-serif;
  color: #EDEBD7;
  font-size: 21.27vw;
  line-height: 1;
}
@media screen and (min-width: 881px) {
  #treatment h3:before {
    font-size: 7.5vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment h3:before {
    font-size: 96px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment h3:before {
    font-size: 6.66vw;
  }
}
#treatment .ul_basic01 {
  padding: 4.26vw 3.73vw 0;
}
@media screen and (min-width: 1281px) {
  #treatment .ul_basic01 {
    padding: 0 0 0;
  }
}
#treatment .imgWrap {
  position: absolute;
  top: 0;
  margin: 0;
}
@media screen and (max-width: 880px) {
  #treatment .imgWrap {
    position: relative;
    margin: 6.4vw 0;
  }
}
#treatment .imgWrap img {
  width: 100%;
}
@media screen and (min-width: 881px) {
  #treatment #point01 {
    min-height: 36.32vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point01 {
    min-height: 465px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point01 {
    min-height: 32.29vw;
  }
}
#treatment #point01 h3 {
  margin-top: 0;
}
#treatment #point01 h3:before {
  content: "01";
}
@media screen and (min-width: 881px) {
  #treatment #point01 .imgWrap {
    width: 38.43vw;
    left: 42.18vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point01 .imgWrap {
    width: 492px;
    left: 540px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point01 .imgWrap {
    width: 34.16vw;
    left: 37.5vw;
  }
}
@media screen and (min-width: 881px) {
  #treatment #point01 p {
    width: 42.18vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point01 p {
    width: 540px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point01 p {
    width: 37.5vw;
  }
}
@media screen and (min-width: 881px) {
  #treatment #point02 {
    min-height: 50.78vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point02 {
    min-height: 650px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point02 {
    min-height: 45.13vw;
  }
}
@media screen and (min-width: 881px) {
  #treatment #point02 .wrap01 {
    padding-left: 42.18vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point02 .wrap01 {
    padding-left: 540px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point02 .wrap01 {
    padding-left: 37.5vw;
  }
}
#treatment #point02 h3:before {
  content: "02";
}
@media screen and (min-width: 881px) {
  #treatment #point02 .imgWrap {
    width: 38.43vw;
    left: 0;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point02 .imgWrap {
    width: 492px;
    left: 0;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point02 .imgWrap {
    width: 34.16vw;
    left: 0;
  }
}
#treatment #point02 .ul_note01 {
  font-size: 3.72vw;
  line-height: 2;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 881px) {
  #treatment #point02 .ul_note01 {
    font-size: 1.4vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point02 .ul_note01 {
    font-size: 18px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point02 .ul_note01 {
    font-size: 1.25vw;
  }
}
@media screen and (min-width: 881px) {
  #treatment #point03 {
    min-height: 26.09vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point03 {
    min-height: 334px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point03 {
    min-height: 23.19vw;
  }
}
#treatment #point03 h3:before {
  content: "03";
}
@media screen and (min-width: 881px) {
  #treatment #point03 .imgWrap {
    width: 39.53vw;
    left: 41.09vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point03 .imgWrap {
    width: 506px;
    left: 526px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point03 .imgWrap {
    width: 35.13vw;
    left: 36.52vw;
  }
}
@media screen and (min-width: 881px) {
  #treatment #point03 p {
    width: 39.06vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point03 p {
    width: 500px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point03 p {
    width: 34.72vw;
  }
}
@media screen and (min-width: 881px) {
  #treatment #point04 {
    min-height: 17.96vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point04 {
    min-height: 230px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point04 {
    min-height: 15.97vw;
  }
}
@media screen and (min-width: 881px) {
  #treatment #point04 .wrap01 {
    padding-left: 42.18vw;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point04 .wrap01 {
    padding-left: 540px;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point04 .wrap01 {
    padding-left: 37.5vw;
  }
}
#treatment #point04 h3:before {
  content: "04";
}
@media screen and (min-width: 881px) {
  #treatment #point04 .imgWrap {
    width: 38.43vw;
    left: 0;
  }
}
@media screen and (min-width: 1281px) {
  #treatment #point04 .imgWrap {
    width: 492px;
    left: 0;
  }
}
@media screen and (min-width: 1441px) {
  #treatment #point04 .imgWrap {
    width: 34.16vw;
    left: 0;
  }
}

/* !pd
---------------------------------------------------------- */
#pd {
  margin-top: 21.27vw;
}
@media screen and (min-width: 881px) {
  #pd {
    margin-top: 6.25vw;
  }
}
@media screen and (min-width: 1281px) {
  #pd {
    margin-top: 80px;
  }
}
@media screen and (min-width: 1441px) {
  #pd {
    margin-top: 5.55vw;
  }
}
#pd .wrap01 {
  position: relative;
}
@media screen and (min-width: 881px) {
  #pd .wrap01 {
    min-height: 24.21vw;
  }
}
@media screen and (min-width: 1281px) {
  #pd .wrap01 {
    min-height: 310px;
  }
}
@media screen and (min-width: 1441px) {
  #pd .wrap01 {
    min-height: 21.52vw;
  }
}
#pd .wrap01 .imgWrap {
  position: absolute;
  top: 0;
  margin: 0;
  border: 1px solid #DAD4A4;
}
@media screen and (max-width: 880px) {
  #pd .wrap01 .imgWrap {
    position: relative;
    margin: 6.4vw 0;
  }
}
@media screen and (min-width: 881px) {
  #pd .wrap01 .imgWrap {
    width: 38.43vw;
    left: 42.18vw;
  }
}
@media screen and (min-width: 1281px) {
  #pd .wrap01 .imgWrap {
    width: 492px;
    left: 540px;
  }
}
@media screen and (min-width: 1441px) {
  #pd .wrap01 .imgWrap {
    width: 34.16vw;
    left: 37.5vw;
  }
}
#pd .wrap01 .imgWrap img {
  width: 100%;
}

/* !flow
---------------------------------------------------------- */
#flow {
  margin-top: 21.27vw;
}
@media screen and (min-width: 881px) {
  #flow {
    margin-top: 6.25vw;
  }
}
@media screen and (min-width: 1281px) {
  #flow {
    margin-top: 80px;
  }
}
@media screen and (min-width: 1441px) {
  #flow {
    margin-top: 5.55vw;
  }
}
#flow .ol_basic02 {
  margin-top: 12.76vw;
}
@media screen and (min-width: 881px) {
  #flow .ol_basic02 {
    margin-top: 5vw;
  }
}
@media screen and (min-width: 1281px) {
  #flow .ol_basic02 {
    margin-top: 64px;
  }
}
@media screen and (min-width: 1441px) {
  #flow .ol_basic02 {
    margin-top: 4.44vw;
  }
}
#flow .ol_basic02 li:before {
  font-size: 10.63vw;
  top: 0.3em;
  left: 0;
}
@media screen and (max-width: 880px) {
  #flow .ol_basic02 li:before {
    top: auto;
  }
}
@media screen and (min-width: 881px) {
  #flow .ol_basic02 li:before {
    left: 42.18vw;
    color: #EDEBD7;
    font-size: 3.12vw;
  }
}
@media screen and (min-width: 1281px) {
  #flow .ol_basic02 li:before {
    left: 540px;
    color: #EDEBD7;
    font-size: 48px;
  }
}
@media screen and (min-width: 1441px) {
  #flow .ol_basic02 li:before {
    left: 37.5vw;
    color: #EDEBD7;
    font-size: 3.33vw;
  }
}
#flow .ol_basic02 li strong {
  display: inline-block;
  margin-bottom: 5.31vw;
  padding-left: 8.63vw;
  font-size: 4.25vw;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 881px) {
  #flow .ol_basic02 li strong {
    margin-bottom: 1.71vw;
    padding-left: 3.12vw;
    font-size: 1.4vw;
  }
}
@media screen and (min-width: 1281px) {
  #flow .ol_basic02 li strong {
    margin-bottom: 22px;
    padding-left: 48px;
    font-size: 18px;
  }
}
@media screen and (min-width: 1441px) {
  #flow .ol_basic02 li strong {
    margin-bottom: 1.52vw;
    padding-left: 3.33vw;
    font-size: 1.25vw;
  }
}
#flow .ol_basic02 li p.note {
  margin: 1em 0 0 1em;
  text-indent: -1em;
}
#flow li {
  position: relative;
}
#flow li:after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  border: 1px solid #DAD4A4;
  background-size: 100% !important;
}
html.webp #flow li:nth-of-type(1)::after {
  background: url("../img/firsttime/pic_flow01.webp") no-repeat center top;
}
html.no-webp #flow li:nth-of-type(1)::after {
  background: url("../img/firsttime/pic_flow01.jpg") no-repeat center top;
}
html.webp #flow li:nth-of-type(2)::after {
  background: url("../img/firsttime/pic_flow02.webp") no-repeat center top;
}
html.no-webp #flow li:nth-of-type(2)::after {
  background: url("../img/firsttime/pic_flow02.jpg") no-repeat center top;
}
html.webp #flow li:nth-of-type(3)::after {
  background: url("../img/firsttime/pic_flow03.webp") no-repeat center top;
}
html.no-webp #flow li:nth-of-type(3)::after {
  background: url("../img/firsttime/pic_flow03.webp") no-repeat center top;
}
html.webp #flow li:nth-of-type(4)::after {
  background: url("../img/firsttime/pic_flow04.webp") no-repeat center top;
}
html.no-webp #flow li:nth-of-type(4)::after {
  background: url("../img/firsttime/pic_flow04.jpg") no-repeat center top;
}
html.webp #flow li:nth-of-type(5)::after {
  background: url("../img/firsttime/pic_flow05.webp") no-repeat center top;
}
html.no-webp #flow li:nth-of-type(5)::after {
  background: url("../img/firsttime/pic_flow05.jpg") no-repeat center top;
}
html.webp #flow li:nth-of-type(6)::after {
  background: url("../img/firsttime/pic_flow06.webp") no-repeat center top;
}
html.webp #flow li:nth-of-type(6)::after {
  background: url("../img/firsttime/pic_flow06.jpg") no-repeat center top;
}
html.webp #flow li:nth-of-type(7)::after {
  background: url("../img/firsttime/pic_flow07.webp") no-repeat center top;
}
html.webp #flow li:nth-of-type(7)::after {
  background: url("../img/firsttime/pic_flow07.jpg") no-repeat center top;
}
@media screen and (max-width: 880px) {
  #flow li {
    margin-top: 8.51vw;
    margin-left: 0;
    padding-top: 58.51vw;
    padding-left: 0;
  }
  #flow li:after {
    width: 100%;
    height: 53.19vw;
    background-size: 100% !important;
  }
  html.webp #flow li:nth-of-type(1)::after {
    background: url("../img/firsttime/pic_flow01_sp.webp") no-repeat center top;
  }
  html.no-webp #flow li:nth-of-type(1)::after {
    background: url("../img/firsttime/pic_flow01_sp.jpg") no-repeat center top;
  }
  html.webp #flow li:nth-of-type(2)::after {
    background: url("../img/firsttime/pic_flow02_sp.webp") no-repeat center top;
  }
  html.no-webp #flow li:nth-of-type(2)::after {
    background: url("../img/firsttime/pic_flow02_sp.jpg") no-repeat center top;
  }
  html.webp #flow li:nth-of-type(3)::after {
    background: url("../img/firsttime/pic_flow03_sp.webp") no-repeat center top;
  }
  html.no-webp #flow li:nth-of-type(3)::after {
    background: url("../img/firsttime/pic_flow03_sp.webp") no-repeat center top;
  }
  html.webp #flow li:nth-of-type(4)::after {
    background: url("../img/firsttime/pic_flow04_sp.webp") no-repeat center top;
  }
  html.no-webp #flow li:nth-of-type(4)::after {
    background: url("../img/firsttime/pic_flow04_sp.jpg") no-repeat center top;
  }
  html.webp #flow li:nth-of-type(5)::after {
    background: url("../img/firsttime/pic_flow05_sp.webp") no-repeat center top;
  }
  html.no-webp #flow li:nth-of-type(5)::after {
    background: url("../img/firsttime/pic_flow05_sp.jpg") no-repeat center top;
  }
  html.webp #flow li:nth-of-type(6)::after {
    background: url("../img/firsttime/pic_flow06_sp.webp") no-repeat center top;
  }
  html.webp #flow li:nth-of-type(6)::after {
    background: url("../img/firsttime/pic_flow06_sp.jpg") no-repeat center top;
  }
  html.webp #flow li:nth-of-type(7)::after {
    background: url("../img/firsttime/pic_flow07_sp.webp") no-repeat center top;
  }
  html.webp #flow li:nth-of-type(7)::after {
    background: url("../img/firsttime/pic_flow07_sp.jpg") no-repeat center top;
  }
}
@media screen and (min-width: 881px) {
  #flow li {
    min-height: 20.31vw;
    margin-top: 2.5vw;
    padding-left: 42.18vw;
    padding-top: 0.93vw;
  }
  #flow li:after {
    width: 38.43vw;
    height: 20.31vw;
  }
}
@media screen and (min-width: 1281px) {
  #flow li {
    min-height: 260px;
    margin-top: 32px;
    padding-left: 540px;
    padding-top: 12px;
  }
  #flow li:after {
    width: 492px;
    height: 260px;
  }
}
@media screen and (min-width: 1441px) {
  #flow li {
    min-height: 18.05vw;
    margin-top: 2.22vw;
    padding-left: 37.5vw;
    padding-top: 0.83vw;
  }
  #flow li:after {
    width: 34.16vw;
    height: 18.05vw;
  }
}
#flow .btnLink01 {
  margin: 4.25vw 0;
}
@media screen and (min-width: 881px) {
  #flow .btnLink01 {
    margin: 1.87vw 0;
  }
}
@media screen and (min-width: 1281px) {
  #flow .btnLink01 {
    margin: 24px 0;
  }
}
@media screen and (min-width: 1441px) {
  #flow .btnLink01 {
    margin: 1.66vw 0;
  }
}
#flow .tellBox span,
#flow .tellBox a {
  display: inline-block;
  margin-left: 4.78vw;
  color: #BFB87D;
  font-family: "BIZ UDMincho";
  font-size: 6.38vw;
  font-weight: 700;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 881px) {
  #flow .tellBox span,
#flow .tellBox a {
    margin-left: 2.5vw;
    font-size: 2.03vw;
  }
}
@media screen and (min-width: 1281px) {
  #flow .tellBox span,
#flow .tellBox a {
    margin-left: 32px;
    font-size: 26px;
  }
}
@media screen and (min-width: 1441px) {
  #flow .tellBox span,
#flow .tellBox a {
    margin-left: 2.22vw;
    font-size: 1.8vw;
  }
}

/* !faq
---------------------------------------------------------- */
#faq {
  margin-top: 21.27vw;
}
@media screen and (min-width: 881px) {
  #faq {
    margin-top: 6.25vw;
  }
}
@media screen and (min-width: 1281px) {
  #faq {
    margin-top: 80px;
  }
}
@media screen and (min-width: 1441px) {
  #faq {
    margin-top: 5.55vw;
  }
}

/* !payment
---------------------------------------------------------- */
#payment {
  margin-top: 21.27vw;
}
@media screen and (min-width: 881px) {
  #payment {
    margin-top: 6.25vw;
  }
}
@media screen and (min-width: 1281px) {
  #payment {
    margin-top: 80px;
  }
}
@media screen and (min-width: 1441px) {
  #payment {
    margin-top: 5.55vw;
  }
}
#payment a {
  color: #00B3CD;
}
/*# sourceMappingURL=firsttime.css.map */