@charset "UTF-8";

.main_headline .midashi{
  font-size:28px;
  margin-top:140px;
  margin:0;
}
.main_headline .mv_label{
  max-width:none;
  padding:0;
  font-size:16px;
  text-align:left;
}
.sec_can{
  margin:0 0 80px;
}
.sec_can h2{
  font-size:20px;
  margin:0 0 10px;
  font-weight:bold;
}
.sec_can h3{
  font-size:32px;
  margin:0 0 40px;
  text-align:center;
}
.sec_can p.center{
  margin:0 0 20px;
}
.sec_can dl{
  display:flex;
  max-width:900px;
  margin:0 auto;
}
.sec_can dl dt{
  width:150px;
  font-size:16px;
  font-weight:bold;
  padding:5px 20px;
  border-left:1px solid #888;
  border-top:1px solid #888;
  border-right:1px solid #888;
}
.sec_can dl:last-child dt{
  border-bottom:1px solid #888;
}
.sec_can dl dd{
  flex:1;
  font-size:16px;
  padding:5px 20px;
  border-top:1px solid #888;
  border-right:1px solid #888;
}
.sec_can dl:last-child dd{
  border-bottom:1px solid #888;
}

.sec_can--bg{
  padding:80px 0;
  background:#f5f9f9;
}
.topic_list{
  display:flex;
  gap:30px;
  justify-content: space-between;
}
.topic_item{
  width:100%;
  padding:20px;
  border-radius:10px;
  background-color:#ffffff;
  border:1px solid #ddd; 
}
.topic_item p{
  font-size:16px;
  font-weight:normal;
}
.topic_item p.topic_item_title{
  font-size:20px;
  font-weight:bold;
  padding:0 0 15px;
  border-bottom:1px solid #ddd;
  margin-bottom:15px;
  text-align:center;
  line-height:1.4;
}
.topic_item p.topic_item_title span{
  font-size:18px;
  color:#fff;
  margin:0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height:40px;
  border-radius:100%;
  background:#003833;
  font-weight:bold;
}


.questionnaire_list{
  display:flex;
  gap:40px 4%;
  justify-content: space-between;
  flex-wrap:wrap;
}
.questionnaire_item{
  width:48%;
  padding:20px;
  border-radius:10px;
  background-color:#ffffff;
  border:1px solid #ddd; 
}
.questionnaire_item figure{
  width:70%;
  margin:0 auto;
}
.questionnaire_item:first-child figure{
  margin:0 auto 10px;;
}
.questionnaire_item p{
  line-height:1.3;
  text-align:center;
}
.questionnaire_item p.questionnaire_title{
  font-size:20px;
  font-weight:bold;
  padding:0 0 15px;
  border-bottom:1px solid #ddd;
  margin-bottom:15px;
  text-align:center;
  line-height:1.4;
}
.questionnaire_item p.questionnaire_title span{
  font-size:18px;
  color:#fff;
  margin:0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height:40px;
  border-radius:100%;
  background:#003833;
  font-weight:bold;
}

.voice_list{
  display:flex;
  gap:30px;
}
.voice_item{
  position:relative;
  width:100%;
  padding:20px 10px;
  border-radius:10px;
  background-color:#ffffff;
  border:1px solid #ddd;
  text-align:center;
  line-height:2;
}
.voice_item:first-child::before,.voice_item:nth-child(2)::before{
  position:absolute;
  bottom:-50px;
  left:0;
  right:0;
  margin:auto;
  width:150px;
  height:50px;
  clip-path: polygon(90% 0, 0 0, 100% 55%);
  background:#ddd;
  content:"";
}
.voice_item:last-child::before,.voice_item:nth-child(3)::before{
  position:absolute;
  bottom:-50px;
  left:0;
  right:0;
  margin:auto;
  width:150px;
  height:50px;
  clip-path: polygon(100% 00%, 10% 0, 0 55%);
  background:#ddd;
  content:"";
}
.voice_item figure{
  width:70%;
  margin:20px auto 0;
}
.voice_img{
  width:80%;
  max-width:400px;
  margin:60px auto 0;
  padding:30px;
  border-radius:20px;
  background:#fff;
}

