@charset "UTF-8";

/* --- デフォルトCSS設定 --- */

#Contents .main-area.lp {

  margin-bottom: 0;

}

#Contents .main-area {

  padding-top: 0;

}

.header[data-header-theme="light"].c-active,

.header[data-header-theme="dark"] {

  background: unset;

}

#main-container {

  max-width: 100%;

  min-width: 100%;

  display: flex;

  font-feature-settings: "palt";

  position: relative;

  background: var(--green);

  --black: #000000;

  --white: #ffffff;

  --green: #50918e;

  --gold: #b7a469;

  --blue: #4d7099;

  --moss-green: #639176;

  --grayish-blue: #7f99b5;

  --grayish-winered: #b56f88;

  --ivory: #f7f5eb;

  --font-gothic: source-han-sans-japanese, sans-serif;

  --font-mincho: dnp-shuei-mincho-pr6n, sans-serif;

  --font-credit: acumin-pro, sans-serif;

  --font-r: 400;

  --font-m: 500;

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 480;

  --sp-artboard-width: 750;

  --formula: calc(var(--variable) * var(--ratio));

  --formula_pc: calc(var(--variable) * 1);

  padding-top: var(--banner-height);

  --banner-height: min(50px, calc(50 * (100vw / 1440)));

  --base-margin: calc(30 * var(--formula));

}



@media (min-width: 1401px) {

  #main-container {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: 1px;

  }

}

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

  #main-container {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

  }

}

@media (max-width: 767px) {

  #main-container {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

    --banner-height: calc(50 * (100vw / 375));

  }

}

#main-container * {

  box-sizing: border-box;

}

#main-container img {

  display: block;

  width: 100%;

  height: auto;

}



#main-container h2,

#main-container h3,

#main-container p,

#main-container li {

  margin-block: calc((1em - 1lh) / 2);

}



#main-container .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



#main-container [class*="-img-"]:has(a) {

  background: var(--white);

  display: flex;

  flex-direction: column;

  line-height: 0;

  font-size: 0;

}



/* --- 属性セレクタ設定 --- */



#main-container [class*="__txt"] {

  font-family: var(--font-gothic);

  color: var(--green);

  font-size: calc(24 * var(--formula));

  line-height: 2;

  letter-spacing: 0.05em;

  text-align: center;

  font-weight: var(--font-r);

}



#main-container [class*="__credit"] {

  font-family: var(--font-credit);

  font-size: calc(24 * var(--formula));

  line-height: 1;

  letter-spacing: 0.05em;

  text-align: left;

  font-weight: var(--font-r);

  align-self: flex-end;

  margin: calc(39 * var(--formula)) calc(18 * var(--formula)) 0 0;

}



#main-container [class*="__inner--ttl"] {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

}

#main-container [class*="__ttl-left"]:not([class*="-star"]) {

  background-color: var(--gold);

  height: max(1px, calc(2 * var(--formula)));

  width: calc(120 * var(--formula));

  transform: scaleX(0);

  transform-origin: left center;

}

#main-container [class*="__ttl-right"]:not([class*="-star"]) {

  background-color: var(--gold);

  height: max(1px, calc(2 * var(--formula)));

  width: calc(120 * var(--formula));

  transform: scaleX(0);

  transform-origin: right center;

}



#main-container [class*="point2__formula"] {

  font-family: var(--font-gothic);

  color: var(--green);

  font-size: calc(22 * var(--formula));

  line-height: calc(33 / 22);

  letter-spacing: 0.05em;

  text-align: center;

  font-weight: var(--font-r);

  width: calc(150 * var(--formula));

  height: calc(150 * var(--formula));

  border-radius: 50%;

  border-width: max(1px, calc(2 * var(--formula)));

  border-style: solid;

  border-color: var(--green);

  display: grid;

  place-items: center;

}

#main-container [class*="__ttl-txt"] {

  font-family: var(--font-gothic);

  color: var(--green);

  font-size: calc(24 * var(--formula));

  line-height: 2;

  letter-spacing: 0.05em;

  text-align: center;

  font-weight: var(--font-r);

}



#main-container [class*="__hgroup"] {

  display: flex;

  flex-direction: column;

  align-items: center;

}

