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

html,body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
	margin:0;
	padding:0;
	height: 100%;
   /*フォント*/
	font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ＭＳ Ｐ明朝','MS PMincho','Times New Roman',sans-serif;
	font-size: 16px;
	line-height:1.5;
	color: #2b2b2b;
	border-top: solid 8px #b6472b;
}
a:link {
	color: #2b2b2b;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #2b2b2b;
}
a:hover {
	text-decoration: none;
	color: #175497;
}
a:active {
	text-decoration: none;
	color: #2b2b2b;
}

@media screen and (max-width:736px) {/*スマートフォン*/
	html,body {border-top: solid 4px #b6472b;}
}

/*---------------------------------------------------------------------------
レイアウト
---------------------------------------------------------------------------*/
#wrap {
	width:100%;
	margin:0 auto;
	padding:0;
	box-sizing:border-box;
}

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

img[src$=".svg"] {
    width: 100%;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#wrap {
		width:100%;
		margin:0 auto;
		padding:0;
		box-sizing:border-box;
		overflow:hidden;
	}
}

@media screen and (max-width:736px) {/*スマートフォン*/
	#wrap {
		width:100%;
		margin:0 auto;
		padding:0;
		box-sizing:border-box;
		overflow:hidden;
	}
}

/*-------------------------*/

header,main,footer,div {
	display:block;
	box-sizing:border-box;
}

p,h1,h2,h3,h4,h5,h6 {
	margin:0;
	padding:0;
}

/*-------------------------*/

/*---------------------------------------------------------------------------
header
---------------------------------------------------------------------------*/
header {}

/*上部絵巻イメージ2枚*/
.h_emaki {
	width: 86%;
	opacity: 0;
	margin-bottom: 16px;
	line-height: 1;
}

.h_emaki2 {
	width: 80%;
	margin-left: auto;
	animation-delay: 0.2s;
	line-height: 1;
}

.h_emaki img,
.h_emaki2 img {
	width: 100%;
	height: auto;
}

@media screen and (max-width:736px) {/*スマートフォン*/
	.h_emaki {width: 86%;}
	.h_emaki2 {width: 78%;}
}

/*期間限定特別公開*/
.h_koukai {
	animation-delay: 0.4s;
	width: 10%;
	position: absolute;
	top: 32px;
	right: 16px;
	text-align: center;
}

/*タイトル*/
header h1 {
	width: 16%;
	position: absolute;
	padding-top: 38%;
	top: 0;
	left: 16px;
	z-index: 9999;
}
@media screen and (max-width:736px) {/*スマートフォン*/
	.h_koukai {
		width: 10%;
		top: 16px;
		right: 4px;
	}
	
	header h1 {
		width: 18%;
		padding-top: 42%;
		left: 4px;
	}
}

.h_fadeUp{
animation-name:h_fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes h_fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/*-------------------------*/



/*---------------------------------------------------------------------------
main
---------------------------------------------------------------------------*/
main {}

.s_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.s_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*特別公開と絵解き説法*/
#emaki_info {
	width: 80%;
	margin: 0 0 16px auto;
	padding: 0;
	box-sizing: border-box;
	background: url("images/emaki4.png") no-repeat top right;
	background-size: 90% auto;
	position: relative;
	z-index: 1;
}
.e_i_flex {display: flex;}
.e_i_flex div:nth-child(1) {
	width: 24%;
	margin: -6% 0 0 -1%;
}
.e_i_flex div:nth-child(2) {
	width: 50%;
	margin: 0 40px 0 auto;
	font-size: .96rem;
}

#emaki_info h2 {
	margin-top: 32%;
	font-size: 4rem;
	line-height: 1.25;
}
.e_i_text {
	width: 30%;
	position: absolute;
	bottom: 0;
	left: -24%;
	opacity: .20;
	mix-blend-mode: multiply;
}
.e_i_day,
.e_i_place {font-size: 24px;}
.e_i_day span {
	font-size: 150%;
	margin-left: 8px;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#emaki_info {
		font-size: 14px;
		background-size: 96% auto;
	}
	#emaki_info div:first-child {width: 18%;}
	#emaki_info h2 {font-size: 3rem;}
	
	.e_i_flex div:nth-child(1) {width: 28%!important;}
	.e_i_flex div:nth-child(2) {
		width: 64%;
		margin: 0 16px 0 auto;
	}
	
	.e_i_day,
	.e_i_place {font-size: 18px;}
	.e_i_day span {font-size: 125%;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	#emaki_info {
		width: 100%;
		margin: -16% 0 0;
		padding: 16px;
		font-size: 14px;
		background-size: 100% auto;
	}
	
	.e_i_flex {
		display: block;
		padding-top: 54%;
	}
	
	.e_i_flex div:nth-child(1) {
		width: 24%!important;
		margin: 0 0 0 16%;
	}
	.e_i_flex div:nth-child(2) {
		width: 100%;
		margin: 0;
		padding: 0 0 16px;
		box-sizing: border-box;
	}

	#emaki_info h2 {
		margin-top: 0;
		font-size: 1.75rem;
	}

	.e_i_text {display: none;}
	
	.e_i_day,
	.e_i_place {font-size: 16px;}
	.e_i_day span {font-size: 125%;}
}

