@charset "utf-8";
HTML, BODY, HEADER, ARTICLE, SECTION{
	margin : 0px;
	padding : 0px;
}

A{
	font-size : 1.0em;
}

BODY{
	font-family: "Yu Gothic", YuGothic, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo ;
	line-height: 1.6 !important;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(255, 176, 0, .1);
    position: relative;
}

*{
	font-size: 16px;
	/*transition: 0.2s ease-in-out;*/
    text-size-adjust: 100%;
	-webkit-text-size-adjust:100%;
}

@media all and (-ms-high-contrast:none) {
  body{
    font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  }
}

p,a,li{
	color: #3e3a39;
}

.clearFix:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}
.clearFix { display: inline-block; }
.clearFix { display: block; }



/* PROGESS */

#progress{
	top : 0px;
	left : 0px;
	width : 100vw;
	height : 100vh;
	text-align : center;
	background-color : #FFFFFF;
	position : fixed;
	z-index : 10000;
}
#progress.hide{
	opacity : 0;
	transition-duration : 1.0s;
}
#progress IMG{
	margin : 48vh 0px 0px 0px;
}



/*------------------------------
	Article
------------------------------*/

ARTICLE{
}
ARTICLE SECTION.event{
	position : relative;
	margin : 0px 0px 32px 0px;
	padding : 0px 0px 0px 0px;
	width : 100%;
	height : 400px;
	max-height : 56.25vw;
	border-width : 5px 0px 0px 0px;
	border-style : solid;
	border-color : #666666;

	transition-duration : 0.3s;
	opacity : 1.0;
}
ARTICLE SECTION.event:first-of-type{
	border : none;	
}
ARTICLE SECTION.event:after {
	position	: absolute;
	bottom		: 0;
	left		: 0;
	width		: 100%;
	height		: 80px;
	z-index		: 19;
	content		: '';
	background	: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 30%, rgba(255, 255, 255, 1) 100%);
	transition-duration : 1.0s;
}
ARTICLE SECTION.event H2{
	position	: absolute;
	left		: 12px;
	bottom		: 0px;
	z-index		: 20;
	width		: 78px;
	height		: 30px;
	margin		: 0px 0px 0px 12px;
	padding		: 24px 0px 24px 0px;
	border-width		: 1px 1px 1px 1px;
	border-color 		: #CCCCCC;
	border-radius		: 100px 100px 100px 100px;
	background-color	: rgba(0, 0, 0, 0.8);
	font-size	: 20px;
	text-align	: center;
}
ARTICLE SECTION.event H2 A{
	color		: #FFFFFF;
}
ARTICLE SECTION.event P.dates,
ARTICLE SECTION.event P.artists,
ARTICLE SECTION.event P.permanentURL{
	position	: absolute;
	font-family	: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;	
	bottom		: 0px;
	padding		: 0px 48px 0px 128px;
	z-index		: 20;
}
ARTICLE SECTION.event H2 A,
ARTICLE SECTION.event P.dates A,
ARTICLE SECTION.event P.artists A,
ARTICLE SECTION.event P.permanentURL A{
	text-decoration : none;
}

ARTICLE SECTION.event P.dates{
	left		: 0px;
	margin		: 0px 0px 0px 0px;
	font-size	: 24px;
	line-height : 1;
}
ARTICLE SECTION.event P.dates SPAN{
	font-size : 0.6em;
}
ARTICLE SECTION.event P.artists{
	right		: 0px;
	margin		: 0px 0px 8px 0px;
	padding		: 0px 32px 0px 128px;
	font-weight : bold;
	white-space : nowrap;
}
ARTICLE SECTION.event P.permanentURL{
	font-size : 0.8em;
	right		: 0px;
	margin		: 0px 0px -8px 0px;
	padding		: 0px 32px 0px 128px;
	font-weight : bold;
	white-space : nowrap;
}

@media (max-width : 750px){
	ARTICLE SECTION.event H2{
		left		: 12px;
		width		: 36px;
		height		: 15px;
		margin		: 0px 0px 0px 0px;
		padding		: 12px 0px 12px 0px;
		border-width		: 1px 1px 1px 1px;
		border-color 		: #CCCCCC;
		border-radius		: 100px 100px 100px 100px;
		background-color	: rgba(0, 0, 0, 0.8);
		color		: #FFFFFF;
		font-size	: 10px;
		text-align	: center;
	}
	ARTICLE SECTION.event P.dates,
	ARTICLE SECTION.event P.artists{
		left		: 0px;
		padding		: 0px 48px 0px 64px;
	}
	ARTICLE SECTION.event P.dates{
		font-size	: 18px;
		line-height : 1;
	}
	ARTICLE SECTION.event P.dates SPAN{
		font-size : 0.6em;
	}
	ARTICLE SECTION.event P.artists{
		left : 0px;
		font-size	: 0.6em;
		margin		: 0px 0px -20px 0px;
	}
	ARTICLE SECTION.event P.permanentURL{
		display : none;
	}
}

