@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

:root {
    --ai-main: #00a3af;
    --ai-main-light: #f0fbfc;
    --ai-accent: #f39c12;
    --ai-error: #e74c3c;
    --ai-check: #2e7d32;
    --ai-cite-bg: #f5f7f8;
    --ai-border: #dce4e6;
    --ai-text-dark: #333333;
    --ai-base-fs: 16px;
    /* CTAカードのみ色調（ここを変更するとCTA全体に反映） */
    --ai-cta-title-bg: #f7f172;
    --ai-cta-title-color: #333333;
    --ai-cta-card-bg: #fff9e9;
    --ai-cta-card-border: #fcb900;
    --ai-cta-button-bg: #7aaa64;
    --ai-cta-button-color: #fff;
}

.ai-article-body { font-size: var(--ai-base-fs); line-height: 1.8; color: var(--ai-text-dark); }
.ai-article-body p { margin: 0 0 1.5rem 0; }
.article ul,
.article ol { padding-left: 0; }

/* 1. 見出し (h2/h3/h4/h5) */
.ai-article-body h2 { all:revert; display:block; font-size:1.25rem!important; font-weight:bold!important; color:var(--ai-main)!important; padding:0.8rem 1rem!important; margin:3rem 0 1.5rem!important; border-left:6px solid var(--ai-main)!important; background:var(--ai-main-light)!important; }
.ai-article-body h3 { all:revert; display:block; font-size:1.15rem!important; font-weight:bold!important; color:var(--ai-main)!important; padding-bottom:0.5rem!important; margin:2.5rem 0 1.2rem!important; border-bottom:2px solid var(--ai-border)!important; position:relative!important; }
.ai-article-body h3::after { content:''; position:absolute; bottom:-2px; left:0; width:60px; border-bottom:3px solid var(--ai-main); }
/* 通常のh4/h5スタイル（特定コンテキスト内は除外） */
.ai-article-body h4:not(.ai-cta-card-title) { all:revert; display:block; font-size:1.05rem!important; font-weight:bold!important; color:var(--ai-main)!important; padding-left:0.75rem!important; margin:0 0 1rem !important; border-left:4px solid var(--ai-main)!important; }
.ai-article-body h5 { all:revert; display:block; font-size:1rem!important; font-weight:bold!important; color:var(--ai-text-dark)!important; margin:1.5rem 0 0.75rem!important; }

