@charset "utf-8";

/** HomeVisual **/

.pj-homeVisual {
	background-color:#FFF;
	position:relative;
	display:block;
	width:100%;
	overflow:hidden;
}
.pj-homeVisual img {
	margin:auto;
	display:block;
}
.pj-homeVisual::before {
	background:url( "../img/index/bg_visual.jpg" ) top center / cover no-repeat;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
	content:"";
}
.pj-homeVisual__inner {
	padding-top:calc( 940 / 1200 * 100% ); /** based ratio 1200x940 **/
	position:relative;
	display:block;
	width:100%;
}
.pj-homeVisual__title {
	margin:auto;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1;
	display:block;
	width:calc( 640 / 1200 * 100% );
	height:calc( 800 / 940 * 100% );
}
.pj-homeVisual__announce {
	position:absolute;
	top:calc( 230 / 940 * 100% );
	left:calc( 800 / 1200 * 100% );
	z-index:1;
	display:block;
	width:calc( 380 / 1200 * 100% );
	height:calc( 250 / 940 * 100% );
}
.pj-homeVisual__announceButton {
	display:block;
	width:100%;
	height:100%;
}
.pj-homeVisual__announce + .pj-homeVisual__overview { top:calc( 400 / 940 * 100% ); }
.pj-homeVisual__overview {
	background:url( "../img/index/bg_visual_overview_map.png" ) center center / contain no-repeat;
	padding:calc( 70 / 940 * 100% ) calc( 220 / 1200 * 100% ) 0 calc( 200 / 1200 * 100% );
	position:absolute;
	top:calc( 240 / 940 * 100% );
	left:calc( 620 / 1200 * 100% );
	z-index:0;
	display:block;
	width:calc( 780 / 1200 * 100% );
	height:calc( 600 / 940 * 100% );
}
.pj-homeVisual__overviewText {
	margin:auto;
	display:block;
}
.pj-homeVisual__enikki {
	background:url( "../img/index/bg_visual_enikki.png" ) top center / contain no-repeat;
	position:absolute;
	top:calc( 200 / 940 * 100% );
	right:calc( 820 / 1200 * 100% );
	z-index:0;
	display:block;
	width:calc( 600 / 1200 * 100% );
	height:calc( 600 / 940 * 100% );
}

@media screen and ( min-width:1200px ) {
	.pj-homeVisual__inner {
		padding-top:0;
		height:940px;
	}
}
@media screen and ( max-width:767px ) {
	.pj-homeVisual::before { background-image:url( "../img/index/bg_visual@sp.jpg" ); }
	.pj-homeVisual__inner {
		padding-top:calc( 60 / 840 * 100% );
		padding-bottom:calc( 60 / 840 * 100% );
	}
	.pj-homeVisual__title {
		position:relative;
		width:calc( 640 / 840 * 100% );
		height:auto;
	}
	.pj-homeVisual__announce {
		margin:calc( 40 / 840 * 100% ) auto auto;
		position:relative;
		top:0;
		left:0;
		right:0;
		width:calc( 620 / 840 * 100% );
		height:auto;
		max-width:360px;
	}
	.pj-homeVisual__overview {
		margin:auto;
		padding:calc( 50 / 840 * 100% ) calc( 100 / 840 * 100% ) calc( 120 / 840 * 100% );
		position:relative;
		top:0;
		left:0;
		right:0;
		width:calc( 780 / 840 * 100% );
		height:auto;
	}
	.pj-homeVisual__enikki {
		margin:auto;
		background-image:url( "../img/index/bg_visual_enikki@sp.png" );
		top:0;
		left:0;
		right:0;
		width:calc( 820 / 840 * 100% );
		height:100%;
	}
}

/** home visual tween **/

.pj-homeVisual--tween::before                  { animation:hv-fade-in 0.8s cubic-bezier( 0.215, 0.610, 0.355, 1.000 ) 0.0s normal both, hv-zoom-out    0.8s cubic-bezier( 0.215, 0.610, 0.355, 1.000 ) 0.0s normal both; }
.pj-homeVisual--tween .pj-homeVisual__title    { animation:hv-fade-in 0.8s cubic-bezier( 0.215, 0.610, 0.355, 1.000 ) 0.5s normal both, hv-slide-in-up 0.8s cubic-bezier( 0.215, 0.610, 0.355, 1.000 ) 0.5s normal both; }
.pj-homeVisual--tween .pj-homeVisual__enikki   { animation:hv-fade-in 1.0s cubic-bezier( 0.215, 0.610, 0.355, 1.000 ) 1.0s normal both; }
.pj-homeVisual--tween .pj-homeVisual__overview { animation:hv-fade-in 1.0s cubic-bezier( 0.215, 0.610, 0.355, 1.000 ) 1.4s normal both; }
.pj-homeVisual--tween .pj-homeVisual__announce { animation:hv-fade-in 1.0s cubic-bezier( 0.215, 0.610, 0.355, 1.000 ) 2.0s normal both, hv-zoom-in     0.8s cubic-bezier( 0.215, 0.610, 0.355, 1.000 ) 2.0s normal both, hv-float 4.0s linear 2.8s infinite; }

