@charset "UTF-8";

/* ========================================================
                      * Variable *
========================================================= */
:root {
  --pw: 1600; /* PC幅 */
  --sw: 750; /* SP幅 */
  --artboard-pw: 600; /* 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: #fdfbf0;
  --base-font-color: #858585;
  --color-accent: #f9bcc6;
  --color-accent-blue: #afcce7;

  --lp-font-ja: helvetica-neue-lt-pro, hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: "Barlow Semi Condensed", sans-serif; /*regular 400*/

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

  --icon-arrow-down: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2012%22%3E%3Cpath%20d%3D%22M21%201%2011%2011%201%201%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E');
}

@media (768px <= width) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}
@media (1600px <= 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;
}


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

.slide-anime-wrapper {
  position: relative;
  --slide-speed: 5;
}
.slide-anime-2,
.slide-anime-3 {
  animation: var(--animation-name) calc(var(--slide-speed) * var(--slide-count) * 1s) infinite;
  &:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  &:first-child {
    animation-delay: 0s;
  }
  &:nth-child(2) {
    animation-delay: calc(var(--slide-speed) * 1s);
  }
}
.slide-anime-2 {
  --animation-name: slideAnime2;
  --slide-count: 2;
}
/* .slide-anime-3 {
  --animation-name: slideAnime3;
  --slide-count: 3;
  &:nth-child(3) {
    animation-delay: calc(var(--slide-speed) * 2s);
  }
} */

/* keyframes */
@keyframes slideAnime2 {
  0% { opacity: 0; }
  20% { opacity: 1; }
  50% { opacity: 1; }
  70% { opacity: 0; }
  100% { opacity: 0; }
}
/* @keyframes slideAnime3 {
  0% { opacity: 0; }
  10% { opacity: 1; }
  33% { opacity: 1; }
  43% { opacity: 0; }
  100% { opacity: 0; }
} */

@keyframes moveArrow {
  0% { translate: -100% 0; }
  50% { translate: 0 0; }
  100% { translate: 0 0; }
}



/* ===================
  LP Contents
=================== */
.lp_contents {
  --letter-spacing: .15em;
  position: relative;
  background: var(--lp-background-color, transparent);
  color: var(--base-font-color, #000);
  font-family: var(--lp-font-ja);
  font-weight: 400;
  font-size: calc(22 * 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;
    max-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;
  }
}


/* ===================
  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;
  /* padding-block: calc(195 * var(--rem)) calc(120 * var(--rem)); */
  /* background: url(../img/bg_1.jpg) no-repeat top center/100% auto; */
  @media (768px <= width) {
    width: calc(var(--artboard-pw) * var(--rem-pc));
  }
}


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


/* ===================
  Component
=================== */
/* button */
.component-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(280 * var(--rem));
  height: calc(64 * var(--rem));
  margin-inline: auto;
  padding-bottom: calc(4 * var(--rem));
  background: var(--button-color, var(--color-accent));
  border-radius: 999px;
  color: #fff;
  font-family: var(--lp-font-en);
  font-size: calc(40 * var(--rem));
  letter-spacing: .08em;
  &.--arrow {
    width: calc(440 * var(--rem));
    font-size: calc(30 * var(--rem));
    letter-spacing: .15em;
    &::after {
      content: '';
      display: block;
      width: calc(19 * var(--rem));
      height: calc(18 * var(--rem));
      margin-left: calc(20 * var(--rem));
      background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22txt%22%20viewBox%3D%220%200%2020.8%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22m1%201%208.8%209L1%2019M11%201l8.8%209-8.8%209%22%20class%3D%22cls-1%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100%;
    }
  }
  &.--ja {
    padding-bottom: 0;
  }
  & span {
    letter-spacing: inherit;
  }
}
.component-button--panda {
  --button-color: var(--color-accent-blue);
  position: relative;
  flex-direction: column;
  width: calc(600 * var(--rem));
  height: calc(110 * var(--rem));
  line-height: calc(48 / 40);
  &::before {
    position: absolute;
    content: '';
    top: calc(-87 * var(--rem));
    left: calc(-11 * var(--rem));
    display: block;
    width: calc(184 * var(--rem));
    height: calc(150 * var(--rem));
    background: url(../img/main/panda_button.png) no-repeat top left/100% auto;
  }
  .--small {
    font-size: calc(28 * var(--rem));
  }
}
.component-button--campaign {
  --button-color: var(--color-accent-blue);
  width: calc(180 * var(--rem-pc));
  height: calc(50 * var(--rem-pc));
  margin: 0;
  padding-bottom: calc(2 * var(--rem-pc));
  font-size: calc(24 * var(--rem-pc));
  &::after {
    content: '';
    display: block;
    width: calc(18 * var(--rem-pc));
    height: calc(18 * var(--rem-pc));
    margin-top: calc(2 * var(--rem-pc));
    margin-right: calc(2 * var(--rem-pc));
    margin-left: calc(13 * var(--rem-pc));
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22txt%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M10%2019V1M19%2010H1%22%20class%3D%22cls-1%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100%;
  }
}

/* viewmore */
.component-viewmore {
  position: relative;
  display: block;
  margin-inline: auto;
  padding-block: 0 calc(30 * var(--rem));
  color: var(--text-color, var(--base-font-color));
  font-family: var(--lp-font-en);
  font-size: calc(28 * var(--rem));
  line-height: 1;
  letter-spacing: .08em;
  cursor: pointer;
  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 50%;
    width: calc(32 * var(--rem));
    height: calc(16 * var(--rem));
    background-color: var(--icon-color, var(--base-font-color));
    mask: var(--icon-arrow-down) no-repeat center / 100%;
    translate: -50% 0;
  }
  &::before {
    top: 0;
    rotate: 180deg;
    opacity: 0;
  }
  &::after {
    bottom: 0;
  }
  &.is-open {
    padding-block: calc(32 * var(--rem)) 0;
    &::before {
      opacity: 1;
    }
    &::after {
      opacity: 0;
    }
  }
}

