@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.75; }
  h2 { font-size: 32rem; }
  h3 { font-size: 28rem; }
  h4 { font-size: 24rem; }
  h5 { font-size: 16rem; }
  table { width: 100%; }
  caption, th, td {
    padding: 1em;
    font-size: 12rem;
    /*font-size: 16rem;*/
  }
  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 {
    position: fixed;
    bottom: auto;
    right: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  #reservation > dt > div {
    position: fixed;
    right: 0;
    bottom: 70px;
    width: 50px;
    height: 150px;
    transform: translate(50px,0);
    pointer-events: auto;
  }

  #reservation > dt i {
    width: 14px;
    height: 14px;
    margin: 0 auto 0em auto;
  }
  #reservation > dt p {
    /*-webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;*/
    font-size: 10rem;
    margin-left: 2px;
  }
  #reservation > dt p small { display: none; }

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

  /* copyright */
  .copyright {
    bottom: calc(25px - .5em);
    left: calc(6.25vw / 2);
  }

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

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

  /* slick slideshow2 */
  .slideshow2 .slick-arrow {
    top: -61px;
    width: 16px;
    height: 16px;
  }
  .slideshow2 .slick-prev { right: calc(6.25% + 26px); }

  /* slick slideshow3 */
  .slideshow3 .slick-arrow {
    top: -61px;
    width: 16px;
    height: 16px;
  }
  .slideshow3 .slick-prev { right: calc(6.25% + 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;
    top: 30%;
  }
  /* header gnav */
  header .gnav { height: 50px; }
  header.scrolled .gnav { transform: translateY(-50px); }
  header .gnav li {
    margin: 0 .75em 0 0;
    padding: 0 .75em 0 0;
    font-size: 12rem; 
  }
  header .gnav li.small a { font-size: 11rem; }
  /* header logo */
  header .logo li:nth-of-type(1) {
    height: 80px; /* A */
    transform: translateY(20px); /* B */
    justify-content: flex-start;
    width: calc(6.25vw* 6);/*追加*/
  }

  header.scrolled .logo li:nth-of-type(1) { transform: translateY(-80px); /* -A */ }
  header .logo li:nth-of-type(2) {
    height: 25px; /* C */
    transform: translateY(-110px); /* -(A + C) */
  }
  header.scrolled .logo li:nth-of-type(2) {
    transform: translateY(-65px); /* -(A + C) + (C + ((80 - C) / 2)) */
  }
 
  /* header lang */
  header.scrolled .lang { transform: translateY(-50px); }

  /* header sns */
  header .sns {
    height: 50px;
    padding: 0 10px 0 0;
  }
  header.scrolled .sns { transform: translateY(-50px); }

  /* .expansion > dd */
  .expansion > dd { padding: 0 25px; }
  .expansion > dd .inner2 {
    width: auto;
    height: auto;
  }
  /*スマホhnav閉じるボタン*/
  .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: 20rem;
    line-height: 2;
  }
  #hnav > dd nav:nth-of-type(2) {
    padding: 0em 0 0 2em;
    /*padding: 0.25em 0 0 2em;*/
    /*padding: 0.25em 0 0 4em;*/
    font-size: 20rem;
    /*line-height: 2.25;*/
    line-height: 2;
  }
  #hnav > dd nav:nth-of-type(3) {
    padding: .25em 0 0 2em; /*　追加 */
  }
  #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: 40px 3.125vw 80px 3.125vw;
  }
  footer .text_wrap .left { display: block; }
  /*footer .logo img { width: 80px; }*/
  footer .logo img { width: 70px; }
  footer .sns a {
    width: 28px;
    height: 28px;
  }
  footer .sns i {
    width: 16px;
    height: 16px;
  }
  /* ipad */
  .ipad footer > .inner:after { background-attachment: inherit; }
  /* iphone */
  .iphone footer > .inner:after { background-attachment: inherit; }

  /* mv */
  .mv { min-height: 0; height: 50vh;}
  .mv .carousel .slick-slide { height: 50vh; }
  .mv .pro {
    right: 70px;
    bottom: 70px;
    width: 100px;
  }
  .mv .carousel .slick-dots { padding: 0 25px; }

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

  /* layout_access */
  .layout_access > .inner { padding: 0 0 150px 0; }
  .layout_access > div:first-of-type { margin: 150px 0 0 0;}
  /*.layout_access > .inner { padding: 0 0 80px 0; }*/
  .layout_access .text_wrap h4 { padding: 0 0 40px 0; }
  .layout_access .access_detail {
    width: calc(100% / 3);
    padding: 0 0 40px 3.125vw;
  }
  .layout_access .note {
    margin: 40px 18.75% 0 18.75%;
    padding: 40px;
  }
  .layout_access .access_detail li:nth-of-type(even) {
    height: auto;
    min-height: 75px;
  }

