@charset "utf-8";
/* CSS Document */

main {
  overflow-x: clip;
}
#mv_service_detail + .wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 80px;
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw 0 100vw;
  padding-bottom: 108px;
}
#tuiju_contact {
  display: none;
}
@media screen and (max-width: 750px) {
  #mv_service_detail + .wrap {
    gap: 9.86666666666667vw;
    padding-bottom: 9.06666666666667vw;
  }
  #tuiju_contact {
    display: block;
  }
}

/* ===============================
	service_detail_con
 =============================== */
.service_detail_con {
  background: url(../img/service/common_bg.webp) center no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
  padding-top: 54px;
}
.service_detail_con h2.title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.684210526315789;
  text-align: center;
  border-bottom: #bddeb0 3px solid;
}
.service_detail_con h3 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.service_detail_con p {
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 2;
}
.service_detail_con .btn_area {
  text-align: center;
}
@media screen and (max-width: 750px) {
  .service_detail_con {
    padding-top: 5.86666666666667vw;
  }
  .service_detail_con h2.title {
    font-size: 5.06666666666667vw;
    line-height: 1.763157894736842;
  }
  .service_detail_con h3 {
    letter-spacing: 0.04em;
    line-height: 1.666666666666667;
  }
  .service_detail_con p {
    font-size: 3.33333333333333vw;
    letter-spacing: 0.03em;
  }
}

/* green */
main.green .service_detail_con h2.title {
  border-color: #bddeb0;
}
main.green .service_detail_con h3 {
  color: var(--C-green);
}

/* blue */
main.blue .service_detail_con h2.title {
  border-color: #acd5e9;
}
main.blue .service_detail_con h3 {
  color: var(--C-Dblue);
}

/* ===============================
	con_L
 =============================== */
