@charset "UTF-8";

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

Title : CICA NATURAL CSS

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


/*  Var
======================================================= */

:root {
 --lp-font-ja: 'futura-pt','Noto Sans JP',"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
 --lp-font-en: "big-caslon-fb", serif;
}

/* ========================================================
                      * Layout style *
========================================================= */
/*
html {
  font-size: 62.5%;
}*/

main {
  max-width: 100%;
}

a {
  text-decoration: none;
}

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

#Wrap {
  padding-top: 0 !important;
}

#HeaderWrap,
#FooterWrap {
  display: none !important;
}

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

.lp_contents {
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0;
  color: #fff;
  background: #231815;
  font-size: 1.4rem;
  font-weight: 400;
  font-family: var(--lp-font-ja);
  font-style: normal;
  letter-spacing: 0.12em;
}

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

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

.lp_contents a:hover {}

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

.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 h1 {
  padding: 0;
}

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

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

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

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

/* -- keyframes -- */

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

  100% {
    opacity: 0;
  }
}

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

  100% {
    opacity: 1;
  }
}

@keyframes tra1 {
  0% {
    transform: translateY(30px);
  }

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

.ef {
  opacity: 0;
}

.ef.effect {
  animation: opa1 2.4s cubic-bezier(0.76, 0.3, 0.41, 1) 0.4s 1 forwards;
}

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

.ef-top.effect {
  animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 0s 1 forwards, tra1 1s cubic-bezier(0.76, 0.3, 0.41, 1) 0s 1 forwards;
}

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

.section {
  width: 100%;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.inner {
  width: 110rem;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.ttl_main {
  margin: 0 0 8rem;
  font-size: 3.1rem;
  font-family: var(--lp-font-en);
  font-weight: normal;
  letter-spacing: 0.27rem;
  text-align: center;
  line-height: 1.25;
}

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

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

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

.btn_wrap {
  text-align: center;
}

/* ===================
  　　　HEADER
=================== */

.lp_header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  padding: 3rem 4rem 0;
  font-size: 1.5rem;
}

.lp_header.scroll .lp_header__nav {
  opacity: 0;
}

.lp_header .inner {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.lp_header__logo {
  width: 11.7rem;
}

.lp_header__nav {
  margin: auto;
  padding-right: 10rem;
  font-size: 1.3rem;
  font-family: var(--lp-font-en);
  letter-spacing: 0.04em;
}

.lp_header__nav ul {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 11.5rem;
}

/* ------ Menu Button ------ */

.lp_header__hamburger {
  display: block;
  position: absolute;
  top: 2.8rem;
  right: 4rem;
  transition: all .3s ease-in-out;
  z-index: 2;
  opacity: 1;
  width: 2.8rem;
  height: 4.4rem;
}

.lp_header__hamburger span {
  display: inline-block;
  position: absolute;
  left: 50%;
  transition: all .4s;
  width: 2.8rem;
  height: 1px;
  margin-left: -1.4rem;
  border-radius: 0;
  background-color: #fff;
}

.lp_header__hamburger .menu-txt {
  display: none;
}

.lp_header__hamburger .menu-icn1 {
  top: 1rem;
}

.lp_header__hamburger .menu-icn2 {
  top: 2rem;
}

.lp_header__hamburger .menu-icn3 {
  top: 3rem;
}

.lp_header__hamburger:hover span {
  transition: all .4s;
}

.menu-btn-open,
.menu-btn-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.menu-btn-close {
  left: -20rem;
}

.menu-btn-open,
.js-nav-active .menu-btn-close {
  z-index: 900;
  opacity: 1;
}

.js-nav-active .menu-btn-open,
.menu-btn-close {
  z-index: -1;
  opacity: 0;
}

.menu-btn-close,
.menu-btn-close * {
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* ---- Site Menu ---- */

.js-nav-off .lp_header__hamburger .menu-icn1 {
  -webkit-animation: menu-bar01 1s forwards;
  animation: menu-bar01 1s forwards;
}

@-webkit-keyframes menu-bar01 {
  0% {
    -webkit-transform: translateY(10px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(10px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}

@keyframes menu-bar01 {
  0% {
    transform: translateY(10px) rotate(45deg);
  }
  50% {
    transform: translateY(10px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

.js-nav-off .lp_header__hamburger .menu-icn2 {
  transition: all 1s;
  opacity: 1;
}

.js-nav-off .lp_header__hamburger .menu-icn3 {
  -webkit-animation: menu-bar02 1s forwards;
  animation: menu-bar02 1s forwards;
}

@-webkit-keyframes menu-bar02 {
  0% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-10px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}

@keyframes menu-bar02 {
  0% {
    transform: translateY(-10px) rotate(-45deg);
  }
  50% {
    transform: translateY(-10px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

.js-nav-active .lp_header__hamburger .menu-icn1 {
  -webkit-animation: active-menu-bar01 0s forwards;
  animation: active-menu-bar01 0s forwards;
}

@-webkit-keyframes active-menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(10px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(10px) rotate(45deg);
  }
}

@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(10px) rotate(0);
  }
  100% {
    transform: translateY(10px) rotate(45deg);
  }
}

.js-nav-active .lp_header__hamburger .menu-icn2 {
  opacity: 0;
}

.js-nav-active .lp_header__hamburger .menu-icn3 {
  -webkit-animation: active-menu-bar03 0s forwards;
  animation: active-menu-bar03 0s forwards;
}

@-webkit-keyframes active-menu-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(-10px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
  }
}

@keyframes active-menu-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-10px) rotate(0);
  }
  100% {
    transform: translateY(-10px) rotate(-45deg);
  }
}

.lp_header__menu {
  position: fixed;
  top: 0;
  right: 0;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  width: 30rem;
  height: 100dvh;
  padding: 9.7rem 5rem;
  font-size: 1.4em;
  transition: opacity 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 0.2s;
  overflow-y: scroll;
  background: rgba(255, 255, 255, 0.2);
}

.lp_header__menu.is-active {
  z-index: 22;
  opacity: 1;
  visibility: visible;
}

.lp_header__menu_nav {
  margin-bottom: 5rem;
  padding-left: 2rem;
  font-size: 1.4rem;
  font-family: var(--lp-font-en);
  letter-spacing: 0.08em;
}

.lp_header__menu_nav ul {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  white-space: nowrap;
}

.lp_header__menu_nav ul li a {
  display: inline-block;
  position: relative;
  padding-left: 1rem;
}

.lp_header__menu_nav ul li a::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 100%;
  background: #fff;
  content: "";
}

.lp_header__menu_foot {
  border-top: 1px solid #fff;
}

.lp_header__menu_foot ul {
  padding-top: 5.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp_header__menu_foot .btn_ck {
  width: 8.3rem;
}

.lp_header__menu_foot .btn_bp {
  width: 4.8rem;
}

.lp_header__overlay {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.76, 0.3, 0.41, 1);
}

.noScroll .lp_header__overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 20;
  background: #231815;
  opacity: 0.75;
}

/* ===================
  　　　SIDEAREA
=================== */

.lp_side_link {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.76, 0.3, 0.41, 1);
  position: fixed;
  left: 4.3rem;
  bottom: 3rem;
}

.lp_side_link.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.lp_side_link ul {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
  align-items: center;
  gap: 1.5rem;
}

.lp_side_link .btn_ck {
  width: 9rem;
}

.lp_side_link .btn_bp {
  width: 4.8rem;
}

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

.lp_contents_inner {
  position: relative;
  z-index: 0;
  overflow: auto;
  overflow-x: hidden;
  //scroll-snap-type: smooth;
  height: 100dvh;
}

.snap-off {
  overscroll-behavior: auto;
  scroll-behavior: auto;
  touch-action: auto;
}

/* ===================
  　　SCROLL SECTION
=================== */

.scroll_snap {
  //scroll-snap-align: start;
  height: 100dvh;
  padding: 11rem 0 6rem;
}

.snap-disable {
  height: auto;
  scroll-snap-align: none;
  flex-shrink: 0;
}

/* ===================
  　　　FV
=================== */

.fv_section {
  height: 100dvh;
  padding: 6.5rem 0 0;
}

.fv_section .inner {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  height: 100%;
  animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 0s forwards;
}

.fv_section .fv_logo {
  width: 24.4rem;
  animation: opa0 1.4s cubic-bezier(0.76, 0.3, 0.41, 1) 2s forwards;
}

.fv_section .fv_txt {
  position: absolute;
  right: 15rem;
  bottom: 7.6rem;
  width: 20rem;
  opacity: 0;
  animation: opa1 1s cubic-bezier(0.76, 0.3, 0.41, 1) 4s forwards;
}

.scroll-indicator {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 2rem;
  height: 10rem;
  margin: 0 auto;
  /*opacity: 0;
  animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 4.4s forwards;*/
}

.scroll-indicator .circle {
  width: 1rem;
  height: 1rem;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: -3%;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollDown 3.8s infinite cubic-bezier(0.23, 0.33, 0.52, 0.83);
  opacity: 0;
}

.scroll-indicator .line {
  width: 1px;
  width: 0.5px;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes scrollDown {
  0% {
    top: -3%;
    opacity: 1;
  }
  80% {
    top: 88%;
    opacity: 1;
  }
  90% {
    top: 92%;
    opacity: 0;
  }

  100% {
    top: 92%;
    opacity: 0;
  }
}


/* ---- Circle Anime ---- */

.circle_anime_wrap {
  position: absolute;
  top: 3rem;
  left: 0;
  width: 100%;
  height: 100%;
}

.circle_anime {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: opa1 1s cubic-bezier(0.76, 0.3, 0.41, 1) 0.6s forwards;
}

/* 共通リングスタイル */
.circle_anime .ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80vw;
  max-width: 120rem;
  height: 44dvh;
  min-height: 20rem;
  max-height: 36rem;
  border: 0.9px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

/* 上のリング */
.circle_anime .ring-top {
  animation: ringMoveUp 3.4s cubic-bezier(0.08, 0.8, 1, 1) 1s forwards;
}

/* 下のリング */
.circle_anime .ring-bottom {
  animation: ringMoveDown 3.4s cubic-bezier(0.08, 0.8, 1, 1) 1s forwards;
}


@keyframes ringMoveUp {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* 重なったまま表示 */
  }
  40% {
    transform: translate(-50%, -50%) scale(1); /* まだ動かない！ */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -90%) scale(1);
    opacity: 1;
  }
}

@keyframes ringMoveDown {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  40% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -10%) scale(1);
    opacity: 1;
  }
}