#main-container

  [class*="__hgroup"]:where([class*="fragrance"]:not(.fragrance__hgroup)) {

  align-items: flex-start;

  align-self: flex-start;

  gap: calc(51 * var(--formula));

  margin: 0 0 calc(61 * var(--formula)) calc(40 * var(--formula));

}



#main-container

  [class*="__ttl-txt"]:where([class*="fragrance"]:not(.fragrance__ttl-txt)) {

  font-size: calc(26 * var(--formula));

}

#main-container [class*="__open-btn"] {

  display: inline-block;

  width: calc(60 * var(--formula));

  height: calc(60 * var(--formula));

  padding: 0;

  border: none;

  cursor: pointer;

  box-sizing: border-box;

  z-index: 5;

  position: relative;

  justify-self: end;

  align-self: end;

  margin: 0 calc(30 * var(--formula)) calc(30 * var(--formula)) 0;

}

[class*="__open-btn"]::before,

[class*="__open-btn"]::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: #ffffff;

}

[class*="__open-btn"]::before {

  width: calc(60 * var(--formula));

  height: calc(3 * var(--formula));

}



[class*="__open-btn"]::after {

  width: calc(3 * var(--formula));

  height: calc(60 * var(--formula));

}

#main-container [class*="__modal-btn-wrapper"] {

  display: grid;

}



#main-container [class*="__modal-btn-wrapper"] > * {

  grid-area: 1/1;

}

#main-container [class*="__modal-contents"][open] {

  width: calc(710 * var(--formula));

  border: none;

  border-radius: calc(30 * var(--formula));

  background: var(--white);

  display: flex;

  flex-direction: column;

  max-height: calc(100dvh - var(--base-margin) - var(--base-margin));

  overflow: hidden;

  padding-top: calc(91 * var(--formula));

  padding-bottom: calc(50 * var(--formula));

  padding-left: 0;

  padding-right: 0;

  margin: auto;

  animation: modalFadeScaleIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;

  overscroll-behavior: none;

  position: fixed !important;

  inset: 0 !important;

  margin: auto !important;

}

#main-container [class*="__modal-body"] {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  flex-grow: 1;

  overflow-y: auto;

  padding-top: 0;

  padding-bottom: 0;

  padding-left: calc(58 * var(--formula));

  padding-right: calc(58 * var(--formula));

  overscroll-behavior: none;

  padding-bottom: calc(50 * var(--formula));

}

#main-container [class*="__modal-contents"]::backdrop {

  background: color-mix(in srgb, var(--black) 25%, transparent);

  animation: backdropFadeIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;

}

#main-container [class*="__modal-contents"][open].is-closing {

  animation: modalFadeScaleOut 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;

}



#main-container [class*="__modal-contents"][open].is-closing::backdrop {

  animation: backdropFadeOut 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;

}

#main-container [class*="__modal-h4"] {

  font-family: var(--font-mincho);

  color: var(--green);

  font-size: calc(30 * var(--formula));

  line-height: 2;

  letter-spacing: 0.05em;

  text-align: center;

  font-weight: var(--font-m);

}

#main-container [class*="__modal-txt"] {

  font-family: var(--font-gothic);

  font-size: calc(24 * var(--formula));

  line-height: 2;

  letter-spacing: 0.05em;

  text-align: justify;

  font-weight: var(--font-r);

}



#main-container [class*="__close-btn"] {

  display: block;

  width: calc(60 * var(--formula));

  height: calc(60 * var(--formula));

  padding: 0;

  border: none;

  background: transparent;

  z-index: 2;

  position: absolute !important;

  top: calc(32 * var(--formula));

  right: calc(30 * var(--formula));

  cursor: pointer;

}

#main-container [class*="__close-btn"]::before,

#main-container [class*="__close-btn"]::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: calc(60 * var(--formula));

  height: calc(3 * var(--formula));



  background-color: #505050;

}



#main-container [class*="__close-btn"]::before {

  transform: translate(-50%, -50%) rotate(45deg);

}

#main-container [class*="__close-btn"]::after {

  transform: translate(-50%, -50%) rotate(-45deg);

}

