@charset "UTF-8";

/* ========================================================
                      * Variable *
========================================================= */
:root {
  --pw: 1440; /* PC幅 */
  --sw: 390; /* SP幅 */
  --artboard-pw: 500; /* PCアートボード幅 */
  --artboard-sw: 390; /* 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: #FFFCF7;
  --base-font-color: #333;
  --color-green: #00A669;
  --color-yellow: #EDD56C;
  --color-yellow-accent: #FAF5CF;
  --color-yellow-light: #FFFBE2;

  --lp-font-ja: "Inter", "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-noto: "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: "Inter", sans-serif;
  --lp-font-meno-banner: "meno-banner", serif;
  --lp-font-poppins: "Poppins", sans-serif;

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

  --icon-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 15.167 5.091' preserveAspectRatio='none'><g fill='none' stroke='%23000' stroke-width='1.2'><path d='M0 4.424h14'/><path d='m10.5.424 4.243 4.243'/></g></svg>");
}

@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;
}



/* ===================
  LP Contents
=================== */
.lp_contents {
  --letter-spacing: .05em;
  position: relative;
  color: var(--base-font-color, #000);
  font-family: var(--lp-font-ja);
  font-optical-sizing: auto;
  font-weight: var(--font-medium);
  font-size: calc(13 * 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
=================== */
.slide-anime-wrapper {
  position: relative;
  --slide-speed: 4;
}
.slide-anime-5 {
  --animation-name: slideAnime5;
  --slide-count: 5;
  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);
  }
  &:nth-child(3) {
    animation-delay: calc(var(--slide-speed) * 2s);
  }
  &:nth-child(4) {
    animation-delay: calc(var(--slide-speed) * 3s);
  }
  &:nth-child(5) {
    animation-delay: calc(var(--slide-speed) * 4s);
  }
}
/* .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 slideAnime5 {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}
/* @keyframes slideAnime3 {
  0% { opacity: 0; }
  10% { opacity: 1; }
  33% { opacity: 1; }
  43% { opacity: 0; }
  100% { opacity: 0; }
} */

@keyframes scrollBorder {
  0% { translate: 0 -100%; }
  40% { translate: 0% 0; }
  60% { translate: 0% 0; }
  100% { translate: 0 100%; }
}

@keyframes scrollBorderHorizontal {
  0% { translate: -100% 0; }
  40% { translate: 0% 0; }
  60% { translate: 0% 0; }
  100% { translate: 100% 0; }
}



/* ===================
  Layout
=================== */
.layout-background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
  /* max-height: 100vh; */
  background: var(--lp-background-color);
}
.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;
  width: var(--width, calc(190 * var(--rem)));
  height: var(--height, calc(36 * var(--rem)));
  margin-inline: auto;
  background: var(--button-color, #FFFDF8);
  border: 1px solid currentColor;
  border-radius: calc(2 * var(--rem));
}
.component-button__text {
  color: var(--text-color, var(--base-font-color));
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-medium);
  letter-spacing: .02em;
}

.component-button--secondary {
  --button-color: var(--color-green);
  --text-color: #fff;
  border: none;
}
.component-button--tertiary {
  --button-color: rgba(255, 255, 255, .5);
  --text-color: #fff;
  border-color: #fff;
}
.component-button--arrow {
  &::after {
    position: absolute;
    top: 50%;
    right: calc(10 * var(--rem));
    content: "";
    display: block;
    width: calc(15 * var(--rem));
    height: calc(4 * var(--rem));
    background: var(--text-color, currentColor);
    mask: var(--icon-arrow-right) no-repeat center/100% 100%;
    translate: 0 -50%;
  }
}
.component-button--arrow-down {
  &::after {
    position: absolute;
    top: 50%;
    right: calc(16 * var(--rem));
    content: "";
    display: block;
    width: calc(8 * var(--rem));
    height: calc(4 * var(--rem));
    background: var(--text-color, currentColor);
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9.2 5.622' preserveAspectRatio='none'><path fill='%23000' stroke='%23000' stroke-width='1.2' d='M4.343 4.916.707 1.28a.364.364 0 0 1 .515-.515l3.374 3.379L7.979.763a.364.364 0 0 1 .515.515L4.858 4.914a.364.364 0 0 1-.515 0Z'/></svg>") no-repeat center/100% 100%;
    translate: 0 -50%;
  }
}

/* link point */
.component-link-point {
  &::after {
    content: "";
    display: block;
  width: calc(12 * var(--rem));
  height: calc(12 * var(--rem));
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 calc(6 * var(--rem)) rgba(0, 0, 0, .16);
  /* opacity: .9; */
  animation: 2s linear 2s infinite blinking;
}
}

