@charset "UTF-8";

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

2026 AW　Collection ｜to/one Website（トーン ウェブサイト）

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

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

/* calc(xx * yyrem / zz);
xx：SPデザインの各値
yy：PCデザインのメインコンテンツの横幅
zz：SPデザインの横幅 */

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

@media (min-width: 781px) {
  html {
    font-size: calc(10 * (100vw/1600));
  }
}

@media (min-width: 1600px) {
  html {
    font-size: 62.5%
  }
}

footer {
  position: relative;
  z-index: 10;
  margin-top: 0 !important;
}

/* ========================================================
                      * root *
========================================================= */
:root {
  --rate: calc(var(--pcMainContentWidth) / var(--spWidth));
  /* --rate: calc(100vw / var(--spWidth)); */

  /* PCデザインのメインコンテンツの横幅 */
  --pcMainContentWidth: 60rem;

  /* PCデザインの横幅 */
  --pcWidth: 1600;

  /* SPデザインの横幅 */
  --spWidth: 750;

  --color-lp_txt_font: #727171;
  --color-lp_accent_01: #ff9443;
  --color-lp_accent_02: #fff2e8;
  --color-lp_white: #fff;
  --font_mix: "helvetica-neue-lt-pro", "hiragino-kaku-gothic-pron", sans-serif;
}

@media (min-width: 781px) {
  :root {}
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

/* ========================================================
                      * lp_contents *
========================================================= */

.lp_contents * {
  box-sizing: border-box;
  font-feature-settings: "palt";
  line-height: 1;
  letter-spacing: .15em;
  font-weight: 400;
  text-align: center;
}

.lp_contents {
  width: 100%;
  /* max-width: var(--pcMainContentWidth); */
  height: 100%;
  font-family: var(--font_mix);
  font-weight: 300;
  overflow-x: clip;
  color: var(--color-lp_txt_font);
}

@media (min-width: 781px) {
  .lp_contents {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
  }
}

.lp_contents .pc_only {
  display: none;
}

.lp_contents img,
.lp_contents figure {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.lp_contents a {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.lp_contents h1,
.lp_contents h2,
.lp_contents h3,
.lp_contents h4,
.lp_contents h5 {
  font-weight: 400;
}

.lp_contents_inner {
  position: relative;
  z-index: 1;
  overflow: clip;
  background: var(--color-lp_white);
}

.lp_contents a,
.lp_contents button,
.lp_contents .lp_contents .lp_contents .slick-dots li,
.lp_contents .btn_accordion {
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}

@media (max-width: 780px) {
  .lp_contents a:hover {
    opacity: 1 !important;
  }
}

/* ========================================================
                      * 共通設定  *
========================================================= */

.lp_contents .btn_buy {
  background: var(--color-lp_accent_02);
  border-radius: calc(38 * (var(--rate)));
  border: solid 2px var(--color-lp_accent_01);
  width: fit-content;
  margin: 0 auto;
}

.lp_contents .btn_buy a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(40 * (var(--rate)));
  letter-spacing: .1em;
  font-weight: 700;
  font-style: italic;
  color: var(--color-lp_accent_01);
  padding: calc(15 * (var(--rate))) calc(53 * (var(--rate)));
}

.lp_contents .modal_toggle {
  position: absolute;
  width: calc(60 * (var(--rate)));
  height: calc(60 * (var(--rate)));
  cursor: pointer;
  z-index: 10;
  top: calc(210 * (var(--rate)));
  right: calc(40 * (var(--rate)));

  display: flex;
  justify-content: center;
  align-items: center;
}

.lp_contents .modal_toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(60 * (var(--rate)));
  height: calc(60 * (var(--rate)));
  background: url(../img/icon_plus.svg) center/100% no-repeat;
}

.lp_contents .modal_toggle:before {
  content: '';
  display: block;
  background-color: rgb(255 211 178 / .2);
  position: relative;
  z-index: 0;
  width: calc(65 * (var(--rate)));
  height: calc(65 * (var(--rate)));
  border-radius: 50%;
  animation: pulsateCircle 1.5s ease-out;
  /* スピードなど */
  animation-iteration-count: infinite;
  flex-shrink: 0;
}

@keyframes pulsateCircle {
  0% {
    transform: scale(1, 1);
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.35, 1.35);
    opacity: 0;
  }
}


