/**
 * テーマの CSS（フロントとブロックエディタで共通）。
 */

/* ヘッダー・メイン・フッターの間に余白を入れない */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ロゴは画面幅に合わせて縮める */
.wp-site-blocks > header img {
	max-width: 100%;
	height: auto !important;
}

/* ========== パンくず ========== */

.hananoki-breadcrumb > * {
	position: relative;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.4;
}

/* 項目の間の右向き三角 */
.hananoki-breadcrumb > :not(:last-child)::after {
	position: absolute;
	top: 7px;
	right: -20px;
	border-width: 7px 12px;
	border-style: solid;
	border-color: transparent transparent transparent #e2e2e2;
	content: "";
}

.hananoki-breadcrumb a {
	display: inline-block;
	height: 28px;
	box-sizing: border-box;
	padding: 4px 7px 0;
	border-radius: 3px;
	background: #e2e2e2;
	color: #9b9b9b;
	text-decoration: none;
	transition: transform 0.3s;
}

.hananoki-breadcrumb a:hover,
.hananoki-breadcrumb a:focus {
	color: #9b9b9b;
	transform: translateY(-3px);
}

/* ========== フォーム（Snow Monkey Forms） ========== */

/*
 * 元フォーム htl-form.jp/hananoki-* の再現。
 *
 * functions.php でプラグインより後の優先度（11）で読み込むため、
 * プラグインの CSS より後に読まれる。同じ詳細度で上書きできるので !important は使わない。
 *
 * フォーム編集画面（post_type: snow-monkey-forms）でも同じ見た目にするため、
 * 項目・入力欄は .smf-form 起点で書く（編集画面には <form class="snow-monkey-form"> が無い）。
 * ステップ表示・ボタン・画面ごとの出し分けは埋め込み側にしか無いので .snow-monkey-form 起点。
 */

/* ========== ステップ表示（ご入力／ご確認／送信完了） ========== */

.snow-monkey-form .smf-progress-tracker {
	display: flex;
	margin: 0 0 3.2rem;
	padding: 0;
	overflow: hidden;
	list-style: none;
}

.snow-monkey-form .smf-progress-tracker__item {
	position: relative;
	flex: 1 1 0;
	flex-direction: row;
	justify-content: center;
	width: auto;
	height: 45px;
	margin: 0;
	background-color: #e2e2e2;
	line-height: 1;
}

/* 右向きの矢印（白い縁＋本体）。プラグインの線の擬似要素を作り替える */
.snow-monkey-form .smf-progress-tracker__item::before,
.snow-monkey-form .smf-progress-tracker__item::after {
	top: -22px;
	left: auto;
	width: 0;
	height: 0;
	border-width: 45px 0 45px 2em;
	border-style: solid;
	background: none;
}

.snow-monkey-form .smf-progress-tracker__item::before {
	z-index: 10;
	right: -1em;
	border-color: transparent transparent transparent var(--wp--preset--color--base);
}

.snow-monkey-form .smf-progress-tracker__item::after {
	z-index: 11;
	right: -0.8em;
	border-color: transparent transparent transparent #e2e2e2;
}

.snow-monkey-form .smf-progress-tracker__item--input::before {
	display: block;
}

.snow-monkey-form .smf-progress-tracker__item--complete::before,
.snow-monkey-form .smf-progress-tracker__item--complete::after {
	display: none;
}

.snow-monkey-form .smf-progress-tracker__item__number {
	display: none;
}

.snow-monkey-form .smf-progress-tracker__item__text {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}

.snow-monkey-form .smf-progress-tracker__item[aria-current="true"] {
	background-color: #ffe736;
}

.snow-monkey-form .smf-progress-tracker__item[aria-current="true"]::after {
	border-left-color: #ffe736;
}

.snow-monkey-form .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text {
	color: #3e3a39;
	font-weight: 700;
}

/* ========== 導入文・補足文 ========== */

.smf-form .hananoki-form-lead {
	margin: 0 0 1.6rem;
	line-height: 1.6;
}

.smf-form .hananoki-form-note {
	margin: 0 0 0.5em;
}

/* 確認画面・完了画面では導入文・補足文を出さない */
.snow-monkey-form:is([data-screen="confirm"], [data-screen="complete"]) :is(.hananoki-form-lead, .hananoki-form-note) {
	display: none;
}