/* ボタン */
BODY.pc ARTICLE SECTION.event DIV.btnPage A.detailBtn{
	margin-top : 4px;
	opacity : 0.0;

	transition-duration : 0.3s;
}
BODY.pc ARTICLE SECTION.event DIV.btnPage A.archiveBtn{
	margin-top : 4px;
	opacity : 0.0;

	transition-duration : 0.3s;
}
BODY.pc ARTICLE SECTION.event:hover DIV.btnPage A.detailBtn{
	margin-top : 0px;
	opacity : 0.95;

	transition-duration : 0.3s;
}
BODY.pc ARTICLE SECTION.event:hover DIV.btnPage A.archiveBtn{
	margin-top : 0px;
	opacity : 0.95;

	transition-delay : 0.1s;
	transition-duration : 0.3s;
}

DIV.btnPage{
	position : absolute;
	width : 100%;
	height : 100px;
	top : 50%;
	left : 0px;
	z-index : 6;
	text-align : center;
	opacity : 0.95;

	transition-duration : 0.3s;
}
DIV.btnPage A.detailBtn,
DIV.btnPage A.archiveBtn{
	display : inline-block;
	margin : 0px 16px 0px 16px;
	padding : 4px 4px 4px 4px;
	width : 8em;
	border-radius : 4px 4px 4px 4px;
	border-color : #EEEEEE;
	border-style : solid;
	border-width : 1px 1px 1px 1px;
	color : #EEEEEE;
	background-color : rgba(255, 0, 255, 0.4);
	text-decoration : none;
	font-family	: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;	
	font-size : 0.8em;
	letter-spacing : 1px;
}
DIV.btnPage A.detailBtn:hover,
DIV.btnPage A.archiveBtn:hover{
	opacity : 0.8;
}


A.returnFrontBtn{
	position : fixed;
	display : none;
	width : 30px;
	top : 16px;
	right : 0px;
	z-index : 20;
	margin : 0px 16px 0px 16px;
	padding : 2px 2px 0px 2px;
	border-radius : 24px 24px 24px 24px;
	border-color : #EEEEEE;
	border-style : solid;
	border-width : 1px 1px 1px 1px;
	color : #EEEEEE;
	background-color : rgba(255, 0, 255, 0.4);
	text-decoration : none;
	font-family	: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;	
	font-size : 1.2em;
	font-weight : bold;
	text-align : center;
}
A.returnFrontBtn:hover{
	opacity : 0.4;
}

ARTICLE SECTION.showDetail .returnFrontBtn,
ARTICLE SECTION.showArchive .returnFrontBtn{
	display : block;
	opacity : 0.8;
}


@media (max-width : 750px){
	DIV.btnPage A.detailBtn,
	DIV.btnPage A.archiveBtn{
		font-size : 0.6em;
	}
}


/* 表紙 */
ARTICLE SECTION.event DIV.frontPage{
	position	: absolute;
	width		: 100%;
	height		: 100%;
	opacity		: 1.0;

	transition-duration : 1.0s;
}
BODY.pc ARTICLE SECTION.event:not(.showDetail):hover DIV.frontPage{
}

/* Detail */
ARTICLE SECTION.event .detailPage{
	position	: relative;
	width		: auto;
	height		: 100%;
	margin		: 0px 0px 0px 0px;
	padding		: 32px 32px 32px 32px;
	opacity		: 0.0;
	z-index		: 16;
	visibility 	: hidden;
	overflow : hidden;

	transition-duration : 1.0s;
}


ARTICLE SECTION.event DIV.detailPage H3{
	margin : 0px 0px 8px 212px;
	padding : 0px 0px 0px 0px;
	clear : both;
}
ARTICLE SECTION.event DIV.detailPage P.body{
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 32px 212px;
	font-size : 0.8em;
}
ARTICLE SECTION.event DIV.detailPage FIGURE{
	display : inline-block;
	margin : -32px 12px 40px 0px;
	width : 200px;
	height : auto;
	float: left;
}
ARTICLE SECTION.event DIV.detailPage FIGCAPTION{
	margin : -8px 0px 0px 0px;
	text-align : right;
	font-size : 0.7em;
}
ARTICLE SECTION.event DIV.detailPage FIGURE IMG{
	width : 200px;
	height : auto;
	border-radius : 4px;
}
ARTICLE SECTION.event DIV.detailPage P SPAN.imageCaption{
	margin : 0px 0px 0px -212px;
	float: left;
}
ARTICLE SECTION.event .detailPage P.lead{
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 48px 0px;
	font-size : 0.8em;
}
ARTICLE SECTION.event .detailPage P.lead A{
	font-size : 0.9em;
}

ARTICLE SECTION.showDetail DIV.btnPage,
ARTICLE SECTION.showDetail DIV.archivePage{
	transition-duration : 1.0s;
	opacity : 0.0;
	display : none;
}
ARTICLE SECTION.showDetail{
	height : 100%;
	max-height : 10000px;
	padding : 0px 0px 80px 0px;

	transition-duration : 1.0s;
}
ARTICLE SECTION.showDetail DIV.detailPage{
	opacity : 1.0;
	visibility 	: visible;

	transition-delay : 1.0s;
	transition-duration : 1.0s;
}
ARTICLE SECTION.showDetail DIV.frontPage{
	transition-duration : 1.0s;
	opacity : 0.1;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}

