@charset "utf-8";

/* ヘッダー */
#header {
	width: 100%;
	height: 150px;
	padding: 10px 0 0 0;
	background: url(../images/bg_header.gif) repeat-x;
}

#header div#head_con {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

#header div#head_con h1 {
	width: 268px;
	height: 52px;
	background: url(../images/img_h_logo.gif) no-repeat 0 0;
	text-indent: -9999px;
	float: left;
}

#header div#head_con h1 a {
	width: 268px;
	height: 52px;
	display: block;
	overflow: hidden;
}

/* #utilitynav */
#header div#head_con #utilitynav {
	float: right;
}

/* ヘッダーメニュー上部 */
#header div#head_con #utilitynav div.unav_top {
	margin: 0 0 5px 0px;
	overflow: hidden;
}

#header div#head_con #utilitynav div.unav_top ul.unavlist {
	width: 240px;
	height: 30px;
	background: url(../images/menu_h_nav.gif) no-repeat 0 5px;
	text-indent: -9999px;
	float: left;
}

#header div#head_con #utilitynav div.unav_top ul.unavlist li {
	float: left;
}

#header div#head_con #utilitynav div.unav_top ul.unavlist li a {
	height: 30px;
	display: block;
	overflow: hidden;
}

#header div#head_con #utilitynav div.unav_top ul.unavlist li.faq {
	width: 90px;
}

#header div#head_con #utilitynav div.unav_top ul.unavlist li.sightseeing {
	width: 68px;
}

#header div#head_con #utilitynav div.unav_top ul.unavlist li.access {
	width: 80px;
}

#header div#head_con #utilitynav div.unav_top div.unav_top_r {
	width: 355px;
	float: right;
	overflow: hidden;
}

#header div#head_con #utilitynav div.unav_top div.unav_top_r p {
	width: 355px;
	float: left;
}

/* ヘッダーメニュー下部 */
#header div#head_con #utilitynav div.unav_bottom {
	width:473px;
	padding: 0 0 0 0px;
	float: right;
	overflow: hidden;
}

#header div#head_con #utilitynav div.unav_bottom p {
	float: left;
}
#header div#head_con #utilitynav div.unav_bottom ul.langlist {
	width: 140px;
	margin: 0 0 0 333px;
	position: absolute;
}

#header div#head_con #utilitynav div.unav_bottom ul.langlist li img {
	vertical-align: bottom;
}

#header div#head_con #utilitynav div.unav_bottom ul.langlist li ul.submenu {
	display: none;
  position: relative;
  z-index: 100;
}


/* #gnav */
#gnav {
	width: 100%;
	height: 60px;
	background: url(../images/bg_gnav.gif) repeat-x;
}

#gnav ul {
	width: 960px;
	height: 60px;
	margin: 0 auto;
	background: url(../images/menu_gmenu.gif) no-repeat 0 0;
	text-indent: -9999px;
}

#gnav ul li {
	height: 60px;
	float: left;
}

#gnav ul li a {
	height: 60px;
	display: block;
	overflow: hidden;
}

/* 宿泊予約 */
#gnav ul li.n_resv {
	width: 148px;
}

#gnav ul li.n_resv a:hover,
#reserv #gnav ul li.n_resv a {
	background: url(../images/menu_gmenu.gif) no-repeat 0 -60px;
}

/* 日帰り予約 */
#gnav ul li.n_dayuse {
	width: 148px;
}

#gnav ul li.n_dayuse a:hover,
#reserv #gnav ul li.n_resv a {
	background: url(../images/menu_gmenu.gif) no-repeat -148px -60px;
}

/* 温泉 */
#gnav ul li.n_spa {
	width: 101px;
}

#gnav ul li.n_spa a:hover,
#hotspa #gnav ul li.n_spa a {
	background: url(../images/menu_gmenu.gif) no-repeat -296px -60px;
}

/* 料理 */
#gnav ul li.n_dish {
	width: 101px;
}

#gnav ul li.n_dish a:hover,
#dish #gnav ul li.n_dish a {
	background: url(../images/menu_gmenu.gif) no-repeat -397px -60px;
}

