@charset "UTF-8";

/* コンポーネント */
.logo {
  display: block;
}
.logo img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  -o-object-fit: contain;
     object-fit: contain;
}

.gnav_links {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(16px, 0.8072653885vw + 12.9727547931px, 24px);
}
.gnav_links li a {
  color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(13px, 0.2018163471vw + 12.2431886983px , 15px);
  line-height: 1.5;
  letter-spacing: 0.101em;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
}

.tel_number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(13px, 0.2018163471vw + 12.2431886983px , 15px);
  line-height: 1.5;
  letter-spacing: 0.101em;
  text-decoration: none;
  font-weight: 400;
}
.tel_icon {
  display: inline-block;
  aspect-ratio: 1/1;
  max-width: clamp(18px, 0.6054490414vw + 15.7295660949px, 24px);
}

.tel_icon img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
-o-object-fit: cover;
   object-fit: cover;
}

.sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}
.sns_icon {
  width: 24px;
  aspect-ratio: 1/1;
}
.sns_icon img {
  -o-object-fit: contain;
     object-fit: contain;
}

/* ボタン */
.button._more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(24px, 0.8072653885vw + 20.9727547931px, 32px);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding-top: 15px;
  padding-bottom: 17px;
  min-width: clamp(200px, 0.8072653885vw + 196.9727547931px, 208px);
  padding-left: clamp(32px, 0.8072653885vw + 28.9727547931px, 40px);
  padding-right: clamp(32px, 0.8072653885vw + 28.9727547931px, 40px);
  text-align: center;
  color: #ffffff;
  border-radius: 34px;
  font-size: clamp(13px, 0.2018163471vw + 12.2431886983px , 15px);
  line-height: 1.5;
  letter-spacing: 0.101em;
  text-decoration: none;
  font-weight: 400;
}
.button._more .icon {
  aspect-ratio: 1/1;
  display: inline-block;
  max-width: clamp(32px, 0.8072653885vw + 28.9727547931px, 40px);
}
.button._more .icon img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  -o-object-fit: contain;
     object-fit: contain;
}
.button._more._blue {
  background: transparent -webkit-gradient(linear, left top, right top, from(#003f71), to(#6eadd8)) 0% 0% no-repeat padding-box;
  background: transparent linear-gradient(90deg, #003f71 0%, #6eadd8 100%) 0% 0% no-repeat padding-box;
}
.button._more._yellow {
  background: transparent -webkit-gradient(linear, right top, left top, from(#dada06), to(#f3bc21)) 0% 0% no-repeat padding-box;
  background: transparent linear-gradient(270deg, #dada06 0%, #f3bc21 100%) 0% 0% no-repeat padding-box;
}
.button._more._white {
  background-color: #ffffff;
  color: #333333;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}
.button._more._white._services {
  width: 100%;
  max-width: clamp(300px, 2.5227043391vw + 290.5398587286px, 325px);
  padding-top: 17px;
  padding-bottom: 19px;
  border-radius: 40px;
}
@media screen and (max-width: 599px) {
  .button._more._white._services {
    width: 100%;
  }
}
.button._contact {
  height: 100%;
  padding-right: clamp(10px, 0.4036326942vw + 8.4863773966px, 14px);
  padding-left: clamp(10px, 0.4036326942vw + 8.4863773966px, 14px);
  padding-top: clamp(14px, 0.3027245207vw + 12.8647830474px, 17px);
  padding-bottom: clamp(14px, 0.3027245207vw + 12.8647830474px, 17px);
  display: grid;
  -ms-flex-line-pack: center;
      align-content: center;
  justify-items: center;
  gap: 10px;
  font-size: 10px;
  color: #ffffff;
  line-height: 1.5;
  letter-spacing: 0.101em;
  text-decoration: none;
}
.button._contact .button_icon {
  display: block;
  aspect-ratio: 30/24;
  max-width: clamp(24px, 0.6054490414vw + 21.7295660949px, 30px);
}
.button._contact .button_icon img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  -o-object-fit: cover;
  object-fit: cover;
}
.button._circle {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  position: relative;
  z-index: 0;
}
.button._circle a {
  font-size: clamp(9px, 0.6054490414vw + 6.7295660949px , 15px);
  line-height: 1.5;
  letter-spacing: 0.101em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(13px, 0.7063572149vw + 10.351160444px, 20px);
  padding-top: clamp(45px, 2.5227043391vw + 35.5398587286px, 70px);
  padding-bottom: clamp(45px, 2.5227043391vw + 35.5398587286px, 70px);
  padding-left: clamp(38px, 2.2199798184vw + 29.6750756811px, 60px);
}
.button._circle .circle {
  pointer-events: none;
  display: block;
  aspect-ratio: 1/1;
  max-width: clamp(100px, 6.0544904137vw + 77.2956609485px, 160px);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: -1;
  width: 100%;
  border-radius: 50%;
}
.button._circle .circle-l {
  left: 0;
  border: 1px solid #003f71;
}
.button._circle .circle-r {
  left: clamp(20px, 0.5045408678vw + 18.1079717457px, 25px);
  border: 1px solid #005aa2;
}
.button._circle .arrow {
  width: clamp(44px, 3.1281533804vw + 32.2694248234px, 75px);
  height: 1px;
  background-color: #003f71;
  display: inline-block;
  position: relative;
  z-index: 0;
}
.button._circle .arrow::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: clamp(12px, 0.3027245207vw + 10.8647830474px, 15px) solid transparent;
  border-left: clamp(16px, 0.9081735621vw + 12.5943491423px, 25px) solid #003f71;
}

/* ヘッダー */
.header {
    position: fixed;
    width: 100%;
    z-index: 100;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  @media screen and (max-width: 599px) {
    .header {
      max-height: 60.5px;
    }
  }
  .header.change-color {
    -webkit-transition: 0.4s;
    transition: 0.4s;
    background-color: rgba(112, 112, 112, 0.3137254902);
  }
  .header_inner {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header_body {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr auto auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header_logo {
    height: 100%;
    aspect-ratio: 202/40;
    width: 200px;
    margin-left: clamp(16px, 2.4217961655vw + 6.9182643794px, 40px);
    display: grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  @media screen and (max-width: 1023px) {
    .header_logo {
      min-height: 60.5px;
    }
  }
  .header_nav {
    margin-left: auto;
    display: grid;
    -ms-flex-line-pack: center;
        align-content: center;
  }
  @media screen and (max-width: 1023px) {
    .header_nav {
      display: none;
    }
  }
  .header_tel {
    margin-left: clamp(16px, 0.8072653885vw + 12.9727547931px, 24px);
  }
  @media screen and (max-width: 1023px) {
    .header_tel {
      display: none;
    }
  }
  .header_contact {
    background: transparent -webkit-gradient(linear, right top, left top, from(#dada06), to(#f3bc21)) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(270deg, #dada06 0%, #f3bc21 100%) 0% 0% no-repeat padding-box;
    margin-left: clamp(16px, 0.8072653885vw + 12.9727547931px, 24px);
    height: 100%;
  }
  @media screen and (max-width: 1023px) {
    .header_contact {
      display: none;
    }
  }

/* ドロワー */
.drawer-nav {
  display: none;
}
@media screen and (max-width: 1023px) {
  .drawer-nav {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    -webkit-transform: translate(20%, -100%);
            transform: translate(20%, -100%);
  }
  .drawer-nav.active {
    -webkit-animation: drawer forwards 0.8s ease;
            animation: drawer forwards 0.8s ease;
  }
  @-webkit-keyframes drawer {
    0% {
      -webkit-transform: translate(0%, 20%);
              transform: translate(0%, 20%);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate(0%, 0%);
              transform: translate(0%, 0%);
      opacity: 1;
    }
  }
  @keyframes drawer {
    0% {
      -webkit-transform: translate(0%, 20%);
              transform: translate(0%, 20%);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate(0%, 0%);
              transform: translate(0%, 0%);
      opacity: 1;
    }
  }
}
.drawer-nav_wrapper {
  height: 100%;
  background-image: url(../images/service-bg.jpg);
  background-repeat: repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 0;
}
.drawer-nav_wrapper::after {
  content: "";
  background: rgba(0, 175, 255, 0.47);
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.drawer-nav_inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-top: clamp(50px, 10.0908173562vw + 12.1594349142px, 150px);
  padding-bottom: clamp(50px, 10.0908173562vw + 12.1594349142px, 150px);
  display: grid;
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-template-rows: 1fr auto auto auto;
  gap: clamp(16px, 1.614530777vw + 9.9455095863px, 32px);
}
.drawer-nav_links {
  display: grid;
  place-items: center;
  gap: clamp(16px, 0.8072653885vw + 12.9727547931px, 24px);
}
.drawer-nav_links li a {
  font-size: clamp(13px, 0.2018163471vw + 12.2431886983px , 15px);
  line-height: 1.5;
  letter-spacing: 0.101em;
  text-decoration: none;
  color: #ffffff;
  font-weight: 400;
}
.drawer-nav_buttons {
  display: grid;
  gap: clamp(20px, 0.4036326942vw + 18.4863773966px, 24px);
}
.drawer-nav_logo {
  width: 200px;
  aspect-ratio: 280/60;
}
.drawer-nav_logo img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  -o-object-fit: contain;
     object-fit: contain;
}

.drawer-button {
  display: none;
  background-color: #003f71;
  position: fixed;
  top: 0px;
  right: 0px;
  width: 60.5px;
  height: 60.5px;
  z-index: 10000;
}
@media screen and (max-width: 1023px) {
  .drawer-button {
    display: block;
  }
}
.drawer-button span {
  display: block;
  position: absolute;
  width: 20px;
  height: 2px;
  background: #ffffff;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.drawer-button span:nth-child(1) {
  top: calc(50% - 10px);
  left: 50%;
}
.drawer-button span:nth-child(2) {
  top: 50%;
  left: 50%;
}
.drawer-button span:nth-child(3) {
  top: calc(50% + 10px);
  left: 50%;
}
.drawer-button.active span:nth-child(1) {
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
          transform: rotate(45deg) translate(-50%, -50%);
  top: 50%;
  left: calc(50% - 1px);
}
.drawer-button.active span:nth-child(2) {
  opacity: 0;
}
.drawer-button.active span:nth-child(3) {
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: rotate(-45deg) translate(-50%, -50%);
          transform: rotate(-45deg) translate(-50%, -50%);
  top: 50%;
  left: 50%;
}