@charset "UTF-8";

/* ========================================================
                      * Variable *
========================================================= */
:root {
  --pw: 1400; /* PC幅 */
  --sw: 750; /* SP幅 */
  --artboard-pw: 490; /* PCアートボード幅 */
  --artboard-sw: 750; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);

  --lp-background-color: #bbd9f2;
  --base-font-color: #3c342c;
  --color-accent: #fff9b1;

  --lp-font-ja: "canada-type-gibson", "Noto Sans JP", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: "canada-type-gibson", sans-serif; /*medium 500, bold 700*/

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --icon-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='25' viewBox='-0.5 -0.5 16.46 26.37' preserveAspectRatio='none'><path d='M2.87 25.37L0 22.59l9.89-10.22L.61 2.78L3.48 0l11.98 12.37z' fill='%23000'/></svg>");
  --icon-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='15' viewBox='-0.5 -0.5 26.37 16.46' preserveAspectRatio='none'><path d='M13 15.46L0 2.87L2.78 0L13 9.89L22.59.61l2.78 2.87z' fill='%23000'/></svg>");
}

@media (768px <= width) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}
@media (1400px <= width) {
  :root {
    --variable: 1px;
  }
}
@media (width < 768px) {
  :root {
    --ratio: 1;
    --variable: calc(100vw / var(--sw));
  }
}

/* ========================================================
                      * Layout style *
========================================================= */
/* html {
  scroll-behavior: smooth;
  font-size: 62.5%
}
main {
  max-width: 100%;
} */

@media (768px <= width) {
  #Wrap,
  .wrapBottom,
  .wrapTop,
  #Contents {
    width: 100%;
  }
}
#FooterWrap {
  position: relative;
}



/* ===================
  LP Contents
=================== */
.lp_contents {
  --letter-spacing: .06em;
  position: relative;
  background: var(--lp-background-color, transparent);
  color: var(--base-font-color, #000);
  font-family: var(--lp-font-ja);
  font-optical-sizing: auto;
  font-weight: var(--font-medium);
  font-size: calc(30 * var(--rem));
  font-style: normal;
  letter-spacing: var(--letter-spacing);
  /* & * {
    font-feature-settings: "palt";
  } */
  & *,
  & *:before,
  & *:after {
    box-sizing: border-box;
  }
  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }
  & ul,
  & li {
    list-style: none;
  }
  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }
  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }
  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition:
      opacity var(--duration) var(--timing),
      color var(--duration) var(--timing),
      background-color var(--duration) var(--timing),
      background-image var(--duration) var(--timing),
      border-color var(--duration) var(--timing),
      text-shadow var(--duration) var(--timing),
      text-weight var(--duration) var(--timing)
    ;
  }
  & :where(a) {
    color: inherit;
    text-decoration: none;
    text-underline-offset: calc(4 * var(--rem));
    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
    @media (width < 768px) {
      &:hover {
        opacity: 1;
      }
    }
  }
  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  & em {
    font-style: normal;
  }
}



/* ===================
  Animation
=================== */
.fade {
  opacity: 0;
  transition: opacity 1.8s var(--transition-timing);
  &.is-active {
    opacity: 1;
  }
  &.--delay {
    transition-duration: 2s;
    transition-delay: .2s;
  }
}

.fade-up {
  --transition-timing: cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
  translate: 0 calc(40 * var(--rem));
  transition:
    opacity 1s var(--transition-timing),
    translate 1s var(--transition-timing);
  will-change: opacity, translate;
  &.is-active {
    opacity: 1;
    translate: 0 0;
  }
}

.js-pop-in {
  opacity: 0;
}



/* ===================
  Layout
=================== */
.layout-mobile-first {
  position: relative;
  @media (768px <= width) {
    display: flex;
  }
}
.layout-mobile-first__left,
.layout-mobile-first__right {
  position: relative;
  width: calc((100% - (var(--artboard-pw) * var(--rem-pc))) / 2);
}
.layout-mobile-first__sticky {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.layout-mobile-first__main {
  overflow-x: clip;
  @media (768px <= width) {
    width: calc(var(--artboard-pw) * var(--rem-pc));
  }
}


/* ===================
  Utility
=================== */


/* ===================
  Component
=================== */
/* button */
.component-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(17 * var(--rem));
  width: calc(302 * var(--rem));
  height: calc(66 * var(--rem));
  margin-inline: auto;
  border: 1px solid currentColor;
  border-radius: calc(999 * var(--rem));
  text-align: center;
  &::after {
    content: "";
    display: block;
    width: calc(15 * var(--rem));
    height: calc(25 * var(--rem));
    background: currentColor;
    mask: var(--icon-arrow-right) no-repeat top left/100% 100%;
  }
}
.component-button__text {
  margin-bottom: calc(4 * var(--rem));
  font-size: calc(30 * var(--rem));
}

.component-button--secondary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(250 * var(--rem-pc));
  height: calc(30 * var(--rem-pc));
  margin-inline: auto;
  background: var(--color-accent);
  border-radius: calc(999 * var(--rem));
  font-size: calc(20 * var(--rem-pc));
  text-align: center;
  &::after {
    position: absolute;
    top: 50%;
    right: calc(19 * var(--rem-pc));
    translate: 0 -50%;
    content: "";
    display: block;
    width: calc(14 * var(--rem-pc));
    height: calc(8 * var(--rem-pc));
    background: currentColor;
    mask: var(--icon-arrow-down) no-repeat top left/100% 100%;
  }
}