.service_detail_con.con_L {
  width: 100%;
  padding-bottom: 68px;
  padding-left: 48px;
  padding-right: 48px;
}
.service_detail_con.con_L h2.title {
  margin-bottom: 50px;
  padding-bottom: 16px;
}
.service_detail_con.con_L .con_L_main {
  position: relative;
  margin-bottom: 50px;
}
.service_detail_con.con_L .con_L_main .img_1,
.service_detail_con.con_L .con_L_main .img_2 {
  position: absolute;
  top: 0;
}
.service_detail_con.con_L .con_L_main .img_1 {
  right: calc(370px + 54px);
}
.service_detail_con.con_L .con_L_main .img_2 {
  right: calc(-510px - 48px);
}
.service_detail_con.con_L .con_L_main .txt_area{
  width: 370px;
  margin-left: auto;
  margin-right: 0;
}
.service_detail_con.con_L .con_L_main h3 {
  font-size: 27px;
  line-height: 1.851851851851852;
  margin-bottom: 20px;
}
.service_detail_con.con_L .con_L_sub ul {
  display: flex;
  flex-direction: row;
  gap: 54px;
}
.service_detail_con.con_L .con_L_sub li {
  width: calc((100% - 54px) / 2);
}
.service_detail_con.con_L .con_L_sub li p {
  margin-top: 8px;
}
.service_detail_con.con_L .con_L_sub.single li {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 54px;
}
.service_detail_con.con_L .con_L_sub.single li .list_img {
  width: calc((100% - 54px) / 2);
}
.service_detail_con.con_L .con_L_sub.single li p {
  width: calc((100% - 54px) / 2);
  margin-top: 0;
}
.service_detail_con.con_L strong {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.772727272727273;
  display: block;
  margin-top: 18px;
}
.service_detail_con.con_L .btn_area {
  margin-top: 46px;
}
@media screen and (max-width: 750px) {
  .service_detail_con.con_L {
    padding-bottom: 8.8vw;
    padding-left: 4.53333333333333vw;
    padding-right: 4.53333333333333vw;
  }
  .service_detail_con.con_L h2.title {
    margin-bottom: 4.53333333333333vw;
    padding-bottom: 4.26666666666667vw;
  }
  .service_detail_con.con_L .con_L_main {
    margin-bottom: 3.73333333333333vw;
    padding-top: 47.46666666666667vw;
    padding-left: 2.93333333333333vw;
    padding-right: 2.93333333333333vw;
  }
  .service_detail_con.con_L .con_L_main .img_1,
  .service_detail_con.con_L .con_L_main .img_2 {
    position: absolute;
    top: 0;
  }
  .service_detail_con.con_L .con_L_main .img_1 {
    width: auto;
    height: 42.93333333333333vw;
    left: calc(0% - (5% + 4.53333333333333vw));
    right: auto;
  }
  .service_detail_con.con_L .con_L_main .img_2 {
    width: auto;
    height: 42.93333333333333vw;
    right: calc(0% - (5% + 4.53333333333333vw));
  }
  .service_detail_con.con_L .con_L_main .txt_area{
    width: 100%;
  }
  .service_detail_con.con_L .con_L_main h3 {
    font-size: 4.4vw;
    line-height: 1.666666666666667;
    margin-bottom: 2.66666666666667vw;
  }
  .service_detail_con.con_L .con_L_sub {
    padding-left: 2.93333333333333vw;
    padding-right: 2.93333333333333vw;
  }
  .service_detail_con.con_L .con_L_sub ul {
    flex-direction: column;
    gap: 7.46666666666667vw;
  }
  .service_detail_con.con_L .con_L_sub li {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .service_detail_con.con_L .con_L_sub li:nth-child(even) {
    flex-direction: row-reverse;
  }
  .service_detail_con.con_L .con_L_sub li p {
    width: 34.66666666666667vw;
    margin-top: 0;
  }
  .service_detail_con.con_L .con_L_sub li:nth-child(odd) p {
    margin-left: auto;
    margin-right: 0;
  }
  .service_detail_con.con_L .con_L_sub li:nth-child(even) p {
    margin-left: 0;
    margin-right: auto;
  }
  .service_detail_con.con_L .con_L_sub li .list_img {
    width: 47.46666666666667vw;
  }
  .service_detail_con.con_L .con_L_sub li:nth-child(odd) .list_img {
    margin-left: calc(0% - (5% + 4.53333333333333vw + 2.93333333333333vw));
  }
  .service_detail_con.con_L .con_L_sub li:nth-child(even) .list_img {
    margin-right: calc(0% - (5% + 4.53333333333333vw + 2.93333333333333vw));
  }
  .service_detail_con.con_L .con_L_sub.single li {
    flex-direction: column;
    gap: 3.2vw;
  }
  .service_detail_con.con_L .con_L_sub.single li .list_img {
    width: 89.06666666666667vw;
    margin-left: calc(0% - (5% + 4.53333333333333vw + 2.93333333333333vw));
  }
  .service_detail_con.con_L .con_L_sub.single li p {
    width: 100%;
    margin-top: 0;
  }
  .service_detail_con.con_L strong {
    font-size: 4vw;
    letter-spacing: 0.04em;
    line-height: 1.833333333333333;
    margin-top: 6.4vw;
    padding: 0 2.93333333333333vw;
  }
  .service_detail_con.con_L .btn_area {
    margin-top: 8.53333333333333vw;
  }
}

/* 偶数個 */
.service_detail_con.con_L:nth-child(even) .con_L_main .img_1 {
  left: calc(370px + 54px);
  right: auto;
}
.service_detail_con.con_L:nth-child(even) .con_L_main .txt_area {
  margin-left: 0;
  margin-right: auto;
}
.service_detail_con.con_L:nth-child(even) .con_L_main .img_2 {
  left: calc(-510px - 48px);
  right: auto;
}
@media screen and (max-width: 750px) {
  .service_detail_con.con_L:nth-child(even) .con_L_main .img_1 {
    left: auto;    
    right: calc(0% - (5% + 4.53333333333333vw));
  }
  .service_detail_con.con_L:nth-child(even) .con_L_main .txt_area {
    margin-left: auto;
    margin-right: 0;
  }
  .service_detail_con.con_L:nth-child(even) .con_L_main .img_2 {
    height: 42.93333333333333vw;
    left: calc(0% - (5% + 4.53333333333333vw));    
    right: auto;
  }
}

/* ===============================
	con_S
 =============================== */
.service_detail_con.con_S {
  width: calc((100% - 80px) / 2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 28px;
  padding-left: 36px;
  padding-right: 36px;
}
.service_detail_con.con_S h2.title {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding-bottom: 40px;
}
.service_detail_con.con_S h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
.service_detail_con.con_S p {
  margin-bottom: 234px;
}
.service_detail_con.con_S img {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}
@media screen and (max-width: 750px) {
  .service_detail_con.con_S {
    width: 100%;
    padding-top: 10.93333333333333vw;
    padding-bottom: 8vw;
    padding-left: 4.53333333333333vw;
    padding-right: 4.53333333333333vw;
  }
  .service_detail_con.con_S h2.title {
    height: 19.46666666666667vw;
    margin-bottom: 3.46666666666667vw;
    padding-bottom: 7.73333333333333vw;
  }
  .service_detail_con.con_S h3 {
    font-size: 4.4vw;
    margin-bottom: 3.2vw;
  }
  .service_detail_con.con_S p {
    margin-bottom: 58.93333333333333vw;
  }
  .service_detail_con.con_S img {
    width: calc(100% + (4% * 2));
    max-width: none;
    position: absolute;
    bottom: 27vw;
    left: -4%;
    right: -4%;
  }
}

/* ===============================
	gateway
 =============================== */
.gateway #mv_service_detail {
  background-image: url(../img/service/con_1/mv_bg.webp);
}
.gateway #mv_service_detail h2.title {
  top: -56px;
}

