@charset "UTF-8";
@font-face {
  font-family: "FriendlyExpart";
  src: url(../../font/FriendlyExpart.woff) format("woff");
}
:root {
  --primary: #FADBAA;
  --white: #fff;
  --lightGoldGray: #FDFAF2;
  --midGoldGray: #FBF8F0;
  --goldGray: #F8F3E7;
  --lightRizeGold: #C6B183;
  --rizeGold: #B59751;
  --green: #65D171;
  --orange: #F7B837;
  --lightGray: #B2ADA9;
  --gray: #88837F;
  --darkGray: #6D6764;
  --subGray01: #A7A7A7;
  --subGray02: #BFBFBF;
  --navy: #7F8BE3;
  --lightBlue: #23B8BA;
  --grad-start-color01: #F7B837;
  --grad-end-color01: #B59751;
  --bg-gradient01: linear-gradient(var(--grad-start-color01), var(--grad-end-color01));
  --grad-start-color02: #BAA063;
  --grad-end-color02: #A88534;
  --bg-gradient02: linear-gradient(var(--grad-start-color02), var(--grad-end-color02));
}

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, Arial, Helvetica, Verdana, sans-serif, "ＭＳ Ｐゴシック", "MS PGothic";
  font-weight: bold;
  line-height: 1.6;
  color: var(--gray);
  font-size: 16px;
  background: var(--goldGray);
}
@media screen and (max-width: 657px) {
  body {
    font-size: 3.4375vw;
  }
}
@media screen and (min-width: 658px) {
  body {
    min-width: 1280px;
  }
}

a {
  color: inherit;
  text-decoration: none;
}
@media screen and (min-width: 658px) {
  a {
    -wewbkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
  }
  a:hover {
    opacity: 0.7;
  }
}

img {
  width: 100%;
  height: auto;
}

main {
  position: relative;
  overflow: hidden;
}

h2 {
  color: var(--white);
  font-size: 42px;
  text-align: center;
  letter-spacing: 0.2em;
  background: #C6B183;
  padding: 5.15625vw 0;
}
@media screen and (max-width: 657px) {
  h2 {
    font-size: 6.5625vw;
  }
}
@media screen and (min-width: 658px) {
  h2 {
    padding: 30px 0 36px;
  }
}

.headline__ballon {
  color: #656FB9;
  font-size: 40px;
  text-align: center;
  background: url(../../img/bg_h3.png) top center no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 24.6875vw;
  padding-top: 3.4375vw;
}
@media screen and (max-width: 657px) {
  .headline__ballon {
    font-size: 6.25vw;
  }
}
@media screen and (min-width: 658px) {
  .headline__ballon {
    height: 158px;
    padding-top: 22px;
  }
}
.headline__ballon .border {
  color: var(--white);
  font-weight: 900;
  -webkit-text-stroke: 1px #e8857d;
}

@media screen and (min-width: 658px) {
  .krkr-button-img {
    right: 20px !important;
    bottom: 20px !important;
  }
}
@media screen and (max-width: 657px) {
  .krkr-button-img {
    width: 21.875vw;
    right: 3.125vw !important;
    bottom: 3.125vw !important;
  }
}
.jsFadeup {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.7s 0.4s ease, opacity 0.7s 0.4s ease;
}
.jsFadeup.is-act {
  transform: translateY(0);
  opacity: 1;
}

.jsFadeup2 {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.7s 0s ease, opacity 0.7s 0s ease;
}
.jsFadeup2.is-act {
  transform: translateY(0);
  opacity: 1;
}

