@charset "UTF-8";

/* scrollbar制御 */
article.home {
overflow-x: visible;
}
article.home .container {
overflow: hidden;
}


.home .fv {
position: relative;
width: 100%;
height: 100vh;
}
.home .fv h1 {
position: absolute;
top:45%;
left: 50%;
transform: translate(-50%,-45%);
width: 50%;
max-width: 353px;
}
.fv .top_fv {
position: relative;
width: 100%;
height: 100%;
}
.fv .top_fv:after {
position: absolute;
top:0;
left:0;
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
.fv .fv_award {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding:30px 20px 10px;
box-sizing: border-box;
background: rgba(33, 31, 30, .8);
color: #FFF;
}
.fv .fv_award:before {
position: absolute;
top:0;
left: 0;
content: "AWARD";
display: block;
font-family: var(--font-family-min);
color: #444;
font-size: 40px;
line-height: 1;
letter-spacing: -0.05em;
}
.fv .fv_award ul {
display: flex;
font-size: var(--14px);
}
.fv .fv_award ul li span {
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.fv .fv_award ul li:nth-child(n + 2) {
display: none;
}

.fv .fv_award p {
width: 100%;
text-align: right;
}
.fv .fv_award .btn_front_arrow {
color: var(--gold-40);
font-size: var(--14px);
opacity: 1;
}
.fv .fv_award .btn_front_arrow span:before,
.fv .fv_award .btn_front_arrow span::after {
background:var(--gold-40);
}
.home .header .header_logo {
display: none;
}






@media only screen and (min-width: 768px) {
.home .header {
position: sticky;
top:0;
}
.home .header .header_logo {
display: block;
}
.fv .fv_award {
padding:20px;
}
.fv .fv_award:before {
font-size: 50px;
}
.fv .fv_award ul {
width: 80%;
padding-left: 6%;
align-items: center;
}
.fv .fv_award ul li:nth-child(n + 2) {
display: block;
}
.fv .fv_award ul li {
position: relative;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}

.fv .fv_award ul li + li:before {
position: absolute;
top:50%;
transform: translateY(-50%);
left: 0;
content: "";
display: block;
width: 1px;
height: 100%;
min-height: 53px;
background: var(--gold);
}
.fv .fv_award p {
width: 20%;
padding-left: 30px;
text-align: left;
}

}/* min-width: 768px */








/* home_about */
#home_about {
background: url(../images/common/bg_kansuiro_mark.svg) no-repeat center top -90px;
background-size: 180px;
z-index: 1;
}
.container#home_about {
padding: min(3vw,30px) 0 0;
}
#home_about .about_img video {
width: 100%;
}

@media only screen and (min-width: 768px) {
#home_about {
background-position: left -200px center;
background-size: 400px;
}
.container#home_about {
padding: min(8vw,100px) 0 min(10vw,120px);
}
#home_about .about_img {
position: absolute;
top:0;
right:0;
width: min(60%,780px);
z-index: -1;
}

#home_about .col-6 {
width: min(43%,600px);
}
#home_about .col-6 .title_28 {
font-size: min(3vw,28px);
}




}/* min-width: 768px */


@media only screen and (min-width: 1025px) {

}/* min-width: 1025px */


@media only screen and (min-width: 1320px) {

}/* min-width: 1320px */





/* home common */
.home .home_img_l img,
.home .home_img_s img {
display: inline-block;
}
.home .home_img_l img {width: 80%;}
.home .home_img_s img {width: 60%;}
.home .image_letter {
width: 120px;
}
.home .col-inner-sp {
position: relative;
z-index: 3;
}
@media only screen and (min-width: 768px) {
.home .home_img_l img,
.home .home_img_s img {width: 100%;}
.home .image_letter {
width: 240px;
}
}/* min-width: 768px */





/* home_room */
#home_room {
z-index: 1;
}
#home_room:after {
position:absolute;
bottom:0;
left:0;
content: "";
display: block;
width: min(80vw,800px);
height: min(80vw,800px);
background: url(../images/home/room_img_bg.png) no-repeat left bottom;
background-size: 100%;
z-index: -1;
}

#home_room .image_letter {
top:160px;
right:0;
}
#home_room .home_img_s {
margin-top: 2rem;
text-align: right;
}

@media only screen and (min-width: 768px) {
#home_room .image_letter {
top:-60px;
right:0;
}
#home_room .home_img_s {
margin-top: 6rem;
}
}/* home_room min-width: 768px */

@media only screen and (min-width: 1340px) {
#home_room .col-inner-sp {
padding-top: 2rem;
}
}/* home_room min-width: 1340px */



/* home_bath */
#home_bath {
z-index: 1;
}
#home_bath:after {
position:absolute;
bottom:0;
right:0;
content: "";
display: block;
width: min(100vw,800px);
height: min(100vw,800px);
background: url(../images/home/onsen_img_bg.png) no-repeat left bottom;
background-size: 100%;
z-index: -1;
}

#home_bath .image_letter {
top:500px;
right:50px;
}
#home_bath .home_img_s {
margin-top: 2rem;
}
#home_bath .home_img_s > img {
height: 240px;
object-fit: cover;
}