.gateway #mv_service_detail h3 {
  margin-top: -30px;
}
@media screen and (max-width: 750px) {
  .gateway #mv_service_detail {
    background-image: url(../img/service/con_1/mv_bg_sp.webp);
  }
  main.green.gateway #mv_service_detail h2.title {
    top: -17.86666666666667vw;
  }
  main.green.gateway #mv_service_detail h2.title::after {
    margin-top: -2vw;
  }
  .gateway #mv_service_detail h3 {
    margin-top: -7.4vw;
  }
}

.gateway .service_detail_con.con_L.con_1 .con_L_main{
  min-height: 502px;
}
.gateway .service_detail_con.con_L.con_2 .con_L_main{
  min-height: 562px;
}
@media screen and (max-width: 750px) {
  .gateway .service_detail_con.con_L.con_1 .con_L_main,
  .gateway .service_detail_con.con_L.con_2 .con_L_main {
    min-height: auto;
  }
}

/* ===============================
	carport
 =============================== */
.carport #mv_service_detail {
  background-image: url(../img/service/con_2/mv_bg.webp);
}
.carport #mv_service_detail h2.title {
  top: -56px;
}
.carport #mv_service_detail h3 {
  margin-top: -30px;
}
@media screen and (max-width: 750px) {
  .carport #mv_service_detail {
    background-image: url(../img/service/con_2/mv_bg_sp.webp);
  }
  .carport #mv_service_detail h2.title {
    top: -21vw;
  }
  .carport #mv_service_detail h2.title::after {
    margin-top: 2.4vw;
  }
  .carport #mv_service_detail h3 {
    margin-top: -12.4vw;
  }
}

.carport .service_detail_con.con_L.con_1 .con_L_main{
  min-height: 450px;
}
.carport .service_detail_con.con_L .con_L_main h3 {
  letter-spacing: 0.05em;
}
.carport .service_detail_con.con_L.con_2 .con_L_main{
  min-height: 514px;
}
.carport .service_detail_con.con_L.con_3 .con_L_main{
  min-height: 508px;
}
@media screen and (max-width: 750px) {
  .carport .service_detail_con.con_L.con_1 .con_L_main,
  .carport .service_detail_con.con_L.con_2 .con_L_main,
  .carport .service_detail_con.con_L.con_3 .con_L_main {
    min-height: auto;
  }
}

/* ===============================
	garden
 =============================== */
.garden #mv_service_detail {
  background-image: url(../img/service/con_3/mv_bg.webp);
}
.garden #mv_service_detail h2.title {
  top: -62px;
}
main.green.garden #mv_service_detail h2.title::after {
  margin-top: 0;
}
@media screen and (max-width: 750px) {
  .garden #mv_service_detail {
    background-image: url(../img/service/con_3/mv_bg_sp.webp);
  }
  main.green.garden #mv_service_detail h2.title {
    top: -19.46666666666667vw;
  }
  main.green.garden #mv_service_detail h2.title::after {
    margin-top: 2vw;
  }
  .garden #mv_service_detail h3 {
    margin-top: -12.4vw;
  }
}