@keyframes blinking {
  0% {
    opacity: 1;
    scale: 1;
  }
  24% {
    opacity: 1;
    scale: 1.2;
  }
  48% {
    opacity: 0;
    scale: 1.2;
  }
  52% {
    opacity: 0;
    scale: .8;
  }
  76% {
    opacity: 1;
    scale: .9;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}


/* ===================
  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 top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) calc(94 * var(--rem)), rgba(0, 0, 0, 1) 100%);
    &.is-open {
      mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    }
  }
}


/* ===================
  Tab
=================== */
.project-tab-content__container {
  position: relative;
}
.js-tab__content {
  transition: opacity .6s;
  will-change: opacity, height, pointer-events, padding;
  &:not(.is-active) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-block: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  &.is-active {
    height: auto;
    opacity: 1;
    pointer-events: auto;
  }
}



.project-swiper {
  .swiper-slide,
  .swiper-slide img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }
  .swiper-slide {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  /* pagination */
  --swiper-pagination-bullet-horizontal-gap: calc(10 * var(--rem));
  --swiper-pagination-bullet-width: calc(6 * var(--rem));
  --swiper-pagination-bullet-height: calc(6 * var(--rem));
  --swiper-pagination-bullet-inactive-color: var(--color-green);
  --swiper-pagination-bullet-inactive-opacity: 0.3;
  --swiper-pagination-color: var(--color-green);
  .swiper-pagination {
    display: flex;
    justify-content: center;
  }
  .swiper-pagination-bullet {
    display: block;
  }
  /* navigation */
  --swiper-navigation-size: calc(36 * var(--rem));
  .swiper-button-next,
  .swiper-button-prev {
    width: var(--swiper-navigation-size);
    z-index: 10 !important;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
  }
  .swiper-button-prev {
    left: calc(15 * var(--rem));
  }
  .swiper-button-next {
    right: calc(15 * var(--rem));
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/icon_navigation.png) no-repeat center / contain;
  }
  .swiper-button-prev:after {
    rotate: 180deg;
  }
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: calc(0 * var(--rem));
  }
}



/**
 * project-mainvisual
 */
.project-mainvisual {
  position: relative;
  .component-scroll {
    position: absolute;
    bottom: calc(10 * var(--rem));
    right: calc(11 * var(--rem));
  }
}

.component-scroll {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--rem));
  writing-mode: vertical-rl;
}
.component-scroll__text {
  color: #fff;
  font-size: calc(11 * var(--rem));
  line-height: 1;
}
.component-scroll__border {
  position: relative;
  display: block;
  width: 1px;
  height: calc(60 * var(--rem));
  overflow: hidden;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
  }
  &::before {
    opacity: .2;
  }
  &::after {
    animation: scrollBorder 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }
}


/**
 * project-main
 */
.project-main {
  position: relative;
  padding-bottom: calc(70 * var(--rem));
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5;
    width: 100%;
    height: 100%;
    background: #fff;
  }
}


/**
 * section-lead
 */
.section-lead {
  padding-top: calc(54 * var(--rem));
  padding-bottom: calc(62 * var(--rem));
}
.section-lead__text {
  font-size: calc(15 * var(--rem));
  line-height: calc(35 / 15);
  text-align: center;
  & + & {
    margin-top: calc(21 * var(--rem));
  }
}


/**
 * section-campaign
 */