/* ---------------------------------------------- 
      layout_outline 
---------------------------------------------- */
.layout_outline  .txt_big img{ height: 79vh; }
.layout_outline .txt_big { top: 150px; }
  .layout_outline .text_wrap { padding: 340px 0 250px 25vw; }
  .layout_outline .img_wrap {
    height: calc(100vh / 2);
    min-height: initial;
    min-height: auto;
  }
 
/* ---------------------------------------------- 
      layout_news 
---------------------------------------------- */
  .layout_news {
    width: calc(6.25vw* 14);
    margin: 150px auto 0;
  }
  .layout_news p{ padding: 20px; }
  
/* ---------------------------------------------- 
      layout_experience 
---------------------------------------------- */
  /*.layout_experience > .inner { padding: 150px 0 20px 0; }*/
  .layout_experience > .inner { padding: 150px 0 150px 0; }
  .layout_experience h3{ padding: 0 0 75px 0;}
  .layout_experience .txt{
    font-size: 24rem;
    padding: 70px 70px;
  }
  .loop_slider { padding: 150px 0; }
  .loop_slider li:nth-child(odd) { margin: 35px 35px 0 35px; }
  
  /* button */
  .btn_gradient{ width: calc(6.25vw* 7); }

/* ---------------------------------------------- 
      layout_main
---------------------------------------------- */
.layout_outline > .inner::before,
.layout_main > .inner::before  {
  top: 300px;
  right: -1000px;
}

.layout_main .img_wrap {
  height: calc(100vh / 2);
  min-height: initial;
  min-height: auto;
}
.layout_main > .inner ul > li { padding-bottom: 150px; }

/*フォント縦飾り*/
.layout_main .txt_big { /*top: 30vh;*/ top:150px }
.layout_main .onsen .txt_big img{  height: 50vh; }
.layout_main .guestroom .txt_big img{  height: 60vh; }
.layout_main .cuisine .txt_big img{ height: 60vh; }
.layout_main .sauna .txt_big img{  height: 50vh; }

/* 左レイアウト */
.layout_main .text_wrap > div { padding: 150px 0 25vh 25vw; }
/* 右レイアウト */
.layout_main .text_wrap .sub li:first-child { top: -5vh; }
.layout_main .text_wrap .sub li:last-child { top: 20vh; }

.btn_txt{ font-size: 14rem; }

.layout_main.home .inner:after { background-attachment: scroll; }

/* ---------------------------------------------- 
      layout_plan
---------------------------------------------- */
  .layout_plan { margin: 150px auto; }

/* ---------------------------------------------- 
      layout_common
---------------------------------------------- */ 
  .layout_common > .inner { padding: 150px 18.75% 0; }
  .layout_common h4,
  .layout_common h5 { padding: 0 0 40px 0; }
  .layout_common .inner > div:last-of-type { margin:0 0 0 0; }
  .layout_common h4 .time { font-size: 12rem; }
  .layout_common h4 .time i {
    width: 14px;
    height: 14px;
  }
  .layout_common .img_wrap { margin: 0 0 40px 0; }
  .layout_common .text_wrap .links li { font-size: 12rem; }
  .layout_common .text_wrap .links li i {
    width: 12px;
    height: 12px;
  }