.jsFadeupLead {
  color: var(--gray);
}
.jsFadeupLead .row {
  display: block;
  position: relative;
  overflow: hidden;
  opacity: 0;
  min-height: 10vw;
  line-height: 1.8928571429;
}
@media screen and (min-width: 658px) {
  .jsFadeupLead .row {
    line-height: 1.89;
    min-height: 54px;
  }
}
.jsFadeupLead .line {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  transform: translateY(88%);
  transition: 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.jsFadeupLead .modDot::before {
  opacity: 0;
  transition-delay: 0.5s;
}
@media screen and (max-width: 657px) {
  .jsFadeupLead .modDot::before {
    top: -1.875vw;
  }
}
.jsFadeupLead.is-act .row {
  opacity: 1;
}
.jsFadeupLead.is-act .line {
  transform: translateY(0);
  bottom: 0;
}
.jsFadeupLead.is-act .modDot::before {
  opacity: 1;
}

.jsSlideIn {
  opacity: 0;
}
.jsSlideIn.is-act {
  animation: SlideIn 1.6s forwards;
}
@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.relative {
  position: relative;
}

.bold {
  font-weight: bold;
}

.fw_normal {
  font-weight: normal;
}

.font_red {
  color: #E8857D;
}

.font_brown {
  color: #C2AD80;
}

.font_purple {
  color: #D393CE;
}

.font_pink {
  color: #F4A0AA;
}

.font_orange {
  color: var(--orange);
}

.font_navy {
  color: var(--navy);
}

.font_bordeaux {
  color: #8D0333;
}

.font_fee {
  font-family: "FriendlyExpart";
  font-weight: normal;
  letter-spacing: -0.01em;
  line-height: 1;
}

.ls0 {
  letter-spacing: 0;
}

.rl {
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

.inner__content {
  padding: 0 5.3125vw;
}
@media screen and (min-width: 658px) {
  .inner__content {
    padding: 0 34px;
  }
}

.inner__content.cv {
  margin-top: 10.9375vw;
}
@media screen and (min-width: 658px) {
  .inner__content.cv {
    margin-top: 70px;
  }
}
.inner__content.cv > .fw_normal {
  font-size: 14px;
  line-height: 1.4;
  margin-top: 4.984375vw;
}
@media screen and (max-width: 657px) {
  .inner__content.cv > .fw_normal {
    font-size: 2.8125vw;
  }
}
@media screen and (min-width: 658px) {
  .inner__content.cv > .fw_normal {
    margin-top: 31.9px;
  }
}

.flex {
  display: flex;
}

.va1 {
  vertical-align: 1px;
}

.va3 {
  vertical-align: 3px !important;
}

.va5 {
  vertical-align: 5px;
}

.vam {
  vertical-align: middle;
}

.drop-shadow {
  filter: drop-shadow(0 0 3.75vw rgba(0, 0, 0, 0.16));
}
@media screen and (min-width: 658px) {
  .drop-shadow {
    filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.16));
  }
}

.modAccordion {
  margin: 0;
}

.modAccordion__head {
  max-width: initial;
  background: #C6B183;
  padding: 3.90625vw 5.3125vw 3.90625vw 5.3125vw;
}
@media screen and (min-width: 658px) {
  .modAccordion__head {
    padding: 25px 0;
  }
}
.modAccordion__head h3 {
  position: relative;
}
.modAccordion__head h3 .toggleIcon {
  right: 0;
}
@media screen and (min-width: 658px) {
  .modAccordion__head h3 {
    width: 640px;
    padding: 0 34px;
    margin: 0 auto;
  }
  .modAccordion__head h3 .toggleIcon {
    right: 34px;
  }
}

.modAccordion__body {
  background: none;
  display: none;
}
@media screen and (min-width: 658px) {
  .modAccordion__body {
    margin: 0 auto;
    padding: 70px 0;
  }
}

