@charset "utf-8";


/*//////////////////////////////////////////////////
共通
//////////////////////////////////////////////////*/

::selection {
	color: #fafafa; background-color: #1b813e;
}
::-moz-selection {
	color: #fafafa; background-color: #1b813e;
}
@font-face {
    font-family: "Helvetica Neue"; src: local("Helvetica Neue Regular"); font-weight: 100;
}
@font-face {
    font-family: "Helvetica Neue"; src: local("Helvetica Neue Regular"); font-weight: 200;
}
@font-face {
    font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100;
}
@font-face {
    font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200;
}
@font-face {
    font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300;
}
@font-face {
    font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400;
}
@font-face {
    font-family: "Yu Gothic";src: local("Yu Gothic Bold"); font-weight: bold;
}
html {
	width: 100%; height: 100%; font-size: 62.5%;
}
body {
	width: 100%; height: 100%; min-width: 1280px; position: relative;
    background-image: url("../img/common/common_tex-1.jpg");
}
body, input, textarea, select, button {
	font-size: 1.5rem; line-height: 2.0; color: #fafafa; font-weight: 400; letter-spacing: normal; -webkit-text-size-adjust: 100%; word-break: word-break; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset; font-family: "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    body, input, textarea, select, button {
        -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
}
main, img {
	display: block;
}
input[type="radio"], input[type="checkbox"], input[type="submit"], input[type="button"], select, button {
    cursor: pointer;
}
input, textarea, select, button {
	-webkit-transition: all .4s; transition: all .4s; outline: 0;
}
::-webkit-input-placeholder {
    color: #757575;
}
:-ms-input-placeholder {
    color: #757575;
}
::-moz-placeholder {
    color: #757575;
}
a {
	text-decoration: none; -webkit-transition: all .4s; transition: all .4s;
}
a:link, a:visited, a:hover {
	color: #fafafa;
}
.min {
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", serif;
}
.x-lg {
    font-size: 2.4rem;
}
.lg {
    font-size: 1.8rem;
}
.sm {
    font-size: 1.4rem;
}
.x-sm {
    font-size: 1.2rem;
}
.b {
    font-weight: bold;
}
.it {
    font-style: italic;
}
.cf:after {
	content: " "; display: block; clear: both;
}

.shadow-1 {
    box-shadow: 0 0 8px 2px rgba(0,0,0,.64);
}

.icon-1-1, .icon-1-2, .icon-1-3 {
    display: inline-block; background-image: url("../img/common/common_icon-1.png"); width: 16px; height: 16px; background-size: cover; margin: 0 8px 0 0; position: relative; top: 2px;
}
.icon-1-2 {
    position: relative; top: 3px;
}
.icon-1-3 {
    position: relative; top: 1px;
}

.txt-deco-1, .txt-deco-2, .txt-deco-3 {
    position: relative; display: inline-block; left: -24px;
}
.txt-deco-1 .icon, .txt-deco-2 .icon, .txt-deco-3 .icon {
     display: inline-block; background-image: url("../img/common/common_icon-2.png"); width: 60px; height: 60px; background-size: cover; position: relative; z-index: 1; left: 24px; top: 24px;
}
.txt-deco-2 .icon {
    background-image: url("../img/common/common_icon-3.png"); width: 96px;
}
.txt-deco-3 .icon {
    background-image: url("../img/common/common_icon-4.png");
}
.txt-deco-1 .txt, .txt-deco-2 .txt, .txt-deco-3 .txt {
     position: relative; z-index: 2;
}

.main-under {
    width: 100%; height: 400px; position: relative; overflow: hidden;
}
.main-under h2 img {
    position: relative; z-index: 2; top: 246px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
}
.main-under .back {
    position: absolute; z-index: 1; left: 50%; top: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
}

@media only screen and (min-width: 960px) {
    .hover-1 {
        -webkit-transition: all .4s; transition: all .4s;
    }
    .hover-1:hover {
        opacity: .64;
    }
}