/* ========================================================
                      * PC *
========================================================= */
@media (min-width: 781px) {

  .lp_contents .grid_area {
    display: grid;
    grid-template-columns: 1fr var(--pcMainContentWidth) 1fr;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .lp_contents .grid_area .fixed_nav {
    position: -webkit-sticky;
    position: sticky;
    display: grid;
    place-items: center;
    pointer-events: all;
    height: 100vh;
    background: var(--color-lp_accent_02);
    padding-top: var(--header-height);
  }

  .lp_contents .grid_area .fixed_left {
    top: 0;
    grid-column: 1;
    -webkit-clip-path: border-box;
    clip-path: border-box;
    align-items: center;
  }

  .lp_contents .grid_area .fixed_right {
    top: 0;
    grid-column: 3;
    -webkit-clip-path: border-box;
    clip-path: border-box;
  }

  .fixed_left_inner .logo {
    position: relative;
    width: 26rem;
  }

  .lp_contents_inner {
    width: var(--pcMainContentWidth);
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: clip;
  }
}

/* ========================================================
            * fixed_nav fixed_right   *
========================================================= */

.fixed_nav .fixed_right_nav_list {
  display: grid;
  gap: 2rem;
}

.fixed_nav .fixed_right_nav_item {
  background: var(--color-lp_white);
  width: 23.2rem;
  border-radius: 3rem;
  margin: 0 auto;
  overflow: clip;
}

.fixed_nav .fixed_right_nav_item a {
  display: flex;
  position: relative;
}

.fixed_nav .fixed_right_nav_item:nth-of-type(even) a {
  flex-direction: row-reverse;
}

.fixed_nav .fixed_right_nav_item a::after {
  content: "";
  background: url(../img/icon_arrow.svg) no-repeat center / 100%;
  width: 2.1rem;
  height: 2.1rem;
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
}

.fixed_nav .fixed_right_nav_item:nth-of-type(even) a::after {
  right: unset;
  left: 1.5rem;
}

.fixed_nav .fixed_right_nav_item .fixed_right_nav_visual {
  width: 11.6rem
}

.fixed_nav .fixed_right_nav_item .fixed_right_nav_txt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(20 * (var(--rate)));
}

.fixed_nav .fixed_right_nav_item .fixed_right_nav_txt span {
  font-size: 1.6rem;
  letter-spacing: .1em;
  line-height: calc(22.4/16);
  font-style: italic;
  font-weight: 700;
  color: var(--color-lp_accent_01);
  text-align: left;
  margin-top: -1.5rem
}

.fixed_nav .fixed_right_nav_item:nth-of-type(even) .fixed_right_nav_txt span {
  text-align: right;
}

.fixed_nav .fixed_right_all_items {
  border-radius: 3rem;
  margin-top: calc(155 * (var(--rate)));
  background: var(--color-lp_white);
}

.fixed_nav .fixed_right_all_items a {
  font-size: 2.2rem;
  flex-direction: column;
  padding: 1rem 3rem;
}

.fixed_nav .fixed_right_all_items a span {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .1em;
  display: block;
  margin-bottom: .4rem
}

