@charset "UTF-8";
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video, main {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
  margin: 0;
}
address,caption,cite,code,dfn,em,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
strong{font-weight: bold;}

ol, ul {list-style: none;}
a {text-decoration: none;}


p {font-size: 16px;line-height: normal;}
@media (max-width: 769px){
  p {font-size: 14px;}
  li{font-size: 12px;}
}

img{width: 100%;vertical-align: top;}

body{
	font-family: "游ゴシック体 Medium", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: #fff;
  color: #595757;
  text-align: left;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6,ul,a,li,p,div{overflow-wrap: break-word;}


h2{font-size: 56px;}
#amenity h2,#itmes h2,#sauna h2,#breakfast h2{color:#007F68;}
#items h2:after{content:'';display: inline-block;background: url(../images/icon_items.png) 0 0 no-repeat ;margin-bottom: -5px;margin-left: 15px;height: 70px;width: 70px;background-size: contain;}
#sauna h2:before{content:'';display: inline-block;background: url(../images/icon_sauna.png) 0 0 no-repeat ;margin-bottom: -10px;margin-right: 15px;height: 70px;width: 70px;background-size: contain;}
#breakfast h2:after{content:'';display: inline-block;background: url(../images/icon_breakfast.png) 0 0 no-repeat ;margin-bottom: -5px;margin-left: 15px;height: 70px;width: 70px;background-size: contain;}
@media(max-width: 768px){
  h2{font-size: 34px;text-align: center;}
  #items h2:after{content:'';display: inline-block;background: url(../images/icon_items.png) 0 0 no-repeat ;margin-bottom: -7px;margin-left: 5px;height: 50px;width: 50px;background-size: contain;}
  #sauna h2:before{content:'';display: inline-block;background: url(../images/icon_sauna.png) 0 0 no-repeat ;margin-bottom: -7px;margin-right: 5px;height: 50px;width: 50px;background-size: contain;}
  #breakfast h2:after{content:'';display: inline-block;background: url(../images/icon_breakfast.png) 0 0 no-repeat ;margin-bottom: -7px;margin-left: 5px;height: 50px;width: 50px;background-size: contain;}

}



/* 改行指定 ---------------------------------------*/
@media (min-width: 769px){ 
  .br-sp {display:none !important;}
}
@media (max-width: 768px){ 
  .br-pc {display:none !important;}
}

/* float ---------------------------------------*/
.float_r{float: right;}
.float_l{float:left;}
@media (max-width: 768px) {.float_r,.float_l{float:none;}}
.float_end{clear:both;}

/* display設定 ---------------------------------------*/
@media (min-width: 769px){ 
  .sp_only{display: none !important;}
}
@media (max-width: 768px) {
  .pc_only{display:none !important;}
}

/* flex設定 ---------------------------------------*/
.flex{display: flex;justify-content: space-between;flex-wrap: wrap;}
@media (max-width: 768px) {
  .order1{order: 2;}
  .order2{order: 1;}
}





/* 背景色 ---------------------------------------*/
.bgcolor-1{background:#007F68;}
.bgcolor-2{background:#339986;}
.bgcolor-3{background:#E5F2F0;}
.bgcolor-4{background:#F6F3E9;}


/* aline設定 ---------------------------------------*/
.center{text-align: center;}

/* font設定 ---------------------------------------*/
.gfont{font-family: 'Yeseva One', cursive;}
.gfont-2{font-family: 'Shippori Mincho', serif;}

/* width設定 ---------------------------------------*/
.inner-width{max-width: 1040px;width:90% ;margin: 0 auto;}
.inner-box-width{max-width: 960px;width:90% ;margin: 0 auto;}

/* indent設定 ---------------------------------------*/
.annotation{padding-left: 1em;text-indent: -1em;}
.att{font-size: 14px;padding-left: 1em;text-indent: -1em;}
@media (max-width: 768px) {
  .annotation{padding-left: 1em;text-indent: -0.8em;}
  .att{font-size: 12px;padding-left: 1em;text-indent: -1em;}
}

/* link btn設定 ---------------------------------------*/
a.to_detail{color:#e2db93;display: block;margin-top: 15px;}
a.to_detail:after{content: '';display:block;width: 7.8em;height:1px;background: #e2db93;}
@media (max-width: 768px) {
  a.to_detail{margin-top: 15px;font-size: 14px;}
  a.to_detail:after{width: 8.2em;margin: 0 auto;}
}

/*----------------------------------------------------

　バーガーメニュー

----------------------------------------------------*/

nav {
  position: fixed;
  /* 開いてないときは画面外に配置 */
  top: 0;
  right: -360px;
  height: 100%;
  background: #fff;
  width: 340px;
  text-align: left;
  padding:60px 30px;
  transition: .3s ease-in-out;
  z-index: 600;
}
nav ul {display: block;right: 0;bottom: 0;top: 0;}
nav ul li{padding:17px 0 14px;}

nav ul li a .en{color:#007F68;font-size: 24px;}
nav ul li a .jn{color:#595757;font-size: 14px;}
nav ul li:not(:nth-child(6)){border-bottom: 1px solid #007f68;}
@media(max-width: 768px){
  nav ul li a .en{color:#007F68;font-size: 22px;}
}


/* ----- トグルボタン ----- */

#menu-chara{
  position: fixed;
  right: 12px;
  top: 10px;
  width: 49px;
  height: 34px;
  cursor: pointer;
  z-index: 9999;
  color:#007f68;
  font-size: 15px;
  text-align: center;
}

#nav-toggle {
  position: fixed;
  right: 12px;
  top: 36px;
  width: 48px;
  height: 36px;
  cursor: pointer;
  z-index: 9999;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 0;
    background: #007f68;
    left: 0;
    transition: .3s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 10px;display: none;}
#nav-toggle span:nth-child(3) {top: 10px;}


  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }
  /* #global-nav スライドアニメーション */
  .open nav {
    /* #global-nav top + #mobile-head height */
    -moz-transform: translateX(-360px);
    -webkit-transform: translateX(-360px);
    transform: translateX(-360px);
  }
.fixed{position: fixed;z-index: 100;}

/* ---------------------------------------------------

◆　ページトップへ

----------------------------------------------------*/

#pageTop {
    display: none;
    position: fixed;
    bottom: 32px;
    right: 28px;
    font-size: 1.1rem;
    z-index: 5;
}
#pageTop a {
    display: block;
    z-index: 5000;
    padding: 7px 14px 7px;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    background: #fff;
    color:#4d0000;
    font-size: 20px;
    transition: all .2s ease;
    border:1px solid #4d0000;
}
#pageTop a:hover {
    opacity: 0.6;
    transition: all .2s ease;
}

@media(max-width: 768px){
  #pageTop {
    position: fixed;
    bottom: 23px;
    right: 15px;
    font-size: 1rem;
    z-index: 5;
  }
  #pageTop a {
    padding: 6px 12px 6px;
    border-radius: 5px;
    font-size: 18px;
  }
}