.smf-form .smf-control-description {
	margin-top: 0.3em;
	color: #757575;
	font-size: var(--wp--preset--font-size--small);
}

/* ========== 表（項目名＋入力欄） ========== */

.smf-form > .smf-item {
	display: flex;
	margin: 0;
	border: 1px solid #dddddd;
}

.smf-form > .smf-item + .smf-item {
	border-top: 0;
}

.smf-form .smf-item__col--label {
	position: relative;
	flex: 0 0 260px;
	box-sizing: border-box;
	padding: 1.5em 85px 1.5em 2em;
	background-color: #f8f6e2;
	color: var(--wp--preset--color--brown);
	font-weight: 700;
}

.smf-form .smf-item__label {
	margin: 0;
}

.smf-form .smf-item__col--controls {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 1.5em 2em;
}

/* 必須マーク：入力欄に required の検証が付いている項目へ自動で付ける */
.smf-form .smf-item:has([data-validations~="required"]) .smf-item__col--label::after {
	position: absolute;
	top: 1.4em;
	right: 1.5em;
	padding: 0.2em 0.7em;
	border-radius: 5px;
	background-color: #ffe736;
	color: var(--wp--preset--color--brown);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.4;
	content: "必須";
}

/* ========== 入力欄 ========== */

.smf-form :is(.smf-text-control__control, .smf-textarea-control__control, .smf-select-control__control) {
	box-sizing: border-box;
	margin: 0;
	padding: 8px 15px;
	border: 2px solid #dddddd;
	border-radius: 5px;
	background-color: var(--wp--preset--color--base);
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	appearance: none;
}

.smf-form :is(.smf-text-control__control, .smf-textarea-control__control, .smf-select-control__control):focus {
	border-color: #9ad04f;
	outline: 0;
	box-shadow: 0 0 5px 0 #f6fbf0;
}

/* エラー（サーバー判定 data-invalid／入力中の判定 aria-invalid） */
.smf-form :is(.smf-text-control__control, .smf-textarea-control__control, .smf-select-control__control):is([data-invalid="1"], [aria-invalid="true"]) {
	border-color: #f13935;
	background-color: #feebea;
}

.smf-form .smf-text-control__control {
	width: 100%;
	max-width: 100%;
}

.smf-form .smf-text-control__control.hananoki-inp--m {
	width: 45%;
}

.smf-form .smf-text-control__control.hananoki-inp--l {
	width: 70%;
}

/* 年・郵便番号。元フォームの幅（PCで約110px）に合わせる */
.smf-form .smf-text-control__control.hananoki-inp--s {
	width: 8.5em;
}

.smf-form .smf-textarea-control__control {
	width: 100%;
	resize: vertical;
}

/* 1行に複数の入力欄を並べる（生年月日・郵便番号）。間隔はグループの blockGap で持つ */
.smf-form .hananoki-inline > * {
	margin: 0;
}

/* 〒と「（半角・ハイフンなし）」は補足の色・大きさ */
.smf-form .hananoki-inline :is(.hananoki-form-note, .hananoki-form-muted) {
	color: #757575;
	font-size: var(--wp--preset--font-size--small);
}

/*
 * 住所の1行（都道府県・市区町村・番地）。
 * PC は小見出しを左に 140px で置き、入力欄と「例）」を右にそろえる（元フォームと同じ）。
 * スマホは小見出しを上に積む（下のメディアクエリ）。
 */
.smf-form .hananoki-addr-row {
	margin-top: 9px;
}

.smf-form .hananoki-addr-row > .hananoki-form-sublabel {
	flex: 0 0 140px;
	margin: 0;
	line-height: 38px; /* 入力欄の高さにそろえて上下中央に見せる */
}

.smf-form .hananoki-addr-row > .smf-placeholder {
	flex: 0 1 70%;
	min-width: 0;
}

.smf-form .hananoki-addr-row .smf-text-control__control.hananoki-inp--l {
	width: 100%;
}

/* 確認画面は入力欄が無いので、小見出しも普通の行の高さに戻す */
.snow-monkey-form[data-screen="confirm"] .hananoki-addr-row > .hananoki-form-sublabel {
	line-height: inherit;
}

/*
 * 確認画面で、未選択のセレクトの「選択してください」「--」を出さない。
 * Snow Monkey Forms は値が空の選択肢もラベルを表示するため（中に値が空の hidden が入る）。
 */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder > div:has(> input[type="hidden"][value=""]) {
	display: none;
}