/* viewmore */
.component-viewmore {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(19 * var(--rem));
  width: calc(282 * var(--rem));
  height: calc(66 * var(--rem));
  margin-inline: auto;
  border: 1px solid currentColor;
  border-radius: calc(999 * var(--rem));
  text-align: center;
  &.is-open {
    width: calc(206 * var(--rem));
  }
}
.component-viewmore__text {
  margin-bottom: calc(4 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(30 * var(--rem));
}
.component-viewmore__icon {
  position: relative;
  display: block;
  width: calc(24 * var(--rem));
  height: calc(24 * var(--rem));
  &::before,
  &::after {
    position: absolute;
    content: "";
    display: block;
    background: currentColor;
  }
  &::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: calc(4 * var(--rem));
    translate: 0 -50%;
  }
  &::after {
    top: 0;
    left: 50%;
    width: calc(4 * var(--rem));
    height: 100%;
    translate: -50% 0;
  }
  .component-viewmore.is-open & {
    &::after {
      opacity: 0;
    }
  }
}



/* ===================
  Accordion
=================== */
.js-accordion--body {
  max-height: var(--max-height, calc(300 * var(--rem)));
  overflow: hidden;
  transition: max-height .6s ease-in-out;
  will-change: max-height;
  transform: translate3d(0,0,0);
  &.--mask {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    &.is-open {
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    }
  }
}



/* ===================
  teaser
=================== */
/* .teaser-mainvisual__image {
  width: 100%;
} */


/**
 * project-top
 */
.project-top {
  position: relative;
  background: #bbd9f2;
}


/**
 * project-mainvisual
 */
.project-mainvisual__image {
  width: 100%;
}


/**
 * section-intro
 */
.section-intro {
  position: relative;
  padding-top: calc(106 * var(--rem));
  .component-viewmore {
    margin-top: calc(45 * var(--rem));
  }
  .component-star {
    &.--1 {
      top: calc(33 * var(--rem));
      left: calc(413 * var(--rem));
    }
    &.--2 {
      top: calc(172 * var(--rem));
      left: calc(118 * var(--rem));
    }
    &.--3 {
      top: calc(242 * var(--rem));
      left: calc(625 * var(--rem));
    }
    &.--4 {
      bottom: calc(1176 * var(--rem));
      left: calc(682 * var(--rem));
    }
    &.--5 {
      bottom: calc(1115 * var(--rem));
      left: calc(56 * var(--rem));
    }
    &.--6 {
      bottom: calc(1046 * var(--rem));
      left: calc(583 * var(--rem));
    }
    &.--7 {
      bottom: calc(810 * var(--rem));
      left: calc(226 * var(--rem));
    }
    &.--8 {
      bottom: calc(753 * var(--rem));
      left: calc(513 * var(--rem));
    }
    &.--9 {
      bottom: calc(715 * var(--rem));
      left: calc(109 * var(--rem));
    }
    &.--10 {
      bottom: calc(659 * var(--rem));
      left: calc(585 * var(--rem));
    }
    &.--11 {
      bottom: calc(637 * var(--rem));
      left: calc(158 * var(--rem));
    }
    &.--12 {
      bottom: calc(258 * var(--rem));
      left: calc(260 * var(--rem));
    }
    &.--13 {
      bottom: calc(201 * var(--rem));
      left: calc(451 * var(--rem));
    }
  }
}
.section-intro__heading {
  margin-bottom: calc(37 * var(--rem));
  font-size: calc(48 * var(--rem));
  line-height: calc(72 / 48);
  text-align: center;
}
.section-intro__body {
  --max-height: calc(179 * var(--rem));
}
.section-intro__body-text {
  font-size: calc(30 * var(--rem));
  line-height: calc(60 / 30);
  text-align: center;
  & + & {
    margin-top: calc(60 * var(--rem));
  }
}
.section-intro__logo {
  width: calc(310 * var(--rem));
  margin-top: calc(120 * var(--rem));
  margin-inline: auto;
}


/**
 * schedule-block
 */
.schedule-block {
  position: relative;
  margin-top: calc(334 * var(--rem));
  &::before {
    content: '';
    position: absolute;
    top: calc(-214 * var(--rem));
    left: 50%;
    z-index: 1;
    width: calc(160 * var(--rem));
    height: calc(238 * var(--rem));
    margin-left: calc(4 * var(--rem));
    background: url(../img/character_1.png) no-repeat center/contain;
    translate: -50% 0;
  }
}
.schedule-box {
  width: calc(650 * var(--rem));
  margin-inline: auto;
  padding-top: calc(40 * var(--rem));
  padding-bottom: calc(26 * var(--rem));
  background: #f9f8f5;
  border-radius: calc(30 * var(--rem));
  & + & {
    margin-top: calc(10 * var(--rem));
  }
}
.schedule-box--row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(41 * var(--rem));
  height: calc(98 * var(--rem));
  padding-top: calc(28 * var(--rem));
  .schedule-box__detail {
    margin-top: 0;
  }
}
.schedule-box__label {
  font-size: calc(30 * var(--rem));
  line-height: 1;
  text-align: center;
}
.schedule-box__detail {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(20 * var(--rem));
  font-size: calc(26 * var(--rem));
  line-height: 1;
  text-align: center;
  .--large {
    margin-top: calc(-12 * var(--rem));
    font-size: calc(52 * var(--rem));
    vertical-align: sub;
  }
}