/* 2. ボックス (Info/Warning/Check) */
.ai-box { padding: 1.5rem; margin: 1.8rem 0; border-radius: 8px; border: 1px solid var(--ai-border); background: #fff; }
/* ai-box内のhタグ：グローバルスタイルを無効化し、太文字のみ（詳細度を上げて確実に上書き） */
.ai-article-body .ai-box h2,
.ai-article-body .ai-box h3,
.ai-article-body .ai-box h4,
.ai-article-body .ai-box h5 {
    all: unset !important;
    display: block !important;
    font-weight: bold !important;
    color: var(--ai-text-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-left: none !important;
    border-bottom: none !important;
    position: static !important;
    font-size: inherit !important;
}
.ai-article-body .ai-box h2::after,
.ai-article-body .ai-box h3::after {
    display: none !important;
}
/* ai-box内のpタグ：margin-bottomを0に */
.ai-article-body .ai-box p {
    margin-bottom: 0 !important;
}
/* ai-box内のulタグ：marginを0に */
.ai-article-body .ai-box ul {
    margin: 0 !important;
}
.ai-comparison ul li,
.ai-comparison ol li,
.ai-box ul li,
.ai-box ol li { margin-left: 1rem !important; }
.ai-box-header { display: flex!important; align-items: center!important; gap: 12px!important; margin-bottom: 12px!important; }
.ai-article-body .ai-box-header h4 { all:unset; display: block!important; margin:0!important; font-size:1.05rem!important; font-weight:700!important; color:var(--ai-text-dark)!important; background:none!important; border:none!important; border-left:none!important; padding:0!important; padding-left:0!important; line-height: normal!important; width: auto!important; box-sizing: content-box!important; border-radius: 0!important; }
.ai-box-info { border-left: 6px solid var(--ai-main); background: var(--ai-main-light); }
.ai-box-warning { border-left: 6px solid var(--ai-accent); background: #fffdf9; }
.ai-box-check { border-left: 6px solid var(--ai-check); background: #f1f8e9; }

/* 3. メリット・デメリット */
.ai-comparison { display: flex; gap: 20px; margin: 1.8rem 0; flex-wrap: wrap; }
.ai-comp-item { flex: 1; min-width: 280px; padding: 1.2rem; border-radius: 8px; border: 2px solid var(--ai-border); }
.ai-comp-good { border-color: var(--ai-main); background: #f0fafb; }
.ai-comp-bad { border-color: #eee; background: #fafafa; }
.ai-comp-list { margin-left: 1.5rem; }
.ai-comp-title { margin-top: 0 !important; }

/* 4. ステップリスト (番号付き・末尾線なし) - タイムラインと同じレイアウト */
.ai-step-list { counter-reset: ai-num; padding: 0; list-style: none; margin: 2rem 0; }
.ai-step-list li { position: relative; padding: 0 0 2rem 3.5rem; list-style: none; }
.ai-step-list li:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 34px; width: 1.5px; height: calc(100% - 30px); background: #e0e0e0; }
.ai-step-list li::before { counter-increment: ai-num; content: counter(ai-num); position: absolute; left: 0; top: 0; width: 34px; height: 34px; background: var(--ai-main); color: #fff; border-radius: 50%; text-align: center; line-height: 34px; font-weight: bold; z-index: 1; }

/* 5. タイムライン (縦線＋ドット＋右コンテンツ・CodePen風・末尾は線なし) */
.ai-timeline { --ai-tl-line: 2px; --ai-tl-dot: 12px; --ai-tl-offset: 20px; padding: 0; list-style: none; margin: 2rem 0; position: relative; padding-left: calc(var(--ai-tl-offset) + var(--ai-tl-dot) + var(--ai-tl-offset)); }
.ai-timeline li { position: relative; padding-bottom: 2rem; }
.ai-timeline li:last-child { padding-bottom: 0; }
.ai-timeline li:not(:last-child)::after { content: ''; position: absolute; left: calc(-1 * (var(--ai-tl-offset) + var(--ai-tl-dot) + var(--ai-tl-offset)) + var(--ai-tl-offset) + (var(--ai-tl-dot) - var(--ai-tl-line)) / 2); top: calc(4px + var(--ai-tl-dot)); width: var(--ai-tl-line); height: calc(100% - 4px - var(--ai-tl-dot)); background: var(--ai-border); border-radius: 1px; }
.ai-timeline li::before { content: ''; position: absolute; left: calc(-1 * (var(--ai-tl-offset) + var(--ai-tl-dot) + var(--ai-tl-offset)) + var(--ai-tl-offset)); top: 4px; width: var(--ai-tl-dot); height: var(--ai-tl-dot); border-radius: 50%; background: #fff; border: 2px solid var(--ai-border); box-sizing: border-box; z-index: 1; }
.ai-timeline li.ai-timeline-item-active::before { background: var(--ai-main); border-color: var(--ai-main); }
.ai-timeline-date { display: block; font-size: 0.85rem; color: #888; margin-bottom: 0.25rem; }
.ai-timeline-content { font-size: 0.95rem; color: var(--ai-text-dark); }
.ai-timeline-content > *:first-child { margin-top: 0; }
.ai-timeline-bubble { margin-top: 0.5rem; padding: 1rem 1.2rem; background: var(--ai-main-light); border: 1px solid var(--ai-border); border-radius: 8px; }
.ai-article-body .ai-timeline-bubble h4 { all:unset; display: block!important; margin: 0 0 0.5rem 0!important; font-size: 1.05rem!important; font-weight: 700!important; color: var(--ai-text-dark)!important; background: none!important; border: none!important; padding: 0!important; }
.ai-timeline-bubble p { margin: 0!important; font-size: 0.95rem; line-height: 1.7; color: #555; }

/* 6. 吹き出し (専門医・中央寄せ) */
.ai-balloon { display: flex; gap: 15px; margin: 2rem 0; align-items: flex-start; }
.ai-balloon-img { width: 80px; text-align: center; flex-shrink: 0; }
.ai-icon-circle { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--ai-main); display: flex; align-items: center; justify-content: center; background: #fff; margin: 0 auto; overflow: hidden; }
.ai-icon-circle i { font-size: 30px; color: var(--ai-main); }
.ai-balloon-text { position: relative; padding: 1.2rem; background: #f1f1f1; border-radius: 15px; flex-grow: 1; font-size: 0.95rem; }
.ai-balloon-text::before { content: ""; position: absolute; top: 20px; left: -15px; border-style: solid; border-width: 8px 15px 8px 0; border-color: transparent #f1f1f1 transparent transparent; }

/* 7. FAQ */
.ai-faq { border: 1px solid var(--ai-border); border-radius: 8px; overflow: hidden; margin: 1.5rem 0; }
.ai-faq-q { padding: 1rem; background: var(--ai-main-light); cursor: pointer; font-weight: bold; display: flex; align-items: center; position: relative; padding-right: 3rem; transition: background-color 0.2s; }
.ai-faq-q:hover { background: #e0f7f9; }
.ai-faq-q::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--ai-main); font-size: 1rem; transition: transform 0.3s; }
.ai-faq-q.is-open::after { content: "\f068"; transform: translateY(-50%) rotate(180deg); }
.ai-faq-a { display: none; padding: 1rem; border-top: 1px solid var(--ai-border); background: #fff; }
.ai-faq-q i,
.ai-faq-a i { margin-right: 10px; }
.ai-article-body .ai-faq-a p { margin-bottom: 0 !important; }

/* 8. 比較テーブル */
.ai-table-scroll { overflow-x: auto; margin: 1.5rem 0; border-radius: 8px; border: 1px solid var(--ai-border); }
.ai-table { width: 100%; border-collapse: collapse; min-width: 500px; }
.ai-table th { background: var(--ai-main); color: #fff; padding: 12px; text-align: left; }
.ai-table td { padding: 12px; border-bottom: 1px solid var(--ai-border); }

/* 9. メニューリスト */
.ai-menu-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.ai-menu-list li { padding: 10px 0; border-bottom: 1px dashed var(--ai-border); }
.ai-menu-list li i { color: var(--ai-main); margin-top: .35em; }
.ai-menu-list li > span { overflow-wrap: break-word; word-break: normal; }

/* 10. 引用 */
.ai-quote { margin: 2rem 0; padding: 1.5rem 1.5rem 1.5rem 3rem; border-radius: 8px; background: #f9f9f9; border: 1px solid var(--ai-border); position: relative; font-style: italic; }
.ai-quote::before { content: "\f10d"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #ddd; font-size: 1.5rem; position: absolute; top: 15px; left: 15px; }

/* 11. 内部リンクバナー（画像なし・テキスト＋左アクセント） */
.ai-banner-card { display: flex; border: 1px solid var(--ai-border); border-radius: 8px; overflow: hidden; text-decoration: none!important; color: inherit!important; margin: 2rem 0; transition: 0.3s; background: #fff; border-left: 4px solid var(--ai-main); }
.ai-banner-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.ai-banner-card .ai-banner-content { padding: 1rem 1.2rem; flex: 1; }
/* ai-banner-content内のhタグ：グローバルスタイルを無効化し、太文字のみ（詳細度を上げて確実に上書き） */
.ai-article-body .ai-banner-content h2,
.ai-article-body .ai-banner-content h3,
.ai-article-body .ai-banner-content h4,
.ai-article-body .ai-banner-content h5 {
    all: unset !important;
    display: block !important;
    font-weight: bold !important;
    color: var(--ai-text-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-left: none !important;
    border-bottom: none !important;
    position: static !important;
    font-size: inherit !important;
}
.ai-article-body .ai-banner-content h2::after,
.ai-article-body .ai-banner-content h3::after {
    display: none !important;
}
/* ai-banner-content内のpタグ：margin-bottomを0に */
.ai-article-body .ai-banner-content p {
    margin-bottom: 0 !important;
}
.ai-banner-title { font-weight: bold; color: var(--ai-main); margin-bottom: 5px; }
.ai-banner-card .ai-banner-title + p { font-size: 0.9rem; margin: 0; color: #555; }

/* 12. CTAボタン */
.ai-cta-area { text-align: center; margin: 3rem 0; }
.ai-cta-micro { font-size: 0.85rem; font-weight: bold; color: var(--ai-accent); display: block; margin-bottom: 8px; }
.ai-cta-button { display: inline-block; padding: 1rem 3rem; background: var(--ai-main); color: #fff!important; text-decoration: none!important; font-weight: bold; border-radius: 50px; box-shadow: 0 4px 15px rgba(0,163,175,0.3); }

/* 13. プロフィール（画像あり／なしでアイコン代用のハイブリッド） */
.ai-profile-card { display: flex; gap: 20px; padding: 1.5rem; background: #f8f9fa; border: 1px solid var(--ai-border); border-radius: 12px; margin-top: 2rem; align-items: center; }
.ai-prof-img-box { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--ai-main); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; }
.ai-prof-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-prof-img-box i { font-size: 2rem; color: var(--ai-main); }
.ai-prof-content { flex: 1; }
.ai-article-body .ai-prof-content h2,
.ai-article-body .ai-prof-content h3,
.ai-article-body .ai-prof-content h4,
.ai-article-body .ai-prof-content h5 { margin-top: 0 !important; }
.ai-article-body .ai-prof-content h5 { all:unset; display: block!important; margin: 0 0 5px 0; font-size: var(--ai-base-fs)!important; font-weight: 700!important; color: var(--ai-main); }

/* 14. 参考文献 */
.ai-cite-section { margin-top: 3rem; padding: 1.5rem; background-color: var(--ai-cite-bg); border: 1px solid var(--ai-border); border-radius: 8px; }
.ai-cite-section h2,
.ai-cite-section h3,
.ai-cite-section h4,
.ai-cite-section h5 { margin-top: 0 !important; }
.ai-cite-section ol,
.ai-cite-section ul { padding-left: 15px; }

/* 15. スターレーティング */
.ai-stars { color: #f1c40f; font-size: 1.2rem; margin: 10px 0; }

/* 16. CTAカード（スマホ向け・タイトル中央・リスト枠強調・ボタン幅100%・条件付き画像） */
.ai-cta-card { margin: 3rem 0; padding: 0.9rem; padding-bottom: 2rem; border-radius: 12px; border: 1px solid var(--ai-cta-card-border); background: var(--ai-cta-card-bg); }
.ai-article-body .ai-cta-card-title { all:unset; display: block!important; margin: -0.9rem -0.9rem 1rem -0.9rem!important; font-size: 1.1rem!important; font-weight: 700!important; color: var(--ai-cta-title-color)!important; background: var(--ai-cta-title-bg)!important; border: none!important; padding: 0.6rem 0.9rem!important; line-height: 1.4; text-align: center; border-radius: 12px 12px 0 0; width: calc(100% + 1.8rem); box-sizing: border-box; }
.ai-cta-card-img { display: block; width: 100%; height: 0; padding-bottom: 56.25%; margin-bottom: 1rem; background-size: cover; background-position: center; border-radius: 8px; overflow: hidden; }
.ai-cta-card--illness .ai-cta-card-img { background-image: url(https://chiken-japan.co.jp/blog/wp-content/uploads/2025/12/cta_base.jpg); }
.ai-cta-card--corporate .ai-cta-card-img { background-image: url(https://chiken-japan.co.jp/blog/wp-content/uploads/2025/12/cta-1200x675.jpg); }
.ai-cta-card-lead { margin: 0 0 0.75rem 0; font-size: 1rem; line-height: 1.75; color: var(--ai-text-dark); }
.ai-cta-card-note { display: block; margin-bottom: 1rem; font-size: 0.8rem; color: #666; }
.ai-cta-card-points { list-style: none; padding: 0; margin: 0 0 1rem 0; }
/* flex内でstrong等があるとmin-width:autoにより改行が崩れるため、テキストをspanで囲みmin-width:0で縮小可能にする */
.ai-cta-card-points li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem; font-size: 0.95rem; line-height: 1.6; color: var(--ai-text-dark); background: #fff; border: 1px solid var(--ai-border); border-radius: 8px; box-sizing: border-box; }
.ai-cta-card-points li:last-child { margin-bottom: 0; }
.ai-cta-card-points li i { flex-shrink: 0; color: var(--ai-check); margin-top: 0.35em; }
.ai-cta-card-points li .ai-cta-card-point-text { min-width: 0; flex: 1 1 0%; overflow-wrap: break-word; }
.ai-cta-card-trust { margin: 0 0 1rem 0; font-size: 0.95rem; line-height: 1.6; color: var(--ai-text-dark); padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--ai-border); border-radius: 8px; box-sizing: border-box; display: flex; align-items: flex-start; gap: 0.5rem; }
.ai-cta-card-trust::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; flex-shrink: 0; position: static; left: auto; top: auto; color: var(--ai-check); margin-top: 0.15em; }
.ai-cta-card .ai-cta-button { display: block; width: 100%; box-sizing: border-box; padding: 1rem 1.5rem; background: var(--ai-cta-button-bg); color: var(--ai-cta-button-color)!important; text-decoration: none!important; font-weight: bold; border-radius: 50px; box-shadow: 0 4px 15px rgba(122,170,100,0.3); text-align: center; transition: 0.3s; }
.ai-cta-card .ai-cta-button:hover { opacity: 0.9; transform: translateY(-2px); }
.ai-cta-card .ai-cta-button i { margin-left: 0.35rem; font-size: 0.9em; }

/* 17. フローチャート（Q&A分岐形式） */
.ai-flowchart { margin: 2.5rem 0; }
.ai-flowchart-q { position: relative; padding: 1.2rem 1.2rem 1.2rem 3.5rem; margin-bottom: 1.5rem; background: var(--ai-main-light); border: 2px solid var(--ai-main); border-radius: 10px; font-weight: bold; font-size: 1.05rem; color: var(--ai-text-dark); }
.ai-flowchart-q::before { content: "\f059"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--ai-main); }
.ai-flowchart-branch { margin: 1rem 0 1.5rem 0; padding-left: 2rem; position: relative; }
.ai-flowchart-branch::before { content: ""; position: absolute; left: 0.5rem; top: -1rem; bottom: -1.5rem; width: 2px; background: var(--ai-border); }
.ai-flowchart-option { position: relative; padding: 0.9rem 1rem 0.9rem 2.5rem; margin-bottom: 1rem; background: #fff; border: 1px solid var(--ai-border); border-left: 4px solid var(--ai-accent); border-radius: 6px; }
.ai-flowchart-option:last-child { margin-bottom: 0; }
.ai-flowchart-option::before { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 0.9rem; color: var(--ai-accent); }
.ai-flowchart-option-label { font-weight: bold; color: var(--ai-accent); margin-bottom: 0.4rem; display: block; }
.ai-flowchart-option-text { font-size: 0.95rem; line-height: 1.7; color: var(--ai-text-dark); margin: 0; margin-bottom: 0 !important; }
.ai-flowchart-options { margin-bottom: 1rem; }

/* 18. ポイントデザイン（コンパクト・点線枠・チェックアイコン・スマホファースト） */
.ai-points { margin: 2rem 0; padding: 1rem 1.2rem; border: 1px solid var(--ai-border); border-radius: 6px; background: #fff; }
.ai-points ol,
.ai-points ul { margin-bottom: 0 !important; }
.ai-points li { list-style: none; margin: 0 0 1.5rem 1.5rem !important; }
.ai-article-body .ai-points h2 { all:unset; display: block; font-size: 1.05rem!important; font-weight: bold!important; color: #fff!important; background: var(--ai-main)!important; margin: -1rem -1.2rem 0.8rem -1.2rem!important; padding: 0.6rem 1.2rem!important; border: none!important; border-radius: 6px 6px 0 0; width: calc(100% + 2.4rem); box-sizing: border-box; line-height: 1.4; }
.ai-points-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; font-weight: bold; font-size: 0.95rem; color: var(--ai-main); text-transform: uppercase; }
.ai-points-title::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--ai-border); }
.ai-points-list { list-style: none; padding: 0; margin: 0; }
.ai-points-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.9rem; line-height: 1.7; color: var(--ai-text-dark); }
.ai-points-item::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; flex-shrink: 0; width: 16px; height: 16px; background: #666; color: #fff; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-top: 0.15em; }
.ai-points-item-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ai-points-item-label { font-weight: bold; color: var(--ai-main); display: block; }
.ai-points-item-text { display: block; overflow-wrap: break-word; word-break: normal; }

/* レスポンシブ対応（スマホ向け） */
@media screen and (max-width: 768px) {
    /* プロフィールカード：スマホでは縦並び、サムネイルを上部中央に */
    .ai-profile-card { flex-direction: column; align-items: center; text-align: center; }
    .ai-prof-img-box { margin: 0 auto 1rem auto; }
    .ai-prof-content { text-align: left; width: 100%; }
}