@charset "UTF-8";

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

Title : SB_2024wishmeluck CSS

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


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

html {
  font-size: 62.5%;
  overflow-y: scroll !important;
}
html, body {
  overflow-x: hidden; /* 横スクロールバーを無効化 */
}
main {
  width: 100%;
  max-width: 100%;
}


#Contents {
  margin-bottom: 0;
}

footer {
  margin-top: 0;
}

.lp_contents a {
  text-decoration: none;
  color: var(--color-black);
}

.lp_contents img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: optimizequality;
}

.lp_contents p,
.lp_contents ul,
.lp_contents ol,
.lp_contents dl {
  margin: 0;
}

.topic-path {
  margin-right: 0;
  margin-left: 0;
}


/* ===================
      Roots
=================== */

:root {
  --color-pink: #D399A6;
  --color-black: #1f1f1f;
  --color-lightblack: #8F8F8F;
  --color-white: #ffffff;
  --color-gray: #B5B5B5;
  --color-lightgray: #D8D8D8;
  --color-bg: #FCF2F4;
  --font-en: 'Lato', sans-serif;
  --font-ja: 'ryo-gothic-plusn', sans-serif;
  --font-snb: 'Lato', 'ryo-gothic-plusn', sans-serif;
}

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

.lp_contents {
  padding-bottom: 12rem;
  background-color: var(--color-bg);
  overflow-x: hidden;
  color: var(--color-black);
}

.lp_contents p {
  margin: 0 auto;
  padding: 0;
  font-family: 'Lato', 'ryo-gothic-plusn', sans-serif;
  font-feature-settings: "palt";
  font-size: 1.5rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.125em;
  line-height: 2.4;
  color: var(--color-black);
}

#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 img {
  max-width: 100%;
}

.lp_contents sup {
  font-size: 1rem;
}

.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 a:hover {
  opacity: 0.6;
}

.lp_contents h1 {
  padding: 0;
}

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


.ef {
  opacity: 0;
}

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

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

  100% {
    opacity: 1;
  }
}

.ef {
  opacity: 0;
  -webkit-animation: opa 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0.4s 1 forwards;
          animation: opa 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0.4s 1 forwards;
  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
          mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
          mask-size: 100% max(300%, 100vh);
  -webkit-mask-repeat: none;
          mask-repeat: none;
  -webkit-mask-position: center 100%;
          mask-position: center 100%;
  transform: translateZ(0);
  transition: -webkit-mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear, -webkit-mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear, -webkit-mask-position 1.4s linear;
}

