/* -------------------
共通css
--------------------*/

main > section{
  padding: clamp(2.5rem, 1.4rem + 5.5vw, 8rem) 0 clamp(2rem, 1.2rem + 4vw, 6rem);
}

#problem,
#reason,
#support,
#flow{
  background: var(--bg-color);
}

/* 見出し設定 */
main h2{
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  text-align: center;
  margin-bottom: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);
  position: relative;
  z-index: 1;
}

main h3{
  font-size: clamp(1.2rem, 1.14rem + 0.3vw, 1.5rem);
  color: var(--main-color);
  margin-bottom: 1em;
}

main .title_box{
  position: relative;
  padding-top: 3.3em;
}

main .en_title{
  font-size: clamp(3rem, 2rem + 5vw, 8rem);
  font-weight: bold;
  background: var(--gradation-color-opacity);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  padding: 2rem 0;
}



/* list */

.list li{
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.8rem;
  margin-bottom: 1rem;
}
.list li:last-child{
  margin-bottom: 0;
}

.list li::before{
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50px;
  background: var(--main-color);
  position: absolute;
  top: 0.5em;
  left: 0;
}


/* list */

.dl{
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 1rem;
}

.dl dt{
  text-align: center;
  font-weight: bold;
  display: inline-block;
}
.dl dt span{
  background: var(--gray-color);
  padding: 0.5rem 0.8rem;
}

/* CTAエリア・ボタン */

main > section.cta_area{
  background: var(--gradation-color);
  padding: 2.5rem 0;
}

.cta_area .cta_box{
  background: var(--white-color);
  box-shadow: var(--object-box-shadow);
  border-radius: var(--border-radius);
  padding: clamp(2rem, 1.5rem + 2.5vw, 4.5rem) clamp(2rem, 1.7rem + 1.5vw, 3.5rem);
}

.cta_area .cta_box h2{
  font-size: clamp(1.3rem, 1.16rem + 0.7vw, 2rem);
  margin-bottom: clamp(2rem, 1.8rem + 1vw, 3rem);
}

.cta_area .cta_btn_wrap{
  display: flex;
  justify-content: center;
  text-align: center;
}
@media screen and (max-width:750px) {
  .cta_area .cta_btn_wrap{
    display: block;
  }
}
.cta_btn p{
  position: relative;
  font-weight: bold;
  display: inline-block;
}

.cta_btn p::before,
.cta_btn p::after{
  content: "";
  display: block;
  width: 13px;
  height: 100%;
  position: absolute;
  background: url(../img/comment_icon01.svg) no-repeat center / contain;
}
.cta_btn.download p::before,
.cta_btn.download p::after{
  background: url(../img/comment_icon02.svg) no-repeat center / contain;
}

.cta_btn p::before{
  left: -1.5em;
}

.cta_btn p::after{
  right: -1.5em;
  transform:rotateY(180deg);
  top: 0;
}

.cta_btn a,
.btn a{
  display: block;
  /* font-size: clamp(1rem, 0.833rem + 0.56vw, 1.5rem); */
  width: 15em;
  padding: clamp(0.5rem, 0.179rem + 0.68vw, 1rem) clamp(1rem, 0.359rem + 1.37vw, 2rem);
  margin: 0 1.5rem;
  border-radius: 100px;
  color: var(--white-color);
  background: var(--main-color);
  font-weight: bold;
  box-shadow: var(--object-box-shadow);
  transition: 0.3s;
  box-sizing: border-box;
  position: relative;
}
@media screen and (max-width:750px) {
  .cta_btn a{
    margin: 0 auto 2em;
    max-width: 100%;
  }
}

.btn a{
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
  background: var(--white-color);
  border: solid 2px var(--main-color);
  color: var(--main-color);
  display: inline-block;
  width: auto;
  padding: 0.5rem 4rem 0.5rem 2rem;
  margin: 0;
}

.cta_btn.download a{
  background: var(--accent-color);
}

