/*
 * NVC テーマ：ブロックエディタ互換CSS
 * - WordPressが wp-block-group の中に挿入する余計なラッパー(wp-block-group__inner-container)
 *   を「透明化」して、外側のクラス(.greetingWrap 等)に対する既存CSSが本来の子要素に効くようにする
 * - wp-block-image が <figure><img></figure> を生むため、img 直接子前提のCSSを figure にも当てる
 */

/* ---- 0) 元CSSが <section> 要素指定の余白ルール（.lower .contents section）を
       wp-block-group で出力される <div> にも当てる ---- */
.lower .contents .wp-block-group.sectionBody,
.lower .contents .wp-block-group.news,
.lower .contents .wp-block-group.servicies,
.lower .contents .wp-block-group.process,
.lower .contents .wp-block-group.advantage {
    margin-top: 5.3em;
    margin-bottom: 8em;
    background-color: #FFF;
}

/* ---- 1) wp-block-group の inner-container を透明化（最重要） ---- */
.wp-block-group > .wp-block-group__inner-container {
    display: contents;
}

/* ---- 2) wp-block-group / wp-block-image のデフォルト無効化 ---- */
.wp-block-group { padding: 0; }
.wp-block-image { margin: 0; }
.wp-block-image > img { display: block; max-width: 100%; height: auto; }

/* ---- 3) 会社概要：代表あいさつ ---- */
/* greetingImg 内の figure を img 同等に扱う */
.lower .company .greetingImg .wp-block-image,
.lower .company .greetingImg figure {
    margin: 0;
    width: 100%;
}
.lower .company .greetingImg img {
    width: 100%;
    height: auto;
}
/* PCで横並び（保険：display:contents が効いていれば既存 .greetingWrap rules で十分） */
@media screen and (min-width: 1025px) {
    .lower .company .greetingWrap.wp-block-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---- 4) 会社概要：3枚の会社写真 ----
   元CSSは `.campanyImg img` を直接flex子要素として 32% にしていたが、
   ブロックエディタ版は `<figure><img></figure>` 構造のため figure を flex 子要素にする必要がある。
   元CSSの img:32% ルールが効くと「figure × img」で二重縮小するので、img は 100%(=figure内いっぱい) に強制。 */
.lower .company .campanyImg.wp-block-group {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2%;
    width: 100%;
}
.lower .company .campanyImg > .wp-block-image,
.lower .company .campanyImg > figure {
    flex: 0 0 48% !important;
    width: 48% !important;
    max-width: 48% !important;
    margin: 0 0 2% 0 !important;
    padding: 0;
}
.lower .company .campanyImg img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}
@media screen and (min-width: 640px) {
    .lower .company .campanyImg.wp-block-group {
        justify-content: space-between;
        gap: 0;
    }
    .lower .company .campanyImg > .wp-block-image,
    .lower .company .campanyImg > figure {
        flex: 0 0 32% !important;
        width: 32% !important;
        max-width: 32% !important;
        margin: 0 !important;
    }
}

/* ---- 5) サービス／FAQ／お問い合わせ：見出し・段落のブロック既定マージン補正 ---- */
.lower .contents h3.wp-block-heading { margin-top: 0; }
.lower .contents .wp-block-paragraph { margin-top: 0; }

/* HTMLブロックの周囲マージン */
.lower .service .serviceContet .wp-block-html { margin: 0; }

/* ---- 6) トップページ：advantage 内の画像（wp-block-image）の余白整理 ---- */
.index .advantageContent .wp-block-image,
.index .advantageContent figure { margin: 0; }

/* =================================================================
 * お客様の声（voice）アーカイブ／詳細ページ デザイン
 * ================================================================= */
.voice-wrap {
    max-width: 1080px;
    margin: 5.3em auto 8em;
    padding: 0 24px;
}

/* --- カードグリッド --- */
.voice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 640px) {
    .voice-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}
@media (min-width: 1025px) {
    .voice-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

.voice-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #ecebe6;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none !important;
    color: inherit !important;
}
.voice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(6, 73, 141, 0.12);
    opacity: 1 !important;
}

