/**
 * 記事レイアウト調整用CSS
 * 作成日: 2025-09-02
 * 用途: 記事ページのタイトル・サムネイル順序とスタイル調整
 */

/* ========================================
   目次のスタイル調整（custom-tocクラス対応）
   ======================================== */

/* custom-tocクラスのスタイル（優先） */
.custom-toc {
    margin: 2em 0 !important;
    padding: 1.5em !important;
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.custom-toc__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    padding-bottom: 0.5em !important;
    border-bottom: 2px solid #dee2e6 !important;
    cursor: pointer !important;
    user-select: none !important;
}

.custom-toc__title {
    font-size: inherit !important; /* pタグと同じサイズ */
    font-weight: bold !important;
    color: #333 !important;
}

.custom-toc__toggle {
    background: none !important;
    border: none !important;
    padding: 0.5em !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.custom-toc__toggle-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    position: relative !important;
}

.custom-toc__toggle-icon::before,
.custom-toc__toggle-icon::after {
    content: '' !important;
    position: absolute !important;
    background: #666 !important;
    transition: transform 0.3s ease !important;
}

.custom-toc__toggle-icon::before {
    top: 50% !important;
    left: 25% !important;
    width: 50% !important;
    height: 2px !important;
    transform: translateY(-50%) !important;
}

.custom-toc__toggle-icon::after {
    top: 25% !important;
    left: 50% !important;
    width: 2px !important;
    height: 50% !important;
    transform: translateX(-50%) !important;
}

/* 閉じた状態のスタイル */
.custom-toc.collapsed .custom-toc__toggle-icon::after {
    transform: translateX(-50%) rotate(0deg) !important;
}

.custom-toc:not(.collapsed) .custom-toc__toggle-icon::after {
    transform: translateX(-50%) rotate(90deg) !important;
}

.custom-toc__content {
    max-height: 600px !important;
    overflow-y: auto !important;
    transition: all 0.3s ease !important;
    margin-top: 1em !important;
}

.custom-toc.collapsed .custom-toc__content {
    max-height: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    opacity: 0 !important;
}

.custom-toc__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    counter-reset: toc-counter !important;
}

.custom-toc__list--nested {
    margin-left: 1.5em !important;
    margin-top: 0.5em !important;
}

.custom-toc__item {
    margin-bottom: 0.5em !important;
    line-height: 1.6 !important;
    font-size: inherit !important; /* pタグと同じサイズ */
}

.custom-toc__item--level-2 {
    font-weight: 600 !important;
    font-size: inherit !important; /* pタグと同じサイズ */
}

.custom-toc__item--level-3 {
    font-weight: normal !important;
    font-size: inherit !important; /* pタグと同じサイズ */
}

.custom-toc__item--level-4,
.custom-toc__item--level-5,
.custom-toc__item--level-6 {
    display: none !important; /* H4以降は非表示 */
}

.custom-toc__link {
    color: #2c5aa0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: inline-block !important;
    padding: 0.2em 0 !important;
}

.custom-toc__link:hover {
    color: #1e3a6f !important;
    text-decoration: underline !important;
}

/* 旧tocクラスのスタイル（互換性のため） */
.toc {
    border: 1px solid #e0e0e0 !important;
    padding: 15px !important;
    margin-bottom: 30px !important;
    background-color: #f9f9f9 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.toc h2 {
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 1.2rem !important;
    color: #333 !important;
    user-select: none !important;
}

.toc .caret-circle-down {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    transition: transform 0.3s ease !important;
}

.toc.closed .caret-circle-down {
    transform: rotate(0deg) !important;
}

.toc:not(.closed) .caret-circle-down {
    transform: rotate(180deg) !important;
}

.toc ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 15px 0 0 0 !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    max-height: 1000px !important;
}

.toc.closed ul {
    max-height: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
}

.toc ul li {
    padding: 5px 0 !important;
    margin: 0 !important;
}

.toc ul li.toc-2 {
    margin-left: 0 !important;
    font-weight: 600 !important;
}

.toc ul li.toc-3 {
    margin-left: 20px !important;
    font-weight: normal !important;
    font-size: 0.95em !important;
}

.toc ul li a {
    color: #2c5aa0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.toc ul li a:hover {
    color: #1e3a6f !important;
    text-decoration: underline !important;
}

