@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
/* Base styles */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: #fff;
  padding: 15px 0px;
  font-family: "Zen Kaku Gothic Antique", -apple-system, sans-serif;
  color: #000;
  font-size: 18px;
  line-height: 1.5;
}

a {
  color: #18943B;
}
a[href^=tel]:not(.bttn):before {
  content: "\f095";
  display: inline-block;
  margin-right: 6px;
  font-family: "Font Awesome 6 Pro", sans-serif;
  font-weight: 700;
}
a[href*="maps.app.goo.gl"]:not(.bttn):before {
  content: "\f3c5";
  display: inline-block;
  margin-right: 6px;
  font-family: "Font Awesome 6 Pro", sans-serif;
  font-weight: 700;
}

img {
  max-width: 100%;
  height: auto;
  border: 0px none transparent;
}

li {
  list-style: none inside;
}

.blockbox {
  width: 100%;
  margin: 0px auto 45px;
}
.blockbox > .inner {
  width: 980px;
  margin: 0px auto;
}
@media screen and (max-width: 980px) {
  .blockbox > .inner {
    width: 94%;
  }
}

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

.sp {
  display: none;
}
@media screen and (max-width: 544px) {
  .sp br.sp,
.sp span.sp,
.sp a.sp,
.sp b.sp,
.sp i.sp,
.sp strong.sp,
.sp em.sp {
    display: inline-block;
  }
  .sp div.sp,
.sp p.sp,
.sp section.sp,
.sp article.sp,
.sp ul.sp,
.sp ol.sp,
.sp li.sp,
.sp h1.sp,
.sp h2.sp,
.sp h3.sp,
.sp h4.sp,
.sp h5.sp,
.sp h6.sp {
    display: block;
  }
  .sp table {
    display: table;
  }
}

.dotline, #content_overview ul.itemlist li:nth-child(1):before, #content_overview ul.itemlist li:after {
  content: "";
  display: block;
  width: 100%;
  height: 18px;
  background: radial-gradient(circle, #fff 9px, transparent 9px) repeat-x center center/36px 18px; /* ドット+間隔＝36px */
}

.balloon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 15px;
  position: relative;
  margin: 50px auto 10px;
}
.balloon .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
  width: 160px;
  aspect-ratio: 1;
  position: relative;
  background-color: #fff;
  border: 4px solid #18943B;
  border-radius: 50%;
  font-family: "Noto Sans JP", -apple-system, Roboto, Helvetica, sans-serif;
  color: #18943B;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  text-aliign: center;
}
.balloon .item:before {
  display: block;
  position: absolute;
  z-index: 1;
}
.balloon .item:nth-child(1):before {
  content: url(img000/icon_flog.svg);
  bottom: -50px;
  left: 0px;
}
.balloon .item:last-child:before {
  content: url(img000/icon_angel.svg);
  top: -100px;
  right: 0px;
}
.balloon .item dt {
  font-size: 21px;
}
.balloon .item dd {
  font-size: 30px;
}

.logomark {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px;
  font-size: 16px;
}

.service_highlight {
  margin-bottom: 15px;
  font-family: "Noto Sans JP", -apple-system, Roboto, Helvetica, sans-serif;
  font-size: 30px;
  color: #18943B;
  font-weight: 500;
}

form {
  padding: 15px 0px;
}

input,
textarea {
  font-size: 100%;
  font-weight: normal;
}

textarea {
  height: 200px;
}

input.area,
textarea.area {
  width: 480px;
  background: #D8EED5;
  border: 1px solid #18943B;
  padding: 6px;
}
@media screen and (max-width: 544px) {
  input.area,
textarea.area {
    width: 100%;
  }
}

input + br + input {
  margin-top: 6px;
}
input.middle {
  width: 360px;
}
@media screen and (max-width: 544px) {
  input.middle {
    width: 100%;
  }
}
input.short {
  width: 120px;
}
input.mini {
  width: 80px;
}
input.micro {
  width: 60px;
}

textarea.short {
  width: 450px;
  height: 100px;
}
@media screen and (max-width: 544px) {
  textarea.short {
    width: 100%;
  }
}

