@charset "UTF-8";

/* =========================================================
   rev2 用 追加スタイル
   style.css の後、かつ各プラグインのCSSより後に読み込む
   （header-rev2.php では wp_head() の後に <link> を配置している）
========================================================= */


/* ▼breadcrumb：Breadcrumb NavXT 出力への対応
   ---------------------------------------------------------
   静的HTMLは自作 breadcrumb() 関数を想定した
     <li class="breadcrumb-home"> / <li class="current-crumb"><a><strong>
   というマークアップだったが、本サイトは Breadcrumb NavXT を継続利用するため
   bcn_display_list() の出力に合わせて調整する。
   ・NavXT はカレント項目に class を付けず <a> も出力しないため、
     区切り文字の抑制は .current-crumb ではなく :last-child で行う
   ・RDFa 用の <meta> がインライン要素として残らないよう明示的に消す
----------------------------------------------------------- */
div#breadcrumb ul li:last-child:after {
	display: none;
}

div#breadcrumb ul li meta {
	display: none;
}

div#breadcrumb ul li span[property="itemListElement"] {
	display: inline;
}

div#breadcrumb ul li:last-child,
div#breadcrumb ul li:last-child span[property="name"] {
	color: #333333;
	font-weight: normal;
}

div#breadcrumb ul li:last-child a {
	pointer-events: none;
	color: #333333;
	text-decoration: none;
}

div#breadcrumb ul li:last-child a strong {
	font-weight: normal;
}




/* ▼form：Contact Form 7 を div#form のあしらいに合わせる
   =========================================================
   CF7側のフォーム内容は変更しない前提で、_ref/CF7.html の実出力に対して
   style.css の div#form ブロック（wlp_concierge 準拠）と同じ見た目になるよう
   CSSのみで寄せる。

   ■ 実出力の構造
     div#form
      └ div.wpcf7
         └ form.wpcf7-form.h-adr
            ├ fieldset.hidden-fields-container      … 隠しフィールド
            ├ div.form
            │   ├ div.form__listWrap > dl.form__list
            │   │    └ div.form__item.hissu|nini
            │   │         ├ dt > p > ラベル + span.must
            │   │         └ dd > p > span.wpcf7-form-control-wrap > コントロール
            │   ├ p                                 … スパム対策の隠しフィールド
            │   ├ div.form__acceptance              … 個人情報同意チェック
            │   ├ div.form__acceptance.text-danger  … 注意書き
            │   └ div.form__submit > p > input.wpcf7-submit
            ├ p                                     … utm_source の隠しフィールド
            ├ div > div.wpcf7-turnstile             … Cloudflare Turnstile
            └ div.wpcf7-response-output

   ■ 対応表（wlp_concierge → CF7実出力）
     div.form_column         → div.form__item
     div.form_header         → div.form__item > dt
     span.required           → dt span.must
     div.form_content        → div.form__item > dd
     p.note                  → span.form_desc
     button#form_submit      → div.form__submit input.wpcf7-submit
     p input#check_privacy   → div.form__acceptance .wpcf7-list-item

   ■ 入力欄そのもの（枠線・角丸・フォーカス色・width:100%）は
     style.css の form ブロックが input[type=...] / select / textarea を
     直接指定しているため、CF7の出力にもそのまま適用される。ここでは触らない。
========================================================= */


/* --- 資料請求ページのリード部（rev1 からの移植） ---
   page-shintaku__pamphlet.php が旧 module/sectionShintakuPamphlet.php から
   移植したマークアップ（.contactTelBox 系 / .t-nowC / .must）は
   rev2 の style.css に定義が無いため、rev1（shukatsu-kyogikai_2022）の
   assets/css/customize.css・style.css から移植する。

   ・rev2 以外に影響させないよう、すべて div#form 配下にスコープした
   ・rev1 のブレークポイントは max-width:767px だが、rev2（wlp準拠）の
     max-width:766px / min-width:767px と 767px でぶつかるため 766px に揃えた
   ・.must は rev2 の必須バッジ（div#form form div.form__item > dt span.must）と
     セレクタが衝突するため、リード文の中だけに効くよう .t-nowC 配下に限定した */

div#form .contactTelBox {
	max-width: 640px; /* フォーム幅に合わせる */
	margin: 0 auto 28px;
	padding: 22px 20px;
	text-align: center;
	background: #f7f2e9;
	border-radius: 14px;
}

div#form .contactTelBox__lead {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #4E3516;
}

div#form .contactTelBox__tel {
	display: inline-block;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: 1px;
	text-decoration: none;
	color: #222222;
}