/* viewdetails */
.component-viewdetails {
  position: relative;
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  background: var(--color-accent);
  border-radius: 50%;
  color: #fff;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(34 * var(--rem));
    height: 1px;
    background: currentColor;
    translate: -50% -50%;
  }
  &::after {
    rotate: 90deg;
  }
}

/* hamburger button */
.component-hamburger-button__wrap {
  position: fixed;
  top: calc(40 * var(--rem));
  right: 0;
  z-index: 50;
  translate: 100% 0;
  /* transition: transform .8s cubic-bezier(0.46, 0.03, 0.52, 0.96), translate .6s ease-in-out; */
  transition: translate .6s ease-in-out;
  will-change: transform, translate;
  &.is-visible {
    translate: 0 0;
  }
}
.component-hamburger-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(160 * var(--rem));
  height: calc(192 * var(--rem));
  padding-top: calc(20 * var(--rem));
  background: var(--lp-background-color);
  border-radius: calc(20 * var(--rem)) 0 0 calc(20 * var(--rem));
  color: var(--color-accent-blue);
  font-family: var(--lp-font-en);
  font-size: calc(32 * var(--rem));
  line-height: 1;
  letter-spacing: .08em;
  text-align: center;
  cursor: pointer;
  &::before {
    content: '';
    display: block;
    width: calc(100 * var(--rem));
    height: calc(82 * var(--rem));
    margin-bottom: calc(12 * var(--rem));
    background: url(../img/main/deco_hamburger_button.png) no-repeat top left/100%;
  }
  &::after {
    content: '';
    display: block;
    width: calc(18 * var(--rem));
    height: calc(18 * var(--rem));
    margin-top: calc(15 * var(--rem));
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22txt%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23afcce7%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M10%2019V1M19%2010H1%22%20class%3D%22cls-1%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100%;
  }
}

/* campaign button */
.component-campaign-button__wrap {
  position: fixed;
  bottom: calc(40 * var(--rem));
  right: 0;
  z-index: 50;
  translate: 100% 0;
  transition: translate .6s ease-in-out;
  will-change: translate;
  &.is-visible {
    translate: 0 0;
  }
}
.component-campaign-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(230 * var(--rem));
  height: calc(80 * var(--rem));
  background: var(--color-accent-blue);
  border-radius: 0 0 calc(20 * var(--rem)) calc(20 * var(--rem));
  color: #fff;
  font-family: var(--lp-font-en);
  font-size: calc(32 * var(--rem));
  letter-spacing: .08em;
  cursor: pointer;
  rotate: 90deg;
  translate: 0 calc(80 * var(--rem));
  transform-origin: top right;
  &::after {
    content: '';
    display: block;
    width: calc(26 * var(--rem));
    height: calc(26 * var(--rem));
    margin-left: calc(15 * var(--rem));
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22txt%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M1%2014h26M14%2027V1%22%20class%3D%22cls-1%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100%;
  }
}

.component-deco {
  position: absolute;
  z-index: var(--z-index, 0);
  width: calc(var(--width) * var(--rem));
  height: calc(var(--height) * var(--rem));
  background: var(--image-src) no-repeat top center/100%;
  &:not(.fade-up) {
    opacity: 0;
    transition: opacity 1.8s var(--transition-timing), transform 1s;
    will-change: opacity, transform;
    pointer-events: none;
    &.is-active {
      opacity: 1;
    }
  }
}

