@charset "utf-8";

/**
 * Header
 * -------------------------------------------------- */
.l-header {
  --logoSize: 40px;
  --snsSize: 40px;
  --toggleSize: 48px;
  pointer-events: none;
  > * {
    pointer-events: auto;
  }
  .logo,
  .sns a {
    line-height: 1;
  }
  .logo {
    width: var(--logoSize);
    aspect-ratio: 40 / 37;
  }
  .sns a {
    width: var(--snsSize);
    aspect-ratio: 1 / 1;
  }
  svg {
    width: 100%;
    height: auto;
  }
}

/* Toggle */
.nav_toggle {
  color: inherit;
}
@media (hover) {
  .nav_toggle {
    cursor: pointer;
    transition: background-color 0.4s;
  }
  .nav_toggle:hover,
  .nav_toggle.is-open {
    background: #ccc4;
    transition-duration: 0.2s;
  }
}
@media (min-width: 768px) {
  .l-header {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    inset: 0 0 auto;
    height: var(--headerHeight);
    padding: 0 var(--sidegap);
    .logo {
      margin-top: -12px;
    }
  }
  .nav_toggle {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .l-header {
    .logo {
      z-index: 3;
      position: fixed;
      --shift: calc(var(--logoSize) / (40 / 37) * 0.64);
      top: calc(var(--headerHeight) * 0.5 - var(--shift));
      left: var(--sidegap);
    }
  }
  .nav_toggle {
    z-index: 4;
    display: grid;
    place-items: center;
    position: fixed;
    top: calc(var(--headerHeight) * 0.5 - var(--toggleSize) * 0.5);
    right: var(--sidegap);
    width: var(--toggleSize);
    height: var(--toggleSize);
    border-radius: var(--toggleSize);
    > svg {
      grid-area: 1 / 1;
      width: 50%;
      fill: none;
      stroke: currentcolor;
      stroke-width: 1;
      stroke-linecap: round;
    }
    .bar1 {
      transform: translateY(-4px);
    }
    .bar2 {
      transform: translateY(4px);
    }
  }
  /* motion */
  .nav_toggle.is-open {
    .bar1 {
      transform: rotate(30deg);
    }
    &.is-anim .bar1 {
      animation: openAnim1 0.4s var(--easeOut) both;
    }
    .bar2 {
      transform: rotate(-30deg);
    }
    &.is-anim .bar2 {
      animation: openAnim2 0.4s var(--easeOut) both;
    }
  }
  .nav_toggle:not(.is-open) {
    .bar1 {
      transform: translateY(-4px);
    }
    &.is-anim .bar1 {
      animation: closeAnim1 0.4s var(--easeOut) both;
    }
    .bar2 {
      transform: translateY(4px);
    }
    &.is-anim .bar2 {
      animation: closeAnim2 0.4s var(--easeOut) both;
    }
  }
  @keyframes openAnim1 {
    from {
      transform: translateY(-4px);
    }
    30% {
      transform: none;
    }
    to {
      transform: rotate(30deg);
    }
  }
  @keyframes openAnim2 {
    from {
      transform: translateY(4px);
    }
    30% {
      transform: none;
    }
    to {
      transform: rotate(-30deg);
    }
  }
  @keyframes closeAnim1 {
    from {
      transform: rotate(30deg);
    }
    30% {
      transform: none;
    }
    to {
      transform: translateY(-4px);
    }
  }
  @keyframes closeAnim2 {
    from {
      transform: rotate(-30deg);
    }
    30% {
      transform: none;
    }
    to {
      transform: translateY(4px);
    }
  }
}

/* Navigation */
.nav_container > * {
  display: flex;
  align-items: center;
  li {
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  a {
    display: block;
    width: fit-content;
    padding: 0.5em;
    &.is-active {
      background-image: linear-gradient(var(--themecolor), var(--themecolor));
      background-position: left 0.25em bottom 0.75em;
      background-size: calc(100% - 0.5em) 0.5em;
      background-repeat: no-repeat;
    }
  }
}
@media (min-width: 768px) {
  .nav_container {
    display: flex;
    align-items: center;
    column-gap: calc(var(--sidegap) * 0.25);
    .menu {
      column-gap: 0.5em;
    }
  }
}
@media (max-width: 767.98px) {
  .nav_container {
    z-index: 3;
    display: grid;
    justify-content: center;
    row-gap: 1em;
    overflow: auto;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(100% - var(--sidegap) * 3, 400px);
    height: 100%;
    padding: var(--sidegap) 0;
    color: var(--black);
    background: #fafafdaa;
    backdrop-filter: blur(8px);
    @media (prefers-color-scheme: dark) {
      background: #373039aa;
    }
    > * {
      display: inherit;
      left: auto;
    }
    .menu {
      align-self: end;
    }
    .sns {
      align-self: start;
      grid-auto-flow: column;
    }
  }
  /* motion */
  .nav_container:not(.is-active) {
    pointer-events: none;
    visibility: hidden;
  }
  .nav_container:not(.is-open) {
    opacity: 0;
    transform: translateX(25%);
  }
  .nav_container.is-anim {
    transition: opacity 0.4s, transform 0.4s var(--easeInOut);
  }
  .nav_container.is-open.is-anim {
    transition-duration: 0.4s;
    transition-timing-function: var(--easeOut);
  }
}

/**
 * Main Contents
 * -------------------------------------------------- */
.l-main {
  z-index: 1;
  position: relative;
  width: var(--contentWidth);
  margin: 0 auto;
  padding-top: var(--headerHeight);
}

/* :::::: Title :::::: */
.page_title {
  --overlayColor: #37303944;
  display: grid;
  align-items: center;
  @media (prefers-color-scheme: dark) {
    --overlayColor: #37303988;
  }
  > * {
    grid-area: 1 / 1;
  }
  .text {
    z-index: 1;
    color: #fafafd;
    font-weight: 500;
    font-size: min(var(--cw) * 24 / 375, 2rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .image {
    position: relative;
    margin-inline: var(--breakout);
    img {
      width: 100%;
      max-height: 320px;
      object-fit: cover;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--overlayColor);
      backdrop-filter: blur(8px);
    }
  }
}

/* :::::: Crumb :::::: */
.page_crumb {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  text-transform: uppercase;
  a {
    display: flex;
    align-items: center;
    padding: 0.5em;
  }
  a + a::before {
    content: ">";
    position: relative;
    top: -0.1em;
    margin-inline: -0.5em 0.5em;
    opacity: 0.5;
  }
}
.page_title + .page_crumb {
  margin-top: 1em;
}

/* :::::: Section :::::: */
.page_section {
  margin-top: clamp(40px, var(--cw) * 120 / 768, 120px);
  .page_section {
    margin-top: clamp(24px, var(--cw) * 64 / 768, 64px);
  }

  /* :::::: Layout :::::: */
  &.c-storyboard {
    display: grid;
    gap: 0.5em min(var(--cw) * 40 / 768, 64px);
    @media (min-width: 768px) {
      grid-template-columns: min(50%, 320px) 1fr;
      grid-template-rows: repeat(3, auto);
      * {
        margin: 0;
      }
      /* 画像が何個めの要素かによってグリッド数を変える */
      &:has(.c-image:nth-child(5)) {
        grid-template-rows: repeat(4, auto);
      }
      &:has(.c-image:nth-child(6)) {
        grid-template-rows: repeat(5, auto);
      }
      &:has(.c-image:nth-child(7)) {
        grid-template-rows: repeat(6, auto);
      }
      &:has(.c-image:nth-child(8)) {
        grid-template-rows: repeat(7, auto);
      }
      > *:not(.c-image) {
        grid-column: 2;
      }
      .c-image {
        grid-column: 1;
        grid-row: 1 / -1;
        img {
          height: 100%;
          object-fit: cover;
        }
      }
    }
    @media (max-width: 767.98px) {
      *:not(.c-image) {
        margin: 0;
      }
      .c-image {
        order: -1;
        margin-block: 0 1em;
      }
    }
  }
}

/* Link to Wikipedia */
a[href*="wikipedia.org"] {
  text-decoration: none;
  color: #36c;
  background: none;
}

/**
 * Footer
 * -------------------------------------------------- */
.l-footer {
  display: grid;
  width: var(--contentWidth);
  margin: 0 auto;
  margin-top: clamp(40px, var(--cw) * 120 / 768, 120px);
  padding: var(--sidegap) 0;
  .menu {
    display: flex;
    flex-wrap: wrap;
    a {
      display: block;
      width: fit-content;
      padding: 0.5em;
    }
    &.-nav {
      margin-top: 1em;
      li {
        font-weight: 300;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      a.is-active {
        background-image: linear-gradient(var(--themecolor), var(--themecolor));
        background-position: left 0.25em bottom 0.75em;
        background-size: calc(100% - 0.5em) 0.5em;
        background-repeat: no-repeat;
      }
    }
    &.-other li {
      font-size: 0.8125rem;
    }
  }
  .address {
    margin-top: 1em;
    font-size: 0.875rem;
  }
  .pagetop {
    order: -1;
    justify-self: center;
    padding: 16px;
    .arr {
      overflow: visible;
      fill: none;
      stroke: currentcolor;
      stroke-width: 1;
      stroke-linecap: round;
    }
  }
  .copyright {
    margin-top: 40px;
    font: 300 clamp(0.625rem, var(--cw) * 12 / 375, 0.75rem) / 1.25
      var(--fontEn);
    letter-spacing: 0.1em;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .l-footer {
    grid-template-columns: 1fr auto;
    column-gap: var(--sidegap);
    .address {
      grid-area: 1 / 2 / 6 / 3;
      align-self: end;
    }
    .pagetop {
      grid-area: 1 / 1 / 2 / 3;
    }
    .copyright {
      grid-column: 1 / 3;
    }
  }
}
@media (max-width: 767.98px) {
  .l-footer {
    justify-items: center;
    .menu {
      justify-content: center;
    }
    .pagetop {
      margin-bottom: var(--sidegap);
    }
  }
}

/**
 * Utility / JavaScript
 * -------------------------------------------------- */
.u-visuallyhidden {
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  width: 1px;
  height: 1px;
}

/**
 * About MediaQueries
 * default style
 * @media (min-width: 768px) {}
 * @media (max-width: 767.98px) {}
 * @media (max-width: 479.98px) {}
 * @media (max-width: 359.98px) {}
 * -------------------------------------------------- */
:root {
  --themecolor: #86c0de;
  --black: #373039;
  --white: #fafafd;
  --font: "Inter", "Noto Sans JP", sans-serif;
  --fontJa: "Noto Sans JP", sans-serif;
  --fontEn: "Inter", sans-serif;
  --fontMono: "Source Code Pro", "Noto Sans JP", monospace;
  --easeIn: cubic-bezier(0.3, 0, 0.7, 0);
  --easeOut: cubic-bezier(0.3, 1, 0.7, 1);
  --easeInOut: cubic-bezier(0.7, 0, 0.3, 1);
}
body {
  /** container: body / inline-size;
   * コンテナクエリを使うと position: relative できなくなってしまうので
   * JavaScript で明示的に body の横幅 を取得して変数 --cw に保持
   * var(--cw) * {目標サイズ} / {ブレイクポイント} という式で使う */
  --cw: 100vw; /* Container Width */
  --breakout: calc(50% - var(--cw) / 2);

  /** 画面幅が 375px の時に左右パディングが 24px となるよう伸縮 (最大 48px) */
  --sidegap: min(var(--cw) * 16 / 375, 48px);

  /** 画面幅が 375px の時に高さが 80px となるよう伸縮 (最大 120px) */
  --headerHeight: clamp(80px, var(--cw) * 80 / 375, 120px);
  --contentWidth: min(100% - var(--sidegap) * 2, 1000px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --white: #373039;
    --black: #fafafd;
  }
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  overscroll-behavior: auto;
  color: var(--black);
  font: 400 1em / 1.75 var(--font);
  letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--white);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
:where(ul, ol) {
  list-style: none;
  padding: 0;
}
:where(img, svg, video, iframe) {
  vertical-align: middle;
}
:where(img[height], picture > img, video[height]) {
  height: auto;
}
:where(input, button, textarea, select, small) {
  font: inherit;
}
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd) {
  margin: 0;
}
:where(img, picture, video, iframe) {
  display: inline-block;
  max-width: 100%;
}
:where(a) {
  color: inherit;
  text-decoration: inherit;
  text-decoration-skip-ink: auto;
}
:where(button) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
}
:where(sub) {
  vertical-align: baseline;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}