.ef.effect {
  -webkit-mask-position: center 0;
          mask-position: center 0;
}
@-webkit-keyframes opa {
  0% {
    opacity: 0;
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes opa {
  0% {
    opacity: 0;
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.ef2 {
  opacity: 0;
}
.ef2.effect {
  -webkit-animation: fade 1.8s ease forwards;
          animation: fade 1.8s ease forwards;
}
@-webkit-keyframes fade {
  1% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  1% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ef3 {
  opacity: 0;
}
.ef3.effect {
  -webkit-animation: fadeIn 2.4s ease forwards;
          animation: fadeIn 2.4s ease forwards;
}
@-webkit-keyframes fadeIn {
  1% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  1% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.js-swipein,
.js-swipein2{
  width: 112rem;
  margin: 0 auto;
  padding: 9rem 0 10.5rem;
  background-color: rgba(256,256,256, 0.6);
  transform: rotate(-10deg) translate(-30%, 50%);
  opacity: 0;
  transition: all 1s ease;
}

.js-swipein.effect,
.js-swipein2.effect{
  transform: rotate(0deg) translate(0%, 0%);
  opacity: 1;
  transition: all 1s ease;
}

.zoom-img {
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 1s ease, transform 1s ease;
  animation-duration: 2s;
  animation-fill-mode: both;
}
.zoom-img.zoom-out {
  opacity: 1;
  transform: scale(1);
  transition: opacity 2s ease, transform 2s ease;
}

.zoom-txt {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1s ease, transform 1s ease;
  animation-duration: 2s;
  animation-fill-mode: both;
}
.zoom-txt.zoom-in {
  opacity: 1;
  transform: scale(1);
  transition: opacity 2s ease, transform 2s ease;
}


/* ===================
      Button Setting
=================== */
.lp_contents .btn {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  border: none;
  margin-top: 3rem;
}

.lp_contents .btn a {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ===================
  　　　 MV
=================== */
.lp_contents .mv_sec {
  background-color: var(--color-bg);
}

.lp_contents .mv_wrap {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.lp_contents .mv_wrap::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: calc(-445*(100vw / 1400));
  width: calc(300*(100vw / 1400));
  height: calc(600*(100vw / 1400));
  background-image: url('../img/pink_bg0101.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
.lp_contents .mv_wrap::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: calc(-1241*(100vw / 1400));
  width: calc(300*(100vw / 1400));
  height: calc(600*(100vw / 1400));
  background-image: url('../img/pink_bg0102.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

.mv_sec .bg_stars_left {
  position: absolute;
  left: 0;
  bottom: calc(-779*(100vw / 1400));
  width: 22.8rem;
  height: 36rem;
  z-index: 0;
}
.mv_sec .bg_stars_right {
  position: absolute;
  right: 0;
  bottom: calc(-362*(100vw / 1400));
  width: 26rem;
  height: 40.3rem;
  z-index: 0;
}

.lp_contents .mv_wrapper01 {
  width: 100%;
}
.lp_contents .mv_wrapper02 {
  width: calc(1400*(100vw / 1400));
  position: absolute;
  top: 0;
  left: 0;
}
.lp_contents .mv_txt_box {
  width: calc(600*(100vw / 1400));
  margin-top: calc(47*(100vw / 1400));
  margin-left: calc(610*(100vw / 1400));
}
.lp_contents .mv_txt_box h2 {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: calc(26*(100vw / 1400));
  letter-spacing: 0.1em;
  color: var(--color-black);
  text-align: center;
}
.lp_contents .mv_txt_box .mv_txt {
  display: block;
  width: calc(280*(100vw / 1400));
  margin: 0 auto;
  margin-top: calc(25*(100vw / 1400));
}

.lp_contents .mv_date_group {
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
}

.lp_contents .mv_ttl_date {
  width: fit-content;
  margin: 0;
  font-size: 1.5rem;
  text-align: center;
  line-height: 2.4;
}

.lp_contents .mv_ttl_date span {
  display: inline-block;
  margin-right: calc(10*(100vw / 1400));
  color: var(--color-pink);
}

/* ===================
  　　lead modal
=================== */
.lead {
  width: 140rem;
  margin: 0 auto;
}
.lead_wrap {
  width: 82rem;
  height: 33.6rem;
  margin: 0 auto;
  background-image: url('../img/lead_box.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-top: 10rem;
  position: relative;
  z-index: 2;
  border: solid 1px var(--color-pink);
  border-radius: 5rem;
}
.lead_wrap .lead_wrapper {
  width: 70rem;
  margin: 0 auto;
  position: relative;
  padding-top: 7rem;
}
.lead_wrap .lead_wrapper .mv_txt {
  display: block;
  width: 25.2rem;
  margin: 0 auto;
}
.lead_wrap .lead_wrapper p {
  font-family: var(--font-snb);
  font-size: 1.6rem;
  letter-spacing: 0.125em;
  line-height: 2.4;
  text-align: center;
  margin-top: 2.4rem;
}
.page-share-btn #share {
  transition: transform .4s .4s ease;
  z-index: 10;
}
.page-share-btn #share.up {
  transition: transform .4s .4s ease;
  transform: translateY(-60px);
}
header.hide,
.to_menu.hide,
#share.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s !important;
}
.navigation_wrap.hide, .nav_follow.hide .navigation_list.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s !important;
}
.modal-triggers {
  display: flex;
  width: 11.6rem;
  position: absolute;
  left: 50%;
  bottom: -6rem;
  transform: translateX(-50%);
  z-index: 3;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: solid 1px #666666;
  padding-bottom: 0.4rem;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
.modal-triggers {
  font-family: var(--font-en);
  color: var(--color-black);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
}
/* .dli-plus-circle {
  display: inline-block;
  vertical-align: middle;
  color: var(--color-black);
  line-height: 1;
  position: relative;
  width: calc(18*(100vw / 1400));
  height: calc(18*(100vw / 1400));
  border: 0.1em solid currentColor;
  border-radius: 50%;
  box-sizing: content-box;
  margin-left: calc(10*(100vw / 1400));
  margin-top: -0.3rem;
}
.dli-plus-circle > span {
  width: calc(12*(100vw / 1400));
  height: 1px;
  background: currentColor;
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.dli-plus-circle > span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
} */

.modal-style{
  background: var(--color-white);
  width: 72rem;
  height: 48.4rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5001;
  margin-top: 5rem;
  opacity: 0; /* 初期状態では透明 */
  visibility: hidden; /* 初期状態では見えない */
  transition: opacity 1s ease, visibility 0s 0.3s;
}
.modal-con {
  width: 100%;
  height: auto;
}
.modal-close-buttons {
  display: block;
  position: absolute;
  width: 3rem;
  height:3rem;
  top: 2rem;
  right: 2rem;
  border: none;
  background: none;
}
.modal-close-buttons::before, .modal-close-buttons::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px; /* 棒の幅（太さ） */
  height: 4.2rem;
  background: #666666; /* バツ印の色 */
}
.modal-close-buttons::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.modal-close-buttons::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.modal-con .mv_txt {
  display: block;
  width: 25.2rem;
  margin: 0 auto;
  margin-top: 6rem;
}
.model_item_box {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: var(--color-black);
}
.model_item_box p {
  font-family: var(--font-snb);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.125em;
  line-height: 2.4;
  margin-top: 3.1rem;
}
.model_item_box p:nth-of-type(2) {
  margin-top: 2.4rem;
}

.modal-overlay {
  box-sizing: border-box;
  opacity: 0; /* 初期状態では透明 */
  visibility: hidden; /* 初期状態では見えない */
  transition: opacity 1s ease, visibility 0s 0.3s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  z-index: 1000;
}
/* モーダルが表示されるとき */
.modal-style.active, .modal-overlay.active {
  opacity: 1; /* 不透明 */
  visibility: visible; /* 見える */
  transition: opacity 1s ease, visibility 0s 0s;
}

/* ===================
  　　section01
=================== */
.section01 {
  width: 100%;
  position: relative;
  margin-top: 9.2rem;
}
.section01::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: calc(-480*(100vw / 1400));
  width: calc(495*(100vw / 1400));
  height: calc(600*(100vw / 1400));
  background-image: url(../img/pink_bg0201.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
.section01 .sec_wrap {
  width: 100%;
  margin: 0 auto;
}
.section01 .bg_stars_left {
  width: 36.4rem;
  height: 42rem;
  left: 0;
  bottom: calc(-294*(100vw / 1400));
  position: absolute;
}
.section01 .bg_stars_right {
  width: 23.1rem;
  height: 37.1rem;
  right: 0;
  bottom: calc(134*(100vw / 1400));
  position: absolute;
}
.section01 .sec_wrap .sec_wrapper01 {
  width: 100%;
  height: calc(680*(100vw / 1400));
  margin: 0 auto;
  background-image: url('../img/sec01.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}
.section01 .sec_wrap .sec_title_box {
  width: calc(1400*(100vw / 1400));
  margin: 0 auto;
}
.section01 .sec_wrap .sec_title {
  position: absolute;
  top: calc(269*(100vw / 1400));
  left: calc(230*(100vw / 1400));
}
.section01 .sec_wrap .sec_wrapper02 {
  width: 140rem;
  margin: 0 auto;
  margin-top: 10rem;
}
.section01 .sec_wrap .sec_item_list {
  width: 106rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  row-gap: 4rem;
}
.section01 .sec_wrap .sec_item_list._02 {
  display: none;
}
.section01 .sec_wrap .sec_item_list li {
  width: 18rem;
  justify-content: center;
  align-items: center;
}
.section01 .sec_wrap .sec_item_list p {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 1.7rem;
}
.section01 .sec_wrap .sec_item_list .txt_ja {
  font-family: var(--font-ja);
}
.section01 .sec_wrap .sec_item_list .txt_en {
  font-family: var(--font-en);
  letter-spacing: 0.1em;
}
.section01 .credit_box {
  width: 40rem;
  margin: 0 auto;
  margin-top: 4rem;
  text-align: center;
}
.section01 .sec_lead {
  font-size: 1.9rem;
}
.section01 .sec_credit {
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  font-size: 1.6rem;
  line-height: 0;
  margin-top: 1.8rem;
}

/* ===================
  　　section02
=================== */
.section02 {
  width: 100%;
  position: relative;
  margin-top: 14rem;
}
.section02 .sec_wrap {
  width: 100%;
  margin: 0 auto;
}
.section02 .bg_stars_right {
  width: 35.1rem;
  height: 41.6rem;
  right: 0;
  bottom: calc(396*(100vw / 1400));
  position: absolute;
}
.section02 .sec_wrap .sec_wrapper01 {
  width: 100%;
  height: calc(680*(100vw / 1400));
  margin: 0 auto;
  background-image: url('../img/sec02.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}
.section02 .sec_wrap .sec_title_box {
  width: calc(1400*(100vw / 1400));
  margin: 0 auto;
}
.section02 .sec_wrap .sec_title {
  position: absolute;
  right: calc(261*(100vw / 1400));
  top: calc(269*(100vw / 1400));
}
.section02 .sec_wrap .sec_wrapper02 {
  width: 140rem;
  margin: 0 auto;
  margin-top: 8rem;
}
.section02 .sec_wrap .sec_item_list {
  width: 106rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  row-gap: 4rem;
}
.section02 .sec_wrap .sec_item_list._02 {
  display: none;
}
.section02 .sec_wrap .sec_item_list li {
  width: 18rem;
  justify-content: center;
  align-items: center;
}
.section02 .sec_wrap .sec_item_list p {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 1.7rem;
}
.section02 .sec_wrap .sec_item_list .txt_ja {
  font-family: var(--font-ja);
}
.section02 .sec_wrap .sec_item_list .txt_en {
  font-family: var(--font-en);
  letter-spacing: 0.1em;
}
.section02 .credit_box {
  width: 40rem;
  margin: 0 auto;
  margin-top: 2.7rem;
  text-align: center;
}
.section02 .sec_lead {
  font-size: 1.9rem;
}
.section02 .sec_credit {
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  font-size: 1.6rem;
  line-height: 0;
  margin-top: 1.7rem;
}

/* ===================
  　　section03
=================== */
.section03 {
  width: 100%;
  position: relative;
  margin-top: calc(92*(100vw / 1400));
}
.section03::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(550*(100vw / 1400));
  width: calc(400*(100vw / 1400));
  height: calc(600*(100vw / 1400));
  background-image: url(../img/pink_bg0302.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
.section03::after {
  content: '';
  position: absolute;
  right: 0;
  top: calc(250*(100vw / 1400));
  width: calc(412.5*(100vw / 1400));
  height: calc(600*(100vw / 1400));
  background-image: url(../img/pink_bg0301.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
.section03 .sec_warpper {
  width: 140rem;
  margin: 0 auto;
}
.section03 .sec_warpper .sec_wrap {
  width: 87rem;
  margin: 0 auto;
}
.section03 .bg_stars_left {
  width: 39.2rem;
  height: 49rem;
  left: 0;
  top: -16.6rem;
  position: absolute;
}

/* ACCORDION */
.lp_contents .accordion_wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .8s;
}

.lp_contents .open > .accordion_wrap {
  grid-template-rows: 1fr;
}

.lp_contents .accordion_inner {
  position: relative;
  padding-bottom: 3.3rem;
  min-height: 20rem;
  overflow: hidden;
}

.lp_contents .accordion_inner::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 18rem;
  background: linear-gradient(transparent, var(--color-bg));
  content: "";
  z-index: 3;
}

.lp_contents .open .accordion_inner::before {
  display: none;
}

.lp_contents .main_lead .accordion_txt {
  display: block;
  margin-bottom: 3.2rem;
}

.lp_contents .main_lead .accordion_txt:last-of-type {
  margin-bottom: 0;
}

.lp_contents .mv_sec .accordion_outside {
  margin-top: 8rem;
}

.lp_contents .accordion_btn {
  position: relative;
  width: 10rem;
  margin: 0 auto;
  font-size: 1.3rem;
  line-height: 2;
  text-align: center;
  cursor: pointer;
}

.lp_contents .accordion_btn .to_open {
  margin-top: 3rem;
}

.lp_contents .accordion_btn .to_open,
.lp_contents .accordion_btn .to_close {
  text-decoration: underline;
  text-underline-offset: 6px;
  white-space: nowrap;
  text-decoration-color: #666;
}

.lp_contents .accordion_btn .to_open,
.lp_contents .open .accordion_btn .to_close {
  display: block;
}

.lp_contents .accordion_btn .to_close,
.lp_contents .open .accordion_btn .to_open {
  display: none;
}

/* NAV  */
.lp_contents .navigation_wrap {
  margin-top: 12rem;
}

.lp_contents .navigation_list {
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.lp_contents .navigation_list li {
  position: relative;
  display: flex;
  gap: 1.5rem;
  padding: 0 1.8rem 1rem 1.4rem;
}

.lp_contents .navigation_list li:nth-of-type(1) {
  width: 34.6rem;
}
.lp_contents .navigation_list li:nth-of-type(2) {
  width: 30.2rem;
}
.lp_contents .navigation_list li:nth-of-type(3) {
  width: 31.6rem;
}
.lp_contents .navigation_list li:nth-of-type(4) {
  width: 22.6rem;
}

.lp_contents .navigation_list li:before {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background-color: var(--color-pink);
  content: "";
}

.lp_contents .navigation_list li:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.6rem;
  width: 1.6rem;
  height: 0.8rem;
  margin-top: -.6rem;
  background: url(../img/nav_arrow.svg) no-repeat;
  background-size: 100%;
  content: "";
}

.lp_contents .navigation_list li a{
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

.lp_contents .navigation_list li .nav_img01 {
  width: 4rem;
}
.lp_contents .navigation_list li .nav_img02 {
  width: 3.4rem;
}
.lp_contents .navigation_list li .nav_name {
  font-size: 1.8rem;
  line-height: 1;
  text-align: left;
  letter-spacing: 0.1em;
}

/* FOLLOW NAV  */
.lp_contents .nav_follow {
  position: fixed;
  transform: translateY(100%);
  visibility: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  z-index: 1;
  background-color: var(--color-bg);
}

.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%);
  /* z-index: -2; */
}

.lp_contents .nav_follow {
  height: 7rem;
  border-top: 1px solid var(--color-pink);
}

.lp_contents .nav_follow .navigation_list {
  gap: 0;
}

.lp_contents .nav_follow .navigation_list li {
  padding: 0;
  justify-content: center;
  align-items: center;
  height: 7rem;
}

.lp_contents .nav_follow li .nav_name {
  font-size: 1.6rem;
}

.lp_contents .nav_follow .navigation_list li:nth-of-type(1) {
  width: 26.5rem;;
}
.lp_contents .nav_follow .navigation_list li:nth-of-type(2) {
  width: 27.5rem;
}
.lp_contents .nav_follow .navigation_list li:nth-of-type(3) {
  width: 20.4rem;
}
.lp_contents .nav_follow .navigation_list li:nth-of-type(4) {
  width: 17rem;
}

.lp_contents .nav_follow .navigation_list li:before {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  width: 1px;
  height: 8rem;
  background-color: var(--color-pink);
  content: "";
}

.lp_contents .nav_follow .navigation_list li:first-of-type:before {
  content: none;
}

.lp_contents .nav_follow .navigation_list li:after {
  content: none;
}


/* ===================
  　　　 PRODUCT
=================== */
/* .lp_contents .product_sec {
  background-color: var(--color-bg);
} */
.lp_contents .product_sec .product_lead {
  text-align: center;
}
.lp_contents .product_var_wrap {
  width: 72rem;
  margin: 0 auto;
  margin-top: 6rem;
}
.lp_contents .product_var_wrap._02 {
  width: 87rem;
  margin: 0 auto;
  margin-top: 6rem;
}

/*===========
.f_area
===========*/
.f_area {
  display: flex;
  justify-content: flex-start; /* 横並びにする */
  width: 100%;
  flex-wrap: nowrap; /* 横並びでスクロール */
  gap: 3rem;
}

.f_area .f_one {
  width: 12rem;
  flex-shrink: 0; /* 要素が縮小しないようにする */
}

.f_area .f_one a {
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
}

.f_area .f_one a img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.lp_contents .product_var_wrap .look_item_img p {
  font-size: 1.2rem;
  line-height: 2;
  text-align: center;
  margin-top: 1.5rem;
}

.lp_contents .main_btn a {
  position: relative;
  align-items: center;
  width: 26rem;
  height: 4.6rem;
  margin: 0.9rem auto 0;
  font-size: 1.6rem;
  letter-spacing: 1.5px;
  padding: 1.3rem 0 1.1rem;
  background-color: var(--color-pink);
  color: var(--color-white);
}

.lp_contents .main_btn a .txt {
  margin-left: -4.3rem;
  margin-right: 2.6rem;
}

.lp_contents .main_btn a:before {
  content: "";
  position: absolute;
  transform: translateY(-44%);
  top: 50%;
  right: 0.9rem;
  width: 0.7rem;
  height: 1rem;
  background-image: url(../img/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
}
.lp_contents .main_btn._02 a:before {
  content: "";
  position: absolute;
  transform: translateY(-54%);
  top: 50%;
  right: 0.9rem;
  width: 0.7rem;
  height: 1rem;
  background-image: url(../img/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
}
.lp_contents .main_btn .border {
  position: relative;
  overflow: clip;
  width: 2rem;
  height: 1px;
  margin-right: -8rem;
  z-index: 0;
}

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

@-webkit-keyframes extend {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: calc(0 * 100vw/780);
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: 2rem;
  }
  90% {
    transform: translateX(2rem);
    width: 2rem;
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}
@keyframes extend {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: calc(0 * 100vw/780);
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: 2rem;
  }
  90% {
    transform: translateX(2rem);
    width: 2rem;
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}
.product_sec .btn {
  margin-top: 6rem;
}
.lp_contents .look_btn a {
  position: relative;
  align-items: center;
  width: 33rem;
  height: 5rem;
  margin: 0 auto;
  font-size: 1.6rem;
  padding: 1.3rem 0;
  background-color: var(--color-pink);
  color: var(--color-white);
}

.lp_contents .look_btn a .txt {
  margin-left: -4rem;
  margin-right: 5rem;
}

.lp_contents .look_btn a:before {
  content: "";
  position: absolute;
  z-index: 0;
  transform: translateY(-54%);
  top: 50%;
  right: 1rem;
  width: 0.7rem;
  height: 1rem;
  background-image: url(../img/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.lp_contents .look_btn .border {
  position: relative;
  overflow: clip;
  width: 2rem;
  height: 1px;
  margin-right: -9.5rem;
  z-index: 0;
}

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

@-webkit-keyframes extend2 {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: calc(0 * 100vw/780);
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: 2rem;
  }
  90% {
    transform: translateX(2rem);
    width: 2rem;
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}
@keyframes extend2 {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: calc(0 * 100vw/780);
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: 2rem;
  }
  90% {
    transform: translateX(2rem);
    width: 2rem;
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}

.lp_contents .product_sec .accordion_outside {
  margin-top: 6.4rem;
}

/* .lp_contents .accordion_outside .accordion_inner::before {
  background: linear-gradient(-180deg, rgba(252, 242, 244, 0) 0%, rgba(252, 242, 244, 0.14) 13.75%, rgba(252, 242, 244, 1) 100%);
} */


.lp_contents .product_sec .accordion_outside .accordion_btn .to_open,
.lp_contents .product_sec .accordion_outside .accordion_btn .to_close {
  text-underline-offset: 7px;
}

.lp_contents .product_sec .accordion_outside .to_open {
  margin-top: 1rem;
}
.lp_contents .product_box2 {
  margin-top: 2.1rem;
}
.lp_contents .product_title {
  font-family: var(--font-en);
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
}
.lp_contents .product_list {
  font-size: 1.3rem;
  text-align: center;
  margin-top: 2.1rem;
  letter-spacing: .125em;
  font-feature-settings: "palt";
}
.lp_contents .product_list li {
  margin-top: 0;
  line-height: 2.4;
}
.lp_contents .product_detail {
  font-size: 1.3rem;
  text-align: center;
  margin-top: 2rem;
}
.lp_contents .txt_pink {
  color: var(--color-pink);
  text-decoration: underline;
}

/* .lp_contents .accordion_inner::before {
  height: calc(180*(100vw / 1400));
  background:linear-gradient(-180deg, rgba(252, 242, 244, 0) 0%, rgba(252, 242, 244, 0.14) 13.75%, rgba(252, 242, 244, 1) 100%);
  content: "";
} */

/* ===================
  　　  LOOK
=================== */
.look_img_outside {
  width: 86rem;
  margin: 0 auto;
  margin-top: 4.2rem;
}

.look_img_wrap {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  row-gap: 2rem;
}

.look_img_wrap.active {
  height: auto;
  /*opacity: 1;*/
}

.look_img {
  width: 42rem;
}

.lp_contents .decor_loop {
  position: relative;
  width: 100%;
  padding: 5rem 0;
  margin-top: 12rem;
}

.lp_contents .decor_loop:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8rem;
  background-image: url(../img/makeup_look.png?20241211);
  background-repeat: repeat-x;
  background-size: auto 100%;
  content: "";
  animation: loop 40s linear infinite;
}

@keyframes loop {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -150rem 0;
  }
}

/*============================
          CAMPAIGN
============================*/
.lp_contents .campaign {
  margin-top: 14rem;
  position: relative;
}
.lp_contents .campaign .bg_stars_left {
  width: 42rem;
  height: 42rem;
  position: absolute;
  left: 0;
  bottom: -31.4rem;
}
.lp_contents .campaign .bg_stars_right {
  width: 35rem;
  height: 46.2rem;
  right: 0;
  top: calc(-592*(100vw / 1400));
  position: absolute;
}
.lp_contents .campaign_wrap {
  width: 140rem;
  margin: 0 auto;
}
.lp_contents .campaign_inner {
  width: 74rem;
  height: 68.8rem;
  margin: 0 auto;
  background-image: url('../img/campaign_box.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 10;
  border: solid 1px var(--color-pink);
  border-radius: 5rem;
}
.lp_contents .campaign_box {
  width: 100%;
  margin: 0 auto;
}
.lp_contents .campaign_wrapper01 {
  display: block;
  width: 70rem;
  margin: 0 auto;
  padding-top: 5.9rem;
}
.lp_contents .campaign_wrapper01 .campaign_title {
  font-family: var(--font-en);
  font-size: 3.6rem;
  letter-spacing: 0.075em;
  text-align: center;
  line-height: 1;
}
.lp_contents .campaign_wrapper02 .slider_pc {
  width: 27rem;
  margin: 0 auto;
  margin-top: 4.1rem;
}
.lp_contents .campaign_wrapper02 .campaign_img {
  width: 100%;
  margin: 0 auto;
}

.campaign_wrapper02 .slider_pc .slick-slide {
  display: block;
}

.campaign_wrapper02 .slick-slide img {
  width: 100%;
}

.lp_contents .campaign_wrapper02 .cam_lead {
  font-family: var(--font-snb);
  font-size: 1.5rem;
  letter-spacing: 0.125em;
  line-height: 2.4;
  text-align: center;
  margin-top: 2.9rem;
}
.lp_contents .campaign_wrapper02 .cam_point {
  font-family: var(--font-snb);
  font-size: 1.2rem;
  letter-spacing: 0.125em;
  line-height: 2;
  text-align: center;
  margin-top: 1.3rem;
}


.lp_contents .all_btn {
  display: block;
  max-width: 102rem;
  margin: 0 auto;
  padding: 0;
  border: none;
  margin-top: 12rem;
}

.lp_contents .all_btn a {
  position: relative;
  display: flex;
  justify-content: center;
}

.lp_contents .all_btn a {
  align-items: center;
  width: 102rem;
  height: 7.4rem;
  padding: 2.5rem 0;
  margin: 0 auto;
  font-size: 2.4rem;
  text-align: center;
  background-color: var(--color-pink);
  color: var(--color-white);
}

.lp_contents .archive_area {
  margin-top: 12rem;
}

/*=======================================
               Responsive
========================================*/


/* only PC */

@media screen and (min-width: 769px) {
  .sp_only {
    display: none;
  }
}



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

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

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

  .lp_contents {
    overflow: hidden;
  }
}


/* only tablet */

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

  html {
    font-size: calc(10 * (100vw / 1400));
  }

}

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


/* only SP */

@media only screen and (max-width: 768px) {
  .pc_only {
    display: none;
  }

  .lp_contents {
    overflow: hidden;
    margin: 0 auto;
    padding-bottom: calc(180*(100vw / 780));
    font-size: calc(24 * (100vw / 780));
  }

  .lp_contents p {
    font-size: calc(24 * (100vw / 780));
  }


  .lp_contents a:hover,
  .lp_contents a:active,
  .lp_contents a:focus {
    opacity: 1;
  }
  body {
    height: auto;
  }

  /* ===================
      Button Setting
  =================== */
  .lp_contents .btn {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
  }

  .lp_contents .btn a {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

/* ===================
  　　　 MV
=================== */
.lp_contents .mv_sec {
  padding-top: calc(2*(100vw / 780));
}
.lp_contents .mv_wrap::before {
  bottom: calc(-400*(100vw / 780));
  width: calc(400*(100vw / 780));
  height: calc(800*(100vw / 780));
}
.lp_contents .mv_wrap::after {
  bottom: calc(-1500*(100vw / 780));
  width: calc(400*(100vw / 780));
  height: calc(800*(100vw / 780));
}

.mv_sec .bg_stars_left {
  bottom: initial;
  top: calc(1655*(100vw / 780));
  width: calc(380*(100vw / 780));
  height: calc(600*(100vw / 780));
}
.mv_sec .bg_stars_right {
  bottom: initial;
  top: calc(888*(100vw / 780));
  width: calc(400*(100vw / 780));
  height: calc(620*(100vw / 780));
}
.lp_contents .mv_wrapper02 {
  width: calc(780*(100vw / 780));
}
.lp_contents .mv_txt_box {
  width: calc(520*(100vw / 780));
  margin-top: calc(38*(100vw / 780));
  margin-left: calc(240*(100vw / 780));
}
.lp_contents .mv_txt_box h2 {
  font-size: calc(40*(100vw / 780));
  letter-spacing: 0.075em;
}
.lp_contents .mv_txt_box .mv_txt {
  width: calc(308*(100vw / 780));
  margin-top: calc(21*(100vw / 780));
}

.lp_contents .icon_clover {
  margin:calc(80 * (100vw / 780)) auto 0;
  width: calc(144 * (100vw / 780));
}

.lp_contents .mv_date_group {
  margin-top: calc(82*(100vw / 780));
}

.lp_contents .mv_ttl_date {
  font-size: calc(26*(100vw / 780));
}

.lp_contents .mv_ttl_date span {
  margin-right: calc(20*(100vw / 780));
}

/* ===================
  　　lead modal
=================== */
.lead {
  width: calc(780*(100vw / 780));
  margin: 0 auto;
}
.lead_wrap {
  width: calc(700*(100vw / 780));
  height: calc(588*(100vw / 780));
  background-image: url('../img/sp/lead_box.png');
  margin-top: calc(129*(100vw / 780));
  border: solid calc(2*(100vw / 780)) var(--color-pink);
  border-radius: calc(68*(100vw / 780));
}
.lead_wrap .lead_wrapper {
  width: calc(700*(100vw / 780));
  padding-top: calc(100*(100vw / 780));
}
.lead_wrap .lead_wrapper .mv_txt {
  width: calc(420*(100vw / 780));
}
.lead_wrap .lead_wrapper p {
  font-size: calc(28*(100vw / 780));
  margin-top: calc(32*(100vw / 780));
}
.modal-triggers {
  width: calc(200*(100vw / 780));
  bottom: calc(-98*(100vw / 780));
  border-bottom: solid calc(2*(100vw / 780)) #666666;
  padding-bottom: calc(7*(100vw / 780));
}
.modal-triggers {
  font-size: calc(32*(100vw / 780));
}
.modal-style{
  width: calc(720*(100vw / 780));
  height: calc(1016*(100vw / 780));
  margin-top: calc(50*(100vw / 780));
}
.modal-close-buttons {
  width: calc(40*(100vw / 780));
  height: calc(40*(100vw / 780));
  top: calc(30*(100vw / 780));
  right: calc(30*(100vw / 780));
}
.modal-close-buttons::before, .modal-close-buttons::after {
  width: calc(2*(100vw / 780));
  height: calc(56*(100vw / 780));
}
.modal-con .mv_txt {
  width: calc(364*(100vw / 780));
  margin-top: calc(99*(100vw / 780));
}
.model_item_box p {
  font-size: calc(24*(100vw / 780));
  margin-top: calc(46*(100vw / 780));
}
.model_item_box p:nth-of-type(2) {
  margin-top: calc(39*(100vw / 780));
}

/* ===================
  　　section01
=================== */
.section01 {
  margin-top: calc(116*(100vw / 780));
}
.section01::after {
  bottom: calc(-400*(100vw / 780));
  width: calc(660*(100vw / 780));
  height: calc(800*(100vw / 780));
}
.section01 .bg_stars_left {
  width: calc(520*(100vw / 780));
  height: calc(600*(100vw / 780));
  bottom: calc(-553*(100vw / 780));
}
.section01 .bg_stars_right {
  width: calc(330*(100vw / 780));
  height: calc(530*(100vw / 780));
  bottom: calc(682*(100vw / 780));
}
.section01 .sec_wrap .sec_wrapper01 {
  width: calc(780*(100vw / 780));
  height: calc(1060*(100vw / 780));
  margin: 0 auto;
  background-image: url('../img/sp/sec01.png');
  position: relative;
}
.section01 .sec_wrap .sec_title_box {
  width: calc(640*(100vw / 780));
  position: absolute;
  bottom: calc(57*(100vw / 780));
  left: 50%;
  transform: translateX(-50%);
}
.section01 .sec_wrap .sec_title {
  position: static;
  text-align: justify;
}
.section01 .sec_wrap .sec_wrapper02 {
  width: calc(780*(100vw / 780));
  margin: 0 auto;
  margin-top: calc(100*(100vw / 780));
  position: relative;
  z-index: 10;
}
.section01 .sec_wrap .sec_item_list {
  width: calc(728*(100vw / 780));
  row-gap: calc(40*(100vw / 780));
}
.section01 .sec_wrap .sec_item_list li {
  width: calc(216*(100vw / 780));
}
.section01 .sec_wrap .sec_item_list p {
  font-size: calc(24*(100vw / 780));
  text-align: center;
  margin-top: calc(22*(100vw / 780));
  line-height: 1.8;
}
.section01 .sec_wrap .sec_item_list .txt_ja {
  font-size: calc(22*(100vw / 780));
}
.section01 .sec_wrap .sec_item_list._02 {
  width: calc(472*(100vw / 780));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: calc(61*(100vw / 780));
}
.section01 .sec_wrap .sec_item_list_02 li {
  width: calc(216*(100vw / 780));
}
.section01 .credit_box {
  width: calc(640*(100vw / 780));
  margin-top: calc(70*(100vw / 780));
}
.section01 .sec_lead {
  font-size: calc(32*(100vw / 780));
}
.section01 .sec_credit {
  font-size: calc(30*(100vw / 780));
  margin-top: calc(26*(100vw / 780));
}

/* ===================
  　　section02
=================== */
.section02 {
  margin-top: calc(179*(100vw / 780));
}
.section02 .bg_stars_left {
  width: calc(520*(100vw / 780));
  height: calc(600*(100vw / 780));
  bottom: calc(-553*(100vw / 780));
}
.section02 .bg_stars_right {
  width: calc(540*(100vw / 780));
  height: calc(640*(100vw / 780));
  bottom: calc(692*(100vw / 780));
}
.section02 .sec_wrap .sec_wrapper01 {
  width: calc(780*(100vw / 780));
  height: calc(1100*(100vw / 780));
  margin: 0 auto;
  background-image: url('../img/sp/sec02.png');
  position: relative;
}
.section02 .sec_wrap .sec_title_box {
  width: calc(640*(100vw / 780));
  position: absolute;
  bottom: calc(57*(100vw / 780));
  left: 50%;
  transform: translateX(-50%);
}
.section02 .sec_wrap .sec_title {
  position: static;
  text-align: justify;
}
.section02 .sec_wrap .sec_wrapper02 {
  width: calc(780*(100vw / 780));
  margin: 0 auto;
  margin-top: calc(80*(100vw / 780));
  position: relative;
  z-index: 10;
}
.section02 .sec_wrap .sec_item_list {
  width: calc(728*(100vw / 780));
  row-gap: calc(40*(100vw / 780));
}
.section02 .sec_wrap .sec_item_list li {
  width: calc(216*(100vw / 780));
}
.section02 .sec_wrap .sec_item_list p {
  font-size: calc(24*(100vw / 780));
  text-align: center;
  margin-top: calc(22*(100vw / 780));
  line-height: 1.8;
}
.section02 .sec_wrap .sec_item_list .txt_ja {
  font-size: calc(22*(100vw / 780));
}
.section02 .sec_wrap .sec_item_list._02 {
  width: calc(472*(100vw / 780));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: calc(61*(100vw / 780));
}
.section02 .sec_wrap .sec_item_list_02 li {
  width: calc(216*(100vw / 780));
}
.section02 .credit_box {
  width: calc(640*(100vw / 780));
  margin-top: calc(60*(100vw / 780));
}
.section02 .sec_lead {
  font-size: calc(32*(100vw / 780));
}
.section02 .sec_credit {
  font-size: calc(30*(100vw / 780));
  margin-top: calc(28*(100vw / 780));
}
/* ===================
  　　section03
=================== */
.section03 {
  width: calc(780*(100vw / 780));
  margin-top: calc(92*(100vw / 780));
}
.section03::before {
  top: calc(1451*(100vw / 780));
  width: calc(530*(100vw / 780));
  height: calc(800*(100vw / 780));
}
.section03::after {
  top: calc(320*(100vw / 780));
  width: calc(550*(100vw / 780));
  height: calc(800*(100vw / 780));
}
.section03 .sec_warpper {
  width: calc(780*(100vw / 780));
}
.section03 .sec_warpper .sec_wrap {
  width: calc(780*(100vw / 780));
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
.section03 .bg_stars_left {
  width: calc(560*(100vw / 780));
  height: calc(700*(100vw / 780));
  top: calc(-180*(100vw / 780));
}

/* ACCORDION */
.lp_contents .accordion_wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .8s;
}

.lp_contents .open > .accordion_wrap {
  grid-template-rows: 1fr;
}

.lp_contents .accordion_inner {
  padding-bottom: calc(54*(100vw / 780));
  min-height: calc(345*(100vw / 780));
}

.lp_contents .accordion_outside .accordion_inner::before{
  height: calc(260*(100vw / 780));
  background: linear-gradient(transparent, var(--color-bg));
  content: "";
}

.lp_contents .main_lead .accordion_txt {
  display: block;
  margin-bottom: calc(50 * (100vw / 780));
}


.lp_contents .mv_sec .accordion_outside {
  margin-top: calc(103 * (100vw / 780));
}

.lp_contents .accordion_btn {
  width: calc(138 * (100vw / 780));
  font-size: calc(24 * (100vw / 780));
}

.lp_contents .accordion_btn .to_open {
  margin-top: calc(32 * (100vw / 780));
}

.lp_contents .accordion_btn .to_open,
.lp_contents .accordion_btn .to_close {
  text-underline-offset: 6px;
}


/* NAV  */
.lp_contents .navigation_wrap {
  margin-top: calc(152 * (100vw / 780));
}

.lp_contents .navigation_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(30 * (100vw / 780));
  row-gap: calc(40*(100vw / 780));
}

.lp_contents .navigation_list li {
  gap: calc(20 * (100vw / 780));
  padding: 0 calc(0 * (100vw / 780)) calc(20 * (100vw / 780)) calc(10 * (100vw / 780));
}

.lp_contents .navigation_list li:nth-of-type(1) {
  width: calc(350 * (100vw / 780));
}
.lp_contents .navigation_list li:nth-of-type(2) {
  width: calc(350 * (100vw / 780));
  padding-left: calc(15 * (100vw / 780));
}
.lp_contents .navigation_list li:nth-of-type(3) {
  width: calc(350 * (100vw / 780));
  padding-left: calc(1 * (100vw / 780));
}
.lp_contents .navigation_list li:nth-of-type(4) {
  width: calc(350 * (100vw / 780));
  padding-left: calc(21 * (100vw / 780));
}

.lp_contents .navigation_list li:before {
  height: calc(4 * (100vw / 780));
}

.lp_contents .navigation_list li:after {
  right: calc(9*(100vw / 780));
  width: calc(24*(100vw / 780));
  height: calc(13*(100vw / 780));
  margin-top: calc(-7*(100vw / 780));
  background: url(../img/nav_arrow.svg) no-repeat;
  background-size: 100%;
  content: "";
}

.lp_contents .navigation_list li a{
  gap: calc(18*(100vw / 780));
  margin-left: calc(2*(100vw / 780));
}

.lp_contents .navigation_list li .nav_img {
  width: calc(60 * (100vw / 780));
}

.lp_contents .navigation_list li .nav_name {
  font-size: calc(30 * (100vw / 780));
  line-height: 1.4;
  text-align: center;
}

/* FOLLOW NAV  */
.lp_contents .nav_follow {
  width: 100%;
  height: calc(144*(100vw / 780));
}

.lp_contents .nav_follow .navigation_list {
  flex-wrap: wrap;
}

.lp_contents .nav_follow .navigation_list li {
  height: calc(80 * (100vw / 780));
}

.lp_contents .nav_follow .navigation_list li:first-of-type,
.lp_contents .nav_follow .navigation_list li:nth-of-type(2) {
  border-bottom: 1px solid var(--color-pink);
}

.lp_contents .nav_follow li .nav_name {
  font-size: calc(24 * (100vw / 780));
}

.lp_contents .nav_follow .navigation_list li .nav_img01 {
  width: calc(40 * (100vw / 780));
}
.lp_contents .nav_follow .navigation_list li .nav_img02 {
  width: calc(36 * (100vw / 780));
}

.lp_contents .nav_follow .navigation_list li:nth-of-type(1) {
  width: calc(100vw / 2);
}
.lp_contents .nav_follow .navigation_list li:nth-of-type(2) {
  width: calc(100vw / 2);
}
.lp_contents .nav_follow .navigation_list li:nth-of-type(3) {
  width: calc(100vw / 2);
  height: calc(64 * (100vw / 780));
}
.lp_contents .nav_follow .navigation_list li:nth-of-type(4) {
  width: calc(100vw / 2);
  padding-left: calc(0*(100vw / 780));
  height: calc(64 * (100vw / 780));
}

.lp_contents .nav_follow .navigation_list li:before {
  left: auto;
  right: 0;
  width:  1px;
  height: calc(77 * (100vw / 780));
  content: "";
}

.lp_contents .nav_follow .navigation_list li:first-of-type:before {
  content: "";
}

.lp_contents .nav_follow .navigation_list li:nth-of-type(2):before,
.lp_contents .nav_follow .navigation_list li:last-of-type:before {
  content: none;
}

.lp_contents .nav_follow .navigation_list li:nth-of-type(2) a {
  margin-left: calc(-17*(100vw / 780));
}

.lp_contents .nav_follow .navigation_list li:nth-of-type(4) a {
  margin-left: calc(-3*(100vw / 780));
}

/* ===================
  　　　 PRODUCT
=================== */
.lp_contents .product_sec .product_lead {
  font-size: calc(28*(100vw / 780));
}
.lp_contents .product_var_wrap {
  width: calc(740*(100vw / 780));
  margin: 0 auto;
  margin-top: calc(79*(100vw / 780));
  margin-left: calc(40*(100vw / 780));
}
.lp_contents .product_var_wrap._02 {
  width: calc(740*(100vw / 780));
  margin: 0 auto;
  margin-top: calc(79*(100vw / 780));
  margin-left: calc(40*(100vw / 780));
}
.lp_contents .product_var_wrap .slider_sp02 {
  display: block;
  gap: none;
  padding-left: calc(40*(100vw / 780));
}
.lp_contents .product_var_wrap .look_item_img  {
  width: calc(180*(100vw / 780));
  margin-left: calc(0*(100vw / 780));
  margin-right: calc(0*(100vw / 780));
}
.lp_contents .product_var_wrap .look_item_img._03  {
  width: calc(210*(100vw / 780));
  height: calc(225*(100vw / 780));
}
.lp_contents .product_var_wrap .look_item_img._04  {
  width: calc(150*(100vw / 780));
  height: calc(225*(100vw / 780));
}
.lp_contents .product_var_wrap .look_item_img p {
  font-size: calc(22*(100vw / 780));
  margin-top: calc(20*(100vw / 780));
  white-space: nowrap;
}

.product_sec .btn {
  margin-top: calc(96*(100vw / 780));
}
.lp_contents .look_btn a {
  width: calc(600*(100vw / 780));
  height: calc(100*(100vw / 780));
  font-size: calc(32*(100vw / 780));
  padding: calc(26*(100vw / 780)) 0;
}

.lp_contents .look_btn a .txt {
  margin-left: calc(-90*(100vw / 780));
  margin-right: calc(59*(100vw / 780));
}

.lp_contents .look_btn a:before {
  right: calc(18*(100vw / 780));
  width: calc(10*(100vw / 780));
  height: calc(14*(100vw / 780));
  transform: translateY(-50%);
  background-image: url(../img/sp/arrow.svg);
}

.lp_contents .look_btn .border {
  width: calc(40*(100vw / 780));
  height: calc(2*(100vw / 780));
  margin-right: calc(-195*(100vw / 780));
  transform: translateY(-50%);
}

.lp_contents .look_btn .border:after {
  height: calc(2*(100vw / 780));
  background-color: #ffffff;
}

@-webkit-keyframes extend2 {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: calc(0 * 100vw/780);
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: calc(40 * (100vw / 780));
  }
  90% {
    transform: translateX(calc(40 * (100vw / 780)));
    width: calc(40 * (100vw / 780));
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}
@keyframes extend2 {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: calc(0 * 100vw/780);
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: calc(40 * (100vw / 780));
  }
  90% {
    transform: translateX(calc(40 * (100vw / 780)));
    width: calc(40 * (100vw / 780));
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}

.lp_contents .product_sec .accordion_outside {
  margin-top: calc(98*(100vw / 780));
}

.lp_contents .product_sec .accordion_outside .accordion_btn .to_open,
.lp_contents .product_sec .accordion_outside .accordion_btn .to_close {
  text-underline-offset: calc(10*(100vw / 780));
}
.lp_contents .product_sec .accordion_outside .to_open {
  margin-top: calc(2*(100vw / 780));
}

.lp_contents .product_box2 {
  margin-top: calc(65*(100vw / 780));
}
.lp_contents .product_title {
  font-size: calc(40*(100vw / 780));
}
.lp_contents .product_list {
  font-size: calc(24*(100vw / 780));
  margin-top: calc(37*(100vw / 780));
}
.lp_contents .product_list li {
  margin-top: calc(0*(100vw / 780));
}
.lp_contents .product_detail {
  font-size: calc(24*(100vw / 780));
  margin-top: calc(36*(100vw / 780));
}
/* .lp_contents .product_detail.accordion_inner {
  height: calc(1574*(100vw / 780));
  padding-bottom: calc(70*(100vw / 780));
}

.lp_contents .accordion_inner::before {
  height: calc(1574*(100vw / 780));
} */

.lp_contents .main_btn a {
  width: calc(480*(100vw / 780));
  height: calc(90*(100vw / 780));
  margin: calc(63*(100vw / 780)) auto 0;
  font-size: calc(32*(100vw / 780));
  padding: calc(20*(100vw / 780)) 0;
  letter-spacing: 0.1em;
}

.lp_contents .main_btn a .txt {
  margin-left: calc(64*(100vw / 780));
  margin-right: calc(24*(100vw / 780));
}

.lp_contents .main_btn a:before {
  content: "";
  position: absolute;
  z-index: 0;
  transform: translateY(0);
  top: calc(38*(100vw / 780));
  right: calc(20*(100vw / 780));
  width: calc(7.5*(100vw / 780));
  height: calc(14*(100vw / 780));
  background-image: url(../img/sp/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
.lp_contents .main_btn._02 a:before {
  content: "";
  position: absolute;
  z-index: 0;
  transform: translateY(22%);
  top: calc(34*(100vw / 780));
  right: calc(20*(100vw / 780));
  width: calc(7.5*(100vw / 780));
  height: calc(14*(100vw / 780));
  background-image: url(../img/sp/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
.lp_contents .main_btn .border {
  position: relative;
  overflow: clip;
  width: calc(40 * (100vw / 780));
  height: 1px;
  margin-right: calc(0 * (100vw / 780));
  z-index: 0;
  transform: translateY(-50%);
}

@-webkit-keyframes extend {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: calc(0 * 100vw/780);
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: calc(40 * (100vw / 780));
  }
  90% {
    transform: translateX(calc(40 * (100vw / 780)));
    width: calc(40 * (100vw / 780));
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}
@keyframes extend {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: calc(0 * 100vw/780);
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: calc(40 * (100vw / 780));
  }
  90% {
    transform: translateX(calc(40 * (100vw / 780)));
    width: calc(40 * (100vw / 780));
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}

/* ===================
  　　  LOOK
=================== */
.look_img_outside {
  width: calc(780*(100vw / 780));
  margin: 0 auto;
  margin-top: calc(58*(100vw / 780));
}

.look_img_wrap {
  width: 100%;
  margin: 0 auto;
  display: block;
  row-gap: none;
  padding-bottom: calc(71*(100vw / 780));
  height: calc(1055*(100vw / 780));
}

.look_img {
  width: calc(780*(100vw / 780));
}

.lp_contents .decor_loop {
  padding: calc(165*(100vw / 780)) 0 calc(0*(100vw / 780));
  margin-top: calc(180*(100vw / 780));
}

.lp_contents .decor_loop:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(160 * (100vw / 780));
  background-repeat: repeat-x;
  background-size: auto 100%;
  content: "";
  animation: loop 40s linear infinite;
}

/*============================
          CAMPAIGN
============================*/
.lp_contents .campaign {
  margin-top: calc(180*(100vw / 780));
}
.lp_contents .campaign .bg_stars_left {
  width: calc(600*(100vw / 780));
  height: calc(600*(100vw / 780));
  bottom: calc(-461*(100vw / 780));
}
.lp_contents .campaign .bg_stars_right {
  width: calc(500*(100vw / 780));
  height: calc(660*(100vw / 780));
  top: calc(-409*(100vw / 780));
}
.lp_contents .campaign_wrap {
  width: calc(780*(100vw / 780));
}
.lp_contents .campaign_inner {
  width: calc(700*(100vw / 780));
  height: calc(1296*(100vw / 780));
  background-image: url('../img/sp/campaign_box.png');
  border: solid calc(2*(100vw / 780)) var(--color-pink);
  border-radius: calc(68*(100vw / 780));
}
.lp_contents .campaign_wrapper01 {
  width: calc(540*(100vw / 780));
  padding-top: calc(98*(100vw / 780));
}
.lp_contents .campaign_wrapper01 .campaign_title {
  font-size: calc(60*(100vw / 780));
}
.lp_contents .campaign_wrapper02 .slider_pc {
  width: calc(540*(100vw / 780));
  margin-top: calc(72*(100vw / 780));
}

.lp_contents .campaign_wrapper02 .cam_lead {
  font-size: calc(28*(100vw / 780));
  margin-top: calc(52*(100vw / 780));
}
.lp_contents .campaign_wrapper02 .cam_point {
  font-size: calc(24*(100vw / 780));
  margin-top: calc(24*(100vw / 780));
}

.lp_contents .all_btn {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  border: none;
  margin-top: calc(181*(100vw / 780));
}

.lp_contents .all_btn a {
  width: calc(660 * (100vw / 780));
  height: calc(120 * (100vw / 780));
  padding: calc(20 * (100vw / 780)) 0;
  font-size: calc(44 * (100vw / 780));
}

.lp_contents .archive_area {
  margin-top: calc(180*(100vw / 780));
  padding: calc(135*(100vw / 780)) 0 calc(132*(100vw / 780));
}

}


/*Series Selection---------------*/

.sec_ttl {
  margin-bottom: 6.2rem;
  font-size: 3rem;
  font-weight: 400;
  text-align: center;
}

.thumbnail_list_wrap {
  padding-bottom: 3.2rem;
}

.thumbnail_list {
  display: flex;
  justify-content: center;
  gap: 3rem;
}

.thumbnail_list li a {
  position: relative;
  width: 10rem;
  padding-bottom: 1.3rem;
}

.thumbnail_list li .thumbnail_img {
  margin-bottom: 1.1rem;
}

.thumbnail_list li .thumbnail_txt {
  font-size: 1.2rem;
  line-height: 1.8;
  text-align: center;
}

.thumbnail_list li a::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  height: .2rem;
  background: var(--color_accent_01);
  content: "";
  opacity: 0;
  transition: opacity .3s;
}

.thumbnail_list li a.selected::before {
  opacity: 1;
}

.each_content {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity .8s;
}

.each_content.selected {
  opacity: 1;
  height: auto;
  overflow: visible;
}

.series_ttl {
  margin-bottom: 2.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
  color: var(--color_weak);
}

.series_ttl .txt_L {
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--font_eng-serif);
  font-size: 4.2rem;
  letter-spacing: .035em;
  color: var(--color_accent_01);
}

.series_price {
  margin-bottom: 6.2rem;
  font-size: 1.4rem;
  text-align: center;
}

#SeriesSelection .each_content > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
}

.series_img_list {
  width: 28.4rem;
  padding: 0 4.2rem;
}

.slider_area {
  opacity: 0;
  overflow: hidden;
  transition: opacity .3s;
}

#SeriesSelection .slider_area {
  height: 26rem;
}

.slider_area.active {
  height: auto !important;
  opacity: 1;
  overflow: visible;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 1.2rem;
  height: 4rem;
}
.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

.slick-arrow::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/arrow_02.svg) center center / cover no-repeat;
  content: "";
}

.slick-next::before {
  transform: scaleX(-1);
}

.each_img {
  margin: 0 1rem;
}

.series_img_list .itm_img {
  width: 20rem;
}

.series_detail {
  display: flex;
  flex-direction: column-reverse;
  gap: 3.9rem;
  width: 47rem;
}

.variation_name_list {
  order: 2;
}

.variation_name_list li {
  width: fit-content;
  margin: 0 auto;
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: 0.1em;
  font-family: var(--font-en);
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity .8s;
}

.variation_name_list li.selected {
  opacity: 1;
  height: auto;
  overflow: visible;
}

.series_caption {
  margin-bottom: 2rem;
  font-size: 1.5rem;
  line-height: 2;
  text-align: center;
}

.evaluation_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border: solid var(--color_accent_02);
  border-width: .1rem;
  margin-bottom: 2.5rem;
  padding: .2rem;
}

#Series04 .evaluation_list {
  padding: .2rem 2rem;
}

.evaluation_list li {
  position: relative;
  padding: 0 1.1rem;
  font-size: 1.3rem;
  line-height: 2;
}

.evaluation_list li:nth-of-type(n+2)::before {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -.2rem;
  font-size: 1.3rem;
  content: "|";
}

#Series04 .evaluation_list li:nth-of-type(3)::before {
  display: none;
}

.color_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 auto;
}

.color_list.column6 {
  width: 47rem;
}

.color_list li {
  position: relative;
  width: 11rem;
  cursor: pointer;
  z-index: 10;
}

.color_list li::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11rem;
  height: 11rem;
  background: rgba(211,153,166, 0.2);
  opacity: 0;
  content: "";
  transition: opacity .3s;
  pointer-events: none;
  z-index: 0;
}

.color_list li p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 0 0 .1rem;
  font-size: 1.2rem;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

.color_list li.selected::after {
  opacity: 1;
}

#SeriesSelection .each_content .to_link {
  position: relative;
  z-index: 1;
  width: 26rem;
  height: 4.6rem;
  margin: 8rem auto 0;
}

#SeriesSelection .each_content .to_link::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100vw;
  height: .1rem;
  margin: 0 calc(50% - 50vw);
  background: var(--color_accent_02);
  content: "";
}

#SeriesSelection .each_content .to_link a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--color_accent_01);
  font-size: 1.6rem;
  letter-spacing: .075em;
  color: #fff;
}

.textureMap_wrap .itm_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 10rem;
}
/*---------------Series Selection*/
/*Color Selection----------------*/
#ColorSelection {
  background: var(--color_bg_01);
}

