/**
 * =============================================================================
 *
 * Reset
 *
 * =============================================================================
 */
@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  :where(:root) {
    font-family: sans-serif;
    line-break: strict;
    line-height: 1.5;
    overflow-wrap: anywhere;
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent;
    text-autospace: normal;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-spacing-trim: trim-start;
  }

  :where(body) {
    margin: unset;
    min-block-size: 100dvb;
  }

  :where(:is(h1, h2, h3, h4, h5, h6):lang(en)) {
    text-wrap: pretty;
  }

  :where(h1) {
    font-size: 2em;
    margin-block: 0.67em;
  }

  :where(h2, h3, h4, h5, h6) {
    margin-block: unset;
  }

  :where(search) {
    display: block flow;
  }

  :where(p, blockquote, figure, pre, address, ul, ol, dl, menu) {
    margin-block: unset;
  }

  :where(blockquote, figure) {
    margin-inline: unset;
  }

  :where(p:lang(en)) {
    text-wrap: pretty;
  }

  :where(address:lang(ja)) {
    font-style: unset;
  }

  :where(ul, ol, menu) {
    list-style-type: '';
    padding-inline-start: unset;
  }

  :where(dt) {
    font-weight: bolder;
  }

  :where(dd) {
    margin-inline-start: unset;
  }

  :where(pre) {
    text-autospace: no-autospace;
    text-spacing-trim: space-all;
  }

  @media print {
    :where(pre) {
      text-wrap-mode: unset;
    }
  }

  :where(em:lang(ja)) {
    font-weight: bolder;
  }

  :where(:is(i, cite, em, dfn):lang(ja)) {
    font-style: unset;
  }

  :where(u, s, del, ins) {
    text-decoration-inset: auto;
  }

  :where(code, kbd, samp) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-feature-settings: initial;
    font-size: unset;
    font-variant-ligatures: none;
    font-variation-settings: initial;
  }

  :where(abbr[title]) {
    cursor: help;
    text-decoration-inset: auto;
    text-decoration-line: underline;
    text-decoration-style: dotted;
  }

  :where(time) {
    text-autospace: no-autospace;
  }

  @media (forced-colors: active) {
    :where(mark) {
      background-color: Highlight;
      color: HighlightText;
    }
  }

  @media print {
    :where(mark) {
      border-style: dotted;
      border-width: 1px;
    }
  }

  :where(a) {
    color: unset;
  }

  :where(a:any-link) {
    text-decoration-inset: auto;
    text-decoration-line: unset;
    text-decoration-thickness: from-font;
  }

  :where(img, svg, picture, video, audio, canvas, model, iframe, embed, object) {
    max-inline-size: 100%;
    vertical-align: bottom;
  }

  :where(img, svg, picture, video, canvas, model, iframe, embed, object) {
    block-size: auto;
  }

  :where(iframe) {
    border: unset;
  }

  :where(table) {
    border-collapse: collapse;
  }

  :where(caption, th) {
    text-align: unset;
  }

  :where(caption:lang(en)) {
    text-wrap: pretty;
  }

  :where(button, input, select, textarea),
  ::file-selector-button {
    border-color: unset;
    border-radius: unset;
    border-style: solid;
    border-width: 1px;
    color: unset;
    font: unset;
    letter-spacing: unset;
    text-align: unset;
  }

  :where(input:is([type='radio' i], [type='checkbox' i])) {
    margin: unset;
  }

  :where(input[type='file' i]) {
    border: unset;
  }

  :where(input[type='search' i]) {
    -webkit-appearance: textfield;
  }

  @supports (-webkit-touch-callout: none) {
    :where(input[type='search' i]) {
      background-color: Canvas;
    }
  }

  :where(input:is([type='tel' i], [type='url' i], [type='email' i], [type='number' i]):not(:placeholder-shown)) {
    direction: ltr;
  }

  :where(textarea) {
    margin-block: unset;
    resize: block;
  }

  :where(input:not([type='button' i], [type='submit' i], [type='reset' i]), textarea, [contenteditable]) {
    text-autospace: no-autospace;
  }

  :where(button, input:is([type='button' i], [type='submit' i], [type='reset' i])),
  ::file-selector-button {
    background-color: unset;
  }

  :where(
    button,
    input:is([type='button' i], [type='submit' i], [type='reset' i]),
    [role='tab' i],
    [role='button' i],
    [role='option' i]
  ),
  ::file-selector-button {
    touch-action: manipulation;
  }

  :where(
    button:enabled,
    label[for],
    select:enabled,
    input:is([type='button' i], [type='submit' i], [type='reset' i], [type='radio' i], [type='checkbox' i]):enabled,
    [role='tab' i],
    [role='button' i],
    [role='option' i]
  ),
  :where(:enabled)::file-selector-button {
    cursor: pointer;
  }

  :where(fieldset) {
    border: unset;
    margin-inline: unset;
    min-inline-size: 0;
    padding: unset;
  }

  :where(legend) {
    padding-inline: unset;
  }

  :where(progress) {
    vertical-align: unset;
  }

  ::placeholder {
    opacity: unset;
  }

  :where(summary) {
    cursor: pointer;
    list-style-type: '';
  }

  :where(summary)::-webkit-details-marker {
    display: none;
  }

  :where(dialog, [popover]) {
    border: unset;
    overscroll-behavior-block: contain;
    padding: unset;
  }

  :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
    display: none !important;
  }

  :where(dialog) {
    max-block-size: unset;
    max-inline-size: unset;
  }

  :where(dialog)::backdrop {
    background-color: oklch(0% 0 0deg / 30%);
  }

  :where([popover]) {
    margin: unset;
  }

  :where(:focus-visible) {
    outline-offset: 3px;
  }

  [tabindex='-1']:focus {
    outline: none !important;
  }

  :where(:disabled, [aria-disabled='true' i]) {
    cursor: default;
  }

  [hidden]:not([hidden='until-found' i]) {
    display: none !important;
  }
}

