body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:5%;}
img,abbr,acronym,fieldset{border:0;}
html{height: 100%;}


body{font: 25px/10 'Noto Sans JP',impact, Arial, Arial Black, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	   font-weight: 300;
	   -webkit-text-size-adjust:100%;
     overflow-x: hidden;
		 background-color:#000;
		 height: 100%;
    }


/* オープニング*/

.name{
			 position: relative;
			 width:100%;
			 height:93%;
			 min-height: 93%;
			 z-index:9999;
			 text-align:center;
			 white-space: nowrap;
			 }

	.name h1{color: #444;
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					width: 100%;
					height: auto;
					font-size: 5vw;
					font-family:Verdana;
					font-weight:550;
					letter-spacing: 0.4em;
					text-indent: 0.4em;
					-webkit-transform: translate(-50%, -50%);
							-ms-transform: translate(-50%, -50%);
									transform: translate(-50%, -50%);}

	.name h2{color: #444;
					 display: block;
					 position: absolute;
 					 top: 56%;
 					 left: 50.5%;
					 width: 100%;
					 height: auto;
					 margin-top: 3%;
					 font-size: 2vw;
					 font-family:Verdana;
					 font-weight:225;
					 letter-spacing: 0.4em;
					 text-indent: 0.4em;
					 -webkit-transform: translate(-50%, -50%);
 							-ms-transform: translate(-50%, -50%);
 									transform: translate(-50%, -50%);}




.name{-webkit-animation: name 5s forwards;
	         -ms-animation: name 5s forwards;
               animation: name 5s forwards;}


         @keyframes name {
            0%{opacity: 0;
               filter: blur(5px);
               }

           30%{opacity: 1;
               filter: blur(0px);}

           90% {opacity: 1;
               filter: blur(0px);
               }

           100% {
             filter: blur(10px);
             opacity: 0;
             display: none;
             z-index: -1;
           }}
/* オープニング ここまで */
/* シャッター*/

.shutter::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        background-color: #000;
        width: 0;
        height: 1px;
        }

.shutter::before {
           -webkit-animation: shutterOpen 2s forwards;
					     -ms-animation: shutterOpen 2s forwards;
                   animation: shutterOpen 2s forwards;
                   animation-delay: 5s;
				          }

 @keyframes shutterOpen {
       0% {filter: blur(20px);
           width: 100%;
           height: 1px;
           }
       50% {filter: blur(0px);
            width: 100%;
            height: 1px;
           }
   90% {filter: blur(0px);
     width: 100%;
     height: 100%;
   }
   100% {filter: blur(0px);
     width: 100%;
     height: 100%;
   }
 }

.shutter{display: block;
	  width: 100%;
		height: 100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
		opacity: 1;
    z-index:9998;
    }


  .shutter {
    -webkit-animation: byeShutter 2s forwards;
        -ms-animation: byeShutter 2s forwards;
						animation: byeShutter 2s forwards;
            animation-delay: 5s;
            }

  @keyframes byeShutter {
    70% {
         opacity: 1;
        }
    100% {
        opacity: 0;
        display: none;
        z-index: -1;
        }
       }

.items {
  -webkit-animation: contentScale 2s forwards;
      -ms-animation: contentScale 2s forwards;
					animation: contentScale 2s forwards;
          animation-delay: 5s;

}

