@charset "UTF-8";

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

  /* color */
  --black: #141414;
  --primary: #1b57af;
  --secondary: #549fd6;

  /* 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: 'Crimson Pro', serif;
  --yuji: 'Yuji Boku', serif;

  /* icon */
  --arrow: url('data:image/svg+xml,<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 4L12 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 7L12 4L8 1" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --icon-dl: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.99998 10.2791L3.7559 7.03591L4.4049 6.37591L6.54165 8.51266V0.583496H7.45831V8.51266L9.59415 6.37683L10.2441 7.03591L6.99998 10.2791ZM2.06465 13.4168C1.64237 13.4168 1.29006 13.2757 1.00773 12.9933C0.725396 12.711 0.583924 12.3584 0.583313 11.9355V9.71441H1.49998V11.9355C1.49998 12.0767 1.55865 12.2062 1.67598 12.3242C1.79331 12.4421 1.92256 12.5008 2.06373 12.5002H11.9362C12.0768 12.5002 12.206 12.4415 12.324 12.3242C12.4419 12.2068 12.5006 12.0773 12.5 11.9355V9.71441H13.4166V11.9355C13.4166 12.3578 13.2755 12.7101 12.9931 12.9924C12.7108 13.2747 12.3582 13.4162 11.9353 13.4168H2.06465Z" 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);

  /* ハーフ・レディング */
  --leading-trim: calc((1em - 1lh) / 2);
}
@supports not (top: 1lh) {
  :root {
    --leading-trim: 0px; /* `px`などの単位が必要 */
  }
}

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

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

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

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

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

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

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

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

  .bg-b {
    background-color: #eef8fb;
  }
  .bg-g {
    background-color: #f5f5f5;
  }

  /* =====================
    header
  ===================== */
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 84px;
    padding-inline: 80px 40px;
    background-color: #fff;
    z-index: 20;
    display: block grid;
    grid-template-columns: 1fr auto auto;
    justify-content: space-between;
    transition: all 250ms ease 0s;

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

    /* ==== logo ==== */
    .logo {
      inline-size: fit-content;
      pointer-events: auto;
      display: block grid;
      place-content: center;

      @media (width <= 768px) {
        .picture {
          & img {
            width: calc((100 / 390) * 166 * 1vw);
          }
        }
      }
    }

    /* ==== nav ==== */
    .nav {
      display: block grid;
      grid-template-columns: auto auto auto;
      justify-items: end;
      align-items: center;
      pointer-events: auto;
      padding-block: 12px;
      column-gap: 8px;

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

      & > ul {
        display: block flex;
        gap: 40px;
        block-size: fit-content;
        margin-inline-end: 40px;
        font-weight: 500;
        letter-spacing: 0.48px;

        & > a {
          display: block grid;
          padding-block: 13px;
        }
      }
      /* ==== contact ==== */
      .unit {
        position: relative;
        border-radius: 4px;
        color: #fff;

        .u-hover {
          display: block flow;
          inline-size: 100%;
          block-size: 100%;
          padding-inline: 20px;
          font-weight: 500;
          padding-block: 4px;
          letter-spacing: 0.4px;
        }

        &[data-id='1'] {
          background: #549fd6;
        }
        &[data-id='2'] {
          background: #1b57af;
        }
      }
      @media (width <= 768px) {
        display: none;
      }
    }
  }

  /* =====================
    footer
  ===================== */
  .footer {
    position: relative;
    margin-block-start: 120px;

    &::before {
      content: '';
      display: block flow;
      inline-size: calc(100% - 80px);
      block-size: 100%;
      background-image: linear-gradient(to top, #1b57af 0%, #549fd6);
      border-radius: 0px 20px 20px 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

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

      &::before {
        inline-size: calc(100% - calc((100 / 390) * 16 * 1vw));
        border-radius: 0 calc((100 / 390) * 20 * 1vw) calc((100 / 390) * 20 * 1vw) 0;
      }
    }

    .u-inner {
      padding-inline: 80px 160px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 40 * 1vw);
      }

      /* =====================
        aside
      ===================== */
      .aside {
        border-bottom: solid 1px #dbdbdb;
        display: block flex;
        justify-content: space-between;
        align-items: flex-end;
        padding-block-start: 48px;
        padding-block-end: 56px;

        @media (width <= 768px) {
          padding-block-start: calc((100 / 390) * 33 * 1vw);
          padding-block-end: calc((100 / 390) * 30 * 1vw);
          flex-direction: column;
          align-items: center;
          gap: calc((100 / 390) * 27 * 1vw);
        }

        .title_wrap {
          .title {
            font-family: var(--title);
            font-size: 56px;
            color: #fff;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 48 * 1vw);
              text-align: center;
            }
          }
          .description {
            color: #fff;
            margin-block-start: 8px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 4 * 1vw);
              text-align: center;
            }
          }
        }

        .content_wrap {
          display: block flex;
          gap: 88px;
          margin-block-end: 9px;

          @media (width <= 768px) {
            flex-direction: column;
            align-items: center;
            gap: calc((100 / 390) * 26 * 1vw);
            margin-block-end: calc((100 / 390) * 9 * 1vw);
          }

          .unit {
            .u-hover {
              display: block flow;
              inline-size: 100%;
              block-size: 100%;
            }
          }

          .unit[data-name='tel'] {
            font-family: var(--title);
            font-size: 40px;
            color: #fff;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 38 * 1vw);
              line-height: 1;
              margin-inline-start: calc((100 / 390) * 10 * 1vw);
            }

            .u-hover {
              position: relative;
              display: block flex;
              gap: 21px;
              align-items: center;

              &::before {
                content: '';
                display: block flow;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                background-image: url('../img/_common/icon_tel.svg');
                inline-size: 24px;
                block-size: 41.1px;
              }

              @media (width <= 768px) {
                gap: calc((100 / 390) * 18 * 1vw);

                &::before {
                  inline-size: calc((100 / 390) * 21 * 1vw);
                  block-size: calc((100 / 390) * 36 * 1vw);
                }
              }
            }
          }

          .unit[data-name='mail'] {
            inline-size: 88px;
            aspect-ratio: 1/1;
            border-radius: 50rem;
            border: solid 1px #fff;

            @media (width <= 768px) {
              inline-size: calc((100 / 390) * 72 * 1vw);
            }
            .u-hover {
              position: relative;
              display: block grid;
              place-content: center;
              inline-size: 100%;
              block-size: 100%;

              &::before {
                content: '';
                display: block flow;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                background-image: url('../img/_common/icon_mail.svg');
                inline-size: 24px;
                block-size: 20px;
              }

              @media (width <= 768px) {
                &::before {
                  inline-size: calc((100 / 390) * 20 * 1vw);
                  block-size: calc((100 / 390) * 16 * 1vw);
                }
              }
            }
          }
        }
      }

      /* =====================
        footer
      ===================== */
      .footer_wrap {
        padding-block-start: 55px;
        padding-block-end: 67px;
        display: block grid;
        align-items: end;
        grid-template-columns: 1fr max-content max-content;
        row-gap: 96px;
        column-gap: 72px;

        @media (width <= 768px) {
          padding-block-start: calc((100 / 390) * 32 * 1vw);
          padding-block-end: calc((100 / 390) * 40 * 1vw);
          grid-template-columns: 1fr;
          column-gap: 0;
          row-gap: 0;
        }

        .main-nav {
          grid-area: 1/1/2/4;

          & > ul {
            display: block flex;
            justify-content: flex-end;
            gap: 72px;
            font-weight: 500;
            letter-spacing: 0.48px;
            color: #fff;

            @media (width <= 768px) {
              letter-spacing: calc((100 / 390) * 0.42 * 1vw);
              gap: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 50 * 1vw);
              display: block grid;
              grid-template-columns: repeat(3, calc((100 / 390) * 75 * 1vw));
              justify-content: center;
              justify-items: center;
            }
          }
        }

        .footer_info {
          grid-area: 2/1/3/2;

          @media (width <= 768px) {
            grid-area: 2/1/3/2;
            margin-block-start: calc((100 / 390) * 58 * 1vw);

            .picture {
              & img {
                inline-size: calc((100 / 390) * 200 * 1vw);
              }
            }
          }

          .address {
            font-size: 13px;
            color: #fff;
            margin-block-start: 24px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 12 * 1vw);
              margin-block-start: calc((100 / 390) * 17 * 1vw);
            }
          }
        }

        .pdf-btn {
          grid-area: 2/2/3/3;

          @media (width <= 768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 27 * 1vw);
          }

          .u-anchor {
            background-image: none;
            background-color: #fff;
            padding: 16px 23px;
            margin-block-end: 5px;

            @media (width <= 768px) {
              padding: calc((100 / 390) * 14 * 1vw) calc((100 / 390) * 21 * 1vw);
              margin-block-end: 0;
            }

            .btn-txt {
              font-size: 15px;
              font-weight: 500;
              color: #1b57af;
              gap: 14px;

              &::before {
                mask-image: var(--icon-dl);
                background-color: #fff;
                inline-size: 14px;
                aspect-ratio: 1 / 1;
                right: 7px;
              }
              &::after {
                inline-size: 28px;
                background-image: linear-gradient(to top, #1b57af 0%, #549fd6 100%);
              }

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

                &::before {
                  inline-size: calc((100 / 390) * 12 * 1vw);
                  right: calc((100 / 390) * 7 * 1vw);
                }
                &::after {
                  inline-size: calc((100 / 390) * 26 * 1vw);
                }
              }
            }
          }
        }

        .foot {
          grid-area: 2/3/3/4;

          @media (width <= 768px) {
            grid-area: 4/1/5/2;
            margin-block-start: calc((100 / 390) * 33 * 1vw);
          }

          .sub-nav {
            & > ul {
              display: block flex;
              justify-content: flex-end;
              gap: 24px;
              font-size: 13px;
              font-weight: 500;
              color: #dbdbdb;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 12 * 1vw);
                gap: calc((100 / 390) * 24 * 1vw);
                justify-content: flex-start;
              }
            }
          }

          .copyright {
            display: block flow;
            margin-block-start: 24px;
            font-family: var(--title);
            font-size: 14px;
            font-weight: 500;
            text-align: right;
            color: #fff;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 17 * 1vw);
              font-size: calc((100 / 390) * 14 * 1vw);
              text-align: left;
            }
          }
        }
      }
    }

    /* =====================
      to-top
    ===================== */
    .to-top {
      position: absolute;
      right: 29px;
      bottom: 48px;
      z-index: 19;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/_common/to-top.png');
      inline-size: 20px;
      block-size: 104px;
      transition: all 250ms ease 0s;

      @media (width <= 768px) {
        background-image: url('../img/_common/to-top_2x.png');
        inline-size: calc((100 / 390) * 20 * 1vw);
        block-size: calc((100 / 390) * 88 * 1vw);
        right: calc((100 / 390) * 39 * 1vw);
        bottom: calc((100 / 390) * 44 * 1vw);
      }
    }
  }

  /* =====================
  sp-nav
  ===================== */
  @media (width > 768px) {
    .sp-menu,
    .sp-nav {
      display: none;
    }
  }
  @media (width <= 768px) {
    /* ==== ボタン ==== */
    .sp-menu {
      position: fixed;
      top: calc((100 / 390) * 16 * 1vw);
      right: calc((100 / 390) * 16 * 1vw);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/_common/menu.png');
      inline-size: calc((100 / 390) * 48 * 1vw);
      block-size: calc((100 / 390) * 48 * 1vw);
      z-index: 220;
    }
    /* ==== 閉じる ==== */
    .menu-on {
      .sp-menu {
        position: fixed;
        background-image: url('../img/_common/close.png');
      }
    }

    .sp-nav {
      position: fixed;
      inset: 0;
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: all 350ms var(--easeOutExpo) 0s;

      /* ==== inner ==== */
      .sp-nav-inner {
        position: relative;
        max-block-size: 100dvh;
        .sp-menu-head {
          position: relative;
          inline-size: 100%;
          min-height: calc((100 / 390) * 80 * 1vw);
          background-color: #fff;
          top: 0;
          left: 0;

          /* ==== logo ==== */
          .logo {
            inline-size: fit-content;
            block-size: calc((100 / 390) * 80 * 1vw);
            pointer-events: auto;
            display: block grid;
            place-content: center;
            margin-inline-start: calc((100 / 390) * 16 * 1vw);
            & img {
              width: calc((100 / 390) * 166 * 1vw);
            }
          }
        }
        .body {
          color: #fff;
          block-size: calc(100dvh - calc((100 / 390) * 80 * 1vw));
          padding-block: calc((100 / 390) * 44 * 1vw) calc((100 / 390) * 56 * 1vw);
          padding-inline: calc((100 / 390) * 24 * 1vw);
          background-image: linear-gradient(to top, #1b57af 0%, #549fd6 100%);
          overflow-y: auto;

          .nav {
            & > ul {
              & > li {
                & > a {
                  position: relative;
                  display: block flow;
                  inline-size: calc((100 / 390) * 148 * 1vw);
                  font-size: calc((100 / 390) * 16 * 1vw);
                  letter-spacing: calc((100 / 390) * 0.48 * 1vw);
                  font-weight: 500;
                  padding-block: calc((100 / 390) * 18 * 1vw);

                  &::before {
                    content: '';
                    inline-size: calc((100 / 390) * 25 * 1vw);
                    aspect-ratio: 1 / 1;
                    background-color: #fff;
                    border-radius: 50rem;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 0;
                  }

                  &::after {
                    content: '';
                    inline-size: calc((100 / 390) * 13 * 1vw);
                    aspect-ratio: 13 / 8;
                    mask-repeat: no-repeat;
                    mask-size: contain;
                    mask-position: center;
                    mask-image: var(--arrow);
                    background-color: #1b57af;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: calc((100 / 390) * 6 * 1vw);
                  }
                }
              }
            }
          }
        }

        .pdf-btn {
          margin-block-start: calc((100 / 390) * 79 * 1vw);

          .u-anchor {
            background-image: none;
            background-color: #fff;
            padding: calc((100 / 390) * 14 * 1vw) calc((100 / 390) * 21 * 1vw);
            margin-block-end: 0;

            .btn-txt {
              font-size: calc((100 / 390) * 14 * 1vw);
              font-weight: 500;
              color: #1b57af;
              gap: calc((100 / 390) * 14 * 1vw);

              &::before {
                mask-image: var(--icon-dl);
                background-color: #fff;
                inline-size: calc((100 / 390) * 12 * 1vw);
                right: calc((100 / 390) * 7 * 1vw);
                aspect-ratio: 1 / 1;
              }
              &::after {
                inline-size: calc((100 / 390) * 26 * 1vw);
                background-image: linear-gradient(to top, #1b57af 0%, #549fd6 100%);
              }
            }
          }
        }

        .foot {
          margin-block-start: calc((100 / 390) * 33 * 1vw);

          .sub-nav {
            & > ul {
              display: block flex;
              justify-content: flex-start;
              gap: calc((100 / 390) * 24 * 1vw);
              font-size: calc((100 / 390) * 12 * 1vw);
              font-weight: 500;
              color: #dbdbdb;
            }
          }

          .copyright {
            display: block flow;
            font-family: var(--title);
            font-size: calc((100 / 390) * 14 * 1vw);
            text-align: left;
            font-weight: 500;
            color: #fff;
            margin-block-start: calc((100 / 390) * 17 * 1vw);
          }
        }
      }
    }
    /* Menu on */
    .menu-on {
      .sp-nav {
        pointer-events: auto;
        opacity: 1;
        transition: all 350ms var(--easeOutExpo) 0s;
      }
    }
  }
}