@media (min-width: 781px) {
  .lp_contents .grid_area .fixed_right {}

  .lp_contents .grid_area .fixed_right .fixed_right_nav {
    position: absolute;
    top: calc(50% + (var(--header-height) / 2));
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
}

@media (max-width: 780px) {

  .fixed_nav.fixed_right {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
  }

  .fixed_nav.fixed_right.is-hidden {
    transform: translateY(100%) !important;
  }

  .fixed_nav.fixed_right.js-scrollStatus {
    transform: translateY(100%);
    transition: all 0.6s 0.3s;
  }

  .fixed_nav.fixed_right.js-scrollStatus.scrolled-up.scrolled-up {
    transition: all 0.6s 0.3s;
    visibility: visible;
    transform: translateY(0);
  }


  .fixed_nav .fixed_right_nav_list {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--color-lp_accent_01);
  }

  .fixed_nav .fixed_right_nav_item {
    background: var(--color-lp_accent_02);
    width: calc(100%/3);
    border-radius: 0;
  }

  .fixed_nav .fixed_right_nav_item a {
    display: flex;
    position: relative;
  }

  .fixed_nav .fixed_right_nav_item:nth-of-type(even) a {
    flex-direction: row;
    border-right: 1px solid var(--color-lp_accent_01);
    border-left: 1px solid var(--color-lp_accent_01);
  }

  .fixed_nav .fixed_right_nav_item a::after {
    content: "";
    background: url(../img/icon_arrow.svg) no-repeat center / 100%;
    width: calc(26 * (var(--rate)));
    height: calc(26 * (var(--rate)));
    position: absolute;
    bottom: calc(10 * (var(--rate)));
    right: calc(10 * (var(--rate)));
  }

  .fixed_nav .fixed_right_nav_item:nth-of-type(even) a::after {
    right: calc(10 * (var(--rate)));
    left: unset;
  }

  .fixed_nav .fixed_right_nav_item .fixed_right_nav_visual {
    width: calc(120 * (var(--rate)));
  }

  .fixed_nav .fixed_right_nav_item .fixed_right_nav_txt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fixed_nav .fixed_right_nav_item .fixed_right_nav_txt span {
    font-size: calc(20 * (var(--rate)));
    line-height: calc(28/20);
    text-align: left;
  }

  .fixed_nav .fixed_right_nav_item:nth-of-type(even) .fixed_right_nav_txt span {
    text-align: left;
  }

  .fixed_nav .fixed_right_all_items {
    display: none;
  }

}



/* ========================================================
                      * sec_mv  *
========================================================= */

.sec_mv {
  padding-bottom: calc(73 * (var(--rate)));
}

.sec_mv .sec_mv_release {
  color: var(--color-lp_accent_01);
  letter-spacing: .1em;
  font-style: italic;
  font-weight: 700;
}

.sec_mv .sec_mv_release__label {
  font-size: calc(34 * (var(--rate)));
  margin-top: calc(75 * (var(--rate)));
}

.sec_mv .sec_mv_release__date {
  font-size: calc(44 * (var(--rate)));
  margin-top: calc(33 * (var(--rate)));
}

.sec_mv .sec_mv_release__date span {
  font-size: calc(40 * (var(--rate)));
  letter-spacing: .1em;
  font-style: italic;
  font-weight: 700;
}

/* ========================================================
                      * sec_intro  *
========================================================= */

.sec_intro {
  padding-top: calc(100 * (var(--rate)));
  background: var(--color-lp_accent_02);
}

.sec_intro .sec_intro_visual {
  width: calc(660 * (var(--rate)));
  margin: 0 auto;
}

.sec_intro .sec_intro_ttl {
  font-size: calc(64 * (var(--rate)));
  letter-spacing: .1em;
  font-style: italic;
  font-weight: 700;
  color: var(--color-lp_accent_01);
  margin-top: calc(96 * (var(--rate)));
}

.sec_intro .sec_intro_ttl span {
  display: block;
  font-size: calc(32 * (var(--rate)));
  letter-spacing: .1em;
  font-style: normal;
  font-weight: 400;
  margin-bottom: calc(21 * (var(--rate)));
}

.sec_intro .sec_intro_body {
  display: grid;
  gap: calc(29 * (var(--rate)));
  margin-top: calc(57 * (var(--rate)));
  margin-bottom: calc(104 * (var(--rate)));
}

