/* ************************************************************** */
/* header                                                         */
/* ************************************************************** */
header {
  transition: height .5s;
}
header::before {
  transition: top 1s;
}
#menu_horizontal {
  position: absolute;
  left: 0;
  right: 0;
  transition: width .5s;
}
header.top::before {
  top: -100%;
}
header.top>a {
  left: 0;
  right: 0;
  height: auto;
  bottom: auto;
  margin-left: auto;
  margin-right: auto;
}
header.top>#menu_horizontal {
  height: 4em;
  width: 100%;
  max-width: 960px;
  bottom: 0;
  margin: 0 auto;
}
header.top>#menu_horizontal img {
  height: 1em;
}
header.top>#menu_horizontal #header_menu_1 { width: calc( 1em *  4.164 ); }
header.top>#menu_horizontal #header_menu_2 { width: calc( 1em *  9.789 ); }
header.top>#menu_horizontal #header_menu_3 { width: calc( 1em *  8.187 ); }
header.top>#menu_horizontal #header_menu_4 { width: calc( 1em *  5.564 ); }
header.top>#menu_horizontal #header_menu_5 { width: calc( 1em * 12.756 ); }

div#sidemenu.open+header.top::before {
  top: 0;
}
div#sidemenu.open+header.top>a {
  bottom: 0;
  height: 3em;
}
div#sidemenu.open+header.top>div {
  height: auto;
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 1370px) {
  div#sidemenu.open+header.top>a {
    left: 5%;
  }
  div#sidemenu.open+header.top>div {
    width: 100%;
  }
}
@media all and (max-width: 1369px) and (min-width: 768px) {
  div#sidemenu.open+header.top>a {
    left: 2.5%;
  }
  div#sidemenu.open+header.top>div {
    width: 50%;
  }
}
@media all and (min-width: 768px) {
  header.top {
    height: 13em;
  }
  header.top>a {
    top: 3em;
    transform: scale(3);
  }
  div#sidemenu.open+header.top {
    height: 4em;
  }
  div#sidemenu.open+header.top>a {
    top: 0;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }
}
@media all and (max-width: 767px) {
  header>a {
    transition: transform .5s, top .5s;
  }
  header.top>a {
    top: 2.5em;
    transform: scale(1.5);
  }
  div#sidemenu.open+header.top>a {
    top: 0;
    transform: none;
  }
}


/* ************************************************************** */
/* contents                                                       */
/* ************************************************************** */
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (max-width: 767px) {
  #sidemenu.open~#contents_wrapper>* {
    filter: blur(4px);
  }
}


/* ************************************************************** */
/* top                                                            */
/* ************************************************************** */
.txa_l {
  text-align: left;
}
#first_view {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../img/top/keyart.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
#first_view>img {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  bottom: 25vh;
  margin: 0 auto;
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  #first_view>img {
    width: 80%;
    max-width: 720px;
  }
}
@media all and (max-width: 767px) {
  #first_view>img {
    width: 85%;
  }
}


/* + particle +++++++++++++++++++++++++++++++++++++++++++++++++++ */
canvas{
  display:block;
  vertical-align:bottom;
}
#particles-js{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 30%;
  margin: 0 auto;
}

#main_contents {
  display: block;
  margin-top: 100vh;
  width: 100%;
  box-sizing: border-box;
  background-image: url('../../img/common/background.jpg');
  background-position: left top;
  background-repeat: repeat;
  background-size: auto;
}

#arrow_move {
  position: fixed;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: .6;
  transition: bottom 1s ease-in-out, opacity .5s;
}
#arrow_move::before {
  content: "";
  display: block;
  padding-top: 50%;
}
#arrow_move.hide {
  opacity: 0;
}
#arrow_move>img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  #main_contents {
    padding-top: 4em;
    padding-bottom: 6em;
  }
  #arrow_move {
    bottom: 20px;
    width: 100px;
  }
  #arrow_move.roop {
    bottom: 30px;
  }
}
@media all and (max-width: 767px) {
  #main_contents {
    padding-top: 3em;
    padding-bottom: 4em;
  }
  #arrow_move {
    bottom: .5em;
    width:  20%;
  }
  #arrow_move.roop {
    bottom: 1em;
  }
}


