@charset "UTF-8";
:root {
  --color-main-pink: #ff80b7;
  --color-accent-pink: #ff9aa4;
  --color-main-red: #ff737f;
  --color-accent-red: #ff8a73;
  --color-main-orange: #ff9466;
  --color-accent-orange: #ffb873;
  --color-main-yellow: #f2d574;
  --color-accent-yellow: #f2ea85;
  --color-main-green: #6cd9a4;
  --color-accent-green: #7de6d2;
  --color-main-blue: #82d5ff;
  --color-accent-blue: #7ba5f2;
  --color-main-indigo: #677ee6;
  --color-accent-indigo: #9383e6;
  --color-main-purple: #8970cc;
  --color-accent-purple: #a571bf;
  --color-main-dark-gray: #555555;
  --color-accent-dark-gray: #6e4d80;
  --color-main-light-gray: #cccccc;
  --color-accent-light-gray: #b8cbe5;
  --color-rgb-pink: 255, 128, 183;
  --color-rgb-red: 255, 77, 79;
  --color-rgb-orange: 255, 122, 69;
  --color-rgb-yellow: 250, 219, 20;
  --color-rgb-green: 82, 196, 26;
  --color-rgb-blue: 24, 144, 255;
  --color-rgb-indigo: 47, 84, 235;
  --color-rgb-purple: 114, 46, 209;
  --color-rgb-dark-gray: 89, 89, 89;
  --color-rgb-light-gray: 217, 217, 217;
  --color-yellow: #fffce3;
  --color-text: var(--color-black);
  --color-text-sub: var(--color-main-light-gray);
  --color-black: #333;
  --color-white: #fff;
  --color-gray: #888;
  --color-bg: #fefefe;
  --color-bg-gray: #f3f4f6;
  --color-footer-bg: var(--color-text);
  --color-border: #eee;
  --color-active: #6BDFFF;
  --ISTJ: #D96C62;
  --ISFJ: #D9C14C;
  --INFJ: #59A9B3;
  --INTJ: #4C4080;
  --ISTP: #805446;
  --ISFP: #8DB35A;
  --INFP: #D96C8C;
  --INTP: #31478A;
  --ESTP: #D98D57;
  --ESFP: #D96CB5;
  --ENFP: #57ADD9;
  --ENTP: #4584BF;
  --ESTJ: #993D45;
  --ESFJ: #D96262;
  --ENFJ: #53A683;
  --ENTJ: #593145;
  --color-9ennea: #3a3a3a;
  --color-moshimaho: #3a3a3a;
  --vitality-color: #4d805c;
  --elemental-color: #6eb8d9;
  --spatiotemporal-color: #a64258;
  --genesis-color: #a6886c;
  --dominion-color: #ad423e;
  --sealing-color: #465f77;
  --psyche-color: #c9597f;
  --necromancy-color: #674b75;
  --font-family-logo: 'LINE Seed JP', sans-serif;
  --font-family-base: 'Zen Kaku Gothic New', sans-serif;
  --font-family-letter: 'Zen Maru Gothic', sans-serif;
  --font-family-en: 'Mayonice', sans-serif;
  --font-family-star: 'Potta One', system-ui;
  --font-family-mono: 'Atkinson Hyperlegible Mono', monospace;
  --std: 4px;
  --padding-base: var(--std);
  --margin-base: var(--std);
  --gap-base: var(--std);
  --radius-base: var(--std);
  --space-base: var(--std);
  --padding-1: var(--padding-base);
  --padding-2: calc(var(--padding-base) * 2);
  --padding-3: calc(var(--padding-base) * 4);
  --padding-4: calc(var(--padding-base) * 8);
  --padding-5: calc(var(--padding-base) * 16);
  --padding-6: calc(var(--padding-base) * 32);
  --padding-7: calc(var(--padding-base) * 64);
  --margin-1: var(--margin-base);
  --margin-2: calc(var(--margin-base) * 2);
  --margin-3: calc(var(--margin-base) * 4);
  --margin-4: calc(var(--margin-base) * 8);
  --margin-5: calc(var(--margin-base) * 16);
  --margin-6: calc(var(--margin-base) * 32);
  --margin-7: calc(var(--margin-base) * 64);
  --gap-1: var(--gap-base);
  --gap-2: calc(var(--gap-base) * 2);
  --gap-3: calc(var(--gap-base) * 4);
  --gap-4: calc(var(--gap-base) * 8);
  --gap-5: calc(var(--gap-base) * 16);
  --gap-6: calc(var(--gap-base) * 32);
  --gap-7: calc(var(--gap-base) * 64);
  --radius-1: var(--radius-base);
  --radius-2: calc(var(--radius-base) * 2);
  --radius-3: calc(var(--radius-base) * 4);
  --radius-4: calc(var(--radius-base) * 8);
  --radius-5: calc(var(--radius-base) * 16);
  --radius-6: calc(var(--radius-base) * 32);
  --radius-7: calc(var(--radius-base) * 64);
  --space-1: var(--space-base);
  --space-2: calc(var(--space-base) * 2);
  --space-3: calc(var(--space-base) * 4);
  --space-4: calc(var(--space-base) * 8);
  --space-5: calc(var(--space-base) * 16);
  --space-6: calc(var(--space-base) * 32);
  --space-7: calc(var(--space-base) * 64);
  --font-size-text-main: clamp(14px, 1.56vw, 16px);
  --line-height-text-main: 24px;
  --font-size-text-small: clamp(12px, 1.37vw, 14px);
  --line-height-text-small: 20px;
  --font-size-text-supplement: clamp(10px, 1.17vw, 12px);
  --font-size-big-title: 24px;
  --font-size-big-title-en: 36px;
  --font-size-main-title: clamp(20px, 3.13vw, 32px);
  --font-size-sub-title: clamp(16px, 1.95vw, 20px);
  --font-size-sub-title-en: 28px;
  --font-size-accent-title-ja: clamp(44px, 7.03vw, 72px);
  --font-size-accent-title-en: clamp(20px, 3.52vw, 36px);
  --layout-header-height: 64px;
  --layout-content-width: stretch;
  --layout-inner-width: calc(100% - var(--padding-2) * 2);
  --default-easing: cubic-bezier(0.25, 1, 0.5, 1);
  --mask-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --bounce-easing: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-cloth: cubic-bezier(0.45, 0, 0.55, 1);
}

