@charset "utf-8";

/* style */
/* -------------------------------------------------------- */
.voice-head {width:100%; height:876px; background:url(../img/voice/img_01.jpg) no-repeat center center; background-size:cover; position:relative;}
.voice-head .ttl {width:100%; text-align:center; position:absolute; bottom:-110px; left:0;}
.voice-head .ttl img {max-width:900px; width:100%;}
.voice-ranking {padding:240px 0 110px 0; background:-webkit-linear-gradient(left, #f7faf6, #f0f4f0); background:linear-gradient(to right, #f7faf6, #f0f4f0);}
.voice-ranking .clm > div {margin:130px 0 0 0;}
.voice-ranking .clm > div:first-of-type {margin-top:0;}
.voice-ranking .clm > div:nth-of-type(even) .ctx {order:2;}
.voice-ranking .clm > div:nth-of-type(even) .img {order:1;}
.voice-ranking .clm > div:nth-of-type(1) .list,
.voice-ranking .clm > div:nth-of-type(2) .list {margin-top:1.5em;}
.voice-ranking .clm > div:nth-of-type(1) .list .bg,
.voice-ranking .clm > div:nth-of-type(2) .list .bg {top:0;}
.voice-ranking .box {display:flex; justify-content:space-between;}
.voice-ranking .box .ctx {width:59%; padding:0 2%; box-sizing:border-box;}
.voice-ranking .box .img {width:38.2%;}
.voice-ranking .box .ttl {max-width:84.6%; text-align:left;}
.voice-ranking .box .list {font-size:2.5rem; text-align:left; margin:-1.5em 0 0 0; padding:0 0 0 35%; position:relative;}
.voice-ranking .box .list li {font-size:2.5rem; line-height:1.8; margin:0.4em 0 0 0; padding:0 0 0 24px; position:relative;}
.voice-ranking .box .list li:first-of-type {margin-top:0;}
.voice-ranking .box .list li::before {content:''; width:12px; height:12px; background-color:#3e4347; border-radius:100%; display:block; position:absolute; top:0.7em; left:0;}
.voice-ranking .box .list li span {text-decoration:none; background:linear-gradient(#ffec3c, #ffec3c) 0 100%/100% 0.6em no-repeat;}
.voice-ranking .box .list .bg {width:27%; position:absolute; top:2.5em; left:0;}

@media screen and (max-width:1194px){
	.voice-head .ttl {bottom:-9.2vw;}
}
@media screen and (max-width:767px){
	.voice-head {height:422px;}
	.voice-head .ttl {bottom:-40.0vw;}
	.voice-head .ttl img {max-width:87.0vw;}
	.voice-ranking {padding:40.0vw 0 100px 0;}
	.voice-ranking .clm > div {margin:120px 0 0 0;}
	.voice-ranking .clm > div:first-of-type {margin-top:100px;}
	.voice-ranking .clm > div:nth-of-type(1) .list,
	.voice-ranking .clm > div:nth-of-type(2) .list {margin-top:1.5em;}
	.voice-ranking .clm > div:nth-of-type(1) .list .bg,
	.voice-ranking .clm > div:nth-of-type(2) .list .bg {top:0;}
	.voice-ranking .box {display:block;}
	.voice-ranking .box .ctx {width:auto; padding:0;}
	.voice-ranking .box .img {width:auto; margin:40px 6.0vw 0 6.0vw;}
	.voice-ranking .box .ttl {max-width:100%;}
	.voice-ranking .box .list {font-size:1.6rem; margin:1.5em 0 0 0; padding:0 0 0 25.0vw;}
	.voice-ranking .box .list li {font-size:1.6rem; padding:0 0 0 14px;}
	.voice-ranking .box .list li::before {width:8px; height:8px; top:0.6em;}
	.voice-ranking .box .list .bg {width:24.0vw; top:0; left:-0.2em;}
}