@charset "UTF-8";
:root {
  --color-body: hsla(0, 0%, 100%, 1);
  --color-text: hsla(0, 0%, 20%, 1);
  --color-border: hsla(0, 0%, 87%, 1);
  --color-green: hsla(158, 100%, 33%, 1);
  --color-blue: hsla(197, 100%, 44%, 1);
  --color-orange: hsla(44, 100%, 50%, 1);
  --color-orange2: hsla(44, 100%, 60%, 1);
  --color-orange-bg: hsla(44, 100%, 90%, 1);
  --gra-orange: linear-gradient(45deg, var(--color-orange), var(--color-orange2));
  --num-240: calc(var(--num-8) * 30);
  --num-200: calc(var(--num-8) * 25);
  --num-178: calc(var(--num-8) * 22.25);
  --num-160: calc(var(--num-8) * 20);
  --num-128: calc(var(--num-8) * 16);
  --num-120: calc(var(--num-8) * 15);
  --num-114: calc(var(--num-8) * 14.25);
  --num-108: calc(var(--num-8) * 13.5);
  --num-100: calc(var(--num-8) * 12.5);
  --num-96: calc(var(--num-8) * 12);
  --num-86: calc(var(--num-8) * 10.75);
  --num-80: calc(var(--num-8) * 10);
  --num-72: calc(var(--num-8) * 9);
  --num-70: calc(var(--num-8) * 8.75);
  --num-64: calc(var(--num-8) * 8);
  --num-56: calc(var(--num-8) * 7);
  --num-54: calc(var(--num-8) * 6.75);
  --num-48: calc(var(--num-8) * 6);
  --num-40: calc(var(--num-8) * 5);
  --num-36: calc(var(--num-8) * 4.5);
  --num-32: calc(var(--num-8) * 4);
  --num-30: calc(var(--num-8) * 3.75);
  --num-24: calc(var(--num-8) * 3);
  --num-20: calc(var(--num-8) * 2.5);
  --num-18: calc(var(--num-8) * 2.25);
  --num-16: calc(var(--num-8) * 2);
  --num-14: calc(var(--num-8) * 1.75);
  --num-13: calc(var(--num-8) * 1.625);
  --num-12: calc(var(--num-8) * 1.5);
  --num-10: calc(var(--num-8) * 1.25);
  --num-8: 0.5rem;
  --num-4: calc(var(--num-8) * 0.5);
  --leading-trim: calc((1em - 1lh) / 2);
}

@view-transition {
  navigation: auto;
}
* {
  background: transparent;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  color: unset;
  list-style: none;
  border: none;
}

html {
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  font-size: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
  font-weight: 400;
  line-height: 2;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: 80px;
}
@media screen and (min-width: 845px) {
  html {
    scroll-padding-top: 0;
  }
}

body {
  background: var(--color-bg-body);
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-optical-sizing: auto;
  color: var(--color-text);
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-spacing-trim: trim-auto;
  font-feature-settings: "palt";
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  position: relative;
}

body:has(#gnav-checkbox:checked) {
  overflow: hidden;
}

body:has([popover]:popover-open) {
  pointer-events: none;
  overflow: hidden;
}

[popover]:popover-open {
  pointer-events: auto;
}

p {
  font-size: var(--num-16);
  line-height: 2;
}
@media screen and (min-width: 845px) {
  p {
    font-size: var(--num-16);
  }
}
p:not(:first-of-type) {
  margin-top: var(--num-40);
}

img {
  width: inherit;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

button {
  cursor: pointer;
}

.inner-max {
  margin-inline: auto;
  max-width: 1440px;
  position: relative;
}

.inner-wide {
  margin-inline: auto;
  max-width: 1120px;
  position: relative;
}

.inner-middle {
  margin-inline: auto;
  max-width: 928px;
  position: relative;
}

.inner-narrow {
  margin-inline: auto;
  max-width: 736px;
  position: relative;
}

.nosp {
  display: none;
}
@media screen and (min-width: 845px) {
  .nosp {
    display: block;
  }
}

@media screen and (min-width: 845px) {
  .nopc {
    display: none;
  }
}

.sec {
  padding: var(--num-80) var(--num-16);
}
@media screen and (min-width: 845px) {
  .sec {
    padding: var(--num-160) var(--num-80);
  }
}
@media screen and (min-width: 1441px) {
  .sec {
    border-radius: var(--num-8);
  }
}

.sec-header {
  margin-bottom: var(--num-40);
}
@media screen and (min-width: 845px) {
  .sec-header {
    margin-bottom: var(--num-80);
  }
}

.sec-title-en {
  margin-bottom: var(--num-32);
  font-size: var(--num-14);
  color: var(--color-green);
  font-weight: 700;
}
@media screen and (min-width: 845px) {
  .sec-title-en {
    font-size: var(--num-16);
  }
}

.sec-title {
  font-size: var(--num-18);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-box: trim-both cap alphabetic;
}
@media screen and (min-width: 845px) {
  .sec-title {
    font-size: var(--num-24);
    font-weight: 400;
    line-height: 2.5;
  }
}

.title {
  font-size: var(--num-18);
  font-weight: 500;
  line-height: 1.5;
  text-box: trim-both cap alphabetic;
}
@media screen and (min-width: 845px) {
  .title {
    font-size: var(--num-24);
    font-weight: 400;
    line-height: 2.5;
  }
}

#header {
  padding: var(--num-16) var(--num-24);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
@media screen and (min-width: 845px) {
  #header {
    padding: var(--num-30) var(--num-40);
  }
}
#header #site-logo {
  width: 180px;
  height: auto;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 845px) {
  #header #site-logo {
    width: 225px;
  }
}
@media screen and (min-width: 1024px) {
  #header #site-logo {
    width: 270px;
  }
}