.section-campaign {
  width: calc(360 * var(--rem));
  margin-inline: auto;
  padding-top: calc(46 * var(--rem));
  padding-bottom: calc(29 * var(--rem));
  padding-inline: calc(25 * var(--rem));
  background: #FFFDF7;
  border: 1px solid #DDD8CC;
}
.section-campaign__heading {
  margin-bottom: calc(28 * var(--rem));
  font-family: var(--lp-font-meno-banner);
  font-size: calc(32 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(34 / 32);
  letter-spacing: .02em;
  text-align: center;
}

.component-campaign-date {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(300 * var(--rem));
  height: calc(38 * var(--rem));
  margin-inline: auto;
  padding-right: calc(4 * var(--rem));
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.component-campaign-date__text {
  font-family: var(--lp-font-poppins);
  font-size: calc(15 * var(--rem));
  font-weight: var(--font-semibold);
  letter-spacing: .02em;
  .--large {
    font-size: calc(20 * var(--rem));
    letter-spacing: .02em;
  }
}


/**
 * project-campaign-block
 */
.project-campaign-block__list {
  margin-top: calc(30 * var(--rem));
}
.project-campaign-block {
  padding-top: calc(22 * var(--rem));
  padding-bottom: calc(22 * var(--rem));
  background: #FCFAF0;
  & + & {
    margin-top: calc(10 * var(--rem));
  }
  &:has(.project-campaign-block__button) {
    padding-bottom: calc(25 * var(--rem));
  }
}
.project-campaign-block__head {
  color: #BEA34B;
  font-weight: var(--font-bold);
  text-align: center;
}
.project-campaign-block__label {
  margin-bottom: calc(3 * var(--rem));
  font-family: var(--lp-font-meno-banner);
  font-size: calc(13 * var(--rem));
  line-height: calc(20 / 13);
}
.project-campaign-block__label--2 {
  margin-bottom: calc(5 * var(--rem));
}
.project-campaign-block__label--3 {
  margin-bottom: calc(7 * var(--rem));
}
.project-campaign-block__heading {
  font-family: var(--lp-font-noto);
  font-size: calc(18 * var(--rem));
  line-height: calc(22 / 18);
  .en {
    font-family: var(--lp-font-en);
    font-size: calc(18 * var(--rem));
    .--large {
      font-size: calc(26 * var(--rem));
    }
  }
}
.project-campaign-block__image {
  width: calc(200 * var(--rem));
  margin-top: calc(14 * var(--rem));
  margin-inline: auto;
}
.project-campaign-block__image--2 {
  margin-top: calc(17 * var(--rem));
}
.project-campaign-block__image--3 {
  margin-top: calc(18 * var(--rem));
}
.project-campaign-block__body {
  margin-top: calc(15 * var(--rem));
  text-align: center;
}
.project-campaign-block__text {
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(21 / 13);
  .em {
    font-size: calc(15 * var(--rem));
    font-weight: var(--font-bold);
    line-height: 1.2;
    .--large {
      font-size: calc(20 * var(--rem));
    }
  }
  .em--2 {
    display: block;
    margin-top: 1px;
    line-height: 1.47;
  }
  .em--3 {
    display: block;
    line-height: 1.5;
  }
}
.project-campaign-block__note {
  margin-top: calc(7 * var(--rem));
  font-size: calc(11 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(22 / 11);
}
.project-campaign-block__button {
  margin-top: calc(16 * var(--rem));
}


/**
 * section-lineup
 */
.section-lineup {
  padding-top: calc(93 * var(--rem));
}
.section-lineup__heading {
  font-family: var(--lp-font-meno-banner);
  font-size: calc(40 * var(--rem));
  font-weight: var(--font-bold);
  letter-spacing: .02em;
  text-align: center;
}
.section-lineup__headline-sub {
  margin-top: calc(27 * var(--rem));
  font-size: calc(16 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(28 / 16);
  text-align: center;
}


/**
 * lineup-list
 */
.lineup-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: calc(31 * var(--rem));
}
.lineup-list__item {
  background: #fff;
  border-top: 1px solid #EFEFEF;
  border-bottom: 1px solid #EFEFEF;
  & + & {
    border-left: 1px solid #EFEFEF;
  }
}
.lineup-list__item-main {
  padding-block: calc(20 * var(--rem));
}
.lineup-list__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: calc(20 * var(--rem));
  margin-inline: auto;
  margin-bottom: calc(8 * var(--rem));
  padding-inline: calc(10 * var(--rem));
  background: var(--bg-color);
  border-radius: calc(10 * var(--rem));
  color: #fff;
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-semibold);
  letter-spacing: 0;
}
.lineup-list__heading {
  font-size: calc(14 * var(--rem));
  font-weight: var(--font-semibold);
  line-height: calc(20 / 14);
  letter-spacing: .02em;
  text-align: center;
}
.lineup-list__lead {
  margin-top: calc(3 * var(--rem));
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-semibold);
  line-height: calc(18 / 13);
  letter-spacing: .02em;
  text-align: center;
}
.lineup-list__image {
  width: calc(175 * var(--rem));
  margin-top: calc(8 * var(--rem));
  margin-inline: auto;
}
.lineup-list__body {
  margin-top: calc(8 * var(--rem));
  padding-left: calc(20 * var(--rem));
}
.lineup-list__name {
  font-family: var(--lp-font-poppins);
  font-size: calc(18 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(20 / 18);
  letter-spacing: 0;
}
.lineup-list__name--ja {
  margin-top: calc(5 * var(--rem));
  font-size: calc(11 * var(--rem));
  font-weight: var(--font-semibold);
  line-height: calc(14 / 11);
}
.lineup-list__price {
  margin-top: calc(9 * var(--rem));
  .capacity {
    margin-right: calc(6 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(12 * var(--rem));
    font-weight: var(--font-medium);
    letter-spacing: .02em;
  }
  .price {
    font-size: calc(14 * var(--rem));
    font-weight: var(--font-bold);
    letter-spacing: .02em;
    .--small {
      font-size: calc(10 * var(--rem));
      font-weight: var(--font-medium);
      letter-spacing: .02em;
    }
  }
}
.lineup-list__button {
  --width: calc(155 * var(--rem));
  --height: calc(32 * var(--rem));
  margin-top: calc(11 * var(--rem));
  .component-button {
    margin-inline: 0;
  }
}
.lineup-list__item-range__block {
  height: calc(155 * var(--rem));
  padding-top: calc(15 * var(--rem));
  padding-inline: calc(10 * var(--rem));
  background: var(--bg-color);
}
.lineup-list__item-range {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(30 * var(--rem));
  margin-bottom: calc(13 * var(--rem));
  background: #fff;
}
.lineup-list__item-range__text {
  font-size: calc(10 * var(--rem));
  font-weight: var(--font-semibold);
  letter-spacing: 0;
}
.lineup-list__item-range__bar {
  width: calc(70 * var(--rem));
  margin-left: calc(5 * var(--rem));
  margin-right: calc(4 * var(--rem));
}
.lineup-list__item-range__list {
  margin-left: calc(5 * var(--rem));
}
.lineup-list__item-range__list-item {
  display: flex;
  gap: calc(6 * var(--rem));
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(16 / 12);
  & + & {
    margin-top: calc(7 * var(--rem));
  }
  &::before {
    content: '';
    display: block;
    width: calc(11 * var(--rem));
    height: calc(10 * var(--rem));
    margin-top: .125lh;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='11' viewBox='0 0 12.004 11.2' preserveAspectRatio='none'><path fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' d='M3.933 5.044 5.6 6.711l5.556-5.556M10.6 5.6v3.333A1.667 1.667 0 0 1 8.933 10.6H2.267A1.667 1.667 0 0 1 .6 8.933V2.267A1.667 1.667 0 0 1 2.267.6h5.556'/></svg>") no-repeat center / 100% 100%;
    background: var(--check-color);
  }
}


/**
 * section-need
 */
.section-need {
  position: sticky;
  top: 0;
  z-index: -4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(476 * var(--rem));
  padding-top: calc(42 * var(--rem));
  background: url(../img/bg_need.png) no-repeat center right / calc(280 * var(--rem)) auto;
}
.section-need__heading {
  font-family: var(--lp-font-meno-banner);
  font-size: calc(34 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(34 / 34);
  letter-spacing: .02em;
  text-align: center;
}
.section-need__heading-sub {
  margin-top: calc(15 * var(--rem));
  font-size: calc(18 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(28 / 18);
}

.after-sticky {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    background: #fff;
  }
}


/**
 * section-diagnosis
 */
.section-diagnosis {
  width: calc(350 * var(--rem));
  margin-inline: auto;
  padding-top: calc(35 * var(--rem));
  padding-bottom: calc(40 * var(--rem));
  padding-inline: calc(20 * var(--rem));
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.section-diagnosis__heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: calc(32 * var(--rem));
  margin-bottom: calc(11 * var(--rem));
  margin-inline: auto;
  padding-left: calc(19 * var(--rem));
  padding-right: calc(15 * var(--rem));
  border: 1px solid #666;
  border-radius: calc(16 * var(--rem));
  font-size: calc(15 * var(--rem));
  font-weight: var(--font-bold);
  &::before,
  &::after {
    content: '';
    position: absolute;
    bottom: -1px;
    height: 1px;
  }
  &::before {
    left: 50%;
    width: calc(8 * var(--rem));
    background: #fff;
    translate: -50% 0;
  }
  &::after {
    left: 50%;
    width: calc(16 * var(--rem));
    background: #666;
    rotate: -55deg;
    translate: calc(-12 * var(--rem)) 0;
    transform-origin: right top;
  }
}


/**
 * diagnosis-list
 */
.diagnosis-list__item {
  padding-top: calc(20 * var(--rem));
  padding-bottom: calc(40 * var(--rem));
  & + & {
    border-top: 1px solid #eee;
  }
}
.diagnosis-list__label {
  margin-bottom: calc(8 * var(--rem));
  font-size: calc(16 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(28 / 16);
  text-align: center;
}
.diagnosis-list__radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--rem));
}
.diagnosis-list__radio-list {
  position: relative;
}
.diagnosis-list__radio-list__label {
  position: absolute;
  bottom: calc(-4 * var(--rem));
  left: 50%;
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-bold);
  letter-spacing: 0;
  white-space: nowrap;
  translate: -50% 100%;
  &.--left {
    color: #A0C4DB;
  }
  &.--right {
    color: #DBCC6C;
  }
}
.section-diagnosis__button {
  --width: calc(270 * var(--rem));
  --height: calc(44 * var(--rem));
  margin-top: calc(11 * var(--rem));
  .component-button--secondary {
    &:not(.is-active) {
      --button-color: #E5E5E5;
      pointer-events: none;
    }
  }
}