/* ========================================
   記事レイアウトコンテナの調整
   ======================================== */

/* Arkhe Blocks: Notice (alert) のパディングを統一 */
.ark-block-notice.-alert.is-style-default {
    padding: 10px !important;
}

/* SWELL Button をフッターボタン風（lb--footButtonObj）に合わせる */
.swell-block-button.is-style-btn_solid,
.swell-block-button.is-style-btn_solid a,
.swell-block-button.is-style-btn_solid .swell-block-button__link {
    display: block !important;
    margin: 0 auto 20px !important;
    width: 380px !important;
    height: 60px !important;
    line-height: 6rem !important;
    color: #FFF !important;
    font-weight: bold !important;
    font-size: 1.6rem !important;
    text-align: center !important;
    border-radius: 30px !important;
    border-bottom: solid 2px #578ba7 !important;
    box-shadow: 0px 2px 2px 1px #dcdcdc !important;
    background: linear-gradient(to right, #BBEEEE, #80C8EF) !important;
    text-decoration: none !important;
    padding: 0 !important;
}

/* 関連記事ブロック（スマホカバー内）下側のみ非表示 */
.smp--footerCover .lb--articles:last-of-type {
    display: none !important;
}

/* ========================================
   診断コンテンツ（shindan）レイアウト最適化
   SWELL依存を排し、共通スタイルで整える
   ======================================== */
.shindan_default,
.clinic_shindan_omt {
    --shindan-sky: #EAF6FF; /* 水色ベース */
    max-width: 740px;
    margin: 24px auto;
    background: var(--shindan-sky);
    border: 1px solid #dbe7f3;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    overflow: hidden;
}

.shindan_default .diagnose_tit,
.clinic_shindan_omt .diagnose_tit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px 18px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    position: relative;
    background: var(--shindan-sky) !important; /* 枠内は全面水色（inlineより優先） */
    border-bottom: 1px solid #d3e2ef;
}

/* タグ風タイトル（Qラベル等にも応用可能） */
.shindan_default .diagnose_tit .diagnose_title,
.clinic_shindan_omt .diagnose_tit .diagnose_title {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #7AAFD8 0%, #5B86B0 100%); /* 落ち着いた青系 */
    color: #fff;
    padding: 8px 26px;
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(0,0,0,.12);
    font-size: 16px !important;
    line-height: 1.3;
}
.shindan_default .diagnose_tit .diagnose_title:before,
.shindan_default .diagnose_tit .diagnose_title:after,
.clinic_shindan_omt .diagnose_tit .diagnose_title:before,
.clinic_shindan_omt .diagnose_tit .diagnose_title:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 10px solid transparent;
}
.shindan_default .diagnose_tit .diagnose_title:before,
.clinic_shindan_omt .diagnose_tit .diagnose_title:before {
    left: -20px;
    border-right-color: #5B86B0;
}
.shindan_default .diagnose_tit .diagnose_title:after,
.clinic_shindan_omt .diagnose_tit .diagnose_title:after {
    right: -20px;
    border-left-color: #5B86B0;
}

.shindan_default .diagnose_tit .label,
.clinic_shindan_omt .diagnose_tit .label {
    background: #fff;
    color: #333;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
}

.shindan_default #modal,
.clinic_shindan_omt #modal,
.shindan_default .diagnose_container,
.clinic_shindan_omt .diagnose_container {
    padding: 16px;
}

/* 質問ブロック */
.shindan_default .question,
.clinic_shindan_omt .question {
    margin: 0 0 16px;
}

/* question系の本文段落は下マージン0に統一 */
.shindan_default .question p,
.clinic_shindan_omt .question p {
    margin-bottom: 0 !important;
}

.shindan_default .question .options,
.clinic_shindan_omt .question .options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 640px) {
    .shindan_default .question .options,
    .clinic_shindan_omt .question .options {
        grid-template-columns: 1fr;
    }
}

/* 選択肢 */
.shindan_default .option,
.clinic_shindan_omt .option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #e8ecf1;
    border-radius: 999px;
    background: #ffffff;
    padding: 14px 16px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05);
    text-align: center;
    font-weight: 700;
    color: #25323b;
}

.shindan_default .option:hover,
.clinic_shindan_omt .option:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
}