@media screen and (min-width: 1025px) {
  :root {
    --padding-base: calc(var(--std) * 2);
    --margin-base: calc(var(--std) * 2);
    --gap-base: var(--std);
    --radius-base: calc(var(--std) * 1.2);
    --space-base: var(--std);
    --layout-content-width: 94%;
  }
}
:root {
  --color-main-pink: #ff80b7;
  --color-accent-pink: #ff9aa4;
  --color-main-red: #ff737f;
  --color-accent-red: #ff8a73;
  --color-main-orange: #ff9466;
  --color-accent-orange: #ffb873;
  --color-main-yellow: #f2d574;
  --color-accent-yellow: #f2ea85;
  --color-main-green: #6cd9a4;
  --color-accent-green: #7de6d2;
  --color-main-blue: #82d5ff;
  --color-accent-blue: #7ba5f2;
  --color-main-indigo: #677ee6;
  --color-accent-indigo: #9383e6;
  --color-main-purple: #8970cc;
  --color-accent-purple: #a571bf;
  --color-main-dark-gray: #555555;
  --color-accent-dark-gray: #6e4d80;
  --color-main-light-gray: #cccccc;
  --color-accent-light-gray: #b8cbe5;
  --color-rgb-pink: 255, 128, 183;
  --color-rgb-red: 255, 77, 79;
  --color-rgb-orange: 255, 122, 69;
  --color-rgb-yellow: 250, 219, 20;
  --color-rgb-green: 82, 196, 26;
  --color-rgb-blue: 24, 144, 255;
  --color-rgb-indigo: 47, 84, 235;
  --color-rgb-purple: 114, 46, 209;
  --color-rgb-dark-gray: 89, 89, 89;
  --color-rgb-light-gray: 217, 217, 217;
  --color-yellow: #fffce3;
  --color-text: var(--color-black);
  --color-text-sub: var(--color-main-light-gray);
  --color-black: #333;
  --color-white: #fff;
  --color-gray: #888;
  --color-bg: #fefefe;
  --color-bg-gray: #f3f4f6;
  --color-footer-bg: var(--color-text);
  --color-border: #eee;
  --color-active: #6BDFFF;
  --ISTJ: #D96C62;
  --ISFJ: #D9C14C;
  --INFJ: #59A9B3;
  --INTJ: #4C4080;
  --ISTP: #805446;
  --ISFP: #8DB35A;
  --INFP: #D96C8C;
  --INTP: #31478A;
  --ESTP: #D98D57;
  --ESFP: #D96CB5;
  --ENFP: #57ADD9;
  --ENTP: #4584BF;
  --ESTJ: #993D45;
  --ESFJ: #D96262;
  --ENFJ: #53A683;
  --ENTJ: #593145;
  --color-9ennea: #3a3a3a;
  --color-moshimaho: #3a3a3a;
  --vitality-color: #4d805c;
  --elemental-color: #6eb8d9;
  --spatiotemporal-color: #a64258;
  --genesis-color: #a6886c;
  --dominion-color: #ad423e;
  --sealing-color: #465f77;
  --psyche-color: #c9597f;
  --necromancy-color: #674b75;
  --font-family-logo: 'LINE Seed JP', sans-serif;
  --font-family-base: 'Zen Kaku Gothic New', sans-serif;
  --font-family-letter: 'Zen Maru Gothic', sans-serif;
  --font-family-en: 'Mayonice', sans-serif;
  --font-family-star: 'Potta One', system-ui;
  --font-family-mono: 'Atkinson Hyperlegible Mono', monospace;
  --std: 4px;
  --padding-base: var(--std);
  --margin-base: var(--std);
  --gap-base: var(--std);
  --radius-base: var(--std);
  --space-base: var(--std);
  --padding-1: var(--padding-base);
  --padding-2: calc(var(--padding-base) * 2);
  --padding-3: calc(var(--padding-base) * 4);
  --padding-4: calc(var(--padding-base) * 8);
  --padding-5: calc(var(--padding-base) * 16);
  --padding-6: calc(var(--padding-base) * 32);
  --padding-7: calc(var(--padding-base) * 64);
  --margin-1: var(--margin-base);
  --margin-2: calc(var(--margin-base) * 2);
  --margin-3: calc(var(--margin-base) * 4);
  --margin-4: calc(var(--margin-base) * 8);
  --margin-5: calc(var(--margin-base) * 16);
  --margin-6: calc(var(--margin-base) * 32);
  --margin-7: calc(var(--margin-base) * 64);
  --gap-1: var(--gap-base);
  --gap-2: calc(var(--gap-base) * 2);
  --gap-3: calc(var(--gap-base) * 4);
  --gap-4: calc(var(--gap-base) * 8);
  --gap-5: calc(var(--gap-base) * 16);
  --gap-6: calc(var(--gap-base) * 32);
  --gap-7: calc(var(--gap-base) * 64);
  --radius-1: var(--radius-base);
  --radius-2: calc(var(--radius-base) * 2);
  --radius-3: calc(var(--radius-base) * 4);
  --radius-4: calc(var(--radius-base) * 8);
  --radius-5: calc(var(--radius-base) * 16);
  --radius-6: calc(var(--radius-base) * 32);
  --radius-7: calc(var(--radius-base) * 64);
  --space-1: var(--space-base);
  --space-2: calc(var(--space-base) * 2);
  --space-3: calc(var(--space-base) * 4);
  --space-4: calc(var(--space-base) * 8);
  --space-5: calc(var(--space-base) * 16);
  --space-6: calc(var(--space-base) * 32);
  --space-7: calc(var(--space-base) * 64);
  --font-size-text-main: clamp(14px, 1.56vw, 16px);
  --line-height-text-main: 24px;
  --font-size-text-small: clamp(12px, 1.37vw, 14px);
  --line-height-text-small: 20px;
  --font-size-text-supplement: clamp(10px, 1.17vw, 12px);
  --font-size-big-title: 24px;
  --font-size-big-title-en: 36px;
  --font-size-main-title: clamp(20px, 3.13vw, 32px);
  --font-size-sub-title: clamp(16px, 1.95vw, 20px);
  --font-size-sub-title-en: 28px;
  --font-size-accent-title-ja: clamp(44px, 7.03vw, 72px);
  --font-size-accent-title-en: clamp(20px, 3.52vw, 36px);
  --layout-header-height: 64px;
  --layout-content-width: stretch;
  --layout-inner-width: calc(100% - var(--padding-2) * 2);
  --default-easing: cubic-bezier(0.25, 1, 0.5, 1);
  --mask-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --bounce-easing: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-cloth: cubic-bezier(0.45, 0, 0.55, 1);
}

@media screen and (min-width: 1025px) {
  :root {
    --padding-base: calc(var(--std) * 2);
    --margin-base: calc(var(--std) * 2);
    --gap-base: var(--std);
    --radius-base: calc(var(--std) * 1.2);
    --space-base: var(--std);
    --layout-content-width: 94%;
  }
}
html {
  font-size: var(--font-size-text-main);
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
a:hover {
  opacity: 0.5;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.wbr {
  display: inline-block;
}

/* ===================================
  見出し（タイトル・キャッチコピー）向け
   =================================== */
h1, h2, h3, h4, h5, h6 {
  /* AI/辞書ベースで文節の区切りを自動判定 */
  word-break: auto-phrase;
}

:root {
  --color-main-pink: #ff80b7;
  --color-accent-pink: #ff9aa4;
  --color-main-red: #ff737f;
  --color-accent-red: #ff8a73;
  --color-main-orange: #ff9466;
  --color-accent-orange: #ffb873;
  --color-main-yellow: #f2d574;
  --color-accent-yellow: #f2ea85;
  --color-main-green: #6cd9a4;
  --color-accent-green: #7de6d2;
  --color-main-blue: #82d5ff;
  --color-accent-blue: #7ba5f2;
  --color-main-indigo: #677ee6;
  --color-accent-indigo: #9383e6;
  --color-main-purple: #8970cc;
  --color-accent-purple: #a571bf;
  --color-main-dark-gray: #555555;
  --color-accent-dark-gray: #6e4d80;
  --color-main-light-gray: #cccccc;
  --color-accent-light-gray: #b8cbe5;
  --color-rgb-pink: 255, 128, 183;
  --color-rgb-red: 255, 77, 79;
  --color-rgb-orange: 255, 122, 69;
  --color-rgb-yellow: 250, 219, 20;
  --color-rgb-green: 82, 196, 26;
  --color-rgb-blue: 24, 144, 255;
  --color-rgb-indigo: 47, 84, 235;
  --color-rgb-purple: 114, 46, 209;
  --color-rgb-dark-gray: 89, 89, 89;
  --color-rgb-light-gray: 217, 217, 217;
  --color-yellow: #fffce3;
  --color-text: var(--color-black);
  --color-text-sub: var(--color-main-light-gray);
  --color-black: #333;
  --color-white: #fff;
  --color-gray: #888;
  --color-bg: #fefefe;
  --color-bg-gray: #f3f4f6;
  --color-footer-bg: var(--color-text);
  --color-border: #eee;
  --color-active: #6BDFFF;
  --ISTJ: #D96C62;
  --ISFJ: #D9C14C;
  --INFJ: #59A9B3;
  --INTJ: #4C4080;
  --ISTP: #805446;
  --ISFP: #8DB35A;
  --INFP: #D96C8C;
  --INTP: #31478A;
  --ESTP: #D98D57;
  --ESFP: #D96CB5;
  --ENFP: #57ADD9;
  --ENTP: #4584BF;
  --ESTJ: #993D45;
  --ESFJ: #D96262;
  --ENFJ: #53A683;
  --ENTJ: #593145;
  --color-9ennea: #3a3a3a;
  --color-moshimaho: #3a3a3a;
  --vitality-color: #4d805c;
  --elemental-color: #6eb8d9;
  --spatiotemporal-color: #a64258;
  --genesis-color: #a6886c;
  --dominion-color: #ad423e;
  --sealing-color: #465f77;
  --psyche-color: #c9597f;
  --necromancy-color: #674b75;
  --font-family-logo: 'LINE Seed JP', sans-serif;
  --font-family-base: 'Zen Kaku Gothic New', sans-serif;
  --font-family-letter: 'Zen Maru Gothic', sans-serif;
  --font-family-en: 'Mayonice', sans-serif;
  --font-family-star: 'Potta One', system-ui;
  --font-family-mono: 'Atkinson Hyperlegible Mono', monospace;
  --std: 4px;
  --padding-base: var(--std);
  --margin-base: var(--std);
  --gap-base: var(--std);
  --radius-base: var(--std);
  --space-base: var(--std);
  --padding-1: var(--padding-base);
  --padding-2: calc(var(--padding-base) * 2);
  --padding-3: calc(var(--padding-base) * 4);
  --padding-4: calc(var(--padding-base) * 8);
  --padding-5: calc(var(--padding-base) * 16);
  --padding-6: calc(var(--padding-base) * 32);
  --padding-7: calc(var(--padding-base) * 64);
  --margin-1: var(--margin-base);
  --margin-2: calc(var(--margin-base) * 2);
  --margin-3: calc(var(--margin-base) * 4);
  --margin-4: calc(var(--margin-base) * 8);
  --margin-5: calc(var(--margin-base) * 16);
  --margin-6: calc(var(--margin-base) * 32);
  --margin-7: calc(var(--margin-base) * 64);
  --gap-1: var(--gap-base);
  --gap-2: calc(var(--gap-base) * 2);
  --gap-3: calc(var(--gap-base) * 4);
  --gap-4: calc(var(--gap-base) * 8);
  --gap-5: calc(var(--gap-base) * 16);
  --gap-6: calc(var(--gap-base) * 32);
  --gap-7: calc(var(--gap-base) * 64);
  --radius-1: var(--radius-base);
  --radius-2: calc(var(--radius-base) * 2);
  --radius-3: calc(var(--radius-base) * 4);
  --radius-4: calc(var(--radius-base) * 8);
  --radius-5: calc(var(--radius-base) * 16);
  --radius-6: calc(var(--radius-base) * 32);
  --radius-7: calc(var(--radius-base) * 64);
  --space-1: var(--space-base);
  --space-2: calc(var(--space-base) * 2);
  --space-3: calc(var(--space-base) * 4);
  --space-4: calc(var(--space-base) * 8);
  --space-5: calc(var(--space-base) * 16);
  --space-6: calc(var(--space-base) * 32);
  --space-7: calc(var(--space-base) * 64);
  --font-size-text-main: clamp(14px, 1.56vw, 16px);
  --line-height-text-main: 24px;
  --font-size-text-small: clamp(12px, 1.37vw, 14px);
  --line-height-text-small: 20px;
  --font-size-text-supplement: clamp(10px, 1.17vw, 12px);
  --font-size-big-title: 24px;
  --font-size-big-title-en: 36px;
  --font-size-main-title: clamp(20px, 3.13vw, 32px);
  --font-size-sub-title: clamp(16px, 1.95vw, 20px);
  --font-size-sub-title-en: 28px;
  --font-size-accent-title-ja: clamp(44px, 7.03vw, 72px);
  --font-size-accent-title-en: clamp(20px, 3.52vw, 36px);
  --layout-header-height: 64px;
  --layout-content-width: stretch;
  --layout-inner-width: calc(100% - var(--padding-2) * 2);
  --default-easing: cubic-bezier(0.25, 1, 0.5, 1);
  --mask-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --bounce-easing: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-cloth: cubic-bezier(0.45, 0, 0.55, 1);
}

@media screen and (min-width: 1025px) {
  :root {
    --padding-base: calc(var(--std) * 2);
    --margin-base: calc(var(--std) * 2);
    --gap-base: var(--std);
    --radius-base: calc(var(--std) * 1.2);
    --space-base: var(--std);
    --layout-content-width: 94%;
  }
}
.u-hidden {
  display: none;
}

.u-hidden-sp {
  display: none;
}
@media screen and (min-width: 769px) {
  .u-hidden-sp {
    display: block;
  }
}

.u-hidden-pc {
  display: block;
}
@media screen and (min-width: 769px) {
  .u-hidden-pc {
    display: none;
  }
}

.u-w100 {
  width: 100%;
}

.u-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--padding-3);
}