#emaki_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/*パーツ*/
.e_flex1,
.e_flex2 {
	margin: 16px 0;
	text-align: right;
	font-size: .8rem;
	line-height: 1.25;
}
.e_flex1 img,
.e_flex2 img {width: 100%;}

.e_flex1 {/*1枚目*/
	width: 34%;
	margin-right: auto;
}
.e_flex2 {/*2枚目*/
	width: 62%;
}
.e_flex2 p {margin-right: 8px;}

.e_flex3 {
	/*絵巻配置図*/
	width: 75%;
	margin: 16px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: .8rem;
}
.e_flex3 div:nth-child(1) {width: 24%;}
.e_flex3 div:nth-child(2) {width: 72%;}

.e_flex4 {/*食堂*/
	width: 75%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.e_flex4 div:nth-child(1) {
	width: 78%;
	line-height: 1.8;
}
.engi {
	font-weight: 700;
	line-height: 2;
	margin-bottom: 8px;
}
.engi span {font-size: 125%;}

.e_f_gosyuin {/*御朱印*/
	width: 16%;
	font-size: .8rem;
}
.e_flex5 {/*動画リンク*/
	width: 75%;
	margin: 0 auto;
	padding: 32px;
	box-sizing: border-box;
	background: #f3f3f3;
	text-align: center;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	.e_flex3,
	.e_flex4,
	.e_flex5 {width: 90%;}
	.e_flex3 div:nth-child(1) {width: 32%;}
	.e_flex3 div:nth-child(2) {width: 64%;}
}

@media screen and (max-width:736px) {/*スマートフォン*/
	#emaki_flex,
	.e_flex4 {display: block;}
	.e_flex1 {width: 56%;}
	.e_flex2 {
		width: 96%;
		margin-left: auto;
	}
	.e_flex3 div:nth-child(2),
	.e_flex4 div:nth-child(1) {width: 100%;}
	
	.e_flex3 {
		flex-wrap: wrap;
		justify-content: center;
	}
	.e_flex3 div:nth-child(1) {width: 72%;}
	
	.e_f_gosyuin {
		width: 100%;
		margin: 16px auto;
		display: flex;
		align-items: center;
	}
	.e_f_gosyuin img {
		width: 50%;
		margin-right: 16px;
	}
	.e_flex3,
	.e_flex4,
	.e_flex5 {width: 90%;}
}

.movie_btn {
	width: 100%;
	margin: 8px 0 0;
}
.movie_btn a {
	display: block;
	padding: 8px;
	box-sizing: border-box;
	text-align: center;
	background: #2b2b2b;
	color: #fff;
	opacity: .8;
}
.movie_btn a:hover {opacity: 1;}

/*-------------------------*/
#event2 {
	width: 75%;
	margin: 80px auto 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

#event2 div:nth-child(1),
#event2 div:nth-child(4) {width: 100%;}
#event2 div:nth-child(2) {width: 32%;}
#event2 div:nth-child(3) {width: 64%;}

#event2 table {width: 100%;}
#event2 th,
#event2 td {vertical-align: top;}
#event2 th {
	width: 10%;
	font-weight: 400;
}
#event2 th::before,
#event2 th::after {content: "｜";}
#event2 th::before {margin-right: 8px;}
#event2 th::after {margin-left: 8px;}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#event2 {
		width: 90%;
		margin: 40px auto 0;
		align-items: flex-start;
	}
	#event2 th {width: 12%;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	#event2 {
		width: 100%;
		margin: 40px auto 0;
		padding: 0 16px;
		box-sizing: border-box;
		display: block;
	}
	
	#event2 table {margin: 16px 0;}
	#event2 td,
	#event2 th {
		display: block;
		width: 100%;
	}
	#event2 th {border: solid 1px #adadad;}
	#event2 th::before,
	#event2 th::after {content: "";}
	#event2 th::before {margin-right: 0;}
	#event2 th::after {margin-left: 0;}
	#event2 td {padding-top: 4px;}
}

.e2_day,
.e2_place {font-size: 24px;}
.e2_day span {
	font-size: 150%;
	margin-left: 8px;
}

