@charset "utf-8";
@import url(init.css);

:root {
  --viewport: 750;
  --gold: #BBA171;
  --blue: #3E74CB;
}
body {
  font-size: calc(100vw / var(--viewport) * 22);
  font-weight: normal;
  position: relative;
}
@media screen and (min-width:768px) {
  :root {
    --viewport: 1280;
  }
  body {
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
  }
  a[href^="tel:"] {
    pointer-events: none;
  }
  .pc_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}

img {
  vertical-align: middle;
}

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .inner {
    padding-left: calc(100vw / var(--viewport) * 35);
    padding-right: calc(100vw / var(--viewport) * 35);
  }
  .inner_narrow_sp {
    padding-left: calc(100vw / var(--viewport) * 70);
    padding-right: calc(100vw / var(--viewport) * 70);
  }
}
@media (min-width: 769px) {
  .sp {
    display: none;
  }
  .inner {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1160px;
  }
  .inner_narrow_pc {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1020px;
  }
  img{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

#wrapper {
  overflow: hidden;
}

/*----------------------------------------------------------
    layout
----------------------------------------------------------*/
/* header */
header {
  width: 100%;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
header .header_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(100vw / var(--viewport) * 14) calc(100vw / var(--viewport) * 22) 0;
}
header .header_flex .logo_mark {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 24);
}
header .header_flex .logo_mark img {
  width: calc(100vw / var(--viewport) * 74);
  margin-right: calc(100vw / var(--viewport) * 24);
  vertical-align: middle;
}
header .header_flex .logo_mark p {
  display: inline-block;
}
header .header_flex .header_right {
  display: flex;
  justify-content: space-between;
  width: calc(100vw / var(--viewport) * 94);
}
header .header_flex .ico_access {
  width: calc(100vw / var(--viewport) * 30);
}
header .header_flex .ico_tel {
  width: calc(100vw / var(--viewport) * 28);
}
@media (min-width: 769px) {
  header .header_flex{
      max-width: 1100px;
      margin: 0 auto;
      padding: 0;
    height: 58px;
  }
  header .header_flex .logo_mark {
    font-size: 14px;
  }
  header .header_flex .logo_mark img {
    width: 40px;
    margin-right: 15px;
    padding-top: 7px;
    display: inline-block;
  }
  header .header_flex .header_right {
    display: flex;
    justify-content: space-between;
    width: 288px;
  }
  header .header_right__cta a{
    display: block;
    width: 163px;
    font-size: 11px;
    padding: 10.5px;
    color: #fff;
    background: #3E74CB;
    text-align: center;
  }
  header .header_right__info{
    color: #fff;
  }
  header .header_right__info span{
    display: block;
  }
  header .header_right__info .tel_number{
    font-size: 15px;
    letter-spacing: .1em;
  }
  header .header_right__info .tel_sm-italic{
    font-size: 9px;
    margin-top: 5px;
  }
  header .header_flex .ico_tel {
    width: calc(100vw / var(--viewport) * 28);
  }
}

/* main */
main {
  padding-top: 50px;
}
@media (min-width: 980px) {
  main {
    padding-top: 58px;
  }
}

/* main_visual */
main .main_visual {
  background: #EEF0F8;
}
main .main_visual .inner {
    padding: 0;
}
@media (min-width: 769px) {
  main .main_visual .inner {
    padding: 0 20px;
  }
}

/* introduction */
main .introduction {
  margin-top: calc(100vw / var(--viewport) * 40);
  margin-bottom: calc(100vw / var(--viewport) * 40);
}
@media (min-width: 769px) {
  main .introduction {
    margin-top: min(calc(100vw / var(--viewport) * 70), 70px);
    margin-bottom: min(calc(100vw / var(--viewport) * 70), 70px);
  }
}
main .introduction .text {
  line-height: calc(54 / 28);
  font-size: calc(100vw / var(--viewport)* 28);
  font-weight: 500;
  color: #1F1D1D;
}
@media (min-width: 769px) {
  main .introduction .text {
    line-height: calc(40 / 20);
    font-size: min(calc(100vw / var(--viewport)* 20), 20px);
    font-weight: 600;
  }
}

/* example */
main .example {
  margin-top: calc(100vw / var(--viewport) * 60);
  margin-bottom: calc(100vw / var(--viewport) * 60);
}
@media (min-width: 769px) {
  main .example {
    margin-top: min(calc(100vw / var(--viewport) * 80), 80px);
    margin-bottom: min(calc(100vw / var(--viewport) * 80), 80px);
  }
}
main .example .container {
  background: #000000;
  padding: calc(100vw / var(--viewport) * 60) calc(100vw / var(--viewport) * 53) calc(100vw / var(--viewport) * 70);
}
@media (min-width: 769px) {
  main .example .container {
    padding: min(calc(100vw / var(--viewport) * 40), 40px) min(calc(100vw / var(--viewport) * 50), 50px) min(calc(100vw / var(--viewport) * 50), 50px);
  }
}
main .example .title {
  margin-bottom: calc(100vw / var(--viewport) * 36);
  text-align: center;
  line-height: calc(64 / 36);
  font-size: calc(100vw / var(--viewport)* 36);
  font-weight: 600;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .example .title {
    margin-bottom: min(calc(100vw / var(--viewport) * 28), 28px);
    line-height: calc(64 / 30);
    font-size: min(calc(100vw / var(--viewport)* 30), 30px);
  }
}
main .example .before_after {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 30);
  margin-bottom: calc(100vw / var(--viewport) * 39);
}
@media (min-width: 769px) {
  main .example .before_after {
    flex-direction: row;
    gap: min(calc(100vw / var(--viewport) * 33), 33px);
    margin-bottom: min(calc(100vw / var(--viewport) * 30), 30px);
  }
}
main .example .before_after .overview {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 42);
}
@media (min-width: 769px) {
  main .example .before_after .overview {
    gap: min(calc(100vw / var(--viewport) * 20), 20px);
  }
}
main .example .before_after .detail {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 42);
}
@media (min-width: 769px) {
  main .example .before_after .detail {
    gap: min(calc(100vw / var(--viewport) * 20), 20px);
  }
}
main .example .text {
  line-height: calc(32 / 20);
  font-size: calc(100vw / var(--viewport)* 20);
  color: #EDEDED;
}
@media (min-width: 769px) {
  main .example .text {
    line-height: calc(28 / 16);
    font-size: min(calc(100vw / var(--viewport)* 16), 16px);
  }
}
main .example .text strong {
  font-weight: 600;
}