.modTableCompare th, .modTableCompare td {
  vertical-align: middle;
}
.modTableCompare th {
  color: var(--white);
  width: 15.3125vw;
}
@media screen and (min-width: 658px) {
  .modTableCompare th {
    width: 98px;
  }
}
.modTableCompare th.th__potenza, .modTableCompare th.th__derma {
  font-size: 32px;
  width: 37.5vw;
  height: 12.5vw;
  border-radius: 3.125vw 3.125vw 0 0;
  padding-top: 0.9375vw;
}
@media screen and (max-width: 657px) {
  .modTableCompare th.th__potenza, .modTableCompare th.th__derma {
    font-size: 5vw;
  }
}
@media screen and (min-width: 658px) {
  .modTableCompare th.th__potenza, .modTableCompare th.th__derma {
    width: 240px;
    height: 80px;
    border-radius: 20px 20px 0 0;
    padding-top: 0;
  }
}
.modTableCompare th.th__potenza {
  background: #42D4D6;
}
.modTableCompare th.th__derma {
  background: #9F9F9F;
}
.modTableCompare tr:nth-of-type(n+2) th, .modTableCompare tr:nth-of-type(n+2) td {
  font-size: 22px;
  background: var(--lightRizeGold);
  padding: 3.125vw 2.34375vw;
  border-bottom: 0.3125vw solid var(--white);
}
@media screen and (max-width: 657px) {
  .modTableCompare tr:nth-of-type(n+2) th, .modTableCompare tr:nth-of-type(n+2) td {
    font-size: 3.4375vw;
  }
}
@media screen and (min-width: 658px) {
  .modTableCompare tr:nth-of-type(n+2) th, .modTableCompare tr:nth-of-type(n+2) td {
    padding: 20px 15px;
    border-bottom: 2px solid var(--white);
  }
}
.modTableCompare tr:nth-of-type(n+2) td {
  vertical-align: baseline;
  border-bottom: 0.3125vw solid var(--lightRizeGold);
}
@media screen and (min-width: 658px) {
  .modTableCompare tr:nth-of-type(n+2) td {
    border-bottom: 2px solid var(--lightRizeGold);
  }
}
.modTableCompare tr:nth-of-type(n+2) td:first-of-type {
  background: #fff;
}
.modTableCompare tr:nth-of-type(n+2) td:nth-of-type(2) {
  background: #EFEFEF;
}
.modTableCompare tr:last-of-type th, .modTableCompare tr:last-of-type td {
  border-bottom: none;
}

#wrapper {
  width: 100%;
  margin: 0 auto;
  background: var(--goldGray);
  filter: drop-shadow(0 0 4.6875vw rgba(0, 0, 0, 0.1));
}
@media screen and (min-width: 658px) {
  #wrapper {
    width: 640px;
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.1));
  }
}

@media screen and (min-width: 658px) {
  .bg_pc_fixed {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background: url("../../img/bg_pc_fixed.jpg") top center no-repeat;
    background-size: cover;
    z-index: -2;
  }
}

@media screen and (min-width: 658px) {
  .max_w640 {
    max-width: 640px;
    margin: 0 34px;
  }
  .max_w900 {
    max-width: 900px;
    margin: 0 auto;
  }
  .max_w1280 {
    max-width: 1280px;
    margin: 0 auto;
  }
}
#mv {
  background: url(../../img/mv.png) top center no-repeat;
  background-size: 100% auto;
  height: 140vw;
  position: relative;
}
@media screen and (min-width: 658px) {
  #mv {
    height: 896px;
  }
}
#mv #header {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 99;
  transition: all 0.4s;
}
#mv #header.active {
  background: rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 657px) {
  #mv #header {
    max-width: 640px;
  }
}
#mv #header .header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.125vw 0vw 3.125vw 3.125vw;
}
@media screen and (min-width: 658px) {
  #mv #header .header__inner {
    max-width: 1280px;
    padding: 20px 0 20px 20px;
  }
}
#mv #header .header__inner #logo {
  width: 12.5vw;
}
@media screen and (min-width: 658px) {
  #mv #header .header__inner #logo {
    width: 80px;
  }
}

/**MV__end**/
#contents img {
  vertical-align: middle;
}

