@charset "UTF-8";

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

  /* color */
  --black: #332727;
  --primary: #559359;
  --secondary: #f3e8d8;

  /* 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: 'DM Sans', 'DMSans', sans-serif;
  --name: 'Shippori Mincho', serif;

  /* icon */
  --icon-arrow: url('data:image/svg+xml,<svg width="42" height="9" viewBox="0 0 42 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 8.38818H40L30.1449 0.388184" stroke="currentColor"/></svg>');
  --icon-dl: url('data:image/svg+xml,<svg width="30" height="24" viewBox="0 0 30 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1748 15.6568C14.37 15.8521 14.6866 15.8521 14.8819 15.6568L18.0639 12.4749C18.2591 12.2796 18.2591 11.963 18.0639 11.7678C17.8686 11.5725 17.552 11.5725 17.3567 11.7678L14.5283 14.5962L11.6999 11.7678C11.5046 11.5725 11.188 11.5725 10.9928 11.7678C10.7975 11.963 10.7975 12.2796 10.9928 12.4749L14.1748 15.6568ZM14.5283 0L14.0283 2.18557e-08L14.0283 15.3033L14.5283 15.3033L15.0283 15.3033L15.0283 -2.18557e-08L14.5283 0Z" fill="currentColor"/><path d="M0.5 17.853V22.9541H28.556V17.853" stroke="currentColor"/></svg>');
  --icon-link: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.2402 0H9.67332C9.25371 0 8.91349 0.340221 8.91349 0.759837C8.91349 1.17945 9.25371 1.51967 9.67332 1.51967H13.4061L6.61015 8.31572C6.31335 8.61221 6.31335 9.09354 6.61015 9.39004C6.7587 9.53859 6.95284 9.61271 7.14729 9.61271C7.34175 9.61271 7.5362 9.53859 7.68444 9.39004L14.4804 2.59368V6.32681C14.4804 6.74642 14.8206 7.08664 15.2402 7.08664C15.6598 7.08664 16 6.74642 16 6.32681V0.759837C16 0.340221 15.6598 0 15.2402 0Z" fill="currentColor"/><path d="M13.5341 8.09335C13.1145 8.09335 12.7743 8.43357 12.7743 8.85319V14.4806H1.51964V3.22574H7.14698C7.56659 3.22574 7.90681 2.88552 7.90681 2.4659C7.90681 2.04629 7.56659 1.70607 7.14698 1.70607H0.759822C0.340214 1.70607 0 2.04629 0 2.4659V15.2402C0 15.6598 0.340214 16 0.759822 16H13.5341C13.9538 16 14.294 15.6598 14.294 15.2402V8.85288C14.294 8.43326 13.9538 8.09335 13.5341 8.09335Z" 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);
}