.cta_btn a::after,
.btn a::after{
  content: "";
  display: block;
  width: clamp(1.5rem, 1.179rem + 0.68vw, 2rem);;
  height: clamp(1.5rem, 1.179rem + 0.68vw, 2rem);;
  background: url(../img/arrow_r.svg) no-repeat center / contain;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.cta_btn.download a::after{
  background: url(../img/arrow_g.svg) no-repeat center / contain;
}
.btn a::after{
  background: url(../img/arrow_w.svg) no-repeat center / contain;
}

.cta_btn a:hover,
.btn a:hover{
  box-shadow: var(--object-box-shadow-off);;
  transform: translate(2px, 2px);
}


/* webp設定 picture調整 */

picture{
  display: block;
  text-align: center;
}

/* -------------------
#main_fv 
--------------------*/

#main_fv{
  background-color: var(--bg-color);
  /* background-image: url(../img/main_v.webp);
  background-repeat: no-repeat;
  background-position: right 5rem center;
  background-size: 40%; */
  padding: clamp(3rem, 2.667rem + 1.11vw, 4rem) clamp(1rem, -9.897rem + 23.25vw, 18rem);
  /* padding: calc(2.667rem + 1.11vw) calc(-1.167rem + 7.22vw); */
  margin-top: clamp(3.688rem, 3.587rem + 0.5vw, 4.188rem);
  box-sizing: border-box;
  font-size: calc(0.825rem + 0.25vw);
  position: relative;
  overflow: hidden;
}


#main_fv .fv-visual{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#main_fv .fv-visual img{
  position: absolute;
  right: 5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  height: auto;
  max-width: none;
}

@media screen and (max-width:1200px){
  #main_fv .fv-visual img{
    right: clamp(-3rem, -3.443rem + 0.94vw, 5rem);
    bottom: 0;
    top: auto;
    transform: none;
    width: auto;
    max-height: 100%;
  }
}

@media screen and (max-width:750px){
  #main_fv .fv-visual img{
    width: 60%;
    right: -3rem;
    bottom: 0;
    top: auto;
    transform: none;
  }
}

#main_fv p{
  font-weight: bold;
}

#main_fv .target{
  color: var(--main-color);
  font-size: clamp(1rem, 0.833rem + 0.56vw, 1.5rem);
}

#main_fv h1{
  /* font-size: clamp(1.3rem, 0.733rem + 1.89vw, 3rem); */
  font-size: calc(0.95rem + 1.89vw);
  /* line-height: clamp(2.3rem, 1.4rem + 3vw, 5rem); */
  line-height: calc(1.4rem + 3vw);
  /* margin: clamp(1.5rem, 1.333rem + 0.56vw, 2rem) 0; */
  margin: calc(1.333rem + 0.56vw) 0;
  text-align: left;

}

#main_fv .sub_phrase{
  /* font-size: clamp(1rem, 0.833rem + 0.56vw, 1.5rem); */
  font-size: calc(0.833rem + 0.56vw);
  /* line-height: clamp(1.8rem, 1.358rem + 1.47vw, 3.125rem); */
  line-height: calc(1.358rem + 1.47vw);
}

#main_fv .cta_area{
  display: flex;
  justify-content: flex-start;
  background: none;
  /* margin: clamp(1.5rem, 1.333rem + 0.56vw, 2rem) 0; */
  margin: calc(1.333rem + 0.56vw) 0;
}
@media screen and (max-width:750px) {
  #main_fv .cta_area{
    width: 50%;
    flex-wrap: wrap;
  }
}
#main_fv .cta_btn{
  margin-right: 1.5rem;
  text-align: center;
}
@media screen and (max-width:750px) {
  #main_fv .cta_btn:first-child{
    margin-bottom: 1rem;
  }
}
#main_fv .cta_btn a{
  margin: 0;
  /* padding: clamp(0.5rem, 0.179rem + 0.68vw, 1rem) clamp(1rem, 0.359rem + 1.37vw, 2rem); */
  padding: calc(0.179rem + 0.68vw) calc(0.359rem + 1.37vw);
}
#main_fv .cta_btn a::after{
  /* width: clamp(1.5rem, 1.179rem + 0.68vw, 2rem); */
  width: calc(1.179rem + 0.68vw);
}

