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

/* ===============================
	service_common
 =============================== */
h3.title,
h3.title span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.851851851851852;
}
h3.title {
  font-size: 27px;
}
h3.title span {
  font-size: 22px;
  color: var(--C-green);
}
h4.title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.666666666666667;
}
h4.title span {
  color: var(--C-green);
}
p.txt_normal {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 2;
}
@media screen and (max-width: 750px) {
  h3.title {
    font-size: 5.2vw;
  }
  h4.title {
    font-size: 4.13333333333333vw;
  }
  p.txt_normal {
    font-size: 3.33333333333333vw;
    letter-spacing: 0.03em;    
  }
}

/* ===============================
	mv_common
 =============================== */
#mv_common {
  background-image: url(../img/service/mv_bg.webp);
}
#mv_common .title p,
#mv_common .title p span {
  font-size: 25px;
}
#mv_common .mv_img {
  right: -118px;
  bottom: -52px;  
}
@media screen and (max-width: 844px) {
  #mv_common {
    margin-top: -194px;
  }
}
@media screen and (max-width: 750px) {
  #mv_common {
    background-image: url(../img/service/mv_bg_sp.webp);
    margin-top: 0;
  }  
  #mv_common .title p,
  #mv_common .title p span {
    font-size: 4.13333333333333vw;
    letter-spacing: -0.02em;    
  }
  #mv_common .mv_img {
    width: 22.26666666666667vw;
    right: -12.8vw;
    bottom: -7.46666666666667vw;  
  }
}

/* ===============================
	service
 =============================== */
#service_top {
  overflow-x: clip;  
  padding-top: 134px;
  padding-bottom: 94px;
}
#service_top .wrap {
  position: relative;
}
#service_top h3.title span {
  font-size: 22px;
  color: var(--C-green);
}
#service_top h3.title + p {
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 2;
}
#service_top ul {
  width: 216px;
  height: 239px;
  position: absolute;
  bottom: 0;
  right: 8px;
}
#service_top ul::after {
  content: '';
  width: 347px;
  height: 327px;
  background: url(../img/service/service_top_bg.svg) center no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  margin: auto;
  z-index: -1;
}
#service_top li {
  font-family: "Zen Kaku Gothic Antique", sans-serif;      
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--C-white);
  writing-mode: tb;  
  position: absolute;
}
#service_top li:nth-child(1) {
  top: -8px;
  right: 100px;
}
#service_top li:nth-child(2) {
  top: 34px;
  right: 0;
}
#service_top li:nth-child(3) {
  top: 142px;
  right: 4px;
}
#service_top li:nth-child(4) {
  top: 200px;
  right: 100px;
}
#service_top li:nth-child(5) {
  letter-spacing: -0.02em;
  top: 128px;
  right: 198px;
}
#service_top li:nth-child(6) {
  top: 28px;
  right: 182px;
}
@media screen and (max-width: 750px) {
  #service_top {
    padding-top: 0;
    padding-bottom: 13.86666666666667vw;
  }
  #service_top .wrap {
    overflow: visible;
  }
  #service_top h3.title {
    padding-top: 57.86666666666667vw;
  }
  #service_top h3.title span {
    font-size: 3.46666666666667vw;
  }
  #service_top h3.title + p {
    font-size: 3.33333333333333vw;
    letter-spacing: 0.03em;
  }
  #service_top ul {
    width: 46.66666666666667vw;
    height: 52.4vw;
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -9vw;    
    z-index: +1;
  }
  #service_top ul::after {
    width: 75.86666666666667vw;
    height: 71.2vw;
  }
  #service_top li {  
    font-size: 3.46666666666667vw;
    width: 1lh;
  }
  #service_top li:nth-child(1) {
    top: -1vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  #service_top li:nth-child(2) {
    top: 7vw;
    right: -1vw;
  }
  #service_top li:nth-child(3) {
    top: 31vw;
    right: -1vw;
  }
  #service_top li:nth-child(4) {
    top: 44vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  #service_top li:nth-child(5) {
    letter-spacing: -0.04em;
    top: 28vw;
    left: 1vw;
    right: auto;
  }
  #service_top li:nth-child(6) {
    top: 7vw;
    left: 1vw;
    right: auto;
  }
}

/* ===============================
	service
 =============================== */
