@charset "UTF-8";
::-moz-selection{background-color:#000;color:#fff;}
::selection{background-color:#000;color:#fff;}
* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	color: #333;
  background-color:#3e3e3e;
  font-family:"游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: auto;
}
.wf-sawarabimincho {font-family: "Sawarabi Mincho";font-weight:normal;}
.en{font-family: 'Roboto', sans-serif;}
.en.wg100{ font-weight:100;}
.en.wg300{ font-weight:300;}
.en.wg500{ font-weight:500;}
.en.wg600{ font-weight:600;}
.en.wg700{ font-weight:700;}
.uppercase{text-transform:uppercase;}

.container{padding-left:4%;padding-right:4%;margin-left:auto;margin-right:auto;}
.container.plr0{padding-left:0;padding-right:0;}
.flex-jc-sb{justify-content:space-between;-webkit-justify-content:space-between;}
.flex-wrap{-webkit-box-lines:multiple;-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.flex{display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;}
.phc{position: relative;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
.clearfix:after{content:"";display:block;clear:both;}
img{border:0;width:100%;max-width:100%;height:auto;width:auto\9;/*ie8*/}
.all{text-align:left;}
.alc{text-align:center;}
.alr{text-align:right;}
main{display:block;background-color:#fff;}
a.bhc{ color:#000;}

html{font-size: 62.5%;}
@media screen and (min-width: 500px){body{font-size: 14px;font-size: 1.4rem;}}
@media screen and (min-width: 570px){body{font-size: 15px;font-size: 1.5rem}}
@media screen and (min-width: 620px){body{font-size: 16px;font-size: 1.6rem}}
@media screen and (min-width: 680px){body{font-size: 17px;font-size: 1.7rem}}
@media screen and (min-width: 720px){body{font-size: 18px;font-size: 1.8rem}}
@media screen and (min-width: 800px){body{font-size: 19px;font-size: 1.9rem}}
@media screen and (min-width: 860px){body{font-size: 20px;font-size: 2.0rem}}
@media screen and (min-width: 920px){body{font-size: 21px;font-size: 2.1rem}}
@media screen and (min-width: 1000px){body{font-size: 22px;font-size: 2.2rem}}




@media screen and (max-width: 640px) {
.for-pc{display:none;}
.flex.mobile-break{display:block;}
.phc.mobile-break{top: 0%;-webkit-transform: translateY(0%);-ms-transform: translateY(0%);transform: translateY(0%);}
}
@media only screen and (min-width: 641px) and (max-width: 980px) {
}
@media screen and (min-width: 981px){
.for-pc{display:block;}
.container{padding-left:0;padding-right:0;
/*max-width:1024px;*/
max-width:1240px;
}   
}


.btn-base,
.btn-base::before,
.btn-base::after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.btn-base::before,
.btn-base::after {
  z-index: -1;
	display: block;
	content: '';
	top: 0;
	width: 50%;
	height: 100%;
  position:absolute;
}
.btn-base::before {right:0;}
.btn-base::after {left:0;}

@media screen and (min-width: 981px){
.btn-base:hover::before,
.btn-base:hover::after {width: 0;} 
a.bhc:hover{ opacity:.6;}
.bht{/*base-hover-transition*/
   -webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;-ms-transition: all .4s ease;transition: all .4s ease;
   }
  .button_container #toggle:hover {
  opacity: .7;
  }
  #Language a:hover{
  opacity:.7;
  }
  }
   
.button_container {
  position: fixed;
  top:1em;
  right:1em;
  padding:0 .5em;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity .25s ease;
  transition: opacity .25s ease;
  border-radius:4px;
  background-color:#fff;
}
#toggle{
  width: 2em;
  height: 2em;
  position:relative;
  display:inline-block;
   vertical-align:middle
  }

#Language{
  font-size:.8em;
   vertical-align:middle;
  display:inline-block;
  }
#Language a{
  color:#000;
  }

.button_container #toggle.active .top {
  -webkit-transform: translateY(7px) translateX(0px) rotate(45deg);
  transform: translateY(7px) translateX(0px) rotate(45deg);
 background-color:#000;
}
.button_container #toggle.active .middle {
  opacity: 0;
}
.button_container #toggle.active .bottom {
  -webkit-transform: translateY(-7px) translateX(0px) rotate(-45deg);
  transform: translateY(-7px) translateX(0px) rotate(-45deg);
  background-color:#000;
}
.button_container span {
  background-color:#000;
  border: none;
  height: 2px;
  width: 70%;
  position: absolute;
  top: 12px;
  left: 15%;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 19px;
}
.button_container span:nth-of-type(3) {
  top: 26px;
}

.overlay {
  position: fixed;
  background-color:rgba(0,0,0,.72);
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
  z-index:4;
}
.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
 /* height: 15%;
  height: calc(100% / 3);
  min-height: 10px;*/
  position: relative;
  opacity: 0;
}
.overlay.open li:nth-of-type(1),
.overlay.open li:nth-of-type(2),
.overlay.open li:nth-of-type(3){
   font-size:4em;
   margin-bottom:.5em;
   }
.overlay.open li:nth-of-type(1) a,
.overlay.open li:nth-of-type(2) a,
.overlay.open li:nth-of-type(3) a{
   display: block;
   }
