@charset "utf-8";
/* ===================================================================
//CSS information

// file name  :  voice.css
// style info :  スタイル指定
=================================================================== */

@media (max-width: 767px){
	.kvWrap .img-caps{top:0; bottom: inherit; left: 0; right: inherit;}
}


.voice_kvWrap{background: #e96087;}
.voice_kvWrap .voice_kvInnner:after{content: ""; display: block; clear: both;}
.voice_kvWrap .voice_kvInnner .voice_kvTitle{float: right; width: 50%;}
.voice_kvWrap .voice_kvInnner figure{float: right; width: 50%; overflow: hidden;}
.voice_kvWrap .voice_kvInnner figure img{width: 100%; height: auto;}

.voice_kvWrap .voice_kvInnner .voice_kvTitle{padding-top: 70px;}
.voice_kvWrap .voice_kvInnner .voice_kvTitle h2{color: #fff; position: relative; line-height: 1.3;}
.voice_kvWrap .voice_kvInnner .voice_kvTitle h2 small{font-size: 0.7em;}
.voice_kvWrap .voice_kvInnner .voice_kvTitle h2:before{content: ""; width: 450px; height: 1px; background: #fff; display: block; margin: 0 auto 15px;}
.voice_kvWrap .voice_kvInnner .voice_kvTitle h2:after{content: ""; width: 450px; height: 1px; background: #fff; display: block; margin: 15px auto 0;}
.voice_kvWrap .voice_kvInnner .voice_kvTitle p{color: #fff; text-align: center; font-size: 0.9em; margin-bottom: 0;}

@media screen and (max-width: 1270px){
	.voice_kvWrap .voice_kvInnner .voice_kvTitle{padding-top: 40px;}
}
@media screen and (max-width: 1050px){
	.voice_kvWrap .voice_kvInnner .voice_kvTitle{padding-top: 20px;}
}
@media screen and (max-width: 940px){
	.voice_kvWrap .voice_kvInnner .voice_kvTitle{padding: 40px 0;}
	.voice_kvWrap .voice_kvInnner figure img{height: 100%; width: auto; max-width: inherit; margin-left: -20%;}
	.voice_kvWrap .voice_kvInnner .voice_kvTitle h2{padding: 0 15px;}
	.voice_kvWrap .voice_kvInnner .voice_kvTitle h2 small{font-size: 0.7em;}
	.voice_kvWrap .voice_kvInnner .voice_kvTitle h2:before{content: ""; width: 100%;}
	.voice_kvWrap .voice_kvInnner .voice_kvTitle h2:after{content: ""; width: 100%;}
	.voice_kvWrap .voice_kvInnner .voice_kvTitle p{padding: 0 15px;}
}
@media screen and (max-width: 767px){
	.voice_kvWrap .voice_kvInnner .voice_kvTitle{float: none; width: 100%;}
	.voice_kvWrap .voice_kvInnner figure{float: none; width: 100%; overflow: hidden;}
	.voice_kvWrap .voice_kvInnner figure img{height: auto; width: 100%; max-width: 100%; margin-left: 0;}
}


/*ランキング*/
#voice_page{background: url(../../../img/pages/voice/voice_bk.jpg); padding: 130px 0 70px;}
#voice_page .container{max-width: 980px;}

.v_rank_row{text-align: center;}

.v_rank_title{text-align: center; border: 4px solid #e95512; background: #fffac1; position: relative; padding: 50px 20px 20px;}
.v_rank_title figure{position: absolute; top:-70px; left: 0; right: 0; margin: auto; z-index: 2;}
.v_rank_title p{margin-bottom: 0; line-height: 1.8; letter-spacing: 0; font-size: 1.5em;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'MS PGothic', sans-serif; font-weight: bold; font-size: 1.3em;}
.v_rank_title p span{color: #f1668d; font-weight: bold;}

figcaption.vo_caption{text-align: center; position: absolute; left: 0; right: 0; bottom: -8px; margin: auto;}
figcaption.vo_caption span{background: #4593d0; color: #fff; padding: 12px 40px; border-radius: 20px;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'MS PGothic', sans-serif; font-weight: bold; font-size: 1.3em;}

/*1位*/
.v_rank1_1l_row{padding-top: 50px;}
.v_rank1_1l_row .v_rank1_1l_figure{text-align: right;}
.v_rank1_1l_row .v_rank_title{margin-bottom: 30px;}

@media screen and (max-width: 991px){
	.v_rank_title{ padding: 50px 15px 20px;}
	.v_rank_title p{ font-size: 1em;}
}

@media screen and (max-width: 767px){
	.v_rank1_1l_row{text-align: center;}
	.v_rank1_1l_row .col-sm-5{margin-bottom: 30px;}
	.v_rank1_1l_row .v_rank1_1l_figure{text-align: center;}
	figcaption.vo_caption span{font-size: 4vw;padding: 12px 10%;}
}

/*2位*/
.v_rank2_1l_row{padding-top: 60px;}
.v_rank2_1l_row .col-md-6{float: right;}
.v_rank2_1l_row .v_rank_title{border: 4px solid #4593d0; padding: 60px 20px 20px;}
.v_rank2_1l_row .v_rank_title p{font-size: 1.6em;}
.v_rank2_1l_row .img-caps{font-size: .6em; bottom: inherit; top: 0;}

.v_rank2_2l_row figure{text-align: center;}
.v_rank2_2l_row figcaption.vo_caption span{font-size: 1em;}
.v_rank2_2l_row .img-caps{font-size: .6em; background: none; color: #000; bottom: 20px;}

@media screen and (max-width: 991px){
	.v_rank2_1l_row .v_rank_title p{ font-size: 1em;}
	.v_rank2_2l_row figcaption.vo_caption span{font-size: 0.8em; padding: 12px 10px;}
	.v_rank2_2l_row .img-caps{ left: 0; right: 0; color: #fff;}
}

@media screen and (max-width: 767px){
	.v_rank2_1l_row .col-md-6 {float: none;}
	.v_rank2_1l_row .v_rank_title{margin-bottom: 30px;}
	.v_rank2_1l_row .v_rank_title p br{display: none;}
	.v_rank2_1l_row .col-sm-6{text-align: center;}
	
	.v_rank2_2l_row .col-sm-4{text-align: center; margin-bottom: 40px;}
}

/*3位*/
.v_rank3_1l_row{padding-top: 80px;}
.v_rank3_1l_row .v_rank_title{border: 4px solid #8dc21e;}
.v_rank3_1l_row .v_rank_title p{font-size: 1.6em;}
.v_rank3_2l_row figcaption.vo_caption span,
.v_rank3_3l_row figcaption.vo_caption span,
.v_rank3_4l_row figcaption.vo_caption span{background: #8dc21e;}
.v_rank3_3l_row figcaption.vo_caption span,
.v_rank3_4l_row figcaption.vo_caption span{font-size: 1em; padding: 12px 20px;}
.v_rank3_3l_row figure,
.v_rank3_4l_row figure{text-align: center;}
.v_rank3_3l_row .img-caps,
.v_rank3_4l_row .img-caps{font-size: .6em; bottom: inherit; top:0;}

@media screen and (max-width: 991px){
	.v_rank3_1l_row .v_rank_title{padding: 40px 15px 20px;}
	.v_rank3_1l_row .v_rank_title p{font-size: 1em;}
	
	.v_rank3_2l_row .img-caps{ bottom: inherit; top: 0;}
	.v_rank3_3l_row figcaption.vo_caption span,
	.v_rank3_4l_row figcaption.vo_caption span{font-size: 0.8em; padding: 12px 10px; letter-spacing: 0;}
}

@media screen and (max-width: 767px){
	.v_rank3_2l_row .col-sm-6{text-align: center; margin-bottom: 40px;}
	.v_rank3_3l_row .col-sm-4,
	.v_rank3_4l_row .col-sm-4{text-align: center; margin-bottom: 40px;}
}

/*ここに決めた理由*/
.v_reasonWrap{background: url(../../../img/pages/voice/reason_bk.jpg); border-radius: 30px; box-shadow: 2px 2px 10px #959595;
	text-align: center; padding: 40px 30px; margin-top: 80px;}
.v_reasonWrap p{background: #fff; font-size: 0.8em; line-height: 1.8; padding: 10px; box-shadow: 0px 3px 4px #a39978;}
.v_reasonWrap ul{overflow: hidden; margin-top: 40px; margin-left: -4%;}
.v_reasonWrap ul li{float: left; width: 46%; margin-left: 4%; margin-bottom: 30px;}
.v_reasonWrap ul li a{position: relative;display: block;}
.v_reasonWrap ul li:after{
	content: '';
	display: block;
	background: #000;
}
.v_reasonWrap ul li a:before{
		content: '';
    display: block;
    background: url(../../../img/zoom_in_icon.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;}

.remodal{background: none;}

@media screen and (max-width: 991px){
	.v_rank2_1l_row .v_rank_title p{ font-size: 1em;}	
}


@media screen and (max-width: 480px){
	.v_reasonWrap{padding: 20px 15px;}
	.v_reasonWrap ul{margin-left: 0%;}
	.v_reasonWrap ul li{float: none; width: 100%; margin-left: 0; margin-bottom: 20px;}
}


/*2020.10.02 追加*/
.voice_title{
background: #edcd42;
background: -moz-linear-gradient(left,  #edcd42 0%, #f4e77f 50%, #edcd42 100%);
background: -webkit-linear-gradient(left,  #edcd42 0%,#f4e77f 50%,#edcd42 100%);
background: linear-gradient(to right,  #edcd42 0%,#f4e77f 50%,#edcd42 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edcd42', endColorstr='#edcd42',GradientType=1 );
}
.voice_title h2{font-weight: bold; color: #e0547d; font-size: 3.5vw; letter-spacing: 3px; margin-bottom: 0; padding: 20px 0;}

.mb_40{margin-bottom: 40px;}

.col_wrap{display: flex; flex-wrap: wrap; justify-content: space-between;}
.col_wrap .colBox_3{width: 32%;}

.col_wrap .v_text_box{width: 60%;}
.col_wrap .v_photo_box{width: 38%;}

.col_wrap .v_text_box h3,
.col_wrap .v_text_box ul li{font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'MS PGothic', sans-serif; font-weight: bold;}
.col_wrap .v_text_box{border: 4px solid #e95512; background: #fffac1; padding: 60px 15px 15px; position: relative;}
.col_wrap .v_text_box .point{position: absolute; left: 0; right: 0; top: 0; text-align: center; transform: translateY(-65%);}
.col_wrap .v_text_box h3{color: #e95512; text-align: center; margin: 0; margin-bottom: 10px; font-size: 27px;}
.col_wrap .v_text_box ul{padding-left: 20px;}
.col_wrap .v_text_box ul li{line-height: 1.5; position: relative;}
.col_wrap .v_text_box ul li::before{content: "■"; display: block; position: absolute; left: -20px; top: 0;}

.col_wrap .CustomerVoice_left{width: 60%;}
.col_wrap .CustomerVoice_right{width: 38%;}
.CustomerVoice_left{display: flex; flex-wrap: wrap; justify-content: space-between;}
.CustomerVoice_left .message_box{width: 49%;}
.CustomerVoice_left .message_box a{position: relative;display: block;}
.CustomerVoice_left .message_box a:before{
		    content: '';
    display: block;
    background: url(../../../img/zoom_in_icon.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;}
.bk_cork{background: url(../../../img/pages/voice/reason_bk.jpg); padding: 15px; border-radius: 20px; box-shadow: 2px 2px 10px #959595;}

.CustomerVoice_left{position: relative;}
.CustomerVoice_left .dummy{position: absolute; top: 50%; left: 50%; background: red; color: #fff; padding: 10px; transform: translate(-50%,-50%);}

.voice_line01{margin-bottom: 130px;}
.voice_line02{margin-bottom: 130px;}
.voice_line02 .col_wrap .v_text_box{border: 4px solid #8dc21e;}
.voice_line02 .col_wrap .v_text_box p.point{background: #8dc21e;}
.voice_line02 .col_wrap .v_text_box h3{color: #8dc21e;}
.voice_line03{margin-bottom: 80px;}
.voice_line03 .col_wrap .v_text_box{border: 4px solid #4593d0;}
.voice_line03 .col_wrap .v_text_box p.point{background: #4593d0;}
.voice_line03 .col_wrap .v_text_box h3{color: #4593d0;}
.voice_line03 .h24{font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'MS PGothic', sans-serif; font-weight: bold; text-align: center; background: #4593d0; color: #fff; padding: 5px 0; border-radius: 50px; margin-top: 20px;}

.voice_line04{}
.voice_line04 .message_body{background: url(../../../img/pages/voice/message_04.png) repeat-y; padding: 10px 60px; position: relative;}
.voice_line04 .message_title{text-align: center; margin-bottom: 30px;}
.voice_line04 .message_text{font-family: vdl-pengentle, sans-serif; color: #101838; font-size: 1.25rem; line-height: 1.7; margin-bottom: 0;
 background-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #ddd 97%,
      #ddd 100%
    );
  background-size:100% 1.7em;
}
.voice_line04 .message_text span{ display: block; text-align: right;}
.voice_line04 .message_image{position: absolute; top: 140px; right: 70px;}

@media screen and (max-width: 1100px){
	.voice_line04 .message_body{background: url(../../../img/pages/voice/message_04.png) repeat-y; background-size: 100%; padding: 40px 30px 0px;}
	.voice_line04 .message_text{font-size: 1rem; letter-spacing: 0;}
	.voice_line04 .message_image{width: 27%; top: 18%; right: 6%;}
}

@media screen and (max-width: 991px){
	.col_wrap .v_text_box,
	.col_wrap .v_photo_box,
	.col_wrap .CustomerVoice_left,
	.col_wrap .CustomerVoice_right{width: 100%;}
	.col_wrap .v_text_box{margin-bottom: 30px;}
	.col_wrap .v_photo_box img{width: 100%;}
	.col_wrap .CustomerVoice_left{margin-bottom: 30px;}
	.col_wrap .CustomerVoice_right img{width: 100%;}
}

@media screen and (max-width: 640px){
	.voice_line04 .message_head img{vertical-align: bottom;}
	.voice_line04 .message_body{padding: 40px 20px 0px;}
	.voice_line04 .message_image{width: 30%; top: 5px; right: 10px;}
	.voice_line04 .message_title{padding: 0 31% 0 0; margin-bottom: 50px;}

	.CustomerVoice_left .message_box{width: 100%;}
	/*.voice_line04 .message_text{font-size: 0.9rem; line-height: 1.8;}*/
}