/* ============================================================
 * CENTERLIGHT contact page  v5.36.17
 * Author: Center Light LLC
 * テンプレート未適用でもCF7フォーム本体に直接スタイルが当たる設計
 * ビジネス向けコーポレート品格(Atlassian/HubSpot水準)
 * ============================================================ */
:root{
    --clc-ink: #0a1228;
    --clc-navy: #1a2647;
    --clc-navy-hover: #0f1a35;
    --clc-accent: #1554d1;
    --clc-text: #2a3145;
    --clc-muted: #5a6478;
    --clc-line: #e1e6ee;
    --clc-line-strong: #c8d0dd;
    --clc-bg: #f7f8fa;
    --clc-bg-soft: #fafbfc;
    --clc-required: #c01e3e;
    --clc-success: #0e7f55;
}

/* ============================================================
 * テンプレート適用ページ用ラッパー(v5.36.17 フルワイド対応)
 * トップや会社概要と同じく画面全幅で表示
 * ============================================================ */
.cl-contact-page{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    color: var(--clc-text);
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt";
    background: linear-gradient(180deg, #fafbfd 0%, #f5f8fc 100%);
}

/* 内部セクションラッパー:左右余白で読みやすさ確保
 * (v5.36.17 ヒーロー部分は site.css の .cl-page-hero に統一) */
.cl-contact-grid,
.cl-contact-flow{
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
    box-sizing: border-box;
}

.cl-contact-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
    gap: 52px;
    margin-bottom: 100px;
    margin-top: 16px;
    align-items: start;
}

.cl-contact-section-title{
    color: var(--clc-ink);
    font-size: 20px;
    margin: 0 0 12px;
    font-weight: 700;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--clc-ink);
}
.cl-contact-section-note{
    color: var(--clc-muted);
    font-size: 13.5px;
    margin: 0 0 32px;
    line-height: 1.85;
}
.cl-required-mark{
    color: var(--clc-required);
    font-weight: 700;
}

/* ============================================================
 * CF7フォーム本体(テンプレ有無を問わず効く)
 * .wpcf7-form は CF7が必ず付与するクラス。これに直接スタイル。
 * .cl-contact-form は念のため併記
 * ============================================================ */
