/*
Theme Name: KMB Theme v4
Description: きんば社会保険労務士事務所 - テーマ v4（モノトーン基調 + 産休・育休相談ピンク特集）
Version: 1.0.0
Author: KMB Office
*/

/* INS-042: 産休・育休 ページ 2段階メニュー（見出しスタイル＋アコーディオン） */
/* INS-046: ①下線非表示・＋マーク非表示・楕円サイズ拡大 ⑥送信ボタン右寄せ */
.kmb-accordion {
    margin-bottom: 0;
    /* INS-046 ①: 見出し下の下線を非表示 */
    border-bottom: none;
}

/* ▶ マーカー完全除去（Safari/Chrome/Firefox 対応） */
.kmb-accordion summary {
    list-style: none;
    list-style-type: none;
}
.kmb-accordion summary::-webkit-details-marker {
    display: none;
}
.kmb-accordion summary::marker {
    content: "";
    display: none;
}
.kmb-accordion[open] > summary {
    margin-bottom: 0.5rem;
}

/* 3メニュー項目ヘディング（summary / a 共通） */
.kmb-menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.kmb-menu-item:hover {
    opacity: 0.75;
}
.kmb-menu-item h2 {
    margin: 0;
}

/* INS-046 ①: ＋マーク（開閉インジケータ）を非表示 */
summary.kmb-menu-item::after {
    display: none;
}
.kmb-accordion[open] > summary.kmb-menu-item::after {
    display: none;
}

/* INS-046 ①: 楕円画像サイズ拡大（文字高さの2倍近く、文字と重なる程度） */
/* 参照: docs/0418data/相談ページ イメージ 0406.pdf
   heading-pink/gold-blur.png は 2000x1414px の画像で、楕円本体は中央寄り、
   周囲がぼかしの透明領域（画像高さに対して楕円本体は約50%）。
   クライアントイメージ：楕円本体≈文字高さ(30px)の2倍≈60px、文字左1〜2文字に軽く被る。
   → 画像全体 height ≈ 7.5rem(120px) で楕円本体 ≈ 60px。 */
.kmb-menu-item .kmb-heading-oval {
    width: auto;
    height: 9rem;          /* 144px: 楕円本体が大きく、文字の上に十分被る */
    flex-shrink: 0;
    margin-right: -6rem;   /* -96px: 楕円本体が文字の数文字目に被る */
    margin-left: -1.5rem;  /* 左側も少しはみ出して全体バランス */
    position: relative;
    z-index: 0;
    opacity: 0.9;
}
/* h2 が楕円の上に来るようにする */
.kmb-menu-item h2 {
    margin: 0;
    position: relative;
    z-index: 1;
}

.kmb-accordion-body {
    padding: 1rem 0 2rem 0;
}

/* INS-070 ①: モバイルで3見出しが間延びして見える対策
   heading-pink/gold-blur.png は楕円本体が画像中央にあり上下は透明領域。
   そのまま height を確保すると透明領域分まで「間隔」に化けるため、
   負の margin-top/-bottom で透明領域を視覚的にトリミングする。 */
@media (max-width: 767px) {
    .kmb-menu-item {
        padding: 0.4rem 0;
        gap: 0.25rem;
        overflow: hidden;      /* 楕円画像の負マージンが親をはみ出さないよう */
    }
    .kmb-menu-item .kmb-heading-oval {
        height: 4.5rem;        /* 72px (PC: 144px) */
        margin-top: -0.75rem;
        margin-bottom: -0.75rem;
        margin-right: -2.5rem;
        margin-left: -0.5rem;
    }
    .kmb-accordion[open] > summary {
        margin-bottom: 0.25rem;
    }
    .kmb-accordion-body {
        padding: 0.5rem 0 1.25rem 0;
    }
}

/* INS-046 ⑥: 送信ボタンを右寄せ（入力枠右端にボタン右端を合わせる） */
.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

/* チラシ画像 ＋ PDFバッジ オーバーレイ */
.kmb-flyer-link {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.kmb-flyer-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    background: rgba(244, 143, 177, 0.92); /* maternity.dark #F48FB1 */
    color: #fff;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: background-color 0.2s ease;
    pointer-events: none;
}
.kmb-flyer-link:hover .kmb-flyer-badge {
    background: #F48FB1; /* solid on hover */
}

/* INS-070 ②: 画像下の明示的な「PDFを開く」ボタン（印刷導線） */
.kmb-pdf-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.55rem 1.25rem;
    background: #fff;
    color: #6B5846;          /* secondary.dark */
    border: 1px solid #D4A574; /* accent.main */
    border-radius: 9999px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.kmb-pdf-button:hover {
    background: #D4A574;     /* accent.main */
    color: #fff;
}
.kmb-pdf-button svg {
    width: 1rem;
    height: 1rem;
}

/* INS-070 ③④: 業務委託ページのPDF画像に枠線・影が見える対策
   CSS由来であれば本クラスで除去（PNG自体に焼き込まれている場合は画像差替が必要） */
.kmb-flyer-flat {
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent;
}