@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html, body, div, span, 
h1, h2, h3, h4, h5, h6, 
p, em, strong, 
ul, ol, li, dl, dt, dd, 
table, th, td {
	margin:				0px;
	padding:			0px;
}

html,body {
	width:				100%;
	font-family:		'Noto Sans Japanese', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
	font-size:			16px;
	font-style:			normal;
	font-weight:		normal;
	line-height:		1.5em;
	text-align:			left;
	color:				#fff;
	word-wrap:			break-word;
	outline:			none;
	background-color:	#000;
	margin: 			0;
	padding: 			0;
	overflow-x: 		hidden;
}

h6,h5,h4,h3,h2,h1 {
	text-align:			center;
}

h1 {font-size:			100%;}
h2 {font-size:			100%;}
h3 {font-size:			100%;}
h4 {font-size:			100%;}
h5 {font-size:			100%;}
h6 {font-size:			100%;}

a {
	text-decoration:	none;
	color: 				#fff;
}

a:hover{
	color: 				#fff;
	text-decoration: 	underline;
}

a:hover img {
	opacity:			0.8;
}

em {
	font-style:			normal;
}

ul,li,ol{
	list-style: 		none;
}

main{
	overflow: 			hidden;
}

/* レスポンシブ対応 */
/* ---------------------------------------------------------------- */
body {
	-webkit-text-size-adjust:	100%;
}

img {
	max-width:			100%;
	height:				auto;
	width /***/:		auto;
}

.txt_right {
	text-align:			right;
}

.txt_left {
	text-align:			left;
}

.txt_center {
	text-align:			center;
}

.large_txt {
	font-size:			125%;
}

.small_txt {
	font-size:			75%;
}

@media all and (max-width: 700px) {	/* 以下 */

}
/* ---------------------------------------------------------------- */

/* clearfix */
/* ================================================================ */
.clearfix:after {
	content:	"";
	display:	block;
	clear:		both;
}

/* 共通 */
/* ---------------------------------------------------------------- */
#wrapper {
	position:	relative;
	width:		100%;
}

.flex_box {
	display:			flex;
	flex-wrap:			wrap;
	justify-content:	space-between;
}

#STORY,#os2020,#HISTORY,#sponsor,#CONTACT,#okiraisummer{
	padding-top: 			10%;
}

