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


#main .co_btn_yaji{text-align: center; font-size: 1em; margin-top: 1.5em;}
#main .co_btn_yaji a{ display: inline-block; line-height: 1; padding: 0.9em 3em; border: 1px solid; background: #FFF; border-radius: 1.5em; font-weight: 600; text-decoration: none; color: #323232; position: relative; overflow: hidden;}
#main .co_btn_yaji a .icon{ display: inline-block; width: 0.9em; vertical-align: 0.0em; margin-left:0.75em;}
#main .co_btn_yaji a::after{ content: ""; width: 0%; height: 100%; position: absolute; left: 0; top: 0; background: #2c6aa5;  opacity: 0.2; pointer-events: none;transition-property : width;transition-duration : 0.4s;}
#main .co_btn_yaji a:hover{ color: #323232; }
#main .co_btn_yaji a:hover::after{ width: 100%;}



#mv{width: 100%; max-height: 730px; position: relative;}
#mv .ttl{ position: absolute; width: 49%; max-width: 626px; left: 0; right: 0; top: 0%; margin: auto; z-index: 6;}
#mv .shadow{ position: absolute; width: 100%; height: 10%; left: 0; bottom: -1px; z-index: 4;
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)); display: none;}
#mv .bg_wrap{ margin: 0 auto;}
#mv .bg_wrap .bg{}
#mv .bg_wrap .bg img{object-fit: cover;width: 100%;height: 100%;max-height: 730px;}

#mv #slick_count_bar {position: absolute;right: 5%;bottom: 5%;width: 120px;height: 3px;background: rgba(0, 0, 0, 0.3); z-index: 5;
display: none;}
#mv #slick_count_bar span {position: absolute;width: 0%;height: 100%;left: 0;top: 0;background: #FFF;}

#mv ul.slick-dots{ position: absolute;left: 3em;bottom: 4em;width: auto;}
#mv ul.slick-dots li{width: 0.75em;height: 0.75em;padding: 0;margin: 0 0.25em;}
#mv ul.slick-dots li button{ margin: 0; line-height: 1; border: none; background: #DDD;}
#mv ul.slick-dots li.slick-active button{  background: #777;}


@media all and (max-width: 768px) {

#mv .ttl{ width: 80%;   top: 3%;  height: 80%;}
#mv .ttl img{ display: block; width: 100%; height: 100%; object-fit: contain;}
#mv .bg_wrap .bg img{height: 100vh; min-height: 20em; max-height: 500px;}
#mv ul.slick-dots{ position: absolute;left: 0; right: 0; bottom: 3.5em;width: auto;}

}









#info{ background: #fafaf8; padding: 1px 0 10em; position: relative;}
#info{
  background-image: url(../images/bg_series1.png),url(../images/bg_series2.png),url(../images/bg_series3.png),url(../images/bg_series4.png),url(../images/bg_series5.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position:left 0em,right 3em,left 57em,right 59em,left 100%;
}
#info .co_wrap{ width: 72%;}
#info #jpn_eng{ display: none;}
/*
#info #jpn_eng{ position: absolute; top: 1em; right: 5em;}
#info #jpn_eng .wrap{background: #FFF; border: 2px solid; line-height: 1; border-radius: 1.5em;}
#info #jpn_eng .wrap::before{ content: ""; position: absolute; left: 0; top: 0; width: 55%; height: 100%; background: #000;border-radius: 1.5em;transition-property : left;transition-duration : 0.4s;}
#info #jpn_eng .wrap > div{ display: inline-block; padding: 0.5em 1.5em; position: relative;
transition-property : padding,color;transition-duration : 0.4s;}
#info #jpn_eng .wrap .jpn{ color: #FFF;}
#info #jpn_eng .wrap .eng{}

#info.eng #jpn_eng .wrap::before{ left: 45%;}
#info.eng #jpn_eng .wrap .jpn{ color: #000;}
#info.eng #jpn_eng .wrap .eng{ color: #FFF;}

#info .jpn_text{ display: block; font-weight: inherit;}
#info .eng_text{display: none; font-weight: inherit;}
*/


