:root {
  /**
   * breakpoints:
   *
   * - mobile:         width < 768
   * - desktop: 768 <= width
   */

  --js-breakpoints: mobile, desktop 768;

  --viewport-width: 393;

  @media screen and (768px <= width), print {
    --viewport-width: 1200;
  }

  --color-theme-green: #00735d;
  --color-theme-green-light: #3f9a8d;
  --color-theme-orange: #ff5821;
  --color-theme-yellow: #fff000;
  --color-theme-gray: #666;
  --color-theme-light-gray: #f4f4f4;

  --color-white: #fff;
  --color-black: #000;

  --color-text: #000;
  --color-background: #fff;
  --color-link: var(--color-theme-green);

  --font-weight: 300;
  --font-weight-bold: 600;
  --font-weight-bold--tick: 700;
  --font-family-sans-jp: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Noto Sans', 'Noto Sans JP', 'Meiryo';
  --font-family-sans--helvetica: 'Helvetica', 'Arial';
  --font-family-sans--tick: Helvetica, Arial, sans-serif;
  --font-family: var(--font-family-sans-jp), sans-serif;

  --inner-padding-inline: 16px;
  --inner-padding-inline--neg: calc(var(--inner-padding-inline) * -1);

  --ui-hover-transition-duration: 0.2s;
  --ui-hover-opacity: 0.7;
  --ui-open-transition-duration: 0.5s;
  --ui-safe-area-bottom: calc(4rem - 8px + env(safe-area-inset-bottom, 0px));

  --swiper-theme-color: var(--color-theme-green) !important;

  @media screen and (768px <= width), print {
    --ui-safe-area-bottom: 0px;
  }
}

/* base */

* {
  margin: 0;
  padding: 0;
}

:where(a) {
  color: var(--color-link);
}