div#form .contactTelBox__time {
	margin: 10px 0 0;
	font-size: 13px;
	opacity: 0.8;
}

/* PCではスマホ用テキストを非表示 */
div#form .sp-btn-text,
div#form .contactTelBox__click {
	display: none;
}

div#form .pc-num {
	display: inline-block;
}

/* リード文（rev1 style.css の .t-nowC）
   span 単位で折り返すための flex コンテナ */
div#form .t-nowC {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* リード文中の必須マーク「*」 */
div#form .t-nowC .must {
	margin: 0 10px;
	padding: 0;
	border: none;
	color: #F22847;
}

@media screen and (max-width: 766px) {
	/* PC用の番号を隠す */
	div#form .pc-num {
		display: none !important;
	}
	/* 外枠をオレンジのボタンにする */
	div#form .contactTelBox__tel {
		display: block !important;
		width: 100% !important;
		max-width: 340px;
		margin: 10px auto !important;
		padding: 16px 0 !important;
		line-height: 1 !important;
		color: #ffffff !important;
		background: #d96c00 !important;
		border-radius: 999px !important;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	}
	/* ボタン内の文字（二重装飾を完全に防ぐ） */
	div#form .sp-btn-text {
		display: inline-block !important;
		padding: 0 !important;
		font-size: 24px !important;
		font-weight: 800 !important;
		color: #ffffff !important;
		background: transparent !important;
		border: none !important;
	}
	/* 誘導テキストを表示 */
	div#form .contactTelBox__click {
		display: block !important;
		margin: 10px 0 0 !important;
		font-size: 15px !important;
		font-weight: 700;
		text-align: center;
		color: #4E3516;
	}
}


/* --- CF7 のラッパーを透過させる --- */
div#form .wpcf7 {
	margin: 0;
	padding: 0;
	background: none;
	border: 0 none;
}

div#form .wpcf7 > form {
	margin: 0 auto;
}

div#form .wpcf7 fieldset.hidden-fields-container {
	margin: 0;
	padding: 0;
	border: 0 none;
}

div#form .wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* 隠しフィールド（スパム対策・utm_source）を包む空の <p> による余白を消す。
   div.form / form の直下にある <p> は、いずれも隠しフィールド専用。 */
div#form .wpcf7 > form > p,
div#form .wpcf7 > form > div.form > p {
	display: none;
}


/* --- 項目の並び（div.form_column 相当） --- */
div#form form div.form {
	margin: 0 auto;
}

div#form form div.form__listWrap,
div#form form dl.form__list {
	margin: 0;
	padding: 0;
}

div#form form div.form__item {
	margin: 0 0 1.5rem 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

/* ラベル側（div.form_header 相当） */
div#form form div.form__item > dt {
	margin: 0;
	padding: 0.2em 0 0 0;
}

div#form form div.form__item > dt p {
	margin: 0;
	text-align: left;
}

/* 入力側（div.form_content 相当） */
div#form form div.form__item > dd {
	margin: 0;
}

div#form form div.form__item > dd p {
	margin: 0;
	text-align: left;
}

div#form form div.form__item > dd p + p {
	margin-top: 0.5em;
}

div#form form div.form__item > dd div.selectWrap p,
div#form form div.form__item > dd > div p {
	margin: 0;
}


/* --- 必須バッジ（span.required 相当） ---
   CF7側の出力は <span class="must">*</span> のため、
   「*」を font-size:0 で隠し、::before で「必須」を描画して
   wlp_concierge の赤バッジと同じ見た目にする。

   ※ span 自身は font-size:0 になるため、em 指定の padding / margin / line-height が
      すべて 0 に潰れる。バッジの箱まわりは ::before 側に持たせ、
      span に残す指定は rem で書くこと。
   ※ ::before の font-size は wlp の「0.8em（親 form_header p 基準）」と同じ実寸になるよう
      PC:0.8rem / SP:1.2rem を直接指定している。padding は ::before 自身の
      font-size 基準の em なので、そのまま追従する。 */
div#form form div.form__item > dt span.must {
	font-size: 0;
	margin: 0 0 0 0.5rem;
	vertical-align: middle;
}

div#form form div.form__item > dt span.must::before {
	content: "必須";
	display: inline-block;
	padding: 0 0.3em;
	font-size: 0.8rem;
	line-height: 1.7;
	color: #ffffff;
	background: #df5b41;
	border-radius: 0.3rem;
}


/* --- 補足テキスト（p.note 相当） --- */
div#form form div.form__item > dd span.form_desc {
	display: block;
	margin-top: 0.3em;
	text-align: left;
}

