/**
 * Skin special
 * 2025/06/09
 * @see /special/index.html
*/
/* Normalize */
*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  scroll-margin-block-start: 15em;
}

body {
  font-size: 16px;
  color: var(--color--on-background);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  :where(body) {
    scroll-behavior: smooth;
  }
}

img {
  -o-object-fit: contain;
  object-fit: contain;
}

th,
td {
  text-align: start;
  font-weight: inherit;
}

a,
button:not([disabled]) {
  cursor: pointer;
}

a {
  color: currentColor;
}

a:focus-visible {
  opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    opacity: 0.6;
  }
}

/* Theme */
:root {
  --font--x-large: 4em;
  --font--large: clamp(1.5em, 5vw, 3em);
  --font--3x-medium: clamp(1.25em, 0.75em + 1.667vw, 1.75em);
  --font--2x-medium: clamp(1.25em, 1em + 0.833vw, 1.5em);
  --font--x-medium: clamp(1.125em, 1em + 0.417vw, 1.25em);
  --font--medium: 1.125em;
  --font--regular: 1em;
  --font--small: 0.875em;
  --font--x-small: 0.75em;
  --font-weight--regular: 400;
  --font-weight--bold: 700;
  --line-height--none: 1;
  --line-height--tight: 1.2;
  --line-height--normal: 1.4;
  --line-height--relaxed: 1.8;
  --rounded-small: 4px;
  --rounded-medium: 8px;
  --rounded-full: calc(infinity * 1px);
  --color--on-background: #333333;
  --color--background: #ffffff;
  --color--surface: #f5f5f5;
  --color--surface-variant: rgba(152, 149, 149, 0.7019607843);
  --color--on-surface-variant: #ffffff;
  --color--outline: #656464;
  --color--overlay: rgba(255, 255, 255, 0.4196078431);
  --color--accent01: #252C59;
  --color--mark: #f08050;
  --color--red: #d90e0e;
  --color--dust-mint-green: #d1dddd;
  --color--linen-greige: #ebe8dc;
  --color--gray-scale-0: #000000;
  --color--gray-scale-10: #1a1a1a;
  --color--gray-scale-20: #333333;
  --color--gray-scale-27: #444444;
  --color--gray-scale-40: #6e6e6e;
  --color--gray-scale-43: #666666;
  --color--gray-scale-44: #707070;
  --color--gray-scale-50: #808080;
  --color--gray-scale-53: #888888;
  --color--gray-scale-60: #999999;
  --color--gray-scale-67: #aaaaaa;
  --color--gray-scale-75: #bebebe;
  --color--gray-scale-77: #c4c4c4;
  --color--gray-scale-80: #cccccc;
  --color--gray-scale-84: #d7d7d7;
  --color--gray-scale-87: #dddddd;
  --color--gray-scale-89: #e4e4e4;
  --color--gray-scale-90: #e6e6e6;
  --color--gray-scale-92: #ebebeb;
  --color--gray-scale-93: #eeeeee;
  --color--gray-scale-94: #efefef;
  --color--gray-scale-98: #f9f9f9;
  --color--gray-scale-100: #ffffff;
  --duration-rapidly: 100ms;
  --duration-default: 200ms;
  --duration-relaxed: 500ms;
  --linear: linear;
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Layout */
.l-container {
  position: relative;
}

.l-container__item--main,
.l-container__item--before-main,
.l-container__item--after-main,
.l-container__item--side,
.l-inner__contents {
  inline-size: 100%;
}

.l-container__item--main {
  margin-inline: auto;
  order: 2;
  padding-inline: min(6.25vw, 1em);
}

.l-container__item--main:not(:last-child) {
  margin-block-end: clamp(4em, 2.8em + 4dvi, 6em);
}

.l-container__item--after-main {
  order: 4;
}

.l-container__item--full {
  inline-size: 100%;
}

.l-scroll-container {
  overflow-x: auto;
  max-inline-size: 100%;
}

.l-scroll-container__content {
  inline-size: -moz-max-content;
  inline-size: max-content;
}

@media not all and (min-width: 959.98px) {
  .l-container__item--side {
    margin-block: clamp(4em, 2.8em + 4dvi, 6em) 3em;
  }
}

@media screen and (min-width: 960px) {
  .l-container__item--main {
    flex-basis: calc(78.438% - 6px);
    flex-grow: 1;
    padding-inline: min(3.125vw, 1.5em);
  }

  .is-2col .l-container__item--main {
    max-inline-size: min(78.438% - 6px, 82em);
  }

  .l-container__item--before-main,
  .l-container__item--after-main {
    grid-column: span 2;
  }

  .l-inner__contents {
    grid-column: span 2;
  }

  .l-container__item--side {
    flex-basis: 21.562%;
    max-inline-size: 276px;
  }

  .l-inner .l-inner__contents {
    margin-inline-start: 0;
  }
}

@media screen and (min-width: 1580px) {
  .l-inner .l-inner__contents {
    margin-inline-start: auto;
  }
}

.l-contents {
  margin-inline: auto;
  max-inline-size: 82em;
}

.l-content--small {
  max-inline-size: 60em;
  margin-inline: auto;
}

.l-content--medium {
  max-inline-size: max(1000px, 55rem);
  margin-inline: auto;
}

@media screen and (min-width: 960px) {

  .l-content,
  .l-content--small {
    padding-inline: min(3.125vw, 1.5em);
  }
}

.l-aside {
  background-color: var(--color--gray-scale-80);
}

@media not all and (min-width: 959.98px) {
  .l-aside {
    order: 4;
  }
}

@media screen and (min-width: 960px) {
  .l-aside {
    order: 3;
    position: relative;
    z-index: 1;
  }

  .l-aside__inner {
    position: sticky;
    inset: 112px 0 auto auto;
  }
}

/* List */
.c-list--line > * {
  border-block-end: 1px solid currentColor;
}

/* Text media */
.c-text-media {
  display: flex;
  row-gap: 2em;
  column-gap: min(calc(32 / 1000 * 100%), 2em);
}

.c-text-media__content {
  flex-grow: 1;
}

.c-text-media__content > * + * {
  margin-block-start: 1em;
}

.c-text-media__media {
  display: block;
  flex-grow: 1;
  flex-basis: min(41.9048%, 22em);
  /* calc(352 / 840 * 100%) */
  flex-shrink: 0;
}

.c-text-media__media img {
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

/* Button */
.c-button {
  background-color: var(--color--accent01);
  border-radius: var(--rounded-medium);
  color: var(--color--background);
  display: inline-flex;
  font-weight: var(--font-weight--bold);
  min-inline-size: calc(180 / 14 * 1em);
  padding-block: calc(10 / 14 * 1em);
  padding-inline: min(calc(16 / 14 * 1em), 16px);
}

/* Tag */
.c-tag {
  background-color: var(--color--gray-scale-44);
  color: var(--color--gray-scale-100);
  display: inline-block;
  font-size: var(--font--x-small);
  padding-block: max(4px, 0.25rem);
  padding-inline: max(4px, 0.25rem);
  font-weight: var(--font-weight--bold);
}

.c-tag + .c-tag {
  margin-inline-start: max(8px, .5rem);
}

/* Heading */
.c-heading--medium {
  font-size: var(--font--medium);
  line-height: var(--line-height--tight);
}

/* Paragraph */
.c-paragraph,
.c-paragraph--small,
.c-paragraph--large {
  line-height: var(--line-height--normal);
}

.c-paragraph {
  font-size: var(--font--regular);
}

.c-paragraph--small {
  font-size: var(--font--small);
}

.c-paragraph--large {
  font-size: clamp(1em, 0.75em + 0.833vw, 1.25em);
}

/* Title */
.c-page-title {
  color: var(--color--on-surface-variant);
  font-size: var(--font--large);
  line-height: var(--line-height--tight);
  font-weight: var(--font-weight--bold);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  text-align: center;
}

.c-page-title__subtext {
  font-size: min(0.5em, 24px);
}

/* First view */
.c-first-view {
  position: relative;
  display: grid;
  place-items: center;
  z-index: 0;
  margin-block-start: 96px;
}

.c-first-view::after {
  background-color: var(--color--surface-variant);
  content: "";
  block-size: 100%;
  inline-size: 100%;
  inset: 0 auto auto 0;
  position: absolute;
}

.c-first-view__content,
.c-first-view__image {
  grid-area: 1/1/2/2;
}

.c-first-view__content {
  z-index: 2;
}

.c-first-view__image {
  block-size: min(37.5vw, 28em);
  -o-object-fit: cover;
  object-fit: cover;
  inline-size: 100%;
  -o-object-position: top center;
  object-position: top center;
}

/* Intro */

.c-intro {
  margin-block: 5em;
  font-size: var(--font--regular);
  line-height: var(--line-height--relaxed);
  font-weight: var(--font-weight--regular);
  order: 1;
}

.c-intro > .c-intro__lead,
.c-intro > .c-intro__text,
.c-intro > .c-intro__heading {
  margin-inline: auto;
}

.c-intro > .c-intro__text {
  max-inline-size: 41.875em;
}

.c-intro__heading {
  font-size: var(--font--x-medium);
  line-height: var(--line-height--normal);
  font-weight: var(--font-weight--bold);
}

.c-intro__title {
  font-size: var(--font--2x-medium);
  line-height: var(--line-height--relaxed);
  font-weight: var(--font-weight--bold);
}

.c-intro__lead {
  max-inline-size: 42em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.c-intro__heading + .c-intro__lead {
  margin-block-start: 0.5em;
}

.c-intro__inner {
  display: grid;
  grid-template-columns: 37.03125% 1fr 37.03125%;
  position: relative;
  z-index: 0;
}

.c-intro__box,
.c-intro__background {
  grid-column: 1/4;
}

.c-intro__box {
  grid-column-end: 5;
  padding: 1.5em min(5vw, 1.5em);
  background-color: rgba(255, 255, 255, 0.9);
  place-self: start;
  max-inline-size: 43em;
}

.c-intro__background {
  -o-object-fit: cover;
  object-fit: cover;
  position: relative;
  inline-size: 100%;
  min-block-size: min(25.8854166667vw, 497px);
  block-size: 100%;
  z-index: -1;
}

.c-intro__action {
  margin-block-start: 4em;
  -moz-column-gap: min(6.25vw, 2em);
  column-gap: min(6.25vw, 2em);
  justify-content: center;
}

.c-intro__button {
  max-inline-size: 23.75em;
  text-align: center;
  flex-direction: column;
}

.c-intro__button::after {
  content: "";
  background-color: currentColor;
  block-size: 1em;
  inline-size: 1em;
  display: inline-block;
  flex-shrink: 0;
  -webkit-mask-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M8.003%2012.732a.722.722%200%200%201-.55-.213L.215%205.245a.732.732%200%200%201%200-1.031.723.723%200%200%201%201.026%200l6.762%206.795%206.76-6.795a.723.723%200%200%201%201.027%200%20.732.732%200%200%201%200%201.031l-7.238%207.274a.722.722%200%200%201-.55.213Z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E);
  mask-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M8.003%2012.732a.722.722%200%200%201-.55-.213L.215%205.245a.732.732%200%200%201%200-1.031.723.723%200%200%201%201.026%200l6.762%206.795%206.76-6.795a.723.723%200%200%201%201.027%200%20.732.732%200%200%201%200%201.031l-7.238%207.274a.722.722%200%200%201-.55.213Z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.c-intro__button::after {
  margin-inline: auto;
}

.c-intro__button-subtext {
  font-size: var(--font--3x-medium);
  line-height: var(--line-height--tight);
  font-weight: var(--font-weight--bold);
}

/* Special page */
.p-special-text-media {
  padding-block: 2em;
}

/* Background */
.u-background--red {
  background-color: hsla(0, 100%, 61%, 1);
}

.u-background--gray098 {
  background-color: var(--color--gray-scale-98);
}

/** Spacing */
.u-px--10 {
  padding-inline: .625em;
}
.u-py--32 {
  padding-block: max(32px, 3.2rem);
}

.u-mt--regular {
  margin-block-start: 1em;
}

.u-ml--em-100 {
  margin-inline-start: 1em;
}

.u-ml--auto {
  margin-inline-start: auto;
}

.u-mr--none {
  margin-inline-end: 0;
}

.u-mb--none {
  margin-block-end: 0;
}

/* Sizing */
.u-width--em-100 {
  inline-size: 1em;
}

/** Typography */
.u-font-weight--regular {
  font-weight: 400;
}

.u-font-weight--bold {
  font-weight: 700;
}

.u-text--start {
  text-align: start;
}

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

.u-text--end {
  text-align: end;
}

@media not all and (min-width: 736.98px) {
  .c-intro__inner .c-intro__box {
    margin-inline: min(4vw, 1em);
    margin-block-start: min(-21%, 84px);
  }

  .c-intro__background {
    order: -1;
  }

  .c-text-media {
    align-items: center;
    flex-wrap: wrap;
  }

  .c-text-media__media {
    flex-grow: 1;
  }

  .p-special-intro {
    margin-block: min(calc(42 / 400 * 100dvi), 5em);
  }
}

@media (min-width: 737px) {
  .c-intro__inner {
    grid-auto-rows: 1fr;
  }

  .c-intro__inner .c-intro__box {
    grid-area: 1/1/4/3;
    margin-block-start: 2em;
  }

  .c-intro__background {
    grid-area: 1/2/5/4;
  }

  /* Special page */
  .p-special-text-media {
    padding-block: 1.25em;
    padding-inline: 1.25em;
  }

  .u-text--start-md {
    text-align: start;
  }
}

@media screen and (min-width: 1280px) {
  .c-first-view {
    margin-block-start: 109px;
  }
}