@media only screen and (min-width: 1920px) {
    .main-under .back {
        width: 100%; height: auto;
    }
}


/*//////////////////////////////////////////////////
ヘッダー
//////////////////////////////////////////////////*/

/* For IE Edge */
header {
    width: 100%; height: 150px; overflow: hidden; position: absolute; z-index: 10; top: 0;
}
.header-top-wrap {
    height: 100vh;
}
/* End */

.header-top {
    width: 1200px; height: 93vh; position: absolute; z-index: 10; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
}
.header-top .tel {
    position: absolute; top: 40px; right: -7px;
}
.header-top .bnr {
    position: absolute; top: 80px; right: 0; box-shadow: 0 0 8px 2px rgba(0,0,0,.64);
}
.header-top .inner {
    width: 100%; position: absolute; bottom: 56px;
}
.header-top h1, .header-under h1 {
    width: 284px; height: 110px; float: left; 
}
.header-top nav, .header-under nav {
    width: 876px; height: 110px; float: right;
}
.header-top nav li, .header-under nav li {
    float: left; padding: 32px 0 0;
}
.header-top nav li a, .header-under nav li a {
    display: block; float: left;
}
.header-top nav li .active, .header-under nav li .active {
    display: block; float: left;
}
.header-top .separator, .header-under .separator {
    display: block; float: left; width: 1px; height: 24px; margin: 32px 12px 0; background-color: #fafafa;
}
.header-under {
    width: 1200px; position: absolute; z-index: 10; top: 0; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
}
.header-under .inner {
    width: 100%; position: absolute; top: 32px;
}

@media only screen and (min-width: 960px) {
    .header-top .bnr:hover {
        box-shadow: none;
    }
}


/*//////////////////////////////////////////////////
おすすめ宿泊プラン
//////////////////////////////////////////////////*/

.content-plan {
    position: relative; width: 1200px; margin: 0 auto; padding: 80px 0 0;
}
.content-plan .inner {
    margin: 30px 0 0;
}
.content-plan article {
    float: left; margin: 9px; position: relative; overflow: hidden;
}
.content-plan .img {
    width: 282px; height: 188px; overflow: hidden;
}
.content-plan .img img {
    width: 100%; height: auto; -webkit-transition: all 1.2s; transition: all 1.2s;
}
.content-plan .txt {
    height:200px;width: 234px; padding: 0 24px 24px; line-height: 1.5; color: #424242; background-image: url("../img/common/common_tex-2.jpg");
}
.content-plan h3 {
    padding: 24px 0 12px; margin: 0 0 16px; color: #212121; 
}
.content-plan .txt p {
    position: relative; z-index: 2;
}
.content-plan .deco {
    position: absolute; z-index: 1; right: -8px; bottom: -8px;
}

@media only screen and (min-width: 960px) {
    .content-plan a:hover .img img {
        -webkit-transform: scale(1.1); transform: scale(1.1);
    }
}


/*//////////////////////////////////////////////////
宿泊プラン検索
//////////////////////////////////////////////////*/

.content-search {
    position: relative; width: 1196px; height: 136px; padding: 2px; margin: 40px auto 0; background-image: url("../img/common/common_tex-2.jpg"); overflow: hidden;
}
.content-search h2 {
    float: left; width: 300px;
}

