html, body{
  height: 100%;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
}



/*---------------------------------
utility
---------------------------------*/
@media (min-width: 801px){
  .u_sp{
    display: none !important;
  }
}
@media (max-width: 800px){
  .u_pc{
    display: none !important;
  }
}



/*---------------------------------
opening
---------------------------------*/
.opening{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
}
.opening picture,
.opening img{
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 800px){
  .opening__copy{
    width: 309px;
    padding: 0 0 50%;
  }
  .opening picture{
    position: absolute;
    bottom: 0;
    left: 0;
  }
}



/*---------------------------------
header
---------------------------------*/
.header{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 114px;
  z-index: 98;
  background: #fff;
  width: 212px;
  padding: 20px 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.header__logo{
  margin: 0 auto;
}
.header__nav{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 30px;
  font-size: 18px;
  font-family: 'Manrope', sans-serif;
  margin: 0 0 30px;
} 
.header__nav li{
  position: relative;
  width: 100%;
}
.header__nav span{
  cursor: pointer;
  transition: .3s color;
  display: block;
  text-align: center;
}
.header__nav span:hover{
  color: #417299;
}
.header__subnav{
  position: absolute;
  right: calc(100% + 50px);
  top: 50%;
  transform: translateY(-50%);
  width: 225px;
  height: 98px;
  background: url(../img/subnav-frame.png) center / contain no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 8px;
  text-align: center;
  font-size: 13px;
  padding: 0 26px 0 0;
  opacity: 0;
  pointer-events: none;
  transition: .3s opacity;
}
.header__nav li:hover .header__subnav{
  opacity: 1;
  pointer-events: all;
}
.header__subnav::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 50px;
}
.header__subnav li{
  transition: .3s color;
  cursor: pointer;
}
.header__subnav li:hover{
  color: #C7C7C7;
}
.header__sns{
  border-top: 1px solid #D8D8D8;
  width: 60px;
  padding: 30px 0 0;
  margin: 0 auto;
  text-align: center;
}
.header__sns img{
  width: 19px;
}
.header__date{
  width: 86px;
  margin: 0 auto;
}
@media (max-width: 800px){
  .header{
    bottom: 0;
    width: 246px;
    padding: 40px;
    opacity: 0;
    pointer-events: none;
    transition: .6s opacity;
  }
  .header.is_active{
    opacity: 1;
    pointer-events: all;
  }
  .header::before{
    content: "";
    width: calc(100% - 246px);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background: url(../img/nav-bg.jpg) center / cover;
  }
  .header__logo{
    width: 113px;
  }
  .header__subnav{
    position: static;
    transform: none;
    width: auto;
    height: auto;
    background: none;
    row-gap: 6px;
    font-size: 14px;
    padding: 6px 0 0;
    opacity: 1;
    pointer-events: all;
    display: none;
    color: #000 !important;
  }
  .header__nav li.is_active span{
    color: #C7C7C7;
  }  
  .header__nav li.is_active .header__subnav{
    display: flex;
  }  
  /* add */
  .header__nav{
    row-gap: 18px;
    margin: 0 0 20px;
    font-size: 15px;
  }
  .header__sns{
    padding: 20px 0 0;
  }
}



/*---------------------------------
top-hamburger
---------------------------------*/
.top-hamburger{
  position: fixed;
  top: 17px;
  right: 12px;
  z-index: 99;
  width: 42px;
}
.top-hamburger._on{
  display: none;
}



/*---------------------------------
top-icon
---------------------------------*/
.top-icon{
  display: flex;
  justify-content: center;
  flex-direction: column;
  row-gap: 10px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: #fff;
  padding: 27px 18px 30px 27px;
}
.top-icon__item{
  display: flex;
  align-items: center;
  column-gap: 4px;
}
.top-icon__item img{
  width: 19px;
}
.top-icon__item div{
  font-size: 14px;
}
@media (max-width: 800px){
  .top-icon{
    top: auto;
    bottom: 0;
    right: 0;
    padding: 18px 0;
    column-gap: 20px;
    flex-direction: row;
  }
}



/*---------------------------------
top-logo
---------------------------------*/
.top-logo{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 113px;
  height: 107px;
  background: #fff;
  padding: 0 25px;
  display: flex;
  align-items: center;
}



/*---------------------------------
top-date
---------------------------------*/
.top-date{
  position: fixed;
  bottom: 66px;
  left: 10px;
  z-index: 1;
  width: 130px;
}



