@charset "utf-8";

/* bgsw
---------------------------------------------------- */
.bgTop{display:block; background:url(../img/top/bg_head.jpg) repeat center top; width:100%; background-size:cover; min-width:960px; height:768px; box-sizing:border-box; overflow:hidden; text-align:center; position: relative;}
@media screen and (max-width: 768px) {
.bgTop{display:block; background:url(../img/sp/bg_head.jpg) no-repeat center top; width:100%; background-size: cover; min-width:320px; height:auto; min-height: 275px; box-sizing:border-box; overflow:hidden; text-align:center; position: relative;}
}
.bgTop img{ width: 100%;}

/* contents
---------------------------------------------------- */
#linkBox{background-color:#99a7b9; width:99.99%; margin:0 auto;}
#linkBox .lBox{ width:33.33%; float:left;}
#linkBox .cBox{ width:33.33%; float:left;}
#linkBox .rBox{ width:33.33%; float:right;}
#linkBox img{ width:100%; }
#linkBox .txtBox h2{ font-size:20px; margin-bottom:15px; font-weight:bold;}
#linkBox .txtBox p.txt{ min-height:150px;}
#linkBox .txtBox p.more{ margin-bottom:0; padding-bottom:0;}
@media screen and (max-width: 768px) {
#linkBox{background-color:#ffffff; padding: 20px 0 0; width:100%;}
#linkBox .lBox{ width:100%; float:none; padding-bottom: 20px;}
#linkBox .cBox{ width:100%; float:none; padding-bottom: 20px;}
#linkBox .rBox{ width:100%; float:none; padding-bottom: 20px;}
#linkBox img{ width:100%; }
#linkBox .txtBox h2{ font-size:20px; margin-bottom:15px; font-weight:bold;}
#linkBox .txtBox p.txt{ min-height:150px;}
#linkBox .txtBox p.more{ margin-bottom:0; padding-bottom:0;}
}

#newsBox { width:960px; margin:60px auto 40px;  color:#231815;}
#newsBox .lBox { width:600px; float:left;}
#newsBox .lBox h2{margin-bottom:18px; display: inline-block; float: left;}
#newsBox .btnMore{ display: inline-block; float: right;}
#newsBox .lBox ul{ clear: both; border-top: 1px solid #eee; }
#newsBox .lBox ul li{ clear: both; border-bottom: 1px solid #eee; padding: 20px 0;}
#newsBox .lBox dt{ width:150px; float:left; box-sizing: border-box; padding: 0 30px 0 30px; clear:both; font-weight: bold;}
#newsBox .lBox dd{ width:450px; float:left; }
#newsBox .btnMoreSP{ display: none;}
#newsBox .rBox { width:230px; margin-top: 30px; float:right;}
#newsBox .rBox iframe { width:100%!important;}
@media screen and (max-width: 768px) {
#newsBox { width:100%; min-width: 320px; margin:60px auto 40px; color:#231815; }
#newsBox .lBox { width:100%; float:none; padding: 0 10px; box-sizing: border-box; }
#newsBox .lBox h2{margin-bottom:18px; display: inline-block; float:none; }
#newsBox .btnMore{ display: none; }
#newsBox .lBox ul{ clear: both; border-top: 1px solid #eee; }
#newsBox .lBox ul li{ clear: both; border-bottom: 1px solid #eee; padding: 20px 0; }
#newsBox .lBox dt{ width:100%; float:none; box-sizing: border-box; padding: 0 5px; clear:both; }
#newsBox .lBox dd{ width:100%; float:none; }
#newsBox .btnMoreSP{ padding: 10px; border: 1px solid #000; box-sizing: border-box;border-radius: 5px; width: 100%; margin-top: 20px; display: block; text-align: center; }
#newsBox .btnMoreSP a{ display: block; }

#newsBox .rBox { width:230px; margin:30px auto 0; float:none; padding: 0 10px; box-sizing: border-box; }
#newsBox .rBox iframe { width:100%!important;}
}

#bannerBox{ width: 822px; margin: 50px auto;}
#bannerBox ul{ display: table;}
#bannerBox ul li{ width: 250px; padding: 0 12px; display: table-cell; box-sizing: border-box;}
@media screen and (max-width: 768px) {
#bannerBox{ width: 100%; min-width: 320px; margin: 50px auto;}
#bannerBox ul{ display: block;}
#bannerBox ul li{ width: 100%; min-width: 300px; padding: 10px; display: block; box-sizing: border-box;}
#bannerBox ul li img{ width: 100%; height: auto;}
}