@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */

h1.relative {
	max-width: 1280px;
    width: 94%;
    font-size: 48px;
    line-height: 1.7;
    letter-spacing: 10px;
    font-weight: 600;
    color: #fff;
	position: absolute;
	left: 50%;
	bottom: 50px;
    transform: translateX(-50%);
	text-align: left;
	z-index: 500;
    /* font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif; */
}

#main_img { width: 100%; height: 90vh; padding: 0; overflow: hidden; position: relative; }
#main_img .ofi { min-width: 1600px; height: 90vh;}
#main_img .slick { line-height: 0; margin: 0 auto; opacity: 0; transition: opacity 0.85s linear; overflow: hidden; }
#main_img .slick.slick-initialized { opacity: 1; }

@media screen and (max-width: 1100px) {
	#main_img p { width: 700px; left: 190px;}
}

@media screen and (max-width: 600px) {
	#main_img { height: 80vh;}
	#main_img .ofi { min-width: 1000px; height: 80vh; position: relative; left: 50%; transform: translateX(-50%);}

	h1.relative { font-size: 22px;}
	h1.relative br { display: none;}
}




/* ---------------------------------------------------
#common
------------------------------------------------------ */
h2{ margin-bottom: 70px; font-size: 46px;  text-align: center; }
h2 span { display: block; font-size: 24px; font-weight: normal; color: #1c1c1c; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;}
h2+p{ margin-bottom: 75px; font-size: 16px; text-align: center; line-height: 40px;}

@media screen and (max-width: 600px) {
	h2{ margin-bottom: 5vw; font-size: 32px;}
	h2 span { font-size: 15px;}
	h2+p{ margin-bottom: 7vw; text-align: left;}
}


/* ---------------------------------------------------
#lead
------------------------------------------------------ */
#lead { padding: 250px 0; text-align: center; position: relative; clip-path: inset(0);}
#lead:before { content:""; display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100vh; background-repeat:no-repeat; background-position:50% 100%; background-image: url(../../img/lead_bg.jpg); background-size:cover;}

#lead .inner { padding: 140px 0; background-color: #fff;}

#lead h2 { font-size: 36px; color: #000; font-weight: normal; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;}
#lead h2+img { width: 128px; height: auto;}
#lead h3 { margin: 70px 0; font-size: 24px; letter-spacing: .1em;}
#lead h3 span { position: relative; display: table; margin: 7px auto 0; font-size: 18px; letter-spacing: .2em;}
#lead h3 span::before { position: absolute; left: -90px; top: 50%; content: ""; width: 80px; height: 1px; background-color: #000;}
#lead h3 span::after { position: absolute; right: -90px; top: 50%; content: ""; width: 80px; height: 1px; background-color: #000;}
#lead p { font-size: 16px; line-height: 2; margin: 0 0 40px;}
#lead .cmn_link_01 { color: #fff; border: none; background: #100f0d;}
#lead p+img { width: 92%; margin: 0 auto; height: auto;}

@media screen and (max-width: 600px) {
	#lead { padding: 25vw 0; overflow: hidden;}
	#lead .inner { padding: 15vw 5%;}
	#lead h2 { font-size: 30px; line-height: 1.5;}
	#lead p br { display: none;}
	#lead h3 { margin: 40px 0; font-size: 20px;}
	#lead h3 span::before,
	#lead h3 span::after { display: none;}
	#lead p { margin: 0 0 20px; text-align: left;}
	#lead p+img { width: 100%;}
}

/* ---------------------------------------------------
#sec_search
------------------------------------------------------ */
#sec_search{ padding: 60px 0;}
#sec_search .box_in { background: #f4f4f4; color: #3f3a35; display: flex; justify-content: space-between; align-items: center; padding: 30px 60px 50px 50px; width: 1200px; margin: 0 auto;}
#sec_search h2 span { font-size: 13px; opacity: .5; line-height: 1; letter-spacing: 0.2em;}
#sec_search h2 { display: block; font-size: 24px; text-align: center; font-weight: normal; color: #1c1c1c; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;}
#search_489ban form{ display: flex; align-items: flex-end;}
#search_489ban .date_489ban{ margin: 0 30px 0 0;}
#search_489ban .date_489ban dd{ font-size: 14px; line-height: 1;}
#search_489ban .date_489ban dt,
#search_489ban .stay_489ban dt,
#search_489ban .person_489ban dt{ font-size: 14px; line-height: 1; padding: 0 0 10px;}
#search_489ban .stay_489ban{ margin: 0 10px 0 0;}
#search_489ban input[type="text"] { padding: 0 20px; border: none; border-radius: 0; outline: none; background: url("../img/icon_calendar.svg") no-repeat center right 15px #fff; background-size: 18px; width: 230px; height: 80px; font-size: 22px; font-family: 'EB Garamond'; margin: 0 20px 0 0; box-sizing: border-box;}
#search_489ban input[type="text"]:disabled { color: #ccc; opacity: 1;}
#search_489ban input[ type="checkbox"] { appearance: none; height: 16px; width: 16px; margin: 0 5px 3px 0; border: 1px solid #cbcbc2; border-radius: 0; position: relative; background-color: #fff;}
#search_489ban input[ type="checkbox"]:checked { border: 1px solid #cbcbc2; background-color: #39322c; }
#search_489ban input[ type="checkbox"]:checked::before { content: ""; display: block; width: 10px; height: 5px; border-bottom: solid 2px #fff; border-left: solid 2px #fff; transform: rotate(-45deg); position: absolute; top: 0; right: 0; left: 0; margin: 2px auto; }
#search_489ban input[ type="checkbox"]:focus-visible { outline: 2px solid #1d9bf0; outline-offset: 2px; }
#search_489ban button { position: relative; width: 220px; height: 80px; border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; outline:none; background: #969696; color: #fff; font-size: 16px; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; transition: background 0.5s;}
#search_489ban button:hover { background: #574C43;}
#search_489ban button::before { position: absolute; content: ""; display: block; width: 16px; height: 16px; background: url(../img/icon_search.svg) no-repeat; background-size: 100%; left: 3.5em; top: calc(50% - .5em);}
#search_489ban .stay_489ban dd { display: grid; grid-template-rows: auto; grid-template-columns: auto; position: relative; z-index: 0; background: #fff; }
#search_489ban .date_489ban:has(input[type="text"]:disabled) + .inbox_489ban .stay_489ban .select_label { color: #ccc;}
#search_489ban .date_489ban:has(input[type="text"]:disabled) + .inbox_489ban .stay_489ban select { pointer-events: none;}
#search_489ban .select_label { display: flex; grid-row: 1; grid-column: 1; align-items: center; pointer-events: none; border-radius: 0; border: none; height: 80px; font-size: 22px; font-family: 'EB Garamond', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; background: url("../img/select_arrow.svg") no-repeat center right 15px #fff; background-size: 6px; padding: 0 30px 0 20px; outline: none; width: 120px; color: #000; }
#search_489ban select { grid-row: 1; grid-column: 1; font-size: 18px; appearance: none; opacity: 0; }

#search_489ban .person_489ban dd { display: grid; grid-template-rows: auto; grid-template-columns: auto; position: relative; z-index: 0; grid-template-columns: 1fr auto;}
#search_489ban .person_489ban dd span { font-size: 20px; line-height: 4; padding: 0 5px;}

@media screen and (max-width: 600px) {
	#sec_search .box_in { padding: 30px 5% 40px;}
	#sec_search h2 { font-size: 20px;}
	#sec_search h2 span { font-size: 12px;}
	#sec_search .box_in { display: block; width: 90%;}
	#search_489ban form { flex-wrap: wrap; align-items: flex-start; justify-content: space-between;}
	#search_489ban input[type="text"] { width: calc(100% - 6em); height: 50px; margin: 0 10px 0 0; font-size: 18px;}
	#search_489ban .inbox_489ban { width: 47%;}
	#search_489ban .stay_489ban { margin: 0;}
	#search_489ban .date_489ban { width: 100%; margin: 0 0 20px;}
	#search_489ban .select_label { width: 100%; height: 50px; font-size: 18px;}
	#search_489ban button { width: 100%; height: 50px; margin: 20px 0 0;}
	#search_489ban .person_489ban dd span { font-size: 14px;}

}

/* ---------------------------------------------------
#charm
------------------------------------------------------ */
#charm { padding-top: 130px; width: 100%; max-width: 1600px; margin: 0 auto; }
#charm div{ display: flex; background: #f5f5f5;}
#charm div p { width: 50%; height: 400px; overflow: hidden;}
#charm div dl { width: 32%; padding-top: 90px; margin: 0 auto;}
#charm div dl.pets { width: 32%; padding-top: 40px; margin: 0 auto;}
#charm div dl dt { padding-bottom: 15px; border-bottom: 1px solid #e0e0e0; color: #1c1c1c; font-size: 24px; text-align: center;
}
#charm div dl dt span { font-size: 30px; font-weight: bold;}
#charm div dl dd { padding-top: 20px; line-height: 2;}
#charm div dl dd a { margin-top: 10px;}
#charm div:nth-of-type(odd) { flex-direction: row;}
#charm div:nth-of-type(even) { flex-direction: row-reverse;}

