@charset "UTF-8";

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

  /* color */
  --black: #222222;
  --primary: #d91a1a;
  --secondary: #3f3f3f;

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

  /* icon */
  --arrow: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.38647L6.98706 8L6.38817 7.32367L9.91497 4.54106H0V3.51691H9.89279L6.38817 0.676328L6.98706 0L12 3.6715V4.38647Z" fill="currentColor"/></svg>');
  --mail: url('data:image/svg+xml,<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.2 18C1.595 18 1.07727 17.7799 0.6468 17.3396C0.216333 16.8994 0.000733333 16.3695 0 15.75V2.25C0 1.63125 0.2156 1.10175 0.6468 0.6615C1.078 0.22125 1.59573 0.00075 2.2 0H19.8C20.405 0 20.9231 0.2205 21.3543 0.6615C21.7855 1.1025 22.0007 1.632 22 2.25V15.75C22 16.3687 21.7848 16.8986 21.3543 17.3396C20.9238 17.7806 20.4057 18.0007 19.8 18H2.2ZM19.8 4.5L11.5775 9.75938C11.4858 9.81563 11.3898 9.858 11.2893 9.8865C11.1888 9.915 11.0924 9.92887 11 9.92812C10.9076 9.92737 10.8115 9.9135 10.7118 9.8865C10.6121 9.8595 10.5156 9.81713 10.4225 9.75938L2.2 4.5V15.75H19.8V4.5ZM11 7.875L19.8 2.25H2.2L11 7.875ZM2.2 4.78125V3.12188V3.15V3.1365V4.78125Z" fill="white"/></svg>');
  --circle: url('data:image/svg+xml,<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="3" stroke="url(#paint0_linear_4675_1676)" stroke-width="2"/><defs><linearGradient id="paint0_linear_4675_1676" x1="2" y1="1" x2="6.5" y2="7.5" gradientUnits="userSpaceOnUse"><stop stop-color="%23B8B8B8"/><stop offset="1" stop-color="%23D91A1A"/></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);
}

