/* お問い合わせページ（ContactHub 埋め込みフォーム） ------------------------------------------------------------ ContactHub の embed-direct.js は実行時に の末尾へ #efo-default-styles を差し込むため、単純なクラスセレクタでは 後勝ちで上書きされてしまう。よって #_contactform を付けた 詳細度の高いセレクタで指定している（!important は不使用）。 また当サイトは :root/html の font-size が 10px のため、 ContactHub 側の rem 指定（1rem = 10px 換算）が極端に小さくなる。 サイト基準（1.6rem = 16px）に合わせて主要な文字サイズを再指定する。 ------------------------------------------------------------ */ /* 共通パーツ上書き */ #contact .cntInner{ padding-top: 60px; } /* フォームセクション */ #_contactform{ padding-top: 78px; padding-bottom: 60px; } /* ---- コンテナ・見出し ---- */ #_contactform .efo-form-container{ max-width: 720px; margin: 0 auto; font-family: var(--ff-main); font-size: 1.6rem; line-height: 1.6; color: var(--c-base); } #_contactform .efo-title{ font-size: 2.4rem; font-weight: 900; margin-bottom: 32px; } #_contactform .efo-heading{ font-size: 1.9rem; font-weight: 700; padding-top: 8px; } /* ---- 進捗バー ---- */ #_contactform .efo-progress{ margin-bottom: 28px; } #_contactform .efo-progress-info{ font-size: 1.3rem; margin-bottom: 6px; } #_contactform .efo-progress-bar{ height: 8px; } #_contactform .efo-progress-fill{ background: var(--c-accent); } /* ---- 入力項目 ---- */ #_contactform .efo-fields{ gap: 24px; } #_contactform .efo-label{ font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; } #_contactform .efo-sub-label, #_contactform .efo-help, #_contactform .efo-error{ font-size: 1.3rem; } #_contactform .efo-input, #_contactform .efo-textarea, #_contactform .efo-select{ padding: 12px 14px; font-family: var(--ff-main); font-size: 1.6rem; line-height: 1.5; border-radius: 4px; background: #fff; } #_contactform .efo-input:focus, #_contactform .efo-textarea:focus, #_contactform .efo-select:focus{ border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(255, 85, 0, .2); } #_contactform .efo-textarea{ min-height: 180px; } #_contactform .efo-input--zip{ max-width: 180px; } #_contactform .efo-name-row{ gap: 12px; margin-bottom: 8px; } /* ---- 選択肢（ラジオ・チェックボックス） ---- */ #_contactform .efo-radio-group, #_contactform .efo-checkbox-group{ gap: 8px 20px; } #_contactform .efo-radio-label, #_contactform .efo-checkbox-label, #_contactform .efo-agree-label{ gap: 8px; padding: 8px; min-height: 44px; font-size: 1.5rem; } #_contactform .efo-radio, #_contactform .efo-checkbox{ width: 18px; height: 18px; accent-color: var(--c-accent); } #_contactform .efo-agree-link, #_contactform .efo-paragraph-link a{ font-size: 1.5rem; color: var(--c-accent); } /* ---- 繰り返し入力・説明文 ---- */ #_contactform .efo-repeatable-remove{ width: 40px; height: 40px; font-size: 1.6rem; } #_contactform .efo-repeatable-add{ font-size: 1.5rem; color: var(--c-accent); } #_contactform .efo-paragraph{ font-size: 1.5rem; margin: 12px 0; } #_contactform .efo-paragraph--notice, #_contactform .efo-paragraph--emphasis{ padding: 16px; border-radius: 4px; } #_contactform .efo-paragraph--emphasis{ border-left-color: var(--c-accent); background: #FFF4EE; } /* ---- ファイル添付 ---- */ #_contactform .efo-file-drop{ padding: 32px 16px; } #_contactform .efo-file-drop:hover, #_contactform .efo-file-drop--active{ border-color: var(--c-accent); background: #FFF4EE; } #_contactform .efo-file-main, #_contactform .efo-file-hint, #_contactform .efo-file-name{ font-size: 1.5rem; } #_contactform .efo-file-sub, #_contactform .efo-file-formats, #_contactform .efo-file-size, #_contactform .efo-file-remove{ font-size: 1.3rem; } /* ---- ボタン ---- */ #_contactform .efo-buttons{ gap: 12px; margin-top: 40px; } #_contactform .efo-btn{ min-height: 60px; padding: 16px; font-family: var(--ff-main); font-size: 1.7rem; font-weight: 700; border-radius: 4px; transition: opacity .3s, background .15s; } #_contactform .efo-btn--next{ background: var(--c-accent); color: #fff; } #_contactform .efo-btn--next:hover{ background: var(--c-accent); opacity: .8; } #_contactform .efo-btn--back:hover{ opacity: .8; } /* ---- 送信完了 ---- */ #_contactform .efo-complete{ padding: 48px 0; } #_contactform .efo-complete-icon{ font-size: 4.0rem; margin-bottom: 16px; } #_contactform .efo-complete-title{ font-size: 2.2rem; font-weight: 900; margin-bottom: 8px; } #_contactform .efo-complete-message{ font-size: 1.6rem; } /* TAB */ @media screen and (max-width: 899px){ #contact .cntInner{ padding-top: 40px; } #_contactform{ padding-top: 44px; padding-bottom: 40px; } #_contactform .efo-title{ font-size: 2.0rem; margin-bottom: 24px; } #_contactform .efo-heading{ font-size: 1.7rem; } #_contactform .efo-fields{ gap: 20px; } #_contactform .efo-buttons{ margin-top: 32px; } #_contactform .efo-btn{ min-height: 52px; font-size: 1.6rem; } }