/* 客室 */
#gnav ul li.n_room {
	width: 102px;
}

#gnav ul li.n_room a:hover,
#rooms #gnav ul li.n_room a{
	background: url(../images/menu_gmenu.gif) no-repeat -498px -60px;
}

/* 館内施設 */
#gnav ul li.n_facilities {
	width: 102px;
}

#gnav ul li.n_facilities a:hover,
#facilities #gnav ul li.n_facilities a{
	background: url(../images/menu_gmenu.gif) no-repeat -600px -60px;
}

/* ご案内 */
#gnav ul li.n_welcome {
	width: 102px;
}

#gnav ul li.n_welcome a:hover,
#welcome #gnav ul li.n_welcome a{
	background: url(../images/menu_gmenu.gif) no-repeat -702px -60px;
}

/* 過ごし方 */
/*#gnav ul li.n_stay {
	width: 119px;
}

#gnav ul li.n_stay a:hover,
#stay #gnav ul li.n_stay a{
	background: url(../images/menu_gmenu.gif) no-repeat -841px -60px;
}*/

/* アクセス */
/*#gnav ul li.n_access {
	width: 119px;
}

#gnav ul li.n_access a:hover,
#stay #gnav ul li.n_access a{
	background: url(../images/menu_gmenu.gif) no-repeat -841px -60px;
}*/

/* グループ・団体様 */
#gnav ul li.n_group {
	width: 155px;
}

#gnav ul li.n_group a:hover,
#group #gnav ul li.n_group a{
	background: url(../images/menu_gmenu.gif) no-repeat -804px -60px;
}