#service {
  overflow-x: clip;
}
#service .wrap {
  display: flex;
  flex-direction: column;
  gap: 102px;
}
#service section {
  position: relative;
}
#service section::before {
  content: '';
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}
#service section.con_1::before {
  background-image: url(../img/service/category_bg_1.webp);
}
#service section.con_2::before {
  background-image: url(../img/service/category_bg_2.webp);
}
#service section.con_3::before {
  background-image: url(../img/service/category_bg_3.webp);
}
#service section.con_4::before {
  background-image: url(../img/service/category_bg_4.webp);
}
#service section.con_5::before {
  background-image: url(../img/service/category_bg_5.webp);
}
#service section.con_6::before {
  background-image: url(../img/service/category_bg_6.webp);
}
#service section::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -2;
}
#service section h3.title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.12em;
  writing-mode: tb;
  color: var(--C-white);
  position: absolute;
}
#service section h3.title::after {
  content: '';
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}
#service section h4 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.851851851851852;
  color: var(--C-white);
  padding: 142px 20px 14px 62px;
}
#service section.green h4 {
  text-shadow: #4f652e 0 0 11px, #4f652e 0 0 11px, #4f652e 0 0 11px, #4f652e 0 0 11px, #4f652e 0 0 11px, #4f652e 0 0 11px;
}
#service section.blue h4 {
  text-shadow: #6793ac 0 0 11px,#6793ac 0 0 11px,#6793ac 0 0 11px,#6793ac 0 0 11px,#6793ac 0 0 11px;
}
#service section .service_text {
  background: var(--C-white);
  margin: 0 20px;
  padding: 24px 44px 38px;
}
#service section .service_text p {
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 2;
}
#service section .lineup {
  display: flex;
  flex-direction: row;
  gap: 28px;
  margin-top: 24px;
}
#service section .lineup .text_area {
  width: 102px;
}
#service section .lineup .text_area p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.666666666666667;
  text-align: center;
  position: relative;
  padding: 18px 0;  
}
#service section .lineup .text_area p::before,
#service section .lineup .text_area p::after {
  content: '';
  width: 100%;
  height: 3px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
#service section .lineup .text_area p::before {
  top: 0;
}
#service section .lineup .text_area p::after {
  bottom: 0;
}
#service section .lineup ul {
  width: calc(100% - (102px + 28px));
  display: flex;
  flex-direction: row;
  justify-content: flex-start;  
  flex-wrap: wrap;
  gap: 10px;
}
#service section .lineup li {
  width: 82px;
}
#service section .lineup li img {
  width: 100%;
}
#service section .lineup li span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;      
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.384615384615385;
  text-align: center;
  display: block;
}
#service section .btn_area {
  text-align: center;  
  margin-top: 22px;
  margin-bottom: 30px;
}

/* green */
#service section.green::after {
  background: var(--C-green);
}
#service section.green h3.title {
  top: -18px;
  left: 62px;
}
#service section.green h3.title::after {
  width: 256px;
  height: 218px;
  background-image: url(../img/service/title_bg_green.svg); 
}
#service section.green .lineup .text_area p {
  color: var(--C-green);
}
#service section.green .lineup .text_area p::before,
#service section.green .lineup .text_area p::after {
  background: #bddeb0;
}

/* blue */
#service section.blue::after {
  background: var(--C-Dblue);
}
#service section.blue h3.title {
  top: -26px;
  right: 52px;
}
#service section.blue h3.title::after {
  width: 256px;
  height: 224px;
  background-image: url(../img/service/title_bg_blue.svg);
}
#service section.blue .lineup .text_area p {
  color: var(--C-Dblue);
}
#service section.blue .lineup .text_area p::before,
#service section.blue .lineup .text_area p::after {
  background: #acd5e9;
}

/* con_1 */
#service section.con_1 h3.title::after {
  margin-top: -20px;    
}

/* con_4 */
#service section.con_4 h3.title {
  top: 0;
}
#service section.con_4 h3.title::after {
  margin-top: -46px;  
}
#service section.con_4 .lineup ul {
  justify-content: center;
  padding-right: 126px;
}

/* con_5 */
#service section.con_5 h3.title {
  letter-spacing: -0.04em;
  top: -50px;  
}
#service section.con_5 .lineup ul {
  justify-content: center;
  padding-right: 126px;
}

/* con_6 */
#service section.con_6 h3.title {
  top: -20px;
}
#service section.con_6 h3.title::after {
  margin-top: -18px;
}