.report_service{
  padding:80px 0 0;
}
.report_service_list{
  display:flex;
  justify-content: center;
  gap:60px;
  margin:40px 0 0;
}
.report_service_item{
  position:relative;
  width:40%;
  border-radius:10px;
  border:1px solid #ddd;
}
.report_service_item:first-child::before{
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
  right:-40px;
  width:20px;
  height:4px;
  background:#003833;
  color:#fff;
  font-size:20px;
  font-weight:bold;
  content:"";
} 
.report_service_item:first-child::after{
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
  right:-32px;
  width:4px;
  height:20px;
  background:#003833;
  color:#fff;
  font-size:20px;
  font-weight:bold;
  content:"";
} 
.report_service_info{
  display:flex;
  align-items: center;
  gap:30px;
  padding:20px;
}
.report_service_item figure{
  width:240px;
}
.report_service_item .report_service_title{
  padding:10px 20px;
  text-align:center;
  background:#003833;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  border-radius:8x 8px 0 0;
}
.report_service_item ul{
  padding:20px;
}
.report_service_item ul li{
  position:relative;
  padding:0 0 0 16px;
  font-size:16px;
  line-height:1.5;
}
.report_service_item ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #003833;
  border-radius: 50%;
}


@media screen and (max-width: 640px) {
  h2{
    font-size:32px;
    margin:0 0 25px;
  }
  #mainvisual{
    height:auto;
  }
  .content_mv_inner{
    position:static;
    padding:0 20px 30px;
  }
  .main_headline .midashi{
    margin-top:30px;
    font-size:22px;
  }
  .main_headline .mv_label{
    font-size:14px;
  }

  .sec_can{
    margin:0 0 50px;
  }
  .sec_can--bg{
    padding:50px 0;
  }
  .sec_can h3{
    font-size:24px;
    line-height:1.5;
  }

  .topic_list{
    flex-wrap: wrap;
    gap:20px 4%;
  }
  .topic_item{
    width:48%;
    padding:15px 10px;
  }
  .topic_item p.topic_item_title{
    padding:0 0 10px;
    margin-bottom:10px;
    font-size:4vw;
  }
  .topic_item p{
    font-size:13px;
    line-height:1.6;
  }

  .questionnaire_list{
    flex-direction: column;
    gap:30px;
  }

  .questionnaire_item{
    width:100%;
  }
  .questionnaire_item figure{
    width:100%;
  }
  
  .voice_list{
    flex-direction: column;
    gap:30px;
  }
  .voice_item{
    position:relative;
    font-size:16px;
    padding:20px;
    line-height:1.5;
  }
  .voice_item:first-child::before,.voice_item:nth-child(3)::before{
    left:auto;
    right:40px;
    bottom:-20px;
    width:80px;
    height:20px;
    clip-path: polygon(100% 0, 30% 0, 0 90%);
  }
  .voice_item:last-child::before,.voice_item:nth-child(2)::before{
    left:40px;
    right:auto;
    bottom:-20px;
    width:80px;
    height:20px;
    clip-path: polygon(70% 0, 0 0, 100% 100%);
  }
  .report_service{
    padding:50px 0 0;
  }
  .report_service_list{
    flex-direction: column;
    gap:40px;
  }
  .report_service_item{
    width:100%;
  }
  .report_service_item:first-child::before{
    right:0;
    left:0;
    top:auto;
    bottom:-22px;
  }
  .report_service_item:first-child::after{
    right:0;
    left:0;
    top:auto;
    bottom:-30px;
  }
  .report_service_info{
    flex-direction: column;
    gap:20px;
  }
  .report_service_item ul{
    padding:0;
  }
}