/*
Theme Name:般若ビルダー 子テーマ
Theme URI: https://hannya-builder.com/
Author: MN
Description: 般若ビルダー 専用の子テーマ。親テーマのバージョンが上がった場合はTemplateの名前を修正してください。
Template: hannyabuilder-20240408
Version:1.0.0
*/

/* --- FAQ Design Pattern B: Modern Card Style --- */

.wp-block-hannya-blocks-qas {
    display: flex;
    flex-direction: column;
    gap: 20px; /* アイテム間の余白 */
    margin: 40px 0;
}

/* カード全体のスタイル */
.wp-block-hannya-blocks-qa {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* ほんのり影をつける */
    margin-bottom: 0 !important;
}

/* --- 質問 (Q) エリア --- */
.q_block {
    background: transparent !important;
    border-bottom: 1px dashed #ddd !important; /* 点線で区切る */
    padding: 0 0 15px 0 !important;
    margin-bottom: 15px !important;
    align-items: center !important;
}

/* Qアイコン */
.q_block .q_mark {
    background: transparent !important;
    color: #cf2e2e !important;
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    margin-right: 12px !important;
}
.q_block .q_mark::before, .q_block .q_mark::after { display: none !important; }

/* Qテキスト */
.q_block .q_content {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

/* --- 回答 (A) エリア --- */
.a_block {
    background: transparent !important;
    padding: 0 !important;
    align-items: flex-start !important;
}

/* Aアイコン（非表示にしてスッキリさせるパターン） */
.a_block .a_mark {
    display: none !important; /* あえてAアイコンを消してスッキリさせる */
}

/* Aテキスト */
.a_block .a_content {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    position: relative;
    padding-left: 0;
}
/* Aアイコンの代わりに「A.」という文字を擬似要素で置く（任意） */
.a_block .a_content::before {
    content: "A.";
    display: inline-block;
    color: #0693e3;
    font-weight: 700;
    margin-right: 8px;
    font-size: 16px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .wp-block-hannya-blocks-qa {
        padding: 20px !important;
    }
    .q_block .q_content {
        font-size: 16px;
    }
}

/* ====================================
   見出しデザイン
   ==================================== */

/* --- H1 記事タイトル --- */
.entry-header .entry-title {
    /* 既存スタイルのリセット */
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    
    /* 新しいデザイン */
    font-size: 26px;
    color: #333;
    padding: 20px 10px !important; /* 上書き用 */
    border-top: 2px solid #f78da7 !important;
    border-bottom: 2px solid #f78da7 !important;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 30px;
    
    /* アイキャッチ画像との間隔 */
    margin-top: 50px !important; 
}
/* H1の疑似要素（もしあれば消す） */
.entry-header .entry-title::before,
.entry-header .entry-title::after {
    display: none !important;
}


/* --- H2 大見出し --- */
.entry-content h2,
.d-article h2 { /* テーマ特有のクラスも指定 */
    /* 既存スタイルのリセット */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    
    /* 新しいデザイン */
    font-size: 22px;
    color: #333;
    padding: 10px 15px !important;
    border-bottom: 2px solid #f78da7 !important;
    position: relative;
    margin-top: 60px !important;
    margin-bottom: 30px !important;
}

/* 既存のアイコンや装飾を消す */
.entry-content h2::before,
.d-article h2::before {
    display: none !important;
}

/* 二重線風の装飾（新規追加） */
.entry-content h2::after,
.d-article h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    display: block !important; /* 念のため表示強制 */
}