.sec_intro .sec_intro_txt {
  font-size: calc(22 * (var(--rate)));
  line-height: calc(52.8/22);
  color: var(--color-lp_accent_01);
}

.sec_intro .sec_intro_nav {
  background: var(--color-lp_white);
  padding-top: calc(140 * (var(--rate)));
}

.sec_intro .sec_intro_nav_list {
  display: grid;
  gap: calc(50 * (var(--rate)));
  padding-bottom: calc(140 * (var(--rate)));
}

.sec_intro .sec_intro_nav_item {
  background: var(--color-lp_accent_02);
  width: calc(660 * (var(--rate)));
  border-radius: calc(60 * (var(--rate)));
  margin: 0 auto;
  overflow: clip;
}

.sec_intro .sec_intro_nav_item a {
  display: flex;
  position: relative;
}

.sec_intro .sec_intro_nav_item:nth-of-type(even) a {
  flex-direction: row-reverse;
}

.sec_intro .sec_intro_nav_item a::after {
  content: "";
  background: url(../img/icon_arrow.svg) no-repeat center / 100%;
  width: calc(60 * (var(--rate)));
  height: calc(60 * (var(--rate)));
  position: absolute;
  bottom: calc(40 * (var(--rate)));
  right: calc(40 * (var(--rate)));
}

.sec_intro .sec_intro_nav_item:nth-of-type(even) a::after {
  right: unset;
  left: calc(40 * (var(--rate)));
}


.sec_intro .sec_intro_nav_item .sec_intro_nav_visual {
  width: calc(330 * (var(--rate)));
}

.sec_intro .sec_intro_nav_item .sec_intro_nav_txt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec_intro .sec_intro_nav_item .sec_intro_nav_txt span {
  font-size: calc(46 * (var(--rate)));
  letter-spacing: .1em;
  line-height: calc(64.4/46);
  font-style: italic;
  font-weight: 700;
  color: var(--color-lp_accent_01);
  text-align: left;
  margin-top: calc(-40 * (var(--rate)));
}

.sec_intro .sec_intro_nav_item:nth-of-type(even) .sec_intro_nav_txt span {
  text-align: right;
}

/* ========================================================
                      * sec_item  *
========================================================= */

.sec_item {}

.sec_item .sec_item__block {
  padding-bottom: calc(190 * (var(--rate)));
}

.sec_item .sec_item_block_03 {
  padding-bottom: calc(183 * (var(--rate)));
}

.sec_item .sec_item_visual {
  position: relative;
}