form .remarks {
  margin: 0px;
  font-size: 14px;
  color: #999;
  line-height: 1.6em;
}

form .announce {
  margin-left: 15px;
  margin-right: 15px;
  padding: 15px 0px;
  color: #000;
  text-align: center;
}

form p#caution_confirm_system_mail {
  visibility: hidden;
  margin-bottom: 0px;
}

/*
.inquiry_form
------------------------------*/
.inquiry_form {
  width: 100%;
  margin: 0px 0px 15px;
}
.inquiry_form th {
  border-bottom: 1px solid #999;
  padding: 15px 15px 15px 0px;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .inquiry_form th {
    white-space: normal;
  }
}
@media screen and (max-width: 544px) {
  .inquiry_form th {
    display: block;
    width: 100%;
    background: none;
    padding-bottom: 0px;
  }
}
.inquiry_form td {
  border-bottom: 1px solid #999;
  padding: 15px 0px;
  vertical-align: top;
}
@media screen and (max-width: 544px) {
  .inquiry_form td {
    display: block;
    width: 100%;
    padding-top: 0px;
  }
}

#inquiry_privacy_policy textarea {
  width: 100%;
  font-size: 16px;
}

#inquiry_form_wrapper .error_message {
  color: #ff0000;
}
#inquiry_form_wrapper + table {
  margin: 0px auto;
}
#inquiry_form_wrapper + table td {
  padding: 0px 15px;
}
#headerbox {
  text-align: center;
}
#headerbox .tagline {
  margin-bottom: 6px;
  font-weight: 700;
}
#headerbox .kanban {
  width: 100%;
  min-height: 400px;
  background: url(img/header_kanban.webp) no-repeat center center/cover;
}
#headerbox .kanban img {
  visibility: hidden;
}

#content_introduction {
  color: #18943B;
  text-align: center;
}
#content_introduction .balloon {
  margin: -50px auto 65px;
}
#content_introduction p {
  margin-bottom: 15px;
  font-weight: 500;
  color: #000;
}
#content_introduction .feature {
  display: table;
  margin: 0px auto 30px;
  font-weight: bold;
  text-align: left;
}
#content_introduction .feature li:before {
  content: "●";
  display: inline-block;
}
#content_introduction a.bttn,
#content_introduction button {
  display: inline-block;
  background-color: #fff;
  border: 3px solid #18943B;
  border-radius: 40px;
  -webkit-box-shadow: 2px 6px 0px #18943B;
          box-shadow: 2px 6px 0px #18943B;
  margin: 0px auto;
  padding: 15px 60px;
  font-family: "Noto Sans JP", -apple-system, Roboto, Helvetica, sans-serif;
  font-size: 24px;
  color: #18943B;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.05em;
  text-align: center;
  cursor: pointer;
}

#content_overview ul.itemlist {
  background-color: #D8EED5;
  border-top: 30px solid #D8EED5;
}
#content_overview ul.itemlist li:after {
  padding-bottom: 78px;
}
#content_overview ul.itemlist li:nth-child(1):before {
  margin-bottom: 60px;
}
#content_overview ul.itemlist li:last-child {
  background-color: #fff;
  padding: 45px 0px;
}
#content_overview ul.itemlist li:last-child:after {
  display: none;
}
#content_overview ul.itemlist li:last-child p {
  color: #18943B;
  font-size: 21px;
  font-weight: 700;
}
#content_overview ul.itemlist li .inner {
  width: 980px;
  margin: 0px auto;
}
@media screen and (max-width: 980px) {
  #content_overview ul.itemlist li .inner {
    width: 94%;
  }
}
#content_overview ul.itemlist li img {
  display: table;
  margin: 0px auto 15px;
}
#content_overview ul.itemlist li h4 small,
#content_overview ul.itemlist li h4 span {
  display: block;
  margin-bottom: 6px;
  color: #18943B;
  line-height: 1.25em;
}
#content_overview ul.itemlist li h4 small {
  font-size: 21px;
  font-weight: 500;
}
#content_overview ul.itemlist li h4 span {
  font-family: "Noto Sans JP", -apple-system, Roboto, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

