@charset "UTF-8";
/* CSS Document */
#banner{height:100%; left:0; min-height:100%; overflow:hidden; position:fixed; top:0; width:100%; z-index:0;}
#banner_inner{height:100%; min-height:100%; position:relative;}
#banner_inner .bx-wrapper, #banner_inner .bx-viewport, #banner_inner .bx-viewport .slide, #banner_inner .bxslider{height:100% !important;}
#banner_inner .slide{background-position:center right; background-repeat:no-repeat; background-size:cover; position:relative;}
#banner_inner .slide1{background-image:url(../images/banner_01.jpg);}
#banner_inner .slide2{background-image:url(../images/banner_02.jpg);}
#banner_inner .slide3{background-color:#DB0000;}
#banner_inner .slide .txt{position:absolute; left:380px; top:50%;}
#banner_inner .slide .txt{ width:582px;}
#banner_inner .slide .txt .txt_01, #banner_inner .slide .txt .txt_02{ float:left}
#banner_inner .slide .txt a:hover{ opacity:0.8}


#banner_inner .slide3,#banner_inner .slide2,#banner_inner .slide1,#banner_inner .slide{
width:100%;
height:100%;
}

.mainbox{position:relative; padding-bottom:10px; text-align:center; width:100%; line-height:1.9;}
.mainbox .img{position:absolute; top:0; width:27%; z-index:1;}
.mainbox .imgl{left:0; text-align:left;}
.mainbox .imgr{right:0; text-align:right;}
.mainbox .inner{padding:2% 0 0; letter-spacing: 3px;}
.main_inner{padding:0 25px;}
.slide3 .mainbox {color:#fff; width: auto !important; margin-top: 30px;}
.slide3 .mainbox p {font-weight: bold; letter-spacing: 0.2em;}
.slide3 .mainbox p a {display: block; margin-top: 25px;}

#interview{background-color: #BD3590; }
#univer{margin-bottom:50px; font-size:13px; line-height:1.5;}
#univer li{width:19.6%; margin-right:0.5%; margin-bottom:0.5%; float:left; overflow:hidden; position:relative;}
/*#univer li:nth-child(6n){margin-right:0;}*/
#univer li .out{position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; background-color:rgba(0,0,0,0.7); opacity:0; transition:all 0.5s ease-out; font-size: 16px; text-align: center; background-image: url(../images/staff_fukidashi.png); background-repeat:no-repeat; background-position: center center; background-size: 90%;}
#univer li .inner{text-align:center; padding:0 10%;}
#univer li a{color:#fff;}
#univer li .txt{margin-bottom:20px;}
#univer li .btn{border:1px solid #fff; padding:5px; font-family:Arial; font-style:italic; position:relative; height:30px; z-index:999;}
#univer li .btn span.txtlink, #univer li .btn a{padding-top:7px; display:block;}
#univer li .btn span.frame{position:absolute; top:3px; left:3px; border:1px solid #fff; height:40px; width:100%;}
#univer li:hover .out{opacity:1;}
.grow {
  -webkit-transition:all 0.5s ease-out;
  -moz-transition:all 0.5s ease-out;
  -ms-transition:all 0.5s ease-out;
  -o-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}

#univer li:hover .grow{
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  -ms-transform:scale(1.1);
  -o-transform:scale(1.1);
  transform:scale(1.1);
}
.univerbox{max-width:940px; width:100%; display:none;}
.univerboxl{width:40.63%; float:left;}
.univerboxr{width:53.125%; float:right; margin-right:2%; padding:20px 0;}
.univerboxr span{background:#000; color:#fff; padding:5px 10px; display:inline-block;}
.univerboxr .tit1{font-size:24px;}
.univerboxr .tit2{font-size:20px;}
.univerboxr .row1{margin-bottom:5px;}
.univerboxr .row2{margin-bottom:10px;}
.univerboxr .row3{color:#8f8f8f; font-size:16px; padding-left:10px;}
.univerboxr .box{border:1px solid #cfcfcf; padding:20px 10px 10px; font-size:16px; line-height:1.7;}
.univerboxr .box li{margin-bottom:10px;}
.univerboxr .question{color:#555555;}
.univerboxr .answer{padding-left:27px; color:#000;}

#intention ul{position:relative; z-index:10; max-width:895px; width:100%; margin:0 auto;}
#intention li{margin-bottom:50px; text-align:center;}
#intention li .caption{text-align:right; padding-top:5px; font-style:italic;}

#flow{background:#ececec;}
#flow .inner{padding:10px 3%;  width:94%; margin:0 auto; max-width:1200px; margin:0 auto;}
#flow .img{/*width:54%;*/ float:left;}
#flow .img2{width:23%; float:left;}
#flow h2{ margin-bottom:10px; }
#flow .flow_4{ padding-bottom:30px;}

#flow .cont{/*width:44%; max-width:400px;*/ float:left; width:90%; margin-left:20px;}
#flow .tit{margin-bottom:10px; border-bottom:1px solid #b1b1b1; font-size:16px; font-weight:bold;}
#flow .txt{/*margin-bottom:30px;*/ font-size:12px;}
#flow .txt2{width:72%; float:right; text-align:center;}
#flow .rows{margin-bottom:30px;}
#flow #btn{background:#000; text-align:center; max-width:305px; width:100%; float:right;}
#flow #btn:hover{opacity:0.8;}
#flow #btn a{padding:15px 0px; display:block; color:#fff; font-size:16px;}
#flow #btn span.ic{background:url(../images/ic_arrow.png) no-repeat center right; padding:5px 50px 5px 40px;}

#flow .arrow{ text-align:center;}


#access{background:#ececec;}
#access .inner{padding:30px 3%;  width:94%; margin:0 auto; max-width:1200px; margin:0 auto;}
#access .access_img { text-align:center; margin-bottom:20px;}
#access .access_img02 {text-align:center;}
#access .access_img02 img{margin:0 5px;}
#access .img2{width:23%; float:left;}
/*#access .cont{width:44%; float:right; text-align:right; max-width:400px;}*/
#access .tit{margin-bottom:20px;}
#access .txt{margin-bottom:30px;}
#access .txt2{margin-top:30px;}
span.red{color:#F00; font-weight:bold;}
#access .rows{margin-bottom:30px;}
#access #btn{background:#000; text-align:center; max-width:305px; width:100%; float:right;}
#access #btn:hover{opacity:0.8;}
#access #btn a{padding:15px 0px; display:block; color:#fff; font-size:16px;}
#access #btn span.ic{background:url(../images/ic_arrow.png) no-repeat center right; padding:5px 50px 5px 40px;}

.po_in02 {
    max-width: 492px;
    position: relative;
    margin: 0 auto;
}
.reason_img {
    text-align: right;
    position: absolute;
    width: 100%;
    z-index: 100;
}
p {
letter-spacing: 2px;
}

#reason .anshin {
    background-image: url(../images/22664444.jpg);
    background-repeat: no-repeat;
}
#reason .jisseki {
    background: url(../images/23408355.jpg);
    background-repeat: no-repeat;
    background-position: top left;
}
#reason .shinrai {
    background: url(../images/10876190.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    
}
#reason .speed {
    background: url(../images/6709787.jpg);
    background-repeat: no-repeat;
    background-position: top left;
}


#reason h2 {
    background: none;
    text-align: left;
    font-size: 36px;
    padding: 0;
    font-style: normal;
    letter-spacing: 8px;
}
#reason .anshin h2 {
    color: #036eb0;
}

#reason .jisseki h2 {
    color: #ec911b;
    position: relative;
}
#reason .shinrai h2 {
    color: #8858a2;
}
#reason .speed h2 {
    color: #3c8071;
}
#reason .rows {
    padding: 0 10px 10px;
}

