@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,600;1,600&display=swap');

/* ====================
   .common
   ==================== */
.contents-wrapper{
  max-width: 800px;
  margin: 0 auto;
}

.hero {
	width: 100%;
	padding: 100px 0 50px 0;
}

@media only screen and (max-width: 767px) {
	.hero {
		padding: 65px 0 5vw 0;
	}
}

.title-area{
   text-align: center;
   /*! margin-bottom: 50px; */
}

.title-area .m-text{
   font-size: 31px;
   line-height: 1.4;
   border-bottom: 5px solid #dc000c;
   padding-bottom: 15px;
   margin-bottom: 20px;
}

.text{
    font-size: 18px;
    line-height: 2.2;
}

.s-text{
    font-size: 14px;
    line-height: 2.2;
}

.title-text {
    font-size: 24px;
    line-height: 1.4;
    margin: 60px 0 20px 0;
}

@media only screen and (max-width: 767px) {
   .title-area .m-text{
      font-size: 5.5vw;
      border-bottom: 3px solid #dc000c;
      padding-bottom: 5px;
      margin-bottom: 5px;
   }

   .text{
      font-size: 4vw;
      line-height: 1.6;
   }
	
	.s-text{
			font-size: 3vw;
  }

   .title-text {
       font-size: 4vw;
       line-height: 1.4;
       margin: 30px 0 15px 0;
    }
}


/* ====================
   .lead-inner
   ==================== */
#page-wrapper .lead-inner{
	padding: 0 0 70px;
}

#page-wrapper .lead-area .text{
	font-size: 17.8px;
	line-height: 2;
}

@media only screen and (max-width: 767px) {
	#page-wrapper .lead-inner{
		padding: 0 0 50px;
	}

  #page-wrapper .lead-inner .m-text{
      font-size: 5.5vw;
      border-bottom: 3px solid #dc000c;
      padding-bottom: 5px;
      margin-bottom: 5px;
   }

   #page-wrapper .lead-area .text{
      font-size: 4vw;
      line-height: 1.6;
   }
}

/* ====================
   .sec01
   ==================== */
#page-wrapper .sec01{
	padding: 0 0 90px;
}

#page-wrapper .sec01 .data-block + .data-block{
	margin-top: 80px;
}

#page-wrapper .sec01 .section-title{
	margin-bottom: 30px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

#page-wrapper .sec01 .section-title span{
	position: relative;
}

#page-wrapper .sec01 .section-title span::before,
#page-wrapper .sec01 .section-title span::after{
	content: "";
	width: 30px;
	height: 20px;
	background: url("../img/voice/title_deco.png") no-repeat 0 0;
	background-size: contain;
	position: absolute;
	top: 30%;
}

#page-wrapper .sec01 .section-title span::before{
	left: -40px;
}

#page-wrapper .sec01 .section-title span::after{
	right: -40px;
}

#page-wrapper .sec01 .data-list{
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 3px solid #e50012;
	border-right: 3px solid #e50012;
}

#page-wrapper .sec01 .data-item{
	width: 33.333%;
	box-sizing: border-box;
	text-align: center;
}

#page-wrapper .sec01 .data-item-box{
	height: 100%;
	padding: 5px 0;
	box-sizing: border-box;
	width: calc(100% - 30px);
	margin: 0 auto;
}

#page-wrapper .sec01 .img-area{
	width: 120px;
	margin: 0 auto;
}

#page-wrapper .sec01 .block-1 .data-item:first-of-type .img-area{
	width: 140px;
	margin: 10px auto 0 auto;
}

#page-wrapper .sec01 .label{
	margin-bottom: 10px;
	font-size: 19px;
	line-height: 1.5;
}

#page-wrapper .sec01 .sub-copy{
	font-size: 18px;
	line-height: 1.5;
}

#page-wrapper .sec01 .main-value{
	font-size: 31px;
	line-height: 1.2;
}

#page-wrapper .sec01 .num{
	font-size: 62px;
	line-height: 1;
	color: #e50012;
	font-family: "Noto Sans", sans-serif;
  font-weight: 600;
}

#page-wrapper .sec01 .rank{
	font-size: 28px;
	line-height: 1.2;

}

#page-wrapper .sec01 .sub-value{
	font-size: 15px;
	line-height: 1.5;
}

#page-wrapper .sec01 .ratio-area{
	margin-top: 4px;
	font-size: 18px;
	line-height: 1.5;
	justify-content: center;
	gap:0 10px;
}

#page-wrapper .sec01 .ratio-label{
	font-size: 16px;
	line-height: 1.4;
}

#page-wrapper .sec01 .ratio-value{
	font-size: 22px;
}

#page-wrapper .sec01 .data-item-box{
	display: flex;
	flex-direction: column;
	height: 100%;
}

