@charset "UTF-8";

/* ========================================================
                      * Variable *
========================================================= */
:root {
  --pw: 1400; /* PC幅 */
  --sw: 750; /* SP幅 */
  --artboard-pw: 510; /* 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: #f1f4f6;
  --base-font-color: #96a0a0;
  --color-accent: #edb7d2;

  --lp-font-ja: ryo-gothic-plusn, hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: jaf-bernina-sans, sans-serif;
  --font-ivy-bodoni: ivybodoni, sans-serif;

  --font-bernina-regular: 400;
  --font-bernina-semibold: 600;

  --icon-arrow: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036.5%2016.48%22%3E%3Cpath%20d%3D%22m35.75.94-17.5%2014L.75.94%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2.41px%22%2F%3E%3C%2Fsvg%3E');
}

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

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

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


/* ===================
  Animation
=================== */
.fade {
  opacity: 0;
  transition: opacity 1.8s var(--transition-timing);
  &.is-active {
    opacity: 1;
  }
}
.js-intersection-item {
  opacity: 0;
  translate: 0 5svh;
  transition: opacity 1.8s ease, translate 1.5s ease;
  .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; }
  10% { opacity: 1; }
  50% { opacity: 1; }
  60% { 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: 100% 0; }
  40% { translate: 0% 0; }
  60% { translate: 0% 0; }
  100% { translate: -100% 0; }
}


/* ===================
  LP Contents
=================== */
.lp_contents {
  --letter-spacing: .05em;
  position: relative;
  background: var(--lp-background-color, transparent);
  color: var(--base-font-color, #000);
  font-family: var(--lp-font-ja);
  font-weight: 500;
  font-size: calc(24 * 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
=================== */
.l-mobile-first {
  position: relative;
  @media (768px <= width) {
    display: flex;
  }
}
.l-mobile-first__left,
.l-mobile-first__right {
  position: relative;
  width: calc((100% - (var(--artboard-pw) * var(--rem-pc))) / 2);
}
.l-mobile-first__sticky {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.l-mobile-first__main {
  overflow-x: clip;
  background: #fff;
  @media (768px <= width) {
    width: calc(var(--artboard-pw) * var(--rem-pc));
  }
}


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


/* ===================
  Component
=================== */
.c-scroll {
  text-align: right;
  rotate: -90deg;
  transform-origin: right bottom;
}
.c-scroll__text {
  color: var(--color-accent);
  font-size: calc(20 * var(--rem));
  font-weight: var(--font-bernina-regular);
  line-height: 1;
  letter-spacing: .04em;
}
.c-scroll__arrow-wrapper {
  display: flex;
  align-items: flex-end;
  width: calc(200 * var(--rem));
  height: calc(10 * var(--rem));
  margin-top: calc(-1 * var(--rem));
  overflow: hidden;
}
.c-scroll__arrow {
  position: relative;
  display: block;
  width: calc(200 * var(--rem));
  height: 1px;
  background: var(--color-accent);
  animation: scrollBorder 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1 * var(--rem));
    display: block;
    width: calc(18 * var(--rem));
    height: 1px;
    background: var(--color-accent);
    rotate: -32deg;
    transform-origin: left bottom;
  }
}


/* ===================
  Modal
=================== */
/* body.is-modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
} */
.p-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: rgba(0, 0, 0, 0.4);
}
@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); }
}

.p-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(670 * var(--rem));
  max-width: 100vw;
  max-height: calc(100dvh - (60 * var(--rem)));
  translate: -50% -50%;
  transition: transform 0.3s ease-out;
  overflow-y: scroll;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.p-modal__close-button__wrapper {
  padding-bottom: calc(20 * var(--rem));
}
.p-modal__close-button {
  position: relative;
  display: block;
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  margin-left: auto;
  border: none;
  cursor: pointer;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(84.8528 * var(--rem));
    height: calc(3 * var(--rem));
    background-color: #fff;
  }
  &::before {
    translate: -50% -50%;
    rotate: 45deg;
  }
  &::after {
    translate: -50% -50%;
    rotate: -45deg;
  }
}