/* price */
main .price {
  background: #F5F5F5;
  padding-top: calc(100vw / var(--viewport) * 50);
  padding-bottom: calc(100vw / var(--viewport) * 80);
}
@media (min-width: 769px) {
  main .price {
    padding-top: min(calc(100vw / var(--viewport) * 50), 50px);
    padding-bottom: min(calc(100vw / var(--viewport) * 80), 80px);
  }
}
main .price .title {
  margin-bottom: calc(100vw / var(--viewport) * 20);
  text-align: center;
  line-height: calc(80 / 40);
  font-size: calc(100vw / var(--viewport)* 40);
  font-weight: 600;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .price .title {
    margin-bottom: min(calc(100vw / var(--viewport) * 20), 20px);
    line-height: calc(80 / 32);
    font-size: min(calc(100vw / var(--viewport)* 32), 32px);
  }
}
main .price .container {
  background: #FFFFFF;
  border-radius: calc(100vw / var(--viewport) * 20);
  padding: calc(100vw / var(--viewport) * 45) calc(100vw / var(--viewport) * 40) calc(100vw / var(--viewport) * 65);
}
@media (min-width: 769px) {
  main .price .container {
    border-radius: min(calc(100vw / var(--viewport) * 20), 20px);
    padding: min(calc(100vw / var(--viewport) * 40), 40px) min(calc(100vw / var(--viewport) * 50), 50px) min(calc(100vw / var(--viewport) * 50), 50px);
  }
}
main .price .sub_title {
  margin-bottom: calc(100vw / var(--viewport) * 20);
  text-align: center;
  line-height: calc(66 / 32);
  font-size: calc(100vw / var(--viewport)* 32);
  font-weight: 700;
  color: #333333;
}
@media (min-width: 769px) {
  main .price .sub_title {
    margin-bottom: min(calc(100vw / var(--viewport) * 20), 20px);
    line-height: calc(66 / 32);
    font-size: min(calc(100vw / var(--viewport)* 32), 32px);
  }
}
main .price .trial {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 34);
  margin-bottom: calc(100vw / var(--viewport) * 24);
}
@media (min-width: 769px) {
  main .price .trial {
    gap: min(calc(100vw / var(--viewport) * 51), 51px);
    margin-bottom: min(calc(100vw / var(--viewport) * 24), 24px);
  }
}
main .price .trial .label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 10);
  background: #000000;
  padding: calc(100vw / var(--viewport) * 4) calc(100vw / var(--viewport) * 8);
}
@media (min-width: 769px) {
  main .price .trial .label {
    gap: min(calc(100vw / var(--viewport) * 10), 10px);
    padding: min(calc(100vw / var(--viewport) * 7), 7px) min(calc(100vw / var(--viewport) * 17), 17px);
  }
}
main .price .trial .label .name {
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 28);
  font-weight: 700;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .price .trial .label .name {
    font-size: min(calc(100vw / var(--viewport)* 28), 28px);
  }
}
main .price .trial .label .count {
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 28);
  font-weight: 700;
  color: #FFFFFF;
}
@media (min-width: 769px) {
  main .price .trial .label .count {
    font-size: min(calc(100vw / var(--viewport)* 28), 28px);
  }
}
main .price .trial .amount {
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport)* 101);
  font-weight: 600;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .price .trial .amount {
    font-size: min(calc(100vw / var(--viewport)* 76), 76px);
  }
}
main .price .course {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 27);
  margin-bottom: calc(100vw / var(--viewport) * 60);
}
@media (min-width: 769px) {
  main .price .course {
    gap: min(calc(100vw / var(--viewport) * 58), 58px);
    margin-bottom: min(calc(100vw / var(--viewport) * 60), 60px);
  }
}
main .price .course .item {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(100vw / var(--viewport) * 8);
}
@media (min-width: 769px) {
  main .price .course .item {
    gap: min(calc(100vw / var(--viewport) * 8), 8px);
  }
}
main .price .course .item .count {
  display: flex;
  align-items: center;
  margin-bottom: calc(100vw / var(--viewport) * 6);
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 23);
  font-weight: 600;
}
@media (min-width: 769px) {
  main .price .course .item .count {
    margin-bottom: min(calc(100vw / var(--viewport) * 6), 6px);
    font-size: min(calc(100vw / var(--viewport)* 28), 28px);
  }
}
main .price .course .item .count strong {
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport)* 47);
  font-weight: 600;
}
@media (min-width: 769px) {
  main .price .course .item .count strong {
    font-size: min(calc(100vw / var(--viewport)* 47), 47px);
  }
}
main .price .course .item .amount {
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport)* 68);
  font-weight: 600;
}
@media (min-width: 769px) {
  main .price .course .item .amount {
    font-size: min(calc(100vw / var(--viewport)* 68), 68px);
  }
}
main .price .clinic {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 37);
}
@media (min-width: 769px) {
  main .price .clinic {
    gap: min(calc(100vw / var(--viewport) * 39), 39px);
  }
}
main .price .clinic .target {
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 32);
  font-weight: 700;
}
@media (min-width: 769px) {
  main .price .clinic .target {
    font-size: min(calc(100vw / var(--viewport)* 28), 28px);
  }
}
main .price .clinic .all {
  border: 2px solid #000000;
  padding: calc(100vw / var(--viewport) * 3) calc(100vw / var(--viewport) * 30);
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 37);
  font-weight: 700;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .price .clinic .all {
    padding: min(calc(100vw / var(--viewport) * 6), 6px) min(calc(100vw / var(--viewport) * 55), 55px);
    font-size: min(calc(100vw / var(--viewport)* 33), 33px);
  }
}

