/*    
    Add by Misaki*
    2021/09/27
    */
    .pr{background-color:var(--bg);}
    .pr_video{width:100%; position:relative; display:flex; }
    .pr_video video{width:100%;}

/* ======
  main
 ====== */
    body{background:transparent;}
    main {overflow: hidden;}
    main section {position: relative;}

/* ======
  headline
  ====== */ 
    h2.headline{font-size:1.1rem; color:var(--deep); margin-bottom:1.5rem;display:flex; align-items: flex-end; flex-wrap:wrap; font-weight:400;}
    h2.headline::before {content: attr(data-en); display: block; color:var(--deep); font-weight:600; margin-right:.5rem;text-transform:capitalize; font-family: 'Red Hat Display', sans-serif; line-height: 0.8; font-size:2.5rem;}
    main > section:not(:first-of-type) div.headline{width:100%;}
    
/* ======
  contents
  ====== */ 
    
    .riria{display:flex; padding:1.5rem 0;}
    .riria > div{flex:1; padding:0 1.5rem;}
    .riria > div strong{color:#fff; padding:1rem; display:block;}
    .riria > div strong.full{background-color:var(--red);}
    .riria > div strong.crowded{background-color:var(--orange);}
    .riria > div strong.slightly{background-color:var(--yellow);}
    .riria > div strong.empty{background-color:var(--blue);}
    .riria > div:first-child{flex:0 0 45%; display:flex;}
    .riria > div h2{display:flex; flex:1; align-items:center; justify-content:center; margin:0;}
    .riria > div h2 strong{background-color:#FABE00; color:#fff; font-weight:600; font-size:1.1rem; padding:.5rem 1.5rem; display:inline-block; margin-left:1rem;}
    .riria > div p{margin-bottom:0; text-align:center;}
    .riria > div p.riria_time{display:flex; align-items:center; justify-content:center; font-family: 'Red Hat Display', sans-serif; font-size:1.2rem; font-weight:600; margin-bottom:.5rem;}
    .riria > div:not(:last-child){border-right:1px solid #B1AFAF;}

    .news{position:relative;}
    .news a > div{margin:.8rem 0 0;}
    .news .swiper_date{font-size:.85rem; display:flex; margin-bottom:.3rem; align-items:center;}
    .news .swiper_date span.badge{font-size:.8rem; border-radius:0; font-weight:400; padding:.3rem 1rem; text-align:center; display:inline-block; margin-right:.5rem;}
    .news .swiper_date span.badge.event{background-color:var(--yellow);}
    .news .swiper_date span.badge.info{background-color:var(--red);}
    .news .swiper_date span.badge.other{background-color:var(--blue);}
    .news p{margin:0; font-size:.88rem; font-weight:500;}
    .swiper-button-next, .swiper-button-prev{width:35px; height:35px; color:#fff;}
    .swiper-button-next{left:calc(100% + 10px); right:auto;}
    .swiper-button-prev{right:calc(100% + 10px); left:auto;}
    .swiper-button-next:after,
    .swiper-button-prev:after{font-size:inherit; background-color:var(--red); width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight: 1000;}

   .areamap{display:flex; align-items: flex-start;}
   .areamap > div.areamap_map{position:relative;}
   div.areamap_map_inner {counter-reset: number 0; }
   div.areamap_map_inner div.icon-point{margin:0; position: absolute; cursor: pointer;}
   div.areamap_map_inner div.icon-point.icon01{left:53%; top:35%;}
   div.areamap_map_inner div.icon-point.icon02{left:28%; bottom:44%;}
   div.areamap_map_inner div.icon-point.icon03{left:28%; top:33%;}
   div.areamap_map_inner div.icon-point.icon04{left:71%; bottom:27%;}
   div.areamap_map_inner div.icon-point.icon05{left:81%; bottom:33%;}
   div.areamap_map_inner div.icon-point.icon06{left:66%; bottom:34%;}
   div.areamap_map_inner div.icon-point.icon07{left:46%; bottom:21%;}
   div.areamap_map_inner div.icon-point.icon08{left:22%; bottom:17%;}
   div.areamap_map_inner div.icon-point.icon09{left:28%; bottom:35%;}
   div.areamap_map_inner div.icon-point.icon10{left:60%; bottom:4%;}
   div.areamap_map_inner div.icon-point > p{position: relative; margin:0;}
   div.areamap_map_inner div.icon-point > p > span{background-color:#ffffff; text-align:center; display:none; padding:.1rem .5rem; font-size:.7rem; line-height:1.2; position: relative;}
   div.areamap_map_inner div.icon-point > p:before,
   div.areamap_map_inner div.icon-point > p:after{margin:auto; position:absolute; bottom:100%; left:0; right:0; -webkit-transition: all .3s; transition: all .3s; line-height:1; width:25px; height:25px;}
   div.areamap_map_inner div.icon-point > p:before{counter-increment: number 1; content: counter(number) " "; font-size:.9rem; font-weight:600;  display:flex; align-items:center; justify-content:center;  color:var(--red); font-family: 'Red Hat Display', sans-serif; z-index:2;}
   div.areamap_map_inner div.icon-point > p:hover:before{color:#ffffff;}
   div.areamap_map_inner div.icon-point > p:after{display:block; content:''; border-radius:50%; border:2px solid var(--red); background-color:#ffffff;}
   div.areamap_map_inner div.icon-point > p:hover:after{border:1px solid #ffffff; background-color:var(--red);}
   div.areamap_map_inner .modal-header {border-bottom: 2px solid var(--red);}
   div.areamap_map_inner .modal-header .close{background-color: transparent; border:none;}
   div.areamap_map_inner .modal-content{border-radius:0; border:2px solid var(--red);}
   div.areamap_map_inner .modal-content img{margin-bottom:1rem;}

   .areamap > div.areamap_spot{flex:1;}   
   .areamap > div.areamap_spot .subtab{display:flex; flex-wrap:wrap; counter-reset: num 0; margin:0 -7px 0 calc(1.5em - 10px);}
   .areamap > div.areamap_spot .subtab > div{display:flex; margin:0 7px 10px; flex:0 0 calc(50% - 14px);}
   .areamap > div.areamap_spot .subtab > div:nth-last-child(-n+2){margin-bottom:0;}
   .areamap > div.areamap_spot .subtab > div > div{background-color:#ffffff; min-height:45px; display:flex; flex:1; align-items:center; cursor: pointer; -webkit-transition: all .3s; transition: all .3s; font-weight:500;}

.areamap > div.areamap_spot .subtab > div > div span{font-size:.83rem; display:inline-block; padding:.3rem .7rem; flex:1;}
.areamap > div.areamap_spot .subtab > div > div:hover{text-decoration:none; background-color:#fdeded;}
.areamap > div.areamap_spot .subtab > div > div:before{align-self:stretch; display:flex; align-items:center; justify-content:center; counter-increment: num 1; content: counter(num) ""; color:#ffffff; background-color:#f27779; font-family: 'Red Hat Display', sans-serif; font-weight:500; font-size:1.1rem; padding:.3rem; width:30px;}



.index_contents{display:flex; flex-wrap:wrap; margin:0 -10px;}
.index_contents > *{margin:0 10px; border:3px solid #ccc; display:flex; align-items:center; justify-content:center; text-align:center;flex:0 0 calc(33.33% - 20px); padding:1rem;}
.index_contents > *:nth-child(-n+2){flex:0 0 calc(50% - 20px); margin-bottom:20px;}
.index_contents > * span{font-size:1.9rem; font-weight:700; font-family: 'Red Hat Display', sans-serif; -webkit-transition: all .3s; transition: all .3s;}
.index_contents > * p{margin:0; font-family: 'Noto Serif JP', serif; font-size:1rem; -webkit-transition: all .3s; transition: all .3s;}
.index_contents > *:nth-child(1){border-color:var(--red);}
.index_contents > *:nth-child(1) span{color:var(--red);}
.index_contents > *:nth-child(2){border-color:var(--orange);}
.index_contents > *:nth-child(2) span{color:var(--orange);}
.index_contents > *:nth-child(3){border-color:var(--water);}
.index_contents > *:nth-child(3) span{color:var(--water);}
.index_contents > *:nth-child(4){border-color:var(--purple);}
.index_contents > *:nth-child(4) span{color:var(--purple);}
.index_contents > *:nth-child(5){border-color:var(--green);}
.index_contents > *:nth-child(5) span{color:var(--green);}
.index_contents > *:hover span,
.index_contents > *:hover p{color:#fff;}
.index_contents > *:nth-child(1):hover{background-color:var(--red);}
.index_contents > *:nth-child(2):hover{background-color:var(--orange);}
.index_contents > *:nth-child(3):hover{background-color:var(--water);}
.index_contents > *:nth-child(4):hover{background-color:var(--purple);}
.index_contents > *:nth-child(5):hover{background-color:var(--green);}
.index_contents > *:nth-child(5) #group_2687 #path_18064,
.index_contents > *:nth-child(5) #group_2687 #group_2684 > path,
.index_contents > *:nth-child(5) #group_2687 #group_2682 > path,
.index_contents > *:nth-child(5) #group_2679 > path{ -webkit-transition: all .3s; transition: all .3s;}
.index_contents > *:nth-child(5):hover #group_2687 #path_18064,
.index_contents > *:nth-child(5):hover #group_2687 #group_2684 > path,
.index_contents > *:nth-child(5):hover #group_2687 #group_2682 > path,
.index_contents > *:nth-child(5):hover #group_2679 > path{fill:#fff;}