.access_img{
width:602px;
height:auto;
position:relative;
}

.map_photo1{
width:35px; height:35px;
position:absolute;
top:136px; left:65px;
}
.map_photo2{
width:35px; height:35px;
position:absolute;
top:136px; left:99px;
}
.map_photo3{
width:35px; height:35px;
position:absolute;
top:136px; left:214px;
}
.map_photo4{
width:35px; height:35px;
position:absolute;
top:92px; left:365px;
}
.map_photo5{
width:35px; height:35px;
position:absolute;
top:160px; left:365px;
}
.map_photo6{
width:35px; height:35px;
position:absolute;
top:180px; right:149px;
}
.map_photo7{
width:35px; height:35px;
position:absolute;
top:153px; right:27px;
}
.map_photo_tex{
width:187px; height:54px;
position:absolute;
top:11px; left:173px;
}

.map_tex{
text-align:left;
padding-bottom: 15px;
}


#q1 {
    background-color: #BD3590;
}
#q1 .question {
    background-image: url(../images/Q1_ttl.png);
}
#q2 {
    background-color: #009ED4;
}
#q2 .question {
    background-image: url(../images/Q2_ttl.png);
}
#q3 {
    background-color: #A5B800;
}
#q3 .question {
    background-image: url(../images/Q3_ttl.png);
}
#q4 {
    background-color: #87809E;
}
#q4 .question {
    background-image: url(../images/Q4_ttl.png);
}
#q5 {
    background-color: #D8962C;
}
#q5 .question {
    background-image: url(../images/Q5_ttl.png);
}
ul li img {
    max-width: 100%;
}
#q1 ul li, #q2 ul li, #q5 ul li {
    display: inline-block;
    width: 21%;
    padding: 0 0.5%;
}
#q3 ul li, #q4 ul li {
    display: inline-block;
    width: 30%;
    padding: 0 0.5%;
}
.mgn_btm {
    height: 25px;
    background: #fff;
}
#soudan {
    background-color: #64A18C;
}
#soudan .question {
    padding-left: 0 !important;
}
.section ul {
    margin: 0 6%;
}
#result {
    background-color: #EAEAEA;
}
#result.section {
    height: auto !important;
}
.kekka,
.osusume>p {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}
.kekka_li li {
    display: inline-block;
    width: 30%;
    margin: 1% 0;
}
.osusume ul li {
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    padding: 3px 3px 3px ;
}
.osusume ul li>h5 {
    display: inline-block;
    background-color: #dadada;
    min-width: 45px;
    text-align: center;
    padding: 0 3px;
    margin-right: 5px;
    font-weight: bold;
    font-size: 12px;
}
.osusume>div {
    background-color: #fff;
    width: 72%;
    margin: 0 auto;
    text-align: left;
}
.osusume h4 {
    background-color: #000;
    color: #fff;
    letter-spacing: 0.35em;
    text-align: center;
}
.osusume p {
    display: inline-block;
}
.osusume .inner {
    padding: 2% 4% 0;
    font-size: 12px;
}
.osusume>div img {
    border: 1px solid #c0c1c2;
    float: left;
    max-width: 28%;
}
.osusume .inner ul {
    float: right;
    width: 66%;
    margin: 0 0 0 4% !important;
}
.osusume .btn {
    margin: 24px auto;
    display: block;
}
.osusume .cf {
    margin: 15px auto 0;
}
.dtl_btn {
    border: 1px solid #000;
    width: 46%;
    line-height: 40px;
    text-align: center;
    background: url(../images/next_icon.png) no-repeat 96% center #fff;
    display: block;
    margin: 0 auto 15px;
    font-weight: bold;
}
.chinryo {
    font-weight: bold;
    color: #00A4DA;
}
.chinryo span {
    font-size: 24px;
}
.top_btn {
    text-align: center;
    display: block;
    height: 44px;
    letter-spacing: 8px;
    background: #fff;
    border: 1px solid #000;
    font-weight: bold;  
    position: relative;
    margin: 25px auto 0 !important;
    background-image: url(../images/next_icon.png);
    background-position: 95% center;
    background-repeat: no-repeat;
    float: none !impornant;
}
.w_btn {
    line-height: 44px;
}
.b_btn span {
    background-color: rgba(0,187,241,0.7);
    border: 0 !important;
    font-weight: bold; 
    line-height: 44px;
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
}
/*===============================
             MEDIA
================================*/
@media only screen and (max-width:1400px){
#banner_inner .slide .txt{left:360px;}	
#banner_inner .slide .txt{ width:41.57%;}
#banner_inner .slide .txt .txt_01{ width:51.2367%;}
#banner_inner .slide .txt .txt_02{ width:48.7637%;}

#univer{font-size:12px; line-height:1.5;}
#univer li .inner{padding:0 5%;}
#univer li .txt{margin-bottom:10px;
    margin: 0 auto;
    text-align: center;}