#gnav {
  font-size: var(--num-24);
  font-weight: 500;
  gap: var(--num-24);
  align-items: center;
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: calc(100dvh - 80px);
  background: hsla(158, 100%, 33%, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
@media screen and (min-width: 845px) {
  #gnav {
    display: flex;
    position: unset;
    width: unset;
    height: unset;
    background: none;
    color: inherit;
    font-size: var(--num-14);
    gap: var(--num-24);
  }
}
#gnav li {
  transition: color 0.3s;
  color: var(--color-body);
}
@media screen and (min-width: 845px) {
  #gnav li {
    color: var(--color-text);
  }
}
#gnav li:hover {
  color: var(--color-body);
}
@media screen and (min-width: 845px) {
  #gnav li:hover {
    color: var(--color-blue);
  }
}
#gnav li a.btn {
  margin-top: var(--num-16);
  background: var(--gra-orange);
  color: var(--color-body);
  font-size: var(--num-24);
  font-weight: 700;
  text-shadow: 0 0 var(--num-8) hsla(0, 0%, 0%, 0.25);
  min-width: var(--num-240);
  min-height: var(--num-64);
  border-radius: var(--num-8);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
@media screen and (min-width: 845px) {
  #gnav li a.btn {
    margin-top: 0;
    font-size: var(--num-16);
    min-width: var(--num-178);
    min-height: var(--num-48);
  }
}
#gnav li a.btn:hover {
  background: var(--color-orange);
}
#gnav li a.btn.tel {
  background: var(--color-blue);
  line-height: 1;
  letter-spacing: 0.1em;
  gap: var(--num-8);
}
#gnav li a.btn.tel::before {
  content: "";
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.4191 24C18.305 24 18.1908 23.9925 18.0767 23.9738C13.1749 23.2367 9.09261 20.03 6.53134 17.4687C3.97007 14.9074 0.761461 10.8251 0.0261939 5.92331C-0.351729 3.40881 3.59963 0.679155 5.16558 0.0673683C5.6464 -0.119722 6.39663 -0.050499 7.97007 2.17401C8.49766 2.9205 9.03087 3.79047 9.43312 4.56316C10.0355 5.72125 10.131 6.17775 9.84097 6.51452C9.45931 6.95792 8.95604 7.35829 8.5145 7.7119C8.25445 7.91957 7.91207 8.19272 7.77924 8.34613C7.94575 8.89992 9.03648 10.9205 11.0589 12.943C13.0814 14.9654 15.102 16.0561 15.6558 16.2227C15.8092 16.0898 16.0823 15.7474 16.29 15.4874C16.6436 15.044 17.0458 14.5426 17.4874 14.159C17.8241 13.8691 18.2788 13.9626 19.4387 14.5669C20.2114 14.9691 21.0814 15.5024 21.8279 16.03C24.0524 17.6034 24.1216 18.3555 23.9345 18.8344C23.3489 20.3293 20.8344 24 18.421 24H18.4191ZM5.50795 1.13753C4.03742 1.74557 0.886811 4.10104 1.13564 5.75493C1.82601 10.3555 4.88307 14.232 7.3246 16.6735C9.76614 19.1151 13.6427 22.1721 18.2432 22.8625C19.8971 23.1095 22.2526 19.9589 22.8606 18.4883C22.7764 18.2844 22.2619 17.6408 20.623 16.565C19.4331 15.7849 18.449 15.3003 18.0505 15.1618C17.7437 15.4612 17.4387 15.8429 17.1656 16.1852C16.6155 16.8737 16.2526 17.3284 15.7699 17.3602C14.9691 17.4163 12.3386 15.8092 10.2638 13.7343C8.19083 11.6614 6.58372 9.02714 6.63798 8.22827C6.66979 7.74557 7.12442 7.38075 7.81291 6.83257C8.15529 6.55942 8.53695 6.25446 8.8363 5.94763C8.69785 5.551 8.21329 4.56503 7.43312 3.37513C6.35735 1.73622 5.71375 1.22172 5.50982 1.13753H5.50795Z" fill="%23ffffff" /></svg>') center no-repeat;
  background-size: contain;
  width: 1.25em;
  height: 1.25em;
  display: block;
}
#gnav li a.btn.tel .time {
  font-size: var(--num-14);
  letter-spacing: 0.05em;
}

#gnav-checkbox:checked ~ #gnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--num-20);
  flex-direction: column;
}

#gnav-toggle {
  width: 56px;
  height: 56px;
  display: block;
  cursor: pointer;
  position: relative;
}
#gnav-toggle div {
  background: var(--color-text);
  border-radius: 2px;
  width: 24px;
  height: 2px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-origin: center center;
  transition: all 0.3s;
}
#gnav-toggle div:nth-of-type(1) {
  translate: -50% calc((50% + 8px) * -1);
}
#gnav-toggle div:nth-of-type(3) {
  width: 16px;
  translate: calc((50% + 4px) * -1) calc(50% + 6px);
}

#gnav-checkbox {
  display: none;
}
#gnav-checkbox:checked ~ #gnav-toggle {
  background: none;
}
#gnav-checkbox:checked ~ #gnav-toggle div:nth-of-type(1) {
  width: 24px;
  translate: -50% -50%;
  rotate: 45deg;
}
#gnav-checkbox:checked ~ #gnav-toggle div:nth-of-type(2) {
  background: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