.content-search .submit {
    float: left; width: 120px; height: 60px; border-radius: 4px; margin: 38px 0 0; background-color: #1b813e; background-image: url("../img/common/common_search-submit.png"); background-size: cover; box-shadow: 0 0 8px 2px rgba(0,0,0,.64); -webkit-transition: all .8s; transition: all .8s; cursor: pointer; position: relative; z-index: 2;
}
.content-search .deco {
    position: absolute; z-index: 1; right: -16px; bottom: -16px;
}
.content-search form{
    position: relative;
    z-index: 3;
}
.content-search .middle{
    margin-left: 330px;
    display: table;
    position: relative;
    top: 20px;
}
.content-search .middle p {
    margin-right: 15px;
    color: #000;
}
.content-search .middle p.price
.content-search .middle p.guests {
    margin-right: 0px;
}
.content-search .search_btn{
    position: relative;
    top: -100px;
    left: 730px;
    display: table;

}
.content-search select,
.content-search input{
    z-index: 3;
    color: #000;
}
.content-search .search_btn input{
    background: #2c7c45;
    border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.content-search .middle p img,
.content-search .middle p{
  float: left;
}
.content-search .middle .row{
    height: 4em;
    width: 700px;
}
.content-search .middle .row:after{
    clear: both;
    display: block;
    content: ' ';
}

@media only screen and (min-width: 960px) {
    .content-search .submit:hover {
        background-color: #166732; box-shadow: none;
    }
}


/*//////////////////////////////////////////////////
フッター
//////////////////////////////////////////////////*/

footer {
    width: 100%; height: 600px; margin: 80px 0 0; position: relative; overflow: hidden;
}
footer .back {
    position: absolute; z-index: 1; left: 50%; top: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
}
footer .bnr {
    display: block; width: 600px; margin: 0 auto; position: relative; z-index: 2;
}
footer ul {
    width: 1200px; max-width: 100%; margin: 80px auto 0; line-height: 1; text-align: center; position: relative; z-index: 2;
}
footer ul li {
    display: inline-block; margin: 0 20px;
}
footer .arrow {
    display: inline-block; background-image: url("../img/common/footer_arrow.png"); width: 6px; height: 12px; background-size: cover; position: relative; top: 1px; margin: 0 8px 0 0;
}
footer .info {
    width: 1200px; max-width: 100%; margin: 70px auto 0; text-align: center; position: relative; z-index: 2;
}
footer .info p {
    margin: 30px 0 0;
}
footer .copy {
    width: 1200px; max-width: 100%; margin: 70px auto 0; text-align: center; line-height: 1; position: relative; z-index: 2;
}
footer .copy a {
    display: inline-block; vertical-align: text-top; margin: 0 4px 0 0;
}
footer .pagetop {
    background-image: url("../img/common/footer_pagetop.png"); width: 130px; height: 120px; background-size: cover; position: absolute; z-index: 3; right:20px; bottom: 40px; -webkit-transform: translate(470px, 0); transform: translate(470px, 0); cursor: pointer;
}
footer .counter{
    display: table;
    margin: 0 auto;}
    
#index footer .pagetop {
    position: absolute;
    right: 10px;
    bottom: 0;
    -webkit-transform: translate(0px, 20px);
    transform:translate(0px, 20px);
}

footer .qr{
    display: table;
    line-height: 1;
    font-size: 9px;
    text-align: center;
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: -40px;
    -webkit-transform: translate(-150px, 0px);
    transform:translate(-150px, 0px);
}
footer .qr a{
    color: #fff;
}

@media only screen and (min-width: 1920px) {
    footer .back {
        width: 100%; height: auto;
    }
}


/*//////////////////////////////////////////////////
01.トップ
//////////////////////////////////////////////////*/