.grad{
	background: 			-moz-linear-gradient(65deg, #F13F79, #FFC778); 
	background: 			-webkit-linear-gradient(65deg, #F13F79, #FFC778); 
	background: 			linear-gradient(25deg, #F13F79, #FFC778); 
}

/* ---------------------------------------------------------------- */
.nav{
	width:					100%;
    background: 			#fff100;
    padding-top: 			1%;
    padding-bottom: 		1%;
    margin:			 		auto;
}

.nav li a{
	background:				#fff100;
	width: 					14.2%;
	float: 					left;
	padding:				20px 0;
	text-align: 			center;
	text-decoration:		 none;
	box-sizing: 			border-box;
	font-weight: 			bolder;
}

.fixed {
    position: 				fixed;
    top: 					0;
    width: 					100%;
    z-index: 				10000;
}

@media screen and (max-width: 780px) {
  .nav-button { display: block; }
  .nav-wrap { display: none; }
  .nav-wrap.open { display: block; }
}

@media screen and (max-width: 780px) {
	.nav li a {
		display: block;
		width: 100%;
		padding: 15px 20px;
		text-align: left;
		box-sizing: border-box;
		white-space: nowrap;
	}
}



/* ---------------------------------------------------------------- */
.inner {
	box-sizing:				border-box;
	width:					100%;
	max-width: 				1200px;
	background-color: 		#000;
	margin: 				30px auto 0;
}

/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
.header-bg {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.header-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.contentbox{
	margin-top: 		30%;
	margin-bottom: 		30%;
}

.contentbox span{
	font-family: 		"Bookman Old Style";
	font-weight: 		bolder;
	font-size: 			35px;
}

.contentbox p{
	padding-top: 		30px;
	padding-bottom: 	30px;
	font-family:		 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#STORY{
	background-image: 		url(../images/back2.png);
	background-repeat: 		no-repeat;
	min-height: 			400px;
	background-position: 	bottom right;
	background-size: 		contain;
}

#STORY p,
#okiraisummer p{
	line-height: 			2em;
	padding-left: 			120px;
}

#okiraisummer{
	background-image: 		url(../images/back3.png);
	background-repeat: 		no-repeat;
	min-height: 			600px;
	background-position: 	bottom right;
}

.time, .artist{
	padding-top: 			30%;
}

.flex {
	width: 						100%;
	display: 					flex;
	display: 					-webkit-box;
	display: 					-moz-box;
	display: 					-webkit-flexbox;
	display: 					-moz-flexbox;
	display: 					-ms-flexbox;
	display: 					-webkit-flex;
	display: 					-moz-flex;
	display: 					flex;
	-webkit-box-lines: 			multiple;
	-moz-box-lines: 			multiple;
	-webkit-flex-wrap: 			wrap;
	-moz-flex-wrap:				wrap;
	-ms-flex-wrap: 				wrap;
	flex-wrap:				 	wrap;
	-webkit-justify-content: 	space-around;
	justify-content: 			space-around;
	padding-top: 				20px;
}

.artist_block{
	width: 						45%;
	padding-top: 				2%;
	padding-bottom: 			2%;
}

.artist_block p{
	font-size: 					95%;
}

.artist_block img{
	width: 						100%;
}

.artist_photo{
	padding-top: 57.5%;
	background-repeat: 			no-repeat;
	background-position: 		center center;
	background-size: 			contain;
	/*background-size: 			cover;*/
}



.bold{
	font-weight: 				bolder;
	text-align: 				center;
	margin-top: 				2%;
}

.over{
	overflow-y: 				scroll;
	height: 					300px;
}

::-webkit-scrollbar {
    -webkit-appearance: 		none;
    width: 						7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 				4px;
    background-color: 			rgba(255,255,255,.5);
    box-shadow: 				0 0 1px rgba(255,255,255,.5);
}

.artist_block p{
	padding-top: 				0;
}

.contentbox table,.table_p{
	margin: 				30px auto;
}

.contentbox table th,.table_p{
	padding-right: 			20px;
}

.contentbox table tr,.table_p{
	line-height: 			2.5em;
}

.w800{
	max-width: 				800px;
	width: 					100%;
}

footer small{
	text-align: 			center;
	color: 					#fff;
	display: 				block;
	padding-bottom: 		5%;
}

#osyear li{
	display: 				inline-block;
	width: 					23%;
	padding-right: 			1em;
}


#HISTORY ul {
	list-style:	 			none;
	display: 				flex;
}

#HISTORY li {
	text-align:			 	center;
	width: 					100%;
	padding: 				10px 0;
	background-color:		#000;
	color:					#fff;
	cursor: 				pointer;
}

#HISTORY li:hover {
	background-color: 		#fff100;
}

.year10 div{
	display: 				table-cell;
}

.osimg{
	display: 				flex;
	flex-wrap: 				wrap;
	justify-content: 		space-between;
}

.osimg div{
	width: 					50%;
}

.window {
	width: 					100%;
	height: 				800px;
	overflow: 				hidden;
	position: 				relative;
}

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

.default {
	width: 					100%;
	height: 				800px;
	position: 				absolute;
	top:					0;
}

.one {
	left: 					0;
	text-align: 			center;
}

.two {
	left: 					100%;
}

.three {
	left: 					200%;
}

.four {
	left: 					300%;
}

.five {
	left: 					400%;
}

.six {
	left: 					500%;
}

.map{
	position: 				relative;
	padding-bottom: 		56.25%;
	padding-top: 			30px;
	height: 				0;
	overflow:				 hidden;
}

.map iframe,
.map object,
.map embed {
	position: 				absolute;
	top: 					0;
	left: 					0;
	width: 					100%;
	height: 				100%;
}