/* ---------------------------------------------- 
      layout_detail
---------------------------------------------- */
  .layout_detail > .inner > ul > li{ padding-top: 150px; }
  .layout_detail h3,
  .layout_detail h4 { padding: 0 0 75px 0; }
  .layout_detail .inner:after,
  #lobby.layout_anchor > .inner:after {
    margin: 150px 0 0 0;
    background-attachment: scroll;
  }
  .layout_detail h3 span:nth-child(2),
  .layout_detail h4 span:nth-child(2)  { display: block; }
  .layout_detail h3 span.free,
  .layout_detail h4 span.free { margin: 0 0 20px 0; }

/* ---------------------------------------------- 
      layout_illustmap
---------------------------------------------- */
  .layout_illustmap .inner { padding-top: 150px; }
  .layout_illustmap .illustmap img { width: calc(6.25vw* 8); }
  .layout_illustmap h3,
  .layout_illustmap h4{ padding: 0 0 75px 0; }

/* ---------------------------------------------- 
      layout_detail　サイト内遷移バナー
---------------------------------------------- */
  .layout_link .inner { padding: 150px 15px; }
  .layout_detail .text_wrap { width: calc(6.25vw* 12); }
 
/* ---------------------------------------------- 
      layout_anchor　ページ内アンカーリンク
---------------------------------------------- */
  .layout_anchor .inner{ padding: 150px 0 0 0;}
  .layout_anchor h3 span.en { font-size: 14rem; }
  .layout_anchor h3 span.free { margin: 0 0 20px 0; }
  .layout_anchor h3{ padding: 0 0 75px 0;}
  .layout_anchor h3 span:nth-child(2) { display: block;}
  .layout_anchor h3 span.en { padding-top: 20px;}
  .layout_anchor .inner .onsen_nav > li{ width: calc(100% / 2);}
  .layout_anchor .inner .room_nav > li{ width: calc(100% / 3);}
  .layout_anchor .text_wrap { width: calc(6.25vw* 12); }
  .layout_anchor .inner .room_nav_bottom > li {
    width: calc(100% / 3);
    padding: 0 10px 30px 10px;
  }
  .layout_anchor.guestroom p,
  .layout_anchor.facilities p { padding-top: 0px;}
  .layout_anchor.cuisine p span.title { font-size: 18rem;}
  .layout_anchor.cuisine p span.title::before{ /*display: none;*/ }
  .layout_anchor.facilities p span.title::before{ display: none;}
  .layout_anchor .inner .cuisine_nav > li {
    width: calc(100% / 1);
    padding: 0 10px 75px 10px;
  }
  #lobby.layout_anchor > div:first-of-type {
    margin-top: 150px;
    padding: 150px 0 0 0;
  }
  #lobby.layout_anchor p span.title { font-size: 18rem; }
  .layout_anchor .inner .facilities_nav > li {padding: 0 10px 30px 10px; }
 
/* ---------------------------------------------- 
        layout_colum　
---------------------------------------------- */
  .layout_colum .inner{ padding: 150px 0 0 0;}

  .layout_colum h4 { padding: 0 0 40px 0; }
  .layout_colum h4 span.en {
    font-size: 16rem;
    padding-top: 20px;
  }
  .layout_colum .text_wrap { width: calc(6.25vw* 12);}
 
  /*露天風呂付き客室*/
  #rotenburo.layout_anchor .inner{ 
     margin-top: 150px;
     padding: 150px 0 150px 0;
  }
  #rotenburo.layout_anchor .slider_wrap .text_wrap{ width: calc(6.25vw* 12);}
  #rotenburo.layout_anchor .room_nav p span.title { font-size: 18rem; }
  .layout_anchor.guestroom p span.en { display: none; }

  .layout_anchor.guestroom p span.title{ font-size: 18rem;}
  .layout_anchor.guestroom .inner .room_nav > li {
    width: calc(100% / 3);
    padding: 0 10px 30px 10px;
  }
  #rotenburo.layout_anchor .inner .room_nav > li,
  #lobby.layout_anchor .inner .room_nav > li { padding: 0 10px 30px 10px; }
  #rotenburo.layout_anchor .slider_side {
    padding: 100px 0 0 0;
    margin: 0 0 100px 0;
  }
  .guestroom01 h3 span.en { font-size: 20rem;}