/* --- H3 中見出し --- */
.entry-content h3,
.d-article h3 {
    /* 既存スタイルのリセット */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    
    /* 新しいデザイン */
    font-size: 19px;
    color: #333;
    padding-left: 15px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-left: 3px solid #f78da7 !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    
    /* 淡いグラデーション背景 */
    background: linear-gradient(to right, #fffafa, transparent) !important;
}
/* 既存の疑似要素を消す */
.entry-content h3::before,
.d-article h3::before,
.entry-content h3::after,
.d-article h3::after {
    display: none !important;
}


/* --- H4 小見出し --- */
.entry-content h4,
.d-article h4 {
    /* 既存スタイルのリセット */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    
    /* 新しいデザイン */
    font-size: 17px;
    color: #555;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
    border-bottom: 1px dashed #f78da7 !important;
    padding-bottom: 5px !important;
    display: inline-block;
}
/* 既存の疑似要素を消す */
.entry-content h4::before,
.d-article h4::before {
    display: none !important;
}

/* --- ヘッダーCTAボタンのデザイン（四角・アイコン付き） --- */
.header-cta-btn {
    position: absolute;   /* 絶対配置 */
    right: 0;             /* PC表示：コンテンツエリアの右端 */
    top: 50%;             /* 上下中央 */
    transform: translateY(-50%);
    
    /* 色と形 */
    background: #f49faa;  /* 背景色 */
    border-radius: 4px;   /* 角を少しだけ丸く（四角っぽく） */
    
    color: #fff !important; /* 文字色 */
    text-decoration: none;
    padding: 8px 16px;    /* 内側の余白 */
    display: flex;        /* 横並び */
    align-items: center;  /* 上下中央揃え */
    box-shadow: 0 3px 6px rgba(0,0,0,0.2); /* 影 */
    z-index: 9999;
    transition: all 0.3s ease;
}

/* ホバー時の動き */
.header-cta-btn:hover {
    opacity: 0.9;
    transform: translateY(-50%) scale(1.02);
    color: #fff !important;
}

/* 左のアイコン（DNA） */
.cta-icon-left {
    font-size: 20px;
    margin-right: 10px;
}

/* テキスト部分をまとめるブロック */
.cta-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin-right: 10px;
}

/* 上段テキスト */
.cta-sub {
    font-size: 10px;
    font-weight: normal;
    opacity: 0.95;
    letter-spacing: 0.05em;
}

/* 下段テキスト */
.cta-main {
    font-size: 15px;
    font-weight: bold;
}

/* 右のアイコン（矢印） */
.cta-icon-right {
    font-size: 14px;
    opacity: 0.8;
}


/* --- スマホ表示時の調整（900px以下） --- */
@media screen and (max-width: 900px) {
    .header-cta-btn {
        right: 10px;       /* 画面右端から10pxの隙間（見切れ防止） */
        padding: 5px 12px; /* 少しコンパクトに */
    }

    /* 以下、スマホでの文字・アイコンサイズ微調整 */
    .cta-icon-left {
        font-size: 16px;
        margin-right: 6px;
    }
    .cta-sub {
        font-size: 9px;
    }
    .cta-main {
        font-size: 13px;
    }
    .cta-text-wrap {
        margin-right: 5px;
    }
    .cta-icon-right {
        font-size: 12px;
    }
}

/* 記事下・カテゴリ下リンクのデザイン */
.asami-bottom-link {
    text-align: right;    /* 右寄せ */
    margin-top: 30px;     /* 上の余白 */
    margin-bottom: 10px;  /* 下の余白 */
    font-weight: bold;    /* 太字 */
    font-size: 0.95em;    /* 少し小さめ */
}

.asami-bottom-link a {
    color: #03C;          /* リンク色（サイトのメインカラーに合わせる） */
    text-decoration: underline;
}

.asami-bottom-link a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* カテゴリページで説明文の下に余白を作る */
.category-back-link {
    margin-top: 40px;
}

/* =========================================
   固定ページカテゴリ割り当て用の記事一覧
   ========================================= */

/* 全体のコンテナ */
.custom-cat-posts-section {
    margin-top: 60px;
    width: 100%;
}

/* 記事一覧リスト（Flexboxで2列レイアウト） */
.custom-cat-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 左右に配置 */
    gap: 30px 4%; /* 上下の隙間30px, 左右の隙間4% */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 各記事カード（PCは2列） */
.custom-cat-item {
    width: 48%; /* 2列にするため48% */
    margin: 0;
    box-sizing: border-box;
}

/* リンク全体 */
.custom-cat-link {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    transition: opacity 0.3s;
}