#main-container [class*="__ttl-under"]:not([class*="-star"]) {

  background-color: var(--gold);

  width: max(1px, calc(2 * var(--formula)));

  height: calc(80 * var(--formula));

  transform: scaleY(0);

  transform-origin: center top;

}

#main-container [class*="__modal-h4"] {

  font-family: var(--font-mincho);

  color: var(--green);

  font-size: calc(30 * var(--formula));

  line-height: 2;

  letter-spacing: 0.05em;

  text-align: center;

  font-weight: var(--font-m);

  margin: calc(47 * var(--formula)) 0 calc(43 * var(--formula)) 0;

}



#main-container [class*="__modal-body"]::-webkit-scrollbar {

  display: none;

}



/* --- 固有クラス設定 --- */

html {

  scrollbar-gutter: stable;

}

body.is-modal-open {

  overflow: hidden;

}

#main-container .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

}



/* --- 抽出されたCSS（上から順） --- */



#main-container .lp-left-area,

#main-container .lp-right-area {

  flex: 1;

  position: sticky;

  top: 0;

  height: 100vh;

  display: grid;

  place-items: center;

}

#main-container .lp-main-area {

  background: var(--ivory);

  width: calc(480 * var(--formula_pc));

  overflow-x: clip;

}

#main-container .lp-pc-01 {

  width: calc(276 * var(--formula_pc));

}



#main-container .mv-sec {

}



#main-container .lp-img-01 {

  width: calc(750 * var(--formula));

}



#main-container .teaser-sec {

}



#main-container .lp-txt-01 {

  width: calc(704 * var(--formula));

  margin: calc(51 * var(--formula)) 0 calc(40 * var(--formula)) 0;

}



#main-container .teaser__h4 {

  font-family: var(--font-mincho);

  color: var(--green);

  font-size: calc(36 * var(--formula));

  line-height: calc(72 / 36);

  letter-spacing: 0.05em;

  text-align: center;

  font-weight: var(--font-m);

  margin: 0 0 calc(41 * var(--formula)) 0;

}



#main-container .point-sec {

  margin: calc(153 * var(--formula)) 0 0 0;

}



#main-container .point1,

#main-container .point2 {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

}



#main-container .point1__inner--ttl {

  margin: 0 0 calc(70 * var(--formula)) 0;

}



#main-container .lp-obj-01 {

  width: calc(18 * var(--formula));

}



#main-container .point1__ttl-left-star {

  margin: 0 0 0 calc(-34 * var(--formula));

}



#main-container .lp-txt-02 {

  width: calc(366 * var(--formula));

  position: relative;

  top: calc(5 * var(--formula));

}



#main-container .point1__ttl-right-star {

  margin: 0 calc(-34 * var(--formula)) 0 0;

}



#main-container .point2 {

  margin: calc(119 * var(--formula)) 0 0 0;

}



#main-container .point2__ttl-left-star {

  margin: 0 0 0 calc(-21 * var(--formula));

}



#main-container .lp-txt-03 {

  width: calc(395 * var(--formula));

  position: relative;

  top: calc(6 * var(--formula));

}



#main-container .point2__ttl-right-star {

  margin: 0 calc(-21 * var(--formula)) 0 0;

}



#main-container .point2__inner--grid {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  margin: calc(66 * var(--formula)) 0 0 0;

  grid-column-gap: calc(60 * var(--formula));

}

#main-container .point2__formula1,

#main-container .point2__formula2,

#main-container .point2__formula3 {

  grid-column: span 2;

}

#main-container .point2__formula4 {

  grid-column: 2 / span 2;

}

#main-container .point2__formula5 {

  grid-column: 4 / span 2;

}



#main-container .point2__formula3 {

  line-height: calc(27.5 / 22);

}



#main-container .fragrance-sec {

  margin: calc(300 * var(--formula)) 0 calc(281 * var(--formula)) 0;

}



#main-container .fragrance__hgroup,

#main-container .bodycare__hgroup {

  position: relative;

}

#main-container .fragrance__hgroup::before,

