@charset "utf-8";
/* CSS Document */

/* motion-> */

/*
animation -- 固有名 -- 動作時間 -- ease -- 開始遅延 -- 繰り返し -- 正反
ex) animation: anime1 2s ease 0s infinite alternate;
*/

.wait{
	opacity: 0;
}

.play.fadeIn{
	animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.play.slideLeft{
	animation: slideLeft 2s ease 0s 1 normal;
}

@keyframes slideLeft {
	0% {
		opacity: 0;
		transform: translateX(3em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.play.slideRight{
	animation: slideRight 2s ease 0s 1 normal;
}

@keyframes slideRight {
	0% {
		opacity: 0;
		transform: translateX(-3em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ->motion */

body{
	color:#231815;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	line-height:1;
	text-align:left;
	background:#fff;
}

a:hover { transition: 1s;}
a:hover img{ opacity:0.64;}
.anchor{ text-decoration:none;}
.anchor:hover img{ opacity:1;}
.clear{ clear:both;}
div:after,
ul:after,
dl:after,
.ac:after {
    content: "";
    display: block;
    clear: both;
}

.main {
    position: relative;
}

header h2.open{
	background: url(../img/close.png) right center / auto 1em no-repeat;
}

header nav{
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.92);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 98;
}

header nav li{
	line-height: 3;
}

header nav li:after{
	clear: both;
	content: '';
	display: block;
}

header nav li span{
	display: block;
	width: 5em;
	float: left;
	text-align: left;
	margin-right: 1em;
}

header nav li a{
	text-decoration: none;
}

footer .image2{
	margin-bottom: 3em;
}

footer table{
	width: 100%;
	margin: -1.375em 0 1.375em 0;
}

footer table th,
footer table td{
	line-height: 1.75;
	vertical-align: top;
	padding: 1rem 0;
}

footer address{
	line-height: 1.75;
	margin: -0.375rem 0;
}

.post > *:first-child{
	margin-top: 0;
}

.post > *:last-child{
	margin-bottom: 0;
}

.post h1{
	letter-spacing: 2;
	line-height: 1.5;
	margin: -0.25em 0 0.75em 0;
}
.post h2{
	letter-spacing: 2;
	line-height: 1.5;
	margin: calc(8rem - 0.25em) 0 1.25em 0;
}
.post h3{
	letter-spacing: 2;
	line-height: 1.5;
	margin: calc(4rem - 0.25em) 0 1.25em 0;
}

.post p,
.post address{
	line-height: 2;
	margin: -0.5em 0 2em 0;
}

.post img{
	display: inline-block;
	max-width: 100%;
	height: auto;
	margin: 0.375em 0;
}

.post img.aligncenter{
	display: block;
	margin: 0.375em auto;
}

.post table{
	width: 100%;
	margin: -0.375em 0 1em 0;
}

.post table th,
.post table td{
	line-height: 1.75;
	vertical-align: top;
	padding: 0 0 1.125em 0;
}

.post ul{
	margin:-0.25em 0 1.25em 1.5em;
	list-style:disc;
}

.post ol{
	margin:-0.25em 0 1.25em 1em;
	list-style:decimal;
}

.post li{
	line-height:1.5;
	padding:0.125em 0;
}

.post ol li{
	margin-bottom:1em;
}

.post ol li:last-child{
	margin-bottom:-0.25em;
}

#event .contentsBody dl{
	margin-bottom: 8em;
}

#event .contentsBody dl:last-child{
	margin-bottom: 0;
}

#event .contentsBody dt a{
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#event .contentsBody dt .noImage{
	background-color: rgba(0,0,0,0.04);
	background-image: url(../img/no-image.png);
	background-size: 25%;
}

#event .contentsBody dd .text{
	display: block;
	font-size: 125%;
	line-height: 1.5;
	margin: -0.25em 0;
}

#event .contentsBody dd .text2{
	display: block;
	font-weight: bold;
	line-height: 1.5;
	margin: 1.25em 0;
}

#event .contentsBody dd .text3{
	display: block;
	font-size: 80%;
	line-height: 1.5;
	margin: -0.25em 0;
}

/* wp-pagenavi */

.wp-pagenavi{
	margin:8em auto 0 auto;
}

.wp-pagenavi:after{
	content:"";
	display:block;
	clear:both;
}

.wp-pagenavi a:link,
.wp-pagenavi a:visited,
.wp-pagenavi span.current,
.wp-pagenavi a:hover,
.wp-pagenavi a:active{
	display:block;
	width:calc(2em - 2px);
	height:calc(2em - 2px);
	float:left;
	font-weight:bold;
	line-height:2em;
	text-align:center;
	text-decoration:none;
	margin:0 0.25em 0 0;
	border:1px solid #000;
}

.wp-pagenavi span.current,
.wp-pagenavi a:hover,
.wp-pagenavi a:active{
	color:#fff;
	background:#000;
}

.wp-pagenavi > *:last-child{
	margin-right:0;
}