:where(a):hover {
  text-decoration-thickness: 2px;
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(h1, h2, h3, h4, h5, h6, th, em, strong, dt, th) {
  font-weight: var(--font-weight-bold);
}

:where(h1, h2, h3, h4, h5, h6) {
  line-height: inherit;
}

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

:where(ol, ul):where([role='list']) {
  list-style: none;
  padding-left: 0;
}

:where(nav li)::before {
  content: revert;
  float: revert;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-gutter: auto;
}

body {
  position: relative;
  color: var(--color-text);
  background: var(--color-background);
  font: var(--font-weight) 100%/1.5 var(--font-family);
}

/* utility */

.offscreen {
  all: unset;
  position: absolute;
  inset: 0 auto auto 0;
  z-index: -1;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(0 100% 100% 0);
}

.only-mobile {
  @media screen and (768px <= width) {
    display: none;
  }
}

.only-desktop {
  @media screen and (width < 768px), print {
    display: none;
  }
}

/* atomic */

.icon {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.icon--90 {
  rotate: 90deg;
}

.icon--180 {
  rotate: 180deg;
}

.icon--270 {
  rotate: 270deg;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.image--cover {
  object-fit: cover;
}

.image--circle {
  aspect-ratio: 1;
  border-radius: 50%;
}

.image--profile {
  border: 4px solid #f4f4f4;
}

.link--block {
  display: block;
  transition: opacity var(--ui-hover-transition-duration);
}

.link--block:hover {
  opacity: var(--ui-hover-opacity);
}

.text--halt {
  font-feature-settings: 'halt';
}

.text--marker {
  text-decoration: underline;
  text-decoration-color: var(--color-theme-yellow);
  text-decoration-skip-ink: none;
  text-decoration-thickness: 0.25em;
  text-underline-offset: -0.25em;
  text-underline-position: under;
}

.text--uppercase {
  text-transform: uppercase;
}

.text--with-side-line {
  display: grid;
  grid-template: auto / minmax(8px, 1fr) auto minmax(8px, 1fr);
  align-items: center;
  gap: 0 0.5em;
  text-align: center;
}

.text--with-side-line::before,
.text--with-side-line::after {
  content: '';
  border-top: 1px solid;
}

/* component */

.application .button {
  min-height: 4.375rem;
  border-radius: 2.1875rem;
  background: var(--color-theme-orange);
}

.banner__link {
  overflow: hidden;
}

.banner__caption {
  --banner-caption-font-size: 0.875rem;
  --banner-caption-line-height: 1.3;
  --banner-caption-icon-size: 1rem;

  display: grid;
  grid-template: auto / 1fr auto;
  margin-top: 0.5rem;
  font-size: var(--banner-caption-font-size);
  line-height: var(--banner-caption-line-height);
}

.banner__caption .icon {
  display: inline-block;
  width: var(--banner-caption-icon-size);
  margin-top: calc((var(--banner-caption-font-size) * var(--banner-caption-line-height) - var(--banner-caption-icon-size)) / 2);
  vertical-align: top;
}

.body-text :where(h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

.body-text :where(p, ul, ol, dl, dt, table, div) {
  margin-top: 1em;
}

.body-text :where(li, dd) {
  margin-top: 0.5em;
}

.body-text > :where(:first-child) {
  margin-top: 0;
}

.button {
  --button-icon-size: 20px;

  display: grid;
  grid-template: auto / auto;
  justify-content: center;
  align-items: center;
  gap: 1rem 16px;
  position: relative;
  z-index: 1;
  min-height: 3.75rem;
  margin: 0;
  padding: 0.5rem 16px;
  border: 0;
  border-radius: 5px;
  box-sizing: border-box;
  color: #fff;
  background: var(--color-theme-green);
  font-weight: var(--font-weight-bold);
  font-size: 1.125rem;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  transition: opacity var(--ui-hover-transition-duration);
  appearance: none;

  &:where(button) {
    width: 100%;
  }
}

.button:hover {
  opacity: var(--button-opacity-hover, var(--ui-hover-opacity));
}

.button--bordered {
  border: 1px solid;
  color: var(--color-theme-green);
  background: var(--color-white);
}

.button--rounded {
  border-radius: 99rem;
}

.button--icon {
  grid-template: auto / var(--button-icon-size) auto var(--button-icon-size);
}

.button--icon:where(:has(> :not(.button__icon):first-child))::before,
.button--icon:where(:has(> :not(.button__icon):last-child))::after {
  content: '';
  width: var(--button-icon-size);
}

.button__icon {
  width: var(--button-icon-size);
}

.calling-for-episodes {
  padding: 1rem 0;
  background: var(--color-theme-yellow);
}

.calling-for-episodes__heading {
  font-size: 1rem;
  text-align: center;
}

.calling-for-episodes__button {
  margin-top: 0.5rem;
}

.calling-for-episodes__period {
  margin-top: 1rem;
  font-size: 0.875rem;
  text-align: center;
}

.calling-for-episodes__end {
  padding: calc(1.25rem - 2px) 6px;
  border: 2px solid;
  border-radius: 10px;
  color: var(--color-theme-green);
  background: var(--color-white);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.cast__header {
  margin-bottom: 1rem;
}

.cast__heading {
  color: var(--color-theme-green);
  font-size: 1rem;
}

.cast__list {
  display: grid;
  grid-template: auto / 1fr 1fr;
  gap: 2rem 32px;
  max-width: 324px;
  margin-inline: auto;
}

.cast__list__item {
  display: grid;
  grid-template: auto / auto;
  justify-content: stretch;
  gap: 1rem;
  flex: 0 0 auto;
  text-align: center;
}

.cast__name {
  font-size: 0.875rem;
}

.cast__poster {
  margin-top: var(--content-section-gap-rem);
}

.cast__poster .image {
  aspect-ratio: 16 / 9;
}

.cast__description {
  width: fit-content;
  margin-inline: auto;
}

.countdown {
  padding: 1rem 0;
  background: var(--color-theme-yellow);
}

.countdown__layout {
  display: grid;
  grid-template: auto / auto;
  gap: 0.5rem;
}

.countdown__description {
  margin: 0 auto;
  font-weight: var(--font-weight-bold);
  font-size: 0.75rem;
  line-height: 1rem;
}

@keyframes tick-blink {
  0%, 50% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}

.countdown__counter  {
  /* original: https://pqina.nl/flip/preset-event-countdown.html */

  .tick {
    container: tick / inline-size;
    font-weight: var(--font-weight-bold--tick);
    font-family: var(--font-family-sans--tick);
    font-size: 1rem;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: no-preference) {
    .tick.is-end {
      .tick-flip-panel-front-text,
      .tick-flip-panel-back-text {
        animation: 1s steps(1, end) infinite alternate tick-blink;
      }
    }
  }

  .tick-container {
    display: flex;
    justify-content: center;
    gap: 0;
    width: 100%;
    font-size: calc(1600cqw / 452);
  }

  .tick-flip,.tick-text-inline {
    font-size: 2.5em;
  }

  .tick-label {
    font-size: 1em;
  }

  .tick-char {
    width: 1.5em;
  }

  .tick-text-inline {
    display: inline-block;
    text-align: center;
    min-width: 1em;
  }

  .tick-group {
    display: grid;
    grid-template:
      '.         label' auto
      'separator value' 1fr / auto;
    ;
    margin: 0;
    text-align: center;
  }

  .tick-group:not(:first-child)::before {
    content: ':';
    grid-area: separator;
    font-family: 'JetBrains mono';
    font-size: 2.5em;
    line-height: 1.45;
  }

  .tick-group .tick-label {
    grid-area: label;
  }

  .tick-group .tick-value {
    grid-area: value;
  }

  .tick-text-inline {
    color: #595d63 !important;
  }

  .tick-label {
    color: #595d63 !important;
  }

  .tick-flip-panel {
    color: #fff !important;
  }

  [data-key='value'] {
    display: flex;
  }

  .tick-flip {
    margin: 0;
  }

  .tick-flip:not(:first-child) {
    margin-left: 0.125em;
  }

  .tick-flip-panel-text-wrapper {
    line-height: 1.45 !important;
  }

  .tick-flip-panel {
    background-color: #3c3e3c !important;
  }

  .tick-flip {
    border-radius:0.12em !important;
  }

  .tick-credits {
    display: none;
  }
}

.gallery,
.gallery-thumbnails {
  .swiper-button-prev,
  .swiper-button-next {
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;

    &::after {
      content: '';
    }

    .icon {
      display: block;
      position: relative;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 0 1px 0 0;
      overflow: hidden;
      translate: -12.5% 12.5%;

      &::before,
      &::after {
        content: '';
        display: block;
        inset: 0 0 auto auto;
        position: absolute;
        width: 1.25rem;
        height: 0.25rem;
        border-radius: 1px;
        background: currentColor;
      }

      &::after {
        width: 0.25rem;
        height: 1.25rem;
      }
    }
  }

  .swiper-button-prev {
    rotate: -135deg;
  }

  .swiper-button-next {
    rotate: 45deg;
  }
}

.gallery {
  --swiper-pagination-bottom: calc(2.5rem + 32px);
  --swiper-pagination-color: #fff !important;
  --swiper-pagination-bullet-inactive-color: #fff !important;
  --swiper-navigation-sides-offset: 0;

  height: 100%;
  margin-inline: calc(var(--micromodal-padding-inline, 0px) * -1);
  padding-inline: 3rem;
  padding-bottom: 2rem;
  overflow: hidden;

  .swiper {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .swiper-slide {
    height: 100%;
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: inherit;
  }
}

.gallery__item__container {
  display: flex;
  flex-flow: column;
  justify-content: center;
  height: 100%;
}

.gallery__image {
  max-height: calc(100% - var(--gallery-caption-height, 0px));
}

.gallery__image .image {
  height: 100%;
}

.gallery__caption {
  display: flex;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.gallery__caption__title {
  text-align: center;
}

.gallery__caption ul {
  list-style-type: disc;
  padding-left: 1.5em;
  line-height: 1.2;
}

.gallery-thumbnails {
  --swiper-navigation-sides-offset: -1.25rem;

  position: relative;

  .swiper-slide {
    width: 240px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: var(--color-white);
    background: var(--color-theme-green);
  }
}

.gallery-thumbnails__item .image {
  aspect-ratio: 16 / 9;
}

.gallery-thumbnails__button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  transition: var(--ui-hover-transition-duration);
}

.gallery-thumbnails__button:hover {
  opacity: var(--ui-hover-opacity);
}

.inner {
  padding: 0 var(--inner-padding-inline);
  max-width: 1200px;
  margin-inline: auto;
}

.list {
  --list-font-size-ratio: 1;
}

.list--asterisk {
  list-style-type: '※ ';
}

.list--notes {
  --list-font-size-ratio: 0.875;

  font-size: calc(100% * var(--list-font-size-ratio, 1));
}

@counter-style circled-decimal {
  system: fixed;
  symbols: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳;
  suffix: ' ';
  range: 1 20;
}

.list--circled-decimal {
  list-style-type: circled-decimal;
}

.modal {
  --modal-gap: 30;
  --modal-padding-block: 2.5rem;
  --modal-padding-inline: 24px;
  --modal-padding: var(--modal-padding-block) var(--modal-padding-inline);

  display: inline-grid;
  grid-template: 1fr / auto;
  max-width: 800px;
  max-height: calc(100svh - var(--modal-wrapper-padding, 0px) * 2);
  margin-bottom: var(--modal-wrapper-padding);
  padding: 0;
  background: none;
}

.modal:not(.remodal-is-initialized) {
  visibility: hidden;
}

.modal__container {
  display: grid;
  grid-template: auto 1fr / auto;
  min-height: 0;
  height: 100%;
  padding: var(--modal-padding);
  border-radius: 10px;
  background: var(--color-white);
}

.modal__body {
  overflow: auto;
  overscroll-behavior: contain;
  text-align: left;
}

.modal__heading {
  color: var(--color-theme-green);
  font-size: 1.125rem;
  text-align: center;
}

.modal__content {
  margin-top: calc(var(--modal-gap) * 1rem / 16);
}

.modal__footer {
  margin-top: calc(var(--modal-gap) * 1rem / 16);
}

.modal__footer__button .button {
  display: block;
  width: 100%;
  max-width: 160px;
  min-height: 3.125rem;
  margin-inline: auto;
  border: 1px solid var(--color-theme-gray);
  border-radius: 1.5625rem;
  background: var(--color-theme-green-light);
  font-size: 1rem;
}

.movies {
  overflow: hidden;
  color: var(--color-white);
  background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.55), rgb(0 0 0 / 1)), var(--color-black) url(../images/movies_bg.webp) 50% / calc(733 * 100% / 393) auto no-repeat;
}

.movies__content {
  padding: 1rem 0;
  backdrop-filter: blur(2px);
}

.movies__thumbnails {
  padding: 1.25rem 0;
  background: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 1));

  .swiper-slide {
    width: 100px;
  }

  .swiper.is-locked {
    .swiper-wrapper {
      justify-content: center;
    }
  }
}

.movie {
  --movie-body-max-height: 100dvh;
  --movie-body-padding-top: 0rem;
  --movie-caption-height: 2rem;
}

.movie__body {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.movie__ribbon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0 auto auto 1.5em;
  width: 20rem;
  height: 2rem;
  color: var(--color-white);
  background: #f00;
  translate: -50% 0;
  rotate: -30deg;
}

.movie__video {
  container: movie-video / inline-size;
  margin: 0 auto;
}

.movie__video .video {
  width: auto;
  height: auto;
  margin: 0 auto;
  max-height: 400px;
  border-radius: calc(10 * 100cqw / 640);
  overflow: hidden;
  transition: 0.5s;
  transition-property: aspect-ratio, width, height;
}

.movie__caption {
  font-size: 0.75rem;
  line-height: 1rem;
}

.movie__title {
  margin-top: 0.75rem;
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  text-align: center;
}

.movie__description {
  margin-top: 0.75rem;
  font-size: 0.75rem;
}

.movie__description.is-disabled {
  display: none;
}

.thumbnail__button {
  display: block;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  transition: var(--ui-hover-transition-duration);
}

.thumbnail__button:hover {
  opacity: var(--ui-hover-opacity);
}

.thumbnail__image .image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 5px;
}

.thumbnail__caption {
  margin-top: 0.25rem;
  font-weight: var(--font-weight-bold);
  font-size: 0.75rem;
  text-align: center;
}

.profile__header {
  margin-bottom: 1rem;
}

.profile__heading {
  color: var(--color-theme-green);
  font-size: 1rem;
}

.profile__grid {
  display: grid;
  grid-template: auto / auto;
  justify-content: center;
  align-items: center;
  gap: 1rem 32px;
  width: fit-content;
  margin-inline: auto;
}

.profile__image {
  max-width: 115px;
  margin-inline: auto;
}

.profile__image__caption {
  margin-top: 1rem;
}

.profile__text {
  max-width: calc(var(--text-max-line-length) * 1em);
  font-size: 0.75rem;
}

.profile__name {
  font-size: 0.875rem;
  text-align: center;
}

.requirements__header {
  display: grid;
  min-height: 3.5rem;
  margin-bottom: 2rem;
  padding: 0.5rem 16px;
  color: var(--color-theme-green);
  background: #eaffcb;
}

.requirements__heading {
  margin: auto;
  font-size: 1.25rem;
  text-align: center;
}

.requirements__content:not(:last-child) {
  margin-bottom: 2rem;
}

.requirements__description {
  color: var(--color-theme-gray);
  font-size: 0.875rem;
  line-height: 1.8;
}

.requirements__description :where(p, ul, ol) {
  margin-top: 0.5em;
}

.requirements__description :where(ul, ol) {
  padding-left: calc((1em + 0.5ch) / var(--list-font-size-ratio, 1));
}

.requirements__sample {
  margin-top: 2rem;
}

.requirements__sample__list {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  gap: 1.25rem 30px;
  padding-inline: 16px;
}

.requirements__sample__item {
  flex: 1 1 auto;
  max-width: 330px;
}

.requirements__sample .button {
  min-height: 3.125rem;
  color: var(--color-theme-green);
  background: #ebf4f3;
  font-size: 1rem;
  text-decoration: underline;
}

.requirements__rules {
  --border: 1px solid #dfdfdf;

  margin-top: 2rem;
}

.requirements__rule {
  margin-top: -1px;
  border-block: var(--border);
  color: var(--color-theme-gray);
}

.requirements__rule__heading .button {
  --button-icon-size: 1rem;
  --button-padding-inline: 8px;

  width: 100%;
  min-height: 54px;
  padding-inline: calc(var(--button-icon-size) + var(--button-padding-inline) * 2);
  border-radius: 0;
  color: inherit;
  background: #fff;
  text-decoration: none;
}

.requirements__rule__heading .button::before,
.requirements__rule__heading .button::after {
  content: '';
  position: absolute;
  inset: 0 var(--button-padding-inline) 0 auto;
  margin: auto 0;
  width: calc(var(--button-icon-size));
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.requirements__rule__heading .button::after {
  rotate: -90deg;
}

.requirements__rule.is-open .requirements__rule__heading .button::after {
  opacity: 0;
  rotate: 0deg;
}

.requirements__rule__content {
  padding-bottom: 1rem;
  font-size: 0.75rem;
  line-height: 1.8;
}

.requirements__rule__content h5 {
  margin: 1rem 0;
  padding: 0.75rem 20px;
  background: var(--color-theme-light-gray);
  font-size: 1rem;
  line-height: 1.5;
}

.requirements__rule__content h6 {
  margin-top: 1rem;
  font-size: 0.875rem;
}

.requirements__rule__content :is(p, ul, ol) {
  margin-top: 1em;
}

.requirements__rule__content :is(ul, ol) {
  padding-left: 2em;
}

.requirements__rule__content .body-text > :first-child {
  margin-top: 0;
}

.safe-area-bottom {
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: var(--ui-safe-area-bottom);
  margin: auto;
  visibility: hidden;
}

.sns-nav__list {
  display: flex;
  justify-content: center;
  gap: 2.5rem 40px;
}

.sns-nav__item {
  flex: 0 0 auto;
  width: 3.5rem;
}

.support__text {
  margin-top: 1rem;
  font-size: 0.625rem;
  text-align: center;
}

.support__text__copyright {
  margin-top: 0.25rem;
  font-size: 0.625rem;
  font-family: var(--font-family-sans--helvetica), sans-serif;
}

.support .banners__list {
  display: grid;
  grid-template: auto / auto;
  justify-content: center;
  gap: 1rem 24px;
  max-width: 400px;
  margin-inline: auto;
}

.support .banner__link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}

.template-files__heading {
  margin-bottom: 1.875rem;
  color: var(--color-theme-gray);
  font-weight: inherit;
  font-size: clamp(15px, 16 * 100vw / var(--viewport-width), 16px);
}

.template-files__list {
  display: grid;
  grid-template: auto / repeat(auto-fit, minmax(240px, 1fr));
  justify-content: center;
  gap: 1.25rem 10px;
  padding-inline: min(8 * 100vw / var(--viewport-width), 8px);
}

.template-files__item .button {
  min-height: 2.375rem;
  padding: 0.25rem min(24 * 100vw / var(--viewport-width), 24px);
  border-radius: 1.1875rem;
  font-size: clamp(13px, 16 * 100vw / var(--viewport-width), 16px);
  color: var(--color-theme-green);
  background: #f4f4f4;
  text-decoration: underline
}

.video {
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.video--1\/1 {
  aspect-ratio: 1;
}

.video--9\/16 {
  aspect-ratio: 9 / 16;
  width: auto;
  height: 100%;
}

.video :where(iframe) {
  display: block;
  width: 100%;
  height: 100%;
}

/* layout */

.header__nav-bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: calc(60 * 100vw / var(--viewport-width));
  margin: 0 auto;
  background: rgb(255, 255, 255, 0.9);
}

.header__logo {
  --header-logo-width: 84;

  position: absolute;
  inset: calc(18 * 100vw / var(--viewport-width)) auto auto calc(20 * 100vw / var(--viewport-width));
  z-index: 2;
}

.header__logo .logo-ja-kyosai {
  width: calc(var(--header-logo-width) * 100vw / var(--viewport-width));
}

.header__logo .logo-ja-kyosai__link {
  display: block;
}

.header__main__grid {
  display: grid;
  grid-template:
    'image' auto
    'body'  auto / 100%;
}

.header__main__body {
  grid-area: body;
  padding: calc(30 * 100vw / var(--viewport-width)) 0;
  background: var(--color-white);
}

.header__main__image {
  grid-area: image;
}

.header__title {
  width: calc(271 * 100% / var(--viewport-width));
  margin: 0 auto;
}

.header__image {
  display: flex;
  justify-content: center;
  aspect-ratio: 393 / 403;
  overflow: hidden;
}

.header__image .image {
  flex: 0 0 auto;
  height: 100%;
  object-position: 50% 100%;
  object-fit: cover;
}

.header__carousel {
  width: 100%;
  height: 100%;
}

.header__about__button .button {
  position: absolute;
  inset: calc(30 * 100vw / var(--viewport-width)) var(--inner-padding-inline) auto auto;
  min-width: 100px;
  min-height: 2rem;
  padding: 0.25rem 8px;
  border: 1px solid;
  border-radius: 1rem;
  box-shadow: calc(2 * 100vw / var(--viewport-width)) calc(2 * 100vw / var(--viewport-width)) calc(4 * 100vw / var(--viewport-width)) rgb(0 0 0 / 0.15);
  color: var(--color-theme-green);
  background: var(--color-white);
  font-size: 0.75rem;
  line-height: 1rem;
  translate: 0 -50%;
}

.header__buttons {
  margin: calc(20 * 100vw / var(--viewport-width)) auto 0;
}

.header__button {
  margin: 1rem 0 0;
}

.header__period {
  margin: 1rem 0 0;
}

.header__period__list {
  color: var(--color-theme-green);
  font-size: 0.875rem;
  text-align: center;
}

.header__movie {
  position: absolute;
  z-index: 2;
  inset: calc(316 * 100vw / var(--viewport-width)) calc(8 * 100vw / var(--viewport-width)) auto auto;
  aspect-ratio: 1;
  width: calc(100 * 100vw / var(--viewport-width));
}

.header__movie__button {
  container: header-movie-button / inline-size;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  color: inherit;
  background: var(--color-theme-yellow);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  transition: var(--ui-hover-transition-duration);

  &:hover {
    opacity: var(--ui-hover-opacity);
  }

  .text  {
    font-size: 12.3cqw;
  }
}

.content__main {
  padding: 1rem 0;
  background: #b8f1b2 url(/assets/images/content_bg.jpg) 50% 0 / 200px;
}

.content-grid {
  display: grid;
  grid-template: auto / 100%;
  gap: 16px;
}

.content-section {
  --content-section-gap: 30;
  --content-section-gap-rem: calc(var(--content-section-gap, 16) * 1rem / 16);

  flex: 0 0 auto;
  padding: 2rem 16px;
  background: #fff;
}

.content-section__header {
  color: var(--color-theme-green);
}

.content-section__heading {
  font-size: clamp(15px, 18 * 100vw / var(--viewport-width), 18px);
  text-align: center;
}

.content-section__content {
  margin-top: var(--content-section-gap-rem);
}

.content-section__content:first-child {
  margin-top: calc(var(--content-section-gap-rem) * -1);
}

.content-section__subheading {
  margin-top: var(--content-section-gap-rem, 1rem);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.content-section__text {
  margin-top: var(--content-section-gap-rem, 2rem);
  font-size: 0.875rem;
  line-height: 2;
}

.content-section__button {
  margin: var(--content-section-gap-rem, 2rem) auto 0;
}

.content-section__video {
  max-width: 640px;
  margin: var(--content-section-gap-rem, 2rem) auto 0;
}

.content-section__profiles {
  width: fit-content;
  max-width: 720px;
  margin-inline: auto;
}

.content-section__cast {
  margin: var(--content-section-gap-rem, 2rem) auto;
}

.content-section__profile {
  margin: var(--content-section-gap-rem, 2rem) auto 0;
}

.content-section__requirements {
  margin-top: var(--content-section-gap-rem, 2rem);
}

.content-section__application {
  max-width: 600px;
  margin: var(--content-section-gap-rem, 2rem) auto 0;
}

.content-section__template-files {
  max-width: 626px;
  margin: var(--content-section-gap-rem, 2rem) auto 0;
  padding-inline: min(16 * 100vw / var(--viewport-width), 16px);
  box-sizing: content-box;
}

.content-section__support {
  margin: var(--content-section-gap-rem, 2rem) auto 0;
}

.content-banners {
  padding: 1rem 0 2rem;
}

.content-banners__header {
  margin-bottom: var(--content-section-gap-rem, 2rem);
}

.content-banners__heading {
  color: var(--color-theme-green);
  font-size: 1.5rem;
  text-align: center;
}

.footer {
  padding: 2.5rem 0 calc(2.5rem + env(safe-area-inset-bottom));
  color: #fff;
  background: var(--color-theme-green-light);
}

.footer a {
  color: inherit;
}

.footer__contact {
  margin-top: 2rem;
  font-size: 0.75rem;
  text-align: center;
}

.footer__contact .body-text dt {
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
}

.footer__contact .body-text .--note {
  font-size: 0.625rem;
}

.footer__contact__button {
  margin-top: 1.875rem;
}

.footer__contact__button .button {
  margin-inline: auto;
  max-width: 200px;
  border-radius: 1.25rem;
  min-height: 2.5rem;
  font-size: 1rem;
}

.footer__logo {
  width: 156px;
  margin: 2rem auto 0;
  text-align: center;
}

.footer__copyright {
  margin-top: 2rem;
  font-size: 0.625rem;
  text-align: center;
}

/* parts */

.floating-action-button {
  --floating-button-right: 8px;
  --floating-button-bottom: 8px;
  --floating-button-bottom--end: 4rem;

  position: fixed;
  inset: auto var(--floating-button-right) calc(var(--floating-button-bottom) + env(safe-area-inset-bottom, 0px)) auto;
  z-index: 11;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: var(--ui-open-transition-duration);
}

.floating-action-button.is-show {
  opacity: 1;
  visibility: visible;
}

.floating-action-button.is-end {
  --floating-button-bottom: var(--floating-button-bottom--end);

  position: absolute;
}

.floating-action-button .button {
  container: button-fixed / inline-size;
  width: 6.25rem;
  aspect-ratio: 1;
  padding: calc(2400% / 122) 0;
  border-radius: 50%;
}

.floating-action-button .button--icon {
  --button-icon-size: 0.75rem;

  grid-template: auto 1fr / auto;
  justify-items: center;
  gap: calc(1600% / 122);
}

.floating-action-button .button--icon::before {
  content: none;
}

.floating-action-button .button__text {
  font-size: min(1600cqw / 122, 16px);
  line-height: 1.25;
}

.floating-action-button .button__text .large {
  font-size: min(2400cqw / 122, 24px);
}

.section-intro .content-section__heading {
  font-size: clamp(22px, 24 * 100vw / var(--viewport-width), 24px);
}

.section-intro .content-section__heading__small {
  font-size: clamp(12px, 16 * 100vw / var(--viewport-width), 16px);
}

.section-intro .content-section__subheading {
  font-size: 1rem;
  line-height: 2;
}

.section-intro .content-section__button .button {
  max-width: 348px;
  min-height: 3rem;
  margin: 0 auto;
  font-size: 1rem;
}

.section-intro .profile__content {
  margin-top: var(--content-section-gap-rem, 2rem);
}

.section-gallery .content-section__heading {
  font-size: 1.5rem;
  line-height: 2rem;
}

.section-gallery .content-section__description {
  margin-top: 0.5rem;
  text-align: center;
}

.section-contribute .content-section__heading {
  max-width: fit-content;
  margin-inline: auto;
}

/* js */

@keyframes micromodal-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes micromodal-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.micromodal {
  --micromodal-padding-block: calc(2.5rem + 32px);
  --micromodal-padding-inline: var(--inner-padding-inline);

  display: none;
}

.micromodal.is-open {
  display: block;
}

.micromodal .micromodal-overlay {
  will-change: transform;
}

.micromodal[aria-hidden='false'] .micromodal-overlay {
  animation: micromodal-fade-in .5s;
}

.micromodal[aria-hidden='true'] .micromodal-overlay {
  animation: micromodal-fade-out .5s;
}

.micromodal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: var(--micromodal-padding-block) var(--micromodal-padding-inline);
  color: var(--color-white);
  background: rgb(0 0 0 / 0.9);
}

.micromodal-close {
  position: absolute;
  inset: auto 0 16px;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
  padding: 0;
  border: 1px solid;
  border-radius: 1.25rem;
  color: var(--color-white);
  background: none;
  appearance: none;
  transition: var(--ui-hover-transition-duration);
}

.micromodal-close:hover {
  opacity: var(--ui-hover-opacity);
}

.micromodal-close::before,
.micromodal-close::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.875rem;
  height: 0.125rem;
  background: currentColor;
}