.custom-cat-link:hover {
    opacity: 0.8;
}

/* サムネイル画像エリア */
.custom-cat-thumb {
    margin: 0 0 15px 0;
    padding: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px; /* 角を少し丸く */
    aspect-ratio: 16 / 9; /* 画像の比率を固定（重要） */
}

/* 画像本体 */
.custom-cat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいにトリミング */
    vertical-align: bottom;
}

/* 見出しのデザイン */
.custom-cat-posts-section .custom-cat-posts-title {
    margin-bottom: 30px !important; /* 記事一覧との余白 */
    font-size: 1.5em; /* 文字サイズ（必要に応じて調整） */
    font-weight: bold;
}

/* 記事タイトルの文字サイズ調整（強制適用版） */
.custom-cat-posts-section .custom-cat-item-title {
    font-size: 16px !important; /* ここでサイズ調整 */
    font-weight: bold !important;
    line-height: 1.5 !important;
    margin: 10px 0 !important;
    color: #333;
}

/* 日付エリア */
.custom-cat-meta {
    font-size: 0.55em;
    color: #888;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

/* カレンダーアイコンの調整 */
.custom-cat-date i {
    margin-right: 5px;
}

/* カテゴリラベル */
.custom-cat-label {
    display: inline-block;
    background-color: #666; /* 背景色（グレー） */
    color: #fff;
    font-size: 0.55em;
    padding: 3px 10px;
    border-radius: 3px;
    line-height: 1;
}

/* もっと見るボタンエリア */
.custom-cat-more-link {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 40px;
}

.custom-cat-more-link a {
    background-color: #F5A8B2; /* ボタンの色 */
    color: #fff !important;
    display: inline-block;
    padding: 12px 60px;
    text-decoration: none;
    border-radius: 9999px;
    font-weight: bold;
}

/* --- スマホ表示用（1カラムにする） --- */
@media (max-width: 768px) {
    .custom-cat-item {
        width: 100%; /* スマホでは100%幅 */
        margin-bottom: 30px;
    }
    
    .custom-cat-list {
        gap: 0;
    }
}

/* 執筆者情報の「記事一覧」リンクを非表示にする */
.author_profile_box .author_list-more_link {
    display: none !important;
}

/* -----------------------------------------------------------------
   監修者ボックスデザイン
----------------------------------------------------------------- */

/* 1. ボックス全体 */
#main .entry-content .author_profile_box.main-article {
    background-color: #fdfbfb !important; /* ほんのり暖かい白背景 */
    border: 1px solid #efecec !important; /* 薄いグレーピンク枠 */
    border-radius: 8px !important;
    padding: 25px 25px 25px 25px !important;
    margin: 30px 0 40px 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* 2. 入れ子のリセット */
#main .entry-content .author_profile_box .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3. 見出し（執筆・監修医師） */
#main .entry-content .author_profile_box .comments_area-h2 {
    font-size: 16px !important;
    text-align: center !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important; /* 上の余白削除 */
    margin-bottom: 20px !important;
    position: relative !important;
}

/* ★★★ 重要：テーマが自動で出すグレーの線（擬似要素）を消す ★★★ */
#main .entry-content .author_profile_box .comments_area-h2::before,
#main .entry-content .author_profile_box .comments_area-h2::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

/* 見出しの下線（サイトカラーのピンクのみ表示） */
#main .entry-content .author_profile_box .comments_area-h2 span {
    border-bottom: 3px solid #f49faa !important; 
    padding-bottom: 5px !important;
    display: inline-block;
}

/* 4. 写真と名前のエリア */
#main .entry-content .header_author {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; 
    gap: 20px !important;
    border-bottom: 1px dashed #e0e0e0 !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    flex-wrap: nowrap !important;
}

/* ★★★ 写真の親枠の強制設定 ★★★ */
#main .entry-content .profile_widget-face_image {
    display: block !important;
    width: 80px !important;  /* 幅固定 */
    height: 80px !important; /* 高さ固定 */
    min-width: 80px !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    flex-shrink: 0 !important; /* 縮小させない */
}