.component-deco--1 {
  top: calc(83 * var(--rem));
  right: calc(-163 * var(--rem));
}
.component-deco--2 {
  top: calc(260 * var(--rem));
  left: calc(-175 * var(--rem));
}
.component-deco--46 {
  top: calc(-79 * var(--rem));
  right: calc(-61 * var(--rem));
}
.component-deco--3 {
  top: calc(-22 * var(--rem));
  left: calc(-708 * var(--rem));
}
.component-deco--4 {
  top: calc(594 * var(--rem));
  right: calc(-58 * var(--rem));
}
.component-deco--5 {
  top: calc(-276 * var(--rem));
  left: calc(-392 * var(--rem));
}
.component-deco--6 {
  top: calc(53 * var(--rem));
  right: calc(-335 * var(--rem));
}
.component-deco--7 {
  top: calc(386 * var(--rem));
  left: calc(-134 * var(--rem));
}
.component-deco--8 {
  top: calc(-113 * var(--rem));
  right: calc(-452 * var(--rem));
}
.component-deco--9 {
  top: calc(69 * var(--rem));
  left: calc(-126 * var(--rem));
}
.component-deco--10 {
  top: calc(286 * var(--rem));
  right: calc(-689 * var(--rem));
}
.component-deco--11 {
  top: calc(-166 * var(--rem));
  left: calc(-80 * var(--rem));
}
.component-deco--12 {
  top: calc(139 * var(--rem));
  right: calc(-95 * var(--rem));
}
.component-deco--13 {
  top: calc(468 * var(--rem));
  left: calc(-42 * var(--rem));
}
.component-deco--14 {
  top: calc(-395 * var(--rem));
  right: calc(-531 * var(--rem));
}
.component-deco--15 {
  top: calc(781 * var(--rem));
  left: calc(-90 * var(--rem));
}
.component-deco--16 {
  top: calc(-140 * var(--rem));
  right: calc(-249 * var(--rem));
}
.component-deco--17 {
  top: calc(261 * var(--rem));
  left: calc(4 * var(--rem));
}
.component-deco--18 {
  top: calc(511 * var(--rem));
  right: calc(-40 * var(--rem));
}
.component-deco--19 {
  top: calc(-426 * var(--rem));
  left: calc(-468 * var(--rem));
}
.component-deco--20 {
  top: calc(49 * var(--rem));
  right: calc(-329 * var(--rem));
}
.component-deco--21 {
  top: calc(485 * var(--rem));
  left: calc(13 * var(--rem));
}
.component-deco--22 {
  top: calc(-103 * var(--rem));
  right: calc(-131 * var(--rem));
}
.component-deco--23 {
  top: calc(-32 * var(--rem));
  left: calc(-468 * var(--rem));
}
.component-deco--24 {
  top: calc(522 * var(--rem));
  right: calc(-19 * var(--rem));
}
.component-deco--25 {
  top: calc(-106 * var(--rem));
  left: calc(-445 * var(--rem));
}
.component-deco--26 {
  top: calc(176 * var(--rem));
  right: calc(-147 * var(--rem));
}
.component-deco--27 {
  top: calc(492 * var(--rem));
  left: calc(6 * var(--rem));
}
.component-deco--28 {
  top: calc(-145 * var(--rem));
  right: calc(-85 * var(--rem));
}
.component-deco--29 {
  top: calc(148 * var(--rem));
  left: calc(-83 * var(--rem));
}
.component-deco--30 {
  top: calc(-256 * var(--rem));
  right: calc(-133 * var(--rem));
}
.component-deco--31 {
  top: calc(163 * var(--rem));
  left: calc(-321 * var(--rem));
}
.component-deco--32 {
  top: calc(565 * var(--rem));
  right: calc(32 * var(--rem));
}
.component-deco--33 {
  top: calc(-100 * var(--rem));
  left: calc(-56 * var(--rem));
}
.component-deco--34 {
  top: calc(366 * var(--rem));
  right: calc(-25 * var(--rem));
}
.component-deco--35 {
  top: calc(-168 * var(--rem));
  left: calc(-267 * var(--rem));
}
.component-deco--36 {
  top: calc(426 * var(--rem));
  right: calc(-285 * var(--rem));
}
.component-deco--37 {
  top: calc(-46 * var(--rem));
  left: calc(-52 * var(--rem));
}
.component-deco--38 {
  top: calc(126 * var(--rem));
  right: calc(-145 * var(--rem));
}
.component-deco--39 {
  top: calc(-295 * var(--rem));
  left: calc(-250 * var(--rem));
}
.component-deco--40 {
  top: calc(-119 * var(--rem));
  right: calc(103 * var(--rem));
}
.component-deco--41 {
  top: calc(-194 * var(--rem));
  left: calc(-241 * var(--rem));
}
.component-deco--42 {
  top: calc(-335 * var(--rem));
  right: calc(-373 * var(--rem));
}
.component-deco--43 {
  top: calc(-129 * var(--rem));
  left: calc(75 * var(--rem));
}
.component-deco--44 {
  top: calc(-220 * var(--rem));
  right: calc(-120 * var(--rem));
}
.component-deco--45 {
  top: calc(225 * var(--rem));
  left: calc(-148 * var(--rem));
}


/* ===================
  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) 20%, 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%);
    }
  }
}


/* ===================
  Modal
=================== */
/* body.is-modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
} */
.project-modal {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: auto;
  background: none;
  border: none;
  opacity: 0;
  scale: 0.95;
  /* overflow: visible; */
  transition: opacity .3s, scale .3s;
  will-change: opacity, scale;
  &.is-open {
    opacity: 1;
    scale: 1;
  }
  &.is-closing {
    animation: fade-out 0.3s ease-out forwards;
  }
  &.is-closing::backdrop {
    animation: fade-out-backdrop 0.3s ease-out forwards;
  }
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  transition: background-color 0.3s;
  will-change: background-color;
}
dialog.is-open::backdrop {
  background-color: var(--backdrop-color, rgba(0, 0, 0, 0.8));
}
@keyframes fade-out {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.95;
  }
}
@keyframes fade-out-backdrop {
  from { background-color: rgba(0, 0, 0, 0.4); }
  to { background-color: rgba(0, 0, 0, 0); }
}
.project-modal {
  &.--pink {
    --color: var(--color-accent);
    --backdrop-color: rgba(254, 239, 241, 0.8);
  }
  &.--blue {
    --color: var(--color-accent-blue);
    --backdrop-color: rgba(241, 245, 249, 0.8);
  }
  &.--yellow {
    --color: var(--color-accent);
    --backdrop-color: rgba(253, 251, 240, 0.8);
    &.--secondary {
      --color: var(--color-accent-blue);
    }
  }
}

.project-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(640 * var(--rem));
  max-width: 100vw;
  max-height: calc(100dvh - (60 * var(--rem)));
  background-color: #fff;
  translate: -50% -50%;
  transition: transform 0.3s ease-out;
  overflow-y: scroll;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.project-modal__close-button {
  position: absolute;
  top: calc(30 * var(--rem));
  right: calc(30 * var(--rem));
  z-index: 10;
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  border: none;
  cursor: pointer;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(85 * var(--rem));
    height: 1px;
    background-color: var(--color, --base-font-color);
  }
  &::before {
    translate: -50% -50%;
    rotate: 45deg;
  }
  &::after {
    translate: -50% -50%;
    rotate: -45deg;
  }
}