#gnav-checkbox:checked ~ #gnav-toggle div:nth-of-type(3) {
  width: 24px;
  translate: -50% -50%;
  rotate: -45deg;
}

@media screen and (min-width: 845px) {
  #gnav-toggle,
  #gnav-checkbox {
    display: none;
  }
}
#kv {
  margin-left: calc((100% - 100vw) / 2);
  background-image: -webkit-image-set(url("../img/kv-sp.webp") 1x, url("../img/kv-sp@2x.webp") 2x);
  background-image: image-set(url("../img/kv-sp.webp") 1x, url("../img/kv-sp@2x.webp") 2x);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  font-weight: 500;
  width: 100vw;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: var(--num-64);
  position: relative;
  z-index: 500;
}
@media screen and (min-width: 845px) {
  #kv {
    background-image: -webkit-image-set(url("../img/kv-sq-2.webp") 1x, url("../img/kv-sq-2@2x.webp") 2x);
    background-image: image-set(url("../img/kv-sq-2.webp") 1x, url("../img/kv-sq-2@2x.webp") 2x);
  }
}
@media screen and (min-width: 1201px) {
  #kv {
    background-image: -webkit-image-set(url("../img/kv.webp") 1x, url("../img/kv@2x.webp") 2x);
    background-image: image-set(url("../img/kv.webp") 1x, url("../img/kv@2x.webp") 2x);
  }
}
@media screen and (min-width: 481px) {
  #kv .kv-title {
    width: 60%;
  }
}
#kv p {
  font-size: var(--num-16);
}
@media screen and (min-width: 481px) {
  #kv p {
    font-size: var(--num-14);
  }
}
@media screen and (min-width: 845px) {
  #kv p {
    font-size: var(--num-20);
  }
}

#about {
  background-image: -webkit-image-set(url("../img/about-bg-sp.webp") 1x, url("../img/about-bg-sp@2x.webp") 2x);
  background-image: image-set(url("../img/about-bg-sp.webp") 1x, url("../img/about-bg-sp@2x.webp") 2x);
  background-position: right bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
}
@media screen and (min-width: 845px) {
  #about {
    background-image: -webkit-image-set(url("../img/about-bg.webp") 1x, url("../img/about-bg@2x.webp") 2x);
    background-image: image-set(url("../img/about-bg.webp") 1x, url("../img/about-bg@2x.webp") 2x);
  }
}
#about.sec {
  padding-bottom: var(--num-120);
}
@media screen and (min-width: 845px) {
  #about.sec {
    padding-bottom: var(--num-240);
  }
}
#about .sec-header {
  margin-bottom: var(--num-54);
}
@media screen and (min-width: 845px) {
  #about .sec-header {
    margin-bottom: var(--num-108);
  }
}
#about .swiper {
  margin-top: var(--num-64);
  width: 240px;
  height: 264px;
}
@media screen and (min-width: 845px) {
  #about .swiper {
    margin-top: 0;
    position: absolute;
    right: var(--num-160);
    bottom: var(--num-160);
    width: 300px;
    height: 330px;
  }
}
#about .swiper .swiper-slide {
  opacity: 0 !important;
  mix-blend-mode: plus-lighter;
}
#about .swiper .swiper-slide-visible {
  opacity: 1 !important;
}
#about .swiper .swiper-pagination-bullet {
  margin: 0 6px;
  width: 6px;
  height: 6px;
}

.service-list {
  display: flex;
  gap: var(--num-70);
  flex-direction: column;
}
@media screen and (min-width: 845px) {
  .service-list {
    flex-direction: row;
  }
}
.service-list .service .img {
  margin-bottom: var(--num-40);
  border-radius: var(--num-8);
  overflow: hidden;
}
.service-list .service .plan {
  margin-bottom: var(--num-12);
  color: var(--color-blue);
  font-size: var(--num-12);
  font-weight: 700;
}
.service-list .service .title {
  margin-bottom: var(--num-40);
}

#works {
  background-image: -webkit-image-set(url("../img/works-bg.webp") 1x, url("../img/works-bg@2x.webp") 2x);
  background-image: image-set(url("../img/works-bg.webp") 1x, url("../img/works-bg@2x.webp") 2x);
  background-color: #f2fcf6;
  background-position: right bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