#info .jpn_eng_wrap .jpn_eng_change{ margin: 1em auto 0; font-size: 16px; font-weight: 400; text-align: right; cursor: pointer;}
#info .end_wrap.jpn_eng_wrap .jpn_eng_change{ text-align: center;}

#info .jpn_eng_wrap .jpn_text{ display: block; font-weight: inherit;}
#info .jpn_eng_wrap .eng_text{display: none; font-weight: inherit;}

#info .jpn_eng_wrap.eng .jpn_text{ display: none;}
#info .jpn_eng_wrap.eng .eng_text{ display: block;}



#info .daydata_text{ text-align: center;}
#info .daydata_text .text_wrap{ display: inline-block; text-align: left; font-size: 1.1em;}
#info .daydata_text .text1{ font-size: 2.0em; font-weight: bold;}
#info .daydata_text .text2{ font-size: 1.2em; font-weight: bold; margin: 0.5em 0;}
#info .daydata_text .text3{ font-size: 0.7em; margin-top: 1em;}


#info #end_event{ display: none;}
#info .end_wrap{ border: 1px solid; border-radius: 1.5em;; padding: 2em; text-align: center; margin: 3em auto 5em; background: rgba(250, 250, 248,0.8);}
#info .end_wrap .text{ font-size: 1.3em; font-weight: bold; line-height: 1.6; margin-bottom: 0.25em;}



#info .tirashi_wrap{ margin-top: 3em;}
#info .tirashi_wrap .flex_wrap{ align-items:flex-start;}
#info .tirashi_wrap .left{ flex:1; margin-right: 4em; background: rgba(250,250,248,0.75); outline: 1em solid rgba(250, 250, 248, 0.5);}
#info .tirashi_wrap .left .text1{ font-size: 1.6em; font-weight: bold;}
#info .tirashi_wrap .left .text2{ font-size: 0.9em; margin-top: 1em;;}
#info .tirashi_wrap .right{ max-width: 300px; width: 15em;}
#info .tirashi_wrap .right .img{ max-width: 178px; width: 80%;; margin: auto; box-shadow: 0.3em 0.3em 0.3em 0 rgba(0, 0, 0, 0.2);}
#info .tirashi_wrap .right .co_btn_yaji{ font-size: 1em;}



#info .special_leftwrap{ width: 72%; max-width: 1030px; margin: 5em auto 0;}
#info .special_leftwrap .flex_wrap{ align-items:flex-start;}
#info .special_leftwrap .left{ max-width: 495px; width: 40.0%; text-align: right;}
#info .special_leftwrap .left .img{ border-radius: 1em; overflow: hidden;}
#info .special_leftwrap .left .text{ display: inline-block; text-align: left; font-size: 0.9em; margin-top: 1em;}
#info .special_leftwrap .right{ flex: 1; margin-left: 3em; background: rgba(250,250,248,0.75); outline: 1em solid rgba(250, 250, 248, 0.5);}
#info .special_leftwrap .right .text1{ font-size: 1.6em; font-weight: bold;}
#info .special_leftwrap .right .text2{ font-size: 0.9em; margin-top: 1em;;}



#info .special_rightwrap{ width: 72%; max-width: 1030px; margin: 5em auto 0;}
#info .special_rightwrap .text_wrap{ padding:3em 3em; background: #FFF; border-radius: 1em ; box-shadow: -1.5em 1.5em 0 0 rgba(200,200,200, 0.1);}
#info .special_rightwrap .text_wrap .text1{ font-size: 1.3em; font-weight: bold;}
#info .special_rightwrap .text_wrap .text2{ font-size: 1.2em; font-weight: bold; color: #3e3a3a; margin:0.5em auto;}
#info .special_rightwrap .text_wrap .text3{ font-size: 1.2em; font-weight: bold; color: #3e3a3a;}
#info .special_rightwrap .text_wrap .text3 .flex_wrap{justify-content:flex-start;align-items:flex-start; margin-top: 0.3em;}
#info .special_rightwrap .text_wrap .text3 .left{font-weight: 600; color: #3e3a3a; margin-right: 1em;}
#info .special_rightwrap .text_wrap .text3 .right{font-weight: normal; color: #3e3a3a;}