#content_point {
  width: 100%;
  background-color: #F4F4F4;
  padding: 45px 60px;
}
@media screen and (max-width: 544px) {
  #content_point {
    padding: 30px 0px;
  }
}
#content_point .kanban {
  margin-bottom: 15px;
  text-align: center;
}
#content_point h3 {
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
#content_point .itemlist {
  width: 980px;
  background-color: #fff;
  margin: 0px auto;
}
@media screen and (max-width: 980px) {
  #content_point .itemlist {
    width: 94%;
  }
}
#content_point .itemlist li {
  border-top: 1px solid #999;
  padding: 12px 30px 30px;
}
@media screen and (max-width: 544px) {
  #content_point .itemlist li {
    padding-left: 0px;
    padding-right: 0px;
  }
}
#content_point .itemlist li h4 {
  margin-bottom: 6px;
  line-height: 1.25em;
  text-align: center;
}
#content_point .itemlist li h4:before {
  content: "";
  display: table;
  width: 50px;
  height: 3px;
  background-color: #18943B;
  margin: 0px auto 30px;
}

#content_voice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  background-color: #D8EED5;
  padding: 60px 0px 90px;
}
#content_voice > .inner {
  width: 94%;
  margin: 0px auto;
  overflow-x: scroll;
}
#content_voice h3 {
  margin: 0px 0px 30px;
  font-weight: 500;
  text-align: center;
}
#content_voice h3:before {
  content: "";
  display: block;
  width: 375px;
  height: 112px;
  background: url(img/voice_title.png) no-repeat center center/cover;
  margin: 0px auto;
}
#content_voice h3 small,
#content_voice h3 span {
  display: block;
}
#content_voice h3 small {
  font-size: 48px;
}
#content_voice h3 span {
  font-size: 30px;
}
#content_voice .itemlist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  width: 100%;
}
#content_voice .itemlist li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: calc((100vw - 90px) / 4);
  max-width: 100%;
}
@media screen and (max-width: 1280px) {
  #content_voice .itemlist li {
    width: calc((100vw - 30px) / 2);
  }
}
@media screen and (max-width: 544px) {
  #content_voice .itemlist li {
    width: 94vw;
  }
}
#content_voice .itemlist li img {
  max-width: 240px;
  border-radius: 2px;
  margin: 0px auto 15px;
}
#content_voice .itemlist li h4.client {
  margin: 0px 0px 15px;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
}
#content_voice .itemlist li dt {
  background-color: #fff;
  border-radius: 2px;
  margin-bottom: 6px;
  padding: 6px 15px;
}
#content_voice .itemlist li .item {
  margin-bottom: 15px;
}

#footerbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
#footerbox .balloon {
  margin-top: 0px;
  margin-bottom: 200px;
}
#footerbox .balloon .item:nth-child(1):before {
  top: auto;
  bottom: -180px;
  left: auto;
  right: -10px;
}
#footerbox .balloon .item:last-child:before {
  top: auto;
  bottom: -180px;
  left: -60px;
  right: auto;
}
#footerbox .kanban {
  margin: 0px auto 30px;
}
#footerbox .logomark {
  margin-bottom: 30px;
}
#footerbox address {
  margin: 0px auto 15px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  text-align: center;
}
#footerbox .copyright span,
#footerbox .copyright small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

/*
modaal.js
*/
.modaal-inner-wrapper {
  padding: 25px !important;
}

.modaal-container {
  height: calc(100vh - 50px);
  padding: 20px;
}

.modaal-image .modaal-container {
  height: auto;
}

.modaal-close::after,
.modaal-close::before {
  width: 2px !important;
}

.modaal-close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  background-color: #999 !important;
}
.modaal-close:hover {
  background-color: #000 !important;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.modaal-close:focus::after,
.modaal-close:focus::before,
.modaal-close:hover::after,
.modaal-close:hover::before {
  background-color: #fff !important;
}

.modaal-gallery-control {
  background: #000;
}