/*
 * 自前フォームの見た目。**本番のHubSpotフォームから実測した値**で作っている
 * (2026-08-13・設計書 第11章)。
 *
 * 元のフォームは HubSpot の iframe の中にあり、スタイルは
 *   ① HubSpot の基礎CSS(iframe内・計算値をブラウザで実測)
 *   ② サイト側が onFormReady で注入していたCSS(ページのbase64 scriptから復号)
 * の2つで出来ていた。iframe を使わなくなるとどちらも当たらないので、
 * 同じ見た目になるようここに写している。数値を変えると本番と見た目が変わる。
 *
 * Bootstrap は読み込まない(B方式)。クラス名は全部 `mw-` 接頭辞の自前のもので、
 * テーマのCSSと衝突しないようにしている。
 */

.mw-form {
    font-size: 16px;
    color: #000;
}

/* フォームの上の余白(2026-09-01実機発見: /en/contact/ で見出しの直後に
   隙間が無かった)。本番は各項目の見出しセル(td.ttl)に
   `padding-top: 30px` が付いており、テーブルの1行目にも掛かるため
   見出し文との間に隙間ができている。こちらはtableではないので、
   コンテナ全体に同じ値のmargin-topを付けて再現する */
.mw-form-wrap {
    margin-top: 30px;
}

/* --- 行(同じ row の項目を横並びにする) ------------------------------- */
/* 元のフォームは「姓|名」「郵便番号|都道府県|市区町村」のような
   2〜3カラムの行を持つ(HubSpot定義の formFieldGroups が1行に対応) */
.mw-form .mw-form-row {
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
}
.mw-form .mw-form-row > .mw-form-field {
    flex: 1 1 0;
    min-width: 0;   /* はみ出し防止。これが無いと長い選択肢で崩れる */
}
.mw-form .mw-form-cols-1 {
    display: block;
}

/* --- ラベルと必須バッジ ------------------------------------------------ */
.mw-form label,
.mw-form .mw-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #33475b;
    margin-bottom: 4px;
}
.mw-form .mw-form-req {
    display: inline-block;
    margin-left: 14px;
    padding: 2px 4px;
    border-radius: 4px;
    background-color: #e63e3e;
    color: #fff;
    font-size: 86%;
    font-weight: 400;
}

/* --- 入力欄 ------------------------------------------------------------ */
.mw-form input[type="text"],
.mw-form input[type="email"],
.mw-form input[type="tel"],
.mw-form select,
.mw-form textarea {
    width: 100%;
    box-sizing: border-box;
    background-color: #f5f8fa;
    border: 1px solid #cbd6e2;
    border-radius: 3px;
    font-size: 16px;
    color: #000;
    font-family: inherit;
}
.mw-form input[type="text"],
.mw-form input[type="email"],
.mw-form input[type="tel"] {
    height: 40px;
    padding: 0 15px;
    line-height: 22px;
}
.mw-form select {
    height: 40px;
    padding: 9px 10px;
}
.mw-form textarea {
    min-height: 250px;
    padding: 10px 15px;
}
.mw-form input:focus,
.mw-form select:focus,
.mw-form textarea:focus {
    outline: none;
    border-color: #7c98b6;
}

/* --- 項目の説明文(実物はリンクを含む) ------------------------------- */
.mw-form .mw-form-desc {
    font-size: 11px;
    color: #7c98b6;
    margin: 0 0 6px;
}
.mw-form .mw-form-desc a {
    color: #7c98b6;
    text-decoration: underline;
}

/* --- 選択肢(チェックボックス群・ラジオ) ----------------------------- */
.mw-form .mw-form-options {
    margin: 0 0 5px;
    padding: 6px 0 0 5px;
}
.mw-form .mw-form-options label {
    display: block;
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
}
.mw-form .mw-form-options input {
    margin-right: 6px;
}
/* チェック1つだけの項目(「商談を希望する」など)はラベルの中に入力欄が入る。
   2026-09-02 りえさん指摘: 文言が2行以上に折り返すと、チェックボックスの
   真下に文章が回り込んで見づらかった。チェックボックスをflexの固定幅列に
   分離し、文言(必須バッジ込み)を別要素にして、折り返した行もチェック
   ボックスの右側の位置で揃うようにする */
.mw-form .mw-form-checkbox label {
    display: flex;
    align-items: flex-start;
    font-size: 16px;
    font-weight: 400;
    color: #000;
}
.mw-form .mw-form-checkbox input {
    flex-shrink: 0;
    margin-right: 6px;
    margin-top: 4px;   /* 文字の1行目とチェックボックスの上下位置を合わせる */
}
.mw-form .mw-form-checkbox-text {
    flex: 1;
}

/* --- 送信ボタン(元は中央寄せ・最小幅180px) -------------------------- */
.mw-form .mw-form-submit {
    margin-top: 24px;
    text-align: center;
}
.mw-form .mw-form-submit button {
    display: block;
    margin: auto;
    min-width: 180px;
    padding: 12px 24px;
    background-color: #ff7a59;
    border: 1px solid #ff7a59;
    border-radius: 3px;
    color: #fff;
    /* 2026-09-01 りえさん指定: 送信ボタンの字が小さいので大きくする
       (本番実測値は12px。対象は送信ボタンのみで、フォーム全体や
       ラベルは実測値のまま) */
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.mw-form .mw-form-submit button:hover {
    background-color: #ff8f73;
    border-color: #ff8f73;
}

/* --- 注記(同意の1行)とエラー --------------------------------------- */
.mw-form .mw-form-note {
    margin-top: 12px;
    font-size: 86%;
    color: #33475b;
}
.mw-form-wrap .mw-form-error,
.mw-form .mw-form-error {
    color: #e63e3e;
    font-size: 14px;
}
.mw-form .mw-form-field.mw-has-error input,
.mw-form .mw-form-field.mw-has-error textarea {
    background-color: #ffd8d8;
}

/* --- 送信完了の文(finish_url が無いフォーム) ------------------------ */
.mw-form-done {
    font-size: 16px;
    color: #33475b;
}

/* --- スマホ: 横並びをやめて縦に積む --------------------------------- */
@media (max-width: 600px) {
    .mw-form .mw-form-row {
        display: block;
    }
    .mw-form .mw-form-row > .mw-form-field {
        margin-bottom: 16px;
    }
    .mw-form .mw-form-row > .mw-form-field:last-child {
        margin-bottom: 0;
    }
}

/* --- reCAPTCHA v3 の注記(2026-09-29 りえさん判断「B」) --------------
   バッジは隠して注記を置く。**隠すだけは規約違反**で、この文言を出すのが
   条件(https://developers.google.com/recaptcha/docs/faq)。
   隠す理由: フォームは248ページに出るうえ、このテーマはスマホで下に
   メニューを固定する(`sp-footer-box`)ので、右下に浮くバッジが重なる。
   `display:none` ではなく `visibility:hidden` にしてある——widget自体は
   生かしたまま見た目だけ消す、無難なほう。 */
.grecaptcha-badge {
    visibility: hidden;
}
.mw-form .mw-form-recaptcha-note {
    margin-top: 12px;
    font-size: 78%;
    line-height: 1.6;
    color: #7c98b6;
}
.mw-form .mw-form-recaptcha-note a {
    color: inherit;
    text-decoration: underline;
}