@media screen and (max-width: 1300px) {
	#charm div dl { width: 40%;}
}

@media screen and (max-width: 600px) {
	#charm { padding-top: 10vw;}
	#charm div{ flex-direction: column !important;}
	#charm div p { margin: 0; width: 100%; height: auto;}
	#charm div p img { max-width: 100%;}
	#charm div dl { width: 92%; margin: 5vw auto 10vw !important; padding: 0;}
	#charm div dl dt { padding-bottom: 7px; font-size: 21px;}
	#charm div dl dt span { font-size: 38px;}
	#charm div dl dd { padding-top: 10px; /*line-height: 1.6;*/}
	#charm div dl.pets { width: 92%; padding: 0;}
}

/* ---------------------------------------------------
#room
------------------------------------------------------ */
#room { padding-top: 130px; width: 92%; max-width: 1600px; margin: 0 auto; }

#room .slide_block{ margin-bottom: 80px; display: flex; position: relative;}
#room .slick_slide{ width: 50%; height: 500px;}
#room .slick_slide .slick-list,
#room .slick_slide .slick-slide div { height: 500px;}

#room .slick_thumb{ max-width: 47%; left: 53%; bottom: 0; position: absolute;}
#room .slide_block:nth-of-type(even) .slick_thumb{ left: 0;}