/* ************************************************************** */
/* main contents                                                  */
/* ************************************************************** */
#movie_wrapper {
  position: relative;
  display: block;
  width: 90%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  background-color: #000;
}
#movie_wrapper::before {
  content: "";
  display: block;
  padding-top: 56.3%;
  background-image: url('../../img/top/movie_thumb.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  transition: opacity .5s;
}
#movie_wrapper.addiframe::before {
  opacity: 0;
}
#movie_wrapper>div {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#movie_wrapper>div iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity .5s ease;
}
#movie_wrapper.addiframe>div iframe {
  opacity: 1;
}
.movie_reserve {
  background-image: url('../../img/top/movie_icon.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 35%;
  background-color: rgba(0, 0, 0, .3);
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  .movie_reserve {
    transition: background-color .5s;
    cursor: pointer;
  }
  .movie_reserve:hover {
    background-color: rgba(0, 0, 0, 0);
  }
}

#news_wrapper {
  position: relative;
  display: block;
  width: 90%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
#title_news {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#title_news::before {
  content: "";
  display: block;
  padding-top: 44%;
}
#title_news>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#news_list {
  position: relative;
  display: flex;
  width: 100%;
}
#news_list>li {
  position: relative;
  display: block;
  overflow: hidden;
}
#news_list>li.hide {
  display: none;
}
#news_list>li::before {
  content: "";
  display: block;
  padding-top: 75%;
}
#news_list>li>a {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#news_list>li>a>img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 100%;
  margin: auto;
}
#news_list>li>a>img:nth-child(1) {
  opacity: 0;
}
#news_list>li>a>div {
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
  text-align: left;
}
#news_list>li>a>div>p {
  display: block;
  color: #fff;
}
#news_list>li>a>div>p:not(:nth-child(2)) {
  font-weight: lighter;
  font-size: .8em;
  line-height: 1.0em;
  letter-spacing: .1em;
}
#news_list>li>a>div>p:nth-child(2) {
  font-size: 1.2em;
  margin-top: .2em;
  margin-bottom: .75em;
  line-height: 1.4em;
}
#news_list>li>a>div>p:nth-child(3) {
  color: #969696;
}
#news_list>li>a>div>div.detail_item {
  display: none;
  margin-top: .5em;
  margin-bottom: .5em;
  color: #fff;
  font-size: .8em;
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  #title_news {
    width: 17.5%;
  }
  #news_list {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #news_list>li {
    width: calc( 50% - 1em );
    margin-bottom: 2em;
    box-sizing: border-box;
  }
  #news_list>li>a>img {
    transition: opacity .5s;
  }
  #news_list>li>a:hover>img:nth-child(1) {
    opacity: 1;
  }
  #news_list>li>a:hover>img:nth-child(2) {
    opacity: 0;
  }
  #news_list>li>a>div {
    height: 35%;
    background-color: rgba(0, 0, 0, .7);
    transition: all .5s;
    display: flex;
    flex-direction: column;
  }
  #news_list>li>a:hover>div {
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    justify-content: center;
    text-align: center;
  }
  #news_list>li>a>div>p {
    margin-left: 0;
    margin-right: auto;
    transition: all .5s;
  }
  #news_list>li>a:hover>div>p {
    margin-left: auto;
    animation: anm_hov .5s;
  }
  #news_list>li>a:hover>div>div.detail_item {
    display: block;
    animation: anm_hov .5s;
  }
}
@media all and (max-width: 767px) {
  #title_news {
    width: 35%;
  }
  #news_list {
    flex-wrap: wrap;
    flex-direction: row;
  }
  #news_list>li {
    width: 100%;
  }
  #news_list>li:not(:last-child) {
    margin-bottom: 2em;
  }
  #news_list>li>a>div {
    background-color: rgba(0, 0, 0, .7);
  }
}
@keyframes anm_hov {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

#banner_wrapper {
  display: flex;
  width: 90%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
#banner_wrapper>a {
  line-height: 0;
  min-height: 0%;
}
#banner_wrapper>a>img {
  width: 100%;
  height: auto;
  border: 1px solid #fff;
  box-sizing: border-box;
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  #banner_wrapper {
    flex-direction: row;
    justify-content: space-between;
  }
  #banner_wrapper>a {
    width: 48%;
    opacity: .8;
    transition: opacity .5s;
  }
  #banner_wrapper>a:hover {
    opacity: 1;
  }
}
@media all and (max-width: 767px) {
  #banner_wrapper {
    flex-direction: column;
  }
  #banner_wrapper>a {
    width: 100%;
  }
  #banner_wrapper>a:not(:last-child) {
    margin-bottom: 1.5em;
  }
}


.spec_image {
  width: 90%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

#reservation_wrapper {
  width: 90%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  background-color: #000;
}
#reservation_wrapper>p {
  line-height: 1em;
}
#reservation_wrapper>ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
}
#reservation_wrapper>ul>li {
  position: relative;
}
#reservation_wrapper>ul>li::before{
  content: "";
  display: block;
  padding-top: 37.5%;
}
#reservation_wrapper>ul>li>a {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 0;
}
#reservation_wrapper>ul>li>a>img {
  width: 100%;
  height: 100%;
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  #reservation_wrapper {
    padding: 2em 2.5em;
  }
  #reservation_wrapper>p {
    margin-bottom: 2em;
  }
  #reservation_wrapper>ul {
    flex-direction: row;
  }
  #reservation_wrapper>ul>li {
    width: 22.5%;
  }
  #reservation_wrapper>ul>li>a {
    opacity: .8;
    transition: opacity .5s;
  }
  #reservation_wrapper>ul>li>a:hover {
    opacity: 1;
  }
}
@media all and (max-width: 767px) {
  #reservation_wrapper {
    padding: 1.5em 5%;
  }
  #reservation_wrapper>p {
    margin-bottom: 1.5em;
  }
  #reservation_wrapper>ul {
    flex-wrap: wrap;
  }
  #reservation_wrapper>ul>li {
    width: 47.5%;
  }
  #reservation_wrapper>ul>li:nth-child(-n+2) {
    margin-bottom: 1em;
  }
}

a.link_inline {
  position: relative;
  color: #EE7723;
  text-decoration: underline;
  letter-spacing: .1em;
  opacity: 1;
  transition: opacity .5s;
}
a.link_inline:hover {
  opacity: .6;
}