/*NEWS*/
.newsbox {
    position: 				relative;
    margin: 				2em 0;
    padding: 				2em 1em;
    border: 				solid 3px #fff;
    border-radius: 			8px;
}
.newsbox .newsbox-title {
    position: 				absolute;
    display: 				inline-block;
    top: 					-13px;
    left: 					10px;
    padding: 				0 9px;
    line-height: 			1;
    font-size: 				19px;
    background:		 		#000;
    color: 					#fff;
    font-weight: 			bold;
}
.newsbox p {
    margin: 				0; 
    padding: 				0;
}

/*st*/
.st{
	padding: 				10% 0;
}


/*goods*/
.goods{
	text-align: 			center;
	padding: 				5% 0;
}

.goods img{
	padding-top: 			5%;
}


@media (max-width:930px){
	.header-bg{
		background-size: 	contain;
	}
}

@media (max-width:680px){
	body{
		width: 				96%;
		margin: 			auto;
	}

	#STORY p, #okiraisummer p {
		padding-left: 		0;
	}

	.contentbox span {
		font-size: 			30px;
	}

	.window {
		height: 			325px;
	}

	th,td {
		display: 			block;
		text-align: 		left;
		width: 				100%;
	}

	td{
		padding-left: 		2em;
	}

	.contentbox table{
		margin: 			0px;
	}
}

.nav-button {
  display: none;
}

.nav-wrap.open {
  display: block;
}

.nav-wrap.close {
  display: none;
}

.hanabi{
	margin: 			auto;
	width: 				100%;
	max-width: 			560px;
}

.box30 {
    margin: 2em 0;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-size: 1.2em;
    background: #5fc2f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
    color: 000;
}

@media screen and (min-width: 781px) {
  .nav-wrap {
    display: block !important;
  }
}

.content {
  padding: 20px;
}

video{
	max-width: 			100%;
}

.goods img{
	width: 				100%;
	max-width: 			500px;
}

.box_tshirt {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}

.box_tshirt .box-title {
	position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_tshirt p {
    margin: 0; 
    padding: 0;
}


@media screen and (max-width: 780px) {

	.nav{
		display: 				block;
		width: 					100%;

	}

	.nav li{
		text-align: 			right;
		line-height: 			2.5em;
	}

	.nav-button {
		display:		 		block;
		cursor: 				pointer;
		margin-top: 			2%;
	}

	.nav-wrap {
		position: 						fixed;
		left:						 	0;
		top: 							0;
		display: 						none;
		z-index: 						10;
		background-color: 				rgba(0, 0, 0, 0.7);
		width: 							100%;
		height: 						100%;
			.nav {
			height: 					100%;
			position: 					relative;
			overflow-x: 				hidden;
			overflow-y: 				auto;
			}
			li {
			display: 					block;
			margin: 					2em;
				a {
					color:				 #fff;
					font-size: 			18px;
				}
			}
	}

	/*メニューボタンのエフェクト*/
	.nav-button,
	.nav-button span {
		display: 						inline-block;
		transition: 					all 0.4s;
		box-sizing:			 			border-box;
	}

	.nav-button {
		z-index: 						20;
		position: 						relative;
		width: 							40px;
		height: 						36px;
	}

	.nav-button span {
		position: 					absolute;
		left: 						0;
		width:		 				100%;
		height:	 					4px;
		background-color: 			#fff;
		border-radius: 				4px;
	}

	.nav-button span:nth-of-type(1) {
		top: 						0;
	}

	.nav-button span:nth-of-type(2) {
		top: 			16px;
	}
	.nav-button span:nth-of-type(3) {
		bottom: 			0;
	}

	.nav-button.active span:nth-of-type(1) {
		-webkit-transform: 			translateY(16px) rotate(-45deg);
		transform: 					translateY(16px) rotate(-45deg);
	}

	.nav-button.active span:nth-of-type(2) {
		opacity: 				0;
	}

	.nav-button.active span:nth-of-type(3) {
		-webkit-transform: 			translateY(-16px) rotate(45deg);
		transform: 					translateY(-16px) rotate(45deg);
	}

	.artist_block{
		width:				98%;
	}
}