#main_fv .achievement_area ul{
  display: flex;
  justify-content: flex-start;
  padding-right: 0.5rem;
  position: relative;
}

#main_fv .achievement_area ul li{
/* width: clamp(6rem, 2.154rem + 8.21vw, 12rem); */
width: calc(2.154rem + 8.21vw);
margin-right: 1rem;
}
#main_fv .achievement_area ul li:last-child{
margin-right: 0;
}



/* -------------------
#problem 
--------------------*/

#problem{
  box-shadow: var(--object-box-shadow);
  position: relative;
}

#problem::after,
#problem .problem_s_box p::after{
  content: "";
  display: block;
  width: clamp(3rem, 2.6rem + 2vw, 5rem);
  height: clamp(2.5rem, 2.2rem + 1.5vw, 4rem);
  box-sizing: border-box;
  border-top: clamp(2.5rem, 2.2rem + 1.5vw, 4rem) solid var(--bg-color);
  border-right: clamp(3rem, 2.6rem + 2vw, 5rem) solid transparent;
  border-left: clamp(3rem, 2.6rem + 2vw, 5rem) solid transparent;
  /* filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.1)); */
  position: absolute;
  bottom: clamp(-2.5rem, 2.2rem + 1.5vw, -4rem);
  left: 50%;
  transform: translateX(-50%);
}

#problem .problem_s_box{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, -0.538rem + 3.28vw, 3.4rem);
  text-align: center;
}

@media screen and (max-width: 750px){
  #problem .problem_s_box{
    grid-template-columns: 1fr;
    gap: 5em;
  }
}

#problem .problem_s_box li img{
  max-width: 120px;
}
#problem .problem_s_box li:last-child img{
  max-width: 164px;
}


#problem .problem_s_box p{
  background: var(--white-color);
  padding: 2rem 1rem;
  font-weight: bold;
  line-height: 2rem;
  border-radius: 20px;
  box-shadow: var(--object-box-shadow);
  position: relative;
  margin-bottom: 1rem;
}

#problem .problem_s_box p::after{
  width: 2rem;
  height: 0.8rem;
  border-top: 0.8rem solid var(--white-color);
  border-right: 1rem solid transparent;
  border-left: 1rem solid transparent;
  bottom: -0.8rem;
}

#problem .problem_s_box span{
  color: var(--white-color);
  font-size: 1rem;
  line-height: 1rem;
  font-weight: bold;
  display: inline-block;
  padding: 0.5rem;
  background: var(--logo-gradation-color);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}



/* -------------------
#solution 
--------------------*/

#solution{
  padding-top: 3rem;
}
#solution h2{
  font-size: clamp(1.3rem, 1.16rem + 0.7vw, 2rem);
}

@media screen and (max-width: 750px){
  #solution h2{
    line-height: 3rem;
  }
}


#solution h2 strong{
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
}

#solution h2 img{
  max-width: clamp(6rem, 5.6rem + 2vw, 8rem);
  padding-right: 0.5em;
  vertical-align: middle;
}

#solution .solution_s_box{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.52rem + 2.4vw, 3.4rem);
}

@media screen and (max-width: 750px){
  #solution .solution_s_box{
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}


#solution .solution_s_box section{
  padding: 2em;
  box-shadow: var(--object-box-shadow);
  border-radius: var(--border-radius);
}

#solution h3 span{
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem); ;
  line-height: 1rem;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  background-color: var(--main-color);
  color: var(--white-color);
  margin-bottom: 0.5rem;
}




/* -------------------
#reason
--------------------*/

#reason section{
  background: var(--white-color);
  border-radius: var(--border-radius);
  box-shadow: var(--object-box-shadow);
  padding: clamp(2rem, 1.4rem + 3vw, 5rem);
  padding-top: clamp(2.5rem, 2rem + 2.5vw, 5rem);
  margin-bottom: clamp(4rem, 3.6rem + 2vw, 6rem);
  position: relative;
}
#reason section:last-child{
  margin-bottom: 0;
}