.micromodal-close::before {
  rotate: 45deg;
}

.micromodal-close::after {
  rotate: -45deg;
}

.micromodal-container {
  width: 100%;
  height: 100%;
}

.micromodal-content {
  height: 100%;
}

.micromodal-content .video {
  position: relative;
  top: 50%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  transform: translateY(-50%);
}

.js-accordion {
  --js-accordion-visibility: hidden;

  position: relative;
}

.js-accordion__item {
  --js-accordion-visibility: hidden;
  --js-accordion-row: 0fr;
}

.js-accordion__item.is-open {
  --js-accordion-visibility: visible;
  --js-accordion-row: 1fr;
}

.js-accordion__button {
  z-index: 1;
}

.js-accordion__button:focus {
  z-index: 2;
}

.js-accordion__main {
  display: grid;
  grid-template: var(--js-accordion-row) / auto;
  transition: grid-template-rows var(--ui-open-transition-duration);
}

.js-accordion__collapse {
  min-height: 0;
  overflow: hidden;
  visibility: var(--js-accordion-visibility);
  transition: visibility var(--ui-open-transition-duration);
}

:where([data-remodal-target]) {
  cursor: pointer;
}

.remodal-wrapper {
  --modal-wrapper-padding: 10px;

  padding: var(--modal-wrapper-padding) var(--modal-wrapper-padding) 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 1001;
  background: #0006;
}

