@charset "UTF-8";
/*
Theme Name: CWC2025
Theme URL:
Author: Hiroki TANABE
Author URL:
Description:
Version: 1.1
Tag: Original
*/
/* ==========================================================================
フォーム（Contact Form 7）
書き方は website_template（_app/website_template）「8. フォーム」に揃える。
マークアップは dl.form-list > div.form_group > dt / dd（_docs/CONTACT_FORM.md）。
このサイトは html { font-size: 62.5% } なので 1rem = 10px で書く
-------------------------------------------------------------------------- */
.wpcf7-form {
--form-text: #fff;
--form-sub: #ccc;
--form-accent: #d79656; /* サイトのボタンと同じ金 */
--form-accent-dark: #af6910;
--form-required: #e37979;
/* アラートの基準色。website_template の .alert（Bootstrap 4.3 の Alerts）と同じ値。
このサイトは暗い地なので、テンプレートのダーク時の式（地と罫は黒を混ぜ、文字は白を混ぜる）で作る */
--alert-danger: #dc3545;
--alert-success: #28a745;
--alert-warning: #ffc107;
--form-line: #444;
--form-field-bg: #fff;
--form-field-text: #111;
display: grid;
max-width: 51.2rem; /* テンプレートの 32rem（16px基準）と同じ 512px */
margin-inline: auto;
gap: 3.2rem;
}
.form-list {
display: grid;
gap: 2.4rem;
margin: 0;
}
.form_group {
display: grid;
gap: 0.4rem;
margin: 0;
/* 本文の line-height 1.8 のままだと、ラベルの上下に行間が乗って下が空いて見える */
& > dt {
margin: 0;
padding: 0;
line-height: 1.4;
}
& > dd {
margin: 0;
padding-inline-start: 1.6rem;
}
}
.form_group-label {
color: var(--form-text);
font-size: 1.4rem;
font-weight: 700;
}
.form_group-required {
display: inline-block;
color: var(--form-required);
&::before {
content: "【";
}
&::after {
content: "】";
}
}
/* CF7 は入力欄を span で包む。inline のままだと幅いっぱいに広がらない */
.wpcf7-form-control-wrap {
display: block;
}
/* サイトの default.css の form input[type=text] 等（詳細度 0,1,2）に負けないよう、.wpcf7-form から書く */
.wpcf7-form .form_group-input,
.wpcf7-form .form_group-textarea {
width: 100%;
min-height: 44px;
padding: 1.1rem 1.6rem;
border: 1px solid var(--form-line);
border-radius: 0.5rem;
background: var(--form-field-bg);
color: var(--form-field-text);
font-size: 1.6rem; /* 16px 未満だと iPhone が入力時に拡大する */
font-family: inherit;
&:focus-visible {
outline: 2px solid var(--form-accent);
outline-offset: 1px;
}
}
.wpcf7-form .form_group-textarea {
min-height: calc(1.6rem * 1.8 * 5); /* 5行ぶん */
resize: vertical;
}
/* 入力に不備がある状態（CF7 が .wpcf7-not-valid を付ける） */
.wpcf7-form .form_group-input.wpcf7-not-valid,
.wpcf7-form .form_group-textarea.wpcf7-not-valid {
border-color: var(--alert-danger);
}
/* アラート。website_template の .alert をそのまま写した形。
CF7 が出す要素にクラスを足せないので、CF7 のクラスに当てる。
基準色（--alert-base）だけを差し替えれば、地・罫・文字が追随する */
.wpcf7-form .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-form .wpcf7-response-output {
--alert-base: var(--alert-danger);
display: block;
padding: 1.1rem 1.6rem;
border: 1px solid color-mix(in srgb, #000 72%, var(--alert-base));
border-radius: 0.5rem;
background: color-mix(in srgb, #000 80%, var(--alert-base));
color: color-mix(in srgb, #fff 48%, var(--alert-base));
}
/* 入力欄の下に出るエラー文。テンプレートの .alert.--sm（文字を一段下げる） */
.wpcf7-form .wpcf7-not-valid-tip {
margin-block-start: 0.6rem;
padding: 0.6rem 1.1rem;
font-size: 1.3rem;
}
.wpcf7-turnstile {
justify-self: center;
}
.form-actions {
display: flex;
justify-content: center;
gap: 1.6rem;
}
.form-submit {
display: inline-flex;
min-width: 19.2rem; /* テンプレートの 12rem（16px基準） */
min-height: 44px;
align-items: center;
justify-content: center;
padding: 1.1rem 2.4rem;
border: 0;
border-radius: 999px;
background: var(--form-accent);
color: #fff;
font-size: 1.6rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s;
&:hover {
background: var(--form-accent-dark);
}
&:active {
transform: translateY(1px);
}
}
/* 送信中のくるくる。CF7 はボタンの直後に置くので、ボタンと縦位置を揃える */
.form-actions .wpcf7-spinner {
align-self: center;
}
/* 送信結果のメッセージ。CF7 が