@media screen and (min-width:980px){

	.pcNone{
		display:none;
	}

	html{
		width:100%;
		height: 100%;
		font-size:14px;
	}

	body{
		width:100%;
		height: 100%;
		font-size:1rem;
	}

	img {
		display: block;
		max-width:100%;
		height: auto;
	}

	header{
		width: 100%;
	}

	header h2{
		cursor: pointer;
		padding-right: 2em;
		background: url(../img/icon.png) right center / auto 1em no-repeat;
		position: fixed;
		top: 4em;
		right: 4em;
		z-index: 99;
	}

	header h2:hover{
		opacity: 0.48;
		transition: 1s;
	}

	header nav ul{
		width: 20em;
		margin: 8em 0 0 auto;
	}

	header nav ul{
		width: 20em;
		margin: 8em 0 0 auto;
	}

	.main{
		width:100%;
		height: 100%;
		position: relative;
	}

	.contents{
		min-height: 100%;
	}

	.contentsRight{
		width: 36%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
	}

	.contentsRight .ancestor{
		width: 100%;
		height: 12.5em;
		text-align: center;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.contentsRight .ancestor strong{
		display: block;
		font-size: 700%;
		font-weight: normal;
		margin-bottom: 1rem;
	}

	.contentsRight .ancestor .span{
		display: block;
		font-size: 200%;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		margin: 1rem 0;
	}

	.contentsRight .ancestor .span2{
		display: block;
	}

	.contentsLeft{
		width: 64%;
	}

	.contentsLeft .contentsBody{
		max-width: 45em;
		padding: 9em 0;
		margin: 0 auto;
	}

	.post{
		font-size: 1.125em;
	}

	.post h1{
		font-size: 200%;
	}
	.post h2{
		font-size: 150%;
	}
	.post h3{
		font-size: 125%;
	}

	#event .contentsBody dt{
		width: 25%;
		float: left;
		margin-right: 5%;
	}

	#event .contentsBody dd{
		width: 70%;
		float: left;
	}

	footer{
		width: 100%;
		height: 100%;
		background: url(../img/bg.jpg) center top / cover no-repeat;
		position: relative;
	}

	footer .left{
		width: 64%;
		float: left;
		margin: 9em 0 0 0;
	}

	footer .left h2{
		font-size: 150%;
		letter-spacing: 0.2em;
		margin: 0 0 1rem 7rem;
	}

	footer .left .image{
		width: 50%;
		margin: 0 auto;
	}

	footer .right{
		width: 36%;
		height: 100%;
		background: rgba(255, 255, 255, 0.72);
		position: absolute;
		top: 0;
		right: 0;
	}

	footer .right .body{
		width: 24em;
		padding: 9em 0 4em;
		margin: 0 auto;
	}

	footer .right img{
		margin: 0 auto;
	}

	footer .right th{
		width: 5em;
	}

	#index h1{
		width: 50%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 97;
	}

	#index h1 img{
		width: 25%;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	#index .a{
		width: 100%;
		height: 100%;
		position: relative;
	}

	#index .b{
		width: 64%;
	}

	#index .b img{
		width: 52.439%;
		height: auto;
		padding: 0;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	#index .c .body{
		width: 64%;
		text-align: center;
		padding: 4em 0 0 0;
		margin: auto 0;
	}

	#index .c h2{
		font-size: 112.5%;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		margin-bottom: 3em;
	}

	#index .c .text{
		font-size: 125%;
		letter-spacing: 0.4em;
		text-indent: 0.4em;
		margin-bottom: 4rem;
	}

	#index .c .text2{
		font-size: 112.5%;
		line-height: 2.5;
		margin: -0.75em 0;
	}
}

@media screen and (max-width:979px){

	.spNone{
		display:none;
	}

	html{
		width:100%;
		height: 100%;
		font-size:12px;
	}

	body{
		width:100%;
		height: 100%;
		font-size:1rem;
		overflow-x: hidden;
	}

	img {
		display: block;
		max-width:100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	th,
	td,
	address{
		font-size: 80%;
	}

	header h2{
		cursor: pointer;
		padding-right: 2em;
		background: url(../img/icon.png) right center / auto 1em no-repeat;
		position: fixed;
		top: 2em;
		right: 2em;
		z-index: 99;
	}

	header nav ul{
		width: 18em;
		margin: 4em 0 0 auto;
	}

	.contentsRight .ancestor{
		text-align: center;
		padding: 5em 0 8em;
	}

	.contentsRight .ancestor strong{
		display: block;
		font-size: 500%;
		font-weight: normal;
		margin-bottom: 1rem;
	}

	.contentsRight .ancestor .span{
		display: block;
		font-size: 150%;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		margin: 1rem 0;
	}

	.contentsRight .ancestor .span2{
		display: block;
	}

	.contentsLeft{
		padding: 0 2em 8em;
	}

	.post h1{
		font-size: 150%;
	}
	.post h2{
		font-size: 125%;
	}
	.post h3{
	}

	#event .contentsBody dt{
		margin-bottom: 1.5em;
	}

	footer{
		padding: 0 2em 50%;
		background: url(../img/bg.jpg) center bottom / 100% auto no-repeat;
		position: relative;
	}

	footer h2{
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		text-align: center;
		margin: 0 0 2em 0;
	}

	footer .image{
		margin: 0 0 2em 0;
	}

	#index h1{
		padding: 8em 2em;
	}

	#index h1 img{
		max-width: 160px;
		width: 40%;
		margin: 0 auto;
	}

	#index .a{
		margin: 0 2em 8em;
	}

	#index .c{
		text-align: center;
		margin: 0 2em 8em;
	}

	#index .c h2{
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		margin-bottom: 2.5em;
	}

	#index .c .text{
		font-size: 125%;
		letter-spacing: 0.4em;
		text-indent: 0.4em;
		margin-bottom: 4rem;
	}

	#index .c .text2{
		line-height: 2;
		margin: -0.5em 0;
	}



}