/* 
===================================================================
CSS index

common
link
header
footer

===================================================================
*/


/* 
-------------------------------------------------------------------

common

------------------------------------------------------------------- */

body{
margin:0;
padding:0;
font-family:Verdana,"ＭＳ Ｐゴシック",Arial,sans-serif;
font-size:81.3%;
color:#000;
-webkit-text-size-adjust: 100%;
}

.bg_single{
background:#F3F3F3;
}

/* 
-------------------------------------------------------------------

link

------------------------------------------------------------------- */

a:link{
color:#000;
text-decoration:none;
}


a:visited{
color:#000;
text-decoration:none;
}


a:hover{
color:#828282;
text-decoration:none;
}


a:active{
color:#000;
text-decoration:none;
}


/* 
-------------------------------------------------------------------

header

------------------------------------------------------------------- */

#header{
width:885px;
height:290px;
margin:0 auto;
padding:53px 0 0 0;
background:url(../images/common/bg_header.png) no-repeat left top;
}

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

#header{
width:auto;
height:auto;
margin:0;
padding:15px;
background:none;
}

}

#header span{
display:none;
}

#header h1 a{
width:278px;
height:122px;
margin:0 auto 30px auto;
padding:0;
background:url(../images/common/logo.svg) no-repeat left top;
display:block;
}

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

#header h1 a{
width:278px;
height:122px;
margin:0 auto 15px auto;
padding:0;
background:url(../images/common/logo.svg) no-repeat left top;
display:block;
}

}

.logo_catch{
width:216px;
height:16px;
margin:0 auto;
padding:0;
background:url(../images/common/img_catch.svg) no-repeat left top;

}



/* 
-------------------------------------------------------------------

navi

------------------------------------------------------------------- */

#nav{
width:685px;
margin:15px auto 50px auto;
}

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

#nav{
display:none;
}

}

.navi{
*zoom: 1;
list-style-type: none;
margin:0;
padding:0;
}
.navi:before, .navi:after{
content: "";
display: table;
}
.navi:after{
clear: both;
}
.navi li{
position: relative;
float: left;
padding: 0;
text-align: center;
}
.navi li a{
display: block;
margin:0;
padding:0;
color:#000;
text-decoration: none;
}

.nav_lib{
width:90px;
margin-right:66px;
}

.nav_about{
width:68px;
margin-right:86px;
}

.nav_memo{
width:59px;
margin-right:73px;
}

.nav_contact{
width:93px;
margin-right:47px;
}

.navi li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin-top:5px;
padding: 0;
border-top:1px #000 solid;
}



.navi li ul li{
width: 100%;
border-bottom:1px #000 solid;
}

.sub_lib{
width:200px;
}

.sub_about{
width:310px;
}


.navi li ul li a{
padding:10px 15px;
background-color:rgba(255,255,255,0.9);
text-align:left;
}

.navi li ul li a:hover{
background: #EEE;
}


/* フェードイン */

#fade-in li ul{
visibility: hidden;
opacity: 0;
transition: 0s;
}
#fade-in li:hover ul{
visibility: visible;
opacity: 1;
}
#fade-in li ul li a{
visibility: hidden;
opacity: 0;
transition: .5s;
}
#fade-in li:hover ul li a{
visibility: visible;
opacity: 1;
}


/* mobile menu
---------------------------------------------- */


.menu{
display:none;
}

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

.menu{
margin:10px 0 0 0;
padding:0;
cursor: pointer;
display:block;
}

}

.close{
margin:10px 0 19px 10px;
cursor: pointer;
}


.mlogo{
width:310px;
height:79px;
margin:0 auto 30px auto;
padding:2% 0 0 0;
text-align:center;
}


#mnavi{
width:100%;
height:100%;
position: fixed;
top: 0;
z-index: 10000;
background-color:rgba(15,65,126,0.9);
display: none;
overflow:auto;
z-index:9998;
}


.toggle{
margin:0;
padding:0;
}

.toggle a{
width:37px;
height:37px;
margin:0;
padding:0;
display: block;
position: relative;
}

ul.aside_cat{
margin:0 0 30px 0;
padding:0;
text-align:center;
}

ul.aside_cat li{
margin:0 0 15px 0;
padding:0;
font-size:120%;
color:#FFF;
}

ul.aside_cat li a{
color:#FFF;
}

ul.aside_cat2{
margin:0 0 30px 0;
padding:0;
text-align:center;
}

ul.aside_cat2 li{
margin:0 0 15px 0;
padding:0;
font-size:120%;
color:#FFF;
}

ul.aside_cat2 li a{
color:#FFF;
}



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

ul.aside_cat,.aside_cat2{
display:none;
}

}

.aside_ttl01{
margin:0 0 30px 0;
padding:0;
text-align:center;
}



/* 
-------------------------------------------------------------------

freamwork

------------------------------------------------------------------- */

#container{
width:885px;
margin:0 auto 50px auto;
padding:0;
overflow:hidden;
}

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

#container{
width:auto;
margin:0 0 50px 0;
padding:0 15px;
overflow:hidden;
}

}


#contents{
width:650px;
margin:0;
padding:0;
float:right;
}

#contents a{
color:#ff3200;
}

#contents a:hover{
color:#646464;
}


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

#contents{
width:auto;
margin:0;
padding:0;
float:none;
}

}


/* 
-------------------------------------------------------------------

footer

------------------------------------------------------------------- */

#footer{
width:885px;
margin:0 auto;
padding:20px 0;
text-align:center;
font-size:80%;
border-top:2px #000 solid;
}

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

#footer{
width:100%;
margin:0 auto;
padding:20px 0;
text-align:center;
font-size:80%;
border-top:2px #000 solid;
}

}