@keyframes contentScale {
  70% {
    -webkit-transform:  scale(1) ;
        -ms-transform:  scale(1) ;
						transform:  scale(1) ;
  }
  100% {
    -webkit-transform:  scale(1) ;
        -ms-transform:  scale(1) ;
						transform:  scale(1) ;
  }
}
/* オープニング */
/* sugayusuke box*/
.flex-container1 {
	 display: flex;
	 width: 100%;
	 height: auto;
	 flex-direction:row-reverse;
	 }

	 .box {
	 			position: relative;
	 			width:33.333%;
	 			height: auto;
	 			padding-top:33.333%;
	 		  flex-shrink: 0;
	 			background-color: #fff;
	 		  text-align: center;
	 		  }


			.box h2{color: #444;
			   display:block;
				 width:100%;
			   height: auto;
				 font-size:3vw;
				 line-height: 1em;
			   font-family: Verdana;
				 text-indent: 0.1em;
				 white-space: nowrap;
				 position: absolute;
							top:47%;
						  left:50%;
			-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
						  transform: translate(-50%, -50%);
			        }



			.box h3{color: #444;
				 display:block;
			   width:100%;
				 height: auto;
				 font-size:0.9vw;
				 font-family: Verdana;
				 line-height: 1em;
				 letter-spacing: 0.5em;
				 text-indent: 0.1em;
				 white-space: nowrap;
				 position: absolute;
				            top:55%;
				           left:50.5%;
			   -webkit-transform: translate(-50%, -50%);
			       -ms-transform: translate(-50%, -50%);
					       transform: translate(-50%, -50%);
			           }

			.box1 img {
				 display:block;
				 width: 8%;
			   height: auto;
			   position: absolute;
				 top:65%;
				 left:28%;
				 margin-left: 5%;
				 margin-right: 5%;
			   -webkit-transform: translate(-50%, -50%);
			       -ms-transform: translate(-50%, -50%);
					       transform: translate(-50%, -50%);
			           }

			.box2 img {
								 display:block;
								 width: 8%;
								 height: auto;
								 position: absolute;
								 top:65%;
								 left:45%;
								 margin-left: 5%;
								 margin-right: 5%;
								 -webkit-transform: translate(-50%, -50%);
								     -ms-transform: translate(-50%, -50%);
								 		     transform: translate(-50%, -50%);
								         }

			.box3 img {
								 display:block;
								 width: 8%;
								 height: auto;
								 position: absolute;
								 top:65%;
								 left:62%;
								 margin-left: 5%;
								 margin-right: 5%;
								 -webkit-transform: translate(-50%, -50%);
								     -ms-transform: translate(-50%, -50%);
								         transform: translate(-50%, -50%);
												 }

.dummy{
	     position: relative;
       width:33.333%;
       height: auto;
       flex-shrink: 0;
}

#hamburgerbtn {
  display: block;
  position: absolute;
  top: 15%;
  left: 15%;
  -webkit-transform: translate(-15%, -15%);
  -ms-transform: translate(-15%, -15%);
  transform: translate(-15%, -15%);
  background: #000;
  color: #eee;
  border: thin solid #eee;
  padding: 8px 6px 4px;
  cursor: pointer;
  font-family: Arial;
}

#hamburgerbtn span {
  display: block;
  width: 50%;
  height: 1px;
  background: #eee;
  margin-bottom: 8px;
}

#hamburgerbtn span:nth-of-type(3) {
  margin-bottom: 5px;
}

#slidemenu {
	display: none;
	position: fixed;
	top: 0%;
	width: 40%;
	height: 100%;
	background-color:rgba( -5, 15, 25, 0.8 );
	list-style: none;
  z-index: 9998;}

#slidemenu a {
	display: block;
  text-decoration: none;
}
#glay {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.2;
  z-index: 9997;}

.navi{
	position: relative;
	background-color: #000;
	width:33.333%;
	height: auto;
	padding-top:33.333%;
	flex-shrink: 0;
	}

.navi a{
	     display:block;
       width:50%;
	     height: auto;
	     margin:30% 0 0 5%;
			 text-decoration: none;
	     font-family:sans-serif;
	     font-size:3vw;
			 text-indent: 3%;
     	 line-height:2em;
       color:#fff;
			 border:thin solid #eee;
		   z-index: 9999;}

.navi a:hover{
              opacity: 0.7;
             }

		#slideflame {
			display: none;
			position:fixed;
			top: 50%;
			left:0%;
		   	 transform: translate(0%, -50%);
		     -webkit-transform: translate(0%, -50%);
		  	 -ms-transform: translate(0%, -50%);
			width: 90%;
			height: auto;
			margin-left: 5%;
      background:overlay;
			list-style: none;
	    z-index: 9999;}



		#glaylayer {
			position: fixed;
			display: none;