/* ===================
  .project-modal-content
=================== */
.project-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: calc(120 * var(--rem)) calc(112 * var(--rem));
  background: #fff;
  &:has(.project-item-color-list__header) {
    padding-top: calc(107 * var(--rem));
  }
}
.project-modal-content__body {
  text-align: center;
}

.project-modal--1 {
  .project-item-color-list--1 {
    column-gap: calc(50 * var(--rem));
    margin-left: calc(12 * var(--rem));
  }
}
.project-modal--2 {
  .project-item-color-list--1 {
    column-gap: calc(37 * var(--rem));
    margin-left: calc(25 * var(--rem));
  }
}
.project-modal--5 {
  .project-modal-content {
    padding-top: calc(107 * var(--rem));
  }
}


/* ===================
  hamburger
=================== */
.project-hamburger__content {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  translate: 0 0;
}
.project-hamburger-content {
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  padding-top: calc(256 * var(--rem));
  padding-inline: calc(95 * var(--rem));
  background: var(--lp-background-color);
  overflow: clip;
  &::before,
  &::after {
    content: '';
    position: absolute;
    background: no-repeat top center/100%;
    pointer-events: none;
  }
  &::before {
    width: calc(838 * var(--rem));
    height: calc(783 * var(--rem));
    top: calc(-245 * var(--rem));
    left: calc(-415 * var(--rem));
    background-image: url(../img/main/deco_47.png);
  }
  &::after {
    width: calc(250 * var(--rem));
    height: calc(242 * var(--rem));
    bottom: calc(-21 * var(--rem));
    right: calc(-37 * var(--rem));
    background-image: url(../img/main/deco_48.png);
  }
}
.project-hamburger__close-button {
  top: calc(60 * var(--rem));
  right: calc(60 * var(--rem));
}
.project-hamburger-content__body {
  text-align-last: left;
  .project-nemu__list {
    padding-left: calc(47 * var(--rem));
  }
}


/* ===================
  .project-nemu
=================== */
.project-nemu__item {
  & + & {
    margin-top: calc(43 * var(--rem));
  }
}
.project-nemu__item-link {
  position: relative;
  display: block;
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(50 * var(--rem));
    width: calc(24 * var(--rem));
    height: calc(12 * var(--rem));
    background-color: var(--color-accent-blue);
    mask: var(--icon-arrow-down) no-repeat center/100%;
    translate: 0 -50%;
  }
}
.project-nemu__item-label {
  color: var(--color-accent-blue);
  font-family: var(--lp-font-en);
  font-size: calc(34 * var(--rem));
  line-height: 1;
  letter-spacing: .08em;
}
.project-nemu__item-label__sub {
  margin-top: calc(10 * var(--rem));
  color: var(--base-font-color);
  font-size: calc(20 * var(--rem));
  line-height: 1;
}
.project-nemu__button {
  margin-top: calc(152 * var(--rem));
  .component-button--panda {
    width: calc(560 * var(--rem));
  }
}

.layout-mobile-first__right {
  .project-nemu {
    width: calc(242 * var(--rem-pc));
    padding-left: calc(30 * var(--rem-pc));
  }
  .project-nemu__item {
    & + & {
      margin-top: calc(29 * var(--rem-pc));
    }
  }
  .project-nemu__item-link {
    &::after {
      right: calc(30 * var(--rem-pc));
      width: calc(16 * var(--rem-pc));
      height: calc(8 * var(--rem-pc));
    }
  }
  .project-nemu__item-label {
    font-size: calc(22 * var(--rem-pc));
  }
  .project-nemu__item-label__sub {
    margin-top: calc(8 * var(--rem-pc));
    font-size: calc(16 * var(--rem-pc));
  }
  .project-nemu__button {
    margin-top: calc(38 * var(--rem-pc));
  }
}


/* ===================
  .project-mainvisual
=================== */
.project-mainvisual {
  aspect-ratio: 750 / 1330;
  & img {
    width: 100%;
  }
}


/* ===================
  .project-section-schedule
=================== */
.project-section-schedule {
  padding-block: calc(134 * var(--rem)) calc(138 * var(--rem));
  background: #fff;
}


/* ===================
  .project-schedule
=================== */
.project-schedule__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(557 * var(--rem));
  margin-inline: auto;
  font-family: var(--lp-font-en);
  font-size: calc(30 * var(--rem));
  line-height: 1;
  letter-spacing: .08em;
  & + & {
    margin-top: calc(32 * var(--rem));
  }
}
.project-schedule__list-label,
.project-schedule__list-value {
  letter-spacing: inherit;
}
.project-schedule__list-value {
  position: relative;
  text-align: right;
  &::before {
    position: absolute;
    content: '';
    top: 50%;
    left: calc(((var(--border-width) * var(--rem)) + (20 * var(--rem))) * -1);
    display: block;
    width: calc(var(--border-width) * var(--rem));
    height: 1px;
    background: var(--color-accent-blue);
    translate: 0 -50%;
  }
}


/* ===================
  .project-section-anchor
=================== */
.project-section-anchor {
  padding-block: calc(40 * var(--rem));
  background: #fdfbf0;
}