/* ★★★ 画像本体（imgタグ）の強制表示設定 ★★★ */
#main .entry-content .profile_widget-face_image img,
#main .entry-content .profile_widget-face_image img.avatar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important; /* 透明度解除 */
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
    background-color: #fff !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
    box-sizing: border-box !important;
}

/* 5. 名前 */
#main .entry-content .author-infomation {
    text-align: left !important;
    flex-grow: 1 !important;
}
#main .entry-content .author-name {
    font-size: 18px !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
    border: none !important;
    background: none !important;
}
#main .entry-content .author-copy {
    font-size: 13px !important;
    color: #666 !important;
    margin: 0 !important;
    font-weight: normal !important;
}

/* 6. 説明文 */
#main .entry-content .author_profile_box-description p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
    color: #333 !important;
    text-align: left !important;
}

/* 7. SNS・リンク */
#main .entry-content .profile_widget-sns {
    text-align: center !important;
    margin-top: 15px !important;
}
#main .entry-content .author_list-more_link {
    text-align: right !important;
    font-size: 12px !important;
    margin-top: 5px !important;
}
#main .entry-content .author_list-more_link a {
    color: #f49faa !important; /* リンク色をピンクに */
    text-decoration: underline !important;
}

/* =========================================
   【女性用】全要素の幅制限を完全解除 & ワイド化
   ========================================= */