main.green.garden .price_plan.bg_green + .wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 80px;
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw 0 100vw;
  border-image-source: linear-gradient(#bddeb0, #bddeb0);
  padding-top: 60px;
  padding-bottom: 140px;
}
.garden .service_detail_con.con_L.con_1 .con_L_main{
  min-height: 504px;
}
.garden .service_detail_con.con_L.con_2 .con_L_main{
  min-height: 564px;
}
.garden .service_detail_con.con_L.con_3 .con_L_main{
  min-height: 572px;
}
.garden .service_detail_con.con_L.con_3 .con_L_main h3 {
  letter-spacing: 0.05em;
}
.garden .service_detail_con.con_S.con_6 h3 {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 750px) {
  main.green.garden .price_plan.bg_green + .wrap {
    gap: 9.86666666666667vw;
    padding-top: 6.13333333333333vw;
    padding-bottom: 9.06666666666667vw;
  }
  .garden .service_detail_con.con_L.con_1 .con_L_main,
  .garden .service_detail_con.con_L.con_2 .con_L_main,
  .garden .service_detail_con.con_L.con_3 .con_L_main {
    min-height: auto;
  }
}

/* ===============================
	boundary-fence
 =============================== */
.boundary-fence #mv_service_detail {
  background-image: url(../img/service/con_4/mv_bg.webp);
}
.boundary-fence #mv_service_detail h2.title {
  top: -38px;
}
.boundary-fence #mv_service_detail h2.title::after {
  margin-top: -50px;
}
@media screen and (max-width: 750px) {
  .boundary-fence #mv_service_detail {
    background-image: url(../img/service/con_4/mv_bg_sp.webp);
  }
  .boundary-fence #mv_service_detail h2.title {
    top: -15vw;
  }
  .boundary-fence #mv_service_detail h2.title::after {
    margin-top: -6.6vw;
  }
  .boundary-fence #mv_service_detail h3 {
    margin-top: -3vw;
  }
}

.boundary-fence .service_detail_con.con_L.con_1 .con_L_main{
  min-height: 450px;
}
.boundary-fence .service_detail_con.con_L.con_2 .con_L_main{
  min-height: 514px;
}
.boundary-fence .service_detail_con.con_L.con_3 .con_L_main{
  min-height: 508px;
}
@media screen and (max-width: 750px) {
  .boundary-fence .service_detail_con.con_L.con_1 .con_L_main,
  .boundary-fence .service_detail_con.con_L.con_2 .con_L_main,
  .boundary-fence .service_detail_con.con_L.con_3 .con_L_main {
    min-height: auto;
  }
}

/* ===============================
	lighting
 =============================== */
.lighting #mv_service_detail {
  background-image: url(../img/service/con_5/mv_bg.webp);
}
.lighting #mv_service_detail h2.title {
  letter-spacing: -0.02em;
  top: -82px;
}
main.green.lighting  #mv_service_detail h2.title::after {
  margin-top: 40px;
}
.lighting #mv_service_detail h3 {
  margin-top: -80px;
}
@media screen and (max-width: 750px) {
  .lighting #mv_service_detail {
    background-image: url(../img/service/con_5/mv_bg_sp.webp);
  }
  main.green.lighting #mv_service_detail h2.title {
    top: -21.8vw;
  }
  main.green.lighting #mv_service_detail h2.title::after {
    margin-top: 8vw;
  }
  .lighting #mv_service_detail h3 {
    margin-top: -17.4vw;
  }
}

.lighting .service_detail_con.con_L.con_1 .con_L_main{
  min-height: 502px;
}
@media screen and (max-width: 750px) {
  .lighting .service_detail_con.con_L.con_1 .con_L_main {
    min-height: auto;
  }
}

/* ===============================
	exterior-others
 =============================== */
.exterior-others #mv_service_detail {
  background-image: url(../img/service/con_6/mv_bg.webp);
}
.exterior-others #mv_service_detail h2.title {
  top: -66px;
}
.exterior-others #mv_service_detail h2.title::after {
  margin-top: -10px;
}
.exterior-others #mv_service_detail h3 {
  margin-top: -30px;
}
@media screen and (max-width: 750px) {
  .exterior-others #mv_service_detail {
    background-image: url(../img/service/con_6/mv_bg_sp.webp);
  }
  .exterior-others #mv_service_detail h2.title {
    top: -16vw;
  }
  .exterior-others #mv_service_detail h2.title::after {
    margin-top: -1.6vw;
  }
  .exterior-others #mv_service_detail h3 {
    margin-top: -6vw;
  }
}