.u-bg-white {
  background-color: var(--color-white);
}

.u-bg-black {
  color: var(--color-white);
  background-color: var(--color-black);
}

.u-content {
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .u-content {
    max-width: 1200px;
    margin: 0 auto;
  }
}
.u-content__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  margin-bottom: var(--space-5);
  position: relative;
}
.u-content__header::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--padding-2) * -1);
  transform: translateY(-50%);
  width: 22px;
  height: 80px;
  background: url("../../asset/img/portal/icon/icon_halfKeyhole.svg") no-repeat right center/contain;
  pointer-events: none;
}
@media screen and (min-width: 1025px) {
  .u-content__header::after {
    right: calc(50% - 50vw);
  }
}
.u-content__title-en--piece {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--gap-3);
  font-family: var(--font-family-en);
  font-size: var(--font-size-accent-title-en);
}
.u-content__title-en--piece::after {
  content: "";
  display: block;
  width: var(--img-size-accent-title-piece);
  height: var(--img-size-accent-title-piece);
  background: url("../../asset/img/portal/icon/icon_pinkPuzzle.svg") no-repeat center/contain;
}

.u-full-bleed {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
}

.u-action-area {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: var(--gap-4);
}

.u-shadow-light {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.u-m-center {
  margin: 0 auto;
}

.u-gap-s1 {
  gap: var(--space-1);
}

.u-bd-radius-s1 {
  border-radius: var(--space-1);
}

.u-m-s1 {
  margin: var(--space-1);
}

.u-mt-s1 {
  margin-top: var(--space-1);
}

.u-mb-s1 {
  margin-bottom: var(--space-1);
}

.u-ml-s1 {
  margin-left: var(--space-1);
}

.u-mr-s1 {
  margin-right: var(--space-1);
}

.u-mx-s1 {
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}

.u-my-s1 {
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

.u-p-s1 {
  padding: var(--space-1);
}

.u-pt-s1 {
  padding-top: var(--space-1);
}

.u-pb-s1 {
  padding-bottom: var(--space-1);
}

.u-pl-s1 {
  padding-left: var(--space-1);
}

.u-pr-s1 {
  padding-right: var(--space-1);
}

.u-px-s1 {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.u-py-s1 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.u-gap-s2 {
  gap: var(--space-2);
}

.u-bd-radius-s2 {
  border-radius: var(--space-2);
}

.u-m-s2 {
  margin: var(--space-2);
}

.u-mt-s2 {
  margin-top: var(--space-2);
}

.u-mb-s2 {
  margin-bottom: var(--space-2);
}

.u-ml-s2 {
  margin-left: var(--space-2);
}

.u-mr-s2 {
  margin-right: var(--space-2);
}

.u-mx-s2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.u-my-s2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.u-p-s2 {
  padding: var(--space-2);
}

.u-pt-s2 {
  padding-top: var(--space-2);
}

.u-pb-s2 {
  padding-bottom: var(--space-2);
}

.u-pl-s2 {
  padding-left: var(--space-2);
}

.u-pr-s2 {
  padding-right: var(--space-2);
}

.u-px-s2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.u-py-s2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.u-gap-s3 {
  gap: var(--space-3);
}

.u-bd-radius-s3 {
  border-radius: var(--space-3);
}

.u-m-s3 {
  margin: var(--space-3);
}

.u-mt-s3 {
  margin-top: var(--space-3);
}

.u-mb-s3 {
  margin-bottom: var(--space-3);
}

.u-ml-s3 {
  margin-left: var(--space-3);
}

.u-mr-s3 {
  margin-right: var(--space-3);
}

.u-mx-s3 {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}

.u-my-s3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.u-p-s3 {
  padding: var(--space-3);
}

.u-pt-s3 {
  padding-top: var(--space-3);
}

.u-pb-s3 {
  padding-bottom: var(--space-3);
}

.u-pl-s3 {
  padding-left: var(--space-3);
}

.u-pr-s3 {
  padding-right: var(--space-3);
}

.u-px-s3 {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.u-py-s3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.u-gap-m1 {
  gap: var(--space-4);
}

.u-bd-radius-m1 {
  border-radius: var(--space-4);
}

.u-m-m1 {
  margin: var(--space-4);
}

.u-mt-m1 {
  margin-top: var(--space-4);
}

.u-mb-m1 {
  margin-bottom: var(--space-4);
}

.u-ml-m1 {
  margin-left: var(--space-4);
}

.u-mr-m1 {
  margin-right: var(--space-4);
}

.u-mx-m1 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.u-my-m1 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.u-p-m1 {
  padding: var(--space-4);
}

.u-pt-m1 {
  padding-top: var(--space-4);
}

.u-pb-m1 {
  padding-bottom: var(--space-4);
}

.u-pl-m1 {
  padding-left: var(--space-4);
}

.u-pr-m1 {
  padding-right: var(--space-4);
}

.u-px-m1 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.u-py-m1 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.u-gap-m2 {
  gap: var(--space-5);
}

.u-bd-radius-m2 {
  border-radius: var(--space-5);
}

.u-m-m2 {
  margin: var(--space-5);
}

.u-mt-m2 {
  margin-top: var(--space-5);
}

.u-mb-m2 {
  margin-bottom: var(--space-5);
}

.u-ml-m2 {
  margin-left: var(--space-5);
}

.u-mr-m2 {
  margin-right: var(--space-5);
}

.u-mx-m2 {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}

.u-my-m2 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.u-p-m2 {
  padding: var(--space-5);
}

.u-pt-m2 {
  padding-top: var(--space-5);
}

.u-pb-m2 {
  padding-bottom: var(--space-5);
}

.u-pl-m2 {
  padding-left: var(--space-5);
}

.u-pr-m2 {
  padding-right: var(--space-5);
}

.u-px-m2 {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.u-py-m2 {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.u-gap-m3 {
  gap: var(--space-6);
}

.u-bd-radius-m3 {
  border-radius: var(--space-6);
}

.u-m-m3 {
  margin: var(--space-6);
}

.u-mt-m3 {
  margin-top: var(--space-6);
}

.u-mb-m3 {
  margin-bottom: var(--space-6);
}

.u-ml-m3 {
  margin-left: var(--space-6);
}

.u-mr-m3 {
  margin-right: var(--space-6);
}

.u-mx-m3 {
  margin-left: var(--space-6);
  margin-right: var(--space-6);
}

.u-my-m3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.u-p-m3 {
  padding: var(--space-6);
}

.u-pt-m3 {
  padding-top: var(--space-6);
}

.u-pb-m3 {
  padding-bottom: var(--space-6);
}

.u-pl-m3 {
  padding-left: var(--space-6);
}

.u-pr-m3 {
  padding-right: var(--space-6);
}

.u-px-m3 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.u-py-m3 {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.u-gap-l1 {
  gap: var(--space-7);
}

.u-bd-radius-l1 {
  border-radius: var(--space-7);
}

.u-m-l1 {
  margin: var(--space-7);
}

.u-mt-l1 {
  margin-top: var(--space-7);
}

.u-mb-l1 {
  margin-bottom: var(--space-7);
}

.u-ml-l1 {
  margin-left: var(--space-7);
}

.u-mr-l1 {
  margin-right: var(--space-7);
}

.u-mx-l1 {
  margin-left: var(--space-7);
  margin-right: var(--space-7);
}

.u-my-l1 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
}

.u-p-l1 {
  padding: var(--space-7);
}

.u-pt-l1 {
  padding-top: var(--space-7);
}

.u-pb-l1 {
  padding-bottom: var(--space-7);
}

.u-pl-l1 {
  padding-left: var(--space-7);
}

.u-pr-l1 {
  padding-right: var(--space-7);
}

.u-px-l1 {
  padding-left: var(--space-7);
  padding-right: var(--space-7);
}

.u-py-l1 {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.u-flex-1 {
  flex: 1;
}

.u-flex {
  display: flex;
}

.u-flex-col {
  display: flex;
  flex-direction: column;
}

.u-align-start {
  align-items: flex-start;
}

.u-align-center {
  align-items: center;
}

.u-justify-center {
  justify-content: center;
}

.u-justify-between {
  width: 100%;
  justify-content: space-between;
}

.u-absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.u-bd-line-1 {
  border-width: 1px;
}

.u-bd-line-2 {
  border-width: 2px;
}

.u-rotate-15 {
  rotate: 15deg;
}

.u-rotate-30 {
  rotate: 30deg;
}

.u-rotate-45 {
  rotate: 45deg;
}

.u-rotate-m15 {
  rotate: -15deg;
}

.u-rotate-m30 {
  rotate: -30deg;
}

.l-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-3);
  position: sticky;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  height: var(--layout-header-height);
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.8s, opacity 0.8s ease, visibility 0.8s;
}
.l-header.is-top-header:not(.is-open) {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.l-header.is-top-header:not(.is-open) .l-header__logo {
  opacity: 0;
  visibility: hidden;
}
.l-header.is-top-header:not(.is-open).is-active {
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.l-header.is-top-header:not(.is-open).is-active .l-header__logo {
  opacity: 1;
  visibility: visible;
}
.l-header.is-open {
  background-color: rgba(220, 220, 220, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.body-lock .l-header {
  position: fixed;
}
.l-header__nav {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
}
.l-header__menu {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}
.l-header__logo {
  display: block;
  width: 128px;
  height: auto;
  transition: opacity 0.8s ease, visibility 0.5s;
}
.l-header__btn-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.l-header__btn-link:hover {
  color: var(--color-main-pink);
}
.l-header__subline {
  margin-right: var(--margin-2);
  text-align: end;
}

.l-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 36px;
  height: 28px;
  cursor: pointer;
  z-index: 100;
  padding: 0;
  background: none;
  border: none;
}
.l-header__hamburger span {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 50em;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  color: var(--color-white) !important;
  background: linear-gradient(320deg, var(--color-accent-pink), var(--color-main-pink));
}
.l-header__hamburger span:nth-child(3) {
  width: 24px;
}
.l-header__hamburger.is-open span:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}
.l-header__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.l-header__hamburger.is-open span:nth-child(3) {
  width: 36px;
  transform: translateY(-12px) rotate(-45deg);
}

body.body-lock {
  padding-top: var(--layout-header-height);
}

.l-drawer__overlay {
  position: fixed;
  top: var(--layout-header-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--layout-header-height));
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 98;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s linear, visibility 0.4s linear;
  cursor: pointer;
}
body.body-lock .l-drawer__overlay {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 767px) {
  .l-drawer__overlay {
    display: none;
  }
}

.l-drawer {
  position: fixed;
  padding-top: var(--layout-header-height);
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  z-index: 99;
  transform: translateX(100%);
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.l-drawer.is-open {
  transform: translateX(0);
}
@media screen and (min-width: 769px) {
  .l-drawer.is-open {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
  }
}
@media screen and (min-width: 769px) {
  .l-drawer {
    width: 400px;
  }
}
.l-drawer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
  min-height: 100%;
  padding: var(--padding-4) var(--padding-2);
}

.p-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--padding-4) var(--padding-2);
}
.p-drawer-header__logo {
  width: 140px;
}
.p-drawer-header__logo img {
  width: 100%;
  height: auto;
}
.p-drawer-header__close {
  position: relative;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.p-drawer-header__close::before, .p-drawer-header__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 3px;
  background-color: var(--color-main-pink);
  border-radius: 2px;
}
.p-drawer-header__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.p-drawer-header__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.p-drawer-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-2);
}
.p-drawer-profile__avatar {
  width: 64px;
  height: 64px;
  background-color: #d9d9d9;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
}
.p-drawer-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-drawer-profile__name {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-1);
}
.p-drawer-profile__id-text::before {
  content: "@";
  padding-right: 2px;
}
.p-drawer-profile__icon {
  width: 16px;
  height: 16px;
}
.p-drawer-profile__btn-wrapper {
  width: 100%;
}
.p-drawer-profile__btn span {
  color: var(--color-main-pink);
}
.p-drawer-profile .p-mypage__history-link {
  color: var(--color-gray);
}
.p-drawer-profile__type {
  display: flex;
  align-items: center;
  gap: var(--gap-1);
  font-size: var(--font-size-text-small);
  letter-spacing: 0.05em;
}
.p-drawer-profile__type-item {
  display: flex;
  align-items: center;
  gap: var(--gap-1);
}
.p-drawer-profile__type-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 2px;
  height: 12px;
  margin: 0 var(--space-1);
  background-color: var(--color-main-light-gray);
}

