@charset "utf-8";

.vo_box{
	max-width: 1200px;
	margin:20px auto;
	padding:0 5px
}

.vo_img1{
	width:100%;
	background:#eee;
	text-align:center;
}
.vo_img1 img{
    /*max-width:900px;*/
}

.vo_text1{
	max-width:900px;
	margin:20px auto;
}
.vo_text1 h3{
	display:block;
	background:none;
	padding:0;
	color:#f8b;
	font-size:135%;
	margin:0 auto;
	width:fit-content;

}
.vo_text1 h5{
	display:block;
	background:none;
	padding:0;
	margin:5px auto 20px;
	color:#f8b;
	font-weight:normal;
	font-size:100%;
	width:fit-content;
	letter-spacing:2px;
}
.vo_text1 p{
	max-width:500px;
	margin:0 auto;
    font-size:90%
}
.vo_gallery{
	display:flex;
	flex-wrap:wrap;
	max-width: 800px;
	margin:0 auto 70px;
}
.vo_gallery p img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.vo_iw{width:100%}
.vo_iw100{width:100%}
.vo_iw50{width:50%}
.vo_iw65{width:65%}
.vo_iw35{width:35%}
.vo_iw50,.vo_iw65,.vo_iw35{
	height:38vw;
    max-height:260px;
    position:relative;
}
.vo_gallery .zoom{
	position:absolute;
	display:block;
	top:0;
	right:0;
}
.vo_gallery .zoom img{
	vertical-align:top;
	max-width:calc(16px + 0.6vw);
} 

.vo_hoka h5{
	text-align:center;
	color:#f8b;
	margin:20px 0 0;
}

/*html入力部分用 topics.cssと共通が多いが、調整が必要かもしれないのでファイルは分けている*/

.voice_titlebox{
	border:1px solid #000;
	width:80%;
	max-width:600px;
	position:relative;
	background:#fff;
	padding:2vw 4vw;
	margin: 50px 0 -45px 0;
}
.voice_titlebox h3{
	font-size:calc(20px + 0.7vw);
	color:#000;
	background:none;
	margin:10px 0 0 0;
	padding:0;
}
.voice_titlebox h5{
	font-size: calc(12px + 0.4vw);
	color:#000;
	padding:0;
}
.voice_titlebox h5::before{
	content:"―――";
}

.date{
	font-size:95%;
	margin:0 0 30px 20px;
	letter-spacing:5px;
	font-weight:bold;
	color:#777;
}
.imgbiggest, .imgbig, .imgright, .imgleft, .imgdouble{
	margin-bottom:10px;
} 

.text{
	margin-top:0;
	margin-bottom:1.5em;
}
.textlr div:nth-child(odd){
	float:left;
	width:47%;
	margin-right:3%:
}
.textlr div:nth-child(even){
	float:left;
	width:47%;
	margin-left:3%;
}
.imgindexonly{
	display:none;
}

.imgbiggest{
	width: 84%;
	margin-left: 8%;
	padding:5px;
	border-radius:30px;
}
.imgbiggest img{
	width:auto;
	height:auto;
	max-width:100%;
	display:block;
	margin:0 auto;
}
.imgbig{
	width:100%;
	/* background-color:#eee; */
	padding:30px;
	border-radius:30px;
}
.imgbig img{
	width:auto;
	height:auto;
	max-width:600px;
	display:block;
	margin:0 auto;
}
.imgleft, imgright{
	width:100%;
	float:none;
}
.imgleft img{
	width:48%;
	float:left;
	margin:0 2% 0 0;
}
.imgleft div.text{
	width:48%;
	float:right;
	margin-left:2%;
	margin-bottom:0;	
}
.imgright img{
	width:48%;
	float:right;
	margin:0 0 0 2%;
}
.imgright div.text{
	width:48%;
	float:left;
	margin-right:2%;
	margin-bottom:0;	
}

.imgleft:after, .imgright:after, .imgdouble:after, .textlr:after{
	content:" ";
	display:block;
	clear:both;
}
.imgdouble img{
	width:49%;
	float:left;
	margin-right:2%;
	margin-bottom:10px;
}
.imgdouble img:nth-child(2n){
	margin-right:0;
}

.sub_a{
	font-size:180%;
	font-weight:bold;
	color:#f8b;
	letter-spacing:3px;
	margin-bottom:10px;
}
.sub_b{
	font-size:130%;
	background-color:#eee;
	padding:2px 8px 0;
	margin-bottom:15px;
	border-radius:5px
}
.vo_box div.text{
	line-height:1.8;
}

/*お客様インタビューで画像高さ制限*/
.vo_box .imgright p,
.vo_box .imgleft p{
	width:48%;
	text-align:center;
}
.vo_box .imgleft p{
	float:left;
	text-align:right;
}
.vo_box .imgright p{
	float:right;
	text-align:left;
}
.vo_box .imgright p img,
.vo_box .imgleft p img{
	float:none;
	max-height: 700px;
	width:auto;
}



@media(max-width:600px){
	.voice_titlebox{
		width:100%;
		max-width:600px;
		position:relative;
		background:#fff;
		padding: 2vw 4vw;
		margin:10px auto;
		/* border:none; */
	}
	.imgbiggest{
		width:100%;
		margin-left:0;
	}
	.textlr div:nth-child(odd){
		width:100%;
		margin-right:0:
	}
	.textlr div:nth-child(even){
		width:100%;
		margin-left:0;
	}
	.vo_box .imgright p img, .vo_box .imgleft p img{
		width:100%;
		margin:0 0 3vw 0;
	}
	.imgleft div.text,
	.imgright div.text,
	.vo_box .imgright p,
	.vo_box .imgleft p
	{
		width:100%;
		margin-left:0;
		margin-bottom:0;	
	}
	.imgright img,.imgleft img{
		width:100%;
		margin: 0 0 3vw 0;
	}
	
	.imgdouble img{
		width:100%;
		margin-right:0;
		margin-bottom:10px;
	}
	
}