@charset "UTF-8";

/* ========================================================
                      * Variable *
========================================================= */
:root {
  --pw: 1366; /* PC幅 */
  --sw: 750; /* SP幅 */
  --artboard-pw: 416; /* PCアートボード幅 */
  --artboard-sw: 750; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --pc-contents-width: 685;
  --pc-mv-width: calc(var(--pw) - var(--pc-contents-width));

  --lp-font-ja: yu-mincho-pr6n, "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  --font-ryo: ryo-gothic-plusn, sans-serif;
  --font-goldenbook: goldenbook, serif;
  --font-degular: degular, sans-serif;
  --font-shippori: "Shippori Mincho", shippori-mincho sans-serif;
  --base-font-color: #4D4D4D;
  --lp-background-color: #fff;
  --color-red: #B20F26;
  --color-blue: #4F45A5;
  --color-yellow: #90773E;
  --icon-arrow: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214.16%22%20height%3D%227.788%22%20viewBox%3D%220%200%2014.16%207.788%22%3E%3Cpath%20d%3D%22M242.423%2C21.4l-7.08-7.081.707-.707%2C6.372%2C6.373%2C6.373-6.373.707.707Z%22%20transform%3D%22translate(-235.343%20-13.609)%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
}

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


/* ===================
  Common
=================== */
.js-accordion--body {
  transition: max-height 0.5s ease-in-out;
}


/* ========================================================
                      * Layout style *
========================================================= */
html {
  font-size: 62.5%
}
body {
  &.is-loading {
    visibility: hidden;
  }
}
main {
  max-width: 100%;
}

@media (768px <= width) {
  #Wrap,
  .wrapBottom,
  .wrapTop,
  #Contents {
    width: 100%;
  }
}
#FooterWrap {
  position: relative;
}
#footer {
  margin-top: 0;
}
@media (width < 768px) {
  #Contents {
    overflow: unset;
  }
}


/* ===================
  LP Contents
=================== */
.lp_contents {
  background: var(--lp-background-color, transparent);
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  font-size: calc(22 * var(--rem));
  font-style: normal;
  letter-spacing: .07em;
  /* & * {
    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) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }
  & ul,
  & li {
    list-style: none;
  }
  & :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
  }
  & sup {
    font-size: calc(20 * var(--rem));
    vertical-align: unset;
  }
  & :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)); */
  }
  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
  }
}


/* ===================
  Utility
=================== */
@media (768px <= width) {
  .u-inner {
    /* width: calc(50vw * .7); */
    width: calc(var(--artboard-pw) / var(--pc-contents-width) * 100%);
    margin-inline: auto;
    overflow: clip;
  }
}

.u-font__ryo {
  font-family: var(--font-ryo);
  font-style: normal;
  font-weight: 200;
}
.u-font__goldenbook {
  font-family: var(--font-goldenbook);
  font-style: normal;
  font-weight: 300;
}
.u-font__degular {
  font-family: var(--font-degular);
  font-weight: 500;
  font-style: normal;
}
.u-font__shippori {
  font-family: var(--font-shippori);
  font-style: normal;
  font-weight: 400;
}

.u-c-red {
  color: var(--color-red);
}


/* ===================
  Component
=================== */
.c-section-heading {
  padding-left: calc(4 * var(--rem));
  font-family: var(--font-goldenbook);
  font-size: calc(56 * var(--rem));
  line-height: calc(75 / 56);
  letter-spacing: 0.08em;
  text-align: center;
  .--blue & {
    color: var(--color-blue);
  }
  .--yellow & {
    color: var(--color-yellow);
  }
  .--red & {
    color: var(--color-red);
  }
  .--pink & {
    color: var(--color-red);
  }
}

.c-block-heading {
  font-family: var(--font-goldenbook);
  font-size: calc(40 * var(--rem));
  letter-spacing: 0.08em;
  text-align: center;
}

.c-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(342 * var(--rem));
  height: calc(53 * var(--rem));
  margin-inline: auto;
  background: #fff;
  font-family: var(--font-ryo);
  font-size: calc(20 * var(--rem));
  letter-spacing: 0.15em;
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(50 * var(--rem));
    width: calc(14 * var(--rem));
    height: calc(8 * var(--rem));
    background-color: currentColor;
    mask: var(--icon-arrow) no-repeat center / contain;
    translate: 0 -50%;
    rotate: -90deg;
  }
}

