.illusts{
	position:relative;
text-align: center;
}
.illusts a{
	display: inline-block;
	margin: 5px;
	width: 250px;
	height: 250px;
	background-color: #ffffff;
	border: solid 1px #565656;
	vertical-align: middle;
	text-align:center;
}
.illusts a img{
	margin: 5px;
	max-height: 240px;
	max-width: 240px;
}
.switch {
	float:right;
	position:relative;
	right: 25px;
	top: 42px;
}
.switch label {
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.switch label:before {
    padding: 6px 10px;
    content: 'R18';
    border-radius: 6px 0 0 6px;
    background-color: #ffffff;
border: 1px solid #333333;
    color: #333;
}
.switch input[type="checkbox"] {
  display        : none;
}
.switch label:after {
    padding: 6px 10px;
    content: '全年齢';
    border-radius: 0 6px 6px 0;
    background-color: #1cef2a;
	border: 1px solid #333333;
    color: #FFF;
}
.switch input+label:hover:before {
transition     : .2s;
}
.switch input:checked+label:hover:after {
transition     : .2s;
}
.switch input:checked+label:before {
    background-color: #e83d0d;
    color: #FFF;
    opacity: 1;
}

.switch input:checked+label:after {
    background-color: #ffffff;
    color: #333;
}

.text {
	float: left;
	position: absolute;
	left: 55px;
	top: 60px;
	z-index: 2;
	text-align: center;
}

.fukidasi {
	height: 450px;
	float: left;
	position: absolute;
	z-index: 1;
}

#yes_button, #no_button{
	border-radius: 15px 15px 15px 15px;
	border: 0px;
	margin: 5px 25px;
	font-size: 30px;
	width: 150px;
	height: 75px;
	z-index: 3;
	position: relative;
	top: 400px;
	left: 0px;
}

#yes_button{
	background: linear-gradient(#35ed15,#0ead03);
}

#no_button{
	background: linear-gradient(#ed3c15,#ad0303);
}

#yes_button:hover{
	background: linear-gradient(#0ead03,#35ed15);
	border: 2px solid #333333;
	transition     : .2s;
}

#no_button:hover{
	background: linear-gradient(#ad0303,#ed3c15);
	border: 2px solid #333333;
	transition     : .2s;
}

.modal-panel:not(:target){
	display: none;
}
.modal-panel:target{
	display: block;
	animation: modal-show 0.5s;
    -webkit-animation: modal-show 0.5s;
}

@keyframes modal-show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
 }

.modal-panel{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 2rem 1rem;
	background: rgba(0,0,0,0.6);
	z-index: 10;
	overflow: scroll;
}
.modal-content{
	border-radius: 15px 15px 15px 15px;
	border: 5px solid #333333;
	position: relative;
	padding: 1rem;
	width: 720px;
	height: 450px;
	margin: auto;
	background: #fff;
	z-index: 15;
}

.photo-show {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  padding-top: 29%;
}

.photo-show img {
    animation: show 40s infinite;
    -webkit-animation: show 40s infinite;
    max-width: 100%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
}

#activities ul li{
	display: inline;
}

#activities ul li+ li img{
	padding-right: 10px;
	border-left: 0;
	border-right: 1px solid #333333;
}

#activities ul li img{
	padding-left: 5px;
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
}

@keyframes show {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}

	10% {
		opacity: 1;
	}
	20% {
		opacity: 0;
	}
 }

@-webkit-keyframes show {
	0% {
		opacity: 0;
	}

	5% {
		opacity: 1;
	}

	10% {
		opacity: 1;
	}
	20% {
		opacity: 0;
	}
}

.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.photo-show img:nth-of-type(2) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s;
}

.photo-show img:nth-of-type(3) {
    animation-delay: 16s;
    -webkit-animation-delay: 16s;
}

.photo-show img:nth-of-type(4) {
    animation-delay: 24s;
    -webkit-animation-delay: 24s;
}

.photo-show img:nth-of-type(5) {
    animation-delay: 32s;
    -webkit-animation-delay: 32s
}

.photo-show img:nth-of-type(6) {
    animation-delay: 40s;
    -webkit-animation-delay: 40s;
}

.photo-show img:nth-of-type(7) {
    animation-delay: 48s;
    -webkit-animation-delay: 48s;
}
.photo-show img:nth-of-type(8) {
    animation-delay: 56s;
    -webkit-animation-delay: 56s;
}
.photo-show img:nth-of-type(9) {
    animation-delay: 62s;
    -webkit-animation-delay: 62s;
}
.photo-show img:nth-of-type(10) {
    animation-delay:70s;
    -webkit-animation-delay: 70s;
}