/* problem */
main .problem {
  background: #D8D5DF;
}
@media (min-width: 769px) {
  main .problem {
    padding-bottom: min(calc(100vw / var(--viewport) * 60), 60px);
  }
}
main .problem .title {
  margin-bottom: calc(100vw / var(--viewport) * 60);
  background: #8A82A0;
  padding-top: calc(100vw / var(--viewport) * 90);
  padding-bottom: calc(100vw / var(--viewport) * 40);
  text-align: center;
  line-height: calc(72 / 49);
  font-size: calc(100vw / var(--viewport)* 49);
  font-weight: 700;
}
@media (min-width: 769px) {
  main .problem .title {
    margin-bottom: min(calc(100vw / var(--viewport) * 60), 60px);
    padding-top: min(calc(100vw / var(--viewport) * 120), 120px);
    padding-bottom: min(calc(100vw / var(--viewport) * 40), 40px);
    line-height: calc(60 / 34);
    font-size: min(calc(100vw / var(--viewport)* 34), 34px);
  }
}
main .problem .title strong {
  color: #FFFFFF;
}
@media (min-width: 769px) {
  main .problem .container {
    display: grid;
    grid-template-columns: calc(436 / 980 * 100%) 1fr;
    align-items: center;
    background: #BBA171;
    padding: min(calc(100vw / var(--viewport) * 22), 22px) 0 min(calc(100vw / var(--viewport) * 22), 22px) min(calc(100vw / var(--viewport) * 24), 24px);
  }
}
main .problem .container .img {
  margin-bottom: calc(100vw / var(--viewport) * 60);
}
@media (min-width: 769px) {
  main .problem .container .img {
    margin-bottom: 0;
  }
}
main .problem .container .text {
  margin-left: calc(100vw / var(--viewport) * -35);
  margin-right: calc(100vw / var(--viewport) * -35);
  background: #BBA171;
  padding-top: calc(100vw / var(--viewport) * 94);
  padding-bottom: calc(100vw / var(--viewport) * 94);
  text-align: center;
}
@media (min-width: 769px) {
  main .problem .container .text {
    margin-left: 0;
    margin-right: 0;
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
  }
}
main .problem .container .text strong {
  color: #FFFFFF;
}
main .problem .container .text .worry {
  display: block;
  margin-bottom: calc(100vw / var(--viewport) * 30);
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 49);
  font-weight: 700;
}
@media (min-width: 769px) {
  main .problem .container .text .worry {
    margin-bottom: min(calc(100vw / var(--viewport) * 24), 24px);
    font-size: min(calc(100vw / var(--viewport)* 36), 36px);
  }
}
main .problem .container .text .clinic {
  display: block;
  margin-bottom: calc(100vw / var(--viewport) * 10);
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 36);
  font-weight: 700;
}
@media (min-width: 769px) {
  main .problem .container .text .clinic {
    margin-bottom: min(calc(100vw / var(--viewport) * 0), 0px);
    font-size: min(calc(100vw / var(--viewport)* 25), 25px);
  }
}
main .problem .container .text .recommend {
  display: block;
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 50);
  font-weight: 700;
}
@media (min-width: 769px) {
  main .problem .container .text .recommend {
    line-height: calc(66 / 43);
    font-size: min(calc(100vw / var(--viewport)* 43), 43px);
  }
}