.cl-contact-form,
.cl-contact-page .wpcf7,
.cl-contact-page .wpcf7-form,
body.cl-contact-page .wpcf7,
body.cl-contact-page .wpcf7-form,
body.cl-has-cf7 .wpcf7,
body.cl-has-cf7 .wpcf7-form{
    background: #fff;
    border: 1px solid var(--clc-line);
    border-radius: 12px;
    padding: 52px 48px;
    box-shadow: 0 2px 8px rgba(10, 18, 40, 0.04);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* 入れ子(.cl-contact-form 内の .wpcf7 / .wpcf7-form)は無装飾に
 * これで「白カードが3重」に見える問題を解消(v5.36.17) */
.cl-contact-form .wpcf7,
.cl-contact-form .wpcf7-form,
body.cl-contact-page .cl-contact-form .wpcf7,
body.cl-contact-page .cl-contact-form .wpcf7-form{
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* ラベル(.cl-form-row label / フォーム内全label):ピル状のタグデザイン v5.36.17 */

/* フォーム内段落間隔 */
.cl-contact-form p,
.cl-contact-form .cl-form-row,
.cl-contact-page .wpcf7-form p,
.cl-contact-page .wpcf7-form .cl-form-row,
body.cl-contact-page .wpcf7-form p,
body.cl-contact-page .wpcf7-form .cl-form-row,
body.cl-has-cf7 .wpcf7-form p,
body.cl-has-cf7 .wpcf7-form .cl-form-row{
    margin: 0 0 22px;
    position: relative;
}

.cl-contact-form label,
.cl-contact-page .wpcf7-form label,
body.cl-contact-page .wpcf7-form label,
body.cl-has-cf7 .wpcf7-form label{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #eef2f8 !important;
    color: var(--clc-ink) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .02em !important;
    padding: 7px 16px !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 999px !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CF7のwrap内のlabelが上記対象外になるケース対応:CF7自動ラベルは別 */
body.cl-has-cf7 .wpcf7-form .wpcf7-form-control-wrap label,
body.cl-has-cf7 .wpcf7-form .wpcf7-checkbox label,
body.cl-has-cf7 .wpcf7-form .wpcf7-radio label,
body.cl-has-cf7 .wpcf7-form .wpcf7-acceptance label{
    display: inline-flex !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    font-size: 14.5px !important;
    color: var(--clc-text) !important;
}

/* ラベル内のrequiredマーク:赤バッジ化 */
.cl-contact-form label .required,
.cl-contact-form label .req,
.cl-contact-page .wpcf7-form label .required,
.cl-contact-page .wpcf7-form label .req,
body.cl-has-cf7 .wpcf7-form label .required,
body.cl-has-cf7 .wpcf7-form label .req{
    display: inline-block !important;
    background: var(--clc-required) !important;
    color: #fff !important;
    margin-left: 0 !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    line-height: 1.4 !important;
    text-indent: 0 !important;
    min-width: 36px;
    text-align: center;
}
/* requiredマークの「*」を「必須」に置換(視覚的に分かりやすく) */
.cl-contact-form label .required,
.cl-contact-page .wpcf7-form label .required,
body.cl-has-cf7 .wpcf7-form label .required{
    font-size: 0 !important;
}
.cl-contact-form label .required::after,
.cl-contact-page .wpcf7-form label .required::after,
body.cl-has-cf7 .wpcf7-form label .required::after{
    content: "必須";
    font-size: 10.5px !important;
    color: #fff;
    font-weight: 700;
    letter-spacing: .08em;
}

/* ============================================================
 * 入力欄(CF7のformタグ内すべてに適用)
 * ============================================================ */
.cl-contact-form input[type="text"],
.cl-contact-form input[type="email"],
.cl-contact-form input[type="tel"],
.cl-contact-form input[type="url"],
.cl-contact-form input[type="number"],
.cl-contact-form input[type="date"],
.cl-contact-form select,
.cl-contact-form textarea,
.cl-contact-page .wpcf7-form input[type="text"],
.cl-contact-page .wpcf7-form input[type="email"],
.cl-contact-page .wpcf7-form input[type="tel"],
.cl-contact-page .wpcf7-form input[type="url"],
.cl-contact-page .wpcf7-form input[type="number"],
.cl-contact-page .wpcf7-form input[type="date"],
.cl-contact-page .wpcf7-form select,
.cl-contact-page .wpcf7-form textarea,
body.cl-contact-page .wpcf7-form input[type="text"],
body.cl-contact-page .wpcf7-form input[type="email"],
body.cl-contact-page .wpcf7-form input[type="tel"],
body.cl-contact-page .wpcf7-form input[type="url"],
body.cl-contact-page .wpcf7-form input[type="number"],
body.cl-contact-page .wpcf7-form input[type="date"],
body.cl-contact-page .wpcf7-form select,
body.cl-contact-page .wpcf7-form textarea,
body.cl-has-cf7 .wpcf7-form input[type="text"],
body.cl-has-cf7 .wpcf7-form input[type="email"],
body.cl-has-cf7 .wpcf7-form input[type="tel"],
body.cl-has-cf7 .wpcf7-form input[type="url"],
body.cl-has-cf7 .wpcf7-form input[type="number"],
body.cl-has-cf7 .wpcf7-form input[type="date"],
body.cl-has-cf7 .wpcf7-form select,
body.cl-has-cf7 .wpcf7-form textarea{
    width: 100%;
    padding: 13px 16px !important;
    background: #fff !important;
    border: 1px solid var(--clc-line-strong) !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    color: var(--clc-text) !important;
    box-sizing: border-box !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
    font-family: inherit !important;
    line-height: 1.65 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-height: 48px;
}

/* hover */
.cl-contact-form input:hover,
.cl-contact-form select:hover,
.cl-contact-form textarea:hover,
.cl-contact-page .wpcf7-form input:hover,
.cl-contact-page .wpcf7-form select:hover,
.cl-contact-page .wpcf7-form textarea:hover,
body.cl-has-cf7 .wpcf7-form input:hover,
body.cl-has-cf7 .wpcf7-form select:hover,
body.cl-has-cf7 .wpcf7-form textarea:hover{
    border-color: var(--clc-muted) !important;
}

/* focus */
.cl-contact-form input:focus,
.cl-contact-form select:focus,
.cl-contact-form textarea:focus,
.cl-contact-page .wpcf7-form input:focus,
.cl-contact-page .wpcf7-form select:focus,
.cl-contact-page .wpcf7-form textarea:focus,
body.cl-has-cf7 .wpcf7-form input:focus,
body.cl-has-cf7 .wpcf7-form select:focus,
body.cl-has-cf7 .wpcf7-form textarea:focus{
    outline: none !important;
    border-color: var(--clc-accent) !important;
    box-shadow: 0 0 0 3px rgba(21, 84, 209, 0.12) !important;
}

/* placeholder */
.cl-contact-form input::placeholder,
.cl-contact-form textarea::placeholder,
.cl-contact-page .wpcf7-form input::placeholder,
.cl-contact-page .wpcf7-form textarea::placeholder,
body.cl-has-cf7 .wpcf7-form input::placeholder,
body.cl-has-cf7 .wpcf7-form textarea::placeholder{
    color: #98a2b3 !important;
    font-weight: 400;
}

/* textarea */
.cl-contact-form textarea,
.cl-contact-page .wpcf7-form textarea,
body.cl-has-cf7 .wpcf7-form textarea{
    min-height: 180px !important;
    resize: vertical !important;
    line-height: 1.85 !important;
}

/* select */
.cl-contact-form select,
.cl-contact-page .wpcf7-form select,
body.cl-has-cf7 .wpcf7-form select{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231a2647' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    padding-right: 44px !important;
    cursor: pointer !important;
}

/* チェックボックス・ラジオ */
.cl-contact-page .wpcf7-checkbox label,
.cl-contact-page .wpcf7-radio label,
.cl-contact-page .wpcf7-acceptance label,
body.cl-has-cf7 .wpcf7-checkbox label,
body.cl-has-cf7 .wpcf7-radio label,
body.cl-has-cf7 .wpcf7-acceptance label{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 4px 18px 4px 0 !important;
    font-weight: 500 !important;
    color: var(--clc-text) !important;
    cursor: pointer !important;
    font-size: 14.5px !important;
}
.cl-contact-page .wpcf7-form input[type="checkbox"],
.cl-contact-page .wpcf7-form input[type="radio"],
body.cl-has-cf7 .wpcf7-form input[type="checkbox"],
body.cl-has-cf7 .wpcf7-form input[type="radio"]{
    width: 18px !important;
    height: 18px !important;
    min-height: auto !important;
    accent-color: var(--clc-accent) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* プライバシーポリシー同意ブロック */
.cl-policy-agree,
body.cl-has-cf7 .cl-policy-agree{
    background: var(--clc-bg-soft);
    border: 1px solid var(--clc-line);
    border-radius: 6px;
    padding: 18px 22px;
    margin-top: 28px !important;
    margin-bottom: 28px !important;
}
.cl-policy-agree a{
    color: var(--clc-accent) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.cl-policy-agree a:hover{
    text-decoration: none;
}

/* honeypot 非表示 */
.cl-honeypot,
.cl-honeypot input,
body.cl-has-cf7 .cl-honeypot,
body.cl-has-cf7 .cl-honeypot input{
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
 * 送信ボタン:濃紺・角丸4px・ビジネス品格
 * ============================================================ */
.cl-contact-form input[type="submit"],
.cl-contact-form button[type="submit"],
.cl-contact-form .wpcf7-submit,
.cl-contact-page input[type="submit"].wpcf7-submit,
.cl-contact-page .wpcf7-form input[type="submit"],
.cl-contact-page .wpcf7-form button[type="submit"],
.cl-contact-page .wpcf7-form .wpcf7-submit,
body.cl-contact-page .wpcf7-form input[type="submit"],
body.cl-contact-page .wpcf7-form .wpcf7-submit,
body.cl-has-cf7 .wpcf7-form input[type="submit"],
body.cl-has-cf7 .wpcf7-form button[type="submit"],
body.cl-has-cf7 .wpcf7-form .wpcf7-submit{
    display: inline-block !important;
    min-width: 280px !important;
    width: auto !important;
    padding: 16px 48px !important;
    background: var(--clc-ink) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
    box-shadow: 0 1px 2px rgba(10, 18, 40, 0.20) !important;
    margin-top: 8px !important;
    line-height: 1.3 !important;
    min-height: auto !important;
}
.cl-contact-form input[type="submit"]:hover,
.cl-contact-form .wpcf7-submit:hover,
.cl-contact-page .wpcf7-form input[type="submit"]:hover,
.cl-contact-page .wpcf7-form .wpcf7-submit:hover,
body.cl-has-cf7 .wpcf7-form input[type="submit"]:hover,
body.cl-has-cf7 .wpcf7-form .wpcf7-submit:hover{
    background: var(--clc-navy-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(10, 18, 40, 0.18) !important;
}
.cl-contact-form input[type="submit"]:active,
body.cl-has-cf7 .wpcf7-form input[type="submit"]:active,
body.cl-has-cf7 .wpcf7-form .wpcf7-submit:active{
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(10, 18, 40, 0.20) !important;
}
.cl-contact-form input[type="submit"]:disabled,
body.cl-has-cf7 .wpcf7-form input[type="submit"]:disabled,
body.cl-has-cf7 .wpcf7-form .wpcf7-submit:disabled{
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* 送信ボタンのラッパー */
.cl-contact-form .cl-submit-wrap,
.cl-contact-form p:has(input[type="submit"]),
.cl-contact-form p:has(.wpcf7-submit),
.cl-contact-page .wpcf7-form .cl-submit-wrap,
.cl-contact-page .wpcf7-form p:has(input[type="submit"]),
.cl-contact-page .wpcf7-form p:has(.wpcf7-submit),
body.cl-has-cf7 .wpcf7-form .cl-submit-wrap,
body.cl-has-cf7 .wpcf7-form p:has(input[type="submit"]),
body.cl-has-cf7 .wpcf7-form p:has(.wpcf7-submit){
    text-align: center !important;
    margin-top: 32px !important;
    margin-bottom: 0 !important;
}

/* CF7 メッセージ系 */
.cl-contact-page .wpcf7-response-output,
body.cl-has-cf7 .wpcf7-response-output{
    margin: 24px 0 0 !important;
    padding: 14px 18px !important;
    border-radius: 6px !important;
    border: 1px solid var(--clc-line) !important;
    font-size: 14.5px !important;
    line-height: 1.8 !important;
    background: var(--clc-bg-soft) !important;
}
.cl-contact-page form.sent .wpcf7-response-output,
body.cl-has-cf7 form.sent .wpcf7-response-output{
    border-color: var(--clc-success) !important;
    background: rgba(14, 127, 85, 0.06) !important;
    color: #064e3b !important;
}
.cl-contact-page form.failed .wpcf7-response-output,
.cl-contact-page form.invalid .wpcf7-response-output,
body.cl-has-cf7 form.failed .wpcf7-response-output,
body.cl-has-cf7 form.invalid .wpcf7-response-output{
    border-color: var(--clc-required) !important;
    background: rgba(192, 30, 62, 0.05) !important;
    color: #781327 !important;
}
.cl-contact-page .wpcf7-not-valid-tip,
body.cl-has-cf7 .wpcf7-not-valid-tip{
    color: var(--clc-required) !important;
    font-size: 12.5px !important;
    margin-top: 6px !important;
    display: block !important;
    font-weight: 600 !important;
}
.cl-contact-page input.wpcf7-not-valid,
.cl-contact-page select.wpcf7-not-valid,
.cl-contact-page textarea.wpcf7-not-valid,
body.cl-has-cf7 input.wpcf7-not-valid,
body.cl-has-cf7 select.wpcf7-not-valid,
body.cl-has-cf7 textarea.wpcf7-not-valid{
    border-color: var(--clc-required) !important;
    background: rgba(192, 30, 62, 0.03) !important;
}
.cl-contact-page .wpcf7-spinner,
body.cl-has-cf7 .wpcf7-spinner{
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 14px !important;
}

/* ============================================================
 * SWELLの記事タイトルブロック・トップエリアの装飾無効化(contact時)
 * グラデーション背景が「お問い合せ」の上に出てしまう問題を抑制
 * ============================================================ */
body.cl-contact-page .p-pageTitle,
body.cl-contact-page .c-pageTitle{
    background: none !important;
}

/* ============================================================
 * サイドバー(連絡先カード)テンプレ適用時のみ
 * ============================================================ */
.cl-contact-aside{
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 100px;
}
.cl-contact-card{
    background: #fff;
    border: 1px solid var(--clc-line);
    border-radius: 8px;
    padding: 28px 26px;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 1px 3px rgba(10, 18, 40, 0.04);
}
.cl-contact-card:hover{
    border-color: var(--clc-line-strong);
    box-shadow: 0 4px 12px rgba(10, 18, 40, 0.06);
}
.cl-contact-card-kicker{
    display: inline-block;
    color: var(--clc-accent);
    font-size: 11px;
    letter-spacing: .28em;
    font-weight: 700;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.cl-contact-card-title{
    color: var(--clc-ink);
    font-size: 16px;
    margin: 0 0 18px;
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--clc-line);
}
.cl-contact-card-tel a{
    color: var(--clc-ink);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .025em;
    text-decoration: none;
    line-height: 1.2;
    margin: 0 0 6px;
    display: block;
    transition: color .2s ease;
}
.cl-contact-card-tel a:hover{ color: var(--clc-accent); }
.cl-contact-card-mail a{
    color: var(--clc-accent);
    font-size: 14.5px;
    word-break: break-all;
    text-decoration: none;
    line-height: 1.5;
    display: block;
    margin: 0 0 8px;
    font-weight: 600;
}
.cl-contact-card-mail a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.cl-contact-card-note{
    color: var(--clc-muted);
    font-size: 13px;
    margin: 0;
    line-height: 1.85;
}
.cl-contact-card-link{ margin: 14px 0 0; font-size: 13px; }
.cl-contact-card-link a{
    color: var(--clc-accent);
    text-decoration: none;
    font-weight: 600;
}
.cl-contact-card-link a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.cl-contact-card-policy{ background: var(--clc-bg-soft); }

/* ============================================================
 * お問い合わせ後の流れ
 * ============================================================ */
.cl-contact-flow{
    margin-top: 96px;
    padding-top: 64px;
    padding-bottom: 120px;
    border-top: 1px solid var(--clc-line);
}
.cl-contact-flow-title{
    text-align: center;
    margin: 0 auto 56px;
    font-size: 28px;
    color: var(--clc-ink);
    font-weight: 800;
    border-bottom: none;
    padding-bottom: 0;
    letter-spacing: -.005em;
}
.cl-contact-flow-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.cl-contact-flow-list li{
    background: #fff;
    border: 1px solid var(--clc-line);
    border-radius: 8px;
    padding: 30px 26px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    box-shadow: 0 1px 3px rgba(10, 18, 40, 0.04);
}
.cl-contact-flow-list li:hover{
    border-color: var(--clc-line-strong);
    box-shadow: 0 6px 16px rgba(10, 18, 40, 0.06);
    transform: translateY(-2px);
}
.cl-contact-flow-step{
    display: inline-block;
    color: var(--clc-accent);
    font-size: 11.5px;
    letter-spacing: .25em;
    font-weight: 700;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--clc-accent);
    padding-bottom: 4px;
}
.cl-contact-flow-list h3{
    color: var(--clc-ink);
    font-size: 16.5px;
    margin: 0 0 12px;
    font-weight: 700;
    line-height: 1.5;
}
.cl-contact-flow-list p{
    color: var(--clc-muted);
    font-size: 13.5px;
    margin: 0;
    line-height: 1.9;
}

/* ============================================================
 * レスポンシブ(フルワイド対応 v5.36.17)
 * ============================================================ */
@media (max-width: 1280px){
    .cl-contact-grid{ gap: 36px; }
    .cl-contact-form,
    body.cl-has-cf7 .wpcf7-form{ padding: 44px 40px !important; }
}
@media (max-width: 1024px){
    .cl-contact-grid{ gap: 28px; }
    .cl-contact-form,
    body.cl-has-cf7 .wpcf7-form{ padding: 40px 32px !important; }
}
@media (max-width: 960px){
    .cl-contact-head{ padding-top: 56px; padding-bottom: 44px; margin-bottom: 48px; }
    .cl-contact-grid{ grid-template-columns: 1fr; gap: 28px; margin-bottom: 80px; }
    .cl-contact-aside{ position: static; }
    .cl-contact-form,
    body.cl-has-cf7 .wpcf7-form{ padding: 36px 28px !important; }
    .cl-contact-flow-list{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .cl-contact-flow{ margin-top: 64px; padding-top: 48px; padding-bottom: 80px; }
}
@media (max-width: 640px){
    .cl-contact-head{ padding-top: 40px; padding-bottom: 32px; margin-bottom: 36px; }
    .cl-contact-kicker{ font-size: 12px; letter-spacing: .3em; }
    .cl-contact-title{ font-size: clamp(24px, 7vw, 32px); }
    .cl-contact-lead{ font-size: 14.5px; }
    .cl-contact-section-title{ font-size: 18px; }
    .cl-contact-form,
    body.cl-has-cf7 .wpcf7-form{ padding: 28px 20px !important; border-radius: 10px !important; }
    .cl-contact-form input[type="text"],
    .cl-contact-form input[type="email"],
    .cl-contact-form input[type="tel"],
    .cl-contact-form select,
    .cl-contact-form textarea,
    body.cl-has-cf7 .wpcf7-form input[type="text"],
    body.cl-has-cf7 .wpcf7-form input[type="email"],
    body.cl-has-cf7 .wpcf7-form input[type="tel"],
    body.cl-has-cf7 .wpcf7-form select,
    body.cl-has-cf7 .wpcf7-form textarea{
        padding: 12px 14px !important;
        font-size: 14.5px !important;
    }
    .cl-contact-form input[type="submit"],
    .cl-contact-form .wpcf7-submit,
    body.cl-has-cf7 .wpcf7-form input[type="submit"],
    body.cl-has-cf7 .wpcf7-form .wpcf7-submit{
        width: 100% !important;
        min-width: auto !important;
        padding: 16px 24px !important;
        font-size: 14.5px !important;
    }
    .cl-policy-agree{ padding: 16px 18px; }
    .cl-contact-flow-list{ grid-template-columns: 1fr; }
    .cl-contact-flow-list li{ padding: 24px 20px; }
    .cl-contact-flow{ padding-bottom: 60px; }
    .cl-contact-card{ padding: 22px 20px; }
    .cl-contact-card-tel a{ font-size: 20px; }
}

/* ============================================================
 * 横スクロール完全防止(v5.36.17 ヘッダー保護版)
 * body 要素への overflow / max-width を撤廃。main 要素のみに限定。
 * これでSWELLヘッダーのレイアウト・sticky動作に影響なし。
 * ============================================================ */
main.cl-contact-page,
.cl-contact-page{
    overflow-x: clip;
    max-width: 100%;
    box-sizing: border-box;
}
.cl-contact-page *,
body.cl-has-cf7 .wpcf7-form *{
    box-sizing: border-box;
}
/* max-width: 100% を「コンテナ系+入力系」に限定適用(ヒーロー破壊回避 v5.36.17) */
.cl-contact-page main,
.cl-contact-page section,
.cl-contact-page article,
.cl-contact-page aside,
.cl-contact-page header,
.cl-contact-page footer,
.cl-contact-page div,
.cl-contact-page form,
.cl-contact-page fieldset,
.cl-contact-page p,
.cl-contact-page input,
.cl-contact-page textarea,
.cl-contact-page select,
.cl-contact-page button,
.cl-contact-page table,
.cl-contact-page img,
.cl-contact-page picture,
body.cl-has-cf7 .wpcf7,
body.cl-has-cf7 .wpcf7-form,
body.cl-has-cf7 .wpcf7-form div,
body.cl-has-cf7 .wpcf7-form p,
body.cl-has-cf7 .wpcf7-form fieldset,
body.cl-has-cf7 .wpcf7-form input,
body.cl-has-cf7 .wpcf7-form textarea,
body.cl-has-cf7 .wpcf7-form select,
body.cl-has-cf7 .wpcf7-form button,
body.cl-has-cf7 .wpcf7-form table{
    max-width: 100%;
    min-width: 0;
}

/* Gridアイテムは min-width: auto がデフォルトのため、明示的に 0 を指定して
 * 子要素が画面幅を突き抜けるのを防ぐ */
.cl-contact-grid > *,
.cl-contact-flow-list > *{
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
}

/* フォーム自体のはみ出し対策 */
.cl-contact-form,
body.cl-has-cf7 .wpcf7,
body.cl-has-cf7 .wpcf7-form{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 入力欄の絶対的な幅制御 */
.cl-contact-form input[type="text"],
.cl-contact-form input[type="email"],
.cl-contact-form input[type="tel"],
.cl-contact-form input[type="url"],
.cl-contact-form input[type="number"],
.cl-contact-form input[type="date"],
.cl-contact-form select,
.cl-contact-form textarea,
body.cl-has-cf7 .wpcf7-form input[type="text"],
body.cl-has-cf7 .wpcf7-form input[type="email"],
body.cl-has-cf7 .wpcf7-form input[type="tel"],
body.cl-has-cf7 .wpcf7-form input[type="url"],
body.cl-has-cf7 .wpcf7-form input[type="number"],
body.cl-has-cf7 .wpcf7-form input[type="date"],
body.cl-has-cf7 .wpcf7-form select,
body.cl-has-cf7 .wpcf7-form textarea{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* ラベルピル:横並び維持(v5.36.17) flex-wrapで縦になる問題を解消 */
.cl-contact-form label,
body.cl-has-cf7 .wpcf7-form label{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* CF7のテーブル等が出る場合の防止 */
body.cl-has-cf7 .wpcf7-form table{
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}
body.cl-has-cf7 .wpcf7-form td,
body.cl-has-cf7 .wpcf7-form th{
    word-break: break-word;
}

/* 装飾オーブが画面幅をはみ出さないように */
.cl-page-hero,
.cl-contact-head{
    overflow: hidden !important;
}

/* スマホ専用追加対策 */
@media (max-width: 768px){
    main.cl-contact-page{
        overflow-x: clip !important;
    }
    /* グリッドのギャップで横はみ出る場合の対策 */
    .cl-contact-grid{
        gap: 24px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* セクションタイトル下線が長すぎる場合 */
    .cl-contact-section-title{
        max-width: 100%;
        overflow: hidden;
    }
    /* プライバシーポリシー同意の長文折り返し */
    .cl-policy-agree,
    .cl-policy-agree label,
    body.cl-has-cf7 .wpcf7-acceptance label{
        max-width: 100% !important;
        flex-wrap: wrap !important;
        word-break: break-word;
        white-space: normal !important;
    }
    /* CF7のresponse outputが幅オーバーしないように */
    body.cl-has-cf7 .wpcf7-response-output,
    body.cl-has-cf7 .wpcf7-not-valid-tip{
        max-width: 100% !important;
        word-break: break-word;
    }
    /* セレクトボックスの矢印スペース調整 */
    .cl-contact-form select,
    body.cl-has-cf7 .wpcf7-form select{
        padding-right: 36px !important;
        background-position: right 12px center !important;
    }
}

/* 極小スマホ(380px以下)対応 */
@media (max-width: 380px){
    .cl-contact-grid{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .cl-contact-form,
    body.cl-has-cf7 .wpcf7-form{
        padding: 22px 16px !important;
    }
    .cl-contact-form input,
    .cl-contact-form select,
    .cl-contact-form textarea,
    body.cl-has-cf7 .wpcf7-form input,
    body.cl-has-cf7 .wpcf7-form select,
    body.cl-has-cf7 .wpcf7-form textarea{
        padding: 11px 12px !important;
        font-size: 14px !important;
    }
    .cl-contact-form label,
    body.cl-has-cf7 .wpcf7-form label{
        padding: 6px 12px !important;
        font-size: 12.5px !important;
    }
}

/* ============================================================
 * v5.36.17 突き抜け対策:main要素のみに限定(bodyには適用しない)
 * これによりヘッダー・フッターのレイアウトを破壊しない
 * ============================================================ */
main.cl-contact-page,
.cl-contact-page{
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* グリッド本体:画面はみ出し禁止 */
.cl-contact-grid{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* グリッド子要素(.cl-contact-formwrap / .cl-contact-aside)の絶対制御 */
.cl-contact-formwrap,
.cl-contact-aside{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}

/* フォーム本体:絶対に画面内 */
.cl-contact-form,
body.cl-has-cf7 .wpcf7,
body.cl-has-cf7 .wpcf7-form{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* セクションタイトルの下線も画面内 */
.cl-contact-section-title,
.cl-contact-section-note{
    max-width: 100% !important;
    box-sizing: border-box;
    word-break: break-word;
}

/* CF7のラッパー(.wpcf7-form-control-wrap)も */
body.cl-has-cf7 .wpcf7-form-control-wrap{
    width: 100%;
    max-width: 100%;
    display: block;
    min-width: 0;
}

/* ラベルピル:長文で折り返し+幅制限 */
.cl-contact-form label,
body.cl-has-cf7 .wpcf7-form label{
    max-width: 100% !important;
    box-sizing: border-box;
}

/* スマホ追補:グリッド左右padding確実に */
@media (max-width: 768px){
    .cl-contact-grid{
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 24px !important;
    }
    .cl-contact-flow{
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* フォーム外枠カードの内側パディングを縮めて窮屈解消 */
    .cl-contact-form,
    body.cl-has-cf7 .wpcf7,
    body.cl-has-cf7 .wpcf7-form{
        padding: 28px 18px !important;
    }
}

@media (max-width: 480px){
    .cl-contact-grid,
    .cl-contact-flow{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .cl-contact-form,
    body.cl-has-cf7 .wpcf7,
    body.cl-has-cf7 .wpcf7-form{
        padding: 24px 14px !important;
        border-radius: 10px !important;
    }
}

/* ============================================================
 * v5.36.17 レスポンシブフォーム見た目改善
 * ピル状ラベル横並び維持+フォーム外周の余白縮小+カード化解除
 * ============================================================ */
@media (max-width: 768px){
    /* ラベルピル:横並び固定(必須バッジを含めて1行) */
    .cl-contact-form label,
    body.cl-has-cf7 .wpcf7-form label{
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        max-width: 100% !important;
        font-size: 12.5px !important;
        padding: 6px 14px !important;
        line-height: 1.4 !important;
    }
    /* 必須バッジを少し小さく */
    body.cl-has-cf7 .wpcf7-form label .required{
        padding: 1px 7px !important;
        min-width: 32px !important;
    }
    body.cl-has-cf7 .wpcf7-form label .required::after{
        font-size: 9.5px !important;
    }
    /* フォーム外周のカード入れ子を解消(深いネスト感を消す) */
    .cl-contact-form,
    body.cl-has-cf7 .wpcf7,
    body.cl-has-cf7 .wpcf7-form{
        padding: 20px 14px !important;
        border-radius: 10px !important;
        border: 1px solid var(--clc-line) !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(10,18,40,.04) !important;
    }
    /* CF7のp要素のmarginを縮小 */
    body.cl-has-cf7 .wpcf7-form p,
    body.cl-has-cf7 .wpcf7-form .cl-form-row{
        margin: 0 0 18px !important;
    }
    /* 入力欄をコンパクトに */
    body.cl-has-cf7 .wpcf7-form input[type="text"],
    body.cl-has-cf7 .wpcf7-form input[type="email"],
    body.cl-has-cf7 .wpcf7-form input[type="tel"],
    body.cl-has-cf7 .wpcf7-form select,
    body.cl-has-cf7 .wpcf7-form textarea{
        padding: 11px 14px !important;
        font-size: 14.5px !important;
        border-radius: 6px !important;
        border-width: 1px !important;
    }
    /* テキストエリア最小高さも縮小 */
    body.cl-has-cf7 .wpcf7-form textarea{
        min-height: 140px !important;
    }
    /* プライバシー同意ブロックの余白 */
    .cl-policy-agree{
        padding: 14px 16px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        border-radius: 8px !important;
        font-size: 13.5px !important;
    }
    /* プライバシーポリシー同意ラベル(チェックボックス付き)は折り返し許可 */
    body.cl-has-cf7 .wpcf7-acceptance label{
        flex-wrap: wrap !important;
        white-space: normal !important;
        font-size: 13px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
    /* 通常の項目ラベルピルは横並びキープ、縮小フィット */
    .cl-contact-form label,
    body.cl-has-cf7 .wpcf7-form label{
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        padding: 6px 14px !important;
        font-size: 12.5px !important;
    }
    /* 送信ボタン:画面全幅+押しやすい高さ */
    body.cl-has-cf7 .wpcf7-form input[type="submit"],
    body.cl-has-cf7 .wpcf7-form .wpcf7-submit{
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px 24px !important;
        font-size: 15px !important;
        letter-spacing: .1em !important;
        margin-top: 8px !important;
    }
}
@media (max-width: 480px){
    .cl-contact-form,
    body.cl-has-cf7 .wpcf7,
    body.cl-has-cf7 .wpcf7-form{
        padding: 18px 12px !important;
    }
    .cl-contact-form label,
    body.cl-has-cf7 .wpcf7-form label{
        font-size: 12px !important;
        padding: 5px 12px !important;
        gap: 6px !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }
    /* 極小スマホでは必須バッジも縮小 */
    .cl-contact-form label .required,
    body.cl-has-cf7 .wpcf7-form label .required{
        padding: 1px 7px !important;
        min-width: 32px !important;
        font-size: 0 !important;
    }
    .cl-contact-form label .required::after,
    body.cl-has-cf7 .wpcf7-form label .required::after{
        font-size: 9.5px !important;
    }
    body.cl-has-cf7 .wpcf7-form input[type="text"],
    body.cl-has-cf7 .wpcf7-form input[type="email"],
    body.cl-has-cf7 .wpcf7-form input[type="tel"],
    body.cl-has-cf7 .wpcf7-form select,
    body.cl-has-cf7 .wpcf7-form textarea{
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}