#page-wrapper .sec01 .text-area{
	margin-top: auto;
}

#page-wrapper .sec01 .s-text{
	text-align: right;
	margin: 30px 0 0 0
}

/* --------------------
   6個並びのブロック
   PC: 3列×2行
   -------------------- */
#page-wrapper .sec01 .data-list:not(.data-list-col3) .data-item:nth-child(3n+1),
#page-wrapper .sec01 .data-list:not(.data-list-col3) .data-item:nth-child(3n+2){
	border-right: 3px solid #e50012;
}

#page-wrapper .sec01 .data-list:not(.data-list-col3) .data-item:nth-child(-n+3) .data-item-box{
	border-bottom: 3px solid #e50012;
	padding-bottom: 15px;
}

#page-wrapper .sec01 .data-list .data-item:nth-child(-n+3){
	padding-bottom: 15px;
}

/* --------------------
   3個並びのブロック
   PC: 3列×1行
   -------------------- */
#page-wrapper .sec01 .data-list-col3 .data-item:nth-child(1),
#page-wrapper .sec01 .data-list-col3 .data-item:nth-child(2){
	border-right: 3px solid #e50012;
}

@media only screen and (max-width: 767px) {
	#page-wrapper .sec01{
		padding: 0 0 55px;
	}

	#page-wrapper .sec01 .data-block + .data-block{
		margin-top: 42px;
	}

	#page-wrapper .sec01 .section-title{
		margin-bottom: 22px;
		font-size: 22px;
	}

	#page-wrapper .sec01 .section-title::before,
	#page-wrapper .sec01 .section-title::after{
		width: 42px;
	}

	#page-wrapper .sec01 .section-title::before{
		left: calc(50% - 115px);
	}

	#page-wrapper .sec01 .section-title::after{
		right: calc(50% - 115px);
	}

	#page-wrapper .sec01 .data-list{
		border-right: none;
		border-left: 2px solid #e50012;
	}

	#page-wrapper .sec01 .data-item{
		width: 50%;
		display: flex;
	}

	#page-wrapper .sec01 .data-item-box{
		padding: 0 0 1.6vw 0;
		width: calc(100% - 20px);
	}

	#page-wrapper .sec01 .img-area{
		width: 65%;
	}
	
	#page-wrapper .sec01 .block-1 .data-item:first-of-type .img-area{
		width: 70%;
		margin: 10px auto 0 auto;
	}

	#page-wrapper .sec01 .label{
		min-height: auto;
		font-size: 3.6vw;
	}

	#page-wrapper .sec01 .sub-copy{
		font-size: 3vw;
	}

	#page-wrapper .sec01 .main-value{
		font-size: 5vw;
	}

	#page-wrapper .sec01 .rank{
		font-size: 5vw;
	}

	#page-wrapper .sec01 .main-value .num,
  #page-wrapper .sec01 .num,
	#page-wrapper .sec01 .rank span{
		font-size: 11vw;
	}

	#page-wrapper .sec01 .sub-value{
		font-size: 2.5vw;
	}

	#page-wrapper .sec01 .ratio-area{
		column-gap: 5px;
	}

	#page-wrapper .sec01 .ratio-label{
		font-size: 3vw;
	}

	#page-wrapper .sec01 .ratio-value{
		font-size: 5vw;
	}
	
	#page-wrapper .sec01 .data-item-box{
		height: auto;
	}

	#page-wrapper .sec01 .text-area{
		margin: 0;
		margin-top: auto;
	}
	
	#page-wrapper .sec01 .text-area.mt10{
		margin-top: 17px;
	}
	
	#page-wrapper .sec01 .text-area.mt20{
		margin-top: 23px;
	}
	
	#page-wrapper .sec01 .img-area.mb10{
		margin-bottom: 4px;
	}


	/* --------------------
	   6個並びのブロック
	   SP: 2列×3行
	   -------------------- */
	#page-wrapper .sec01 .data-list:not(.data-list-col3) .data-item{
		border-right: 2px solid #e50012;
		padding-top: 5px;
	}

	#page-wrapper .sec01 .data-list:not(.data-list-col3) .data-item:nth-child(odd){
		border-right: 2px solid #e50012;
	}

	#page-wrapper .sec01 .data-list:not(.data-list-col3) .data-item .data-item-box{
		border-bottom: none;
	}

	#page-wrapper .sec01 .data-list:not(.data-list-col3) .data-item:nth-child(-n+4) .data-item-box{
		border-bottom: 2px solid #e50012;
	}
	
	#page-wrapper .sec01 .data-list:not(.data-list-col3) .data-item:nth-child(-n+3) .data-item-box{
		border-bottom: 2px solid #e50012;
		padding-bottom: 5px;
	}
	
	#page-wrapper .sec01 .data-list .data-item:nth-child(-n+3){
		padding-bottom: 0;
	}
	
	#page-wrapper .sec01 .data-list:not(.data-list-col3) .data-item:nth-child(3n+1),
  #page-wrapper .sec01 .data-list:not(.data-list-col3) .data-item:nth-child(3n+2),
	#page-wrapper .sec01 .data-list-col3 .data-item:nth-child(2){
		border-right: 2px solid #e50012;
	}

	/* --------------------
	   3個並びのブロック
	   SP: 2列 + 1列
	   -------------------- */
	#page-wrapper .sec01 .data-list-col3{
		border: none;
	}
	#page-wrapper .sec01 .data-list-col3 .data-item{
		border-right: 2px solid #e50012;
	}

	#page-wrapper .sec01 .data-list-col3 .data-item:nth-child(1){
		border-left: 2px solid #e50012;
		border-right: 2px solid #e50012;
	}

	#page-wrapper .sec01 .data-list-col3 .data-item:nth-child(1) .data-item-box,
	#page-wrapper .sec01 .data-list-col3 .data-item:nth-child(2) .data-item-box{
		border-bottom: 2px solid #e50012;
	}

	#page-wrapper .sec01 .data-list-col3 .data-item:nth-child(3){
		width: 50%;
		margin: 10px auto;
		border-left: 2px solid #e50012;
	}
	
	#page-wrapper .data-list-col3 .data-item{
		padding-bottom: 0!important;
	}
	
	#page-wrapper .data-list-col3 .data-item .data-item-box{
		height: 58vw;
	}
	
	#page-wrapper .data-list-col3 .data-item:last-of-type .data-item-box{
		height: 48vw;
	}
	
	#page-wrapper .sec01 .s-text{
		margin: 0;
	}
}