#reason h3{
  font-size: clamp(1.3rem, 1.16rem + 0.7vw, 2rem);
}

#reason h3 span{
  font-size: clamp(2rem, 1.5rem + 2.5vw, 4.5rem);
  padding-left: clamp(1rem, 0.2rem + 4vw, 5rem);
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
}

#reason p{
  margin-bottom: 1.5em;
}

#reason .human_resource{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.875rem, 0.65rem + 1.13vw, 2rem);
  margin-bottom: 1rem;
}
@media screen and ( max-width:896px){
  #reason .human_resource{
    grid-template-columns: repeat(2, 1fr);
  }
} 
@media screen and ( max-width:480px){
  #reason .human_resource{
    grid-template-columns: 1fr;
  }
} 

#reason .human_resource li{
  background: var(--white-color);
  box-shadow: var(--object-box-shadow);
  border-radius: var(--border-radius);
  padding: 1rem;
  font-size: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);
  line-height: 1.8rem;
}

#reason .human_resource li img{
  display: block;
  margin: 0 auto 1em;
  max-width: 60%;
}
@media screen and ( max-width:750px){
  #reason .human_resource li img{
    max-width: 40%;
  }
} 

#reason section .clm2_3{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}
@media screen and ( max-width:750px){
  #reason section .clm2_3{
    grid-template-columns: 1fr;
    gap: 0;
  }
  #reason section .clm2_3 img{
    max-width: 60%;
    margin: 0 auto;
  }
} 




/* -------------------
#support
--------------------*/

#support .support_area{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: clamp(3rem, 2.6rem + 2vw, 5rem);
}
@media screen and (max-width:750px) {
  #support .support_area{
  grid-template-columns: 1fr;
}

}
#support .support_area section{
  background: var(--white-color);
  border-radius: var(--border-radius);
  box-shadow: var(--object-box-shadow);
  padding: 2rem;
}

#support h3{
  padding-left: 3rem;
  position: relative;
}
#support h3::before{
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background: url(../img/support_icon01.svg) no-repeat center / contain;
  position: absolute;
  left: 0;
  top: 3px;
}

#support .comment{
  text-align: center;
  font-weight: bold;
  margin-bottom: clamp(2rem, 1.6rem + 2vw, 4rem);
}




/* -------------------
#example
--------------------*/

#example {
  background: linear-gradient(180deg, var(--white-color) 0%, var(--white-color) 82%, var(--bg-color) 82%, var(--bg-color) 100%);
}


#example .example_area{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.359rem + 1.37vw, 2rem);
}
@media screen and (max-width:750px){
  #example .example_area{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

#example .example_area section{
  background: var(--white-color);
  box-shadow: var(--object-box-shadow);
  border-radius: var(--border-radius);
}

#example .example_area h3{
  color: var(--white-color);
  background: var(--main-color);
  padding: 1rem;
  text-align: center;
  border-radius: 5px 5px 0 0;
  margin-bottom: 0;
}

#example .example_area .example_box{
  padding: 2rem clamp(1rem, 0.359rem + 1.37vw, 2rem);
}

#example .example_area .price{
  padding-left: 3rem;
  position: relative;
  color: var(--main-color);
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

#example .example_area .days{
  padding-left: 3.2rem;
  position: relative;
  font-weight: bold;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  margin-bottom: 2rem;
}

#example .example_area .price::before,
#example .example_area .days::before{
  content: "";
  display: block;
  width: clamp(2rem, 1.679rem + 0.68vw, 2.5rem);
  height: clamp(2rem, 1.679rem + 0.68vw, 2.5rem);
  background: url(../img/price_icon.svg) no-repeat center / contain;
  position: absolute;
  left: 0;
  top: 0;
}
#example .example_area .days::before{
  background: url(../img/days_icon.svg) no-repeat center / contain;
}
/* @media screen and (max-width:750px) {
  #example .example_area .price::before,
  #example .example_area .days::before{
    width: 2rem;
    height: 2rem;
  }
} */

