@charset "utf-8";
/* =====================================================================
   ご利用案内（/guide/）ページ固有スタイル
   ※ ヘッダー/フッター/見出し/MV共通ガワ/パンクズ/カード → common.css
     ここには guide ページ専用のMV写真と本文スタイルを書く。
   ===================================================================== */

/* MV背景写真 */
.pageHead--guide {
	background-image: url('/img/guide/mv.jpg');
}


/* =========== セクション共通 =========== */
/* 背景を交互に（トップ準拠：FFF ／ 薄水色 #f4fafd） */
.flow,
.cancel {
	background: #FFF;
}

.rule {
	background: #f4fafd;
}


/* =========== ご予約の流れ（ステップ）=========== */
.flowList {
	list-style: none;
}

.flowList__item {
	position: relative;
	display: flex;
	gap: 24px;
	padding-bottom: 32px;
}

/* ステップをつなぐ縦線 */
.flowList__item:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 27px;
	top: 56px;
	bottom: 0;
	width: 2px;
	background: #d5e2ec;
}

.flowList__num {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #223240;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	font-weight: 700;
	position: relative;
	z-index: 1;
}

.flowList__body {
	flex: 1;
	padding-top: 6px;
}

.flowList__title {
	font-size: 20px;
	font-weight: 700;
	color: #1A1E24;
	margin-bottom: 10px;
}

.flowList__desc {
	line-height: 1.9;
	color: #6B7684;
}

.flowList__link {
	display: inline-block;
	margin-top: 12px;
	font-size: 15px;
	font-weight: 700;
	color: #2f7fb0;
	transition: .2s;
}

.flowList__link:hover {
	opacity: .65;
}


/* =========== 規約リスト =========== */
.ruleList {
	list-style: none;
}

.ruleList li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 11px;
	line-height: 1.9;
	color: #333B44;
}

.ruleList li::before {
	content: '';
	position: absolute;
	left: 3px;
	top: .62em;
	width: 9px;
	height: 9px;
	border: 2px solid #e99a20;
	border-radius: 50%;
	box-sizing: border-box;
}


/* =========== お知らせボックス（キャンセル料）=========== */
.noticeBox {
	background: #FFF;
	border: 1px solid #f0d3b0;
	border-left: 4px solid #e99a20;
	border-radius: 4px;
	padding: 24px 28px;
	margin-bottom: 50px;
}

.noticeBox__title {
	font-size: 20px;
	font-weight: 700;
	color: #b5720d;
	margin-bottom: 8px;
}

.noticeBox__txt {
	line-height: 1.9;
	color: #333B44;
}

.noticeBox__txt strong {
	font-size: 18px;
	color: #c0392b;
}


/* =========== SP（767px以下）=========== */
@media screen and (max-width: 767px){

.flowList__item {
	gap: 16px;
	padding-bottom: 26px;
	}

.flowList__item:not(:last-child)::before {
	left: 23px;
	top: 48px;
	}

.flowList__num {
	width: 48px;
	height: 48px;
	font-size: 17px;
	}

.flowList__title {
	font-size: 18px;
	}

.noticeBox {
	padding: 20px 22px;
	margin-bottom: 20px;
	}

.noticeBox__title {
	font-size: 18px;
	}

.ruleList li {
	margin-bottom: 6px;
	}

}