@charset "UTF-8";

/*-------------------------
  var - 変数設定
-------------------------*/
:root {
  --color-primary: #509d3e;
  --color-primary-dark: #377E26;
  --color-secondary: #BDD00C;
  --color-secondary-dark: #96C11A;
  --color-sub-orange: #F4B10D;
  --color-white: #ffffff;
  --color-txt: #433627;
  --color-base: #f9f9f7;
  --gradient-radical: radial-gradient(closest-side,
      rgba(205, 240, 100, 1) 0%,
      rgba(237, 248, 128, 1) 100%);
  --gradient-linear: linear-gradient(90deg,
      rgba(189, 244, 173, 1) 0%,
      rgba(140, 222, 163, 1) 100%);

  --font-family-zenmaru: "Zen Maru Gothic", sans-serif;
  --font-base-size: 1.0625rem;
  --font-base-line-height: 165%;
  --font-base-letter-spacing: 0.03em;
  --font-base-weight: 500;
  --font-ttl-size: 2.375rem;
  --font-ttl-weight: 700;
  --font-ttl-line-height: 100%;

  --box-shadow-blue: 0rem 0rem 0.5625rem 0.5rem rgba(33, 36, 38, 0.74);
  --box-shadow-green-light: 0rem 0rem 0.625rem 0rem rgba(76, 78, 74, 0.2);
}

/*-------------------------
  Base - ベーススタイル
-------------------------*/
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

* {
  box-sizing: border-box !important;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--color-txt);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-feature-settings: "palt" on;
  font-optical-sizing: auto;
  -webkit-font-kerning: auto;
  font-kerning: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/*-------------------------
  layout - レイアウトスタイル
-------------------------*/
/* 固定レイアウト */
.wrapper {
  display: flex;
  flex-basis: 100%;
  align-items: flex-start;
  justify-content: right;
}

.nav-toggle {
  display: none;
}

.side {
  position: fixed;
  top: 0;
  left: 0;
  width: 18.75rem;
  min-width: 300px;
  height: 100dvh;
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-green-light);
  overflow-y: auto;
  z-index: 900;

  & .header {
    width: 100%;
    padding: 1.875rem 1.5rem;

    & .logo {
      width: 100%;
      height: auto;
      margin-bottom: 3.33dvh;

      & a {
        display: inline-block;
        width: auto;
        height: auto;
      }
    }

    & .link {
      margin-bottom: 2rem;

      & a {
        position: relative;
        margin-bottom: 1rem;
        padding: 1.375rem 0;
        width: 100%;

        &:last-of-type {
          margin-bottom: 0;
        }

        &::before,
        &::after {
          transition: all 0.35s ease-in;
        }

        &:hover {
          &::before {
            width: 300px;
            height: 300px;
            opacity: 1;
          }
        }
      }

      & .material-symbols-rounded {
        position: absolute;
        right: -30%;
        font-size: 1.35em;
      }
    }

    & .nav {
      margin-bottom: 4.85vh;

      & ul li {
        margin-bottom: 1rem;
        line-height: 1.5;

        & a {
          display: inline-block;
          font-weight: 700;
          letter-spacing: var(--font-base-letter-spacing);
          transition: padding-left 0.25s ease-in-out;

          &:hover {
            padding-left: 12px;
          }
        }

        & .en {
          display: inline-flex;
          align-items: center;
          justify-content: flex-start;
          -moz-column-gap: 0.35rem;
          column-gap: 0.35rem;
          width: 100%;
          font-family: var(--font-family-zenmaru);
          color: var(--color-primary);
          font-size: 0.875rem;
          font-weight: 700;
          text-transform: uppercase;


          & .material-symbols-rounded {
            font-size: 0.6em;
          }
        }

        & .jp {
          font-family: var(--font-family-zenmaru);
          font-size: 0.9375rem;
          font-weight: 700;
        }
      }
    }
  }

  & .phone {
    margin-bottom: 2rem;
    font-family: var(--font-family-zenmaru);
    text-align: center;

    &::before,
    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 11px;
      background-image: url(../img/components/obj_line.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }

    &::before {
      margin-bottom: 0.725rem;
    }

    &::after {
      margin-top: 0.75rem;
    }

    & .name {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.35rem;
      color: var(--color-txt);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1;
      vertical-align: baseline;
      -moz-column-gap: 1rem;
      column-gap: 1rem;
      width: 100%;
      padding: 0 1.5rem;

      &::before,
      &::after {
        content: "";
        display: inline-block;
        flex-grow: 1;
        width: 100%;
        min-width: 26px;
        height: 1px;
        background-color: var(--color-txt);
      }

      & em {
        flex-shrink: 0;
      }
    }

    & .num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -moz-column-gap: 0.25rem;
      column-gap: 0.25rem;
      width: 100%;
      margin-bottom: 0.625rem;
      color: var(--color-primary);
      font-size: 2rem;
      font-weight: 700;
      line-height: 1;
      vertical-align: baseline;

      & .material-symbols-rounded {
        font-size: 0.9375em;
        transform: translateY(2.5px);
      }
    }

    & .hours {
      font-size: 0.9375rem;
      font-weight: var(--font-base-weight);
      letter-spacing: 0.1em;
    }
  }

  & .copyright {
    font-family: var(--font-family-zenmaru);
    color: var(--color-txt);
    font-size: 0.875rem;
    font-weight: var(--font-base-weight);
    text-align: center;
  }
}

