@layer layouts {

  main {
    padding-top: 90px;

    @media (max-width: 896px) {
      padding-top: 60px;
    }
  }

  .container {
    width: 100%;
    max-width: var(--max-width-xl);
    margin: 0 auto;
    padding-inline: 20px;

    @media (max-width: 896px) {
      max-width: 100%;
    }

    >.inner {
      width: 100%;
      max-width: var(--max-width-lg);
      margin: 0 auto;
    }
  }
}

@layer layouts {
  :root {
    --color-black-100: #000;
    --color-black-90: rgb(0 0 0 / 90%);
    --color-gray-100: #fff;
    --color-gray-90: #f9f9f9;
    --color-gray-80: #efefef;
    --color-gray-70: #ccc;
    --color-gray-60: #aaa;
    --color-gray-50: #999;
    --color-gray-40: #797979;
    --color-gray-30: #626262;
    --color-gray-20: #4c4c4c;
    --color-gray-10: #222;
    --color-gray-5: #111;
    --color-red-95: #fcebee;
    --color-red-90: #fae6ea;
    --color-red-80: #eccad1;
    --color-red-70: #e5a6b2;
    --color-red-60: #db8294;
    --color-red-50: #ca596e;
    --color-red-40: #b82f49;
    --color-red-30: #a70524;
    --color-red-25: #8a0720;
    --color-red-20: #86041d;
    --color-red-10: #640316;
    --color-red-5: #43020e;
    --color-primary-90: var(--color-red-90);
    --color-primary-80: var(--color-red-80);
    --color-primary-70: var(--color-red-70);
    --color-primary-60: var(--color-red-60);
    --color-primary-50: var(--color-red-50);
    --color-primary-40: var(--color-red-40);
    --color-primary-30: var(--color-red-30);
    --color-primary-20: var(--color-red-20);
    --color-primary-10: var(--color-red-10);
    --color-primary-5: var(--color-red-5);
    --color-neutral-100: var(--color-gray-100);
    --color-neutral-90: var(--color-gray-90);
    --color-neutral-80: var(--color-gray-80);
    --color-neutral-70: var(--color-gray-70);
    --color-neutral-60: var(--color-gray-60);
    --color-neutral-50: var(--color-gray-50);
    --color-neutral-40: var(--color-gray-40);
    --color-neutral-30: var(--color-gray-30);
    --color-neutral-20: var(--color-gray-20);
    --color-neutral-10: var(--color-gray-10);
    --color-neutral-5: var(--color-gray-5);
    --color-category-blue: var(--color-blue-30);
    --color-category-green: var(--color-green-30);
    --color-category-purple: var(--color-purple-30);
    --color-blue-30: #0564a7;
    --color-green-30: #1e8e38;
    --color-purple-30: #83408a;
    --color-text-black: var(--color-black-100);
    --color-text-default: var(--color-neutral-5);
    --color-text-subtle: var(--color-neutral-40);
    --color-fill-default: var(--color-neutral-100);
    --color-fill-subtle: var(--color-neutral-80);
    --color-fill-dark: var(--color-neutral-10);
    --color-stroke-default: var(--color-gray-75);
    --color-stroke-dark: var(--color-gray-20);
    --color-stroke-brandsubtle: var(--color-primary-50);
    --color-text-brand: var(--color-primary-30);
    --color-fill-brand: var(--color-primary-30);
    --color-tag-blue: var(--color-blue-30);
    --color-tag-green: var(--color-green-30);
    --color-tag-purple: var(--color-purple-30);
    --color-text-light: var(--color-neutral-100);
    --color-fill-subtler: var(--color-neutral-80);
    --color-stroke-light: var(--color-gray-100);
    --color-stroke-subtler: var(--color-gray-50);
    --color-stroke-brand: var(--color-primary-30);
    --color-stroke-subtle: var(--color-gray-70);
    --color-stroke-subtle-2: var(--color-gray-50);
    --color-bluegreen-30: #39809c;
    --color-brown-30: #866431;
    --color-tag-bluegreen: var(--color-bluegreen-30);
    --color-tag-brown: var(--color-brown-30);
    --color-category-bluegreen: var(--color-bluegreen-30);
    --color-category-brown: var(--color-brown-30);
    --color-blue-30-2: #0564a7;
    --color-text-danger: #d00;
    --color-gray-75: #e0e0e0;
    --color-voice-green: #d1eace;
    --color-voice-blue: #d1e6f6;
    --color-voice-purple: #eeddf1;
    --color-voice-pink-01: #fbe0e5;
    --color-voice-pink-02: #f9d8eb;
    --color-voice-blue-02: #c4eaef;
    --color-voice-yellow-01: #f4ebdd;
    --color-voice-yellow-02: #ffdf87;
  }
}

