/* global */

:root {
  /* artboard max-width */
  --sp: 750;
  --pc: 1440;

  /* artboard width */
  --abw: var(--sp);

  /* artboard viewport ratio */
  --abv: calc(100vw / var(--abw));
  /* artboard container ratio */
  --abc: calc(100cqw / var(--abw));

  /* device sizes */
  --viewport-tablet: 768px;
  --viewport-desktop: 1440px;
  --inner-max: 1440px;

  /* color */
  --color-1--light: #93eee8;
  --color-1:        #4edbd3;
  --color-2--light: #ffba00;
  --color-2:        #fc8800;
  --color-3:        #0048a0;
  --color-3--dull:  #1a4884;
  --color-4--weak:  #e3f2f6;
  --color-4--light: #b7d6f0;
  --color-4--dull:  #456e8d;
  --color-4--gray:  #4c5e7b;
  --color-4:        #193666;

  --color-text: #000;
  --color-bg: #fff;
  --color-link: var(--color-3);
  --color-link--hover: var(--color-2);

  /* font */
  --font-sans-default: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', YuGothic, 'Yu Gothic', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family--latin: Helvetica, Arial, sans-serif;
  --font-family--noto-sans: 'Noto Sans JP', var(--font-sans-default);
  --font-family--zen-maru-gothic: 'Zen Maru Gothic', var(--font-sans-default);
  --font-family--zen-kaku-gothic: 'Zen Kaku Gothic New', var(--font-sans-default);
  --font-family--m-plus-rounded: 'M PLUS Rounded 1c', var(--font-sans-default);

  /* duration */
  --duration-hover: 0.2s;
}