/*---------------------------------
top-map
---------------------------------*/
.top-map{
  height: 100%;
  overflow: hidden;
  position: relative;
}
.top-map__content{
  width: 168%;
  position: relative;
  transition: 1s width;
  cursor: move;
}
.top-map__control{
  position: fixed;
  bottom: 40px;
  right: 60px;
  z-index: 1;
  display: flex;
  column-gap: 14px;
}
.top-map__control img{
  width: 40px;
  cursor: pointer;
}
.top-map__link{
  position: absolute;
}
.top-map__link.event_01{
  width: 5%;
  height: 1.55%;
  top: 59.2%;
  left: 15.5%;
  cursor: pointer;
}
.top-map__link.event_02{
  width: 10.3%;
  height: 1.55%;
  top: 43.4%;
  left: 29%;
  cursor: pointer;
}
.top-map__link._01{
  width: 5.5%;
  height: 0.95%;
  top: 78.5%;
  left: 29.9%;
}
.top-map__link._02{
  width: 4.1%;
  height: 2.05%;
  top: 81.4%;
  left: 26.5%;
}
.top-map__link._03{
  width: 3.6%;
  height: 1.05%;
  top: 81.4%;
  left: 31.7%;
}
.top-map__link._04{
  width: 4.3%;
  height: 1.05%;
  top: 89.4%;
  left: 27.5%;
}
.top-map__link._05{
  width: 2.2%;
  height: 1.05%;
  top: 70.8%;
  left: 12.5%;
}
.top-map__link._06{
  width: 4.3%;
  height: 1.05%;
  top: 65.2%;
  left: 17.7%;
}
.top-map__link._07{
  width: 9.5%;
  height: 1.05%;
  top: 51.6%;
  left: 10%;
}
.top-map__link._08{
  width: 3.6%;
  height: 1.05%;
  top: 81.3%;
  left: 35.7%;
}
.top-map__link._09{
  width: 4.7%;
  height: 2.05%;
  top: 78.1%;
  left: 36.5%;
}
.top-map__link._10{
  width: 4%;
  height: 1.05%;
  top: 80%;
  left: 46.2%;
}
.top-map__link._11{
  width: 4.7%;
  height: 1.05%;
  top: 84.7%;
  left: 54.2%;
}
.top-map__link._12{
  width: 6%;
  height: 1.05%;
  top: 76.77%;
  left: 44.2%;
}
.top-map__link._13{
  width: 3%;
  height: 2.05%;
  top: 71.2%;
  left: 40.1%;
}
.top-map__link._14{
  width: 3.5%;
  height: 2.15%;
  top: 70.7%;
  left: 46.1%;
}
.top-map__link._15{
  width: 4.5%;
  height: 2.15%;
  top: 65%;
  left: 45.3%;
}
.top-map__link._16{
  width: 2.5%;
  height: 1.05%;
  top: 67.9%;
  left: 48.8%;
}
.top-map__link._17{
  width: 5.2%;
  height: 2.05%;
  top: 62.1%;
  left: 41.8%;
}
.top-map__link._18{
  width: 4.3%;
  height: 1.05%;
  top: 64.9%;
  left: 39.5%;
}
.top-map__link._19{
  width: 1.8%;
  height: 1.05%;
  top: 31.5%;
  left: 47.7%;
}
.top-map__link._20{
  width: 6.8%;
  height: 1.05%;
  top: 15.2%;
  left: 57%;
}
.top-map__link._21{
  width: 5.3%;
  height: 1.05%;
  top: 21.9%;
  left: 67.5%;
}
.top-map__link._22{
  width: 7.7%;
  height: 1.05%;
  top: 24.7%;
  left: 68%;
}
.top-map__link._23{
  width: 4.4%;
  height: 2.05%;
  top: 46.2%;
  left: 72.6%;
}
.top-map__link._24{
  width: 3.4%;
  height: 1.05%;
  top: 72.2%;
  left: 71.6%;
}
.top-map__link._25{
  width: 5.5%;
  height: 2.05%;
  top: 92.8%;
  left: 66.3%;
}
.top-map__link._26{
  width: 2.7%;
  height: 2.05%;
  top: 90.1%;
  left: 71.5%;
}
.top-map__link._27{
  width: 6.4%;
  height: 1.05%;
  top: 87.4%;
  left: 79.5%;
}
@media (max-width: 800px){
  .top-map{
    overflow: auto;
  }
  .top-map__content{
    width: 363%;
  }  
  .top-map__control{
    right: 11px;
    bottom: 68px;
    column-gap: 10px;
  }
  .top-map__control img{
    width: 32px;
  }
}