/**
 * project-anchor
 */
.project-anchor {
  display: flex;
  gap: calc(2 * var(--rem));
  margin-top: calc(160 * var(--rem));
}
.project-anchor__item {
  width: 100%;
}
.project-anchor__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(160 * var(--rem));
  padding-bottom: calc(4 * var(--rem));
  background: var(--color-accent);
}
.project-anchor__label {
  font-size: calc(34 * var(--rem));
}
.project-anchor__icon {
  width: calc(27 * var(--rem));
  height: calc(17 * var(--rem));
  margin-top: calc(6 * var(--rem));
  margin-left: calc(16 * var(--rem));
  background: currentColor;
  mask: var(--icon-arrow-down) no-repeat top left/100% 100%;
  &.--down {
    width: calc(17 * var(--rem));
    height: calc(27 * var(--rem));
    margin-top: 0;
    mask: var(--icon-arrow-right) no-repeat top left/100% 100%;
  }
}


/**
 * project-section
 */
.project-section {
  position: relative;
  padding-top: calc(162 * var(--rem));
}
.project-section__head {
  position: relative;
  z-index: 5;
}
.project-section__heading {
  width: 100%;
}
.project-section__body {
  background: #deedfa;
}


.section-beauty {
  > .component-star {
    &.--1 {
      top: calc(43 * var(--rem));
      left: calc(80 * var(--rem));
    }
    &.--2 {
      top: calc(103 * var(--rem));
      left: calc(647 * var(--rem));
    }
    &.--3 {
      top: calc(163 * var(--rem));
      left: calc(592 * var(--rem));
    }
  }
}
.section-home {
  > .component-star {
    &.--1 {
      top: calc(35 * var(--rem));
      left: calc(454 * var(--rem));
    }
    &.--2 {
      top: calc(138 * var(--rem));
      left: calc(154 * var(--rem));
    }
    &.--3 {
      top: calc(188 * var(--rem));
      left: calc(602 * var(--rem));
    }
  }
}


.component-star {
  position: absolute;
  z-index: 1;
  background: var(--bg) no-repeat center/contain;
  pointer-events: none;
}
.component-star--1 {
  --bg: url(../img/star_1.png);
  width: calc(78 * var(--rem));
  height: calc(71 * var(--rem));
  &.--small {
    width: calc(38 * var(--rem));
    height: calc(34 * var(--rem));
  }
  &.--pc {
    width: calc(24 * var(--rem-pc));
    height: calc(22 * var(--rem-pc));
  }
}
.component-star--2 {
  --bg: url(../img/star_2.png);
  width: calc(66 * var(--rem));
  height: calc(76 * var(--rem));
  &.--small {
    width: calc(32 * var(--rem));
    height: calc(37 * var(--rem));
  }
  &.--pc {
    width: calc(22 * var(--rem-pc));
    height: calc(25 * var(--rem-pc));
  }
}
.component-star--3 {
  --bg: url(../img/star_3.png);
  width: calc(72 * var(--rem));
  height: calc(69 * var(--rem));
  &.--small {
    width: calc(35 * var(--rem));
    height: calc(33 * var(--rem));
  }
  &.--pc {
    width: calc(22 * var(--rem-pc));
    height: calc(21 * var(--rem-pc));
  }
}
.component-star--4 {
  --bg: url(../img/star_4.png);
  width: calc(74 * var(--rem));
  height: calc(72 * var(--rem));
  &.--small {
    width: calc(36 * var(--rem));
    height: calc(35 * var(--rem));
  }
  &.--pc {
    width: calc(24 * var(--rem-pc));
    height: calc(23 * var(--rem-pc));
  }
}
.component-star--5 {
  --bg: url(../img/star_5.png);
  width: calc(74 * var(--rem));
  height: calc(67 * var(--rem));
  &.--small {
    width: calc(36 * var(--rem));
    height: calc(33 * var(--rem));
  }
}
.component-star--6 {
  --bg: url(../img/star_6.png);
  width: calc(77 * var(--rem));
  height: calc(74 * var(--rem));
  &.--small {
    width: calc(37 * var(--rem));
    height: calc(36 * var(--rem));
  }
  &.--pc {
    width: calc(24 * var(--rem-pc));
    height: calc(23 * var(--rem-pc));
  }
}
.component-star--7 {
  --bg: url(../img/star_7.png);
  width: calc(66 * var(--rem));
  height: calc(73 * var(--rem));
  &.--small {
    width: calc(32 * var(--rem));
    height: calc(35 * var(--rem));
  }
}
.component-star--8 {
  --bg: url(../img/star_8.png);
  width: calc(73 * var(--rem));
  height: calc(72 * var(--rem));
}
.component-star--9 {
  --bg: url(../img/star_9.png);
  /* width: calc(73 * var(--rem)); */
  /* height: calc(72 * var(--rem)); */
  &.--small {
    width: calc(33 * var(--rem));
    height: calc(31 * var(--rem));
  }
  &.--pc {
    width: calc(22 * var(--rem-pc));
    height: calc(21 * var(--rem-pc));
  }
}
.twinkle {
  animation: 5s star 0s steps(1, start) infinite;
  will-change: transform;
}
@keyframes star {
  0% {
      transform: rotate(0)
  }
  10% {
      transform: rotate(-5deg)
  }
  20% {
      transform: rotate(5deg)
  }
  30% {
      transform: rotate(-5deg)
  }
  40% {
      transform: rotate(5deg)
  }
  50% {
      transform: rotate(0)
  }
  100% {
      transform: rotate(0)
  }
}

