@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */
#main_img { width: 100%; height: 750px; padding: 0; overflow: hidden;}
#main_img .ofi { min-width: 1600px;}
#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: auto;}
	#main_img .ofi { min-width: 700px; position: relative; left: 50%; transform: translateX(-50%);}
}


/* ---------------------------------------------------
#common
------------------------------------------------------ */
h2{ margin-bottom: 30px; font-size: 46px; color: #000; text-align: center; font-weight: bold;}
h2+p{ margin-bottom: 75px; font-size: 16px; text-align: center;}

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


/* ---------------------------------------------------
#lead
------------------------------------------------------ */
#lead { padding: 125px 0 0; text-align: center;}
#lead h2 { font-size: 36px;}
#lead p { font-size: 16px; line-height: 2;}

@media screen and (max-width: 600px) {
	#lead { padding: 10vw 0 0;}
	#lead h2 { font-size: 5.5vw;}
}

/* ---------------------------------------------------
#charm
------------------------------------------------------ */
#charm { padding-top: 90px; 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: 60px; margin: 0 auto;}
#charm div dl dt { padding-bottom: 15px; border-bottom: 1px solid #c6c6c6; color: #000; font-size: 26px; text-align: center;
}
#charm div dl dd { padding-top: 20px; line-height: 2;}
#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 dd { padding-top: 10px; line-height: 1.6;}
}

/* ---------------------------------------------------
#room
------------------------------------------------------ */
#room { padding-top: 90px; 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(70px, 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 #000; border-bottom: 1px solid #c6c6c6;
}
#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 #c6c6c6; 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 #c6c6c6; color: #000;
}
#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: 10vw; }
	#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%;}
}


/* ---------------------------------------------------
#info
------------------------------------------------------ */
#info { padding: 90px 0; background: #f5f5f5; color: #555;}
#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: #e3e3e3; border-bottom: 1px solid #fff; text-align: center;}
#info dl dd { display: table-cell; padding: 15px 40px; vertical-align: middle; border-bottom: 1px solid #c6c6c6;}

@media screen and (max-width: 600px) {
	#info { padding: 10vw 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: 90px 0 0; color: #555;}
#news .cmn_link_01 { margin-top: 35px; }
#feed { border-top: 1px solid #c6c6c6; }
#feed li { border-bottom: 1px solid #c6c6c6; }
#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: 10vw 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: 90px; 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: 10vw;}
	#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: 50px; font-size: 30px; text-align: center;
	-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
}
#access .route_box{ display: flex; justify-content: space-between;}

#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: #000;}
#access .route+.route { margin-left: 2%;}
#access .route .acc_tit { padding: 15px 2%; background: #d9d9d9; font-size: 18px; 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: 18px;}
#access .route .goal { background: #000; color: #fff; font-size: 18px;}
#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;}

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

	#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);
	}
}

/* ---------------------------------------------------
#route_1
------------------------------------------------------ */

#route_1 .route { width: 48.5%;}
#route_1 .route+.route { margin-left: 0; float: right;}

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

/* ---------------------------------------------------
#route_2
------------------------------------------------------ */
#route_2 .route { width: 48.5%;}
#route_2 .route+.route { margin-left: 0; float: right;}

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

/* ---------------------------------------------------
#route_3
------------------------------------------------------ */
#route_3 { padding-bottom: 80px;}
#route_3 .route_box+p { padding-top: 30px;}

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