#main-container .bodycare__hgroup:before {

  content: "";

  position: absolute;

  width: calc(1000 * var(--formula));

  height: calc(1000 * var(--formula));

  background-image: url(../img/lp-obj-02.svg);

  background-size: cover;

  background-repeat: no-repeat;

  top: calc(-160 * var(--formula));

  overflow-x: clip;

}

#main-container .lp-txt-04 {

  width: calc(408 * var(--formula));

}



#main-container .fragrance__ttl-txt {

  padding: calc(39 * var(--formula)) 0 calc(41 * var(--formula)) 0;

}



#main-container .fragrance__ttl-under {

  background-color: var(--gold);

  width: max(1px, calc(2 * var(--formula)));

  height: calc(80 * var(--formula));

}



#main-container .fragrance__ttl-under-star {

  margin: calc(20 * var(--formula)) 0 0 0;

}



#main-container .fragrance1 {

  margin: calc(70 * var(--formula)) 0 calc(212 * var(--formula)) 0;

}



#main-container .lp-txt-05 {

  width: calc(417 * var(--formula));

  margin: 0 0 0 calc(4 * var(--formula));

}



#main-container .fragrance1__ttl-txt {

  color: var(--blue);

}



#main-container .lp-img-02 {

  width: calc(710 * var(--formula));

}



#main-container .fragrance1__credit {

  color: var(--blue);

}



#main-container .lp-txt-06 {

  width: calc(440 * var(--formula));

}



#main-container .fragrance2__ttl-txt {

  color: var(--moss-green);

}



#main-container .lp-img-03 {

  width: calc(710 * var(--formula));

}



#main-container .fragrance2__credit {

  color: var(--moss-green);

}



#main-container .fragrance3 {

  margin: calc(212 * var(--formula)) 0 calc(212 * var(--formula)) 0;

}



#main-container .lp-txt-07 {

  width: calc(607 * var(--formula));

}



#main-container .fragrance3__ttl-txt {

  color: var(--grayish-blue);

}



#main-container .lp-img-04 {

  width: calc(710 * var(--formula));

}



#main-container .fragrance3__credit {

  color: var(--grayish-blue);

}



#main-container .fragrance4__hgroup {

  margin: 0 0 calc(60 * var(--formula)) calc(40 * var(--formula));

}



#main-container .lp-txt-08 {

  width: calc(490 * var(--formula));

  margin: 0 0 0 calc(4 * var(--formula));

}



#main-container .fragrance4__ttl-txt {

  color: var(--grayish-winered);

}



#main-container .lp-img-05 {

  width: calc(710 * var(--formula));

}



#main-container .fragrance4__credit {

  color: var(--grayish-winered);

}



#main-container .lp-txt-09 {

  width: calc(377 * var(--formula));

}



#main-container .bodycare__ttl-txt {

  padding: calc(49 * var(--formula)) 0 0 0;

}



#main-container .bodycare__ttl-under {

  margin: calc(41 * var(--formula)) 0 0 0;

}



#main-container .bodycare__ttl-under-star {

  margin: calc(20 * var(--formula)) 0 0 0;

}



#main-container .lp-txt-10 {

  width: calc(736 * var(--formula));

  margin: calc(72 * var(--formula)) 0 calc(56 * var(--formula)) 0;

}



#main-container .splide {

  width: calc(750 * var(--formula));

}



#main-container .splide__slide a {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: calc(47 * var(--formula));

}



#main-container .bodycare__lineup {

  width: calc(250 * var(--formula));

}

#main-container .lp-footer-sec {

  margin: calc(131 * var(--formula)) 0 calc(61 * var(--formula)) 0;

}



#main-container .lp-txt-15 {

  width: calc(400 * var(--formula));

}

#main-container .lp-txt-16 {

  width: calc(529 * var(--formula));

  margin: calc(151 * var(--formula)) 0 0 0;

}

#main-container .lp-txt-17 {

  width: calc(149 * var(--formula));

}

#main-container .lp-txt-18 {

  width: calc(156 * var(--formula));

}

#main-container .lp-txt-19 {

  width: calc(193 * var(--formula));

}

#main-container .lp-txt-20 {

  width: calc(175 * var(--formula));

}

#main-container .lp-pc-02 {

  width: calc(250 * var(--formula_pc));

}



