@charset "utf-8";
/* CSS Document */
/*--------------------------------------------------------------
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

【PC・SP用】#破天荒専用

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
----------------------------------------------------------------*/

body{
background-image: url("../img/puma/005-subtle-light-patterns.jpg")!important;
background-repeat: repeat;
font-family: 'Noto Sans JP', sans-serif;
}

#jump_1,#jump_2,#jump_3,#jump_4,#jump_5,#jump_6{
	margin-top: -85px;
	padding-top: 85px;
}

#base{
position: relative;
	max-width: 1400px;
width: 94%;
height: 400px;
margin: 100px auto;
	 -moz-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

#base h2{
font-size: 2.8em;
text-align: left;
font-weight: 900;
font-family: 'Noto Sans JP', sans-serif;
margin: 50px auto;

}


h3{
	writing-mode: vertical-rl;
	position: fixed;
	font-size: 12.5em;
	right: 25%;
	bottom: 0%;
	color: rgba(0,0,0,0.08);
   z-index: -1;
	height: 800px;
	overflow: hidden;
}

main{
height: 100%;

}

#cont{
margin: 10% auto;
	max-width: 1200px;
}

#cont img{
	width: 100%;

}

#cont ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#cont ul li{
	width: 30%;
	margin: 1.5%;
	position: relative;

}

#cont ul li a{
	display: block;
}

#cont ul li p{
	position: absolute;
	color: #FFF;
	font-weight: 900;
	font-size: 1.1em;
	width: 60%;
	text-align: center;
	padding: 5px 20px;
	right: -2%;
	bottom: 1%;
	margin: auto;
	background: rgba(0,0,0,1);
	 -moz-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
	z-index: 2;
}

#cont ul li a img:hover{
    box-shadow:15px 15px 0px rgba(0,0,0,0.5);
		transition-duration: 0.3s;	/*変化に掛かる時間*/

}

h4{
	font-size: 3em;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	margin: 8% auto 1.5%;

}

h6{
	font-size: 1.5em;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	margin: 3% auto 0%;

}
	
h6 span{
	display: block;	
	font-size: 2em!important;
	font-size: 0.9em;
}

h5{
	font-size: 3em;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	margin: 1% auto;

}

h5::before{
	display: block;
	content: "×";
	font-size: 2.3em;
}

section{
	max-width: 1200px;
	margin: 0px auto;
}
.movie{
	display: block;
	margin: 0px auto;
	width: 100%;
	max-width: 1200px;
}



.item img{
	display: block;
	margin: 0% auto;
	width:30%;
  background: #FFF;
}


@media screen and (max-width:480px){
	
#base{
	position: relative;
	left: 1.5%;
width:93%;
height: auto;
margin: 12% auto;
	 -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}	
	
#base h2{
font-size: 1.5em;
text-align: left;
font-weight: 900;
font-family: 'Noto Sans JP', sans-serif;
margin: 0px auto;
	padding: 15px;
}

h3{
	writing-mode: vertical-rl;
	position: fixed;
	font-size: 8em!important;
	right: 3%!important;
	bottom: -30%!important;
	color: rgba(0,0,0,0.08);
   z-index: -1;
   
}
	
	
#cont ul li{
	width: 90%;
	margin: 5% auto; 
	position: relative;

}

#cont ul li a{
	display: block;
}

#cont ul li p{
	position: absolute;
	color: #FFF;
	width: 50%!important;
	font-weight: 900;
	font-size: 0.85em;
	text-align: center;
	padding: 10px 5px!important;
	right: -3%;
	bottom: -5%;
	margin: auto;
	background: rgba(0,0,0,1);
	 -moz-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
	z-index: 2;
}	
	


h4{
	font-size: 1.8em;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	margin: 8% auto 1.5%;

}
h6{
	font-size: 1em;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	margin: 8% auto 0%;
}
	
h6 span{
	font-size: 1.5em;
	display: block;
	font-size: 0.9em;
}

h5{
	font-size: 1.5em;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	margin: 1.5% auto;
}

h5::before{
	display: block;
	content: "×";
	font-size: 1.9em;
}
.item img{
	display: block;
	margin: 0% auto;
	width:80%;
  background: #FFF;
}	
	

}

@media screen and (min-width:481px) and (max-width:768px){
#base h2{
font-size: 2em;
text-align: left;
font-weight: 900;
font-family: 'Noto Sans JP', sans-serif;
margin: 50px auto;

}	
	
#cont ul li{
	width: 47%!important;
	margin: 3% auto; 
	position: relative;

}		
}