.copyright {
  width: 100%;
  color: #e1e8f1;
  text-align: center;
  background-color: #494a52;
  padding: 5px 0px;
  margin-top: auto;
}

body {
color: #444444;
height: 100%;
padding: 0px 18%;
background-image: url("/img/material/background.png");
background-color: #f6f6f6;
background-size: 100% auto;
}

.contents{

}

img{
	height: auto;
}
.wrap {
background-color: #ffffff;
position: relative;
bottom: 7px;
}

.menu {
  display: inline-block;
  border-bottom: 1px solid #DDD;
  width: 100%;
  min-width: 1200px;
  position: relative;
}

.nav {
background-color: #ffffff;
border-bottom: 1px solid #dedede;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: #888888;
display: block;
margin: 1px;
overflow: hidden;
position: relative;
text-align: center;
position: relative;
right: 1px;
bottom: 25px;
}
.nav ul {
	min-width: 500px;
}

.nav ul li+ li {
	border-left: 0;
	border-right: 1px solid #333333;
}

.nav ul li {
border-left: 1px solid #333333;
border-right: 1px solid #333333;
margin: -3px;
display: inline-block;
list-style-type: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
position: relative;
right: 17px;
width: 16%;
}
.nav > ul > li > a > .caret {
border-top: 4px solid #aaaaaa;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: '';
display: inline-block;
vertical-align: middle;
-webkit-transition: color 0.1s linear;
transition: color 0.1s linear;
}
.nav > ul > li > a {
color: #444444;
display: block;
line-height: 56px;
padding: 0 10px;
text-decoration: none;
}
.nav > ul > li:hover {
background-color: #444444
}
.nav > ul > li:hover > a {
color: rgb( 255, 255, 255 );
}
.nav > ul > li:hover > a > .caret {
border-top-color: rgb( 255, 255, 255 );
}
.nav > ul > li > div {
background-color: rgb(218, 60, 65);
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
opacity: 0;
position: absolute;
width: 165px;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
transition: opacity 0.2s;
}
.nav > ul > li:hover > div {
display: block;
opacity: 1;
visibility: visible;
}
.nav > ul > li > div ul > li {
display: block;
}
.nav > ul > li > div ul > li > a {
color: #ffffff;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.nav > ul > li > div ul > li:hover > a {
background-color: rgba( 255, 255, 255, 0.1);
}

.nav-unshown {
  display: none;
}


header {
  padding: 10px;
  background: skyblue;
}

/*スマホ用メニュー*/
#nav-drawer {
  position: relative;
}

.nav-unshown {
  display: none;
}

#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
  position: relative;
  bottom: 5px;
}

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}

#nav-open span:before {
  bottom: -8px;
}

#nav-open span:after {
  bottom: -16px;
}

#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 330px;
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(300%);
  transform: translateX(300%);
}

#nav-input:checked~#nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked~#nav-content {
  -webkit-transform: translateX(calc(100vw - 330px));
  transform: translateX(calc(100vw - 330px));
  box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
}

/*ここまで*/
#nav-open {
  display: none;
}

#nav-content {
  display: none;
}

@media screen and (max-width: 1024px) {
  body {
    /* background-color: #FF0000; */
  }

  .leftparts{
      display: none;
  }


  .menu {
    min-width: 0px;
    min-height: 30px;
  }

  .logo {
    float: left;
    position: relative;
    bottom: 3px;
    left: 5px;
  }

  .nav {
    display: none;
  }

  #nav-content p {
    border-bottom: 1px solid #DDD;
  }

  #nav-content p a {
    text-align: center;
    text-decoration: none;
    color: #333;
    font-size: 1.2em;
  }

  #nav-content li {
    border-bottom: 1px solid #DDD;
    position: relative;
    left: 10px;
  }

  #nav-content li a span {
    display: block;
    margin: 0px 0 0 0;
    color: #AAA;
    text-transform: uppercase;
    font-size: 80%;
    letter-spacing: 1px;
  }

  #nav-content li a {
    display: block;
    padding: 0px 0px;
    text-decoration: none;
    color: #333;
  }

  #nav-drawer {
    float: right;
    position: relative;
    right: 5px;
    top: 5px;
  }

  #nav-open {
    display: block;
  }

  #nav-content {
    display: block;
  }
}

@media screen and (max-width: 820px) {
  body {
    /* background-color: #00FF00; */
  }
}