/* 1. タイトル、本文、サイドバーなし設定など、幅を縛るクラスをすべて100%に */
.page .l-content,
.page .l-main,
.page .l-main-wide,
.page .l-main-sb_none,
.page .main-article,
.page .entry-header,
.page .site-main {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. ページタイトルとメインコンテンツを 1280px で統一して中央に寄せる */
.page .entry-header,
.page .site-main {
    max-width: 1280px !important; /* コンテンツ幅 */
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. 記事の中身（文章が入る一番内側の箱）の制限も解除 */
.page .entry-content,
.page .d-article {
    width: 100% !important;
    max-width: 100% !important;
}

/* 4. タイトル（h1）が左端に寄りすぎないよう調整 */
.page .entry-title {
    padding-left: 0;
    margin-left: 0;
}

/* =========================================
   SWELL風 汎用ワイドボックス (wide-box)
   ========================================= */

/* ワイドボックス共通：画面いっぱいに広げる */
.wide-box {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 60px 0 !important; /* 上下の余白 */
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

/* 中身のコンテンツ幅：1280pxに制限して中央寄せ */
.wide-box > .wp-block-group__inner-container,
.wide-box > .wp-block-columns,
.wide-box > div {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
}

/* 背景：白 */
.wide-white {
    background-color: #ffffff !important;
}

/* 背景：薄いグレー */
.wide-gray {
    background-color: #f7f7f7 !important;
}

/* 背景：メインカラー（薄いピンク） */
.wide-main {
    background-color: #fff9fa !important; /* 女性用に薄いピンクへ変更 */
    border-top: 1px solid #ffeef2;
    border-bottom: 1px solid #ffeef2;
}

/* =========================================
   デザインパーツ（ピンクver）
   ========================================= */

/* 1. 囲み枠（Hannya Blocks Box） */
.page .wp-block-hannya-blocks-box.custom_box {
    background-color: #fff9fa; /* 薄いピンク */
    border: 1px solid #ffe0e5 !important;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 2. 見出し (H2) のデザイン調整 */
.page .entry-content h2,
.wide-box h2 {
    padding: 0.6em 1.2em !important;
    border-bottom: 2px solid #f49faa !important; /* ピンク線 */
    color: #333;
    font-size: 1.6em;
    margin-top: 80px !important;
    margin-bottom: 30px !important;
    clear: both;
    background-color: #fcfcfc;
    border-radius: 4px;
}

/* ワイドボックス直後のH2余白調整 */
.page .wide-box + h2,
.page .entry-content h2:first-of-type {
    margin-top: 40px !important;
}

/* スマホ用H2調整 */
@media (max-width: 600px) {
    .page .entry-content h2,
    .wide-box h2 {
        padding: 0.6em 0.8em !important;
        font-size: 1.3em;
        margin-top: 50px !important;
    }
}

/* 3. リスト (ul) チェックリスト風 */
.page .entry-content ul.wp-block-list,
.wide-box ul.wp-block-list {
    background: #fffcfc; /* ほんのりピンク白 */
    border: 1px dashed #f49faa; /* ピンクの点線 */
    padding: 1.5em 1.5em 1.5em 2.5em !important;
    border-radius: 5px;
}

.page .entry-content ul.wp-block-list li,
.wide-box ul.wp-block-list li {
    list-style: none !important;
    position: relative;
    margin-bottom: 10px;
    line-height: 1.6;
}

.page .entry-content ul.wp-block-list li::before,
.wide-box ul.wp-block-list li::before {
    content: '\f00c';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: -1.2em;
    color: #f49faa; /* ピンクのチェック */
}

/* 4. ページタイトル */
.page .entry-title {
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 3px solid #f49faa; /* ピンク下線 */
    color: #333;
    font-size: 2em !important;
    margin-bottom: 50px !important;
    position: relative;
    width: 100% !important;
    box-sizing: border-box;
}

.page .entry-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #e07b88; /* 濃いめのピンクでアクセント */
}

/* =========================================
   ボタン (CTA) デザイン（ピンクver）
   ========================================= */

/* コンテナ配置 */
.wide-box .wp-block-buttons {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* ボタン本体 */
.page .wp-block-button {
    width: auto !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
}

/* リンクスタイル */
.page .wp-block-button__link {
    background-color: #f49faa !important; /* メインピンク */
    color: #fff !important;
    border-radius: 5px !important;
    padding: 12px 45px 12px 25px !important;
    position: relative;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 180px !important;
    white-space: nowrap !important;
}

/* 矢印アイコン */
.page .wp-block-button__link::after {
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 15px !important;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9em;
}

/* ホバーアクション */
.page .wp-block-button__link:hover {
    opacity: 0.85;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(244, 159, 170, 0.4) !important;
}

.page .wp-block-button__link:hover::after {
    right: 10px !important;
    transition: right 0.3s ease;
}

/* スマホ用ボタン調整 */
@media (max-width: 600px) {
    .page .wp-block-buttons {
        width: 100% !important;
    }
    .page .wp-block-button {
        width: 90% !important;
        margin: 0 auto !important;
    }
    .page .wp-block-button__link {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }
}

/* 背景白ボタン (white-btn) */
.page .white-btn .wp-block-button__link {
    background-color: #ffffff !important;
    color: #f49faa !important; /* ピンク文字 */
    border: 2px solid #f49faa !important; /* ピンク枠 */
}
.page .white-btn .wp-block-button__link::after {
    color: #f49faa !important;
}
.page .white-btn .wp-block-button__link:hover {
    background-color: #fff9fa !important;
}

/* =========================================
   その他調整（メディアとテキスト等）
   ========================================= */

/* ブロック間の余白確保 */
.page .entry-content > *,
.wide-box .wp-block-group__inner-container > *,
.wide-box > * {
    margin-top: 0;
    margin-bottom: 2em !important;
}

/* メディアとテキストの垂直配置（Grid強制版） */
.wide-box .wp-block-media-text.is-vertically-aligned-center {
    display: grid !important;
    align-items: center !important;
}
.wide-box .wp-block-media-text.is-vertically-aligned-center > * {
    align-self: center !important;
}
.wide-box .wp-block-media-text__media img {
    height: auto !important;
    max-height: 100%;
    object-fit: contain;
}

/* スマホ時のメディアとテキスト */
@media (max-width: 600px) {
    .page .wp-block-media-text.is-stacked-on-mobile,
    .wide-box .wp-block-media-text {
        display: block !important;
    }
    .page .wp-block-media-text__media {
        margin-bottom: 1.5em !important;
    }
}

/* メディアとテキストの調整 */
.page .wp-block-media-text__content p {
    margin-bottom: 1.5em !important;
    line-height: 1.8 !important;
}