#ColorSelection .thumbnail_list li a::before {
  width: calc(100% - 3rem);
}

.color_ttl {
  margin-bottom: 3.8rem;
  font-family: var(--font_eng-serif);
  font-size: 4.2rem;
  font-weight: 400;
  letter-spacing: .035em;
  text-align: center;
  color: var(--color_accent_01);
}

#ColorSelection .switching_area {
  padding: 3rem 0 0;
}

#ColorSelection .item_list {
  max-width: 90rem;
  margin: 0 auto;
}

.item_list__inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6rem;
}

.item_list__item {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 18rem;
  height: auto;
}

#ColorSelection .icn_rank {
  display: none;
}

.item_list__img {
  margin-bottom: 1.5rem;
}

.item_list__title {
  flex-grow: 1;
  margin-bottom: 1.6rem;
}

.item_list__title a {
  font-size: 1.3rem;
  line-height: 2;
}

.item_list__price {
  margin-bottom: 2.2rem;
  font-size: 1.2rem;
}

.item_list__item .to_link {
  width: 12rem;
  height: 2.4rem;
  margin: 0 auto;
}

.item_list__item .to_link a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--color_accent_01);
  font-size: 1.2rem;
  letter-spacing: .075em;
  color: #fff;
}

.item_list__item .soldout {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 18rem;
  background: rgba(255, 255, 255, .6);
  font-size: 1.5rem;
  pointer-events: none;
}