#univer li .btn{height:25px;}
#univer li .btn span.txtlink, #univer li .btn a{padding-top:5px;}
#univer li .btn span.frame{height:35px;}
}

@media only screen and (max-width:1300px){
#banner_inner .slide .txt{width:35%; left:280px;}
}
@media only screen and (min-width:1201px) {
    #reason .anshin {
        background-position: left 38%;
    }

}
@media only screen and (max-width:1200px){
#banner_inner .slide .txt{margin-top:0 !important; top:inherit; bottom:10%;}

#univer{font-size:11px; line-height:1.5;}
#univer li{width:19.6%;}
#univer li:nth-child(6n){margin-right:0.5%;}
#univer li .btn{height:20px;}
#univer li .btn span.txtlink, #univer li .btn a{padding-top:4px;}
#univer li .btn span.frame{height:30px;}

#flow .img {/*width:10%;*/ float:left; text-align:center; padding-top: 8px;}
#flow .cont{float: left; text-align: left;}
#flow #btn{float:none; margin:0 auto; width: 240px;}


#access .img, #access .cont{width:100%; float:none; text-align:center;}
#access .cont{margin:0 auto;}
#access #btn{float:none; margin:0 auto;}

}
@media screen and (min-width:737px) and (max-width:1200px) {
    #reason .anshin { background-position: left 38%; background-size: contain;}

}
@media only screen and (max-width:960px){
#banner_inner .slide .txt{width:auto; bottom:5%; margin-right:40px;}	

.mainbox{padding-bottom:40px;margin-top:15px !important;}
.mainbox span.block{display:inline;}

#univer li{width:33%;}
#univer li:nth-child(4n){margin-right:0.5%;}
#univer li:nth-child(3n){margin-right:0;}
    
    
    #access .access_img02 img {
    width: 46%;
    }
}

