@charset "UTF-8";

/* Intro Block ------------------*/
.introBlc{
position:relative;
padding:6% 4% 20%;
}

.introBlc .mainImg{
background:url(../img/top/main_img01.jpg) scroll no-repeat center center / cover;
left:0;
position:absolute;
top:0;
width:100%;
height:100%;
z-index:-1;
}

.introBlc .mainImg img{
width:100%;
display:none;
}

.introBlc .txtBlc{
background-color:rgba(255,255,255,0.75);
max-width:560px;
margin:0 auto;
}

.introBlc .txtBlc .inner{
padding:20% 10%;
}

.introBlc .txtBlc .txt{
font-size:110%;
line-height:2em;
letter-spacing:1px;
margin:40px 0 0;
}

/* News Block ------------------*/
.newsBlc{
background-color:#eaeaea;
padding:85px 4% 45px;
}

.newsBlc .ttl{
color:#191818;
text-align:center;
padding:0 0 22px;
margin:0 0 30px;
position:relative;
}

.newsBlc .ttl:after{
background-color:#000;
content:"";
width:120px;
height:1px;
margin:0 auto;
position:absolute;
bottom:0;
left:0;
right:0;
}

.newsBlc .newsBox{
background-color:#fff;
max-width:560px;
margin:0 auto;
}

.newsBlc .newsBox .inner{
padding:10%;
min-height:170px;
}

.newsList{
margin:0 0 10px;
}

.newsList dt{
width:22%;
float:left;
clear:left;
}

.newsList dd{
width:73%;
padding-left:27%;
}

/* User Voice Block ------------------*/
.userVoiceBlc{
padding:40px 0 50px;
}

.userVoiceBlc .ttl{
font-size:180%;
color:#191818;
text-align:center;
padding:0 0 22px;
margin:0 0 30px;
position:relative;
}

.userVoiceBlc .ttl:after{
background-color:#000;
content:"";
width:160px;
height:1px;
margin:0 auto;
position:absolute;
bottom:0;
left:0;
right:0;
}

.userVoiceBlc .list li{
padding:0 0 20px;
margin:0 0 20px;
position:relative;
}

.userVoiceBlc .list .imgUser{
width:12%;
margin:0 2% 0 0;
float:left;
}

.userVoiceBlc .list .imgUser img{
border:1px solid #efefef;
}

.userVoiceBlc .list .txt{
width:86%;
float:left;
}

.userVoiceBlc .list .txt:after{
background:url(../img/common/dot_line.png) scroll repeat-x left center;
content:"";
width:85%;
height:3px;
margin:0 auto;
position:absolute;
bottom:0;
left:0;
right:0;
}

.userVoiceBlc .list li:last-child .txt:after{
display:none;
}

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

}

@media screen and (max-width: 768px) {
/* Intro Block ------------------*/
.introBlc{
padding:6% 4% 0;
}

.introBlc .mainImg{
background:none;
height:auto;
}

.introBlc .mainImg img{
display:block;
}

.introBlc .txtBlc{
margin:60% auto 0;
}

.introBlc .txtBlc .txt{
font-size:90%;
}

/* News Block ------------------*/
.newsList dt{
width:100%;
float:none;
margin:0 0 5px;
}

.newsList dd{
width:100%;
padding-left:0;
}
}

@media screen and (max-width: 480px) {
/* Intro Block ------------------*/
.introBlc .txtBlc .inner{
padding:20% 2%;
}

/* User Voice Block ------------------*/
.userVoiceBlc .list .imgUser{
width:100%;
margin:0 0 4%;
float:none;
}

.userVoiceBlc .list .txt{
width:100%;
float:none;
}
}