.accordion_wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s;
}

.accordion_outside.open .accordion_wrap {
  grid-template-rows: 1fr;
}

.accordion_outside.accordion_unset .accordion_wrap {
  display: block;
}

.accordion_inner {
  min-height: 18rem;
  overflow: hidden;
}

.accordion_btn {
  width: fit-content;
  margin: 6rem auto 0;
  font-size: 1.4rem;
  text-align: center;
  cursor: pointer;
}

.accordion_outside.accordion_unset .accordion_btn {
  display: none;
}

.accordion_btn .to_open,
.accordion_outside.open .accordion_btn .to_close {
  opacity: 1;
  font-size: inherit;
  transition: opacity .3s;
}

.accordion_outside.open .accordion_btn .to_open,
.accordion_btn .to_close {
  opacity: 0;
  font-size: 0;
}
/*----------------Color Selection*/

/*Series Selection---------------*/
@media only screen and (max-width: 768px) {
  .thumbnail_list_wrap {
    padding-bottom: calc(54 * (100vw / 780));
  }

  .thumbnail_list {
    overflow-x: scroll;
    justify-content: flex-start;
    gap: calc(20 * (100vw / 780));
    padding: 0 calc(20 * (100vw / 780));
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .thumbnail_list::-webkit-scrollbar {
    display:none;
  }

  .thumbnail_list li a {
    width: calc(180 * (100vw / 780));
    padding-bottom: calc(23 * (100vw / 780));
  }

  .thumbnail_list li .thumbnail_img {
    margin-bottom: calc(16 * (100vw / 780));
  }

  .thumbnail_list li .thumbnail_txt {
    font-size: calc(22 * (100vw / 780));
  }

  .thumbnail_list li a::before {
    width: calc(100% - calc(40 * (100vw / 780)));
    height: calc(4 * (100vw / 780));
  }

  .series_ttl {
    margin-bottom: calc(38 * (100vw / 780));
    font-size: calc(26 * (100vw / 780));
  }

  .series_ttl .txt_L {
    margin-bottom: calc(32 * (100vw / 780));
    font-size: calc(74 * (100vw / 780));
  }

  .series_price {
    margin-bottom: calc(80 * (100vw / 780));
    font-size: calc(28 * (100vw / 780));
  }

  #SeriesSelection .each_content > div {
    display: block;
  }

  .series_img_list {
    width: calc(508 * (100vw / 780));
    padding: 0 calc(74*(100vw / 780));
  }

  #SeriesSelection .slider_area {
    height: calc(468* (100vw / 780));
    margin: 0 auto;
  }

  .slick-arrow {
    width: calc(24*(100vw / 780));
    height: calc(80*(100vw / 780));
  }

  .slick-arrow::before {
    background: url(../img/sp/arrow_02.svg) center center / cover no-repeat;
  }

  .each_img {
    margin: 0 calc(20 * (100vw / 780));
  }

  .series_img_list .itm_img {
    width: calc(360*(100vw / 780));
  }

  .series_detail {
    display: block;
    width: calc(670*(100vw / 780));
    margin: calc(32*(100vw / 780)) auto 0;
    padding-top: 0;
  }

  .variation_name_list {
    margin-bottom: calc(60 * (100vw / 780));
  }

  .variation_name_list li {
    font-size: calc(26 * (100vw / 780));
  }

  .series_caption {
    margin-bottom: calc(38 * (100vw / 780));
    font-size: calc(30 * (100vw / 780));
  }

  .evaluation_list {
    border-width: calc(2 * (100vw / 780));
    margin-bottom: calc(50 * (100vw / 780));
    padding: calc(4 * (100vw / 780)) 0 calc(6 * (100vw / 780));
  }

  #Series04 .evaluation_list {
    padding: calc(4 * (100vw / 780)) calc(60 * (100vw / 780)) calc(6 * (100vw / 780));
  }

  .evaluation_list li {
    padding: 0 calc(20 * (100vw / 780));
    font-size: calc(24 * (100vw / 780));
  }

  .evaluation_list li:nth-of-type(n+2)::before {
    margin-left: calc(-2 * (100vw / 780));
    font-size: calc(24 * (100vw / 780));
  }

  .color_list {
    gap: calc(10 * (100vw / 780));
  }

  .color_list.column6 {
    width: calc(670*(100vw / 780));
    margin-top: calc(67*(100vw / 780));
  }

  .color_list li {
    width: calc(160 * (100vw / 780));
  }

  .color_list li p {
    margin: 0 0 0 calc(2 * (100vw / 780));
    font-size: calc(26 * (100vw / 780));
  }

  .color_list li::after {
    width: calc(160*(100vw / 780));
    height: calc(160*(100vw / 780));
  }

  #SeriesSelection .each_content .to_link {
    width: calc(540 * (100vw / 780));
    height: calc(86 * (100vw / 780));
    margin: calc(78 * (100vw / 780)) auto 0;
  }

  #SeriesSelection .each_content .to_link::before {
    height: calc(2 * (100vw / 780));
  }

  #SeriesSelection .each_content .to_link a {
    font-size: calc(32 * (100vw / 780));
    letter-spacing: .125em;
  }
