/*
 * 登録フォーム・配信停止ページ。
 * 色はサイトに合わせる：金 #c09e62 ／ 文字 #444548 ／ 見出し欄 #f0efef ／ ボタン #ff5a00（旧フォームのスマホ表示と同じ）
 */
.sa-mm {
	--mm-gold: #c09e62;
	--mm-text: #444548;
	--mm-th: #f0efef;
	--mm-line: #dcdcdc;
	--mm-btn: #ff5a00;
	color: var(--mm-text);
	margin: 1.5rem 0 3rem;
}
.sa-mm *, .sa-mm *::before, .sa-mm *::after { box-sizing: border-box; }

.sa-mm__lead { font-size: 1.05rem; font-weight: bold; margin: 0 0 1rem; }
.sa-mm__box { background: #faf8f3; border: 1px solid #eadfca; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.sa-mm__box p { margin: 0 0 .5rem; }
.sa-mm__box p:last-child { margin: 0; }

.sa-mm__errors { border: 1px solid #e0a0a0; background: #fff4f4; color: #b42318; padding: .75rem 1.25rem; margin: 0 0 1.25rem; }
.sa-mm__errors p { margin: 0 0 .25rem; font-weight: bold; }
.sa-mm__errors ul { margin: 0; padding-left: 1.25rem; }

.sa-mm__table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--mm-line); margin: 0 0 1.25rem; }
.sa-mm__table th, .sa-mm__table td { border-bottom: 1px solid var(--mm-line); padding: 16px 20px; vertical-align: middle; text-align: left; }
.sa-mm__table th { width: 30%; background: var(--mm-th); font-size: .9rem; font-weight: bold; line-height: 1.5; }
.sa-mm__table input[type=text],
.sa-mm__table input[type=email],
.sa-mm__table select { width: 100%; max-width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 3px; font-size: 16px; background: #fff; }
.sa-mm__req { display: inline-block; margin-left: .5em; padding: 1px 6px; font-size: .7rem; color: #fff; background: var(--mm-gold); border-radius: 2px; vertical-align: 1px; }

/* 姓・名を並べる箱。td そのものを flex にすると、スマホで td を block にする指定に負けて
   間（gap）が効かなかった（2026-10-10 吉岡さん「iPhone で姓と名の欄が詰まって窮屈」）。div を1枚かませる */
.sa-mm__pair { display: flex; gap: 16px; }
.sa-mm__pair label { flex: 1; display: flex; align-items: flex-start; gap: 8px; margin: 0; min-width: 0; }
.sa-mm__sub { flex: none; font-size: .85rem; line-height: 1.5; padding-top: 10px; }
.sa-mm__ctl { display: block; flex: 1; min-width: 0; }

/* 欄のすぐ下のエラー。お問い合わせ（Contact Form 7 の .wpcf7-not-valid-tip）と同じ色・大きさ */
.sa-mm__tip { display: block; margin-top: 4px; color: #dc3232; font-size: 14px; font-weight: normal; line-height: 1.5; }
.sa-mm__radios { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 6px 16px; }
.sa-mm__radios label { font-weight: normal; margin: 0; }
.sa-mm__value { font-weight: bold; }
.is-confirm .sa-mm__sub { color: #888; padding-top: 0; }

.sa-mm__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sa-mm__privacy, .sa-mm__note { font-size: .85rem; text-align: center; }
.sa-mm__note { color: #888; margin-top: 2rem; }
.sa-mm__buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 1.5rem 0 0; }
.sa-mm__btn {
	display: inline-block; min-width: 226px; padding: 0 2rem; height: 52px; line-height: 52px;
	border: 0; border-radius: 3px; background: var(--mm-btn); color: #fff !important; font-size: 16px; font-weight: bold;
	text-align: center; text-decoration: none !important; cursor: pointer; letter-spacing: .1em;
}
.sa-mm__btn--back { background: #888; }
/* 親テーマ twentyseventeen の `button:hover, button:focus { background: #767676 }` が勝つと、
   押したあとボタンが灰色になる。.sa-mm を付けて強くして、色はそのまま・少し薄くするだけにする */
.sa-mm .sa-mm__btn:hover, .sa-mm .sa-mm__btn:focus { background: var(--mm-btn); color: #fff; opacity: .85; }
.sa-mm .sa-mm__btn--back:hover, .sa-mm .sa-mm__btn--back:focus { background: #888; }

/*
 * 固定ページ（#contents の中）では、表の見た目はサイト共通（テーマの lower-2026.css）に任せる。
 * ただしスマホでは旧 style.css の `section td { padding: 24px !important }` が残っていて、
 * 入力欄が左に24pxずれる。ここだけ打ち消す（2026-10-01 に getComputedStyle で確認）。
 */
@media (max-width: 640px) {
	.sa-mm__table, .sa-mm__table tbody, .sa-mm__table tr, .sa-mm__table th, .sa-mm__table td { display: block; width: 100%; }
	.sa-mm__table th { padding: 10px 14px; border-bottom: 0; }
	.sa-mm .sa-mm__table td { padding: 8px 0 20px !important; }
	.sa-mm__pair { flex-direction: column; gap: 14px; }
	.sa-mm__radios { grid-template-columns: 1fr 1fr; }
	.sa-mm__btn { width: 100%; min-width: 0; }
}