@media (max-width : 750px){
	ARTICLE SECTION.event .detailPage{
		padding		: 32px 16px 16px 16px;
		opacity		: 0.0;
		z-index		: 3;
		visibility 	: hidden;
	
		transition-duration : 1.0s;
	}
	ARTICLE SECTION.event DIV.detailPage H3{
		margin : 0px 0px 0px 0px;
		padding : 16px 0px 0px 0px;
	}
	ARTICLE SECTION.event DIV.detailPage P.body{
		padding-left : 0px;
		padding-bottom : 16px;
	}
	ARTICLE SECTION.event DIV.detailPage P.lead{
		font-size : 0.8em;
		margin : 0px 0px 0px 0px;
		padding : 0px 0px 16px 0px;
	}
	ARTICLE SECTION.event DIV.detailPage FIGURE{
		width : 100%;
		margin : 0px 0px 0px 0px;
		padding : 0px 0px 0px 0px;
	}
	ARTICLE SECTION.event DIV.detailPage FIGCAPTION{
		margin : -16px 0px 8px 0px;
	}
	ARTICLE SECTION.event DIV.detailPage FIGURE IMG{
		margin : 0px 0px 12px 0px;
		width : 100%;
		height : auto;
		float: none;
	}
	ARTICLE SECTION.showDetail DIV.frontPage{
		opacity : 0.0;
		width : 100vw !important;
		height : auto;

		transition-duration : 0.5s;
	}
	ARTICLE SECTION.event{
		transition-delay : 0s;
	}
	ARTICLE SECTION.showDetail{
		transition-duration : 0.3s;
		transition-delay : 0.3s;
	}
}


/* Archive */
ARTICLE SECTION.event .archivePage{
	position	: absolute;
	top			: 0px;
	left		: 0px;
	width		: 100%;
	height		: 100%;
	opacity		: 0;
	z-index		: 16;
	visibility 	: hidden;
}

ARTICLE SECTION.event .archivePage .slider DIV,
ARTICLE SECTION.event .archivePage .slider IFRAME,
ARTICLE SECTION.event .archivePage .slider IMG{
	height : calc(56.25vw - 12px);
}
ARTICLE SECTION.event .archivePage .slider IFRAME{
	width : 100%;
}
ARTICLE SECTION.showArchive{
	height : calc(56.25vw + 50px);
	max-height : calc(56.25vw + 50px);
	transition-duration : 1.0s;
}
ARTICLE SECTION.showArchive:after {
	opacity : 0;
}
ARTICLE SECTION.showArchive DIV.btnPage,
ARTICLE SECTION.showArchive DIV.detailPage{
	transition-duration : 1.0s;
	opacity : 0.0;
	display : none;
}
ARTICLE SECTION.showArchive DIV.archivePage{
	opacity : 1.0;
	visibility 	: visible;

	transition-delay : 1.0s;
	transition-duration : 1.0s;
}
ARTICLE SECTION.showArchive DIV.frontPage{
	height : calc(100% - 100px);
	transition-duration : 1.0s;
	opacity : 0.1;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
ARTICLE SECTION.showArchive H2{
	transition-duration : 1.0s;
	bottom : 12px;
}


/*------------------------------
	header
------------------------------*/
HEADER {
	position : absolute;
	top : 0px;
	height: 50px;
	width : 100%;
	vertical-align : top;
	z-index : 15;
	padding : 0px 0px 0px 0px;
	color : #000000;
	opacity : 1;
	background	: linear-gradient(to bottom left, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0) 100%);
}

HEADER.hidden{
	opacity : 0;
	transition-duration : 1.0s;
}
HEADER H1{
	position : absolute;
	right : 0px;
	top : 8px;
	text-align : right;
	vertical-align : middle;
	margin : 0px 12px 0px 0px;
	line-height : 0.9;
}
HEADER H1 SPAN{
	font-size : 8px;
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
}
HEADER H2{
	display : inline-block;
	margin : 6px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
	font-size : 12px;
}

/* NAV */
NAV{
	display : none;
	position : fixed;
	right : 0px;
	top : 80px;
	z-index : 4;
	background-color : rgba(255, 255, 255, 0.8);
}
NAV UL{
	vertical-align : top;
	margin : 0px 12px 0px 4px;
	padding : 0px 0px 0px 0px;
}
NAV LI{
	display : block;
	text-align : right;
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
	line-height : 1;
}
NAV LI A SPAN{
	font-size : 8px;
	display : inline-block;
	text-align : center;
	width : 16px;
	color : #000000;
	font-weight : bold;
	line-height : 1;
}
NAV LI A {
	text-decoration : none;
	font-size : 14px;
	color:#F0F;
}


/*------------------------------
	footer
------------------------------*/
FOOTER{
	position : fixed;
	bottom : 0px;
	left : 0px;
	width : 100%;
	background-color : rgba(255,255,255,0.95);
}
FOOTER P{
	display : inline-block;
	font-size : 10px;
	vertical-align : middle;
	padding : 0px 0px 0px 8px;
}