.cta.cta01 {
  background: #ffe710;
  padding: 9.53125vw 0 12.34375vw;
}
@media screen and (min-width: 658px) {
  .cta.cta01 {
    padding: 61px 0 79px;
  }
}
.cta.cta01 .cta__text {
  color: #B19451;
  font-size: 4.6875vw;
  text-align: center;
  margin-bottom: 3.75vw;
}
@media screen and (min-width: 658px) {
  .cta.cta01 .cta__text {
    font-size: 30px;
    margin-bottom: 24px;
  }
}
.cta.cta02 {
  background: #faf2ea;
  padding: 9.53125vw 0 12.34375vw;
}
@media screen and (min-width: 658px) {
  .cta.cta02 {
    padding: 61px 0 79px;
  }
}
.cta.cta02 .cta__text {
  color: #B19451;
  font-size: 4.375vw;
  text-align: center;
  margin-bottom: 3.75vw;
}
@media screen and (min-width: 658px) {
  .cta.cta02 .cta__text {
    font-size: 28px;
    margin-bottom: 24px;
  }
}
.cta.cta03 {
  background: #FFE710;
  padding: 10.3125vw 0 12.34375vw;
}
@media screen and (min-width: 658px) {
  .cta.cta03 {
    padding: 66px 0 79px;
  }
}
.cta.cta03 .cta__text {
  color: #F84C0E;
  font-size: 5vw;
  text-align: center;
  margin-bottom: 3.75vw;
  position: relative;
}
@media screen and (min-width: 658px) {
  .cta.cta03 .cta__text {
    font-size: 32px;
    margin-bottom: 24px;
  }
}
.cta.cta03 .cta__text::after {
  content: "";
  width: 6.875vw;
  height: 6.40625vw;
  background: url(../../img/onePoint.png) center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -2.1875vw;
  right: 10.46875vw;
}
@media screen and (min-width: 658px) {
  .cta.cta03 .cta__text::after {
    width: 44px;
    height: 41px;
    top: -14px;
    right: 67px;
  }
}
.cta .button a {
  color: #fff;
  font-size: 4.0625vw;
  font-weight: bold;
  letter-spacing: 0.05em;
  background: linear-gradient(to right, #FF6200, #EE7700);
  width: 89.375vw;
  height: 19.6875vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50vw;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 658px) {
  .cta .button a {
    font-size: 26px;
    width: 572px;
    height: 126px;
  }
}
.cta .button a::after {
  content: "";
  background: url(/assets/img/common/icon_btn_arrow.svg) no-repeat center center;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 5vw;
  height: 0.9375vw;
  right: 3.125vw;
}
@media screen and (min-width: 658px) {
  .cta .button a::after {
    width: 18px;
    height: 3px;
    right: 20px;
  }
}

.interest-free {
  height: 135.46875vw;
  background: url(../../img/bg_interest-free.png) top center no-repeat;
  background-size: 100% auto;
  position: relative;
}
@media screen and (min-width: 658px) {
  .interest-free {
    height: 867px;
  }
}
.interest-free img {
  width: 89.375vw;
  position: absolute;
  top: 25vw;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media screen and (min-width: 658px) {
  .interest-free img {
    width: 572px;
    top: 160px;
  }
}

.footer {
  padding: 4.6133333333vw 0vw 5.8266666667vw 0vw;
  position: relative;
}

.footer__logo {
  text-align: center;
}

.footer__logo__icon {
  display: inline-block;
}

.footer__logo__icon img {
  width: 14.6666666667vw;
  height: 14.6666666667vw;
}

.footer__logo__text {
  font-weight: normal;
}

.footer__logo__text {
  font-size: 18px;
  margin: 3.7333333333vw 0vw 13.3333333333vw 0vw;
}

.footer__logo__text .emp {
  font-weight: bold;
}

.footer__logo__text .emp {
  font-size: 24px;
}

.footer .flex {
  font-size: 18px;
  justify-content: center;
  margin-bottom: 3.4666666667vw;
}

.footer copyright {
  font-size: 17px;
  font-weight: normal;
  text-align: center;
  display: table;
  margin: 0 auto;
}

@media screen and (max-width: 657px) {
  .footer__logo__text {
    font-size: 2.4vw;
  }
  .footer__logo__text .emp {
    font-size: 3.2vw;
  }
  .footer .flex {
    font-size: 2.4vw;
  }
  .footer copyright {
    font-size: 2.2666666667vw;
  }
}
@media screen and (min-width: 658px) {
  .footer {
    padding: 34.6px 0 43.7px;
  }
  .footer__logo__icon img {
    width: 110px;
    height: 110px;
  }
  .footer__logo__text {
    margin: 28px 0 100px;
  }
  .footer .flex {
    margin-bottom: 26px;
  }
}