@media all and (max-width: 768px) {


#info{padding: 1.5em 0 5em; margin-top: -3em; position: relative;}
#info{
  background-size: 100%;
  background-position:left 0em,right 13em,left 48em,right 95em,left 100%;
}


#info .co_wrap{ width: 94%;}


#info #jpn_eng{ position: absolute; top: 2em; right: 2em;}
#info #jpn_eng .wrap > div{  padding: 0.4em 1.2em; }




#info .daydata_text .text_wrap{ font-size: 1.0em; text-align: center; line-height: 1.4;}
#info .daydata_text .text1{ font-size: 1.7em; margin-bottom: 0.75em;}
#info .daydata_text .text2{ font-size: 1.6em; margin: 0.5em 0;}
#info .daydata_text .text3{ font-size: 1.0em; margin-top: 1em;}


#info .end_wrap{ padding: 2em 1em 1.5em; margin: 2em auto 4em;}
#info .end_wrap .text{ font-size: 1.4em;}



#info .tirashi_wrap{}
#info .tirashi_wrap .flex_wrap{display: block;}
#info .tirashi_wrap .left{ margin: 0 auto; text-align: center;}
#info .tirashi_wrap .left .text1{ font-size: 1.6em;}
#info .tirashi_wrap .left .text2{ font-size: 1.2em; margin-top: 1em; text-align: left;}
#info .tirashi_wrap .right{ max-width: 100%; width: 100%; margin: 2em auto 0;}
#info .tirashi_wrap .right .img{ max-width: 178px; width: 60%;}
#info .tirashi_wrap .right .co_btn_yaji{ font-size: 1em;}



#info .special_leftwrap{ width: 100%; max-width: 1152px; margin: 5em auto 0 0;}
#info .special_leftwrap .flex_wrap{ display: flex; flex-wrap:wrap; flex-direction:column-reverse;}
#info .special_leftwrap .left{ max-width: 495px; width: 100%; text-align: right; width: 94%; margin: 2em auto 0 0;}
#info .special_leftwrap .left .img{ border-radius: 0 1em 1em 0; overflow: hidden;}
#info .special_leftwrap .left .text{ display: block; text-align: right; font-size: 1em; margin-top: 0.5em;}
#info .special_leftwrap .right{ width: 94%; margin: 0  auto;}
#info .special_leftwrap .right .text1{ font-size: 1.6em; text-align: center;}
#info .special_leftwrap .right .text2{ font-size: 1.2em; margin-top: 1em;;}



#info .special_rightwrap{ width: 94%; max-width: 1152px; margin: 5em 0 0 auto; text-align: center;}
#info .special_rightwrap .text_wrap{ padding:1.5em 1.0em 1.5em 2em;}
#info .special_rightwrap .text_wrap .text1{ font-size: 1.6em;}
#info .special_rightwrap .text_wrap .text2{ font-size: 1.3em; margin:0.5em auto;}
#info .special_rightwrap .text_wrap .text3{ font-size: 1.0em;}
#info .special_rightwrap .text_wrap .text3 .flex_wrap{display: block; text-align: left;}
#info .special_rightwrap .text_wrap .text3 .left{margin-right: 1em;}
#info .special_rightwrap .text_wrap .text3 .right{}

}









#menu .icon_wrap{display:flex;justify-content:center;align-items:center;}
#menu .icon_wrap .icon{ width: 30%;  max-width: 303px;}
#menu .icon_wrap .icon2{margin: 0 3em;}



#menu .booth_wrap{}
#menu .booth_wrap .booth{ background: #DDD; padding: 3em 0;}
#menu .booth_wrap .booth1{ background: #eaff9e; margin-top: 4em;}
#menu .booth_wrap .booth2{ background: #efe2b9;}
#menu .booth_wrap .booth3{ background: #b7ece7;}