@media only screen and (min-width: 768px) {
#home_bath .image_letter {
top:-20px;
right:-50px;
}
#home_bath .col-5 {
text-align: right;
}
#home_bath .col-5 .col-inner-sp {
display: inline-block;
text-align: left;
width: 100%;
max-width: 490px;
padding: 30px 30px 0;
box-sizing: border-box;
}
#home_bath .home_img_s {
text-align: right;
}
#home_bath .home_img_s > img {
object-fit: contain;
height: auto;
max-width: 490px;
}
}/* home_bath min-width: 768px */





/* home_cuisine */

#home_cuisine {
z-index: 1;
}
#home_cuisine:after {
position:absolute;
bottom: 0;
right:-60px;
content: "";
display: block;
width: min(80vw,500px);
height: min(80vw,500px);
background: url(../images/home/cuisine_img_bg1.png) no-repeat left bottom;
background-size: 100%;
z-index: -1;
}
#home_cuisine:before {
position:absolute;
top: 18vw;
right:0;
content: "";
display: block;
width: min(80vw,400px);
height: min(80vw,400px);
background: url(../images/home/cuisine_img_bg2.png) no-repeat left bottom;
background-size: 100%;
z-index: -1;
}

#home_cuisine .image_letter {
top:10px;
right: 20px;
}
#home_cuisine .home_img_s {
margin-top: 2rem;
}
#home_cuisine .home_img_s > img {
height: 240px;
object-fit: cover;
}

@media only screen and (min-width: 768px) {
#home_cuisine:after {
right:auto;
left: 0;
}
#home_cuisine:before {
top: min(20vw,150px);
}

#home_cuisine .image_letter {
top:0px;
right:30px;
}
/* #home_cuisine .col-5 {
text-align: right;
} */
#home_cuisine .col-5 .col-inner-sp {
display: inline-block;
text-align: left;
width: 100%;
max-width: 490px;
padding: 30px;
box-sizing: border-box;
}
#home_cuisine .home_img_s {
/* text-align: left;
max-width: 490px; */
}
#home_cuisine .home_img_s > img {
object-fit: contain;
height: auto;
/* max-width: 330px; */
}
}/* home_cuisine min-width: 768px */






/* home_facility */
#home_facility .image_letter {
top:400px;
left:0;
z-index: 3;
}
#home_facility .home_img_s > span:first-of-type {
text-align: right;
transform: translateY(40px);
margin-top: -20px;
position: relative;
z-index: 2;
}


@media only screen and (min-width: 768px) {
#home_facility .image_letter {
top:80px;
left:auto;
right:0;
}
#home_facility .col-5 {
text-align: right;
}
#home_facility .col-5 .col-inner-sp {
display: inline-block;
text-align: left;
width: 100%;
max-width: 490px;
padding: 30px 30px 0;
box-sizing: border-box;
}
#home_facility .home_img_s > span > img {
width: 80%;
max-width: 490px;
}
#home_facility .home_img_s > span:first-of-type {
text-align: left;
}
#home_facility .home_img_s > span:last-of-type {
text-align:right;
}
}/* home_facility min-width: 768px */


@media only screen and (min-width: 1340px) {
#home_facility .col-inner-sp {
padding-top: 2rem;
}
}/* home_room min-width: 1340px */



/* home_access */
.home #home_access .home_img_l img {
width: 100%;
}
@media only screen and (min-width: 768px) {
#home_access .col-5 {
text-align: right;
}
#home_access .col-5 .col-inner-sp {
display: inline-block;
text-align: left;
width: 100%;
max-width: 490px;
padding: 30px 30px 0;
box-sizing: border-box;
}


}/* home_access min-width: 768px */










/* home_news */
@media only screen and (min-width: 768px) {
#home_news .col-10 {
display: flex;
width: 100%;
}
#home_news .col-10 h2 {
padding-top: 1rem;
width: 16%;
}
#home_news .col-10 .list_news {
width: 84%;
}
}/* home_news min-width: 768px */

@media only screen and (min-width: 1025px) {
#home_news .col-10 {
width: 83.333333%;
}
}/* home_news min-width: 1025px */








/* home_history */
#home_history {
position: relative;
background: var(--font-color);
color: #FFF;
}
#home_history > figure img {
display: block;
object-fit: cover;
width: 100%;
height: 220px;
}

#home_history .col-6 {
padding-bottom: min(12vw,60px);
}
#home_history .title_28 {
color: #FFF;
}

#home_history .image_letter {
top:-30px;
right:0;
z-index: 3;
}



@media only screen and (min-width: 768px) {
#home_history .image_letter {
top:max(-2vw,-40px);
right:max(-4vw,-80px);
}



#home_history > figure {
position: absolute;
top:0;
right:0;
width: 50%;
height: 100%;
}
#home_history > figure img {
height: 100%;
}


#home_history .col-6 {
padding: min(12vw,120px) 30px;
max-width: 560px;
}



}/* min-width: 768px */