/**
 * =============================================================================
 *
 * Base
 *
 * =============================================================================
 */
@layer base {
  /*
   * Variable
   * ------------------------------------------------------------------------ */
  :root {
    --based-viewport-width: 1260;
    --viewport-scale: calc(100svw / var(--based-viewport-width));
    --rem-to-px: 16;
    --rem-unit: 1rem;
    --px-to-rem: calc(var(--rem-unit) / var(--rem-to-px));
    --header-height: calc(80 * var(--px-to-rem));
    --clamp-ratio-min: 0.86;
    --clamp-ratio-max: 1.16;

    /* Layout */
    --content-width-offset: 7.5vw;
    --content-width-preferred: calc(100vw - var(--content-width-offset) * 2);
    --content-width-max: 1260;
    --content-width: min(var(--content-width-preferred), calc(var(--content-width-max) * var(--px-to-rem)));

    /* Color */
    --color-base: #fff;
    --color-accent: #c90e2d;
    --color-white: #fff;
    --color-black: #494747;

    /* Font */
    /* --font-size-init: clamp(14px, calc(var(--rem-to-px) * var(--viewport-scale)), 18px); */
    --font-size-init: calc(16 * var(--viewport-scale));
    --font-size-25: calc(10 * var(--px-to-rem));
    --font-size-50: calc(12 * var(--px-to-rem));
    --font-size-100: calc(14 * var(--px-to-rem));
    --font-size-200: calc(16 * var(--px-to-rem));
    --font-size-300: calc(20 * var(--px-to-rem));
    --font-size-400: calc(24 * var(--px-to-rem));
    --font-size-500: calc(32 * var(--px-to-rem));
    --font-size-600: calc(40 * var(--px-to-rem));
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-shippori: shippori-mincho, serif;
    --font-futura: futura-pt, sans-serif;
    --font-noto-sans: noto-sans-cjk-jp, sans-serif;
    --leading-offset: calc((1em - 1lh) / 2);

    /* Accessibility */
    --focus-visible-outline: 1px auto -webkit-focus-ring-color;

    /* Z-index */
    --z-global-header: 999;

    /* Animation, Transition */
    --duration-quickly: 0.15s;
    --duration-default: 0.3s;
    --duration-slowly: 0.5s;
    --ease-custom: cubic-bezier(0.4, 0.15, 0, 1);
    --keyframes-scroll-text-repeat-length: 3;
  }

  @media (width <= 1280px) {
    :root {
      --content-width-offset: calc(120 * var(--px-to-rem));
    }
  }

  @media (width <= 767px) {
    :root {
      --based-viewport-width: 402;
      --content-width-offset: calc(32 * var(--px-to-rem));
      --header-height: calc(64 * var(--px-to-rem));
    }
  }

  /*
   * Keyframes
   * ------------------------------------------------------------------------ */
  @keyframes scroll_text {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc((0 - 100 / var(--keyframes-scroll-text-repeat-length)) * 1%));
    }
  }

  /*
   * Base
   * ------------------------------------------------------------------------ */
  *::selection {
    background: var(--color-accent);
    color: var(--color-white);
  }

  html {
    font-size: var(--font-size-init);
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);

    /* iOS Safariで意図せず文字が拡大されて表示されるのを回避 */
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: var(--color-base);
    color: var(--color-black);
    font-family: var(--font-shippori, serif);
    font-optical-sizing: auto;
    font-size: var(--font-size-100);
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.15em;
    overscroll-behavior-y: none;
  }

  body::-webkit-scrollbar {
    display: none;
  }

  :is(h1, h2, h3, h4, h5) {
    word-break: break-all;
  }

  html:not([lang='ja']) :is(h1, h2, h3, h4, h5) {
    word-break: initial;
  }

  picture {
    display: block;
  }

  img {
    display: flex;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
  }

  svg {
    display: block;
    height: auto;
    width: 100%;
  }

  p {
    text-align: justify;
  }

  html:not([lang='ja']) p {
    text-align: left;
  }

  a {
    color: inherit;
  }

  a:not([class]) {
    text-decoration: underline;
    transition: opacity var(--duration-default) var(--ease-custom);
  }

  @media (hover: hover) and (pointer: fine) {
    a:not([class]):hover {
      opacity: 0.5;
    }
  }

  strong {
    font-weight: var(--font-weight-bold);
  }

  button {
    background: none;
    color: inherit;
    cursor: pointer;
  }

  table {
    border-collapse: collapse;
  }

  th {
    text-align: left;
  }

  td {
    text-align: justify;
  }

  html:not([lang='ja']) td {
    text-align: left;
  }

  :is(input, textarea) {
    border-radius: 0;
    font-feature-settings: 'palt';
    -webkit-font-smoothing: antialiased;
  }

  :is(input, textarea)::placeholder {
    color: #555;
  }

  select {
    background: none;
    color: inherit;
  }
}

