@charset "UTF-8";
:root {
  --to-rem: 0.0625rem;
  --font-primary: "Noto Sans JP", sans-serif;
  --root-font-size: 16;
  --device-scale: 1;
  --viewport-min: 768;
  --viewport-max: 1150;
  --font-size-min: 14;
  --font-size-max: 16;
  --contents-width: 1100px;
  --contents-width-sm: 900px;
  --contents-width-lg: 1200px;
  --sp-max-width: 540px;
  --page-gutter-pc: 25px;
  --page-gutter-sp: 20px;
  --c-base: #fff;
  --c-primary: #6e60a7;
  --c-secondary: #cf62a0;
  --c-text: #6e60a7;
  --c-text-white: #fff;
  --z-index-modal: 50;
  --z-index-modal-open: 100;
  --z-index-overlay: 40;
  --z-index-sp-menu: 30;
  --z-index-header: 10;
  --z-index-page-top: 5;
  --z-index-fixed-button: 5;
  --clip-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --clip-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --clip-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --clip-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
  --clip-triangle-lower-left: polygon(0 0, 100% 100%, 0 100%);
  --clip-triangle-upper-left: polygon(0 0, 100% 0, 0 100%);
  --clip-triangle-lower-right: polygon(100% 0, 100% 100%, 0 100%);
  --clip-triangle-upper-right: polygon(0 0, 100% 0, 100% 100%);
  --rounded-xxs: 2px;
  --rounded-xs: 5px;
  --rounded-sm: 7px;
  --rounded-md: 12px;
  --rounded-lg: 15px;
  --rounded-xl: 20px;
  --rounded-full: 99rem;
  --duration: 0.3s;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  min-inline-size: 0;
  min-block-size: 0;
}

:where(body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) {
  margin: 0;
}

:where(ul, ol) {
  padding: 0;
  list-style: "";
}

:where(em) {
  font-style: normal;
}

:where(address) {
  font-style: normal;
}

:where(summary) {
  display: block;
  list-style: none;
}

:where(summary)::-webkit-details-marker {
  display: none;
}

:where(img) {
  max-width: 100%;
  display: block;
  width: 100%;
  height: auto;
}

:where(a) {
  text-decoration: none;
  color: inherit;
  transition: opacity var(--duration);
  cursor: pointer;
}

:where(button) {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background: none;
  touch-action: manipulation;
}

:where([type=text], [type=email], [type=tel], select, textarea) {
  appearance: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  width: 100%;
  background-color: var(--c-base);
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
}

:where(textarea) {
  resize: none;
  field-sizing: content;
}

:where(:any-link,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]) {
  cursor: pointer;
}

@media (hover: hover) {
  :where(a):hover {
    opacity: 0.7;
  }
}
:focus:not(:focus-visible) {
  outline: none;
}

:root:has(:modal) {
  overflow: hidden;
}

body {
  font-family: var(--font-primary);
  font-size: calc(16 * var(--to-rem));
  color: var(--c-text);
  background-color: var(--c-base);
}
@media screen and (max-width: 767px) {
  body {
    font-size: calc(14 * var(--to-rem));
  }
}

.c-button-primary {
  --_font-size: calc(20 * var(--to-rem));
  --_min-height: 58px;
  --_background-color: var(--c-primary);
  --_color: var(--c-text-white);
  --_border-color: var(--c-primary);
  --_hover-background-color: var(--c-base);
  --_hover-color: var(--c-primary);
  --_hover-border-color: var(--c-primary);
  display: block;
  align-content: center;
  border-radius: var(--rounded-full);
  font-weight: 700;
  font-size: var(--_font-size);
  letter-spacing: 0.04em;
  background-color: var(--_background-color);
  color: var(--_color);
  text-align: center;
  transition-property: color, background-color, border-color;
  transition-duration: var(--duration);
  transition-timing-function: ease;
  border: 1px solid var(--_border-color);
  padding: 10px;
  min-height: var(--_min-height);
  position: relative;
}
@media screen and (max-width: 767px) {
  .c-button-primary {
    --_font-size: calc(18 * var(--to-rem));
    --_min-height: 54px;
    letter-spacing: 0.02em;
  }
}
.c-button-primary[data-color=base] {
  --_background-color: var(--c-base);
  --_color: var(--c-primary);
  --_border-color: var(--c-base);
  --_hover-background-color: var(--c-primary);
  --_hover-color: var(--c-base);
  --_hover-border-color: var(--c-primary);
}
@media (any-hover: hover) {
  .c-button-primary:hover {
    opacity: 1;
    --_background-color: var(--_hover-background-color);
    --_color: var(--_hover-color);
    --_border-color: var(--_hover-border-color);
  }
}