.exterior-others .service_detail_con.con_L.con_1 .con_L_main{
  min-height: 534px;
}
.exterior-others .service_detail_con.con_L .con_L_main h3 {
  letter-spacing: 0.05em;
}
.exterior-others .service_detail_con.con_L.con_2 .con_L_main{
  min-height: 538px;
}
.exterior-others .service_detail_con.con_3 h3 {
  letter-spacing: 0.09em;
}
.exterior-others .service_detail_con.con_3 h3,
.exterior-others .service_detail_con.con_4 h3 {
  margin-bottom: 48px;
}
@media screen and (max-width: 750px) {
  .exterior-others .service_detail_con.con_L.con_1 .con_L_main,
  .exterior-others .service_detail_con.con_L.con_2 .con_L_main {
    min-height: auto;
  }
  .exterior-others .service_detail_con.con_3 h3,
  .exterior-others .service_detail_con.con_4 h3 {
    margin-bottom: 3.2vw;
  }
}

/* ===============================
	service_contact
 =============================== */
.service_contact {
  background-color: var(--C-green);
  background-image: url(../img/common/contact_bg.webp);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding-top: 70px;
  padding-bottom: 106px;
}
.service_contact .title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.727272727272727;
  color: var(--C-white);
  margin-bottom: 14px;
}
.service_contact .title + p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 2;
  color: var(--C-white);
  margin-bottom: 28px;
}
.service_contact_area {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 8px;
}
.service_contact_area a {
  background: var(--C-white);
  border-radius: 100px;
  filter: drop-shadow(7px 7px 5px rgba(0,0,0,.25));
  width: calc((100% - (8px * 2)) / 3);
  min-width: 294px;
  height: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
}
.service_contact_area a.tel {
  letter-spacing: 0.04em;
}
.service_contact_area a img {
  margin-top: 4px;
}
.service_contact_area a p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 24px;
  font-weight: 700;
}
.service_contact_area a.tel p {
  font-family: 'Noto Sans JP', sans-serif;
}
@media screen and (min-width: 1918px) {
  .service_contact {
    background-size: cover;
  }
}
@media screen and (max-width: 750px) {
  .service_contact {
    padding-top: 5.86666666666667vw;
    padding-bottom: 11.73333333333333vw;
  }
  .service_contact .wrap {
    overflow: visible;
  }
  .service_contact .title {
    font-size: 3.4vw;
    letter-spacing: 0.1em;
    margin-bottom: 2vw;
  }
  .service_contact .title + p {
    font-size: 3.06666666666667vw;
    margin-bottom: 3.73333333333333vw;
  }
  .service_contact_area {
    gap: 2.13333333333333vw;
  }
  .service_contact_area a {
    border-radius: 1.86666666666667vw;
    width: 23.33333333333333vw;
    min-width: inherit;
    height: 11vw;
    padding-bottom: 0;
  }
  .service_contact_area a p {
    display: none;
  }
  .service_contact_area a img {
    width: 8.8vw;
    height: 8.8vw;
    margin-top: 0;
  }
  .service_contact_area a.line img {
    height: 8.26666666666667vw;
  }
}
@media screen and (max-width: 750px) {

}

/* ===============================
	service_list
 =============================== */
.service_list {
  text-align: center;
}
.service_list strong {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.851851851851852;
  display: block;
  margin-bottom: 28px;
}
.service_list ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 22px;
}
.service_list li {
  background: var(--C-white);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc((100% - (22px * 3)) / 4);
  height: 74px;
}
.service_list p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 28px;
  font-weight: 700;
}
@media screen and (max-width: 750px) {
  .service_list strong {
    font-size: 3.46666666666667vw;
    margin-bottom: 6.13333333333333vw;
  }
  .service_list ul {
    gap: 5.06666666666667vw;
  }
  .service_list li {
    width: calc((100% - 5.06666666666667vw) / 2);
    height: 14.93333333333333vw;
  }
  .service_list p  {
    font-size: 5.06666666666667vw;
  }
}