@charset "utf-8";
/* ==================================================
   お申し込みフォーム ヘッダ・ステップバー（RENTAL-1318）
================================================== */

body {
	padding-top: 0 !important;
	background-image: none !important;
}

/* ヘッダ
-------------------------------------------------- */
.order-header {
	height: 170px;
	margin-bottom: 30px;
	background: #e9f0f7 url(../img/header_bg.jpg) no-repeat center center;
	background-size: cover;
}
.order-header__inner {
	width: 940px;
	margin: 0 auto;
}
/* 本文側（bootstrap の .container）は bootstrap-responsive.css で幅が変わるため、
   ヘッダ内側も同じブレイクポイントで追従させ、ロゴ・タイトルの左端を
   ステップバー／本文と揃える。 */
@media (min-width: 768px) and (max-width: 979px) {
	.order-header__inner {
		width: 724px;
	}
}
@media (max-width: 767px) {
	.order-header__inner {
		width: auto;
		padding: 0 20px;
	}
}
.order-header__logo {
	display: inline-block;
	padding: 12px 24px;
	background-color: #fff;
	border-radius: 0 0 4px 4px;
	line-height: 0;
}
.order-header__logo img {
	width: 186px;
	height: auto;
}
.order-header__title {
	margin: 32px 0 0;
	color: #111;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 40px;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: 0.04em;
}

/* ステップバー
-------------------------------------------------- */
.order-step {
	display: flex;
	height: 48px;
	margin: 0 0 35px;
	padding: 0;
	overflow: hidden;
	border-radius: 4px;
	list-style: none;
}
.order-step li {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	background-color: #d1e2ee;
	color: #196fa9;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
	text-align: center;
}
.order-step li + li {
	padding-left: 16px;
}
.order-step li:nth-child(1) { z-index: 5; }
.order-step li:nth-child(2) { z-index: 4; }
.order-step li:nth-child(3) { z-index: 3; }
.order-step li:nth-child(4) { z-index: 2; }
.order-step li:nth-child(5) { z-index: 1; }

/* 矢印（白フチ＋塗り） */
.order-step li:not(:last-child)::before,
.order-step li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: -2.5px;
	height: 53px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.order-step li:not(:last-child)::before {
	right: -17px;
	width: 17px;
	background-color: #fff;
}
.order-step li:not(:last-child)::after {
	right: -16px;
	/* 白フチ(::before)と塗り(::after)の左端が同じ座標にあると、li の幅が
	   小数になる表示倍率で境界に白のヘアラインが見えることがあるため、
	   塗りだけ左へ1px広げて li の背景と重ねる（頂点位置は変わらない）。 */
	width: 17px;
	background-color: inherit;
}

/* 本文レイアウト
-------------------------------------------------- */
/* bootstrap の .row は margin-left:-20px で左へ出て、子の [class*="span"] が
   margin-left:20px で相殺する前提。ただし入れ子の .row 直下は .w-full（CSS定義
   なしの素のブロック）のため相殺されず、本文ブロックが20px左へはみ出していた。
   ヘッダのロゴ・タイトル／ステップバーの左端に揃える。 */
.row > .w-full {
	margin-left: 20px;
}

/* お申し込み完了ページ
-------------------------------------------------- */
/* .alert-block 内で2つ目以降の見出しは、直前の段落との間隔を空けて
   別ブロックである事を明示する（発注者指示：原稿同様に1行空ける）。 */
.alert-block p + .alert-heading {
	margin-top: 1.5em;
}

/* 現在のステップ */
.order-step li.is-current {
	background-color: #005bac;
	color: #fefefe;
}
.order-step li.is-current::before {
	display: none;
}