.sec_item .sec_item_visual_txt {
  font-size: calc(40 * (var(--rate)));
  letter-spacing: .1em;
  font-style: italic;
  color: var(--color-lp_accent_01);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sec_item .sec_item_visual_txt__01 {
  margin-top: calc(-345 * (var(--rate)));
  margin-left: calc(-94 * (var(--rate)));
}

.sec_item .sec_item_block_02 .sec_item_visual_txt__01 {
  margin-top: calc(-410 * (var(--rate)));
  margin-left: calc(-183 * (var(--rate)));
}

.sec_item .sec_item_block_03 .sec_item_visual_txt__01 {
  margin-top: calc(-247 * (var(--rate)));
  margin-left: calc(49 * (var(--rate)));
}

.sec_item .sec_item_visual_txt__02 {
  margin-top: calc(-80 * (var(--rate)));
  margin-left: calc(156 * (var(--rate)));
}

.sec_item .sec_item_block_02 .sec_item_visual_txt__02 {
  margin-top: calc(-58 * (var(--rate)));
  margin-left: calc(-252 * (var(--rate)));
}

.sec_item .sec_item_block_03 .sec_item_visual_txt__02 {
  margin-top: calc(-113 * (var(--rate)));
  margin-left: calc(-263 * (var(--rate)));
}

.sec_item .sec_item_visual_txt__03 {
  margin-top: calc(136 * (var(--rate)));
  margin-left: calc(-211 * (var(--rate)));
}

.sec_item .sec_item_block_02 .sec_item_visual_txt__03 {
  margin-top: calc(320 * (var(--rate)));
  margin-left: calc(228 * (var(--rate)));
}

.sec_item .sec_item_block_03 .sec_item_visual_txt__03 {
  margin-top: calc(300 * (var(--rate)));
  margin-left: calc(157 * (var(--rate)));
}

.sec_item .sec_item_visual_txt__04 {
  margin-top: calc(369 * (var(--rate)));
  margin-left: calc(182 * (var(--rate)));
}

.sec_item .sec_item_catch {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(52/26);
  margin-top: calc(107 * (var(--rate)));
}

.sec_item .sec_item_product_visual {
  width: calc(560 * (var(--rate)));
  margin: calc(55 * (var(--rate))) auto 0;
}

.sec_item .sec_item_block_03 .sec_item_product_visual {
  width: calc(450 * (var(--rate)));
  margin: calc(55 * (var(--rate))) auto 0;
}

.sec_item .sec_item_product_name {
  font-size: calc(24 * (var(--rate)));
  margin-top: calc(47 * (var(--rate)));
}

.sec_item .sec_item_product_price {
  font-size: calc(24 * (var(--rate)));
  margin-top: calc(29 * (var(--rate)));
}

.sec_item .sec_item_product_price .variation {
  font-size: calc(22 * (var(--rate)));
}

.sec_item .sec_item_product_price .tax {
  font-size: calc(20 * (var(--rate)));
}

.sec_item .sec_item_buy {
  margin-top: calc(46 * (var(--rate)));
}

.sec_item .sec_item_buy a {}

.sec_item .slide_wrap {
  width: calc(660 * (var(--rate)));
  margin: calc(140 * (var(--rate))) auto 0;
}

.sec_item .sec_item_slide_list ul {}

.sec_item .sec_item_slide_list li {}

.sec_item .sec_item_slide_list li .sec_item_slide_visual {
  width: calc(660 * (var(--rate)));
  margin: 0 auto;
}

.sec_item .sec_item_description {
  font-size: calc(24 * (var(--rate)));
  line-height: calc(48/24);
  text-align: justify;
  margin-top: calc(114 * (var(--rate)));
  padding-inline: calc(76 * (var(--rate)));
}

.sec_item .sec_item_block_02 .sec_item_description,
.sec_item .sec_item_block_03 .sec_item_description {
  padding-inline: calc(74 * (var(--rate)));
}

.sec_item .sec_item_description .em {
  font-size: calc(28 * (var(--rate)));
  font-weight: 700;
  color: var(--color-lp_accent_01);
}

.sec_item .sec_item_color {
  margin-top: calc(106 * (var(--rate)));
}

.sec_item .sec_item_color ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-inline: calc(31 * (var(--rate)));
  gap: calc(50 * (var(--rate))) 0;
}

.sec_item .sec_item_block_02 .sec_item_color ul {
  grid-template-columns: repeat(1, 1fr);
}

.sec_item .sec_item_color li {
  display: grid;
  gap: calc(15 * (var(--rate)));
  position: relative;
}

.sec_item .sec_item_color li .sec_item_color_visual {
  width: calc(280 * (var(--rate)));
  margin: 0 auto;
}

.sec_item .sec_item_block_02 .sec_item_color li .sec_item_color_visual {
  width: calc(600 * (var(--rate)));
  margin: 0 auto;
}

.sec_item .sec_item_color li .sec_item_color_txt {
  font-size: calc(24 * (var(--rate)));
  letter-spacing: .1em;
  font-weight: 700;
  font-style: italic;
  color: var(--color-lp_accent_01);
  line-height: calc(36/24);
}

.sec_item .sec_item_block_02 .modal_toggle {
  right: calc(85 * (var(--rate)));
}

.sec_item .sec_item_block_03 .modal_toggle {
  right: calc(43 * (var(--rate)));
}