div#form form .text-danger,
div#form form div.form__item > dd span.text-danger {
	color: #df5b41;
}


/* --- 郵便番号・都道府県の幅（#form_postalcode / #form_prefecture 相当） ---
   ※ 都道府県は wlp では 10em 固定だが、本フォームは
      「—以下から選択してください—」という長いプレースホルダを持つため
      内容に合わせる auto + min-width とした */
div#form form input#postal {
	width: 10em;
}

div#form form select.p-region {
	width: auto;
	min-width: 14em;
	max-width: 100%;
}


/* --- お電話での資料請求（req-tel） --- */
div#form form .req-tel {
	display: block;
	margin-top: 0.5em;
}

div#form form a.req-tel--sp {
	color: inherit;
	text-decoration: none;
}

div#form form .req-tel-text {
	display: block;
}

div#form form .req-tel-btn {
	display: block;
	margin-top: 0.5em;
	padding: 0.5em;
	font-weight: 900;
	color: #000000;
	text-align: center;
	background: #ffff00;
	border-radius: 4rem;
}


/* --- ラジオ／チェックボックス ---
   CF7 の出力は <label><input><span class="wpcf7-list-item-label">…</span></label>
   という入れ子で、テーマ側の「input + label」隣接構造とは異なるため、
   隣接する span.wpcf7-list-item-label を label 相当として同じ装飾を当てる。 */
div#form form .wpcf7-list-item {
	position: relative;
	display: inline-block;
	margin: 0 1em 0 0;
}

div#form form .wpcf7-list-item label {
	display: inline-block;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

div#form form .wpcf7-list-item input[type="radio"],
div#form form .wpcf7-list-item input[type="checkbox"] {
	position: absolute;
	top: 0.5rem;
	left: 1rem;
	visibility: hidden;
	opacity: 0;
	margin: 0;
	width: 0;
	height: 0;
}

/* チェックボックス */
div#form form .wpcf7-list-item input[type="checkbox"] + .wpcf7-list-item-label {
	position: relative;
	display: inline-block;
	padding: 0 0 0 1.5em;
	cursor: pointer;
}

div#form form .wpcf7-list-item input[type="checkbox"] + .wpcf7-list-item-label::before {
	content: "";
	display: block;
	position: absolute;
	margin: 0;
	border: 1px solid #cccccc;
	background: #ffffff;
	border-radius: 0.3rem;
	cursor: pointer;
}

div#form form .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
	content: "";
	display: block;
	position: absolute;
	margin: 0;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23df5b41%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M19.4%2C1c.6.5.8%2C1.4.3%2C2l-11.4%2C15.7c-.2.3-.6.5-1%2C.6-.4%2C0-.8-.1-1.1-.4L.4%2C13.2c-.6-.6-.6-1.5%2C0-2s1.5-.6%2C2%2C0l4.5%2C4.5L17.4%2C1.3c.5-.6%2C1.4-.8%2C2-.3h0Z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}

/* ラジオ */
div#form form .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label {
	position: relative;
	display: inline-block;
	padding: 0 0 0 1.3em;
	cursor: pointer;
}

div#form form .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0.3rem;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0.1em 0 0 0;
	border: 1px solid #cccccc;
	background: #ffffff;
	border-radius: 50%;
	transform: translate(0, -50%);
	cursor: pointer;
}

div#form form .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0.65rem;
	width: 0.6rem;
	height: 0.6rem;
	margin: 0.1em 0 0 0;
	background: #333333;
	border-radius: 50%;
	transform: translate(0, -50%);
}

/* 「知りたい内容」のチェックボックス群は折り返して並べる */
div#form form div.form__item > dd.soudan .wpcf7-checkbox {
	display: block;
}

div#form form div.form__item > dd.soudan .wpcf7-list-item {
	margin: 0 1.5em 0.3em 0;
}


/* --- 個人情報の同意（#check_privacy 相当） --- */
div#form form div.form__acceptance {
	margin: 2em 0 0 0;
	text-align: center;
}

div#form form div.form__acceptance p {
	margin: 0;
	text-align: center;
}

div#form form div.form__acceptance.text-danger {
	margin-top: 1em;
}

div#form form div.form__acceptance .wpcf7-list-item {
	display: inline-block;
	margin: 0;
}

div#form form div.form__acceptance .wpcf7-list-item-label a {
	text-decoration: underline;
}


/* --- 送信ボタン（button#form_submit 相当） --- */
div#form form div.form__submit {
	margin: 2em 0 0 0;
	text-align: center;
}