.page1 .content-1 {
    margin: 40px 0 0; overflow: hidden;
}
.page1 .content-1 article {
    height: 440px; margin: 40px 0 0; position: relative;
}
.page1 .content-1 .inner {
    width: 440px; height: 400px; position: absolute; z-index: 3; top: 40px; left: 50%; -webkit-transform: translate(-600px, 0); transform: translate(-600px, 0);
}
.page1 .content-1 h2 {
    margin: 0 0 16px 30px;
}
.page1 .content-1 p {
    margin: 0 0 0 64px;
}
.page1 .content-1 .img {
    width: 100%; height: 400px; position: absolute; z-index: 2; left: 50%; -webkit-transform: translate(-140px, 0); transform: translate(-140px, 0); overflow: hidden;
}
.page1 .content-1 .img img {
    width: 100%; height: auto;
}
.page1 .content-1 .img-back {
    width: 50%; height: 400px; background-image: url("../img/common/common_tex-2.jpg"); position: absolute; z-index: 1; top: 40px; left: 50%; -webkit-transform: translate(-160px, 0); transform: translate(-160px, 0);
}
.page1 .content-1 a {
    display: block; width: 320px; height: 60px; border-radius: 4px; background-color: #1b813e; background-image: url("../img/page1/page1-1_btn.png"); background-size: cover; box-shadow: 0 0 8px 2px rgba(0,0,0,.64); -webkit-transition: all .8s; transition: all .8s; position: absolute; left: 200px; bottom: 120px;
}
.page1 .content-1 .deco {
    position: absolute; left: 0; bottom: 0;
}
.page1 .content-1 article:nth-of-type(2) .inner {
    -webkit-transform: translate(160px, 0); transform: translate(160px, 0);
}
.page1 .content-1 article:nth-of-type(2) .img {
    left: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.page1 .content-1 article:nth-of-type(2) .img-back {
    left: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.page1 .content-1 article:nth-of-type(2) a {
    left: -80px;
}
.page1 .content-1 article:nth-of-type(2) .deco {
    left: 240px;
}
.page1 .content-2 {
    margin: 80px 0 0; text-align: center;
}
.page1 .content-2 h2 {
    width: 1200px; margin: 0 auto;
}
.page1 .content-2 .intro {
    margin: 30px 0 0;
}
.page1 .content-2 .img {
    margin: 50px 0 0; width: 100%; height: 400px; position: relative; overflow: hidden;
}
.page1 .content-2 .img img {
    position: absolute; left: 50%; top: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
}
.page1 .content-2 .slider {
    width: 100%; height: 300px; background-color: #eee;
}

@media only screen and (min-width: 960px) {
    .page1 .content-1 a:hover {
        background-color: #166732; box-shadow: none;
    }
}

@media only screen and (min-width: 1920px) {
    .page1 .content-2 .img img {
        width: 100%; height: auto;
    }
}


/*//////////////////////////////////////////////////
02.源泉かけ流し湯野上温泉
//////////////////////////////////////////////////*/

.page2 .content-1, .page2 .content-2, .page2 .content-3 {
    width: 1200px; margin: 80px auto 0; text-align: center;
}
.page2 .content-1 .inner {
    width: 1200px; height: 322px; display: table-cell; vertical-align: middle; position: relative;
}
.page2 .content-1 p {
    position: relative; z-index: 2;
}
.page2 .content-1 .back {
    position: absolute; z-index: 1; top: 0; left: 50%; -webkit-transform: translate(-410px, 0); transform: translate(-410px, 0);
}
.page2 .content-2 .intro {
    margin: 30px 0 0;
}
.page2 .content-2 .wrapper-1 {
    margin: 30px 0 0;
}
.page2 .content-2 .wrapper-1 article {
    float: left; width: 600px;
}
.page2 .content-2 .wrapper-1 img {
    float: left; margin: 8px;
}
.page2 .content-2 .wrapper-1 .txt {
    float: left; margin: 8px; width: 268px; height: 300px; display: table;
}
.page2 .content-2 .wrapper-1 .txt .inner {
    display: table-cell; vertical-align: middle;
}
.page2 .content-2 .wrapper-1 .txt p {
    width: 170px; margin: 16px auto 0;
}
.page2 .content-2 .wrapper-2 {
    margin: 40px 0 0;
}
.page2 .content-2 .wrapper-2 img {
    float: left;
}
.page2 .content-2 .wrapper-3 {
    margin: 40px 0 0; padding: 40px 0; background-image: url("../img/common/common_tex-2.jpg");
}
.page2 .content-2 .wrapper-4 {
    margin: 40px 0 0;
}
.page2 .content-2 .wrapper-4 .inner {
    width: 600px; float: left; text-align: left; margin: 40px 0 0;
}
.page2 .content-2 .wrapper-4 table {
    width: 600px; float: left; border-top: solid 1px #c7c7c5;
}
.page2 .content-2 .wrapper-4 tr {
    margin: 8px 0; border-bottom: solid 1px #c7c7c5;
}
.page2 .content-2 .wrapper-4 th, .page2 .content-2 .wrapper-4 td {
    padding: 8px 0;
}
.page2 .content-2 .wrapper-4 th span {
    display: inline-block; padding: 0 40px; border-right: solid 1px #c7c7c5;
}
.page2 .content-3 .imgs {
    margin: 40px 0 0; width: 1200px; height: 600px;
}
.page2 .content-3 .imgs img {
    float: left;
}
.page2 .content-3 .add {
    margin: 32px 0 0;
}
.page2 .content-4 .imgs {
    height: 300px;
}
.page2 .content-5 {
    width: 100%; margin: 80px 0 0; background-image: url("../img/common/common_tex-2.jpg");
}
.page2 .content-5 img {
    margin: 0 auto;
}


/*//////////////////////////////////////////////////
03.手作りの郷土料理
//////////////////////////////////////////////////*/

.page3 .content-1, .page3 .content-2, .page3 .content-3 {
    width: 1200px; margin: 80px auto 0; text-align: center;
}
.page3 .content-1 .imgs {
    margin: 60px auto 0; width: 1200px; height: 910px; position: relative;
}
.page3 .content-1 .imgs a {
    position: absolute; z-index: 2;
}
.page3 .content-1 .imgs a:nth-of-type(1) {
    top: 0; left: 0;
}
.page3 .content-1 .imgs a:nth-of-type(2) {
    top: 0; left: 468px;
}
.page3 .content-1 .imgs a:nth-of-type(3) {
    top: 0; left: 730px;
}
.page3 .content-1 .imgs a:nth-of-type(4) {
    top: 0; left: 992px;
}
.page3 .content-1 .imgs a:nth-of-type(5) {
    top: 336px; left: 0;
}
.page3 .content-1 .imgs a:nth-of-type(6) {
    top: 206px; left: 700px;
}
.page3 .content-1 .imgs a:nth-of-type(7) {
    top: 308px; left: 992px;
}
.page3 .content-1 .imgs a:nth-of-type(8) {
    top: 720px; left: 0;
}
.page3 .content-1 .imgs a:nth-of-type(9) {
    top: 720px; left: 350px;
}
.page3 .content-1 .imgs a:nth-of-type(10) {
    top: 590px; left: 700px;
}
.page3 .content-1 .txt-1, .page3 .content-1 .txt-2 {
    position: absolute; z-index: 1;
}
.page3 .content-1 .imgs .txt-1 {
    top: 200px; left: 284px;
}
.page3 .content-1 .imgs .txt-2 {
    top: 512px; left: 700px;
}
.page3 .content-2 {
    text-align: left;
}
.page3 .content-2 article, .page3 .content-2 .txt {
    margin: 40px 0 0;
}
.page3 .content-2 h3 {
    width: 436px; float: left; margin: 0 0 40px;
}
.page3 .content-2 p {
    width: 700px; float: right; margin: 18px 0 0;
}
.page3 .content-2 .imgs img {
    float: left;
}
.page3 .content-3 .imgs {
    margin: 60px 0 0; width: 1200px; height: 300px;
}
.page3 .content-3 .imgs img {
    float: left;
}


/*//////////////////////////////////////////////////
04.昭和レトロな館内
//////////////////////////////////////////////////*/

.page4 .content-1, .page4 .content-2 {
    width: 1200px; margin: 80px auto 0; position: relative;
}
.page4 .content-1 article {
    width: 520px; height: 480px; position: relative; left: 50%; -webkit-transform: translate(-600px, 0); transform: translate(-600px, 0);
}
.page4 .content-1 .img {
    position: absolute; width: 50%; height: 480px; left: 50%; top: 0; overflow: hidden;
}
.page4 .content-1 .img img {
    width: 100%; height: auto;
}
.page4 .content-1 h2 {
    margin: 0 0 16px;
}
.page4 .content-1 .info {
    display: inline-block; padding: 32px 40px; margin: 32px 0 0; background-image: url("../img/common/common_tex-2.jpg");
}
.page4 .content-1 .info h3 {
    display: inline-block; padding: 2px 12px; margin: 8px 0; background-color: #ce5f68;    
}
.page4 .content-1 .info p {
    color: #212121;
}
.page4 .content-1 .imgs {
    width: 1200px; margin: 40px auto 0;
}
.page4 .content-1 a {
    float: left; display: block; width: 288px; height: 192px; margin: 8px;
}
.page4 .content-1 .title {
    float: left; display: table; width: 288px; height: 192px;
}
.page4 .content-1 .title h3 {
    margin: 8px 0;
}
.page4 .content-1 .title .inner {
    display: table-cell; vertical-align: middle; text-align: center;
}
.page4 .content-2 article, .page4 .content-2 .txt {
    margin: 40px 0 0;
}
.page4 .content-2 h3 {
    width: 436px; float: left; margin: 0 0 40px;
}
.page4 .content-2 p {
    width: 700px; float: right; margin: 18px 0 0;
}
.page4 .content-2 article:nth-of-type(3) p {
    margin: 28px 0 0;
}
.page4 .content-2 .imgs img {
    float: left;
}
.page4 .content-3 {
    text-align: center; margin: 80px 0 0;
}
.page4 .content-3 h2 {
    width: 1200px; margin: 0 auto;
}
.page4 .content-3 .img {
    margin: 60px 0 0; width: 100%; height: 480px; position: relative; overflow: hidden;
}
.page4 .content-3 .img img {
    position: absolute; left: 50%; top: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
}

@media only screen and (min-width: 1920px) {
    .page4 .content-3 .img img {
        width: 100%; height: auto;
    }
}


/*//////////////////////////////////////////////////
05.料　金
//////////////////////////////////////////////////*/

.page5 .content-1 {
    width: 1200px; margin: 70px auto 0; text-align: center;
}
.page5 .tel {
    display: block; width: 204px; margin: 40px auto 0;
}
.page5 .bnr {
    display: block; width: 600px; margin: 40px auto 0;
}


/*//////////////////////////////////////////////////
06.アクセス・周辺案内
//////////////////////////////////////////////////*/

.page6 .content-1, .page6 .content-2 {
    width: 1200px; margin: 80px auto 0;
}
.page6 .content-1 .gmap {
    width: 1200px; height: 600px; overflow: hidden; margin: 40px 0 0; background-image: url("../img/common/common_tex-2.jpg");
}
.page6 .content-1 .map {
    margin: 80px 0 0;
}
.page6 .content-2 article, .page6 .content-2 .txt {
    margin: 30px 0 60px;
    position: relative;
}
.page6 .content-2 h3 {
    width: 436px; float: left; margin: 0 0 40px;
}
.page6 .content-2 p {
    width: 700px; float: right; margin: 18px 0 0;
}
.page6 .content-2 .imgs img {
    float: left;
}
.col_3_2{
    width: 700px;
    float: right;
}
.col_3_2:after{
    content: ' ';
    display: block;
    clear: both;
}
.col_3_2 li:first-child{
    width: 60%;
    float: left;
}
.col_3_2 li:last-child{
    width: 30%;
    float: right;
}
.col_3_2 li img{
    width: 100%;
}
.ashiyu{
    position: absolute;
    left: 280px;
    top: 70px;
    width: 180px !important;
    text-align: center;
    font-size: 9px;
    line-height: 1;
}
.ashiyu img{
    width: 100%;
}