.component-deco {
  position: absolute;
  background: var(--src) no-repeat center/contain;
}


/**
 * item-block
 */
.item-block__item {
  position: relative;
  padding-top: calc(146 * var(--rem));
}
.item-block__item-heading__container {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: calc(98 * var(--rem));
  font-family: var(--lp-font-en);
  text-align: center;
}
.item-block__item-heading {
  font-size: calc(74 * var(--rem));
  line-height: 1;
  letter-spacing: .053em;
}
.item-block__item-heading__sub {
  margin-top: calc(17 * var(--rem));
  font-size: calc(30 * var(--rem));
  line-height: 1;
}
.item-block__item-box {
  position: relative;
  & + & {
    margin-top: calc(160 * var(--rem));
  }
  > a {
    position: relative;
    display: block;
  }
}
.item-block__item-visual {
  position: relative;
  .deco-image {
    position: absolute;
    z-index: 5;
    pointer-events: none;
  }
}
.item-block__item-visual__image {
  margin-inline: auto;
}
.item-block__item-image {
  margin-inline: auto;
}
.item-block__item-box__body {
  margin-top: calc(85 * var(--rem));
  text-align: center;
}
.item-block__item-text {
  font-size: calc(30 * var(--rem));
  line-height: calc(60 / 30);
}
.item-block__item-name {
  margin-top: calc(30 * var(--rem));
  font-size: calc(26 * var(--rem));
  line-height: calc(52 / 26);
  .price,
  .adjust {
    margin-left: calc(14 * var(--rem));
    margin-right: calc(-14 * var(--rem));
  }
}
.item-block__item-button {
  margin-top: calc(49 * var(--rem));
}

/* LIP CREAM */
.item-block__item--lip-cream {
  padding-top: calc(196 * var(--rem));
  .component-star {
    &.--1 {
      top: calc(75 * var(--rem));
      left: calc(250 * var(--rem));
    }
    &.--2 {
      top: calc(361 * var(--rem));
      right: calc(50 * var(--rem));
    }
    &.--3 {
      top: calc(1933 * var(--rem));
      left: calc(528 * var(--rem));
    }
    &.--4 {
      top: calc(2007 * var(--rem));
      left: calc(626 * var(--rem));
    }
    &.--5 {
      top: calc(2538 * var(--rem));
      left: calc(50 * var(--rem));
    }
  }
  .item-block__item-heading__container {
    margin-left: auto;
    margin-right: calc(46 * var(--rem));
    margin-bottom: calc(169 * var(--rem));
  }
  .item-block__item-visual__image {
    width: calc(510 * var(--rem));
    &.--1 {
      margin-left: auto;
      margin-right: calc(30 * var(--rem));
    }
    &.--2 {
      margin-right: auto;
      margin-left: calc(30 * var(--rem));
    }
    & + & {
      margin-top: calc(30 * var(--rem));
    }
  }
  .deco-image {
    &.--1 {
      top: calc(-326 * var(--rem));
      left: 0;
      width: calc(430 * var(--rem));
    }
    &.--2 {
      bottom: calc(-264 * var(--rem));
      right: calc(-20 * var(--rem));
      width: calc(460 * var(--rem));
    }
  }
  .item-block__item-image {
    width: calc(400 * var(--rem));
    margin-top: calc(130 * var(--rem));
    margin-left: calc(30 * var(--rem));
  }
}

/* POUCH */
.item-block__item--pouch {
  .component-star {
    &.--1 {
      top: calc(159 * var(--rem));
      left: calc(628 * var(--rem));
    }
    &.--2 {
      top: calc(249 * var(--rem));
      left: calc(563 * var(--rem));
    }
    &.--3 {
      top: calc(1252 * var(--rem));
      left: calc(50 * var(--rem));
    }
    &.--4 {
      top: calc(1827 * var(--rem));
      left: calc(557 * var(--rem));
    }
    &.--5 {
      top: calc(1895 * var(--rem));
      left: calc(634 * var(--rem));
    }
    &.--6 {
      top: calc(2539 * var(--rem));
      left: calc(50 * var(--rem));
    }
  }
  .component-deco {
    &.--1 {
      --src: url(../img/beauty/pouch/deco_1.png);
      top: calc(1725 * var(--rem));
      left: calc(49 * var(--rem));
      width: calc(126 * var(--rem));
      height: calc(165 * var(--rem));
    }
  }
  .item-block__item-visual__image {
    width: calc(650 * var(--rem));
  }
  .item-block__item-box {
    &.--1 {
      margin-top: calc(-80 * var(--rem));
      .item-block__item-box__body {
        margin-top: calc(54 * var(--rem));
      }
    }
    &.--2 {
      margin-top: calc(110 * var(--rem));
      .item-block__item-box__body {
        margin-top: calc(49 * var(--rem));
      }
    }
  }
  .item-block__item-image {
    &.--1 {
      width: calc(537 * var(--rem));
    }
    &.--2 {
      width: calc(498 * var(--rem));
    }
  }
}