#menu .booth .ttl_wrap{}
#menu .booth .ttl_wrap .sub_ttl{font-size: 2em; font-weight: 600; text-align: center; margin-bottom: 1em;}


#menu .booth_wrap .booth .cont_wrap{}
#menu .booth_wrap .booth .cont_wrap .cont{ margin: 0 0.75em; max-width: 280px; width: 14em;}
#menu .booth_wrap .booth .cont_wrap .cont .img_wrap{ position: relative;}
#menu .booth_wrap .booth .cont_wrap .cont .img_wrap .cat_wrap{ position: absolute; width: 90%; left: 0; right: 0; bottom: 0; margin: auto;}
#menu .booth_wrap .booth .cont_wrap .cont .img_wrap .cat_wrap span{ display: inline-block; color: #FFF; margin: auto; font-size: 0.75em; font-weight: 600;}
#menu .booth_wrap .booth .cont_wrap .cont .img_wrap .cat_wrap span::before{ content: "・"; }

#menu .booth_wrap .booth .cont_wrap .cont a{ display: block; border-radius: 1em; overflow: hidden; height: 10.402em; max-height: 260px;}
#menu .booth_wrap .booth .cont_wrap .cont a img{ transition-property : transform;transition-duration : 0.3s; display: block; width: 100%; height:100%; object-fit: cover; object-position: center center;}
#menu .booth_wrap .booth .cont_wrap .cont a:hover img{ transform: scale(1.05);}
#menu .booth_wrap .booth .cont_wrap .cont .text_wrap{ text-align: center; margin-top: 0.5em; font-size: 0.9em;}
#menu .booth_wrap .booth .cont_wrap .cont .text_wrap .name{  font-weight: 600;line-height: 1.4;display: inline-block;text-align: left;}

#menu .viewall{text-align: center; font-size: 1em; margin-top: 2em;}
#menu .viewall a{ display: inline-block; line-height: 1; padding: 0.9em 5em; border: 1px solid; background: #FFF; border-radius: 1.5em; font-weight: 600; text-decoration: none;color: #323232; position: relative; overflow: hidden;}
#menu .viewall a .icon{ display: inline-block; width: 0.75em; vertical-align: 0.075em; margin-right: 1em;}
#menu .viewall a::after{ content: ""; width: 0%; height: 100%; position: absolute; left: 0; top: 0; background: #2c6aa5;  opacity: 0.2; pointer-events: none;transition-property : width;transition-duration : 0.4s;}
#menu .viewall a:hover{ color: #323232; }
#menu .viewall a:hover::after{ width: 100%;}

@media all and (max-width: 768px) {
  #menu .booth_wrap .booth .cont_wrap .cont{ max-width: 200px;;}

  #menu .booth .ttl_wrap{ text-align: center; width: 80%; margin: auto;}
  #menu .booth .ttl_wrap .ttlicon{ width: 13em; margin: auto;}
  #menu .booth .ttl_wrap .sub_ttl{ margin: auto;}
  #menu .booth .ttl_wrap .hasen{  margin:0 auto 1em; text-align: center; line-height: 1;}
  #menu .booth .ttl_wrap .text_wrap{ margin-bottom: 2em;}
  #menu .booth .ttl_wrap .text_wrap .hush{ font-weight: bold; display: block;}
}







#map{ background: #e8e8de; padding: 1px 0 6em;}
#map .flex_wrap{display:flex;justify-content:space-between;align-items:flex-start;}
#map .flex_wrap .left{ width: 46%;}
#map .flex_wrap .right{ width: 46%;}
#map .flex_wrap .ttl_wrap{display:flex;justify-content:center;align-items:center; margin-bottom: 1em;}
#map .flex_wrap .ttl_wrap .icon{ width: 3em; margin-right: 0.75em;}
#map .flex_wrap .ttl_wrap .text{ font-size: 1.5em; font-weight: 600; line-height: 1.2;}
#map .flex_wrap .ttl_wrap .text .s{ font-size: 0.9em;}
#map .flex_wrap .img{ position: relative;}
#map .flex_wrap .img::after{content: "クリックで拡大"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 1.2em; color: #555;
 text-shadow: 1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff,0  1px 0 #fff,1px  0 0 #fff,0 -1px 0 #fff,-1px  0 0 #fff;}