/* feature */
main .feature {
  margin-bottom: calc(100vw / var(--viewport) * 60);
}
@media (min-width: 769px) {
  main .feature {
    margin-bottom: min(calc(100vw / var(--viewport) * 90), 90px);
  }
}
main .feature .title {
  position: relative;
  margin-bottom: calc(100vw / var(--viewport) * 70);
  background: #000000;
  padding-top: calc(100vw / var(--viewport) * 40);
  padding-bottom: calc(100vw / var(--viewport) * 36);
  text-align: center;
  line-height: calc(60 / 36);
  font-size: calc(100vw / var(--viewport)* 36);
  font-weight: 700;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .feature .title {
    margin-bottom: min(calc(100vw / var(--viewport) * 94), 94px);
    padding-top: min(calc(96vw / var(--viewport) * 36), 36px);
    padding-bottom: min(calc(100vw / var(--viewport) * 32), 32px);
    line-height: calc(50 / 34);
    font-size: min(calc(100vw / var(--viewport)* 34), 34px);
  }
}
main .feature .title::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: calc(100vw / var(--viewport) * -45) 0 auto;
  margin: auto;
  background: #000000;
  width: calc(100vw / var(--viewport) * 63);
  height: calc(100vw / var(--viewport) * 46);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
@media (min-width: 769px) {
  main .feature .title::before {
    top: max(calc(100vw / var(--viewport) * -28), -28px);
    width: min(calc(100vw / var(--viewport) * 40), 40px);
    height: min(calc(100vw / var(--viewport) * 29), 29px);
  }
}
main .feature .title strong {
  color: #FFFFFF;
}
main .feature .sub_title {
  margin-bottom: calc(100vw / var(--viewport) * 36);
  text-align: center;
  line-height: calc(66 / 36);
  font-size: calc(100vw / var(--viewport)* 36);
  font-weight: 700;
  color: #333333;
}
@media (min-width: 769px) {
  main .feature .sub_title {
    margin-bottom: min(calc(100vw / var(--viewport) * 50), 50px);
    line-height: calc(58 / 34);
    font-size: min(calc(100vw / var(--viewport)* 34), 34px);
  }
}
main .feature .list {
  counter-reset: feature-number 0;
}
@media (min-width: 769px) {
  main .feature .list .item {
    padding-left: min(calc(100vw / var(--viewport) * 5), 5px);
    padding-right: min(calc(100vw / var(--viewport) * 5), 5px);
  }
}
main .feature .list .item:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport) * 46);
}
@media (min-width: 769px) {
  main .feature .list .item:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport) * 40), 40px);
  }
}
main .feature .list .item .label {
  display: flex;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 7);
  margin-bottom: calc(100vw / var(--viewport) * 20);
  padding-left: calc(100vw / var(--viewport) * 13);
  line-height: calc(66 / 34);
  font-size: calc(100vw / var(--viewport)* 34);
  font-weight: 700;
}
@media (min-width: 769px) {
  main .feature .list .item .label {
    align-items: flex-start;
    margin-bottom: min(calc(100vw / var(--viewport) * 10), 10px);
    padding-left: 0;
    line-height: calc(53 / 30);
    font-size: min(calc(100vw / var(--viewport)* 30), 30px);
  }
}
main .feature .list .item .label::before {
  counter-increment: feature-number 1;
  content: counter(feature-number) ".";
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport)* 57);
  font-weight: 600;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .feature .list .item .label::before {
    font-size: min(calc(100vw / var(--viewport)* 48), 48px);
  }
}
main .feature .list .item .text {
  line-height: calc(54 / 28);
  font-size: calc(100vw / var(--viewport)* 28);
  font-weight: 500;
  letter-spacing: -0.03em;
}
@media (min-width: 769px) {
  main .feature .list .item .text {
    padding-left: min(calc(100vw / var(--viewport) * 45), 45px);
    line-height: calc(38 / 20);
    font-size: min(calc(100vw / var(--viewport)* 20), 20px);
    font-weight: 600;
    letter-spacing: normal;
  }
}

/* mechanism */
main .mechanism {
  margin-bottom: calc(100vw / var(--viewport) * 100);
}
@media (min-width: 769px) {
  main .mechanism {
    margin-bottom: min(calc(100vw / var(--viewport) * 108), 108px);
  }
}
main .mechanism .title {
  margin-bottom: calc(100vw / var(--viewport) * 60);
  background: #000000;
  padding-top: calc(100vw / var(--viewport) * 65);
  padding-bottom: calc(100vw / var(--viewport) * 26);
  text-align: center;
  line-height: calc(35 / 30);
  font-size: calc(100vw / var(--viewport)* 30);
  font-weight: 700;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .mechanism .title {
    margin-bottom: min(calc(100vw / var(--viewport) * 60), 60px);
    padding-top: min(calc(96vw / var(--viewport) * 46), 46px);
    padding-bottom: min(calc(100vw / var(--viewport) * 34), 34px);
    line-height: calc(40 / 28);
    font-size: min(calc(100vw / var(--viewport)* 28), 28px);
  }
}
main .mechanism .title strong {
  line-height: calc(66 / 36);
  font-size: calc(100vw / var(--viewport)* 36);
  color: #FFFFFF;
}
@media (min-width: 769px) {
  main .mechanism .title strong {
    line-height: calc(50 / 34);
    font-size: min(calc(100vw / var(--viewport)* 34), 34px);
  }
}
main .mechanism .explanation {
  margin-bottom: calc(100vw / var(--viewport) * 60);
  line-height: calc(50 / 26);
  font-size: calc(100vw / var(--viewport)* 26);
  font-weight: 500;
}
@media (min-width: 769px) {
  main .mechanism .explanation {
    margin-bottom: min(calc(100vw / var(--viewport) * 60), 60px);
    line-height: calc(40 / 20);
    font-size: min(calc(100vw / var(--viewport)* 20), 20px);
  }
}
main .mechanism .list {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(100vw / var(--viewport) * 130);
}
@media (min-width: 769px) {
  main .mechanism .list {
    grid-template-columns: repeat(3, 1fr);
    gap: min(calc(100vw / var(--viewport) * 71), 71px);
  }
}
main .mechanism .list .item {
  position: relative;
}
main .mechanism .list .item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset: auto 0 calc(100vw / var(--viewport) * -90);
  margin: auto;
  background: #C4C4C4;
  width: calc(100vw / var(--viewport) * 70);
  height: calc(100vw / var(--viewport) * 34);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