/* HAIR OIL */
.item-block__item--hair-oil {
  padding-top: calc(303 * var(--rem));
  .component-star {
    &.--1 {
      top: calc(185 * var(--rem));
      left: calc(442 * var(--rem));
    }
    &.--2 {
      top: calc(1202 * var(--rem));
      left: calc(220 * var(--rem));
    }
    &.--3 {
      top: calc(1264 * var(--rem));
      left: calc(300 * var(--rem));
    }
  }
  .component-deco {
    &.--1 {
      --src: url(../img/beauty/hair_oil/deco_1.png);
      top: calc(160 * var(--rem));
      right: 0;
      width: calc(280 * var(--rem));
      height: calc(317 * var(--rem));
    }
  }
  .item-block__item-heading__container {
    margin-left: calc(50 * var(--rem));
    margin-right: auto;
    margin-bottom: calc(99 * var(--rem));
  }
  .item-block__item-visual__image {
    width: calc(570 * var(--rem));
    margin-left: calc(50 * var(--rem));
    margin-right: auto;
  }
  .item-block__item-box {
    &.--1 {
      margin-top: calc(-202 * var(--rem));
      .item-block__item-box__body {
        margin-top: calc(76 * var(--rem));
      }
      .item-block__item-text {
        margin-left: calc(16 * var(--rem));
      }
    }
  }
  .item-block__item-image {
    &.--1 {
      width: calc(305 * var(--rem));
      margin-left: auto;
      margin-right: calc(30 * var(--rem));
    }
  }
}

/* CONCEALER */
.item-block__item--concealer {
  padding-top: calc(302 * var(--rem));
  .component-star {
    &.--1 {
      top: calc(107 * var(--rem));
      left: calc(220 * var(--rem));
    }
    &.--2 {
      top: calc(420 * var(--rem));
      left: calc(594 * var(--rem));
    }
    &.--3 {
      top: calc(1434 * var(--rem));
      left: calc(110 * var(--rem));
    }
    &.--4 {
      top: calc(1514 * var(--rem));
      left: calc(50 * var(--rem));
    }
    &.--5 {
      top: calc(1703 * var(--rem));
      left: calc(627 * var(--rem));
    }
  }
  .component-deco {
    &.--1 {
      --src: url(../img/beauty/concealer/deco_1.png);
      top: calc(160 * var(--rem));
      left: calc(50 * var(--rem));
      width: calc(180 * var(--rem));
      height: calc(334 * var(--rem));
    }
  }
  .item-block__item-heading__container {
    margin-left: auto;
    margin-right: calc(46 * var(--rem));
    margin-bottom: calc(101 * var(--rem));
  }
  .item-block__item-visual__image {
    width: calc(650 * var(--rem));
  }
  .item-block__item-box {
    &.--1 {
      margin-top: calc(-90 * var(--rem));
      .item-block__item-box__body {
        margin-top: calc(74 * var(--rem));
      }
    }
  }
  .item-block__item-image {
    &.--1 {
      width: calc(518 * var(--rem));
    }
  }
}

/* BRUSH */
.item-block__item--brush {
  padding-top: calc(246 * var(--rem));
  .component-star {
    &.--1 {
      top: calc(95 * var(--rem));
      left: calc(410 * var(--rem));
    }
    &.--2 {
      top: calc(675 * var(--rem));
      left: calc(120 * var(--rem));
    }
    &.--3 {
      top: calc(785 * var(--rem));
      left: calc(50 * var(--rem));
    }
  }
  .component-deco {
    &.--1 {
      --src: url(../img/beauty/brush/deco_1.png);
      top: calc(397 * var(--rem));
      left: calc(210 * var(--rem));
      width: calc(190 * var(--rem));
      height: calc(335 * var(--rem));
    }
  }
  .item-block__item-heading__container {
    margin-left: calc(50 * var(--rem));
    margin-right: auto;
    margin-bottom: 0;
  }
  .item-block__item-box {
    &.--1 {
      margin-top: calc(-208 * var(--rem));
      .item-block__item-box__body {
        margin-top: calc(82 * var(--rem));
      }
    }
  }
  .item-block__item-image {
    &.--1 {
      width: calc(231 * var(--rem));
      margin-left: auto;
      margin-right: calc(49 * var(--rem));
    }
  }
}

/* BODY SCRUB */
.item-block__item--body-scrub {
  .component-star {
    &.--1 {
      top: calc(30 * var(--rem));
      left: calc(607 * var(--rem));
    }
    &.--2 {
      top: calc(640 * var(--rem));
      left: calc(70 * var(--rem));
    }
    &.--3 {
      top: calc(720 * var(--rem));
      left: calc(129 * var(--rem));
    }
    &.--4 {
      top: calc(1244 * var(--rem));
      left: calc(602 * var(--rem));
    }
  }
  .item-block__item-heading__container {
    margin-bottom: calc(48 * var(--rem));
  }
  .item-block__item-image {
    &.--1 {
      width: calc(720 * var(--rem));
      margin-right: 0;
    }
  }
}