@layer layouts {
  :root {
    --font-family: "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --second-family: "Rajdhani", sans-serif;
    --font-noto-serif: "Noto Serif JP", sans-serif;
    --font-size-base: 1rem;
  }
}

@layer layouts {
  :root {
    --max-width-xxl: 1512px;
    --max-width-xl: 1210px;
    --max-width-lg: 870px;
  }
}

@layer layouts {

  /* footer Layout
-------------------------------------------------------- */
  footer {
    position: relative;
    z-index: 2;
    width: 100%;
    background-color: var(--color-fill-dark);

    >.inner {
      width: 100%;
      max-width: var(--max-width-xl);
      margin: 0 auto;
      padding-inline: 20px;
    }

    >.inner>.copyright {
      border-top: 1px solid var(--color-stroke-dark);
      padding-block: 29px 31px;
      text-align: center;

      @media (max-width: 896px) {
        padding-block: 24px;
      }
    }

    >.inner>.copyright>p {
      color: var(--color-text-subtle);
      font-family: var(--second-family);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 2;
    }
  }

  /* contact-area */
  .contact-area {
    background-color: var(--color-fill-brand);
    padding-block: 79px 65px;

    @media (max-width: 896px) {
      padding-block: 50px 58px;
    }

    >.inner {
      display: flex;
      width: 100%;
      max-width: var(--max-width-xl);
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      gap: 20px;
      padding-inline: 20px;

      @media (max-width: 896px) {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 30px;
      }
    }

    >.inner>.box {
      display: flex;
      align-items: center;

      @media (max-width: 896px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
      }
    }

    >.inner>.box>.heading {
      @media (max-width: 896px) {
        display: flex;
        flex-direction: column;
        gap: 9px;
      }
    }

    >.inner>.box>.heading>.subtitle {
      color: var(--color-text-light);
      font-size: 1rem;
      font-weight: 700;

      @media (min-width: 897px) {
        display: none;
      }
    }

    >.inner>.box>.heading>.title {
      color: var(--color-text-light);
      font-family: var(--second-family);
      font-size: 4.875rem;
      font-weight: 600;
      line-height: 1;

      @media (max-width: 896px) {
        font-size: 3.75rem;
      }
    }

    >.inner>.box>.text {
      position: relative;
      flex: 1;
      padding-left: min(2.8125vw, 45px);
      margin-left: min(2.8125vw, 45px);
      color: var(--color-text-light);
      line-height: 2;

      @media (max-width: 896px) {
        padding-left: 0;
        margin-left: 0;
        line-height: 1.75;
      }
    }

    >.inner>.box>.text::before {
      @media (min-width: 897px) {
        position: absolute;
        top: 50%;
        left: 1px;
        display: block;
        width: 1px;
        height: 57px;
        background-color: var(--color-stroke-brandsubtle);
        content: "";
        transform: translateY(-50%);
      }
    }
  }

  /* link-area */
  .link-area {
    display: flex;
    width: 100%;
    max-width: var(--max-width-xl);
    justify-content: space-between;
    margin: 0 auto;
    padding-block: 97px 70px;

    @media (max-width: 896px) {
      flex-direction: column;
      justify-content: flex-start;
      gap: 35px;
      padding-block: 40px 31px;
    }

    >.logo {
      width: 220px;
      margin-top: 3px;

      @media (max-width: 896px) {
        width: 173px;
        margin: 0 auto;
      }
    }

    >.logo>a {
      display: block;
    }

    >.logo>a>img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  /* nav-links */
  .nav-links {
    display: flex;
    width: 492px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
    gap: 28px 20px;

    @media (max-width: 896px) {
      width: 100%;
      justify-content: flex-start;
      gap: 0 20px;
    }

    >li {
      width: 100px;
      text-align: right;

      @media (max-width: 896px) {
        width: calc(50% - 10px);
        border-bottom: 1px solid var(--color-stroke-dark);
        text-align: left;
      }
    }

    >li:first-child {
      @media (min-width: 897px) {
        width: auto;
        padding-right: 48px;
      }
    }

    >li>a {
      padding-bottom: 3px;
      background-image: linear-gradient(90deg, var(--color-text-light), var(--color-text-light));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      color: var(--color-text-light);
      font-size: 0.875rem;
      font-weight: 500;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;

      @media (max-width: 896px) {
        display: block;
        padding: 16px 0 18px;
      }
    }

    >li>a:hover {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }
  }

  /* policies-links */
  .policies-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 51px;
    gap: 51px;

    @media (max-width: 896px) {
      justify-content: flex-start;
      margin-top: 29px;
      gap: 14px 52px;
    }

    >li {
      position: relative;
    }

    >li:not(:first-child)::before {
      position: absolute;
      top: 9px;
      left: -26px;
      display: block;
      width: 1px;
      height: 14px;
      background-color: var(--color-text-subtle);
      content: "";
    }

    >li>a {
      padding-bottom: 3px;
      background-image: linear-gradient(90deg, var(--color-text-subtle), var(--color-text-subtle));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      color: var(--color-text-subtle);
      font-size: 0.75rem;
      font-weight: 500;
      text-align: right;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    }

    >li>a:hover {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }
  }
}