div#form form div.form__submit p {
	margin: 0;
	text-align: center;
}

div#form form input.wpcf7-submit {
	width: auto;
	font-weight: 900;
	color: #000000;
	background: #ffff00;
	border: 0 none;
	border-radius: 4rem;
	cursor: pointer;
}

/* 送信処理中は button#form_submit.grayscale と同じ挙動にする */
div#form form.submitting input.wpcf7-submit,
div#form form input.wpcf7-submit:disabled {
	opacity: 0.7;
	pointer-events: none;
}

div#form form .wpcf7-spinner {
	margin: 0 0 0 0.5em;
	vertical-align: middle;
}

div#form form .wpcf7-turnstile {
	display: inline-block;
}


/* --- エラー表示・送信結果 --- */
div#form form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.3em;
	color: #df5b41;
	text-align: left;
}

div#form form input.wpcf7-not-valid,
div#form form select.wpcf7-not-valid,
div#form form textarea.wpcf7-not-valid {
	border-color: #df5b41;
	background: #fff5f3;
}

div#form .wpcf7-response-output {
	margin: 2em 0 0 0;
	padding: 0.8em 1em;
	border: 2px solid #df5b41;
	border-radius: 0.3rem;
	text-align: center;
}

div#form form.sent .wpcf7-response-output {
	border-color: #526388;
}




@media screen and (min-width: 767px) {

	div#form form div.form__item > dt {
		width: 16rem;
		font-size: 1rem;
	}
	div#form form div.form__item > dd {
		width: calc( 100% - 16rem );
	}
	div#form form div.form__item > dd span.form_desc {
		font-size: 0.8em;
	}

	div#form form .req-tel--sp {
		display: none;
	}

	div#form form input.wpcf7-submit {
		margin: 0 1em;
		padding: 0.5em 1em;
		font-size: 1.5rem;
	}

	div#form form .wpcf7-list-item input[type="checkbox"] + .wpcf7-list-item-label {
		font-size: 1.2rem;
	}
	div#form form .wpcf7-list-item input[type="checkbox"] + .wpcf7-list-item-label::before {
		top: 0.65rem;
		left: 0;
		width: 1.2rem;
		height: 1.2rem;
	}
	div#form form .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
		top: 0.5rem;
		left: 0.2rem;
		width: 1.2rem;
		height: 1.2rem;
	}
	div#form form .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label {
		font-size: 1.2rem;
	}
	div#form form .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label::before {
		top: 50%;
		left: 0;
		width: 1.2rem;
		height: 1.2rem;
	}
	div#form form .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label::after {
		top: 50%;
		left: 0.25rem;
		width: 0.8rem;
		height: 0.8rem;
	}

}


@media screen and (max-width: 766px) {

	div#form form div.form__item {
		margin: 0 0 1.5rem 0;
	}
	div#form form div.form__item > dt,
	div#form form div.form__item > dd {
		width: 100%;
	}
	div#form form div.form__item > dt p {
		font-size: 1.5rem;
	}
	div#form form div.form__item > dt span.must {
		margin: 0 0 0 0.75rem;
	}
	div#form form div.form__item > dt span.must::before {
		font-size: 1.2rem;
	}
	div#form form div.form__item > dd {
		margin-top: 0.5rem;
	}
	div#form form div.form__item > dd span.form_desc {
		font-size: 1.3rem;
	}

	div#form form .req-tel--pc {
		display: none;
	}

	div#form form input.wpcf7-submit {
		display: block;
		width: 85%;
		margin: 1em auto;
		padding: 0.8em 0;
		font-size: 1.8rem;
	}

	div#form form .wpcf7-list-item input[type="checkbox"] + .wpcf7-list-item-label {
		font-size: 1.5rem;
	}
	div#form form .wpcf7-list-item input[type="checkbox"] + .wpcf7-list-item-label::before {
		top: 0.65rem;
		left: 0;
		width: 1.5rem;
		height: 1.5rem;
	}
	div#form form .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
		top: 0.5rem;
		left: 0.25rem;
		width: 1.5rem;
		height: 1.5rem;
	}
	div#form form .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label {
		font-size: 1.5rem;
	}
	div#form form .wpcf7-list-item input[type="radio"] + .wpcf7-list-item-label::before {
		top: 50%;
		left: 0;
		width: 1.6rem;
		height: 1.6rem;
	}
	div#form form .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label::after {
		top: 50%;
		left: 0.3rem;
		width: 1.2rem;
		height: 1.2rem;
	}

}