@charset "UTF-8";

ul.box_letter{
display:table !important;
table-layout:fixed !important;
width:100% !important;
height:auto !important;
margin:0px auto 10px !important;
border-collapse:separate !important;
border-spacing:10px 0 !important;
float:left !important;
line-height:1.4 !important;
overflow:hidden;
clear:both;
color:#666;
text-shadow:none !important;
}

ul.box_letter li{
display:table-cell !important;
vertical-align:top !important;
	border:none !important;
	border-radius:10px;
	padding:2% !important;
	background:#FFF;
font-size:90% !important;
overflow:hidden;
}

.box_letter li a img{border:none !important;}

.box_letter .p_l,
.box_letter .p_r{
display: inline !important;
text-align:left !important;
font-weight:normal !important;
margin:0 !important;
overflow:hidden !important;
}

.box_letter .p_l{
	float:left !important;
	width:48% !important;
	margin-right:2% !important;
}

.box_letter .p_l img{
	display:block;
	max-width:95% !important;
	margin:0 auto 1em;
border-radius:5px !important;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) !important;	
}


.box_letter .p_r{
	float:right !important;
	width:50% !important;
	padding:0 !important;
	line-height: 2.2 !important;
font-size:95% !important;
font-family:Pixel;
}

.rate_ttl {
	color: #e15f00 !important;
	margin: 0 0 0.5em !important;
	line-height: 1.2 !important;
}

.mt1em{margin-top:1em !important;}

.rate_sub{
font-size:95% !important;
color: #666 !important;
}

.box_letter hr{
height: 1px !important;
background-color:#b49531 !important;
border:none !important;
clear:both;
}


.star-rating{
    color: transparent !important;
    background-image: linear-gradient(orange, orange), linear-gradient(gray, gray) !important;
    background-position: left, right !important;
    background-repeat: no-repeat !important;
    background-size: var(--rate) 100%, calc(100% - var(--rate)) 100% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
	margin: 0 !important;
	line-height: 2.2 !important;
	float:right;
}
.star-rating:before{
    content: "★★★★★" !important;
}

.star-rating span{
	color: #0CF !important;
	font-weight:bold !important;
	padding-left:0.5em !important;
}

@media only screen and (max-width:640px){

ul.box_letter{
display:table !important;
table-layout: fixed !important;
margin:0px auto 0 !important;
}



ul.box_letter li{
display:block !important;
clear:both;
margin-bottom:1em;
}

}

/* ------------お客様の口コミ・評判-------------- */

.letter_Box_wrap{margin:0 0 30px;}

.voice_img{
width:40%;
height:auto;
margin:0 0 0 .25em;
padding:1%;
background:#ebe6bf;
border:1px solid #666;
border-radius:5px;
position:relative;
box-shadow:
0 0 0 3px #ccc,
1px 3px 1px rgba(34, 25, 25, 0.6);
-moz-box-shadow:2px 2px 2px rgba(34, 25, 25, 0.6);
-webkit-box-shadow:2px 2px 15px rgba(34, 25, 25, 0.6);
clear:both;
}

.voice_img img{ 
width:100%;
height:auto;
border-radius:5px;
}

.voice_box,
.voice_box_link{
width:94%;
height:auto;
background:#fff;
margin:0 auto 2em;
padding:.75em .6em;
text-align:left;
line-height:1.4;
font-family:Pixel;
background:#f3f2ea;
box-shadow :
0 0 0 3px #b49531,
0 0 0 6px #d1b458,
0 0 0 9px #e7d085;
border-radius:5px;
clear:both;
overflow:hidden;
}

.voice_box_link{
width:100%;
margin:0 auto 2em;
padding:0;
font-size:110%;
font-weight:bold;
}

.voice_box_link a{
	display:block;
	padding:0.75em 1em;
}

.voice_box_link a:hover{
opacity:0.8;
filter:alpha(opacity=80);
text-decoration:none;
}

.voice_box_link img {
	width:20vw;
	max-width:150px;
	height:auto;
	background:#fff;
	padding:3px;
	float:left;
	margin:0 0.75em 0.5em 0;
	object-fit: cover;
}

.voice_box_link span{
	display:block;
	margin:0.75em 0 0.5em;
	text-align:justify;
	font-size:90%;
	font-weight:normal;
}