/* ---- Video ---- */

.mv_video {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.mv_video.is-show {
  animation: opa1 1s cubic-bezier(0.76, 0.3, 0.41, 1) 0s forwards;
}

.mv_video_inner {
  transition: filter 0.6s ease;
}

.mv_video_inner.is-blur {
  filter: blur(8px);
}

.mv_video iframe {
  width: 150vw;
  height: 150dvh;
  margin-top: -25dvh;
  margin-left: -25dvh;
}


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

.intro_section {
  padding-bottom: 0;
  font-size: 1.6rem;
}

.intro_section.effect {
  animation: opa1 3.4s cubic-bezier(0.76, 0.3, 0.41, 1) 0.4s 1 forwards;
}

.intro_section .inner {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.intro_section .intro_ttl_main {
  font-size: 2.5rem;
  font-weight: normal;
  letter-spacing: 0.14em;
  text-align: center;
}

.intro_section .intro_txt {
  opacity: 0;
  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);
  mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(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-position: center 100%;
  mask-position: center 100%;
  -webkit-mask-repeat: none;
  mask-repeat: none;
  transform: translateZ(0);
  transition: -webkit-mask-position 5s linear 0s;
  transition: mask-position 5s linear 0s;
  transition: mask-position 5s linear 0s, -webkit-mask-position 5s linear 0s;
}

@keyframes mv_img {
  0% {
    opacity: 0;
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.intro_section.effect .intro_txt {
  animation: mv_img 4.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0.2s 1 forwards;
  -webkit-mask-position: center 0;
  mask-position: center 0;
}


.intro_section .intro_txt p {
  margin-bottom: 3.5rem;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  line-height: 2.8;
  text-align: center;
}

.intro_section .intro_txt p:last-child {
  margin-bottom: 0;
}


/* ===================
  　　FRAGRANCE
=================== */

.fragrance_section {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;
}

.fragrance_section .inner {
  width: 100%;
  height: auto;
  padding: 2% 0 0;
}

.fragrance_slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-bottom: 6rem;
}

.fragrance_slider .slider_track {
  height: 100%;
}

.fragrance_slider .swiper-wrapper {
  display: flex;
  transition: transform 0.1s linear;
  will-change: transform;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.fragrance_slider .slider_track li {
  position: relative;
  flex: 0 0 auto;
  width: auto;
}

.fragrance_slider .slider_track li a {
  display: block;
  width: 100%;
  height: 100%;
}

.fragrance_slider .slider_track span {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.76, 0.3, 0.41, 1) 0s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-family: var(--lp-font-en);
  letter-spacing: 0.14em;
  background: url(../../img/250711/icn_arw.svg) no-repeat center 59%;
  background-size: 2.1rem;
  padding-bottom: 3rem;
}

.fragrance_slider .slider_track a:hover span,
.fragrance_slider .slider_track .open-modal.is-active span {
  opacity: 1;
}

.fragrance_slider .swiper-pagination {
  bottom: 0;
}

.fragrance_slider .swiper-pagination-bullet {
  background: #fff;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 1rem !important;
}

.fragrance_slider .swiper-pagination-bullet-active {
}

.fragrance_slider_bottom {
  display: block;
  width: fit-content;
  margin: auto;
  padding: 7rem 0 0;
  text-align: center;
  line-height: 2.4;
}

/*----------------------------------------------------
  モーダル
----------------------------------------------------*/

.modal_section {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.76, 0.3, 0.41, 1);
  background-color: #231815;
}

.modal_section.is-open {
  display: flex;
  opacity: 1;
}

/* モーダル内コンテンツ */
.modal_inner {
  position: relative;
  width: 104rem;
  max-height: 90dvh;
  margin: auto;
  padding-top: 8%;
  transition: opacity 0.6s cubic-bezier(0.76, 0.3, 0.41, 1);
}

.modal_contents {
  position: relative;
  display: flex;
}

/* フェード切替 */
.fragrance_item_cont,
.main_slider li {
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.76, 0.3, 0.41, 1);
}

.fragrance_item_cont.is-active,
.main_slider li.is-active {
  z-index: 1;
  pointer-events: auto;
}

/* メインスライダー */
.fragrance_item_slider .main_slider {
  position: relative;
  width: 40rem;
  height: 40rem;
}

.fragrance_item_slider .main_slider li {
  position: absolute;
  top: 0;
  left: 0;
}

.fragrance_item_slider .main_slider .fragrance_img_wrap {
  position: relative;
}

.fragrance_item_slider .main_slider .fragrance_name {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.main_slider li.is-active .fragrance_name {
  animation: opa1 1.4s cubic-bezier(0.76, 0.3, 0.41, 1) 0.3s forwards;
}

.fragrance_item_slider .main_slider .fragrance_name__en {
  font-size: 2.2rem;
  letter-spacing: 0.1em;
  font-family: var(--lp-font-en);
}

.fragrance_item_slider .main_slider .fragrance_name__ja {
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}

.fragrance_item_slider .main_slider li img {
  width: 100%;
  height: auto;
}

/* サムネイルスライダー */
.fragrance_item_slider .thumb_slider {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  padding: 2rem 0 0;
}

.fragrance_item_slider .thumb_slider li {
  overflow: hidden;
  opacity: 0.3;
  transition: opacity 0.6s cubic-bezier(0.76, 0.3, 0.41, 1);
  width: 3.6rem;
  border-radius: 100%;
  line-height: 0;
}

.thumb_slider li.is-active,
.thumb_slider li:hover {
  opacity: 1;
}

.fragrance_item_slider .thumb_slider li img {
  width: 60px;
  height: auto;
}

/* テキストコンテンツ */
.fragrance_item_cont_wrap {
  position: relative;
  width: 67.7rem;
}

.fragrance_item_cont {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 12rem;
}

.fragrance_item_cont__txt {
  opacity: 0;
  margin-bottom: 11rem;
  font-size: 1.4rem;
  line-height: 2.4;
  text-align: justify;
}

.fragrance_item_cont.is-active .fragrance_item_cont__txt {
  animation: opa1 1s cubic-bezier(0.76, 0.3, 0.41, 1) 0.6s forwards;
}

/* モーダルのクローズボタン */
.modal_close {
  position: absolute;
  top: 6rem;
  right: -9rem;
  width: 4.3rem;
  height: 5.3rem;
  border: none;
}

/* モーダル背景クリック用 */
.modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ベース */
.fragrance_graph {
  position: relative;
  width: 100%;
  height: 150px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.76, 0.3, 0.41, 1);
}

.fragrance_graph.start {
  opacity: 1;
}

/* ステップ共通 */
.fragrance_graph .step {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

/* STEP1：中心に楕円 */
.fragrance_graph .step1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 0rem;
  background: none;
  border: 0.8px solid #fff;
  border-radius: 50% / 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.fragrance_graph.start .step1 {
  height: 60px;
  opacity: 1;
  transition: height 0.8s ease 1s, opacity 0.8s ease 1s;
}

/* STEP2：step1と同じ形で上へ移動しながら出現 */
.fragrance_graph .step2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 60px;
  border: 0.8px solid #fff;
  border-radius: 50% / 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.fragrance_graph.start .step2 {
  transform: translate(-50%, -110%); /* 上に移動 */
  opacity: 1;
  transition: transform 2s ease 1.8s, opacity 0.6s ease 1.8s;
}

/* STEP3：step1と同じ形で下へ移動しながら出現 */
.fragrance_graph .step3 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 60px;
  border: 0.8px solid #fff;
  border-radius: 50% / 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.fragrance_graph.start .step3 {
  transform: translate(-50%, 5%); /* 下に移動 */
  opacity: 1;
  transition: transform 2s ease 1.8s, opacity 0.6s ease 1.8s;
}

/* ステップ4：白丸表示 */
.fragrance_graph .step4 {
  opacity: 0;
  margin-left: 0;
  margin-top: -11px;
  transform: rotate(30deg);
}

.fragrance_graph .step4.step4_2 {
  transform: rotate(305deg);
}

.fragrance_graph .step4.step4_3 {
  transform: rotate(13deg);
}

.fragrance_graph.start .step4 {
  animation: opa1 0.6s cubic-bezier(0.76, 0.3, 0.41, 1) 3s forwards;
}

.fragrance_graph .step4 .dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  offset-path: path("M 0.25,32.86 A 121.84,32.61 0 1,1 244.18,32.86 A 121.84,32.61 0 1,1 0.25,32.86");
  offset-rotate: 0deg;
  offset-distance: 0%;
}

.fragrance_graph.start .step4 .dot {
  opacity: 1;
}

.fragrance_graph .step4 .dot.dot1 {
  top: -3px;
}

.fragrance_graph.start .step4 .dot.dot1 {
  animation: followEllipse1 4s ease-in-out forwards;
  animation-delay: 1s;
  animation-duration: 3s;
}

.fragrance_graph .step4 .dot.dot2 {
  top: -53px;
  left: -136px;
}

.fragrance_graph.start .step4 .dot.dot2 {
  animation: followEllipse2 4s ease-in-out forwards;
  animation-delay: 0.8s;
  animation-duration: 3s;
}

.fragrance_graph .step4 .dot.dot3 {
  top: 93px;
  left: 100px;
}

.fragrance_graph.start .step4 .dot.dot3 {
  animation: followEllipse3 4s ease-in-out forwards;
  animation-delay: 0.3s;
  animation-duration: 3.4s;
}

@keyframes followEllipse1 {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 4%;
  }
}