/* SHEET MASK SET */
.item-block__item--sheet-mask-set {
  padding-top: calc(147 * var(--rem));
  .component-star {
    &.--1 {
      top: calc(251 * var(--rem));
      left: calc(110 * var(--rem));
    }
    &.--2 {
      top: calc(1281 * var(--rem));
      left: calc(623 * var(--rem));
    }
    &.--3 {
      top: calc(1711 * var(--rem));
      left: calc(50 * var(--rem));
    }
    &.--4 {
      top: calc(1801 * var(--rem));
      left: calc(100 * var(--rem));
    }
  }
  .item-block__item-visual__image {
    width: calc(650 * var(--rem));
  }
  .item-block__item-box {
    &.--1 {
      margin-top: calc(-80 * var(--rem));
      .item-block__item-box__body {
        margin-top: calc(84 * var(--rem));
      }
    }
  }
  .item-block__item-image {
    &.--1 {
      width: calc(680 * var(--rem));
      margin-left: calc(50 * var(--rem));
    }
  }
}

/* HAIR CLIP */
.item-block__item--hair-clip {
  .component-star {
    &.--1 {
      top: calc(123 * var(--rem));
      left: calc(50 * var(--rem));
    }
    &.--2 {
      top: calc(253 * var(--rem));
      left: calc(592 * var(--rem));
    }
    &.--3 {
      top: calc(1053 * var(--rem));
      left: calc(230 * var(--rem));
    }
    &.--4 {
      top: calc(1121 * var(--rem));
      left: calc(280 * var(--rem));
    }
    &.--5 {
      top: calc(1415 * var(--rem));
      left: calc(626 * var(--rem));
    }
    &.--6 {
      top: calc(1785 * var(--rem));
      left: calc(70 * var(--rem));
    }
    &.--7 {
      top: calc(2180 * var(--rem));
      left: calc(628 * var(--rem));
    }
  }
  .item-block__item-visual__image {
    width: calc(650 * var(--rem));
  }
  .item-block__item-box {
    &.--1 {
      margin-top: calc(-200 * var(--rem));
      .item-block__item-box__body {
        margin-top: calc(73 * var(--rem));
      }
    }
    &.--2 {
      position: relative;
      margin-top: calc(80 * var(--rem));
      .component-deco {
        --src: url(../img/character_1.png);
        top: calc(346 * var(--rem));
        left: calc(450 * var(--rem));
        width: calc(160 * var(--rem));
        height: calc(237 * var(--rem));
      }
      .item-block__item-box__body {
        margin-top: calc(69 * var(--rem));
      }
    }
  }
  .item-block__item-image {
    &.--1 {
      width: calc(321 * var(--rem));
      margin-right: calc(70 * var(--rem));
    }
    &.--2 {
      width: calc(629 * var(--rem));
      margin-left: calc(-20 * var(--rem));
    }
  }
}

/* TOTE BAG */
.item-block__item--tote-bag {
  padding-top: calc(147 * var(--rem));
  .component-star {
    &.--1 {
      top: calc(23 * var(--rem));
      left: calc(100 * var(--rem));
    }
    &.--2 {
      top: calc(103 * var(--rem));
      left: calc(50 * var(--rem));
    }
    &.--3 {
      top: calc(245 * var(--rem));
      left: calc(588 * var(--rem));
    }
    &.--4 {
      top: calc(1315 * var(--rem));
      left: calc(30 * var(--rem));
    }
    &.--5 {
      top: calc(1405 * var(--rem));
      left: calc(80 * var(--rem));
    }
    &.--6 {
      top: calc(1759 * var(--rem));
      left: calc(606 * var(--rem));
    }
  }
  .item-block__item-heading__container {
    margin-bottom: calc(99 * var(--rem));
  }
  .item-block__item-visual__image {
    width: calc(650 * var(--rem));
  }
  .item-block__item-box {
    &.--1 {
      margin-top: calc(-130 * var(--rem));
      .item-block__item-box__body {
        margin-top: calc(79 * var(--rem));
      }
    }
  }
  .item-block__item-image {
    &.--1 {
      width: calc(566 * var(--rem));
    }
  }
}

/* HAND TOWEL */
.item-block__item--hand-towel {
  .component-star {
    &.--1 {
      top: calc(266 * var(--rem));
      left: calc(140 * var(--rem));
    }
    &.--2 {
      top: calc(465 * var(--rem));
      left: calc(622 * var(--rem));
    }
    &.--3 {
      top: calc(913 * var(--rem));
      left: calc(70 * var(--rem));
    }
    &.--4 {
      top: calc(1340 * var(--rem));
      left: calc(624 * var(--rem));
    }
    &.--5 {
      top: calc(1425 * var(--rem));
      left: calc(572 * var(--rem));
    }
  }
  .item-block__item-heading__container {
    margin-bottom: calc(92 * var(--rem));
  }
  .item-block__item-box {
    &.--1 {
      .item-block__item-box__body {
        margin-top: calc(76 * var(--rem));
      }
    }
  }
  .item-block__item-image {
    &.--1 {
      width: calc(670 * var(--rem));
      margin-left: calc(50 * var(--rem));
    }
  }
}

