@charset "UTF-8";

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

  /* color */
  --white: #ffffff;
  --primary: #0e41a4;
  --color-text-primary: #000000;
  --main: #001636;
  --black: #303030;
  --gradation: linear-gradient(180deg, #001636 0%, #0c7db5 100%);
  --form-input: #f0f3f7;
  --form-required: #b61024;
  --form-optional: #575757;
  --form-border: #b7b7b7;
  --form-input-placeholder: #bababa;

  /* 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;
  --title: 'Cardo', serif;

  /* icon */
  --icon-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M13.3535 10H12.3535V1.70703L0.707031 13.3535L0 12.6465L11.6465 1H3.35352V0H13.3535V10Z" fill="currentColor"/><defs><linearGradient x1="6.67676" y1="0" x2="6.67676" y2="13.3535" gradientUnits="userSpaceOnUse"><stop stop-color="%23001636"/><stop offset="1" stop-color="%230C7DB5"/></linearGradient></defs></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: 90px;
}

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

/* =====================
  nudge
===================== */
:root {
  --nudge-1: 8px;
  --nudge-2: 16px;
  --nudge-3: 24px;
  --nudge-4: 32px;
  --nudge-5: 40px;
  --nudge-6: 48px;
  --nudge-7: 56px;
  --nudge-8: 64px;
  --nudge-9: 70px;
  --nudge-10: 80px;
}

@media (width <=768px) {
  :root {
    --nudge-1: calc((100 / 390) * 8 * 1vw);
    --nudge-2: calc((100 / 390) * 16 * 1vw);
    --nudge-3: calc((100 / 390) * 24 * 1vw);
    --nudge-4: calc((100 / 390) * 32 * 1vw);
    --nudge-5: calc((100 / 390) * 40 * 1vw);
    --nudge-6: calc((100 / 390) * 48 * 1vw);
    --nudge-7: calc((100 / 390) * 56 * 1vw);
    --nudge-8: calc((100 / 390) * 64 * 1vw);
    --nudge-9: calc((100 / 390) * 70 * 1vw);
    --nudge-10: calc((100 / 390) * 80 * 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;
    }
  }
}

@layer style {
  /* =====================
    common
  ===================== */

  html,
  body {
    font-family: 'Noto Serif JP', serif;
    font-size: 16px;
    font-style: normal;
    font-optical-sizing: auto;
    line-height: 1.8;
    color: #001636;

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

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

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

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

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

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

  /* =====================
    data-page="error"
  ===================== */
  [data-page='error'] {
    .main {
      :where(.u-mv) {
        &::after {
          background: linear-gradient(0deg, rgb(0 24 56 / 10%), rgb(0 24 56 / 10%)), linear-gradient(0deg, #001636 100%, rgb(0 22 54 / 30%) 15.38%, rgb(255 255 255 / 0%) 40.52%);
        }

        & .u-inner {
          @media only screen and (width <=768px) {
            padding-block-start: calc((100 / 390) * 15 * 1vw);
          }
        }

        @media (width <=768px) {
          padding-block-start: calc((100 / 390) * 38 * 1vw);
        }
      }

      .contents {
        padding-block-start: 90px;

        @media (width <=768px) {
          padding-block-start: calc((100 / 390) * 30 * 1vw);
        }
      }

      .form-text {
        text-align: center;

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

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

[data-hidden='true'] {
  visibility: hidden;

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