@media only screen and (max-width:800px){
	
#flow .img{text-align:left;}	
/*    #flow .img{width:50%; margin:0 auto 30px; text-align:left; float:none;}	*/
#flow .cont{width:90%; float:right; text-align:left; margin:0 auto;}
#flow #btn{margin:0 auto; float:none; max-width:100%;}
#flow, #access {width:96%; margin:30px auto;}	
	
#access .img{width:50%; margin:0 auto 30px; text-align:center; float:none;}	
#access .cont{width:80%; float:none; text-align:center; margin:0 auto;}

#access #btn{margin:0 auto; float:none; max-width:100%;}
    #flow, #access {width:96%; margin:30px auto;}

#banner {
        position: static;
}


}
@media screen and (min-width:961px) {
    #univer li:nth-child(5n){margin-right:0;}
    #flow, #access {width:640px; margin:30px auto;}
    .section {
    height: 550px;
}
}
@media screen and (min-width:737px) {
    .non-pc {display:none;}
    .non-sp {display:block;}
    
    #reason .anshin .cont {
        width: 72%;
    margin-left: 240px;

    }
    .top_btn {
        
    }
    .b_btn,
    .b_btn span{
        width: 289px;
    }
    .w_btn {
        width: 590px;
    }
        .question {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.2em;
    padding-left: 97px;
    line-height: 45px;
    background-position: left center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    margin: 0 5% 30px 5%;
    }
    
#reason .jisseki .cont,
#reason .shinrai .cont,
#reason .speed .cont {
    width: 50%;
}
    #reason .inner.clearFix {
    position: relative;
    height: 437px;
}
    #reason .cont {
    position: absolute;
    bottom: 5%;
    right: 2%;
    background-color: rgba(255,255,255,0.6);
    }
  
    #reason .jisseki {
        background-size: cover;
        background-position: left 20%;
    }
    #reason .shinrai {
        background-size: cover;
        background-position: -20% center;
    }
    #reason .speed {background-size: 50%; background-position: 140px 30%;}
    #reason .jisseki h2 img {
    position: absolute;
    bottom: 0;
    }
    
    #banner_inner .check_1 {
/*display:block; width:100%; height:100%;*/
        position: absolute;
    top: 194px;
    left: 65px;
}
#banner_inner .check_2 {
    position: absolute;
    top: 194px;
    right: 65px;
}
    
}
@media only screen and (max-width:736px){
#banner_inner .slide1{background-image:url(../images/banner_01_sp.jpg);}
#banner_inner .slide2{background-image:url(../images/banner_02_sp.jpg);}
#banner_inner .slide3{background-image:url(../images/banner_03.jpg);}
#banner_inner .slide .txt{bottom:10px; margin-right:0; padding:0 40px; left:0;}
#flow, #access{width:100%; margin:30px auto; padding-bottom: 30px;}
    .non-pc {display:block;}
    .non-sp {display:none;}
#access .access_img02 img {
    display: inline-block;
    width: 46%;
}
    .posi_3 {max-height: 259px;}
    .posi_4 {font-size: 0.6em;
    font-weight: bold;}
    .main_inner {padding: 0 !important;}
.mainbox .inner{font-size:1em; line-height:1.7; padding:0;}
.mainbox span.block{display:inline;}
.mainbox .inner p{text-align:center; padding-top: 3%;}

.univerinfo{float:none; clear:both; width:96%; margin:0 auto;}
.univerboxr .answer{padding-left:20px;}
    #reason .inner {
        margin-bottom: 30px;
    }
    #reason .cont {
    width: 96%;
    position: absolute;
    bottom: 0;
    left: 2%;
    background-color: rgba(255,255,255,0.6);
    }
    #reason .anshin {
    position: relative;
    height: 637px;
    background-position: 80% 20%;
    background-size: 200%;
}
   #reason .jisseki {
    position: relative;
    height: 637px;
    background-size: cover;
}
    #reason .shinrai {
    position: relative;
    height: 637px;
    background-size: cover;
}
    #reason .speed {
    position: relative;
    height: 637px;
    background-size: cover;
}
    #reason .jisseki h2 img {
    position: absolute;
    right: -10px;
    bottom: 5px;
    }
