@charset "UTF-8";

/*----------------------------------------
 access
----------------------------------------*/

.page_title_voice{
background-image: url(../../voice/images/voice_bg01.jpg);
background-size: cover;
background-position: bottom center;
}

.voice_bg{
background-image: url(../../voice/images/voice_bg02.jpg);
background-size: 100%;
background-position: bottom center;
background-repeat: repeat-y;
}

.voice_slide{
background-color: #fff;
margin: 40px 0 0;
padding: 40px 0;
overflow: hidden;
position: relative;
}

.voice_slide .slick-list{
overflow: visible;
}

.voice_slide .slick-track{
padding: 20px 0;
}

.voice_slide .slick-slide{
padding: 0 20px;
box-sizing: border-box;
}

.voice_slide_item{
margin: 0;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
}

.voice_slide .slick-slide img{
width: auto;
height: 400px;
display: block;
}

.voice-arrow{
position:absolute;
top:50%;
width:35px;
height:35px;
padding:0;
border:none;
background-color:transparent;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
z-index:10;
cursor:pointer;
transition: opacity .3s ease;
}

.voice-arrow:hover{
opacity: 0.7!important;
}

.voice-arrow--prev{
left:50%;
transform:translate(calc(-100% - 270px), -50%);
background-image:url("../../voice/images/slide/arrow-prev.png");
}

.voice-arrow--next{
left:50%;
transform:translate(270px, -50%);
background-image:url("../../voice/images/slide/arrow-next.png");
}

.voice_slide .slick-dots{
bottom: 10px;
}

.slick-dotted.slick-slider {
margin-bottom: 0px!important;
}

.voice_slide .slick-dots li button:before{
font-size: 10px !important;
}

.voice_topic{
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.voice_topic_title{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: start;
align-items: center;
background-color:#DBE7ED;
margin-bottom: 20px;
}

.voice_topic_title p{
font-size: 2rem;
color: #36485C;
line-height: 1;
}

.voice_topic_text{
font-size: 2rem;
line-height: 1.7;
color: #36485C;
text-align: center;
}


.rank_title{
display: flex!important;
align-items: center;
width: 100%;
line-height: 0;
margin-bottom: 40px!important;
}

.rank_title::before,
.rank_title::after{
content: "";
display: block;
flex: 1;
height: 1px;
background: #6f7f8c;
}

.rank_inner{
width: 15%;
flex-shrink: 0;
margin: 0 20px;
}

.rank_inner img{
width: 100%;
display: block;
}

.rank_title::before,
.rank_title::after{
content: "";
flex: 1;
height: 10px;
background:
linear-gradient(#6f7f8c, #6f7f8c) top / 100% 1px no-repeat,
linear-gradient(#6f7f8c, #6f7f8c) bottom / 80% 1px no-repeat;
}

.rank_topic{
width: 100%;
position: relative;
margin-bottom: 40px;
}

.rank_topic h3{
color: #fff;
font-size: 3rem;
background-color: rgba(12, 28, 56, 0.8);
width: fit-content;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
}

.P_40{
padding: 40px;
}

.FS_13{
font-size: 1.3rem!important;
letter-spacing: 0;
}

.FS_15{
font-size: 1.5rem!important;
letter-spacing: 0;
}

.text_shadow{
text-shadow:
0 1px 3px rgba(0,0,0,.8),
0 0 8px rgba(0,0,0,.45);
}


/*----------------------------------------
 sp
----------------------------------------*/

@media screen and (max-width : 832px) {
.section_top_text br.sp{
display: block;
}
}

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

.voice_slide{
padding: 20px 0;
}

.voice_slide .slick-slide img{
height: 200px;
}

.voice-arrow{
width: 28px;
height: 28px;
}

.voice-arrow--next{
left: 50%;
transform: translate(130px, -50%);
}

.voice-arrow--prev{
left: 50%;
transform: translate(calc(-100% - 130px), -50%);
}

.voice_slide .slick-dots li button:before{
font-size: 8px !important;
}

.voice_slide .slick-dots li{
margin: 0;
}

.voice_slide .slick-dots{
bottom: 10px;
}

.voice_topic_text{
font-size: 1.8rem;
line-height: 1.7;
}

.rank_inner{
width: 30%;
margin: 0 20px;
}

.rank_topic h3{
font-size: 2rem;
padding: 5px;
white-space: nowrap;
}

.FS_17{
font-size: 1.7rem!important;
line-height: 1.7;
}

.FS_15{
font-size: 1.4rem!important;
}

}