@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://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

/* ==========================================================================
   AI Home Lab - 追加CSS (ホームページ用リセット + 個別記事ページ用フラットデザイン)
   貼り付け先: WordPress管理画面「外観」＞「カスタマイズ」＞「追加CSS」
   ========================================================================== */

/* ==========================================================================
   PART 1: ホームページ専用デザイン (元々のホームページ用CSS)
   ========================================================================== */

/* メインコンテンツ枠（白い箱）や外側の器を完全に透明化 */
.home #container, .page-id-1030 #container,
.home #content, .page-id-1030 #content,
.home #content-in, .page-id-1030 #content-in,
.home #main, .page-id-1030 #main,
.home .main, .page-id-1030 .main,
.home .content, .page-id-1030 .content,
.home .entry-content, .page-id-1030 .entry-content,
.home article, .page-id-1030 article,
.home .post, .page-id-1030 .post,
.home .type-page, .page-id-1030 .type-page,
.home .page, .page-id-1030 .page {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important; /* 2重背景防止 */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ホームページ全体の余白と幅制限を解除 */
.home .content-in, .page-id-1030 .content-in,
.home .wrap, .page-id-1030 .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Cocoonデフォルトのタイトルやアイキャッチを非表示 */
.home .entry-title, .page-id-1030 .entry-title,
.home .eye-catch, .page-id-1030 .eye-catch {
    display: none !important;
}

/* Cocoon標準のヘッダー・フッター・サイドバー・固定フッターボタン・SNSボタンを非表示 */
.home #header-container, .page-id-1030 #header-container,
.home header.header, .page-id-1030 header.header,
.home #header, .page-id-1030 #header,
.home .header, .page-id-1030 .header,
.home .site-header, .page-id-1030 .site-header,
.home .navi, .page-id-1030 .navi,
.home #navi, .page-id-1030 #navi,
.home #footer, .page-id-1030 #footer,
.home #sidebar, .page-id-1030 #sidebar,
.home .sidebar, .page-id-1030 .sidebar,
.home .footer-mobile-buttons, .page-id-1030 .footer-mobile-buttons,
.home .sns-share, .page-id-1030 .sns-share,
.home .sns-follow, .page-id-1030 .sns-follow {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 全体背景の設定（パララックス固定） */
body.home, body.page-id-1030 {
    background-image: url('https://tiptop.link/wp-content/uploads/2023/09/background-pc-3.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    color: #333333;
    overflow-x: hidden !important;
}

/* 全体の白いフィルターを無効化し、背景画像を鮮明に見せる */
body.home::before, body.page-id-1030::before {
    display: none !important;
}

/* ホーム画面中央のタイトル (AI Home Lab) の白い背景を消し、サイズを大きく強調 */
.hero-title,
h2.hero-title {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    font-size: 64px !important;
    font-weight: 300 !important;
    letter-spacing: 6px !important;
}

/* スマホ表示の時に文字サイズがはみ出さないように調整 */
@media screen and (max-width: 768px) {
    .hero-title,
    h2.hero-title {
        font-size: 38px !important;
        letter-spacing: 4px !important;
    }
}

/* 追従カスタムヘッダー & ドロワーメニュー */
.custom-header {
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 999999 !important; /* 最前面に配置 */
    background: transparent !important;
    padding: 20px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    transition: background 0.3s ease-in-out !important;
}
.header-scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.custom-header .site-name {
    font-size: 32px !important;
    font-family: 'Poiret One', cursive, "Noto Sans JP", sans-serif !important;
    letter-spacing: 4px !important;
    color: #ffffff !important; /* 初期状態は白 */
    text-align: center !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: color 0.3s !important;
}
.header-scrolled .site-name {
    color: #333333 !important; /* スクロール後は黒 */
}

/* ハンバーガーボタン */
.menu-trigger {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 20px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    z-index: 1000001 !important; /* メニューよりさらに前面 */
    padding: 0 !important;
}
.menu-trigger span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #ffffff !important; /* 初期状態は白 */
    transition: all 0.3s ease-in-out !important;
}
.header-scrolled .menu-trigger span {
    background-color: #333333 !important; /* スクロール後は黒 */
}
.menu-trigger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
    background-color: #333333 !important; /* 開いている時は黒 */
}
.menu-trigger.active span:nth-child(2) {
    opacity: 0 !important;
}
.menu-trigger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg) !important;
    background-color: #333333 !important; /* 開いている時は黒 */
}

