@charset "UTF-8";

@layer base {
  :root {
    interpolate-size: allow-keywords;
    /* サイズキーワードによるアニメーションを許可 */
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    min-height: 100dvh;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
      'Hiragino Sans', 'Noto Sans JP', Meiryo, sans-serif;
    overflow-x: hidden;
  }

  /* caveat-600 - latin */
  @font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/caveat-v23-latin-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
}

@layer layout {
  .l-header {
    padding: 1.5rem clamp(1.5rem, 0.268rem + 5.26vw, 5rem);
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    width: 100%;
    inset-inline: 0;
    z-index: 100;
  }

  .l-header__inner {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    display: flex;
    column-gap: 1.5rem;
    justify-content: space-between;
    align-items: center;
  }

  .l-header__logo {
    transition: opacity 0.2s;

    @media (hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  .l-header__logo>img {
    width: clamp(5rem, 4.78rem + 0.94vw, 5.625rem);
  }

  .l-header__large-screen {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 1.5rem;
  }

  .l-header__large-screen__nav {
    display: none;
    padding-inline: 1.25rem;
    box-shadow: -4px 4px 10px hsla(0, 0%, 10%, 0.05);
    border-radius: 100vmax;
    background-color: var(--background);

    @media screen and (min-width: 1334px) {
      display: flex;
    }
  }

  @media (min-width: 1280px) {
    .l-footer__nav__list {
      flex-direction: row;
      column-gap: calc(32 / 16 * 1rem);
    }
  }

  .l-header__large-screen__nav__list {
    display: flex;
    font-size: 0.875rem;
    font-weight: 500;

    &>li {
      display: grid;
      place-content: center;

      &>a {
        min-height: 3.375rem;
        padding: 0.75rem;
        text-align: center;
        display: grid;
        place-content: center;
        line-height: 1.2;
        text-align: left;
      }

      &.current-menu-item>a,
      &.current-menu-ancestor>a,
      &.current_page_item>a {
        color: var(--primary);
      }
    }
  }

  .l-header__large-screen__contact-button {
    display: none;

    @media screen and (min-width: 520px) {
      display: flex;
    }
  }

  .l-header__collapse-nav {
    position: relative;

    @media screen and (min-width: 1334px) {
      display: none;
    }
  }

  .l-header__collapse-nav__toggle {
    background-color: var(--primary);
    color: var(--primary-foreground);
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-radius: 100vmax;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    transition: opacity 0.3s;

    @media (hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  .l-header__collapse-nav__toggle__icon {
    display: block;
    position: relative;
    width: 0.875rem;
    height: 0.09375rem;
    background-color: var(--primary-foreground);
    border-radius: 100vmax;
    transition: background-color 0.3s;
  }

  .l-header__collapse-nav__toggle__icon::before,
  .l-header__collapse-nav__toggle__icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-foreground);
    border-radius: 100vmax;
    transition: transform 0.3s, top 0.3s;
  }

  .l-header__collapse-nav__toggle__icon::before {
    top: calc(-100% - 0.28125rem);
  }

  .l-header__collapse-nav__toggle__icon::after {
    top: calc(100% + 0.28125rem);
  }

  .l-header__collapse-nav[open] .l-header__collapse-nav__toggle__icon {
    background-color: transparent;
  }

  .l-header__collapse-nav[open] .l-header__collapse-nav__toggle__icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .l-header__collapse-nav[open] .l-header__collapse-nav__toggle__icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .l-header__collapse-nav::details-content {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background-color: var(--background);
    box-shadow: 4px 4px 10px hsla(0, 0%, 10%, 0.1);
    border: 1px solid hsla(0, 0%, 10%, 0.05);
    border-radius: 20px;
    opacity: 1;

    @media (prefers-reduced-motion: no-preference) {
      overflow: clip;
      transition-duration: 300ms;
      transition-property: content-visibility, block-size, opacity;
      transition-behavior: allow-discrete;
    }

    @media screen and (min-width: 520px) {
      top: calc(100% + 20px);
    }
  }

  .l-header__collapse-nav:not([open])::details-content {
    block-size: 0;
    opacity: 0;
  }

  .l-header__collapse-nav__content {
    padding: 1.25rem 0.75rem 0.75rem 0.75rem;
    animation: fadeIn 0.3s ease-out;
    min-width: 15.625rem;

    &>nav>ul>li {
      &>a {
        display: block;
        font-weight: 500;
        line-height: 1.2;
        padding: 0.75rem;
        font-size: 0.875rem;
      }

      &.current-menu-item>a,
      &.current-menu-ancestor>a,
      &.current_page_item>a {
        color: var(--primary);
      }
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .l-header__collapse-nav__content__contact-button {
    padding-inline: 1.5rem;
    padding-bottom: 2rem;
  }

  .l-page__content {
    padding: clamp(4rem, 3.648rem + 1.5vw, 5rem) clamp(1.5rem, 0.268rem + 5.26vw, 5rem);

    .l-page__content__inner {
      width: 100%;
      max-width: 70rem;
      margin-inline: auto;
    }

    line-height: 1.8;
    color: var(--foreground);

    h2,
    h3,
    h4 {
      margin-top: 3rem;
      margin-bottom: 1.5rem;
      padding-left: 1rem;
      border-left: 4px solid var(--primary);
      line-height: 1.4;
      font-weight: bold;
      color: var(--foreground-enhanced);
    }

    h2 {
      font-size: clamp(1.5rem, 1.324rem + 0.75vw, 1.75rem);
    }

    h3 {
      font-size: clamp(1.25rem, 1.162rem + 0.38vw, 1.5rem);
    }

    h4 {
      font-size: clamp(1.125rem, 1.081rem + 0.19vw, 1.25rem);
    }

    /* First element margin reset */
    &> :first-child {
      margin-top: 0 !important;
    }

    p {
      margin-top: 1.5rem;
      margin-bottom: 0;
    }

    ul,
    ol {
      margin-top: 1.5rem;
      margin-bottom: 0;
      padding-left: 1.5em;

      li {
        margin-bottom: 0.5rem;
      }
    }

    ul {
      list-style: disc;
    }

    ol {
      list-style: decimal;
    }

    a:any-link {
      color: var(--primary);
      text-decoration: underline;

      @media (hover: hover) {
        &:hover {
          text-decoration: none;
        }
      }
    }

    img {
      max-width: 100%;
      height: auto;
      margin-top: 2rem;
      margin-bottom: 2rem;
      border-radius: 5px;
    }

    blockquote {
      padding: 1rem;
      background-color: var(--secondary);
      border-left: 4px solid var(--foreground-light);
      margin-top: 1.5rem;
      margin-bottom: 0;
      color: var(--foreground-enhanced);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1.5rem;
      margin-bottom: 0;

      th,
      td {
        border: 1px solid var(--foreground-light);
        padding: 0.75rem;
        font-size: calc(14 / 16 * 1rem);
      }

      th {
        background-color: var(--secondary);
        font-weight: bold;
        text-align: left;
        width: 30%;
      }
    }

    figure {
      margin: 0;
      margin-top: 1.5rem;
      /* If figure has figcaption, ensure it flows correctly */
      display: block;
    }

    figcaption {
      font-size: 0.875rem;
      color: var(--foreground-light);
      margin-top: 0.5rem;
      text-align: center;
    }
  }

  .l-footer {
    padding-inline: clamp(1.5rem, 0.268rem + 5.26vw, 5rem);
    padding-bottom: calc(24 / 16 * 1rem);
    padding-top: clamp(3rem, 2.824rem + 0.75vw, 3.5rem);
    background-color: var(--primary);
    color: var(--primary-foreground);
    position: sticky;
    top: 100%;
  }

  .l-footer__inner {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
  }

  .l-footer__content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: calc(16 / 16 * 1rem);
    column-gap: calc(128 / 16 * 1rem);
  }

  @media (min-width: 944px) {
    .l-footer__content {
      grid-template-columns: auto 1fr;
    }
  }

  .l-footer__zip {
    margin-top: clamp(1rem, 0.648rem + 1.5vw, 2rem);
    font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
    line-height: 1.7;
  }

  .l-footer__address {
    font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
    line-height: 1.7;
  }

  .l-footer__access {
    font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
    line-height: 1.7;
    margin-top: calc(16 / 16 * 1rem);
  }

  .l-footer__sns {
    display: flex;
    margin-top: calc(24px - 4px);
    margin-left: -4px;
    gap: 8px;
    a {
      display: block;
      padding: calc(4 / 16 * 1rem);

      border-radius: 3px;
      transition: background-color 0.3s;

      @media (hover: hover) {
        &:hover {
          background-color: rgb(255 255 255 / 0.2);
        }
      }
    }
  }

  .l-footer__contact-button {
    margin-top: calc(32 / 16 * 1rem);
  }

  .l-footer__copy {
    margin-top: calc(56 / 16 * 1rem);
    text-align: center;
    font-size: clamp(0.75rem, 0.706rem + 0.19vw, 0.875rem);
  }

  .l-footer__nav {
    container-type: inline-size;

    .l-footer__nav__list {
      display: block grid;
      grid-template-columns: repeat(auto-fill,
          minmax(min(11.375rem, 100%), 1fr));
      column-gap: calc(24 / 16 * 1rem);
      row-gap: calc(8 / 16 * 1rem);
    }

    .l-footer__nav__list a {
      display: flex;
      flex-direction: column;
      row-gap: calc(2 / 16 * 1rem);
      font-size: calc(14 / 16 * 1rem);
      padding: calc(24 / 16 * 1rem) 0;
      border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
      line-height: 1.5;
      transition: background-color 0.3s;

      .l-footer__nav__ja {
        display: block;
      }

      .l-footer__nav__ja::before {
        display: block;
        content: attr(data-en);
        text-transform: uppercase;
        color: hsla(0, 0%, 100%, 0.3);
      }
    }
  }

  @media (min-width: 1280px) {
    .l-footer__copy {
      margin-top: clamp(3.5rem, 3.148rem + 1.5vw, 4.5rem);
      opacity: 0.3;
    }
  }
}