　　　 top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #000;
			opacity: 0.6;
		  z-index: 9998;}


.mainflame{
	padding:56.25% 0 0 0;
	position:relative;
}

.flame{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.flex-container2 {
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
	margin: 0,auto;
	padding-bottom: 5%;
  flex-direction:row;
  justify-content:center;
	align-items: center;
  flex-wrap:wrap;
}

.items{
  width: 33.333%;
  height: auto;
  overflow: hidden;
  align-self: flex-start;
  }


.items img{
	display: flex;
  width:100%;
  height:100%;}


.items .mask{
	width:	100%;
	height:	auto;
	position:	absolute;
	top:			0;
  left:			0;
  opacity:	0;
  background-color:	rgba(0,0,0,0.5);
	-webkit-transition:	all 0.3s ease;
	    -ms-transition:all 0.3s ease;
					transition:all 0.3s ease;
}

.items:hover .mask {
  opacity:1;
  padding-top: 100%;
}

.items:hover img{
  filter: blur(1px);
  -webkit-transform: scale(1.08);
      -ms-transform: scale(1.08);
					transform: scale(1.08);
 	-webkit-transition-duration:0.2s;
	    -ms-transition-duration:0.2s;
          transition-duration:0.2s;}




.caption h6{
	display:block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
	-webkit-transform: translate(-50%, -50%);
    	-ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size:100%;
  font-family: Arial;
  line-height: 1em;
  color: #fff;
  text-align: center;
}

.next{display: block;
	    width: 100%;
			height: auto;
			margin-left: 1%;
      line-height: 3em;}

.next p{text-align: left;
        font-family: Arial black;
        color:#666;
				font-size:4vw;
				line-height:5em;
				}
a{text-decoration:none;}

	.footer{
		     position: absolute;
	       bottom: 0;
       	 width: 100%;
				 height: auto;
	       padding-left: 2%;
	       text-decoration:none;
	       font-family: sans-serif;
	       font-size:1.5vw;
       	 line-height:2em;
	       text-align: left;
	       letter-spacing: 0em;
		     color:#666;}


				 @media screen and (min-width: 1280px){
			 	      .caption h6{font-size:100%;}
			 	                  }
				@media screen and (max-width: 820px) {
							.box h3{letter-spacing: 0.5em;
											text-indent: 1em;}
													}

			 	@media screen and (max-width: 640px) {
			 	      .caption h6{font-size:65%;}

			 				 .box h3{letter-spacing: 0.2em;
								       text-indent: 0.2em;}
			 	                 }

			 	@media screen and (max-width: 480px) {
			 	      .items{margin:0;
			 	             width: 50%;
			 	             height:auto;}

			 	      .box{
			 					position: relative;
			 					width:50%;
			 					height:auto;
			 					padding-top:50%;
			 					}
								.navi {
							    position: relative;
									top: 0%;
								  left: 5%;
							    width: 0%;
							    height: auto;
							  }
								#hamburgerbtn {
								  display: block;
								  position: absolute;
								  top: 10%;
								  left: 10%;
								  -webkit-transform: translate(-15%, -15%);
								  -ms-transform: translate(-15%, -15%);
								  transform: translate(-15%, -15%);
								  background: rgba(0,0,0,0.5);
							    color: #eee;
								  border: thin solid #eee;
								  padding: 4px 3px 2px;
								  cursor: pointer;
								  font-family: Arial;
								}

			 			 .dummy{
			 				 display: none;
			 			    }
			 	     .box h2{font-size:4vw;}
			 		   .box h3{font-size:1.5vw;}

			 		   box2,box3,box4{
			 			  padding-top: 25%;
			 			  width: 16.666%
			 			  }

			 	    .items p{
			 			 font-size: 3vw;
			 		   }}


			 	@media screen and (orientation: landscape) and (max-width: 812px){
			 		.navi a{
			 	          margin:10% 0 0 5%;
			 			     }}