@media screen and (min-width: 845px) {
  #works .works-list {
    display: flex;
    align-items: center;
    gap: 40px;
  }
}
#works .works-list .works-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  height: 300px;
}
@media screen and (min-width: 845px) {
  #works .works-list .works-wrapper {
    width: 100%;
    height: auto;
  }
}
#works .works-list .works {
  width: 980px;
  height: 300px;
}
@media screen and (min-width: 845px) {
  #works .works-list .works {
    margin-bottom: -40px;
    width: unset;
    height: unset;
  }
}
#works .works-list .more-wrapper {
  margin-block: var(--num-40);
  font-size: var(--num-24);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 845px) {
  #works .works-list .more-wrapper {
    margin-block: 0;
    width: calc((100vw - var(--num-80) * 2 - 120px) / 4);
  }
}
#works .works-list .more-wrapper .btn-more {
  text-box: trim-both cap alphabetic;
  transition: all 0.3s;
}
#works .works-list .more-wrapper .btn-more::before {
  margin-right: var(--num-12);
  content: "";
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.0301 0.0841693C5.7533 0.144409 4.88138 0.348169 4.11914 0.647689C3.33026 0.955129 2.66162 1.36769 1.99634 2.03537C1.33106 2.70305 0.921379 3.37217 0.616099 4.16225C0.320659 4.92617 0.120499 5.79881 0.0640995 7.07633C0.00769946 8.35385 -0.00478054 8.76449 0.00145946 12.0232C0.00769946 15.2819 0.0220995 15.6904 0.0840195 16.9706C0.144979 18.2471 0.348019 19.1188 0.647539 19.8813C0.955459 20.6702 1.36754 21.3386 2.03546 22.0041C2.70338 22.6696 3.37202 23.0783 4.16402 23.3841C4.92722 23.6791 5.8001 23.8802 7.07738 23.9361C8.35466 23.992 8.76578 24.005 12.0235 23.9987C15.2813 23.9925 15.6915 23.9781 16.9714 23.9174C18.2513 23.8566 19.1184 23.6522 19.8811 23.3541C20.67 23.0455 21.3389 22.6341 22.0039 21.9659C22.669 21.2978 23.0784 20.6282 23.3835 19.8376C23.6791 19.0744 23.88 18.2015 23.9355 16.9252C23.9914 15.6443 24.0046 15.2354 23.9983 11.9771C23.9921 8.71889 23.9775 8.31041 23.9167 7.03073C23.856 5.75105 23.6527 4.88201 23.3535 4.11905C23.0451 3.33017 22.6335 2.66225 21.9658 1.99625C21.2981 1.33025 20.628 0.921049 19.8377 0.616729C19.074 0.321289 18.2016 0.119929 16.9243 0.0647293C15.6471 0.00952928 15.2359 -0.00463073 11.977 0.00160927C8.71802 0.00784927 8.31002 0.0217693 7.0301 0.0841693ZM7.17026 21.7773C6.00026 21.7264 5.36498 21.532 4.94162 21.3693C4.38098 21.1533 3.98162 20.8922 3.5597 20.4743C3.13778 20.0565 2.87858 19.6557 2.6597 19.0962C2.4953 18.6729 2.2973 18.0383 2.24258 16.8683C2.18306 15.6038 2.17058 15.2241 2.16362 12.0203C2.15666 8.81657 2.1689 8.43737 2.22434 7.17233C2.27426 6.00329 2.46986 5.36729 2.63234 4.94417C2.84834 4.38281 3.1085 3.98417 3.5273 3.56249C3.9461 3.14081 4.3457 2.88113 4.90562 2.66225C5.3285 2.49713 5.96306 2.30081 7.13258 2.24513C8.3981 2.18513 8.7773 2.17313 11.9806 2.16617C15.1839 2.15921 15.564 2.17121 16.83 2.22689C17.9991 2.27777 18.6353 2.47145 19.0579 2.63489C19.6188 2.85089 20.0179 3.11033 20.4396 3.52985C20.8613 3.94937 21.1212 4.34753 21.3401 4.90865C21.5055 5.33033 21.7018 5.96465 21.757 7.13489C21.8172 8.40041 21.8309 8.77985 21.8367 11.9829C21.8424 15.1859 21.8311 15.5663 21.7757 16.8309C21.7246 18.0009 21.5307 18.6364 21.3677 19.0602C21.1517 19.6206 20.8913 20.0202 20.4723 20.4417C20.0532 20.8631 19.6541 21.1228 19.0939 21.3417C18.6715 21.5066 18.0363 21.7034 16.8677 21.7591C15.6022 21.8186 15.223 21.831 12.0185 21.838C8.81402 21.845 8.43602 21.832 7.1705 21.7773M16.9529 5.58665C16.9534 5.87147 17.0383 6.14976 17.1969 6.38631C17.3556 6.62287 17.5808 6.80706 17.8442 6.9156C18.1075 7.02413 18.3971 7.05214 18.6764 6.99607C18.9556 6.94 19.212 6.80238 19.413 6.60061C19.614 6.39884 19.7507 6.14198 19.8058 5.86253C19.8608 5.58307 19.8317 5.29357 19.7222 5.03063C19.6127 4.7677 19.4277 4.54314 19.1906 4.38537C18.9534 4.22759 18.6748 4.14368 18.39 4.14425C18.0082 4.14501 17.6423 4.29739 17.3728 4.56788C17.1033 4.83837 16.9523 5.20482 16.9529 5.58665ZM5.8385 12.0122C5.84522 15.4154 8.60906 18.1679 12.0115 18.1614C15.414 18.155 18.1685 15.3914 18.162 11.9882C18.1555 8.58497 15.391 5.83169 11.988 5.83841C8.58506 5.84513 5.83202 8.60945 5.8385 12.0122ZM7.99994 12.0078C7.99837 11.2167 8.23144 10.4429 8.66968 9.7842C9.10791 9.12552 9.73162 8.61158 10.4619 8.30738C11.1923 8.00318 11.9964 7.92237 12.7726 8.07518C13.5489 8.22799 14.2624 8.60755 14.8229 9.16586C15.3834 9.72417 15.7658 10.4362 15.9217 11.2118C16.0776 11.9874 15.9999 12.7919 15.6986 13.5234C15.3973 14.2549 14.8859 14.8806 14.2289 15.3215C13.572 15.7623 12.7991 15.9984 12.0079 16C11.4826 16.0011 10.9622 15.8987 10.4765 15.6987C9.99076 15.4986 9.54918 15.2049 9.17699 14.8342C8.8048 14.4634 8.50929 14.023 8.30733 13.5381C8.10537 13.0531 8.00091 12.5332 7.99994 12.0078Z" fill="%23333333"/></svg>') center no-repeat;
  background-size: contain;
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.3s;
}
#works .works-list .more-wrapper .btn-more::after {
  margin-left: var(--num-12);
  content: "";
  background: url('data:image/svg+xml;utf8,<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 17L9 9L1 1" stroke="%23333333" stroke-linejoin="round"/></svg>') center no-repeat;
  background-size: contain;
  width: 0.5em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.3s;
}
#works .works-list .more-wrapper .btn-more:hover {
  color: #ea3374;
}
#works .works-list .more-wrapper .btn-more:hover::before {
  background: -webkit-image-set(url("../img/logo-instagram.webp") 1x, url("../img/logo-instagram@2x.webp") 2x);
  background: image-set(url("../img/logo-instagram.webp") 1x, url("../img/logo-instagram@2x.webp") 2x);
  background-size: contain;
  width: 1em;
  height: 1em;
}
#works .works-list .more-wrapper .btn-more:hover::after {
  background: url('data:image/svg+xml;utf8,<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 17L9 9L1 1" stroke="%23ea3374" stroke-linejoin="round"/></svg>') center no-repeat;
  background-size: contain;
  width: 0.5em;
  height: 1em;
}