.p-drawer-nav {
  border-top: 1px solid var(--color-border);
}
.p-drawer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.p-drawer-nav li {
  border-bottom: 1px solid var(--color-border);
}
.p-drawer-nav__link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-3) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-drawer-nav__link:hover {
  background-color: var(--color-bg-light);
}
.p-drawer-nav__link::after {
  content: "";
  position: absolute;
  right: 24px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-main-pink);
  border-right: 2px solid var(--color-main-pink);
  transform: rotate(45deg);
}

.p-drawer-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-4);
}
.p-drawer-footer__sns {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
  text-decoration: none;
  color: var(--color-text);
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-drawer-footer__sns:hover {
  opacity: 0.7;
}
.p-drawer-footer__sns-icon {
  border-radius: 50% !important;
}
.p-drawer-footer__sns-title {
  font-weight: bold;
  margin-bottom: 2px;
}
.p-drawer-footer__sns-id {
  color: var(--color-text-sub);
}
.p-drawer-footer__links a {
  color: var(--color-text);
  text-decoration: none;
}
.p-drawer-footer__links a:hover {
  text-decoration: underline;
}
.p-drawer-footer__links span {
  margin: 0 var(--margin-2);
  color: var(--color-text-sub);
}

.p-drawer-btn {
  --btn-padding: var(--space-3) var(--space-5);
}
.p-drawer-btn .c-btn__icon {
  --icon-size: 8px;
}

button {
  padding-inline: 0;
}

.c-btn, .p-drawer-btn {
  --font-size-main-button: clamp(18px, 2.34vw, 24px);
  --img-size-main-button: 10px;
  --font-size-sub-button: 18px;
  --img-size-sub-button: 8px;
  --btn-width: 100%;
  --btn-width-pc: fit-content;
  --btn-min-width: auto;
  --btn-max-width: none;
  --btn-font-size: var(--font-size-main-button);
  --btn-radius: 50em;
  --btn-padding: var(--padding-2) var(--padding-4);
  --btn-height: 48px;
  --btn-height-pc: 64px;
  width: var(--btn-width);
  min-width: var(--btn-min-width);
  max-width: var(--btn-max-width);
  height: var(--btn-height);
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-family: var(--font-family-logo);
  font-size: var(--btn-font-size);
  line-height: var(--line-height-text-main);
  font-weight: bold;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  white-space: nowrap;
}
@media screen and (min-width: 769px) {
  .c-btn, .p-drawer-btn {
    width: var(--btn-width-pc);
    height: var(--btn-height-pc);
  }
}
.c-btn--main {
  --btn-font-size: var(--font-size-main-button);
  --btn-height: 48px;
  --btn-height-pc: 64px;
  --btn-width: 100%;
  --btn-width-pc: 100%;
}
.c-btn--sub, .p-drawer-btn {
  --btn-font-size: var(--font-size-sub-button);
  --btn-width: fit-content;
  --btn-height: 40px;
  --btn-height-pc: 48px;
}
.c-btn--compact {
  --btn-font-size: var(--font-size-text-main);
  --btn-width: fit-content;
  --btn-height: fit-content;
  --btn-height-pc: fit-content;
  --btn-padding: var(--space-1) var(--space-3);
}
.c-btn--thin {
  --btn-font-size: var(--font-size-sub-button);
}
.c-btn--fit {
  --btn-min-width: 160px;
  --btn-width: fit-content;
}
.c-btn--half {
  --btn-width: 50%;
  --btn-width-pc: fit-content;
  --btn-font-size: var(--font-size-main-button);
}
.c-btn--square {
  --btn-radius: var(--space-1);
}
.c-btn--with-icon {
  justify-content: center;
  gap: var(--gap-2);
  min-width: 160px;
}
.c-btn--with-icon:has(.c-btn__icon:first-child) {
  padding: var(--padding-2) calc(var(--padding-3) + var(--space-2)) var(--padding-2) var(--padding-3);
}
.c-btn--with-icon:has(.c-btn__icon:last-child) {
  padding: var(--padding-2) var(--padding-3) var(--padding-2) calc(var(--padding-3) + var(--space-2));
}
.c-btn__icon {
  display: inline-block;
  width: var(--icon-size, 16px);
  height: var(--icon-size, 16px);
  background-color: currentColor;
  -webkit-mask-image: var(--icon-url);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--icon-url);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transform: scaleX(var(--icon-scale, 1));
}
.c-btn--transp {
  min-width: 0;
}
.c-btn--transp:has(.c-btn__icon:first-child), .c-btn--transp:has(.c-btn__icon:last-child) {
  padding: 0;
}
.c-btn--pink-outline {
  text-decoration: none !important;
  border: 2px solid var(--color-main-pink);
  color: var(--color-main-pink);
}
.c-btn--pink-outline span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-pink), var(--color-main-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--pink-outline .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-pink), var(--color-main-pink));
}
.c-btn--pink-outline.c-btn--compact {
  border: 1px solid;
}
.c-btn--pink-bg {
  color: white;
  background-color: var(--color-main-pink);
  border-color: var(--color-main-pink);
}
.c-btn--pink-bg:hover {
  background-color: var(--color-accent-pink);
  border-color: var(--color-accent-pink);
}
.c-btn--pink-outline-grad, .p-drawer-btn {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(to right, var(--color-main-pink), var(--color-accent-pink)) border-box;
}
.c-btn--pink-outline-grad span:not(.c-btn__icon), .p-drawer-btn span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-pink), var(--color-main-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--pink-outline-grad .c-btn__icon, .p-drawer-btn .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-pink), var(--color-main-pink));
}
.c-btn--red-outline {
  text-decoration: none !important;
  border: 2px solid var(--color-main-red);
  color: var(--color-main-red);
}
.c-btn--red-outline span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-red), var(--color-main-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--red-outline .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-red), var(--color-main-red));
}
.c-btn--red-outline.c-btn--compact {
  border: 1px solid;
}
.c-btn--red-bg {
  color: white;
  background-color: var(--color-main-red);
  border-color: var(--color-main-red);
}
.c-btn--red-bg:hover {
  background-color: var(--color-accent-red);
  border-color: var(--color-accent-red);
}
.c-btn--red-outline-grad {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(to right, var(--color-main-red), var(--color-accent-red)) border-box;
}
.c-btn--red-outline-grad span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-red), var(--color-main-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--red-outline-grad .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-red), var(--color-main-red));
}
.c-btn--orange-outline {
  text-decoration: none !important;
  border: 2px solid var(--color-main-orange);
  color: var(--color-main-orange);
}
.c-btn--orange-outline span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-orange), var(--color-main-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--orange-outline .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-orange), var(--color-main-orange));
}
.c-btn--orange-outline.c-btn--compact {
  border: 1px solid;
}
.c-btn--orange-bg {
  color: white;
  background-color: var(--color-main-orange);
  border-color: var(--color-main-orange);
}
.c-btn--orange-bg:hover {
  background-color: var(--color-accent-orange);
  border-color: var(--color-accent-orange);
}
.c-btn--orange-outline-grad {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(to right, var(--color-main-orange), var(--color-accent-orange)) border-box;
}
.c-btn--orange-outline-grad span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-orange), var(--color-main-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--orange-outline-grad .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-orange), var(--color-main-orange));
}
.c-btn--yellow-outline {
  text-decoration: none !important;
  border: 2px solid var(--color-main-yellow);
  color: var(--color-main-yellow);
}
.c-btn--yellow-outline span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-yellow), var(--color-main-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--yellow-outline .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-yellow), var(--color-main-yellow));
}
.c-btn--yellow-outline.c-btn--compact {
  border: 1px solid;
}
.c-btn--yellow-bg {
  color: white;
  background-color: var(--color-main-yellow);
  border-color: var(--color-main-yellow);
}
.c-btn--yellow-bg:hover {
  background-color: var(--color-accent-yellow);
  border-color: var(--color-accent-yellow);
}
.c-btn--yellow-outline-grad {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(to right, var(--color-main-yellow), var(--color-accent-yellow)) border-box;
}
.c-btn--yellow-outline-grad span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-yellow), var(--color-main-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--yellow-outline-grad .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-yellow), var(--color-main-yellow));
}
.c-btn--green-outline {
  text-decoration: none !important;
  border: 2px solid var(--color-main-green);
  color: var(--color-main-green);
}
.c-btn--green-outline span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-green), var(--color-main-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--green-outline .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-green), var(--color-main-green));
}
.c-btn--green-outline.c-btn--compact {
  border: 1px solid;
}
.c-btn--green-bg {
  color: white;
  background-color: var(--color-main-green);
  border-color: var(--color-main-green);
}
.c-btn--green-bg:hover {
  background-color: var(--color-accent-green);
  border-color: var(--color-accent-green);
}
.c-btn--green-outline-grad {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(to right, var(--color-main-green), var(--color-accent-green)) border-box;
}
.c-btn--green-outline-grad span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-green), var(--color-main-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--green-outline-grad .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-green), var(--color-main-green));
}
.c-btn--blue-outline {
  text-decoration: none !important;
  border: 2px solid var(--color-main-blue);
  color: var(--color-main-blue);
}
.c-btn--blue-outline span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-blue), var(--color-main-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--blue-outline .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-blue), var(--color-main-blue));
}
.c-btn--blue-outline.c-btn--compact {
  border: 1px solid;
}
.c-btn--blue-bg {
  color: white;
  background-color: var(--color-main-blue);
  border-color: var(--color-main-blue);
}
.c-btn--blue-bg:hover {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
}
.c-btn--blue-outline-grad {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(to right, var(--color-main-blue), var(--color-accent-blue)) border-box;
}
.c-btn--blue-outline-grad span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-blue), var(--color-main-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--blue-outline-grad .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-blue), var(--color-main-blue));
}
.c-btn--indigo-outline {
  text-decoration: none !important;
  border: 2px solid var(--color-main-indigo);
  color: var(--color-main-indigo);
}
.c-btn--indigo-outline span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-indigo), var(--color-main-indigo));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--indigo-outline .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-indigo), var(--color-main-indigo));
}
.c-btn--indigo-outline.c-btn--compact {
  border: 1px solid;
}
.c-btn--indigo-bg {
  color: white;
  background-color: var(--color-main-indigo);
  border-color: var(--color-main-indigo);
}
.c-btn--indigo-bg:hover {
  background-color: var(--color-accent-indigo);
  border-color: var(--color-accent-indigo);
}
.c-btn--indigo-outline-grad {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(to right, var(--color-main-indigo), var(--color-accent-indigo)) border-box;
}
.c-btn--indigo-outline-grad span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-indigo), var(--color-main-indigo));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--indigo-outline-grad .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-indigo), var(--color-main-indigo));
}
.c-btn--purple-outline {
  text-decoration: none !important;
  border: 2px solid var(--color-main-purple);
  color: var(--color-main-purple);
}
.c-btn--purple-outline span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-purple), var(--color-main-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--purple-outline .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-purple), var(--color-main-purple));
}
.c-btn--purple-outline.c-btn--compact {
  border: 1px solid;
}
.c-btn--purple-bg {
  color: white;
  background-color: var(--color-main-purple);
  border-color: var(--color-main-purple);
}
.c-btn--purple-bg:hover {
  background-color: var(--color-accent-purple);
  border-color: var(--color-accent-purple);
}
.c-btn--purple-outline-grad {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(to right, var(--color-main-purple), var(--color-accent-purple)) border-box;
}
.c-btn--purple-outline-grad span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-purple), var(--color-main-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--purple-outline-grad .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-purple), var(--color-main-purple));
}
.c-btn--dark-gray-outline {
  text-decoration: none !important;
  border: 2px solid var(--color-main-dark-gray);
  color: var(--color-main-dark-gray);
}
.c-btn--dark-gray-outline span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-dark-gray), var(--color-main-dark-gray));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--dark-gray-outline .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-dark-gray), var(--color-main-dark-gray));
}
.c-btn--dark-gray-outline.c-btn--compact {
  border: 1px solid;
}
.c-btn--dark-gray-bg {
  color: white;
  background-color: var(--color-main-dark-gray);
  border-color: var(--color-main-dark-gray);
}
.c-btn--dark-gray-bg:hover {
  background-color: var(--color-accent-dark-gray);
  border-color: var(--color-accent-dark-gray);
}
.c-btn--dark-gray-outline-grad {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(to right, var(--color-main-dark-gray), var(--color-accent-dark-gray)) border-box;
}
.c-btn--dark-gray-outline-grad span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-dark-gray), var(--color-main-dark-gray));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--dark-gray-outline-grad .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-dark-gray), var(--color-main-dark-gray));
}
.c-btn--light-gray-outline {
  text-decoration: none !important;
  border: 2px solid var(--color-main-light-gray);
  color: var(--color-main-light-gray);
}
.c-btn--light-gray-outline span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-light-gray), var(--color-main-light-gray));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--light-gray-outline .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-light-gray), var(--color-main-light-gray));
}
.c-btn--light-gray-outline.c-btn--compact {
  border: 1px solid;
}
.c-btn--light-gray-bg {
  color: white;
  background-color: var(--color-main-light-gray);
  border-color: var(--color-main-light-gray);
}
.c-btn--light-gray-bg:hover {
  background-color: var(--color-accent-light-gray);
  border-color: var(--color-accent-light-gray);
}
.c-btn--light-gray-outline-grad {
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, linear-gradient(to right, var(--color-main-light-gray), var(--color-accent-light-gray)) border-box;
}
.c-btn--light-gray-outline-grad span:not(.c-btn__icon) {
  background: linear-gradient(320deg, var(--color-accent-light-gray), var(--color-main-light-gray));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-btn--light-gray-outline-grad .c-btn__icon {
  background: linear-gradient(320deg, var(--color-accent-light-gray), var(--color-main-light-gray));
}
.c-btn--icon-side {
  position: relative;
  justify-content: center;
}
.c-btn--icon-side .c-btn__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.c-btn--icon-side:has(.c-btn__icon:first-child) .c-btn__icon {
  left: var(--space-3);
}
.c-btn--icon-side:has(.c-btn__icon:last-child) .c-btn__icon {
  right: var(--space-3);
}
.c-btn--icon-piece .c-btn__icon {
  --bounce-x: 0;
  --bounce-y: 5px;
  --bounce-duration: 1.5s;
  animation: util-bounce var(--bounce-duration) infinite ease-in-out;
}
.c-btn--try--white .c-btn__icon, .c-btn--arrow--white .c-btn__icon {
  filter: brightness(0) invert(1);
}
.c-btn--try-right .c-btn__icon, .c-btn--arrow-right .c-btn__icon {
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.c-btn--try-right:hover .c-btn__icon, .c-btn--arrow-right:hover .c-btn__icon {
  transform: translateY(-50%) translateX(4px);
}
.c-btn--try-left .c-btn__icon, .c-btn--arrow-left .c-btn__icon {
  transform: translateY(-50%) rotate(180deg);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.c-btn--try-left:hover .c-btn__icon, .c-btn--arrow-left:hover .c-btn__icon {
  transform: translateY(-50%) rotate(180deg) translateX(4px);
}

.l-bottom-btns {
  text-decoration: none !important;
  border-color: var(--color-main-light-gray);
  color: var(--color-main-light-gray);
}
.l-bottom-btns .c-btn--light-gray-outline span:not(.c-btn__icon) {
  color: var(--color-main-light-gray);
  background: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}
.l-bottom-btns .c-btn--light-gray-outline .c-btn__icon {
  background: var(--color-main-light-gray);
}

.btn-toggle-chevron {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-white);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: -1;
}
.btn-toggle-chevron .chevron-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: linear-gradient(90deg, var(--color-main-pink), var(--color-accent-pink));
  -webkit-mask-image: var(--icon-url);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--icon-url);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: transform 0.25s ease;
  margin-bottom: -36px;
  transform: rotate(-90deg);
}
.btn-toggle-chevron:not(.is-open) .chevron-icon {
  transform: rotate(90deg);
}