@media (min-width: 769px) {
  main .mechanism .list .item:not(:last-child)::after {
    inset: min(calc(100vw / var(--viewport) * 86), 86px) max(calc(100vw / var(--viewport) * -47), -47px) auto auto;
    width: min(calc(100vw / var(--viewport) * 38), 38px);
    width: min(calc(100vw / var(--viewport) * 19), 19px);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
  }
}
main .mechanism .list .item .img {
  margin-bottom: calc(100vw / var(--viewport) * 30);
}
@media (min-width: 769px) {
  main .mechanism .list .item .img {
    margin-bottom: min(calc(100vw / var(--viewport) * 16), 16px);
  }
}
main .mechanism .list .item .text {
  padding-left: calc(100vw / var(--viewport) * 10);
  padding-right: calc(100vw / var(--viewport) * 10);
  line-height: calc(50 / 26);
  font-size: calc(100vw / var(--viewport)* 26);
  font-weight: 500;
}
@media (min-width: 769px) {
  main .mechanism .list .item .text {
    padding-left: 0;
    padding-right: 0;
    line-height: calc(36 / 18);
    font-size: min(calc(100vw / var(--viewport)* 18), 18px);
  }
}

/* reason */
main .reason {
  background: #000000;
  padding-top: calc(100vw / var(--viewport) * 100);
  padding-bottom: calc(100vw / var(--viewport) * 100);
  color: #FFFFFF;
}
@media (min-width: 769px) {
  main .reason {
    padding-top: min(calc(100vw / var(--viewport) * 90), 90px);
    padding-bottom: min(calc(100vw / var(--viewport) * 160), 160px);
  }
}
main .reason .title {
  margin-bottom: calc(100vw / var(--viewport) * 100);
  text-align: center;
  line-height: calc(67 / 40);
  font-size: calc(100vw / var(--viewport)* 40);
  font-weight: 600;
}
@media (min-width: 769px) {
  main .reason .title {
    margin-bottom: min(calc(100vw / var(--viewport) * 90), 90px);
    line-height: calc(56 / 35);
    font-size: min(calc(100vw / var(--viewport)* 35), 35px);
  }
}
main .reason .title span {
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 54);
}
@media (min-width: 769px) {
  main .reason .title span {
    font-size: min(calc(100vw / var(--viewport)* 48), 48px);
  }
}
main .reason .title strong {
  margin-right: calc(100vw / var(--viewport) * 6);
  line-height: calc(100 / 113);
  vertical-align: bottom;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport)* 113);
  font-weight: 600;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .reason .title strong {
    margin-left: min(calc(100vw / var(--viewport) * 12), 12px);
    margin-right: min(calc(100vw / var(--viewport) * 5), 5px);
    line-height: calc(86 / 97);
    font-size: min(calc(100vw / var(--viewport)* 97), 97px);
  }
}
main .reason .list {
  display: flex;
  flex-direction: column;
  gap: calc(100vw / var(--viewport) * 66);
  counter-reset: reason-number 0;
}
@media (min-width: 769px) {
  main .reason .list {
    gap: min(calc(100vw / var(--viewport) * 76), 76px);
  }
}
main .reason .list .item .label {
  display: flex;
  gap: calc(100vw / var(--viewport) * 12);
  margin-bottom: calc(100vw / var(--viewport) * 32);
  line-height: calc(60 / 40);
  font-size: calc(100vw / var(--viewport)* 40);
  font-weight: 600;
}
@media (min-width: 769px) {
  main .reason .list .item .label {
    float: left;
    gap: min(calc(100vw / var(--viewport) * 9), 9px);
    margin-bottom: min(calc(100vw / var(--viewport) * 10), 10px);
    width: calc(476 / 980 * 100%);
    line-height: calc(47 / 31);
    font-size: min(calc(100vw / var(--viewport)* 31), 31px);
  }
}
main .reason .list .item .label.center {
  align-items: center;
}
main .reason .list .item .label strong {
  line-height: 1;
  line-height: calc(90 / 94);
  vertical-align: bottom;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport)* 94);
  font-weight: 600;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .reason .list .item .label strong {
    line-height: calc(70 / 75);
    font-size: min(calc(100vw / var(--viewport)* 75), 75px);
  }
}
main .reason .list .item .label strong.left {
  margin-right: calc(100vw / var(--viewport)* 5);
}
@media (min-width: 769px) {
  main .reason .list .item .label strong.left {
    margin-right: min(calc(100vw / var(--viewport)* 4), 4px);
  }
}
main .reason .list .item .label strong.center {
  margin-left: calc(100vw / var(--viewport)* 5);
  margin-right: calc(100vw / var(--viewport)* 5);
}
@media (min-width: 769px) {
  main .reason .list .item .label strong.center {
    margin-left: min(calc(100vw / var(--viewport)* 7), 7px);
    margin-right: min(calc(100vw / var(--viewport)* 7), 7px);
  }
}
main .reason .list .item .label::before {
  counter-increment: reason-number 1;
  content: counter(reason-number) ".";
  line-height: 1;
  font-family: "din-2014", sans-serif;
  font-size: calc(100vw / var(--viewport)* 94);
  font-weight: 600;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .reason .list .item .label::before {
    font-size: min(calc(100vw / var(--viewport)* 75), 75px);
  }
}
main .reason .list .item .img {
  margin-bottom: calc(100vw / var(--viewport) * 24);
}
@media (min-width: 769px) {
  main .reason .list .item .img {
    float: right;
    margin-bottom: 0;
    width: calc(470 / 980 * 100%);
  }
}
main .reason .list .item .text {
  line-height: calc(50 / 26);
  font-size: calc(100vw / var(--viewport)* 26);
}
@media (min-width: 769px) {
  main .reason .list .item .text {
    float: left;
    padding-left: min(calc(100vw / var(--viewport) * 70), 70px);
    width: calc(476 / 980 * 100%);
    line-height: calc(36 / 20);
    font-size: min(calc(100vw / var(--viewport)* 20), 20px);
    letter-spacing: -0.05em;
  }
}