/*---------------Series Selection*/

  .look_img_wrap .slick-dots {
    bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1;
  }

  .look_img_wrap .slick-dots li {
    width: fit-content;
    height: fit-content;
    margin: 0 calc(10*(100vw / 780));
  }

  .look_img_wrap .slick-dots li button {
    width: calc(60*(100vw / 780));
    height: calc(22*(100vw / 780));
    padding: 0;
  }

  .look_img_wrap .slick-dots li button:before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: calc(4*(100vw / 780));
    opacity: 1 !important;
    background: var(--color-lightblack);
    content: "";
    transition: background-color .3s;
  }

  .look_img_wrap .slick-dots li.slick-active button:before {
    background: var(--color-black);
  }

  .look_img_wrap .slick-arrow {
    z-index: 2;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: calc(25*(100vw / 780));
    height: calc(25*(100vw / 780));
  }

  .look_img_wrap .slick-prev {
    border-left: solid var(--color-black);
    border-bottom: solid var(--color-black);
    border-width: calc(2*(100vw / 780));
    margin-left: calc(-103*(100vw / 780));
  }

  .look_img_wrap .slick-next {
    border-top: solid var(--color-black);
    border-right: solid var(--color-black);
    border-width: calc(2*(100vw / 780));
    margin-left: calc(103*(100vw / 780));
  }

  .look_img_wrap .slick-arrow::before {
    display: none;
  }

  .slider_sp02 .slick-dots {
    left: 0;
    bottom: calc(-45*(100vw / 780));
  }

  .slider_sp02 .slick-dots li {
    width: fit-content;
    height: fit-content;
    margin: 0;
  }

  .slider_sp02 .slick-dots li button {
    width: calc(350*(100vw / 780));
    height: calc(4*(100vw / 780));
    padding: 0;
  }

  .slider_sp02 .slick-dots li button:before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: calc(2*(100vw / 780));
    opacity: 1 !important;
    background: var(--color-lightgray);
    content: "";
    transition: background-color .3s;
  }

  .slider_sp02 .slick-dots li.slick-active button:before {
    background: var(--color-gray);
  }
}