.c-viewmore {
  position: relative;
  color: currentColor;
  font-size: calc(21 * var(--rem));
  letter-spacing: .15em;
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-34 * var(--rem));
    width: calc(14 * var(--rem));
    height: calc(8 * var(--rem));
    background-color: currentColor;
    mask: var(--icon-arrow) no-repeat center / contain;
    translate: 0 -50%;
  }
  &.is-open {
    &::after {
      rotate: 180deg;
    }
  }
}

.c-viewdetails {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(370 * var(--rem));
  height: calc(54 * var(--rem));
  margin-inline: auto;
  background: #fff;
  font-family: var(--font-degular);
  font-style: normal;
  font-size: calc(24 * var(--rem));
  letter-spacing: 0.08em;
  font-weight: 500;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(40 * var(--rem));
    width: calc(18 * var(--rem));
    height: 1px;
    background: currentColor;
  }
  &::after {
    rotate: 90deg;
  }
}


/* ===================
  Layout
=================== */
.l-row__fix {
  position: relative;
}
@media (768px <= width) {
  .l-row {
    display: flex;
  }
  .l-row__fix {
    flex-shrink: 0;
    /* width: 50%; */
    width: calc(var(--pc-mv-width) / var(--pw) * 100%);
  }
  .l-row__sticky {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
  }
  .l-row__main {
    flex-shrink: 0;
    /* width: 50%; */
    width: calc(var(--pc-contents-width) / var(--pw) * 100%);
  }
}

.l-curtain-container {
  position: relative;
}
.l-content-root {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.l-curtain-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.long-content {
  box-sizing: border-box;
  height: auto;
}


/* ===================
  Main visual
=================== */
.p-mainvisual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: clip;
  & img {
    display: block;
  }
}
.p-mainvisual__image {
  width: 100%;
  height: 100%;
  .p-mainvisual__image-item {
    width: 100%;
    height: 100%;
    will-change: translate, clip-path;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.p-mainvisual__text {
  position: absolute;
  left: 50%;
  bottom: calc(54 * var(--rem));
  width: calc(509 * var(--rem));
  translate: -50% 0;
  & img {
    width: 100%;
  }
}


/* ===================
  .p-section-lead
=================== */
.p-section-lead {
  padding-block: calc(72 * var(--rem)) calc(75 * var(--rem));
}
.p-section-lead__body {
  color: var(--color-red);
  text-align: center;
}
.p-section-lead__body-text {
  max-height: calc(260 * var(--rem));
  overflow: hidden;
  font-size: calc(22 * var(--rem));
  line-height: calc(45 / 22);
  letter-spacing: 0.15em;
}
.p-section-lead__body-text__paragraph {
  & + & {
    margin-top: 2em;
  }
}
.p-section-lead__body-button {
  margin-top: calc(222 * var(--rem));
  &::before {
    content: '';
    position: absolute;
    top: calc(-142 * var(--rem));
    left: 50%;
    width: 1px;
    height: calc(98 * var(--rem));
    background-color: currentColor;
    translate: -50% 0;
  }
}
.p-section-lead__bottom {
  margin-top: calc(65 * var(--rem));
}


/* ===================
  .p-circle-part
=================== */
.p-circle-part {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(257 * var(--rem));
  height: calc(318 * var(--rem));
  margin-inline: auto;
  color: var(--color-red);
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(318 * var(--rem));
    height: calc(318 * var(--rem));
    border-radius: 50%;
    border: 1px solid currentColor;
    translate: -50% 0;
    pointer-events: none;
  }
}
.p-circle-part__box {
  width: 100%;
  text-align: center;
  &.--top {
    padding-bottom: calc(23 * var(--rem));
  }
  &.--bottom {
    padding-top: calc(23 * var(--rem));
    border-top: 1px solid currentColor;
  }
}
.p-circle-part__box-label {
  font-size: calc(26 * var(--rem));
  line-height: 1;
}
.p-circle-part__box-date {
  margin-top: calc(10 * var(--rem));
  font-family: var(--font-goldenbook);
  font-size: calc(45 * var(--rem));
  line-height: 1;
  letter-spacing: 0.08em;
}


/* ===================
  .p-anchor
=================== */
.p-anchor__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: var(--color-red);
}
.p-anchor__list-item {
  position: relative;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;
  &:last-child {
    border-right: 1px solid currentColor;
  }
}
.p-anchor__list-item__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(208 * var(--rem));
  padding-top: calc(12 * var(--rem));
  text-align: center;
  &::after {
    content: '';
    position: absolute;
    bottom: calc(18 * var(--rem));
    left: 50%;
    width: calc(16 * var(--rem));
    height: calc(9 * var(--rem));
    background-color: currentColor;
    mask: var(--icon-arrow) no-repeat center / contain;
    translate: -50% 0;
  }
}
.p-anchor__list-item__image {
  width: calc(101 * var(--rem));
  height: calc(82 * var(--rem));
  & img {
    width: 100%;
  }
}
.p-anchor__list-item__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(51 * var(--rem));
  margin-top: calc(15 * var(--rem));
  font-family: var(--font-goldenbook);
  font-size: calc(24 * var(--rem));
  line-height: calc(27 / 24);
  letter-spacing: .08em;
  font-weight: bold;
  &:has(br) {
    margin-top: calc(18 * var(--rem));
  }
}