@media all and (max-width: 768px) {
#map{ background: #e8e8de; padding: 1px 0 6em;}
#map .flex_wrap{display:block;}
#map .flex_wrap .left{ width: 100%; margin-top: 4em;}
#map .flex_wrap .right{ width: 100%; margin-top: 4em;}
#map .flex_wrap .ttl_wrap{display:block; margin-bottom: 0.2em; text-align: center; font-size: 1.6em;}
#map .flex_wrap .ttl_wrap .icon{ width: 1.2em; margin-right: 0.3em; display: inline-block;}
#map .flex_wrap .ttl_wrap .text{ font-size: 1.0em; font-weight: 600; line-height: 1.0; display: inline;}
#map .flex_wrap .ttl_wrap .text .s{}
#map .flex_wrap .img{}
#map .flex_wrap .img::after{ font-size: 1.4em;}

}





#access{ background: #595757;; padding: 1px 0 6em;}
#access h2.co_ttl{ color: #FFF;}
#access .flex_wrap{display:flex;justify-content:space-between;align-items:flex-start;}
#access .flex_wrap .left{ width: 46%;}
#access .flex_wrap .right{ width: 46%;}
#access .flex_wrap .ttl_wrap{ font-size: 1.5em; font-weight: bold; color: #FFF;text-align: center; margin-bottom: 0.5em;}
#access .flex_wrap .img{ position: relative;}
#access .flex_wrap .img .google_map{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#access .flex_wrap .img .google_map iframe{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}


@media all and (max-width: 768px) {
#access{ background: #595757; padding: 1px 0 6em;}
#access .flex_wrap{display:block;}
#access .flex_wrap .left{ width: 100%; margin-top: 4em;}
#access .flex_wrap .right{ width: 100%; margin-top: 4em;}
#access .flex_wrap .ttl_wrap{ font-size: 1.6em; margin-bottom: 0.2em;}
}




#archive{ background: #e7e7e7;; padding: 1px 0 6em;}
#archive .flex_wrap{display:flex;justify-content:center;align-items:flex-start;}
#archive .flex_wrap .left{ margin-right: 4em;}


@media all and (max-width: 768px) {

#archive{ background: #e7e7e7;; padding: 1px 0 6em; text-align: center;}
#archive .flex_wrap{display:inline-block; text-align: left; font-size: 1.2em;}
#archive .flex_wrap .left{ margin: 0 auto;}
#archive .flex_wrap .left,
#archive .flex_wrap .right{}
}



#text{ background: #2c6aa5; padding: 3em 0;}
#text .text{ text-align: center; color: #FFF; font-weight: bold; font-size: 1.5em;}


@media all and (max-width: 768px) {
}



#contact{ margin: 4em auto;}
#contact .flex_wrap{ margin-top: 3em;}
#contact .flex_wrap .d2{ margin: 0 2em;;}

#contact .flex_wrap2{justify-content: center; margin-top: 1em;;}
#contact .flex_wrap2 > div{ width: 7em;}
#contact .flex_wrap2 .d4{ margin-right:4em;}


@media all and (max-width: 768px) {

#contact .flex_wrap{ display: block; margin: 3em auto 0;}
#contact .flex_wrap .d1,
#contact .flex_wrap .d2,
#contact .flex_wrap .d3{ margin:0.5em auto; text-align: center;}
#contact .flex_wrap .d1{ width: 36%;}
#contact .flex_wrap .d2{ width: 75%;}
#contact .flex_wrap .d3{ width: 58%;}

#contact .flex_wrap2{ display: flex; justify-content: center;}
}