@keyframes followEllipse2 {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 3%;
  }
}

@keyframes followEllipse3 {
  0% {
    offset-distance: 8%;
  }
  100% {
    offset-distance: 2%;
  }
}

/* ステップ5：白丸にラベル出現 */
.fragrance_graph .step5 {
  display: block;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 16rem;
  opacity: 0;
  color: #fff;
  text-align: left;
}

.fragrance_graph.start .step5 {
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 3.9s;
}

.fragrance_graph .step5 > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.fragrance_graph .step5 > div span {
  display: block;
}

.fragrance_graph .step5 .label-top {
  margin-top: -107px;
  margin-left: 49px;
}

.fragrance_graph .step5 .label-middle {
  margin-top: 17px;
  margin-left: -186px;
}

.fragrance_graph .step5 .label-base {
  margin-left: 122px;
  margin-top: 84px;
}

.fragrance_graph .step5 .label_main {
  padding-bottom: 7px;
  font-size: 1.9rem;
  font-family: var(--lp-font-en);
  line-height: 1;
  letter-spacing: 0.08em;
}

.fragrance_graph .step5 .label_sub {
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0;
}

/* ---- fragrance01 ---- */

.fragrance01 .fragrance_graph .step5 .label-top {
  width: 300px;
  margin-left: 145px;
}

/* ---- fragrance02 ---- */

.fragrance02 .fragrance_graph .step5 .label-middle {
  margin-left: -178px;
}

.fragrance02 .fragrance_graph .step5 .label-base {
  width: 200px;
  margin-left: 163px;
  margin-top: 92px;
}

/* ---- fragrance03 ---- */

.fragrance03 .fragrance_graph .step5 .label-top {
  margin-left: 52px;
}

.fragrance03 .fragrance_graph .step5 .label-middle {
  margin-left: -160px;
}

.fragrance03 .fragrance_graph .step5 .label-base {
  width: 200px;
  margin-left: 171px;
  margin-top: 92px;
}

/* ---- fragrance04 ---- */

.fragrance04 .fragrance_graph .step5 .label-top {
  width: 300px;
  margin-left: 145px;
}

.fragrance04 .fragrance_graph .step5 .label-middle {
  margin-left: -160px;
}

.fragrance04 .fragrance_graph .step5 .label-base {
  width: 200px;
  margin-left: 171px;
  margin-top: 92px;
}