.contents {
  width: calc(100% - 300px);

  & .main {
    width: 100%;
    padding: 0;

    & .logo {
      display: none;
    }

    & .sec {
      width: 100%;
      padding: 0 6.8%;
      margin-bottom: 4.5rem;

      & .heading2 {
        color: var(--color-txt);
        font-family: var(--font-family-zenmaru);
        font-size: 1.875rem;
        font-weight: 700;

        &.on-icon {
          margin-bottom: 1.75rem;
          text-align: center;

          &::before {
            content: "";
            display: block;
            margin: 0 auto 0.5rem;
            width: 4.5rem;
            height: 4.5rem;
            line-height: 1;
            background: url(../img/components/icon-suzuran.png) no-repeat center center;
            background-size: contain;
            aspect-ratio: 1 / 1;
          }
        }
      }

      & .heading3 {
        color: var(--color-txt);
        font-family: var(--font-family-zenmaru);
        font-size: 1.275rem;
        font-weight: 700;

        & em {
          display: inline-block;
          width: 100%;
          font-size: 1.75rem;
        }
      }

      &.is-bg {
        padding-left: 0;
        padding-right: 0;
      }
    }

    & .inquiry {
      width: 100%;
      margin-bottom: 0;
      padding: 2.75rem 0;
      background: url(../img/components/bg-inquiry.png) no-repeat center bottom;
      background-size: cover;

      & .box {
        position: relative;
        width: 100%;
        max-width: 929px;
        margin: 0 auto;
        padding: 2.5rem 0;
        font-family: var(--font-family-zenmaru);
        color: var(--color-txt);
        text-align: center;
        border: 1px solid #FFF;
        background: rgba(255, 255, 255, 0.45);
        border-radius: 24px;
      }

      & .heading2 {
        margin-bottom: 1.25rem;
        font-size: 1.875rem;
        line-height: 1;
      }

      & .txt {
        margin-bottom: 0.5rem;
        font-size: 1.0625rem;
        font-weight: var(--font-base-weight);

        & span {
          display: inline;
        }
      }

      & .phone {
        &::before {
          content: "";
          display: block;
          width: 4.1875rem;
          height: 6.25rem;
          position: absolute;
          bottom: 1.25rem;
          left: 1.25rem;
          background: url(../img/components/obj_clover-left.png) no-repeat center center;
          background-size: contain;
        }

        &::after {
          content: "";
          display: block;
          width: 4.1875rem;
          height: 6.25rem;
          position: absolute;
          top: 1.25rem;
          right: 1.25rem;
          background: url(../img/components/obj_clover-right.png) no-repeat center center;
          background-size: contain;
        }

        & .num {
          width: 100%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
          margin-bottom: 0.25rem;
          color: var(--color-primary);
          font-size: 2.8125rem;
          font-weight: 700;
          letter-spacing: var(--font-base-letter-spacing);

          & .material-symbols-rounded {
            font-size: 0.9375em;
            transform: translateY(2.5px);
          }
        }

        & .hours {
          font-size: 1.125rem;
          font-weight: var(--font-base-weight);
          letter-spacing: 0.15em;
        }
      }
    }
  }

  & .footer {
    position: relative;
    width: 100%;
    padding: 3.5rem 6.8%;
    font-family: var(--font-family-zenmaru);
    letter-spacing: var(--font-base-letter-spacing);

    & .footer-main {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 2.5rem;
      margin-bottom: 2rem;
      padding-bottom: 1.85rem;
      border-bottom: 3px dotted var(--color-white);

      & .info {
        min-width: 310px;

        & .logo {
          margin-bottom: 1.75rem;
        }

        & .name {
          margin-bottom: 1.125rem;
          color: var(--color-white);
          font-size: 1.125rem;
          font-weight: 700;
        }

        & .address {
          margin-bottom: 3rem;
          color: var(--color-white);
          font-size: 1rem;
          font-weight: 500;
          line-height: 150%;
        }
      }

      & .link-gmap {
        & .btn {
          position: relative;
          width: 100%;
          text-align: center;
        }
      }

      & .map {
        width: 100%;
        height: auto;
        border-radius: 12px;
        overflow: hidden;
        line-height: 1;

        & iframe {
          width: 100%;
          height: 100%;
        }
      }
    }

    & .footer-link {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 2.5rem;

      & nav {
        min-width: 18.75rem;

        & ul li {
          margin-bottom: 1rem;

          & a {
            display: inline-flex;
            align-items: center;
            -moz-column-gap: 0.35rem;
            column-gap: 0.35rem;
            color: var(--color-white);
            font-size: var(--font-base-size);
            font-weight: 700;
            line-height: 1;
            transition: padding-left 0.25s ease-in-out;

            &:hover {
              padding-left: 12px;
            }

            & .material-symbols-rounded {
              font-size: 0.7em;
            }
          }
        }
      }

      & .link {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        gap: 1.65rem;

        & a {
          position: relative;
          width: 100%;

          & .material-symbols-rounded {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            font-size: 1.65em;
          }
        }
      }
    }

    & .copyright {
      color: var(--color-white);
      font-size: 0.875rem;
      font-family: var(--font-family-zenmaru);
      font-weight: 500;
      text-align: right;
      text-transform: uppercase;
      letter-spacing: var(--font-base-letter-spacing);
    }
  }
}