#room .slick_thumb .slick-track{
	width: 100% !important; transform: none !important;
	display: flex; align-items: center; gap: 0 10px;
}
#room .slick_thumb .slick-track::before,
#room .slick_thumb .slick-track::after{ display: none;}
#room .slick_thumb .slick-slide{ float: none;}
#room .slick_thumb .slick-slide{
	width: 100% !important; height: max(100px, 6vw);
	box-sizing: border-box; overflow: hidden;
}
#room .slick_thumb .slick-slide div{ width: 100%; height: 100%;}
#room .slick_thumb .slick-active{ filter: brightness(50%)}
#room .slick_thumb .slick-current{ filter: brightness(100%)}

#room .txt{ width: 50%; box-sizing: border-box;}
#room .slide_block:nth-of-type(odd) { flex-direction: row;}
#room .slide_block:nth-of-type(odd) .txt { padding-left: 3%;}
#room .slide_block:nth-of-type(even) { flex-direction: row-reverse;}
#room .slide_block:nth-of-type(even) .txt { padding-right: 3%;}
#room .txt h3 {
	padding: 25px 0; font-size: 26px; text-align: center;
	border-top: 2px solid #1c1c1c; border-bottom: 1px solid #e0e0e0;
}
#room .txt h3 span { font-size: 12px;}
#room .txt p { padding-top: 20px;}

#room .room_detail {
	margin: 70px auto 90px; padding: 40px 50px 30px; width: 100%; max-width: 1100px;
	border: 1px solid #e0e0e0; box-sizing: border-box;
	display: flex; justify-content: space-between;
}


