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

body,
html { overflow-x:hidden; }

.title { position:relative; overflow:visible; text-align:center; margin:0 auto 40px auto; height:110px; }
.title::before { content:''; display:block; background:url(../img/lp/bg_title_01.png) center top / 1050px 110px no-repeat; width:calc(100% + 90px); left:-46px; position:absolute; height:110px; }
.title img { position:relative; z-index:2; display:block; width:362px; margin:0 auto;}

#mainVisual { width:100%; /* background:url(../img/lp/img_main_01.jpg) center top / auto 100% no-repeat; */ padding:36.45% 0 0 0; margin:0 auto 40px auto; position:relative;}
#mainVisual .mainVisual01 { position:absolute; width:100%; height:100%; left:0; top:0; z-index:40; background:url(../img/top/img_main_01.png) center top / auto 100% no-repeat; /* animation:mainvisual 14.5s linear 0s infinite backwards; */ }
#mainVisual .mainVisual02 { position:absolute; width:100%; height:100%; left:0; top:0; z-index:30; background:url(../img/top/img_main_02.png) center top / auto 100% no-repeat; animation:mainvisual 14.5s linear 3.5s infinite backwards; }
#mainVisual .mainVisual03 { position:absolute; width:100%; height:100%; left:0; top:0; z-index:20; background:url(../img/top/img_main_03.png) center top / auto 100% no-repeat; animation:mainvisual 14.5s linear 7.5s infinite backwards; }
#mainVisual .mainVisual04 { position:absolute; width:100%; height:100%; left:0; top:0; z-index:10; background:url(../img/top/img_main_04.png) center top / auto 100% no-repeat; animation:mainvisual 14.5s linear 11.5s infinite backwards; }
 
 @keyframes mainvisual {
	0% { opacity:0; }
	1.72% { opacity:1; }
	24.13% { opacity:1; }
	29.30% { opacity:0; }
	100% { opacity:0; }
}


#info {font-family: "M PLUS Rounded 1c"; color:#fff; }
#info h2 { text-align:center; font-size:48px; margin:0 auto 10px auto }
#info h2 span:nth-of-type(1) { display:block; line-height:1; margin:0 0 10px 0; font-weight:bold; }
#info h2 span:nth-of-type(2),
#info h2 span:nth-of-type(3) { display:inline-block; margin:0 1em; font-size:35%; line-height:1.5em; }
#info a { display:block;  font-size:18px; background:#E99A00; color:#fff; text-align:center; width:200px; padding:10px 0; margin:0 auto; line-height:1; text-decoration:none; }
#info a:hover { background:#ccc; color:#fff; text-decoration:none; }


#commonInfoBox h3 { background: #8caba4;}


.bnrBox { }
.bnrBox ul { display:flex; flex-wrap:wrap; justify-content:space-between; }
.bnrBox ul li { flex-grow:0; flex-basis:calc(50% - 10px); flex-shrink:1; margin:0 0 10px 0; }
/* .bnrBox ul li:last-of-type { flex-basis:100%; } */

.eventBox { margin:0 auto 20px auto; box-sizing:border-box; padding:0 20px 20px 20px; border-bottom:#ddd dotted 1px; }



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

}

@media screen and (max-width:1920px) {
#mainVisual { padding:700px 0 0 0; }
}

@media screen and (max-width:1200px) {
#mainVisual { padding:60% 0 0 0; height: auto}
}

@media screen and (max-width:768px) {
  .title { height:auto; background:#a67a61; padding:5px 0; }
  .title::before { display:none; }
  .title img { position:relative; z-index:2; display:block; width:160px; margin:0 auto;}

  #info h2  { font-size:11vw; }
	.bnrBox ul li { flex-basis:100%;}

  /* ACCESS */
  #access h4 img { display:block; text-align:center; width:230px; margin:0 auto; }
  #access h4::before { display:block; content:''; position:absolute; bottom:11px; height:2px; width:calc(50% - 127px); left:0; border-bottom:#000 solid 1px; border-top:#000 solid 3px; }
  #access h4::after { display:block; content:''; position:absolute; bottom:11px; height:2px; width:calc(50% - 127px); right:0; border-bottom:#000 solid 1px; border-top:#000 solid 3px; }


  /* ROUTE MAP */
  #route h4 img { display:block; text-align:center; width:204px; margin:0 auto; }
  #route h4::before { display:block; content:''; position:absolute; bottom:11px; height:2px; width:calc(50% - 120px); left:0; border-bottom:#000 solid 1px; border-top:#000 solid 3px; }
  #route h4::after { display:block; content:''; position:absolute; bottom:11px; height:2px; width:calc(50% - 120px); right:0; border-bottom:#000 solid 1px; border-top:#000 solid 3px; }
  #route h5 { font-size:5vw; }
  #route h5 br { display:inline; }


  /* LOCATION */
  #location h4 img { display:block; text-align:center; width:154px; margin:0 auto; }
  #location h4::before { display:block; content:''; position:absolute; bottom:11px; height:2px; width:calc(50% - 90px); left:0; border-bottom:#000 solid 1px; border-top:#000 solid 3px; }
  #location h4::after { display:block; content:''; position:absolute; bottom:11px; height:2px; width:calc(50% - 90px); right:0; border-bottom:#000 solid 1px; border-top:#000 solid 3px; }
  #location h5 { font-size:5vw; }
  #location h5 br { display:inline; }

  /* PLAN */
  #plan h4 img { display:block; text-align:center; width:188px; margin:0 auto; }
  #plan h4::before { display:block; content:''; position:absolute; bottom:11px; height:2px; width:calc(50% - 105px); left:0; border-bottom:#000 solid 1px; border-top:#000 solid 3px; }
  #plan h4::after { display:block; content:''; position:absolute; bottom:11px; height:2px; width:calc(50% - 105px); right:0; border-bottom:#000 solid 1px; border-top:#000 solid 3px; }
  #plan h5 { font-size:5vw; }
  #plan h5 br { display:inline; }
  #plan .specTitle { flex-wrap:wrap;}
  #plan .specTitle h6 { flex-basis:160px; margin:0 0 10px 0;  } 
  #plan .specTitle .specBox { flex-basis:100%;}
  .planPhoto ul li { flex-basis:100%; margin:0 0 20px 0; }
  .planPhoto ul li figure { float:left; width:35%; margin:0 5% 0 0; }
  .planPhoto ul li p.detailTitle { float:right; text-align:left; width:60%; font-size:14px; }
  .planPhoto ul li p { font-size:12px; line-height:1.5em; }

  /* STRUCTURE */
  #structure h4 img { display:block; text-align:center; width:85px; margin:0 auto; }
  #structure h4::before { display:block; content:''; position:absolute; bottom:11px; height:2px; width:calc(50% - 54px); left:0; border-bottom:#000 solid 1px; border-top:#000 solid 3px; }
  #structure h4::after { display:block; content:''; position:absolute; bottom:11px; height:2px; width:calc(50% - 54px); right:0; border-bottom:#000 solid 1px; border-top:#000 solid 3px; }

  /* OUTLINE */
  #outline h4 { font-size:5vw; }
  #outlineBox ul { flex-basis:100%; }

}

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

#infoBox { padding:0; height:auto; }
#infoBox h3 { position:static; background:#8caba4; text-align:left; width:100%; height: auto;}
#infoBox ul { padding:20px; height:150px; }
#infoBox ul li a { font-size:16px; }

}
@media only screen and (max-width:360px){
#infoBox ul li { padding:0; position:static; }
#infoBox ul li span { display:block; position:static; }
}