/*reset*/
.fnav-inner-inner ul+ul>li:nth-last-child(2){display: none;}

html,
body#page-grand,
body#page-grand .container,
body#page-grand .container-inner,
body#page-grand .container-inner-inner,
body#page-grand .content,
body#page-grand .inner,
body#page-grand .inner-inner,
body#page-grand #top_freearea{height: 100%;}

body#page-grand  .content .inner-inner{
    margin: 0;
    padding: 0;
}

body#page-grand #top_freearea{
    width: 100%;
    margin: 0;
}

body#page-grand .header_wrap,
body#page-grand #frmplanseekY,
body#page-grand .breadcrumbs,
body#page-grand .hd,
body#page-grand .move,
body#page-grand footer{display: none;}

body#page-grand #top_freearea,
body#page-grand .wrapper{margin:0;}

@media screen and (max-width: 640px){
    body#page-grand .content,
    body#page-grand #top_freearea{padding: 0;}
}

.enterLink{
    display: block;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%;
}

.bgGroundTop{
    display: block;
    height: 100%;
    position:relative;
}

.bgGroundTop span{display: block;}

.wrapGtMv{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/grand/bg_enter_pc.jpg) no-repeat center top;
    background-size: cover;
}

.wrapGtMv.end{
    background-position: center top -110px;
    transition: all .8s ease-out;
}

.wrapGtMv::after{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#fff;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1500ms ease 300ms;
    backface-visibility: hidden;
    content: '';
}

.wrapGtMv.fadeout::after {opacity: 0;}

.wrapGtMv.fadeIn{
    opacity: 1;
}

.wrapGtMvIn{
    position: relative;
    width: 1100px;
    height: 100%;
    margin:0 auto;
}

.wrapCatchArea{
    display: flex;
    flex-direction:row-reverse;
    position: absolute;
    top:0;
    right: 0;
}

.wrapCatchArea .imgCatch_1{
    margin:45px 0 0 -20px;
}

.wrapCatchArea .imgCatch_2{
    margin: 75px 0 0 -20px;
}

.wrapCatchArea .imgCatch_3{
    margin-top:105px;
}

.wrapCatchArea [data-id="imgCatch"]{
    opacity: 0;
    transform: translateY(-50px);
}

.wrapCatchArea [data-id="imgCatch"].fadeIn{
    opacity: 1;
    transform: none;
    transition: opacity 1500ms ease 800ms;
}

.wrapGtMv .bottomLine{
    position: fixed;
    left:50%;
    bottom:0;
    background: url(../img/grand/bg_bottom-line.png) no-repeat center bottom;
    width: 100%;
    min-width: 1100px;
    height: 185px;
    margin-top:70px;
    padding-top: 61px;
    transform: translateX(-50%);
    opacity: 0;
    transition: all .8s ease-out;
}

.wrapGtMv .bottomLine.fadeIn{
    opacity: 1;
    transform: translate(-50%,0);
}

.bottomLineIn{
    position: relative;
    width:1000px;
    height: 137px;
    margin: 0 auto;
}

.bottomLineIn .logo{
    width: 198px;
    margin: 0 auto;
}

.bottomLineIn .iconGrass,
.bottomLineIn .iconFootprint_1,
.bottomLineIn .iconFootprint_2,
.bottomLineIn .iconFootprint_3,
.bottomLineIn .iconFootprint_4,
.bottomLineIn .iconDishes{
    position: absolute;
}

.bottomLineIn .iconGrass{
    top:45px;
    left:200px;
}

.bottomLineIn .iconFootprint_1{
    top:25px;
    left:260px;
}

.bottomLineIn .iconFootprint_2{
    top:53px;
    left:320px;
}

.bottomLineIn .iconFootprint_3{
    top:25px;
    right:300px;
}

.bottomLineIn .iconFootprint_4{
    top:53px;
    right:240px;
}

.bottomLineIn .iconDishes{
    top:53px;
    right:150px;
}