@media screen and (max-width: 1512px) {
  .contents {
    & .main {
      & .inquiry {
        padding-left: 6.8% !important;
        padding-right: 6.8% !important;
      }
    }
  }
}

@media screen and (max-width: 1279px) {
  .wrapper {
    display: block;
  }

  .nav-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -moz-row-gap: 0.5rem;
    row-gap: 0.5rem;
    width: 77px;
    height: 77px;
    text-align: center;
    background-color: var(--color-primary);
    border: 1px solid var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    z-index: 999;
    aspect-ratio: 1 / 1;

    & span {
      display: inline-block;
      width: 100%;
      max-width: 34px;
      height: 2px;
      background-color: var(--color-white);
      transform-origin: center;
      transition: transform 0.35s ease-in-out;
    }

    & p {
      font-family: var(--font-family-zenmaru);
      color: var(--color-white);
      font-weight: 700;
      line-height: 1;
      text-transform: uppercase;
    }

    &.is-open {
      & span {
        transform-origin: center;

        &:first-of-type {
          transform: rotate(30deg) translate(3px, 5px);
        }

        &:last-of-type {
          transform: rotate(-30deg) translate(1px, -5px);
        }
      }
    }
  }

  .side {
    width: 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.35s, display 0.5s;
    transition-behavior: allow-discrete;

    &.is-open {
      display: block;
      opacity: 1;

      @starting-style {
        opacity: 0;
      }
    }

    & .header {
      padding: calc(76px + 3vh) 2.8125rem 1rem;

      & .logo {
        width: 100%;
        text-align: center;
      }

      & .nav {
        & ul {
          & li {
            margin-bottom: 0.975rem;

            & .en {
              font-size: 1.10rem;
            }

            & .jp {
              font-size: 1.2rem;
            }
          }
        }
      }

      & .phone {

        &::before,
        &::after {
          background-repeat: repeat-x;
        }
      }

      & .copyright {
        display: none;
      }
    }
  }

  .contents {
    width: 100%;
  }
}

@media screen and (max-width: 1279px) and (min-width: 821px) {
  .side {
    & .header {
      max-width: calc(768px - 2.8125rem);
      margin: auto;
    }
  }
}

@media screen and (max-width: 1279px) and (min-width: 768px) {
  & .nav-toggle {
    top: 2.8125rem;
    right: 2.8125rem;
  }

  .side {
    & .header {
      & .link {
        display: grid;
        grid-template-columns: 1fr 1fr;
        -moz-column-gap: 1.65rem;
        column-gap: 1.65rem;

        & a {
          margin-bottom: 0;
        }
      }
    }
  }
}