.shindan_default .option img,
.clinic_shindan_omt .option img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 2問目（アイコンが多い画面）のアイコンサイズを圧縮 */
.shindan_default #question2 .option img,
.clinic_shindan_omt #question2 .option img {
    width: 72px;
    max-height: 56px;
    object-fit: contain;
    margin: 4px auto;
}

@media (max-width: 640px) {
    .shindan_default #question2 .option img,
    .clinic_shindan_omt #question2 .option img {
        width: 60px;
        max-height: 48px;
    }
}

/* 2問目は常に3列×n（スマホでも3列）に固定 */
.shindan_default #question2 .options,
.clinic_shindan_omt #question2 .options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

/* Q2: テキストを画像の上に小さく表示（カラム逆順） */
.shindan_default #question2 .option,
.clinic_shindan_omt #question2 .option {
    flex-direction: column-reverse;
    padding: 10px 12px;
}

.shindan_default #question2 .option p,
.clinic_shindan_omt #question2 .option p {
    font-size: .85rem;
    line-height: 1.25;
    margin: 2px 0 6px;
}

/* Qラベル（diag-question-balloon）をバッジ風に */
.diag-question-balloon {
    display: flex; /* block-level for auto margins */
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 40px;
    margin: 6px auto 10px;
    border-radius: 20px;
    background: #0E75C6 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(14,117,198,.25), inset 0 1px 0 rgba(255,255,255,.2);
    position: relative;
}
.diag-question-balloon p {
    margin: 0;
    font-weight: 800;
    letter-spacing: .03em;
    color: #fff !important; /* バッジ内テキストは白・太字 */
}

/* 親要素中央寄せ（保険） */
.shindan_default .question .diag-question-balloon,
.clinic_shindan_omt .question .diag-question-balloon {
    margin-left: auto;
    margin-right: auto;
}

/* 診断小アイコン（チェックマーク）を半分サイズに */
.shindan_default img[src*="/images/shindan/check"],
.clinic_shindan_omt img[src*="/images/shindan/check"] {
    width: 10px !important; /* 既存約20px相当の半分 */
    height: auto !important;
}

/* 下向き矢印（caret-down）は25%サイズに */
.shindan_default img[src*="caret-down"],
.clinic_shindan_omt img[src*="caret-down"] {
    width: 10px !important; /* 既存約40px相当の1/4 */
    height: auto !important;
}

/* 結果・CTA セクションの余白調整 */
.shindan_default #questions-container,
.clinic_shindan_omt #questions-container,
.shindan_default #shindan_omt,
.clinic_shindan_omt #shindan_omt {
    margin-top: 8px;
}

/* ボタン行（診断CTA）を共通トーンに寄せる */
.shindan_default .btn,
.clinic_shindan_omt .btn {
    display: block;
    margin: 16px auto 8px;
    width: 100%;
    max-width: 480px;
}

/* 指定: .shindan_default の .btn は width:100% を無効化 */
.shindan_default .btn { width: auto !important; }

.shindan_default .btn a,
.clinic_shindan_omt .btn a {
    display: block;
    width: 100%;
    text-decoration: none !important;
    color: #fff !important;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 14px 18px;
    background: linear-gradient(135deg, #7FD3FF 0%, #2FA3F0 100%);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(47,163,240,.22), 0 2px 8px rgba(0,0,0,.06);
    position: relative;
    overflow: hidden;
}

.shindan_default .btn a:hover,
.clinic_shindan_omt .btn a:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
    transition: all .15s ease;
}

.shindan_default .btn a .btn-text,
.clinic_shindan_omt .btn a .btn-text {
    position: relative;
    z-index: 1;
    font-size: 16px; /* 指定サイズ */
}