/* ---- fragrance05 ---- */

.fragrance05 .fragrance_graph .step5 .label-top {
  width: 300px;
  margin-left: 145px;
}

.fragrance05 .fragrance_graph .step5 .label-middle {
  margin-top: 17px;
  margin-left: -188px;
}

.fragrance05 .fragrance_graph .step5 .label-base {
  width: 200px;
  margin-left: 171px;
  margin-top: 84px;
}


@media screen and (min-width: 768px) and (max-width: 1200px) {
  .fragrance_graph {
    transform: scale(0.9);
  }

  /* モーダルのクローズボタン */
  .modal_close {
    top: 0;
    right: -4rem;
  }

}

@media screen and (min-width: 768px) and (max-width: 900px) {
  .fragrance_graph {
    transform: scale(0.8);
  }
}

/* ===================
  　　PRODUCTS
=================== */

.products_section.scroll_snap {
  padding-top: 25rem;
  padding-bottom: 0;
}

.products_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11rem;
}

.products_wrap .products_cont {
  width: 30.6rem;
}

.products_wrap .products_cont .ttl_main {
  margin-bottom: 6.4rem;
  font-size: 3.1rem;
}

.products_wrap .products_cont p {
  margin-bottom: 3rem;
  font-size: 1.2rem;
  line-height: 2.2;
  letter-spacing: 0.19em;
  text-align: justify;
  font-feature-settings: "palt";
}

.products_wrap .products_cont p:last-child {
  margin-bottom: 0;
}

.products_wrap .products_cont p.txt_sm {
  font-size: 1rem;
}

.products_wrap .products_list {
  width: 43.6rem;
}

.products_wrap .products_list ul {
  display: flex;
  gap: 3.2rem;
  flex-wrap: wrap;
}

.products_wrap .products_list ul li {
  position: relative;
  width: calc(50% - 1.6rem);
}

.products_wrap .products_list ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

.products_wrap .products_list ul li span {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.76, 0.3, 0.41, 1) 0s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-family: var(--lp-font-en);
  letter-spacing: 0.14em;
  color: #000;
}

.products_wrap .products_list ul li a:hover span,
.products_wrap .products_list ul li .open-modal.is-active span {
  opacity: 1;
}


/* ---------- Modal Products ---------- */

.modal_products .modal_inner {
  width: 117rem;
  max-width: 95%;
  overflow-y: auto;
  max-height: 67dvh;
  padding-top: 0;
}

.modal_products .modal_inner .modal_contents {
  display: block;
}

.products_content {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow: hidden;
}

.products_content.is-active {
  display: block;
  opacity: 1;
  overflow: visible;
}

/* ---- products_detail_head ---- */

.products_content .products_detail_head {
  overflow: hidden;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 5.4rem 0 14rem;
  background: #fff;
  flex-wrap: wrap;
  color: #000;
}

/* -- products_detail_slider -- */

.products_detail_head .products_detail_slider {
  opacity: 0;
  position: relative;
  width: 31rem;
  height: 34rem;
  margin: 0 !important;
  padding-bottom: 1rem;
  overflow: hidden;
}

.is-active .products_detail_head .products_detail_slider {
  animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 0s forwards;
}

.products_detail_slider .swiper-pagination {
  bottom: 0;
}

.products_detail_slider .swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 1.2rem;
  background-color: #CDC9C7;
  cursor: none;
}

.products_detail_slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #808080;
}

/* -- products_detail_cont -- */

.products_detail_head .products_detail_cont {
  opacity: 0;
  width: 40rem;
  padding-left: 6rem;
  padding-right: 6rem;
  text-align: center;
}

.is-active .products_detail_head .products_detail_cont {
  animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 0.4s forwards;
}

.products_detail_cont .products_detail__ttl {
  margin-bottom: 2rem;
  font-size: 2.5rem;
  font-weight: normal;
}

.products_detail_cont .products_detail__ttl .ttl_en {
  display: block;
  font-family: var(--lp-font-en);
  letter-spacing: 0.1em;
  line-height: 1.3;
  white-space: nowrap;
}

.products_detail_cont .products_detail__ttl .ttl_ja {
  display: block;
  padding-top: 1rem;
  font-size: 1.1rem;
  line-height: 1;
}

.products_detail_cont .products_detail__catch {
  font-size: 1.6rem;
  margin-bottom: 2rem;
  line-height: 1.8;
}