/**
 * =============================================================================
 *
 * Layouts
 *
 * =============================================================================
 */
@layer layouts {
  /*
   * Global header
   * ------------------------------------------------------------------------ */
  @scope (.scope.global-header) to (.scope) {
    :scope {
      align-items: center;
      background: var(--color-white);
      display: flex;
      height: var(--header-height);
      justify-content: space-between;
      left: 0;
      padding-inline: calc(64 * var(--px-to-rem));
      position: fixed;
      top: 0;
      transition: background var(--duration-default) var(--ease-custom);
      width: 100%;
      z-index: var(--z-global-header);
    }

    :scope[data-inverted='true'] {
      background: transparent;
    }

    ._logo {
      aspect-ratio: 458 / 150;
      color: var(--color-accent);
      height: calc(28 * var(--px-to-rem));
    }

    ._navigation {
      align-items: center;
      display: flex;
      gap: calc(40 * var(--px-to-rem));
    }

    ._navigation-inner {
      align-items: center;
      display: flex;
      gap: calc(40 * var(--px-to-rem));
    }

    ._item:has(._submenu) {
      position: relative;
    }

    ._item a {
      font-size: var(--font-size-50);
      font-weight: var(--font-weight-medium);
      letter-spacing: 0.15em;
      line-height: calc(16 * var(--px-to-rem));
      padding-block: calc(8 * var(--px-to-rem));
      text-decoration: none;
      transition: color var(--duration-default) var(--ease-custom);
    }

    ._item:where(.-no-link) > a {
      pointer-events: none;
    }

    ._item:has(._submenu) > a {
      --_icon-size: calc(12 * var(--px-to-rem));
      align-items: center;
      display: grid;
      gap: calc(4 * var(--px-to-rem));
      grid-template-columns: 1fr var(--_icon-size);
    }

    ._item:has(._submenu) > a::after {
      aspect-ratio: 1 / 1;
      background: currentColor;
      content: '';
      height: auto;
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M8.64645 4.14645C8.84171 3.95118 9.15822 3.95118 9.35348 4.14645C9.54874 4.34171 9.54874 4.65822 9.35348 4.85348L6.35348 7.85348C6.15822 8.04874 5.84171 8.04874 5.64645 7.85348L2.64645 4.85348C2.45118 4.65822 2.45118 4.34171 2.64645 4.14645C2.84171 3.95118 3.15822 3.95118 3.35348 4.14645L5.99996 6.79293L8.64645 4.14645Z" /></svg>');
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: cover;
      /* transform-origin: center; */
      /* transition: rotate var(--duration-default) var(--ease-custom); */
      width: 100%;
    }

    @media (hover: hover) and (pointer: fine) {
      ._item:has(._submenu) > a:hover::after {
        /* rotate: 180deg; */
      }
    }

    @media (hover: hover) and (pointer: fine) {
      ._item a:hover {
        color: var(--color-accent);
        opacity: 1;
      }
    }

    ._submenu {
      background: var(--color-white);
      box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1);
      left: 0;
      opacity: 0;
      padding: calc(4 * var(--px-to-rem)) calc(12 * var(--px-to-rem));
      position: absolute;
      top: 100%;
      transition-duration: var(--duration-default);
      transition-property: opacity, translate, visibility;
      transition-timing-function: var(--ease-custom);
      translate: 0 -5px;
      visibility: hidden;
    }

    ._submenu a {
      white-space: pre;
    }

    @media (hover: hover) and (pointer: fine) {
      ._item:hover ._submenu {
        opacity: 1;
        translate: 0;
        visibility: visible;
      }
    }

    ._submenu ._item {
      padding-block: calc(4 * var(--px-to-rem));
    }

    ._cta {
      background: var(--color-accent);
      border: 1px solid var(--color-accent);
      color: var(--color-white);
      display: grid;
      font-size: var(--font-size-50);
      font-weight: var(--font-weight-medium);
      height: calc(40 * var(--px-to-rem));
      line-height: calc(16 * var(--px-to-rem));
      padding-inline: calc(48 * var(--px-to-rem));
      place-items: center;
      transition-duration: var(--duration-default);
      transition-property: background, color, scale;
      transition-timing-function: var(--ease-custom);
    }

    ._cta:active {
      scale: 0.95;
    }

    @media (hover: hover) and (pointer: fine) {
      ._cta:hover {
        background: transparent;
        color: var(--color-accent);
      }
    }

    ._menu-toggle {
      display: none;
    }

    @media (width <= 767px) {
      :scope {
        padding-inline: calc(16 * var(--px-to-rem));
      }

      ._logo {
        height: calc(24 * var(--px-to-rem));
        transition-duration: var(--duration-default);
        transition-property: color;
        transition-timing-function: var(--ease-custom);
      }

      body[data-navigation-open='true'] & ._logo {
        color: var(--color-white);
      }

      ._navigation {
        background: var(--color-accent);
        color: var(--color-white);
        display: grid;
        height: 100%;
        left: 0;
        opacity: 0;
        place-content: center;
        pointer-events: none;
        position: fixed;
        top: 0;
        transition-duration: var(--duration-default);
        transition-property: opacity, visibility;
        transition-timing-function: var(--ease-custom);
        visibility: hidden;
        width: 100%;
        z-index: -1;
      }

      body[data-navigation-open='true'] & ._navigation {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
      }

      ._navigation-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: calc(16 * var(--px-to-rem));
        inline-size: var(--content-width);
      }

      ._item a {
        display: block;
        font-size: var(--font-size-300);
      }

      ._submenu ._item a {
        font-size: var(--font-size-200);
      }

      ._item:has(._submenu) > a::after {
        display: none;
      }

      ._submenu {
        background: none;
        box-shadow: none;
        display: grid;
        gap: calc(4 * var(--px-to-rem));
        opacity: 1;
        padding-block: calc(16 * var(--px-to-rem)) 0;
        padding-inline: calc(32 * var(--px-to-rem)) 0;
        position: static;
        visibility: visible;
      }

      ._submenu ._item {
        padding-block: 0;
      }

      ._cta {
        background: var(--color-white);
        color: var(--color-accent);
        font-size: var(--font-size-300);
        height: auto;
        inline-size: var(--content-width);
        padding: calc(18 * var(--px-to-rem)) 0;
      }

      ._menu-toggle {
        --_padding: calc(5 * var(--px-to-rem));
        aspect-ratio: 1 / 1;
        border: 0;
        display: grid;
        gap: calc(4 * var(--px-to-rem));
        padding: 0;
        padding: var(--_padding);
        place-items: center;
        position: relative;
        width: calc(32 * var(--px-to-rem));
      }

      ._menu-toggle span {
        background: var(--color-accent);
        height: 1px;
        position: absolute;
        transition-duration: var(--duration-default);
        transition-property: background, opacity, rotate, translate;
        transition-timing-function: var(--ease-custom);
        width: calc(100% - var(--_padding) * 2);
      }

      ._menu-toggle span:nth-of-type(1) {
        translate: 0 -6px;
      }

      ._menu-toggle span:nth-of-type(3) {
        translate: 0 6px;
      }

      body[data-navigation-open='true'] & ._menu-toggle span {
        background: var(--color-white);
      }

      body[data-navigation-open='true'] & ._menu-toggle span:nth-of-type(1) {
        rotate: 45deg;
        translate: 0;
      }

      body[data-navigation-open='true'] & ._menu-toggle span:nth-of-type(2) {
        opacity: 0;
      }

      body[data-navigation-open='true'] & ._menu-toggle span:nth-of-type(3) {
        rotate: -45deg;
        translate: 0;
      }
    }
  }

  /*
   * Main
   * ------------------------------------------------------------------------ */
  @scope (.scope.main) to (.scope) {
    :scope {
      padding-top: var(--header-height);
    }

    body:where(.home) :scope {
      --header-height: 0;
    }
  }

  /*
   * Global footer
   * ------------------------------------------------------------------------ */
  @scope (.scope.global-footer) to (.scope) {
    :scope {
      background: var(--color-white);
      display: grid;
      justify-items: center;
      padding-block: calc(64 * var(--px-to-rem));
    }

    ._inner {
      display: grid;
      gap: calc(64 * var(--px-to-rem));
      inline-size: var(--content-width);
      padding-inline: calc(32 * var(--px-to-rem));
    }

    ._main {
      display: flex;
      gap: calc(48 * var(--px-to-rem));
      letter-spacing: 0.05em;
    }

    /* Brand */
    ._brand {
      flex: 1;
    }

    ._logo {
      aspect-ratio: 458 / 150;
      color: var(--color-accent);
      height: calc(24 * var(--px-to-rem));
    }

    ._tagline {
      font-size: var(--font-size-50);
      line-height: calc(16 * var(--px-to-rem));
      padding-top: calc(30 * var(--px-to-rem));
    }

    ._socials {
      display: flex;
      gap: calc(20 * var(--px-to-rem));
      padding-top: calc(24 * var(--px-to-rem));
    }

    ._social-icon {
      color: var(--color-black);
      transition: color var(--duration-default) var(--ease-custom);
    }

    ._social-icon svg {
      aspect-ratio: 1 / 1;
      width: calc(16 * var(--px-to-rem));
    }

    ._social-icon svg path {
      stroke: currentcolor;
    }

    @media (hover: hover) and (pointer: fine) {
      ._social-icon:hover {
        color: var(--color-accent);
      }
    }

    /* Navigation menu */
    ._menu {
      display: grid;
      flex: 1;
      font-size: var(--font-size-50);
      gap: calc(24 * var(--px-to-rem));
      grid-template-rows: auto 1fr;
      line-height: calc(16 * var(--px-to-rem));
      min-height: calc(160 * var(--px-to-rem));
    }

    ._menu-title {
      font-size: inherit;
      font-weight: var(--font-weight-medium);
    }

    ._menu-list {
      display: grid;
      gap: calc(15 * var(--px-to-rem));
      margin-bottom: auto;
    }

    :where(._menu-title, ._menu-item) a {
      text-decoration: none;
      transition: color var(--duration-default) var(--ease-custom);
    }

    @media (hover: hover) and (pointer: fine) {
      :where(._menu-title, ._menu-item) a:hover {
        color: var(--color-accent);
        opacity: 1;
      }
    }

    /* Copyright */
    ._copyright {
      border-top: 0.5px solid currentColor;
      color: var(--color-accent);
      font-family: 'Inter', var(--font-noto-sans);
      font-size: var(--font-size-50);
      letter-spacing: 0.3px;
      line-height: calc(16 * var(--px-to-rem));
      padding-top: calc(32 * var(--px-to-rem));
      text-align: center;
    }

    @media (width <= 767px) {
      :scope {
        padding-block: calc(80 * var(--px-to-rem));
      }

      ._inner {
        gap: calc(40 * var(--px-to-rem));
        padding-inline: 0;
      }

      ._logo {
        height: calc(40 * var(--px-to-rem));
        margin-inline: auto;
      }

      ._tagline {
        display: none;
      }

      ._socials {
        gap: calc(40 * var(--px-to-rem));
        justify-content: center;
        padding-top: calc(40 * var(--px-to-rem));
      }

      ._social-icon svg {
        width: calc(40 * var(--px-to-rem));
      }

      ._menu {
        display: none;
      }

      ._copyright {
        padding-top: calc(24 * var(--px-to-rem));
      }
    }
  }
}

/**
 * =============================================================================
 *
 * Utility
 *
 * =============================================================================
 */
@layer utility {
  .-contents {
    display: contents;
  }

  @media (width <= 767px) {
    .-hidden-sp {
      display: none;
    }
  }

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