@charset "utf-8";

/* タブレット横 */
@media screen and (max-width: 1180px) {

  /* tag */
  body {
    font-size: 14rem;
    line-height: 2;
  }
  input,
  textarea,
  select,
  button { font-size: 14rem; }
  td, th { line-height: 1.5; }
  h2 { font-size: 32rem; }
  h3 { font-size: 28rem; }
  h4 { font-size: 24rem; }
  h5 { font-size: 20rem; }
  table { width: 100%; }
  caption, th, td {
    padding: 1em 1.5em;
    font-size: 12rem;
  }
  input[type=text],
  input[type=email],
  input[type=tel],
  select,
  textarea {
    padding: 15px;
    font-size: 14rem;
  }

  /* common */
  .pc { display: none!important; }
  .sp { display: block!important; }
  .mtL { margin-top: 80px!important; }
  .mbL { margin-bottom: 80px!important; }
  .mtM { margin-top: 40px!important; }
  .mbM { margin-bottom: 40px!important; }
  .ptL { padding-top: 80px!important; }
  .pbL { padding-bottom: 80px!important; }
  .ptM { padding-top: 40px!important; }
  .pbM { padding-bottom: 40px!important; }

  /* btn */
  .btn_wrap { margin-top: 2em; }
  .btn span { font-size: 14rem; }
  .btn.small > span { font-size: 12rem; }

  /* arrow */
  .arrow i {
    width: 16px;
    height: 16px;
    margin: 0 .4em -.3em 0;
  }
  .arrow span {
    font-size: 12rem;
    color: #fff;
    line-height: 1;
  }

  /* reservation */
  #reservation > dt {
    bottom: auto;
    top: 70px;
  }
  #reservation > dt > div {
    position: fixed;
    right: 0;
    bottom: 90px;
    width: 50px;
    height: 60px;
    transform: translate(50px,0);
    pointer-events: auto;
  }
  #reservation > dt > a {
    width: 50px;
    height: 70px;
  }
  #reservation > dt i {
    width: 14px;
    height: 14px;
  }
  #reservation > dt p {
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    font-size: 10rem;
    letter-spacing: 0;
  }
  #reservation > dt p small { display: none; }

  /* pagetop */
  .pagetop {
    bottom: -50px;
    width: 50px;
    height: 50px;
  }
  .pagetop img {
    width: 12px;
    height: 12px;
  }

  /* slick slider */
  .slider .caption { font-size: 11rem; }
  .slider .slick-arrow {
    top: -31px;
    width: 16px;
    height: 16px;
  }

  /* slick slideshow */
  .slideshow .slick-arrow {
    width: 16px;
    height: 16px;
    top: calc((-6.25vw / 2) - 16px);
  }
  .slideshow .slick-prev { right: calc(6.25vw + 26px); }

  /* search_489ban */
  #search_489ban { font-size: 14rem; }
  #search_489ban button,
  #search_489ban radio,
  #search_489ban checkbox,
  #search_489ban label { display: block; }
  #search_489ban input,
  #search_489ban select { font-size: 14rem; }
  #search_489ban dt { line-height: 52px; }
  #search_489ban .check {
    width: 100%;
    margin: 0;
    padding-bottom: 1em;
  }
  #search_489ban #child {
    display: block;
    width: 100%;
  }
  #search_489ban #child dt { margin: 0; }
  #search_489ban #child dd { margin-top: 1em; }
  #search_489ban #child ul { font-size: 14rem; }
  #search_489ban #child li {
    display: flex;
    align-items: center;
  }
  #search_489ban #child li span,
  #search_489ban #child li span span {
    display: block;
    line-height: 1.5;
  }
  #search_489ban #child li select {
    display: block;
    margin: 0 .5em 0 1em;
  }
  #search_489ban button {
    max-width: 270px;
    min-width: 220px;
    padding: 14px 0;
  }
  #search_489ban button:before {
    right: -10px;
    width: 20px;
  }
  #search_489ban form > div {
    flex-wrap: wrap;
    padding: 1em 0;
  }
  #search_489ban form > div.bbnone { padding: 1em 0 0 0; }
  #search_489ban h4 { font-size: 26rem; }
  #search_489ban #datepicker { max-width: 200px; }
  #search_489ban .btn_wrap.phone { display: flex; }
  #search_489ban .btn_wrap.phone .btn {
    background: transparent;
    border: 1px solid rgba(0,0,0,.25);
  }
  #search_489ban .btn_wrap.phone .btn span { color: #000; }
  #search_489ban .btn_wrap.phone .btn span i {
    width: 14px;
    height: 14px;
    margin: 0 .5em 0 0;
  }

  /* header */
  header h1 {
    font-size: 10rem;
    line-height: 50px;
  }
  /* header gnav */
  header .gnav {
    height: 50px;
    padding: 0 0 0 25px;
  }
  header.scrolled .gnav { transform: translateY(-50px); }
  header .gnav ul { font-size: 12rem; }
  header .gnav li {
    margin: 0 0 0 .75em;
    padding: 0 0 0 .75em;
  }
  /* header logo */
  header .logo > li:nth-of-type(1) { padding: 30px 0 0 0; }
  header .logo > li:nth-of-type(1) li:nth-of-type(1) img { width: 200px; }
  header .logo > li:nth-of-type(2) {  padding: 10px 0 0 0; }
  header .logo > li:nth-of-type(2) li:nth-of-type(1) img { width: 25px; }

  /* header lang */
  header.scrolled .lang { transform: translateY(-50px); }

  /* .expansion > dd */
  .expansion > dd { padding: 0 25px; }
  .expansion > dd .inner2 {
    width: auto;
    height: auto;
  }
  .expansion > dd .btn_close {
    position: fixed;
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    width: 50px;
    height: 50px;
    background: #000;
    border-radius: 0 0 0 3px;
    transform: translateX(0);
  }
  .expansion > dd .btn_close > div {
    width: 21px;
    height: 21px;
  }
  .expansion > dd .btn_close > div span { background: #fff; }

  /* lang */
  header .lang {
    height: 50px;
    padding: 0 60px 0 0;
  }
  header .lang dl { font-size: 10rem; }
  header .lang dl dt {
    height: 30px;
    padding: 0 25px 0 15px;
  }
  header .lang dl dt:after { top: 12px; }
  header .lang dl dd { top: 30px; }
  header .lang dl dd ul li { height: 30px; }

  /* scrolled */
  header.scrolled .right .lang {
    transform: translateY(-50px);
  }

  /* hnav */
  #hnav > dt > div {
    height: 50px;
    width: 50px;
  }
  #hnav > dt > div:before {
    width: 50px;
    height: 50px;
    transform: translateY(-50px);
  }
  #hnav > dt > div > div {
    position: relative;
    width: 16px;
    height: 15px;
  }
  #hnav > dt > div > div span:nth-of-type(2) { top: 7px; }
  #hnav > dd nav:nth-of-type(1) {
    font-size: 24rem;
    line-height: 2;
  }
  #hnav > dd nav:nth-of-type(2) {
    padding: 0.25em 0 0 4em;
    font-size: 16rem;
    line-height: 2.25;
  }
  #hnav > dd a:hover span { transform: translateX(0); }
  #hnav > dd .sns { margin: .75em 0 0 0; }
  #hnav > dd .sns i {
    width: 16px;
    height: 16px;
  }

  /* 追加予約導線 */
  #hnav > dd nav:nth-of-type(3) .phone i {
    width: 16px;
    height: 16px;
    margin: 0 .5em -.2em 0;
  }

  /* active */
  #hnav.active > dt div span:first-child {
    transform: translateY(7px) rotate(-45deg);
  }
  #hnav.active > dt div span:last-child {
    transform: translateY(-7px) rotate(45deg);
  }

  /* contact */
  .expansion > dd .contact { width: 100%; }
  .expansion > dd .contact .text_wrap {
    width: 100%;
    padding: 3em 0;
  }
  .expansion > dd .contact .text_wrap:nth-of-type(n+2) { margin-top: 1.5em; }

  /* footer */
  footer .text_wrap {
    font-size: 10rem;
    padding: 25px;
  }
  footer .left { padding: 25px; }
  footer .logo { margin: 25px 0 10px 0; }

  /* mv */
  .mv { min-height: 0; }
  .mv .bestrate {
    bottom: 25px;
    left: 25px;
    font-size: 10rem;
  }
  .mv .bestrate i {
    width: 10px;
    height: 10px;
  }
  .mv .carousel .slick-dots { padding: 0 25px; }

  /* mv slick-dots */
  .mv .slick-dots { bottom: 25px; }

  /* mv video */
  .mv #mute {
    left: 25px;
    bottom: 60px;
    width: 24px;
    height: 24px;
  }

  /* layout_access */
  .layout_access .access_detail { width: calc(100% / 3); }

  /* layout_outline */

  /* layout_main */
  .layout_main > .inner > ul > li .sub { padding: 6.25% calc(6.25% * 3) 0 calc(6.25% * 3); }
  .layout_main > .inner > ul > li .menu { font-size: 12rem; }
  .layout_main > .inner > ul > li .menu dt { padding: 1em 1.5em; }
  .layout_main > .inner > ul > li .menu dd { padding: 1em 1.5em; }

  /* layout_common */
  .layout_common > .inner { padding: 6.25% calc(6.25% * 3); }

  /* layout_list */
  .layout_list > .inner > ul > li { width: calc(100% / 3); }
  .layout_list > .inner > ul > li .text_wrap .body { font-size: 12rem; }

  /* layout_news */

  /* layout_plan */

  /* layout_bnr */

  /* layout_pagenav */
  .layout_pagenav > .inner > ul > li .text_wrap p { font-size: 12rem; }

  /* layout_map */

  /* insta */
  .insta p { font-size: 12rem; }

  /* trip_ai */
  #trip_ai_container { left: 20px!important; }

  /* trip_ai */
  #tripla-app > div {
    right: 10px!important;
    bottom: 10px!important;
  }
}