/* ========================================================
                      * sec_look  *
========================================================= */

.sec_look {}

.sec_look .sec_look__block {
  padding-bottom: calc(195 * (var(--rate)));
}

.sec_look .sec_look__block_02 {
  padding-bottom: calc(200 * (var(--rate)));
}

.sec_look .sec_look_ttl {
  font-size: calc(64 * (var(--rate)));
  letter-spacing: .1em;
  font-weight: 700;
  font-style: italic;
  color: var(--color-lp_accent_01);
}

.sec_look .slide_wrap {
  margin-top: calc(57 * (var(--rate)));
}

.sec_look .slide_wrap ul {}

.sec_look .slide_wrap li {}

.sec_look .sec_look_slide_visual {}

.sec_look .sec_look_item {
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: calc(124 * (var(--rate)));
}

.sec_look .sec_look_item ul {
  width: max-content;
  display: flex;
  gap: calc(20 * (var(--rate)));
  padding-inline: calc(20 * (var(--rate)));
}

.sec_look .sec_look_item li {
  width: calc(280 * (var(--rate)));
  display: grid;
  gap: calc(16 * (var(--rate)));
  background: var(--color-lp_accent_02);
  border-radius: calc(50 * (var(--rate)));
  padding: calc(39 * (var(--rate))) 0;
}

.sec_look .sec_look_item li .sec_look_item_visual {
  width: calc(220 * (var(--rate)));
  margin: 0 auto;
}

.sec_look .sec_look_item li .sec_look_item_txt {
  font-size: calc(24 * (var(--rate)));
  letter-spacing: .1em;
  font-weight: 700;
  font-style: italic;
  color: var(--color-lp_accent_01);
  line-height: calc(36/24);
}

.sec_look .sec_look_all_items {
  margin-top: calc(98 * (var(--rate)));
}

/* ========================================================
                      * sec_release  *
========================================================= */

.sec_release {
  background: url(../img/sec_release_bg.jpg) no-repeat center top / 100%;
  padding-top: calc(20 * (var(--rate)));
  padding-bottom: calc(102 * (var(--rate)));
}

.sec_release .sec_release_date {
  color: var(--color-lp_accent_01);
  letter-spacing: .1em;
  font-style: italic;
  font-weight: 700;
}

.sec_release .sec_release_date__label {
  font-size: calc(34 * (var(--rate)));
  margin-top: calc(75 * (var(--rate)));
}

.sec_release .sec_release_date__value {
  font-size: calc(44 * (var(--rate)));
  margin-top: calc(33 * (var(--rate)));
}

.sec_release .sec_release_date__value span {
  font-size: calc(40 * (var(--rate)));
  letter-spacing: .1em;
  font-style: italic;
  font-weight: 700;
}

.sec_release .sec_release_store {
  margin-top: calc(75 * (var(--rate)));
}

.sec_release .sec_release_store__physical {
  margin-top: calc(53 * (var(--rate)));
}

.sec_release .sec_release_store_ttl {
  color: var(--color-lp_accent_01);
  font-size: calc(24 * (var(--rate)));
  letter-spacing: .1em;
}

.sec_release .sec_release_store_txt {
  color: var(--color-lp_accent_01);
  font-size: calc(22 * (var(--rate)));
  letter-spacing: .1em;
  line-height: calc(44/22);
  margin-top: calc(11 * (var(--rate)));
}

.sec_release .sec_release_store_txt .ja {
  font-size: calc(20 * (var(--rate)));
  letter-spacing: .1em;
}

.sec_release .sec_release_all_items {
  border-radius: calc(60 * (var(--rate)));
  margin-top: calc(68 * (var(--rate)));
}

.sec_release .sec_release_all_items a {
  font-size: calc(44 * (var(--rate)));
  flex-direction: column;
  padding: calc(18 * (var(--rate))) calc(61 * (var(--rate))) calc(18 * (var(--rate)));
}

