@charset "UTF-8";
/* CSS Document */

body{
	background-color: #f9f7f1;
}

/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  right: -300px;
  bottom: 0;
  width: 300px;
  background-color: #f9f7f1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 500;
  /*opacity: 0;*/
  
}


.open nav {
  right: 0;
  /*opacity: 1;*/
}

.open .comic_toggle_btn{
right: 220px;
}

nav .inner {
       padding: 25px 10px;
/*	height: 100%;*/
}

.navigation{
	list-style: none;
	
}
.navigation li{
    width: 100%;
text-align: center;
    font-size: 2.8rem;
}

.navigation a{
text-decoration: none;
}

.navigation li:hover{
	cursor:pointer;
	color: #a9d3d0;
}


#comicnav h2{
	font-weight:700;
	font-size:1.0rem;
    text-align: left;
    margin-bottom: 2px;
    position:relative;
}

#comicnav h2 span{
	background:#f9f7f1;
    display:inline-block;
    padding:0 10px 0 0;
}

#comicnav h2::after{
	content:'';
	display:block;
	position:absolute;
	width:100%;
	height:1px;
	top:50%;
	left:0;
	background:#807c7b;
	z-index:-1;
}
@media screen and (max-width: 767px) {
    #comicnav h2{
	font-size:1.2rem;
  }
}






/*nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em 0em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #e4e4e4;
}*/

.area {
    display: none;
}

nav li.active img {
border: 2px solid #da7979;
}

@media screen and (max-width: 767px) {
	.area{
		padding:4%;
	}
	.area img{
		width:100%;
	}
  nav {
    right: -220px;
    width: 220px;
  }
}
/*============
.comic_toggle_btn
=============*/
.comic_toggle_btn {
display: block;
    position: fixed;
    /* top: 20px; */
    /* right: 25px; */
    width: 60px;
    height: 60px;
    background: #000;
    border-radius: 50px 0px 0 0px;
    padding: 10px;
    transition: all .5s;
    cursor: pointer;
    z-index: 3;
}

@media screen and (max-width: 767px) {
.comic_toggle_btn {
    right: 0;
  top: 100%;
  transform: translateY(-100%);
}
}

.comic_toggle_btn span {
display: block;
    position: absolute;
        top: 70%;
    left: 20%;
    transform: translateY(-70%);
    font-size: 1.0rem;
    color: #fff;
	font-weight: bold;
	line-height: 1.3em;
}

.comic_toggle_btn span.listclose{
-webkit-transform: translateY rotate(90deg);
  transform: translateY rotate(90deg);
}



.open .comic_toggle_btn{
  background-color: #f9f7f1;
}

.open .comic_toggle_btn span{
color: #000;
}

.pb4{
padding-bottom: 4%;
}


/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .4;
  z-index: 2;
  cursor: pointer;
}


@media screen and (min-width:768px) {
	nav {
    right: 0px;
    width: 40vw;
	transition: none;}
	
	nav ul{
	display: flex;
	flex-wrap: wrap;}
	
	nav li{
	width: 50%;
	padding: 2% 4%;}
	nav li img{
	width: 100%;
	border-radius:3px;}
	
	.comic_toggle_btn,.open #mask {
	display: none;
	}
	
	.contents {
	width: 60vw;
	padding:4%
	}
}


li.lock a{
	position: relative;
	display: block;
}

li.lock a .mask{
    content: '';
    color: #ffffff;
    position: absolute;
    border: 50%;
    z-index: 50;
    display: block;
    font-weight: bold;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
}


li.lock a .mask::before{
    content: '';
	width: 60%;
    height: 69%;
    background: url("../images/icons8-lock-500.png")no-repeat;
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-size: 100%;
    display: block;
}

li.lock a img{
opacity: 0.5;
}




@media screen and (max-width: 767px) {
 nav li{
	padding: 0 4% 10% 4%;}
}

footer {
    text-align: left;
    padding: 2% 4%;
}

@media screen and (max-width: 767px) {
footer{
	text-align:center;
	padding:2%;
}
}