@charset "UTF-8";
/* ====================================================
　お問い合わせページ固有CSS（ファーストビュー以降）
　pageContact_body.css
==================================================== */


/* ######################################################################################

　共通（コンテナ）

###################################################################################### */

/* ----- contactLead__inner / contactForm__inner
　　（.contents.narrowよりさらに狭い、中央寄せのフォーム用カラム） ----- */
.contactLead__inner,
.contactForm__inner{
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-pad-sp);
    padding-left: var(--container-pad-sp);
}
@media print, screen and (min-width: 768px){
    .contactLead__inner,
    .contactForm__inner{
        max-width: 100rem; /* 1000px相当（1280px基準） */
        padding-right: var(--container-pad-pc);
        padding-left: var(--container-pad-pc);
    }
}
@media screen and (max-width: 767px){
    /* Figma SPは左右24px（共通.contentsの20pxとは異なる） */
    .contactLead__inner,
    .contactForm__inner{
        padding-right: 6.1538vw;
        padding-left: 6.1538vw;
    }
}


/* ######################################################################################

　CONTACT LEAD（リード文）

###################################################################################### */

@media print, screen and (min-width: 768px){
    /* Figma実測：パンくず下端からリード文まで95px。PCは中央揃え */
    .contactLead{ margin-top: 9.5rem; }
    .contactLead__inner{ text-align: center; }
}
@media screen and (max-width: 767px){
    /* SPは左揃え。Figma実測：セクション自体がpadding-top36px/padding-bottom28px
       を持つ構成のため、下端の余白をpadding-bottomとして再現する
       （.contactFormの方はmargin-top:0のため、ここで確保しないと詰まる） */
    .contactLead{ margin-top: 9.2308vw; padding-bottom: 7.1795vw; }
}