.products_detail_cont .products_detail__txt {
  margin: 0 0 1.8rem;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.products_detail_cont .products_detail__size {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  text-align: center;
}

.products_detail_cont .products_detail__price {
  font-size: 1.5rem;
  text-align: center;
}

.products_detail_cont .products_detail__price .txt_tax {
  font-size: 1.2rem;
}

.products_detail_cont .products_detail__sub {
  padding: 1.4rem 0 0;
  font-size: 0.8rem;
  text-align: left;
}

/* -- products_fragrance_line -- */

.products_detail_head .products_fragrance_line {
  opacity: 0;
  position: relative;
  width: 33rem;
  padding-left: 5.5rem;
  text-align: center;
}

.is-active .products_detail_head .products_fragrance_line {
  animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 0.4s forwards;
}

.products_detail_head .products_fragrance_line::before {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #000;
  content: "";
}

.is-active .products_detail_head .products_fragrance_line::before {
  animation: opa1 1s cubic-bezier(0.76, 0.3, 0.41, 1) 1 forwards;
}

@keyframes fragrance_line_anime {
  0% {
    opacity: 0;
    height: 0;
  }

  100% {
    opacity: 1;
    height: 34rem;
  }
}

.products_fragrance_line .fragrance_line__ttl {
  margin-bottom: 2rem;
  font-size: 2.5rem;
  font-family: var(--lp-font-en);
  font-weight: normal;
  letter-spacing: 0.075em;
  white-space: nowrap;
}

.fragrance_line__list {
  width: 20rem;
  margin: auto;
}

.fragrance_line__list li {
  margin-bottom: 1.8rem;
}

.fragrance_line__list .open-modal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fragrance_line__list .open-modal .fragrance_name {
  text-align: left;
}

.fragrance_line__list .open-modal .fragrance_name span {
  display: block;
}

.fragrance_line__list .open-modal .fragrance_name__en {
  font-size: 1.3rem;
  font-family: var(--lp-font-en);
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.fragrance_line__list .open-modal .fragrance_name__ja {
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 0.3rem 0 0;
}

.fragrance_line__list .open-modal img {
  overflow: hidden;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 100%;
}

.products_fragrance_line .btn_wrap {
  margin-top: 2rem;
}

.products_fragrance_line .btn_wrap .btn_link {
  display: flex;
  width: 100%;
  height: 5rem;
  background: #000;
  color: #fff;
  text-align: center;
  letter-spacing: 0.4em;
  justify-content: center;
  align-items: center;
  padding-left: 2rem;
  font-size: 1.4rem;
}

/* ---- products_detail_other ---- */

.products_detail_other {
  position: relative;
  z-index: 0;
  display: flex;
  padding-top: 19rem;
  background: url(../../img/250711/fv_txt.svg) no-repeat 98% 94%;
  background-size: 19.8rem;
}

.products_detail_other .detail_other__ttl {
  width: 41rem;
  padding-top: 12.8rem;
  padding-right: 12rem;
  font-size: 2.85rem;
  font-family: var(--lp-font-en);
  font-weight: normal;
  line-height: 1.3;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.products_detail_other .detail_other__video {
  width: 34.3rem;
}

.products_detail_other .detail_other__video iframe {
  height: 50rem;
}

.products-scroll-indicator {
  position: absolute;
  bottom: -5rem;
  width: 2rem;
  height: 10rem;
}

.products-scroll-indicator .circle {
  background: #000;
}

.products-scroll-indicator .line {
  background: #000;
}

.products_detail_other .products-scroll-indicator {
  top: -5rem;
  bottom: auto;
}

.products_detail_other .products-scroll-indicator .circle {
  background: #fff;
}

.products_detail_other .products-scroll-indicator .line {
  background: #fff;
}

.modal_products .modal_close {
  position: fixed;
  top: 10dvh;
  right: 0;
  left: 0;
  width: 117rem;
  max-width: 95%;
  margin: auto;
  text-align: right;
  transform: none;
}

.modal_products .modal_close picture {
  display: block;
  width: 2.9rem;
  height: 2.9rem;
  margin-left: auto;
}

/* ===================
  　FRAGRANCE LINE
=================== */

.modal_fragrance_detail {
}

.modal_fragrance_detail.is-open {
}

.fragrance_detail_content {
  display: none;
  position: relative;
  opacity: 0;
  transition: opacity 0.4s ease 0s;
  background-color: #fff;
  color: #000;
}

.fragrance_detail_content.is-active {
  display: block;
  opacity: 1;
}

/* ---------- Modal Products ---------- */

.modal_fragrance_detail .modal_inner {
  width: 117rem;
  max-width: 95%;
  overflow-y: auto;
  max-height: 67dvh;
  padding-top: 0;
}

.modal_fragrance_detail .modal_inner .modal_contents {
  display: block;
}

.fragrance_detail_head {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 5rem;
  padding-top: 6.6rem;
  /*padding-bottom: 25rem;*/
  padding-bottom: 9rem;
}

.fragrance_detail_img {
  opacity: 0;
  width: 29rem;
}

.is-active .fragrance_detail_img {
  animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 0.2s 1 forwards;
}

.fragrance_detail_cont {
  opacity: 0;
  width: 38rem;
}

.is-active .fragrance_detail_cont {
  animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 0.4s 1 forwards;
}

.fragrance_detail_head .fragrance_name {
  margin-bottom: 2.5rem;
  font-size: 2.5rem;
  font-weight: normal;
  text-align: center;
}

.fragrance_detail_head .fragrance_name .fragrance_name__en {
  font-size: 1.7rem;
  font-family: var(--lp-font-en);
  letter-spacing: 0.12em;
}

.fragrance_detail_head .fragrance_name .fragrance_name__ja {
  display: block;
  padding-top: 0.4rem;
  font-size: 1.2rem;
  line-height: 1;
}

.fragrance_detail_head .fragrance_txt {
  font-size: 1.1rem;
  line-height: 2.1;
}

.fragrance-scroll-indicator {
  opacity: 0;
  position: absolute;
  bottom: 2.5rem;
  width: 2rem;
  height: 18rem;
}

.is-active .fragrance-scroll-indicator {
  animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 1.8s 1 forwards;
}

.fragrance-scroll-indicator .circle {
  animation: scrollDown 2.2s infinite cubic-bezier(0.23, 0.33, 0.52, 0.83)  1.8s;
}

.fragrance-scroll-indicator .circle {
  background: #000;
}

.fragrance-scroll-indicator .line {
  background: #000;
}

.modal_fragrance_detail .modal_close {
  position: fixed;
  top: 18dvh;
  right: 0;
  left: 0;
  width: 117rem;
  max-width: 95%;
  margin: auto;
  text-align: right;
  transform: none;
}

.modal_fragrance_detail .modal_close picture {
  display: block;
  width: 2.9rem;
  height: 2.9rem;
  margin-left: auto;
}

/* モーダルのクローズボタン */
.modal_fragrance_detail .modal_close_back {
  position: absolute;
  top: 7rem;
  right: 50%;
  z-index: 22;
  width: 4.2rem;
  height: 5.6rem;
  margin-right: -48rem;
  border: none;
}

.fragrance_detail_other {
  opacity: 0;
  padding: 0 6rem 6rem;
}

.is-active .fragrance_detail_other {
  animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 2s 1 forwards;
}


/* ===================
  　　　FORTUNE
=================== */

.fortune_section {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;
}

.fortune_section .ttl_main {
  margin-bottom: 2.5rem;
  font-size: 2.9rem;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.1em;
}

.fortune_section .txt_cont {
  width: 30rem;
  margin: 0 auto 5rem;
  font-size: 1.2rem;
  line-height: 2;
  text-align: left;
}

.fortune_section .fortune_select_area {
  text-align: center;
}

.fortune_section .fortune_select_area select {
  color: #606D72;
  background: #fff;
  font-size: 2.7rem;
  text-align: center;
}


/* ===================
  　　　FOOTER
=================== */

.lp_footer {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10rem 7rem;
  background-color: #2A1F1C;
}

.lp_footer__logo {
  width: 15rem;
}

.lp_footer__copy {
  display: flex;
  align-items: center;
  padding-left: 4.8rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.lp_footer__copy .icn_insta {
  padding-left: 4rem;
}

.lp_footer__copy .icn_insta img {
  width: 2.4rem;
}

.lp_footer__link {
  margin-left: auto;
}

.lp_footer__link ul {
  display: flex;
  gap: 5rem;
  align-items: center;
}

.lp_footer__link ul img {
  vertical-align: middle;
}

.lp_footer__link .btn_ck {
  width: 11rem;
}

.lp_footer__link .btn_bp {
  width: 5.8rem;
}

.lp_footer_page_top {
  position: absolute;
  top: -10rem;
  right: 4rem;
  width: 5.6rem;
}

.lp_page_top {
  opacity: 0;
  position: fixed;
  right: 4rem;
  bottom: 3rem;
  width: 5.6rem;
  transition: opacity 0.6s cubic-bezier(0.76, 0.3, 0.41, 1);
}

.lp_page_top.is-visible {
  opacity: 1;
  pointer-events: auto;
}




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


/* only PC */

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

@media screen and (max-width: 1200px) {
  .lp_header__menu.is-active .menu-icn1 {
    top: 0;
  }
  .lp_header__menu.is-active .menu-icn3 {
    top: 20px;
  }
}

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

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

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

  .contents {}

  .lp_contents {
  }

  body,
  a:hover,
  .tab_btn_area li:hover,
  .modaal-content-container,
  .modaal-wrapper .modaal-close:hover {
    cursor: none;
  }

  /*  Cursor Setting
  -------------------------- */

  .cursor-dot,
  .cursor-dot-outline {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out,background-color 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out,background-color 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out,background-color 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out,background-color 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out,background-color 0.3s ease-in-out;
  }

  .cursor-dot {
    width: 7px;
    height: 7px;
    background-color: #fff;
    z-index: 10000;
    mix-blend-mode: difference;
  }
  .cursor-dot-outline {
    width: 7px;
    height: 7px;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 10000;
    mix-blend-mode: difference;
  }
}




/* only tablet */

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


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


/* only SP */

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

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

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

  .lp_contents {
    overflow: hidden;
    font-size: calc(14 * (100vw / 368));
    letter-spacing: 0;
  }

  .lp_contents sup {
    font-size: calc(10 * (100vw / 368));

  }

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

   .contents {
    padding-top: 0;
  }

  .inner {
    width: 100%;
  }

  .ttl_main {
    margin: 0 0 calc(55 * (100vw / 368));
    font-size: calc(23 * (100vw / 368));
    letter-spacing: 0.12em;
  }

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

  .btn_wrap {
    text-align: center;
  }

  /* ===================
    　　　HEADER
  =================== */

  .lp_header {
    padding: calc(20 * (100vw / 368));
    font-size: calc(15 * (100vw / 368));
  }


  .lp_header__logo {
    width: calc(86 * (100vw / 368));
  }

  .lp_header__nav {
    display: none;
  }

  /* ------ Menu Button ------ */

  .lp_header__hamburger {
    top: calc(20 * (100vw / 368));
    right: calc(20 * (100vw / 368));
    width: calc(28 * (100vw / 368));
    height: calc(20 * (100vw / 368));
  }

  .lp_header__hamburger span {
    width: calc(28 * (100vw / 368));
    margin-left: calc(-14 * (100vw / 368));
  }

  .lp_header__hamburger .menu-icn1 {
    top: calc(10 * (100vw / 368));
  }

  .lp_header__hamburger .menu-icn2 {
    top: calc(18 * (100vw / 368));
  }

  .lp_header__hamburger .menu-icn3 {
    top: calc(26 * (100vw / 368));
  }

  .menu-btn-close {
    top: calc(8 * (100vw / 368));
    left: calc(-210 * (100vw / 368));
  }

  /* ---- Site Menu ---- */

  .lp_header__menu {
    width: calc(280 * (100vw / 368));
    padding: calc(80 * (100vw / 368)) calc(62 * (100vw / 368));
    font-size: calc(12 * (100vw / 368));
  }

  .lp_header__menu_nav {
    margin-bottom: calc(35 * (100vw / 368));
    padding-left: calc(3 * (100vw / 368));
    font-size: calc(12 * (100vw / 368));
    letter-spacing: 0.08em;
  }

  .lp_header__menu_nav ul {
    gap: calc(30 * (100vw / 368));
  }

  .lp_header__menu_nav ul li a {
    padding-left: calc(10 * (100vw / 368));
  }

  .lp_header__menu_foot ul {
    padding-top: calc(40 * (100vw / 368));
  }

  .lp_header__menu_foot .btn_ck {
    width: calc(83 * (100vw / 368));
  }

  .lp_header__menu_foot .btn_bp {
    width: calc(48 * (100vw / 368));
  }

  /* ===================
    　　　SIDEAREA
  =================== */

  .lp_side_link {
    display: none;
  }

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

  /* ===================
    　　SCROLL SECTION
  =================== */

  .scroll_snap {
    padding: calc(40 * (100vw / 368)) 0 calc(30 * (100vw / 368));
  }

  /* ===================
    　　　FV
  =================== */

  .fv_section {
    padding: calc(40 * (100vw / 368)) 0 0;
  }

  .fv_section .inner {
  }

  .fv_section .fv_logo {
    width: calc(156 * (100vw / 368));
    margin-top: calc(-416 * (100vw / 368));
  }

  .fv_section .fv_txt {
    left: 50%;
    right: auto;
    bottom: calc(94 * (100vw / 368));
    transform: translateX(-50%);
    width: calc(132 * (100vw / 368));
  }

  .scroll-indicator {
    width: calc(20 * (100vw / 368));
    height: calc(80 * (100vw / 368));
  }

  .scroll-indicator .circle {
    width: calc(7 * (100vw / 368));
    height: calc(7 * (100vw / 368));
  }

  /* ---- Circle Anime ---- */

  .circle_anime_wrap {
    top: calc(-20 * (100vw / 368));
  }

  /* 共通リングスタイル */
  .circle_anime .ring {
    width: calc(413 * (100vw / 368));
    height: calc(153 * (100vw / 368));
    min-height: 0;
    max-height: 100%;
  }

  /* ---- Video ---- */

  .mv_video {
    opacity: 0;
    position: fixed;
  }

  .mv_video iframe {
    width: 466vw;
    height: 114dvh;
    margin-top: -10dvh;
    margin-left: -100dvh;
  }

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

  .intro_section {
  }

  .intro_section .inner {
    flex-direction: column;
  }

  .intro_section .intro_ttl_main {
    font-size: calc(16 * (100vw / 368));
    letter-spacing: 0.18em;
  }

  .intro_section .intro_txt p {
    margin-bottom: calc(30 * (100vw / 368));
    font-size: calc(11 * (100vw / 368));
    line-height: 2.4;
  }

  .intro_section .intro_txt p:last-child {
    margin-bottom: 0;
  }

  /* ===================
    　　FRAGRANCE
  =================== */

  .fragrance_section {
  }

  .fragrance_section .inner {
    padding: calc(30 * (100vw / 368)) 0 0;
  }

  .fragrance_slider {
    padding-bottom: calc(50 * (100vw / 368));
  }

  .fragrance_slider .slider_track li img {
    width: 100%;
  }

  .fragrance_slider .slider_track span {
    opacity: 1;
    position: inherit;
    display: block;
    padding: 0;
    background: none;
    padding-top: calc(6 * (100vw / 368));
    padding-bottom: 0;
    font-size: calc(9 * (100vw / 368));
    letter-spacing: 0.16em;
    text-align: center;
  }

  .fragrance_slider .swiper-pagination {
    bottom: 0;
  }

  .fragrance_slider .swiper-pagination-bullet {
    width: calc(4 * (100vw / 368));
    height: calc(4 * (100vw / 368));
    margin: 0 calc(10 * (100vw / 368)) !important;
  }

  .fragrance_slider .swiper-pagination-bullet-active {
  }

  .fragrance_slider_bottom {
    width: calc(255 * (100vw / 368));
    margin: auto;
    padding: calc(40 * (100vw / 368)) 0 0;
    font-size: calc(10 * (100vw / 368));
    line-height: 2.4;
    letter-spacing: 0.16em;
  }

  /*----------------------------------------------------
    モーダル
  ----------------------------------------------------*/

  .modal_section {
  }

  /* モーダル内コンテンツ */
  .modal_inner {
    width: calc(283 * (100vw / 368));
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    /* padding-top: calc(90 * (100vw / 368)); */
  }

  .modal_contents {
    flex-direction: column;
    height: 100dvh;
    display: flex;
    justify-content: center;
  }

  /* メインスライダー */
  .fragrance_item_slider .main_slider {
    width: calc(283 * (100vw / 368));
    height: calc(315 * (100vw / 368));
  }

  .fragrance_item_slider .main_slider li {

  }

  .fragrance_item_slider .main_slider .fragrance_name {
    gap: calc(2 * (100vw / 368));
  }

  .main_slider li.is-active .fragrance_name {
  }

  .fragrance_item_slider .main_slider .fragrance_name__en {
    font-size: calc(15 * (100vw / 368));
  }

  .fragrance_item_slider .main_slider .fragrance_name__ja {
    font-size: calc(9 * (100vw / 368));
  }

  /* サムネイルスライダー */
  .fragrance_item_slider .thumb_slider {
    gap: calc(10 * (100vw / 368));
    padding: calc(45 * (100vw / 368)) 0 0;
  }

  .fragrance_item_slider .thumb_slider li {
    width: calc(25 * (100vw / 368));
  }

  .thumb_slider li.is-active,
  .thumb_slider li:hover {
    opacity: 1;
  }

  .fragrance_item_slider .thumb_slider li img {
    width: 60px;
    height: auto;
  }

  /* テキストコンテンツ */
  .fragrance_item_cont_wrap {
    position: relative;
    width: 100%;
    height: calc(190 * (100vw / 368));
    padding-top: calc(20 * (100vw / 368));
  }

  .fragrance_item_cont {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 0;
    width: 100%;
    top: auto;
    height: calc(200 * (100vw / 368));
  }

  .fragrance_item_cont__txt {
    opacity: 0;
    transform: scale(0.9) translateX(-6%);
    width: 110%;
    margin: 0;
    font-size: calc(9 * (100vw / 368));
    line-height: 1.8;
  }

  .is-active .fragrance_item_cont__txt {
    animation: opa1 1s cubic-bezier(0.76, 0.3, 0.41, 1) 0.6s forwards;
  }

  /* ---- fragrance graph ---- */

  .fragrance_graph {
    margin-top: calc(38 * (100vw / 368));
    transform: scale(0.7) translate(-28%, 0);
    width: calc(408 * (100vw / 368));
    margin-right: auto;
  }

  .fragrance_graph .step5 .label_main {
    padding-bottom: 7px;
    font-size: calc(19 * (100vw / 368));
  }

  .fragrance_graph .step5 .label_sub {
    font-size: 11px;
  }

  /* ---- fragrance01 ---- */

  .fragrance01 .fragrance_graph .step5 .label-top {
    margin-top: -100px;
    margin-left: 0;
  }

  .fragrance01 .fragrance_graph .step5 .label-middle {
    margin-top: 79px;
    margin-left: -103px;
  }

  .fragrance01 .fragrance_graph .step5 .label-base {
    margin-left: 122px;
    margin-top: 95px;
  }

  /* ---- fragrance02 ---- */

  .fragrance02 .fragrance_graph .step5 .label-top {
    margin-top: -98px;
    margin-left: -29px;
  }

  .fragrance02 .fragrance_graph .step5 .label-middle {
    margin-top: 80px;
    margin-left: -108px;
  }

  .fragrance02 .fragrance_graph .step5 .label-base {
    margin-left: 170px;
    margin-top: 99px;
  }

  /* ---- fragrance03 ---- */

  .fragrance03 .fragrance_graph .step5 .label-top {
    margin-left: -19px;
    margin-top: -102px;
  }

  .fragrance03 .fragrance_graph .step5 .label-middle {
    margin-left: -121px;
    margin-top: 78px;
  }

  .fragrance03 .fragrance_graph .step5 .label-base {
    margin-left: 171px;
    margin-top: 96px;
  }

  /* ---- fragrance04 ---- */

  .fragrance04 .fragrance_graph .step5 .label-top {
    margin-left: 23px;
  }

  .fragrance04 .fragrance_graph .step5 .label-middle {
    margin-top: 78px;
    margin-left: -131px;
  }

  .fragrance04 .fragrance_graph .step5 .label-base {
    margin-left: 171px;
    margin-top: 96px;
  }

  /* ---- fragrance05 ---- */

  .fragrance05 .fragrance_graph .step5 .label-top {
    margin-left: 24px;
    margin-top: -102px;
  }

  .fragrance05 .fragrance_graph .step5 .label-middle {
    margin-top: 75px;
    margin-left: -107px;
  }

  .fragrance05 .fragrance_graph .step5 .label-base {
    margin-left: 171px;
    margin-top: 86px;
  }

  /* モーダルのクローズボタン */
  .modal_close {
    top: 50%;
    right: calc(8 * (100vw / 368));
    width: calc(23 * (100vw / 368));
    height: calc(28 * (100vw / 368));
    transform: translateY(-50%);
    margin-top: calc(-234 * (100vw / 368));
    z-index: 222;
  }

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

    .modal_fragrance .modal_close {
      right: calc(15 * (100vw / 368));
      margin-top: calc(-225 * (100vw / 368));
    }

    .fragrance_item_slider .main_slider {
      margin: auto;
    }

    .fragrance_item_slider .thumb_slider {
      padding-top: calc(40 * (100vw / 368));
    }

    .fragrance_graph {
      margin-top: calc(35 * (100vw / 368));
      transform: scale(0.6) translate(-30%, 0);
    }
  }

  /* ===================
    　　PRODUCTS
  =================== */

  .products_section.scroll_snap {
    padding-top: calc(35 * (100vw / 368));
    padding-bottom: 0;
  }

  .products_section .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .products_wrap {
    gap: 0;
    flex-direction: column;
  }

  .products_wrap .products_list ul li span {
    display: none;
  }

  .products_wrap .products_cont {
    width: calc(250 * (100vw / 368));
  }

  .products_wrap .products_cont .ttl_main {
    margin-bottom: calc(36 * (100vw / 368));
    font-size: calc(23 * (100vw / 368));
  }

  .products_wrap .products_cont p {
    margin-bottom: calc(12 * (100vw / 368));
    font-size: calc(11 * (100vw / 368));
    line-height: 1.8;
    text-align: justify;
  }

  .products_wrap .products_cont p:last-child {
    margin-bottom: 0;
  }

  .products_wrap .products_cont p.txt_sm {
    font-size: calc(10 * (100vw / 368));
  }

  .products_wrap .products_list {
    width: calc(290 * (100vw / 368));
    margin-bottom: calc(20 * (100vw / 368));
  }

  .products_wrap .products_list ul {
    gap: calc(20 * (100vw / 368));
  }

  .products_wrap .products_list ul li {
    width: calc(50% - (10 * (100vw / 368)));
  }

  /* ---------- Modal Products ---------- */

  .modal_products .modal_inner {
    width: 100%;
    max-height: 100dvh;
    margin-top: calc(157 * (100vw / 368));
  }

  .modal_products .modal_inner .modal_contents {

    width: calc(304 * (100vw / 368));
    margin: auto;
  }

  /* ---- products_detail_head ---- */

  .products_content .products_detail_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(30 * (100vw / 368)) calc(30 * (100vw / 368)) calc(80 * (100vw / 368));
  }

  /* -- products_detail_slider -- */

  .products_detail_head .products_detail_slider {
    width: calc(243 * (100vw / 368));
    height: calc(267 * (100vw / 368));
    padding-bottom: calc(10 * (100vw / 368));
  }

   .products_detail_head .products_detail_slider img {
     width: 100%;
   }

  .products_detail_slider .swiper-pagination .swiper-pagination-bullet {
    width: calc(3 * (100vw / 368));
    height: calc(3 * (100vw / 368));
    margin: 0 calc(8 * (100vw / 368)) !important;
  }

  /* -- products_detail_cont -- */

  .products_detail_head .products_detail_cont {
    opacity: 0;
    width: calc(190 * (100vw / 368));
    padding: calc(10 * (100vw / 368)) 0 0;
  }

  .is-active .products_detail_head .products_detail_cont {
    animation: opa1 0.8s cubic-bezier(0.76, 0.3, 0.41, 1) 0.4s forwards;
  }

  .products_detail_cont .products_detail__ttl {
    margin-bottom: calc(10 * (100vw / 368));
    font-size: calc(17.68 * (100vw / 368));
  }

  .products_detail_cont .products_detail__ttl .ttl_ja {
    padding-top: calc(6 * (100vw / 368));
    font-size: calc(8 * (100vw / 368));
  }

  .products_detail_cont .products_detail__catch {
    font-size: calc(11 * (100vw / 368));
    margin-bottom: calc(10* (100vw / 368));
    line-height: 1.6;
  }

  .products_detail_cont .products_detail__txt {
    margin: 0 0 calc(10 * (100vw / 368));
    font-size: calc(8 * (100vw / 368));
    gap: calc(6 * (100vw / 368));
  }

  .products_detail_cont .products_detail__size {
    margin: 0 0 calc(5 * (100vw / 368));
    font-size: calc(9 * (100vw / 368));
  }

  .products_detail_cont .products_detail__price {
    padding-bottom: calc(15 * (100vw / 368));
    font-size: calc(12 * (100vw / 368));
  }

  .products_detail_cont .products_detail__price .txt_tax {
    font-size: calc(8 * (100vw / 368));
  }

  .products_detail_cont .products_detail__sub {
    float: right;
    transform: scale(0.7) translateX(30%);
    margin-top: calc(-15 * (100vw / 368));
    padding: calc(5 * (100vw / 368)) 0 0;
    font-size: calc(8 * (100vw / 368));
    text-align: right;
    white-space: nowrap;
  }

  /* -- products_fragrance_line -- */

  .products_detail_head .products_fragrance_line {
    width: calc(190 * (100vw / 368));
    margin-bottom: 0;
    padding-top:  calc(10 * (100vw / 368));
    padding-left: 0;
  }

  .products_detail_head .products_fragrance_line::before {
    display: none;
  }

  .products_fragrance_line .fragrance_line__ttl {
    display: none;
  }

  .fragrance_line__list {
    display: flex;
    width: auto;
    margin: auto;
    justify-content: center;
    gap: calc(10 * (100vw / 368));
  }

  .fragrance_line__list li {
    margin-bottom: 0;
  }

  .fragrance_line__list .open-modal {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .fragrance_line__list .open-modal .fragrance_name {
    display: none;
  }

  .fragrance_line__list .open-modal img {
    width: calc(20 * (100vw / 368));
    height: calc(20 * (100vw / 368));
  }

  .products_fragrance_line .btn_wrap {
    margin-top: calc(18 * (100vw / 368));
  }

  .products_fragrance_line .btn_wrap .btn_link {
    width: calc(184 * (100vw / 368));
    height: calc(37 * (100vw / 368));
    padding-left: calc(16 * (100vw / 368));
    font-size: calc(10 * (100vw / 368));
    margin: auto;
  }

  /* ---- products_detail_other ---- */

  .products_detail_other {
    height: calc(750 * (100vw / 368));
    padding-top: calc(100 * (100vw / 368));
    background: none;
  }

  .products_detail_other .detail_other__ttl {
    display: none;
  }

  .products_detail_other .detail_other__video {
    width: calc(300 * (100vw / 368));
  }

  .products_detail_other .detail_other__video iframe {
    height: calc(500 * (100vw / 368));
  }

  .products-scroll-indicator {
    position: absolute;
    bottom: calc(-60 * (100vw / 368));
    width: calc(20 * (100vw / 368));
    height: calc(120 * (100vw / 368));
  }

  .products_detail_other .products-scroll-indicator {
    top: calc(-60 * (100vw / 368));
    bottom: auto;
  }

  .modal_products .modal_close {
    top: calc(90 * (100vw / 368));
    right: calc(41* (100vw / 368));
    left: auto;
    width: calc(17 * (100vw / 368));
    max-width: 100%;
    height: calc(17 * (100vw / 368));
    margin-right: 0;
    margin-top: 0;
    transform: none;
  }

  .modal_products .modal_close picture {
    width: 100%;
    height: 100%;
  }


  /* ===================
    　FRAGRANCE LINE
  =================== */

  .fragrance_detail_content {
  }

  /* ---------- Modal Products ---------- */

  .modal_fragrance_detail .modal_inner {
    width: 100%;
    max-height: 100dvh;
    margin-top: calc(157 * (100vw / 368));
    padding-top: 0;
  }

  .modal_fragrance_detail .modal_inner .modal_contents {
    /*height: calc(1160 * (100vw / 368));*/
    width: calc(304 * (100vw / 368));
    margin: auto;
    padding-bottom: calc(30 * (100vw / 368));
  }

  .fragrance_detail_head {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: calc(30 * (100vw / 368));
    /*padding-bottom: calc(120 * (100vw / 368));*/
     padding-bottom: calc(60 * (100vw / 368));
  }

  .fragrance_detail_img {
    width: calc(243 * (100vw / 368));
  }

  .fragrance_detail_cont {
    width: calc(243 * (100vw / 368));
  }

  .fragrance_detail_head .fragrance_name {
    margin-bottom: calc(20 * (100vw / 368));
    padding-top: calc(20 * (100vw / 368));
  }

  .fragrance_detail_head .fragrance_name .fragrance_name__en {
    font-size: calc(14 * (100vw / 368));
  }

  .fragrance_detail_head .fragrance_name .fragrance_name__ja {
    padding-top: calc(7 * (100vw / 368));
    font-size: calc(8 * (100vw / 368));
  }

  .fragrance_detail_head .fragrance_txt {
    font-size: calc(9 * (100vw / 368));
  }

  .fragrance-scroll-indicator {
    bottom: calc(20 * (100vw / 368));
    width: calc(20 * (100vw / 368));
    height: calc(80 * (100vw / 368));
  }

  .modal_fragrance_detail .modal_close {
    top: calc(90 * (100vw / 368));
    right: calc(41* (100vw / 368));
    left: auto;
    width: calc(17 * (100vw / 368));
    max-width: 100%;
    height: calc(17 * (100vw / 368));
    margin-right: 0;
    margin-top: 0;
    transform: none;
  }

  .modal_fragrance_detail .modal_close picture {
    width: 100%;
    height: 100%;
  }

  /* モーダルのクローズボタン */
  .modal_fragrance_detail .modal_close_back {
    top: calc(44 * (100vw / 368));
    right: calc(63 * (100vw / 368));
    width: calc(23 * (100vw / 368));
    height: calc(28 * (100vw / 368));
    transform: none;
    margin: 0;
  }

  .fragrance_detail_other {
    padding: 0 calc(20 * (100vw / 368)) calc(20 * (100vw / 368));
  }



  /* ===================
    　　　FOOTER
  =================== */

  .lp_footer {
    margin-top: calc(50 * (100vw / 368));
    padding: calc(30 * (100vw / 368)) calc(20 * (100vw / 368));
    flex-direction: column;
  }

  .lp_footer__logo {
    width: calc(94 * (100vw / 368));
    padding-bottom: calc(10 * (100vw / 368));
  }

  .lp_footer__copy {
    gap: calc(32 * (100vw / 368));
    flex-direction: column;
    padding-left: 0;
    font-size: calc(9 * (100vw / 368));
    letter-spacing: 0.04em;
  }

  .lp_footer__copy .icn_insta {
    padding-left: 0;
  }

  .lp_footer__copy .icn_insta img {
    width: calc(16 * (100vw / 368));
  }

  .lp_footer__link {
    margin: auto;
    padding: calc(20 * (100vw / 368)) 0 0;
  }

  .lp_footer__link ul {
    gap: calc(18 * (100vw / 368));
  }

  .lp_footer__link .btn_ck {
    width: calc(75 * (100vw / 368));
  }

  .lp_footer__link .btn_bp {
    width: calc(38 * (100vw / 368));
  }

  .lp_footer_page_top {
    top: calc(-60 * (100vw / 368));
    right: calc(20 * (100vw / 368));
    width: calc(36 * (100vw / 368));
  }

  .lp_page_top {
    right: calc(20 * (100vw / 368));
    bottom: calc(30 * (100vw / 368));
    width: calc(36 * (100vw / 368));
  }


}