/* SOCKS */
.item-block__item--socks {
  .component-star {
    &.--1 {
      top: calc(109 * var(--rem));
      left: calc(70 * var(--rem));
    }
    &.--2 {
      top: calc(269 * var(--rem));
      left: calc(586 * var(--rem));
    }
    &.--3 {
      top: calc(893 * var(--rem));
      left: calc(70 * var(--rem));
    }
    &.--4 {
      top: calc(943 * var(--rem));
      left: calc(140 * var(--rem));
    }
  }
  .item-block__item-heading__container {
    margin-bottom: calc(99 * var(--rem));
  }
  .item-block__item-box {
    &.--1 {
      .item-block__item-box__body {
        margin-top: calc(87 * var(--rem));
      }
    }
  }
  .item-block__item-image {
    &.--1 {
      width: calc(610 * var(--rem));
    }
  }
}

/* AROMA DIFFUSER */
.item-block__item--aroma-diffuser {
  .component-star {
    &.--1 {
      top: calc(10 * var(--rem));
      left: calc(50 * var(--rem));
    }
    &.--2 {
      top: calc(270 * var(--rem));
      left: calc(598 * var(--rem));
    }
    &.--3 {
      top: calc(1300 * var(--rem));
      left: calc(90 * var(--rem));
    }
    &.--4 {
      top: calc(1590 * var(--rem));
      left: calc(583 * var(--rem));
    }
  }
  .item-block__item-heading__container {
    margin-bottom: calc(99 * var(--rem));
  }
  .item-block__item-visual__image {
    width: calc(650 * var(--rem));
  }
  .item-block__item-box {
    &.--1 {
      .item-block__item-name {
        margin-top: calc(70 * var(--rem));
      }
    }
  }
}



/**
 * section-look
 */
.section-look {
  position: relative;
  padding-top: calc(160 * var(--rem));
}
.section-look--beauty {
  .component-star {
    &.--1 {
      top: calc(140 * var(--rem));
      left: calc(470 * var(--rem));
    }
    &.--2 {
      top: calc(176 * var(--rem));
      left: calc(80 * var(--rem));
    }
    &.--3 {
      top: calc(231 * var(--rem));
      left: calc(30 * var(--rem));
    }
    &.--4 {
      top: calc(255 * var(--rem));
      left: calc(692 * var(--rem));
    }
    &.--5 {
      top: calc(391 * var(--rem));
      left: calc(376 * var(--rem));
    }
    &.--6 {
      top: calc(459 * var(--rem));
      left: calc(161 * var(--rem));
    }
    &.--7 {
      bottom: calc(97 * var(--rem));
      left: calc(658 * var(--rem));
    }
    &.--8 {
      bottom: calc(29 * var(--rem));
      left: calc(30 * var(--rem));
    }
  }
}
.section-look--home {
  .component-star {
    &.--1 {
      top: calc(96 * var(--rem));
      left: calc(394 * var(--rem));
    }
    &.--2 {
      top: calc(142 * var(--rem));
      left: calc(354 * var(--rem));
    }
    &.--3 {
      top: calc(201 * var(--rem));
      left: calc(30 * var(--rem));
    }
    &.--4 {
      top: calc(215 * var(--rem));
      left: calc(692 * var(--rem));
    }
    &.--5 {
      top: calc(358 * var(--rem));
      left: calc(340 * var(--rem));
    }
    &.--6 {
      top: calc(432 * var(--rem));
      left: calc(595 * var(--rem));
    }
    &.--7 {
      bottom: calc(122 * var(--rem));
      left: calc(80 * var(--rem));
    }
    &.--8 {
      bottom: calc(68 * var(--rem));
      left: calc(624 * var(--rem));
    }
  }
  .component-ticker__container {
    padding-top: calc(110 * var(--rem));
  }
}
.section-look__head {
  position: relative;
  border-bottom: calc(8 * var(--rem)) solid var(--color-accent);
}
.section-look__heading {
  width: calc(310 * var(--rem));
}
.section-look__deco {
  position: absolute;
}
.section-look__head--beauty {
  padding-top: calc(59 * var(--rem));
  padding-left: calc(50 * var(--rem));
  padding-bottom: calc(55 * var(--rem));
  .section-look__deco {
    right: calc(70 * var(--rem));
    bottom: calc(-12 * var(--rem));
    z-index: 1;
    width: calc(160 * var(--rem));
  }
}
.section-look__head--home {
  padding-right: calc(70 * var(--rem));
  padding-bottom: calc(56 * var(--rem));
  .section-look__heading {
    margin-left: auto;
  }
  .section-look__deco {
    left: calc(60 * var(--rem));
    bottom: calc(-12 * var(--rem));
    z-index: 1;
    width: calc(250 * var(--rem));
  }
}

