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

Basic Config

===========================================
*/
*{
font-family: "Noto Sans JP";
}
html,body,#Wrapper{
height: 100%;
}


img{
width: 100%;
}

a:hover{
  opacity: .5;
}

.clearfix:before,
.clearfix:after{
content: "";
clear: both;
display: table;
}



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

Global Navigation

===========================================
*/
nav{
width: 256px;
background: #000 url(../image/nav/grange.jpg);
height: 100vh;
color: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
}


nav header{
width: 100%;
background: #000;
}


nav #header h1{
width: 100%;
padding: 60px 40px;
height: 250px;
position: relative;
overflow: hidden;
}



nav header h1:before,
nav header h1:after{
content: "";
display: block;
width: 100%;
height: 250px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
position: absolute;
}

/*
nav header h1:before{
background-image: url(../image/attest/attest_top.png);
top:-80px;
left: -40px;
}

nav header h1:after{
background-image: url(../image/attest/attest_bottom.png);
bottom:-80px;
right: 0px;
}*/

nav .nav_tel{
margin: 20px 0;
}







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

Menu

===========================================
*/
#menu{
border-top: solid 1px #aaa;
overflow-y: scroll;
width: 256px;
height: calc(100vh - 306px);
-ms-overflow-style: none;
scrollbar-width: none;
}

#menu::-webkit-scrollbar {  /* Chrome, Safari 対応 */
display:none;
}


#menu li a{
display: block;
width: 100%;
padding: 18px 0 18px 44px;
box-sizing: border-box;
color: #fff;
border-bottom: solid 1px #aaa;
}

#menu li a:hover{
background: rgba(0,0,0,.6);
}



/*
++++++++++++++++++++++++++++++++++++++++++++

Girl

++++++++++++++++++++++++++++++++++++++++++++
*/

.girl{
width: 31%;
border:solid 1px #aaa;
position: relative;
margin-bottom: 1%;
}

.girl a{
color: #fff;
display: block;
background: #000;
opacity: 1;
}

.girl img{
width: 100%;
cursor: pointer;
}

.girl .img:hover{
opacity: .5;
}

.girl .img:after{
content: "";
display: block;
width: 100%;
height: 100%;
top:0;
left: 0;
position: absolute;
/*background-image: url(../image/attest/keepout.png);*/
background-size: cover;
}

.girl .size{
font-size: 90%;
}

.girl .time{
font-size: 80%;
}

.girl .data{
font-size: 14px;
background:rgba(0,0,0,.8);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 5px;
box-sizing: border-box;
}








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

Container Config

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

.container{
background: #000;
min-height: 100%;
width: calc(100% - 256px);
margin-left: 256px;
padding: 20px;
background-image: url(../image/bg_logo.png),url(../image/bg.jpg);
background-size: contain,cover;
background-position: center center;
background-repeat: no-repeat,repeat;
}

.container .ttl{
padding-top: 40px;
}

.container .ttl h1{
width: 800px;
}








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

Footer

===========================================
*/
footer{
position: fixed;
bottom:0;
left: 0;
width: calc(100% - 256px);
background: #222;
color: #fff;
text-align: center;
margin-left: 256px;
}

footer address{
text-align: center;
width: 100%;
display: block;
}