/**
 * component-radio
 */
.component-radio {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  &:not(label) {
    cursor: default;
  }
  .component-radio__item {
    --size: 20;
    position: relative;
    width: calc(var(--size) * var(--rem));
    height: calc(var(--size) * var(--rem));
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    appearance: none;
    cursor: pointer;
    &.--left {
      --checked-color: #C4DCEB;
    }
    &.--right {
      --checked-color: #E8DB84;
    }
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: calc(calc(var(--size) - 8) * var(--rem));
      height: calc(calc(var(--size) - 8) * var(--rem));
      background: #F5F5F5;
      border-radius: 50%;
      translate: -50% -50%;
    }
    &:checked::before {
      background-color: var(--checked-color);
    }
    &.--large {
    --size: 30;
    }
    &.--medium {
    --size: 25;
    }
  }
}


/**
 * section-item-top
 */
.section-item-top {
  padding-top: calc(104 * var(--rem));
  padding-bottom: calc(60 * var(--rem));
}
.section-item-top__heading {
  font-family: var(--lp-font-meno-banner);
  font-size: calc(44 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(45 / 44);
  letter-spacing: .02em;
  text-align: center;
}
.section-item-top__image {
  width: calc(280 * var(--rem));
  margin-top: calc(-11 * var(--rem));
  margin-left: auto;
  margin-right: calc(15 * var(--rem));
}
.section-item-top__image--2 {
  margin-top: calc(-17 * var(--rem));
}
.section-item-top__body {
  margin-top: calc(15 * var(--rem));
  text-align: center;
}
.section-item-top__lead {
  font-size: calc(18 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(28 / 18);
}
.section-item-top__name {
  margin-top: calc(22 * var(--rem));
  font-size: calc(14 * var(--rem));
  font-weight: var(--font-bold);
  line-height: 1;
}
.section-item-top__price {
  margin-top: calc(13 * var(--rem));
  .capacity {
    margin-right: calc(9 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(14 * var(--rem));
    font-weight: var(--font-medium);
    letter-spacing: .02em;
  }
  .price {
    font-size: calc(18 * var(--rem));
    font-weight: var(--font-bold);
    letter-spacing: .02em;
    .--small {
      font-size: calc(14 * var(--rem));
      font-weight: var(--font-medium);
      letter-spacing: .02em;
    }
  }
}
.section-item-top__button {
  --width: calc(230 * var(--rem));
  --height: calc(44 * var(--rem));
  margin-top: calc(23 * var(--rem));
  .component-button--arrow {
    &::after {
      right: calc(16 * var(--rem));
      width: calc(20 * var(--rem));
      height: calc(6 * var(--rem));
    }
  }
  .component-button__text {
    font-size: calc(14 * var(--rem));
  }
}


/**
 * block-point
 */
.block-point {
  width: calc(360 * var(--rem));
  height: calc(400 * var(--rem));
  margin-inline: auto;
  padding-top: calc(43 * var(--rem));
  padding-left: calc(20 * var(--rem));
}
.block-point--1 {
  background: url(../img/bg_point_1.jpg) no-repeat top left / 100% auto;
}
.block-point--2 {
  padding-top: calc(58 * var(--rem));
  background: url(../img/bg_point_2.jpg) no-repeat top left / 100% auto;
  .point-list__item {
    & + & {
      &::before {
        top: calc(-60 * var(--rem));
        height: calc(72 * var(--rem));
      }
    }
  }
}
.block-point__heading {
  margin-bottom: calc(29 * var(--rem));
  font-family: var(--lp-font-meno-banner);
  font-size: calc(30 * var(--rem));
  font-weight: var(--font-bold);
  line-height: 1;
  letter-spacing: .02em;
}
.point-list__item {
  display: flex;
  gap: calc(10 * var(--rem));
  & + & {
    position: relative;
    margin-top: calc(28 * var(--rem));
    &::before {
      content: '';
      position: absolute;
      top: calc(-38 * var(--rem));
      left: calc(11 * var(--rem));
      display: block;
      width: 1px;
      height: calc(50 * var(--rem));
      background: rgba(51, 51, 51, .2);
    }
  }
}
.point-list__number {
  display: grid;
  place-items: center;
  width: calc(22 * var(--rem));
  height: calc(22 * var(--rem));
  margin-top: calc(12 * var(--rem));
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(51, 51, 51, .3);
  border-radius: 50%;
  font-family: var(--lp-font-meno-banner);
  font-size: calc(14 * var(--rem));
  font-weight: var(--font-bold);
  letter-spacing: .02em;
}
.point-list__text {
  font-size: calc(14 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(22 / 14);
  .em {
    font-weight: var(--font-heavy);
  }
}


/**
 * fragrance-tab
 */
.fragrance-tab__wrapper {
  padding-top: calc(55 * var(--rem));
}
.fragrance-tab__wrapper-heading {
  margin-bottom: calc(11 * var(--rem));
  font-family: var(--lp-font-meno-banner);
  font-size: calc(30 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(45 / 30);
  letter-spacing: .02em;
  text-align: center;
}
.fragrance-tab-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--rem));
  padding-bottom: calc(5 * var(--rem));
}
.fragrance-tab-list__button-image {
  width: calc(110 * var(--rem));
  height: calc(110 * var(--rem));
  padding: calc(5 * var(--rem));
  background: #fff;
  border: 1px solid transparent;
  border-radius: 50%;
  .js-tab__trigger.is-active & {
    border-color: #00A669;
  }
}
.fragrance-tab-list__button-text {
  margin-top: calc(3 * var(--rem));
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(28 / 13);
  text-align: center;
}


/**
 * project-tab-content
 */
.project-tab-content {
  position: relative;
  padding-bottom: calc(100 * var(--rem));
  clip-path: inset(0);
  @media (768px <= width) {
    background: var(--bg-image) no-repeat center / auto 100%;
    background-attachment: fixed;
  }
  &.is-active {
    &::before {
      @media (width < 768px) {
      content: '';
      position: fixed;
      top: 0;
      left: 50%;
      width: calc(390 * var(--rem));
      /* height: 100%; */
      height: 100vh;
      background-image: var(--bg-image);
      background-size: cover;
      background-position: center;
      translate: -50% 0;
      z-index: -1;
      pointer-events: none;
    }
  }
  }
  .clip {
    display: flex;
    .left,
    .center,
    .right {
      height: calc(14 * var(--rem));
      margin-top: -1px;
      background: #fff;
    }
    .center {
      width: calc(50 * var(--rem));
      clip-path: polygon(100% -1px, 101% 100%, 50% 1px, -1px 105%, 0px -1px)
    }
    .right {
      flex-grow: 1;
    }
  }
}
.project-tab-content--1 {
  --bg-image: url(../img/tab_bg_1.jpg);
  .clip {
    .left {
      width: calc(108 * var(--rem));
    }
  }
}
.project-tab-content--2 {
  --bg-image: url(../img/tab_bg_2.jpg);
  .clip {
    .left {
      width: calc(233 * var(--rem));
    }
  }
}
.project-tab-content--3 {
  --bg-image: url(../img/tab_bg_3.jpg);
  .clip {
    .left {
      width: calc(44 * var(--rem));
    }
  }
}
.project-tab-content--4 {
  --bg-image: url(../img/tab_bg_4.jpg);
  .clip {
    .left {
      width: calc(170 * var(--rem));
    }
  }
}
.project-tab-content--5 {
  --bg-image: url(../img/tab_bg_5.jpg);
  .clip {
    .left {
      width: calc(295 * var(--rem));
    }
  }
}
.project-tab-content__top {
  padding-top: calc(40 * var(--rem));
  padding-bottom: calc(49 * var(--rem));
  color: #fff;
}
.project-tab-content__top-visual {
  position: relative;
  padding-left: calc(25 * var(--rem));
  & a {
    &:hover {
      opacity: 1;
    }
  }
}
.project-tab-content__top-visual__label {
  position: absolute;
  top: 50%;
  left: calc(25 * var(--rem));
  margin-top: calc(5 * var(--rem));
  translate: 0 -50%;
}
.project-tab-content__top-visual__label-main {
  font-family: var(--lp-font-poppins);
  font-size: calc(30 * var(--rem));
  font-weight: var(--font-medium);
  line-height: 1;
  letter-spacing: 0;
}
.project-tab-content__top-visual__label-sub {
  margin-top: calc(11 * var(--rem));
  font-size: calc(16 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(28 / 16);
}
.project-tab-content__top-visual__image {
  width: calc(220 * var(--rem));
  margin-right: calc(-10 * var(--rem));
  margin-left: auto;
}
.project-tab-content__top-text__container {
  --max-height: calc(124 * var(--rem));
  width: calc(340 * var(--rem));
  margin-top: calc(18 * var(--rem));
  margin-inline: auto;
}
.project-tab-content__top-text {
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(26 / 13);
}
.project-tab-content__button {
  --width: calc(230 * var(--rem));
  --height: calc(44 * var(--rem));
  margin-top: calc(50 * var(--rem));
  .component-button__text {
    font-size: calc(14 * var(--rem));
  }
}


.component-viewmore {
  position: relative;
  display: block;
  margin-top: calc(16 * var(--rem));
  margin-inline: auto;
  font-family: var(--lp-font-en);
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(20 / 12);
  letter-spacing: .02em;
  .border {
    position: relative;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    overflow: hidden;
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
    }
    &::before {
      opacity: .4;
    }
    &::after {
      animation: scrollBorderHorizontal 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    }
  }
}


/**
 * block-award
 */
.block-award {
  width: calc(340 * var(--rem));
  margin-top: calc(25 * var(--rem));
  margin-inline: auto;
  margin-bottom: calc(40 * var(--rem));
  padding: calc(5 * var(--rem));
  background: rgba(255, 255, 255, .9);
}
.block-award__inner {
  padding-top: calc(16 * var(--rem));
  padding-right: calc(20 * var(--rem));
  padding-bottom: calc(20 * var(--rem));
  padding-left: calc(25 * var(--rem));
  border: 1px solid #BC9C31;
}
.block-award__heading {
  display: flex;
  justify-content: center;
  gap: calc(4 * var(--rem));
  margin-bottom: calc(8 * var(--rem));
  color: #BC9C31;
  font-size: calc(15 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(28 / 15);
  letter-spacing: .05em;
  text-align: center;
  &::before {
    content: '';
    display: block;
    width: calc(20 * var(--rem));
    height: calc(18 * var(--rem));
    background: currentColor;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18' preserveAspectRatio='none'><g fill='%23000'><path d='M17.493 8.568c-.686.583-2.137 1.879-3.828 1.385-1.794-.524-3.1-3.854-3.513-5.2-.029-.092-.09-.137-.151-.135s-.122.043-.151.135c-.415 1.344-1.719 4.674-3.513 5.2-1.691.494-3.142-.8-3.828-1.385-.13-.11-.286.068-.235.268l1.61 6.368h12.234l1.61-6.368c.051-.2-.106-.378-.235-.268'/><path d='M15.616 18H4.272c-.31 0-.563-.356-.563-.791s.253-.791.563-.791h11.344c.31 0 .563.356.563.791s-.253.791-.563.791'/><path d='M11.172 1.517a1.211 1.211 0 1 0-2.344 0 1.211 1.211 0 1 0 2.344 0'/><path d='M20 6.132a1.211 1.211 0 1 0-1.172 1.517A1.38 1.38 0 0 0 20 6.132'/><path d='M2.344 6.132a1.38 1.38 0 0 0-1.172-1.517 1.567 1.567 0 0 0 0 3.033 1.38 1.38 0 0 0 1.172-1.516'/></g></svg>") no-repeat center/100% 100%;
  }
}
.block-award__list-item {
  display: flex;
  gap: calc(6 * var(--rem));
  color: var(--base-font-color);
  font-family: var(--lp-font-noto);
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(16 / 13);
  &::before {
    content: '';
    display: block;
    width: calc(5 * var(--rem));
    height: calc(5 * var(--rem));
    margin-top: .425lh;
    background: #BC9C31;
  }
  & + & {
    margin-top: calc(13 * var(--rem));
  }
  .--large {
    font-size: calc(18 * var(--rem));
  }
}



/**
 * block-pyramid
 */
.block-pyramid {
  width: calc(340 * var(--rem));
  margin-inline: auto;
  padding-top: calc(17 * var(--rem));
  padding-bottom: calc(25 * var(--rem));
  background: rgba(255, 255, 255, .85);
}
.block-heading {
  font-family: var(--lp-font-meno-banner);
  font-size: calc(24 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(45 / 24);
  letter-spacing: .02em;
  text-align: center;
}
.block-pyramid__heading {
  margin-bottom: calc(8 * var(--rem));
}
.block-pyramid__fig {
  width: calc(300 * var(--rem));
  margin-inline: auto;
}


/**
 * block-review
 */
.block-review {
  width: calc(340 * var(--rem));
  margin-top: calc(30 * var(--rem));
  margin-inline: auto;
  padding-top: calc(12 * var(--rem));
  padding-inline: calc(20 * var(--rem));
  padding-bottom: calc(23 * var(--rem));
  background: #fff;
}
.block-review__heading {
  margin-bottom: calc(1 * var(--rem));
}
.block-review__head {
  display: flex;
  align-items: center;
  gap: calc(9.6 * var(--rem));
  margin-bottom: calc(8 * var(--rem));
}
.block-review__head-image {
  width: calc(50 * var(--rem));
}
.block-review__head-body {
  padding-top: calc(6 * var(--rem));
}
.block-review__star {
  width: calc(91 * var(--rem));
}
.block-review__name {
  margin-top: calc(6 * var(--rem));
  font-size: calc(12 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(23 / 12);
  .--small {
    font-size: calc(10 * var(--rem));
  }
}
.block-review__text {
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-regular);
  line-height: calc(23 / 13);
}


/**
 * section-map
 */
.section-map {
  padding-top: calc(65 * var(--rem));
  padding-bottom: calc(75 * var(--rem));
  background: #fff;
}
.section-map__heading {
  font-family: var(--lp-font-meno-banner);
  font-size: calc(30 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(45 / 30);
  letter-spacing: .02em;
  text-align: center;
}
.section-map__heading-sub {
  margin-top: calc(1 * var(--rem));
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(23 / 13);
  text-align: center;
}
.section-map__fig {
  position: relative;
  width: calc(360 * var(--rem));
  margin-top: calc(27 * var(--rem));
  margin-inline: auto;
  .component-link-point {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(30 * var(--rem));
    height: calc(37 * var(--rem));
  }
  .point--1 {
    top: calc(257 * var(--rem));
    left: calc(83 * var(--rem));
  }
  .point--2 {
    top: calc(80 * var(--rem));
    left: calc(58 * var(--rem));
  }
  .point--3 {
    top: calc(141 * var(--rem));
    left: calc(123 * var(--rem));
  }
  .point--4 {
    top: calc(66 * var(--rem));
    left: calc(220 * var(--rem));
  }
  .point--5 {
    top: calc(176 * var(--rem));
    left: calc(250 * var(--rem));
  }
}


/**
 * section-staff-review
 */
.section-staff-review {
  padding-top: calc(56 * var(--rem));
  padding-bottom: calc(65 * var(--rem));
  background: #FFFBF4;
}
.section-staff-review__heading {
  font-family: var(--lp-font-meno-banner);
  font-size: calc(32 * var(--rem));
  font-weight: var(--font-bold);
  line-height: calc(45 / 32);
  letter-spacing: .02em;
  text-align: center;
}
.section-staff-review__heading-sub {
  margin-top: calc(2 * var(--rem));
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(23 / 13);
  text-align: center;
}



.staff-review-slider {
  margin-top: calc(21 * var(--rem));
  padding-inline: calc(12.5 * var(--rem));
  padding-bottom: calc(21 * var(--rem));
}
.staff-review {
  width: calc(260 * var(--rem));
  margin-inline: calc(7.5 * var(--rem));
  background: #FAF5EC;
}
.staff-review__inner {
  display: block;
  padding-top: calc(10 * var(--rem));
  padding-inline: calc(10 * var(--rem));
  padding-bottom: calc(15 * var(--rem));
}
.staff-review__body {
  padding-top: calc(12 * var(--rem));
  padding-left: calc(2 * var(--rem));
}
.staff-review__profile {
  display: flex;
  gap: calc(10 * var(--rem));
}
.staff-review__thumb {
  width: calc(50 * var(--rem));
}
.staff-review__profile-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: calc(11 * var(--rem));
  line-height: calc(16 / 11);
}
.staff-review__profile-body__meta {
  margin-bottom: calc(4 * var(--rem));
  color: #666;
  font-weight: var(--font-medium);
}
.staff-review__profile-body__label {
  font-weight: var(--font-bold);
}
.staff-review__profile-body__name {
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-bold);
}
.staff-review__check {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(6.6 * var(--rem));
  width: fit-content;
  margin-top: calc(2 * var(--rem));
  margin-right: calc(8 * var(--rem));
  margin-left: auto;
  &::before {
    position: absolute;
    content: '';
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #333;
  }
  &::after {
    content: '';
    display: block;
    width: calc(4 * var(--rem));
    height: calc(8 * var(--rem));
    background: #333;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='9' viewBox='0 0 5.21 8.8' preserveAspectRatio='none'><path fill='%23000' stroke='%23000' stroke-width='.8' d='M4.704 4.657 1.068 8.293a.364.364 0 0 1-.515-.515l3.379-3.374L.551 1.021a.364.364 0 0 1 .515-.515l3.636 3.636a.364.364 0 0 1 0 .515Z'/></svg>") no-repeat center/100% 100%;
  }
}
.staff-review__check-text {
  font-family: var(--lp-font-poppins);
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(20 / 13);
  letter-spacing: .02em;
}


.swiper-scrollbar {
  border-radius: calc(3 * var(--rem));
  background: rgba(51, 51, 51, .1);
}
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
  bottom: 0;
  left: 50%;
  width: calc(290 * var(--rem));
  height: calc(3 * var(--rem));
  translate: -50% 0;
}
.swiper-scrollbar-drag {
  background: #888;
}


/**
 * section-about
 */
.section-about {
  padding-top: calc(72 * var(--rem));
  padding-bottom: calc(70 * var(--rem));
}
.section-about__heading {
  text-align: center;
  > span {
    display: block;
    font-family: var(--lp-font-meno-banner);
    font-size: calc(32 * var(--rem));
    font-weight: var(--font-bold);
    line-height: calc(38 / 32);
    letter-spacing: .02em;
  }
  .--small {
    font-size: calc(24 * var(--rem));
  }
}
.section-about__image {
  width: calc(350 * var(--rem));
  margin-top: calc(27 * var(--rem));
  margin-inline: auto;
}
.section-about__body-container {
  margin-top: calc(27 * var(--rem));
  .component-viewmore {
    margin-top: calc(1 * var(--rem));
    .border {
      &::before {
        background: currentColor;
        opacity: 1;
      }
      &::after {
        content: none;
      }
    }
  }
}
.section-about__body {
  --max-height: calc(250 * var(--rem));
}
.section-about__body-text {
  font-size: calc(13 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(28 / 13);
  text-align: center;
  & + & {
    margin-top: calc(16 * var(--rem));
  }
}
.section-about__button {
  --width: calc(330 * var(--rem));
  --height: calc(50 * var(--rem));
  margin-top: calc(41 * var(--rem));
  .component-button__text {
    font-size: calc(14 * var(--rem));
  }
}


/**
 * project-footer-nav
 */
.project-footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  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;
  }
}
.footer-nav {
  display: flex;
}
.footer-nav__item {
  width: calc(100% / 2);
  &:nth-child(1) {
    --bg-color: #ECF6FC;
  }
  &:nth-child(2) {
    --bg-color: #FCFDE7;
  }
}
.footer-nav__link {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--rem));
  width: 100%;
  height: calc(54 * var(--rem));
  padding-left: calc(8 * var(--rem));
  background: var(--bg-color);
  box-shadow: 0 0 calc(2 * var(--rem)) rgba(0, 0, 0, .05);
}
.footer-nav__image {
  width: calc(40 * var(--rem));
}
.footer-nav__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer-nav__name-en {
  font-family: var(--lp-font-poppins);
  font-size: calc(14 * var(--rem));
  font-weight: var(--font-medium);
  line-height: calc(20 / 14);
  letter-spacing: 0;
}
.footer-nav__name-ja {
  font-size: calc(10 * var(--rem));
  font-weight: var(--font-semibold);
  line-height: calc(14 / 10);
}