/* renewal */
main .renewal {
  margin-bottom: calc(100vw / var(--viewport) * 90);
}
@media (min-width: 769px) {
  main .renewal {
    margin-bottom: min(calc(100vw / var(--viewport) * 140), 140px);
  }
}
main .renewal .container {
  background: #BBA171;
  margin-bottom: calc(100vw / var(--viewport) * 30);
  padding-top: calc(100vw / var(--viewport) * 80);
  padding-bottom: calc(100vw / var(--viewport) * 70);
}
@media (min-width: 769px) {
  main .renewal .container {
    margin-bottom: min(calc(100vw / var(--viewport) * 36), 36px);
    padding-top: min(calc(100vw / var(--viewport) * 80), 80px);
    padding-bottom: min(calc(100vw / var(--viewport) * 80), 80px);
  }
}
main .renewal .tags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 13);
  margin-bottom: calc(100vw / var(--viewport) * 24);
}
@media (min-width: 769px) {
  main .renewal .tags {
    gap: min(calc(100vw / var(--viewport) * 10), 10px);
    margin-bottom: min(calc(100vw / var(--viewport) * 30), 30px);
  }
}
main .renewal .tags .item {
  background: #000000;
  border-radius: calc(100vw / var(--viewport) * 10);
  padding: calc(100vw / var(--viewport) * 2) calc(100vw / var(--viewport) * 21);
  line-height: calc(46 / 31);
  font-size: calc(100vw / var(--viewport)* 31);
  font-weight: 600;
  color: #FFFFFF;
}
@media (min-width: 769px) {
  main .renewal .tags .item {
    border-radius: min(calc(100vw / var(--viewport) * 10), 10px);
    padding: min(calc(100vw / var(--viewport) * 2), 2px) min(calc(100vw / var(--viewport) * 16), 16px);
    line-height: calc(35 / 24);
    font-size: min(calc(100vw / var(--viewport)* 24), 24px);
  }
}
main .renewal .title {
  margin-bottom: calc(100vw / var(--viewport) * 20);
  text-align: center;
  line-height: calc(76 / 54);
  font-size: calc(100vw / var(--viewport)* 54);
  font-weight: 700;
}
@media (min-width: 769px) {
  main .renewal .title {
    margin-bottom: min(calc(100vw / var(--viewport) * 36), 36px);
    line-height: calc(86 / 50);
    font-size: min(calc(100vw / var(--viewport)* 50), 50px);
  }
}
main .renewal .title strong {
  line-height: calc(76 / 53);
  font-size: calc(100vw / var(--viewport)* 53);
  color: #FFFFFF;
}
@media (min-width: 769px) {
  main .renewal .title strong {
    margin-left: min(calc(100vw / var(--viewport)* 22), 22px);
    line-height: calc(86 / 50);
    font-size: min(calc(100vw / var(--viewport)* 50), 50px);
  }
}
main .renewal .text {
  line-height: calc(50 / 26);
  font-size: calc(100vw / var(--viewport)* 26);
}
@media (min-width: 769px) {
  main .renewal .text {
    line-height: calc(40 / 20);
    font-size: min(calc(100vw / var(--viewport)* 20), 20px);
  }
}
main .renewal .treatments {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(100vw / var(--viewport) * 20);
  margin-top: calc(100vw / var(--viewport) * 40);
  margin-bottom: calc(100vw / var(--viewport) * 30);
}
@media (min-width: 769px) {
  main .renewal .treatments {
    grid-template-columns: repeat(3, 1fr);
    gap: min(calc(100vw / var(--viewport) * 20), 20px);
    margin-top: min(calc(100vw / var(--viewport) * 54), 54px);
    margin-bottom: min(calc(100vw / var(--viewport) * 54), 54px);
  }
}
main .renewal .treatments .item {
  border: 1px solid #FFFFFF;
  padding: calc(100vw / var(--viewport) * 18);
  text-align: center;
}
@media (min-width: 769px) {
  main .renewal .treatments .item {
    padding: min(calc(100vw / var(--viewport) * 24), 24px) min(calc(100vw / var(--viewport) * 15), 15px);
  }
}
main .renewal .treatments .item .eyebrow {
  margin-bottom: calc(100vw / var(--viewport) * 5);
  line-height: calc(31 / 25);
  font-size: calc(100vw / var(--viewport)* 25);
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media (min-width: 769px) {
  main .renewal .treatments .item .eyebrow {
    margin-bottom: min(calc(100vw / var(--viewport) * 10), 10px);
    line-height: calc(23 / 17);
    font-size: min(calc(100vw / var(--viewport)* 17), 17px);
    letter-spacing: normal;
  }
}
main .renewal .treatments .item .label {
  line-height: calc(52 / 48);
  font-size: calc(100vw / var(--viewport)* 48);
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.05em;
}
@media (min-width: 769px) {
  main .renewal .treatments .item .label {
    line-height: calc(40 / 32);
    font-size: min(calc(100vw / var(--viewport)* 32), 32px);
  }
}
main .renewal .btn_renewal a {
  position: relative;
  display: block;
  margin-left: auto;
  background: #036EA8;
  border-radius: calc(100vw / var(--viewport)* 50);
  padding: calc(100vw / var(--viewport)* 15);
  width: calc(100vw / var(--viewport)* 340);
  text-align: center;
  line-height: calc(50 / 26);
  font-size: calc(100vw / var(--viewport)* 26);
  font-weight: 500;
  color: #FFFFFF;
}
@media (min-width: 769px) {
  main .renewal .btn_renewal a {
    border-radius: min(calc(100vw / var(--viewport)* 50), 50px);
    padding: min(calc(100vw / var(--viewport)* 11), 11px);
    width: min(calc(100vw / var(--viewport)* 233), 233px);
    line-height: calc(33 / 18);
    font-size: min(calc(100vw / var(--viewport)* 18), 18px);
  }
}
main .renewal .btn_renewal a::after {
  content: "";
  position: absolute;
  inset: 0 calc(100vw / var(--viewport)* 29) 0 auto;
  margin: auto;
  background: url(../img/icon_arrow.svg) center/cover no-repeat;
  width: calc(100vw / var(--viewport)* 11);
  height: calc(100vw / var(--viewport)* 17);
}
@media (min-width: 769px) {
  main .renewal .btn_renewal a::after {
    right: min(calc(100vw / var(--viewport)* 20), 20px);
    width: min(calc(100vw / var(--viewport)* 8), 8px);
    height: min(calc(100vw / var(--viewport)* 12), 12px);
  }
}

/* faq */
main .faq {
  margin-top: calc(100vw / var(--viewport) * 90);
  margin-bottom: calc(100vw / var(--viewport) * 60);
}
@media (min-width: 769px) {
  main .faq {
    margin-top: min(calc(100vw / var(--viewport) * 140), 140px);
    margin-bottom: min(calc(100vw / var(--viewport) * 100), 100px);
  }
}
main .faq .title {
  margin-bottom: calc(100vw / var(--viewport) * 20);
  text-align: center;
  line-height: calc(66 / 36);
  font-size: calc(100vw / var(--viewport)* 36);
  font-weight: 700;
  color: #333333;
}
@media (min-width: 769px) {
  main .faq .title {
    margin-bottom: min(calc(100vw / var(--viewport) * 30), 30px);
    line-height: calc(66 / 34);
    font-size: min(calc(100vw / var(--viewport)* 34), 34px);
    color: #000000;
  }
}
main .faq .list {
  display: flex;
  flex-direction: column;
  gap: calc(100vw / var(--viewport) * 20);
}
@media (min-width: 769px) {
  main .faq .list {
    gap: min(calc(100vw / var(--viewport) * 20), 20px);
  }
}
main .faq .list .item .term {
  background: #EFE8D8;
  border-radius: calc(100vw / var(--viewport) * 20);
  padding: calc(100vw / var(--viewport) * 35);
}
@media (min-width: 769px) {
  main .faq .list .item .term {
    border-radius: min(calc(100vw / var(--viewport)* 20), 20px);
    padding: min(calc(100vw / var(--viewport)* 35), 35px);
    cursor: pointer;
  }
}
main .faq .list .item .term .label {
  position: relative;
  padding-left: calc(100vw / var(--viewport) * 50);
  padding-right: calc(100vw / var(--viewport) * 55);
  line-height: calc(36 / 24);
  font-size: calc(100vw / var(--viewport)* 24);
  font-weight: 600;
  color: #333333;
}
@media (min-width: 769px) {
  main .faq .list .item .term .label {
    padding-left: min(calc(100vw / var(--viewport)* 50), 50px);
    padding-right: min(calc(100vw / var(--viewport)* 55), 55px);
    line-height: calc(36 / 22);
    font-size: min(calc(100vw / var(--viewport)* 22), 22px);
    color: #000000;
  }
}
main .faq .list .item .term .label::before {
  content: "Q";
  position: absolute;
  top: calc(100vw / var(--viewport)* -2);
  left: 0;
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 35);
  font-weight: 600;
  color: #333333;
}
@media (min-width: 769px) {
  main .faq .list .item .term .label::before {
    top: min(calc(100vw / var(--viewport)* -2), -2px);
    font-size: min(calc(100vw / var(--viewport)* 35), 35px);
  }
}
main .faq .list .item .term .label::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background: url(../img/icon_plus.svg) center/cover no-repeat;
  width: calc(100vw / var(--viewport) * 34);
  height: calc(100vw / var(--viewport) * 34);
}
@media (min-width: 769px) {
  main .faq .list .item .term .label::after {
    width: min(calc(100vw / var(--viewport)* 34), 34px);
    height: min(calc(100vw / var(--viewport)* 34), 34px);
  }
}
main .faq .list .item .term.open .label::after {
  background: url(../img/icon_minus.svg) center/cover no-repeat;
}
main .faq .list .item .description {
  display: none;
  margin-top: calc(100vw / var(--viewport) * 20);
  background: #F5F5F5;
  border-radius: calc(100vw / var(--viewport) * 20);
  padding: calc(100vw / var(--viewport) * 35);
}
@media (min-width: 769px) {
  main .faq .list .item .description {
    margin-top: 0;
    border-radius: min(calc(100vw / var(--viewport)* 20), 20px);
    padding: min(calc(100vw / var(--viewport)* 35), 35px);
  }
}
main .faq .list .item .description .answer {
  position: relative;
  padding-left: calc(100vw / var(--viewport) * 50);
  line-height: calc(36 / 24);
  font-size: calc(100vw / var(--viewport)* 24);
  font-weight: 600;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .faq .list .item .description .answer {
    padding-left: min(calc(100vw / var(--viewport)* 50), 50px);
    line-height: calc(36 / 22);
    font-size: min(calc(100vw / var(--viewport)* 22), 22px);
  }
}
main .faq .list .item .description .answer::before {
  content: "A";
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
  font-size: calc(100vw / var(--viewport)* 35);
  font-weight: 600;
  color: #BBA171;
}
@media (min-width: 769px) {
  main .faq .list .item .description .answer::before {
    font-size: min(calc(100vw / var(--viewport)* 35), 35px);
  }
}
main .faq .list .item .description .answer:not(:last-child) {
  margin-bottom: calc(100vw / var(--viewport)* 25);
}
@media (min-width: 769px) {
  main .faq .list .item .description .answer:not(:last-child) {
    margin-bottom: min(calc(100vw / var(--viewport)* 15), 15px);
  }
}
main .faq .list .item .description .text {
  padding-left: calc(100vw / var(--viewport) * 50);
  line-height: calc(36 / 24);
  font-size: calc(100vw / var(--viewport)* 24);
  font-weight: 500;
  color: #333333;
}
@media (min-width: 769px) {
  main .faq .list .item .description .text {
    padding-left: min(calc(100vw / var(--viewport)* 50), 50px);
    line-height: calc(40 / 20);
    font-size: min(calc(100vw / var(--viewport)* 20), 20px);
    color: #000000;
  }
}