/* ====================
   .sec02
   ==================== */
#page-wrapper .sec02{
	padding: 80px 0 100px;
	border-bottom: 1px solid #fff;
	background: #f2f2f2;
}

#page-wrapper .sec02 .lead-area{
	margin-bottom: 44px;
}

#page-wrapper .sec02 .voice-list{
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0 -10px -20px;
	padding: 0;
	list-style: none;
}

#page-wrapper .sec02 .voice-item{
	width: 50%;
	padding: 0 10px 20px;
	box-sizing: border-box;
}

#page-wrapper .sec02 .voice-box{
	padding: 15px 0 15px 15px;
	background: #fff;
	height: 100%;
	box-sizing: border-box;
	border-top: 3px solid #6b7a8c;
	clip-path: polygon(100% 0, 100% 90%, 94% 100%, 0 100%, 0 0);
}

#page-wrapper .sec02 .voice-box-red{
	border-top: 3px solid #e50012;
}

#page-wrapper .sec02 .voice-image{
	width: 98px;
	flex: 0 0 98px;
	text-align: center;
}

#page-wrapper .sec02 .voice-image img{
	display: block;
	width: 100%;
}

#page-wrapper .sec02 .voice-image img:first-child{
	margin-bottom: 6px;
}

#page-wrapper .sec02 .voice-image img:last-child{
	margin-top: 6px;
}

#page-wrapper .sec02 .voice-label{
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
}

#page-wrapper .sec02 .voice-text{
	width: calc(100% - 118px);
	padding-left: 18px;
	box-sizing: border-box;
}

#page-wrapper .sec02 .voice-copy{
	font-size: 16px;
	line-height: 1.6;
}

@media only screen and (max-width: 1024px) {
/* 	#page-wrapper .sec02{
		padding: 0 0 80px;
	}

	#page-wrapper .sec02 .m-text{
		font-size: 32px;
	} */
}

@media only screen and (max-width: 767px) {
	#page-wrapper .sec02{
		padding: 40px 0 60px;
	}

	#page-wrapper .sec02 .title-area{
		margin-bottom: 20px;
	}

	#page-wrapper .sec02 .voice-item{
		width: 100%;
		margin-bottom: 20px;
	}
	
	#page-wrapper .sec02 .voice-box{
		padding: 0 20px 5px 20px;
		align-items: center;
	}

	#page-wrapper .sec02 .voice-image{
		width: 96px;
		margin: 0 auto 14px;
	}
	
	#page-wrapper .sec02 .voice-image img:first-child{
		width: 90%;
		margin:0 auto 5px auto;
	}

	#page-wrapper .sec02 .voice-image img:last-child{
		margin-top: 6px;
	}


	#page-wrapper .sec02 .voice-label{
		font-size: 2.8vw;
	}

	#page-wrapper .sec02 .voice-text{
		width: 100%;
	}

	#page-wrapper .sec02 .voice-copy{
		font-size: 3.3vw;
		line-height: 2;
	}
}