/**
 * project-logo-box
 */
.project-logo-box {
  margin-top: calc(-46 * var(--rem-pc));
  text-align: center;
}
.project-logo-box__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(350 * var(--rem-pc));
  height: calc(37 * var(--rem-pc));
  margin-inline: auto;
  margin-bottom: calc(27 * var(--rem-pc));
  border-top: 1px solid rgba(178, 149, 80, .8);
  border-bottom: 1px solid rgba(178, 149, 80, .8);
  color: #B29550;
  font-weight: var(--font-semibold);
}
.project-logo-box__label-text {
  font-size: calc(14 * var(--rem-pc));
  letter-spacing: .06em;
  .en {
    font-family: var(--lp-font-poppins);
    font-size: calc(16 * var(--rem-pc));
    letter-spacing: .02em;
  }
}
.project-logo-box__label-icon {
  width: calc(17 * var(--rem-pc));
  height: calc(15 * var(--rem-pc));
  margin-left: calc(5.4 * var(--rem-pc));
  margin-right: calc(6.8 * var(--rem-pc));
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18' preserveAspectRatio='none'><g fill='%23000'><path d='M17.493 8.568c-.686.583-2.137 1.879-3.828 1.385-1.794-.524-3.1-3.854-3.513-5.2-.029-.092-.09-.137-.151-.135s-.122.043-.151.135c-.415 1.344-1.719 4.674-3.513 5.2-1.691.494-3.142-.8-3.828-1.385-.13-.11-.286.068-.235.268l1.61 6.368h12.234l1.61-6.368c.051-.2-.106-.378-.235-.268'/><path d='M15.616 18H4.272c-.31 0-.563-.356-.563-.791s.253-.791.563-.791h11.344c.31 0 .563.356.563.791s-.253.791-.563.791'/><path d='M11.172 1.517a1.211 1.211 0 1 0-2.344 0 1.211 1.211 0 1 0 2.344 0'/><path d='M20 6.132a1.211 1.211 0 1 0-1.172 1.517A1.38 1.38 0 0 0 20 6.132'/><path d='M2.344 6.132a1.38 1.38 0 0 0-1.172-1.517 1.567 1.567 0 0 0 0 3.033 1.38 1.38 0 0 0 1.172-1.516'/></g></svg>") no-repeat center/100% 100%;
}
.project-logo-box__sub {
  margin-bottom: calc(5 * var(--rem-pc));
  font-size: calc(24 * var(--rem-pc));
  font-weight: var(--font-semibold);
}
.project-logo-box__main {
  margin-top: calc(20 * var(--rem-pc));
  font-size: calc(30 * var(--rem-pc));
  font-weight: var(--font-semibold);
}