/* contactLead__text
----------------------------------------------------- */
.contactLead__text{
    line-height: 1.75;
}
@media print, screen and (min-width: 768px){
    /* Figma実測：本文色は#242424（共通--color-textの#333とは別値のためページ側で上書き） */
    .contactLead__text{ font-size: 1.5rem; color: #242424; }
}
@media screen and (max-width: 767px){
    .contactLead__text{ font-size: 4.1026vw; color: var(--color-text); }
}

/* contactLead__notice（セールスお断り文言）
----------------------------------------------------- */
.contactLead__notice{
    line-height: 1.75;
    font-weight: 700;
    color: #dc0000;
}
@media print, screen and (min-width: 768px){
    /* Figma実測：line-height28px（15px文字に対し比率1.8667。共通の1.75比率のままだと26.25pxで不足） */
    /* .contactLead__inner が text-align:center のため、この行だけ継承を打ち消して左寄せにする
       （Figma実測：本文と異なりお断り文言はフォーム列の左端に揃っている） */
    .contactLead__notice{ margin-top: 5.5rem; font-size: 1.5rem; line-height: 1.8667; text-align: left; }
}
@media screen and (max-width: 767px){
    /* Figma実測：文字サイズ15px（旧16pxは誤り）。line-heightは共通の1.75比率のままでFigma実測26pxとほぼ一致 */
    .contactLead__notice{ margin-top: 4.1026vw; font-size: 3.8462vw; }
}


/* ######################################################################################

　CONTACT FORM（お問い合わせフォーム）

###################################################################################### */

@media print, screen and (min-width: 768px){
    /* Figma実測：リード文下端からフォームまで22px／送信ボタン下端からフッターまで335px
       ↑デザイン値だが実際のバランスを見て半分（167.5px）に調整 */
    .contactForm{ margin-top: 2.2rem; padding-bottom: 16.75rem; }
}
@media screen and (max-width: 767px){
    /* Figma実測：送信ボタン下端からフッターまで64px（390px基準） */
    .contactForm{ margin-top: 0; padding-bottom: 16.4103vw; }
}

/* contactForm__table（フォーム項目一覧）
----------------------------------------------------- */
.contactForm__table{
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 767px){
    .contactForm__table{ gap: 8.7179vw; }
}

/* contactForm__row（項目1行）
----------------------------------------------------- */
.contactForm__row{
    display: flex;
    flex-direction: column;
}
@media print, screen and (min-width: 768px){
    .contactForm__row{
        flex-direction: row;
        align-items: center;
        border-top: 1px solid #c7cbd9;
        padding-top: 1.7rem;
        padding-bottom: 1.7rem;
    }
    .contactForm__row--check{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .contactForm__row--email{
        padding-top: 2.35rem;
        padding-bottom: 2.35rem;
    }
    .contactForm__row--message{
        align-items: flex-start;
        padding-top: 3.1rem;
        /* 下側の余白はcontactForm__privacyのmargin-topで確保するためゼロにする */
        padding-bottom: 0;
    }
}
@media screen and (max-width: 767px){
    .contactForm__row{ gap: 3.0769vw; }
}

/* ご住所の行のみ、複数入力欄の縦積みぶん行のpaddingを広げる */
@media print, screen and (min-width: 768px){
    .contactForm__row:has(.contactForm__value--stack){
        padding-top: 2.35rem;
        padding-bottom: 2.35rem;
    }
}

/* contactForm__label
----------------------------------------------------- */
.contactForm__label{
    display: flex;
    align-items: center;
}
@media print, screen and (min-width: 768px){
    .contactForm__label{
        flex: 0 0 22rem;
        gap: 1.1rem;
        font-size: 1.5rem;
        font-weight: 400;
        color: #242424;
    }
    .contactForm__row--message .contactForm__label{ padding-top: 0.375em; }
}
@media screen and (max-width: 767px){
    .contactForm__label{ gap: 2.0513vw; font-size: 4.1026vw; font-weight: 700; color: var(--color-text); }
}

/* contactForm__required（必須バッジ）
　確認画面（/contact/confirm/）では非表示にする。入力必須の設定自体・
　バリデーションはMW WP Form側のまま変更せず、表示のみCSSで消す
----------------------------------------------------- */
.contactForm--confirm .contactForm__required{ display: none; }
.contactForm__required{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: #dc0000;
    line-height: 1;
    font-weight: 700;
    color: var(--color-white);
}
@media print, screen and (min-width: 768px){
    .contactForm__required{ height: 2.1rem; padding-right: 0.6em; padding-left: 0.6em; font-size: 1.1rem; }
}
@media screen and (max-width: 767px){
    /* Figma実測：SPのバッジはPC(#dc0000)と異なる#d6183f、文字サイズは12px */
    .contactForm__required{ background: #d6183f; height: 5.1282vw; padding-right: 0.6em; padding-left: 0.6em; font-size: 3.0769vw; }
}

/* contactForm__value
----------------------------------------------------- */
.contactForm__value{ flex: 1; }
.contactForm__value--stack{
    display: flex;
    flex-direction: column;
}
@media print, screen and (min-width: 768px){
    .contactForm__value--stack{ gap: 1.1rem; }
}
@media screen and (max-width: 767px){
    .contactForm__value--stack{ gap: 3.0769vw; }
}

/* お問い合わせ種別（チェックボックスの並び）
　MW WP Form（[mwform_checkbox]）は各選択肢を
　<span class="mwform-checkbox-field horizontal-item"><label>...</label></span>
　で包んで出力する。その包んでいる.contactForm__row--check .contactForm__value
　（dd）側をコンテナとしてflexレイアウトを組む。
　なお、MW WP Form本体のcss/style.cssに
　.horizontal-item + .horizontal-item{ margin-left:10px; }
　という横並び前提のCSSが存在し、SPでflex-direction:columnに
　切り替えても打ち消されずに残るため、2つ目以降の項目だけ左端がずれる
　原因になっていた。項目ごとの個別margin指定ではなく、このプラグイン側
　margin自体をSPで打ち消すことで、全項目を同じ左端に揃える。
----------------------------------------------------- */
.contactForm__row--check .contactForm__value{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
@media print, screen and (min-width: 768px){
    /* 全項目をPCで1行に収める。列固定のGrid（旧実装）は各列幅が列内の
       最大要素の自然幅に揃う仕様のため、実際の文字幅より列が広がり
       （実測：5項目の自然幅合計624px＋旧column-gap3rem×4=816px）、
       利用可能なvalue幅700pxを超えて折り返していた。gapのみで一括管理
       できるflex(nowrap)に変更し、MW WP Form標準CSSの項目個別margin-left
       （10px）は打ち消してgapだけで間隔を統一する */
    .contactForm__row--check .contactForm__value{
        flex-wrap: nowrap;
        column-gap: 1rem;
    }
    .contactForm__row--check .contactForm__value .horizontal-item{ margin-left: 0; }
}
@media screen and (max-width: 767px){
    /* Figma実測：チェック項目間の縦gap10px／項目は左寄せ（PCのalign-items:centerを上書き） */
    .contactForm__row--check .contactForm__value{ flex-direction: column; align-items: flex-start; gap: 2.5641vw; }
    /* MW WP Form標準CSSの横並び用marginを打ち消す（詳細は上部コメント参照） */
    .contactForm__row--check .contactForm__value .horizontal-item{ margin-left: 0; }
}

/* ######################################################################################

　入力パーツ（input / textarea）

###################################################################################### */

.contactForm__input,
.contactForm__textarea{
    display: block;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    font-family: inherit;
    color: var(--color-text);
}
.contactForm__input:focus,
.contactForm__textarea:focus{ outline: none; border-color: var(--color-primary); }

@media print, screen and (min-width: 768px){
    /* Figma実測：PCの入力欄は背景に薄い色味が付く（#f5f8fa／border #979db7） */
    .contactForm__input,
    .contactForm__textarea{
        border-color: #979db7;
        background: #f5f8fa;
        padding-right: 1em;
        padding-left: 1em;
        font-size: 1.5rem;
    }
    .contactForm__input::placeholder,
    .contactForm__textarea::placeholder{ color: #aaa; }
    .contactForm__input{ height: 4.6rem; max-width: 30rem; }
    .contactForm__input--tel{ max-width: 20rem; }
    .contactForm__input--wide{ max-width: 58rem; }
    .contactForm__textarea{
        max-width: 67.1rem;
        height: 16.2rem;
        padding-top: 0.75em;
        padding-bottom: 0.75em;
        resize: vertical;
    }
}
@media screen and (max-width: 767px){
    /* Figma実測：SPの入力欄は背景白／border #ccc */
    .contactForm__input,
    .contactForm__textarea{
        border-color: #ccc;
        background: var(--color-white);
        padding-right: 4.1026vw;
        padding-left: 4.1026vw;
        font-size: 4.1026vw;
    }
    .contactForm__input::placeholder,
    .contactForm__textarea::placeholder{ color: #999; }
    .contactForm__input{ height: 13.0769vw; }
    .contactForm__textarea{
        height: 44.1026vw;
        padding-top: 4.1026vw;
        padding-bottom: 4.1026vw;
        resize: vertical;
    }
}

/* contactForm__note（textarea下の注意書き：SPのみ表示。PCはplaceholderで表現） */
.contactForm__note{
    color: var(--color-text-sub);
}
@media screen and (max-width: 767px){
    .contactForm__note{ margin-top: 3.0769vw; font-size: 3.5897vw; }
}


/* ######################################################################################

　チェックボックス共通（お問い合わせ種別／個人情報保護方針同意）

###################################################################################### */

/*
 * MW WP Form（[mwform_checkbox]）が実際に出力するHTML構造は
 * <label><input type="checkbox">...<span class="mwform-checkbox-field-text">ラベル文</span></label>
 * であり、<label>が<input>を包む（inputの兄弟ではない）。
 * 静的HTML案の「input + label」隣接兄弟セレクタ前提のチェックボックス装飾は
 * この構造には一致せず、チェックボックスの見た目・クリック領域が生成されない
 * 原因になっていたため、実際に隣接する要素（.mwform-checkbox-field-text）を
 * 対象にする。
 */
.contactForm input[type="checkbox"]{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}
.contactForm label{ cursor: pointer; }
.contactForm input[type="checkbox"] + .mwform-checkbox-field-text{
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.contactForm input[type="checkbox"] + .mwform-checkbox-field-text::before{
    flex-shrink: 0;
    display: block;
    content: "";
    background: var(--color-white);
}
.contactForm input[type="checkbox"] + .mwform-checkbox-field-text::after{
    display: block;
    position: absolute;
    content: "";
    opacity: 0;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(45deg);
    transition: opacity var(--transition);
}
.contactForm input[type="checkbox"]:checked + .mwform-checkbox-field-text::after{ opacity: 1; }
/*
 * チェックボックス本体はsr-only的に1px×1pxへ縮小して視覚的に隠しているため、
 * ブラウザ標準のフォーカスリングをinput自体に出しても実質見えない。
 * サイト共通リセット（header.php）がinput:focusのoutlineを一律で消しているため、
 * キーボード操作時にフォーカス位置が分かるよう、代わりに視覚的なチェックボックス
 * （::before）へフォーカスリングを表示する。
 */
.contactForm input[type="checkbox"]:focus-visible + .mwform-checkbox-field-text::before{
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.contactForm__agree input[type="checkbox"]:focus-visible + .mwform-checkbox-field-text::before{
    outline-color: var(--color-white);
}

@media print, screen and (min-width: 768px){
    /* Figma実測：PCのチェックボックス枠線は#babed1・角丸3px */
    .contactForm input[type="checkbox"] + .mwform-checkbox-field-text{ gap: 0.5em; font-size: 1.5rem; color: #242424; }
    .contactForm input[type="checkbox"] + .mwform-checkbox-field-text::before{ width: 1.25em; height: 1.25em; border: 1px solid #babed1; border-radius: 3px; }
    .contactForm input[type="checkbox"] + .mwform-checkbox-field-text::after{ left: 0.4em; top: 0.4em; width: 0.4em; height: 0.7em; }
}
@media screen and (max-width: 767px){
    /* Figma実測：SPのチェックボックス枠線は#999・角丸2px */
    .contactForm input[type="checkbox"] + .mwform-checkbox-field-text{ gap: 3.0769vw; font-size: 4.1026vw; color: var(--color-text); }
    .contactForm input[type="checkbox"] + .mwform-checkbox-field-text::before{ width: 1.25em; height: 1.25em; border: 1.5px solid #999; border-radius: 2px; }
    .contactForm input[type="checkbox"] + .mwform-checkbox-field-text::after{ left: 0.4em; top: 0.4em; width: 0.4em; height: 0.7em; }
}
/* お問い合わせ種別のチェックボックスラベルはSPのみ本文より1段小さいサイズ（Figma実測15px/16px基準） */
@media screen and (max-width: 767px){
    .contactForm__row--check input[type="checkbox"] + .mwform-checkbox-field-text{ font-size: 3.8462vw; }
}


/* ######################################################################################

　プライバシーポリシー文／同意チェック／送信ボタン

###################################################################################### */

/* contactForm__privacy
----------------------------------------------------- */
.contactForm__privacy{
    line-height: 1.75;
    color: var(--color-text);
}
.contactForm__privacy a{ color: var(--color-primary); text-decoration: underline; }
.contactForm__privacy a:hover{ text-decoration: none; }
@media print, screen and (min-width: 768px){
    /* Figma実測：お問い合わせ内容欄の下端から39px。PCは中央揃え */
    .contactForm__privacy{ margin-top: 3.9rem; font-size: 1.5rem; text-align: center; }
}
@media screen and (max-width: 767px){
    .contactForm__privacy{ margin-top: 8.7179vw; font-size: 4.1026vw; }
}

/* contactForm__agree（個人情報保護方針への同意）
　確認画面では非表示にする（同意チェックは入力画面で完了済みのため）。
　MW WP Form側のバリデーション（同意必須）はそのまま維持し、表示のみ消す
----------------------------------------------------- */
.contactForm--confirm .contactForm__agree{ display: none; }
.contactForm__agree{
    display: flex;
    align-items: center;
    justify-content: center;
}
@media print, screen and (min-width: 768px){
    .contactForm__agree{
        margin-top: 6.4rem;
        border-radius: 6px;
        background: var(--color-primary);
        /* デザイン値(2.75rem基準)は実際の見た目では縦に間延びして見えるため、
           チェックボックス1行分の内容に対してバランスが取れる分量へ調整 */
        padding-top: 1.8rem;
        padding-bottom: 1.8rem;
    }
    /* チェックボックス自体は通常時と同じ白地／薄いborderのまま（Figma実測）。ラベル文字のみ白・太字にする */
    .contactForm__agree input[type="checkbox"] + .mwform-checkbox-field-text{ color: var(--color-white); font-weight: 700; }
}
@media screen and (max-width: 767px){
    .contactForm__agree{ justify-content: flex-start; margin-top: 8.7179vw; }
}

/* contactForm__submitWrap / contactForm__submit / contactForm__backBtn
----------------------------------------------------- */
.contactForm__submitWrap{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.contactForm__submit,
.contactForm__backBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition);
    font-weight: 700;
}
/* サイト共通リセットでinput:focusのoutlineが消えるため、キーボード操作時の
   フォーカス位置が分かるよう代替のフォーカス表示を明示する */
.contactForm__submit:focus-visible,
.contactForm__backBtn:focus-visible{
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.contactForm__submit:disabled,
.contactForm__submit.disabled{ opacity: 0.4; pointer-events: none; }

/*
 * [mwform_bconfirm]（入力画面の「入力内容の確認」）と[mwform_bback]/[mwform_bsubmit]
 * （確認画面の「前にもどる」「送信する」）は、それぞれ入力画面・確認画面の
 * どちらか一方にしかMW WP Form側で出力されないため、CSS側での表示切り替えは不要。
 */

@media print, screen and (min-width: 768px){
    .contactForm__submitWrap{ gap: 1.6rem; margin-top: 5.2rem; }
    /* Figma実測：送信ボタンはborder 2px・文字色ともに#2a4178（独自色） */
    .contactForm__submit,
    .contactForm__backBtn{
        width: 28rem;
        height: 5.6rem;
        border-radius: 3px;
        font-size: 1.5rem;
    }
    .contactForm__submit{
        border: 2px solid #2a4178;
        background: var(--color-white);
        color: #2a4178;
    }
    /* 戻るボタンは送信ボタンと同形状のまま、控えめな配色にして副次的操作であることを示す */
    .contactForm__backBtn{
        border: 2px solid var(--color-border);
        background: var(--color-white);
        color: var(--color-text-sub);
    }
    .contactForm__submit:not(:disabled):not(.disabled):hover,
    .contactForm__backBtn:hover{ opacity: 0.7; }
}
@media screen and (max-width: 767px){
    .contactForm__submitWrap{ flex-direction: column-reverse; gap: 3.0769vw; margin-top: 8.7179vw; }
    /* Figma実測：SPの送信ボタンは濃紺ではなくダークグレー#3b3b41、文字17px */
    .contactForm__submit,
    .contactForm__backBtn{
        width: 100%;
        height: 14.8718vw;
        border-radius: 3px;
        font-size: 4.359vw;
    }
    .contactForm__submit{
        border: none;
        background: #3b3b41;
        color: var(--color-white);
    }
    .contactForm__backBtn{
        border: 1.5px solid var(--color-border);
        background: var(--color-white);
        color: var(--color-text-sub);
    }
    /* Figma実測：「入力内容の確認」ボタンの矢印はSPのみ（PCボタンに矢印はない） */
    .contactForm__submit--toConfirm::after{ content: "→"; margin-left: 0.5em; }
}