@charset "UTF-8";

/*//////////////////////////////////////////////////

Title : LP CSS

//////////////////////////////////////////////////*/

/*  Var
======================================================= */
:root {
  --lp-color-main: #dd887a;
  --lp-font-en: "dupincel-variable", sans-serif;
  --lp-font-ja-min: ryo-display-plusn, serif;

  --pc-width: 1400; /*PCデザイン幅*/
  --sp-width: 780; /*SPデザイン幅*/
  --pc-artboard-width: 480; /*SP共通デザイン幅*/
  --sp-artboard-width: 780; /*PC共通デザイン幅*/
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1400px) {
  :root {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: 1px; /* 固定値（可変しない） */
  }
}
/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  :root {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}
/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  :root {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}


/* ========================================================
                      * Layout style *
========================================================= */

html {
  font-size: 62.5%;
}

main {
  max-width: 100%;
}

footer {
  position: relative;
  z-index: 2;
  margin-top: 0;
}

#share {
  display: none !important;
}

#footer {
  margin-top: 0 !important;
}

/* ===================
  LP Contents
=================== */

.lp_contents {
  margin: 0 auto;
  padding: 0;
  background: #f9f7ed;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.125em;
  color: #666;
  font-size: 1.4rem;
  font-feature-settings: "palt";
}

#FooterWrap {
  position: relative;
  z-index: 2;
}

.lp_contents *,
.lp_contents *:before,
.lp_contents *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.lp_contents ul,
.lp_contents li {
  list-style: none;
}

.lp_contents a:hover {}

.lp_contents img {
  max-width: 100%;
  /* width: auto; */
}

.lp_contents sup {
  font-size: calc(12  * var(--formula));
}

.lp_contents a,
.lp_contents a:before,
.lp_contents a:after,
.lp_contents a img {
  transition: opacity .3s ease-in-out,
  color .3s ease-in-out,
  background-color .3s ease-in-out,
  background-image .3s ease-in-out,
  border-color .3s ease-in-out,
  text-shadow .3s ease-in-out,
  text-weight .3s ease-in-out;
}

.lp_contents h1 {
  padding: 0;
}

.lp_contents a {
  color: inherit;
}

.lp_contents img {
  width: 100%;
}


/* ===================
  　　 General
=================== */

.lp_contents .txt_center {
  text-align: center;
}

.lp_contents .txt_bold {
  font-weight: 500;
}

.lp_contents .txt_en {}

.lp_contents .txt_mincho {}

.section {
}

/* ===================
  　　　Animation
=================== */


/* -- keyframes -- */

@keyframes opa0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes tra1 {
  100% {
    transform: translateX(0);
  }
}

@keyframes tra2 {
  100% {
    transform: translateY(0);
  }
}

@keyframes tra3 {
  0% {
    transform: translateY(50px);
  }

  100% {
    transform: translateY(0);
  }
}