.sec_release .sec_release_all_items a span {
  font-size: calc(24 * (var(--rate)));
  font-weight: 600;
  letter-spacing: .1em;
  display: block;
  margin-bottom: calc(8 * (var(--rate)));
}

/* ========================================================
            * スライダー　パーツ  矢印 *
========================================================= */

/* 共通 */
.lp_contents .slick-prev,
.lp_contents .slick-next {
  all: unset;
  position: absolute;
  top: calc(162 * (var(--rate)));
  width: calc(41 * (var(--rate)));
  height: calc(79 * (var(--rate)));
  cursor: pointer;
  z-index: 10;
  background: url(../img/slide_arrow.svg) no-repeat center / 100%;
}

/* デフォルト文字削除 */
.lp_contents .slick-prev,
.lp_contents .slick-next {
  font-size: 0;
  line-height: 0;
}

/* デフォのアイコン消す */
.lp_contents .slick-prev::before,
.lp_contents .slick-next::before {
  content: none;
}

/* 右 */
.lp_contents .slick-next {
  right: calc(60 * (var(--rate)));
}

/* 左（反転） */
.lp_contents .slick-prev {
  top: calc(200 * (var(--rate)));
  left: calc(60 * (var(--rate)));
  transform: translateY(-50%) scaleX(-1);
}


/* バリエーションエリアのスライドパーツ */
.lp_contents .variation_slide .slick-prev,
.lp_contents .variation_slide .slick-next {
  all: unset;
  position: absolute;
  top: calc(415 * (var(--rate)));
  width: calc(41 * (var(--rate)));
  height: calc(79 * (var(--rate)));
  cursor: pointer;
  z-index: 10;
  background: url(../img/slide_arrow.svg) no-repeat center / 100%;
}

/* デフォルト文字削除 */
.lp_contents .variation_slide .slick-prev,
.lp_contents .variation_slide .slick-next {
  font-size: 0;
  line-height: 0;
}

/* デフォのアイコン消す */
.lp_contents .variation_slide .slick-prev::before,
.lp_contents .variation_slide .slick-next::before {
  content: none;
}

/* 右 */
.lp_contents .variation_slide .slick-next {
  top: calc(407 * (var(--rate)));
  right: calc(80 * (var(--rate)));
  transform: rotate(-90deg);
}

/* 左（反転） */
.lp_contents .variation_slide .slick-prev {
  left: calc(80 * (var(--rate)));
  transform: translateY(-50%) scaleX(-1) rotate(-90deg);
}

/* ========================================================
            * スライダー　パーツ  dots *
========================================================= */