/* 生年月日・〒が全部空なら、「年 月 日」「〒」ごと出さない */
.snow-monkey-form[data-screen="confirm"] .hananoki-inline:not(:has(input[type="hidden"]:not([value=""]))) {
	display: none;
}

.smf-form .smf-select-control {
	display: inline-block;
	width: auto;
}

.smf-form .smf-select-control__control {
	width: auto;
	padding-right: 2em;
	background: var(--wp--preset--color--base) url(../img/bg-arrow-01.png) no-repeat right 0.5em center;
	cursor: pointer;
}

.smf-form .smf-select-control__toggle {
	display: none;
}

/*
 * チェックボックス・ラジオボタン。見た目は Snow Monkey Forms 標準のまま、大きさ・上下中央・チェック時の色だけ変える。
 * プラグインのブロック CSS と読み込み順が前後しても勝つよう、.smf-item を足して詳細度を上げる。
 */
.smf-form .smf-item :is(.smf-checkbox-control, .smf-radio-button-control) {
	align-items: center; /* 標準は上ぞろえ */
}

.smf-form .smf-item :is(.smf-checkbox-control__control, .smf-radio-button-control__control) {
	width: 20px; /* 標準は 16px */
	height: 20px;
	margin-top: 0; /* 標準は上ぞろえ用の余白がある */
}

/* チェック時の色を緑にする（標準は青 #3a87fd） */
.smf-form .smf-item :is(.smf-checkbox-control__control, .smf-radio-button-control__control):checked {
	border-color: var(--wp--preset--color--green);
	background-color: var(--wp--preset--color--green);
}

/* 中のマークは標準だと px 固定なので、枠に対する % にして枠の大きさについてこさせる */
.smf-form .smf-item :is(.smf-checkbox-control__control, .smf-radio-button-control__control)::before {
	top: 50%;
	left: 50%;
}

.smf-form .smf-item .smf-checkbox-control__control::before {
	width: 35%;
	height: 50%;
	transform: translate(-50%, -60%) rotate(45deg); /* チェックの形に見せるため少し上に寄せる */
}

.smf-form .smf-item .smf-radio-button-control__control::before {
	width: 50%;
	height: 50%;
	transform: translate(-50%, -50%);
}

.smf-form .smf-error-messages {
	margin-top: 0.3em;
	color: #f13935;
	font-weight: 700;
}

/* ========== ボタン ========== */

.snow-monkey-form .smf-action {
	margin: 3.2rem 0;
	text-align: center;
}

.snow-monkey-form .smf-action .smf-button-control__control {
	padding: 0.8em 3em;
	border: 0;
	border-radius: 0;
	background: #e9491d;
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.1em;
	transition: opacity 0.3s;
}

.snow-monkey-form .smf-action .smf-button-control__control:hover {
	opacity: 0.7;
}

/* 確認画面の「修正する」はグレー */
.snow-monkey-form .smf-action .smf-button-control__control[data-action="back"] {
	background: #e2e2e2;
	color: var(--wp--preset--color--contrast);
}

/* ========== スマホ（767px以下） ========== */

@media (max-width: 767px) {
	.snow-monkey-form .smf-progress-tracker {
		margin-bottom: 1.6rem;
	}

	.snow-monkey-form .smf-progress-tracker__item__text {
		font-size: var(--wp--preset--font-size--small);
	}

	.smf-form > .smf-item {
		display: block;
	}

	.smf-form .smf-item__col--label {
		padding: 1.2em 85px 1.2em 1.2em;
	}

	.smf-form .smf-item__col--controls {
		padding: 1.2em;
	}

	.smf-form .smf-text-control__control:is(.hananoki-inp--m, .hananoki-inp--l),
	.smf-form .smf-select-control,
	.smf-form .smf-select-control__control {
		width: 100%;
	}

	/* 生年月日の月・日は横並びのまま */
	.smf-form .hananoki-inline :is(.smf-select-control, .smf-select-control__control) {
		width: auto;
	}

	/* 住所は小見出しを上に積む */
	.smf-form .hananoki-addr-row {
		display: block;
		margin-top: 1em;
	}

	.smf-form .hananoki-addr-row > .hananoki-form-sublabel {
		margin: 0 0 0.3em;
		line-height: inherit;
	}

	.snow-monkey-form .smf-action .smf-button-control__control {
		padding: 0.8em 2em;
	}
}