/**
 * project-menu
 */
.project-menu {
  width: calc(320 * var(--rem-pc));
}
.project-menu__list-item {
  margin-bottom: calc(10 * var(--rem-pc));
}
.project-menu__list-item__link {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rem-pc));
  width: 100%;
  height: calc(120 * var(--rem-pc));
  padding-left: calc(10 * var(--rem-pc));
  background: #FAF7ED;
  border-radius: calc(2 * var(--rem-pc));
}
.project-menu__list-item__image {
  width: calc(100 * var(--rem-pc));
}
.project-menu__list-item__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.project-menu__list-item__name-en {
  font-family: var(--lp-font-poppins);
  font-size: calc(18 * var(--rem-pc));
  font-weight: var(--font-medium);
  line-height: calc(22 / 18);
  letter-spacing: 0;
}
.project-menu__list-item__name-ja {
  margin-top: calc(7 * var(--rem-pc));
  font-size: calc(12 * var(--rem-pc));
  font-weight: var(--font-semibold);
  line-height: calc(16 / 12);
}
.project-menu__button {
  margin-top: calc(60 * var(--rem-pc));
  .component-button {
    width: calc(320 * var(--rem-pc));
    height: calc(50 * var(--rem-pc));
    border-radius: calc(2 * var(--rem-pc));
    &::after {
      right: calc(19 * var(--rem-pc));
      width: calc(20 * var(--rem-pc));
      height: calc(6 * var(--rem-pc));
    }
  }
  .component-button__text {
    margin-right: calc(18 * var(--rem-pc));
    font-size: calc(14 * var(--rem-pc));
  }
}


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



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

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


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