/* =====================
  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;
    color: var(--black);

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

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

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

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

  /* p */
  .description {
    line-height: 2;
  }
  .bg {
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/_common/bg.png');

    @media (width <= 768px) {
      background-image: url('../img/_common/bg_2x.png');
    }
  }
  .bg-g {
    background-color: #3f3f3f;
    color: #fff;
  }
  .bg-rg {
    background-color: #f6f6f6;
  }

  /* =====================
    header
  ===================== */
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 80px;
    margin-inline: 40px;
    margin-block-start: 24px;
    border-radius: 50rem;
    padding-inline: 32px;
    background-color: rgba(255, 255, 255, 0.8);
    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) * 66 * 1vw);
      padding-inline: calc((100 / 390) * 22 * 1vw) calc((100 / 390) * 16 * 1vw);
      margin-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: 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) * 191 * 1vw);
          }
        }
      }
    }

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

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

      & > ul {
        display: block flex;
        gap: 32px;
        block-size: fit-content;
        margin-inline-end: 40px;
        font-family: var(--yumin);
        font-weight: 600;

        & > a {
          display: block grid;
          padding-block: 13px;
        }
      }
      /* ==== contact ==== */
      .unit {
        position: relative;
        inline-size: 48px;
        aspect-ratio: 1/1;
        border-radius: 50rem;
        background-color: var(--primary);

        .u-hover {
          display: block grid;
          place-content: center;
          inline-size: 100%;
          block-size: 100%;

          &::after {
            content: '';
            inline-size: 22px;
            aspect-ratio: 1 / 1;
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;
            mask-image: var(--mail);
            background-color: #fff;
          }
        }
      }
      @media (width <= 768px) {
        display: none;
      }
    }
  }

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

    /* =====================
        aside
      ===================== */
    .aside {
      position: relative;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/_common/contact_bg.png');
      inline-size: 100%;
      block-size: 436px;
      padding-block: 91px;

      @media (width <= 768px) {
        background-image: url('../img/_common/contact_bg_2x.png');
        block-size: calc((100 / 390) * 365 * 1vw);
        padding-block: calc((100 / 390) * 62 * 1vw);
      }

      .description {
        text-align: center;
        color: #fff;
        margin-block-start: 35px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 23 * 1vw);
          font-size: calc((100 / 390) * 16 * 1vw);
        }
      }
      .u-anchor {
        margin-inline: auto;
        margin-block-start: 54px;

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

    /* =====================
      footer_wrap
    ===================== */
    .footer_wrap {
      padding-block-start: 74px;
      padding-block-end: 40px;
      display: block grid;
      align-items: start;
      grid-template-columns: max-content auto;
      row-gap: 32px;
      column-gap: 450px;
      padding-inline-end: 40px;

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

      /* ==== nav ==== */
      .main-nav {
        grid-area: 1/2/2/3;
        display: block flex;
        justify-content: flex-end;
        gap: 64px;

        @media (width <= 768px) {
          grid-area: 1/1/2/2;
          display: block grid;
          grid-template-columns: repeat(2, 1fr);
          gap: calc((100 / 390) * 26 * 1vw) 0;
        }

        .nav_unit {
          .head {
            display: block flow;
            font-family: var(--yumin);
            font-weight: 600;

            & + .head {
              margin-block-start: 26px;
            }

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 15 * 1vw);
              & + .head {
                margin-block-start: calc((100 / 390) * 18 * 1vw);
              }
            }
          }
          .middle {
            margin-block-start: 7px;
            & > li {
              font-family: var(--yumin);
              font-weight: 600;
              font-size: 13px;
              color: #656565;
              .u-hover {
                display: block flex;
                align-items: center;
                gap: 8px;
                padding-block: 3px;
                &::before {
                  content: '';
                  display: block flow;
                  inline-size: 8px;
                  block-size: 1px;
                  background-color: #656565;
                }
              }
            }

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 7 * 1vw);
              & > li {
                font-size: calc((100 / 390) * 12 * 1vw);
                .u-hover {
                  gap: calc((100 / 390) * 8 * 1vw);
                  &::before {
                    inline-size: calc((100 / 390) * 8 * 1vw);
                  }
                }
              }
            }
          }
        }
      }

      /* ==== 会社情報 ==== */
      .footer_info {
        grid-area: 1/1/2/2;
        margin-block-start: 23px;

        .picture {
          & img {
            inline-size: 246px;
          }
        }
        @media (width <= 768px) {
          grid-area: 3/1/4/2;
          margin-block-start: calc((100 / 390) * 48 * 1vw);

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

        .address {
          font-family: var(--yumin);
          font-weight: 600;
          font-size: 12px;
          margin-block-start: 27px;

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

      .pdf-btn {
        grid-area: 2/2/3/3;
        margin-block-start: 20px;

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

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

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

        .sub-nav {
          & > ul {
            display: block flex;
            gap: 24px;
            font-family: var(--yumin);
            font-size: 13px;
            font-weight: 600;
            color: #656565;

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

        .copyright {
          display: block flow;
          margin-block-start: 21px;
          font-family: var(--yumin);
          font-size: 13px;
          font-weight: 600;
          color: #656565;

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

  /* =====================
  sp-nav
  ===================== */
  @media (width > 768px) {
    .sp-menu,
    .sp-nav {
      display: none;
    }
  }
  @media (width <= 768px) {
    /* ==== ボタン ==== */
    .sp-menu {
      position: fixed;
      top: calc((100 / 390) * 26 * 1vw);
      right: calc((100 / 390) * 32 * 1vw);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/_common/hamburger.png');
      inline-size: calc((100 / 390) * 46 * 1vw);
      block-size: calc((100 / 390) * 46 * 1vw);
      z-index: 220;
    }
    /* ==== 閉じる ==== */
    .menu-on {
      .sp-menu {
        top: calc((100 / 390) * 24 * 1vw);
        right: calc((100 / 390) * 16 * 1vw);
        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;
        }
        .body {
          color: #fff;
          block-size: 100dvh;
          padding-block: calc((100 / 390) * 104 * 1vw) calc((100 / 390) * 40 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          background-color: rgba(0, 0, 0, 0.9);
          overflow-y: auto;

          .main-nav {
            display: block grid;
            grid-template-columns: repeat(2, 1fr);
            gap: calc((100 / 390) * 27 * 1vw) 0;

            .head {
              display: block flow;
              font-family: var(--yumin);
              font-weight: 600;
              font-size: calc((100 / 390) * 17 * 1vw);
              & + .head {
                margin-block-start: calc((100 / 390) * 22 * 1vw);
              }
              &[data-id='top'] {
                grid-area: 1/1/2/3;
                margin-block-end: calc((100 / 390) * 8 * 1vw);
              }
            }
            .middle {
              margin-block-start: calc((100 / 390) * 8 * 1vw);
              & > li {
                font-family: var(--yumin);
                font-size: calc((100 / 390) * 14 * 1vw);
                font-weight: 600;
                .u-hover {
                  display: block flex;
                  align-items: center;
                  padding-block: calc((100 / 390) * 6 * 1vw);
                  gap: calc((100 / 390) * 8 * 1vw);
                  &::before {
                    content: '';
                    display: block flow;
                    block-size: 1px;
                    background-color: #fff;
                    inline-size: calc((100 / 390) * 8 * 1vw);
                  }
                }
              }
            }
          }
        }

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

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

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

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