#example .example_area .price span{
  font-size: clamp(2rem, 1.8rem + 1vw, 3rem);
}




/* -------------------
#voice
--------------------*/

#voice {
  background: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-color) 28%, var(--white-color) 28%, var(--white-color) 100%);
}

#voice section{
  background: var(--white-color);
  border-radius: var(--border-radius);
  box-shadow: var(--object-box-shadow);
  padding: 2rem;
  margin-bottom: 3rem;
}

#voice .voice_box{
  display: grid;
  grid-template-columns: clamp(7rem, 6.4rem + 3vw, 10rem) 1fr;
  gap: clamp(1rem, 0.667rem + 1.11vw, 2rem);
  margin-bottom: 1.5rem;
}
@media screen and (max-width:480px) {
  #voice .voice_box{
    grid-template-columns: 1fr;
  }

  #voice .voice_box img{
    margin: 0 auto;
    max-width: 40%;
  }
}

#voice .voice_box img.voice_first_img{
  max-width: 120px;
}
@media screen and (max-width:480px) {
  #voice .voice_box img{
    margin: 0 auto;
    max-width: 40%;
  }
}

#voice .voice_box h3{
  color: var(--white-color);
}

#voice .voice_box h3 span{
  background: var(--accent-color);
  padding: 0.1rem 0.2rem;
}

#voice .voice_box .manager{
  font-weight: bold;
  padding-left: 3.5rem;
  position: relative;
  margin-bottom: 1.5rem;
  text-align: left;
}

#voice .voice_box .manager::before{
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background: url(../img/company_icon.svg) no-repeat center / contain;
  position: absolute;
  top: 0;
  left: 0;
}




/* -------------------
#flow
--------------------*/

#flow .flow_area li{
  background: var(--white-color);
  border-radius: var(--border-radius);
  box-shadow: var(--object-box-shadow);
  padding: 2rem;
  margin-bottom: 4rem;
  position: relative;
}

#flow .flow_area li::after{
  content: "";
  display: block;
  width: clamp(2rem, 1.6rem + 2vw, 4rem);
  height: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  box-sizing: border-box;
  border-top: clamp(1.5rem, 1.2rem + 1.5vw, 3rem) solid var(--white-color);
  border-right: clamp(2rem, 1.6rem + 2vw, 4rem) solid transparent;
  border-left: clamp(2rem, 1.6rem + 2vw, 4rem) solid transparent;
  /* filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.1)); */
  position: absolute;
  bottom: clamp(-1.5rem, 1.2rem + 1.5vw, -3rem);
  left: 50%;
  transform: translateX(-50%);
  }

#flow .flow_area li:last-child:after{
  display: none;
  margin-bottom: 0;
}

#flow .flow_box{
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: clamp(1rem, 0.6rem + 2vw, 3rem);
}
@media screen and (max-width:480px) {
  #flow .flow_box{
    grid-template-columns: 1fr;
  }
}

#flow .flow_box span{
  font-size: clamp(2rem, 1.7rem + 1.5vw, 3.5rem);
  display: block;
  text-align: center;
  font-weight: bold;
  color: var(--main-color);
  line-height: clamp(1.5rem, 1.24rem + 1.3vw, 2.8rem);
}
#flow .flow_box span.step-number{
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
}

@media screen and (max-width:480px) {
  #flow .flow_box h3{
    text-align: center;
  }
}



/* -------------------
#faq
--------------------*/

#faq .faq_box{
  background: var(--white-color);
  border-radius: var(--border-radius);
  box-shadow: var(--object-box-shadow);
  padding: 2rem;
  margin-bottom: 3rem;
}

#faq .faq_box h3,
#faq .faq_box p{
  padding-left: clamp(2rem, 1.6rem + 2vw, 4rem);
  position: relative;
}
#faq .faq_box h3{
  color: var(--accent-color);
}

#faq .faq_box span{
  font-size: clamp(1.2rem, 1.04rem + 0.8vw, 2rem);
  position: absolute;
  left: 0;
}

#faq .faq_box span.anser{
  color: var(--main-color);
  font-weight: bold;
}