/* 全体 */
.lp_contents .slick-dots {
  all: unset;
  display: flex;
  justify-content: center;
  gap: calc(20 * (var(--rate)));
  margin-top: calc(62 * (var(--rate)));
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* li */
.lp_contents .slick-dots li {
  all: unset;
}

/* 横棒 */
.lp_contents .slick-dots li button {
  all: unset;
  display: block;
  width: calc(100 * (var(--rate)));
  /* 長さ調整 */
  height: calc(4 * (var(--rate)));
  /* 太さ調整 */
  background: #ffe5d4;
  cursor: pointer;
  font-size: 0;
  /* 数字消す */
}

.lp_contents .slick-dots li button:before {
  display: none;
}

/* アクティブ */
.lp_contents .slick-dots li.slick-active button {
  background: var(--color-lp_accent_01);
}

/* ========================================================
                      * modal  *
========================================================= */

body.no_scroll {
  overflow: hidden;
}

.lp_contents .modal_toggle {
  cursor: pointer;
  /* transition: opacity .3s ease-in-out; */
}

.lp_contents .modal_toggle:hover {
  /* opacity: 0.8; */
}

html.no_scroll {
  overflow: hidden;
}

.lp_contents .modal_button {
  position: relative;
  cursor: pointer;
  z-index: 10;
}

.lp_contents .modal_button.btn_modalClose {
  width: calc(60 * (var(--rate)));
  height: calc(60 * (var(--rate)));
  background: url(../img/btn_close.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: none;
  float: right;
  /* position: sticky; */
  position: absolute;
  top: calc(40 * (var(--rate)));
  right: calc(42 * (var(--rate)));
  z-index: 9999;
}

.lp_contents .modal_outside.hide {
  opacity: 0;
  scale: 0.95;
  pointer-events: none;
  overflow-y: auto;
}

.lp_contents .modal_outside {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 1;
  scale: 1;
  /* transition: opacity .5s; */
  transition: opacity .3s, scale .3s;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lp_contents .modal_outside::-webkit-scrollbar {
  display: none;
}

.lp_contents .modal_outside::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-lp_accent_01);
  opacity: .2;
  content: "";
}

.lp_contents .modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lp_contents .modal_wrap {
  width: calc(660 * ((var(--rate))));
  margin: 0 auto;
  max-height: calc(100dvh - (30 * var(--rate)));
  /* overflow-y: scroll; */
  -ms-overflow-style: none;
  scrollbar-width: none;
  will-change: transform;
  overflow: hidden;
  overflow-y: auto;
  border-radius: calc(40 * ((var(--rate))));
}

.lp_contents .modal_inner {
  position: relative;
  background: var(--color-lp_white);
}

.lp_contents .modal_outside.hide .modal_content {
  opacity: 0;
}

.lp_contents .modal_content {
  opacity: 1;
  padding: calc(120 * ((var(--rate)))) 0;
  overflow: visible;
  position: relative;
  transition: opacity .3s .5s;
}

.lp_contents .modal_item_visual {
  margin: 0 auto;
}

.lp_contents .modal_item_visual__color {
  width: calc(400 * ((var(--rate))));
}

.lp_contents .modal_item_visual__swatch {
  width: calc(480 * ((var(--rate))));
}

.lp_contents .modal_item_visual__swatch_01 {
  margin-top: calc(67 * (var(--rate)));
}

.lp_contents .modal_item_visual__swatch_02 {
  margin-top: calc(78 * (var(--rate)));
}

.lp_contents .modal_item_txt__name {
  font-size: calc(36 * (var(--rate)));
  letter-spacing: .1em;
  font-style: italic;
  font-weight: 700;
  color: var(--color-lp_accent_01);
  margin-top: calc(38 * (var(--rate)));
}

.lp_contents .modal_item_txt__description {
  font-size: calc(22 * (var(--rate)));
  line-height: calc(44/22);
  margin-top: calc(34 * (var(--rate)));
}

.lp_contents .modal_item_buy {
  margin-top: calc(78 * (var(--rate)));
}

.lp_contents .modal_item_txt_wrap {
  display: grid;
  gap: calc(16 * (var(--rate)));
  padding-inline: calc(57 * (var(--rate)));
  margin-top: calc(37 * (var(--rate)));
}

.lp_contents .modal_item_txt {
  font-size: calc(22 * (var(--rate)));
  line-height: calc(44/22);
  text-align: justify;
}


/* ========================================================
            * アニメーション   *
========================================================= */

.lp_contents .js-fadeup {
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.51, 0.21, 0.41, 1);
}

.lp_contents .js-fadeup.is-show {
  opacity: 1;
}

.lp_contents .js-fadeup_parent .js-fadeup_child {
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.51, 0.21, 0.41, 1);
}

.lp_contents .js-fadeup_parent .js-fadeup_child:nth-of-type(1) {}

.lp_contents .js-fadeup_parent .js-fadeup_child:nth-of-type(2) {
  transition-delay: .6s;
}

.lp_contents .js-fadeup_parent .js-fadeup_child:nth-of-type(3) {
  transition-delay: .9s;
}

.lp_contents .js-fadeup_parent .js-fadeup_child:nth-of-type(4) {
  transition-delay: 1.2s;
}

.lp_contents .js-fadeup_parent.is-show .js-fadeup_child {
  opacity: 1;
}