@charset "utf-8";
/* Reset */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:''; content:none;}
table {border-collapse:collapse; border-spacing:0;}

body {font-size:14px; line-height:2.25; color:#555; font-family:UD Shin Go Regular, sans-serif;}
.en {line-height:1.8;}
a {text-decoration:none; color:#B852D0;}
a:hover {text-decoration:underline;}
img {width:100%;}
h1, h2, h3, h4 {font-family:UD Shin Go Medium, sans-serif;}
em {font-weight:bold; font-family:UD Shin Go Medium, sans-serif;}
@media (max-width:700px) {
	body {font-size:12px;}
}

header {margin:0 auto; width:100%; max-width:1200px; background-color:#fff; z-index:3; position:relative;}
header img {position:absolute; top:0; left:0; width:160px; height:160px;}
header h1 {display:inline-block; margin:0 0 0 170px; font-size:18px; height:60px; line-height:60px; font-weight:800; color:#222; letter-spacing:.1px;
}
nav li a, nav li span {width:60px; height:60px; font-size:14px; border:1px solid #B852D0; box-sizing:border-box; line-height:58px; text-align:center;} 
nav li:first-child span {position:absolute; top:0; right:60px; background:#B852D0; color:#fff;}
nav li:last-child a {position:absolute; top:0; right:0; color:#B852D0; background:#fff;}
nav li:last-child a:hover {background:#B852D0; color:#fff; border:1px solid #fff;}
.en nav li:first-child a {position:absolute; top:0; right:60px; color:#B852D0; background:#fff;}
.en nav li:first-child a:hover {background:#B852D0; color:#fff; border:1px solid #fff;}
.en nav li:last-child span {position:absolute; top:0; right:0px; background:#B852D0; color:#fff;}
@media (max-width:700px) {
	header img {width:60px; height:60px;}
	header h1 {margin:0 0 0 70px; font-size:12px;}
}
header.comment-page {width:620px;}
header.comment-page img {width:60px; height:60px;}
header.comment-page h1 {margin:0 0 0 70px;}

#ticket a {margin:0 auto; width:100%; max-width:1200px; background:#B852D0; position:fixed; bottom:0; left:0; right:0; color:#fff; text-align:center; border:1px solid #B852D0; z-index:10; padding:10px; line-height:1;}
#ticket a:hover {background:#fff; color:#B852D0;}

#hero {margin:0 auto; width:100%; max-width:1200px; line-height:1;}

section > div {width:100%;}
section > div > div {margin:0 auto; padding:60px 0 80px; width:90%; max-width:620px;}
section h2 {font-size:36px; border-bottom:1px solid #999; line-height:1.6; margin:0 auto 12px;}
section h2 span {font-size:18px; color:#999; margin-left:20px;}
section h3 {font-size:18px;}
section dl {display:flex; flex-wrap:wrap;}
section dt, section dd {box-sizing:border-box; padding:10px; margin:0 0 20px; display:flex; flex-direction:column; width:20%;}
section dt {width:20%; border-right:1px solid #ccc;}
section dd {width:80%;}
section p {text-align:justify;}
@media (max-width:700px) {
	section h2 {font-size:24px;}
	section > div > div {padding:30px 0 40px;}
}

#movie {text-align:center; margin:120px auto;}
#movie iframe {width:560px; height:315px;}
@media (max-width:700px) {
	#movie {margin:60px auto;}
}
@media (max-width:600px) {#movie iframe {width:448px; height:252px;}}
@media (max-width:500px) {#movie iframe {width:336px; height:189px;}}
@media (max-width:350px) {#movie iframe {width:280px; height:158px;}}

#lead {margin-top:-80px;}
#lead .early2023,
#lead .early2023-en {margin-top:80px;}
#lead p {font-size:24px;}
.en #lead p {text-align:justify;}
.early2023 a {background:#B852D0; text-align:center; display:block; color:#fff; border:1px solid #B852D0; margin:50px auto 0;}
.early2023 a:hover {color:#B852D0; background:#fff;}
#lead .early2023-en p {font-size:14px;}
.early2023-en a {background:#B852D0; text-align:center; display:inline-block; color:#fff; border:1px solid #B852D0; margin:25px auto; padding:5px 15px;}
.early2023-en a:hover {color:#B852D0; background:#fff;}
@media (max-width:700px) {
	#lead p {font-size:16px;}
}

#concept {background:#eee;}

#outline {}
#outline dl {background:#eee; padding:10px; margin-bottom:2px;}
#outline dt {margin:0;}
#outline dd {margin:0; padding:10px 20px;}
#outline li {list-style-type:disc; margin:0 0 0 10px;}
#outline a.map {display:inline-block; color:#fff; border:1px solid #B852D0; background:#B852D0; text-align:center; width:50px; margin-top:5px;}
#outline a.map:hover {background:none; color:#B852D0;}


#event {}
#event ul {color:#fff;}
#event div > ul > li {margin-bottom:20px;}
#event h3 {background:#999; padding:0 10px; border-bottom:1px solid #eee;}
#event .event-data {display:flex; flex-wrap:wrap; font-size:12px; border-bottom:1px solid #eee;}
#event .event-data-date, 
#event .event-data-text {box-sizing:border-box; padding:10px; display:flex; flex-direction:column; background:#999; line-height:1.5;}
#event .event-data-date {width:20%; border-right:1px solid #eee; overflow-wrap:anywhere;}
#event .event-data-date a {color:#fff; text-decoration:underline;}
#event .event-data-text {width:80%; padding:10px 20px;}
#event .event-data-text h4 {font-size:16px; margin-bottom:10px;}
#event .event-data-text p {padding-bottom:20px;}
#event .event-data-appearance {border-top:1px solid #eee; padding:10px 0 20px;}
#event .event-application {background:#B852D0; text-align:center;}
#event .event-application a {display:block; color:#fff; border:1px solid #B852D0;}
#event .event-application a:hover {color:#B852D0; background:#fff;}
#event .notice {color:#555; font-size:12px;}
@media (max-width:700px) {
	#event .event-data-date {width:30%;}
	#event .event-data-text {width:70%;}
	#event .event-application a {padding:10px;}
}


#experiences {}
#experiences ul {margin-bottom:15px;}
#experiences li {background:#eee; padding:10px; color:#555; overflow:hidden; margin:0 0 8px;}
#experiences li h3 {width:100%; float:none; margin:0;}
/* #experiences li h3 {width:300px; float:left; margin-right:20px;} */
#experiences li h4 {font-size:18px; line-height:1.25; margin:5px 5px 10px;}
#experiences li p {font-size:12px; line-height:1.5; margin:0 5px 20px;}
#experiences li dl {border-top:1px solid #ccc; font-size:10px; padding-top:10px;}
#experiences li dt {width:10%; border:none; margin:0; padding:0; line-height:1.5;}
.en #experiences li dt {width:20%;}
#experiences li dd {width:90%; margin:0; padding:0 0 2px; line-height:1.5;}
.en #experiences li dd {width:80%;}
#experiences li div {position:relative; clear:both; margin:0 5px;}
#experiences li div span {position:absolute; font-size:10px; padding:2px 0; background:#999; color:#fff; line-height:1; right:0; width:60px; letter-spacing:-0.02em; text-align:center;}
#experiences li div span:nth-child(1) {top:10px;}
#experiences li div span:nth-child(2) {top:25px;}
#experiences li div span:nth-child(3) {top:40px;}
#experiences .trailer-btn {background:#000; text-align:center; color:#fff; margin:10px auto 0; cursor:pointer;}
#experiences .trailer-btn:hover {background:#fff; color:#555;}
#experiences .down i {content:""; width:6px; height:6px; border-bottom:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); margin:0 0 2px 10px; display:inline-block;}
#experiences .down:hover i {border-bottom:1px solid #555; border-right:1px solid #555;}
#experiences .up i {content:""; width:6px; height:6px; border-top:1px solid #fff; border-left:1px solid #fff; transform:rotate(45deg); margin:2px 0 0 10px; display:inline-block;}
#experiences .up:hover i {border-top:1px solid #555; border-left:1px solid #555;}
#experiences .trailer {display:none;}
#experiences iframe.youtube-16-9 {width:100%; height:auto; aspect-ratio: 16 / 9;}
#experiences .vimeo-container {height:0; overflow:hidden; max-width:100%; padding-bottom:56.25%; position:relative; margin:0;}
#experiences .vimeo-container iframe {height:100%; left:0; position:absolute; top:0; width:100%;}
#experiences .notice {margin-bottom:50px; display:block; font-size:12px;}
#experiences .ticket p {background:#eee; padding:10px; color:#555; font-size:12px;}
#experiences .ticket a {display:block; color:#fff; border:1px solid #B852D0; background:#B852D0; text-align:center; margin-top:1px; margin-bottom:2px;}
#experiences .ticket a:hover {color:#B852D0; background:#fff;}
@media (min-width:900px) {
	#experiences li {overflow:visible; padding-top:0;}
	#experiences li h3 {width:800px; margin:0 -90px;}
}
@media (max-width:700px) {
	#experiences li {overflow:visible; padding-top:0;}
	#experiences li h3 {width:100vw; float:none; margin:0 calc(50% - 50vw);}
	#experiences li h4 {margin:5px auto 10px;}
	#experiences li p {margin:0 0 20px;}
	#experiences li div {margin:0;}
	#experiences li dt {width:15%;}
	#experiences li dd {width:85%;}
	.en #experiences li dt {width:20%;}
	.en #experiences li dd {width:80%;}
}

#juries {}
#juries ul {margin-bottom:15px;}
#juries li {background:#eee; padding:10px; color:#555; overflow:hidden; margin:0 0 4px;}
#juries li span {display:inline-block; font-size:10px; margin:0 0 0 15px;}
.en #juries li span {display:block; margin:0 0 10px; line-height:1.25;}
#juries li h4 {clear:both;}
#juries li > p {font-size:10px; line-height:1.5; margin-right:5px;}
.en #juries li > p {line-height:1.25;}
#juries li .comment {clear:both; padding-bottom:20px;}
#juries li .comment h5 {padding-bottom:2px; border-bottom:1px solid #ccc; margin:0 5px;}
#juries li .comment p {margin:10px 5px 0;}
@media (max-width:700px) {
	#juries li h4 {width:100%; float:none; margin:0;}
	#juries li h3 {margin:0 auto;}
	#juries li span {display:block; margin:0 0 10px; line-height:1.25;}
	#juries li p {margin:0 0 20px;}
	#juries li div {margin:0;}
	#juries li .comment h5 {margin:0;}
	#juries li .comment p {margin:10px 0 0;}
}

#winners {margin-bottom:80px;}
#winners ul {}
#winners li {background:#eee; padding:10px; color:#555; overflow:hidden; margin:0 0 4px;}
#winners li img {clear:both; width:300px; float:left; margin-right:20px;}
#winners div em {font-size:14px; margin-bottom:10px;}
#winners div h3 {font-size:18px; display:block; line-height:1.25; margin-bottom:10px;}
#winners div p {line-height:1.25; margin-bottom:10px; margin-right:10px;}
#winners a {display:block; color:#fff; border:1px solid #B852D0; background:#B852D0; text-align:center; margin-top:1px; margin-bottom:2px;}
#winners a:hover {color:#B852D0; background:#fff;}
@media (max-width:700px) {
	#winners li img {width:100%; float:none; margin:0;}
	#winners li p {margin:0 0 20px;}
	#winners li div {margin:0;}
}

#crowdfunding {margin-bottom:80px;}
#crowdfunding ul {}
#crowdfunding li {background:#eee; padding:10px; color:#555; overflow:hidden; margin:0 0 4px;}
#crowdfunding li em {font-size:14px; margin-bottom:10px; line-height:1.25;}
#crowdfunding li h3 {font-size:18px; display:block; line-height:1.25; margin-bottom:10px;}
#crowdfunding li p {line-height:1.75; margin-bottom:10px;}
#crowdfunding li p span {display:inline-block; margin-right:6px;}
@media (max-width:700px) {
	#crowdfunding li p {margin:0 0 20px;}
}

#sns {}
#sns .sns-timeline {display:flex; flex-wrap:wrap;}
#sns .sns-timeline li {width:300px;}
#sns .sns-timeline li:first-child {margin:0 20px 0 0;}
#sns .link {display:flex; flex-wrap:wrap; width:240px; margin:60px auto;}
#sns .link li {width:60px; margin:0 10px;}
#sns .link li a {display:block; line-height:1;}
#sns .link li a:hover {background:#B852D0;}
@media (max-width:700px) {
	#sns .sns-timeline li {margin:0 auto;}
	#sns .sns-timeline li:first-child {margin:0 auto 20px;}
}

#cooperation {background:#eee;}
#cooperation dl {margin:0 auto 30px; display:flex;}
#cooperation dt {height:60px; justify-content:center; display:flex; flex-direction:column; width:20%; margin:0 10% 0 0; line-height:1.5; text-align:right; border:none;}
#cooperation dd {width:70%; padding:0; margin:0;}
#cooperation p {justify-content:center; display:flex; flex-direction:column; font-size:10px; line-height:1.25;}
#cooperation dl a {height:60px; display:inline-block; width:132px;}
#cooperation dl a img {border:1px solid #ccc; box-sizing:border-box;}
#cooperation dl a:hover img {border:1px solid #B852D0;}
#cooperation dd a:nth-child(2) {margin:0 0 0 20px;}
@media (max-width:700px) {
	#cooperation dl {margin:0 auto 15px;}
	#cooperation dt {height:40px; width:25%; margin:0 5% 0 0;}
	.en #cooperation dt {width:30%;}
	#cooperation dd {width:70%;}
	.en #cooperation dd {width:60%;}
	#cooperation p {height:40px;}
	#cooperation dl a {height:40px; width:88px;}
}

#archive {background:#333; text-align:center; padding:0; width:100%; margin:0 auto; color:#fff;}
#archive h3 {color:#fff; font-size:18px;}
#archive a {color:#fff;}
#archive li {display:inline-block; margin-left:20px;}
#archive li:first-child {margin-left:0;}
#archive li:before {content:"|"; display:inline-block; margin-right:20px;}
#archive li:first-child:before {content:none; margin-left:0;}
@media (max-width:700px) {
	#archive {text-align:left;}
	#archive li {display:block; margin:0;}
	#archive li:before {content:none; margin:0;}
}

footer {text-align:center; padding:60px 0; width:90%; margin:0 auto;}
footer a {color:#555;}
footer ul {margin:0 auto 30px;}
footer li {display:inline-block; margin-left:20px;}
footer li:first-child {margin-left:0;}
footer li:before {content:"|"; display:inline-block; margin-right:20px;}
footer li:first-child:before {content:none; margin-left:0;}
footer .copyright {font-size:10px;}
@media (max-width:700px) {
	footer {text-align:left; padding:30px 0;}
	footer li {display:block; margin:0;}
	footer li:before {content:none; margin:0;}
}