/* CTA（画像のみ）用の調整 */
.shindan_default .cta_button .btn a {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.shindan_default .cta_button .btn a img { display: block !important; width: 100% !important; height: auto !important; }
.shindan_default .cta_button .btn a .btn-text { display: none !important; }

/* 見出し下の説明文の余白/サイズ（前回に戻す） */
.shindan_default .cta_button p.text-center.font-bold.text-lg { margin-bottom: 0 !important; }
.shindan_default #cost_true { font-size: 14px !important; }
.shindan_default .cta_button p.color-gray.text-left.text-xs { font-size: 8px !important; line-height: 1.4 !important; }

.swell-block-button.is-style-btn_solid:hover,
.swell-block-button.is-style-btn_solid a:hover,
.swell-block-button.is-style-btn_solid .swell-block-button__link:hover {
    opacity: 0.65 !important;
    text-decoration: none !important;
}

/* lb--containerのpaddingを解除し、article要素に移動 */
.post-type-post .lb--container {
    padding: 0 !important;
    max-width: 1096px;
    margin: 0 auto;
}

/* article要素に元のlb--containerのpaddingを設定 */
.post-type-post article.blogpost_topmargin {
    padding: 0 40px !important;
}

/* ========================================
   記事タイトルセクションの調整
   ======================================== */

/* CSS変数のデフォルト値設定 */
:root {
    --header-height: 80px; /* デフォルト値（JavaScriptで動的に更新される） */
}

/* 基本設定 - PC・モバイル共通 */
.lb--single-meta {
    padding: 0 !important;
    margin: 0 auto 35px !important;
}

.lb--single-meta-title {
    padding-top: var(--header-height) !important; /* CSS変数を使用 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* カスタマイザークラスも同様に調整 */
.lb--single-meta-title.customizer-styled {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* 最終更新日表示のスタイルリセット */
.lb--single-meta__box {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    background: none !important;
}

.lb--single-meta__time {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    background: none !important;
}

.lb--single-meta__box-date {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    background: none !important;
    display: inline !important;
}

/* ========================================
   モバイル時の調整（768px以下）
   親テーマの設定を完全に上書き
   ======================================== */
@media screen and (max-width: 768px) {
    /* コンテナとarticleのpadding調整 */
    .post-type-post .lb--container {
        padding: 0 !important;
        display: block;
    }
    
    .post-type-post article.blogpost_topmargin {
        padding: 0 6.1333333333vw !important; /* 親テーマのget_vw(23)相当 */
    }
    
    .lb--single-meta {
        max-width: initial !important;
        padding: 0 !important;
        margin: 0 auto 20px !important;
    }
    
    .lb--single-meta-title {
        font-size: 4.2666666667vw !important; /* 親テーマのget_vw(16)相当 */
        margin: 0 0 10px 0 !important; /* 上下マージンを調整 */
        padding: 0 !important; /* 全方向のpaddingを0に */
        padding-top: var(--header-height) !important; /* CSS変数を使用 */
        padding-bottom: 10px !important;
        left: 0 !important;
    }
    
    .lb--single-meta-title.customizer-styled {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
    
    .lb--single-meta__box {
        background-color: transparent !important;
        padding: 0 !important;
    }
    
    .lb--single-meta__box-date {
        font-size: 3.7333333333vw !important; /* 親テーマのget_vw(14)相当 */
        margin: 0 !important;
    }
    
    /* サムネイル画像を完全表示（切れないように） */
    .lb--single-main-photo {
        background-size: contain !important; /* cover から contain に変更 */
        background-position: center center !important;
        background-repeat: no-repeat !important;
        height: 50vw !important; /* 高さを調整（アスペクト比維持） */
        max-height: 300px !important; /* 最大高さを制限 */
    }
    
    .lb--single-main {
        margin-bottom: 20px !important; /* 下余白を追加 */
    }
}

/* ========================================
   PCビューでのサムネイル画像調整（769px以上）
   画像が見切れないようにcontain設定
   ======================================== */
@media screen and (min-width: 769px) {
    /* PCビューでタイトルとサムネイルをbodyの左端に合わせる */
    .lb--single-meta {
        max-width: 1200px !important;
        margin: 0 auto 35px !important;
        padding: 0 20px !important;
    }
    
    .lb--single-meta-title {
        text-align: left !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .lb--single-main {
        max-width: 1200px !important;
        margin: 0 auto 35px !important;
        padding: 0 20px !important;
    }
    
    .lb--single-main-photo {
        background-size: contain !important; /* cover から contain に変更で画像全体を表示 */
        background-position: left center !important; /* 左寄せに変更 */
        background-repeat: no-repeat !important;
        height: 400px !important;
        max-height: 400px !important;
    }
    
    /* bodyコンテンツ部分も同じ幅に合わせる */
    .lb--wrapper {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
    
    .lb--container {
        padding: 0 !important;
    }
}