/* ===================
  .p-section-hero
=================== */
.p-section-hero {
  background: #fff;
}
.p-section-hero__image {
  width: 100%;
  height: 100vh;
  height: 100lvh;
  &:has(+ .p-section-hero__body) {
    height: 75vh;
    height: 75lvh;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.p-section-hero__body {
  padding-block: calc(37 * var(--rem)) 25vh;
  padding-left: calc(4 * var(--rem));
  font-size: calc(23 * var(--rem));
  line-height: calc(46 / 23);
  letter-spacing: 0.23em;
  text-align: center;
  &.--7 {
    padding-block: calc(38 * var(--rem)) 25vh;
  }
}


/* ===================
  .p-section-items
=================== */
.p-section-items {
  padding-block: 15vh 30vh;
  &.--blue {
    background-color: #F1EFF7;
  }
  &.--yellow {
    /* padding-block: 15vh calc(79 * var(--rem)); */
    background-color: #F8F5F0;
  }
  &.--red {
    /* padding-block: calc(137 * var(--rem)) 30vh; */
    background-color: #FFF8FD;
  }
  &.--pink {
    padding-block: 15vh calc(119 * var(--rem));
    background-color: #FFF8FD;
  }
  .l-curtain-section:last-child & {
    min-height: 100vh;
    min-height: 100lvh;
  }
}
.p-section-items__head-image {
  .--pink & {
    margin-bottom: calc(25 * var(--rem));
  }
  > a {
    &:hover {
      opacity: 1;
    }
  }
  & img {
    mix-blend-mode: multiply;
    transform: translateZ(0);
  }
}
.p-section-items__body {
  margin-top: calc(94 * var(--rem));
  .--red & {
    margin-top: calc(108 * var(--rem));
  }
  .js-tab__container + & {
    margin-top: calc(121 * var(--rem));
  }
}
.p-section-items__body-head {
  position: relative;
  padding-bottom: calc(126 * var(--rem));
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: calc(98 * var(--rem));
    translate: -50% 0;
  }
  .--red & {
    margin-left: calc(-6 * var(--rem));
  }
  .--blue &::after {
    background-color: var(--color-blue);
  }
  .--yellow &::after {
    background-color: var(--color-yellow);
  }
  .--red &::after {
    background-color: var(--color-red);
  }
  .--pink &::after {
    background-color: var(--color-red);
  }
}
.p-section-items__body-head__lead {
  margin-top: calc(33 * var(--rem));
  font-size: calc(23 * var(--rem));
  line-height: calc(47 / 23);
  letter-spacing: 0.19em;
  text-align: center;
  .--blue & {
    color: var(--color-blue);
  }
  .--yellow & {
    color: var(--color-yellow);
  }
  .--red & {
    color: var(--color-red);
  }
  .--pink & {
    color: var(--color-red);
  }
  .p-item-list__item-body__name + & {
    margin-top: calc(40 * var(--rem));
  }
  .p-pack__button + & {
    margin-top: calc(48 * var(--rem));
  }
}


/* ===================
  .p-pack
=================== */
.p-pack {
  text-align: center;
  .c-section-heading + & {
    margin-top: calc(48 * var(--rem));
    .--red & {
      margin-top: calc(36 * var(--rem));
    }
    .--pink & {
      margin-top: calc(43 * var(--rem));
    }
  }
}
.p-pack__head {
  position: relative;
  z-index: 5;
  .--blue & {
    color: var(--color-blue);
  }
  .--yellow & {
    color: var(--color-yellow);
  }
  .--red & {
    color: var(--color-red);
  }
  .--pink & {
    color: var(--color-red);
  }
}
.p-pack__label-ja {
  font-size: calc(27 * var(--rem));
  letter-spacing: 0;
}
.p-pack__label-en {
  font-family: var(--font-goldenbook);
  font-size: calc(30 * var(--rem));
  letter-spacing: 0.09em;
  .p-pack__label-ja + & {
    margin-left: calc(17 * var(--rem));
  }
}
.p-pack__price {
  font-family: var(--font-goldenbook);
  margin-top: calc(49 * var(--rem));
  font-size: calc(25 * var(--rem));
  letter-spacing: .08em;

}
.p-pack__image {
  position: relative;
  margin-top: calc(-188 * var(--rem));
  margin-bottom: calc(-158 * var(--rem));
  .--yellow & {
    margin-bottom: calc(-135 * var(--rem));
  }
  > a {
    &:hover {
      opacity: 1;
    }
  }
  & img {
    position: relative;
    left: 50%;
    width: calc(916 * var(--rem));
    max-width: none;
    height: calc(850 * var(--rem));
    margin-left: calc(-14 * var(--rem));
    translate: -50% 0;
    mix-blend-mode: multiply;
    transform: translateZ(0);
  }
}
.p-pack__bottom {
  position: relative;
  z-index: 5;
}
.p-pack__description {
  line-height: calc(39 / 22);
  letter-spacing: 0.23em;
}
.p-pack__button {
  margin-top: calc(53 * var(--rem));
  .--yellow & {
    margin-top: calc(40 * var(--rem));
  }
  .--red & {
    margin-top: calc(50 * var(--rem));
  }
  .--pink & {
    margin-top: calc(59 * var(--rem));
  }
}
/* .js-change-color {
  transition: opacity 1s;
} */


/* ===================
  .p-item-list
=================== */
.p-item-list {
  margin-top: calc(11 * var(--rem));
  .--yellow & {
    margin-top: calc(21 * var(--rem));
  }
  .--red & {
    margin-top: calc(21 * var(--rem));
  }
}
.p-item-list__item {
  & + & {
    margin-top: calc(102 * var(--rem));
  }
  &.--1_3 {
    margin-top: calc(108 * var(--rem));
  }
  &.--2_2 {
    margin-top: calc(84 * var(--rem));
  }
  &.--2_3 {
    margin-top: calc(108 * var(--rem));
  }
}
.p-item-list__item-image {
  width: 100%;
  & img {
    width: 100%;
  }
}
.p-item-list__item-body {
  margin-top: calc(14 * var(--rem));
  text-align: center;
  .--1_2 & {
    margin-top: calc(27 * var(--rem));
  }
  .--1_3 & {
    margin-top: calc(34 * var(--rem));
  }
  .--2_1 & {
    margin-top: calc(29 * var(--rem));
  }
  .--2_2 & {
    margin-top: calc(26 * var(--rem));
  }
  .--2_3 & {
    margin-top: calc(34 * var(--rem));
  }
  .--3_1 & {
    margin-top: calc(29 * var(--rem));
  }
  .--3_3 & {
    margin-top: calc(30 * var(--rem));
  }
  .--blue & {
    color: var(--color-blue);
  }
  .--yellow & {
    color: var(--color-yellow);
  }
  .--red & {
    color: var(--color-red);
  }
  .--pink & {
    color: var(--color-red);
  }
}
.p-item-list__item-body__name {
  font-size: calc(25 * var(--rem));
  letter-spacing: 0.1em;
  .--3_1 & {
    margin-left: calc(-8 * var(--rem));
  }
}
.p-item-list__item-body__label {
  margin-top: calc(13 * var(--rem));
  font-family: var(--font-goldenbook);
  font-size: calc(37 * var(--rem));
  letter-spacing: 0.08em;
  .--3_1 & {
    margin-left: calc(-8 * var(--rem));
  }
}
.p-item-list__item-body__button {
  margin-top: calc(54 * var(--rem));
  .p-item-list__item-body__name + & {
    margin-top: calc(46 * var(--rem));
  }
  .--3_1 & {
    margin-top: calc(65 * var(--rem));
  }
}


/* ===================
  Tab
=================== */
/* .js-tab__container {
  padding-top: calc(100 * var(--rem));
} */
.js-tab__content {
  transition: opacity 1s;
  &:not(.is-active) {
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  &.is-active {
    height: auto;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ===================
  .p-pack__tab-list
=================== */
.p-pack__tab-list {
  display: flex;
  justify-content: center;
  gap: calc(24 * var(--rem));
  margin-top: calc(-217 * var(--rem));
  margin-left: calc(-10 * var(--rem));
  .slick-track {
    transform: unset !important;
  }
}
.p-pack__tab-list__item {
  width: calc(126 * var(--rem));
  /* height: calc(126 * var(--rem)); */
  aspect-ratio: 1;
  margin-inline: calc(12 * var(--rem));
}
.p-pack__tab-list__item-button {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  .slick-current & {
    opacity: 1;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.p-pack__look {
  margin-top: calc(77 * var(--rem));
}
.p-pack__look-item {
  .--red & {
    background-color: #FFF8FD;
  }
  > a {
    &:hover {
      opacity: 1;
    }
  }
  & img {
    width: 100%;
    mix-blend-mode: multiply;
    transform: translateZ(0);
  }
}
.js-look-slider {
  .slick-prev,
  .slick-next {
    top: 28.5%;
  }
  .slick-prev {
    left: calc(26 * var(--rem));
  }
  .slick-next {
    right: calc(18 * var(--rem));
  }
}


/* ===================
  Modal
=================== */
body.is-modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}
.p-modal {
  width: 100%;
  height: 100%;
  margin: auto;
  background: none;
  border: none;
  opacity: 0;
  scale: 0.95;
  /* overflow: visible; */
  transition: opacity .3s, scale .3s;
  &.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(230, 230, 230, 0);
  cursor: pointer;
  transition: background-color 0.3s;
}
dialog.is-open::backdrop {
  background-color: rgba(230, 230, 230, 0.7);
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fade-out-backdrop {
  from { background-color: rgba(230, 230, 230, 0.7); }
  to { background-color: rgba(230, 230, 230, 0); }
}

.p-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(690 * var(--rem));
  max-width: 100vw;
  max-height: 90vh;
  background-color: #fff;
  translate: -50% -50%;
  transition: transform 0.3s ease-out;
  .simplebar-wrapper {
    max-height: 90vh;
  }
}
.p-modal__close-button {
  position: absolute;
  bottom: calc(18 * var(--rem));
  right: calc(18 * var(--rem));
  z-index: 10;
  width: calc(50 * var(--rem));
  height: calc(50 * var(--rem));
  border: none;
  cursor: pointer;
  .p-modal__content:has(.p-item-details__item.--quaternary) & {
    bottom: calc(24 * var(--rem));
    right: calc(18 * var(--rem));
  }
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(66 * var(--rem));
    height: 1px;
    background-color: var(--base-font-color);
  }
  &::before {
    translate: -50% -50%;
    rotate: 45deg;
  }
  &::after {
    translate: -50% -50%;
    rotate: -45deg;
  }
}


/* ===================
  .p-item-details
=================== */
.p-item-details__item {
  width: calc(690 * var(--rem));
  padding: calc(58 * var(--rem)) calc(33 * var(--rem)) calc(146 * var(--rem));
  background: #fff;
  transition: opacity .3s;
  &.--secondary {
    padding-bottom: calc(124 * var(--rem));
  }
  &.--tertiary {
    padding-block: calc(45 * var(--rem)) calc(124 * var(--rem));
  }
  &.--quaternary {
    padding-block: calc(54 * var(--rem)) calc(176 * var(--rem));
  }
}
.p-item-details__item-heading {
  margin-bottom: calc(9 * var(--rem));
  font-family: var(--font-goldenbook);
  font-size: calc(41 * var(--rem));
  letter-spacing: 0.08em;
  text-align: center;
  &.--small {
    margin-bottom: calc(24 * var(--rem));
    font-size: calc(37 * var(--rem));
  }
  .--blue & {
    color: var(--color-blue);
  }
  .--yellow & {
    color: var(--color-yellow);
  }
  .--red & {
    color: var(--color-red);
  }
  .--pink & {
    color: var(--color-red);
  }
}
.p-item-details__item-heading__sub {
  margin-bottom: calc(13 * var(--rem));
  font-size: calc(25 * var(--rem));
  text-align: center;
  .--blue & {
    color: var(--color-blue);
  }
  .--yellow & {
    color: var(--color-yellow);
  }
  .--red & {
    color: var(--color-red);
  }
  .--pink & {
    color: var(--color-red);
  }
}
.p-item-details__item-image {
  & img {
    width: 100%;
  }
}
.p-item-details__item-body {
  margin-top: calc(4 * var(--rem));
  .--tertiary & {
    margin-top: calc(43 * var(--rem));
  }
}
.p-item-details__item-body__head {
  text-align: center;
}
.p-item-details__item-body__name {
  margin-left: calc(-14 * var(--rem));
  font-family: var(--font-shippori);
  font-size: calc(22 * var(--rem));
  letter-spacing: .1em;
  font-weight: 500;
  .--blue & {
    color: var(--color-blue);
  }
  .--yellow & {
    color: var(--color-yellow);
  }
  .--red & {
    color: var(--color-red);
  }
  .--pink & {
    color: var(--color-red);
  }
}
.p-item-details__item-body__label {
  margin-top: calc(28 * var(--rem));
  font-family: var(--font-goldenbook);
  font-size: calc(37 * var(--rem));
  letter-spacing: 0.08em;
  .--blue & {
    color: var(--color-blue);
  }
  .--yellow & {
    color: var(--color-yellow);
  }
  .--red & {
    color: var(--color-red);
  }
  .--pink & {
    color: var(--color-red);
  }
}
.p-item-details__item-body__lead {
  margin-top: calc(30 * var(--rem));
  font-family: var(--font-shippori);
  font-size: calc(22 * var(--rem));
  line-height: calc(41 / 22);
  letter-spacing: 0.07em;
  font-weight: 500;
  .--tertiary & {
    margin-top: calc(50 * var(--rem));
  }
  .--quaternary & {
    margin-top: calc(20 * var(--rem));
  }
}
.p-item-details__item-body__content {
  margin-top: calc(44 * var(--rem));
  margin-left: calc(-6 * var(--rem));
  font-family: var(--font-shippori);
  font-size: calc(20 * var(--rem));
  line-height: calc(41 / 20);
  letter-spacing: 0;
  font-weight: 500;
}
.p-description-list {
  width: fit-content;
  margin-inline: auto;
  .--blue & {
    color: var(--color-blue);
  }
  .--yellow & {
    color: var(--color-yellow);
  }
  .--red & {
    color: var(--color-red);
  }
  .--pink & {
    color: var(--color-red);
  }
}


/* ===================
  .slick
=================== */
:where(.p-slick) {
  .p-modal & {
    opacity: 0;
    transition: opacity 0.5s ease-in-out .5s;
    &.is-initialized {
      opacity: 1;
    }
  }
  &.slick-dotted {
    margin-bottom: 0 !important;
  }
  /* .slick-track {
    display: flex;
  }
  .slick-slide {
    height: auto;
  } */
  .slick-prev,
  .slick-next {
    top: calc(488 * var(--rem));
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(40 * var(--rem));
    height: calc(40 * var(--rem));
    z-index: 5;
    &::before {
      content: "";
      display: block;
      width: calc(26 * var(--rem));
      height: calc(14 * var(--rem));
      background-color: var(--base-font-color);
      mask: var(--icon-arrow) no-repeat center / contain;
    }
  }
  .slick-prev {
    left: calc(14 * var(--rem));
    &::before {
      rotate: 90deg;
    }
  }
  .slick-next {
    right: calc(6 * var(--rem));
    &::before {
      rotate: -90deg;
    }
  }
  .slick-dots {
    bottom: calc(48 * var(--rem));
    font-size: 0;
    line-height: 1;
    & li {
      width: calc(10 * var(--rem));
      height: calc(10 * var(--rem));
      margin-inline: calc(5 * var(--rem));
      &.slick-active {
        & button::before {
          background-color: var(--base-font-color);
          opacity: 1;
        }
      }
      & button {
        width: 100%;
        height: 100%;
        padding: 0;
        &:before {
          content: '';
          width: 100%;
          height: 100%;
          background-color: #fff;
          border: 1px solid var(--base-font-color);
          border-radius: 50%;
          opacity: 1;
        }
      }
    }
  }
  &:has(.--quaternary) {
    .slick-prev,
    .slick-next {
      top: calc(556 * var(--rem));
    }
    .slick-dots {
      bottom: calc(85 * var(--rem));
    }
  }
}


/* ===================
  .p-section-bottom
=================== */
.p-section-bottom {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: calc(20 * var(--rem));
  padding-block: calc(160 * var(--rem));
  padding-inline: calc(30 * var(--rem));
}


/* ===================
  simplebar
=================== */
.p-simplebar {
  .simplebar-scrollbar {
    &::before {
      background: #474747;
    }
  }
}


/* ===================
  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.5s ease-in-out, translate 0.5s ease-in-out;
  &.is-visible {
    opacity: 1;
    translate: 0 0;
  }
  .l-row__main & {
    position: sticky;
  }
}
.p-footer-nav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: #fff;
  border: 1px solid var(--color-red);
}
.p-footer-nav__item {
  &:not(:first-child) {
    border-left: 1px solid var(--color-red);
  }
}
.p-footer-nav__item-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100 * var(--rem));
  background: #fff;
  font-family: var(--font-goldenbook);
  color: var(--color-red);
  font-size: calc(20 * var(--rem));
  letter-spacing: 0.08em;
  font-weight: bold;
}
.p-footer-nav__item-image {
  width: calc(78 * var(--rem));
  height: calc(60 * var(--rem));
  .--1 & {
    margin-right: calc(18 * var(--rem));
    margin-left: calc(-10 * var(--rem));
  }
  .--2 & {
    margin-right: calc(-6 * var(--rem));
    margin-left: calc(-16 * var(--rem));
  }
  .--3 & {
    margin-right: calc(-12 * var(--rem));
    margin-left: calc(-38 * var(--rem));
  }
  .--4 & {
    margin-right: calc(-10 * var(--rem));
    margin-left: calc(-14 * var(--rem));
    margin-bottom: calc(12 * var(--rem));
  }
  & img {
    width: 100%;
  }
}


/* ===================
  Share
=================== */
/* #share {
  transition: bottom 0.5s ease-in-out;
  .footer-nav-visible & {
    bottom: calc(5% + (120 * var(--rem)));
  }
} */


/* ===================
  Animation
=================== */
.anim-fade-blur {
  opacity: 0;
  scale: 1.02;
  filter: blur(10px);
  will-change: opacity, filter, scale;
  &.js-intersection.is-active {
    animation: fade-blur 1s ease-out forwards;
  }
  .js-intersection.is-active & {
    animation: fade-blur 1s ease-out forwards;
  }
}
@keyframes fade-blur {
  0% {
    opacity: 0;
    scale: 1.02;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
}

.anim-fade-bottom {
  opacity: 0;
  translate: 0 2.5em;
  will-change: opacity, translate;
  &.js-intersection.is-active {
    animation: fade 1.5s ease-in forwards, fromBottom 1s forwards;
  }
  .js-intersection.is-active & {
    animation: fade 1.5s ease-in forwards, fromBottom 1s forwards;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fromBottom {
  0% {
    translate: 0 2.5em;
  }
  100% {
    translate: 0 0;
  }
}

.anim-image-clip {
  clip-path: inset(100% 0 0 0);
  translate: 0 20%;
  will-change: clip-path, translate;
  &.js-intersection.is-active {
    animation: image-clip 1.4s cubic-bezier(.075,.82,.79,1) forwards;
  }
  .js-intersection.is-active & {
    animation: image-clip 1.4s cubic-bezier(.075,.82,.79,1) forwards;
  }
}
@keyframes image-clip {
  0% {
    clip-path: inset(100% 0 0 0);
    translate: 0 20%;
  }
  100% {
    clip-path: inset(0 0 0 0);
    translate: 0 0;
  }
}


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

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

  .l-curtain-container {
    margin-bottom: calc(-200 * var(--rem));
  }
  .p-mainvisual__text {
    width: calc(463 * var(--rem));
  }
}


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

  .p-mainvisual {
    height: calc(1125 * var(--rem));
  }
  /* .p-modal__content {
    max-width: calc(690 * var(--rem));
  } */
}