@charset "UTF-8";

/* --------------------
  top_wrap
-------------------- */

.top_wrap {
  background: url("../images/body_bg.jpg") no-repeat center;
  background-size: cover;
}

.top_wrap img {
  vertical-align: middle;
}

/* --------------------
  top_mv
-------------------- */

@media screen and (min-width: 768px), print {
  .top_mv {
    margin-bottom: 65px;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .top_mv {
    margin-bottom: 9.067vw;
  }
}

/* --------------------
  top_link
-------------------- */

.top_link ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.top_link ul li a {
  display: block;
}

.top_link ul li div {
  position: relative;
}

.top_link ul li div img {
  position: relative;
  z-index: 10;
}

.top_link ul li div::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.1);
  position: absolute;
}

@media screen and (min-width: 768px), print {
  .top_link {
    margin-bottom: 100px;
  }
  
  .top_link ul li {
    width: 230px;
    margin: 0 20px;
  }
  
  .top_link ul li div {
    width: 225px;
    margin: 0 auto 30px;
  }
  
  .top_link ul li div::after {
    top: 6px;
    left: 6px;
    transition: opacity 0.3s;
  }
  
  .top_link ul li a:hover div::after {
    opacity: 0
  }
  
  .top_link ul li p {
    width: 230px;
    height: 35px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 230px auto;
    white-space: nowrap;
    text-indent: -230px;
    overflow: hidden;
    border-bottom: solid 1px #7f7f7f;
  }
  
  .top_link ul li.top_link_reserve p {
    background-image: url("../images/btn_reserve.png");
  }
  .top_link ul li.top_link_location p {
    background-image: url("../images/btn_location.png");
  }
  .top_link ul li.top_link_menu p {
    background-image: url("../images/btn_menu.png");
  }
  .top_link ul li.top_link_about p {
    background-image: url("../images/btn_about.png");
  }
  
  .top_link ul li a:hover p {
    background-position: center bottom;
  }
}

@media screen and (max-width: 767px) {
  .top_link {
    margin-bottom: 8vw;
  }
  
  .top_link ul li {
    width: 42.667vw;
    margin: 0 2vw 8vw;
  }
  
  .top_link ul li div {
    width: 40vw;
    margin: 0 auto 6.133vw;
  }
  
  .top_link ul li div::after {
    top: 1.2vw;
    left: 1.2vw;
  }
}

/* --------------------
  top_movie
-------------------- */

.top_movie .cont_header {
  text-align: center;
}

.top_movie .cont_body .movie_wrap {
  width: 100%;
}

.top_movie .cont_body .movie_wrap iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media screen and (min-width: 768px), print {
  .top_movie {
    margin-bottom: 100px;
  }
  
  .top_movie .cont_header {
    margin-bottom: 45px;
  }
}

@media screen and (max-width: 767px) {
  .top_movie {
    width: 88.667vw;
    margin: 0 auto 16vw;
  }
  
  .top_movie .cont_header {
    margin-bottom: 7.200vw;
  }
}

/* --------------------
  top_intro
-------------------- */

.top_intro .cont_header {
  text-align: center;
}

.top_intro ul li a {
  display: block;
}

@media screen and (min-width: 768px), print {
  .top_intro {
    padding-bottom: 100px;
  }
  
  .top_intro .cont_header {
    margin-bottom: 55px;
  }
  
  .top_intro ul {
    display: flex;
  }
  
  .top_intro ul li {
    width: calc( 100% / 3 );
  }
  
  .top_intro ul li div {
    margin-bottom: 25px;
    transition: opacity 0.3s;
  }
  
  .top_intro ul li a:hover div {
    opacity: 0.75;
  }
  
  .top_intro ul li p {
    height: 25px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 50px;
    white-space: nowrap;
    text-indent: -100%;
    overflow: hidden;
  }
  
  .top_intro ul li.top_intro_store p {
    background-image: url("../images/btn_store.png");
  }
  .top_intro ul li.top_intro_bikkurapon p {
    background-image: url("../images/btn_bikkurapon.png");
  }
  .top_intro ul li.top_intro_guide p {
    background-image: url("../images/btn_guide.png");
  }
  .top_intro ul li a:hover p {
    background-position: center bottom;
  }
}

@media screen and (max-width: 767px) {
  .top_intro {
    width: 88.667vw;
    margin: 0 auto;
    padding-bottom: 16vw;
  }
  
  .top_intro .cont_header {
    margin-bottom: 8vw;
  }
  
  .top_intro ul li:not(:last-child) {
    margin-bottom: 8.400vw;
  }
  
  .top_intro ul li div {
    margin-bottom: 4.400vw;
  }
  
  .top_intro ul li p {
    text-align: center;
  }
}

/* --------------------
  top_cashless
-------------------- */

.top_cashless .cont_header {
  text-align: center;
}

.top_cashless .cont_body {
  margin: 0 auto;
}

@media screen and (min-width: 768px), print {
  .top_cashless {
    padding-top: 100px;
    background: url("../images/cashless_bg.png") no-repeat center 128px;
    background-size: 100% auto;
  }
  
  .top_cashless .cont_header {
    margin-bottom: 72px;
  }
  
  .top_cashless .cont_body {
    width: 1100px;
  }
}

@media screen and (max-width: 767px) {
  .top_cashless {
    padding: 16vw 0;
  }
  
  .top_cashless .cont_header {
    margin-bottom: 9.333vw;
  }
  
  .top_cashless .cont_body {
    width: 80vw;
  }
}