.c-share-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-3);
}
.c-share-area__message {
  font-family: var(--font-family-letter);
  font-size: var(--font-size-text-small);
  color: var(--color-text);
  line-height: 1;
  letter-spacing: 0.05em;
}

.c-share-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--gap-3);
}
.c-share-list__item {
  position: relative;
}

.c-sns-icon--circle, .c-sns-icon--mini, .c-sns-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  transition: opacity 0.2s, transform 0.2s;
  text-decoration: none;
  cursor: pointer;
}
.c-sns-icon--circle:hover, .c-sns-icon--mini:hover, .c-sns-icon:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}
.c-sns-icon--circle img, .c-sns-icon--mini img, .c-sns-icon img {
  width: 70%;
  height: auto;
}

.c-sns-icon--mini {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-2);
}
.c-sns-icon--circle {
  border-radius: 50rem;
}
.c-sns-icon--x {
  background-color: #000;
}
.c-sns-icon--line {
  background-color: #06c755;
}
.c-sns-icon--taittsuu {
  background-color: #fff;
}
.c-sns-icon--instagram {
  background: radial-gradient(circle at 30% 107%, #FFDD55 10%, #FF543E 40%, #C837AB 80%);
}
.c-sns-icon--copy {
  background-color: #b3b3b3;
}
.c-sns-icon--copy img {
  width: 55%;
}

:root {
  --color-main-pink: #ff80b7;
  --color-accent-pink: #ff9aa4;
  --color-main-red: #ff737f;
  --color-accent-red: #ff8a73;
  --color-main-orange: #ff9466;
  --color-accent-orange: #ffb873;
  --color-main-yellow: #f2d574;
  --color-accent-yellow: #f2ea85;
  --color-main-green: #6cd9a4;
  --color-accent-green: #7de6d2;
  --color-main-blue: #82d5ff;
  --color-accent-blue: #7ba5f2;
  --color-main-indigo: #677ee6;
  --color-accent-indigo: #9383e6;
  --color-main-purple: #8970cc;
  --color-accent-purple: #a571bf;
  --color-main-dark-gray: #555555;
  --color-accent-dark-gray: #6e4d80;
  --color-main-light-gray: #cccccc;
  --color-accent-light-gray: #b8cbe5;
  --color-rgb-pink: 255, 128, 183;
  --color-rgb-red: 255, 77, 79;
  --color-rgb-orange: 255, 122, 69;
  --color-rgb-yellow: 250, 219, 20;
  --color-rgb-green: 82, 196, 26;
  --color-rgb-blue: 24, 144, 255;
  --color-rgb-indigo: 47, 84, 235;
  --color-rgb-purple: 114, 46, 209;
  --color-rgb-dark-gray: 89, 89, 89;
  --color-rgb-light-gray: 217, 217, 217;
  --color-yellow: #fffce3;
  --color-text: var(--color-black);
  --color-text-sub: var(--color-main-light-gray);
  --color-black: #333;
  --color-white: #fff;
  --color-gray: #888;
  --color-bg: #fefefe;
  --color-bg-gray: #f3f4f6;
  --color-footer-bg: var(--color-text);
  --color-border: #eee;
  --color-active: #6BDFFF;
  --ISTJ: #D96C62;
  --ISFJ: #D9C14C;
  --INFJ: #59A9B3;
  --INTJ: #4C4080;
  --ISTP: #805446;
  --ISFP: #8DB35A;
  --INFP: #D96C8C;
  --INTP: #31478A;
  --ESTP: #D98D57;
  --ESFP: #D96CB5;
  --ENFP: #57ADD9;
  --ENTP: #4584BF;
  --ESTJ: #993D45;
  --ESFJ: #D96262;
  --ENFJ: #53A683;
  --ENTJ: #593145;
  --color-9ennea: #3a3a3a;
  --color-moshimaho: #3a3a3a;
  --vitality-color: #4d805c;
  --elemental-color: #6eb8d9;
  --spatiotemporal-color: #a64258;
  --genesis-color: #a6886c;
  --dominion-color: #ad423e;
  --sealing-color: #465f77;
  --psyche-color: #c9597f;
  --necromancy-color: #674b75;
  --font-family-logo: 'LINE Seed JP', sans-serif;
  --font-family-base: 'Zen Kaku Gothic New', sans-serif;
  --font-family-letter: 'Zen Maru Gothic', sans-serif;
  --font-family-en: 'Mayonice', sans-serif;
  --font-family-star: 'Potta One', system-ui;
  --font-family-mono: 'Atkinson Hyperlegible Mono', monospace;
  --std: 4px;
  --padding-base: var(--std);
  --margin-base: var(--std);
  --gap-base: var(--std);
  --radius-base: var(--std);
  --space-base: var(--std);
  --padding-1: var(--padding-base);
  --padding-2: calc(var(--padding-base) * 2);
  --padding-3: calc(var(--padding-base) * 4);
  --padding-4: calc(var(--padding-base) * 8);
  --padding-5: calc(var(--padding-base) * 16);
  --padding-6: calc(var(--padding-base) * 32);
  --padding-7: calc(var(--padding-base) * 64);
  --margin-1: var(--margin-base);
  --margin-2: calc(var(--margin-base) * 2);
  --margin-3: calc(var(--margin-base) * 4);
  --margin-4: calc(var(--margin-base) * 8);
  --margin-5: calc(var(--margin-base) * 16);
  --margin-6: calc(var(--margin-base) * 32);
  --margin-7: calc(var(--margin-base) * 64);
  --gap-1: var(--gap-base);
  --gap-2: calc(var(--gap-base) * 2);
  --gap-3: calc(var(--gap-base) * 4);
  --gap-4: calc(var(--gap-base) * 8);
  --gap-5: calc(var(--gap-base) * 16);
  --gap-6: calc(var(--gap-base) * 32);
  --gap-7: calc(var(--gap-base) * 64);
  --radius-1: var(--radius-base);
  --radius-2: calc(var(--radius-base) * 2);
  --radius-3: calc(var(--radius-base) * 4);
  --radius-4: calc(var(--radius-base) * 8);
  --radius-5: calc(var(--radius-base) * 16);
  --radius-6: calc(var(--radius-base) * 32);
  --radius-7: calc(var(--radius-base) * 64);
  --space-1: var(--space-base);
  --space-2: calc(var(--space-base) * 2);
  --space-3: calc(var(--space-base) * 4);
  --space-4: calc(var(--space-base) * 8);
  --space-5: calc(var(--space-base) * 16);
  --space-6: calc(var(--space-base) * 32);
  --space-7: calc(var(--space-base) * 64);
  --font-size-text-main: clamp(14px, 1.56vw, 16px);
  --line-height-text-main: 24px;
  --font-size-text-small: clamp(12px, 1.37vw, 14px);
  --line-height-text-small: 20px;
  --font-size-text-supplement: clamp(10px, 1.17vw, 12px);
  --font-size-big-title: 24px;
  --font-size-big-title-en: 36px;
  --font-size-main-title: clamp(20px, 3.13vw, 32px);
  --font-size-sub-title: clamp(16px, 1.95vw, 20px);
  --font-size-sub-title-en: 28px;
  --font-size-accent-title-ja: clamp(44px, 7.03vw, 72px);
  --font-size-accent-title-en: clamp(20px, 3.52vw, 36px);
  --layout-header-height: 64px;
  --layout-content-width: stretch;
  --layout-inner-width: calc(100% - var(--padding-2) * 2);
  --default-easing: cubic-bezier(0.25, 1, 0.5, 1);
  --mask-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --bounce-easing: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-cloth: cubic-bezier(0.45, 0, 0.55, 1);
}

@media screen and (min-width: 1025px) {
  :root {
    --padding-base: calc(var(--std) * 2);
    --margin-base: calc(var(--std) * 2);
    --gap-base: var(--std);
    --radius-base: calc(var(--std) * 1.2);
    --space-base: var(--std);
    --layout-content-width: 94%;
  }
}
.a-bounce {
  --bounce-x: 0;
  --bounce-y: 5px;
  --bounce-duration: 1.5s;
  animation: util-bounce var(--bounce-duration) infinite ease-in-out;
}
.a-bounce--down {
  --bounce-x: 0;
  --bounce-y: 5px;
  --bounce-duration: 1.5s;
  animation: util-bounce var(--bounce-duration) infinite ease-in-out;
}
.a-bounce--up {
  --bounce-x: 0;
  --bounce-y: -5px;
  --bounce-duration: 1.5s;
  animation: util-bounce var(--bounce-duration) infinite ease-in-out;
}
.a-bounce--right {
  --bounce-x: 5px;
  --bounce-y: 0;
  --bounce-duration: 1.5s;
  animation: util-bounce var(--bounce-duration) infinite ease-in-out;
}
.a-bounce--left {
  --bounce-x: -5px;
  --bounce-y: 0;
  --bounce-duration: 1.5s;
  animation: util-bounce var(--bounce-duration) infinite ease-in-out;
}

@keyframes util-bounce {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: var(--bounce-x) var(--bounce-y);
  }
}
.t-main-title {
  display: block;
  font-family: var(--font-family-logo);
  font-size: var(--font-size-accent-title-ja);
  font-weight: 900;
}
.t-main-title--en {
  font-family: var(--font-family-en);
  font-size: var(--font-size-big-title-en);
}
.t-title {
  font-family: var(--font-family-logo);
  font-size: var(--font-size-main-title);
  font-weight: 900;
  line-height: 1.6;
}
.t-title--en {
  font-family: var(--font-family-en);
  font-size: var(--font-size-sub-title-en);
}
.t-sub-title {
  font-family: var(--font-family-logo);
  font-size: var(--font-size-sub-title);
  font-weight: bold;
}
.t-center {
  text-align: center;
}

