@charset "utf-8";

/* 一般の来店予約 /form/reservation/ の待ち受けページ（Task #7593・ユーザー決定 D475）。
 *
 * 読み込むのは `inc/reservation-redirect.php` の `pa_reservation_redirect_enqueue()` で、
 * 対象は `form/reservation` の 1 本だけである。共通の main.css へは足さない。
 *
 * 🚨 **値はすべて移行元の写しから採った。**出典は次の 2 つで、2026-09-19 に字読みした
 * （走行 0）。
 *
 *   - `legacy/www.p-a.jp/public/css/page_inquiry.css` の 886〜1000 行あまり
 *     （`#complete .redirect_box` / `.redirect_txt` / `.loading_box` / `.loading01` と
 *     キーフレーム `animation01`）
 *   - `legacy/www.p-a.jp/public/css/style.css` の 191〜218 行（`.txtBtn_red01`）と
 *     79 行（`.tac`）
 *
 * 🚨 **移行元の当たり先は `#complete` で囲まれている。**移行先にその id は無いので、
 * 器の類名（`.pa-reservation-redirect`）で囲み直した。**値は 1 つも変えていない。**
 *
 * 🚨 **`.serif` はテーマの共通 CSS（main.css 983 行）が持つ**ので、ここでは持たない。
 * 移行元も共通の `common.css` が持っている。
 */

/* 🚨 **器の幅はここで持たない。**移行元の `#contents`（`page_inquiry.css` の 8〜11 行・
 * `width: 1100px`）に当たるのは、`header-form.php` が開く
 * `.pa-form-frame__wrapper--wide`（`form-frame.css` 132 行・`max-width: 1100px`）である。
 * `raiten` はもともとこの器を使っており、ここで重ねると器が二重になる. */

/* 移行元: #complete .redirect_box（page_inquiry.css 886 行） */
.pa-reservation-redirect__box {
	border-bottom: 1px solid #a2803b;
	border-top: 1px solid #a2803b;
	font-size: 16px;
	letter-spacing: 0.05em;
	line-height: 166%;
	margin: 50px auto 60px;
	padding: 50px 0;
	text-align: center;
	width: 90%;
}

/* 移行元: #complete .redirect_box .redirect_txt（page_inquiry.css 897 行） */
.pa-reservation-redirect__lead {
	color: #a97b3c;
	font-size: 24px;
	line-height: 190%;
	margin-bottom: 35px;
}

/* 移行元: #complete .loading_box（page_inquiry.css 903 行） */
.pa-reservation-redirect__loading {
	padding: 0 0 40px;
	text-align: center;
}

/* 移行元: .loading_box span.loading01 と :after（page_inquiry.css 908・929・933 行）。
 *
 * 🚨 **移行元は同じ絵を 3 通りの書き方で 3 回重ねている**（古い `-webkit-gradient`、
 * 前置きつきの `-webkit-radial-gradient`、標準の `radial-gradient`）。**いま配信している
 * ブラウザは全部が標準の書き方を解する**ので、標準の 1 通りだけを写した。
 * 描かれる絵は同じである（4 つの点を上下左右に置く）. */
.pa-reservation-redirect__spinner,
.pa-reservation-redirect__spinner::after {
	background-image:
		radial-gradient(4px 4px at 10% 50%, rgba(153, 153, 153, 0.5), rgba(153, 153, 153, 0.5) 95%, transparent),
		radial-gradient(4px 4px at 50% 10%, rgba(153, 153, 153, 0.5), rgba(153, 153, 153, 0.5) 95%, transparent),
		radial-gradient(4px 4px at 90% 50%, rgba(153, 153, 153, 0.5), rgba(153, 153, 153, 0.5) 95%, transparent),
		radial-gradient(4px 4px at 50% 90%, rgba(153, 153, 153, 0.5), rgba(153, 153, 153, 0.5) 95%, transparent);
	background-repeat: no-repeat;
	display: inline-block;
	height: 50px;
	width: 50px;
}

.pa-reservation-redirect__spinner {
	position: relative;
	vertical-align: middle;
}

.pa-reservation-redirect__spinner::after {
	content: " ";
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
	transform: rotate(45deg);
	z-index: -1;
}

/* 移行元: .loading_box span.loading01 span（page_inquiry.css 943 行）。
 * 回る 1 つの点。 */
.pa-reservation-redirect__spinner span {
	animation: pa-reservation-redirect-spin 2s linear infinite;
	background-image: radial-gradient(4px 4px at 10% 50%, #999, #999 95%, transparent);
	height: 100%;
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* 移行元: @keyframes animation01（page_inquiry.css 955 行〜）。
 * 45 度ずつ 8 段で 1 周する。段の境目の値も移行元と同じ. */
@keyframes pa-reservation-redirect-spin {
	0%,
	12.4% {
		transform: rotate(0deg);
	}

	12.5%,
	24.9% {
		transform: rotate(45deg);
	}

	25%,
	37.4% {
		transform: rotate(90deg);
	}

	37.5%,
	49.9% {
		transform: rotate(135deg);
	}

	50%,
	62.4% {
		transform: rotate(180deg);
	}

	62.5%,
	74.9% {
		transform: rotate(225deg);
	}

	75%,
	87.4% {
		transform: rotate(270deg);
	}

	87.5%,
	100% {
		transform: rotate(315deg);
	}
}

/* 移行元: .tac（style.css 79 行） */
.pa-reservation-redirect__fallback-note {
	text-align: center;
}

/* 移行元: .txtBtn_red01 と .txtBtn_red01 a（style.css 191・201 行）。
 * 🚨 矢印の絵は移行元と同じファイルである（`images/btn_arrow_m.png`。
 * テーマの `assets/images/btn_arrow_m.png` と md5 が一致する）. */
.pa-reservation-redirect__button {
	display: flex;
	justify-content: center;
	margin: 30px auto;
	text-align: center;
}

.pa-reservation-redirect__button a {
	background-color: #e1200f;
	background-image: url("../images/btn_arrow_m.png?ver=bfb3b03390c9");
	background-position: right 10px center;
	background-repeat: no-repeat;
	color: #fff;
	display: block;
	font-size: 20px;
	letter-spacing: 0.04em;
	margin-left: 15px;
	padding: 15px 50px;
	text-decoration: none;
}

.pa-reservation-redirect__button a:hover {
	opacity: 0.6;
}

/* 🚨 **携帯幅の指定は足さない。**移行元は `page_inquiry.css` の
 * `#complete .redirect_box` 一式に `@media` を 1 つも掛けていない（字読みで数えた）。
 * 左右の余白は外側の `.pa-form-frame__wrapper`（`padding: 48px 16px`）が持つ. */