@charset "UTF-8";
/* CSS Document */
body{/*background:#b8ecfa;*/}
#wrapper{width: 100%; height: 100%;}
.content{margin: 0 auto; width: 980px;}
.opacity:hover{opacity:0.8;}
.clear{clear:both;}
.clearFix{overflow:hidden;}
.clearFix:after{display:block; clear:both; height:0; visibility:hidden; content:"."; zoom:1;}  

/*HEADER
====================================*/
header{position:relative;}
header.showMenu:after{background:#fff; width:100%; content:''; height:40px; display:block; position:absolute; top:100%; left:0; right:0; z-index:0;}
#headCont{max-width:1320px; margin:0 auto; padding:0 10px; box-sizing:border-box;}
h1{float:left; padding:28px 0 0 0;}

#headRight{float:right; padding:15px 0 0 0;}
#headBtn{float:left; padding:2px 0 0 0;}
#headBtn a{display:block; float:left; font-size:13px; line-height:1.4; color:#fff; border-radius:10px;}

#headBtn a:nth-of-type(1){background-image:linear-gradient(#3074b9, #02284f); margin:0 10px 0 0; padding:4px 18px;}
#headBtn a:nth-of-type(1).active, #headBtn a:nth-of-type(1):hover{background:#3074b9;}
#headBtn a:nth-of-type(2){background-image:linear-gradient(#f57878, #ee2323); margin:0 10px 0 0; padding:4px 18px;}
#headBtn a:nth-of-type(2).active, #headBtn a:nth-of-type(2):hover{background:#ee2323;}
#headBtn a:nth-of-type(3){background-image:linear-gradient(#ffaa72, #ff6906); margin:0 25px 0 0; padding:4px 10px;}
#headBtn a:nth-of-type(3):hover{background:#ff6906;}
#headNav{float:left; padding:6px 0 0 0;}
#headNav a{color:#333333; font-size:10px; float:left; margin:0 15px 0 0;}
#headNav a:before{content:''; border:solid #333; border-width:0 1px 1px 0; display:inline-block; padding:2px; vertical-align:middle; line-height:1; margin:0 5px 2px 0;
transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
#headNav a.active, #headNav a:hover{opacity:0.7;}
#headSns{float:left;}
#headSns a{width:29px; display:block; float:left; margin:0 0 0 10px;}
#headSns a:hover{opacity:0.8;}
#headSns img{width:100%;}

#btnSp{float:right; width:45.6875%; display:none;}
#btnSp a{width:25%; float:left;}
#btnSp a:nth-child(1){
    opacity: 0;
    pointer-events: none;
}

#headCont:after, headRight:after{display:block; clear:both; height:0; visibility:hidden; content:"."; zoom:1;}

/* NAVIGATION */
#gnav{clear:both; position:relative; font-size:0;}
#gnav ul{text-align:left; position:relative; max-width:774px; float:right;}
#gnav li{display:inline-block; border-bottom:4px solid rgba(255,192,0,0);}
#gnav li.active, #gnav li:hover{border-bottom:4px solid rgba(255,192,0,1);}
#gnav a{padding:2px 18px 9px; font-size:12px; color:#333; display:block;}
#gnav li ul{position:absolute; top:100%; width:100%; left:0; right:0; text-align:left; display:none; z-index:10;}
#gnav li li{padding:14px 0;}
#gnav li li a{padding:0 17px 0 20px; display:inline-block; border-left:2px solid #bfbfbf; line-height:1; font-size:12px;}
#gnav li li a:hover{opacity:0.7;}
#gnav li li:last-of-type a{border-right:2px solid #bfbfbf;}
#gnav li li, #gnav li li:hover{border:none;}
#gnav li.navSp{display:none;}
#gnav li.on a{opacity:0.7;}