/* タブレット縦 */
@media screen and (max-width: 820px) {
  /* header */
  header .gnav { display: none; }

  /* btn */
  .btn { min-width: 200px; }

  /* footer */

  /* mv */
  .mv.home .slick-slide:nth-of-type(1) > div { background-position: center;}
  .mv.home .slick-slide:nth-of-type(2) > div { background-position: center;}
  .mv.home .slick-slide:nth-of-type(3) > div { background-position: center;}
  .mv.home .slick-slide:nth-of-type(4) > div { background-position: center;}
  .mv.home .slick-slide:nth-of-type(5) > div { background-position: center;}
  .mv.home .slick-slide:nth-of-type(6) > div { background-position: center;}
  .mv.home .slick-slide:nth-of-type(7) > div { background-position: center;}
  .mv.home .slick-slide:nth-of-type(8) > div { background-position: center;}

  /* layout_outline */
  .layout_outline .img_wrap .inview-zoom { width: 150%; }

  /* layout_main */
  .layout_outline > .inner { padding: calc(6.25% * 2) 6.25%; }
  .layout_outline.simple .text_wrap { padding: 0 calc(6.25vw * 1); }
  .layout_main > .inner > ul > li { margin: 0 0 calc(6.25% * 2) 0; }
  .layout_main > .inner > ul > li:first-child { margin: calc(6.25% * 2) 0; }
  .layout_main > .inner > ul > li .top_wrap { display: block; }
  .layout_main > .inner > ul > li .img_wrap {
    width: calc(6.25% * 12);
    margin: 0 auto!important;
  }
  .layout_main > .inner > ul > li .text_wrap {
    width: calc(6.25% * 12);
    margin: calc(6.25% / 2) auto 0 auto;
  }
  .layout_main > .inner > ul > li .text_wrap h3 { text-align: center; }
  .layout_main > .inner > ul > li .text_wrap .btn_wrap { justify-content: center; }
  .layout_main > .inner > ul > li .sub { padding: calc(6.25% * 2) calc(6.25% * 2) 0 calc(6.25% * 2); }
  .layout_main > .inner > ul > li .menu dt { width: 10em; }
  .layout_main > .inner > ul > li .menu dd { width: calc(100% - 10em); }

  /* layout_list */
  .layout_list > .inner { padding: calc(6.25% * 2) 6.25% 6.25% calc(6.25% / 2); }
  .layout_list > .inner > ul > li { width: calc(100% / 2); }

  /* layout_common */
  .layout_common > .inner { padding: calc(6.25% * 2); }

  /* layout_access */
  .layout_access > .inner { padding: calc(6.25% * 2) 0; }
  .layout_access .title { padding: calc(6.25% / 2); }
  .layout_access .access_detail_wrap { justify-content: flex-start!important; }
  .layout_access .access_detail { width: 50%; }
  .layout_access .access_detail ul { margin: 0 calc(6.25% / 2); }
  .layout_access .note { width: calc(100% - 12.5%); }
  .layout_access .access_detail li:nth-of-type(even) {
    height: auto;
    min-height: 75px;
  }
  .layout_access .access_detail li:nth-of-type(even).x2,
  .layout_access .access_detail.train li.x2:nth-of-type(even):before,
  .layout_access .access_detail.train li.x2:nth-of-type(even):after {
    height: auto;
    min-height: 178px;
  }
  .layout_access .access_detail li:nth-of-type(even).x3,
  .layout_access .access_detail.train li.x3:nth-of-type(even):before,
  .layout_access .access_detail.train li.x3:nth-of-type(even):after {
    height: auto;
    min-height: 281px;
  }

  /* layout_plan */
  .layout_plan > .inner { padding: calc(6.25vw * 2) 0 0 0; }
  .layout_plan > .inner > ul { padding: 0 0 calc(6.25vw * 2) 0; }

  /* img_section */
  .ex:after { height: 25vh; }

  /* layout_pagenav */
  .layout_pagenav > .inner { padding: calc(6.25% * 2) 6.25% calc((6.25% * 2) - 6.25%) calc(6.25% / 2); }
  .layout_pagenav > .inner > ul > li {
    width: calc(100% / 3);
    padding: 0 0 calc(6.25vw / 1) calc(6.25vw / 2);
  }
  .layout_pagenav > .inner > ul.jcc { justify-content: flex-start!important; }

  /* layout_map */
  .layout_map > .inner { padding: 0 0 calc(6.25% * 2) 0; }

  /* insta */
  .insta { padding: calc(6.25% * 2) 6.25%; }

  /* trip_ai */
  #trip_ai_container { left: 10px!important; }

  /* booking */
  #booking form {
    width: 100%!important;
    margin: 0;
  }
  #booking section > div { margin: 0 0 1em 0!important; }
  #booking input,
  #booking select,
  #booking textarea { width: auto!important; }
  .search-widget-button-wrapper-d2b715 { display: block!important; }
  .input-container-slot-239963 { margin: 0 0 .5em 0; }
}