.overlay ul li a {
  position: relative;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}

@media screen and (min-width: 981px){
.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
  width: 100%;
}
}
.overlay ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 3px;
  background: #fff;
  -webkit-transition: .35s;
  transition: .35s;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

footer{
  position:relative;
  z-index:2;
  background-color:#fff;
  padding-top:2vw;
  padding-bottom:2vw;
  }
footer nav ul li{
  display:inline-block;
  margin:.5em;
  }
footer nav ul li a {
  position: relative;
  color: #333;
  text-decoration: none;
  overflow: hidden;
}
footer nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 1px;
  background: #333;
  -webkit-transition: .35s;
  transition: .35s;
}
@media screen and (min-width: 981px){
footer nav ul li a:hover::after{
  width:100%;
  }
}
footer nav ul:first-child{
  font-size:1.6em;
  margin-bottom:.2em;
  }
footer nav ul:last-child{
  font-size:.8em;
  margin-bottom:4em;
  }
footer .njk{
  margin-bottom:1em;
  }
footer address{
  font-style:normal;
  font-size:.6em;
  }
#page-top{
  position:fixed;
  right:2em;
  bottom:2em;
  z-index:3;
  }
#preloader { position: fixed; top:0; left:0; right:0; bottom:0; display: block; background:#fefefe; z-index:1000; }
.spinner { position: absolute; left:0; right:0; bottom:0; top:0; width:70px; height:70px; margin: auto; text-indent:-9999px; border-top:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #999; border-left:1px solid #999; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: spin .5s linear infinite; -moz-animation: spin .5s linear infinite; -ms-animation: spin .5s linear infinite; -o-animation: spin .5s linear infinite; animation: spin .5s linear infinite }
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0)}100%{-ms-transform:rotate(360deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media screen and (max-width:768px){.spinner{width:50px;height:50px}}@media screen and (max-width:414px){.spinner{width:40px;height:40px}}


/*.slideInDelay{
   -webkit-animation-delay:0.4s;
   -ms-animation-delay:0.4s;
   animation-delay:0.4s;
   -webkit-animation-duration:0.8s;
   -ms-animation-duration:0.8s;
   animation-duration:0.8s;
   -webkit-animation-name:slideIn;
   animation-name:slideIn;
   visibility:visible !important;
}
@-webkit-keyframes slideIn{0%{opacity:0;-webkit-transform:translateY(2em);}100%{opacity:1;-webkit-transform:translateY(0);}}
@keyframes slideIn{0%{opacity:0;-webkit-transform:translateY(2em);-ms-transform:translateY(2em);transform:translateY(2em);}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}
*/


.come-in {
  -webkit-animation-delay:0.8s;
  -ms-animation-delay:0.8s;
  animation-delay:0.8s;
  animation: come-in 1.4s ease forwards;
  visibility:visible!important;
}
.already-visible{
/*  transform: translateY(0);
  animation: none;*/
}
@-webkit-keyframes come-in{0%{opacity:0;-webkit-transform:translateY(2em);}100%{opacity:1;-webkit-transform:translateY(0);}}
@keyframes come-in{0%{opacity:0;-webkit-transform:translateY(2em);-ms-transform:translateY(2em);transform:translateY(2em);}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}




#page-header-top{
  padding-top:2vw;
  padding-bottom:2vw;
  border-bottom:1px #ccc solid;
  background-color:#fff;
  }
#page-header-top p{
  text-align:center;
}
#page-header-top + main{
   padding-top:4vw;
   }
header.page-header{
  margin-bottom:2em;
  }
header.page-header h2{
  font-size:2em;
  margin-bottom:2em;
  }
header.page-header dl{
  font-size:.7em;
  line-height:1.8em;
  }
header.page-header dl dt,
header.page-header dl dd{
}
header.page-header dl dt{
  width:6em;
  }
header.page-header dl dd{
  margin-top:-1.8em;
  padding-left:7em;
  margin-bottom:.5em;
  }
.event-page-main{
  margin-bottom:2em;
  }
.event-page-main p.photo{
  margin-bottom:1em;
  }
.event-page-main p.description{
   font-size:.8em;
   line-height:2;
   }



  
.event-photos ul{
  list-style:none;
  }
  .event-photos ul li img{
    border:1px #fff solid;
    }
@media screen and (min-width: 768px){
  .event-photos ul li{
    flex-basis:50%;
    }
  }



.nav-archive header{
  margin-bottom:2em;
  }
 
 
 @media screen and (min-width: 768px){
   .nav-archive ul li{
    flex-basis:20%;
    }
  }
  
 
 
 
div.nav-archive{
  background-color:#efefef;
  padding-top:4vw;
  padding-bottom:4vw;
  }
.nav-archive ul li p{
  font-size:.6em;
  line-height:1.6;
  }
.nav-archive ul li p span,
.nav-archive ul li p strong{
  display:block;
  }
.nav-archive ul li{
  position:relative;
  }
.nav-archive ul li a{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    text-indent:-999em;
    opacity:0;
}

.nav-archive ul li img{
    border:1px #efefef solid;
    margin-bottom:.5em;
    }
@media screen and (min-width: 981px){
#event .event-main:hover{
    opacity:.6;
    }
 .nav-archive ul li:hover{
   opacity:.6;
   }
}