@charset "utf-8";
/* =========================================================
   お問合わせフォーム（Snow Monkey Forms）の見た目  2026-09-30 新規
   --------------------------------------------------------
   参考：https://hanger-net.co.jp/contact/（シンコハンガー様）
   方針：
     - プラグインは Snow Monkey Forms のまま。HTML・フォーム設定は変更しない
     - すべて .atl_formArea 配下。他ページ・他フォームには影響させない
     - 「必須」バッジは data-validations="required" から CSS(:has) で描画する
   読み込み：page-contact.php が wp_head priority 100 で <link> 出力
   ========================================================= */

.atl_formArea{
	--fm-accent:#005b9f;
	--fm-accent-lt:#0a7bd0;
	--fm-ink:#0B0B0B;
	--fm-ink-2:#3d444b;
	--fm-ink-3:#6d757d;
	--fm-line:#e1e6eb;
	--fm-track-line:#a3d0f5;
	--fm-field-bg:#f5f7f9;
	--fm-badge:#12324c;
	--fm-error:#c0392b;
	--fm-r:1.2rem;
	--fm-ease:cubic-bezier(.22,.61,.36,1);
	font-family:"Zen Kaku Gothic New","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

/* ---------- 外枠（2026-09-30：白背景・グレー枠を追加） ---------- */
.atl_formArea .snow-monkey-form{
	max-width:none; margin:0;
	padding:4rem 4rem 4.8rem;
	background:#fff; border:1px solid var(--fm-line); border-radius:var(--fm-r);
	box-shadow:none;
}
.atl_formArea .smf-form{ max-width:none; }

/* ---------- 進行表示（入力→確認→完了） ---------- */
.atl_formArea .smf-progress-tracker{
	display:flex; justify-content:center; gap:0; margin:0 0 4.8rem; padding:0; list-style:none;
}
.atl_formArea .smf-progress-tracker__item{
	position:relative; flex:1 1 0; text-align:center; max-width:20rem;
}
.atl_formArea .smf-progress-tracker__item:before{
	content:""; position:absolute; top:1.7rem; left:-50%; width:100%; height:2px;
	background:var(--fm-track-line);
}
.atl_formArea .smf-progress-tracker__item:first-child:before{ display:none; }
.atl_formArea .smf-progress-tracker__item__number{
	position:relative; z-index:1;
	display:flex; align-items:center; justify-content:center;
	width:3.4rem; height:3.4rem; margin:0 auto .8rem;
	border-radius:50%; background:#dde3e9; color:#fff;
	font-size:1.3125rem; font-weight:700; line-height:1;
}
.atl_formArea .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number{
	background:var(--fm-accent);
}
.atl_formArea .smf-progress-tracker__item__text{
	font-size:1.225rem; font-weight:700; letter-spacing:.02em; color:var(--fm-ink-3);
}
.atl_formArea .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text{
	color:var(--fm-ink);
}

/* ---------- 各項目（ラベルを上・入力欄を下の縦積みに） ---------- */
.atl_formArea .smf-item{
	display:block; padding:0; margin:0 0 2.8rem; border:none; background:none;
}
.atl_formArea .smf-item:last-of-type{ margin-bottom:0; }
/* SMF 既定の「ラベル左・入力右」用の幅制限（max-width:calc(100% - ラベル幅)）を解除する */
.atl_formArea .smf-item__col{ display:block; width:100%; max-width:none; flex:0 0 auto; padding:0; border:none; background:none; }
.atl_formArea .smf-item__col--label{ margin:0 0 1rem; }
.atl_formArea .smf-item__label{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; }
.atl_formArea .smf-item__label__text{
	font-size:1.4rem; font-weight:700; letter-spacing:.04em; line-height:1.6; color:var(--fm-ink);
}

/* 必須バッジ（data-validations に required を含む項目だけ） */
.atl_formArea .smf-item:has([data-validations~="required"]) .smf-item__label__text:after{
	content:"必須"; display:inline-block; margin-left:.8rem; vertical-align:.1em;
	padding:.25em 1em; border-radius:999px;
	background:var(--fm-badge); color:#fff;
	font-size:1.05rem; font-weight:700; letter-spacing:.08em; line-height:1.6;
}
/* SMF 標準の必須表示が有効な場合に二重にならないよう、そちらを優先 */
.atl_formArea .smf-item__label__require ~ *:after,
.atl_formArea .smf-item:has(.smf-item__label__require) .smf-item__label__text:after{ content:none; }
.atl_formArea .smf-item__label__require{
	display:inline-block; padding:.25em 1em; border-radius:999px;
	background:var(--fm-badge); color:#fff;
	font-size:1.05rem; font-weight:700; letter-spacing:.08em; line-height:1.6;
}

/* ---------- 入力欄 ---------- */
.atl_formArea .smf-text-control,
.atl_formArea .smf-textarea-control,
.atl_formArea .smf-select-control,
.atl_formArea .smf-placeholder{ display:block; width:100%; max-width:none; }

.atl_formArea .smf-text-control__control,
.atl_formArea .smf-textarea-control__control,
.atl_formArea .smf-select-control__control{
	display:block; width:100%; max-width:none; box-sizing:border-box;
	padding:1.5rem 1.8rem;
	background:var(--fm-field-bg); border:1px solid var(--fm-line); border-radius:var(--fm-r);
	font-family:inherit; font-size:1.5rem; line-height:1.7; color:var(--fm-ink);
	box-shadow:none; transition:background .2s var(--fm-ease),border-color .2s var(--fm-ease),box-shadow .2s var(--fm-ease);
}
.atl_formArea .smf-textarea-control__control{ min-height:22rem; resize:vertical; }
.atl_formArea .smf-text-control__control::placeholder,
.atl_formArea .smf-textarea-control__control::placeholder{ color:#9aa3ab; }
.atl_formArea .smf-text-control__control:hover,
.atl_formArea .smf-textarea-control__control:hover{ border-color:#cdd5dc; }
.atl_formArea .smf-text-control__control:focus,
.atl_formArea .smf-textarea-control__control:focus,
.atl_formArea .smf-select-control__control:focus{
	outline:none; background:#fff; border-color:var(--fm-accent);
	box-shadow:0 0 0 3px rgba(0,91,159,.12);
}

/* ラジオ・チェックボックス */
.atl_formArea .smf-radio-buttons-control__control,
.atl_formArea .smf-checkboxes-control__control{
	display:flex; flex-wrap:wrap; gap:1rem 2.8rem; margin:0; padding:0; list-style:none;
}
.atl_formArea .smf-label{
	display:inline-flex; align-items:center; gap:.7rem;
	font-size:1.4rem; line-height:1.8; color:var(--fm-ink-2); cursor:pointer;
}
.atl_formArea .smf-label input[type="radio"],
.atl_formArea .smf-label input[type="checkbox"]{ accent-color:var(--fm-accent); width:1.7rem; height:1.7rem; }

/* エラー表示 */
.atl_formArea .smf-item--invalid .smf-text-control__control,
.atl_formArea .smf-item--invalid .smf-textarea-control__control{
	background:#fdf4f3; border-color:var(--fm-error);
}
.atl_formArea .smf-item__controls__error,
.atl_formArea .smf-error-messages{
	margin-top:.8rem; font-size:1.3125rem; font-weight:700; color:var(--fm-error);
}

/* ---------- 送信・確認ボタン ---------- */
.atl_formArea .smf-action{
	display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem;
	margin:4.8rem 0 0; padding:0; border:none;
}
.atl_formArea .smf-button-control__control,
.atl_formArea .smf-button-control__control:visited{
	appearance:none; cursor:pointer;
	display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
	min-width:28rem; padding:1.8rem 4rem;
	background:var(--fm-accent); border:1px solid var(--fm-accent); border-radius:999px;
	font-family:inherit; font-size:1.575rem; font-weight:700; letter-spacing:.06em; color:#fff;
	text-decoration:none; box-shadow:0 6px 18px rgba(0,91,159,.22);
	transition:background .2s var(--fm-ease),transform .2s var(--fm-ease),box-shadow .2s var(--fm-ease);
}
.atl_formArea .smf-button-control__control:hover{
	background:var(--fm-accent-lt); border-color:var(--fm-accent-lt);
	transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,91,159,.28);
}
.atl_formArea .smf-button-control__control:focus-visible{
	outline:3px solid rgba(0,91,159,.35); outline-offset:3px;
}
/* 「戻る」は控えめに */
.atl_formArea .smf-button-control__control[data-action="back"]{
	min-width:18rem; background:#fff; color:var(--fm-ink-2);
	border-color:var(--fm-line); box-shadow:none;
}
.atl_formArea .smf-button-control__control[data-action="back"]:hover{
	background:#f3f5f7; border-color:#cdd5dc; color:var(--fm-ink);
}

/* ---------- 確認画面の表示値 ---------- */
.atl_formArea .smf-item__controls > .smf-placeholder:only-child:not(:has(input,textarea,select)){
	padding:1.5rem 1.8rem; background:var(--fm-field-bg);
	border:1px solid var(--fm-line); border-radius:var(--fm-r);
	font-size:1.5rem; line-height:1.9; color:var(--fm-ink);
	white-space:pre-wrap;
}

/* ---------- 完了画面 ---------- */
.atl_formArea .smf-complete-content{ text-align:center; font-size:1.5rem; line-height:2; color:var(--fm-ink-2); }

/* ---------- PDF / 印刷ボタン（2026-09-30：表示しない） ---------- */
/* プラグイン（PDF & Print）が2組出力するので、両方とも非表示にする */
.atl_formArea .pdfprnt-buttons{ display:none; }

/* ---------- レスポンシブ ---------- */
@media screen and (max-width:560px){
	/* テーマ style.css の `.pg_contact .img{width:26rem;height:26rem}`（元は正方形画像用）を解除。
	   これが効いているとフォームが箱からはみ出して次のセクションに重なる */
	.pg_contact .img.atl_formArea{ width:100%; height:auto; margin:0; }
	.atl_formArea .snow-monkey-form{ padding:2.4rem 2rem 3.2rem; }
	.atl_formArea .smf-progress-tracker{ margin-bottom:3.6rem; }
	.atl_formArea .smf-progress-tracker__item__number{ width:3rem; height:3rem; font-size:1.225rem; }
	.atl_formArea .smf-progress-tracker__item__text{ font-size:1.05rem; }
	.atl_formArea .smf-item{ margin-bottom:2.4rem; }
	.atl_formArea .smf-text-control__control,
	.atl_formArea .smf-textarea-control__control,
	.atl_formArea .smf-select-control__control{ padding:1.3rem 1.4rem; font-size:1.6rem; }
	.atl_formArea .smf-textarea-control__control{ min-height:18rem; }
	.atl_formArea .smf-action{ margin-top:3.6rem; }
	.atl_formArea .smf-button-control__control{ width:100%; min-width:0; padding:1.6rem 2rem; font-size:1.5rem; }
	.atl_formArea .smf-button-control__control[data-action="back"]{ min-width:0; }
}