@media screen and (max-width: 750px) {
  #service .wrap {
    overflow: visible;
    gap: 9.6vw;
  }
  #service section {
    z-index: +1;
  }
  #service section.con_1::before {
    background-image: url(../img/service/category_bg_1_sp.webp);
  }
  #service section.con_2::before {
    background-image: url(../img/service/category_bg_2_sp.webp);
  }
  #service section.con_3::before {
    background-image: url(../img/service/category_bg_3_sp.webp);
  }
  #service section.con_4::before {
    background-image: url(../img/service/category_bg_4_sp.webp);
  }
  #service section.con_5::before {
    background-image: url(../img/service/category_bg_5_sp.webp);
  }
  #service section.con_6::before {
    background-image: url(../img/service/category_bg_6_sp.webp);
  }
  #service section h3.title {
    font-size: 4vw;
  }
  #service section h3.title::after {
    margin-top: auto;  
  }
  #service section h4 {
    font-size: 4vw;
    letter-spacing: 0.04em;
    padding: 25.33333333333333vw 1.86666666666667vw 2.4vw 7.2vw;
  }
  #service section .service_text {
    margin: 0 1.86666666666667vw;
    padding: 4.26666666666667vw 6.13333333333333vw 3.46666666666667vw;
  }
  #service section .service_text p {
    font-size: 3.33333333333333vw;
    letter-spacing: 0.03em;
  }
  #service section .lineup {
    flex-direction: column;
    gap: 2.93333333333333vw;
    margin-top: 5.86666666666667vw;
  }
  #service section .lineup .text_area {
    width: 100%;
  }
  #service section .lineup .text_area p {
    font-size: 3.06666666666667vw;
    letter-spacing: 0.14em;
    padding: 1.6vw 0 1.4vw;  
  }
  #service section .lineup ul {
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: auto;
    gap: 2vw 0;
  }
  #service section .lineup li {
    width: 24vw;
    text-align: center;    
  }
  #service section .lineup li img {
    width: 10.4vw;
  }
  #service section .lineup li span {     
    font-size: 3vw;
    letter-spacing: 0.14em;
  }
  #service section .btn_area {
    margin-top: 5.33333333333333vw;
    margin-bottom: 6.66666666666667vw;
  }

  /* green */
  #service section.green h3.title {
    top: 1.06666666666667vw;
    left: 9.6vw;
  }
  #service section.green h3.title::after {
    width: 34.13333333333333vw;
    height: 29.06666666666667vw;
  }

  /* blue */
  #service section.blue h3.title {
    top: -1.06666666666667vw;
    right: 8.53333333333333vw;
  }
  #service section.blue h3.title::after {
    width: 34.13333333333333vw;
    height: 29.86666666666667vw;
  }  

  /* con_1 */
  #service section.con_1 h3.title::after {
    margin-top: -2vw;   
  }

  /* con_4 */
  #service section.con_4 h3.title {
    top: 4.26666666666667vw;
  }
  #service section.con_4 h3.title::after {
    margin-top: -7vw;
  }
  #service section.con_4 .lineup ul {
    padding-right: 0;
  }  

  /* con_5 */
  #service section.con_5 h3.title {
    top: -4.26666666666667vw;  
  }
  #service section.con_5 .lineup ul {
    padding-right: 0;
  }

  /* con_6 */
  #service section.con_6 h3.title {
    top: 0;
  }
  #service section.con_6 h3.title::after {
    margin-top: -1vw;
  }  
}

/* ===============================
	price_plan
 =============================== */
.price_plan {
  text-align: center;
  padding-top: 64px;
  padding-bottom: 142px;
}
.price_plan h3.title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;      
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.price_plan ul {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.price_plan li {
  width: calc((100% - (16px * 4)) / 5);
  aspect-ratio: 1 / 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: 0.4s;
}
.price_plan li.plan_1 {
  background-image: url(../img/service/plan_1.webp);
}
.price_plan li.plan_2 {
  background-image: url(../img/service/plan_2.webp);
}
.price_plan li.plan_3 {
  background-image: url(../img/service/plan_3.webp);
}
.price_plan li.plan_4 {
  background-image: url(../img/service/plan_4.webp);
}
.price_plan li.plan_5 {
  background-image: url(../img/service/plan_5.webp);
}
.price_plan li:hover {
  opacity: .7;
}
.price_plan li a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.price_plan li a:hover {
  opacity: 1;
}
.price_plan li .con_box {
  width: 57.83132530120482%;
  aspect-ratio: 1 / 1;
  background: var(--C-white);
  display: flex;
  justify-content: center;
  align-items: center;  
}
.price_plan li .con_box p {
  font-size: 37px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: .6;  
  color: var(--C-green);
  text-align: center;    
}
.price_plan li .con_box span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;      
  font-size: 20px;
  font-weight: 700;  
}
.price_plan li .con_box p span:not(:last-child) {
  font-weight: 900;
}
.price_plan li.plan_5 .con_box p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;      
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.071428571428571;  
}
@media screen and (max-width: 750px) {
  .price_plan {
    padding-top: 8vw;
    padding-bottom: 12.8vw;
  }
  .price_plan h3.title {     
    font-size: 4vw;
    margin-bottom: 2.93333333333333vw;
  }
  .price_plan ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.66666666666667vw;
  }
  .price_plan li {
    width: calc((100% - (2.66666666666667vw * 2)) / 3);
  }
  .price_plan li .con_box {
    width: 58.25242718446602%;
    padding: 1vw;    
  }
  .price_plan li .con_box p {
    font-size: 6vw; 
  }
  .price_plan li .con_box span {    
    font-size: 3.33333333333333vw; 
  }
  .price_plan li.plan_5 .con_box p {   
    font-size: 4.53333333333333vw;
  }
}

.price_plan.bg_green {
  position: relative;
}
.price_plan.bg_green::after {
  content: '';
  background: #bddeb0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: .6;
  z-index: -1;
}