#room .room_detail h4 { padding-bottom: 10px; margin-bottom: 15px; font-size: 26px; border-bottom: 1px solid #e0e0e0; color: #1c1c1c;
}
#room .room_detail p+p { padding-top: 15px;}
#room .room_detail div:nth-of-type(1) p { line-height: 1.8;}

@media screen and (max-width: 600px) {
	#room{ padding-top: 15vw; }
	#room .slide_block{ margin-bottom: 10vw; flex-direction: column;}
	#room .slick_slide{ width: 100%; height: auto;}
	#room .slick_slide .slick-list,
	#room .slick_slide .slick-slide div { height: 100%;}
	#room .slick_thumb{ margin: 1vw 0 2vw; max-width: 100%; position: static;}
	#room .slick_thumb .slick-slide{ height: auto !important;}
	#room .slick_thumb .slick-track { flex-wrap: wrap; gap: 0 8px; }
	#room .slick_thumb .slick-slide { width: calc((100% - 24px) / 4) !important; }
	#room .txt{ padding-bottom: 5vw; width: 100%; max-width: 100%;}
	#room .slide_block:nth-of-type(odd),
	#room .slide_block:nth-of-type(even) { flex-direction: column;}
	#room .slide_block:nth-of-type(odd) .txt { padding-left: 0;}
	#room .slide_block:nth-of-type(even) .txt { padding-right: 0;}
	#room .room_detail{ margin: 7vw 0; padding: 4vw; flex-direction: column;}
	#room .room_detail div:nth-of-type(1) { margin-bottom: 5vw; width: 100%;}
	#room .room_detail div:nth-of-type(2) { width: 100%; max-width: 100%;}
	#room .room_detail div:nth-of-type(2) img{ width: 100%;}
	#room .txt h3 { padding: 5px 0; font-size: 22px;}
	#room .room_detail h4 { font-size: 22px;}
}


/* ---------------------------------------------------
#info
------------------------------------------------------ */
#info { padding: 130px 0; background: #F0F0F0;}
#info h3 { padding-bottom: 50px; font-size: 34px; color: #2b3339; text-align: center;
	-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
}
#info dl { display: table; width: 100%;}
#info dl dt { display: table-cell; width: 30%; padding: 15px 40px; vertical-align: middle; background: #1c1c1c; border-bottom: 1px solid #fff; text-align: center; color: #fff;}
#info dl dd { display: table-cell; padding: 15px 40px; vertical-align: middle; border-bottom: 1px solid #e0e0e0;}

@media screen and (max-width: 600px) {
	#info { padding: 15vw 0;}
	#info h3 { padding-bottom: 20px; font-size: 25px;}
	#info dl { display: block;}
	#info dl dt { display: block; width: 100%; padding: 5px; box-sizing: border-box; border-bottom: none;}
	#info dl dd { display: block; padding: 10px 8px 15px; box-sizing: border-box;}
}


/* ---------------------------------------------------
#news
------------------------------------------------------ */

#news { padding: 130px 0 0;}
#news .cmn_link_01 { margin-top: 35px; }
#feed { border-top: 1px solid #e0e0e0; }
#feed li { border-bottom: 1px solid #e0e0e0; }
#feed li a { display: flex; padding: 27px 30px; }
#feed .date { flex-shrink: 0; display: inline-flex; width: 200px; padding-left: 40px; box-sizing: border-box; color: #aaa; }
#feed .tit { font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
@media screen and (hover: hover) {
	#feed li a:hover { text-decoration: none; }
	#feed li a:hover .link_run::after { transform: scaleX(1); }
}
@media screen and (max-width: 600px) {
	#news { padding: 20vw 0 0;}
	#news h3 { padding-bottom: 20px; font-size: 25px;}
	#feed li a { display: block; padding: 15px 8px; }
	#feed .date { width: auto; padding: 0; font-size: 14px; }
}


/* ---------------------------------------------------
#access
------------------------------------------------------ */
#access{ padding-top: 130px; margin: 0 auto;}
#access #map_col { width: 100%; height: 450px; margin: 60px auto;}
#access #map_col iframe { width: 100%;}


