/*
Theme Name: mtkanko2026
Theme URI: 
Author: bcool
Author URI: 
Description: エムティ管工様向け専用テーマ
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: unibiz
Text Domain: mtkanko2026
Tags: 
*/



/* ============================================================
   Contact Form 7 Custom Styles
============================================================ */


/* フォーム全体の基本設定 */
.cf7-custom-form input[type="text"],
.cf7-custom-form input[type="email"],
.cf7-custom-form input[type="tel"],
.cf7-custom-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* 必須ラベルの装飾 */
.badge-danger {
    background: #e3342f;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
}

/* PCレイアウト：2ペイン */
@media (min-width: 768px) {
    .cf7-row {
        display: flex;
        margin-bottom: 20px;
        align-items: flex-start;
    }
    .cf7-label {
        flex: 0 0 25%; /* Bootstrapのcol-sm-3相当 */
        padding-top: 10px;
        font-weight: bold;
    }
    .cf7-content {
        flex: 0 0 75%; /* Bootstrapのcol-sm-9相当 */
    }
}

/* スマホレイアウト：縦並び */
@media (max-width: 767px) {
    .cf7-row {
        margin-bottom: 20px;
    }
    .cf7-label {
        margin-bottom: 8px;
        display: block;
        font-weight: bold;
    }
}

/* 住所グリッドの修正 */
.cf7-address-grid {
    display: grid;
    /* 1:1:2 の比率で分割（Bootstrapの col-3, col-3, col-6 に相当） */
    grid-template-columns: 1fr 1fr; 
    gap: 15px 10px; /* 縦の間隔を少し広めに */
    margin-top: 10px;
}

/* 郵便番号と都道府県を横並びに維持 */
.zip-field, .pref-field {
    grid-column: span 1;
}

/* 市区町村と番地以降を全幅に */
.addr-field, .strt-field {
    grid-column: span 2;
}

/* 入力欄が重ならないための重要設定 */
.cf7-custom-form input,
.cf7-custom-form textarea {
    box-sizing: border-box !important; /* パディングを幅に含める */
    width: 100% !important;           /* 親要素の幅に合わせる */
    max-width: 100% !important;       /* はみ出し防止 */
    display: block;                   /* インライン要素特有の隙間を消す */
}

/* ラベルの調整 */
.cf7-address-grid label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 5px;
    font-weight: normal;
}

/* 送信ボタン */
.cf7-submit-row {
    text-align: center;
    margin-top: 30px;
}
.custom-submit {
    background-color: var(--wp--preset--color--main, #000); /* テーマのメインカラーを参照 */
    color: #fff;
    padding: 15px 60px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
}
/* 1. フォーム内の自動挿入される余白（pタグ等）をリセット */
.cf7-custom-form p {
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. 各項目の行（cf7-row）の間隔を調整 */
.cf7-row {
    margin-bottom: 1.5rem !important; /* ここの数値で項目間の隙間を調整 */
}

/* 3. 住所グリッド内の重なりと隙間の修正 */
.cf7-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* 項目内のパーツ同士の隙間 */
    margin-top: 5px;
}

.cf7-address-grid label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 4px;
    margin-top: 8px; /* ラベルの上の隙間 */
}

/* 4. 郵便番号と都道府県を横並びに（幅を最適化） */
.zip-field, .pref-field {
    grid-column: span 1;
}
.addr-field, .strt-field {
    grid-column: span 2;
}

/* 5. 「自動入力されます」の注釈 */
.address-note {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px !important;
}

/* 6. 入力欄自体の高さを少し抑える（必要であれば） */
.cf7-custom-form input[type="text"],
.cf7-custom-form input[type="email"],
.cf7-custom-form input[type="tel"],
.cf7-custom-form textarea {
    padding: 8px 12px !important; /* 内側の余白を少し減らす */
}