/* ===================
  .p-modal-content
=================== */
.p-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: calc(60 * var(--rem));
  background: #fff;
}
.p-modal-content__body {
  text-align: center;
}
.p-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(51 * var(--rem)) calc(55 * var(--rem));
}
.p-item-list__item {
  & a {
    display: block;
  }
}
.p-item-list__item-image {
  width: calc(245 * var(--rem));
  & img {
    width: 100%;
  }
}
.p-item-list__item-body {
  margin-top: calc(7 * var(--rem));
  color: #969696;
  font-size: calc(20 * var(--rem));
}
.p-item-list__item-label {
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-weight: var(--font-bernina-semibold);
  line-height: calc(35 / 20);
  letter-spacing: .065em;
  .--ja {
    font-family: var(--lp-font-ja);
    font-weight: 500;
    letter-spacing: .025em;
  }
}
.p-item-list__item-name {
  line-height: calc(35 / 20);
  letter-spacing: .025em;
  .--en {
    font-family: var(--lp-font-en);
    font-weight: var(--font-bernina-semibold);
    letter-spacing: .065em;
  }
}
.p-item-list__item-price {
  font-family: var(--lp-font-en);
  font-weight: var(--font-bernina-semibold);
  line-height: calc(35 / 20);
  letter-spacing: .065em;
  .--ja {
    font-family: var(--lp-font-ja);
    font-weight: 500;
    letter-spacing: .025em;
  }
}

.p-modal--1 {
  .p-item-list__item {
    &:nth-child(1) {
      translate: calc(6 * var(--rem)) calc(0 * var(--rem));
      .p-item-list__item-image {
        translate: calc(-6 * var(--rem)) calc(0 * var(--rem));
      }
    }
    &:nth-child(2) {
      translate: calc(4 * var(--rem)) calc(0 * var(--rem));
      .p-item-list__item-image {
        translate: calc(1 * var(--rem)) calc(0 * var(--rem));
      }
    }
    &:nth-child(3) {
      translate: calc(0 * var(--rem)) calc(8 * var(--rem));
      .p-item-list__item-image {
        translate: calc(2 * var(--rem)) calc(-6 * var(--rem));
      }
    }
    &:nth-child(4) {
      translate: calc(2 * var(--rem)) calc(6 * var(--rem));
      .p-item-list__item-image {
        translate: calc(0 * var(--rem)) calc(-4 * var(--rem));
      }
    }
  }
}

.p-modal--2 {
  .p-item-list__item {
    &:nth-child(1) {
      .p-item-list__item-image {
        translate: calc(12 * var(--rem)) calc(0 * var(--rem));
      }
    }
    &:nth-child(2) {
      .p-item-list__item-image {
        translate: calc(4 * var(--rem)) calc(0 * var(--rem));
      }
    }
    &:nth-child(3) {
      translate: calc(2 * var(--rem)) calc(8 * var(--rem));
      .p-item-list__item-image {
        translate: calc(8 * var(--rem)) calc(-6 * var(--rem));
      }
    }
    &:nth-child(4) {
      translate: calc(-6 * var(--rem)) calc(8 * var(--rem));
      .p-item-list__item-image {
        translate: calc(0 * var(--rem)) calc(-6 * var(--rem));
      }
    }
  }
}

.p-modal--3 {
  .p-item-list__item {
    &:nth-child(1) {
      translate: calc(4 * var(--rem)) calc(0 * var(--rem));
      .p-item-list__item-image {
        translate: calc(-4 * var(--rem)) calc(0 * var(--rem));
      }
    }
    &:nth-child(2) {
      translate: calc(4 * var(--rem)) calc(0 * var(--rem));
    }
    &:nth-child(3) {
      translate: calc(2 * var(--rem)) calc(8 * var(--rem));
      .p-item-list__item-image {
        translate: calc(14 * var(--rem)) calc(-6 * var(--rem));
      }
    }
    &:nth-child(4) {
      translate: calc(-10 * var(--rem)) calc(8 * var(--rem));
      .p-item-list__item-image {
        translate: calc(0 * var(--rem)) calc(-6 * var(--rem));
      }
    }
  }
}