@media screen and (min-width: 768px) {
  :root {
    --abw: var(--pc);
  }
}

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

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translate(0, 100px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes fade-in-up-l {
  0% {
    opacity: 0;
    transform: translate(0, 50px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-in-blur {
  0% {
    opacity: 0
    transform: scale(0);
    filter: blur(400px);
  }
  50% {
    transform: scale(1.2);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}

@keyframes bounce-in-blur-l {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(400px);
  }
  50% {
    transform: scale(1.1);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}

@keyframes glow {
  0% {
    filter: brightness(1) drop-shadow(0 0 48px #fff0);
  }
  100% {
    filter: brightness(1.5) drop-shadow(0 0 48px #ffff);
  }
}

:root {
  scroll-behavior: smooth;
}

body {
  color: var(--text);
  background: var(--bg);
  font: 400 100%/1.5rem var(--font-family--noto-sans);
  font-synthesis: none;
}

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

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

:where(p, h1, h2, h3, h4, h5, h6, ul, ol) {
  margin: 0;
}

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

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

.remodal {
  max-width: 1120px;
  padding: 0;
  text-align: left;
}

.remodal-overlay {
  inset: 0;
  margin: auto;
  background: rgb(0 0 0 / 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.remodal-wrapper {
  padding: 20px;
}

.remodal-close {
  inset: -20px -20px auto auto;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: var(--color-1);
}

.remodal-close::before,
.remodal-close::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 30px;
  height: 8px;
  margin: auto;
  border: solid var(--color-1);
  border-width: 2px 0;
  background: currentColor content-box;
}

.remodal-close::before {
  transform: rotate(-45deg);
}

.remodal-close::after {
  transform: rotate(45deg);
}

/* layout */

.l-footer {
  --pt: 60;
  --pb: 40;

  padding-bottom: calc(min(var(--pb) * 1px, var(--pb) * var(--abv)) + env(safe-area-inset-bottom, 0rem));
  background: var(--color-4--weak);
}

.l-footer .c-copyright {
  --mt: 40;
}

/* atomic */

.a-icon {
  width: 100%;
  object-fit: contain;
}

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

.a-image--circled {
  border-radius: 50%;
}

body :where([class]),
.a-lo {
  /* prevent inheritance */
  --w: auto;
  --w-max: none;
  --h: auto;
  --mt: 0;
  --mr: 0;
  --mb: 0;
  --ml: 0;
  --pt: 0;
  --pr: 0;
  --pb: 0;
  --pl: 0;

  width:          min(var(--w)     * 1px, var(--w)     * var(--abv));
  max-width:      min(var(--w-max) * 1px, var(--w-max) * var(--abv));
  height:         min(var(--h)     * 1px, var(--h)     * var(--abv));
  margin-top:     min(var(--mt)    * 1px, var(--mt)    * var(--abv));
  margin-right:   min(var(--mr)    * 1px, var(--mr)    * var(--abv));
  margin-bottom:  min(var(--mb)    * 1px, var(--mb)    * var(--abv));
  margin-left:    min(var(--ml)    * 1px, var(--ml)    * var(--abv));
  padding-top:    min(var(--pt)    * 1px, var(--pt)    * var(--abv));
  padding-right:  min(var(--pr)    * 1px, var(--pr)    * var(--abv));
  padding-bottom: min(var(--pb)    * 1px, var(--pb)    * var(--abv));
  padding-left:   min(var(--pl)    * 1px, var(--pl)    * var(--abv));
}

.a-pos {
  /* prevent inheritance */
  --pos: absolute;
  --top: auto;
  --right: auto;
  --bottom: auto;
  --left: auto;
  --z: auto;
  --w: 100;

  position: var(--pos);
  top    : min(var(--top)    * 1px, var(--top)    * var(--abv));
  right  : min(var(--right)  * 1px, var(--right)  * var(--abv));
  bottom : min(var(--bottom) * 1px, var(--bottom) * var(--abv));
  left   : min(var(--left)   * 1px, var(--left)   * var(--abv));
  z-index: var(--z);
  width  : min(var(--w)      * 1px, var(--w)      * var(--abv));
}

.a-link {
}

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

.a-link--block:hover {
  opacity: 0.7;
}

.a-text {
  font-size:   min(var(--fz, 32) * 1px, var(--fz, 32) * var(--abv));
  line-height: min(var(--lh, 48) * 1px, var(--lh, 48) * var(--abv));
}

/* component */

.c-accordion__item {
  --accordion-border-width: 1px;

  border-bottom: var(--accordion-border-width) solid var(--color-4);
}

.c-accordion__item:first-child {
  border-top: var(--accordion-border-width) solid var(--color-4);
}

.c-accordion__item.is-open {
  --accordion-button-icon-after: none;
  --accordion-content-height: fit-content;
}

.c-accordion__button {
  --h: 76;
  --fz: 24;
  --lh: 32;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-4);
  background: #fff;
  appearance: none;
}

.c-accordion__button::before,
.c-accordion__button::after {
  --right: 12;
  --w: 24;
  --h: 6;

  content: '';
  position: absolute;
  inset: 0 min(var(--right) * 1px, var(--right) * var(--abv)) 0 auto;
  margin: auto 0;
  width: min(var(--w) * 1px, var(--w) * var(--abv));
  height: min(var(--h) * 1px, var(--h) * var(--abv));
  background: currentColor;
}

.c-accordion__button::after {
  display: var(--accordion-button-icon-after);
  transform: rotate(90deg);
}

.c-accordion__content {
  overflow: hidden;
  height: var(--accordion-content-height, 0px);
  transition: height 0.5s;
}

.c-accordion__body {
  --pt: 32;
  --pb: 32;

  border-top: 1px solid var(--color-4--light);
}

.c-archive__item {
  --mt: 20;
}

.c-archive__button {
  --h: 52;
  --bdr: 10;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: calc(var(--bdr) * 100% / 232) / calc(var(--bdr) * 100% / var(--h));
  color: #fff;
  background: var(--archive-button-bg, #ccc) linear-gradient(6deg, #e6e6e6 49%, rgb(230 230 230 / 0.5) 50%, transparent 51%);
  background-blend-mode: multiply;
}

.c-archive__button::after {
  content: '';
  position: absolute;
  inset: 0 calc(800% / 232) 0 auto;
  margin: auto 0;
  width: calc(1600% / 232);
  height: calc(1600% / 52);
  background: url(../images/icons/chevron_white.svg) 0 0 / 100% no-repeat;
}

.c-archive__button--blue {
  --archive-button-bg: #00a9bd;
}

.c-archive__button--orange {
  --archive-button-bg: #f19149;
}

.c-archive__button__text {
  --h: 21;
}

.c-archive__button__text .a-image {
  width: auto;
  height: 100%;
}

.c-button {
  --h: 128;
  --button-icon-size: 50;
  --button-icon-gap: 45;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: min(var(--h) * 1px / 2, var(--h) / 2 * var(--abv));
  color: #000;
  background: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--duration-hover);
}

.c-button--shadow {
  box-shadow: min(6px, 6 * var(--abv)) min(6px, 6 * var(--abv)) min(10px, 10 * var(--abv)) rgb(0 0 0 / 0.2);
}

.c-button__icon {
  --w: var(--button-icon-size);
  --mr: var(--button-icon-gap);

  display: flex;
  justify-content: center;
  align-items: center;
}

.c-container {
  position: relative;
  max-width: calc(var(--abw) * 1px);
  margin-inline: auto;
}

.c-copyright__text {
  --fz: 24;
  --lh: 32;

  color: var(--color-4);
  text-align: center;
  font-family: var(--font-family--latin);
}

.c-id__link {
  display: block;
}

.c-link--button {
  transition: opacity var(--duration-hover);
}

.c-link--button:hover {
  opacity: 0.7;
}

.c-list--notes {
  padding-left: 1em;
}

.c-list__item--note {
  list-style-type: '※';
}

.c-special {
  position: fixed;
  inset: auto 0 0 auto;
  z-index: 11;
  width: 200px;
  transition: opacity 0.2s, visibility 0.2s;
}

.c-special.--hide {
  opacity: 0;
  visibility: hidden;
}

.c-special__button {
  transition-property: filter;
}

@keyframes special {
  0% {
    filter: saturate(1.05) brightness(1) drop-shadow(0 0 1px #f306) drop-shadow(0 0 1px #fc03) drop-shadow(0 0 4px #ff03) drop-shadow(0 0 8px #fff3);
  }
  100% {
    filter: saturate(1.2) brightness(1.1) drop-shadow(0 0 2px #f306) drop-shadow(0 0 2px #fc0) drop-shadow(0 0 8px #ff0) drop-shadow(0 0 16px #fff);
  }
}

.c-special__button:active {
  opacity: 1;
  filter: saturate(1.2) brightness(1.05) drop-shadow(0 0 1px #f309) drop-shadow(0 0 1px #fc0) drop-shadow(0 0 6px #ff0) drop-shadow(0 0 16px #fff);
}

.c-special__button:hover,
.c-special__button:focus {
  opacity: 1;
  animation: 1s alternate infinite special;
}

.c-special__button .a-image {
  aspect-ratio: 3 / 2;
}

.c-video-modal {
  --video-modal-width: 1080;
  --video-modal-height: 1920;
  --video-modal-padding-block: 48px;
  --video-modal-padding-inline: 16px;

  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 1001;
  margin: auto;
  padding: var(--video-modal-padding-block) var(--video-modal-padding-inline);
}

.c-video-modal__container {
  width: calc((100vh - var(--video-modal-padding-block, 0px) * 2) * var(--video-modal-width, 1) / var(--video-modal-height, 1));
  max-width: calc(100vw - var(--video-modal-padding-inline, 0px) * 2);
  height: calc((100vw - var(--video-modal-padding-inline, 0px) * 2) * var(--video-modal-height, 1) / var(--video-modal-width, 1));
  max-height: calc(100vh - var(--video-modal-padding-block, 0px) * 2);
}

.c-video-modal__video {
  width: 100%;
  height: 100%;
}

.c-video-modal__close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0 0 auto auto;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: #000;
  appearance: none;
}

.c-video-modal__close::before {
  content: '✕';
  font-size: 32px;
  line-height: 32px;
}

.c-video-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  margin: auto;
  background: rgb(0 0 0 / 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  cursor: pointer;
  transition: 0.2s;
}

.c-video-modal__overlay.is-open {
  background: rgb(0 0 0 / 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.c-smartphone {
  --smartphone-width: 305;
  --smartphone-height: 530;

  position: relative;
  z-index: 1;
  padding-top: calc(53000% / var(--smartphone-width));
}

.c-smartphone__container {
  position: absolute;
  inset: 0;
  margin: auto;
}

.c-smartphone__frame {
  position: relative;
  border: 0;
  padding: calc(800% / var(--smartphone-width));
  border-radius: calc(2800% / var(--smartphone-width)) / calc(2800% / var(--smartphone-height));
  background: #000
}

.c-smartphone__frame::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  width: calc(10700% / var(--smartphone-width));
  height: calc(2800% / var(--smartphone-height));
  margin: 0 auto;
  border-bottom-right-radius: calc(2000% / 107) calc(2000% / 28);
  border-bottom-left-radius: calc(2000% / 107) calc(2000% / 28);
  background: #000;
}

.c-smartphone__movie {
  border-radius: calc(2000% / (var(--smartphone-width) - 16)) / calc(2000% / (var(--smartphone-height) - 16));
  overflow: hidden;
}

.c-smartphone__movie .a-image {
  height: 100%;
}

.c-sns-nav__list {
  --gap: 48;
  --sns-nav-item-size: 76;

  display: grid;
  grid-template: auto / repeat(auto-fit, min(var(--sns-nav-item-size) * 1px, var(--sns-nav-item-size) * var(--abv)));
  justify-content: center;
  gap: min(var(--gap) * 1px, var(--gap) * var(--abv));
}

.c-sns-nav__link {
  display: block;
  border-radius: 50%;
  overflow: hidden;
}

.c-tour__link {
  text-decoration: none;
}

.c-tour__figure {
  --bdr: 10;

  position: relative;
  border-radius: min(var(--bdr) * 1px, var(--bdr) * var(--abv));
  overflow: hidden;
}

.c-tour__label {
  --pt: 18;
  --pr: 13;
  --pb: 18;
  --pl: 16;
  --fz: 25;
  --lh: 25;

  --clip-path-bottom-right: 25;

  position: absolute;
  inset: 0 auto auto 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - min(var(--clip-path-bottom-right) * 1px, var(--clip-path-bottom-right) * var(--abv))) 100%, 0 100%);
  color: #fff;
  background: var(--color-1);
}

.c-tour__label__small {
  font-size: 80%;
}

.c-tour__button {
  --w: 500;
  --mt: 56;

  margin-inline: auto;
}

/* project */

.p-challenge {
  --pt: 64;
  --pb: 64;
}

.p-challenge .c-inner {
  --pr: 35;
  --pl: 35;
}

.p-challenge__heading {
  --w: 460;
  --ml: 190;
}

.p-challenge__video {
  --mt: 32;
}

.p-challenge__video__link {
  --bdr: 30;

  display: block;
  border-radius: min(var(--bdr) * 1px, var(--bdr) * var(--abv));
  overflow: hidden;
}

.p-challenge__description {
  --mt: 32;
  --pt: 35;
  --pr: 35;
  --pb: 35;
  --pl: 35;
  --bdr: 30;
  --stripe-width: 20;
  --color-length: min(var(--stripe-width) * 1px, var(--stripe-width) * var(--abv));

  border-radius: min(var(--bdr) * 1px, var(--bdr) * var(--abv));
  color: var(--color-4);
  background: #fff9d3 repeating-linear-gradient(-45deg, #fff0 0 var(--color-length), #ffffff40 var(--color-length) calc(var(--color-length) * 2));
}

.p-challenge__description .c-body-text {
  --fz: 28;
  --lh: 48;
}

.p-challenge__description h3 {
  --mb: 32;
  --fz: 40;
  --lh: 64;

  display: grid;
  grid-template: auto / 1fr auto 1fr;
  align-items: center;
  text-align: center;
  gap: 0.5em;
}

.p-challenge__description h3::before,
.p-challenge__description h3::after {
  content: '';
  border-top: 2px solid;
}

.p-challenge__list {
  --mt: 32;
  --gap: 32;

  display: grid;
  grid-template: auto / 1fr 1fr;
  gap: min(var(--gap) * 1px, var(--gap) * var(--abv));
  margin-inline: auto;
}

.p-challenge .c-button {
  --h: 96;
  --button-icon-gap: 20;

  box-shadow: min(6px, 6 * var(--abv)) min(6px, 6 * var(--abv)) min(10px, 10 * var(--abv)) rgb(0 0 0 / 0.2);
}

.p-challenge .c-button__text {
  --fz: 32;
  --lh: 48;
}

.p-cover {
  --h: 924;

  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--color-1) url(../images/cover_bg@mobile.png) 0 min(33px, 33 * var(--abv)) / 100% no-repeat;
}

.p-cover::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  margin: 0 auto;
  padding-top: min(104px, 104 * var(--abv));
  background: url(../images/halftone.png) 0 0 / min(100px, 100 * var(--abv));
}

.p-cover .c-container {
  height: 100%;
}

.p-cover__id {
  --top: 21;
  --left: 19;
  --w: 191;
  --z: 4;
}

.p-cover__tagline {
  --top: 83;
  --right: 0;
  --left: 0;
  --w: 399;
  --z: 4;

  margin-inline: auto;
}

.p-cover__title {
  --top: 186;
  --right: 0;
  --left: 0;
  --w: 624;
  --z: 4;

  margin-inline: auto;
}

.p-cover__loupe__content {
  --top: 278;
  --left: 0;
  --z: 1;
  --w: 862;
  --margin-inline: -56;

  margin-inline: max(var(--margin-inline) * 1px, var(--margin-inline) * var(--abv));
}

.p-cover__prize {
  --top: 414;
  --left: 19;
  --z: 2;
  --w: 279;
}

.p-cover__characters {
  position: absolute;
  inset: 0;
  margin: auto;
  overflow: hidden;
}

.p-cover__character--miru {
  --top: 731;
  --left: 1;
  --z: 4;
  --w: 247;
}

.p-cover__character--eru {
  --top: 753;
  --left: 204;
  --z: 3;
  --w: 220;
}

.p-cover__character--eru::after {
  content: '';
  position: absolute;
  inset: 0 0 auto auto;
  z-index: 1;
  width: 50%;
  margin: calc(-4500% / 220) calc(-1600% / 220) auto auto;
  padding-top: calc(15100% / 220);
  background: url(../images/cover_loupe_small.png) 0 / 100% no-repeat;
}

.p-intro {
  --pt: 30;
  --pb: 29;
}

.p-intro__heading {
  --w: 617;

  margin-inline: auto;
}

.p-intro__body {
  --w: 621;
  --mt: 31;
  --fz: 28;
  --lh: 40;

  margin-inline: auto;
}

.p-intro__apply__header {
  --w: 612;
  --mt: 45;
  --gap: 9;

  display: grid;
  grid-template: auto / 1fr auto 1fr;
  align-items: center;
  gap: 0 min(var(--gap) * 1px, var(--gap) * var(--abv));
  margin-inline: auto;
  color: var(--color-3);
}

.p-intro__apply__header::before,
.p-intro__apply__header::after {
  --h: 2;

  content: '';
  display: block;
  width: 100%;
  height: min(var(--h) * 1px, var(--h) * var(--abv));
  background: currentColor;
}

.p-intro__apply__heading {
  --w: 240;

  margin-inline: auto;
}

.p-intro__apply__flow {
  --w: 686;
  --mt: 30;

  margin-inline: auto;
}

.p-about-siru {
  --pb: 141;
}

.p-about-siru--static .c-inner {
  --pr: 35;
  --pl: 35;
}

.p-about-siru__image {
  --top: 0;
  --right: 15;
  --w: 167;
}

.p-about-siru__image--static {
  --w: 507;

  inset: auto;
  margin-inline: auto;
}

.p-about-siru__image--static .a-image {
}

.p-about-siru__modal {
  position: relative;
  z-index: 1;
  color: #2b4881;
  background: #8ee1f899 repeating-linear-gradient(90deg, #8ed9f7 0px 50px, #8ee1f8 50px 100px);
  font-family: var(--font-family--m-plus-rounded);
}

.p-about-siru__modal::before,
.p-about-siru__modal__container::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  margin: 0 auto;
}

/* flag */
.p-about-siru__modal::before {
  z-index: -1;
}

/* border */
.p-about-siru__modal::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: -1;
  border: 4px solid #fff;
}

.p-about-siru__modal__container {
  position: relative;
  padding: 15px;
  overflow: hidden;
}

/* triangle */
.p-about-siru__modal__container::before {
  top: -54px;
  z-index: -2;
  width: 100%;
  padding-top: 50%;
  opacity: 0.4;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 0, 0 100%);
  background: #005273;
}

.p-about-siru__modal__box {
  padding: 20px 15px;
  border-radius: 10px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.p-about-siru__modal__heading {
  margin-bottom: 10px;
  font-weight: inherit;
}

.p-about-siru__modal__heading__text {
  display: block;
  font-size: 1.25rem;
}

.p-about-siru__modal__heading__text--big {
  font-weight: 500;
  font-size: 2.125rem;
}

.p-about-siru__modal__grid {
  display: grid;
  grid-template:
    'image   list'    auto
    'profile profile' auto
    'origin  origin'  auto / 120px auto;
  gap: 15px;
}

.p-about-siru__modal__image {
  grid-area: image;
}

.p-about-siru__modal__profile {
  grid-area: profile;
}

.p-about-siru__modal__list {
  display: grid;
  grid-template: auto / auto;
  gap: 5px;
  grid-area: list;
}

.p-about-siru__modal__list div {
}

.p-about-siru__modal__list dt,
.p-about-siru__modal__list dd {
  display: inline;
}

.p-about-siru__modal__list dd {
  margin: 0;
}

.p-about-siru__modal__origin {
  grid-area: origin;
}

.p-about-siru__modal__origin__heading {
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 1.125rem;
}

.p-running {
  position: relative;
  z-index: 1;
}

.p-running__image {
  --top: -74;
  --right: 0;
  --left: 0;
  --w: 300;

  top: max(var(--top) * 1px, var(--top) * var(--abv));
  margin-inline: auto;
}

.p-main {
  --pt: 66;
  --pb: 53;

  background: var(--color-4--weak) url(../images/main_bg@mobile.webp) 50% max(-74px, -74 * var(--abv)) / min(1226px, 1226 * var(--abv)) no-repeat;
}

.p-main .c-inner {
  --pr: 35;
  --pl: 35;
}

.p-house__heading {
  --w: 572;
  --ml: 124;
}

.p-house__content {
  --mt: 49;
}

.p-campaign {
  --mt: 60;
}

.p-campaign__box {
  --bdr: 10;

  overflow: hidden;
  border-radius: min(var(--bdr) * 1px, var(--bdr) * var(--abv));
}

.p-campaign__header,
.p-campaign__sns {
  --stripe-width: min(12.727922px, 12.727922 * var(--abv));

  background: var(--color-1) repeating-linear-gradient(
    -45deg,
    rgb(255 255 255 / 0.07) 0 var(--stripe-width),
    transparent var(--stripe-width) calc(var(--stripe-width) * 2)
  );
}

.p-campaign__header,
.p-campaign__sns__header {
  --pt: 56;
  --pb: 56;

  color: #fff;
}

.p-campaign__heading {
  --w: 600;

  margin-inline: auto;
}

.p-campaign__content {
  --pt: 38;
  --pr: 32;
  --pb: 70;
  --pl: 32;

  background: #fff;
}

:root.is-end .p-campaign__main {
  position: relative;
}

:root.is-end .p-campaign__main__overlay {
  --border: 12;
  --border-radius: 20;
  --stripe-width: min(20px, 20 * var(--abv));

  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  border-radius: min(var(--border-radius) * 1px , var(--border-radius) * var(--abv));
  box-shadow: 0 0 0 min(var(--border) * 1px, var(--border) * var(--abv)) #86dbd5;
  background: rgb(219 238 236 / 0.9) repeating-linear-gradient(
    -45deg,
    rgb(0 169 95 / 0.04) 0 var(--stripe-width),
    rgb(255 255 255 / 0.04) var(--stripe-width) calc(var(--stripe-width) * 2)
  );
}

:root.is-end .p-campaign__main__overlay__text {
  color: #e54904;
  font-weight: 700;
  text-align: center;
  text-shadow:
    -2px -2px 0 #fff,
     0   -2px 0 #fff,
     2px -2px 0 #fff,
     2px  0   0 #fff,
     2px  2px 0 #fff,
     0    2px 0 #fff,
    -2px  2px 0 #fff,
    -2px  0   0 #fff;
  ;
}

.p-campaign__list {
  display: grid;
  grid-template: auto / auto;
  text-align: center;
}

.p-campaign__list__group:not(:first-child) {
  --mt: 20;
}

.p-campaign__list__title {
  --w: 200;
  --h: 50;
  --fz: 24;
  --lh: 32;

  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  color: #fff;
  background: var(--color-1);
  font-weight: 700;
}

.p-campaign__list__description {
  --mt: 12;
  --fz: 28;
  --lh: 46;

  color: var(--color-4);
}

.p-campaign__list__body {
/*   text-align: left; */
}

.p-campaign__list__body .c-body-text {
/*   --fz: 16; */
/*   --lh: 24; */
}

.p-campaign__list__body .c-body-text :where(p, ul) {
  margin-top: 1em;
}

.p-campaign__list__body .c-body-text :where(ul) {
  display: block;
  font-weight: inherit;
}

.p-campaign__list__body .c-list--notes {
  text-align: left;
}

.p-campaign__details {
  --mt: 40;
}

.p-campaign__details .c-body-text {
  --fz: 24;
  --lh: 40;

  margin-top: -1em;
}

.p-campaign__details .c-body-text :where(h4, h5, h6, p, ul, ol, dl, dt, table) {
  margin-top: 1em;
}

.p-campaign__details .c-body-text :where(li) {
  margin-top: 0.25em;
}

.p-campaign__details .c-body-text :where(li.note) {
  list-style-type: '※';
}

.p-campaign__details .c-body-text :where(dd) {
  margin-inline-start: 40px;
}

.p-campaign__details .c-body-text :where(dd) > :where(ul, ol) {
  margin-inline-start: -40px;
}

.p-campaign__details .c-body-text :where(th, td) {
  padding: 0.25em 0 0;
  font-weight: inherit;
  text-align: inherit;
  vertical-align: baseline;
}

.p-campaign__details .c-body-text :where(tr:first-child) > :where(th, td) {
  padding-top: 0;
}

.p-campaign__details .c-body-text img {
  width: 100%;
}

.p-campaign__question {
  --mt: 64;
}

.p-campaign__question__movie {
  --w: 305;

  margin-inline: auto;
}

.p-campaign__question__message {
  --w: 517;
  --mt: 42;

  margin-inline: auto;
}

.p-campaign__sns {
  --pb: 56;
}

.p-campaign__sns__header {
  --pr: 22;
  --pl: 22;
  --gap: 15;

  display: grid;
  grid-template: auto / 1fr auto 1fr;
  gap: 0 min(var(--gap) * 1px, var(--gap) * var(--abv));
  align-items: center;
}

.p-campaign__sns__header::before,
.p-campaign__sns__header::after {
  --h: 4;

  content: '';
  height: min(var(--h) * 1px, var(--h) * var(--abv));
  background: currentColor;
}

.p-campaign__sns__heading {
  --w: 428;
}

.p-campaign__sns__list {
  --w: 500;
  --gap: 32;

  display: grid;
  grid-template: auto / auto;
  gap: min(var(--gap) * 1px, var(--gap) * var(--abv));
  margin-inline: auto;
}

.p-campaign__sns__item .c-button {
  --button-icon-size: 70;
  --button-icon-gap: 35;
  --pl: 57;

  justify-content: flex-start;
  color: var(--color-4);
  font-weight: inherit;
}

.p-archives {
  --pt: 40;
  --pb: 40;

  overflow: hidden;
  background: var(--color-4--light);
}

.p-archives__heading {
  --fz: 40;
  --lh: 48;

  color: var(--color-4--gray);
  text-align: center;
}

.p-archives__content {
  --mt: 40;
}

.p-archives__scroll {
}

.p-archives__list {
/*   --mb: -20; */
/*   --pr: 36; */
/*   --pb: 20; */
/*   --pl: 36; */
/*   --gap: 34; */

/*   display: flex; */
/*   gap: min(var(--gap) * 1px, var(--gap) * var(--abv)); */
/*   overflow: auto; */
}

.p-archives__item {
/*   --w: 232; */

/*   flex: 0 0 auto; */
}

.p-archives__item .c-button {
  --button-icon-size: 30;
  --button-icon-gap: 15;

  --w: 190;
  --h: 50;

  margin-inline: auto;
}

.p-archives__item .c-button__text {
  --fz: 16;
  --lh: 24;

  font-weight: 400;
}

/* js */

.js-animation {
  animation: 1s fade-in-up-l backwards paused;
}

.js-animation.is-active {
  animation-play-state: running;
}

.js-animation[data-animation-type='fade-in'] {
  animation-name: fade-in;
}

.js-animation[data-animation-type='fade-in-up'] {
  animation-name: fade-in-up;
}

.js-animation[data-animation-type='bounce-in'] {
  animation-name: bounce-in;
}

.js-animation[data-animation-type='bounce-in-blur'] {
  animation-name: bounce-in-blur;
}

.js-animation[data-animation-type='bounce-in-blur-l'] {
  animation-name: bounce-in-blur-l;
}

/* utility */

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

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

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

@media (min-width: 768px) {

  .remodal-wrapper {
    padding: 64px;
  }

  .remodal-close {
    inset: -40px -40px auto auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    color: #fff;
    background: var(--color-1);
  }

  .remodal-close::before,
  .remodal-close::after {
    width: 60px;
    height: 15px;
    border-width: 4px 0;
  }

  /* layout */

  .l-footer {
    --pt: 64;
    --pb: 48;
  }

  .l-footer .c-copyright {
    --mt: 48;
  }


  /* atomic */

  .a-text {
    --fz: 16;
    --lh: 24;
  }

  /* component */

  .c-accordion__button {
    --h: 76;
  }

  .c-accordion__button::before,
  .c-accordion__button::after {
    --w: 24;
    --h: 5;
  }

  .c-accordion__button__text {
    --fz: 20;
    --lh: 24;
  }

  .c-accordion__item {
    --accordion-border-width: 2px;
  }

  .c-button {
    --h: 70;
  }

  .c-special {
    width: 350px;
  }

  .c-sns-nav__list {
    --gap: 37;
    --sns-nav-item-size: 57;
  }

  .c-tour {
    position: relative;
  }

  .c-tour__figure {
    --bdr: 30;
  }

  .c-tour__label {
    --pr: 20;
    --pl: 20;
    --fz: 36;
    --lh: 48;
    --clip-path-bottom-right: 38;
  }

  .c-tour__button {
    --bottom: -32;
    --right: -40;
    --w: 416;
    --mt: 0;

    position: absolute;
    z-index: 1;
    bottom: max(var(--bottom) * 1px, var(--bottom) * var(--abv));
    right: max(var(--right) * 1px, var(--right) * var(--abv));
    margin-inline: 0;
  }

  .c-tour__button .c-button {
    --h: 80;
  }

  .c-tour__button .c-button__text {
    --fz: 24;
    --lh: 32;
  }

  /* project */

  .p-front {
    overflow: hidden;
  }

  .p-challenge__heading {
    --ml: 535;
  }

  .p-challenge__video,
  .p-challenge__description {
    --w: 960;

    margin-inline: auto;
  }

  .p-challenge__description {
    --pt: 32;
    --pr: 40;
    --pb: 40;
    --pl: 40;
  }

  .p-challenge__description .c-body-text {
    --fz: 18;
    --lh: 32;
  }

  .p-challenge__description h3 {
    --mb: 24;
    --fz: 32;
    --lh: 48;
  }

  .p-challenge__list {
    --w: 700;
  }

  .p-challenge__item .c-button {
    --h: 70;
  }

  .p-challenge__item .c-button__text {
    --fz: 24;
    --lh: 32;
  }

  .p-cover {
    --h: 520;

    overflow: visible;
    background-image: url(../images/cover_bg@desktop.png);
    background-position: 50% 0;
    background-size: min(1766px, 1766 * var(--abv));
  }

  .p-cover::after {
    display: none;
  }

  .p-cover__id {
    --top: 23;
    --left: 26;
  }

  .p-cover__tagline {
    --top: 112;
    --left: 65;
    --w: 702;

    margin-inline: 0;
  }

  .p-cover__title {
    --top: 162;
    --left: 62;
    --w: 825;

    margin-inline: 0;
  }

  .p-cover__prize {
    --top: 278;
    --left: 18;
    --w: 261;
  }

  .p-cover__loupe {
    position: relative;
    width: 50%;
    margin-left: auto;
  }

  .p-cover__loupe__content {
    --left: 65;
    --w: 924;

    top: max(-42px, -42 * var(--abv));
    margin-inline: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 87% 100%, 55% 58%, 0 52%);
  }

  .p-cover__character--miru {
    --top: 304;
    --left: 242;
    --w: 277;
  }

  .p-cover__character--eru {
    --top: 328;
    --left: 464;
    --w: 246;
  }

  .p-cover__character--eru::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 0 auto auto;
    width: calc(6000% / 246);
    margin: calc(-3100% / 246) calc(1700% / 246) auto auto;
    padding-top: calc(5300% / 246);
    background: url(../images/cover_loupe_small_house.png) 0 0 / contain no-repeat;
  }

  .p-intro {
    --pt: 89;
    --pb: 115;
  }

  .p-intro__heading {
    --w: 705;
  }

  .p-intro__body {
    --w: auto;
    --mt: 44;
    --fz: 24;
    --lh: 42;

    text-align: center;
  }

  .p-intro__apply__header {
    --w: 630;
  }

  .p-intro__apply__flow {
    --w: 634;
    --h: 162;
    --mt: 42;
  }

  .p-intro__apply__flow > .a-image {
    height: 100%;
    object-fit: fill;
  }

  .p-about-siru {
    --mt: -64;
    --pt: 0;
    --pb: 96;

    margin-top: max(var(--mt) * 1px, var(--mt) * var(--abv));
  }

  .p-about-siru__image {
    --top: auto;
    --right: 77;
    --bottom: 126;
    --w: 205;
  }

  .p-about-siru__image--static {
    --w: 450;

    margin-inline: auto;
  }

  .p-about-siru__modal {
  }

  /* flag */
  .p-about-siru__modal::before {
    height: 100px;
    background: url(../images/flag_long.png) 50% 0 no-repeat;
  }

  /* border */
  .p-about-siru__modal::after {
    border-width: 10px;
  }

  .p-about-siru__modal__container {
    padding: 120px 48px 122px;
  }

  /* triangle */
  .p-about-siru__modal__container::before {
    top: 0;
  }

  .p-about-siru__modal__box {
    max-width: 1020px;
    margin: 0 auto;
    padding: 20px 15px 50px;
    font-size: 1rem;
  }

  .p-about-siru__modal__header {
    margin-left: calc(39000% / 1118 + 30px);
  }

  .p-about-siru__modal__heading__text {
    font-size: 1.875rem;
  }

  .p-about-siru__modal__heading__text--big {
    font-size: 3.75rem;
  }

  .p-about-siru__modal__grid {
    grid-template:
      'image profile'    auto
      'image list' auto
      'image origin'  auto / min(390px, 39000% / 1118) auto;
    gap: 30px;
  }

  .p-about-siru__modal__image {
    margin-top: calc(-3200% / 390);
    margin-left: calc(-8500% / 990 - 15px);
  }

  .p-about-siru__modal__list,
  .p-about-siru__modal__origin {
    font-size: 1.25rem;
  }

  .p-about-siru__modal__list {
    display: table;
    width: fit-content;
  }

  .p-about-siru__modal__list div {
    display: table-row;
  }

  .p-about-siru__modal__list dt,
  .p-about-siru__modal__list dd {
    display: table-cell;
  }

  .p-about-siru__modal__list dt {
    white-space: nowrap;
  }

  .p-about-siru__modal__origin__heading {
    font-size: 1.375rem;
  }

  .p-running__image {
    --top: -54;
    --w: 312;
  }

  .p-main {
    --pt: 147;
    --pb: 118;

    background-image: url(../images/main_bg@desktop.webp);
    background-position: 50% min(33px, 33 * var(--abv));
    background-size: min(1852px, 1852 * var(--abv));
  }

  .p-house .c-inner {
    --pr: 40;
    --pl: 40;
  }

  .p-house__heading {
    --w: 682;
    --ml: 434;
  }

  .p-house__content .c-tour {
    --w: 960;

    margin-inline: auto;
  }

  .p-campaign {
    --mt: 80;
  }

  .p-campaign__box {
    --w: 960;
    --bdr: 30;

    margin-inline: auto;
  }

  .p-campaign__header {
    --pt: 40;
    --pb: 40;
  }

  .p-campaign__heading {
    --w: 715;
  }

  .p-campaign__content {
    --pt: 55;
    --pr: 4;
    --pb: 78;
    --pl: 62;
  }

  .p-campaign__grid {
    display: grid;
    grid-template: auto / min(502px, 502 * var(--abv)) auto;
    gap: 0;
  }

  :root.is-end .p-campaign__main__overlay {
    --border: 6;

    top: max(-8px, -8 * var(--abv));
    bottom: max(-32px, -32 * var(--abv));
  }

  :root.is-end .p-campaign__main__overlay__text {
    --fz: 24;
    --lh: 32;
  }

  .p-campaign__list__group:not(:first-child) {
    --mt: 32;
  }

  .p-campaign__list__title {
    --w: 160;
    --h: 37;
    --fz: 18;
    --lh: 24;
  }

  .p-campaign__list__description {
    --mt: 20;
    --fz: 20;
    --lh: 32;

    font-weight: 700;
  }

  .p-campaign__list__description ul {
    display: grid;
    gap: 0.2em;
  }

  .p-campaign__list__body .c-body-text :where(li) {
    margin-top: 0.2em;
  }

  .p-campaign__list__body .c-list--notes {
    font-weight: 400;
  }

  .p-campaign__body {
    --pr: 51;
  }

  .p-campaign__details .c-body-text {
    --fz: 16;
    --lh: 24;
  }

  .p-campaign__question {
    --mt: 0;
  }

  .p-campaign__question__movie {
    --w: 302;
  }

  .p-campaign__question__message {
    --w: 353;
    --mt: 24;
  }

  .p-campaign__sns {
    --pb: 76;
  }

  .p-campaign__sns__header {
    --pt: 49;
    --pb: 46;
  }

  .p-campaign__sns__header::before,
  .p-campaign__sns__header::after {
    --h: 2;
  }

  .p-campaign__sns__heading {
    --w: 345;
  }

  .p-campaign__sns__list {
    --w: auto;
    --pr: 46;
    --pl: 46;
    --gap: 36;

    grid-template: auto / repeat(3, 1fr);
  }

  .p-campaign__sns__item .c-button {
    --pr: 18;
    --pl: 18;
    --button-icon-size: 40;
    --button-icon-gap: 8;
  }

  .p-campaign__sns__item .c-button__text {
    --fz: 18;
    --lh: 24;

    margin-inline: auto;
  }

  .p-archives {
    --pt: 40;
    --pb: 62;
  }

  .p-archives__heading {
    --fz: 36;
    --lh: 40;
  }

  .splide.is-initialized:not(.is-active) .splide__track {
    overflow: visible;
  }

  .splide.is-initialized:not(.is-active) .p-archives__list {
    display: flex;
    justify-content: center;
    gap: min(34px, 34 * var(--abv));
    width: auto;
  }

  .splide.is-initialized:not(.is-active) .p-archives__item {
    flex: 0 0 min(232px, 232 * var(--abv));
  }

  .p-archives__content .splide__arrow {
    --w: 64;
    --h: 64;

    position: absolute;
    top: calc(min(232px * 265 / 305, 26500% / 305) - 32px);
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    opacity: 0.7;
    transition: var(--duration-hover);
    appearance: none;
  }

  .p-archives__content .splide__arrow:hover,
  .p-archives__content .splide__arrow:active,
  .p-archives__content .splide__arrow:focus {
    opacity: 1;
  }

  .p-archives__content .splide__arrow--prev {
    left: 16px;
    transform: rotate(180deg);
  }

  .p-archives__content .splide__arrow--next {
    right: 16px;
  }

  .p-archives__content .splide__arrow > svg {
    position: absolute;
    inset: 0;
    width: 50%;
    height: 50%;
    margin: auto;
  }

  .p-archives__content .splide__arrow[disabled] {
    visibility: hidden;
    opacity: 0;
  }
}