@charset "utf-8";
/*
Theme Name: UNIQUE child (LiberT)
Theme URI: https://libert.co.jp/
Description: 株式会社Liber T コーポレートサイト用の子テーマ。トップページと5つの固定ページに新デザインを適用します。制作実績(work)・お知らせ(news)は親テーマ UNIQUE の機能をそのまま利用します。
Author: LiberT
Template: unique_tcd044
Version: 1.3.0
*/

/*  ★重要★
	上の「Template:」は、親テーマ UNIQUE のフォルダ名と1文字も違わずに
	一致している必要があります。
	確認方法：管理画面 > 外観 > テーマファイルエディター で UNIQUE を選ぶと、
	右上に親テーマのフォルダ名が表示されます。
	（FTPなら wp-content/themes/ の中のフォルダ名）
	もし unique_tcd044 以外だった場合は、上の行をその名前に書き換えてください。
	一致していないと「親テーマが見つかりません」と出て有効化できません。
*/

/* =========================================================
 * このファイルは「調整用」です。
 * デザイン本体のCSSは assets/css/site.css にあります。
 * 上書きしたいときは、このファイルの一番下に追記してください。
 * （このファイルは site.css より後で読み込まれます）
 * ======================================================= */


/* ---------------------------------------------------------
 * 1. 管理バー（ログイン中だけ出る黒い帯）との位置調整
 * ------------------------------------------------------- */
body.admin-bar header#hd { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar header#hd { top: 46px; }
}

/* デザイン側の * { margin:0 } が管理バーに効かないように戻す */
#wpadminbar,
#wpadminbar * {
	box-sizing: content-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.4;
}


/* ---------------------------------------------------------
 * 2. Contact Form 7 を既存デザインに馴染ませる
 * ------------------------------------------------------- */

/* CF7が入力欄を包む <span> をブロック化して幅100%を効かせる */
.form .wpcf7-form-control-wrap { display: block; }

/* CF7のフォーム本体に .form の余白が二重にかからないように */
.form .wpcf7-form { margin: 0; }

/* 必須マークの色（CF7側のクラスを使う場合） */
.form .wpcf7-form-control.wpcf7-not-valid { border-color: #C2643F; }

/* CF7のエラーテキストを .err と同じ見た目に */
.form .wpcf7-not-valid-tip {
	color: #B3543A;
	font-size: 12.5px;
	margin-top: 8px;
	display: block;
}

/* CF7の送信結果メッセージ */
.form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 4px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--ink-60);
	text-align: center;
}
.form .wpcf7 form.invalid .wpcf7-response-output,
.form .wpcf7 form.unaccepted .wpcf7-response-output,
.form .wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #C2643F;
	color: #B3543A;
}
.form .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--sky-deep);
	color: var(--sky-deep);
}

/* チェックボックス群を .checks のピル型デザインに合わせる */
.checks .wpcf7-checkbox,
.checks .wpcf7-acceptance {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.checks .wpcf7-list-item { margin: 0; }
.checks .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 10px 17px;
	font-size: 13.5px;
	cursor: pointer;
	background: var(--paper);
	transition: border-color .2s, background .2s;
}
.checks .wpcf7-list-item label:hover { border-color: var(--sky); }
.checks .wpcf7-list-item input[type="checkbox"] {
	accent-color: var(--sky-deep);
	width: 15px;
	height: 15px;
	margin: 0;
}
.checks .wpcf7-list-item-label { line-height: 1; }

/* 「個人情報の取り扱いに同意する」＝ acceptance */
.form__foot .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.form__foot .wpcf7-acceptance label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--ink-60);
	cursor: pointer;
	border: 0;
	padding: 0;
	background: none;
}
.form__foot .wpcf7-acceptance input[type="checkbox"] {
	accent-color: var(--sky-deep);
	width: 16px;
	height: 16px;
	margin: 0;
}

/* 送信ボタン */
.form input[type="submit"].submit,
.form .wpcf7-submit {
	border: 0;
	cursor: pointer;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .14em;
	padding: 17px 48px;
	border-radius: 999px;
	background: var(--sky-deep);
	color: #fff;
	transition: background .25s, transform .25s;
}
.form input[type="submit"].submit:hover,
.form .wpcf7-submit:hover {
	background: var(--ink);
	transform: translateY(-1px);
}

/* 送信中のスピナー位置 */
.form .wpcf7-spinner { margin: 0 0 0 12px; }


/* ---------------------------------------------------------
 * 3. WordPressが出す要素の微調整
 * ------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}


/* ---------------------------------------------------------
 * 4. ここから下に、あなたの追記を書いてください
 * ------------------------------------------------------- */


/* ---------------------------------------------------------
 * 5. ランディングページ（AIO×SEO）用の調整
 * ------------------------------------------------------- */

/* LPのヘッダーは position:sticky。管理バーの下に潜らないようにする */
body.admin-bar.libert-lp-aioseo header { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar.libert-lp-aioseo header { top: 46px; }
}