@charset "UTF-8";

/*-------------------------
__voice_list_style
-------------------------*/

#voice_list .list_wrap{display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}
#voice_list .list_wrap .box{width:calc((100% - 30px)/4);margin:50px 10px 0 0;}
#voice_list .list_wrap .box:nth-child(4n){margin-right:0;}
#voice_list .list_wrap .box a{text-decoration:none;}
#voice_list .list_wrap .box .pic{width:100%;margin:0 auto;padding-top:100%;overflow:hidden;box-sizing:border-box;border:1px solid #EEE;position:relative;}
#voice_list .list_wrap .box .pic img{width:auto;height:auto;max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
#voice_list .list_wrap .box .txt{line-height:1.8;text-align:center;padding:40px 0 0;}

@media screen and (min-width:768px) {
#voice_list .list_wrap .box a .pic img{transition:all 0.3s;}
#voice_list .list_wrap .box a:hover .pic img{transform:translate(-50%,-50%) scale(1.2);opacity:0.5;}
}

@media screen and (max-width:767px) {
#voice_list .list_wrap .box{width:calc((100% - 15px)/2);margin:30px 15px 0 0;}
#voice_list .list_wrap .box:first-of-type(1){margin-top:0;}
#voice_list .list_wrap .box:first-of-type(2){margin-top:0;}
#voice_list .list_wrap .box:nth-child(2n){margin-right:0;}
#voice_list .list_wrap .box .txt{padding:20px 0 0;}
}

/*-------------------------
__voice_detail_style
-------------------------*/

#voice_detail .block{padding:0 40px;overflow:hidden;}
#voice_detail .block:nth-child(odd){background-color:#FFF;}
#voice_detail .block:nth-child(even){background-color:#f8f1e3;}
#voice_detail .block .block_inner{max-width:1200px;margin:60px auto 70px;}
#voice_detail .block:first-child .block_inner{margin-top:0;}

#voice_detail .customer_name{font-size:4rem;font-weight:400;line-height:1.2;text-align:center;}
#voice_detail .customer_name span{display:inline-block;font-size:50%;margin:0 0 20px;padding:6px 15px 2px;color:#FFF;background-color:#5d330d;}

#voice_detail .outline{display:flex;margin:60px 0 0;}
#voice_detail .outline dl{display:flex;width:calc((100% - 20px)/2);padding:0;box-sizing:border-box;background-color:initial;}
#voice_detail .outline dl + dl{margin-left:20px;}
#voice_detail .outline dl dt,
#voice_detail .outline dl dd{padding:10px;}
#voice_detail .outline dl dt{width:18rem;text-align:center;margin:0 15px 0 0;color:#5d330d;background-color:#f8f1e3;border:1px solid #5d330d;}
#voice_detail .outline dl dd{flex:1;font-size:initial;text-align:left;color:initial;border-bottom:1px solid #5d330d;}

#voice_detail .staff_comment{text-align:left;line-height:1.8;}
#voice_detail .staff_comment p + p{margin-top:1.5rem;}
#voice_detail .pic{max-width:800px;text-align:center;margin:80px auto;border:1px solid #EEE;box-sizing:border-box;}
#voice_detail .pic a img{width:auto;height:auto;max-width:100%;max-height:530px;}
#voice_detail .questionnaire{line-height:1.8;counter-reset:number 0;}
#voice_detail .questionnaire dl{text-align:left;padding:0;background-color:initial;}
#voice_detail .questionnaire dl + dl{margin-top:50px;}
#voice_detail .questionnaire dl dt{font-size:2rem;font-weight:400;padding:5px 15px;color:#FFF;background-color:#5d330d;}
#voice_detail .questionnaire dl dt span{display:inline-block;font-weight:700;margin:0 10px 0 0;}
#voice_detail .questionnaire dl dt span::after{content:counter(number,decimal-leading-zero);counter-increment:number 1;}
#voice_detail .questionnaire dl dd{font-size:initial;margin:1.5rem 0 0;padding:0;color:initial;}

@media screen and (min-width:768px) {
#voice_detail .pic a img{transition:all 0.3s;}
#voice_detail .pic a:hover img{opacity:0.5;}
}

@media screen and (max-width:767px) {
#voice_detail .block{padding:0 20px;}
#voice_detail .block .block_inner{margin:30px auto 35px;}

#voice_detail .customer_name{font-size:7.2vw;}
#voice_detail .customer_name span{margin:0 0 15px;}

#voice_detail .outline{display:block;font-size:4.27vw;margin:40px 0 0;}
#voice_detail .outline dl{display:block;width:100%;}
#voice_detail .outline dl + dl{margin:10px 0 0;}
#voice_detail .outline dl dt,
#voice_detail .outline dl dd{width:100%;text-align:center;padding:8px;}
#voice_detail .outline dl dd{padding:8px 0;border-bottom:none;}

#voice_detail .pic{margin:40px 0;}
#voice_detail .pic a img{width:100%;max-height:inherit;}
#voice_detail .questionnaire dl + dl{margin-top:25px;}
#voice_detail .questionnaire dl dt{font-size:4.8vw;line-height:1.3;padding:8px 10px 12px;}
#voice_detail .questionnaire dl dd{margin:1rem 0 0;}
}