/*---------------------------------
popup
---------------------------------*/
.popup{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: rgba(65, 114, 153, .55);
  display: none;
}
.popup__container{
  position: absolute;
  top: 54px;
  right: 269px;
  bottom: 54px;
  left: 63px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}
.popup__head{
  width: 237px;
  height: 100%;
  background: #000 url(../img/popup-bg_pc.png) center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup__title{
  color: #fff;
  font-size: 32px;
  font-family: 'Manrope', sans-serif;
  text-align: center;
}
.popup__title span{
  font-size: 16px;
  font-family: 'EB Garamond', serif;
  display: block;
}
.popup__body{
  padding: 45px 40px;
  overflow: auto;
  flex: 1;
}
.popup__label{
  font-size: 45px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-weight: 600;
  margin: 0 0 30px;
  line-height: 1.2;
}
.popup__label._en{
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: 40px;
}
.popup__text{
  color: #DE0D09;
  font-size: 15px;
  line-height: 2;
}
.popup__text span{
  color: #000;
  font-weight: bold;
}
.popup__close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 41px;
  cursor: pointer;
}
@media (max-width: 800px){
  .popup{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .popup__container{
    top: 90px;
    right: 20px;
    bottom: 90px;
    left: 20px;
    display: block;
  }
  .popup__head{
    width: auto;
    height: 66px;
    background: #000 url(../img/popup-bg_sp.png) center / cover;
  }
  .popup__close{
    width: 26px;
    position: fixed;
    right: 11px;
    top: 79px;
  }
  .popup__title{
    font-size: 24px;
    line-height: 1.3;
  }
  .popup__title span{
    font-size: 13px;
  }
  .popup__body{
    padding: 40px 16px;
    height: calc(100% - 66px);
  }
  .popup__label{
    font-size: 40px;
  }
  .popup__label._sp30{
    font-size: 30px;
    text-align: center;
  }
  .popup__label ._sp28{
    font-size: 28px;
    letter-spacing: -.12em;
  }
}

/*---------------------------------
access
---------------------------------*/
.access__label{
  font-size: 26px;
  font-weight: 500;
  display: flex;
  align-items: flex-end;
  column-gap: 20px;
  margin: 0 0 20px;
}
.access__label span{
  font-size: 16px;
  padding: 0 0 5px;
}
.access__image:not(:last-of-type){
  margin: 0 0 30px;
}
@media (max-width: 800px){
  .access__label{
    font-size: 24px;
  }
  .access__label:not(._keepflex){
    display: block;
  }
  .access__label:not(._keepflex) span{
    display: block;
  }
}

/*---------------------------------
event
---------------------------------*/
.event__section:not(:last-of-type){
  margin: 0 0 40px;
}
.event__flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 677px;
  column-gap: 30px;
}
.event__flex._reverse{
  flex-direction: row-reverse;
}
.event__body{
  flex: 1;
}
.popup__text + .event__flex,
.popup__text + .event__table{
  margin: 20px 0 0;
}
.event__table th,
.event__table td{
  font-size: 14px;
  padding-bottom: 4px;
  line-height: 1.85;
}
.event__table th{
  color: #DE0D09;
  font-weight: 500;
  white-space: nowrap;
  padding-right: 20px;
}
.event__tag{
  display: inline-block;
  color: #fff;
  background: #DE0D09;
  font-size: 15px;
  padding: 3px 15px;
  margin: 0 0 10px;
}
.event__label{
  font-size: 34px;
  font-weight: 500;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  margin: 0 0 5px;
}
.event__text{
  margin: 50px 0 0;
  font-size: 13px;
  line-height: 1.85;
}
.event__box{
  border: 2px dotted #DE0D09;
  border-radius: 10px;
  padding: 22px 37px;
  margin: 0 0 55px;
}
.event__box h4{
  font-size: 24px;
  font-weight: 500;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  color: #DE0D09;
  margin: 0 0 10px;
}
.event__box p{
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 10px;
}
.event__box b{
  display: block;
  font-size: 15px;
}
.event__textbox{
  border: 1px solid #DE0D09;
  color: #DE0D09;
  padding: 10px 13px;
  font-size: 15px;
}
@media (max-width: 800px){
  .event__flex{
    display: block;
  }
  .event__image img{
    min-width: 100%;
  }
  .event__image{
    padding: 15px 0;
  }
  .event__text{
    letter-spacing: -.023;
  }
}