@charset "UTF-8";

/*HEADER
====================================*/
#header{width:280px; position:fixed; background-color:rgba(255,255,255,0.86); height:100%; z-index:9999; text-align:center;}
#header_inner{padding:20px 20px 0;}
#logo{margin-bottom:10px;}
h1{margin-bottom:20px;}

#gnav{margin-bottom:15px;}
#gnav ul,#spnav ul{
	border-top:1px solid #bbbbbc;
	width: 82%;
        margin: 0 auto;
}
#gnav li,#spnav ul{
	/*margin-bottom:40px; */
	position:relative;
	text-align:left;
	line-height:45px;
	border-bottom:1px solid #bbbbbc;
	color:#000000;
	font-weight:bold;
}
#gnav a{
color:#362318;

    display: inline-block;
    width: 100%;

}

#gnav a img{
    float: right;
    display: inline-block;
    padding-top: 15px;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}
#gnav span,#spnav span{width:24px; height:2px; background:#000; transition: width 1s; display:block;}
#gnav span.li1,#spnav span.li1{margin:10px auto 30px;}
#gnav span.li2,#spnav span.li2{margin:15px auto 25px;}
#gnav span.li3,#spnav span.li3{margin:20px auto 20px;}
#gnav li:hover span{width:100%}

#social{width: 111px; margin: 10px auto;}
#social a{/*padding:0 20px;*/ float:left; line-height:100%;}
#social a.line{
/*border-right:1px solid #000;*/
display: inline-block;
}

.leftBox1{
margin-bottom: 20px;
}

.lb02{
padding-right: 15px;
padding-top: 8px;
}


#banner_inner .bxslider li{
position:relatve;
}

.posi_1{
display:none;
}
.posi_2{
width:auto;
/*
position: absolute;
    left: 30%;
    top: 3%;
*/
    padding-left: 240px;
    text-align: center;
    padding-top: 60px;
}
.posi_3{
width: auto;
/*
    position: absolute;
    left: 38%;
    top: 19%;
*/
    padding-left: 240px;
    text-align: center;
    padding-top: 20px;
}
.posi_4{
width:auto;
/*
    position: absolute;
    left: 35%;
    top: 65%;
*/
/*    padding-left: 240px;*/
    text-align: center;
    padding-top: 20px;
}

.po_inner{
    width: 100%;
    position: relative;
}

.check_1{
    display: inline-block;
/*
    width: auto;
    position: absolute;
    top: 190px;
    height: auto;
    left: 65px;
*/
}

.check_2{
    display: inline-block;
/*
    width: auto;
    position: absolute;
    top: 190px;
    height: auto;
    right: 65px;
*/
}





#spnav{display:none;}