@keyframes tra3_2 {
  0% {
    transform: translateY(60px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes tra4 {
  0% {
    transform: translateX(6%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra5 {
  0% {
    transform: translateX(-30%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra6 {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.ef {
  opacity: 0;
}

.ef.effect {
  animation: opa2 1.6s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef2 {
  opacity: 0;
}

.ef2.effect {
  animation: opa2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-top {
  opacity: 0;
  transform: translateY(50px);
}

.ef-top.effect {
  animation: opa1 1.6s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-top2 {
  opacity: 0;
  transform: translateY(60px);
}

.ef-top2.effect {
  animation: opa1 1.2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3_2 1.2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-right {
  opacity: 0;
  transform: translateX(6%);
}

.ef-right.effect {
  animation: opa1 1.2s ease-in 0s 1 forwards, tra4 1.2s ease-in-out 0s 1 forwards;
}

.ef-left {
  opacity: 0;
}

.ef-left.effect {
  animation: opa1 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra5 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-lg.effect {
  animation: opa1 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra6 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}


/* ===================
  　Section Common
=================== */

.section {}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.inner {
  margin: 0 auto;
  text-align: justify;
}

.ttl_main {
  margin: 0 0 2.5rem;
  font-size: 3rem;
  font-weight: normal;
  letter-spacing: 0.125em;
  line-height: 1.25;
  text-align: center;
  font-weight: bold;
}


/* ===================
     Text Setting
=================== */

.txt_cont {
  text-align: center;
  line-height: 1.7;
}

.txt_en {
  font-family: "dupincel-variable", sans-serif;
}


/* ===================
  Button Setting
=================== */

.btn_wrap {
  text-align: center;
}

/* ===================
  　CONTENTS INNER
=================== */

.lp_contents_inner {
  width: 56rem;
  max-width: 100%;
  margin: auto;
}

/* ===================
  　　MAIN VISUAL
=================== */

.mv_section {
  position: relative;
  height: calc(1280 * var(--formula));
  background: #d4d2cf;
}

.mv_section .mv_title {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  bottom: calc(222 * var(--formula));
}

.mv_section .mv_bg {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.mv_section .mv_bg img {
  opacity: 0;
  transform: scale(1);
  filter: blur(6px);
  transition: 1s opacity ease-in-out 0s,2s transform ease-in-out 0s,2s filter ease-in-out 0.5s;

}

.mv_section .mv_bg.effect img {
  opacity: 1;
  filter: blur(0);
  transform: scale(1.02);
}


/* ===================
  　　　INTRO
=================== */

.intro_section {
  position: relative;
  z-index: 2;
  background: #f9f7ed;
}

.intro_section::before {
  position: absolute;
  top: calc(-130 * var(--formula));
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(1000 * var(--formula));
  background: url(../img/bg_01.png) no-repeat 0 0;
  background-size: 100%;
  content: "";
}

/* -- intro_navi -- */

.intro_navi {
  margin-bottom: calc(110 * var(--formula));
}

.intro_navi > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(30 * var(--formula));
}

.intro_navi > ul > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(24 * var(--formula));
  background: url(../img/icn_down_arw.svg) no-repeat 64% 88%;
  background-size: calc(40 * var(--formula));
}

.intro_navi > ul ul {
  width: calc(125 * var(--formula));
  height:  calc(120 * var(--formula));
}

.intro_navi > ul .navi_02 ul {
  width: calc(105 * var(--formula));
  height:  calc(120 * var(--formula));
}

.intro_navi img {
  width: 100%;
  height: 100%;
}

.intro_txt {
  margin-bottom: calc(110 * var(--formula));
}

.acc_cont {
  position: relative;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.acc_cont::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.acc_cont.is-open::before {
  opacity: 0;
  z-index: -1;
}

.acc_btn,
.acc_close {
  margin: calc(18 * var(--formula)) auto;
  color: var(--lp-color-main);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 6px;
  font-size: calc(26 * var(--formula));
  cursor: pointer;
}

.intro_txt .acc_cont {
  max-height: calc(360 * var(--formula));
}

.intro_txt .acc_cont.is-open {
  max-height: calc(1200 * var(--formula));
}

.intro_txt .acc_cont::before {
  background: linear-gradient(180deg, rgba(249, 247, 237, 0) 0%, rgba(249, 247, 237, 1) 80%, rgba(249, 247, 237, 1) 100%);
}

.intro_txt p {
  margin-bottom: calc(25 * var(--formula));
  font-size: calc(24 * var(--formula));
  text-align: center;
  line-height: 2.4;
}


/* -- intro_profile -- */

.intro_profile {
  background: url(../img/bg_02.png) no-repeat center;
  background-size: 120%;
  padding-bottom: calc(100 * var(--formula));
}

.profile_area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(50 * var(--formula));
  margin-bottom: calc(65 * var(--formula));
}

.profile_thumb {
  width: calc(300 * var(--formula));
}

.profile_name {
  text-align: center;
}

.profile_name span {
  display: block;
}

.profile_name__sub {
  margin-bottom: calc(20 * var(--formula));
  font-size: calc(24 * var(--formula));
}

.profile_name__main {
  font-size: calc(40 * var(--formula));
  font-family: var(--lp-font-ja-min);
  color: var(--lp-color-main);
}

.profile_catch {
  position: relative;
  width: calc(634 * var(--formula));
  margin: auto;
  background: url(../img/icn_quo.png) no-repeat 0 0,url(../img/icn_quo2.png) no-repeat right bottom;
  background-size: calc(26 * var(--formula)) ,calc(26 * var(--formula));
  font-size: calc(28 * var(--formula));
  text-align: center;
  line-height: 2.4;
  letter-spacing: 0.125em;
}

/* -- intro_date -- */

.intro_date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 * var(--formula));
  padding: 0 0 calc(120 * var(--formula));
  font-size: calc(28 * var(--formula));
}

.intro_date__txt span {
  display: inline-block;
  padding-right: calc(15 * var(--formula));
  color: var(--lp-color-main);
}


/* ===================
  　　　PRODUCT
=================== */

/* -- product_wrap -- */

.product_wrap {
}

.product_wrap .product_img {
  display: block;
  width: calc(780 * var(--formula));
  margin: auto auto calc(78 * var(--formula));
}

.product_wrap .product_main {
  margin-bottom: calc(120 * var(--formula));
  text-align: center;
}

/* -- product_main -- */

.product_main .product_name {
  margin-bottom: calc(34 * var(--formula));
  font-family: var(--lp-font-en);
  font-weight: 300;
  font-size: calc(58 * var(--formula));
  letter-spacing: 0.08em;
  line-height: 1;
}

.product_main .product_name_sub {
  margin-bottom: calc(34 * var(--formula));
  font-size: calc(34 * var(--formula));
  color: var(--lp-color-main);
}

.product_main .product_name_sub .product_tag {
  margin-right: calc(20 * var(--formula));
  border: 1px solid var(--lp-color-main);
  padding: calc(4 * var(--formula)) calc(12 * var(--formula));
  color: var(--lp-color-main);
  font-size: calc(24 * var(--formula));
  vertical-align: top;
}

.product_main .product_price {
  margin-bottom: calc(44 * var(--formula));
  font-size: calc(26 * var(--formula));
}

.product_main .product_link {
}

.product_main .product_link .btn_link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(440 * var(--formula));
  height: calc(78 * var(--formula));
  margin: auto;
  padding-right: calc(8 * var(--formula));
  font-size: calc(32 * var(--formula));
  font-weight: 400;
  color: #fff;
  background: var(--lp-color-main);
}

.lp_contents .button--detail {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-end;
  -moz-column-gap: calc(18 * var(--formula));
       column-gap: calc(18 * var(--formula));
  padding: calc(18 * var(--formula)) calc(19 * var(--formula)) calc(18 * var(--formula)) calc(45 * var(--formula));
  color: #fff;
  text-align: center;
  font-size: calc(32 * var(--formula));
  letter-spacing: 0.1em;
  width: calc(440 * var(--formula));
  z-index: 0;
}

.lp_contents .button--detail::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: calc(15 * var(--formula));
  background-image: url(../img/button-arrow.svg);
  width: calc(18 * var(--formula));
  height: calc(18 * var(--formula));
  z-index: 0;
}

.lp_contents .button--detail .arrow {
  width: calc(37 * var(--formula));
  height: 1px;
}

.lp_contents .button--all {
  display: inline-block;
  padding: calc(36 * var(--formula)) calc(20 * var(--formula)) calc(37 * var(--formula));
  color: #fff;
  text-align: center;
  font-size: calc(44 * var(--formula));
  letter-spacing: 0.1em;
  width: calc(600 * var(--formula));
}

.lp_contents .button .arrow {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.lp_contents .button .arrow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #ffffff;
  background-position: right;
  animation: extend 2s ease-in-out infinite;
  z-index: 0;
}

@keyframes extend {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: 0vw;
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: 5.1282051282vw;
  }
  90% {
    transform: translateX(5.1282051282vw);
    width: 5.1282051282vw;
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}

/* -- product_variations -- */

.product_variations {
  margin-bottom: calc(116 * var(--formula));
}

.product_variations .product_img {
  width: calc(520 * var(--formula));
  margin: auto auto calc(-50 * var(--formula));
}

.product_variations .product_comment {
  width: calc(700 * var(--formula));
  height: calc(470 * var(--formula));
  margin: auto;
  padding: calc(90 * var(--formula)) calc(90 * var(--formula)) 0 calc(98 * var(--formula));
  background: url(../img/product_bg_01.svg) no-repeat;
  background-size: 100%;
}

.product_variations .product_comment_inner {
  width: 0;
  overflow: hidden;
}

.product_variations.effect .product_comment_inner {
  animation: product_comment_fade 2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

@keyframes product_comment_fade {
  0% {
    width: 0;
  }

  100% {
    width: calc(500 * var(--formula));
  }
}

.product_variations .product_comment .product_comment__ttl {
  width: calc(500 * var(--formula));
  margin: 0 auto calc(20 * var(--formula));
  background: url(../img/line_dot.svg) no-repeat right center;
  background-size: calc(204 * var(--formula));
  color: var(--lp-color-main);
  font-size: calc(36 * var(--formula));
  font-family: var(--lp-font-en);
  font-style: italic;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.07em;
}

.product_variations .product_comment .product_comment__txt {
  width: calc(500 * var(--formula));
  margin: auto;
  font-size: calc(24 * var(--formula));
  line-height: 2.4;
}

.product_variations .product_comment .product_comment__more {
  width: calc(500 * var(--formula));
  margin: calc(20 * var(--formula)) auto 0;
  background: url(../img/line_dot2.svg) no-repeat left center;
  background-size: calc(294 * var(--formula));
  color: var(--lp-color-main);
  font-size: calc(26 * var(--formula));
  text-align: right;
  letter-spacing: 0.1em;
}

.product_variations .product_comment .product_comment__more a {
  display: inline-block;
  padding-right: calc(46 * var(--formula));
  background: url(../img/icn_arw.svg) no-repeat right center;
  background-size: calc(36 * var(--formula));
}

.variations02.product_variations .product_img {
  margin: auto auto calc(-70 * var(--formula));
}

.variations02.product_variations .product_comment {
  background-image: url(../img/product_bg_02.svg);
  padding-top: calc(110 * var(--formula));
}

.variations02.product_variations .product_comment__ttl {
  background-position: left center;
  text-align: right;
}

.product02 .product_variations .product_comment {
  background-image: url(../img/product_bg_03.svg);
}

.product02 .product_variations .product_img {
  position: relative;
  width: calc(640 * var(--formula));
  margin-bottom: calc(-100 * var(--formula));
}

.product02 .product_variations .product_img .img_link_01,
.product02 .product_variations .product_img .img_link_02 {
  display: block;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}

.product02 .product_variations .product_img .img_link_01 {
  left: 0;
}

.product02 .product_variations .product_img .img_link_02 {
  right: 0;
}

.product02 .product_variations .product_comment {
  padding-top: calc(140 * var(--formula));
}


/* -- product_charm -- */

.product_charm {
  margin-bottom: calc(120 * var(--formula));
  text-align: center;
}
.product_charm .product_img {
  width: calc(500 * var(--formula));
  margin: 0 auto calc(30 * var(--formula));
}

.product_charm .product_ttl {
  font-size: calc(38 * var(--formula));
  margin-bottom: calc(33 * var(--formula));
  color: var(--lp-color-main);
  line-height: 1;
}

.product_charm .product_price {
  font-size: calc(26 * var(--formula));
  margin-bottom: calc(38 * var(--formula));
  line-height: 1;
}

.product_charm .product_charm_cont {
  width: calc(660 * var(--formula));
  margin: auto;
  padding: calc(50 * var(--formula));
  background: rgba(255, 255, 255, 0.6);
  border-radius: calc(40 * var(--formula));
  text-align: center;
}

.product_charm .product_charm_cont .product_charm__ttl {
  width: fit-content;
  margin: 0 auto calc(30 * var(--formula));
  padding-bottom: calc(8 * var(--formula));
  font-size: calc(24 * var(--formula));
  font-weight: normal;
  background: url(../img/line_dot.png) repeat-x bottom;
  background-size: 100%;
  color: var(--lp-color-main);
}

.product_charm .product_charm_cont .product_charm__txt {
  font-size: calc(20 * var(--formula));
  line-height: 2.2;
}


/* ===================
  　　　LOOK
=================== */

.look_section {
  padding: calc(200 * var(--formula)) 0 0;
  background: url(../img/bg_03.png) no-repeat 0 0;
  background-size: 100%;
}

.look_section .inner {
  background: #f9e9e9;
  padding-bottom: calc(200 * var(--formula));
}

.method_area__ttl {
  margin-bottom: calc(68 * var(--formula));
  text-align: center;
}

.method_area__ttl .ttl_method__main {
  display: block;
  margin-bottom: calc(40 * var(--formula));
  font-size: calc(66 * var(--formula));
  font-weight: 400;
  font-family: var(--lp-font-en);
}

.method_area__ttl .ttl_method__sub {
  display: block;
  color: var(--lp-color-main);
  font-size: calc(28 * var(--formula));
  font-weight: normal;
}

.method_area__content {
  position: relative;
  width: calc(720 * var(--formula));
  background: rgba(255, 255, 255, 0.6);
  border-radius: calc(40 * var(--formula));
  margin: auto auto calc(70 * var(--formula));
  padding: calc(70 * var(--formula)) calc(40 * var(--formula)) calc(70 * var(--formula));
  text-align: center;
}

.method_area__content .look_main {
  margin-bottom: calc(60 * var(--formula));
  padding-bottom: calc(40 * var(--formula));
  background: url(../img/line_dot_look.svg) no-repeat bottom;
  background-size: calc(660 * var(--formula));
}

.method_area__content .look_main .look_main__ttl {
  position: absolute;
  top: calc(100 * var(--formula));
  right: calc(-60 * var(--formula));
  transform: rotate(90deg);
  color: var(--lp-color-main);
  font-size: calc(56 * var(--formula));
  font-weight: 100;
  font-family: var(--lp-font-en);
}

.method_area__content .look_main .look_main__img {
  position: relative;
  width: calc(406 * var(--formula));
  margin: 0 auto calc(40 * var(--formula));
}

.method_area__content .look_main .look_main__img .img_link_01,
.method_area__content .look_main .look_main__img .img_link_02 {
  display: block;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}

.method_area__content .look_main .look_main__img .img_link_01 {
  left: 0;
}

.method_area__content .look_main .look_main__img .img_link_02 {
  right: 0;
}

.method_area__content .look_main .look_main__txt {
  font-size: calc(28 * var(--formula));
  line-height: 2.4;
}

.method_area__content .look_detail {
}

.method_area__content .look_detail .look_img {
  margin-bottom: calc(50 * var(--formula));
}

.method_area__content .look_detail .acc_cont {
  max-height: calc(400 * var(--formula));
  font-size: calc(24 * var(--formula));
}

.method_area__content .look_detail .acc_cont.is-open {
  max-height: calc(2000 * var(--formula));
}

.method_area__content .look_detail .acc_cont::before {
  background: linear-gradient(180deg, rgba(250, 246, 246, 0) 0%, rgba(250, 246, 246, 1) 80%, rgba(250, 246, 246, 1) 100%);
}

.method_area__content .look_detail .acc_cont .look_detail__ttl {
  margin-bottom: calc(40 * var(--formula));
  color: var(--lp-color-main);
  font-size: calc(44 * var(--formula));
  font-weight: 200;
  font-family: var(--lp-font-en);
  letter-spacing: 0.05em;
  line-height: 1;
}

.method_area__content .look_detail .acc_cont ul {
  margin-bottom: calc(50 * var(--formula));
}

.method_area__content .look_detail .acc_cont ul li {
  line-height: 2.2;
}

.method_area__content .look_detail .acc_cont ul li .txt_nm {
  color: var(--lp-color-main);
}

.method_area__content .look_detail .acc_cont .look_detail_more {
  margin-bottom: calc(40 * var(--formula));
  color: var(--lp-color-main);
  font-size: calc(30 * var(--formula));
  font-weight: 200;
  font-family: var(--lp-font-en);
  letter-spacing: 0.05em;
  line-height: 1;
}

.method_area__content .look_detail .acc_cont .look_detail_txt {
  margin-bottom: calc(40 * var(--formula));
  line-height: 2.2;
}

.method_area__content .look_detail .acc_cont .look_detail_item a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: calc(40 * var(--formula));
}

.method_area__content .look_detail .acc_cont .look_detail_item img {
  width: calc(80 * var(--formula));
  margin-right: calc(20 * var(--formula));
}

/* ===================
  　　　FAQ
=================== */

.closing_section {
  position: relative;
  z-index: 2;
  background: #f9f7ed;
  padding-top: calc(70 * var(--formula));
}

.closing_section::before {
  position: absolute;
  top: calc(-130 * var(--formula));
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(1000 * var(--formula));
  background: url(../img/bg_01.png) no-repeat 0 0;
  background-size: 100%;
  content: "";
}

.faq_area {
  width: calc(720 * var(--formula));
  margin: auto auto 0;
}

.faq_area .faq_ttl {
  width: fit-content;
  margin: auto auto calc(40 * var(--formula));
  font-size: calc(34 * var(--formula));
  letter-spacing: 0.125em;
  line-height: 1.2;
  font-weight: 400;
}

.faq_area .faq_ttl span {
  padding-right: calc(20 * var(--formula));
  font-size: calc(60 * var(--formula));
  font-weight: 200;
  font-family: var(--lp-font-en);
}

.faq_area .accordion {
  padding: calc(60 * var(--formula)) calc(120 * var(--formula)) calc(100 * var(--formula)) ;
  background: url(../img/faq_bg.svg) no-repeat 0 0;
  background-size: 100%;
}

.faq_area .accordion.active {
  padding-bottom: calc(120 * var(--formula));
  background-image: url(../img/faq_bg_open.svg) ;
}

.faq_area .acc_cont {
  max-height: calc(470 * var(--formula));
}

.faq_area .acc_cont {
}

.faq_area .acc_cont.is-open {
  max-height: calc(1200 * var(--formula));
}

.faq_area .acc_cont::before {
  display: none;
}

.faq_area .acc_cont .faq_catch {
  margin-bottom: calc(28 * var(--formula));
  font-size: calc(28 * var(--formula));
  color: var(--lp-color-main);
  line-height: 2.1;
}

.faq_area .acc_cont .faq_txt {
  font-size: calc(24 * var(--formula));
  letter-spacing: 0.125em;
  line-height: 2.2;
}

.faq_area .acc_cont .acc_close {
  margin: calc(18 * 53rem / 780) auto;
  color: inherit;
  font-size: calc(22 * var(--formula));
  text-align: right;
}

.faq_area .acc_btn {
  margin: calc(30 * 53rem / 780) auto 0;
  color: inherit;
  font-size: calc(22 * var(--formula));
  text-align: right;

}


/* -- profile_wrap -- */

.profile_wrap {
  background: url(../img/bg_04.png) no-repeat center;
  background-size: 150%;
  padding-top: calc(100 * var(--formula));
  padding-bottom: calc(130 * var(--formula));
}

.profile_wrap .profile_area {
  margin-bottom: calc(55 * var(--formula));
}

.profile_detail {
  width: calc(550 * var(--formula));
  margin: auto;
  font-size: calc(24 * var(--formula));
  line-height: 2.2;
}


.btn_all {
  padding: 0 0 calc(140 * var(--formula));
}

.btn_all a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(600 * var(--formula));
  height: calc(110 * var(--formula));
  margin: auto;
  font-size: calc(44 * var(--formula));
  font-weight: 400;
  color: #fff;
  background: var(--lp-color-main);
}

.archive_area {
  position: relative;
  z-index: 5;
}

/* ===================
  　　　MODAL
=================== */

.modal {
  display: none;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  text-align: justify;
  transition: opacity 0.6s cubic-bezier(0.76, 0.3, 0.41, 1),visibility 0.6s cubic-bezier(0.76, 0.3, 0.41, 1);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal_overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  opacity: 0.6;
  background: #f5dbd7;
}

/* モーダル内コンテンツ */

.modal_inner {
  position: relative;
  width: calc(700 * var(--formula));
  height: fit-content;
  margin: auto;
  background: #fff;
  border-radius: calc(35 * var(--formula));
  padding: calc(100 * var(--formula)) calc(70 * var(--formula)) calc(20 * var(--formula));
  overflow: hidden;
  overflow-y: scroll;
  height: 95dvh;
}

.modal_contents p {
  margin-bottom: calc(30 * var(--formula));
}

.modal_contents .product_img {
  position: relative;
  width: calc(404 * var(--formula));
  margin: auto auto calc(60 * var(--formula));
}

#EX05EX06 .modal_contents .product_img {
  width: calc(570 * var(--formula));
}

.modal_contents .product_img .img_link_01,
.modal_contents .product_img .img_link_02 {
  display: block;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}

.modal_contents .product_img .img_link_01 {
  left: 0;
}

.modal_contents .product_img .img_link_02 {
  right: 0;
}

.modal_contents .product_txt {
  font-size: calc(24 * var(--formula));
  line-height: 2.4;
  letter-spacing: 0.125em;
}

.product_txt_from {
  color: var(--lp-color-main);
  font-family: var(--lp-font-en);
  font-weight: 300;
  font-size: calc(37 * var(--formula));
  font-style: italic;
  letter-spacing: 0.08em;
  text-align: right;
}

.modal .modal_close {
  position: fixed;
  top: calc(80 * var(--formula));
  left: 50%;
  width: calc(40 * var(--formula));
  transform: translateX(-50%);
  margin-left: calc(280 * var(--formula));
}

/* ---- SLIDEBAR ---- */

.js_slidebar .simplebar-track {
  display: block !important;
}

.js_slidebar,
.js_slidebar * {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.js_slidebar::-webkit-scrollbar,
.js_slidebar *::-webkit-scrollbar {
  display: none;
}

.js_slidebar .simplebar-scrollbar::before {
  background: #A7A7A7;
  border-radius: 0;
}

.js_slidebar .simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}

.js_slidebar .simplebar-track.simplebar-horizontal {
  height: 2px !important;
  background: #F0F0F0;
  margin: 0 3.5rem;
  padding: 0;
}

.js_slidebar .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  top: 0;
  height: 2px;
}

.js_slidebar .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
  left: -4px;
  right: -22px;
}

.js_slidebar .simplebar-track.simplebar-vertical {
  width: 3px !important;
  background: #d8d8d8;
  margin: 2rem 1rem;
  padding: 0;
}

.js_slidebar .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
  top: -2px;
  right: 0;
  left: 0;
  bottom: -2px;
  width: 3px !important;
  background: #b2b2b2;
}


/* ===================
  　nav_fololow
=================== */

.lp_contents .nav_follow {
  position: fixed;
  transform: translateY(100%);
  visibility: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  z-index: 1;
  background: #fff;
}

.lp_contents .nav_flex {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.lp_contents .nav_follow.hidden {
  transition: all 0.6s 0.3s;
  visibility: visible;
  transform: translateY(0);
  z-index: 100;
}

.lp_contents .nav_follow.visible {
  transition: all 0.6s 0.3s;
  transform: translateY(100%);
}

.lp_contents .nav_follow li {
  padding: 0;
  border-left: 1px solid #dd887a;
}

.lp_contents .nav_follow li:first-child {
  border-left: none;
}

.lp_contents .nav_follow li a {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: calc(10 * var(--formula));
  height: calc(100 * var(--formula));
  color: #666;
  font-size: calc(24 * var(--formula));
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}

.lp_contents .nav_follow .nav_look01 {
  width: calc(324 * var(--formula));
}

.lp_contents .nav_follow .nav_look01 img {
  width: calc(60 * var(--formula));
}

.lp_contents .nav_follow .nav_look02 {
  width: calc(322 * var(--formula));
}

.lp_contents .nav_follow .nav_look02 img {
  width: calc(54 * var(--formula));
}

.lp_contents .nav_follow .nav_look03 {
  display: block;
  width: calc(128 * var(--formula));
  text-align: center;
}


/*=======================================
                    PC
========================================*/

@media screen and (min-width: 768px) {

  #Wrap,
  .wrapBottom,
  .wrapTop,
  #Contents {
    width: 100%;
  }

  #Contents {
  }

  .header_inner {}

  .lp_contents_wrap {
    display: flex;
  }

  .lp_contents_inner {
    width: 50%;
  }

  .fixed_area {
    width: 50%;
  }

  .fixed_area {
  }

  .fixed_area .main_ttl {
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .fixed_area .main_ttl img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    margin-right: -1px;
  }

  .fixed_navi {
    padding-top: calc(70 * var(--formula));
  }


  /* モーダル内コンテンツ */

  .modal {
    left: auto;
    right: 0;
    width: 50%;
  }

  .modal_overlay {
    width: 100%;
  }

  .modal_inner {
  }

  .modal .modal_close {
    top: calc(70 * var(--formula));
    left: auto;
    right: calc(50vw / 2 - 324 * var(--formula));
    cursor: pointer;
  }

  .mv_section {
    height: calc(1205 * var(--formula));
  }

  @media screen and (min-width: 1350px) {
    .mv_section {
      height: calc(1300 * var(--formula));
    }
  }

  @media screen and (min-width: 1500px) {
    .mv_section {
      height: calc(1400 * var(--formula));
    }
  }
  @media screen and (min-width: 1600px) {
    .mv_section {
      height: calc(1600 * var(--formula));
    }
  }

  /* ===================
    　　　LOOK
  =================== */

  .look_section {
    padding-top: 20%;
  }

  .look_section .inner {
    padding-bottom: 15%;
  }

  .intro_txt {
    margin-bottom: calc(50 * var(--formula));
  }

  .intro_section {
    padding-top: calc(130 * var(--formula));
  }

  /* -- intro_profile -- */

  .intro_profile {
    padding-top: 15%;
  }

  .intro_profile,
  .profile_wrap {
    background-size: 100%;
  }

  .intro_profile {
    background-size: 100% calc(900 * var(--formula));
  }

  .profile_wrap {
    padding-top: 15%;
    padding-bottom: 15%;
  }

  /* ===================
    　　　PRODUCT
  =================== */
/*
  @media only screen and (max-width: 1200px) {

    .product_variations .product_comment .product_comment__ttl {
      background-size: calc(188 * var(--formula));
    }

    .product_variations .product_comment .product_comment__more {
      background-size: calc(280 * var(--formula));
    }
  }
  */

  /* ===================
    　　　FAQ
  =================== */

  .closing_section::before {
    top: -5%;
    height: 14%;
  }

  @media screen and (min-width: 1200px) {

    .closing_section::before {
      top: -6%;
    }

  }

  @media screen and (min-width: 1400px) {

    .closing_section::before {
      top: -7%;
    }

  }

  /* ===================
    　nav_fololow
  =================== */

  .lp_contents .nav_follow {
    display: none;
  }

}

/*=======================================
                    SP
========================================*/


/* only SP */

@media only screen and (max-width: 767px) {

  .pc_only {
    display: none;
  }

  .share-txt {
    margin: 0 !important;
  }

  /* ===================
    LP Contents
  =================== */
  .lp_contents {
  }

  /* ===================
    　Section Common
  =================== */
  .inner {
    width: 100%;
  }

  .contents {
    padding-top: 0;
  }
}