.bottomLineIn:before{
    position: absolute;
    bottom: 0;
    left: -50%;
    width: 200%;
    height: 137px;
    background:#fff;
    z-index: -1;
    content: "";
}

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

    .wrapGtMv{
        background: url(../img/grand/bg_enter_sp.jpg) no-repeat center top ;
        background-size: cover;
    }

    .wrapGtMv.end{
        background-position: center top -50px;
    }

    .wrapGtMvIn{
        width: 100%;
    }

    .wrapCatchArea{
        justify-content:center;
        position: static;
    }

    .wrapCatchArea .imgCatch_1{
        margin:0 0 0 -20px;
    }

    .wrapCatchArea .imgCatch_2{
        margin: 30px 0 0 -20px;
    }

    .wrapCatchArea .imgCatch_3{
        margin-top:50px;
    }

    .wrapCatchArea [data-id="imgCatch"] {width: 70px;}

    .wrapCatchArea [data-id="imgCatch"] img{width: 100%;}

    .wrapGtMv .bottomLine{
        min-width: 100%;
        height: 130px;
        background-size: 1048px 120px;
        padding-top: 50px;
    }

    .bottomLineIn{
        width: 100%;
        height: 100%;
    }

    .bottomLineIn .logo{
        width: 145px;
    }

    .bottomLineIn .logo img,
    .bottomLineIn .iconGrass img,
    .bottomLineIn .iconFootprint_1 img,
    .bottomLineIn .iconFootprint_2 img,
    .bottomLineIn .iconFootprint_3 img,
    .bottomLineIn .iconFootprint_4 img,
    .bottomLineIn .iconDishes img{
        width: 100%;
    }

    .bottomLineIn .iconGrass{
        top:auto;
        bottom:5px;
        left:20px;
        width: 20px;
    }

    .bottomLineIn .iconFootprint_1{
        top:5px;
        left:10px;
        width: 25px;
    }

    .bottomLineIn .iconFootprint_2{
        top:-10px;
        left:40px;
        width: 25px;
    }

    .bottomLineIn .iconFootprint_3{
        top:-15px;
        right:45px;
        width: 25px;
    }

    .bottomLineIn .iconFootprint_4{
        top:5px;
        right:10px;
        width: 25px;
    }

    .bottomLineIn .iconDishes{
        top:auto;
        bottom:10px;
        right:10px;
        width: 45px;
    }

    .bottomLineIn:before{
        display: none;
    }


}

ul.grouphotel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
li.groupbanner {
    margin: 0 15px 15px;
}
li.groupbanner:last-child {
    margin: 0 15px 15px;
}
@media screen and (max-width: 640px){
ul.grouphotel {
    justify-content: space-between;
}
li.groupbanner {
    margin: 0 0  20px 0;
}
li.groupbanner:last-child {
    margin: 0 0  20px 0;
}

}


/* --------------------
  add 20220627 
  -------------------- */
.iconBestrate{display: none;}
.bnrGroupHotel {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  width: 960px;
  margin: 20px auto 60px;
  gap: 20px;
  justify-content: space-between;
}
.bnrGroupHotel li {
  margin: 0 !important;
}
@media screen and (min-width: 641px){
  .sp{display: none;}
  header .header_tel{font-family: century, serif;}
}
@media screen and (max-width: 640px){
  .pc{display: none;}
  .iconBestrate{
    width: 40%;
    display: block;
    position: absolute;top: 10px;right: 14px;
  }
  .iconBestrate img{max-width: 100%;}
  .bnrNewOpen img {
    max-width: 100%;
  }
  .bnrGroupHotel {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 14px;
    width: 92%;
    gap: 5px 4%;
  }
  .bnrGroupHotel li {
    width: 48%;
  }
  .bnrGroupHotel img {
    max-width: 100%;
  }
}

/* navi */
.flMenu{display: none;}
@media screen and (max-width: 640px){
footer{padding-bottom: 50px;}
.flMenu{
  background: #503700;
  display: -webkit-flex;
  display: flex;
  align-items: stretch;
  width: 100%;
  position: fixed;
  bottom: 0;left: 0;
  z-index: 100;
  border-top: 2px solid #fff;
}
.flMenu>*{width: 25%;height: 100%;}
.flMenu a,
.flMenu_btn{
  display: block;height: 100%;text-decoration: none;color: #fff;padding: 6px 3px;
  font-size: 12px;line-height: 1;
  text-align: center;
  border-left: 1px solid #fff;
  }
.flMenu_plan a{background: #887224;border-left: none;}
.flMenu_btn>span:before,
.flMenu_plan a:before,
.flMenu_tel a:before,
.flMenu_access a:before{
  content:'';
  display: block;
  height: 23px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 96%;
  margin-bottom: 3px;
}
.flMenu_plan a:before{background-image: url(/img/ico_calendar.png);}
.flMenu_tel a:before{background-image: url(/img/ico_tel.png);}
.flMenu_access a:before{background-image: url(/img/ico_access.png);}
.flMenu_btn>span:before{background-image: url(/img/ico_menu.png);background-size: auto 66%;}
  .modal-open,.modal-open:hover{color: #fff;text-decoration: none;}

}

/* add 20220801 */
.noteGroupHotel{margin:10px auto; max-width:960px;font-size:18px;text-align: center;}

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

.ttlGroup .icon:before, .ttlGroup .icon:after{
    width: calc(100% - 100px);
}
.noteGroupHotel{width:92%;font-size:14px}

}