.c-button-primary::before {
  content: "";
  width: 10px;
  aspect-ratio: 15/28;
  background-color: currentColor;
  mask-image: url(../img/common/icon_arrow.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .c-button-primary::before {
    right: 12px;
    width: 9px;
  }
}

.c-button-carousel {
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  color: var(--c-primary);
  cursor: pointer;
  transition: opacity var(--duration);
}
@media (any-hover: hover) {
  .c-button-carousel:hover {
    opacity: 0.7;
  }
}

.c-button-carousel {
  position: static;
  inset: auto;
  z-index: auto;
  opacity: 1;
  transform: none;
  background: transparent;
}

.c-button-carousel.splide__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.c-button-carousel::before {
  content: "";
  display: block;
  width: 15px;
  aspect-ratio: 1;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
@media screen and (max-width: 767px) {
  .c-button-carousel::before {
    width: 14px;
  }
}

.c-button-carousel--reverse::before {
  transform: rotate(-135deg);
}

.c-hamburger {
  position: relative;
  display: block;
  appearance: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
  width: 28px;
  aspect-ratio: 28/20;
}

.c-hamburger__line {
  --_y: 9px;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 2px;
  background-color: #8c6aa4;
}

.c-hamburger__line::before,
.c-hamburger__line::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: inherit;
  content: "";
  transition: transform 0.3s, top 0.3s;
}

.c-hamburger__line::before {
  top: calc(-1 * var(--_y));
  background-color: var(--c-secondary);
}

.c-hamburger__line::after {
  top: var(--_y);
  background-color: var(--c-primary);
}

.c-hamburger[aria-expanded=true] .c-hamburger__line {
  background-color: transparent;
}

.c-hamburger[aria-expanded=true] .c-hamburger__line::before,
.c-hamburger[aria-expanded=true] .c-hamburger__line::after {
  top: 0;
}

.c-hamburger[aria-expanded=true] .c-hamburger__line::before {
  transform: rotate(45deg);
}

.c-hamburger[aria-expanded=true] .c-hamburger__line::after {
  transform: rotate(-45deg);
}

.c-header-nav-link {
  --_background-color: #f8e9f2;
  --_border-color: #f8e9f2;
  --_color: var(--c-text);
  --_hover-border-color: var(--c-text);
  display: block;
  background-color: var(--_background-color);
  border-radius: var(--rounded-full);
  font-size: calc(13 * var(--to-rem));
  font-weight: 700;
  min-height: 32px;
  padding: 4px 25px 4px 18px;
  text-align: center;
  align-content: center;
  position: relative;
  border: 1px solid var(--_border-color);
  color: var(--_color);
  letter-spacing: 0.04em;
  transition: background-color var(--duration), border-color var(--duration), color var(--duration);
}
@media screen and (max-width: 767px) {
  .c-header-nav-link {
    font-size: calc(15 * var(--to-rem));
    min-height: 42px;
    letter-spacing: 0.02em;
  }
}
@media (hover: hover) {
  .c-header-nav-link:hover {
    opacity: 1;
    color: var(--_background-color);
    background-color: var(--_color);
    border-color: var(--_hover-border-color);
  }
}

.c-header-nav-link::before {
  content: "";
  width: 8px;
  aspect-ratio: 15/28;
  background-color: currentColor;
  mask-image: url(../img/common/icon_arrow.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .c-header-nav-link::before {
    width: 9px;
  }
}

.c-header-nav-link[data-color=secondary] {
  --_background-color: var(--c-secondary);
  --_border-color: var(--c-secondary);
  --_color: var(--c-text-white);
  --_hover-border-color: var(--c-secondary);
}

.c-header-nav-link small {
  font-size: calc(9 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .c-header-nav-link small {
    font-size: calc(11 * var(--to-rem));
  }
}

.c-icon {
  display: block;
  width: 100%;
}

.c-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: currentcolor;
  display: block;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.c-menu {
  position: fixed;
  inset: 64px 0 0 0;
  z-index: var(--z-index-sp-menu);
  width: 100%;
  height: calc(100dvh - 64px);
  background-image: url(../img/common/bg_sp-menu.jpg);
  background-size: cover;
  background-position: center -64px;
  background-repeat: repeat;
  color: var(--c-base);
  padding: 50px 42px;
  overflow-y: scroll;
  overscroll-behavior-y: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.c-menu[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s, visibility 0.5s;
}

.c-menu__list {
  display: grid;
  row-gap: 18px;
}

.c-dialog {
  --_duration: 0.3s;
  position: fixed;
  inset: 0;
  overscroll-behavior: contain;
  transition-duration: var(--_duration);
  transition-property: display, overlay, opacity;
  transition-behavior: allow-discrete;
  border: none;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.c-dialog::-webkit-scrollbar {
  display: none;
}

.c-dialog::backdrop {
  background-color: color-mix(in srgb, #c1b6c2 75%, transparent);
  transition: opacity;
  transition-duration: inherit;
}

.c-dialog:not(:modal),
.c-dialog:not(:modal)::backdrop {
  opacity: 0;
}

@starting-style {
  .c-dialog:modal,
  .c-dialog:modal::backdrop {
    opacity: 0;
  }
}

.c-dialog[open] {
  animation: slideIn var(--_duration) cubic-bezier(0, 0, 0.2, 1);
}

.c-dialog:not([open]) {
  animation: slideOut var(--_duration) cubic-bezier(0, 0, 0.2, 1);
}

@keyframes slideIn {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2.5%);
  }
}
.l-inner {
  --_contents-width: var(--contents-width);
  --_page-gutter: var(--page-gutter-pc);
  margin: 0 auto;
  width: min(var(--_contents-width) + var(--_page-gutter) * 2, 100%);
  padding: 0 var(--_page-gutter);
}
@media screen and (max-width: 767px) {
  .l-inner {
    --_contents-width: var(--sp-max-width);
    --_page-gutter: var(--page-gutter-sp);
  }
}

.l-inner[data-size=sm] {
  --_contents-width: var(--contents-width-sm);
}
@media screen and (max-width: 767px) {
  .l-inner[data-size=sm] {
    --_contents-width: var(--sp-max-width);
  }
}

.l-inner[data-size=lg] {
  --_contents-width: var(--contents-width-lg);
}
@media screen and (max-width: 767px) {
  .l-inner[data-size=lg] {
    --_contents-width: var(--sp-max-width);
  }
}

.l-wrapper {
  overflow-x: clip;
  position: relative;
}
@media screen and (max-width: 767px) {
  .l-wrapper {
    background-image: url(../img/index/bg_sp.jpg);
  }
}

.l-wrapper::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../img/index/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  position: fixed;
  inset: 0;
}

.l-header {
  --_logo-width: 156px;
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: var(--z-index-header);
  background-color: var(--c-base);
}
@media screen and (max-width: 767px) {
  .l-header {
    --_logo-width: 137px;
    padding: 5px 0;
  }
}

.l-header__inner {
  padding: 0 25px 0 20px;
  display: grid;
  grid-template-columns: var(--_logo-width) 1fr;
  align-items: center;
  column-gap: 40px;
}
@media screen and (max-width: 767px) {
  .l-header__inner {
    padding: 0 18px 0 14px;
  }
}

.l-header__logo {
  display: block;
}

.l-header__nav {
  justify-self: end;
}
@media screen and (max-width: 1100px) {
  .l-header__nav {
    display: none;
  }
}

.l-header__nav-list {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  gap: 8px;
}

.l-header__hamburger {
  display: none;
}
@media screen and (max-width: 1100px) {
  .l-header__hamburger {
    display: block;
    justify-self: end;
  }
}

.l-footer {
  margin-top: 180px;
  color: var(--c-text-white);
  padding: 80px 0 60px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .l-footer {
    margin-top: 150px;
    padding: 50px 0 160px;
  }
}

.l-footer::before {
  content: "";
  width: 150%;
  height: 100%;
  background-color: #ad529b;
  position: absolute;
  inset: 0 0 0 50%;
  transform: translateX(-50%);
  border-radius: 50%/100% 100% 0 0;
}
@media screen and (max-width: 767px) {
  .l-footer::before {
    width: 300%;
  }
}

.l-footer__inner {
  --_contents-width: 640px;
  position: relative;
}

.l-footer__app {
  padding: 0 54px;
}
@media screen and (max-width: 767px) {
  .l-footer__app {
    padding: 0;
  }
}

.l-footer__heading {
  font-size: calc(18 * var(--to-rem));
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
}

.l-footer__downloads {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 221fr 244fr;
  column-gap: 57px;
}
@media screen and (max-width: 767px) {
  .l-footer__downloads {
    margin: 16px auto 0;
    grid-template-columns: 1fr;
    width: min(100%, 183px);
    row-gap: 18px;
  }
}

@media screen and (max-width: 767px) {
  .l-footer__download {
    display: grid;
    row-gap: 4px;
    text-align: center;
  }
}

.l-footer__download:nth-of-type(2) {
  position: relative;
}

.l-footer__download:nth-of-type(2)::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: currentColor;
  position: absolute;
  top: 50%;
  left: -28px;
  transform: translate(0, -50%);
}
@media screen and (max-width: 767px) {
  .l-footer__download:nth-of-type(2)::before {
    display: none;
  }
}

.l-footer__download-label {
  font-size: calc(14 * var(--to-rem));
  font-weight: 500;
  letter-spacing: 0.06em;
}

.l-footer__download-body {
  display: grid;
  grid-template-columns: 1fr 54px;
  column-gap: 6px;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .l-footer__download-body {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .l-footer__qr {
    display: none;
  }
}

.l-footer__app-button {
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .l-footer__app-button {
    margin-top: 30px;
  }
}

.l-footer__direct {
  margin-top: 36px;
  border-top: 1px solid var(--c-base);
  padding: 36px 54px 0;
}
@media screen and (max-width: 767px) {
  .l-footer__direct {
    margin-top: 34px;
    padding: 34px 0 0;
  }
}

.l-footer__direct-button {
  margin-top: 16px;
}
@media screen and (max-width: 767px) {
  .l-footer__direct-button {
    margin-top: 10px;
  }
}

.l-footer__button {
  --_color: #ad529b;
  --_background-color: #f8e9f2;
  --_border-color: #ad529b;
  --_hover-background-color: #ad529b;
  --_hover-color: var(--c-base);
  --_hover-border-color: var(--c-base);
  --_font-size: calc(18 * var(--to-rem));
  --_min-height: 48px;
}
@media screen and (max-width: 767px) {
  .l-footer__button {
    --_font-size: calc(15 * var(--to-rem));
    --_min-height: 46px;
    letter-spacing: -0.04em;
  }
}

.p-fv {
  color: var(--c-text-white);
  padding: 65px 0 80px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-fv {
    padding: 50px 0 115px;
  }
}

.p-fv::before {
  content: "";
  width: 100%;
  height: 1620px;
  background-image: url(../img/index/bg_fv-gradation.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .p-fv::before {
    height: 1112px;
    top: -64px;
    background-image: url(../img/index/bg_fv-gradation_sp.png);
  }
}

.p-fv__inner {
  position: relative;
}

.p-fv__heading {
  margin-inline: auto;
  width: min(100%, 594px);
}

.p-fv__lead {
  margin-top: 20px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.6875;
}
@media screen and (max-width: 767px) {
  .p-fv__lead {
    font-size: calc(15 * var(--to-rem));
    letter-spacing: 0.04em;
    line-height: 1.75;
  }
}

.p-fv__visual {
  margin: 28px auto 0;
  width: min(100%, 332px);
}
@media screen and (max-width: 767px) {
  .p-fv__visual {
    width: min(100%, 282px);
  }
}

.p-fv__button {
  margin: 30px auto 0;
  width: min(100%, 430px);
}
@media screen and (max-width: 767px) {
  .p-fv__button {
    margin: 40px auto 0;
  }
}

.p-message {
  position: relative;
  padding: 225px 0 0;
}
@media screen and (max-width: 767px) {
  .p-message {
    padding: 100px 0 0;
  }
}

.p-message::before {
  content: "";
  width: 1700px;
  aspect-ratio: 343/258;
  background-image: url(../img/index/bg_message.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(50% + 150px);
  left: calc(50% - 50px);
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-message::before {
    width: 1200px;
    top: calc(50% + 90px);
    left: calc(50% - 85px);
    transform: translate(-50%, -50%) rotate(-15deg);
  }
}

.p-message__inner {
  position: relative;
}

.p-message__heading {
  margin-inline: auto;
  width: min(100%, 529px);
}
@media screen and (max-width: 767px) {
  .p-message__heading {
    width: min(100%, 285px);
  }
}

.p-message__letter {
  margin: 20px auto 0;
  width: min(100%, 700px);
}

.p-message__button {
  margin: 40px auto 0;
  width: min(100%, 430px);
}
@media screen and (max-width: 767px) {
  .p-message__button {
    margin: 25px auto 0;
  }
}

.p-qa {
  margin-top: 152px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-qa {
    margin-top: 138px;
  }
}

.p-qa::before {
  content: "";
  width: 788px;
  aspect-ratio: 788/505;
  background-image: url(../img/index/bg_qa.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: calc(50% + 55px);
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-qa::before {
    top: calc(50% + 30px);
    left: calc(50% + 68px);
    transform: translate(-50%, -50%) rotate(20deg);
  }
}

.p-qa__inner {
  position: relative;
}

.p-qa__heading {
  margin-inline: auto;
  width: min(100%, 405px);
}
@media screen and (max-width: 767px) {
  .p-qa__heading {
    width: min(100%, 280px);
  }
}

.p-qa__content {
  margin: 20px auto 0;
  padding-top: 20px;
  width: min(100%, 475px);
  text-align: center;
  font-weight: 500;
  font-size: calc(16 * var(--to-rem));
  line-height: 1.8;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-qa__content {
    margin: 25px auto 0;
    padding-top: 25px;
    line-height: 1.4375;
  }
}

.p-qa__content::before {
  content: "";
  background-image: linear-gradient(to right, #9e7db5, #9e7db5 5px, transparent 5px, transparent 9px);
  background-size: 9px 1px;
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  bottom: 98.5%;
  left: 0;
  right: 0;
}

.p-qa__lead span {
  font-size: calc(22 * var(--to-rem));
  color: var(--c-secondary);
}

.p-qa__period {
  margin-top: 5px;
}
@media screen and (max-width: 767px) {
  .p-qa__period {
    margin-top: 10px;
  }
}

.p-qa__button {
  margin: 25px auto 0;
  width: min(100%, 343px);
}
@media screen and (max-width: 767px) {
  .p-qa__button {
    margin: 10px auto 0;
  }
}

.p-qa__button > a {
  --_font-size: calc(16 * var(--to-rem));
}

.p-collection {
  margin-top: 265px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-collection {
    margin-top: 232px;
  }
}

.p-collection__inner {
  --_contents-width: 800px;
}

.p-collection__heading {
  margin-inline: auto;
  width: min(100%, 365px);
}
@media screen and (max-width: 767px) {
  .p-collection__heading {
    width: min(100%, 305px);
  }
}

.p-collection__body {
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .p-collection__body {
    margin: 30px auto 0;
    width: min(252px, 100%);
  }
}

.p-collection__carousel-slide {
  width: 252px;
}

.p-collection__carousel {
  position: relative;
}

.p-collection__arrows {
  position: static;
}

.p-collection__arrow {
  --_inline-inset: -65px;
  position: absolute;
  top: calc(50% - 25px);
  z-index: 2;
  translate: 0 -50%;
}
@media screen and (max-width: 767px) {
  .p-collection__arrow {
    --_inline-inset: -45px;
  }
}

.p-collection__arrow--prev {
  left: var(--_inline-inset);
}

.p-collection__arrow--next {
  right: var(--_inline-inset);
}

.p-collection__carousel-pagination {
  margin: 45px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: min(100%, 312px);
}

.p-collection__carousel-pagination li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-collection__carousel-pagination button {
  width: 10px;
  aspect-ratio: 1;
  background-color: #f6e5ef;
  border-radius: var(--rounded-full);
}

.p-collection__carousel-pagination button.is-active {
  background-color: #bb3a86;
}

.p-collection__slide-button {
  overflow: hidden;
}
@media (any-hover: hover) {
  .p-collection__slide-button:hover {
    --_scale: scale(1.05);
  }
}

.p-collection__slide-button img {
  transition: transform var(--duration);
  transform: var(--_scale);
}

.p-collection__note {
  margin-top: -1.1em;
  text-align: right;
  font-size: calc(12 * var(--to-rem));
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .p-collection__note {
    margin-top: -4.5em;
    font-size: calc(10 * var(--to-rem));
    letter-spacing: 0.06em;
  }
}

.p-collection-dialog {
  background-color: transparent;
}

.p-collection-dialog__content {
  margin-inline: auto;
  width: min(100%, 800px);
}

.p-collection-dialog__close {
  margin: 0 0 -35px auto;
  width: 70px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  background-color: #8c6aa4;
  color: var(--c-text-white);
  border-radius: var(--rounded-full);
  font-size: 2.25em;
  font-weight: 300;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .p-collection-dialog__close {
    margin: 0 -5px 10px auto;
    width: 46px;
  }
}

.p-collection-dialog__body {
  margin-inline: auto;
  width: min(100%, 442px);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-collection-dialog__body {
    width: min(100%, 310px);
  }
}

.p-collection-dialog__meta-image {
  margin: 20px auto 0;
  width: 230px;
}
@media screen and (max-width: 767px) {
  .p-collection-dialog__meta-image {
    margin: 15px auto 0;
    width: 200px;
  }
}

.p-about {
  margin-top: 338px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-about {
    margin-top: 342px;
  }
}

.p-about::before {
  content: "";
  width: 1700px;
  aspect-ratio: 3362/2342;
  background-image: url(../img/index/bg_about.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% + 50px);
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-about::before {
    width: 1550px;
    top: calc(50% + 30px);
    left: calc(50% + 200px);
    transform: translate(-50%, -50%) rotate(16deg);
  }
}

.p-about__inner {
  position: relative;
}

.p-about__heading {
  margin-inline: auto;
  width: min(100%, 326px);
}
@media screen and (max-width: 767px) {
  .p-about__heading {
    width: min(100%, 272px);
  }
}

.p-about__panel {
  margin: 30px auto 0;
  width: min(100%, 640px);
  border-radius: 50px;
  background-color: var(--c-base);
  padding: 65px 100px 45px;
}
@media screen and (max-width: 767px) {
  .p-about__panel {
    margin: 24px auto 0;
    border-radius: 40px;
    padding: 38px 18px;
  }
}

.p-about__intro {
  text-align: center;
}

.p-about__intro-text {
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.75;
}

.p-about__intro-mark {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: calc(24 * var(--to-rem));
  line-height: 1.4;
}

.p-about__intro-mark span {
  font-size: calc(32 * var(--to-rem));
}

.p-about__intro-note {
  margin-top: 10px;
  font-size: calc(12 * var(--to-rem));
  letter-spacing: 0.02em;
  font-weight: 500;
}

.p-about__stats {
  margin: 42px auto 0;
  width: min(100%, 347px);
}
@media screen and (max-width: 767px) {
  .p-about__stats {
    margin: 36px auto 0;
    width: min(100%, 250px);
  }
}

.p-about__buttons {
  margin-top: 32px;
  display: grid;
  row-gap: 12px;
}
@media screen and (max-width: 767px) {
  .p-about__buttons {
    margin-top: 28px;
  }
}

@media screen and (max-width: 767px) {
  .p-about__button--01 {
    font-size: calc(15 * var(--to-rem));
  }
}

.p-about__button--02 {
  --_background-color: var(--c-secondary);
  --_border-color: var(--c-secondary);
  color: #ffe747;
  font-size: calc(23 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-about__button--02 {
    font-size: calc(21 * var(--to-rem));
  }
}
@media (any-hover: hover) {
  .p-about__button--02:hover {
    color: var(--c-primary);
  }
  .p-about__button--02:hover::before {
    background-color: var(--c-primary);
  }
  .p-about__button--02:hover span {
    color: var(--c-primary);
  }
}

.p-about__button--02 span {
  color: var(--c-text-white);
  transition: color var(--duration) ease;
}

.p-about__button--02::before {
  background-color: var(--c-base);
}

.p-about__button-year {
  font-size: calc(16 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-about__button-year {
    font-size: calc(18 * var(--to-rem));
  }
}

.p-schedule {
  margin-top: 310px;
  position: relative;
  text-align: center;
}

.p-schedule__meta {
  font-size: calc(18 * var(--to-rem));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.75;
}

.p-schedule__lead {
  margin-top: 5px;
  font-size: calc(22 * var(--to-rem));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.75;
}
@media screen and (max-width: 767px) {
  .p-schedule__lead {
    margin-inline: auto;
    width: min(100%, 250px);
  }
}

.p-schedule__lead-accent {
  color: var(--c-secondary);
}

@media screen and (max-width: 767px) {
  .p-schedule__lead > span {
    display: block;
    position: relative;
  }
}

@media screen and (max-width: 767px) {
  .p-schedule__lead > span::before {
    content: "";
    width: 100%;
    height: 3px;
    background-image: url(../img/index/underline.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.p-fixed-button {
  --_label-color: #bb3a86;
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: var(--z-index-fixed-button);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration) ease, visibility var(--duration) ease;
}
@media screen and (max-width: 1100px) {
  .p-fixed-button {
    bottom: 5px;
    right: 5px;
  }
}

.p-fixed-button.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.p-fixed-button__button {
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 1100px) {
  .p-fixed-button__button {
    width: 134px;
  }
}

.p-fixed-button__body {
  margin-top: 8px;
  width: 100%;
  aspect-ratio: 237/230;
  display: grid;
  place-content: center;
  background-image: url(../img/common/bg_fixed-button.png);
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 20px;
  text-align: center;
  color: var(--c-text-white);
  transition: filter var(--duration);
}
@media screen and (max-width: 1100px) {
  .p-fixed-button__body {
    margin-top: 4px;
    aspect-ratio: 134/130;
    padding-top: 12px;
  }
}
@media (any-hover: hover) {
  .p-fixed-button__button:hover .p-fixed-button__body {
    filter: drop-shadow(0 0 4px var(--c-primary));
  }
}

.p-fixed-button__thanks {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
}
@media screen and (max-width: 1100px) {
  .p-fixed-button__thanks {
    font-size: calc(9 * var(--to-rem));
  }
}

.p-fixed-button__catch {
  margin-top: 4px;
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
@media screen and (max-width: 1100px) {
  .p-fixed-button__catch {
    font-size: calc(9 * var(--to-rem));
  }
}

.p-fixed-button__catch .lg {
  font-size: 17px;
}
@media screen and (max-width: 1100px) {
  .p-fixed-button__catch .lg {
    font-size: calc(12 * var(--to-rem));
  }
}

.p-fixed-button__catch .xl {
  font-size: 22px;
}
@media screen and (max-width: 1100px) {
  .p-fixed-button__catch .xl {
    font-size: calc(15 * var(--to-rem));
  }
}

.p-fixed-button__catch .yellow {
  color: #ffe747;
}

.p-fixed-button__label {
  --fixed-button-bob-distance: 8px;
  margin-inline: auto;
  width: fit-content;
  color: var(--_label-color);
  font-weight: 700;
  letter-spacing: 0.08em;
  position: relative;
  animation: p-fixed-button-label-bob 2.4s ease-in-out infinite;
  transition: color var(--duration);
}
@media screen and (max-width: 1100px) {
  .p-fixed-button__label {
    font-size: calc(13 * var(--to-rem));
  }
}

.p-fixed-button.is-over-footer {
  --_label-color: var(--c-text-white);
}

@keyframes p-fixed-button-label-bob {
  0% {
    transform: translateY(0);
  }
  40.5% {
    transform: translateY(calc(-1 * var(--fixed-button-bob-distance)));
  }
  80% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
.p-fixed-button__label::before,
.p-fixed-button__label::after {
  content: "";
  width: 1px;
  height: 1em;
  background-color: currentColor;
  position: absolute;
  top: calc(50% + 2px);
  left: -0.75em;
  transform: translateY(-50%) rotate(-35deg);
}
@media screen and (max-width: 1100px) {
  .p-fixed-button__label::before,
  .p-fixed-button__label::after {
    top: calc(50% + 1px);
  }
}

.p-fixed-button__label::before {
  left: -0.65em;
  transform: translateY(-50%) rotate(-35deg);
}

.p-fixed-button__label::after {
  left: auto;
  right: -0.65em;
  transform: translateY(-50%) rotate(35deg);
}

.p-fixed-dialog {
  width: min(100%, 830px);
  background-color: transparent;
}
@media screen and (max-width: 767px) {
  .p-fixed-dialog {
    padding: 0;
    background-color: var(--c-base);
  }
}

.p-fixed-dialog__content {
  padding: 55px 65px 50px;
  background-color: var(--c-base);
}
@media screen and (max-width: 767px) {
  .p-fixed-dialog__content {
    padding: 0 0 40px;
  }
}

.p-fixed-dialog__close {
  width: 70px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  background-color: #8c6aa4;
  color: var(--c-text-white);
  border-radius: var(--rounded-full);
  font-size: 2.25em;
  font-weight: 300;
  line-height: 1;
  position: absolute;
  top: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  .p-fixed-dialog__close {
    width: 46px;
    position: sticky;
    top: 10px;
    margin: 10px 10px -10px auto;
  }
}

.p-fixed-dialog__close span {
  display: inline-block;
  transform: translateY(-1px);
}

.p-fixed-dialog__body {
  display: grid;
  row-gap: 32px;
}
@media screen and (max-width: 767px) {
  .p-fixed-dialog__body {
    row-gap: 30px;
  }
}

@media screen and (max-width: 767px) {
  .p-fixed-dialog__schedule {
    padding: 0 18px;
  }
}

.p-fixed-dialog__button {
  margin-inline: auto;
  width: min(100%, 430px);
}
@media screen and (max-width: 767px) {
  .p-fixed-dialog__button {
    width: min(100%, 300px);
  }
}

@media screen and (max-width: 767px) {
  .p-fixed-dialog__button a {
    font-size: calc(15 * var(--to-rem));
  }
}

.u-mt10 {
  margin-top: 10px;
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

@media screen and (max-width: 767px) {
  .u-desktop {
    display: none;
  }
}

.u-mobile {
  display: none;
}
@media screen and (max-width: 767px) {
  .u-mobile {
    display: revert;
  }
}

.u-di {
  display: inline;
}

.u-db {
  display: block;
}

.u-dib {
  display: inline-block;
}

.u-fluid-text {
  --_viewport-min: var(--viewport-min);
  --_viewport-max: var(--viewport-max);
  --_font-size-min: var(--font-size-min);
  --_font-size-max: var(--font-size-max);
  /* ===== Linear equation (y = ax + b) ===== */
  /* viewport が 1px 広がるごとの font-size 増分（a） */
  --font-size-slope: calc(
    (var(--_font-size-max) - var(--_font-size-min)) /
      (var(--_viewport-max) - var(--_viewport-min))
  );
  /* viewport に依存しない基礎サイズ（b） */
  --font-size-base-offset: calc(
    var(--_font-size-min) - var(--font-size-slope) * var(--_viewport-min)
  );
  /* viewport に応じて変化する font-size（ax + b） */
  --font-size-fluid-value: calc(
    var(--font-size-slope) * 100vi + var(--font-size-base-offset) *
      (1rem / var(--root-font-size))
  );
  /* ===== Clamp ===== */
  /* 最小・最大を制限した最終 font-size */
  --font-size-clamp: clamp(
    calc(
      var(--_font-size-min) * (1rem / var(--root-font-size)) *
        var(--device-scale)
    ),
    var(--font-size-fluid-value),
    calc(
      var(--_font-size-max) * (1rem / var(--root-font-size)) *
        var(--device-scale)
    )
  );
  font-size: var(--font-size-clamp);
}