@charset "UTF-8";
/* 移行後に新しく書くスタイル（BEM記法）
   見た目の土台は旧テーマの config.css・layout.css（先に読み込む）。ここには移行で新しく作った部品だけを書く */

/* =========================================
   お問い合わせフォーム
   ========================================= */
.contact-form
{ margin: 30px 0 0;}
.contact-form__row
{ margin: 0 0 20px; padding: 0; border: none;}
.contact-form__label
{ display: block; margin-bottom: 5px; padding: 0; font-size: 14px; font-weight: bold;}
.contact-form__required
{ margin-left: 4px; color: #d33;}
.contact-form__input
{ display: block; width: 100%; height: 50px; padding: 10px 16px; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; color: #333; font-family: inherit; font-size: 16px; line-height: 1.4; appearance: none;}
.contact-form__input:focus
{ border-color: #333; outline: none;}
.contact-form__input--textarea
{ height: 180px; resize: vertical;}
.contact-form__input--error
{ border-color: #d33; background-color: #fff5f5;}
.contact-form__error
{ margin: 5px 0 0; color: #d33; font-size: 13px;}
.contact-form__alert
{ margin: 20px 0; padding: 12px 16px; border-left: 4px solid #d33; background-color: #fff5f5; color: #b22;}
.contact-form__choices
{ display: flex; flex-wrap: wrap; gap: 10px 30px; padding-top: 5px;}
.contact-form__choice
{ display: flex; align-items: center; gap: 8px; cursor: pointer;}
.contact-form__checkbox
{ flex: none; width: 18px; height: 18px; margin: 0;}
/* ボット対策の隠し欄。display:none にするとボットに見抜かれやすいので画面の外に出す */
.contact-form__trap
{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}
.contact-form__actions
{ display: flex; flex-direction: column-reverse; align-items: center; gap: 20px; margin-top: 30px;}
.contact-form__submit
{ display: block; width: 100%; max-width: 360px; padding: 14px 48px; border: none; border-radius: 6px; background-color: #333; color: #fff; font-family: inherit; font-size: 17px; letter-spacing: 0.1em; cursor: pointer; appearance: none;}
.contact-form__submit:hover
{ background-color: #555;}
.contact-form__submit:disabled
{ opacity: 0.6; cursor: wait;}
.contact-form__back
{ font-size: 14px;}
.contact-form__note
{ margin-top: 30px; color: #888; font-size: 11px;}

/* =========================================
   お問い合わせ確認画面
   ========================================= */
.contact-confirm
{ margin: 30px 0 0; border-top: 1px solid #ddd;}
.contact-confirm__label
{ padding: 15px 0 5px; color: #777; font-size: 13px;}
.contact-confirm__value
{ margin: 0; padding: 0 0 15px; border-bottom: 1px solid #ddd; overflow-wrap: anywhere;}
.contact-confirm__empty
{ color: #b0b0b0;}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
  .contact-form__choices
  { flex-direction: column;}
}