@charset "UTF-8";
/*共通scss 野津作成　編集基本的に不可*/
/***** ベース *****/
html {
  scroll-behavior: smooth;
}

body {
  text-align: justify;
  text-justify: inter-ideograph;
  font-family: var(--font_base);
  background-color: var(--color_bg_base);
  color: var(--color_base);
  line-height: var(--line_base);
  font-size: var(--fsize_base_sp);
}
@media screen and (min-width: 835px) {
  body {
    font-size: var(--fsize_base_pc);
  }
}

img {
  height: auto;
}

sub {
  font-size: 62.5%;
  vertical-align: baseline;
}

sup {
  vertical-align: text-top;
  line-height: 3;
  font-size: 1rem;
}
@media screen and (min-width: 835px) {
  sup {
    font-size: 1.2rem;
  }
}

/***** アイコンフォント *****/
@font-face {
  font-family: "icon";
  src: url("../fonts/icon.ttf?ksnn4u") format("truetype"), url("../fonts/icon.woff?ksnn4u") format("woff"), url("../fonts/icon.svg?ksnn4u#icon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/***** スクロールアニメ *****/
.fade_show {
  opacity: 0;
}

.fade_up {
  opacity: 0;
  transform: translate(0, 20px);
}

/***** ヘッダー *****/
#header {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: var(--header_sp);
}
@media screen and (min-width: 835px) {
  #header {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  #header {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  #header {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  #header {
    padding-right: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  #header {
    height: var(--header_pc);
  }
}

.header__logo {
  font-family: "icon";
  color: var(--color_dark);
  line-height: 0.5;
  font-size: 60px;
}
@media screen and (min-width: 835px) {
  .header__logo {
    font-size: 95px;
  }
}

/***** footer *****/
#footer {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_m);
  padding-top: var(--pad_ll);
  background-color: var(--color_dark);
  box-shadow: -25vw 0 0 0 var(--color_dark), -50vw 0 0 0 var(--color_dark), 25vw 0 0 0 var(--color_dark), 50vw 0 0 0 var(--color_dark);
  color: var(--color_light02);
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr max-content;
  -moz-column-gap: 5%;
       column-gap: 5%;
  padding-bottom: var(--pad_xxl);
}
@media screen and (min-width: 835px) {
  #footer {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  #footer {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  #footer {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  #footer {
    padding-right: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  #footer {
    padding-top: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  #footer {
    padding-bottom: var(--pad_6l);
  }
}

.footer__ttl {
  grid-row: 1/3;
  grid-column: 1;
  justify-self: start;
}
.footer__ttl span {
  line-height: 0.5;
  display: block;
  font-family: "icon";
  color: #ffffff;
  font-size: 65px;
}
@media screen and (min-width: 835px) {
  .footer__ttl span {
    font-size: 105px;
  }
}

.footer__lnk {
  font-family: "icon";
  display: flex;
  gap: 1em;
  font-size: 18px;
}
@media screen and (min-width: 835px) {
  .footer__lnk {
    font-size: 20px;
  }
}

.footer__copy {
  font-family: var(--font_point_en02);
  font-weight: 300;
  font-size: 1.2rem;
  grid-column: 2;
  grid-row: 2;
}

/***** メイン *****/
main {
  overflow: hidden;
}

