@charset "UTF-8";
/* CSS Document */
html{
	background: #000;
}
/*==============================
　FV
==============================*/
main {
    position: relative;
}
.fvl {
    width: 100%;
    height: 100vh;
    color: #FFF;
    text-align: left;
    position: relative;
}
#slider,
.slide-bg,
.slide-bg-inner,
.slick-list,
.slick-track {
    width: 100%;
    height: 100%;
}
.slide-bg-inner{
    background-position: center left;
	background-repeat: no-repeat;
	background-size: cover;
    position: relative;
}
.slide-bg-inner::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
	z-index: 2;
	background: rgba(0,0,0,0);
}
.slide_item1{background-image: url("../image/top/fv01.jpg?220907");}
.slide_item2{background-image: url("../image/top/fv02.jpg?220907");}
.logo_flex {
    position: absolute;
	z-index: 3;
    height:100%;
	top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    flex-direction: column;
}
.logo{
    width: 13.2vh;
    height: 50vh;
    margin: 0 auto;
	-webkit-filter: drop-shadow(0px 0px 4px rgba(0,0,0,1));
	-moz-filter: drop-shadow(0px 0px 4px rgba(0,0,0,1));
	filter: drop-shadow(0px 0px 4px rgba(0,0,0,1));
}

.fv_ttl {
    font-size: 1.15em;
    letter-spacing: 0.7em;
    line-height: 240%;
    margin-bottom: 1em;
    color: #000;
}
.fv_link_wrap {
    position: absolute;
    z-index: 4;
    bottom: 90px;
    width: 100%;
    text-align: center;
}
.fv_link_wrap .move{
    transition-delay: 2300ms;
}
span.bg_w {
    padding: 0.1em 5%;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 15%, rgba(255,255,255,1) 19%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 81%, rgba(255,255,255,0.8) 85%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 15%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,0.8) 85%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 15%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,0.8) 85%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.fv_link {
    display: flex;
    justify-content: center;
}
.fv_link .btn {
    margin: 0 5px;
    width: calc(33% - 10px);
    max-width: 240px;
}
.fv_link .link {
    display: block;
    background: #c9bc9c;
    color: #000000;
    line-height: 100%;
    padding: 0.85em 0;
    width: 100%;
    letter-spacing: 3px;
}
.fv_link .link:hover {
    background: #fff;
}
@media screen and (max-width:860px) {
.fv_link_wrap {
    bottom: 0;
}
.fv_link .btn {
    margin: 0 1px;
    width: calc(100% / 2 - 2px);
}
}
@media screen and (max-width:600px) {
.fvl {
	height: calc(100vh - 40px);
}
.logo_flex{
}
.logo {
    margin-top: calc(6vh - 3em);
}
.fv_ttl {
    font-size: 1.1em;
    letter-spacing: 5px;
    line-height: 180%;
    margin-bottom: 5vh;
}
.fv_link {
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    background: #000;
	transform: translateY(0);
    opacity: 1;
}
.fv_link .link {
    padding: 1.15em 0;
    font-size: 0.75em;
}
}
/*==============================
　SNSボタン
==============================*/
.sns_btn_wrap.snsfv{
    position: absolute;
    z-index: 5;
    width: 90px;
	flex-wrap: wrap;
    bottom: 90px;
    right: 10px;
    animation-name: opening;
    animation-duration: 2500ms;
    animation-timing-function: linear;
}
.faq_btn{
    animation-name: opening;
    animation-duration: 2500ms;
    animation-timing-function: linear;	
}
@media screen and (max-width:600px) {
.sns_btn_wrap.snsfv{	
    width: 45px;
    bottom: 20px;
    right: 0;
}
}
/*==============================
　message
==============================*/
.message {
    background: rgba(0,0,0,1);
    padding: 60px 0 40px;
}
.message .txt {
    color: #fff;
    font-size: 0.85em;
    font-size: min(2.25vw,0.85em);
    letter-spacing: 1.5px;
    width: 100%;
    text-align: center;
    line-height: 320%;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    justify-content: center;
}
.message .txt_end{
    color: #fff;
    font-size: 0.75em;
    font-size: clamp(12px,2vw,0.75em);
	line-height: 180%;
}
.message_btn {
    width: 94%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.message_btn .arrow_btn_wrap {
    width: 260px;
    position: absolute;
    bottom: 0;
	right: 0;
    margin: 0 auto;
    text-align: left;
}
@media screen and (max-width:1130px) {
.message_btn .arrow_btn_wrap {
    position: static;
    margin: 40px auto 0;
}
}
@media screen and (max-width:1000px) {
.message_btn {
    margin: 40px auto;
}
.message_btn .arrow_btn_wrap {
    position: static;
}
}
@media screen and (max-width:600px) {
.message .txt {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    writing-mode: unset;
    text-align: left;
    letter-spacing: 0;
    font-size: 0.9em;
    line-height: 230%;
    display: block;
}
	.message .txt_end{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
		
	}
}
/*==============================
　page_wrap
==============================*/
.page_wrap{
	height: 100vh;
    min-height: 600px;
	position: relative;
}
.bg_image{
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.bg_image.carefree{
	background-image: url("../image/top/bg_carefree.jpg");
}
.bg_image.guestroom1{
	background-image: url("../image/top/bg_guestroom1.jpg");
}
.bg_image.omotenashi{
	background-image: url("../image/top/bg_omotenashi.jpg");
}
.bg_image.guestroom2{
	background-image: url("../image/top/bg_guestroom2.jpg");
}
.bg_image.spalounge{
	background-image: url("../image/top/bg_spalounge.jpg");
	background-size: 70% auto;
}
.bg_image.gallery{
	background-image: url("../image/top/bg_gallery.jpg");
    height: 480px;
}
.bg_image.spalounge::before {
    opacity: 0.2;
}
.bg_image::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: -moz-linear-gradient(55deg,  rgba(0,0,0,1) 10%, rgba(0,0,0,0) 60%);
	background: -webkit-linear-gradient(55deg,  rgba(0,0,0,1) 10%,rgba(0,0,0,0) 60%);
	background: linear-gradient(55deg,  rgba(0,0,0,1) 10%,rgba(0,0,0,0) 60%);
}
.bg_image.right::before{
	background: -moz-linear-gradient(145deg,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(145deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(145deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);	
}
.under_link{
    position: absolute;
    bottom: 5vw;
    left: 6vw;
    text-align: left;
    color: #fff;
	opacity: 0;
	transform: translateX(-80px);
	transition: all ease;
	transition-duration: 2000ms;
	transition-delay:1000ms;
}
.moved .under_link{
	opacity: 1;
	transform: translateX(0);
}
.under_link.right {
    left: auto;
    right: 6vw;
}
.under_link .ttl {
    font-size: 3em;
    font-size: clamp(1.8em,6vw,3em);
    letter-spacing: 0.2em;
    line-height: 100%;
    margin-bottom: 35px;
}
.under_link .sub_ttl {
    font-size: 1.1em;
    letter-spacing: 0.2em;
    line-height: 120%;
    margin-bottom: 15px;
}
.under_link .txt {
    font-size: 0.8em;
    letter-spacing: 2px;
    line-height: 220%;
    margin-bottom: 40px;
}
@media screen and (max-width:600px) {
.page_wrap {
    height: auto;
}
.bg_image {
    height: 250px;
}
.bg_image::before{
	display: none;
}
.under_link {
    position: static;
    text-align: center;
    padding: 50px 5% 80px;
    transition-duration: 1000ms;
    transition-delay: 500ms;
}
.under_link .ttl {
    font-size: 1.8em;
    letter-spacing: 5px;
	margin-bottom: 25px;
}
.under_link .sub_ttl {
    font-size: 1.2em;
    letter-spacing: 0;
}
.under_link .txt {
    font-size: 0.9em;
    letter-spacing: 0;
	text-align: left;
}
.bg_image.spalounge {
    background-size: cover;
}
}

.sections{
    background: #f4f0ec;
    padding-bottom: 80px;
    padding-bottom: min(4vw,80px);
}
.sections.bg_pattern{
	background:#f4f0ec url("../image/common/bg_sections_top.png") repeat-x top center / 55px 262px;
}
.sections.bg_pattern .head_ttl_wrap{
	background: none;
}
/*==============================
項目タイトル
==============================*/
.head_ttl_wrap{
    background: #f4f0ec;
}
.head_ttl {
    padding: 30px 0 35px;
    padding: min(2vw,30px) 0 min(2vw,35px);
}
.head_ttl::before {
    content: "";
    display: block;
    width: 1px;
    height: 70px;
    background: #000;
    margin: 0 auto 15px;
}
.head_ttl .ttl {
    letter-spacing: 0.5em;
    margin-bottom: 15px;
}
.head_ttl .sub_ttl {
    font-size: 0.9em;
    letter-spacing: 3px;
}
@media screen and (max-width:600px) {
.head_ttl {
    padding: 60px 0 20px;
}
.head_ttl::before {
	display: none;
}
.head_ttl .ttl {
    letter-spacing: 2px;
    font-size: 1.5em;
	margin-bottom: 0;
}
.head_ttl .sub_ttl {
    font-size: 0.85em;
}
}

/*==============================
NEWS
==============================*/
.news_list{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1200px;
    margin: 30px auto;
    transition: all ease 1000ms;
	transition-delay: 1200ms;
	opacity: 0;
	transform: translateY(50px);
}
.moved .news_list{
	opacity: 1;
	transform: translateY(0);	
}
.news_list li {
    width: calc(25% - 20px);
    margin: 0 10px 40px;
    transition: all ease 300ms;
    line-height: 180%;
    text-align: left;
    background: #ffffff;
    padding: 8px 8px 25px;
	position: relative;
}
.news_list a {
    color: #000;
    display: inline-block;
}
.news_list a::after{
	content: "";
	display: block;
	width: 60px;
	height: 4px;
	margin: 1em 0.7em 0 auto;
	background: url("../image/common/btn_arrow_black.png") no-repeat center / contain;
}
.news_list a:hover::after{
	margin-right: 0;
}
.news_list li .img{
	margin-bottom: 5px;
	transition: all ease 300ms;
}
.news_list .date,
.news_list .txt {
    padding: 0px 0.7em;
}
span.newMark {
    display: inline-block;
    color: #fff;
    line-height: 100%;
    padding: 0.25em 0.5em;
    background: #860d87;
    font-size: 0.85em;
}
/*==============================
gallery_list
==============================*/
.gallery_list{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1200px;
    margin: 30px auto;
}
.gallery_list li{
	width: calc(25% - 20px);
    margin: 0 10px 20px;
	transition: all ease 300ms;
}
.gallery_list li:hover{
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.3);
}
.pop_inner {
    height: 80vh;
	max-height: 560px;
    width: auto;
    margin: 0 auto;
    text-align: center;
	animation-name: fadein;
    animation-duration: 500ms;
    animation-timing-function: linear;
}
.mfp-auto-cursor .mfp-content {
    max-width: 700px;
}
.pop_inner img {
    height: 100%;
    width: auto;
}
.mfp-close-btn-in .mfp-close {
    background: #fff;
    border-radius: 50%;
    right: -25px;
    top: -25px;
}
.sections .arrow_btn_wrap {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.sections .arrow_btn_wrap .arrow_btn{
    margin-left: auto;	
}


@media screen and (max-width:740px) {
.news_list,
.gallery_list {
    width: 94%;
    transition-delay: 0ms;
}
.gallery_list {
    width: 84%;
}
.news_list li,
.gallery_list li{
    width: calc(50% - 20px);
}
.bg_image.gallery {
    height: 180px;
}
.pop_inner {
    height: auto;
    width: 80vw;
}
.pop_inner img {
    width: 100%;
    height: auto;
}
.mfp-close-btn-in .mfp-close {
    top: -60px;
    right: 0;
}
button.mfp-arrow {
    transform: scale(0.5);
}
}
@media screen and (max-width:600px) {
.news_list li,
.gallery_list li {
    width: calc(50% - 10px);
    margin: 0 5px 10px;
}
.news_list li{
    padding: 4px 4px 15px;
    font-size: 0.8em;
}
.news_list a::after {
    margin-top: 5px;
}
}
/*==============================
Googlemap
==============================*/
.map_wrap{
    background: #f4f0ec;	
}
.accessmap {
    background: #fff;
    position: relative;
}
.accessmap .sub_ttl {
    letter-spacing: 0.7em;
    position: absolute;
    top: 2em;
    text-align: center;
    width: 100%;
    font-size: 0.85em;
}
.accessmap img {
    max-width: 1600px;
    margin: 0 auto;
}
.mapdata {
    background: #211714;
    color: #fff;
    width: 90%;
    max-width: 260px;
    right: 4em;
    bottom: 2em;
    position: absolute;
    text-align: left;
    padding: 40px 5px 30px 40px;
}
.mapdata .ttl {
    margin-bottom: 1.5em;
    letter-spacing: 1px;
    line-height: 100%;
    font-size: 1.1em;
}
.mapdata .txt {
    font-size: 0.875em;
    line-height: 150%;
    padding-bottom: 0.935em;
    position: relative;
}
.mapdata .txt::after {
    content: "";
    width: 20%;
    height: 1px;
    display: block;
    background: #fff;
    position: absolute;
    bottom: 0;
}
.mapdata .link a {
    color: #fff;
    font-size: 0.85em;
    margin-top: 0.5em;
    display: block;
}
.txt_center{
	text-align: center;
	margin: 20px 5% 0;
}
.txt_center .txt{
	font-size: 0.8em;
	line-height: 200%;
}

@media screen and (max-width:860px) {
.mapdata {
    width: 100%;
    max-width: 100%;
    position: static;
    padding: 1.5em 5%;
}
.mapdata .ttl {
    margin-bottom: 0.5em;
}
.accessmap .sub_ttl {
    position: static;
    background: #f4f0ec;
}
.mapdata .txt br:not(.req) {
    display: none;
}
}
@media screen and (max-width:740px) {
.accessmap .svg_wrap {
    overflow-x: scroll;
}
.accessmap img {
    width: 150vw;
}
}
@media screen and (max-width:600px) {
/*
#reservation_btn{
	position: absolute;
    opacity: 0;
    z-index: -3;
}
*/
#reservation_btn{
	display: block !important;
	opacity: 1 !important;
}
.txt_center{
	text-align: left;
}
}