#intention ul{max-width:590px;}
    .posi_2 {
        padding-top: 80px !important;
    }
/*
#flow{background-image:url(../images/earphone_bgsp.gif);}
#flow .img{width:80%;}
#flow .cont{max-width:100%; width:100%;}
#flow .tit{margin-bottom:30px;}
#flow .txt{font-size:26px; line-height:1.5; margin-bottom:40px;}
#flow .txt2{font-size:18px; line-height:1.5;}
#flow #btn a{font-size:20px;}
#flow .rows{margin-bottom:40px;}
*/

    #banner_inner .slide3 a {
        float: none;
    }

#access{background-image:url(../images/earphone_bgsp.gif);}
#access .img{width:80%;}
#access .cont{max-width:100%; width:100%;}
#access .tit{margin-bottom:30px;}
#access .txt{font-size:26px; line-height:1.5; margin-bottom:40px;}
#access .txt2{/*font-size:18px;*/ line-height:1.5; text-align: left;}
#access #btn a{font-size:20px;}
#access .rows{margin-bottom:40px;}
    .top_btn {
        margin: 15px auto 0 !important;
    }
    .b_btn span{
        width: 100%;
    }
    .b_btn{
        width: 95%;
    }
    .w_btn {
        width: 95%;
        letter-spacing: 1px !important;
    }
    .slide3 .mainbox p {
    font-size: 0.9em;
    }
    .b_btn span{
        margin: 0 !important;
    }
}

@media only screen and (max-width:600px){
/*#flow .cont{width:100%;}*/
#flow .inner{padding:10px;}	
	
	
#access .cont{width:100%;}
#access .inner{padding:40px 10px;}
}

@media only screen and (max-width:480px){
.mainbox .inner{font-size:14px; padding:0 20px;}
.main_inner{padding:0 10px;}

#univer li{width:49.5%;}
#univer li:nth-child(3n){margin-right:0.5%;}
#univer li:nth-child(2n){margin-right:0;}
.univerboxr .tit1{font-size:14px;}
.univerboxr .tit2{font-size:12px;}
.univerboxr .row3{font-size:12px;}
.univerboxr .box{font-size:12px;}

#intention li{margin-bottom:20px;}
#intention li .caption{font-size:12px;}

/*
#flow .img{margin-bottom:10px; width:100%;}
#flow .txt{font-size:16px; line-height:1.7; margin-bottom:30px;}
#flow .txt2{font-size:14px; line-height:1.7;}
#flow .rows{margin-bottom:30px;}
#flow #btn a{font-size:16px;}
*/


#access .img{margin-bottom:10px; width:100%;}
#access .txt{font-size:16px; line-height:1.7; margin-bottom:30px;}
#access .txt2{font-size:14px; line-height:1.7;}
#access .rows{margin-bottom:30px;}
#access #btn a{font-size:16px;}
}

@media only screen and (max-width:414px){
#banner_inner .slide .txt{padding:0 10px 0 0;}	

#univer li{font-size:12px; line-height:1.5;}
#univer li .btn{height:20px;}
#univer li .btn span{height:30px;}

#flow .txt2 span.block{display:inline;}

#access .txt2 span.block{display:inline;}
}


@media only screen and (max-width:375px){
/*#univer li{width:215px; float:none; margin:0 auto 10px !important;}*/
    #social a {width:50%;}
    #social {width:82px !important; margin-right: 7%; margin-top: 2px;}
    .posi_2 {padding: 0 3%;}
}

@media only screen and (max-width:350px){
/*#univer li{width:215px; float:none; margin:0 auto 10px !important;}*/
    #social a {width:50%;}
    #social {width:75px !important; margin-right: 4%; margin-top: 2px;}
    .posi_2 {padding: 0 3%;}

	.lb02{width: 55.5%;}
}



@-moz-document url-prefix() {
  #univer li:nth-child(5n+1) {
    margin-right: 0.5% !important;
    clear: both;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, #univer li:nth-child(6n) {
    margin-right: 0.5% !important;
    clear: both;
}
}
@media all and (-ms-high-contrast:none){
  #univer li:nth-child(5n+1) {
    margin-right: 0.5% !important;
    clear: both;
}
}