@layer layouts {
  header {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 90px;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-gray-100);
    padding-inline: min(1.875vw, 30px) min(1.25vw, 20px);

    @media (max-width: 896px) {
      height: 60px;
      padding-inline: 20px 0;
    }

    >.box {
      flex-shrink: 0;

      @media (max-width: 896px) {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
      }
    }

    >.box>.logo {
      display: block;
      width: min(15.16949vw, 179px);

      @media (max-width: 896px) {
        width: 102px;
      }
    }

    >.box>.logo>img {
      display: block;
      width: 100%;
      height: auto;
    }

    >.box>button {
      position: relative;
      z-index: 7;
      display: block;
      width: 66px;
      height: 60px;
      padding: 0;
      border: none;
      margin: 0;
      margin-left: auto;
      cursor: pointer;
      text-decoration: none;
      transition: all 300ms ease-out;

      @media (min-width: 897px) {
        display: none;
      }
    }

    >.box>button:hover {
      opacity: 0.7;
    }

    >.box>button[aria-expanded="true"]>span::before {
      width: 32px;
    }

    >.box>button[aria-expanded="true"]>span:nth-child(1)::before {
      top: 28px;
      transform: rotate(26deg);
    }

    >.box>button[aria-expanded="true"]>span:nth-child(2)::before {
      opacity: 0;
    }

    >.box>button[aria-expanded="true"]>span:nth-child(3)::before {
      top: 28px;
      transform: rotate(-26deg);
    }

    >.box>button>span {
      display: flex;
      width: 30px;
      height: 2px;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }

    >.box>button>span::before {
      position: absolute;
      right: 0;
      left: 0;
      width: 30px;
      height: 2px;
      border-radius: 2px;
      margin: 0 auto;
      background-color: var(--color-stroke-brand);
      content: "";
      transition: all 300ms ease-out;
    }

    >.box>button>span:nth-child(1) {
      &::before {
        top: 21px;
      }
    }

    >.box>button>span:nth-child(2) {
      &::before {
        top: 28px;
      }
    }

    >.box>button>span:nth-child(3) {
      &::before {
        top: 35px;
      }
    }

    >.overlay {
      position: fixed;
      z-index: -1;
      width: 100vw;
      height: calc(100vh - 90px);
      background-color: rgb(17 17 17 / 90%);
      inset: 90px 0 0;
      opacity: 0;
      transition: all 300ms ease-out;
      visibility: hidden;

      &[aria-hidden="true"] {
        opacity: 1;
        visibility: visible;
      }

      @media (max-width: 896px) {
        display: none;
      }
    }
  }
}