@charset "UTF-8";

/* =====================
  Custom Property
===================== */
:root {
  /* debug */
  --debug: false;

  /* color */
  --black: #111;
  --color-text-primary: #000;
  --primary: #0e41a4;
  --gray: #666;
  --smoke: #b7b7b7;

  /* font */
  --yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
  --yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
  --sanserif: 'Noto Sans JP', sans-serif;
  --serif: 'Noto Serif JP', serif;
  --title: 'Cardo', serif;

  /* icon */
  --icon-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none"> <path d="M13.6476 6.84862C13.8733 6.6232 14 6.31807 14 6C14 5.68193 13.8733 5.3768 13.6476 5.15138L8.81965 0.351509C8.70755 0.240067 8.57448 0.151666 8.42802 0.0913542C8.28157 0.0310422 8.12459 -2.56822e-07 7.96607 -2.63751e-07C7.64592 -2.77746e-07 7.33888 0.126442 7.11249 0.351509C6.88611 0.576576 6.75893 0.881833 6.75893 1.20013C6.75893 1.51842 6.88611 1.82368 7.11249 2.04874L9.87986 4.80003L1.20698 4.80003C0.88687 4.80003 0.579869 4.92646 0.353516 5.15149C0.127164 5.37653 7.05317e-07 5.68175 6.91406e-07 6C6.77495e-07 6.31825 0.127164 6.62347 0.353516 6.84851C0.579869 7.07354 0.88687 7.19997 1.20698 7.19997L9.87986 7.19997L7.11249 9.95126C7.0004 10.0627 6.91148 10.195 6.85082 10.3406C6.79015 10.4862 6.75893 10.6423 6.75893 10.7999C6.75893 10.9575 6.79015 11.1135 6.85082 11.2591C6.91148 11.4047 7.0004 11.5371 7.11249 11.6485C7.22459 11.7599 7.35766 11.8483 7.50412 11.9086C7.65057 11.969 7.80755 12 7.96607 12C8.12459 12 8.28156 11.969 8.42802 11.9086C8.57448 11.8483 8.70755 11.7599 8.81965 11.6485L13.6476 6.84862Z" fill="currentColor"/> </svg>');

  /* ease */
  --slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
  --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
  --easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
  --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
  --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
  --easeOutBounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* ==== project ==== */
  --header-height: 0;
}

@media only screen and (width <= 768px) {
  :root {
    --header-height: calc((100 / 390) * 0 * 1vw);
  }
}

/* =====================
  container context
===================== */
@container style(--debug:true) {
  * {
    outline: 1px solid tomato;

    &::before,
    &::after {
      outline: 1px solid tomato;
    }

    &:focus {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
  }
}

/* =====================
  animation
===================== */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes scrollable {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-25%);
  }
}

@keyframes loop-list {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

@layer style {
  /* =====================
    common
  ===================== */
  html,
  body {
    font-family: var(--sanserif);
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-primary);

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 14 * 1vw);
    }
  }

  body {
    @media (width > 768px) {
      min-inline-size: 1440px;
    }
  }

  @media (width > 768px) {
    .sp {
      display: none;
    }
  }

  @media (width <= 768px) {
    .pc {
      display: none;
    }
  }

  /* =====================
    main
  ===================== */
  .main {
    margin-block-start: calc(var(--header-height) * -1);
  }

  /* p */
  :where(p, li, dt, dd, th, td) {
    line-height: 1.8;
  }

  body:not([data-page='top'], [data-page='contact'], [data-page='entry'])::after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    pointer-events: none;
    content: '';
    background: #fff;
    opacity: 1;
    transition: all 600ms ease-in-out 100ms;
  }

  .pageshow body::before {
    opacity: 0;
  }

  .pageshow body::after {
    opacity: 0;
  }

  /* =====================
    data-page="error"
  ===================== */
  [data-page='error'] {
    .main {
      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 28 * 1vw);
      }

      .form-text {
        text-align: center;

        @media (width <= 768px) {
          text-align: left;
        }
      }

      .u-anchor {
        margin-block: 4em;
        margin-inline: auto;
      }

      .u-hgroup span[lang='en'] {
        @media (width <= 768px) {
          font-size: calc((100 / 390) * 30 * 1vw);
        }
      }

      /* =====================
            .u-breadcrumb
          ===================== */
      .u-breadcrumb {
        justify-content: flex-end;
        inline-size: 1280px;
        margin-block-end: 44px;
        margin-inline: auto;

        @media (width <= 768px) {
          inline-size: 100%;
          padding-inline: calc((100 / 390) * 16 * 1vw);
          margin-block-end: 7.2vw;
        }
      }

      /* =====================
            contents
          ===================== */
      .contents {
        position: relative;
        z-index: 2;
        padding-block-end: 179px;
        isolation: isolate;

        @media (width <= 768px) {
          padding-block-end: 23vw;
        }

        /* ==== u-bg ==== */
        .u-bg {
          inset-block-start: 1050px;

          @media (width <= 768px) {
            inset-block-start: 308vw;
          }
        }

        /* ==== u-inner ==== */
        .u-inner {
          position: relative;
          padding-block-start: 9px;
          overflow: hidden;

          @media (width <= 768px) {
            padding-block-start: 3vw;
          }
        }

        /* ==== u-hgroup ==== */
        .u-hgroup {
          margin-block-end: 108px;

          @media (width <= 768px) {
            margin-block-end: 13vw;
          }
        }
      }
    }
  }
}