@charset "UTF-8";

/* ==============================================
   基本設定 (Base)
   ============================================== */
:root {
    --header-height-pc: 70px;
    --header-height-sp: 60px;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: var(--color-bg, #f9f9f9);
    color: var(--color-text, #333);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* ==============================================
   ヘッダー共通 (Base Styles)
   ============================================== */
.site-header {
    width: 100%;
    z-index: 1000;
    background: var(--header-bg, #fff);
    color: var(--header-text, #333);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ロゴ */
.site-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
}

/* ナビゲーション */
.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
}
.main-navigation a {
    font-weight: bold;
    color: var(--header-menu, #333);
}

/* ハンバーガーボタン (デフォルト非表示) */
.menu-toggle { display: none; }

/* ▼▼ 追加：スマホメニューの親枠をPCでは隠す ▼▼ */
.sp-menu-container {
    display: none;
}

/* ==============================================
   🖥️ PC用レイアウト (769px以上)
   ※ここでPCの設定を適用します。スマホには影響しません。
   ============================================== */
@media (min-width: 769px) {

    /* --- 共通：PCの高さと余白 --- */
    .header-inner { height: var(--header-height-pc); }
    body { padding-top: var(--header-height-pc); }

    /* ----------------------------------
       PC 1. ベーシック型 (basic-fixed)
       ---------------------------------- */
    body.pc-layout-basic-fixed .site-header {
        position: fixed; top: 0; left: 0;
    }
    
    /* ロゴ中央寄せ */
    body.pc-layout-basic-fixed.logo-pos-center .header-inner {
        flex-direction: column; justify-content: center; height: auto; padding: 15px 0; min-height: var(--header-height-pc);
    }
    body.pc-layout-basic-fixed.logo-pos-center {
        padding-top: calc(var(--header-height-pc) + 50px);
    }

    /* ----------------------------------
       PC 2. 背景なし・文字のみ (minimal)
       ---------------------------------- */
    body.pc-layout-minimal .site-header {
        position: absolute; top: 0; left: 0;
        background: transparent !important;
        box-shadow: none !important;
    }
    body.pc-layout-minimal { padding-top: 0 !important; }

    /* ロゴ中央寄せ */
    body.pc-layout-minimal.logo-pos-center .header-inner {
        flex-direction: column; justify-content: center; height: auto; padding: 20px 0;
    }

    /* ----------------------------------
       PC 3. 浮遊型 (float-round)
       ---------------------------------- */
    body.pc-layout-float-round .site-header {
        position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
        width: 95%; max-width: 1200px;
        border-radius: 50px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    body.pc-layout-float-round { padding-top: 120px; }
    
    /* スタイル：ロング */
    body.pc-layout-float-round.float-style-long .site-header {
        width: 98%; max-width: none; border-radius: 10px; top: 10px;
    }
    /* スタイル：スリム */
    body.pc-layout-float-round.float-style-slim .site-header {
        background: transparent !important; box-shadow: none !important; pointer-events: none;
    }
    body.pc-layout-float-round.float-style-slim .header-inner {
        pointer-events: auto; justify-content: center; padding: 0;
    }
    body.pc-layout-float-round.float-style-slim .site-branding {
        position: fixed; top: 20px; left: 30px;
        background: rgba(255,255,255,0.9); padding: 10px 20px; border-radius: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    body.pc-layout-float-round.float-style-slim .main-navigation {
        background: var(--header-bg, #fff); padding: 0 40px; border-radius: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); height: 60px; display: flex; align-items: center;
    }

    /* ----------------------------------
   PC 4. 縦向き型 (vertical-left) - 強制中央揃え
   ---------------------------------- */
body.pc-layout-vertical-left .site-header {
    position: fixed; top: 0; left: 0;
    width: 260px; height: 100vh;
    padding: 40px 0;
    
    /* フレックスボックスで配置 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 左右中央揃え */
    justify-content: flex-start;
    
    text-align: center !important;
}

body.pc-layout-vertical-left .header-inner {
    width: 100% !important; /* 幅いっぱいに広げる */
    margin: 0 !important;
    padding: 0 !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 子要素を中央へ */
    
    gap: 20px;
}

/* ロゴの調整 */
body.pc-layout-vertical-left .site-branding,
body.pc-layout-vertical-left .site-title {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* 画像を中央へ */
    align-items: center !important;
    margin: 0 !important;
}
body.pc-layout-vertical-left .site-branding img {
    margin: 0 auto !important;
    display: block;
}


/* メニュー本体 */
body.pc-layout-vertical-left .main-navigation {
    width: 100% !important;
    margin: 0 !important;
}

body.pc-layout-vertical-left .main-navigation ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* リスト全体を中央へ */
    width: 100% !important;
    
    padding: 0 !important;
    margin: 0 !important;
    gap: 15px !important; /* 間隔調整 */
}

body.pc-layout-vertical-left .main-navigation ul li {
    display: block !important;
    width: 100% !important;
    text-align: center !important; /* 文字を中央へ */
    padding: 0 !important;
    margin: 0 !important;
}

/* リンク文字の設定 */
body.pc-layout-vertical-left .main-navigation a {
    /* inline-block にして、親の text-align: center に従わせる */
    display: inline-block !important; 
    text-align: center !important;
    width: auto !important; /* 幅は文字なり */
    white-space: nowrap;
}


/* 縦向き設定 (body) */
body.pc-layout-vertical-left { 
    padding-top: 0 !important; 
    padding-left: 260px; 
}

/* 幅調整 */
body.pc-layout-vertical-left.width-size-s .site-header { width: 200px; }
body.pc-layout-vertical-left.width-size-s { padding-left: 200px; }
body.pc-layout-vertical-left.width-size-l .site-header { width: 320px; }
body.pc-layout-vertical-left.width-size-l { padding-left: 320px; }
	/* ==============================================
       ▼▼ PCメニュー ホバーエフェクト ▼▼
       ============================================== */
    
    /* 共通設定：リンクの基準位置 */
    .main-navigation a {
        position: relative;
        display: inline-block;
        padding: 5px 0; /* 上下に少し余白 */
        transition: color 0.3s;
    }

    /* ------------------------------
       ① センターライン (line)
       ------------------------------ */
    body.menu-hover-line .main-navigation a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%; /* 中央配置 */
        transform: translateX(-50%);
        width: 0; /* 最初は幅0 */
        height: 2px;
        background-color: var(--color-main, #333); /* テーマカラー */
        transition: width 0.3s ease-out;
    }
    body.menu-hover-line .main-navigation a:hover::after {
        width: 100%; /* ホバーで全幅に */
    }

    /* ------------------------------
       ② アンダーライン (underline)
       ------------------------------ */
    body.menu-hover-underline .main-navigation a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--color-main, #333);
        transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    body.menu-hover-underline .main-navigation a:hover::after {
        width: 100%;
    }

    /* ------------------------------
       ③ 背景ハイライト (bg)
       ------------------------------ */
    body.menu-hover-bg .main-navigation a {
        padding: 8px 16px; /* ボタンっぽく余白追加 */
        border-radius: 4px;
        transition: all 0.3s;
    }
    body.menu-hover-bg .main-navigation a:hover {
        background-color: rgba(0,0,0,0.05); /* うっすらグレー */
        color: var(--color-main, #333);
    }

    /* ------------------------------
       ④ 浮き上がり (float)
       ------------------------------ */
    body.menu-hover-float .main-navigation a {
        transition: transform 0.3s, color 0.3s;
    }
    body.menu-hover-float .main-navigation a:hover {
        transform: translateY(-3px); /* 少し上に動く */
        color: var(--color-main, #333);
        text-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 影をつける */
    }
}


/* ==============================================
   📱 スマホ用レイアウト (768px以下)
   ============================================== */
@media (max-width: 768px) {
    
    /* --- 1. 共通リセット & 基本設定 --- */
    .header-inner { height: var(--header-height-sp) !important; }
    
    /* デフォルトはヘッダー分の余白を空ける */
    body {
        padding-top: var(--header-height-sp) !important;
        padding-left: 0 !important;
    }
    
    .site-header {
        position: fixed; top: 0; left: 0; width: 100%; height: auto;
        border-radius: 0; transform: none; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        background: var(--header-bg, #fff);
        transition: background-color 0.3s, backdrop-filter 0.3s;
    }

    /* メニュー関連 */
    .main-navigation { display: none; }
    .menu-toggle { display: block; }
    .menu-toggle { z-index: 10001; } /* ハンバーガーを最前面に */


    /* --- 2. メインビジュアルの高さ・位置修正 --- */
    .main-visual {
        margin-top: 0 !important;
        padding-top: 0 !important;
        
        /* ★修正：画面の残りいっぱいまで広げる (100vh - ヘッダーの高さ) */
        height: calc(100vh - var(--header-height-sp)) !important;
        min-height: 400px;
    }


    /* --- 3. レイアウト別設定 --- */

    /* ▼▼ ベーシック型 (Basic) ▼▼ */
    /* A. すりガラス風 (Glass) の場合 */
    body.sp-layout-basic.sp-glass-glass {
        padding-top: 0 !important;
    }
    
    body.sp-layout-basic.sp-glass-glass .site-header {
        /* ▼▼ 修正：透明度を下げて、ぼかしを強くする ▼▼ */
        background-color: rgba(255, 255, 255, 0.6) !important; /* 0.75 -> 0.6 に変更（より透ける） */
        backdrop-filter: blur(20px); /* 12px -> 20px に変更（磨りガラス感をアップ） */
        -webkit-backdrop-filter: blur(20px);
        
        border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 境界線を少し白く光らせる */
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    }

    /* すりガラスの時は、メインビジュアルを画面いっぱいに広げる */
    body.sp-layout-basic.sp-glass-glass .main-visual {
        height: 100vh !important;
    }

    /* B. ノーマル (Normal) の場合 */
    body.sp-layout-basic.sp-glass-normal .site-header {
        background: var(--header-bg, #fff) !important; /* 不透明 */
        backdrop-filter: none;
    }


    /* ▼▼ 背景なし・文字のみ (Minimal) ▼▼ */
    body.sp-layout-minimal .site-header {
        position: absolute;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    body.sp-layout-minimal {
        padding-top: 0 !important;
    }
    body.sp-layout-minimal .main-visual {
        height: 100vh !important;
    }


    /* --- 4. その他のリセット（縦型・浮遊型の解除） --- */
    
    /* ロゴ配置リセット */
    body.logo-pos-center .header-inner {
        flex-direction: row !important;
        padding: 0 20px !important;
    }
    body.logo-pos-center .site-branding { margin-bottom: 0; }
    
    /* 縦型解除 */
    body.header-type-vertical-left {
        padding-left: 0 !important;
        /* bodyのpadding-topは共通設定で効くのでここでは指定不要だが念のため */
    }
    body.header-type-vertical-left .site-header {
        width: 100% !important; height: auto !important;
        flex-direction: row; padding: 0;
    }
    body.header-type-vertical-left .header-inner {
        flex-direction: row; padding: 0 20px;
    }

    /* 浮遊型の解除 */
    body.header-type-float-round .site-header,
    body.header-type-float-round.float-style-long .site-header,
    body.header-type-float-round.float-style-slim .site-header {
        top: 0 !important; left: 0 !important; transform: none !important;
        width: 100% !important; border-radius: 0 !important; max-width: none !important;
    }
    body.header-type-float-round.float-style-slim .site-branding {
        position: static !important; background: none !important;
        box-shadow: none !important; padding: 0 !important;
    }
    body.header-type-float-round.float-style-slim .header-inner {
        justify-content: space-between !important; padding: 0 20px !important;
    }
    
    /* メインビジュアル内の文字サイズ調整 */
    .mv-title { font-size: 2rem; }
    .mv-sub { font-size: 0.9rem; }
    .mv-btn { padding: 12px 30px; font-size: 0.9rem; }
}


/* ==============================================
   ▼▼ スマホ用ドロワーメニュー (再掲) ▼▼
   ============================================== */
@media (max-width: 768px) {
    .main-navigation {
        display: block !important; position: fixed; top: 0; right: -100%;
        width: 80%; max-width: 400px; height: 100vh;
        background: var(--header-bg, #fff); z-index: 9999;
        transition: right 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
        padding: 80px 20px 40px; box-shadow: -5px 0 20px rgba(0,0,0,0.1);
        overflow-y: auto;
    }
    .main-navigation ul { flex-direction: column; gap: 0; }
    .main-navigation ul li { border-bottom: 1px solid rgba(0,0,0,0.05); }
    .main-navigation ul li a { display: block; padding: 15px 0; font-size: 1rem; }
    
    body.mobile-menu-open .main-navigation { right: 0; }
    body.mobile-menu-open::before {
        content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: rgba(0,0,0,0.6); z-index: 9000; animation: fadeIn 0.3s ease;
    }
    
    /* ハンバーガーボタンのアニメーション */
    .menu-toggle {
        width: 40px; height: 40px; border-radius: 50%;
        background: rgba(0,0,0,0.03); border: none;
        display: flex; align-items: center; justify-content: center;
        flex-direction: column; gap: 4px;
    }
    .menu-toggle span {
        width: 18px; height: 2px; background-color: #333;
        border-radius: 2px; transition: all 0.3s; margin: 0;
    }
    body.mobile-menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    body.mobile-menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
    body.mobile-menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ==============================================
   ▼▼ メインビジュアル (Main Visual) ▼▼
   ============================================== */
.main-visual {
    position: relative;
    width: 100%;
    /* 画面の高さ - ヘッダーの高さ (calcで計算) */
    height: 80vh; 
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    
    /* デフォルトの位置調整 */
    margin-top: -70px; /* ヘッダーの裏に潜り込ませる */
    padding-top: 70px; 
}

/* --- 背景 (画像/動画) --- */
.mv-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}
.mv-image, .mv-video, .mv-no-image {
    width: 100%; height: 100%; object-fit: cover;
    background-position: center; background-size: cover;
}
.mv-no-image { background-color: #ccc; }

/* オーバーレイ（変数対応） */
.mv-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--mv-overlay-color, #000000);
    opacity: var(--mv-overlay, 0.3);
}

/* --- コンテンツ (文字) --- */
.mv-content {
    position: relative; z-index: 1; text-align: center; width: 100%;
}
.mv-content-inner {
    max-width: 800px; margin: 0 auto;
    animation: fadeInUp 1s ease forwards; opacity: 0; transform: translateY(20px);
}
.mv-title {
    font-size: 3.5rem; font-weight: bold; margin: 0 0 20px;
    letter-spacing: 0.05em; line-height: 1.2; text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.mv-sub {
    font-size: 1.2rem; margin: 0 0 40px; opacity: 0.9; font-weight: 500; letter-spacing: 0.1em;
}

/* --- ボタン --- */
.mv-btn {
    display: inline-block; padding: 15px 40px;
    border: 1px solid #fff; color: #fff; background: rgba(255,255,255,0.1);
    font-weight: bold; border-radius: 50px; transition: all 0.3s;
    backdrop-filter: blur(5px);
}
.mv-btn:hover {
    background: #fff; color: var(--color-main, #333);
    transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }


/* ==============================================
   ▼▼ ヘッダー連携・位置調整パッチ ▼▼
   ============================================== */

/* 1. PC: 浮遊型 (float-round) の時の隙間埋め */
/* 新しいクラス名 .pc-layout-float-round に対応させました */
@media (min-width: 769px) {
    body.pc-layout-float-round .main-visual {
        margin-top: -120px; /* bodyのpadding-top分を引く */
        padding-top: 120px; /* 中身を下げる */
        border-radius: 0 0 30px 30px;
    }
}

/* 2. スマホ: 位置リセット */
@media (max-width: 768px) {
    .main-visual {
        margin-top: 0 !important; 
        padding-top: 0 !important;
        height: 60vh; 
        min-height: 400px;
    }
    
    .mv-title { font-size: 2rem; }
    .mv-sub { font-size: 0.9rem; }
    .mv-btn { padding: 12px 30px; font-size: 0.9rem; }
}

/* ==============================================
   ▼▼ スマホ用メニュー (デザイン分岐) ▼▼
   ============================================== */

@media (max-width: 768px) {
    
    /* PC用メニューは隠す */
    .main-navigation { display: none; }

    /* ------------------------------
       ① デフォルト (スライド式)
       ------------------------------ */
    
    /* ボタン */
    .toggle_btn {
        display: block; position: relative; width: 30px; height: 30px;
        cursor: pointer; z-index: 10001;
    }
    .toggle_btn span {
        display: block; position: absolute; left: 0;
        width: 30px; height: 2px;
        background-color: #333; border-radius: 4px; transition: all .5s;
    }
    .toggle_btn span:nth-child(1) { top: 4px; }
    .toggle_btn span:nth-child(2) { top: 14px; }
    .toggle_btn span:nth-child(3) { bottom: 4px; }

    /* 開いた時のボタン変形 */
    .open .toggle_btn span { background-color: #333; }
    .open .toggle_btn span:nth-child(1) { transform: translateY(10px) rotate(-315deg); }
    .open .toggle_btn span:nth-child(2) { opacity: 0; }
    .open .toggle_btn span:nth-child(3) { transform: translateY(-10px) rotate(315deg); }

    /* メニュー本体 */
    #navArea {
        display: block; position: fixed; top: 0; left: -300px; bottom: 0;
        width: 300px;
        background: rgba(255, 255, 255, 0.95); /* ★白の半透明 */
        overflow-y: auto; transition: all .5s; z-index: 10000; opacity: 0;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }
    .open #navArea { left: 0; opacity: 1; }

    #navArea .inner { padding: 80px 25px 25px; }
    #navArea ul { list-style: none; margin: 0; padding: 0; }
    #navArea ul li { border-bottom: 1px solid #eee; }
    #navArea ul li a {
        display: block; color: #333; font-size: 14px; padding: 1.2em 0;
        text-decoration: none; transition: 0.2s;
    }

    /* マスク（黒背景） */
    #mask {
        display: none; transition: all .5s;
    }
    .open #mask {
        display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.6); /* ★黒の半透明 */
        z-index: 9999; cursor: pointer;
    }


    /* ------------------------------
       ② 円形モーション (Morph)
       ------------------------------ */
    
    .hamburger-morph {
        position: relative; z-index: 10001;
        width: 48px; height: 48px; padding: 0; border: none;
        background: transparent; cursor: pointer;
    }
    .hamburger-morph__icon { width: 100%; height: 100%; }
    .hamburger-morph__line {
        fill: none; stroke: #333; stroke-width: 6;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hamburger-morph__line:nth-child(1) { stroke-dasharray: 60 207; }
    .hamburger-morph__line:nth-child(2) { stroke-dasharray: 60 60; }
    .hamburger-morph__line:nth-child(3) { stroke-dasharray: 60 207; }

    /* 開いた時のアニメーション */
    .hamburger-morph.active .hamburger-morph__line { stroke: #fff; } /* 白に変更 */
    .hamburger-morph.active .hamburger-morph__line:nth-child(1) { stroke-dasharray: 90 207; stroke-dashoffset: -134; }
    .hamburger-morph.active .hamburger-morph__line:nth-child(2) { stroke-dasharray: 1 60; stroke-dashoffset: -30; }
    .hamburger-morph.active .hamburger-morph__line:nth-child(3) { stroke-dasharray: 90 207; stroke-dashoffset: -134; }

    /* メニュー本体 */
    .nav-morph {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: rgba(30, 30, 35, 0.98); /* ★黒の半透明 */
        clip-path: circle(0% at calc(100% - 44px) 44px); /* 右上から */
        transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10000; visibility: hidden;
    }
    .nav-morph.active {
        clip-path: circle(150% at calc(100% - 44px) 44px);
        visibility: visible;
    }

    .nav-morph__wrapper {
        display: flex; align-items: center; justify-content: center;
        width: 100%; height: 100%;
    }
    .nav-morph__list { margin: 0; padding: 0; list-style: none; text-align: center; }
    
    .nav-morph__item {
        opacity: 0; transform: translateY(30px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .nav-morph.active .nav-morph__item { opacity: 1; transform: translateY(0); }
    .nav-morph.active .nav-morph__item:nth-child(1) { transition-delay: 0.3s; }
    .nav-morph.active .nav-morph__item:nth-child(2) { transition-delay: 0.4s; }
    .nav-morph.active .nav-morph__item:nth-child(3) { transition-delay: 0.5s; }
    .nav-morph.active .nav-morph__item:nth-child(4) { transition-delay: 0.6s; }

    .nav-morph__link {
        position: relative; display: inline-block; padding: 15px;
        font-size: 20px; color: #fff; text-decoration: none; overflow: hidden;
    }
    .nav-morph__text, .nav-morph__hover { display: block; transition: transform 0.3s ease; }
    .nav-morph__hover { position: absolute; top: 100%; left: 0; width: 100%; transform: translateY(0%); color: #aaa; }
    
    .nav-morph__link:hover .nav-morph__text { transform: translateY(-100%); }
    .nav-morph__link:hover .nav-morph__hover { transform: translateY(-100%); }
}

/* ==============================================
   ▼▼ ロゴ画像サイズの制御 (はみ出し防止) ▼▼
   ============================================== */

/* --- 1. 共通設定 (PC/スマホ共通) --- */
.site-branding img,
.custom-logo-link img {
    width: auto; /* アスペクト比を維持 */
    height: auto;
    max-width: 100%; /* 親要素からはみ出さない */
    display: block; /* 隙間を消す */
    object-fit: contain;
}

/* --- 2. PC表示 (769px以上) --- */
@media (min-width: 769px) {
    .site-branding img,
    .custom-logo-link img {
        /* 設定した最大幅を適用 */
        width: var(--logo-width-pc, 150px);
        
        /* 【重要】ヘッダーの高さからはみ出さないように制限 */
        /* ヘッダー高さから上下の余白(約10px)を引いたサイズを上限にする */
        max-height: calc(var(--header-height-pc) - 14px);
    }

    /* ▼例外：縦向き型 (vertical-left) の場合 */
    /* 縦向きは高さ制限を緩める（横幅いっぱいまで使えるように） */
    body.pc-layout-vertical-left .site-branding img,
    body.pc-layout-vertical-left .custom-logo-link img {
        max-height: 150px; /* 縦長ロゴも許容 */
        margin-bottom: 0;
    }
    
    /* ▼例外：浮遊型スリム (float-style-slim) の場合 */
    /* ロゴが絶対配置されているため、少し小さめに */
    body.pc-layout-float-round.float-style-slim .site-branding img {
        max-height: 40px;
    }
}

/* --- 3. スマホ表示 (768px以下) --- */
@media (max-width: 768px) {
    .site-branding img,
    .custom-logo-link img {
        /* 設定した最大幅を適用 */
        width: var(--logo-width-sp, 100px);
        
        /* スマホヘッダーの高さ内に収める */
        max-height: calc(var(--header-height-sp) - 16px);
    }
}

/* ==============================================
   ▼▼ 緊急復旧：ハンバーガーメニュー表示パッチ ▼▼
   ============================================== */

@media (max-width: 768px) {
    /* 1. コンテナを強制的に表示 */
    .sp-menu-container {
        display: block !important;
        position: relative;
        z-index: 10002; /* ロゴやヘッダーより手前に */
    }

    /* 2. ボタン自体の表示を保証 */
    .toggle_btn,
    .hamburger-morph {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 3. ボタンの色を強制的に濃くする（背景と同化防止） */
    .toggle_btn span,
    .hamburger-morph__line {
        background-color: #333; /* スライド式用 */
        stroke: #333;           /* モーション式用 */
    }
    
    /* 4. ロゴがボタンに被らないようにする */
    .site-branding {
        max-width: calc(100% - 60px); /* ボタン分のスペースを確保 */
        z-index: 10001;
    }
}

/* ==============================================
   ▼▼ 記事一覧リスト (Archive List) ▼▼
   ============================================== */

/* --- 共通スタイル --- */
.section-header { text-align: center; margin-bottom: 50px; }
.section-title { font-size: 2rem; margin: 0; font-weight: 700; letter-spacing: 0.05em; }
.section-sub { font-size: 0.9rem; opacity: 0.6; margin-top: 5px; }

/* 記事カード共通 */
.post-item {
    background: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 8px;
    overflow: hidden;
    height: 100%; /* 高さ揃え */
    display: flex; flex-direction: column;
}
.post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.post-link { 
    display: flex; flex-direction: column; height: 100%; color: inherit; 
    width: 100%;
}

/* サムネイル */
.post-thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 9; width: 100%; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.post-item:hover .post-thumb img { transform: scale(1.05); }

/* カテゴリーラベル */
.post-cat {
    position: absolute; top: 10px; left: 10px;
    background: var(--color-main, #333); color: #fff;
    font-size: 0.7rem; padding: 4px 10px; border-radius: 20px;
    opacity: 0.9;
}

/* テキストエリア */
.post-body { 
    padding: 20px; 
    flex-grow: 1; /* 高さを埋める */
    display: flex; flex-direction: column; 
}
.post-date { font-size: 0.8rem; color: #888; display: block; margin-bottom: 8px; }
.post-title { 
    font-size: 1.1rem; margin: 0 0 10px; line-height: 1.4; font-weight: bold; 
    /* タイトルが長すぎてもレイアウトを崩さない */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.post-excerpt { font-size: 0.9rem; color: #666; line-height: 1.6; opacity: 0.8; margin-top: auto; }


/* ==============================================
   ▼ デザイン別スタイル (4パターン) ▼
   ============================================== */

/* ----------------------------------
   ① カード型 (Grid)
   ---------------------------------- */
.type-card {
    display: grid;
    /* 変数を使ってカラム数を制御 */
    grid-template-columns: repeat(var(--card-cols-pc, 3), 1fr);
    gap: 30px;
}
@media (max-width: 768px) {
    .type-card {
        grid-template-columns: repeat(var(--card-cols-sp, 1), 1fr);
        gap: 15px; /* 隙間を少し詰める */
    }
    .type-card .post-body { padding: 15px; }
    .type-card .post-title { font-size: 1rem; }
}


/* ----------------------------------
   ② リスト型 (List: ニュース風)
   ---------------------------------- */
.type-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PCは2カラム */
    gap: 30px;
}
.type-list .post-item {
    flex-direction: row; /* 横並び */
    align-items: stretch;
    border: none;
    border-bottom: 1px solid #eee; /* 下線のみですっきり */
    border-radius: 0;
    padding-bottom: 15px;
}
.type-list .post-item:hover { transform: none; box-shadow: none; opacity: 0.7; }
.type-list .post-link { flex-direction: row; }

.type-list .post-thumb {
    width: 160px; /* 固定幅 */
    flex-shrink: 0; 
    aspect-ratio: 16 / 9; /* 横長統一 */
    border-radius: 4px;
}
.type-list .post-body {
    width: calc(100% - 160px); 
    justify-content: center; 
    padding: 5px 0 5px 20px; /* 上下の余白を詰める */
}
.type-list .post-title {
    font-size: 1rem; margin-bottom: 5px;
    -webkit-line-clamp: 2; /* 2行制限 */
}
.type-list .post-date { margin-bottom: 5px; }

/* スマホ対応 */
@media (max-width: 768px) {
    .type-list {
        grid-template-columns: 1fr; /* スマホは1カラム */
        gap: 15px;
    }
    .type-list .post-thumb { 
        width: 110px; /* スマホでは少し小さく */
        height: auto; 
    }
    .type-list .post-body { 
        width: calc(100% - 110px); 
        padding: 0 0 0 15px; 
    }
    .type-list .post-excerpt { display: none; } /* 抜粋非表示 */
}


/* ----------------------------------
   ③ テキストのみ (Text)
   ---------------------------------- */
.type-text {
    display: flex; flex-direction: column;
    background: #fff; border-radius: 8px; padding: 10px 20px;
    border: 1px solid #eee;
}
.type-text .post-item {
    border-radius: 0; box-shadow: none !important;
    border-bottom: 1px solid #eee; margin: 0;
    transition: background 0.3s; height: auto;
}
.type-text .post-item:last-child { border-bottom: none; }
.type-text .post-item:hover { transform: none; background: #f9f9f9; }

.type-text .post-thumb, .type-text .post-excerpt { display: none; }

.type-text .post-body {
    padding: 15px 0;
    flex-direction: row; align-items: center; justify-content: space-between;
}
.type-text .post-meta { order: 2; margin: 0; min-width: 100px; text-align: right; }
.type-text .post-title { order: 1; margin: 0; font-size: 1rem; -webkit-line-clamp: 1; }

@media (max-width: 768px) {
    .type-text .post-body { flex-direction: column; align-items: flex-start; gap: 5px; }
    .type-text .post-meta { order: 1; text-align: left; font-size: 0.75rem; }
    .type-text .post-title { order: 2; }
}


/* ----------------------------------
   ④ スライダー型 (Slider)
   ---------------------------------- */
.archive-slider {
    padding-bottom: 50px; /* ページネーション用 */
    width: 100%;
    /* カードが横に見切れるようにする */
    overflow: visible; 
}
.archive-slider .swiper-wrapper {
    /* スライダーのラッパーも表示制御 */
}
/* ==============================================
   ▼▼ スマホ文字サイズ微調整 (Mobile Font Sizes) ▼▼
   ============================================== */

@media (max-width: 768px) {
    
    /* 1. 記事タイトル */
    .post-title {
        font-size: 0.8rem !important; /* 元(1.1rem)より小さく */
        line-height: 1.4;
        margin-bottom: 5px;
    }

    /* 2. 日付 */
    .post-date {
        font-size: 0.6rem !important; /* 元(0.8rem)より小さく */
        margin-bottom: 4px;
    }

    /* 3. カテゴリーラベル */
    .post-cat {
        font-size: 0.6rem !important; /* 元(0.7rem)より小さく */
        padding: 3px 8px !important;  /* 余白も少し狭く */
        top: 8px !important;          /* 位置調整 */
        left: 8px !important;
    }

    /* --- レイアウト別の微調整 --- */
    
    /* リスト型（横並び）の時、タイトルが窮屈にならないように */
    .type-list .post-title {
        font-size: 0.7rem !important; /* さらに少し小さく */
        -webkit-line-clamp: 3; /* 3行まで表示許可 */
    }
}
.archive-slider .swiper-slide {
    height: auto; /* 高さ揃え */
    opacity: 0.4; /* 端のカードを少し薄くする演出 */
    transition: opacity 0.3s;
}
.archive-slider .swiper-slide-active,
.archive-slider .swiper-slide-next,
.archive-slider .swiper-slide-prev {
    opacity: 1; /* 見えているものは濃く */
}

/* スマホ用: 矢印非表示 */
.swiper-button-next, .swiper-button-prev {
    color: var(--color-main, #333);
    background: rgba(255,255,255,0.8);
    width: 40px; height: 40px; border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 1.2rem; font-weight: bold; }

@media (max-width: 768px) {
    .swiper-button-next, .swiper-button-prev { display: none; } /* スマホで消す */
    .archive-slider .swiper-slide { opacity: 1; } /* スマホは全部濃く */
}

.swiper-pagination-bullet-active { background: var(--color-main, #333); }

/* ==============================================
   ▼▼ 記事ページ (Single Page) ▼▼
   ============================================== */

/* --- レイアウト調整 --- */
.single-container {
    max-width: 800px; /* 読みやすいように幅を狭める */
    margin: 0 auto;
}

/* --- 記事ヘッダー --- */
.article-header { margin-bottom: 50px; text-align: center; }

.article-cat ul {
    list-style: none; padding: 0; margin: 0 0 15px;
    display: flex; justify-content: center; gap: 10px;
}
.article-cat a {
    background: var(--color-main, #333); color: #fff;
    font-size: 0.8rem; padding: 4px 12px; border-radius: 20px;
    text-decoration: none; opacity: 0.9;
}

.article-title {
    font-size: 1.8rem; font-weight: bold; line-height: 1.4; margin-bottom: 15px;
}
.article-meta {
    font-size: 0.9rem; color: #888; margin-bottom: 30px;
}
.article-thumb {
    width: 100%; border-radius: 8px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.article-thumb img { width: 100%; height: auto; display: block; }


/* --- ★記事本文のデザイン --- */
.article-body {
    font-size: 1rem; line-height: 1.8; color: #333;
}
.article-body p { margin-bottom: 2em; }

/* ==============================================
   ▼▼ 記事内見出しデザイン (Headings) ▼▼
   ============================================== */

/* --- 共通リセット --- */
.article-body h2,
.article-body h3,
.article-body h4 {
    margin: 50px 0 30px;
    padding: 0;
    border: none;
    background: none;
    font-weight: bold;
    line-height: 1.4;
    position: relative;
    /* 数字カウント用のリセットは親要素で行う */
}
.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.3rem; }
.article-body h4 { font-size: 1.1rem; }

/* 数字カウントの初期化 */
.article-body {
    counter-reset: h2_counter h3_counter h4_counter;
}

/* ==============================================
   ▼ デザインバリエーション (Mixins) ▼
   ※ h2-type-XX, h3-type-XX というクラスで制御
   ============================================== */

/* ----------------------------------
   01. シンプル (下線)
   ---------------------------------- */
body.h2-type-underline .article-body h2,
body.h3-type-underline .article-body h3,
body.h4-type-underline .article-body h4 {
    padding-bottom: 10px;
    border-bottom: 3px solid var(--color-main, #333);
}

/* ----------------------------------
   02. 背景塗りつぶし (Solid)
   ---------------------------------- */
body.h2-type-bg_solid .article-body h2,
body.h3-type-bg_solid .article-body h3,
body.h4-type-bg_solid .article-body h4 {
    background: var(--color-main, #333);
    color: #fff;
    padding: 15px 20px;
    border-radius: 4px;
}

/* ----------------------------------
   03. 枠線囲み (Border Round)
   ---------------------------------- */
body.h2-type-border_round .article-body h2,
body.h3-type-border_round .article-body h3,
body.h4-type-border_round .article-body h4 {
    border: 3px solid var(--color-main, #333);
    padding: 15px 20px;
    border-radius: 8px;
    color: var(--color-text, #333);
}

/* ----------------------------------
   04. タグ風 (Tag)
   ---------------------------------- */
body.h2-type-tag .article-body h2,
body.h3-type-tag .article-body h3,
body.h4-type-tag .article-body h4 {
    padding: 10px 10px 10px 20px;
    border-left: 6px solid var(--color-main, #333);
    background: #f7f7f7;
}

/* ----------------------------------
   05. 吹き出し (Bubble Solid)
   ---------------------------------- */
body.h2-type-bubble .article-body h2,
body.h3-type-bubble .article-body h3,
body.h4-type-bubble .article-body h4 {
    background: var(--color-main, #333);
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    position: relative;
}
/* 三角形 */
body.h2-type-bubble .article-body h2::after,
body.h3-type-bubble .article-body h3::after,
body.h4-type-bubble .article-body h4::after {
    content: ''; position: absolute;
    bottom: -10px; left: 30px;
    border-top: 10px solid var(--color-main, #333);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

/* ----------------------------------
   06. 両端に線を伸ばす (Sides Line)
   ---------------------------------- */
body.h2-type-sides_line .article-body h2,
body.h3-type-sides_line .article-body h3,
body.h4-type-sides_line .article-body h4 {
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
body.h2-type-sides_line .article-body h2::before, body.h2-type-sides_line .article-body h2::after,
body.h3-type-sides_line .article-body h3::before, body.h3-type-sides_line .article-body h3::after,
body.h4-type-sides_line .article-body h4::before, body.h4-type-sides_line .article-body h4::after {
    content: ''; flex-grow: 1;
    height: 2px; background: var(--color-main, #333);
    margin: 0 15px;
}

/* ----------------------------------
   07. 二重線 (Double)
   ---------------------------------- */
body.h2-type-double .article-body h2,
body.h3-type-double .article-body h3,
body.h4-type-double .article-body h4 {
    padding-bottom: 8px;
    border-bottom: 4px double var(--color-main, #333);
}

/* ----------------------------------
   08. 中央に小さい下線 (Small Bottom)
   ---------------------------------- */
body.h2-type-small_bottom .article-body h2,
body.h3-type-small_bottom .article-body h3,
body.h4-type-small_bottom .article-body h4 {
    text-align: center; padding-bottom: 15px;
    position: relative;
}
body.h2-type-small_bottom .article-body h2::after,
body.h3-type-small_bottom .article-body h3::after,
body.h4-type-small_bottom .article-body h4::after {
    content: ''; position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 60px; height: 3px;
    background: var(--color-main, #333);
}

/* ----------------------------------
   09. 吹き出し風 (Bubble Underline)
   ---------------------------------- */
body.h2-type-bubble_under .article-body h2,
body.h3-type-bubble_under .article-body h3,
body.h4-type-bubble_under .article-body h4 {
    border-bottom: 2px solid var(--color-main, #333);
    padding: 10px 15px;
    position: relative;
}
body.h2-type-bubble_under .article-body h2::after,
body.h3-type-bubble_under .article-body h3::after,
body.h4-type-bubble_under .article-body h4::after {
    content: ''; position: absolute;
    bottom: -12px; left: 30px;
    border-top: 10px solid var(--color-main, #333);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

/* ----------------------------------
   10. ストライプ/斜線 (Stripe)
   ---------------------------------- */
body.h2-type-stripe .article-body h2,
body.h3-type-stripe .article-body h3,
body.h4-type-stripe .article-body h4 {
    padding: 10px 15px;
    border-left: 5px solid var(--color-main, #333);
    border-bottom: 1px solid #ddd;
    background: repeating-linear-gradient(
        45deg,
        #f9f9f9,
        #f9f9f9 5px,
        #f0f0f0 5px,
        #f0f0f0 10px
    );
}

/* ----------------------------------
   11. 数字付き (Number)
   ※修正：下線をドットに＆数字を大きく重ねる
   ---------------------------------- */
/* H2用 */
body.h2-type-number .article-body h2 {
    counter-increment: h2_counter;
    position: relative; 
    padding: 1.5em 0 0.5em 0; /* 文字の上に余白 */
    border-bottom: 3px dotted var(--color-main, #333); /* ドット線 */
    z-index: 1; /* 数字より手前に */
}
body.h2-type-number .article-body h2::before {
    content: counter(h2_counter, decimal-leading-zero); /* 01, 02... */
    position: absolute; 
    top: -25px; left: -5px; /* 位置調整（被せる） */
    font-size: 5rem; /* 巨大化 */
    color: var(--color-main, #333);
    opacity: 0.15; /* 薄くして背景にする */
    font-family: 'Arial', sans-serif; font-weight: 900; line-height: 1;
    z-index: -1; /* 文字の裏へ */
}

/* H3用 (H3も同様にドット線にする場合) */
body.h3-type-number .article-body h3 {
    counter-increment: h3_counter;
    padding-left: 40px; position: relative;
    border-bottom: 2px dotted #ddd; /* 控えめなドット */
    padding-bottom: 5px;
}
body.h3-type-number .article-body h3::before {
    content: counter(h3_counter);
    position: absolute; top: 0; left: 0;
    width: 30px; height: 30px;
    background: var(--color-main, #333); color: #fff;
    text-align: center; line-height: 30px; border-radius: 50%; font-size: 0.9rem;
}

/* H4用 */
body.h4-type-number .article-body h4 {
    counter-increment: h4_counter;
    padding-left: 10px; border-left: 3px solid var(--color-main, #333);
}
body.h4-type-number .article-body h4::before {
    content: counter(h4_counter) ". ";
    color: var(--color-main, #333);
}


/* ----------------------------------
   12. チェックアイコン (Check)
   ※修正：下線を削除
   ---------------------------------- */
body.h2-type-check .article-body h2,
body.h3-type-check .article-body h3,
body.h4-type-check .article-body h4 {
    padding-left: 35px; 
    border-bottom: none; /* 下線なし */
    padding-bottom: 0;
    position: relative;
}
body.h2-type-check .article-body h2::before,
body.h3-type-check .article-body h3::before,
body.h4-type-check .article-body h4::before {
    content: ''; position: absolute;
    top: 0.2em; left: 0; /* 位置微調整 */
    width: 24px; height: 12px;
    border-left: 4px solid var(--color-main, #333);
    border-bottom: 4px solid var(--color-main, #333);
    transform: rotate(-45deg);
}


/* ----------------------------------
   13. タグ風 (丸付き) (Tag Round)
   ※新規追加
   ---------------------------------- */
body.h2-type-tag_round .article-body h2,
body.h3-type-tag_round .article-body h3,
body.h4-type-tag_round .article-body h4 {
    display: inline-block; /* 文字数に合わせる */
    position: relative;
    padding: 0.5em 1em 0.5em 0.8em; /* 右側に余白多め */
    border-radius: 50px 0 0 50px;
    background-color: var(--color-main, #333); /* テーマカラー */
    color: #fff;
    border-bottom: none;
    line-height: 1.5;
}

/* 白い丸 */
body.h2-type-tag_round .article-body h2::before,
body.h3-type-tag_round .article-body h3::before,
body.h4-type-tag_round .article-body h4::before {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    margin-right: 10px;
    border-radius: 50%;
    background: #fff;
    vertical-align: middle;
    transform: translateY(-2px); /* 位置微調整 */
}

/* 長い見出しで折り返した時の見た目を整えるパッチ */
body.h2-type-tag_round .article-body h2,
body.h3-type-tag_round .article-body h3 {
    display: block; /* H2,H3は長いことが多いのでブロックに戻す */
    border-radius: 50px 4px 4px 50px; /* 右側は少し角丸 */
}

/* --- スマホ調整 --- */
@media (max-width: 768px) {
    .article-title { font-size: 1.4rem; text-align: left; }
    .article-header { text-align: left; }
    .article-cat ul { justify-content: flex-start; }
    
    .article-body h2 { font-size: 1.2rem; padding: 12px 15px; }
    .article-body h3 { font-size: 1.1rem; }
    .article-body { font-size: 0.95rem; }
}

/* ==============================================
   ▼▼ 目次デザイン (Table of Contents) ▼▼
   ============================================== */

/* --- 共通構造 --- */
.toc-container {
    margin: 40px auto 60px;
    width: 100%; max-width: 680px;
    background: var(--toc-bg-color, #fff);
    transition: all 0.3s;
    overflow: hidden;
    border-radius: 0; 
}

/* ヘッダー */
.toc-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 25px;
    color: var(--toc-title-color, #333);
    font-weight: bold;
    position: relative;
}
.toc-title-text { 
    font-size: 1.4rem; 
    letter-spacing: 0.05em; 
    line-height: 1;
}

/* ★修正：閉じるボタン (テキスト) */
.toc-toggle {
    cursor: pointer; 
    font-size: 0.9rem;
    font-family: 'Arial', sans-serif; /* 英字フォント */
    letter-spacing: 0.05em;
    color: var(--toc-title-color, #333);
    opacity: 0.6;
    transition: opacity 0.3s;
}
.toc-toggle:hover { opacity: 1; }
.toc-toggle::before { content: none !important; } /* アイコン削除 */


/* リスト本体 */
.toc-body { padding: 25px 30px 35px; }
.toc-list, .toc-list ul { margin: 0; padding: 0; list-style: none; }
.toc-list > li { margin-bottom: 15px; }
.toc-list > li:last-child { margin-bottom: 0; }

.toc-item a {
    text-decoration: none; color: #333; 
    display: flex; align-items: baseline;
    transition: color 0.2s; line-height: 1.6; font-weight: 500;
}
.toc-item a:hover { opacity: 0.7; }

.toc-list ul { margin-top: 10px; padding-left: 0; margin-left: 20px; }
.toc-list ul li { margin-bottom: 8px; font-size: 1rem; font-weight: normal; }


/* --- 「もっと見る」ボタンのデザイン --- */
.is-hidden-item { display: none !important; }

.toc-more-wrap { text-align: center; margin-top: 30px; }
.toc-more-btn {
    display: inline-block; cursor: pointer; transition: all 0.3s;
    font-size: 0.95rem; font-weight: bold;
    background: none; border: none; outline: none;
    /* 変数適用 */
    color: var(--toc-more-btn-color, #333); 
}
.toc-more-btn::after {
    content: '\f078'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
    margin-left: 8px; font-size: 0.8rem; transition: transform 0.3s; display: inline-block;
}
.toc-container.is-fully-expanded .toc-more-btn::after { transform: rotate(180deg); }

/* デザインA: テキストのみ */
.toc-more-btn.btn-design-text {
    text-decoration: underline;
}
/* デザインB: 楕円 (ボーダー) */
.toc-more-btn.btn-design-oval {
    padding: 10px 40px; border-radius: 50px;
    border: 1px solid var(--toc-more-btn-color, #333);
    background: #fff;
}
.toc-more-btn.btn-design-oval:hover { background: #f9f9f9; }

/* デザインC: 楕円 (塗りつぶし) */
.toc-more-btn.btn-design-fill {
    padding: 10px 40px; border-radius: 50px;
    background: var(--toc-more-btn-color, #333); 
    color: #fff; /* 白文字固定 */
}
.toc-more-btn.btn-design-fill:hover { opacity: 0.8; }

/* デザインD: バー (全幅) */
.toc-more-btn.btn-design-bar {
    width: 100%; padding: 12px; border-radius: 4px;
    background: #f7f7f7; 
    color: var(--toc-more-btn-color, #333); 
}
.toc-more-btn.btn-design-bar:hover { background: #eee; }


/* --- 展開アニメーション (前回と同じ) --- */
@keyframes tocFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.anim-fade .toc-item.is-animating { animation: tocFadeIn 0.6s ease forwards; }
@keyframes tocSlideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.anim-slide .toc-item.is-animating { animation: tocSlideDown 0.5s ease forwards; }
@keyframes tocZoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.anim-zoom .toc-item.is-animating { animation: tocZoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }


/* ==============================================
   ▼ デザインバリエーション (2種類+角丸) ▼
   ============================================== */

/* ----------------------------------
   ① シンプル (枠線付き) - type-simple / simple_round
   ---------------------------------- */
.type-simple, .type-simple_round {
    border: 1px solid var(--toc-border-color, #333);
}
.type-simple_round { border-radius: 8px; }

.type-simple .toc-header, .type-simple_round .toc-header {
    background: transparent;
    border-bottom: 1px solid var(--toc-border-color, #333);
    /* justify-content: space-between; ← 修正：Closeボタンを端に置くため */
}

/* H2: 番号 (1. 2. ...) */
.type-simple .toc-list, .type-simple_round .toc-list { counter-reset: toc-simple-h2; }
.type-simple .toc-item.level-2, .type-simple_round .toc-item.level-2 { counter-increment: toc-simple-h2; }
.type-simple .toc-item.level-2 > a::before, .type-simple_round .toc-item.level-2 > a::before {
    content: counter(toc-simple-h2) ". ";
    font-weight: 900; font-size: 1.3rem;
    color: var(--toc-title-color, #333);
    margin-right: 12px; flex-shrink: 0; font-family: 'Arial', sans-serif;
}

/* H3: ● */
.type-simple .toc-item.level-3 > a::before, .type-simple_round .toc-item.level-3 > a::before {
    content: "●"; font-size: 0.8rem;
    color: var(--toc-title-color, #333);
    margin-right: 12px; flex-shrink: 0; transform: translateY(-2px);
}


/* ----------------------------------
   ② 数字付き (モダン) - type-number
   ---------------------------------- */
.type-number {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-radius: 12px;
}
.type-number .toc-header {
    background: transparent; padding-bottom: 10px;
    justify-content: space-between;
}
.type-number .toc-title-text {
    font-size: 2rem; font-family: 'Arial Black', sans-serif; 
    opacity: 0.15; position: absolute; top: 10px; left: 20px;
}
/* 数字付きのCLOSEボタンは見やすい位置に */
.type-number .toc-toggle { 
    z-index: 1; margin-left: auto; /* 右寄せ */
}

/* H2: 01, 02... */
.type-number .toc-list { counter-reset: toc-num-h2; }
.type-number .toc-item.level-2 { counter-increment: toc-num-h2; margin-bottom: 20px; }
.type-number .toc-item.level-2 > a::before {
    content: counter(toc-num-h2, decimal-leading-zero);
    font-family: 'Arial', sans-serif; font-weight: 900;
    font-size: 1.6rem; line-height: 1;
    color: var(--toc-number-color, #333);
    margin-right: 15px; flex-shrink: 0;
}

/* H3: 線でつなぐ */
.type-number .toc-list ul {
    border-left: 2px solid #f0f0f0; margin-left: 14px; padding-left: 25px;
}
/* ==============================================
   ▼▼ 目次開閉の修正パッチ ▼▼
   ============================================== */

/* クラス "is-closed" が付いたら、中身を強制的に消す */
#toc_container.is-closed .toc-body {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* 閉じた時はヘッダーの下線を消す（見た目を綺麗に） */
#toc_container.is-closed .toc-header {
    border-bottom: none !important;
}

/* ==============================================
   ▼▼ 関連記事エリア (Related Slider) ▼▼
   ============================================== */

.related-area {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid #eee;
    width: 100%;
    overflow: hidden; /* 横スクロールバー防止 */
}

/* タイトル */
.related-title {
    font-size: 1.2rem; font-weight: bold;
    margin-bottom: 30px; text-align: center;
    position: relative;
    display: inline-block; left: 50%; transform: translateX(-50%);
}
.related-title::after {
    content: ''; position: absolute;
    bottom: -10px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 3px; background: var(--color-main, #333);
}

/* --- スライダー本体 --- */
.related-slider {
    padding-bottom: 50px !important; /* ページネーション用 */
    width: 100%;
    position: relative;
    overflow: visible !important; /* 矢印を外に出すため */
}

/* スライド (Swiper必須スタイル) */
.related-slider .swiper-slide {
    height: auto;
    display: flex; /* 高さ揃え */
    opacity: 1; /* チラつき防止 */
}

/* カードデザイン (新着記事と同じスタイル) */
.related-item {
    display: flex; flex-direction: column;
    text-decoration: none; color: #333;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    width: 100%;
}
.related-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* サムネイル */
.related-thumb {
    width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
}
.related-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s;
}
.related-item:hover .related-thumb img { transform: scale(1.05); }

/* テキスト */
.related-body { 
    padding: 15px; 
    flex-grow: 1; display: flex; flex-direction: column;
}
.related-date {
    font-size: 0.75rem; color: #999; display: block; margin-bottom: 5px;
}
.related-post-title {
    font-size: 0.9rem; line-height: 1.5; font-weight: bold; margin: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* --- 矢印ボタンのカスタマイズ (修正版) --- */
.related-slider .swiper-button-next,
.related-slider .swiper-button-prev {
    /* 色とサイズ */
    color: var(--color-main, #333);
    background: #fff;
    width: 44px; height: 44px; /* 少し大きく */
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 影を濃く */
    z-index: 20; /* 確実に手前に */
    opacity: 1 !important; /* 透明化防止 */
    visibility: visible !important;
}

/* 矢印アイコンのサイズ調整 */
.related-slider .swiper-button-next::after,
.related-slider .swiper-button-prev::after {
    font-size: 1.2rem;
    font-weight: bold;
}

/* ホバー時の挙動 */
.related-slider .swiper-button-next:hover,
.related-slider .swiper-button-prev:hover {
    background: var(--color-main, #333);
    color: #fff;
    transform: scale(1.1); /* 少し拡大 */
}

/* PCでの矢印位置調整 (★修正: 少し内側に入れる) */
@media (min-width: 1025px) {
    .related-slider .swiper-button-prev {
        left: 10px; /* -50pxだと消えることがあるので調整 */
    }
    .related-slider .swiper-button-next {
        right: 10px;
    }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .related-area { margin-top: 60px; }
    /* スマホでは矢印を隠す */
    .related-slider .swiper-button-next,
    .related-slider .swiper-button-prev { display: none; }
    .related-slider { overflow: hidden; }
}
/* Swiperが動く前の保険（画像が巨大になるのを防ぐ） */
.related-slider img {
    max-width: 100%;
    height: auto;
}
.related-slider .swiper-slide {
    box-sizing: border-box;
}

/* ==============================================
   ▼▼ SNSシェアボタン (Share Buttons) ▼▼
   ============================================== */

.share-area {
    margin: 30px 0;
}
/* 記事下の場合は少し余白を多めに */
.article-body + .share-area {
    margin-top: 60px;
    border-top: 1px dashed #eee;
    padding-top: 40px;
}

.share-list {
    display: flex;
    justify-content: center;
    gap: 15px;
    list-style: none;
    margin: 0; padding: 0;
}

.share-item {
    width: 44px; height: 44px;
}

.share-item a,
.share-item button {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    
    /* ★変数に変更 */
    background: var(--share-bg-color, #fff);
    
    border: 1px solid var(--share-border-color, #ddd);
    color: var(--share-icon-color, #777);
    
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
}

/* ボタン (コピー用) のリセット */
.share-item button {
    outline: none; padding: 0;
}

/* --- ホバー時のブランドカラー変化 --- */

/* X (Twitter) : 黒 */
.share-item.x-twitter a:hover {
    background: #000; border-color: #000; color: #fff;
}

/* Facebook : 青 */
.share-item.facebook a:hover {
    background: #1877f2; border-color: #1877f2; color: #fff;
}

/* LINE : 緑 */
.share-item.line a:hover {
    background: #00c300; border-color: #00c300; color: #fff;
}

/* URL Copy : オレンジ (テーマカラー) */
.share-item.copy button:hover {
    background: var(--color-main, #333); 
    border-color: var(--color-main, #333); 
    color: #fff;
}


/* --- URLコピー完了時のツールチップ --- */
.share-item.copy { position: relative; }

.copy-tooltip {
    position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
    background: #333; color: #fff;
    padding: 5px 10px; border-radius: 4px;
    font-size: 0.75rem; font-weight: bold;
    opacity: 0; visibility: hidden;
    transition: all 0.3s;
    pointer-events: none; white-space: nowrap;
}
.copy-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border-width: 5px; border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* コピー完了クラスがついたら表示 */
.share-item.copy.copied .copy-tooltip {
    opacity: 1; visibility: visible; top: -50px;
}

/* ==============================================
   ▼▼ フッターエリア (Footer) ▼▼
   ============================================== */

.site-footer {
    font-size: 0.9rem;
    margin-top: 0;
    width: 100%;
}

/* 共通インナー幅 */
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%; /* 幅を確保 */
    box-sizing: border-box; /* はみ出し防止 */
}

/* --- 1. ウィジェットエリア (3カラム) --- */
.footer-widgets-area {
    padding: 50px 0;
    /* 変数を適用 (背景と文字) */
    background-color: var(--footer-widget-bg, #ddd);
    color: var(--footer-widget-text, #333);
}

.footer-widgets-area .footer-inner {
    display: grid;
    /* ★修正: minmax(0, 1fr) で強制的に等分し、はみ出しを防ぐ */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

/* 個別のウィジェット */
.widget {
    background: transparent;
    margin-bottom: 20px;
    word-break: break-all; /* 長いURLなどでの崩れ防止 */
}
/* カレンダーなど幅広要素へのはみ出し対策 */
.widget table, .widget img, .widget iframe {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* ウィジェットタイトル */
.widget-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 10px;
    /* 線の色を文字色に合わせる（透過で馴染ませる） */
    border-bottom: 2px solid currentColor;
    opacity: 0.8;
    display: block;
}

/* リンク色 */
.widget ul li a { 
    color: inherit; opacity: 0.8; text-decoration: none; transition: opacity 0.3s; 
}
.widget ul li a:hover { opacity: 1; text-decoration: underline; }


/* --- 2. フッターボトム (ロゴ & コピーライト) --- */
.footer-bottom {
    padding: 20px 0;
    text-align: center;
    /* 変数を適用 */
    background-color: var(--footer-bottom-bg, #333);
    color: var(--footer-bottom-text, #fff);
}

.footer-logo {
    margin-bottom: 10px;
    font-size: 1.3rem;
    font-weight: bold;
    font-family: 'Arial Black', sans-serif;
    letter-spacing: 0.05em;
}
.footer-logo a { color: inherit; text-decoration: none; }

.copyright {
    font-size: 0.75rem; opacity: 0.7; font-family: 'Arial', sans-serif;
}


/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .footer-widgets-area .footer-inner {
        grid-template-columns: 1fr; /* スマホは1列 */
        gap: 40px;
    }
    .footer-widgets-area { padding: 40px 0; }
}

/* ==============================================
   ▼▼ トップへ戻るボタン (Page Top) ▼▼
   ============================================== */

.pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    z-index: 1000;
    cursor: pointer;
    
    /* 変数適用 */
    background: var(--pagetop-bg-color, #fff);
    color: var(--pagetop-icon-color, #333);
    border: 1px solid var(--pagetop-icon-color, #333);
    
    /* 初期状態は隠す */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    
    /* 中央揃え */
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 表示クラスがついたら出現 */
.pagetop.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ホバー時 */
.pagetop:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* アイコンサイズ */
.pagetop i {
    font-size: 1.2rem;
}

/* --- 形状バリエーション --- */

/* 丸型 */
.pagetop.shape-circle {
    border-radius: 50%;
}

/* 四角型 */
.pagetop.shape-square {
    border-radius: 4px; /* 少しだけ角丸 */
}

/* 画像型 */
.pagetop.shape-image {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 60px; height: 60px; /* 画像は少し大きめに */
}
.pagetop.shape-image:hover {
    transform: translateY(-5px); /* 画像でも浮くアニメーション */
}
.pagetop.shape-image img {
    width: 100%; height: 100%;
    object-fit: contain;
    /* 影をつけて画像をくっきりさせる */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* スマホ対応 */
@media (max-width: 768px) {
    .pagetop {
        bottom: 15px; right: 15px;
        width: 44px; height: 44px;
    }
    .pagetop.shape-image {
        width: 50px; height: 50px;
    }
}

/* ==============================================
   ▼▼ 固定ページ (Page) ▼▼
   ============================================== */

/* 記事ページと同じ幅・デザインを継承しつつ、少しシンプルに */

.page-header {
    margin-bottom: 40px;
    text-align: center;
}

/* アイキャッチ画像の調整 */
.page-thumb {
    margin-top: 30px;
}

/* 固定ページのタイトルは少し落ち着かせる（お好みで） */
.page-header .article-title {
    font-size: 1.6rem;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .page-header { margin-bottom: 30px; }
    .page-header .article-title { font-size: 1.3rem; }
}

/* ==============================================
   ▼▼ パンくずリスト & アーカイブ ▼▼
   ============================================== */

/* --- パンくずリスト --- */
.breadcrumb-area {
    padding: 15px 20px;
    background: #f9f9f9; /* 薄いグレー背景 */
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 20px;
    border-radius: 4px;
}
.breadcrumb ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.breadcrumb li {
    display: flex; align-items: center;
}
/* 区切り文字 (>) */
.breadcrumb li:not(:last-child)::after {
    content: '\f054'; /* FontAwesome 右矢印 */
    font-family: 'Font Awesome 5 Free'; font-weight: 900;
    font-size: 0.7rem;
    margin-left: 8px;
    opacity: 0.5;
}
.breadcrumb a {
    text-decoration: none; color: #333;
    transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--color-main, #333); text-decoration: underline; }

/* --- ページネーション (ページ送り) --- */
.pagination {
    margin-top: 60px; text-align: center;
}
.nav-links {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.page-numbers {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid #ddd; border-radius: 4px;
    text-decoration: none; color: #333;
    transition: all 0.3s;
}
.page-numbers.current,
.page-numbers:hover {
    background: var(--color-main, #333); color: #fff; border-color: var(--color-main, #333);
}
.page-numbers.dots { border: none; }

/* スマホ対応 */
@media (max-width: 768px) {
    .breadcrumb-area { font-size: 0.7rem; padding: 10px 15px; }
}

/* ==============================================
   ▼▼ 検索機能 (Search Modal) ▼▼
   ============================================== */

/* --- ヘッダーの虫眼鏡ボタン --- */
.search-toggle-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1.2rem; color: #333;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.3s;
    margin-left: 10px; /* 他の要素との間隔 */
}
.search-toggle-btn:hover { opacity: 0.7; }


/* --- 検索モーダル (オーバーレイ) --- */
.search-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: all 0.3s ease;
}
.search-modal.is-active {
    opacity: 1; visibility: visible; pointer-events: auto;
}

/* 背景 (半透明の黒) */
.search-modal-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px); /* すりガラス効果 */
}

/* コンテンツ (中央配置) */
.search-modal-inner {
    position: relative; z-index: 1;
    top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9);
    width: 90%; max-width: 600px;
    text-align: center; color: #fff;
    transition: transform 0.3s;
}
.search-modal.is-active .search-modal-inner {
    transform: translate(-50%, -50%) scale(1);
}

.search-modal-title {
    font-size: 2rem; font-weight: bold; letter-spacing: 0.1em;
    margin-bottom: 30px; font-family: 'Arial Black', sans-serif;
}

/* フォームデザイン */
.search-modal .search-form {
    position: relative; width: 100%;
}
.search-modal .search-field {
    width: 100%; padding: 20px 60px 20px 30px;
    font-size: 1.2rem; border-radius: 50px; border: none;
    outline: none; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.search-modal .search-submit {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: var(--color-main, #333); color: #fff;
    width: 50px; height: 50px; border-radius: 50%;
    border: none; cursor: pointer; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.3s;
}
.search-modal .search-submit:hover { opacity: 0.8; }

/* 閉じるボタン */
.search-modal-close {
    margin-top: 40px; background: none; border: 1px solid rgba(255,255,255,0.5);
    color: #fff; padding: 10px 30px; border-radius: 30px;
    cursor: pointer; font-size: 0.9rem; transition: all 0.3s;
}
.search-modal-close:hover {
    background: #fff; color: #333;
}

/* ==============================================
   ▼▼ スマホ余白・文字被り 3パターン完全分離版 ▼▼
   ============================================== */

@media (max-width: 768px) {

    /* ------------------------------------------------
       パターン1：ノーマル (単色)
       ヘッダーが場所を取るので、パンくずリストの余白は少なめでOK
    ------------------------------------------------ */
    body.sp-glass-normal .breadcrumb-area {
        margin-top: 20px !important;
        padding-top: 0 !important;
    }

    /* ------------------------------------------------
       パターン2：すりガラス風 (Glass)
       ヘッダーが重なるので、ヘッダーの高さ分(約60px)+α を押し下げる
    ------------------------------------------------ */
    body.sp-glass-glass .breadcrumb-area {
        padding-top: 80px !important; /* 少し余裕を持たせる */
        margin-top: 0 !important;
    }

    /* ------------------------------------------------
       パターン3：背景なし・文字のみ (None)
       ★ここが被っている箇所。さらに大きく余白を取る
    ------------------------------------------------ */
    body.sp-glass-none .breadcrumb-area {
        padding-top: 100px !important; /* 確実に被らないよう大きく確保 */
        margin-top: 0 !important;
        position: relative;
        z-index: 1;
    }

}

/* ==============================================
   ▼▼ 記事下パンくずリスト (Breadcrumb Bottom) ▼▼
   ============================================== */

.breadcrumb-bottom {
    margin-top: 40px;
    padding: 20px 0;
    border: none; /* ★修正：枠線を削除 */
}

/* リストのデザイン調整 */
.breadcrumb-bottom .breadcrumb {
    font-size: 0.8rem;
    color: #666;
    background: transparent;
    padding: 0;
}

.breadcrumb-bottom ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}

.breadcrumb-bottom li {
    display: flex; align-items: center;
    line-height: 1.5;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .breadcrumb-bottom {
        margin-top: 30px;
        font-size: 0.75rem;
    }
}

/* ==============================================
   ▼▼ 404ページ (Not Found) ▼▼
   ============================================== */

.error-title {
    font-size: 8rem;
    line-height: 1;
    font-family: 'Arial Black', sans-serif;
    color: #eee; /* 薄いグレーで背景っぽく */
    margin: 0;
    letter-spacing: 0.05em;
}

.error-sub {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: -20px; /* 数字に被せる */
    margin-bottom: 30px;
    position: relative;
    color: #333;
}

.error-message {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* TOPに戻るボタン */
.btn-home {
    display: inline-block;
    padding: 12px 40px;
    border-radius: 50px;
    background: var(--color-main, #333);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s, transform 0.3s;
}
.btn-home:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .error-title { font-size: 5rem; }
    .error-sub { font-size: 1.2rem; margin-top: -10px; }
}

/* ==============================================
   ▼▼ 虫眼鏡アイコン位置調整 (レイアウト別・余白調整版) ▼▼
   ============================================== */

/* --- 1. 基本設定 (共通) --- */
.search-toggle-btn {
    position: absolute !important;
    z-index: 10002;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    right: 20px !important; /* デフォルト位置 */
    left: auto !important;
    
    background: transparent;
    border: none;
    cursor: pointer;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}

.search-toggle-btn i {
    font-size: 1.2rem;
    color: var(--header-text, #333);
}
body.header-text-white .search-toggle-btn i { color: #fff; }


/* --- 2. レイアウト別の微調整 (PC) --- */
@media (min-width: 769px) {

    /* A. ベーシック & 背景なし */
    .header-inner {
        padding-right: 70px !important; /* 少し余裕を持たせる */
    }

    /* --------------------------------------
       B. 浮遊感：デフォルト & ロング (Float Default/Long)
       ★ここを修正しました！
       -------------------------------------- */
    body.pc-layout-float-round .search-toggle-btn {
        right: 25px !important;
    }
    
    /* メニューがアイコンに近づかないように、右側の余白を大きく取る */
    body.pc-layout-float-round .header-inner {
        /* 50px -> 100px に変更して、間にしっかり隙間を作る */
        padding-right: 100px !important; 
    }


    /* C. 浮遊感：小 (Float Slim) */
    body.pc-layout-float-round.float-style-slim .search-toggle-btn {
        top: 20px !important; 
        transform: none !important;
        right: 140px !important; 
        color: #333;
    }

    /* D. 縦向き (Vertical) */
    body.pc-layout-vertical-left .search-toggle-btn {
        top: auto !important;
        bottom: 20px !important;
        transform: none !important;
        left: 0 !important; right: 0 !important; margin: 0 auto !important;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 50%;
        background: rgba(255,255,255,0.8);
        width: 44px; height: 44px;
    }
}

/* --- 3. スマホ表示 (Mobile) --- */
@media (max-width: 768px) {
    .search-toggle-btn {
        right: 55px !important;
        width: 44px; height: 44px;
        top: 0 !important; bottom: 0 !important;
        transform: none !important; margin: auto !important;
    }
}
/* ==============================================
   ▼▼ ヘッダーの基準点設定 (アイコン飛び出し防止) ▼▼
   ============================================== */

.site-header {
    /* これがあることで、絶対配置(absolute)のボタンがヘッダーの中に留まります */
    position: relative; 
}
/* ==============================================
   ▼▼ 著者プロフィール (Refined Design) ▼▼
   ============================================== */

/* --- 共通ベース (Base Styles) --- */
.author-box {
    margin: 60px 0 40px;
    padding: 40px; /* 余白をたっぷりとる */
    background: #fff;
    border-radius: 4px; /* 角丸は小さくしてシャープに */
    position: relative;
    letter-spacing: 0.05em;
}

/* タイトルラベル */
.author-header { margin-bottom: 25px; }
.author-label {
    display: inline-block;
    font-size: 0.75rem; /* 小さく上品に */
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #999; /* グレーで控えめに */
    border-bottom: 1px solid #ddd; /* 下線のみでシンプルに */
    padding-bottom: 5px;
}

/* レイアウト */
.author-body {
    display: flex;
    gap: 40px; /* 写真と文字の間隔を広く */
    align-items: flex-start;
}

/* アバター画像 */
.author-avatar {
    flex-shrink: 0;
}
.author-avatar img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 50%;
    /* 画像にうっすら影をつけて浮き上がらせる */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}

/* テキスト情報 */
.author-info { flex-grow: 1; }

.author-name {
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0 0 15px;
    line-height: 1.3;
    color: #333;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 綺麗なフォント優先 */
}

.author-description {
    font-size: 0.95rem;
    line-height: 1.8; /* 行間を広げて読みやすく */
    color: #666;
    margin-bottom: 20px;
    opacity: 0.9;
}

/* SNSアイコン (ミニマルスタイル) */
.author-sns {
    display: flex; gap: 12px; flex-wrap: wrap;
}
.sns-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    
    /* 背景なし・枠線ありのシンプルスタイル */
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #888;
    
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

/* ホバー時はブランドカラー＆少し浮く */
.sns-btn:hover {
    transform: translateY(-2px);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.sns-btn.website:hover { background: #333; }
.sns-btn.twitter:hover { background: #000; }
.sns-btn.instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.sns-btn.youtube:hover { background: #ff0000; }


/* ==============================================
   ▼ デザインバリエーション (Refined) ▼
   ============================================== */

/* ① シンプル (Simple): 洗練された枠線スタイル */
.author-box.design-simple {
    border: 1px solid #eee; /* 極めて薄い枠線 */
}
.author-box.design-simple .author-avatar {
    width: 100px; height: 100px;
}


/* ② カード (Card): 浮遊感のあるモダンカード */
.author-box.design-card {
    text-align: center;
    border: none;
    /* 柔らかく広がる影 */
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    padding-top: 50px;
}
.author-box.design-card .author-header { display: none; }

.author-box.design-card .author-body {
    flex-direction: column; align-items: center; gap: 20px;
}
.author-box.design-card .author-avatar {
    width: 110px; height: 110px;
    margin-top: -80px; /* 上に大きく飛び出させる */
    border: 4px solid #fff; /* 白い縁取り */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* 影を強化 */
    background: #fff;
    border-radius: 50%;
}
.author-box.design-card .author-name {
    margin-bottom: 10px; font-size: 1.4rem;
}
.author-box.design-card .author-sns { justify-content: center; }


/* ③ スタイリッシュ (Pop -> Stylish): フラットな背景 */
.author-box.design-pop {
    background: #f8f9fa; /* 上品なライトグレー */
    border: none; /* 線は消す */
    border-radius: 8px;
}
.author-box.design-pop .author-header { text-align: center; margin-bottom: 30px; }
.author-box.design-pop .author-label {
    background: transparent; color: #333;
    border: 1px solid #333;
    padding: 6px 20px;
}

.author-box.design-pop .author-avatar {
    width: 100px; height: 100px;
}


/* --- スマホ対応 (Mobile) --- */
@media (max-width: 768px) {
    .author-box { padding: 30px 20px; margin: 40px 0; }
    
    .author-body { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
    
    .author-avatar { width: 90px; height: 90px; }
    .author-box.design-simple .author-avatar { width: 90px; height: 90px; }
    
    .author-sns { justify-content: center; }
    .author-description { text-align: left; } /* スマホでも文章は左揃えの方が見やすい場合あり */
}

/* ==============================================
   ▼▼ 2カラムレイアウト (Sidebar) ▼▼
   ============================================== */

/* ラッパー：PCではGridで横並び */
@media (min-width: 1025px) {
    .site-content-wrapper {
        display: grid;
        /* メイン(可変) + 隙間 + サイドバー(300px固定) */
        grid-template-columns: 1fr 300px;
        gap: 40px;
        padding-top: 40px;
        padding-bottom: 80px;
        align-items: start; /* 上揃え */
    }

    /* メインエリア */
    .site-main {
        min-width: 0; /* Grid内でのはみ出し防止 */
    }

    /* サイドバー */
    .site-sidebar {
        width: 100%;
    }
    
    /* サイドバーの中身を追従させる場合 (sticky) */
    .sidebar-inner {
        position: sticky;
        top: 20px; /* 上から20pxで止まる */
    }
}

/* スマホ・タブレット (1024px以下) */
@media (max-width: 1024px) {
    .site-content-wrapper {
        display: block;
        padding-top: 30px;
        padding-bottom: 60px;
    }
    .site-sidebar {
        margin-top: 60px; /* コンテンツとの隙間 */
    }
}


/* --- サイドバーのデザイン --- */
.widget-sidebar {
    margin-bottom: 40px;
    background: #fff;
    padding: 25px;
    border-radius: 4px;
    border: 1px solid #eee; /* 洗練された枠線 */
}

.widget-sidebar-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-main, #333);
    display: inline-block;
}

/* サイドバー内のリスト */
.widget-sidebar ul {
    list-style: none; margin: 0; padding: 0;
}
.widget-sidebar ul li {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    font-size: 0.95rem;
}
.widget-sidebar ul li:last-child { border-bottom: none; }
.widget-sidebar ul li a { color: #333; text-decoration: none; }
.widget-sidebar ul li a:hover { color: var(--color-main, #333); text-decoration: underline; }

/* 検索窓やカレンダーのはみ出し防止 */
.widget-sidebar select, 
.widget-sidebar img, 
.widget-sidebar iframe {
    max-width: 100%;
}

/* ==============================================
   ▼▼ レイアウト制御 (Layout Control) ▼▼
   ============================================== */

/* --- PC表示 (1025px以上) --- */
@media (min-width: 1025px) {

    /* ① 2カラム設定 (2col) の場合 */
    body.oluoli-layout-2col .site-content-wrapper {
        display: grid;
        grid-template-columns: 1fr 300px; /* メイン + サイドバー */
        gap: 40px;
        padding-top: 40px;
        padding-bottom: 80px;
        align-items: start;
    }

    /* ② 1カラム設定 (1col) の場合 */
    body.oluoli-layout-1col .site-content-wrapper {
        display: block; /* 横並び解除 */
        padding-top: 40px;
        padding-bottom: 80px;
        max-width: 1000px; /* 1カラムの時は幅を少し絞って読みやすく */
        margin: 0 auto;
    }

    /* 1カラムの時はサイドバーを消す */
    body.oluoli-layout-1col .site-sidebar {
        display: none;
    }

    /* 1カラムの時のメインエリア調整 */
    body.oluoli-layout-1col .site-main {
        width: 100%;
    }
    /* 1カラムの時は記事幅を中央寄せに */
    body.oluoli-layout-1col .single-container {
        margin: 0 auto;
    }

    /* --- サイドバー共通設定 --- */
    .site-sidebar { width: 100%; }
    .sidebar-inner { position: sticky; top: 20px; }
    
    .widget-sidebar {
        background: #fff; padding: 25px;
        border: 1px solid #eee; margin-bottom: 30px;
        border-radius: 4px;
    }
    .widget-sidebar-title {
        font-weight: bold; border-bottom: 2px solid #333;
        margin-bottom: 15px; display: inline-block;
    }
}

/* --- スマホ・タブレット (1024px以下) --- */
@media (max-width: 1024px) {
    .site-content-wrapper {
        display: block;
        padding-top: 20px;
    }
    
    /* 2カラム設定でもスマホではサイドバーを下に落とす */
	.site-sidebar { margin-top: 60px; }

    /* 1カラム設定の場合はスマホでもサイドバーを消す */
    body.oluoli-layout-1col .site-sidebar { display: none; }
}

}
/* ヘッダーの固定を最優先し、アイコンの基準点としても機能させる */
.site-header {
    /* position: relative は削除し、レイアウトごとの設定に任せる */
    z-index: 1000;
}

/* スマホ用：基本レイアウトでの固定を再定義 */
@media (max-width: 768px) {
    body.sp-layout-basic .site-header {
        position: fixed !important; /* 強制的に固定 */
        top: 0 !important;
        left: 0;
        width: 100%;
    }
}

/* PC用：固定レイアウトでの設定 */
@media (min-width: 769px) {
    body.pc-layout-basic-fixed .site-header {
        position: fixed !important;
        top: 0 !important;
    }
}
/* ==============================================
   Illustration Detail Page Style
   ============================================== */

/* コンテナ設定 */
.single-illustration-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.ill-detail-article {
    display: grid;
    grid-template-columns: 1fr 320px; /* メイン画像 ＋ サイドプロフ */
    gap: 40px;
    align-items: start;
}

/* メインエリア */
.ill-main-view {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.ill-header { margin-bottom: 30px; text-align: center; }
.ill-title { font-size: 2rem; font-weight: bold; margin-bottom: 10px; }
.ill-post-meta { color: #888; font-size: 0.9rem; }
.ill-author-name { margin-left: 15px; font-weight: bold; color: var(--color-main); }

/* 画像表示を大きく・美しく */
.ill-featured-image {
    margin-bottom: 40px;
    text-align: center;
}
.ill-featured-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.ill-featured-image img:hover {
    transform: scale(1.01);
}
.ill-zoom-hint { font-size: 0.8rem; color: #aaa; margin-top: 10px; }

/* サイドバー・プロフィール */
.ill-author-card {
    background: #f8fafc;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
}
.card-title { font-size: 0.8rem; font-weight: bold; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; }
.author-name-large { font-size: 1.4rem; font-weight: bold; margin-bottom: 5px; }
.author-age { font-size: 0.85rem; color: #94a3b8; margin-bottom: 15px; }
.author-desc { font-size: 0.95rem; line-height: 1.7; color: #475569; }

.contact-status.is-ok {
    margin-top: 20px;
    background: #ecfdf5;
    color: #059669;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
}

/* ダウンロードボタン */
.ill-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--color-main, #333);
    color: #fff !important;
    padding: 18px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.3s;
}
.ill-download-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* レスポンシブ */
@media (max-width: 959px) {
    .ill-detail-article { grid-template-columns: 1fr; }
    .ill-sidebar { order: 2; }
    .ill-main-view { padding: 25px; }
}

/* ==============================================
   Illustration Gallery Grid Style
   ============================================== */

/* 見出しの装飾 */
.ill-archive-header {
    text-align: center;
    margin-bottom: 50px;
}
.ill-archive-title {
    font-size: 2.2rem;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}
.ill-archive-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--color-main, #333);
    border-radius: 2px;
}

/* グリッドレイアウト */
.ill-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.ill-gallery-item {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ill-gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* サムネイルとオーバーレイ */
.ill-gallery-thumb {
    position: relative;
    aspect-ratio: 1 / 1; /* 正方形で統一 */
    overflow: hidden;
}
.ill-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.ill-gallery-item:hover .ill-gallery-thumb img {
    transform: scale(1.1);
}

.ill-gallery-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}
.ill-gallery-item:hover .ill-gallery-overlay {
    opacity: 1;
}
.view-details {
    color: #fff;
    border: 2px solid #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.9rem;
}

/* テキストエリア */
.ill-gallery-body {
    padding: 20px;
    text-align: center;
}
.ill-gallery-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ill-gallery-author {
    font-size: 0.85rem;
    color: #888;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .ill-gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
        gap: 15px;
    }
    .ill-gallery-body { padding: 12px; }
    .ill-gallery-title { font-size: 0.95rem; }
}
/* 相談ボタン下の注釈 */
.ill-contact-note {
    font-size: 0.75rem;
    color: #888;
    margin-top: 10px;
    line-height: 1.4;
    text-align: center;
}

/* 相談ボタンの色味を「仲介」を意識した信頼感のある色に変更 */
.ill-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #455a64; /* 落ち着いたダークグレー/ネイビー系 */
    color: #fff !important;
    padding: 16px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    margin-top: 15px;
    box-shadow: 0 4px 12px rgba(69, 90, 100, 0.2);
    transition: all 0.3s ease;
}

.ill-contact-btn:hover {
    transform: translateY(-2px);
    background: #263238;
    box-shadow: 0 8px 20px rgba(69, 90, 100, 0.3);
}

/* --- 記事一覧：カテゴリーラベルを左上に配置 --- */
.post-thumb {
    position: relative; /* 子要素の基準点 */
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.post-cat {
    position: absolute !important; /* 絶対配置で浮かせます */
    top: 10px !important;         /* 上から10px */
    left: 10px !important;        /* 左から10px */
    z-index: 5;
    background: var(--color-main, #333) !important;
    color: #fff !important;
    font-size: 0.7rem !important;
    padding: 3px 10px !important;
    border-radius: 4px !important; /* 角丸を少しシャープに */
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    opacity: 1 !important;        /* 確実に表示 */
    pointer-events: none;         /* 下のリンククリックを邪魔しない */
}

/* メタ情報の調整（日付と作者名の並び） */
.post-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.post-author {
    font-size: 0.75rem;
    color: #888;
}

/* front-page.php のメインビジュアル下のコンテンツ余白 */
.front-page .site-content-wrapper {
    margin-top: 40px;
    margin-bottom: 60px;
}

/* --- サイドバー全体の設計 --- */
#secondary {
    width: 100%;
}

@media (min-width: 992px) {
    .sidebar-sticky-wrapper {
        position: sticky;
        top: 20px; /* 画面上部から20pxの位置で止まる */
    }
}

/* ウィジェットの共通枠 */
.widget {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

/* ウィジェット見出し */
.widget-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #bbb;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.widget-title::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #f0f0f0;
    margin-left: 15px;
}

/* 検索フォーム */
.search-form-v2 {
    display: flex;
    background: transparent;
    border-radius: 50px;
    padding: 5px 5px 5px 20px;
    border: 2px solid #eee;
}

.search-field {
    border: none;
    background: #ffffff;
    flex-grow: 1;
    font-size: 0.9rem;
    outline: none;
}

.search-submit {
    background: #333;
    color: #fff;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.search-submit:hover { background: #000; }

/* 最新記事リスト */
.side-post-item {
    display: flex;
    gap: 12px;
    text-decoration: none !important;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f9f9f9;
}

.side-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.side-post-thumb {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}

.side-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.side-post-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
    margin: 0 0 5px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.side-post-date {
    font-size: 0.75rem;
    color: #aaa;
}

/* カテゴリーラベル */
.side-cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.side-cat-link {
    display: flex;
    align-items: center;
    background: #f7f8f9;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #eee;
    transition: 0.3s;
}

.side-cat-link:hover {
    background: #333;
    color: #fff !important;
    border-color: #333;
}

.side-cat-link .count {
    margin-left: 6px;
    font-size: 0.7rem;
    opacity: 0.6;
}

/* --- 今日の一枚：ウィジェット装飾 --- */
.widget_todays_pick {
    padding: 0 !important; /* カードを目立たせるために外枠のパディングを調整 */
    overflow: hidden;
    border: none !important;
    background: transparent !important;
}

.todays-pick-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.pick-thumb-link {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.pick-thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pick-thumb-link:hover img {
    transform: scale(1.08);
}

/* カテゴリーラベルを写真の上に浮かせる */
.pick-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

.pick-info {
    padding: 20px;
    text-align: center;
}

.pick-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 5px 0;
    color: #333;
}

.pick-author {
    display: block;
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 15px;
}

/* 「作品を見る」ボタンをよりオシャレに */
.pick-view-btn {
    display: inline-block;
    background: var(--color-main, #333);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 8px 25px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.pick-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    background: #000;
}

/* レイアウト設計 */
.ill-modern-container {
    max-width: 1140px;
    margin: 40px auto;
    padding: 0 20px;
    color: #333;
    line-height: 1.6;
}

.ill-content-wrapper {
    display: flex;
    gap: 40px;
}

.ill-main-area { flex: 1; min-width: 0; }
.ill-sidebar { width: 300px; flex-shrink: 0; }

/* メインエリア：各セクションの余白とデザイン */
.ill-header-v3 { margin-bottom: 25px; }
.ill-title { font-size: 2rem; font-weight: 700; margin-bottom: 10px; }
.ill-meta-v3 { color: #999; font-size: 0.9rem; }

.ill-hero-v3 img, .ill-display-v3 img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.08);
}

/* 情報カード（洗練されたスタイル） */
.ill-info-card-v3 {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 40px;
    margin: 40px 0;
    position: relative;
}

.card-tag {
    position: absolute;
    top: -12px;
    left: 30px;
    background: #222;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 15px;
    border-radius: 20px;
    letter-spacing: 0.1em;
}

.creator-name-v3 { font-size: 1.5rem; margin-bottom: 15px; }
.creator-age-v3 { font-size: 1rem; color: #888; margin-left: 10px; font-weight: 400; }
.creator-bio-v3 { font-size: 0.95rem; color: #555; margin-bottom: 25px; line-height: 1.8; }

/* ボタン共通：モダンなフラットデザイン */
.btn-v3, .ill-download-btn, .ill-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    cursor: pointer;
}

/* メイン内のボタン */
.ill-inner-buttons-v3 { display: flex; gap: 15px; }
.btn-v3 { flex: 1; font-size: 0.9rem; }
.btn-v3-rule { background: #f5f5f5; color: #444 !important; border: 1px solid #ddd; }
.btn-v3-dl { background: #222; color: #fff !important; }

/* サイドバーのボタン（消えていたものを再定義） */
.ill-download-btn { background: #f39c12; color: #fff !important; }
.ill-contact-btn { background: #27ae60; color: #fff !important; }

.btn-v3:hover, .ill-download-btn:hover, .ill-contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    opacity: 0.9;
}

/* 管理者コメント：通知っぽさを消してレビュー風に */
.ill-admin-review-v3 {
    margin-top: 60px;
    padding: 30px;
    background: #fafafa;
    border-radius: 12px;
    border-left: 4px solid #333;
}
.review-label-v3 { font-weight: 800; font-size: 0.8rem; color: #999; text-transform: uppercase; margin-bottom: 10px; }

/* スマホ対応 */
@media (max-width: 850px) {
    .ill-content-wrapper { flex-direction: column; }
    .ill-sidebar { width: 100%; order: 2; }
    .ill-inner-buttons-v3 { flex-direction: column; }
}

/* 管理者自由入力エリア */
.ill-admin-custom-area {
    margin-top: 60px;
    padding: 35px;
    background: #fdfdfd;
    border: 1px dashed #ccc; /* 自由入力感を出す点線枠 */
    border-radius: 12px;
}

.admin-label-v3 {
    display: inline-block;
    background: #222;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 2px;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

.admin-free-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}

/* 管理者がエディタで入れた画像やボタンへの配慮 */
.admin-free-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
}

.admin-free-content p {
    margin-bottom: 1.5em;
}

/* ボタンのクリックを確実に有効にする設定 */
.ill-sidebar, 
.ill-submit-form, 
.ill-inner-buttons-v3, 
.sidebar-btn-wrap {
    position: relative;
    z-index: 10; /* 他の要素より上に配置 */
}

.clickable-button, 
.submit-btn, 
.btn-v3 {
    pointer-events: auto !important; /* クリックを強制的に有効化 */
    position: relative;
    z-index: 20;
}

/* メインエリアの画像や影がサイドバーに被らないように調整 */
.ill-main-area {
    position: relative;
    z-index: 1;
}

/* 投稿フォームのボタンが押せない場合の予備措置 */
.ill-submit-form input[type="submit"] {
    cursor: pointer;
    position: relative;
    z-index: 100;
}

/* 画像拡大（Lightbox）のリンクが画面全体を覆わないように修正 */
.ill-lightbox {
    display: inline-block;
    max-width: 100%;
}