/* ===================
  .p-mainvisual
=================== */
.p-mainvisual {
  position: relative;
  height: calc(1308 * var(--rem));
  padding-block: calc(151 * var(--rem)) calc(40 * var(--rem));
  background: #fff;
  .c-scroll {
    position: absolute;
    bottom: calc(120 * var(--rem));
    right: calc(19 * var(--rem));
  }
}
.p-mainvisual__head,
.p-mainvisual__bottom {
  position: absolute;
  z-index: 1;
}
.p-mainvisual__head {
  top: calc(61 * var(--rem));
  left: 50%;
  width: calc(506.684 * var(--rem));
  translate: -50% 0;
  & img {
    width: 100%;
  }
}
.p-mainvisual__bottom {
  bottom: calc(3 * var(--rem));
  left: 50%;
  width: calc(481.476 * var(--rem));
  translate: -50% 0;
  & img {
    width: 100%;
  }
}
.p-mainvisual__image {
  & img {
    width: 100%;
  }
}


/* ===================
  .p-section-top
=================== */
.p-section-top {
  padding-block: calc(89 * var(--rem)) calc(80 * var(--rem));
  text-align: center;
}
.p-section-top__heading {
  margin-bottom: calc(67 * var(--rem));
  color: var(--color-accent);
}
.p-section-top__heading-main {
  font-size: calc(34 * var(--rem));
  line-height: calc(59.5 / 34);
  letter-spacing: .1em;
}
.p-section-top__heading-lead {
  margin-top: calc(27 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(20 * var(--rem));
  font-weight: var(--font-bernina-regular);
  line-height: calc(25 / 20);
  letter-spacing: .054em;
}
.p-section-top__text {
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
  & + & {
    margin-top: calc(42 * var(--rem));
  }
}
.p-section-top__image {
  width: calc(570 * var(--rem));
  margin-top: calc(91 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}


/* ===================
  .p-section-anchor
=================== */
.p-section-anchor {
  margin-bottom: calc(200 * var(--rem));
}


/* ===================
  .p-anchor-box
=================== */
.p-anchor-box__list {
  display: flex;
  justify-content: center;
  .l-mobile-first__right & {
    gap: calc(24 * var(--rem-pc));
  }
}
.p-anchor-box__list-item {
  .l-mobile-first__right & {
    &:last-child {
      margin-left: calc(9 * var(--rem-pc));
    }
  }
}
.p-anchor-box {
  display: block;
  width: calc(240 * var(--rem));
  .l-mobile-first__right & {
    width: auto;
  }
}
.p-anchor-box__image {
  width: calc(200 * var(--rem));
  margin-inline: auto;
  .l-mobile-first__right & {
    width: calc(80 * var(--rem-pc));
  }
  & img {
    width: 100%;
  }
}
.p-anchor-box__body {
  margin-top: calc(19 * var(--rem));
  text-align: center;
  .l-mobile-first__right & {
    margin-top: calc(7 * var(--rem-pc));
  }
}
.p-anchor-box__body-label {
  font-family: var(--lp-font-en);
  color: var(--color-accent);
  font-size: calc(26 * var(--rem));
  font-weight: var(--font-bernina-regular);
  line-height: calc(39 / 26);
  letter-spacing: .015em;
  .l-mobile-first__right & {
    font-size: calc(12 * var(--rem-pc));
    line-height: calc(18 / 12);
  }
}
.p-anchor-box__arrow {
  display: block;
  width: calc(38 * var(--rem));
  height: calc(16 * var(--rem));
  margin-inline: auto;
  margin-top: calc(22 * var(--rem));
  background-color: var(--color-accent);
  mask: var(--icon-arrow) no-repeat center / contain;
  .l-mobile-first__right & {
    width: calc(20 * var(--rem-pc));
    height: calc(8 * var(--rem-pc));
    margin-top: calc(8 * var(--rem-pc));
  }
}


/* ===================
  .p-section
=================== */
.p-section {
  --upper-bg-color: #f1f4f6;
  --bg-color: #fff;
  padding-bottom: calc(200 * var(--rem));
  background: linear-gradient(to bottom, var(--upper-bg-color) 40px, var(--bg-color) 40px);
  &.--bg-gray {
    --upper-bg-color: #fff;
    --bg-color: #f1f4f6;
  }
}
.p-section-special-interview {
  padding-bottom: calc(121 * var(--rem));
}
.p-section__head {
  margin-bottom: calc(-141 * var(--rem));
  .p-section-special-interview & {
    margin-bottom: calc(-160 * var(--rem));
  }
}
.p-section__head-box {
  width: calc(400 * var(--rem));
  height: calc(400 * var(--rem));
  margin-inline: auto;
  padding-top: calc(66 * var(--rem));
  background: var(--bg-color);
  border-radius: 50%;
  color: var(--color-accent);
  text-align: center;
}
.p-section__head-box__num {
  font-family: var(--font-ivy-bodoni);
  font-weight: 400;
  font-style: italic;
  font-size: calc(100 * var(--rem));
  line-height: 1;
  letter-spacing: .01em;
  .p-section__head-box.--1 & {
    margin-right: calc(20 * var(--rem));
    letter-spacing: .075em;
  }
  .p-section__head-box.--2 & {
    margin-right: calc(18 * var(--rem));
  }
  .p-section__head-box.--3 & {
    margin-right: calc(27 * var(--rem));
  }
  .p-section__head-box.--4 & {
    margin-right: calc(25 * var(--rem));
  }
}
.p-section__head-box__text {
  margin-top: calc(14 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(20 * var(--rem));
  font-weight: var(--font-bernina-regular);
  line-height: 1;
  letter-spacing: .07em;
}
.p-section__visual {
  width: 100%;
  aspect-ratio: 750 / 1000;
  & img {
    width: 100%;
  }
}
.p-section__body {
  width: calc(631 * var(--rem));
  margin-inline: auto;
  padding-block: calc(80 * var(--rem)) calc(71 * var(--rem));
  .p-section__head + & {
    padding-block: 0;
  }
}
.p-section__body-heading {
  width: calc(var(--width) * var(--rem));
  margin-inline: auto;
  .p-section-special-collaboration & {
    translate: calc(-1 * var(--rem)) 0;
  }
  & img {
    width: 100%;
  }
}
.p-section__body-subheading {
  margin-top: calc(47 * var(--rem));
  color: var(--color-accent);
  font-size: calc(30 * var(--rem));
  line-height: calc(56 / 30);
  text-align: center;
  .p-section-special-collaboration & {
    margin-top: calc(27 * var(--rem));
  }
  .p-section-gift-selfcare & {
    margin-top: calc(49 * var(--rem));
  }
}
.p-section__body-text {
  margin-top: calc(38 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
  text-align: justify;
}
.p-section__view-button {
  display: block;
  width: calc(630 * var(--rem));
  height: calc(840 * var(--rem));
  margin-inline: auto;
  cursor: pointer;
  & img {
    width: 100%;
  }
  .p-section__view-icon {
    position: absolute;
    bottom: calc(17 * var(--rem));
    right: calc(16 * var(--rem));
    color: #fff;
    font-family: var(--lp-font-en);
    font-size: calc(20 * var(--rem));
    font-weight: var(--font-bernina-regular);
    line-height: 1;
    letter-spacing: .025em;
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: calc(-49 * var(--rem));
      left: 50%;
      width: calc(60 * var(--rem));
      height: calc(3 * var(--rem));
      background-color: currentColor;
      translate: -50% 0;
    }
    &::after {
      rotate: 90deg;
    }
  }
}


/* ===================
  .p-section-qa
=================== */
.p-section-qa__button-container {
  margin-top: calc(90 * var(--rem));
}
.p-section-qa__button {
  display: block;
  width: calc(450 * var(--rem));
  height: calc(190 * var(--rem));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}
.p-section-qa__logo {
  margin-top: calc(60 * var(--rem));
  & img {
    width: calc(175 * var(--rem));
    margin-inline: auto;
  }
}


/* ===================
  .p-qa-list
=================== */
.p-qa-list {
  margin-top: calc(68 * var(--rem));
}
.p-qa-list__item {
  & + & {
    margin-top: calc(96 * var(--rem));
  }
  &.--3 {
    margin-top: calc(79 * var(--rem));
  }
}
.p-qa-list__item-question {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--rem));
  margin-left: calc(2 * var(--rem));
}
.p-qa-list__item-question__icon {
  & svg {
    display: block;
    width: calc(58 * var(--rem));
    height: calc(77.5 * var(--rem));
  }
}
.p-qa-list__item-question__text {
  color: var(--color-accent);
  font-size: calc(30 * var(--rem));
  line-height: calc(56 / 30);
}
.p-qa-list__item-answer {
  margin-top: calc(17 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
  text-align: justify;
  .p-qa-list__item.--1 & {
    margin-inline: calc(2 * var(--rem));
  }
  .p-qa-list__item.--2 & {
    margin-top: calc(34 * var(--rem));
  }
  .p-qa-list__item.--4 & {
    margin-top: calc(36 * var(--rem));
  }
}


/* ===================
  p-footer-nav
=================== */
.p-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;
  &.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}
.p-footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}
.p-footer-nav__item {
  width: calc(100% / 2);
  border-top: 1px solid var(--color-accent);
  &:nth-child(even) {
    border-left: 1px solid var(--color-accent);
  }
}
.p-footer-nav__item-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(20 * var(--rem));
  height: calc(88 * var(--rem));
  padding-left: calc(40 * var(--rem));
  background: #fff;
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-weight: var(--font-bernina-regular);
  font-size: calc(23 * var(--rem));
  line-height: calc(27.6 / 23);
  &:not(:has(.p-footer-nav__item-image)) {
    padding-left: calc(68 * var(--rem));
    &::before {
      content: "";
      display: block;
      width: calc(20 * var(--rem));
      height: calc(11 * var(--rem));
      background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021.78%2013.6%22%3E%3Cpath%20d%3D%22m20.89.81-10%2011-10-11%22%20style%3D%22fill%3Anone%3Bstroke%3A%23edb7d2%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2.41px%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
    }
  }
  &.--only {
    align-items: flex-start;
    gap: calc(31 * var(--rem));
    padding-left: 0;
    .p-footer-nav__item-image {
      width: calc(89 * var(--rem));
      height: calc(69 * var(--rem));
      margin-top: calc(5 * var(--rem));
      margin-left: calc(4 * var(--rem));
    }
    .p-footer-nav__item-label {
      margin-block: auto;
    }
  }
}
.p-footer-nav__item-image {
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  & img {
    width: 100%;
  }
}
.p-footer-nav__item-label {
  letter-spacing: .04em;
}


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


/* ===================
  .p-current-nav
=================== */
.p-current-nav {
  margin-top: calc(76 * var(--rem-pc));
  margin-right: calc(24 * var(--rem-pc));
}
.p-current-nav__button-container {
  margin-top: calc(38 * var(--rem-pc));
  padding-left: calc(8 * var(--rem-pc));
}
.p-current-nav__button {
  display: block;
  width: calc(225 * var(--rem-pc));
  height: calc(95 * var(--rem-pc));
  margin-inline: auto;
  & img {
    width: 100%;
  }
}

.p-pc-logo {
  position: absolute;
  right: calc(20 * var(--rem-pc));
  bottom: calc(18 * var(--rem-pc));
  width: calc(56 * var(--rem-pc));
  height: calc(32 * var(--rem-pc));
  .is-active & {
    opacity: 1;
  }
  & img {
    width: 100%;
  }
}


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

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


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