@media screen and (max-width: 1079px) {
  .side {
    & .header {
      & .nav {
        & ul li {
          & a {
            &:hover {
              padding-left: 0;
            }
          }
        }
      }
    }
  }

  & .contents {
    & .footer {
      & .footer-main {
        display: block;

        & .info {
          min-width: none;

          & .logo {
            text-align: center;
            margin-bottom: 1.25rem;

            & img {
              max-width: 250px;
            }
          }

          & .txt {
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            margin: 0 auto 2rem;

            & .name {
              width: -webkit-fit-content;
              width: -moz-fit-content;
              width: fit-content;
              margin-bottom: 1rem;
              line-height: 1;
            }

            & .address {
              width: -webkit-fit-content;
              width: -moz-fit-content;
              width: fit-content;
              margin-bottom: 0;
              line-height: 1;
            }
          }
        }

        & .link-gmap {
          width: 100%;
          text-align: center;

          & .btn {
            width: 100%;
            max-width: 22.5rem;
          }
        }

        & .map {
          height: 100%;
          min-height: -webkit-fit-content;
          min-height: -moz-fit-content;
          min-height: fit-content;
          margin-bottom: 1.5rem;

          & iframe {
            height: 100%;
            min-height: 350px;
          }
        }
      }

      & .footer-link {
        display: block;
        margin-bottom: 1.5rem;

        & .nav {
          margin-bottom: 1rem;

          & ul {
            display: grid;
            grid-template-columns: 1fr 1fr;
            -moz-column-gap: 1.65rem;
            column-gap: 1.65rem;
          }
        }
      }

      & .copyright {
        font-size: 1.1rem;
        text-align: center;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .side {
    & .header {
      & .logo {
        margin-bottom: 1rem;
      }
    }
  }

  .contents {
    & .main {
      & .logo {
        display: block;
        background-color: var(--color-white);
        padding: 2.5rem 0 1rem 1.5rem;

        & a {
          display: inline-block;
          width: 100%;
          max-width: 50.89vw;
        }
      }

      & .sec {
        & .heading2 {
          font-size: 1.5rem;

          &.on-icon {
            margin-bottom: 2.1875rem;

            &::before {
              width: 56px;
              height: 56px;
            }
          }
        }
      }

      & .inquiry {
        padding: 1.25rem 1rem !important;
        background-position: center center;

        & .box {
          max-width: 100%;
          padding: 3.125rem 1rem;

          & .heading2 {
            font-size: 1.75rem;
          }

          & .txt {
            & span {
              display: inline-block;
              width: 100%;
              margin-bottom: 0.5rem;
              line-height: 1;
            }
          }

          & .phone {

            &::before {
              left: 0.75rem;
              bottom: 0.75rem;
              width: 50px;
              height: 73px;
            }

            &::after {
              top: 0.75rem;
              right: 0.75rem;
              width: 50px;
              height: 73px;
            }

            & .num {
              font-size: 2rem;
            }

            & .hours {
              font-size: 1rem;
            }
          }
        }
      }
    }

    & .footer {
      padding: 2.25rem 1rem 2rem;

      & .footer-main {
        margin-bottom: 2rem;
        padding-bottom: 1.85rem;

        & .info {
          & .logo {
            & img {
              max-width: 230px;
            }
          }
        }

        & .map {
          margin-bottom: 1rem;

          & iframe {
            min-height: 240px;
            max-height: -webkit-fit-content;
            max-height: -moz-fit-content;
            max-height: fit-content;
          }
        }
      }

      & .footer-link {
        margin-bottom: 3rem;

        & .nav {
          margin-bottom: 2.5rem;

          & ul {
            grid-template-columns: 1fr;
            row-gap: 1.65rem;
            padding-left: 1rem;

            & li {
              margin-bottom: 0;

              & a {
                &:hover {
                  padding-left: 0;
                }
              }
            }
          }
        }

        & .link {
          flex-wrap: wrap;
          gap: 1.25rem;
        }
      }

      & .copyright {
        font-size: 1.2rem;
      }
    }
  }
}

@media screen and (max-width: 375px) {
  .side {
    & .header {
      padding-left: 1.75rem;
      padding-right: 1.75rem;

      & .logo {
        width: 100%;
        margin-bottom: 1rem;
        text-align: center;
      }
    }
  }
}

/* 汎用レイアウト */

.flex {
  display: flex;

  &.align-left {
    align-items: flex-start;
  }

  &.align-right {
    align-items: flex-end;
  }

  &.align-center {
    align-items: center;
  }

  &.align-stretch {
    align-items: stretch;
  }

  &.justify-between {
    justify-content: space-between;
  }

  &.justify-center {
    justify-content: center;
  }
}

.grid {
  display: grid;

  &.col2 {
    grid-template-columns: 1fr 1fr;
  }
}

.discription-list {
  & .item {
    display: grid;
    grid-template-columns: 1fr 3fr;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    width: 100%;
    padding: 1rem;
    border-bottom: 2px solid var(--color-white);
    align-items: flex-start;

    & dt {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-family-zenmaru);
      color: var(--color-primary);
      font-size: 1.0625rem;
      font-weight: 700;
    }

    & dd {
      width: 100%;
      font-family: var(--font-family-zenmaru);
      font-size: 1.0625rem;
      font-weight: var(--font-base-weight);

      & span {
        display: block;
        margin-bottom: 0.5rem;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .discription-list {
    border-top: 2px solid var(--color-white);

    & .item {
      grid-template-columns: 1fr;
      gap: 0.5rem;

      & dt {
        justify-content: flex-start;
        font-size: 1rem;
      }

      & dd {
        font-size: 1rem;

        & span {
          margin-bottom: 0.25rem;
        }
      }
    }
  }

}

/*-------------------------
  modules - モジュールスタイル
-------------------------*/

.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-base {
  background-color: var(--color-base);
}

.bg-white {
  background-color: var(--color-white);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.375rem;
  width: auto;
  height: auto;
  font-family: var(--font-family-zenmaru);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: var(--font-base-letter-spacing);
  line-height: 1;
  vertical-align: baseline;
  border-radius: 12px;
  outline-width: 2px;
  outline-offset: 2px;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  overflow: hidden;

  & .txt {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 50;

    & .material-symbols-rounded {
      font-size: 1em;
    }
  }

  &.bg-green {
    color: var(--color-white);
    background-color: var(--color-primary);

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      border-radius: 50%;
      background-color: var(--color-primary-dark);
      opacity: 0;
      z-index: 1;
      transition: all 0.3s ease-in;
    }

    &:hover {
      &::before {
        width: 500px;
        height: 500px;
        opacity: 1;
      }
    }
  }

  &.bg-lightgreen {
    color: var(--color-white);
    background-color: var(--color-secondary);

    &::before {
      content: "";
      position: absolute;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      border-radius: 50%;
      background-color: var(--color-secondary-dark);
      opacity: 0;
      z-index: 1;
      transition: all 0.3s ease-in;
    }

    &:hover {
      &::before {
        width: 500px;
        height: 500px;
        opacity: 1;
      }
    }
  }

  &.bg-orange {
    color: var(--color-white);
    background-color: var(--color-sub-orange);
  }

  &.bg-white {
    color: var(--color-primary);
    font-weight: 700;
    background-color: var(--color-white);
    border: 3px solid transparent;

    &:hover {
      color: var(--color-white);
      background-color: transparent;
      border-color: var(--color-white);
    }
  }
}

@media screen and (max-width: 767px) {
  .btn {
    font-size: 1.25rem;
  }
}

.btn-outline {
  border-width: 3px;
  border-style: solid;
  border-color: inherit;

  &.btn-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);

    &:hover {
      color: var(--color-white);
      background-color: var(--color-primary);
    }
  }

  &.btn-white {
    color: var(--color-white);
    border-color: var(--color-white);

    &:hover {
      color: var(--color-primary);
      background-color: var(--color-white);
    }
  }

  &.btn-hoicil {
    color: #4D472F;
    border-color: #4D472F;
    transition: transform 0.35s ease-in-out;

    &:hover {
      transform: translateY(-5px);
    }
  }
}

.txt-left {
  text-align: left;
}

.txt-center {
  text-align: center;
}


.txt-right {
  text-align: right;
}

.txt-white {
  color: var(--color-white);
}

.font-zenmaru {
  font-family: var(--font-family-zenmaru);
}

/*-------------------------
  states - 状態別スタイル
-------------------------*/
.is-pc {
  display: block;
}

.is-sp {
  display: none;
}

@media screen and (max-width: 1179px) {
  .is-pc {
    display: none;
  }

  .is-sp {
    display: block;
  }
}