/* btn_cta */
main .btn_cta {
  margin-top: calc(100vw / var(--viewport) * 60);
  margin-bottom: calc(100vw / var(--viewport) * 100);
}
@media (min-width: 769px) {
  main .btn_cta {
    margin-top: min(calc(100vw / var(--viewport) * 60), 60px);
    margin-bottom: min(calc(100vw / var(--viewport) * 110), 110px);
  }
}
main .btn_cta a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  background: #C1272D;
  border-radius: calc(100vw / var(--viewport) * 20);
  width: calc(100vw / var(--viewport) * 590);
  height: calc(100vw / var(--viewport) * 140);
  text-align: center;
  font-size: calc(100vw / var(--viewport)* 35);
  font-weight: 700;
  color: #fff;
}
@media (min-width: 769px) {
  main .btn_cta a {
    border-radius: min(calc(100vw / var(--viewport)* 20), 20px);
    width: min(calc(100vw / var(--viewport)* 600), 600px);
    height: min(calc(100vw / var(--viewport)* 100), 100px);
    font-size: min(calc(100vw / var(--viewport)* 35), 35px);
  }
}

/* footer */
.l-footer__logo {
  width: calc(100vw / var(--viewport) * 99);
  max-width: 100px;
  margin: 0 auto calc(100vw / var(--viewport) * 20);
}
.l-footer {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding-bottom: 30px;
  padding-top: 30px;
  line-height: 0.8;
}
.l-footer .copy-right {
  font-size: 16px;
  letter-spacing: 0;
  line-height: 0;
}
.displayFlex {
  display: flex;
  justify-content: center;
  line-height: 1.6;
  color: #fff;
}
.footerflex1 {
  color: #fff;
}
.footerText {
  font-size: 14px;
  color: #fff;
  letter-spacing: 0;
}
.footerflex2 {
  margin-left: 0.6em;
  color: #fff;
}
.footerflex1 a {
  border-bottom: 1px solid #fff;
}
@media screen and (max-width:767px){
  .l-footer .copy-right {
    font-size: calc(100vw / var(--viewport) * 18);
  }
  .footerflex1 {
    display: none;
  }
  .footerflex2 {
    margin: calc(100vw / var(--viewport) * 10) 0 0 0;
    color: #fff;
  }
  .footerText {
    font-size: calc(100vw / var(--viewport) * 15);
  }
  .l-footer {
    padding-bottom: calc(100vw / var(--viewport) * 320);
  }
}
@media screen and (min-width:768px){
  .l-footer__logo {
    margin: 0 auto 20px;
  }
  .l-footer__logo img{
    width: 99px;
  }
  .l-footer .displayFlex{
      margin-top: 10px;
  }
}