.remodal-overlay {
  background: rgb(0 0 0 / 0.8);
}

@media screen and (768px <= width), print {

  /* component */

  .application .button {
    min-height: 5rem;
    border-radius: 2.5rem;
    font-size: 1.5rem;
  }

  .calling-for-episodes {
    padding: 2.5rem 0;
  }

  .calling-for-episodes__heading {
    font-size: 1.875rem;
  }

  .calling-for-episodes__button {
    max-width: 340px;
    margin: 1.25rem auto 0;
  }

  .calling-for-episodes__period {
    margin-top: 1.25rem;
    font-size: inherit;

    dl {
      display: flex;
      flex-flow: wrap;
      justify-content: center;
      gap: 0 1em;
    }
  }

  .calling-for-episodes__end {
    max-width: 1000px;
    margin: 0 auto;
    padding: calc(1.5rem - 2px) 30px;
    font-size: 1.25rem;
  }

  .countdown {
    padding: 0.5em;
  }

  .countdown__container {
    max-width: 688px;
    margin: 0 auto;
  }

  .countdown__layout {
    grid-template: auto / auto 1fr;
    justify-content: center;
    align-items: center;
  }

  .countdown__counter {
    .tick-container {
      margin-top: -1.4em;
      padding: 1.4em 0;
    }
  }

  .countdown__description {
    font-size: 1.25rem;
  }

  .gallery {
    --swiper-navigation-sides-offset: 1.5rem;

    padding-bottom: 0.5rem;
    padding-inline: 6rem;
  }

  .modal {
    --modal-padding-block: 3rem;
    --modal-padding-inline: 48px;
  }

  .modal__heading {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .modal__footer__button .button {
    max-width: 240px;
  }

  .movies {
    overflow: unset;
    background-size: 100%;
  }

  .movies__content {
    backdrop-filter: blur(4px);
  }

  .movie {
    --movie-body-max-height: 80dvh;
    --movie-body-padding-top: 1rem;
    --movie-caption-height: 3.5rem;
  }

  .movie__body {
    padding: 1rem 0;
  }

  .movie__video {
    position: relative;
    overflow: hidden;
  }

  .movie__ribbon {
    top: 1rem;
    left: 3.5em;
  }

  .movie__caption {
    margin-top: 1.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .profile__grid {
    grid-template: auto / auto auto;
  }

  .profile__name {
    text-align: inherit;
  }

  .requirements__header {
    min-height: 3.75rem;
  }

  .requirements__heading {
    font-size: 1.5rem;
  }

  .requirements__description {
    padding-inline: 40px;
    font-size: 1rem;
  }

  .requirements__sample .button {
    min-height: 3.625rem;
    font-size: 0.875rem;
  }

  .requirements__rule__heading .button {
    --button-padding-inline: 16px;
  }

  .requirements__rule__content {
    padding: 0 40px 2.5rem;
    font-size: 0.875rem;
  }

  .requirements__rule__content h5 {
    margin-top: 2rem;
    font-size: 1.125rem;
  }

  .requirements__rule__content h6 {
    margin-top: 2rem;
    font-size: 1rem;
  }

  .requirements__rule__content :is(p, ul, ol) {
    margin-top: 1.5rem;
  }

  .support__text {
    font-size: 0.875rem;
  }

  .support__text__copyright {
    font-size: inherit;
  }

  .support__text .body-text {
    display: flex;
    flex-flow: wrap;
    align-items: baseline;
    gap: 1rem 35px;
    width: fit-content;
    margin-left: auto;
  }

  .support__text .body-text p {
    margin-top: 0;
  }

  .support .banners__list {
    grid-template: auto / 688fr 1108fr;
    gap: 1.875rem 30px;
    max-width: none;
  }

  .support .banners__list * {
    height: 100%;
  }

  .template-files__heading {
    margin-bottom: 1.25rem;
  }

  .template-files__list {
    padding-inline: min(16 * 100vw / var(--viewport-width), 16px);
  }

  .template-files__item .button {
    font-size: 0.875rem;
  }

  /* layout */

  .header__nav-bar {
    background: none;
  }

  .header__logo .logo-ja-kyosai {
    width: 138px;
  }

  .header__main__grid {
    grid-template: 'body image' auto / 560fr 640fr;
    grid-template: 'body image' auto / auto calc(100% * 640 / 1200);
  }

  .header__main__body {
    align-self: center;
    padding: 0;
  }

  .header__title {
    width: calc(445 * 100% / 560);
    margin: auto;
  }

  .header__image {
    aspect-ratio: 640 / 542;
  }

  .header__intro,
  .header__buttons {
    margin-top: min(30 * 100vw / var(--viewport-width), 30px);
  }

  .header__intro {
    font-size: min(24 * 100vw / var(--viewport-width), 24px);
  }

  .header__about__button .button {
    top: calc(18 * 100vw / var(--viewport-width));
    right: calc(24 * 100vw / var(--viewport-width));
    min-width: 128px;
    min-height: 2.5rem;
    font-size: 1rem;
    border-radius: 1.25rem;
    line-height: 1.5rem;
    translate: none;
  }

  .header__buttons {
    max-width: calc(340 * 100% / 490);
  }

  .header__buttons .button {
    font-size: 1.25rem;
  }

  .header__period {
    margin-top: 2rem;
  }

  .header__period__list {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0 1em;
    font-size: 1rem;
  }

  .header__movie {
    inset: calc(358 * 100vw / var(--viewport-width)) calc(12 * 100vw / var(--viewport-width)) auto auto;
    width: calc(138 * 100vw / var(--viewport-width));
  }

  .content__main {
    padding: 3.75rem 0;
  }

  .content__main > .inner {
    padding-inline: 60px;
  }

  .content-grid {
    gap: 3.75rem 60px;
  }

  .content-section {
    --content-section-gap: 35;

    padding: 3.125rem 50px;
    border-radius: 10px;
  }

  .content-section__heading {
    font-size: 2.25rem;
    line-height: 3rem;
  }

  .content-section__content {
    margin-top: var(--content-section-gap-rem);
  }

  .content-section__text {
    font-size: 1rem;
    text-align: center;
  }

  .footer__contact {
    font-size: 0.875rem;
  }

  .footer__contact .body-text {
    font-size: 1rem;
  }

  .footer__contact .body-text dt {
    font-size: 1.125rem;
  }

  .footer__contact .body-text .--note {
    font-size: 0.875rem;
  }

  .footer__contact__button .button {
    max-width: 300px;
    min-height: 3.125rem;
    border-radius: 1.5625rem;
  }

  /* parts */

  .floating-action-button {
    --floating-button-right: 24px;
    --floating-button-bottom: 24px;
    --floating-button-bottom--end: 24px;
  }

  .floating-action-button .button {
    width: 7.625rem;
  }

  .section-intro .content-section__heading {
    font-size: 2.25rem;
    line-height: 3rem;
  }

  .section-intro .content-section__heading__small {
    font-size: 1.5rem;
  }

  .section-intro .content-section__subheading {
    font-size: 1.5rem;
  }

  .section-intro .content-section__button .button {
    font-size: 1.125rem;
  }

  .section-application {
    --content-section-gap: 50;
  }

  .section-application .requirements__content,
  .section-application .requirements__sample,
  .section-application .requirements__rules {
    margin-top: var(--content-section-gap-rem);
  }

  .section-gallery .content-section__heading {
    font-size: 2.25rem;
    line-height: 3rem;
  }

  .section-gallery .content-section__description {
    margin-top: 0.75rem;
  }

  .section-contribute .banner {
    display: grid;
    grid-template: auto / minmax(240px, 1fr) auto;
    align-items: center;
    gap: 1rem 36px;
  }

  .section-contribute .banner__caption {
    --banner-caption-font-size: clamp(16px, 16 * 100vw / var(--viewport-width), 20px);
    --banner-caption-icon-size: 1.3125rem;

    margin-top: 0;
  }

  .section-contribute .banner__caption .icon {
    rotate: 270deg;
  }

  .section-banners {
    padding: 1.25rem 0 0;
  }

  /* js */

  .micromodal {
    --micromodal-padding-block: 6rem;
    --micromodal-padding-inline: 6rem;
  }

  .micromodal-close {
    inset: 2rem 2rem auto auto;
    margin: 0;
  }
}