/* ===================
  .project-anchor
=================== */
.project-anchor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: calc(50 * var(--rem));
}
.project-anchor__item--2,
.project-anchor__item--3,
.project-anchor__item--5 {
  border-left: 1px solid var(--color-accent-blue);
}
.project-anchor__item-body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(60 * var(--rem));
  padding-right: calc(76 * var(--rem));
  padding-left: calc(30 * var(--rem));
  &::after {
    position: absolute;
    content: '';
    top: 50%;
    right: calc(30 * var(--rem));
    display: block;
    width: calc(20 * var(--rem));
    height: calc(10 * var(--rem));
    background-color: var(--color-accent-blue);
    mask: var(--icon-arrow-down) no-repeat center/100%;
    translate: 0 -50%;
  }
}
.project-anchor__item-label {
  color: var(--color-accent-blue);
  font-family: var(--lp-font-en);
  font-size: calc(28 * var(--rem));
  line-height: 1;
  letter-spacing: .08em;
}
.project-anchor__item-label__sub {
  margin-top: calc(10 * var(--rem));
  font-size: calc(20 * var(--rem));
  line-height: 1;
}


/* ===================
  .project-section-intro
=================== */
.project-section-intro {
  --max-height: calc(319 * var(--rem));
  --text-color: var(--color-accent-blue);
  --icon-color: currentColor;
  position: relative;
  padding-block: calc(133 * var(--rem)) calc(140 * var(--rem));
  background: #fff;
}
.project-section-intro__heading {
  margin-bottom: calc(62 * var(--rem));
  color: var(--color-accent-blue);
  font-family: var(--lp-font-en);
  font-size: calc(40 * var(--rem));
  line-height: 1;
  letter-spacing: .08em;
  text-align: center;
}
.project-section-intro__body {
  position: relative;
  .component-deco {
    position: absolute;
    top: calc(758 * var(--rem));
    right: calc(-48 * var(--rem));
  }
}
.project-section-intro__text {
  position: relative;
  margin-bottom: calc(47 * var(--rem));
  font-size: calc(22 * var(--rem));
  line-height: calc(52.8 / 22);
  letter-spacing: .2em;
  text-align: center;
  &:last-child {
    margin-bottom: calc(60 * var(--rem));
  }
}