/*MAIN CONTENT
====================================*/
#container{position:relative; /*margin-left:280px;*/ background:#fff;}
h2{background:#000; color:#fff; font-size:24px; padding:5px; font-weight:bold; text-align:center; letter-spacing: 8px;}
h3{padding:60px 0 25px;}
span.block{display:block;}
span.block2{display:inline-block;}
.note{color:#00a0e9; text-decoration:underline;}

/*FOOTER
===================================*/
#footer{padding: 30px 20px 60px; text-align: center; font-size: 12px; position: relative; border-top: 1px solid #bbbbbc; margin: 0 25px;}
#pagetop{position:absolute; bottom:80px; left:-200px; z-index:99999;}
#copyright{font-family:Arial; font-weight:bold;}
#footer a{text-decoration:underline; margin-left:30px;}
#footer a:hover{opacity:0.8;}
#footlink{margin-bottom:10px;}
#footlink a, #footlink span{display:inline-block; margin:0 !important;}
/*===============================
             MEDIA
================================*/
@media only screen and (max-width:1300px){
#header{width:240px;}
#header_inner{padding:20px 10px 0;}	
#logo{margin-bottom:10px;}
#gnav{margin-bottom:15px;}

#container{/*margin-left:240px;*/}
}
@media screen and (min-width:1301px) {
    #interview,#intention, .flac, #footer, .slide3 .mainbox {margin-left:280px;}
    #q1, #q2, #q3, #q4, #q5, #soudan, #result {padding-left:280px;}
}
@media screen and (min-width:961px) and (max-width:1300px) {
    #interview,#intention, .flac, #footer, .slide3 .mainbox {margin-left:240px;}
    #q1, #q2, #q3, #q4, #q5, #soudan, #result {padding-left:240px;}
}
@media screen and (min-width:737px) and (max-width:960px) {
    #interview,#intention, .flac, #footer, .slide3 .mainbox {margin-left:210px;}
    #q1, #q2, #q3, #q4, #q5, #soudan, #result {padding-left:210px;}
}
@media only screen and (max-width:960px){
#header{width:210px;}	

#container{/*margin-left:210px;*/}
h3{padding:40px 0 25px;}

#footer{padding:30px 20px;}
#pagetop{bottom:50px;}
}
@media only screen and (min-width:737px) {
    .posi_2{
width:auto;
/*
position: absolute;
    left: 30%;
    top: 3%;
*/
    padding-left: 240px;
    text-align: center;
    padding-top: 60px;
}
.posi_3{
width: auto;
/*
    position: absolute;
    left: 38%;
    top: 19%;
*/
    padding-left: 240px;
    text-align: center;
    padding-top: 20px;
}
.posi_4{
width:auto;
/*
    position: absolute;
    left: 35%;
    top: 65%;
*/
/*    padding-left: 240px;*/
    text-align: center;
    padding-top: 20px;
}

}
@media only screen and (max-width:736px){
#header{width:100%; height:auto; background:#fff;}
#header_inner{padding:20px;}
#logo{margin:0; width:240px;}
h1{float:left; margin-right:20px;}
#logo_child{float:left;}

#social{float:right;}
#social a.line{padding-left:0; /*padding-right:20px;*/}
#social a{padding-right:0;}

    #social {
width: 122px !important;
margin-top:0;
	}

#btn_menu{float:right; width:28px; height:28px; cursor:pointer; background-repeat:no-repeat; margin-top: 7px;background-size: 100% auto;}
#btn_menu.open{background-image:url(../../images/btn_menu.png);}
#btn_menu.close{background-image:url(../../images/btn_close.png); display:none;}
#gnav{display:none;}
#container{margin-left:0;}

#spnav{position:fixed; top:70px; width:85%; right:0; margin:0; background-color:rgba(255,255,255,0.85); z-index:9999; text-align:center;}
#spnav ul{border-bottom: 0;}
#spnav li{margin-bottom:0;border-bottom: 1px solid #bbbbbc; padding: 0 10px;}
#spnav li a{ color:#000; display:block;}
#spnav li a:hover{background:#000; color:#fff;}
#spnav ul li img {float: right; display: inline-block; padding-top: 15px;}
h3{padding:90px 0 30px;}

#footer{padding:50px 20px; font-size:16px; text-align:center; line-height:1.7;}
#footer a{margin:0 20px;}
#pagetop{text-align:center; padding-bottom:50px; position:static;}
    
    .posi_2, .posi_3, .posi_4 {
        padding-left: 0;
    }

    .leftBox1 {
    width: 60%;
    margin: 10px auto;
}
.lb02 img{
width: 168px;
}

    
}

@media only screen and (max-width:568px){
#header_inner{padding:10px;}
h1{width:70%; margin-right:10px;}
#logo_child{width:45px;}

/*#social{width:64px; padding-top:4px;}*/
/*#social a.line{width:10px; padding-right:10px;}*/
#social a{/*width:20px; padding-left:10px;*/ margin-top: 8px;}

#btn_menu{width:28px; height:28px; background-size:100% auto;}
#spnav li a{font-size:18px; padding:6px 0;}
}

@media only screen and (max-width:480px){
h2{font-size:18px; padding:10px 5px;}

#footer{font-size:12px; padding:30px 10px;}
#footer a{margin:0 5px;}
#pagetop{padding-bottom:30px;}
}

@media only screen and (max-width:375px){
h3{padding:60px 0 20px;}
}