/* ドロワーメニュー */
.drawer-menu {
    position: fixed !important;
    top: 0 !important;
    left: -300px !important;
    width: 300px !important;
    height: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000000 !important; /* ヘッダーの追従バーより前面 */
    transition: all 0.3s ease-in-out !important;
    padding: 80px 24px 24px !important;
    box-sizing: border-box !important;
}
.drawer-menu.active {
    left: 0 !important;
}
.drawer-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.drawer-nav li {
    margin-bottom: 24px !important;
}
.drawer-nav a {
    font-size: 18px !important;
    font-family: 'Poiret One', cursive, "Noto Sans JP", sans-serif !important;
    letter-spacing: 2px !important;
    color: #333333 !important;
    display: block !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #eeeeee !important;
    text-decoration: none !important;
}
.drawer-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    z-index: 999998 !important; /* ヘッダーの背面、オーバーレイの前面 */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease-in-out !important;
}
.drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ヒーロー ＆ プロフィール（透過）- 2重背景の防止 */
.hero-profile-wrap {
    position: relative !important;
    margin-bottom: 80px !important;
    background: transparent !important;
    background-image: none !important;
}
.hero {
    height: 60vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: transparent !important;
    background-image: none !important;
}
.profile-section {
    background: transparent !important;
    background-color: transparent !important;
    padding: 60px 0 100px !important;
}

/* プロフィール画像とテキスト */
.profile-container {
    display: flex !important;
    align-items: center !important;
    gap: 6% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}
.profile-image {
    width: 180px !important;
    height: 180px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid #ffffff !important;
}
.profile-image img,
.profile-image picture img,
.profile-image figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}
.profile-id {
    font-family: 'Poiret One', cursive, "Noto Sans JP", sans-serif !important;
    font-size: 24px !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px !important;
    color: #ffffff !important;
}
.profile-text p {
    font-size: 14px !important;
    line-height: 2.2 !important;
    color: #eeeeee !important;
}

@media (max-width: 768px) {
    .profile-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 30px !important;
    }
    .profile-image {
        width: 150px !important;
        height: 150px !important;
    }
}

/* 新着Blogセクション（不透明白背景） */
.latest-articles {
    background-color: rgba(255, 255, 255, 0.95) !important;
    padding: 80px 0 !important;
    margin-bottom: 80px !important;
    color: #333333 !important;
}
.latest-articles .section-title {
    color: #333333 !important;
}
.latest-articles .wp-block-latest-posts__post-title {
    color: #333333 !important;
    font-weight: 500 !important;
}

/* Gutenberg「最新の投稿」ブロックのグリッドと画像を強制調整 */
.latest-articles .wp-block-latest-posts.is-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    padding: 0 !important;
    list-style: none !important;
}
.latest-articles .wp-block-latest-posts.is-grid li {
    width: 30% !important;
    margin-bottom: 5% !important;
    background: transparent !important;
    margin-right: 0 !important;
}
.latest-articles .wp-block-latest-posts__featured-image,
.latest-articles .wp-block-latest-posts__featured-image a {
    width: 100% !important;
    height: 200px !important;
    margin: 0 0 15px 0 !important;
    display: block !important;
    overflow: hidden !important;
}
.latest-articles .wp-block-latest-posts__featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: grayscale(20%) !important;
    transition: filter 0.3s ease !important;
}
.latest-articles li:hover .wp-block-latest-posts__featured-image img {
    filter: grayscale(0%) !important;
}

