@charset "UTF-8";

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

  /* color */
  --black: #111111;
  --primary: #61d7db;
  --secondary: #666666;

  /* 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;
  --league: 'League Spartan', sans-serif;
  --tajawal: 'Tajawal', sans-serif;
  /* 筆記 */
  --cedarville: 'Cedarville Cursive', cursive;

  /* icon */
  --icon-cross: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" fill="none"><path d="M18.8574 16.7363L35.3555 0.238281L37.4766 2.35938L20.9785 18.8574L37.4766 35.3555L35.3555 37.4766L18.8574 20.9785L2.12109 37.7148L0 35.5938L16.7363 18.8574L0 2.12109L2.12109 0L18.8574 16.7363Z" fill="currentColor"/></svg>');
  --icon-arrow: url('data:image/svg+xml,<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0836 0.178704C12.3909 -0.0839546 12.8581 -0.0535365 13.127 0.246645L17.451 5.07324C18.1828 5.89013 18.1828 7.10987 17.451 7.92676L13.127 12.7534C12.8581 13.0535 12.3909 13.084 12.0836 12.8213C11.7762 12.5586 11.7451 12.1024 12.014 11.8022L16.338 6.97558C16.582 6.70329 16.582 6.29671 16.338 6.02441L12.014 1.19782C11.7451 0.897635 11.7762 0.441363 12.0836 0.178704Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.50005C0 6.10118 0.331062 5.77783 0.739448 5.77783H17.0073C17.4157 5.77783 17.7468 6.10118 17.7468 6.50005C17.7468 6.89892 17.4157 7.22227 17.0073 7.22227H0.739448C0.331062 7.22227 0 6.89892 0 6.50005Z" fill="currentColor"/></svg>');
  --icon-mail: url('data:image/svg+xml,<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.3 4.25125L11.857 10.5094C11.934 10.5731 12.066 10.5731 12.143 10.5094L19.7 4.25125M2.32 1H21.68C22.406 1 23 1.57375 23 2.275V15.45C23 16.8525 21.812 18 20.36 18H3.64C2.188 18 1 16.8525 1 15.45V2.275C1 1.57375 1.594 1 2.32 1Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --icon-map: url('data:image/svg+xml,<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.50029 0C2.91601 0 0 2.7263 0 6.07738C0 7.46586 1.07901 9.72043 3.20791 12.7785C4.78681 15.0472 6.38668 16.9374 6.40241 16.9559C6.4263 16.9837 6.46184 17 6.49971 17C6.53758 17 6.5737 16.9837 6.59701 16.9559C6.61274 16.9368 8.21261 15.0467 9.79151 12.7785C11.9204 9.71989 12.9994 7.46531 12.9994 6.07738C13 2.7263 10.0846 0 6.50029 0ZM6.50029 9.66324C4.39762 9.66324 2.68763 8.06396 2.68763 6.09863C2.68763 4.13329 4.3982 2.53401 6.50029 2.53401C8.60238 2.53401 10.313 4.13329 10.313 6.09863C10.313 8.06396 8.60238 9.66324 6.50029 9.66324Z" fill="currentColor"/></svg>');
  --icon-tel: url('data:image/svg+xml,<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 1.5C13.25 1.5 18.25 12.75 18.25 14C18.25 16.5 14.5 19 13.25 21.5C12 24 14.5 26.5 17 29C17.975 29.975 22 34 24.5 32.75C27 31.5 29.5 27.75 32 27.75C33.25 27.75 44.5 32.75 44.5 34C44.5 39 40.75 42.75 37 44C33.25 45.25 30.75 45.25 25.75 44C20.75 42.75 17 41.5 10.75 35.25C4.5 29 3.25 25.25 2 20.25C0.75 15.25 0.75 12.75 2 9C3.25 5.25 7 1.5 12 1.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M27 11.6C28.65 12.375 30.15 13.425 31.4 14.7C32.625 15.925 33.65 17.4 34.4 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.5 2.125C33.025 3.05 36.175 4.875 38.675 7.375C41.15 9.875 42.975 13 43.875 16.5" stroke="white" 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(--sanserif);
    font-size: 16px;
    color: var(--black);

    @media (width <= 768px) {
      font-size: calc((100 / 750) * 28 * 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: 1.8;
  }
  /* =====================
    背景色
  ===================== */
  .bg {
    background-color: #edfeff;
  }

  /* =====================
    header
  ===================== */
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 71px;
    padding-inline: 40px;
    z-index: 20;
    border-block-end: 1px solid rgba(255, 255, 255, 0.6);
    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 / 750) * 144 * 1vw);
      padding-inline: calc((100 / 750) * 20 * 1vw);
    }

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

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

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

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

      & > ul {
        font-size: 15px;
        display: block flex;
        gap: 48px;
        block-size: fit-content;
        margin-inline-end: 64px;
        font-weight: 500;
        color: #fff;

        & > a {
          display: block grid;
          padding-block: 13px;
        }
      }
      /* ==== contact ==== */
      .unit {
        position: relative;
        background: #61d7db;
        color: #fff;
        transition: background 0.5s;

        & span {
          display: block flex;
          gap: 10px;
          align-items: center;
          justify-content: center;
          block-size: 100%;
          padding-inline: 20px;
          font-size: 15px;
          font-weight: 500;
          padding-block: 12px;

          &::before {
            inline-size: 24px;
            aspect-ratio: 24 / 19;
            content: '';
            background-color: #fff;
            mask-image: var(--icon-mail);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
          }
        }

        @media (any-hover: hover) {
          &:hover {
            background: #fff;
            outline: 2px solid #61d7db;
            outline-offset: -2px;
            color: #61d7db;

            & span::before {
              background-color: #61d7db;
            }
          }
        }
      }
      @media (width <= 768px) {
        display: none;
      }
    }
  }
  .is-header-color {
    .header {
      background-color: rgba(85, 85, 85, 0.3);
    }
  }

  /* =====================
    aside
  ===================== */
  .aside {
    padding-block: 64px;

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

    .aside_wrap {
      background-color: #c2c2c2;
      padding-inline: 48px;
      padding-block: 57px;
      display: block grid;
      grid-template-columns: max-content auto;
      align-items: center;
      gap: 137px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 750) * 48 * 1vw);
        padding-block: calc((100 / 750) * 54 * 1vw) calc((100 / 750) * 72 * 1vw);
        gap: calc((100 / 750) * 56 * 1vw);
        grid-template-columns: auto;
        grid-template-rows: repeat(2, max-content);
        justify-items: center;

        .u-h2-title {
          justify-items: center;
        }
      }

      .section_wrap {
        position: relative;
        inline-size: fit-content;
        display: block grid;
        grid-template-columns: repeat(2, max-content);
        grid-template-rows: max-content;
        align-items: center;
        gap: 128px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(2, max-content);
          gap: calc((100 / 750) * 74 * 1vw);
          justify-items: center;
        }

        .aside-tel {
          font-family: var(--tajawal);
          font-size: 40px;
          line-height: 1;
          color: #fff;
          display: block flex;
          align-items: center;
          gap: 16px;
          &::before {
            content: '';
            display: block flow;
            inline-size: 46px;
            aspect-ratio: 1 / 1;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: var(--icon-tel);
          }

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

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

        .u-anchor {
          background-color: #fff;
          outline: none;

          .btn-txt {
            color: #61d7db;
          }
          @media (any-hover: hover) {
            &:hover {
              outline: none;
              outline-offset: 0;
              background-color: #61d7db;

              .btn-txt {
                color: #fff;
                &::after {
                  background-color: #fff;
                }
              }
            }
          }
        }
        &::before {
          content: '';
          width: 1px;
          height: 48px;
          background-color: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        @media (width <= 768px) {
          &::before {
            width: calc((100 / 750) * 200 * 1vw);
            height: 1px;
            top: 42%;
          }
        }
      }
    }
  }
  /* =====================
    footer
  ===================== */
  .footer {
    position: relative;
    padding-block: 54px 37px;
    border-block-start: 1px solid #cfcfcf;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 62 * 1vw) calc((100 / 750) * 42 * 1vw);
    }

    .inner {
      padding-inline: 70px 128px;
      display: block grid;
      grid-template-columns: max-content auto;
      grid-template-rows: max-content max-content;
      column-gap: 64px;

      @media (width <= 768px) {
        inline-size: 100%;
        padding-inline: calc((100 / 750) * 40 * 1vw);
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, max-content);
        column-gap: 0;
      }

      .logo {
        display: block flow;
        height: fit-content;
        grid-column: 1/2;
        grid-row: 1/2;
        margin-block-start: 10px;

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

          .picture {
            display: block flow;
            text-align: center;
            & > img {
              width: calc((100 / 750) * 511 * 1vw);
            }
          }
        }
      }
      .address {
        grid-column: 1/2;
        grid-row: 2/3;
        font-size: 13px;
        line-height: 1.4;
        color: #666;
        margin-block-start: 19px;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 3/4;
          text-align: center;
          font-size: calc((100 / 750) * 26 * 1vw);
          margin-block-start: calc((100 / 750) * 26 * 1vw);
        }
      }

      .main-nav {
        grid-column: 2/3;
        grid-row: 1/2;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 1/2;
        }
        & > ul {
          display: block flex;
          justify-content: flex-end;
          gap: 80px;
          font-weight: 500;

          @media (width <= 768px) {
            display: block grid;
            grid-template-columns: repeat(2, 1fr);
            justify-items: center;
            gap: calc((100 / 750) * 48 * 1vw) 0;
          }
        }
      }
      .sub-nav {
        grid-column: 2/3;
        grid-row: 2/3;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 4/5;
        }
        & > ul {
          display: block flex;
          justify-content: flex-end;
          gap: 24px;
          font-size: 14px;
          line-height: 1;
          color: #666;
          margin-block-start: 18px;

          @media (width <= 768px) {
            justify-content: center;
            margin-block-start: calc((100 / 750) * 34 * 1vw);
            font-size: calc((100 / 750) * 24 * 1vw);
            gap: calc((100 / 750) * 32 * 1vw);
          }
        }
      }
    }
    .sub {
      grid-column: 1/3;
      & small {
        display: block flow;
        font-family: var(--tajawal);
        font-size: 14px;
        font-weight: 300;
        line-height: 1;
        text-align: center;
        color: #666;
        margin-block-start: 28px;

        @media (width <= 768px) {
          font-size: calc((100 / 750) * 24 * 1vw);
          margin-block-start: calc((100 / 750) * 33 * 1vw);
        }
      }
    }
  }
  /* =====================
  sp-nav
  ===================== */
  @media (width > 768px) {
    .sp-menu,
    .sp-nav {
      display: none;
    }
  }
  @media (width <= 768px) {
    /* ==== ボタン ==== */
    .sp-menu {
      position: fixed;
      top: calc((100 / 750) * 24 * 1vw);
      right: calc((100 / 750) * 20 * 1vw);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/_common/menu.png');
      inline-size: calc((100 / 750) * 96 * 1vw);
      block-size: calc((96 / 750) * 96 * 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;
        background-color: #61d7db;
        max-block-size: 100dvh;
        .sp-menu-head {
          position: relative;
          inline-size: 100%;
          min-height: calc((100 / 750) * 144 * 1vw);
          background-color: rgba(85, 85, 85, 0.3);
          border-block-end: 1px solid #fff;
          top: 0;
          left: 0;

          /* ==== logo ==== */
          .logo {
            inline-size: fit-content;
            block-size: calc((100 / 750) * 144 * 1vw);
            pointer-events: auto;
            display: block grid;
            place-content: center;
            margin-inline-start: calc((100 / 750) * 20 * 1vw);
            & img {
              width: calc((100 / 750) * 430 * 1vw);
            }
          }
        }
        .body {
          color: #fff;
          block-size: calc(100dvh - calc((100 / 750) * 120 * 1vw));
          padding-block: calc((100 / 750) * 49 * 1vw) calc((100 / 750) * 224 * 1vw);
          padding-inline: calc((100 / 750) * 125 * 1vw);
          overflow-y: auto;
          .nav {
            & > ul {
              & > li {
                border-block-end: 1px solid #fff;
                &:last-child {
                  border-block-end: none;
                }
                & > a {
                  display: block flow;
                  inline-size: 100%;
                  padding-block: calc((100 / 750) * 62 * 1vw);
                  font-size: calc((100 / 750) * 28 * 1vw);
                  font-weight: 500;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }
    /* Menu on */
    .menu-on {
      .sp-nav {
        pointer-events: auto;
        opacity: 1;
        transition: all 350ms var(--easeOutExpo) 0s;
      }
    }
  }
}