@keyframes hv-fade-in {
	from { opacity:0; }
	to   { opacity:1; }
}
@keyframes hv-zoom-in {
	from { transform:scale(  90% ); }
	to   { transform:scale( 100% ); }
}
@keyframes hv-zoom-out {
	from { transform:scale( 110% ); }
	to   { transform:scale( 100% ); }
}
@keyframes hv-slide-in-up {
	from { transform:translateY( 40px ); }
	to   { transform:translateY( 0 ); }
}
@keyframes hv-float {
	  0% { transform:translateY( 0 ); }
	 25% { transform:translateY( -10px ); }
	 50% { transform:translateY( 0 ); }
	 75% { transform:translateY(  10px ); }
	100% { transform:translateY( 0 ); }
}

/** HomeNews **/

.pj-homeNews {
	padding-top:60px;
	padding-bottom:60px;
	background-color:#FFF;
}
.pj-homeNews__inner {
	display:flex;
	width:100%;
}
.pj-homeNews__title {
	margin:0 40px 0 0;
	display:block;
	width:145px;
}
.pj-homeNews__list {
	margin:0;
	padding-left:0;
	border:solid #C9C9CA;
	border-width:1px 0;
	display:block;
	max-height:30.0em;
	overflow-y:auto;
	list-style:none;
	line-height:1.8;
	font-size:1.8rem;
}
.pj-homeNews__list > :nth-child(n+2) { border-top:1px solid #C9C9CA; }
.pj-homeNews__item {
	padding:1.0em 0.5em;
	display:block;
}
.pj-homeNews__item--expired a {
	text-decoration:none;
	pointer-events:none;
}
.pj-homeNews__item--expired .pj-homeNews__tag,
.pj-homeNews__tag:not(a) {
	border-color:#333;
	box-shadow:none;
}
.pj-homeNews__item--expired .pj-homeNews__tag::before,
.pj-homeNews__tag:not(a)::before { content:none; }
.pj-homeNews__meta {
	margin-bottom:0.2em;
	display:flex;
	align-items:center;
}
.pj-homeNews__date {
	padding-right:1.0em;
	display:block;
	white-space:nowrap;
}
.pj-homeNews__tags {
	position:relative;
	top:-1px;
	display:block;
}
.pj-homeNews__tag {
	padding:0.2em 1.0em;
	border-radius:10px;
	border:1px solid #000;
	background-color:#FFF;
	box-shadow:1px 1px 0 #333;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	line-height:1.4;
	text-align:left;
	text-decoration:none;
	font-size:80%;
	color:#000;
}
.pj-homeNews__tag::before {
	margin-right:0.3em;
	border:solid transparent;
	border-width:4px 0 4px 6px;
	border-left-color:#000;
	display:block;
	width:0;
	height:0;
	content:"";
}
.pj-homeNews__tag--ceremony        { background-color:#8FF577; }
.pj-homeNews__tag--oubo            { background-color:#FF9191; }
.pj-homeNews__tag--gallery         { background-color:#FFAF3C; }
.pj-homeNews__tag--exhibition      { background-color:#FBF43D; }
.pj-homeNews__tag--exhibition-past { background-color:#FDBDD6; }
.pj-homeNews__tag--education       { background-color:#CFB3F2; }
.pj-homeNews__tag--news            { background-color:#95DBF8; }
.pj-homeNews__tag--others          { background-color:#F7F0C4; }
.pj-homeNews__data { display:block; }
.pj-homeNews__data > :first-child { margin-top:0; }
.pj-homeNews__data > :last-child  { margin-bottom:0; }

@media screen and ( min-width:768px ) {
	.pj-homeNews__title { flex:none; }
	.pj-homeNews__list { flex:1; } /** IE **/
}
@media screen and ( max-width:767px ) {
	.pj-homeNews {
		padding-top:30px;
		padding-bottom:30px;
	}
	.pj-homeNews__inner { flex-direction:column; }
	.pj-homeNews__title {
		margin-left:auto;
		margin-right:auto;
		width:120px;
	}
	.pj-homeNews__list { font-size:1.5rem; }
}

/** HomeAbout **/

.pj-homeAbout {
	padding-top:60px;
	padding-bottom:60px;
	background:#9CF4F1 url( "../img/index/bg_about.jpg" ) top center / contain no-repeat;
}
.pj-homeAbout__summary { position:relative; }
.pj-homeAbout__summary > * { width:calc( 100% / 2 - 20px ); }
.pj-homeAbout__heading {
	margin-top:0;
	margin-bottom:1.0em;
	line-height:1.8;
	font-size:2.4rem;
}
.pj-homeAbout__text {
	margin-top:2.0em;
	margin-bottom:0;
	line-height:2.0;
}
.pj-homeAbout__more { margin-top:2.0em; }
.pj-homeAbout__bottom {
	margin-top:20px;
	padding-left:calc( 260 / 1200 * 100% );
	position:relative;
	display:block;
}
.pj-homeAbout__bottom::before {
	background:url( "../img/index/bg_about_bottom_map.png" ) top left / contain no-repeat;
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:calc( 440 / 1200 * 100% );
	height:100%;
	content:"";
}
.pj-homeAbout__catchphrase {
	margin:0 auto;
	padding-top:40px;
	padding-bottom:20px;
	position:relative;
	display:block;
	text-align:center;
	line-height:1.8;
	font-size:2.4rem;
}

@media screen and ( min-width:768px ) {
	.pj-homeAbout__summary { margin-top:-60px; }
	.pj-homeAbout__summary > .pj-media__body { padding-top:40px; }
}
@media screen and ( max-width:767px ) {
	.pj-homeAbout__summary > * { width:100%; }
	.pj-homeAbout__summary > .pj-media__aside { max-width:480px; }
	.pj-homeAbout__summary > .pj-media__body { max-width:640px; }
	.pj-homeAbout__heading { font-size:2.0rem; }
	.pj-homeAbout__more { text-align:center; }
	
	.pj-homeAbout__bottom {
		margin-top:40px;
		padding-left:0;
	}
	.pj-homeAbout__bottom::before {
		background-position:left center;
		width:calc( 440 / 820 * 100% );
	}
	.pj-homeAbout__catchphrase {
		padding-top:5px;
		padding-bottom:25%;
		font-size:2.0rem;
	}
}
@media screen and ( max-width:519px ) {
	.pj-homeAbout__catchphrase { font-size:1.8rem; }
}
@media screen and ( max-width:359px ) {
	.pj-homeAbout__catchphrase { font-size:1.6rem; }
}

/** HomeContestAnnounce **/

.pj-homeContestAnnounce {
	padding-top:20px;
	padding-bottom:20px;
	background:#FFF url( "../img/bg/content_art_tools.jpg" ) top center / contain repeat;
}
.pj-homeContestAnnounce__list {
	margin:20px auto;
	padding-left:0;
	display:block;
	max-width:840px;
	list-style:none;
	font-size:2.4rem;
}
.pj-homeContestAnnounce__list > * {
	display:flex;
	line-height:1.8;
}
.pj-homeContestAnnounce__list > :nth-child(n+2) { margin-top:1.0em; }
.pj-homeContestAnnounce__list > * > * { padding:0; }
.pj-homeContestAnnounce__head {
	padding-right:1.0em;
	flex:none;
	width:7.0em;
}
.pj-homeContestAnnounce__data { flex:auto; }

@media screen and ( max-width:767px ) {
	.pj-homeContestAnnounce__list { font-size:1.6rem; }
	.pj-homeContestAnnounce__list > * { flex-wrap:wrap; }
	.pj-homeContestAnnounce__list > * > * { width:100%; }
	.pj-homeContestAnnounce__head {
		padding-right:0;
		width:100%;
	}
}

/** HomeGallery **/

.pj-homeGallery {
	padding-top:80px;
	padding-bottom:40px;
	background:#F4F5D9 url( "../img/bg/content_top_yellow.jpg" ) top center repeat-x;
}
.pj-homeGallery__body {
	background:url( "../img/index/bg_gallery_board.png" ) center center / auto 840px no-repeat;
	position:relative;
	display:block;
	transition:background-size 0.3s cubic-bezier( 0.165, 0.840, 0.440, 1.000 );
}

@media screen and ( max-width:1199px ) {
	.pj-homeGallery__body { background-size:auto 720px; }
}
@media screen and ( max-width:767px ) {
	.pj-homeGallery__body { background-size:auto 540px; }
}