@media (max-width: 768px) {
    .latest-articles .wp-block-latest-posts.is-grid li {
        width: 100% !important;
    }
}

/* View All (more) Gutenbergボタン & 各カテゴリmoreリンク */
.more-link,
.is-style-more-link,
.is-style-more-link .wp-block-button__link,
.wp-block-button.is-style-more-link a.wp-block-button__link {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #333333 !important;
    padding: 0 50px 0 10px !important;
    font-size: 18px !important;
    font-family: 'Poiret One', cursive !important;
    letter-spacing: 2px !important;
    position: relative !important;
    display: inline-block !important;
    line-height: 1.5 !important;
    border-radius: 0 !important;
    text-align: right !important;
    width: auto !important;
    min-width: 0 !important;
    text-decoration: none !important;
}
.more-link::before,
.is-style-more-link .wp-block-button__link::before,
.wp-block-button.is-style-more-link a.wp-block-button__link::before {
    content: '' !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 0 !important;
    width: 40px !important;
    height: 1px !important;
    background: #333333 !important;
    transition: all .3s !important;
}
.more-link::after,
.is-style-more-link .wp-block-button__link::after,
.wp-block-button.is-style-more-link a.wp-block-button__link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    right: 0 !important;
    width: 10px !important;
    height: 1px !important;
    background: #333333 !important;
    transform: rotate(35deg) !important;
    transition: all .3s !important;
}
.more-link:hover::before,
.more-link:hover::after,
.is-style-more-link .wp-block-button__link:hover::before,
.is-style-more-link .wp-block-button__link:hover::after,
.wp-block-button.is-style-more-link a.wp-block-button__link:hover::before,
.wp-block-button.is-style-more-link a.wp-block-button__link:hover::after {
    right: -10px !important;
}

/* Z型レイアウト（画像・動画/ツール制作）- 左右フルレンジ化 */
.intro3 {
    background-color: #ffffff !important;
    background: #ffffff !important;
    padding: 100px 0 !important;
    margin-bottom: 100px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #333333 !important;
}
.service-block {
    margin-bottom: 140px !important;
}
.service-block:last-child {
    margin-bottom: 0 !important;
}
.service-in {
    max-width: 960px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8% !important;
    padding: 0 20px !important;
}
.service-block.row-reverse .service-in {
    flex-direction: row-reverse !important;
}
.image-box {
    flex: 1 !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}
.image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: grayscale(40%) !important;
    transition: transform 0.8s, filter 0.8s !important;
}
.service-block:hover .image-box img {
    transform: scale(1.03) !important;
    filter: grayscale(0%) !important;
}
.text-box {
    flex: 1 !important;
    padding: 20px !important;
}
.service-title {
    font-size: 42px !important;
    margin: 0 0 8px 0 !important;
    color: #999999 !important;
    font-family: 'Poiret One', cursive !important;
    letter-spacing: 6px !important;
    font-weight: 300 !important;
}
.service-subtitle {
    font-size: 20px !important;
    margin: 0 0 24px 0 !important;
    letter-spacing: 4px !important;
    color: #333333 !important;
}
.text-box p {
    font-size: 14px !important;
    line-height: 2.4 !important;
    color: #555555 !important;
}

@media (max-width: 768px) {
    .service-in {
        flex-direction: column !important;
        width: 100% !important;
        gap: 30px !important;
    }
    .image-box, .text-box {
        width: 100% !important;
    }
}

/* お問い合わせセクション（透過 ＆ 白文字 ＆ 透過ボタン） */
.contact-section {
    background-color: transparent !important;
    background: transparent !important;
    text-align: center !important;
    padding: 120px 20px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}
.contact-title {
    font-size: 30px !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
}
.contact-text {
    color: #eeeeee !important;
    margin-bottom: 40px !important;
}
.contact-btn {
    display: inline-block !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    padding: 18px 60px !important;
    font-size: 16px !important;
    letter-spacing: 3px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease-in-out !important;
    text-decoration: none !important;
}
.contact-btn:hover {
    background-color: #ffffff !important;
    color: #333333 !important;
    opacity: 1 !important;
}