/***** MV *****/
.mv {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  position: relative;
  z-index: 0;
  height: calc(var(--vh) * 90);
  min-height: 500px;
  max-height: 860px;
  box-sizing: border-box;
  padding-bottom: clamp(var(--pad_m), 5vw, var(--pad_xxl));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 var(--pad_ss);
}
@media screen and (min-width: 835px) {
  .mv {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .mv {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .mv {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .mv {
    padding-right: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .mv {
    margin: 0 var(--pad_m);
  }
}
@media screen and (min-width: 1240px) {
  .mv {
    margin: 0 var(--pad_xxxl);
  }
}

.mv__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.mv__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.mv__ttl,
.mv__txt {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_m);
  width: 100%;
}

.mv__ttl {
  line-height: 1.75;
  margin-bottom: 0.5em;
  font-family: var(--font_point);
  font-size: 2.8rem;
}
@media screen and (min-width: 835px) {
  .mv__ttl {
    font-size: 4rem;
  }
}

.mv__txt {
  font-family: var(--font_point_en);
  color: #ffffff;
  font-size: 1.2rem;
}

/***** イントロ *****/
.intr {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  padding-bottom: var(--pad_ll);
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 835px) {
  .intr {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .intr {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .intr {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .intr {
    padding-right: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .intr {
    padding-bottom: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  .intr {
    padding-top: 1px;
  }
}

.intr__head {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_m);
  position: relative;
  z-index: 10;
  margin-top: var(--pad_m);
  margin-bottom: var(--pad_l);
}
@media screen and (min-width: 835px) {
  .intr__head {
    margin-top: clamp(-59px, -3vw, -20px);
    margin-bottom: clamp(80px, 12vw, 215px);
    display: grid;
    grid-template-rows: 1fr min-content;
    grid-template-columns: 1fr 50%;
    -moz-column-gap: 4%;
         column-gap: 4%;
    align-items: end;
  }
}

.intr__head-ttl {
  font-family: var(--font_point);
  border: 1px solid;
  padding: 0 1em;
  margin-bottom: 1.5em;
  max-width: -moz-max-content;
  max-width: max-content;
  font-size: 1.6rem;
}
@media screen and (min-width: 835px) {
  .intr__head-ttl {
    font-size: 1.8rem;
  }
}

.intr__head-logo {
  color: var(--color_light02);
  font-size: 1.2rem;
}
@media screen and (max-width: 834px) {
  .intr__head-logo {
    margin-bottom: var(--pad_ss);
  }
}
@media screen and (min-width: 835px) {
  .intr__head-logo {
    font-size: 1.4rem;
  }
}
.intr__head-logo img {
  display: block;
  max-width: 452px;
  width: 80%;
  margin-bottom: 0.5em;
}

.intr__head-cont {
  margin: 40px 0 20px;
}
.intr__head-cont span {
  background: #ebedf5;
  color: var(--color_base);
  border-radius: 0 25px 25px 0;
  font-family: var(--font_point);
  font-size: 1.2em;
  padding: 10px 25px;
}

.intr__head-cont-ingre {
  color: var(--color_base);
  font-size: 76%;
}
.intr__head-cont-ingre .is-pc {
  display: none;
}
@media screen and (min-width: 835px) {
  .intr__head-cont-ingre .is-pc {
    display: block;
  }
}

.intr__head-mk {
  width: clamp(140px, 25vw, 242px);
}
@media screen and (max-width: 834px) {
  .intr__head-mk {
    position: absolute;
    top: 0;
    right: 0;
  }
}
@media screen and (max-width: 375px) {
  .intr__head-mk {
    position: absolute;
    top: 20px;
    right: -8px;
  }
}
@media screen and (min-width: 835px) {
  .intr__head-mk {
    grid-column: 2;
    grid-row: 1/3;
    justify-self: end;
    align-self: start;
    transform: translateY(-75%);
    margin-right: calc(-1 * var(--pad_ss));
  }
}
@media screen and (min-width: 1440px) {
  .intr__head-mk {
    margin-right: -55px;
  }
}

.intr__head-img img {
  width: 100%;
}
@media screen and (min-width: 835px) {
  .intr__head-img {
    grid-column: 2;
    grid-row: 1/3;
    margin-right: clamp(-85px, -4.5vw, -1 * var(--pad_s));
    padding-bottom: 9.5em;
  }
}

.intr__cont {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_m);
  position: relative;
  z-index: 0;
  margin-bottom: var(--pad_m);
}
@media screen and (min-width: 835px) {
  .intr__cont {
    margin-bottom: var(--pad_xxl);
    display: grid;
    grid-template-rows: 1fr min-content min-content min-content 0.5fr;
    grid-template-columns: 50% 1fr;
    -moz-column-gap: 5.5%;
         column-gap: 5.5%;
  }
}

@media screen and (max-width: 834px) {
  .intr__cont-img {
    margin-top: var(--pad_ss);
    height: 300px;
  }
}
@media screen and (min-width: 835px) {
  .intr__cont-img {
    grid-column: 1;
    grid-row: 1/6;
  }
}
.intr__cont-img img {
  width: 100%;
}
@media screen and (max-width: 834px) {
  .intr__cont-img img {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
  }
}

.intr__cont-ttl {
  font-family: var(--font_point);
  margin-bottom: 1em;
  max-width: -moz-max-content;
  max-width: max-content;
  font-size: 2rem;
}
@media screen and (min-width: 835px) {
  .intr__cont-ttl {
    align-self: end;
  }
}
@media screen and (min-width: 990px) {
  .intr__cont-ttl {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 1140px) {
  .intr__cont-ttl {
    font-size: 3rem;
  }
}
.intr__cont-ttl span {
  display: block;
  font-size: 160%;
  line-height: 1.354;
}

@media screen and (min-width: 990px) {
  .intr__cont > p,
  .intr__cont-lst {
    margin-right: 10%;
  }
}

.intr__cont-lst {
  margin-top: 1.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 8%;
}
.intr__cont-lst dt {
  background-color: var(--color_light);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 2.2em;
  width: 100%;
}
.intr__cont-lst dd::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  aspect-ratio: 1/1;
  border-radius: 0.5em;
  background-color: currentColor;
  margin-right: 0.3em;
}

.intr__cont-note {
  margin: 1.5em 0 2em;
  font-size: 1rem;
}
@media screen and (min-width: 1140px) {
  .intr__cont-note {
    font-size: 1.2rem;
  }
}

.intr__cont-opt {
  display: block;
  width: 100%;
  max-width: 420px;
}
@media screen and (max-width: 834px) {
  .intr__cont-opt {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 835px) {
  .intr__cont-opt {
    align-self: start;
  }
}

.intr__cont-obj01,
.intr__cont-obj02 {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 1%;
  left: 85%;
}
@media screen and (min-width: 835px) {
  .intr__cont-obj01,
  .intr__cont-obj02 {
    top: 0;
    left: 50%;
  }
}
.intr__cont-obj01 img,
.intr__cont-obj02 img {
  width: 100%;
}

.intr__cont-obj01 {
  width: clamp(80px, 12vw, 260px);
  z-index: 10;
}

.intr__cont-obj02 {
  width: clamp(200px, 40vw, 734px);
  z-index: -1;
}

.intr__cont-rec {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_m);
  position: relative;
  box-sizing: border-box;
  background-color: #ffffff;
  line-height: 1.778;
  padding: var(--pad_m) var(--pad_ss);
}
@media screen and (min-width: 835px) {
  .intr__cont-rec {
    padding: var(--pad_ll) 5%;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 25% 1fr;
    -moz-column-gap: 3%;
         column-gap: 3%;
    align-items: end;
  }
}

@media screen and (max-width: 834px) {
  .intr__cont-rec-img {
    max-width: 250px;
    aspect-ratio: 1/1;
    margin: 0 auto 1em;
  }
}
@media screen and (min-width: 835px) {
  .intr__cont-rec-img {
    grid-column: 1;
    grid-row: 1/3;
    align-self: stretch;
  }
}
.intr__cont-rec-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 834px) {
  .intr__cont-rec-img img {
    -o-object-position: top center;
       object-position: top center;
  }
}

.intr__cont-rec-name {
  margin-top: 1em;
  font-size: 1.3rem;
}
@media screen and (min-width: 835px) {
  .intr__cont-rec-name {
    font-size: 1.4rem;
    align-self: start;
  }
}
.intr__cont-rec-name span {
  display: block;
  font-size: 128.6%;
}

.intr__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.intr__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.intr__bg img {
  -o-object-position: center bottom;
     object-position: center bottom;
}

/***** 若い肌でも油断禁物 *****/
.dtl {
  padding-top: var(--pad_ll);
  padding-bottom: var(--pad_ll);
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  background-image: url(../img/bg_grad.webp);
  background-size: 100% auto;
  background-position: center -10vw;
  background-repeat: repeat-y;
}
@media screen and (min-width: 835px) {
  .dtl {
    padding-top: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  .dtl {
    padding-bottom: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  .dtl {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .dtl {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .dtl {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .dtl {
    padding-right: var(--pad_l);
  }
}
.dtl > section {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_m);
  box-sizing: border-box;
}
.dtl > section:not(:last-child) {
  margin-bottom: var(--pad_l);
}
@media screen and (min-width: 835px) {
  .dtl > section:not(:last-child) {
    margin-bottom: var(--pad_xxl);
  }
}

.dtl__ttl {
  text-align: center;
  font-family: var(--font_point);
  margin-bottom: 1.5em;
  font-size: 2rem;
}
@media screen and (min-width: 990px) {
  .dtl__ttl {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 1140px) {
  .dtl__ttl {
    font-size: 3rem;
  }
}
.dtl__ttl span {
  display: block;
  font-size: 160%;
  line-height: 1.354;
}
@media screen and (min-width: 640px) {
  .dtl__ttl span br {
    display: none;
  }
}

.dtl__txt {
  margin-left: auto;
  margin-right: auto;
  max-width: 49em;
}

.dtl__sub {
  position: relative;
  background-color: var(--color_point05);
  color: #ffffff;
  font-family: var(--font_point);
  display: flex;
  align-items: center;
  max-width: -moz-max-content;
  max-width: max-content;
  margin: 0 auto 1em;
  padding: 0 1.5em;
  height: 2.5em;
  border-radius: 2em;
  margin-top: var(--pad_ll);
  font-size: 1.8rem;
}
@media screen and (min-width: 835px) {
  .dtl__sub {
    margin-top: var(--pad_l);
    font-size: 3rem;
  }
}
.dtl__sub span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color_base);
  box-sizing: border-box;
  padding: 0 0 0.2em 0.5em;
  background-image: url("../img/bubble_01.svg");
  background-size: contain;
  width: 5em;
  aspect-ratio: 1/1;
  font-size: 80%;
  position: absolute;
  left: 0;
}
@media screen and (max-width: 834px) {
  .dtl__sub span {
    top: 0;
    transform: translate(-45%, -65%);
  }
}
@media screen and (min-width: 835px) {
  .dtl__sub span {
    bottom: -0.5em;
    transform: translateX(-80%);
  }
}

.dtl__img {
  margin-left: auto;
  margin-right: auto;
  max-width: 484px;
  width: 90%;
  margin-bottom: var(--pad_m);
}
@media screen and (min-width: 835px) {
  .dtl__img {
    margin-bottom: var(--pad_ll);
  }
}
.dtl__img img {
  width: 100%;
}

.dtl__cuz,
.dtl__cm,
.dtl__alp {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  padding-top: var(--pad_m);
  padding-bottom: var(--pad_m);
}
@media screen and (min-width: 835px) {
  .dtl__cuz,
  .dtl__cm,
  .dtl__alp {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .dtl__cuz,
  .dtl__cm,
  .dtl__alp {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .dtl__cuz,
  .dtl__cm,
  .dtl__alp {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .dtl__cuz,
  .dtl__cm,
  .dtl__alp {
    padding-right: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .dtl__cuz,
  .dtl__cm,
  .dtl__alp {
    padding-top: var(--pad_xxl);
    padding-bottom: var(--pad_xxl);
  }
}

.dtl__cuz {
  background-color: var(--color_bg);
  position: relative;
}

.dtl__cuz-cont,
.dtl__cuz-note {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_s);
  box-sizing: border-box;
}

.dtl__cuz-ttl {
  font-family: var(--font_point);
  text-align: center;
  margin-bottom: 1em;
  font-size: 2.2rem;
}
@media screen and (min-width: 835px) {
  .dtl__cuz-ttl {
    font-size: 3rem;
  }
}

.dtl__cuz-txt {
  margin-bottom: var(--pad_s);
}
@media screen and (min-width: 835px) {
  .dtl__cuz-txt {
    margin-bottom: var(--pad_l);
  }
}
@media screen and (max-width: 489px) {
  .dtl__cuz-txt br {
    display: none;
  }
}
@media screen and (min-width: 490px) {
  .dtl__cuz-txt {
    text-align: center;
  }
}

.dtl__cuz-cont {
  background-color: var(--color_bg_03);
  padding: var(--pad_m) var(--pad_ss);
}
@media screen and (min-width: 835px) {
  .dtl__cuz-cont {
    padding: var(--pad_l);
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: max-content 1fr;
    -moz-column-gap: 5%;
         column-gap: 5%;
  }
}

.dtl__cuz-cont-img {
  display: block;
  width: 80%;
  max-width: 370px;
}
@media screen and (max-width: 834px) {
  .dtl__cuz-cont-img {
    margin: 0 auto var(--pad_s);
  }
}
@media screen and (min-width: 835px) {
  .dtl__cuz-cont-img {
    width: 30vw;
    grid-row: 1/3;
    grid-column: 1;
  }
}

.dtl__cuz-lst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
}
@media screen and (max-width: 834px) {
  .dtl__cuz-lst {
    margin-bottom: var(--pad_s);
  }
}
@media screen and (min-width: 835px) {
  .dtl__cuz-lst {
    margin-top: 2em;
  }
}
.dtl__cuz-lst > dt {
  font-family: var(--font_point);
  width: 4.5em;
  min-height: 2em;
  align-self: stretch;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color_light);
  color: #ffffff;
}
.dtl__cuz-lst > dd {
  width: calc(100% - 6em);
  flex: 1 1 auto;
  line-height: 1.4;
}

.dtl__cuz-img {
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 835px) {
  .dtl__cuz-img {
    align-self: end;
    transform: translateY(76%);
  }
}
.dtl__cuz-img p {
  background-image: url("../img/bubble_03.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  width: 12em;
  padding-bottom: 1.5em;
  font-family: var(--font_point);
  line-height: 1.5;
  font-size: 1.6rem;
}
@media screen and (min-width: 375px) {
  .dtl__cuz-img p {
    margin-left: auto;
    transform: translateX(clamp(-175px, -19vw, -85px));
  }
}
@media screen and (min-width: 835px) {
  .dtl__cuz-img p {
    font-size: 2rem;
  }
}
.dtl__cuz-img picture {
  overflow: hidden;
  aspect-ratio: 1/1;
  border-radius: 50%;
  width: clamp(130px, 30vw, 194px);
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc(-1 * var(--pad_m));
}
.dtl__cuz-img picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 835px) {
  .dtl__cuz-img picture {
    top: -30%;
    right: 0;
  }
}

.dtl__cuz-note {
  position: absolute;
  transform: translateY(0.3em);
  font-size: 1rem;
}
@media screen and (min-width: 835px) {
  .dtl__cuz-note {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 1050px) {
  .dtl__cuz-note {
    transform: translate(-50%, 0.5em);
    width: 100%;
    left: 50%;
  }
}

.dtl__scrt-head {
  position: relative;
  z-index: 0;
  font-family: var(--font_point);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: var(--pad_m);
}
@media screen and (max-width: 834px) {
  .dtl__scrt-head {
    padding-top: clamp(80px, 15%, 120px);
  }
}
@media screen and (max-width: 560px) {
  .dtl__scrt-head {
    padding-top: 110px;
  }
}
@media screen and (min-width: 835px) {
  .dtl__scrt-head {
    height: 180px;
  }
}
@media screen and (min-width: 1140px) {
  .dtl__scrt-head {
    height: 242px;
  }
}
.dtl__scrt-head p {
  border-bottom: 1px solid;
  font-size: 1.5rem;
}
@media screen and (min-width: 480px) {
  .dtl__scrt-head p {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1140px) {
  .dtl__scrt-head p {
    font-size: 2.4rem;
  }
}

.dtl__scrt-mk {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: auto;
  aspect-ratio: 1/1;
  transform: translateX(-5%);
}
@media screen and (max-width: 834px) {
  .dtl__scrt-mk {
    width: clamp(140px, 23%, 200px);
  }
}
@media screen and (min-width: 835px) {
  .dtl__scrt-mk {
    transform: translateX(3vw);
    height: 100%;
  }
}
@media screen and (min-width: 1140px) {
  .dtl__scrt-mk {
    transform: translateX(-10%);
  }
}

.dtl__scrt-head-ttl {
  font-size: 2.8rem;
}
@media screen and (min-width: 835px) {
  .dtl__scrt-head-ttl {
    font-size: 3.8rem;
  }
}
@media screen and (min-width: 1140px) {
  .dtl__scrt-head-ttl {
    font-size: 4.8rem;
  }
}

@media screen and (min-width: 835px) {
  .dtl__scrt-cont {
    display: grid;
    grid-template-rows: 0.5fr max-content max-content 0.5fr;
    grid-template-columns: 55% 1fr;
    -moz-column-gap: 5%;
         column-gap: 5%;
  }
}

.intr__head-cont-img {
  width: 90%;
  max-width: 620px;
}
@media screen and (max-width: 834px) {
  .intr__head-cont-img {
    display: block;
    margin: 0 auto var(--pad_s);
  }
}
@media screen and (min-width: 835px) {
  .intr__head-cont-img {
    width: 100%;
    grid-column: 1;
    grid-row: 1/5;
    align-self: center;
  }
}

.dtl__scrt-cont-ttl {
  font-weight: 700;
  display: flex;
  align-items: center;
  height: 2em;
  padding: 0 1.5em;
  border-radius: 1em;
  border: 1px solid #aaaaaa;
  max-width: -moz-max-content;
  max-width: max-content;
  margin-bottom: 1em;
  font-size: 1.8rem;
}
@media screen and (min-width: 835px) {
  .dtl__scrt-cont-ttl {
    font-size: 2rem;
    align-self: end;
  }
}

.dtl__scrt-cont-sub {
  font-family: var(--font_point);
  line-height: 1.333;
  margin-bottom: 1em;
  font-size: 2.5rem;
}
@media screen and (min-width: 835px) {
  .dtl__scrt-cont-sub {
    font-size: 2.6rem;
  }
}
@media screen and (min-width: 990px) {
  .dtl__scrt-cont-sub {
    font-size: 3rem;
  }
}
.dtl__scrt-cont-sub em {
  font-weight: 700;
  font-family: var(--font_base);
  color: var(--color_point);
  margin-right: 0.5em;
}

.dtl__scrt-cont-note {
  margin-top: 1em;
  font-size: 1rem;
}
@media screen and (min-width: 835px) {
  .dtl__scrt-cont-note {
    font-size: 1.2rem;
  }
}

.dtl__cm,
.dtl__alp {
  background-color: #ffffff;
  box-shadow: 0 0 30px rgba(146, 160, 184, 0.1);
}

.dtl__cm {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: 100%;
}

.dtl__cm-ttl {
  text-align: center;
  font-family: var(--font_point);
  margin-bottom: 1.5em;
  font-size: 1.6rem;
}
@media screen and (min-width: 480px) {
  .dtl__cm-ttl {
    font-size: 2rem;
  }
}
@media screen and (min-width: 640px) {
  .dtl__cm-ttl {
    font-size: 2.4rem;
  }
}
.dtl__cm-ttl::first-letter {
  font-size: 125%;
}
.dtl__cm-ttl span {
  display: block;
  font-size: 166.7%;
  line-height: 1.354;
}

@media screen and (max-width: 509px) {
  .dtl__cm-txt br {
    display: none;
  }
}
@media screen and (min-width: 510px) {
  .dtl__cm-txt {
    text-align: center;
  }
}

.dtl__cm-mk,
.dtl__cm-pt,
.dtl__cm-cross {
  grid-row: 3;
  grid-column: 1;
}

.dtl__cm-pt {
  justify-self: center;
  align-self: end;
  font-weight: 700;
  background-color: var(--color_point05);
  color: #ffffff;
  display: flex;
  align-items: center;
  height: 2em;
  padding: 0 1em;
  margin-bottom: calc(20px + var(--pad_xxxs));
}
@media screen and (min-width: 480px) {
  .dtl__cm-pt {
    margin-bottom: calc(35px + var(--pad_xxs));
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 835px) {
  .dtl__cm-pt {
    font-size: 2.4rem;
  }
}

.dtl__cm-mk {
  width: clamp(90px, 23%, 150px);
}
@media screen and (min-width: 480px) {
  .dtl__cm-mk {
    margin-left: 10%;
  }
}
@media screen and (min-width: 1140px) {
  .dtl__cm-mk {
    margin-left: 18%;
  }
}

.dtl__cm-cross {
  font-family: "icon";
  justify-self: center;
  align-self: end;
  line-height: 1;
  font-size: 20px;
}
@media screen and (min-width: 835px) {
  .dtl__cm-cross {
    font-size: 35px;
  }
}

.dtl__cm-lst {
  background-color: var(--color_bg);
  margin-top: var(--pad_xxxs);
  border-radius: 15px;
  display: flex;
  gap: var(--pad_s) 5%;
  padding: var(--pad_s) var(--pad_ss);
}
@media screen and (min-width: 480px) {
  .dtl__cm-lst {
    margin-top: var(--pad_xxs);
  }
}
@media screen and (max-width: 744px) {
  .dtl__cm-lst {
    flex-direction: column;
  }
}
@media screen and (min-width: 835px) {
  .dtl__cm-lst {
    padding: var(--pad_l) var(--pad_m);
  }
}
@media screen and (min-width: 1240px) {
  .dtl__cm-lst {
    padding: var(--pad_ll);
  }
}
.dtl__cm-lst > li {
  display: grid;
  grid-template-rows: max-content 1fr;
  grid-template-columns: max-content 1fr;
  -moz-column-gap: 1.5em;
       column-gap: 1.5em;
  font-size: 1.3rem;
}
@media screen and (min-width: 990px) {
  .dtl__cm-lst > li {
    font-size: 1.5rem;
  }
}

.dtl__cm-lst-img {
  overflow: hidden;
  aspect-ratio: 1/1;
  border-radius: 50%;
  grid-column: 1;
  grid-row: 1/3;
  align-self: center;
  width: clamp(70px, 20vw, 95px);
}
.dtl__cm-lst-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 745px) {
  .dtl__cm-lst-img {
    width: clamp(60px, 7vw, 95px);
  }
}

.dtl__cm-lst-ttl {
  font-weight: 700;
  font-size: 1.6rem;
}
@media screen and (min-width: 990px) {
  .dtl__cm-lst-ttl {
    font-size: 1.8rem;
  }
}

.dtl__alp {
  position: relative;
}
@media screen and (min-width: 835px) {
  .dtl__alp {
    display: grid;
    grid-template-rows: 0.5fr max-content max-content 0.5fr;
    grid-template-columns: 1fr 50%;
    -moz-column-gap: 5%;
         column-gap: 5%;
  }
  .dtl__alp > p {
    max-width: 24em;
  }
}
@media screen and (min-width: 990px) {
  .dtl__alp {
    padding-left: 5%;
  }
}

.dtl__alp-ttl {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-20%, -45%);
}
.dtl__alp-ttl img {
  width: clamp(55px, 10vw, 104px);
}

.dtl__alp-mk {
  display: flex;
  gap: var(--pad_xxs);
  margin-bottom: var(--pad_ss);
}
@media screen and (min-width: 835px) {
  .dtl__alp-mk {
    margin-bottom: var(--pad_s);
    align-self: end;
  }
}
.dtl__alp-mk > li {
  background-color: var(--color_light);
  color: #ffffff;
  font-family: var(--font_point);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2em;
  width: 4.5em;
  text-align: center;
  font-size: 1.6rem;
}
@media screen and (min-width: 835px) {
  .dtl__alp-mk > li {
    font-size: 1.8rem;
  }
}

.dtl__alp-sub {
  font-family: var(--font_point);
  margin-bottom: 1em;
  font-size: 1.6rem;
}
@media screen and (max-width: 834px) {
  .dtl__alp-sub {
    text-align: center;
  }
}
@media screen and (min-width: 835px) {
  .dtl__alp-sub {
    font-size: 2rem;
  }
}
.dtl__alp-sub span {
  display: block;
  font-size: 180%;
}

.dtl__alp-note {
  margin-top: 1em;
  font-size: 1rem;
}
@media screen and (min-width: 835px) {
  .dtl__alp-note {
    font-size: 1.2rem;
  }
}

.dtl__alp-lst {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad_ss);
}
@media screen and (max-width: 834px) {
  .dtl__alp-lst {
    margin-top: var(--pad_m);
  }
}
@media screen and (min-width: 835px) {
  .dtl__alp-lst {
    gap: var(--pad_s);
    grid-column: 2;
    grid-row: 1/5;
    align-self: center;
  }
}
.dtl__alp-lst > li {
  text-align: center;
  line-height: 1.333;
  font-size: 1rem;
  width: calc((100% - var(--pad_ss)) / 2);
}
@media screen and (min-width: 480px) {
  .dtl__alp-lst > li {
    width: calc((100% - var(--pad_ss) * 2) / 3);
  }
}
@media screen and (min-width: 835px) {
  .dtl__alp-lst > li {
    width: calc((100% - var(--pad_s) * 2) / 3);
  }
}
@media screen and (min-width: 990px) {
  .dtl__alp-lst > li {
    font-size: 1.2rem;
  }
}
.dtl__alp-lst > li em {
  font-size: 128.6%;
  font-weight: 700;
  margin-top: 0.3em;
  display: block;
}

.dtl__alp-lst-img {
  overflow: hidden;
  aspect-ratio: 1/1;
  border-radius: 50%;
  width: clamp(50px, 20vw, 80px);
  margin: 0 auto 1em;
}
.dtl__alp-lst-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/***** 美容成分の浸透を高める *****/
.vibe {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  padding-top: var(--pad_ll);
  padding-bottom: var(--pad_ll);
  position: relative;
  z-index: 0;
  background-color: var(--color_bg);
}
@media screen and (min-width: 835px) {
  .vibe {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .vibe {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .vibe {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .vibe {
    padding-right: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .vibe {
    padding-top: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  .vibe {
    padding-bottom: var(--pad_5l);
  }
}

.vibe__ttl {
  line-height: 1.604;
  font-family: var(--font_point);
  text-align: center;
  position: relative;
  max-width: -moz-max-content;
  max-width: max-content;
  margin: 0 auto 1em;
  padding-top: 1.8em;
  font-size: 1.6rem;
}
@media screen and (min-width: 480px) {
  .vibe__ttl {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 835px) {
  .vibe__ttl {
    font-size: 3rem;
  }
}
.vibe__ttl sup {
  line-height: 1.5;
}
@media screen and (min-width: 480px) {
  .vibe__ttl sup {
    line-height: 2;
  }
}
.vibe__ttl span {
  display: block;
  font-size: 160%;
}
.vibe__ttl div {
  font-size: 80%;
  line-height: 1.333;
  background-image: url("../img/bubble_02.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  width: 5em;
  padding-bottom: 1.2em;
  font-family: var(--font_point);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-20%);
}

.vibe__txt {
  margin-left: auto;
  margin-right: auto;
  max-width: 39em;
}

.vibe__sub {
  font-size: clamp(45px, 7vw, 80px);
  line-height: 1;
  margin: 1em 0;
  text-align: center;
  font-family: var(--font_point_en);
  color: #ffffff;
}

.vibe__cont {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_m);
  display: grid;
  grid-template-rows: repeat(8, auto);
  grid-template-columns: 100%;
}
@media screen and (min-width: 835px) {
  .vibe__cont {
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 5%;
         column-gap: 5%;
  }
}
@media screen and (min-width: 1240px) {
  .vibe__cont {
    -moz-column-gap: 8%;
         column-gap: 8%;
  }
}

.vibe__cont-mk,
.vibe__cont-img01,
.vibe__cont-img02 {
  grid-row: 1;
  grid-column: 1;
}
@media screen and (min-width: 835px) {
  .vibe__cont-mk,
  .vibe__cont-img01,
  .vibe__cont-img02 {
    grid-row: 1/6;
  }
}

.vibe__cont-mk {
  grid-row: 1/3;
  grid-column: 1;
  justify-self: start;
  z-index: 100;
  width: clamp(120px, 20vw, 178px);
  transform: translate(-10%, -30%);
}
@media screen and (min-width: 1140px) {
  .vibe__cont-mk {
    transform: translate(-20%, -35%);
  }
}

@media screen and (max-width: 479px) {
  .vibe__cont-img01 {
    width: 90%;
    margin: 0 auto;
    z-index: 50;
  }
}
@media screen and (max-width: 834px) {
  .vibe__cont-img01 {
    height: clamp(200px, 40vw, 300px);
  }
}
.vibe__cont-img01 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.vibe__cont-img02 {
  align-self: end;
  justify-self: end;
  z-index: 100;
  width: clamp(125px, 21vw, 206px);
  transform: translate(10%, 15%);
}
@media screen and (min-width: 1140px) {
  .vibe__cont-img02 {
    transform: translate(15%, 22%);
  }
}
.vibe__cont-img02 img {
  width: 100%;
}

.vibe__cont-pt {
  background-color: #ffffff;
  border-radius: 15px;
  padding: var(--pad_s) var(--pad_ss);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.3rem;
  width: 100%;
}
@media screen and (min-width: 480px) {
  .vibe__cont-pt {
    width: 90%;
    padding: var(--pad_s) 5%;
  }
}
@media screen and (max-width: 834px) {
  .vibe__cont-pt {
    margin-top: calc(-1 * var(--pad_ss));
    margin-bottom: var(--pad_s);
  }
}
@media screen and (min-width: 835px) {
  .vibe__cont-pt {
    align-self: end;
    grid-row: 1/8;
    grid-column: 1;
  }
}
@media screen and (min-width: 990px) {
  .vibe__cont-pt {
    padding: var(--pad_s) 8%;
  }
}
@media screen and (min-width: 1240px) {
  .vibe__cont-pt {
    font-size: 1.5rem;
  }
}

.vibe__cont-pt-ttl {
  font-family: var(--font_point);
  color: var(--color_point05);
  margin-bottom: 0.5em;
  font-size: 2rem;
}
@media screen and (min-width: 835px) {
  .vibe__cont-pt-ttl {
    font-size: 2.4rem;
  }
}

.vibe__cont-pt-note {
  font-size: 80%;
}

.vibe__cont-ttl {
  font-family: var(--font_point);
  font-size: 2.4rem;
}
@media screen and (min-width: 990px) {
  .vibe__cont-ttl {
    font-size: 3rem;
  }
}
.vibe__cont-ttl span {
  font-size: 120%;
}

.vibe__cont-note {
  margin-top: 0.3em;
  font-size: 1rem;
}
@media screen and (min-width: 835px) {
  .vibe__cont-note {
    font-size: 1.2rem;
  }
}

.vibe__cont-sub {
  background-image: url("../img/bubble_03.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  max-width: -moz-max-content;
  max-width: max-content;
  font-weight: 700;
  padding: 0 1.5em 2em;
  margin: 1.5em 0 1em;
  line-height: 1.5;
}

@media screen and (min-width: 835px) {
  .vibe__cont-img03 {
    grid-row: 5/7;
    grid-column: 2;
  }
}
.vibe__cont-img03 img {
  width: 100%;
}

.vibe__bg {
  position: absolute;
  top: 0;
  left: -10%;
  right: 0;
  bottom: 0;
  z-index: -1;
  mix-blend-mode: multiply;
}
.vibe__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.vibe__bg img {
  -o-object-position: right top;
     object-position: right top;
}
@media screen and (min-width: 480px) {
  .vibe__bg {
    left: 10%;
  }
}
@media screen and (min-width: 990px) {
  .vibe__bg {
    left: 40%;
  }
}

/***** 区切り画像 *****/
.hr_01 {
  height: 180px;
}
@media screen and (min-width: 835px) {
  .hr_01 {
    height: 612px;
  }
}
.hr_01 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/***** HOW TO USE *****/
.how {
  padding-top: var(--pad_ll);
  padding-bottom: var(--pad_ll);
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 835px) {
  .how {
    padding-top: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  .how {
    padding-bottom: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  .how {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .how {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .how {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .how {
    padding-right: var(--pad_l);
  }
}

.how__ttl {
  text-align: center;
  font-family: var(--font_point);
  line-height: 1.667;
  margin-bottom: 1em;
  font-size: 2.1rem;
}
@media screen and (min-width: 835px) {
  .how__ttl {
    font-size: 3.6rem;
  }
}

.how__txt {
  margin-bottom: var(--pad_l);
}
@media screen and (min-width: 835px) {
  .how__txt {
    margin-bottom: var(--pad_xxl);
  }
}
@media screen and (max-width: 450px) {
  .how__txt br {
    display: none;
  }
}
@media screen and (min-width: 450px) {
  .how__txt {
    text-align: center;
  }
}

.how__wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_m);
  padding-top: var(--pad_l);
  padding-bottom: var(--pad_l);
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  background-color: var(--color_bg);
}
@media screen and (min-width: 835px) {
  .how__wrap {
    padding-top: var(--pad_xxl);
  }
}
@media screen and (min-width: 835px) {
  .how__wrap {
    padding-bottom: var(--pad_xxl);
  }
}
@media screen and (min-width: 835px) {
  .how__wrap {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .how__wrap {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .how__wrap {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .how__wrap {
    padding-right: var(--pad_l);
  }
}
.how__wrap > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

.how__wrap-ttl {
  font-family: var(--font_point_en);
  text-align: center;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 0.3em;
  font-size: 4rem;
}
@media screen and (min-width: 835px) {
  .how__wrap-ttl {
    font-size: 6rem;
  }
}
.how__wrap-ttl span {
  display: block;
  max-width: -moz-max-content;
  max-width: max-content;
  background-color: #ffffff;
  color: var(--color_base);
  font-family: var(--font_point);
  line-height: 1.778;
  padding: 0 1em;
  margin: 0 auto;
  font-size: var(--fsize_base_sp);
}
@media screen and (min-width: 835px) {
  .how__wrap-ttl span {
    font-size: var(--fsize_base_sp);
  }
}

.how__wrap-mov {
  display: block;
  width: 100%;
  aspect-ratio: 1/0.562;
  margin-bottom: var(--pad_m);
}
@media screen and (min-width: 835px) {
  .how__wrap-mov {
    margin-bottom: var(--pad_l);
  }
}

.how__wrap-dl > dt {
  background-color: var(--color_light);
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0.1em 1em;
  height: 2em;
  font-family: var(--font_point);
  margin-bottom: 1em;
}
.how__wrap-dl > dd:not(:last-child) {
  margin-bottom: var(--pad_s);
}
@media screen and (min-width: 835px) {
  .how__wrap-dl > dd:not(:last-child) {
    margin-bottom: var(--pad_m);
  }
}
.how__wrap-dl > dd ol {
  counter-reset: howto;
  font-size: 1.3rem;
}
@media screen and (min-width: 835px) {
  .how__wrap-dl > dd ol {
    font-size: 1.5rem;
  }
}
.how__wrap-dl > dd ol > li {
  counter-increment: howto;
  padding-left: 2.6675em;
  text-indent: -2.6675em;
}
.how__wrap-dl > dd ol > li:not(:last-child) {
  margin-bottom: 0.8em;
}
.how__wrap-dl > dd ol > li::before {
  content: counter(howto, decimal-leading-zero);
  font-family: var(--font_point_en);
  text-indent: 0;
  font-size: 106.7%;
  aspect-ratio: 1/1;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #ffffff;
  box-sizing: border-box;
  padding-top: 0.1em;
  margin-right: 0.5em;
  width: 2em;
  border-radius: 50%;
  border: 1px solid;
  color: var(--color_point);
}
.how__wrap-dl > dd ol > li span {
  display: block;
  font-size: 80%;
  padding-left: 1em;
  text-indent: -1em;
}
.how__wrap-dl > dd ol > li span::before {
  display: inline-block;
  width: 1em;
  content: "※";
  text-indent: 0;
}

.how__bg,
.how__wrap-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.how__bg img,
.how__wrap-bg img {
  width: 100%;
}

/***** Q&A *****/
.qa {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  margin-bottom: var(--pad_ll);
}
@media screen and (min-width: 835px) {
  .qa {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .qa {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .qa {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .qa {
    padding-right: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .qa {
    margin-bottom: var(--pad_5l);
  }
}

.qa__ttl {
  text-align: center;
  font-family: var(--font_point_en);
  color: var(--color_point02);
  margin-bottom: 1em;
  letter-spacing: 0.3em;
  line-height: 1.2;
  font-size: 4rem;
}
@media screen and (min-width: 835px) {
  .qa__ttl {
    font-size: 6rem;
  }
}

.qa__lst {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_m);
}
.qa__lst > dt {
  cursor: pointer;
  position: relative;
  border-radius: var(--pad_xxs);
  background-color: var(--color_bg_02);
  font-weight: 700;
  line-height: 1.4;
  font-size: 1.6rem;
  text-indent: calc(-1 * (18px + var(--pad_xxxs) * 2));
}
@media screen and (min-width: 835px) {
  .qa__lst > dt {
    text-indent: calc(-1 * (24px + var(--pad_xxxs) * 2));
    font-size: 1.8rem;
  }
}
.qa__lst > dt:not(:first-child) {
  margin-top: 1.5em;
}
.qa__lst > dt::before {
  font-family: var(--font_point_en);
  color: var(--color_point02);
  text-indent: 0;
  content: "Q.";
  font-weight: 400;
  display: inline-block;
  width: calc(18px + var(--pad_xxxs));
  font-size: 18px;
}
@media screen and (min-width: 835px) {
  .qa__lst > dt::before {
    width: calc(24px + var(--pad_xxxs));
    font-size: 24px;
  }
}
.qa__lst > dt .qa__lst-mk {
  aspect-ratio: 1/1;
  pointer-events: none;
  fill: var(--color_point02);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: var(--pad_ss);
  width: 18px;
}
@media screen and (min-width: 835px) {
  .qa__lst > dt .qa__lst-mk {
    right: var(--pad_m);
    width: 24px;
  }
}
.qa__lst > dt .qa__lst-mk-l {
  transform-origin: center center;
  transition: all var(--hover_time);
}
.qa__lst > dd {
  border-top: none !important;
  border-radius: 0 0 var(--pad_xxs) var(--pad_xxs);
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all var(--hover_time);
  padding: 0 var(--pad_l);
}
@media screen and (min-width: 835px) {
  .qa__lst > dd {
    padding: 0 var(--pad_xxl);
  }
}
.qa__lst > dt,
.qa__lst > dt.aq-active + dd {
  border: 1px solid var(--color_border);
  padding: var(--pad_ss) var(--pad_l);
}
@media screen and (min-width: 835px) {
  .qa__lst > dt,
  .qa__lst > dt.aq-active + dd {
    padding: var(--pad_s) var(--pad_xxl);
  }
}
.qa__lst > dt.aq-active {
  border-radius: var(--pad_xxs) var(--pad_xxs) 0 0;
}
.qa__lst > dt.aq-active .qa__lst-mk-l {
  transform: rotate(90deg);
}
.qa__lst > dt.aq-active + dd {
  opacity: 1;
}

/***** 区切り画像2 *****/
.hr_02 {
  margin-bottom: var(--pad_ll);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_l);
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
}
@media screen and (min-width: 835px) {
  .hr_02 {
    margin-bottom: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  .hr_02 {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .hr_02 {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .hr_02 {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .hr_02 {
    padding-right: var(--pad_l);
  }
}
.hr_02 img {
  width: 100%;
}

/***** 商品紹介 *****/
.prod {
  margin-bottom: var(--pad_ll);
  margin-left: auto;
  margin-right: auto;
  max-width: 825px;
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
}
@media screen and (min-width: 835px) {
  .prod {
    margin-bottom: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  .prod {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .prod {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .prod {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .prod {
    padding-right: var(--pad_l);
  }
}

.prod__lst-img {
  width: 43px;
}
@media screen and (max-width: 479px) {
  .prod__lst-img {
    position: absolute;
    top: 0;
  }
}
@media screen and (min-width: 480px) {
  .prod__lst-img {
    width: 13%;
    height: auto;
  }
}
@media screen and (min-width: 835px) {
  .prod__lst-img {
    padding: 0 10%;
  }
}
.prod__lst-img img {
  width: 100%;
}
@media screen and (min-width: 480px) {
  .prod__lst-img img {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

@media screen and (min-width: 480px) {
  .prod__lst-wrap {
    display: flex;
    flex-direction: column;
    width: 60%;
    flex: 1 1 auto;
  }
  .prod__lst-wrap > p:not(:last-child) {
    margin-bottom: 1em;
  }
}

.prod__lst-logo {
  font-family: var(--font_point);
  font-size: 1.2rem;
}
@media screen and (min-width: 375px) {
  .prod__lst-logo {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 835px) {
  .prod__lst-logo {
    font-size: 1.8rem;
  }
}
.prod__lst-logo img {
  display: block;
  width: 70%;
  max-width: 332px;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 834px) {
  .prod__lst-logo span {
    line-height: 1;
    font-size: 70%;
    display: block;
    margin-top: 1.5em;
  }
}

.prod__lst-ttl {
  font-family: var(--font_point);
  font-size: 1.5rem;
}
@media screen and (min-width: 375px) {
  .prod__lst-ttl {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 835px) {
  .prod__lst-ttl {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 834px) {
  .prod__lst-ttl span {
    line-height: 1;
    font-size: 70%;
    display: block;
  }
}

.prod__lst-ttl-en {
  font-size: 66.7%;
  display: block;
  font-family: var(--font_point_en02);
  font-weight: 300;
}
@media screen and (max-width: 834px) {
  .prod__lst-ttl-en {
    margin-bottom: 1.5em;
  }
}

.prod__lst-price {
  margin-bottom: var(--pad_xxs);
  font-size: 1rem;
}
@media screen and (min-width: 835px) {
  .prod__lst-price {
    margin-bottom: var(--pad_m);
    font-size: 1.4rem;
  }
}
.prod__lst-price > span {
  font-weight: 700;
  font-family: var(--font_point_en02);
  font-size: 150%;
  margin-right: 0.5em;
}
.prod__lst-price > span span {
  font-size: 116.7%;
}

.prod__lst-sub {
  font-family: var(--font_point);
  margin-bottom: 1em;
  font-size: 1.5rem;
}
@media screen and (min-width: 375px) {
  .prod__lst-sub {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 835px) {
  .prod__lst-sub {
    font-size: 2.4rem;
  }
}

.prod__lst-note {
  font-size: 75%;
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (max-width: 834px) {
  .prod__lst-note {
    margin-top: 1em;
  }
}
.prod__lst-note::before {
  display: inline-block;
  width: 1em;
  content: "※";
  text-indent: 0;
}

.prod__lst-note-none {
  font-size: 70%;
}

.prod__lst-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 270px;
  border-radius: 35px;
  border: 1px solid;
  color: var(--color_point03);
  font-weight: 700;
  height: 50px;
}
@media screen and (max-width: 479px) {
  .prod__lst-btn {
    margin: var(--pad_s) auto 0;
  }
}
@media screen and (min-width: 835px) {
  .prod__lst-btn {
    height: 70px;
    margin-top: auto;
  }
}
@media screen and (min-width: 835px) {
  .prod__lst-btn {
    transition: opacity var(--hover_time);
  }
  .prod__lst-btn:hover {
    opacity: 0.6;
  }
}
.prod__lst-btn::after {
  content: "→";
  font-family: "icon";
  position: absolute;
  top: 50%;
  font-weight: normal;
  right: 2em;
  transform: translateY(-50%);
}

.prod__lst > li {
  position: relative;
}
@media screen and (min-width: 480px) {
  .prod__lst > li {
    display: flex;
    gap: 5%;
  }
}
.prod__lst > li:not(:last-child) {
  margin-bottom: var(--pad_ll);
}
@media screen and (min-width: 835px) {
  .prod__lst > li:not(:last-child) {
    margin-bottom: var(--pad_5l);
  }
}
@media screen and (min-width: 480px) {
  .prod__lst > li:nth-child(odd) {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 479px) {
  .prod__lst > li:nth-child(odd) .prod__lst-img {
    right: 0;
  }
}
@media screen and (max-width: 479px) {
  .prod__lst > li:nth-child(even) .prod__lst-ttl,
  .prod__lst > li:nth-child(even) .prod__lst-price,
  .prod__lst > li:nth-child(even) .prod__lst-sub {
    padding-left: 65px;
  }
  .prod__lst > li:nth-child(even) .prod__lst-img {
    width: 40px;
  }
}
@media screen and (max-width: 374px) {
  .prod__lst > li:nth-child(even) .prod__lst-img {
    width: 35px;
  }
}
@media screen and (max-width: 479px) {
  .prod__lst > li p br {
    display: none;
  }
}

/***** 商品購入ボタン *****/
.buy {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  padding-top: var(--pad_ll);
  padding-bottom: var(--pad_ll);
  background-color: var(--color_bg);
}
@media screen and (min-width: 835px) {
  .buy {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .buy {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .buy {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .buy {
    padding-right: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .buy {
    padding-top: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  .buy {
    padding-bottom: var(--pad_5l);
  }
}

.buy__wrap {
  padding-left: var(--pad_ss);
  padding-right: var(--pad_ss);
  padding-top: var(--pad_ll);
  padding-bottom: var(--pad_ll);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mw_m);
  box-sizing: border-box;
  background-color: #ffffff;
}
@media screen and (min-width: 835px) {
  .buy__wrap {
    padding-left: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .buy__wrap {
    padding-left: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .buy__wrap {
    padding-right: var(--pad_s);
  }
}
@media screen and (min-width: 1240px) {
  .buy__wrap {
    padding-right: var(--pad_l);
  }
}
@media screen and (min-width: 835px) {
  .buy__wrap {
    padding-top: var(--pad_5l);
  }
}
@media screen and (min-width: 835px) {
  .buy__wrap {
    padding-bottom: var(--pad_5l);
  }
}

.buy__ttl {
  line-height: 1;
  text-align: center;
  font-family: var(--font_point);
  margin-bottom: 1.5em;
  font-size: 2.4rem;
}
@media screen and (min-width: 835px) {
  .buy__ttl {
    font-size: 3rem;
  }
}

.buy__lst {
  margin-left: auto;
  margin-right: auto;
  max-width: 955px;
  display: flex;
  gap: var(--pad_xxs);
}
@media screen and (max-width: 639px) {
  .buy__lst {
    flex-direction: column;
  }
}
@media screen and (min-width: 640px) {
  .buy__lst {
    gap: 4%;
  }
}
.buy__lst > li {
  flex: 1;
}
.buy__lst > li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  transition: all var(--hover_time);
  gap: 0.5em;
  height: 70px;
  font-size: 1.6rem;
}
@media screen and (min-width: 835px) {
  .buy__lst > li a {
    gap: 1em;
    height: 130px;
    font-size: 2rem;
  }
}
.buy__lst > li:nth-child(1) a {
  background-color: var(--color_point04);
  box-shadow: inset 0 0 0 2px var(--color_point04);
}
@media screen and (min-width: 835px) {
  .buy__lst > li:nth-child(1) a:hover {
    background-color: #ffffff;
    color: var(--color_point04);
  }
}
.buy__lst > li:nth-child(2) a {
  background-color: var(--color_point);
  box-shadow: inset 0 0 0 2px var(--color_point);
}
@media screen and (min-width: 835px) {
  .buy__lst > li:nth-child(2) a:hover {
    background-color: #ffffff;
    color: var(--color_point);
  }
}
.buy__lst > li i {
  font-family: "icon";
  font-weight: normal;
}/*# sourceMappingURL=style.css.map */