/* ---------------------------------------------- 
        layout_2column　
---------------------------------------------- */
  .layout_2column .img_wrap {
    width: calc(6.25vw* 8);
    height: 30vh;
    min-height: 400px;
  }
  .layout_2column .inner { padding: 150px 0 0 0; }
/* ---------------------------------------------- 
      layout_timeline
---------------------------------------------- */

.layout_timeline_list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(6.25vw* 10);
  margin-inline: auto;
  background: #fff;
  padding: 40px;
}

.layout_timeline_detail .inner { padding: 150px 0 0 0; }
.title_free span.en {
  font-size: 14rem;
  padding-top: 20px;
}
.title_free h3 span:nth-child(2) { display: block; }
.title_free h3 span.free { margin: 0 0 20px 0; }
.title_free { margin: 150px auto 0; }
.layout_timeline_detail.close > .inner:after{
  background-attachment: scroll;
  margin: 150px 0 0 0;
}


/* ---------------------------------------------- 
      layout_list　
---------------------------------------------- */
  .layout_list .inner{ padding: 150px 0 0 0;}
  .layout_list h4{ padding: 0 0 75px 0; }
  .layout_list.sightseeing01 > .inner:after {
    background-attachment: scroll;
    margin: 150px 0 0 0;
  }
 
  /* layout_bnr */
  .layout_bnr .inner { padding: 80px 0 0 0; }
  .layout_bnr h5 { padding: 0 6.25% 40px 6.25%; }
  .layout_bnr .text_wrap p { font-size: 11rem; }
  .layout_bnr .text_wrap .text_of {
    padding: 1em 0 0 0;
    font-size: 14rem;
  }
  .layout_bnr > .inner > ul { padding: 0 0 80px 0; }

  /* layout_title */
  .layout_title > .inner { padding: 0 6.25vw 80px 6.25vw; }
  .layout_title.nop > .inner { padding: 0 6.25vw 40px 6.25vw; }
  .layout_title h2 { transform: translateY(-40px); }
  .layout_title h2 > img { width: 30vw; }
  .layout_title h2 > span { padding: 40px 0 0 0; }
  .layout_title .calender { padding: 40px 0 0 0; }

  /* layout_map */
  .layout_map .title h3 { padding: 80px 0 0 0; }

  /* 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: 20px;
    height: 20px;
    margin: 0 .5em -.3em 0;
  }

  /* ====================================================

  260126 cuisine追加

  ====================================================*/
  .dinner_text p{
    padding-bottom: 20px;
    padding-top:0 ; 
  }
  .cuisine01 .title_sub,
  .cuisine02 .title_sub{
    font-size: 20rem;
    text-align: center;
    display: block;
  }
  .layout_anchor h3 span.morning { font-size: 24rem; }


}

/* タブレット縦 */
@media screen and (max-width: 820px) {
  /* btn */
  .btn { min-width: 200px; }

  /* header */
  header .left,
  header .right { width: 50%; }
  header .center { width: 0; }
  /* gnav */
  header .gnav { display: none; }

  /* footer */
  footer .img_wrap { height: 25vh; }

  /* 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: 30%;}
  .mv.home .slick-slide:nth-of-type(4) > div { background-position: 30%;}
  .mv.home .slick-slide:nth-of-type(5) > div { background-position: center}
  .mv.home .slick-slide:nth-of-type(6) > div { background-position: 30%;}
  .mv.home .slick-slide:nth-of-type(7) > div { background-position: center;}
  .mv.home .slick-slide:nth-of-type(8) > div { background-position: 40%;}

  /* layout_outline */
  .layout_outline .text_wrap h2 img { width: 40vw; }

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

  /* layout_access */
  .layout_access .title { padding: calc(6.25vw / 2); }
  .layout_access .access_detail { width: 50%; }
  .layout_access .access_detail ul { margin: 0 calc(6.25vw / 2); }
  .layout_access .note {
    width: calc(100% - 12.5%);
    margin: 40px 6.25% 0 6.25%;
  }
  .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;
  }
 
   /* img_section */
  .ex:after { height: 25vh; }

  

}