.e2_caption {
	font-size: .72rem;
	text-align: right;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	.e2_day,
	.e2_place {font-size: 18px;}
	.e2_day span {font-size: 125%;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	.e2_day,
	.e2_place {font-size: 16px;}
	.e2_day span {font-size: 125%;}
}

#event2 div:nth-child(1) {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}
#event2 div:nth-child(1) p:last-child {width: 100%;}
#event2 div:nth-child(2) {margin: 16px 0;}

#event2 ul {
	margin: 16px 0 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
#event2 li {margin: 0 0 16px;}
#event2 li:nth-child(even) {margin: 0 40px 16px;}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#event2 div:nth-child(2),
	#event2 div:nth-child(3) {margin: 8px 0;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	#event2 div:nth-child(2),
	#event2 div:nth-child(3) {width: 100%;}
}

/*-------------------------隈研吾氏によるアーティストトークより*/
#talk {
	width: 100%!important;
	margin: 0 0 16px;
	line-height: 1.8;
}
#talk p {margin-bottom: 16px;}
#talk p:last-child {margin-bottom: 0;}

#talk summary {
	display: block;
	margin: 0 0 8px;
	padding: 8px 16px;
	box-sizing: border-box;
	border: solid 1px #2b2b2b;
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight: 700;
}
#talk summary:hover {
	color: #2b2b2b;
	background: #f3f3f3;
	opacity: .8;
}

@media screen and (max-width:736px) {/*スマートフォン*/
	#talk {
		margin: 16px 0;
		font-size: 14px;
	}
	#talk summary {
		font-size: 1.16rem;
		padding: 8px;
	}
}

.c-accordion__content {
	display: block;
	width: 100%!important;
	padding: 0 16px 16px;
	box-sizing: border-box;
	border-right: solid 1px #adadad;
	border-left: solid 1px #adadad;
	border-bottom: solid 1px #adadad;
	animation: a-fadeIn 0.5s ease;
}
@media screen and (max-width:736px){
	.c-accordion__content {padding: 0 8px 8px;}
	
}

@keyframes a-fadeIn {
  0% {
    opacity: 0; 
    transform: translateY(-10px); 
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
/*-------------------------*/



/*---------------------------------------------------------------------------
アクセス
---------------------------------------------------------------------------*/
#access {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 40px;
}
#access a {color: #884898!important;}
#access a:hover {opacity: .8;}

#a_flex {
	width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#a_flex div:nth-child(1) {
	width: 100%;
	margin-bottom: 16px;
}
#a_flex div:nth-child(2) {width: 32%;}
#a_flex div:nth-child(3) {width: 64%;}
#a_flex div:nth-child(4) {width: 32%;}
#a_flex div:nth-child(5) {width: 64%;}

#a_flex ul {
	margin: 0;
	padding: 0 0 0 1em;
}
#a_flex li {margin-bottom: 8px;}
#a_flex li:last-child {margin-bottom: 0;}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#access {margin-bottom: 16px;}
	#a_flex {
		width: 100%;
		padding: 16px;
		box-sizing: border-box;
	}
	#a_flex div:nth-child(2) {width: 100%;}
	#a_flex div:nth-child(3) {width: 100%;}
	#a_flex div:nth-child(4) {width: 32%;}
	#a_flex div:nth-child(5) {width: 64%;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	#a_flex {
		width: 100%;
		display: block;
		padding: 16px;
		box-sizing: border-box;
	}
	#a_flex div:nth-child(1),
	#a_flex div:nth-child(2),
	#a_flex div:nth-child(3),
	#a_flex div:nth-child(4),
	#a_flex div:nth-child(5) {width: 100%;}
}

.map {
	width: 100%!important;
	margin:0 auto 40px;
	position: relative;
	padding-bottom: 40%;
	padding-top: 40px;
	height: 0;
	overflow: hidden;
	}
.map iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

@media screen and (max-width:520px) {/*スマートフォン*/
	.map {padding-bottom: 50%;}
}

.enkyo {
	text-align: center;
	margin-bottom: 8px;
	color: #727171;
	line-height: 1.25;
}
.enkyo span {
	display: block;
	border-bottom: solid 1px #adadad;
	margin-bottom: 8px;
}
.enkyo img {
	width: auto;
	height: 56px;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	.enkyo img {
		width: 80%;
		height: auto;
	}
}

/*-------------------------*/

/*---------------------------------------------------------------------------*/




/*---------------------------------------------------------------------------
footer
---------------------------------------------------------------------------*/
footer {padding: 16px 0;}
.copy {
	font-size:.75rem;
	text-align:center;
	}
@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
}
@media screen and (max-width:736px) {/*スマートフォン*/
}

/*---------------------------------------------------------------------------*/