.tabs {
  width: 56rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.tabs p {
  font-family: var(--font-en);
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.tab-button {
  width: 14rem;
  border: none;
  cursor: pointer;
  background-color: transparent;
}
.tab-button .tab_img {
  width: 10rem;
  display: block;
  margin: 0 auto;
  margin-top: 2rem;
}
/* .tab-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11rem;
  height: 11rem;
  background: rgba(211, 153, 166, 0.2);
  opacity: 0;
  content: "";
  transition: opacity .3s;
  pointer-events: none;
  z-index: 0;
} */
.tab-button.active {
  background: rgba(211, 153, 166, 0.2);
}

.tab-content {
  width: 100%;
  margin: 0 auto;
  margin-top: 4rem;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

@media only screen and (max-width: 768px) {
  .tabs {
    width: calc(780*(100vw / 780));
    margin-top: calc(75*(100vw / 780));
    row-gap: calc(10*(100vw / 780));
    justify-content: space-between;
  }
  .tabs p {
    font-size: calc(34*(100vw / 780));
    margin-top: calc(25*(100vw / 780));
    margin-bottom: calc(25*(100vw / 780));
  }
  .tab-button {
    width: calc(187.5*(100vw / 780));
  }
  .tab-button .tab_img {
    width: calc(150*(100vw / 780));
    margin-top: calc(25*(100vw / 780));
  }
  .tab-content {
    margin-top: calc(58*(100vw / 780));
  }
/*=========
scrollbar
=========*/

.scroll__inner {
  padding: 0 0 calc(37*(100vw / 780)) 0;
  overflow-y: hidden;
  overflow-x: auto; /* 横スクロールを有効化 */
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none; /* Firefox 対応 */
  /* touch-action: pan-x; 横スクロールのみを許可 */
  /* -webkit-overflow-scrolling: touch; iOSデバイスでスムーズなスクロール */
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.simplebar-track {
  /* スクロールバーのトラック（背景） */
  width: calc(700*(100vw / 780));  /* トラックの幅を100%に設定 */
  background-color: var(--color-lightgray);
  height: calc(4*(100vw / 780)) !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.simplebar-scrollbar {
  /* スクロールバーの幅を固定 */
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.simplebar-scrollbar::before {
  background-color: var(--color-gray) !important;
  border-radius: 0;
  width: 100%;
  height: calc(4*(100vw / 780)) !important;
  left: 0 !important;
  right: 0 !important;
}

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

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  top: 0 !important; /* 横スクロールバーの位置 */
}

.simplebar-content-wrapper {
  scrollbar-width: none;
  -webkit-appearance: none;
  -ms-overflow-style: none;
  }
.simplebar-content-wrapper::-webkit-scrollbar{
  display: none;
}
/*===========
.f_area
===========*/
.f_area {
  display: flex;
  justify-content: flex-start; /* 横並びにする */
  width: 100%;
  flex-wrap: nowrap; /* 横並びでスクロール */
  gap: calc(40*(100vw / 780));
}

.f_area .f_one {
  flex-shrink: 0; /* 要素が縮小しないようにする */
}

.f_area .f_one a {
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
}

.f_area .f_one a img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}


}