/* ===================
  .project-section
=================== */
.project-section {
  position: relative;
  padding-block: calc(140 * var(--rem));
  &.--pink {
    --color: var(--color-accent);
    --button-color: var(--color-accent);
    background: #fff;
    &.--secondary {
      background: var(--lp-background-color);
    }
    &.--tertiary {
      background: #fef7f8;
    }
  }
  &.--blue {
    --color: var(--color-accent-blue);
    --button-color: var(--color-accent-blue);
    background: #f1f5f9;
    &.--secondary {
      background: #fff;
    }
    .component-viewdetails {
      background: var(--color-accent-blue);
    }
  }
}
.project-section__heading {
  position: absolute;
  color: var(--color);
  font-family: var(--lp-font-en);
  font-size: calc(50 * var(--rem));
  line-height: 1;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  &.--left {
    top: calc(-4 * var(--rem));
    left: calc(25 * var(--rem));
  }
  &.--right {
    top: calc(-4 * var(--rem));
    right: calc(20 * var(--rem));
  }
  &.--sub {
    top: auto;
    bottom: -.25ch;
  }
}
.project-section__visual {
  position: relative;
}
.project-section__visual-image {
  position: relative;
  width: calc(570 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.project-section__lead {
  position: relative;
  padding-block: calc(87 * var(--rem)) calc(85 * var(--rem));
  &:has(.project-section__lead-note) {
    padding-bottom: calc(98 * var(--rem));
  }
}
.project-section__lead-text {
  position: relative;
  font-size: calc(26 * var(--rem));
  line-height: calc(52 / 26);
  text-align: center;
}
.project-section__lead-note {
  margin-top: calc(34 * var(--rem));
  font-size: calc(20 * var(--rem));
  line-height: 1;
  text-align: center;
}

.project-section-sakura-duo {
  padding-top: 0;
  .project-item-block__body {
    &.--2 {
      margin-top: calc(52 * var(--rem));
    }
  }
}
.project-section-petal-float-eye-palette {
  padding-bottom: calc(130 * var(--rem));
}
.project-section-petal-blooming-gloss {
  padding-bottom: calc(130 * var(--rem));
  .project-item-block__body {
    margin-top: calc(54 * var(--rem));
  }
  .project-item-color-list--2 {
    column-gap: calc(92 * var(--rem));
    margin-left: calc(12 * var(--rem));
  }
  .project-item-color-list__detail {
    margin-top: calc(28 * var(--rem));
  }
}
.project-section-petal-float-blush {
  padding-bottom: calc(133 * var(--rem));
  .project-item-block__body {
    margin-top: calc(55 * var(--rem));
  }
  .project-item-color-list--2 {
    column-gap: calc(43 * var(--rem));
    margin-right: calc(37 * var(--rem));
  }
}
.project-section-petal-float-flawless-touchi {
  padding-bottom: calc(171 * var(--rem));
}
.project-section-dream-flora-booster-serum {
  .project-section__heading {
    &.--right {
      right: calc(15 * var(--rem));
    }
  }
}
.project-section-eau-de-toilette {
  padding-top: calc(139 * var(--rem));
  .project-section__heading {
    &.--right {
      right: calc(15 * var(--rem));
    }
  }
  .project-item-block__body {
    margin-top: calc(51 * var(--rem));
  }
}


/* ===================
  .project-item-block
=================== */
.project-item-block {
  position: relative;
  & + & {
    margin-top: calc(120 * var(--rem));
  }
}
.project-item-block__image {
  position: relative;
  margin-inline: auto;
  & img {
    width: 100%;
  }
  .component-viewdetails {
    position: absolute;
    right: calc(-30 * var(--rem));
    bottom: calc(10 * var(--rem));
  }
}
.project-item-block__image--1 {
  width: calc(616 * var(--rem));
}
.project-item-block__image--2 {
  width: calc(506 * var(--rem));
}
.project-item-block__image--3 {
  width: calc(330 * var(--rem));
  .component-viewdetails {
    right: calc(-70 * var(--rem));
  }
}
.project-item-block__image--4 {
  width: calc(396 * var(--rem));
}
.project-item-block__image--5 {
  width: calc(440 * var(--rem));
}
.project-item-block__image--6 {
  width: calc(352 * var(--rem));
}
.project-item-block__body {
  position: relative;
  margin-top: calc(53 * var(--rem));
  text-align: center;
}
.project-item-block__name {
  font-size: calc(24 * var(--rem));
  line-height: calc(38.4 / 24);
}
.project-item-block__detail {
  margin-top: calc(20 * var(--rem));
  font-size: calc(22 * var(--rem));
  line-height: calc(44 / 22);
}
.project-item-block__price {
  margin-top: calc(19 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: 1;
  &:has(.tag) {
    margin-top: calc(23 * var(--rem));
  }
  .tag {
    font-size: calc(22 * var(--rem));
  }
  .--small {
    font-size: calc(20 * var(--rem));
  }
}
.project-item-block__button {
  margin-top: calc(45 * var(--rem));
}


/* ===================
  .project-item-color-list
=================== */
.project-item-color-list {
  display: flex;
  justify-content: center;
  margin-top: calc(120 * var(--rem));
  .project-item-color-list__header + & {
    margin-top: calc((45 * var(--rem)));
  }
  .project-modal-content__body & {
    &:only-child {
      margin-top: 0;
    }
  }
}
.project-item-color-list--1 {
  column-gap: calc(60 * var(--rem));
}
.project-item-color-list--2 {
  column-gap: calc(100 * var(--rem));
}
.project-item-color-list__image {
  width: calc(var(--image-width) * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.project-item-color-list__image--1 {
  --image-width: 280;
  /* width: calc(280 * var(--rem)); */
}
.project-item-color-list__image--2 {
  --image-width: 200;
  /* width: calc(200 * var(--rem)); */
}
.project-item-color-list__body {
  margin-top: calc(22 * var(--rem));
  text-align: center;
}
.project-item-color-list__name {
  color: var(--color);
  font-family: var(--lp-font-en);
  font-size: calc(28 * var(--rem));
  line-height: calc(35 / 28);
  letter-spacing: .08em;
  .--ja {
    font-size: calc(24 * var(--rem));
  }
}
.project-item-color-list__detail {
  margin-top: calc(26 * var(--rem));
  color: var(--base-font-color);
  font-size: calc(20 * var(--rem));
  line-height: calc(35 / 20);
}
.project-item-color-list__header {
  color: var(--color);
  font-family: var(--lp-font-en);
  font-size: calc(40 * var(--rem));
  line-height: calc(50 / 40);
  letter-spacing: .08em;
}


/* ===================
  .project-section-intervening
=================== */
.project-section-intervening {
  position: relative;
  padding-block: calc(115 * var(--rem)) calc(140 * var(--rem));
  background: #fff;
}
.project-section-intervening__heading {
  margin-bottom: calc(43 * var(--rem));
  color: var(--color-accent-blue);
  font-family: var(--lp-font-en);
  font-size: calc(50 * var(--rem));
  line-height: calc(75 / 50);
  letter-spacing: .08em;
  text-align: center;
}
.project-section-intervening__image {
  width: calc(600 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.project-section-intervening__body {
  width: calc(607 * var(--rem));
  margin-inline: auto;
  padding-top: calc(47 * var(--rem));
}
.project-section-intervening__text-wrap {
  display: flex;
  align-items: flex-start;
  column-gap: calc(31 * var(--rem));
}
.project-section-intervening__text {
  color: var(--color-accent-blue);
  font-family: var(--lp-font-en);
  font-size: calc(45 * var(--rem));
  line-height: calc(54 / 45);
  letter-spacing: .08em;
  white-space: nowrap;
}
.project-section-intervening__arrow {
  display: block;
  width: calc(285 * var(--rem));
  height: calc(21 * var(--rem));
  margin-top: calc(10 * var(--rem));
  overflow: hidden;
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20283%2021%22%3E%3Cpath%20d%3D%22M1.5%2019.5h280l-31-18%22%20style%3D%22fill%3Anone%3Bstroke%3A%23afcce7%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A3px%22%2F%3E%3C%2Fsvg%3E') no-repeat top left / 100%;
    animation: moveArrow 2s infinite;
  }
}
.project-section-intervening__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(320 * var(--rem));
  height: calc(44 * var(--rem));
  margin-top: calc(6 * var(--rem));
  background: var(--color-accent-blue);
  border-radius: 999px;
  color: #fff;
  font-size: calc(24 * var(--rem));
}


/* ===================
  .project-how-to-use
=================== */
.project-how-to-use {
  margin-top: calc(109 * var(--rem));
}
.project-how-to-use__heading {
  margin-bottom: calc(42 * var(--rem));
  color: var(--color);
  font-family: var(--lp-font-en);
  font-size: calc(36 * var(--rem));
  line-height: calc(45 / 36);
  letter-spacing: .08em;
  text-align: center;
}
.project-how-to-use__body {
  position: relative;
}
.project-how-to-use__image {
  width: calc(280 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.project-how-to-use__text {
  position: absolute;
  font-size: calc(20 * var(--rem));
  line-height: calc(30 / 20);
  &::after {
    position: absolute;
    content: '';
    background: no-repeat top left / 100%;
  }
}
.project-how-to-use__text--1 {
  top: calc(26 * var(--rem));
  left: calc(40 * var(--rem));
  &::after {
    bottom: calc(-34 * var(--rem));
    left: 0;
    width: calc(266 * var(--rem));
    height: calc(25 * var(--rem));
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20266.35%2024.94%22%3E%3Cpath%20d%3D%22M266%2024%20205%201H0%22%20style%3D%22fill%3Anone%3Bstroke%3A%23858585%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E');
  }
}
.project-how-to-use__text--2 {
  top: calc(181 * var(--rem));
  left: calc(40 * var(--rem));
  &::after {
    bottom: calc(-10 * var(--rem));
    left: 0;
    width: calc(299 * var(--rem));
    height: calc(66 * var(--rem));
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20299.39%2065.92%22%3E%3Cpath%20d%3D%22m299%20.92-149%2064H0%22%20style%3D%22fill%3Anone%3Bstroke%3A%23858585%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E');
  }
}
.project-how-to-use__text--3 {
  top: calc(37 * var(--rem));
  right: calc(34 * var(--rem));
  &::after {
    bottom: calc(-44 * var(--rem));
    right: calc(6 * var(--rem));
    width: calc(291 * var(--rem));
    height: calc(36 * var(--rem));
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20290.78%2035.97%22%3E%3Cpath%20d%3D%22M.25%2035%20133.78%201h157%22%20style%3D%22fill%3Anone%3Bstroke%3A%23858585%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E');
  }
}
.project-how-to-use__text--4 {
  top: calc(210 * var(--rem));
  right: calc(36 * var(--rem));
  &::after {
    bottom: calc(-11 * var(--rem));
    right: calc(4 * var(--rem));
    width: calc(280 * var(--rem));
    height: calc(85 * var(--rem));
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20281.07%2084.95%22%3E%3Cpath%20d%3D%22m.59.81%20114.48%2083.14h166%22%20style%3D%22fill%3Anone%3Bstroke%3A%23858585%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E');
  }
}


/* ===================
  .project-notes
=================== */
.project-notes {
  margin-top: calc(109 * var(--rem));
}
.project-notes__heading {
  margin-bottom: calc(42 * var(--rem));
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-size: calc(36 * var(--rem));
  line-height: calc(45 / 36);
  letter-spacing: .08em;
  text-align: center;
}
.project-notes__fig {
  width: calc(600 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.project-notes__text {
  margin-top: calc(50 * var(--rem));
  font-size: calc(22 * var(--rem));
  line-height: calc(44 / 22);
  text-align: center;
}


/* ===================
  .project-section-campaign
=================== */
.project-section-campaign {
  position: relative;
  padding-block: calc(130 * var(--rem)) calc(140 * var(--rem));
  background: var(--lp-background-color);
  text-align: center;
  .project-modal-content__body & {
    padding-block: 0;
    background: none;
  }
}
.project-section-campaign__heading {
  color: var(--color-accent-blue);
  font-family: var(--lp-font-en);
  font-size: calc(60 * var(--rem));
  span {
    display: block;
    line-height: 1;
    letter-spacing: .08em;
  }
  .--em {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(370 * var(--rem));
    height: calc(92 * var(--rem));
    margin-block: calc(24 * var(--rem));
    margin-inline: auto;
    padding-bottom: calc(6 * var(--rem));
    padding-left: calc(4 * var(--rem));
    background-color: var(--color-accent-blue);
    color: #fff;
    font-size: calc(86 * var(--rem));
  }
}
.project-section-campaign__date {
  margin-top: calc(37 * var(--rem));
  color: var(--base-font-color);
  font-size: calc(28 * var(--rem));
  .--small {
    font-size: calc(24 * var(--rem));
  }
}
.project-section-campaign__text {
  margin-top: calc(67 * var(--rem));
  color: var(--base-font-color);
  font-size: calc(28 * var(--rem));
  > span {
    display: block;
    line-height: 1;
  }
  .--em {
    margin-top: calc(28 * var(--rem));
    margin-left: calc(10 * var(--rem));
    color: var(--color-accent-blue);
    font-size: calc(36 * var(--rem));
    font-weight: bold;
    .--large {
      font-size: calc(76 * var(--rem));
      letter-spacing: .1em;
    }
  }
}
.project-section-campaign__note {
  margin-top: calc(32 * var(--rem));
  color: var(--base-font-color);
  font-size: calc(20 * var(--rem));
  line-height: 1;
}
.project-section-campaign__button {
  --button-color: var(--color-accent-blue);
  margin-top: calc(78 * var(--rem));
}


/* ===================
  .project-section-border-top
=================== */
.project-section-border-top {
  position: relative;
  &::before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: calc(640 * var(--rem));
    height: 1px;
    background: var(--color-accent-blue);
    content: '';
    translate: -50% 0;
  }
}


/* ===================
  .project-section-novelty
=================== */
.project-section-novelty {
  position: relative;
  padding-block: calc(133 * var(--rem));
  background: var(--lp-background-color);
  text-align: center;
}
.project-section-novelty__block {
  position: relative;
  & + & {
    margin-top: calc(124 * var(--rem));
  }
}
.project-section-novelty__heading {
  margin-bottom: calc(55 * var(--rem));
  color: var(--color-accent-blue);
  font-family: var(--lp-font-en);
  font-size: calc(50 * var(--rem));
  line-height: 1;
  letter-spacing: .08em;
}
.project-section-novelty__image {
  width: calc(560 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.project-section-novelty__body {
  margin-top: calc(40 * var(--rem));
}
.project-section-novelty__name {
  color: var(--color-accent-blue);
  font-size: calc(26 * var(--rem));
  line-height: 1;
}
.project-section-novelty__detail {
  margin-top: calc(27 * var(--rem));
  font-size: calc(22 * var(--rem));
  line-height: calc(44 / 22);
  .--shopper & {
    margin-top: calc(23 * var(--rem));
  }
}
.project-section-novelty__note {
  margin-top: calc(21 * var(--rem));
  font-size: calc(20 * var(--rem));
  line-height: calc(32 / 20);
  .--shopper & {
    margin-top: calc(22 * var(--rem));
  }
}


/* ===================
  .project-profile
=================== */
.project-profile {
  position: relative;
  padding-block: calc(142 * var(--rem)) calc(140 * var(--rem));
  background: var(--lp-background-color);
  .component-viewmore {
    --text-color: var(--color-accent-blue);
    --icon-color: var(--color-accent-blue);
    margin-top: calc(79 * var(--rem));
    &.is-open {
      margin-top: calc(65 * var(--rem));
    }
  }
}
.project-profile__heading {
  width: calc(320 * var(--rem));
  margin-inline: auto;
  margin-bottom: calc(40 * var(--rem));
  & img {
    width: 100%;
  }
}
.project-profile__heading-sub {
  margin-bottom: calc(49 * var(--rem));
  color: var(--color-accent-blue);
  font-size: calc(26 * var(--rem));
  line-height: 1;
  text-align: center;
}
.project-profile__body {
  width: calc(602 * var(--rem));
  max-height: calc(115 * var(--rem));
  margin-inline: auto;
}
.project-profile__text {
  font-size: calc(22 * var(--rem));
  line-height: calc(44 / 22);
  text-align: justify;
}


/* ===================
  .project-section-comment
=================== */
.project-section-comment {
  position: relative;
  padding-block: calc(121 * var(--rem)) calc(141 * var(--rem));
  background: var(--lp-background-color);
}
.project-section-comment__heading {
  margin-bottom: calc(79 * var(--rem));
  color: var(--color-accent-blue);
  font-family: var(--lp-font-en);
  font-size: calc(50 * var(--rem));
  line-height: calc(75 / 50);
  text-align: center;
  span {
    display: block;
    letter-spacing: .08em;
  }
  .--em {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(360 * var(--rem));
    height: calc(76 * var(--rem));
    margin-top: calc(32 * var(--rem));
    margin-inline: auto;
    padding-bottom: calc(6 * var(--rem));
    padding-left: calc(4 * var(--rem));
    background-color: var(--color-accent-blue);
    color: #fff;
    font-size: calc(72 * var(--rem));
  }
}


/* ===================
.project-comment
=================== */
.project-comment {
  position: relative;
  width: calc(604 * var(--rem));
  margin-inline: auto;
  &:nth-child(odd) {
    .project-comment__head {
      margin-left: calc(2 * var(--rem));
      padding-left: calc(29 * var(--rem));
      border-left: calc(6 * var(--rem)) solid var(--color-accent-blue);
    }
  }
  &:nth-child(even) {
    .project-comment__head {
      margin-right: calc(2 * var(--rem));
      padding-right: calc(24 * var(--rem));
      border-right: calc(6 * var(--rem)) solid var(--color-accent-blue);
      text-align: right;
    }
  }
  & + & {
    margin-top: calc(120 * var(--rem));
  }
  .component-viewmore {
    --text-color: var(--color-accent-blue);
    --icon-color: var(--color-accent-blue);
    margin-top: calc(80 * var(--rem));
    &.is-open {
      margin-top: calc(63 * var(--rem));
    }
  }
}
.project-comment__head {
  margin-bottom: calc(37 * var(--rem));
  font-size: calc(28 * var(--rem));
  line-height: calc(42 / 28);
}
.project-comment__body {
  max-height: calc(71 * var(--rem));
}
.project-comment__text {
  font-size: calc(22 * var(--rem));
  line-height: calc(44 / 22);
  text-align: justify;
}


/* ===================
  .project-section-info
=================== */
.project-section-info {
  position: relative;
  padding-block: calc(142 * var(--rem)) calc(126 * var(--rem));
  background: var(--lp-background-color);
}
.project-section-info__heading {
  margin-bottom: calc(58 * var(--rem));
  color: var(--color-accent-blue);
  font-size: calc(36 * var(--rem));
  font-weight: bold;
  line-height: 1;
  letter-spacing: .12em;
  text-align: center;
}


/* ===================
  .project-info-box
=================== */
.project-info-box {
  text-align: center;
  & + & {
    margin-top: calc(47 * var(--rem));
  }
}
.project-info-box__heading {
  font-size: calc(28 * var(--rem));
  font-weight: bold;
  line-height: 1;
}
.project-info-box__body {
  margin-top: calc(35 * var(--rem));
}
.project-info-box__label {
  margin-bottom: calc(9 * var(--rem));
  color: var(--color-accent-blue);
  font-family: var(--lp-font-en);
  font-size: calc(28 * var(--rem));
  line-height: 1;
  &.--3 {
    margin-bottom: calc(10 * var(--rem));
  }
  &.--4 {
    margin-bottom: calc(12 * var(--rem));
  }
}
.project-info-box__detail {
  font-size: calc(22 * var(--rem));
  line-height: calc(44 / 22);
  letter-spacing: .1em;
  .--ja {
    font-size: calc(20 * var(--rem));
    letter-spacing: inherit;
  }
}


/* ===================
  .project-section-foot
=================== */
.project-section-foot {
  padding-block: calc(142 * var(--rem)) calc(140 * var(--rem));
}


/* ===================
  .project-logo-box
=================== */
.project-logo-box__main {
  width: calc(289 * var(--rem-pc));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}


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

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


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