@charset "utf-8";

/* common */
article { margin: 0 auto; width: 100%; max-width: 1164px; }
article section.body { margin: 0 auto; width: 94%; max-width: 600px; }
article section.body:nth-of-type(1) { margin-top: 60px; }
article section.body p { font-size: 110%; color: rgb(63, 32, 33); line-height: 1.6; }
@media screen and (max-width: 640px) {
	article h2 { padding: 13px 0 10px 0; font-size: 110%; }
	article section.body p { font-size: 90%; }
}

/* title */
article.title { position: relative;  background-color: rgb(63, 32, 33); background-color: rgb(63, 32, 33); background-position: center; background-repeat: no-repeat; background-size: cover; }
article.title.pc { background-image: url("../images/event/title_bg_pc.jpg"); }
article.title.sp { background-image: url("../images/event/title_bg_sp.jpg"); }
article.title h1 { display: -webkit-box; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-align-items: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; margin: 0 auto; width: 100%; height: 150px; background-color: rgba(0, 0, 0, 0.1); }
article.title h1 span { display: block; }
article.title h1 span:nth-child(1) { width: calc(236px*0.6); }
article.title h1 span:nth-child(2) { margin-left: 10px; width: calc(344px*0.6); }
article.title h1 span img { width: 100%; }
article.title p.logo { position: absolute; left: 10px; bottom: 10px; width: 60px; }
article.title p.logo img { width: 100%; }
@media screen and (max-width: 640px) {
	article.title h1 { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; -webkit-flex-direction: column; -webkit-justify-content: center; -webkit-align-items: center; -webkit-flex-wrap: wrap; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap;  height: 280px; }
	article.title h1 span:nth-child(2) { margin-top: 5px; margin-left: 0; }
	article.title h1 span img { width: 100%; }
	article.title p.logo { left: 10px; top: 10px; width: 40px; }
	article.title h1 span:nth-child(1) { margin: 0 auto; width: 142px; } /* android */
	article.title h1 span:nth-child(2) { margin: 0 auto; width: 206px; } /* android */
}

/* reports */
article.reports { display: -webkit-box; -webkit-box-pack: start; -webkit-justify-content: flex-start; -webkit-align-items: flex-start; -webkit-flex-wrap: wrap; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin: 50px auto; width: 100%; max-width: 1000px; }
article.reports section { margin: 10px 1%; width: 31.3%; height: 190px; background-color: rgb(230, 218, 184); background-position: center; background-repeat: no-repeat; background-size: cover; }
article.reports section a { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; -webkit-flex-direction: column; -webkit-justify-content: center; -webkit-align-items: center; -webkit-flex-wrap: wrap; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; width: 100%; height: 100%; color: rgb(255, 255, 255); text-decoration: none; }
article.reports section a:link { color: rgb(255, 255, 255); }
article.reports section a:visited { color: rgb(255, 255, 255); }
article.reports section a:hover { color: rgb(255, 255, 255); text-decoration: none; }
article.reports section a:active { color: rgb(255, 255, 255); text-decoration: none; }
article.reports section a:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: rgb(10, 0, 0); opacity: 0.2; }
article.reports section a.enter:after { opacity: 0.7; transition: all 0.3s ease-in-out; }
article.reports section a.leave:after { opacity: 0.2; transition: all 0.3s ease-in-out; }
article.reports section a h2 { position: relative; margin: 0 auto; width: 96%; text-align: center; font-size: 95%; font-weight: bold; color: rgb(255, 255, 255); line-height: 1.5; z-index: 1; -webkit-font-smoothing: antialiased; }
article.reports section ul { display: -webkit-box; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-align-items: center; -webkit-flex-wrap: nowrap; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; margin: 15px auto 0 auto; width: 96%; }
article.reports section ul li { display: block; position: relative; margin-left: 1.5em; font-size: 70%; color: rgb(255, 255, 255); z-index: 1; -webkit-font-smoothing: antialiased; }
article.reports section ul li:nth-child(1) { margin-left: 0; }
article.reports section ul li.date { padding-left: 13px; }
article.reports section ul li.place { padding-left: 12px; }
article.reports section ul li.date:before { display: block; position: absolute; top: 0; left: 0; content: url("../images/event/icon_date_wh.svg"); width: 9px; height: 9.4px; }
article.reports section ul li.place:before { display: block; position: absolute; top: 0; left: 0; content: url("../images/event/icon_place_wh.svg"); width: 8px; height: 12px; }
@media screen and (max-width: 800px) {
	article.reports section { margin: 10px 1.25%; width: 47.5%; }
}
@media screen and (max-width: 640px) {
	article.reports { display: block; margin: 0 auto; width: 100%; }
	article.reports section { margin: 1px 0 0 0; width: 100%; }
	article.reports section a:after { opacity: 0.5; }
}

/* landscape */ 
@media only screen and (max-device-width: 640px) and (orientation: landscape) {	
	article.reports { display: block; margin: 0 auto; width: 100%; }
	article.reports section { margin: 1px 0 0 0; width: 100%; }
	article.reports section a:after { opacity: 0.5; }
}