@charset "UTF-8";

/* -------------------------------------------------------------
　TOPタイトル
------------------------------------------------------------- */

#gallery #page_title {
	background: url(/img/hotel_h1/h1_bg_gallery.jpg) 35% top no-repeat;
	background-size: auto 275px;
}




/* -------------------------------------------------------------
　ギャラリー
------------------------------------------------------------- */

#gallery_list .inner {
	max-width: 370px;
	margin: 0 auto;
}

/* media Queries /////////////////////////////////////
--------------------------------------------------- */
@media screen and (min-width:560px), print {

#gallery_list .inner {
	max-width: 560px;
	padding: 0 10px;
}

}/* /560 */

/* media Queries /////////////////////////////////////
--------------------------------------------------- */
@media screen and (min-width:740px), print {

#gallery_list .inner {
	max-width: 740px;
}

}/* /740 */



/* ナビ　ボタン
------------------------------------------------------------- */

#gallery_list .galry_nav {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 38px;
}

#gallery_list .galry_nav a {
	display: block;
	width: 160px;
	color: #1E2B30;
	font-size: 12px;
	text-align: center;
	line-height: 1;
	margin: 0 10px 10px;
	padding: 11px 0;
	border: 1px solid #638FA2;
	border-radius: 20px;
	transition: 0.5s;
}
#gallery_list .galry_nav a:hover {
	color: #fff;
	background: #638FA2;
	transition: 0.5s;
}
/* プレミア適用 */
body.prem #gallery_list .galry_nav a {
	border: 1px solid #AC9362;
}
body.prem #gallery_list .galry_nav a:hover {
	background: #AC9362;
}


/* media Queries /////////////////////////////////////
--------------------------------------------------- */
@media screen and (min-width:740px), print {

#gallery_list .galry_nav a {
	width: calc(33.3333% - 20px);
}

}/* /740 */



/* ギャラリー一覧
------------------------------------------------------------- */

#gallery_list dt {
	color: #638FA2;
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	margin: 0 10px 15px;
	padding: 0 0 8px;
	border-bottom: 1px solid #638FA2;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
#gallery_list dt.show {
	opacity: 1;
	transform: translateY(0);
}
/* プレミア適用 */
body.prem #gallery_list dt {
	color: #AC9362;
	border-bottom: 1px solid #AC9362;
}

#gallery_list dd {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 48px;
	padding: 0;
}

#gallery_list dl dd p {
	width: 160px;
	color: #1E2B30;
	font-size: 12px;
	line-height: 1.5;
	margin: 0 10px 15px;
	padding: 10px 9px 15px;
	border: 1px solid #d3d4d5;
	opacity: 0;
	opacity: 1;
	transform: translateY(20px);
	transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
#gallery_list dl dd p.show {
	opacity: 1;
	transform: translateY(0);
}

#gallery_list dl p img {
	width:100%;
	margin:0 0 10px;
}



/* colorbox 調整
------------------------------------------------------------- */

#colorbox.glryPhoto #cboxTitle {
	bottom: unset;
	font-size: 12px;
	font-weight: 300;
	text-align: left;
	line-height: 1.5;
	padding:1%;
	background:#fff;
}

/* Closeボタン */

#colorbox.glryPhoto button#cboxClose {
	top: -40px;
	left: unset;
	right: 10px;
	bottom: unset;
	width: 30px;
	height: 30px;
	background-position: unset;
	background: url(/img/colorbox/bt_close.svg) 0 0 no-repeat;
	background-size: 30px 30px;
	transition: 0.5s;
}
/* プレミア適用 */
body.prem #colorbox.glryPhoto button#cboxClose {
	background: url(/img/colorbox/bt_close_w.svg) 0 0 no-repeat;
	background-size: 30px 30px;
}

#colorbox.glryPhoto button#cboxClose:hover {
	opacity: 0.7;
	transition: 0.5s;
}

/* コントロールボタン */

#colorbox.glryPhoto button#cboxPrevious {
	left: 10px;
	background: url(/img/colorbox/btPrev.svg) 0 0 no-repeat;
	background-size: cover;
}

#colorbox.glryPhoto button#cboxNext {
	left: unset;
	right: 10px;
	background: url(/img/colorbox/btNext.svg) 0 0 no-repeat;
	background-size: cover;
}
/* プレミア適用 */
body.prem #colorbox.glryPhoto button#cboxPrevious {
	background: url(/img/slick/arrow_slideBK_L.svg) 0 0 no-repeat;
	background-size: cover;
}
/* プレミア適用 */
body.prem #colorbox.glryPhoto button#cboxNext {
	background: url(/img/slick/arrow_slideBK_R.svg) 0 0 no-repeat;
	background-size: cover;
}


#colorbox.glryPhoto button#cboxPrevious,
#colorbox.glryPhoto button#cboxNext {
	width: 40px;
	height: 40px;
	bottom: 40%;
	background-position: 0 0;
	transition: 0.5s;
}
#colorbox.glryPhoto button#cboxPrevious:hover,
#colorbox.glryPhoto button#cboxNext:hover {
	opacity: 0.7;
	transition: 0.5s;
}


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

#colorbox.glryPhoto button#cboxPrevious {
	left: 15px;
}

#colorbox.glryPhoto button#cboxNext {
	right: 15px;
}

#colorbox.glryPhoto button#cboxPrevious,
#colorbox.glryPhoto button#cboxNext {
	width: 50px;
	height: 50px;
	bottom: 46%;
}

}






/* media Queries PC //////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- 810px */
@media screen and (min-width:810px), print {

/* -------------------------------------------------------------
　TOPタイトル
------------------------------------------------------------- */

#gallery #page_title {
	background: url(/img/hotel_h1/h1_bg_gallery.jpg) center top no-repeat;
	background-size: cover;
}




/* -------------------------------------------------------------
　ギャラリー
------------------------------------------------------------- */
#gallery_list {
	padding: 0 0 160px;
}

#gallery_list .inner {
	max-width: 820px;
	padding: 0 10px;
}


/* ナビ　ボタン
------------------------------------------------------------- */

#gallery_list .galry_nav {
	margin: 0 0 60px;
}


/* media Queries /////////////////////////////////////
--------------------------------------------------- */
@media screen and (min-width:820px), print {

#gallery_list .inner {
	max-width: 820px;
}

}/* /560 */


/* media Queries /////////////////////////////////////
--------------------------------------------------- */
@media screen and (min-width:1040px), print {

#gallery_list .inner {
	max-width: 1040px;
	padding: 0 20px;
}

#gallery_list .galry_nav a {
	width: calc(16.6666% - 14px);
	margin: 0 7px;
	padding: 13px 0;
}

}/* /1040 */



/* ギャラリー一覧
------------------------------------------------------------- */

#gallery_list dt {
	font-size: 20px;
	margin: 0 10px 40px;
	padding: 0 0 8px;
}

#gallery_list dd {
	margin: 0 0 60px;
}


#gallery_list dl dd p {
	width: 180px;
	margin: 0 10px 20px;
	padding: 15px 14px 25px;
}




}/* 801 */