/* お客様の声
----------------------------------------------------------------------------------*/
@media print,screen and (min-width: 737px) { /* PCのみの設定 */
.inner{ width:1100px; margin:0 auto; position:relative; text-align:left; height:100%;}
}
@media screen and (max-width: 736px) { /* スマホのみの設定 */
.inner{ width:90%; margin:0 auto; position:relative; text-align:left; height:100%;}
}

@media print,screen and (min-width: 737px) { /* PCのみの設定 */
.inner{ width:1100px; margin:0 auto; position:relative; text-align:left; height:100%;}
.middleCopy{ font-size:24px; letter-spacing:0.1em; font-family: 'Noto Serif JP', sans-serif; font-weight:600; margin:0 auto 40px;}
.flexImg{ overflow:hidden; position:relative;}
.flexImg img{ width:100%; height:100%; object-fit:cover;}
}

.phSet02 .flexImg img{
	height: auto;
}

#voice .inner .phSet02 ul li:nth-child(1) {
    width: 67.5%;
}

#voice .inner .phSet02 ul li:nth-child(2) {
    width: 30%;
}
#voice .mainPh .text{
text-align: center;
}

#voice main {
    padding-bottom: 60px;
}












.btn{ font-size:21px; text-align:center; font-weight:400;}
.btn a{ display:block; border:3px solid; position:relative; padding:6px 0;}
.btn a:before{ content:""; width:32px; height:32px; position:absolute; top: 50%; right:15px;
-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
-moz-border-radius:50%; -webkit-border-radius:50%;border-radius:50%;}
.btn a:after{ content:""; position:absolute; width:15px; height:15px; border-top:2px solid; border-right:2px solid; top:calc(50% - 8px); right:25px; 
-webkit-transform:rotate(45deg); transform:rotate(45deg);}
.btn a:hover{ opacity:0.6;}


@media print,screen and (min-width: 737px) { /* PCのみの設定 */
#voice{}
#voice .mainImg{ background:url(../voice/img/mainImg.jpg) no-repeat center; background-size:cover; height:720px; padding:50px 0; margin:0 auto 40px;}
#voice .mainImg h1{ width:560px;}

#voice .voiceList{ width:1100px; margin:0 auto;}
#voice .voiceList ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#voice .voiceList ul li{ width:48%; margin-bottom:4%; border:1px solid #b4b4b4; text-align:left; position: relative;}
#voice .voiceList ul li a{ width:100% ; height:100% ; overflow:hidden; padding:15px 15px 15px 25px; display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row-reverse;}
#voice .voiceList ul li h2{ font-size:23px; line-height:1.6; margin-bottom:20px; order: 0; margin-right: auto;}
#voice .voiceList ul li p.ph{ width:300px;}
#voice .voiceList ul li div.spec{ width:calc(100% - 320px); display: flex; justify-content: space-between; flex-direction: column;}
#voice .voiceList ul li div.spec .tit{ font-family: 'Poppins', serif; font-size:28px; color:#b2b2b2; font-weight:600; font-style:italic; text-align:center; line-height:1; letter-spacing:0; margin:6px auto 10px;}
#voice .voiceList ul li div.spec .tit em{ font-size:62px; display:block; font-weight:500; font-style:italic; letter-spacing:0;}
#voice .voiceList ul li div.spec .tit + p{ font-size:21px; margin-bottom: 20px;}
#voice .voiceList ul li div.spec .tit + p span{ font-size:14px; display:block; margin-top:6px;}
#voice .voiceList ul li a:hover{ opacity:0.5;}
/* detail */
#voice .title{ width:100%; background:rgba(0,0,0,0.5); padding:12px 0; margin:0 auto 0px;}
#voice .title span{ width:131px; margin:0 auto; display:block;}
#voice .detail{}
#voice .mainPh{ width: 100%; height: 500px; position: relative; color: #fff; overflow: hidden;}
#voice .mainPh .text{ z-index: 1;}
#voice .mainPh h2{ font-size: 32px; margin-bottom: 20px;}
#voice .mainPh h2 + p{ font-size: 16px;}
#voice .mainPh h2,
#voice .mainPh h2 + p{ filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.6)); letter-spacing: 0.1em;}
#voice .mainPh .text,
#voice .mainPh .ph{ position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto;}
#voice .mainPh .ph{ height: 100%; }
#voice .inner{ padding: 60px 0 0; text-align: center;}
#voice .inner .box{ margin: 0 auto 60px; display: flex; justify-content: space-between; text-align: left;}
#voice .inner .box .text,
#voice .inner .box .ph{ width: 48%;}
#voice .inner .box.flexReverse{ flex-direction: row-reverse;}
#voice .intro{ display: flex; justify-content: space-between; align-items: flex-end; position: relative; margin: 0 auto 60px; text-align: left;}
#voice .intro .ph{}
#voice .intro .sheet{ position: absolute; top:-22px; right:-10px;}
#voice .intro ul{ width: 357px;}
#voice .intro ul li{ display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,0.2); padding:3px 0;}
#voice .intro ul li span{ width: 100px;}
#voice .intro ul li em{ width:calc(100% - 100px);}
#voice .inner .phSet ul{ display: flex; justify-content: space-between; flex-wrap:wrap ;}
#voice .inner .box .text .cCopy{ font-size: 21px; color: #8aba2a; margin-bottom: 15px;}
#voice .inner .box .text .cCopy + p{ font-size: 15px; line-height: 2.2; font-weight: 400;}
#voice .inner .phSet ul li{ width: 31%;}
#voice .inner .phSet ul li span{ font-size: 12px; font-weight: 400; display: block; margin-top:6px;}
#voice .inner .btn{ display: inline-block; margin: 0 auto; width: 300px;}
#voice .inner .btn a{ background: rgba(0,0,0,0.5); color: #fff; }
#voice .inner .btn a:before{ left: 15px; right: auto; transform: rotate(45deg);}
#voice .inner .btn a:after{ left: 15px; right: auto; transform: rotate(-135deg);}
}