@media screen and (max-width: 600px) {
	#access{ padding-top: 20vw;}
	#access #map_col { height: 320px; margin: 7vw auto;}
	#access #map_col iframe{ height: 320px;}
}


/* 経路図
------------------------------------------------------ */
#access .route_wrap { padding: 60px 0 80px;}
#access .route_wrap+.route_wrap { border-top: 1px solid #ccc;}
#access .route_wrap h3 {padding-bottom: 10px; 
	font-size: 30px; text-align: center;
	-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
}
#access .route_box{ display: flex; justify-content: space-between; padding: 0 0 20px;}

#access .route_col,
#access .route,
#access .route ul,
#access .route li { display: flex;}
#access .route,
#access .route ul { flex-direction: column;}

#access .route_col { margin: 0 auto; width: 1100px; max-width: 96%; justify-content: space-between;}
#access .route { width: calc(96% / 3); color: #1c1c1c;}
#access .route+.route { margin-left: 2%;}
#access .route .acc_tit { padding: 15px 2%; background: #d9d9d9; font-size: 15px; text-align: center;}
#access .route ul { height: 100%; display: flex; flex-direction: column; position: relative;}
#access .route ul:before {
	content: ""; display: block; position: absolute; z-index: 1; top: 0; bottom: 0;
	left: 50%; margin-left: -2.5px; width: 5px; height: 100%; background: #ccc;
}
#access .route li {
	padding: 15px 2%; position: relative; z-index: 2;
	justify-content: center;
}
#access .route .point { background: #e8e8e8; font-size: 15px;}
#access .route .goal { background: #100f0d; color: #fff; font-size: 15px;}
#access .route .time { padding: 20px 2%; font-size: 16px; flex-grow: 1; align-items: center;}
#access .route .time span { display: block; padding: 10px 0; text-align: center; background: #fff;}

#access .link { margin-top: 50px; text-align: center; font-size: 0;}
#access .link li { width: 32%; display: inline-block; font-size: 14px;}
#access .link li+li {  margin-left: 2%;}
#access .link li a { display: block; padding: 13px 0; box-sizing: border-box; border: 1px solid #1c1c1c; color: #1c1c1c;}
#access .link li a:hover { color: #fff; text-decoration: none; background: #1c1c1c;}
#access .link li a span { margin-left: 1em;}

#access h3 + p {
  text-align: center;
  font-size: 18px;
	padding-bottom: 50px; 
}

@media screen and (max-width: 600px) {
	#access .route_wrap { padding: 30px 0 50px;}
	#access .route_wrap h3 { padding-bottom: 20px; font-size: 25px;}
	#access h3 + p { font-size: 16px; padding-bottom: 30px;}

	#access .route_box{ flex-direction: column;}
	#access .route { width: 100%;}
	#access .route+.route { margin: 30px 0 0;}
	#access .route ul { margin-bottom: 40px;}
	#access .route .acc_tit,
	#access .route li { padding: 10px 25px;}
	#access .route .acc_tit { position: relative;}
	#access .route .acc_tit:after {
    content: ''; width: 0; height: 0; position: absolute;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff; border-left: 6px solid transparent;
    top: 50%; right: 3%; margin-top: -4px;
	}
	#access .route .acc_tit.active:after {
	    -webkit-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	    transform: rotate(180deg);
	}

	#access .link { margin-top: 40px;}
	#access .link li { width: 100%; display: block; font-size: 16px;}
	#access .link li+li { margin: 10px 0 0;}
	#access .link li a { padding: 10px 0;}
	
}

/* ---------------------------------------------------
#route_1
------------------------------------------------------ */
#route_1 .route { width: 48.5%;}
#route_1 .route_box+p { padding-top: 30px;}

@media screen and (max-width: 600px) {
	#route_1 .route { width: 100%; float: none!important;}
}


/* ---------------------------------------------------
#route_2
------------------------------------------------------ */

#route_2 { padding-bottom: 80px;}
#route_2 .route { width: 100%;}

@media screen and (max-width: 600px) {
	#route_2 { padding-bottom: 50px;}
}