.c-top-select {
  --select-panel-gap: calc(15 * var(--px));
  --select-option-padding-block: calc(10 * var(--px));
  position: relative;
}
.c-top-select-button {
  display: block;
}
.c-top-select:has(.c-top-select-native:focus-visible), .c-top-select-button:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}
.c-top-select-label-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.c-top-select-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
}
.c-top-select-button .c-top-select-value {
  display: block;
  text-box: inherit;
}
.c-top-select-panel {
  display: flex;
  flex-direction: column;
  gap: var(--select-panel-gap);
  padding: var(--space-16);
  background: var(--color-white);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.c-top-select-panel[inert] {
  opacity: 0;
  transform: translateY(calc(-8 * var(--px)));
  transition-duration: var(--duration-fast);
}
@media screen and (min-width: 769px) {
  .c-top-select-panel {
    width: calc(200 * var(--px));
    border-radius: calc(8 * var(--px));
  }
}
.c-top-select-title {
  font-size: max(16px, 16 * var(--px));
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-blue);
  letter-spacing: 0.04em;
  text-box: trim-both cap alphabetic;
}
.c-top-select-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}
@media screen and (min-width: 769px) {
  .c-top-select-options {
    grid-template-columns: minmax(0, 1fr);
  }
}
.c-top-select-option {
  display: block;
  width: 100%;
  height: 100%;
  padding-block: var(--select-option-padding-block);
  padding-inline: var(--space-8);
  font-family: inherit;
  font-size: max(14px, 14 * var(--px));
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-black);
  text-align: start;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-pale-blue);
  border: 0;
  border-radius: calc(3 * var(--px));
  transition: background-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .c-top-select-option:hover {
    background-color: var(--color-sky-blue);
  }
}
.c-top-select-option[aria-current=true] {
  font-weight: 700;
}
.c-top-select-option-label {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  text-box: trim-both cap alphabetic;
}

.c-top-modal {
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: inherit;
  background: none;
  border: 0;
}
.c-top-modal::backdrop {
  background: none;
}
.c-top-modal--card {
  width: calc(100% - calc(16 * var(--px)));
  max-height: calc(100% - calc(16 * var(--px)));
  border-radius: calc(8 * var(--px));
}
.c-top-modal--card::backdrop {
  background: rgba(44, 42, 41, 0.6);
}
@media screen and (min-width: 769px) {
  .c-top-modal--card {
    max-width: calc(376 * var(--px));
  }
}

html[data-modal-active] {
  padding-right: var(--scrollbar-width, 0);
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .c-top-modal:not(.c-top-modal--card) {
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  }
  @starting-style {
    .c-top-modal:not(.c-top-modal--card)[open] {
      opacity: 0;
      transform: translateX(calc(16 * var(--px)));
    }
  }
  .c-top-modal:not(.c-top-modal--card)[data-closing] {
    opacity: 0;
    transform: translateX(calc(16 * var(--px)));
    transition-duration: var(--duration-fast);
  }
  .c-top-modal--card {
    transition: opacity var(--duration-base) var(--ease-out), scale var(--duration-base) var(--ease-out);
  }
  .c-top-modal--card::backdrop {
    transition: opacity var(--duration-base) var(--ease-out);
  }
  @starting-style {
    .c-top-modal--card[open] {
      opacity: 0;
      scale: 0.85;
    }
    .c-top-modal--card[open]::backdrop {
      opacity: 0;
    }
  }
  .c-top-modal--card[data-closing] {
    opacity: 0;
    scale: 0.85;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-fast);
  }
  .c-top-modal--card[data-closing]::backdrop {
    opacity: 0;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-fast);
  }
}
:is([data-accordion-panel], [role=tabpanel])[data-animating] {
  overflow: hidden;
}

.c-top-blob {
  --blob-x1: 0;
  --blob-y1: 0;
  --blob-x2: 0;
  --blob-y2: 0;
  --blob-x3: 0;
  --blob-y3: 0;
  --blob-duration: 20s;
  --blob-delay: 0s;
  position: absolute;
  pointer-events: none;
  animation: c-top-blob var(--blob-duration) var(--ease-in-out) var(--blob-delay) infinite alternate;
}

