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

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

	common css

------------------------------------------------------*/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; overflow: scroll; font-size: 10px; }
body { font-size: 1.6rem; font-family: /*"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",*/ " 游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic,メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #00000b; line-height: 1.5; background-color: #fff; /*overflow: hidden; */ }
.container { width: 100%; margin-left: auto; margin-right: auto; position: relative;}
ul { list-style: none; }
ol { list-style: decimal; }
img { vertical-align: bottom; width: auto; max-width: 100%; height: auto; }
a.fade:hover { text-decoration: none; background-color: #fff; color: #333; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }

.pc { display:block; }
.sp { display:none; }

main { display: block; margin-bottom: 50px; }

@media (min-width: 768px) {
	body{ min-width: 1100px; }
	.container { max-width: 1100px; }

	a:hover { text-decoration: underline; }
	a img { -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }
	a img:hover { opacity: 0.8; }
}

@media screen and (min-width:768px) and ( max-width:1080px) {
    .container { width: -webkit-calc(100% - 40px); width: calc(100% - 40px);}
}

@media (max-width: 767px) {
	body{ }
	.container { margin-left: 20px; margin-right: 20px; width: auto; }
	.pc { display: none; }
	.sp { display: block; }

  /*.text { font-size: 1.6rem; line-height: 1.5; }*/
}

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

    pageTop

------------------------------------------------------*/
#page-top { position:fixed; bottom:20px; right:20px; font-size:1.4rem; z-index:999; }
#page-top a { background: #666; text-decoration: none; color:#fff; width:100px; padding:20px 0; text-align:center; display: block; border-radius: 5px; opacity:0.8;  }

@media (min-width: 768px) {
    #page-top a:hover { text-decoration:none; background:#999; }
}

@media (max-width: 767px) {

}

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

	header

------------------------------------------------------*/
header { position: relative; z-index: 5; }
.mainVisual { max-width: 1245px; margin-left: auto; margin-right: auto; position: relative; }
.mainVisual figure { position: relative; }
.mainVisual figure figcaption { font-size: 1.4rem; }
header .read p { line-height: 1.882; font-size: 1.7rem; }
header .menuBtn_wrap { position: absolute; }
header .menuBtn { position: relative; z-index: 9999; }
header .menu_wrap { width: 100%; max-width: 1290px; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; }
header .menu { position: absolute; top: 0; right: 0; -moz-transform: translateY(-450px);  -webkit-transform: translateY(-450px);  -o-transform: translateY(-450px);  -ms-transform: translateY(-450px);  -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);  transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);}
header .menu.open { -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); }
header .menu ul { border-right: 1px solid #000; padding-right: 5px; }
header .menu ul li a { display: block; text-align: center; text-decoration: none; color: #000; padding: 7px; }

@media (min-width: 768px) {
	header { margin-bottom: 90px; }
	.mainVisual .img { display: inline-block; }
	.mainVisual figure { padding-right: 61px; }
	.mainVisual figure .visual { max-width: 882px; }
	.mainVisual figure .txt { max-width: 63px; position: absolute; top: 0; right: 0; z-index: -1; }
	.mainVisual figure figcaption { color: #00000b; padding-top: 6px; text-align: left; margin-left: 85px; }
	.mainVisual .day { max-width: 85px; position: absolute; top: 245px; margin-left: 60px; }
	header .read { background-image: url(../images/bg_header.jpg); background-repeat: repeat; width: 53.929%; margin-top: -115px; margin-left: auto; padding-top: 125px; padding-left: 72px; padding-bottom: 40px; }
	header .read p { max-width: 510px; }
	header .menuBtn_wrap { cursor: pointer; top: 70px; left: 0; right: 0; width: 100%; max-width: 1290px; margin: 0 auto; }
	header .menuBtn { background: #000; color: #fff; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin-left: auto; }
	header .menuBtn span { display: inline-block; padding: 9px 2px 12px; }
	header .menuBtn a { position: relative; padding-top: 12px; color: #fff; text-decoration: none; display: inline-block; padding: 12px 2px 9px; }
	header .menuBtn a::before { content:''; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 16px; height: 1px; background: #fff; }
	header .menu { background: #fff; max-width: 318px; padding: 35px 27px 35px 0; }

}

@media (max-width: 767px) {
	header { margin-bottom: 60px; }
	.mainVisual figure { margin-bottom: 45px; }
	.mainVisual figure figcaption { color: #fff; position: absolute; bottom: 5px; left: 0; right: 0; margin: 0 auto; }
	.mainVisual .day { max-width: 293px; margin: 0 auto 37px; }
	header .read { padding: 0 38px; position: relative; }
	header .read::before { content: ''; position: absolute; bottom: 0; right: 0; background-image: url(../images/bg_header.jpg); background-repeat: repeat-x; width: 67.734%; height: 219px; z-index: -1; }
	header .read p { margin-bottom: 20px; }
	header .read .img { max-width: 246px; margin: 0 auto; }	
	header .menuBtn_wrap { top: 0; right: 0; width: 52px; height: 62px; }
	header .menuBtn { height: 100%; padding-top: 16px; }
	header .menuBtn span { background: #7f7f7f; width: 7px; height: 7px; display: block; margin-left: auto; margin-right: auto; border-radius: 7px; }
	header .menuBtn span:not(:last-of-type) { margin-bottom: 6px; }
	header .menu { background: rgba(255,255,255,0.67); width: 100%; }
	header .menu ul li { border-bottom: 1px solid #fff; }
	header .menu ul li a { font-size: 1.4rem; }
	header .menu ul li:first-of-type a::before { content: ''; background-image: url(../images/icon_top.png); background-repeat: no-repeat; background-size: 100%; width: 20px; height: 18px; display: inline-block; vertical-align: text-bottom; margin-right: 15px; }

}

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

	event 

------------------------------------------------------*/
#event { position: relative; z-index: 0; }
[class^="bg"] { /*width: 100vw;*/width: 100%; position: absolute; left: 0; background-repeat: no-repeat; z-index: -1; }
.bg1 { background-image: url(../images/bg_event_01.png); background-size: 850px 100%; background-position: center right; }
.bg2 { background-image: url(../images/bg_event_02.png); background-size: 260px 100%; }
.bg3 { background-image: url(../images/bg_event_03.png); background-size: 547px 100%; }
.bg4 { background-image: url(../images/bg_event_04.png); background-size: 532px 100%; background-position: center left -60px; }
.bg5 { background-image: url(../images/bg_event_05.png); background-size: 260px 100%; }

@media (min-width: 768px) {
	.bg1 { background-size: auto 100%; height: 1500px; margin-top: 300px; }
	.bg2 { background-size: auto 100%; height: 784px; background-position: center left; margin-top: -150px; }
	.bg3 { background-size: auto 100%; height: 547px; background-position: center right 135px; margin-top: -200px; }
	.bg4 { background-size: auto 100%; height: 532px; }
	.bg5 { background-size: auto 100%; height: 784px; background-position: center right; }

}

@media (max-width: 767px) {
	.bg1 { background-size: auto 100%; height: 515px; margin-top: 800px; }
	.bg2 { background-size: auto 100%; height: 686px; background-position: center left -100px; }
	.bg3 { background-size: auto 100%; height: 268px; background-position: center right 15px; margin-top: -200px; }
	.bg4 { background-size: auto 100%; height: 300px; margin-top: 400px; margin-top: -200px; }
	.bg5 { background-size: auto 100%; height: 686px; background-position: center right -100px; margin-top: 1000px; }

}


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

	event / schedule

------------------------------------------------------*/
#schedule { padding-top: 28px; padding-bottom: 55px; margin-bottom: 0; position: relative; z-index: 5; }
#schedule h2 { font-weight: bold; text-align: center; padding-bottom: 10px; position: relative; }
#schedule h2::before { content: ''; position: absolute; bottom: 0; height: 1px; background: #008fc2; }
#schedule p { font-size: 1.7rem; line-height: 1.88; letter-spacing: 0; }
#schedule .day { font-size: inherit; font-weight: bold; text-align: center; }
#schedule .calendar { margin-bottom: 55px; }
#schedule .calendar .img { max-width: 315px; }
#schedule ul.event_list { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#schedule ul.event_list li { max-width: 342px; width: 100%; }
#schedule ul.event_list li:last-of-type { text-align: center; font-size: 1.3rem; }
#schedule ul.event_list li img { filter: drop-shadow(1px 1px 5px rgba(153, 153, 153, .58));}

@media (min-width: 768px) {
	#schedule { background: rgba(255,255,255,0.55); } 
	#schedule h2 { font-size: 2.8rem; letter-spacing: 0.1em; margin-bottom: 13px; }
	#schedule h2::before { width: 410px; }
	#schedule p { text-align: center; margin-bottom: 55px; }
	#schedule .day { margin-bottom: 25px; }
	#schedule .calendar { padding: 0 12px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
	#schedule ul.event_list li:nth-child(n + 4) { margin-top: 20px; }

}

@media (max-width: 767px) {
	#schedule .container:last-of-type { background: rgba(255,255,255,0.55); margin-right: 0; margin-left: 0; padding-top: 20px; padding-left: 20px; padding-right: 20px; }
	#schedule h2 { font-size: 2.2rem; letter-spacing: 0.05em; max-width: 335px; margin: 0 auto 10px auto; width: calc(100% - 20px); }
	#schedule h2::before { width: 100%; left: 0; right: 0; margin: 0 auto; }
	#schedule p { margin-bottom: 35px; }
	#schedule p:not(.day) { padding: 0 10px; }
	#schedule .day { margin-bottom: 35px; font-size: 1.5rem; }
	#schedule .calendar { padding: 0 10px; }
	#schedule .calendar .img { margin-left: auto; margin-right: auto; }
	#schedule .calendar .img:not(:last-of-type) { margin-bottom: 30px; }
	#schedule ul.event_list li { margin-left: auto; margin-right: auto; }
	#schedule ul.event_list li:not(:last-of-type) { margin-bottom: 7px; }

}


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

	event / detail

------------------------------------------------------*/
#detail { position: relative; z-index: 1; }
#detail section > div { display:-webkit-box; display:-ms-flexbox; display:flex; position: static; }
#detail section { position: relative; z-index: 5; }
#detail section h3 { position: relative; }
#detail section h3::before { content: ''; position: absolute; z-index: -1; background-size: 100%; background-repeat: no-repeat; }
#detail section .left { position: relative; }
#detail section .left::before { content: ''; position: absolute; background: #008fc2; height: 1px; z-index: 10; }
#detail section .left::after { content: ''; position: absolute; background: #008fc2; width: 1px; z-index: 10; }
#detail section .left .writings p { line-height: 1.5625; }
#detail section .left .writings p:last-of-type { font-size: 1.5rem; }
#detail section .left .writings p.day { font-weight: bold; font-size: 1.8rem; }
#detail section .right { width: 100%; }
#detail section .right figure { margin: 0 auto; }
#detail section .right figure img { width: 100%; }
#detail section .right figure figcaption { color: #000; }
#detail section .contact dl dt { background: #000; color: #fff; text-align: center; /*font-weight: bold;*/ }
#detail section .contact dl dd { line-height: 1.5625; }
#detail .detail_btn { /*display: block;*/ background: #000; color: #fff; letter-spacing: 0.1em; text-align: center; border-radius: 9px; text-decoration: none; margin: 0 auto; }
#detail .other_list > dl { position: relative; padding-left: 25px; }
#detail .other_list > dl::before { content: ''; position: absolute; top: 50%; left: 0; margin-top: -40px; width: 12px; height: 80px; background-size: 12px; background-repeat: no-repeat; background-position: left center; }
#detail .other_list > dl:nth-of-type(1)::before { background-image: url(../images/bg_other_list_01.png); }
#detail .other_list > dl:nth-of-type(2)::before { background-image: url(../images/bg_other_list_02.png); }
#detail .other_list > dl:nth-of-type(3)::before { background-image: url(../images/bg_other_list_03.png); }
#detail .other_list > dl dd { font-weight: bold; font-size: 1.8rem; letter-spacing: 0; }


#detail #detail01 .contact dl:first-of-type dt { -ms-flex-item-align: start; align-self: flex-start; }
#detail #detail01 .right figure img { max-width: 497px; }
#detail #detail02 .right figure img { max-width: 333px; }
#detail #detail03 .right figure img { max-width: 379px; }
#detail #detail04 .right figure img { max-width: 385px; }
#detail #detail05 .right figure img { max-width: 272px; }
#detail #detail04 .right figure figcaption { margin: 0; background: #fff; padding-bottom: 20px; }
#detail #other h3 { margin-left: 25px; margin-bottom: 50px; }
#detail #detail01 h3::before { background-image: url(../images/bg_detail_title01.png); }
#detail #detail02 h3::before { background-image: url(../images/bg_detail_title02.png); }
#detail #detail03 h3::before { background-image: url(../images/bg_detail_title03.png); }
#detail #detail04 h3::before { background-image: url(../images/bg_detail_title04.png); }
#detail #detail05 h3::before { background-image: url(../images/bg_detail_title05.png); }
#detail #other h3::before { background-image: url(../images/bg_detail_title06.png); }
#detail #other .right { width: 100%; }
#detail #other .contact dl { padding-left: 0; }


@media (min-width: 768px) {
	#detail section { margin-bottom: 65px; }
	#detail section > div { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
	#detail section h3 { margin-bottom: 95px; }
	#detail section .left { width: calc( (100% - 435px) - 35px ); padding: 65px 0 0 110px; }
	#detail section .left::before { top: 105px; left: 0; width: 527px; }
	#detail section .left::after { top: 0; left: 70px; height: 484px; }
	#detail section .left .writings { padding-left: 20px; margin-bottom: 30px; }
	#detail section .left .writings p.day { margin-top: 20px; }
	#detail section .right { padding-right: 30px; max-width: 435px; }
	#detail section .contact dl { padding-left: 20px; margin-bottom: 20px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
	#detail section .contact dl dt { width: 96px; height: 40px; line-height: 40px; }
	#detail section .contact dl dd { width: calc( (100% - 96px) - 13px ); }
	#detail .detail_btn { width: 405px; height: 50px; line-height: 50px; }
	#detail .other_list > dl:not(:last-of-type) { margin-bottom: 65px; }
	#detail .other_list > dl:nth-of-type(1) dt { max-width: 403px; }
	#detail .other_list > dl:nth-of-type(2) dt { max-width: 212px; }
	#detail .other_list > dl:nth-of-type(3) dt { max-width: 360px; }
	#detail .other_list > dl dt { margin-bottom: 32px; }

	#detail #detail01 h3 { max-width: 404px; }
	#detail #detail01 h3::before { width: 112px; height: 112px; top: -20px; left: -75px; }
	#detail #detail01 .left { width: calc( (100% - 510px) - 20px ); }
	#detail #detail01 .right { max-width: 510px; padding-top: 30px; padding-right: 8px; }
	#detail #detail01 .right figure { margin-bottom: 110px; }
	#detail #detail01 .detail_btn { margin-left: 70px; }
	#detail #detail02 h3 { max-width: 313px; }
	#detail #detail03 h3 { max-width: 338px; }
	#detail #detail04 h3 { max-width: 367px; }
	#detail #detail05 h3 { max-width: 315px; }
	#detail #other h3 { max-width: 232px; }

	#detail #detail02 h3::before { width: 104px; height: 104px; top: -27px; right: -155px; }
	#detail #detail03 h3::before { width: 80px; height: 160px; top: -40px; left: -65px; }
	#detail #detail04 h3::before { width: 90px; height: 91px; top: -20px; right: -110px; }
	#detail #detail05 h3::before { width: 137px; height: 136px; top: -28px; left: -95px; }
	#detail #other h3::before { width: 126px; height: 116px; top: -55px; right: -187px; }

	#detail #detail02 .left { width: calc( (100% - 497px) ); }
	#detail #other .left { width: calc( (100% - 475px) ); padding-left: 105px; } 
	#detail #other .left::before { width: 495px; }

	#detail #detail02 .right { padding-top: 7px; }
	#detail #detail03 .right { padding-top: 35px; }
	#detail #detail05 .right { padding-top: 45px; }
	#detail #other .right { padding-top: 150px; width: 100%; max-width: 475px; }

	#detail #detail02 .right figure { margin-bottom: 25px; }
	#detail #detail03 .right figure { margin-bottom: 35px; }
	#detail #detail05 .right figure { margin-bottom: 35px; }

	#detail #other { margin-bottom: 120px; }

} 

@media (max-width: 767px) {
	#detail > section { margin-bottom: 60px; }
	#detail section > div { margin: 0; }
	#detail section:not(#other) > div { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
	#detail section h3 { margin-bottom: 40px; }
	#detail section .left { padding-top: 35px; width: calc(100% - 30px); margin-left: auto; margin-right: auto; padding-left: 55px; }
	#detail section .left::before { top: 68px; left: 0; width: 100%; }
	#detail section .left::after { top: 0; left: 35px; height: 450px; }
	#detail section .left .writings { margin-bottom: 20px; padding-right: 10px; }
	#detail section .left .writings p:last-of-type { margin-top: 5px; }
	#detail section .left .writings p.day { margin-top: 33px; }
	#detail section .right figure { margin: 0 auto; background: #e4e4e4; }
	#detail section:not(#detail04) .contact { margin-bottom: 20px; }
	#detail section .contact dl { padding-right: 10px; }
	#detail section .contact dl:not(:last-of-type) { margin-bottom: 15px; }
	#detail section .contact dl dt { width: 96px; height: 28px; line-height: 28px; margin-bottom: 12px; }
	#detail .detail_btn { width: 295px; height: 37px; line-height: 37px; }
	#detail .other_list > dl:not(:last-of-type) { margin-bottom: 30px; }
	#detail .other_list > dl:nth-of-type(1) dt { max-width: 322px; }
	#detail .other_list > dl:nth-of-type(2) dt { max-width: 172px; }
	#detail .other_list > dl:nth-of-type(3) dt { max-width: 285px; } 
	#detail .other_list > dl dt { margin-bottom: 20px; }

	#detail #detail01 h3 img { max-width: 268px; }
	#detail #detail02 h3 img { max-width: 216px; }
	#detail #detail03 h3 img { max-width: 227px; }
	#detail #detail04 h3 img { max-width: 251px; }
	#detail #detail05 h3 img { max-width: 218px; }
	#detail #other h3 img { max-width: 161px; }
	#detail #detail01 h3::before { width: 57px; height: 57px; top: -5px; left: -43px; }
	#detail #detail02 h3::before { width: 58px; height: 58px; top: -10px; right: 0; }
	#detail #detail03 h3::before { width: 40px; height: 80px; top: -7px; left: -35px; }
	#detail #detail04 h3::before { width: 45px; height: 45px; top: 0; right: 0; }
	#detail #detail05 h3::before { width: 68px; height: 68px; top: -2px; left: -48px; }
	#detail #other h3::before { width: 63px; height: 58px; top: -16px; right: 0; }

	#detail #detail02 .right figure img ,
	#detail #detail03 .right figure img ,
	#detail #detail04 .right figure img ,
	#detail #detail05 .right figure img { height: 270px; width: auto; }

	#detail #other > div { display: block; }
	#detail #other .left { margin-bottom: 50px; padding-right: 15px; }
	#detail #other .right { width: calc(100% - 30px); padding-left: 55px; margin-right: auto; margin-left: auto; }
	#detail #other .contact { margin-left: 25px; margin-bottom: 30px !important; }
}


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

	footer

------------------------------------------------------*/
footer { background: #e4e4e4; }
footer .info .img { max-width: 207px; }
footer .info p { font-size: 1.5rem; }
footer .info p:last-of-type { font-size: 1.4rem; }
footer .info dl { font-size: 1.4rem; }
footer .info dl dt { position: relative; padding-bottom: 5px; margin-bottom: 5px; }
footer .info dl dt::before { content: ''; position: absolute; bottom: 0; left: 0; height: 1px; background: #000; }
footer .copy { background: url(../images/bg_footer.jpg) no-repeat; background-size: cover; background-position: center; font-size: 0.9rem; text-align: center; color: #fff; letter-spacing: 0.05em; }


@media (min-width: 768px) {
	footer .info { padding: 35px 0; }
	footer .info .container { padding-left: 28px; }
	footer .info .container { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
	footer .info p:not(:last-of-type) { margin-bottom: 10px; }
	footer .copy { height: 140px; }
	footer .info dl { margin-bottom: 10px; }
	footer .info dl dt::before { width: 405px; }
}

@media (max-width: 767px) {
	footer .info { padding: 25px 0 15px; }
	footer .info .img { margin-left: auto; margin-right: auto; margin-bottom: 28px; }
	footer .info p:not(:last-of-type) { line-height: 1.67; margin-bottom: 20px; }
	footer .info dl dt { text-align: center; }
	footer .copy { height: 50px; }
	footer .info dl { margin-bottom: 15px; }
	footer .info dl dt::before { width: 100%; }

}

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



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


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}