.voice-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #F5F4F0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.voice-thumb-placeholder {
    width: 60px;
    height: 60px;
    opacity: 0.35;
}

.voice-body {
    padding: 18px 22px 22px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.voice-date {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #E2AB17;
    font-weight: 500;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.voice-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #06498D;
    margin: 0 0 12px;
    line-height: 1.5;
}

.voice-excerpt {
    font-size: 14px;
    color: #586979;
    line-height: 1.75;
    margin: 0 0 16px;
    flex-grow: 1;
}

.voice-more {
    font-size: 13px;
    font-weight: 700;
    color: #3870A8;
    margin-top: auto;
    letter-spacing: 0.05em;
}
.voice-more::after {
    content: " ›";
    font-weight: 700;
}

/* --- 詳細ページ --- */
.voice-article {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ecebe6;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 32px 24px;
    max-width: 800px;
    margin: 0 auto;
}
@media (min-width: 1025px) {
    .voice-article { padding: 48px 56px; }
}

.voice-article-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #ecebe6; }
.voice-article-date {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #E2AB17;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.voice-article-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #06498D;
    margin: 0;
    line-height: 1.5;
}
@media (min-width: 640px) { .voice-article-title { font-size: 1.6rem; } }

.voice-article-thumb { margin: 0 0 28px; text-align: center; }
.voice-article-thumb img { max-width: 100%; height: auto; border-radius: 6px; }

.voice-article-body { font-size: 15px; line-height: 1.95; color: #4a5a6a; }
.voice-article-body p { margin: 0 0 1.2em; }

.voice-article-back {
    margin-top: 36px;
    text-align: center;
}
.voice-article-back a {
    display: inline-block;
    padding: 10px 32px;
    border: 1px solid #06498D;
    border-radius: 100px;
    color: #3870A8;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.voice-article-back a:hover {
    background: #3870A8;
    color: #fff;
    opacity: 1;
}

/* --- ページネーション（共通） --- */
.voice-wrap .nav-links {
    text-align: center;
    margin-top: 40px;
}
.voice-wrap .page-numbers {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 4px;
    border: 1px solid #ecebe6;
    border-radius: 4px;
    color: #3870A8;
    text-decoration: none;
    font-size: 14px;
}
.voice-wrap .page-numbers.current {
    background: #06498D;
    color: #fff;
    border-color: #06498D;
}

/* =================================================================
 * Snow Monkey Forms：旧 .formTable デザイン互換CSS
 * 元の contact/index.html + pages.css の .formTable 系スタイルを、
 * Snow Monkey Forms が出力する .smf-* クラス構造にマッピング
 * ================================================================= */

/* フォーム全体 */
.lower .contactLower .smf-form {
    width: 100%;
}

/* プログレストラッカー：表示するなら最小限の上付き間隔 */
.lower .contactLower .smf-progress-tracker {
    margin: 0 0 2em;
    padding: 0;
}

/* 各項目（旧 <tr> 相当） */
.lower .contactLower .smf-form .smf-item {
    border-bottom: 1px solid #D6D4C6;
    margin: 1.5em 0 0;
    padding-bottom: 1.5em;
    width: 100%;
    display: block;
}

/* ラベル列（旧 <th> 相当） */
.lower .contactLower .smf-form .smf-item__col--label {
    width: 100%;
    display: block;
    margin-bottom: 0.5em;
    padding: 0;
}
.lower .contactLower .smf-form .smf-item__label {
    margin: 0;
    padding: 0;
}
.lower .contactLower .smf-form .smf-item__label__text {
    letter-spacing: 0.15em;
    font-weight: bold;
}

/* 必須バッジ（line-height を 1 にして潰れないように修正） */
.lower .contactLower .smf-form .required {
    font-size: 80%;
    padding: 4px 8px;
    border-radius: 2px;
    background-color: #C72600;
    color: #ffffff;
    line-height: 1;
    font-weight: normal;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}

/* プログレストラッカー：標準のまま表示 */

/* 入力列（旧 <td> 相当） */
.lower .contactLower .smf-form .smf-item__col--controls {
    width: 100%;
    display: block;
    padding: 0;
}
.lower .contactLower .smf-form .smf-item__controls {
    padding: 0;
}

/* テキスト系入力 */
.lower .contactLower .smf-form .smf-text-control__control,
.lower .contactLower .smf-form .smf-email-control__control,
.lower .contactLower .smf-form .smf-tel-control__control,
.lower .contactLower .smf-form .smf-url-control__control,
.lower .contactLower .smf-form .smf-number-control__control,
.lower .contactLower .smf-form input[type="text"],
.lower .contactLower .smf-form input[type="email"],
.lower .contactLower .smf-form input[type="tel"],
.lower .contactLower .smf-form input[type="url"],
.lower .contactLower .smf-form input[type="number"] {
    border: 1px solid #D6D4C6;
    width: 100%;
    padding: 8px 12px;
    border-radius: 3px;
    margin: 0;
    letter-spacing: 0.08em;
    max-width: 100%;
    background-color: #fff;
    box-shadow: none;
}

/* テキストエリア */
.lower .contactLower .smf-form .smf-textarea-control__control,
.lower .contactLower .smf-form textarea {
    border: 1px solid #D6D4C6;
    width: 100%;
    padding: 8px 12px;
    border-radius: 3px;
    margin: 0;
    letter-spacing: 0.08em;
    max-width: 100%;
    background-color: #fff;
    box-shadow: none;
    min-height: 8em;
}

/* セレクト */
.lower .contactLower .smf-form select {
    border: 1px solid #D6D4C6;
    padding: 8px 12px;
    border-radius: 3px;
    background-color: #fff;
    max-width: 100%;
}

/* エラーメッセージ */
.lower .contactLower .smf-form .smf-error-messages,
.lower .contactLower .smf-form .smf-error-messages li {
    color: #C72600;
    font-weight: bold;
    margin: 0.5em 0 0;
    padding: 0;
    list-style: none;
}

/* 「住所」見出し（フォーム内の h3） */
.lower .contactLower .smf-form h3,
.lower .contactLower .smf-form .wp-block-heading {
    border-bottom: 1px solid #D6D4C6;
    padding-bottom: 0.5em;
    margin: 1.5em 0 0;
    font-size: 1.1em;
    color: #06498D;
}

/* アクションエリア：flex で確実に中央寄せ */
body .lower .contactLower .smf-form .smf-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 1.5em 0 !important;
    border: none !important;
    margin: 2em auto 0 !important;
    width: 100% !important;
    gap: 1em;
}
/* SMF が JS で挿入する内側ラッパー（.smf-action__buttons など）も中央寄せ flex */
body .lower .contactLower .smf-form .smf-action > *,
body .lower .contactLower .smf-form .smf-action > div,
body .lower .contactLower .smf-form .smf-action__buttons,
body .lower .contactLower .smf-form .smf-action [class*="smf-action__"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Snow Monkey Forms と同じセレクタで直接上書き（カスケード後勝ち + !important） */
.lower .contactLower .smf-action .smf-button-control__control {
    background-color: #06498D !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 1em !important;
    padding: 20px 40px !important;
    font-size: 1.15em !important;
    font-weight: normal !important;
    letter-spacing: 0.3em !important;
    text-indent: 0.5em !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
    transition: background-color 0.2s ease !important;
    float: none !important;
}
.lower .contactLower .smf-action .smf-button-control__control:hover {
    background-color: #3870A8 !important;
    background-image: none !important;
}
/* 戻るボタンは別スタイル */
.lower .contactLower .smf-action .smf-button-control__control[data-action="back"] {
    background-color: #FFF !important;
    color: rgba(88, 105, 121, 0.6) !important;
    border: 1px solid #D6D4C6 !important;
    font-size: 1em !important;
    padding: 16px 24px !important;
    width: 80% !important;
    text-indent: 0 !important;
    letter-spacing: 0.1em !important;
}
.lower .contactLower .smf-action .smf-button-control__control[data-action="back"]:hover {
    background-color: #f5f4f0 !important;
    color: #586979 !important;
}

/* 旧selector（保険として残す） */
body .lower .contactLower .smf-form .smf-action button,
body .lower .contactLower .smf-form .smf-action button[type="button"],
body .lower .contactLower .smf-form .smf-action button[type="submit"],
body .lower .contactLower .smf-form .smf-action input[type="button"],
body .lower .contactLower .smf-form .smf-action input[type="submit"],
body .lower .contactLower .smf-form .smf-action .smf-button-control__control,
body .lower .contactLower .smf-form .smf-button-control__control {
    display: block !important;
    font-size: 1.15em !important;
    font-weight: normal !important;
    background-color: #06498D !important;
    color: #ffffff !important;
    cursor: pointer !important;
    padding: 20px 40px !important;
    border-radius: 0 !important;
    border: none !important;
    letter-spacing: 0.3em !important;
    text-indent: 0.5em !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 1em !important;
    transition: background-color 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    float: none !important;
}
.lower .contactLower .smf-form .smf-action button:hover,
.lower .contactLower .smf-form .smf-button-control__control:hover {
    background-color: #3870A8 !important;
}

/* 戻るボタン */
.lower .contactLower .smf-form .smf-action button[data-action="back"],
.lower .contactLower .smf-form button[data-action="back"] {
    font-size: 1em !important;
    border: 1px solid #D6D4C6 !important;
    background-color: #FFF !important;
    color: rgba(88, 105, 121, 0.6) !important;
    padding: 16px 24px !important;
    width: 80% !important;
    text-indent: 0 !important;
    letter-spacing: 0.1em !important;
}
.lower .contactLower .smf-form .smf-action button[data-action="back"]:hover {
    background-color: #f5f4f0 !important;
    color: #586979 !important;
}

/* 郵便番号・都道府県は短めに（旧 .formS / .formM 相当） */
.lower .contactLower .smf-form .smf-placeholder[data-name="zip"] .smf-text-control__control,
.lower .contactLower .smf-form .smf-placeholder[data-name="pref"] .smf-text-control__control,
.lower .contactLower .smf-form input[name="zip"],
.lower .contactLower .smf-form input[name="pref"] {
    width: 80%;
    max-width: 20em;
}

/* 住所セクションの4項目：下罫線を除去して1グループに見せる */
.lower .contactLower .smf-form .smf-item:has(.smf-placeholder[data-name="zip"]),
.lower .contactLower .smf-form .smf-item:has(.smf-placeholder[data-name="pref"]),
.lower .contactLower .smf-form .smf-item:has(.smf-placeholder[data-name="city"]),
.lower .contactLower .smf-form .smf-item:has(.smf-placeholder[data-name="address"]) {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: 0.8em !important;
}

/* PCレイアウト：ラベル30%・入力70% 横並び */
@media screen and (min-width: 1025px) {
    .lower .contactLower .smf-form .smf-item {
        display: flex;
        align-items: center;
        margin-top: 0;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .lower .contactLower .smf-form .smf-item__col--label {
        width: 30%;
        margin-bottom: 0;
        padding-right: 16px;
    }
    .lower .contactLower .smf-form .smf-item__col--controls {
        width: 70%;
    }
    body .lower .contactLower .smf-form .smf-action button,
    body .lower .contactLower .smf-form .smf-button-control__control {
        width: 50% !important;
    }
    body .lower .contactLower .smf-form .smf-action button[data-action="back"] {
        font-size: 0.9em !important;
        width: 40% !important;
    }
}

/* 確認画面：入力値の表示は通常 input が消えるだけで構造は同じ。
   入力欄が無い項目に余分な余白が出ないように調整 */
.lower .contactLower .smf-form .smf-placeholder:empty { display: none; }

/* 完了画面のラッパ（テンプレートで .contactLower 配下に置かれる前提） */
.lower .contactLower .smf-form--complete {
    padding: 1em 0;
}