@media screen and (max-width: 736px) { /* スマホのみの設定 */
#voice{}
#voice .mainImg{ background:url(../voice/img/mainImgSp.jpg) no-repeat center; background-size:cover; height:360px; padding:25px 0; margin:0 auto 40px;}
#voice .mainImg h1{ width:86%;}

#voice .voiceList{ width:92%; margin:0 auto;}
#voice .voiceList .middleCopy{ font-size: 18px;}
#voice .voiceList ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#voice .voiceList ul li{ width:100%; margin-bottom:4%; border:1px solid #b4b4b4; text-align:left; position: relative;}
#voice .voiceList ul li a{ width:100% ; height:100% ; overflow:hidden; padding:12px 15px; display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row-reverse;}
#voice .voiceList ul li h2{ font-size:5vw; line-height:1.6; margin-bottom:15px; order: 0; margin-right: auto;}
#voice .voiceList ul li p.ph{ margin: 0 auto 15px;}
#voice .voiceList ul li div.spec{ display: flex; justify-content: center; align-items: center; width: 100%;}
#voice .voiceList ul li div.spec .tit{ font-family: 'Poppins', serif; font-size:28px; color:#b2b2b2; font-weight:600; font-style:italic; text-align:center; line-height:1; letter-spacing:0;}
#voice .voiceList ul li div.spec .tit em{ font-size:40px; display:block; font-weight:500; font-style:italic; letter-spacing:0;}
#voice .voiceList ul li div.spec .tit + p{ font-size:18px; margin-left: 30px;}
#voice .voiceList ul li div.spec .tit + p span{ font-size:14px; display:block; margin-top:6px;}
#voice .voiceList ul li a:hover{ opacity:0.5;}
/* detail */
#voice .title{ width:100%; background:rgba(0,0,0,0.5); padding:9px 0; margin:0 auto 0px;}
#voice .title span{ width:70px; margin:0 auto; display:block;}
#voice .detail{}
#voice .mainPh{ width: 100%; height: 240px; position: relative; color: #fff; overflow: hidden;}
#voice .mainPh .text{ z-index: 1;}
#voice .mainPh h2{ font-size: 5vw; margin-bottom: 15px;}
#voice .mainPh h2 + p{ font-size:4.2vw;}
#voice .mainPh h2,
#voice .mainPh h2 + p{ filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.6)); letter-spacing: 0.1em;}
#voice .mainPh .text,
#voice .mainPh .ph{ position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto;}
#voice .mainPh .ph{ height: 100%; }
#voice .inner{ padding: 20px 0 0; text-align: center;}
#voice .inner .box{ margin: 0 auto 40px; text-align: left;}
#voice .inner .box .text,
#voice .inner .box .ph{ }
#voice .inner .box.flexReverse{}
#voice .intro{ position: relative; margin: 0 auto 40px; text-align: left;}
#voice .intro .ph{}
#voice .intro .sheet{ /*width:48%;*/ width: 70%; margin: 0 auto 0px; position: relative; top: -10px;}
#voice .intro .sheet.p2{ width: 90%;}
#voice .intro ul{ width: 100%; position: relative; top: -10px;}
#voice .intro ul li{ display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,0.2); padding:3px 0; font-size: 13px;}
#voice .intro ul li span{ width: 100px;}
#voice .intro ul li em{ width:calc(100% - 100px);}
#voice .inner .phSet ul{ display: flex; justify-content: space-between; flex-wrap:wrap ;}
#voice .inner .box .text .cCopy{ font-size:21px; color: #8aba2a; margin-bottom: 10px;}
#voice .inner .box .text .cCopy + p{ font-size: 14px; line-height: 2.0; font-weight: 400; margin: 0 auto 15px;}
#voice .inner .phSet{ margin-bottom: 30px;}
#voice .inner .phSet ul li{ /*width: 32.8%;*/ width: 49.5%; margin-bottom: 2%;}
#voice .inner .phSet ul li span{ font-size: 11px; font-weight: 400; display: block; margin-top:4px;}
#voice .inner .phSet ul li:nth-of-type(3){ width: 100%;}
#voice .inner .phSet ul li .flexImg{ display: block;}
#voice .inner .phSet ul li .flexImg{ height: 120px;}
#voice .inner .phSet ul li:nth-of-type(3) .flexImg{ height: 160px;}
#voice .inner .btn{ display: inline-block; margin: 0 auto; width: 300px;}
#voice .inner .btn a{ background: rgba(0,0,0,0.5); color: #fff; }
#voice .inner .btn a:before{ left: 15px; right: auto; transform: rotate(45deg);}
#voice .inner .btn a:after{ left: 15px; right: auto; transform: rotate(-135deg);}



}






@media screen and (max-width: 767px){
	#voice .inner .phSet02 ul {
		
	}
	#voice .inner .phSet02 ul li:nth-child(1),
	#voice .inner .phSet02 ul li:nth-child(2) {
    	width: 100%;
	}
	#voice .inner .phSet02 ul li .flexImg,
	#voice .inner .phSet03 ul li .flexImg,
	#voice .inner .phSet03 ul li:nth-of-type(3) .flexImg{
		height:auto;
	}
	#voice .inner .phSet02 ul li:nth-child(1){
		margin-bottom: 6%;
	}
	#voice .inner .phSet03 ul li{
    	width: 100%;
	}
}