/* CONTENT NAVI */
.content_nav{background:url(../images/bg_nav.png) repeat-x; margin:0 0 30px;}
.content_nav ul li{background:#f4f4f4 url(../img/bg_li.png) right center no-repeat; float:left; position: relative;}
.content_nav ul li a{color:#43b5eb; display:block; text-align:center; font-size:14px; padding:13px 0;}
.content_nav ul li a:hover{background:#43b5eb; color:#fff;}
.content_nav ul li.last{background:#f4f4f4;}
.content_nav ul li.active{background:#43b5eb; color:#fff; text-align:center; font-size:14px; padding:13px 0;}
.content_nav ul li.active span{display: block;}
.content_nav ul li span{display:none; position: absolute; left: 0; top:100%; width:100%; text-align:center;}
.content_nav ul li:hover span{display:block;}

/*MAIN CONTENT
====================================*/
#main_content{background:#fff9dc; padding-bottom: 85px; width: 100%;padding-top:10px;}
.main{width: 100%;}
.content01{background:#fff; padding-bottom: 35px;}
.content01 h2{background:#e8f8ff; margin-bottom: 30px; padding: 37px; position: relative;}
.content01 .h2_img{position: absolute; right: 66px; top: 13px;}
.content01 h3{background:#666 url(../img/h3_bg.jpg) no-repeat right top; margin-bottom: 30px; padding: 1px 10px ;color:#fff; font-size:20px; line-height: 1.4;}
.content01 h4{background:url(../img/h4_bg.gif) repeat-x 0 0; font-size:16px; padding: 3px 5px 5px;}
.content01 h4 img{vertical-align: middle; margin-right: 12px;}
/*******/
.content_main{padding:0 39px;}


/* BREAKCRUMB */
#breadcrumb{font-size: 11px; padding: 5px 15px 5px 0; text-align: right;}
#breadcrumb a{color:#008ccf; text-decoration: underline;}
#breadcrumb a:hover{text-decoration: none;}

/* PAGETOP */
#pagetop{position: absolute; right: 0px; top: -57px; text-align: center;  }
#pagetop a{   display: block;}
#pagetop a:hover{ opacity:0.8;}

/*FOOTER
===================================*/
#footer{background: #40b7eb; padding: 20px 0 10px; border-bottom: 10px solid #ffec18; position: relative;}

footer{background:#f7f7f7; position:relative;}
#footTop{max-width:1320px; margin:0 auto; padding:25px 10px 22px; box-sizing:border-box; position:relative;}
#footTop:after{display:block; clear:both; height:0; visibility:hidden; content:"."; zoom:1;}
#fLogo, #fBtn{display:inline-block; vertical-align:bottom;}
#fLogo{margin:0 25px 0 0; font-size:12px; color:#727072; letter-spacing:0.03em;}
#fLogo p{padding:5px 0 0 0;}

#fBtn{width:230px; height:42px; font-size:18px; line-height:42px; border-radius:21px; margin:0 0 3px;
background-image:linear-gradient(#ffb482, #ff6906); color:#fff; text-align:center;}
#fBtn span{font-size:15px;}
#fBtn:hover{background:#ff6906;}
#fBtn:before{content:''; background:url(../img/ic_map.png) no-repeat; width:14px; height:20px; display:inline-block; margin:0 10px 0 0; vertical-align:text-top;}

#fBtn2{width:230px; height:42px; font-size:18px; line-height:42px; border-radius:21px; margin:0 0 3px;margin-left: 20px;
background-image:linear-gradient(#679de5, #205cae); color:#fff; text-align:center;display: inline-block;}
#fBtn2 span{font-size:15px;}
#fBtn2:hover{background:#205cae;}

#fSns{position:absolute; bottom:25px; right:35px;}
#fSns a{margin:0 15px 0 0; background-repeat:no-repeat; background-position:top center; padding:36px 0 0 0; font-size:10px; line-height:1; display:inline-block;}
#fSns a:nth-of-type(1){background-image:url(../img/icon_face.png); color:#3b579d;}
#fSns a:nth-of-type(2){background-image:url(../img/icon_twi.png); color:#1da1f2;}
#fSns a:nth-of-type(3){background-image:url(../img/icon_you.png); color:#ff0000;}
#fSns a:nth-of-type(4){background-image:url(../img/icon_ins.png); color:#cf0073; margin:0;}
#fSns a:hover{opacity:0.8;}

#copyright{background:#1e7db4; color:#fff; font-size:11px; line-height:1.5;}
#copyright p{max-width:1320px; margin:0 auto; padding:9px 10px 6px; box-sizing:border-box;}

/*MEDIA
===================================*/
@media screen and (min-width:0\0) and (min-width:1000px){ 
#headBtn a:nth-of-type(1){padding:5px 18px 3px;}
#headBtn a:nth-of-type(2){padding:5px 10px 3px;}
}

@media screen and (max-width:1200px) {
h1{width:32%; padding:10px 0;}
h1 img{max-width:100%;}

#headBtn a:nth-of-type(1){padding:4px 10px; margin:0 5px 0 0;}
#headBtn a:nth-of-type(2){margin:0 10px 0 0;}
#headNav a{margin:0 10px 0 0;}
#headSns a{margin:0 0 0 3px;}
}

@media screen and (max-width:980px) {
img{max-width:100%;}
.content{width:98%;padding:0;box-sizing:border-box;margin:0 auto;}	

h1{float:none; width:320px; margin:0 auto; clear:both; text-align:center;}
#headRight{padding:5px 0 0 0;}

#main_content{background-size:100% auto;}
.content_main{padding:0 3.9%;}
.content01 h4{background-size:100% 100%;}

#pagetop a:hover{border-radius:3px;}

#fLogo{width:36%; font-size:1.17vw; margin:0 10px 0 0;}
#fBtn{width:200px; font-size:16px; height:38px; line-height:38px;}
#fBtn:before{background-size:12px auto; width:12px; height:17px; margin:0 5px 0 0;}
#fBtn span{font-size:13px;}
#fBtn2{width:200px; font-size:16px; height:38px; line-height:38px;}
#fBtn2:before{background-size:12px auto; width:12px; height:17px; margin:0 5px 0 0;}
#fBtn2 span{font-size:13px;}
#fSns a{margin:0 5px 0 0; background-size:28px auto; font-size:9px; padding:31px 0 0 0;}
}

@media screen and (max-width:800px) {
#gnav a{padding:2px 1em 9px; font-size:1.68vw;}
#gnav li li a{padding:0 1em; font-size:1.68vw;}
}

@media screen and (max-width:767px) {
#gnav a{padding:2px 1em 7px; font-size:1.66vw;}
#gnav li li a{font-size:1.66vw;}

#fLogo{width:37%;}
#fBtn{width:170px;}
}

@media screen and (max-width:640px) {
#main_content{padding-bottom:100px;}
.content01 .h2_img{right:22px;}
.content01 h2 img{width:70%;}

#headCont{padding:0;}
h1{width:50%; margin:0; float:left; padding:0; margin:3% 0 0 10px;}
#headRight{display:none;}
#btnSp{display:block;}
#gnav{display:none;}
#gnav ul{width:100%; float:none; text-align:center;}
#gnav li{width:100%; display:block; border-bottom:1px solid #ffc000 !important; position:relative;}
#gnav li.parent a:after{position:absolute; top:0.75em; right:20px; content:'';
border:solid #333; border-width:0 1px 1px 0; display:inline-block; padding:5px; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
#gnav li.parent.open a:after{top:1.1em; transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
#gnav li.active, #gnav li:hover{border:none;}
#gnav li.active a{color:#000; background:#ffc000;}
#gnav a{font-size:4vw; background:#ffec18; padding:0.7em 0;}
#gnav li ul{position:static; text-align:center;}
#gnav li li{padding:0; border-bottom:none !important; border-top:1px solid #ffc000 !important;}
#gnav li li a{display:block; padding:0.7em 0; font-size:4vw; border:0 !important; background:#fbf079 !important; color:#333 !important;}
#gnav li.parent li a:after{display:none;}
#gnav li.navSp{display:block;}

#fLogo{max-width:460px; margin:0 auto 15px; width:100%; display:block; font-size:15px;}
#fBtn{width:230px; display:block; margin:0 auto 15px;}
#fBtn2{width:230px; display:block; margin:0 auto 15px;}
#fSns{position:static; text-align:center;}
#copyright p{text-align:center;}
#pagetop{width:100px;right:50%;top:-46px;margin-right:-50px;}
#pagetop a{background-size:100% 100%; }
}

@media screen and (max-width:480px) {
#main_content{padding-bottom:50px;}

#fLogo{font-size:3.1vw;}
}