/* =====================
  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) * 15 * 1vw);
    }
  }

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

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

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

  /* =====================
    header
  ===================== */
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 100px;
    padding-inline: 40px;
    padding-block: 10px;
    box-shadow: 0 2px 15px 0 rgba(131, 131, 131, 0.15);
    background-color: #fff;
    z-index: 20;
    display: block grid;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    transition: all 250ms ease 0s;

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

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

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

    /* ==== nav ==== */
    .nav {
      pointer-events: auto;
      padding-block: 10px;

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

      & > ul {
        text-align: center;
        font-weight: 500;
        display: block grid;
        align-items: center;
        grid-template-columns: repeat(6, 140px);
        block-size: 100%;

        & > li {
          position: relative;
          block-size: inherit;
          border-right: 1px solid #f3e8d8;
          .u-hover {
            display: block grid;
            place-content: center;
            inline-size: 100%;
            block-size: inherit;
          }
          &:last-child {
            border-right: none;
          }
          &.is-current {
            position: relative;
            pointer-events: none;
            &::after {
              content: '';
              display: block flow;
              inline-size: 8px;
              aspect-ratio: 1/1;
              border-radius: 50rem;
              background-color: var(--primary);
              position: absolute;
              bottom: 5px;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }
      @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%;
      min-block-size: 270px;
      padding-block: 40px;

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

        .u-inner {
          padding-inline: calc((100 / 390) * 40 * 1vw);
        }
      }
      .aside_wrap {
        border: 1px solid #fff;
        padding-inline: 80px;
        padding-block: 40px;
        display: block grid;
        grid-template-columns: max-content auto max-content;
        align-items: center;
        gap: 64px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 40 * 1vw);
          padding-block: calc((100 / 390) * 64 * 1vw);
          grid-template-columns: 1fr;
          gap: calc((100 / 390) * 32 * 1vw);

          .u-h2-title {
            text-align: center;
            margin-inline: auto;
          }
        }

        .description {
          color: #fff;

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

        .contact-btn {
          inline-size: 110px;
          block-size: 110px;
          border: 1px solid #fff;
          border-radius: 50rem;
          display: block grid;
          place-content: center;
          transition: all 0.5s ease;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 56 * 1vw);
            inline-size: calc((100 / 390) * 90 * 1vw);
            block-size: calc((100 / 390) * 90 * 1vw);
            margin-inline: auto;
            & > svg {
              inline-size: calc((100 / 390) * 38.33 * 1vw);
              aspect-ratio: 40/29;
            }
          }
          @media (any-hover: hover) {
            &:hover {
              background-color: rgba(255, 255, 255, 0.7);
              & > svg {
                & > path {
                  fill: var(--black);
                  transition: all 0.5s ease;
                }
              }
            }
          }
        }
      }
    }

    /* =====================
      footer_wrap
    ===================== */
    .footer_wrap {
      padding-block-start: 60px;
      padding-block-end: 26px;
      display: block grid;
      align-items: start;
      grid-template-columns: max-content auto;
      row-gap: 47px;

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

      /* ==== nav ==== */
      .main-nav {
        grid-area: 1/1/2/3;

        @media (width <= 768px) {
          grid-area: 1/1/2/2;
        }
        & > ul {
          text-align: center;
          font-weight: 500;
          display: block grid;
          align-items: center;
          grid-template-columns: repeat(6, 140px);
          justify-content: center;
          block-size: 100%;

          @media (width <= 768px) {
            grid-template-columns: repeat(2, 1fr);
            border-top: 1px solid #f3e8d8;
          }

          & > li {
            position: relative;
            border-right: 1px solid #f3e8d8;
            .u-hover {
              display: block grid;
              place-content: center;
              inline-size: 100%;
              block-size: inherit;
              padding-block: 10px;
            }
            &:last-child {
              border-right: none;
            }

            @media (width <= 768px) {
              border-bottom: 1px solid #f3e8d8;
              &:nth-child(2n) {
                border-right: none;
              }
              .u-hover {
                padding-block: calc((100 / 390) * 35 * 1vw);
              }
            }
          }
        }
      }

      /* ==== 会社情報 ==== */
      .footer_info {
        grid-area: 2/1/3/3;
        margin-block-start: 23px;
        display: block grid;
        grid-template-columns: repeat(3, max-content);
        justify-content: center;
        gap: 64px;

        .logo {
          & img {
            inline-size: 170px;
          }

          @media (width <= 768px) {
            & img {
              inline-size: calc((100 / 390) * 140 * 1vw);
            }
          }
        }
        @media (width <= 768px) {
          grid-area: 2/1/3/2;
          margin-block-start: calc((100 / 390) * 64 * 1vw);
          grid-template-columns: 1fr;
          gap: calc((100 / 390) * 32 * 1vw);
          justify-items: center;
        }

        .address {
          font-size: 15px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 14 * 1vw);
            text-align: center;
          }
          .sns-link {
            .u-hover {
              position: relative;
              font-size: 14px;
              display: block flex;
              gap: 17px;
              margin-block-start: 16px;
              &::before {
                content: '';
                display: block flow;
                inline-size: 33px;
                block-size: 33px;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                background-image: url('../img/_common/icon_insta.svg');
              }
            }

            @media (width <= 768px) {
              .u-hover {
                font-size: calc((100 / 390) * 13 * 1vw);
                gap: calc((100 / 390) * 15 * 1vw);
                justify-content: center;
                margin-block-start: calc((100 / 390) * 32 * 1vw);
                &::before {
                  inline-size: calc((100 / 390) * 29 * 1vw);
                  block-size: calc((100 / 390) * 29 * 1vw);
                }
              }
            }
          }
        }

        .pdf-btn {
          .u-anchor {
            .u-arrow {
              &::after {
                content: '';
                display: block flow;
                inline-size: 30px;
                block-size: 24px;
                mask-image: var(--icon-dl);
              }
            }
            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 14 * 1vw);
              .u-arrow {
                &::after {
                  inline-size: calc((100 / 390) * 28.6 * 1vw);
                  block-size: calc((100 / 390) * 22.95 * 1vw);
                }
              }
            }
          }
        }
      }

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

        @media (width <= 768px) {
          grid-area: 3/1/4/2;
        }

        .sub-nav {
          & > ul {
            display: block flex;
            justify-content: center;
            gap: 62px;
            font-size: 13px;
            color: #797979;
            margin-block-start: 11px;

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

        .copyright {
          display: block flow;
          margin-block-start: 16px;
          padding-block-start: 16px;
          font-size: 13px;
          text-align: center;
          color: #848484;
          border-top: 1px solid #f3e8d8;

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

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

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

      /* ==== inner ==== */
      .sp-nav-inner {
        position: relative;
        max-block-size: 100dvh;

        .body {
          color: #fff;
          block-size: 100dvh;
          padding-block: calc((100 / 390) * 40 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          background-color: rgba(51, 39, 39, 0.7);
          backdrop-filter: blur(10px);
          overflow-y: scroll;
          margin-block-start: calc((100 / 390) * 70 * 1vw);

          .main-nav {
            gap: calc((100 / 390) * 27 * 1vw) 0;
            & > ul {
              display: block grid;
              grid-template-columns: repeat(2, 1fr);
              font-size: calc((100 / 390) * 15 * 1vw);
              font-weight: 500;
              line-height: 1.4;
              color: #fff;
              border-top: 1px solid #f3e8d8;
              & li {
                border-bottom: 1px solid #f3e8d8;
                border-right: 1px solid #f3e8d8;
                .u-hover {
                  display: block grid;
                  place-content: center;
                  inline-size: 100%;
                  block-size: inherit;
                  padding-block: calc((100 / 390) * 38 * 1vw);
                }
                &:nth-child(2n) {
                  border-right: none;
                }
              }
            }
          }
        }
        .sub-nav {
          margin-block-start: calc((100 / 390) * 112 * 1vw);
          & > ul {
            display: block flex;
            justify-content: center;
            gap: calc((100 / 390) * 62 * 1vw);
            font-size: calc((100 / 390) * 12 * 1vw);
            color: #f3e8d8;
          }
        }
      }
    }
  }
  /* Menu on */
  .menu-on {
    .sp-nav {
      pointer-events: auto;
      translate: 0 0;
      opacity: 1;
      transition: all 350ms var(--easeOutExpo) 0s;
    }
  }
}