/* --- CF7フォーム: 既存デザイン(.ct-*)へのマッピング --- */
#contact > #container .ct-field .wpcf7-form-control-wrap{ display:block; width:100%; }

/* お問合せ内容(テキストエリアを同意欄の直上まで伸ばす。CF7が自動挿入するpタグを挟んでflexを繋ぎ直す) */
#contact > #container .ct-field--msg{ display:flex; flex-direction:column; }
#contact > #container .ct-field--msg-wrap{
    flex: 1;
    display: flex;
    flex-direction: column;
}
#contact > #container .ct-field--msg-wrap p{
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
}
#contact > #container .ct-field--msg-wrap .wpcf7-form-control-wrap{
    flex: 1;
    display: flex;
    flex-direction: column;
}
#contact > #container .ct-field--msg-wrap textarea{ flex: 1; }

/* ラジオ(お問い合わせ種別): 各選択肢は functions.php 側で .ct-radio クラスを付与し、
   既存の #contact > #container .ct-radio / .ct-radio input をそのまま適用している。
   CF7標準の.wpcf7-list-item(display:inline-block; margin:0 0 0 1em)だけ打ち消す。 */
#contact > #container .ct-field--type .wpcf7-list-item{ display:block; margin:0; }

/* 同意チェックボックスと送信ボタンを横並びに(CF7が自動挿入するpタグの影響を打ち消す) */
#contact > #container .ct-form__foot-agree,
#contact > #container .ct-form__foot-submit{
    margin: 0;
}
#contact > #container .ct-form__foot-agree p,
#contact > #container .ct-form__foot-submit p{
    margin: 0;
}
/* CF7標準の.wpcf7-list-item(margin:0 0 0 1em)を打ち消して左端に揃える */
#contact > #container .ct-form__foot-agree .wpcf7-list-item{
    margin: 0;
    display: inline-block;
}
/* 送信ボタンをカラム右端に寄せる */
#contact > #container .ct-form__foot-submit{
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}
#contact > #container .ct-form__foot-submit p{
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
/* 非表示時のスピナーが余白を食う分を詰める */
#contact > #container .ct-form__foot-submit .wpcf7-spinner{ display: none; margin: 0; }
#contact > #container form.wpcf7-form.submitting .ct-form__foot-submit .wpcf7-spinner{
    display: inline-block;
    margin: 0 0 0 12px;
}

/* 同意チェックボックス */
#contact > #container .ct-form__foot .wpcf7-acceptance label{
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #4C4948;
    cursor: pointer;
}
#contact > #container .ct-form__foot input[type="checkbox"]{
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: #007148;
    flex-shrink: 0;
}
#contact > #container .ct-form__foot .wpcf7-acceptance a{
    color: #007148;
    text-decoration: underline;
}

/* バリデーション・送信結果表示 */
#contact > #container .wpcf7-not-valid-tip{
    display: block;
    color: #e02b2b;
    font-size: 12px;
    margin-top: 4px;
}
#contact > #container .wpcf7-response-output{
    margin: 20px 0 0;
    padding: 12px 16px;
    border: 1px solid #ccc;
    font-size: 14px;
    color: #4C4948;
}
#contact > #container form.wpcf7-form.invalid .wpcf7-response-output{
    border-color: #e02b2b;
    color: #e02b2b;
}
#contact > #container form.wpcf7-form.sent .wpcf7-response-output{
    border-color: #007148;
    color: #007148;
}

/* --- 入力内容確認モーダル --- */
#contact .ct-modal{
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 110px 20px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s linear 0s;
}
/* 表示アニメーション(ふわっと表示)。display:noneではなくopacity/visibilityで制御する */
#contact .ct-modal[aria-hidden="true"]{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
#contact .ct-modal__overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
}
#contact .ct-modal__panel{
    position: relative;
    background: #FFF;
    width: 100%;
    max-width: 640px;
    /* .ct-modal の上下padding(110px + 110px)を差し引いた高さに収める */
    max-height: calc(100vh - 220px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .25s ease, transform .25s ease;
}
#contact .ct-modal:not([aria-hidden="true"]) .ct-modal__panel{
    opacity: 1;
    transform: translateY(0);
}
#contact .ct-modal__close{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #4C4948;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color .15s ease, color .15s ease;
}
#contact .ct-modal__close:hover{
    background: #f2f2f2;
    color: #007148;
}
#contact .ct-modal__body{
    overflow-y: auto;
    min-height: 0;
    padding: 32px 32px 8px;
}
#contact .ct-modal__title{
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #4C4948;
    margin-bottom: 20px;
}
/* /assets/css/cf7_extend.css の旧レガシールール(.form dl:nth-child(2){width:50%;float:right})が
   このdlをたまたま拾ってしまうため、明示的に打ち消す */
#contact .ct-modal__list{
    margin-bottom: 0;
    float: none !important;
    width: auto !important;
}
#contact .ct-modal__list dt{
    clear: none !important;
    width: auto !important;
    padding: 0 !important;
    font-size: 12px;
    font-weight: 700;
    color: #007148;
    margin-top: 14px;
}
#contact .ct-modal__list dt:first-child{ margin-top: 0; }
#contact .ct-modal__list dd{
    font-size: 14px;
    line-height: 1.6;
    color: #4C4948;
    margin: 4px 0 0;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
    overflow-wrap: break-word;
    word-break: break-all;
}
/* 注記とボタンは画面下部に固定し、本文(.ct-modal__body)だけがスクロールする */
#contact .ct-modal__footer{
    position: relative;
    flex-shrink: 0;
    padding: 20px 32px 32px;
    background: #FFF;
    box-shadow: 0 -6px 10px -6px rgba(0,0,0,.15);
}
#contact .ct-modal__note{
    font-size: 13px;
    color: #4C4948;
    margin-bottom: 20px;
}
#contact .ct-modal__actions{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
/* 「送信する」を主アクションとして大きく、「内容を修正する」は控えめに小さく
   (#contact > #container .ct-btn / .ct-submit という既存ルールより詳細度を上げて上書きする) */
#contact > #container .ct-modal__actions .ct-btn--outline{
    min-width: 140px;
    padding: 12px 20px;
    font-size: 13px;
    order: 1;
}
#contact > #container .ct-modal__actions .ct-submit{
    min-width: 260px;
    order: 2;
}
body.ct-modal-open{ overflow: hidden; }
@media only screen and (max-width:600px){
    #contact .ct-modal{ padding: 0; align-items: flex-end; }
    #contact .ct-modal__panel{ max-height: 92vh; }
    #contact .ct-modal__body{ padding: 24px 20px 8px; }
    #contact .ct-modal__footer{ padding: 16px 20px 20px; }
    #contact .ct-modal__actions{ flex-direction: column-reverse; }
    #contact .ct-modal__actions .ct-btn--outline,
    #contact .ct-modal__actions .ct-submit{ width: 100%; min-width: 0; }
}