@charset "UTF-8";
.btn_gray{
  display: inline-block;
  border-radius: 9999px;
  padding: 1em 1.5em;
  background-color: #F7F5F7;
  color: var(--color-base);
  text-align: center;
  min-width: 140px;
  font-size: clamp(12px, calc(14 / 1920 * 100vw), 21px);
  transition-property: color,background-color;
  transition: 0.2s linear;
  &:hover {
      @media (hover: hover) {
        background-color: var(--color-base);
        color: var(--color-white);
    }
  }
  &.-map::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    background: url("../images/common/icon_map-black.svg") center center no-repeat;
    -moz-background-size: auto 100%;
    background-size: auto 100%;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.3em;
  }
  &.-map:hover::before{
      background: url("../images/common/icon_map-white.svg") center center no-repeat;
      -moz-background-size: auto 100%;
      background-size: auto 100%;
  }
}

/* ========================================================
value
======================================================== */
.value{
  padding-top: 150px;
  @media (width <= 960px) {
    padding-top: 40px;
  }
  .value_inner{
    margin: 0 auto;
    position: relative;
    &::before{
      content: "";
      display: block;
      position: absolute;
      background: url("../images/service/drop.svg") no-repeat;
      -moz-background-size: 100% auto;
      background-size: 100% auto;
      aspect-ratio: 674/633;
      width: 674px;
      left: calc(50% + 345px);
      top: -280px;
      @media (width <= 960px) {
        width: 60vw;
        left: calc(50% - 4.2vw);
        top: 90vw;
      }
    }
  }
  .value_ttl{
    font-size: clamp(43px, calc(50 / 1920 * 100vw), 57px);
    width: calc(140 * var(--layout-unit));
    margin: 0 auto;
    @media (width > 960px) {
      strong{
        font-size: clamp(63px, calc(70 / 1920 * 100vw), 77px);
        line-height: 1;
      }
    }
    @media (width <= 960px) {
      width: 100%;
      font-size: calc(26 / 375 * 100vw);
      line-height: 1.47;
      text-align: center;
    }
  }
  .value_unit{
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    padding-right: calc(240 / 1920 * 100vw);
    margin-top: -60px;
    @media (width <= 960px) {
      margin-top: 30px;
      padding: 0;
    }
    &::after{
      content: "";
      display: block;
      background: url("../images/service/value_pop.svg") no-repeat;
      -moz-background-size: 100% auto;
      background-size: 100% auto;
      aspect-ratio: 567/159;
      position: absolute;
      width: 567px;
      right: calc((240 / 1920 * 100vw) + (47 * var(--layout-unit)));
      top: 615px;
      @media (width <= 960px) {
        width: calc(320 / 375 * 100vw);
        right: calc(27 / 375 * 100vw);
        top: 60vw;
      }
    }
    .value_img{
      border-radius: 0 30px 30px 0;
      overflow: hidden;
      width: calc(100% - (55 * var(--layout-unit)));
      text-align: right;
      position: relative;
      height: 600px;
      margin-top: 90px;
      text-align: right;
      img{
        object-fit: cover;
        max-width: auto !important;
        height: 100%;
      }
      @media (width <= 960px) {
        width: calc(350 / 375 * 100vw);
        border-radius: 0 20px 20px 0;
        height: auto;
        margin-top: 0;
      }
    }
    .value_list{
      width: calc(43 * var(--layout-unit));
      list-style: none;
      counter-reset: chapter;
      @media (width <= 960px) {
        width: calc(335 / 375 * 100vw);
        margin: 40px auto 0;
      }
      li{
        border-bottom: solid 1px #C3C3C3;
        font-size: clamp(20px, calc(24 / 1920 * 100vw), 31px);
        line-height: 1.6;
        padding: 1.5em 0 1em;
        position: relative;
        font-weight: bold;
        text-align: center;
        @media (width <= 960px) {
          font-size: calc(19 / 375 * 100vw);
          padding: 0.5em 0 0.8em;
        }
        &::before{
          counter-increment: chapter;
          content: "Value "counter(chapter, decimal-leading-zero);
          opacity:.05;filter: alpha(opacity=5);-ms-filter: "alpha(opacity=5)";
          color: var(--color-deep-blue);
          line-height: 1;
          font-family: var(--font-Arial);
          font-size: clamp(66px, calc(73 / 1920 * 100vw), 80px);
          display: block;
          @media (width <= 960px) {
            font-size: calc(33 / 375 * 100vw);
          }
        }
        &:nth-of-type(2n-1) strong{
          color: var(--color-pink);
        }
        &:nth-of-type(2n) strong{
          color: var(--color-purple);
        }
        p{
          position: relative;
          @media (width <= 960px) {
            line-height: 1.32;
          }
          &::before,&::after{
            position: absolute;
            content: "";
            display: block;
            background: url("../images/service/ic_w.png") no-repeat;
            background-size: contain;
            aspect-ratio: 37 / 29;
            width:calc(1.8 * var(--layout-unit));
            @media (width <= 960px) {
              width:calc(1.3 * var(--layout-unit));
            }
          }
          &::before{
            left: 0;
            top: 0;
          }
          &::after{
            right: 0;
            bottom: 0;
            transform: rotate(180deg);
          }
        }
      }
    }
  }
}
/* ========================================================
service
======================================================== */
.service{
  .folding-body{
    background:#E2E8F0;
    margin-top: 60px;
    @media (width <= 960px) {
      margin-top: 20px;
    }
  }
}
.service_headline{
  text-align: center;
  width: clamp(960px, calc(456px + 52.083333333333336vw), 1550px);
  margin: 0 auto;
  padding-top: 120px;
  .service_headline_ttl{
    font-size: clamp(33px, calc(40 / 1920 * 100vw), 47px);
  }
  .service_headline_txt{
    margin-top: 46px;
  }
  @media (width <= 960px) {
    width: calc(325 / 375 * 100vw);
    padding-top: 60px;
    .service_headline_ttl{
      font-size: calc(30 / 375 * 100vw);
      line-height: 1.27;
    }
    .service_headline_txt{
      margin-top: 20px;
      text-align: left;
    }
  }
}
/*service_headlin_btn 
----------------------- */
.service_headlin_btn {
	display: flex;
	justify-content: center;
    flex-wrap: wrap;
	gap: calc(2 * var(--layout-unit));
  margin-top: 50px;
  @media (width <= 960px) {
    margin: 30px calc(-1 * var(--layout-unit)) 0;
    gap: calc(0.5 * var(--layout-unit));
  }
}
.service_headlin_btn-box{
  width: calc((100% - (6 * var(--layout-unit))) / 4);
  @media (width <= 960px) {
    width: calc((100% - (0.5 * var(--layout-unit))) / 2);
  }
}
.service_headlin_btn-box a {
	display: flex;
	flex-direction: column;
	justify-content: center;
  align-items: flex-start;
  text-align: left;
	text-decoration: none;
	padding: 1.5em 3em 1.5em 1em;
	width: 100%;
  height: 100%;
	border-radius: calc(1 * var(--layout-unit));
	color: var(--color-white);
	font-weight: 700;
  font-size: clamp(17px, calc(22 / 1920 * 100vw), 29px);
	line-height: 1.1;
	overflow: hidden;
	position: relative;
	z-index: 1;
	transition: box-shadow 0.3s ease;
  @media (width <= 960px) {
    font-size: calc(14 / 375 * 100vw);
    padding: 1.5em 2.5em 1.5em 1em;
  }
}
/* hover */
.service_headlin_btn a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: -1;
}
.service_headlin_btn a:hover::before {
	width: 100%;
}
/* icon */
.service_headlin_btn .btn-icon {
	position: absolute;
	bottom: calc(50% - 0.8em);
	right: 1em;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	border: 1px solid var(--color-white);
	transition: transform 0.3s ease;
  transform: rotate(90deg);
  @media (width <= 960px) {
    right: 0.5em;
  }
}
.service_headlin_btn a:hover .btn-icon {
	background: var(--color-white);
}
.service_headlin_btn .btn-icon svg path {
	fill: var(--color-white);
	transition: fill 0.3s ease;
}
/* color */
.service_headlin_btn-box a {
	background-image: var(--grad);
}
.service_headlin_btn-box a::before {
	background-image: var(--grad-hover);
}
.service_headlin_btn-box a:hover .btn-icon svg circle {
	stroke: var(--color-white);
}
.service_headlin_btn-box a:hover .btn-icon svg path {
	fill: var(--color-pink-hover);
}
.service_link{
  margin-top: 40px;
  @media (width <= 960px) {
    margin-top: 30px;
  }
}
/* wokers
----------------------- */
.service_detail_wokers{
  .folding_detail_inner{
    @media (width > 960px) {
      width: calc(150 * var(--layout-unit));
    }
    @media (width > 1360px) {
      width: calc(140 * var(--layout-unit));
    }
  }
  .service_detail_wokers_mv{
    overflow: hidden;
    border-radius: 30px;
    display: block;
    margin: 0 auto;
    width: calc(130 * var(--layout-unit));
    @media (width <= 960px) {
      width: 100%;
      border-radius: 10px;
    }
  }
  .service_detail_lead{
    margin-top: 40px !important;
  }
  .service_detail_wokers_detail{
    border-radius: 40px;
    padding:1px 70px 70px;
    margin-top: 100px;
    @media (width > 960px) {
      padding:1px 40px 70px;
    }
    @media (width > 1360px) {
      padding:1px 70px 70px;
    }
    @media (width <= 960px) {
      padding:1px calc(1 * var(--layout-unit)) 50px;
      margin: 16vw calc(-1.5 * var(--layout-unit)) 0;
    }
    &.-value01{background-color: #EFDEED}
    &.-value02{background-color: #FFEDED}
    &.-value03{background-color: #D9F0F2}
    .service_detail_wokers_detail_inner{
      width: calc(114 * var(--layout-unit));
      max-width: 100%;
      margin: 0 auto;
      @media (width > 960px) {
        width: calc(134 * var(--layout-unit));
      }
      @media (width > 1360px) {
        width: calc(114 * var(--layout-unit));
      }
      .service_detail_wokers_detail-ttl{
        width: 100%;
        text-align: center;
        font-size: clamp(46px, calc(54 / 1920 * 100vw), 62px);
        line-height: 1;
        margin-top: -0.7em;
        margin-bottom: 70px;
        @media (width <= 960px) {
          font-size: calc(30 / 375 * 100vw);
          margin-bottom: 30px;
        }
        span{
          display: inline-block;
          vertical-align: middle;
          color: #CD5692;
          font-family: var(--font-Arial);
        }
        &::before,&::after{
          content: "";
          display: inline-block;
          vertical-align: middle;
          width: 0.8em;
          height: 0.8em;
          background: url("../images/service/icon_service_workers_ttl.svg") center center no-repeat;
          -moz-background-size: auto 100%;
          background-size: auto 100%;
        }
        &::after{
          transform: rotate(180deg);
        }
      }
      .service_detail_wokers_detail-subttl{
        font-size: clamp(20px, calc(30 / 1920 * 100vw), 37px);
        @media (width <= 960px) {
          font-size: calc(17 / 375 * 100vw);
          text-align: center;
        }
        strong{
          font-weight: bold;
          color: var(--color-purple);
        }
      }
    }
  }
}
.service_detail_wokers_headline{
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    align-items: center;
  .service_detail_wokers_headline_detail{
    width: calc(50% + 20px);
  }
  .service_detail_wokers_headline_img{
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border-radius: 30px;
    width: calc(50% - 80px);
    img{
        object-fit: cover;
    }
  }
  @media (width <= 960px) {
    flex-direction: column;
    flex-wrap: wrap;
    .service_detail_wokers_headline_detail{
      width: 100%;
      margin-top:calc(2 * var(--layout-unit));
    }
    .service_detail_wokers_headline_img{
      width: calc(257 / 375 * 100vw);
      border-radius: 10px;
      margin: 0 auto;
      order: -1;
    }
  }
}
.service_detail_wokers_headline_detail-minttl{
  font-size: clamp(18px, calc(24 / 1920 * 100vw), 31px);
  @media (width <= 960px) {
    font-size: calc(15 / 375 * 100vw);
    text-align: center;
    margin-top: 1.5em;
  }
}
.service_detail_wokers_headline_detail-txt{
  line-height: 2;
  margin-top: 1.5em;
  font-size: clamp(15px, calc(17 / 1920 * 100vw), 24px);
  @media (width <= 960px) {
    font-size: calc(13 / 375 * 100vw);
    margin: 1.5em calc(1 * var(--layout-unit)) 0;
    line-height: 1.8;
  }
}
.service_detail_wokers_inner{
  background-color: var(--color-white);
  border-radius: 30px;
  padding: 50px 70px;
  margin-top: 50px;
  text-align: center;
  .service_detail_wokers_inner-ttl{
    text-align: center;
    color: var(--color-deep-blue);
    font-size: clamp(17px, calc(20 / 1920 * 100vw), 27px);
  }
  @media (width <= 960px) {
    border-radius: 20px;
    padding: 20px calc(2 * var(--layout-unit));;
    margin-top: 30px;
    .service_detail_wokers_inner-ttl{
      font-size: calc(18 / 375 * 100vw);
    }
  }
}
.service_detail_wokers_detail.-value01{
  .service_detail_wokers_event_headline{
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
    .service_detail_wokers_detail-subttl,
    .service_detail_wokers_event_headline_detail{
      width: calc((100% - 50px) / 2);
      @media (width <= 960px) {
        width: 100%;
      }
    }
  }
  .service_detail_wokers_event_mv{
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
    margin: 50px 30px 0;
    @media (width <= 960px) {
      margin: 25px calc(2 * var(--layout-unit)) 0;
    }
    .service_detail_wokers_event-img{
      width: calc((100% - 30px) / 2);
      overflow: hidden;
      display: block;
      border-radius: 30px;
      img{
        object-fit: cover;
      }
      @media (width <= 960px) {
        width: 100%;
        border-radius: 20px;
        &:not(:first-of-type){
          margin-top: 20px;
        }
      }
    }
  }
  .service_detail_wokers_event_report{
    margin-top: 75px;
    position: relative;
    @media (width <= 960px) {
      margin-top: 30px;
    }
    &::before{
      content: "EVENT REPORT";
      display: block;
      width: 100%;
      text-align: center;
      font-weight: bold;
      color: var(--color-white);
      opacity:.4;filter: alpha(opacity=40);-ms-filter: "alpha(opacity=40)";
      font-family: var(--font-Arial);
      line-height: 1;
      font-size: clamp(80px, calc(100 / 1920 * 100vw), 120px);
      @media (width <= 960px) {
        font-size: calc(49 / 375 * 100vw);
      }
    }
    .service_detail_wokers_event_report-ttl{
      font-size: clamp(18px, calc(25 / 1920 * 100vw), 32px);
      @media (width <= 960px) {
        font-size: calc(20 / 375 * 100vw);
        text-align: center;
      }
      .-pink{
        color: var(--color-pink);
      }
      .-purple{
        color: var(--color-purple);
      }
    }
    .service_detail_wokers_event_report-list{
      margin-top: 50px;
      display:flex;
      -ms-flex-pack:distribute;
      justify-content:space-between;
      flex-wrap: wrap;
      position: relative;
      @media (width <= 960px) {
        margin-top: 20px;
        padding-bottom: 54.6vw;
      }
      &::before{
        content: "";
        display: block;
        aspect-ratio: 570/380;
        background: url("../images/service/service_workers_event_character.png") left center no-repeat;
        -moz-background-size: 100% auto;
        background-size: 100% auto;
        position: absolute;
        top: -190px;
        right: 0;
        width: 285px;
        @media (width <= 960px) {
          width: 76vw;
          top: auto;
          bottom: 0;
        }
      }
      .swiper-slide{
        font-size: 0;
        line-height: 0;
        border-radius: 20px;
        overflow: hidden;
        width: calc((100% - 40px) / 3);
        @media (width <= 960px) {
          border-radius: 10px;
          width: calc((100% - 20px) / 3);
        }
        .slide_textArea{
          display: none;
        }
      }
      .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide{display: none;}
    }
  }
  .service_detail_wokers_event-link .btn.-youtube{
    background-color: #fff;
    margin-top: 50px;
    @media (width <= 960px) {
      margin-top: 0;
      font-size: calc(14 / 375 * 100vw);
      &::before{
        margin-left: -1.5em;
      }
    }
  }
}
.service_detail_wokers_detail.-value02{
  .service_detail_wokers_special-popttl{
    margin: -2em 0 1em;
    font-weight: bold;
    font-size: clamp(18px, calc(20 / 1920 * 100vw), 27px);
    line-height: 1;
    @media (width <= 960px) {
      font-size: calc(18 / 375 * 100vw);
      margin: -1em 0 1em;
    }
    strong{
      color: var(--color-pink);
    }
    span{
      display: inline-block;
      vertical-align: middle;
    }
    &::before,&::after{
      content: "";
      display: inline-block;
      vertical-align: bottom;
      background: var(--color-base);
      height: 0.6em;
      width: 1px;
    }
    &::before{
      transform: rotate(-33deg);
      margin-right: 0.3em;
    }
    &::after{
      transform: rotate(33deg);
      margin-left: 0.3em;
    }
    @media (width <= 960px) {
      &::before,&::after{
        height: 1em;
      }
      &::before{
        transform: rotate(-33deg);
        margin-right: 1em;
      }
      &::after{
        transform: rotate(33deg);
        margin-left: 1em;
      }
    }
  }
  .service_detail_wokers_special_card{
      display:flex;
      -ms-flex-pack:distribute;
      justify-content:space-between;
      flex-wrap: wrap;
      margin: 85px auto 0;
      width: calc(87 * var(--layout-unit));
      max-width: 100%;
      @media (width <= 1360px) {
        width: 100%;
      }
      @media (width <= 960px) {
        width: 100%;
        margin-top: 20px;
      }
    .service_detail_wokers_special_card-img{
      font-size: 0;
      line-height: 0;
      width: calc(50% - 70px);
      @media (width <= 960px) {
        width: calc(230 / 375 * 100vw);
        margin: 0 auto;
      }
    }
    .service_detail_wokers_special_card-detail{
      width: calc(50% + 30px);
      @media (width <= 960px) {
        width: 100%;
        margin-top: 70px;
      }
      .service_detail_wokers_special_checklist{
        width: 100%;
        li{
          background-color: #EDEDED;
          border-radius: 9999px;
          font-weight: bold;
          text-align: left;
          font-size: clamp(15px, calc(18 / 1920 * 100vw), 25px);
          padding: 1em 1em 1em 3.5em;
          position: relative;
          line-height: 1.7;
          &.-pink{
            background-color: #EFDEED;
          }
          @media (width <= 960px) {
            font-size: calc(15 / 375 * 100vw);
          }
        }
        li::before{
          content: "";
          display: block;
          position: absolute;
          width: 1.4em;
          height: 1em;
          background: url("../images/common/ico_check.svg") center center no-repeat;
          -moz-background-size: auto 100%;
          background-size: auto 100%;
          left: 1em;
          top: 1.35em;
        }
        li:not(:first-of-type){
          margin-top: 10px;
        }
      }
      .service_detail_wokers_special_card-txt{
        margin-top: 0.8em;
      }
    }
  }
  .service_detail_wokers_special_more{
    margin-top: 50px;
    @media (width <= 960px) {
      margin-top: 70px;
    }
    .service_detail_wokers_special_more-list{
      
    }
  }
  
	.swiper-slide {
		width: calc(31 * var(--layout-unit));
		border-radius: 30px;
		background: #f5f7fa;
		overflow: hidden;
		@media (width <= 960px) {
			width: calc(22.7 * var(--layout-unit));
			border-radius: 20px;
		}
	}
	.slide_textArea {
		padding: 20px calc(3 * var(--layout-unit)) 40px;
		@media (width <= 960px) {
			padding: 12px calc(1.5 * var(--layout-unit)) 22px;
		}
	}
	.slide_label {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		span {
			display: inline-block;
			padding: clamp(0.25rem, 0rem + 0.4167vw, 0.5rem)
				clamp(0.9375rem, 0.625rem + 0.5208vw, 1.25rem);
			border-radius: var(--radius-full);
			color: var(--color-white);
			font-size: clamp(0.6875rem, 0.5rem + 0.3125vw, 0.875rem);
			font-weight: 700;
			@media (width <= 960px) {
				padding: clamp(0.25rem, 0.0897rem + 0.6838vw, 0.5rem)
					clamp(0.9375rem, 0.7372rem + 0.8547vw, 1.25rem);
				font-size: clamp(0.6875rem, 0.5673rem + 0.5128vw, 0.875rem);
			}
		}
	}
	.service_detail_wokers_special_more {
		.slide_label {
			span {
				&.limit {
					background: #da0010;
				}
				&.basic {
					background: #1c3a60;
				}
			}
		}
	}
	.slide_ttl {
		margin-top: 20px;
		color: var(--color-base);
		font-size: clamp(0.875rem, 0.6747rem + 0.8547vw, 1.1875rem);
		font-weight: 700;
		text-align: left;
		@media (width <= 960px) {
			margin-top: 8px;
			font-size: clamp(0.875rem, 0.5625rem + 0.5208vw, 1.1875rem);
		}
	}
	.slide_txt {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-top: 20px;
		color: var(--color-base);
		font-size: clamp(0.75rem, 0.375rem + 0.625vw, 1.125rem);
		line-height: 1.72;
		text-align: left;
		@media (width <= 960px) {
			margin-top: 8px;
			font-size: calc(12 / 375 * 100vw);
			line-height: 1.83;
		}
	}
	.swiper-pagination {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: calc(130 * var(--layout-unit));
		height: calc(0.4 * var(--layout-unit));
		margin: 40px auto 0;
		border-radius: var(--radius-full);
		background-color: rgba(0, 0, 0, 0.1);
		@media (width <= 960px) {
			width: calc(17.5 * var(--layout-unit));
			margin: calc(3 * var(--layout-unit)) auto calc(2 * var(--layout-unit));
		}
	}
	.swiper-pagination-bullet {
		display: inline-block;
		width: calc(100% / 10);
		height: calc(0.4 * var(--layout-unit));
		cursor: pointer;
		transition: 0.8s;
		vertical-align: top;
	}
	.swiper-pagination-bullet-active {
		border-radius: var(--radius-full);
		background-color: var(--color-base);
	}
	/* buttons */
	.swiper-button-prev,
	.swiper-button-next {
		display: none;
		@media (width <= 960px) {
			position: absolute;
			bottom: calc(-2 * var(--layout-unit));
			display: inline-block;
			width: calc(4.3 * var(--layout-unit));
			height: calc(4.3 * var(--layout-unit));
			border-radius: 50%;
			cursor: pointer;
		}
		&::after {
			content: none;
			@media (width <= 960px) {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: inline-block;
				width: calc(1.4 * var(--layout-unit));
				height: calc(0.9 * var(--layout-unit));
				background: url(../images/common/icon_swiper_arrow.svg) center/cover no-repeat;
			}
		}
		svg {
			display: none;
		}
	}
	.swiper-button-prev {
		@media (width <= 960px) {
			background: linear-gradient(45deg, #713bcc, #933e9d 50%, #cd5792);
			left: 0;
      bottom: 0;
		}
	}
	.swiper-button-next {
		@media (width <= 960px) {
			background: linear-gradient(-45deg, #713bcc, #933e9d 50%, #cd5792);
			right: 0;
      bottom: 0;
		}
		&::after {
			transform: translate(-50%, -50%) rotate(180deg);
		}
	}
}
.service_detail_wokers_detail.-value03{
  .service_detail_wokers_club_examples{
    width: calc(79 * var(--layout-unit));
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
    margin: 30px auto 0;
    .service_detail_wokers_club_examples-box{
      width: calc((100% - 30px) / 2);
      .service_detail_wokers_club_examples-img{
        border-radius: 30px;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
      }
      .service_detail_wokers_club_examples-txt{
        font-weight: bold;
        margin-top: 0.5em;
        font-size: clamp(17px, calc(22 / 1920 * 100vw), 29px);
      }
    }
    @media (width <= 960px) {
      width: calc(257 / 375 * 100vw);
      margin: 0 auto;
      .service_detail_wokers_club_examples-box{
        width: 100%;
        margin-top: 20px;
        .service_detail_wokers_club_examples-img{
          border-radius: 20px;
        }
        .service_detail_wokers_club_examples-txt{
          font-size: calc(14 / 375 * 100vw);
        }
      }
    }
  }
  .service_detail_wokers_club_voice{
    margin-top: 50px;
    position: relative;
    .service_detail_wokers_club_voice-ttl{
      text-align: center;
      font-size: clamp(17px, calc(20 / 1920 * 100vw), 27px);
      @media (width <= 960px) {
        font-size: calc(17 / 375 * 100vw);
      }
    }
    .sec_service-slide_container{
      margin-top: 30px;
      @media (width <= 960px) {
        margin-top: 10px;
      }
      .swiper-slide{
        display:flex;
        -ms-flex-pack:distribute;
        justify-content:space-between;
        flex-wrap: wrap;
        width: calc((100% - 28px) / 2);
        border-radius: 20px;
        padding: 30px;
        @media (width <= 960px) {
          flex-direction: column;
          width: 100%;
          padding: 20px;
        }
        &.-pink{
          background-color: #EFDEED;
          .slide_label{
            background-color: var(--color-pink);
          }
        }
        &.-purple{
          background-color: #D9DAF3;
          .slide_label{
            background-color: var(--color-purple);
          }
        }
        .slide_img{
          height: 100px;
          width: 100px;
          margin: 0 auto;
        }
        .slide_textArea{
          width: calc((100% - 120px));
          text-align: left;
          line-height: 1.8;
          @media (width <= 1360px) {
            width: 100%;
            text-align: center;
          }
          .slide_label{
            color: var(--color-white);
            text-align: center;
            display: inline-block;
            border-radius: 9999px;
            font-weight: bold;
            font-size: clamp(12px, calc(14 / 1920 * 100vw), 21px);
            padding: 0.3em 1.5em;
            @media (width <= 1360px) {
              margin: 10px auto 0;
            }
            @media (width <= 960px) {
              font-size: calc(12 / 375 * 100vw);
            }
          }
          .slide_ttl{
            font-size: clamp(16px, calc(18 / 1920 * 100vw), 25px);
            margin-top: 1em;
            @media (width <= 960px) {
              font-size: calc(17 / 375 * 100vw);
            }
          }
          .slide_txt{
            margin-top: 1em;
            @media (width <= 1360px) {
              text-align: left;
            }
            @media (width <= 960px) {
              font-size: calc(13 / 375 * 100vw);
              line-height: 1.76;
            }
          }
          .slide_prof{
            margin-top: 1em;
            font-weight: bold;
            @media (width <= 1360px) {
              margin-top: auto;
              padding-top: 1em;
            }
            @media (width <= 960px) {
              font-size: calc(12 / 375 * 100vw);
              line-height: 1.83;
            }
          }
        }
      }
    }

	.swiper-pagination {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 40px auto 0;
		@media (width <= 960px) {
			margin: calc(3 * var(--layout-unit)) auto calc(2 * var(--layout-unit));
		}
	}
	.swiper-pagination-bullet {
		display: inline-block;
    border-radius: 9999px;
    margin: 0 0.5em;
		width: 0.5em;
		height: 0.5em;
		cursor: pointer;
		transition: 0.8s;
		vertical-align: top;
		background-color: #DFDFDF;
	}
	.swiper-pagination-bullet-active {
		background-color: #707070;
	}
    /* buttons */
    .swiper-button-prev,
    .swiper-button-next {
      display: none;
      @media (width <= 960px) {
        position: absolute;
        top: calc(5 * var(--layout-unit));
        display: inline-block;
        width: calc(4.3 * var(--layout-unit));
        height: calc(4.3 * var(--layout-unit));
        border-radius: 50%;
        cursor: pointer;
        z-index:2;
      }
      &::after {
        content: none;
        @media (width <= 960px) {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: inline-block;
          width: calc(1.4 * var(--layout-unit));
          height: calc(0.9 * var(--layout-unit));
          background: url(../images/common/icon_swiper_arrow.svg) center/cover no-repeat;
        }
      }
      svg {
        display: none;
      }
    }
    .swiper-button-prev {
      @media (width <= 960px) {
        background: linear-gradient(45deg, #713bcc, #933e9d 50%, #cd5792);
        left: calc(1 * var(--layout-unit));
      }
    }
    .swiper-button-next {
		@media (width <= 960px) {
			background: linear-gradient(-45deg, #713bcc, #933e9d 50%, #cd5792);
			right: calc(1 * var(--layout-unit));
		}
		&::after {
			transform: translate(-50%, -50%) rotate(180deg);
		}
	}
  }
  .service_detail_wokers_club_other{
    margin-top: 50px;
    @media (width <= 960px) {
      margin-top: 30px;
    }
    .service_detail_wokers_club_other-ttl{
      text-align: center;
      font-size: clamp(20px, calc(24 / 1920 * 100vw), 31px);
      @media (width <= 960px) {
        font-size: calc(20 / 375 * 100vw);
      }
    }
    .service_detail_wokers_club_other-list{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-top: 30px;
      gap: 30px 20px;
      @media (width <= 960px) {
        margin-top: 20px;
        gap: 20px 10px;
      }
      .service_detail_wokers_club_other-box{
        text-align: left;
        width: calc((100% - 60px) / 4);
        @media (width <= 960px) {
          width: calc((100% - 10px) / 2);
        }
      }
      .service_detail_wokers_club_other-img{
        font-size: 0;
        line-height: 0;
      }
      .service_detail_wokers_club_other-txt{
        font-weight: bold;
        margin-top: 0.5em;
        font-size: clamp(15px, calc(18 / 1920 * 100vw), 25px);
        @media (width <= 960px) {
          font-size: calc(13 / 375 * 100vw);
        }
        small{
          font-size: 88%;
        }
      }
    }
  }
}
/* effort
----------------------- */
.service_detail_effort{
  .folding_detail_inner{
    @media (width > 960px) {
      width: calc(150 * var(--layout-unit));
      .service_detail_lead{
        margin: 20px 19% 0;
      }
    }
    @media (width > 1360px) {
      width: calc(140 * var(--layout-unit));
      .service_detail_lead{
        margin: 20px 0 0;
      }
    }
    .service_detail_effort_lineup{
      display:flex;
      -ms-flex-pack:distribute;
      justify-content:space-between;
      flex-wrap: wrap;
      margin-top: 40px;
      gap:20px;
      list-style: none;
      counter-reset: chapter;
      position: relative;
      @media (width <= 960px) {
        margin-top: 0;
        padding-top: 80vw;
        gap:10px;
      }
      &::after{
        content: "";
        display: block;
        position: absolute;
        background: url("../images/service/service_detail_character.png") no-repeat;
        -moz-background-size: 100% auto;
        background-size: 100% auto;
        aspect-ratio: 458 / 450;
        width: 229px;
        right: calc(-4 * var(--layout-unit));
        top: calc(-27 * var(--layout-unit));
        @media (width <= 1360px) {
          max-width: 20%;
        }
        @media (width <= 960px) {
          width: 61.33vw;
          max-width: 61.33vw;
          right: calc((100% - 61.33vw) / 2);
          top: 9vw;
        }
      }
      .service_detail_effort_lineup-box{
        display:flex;
        -ms-flex-pack:distribute;
        justify-content:space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        position: relative;
        background-color: #EDEDED;
        border-radius: 30px;
        padding: 30px 20px;
        width: calc((100% - 20px) / 2);
        @media (width <= 960px) {
          border-radius: 20px;
          padding: 30px;
          width: 100%;
        }
        &::before{
          color: var(--color-white);
          text-align: center;
          font-weight: bold;
          font-family: var(--font-Arial);
          background: var(--grad-btm-right);
          counter-increment: chapter;
          content: ""counter(chapter, decimal-leading-zero);
          line-height: 1;
          padding: 0.3em 0.8em 0.3em 0.6em;
          border-radius: 0 0.8em 0.8em 0;
          font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
          position: absolute;
          left: 20px;
          top: 30px;
          @media (width <= 960px) {
            font-size: calc(19 / 375 * 100vw);
            left: 30px;
          }
        }
        .service_detail_effort_lineup-img{
          overflow: hidden;
          font-size: 0;
          line-height: 0;
          border-radius: 20px;
          width: calc(47% - 20px);
          @media (width <= 960px) {
            width: 100%;
          }
        }
        .service_detail_effort_lineup-detail{
          width: 53%;
          @media (width <= 960px) {
            width: 100%;
          }
          .service_detail_effort_lineup-ttl{
            font-size: clamp(20px, calc(24 / 1920 * 100vw), 31px);
            @media (width <= 960px) {
              font-size: calc(17 / 375 * 100vw);
              text-align: center;
              margin-top: 15px;
            }
            small{
              font-size: 67%;
            }
          }
          .service_detail_effort_lineup-txt{
            margin-top: 15px;
            @media (width <= 960px) {
              margin-top: 10px;
              font-size: calc(13 / 375 * 100vw);
              line-height: 1.76;
            }
          }
          .service_detail_effort_lineup-subject{
            font-weight: bold;
            margin-top: 20px;
            font-size: 86%;
            @media (width <= 960px) {
              font-size: calc(13 / 375 * 100vw);
              line-height: 1.76;
            }
            dd{
              color: var(--color-purple);
            }
          }
        }
      }
    }
  }
}
/* prevention
----------------------- */
.service_detail_prevention{
  .folding_detail_inner{
    @media (width > 960px) {
      width: calc(140 * var(--layout-unit));
    }
    @media (width > 1360px) {
      width: calc(130 * var(--layout-unit));
    }
    .service_detail_prevention_mv{
      background: url("../images/service/service_prevention_mv.webp") left center #FDB8C1 no-repeat;
      -moz-background-size: 640px auto;
      background-size: 640px auto;
      position: relative;
      border-radius: 40px;
      height: 360px;
      margin: 60px 30px 0;
      padding: 60px 90px 0 650px;
      @media (width <= 1360px) {
        background: url("../images/service/service_prevention_mv.webp") center top #FDB8C1 no-repeat;
        -moz-background-size: 100% auto;
        background-size: 100% auto;
        border-radius: 20px;
        height: auto;
        margin: 30px 0 0;
        padding: 67% calc(5 * var(--layout-unit)) 40px;
      }
      @media (width <= 960px) {
        padding: 56vw calc(2 * var(--layout-unit)) 20px;
      }
      &::after{
        content: "Emergency Kit";
        font-family: var(--font-Arial);
        text-transform: uppercase;
        color: var(--color-white);
        font-weight: bold;
        line-height: 1;
        font-size: clamp(50px, calc(66 / 1920 * 100vw), 74px);
        position: absolute;
        bottom: -0.15em;
        text-align: center;
        right: 1em;
        @media (width <= 1360px) {
          width: 100%;
          right: 0;
          bottom: auto;
          top: 43.6vw;
        }
        @media (width <= 960px) {
          font-size: calc(34 / 375 * 100vw);
        }
      }
      .service_detail_prevention_mv-ttl{
        font-size: clamp(20px, calc(24 / 1920 * 100vw), 31px);
        @media (width <= 1360px) {
          display: block;
          text-align: center;
        }
        @media (width <= 960px) {
          font-size: calc(18 / 375 * 100vw);
        }
      }
      .service_detail_prevention_mv-txt{
        font-size: clamp(14px, calc(17 / 1920 * 100vw), 24px);
        line-height: 2;
        margin-top: 1em;
        font-weight: bold;
        @media (width <= 960px) {
          font-size: calc(13 / 375 * 100vw);
        }
      }
    }
    .service_detail_prevention_laspy{
      margin-top: 55px;
      text-align: center;
      @media (width <= 960px) {
        margin-top: 30px;
      }
      .service_detail_prevention_laspy-ttl{
        font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
        strong{
          color: var(--color-purple);
        }
        @media (width <= 960px) {
          display: block;
          text-align: center;
          font-size: calc(20 / 375 * 100vw);
        }
      }
      .service_detail_prevention_laspy-txt{
        font-size: clamp(14px, calc(16 / 1920 * 100vw), 23px);
        line-height: 2;
        margin-top: 40px;
        @media (width <= 960px) {
          font-size: calc(14 / 375 * 100vw);
          margin-top: 20px;
          text-align: left;
        }
      }
      .service_detail_prevention_laspy-list{
        display:flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 30px;
        @media (width <= 960px) {
          flex-direction: column;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 20px;
        }
        .service_detail_prevention_laspy-item{
          border-radius: 30px;
          padding: 40px;
          width: calc(37 * var(--layout-unit));
          @media (width > 960px) {
            width: calc(47 * var(--layout-unit));
          }
          @media (width > 1360px) {
            width: calc(37 * var(--layout-unit));
          }
          &:nth-of-type(2n-1){
            background-color: #FCE5E3;
          }
          &:nth-of-type(2n){
            background-color: #F7E4CB;
          }
          img{
            width: 140px;
            margin: 0 auto;
          }
          p{
            font-weight: bold;
            font-size: clamp(18px, calc(22 / 1920 * 100vw), 30px);
            margin-top: 0.8em;
          }
          @media (width <= 960px) {
            border-radius: 20px;
            padding: 20px;
            width: 100%;
            display:flex;
            -ms-flex-pack:distribute;
            justify-content:space-between;
            align-items: center;
            flex-wrap: wrap;
            img{
              width: 21.33vw;
              margin: 0;
            }
            p{
              text-align: left;
              width: calc(100% - 21.33vw - 1em);
              margin-top: 0;
            }
          }
        }
      }
      .service_detail_prevention_laspy-attention{
        font-weight: 500;
        color: var(--color-pink);
        margin-top: 30px;
        font-size: clamp(11px, calc(15 / 1920 * 100vw), 22px);
        @media (width <= 960px) {
          font-size: calc(12 / 375 * 100vw);
          text-align: left;
          margin-top: 10px;
        }
      }
    }
    .service_detail_prevention_message{
      border-top:solid 1px #DEDEDE;
      margin-top: 60px;
      padding-top: 50px;
      @media (width <= 1360px) {
        margin-top: 30px;
        padding-top: 30px;
      }
      .service_detail_prevention_message-ttl,
      .service_detail_prevention_message-lead{
        text-align: center;
        font-weight: bold;
        font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
        line-height: 1.5;
        strong{
          color: var(--color-pink);
        }
        @media (width <= 960px) {
          font-size: calc(20 / 375 * 100vw);
          line-height: 1.5;
        }
      }
      .service_detail_prevention_message-unit{
        display:flex;
        -ms-flex-pack:distribute;
        justify-content:space-between;
        align-items: center;
        flex-wrap: wrap;
        width: calc(114 * var(--layout-unit));
        margin: 0 auto;
        @media (width <= 1360px) {
          width: 100%;
        }
        .service_detail_prevention_message-img{
          font-size: 0;
          line-height: 0;
          overflow: hidden;
          border-radius: 30px;
          width: 490px;
          @media (width <= 1360px) {
            width: calc(100% + (2.8 * var(--layout-unit)));
            margin: 0 calc(-1.4 * var(--layout-unit));
          }
        }
        .service_detail_prevention_message-detail{
          width: calc(100% - 540px);
          @media (width <= 1360px) {
            width: 100%;
          }
        }
        .service_detail_prevention_message-ttl{
          font-size: clamp(23px, calc(30 / 1920 * 100vw), 37px);
          line-height: 1.5;
          text-align: left;
          @media (width <= 1360px) {
            text-align: center;
            margin-top: 30px;
          }
          @media (width <= 960px) {
            font-size: calc(20 / 375 * 100vw);
            line-height: 1.5;
          }
        }
        .service_detail_prevention_message-txt{
          font-size: clamp(14px, calc(17 / 1920 * 100vw), 24px);
          line-height: 2.1;
          margin-top: 40px;
          @media (width <= 1360px) {
            margin-top: 20px;
          }
          @media (width <= 960px) {
            font-size: calc(14 / 375 * 100vw);
          }
        }
      }
      .service_detail_prevention_message-lead{
        margin-top: 50px;
        @media (width <= 1360px) {
          margin-top: 30px;
        }
      }
    }
  }
}
/* child
----------------------- */
.service_detail_child{
  .folding_detail_inner{
    @media (width > 960px) {
      width: calc(140 * var(--layout-unit));
    }
    @media (width > 1360px) {
      width: calc(120 * var(--layout-unit));
    }
    .service_detail_child_list{
      display:flex;
      -ms-flex-pack:distribute;
      justify-content:space-between;
      flex-wrap: wrap;
      margin-top: 40px;
      @media (width <= 960px) {
        margin-top: 0;
      }
      .service_detail_child_list-box{
        width: calc((100% - 60px) / 3);
        .service_detail_child_list-img{
          overflow: hidden;
          font-size: 0;
          line-height: 0;
          border-radius: 30px;
        }
        .service_detail_child_list-number{
          font-size: 0;
          line-height: 0;
          margin: -20px auto 0;
          img{
            height: 30px;
          }
        }
        .service_detail_child_list-ttl{
          text-align: center;
          font-size: clamp(18px, calc(24 / 1920 * 100vw), 31px);
          line-height: 1.5;
          margin-top: 30px;
          small{
            font-size: 67%;
          }
        }
        .service_detail_child_list-txt p{
          margin-top: 30px;
        }
        @media (width <= 960px) {
          margin-top: 30px;
          width: 100%;
          .service_detail_child_list-img{
            border-radius: 20px;
          }
          .service_detail_child_list-number{
            margin: -5.5vw auto 0;
            img{
              height: 8vw;
            }
          }
          .service_detail_child_list-ttl{
            font-size: calc(20 / 375 * 100vw);
            margin-top: 20px;
            height: auto !important;
          }
        }
      }
    }
  }
}