.t-gray {
  color: var(--color-gray);
}

.t-sub {
  color: var(--color-text-sub);
}

.t-pink {
  color: var(--color-main-pink) !important;
}
.t-pink__marker {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent-pink) 60%, transparent), color-mix(in srgb, var(--color-accent-pink) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-pink__marker.active, .t-pink__marker:hover, .t-pink__marker.is-animated {
  background-size: 100% 30%;
}

.t-gradient-pink {
  background: linear-gradient(320deg, var(--color-accent-pink), var(--color-main-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-gradient-pink__marker {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent-pink) 60%, transparent), color-mix(in srgb, var(--color-main-pink) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-gradient-pink__marker.active, .t-gradient-pink__marker:hover, .t-gradient-pink__marker.is-animated {
  background-size: 100% 30%;
}

.t-red {
  color: var(--color-main-red) !important;
}
.t-red__marker {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent-red) 60%, transparent), color-mix(in srgb, var(--color-accent-red) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-red__marker.active, .t-red__marker:hover, .t-red__marker.is-animated {
  background-size: 100% 30%;
}

.t-gradient-red {
  background: linear-gradient(320deg, var(--color-accent-red), var(--color-main-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-gradient-red__marker {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent-red) 60%, transparent), color-mix(in srgb, var(--color-main-red) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-gradient-red__marker.active, .t-gradient-red__marker:hover, .t-gradient-red__marker.is-animated {
  background-size: 100% 30%;
}

.t-orange {
  color: var(--color-main-orange) !important;
}
.t-orange__marker {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent-orange) 60%, transparent), color-mix(in srgb, var(--color-accent-orange) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-orange__marker.active, .t-orange__marker:hover, .t-orange__marker.is-animated {
  background-size: 100% 30%;
}

.t-gradient-orange {
  background: linear-gradient(320deg, var(--color-accent-orange), var(--color-main-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-gradient-orange__marker {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent-orange) 60%, transparent), color-mix(in srgb, var(--color-main-orange) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-gradient-orange__marker.active, .t-gradient-orange__marker:hover, .t-gradient-orange__marker.is-animated {
  background-size: 100% 30%;
}

.t-yellow {
  color: var(--color-main-yellow) !important;
}
.t-yellow__marker {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent-yellow) 60%, transparent), color-mix(in srgb, var(--color-accent-yellow) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-yellow__marker.active, .t-yellow__marker:hover, .t-yellow__marker.is-animated {
  background-size: 100% 30%;
}

.t-gradient-yellow {
  background: linear-gradient(320deg, var(--color-accent-yellow), var(--color-main-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-gradient-yellow__marker {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent-yellow) 60%, transparent), color-mix(in srgb, var(--color-main-yellow) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-gradient-yellow__marker.active, .t-gradient-yellow__marker:hover, .t-gradient-yellow__marker.is-animated {
  background-size: 100% 30%;
}

.t-green {
  color: var(--color-main-green) !important;
}
.t-green__marker {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent-green) 60%, transparent), color-mix(in srgb, var(--color-accent-green) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-green__marker.active, .t-green__marker:hover, .t-green__marker.is-animated {
  background-size: 100% 30%;
}

.t-gradient-green {
  background: linear-gradient(320deg, var(--color-accent-green), var(--color-main-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-gradient-green__marker {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent-green) 60%, transparent), color-mix(in srgb, var(--color-main-green) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-gradient-green__marker.active, .t-gradient-green__marker:hover, .t-gradient-green__marker.is-animated {
  background-size: 100% 30%;
}

.t-blue {
  color: var(--color-main-blue) !important;
}
.t-blue__marker {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent-blue) 60%, transparent), color-mix(in srgb, var(--color-accent-blue) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-blue__marker.active, .t-blue__marker:hover, .t-blue__marker.is-animated {
  background-size: 100% 30%;
}

.t-gradient-blue {
  background: linear-gradient(320deg, var(--color-accent-blue), var(--color-main-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-gradient-blue__marker {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent-blue) 60%, transparent), color-mix(in srgb, var(--color-main-blue) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-gradient-blue__marker.active, .t-gradient-blue__marker:hover, .t-gradient-blue__marker.is-animated {
  background-size: 100% 30%;
}

.t-indigo {
  color: var(--color-main-indigo) !important;
}
.t-indigo__marker {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent-indigo) 60%, transparent), color-mix(in srgb, var(--color-accent-indigo) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-indigo__marker.active, .t-indigo__marker:hover, .t-indigo__marker.is-animated {
  background-size: 100% 30%;
}

.t-gradient-indigo {
  background: linear-gradient(320deg, var(--color-accent-indigo), var(--color-main-indigo));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-gradient-indigo__marker {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent-indigo) 60%, transparent), color-mix(in srgb, var(--color-main-indigo) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-gradient-indigo__marker.active, .t-gradient-indigo__marker:hover, .t-gradient-indigo__marker.is-animated {
  background-size: 100% 30%;
}

.t-purple {
  color: var(--color-main-purple) !important;
}
.t-purple__marker {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent-purple) 60%, transparent), color-mix(in srgb, var(--color-accent-purple) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-purple__marker.active, .t-purple__marker:hover, .t-purple__marker.is-animated {
  background-size: 100% 30%;
}

.t-gradient-purple {
  background: linear-gradient(320deg, var(--color-accent-purple), var(--color-main-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-gradient-purple__marker {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent-purple) 60%, transparent), color-mix(in srgb, var(--color-main-purple) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-gradient-purple__marker.active, .t-gradient-purple__marker:hover, .t-gradient-purple__marker.is-animated {
  background-size: 100% 30%;
}

.t-dark-gray {
  color: var(--color-main-dark-gray) !important;
}
.t-dark-gray__marker {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent-dark-gray) 60%, transparent), color-mix(in srgb, var(--color-accent-dark-gray) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-dark-gray__marker.active, .t-dark-gray__marker:hover, .t-dark-gray__marker.is-animated {
  background-size: 100% 30%;
}

.t-gradient-dark-gray {
  background: linear-gradient(320deg, var(--color-accent-dark-gray), var(--color-main-dark-gray));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-gradient-dark-gray__marker {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent-dark-gray) 60%, transparent), color-mix(in srgb, var(--color-main-dark-gray) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-gradient-dark-gray__marker.active, .t-gradient-dark-gray__marker:hover, .t-gradient-dark-gray__marker.is-animated {
  background-size: 100% 30%;
}

.t-light-gray {
  color: var(--color-main-light-gray) !important;
}
.t-light-gray__marker {
  background-image: linear-gradient(color-mix(in srgb, var(--color-accent-light-gray) 60%, transparent), color-mix(in srgb, var(--color-accent-light-gray) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-light-gray__marker.active, .t-light-gray__marker:hover, .t-light-gray__marker.is-animated {
  background-size: 100% 30%;
}

.t-gradient-light-gray {
  background: linear-gradient(320deg, var(--color-accent-light-gray), var(--color-main-light-gray));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-gradient-light-gray__marker {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent-light-gray) 60%, transparent), color-mix(in srgb, var(--color-main-light-gray) 60%, transparent));
  background-repeat: no-repeat;
  background-position: left 85%;
  background-size: 0% 30%;
  padding-bottom: var(--padding-1);
  transition: background-size 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.t-gradient-light-gray__marker.active, .t-gradient-light-gray__marker:hover, .t-gradient-light-gray__marker.is-animated {
  background-size: 100% 30%;
}

.t-ff-logo {
  font-family: var(--font-family-logo);
}

.t-ff-en {
  font-family: var(--font-family-en);
}

.t-ff-letter {
  font-family: var(--font-family-letter);
}

.t-fs-ss {
  font-size: var(--font-size-text-supplement);
}

.t-fs-s {
  font-size: var(--font-size-text-small);
}

.t-fs-m {
  font-size: var(--font-size-text-main);
}

.t-fw-bold {
  font-weight: bold;
}

.t-fw-black {
  font-weight: 900;
}

.l-header {
  background-color: var(--color-shindan-header);
}
.l-header.is-open {
  background-color: var(--color-shindan-header);
}
.l-header__hamburger span {
  background: linear-gradient(90deg, var(--color-shindan-hamburger-a), var(--color-shindan-hamburger-b));
}

.l-drawer {
  background-color: var(--color-shindan-drawer);
}
.l-drawer * {
  color: var(--color-shindan-drawer-text, var(--text-color));
}

.p-drawer-btn {
  background: linear-gradient(var(--color-shindan-drawer-btn), var(--color-shindan-drawer-btn)) padding-box, linear-gradient(to right, var(--color-shindan-drawer-btn-border-a), var(--color-shindan-drawer-btn-border-b)) border-box;
}
.p-drawer-btn .c-btn__icon {
  background: linear-gradient(90deg, var(--color-shindan-drawer-btn-border-a), var(--color-shindan-drawer-btn-border-b));
}
.p-drawer-btn span:not(.c-btn__icon) {
  background: linear-gradient(90deg, var(--color-shindan-drawer-btn-text-a), var(--color-shindan-drawer-btn-text-b));
  -webkit-background-clip: text;
  background-clip: text;
}
.p-drawer-profile .p-mypage__history-link span {
  color: var(--color-shindan-drawer-text, var(--text-color));
}
.p-drawer-nav {
  border-color: var(--color-shindan-list-border);
}
.p-drawer-nav li {
  border-color: var(--color-shindan-list-border);
}
.p-drawer-nav__link {
  color: var(--color-shindan-drawer-text, var(--text-color));
}
.p-drawer-nav__link::after {
  border-color: var(--color-shindan-drawer-nav);
}
.p-drawer-footer__links a {
  color: var(--color-shindan-drawer-text, var(--text-color));
}