/*
Theme Name: NOEL for Ciel Group
Template: noel_tcd072
Author: Yuuki Horiuchi @ Ciel Group HQ Marketing Dep
Author URI: https://hotel-ciel-gr.jp/
Description: WordPressテーマ「NOEL」のシエルグループ用改変
Version: 1.1.6.1
Updated: 2024-07-31

*/

/* 全ページの背景色をクリーム色にする */
body {
	background: #FEFBEF;
	color: #0f1111;
}

.pc #main_col {
	background: #FEFBEF !important;
}

/* 「シエルのサービス」一覧 */
#clinic_list .item {
	margin: 10px 0 !important;
	background: #ee7a00;
}

#hotels {
	width: auto;
	font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

#hotels p {
	line-height: 2em;
	margin: 0.5em 0 0.5em 0;
}

/* ホテル一覧 */

/* ホテルコンテナー */
.hotel_container {
	width: auto;
	margin-bottom: 3em;
	padding: 1.5em;
	border: 1px solid #D8D3B9;
	background: #fbf7e2;
}

/* ホテル名・概要のコンテナ */
.hotel_title {
	padding-bottom: 1.5em;
	text-align: center;
	color: #ee7a00;
}

/* ホテル名「4Fはバルコニー付き･･･」*/
.hotel_container .hotel_title h3 {
	padding: 0 0 0.5em 0;
	border-bottom: 1px solid #CFC698;
	font-size: 28px;
}

/* ホテルの概要「4Fはバルコニー付き･･･」*/
.hotel_title p {
	margin: 0.5em;
}

/* ホテル画像 */
.hotel_image {
	text-align: center;
}

/* ホテルの各種コンテンツ */
.hotel_desc {
	display: flex;
	column-gap: 1em;
	margin-top: 1.3em;
}

/* タブ風にずらしたタイトル */
.hotel_desc h4 {
	width: fit-content;
	margin: 0 0 0 -0.5em;
	padding: 0.3em 1em;
	background-color: #CFC698;
	font-size: 1em;
	line-height: 1.5em;
	font-weight: bold;
	color: #202020;
	translate: 0 -1em;
}

.hotel_button_wrap_col {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.hotel_button_wrap_row {
	display: flex;
	justify-content: space-evenly;
	flex-direction: row;
	gap: 1em;
}

.hotel_desc>div {
	flex: 1;
	margin-top: 0.6em;
	border: solid 0.1px #CFC698;
	font-size: 16px;
	padding: 0 1em 1em 1em;
}

.hotel_desc>div>ul {
	display: flex;
	list-style: none;
	column-gap: 1em;
	margin: 0 0 1em 0;
}

.hotel_desc>div>ul>li {
	flex: 1;
}



/* リンクボタン */
.hotel_container .hotel_desc a {
	display: inline-flex;
	align-items: center;
	padding:1em;
	border-radius: 6px;
	border: solid 2px #CFC698;
	color: #0f1111;
}

/* リンクボタン ホバー */
.hotel_container .hotel_desc a:hover {
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}


/* 「詳細を見る」リンク */
.hotel_link {
	height: 3em;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	background: #CFC698;
	color: #202020;
}

/*
	ボタン用のアイコン関係
*/
.icon {
	display: inline-flex;
	column-gap: 1em;
	align-items: center;
}

.icon::before {
	content: '';
	width: 1.5em;
	height: 1.5em;
	background: no-repeat center/contain;
}

.icon_right {
	flex-direction: row-reverse;
}

.icon_calendar::before {
	background-image: url("images/icons/calendar-heart-fill.svg");
}

.icon_door::before {
	background-image: url("images/icons/door-open-fill.svg");
}

.icon_map::before {
	background-image: url("images/icons/pin-map-fill.svg");
}

.icon_play::before {
	background-image: url("images/icons/play.svg");
}

.icon_phone::before {
	background-image: url("images/icons/telephone-fill.svg");
}


@media screen and (max-width: 781px) {
	.hotel_desc {
		flex-direction: column;
		row-gap: 1.5em;
	}

	.hotel_container .hotel_desc a {
		display: flex;
	}

	.hotel_desc>div>ul {
		flex-direction: column;
	}

	.hotel_button_wrap_row {
		flex-direction: column;
		gap: 1em;
	}	
}


/* トップページ「公式予約サイトからのご予約が最もお得」 */
#index_reservation_info h2 {
	color: #ee7a00;
}

#index_reservation_info {
	display: flex;
	text-align: center;
}

#index_reservation_info div {
	flex:1;
	background-color: #fbf7e2;
}

/* Direct In 表示 */
/*左上にずらした背景色ありタイトル*/
.directin-search-panel-cielgr {
	margin: 2em auto;
	/* ボックスの余白 */
	background-color: #fff8e9;
	/* ボックス背景色 */
	padding: 2em 0.5em 1.4em;
	/* ボックス内側余白 */
	position: relative;
	/* 配置(ここを基準に)*/
	border: 1px solid #ff6600;
	/* ボックスの線 (太さ　種類　色)*/
}

.directin-search-panel-cielgr .directin-search-panel-title {
	background-color: #ff6600;
	/* タイトル背景色 */
	font-size: 1.5em;
	/* タイトル文字の大きさ */
	font-weight: 700;
	color: #fff;
	/* タイトル文字色 */
	padding: 14px 20px 12px;
	/*タイトルの余白*/
	line-height: 1;
	/*タイトルの行の高さ*/
	position: absolute;
	/* 配置(ここを動かす) */
	top: -35px;
	/*上から（0px）移動*/
	left: 20px;
	/*左から(0px)移動*/
	margin-top: 20px;
	border-radius: 30px;
}

/* 検索ボタンの文字色と背景色 */
.directin-sp-form .directin-sp-form-submit-button button {
	color: #ff6600 !important;
	background: #fff !important;
	border: solid 2px #ff6600 !important;
}

/* 宿泊日・日程未定・人数・客室数の文字色 */
.directin-sp-form .directin-sp-form-input label .directin-sp-form-label,
.directin-sp-form .directin-sp-form-input label .directin-sp-form-checkbox-label,
.directin-sp-form .directin-sp-form-guest-room-input-group .directin-sp-form-guest-room-separator {
	color: #141414 !important;
	font-size: 1em !important;
	line-height: 1.8em;
}

/* Direct In 表示 */