@charset "utf-8";

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

  /* tag */
  body {
    font-size: 14rem;
    line-height: 2;
    background-size: 512px 256px;
  }
  input,
  textarea,
  select,
  button { font-size: 14rem; }
  td, th { line-height: 1.5; }
  h2 { font-size: 28rem; }
  h3 { font-size: 24rem; }
  h4 { font-size: 20rem; }
  h5 { font-size: 16rem; }
  table { width: 100%; }
  caption, th, td {
    padding: 16px 24px;
    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; }
  .link > .link {
    bottom: calc(6.25vw / 3);
    left: calc(6.25vw / 3);
    width: 15px;
    height: 15px;
  }
  .title > small { margin: 0 0 0 1em; }

  /* btn */
  .btn_wrap { margin: calc(6.25vw / 2) 0 0 0; }
  .btn {
    padding: 1em 2em;
    font-size: 14rem;
  }
  .btn.small > span { font-size: 12rem; }

  /* title */
  .title {
    & > small {
      font-size: 8rem;
    }
  }


  /* reservation */
  #reservation > dt {
    position: fixed;
    bottom: auto;
    right: auto;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: translateY(0);
  }
  #reservation > dt > div {
    position: fixed;
    right: 0;
    top: auto;
    bottom: 60px;
    width: 50px;
    height: 60px;
    transform: translate(50px,0);
    pointer-events: auto;
  }
  #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;
    & img {
      .pagetop img {
        width: 12px;
        height: 12px;
      }
    }
  }


  /* slick slideshow2 */
  .slideshow2 .slick-arrow {
    bottom: -60px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
  }
  .slideshow2 .slick-prev { background-size: 11px auto; }
  .slideshow2 .slick-next {
    left: calc(6.25vw + 40px);
    background-size: 11px auto;
  }

  /* slick slideshow3 */
  .slideshow3 .slick-arrow {
    bottom: -60px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
  }
  .slideshow3 .slick-prev { background-size: 11px auto; }
  .slideshow3 .slick-next {
    left: calc(6.25vw + 40px);
    background-size: 11px auto;
  }

  /* slick slideshow4 */
  .slideshow4 .slick-arrow {
    bottom: -60px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
  }
  .slideshow4 .slick-prev { background-size: 11px auto; }
  .slideshow4 .slick-next {
    left: calc(6.25vw + 40px);
    background-size: 11px auto;
  }

  /* header */
  header h1 {
    font-size: 10rem;
    line-height: 50px;
  }
  /* header gnav */
  header .gnav { height: 50px; }
  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;
  }

  /* .expansion > dd */
  .expansion > dd { padding: 0 25px; }
  .expansion > dd .inner2 {
    width: auto;
    height: auto;
  }
  .expansion > dd .btn_close {
    width: 50px;
    height: 50px;
  }
  .expansion > dd .btn_close > div {
    width: 21px;
    height: 21px;
  }
  .expansion > dd .btn_close > div span { background: #fff; }

  /* 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 #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 .center {
    height: 50px;
  }
  header .logo > li:nth-of-type(1) img { width: 100px; }

  /* 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; }
  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 li a {
    width: 30px;
    height: 30px;
  }
  #hnav > dd .sns i {
    width: 12px;
    height: 12px;
  }

  /* 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: calc(6.25vw / 2)
        calc(6.25vw / 2 + 50px)
        calc(6.25vw / 2)
        calc(6.25vw / 2);
    }
    & .sns {
      & a {
        width: 30px;
        height: 30px;
      }
      & i {
        width: 12px;
        height: 12px;
      }
    }
  }
  /* ipad */
  .ipad {
    & footer {
      & > .inner {
        &:after {
          background-attachment: inherit;
        }
      }
    }
  }
  /* iphone */
  .iphone {
    & footer {
      & > .inner {
        &:after {
          background-attachment: inherit;
        }
      }
    }
  }

  /* mv */
  .mv {
    & .logotype img { width: calc(6.25% * 5); }
  }

  /* mv .bestrate */
  .mv {
    & .bestrate {
      top: calc(50vh - calc(6.25vw + 32px));
      top: calc(var(--vh, 1vh) * 50 - calc(6.25vw + 32px));
      padding: 0 15px;
      .home & {
        top: calc(100vh - 112px);
        top: calc(var(--vh, 1vh) * 100 - 112px);
      }
      & > div {
        font-size: 10rem;
        height: 30px;
      }
      & i {
        width: 10px;
        height: 10px;
      }
      & .scroll {
        height: calc(80px * 1.25);
      }
    }
  }

  /* layout_access */
  .layout_access {
    & > .inner {
      & .access_detail_wrap {
        & .access_detail {
          width: calc(100% / 3);
        }
      }
      & .note {
        width: calc(6.25% * 10);
      }
    }
  }

  /* layout_main */

  /* layout_half */
  .layout_half {
    & > .inner {
      & > ul {
        & > li {
          & .img_wrap {
            width: calc(6.25vw * 8);
          }
          & .text_wrap {
            width: calc(6.25vw * 8);
            & > div {
              & p {
                &.outline {
                  font-size: 14rem;
                }
                &.spec {
                  font-size: 12rem;
                }
              }
              & .tag {
                & > li {
                  font-size: 11rem;
                }
              }
              & .accordion {
                & > dd {
                  & .img_wrap {
                    & img {
                      width: 300px;
                      max-width: 100%;
                      max-height: 250px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /* layout_common */
  .layout_common {
    & > .inner {
      width: calc(6.25% * 10);
    }
  }

  /* layout_list */
  .layout_list {
    & > .inner {
      & > ul {
        grid-template-columns: repeat(auto-fit, calc((100% - (3.125vw * 2)) / 3));
        > li {
          & .text_wrap {
            & h5 {
              padding: 0 0 8px 0;
            }
            & p {
              font-size: 12rem;
            }
          }
        }
      }
    }
  }

  /* layout_faq */
  .layout_faq {
    & > .inner {
      width: calc(6.25vw * 10);
      & .accordion {
        padding: 2em 0;
      }
      & dt,
      & dd {
        position: relative;
      }
      & dt {
        padding: 0 calc(3.125vw + 1em) 0 calc(3.125vw + 2em);
        font-weight: bold;
        &::before {
          padding: 0 0 0 3.125vw;
        }
        &::after {
          right: 3.125vw;
        }
      }
      & dd {
        padding: 1em calc(3.125vw + 1em) 0 calc(3.125vw + 2em);
        &::before {
          padding: 1em 0 0 3.125vw;
        }
      }
    }
  }

  /* layout_news */
  .layout_news > .inner { padding: calc(6.25vw * 1) 0; }
  .layout_news .slick-slider .slick-slide {
    width: calc(6.25vw * 14 / 3);
    padding: 0 0 0 6.25vw;
  }
  .layout_news .slick-slider .slick-slide dt {
    width: 60px;
    height: 60px;
  }
  .layout_news .slick-slider .slick-slide dd { width: calc(100% - 60px); }
  .layout_news .slick-slider .slick-slide dd > div { padding: 0 0 0 1.5em; }

  /* layout_bnr */
  .layout_bnr {
    & > .inner {
      & > ul {
        & > li {
          & .text_wrap {
            padding: 8px 0 0 0;
          }
        }
      }
    }
  }
  .insta li { width: calc(6.25vw * 4); }
  .insta li.logo .text_wrap { font-size: 12rem; }
  .insta li.logo .text_wrap .pict { padding: 0 0 15px 0; }
  .insta li.logo .text_wrap .pict i {
    width: 30px;
    height: 30px;
  }
  .insta li.logo .text_wrap .title {
    font-size: 24rem;
    padding-bottom: 15px;
  }
  .insta li.logo .text_wrap .link { padding: 15px 0 0 0; }

  /* layout_pagenav */
  .layout_pagenav {
    & > .inner {
      & > ul {
        grid-template-columns: repeat(auto-fit, calc((100% - (3.125vw * 3)) / 4));
        & > li {
          & .text_wrap {
            & p {
              padding: 8px 0 0 0;
            }
          }
        }
      }
    }
  }

}

/* タブレット縦 */
@media screen and (max-width: 820px) {
  /* footer */
  footer > .inner {
    height: 50vh;
    height: calc(var(--vh, 1vh)* 50);
  }

  /* mv */
  .mv .logotype img { width: calc(6.25% * 7); }
  .mv .content_wrap .text_wrap { width: calc(6.25% * 10); }
  .mv .content_wrap .img_wrap { width: calc(6.25% * 12); }

  /* layout_outline */
  .layout_outline .img_wrap {
    height: 25vh;
    height: calc(var(--vh, 1vh) * 25);
  }

  /* layout_main */
  .layout_main > .inner {
    padding: calc(6.25vw * 1.5) 0 calc(6.25vw * 1.5 + 60px) 0;
  }
  .layout_main .slick-slider .slick-slide {
    width: calc(6.25vw * 14 / 2);
  }

  /* layout_faq */
  .layout_faq {
    & > .inner {
      width: calc(6.25vw * 12);
    }
  }

  /* layout_access */
  .layout_access {
    & > .inner {
      & .access_detail_wrap {
        & .access_detail {
          width: 50%;
          & li:nth-of-type(even) {
            height: auto;
            min-height: 75px;
            &.x2 {
              height: auto;
              min-height: 178px;
            }
            &.x3 {
              height: auto;
              min-height: 281px;
            }
            .train & {
              & li.x2:nth-of-type(even):before,
              & li.x2:nth-of-type(even):after {
                height: auto;
                min-height: 178px;
              }
              & li.x3:nth-of-type(even):before,
              & li.x3:nth-of-type(even):after {
                height: auto;
                min-height: 281px;
              }
            }
          }
        }
      }
      & .note {
      }
    }
  }

  /* layout_news */
  .layout_news .slick-slider .slick-slide {
    width: calc(6.25vw * 14 / 2);
  }
  .layout_news .slick-slider .slick-slide dl { line-height: 1.5; }

  /* layout_plan */
  .layout_plan > .inner { padding: calc(6.25vw * 1) 0 calc(6.25vw * 1 + 60px) 0; }
  .layout_plan .slick-slider .slick-slide {
    width: calc(6.25vw * 14 / 3);
  }

  /* layout_bnr */
  .insta li.logo .text_wrap { font-size: 10rem; }
  .insta li.logo .text_wrap .pict { padding: 0 0 10px 0; }
  .insta li.logo .text_wrap .pict i {
    width: 24px;
    height: 24px;
  }
  .insta li.logo .text_wrap .title {
    font-size: 20rem;
    padding-bottom: 10px;
  }
  .insta li.logo .text_wrap .link { padding: 10px 0 0 0; }

  /* layout_pagenav */
  .layout_pagenav {
    & > .inner {
      & > ul {
        grid-template-columns: repeat(auto-fit, calc((100% - (3.125vw * 2)) / 3));
      }
    }
  }

  /* layout_map */
  .layout_map {
    & > .inner {
      iframe {
        height: 35vh;
        height: calc(var(--vh, 1vh) * 35);
      }
    }
  }

}