@charset "UTF-8";

.gobackto { width: 100%; max-width: 1200px; margin: 0 auto; padding:20px 20px 0 20px; text-align: right;}
	.gobackto a { display: flex; width: 220px; color:#000; background:#CCC; text-decoration: none; align-items:center; margin: 0 0 0 auto; }
		.gobackto a::after { display: flex; width: 40px; height: 40px; justify-content: center; align-items: center; content:"〉"; text-indent: .5em; color:#FFF;background:#0071BC;}
		.gobackto a:hover { color: #FFF; background:#0071BC;}
		.gobackto a strong { width: 180px; text-align: center;}

#layout .inner { max-width:1080px;}

.rtitle { padding: 10px 0; border-bottom: 1px solid #CCC; text-align: center; font-size: 22px;}

.art { text-align: left; padding: 20px 0;}
	.art p { padding: 10px 0;}

.c2photo { display: flex; justify-content:space-between; flex-wrap: wrap; padding: 10px 0;}
	.c2photo li { padding: 5px 0;  text-align: left;}
		.c2photo li img { padding-bottom: 5px;}

.c4photo { display: flex; justify-content:space-between; flex-wrap: wrap; padding: 10px 0;}
	.c4photo li { padding: 5px 0; text-align: left;}
		.c4photo li strong { display: block; text-align: center; padding: 5px 0;}

.scrolltable { -webkit-appearance: none; position: relative; font-size: 16px;}
	.scrolltable::-webkit-scrollbar { width: 8px; height: 8px;}
		.scrolltable::-webkit-scrollbar-track { border-radius:10px; box-shadow: inset 0 0 6px rgba(0,0,0,.2);}
		.scrolltable::-webkit-scrollbar-thumb { background-color:rgba(0,0,0,.4); border-radius:10px; box-shadow:0 0 0 1px rgba(0,0,0,.1); cursor: pointer;}
		.scrolltable::-webkit-scrollbar-corner {background:#FFF;}
	.scrolltable table { width: 900px; border-collapse: collapse; position: relative; margin: 0 auto; font-size:14px;}
		.scrolltable th { text-align: center; padding:10px 0;  white-space: nowrap; background: #EEE; border: 1px solid #666;}
		.scrolltable td { border-bottom: 1px solid #999;border: 1px solid #666; vertical-align: top;}
			.scrolltable tr td:nth-of-type(1) { width: 30px; text-align: center; padding:10px 0;}
			.scrolltable tr td:nth-of-type(2) { width: 110px; text-align: center; padding:10px 0;}
			.scrolltable tr td:nth-of-type(3) { width: 100px; text-align: center; padding:10px 0;}
			.scrolltable tr td:nth-of-type(4) { width: 120px; text-align: center; padding:10px 0;}
			.scrolltable tr td:nth-of-type(5) { width: 180px; text-align: center; padding:10px 0;}
			.scrolltable tr td:nth-of-type(6) { width: 400px; text-align: left; padding:10px 15px;}

.eventphoto { display: flex; justify-content: center; flex-wrap: wrap; max-width: 900px; margin: 10px auto;}
	.eventphoto li {  width: calc(100% / 3);}
	.eventphoto li a { display: block; width: 100%; height: 0; padding-top:75%; overflow: hidden; background-position:center center; background-repeat: no-repeat; background-size: cover; opacity: 1;}
	.eventphoto li a:hover {opacity:.6;}


@media all and (min-width:320px) {
	/* 320px+ settings */
	.rtitle { font-size: 18px;}
	.c2photo li { width: calc(50% - 10px); }
	.c4photo li { width: calc(50% - 10px); }
	.scrolltable { overflow: auto; width:100%; margin:20px 0 40px 0;}
		.scrolltable::after { display: block; content:"＞＞＞ スクロール ＞＞＞"; font-size: 12px; color:#666; padding-top: 10px;}
	.scrolltable img { max-width:none;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.rtitle { font-size: 22px;}
	.c2photo li { width: calc(33.3% - 10px); }
	.c4photo li { width: calc(25% - 10px); }
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	.c2photo li { width: calc(20% - 10px); }
	.scrolltable { overflow: hidden;}
		.scrolltable::after { display: none;}
		.scrolltable img { max-width:100%;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}