/* フッター */
.wrp_footer {
    width: 92%;
    max-width: 1740px;
    margin-right: auto;
    margin-left: auto
}
@media only screen and (max-width: 767px) {
    .wrp_footer {
        width: 87%
    }
}
html {
    font-size: small
}
body {
    background-color: #f6edcc
}
body {
    color: #000;
    -webkit-text-size-adjust: none
}
@media only screen and (min-width: 768px) {
    body {
        font-size: 124%
    }
}
@media only screen and (max-width: 767px) {
    body {
        font-size: 93%
    }
}
@media only screen and (min-width: 768px) {
    .ie body {
        font-size: 120%
    }
}
@media only screen and (max-width: 767px) {
    .ie body {
        font-size: 90%
    }
}
body img {
    max-width: 100%;
    -webkit-touch-callout: none;
    line-height: 1
}
input, select, textarea {
    font-size: 100%
}
html.ie8 .view_tab, html.ie8 .view_tab_sp, html.ie8 .view_sp {
    display: none !important
}
html.ie8 #abi_page {
    min-width: 1200px !important;
    margin: auto;
    font-size: 100% !important
}
.mouse .over {
    transition: opacity 0.3s ease-in
}
.mouse .over:hover, .touch .over.touchstart {
    opacity: 0.7
}
.touch .over {
    -webkit-tap-highlight-color: transparent
}
.touch .over.touchend {
    transition-delay: 200ms
}
#header a, #footer a {
    color: #000;
    text-decoration: none
}
#header a:hover, #footer a:hover {
    text-decoration: none
}
#header {
    position: relative;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif;
    display: flex;
    flex-wrap: wrap
}
.lower #header:before {
    background: url(https://storage.489ban.net/storage/customer/3578/files/images/bg_fv.jpg) no-repeat center top;
    width: 100%;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0
}
@media only screen and (min-width: 768px) {
    .lower #header:before {
        height: 30em
    }
}
@media only screen and (max-width: 767px) {
    .lower #header:before {
        height: 25em
    }
}
@media only screen and (min-width: 1441px) {
    .lower #header:before {
        top: 600px
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    .lower #header:before {
        top: 80%
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .lower #header:before {
        top: 80%
    }
}
@media only screen and (max-width: 767px) {
    .lower #header:before {
        top: 20em
    }
}
#homepage #header {
    position: relative;
    background: url(https://storage.489ban.net/storage/customer/3578/files/images/bg_fv.jpg) no-repeat center top
}
@media only screen and (max-width: 1024px) {
    #header {
        justify-content: space-between
    }
}
#header .box_logo {
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    z-index: 1;
    position: relative
}
@media only screen and (min-width: 1025px) {
    #header .box_logo {
        width: 18%
    }
}
#header .wrp_gnav_and_img {
    position: relative;
    justify-content: space-between
}
@media only screen and (min-width: 1025px) {
    #header .wrp_gnav_and_img {
        width: 80%
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #header .wrp_gnav_and_img {
        width: 100%
    }
}
@media only screen and (max-width: 767px) {
    #header .wrp_gnav_and_img {
        width: 100%
    }
}
@media only screen and (max-width: 1024px) {
    #header .wrp_gnav_and_img {
        justify-content: space-between;
        align-items: center;
        display: flex;
        flex-wrap: wrap
    }
}
.wrp_gnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 11
}
@media only screen and (min-width: 1025px) {
    .wrp_gnav {
        height: 100px
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .wrp_gnav {
        height: 90px
    }
}
@media only screen and (max-width: 767px) {
    .wrp_gnav {
        height: 5em
    }
}
@media only screen and (max-width: 1024px) {
    .wrp_gnav {
        background-color: #f6f1e0
    }
}
@media only screen and (max-width: 767px) {
    .wrp_gnav.normal {
        width: 100%
    }
}
@media only screen and (max-width: 767px) {
    .wrp_gnav.normal .gnav {
        width: 100%
    }
}
@media only screen and (min-width: 1025px) {
    #homepage .wrp_gnav {
        position: absolute;
        left: 0;
        top: 0;
        right: 0
    }
}
#header .box_logo {
    display: flex;
    position: relative;
    align-items: flex-start
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #homepage #header .box_logo {
        width: 120px
    }
}
@media only screen and (max-width: 767px) {
    #homepage #header .box_logo {
        width: 34.66667%
    }
}
@media only screen and (max-width: 1024px) {
    #homepage #header .box_logo {
        position: absolute;
        padding: 1em;
        z-index: 100;
        left: 0;
        top: 0;
        margin-left: 0;
        justify-content: center;
        background: url(https://storage.489ban.net/storage/customer/3578/files/images/bg_fv.jpg) no-repeat center top
    }
}
#header .box_logo .box_h_logo {
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1
}
@media only screen and (min-width: 1025px) {
    #header .box_logo .box_h_logo {
        margin-right: auto;
        margin-left: auto
    }
}
@media only screen and (max-width: 1024px) {
    #header .box_logo .box_h_logo {
        margin-left: 1em
    }
}
@media only screen and (max-width: 767px) {
    #header .box_logo .box_h_logo {
        width: 8em
    }
}
#header .box_logo .box_h_logo a {
    display: block;
    text-decoration: none !important
}
@media only screen and (min-width: 1025px) {
    #header .box_logo .box_h_logo a {
        padding: 40px 2em 2em
    }
}
#header .box_logo .box_h_logo a .txt_since {
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif;
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -webkit-text-orientation: upright;
    -moz-text-orientation: upright;
    -ms-text-orientation: upright;
    text-orientation: upright;
    text-align: left;
    display: inline-block;
    font-feature-settings: 'pkna';
    color: #5f4217;
    margin-top: 1em;
    letter-spacing: 0.04em;
    transform: translateX(-0.1em)
}
.ie #header .box_logo .box_h_logo a .txt_since {
    line-height: 1;
    transform: translateX(-0.3em)
}
.con_gnav {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: flex-end
}
.con_gnav .box_gnav {
    display: flex;
    width: 100%
}
.con_gnav .gnav {
    display: flex
}
@media only screen and (max-width: 767px) {
    .con_gnav .gnav {
        width: 65%;
        width: 52.66667%
    }
}
.con_gnav .gnav>li {
    display: flex;
    align-items: center
}
@media only screen and (max-width: 767px) {
    .con_gnav .gnav>li {
        width: 33.33333%
    }
}
.con_gnav .gnav>li>a {
    cursor: pointer;
    letter-spacing: .04em;
    font-feature-settings: "palt";
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif;
    transition: color 0.2s ease-in;
    display: flex;
    align-items: center;
    text-decoration: none;
    text-align: center;
    height: 3em
}
@media only screen and (min-width: 1441px) {
    .con_gnav .gnav>li>a {
        padding: 0 1em 0 1em
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    .con_gnav .gnav>li>a {
        padding: 0 0.54em
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .con_gnav .gnav>li>a {
        padding: 0.5em 1em 0 1em
    }
}
@media only screen and (max-width: 767px) {
    .con_gnav .gnav>li>a {
        padding: 0.5em 0 0
    }
}
@media only screen and (min-width: 1441px) {
    .con_gnav .gnav>li>a {
        line-height: 1.8
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    .con_gnav .gnav>li>a {
        line-height: 1.2
    }
}
@media only screen and (min-width: 1441px) {
    .con_gnav .gnav>li>a {
        font-size: 113%
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    .con_gnav .gnav>li>a {
        font-size: 100%
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .con_gnav .gnav>li>a {
        font-size: 88%
    }
}
@media only screen and (max-width: 767px) {
    .con_gnav .gnav>li>a {
        font-size: 88%
    }
}
.ie .con_gnav .gnav>li>a {
    padding: 0 0.9em
}
.con_main {
    width: 100%;
    z-index: 10;
    position: relative
}
.con_main .box_fv {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center
}
.con_main .box_fv .st_main {
    display: flex;
    justify-content: flex-start;
    font-weight: normal;
    width: 100%;
    justify-content: center
}
@media only screen and (min-width: 1025px) {
    .con_main .box_fv .st_main {
        font-size: 188%
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .con_main .box_fv .st_main {
        font-size: 163%
    }
}
@media only screen and (max-width: 767px) {
    .con_main .box_fv .st_main {
        font-size: 163%
    }
}
.con_main .box_fv .st_main .jp, .con_main .box_fv .st_main .jp02 {
    box-sizing: border-box;
    background: url("../images/common/bg_washi_green.jpg") #6b8244 repeat center center;
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -webkit-text-orientation: upright;
    -moz-text-orientation: upright;
    -ms-text-orientation: upright;
    text-orientation: upright;
    text-align: left;
    display: inline-block;
    font-feature-settings: 'pkna';
    color: #fff;
    line-height: 1em
}
@media only screen and (min-width: 768px) {
    .con_main .box_fv .st_main .jp, .con_main .box_fv .st_main .jp02 {
        padding: 1em 0.4em
    }
}
@media only screen and (max-width: 767px) {
    .con_main .box_fv .st_main .jp, .con_main .box_fv .st_main .jp02 {
        padding: 0.75em 0.5em
    }
}
.ie .con_main .box_fv .st_main .jp, .ie .con_main .box_fv .st_main .jp02 {
    padding: 1em .6em 1em .2em
}
.con_main .box_fv .st_main .jp02 span.txt_s {
    font-size: 60%
}
.con_main .box_fv .st_main .jp02 i:before {
    font-size: 54%;
    content: "/";
    padding: 0.25em 0
}
.bg_fv_homepage {
    position: relative;
    width: 100%;
    height: 0
}
@media only screen and (min-width: 1025px) {
    .bg_fv_homepage:before {
        position: absolute;
        content: "";
        display: block;
        width: 683px;
        left: -420px;
        bottom: -30em;
        height: 1067px;
        background: url(https://storage.489ban.net/storage/customer/3578/files/images/bg_fv_homepage.png) no-repeat center top;
        background-size: cover
    }
}
#contents {
    position: relative;
    color: #5f4217;
    font-size: small;
    font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, "MS Ｐゴシック", "MS PGothic", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif;
    line-height: 1.5
}
#contents a:link {
    color: #5c6e2f
}
#contents a:visited {
    color: #bc916a
}
#contents a:hover {
    color: #bc916a
}
#contents a:active {
    color: #bc916a
}
.ypro_cal .btn_left a, .ypro_cal .btn_style a {
    color: #fff !important
}
.ypro_cal .btn_left a:link, .ypro_cal .btn_left a:visited, .ypro_cal .btn_left a:hover, .ypro_cal .btn_left a:active, .ypro_cal .btn_style a:link, .ypro_cal .btn_style a:visited, .ypro_cal .btn_style a:hover, .ypro_cal .btn_style a:active {
    color: #fff !important
}
.ypro_cal .btn_left a img, .ypro_cal .btn_style a img {
    line-height: 1.5;
    vertical-align: middle !important
}
#footer {
    position: relative;
    z-index: 0;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif
}
@media only screen and (min-width: 1025px) {
    .wrp_footer {
        padding: 55px 0 20px
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .wrp_footer {
        padding: 50px 0 20px
    }
}
@media only screen and (max-width: 767px) {
    .wrp_footer {
        padding: 3em 0 5em
    }
}
@media only screen and (min-width: 1025px) {
    .con_footer {
        justify-content: space-between;
        display: flex;
        align-items: flex-end
    }
}
@media only screen and (min-width: 1025px) {
    .con_footer .box_f_logo .f_logo {
        margin-bottom: 15px
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .con_footer .box_f_logo .f_logo {
        margin-bottom: 25px
    }
}
@media only screen and (max-width: 767px) {
    .con_footer .box_f_logo .f_logo {
        margin-bottom: 1em
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .con_footer .box_f_logo .f_logo {
        width: 230px;
        margin-right: auto;
        margin-left: auto
    }
}
@media only screen and (max-width: 767px) {
    .con_footer .box_f_logo .f_logo {
        width: 51.53846%;
        margin-right: auto;
        margin-left: auto
    }
}
@media only screen and (min-width: 1025px) {
    .con_footer .box_f_logo address {
        margin-bottom: 1em
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .con_footer .box_f_logo address {
        margin-bottom: 2em
    }
}
@media only screen and (max-width: 767px) {
    .con_footer .box_f_logo address {
        margin-bottom: 2em
    }
}
@media only screen and (min-width: 1025px) {
    .con_footer .box_f_logo address {
        padding-left: 1em
    }
}
@media only screen and (max-width: 1024px) {
    .con_footer .box_f_logo address {
        text-align: center
    }
}
.con_footer .box_f_menu ul {
    display: flex;
    flex-wrap: wrap
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .con_footer .box_f_menu ul {
        margin-bottom: 1em
    }
}
@media only screen and (max-width: 767px) {
    .con_footer .box_f_menu ul {
        margin-bottom: .5em
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .con_footer .box_f_menu ul {
        padding: 0.5em 0;
        justify-content: center;
        border-top: 1px solid #9d9287;
        border-bottom: 1px solid #9d9287
    }
}
@media only screen and (max-width: 767px) {
    .con_footer .box_f_menu ul {
        padding: 1.5em 0;
        border-top: 1px solid #9d9287;
        border-bottom: 1px solid #9d9287
    }
}
@media only screen and (max-width: 767px) {
    .con_footer .box_f_menu ul li {
        width: 50%
    }
}
.con_footer .box_f_menu ul li a {
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", Times, Garamond, Georgia, serif;
    text-decoration: none !important
}
.mouse .con_footer .box_f_menu ul li a:hover, .touch .con_footer .box_f_menu ul li a.touchstart {
    text-decoration: underline !important
}
.touch .con_footer .box_f_menu ul li a {
    -webkit-tap-highlight-color: transparent
}
.touch .con_footer .box_f_menu ul li a.touchend {
    transition-delay: 200ms
}
@media only screen and (min-width: 1025px) {
    .con_footer .box_f_menu ul li a {
        padding: 0 0.75em
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .con_footer .box_f_menu ul li a {
        padding: 0 1em
    }
}
@media only screen and (max-width: 767px) {
    .con_footer .box_f_menu ul li a {
        padding: 0 0.25em
    }
}
@media only screen and (min-width: 768px) {
    .con_footer #copyright {
        font-size: 88%
    }
}
@media only screen and (max-width: 767px) {
    .con_footer #copyright {
        font-size: 82%
    }
}
@media only screen and (min-width: 1025px) {
    .con_footer #copyright {
        text-align: right
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .con_footer #copyright {
        text-align: center
    }
}
@media only screen and (max-width: 767px) {
    .con_footer #copyright {
        text-align: center
    }
}