#contact {
  background-image: -webkit-image-set(url("../img/contact-bg.webp") 1x, url("../img/contact-bg@2x.webp") 2x);
  background-image: image-set(url("../img/contact-bg.webp") 1x, url("../img/contact-bg@2x.webp") 2x);
  background-position: left bottom;
  background-repeat: no-repeat;
}
@media screen and (min-width: 845px) {
  #contact {
    display: grid;
    gap: 0 var(--num-72);
    grid-template-areas: "h h" "t m";
  }
}
#contact .sec-title {
  font-weight: 500;
  line-height: 1.5;
  grid-area: h;
}
#contact .text-area {
  grid-area: t;
}
@media screen and (min-width: 845px) {
  #contact .text-area {
    position: sticky;
    top: var(--num-160);
    height: 780px;
  }
}
#contact #mail-form {
  margin-top: var(--num-80);
  padding: var(--num-12) 0;
  background: var(--color-orange-bg);
  border-radius: var(--num-8);
}
@media screen and (min-width: 845px) {
  #contact #mail-form {
    margin-top: 0;
    padding: var(--num-32) var(--num-24);
    width: 38.33vw;
    max-width: 552px;
    grid-area: m;
  }
}
@media screen and (min-width: 1024px) {
  #contact #mail-form {
    padding: var(--num-32) var(--num-36);
  }
}
@media screen and (min-width: 1201px) {
  #contact #mail-form {
    padding: var(--num-32) var(--num-56);
  }
}
#contact #mail-form iframe {
  height: 1900px;
}
@media screen and (min-width: 481px) {
  #contact #mail-form iframe {
    height: 1820px;
  }
}
@media screen and (min-width: 768px) {
  #contact #mail-form iframe {
    height: 1780px;
  }
}
@media screen and (min-width: 845px) {
  #contact #mail-form iframe {
    height: 1920px;
  }
}
@media screen and (min-width: 1201px) {
  #contact #mail-form iframe {
    height: 1820px;
  }
}
@media screen and (min-width: 1441px) {
  #contact #mail-form iframe {
    height: 1820px;
  }
}
#contact #mail-form .notice {
  padding: var(--num-8) var(--num-32);
}
#contact #mail-form .notice p {
  font-size: var(--num-12);
  word-break: normal;
}
#contact .btn {
  margin-inline: auto;
  background: hsla(0, 100%, 100%, 0.25);
  border: 1px solid var(--color-text);
  border-radius: var(--num-24);
  font-size: var(--num-24);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--num-12);
  max-width: 260px;
  transition: all 0.3s;
}
@media screen and (min-width: 845px) {
  #contact .btn {
    margin-inline: 0;
  }
}
#contact .btn.mail {
  margin-top: var(--num-40);
  letter-spacing: 0.03em;
}
@media screen and (min-width: 845px) {
  #contact .btn.mail {
    margin-top: var(--num-80);
  }
}
#contact .btn.mail::before {
  content: "";
  background: url('data:image/svg+xml;utf8,<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.4736 16H0.526354C0.235105 16 0 15.7691 0 15.4869V0.513149C0 0.229207 0.235105 0 0.526354 0H23.4736C23.7649 0 24 0.229207 24 0.513149V15.4869C24 15.7708 23.7649 16 23.4736 16ZM1.05271 14.9737H22.9473V1.0263H1.05271V14.9737Z" fill="%23333333" /><path d="M12.0009 11.2397C11.8746 11.2397 11.7465 11.1952 11.6465 11.1063L0.17194 0.892868C-0.043865 0.701292 -0.0579011 0.376298 0.13685 0.167617C0.333356 -0.0427745 0.666713 -0.0564585 0.880764 0.133407L11.9991 10.0303L23.1192 0.133407C23.3333 -0.058169 23.6666 -0.0427745 23.8631 0.165906C24.0597 0.374587 24.0439 0.699582 23.8298 0.891158L12.3553 11.1045C12.2553 11.1935 12.1272 11.238 12.0009 11.238V11.2397Z" fill="%23333333" /></svg>') center no-repeat;
  background-size: contain;
  width: 1em;
  height: 1em;
  display: inline-block;
  transition: all 0.3s;
}
#contact .btn.mail:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}
#contact .btn.mail:hover::before {
  background: url('data:image/svg+xml;utf8,<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.4736 16H0.526354C0.235105 16 0 15.7691 0 15.4869V0.513149C0 0.229207 0.235105 0 0.526354 0H23.4736C23.7649 0 24 0.229207 24 0.513149V15.4869C24 15.7708 23.7649 16 23.4736 16ZM1.05271 14.9737H22.9473V1.0263H1.05271V14.9737Z" fill="%2300a1e2" /><path d="M12.0009 11.2397C11.8746 11.2397 11.7465 11.1952 11.6465 11.1063L0.17194 0.892868C-0.043865 0.701292 -0.0579011 0.376298 0.13685 0.167617C0.333356 -0.0427745 0.666713 -0.0564585 0.880764 0.133407L11.9991 10.0303L23.1192 0.133407C23.3333 -0.058169 23.6666 -0.0427745 23.8631 0.165906C24.0597 0.374587 24.0439 0.699582 23.8298 0.891158L12.3553 11.1045C12.2553 11.1935 12.1272 11.238 12.0009 11.238V11.2397Z" fill="%2300a1e2" /></svg>') center no-repeat;
  background-size: contain;
  width: 1em;
  height: 1em;
}
#contact .btn.tel {
  margin-top: var(--num-24);
  letter-spacing: 0.1em;
}
#contact .btn.tel::before {
  content: "";
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.4191 24C18.305 24 18.1908 23.9925 18.0767 23.9738C13.1749 23.2367 9.09261 20.03 6.53134 17.4687C3.97007 14.9074 0.761461 10.8251 0.0261939 5.92331C-0.351729 3.40881 3.59963 0.679155 5.16558 0.0673683C5.6464 -0.119722 6.39663 -0.050499 7.97007 2.17401C8.49766 2.9205 9.03087 3.79047 9.43312 4.56316C10.0355 5.72125 10.131 6.17775 9.84097 6.51452C9.45931 6.95792 8.95604 7.35829 8.5145 7.7119C8.25445 7.91957 7.91207 8.19272 7.77924 8.34613C7.94575 8.89992 9.03648 10.9205 11.0589 12.943C13.0814 14.9654 15.102 16.0561 15.6558 16.2227C15.8092 16.0898 16.0823 15.7474 16.29 15.4874C16.6436 15.044 17.0458 14.5426 17.4874 14.159C17.8241 13.8691 18.2788 13.9626 19.4387 14.5669C20.2114 14.9691 21.0814 15.5024 21.8279 16.03C24.0524 17.6034 24.1216 18.3555 23.9345 18.8344C23.3489 20.3293 20.8344 24 18.421 24H18.4191ZM5.50795 1.13753C4.03742 1.74557 0.886811 4.10104 1.13564 5.75493C1.82601 10.3555 4.88307 14.232 7.3246 16.6735C9.76614 19.1151 13.6427 22.1721 18.2432 22.8625C19.8971 23.1095 22.2526 19.9589 22.8606 18.4883C22.7764 18.2844 22.2619 17.6408 20.623 16.565C19.4331 15.7849 18.449 15.3003 18.0505 15.1618C17.7437 15.4612 17.4387 15.8429 17.1656 16.1852C16.6155 16.8737 16.2526 17.3284 15.7699 17.3602C14.9691 17.4163 12.3386 15.8092 10.2638 13.7343C8.19083 11.6614 6.58372 9.02714 6.63798 8.22827C6.66979 7.74557 7.12442 7.38075 7.81291 6.83257C8.15529 6.55942 8.53695 6.25446 8.8363 5.94763C8.69785 5.551 8.21329 4.56503 7.43312 3.37513C6.35735 1.73622 5.71375 1.22172 5.50982 1.13753H5.50795Z" fill="%23333333" /></svg>') center no-repeat;
  background-size: contain;
  width: 1em;
  height: 1em;
  display: inline-block;
  transition: all 0.3s;
}
#contact .btn.tel:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}
#contact .btn.tel:hover::before {
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.4191 24C18.305 24 18.1908 23.9925 18.0767 23.9738C13.1749 23.2367 9.09261 20.03 6.53134 17.4687C3.97007 14.9074 0.761461 10.8251 0.0261939 5.92331C-0.351729 3.40881 3.59963 0.679155 5.16558 0.0673683C5.6464 -0.119722 6.39663 -0.050499 7.97007 2.17401C8.49766 2.9205 9.03087 3.79047 9.43312 4.56316C10.0355 5.72125 10.131 6.17775 9.84097 6.51452C9.45931 6.95792 8.95604 7.35829 8.5145 7.7119C8.25445 7.91957 7.91207 8.19272 7.77924 8.34613C7.94575 8.89992 9.03648 10.9205 11.0589 12.943C13.0814 14.9654 15.102 16.0561 15.6558 16.2227C15.8092 16.0898 16.0823 15.7474 16.29 15.4874C16.6436 15.044 17.0458 14.5426 17.4874 14.159C17.8241 13.8691 18.2788 13.9626 19.4387 14.5669C20.2114 14.9691 21.0814 15.5024 21.8279 16.03C24.0524 17.6034 24.1216 18.3555 23.9345 18.8344C23.3489 20.3293 20.8344 24 18.421 24H18.4191ZM5.50795 1.13753C4.03742 1.74557 0.886811 4.10104 1.13564 5.75493C1.82601 10.3555 4.88307 14.232 7.3246 16.6735C9.76614 19.1151 13.6427 22.1721 18.2432 22.8625C19.8971 23.1095 22.2526 19.9589 22.8606 18.4883C22.7764 18.2844 22.2619 17.6408 20.623 16.565C19.4331 15.7849 18.449 15.3003 18.0505 15.1618C17.7437 15.4612 17.4387 15.8429 17.1656 16.1852C16.6155 16.8737 16.2526 17.3284 15.7699 17.3602C14.9691 17.4163 12.3386 15.8092 10.2638 13.7343C8.19083 11.6614 6.58372 9.02714 6.63798 8.22827C6.66979 7.74557 7.12442 7.38075 7.81291 6.83257C8.15529 6.55942 8.53695 6.25446 8.8363 5.94763C8.69785 5.551 8.21329 4.56503 7.43312 3.37513C6.35735 1.73622 5.71375 1.22172 5.50982 1.13753H5.50795Z" fill="%2300a1e2" /></svg>') center no-repeat;
  background-size: contain;
  width: 1em;
  height: 1em;
}