#main-container #fragrance1-modal {

  padding-top: calc(93 * var(--formula));

}



#main-container .lp-modal-01 {

  width: calc(287 * var(--formula));

}



#main-container #fragrance1-modal-title {

  margin: calc(52 * var(--formula)) 0 calc(43 * var(--formula)) 0;

}

#main-container .fragrance1__modal-h4,

#main-container .fragrance1__modal-txt {

  color: var(--blue);

}



#main-container #fragrance2-modal {

  padding-top: calc(98 * var(--formula));

}



#main-container .lp-modal-02 {

  width: calc(461 * var(--formula));

}



#main-container .fragrance2__modal-h4,

#main-container .fragrance2__modal-txt {

  color: var(--moss-green);

}



#main-container #fragrance3-modal {

  padding-top: calc(102 * var(--formula));

}



#main-container .lp-modal-03 {

  width: calc(435 * var(--formula));

}

#main-container .fragrance3__modal-h4,

#main-container .fragrance3__modal-txt {

  color: var(--grayish-blue);

}



#main-container #fragrance4-modal {

  padding-top: calc(100 * var(--formula));

}



#main-container .lp-modal-04 {

  width: calc(461 * var(--formula));

}



#main-container #fragrance4-modal-title {

  margin: calc(47 * var(--formula)) 0 calc(43 * var(--formula)) 0;

}



#main-container .fragrance4__modal-h4,

#main-container .fragrance4__modal-txt {

  color: var(--grayish-winered);

}

@media (max-width: 767px) {

  #main-container {

    padding-top: var(--banner-height);

  }

  #main-container .lp-left-area,

  #main-container .lp-right-area {

    display: none;

  }

  #main-container .lp-main-area {

    width: 100%;

  }

}



/* デバッグ用 */

/* #main-container [class*="__modal-contents"][open] {

  position: fixed !important;

  top: 50% !important;

  left: 50% !important;

  transform: translate(-50%, -50%) !important;

  z-index: 9999 !important;

  margin: 0 !important;

} */



/* 

////////////////////////////////////////////

animation

////////////////////////////////////////////

*/

#main-container [class*="__ttl-left"]:not([class*="-star"]),

#main-container [class*="__ttl-right"]:not([class*="-star"]),

#main-container [class*="__ttl-under"]:not([class*="-star"]) {

  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);

  backface-visibility: hidden;

  transform-style: preserve-3d;

  will-change: transform;

}

#main-container .is-visible [class*="__ttl-left"],

#main-container .is-visible [class*="__ttl-right"] {

  transform: scaleX(1);

}

#main-container .is-visible [class*="__ttl-under"] {

  transform: scaleY(1);

}

#main-container [class*="__ttl-left-star"],

#main-container [class*="__ttl-right-star"] {

  transform: rotate(0deg);

  opacity: 0;

  transition:

    opacity 0.3s,

    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);

  transition-delay: 0.5s;

}

#main-container .is-visible [class*="__ttl-left-star"],

#main-container .is-visible [class*="__ttl-right-star"] {

  transform: rotate(360deg);

  opacity: 1;

}

#main-container [class*="__ttl-under-star"] {

  opacity: 0;

  transform: translateY(calc(-80 * var(--formula))) rotate(0deg);

  transition:

    opacity 0.3s,

    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);

}

#main-container .is-visible [class*="__ttl-under-star"] {

  transform: translateY(0) rotate(720deg);

  opacity: 1;

}

#main-container .fade-in {

  opacity: 0;

  transition: opacity 2s ease-out;

}

#main-container .is-visible.fade-in,

#main-container .is-visible .fade-in {

  opacity: 1;

}

@keyframes modalFadeScaleIn {

  0% {

    opacity: 0;

    transform: scale(0.8);

  }

  100% {

    opacity: 1;

    transform: scale(1);

  }

}

@keyframes backdropFadeIn {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



@keyframes modalFadeScaleOut {

  0% {

    opacity: 1;

    transform: scale(1);

  }

  100% {

    opacity: 0;

    transform: scale(0.8);

  }

}

@keyframes backdropFadeOut {

  0% {

    opacity: 1;

  }

  100% {

    opacity: 0;

  }

}