.component-ticker__container {
  width: 100%;
  padding-top: calc(100 * var(--rem));
  padding-bottom: calc(160 * var(--rem));
  overflow: hidden;
}
.component-ticker {
  display: flex;
  white-space: nowrap;
  width: fit-content;
  animation: var(--duration, 30s) linear .2s infinite ticker-loop;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.component-ticker__item {
  width: calc(var(--width) * var(--rem));
  margin-right: calc(50 * var(--rem));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes ticker-loop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}


/**
 * section-bottom
 */
.section-bottom {
  position: relative;
  padding-top: calc(161 * var(--rem));
  padding-bottom: calc(102 * var(--rem));
  .component-star {
    &.--1 {
      top: calc(-14 * var(--rem));
      left: calc(210 * var(--rem));
    }
    &.--2 {
      top: calc(75 * var(--rem));
      left: calc(533 * var(--rem));
    }
    &.--3 {
      top: calc(175 * var(--rem));
      left: calc(647 * var(--rem));
    }
    &.--4 {
      top: calc(227 * var(--rem));
      left: calc(50 * var(--rem));
    }
    &.--5 {
      top: calc(707 * var(--rem));
      left: calc(480 * var(--rem));
    }
    &.--6 {
      top: calc(769 * var(--rem));
      left: calc(210 * var(--rem));
    }
    &.--7 {
      bottom: calc(167 * var(--rem));
      left: calc(200 * var(--rem));
    }
    &.--8 {
      bottom: calc(138 * var(--rem));
      left: calc(658 * var(--rem));
    }
    &.--9 {
      bottom: calc(67 * var(--rem));
      left: calc(30 * var(--rem));
    }
    &.--10 {
      bottom: calc(24 * var(--rem));
      left: calc(465 * var(--rem));
    }
  }
}
.section-bottom__heading {
  width: calc(310 * var(--rem));
  margin-inline: auto;
}
.section-bottom__button {
  position: relative;
  margin-top: calc(235 * var(--rem));
  &::before {
    content: '';
    position: absolute;
    top: calc(-175 * var(--rem));
    left: 50%;
    z-index: 1;
    width: calc(124 * var(--rem));
    height: calc(184 * var(--rem));
    background: url(../img/character_1.png) no-repeat center/contain;
    translate: -50% 0;
  }
  .component-button {
    gap: calc(20 * var(--rem));
    width: calc(710 * var(--rem));
    height: calc(150 * var(--rem));
  }
  .component-button__text {
    font-size: calc(34 * var(--rem));
  }
}
.section-bottom__images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 * var(--rem));
  width: calc(710 * var(--rem));
  margin-top: calc(160 * var(--rem));
  margin-inline: auto;
}

.component-copy {
  width: calc(566 * var(--rem));
  margin-top: calc(100 * var(--rem));
  margin-inline: auto;
}


/**
 * project-footer-nav
 */
.project-footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: var(--lp-background-color);
  opacity: 0;
  translate: 0 100%;
  transition: opacity 0.6s .2s ease, translate 0.6s .2s ease;
  will-change: opacity, translate;
  &.is-visible {
    opacity: 1;
    translate: 0 0;
  }
  .project-anchor {
    margin: 0;
  }
}


/**
 * project-logo-box
 */
.layout-mobile-first__left {
  .component-star {
    z-index: -1;
    &.--1 {
      top: calc(200 / 800 * 100%);
      left: calc(146 * var(--rem-pc));
    }
    &.--2 {
      top: calc(250 / 800 * 100%);
      left: calc(80 * var(--rem-pc));
    }
    &.--3 {
      top: calc(330 / 800 * 100%);
      right: calc(61 * var(--rem-pc));
    }
    &.--4 {
      bottom: calc(226 / 800 * 100%);
      left: calc(122 * var(--rem-pc));
    }
    &.--5 {
      bottom: calc(75 / 800 * 100%);
      right: calc(153 * var(--rem-pc));
    }
  }
}
.project-logo-box {
  width: calc(250 * var(--rem-pc));
}
.project-logo-box__anchor {
  margin-top: calc(51 * var(--rem-pc));
}
.project-logo-box__anchor-item {
  & + & {
    margin-top: calc(6 * var(--rem-pc));
  }
}


/**
 * project-nemu
 */
.layout-mobile-first__right {
  .component-star {
    z-index: -1;
    &.--1 {
      top: calc(100 / 800 * 100%);
      right: calc(80 * var(--rem-pc));
    }
    &.--2 {
      top: calc(290 / 800 * 100%);
      left: calc(48 * var(--rem-pc));
    }
    &.--3 {
      bottom: calc(277 / 800 * 100%);
      right: calc(60 * var(--rem-pc));
    }
    &.--4 {
      bottom: calc(215 / 800 * 100%);
      right: calc(110 * var(--rem-pc));
    }
  }
}

.project-nemu {
  width: calc(290 * var(--rem-pc));
  .section-bottom__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    &::before {
      content: '';
      position: relative;
      top: auto;
      left: auto;
      display: block;
      width: calc(64 * var(--rem-pc));
      height: calc(95 * var(--rem-pc));
      margin-bottom: calc(-4 * var(--rem-pc));
      background: url(../img/character_1.png) no-repeat center/contain;
      translate: 0;
    }
    .component-button {
      gap: calc(20 * var(--rem-pc));
      width: calc(290 * var(--rem-pc));
      height: calc(70 * var(--rem-pc));
      &::after {
        width: calc(8 * var(--rem-pc));
        height: calc(14 * var(--rem-pc));
      }
    }
    .component-button__text {
      font-size: calc(20 * var(--rem-pc));
    }
  }
}


/* ===================
  Share
=================== */
#share {
  z-index: 10 !important;
  transition: bottom 0.6s 0.2s ease;
  .footer-nav-visible & {
    bottom: calc(2% + calc(160 * var(--rem)));
  }
}



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

/*=======================================
                    PC
========================================*/
@media (768px <= width) {
  .u-d-md {
    display: none !important;
  }
}


/*=======================================
                    SP
========================================*/
@media (width < 768px) {
  .u-d-lg {
    display: none !important;
  }
}