/* カスタムフッター */
.custom-footer {
    display: block !important;
    text-align: center !important;
    padding: 60px 20px !important;
    background-color: transparent !important;
    background: transparent !important;
    color: #cccccc !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    clear: both !important;
}
.custom-footer .footer-links {
    margin-bottom: 20px !important;
}
.custom-footer .footer-links a {
    color: #eeeeee !important;
    margin: 0 15px !important;
    transition: color 0.3s !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.custom-footer .footer-links a:hover {
    color: #ffffff !important;
}

/* 共通レイアウト (フルワイド対応) */
.home .latest-articles .wrap,
.home .profile-section .wrap,
.page-id-1030 .latest-articles .wrap,
.page-id-1030 .profile-section .wrap {
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* アニメーション用の基本CSS */
.fade-in-target {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.0s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                transform 1.0s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.fade-in-target.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* お問い合わせタイトルの白つぶれ解消 */
.contact-section .contact-title,
.contact-section h2.contact-title {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
    color: #ffffff !important;
}


/* ==========================================================================
   PART 2: 個別記事ページ専用デザイン (背景・カラムのベージュ一色統一)
   ========================================================================== */

/* --- CSS変数定義（背景とカラムを同一のベージュに統一） --- */
body.single-post,
body.archive,
body.category,
body.tag {
    --youko-text-color: #333;
    --youko-background-color: #faf7f2; /* 上品な薄ベージュ */
    --youko-background-color-opacity: rgba(250, 247, 242, 0.7);
    --youko-background-color2: #c4c6d1;
    --youko-accent-color: rgba(157, 124, 146, 0.22);
    --youko-white-color: #faf7f2; /* カラム（カード）の色も背景と同じベージュに統一 */
    --youko-gray-color: #333;
}

/* 1. 全体背景とフォントの設定 (ベージュ背景) */
body.single-post,
body.archive,
body.category,
body.tag {
    background-color: var(--youko-background-color) !important;
    background: var(--youko-background-color) !important;
    background-image: none !important; /* 背景画像を完全に廃止 */
    color: var(--youko-text-color) !important;
    letter-spacing: 2px !important;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif !important;
    line-height: 2.0 !important;
    -webkit-font-smoothing: antialiased;
}

/* 1-2. コンテンツコンテナのリセット (カラム間の隙間や外枠を完全に透明化) */
body.single-post #container,
body.single-post #content,
body.single-post #content-in,
body.archive #container,
body.archive #content,
body.archive #content-in,
body.category #container,
body.category #content,
body.category #content-in {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 1-3. メインエリアとサイドバーのグレー背景化 (標準の白い塊を解除) */
body.single-post .main,
body.single-post .sidebar,
body.archive .main,
body.archive .sidebar,
body.category .main,
body.category .sidebar {
    background-color: var(--youko-background-color) !important;
    background: var(--youko-background-color) !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body.single-post main.main,
body.single-post div.sidebar,
body.archive main.main,
body.archive div.sidebar,
body.category main.main,
body.category div.sidebar {
    padding-top: 50px !important; /* 上部の余白調整 */
}

/* 2. 本文エリア (article.article) のベージュ化・影なしフラット化 */
body.single-post article.article {
    background-color: var(--youko-white-color) !important;
    border: none !important;
    border-radius: 0px !important; /* カード状の丸みも排除して一体化 */
    box-shadow: none !important; /* 影を完全に消去 */
    padding: 50px 40px !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
    body.single-post article.article {
        padding: 30px 15px !important;
    }
}

/* 3. 記事下ナビゲーションエリアのベージュ化・影なしフラット化 */
body.single-post .under-entry-content,
body.single-post .comment-area,
body.single-post .related-entries,
body.single-post .pager-post-navi {
    background-color: var(--youko-white-color) !important;
    border: none !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    padding: 40px 30px !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
}

/* 4. サイドバーウィジェットのベージュ化・影なしフラット化 */
body.single-post .sidebar .widget,
body.archive .sidebar .widget,
body.category .sidebar .widget {
    background-color: var(--youko-white-color) !important;
    border: none !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    padding: 30px 25px !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
}

/* 5. サイドバーウィジェットタイトル (Poiret Oneフォント) */
body.single-post .sidebar .widget-title,
body.single-post .sidebar .widget-sidebar-title,
body.archive .sidebar .widget-title,
body.category .sidebar .widget-title {
    font-family: 'Poiret One', cursive, "Noto Sans JP", sans-serif !important;
    color: var(--youko-text-color) !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    border-bottom: 1px solid #333333 !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
    letter-spacing: 1px !important;
}

/* 6. サイドバーのカテゴリーボタン丸型化 */
body.single-post .sidebar .widget_categories ul li a,
body.archive .sidebar .widget_categories ul li a,
body.category .sidebar .widget_categories ul li a {
    display: block !important;
    padding: 10px !important;
    text-align: center !important;
    margin: 0 auto 10px auto !important;
    width: 220px !important;
    border: solid 1px #eeeeee !important;
    border-radius: 100px !important;
    background-color: var(--youko-white-color) !important;
    transition: all 0.3s ease-in-out !important;
}

body.single-post .sidebar .widget_categories ul li a:hover,
body.archive .sidebar .widget_categories ul li a:hover,
body.category .sidebar .widget_categories ul li a:hover {
    background-color: var(--youko-text-color) !important;
    color: var(--youko-white-color) !important;
    border-color: var(--youko-text-color) !important;
    text-decoration: none !important;
}

body.single-post .sidebar li.cat-item,
body.archive .sidebar li.cat-item,
body.category .sidebar li.cat-item {
    margin-bottom: 0 !important;
    list-style: none !important;
}

body.single-post .sidebar .widget_categories ul,
body.archive .sidebar .widget_categories ul,
body.category .sidebar .widget_categories ul {
    padding-left: 0 !important;
}

/* 7. H2, H3, H4 見出しのデザイン移植 */
/* H2見出し: 薄モーヴ背景、極太文字、ボーダーなし、文字間隔4px */
body.single-post .entry-content h2,
body.single-post .article h2 {
    font-size: 1.35rem !important;
    color: var(--youko-text-color) !important;
    background-color: var(--youko-accent-color) !important;
    border: none !important;
    padding: 15px 20px !important;
    margin: 2.2em 0 1.2em 0 !important;
    font-weight: 600 !important;
    letter-spacing: 4px !important;
    line-height: 1.5 !important;
    border-radius: 4px !important;
}

/* H3見出し: 左側アクセントカラー縦線のみ、他ボーダーなし、文字間隔2px */
body.single-post .entry-content h3,
body.single-post .article h3 {
    font-size: 1.15rem !important;
    color: var(--youko-text-color) !important;
    background: transparent !important;
    border-left: 4px solid #9d7c92 !important; /* アクセントカラー */
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 5px 0 5px 15px !important;
    margin: 2em 0 1em 0 !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
}

/* H4見出し: シンプルな太字 */
body.single-post .entry-content h4,
body.single-post .article h4 {
    font-size: 1.05rem !important;
    color: var(--youko-text-color) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 1.8em 0 0.8em 0 !important;
    font-weight: 600 !important;
}

/* 8. 目次 (TOC) のデザイン移植 (矢印アイコン化) */
body.single-post .toc,
body.single-post .toc-widget-box {
    border: none !important;
    padding: 2em !important;
    background: var(--youko-white-color) !important;
    box-shadow: none !important;
}

body.single-post .toc ol {
    list-style: none !important;
    padding-left: 0 !important;
}

body.single-post .toc ol li {
    font-weight: 700 !important;
    line-height: 1.5 !important;
    padding: 0 0 0 1.8em !important;
    position: relative !important;
    margin: .8em !important;
}

body.single-post .toc ol li::before {
    opacity: .4 !important;
    font-family: "Font Awesome 5 Free" !important;
    content: "\f138" !important; /* 矢印アイコン */
    position: absolute !important;
    left: 0 !important;
    color: #9d7c92 !important; /* アクセント色 */
    font-weight: 900 !important;
}

body.single-post .toc li li {
    font-weight: 400 !important;
    padding-top: .5em !important;
    margin-top: 0 !important;
}

body.single-post .toc-title {
    color: var(--youko-text-color) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #eeeeee !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
}

/* 9. グローバルナビゲーションの背景透明化・白文字化（ホーム画面と統一） */
body.single-post #navi,
body.single-post .navi,
body.archive #navi,
body.archive .navi,
body.category #navi,
body.category .navi {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0px !important;
    margin-top: 10px !important;
}

body.single-post .navi-in a,
body.archive .navi-in a,
body.category .navi-in a {
    position: relative !important;
    display: inline-block !important;
    color: #ffffff !important; /* 白文字に変更 */
    text-decoration: none !important;
    font-family: 'Poiret One', cursive, "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    padding: 15px 25px !important;
    transition: opacity 0.3s ease !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

body.single-post .navi-in a::after,
body.archive .navi-in a::after,
body.category .navi-in a::after {
    position: absolute !important;
    bottom: 8px !important;
    left: 25px !important;
    content: '' !important;
    width: calc(100% - 50px) !important;
    height: 1px !important;
    background: #ffffff !important; /* 白いライン */
    transform: scale(0, 1) !important;
    transform-origin: left top !important;
    transition: transform .3s ease !important;
}

body.single-post .navi-in a:hover::after,
body.archive .navi-in a:hover::after,
body.category .navi-in a:hover::after {
    transform: scale(1, 1) !important;
}

body.single-post .navi-in a:hover,
body.archive .navi-in a:hover,
body.category .navi-in a:hover {
    background-color: transparent !important;
    opacity: 0.8 !important;
}

/* 10. 追従ヘッダー (個別記事用) の夜景背景化・白文字化（ホーム画面と統一） */
body.single-post #header-container,
body.archive #header-container,
body.category #header-container {
    background-image: url('https://tiptop.link/wp-content/uploads/2023/09/background-pc-3.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    padding: 50px 0 15px 0 !important; /* ヘッダーの縦幅 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/* 暗色オーバーレイを重ねて文字の可読性を確保 */
body.single-post #header-container::before,
body.archive #header-container::before,
body.category #header-container::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important; /* 40%暗フィルター */
    z-index: 1 !important;
}

/* コンテンツをオーバーレイより前面に出す */
body.single-post #header-container-in,
body.archive #header-container-in,
body.category #header-container-in {
    position: relative !important;
    z-index: 2 !important;
}

body.single-post header.header,
body.single-post #header,
body.single-post .site-header,
body.archive header.header,
body.archive #header,
body.archive .site-header,
body.category header.header,
body.category #header,
body.category .site-header {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* サイトロゴのスタイル調整 */
body.single-post .logo-header a,
body.single-post .site-name a,
body.archive .logo-header a,
body.archive .site-name a,
body.category .logo-header a,
body.category .site-name a {
    font-family: 'Poiret One', cursive, "Noto Sans JP", sans-serif !important;
    font-size: 32px !important;
    letter-spacing: 4px !important;
    color: #ffffff !important; /* 通常時（夜景背景の上）は白文字 */
    text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    text-decoration: none !important;
    font-weight: 300 !important;
    transition: color 0.3s ease, opacity 0.3s ease !important;
    display: inline-block !important;
}

body.single-post .logo-header a:hover,
body.single-post .site-name a:hover,
body.archive .logo-header a:hover,
body.archive .site-name a:hover,
body.category .logo-header a:hover,
body.category .site-name a:hover {
    opacity: 0.8 !important;
}

/* スクロール追従時（固定ヘッダー時）のスタイル（ホーム画面と統一） */
body.single-post .header-fixed,
body.archive .header-fixed,
body.category .header-fixed {
    background-color: rgba(255, 255, 255, 0.95) !important;
    background-image: none !important; /* 夜景背景を消す */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    padding: 20px 0 !important; /* スクロール時は少し高さを縮める */
    transition: all 0.3s ease-in-out !important;
}

body.single-post .header-fixed::before,
body.archive .header-fixed::before,
body.category .header-fixed::before {
    display: none !important; /* 暗色オーバーレイを非表示に */
}

body.single-post .header-fixed .logo-header a,
body.single-post .header-fixed .site-name a,
body.archive .header-fixed .logo-header a,
body.archive .header-fixed .site-name a,
body.category .header-fixed .logo-header a,
body.category .header-fixed .site-name a {
    color: #333333 !important; /* スクロール後は黒文字に変更 */
    text-shadow: none !important;
}

/* 10-2. スマホ・タブレット表示用のレスポンシブ調整（ホーム画面・TipTopと統一） */
@media screen and (max-width: 768px) {
    /* 通常時のヘッダー余白をスマホ用に調整 */
    body.single-post #header-container,
    body.archive #header-container,
    body.category #header-container {
        padding: 30px 0 10px 0 !important; /* 縦余白を縮小 */
    }
    
    /* サイトロゴ文字サイズをスマホ画面に合わせて縮小（はみ出し防止） */
    body.single-post .logo-header a,
    body.single-post .site-name a,
    body.archive .logo-header a,
    body.archive .site-name a,
    body.category .logo-header a,
    body.category .site-name a {
        font-size: 24px !important;
        letter-spacing: 2px !important;
    }
    
    /* 追従（固定）時のヘッダー余白とロゴサイズを調整 */
    body.single-post .header-fixed,
    body.archive .header-fixed,
    body.category .header-fixed {
        padding: 12px 0 !important;
    }
    
    body.single-post .header-fixed .logo-header a,
    body.single-post .header-fixed .site-name a,
    body.archive .header-fixed .logo-header a,
    body.archive .header-fixed .site-name a,
    body.category .header-fixed .logo-header a,
    body.category .header-fixed .site-name a {
        font-size: 20px !important;
    }
    
    /* 記事本文エリアのスマホ用左右余白の最適化 */
    body.single-post article.article {
        padding: 30px 15px !important;
    }
}

/* 11. パンくずリスト、投稿メタ情報、引用 */
body.single-post .breadcrumbs,
body.single-post .post-meta,
body.single-post .post-update {
    color: #888888 !important;
    font-size: 0.8rem !important;
}

body.single-post .breadcrumbs a {
    color: #888888 !important;
    border-bottom: none !important;
}

body.single-post .breadcrumbs a:hover {
    color: #111111 !important;
}

body.single-post .breadcrumb span {
    display: none !important; /* 余分な矢印などの非表示 */
}

/* 引用ブロック */
body.single-post blockquote,
body.single-post .wp-block-quote {
    background-color: #fafafa !important;
    border-left: 2px solid #999999 !important;
    color: #555555 !important;
    padding: 15px 20px !important;
    margin: 1.8em 0 !important;
    border-radius: 0 4px 4px 0 !important;
}

/* 12. スクロールバーのカスタマイズ */
body.single-post,
body.archive,
body.category {
    scrollbar-color: var(--youko-text-color) var(--youko-background-color) !important;
}

body.single-post::-webkit-scrollbar,
body.archive::-webkit-scrollbar,
body.category::-webkit-scrollbar {
    width: 8px !important;
}

body.single-post::-webkit-scrollbar-track,
body.archive::-webkit-scrollbar-track,
body.category::-webkit-scrollbar-track {
    background: var(--youko-background-color) !important;
    border-radius: 20px !important;
}

body.single-post::-webkit-scrollbar-thumb,
body.archive::-webkit-scrollbar-thumb,
body.category::-webkit-scrollbar-thumb {
    background: var(--youko-text-color) !important;
    border-radius: 20px !important;
}