@keyframes c-top-blob {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(var(--blob-x1), var(--blob-y1));
  }
  67% {
    transform: translate(var(--blob-x2), var(--blob-y2));
  }
  100% {
    transform: translate(var(--blob-x3), var(--blob-y3));
  }
}
.c-top-scroll :focus-visible {
  outline-offset: -2px;
}
.c-top-scroll-frame {
  --scroll-arrow-top: 50%;
  --scroll-arrow-inset: calc(4 * var(--px));
  position: relative;
}
.c-top-scroll-arrow {
  display: none;
}
@media screen and (min-width: 769px) {
  .c-top-scroll-arrow {
    position: absolute;
    top: var(--scroll-arrow-top);
    z-index: 1;
    display: block;
    width: calc(32 * var(--px));
    height: calc(32 * var(--px));
    background: rgba(255, 255, 255, 0.7) url("../images/top/common/scroll-arrow.svg") calc(5.48 * var(--px)) calc(6.45 * var(--px))/calc(20.0712 * var(--px)) auto no-repeat;
    border-radius: calc(2 * var(--px));
    translate: 0 -50%;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
}
@media (hover: hover) and (pointer: fine) {
  .c-top-scroll-arrow:hover {
    opacity: var(--hover-opacity);
  }
}
.c-top-scroll-arrow[inert] {
  opacity: 0;
}
.c-top-scroll-arrow-prev {
  left: var(--scroll-arrow-inset);
  scale: -1 1;
}
.c-top-scroll-arrow-next {
  right: var(--scroll-arrow-inset);
}

:root {
  --px: calc(100vw / 392);
}
@media screen and (min-width: 769px) {
  :root {
    --px: 1px;
    --pc-inner-width: min(calc(1280 * var(--px)), 100% - calc(80 * var(--px)));
  }
}
:root {
  --space-4: calc(4 * var(--px));
  --space-8: calc(8 * var(--px));
  --space-16: calc(16 * var(--px));
  --space-24: calc(24 * var(--px));
  --space-32: calc(32 * var(--px));
  --space-40: calc(40 * var(--px));
  --space-48: calc(48 * var(--px));
  --space-64: calc(64 * var(--px));
  --space-80: calc(80 * var(--px));
  --space-96: calc(96 * var(--px));
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --hover-opacity: 0.7;
  --color-white: #fff;
  --color-black: #2c2a29;
  --color-blue: #10069f;
  --color-cyan-200: #cce5f8;
  --color-cyan-300: #9ecdf2;
  --color-blue-hover: #140d77;
  --color-coral: #d33b0b;
  --color-pale-coral: #f2c8b7;
  --color-cream: #fff9d8;
  --color-sand-beige: #e8ddce;
  --color-sage-green: #bfd9cf;
  --color-sky-blue: #cbe5f8;
  --color-light-blue: #99bde5;
  --color-brown: #6c4f28;
  --color-pale-blue: #ebf7ff;
  --color-light-beige: #f6f4f2;
  --color-coral-hover: #bb2d00;
  --color-pale-coral-hover: #f5b196;
  --color-sage-green-hover: #90c8b2;
  --color-sky-blue-hover: #a2ceef;
  --font-base: "Noto Sans JP", sans-serif;
  --font-en: "Noto Serif JP", serif;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-black);
  text-spacing-trim: space-all;
  background: var(--color-white);
}

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

a {
  color: inherit;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) h1,
:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) h2,
:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) h3,
:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) h4,
:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) h5,
:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) h6 {
  font-size: inherit;
  font-weight: inherit;
}
:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) button,
:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) input,
:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) select,
:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) textarea {
  font: inherit;
  color: inherit;
}
:where(.p-top, .p-top-header, .p-top-footer, .p-top-menu) button {
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
}

@media screen and (min-width: 769px) {
  :where(.p-top > *, .p-top-header, .p-top-footer) {
    max-width: calc(392 * var(--px));
    margin-inline: auto;
  }
}