@media screen and (min-width: 845px) {
  #company .grid {
    display: grid;
    gap: var(--num-24) var(--num-128);
    grid-template-areas: "t i" "t m";
  }
}
@media screen and (min-width: 845px) {
  #company .img {
    grid-area: i;
    width: 38.33vw;
    max-width: 552px;
  }
}
#company .img img {
  border-radius: var(--num-8);
}
@media screen and (min-width: 845px) {
  #company .dl-table {
    grid-area: t;
    width: 41.66vw;
    max-width: 600px;
  }
}
@media screen and (min-width: 845px) {
  #company .google-maps {
    grid-area: m;
    width: 38.33vw;
    max-width: 552px;
  }
}
#company .google-maps iframe {
  border-radius: var(--num-8);
  overflow: hidden;
}

.dl-table {
  margin: var(--num-40) 0;
}
@media screen and (min-width: 845px) {
  .dl-table {
    margin: 0;
  }
}
.dl-table div {
  border-bottom: 1px solid var(--color-border);
  display: flex;
}
.dl-table div:first-of-type {
  border-top: 1px solid var(--color-border);
}
.dl-table dt {
  width: 25%;
  padding: var(--num-16);
  white-space: nowrap;
}
.dl-table dd {
  width: 75%;
  padding: var(--num-16);
}

