@charset "UTF-8";

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

  /* color */
  --black: #111;
  --primary: #172f49;
  --secondary: #98afe8;

  /* 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;
  --alatsi: 'Alatsi', sans-serif;
  --oswald: 'Oswald', sans-serif;
  --zen: 'Zen Old Mincho', serif;
  --outfit: 'Outfit', sans-serif;
  --barlow: 'Barlow', sans-serif;
  --yuji: 'Yuji Syuku', serif;

  /* icon */
  --icon-arrow: url('data:image/svg+xml,<svg width="11" height="19" viewBox="0 0 11 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.66667 17.6667L10 9.33333L1.66667 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --icon-mail: url('data:image/svg+xml,<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.89286 0.0012207C2.12562 0.0012207 1.38981 0.302924 0.847298 0.83996C0.304782 1.377 0 2.10537 0 2.86486V11.1376C0 11.8971 0.304782 12.6254 0.847298 13.1625C1.38981 13.6995 2.12562 14.0012 2.89286 14.0012H15.1071C15.8744 14.0012 16.6102 13.6995 17.1527 13.1625C17.6952 12.6254 18 11.8971 18 11.1376V2.86486C18 2.10537 17.6952 1.377 17.1527 0.83996C16.6102 0.302924 15.8744 0.0012207 15.1071 0.0012207H2.89286ZM16.7143 3.43949L9 7.55104L1.28571 3.43949V2.86486C1.28571 2.44292 1.45504 2.03827 1.75644 1.73991C2.05783 1.44156 2.46662 1.27395 2.89286 1.27395H15.1071C15.5334 1.27395 15.9422 1.44156 16.2436 1.73991C16.545 2.03827 16.7143 2.44292 16.7143 2.86486V3.43949ZM1.28571 4.88468L8.69529 8.83458C8.78894 8.88449 8.89364 8.91061 9 8.91061C9.10636 8.91061 9.21106 8.88449 9.30472 8.83458L16.7143 4.88468V11.1376C16.7143 11.5595 16.545 11.9642 16.2436 12.2625C15.9422 12.5609 15.5334 12.7285 15.1071 12.7285H2.89286C2.46662 12.7285 2.05783 12.5609 1.75644 12.2625C1.45504 11.9642 1.28571 11.5595 1.28571 11.1376V4.88468Z" fill="currentColor"/></svg>');
  --icon-link: url('data:image/svg+xml,<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_218_864)"><path d="M13.0001 10.1239H2.90552V0.00244141H13.0001V10.1239ZM4.10991 8.83714H11.8081V1.28918H4.09749V8.8504L4.10991 8.83714Z" fill="white"/><path d="M10.0946 13.0028H0V2.88135H3.30277V4.15482H1.20439V11.716H8.90258V9.8191H10.0946V13.0028Z" fill="white"/></g><defs><clipPath id="clip0_218_864"><rect width="13" height="13" fill="white" transform="translate(0 0.00244141)"/></clipPath></defs></svg>');
  --icon-dl: url('data:image/svg+xml,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 14.0024H12.5V12.3554H0.5V14.0024ZM12.5 4.94362H9.07143V0.00244141H3.92857V4.94362H0.5L6.5 10.7083L12.5 4.94362Z" fill="currentColor"/></svg>');
  --icon-breadcrumb: url('data:image/svg+xml,<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.76367 3.55322V4.16846L0.902344 7.27393V6.58838L7.01953 3.86377L0.902344 1.12744V0.447754L7.76367 3.55322Z" fill="currentColor"/></svg>');
  --icon-home: url('data:image/svg+xml,<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.7309 5.90413L6.82435 0.133859C6.78182 0.0922 6.73131 0.0591494 6.6757 0.0365991C6.62009 0.0140488 6.56047 0.00244141 6.50027 0.00244141C6.44006 0.00244141 6.38045 0.0140488 6.32484 0.0365991C6.26923 0.0591494 6.21872 0.0922 6.17619 0.133859L0.26959 5.90413C0.0975112 6.07236 0 6.30087 0 6.53919C0 7.03407 0.411555 7.43642 0.917752 7.43642H1.5401V11.5538C1.5401 11.802 1.74516 12.0024 1.99898 12.0024H5.58252V8.86216H7.18858V12.0024H11.0016C11.2554 12.0024 11.4604 11.802 11.4604 11.5538V7.43642H12.0828C12.3266 7.43642 12.5603 7.34249 12.7324 7.17286C13.0894 6.82238 13.0894 6.2546 12.7309 5.90413Z" fill="currentColor"/></svg>');
  --btn-arrow: url('data:image/svg+xml,<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.13112 7L4.1803 4L1.13112 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></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(--yugo);
    font-size: 16px;
    line-height: 1.63;
    color: var(--black);
    background-repeat: repeat;
    background: url('../img/_common/bg.svg');

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

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

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

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

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

    @media (width <= 768px) {
      line-height: 1.77;
    }
  }

  /* =====================
    header
  ===================== */
  .header {
    position: relative;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 130px;
    padding-inline: 30px;
    z-index: 20;
    display: block grid;
    grid-template-columns: 1fr auto auto;
    justify-content: space-between;
    transition: all 250ms ease 0s;

    @media (width <= 768px) {
      display: block flex;
      min-block-size: calc((100 / 750) * 120 * 1vw);
      padding-block: calc((100 / 750) * 10 * 1vw);
      padding-inline: calc((100 / 750) * 10 * 1vw);
    }

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

      @media (width <= 768px) {
        margin-inline-start: calc((100 / 750) * 10 * 1vw);
        .picture {
          & img {
            width: calc((100 / 750) * 328 * 1vw);
          }
        }
      }
      .top-logo {
        display: none;
      }
    }

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

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

      & > ul {
        display: block flex;
        gap: 34px;
        block-size: fit-content;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        padding-inline: 40px;
        border-radius: 50rem;
        backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, 0.7);
        & > li {
          & > a {
            display: block grid;
            padding-block: calc(16px + var(--leading-trim));
          }
        }
      }
      /* ==== contact ==== */
      .unit {
        color: #fff;
        border-radius: 50rem;
        background-color: #172f49;
        .u-hover {
          display: block flow;
          padding-inline: 40px;
          padding-block: calc(16px + var(--leading-trim));
          font-weight: bold;
          & > span {
            position: relative;
            display: block flex;
            align-items: center;
            gap: 8px;
            font-family: var(--oswald);
            font-size: 17px;
            font-weight: 600;
            &::before {
              content: '';
              inline-size: 18px;
              aspect-ratio: 18 / 14;
              mask-repeat: no-repeat;
              mask-size: contain;
              mask-position: center;
              mask-image: var(--icon-mail);
              background-color: #fff;
            }
          }
        }
      }
    }
  }

  /* =====================
    footer
  ===================== */
  .footer {
    position: relative;

    .aside {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/_common/aside_bg.png');
      inline-size: 100%;
      min-block-size: 199px;
      padding-block: 46px;

      @media (width <= 768px) {
        background-image: url('../img/_common/aside_bg_sp.png');
        min-block-size: calc((100 / 750) * 678 * 1vw);
        padding-block: calc((100 / 750) * 92 * 1vw);
      }

      .inner {
        inline-size: 1300px;
        margin-inline: auto;
        padding-inline: 90px 30px;
        display: block grid;
        grid-template-columns: max-content auto max-content;
        align-items: center;

        @media (width <= 768px) {
          inline-size: 100%;
          padding-inline: calc((100 / 750) * 40 * 1vw);
          grid-template-columns: auto;
        }

        .description {
          inline-size: 440px;
          color: #fff;
          margin-inline-start: 95px;

          @media (width <= 768px) {
            line-height: 1.77;
            inline-size: 100%;
            margin-inline-start: 0;
            margin-block-start: calc((100 / 750) * 44 * 1vw);
            padding-right: calc((100 / 750) * 60 * 1vw);
          }
        }
        .anchor {
          position: relative;
          inline-size: 90px;
          aspect-ratio: 1/1;
          border-radius: 50rem;
          background-color: #fff;
          &::after {
            content: '';
            display: block flow;
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;
            mask-image: var(--icon-mail);
            background-color: var(--primary);
            inline-size: 21px;
            aspect-ratio: 21/16.5;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          @media (width <= 768px) {
            margin-inline: auto;
            margin-block-start: calc((100 / 750) * 46 * 1vw);
            inline-size: calc((100 / 750) * 150 * 1vw);

            &::after {
              inline-size: calc((100 / 750) * 35 * 1vw);
            }
          }
        }
      }
    }

    .footer_inner {
      position: relative;
      padding-block: 60px 16px;
      padding-inline: 60px;
      display: block grid;
      grid-template-columns: repeat(2, auto);
      grid-template-rows: repeat(4, max-content);
      column-gap: 60px;
      background-color: #fff;

      @media (width <= 768px) {
        padding-block: calc((100 / 750) * 78 * 1vw) calc((100 / 750) * 34 * 1vw);
        padding-inline: calc((100 / 750) * 40 * 1vw);
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, max-content);
      }

      .logo {
        grid-column: 1/2;
        grid-row: 1/2;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 3/4;
          margin-block-start: calc((100 / 750) * 114 * 1vw);
        }
        .picture {
          @media (width <= 768px) {
            display: block flow;
            text-align: center;
            & img {
              inline-size: calc((100 / 750) * 398.8 * 1vw);
            }
          }
        }
      }

      .address {
        grid-column: 1/2;
        grid-row: 2/3;
        font-size: 14px;
        margin-block-start: 24px;

        @media (width <= 768px) {
          font-size: calc((100 / 750) * 26 * 1vw);
          grid-column: 1/2;
          grid-row: 4/5;
          margin-block-start: calc((100 / 750) * 49 * 1vw);
          padding-inline: calc((100 / 750) * 40 * 1vw);
          line-height: 1.77;
        }
        .company-name {
          font-weight: bold;
        }
      }
      .pdf-btn {
        grid-column: 1/2;
        grid-row: 3/4;
        display: block flow;
        margin-block-start: 40px;
        border-radius: 50rem;
        border: solid 1px #eac1c3;
        inline-size: fit-content;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 5/6;
          margin-block-start: calc((100 / 750) * 45 * 1vw);
          margin-inline: auto;
        }
        & > a {
          position: relative;
          display: block flow;
          padding-inline: 26px;
          padding-block: calc(12px + var(--leading-trim));

          & span {
            position: relative;
            font-size: 13px;
            font-weight: 500;
            line-height: 2;
            color: #583f3f;
            display: block flex;
            align-items: center;
            gap: 8px;
            &::after {
              content: '';
              display: block flow;
              mask-repeat: no-repeat;
              mask-size: contain;
              mask-position: center;
              mask-image: var(--icon-dl);
              background-color: var(--primary);
              inline-size: 12px;
              aspect-ratio: 12/14;
            }
          }

          @media (width <= 768px) {
            padding-inline: calc((100 / 750) * 52 * 1vw);
            padding-block: calc((100 / 750) * 15 * 1vw);

            & span {
              font-size: calc((100 / 750) * 26 * 1vw);
              gap: calc((100 / 750) * 21 * 1vw);

              &::after {
                inline-size: calc((100 / 750) * 24 * 1vw);
              }
            }
          }
        }
      }
      .main-nav {
        grid-column: 2/3;
        grid-row: 1/4;
        margin-block-start: 20px;
        margin-inline-end: 30px;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 1/2;
          margin-block-start: calc((100 / 750) * 20 * 1vw);
          margin-inline-end: 0;
        }
        & ul {
          display: block flex;
          justify-content: flex-end;
          gap: 40px;
          font-size: 15px;
          font-weight: bold;

          @media (width <= 768px) {
            display: block grid;
            grid-template-columns: 1fr;
            justify-content: start;
            gap: 0;
            font-size: calc((100 / 750) * 30 * 1vw);

            & > li {
              & > a {
                display: block flow;
                inline-size: 100%;
                block-size: 100%;
                padding-inline: calc((100 / 750) * 40 * 1vw);
                padding-block: calc((100 / 750) * 10 * 1vw);
              }
            }
          }
        }
        /* ==== SP Menu Toggle ==== */
        @media (width <= 768px) {
          .acc-wrap {
            display: block grid;
            grid-template-columns: 83% auto;

            .u-hover {
              grid-column: 1/2;
            }
            .acc-toggle-btn {
              grid-column: 2/3;
              position: relative;
              display: block;
              cursor: pointer;
            }
            .acc-toggle-btn::before,
            .acc-toggle-btn::after {
              content: '';
              position: absolute;
              display: inline-block;
              background: #111;
              vertical-align: middle;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              transition: 0.5s ease-out;
            }
            .acc-toggle-btn::before {
              width: calc((100 / 750) * 37 * 1vw);
              height: calc((100 / 750) * 2 * 1vw);
            }
            .acc-toggle-btn::after {
              width: calc((100 / 750) * 2 * 1vw);
              height: calc((100 / 750) * 37 * 1vw);
            }

            .acc-detail {
              grid-column: 1/3;
              display: grid;
              grid-template-rows: 0fr;
              transition: grid-template-rows 0.5s ease-out;
              & ul {
                overflow: hidden;
                margin-left: calc((100 / 750) * 39 * 1vw);
                & li {
                  font-size: calc((100 / 750) * 26 * 1vw);
                  & a {
                    position: relative;
                    inline-size: 100%;
                    padding-block: calc((100 / 750) * 10 * 1vw);
                    padding-inline: calc((100 / 750) * 28 * 1vw);
                    display: block flex;
                    gap: calc((100 / 750) * 8 * 1vw);
                    align-items: center;
                    &::before {
                      content: '-';
                      display: inline-block;
                    }
                  }
                }
              }
            }
            &.open {
              .acc-detail {
                grid-template-rows: 1fr;
              }
            }
            &.open {
              .acc-toggle-btn::before,
              .acc-toggle-btn::after {
                transform: translate(-50%, -50%) rotate(45deg);
              }
            }
          }
        }
      }
      .sub-nav {
        grid-column: 2/3;
        grid-row: 4/5;
        margin-block-start: 49px;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 2/3;
          margin-block-start: calc((100 / 750) * 84 * 1vw);
        }

        & ul {
          display: block flex;
          justify-content: flex-end;
          gap: 30px;
          font-size: 13px;
          font-weight: 500;
          color: #666;

          @media (width <= 768px) {
            font-size: calc((100 / 750) * 24 * 1vw);
            justify-content: space-between;
            gap: calc((100 / 750) * 30 * 1vw);
            padding-inline: calc((100 / 750) * 16 * 1vw);
          }
        }
      }
      .sub {
        grid-column: 1/2;
        grid-row: 4/5;
        margin-block-start: 49px;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 6/7;
          margin-block-start: calc((100 / 750) * 106 * 1vw);
          text-align: center;
        }
        & small {
          font-size: 12px;
          font-weight: 500;
          line-height: 2.83;
          letter-spacing: 1.2px;
          color: #888;

          @media (width <= 768px) {
            font-size: calc((100 / 750) * 24 * 1vw);
            letter-spacing: calc((100 / 750) * 2.4 * 1vw);
          }
        }
      }
    }
  }

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

    @media (width <= 768px) {
      display: none;
    }
  }
  /* =====================
  sp-nav
  ===================== */
  @media (width > 768px) {
    .sp-menu,
    .sp-nav {
      display: none;
    }
  }
  @media (width <= 768px) {
    /* ==== ボタン ==== */
    .sp-menu {
      position: absolute;
      top: calc((100 / 750) * 10 * 1vw);
      right: calc((100 / 750) * 10 * 1vw);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/_common/menu.png');
      inline-size: calc((100 / 750) * 100 * 1vw);
      block-size: calc((100 / 750) * 100 * 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;
      translate: 100% 0;
      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 / 750) * 120 * 1vw);
          background-color: #fff;
          top: 0;
          left: 0;

          /* ==== logo ==== */
          .logo {
            inline-size: fit-content;
            block-size: calc((100 / 750) * 120 * 1vw);
            pointer-events: auto;
            display: block grid;
            place-content: center;
            margin-inline-start: calc((100 / 750) * 20 * 1vw);
            .picture {
              & img {
                width: calc((100 / 750) * 328 * 1vw);
              }
            }
          }
        }
        .body {
          background-color: rgba(23, 47, 73, 0.95);
          color: #fff;
          block-size: calc(100dvh - calc((100 / 750) * 120 * 1vw));
          padding-block: calc((100 / 750) * 92 * 1vw) calc((100 / 750) * 120 * 1vw);
          overflow-y: auto;
          .nav {
            & > ul {
              & > li {
                & > a {
                  display: block flow;
                  inline-size: 100%;
                  padding-block: calc((100 / 750) * 20 * 1vw);
                  padding-inline: calc((100 / 750) * 80 * 1vw);
                  font-size: calc((100 / 750) * 30 * 1vw);
                  font-weight: bold;
                }
              }
            }
            .acc-wrap {
              display: block grid;
              grid-template-columns: 74% auto;

              .u-hover {
                grid-column: 1/2;
              }
              .acc-toggle-btn {
                grid-column: 2/3;
                position: relative;
                display: block;
                cursor: pointer;
              }
              .acc-toggle-btn::before,
              .acc-toggle-btn::after {
                content: '';
                position: absolute;
                display: inline-block;
                background: #fff;
                vertical-align: middle;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: 0.5s ease-out;
              }
              .acc-toggle-btn::before {
                width: calc((100 / 750) * 37 * 1vw);
                height: calc((100 / 750) * 2 * 1vw);
              }
              .acc-toggle-btn::after {
                width: calc((100 / 750) * 2 * 1vw);
                height: calc((100 / 750) * 37 * 1vw);
              }

              .acc-detail {
                grid-column: 1/3;
                display: grid;
                grid-template-rows: 0fr;
                transition: grid-template-rows 0.5s ease-out;
                & ul {
                  overflow: hidden;
                  margin-left: calc((100 / 750) * 39 * 1vw);
                  & li {
                    font-size: calc((100 / 750) * 26 * 1vw);
                    & a {
                      position: relative;
                      inline-size: 100%;
                      padding-block: calc((100 / 750) * 13 * 1vw);
                      padding-inline: calc((100 / 750) * 80 * 1vw);
                      display: block flex;
                      gap: calc((100 / 750) * 8 * 1vw);
                      align-items: center;
                      line-height: 1;
                      &::before {
                        content: '-';
                        display: inline-block;
                      }
                    }
                  }
                }
              }
              &.open {
                .acc-detail {
                  grid-template-rows: 1fr;
                }
              }
              &.open {
                .acc-toggle-btn::before,
                .acc-toggle-btn::after {
                  transform: translate(-50%, -50%) rotate(45deg);
                }
              }
            }
          }
          .sub-nav {
            margin-block-start: calc((100 / 750) * 76 * 1vw);
            & ul {
              display: block flex;
              justify-content: center;
              gap: calc((100 / 750) * 50 * 1vw);
              font-size: calc((100 / 750) * 24 * 1vw);
              font-weight: 500;
            }
          }
        }
      }
    }
    /* Menu on */
    .menu-on {
      .sp-nav {
        pointer-events: auto;
        translate: 0 0;
        opacity: 1;
        transition: all 350ms var(--easeOutExpo) 0s;
      }
    }
  }
}