.list-disc {
  padding-left: 1em;
}
.list-disc li {
  text-indent: -1em;
}
.list-disc li::before {
  content: "・";
}

.notice {
  padding-left: 1em;
}
.notice li {
  text-indent: -1em;
}
.notice li::before {
  content: "※";
}

#client {
  text-align: center;
}
#client.sec {
  padding-bottom: 0;
}
#client .client-list li:not(:first-of-type) {
  margin-top: var(--num-16);
}
#client .client-list a {
  transition: all 0.3s;
}
#client .client-list a::after {
  margin-left: var(--num-8);
  content: "";
  background: url('data:image/svg+xml;utf8,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.43141 11.4743H12.5234V4.73101H4.43141V11.4743ZM4.43141 12.823C4.06053 12.823 3.74304 12.6909 3.47892 12.4268C3.21481 12.1627 3.08275 11.8452 3.08275 11.4743V3.38235C3.08275 3.01147 3.21481 2.69397 3.47892 2.42986C3.74304 2.16575 4.06053 2.03369 4.43141 2.03369H12.5234C12.8942 2.03369 13.2117 2.16575 13.4759 2.42986C13.74 2.69397 13.872 3.01147 13.872 3.38235V11.4743C13.872 11.8452 13.74 12.1627 13.4759 12.4268C13.2117 12.6909 12.8942 12.823 12.5234 12.823H4.43141ZM1.7341 15.5203C1.36321 15.5203 1.04572 15.3882 0.781606 15.1241C0.517493 14.86 0.385437 14.5425 0.385437 14.1716V4.73101H1.7341V14.1716H11.1747V15.5203H1.7341Z" fill="%23333333"/></svg>') center no-repeat;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  width: var(--num-16);
  height: var(--num-16);
  display: inline-block;
  transition: all 0.3s;
}
#client .client-list a:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}
#client .client-list a:hover::after {
  background: url('data:image/svg+xml;utf8,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.43141 11.4743H12.5234V4.73101H4.43141V11.4743ZM4.43141 12.823C4.06053 12.823 3.74304 12.6909 3.47892 12.4268C3.21481 12.1627 3.08275 11.8452 3.08275 11.4743V3.38235C3.08275 3.01147 3.21481 2.69397 3.47892 2.42986C3.74304 2.16575 4.06053 2.03369 4.43141 2.03369H12.5234C12.8942 2.03369 13.2117 2.16575 13.4759 2.42986C13.74 2.69397 13.872 3.01147 13.872 3.38235V11.4743C13.872 11.8452 13.74 12.1627 13.4759 12.4268C13.2117 12.6909 12.8942 12.823 12.5234 12.823H4.43141ZM1.7341 15.5203C1.36321 15.5203 1.04572 15.3882 0.781606 15.1241C0.517493 14.86 0.385437 14.5425 0.385437 14.1716V4.73101H1.7341V14.1716H11.1747V15.5203H1.7341Z" fill="%2300a1e2"/></svg>') center no-repeat;
}

#footer {
  border-top: 1px solid var(--color-border);
  text-align: center;
  display: grid;
  grid-template: "i t" auto "c c" auto/1fr auto;
}
@media screen and (min-width: 845px) {
  #footer {
    border-top: none;
    border-bottom: var(--num-8) solid var(--color-green);
    text-align: left;
    width: 100%;
    grid-template: "i t" auto "c t" auto/1fr auto;
  }
}
#footer.sec {
  margin-inline: var(--num-32);
  padding-block: var(--num-24);
}
@media screen and (min-width: 1441px) {
  #footer.sec {
    border-radius: 0;
  }
}
@media screen and (min-width: 845px) {
  #footer.sec {
    margin-inline: 0;
    padding-top: 0;
    padding-bottom: var(--num-48);
  }
}
#footer #to-top {
  grid-area: t;
  width: var(--num-120);
  transition: all 0.3s;
}
@media screen and (min-width: 845px) {
  #footer #to-top {
    margin-top: 0;
    width: auto;
  }
}
#footer #to-top:hover {
  translate: 0 calc(var(--num-8) * -1);
}
#footer #sns {
  padding-inline: var(--num-24);
  grid-area: i;
  align-self: center;
  text-align: left;
  transition: all 0.3s;
}
@media screen and (min-width: 845px) {
  #footer #sns {
    padding-inline: 0;
    align-self: end;
  }
}
#footer #sns:hover {
  opacity: 0.8;
}
#footer #copyright {
  font-size: var(--num-14);
  grid-area: c;
}
@media screen and (min-width: 845px) {
  #footer #copyright {
    margin-top: var(--num-16);
    align-self: start;
  }
}

#fixed-footer {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
#fixed-footer li {
  width: 50%;
  font-size: var(--num-24);
  font-weight: 500;
  text-align: center;
  text-shadow: 0 0 var(--num-8) hsla(0, 0%, 0%, 0.25);
  padding: var(--num-24);
  color: var(--color-body);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--num-8);
  line-height: 1;
}
#fixed-footer li.tel {
  background: var(--color-blue);
}
#fixed-footer li.tel::before {
  content: "";
  background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.4191 24C18.305 24 18.1908 23.9925 18.0767 23.9738C13.1749 23.2367 9.09261 20.03 6.53134 17.4687C3.97007 14.9074 0.761461 10.8251 0.0261939 5.92331C-0.351729 3.40881 3.59963 0.679155 5.16558 0.0673683C5.6464 -0.119722 6.39663 -0.050499 7.97007 2.17401C8.49766 2.9205 9.03087 3.79047 9.43312 4.56316C10.0355 5.72125 10.131 6.17775 9.84097 6.51452C9.45931 6.95792 8.95604 7.35829 8.5145 7.7119C8.25445 7.91957 7.91207 8.19272 7.77924 8.34613C7.94575 8.89992 9.03648 10.9205 11.0589 12.943C13.0814 14.9654 15.102 16.0561 15.6558 16.2227C15.8092 16.0898 16.0823 15.7474 16.29 15.4874C16.6436 15.044 17.0458 14.5426 17.4874 14.159C17.8241 13.8691 18.2788 13.9626 19.4387 14.5669C20.2114 14.9691 21.0814 15.5024 21.8279 16.03C24.0524 17.6034 24.1216 18.3555 23.9345 18.8344C23.3489 20.3293 20.8344 24 18.421 24H18.4191ZM5.50795 1.13753C4.03742 1.74557 0.886811 4.10104 1.13564 5.75493C1.82601 10.3555 4.88307 14.232 7.3246 16.6735C9.76614 19.1151 13.6427 22.1721 18.2432 22.8625C19.8971 23.1095 22.2526 19.9589 22.8606 18.4883C22.7764 18.2844 22.2619 17.6408 20.623 16.565C19.4331 15.7849 18.449 15.3003 18.0505 15.1618C17.7437 15.4612 17.4387 15.8429 17.1656 16.1852C16.6155 16.8737 16.2526 17.3284 15.7699 17.3602C14.9691 17.4163 12.3386 15.8092 10.2638 13.7343C8.19083 11.6614 6.58372 9.02714 6.63798 8.22827C6.66979 7.74557 7.12442 7.38075 7.81291 6.83257C8.15529 6.55942 8.53695 6.25446 8.8363 5.94763C8.69785 5.551 8.21329 4.56503 7.43312 3.37513C6.35735 1.73622 5.71375 1.22172 5.50982 1.13753H5.50795Z" fill="%23ffffff" /></svg>') center no-repeat;
  background-size: contain;
  width: 1.25em;
  height: 1.25em;
  display: block;
}
#fixed-footer li.tel .time {
  font-size: var(--num-14);
  letter-spacing: 0.05em;
}
#fixed-footer li.mail {
  background: var(--gra-orange);
}
#fixed-footer li.mail::before {
  content: "";
  background: url('data:image/svg+xml;utf8,<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.4736 16H0.526354C0.235105 16 0 15.7691 0 15.4869V0.513149C0 0.229207 0.235105 0 0.526354 0H23.4736C23.7649 0 24 0.229207 24 0.513149V15.4869C24 15.7708 23.7649 16 23.4736 16ZM1.05271 14.9737H22.9473V1.0263H1.05271V14.9737Z" fill="%23ffffff" /><path d="M12.0009 11.2397C11.8746 11.2397 11.7465 11.1952 11.6465 11.1063L0.17194 0.892868C-0.043865 0.701292 -0.0579011 0.376298 0.13685 0.167617C0.333356 -0.0427745 0.666713 -0.0564585 0.880764 0.133407L11.9991 10.0303L23.1192 0.133407C23.3333 -0.058169 23.6666 -0.0427745 23.8631 0.165906C24.0597 0.374587 24.0439 0.699582 23.8298 0.891158L12.3553 11.1045C12.2553 11.1935 12.1272 11.238 12.0009 11.238V11.2397Z" fill="%23ffffff" /></svg>') center no-repeat;
  background-size: contain;
  width: 1.25em;
  height: 1.25em;
  display: block;
}
@media screen and (min-width: 845px) {
  #fixed-footer {
    display: none;
  }
}
#fixed-footer.is-fixed {
  position: sticky;
  bottom: 0;
  z-index: 100;
  animation: sticky 0.3s ease-out;
}
@keyframes sticky {
  0% {
    translate: 0 100%;
  }
  100% {
    translate: 0 0;
  }
}

.js-to-top {
  cursor: pointer;
}/*# sourceMappingURL=style.css.map */