.post-content {
    letter-spacing: 0.05em; /* 文字の間隔をわずかに広げる */
}
        /* ブラウザ間の差異を埋めるリセット */
        * { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
body {
    font-family: "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Meiryo", sans-serif; /* ここを書き換え */
    background: #f4f7f6;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
}
        .container { max-width: 600px; margin: 0 auto; padding: 0 15px; }
        .header { text-align: center; padding: 15px 0; border-bottom: 3px solid #5c93bb; background: #fff; }
        .header h1 { margin: 0; font-size: 1.8em; color: #2c3e50; line-height: 1.01; }
        
        /* --- サイトコメント：改行を維持しつつ、密度を極限まで高める --- */
        .site-comment { 
            background: #fffbe6; 
            padding: 8px; 
            border: 1px solid #ffe58f; 
            border-radius: 6px; 

/* フォント指定をより強固に */
    font-family: "Meiryo", "MS PGothic", "メイリオ", sans-serif !important;
    font-weight:normal !important; /* normalを900は最大値です */
    
    /* 文字が詰まって見える場合は少しだけサイズを上げます */
    font-size: 0.9em !important;

            font-size: 1.0em; 
            color: #856404; 
            /* white-space: pre-wrap; で、Enterによる改行コード自体は活かします */
            white-space: pre-wrap !important; 
            margin: 15px auto; 
            max-width: 600px; 
            text-align: center; 
            /* 行の間隔をご指定の 0.6 に設定（文字が重なるくらいの密度） */
            line-height: 1.3 !important; 
        }

        /* ここがポイント：PHPの nl2br などで挿入される <br> を非表示にします。
           これで「自動折り返し」と「手動改行」の見た目が完全に一致します。 */
.site-comment br {
            display: none !important;
        }
        /* カテゴリー説明欄（青い枠）の中だけは改行を有効にする */
        [style*="background: #eef7ff"] br {
            display: inline !important;
        }

        /* 記事本文(entry-content)も同様に詰めたい場合の設定 */
        .entry-content {
            font-size: 0.95em;
            color: #444;
            margin-bottom: 15px;
            flex-grow: 1;
            white-space: pre-wrap !important;
            line-height: 1.6; /* 行間 1.0 から変更 2026 04 15 */
        }
        .entry-content br {
            display: none !important;
        }
        
        .sticky-nav { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.98); border-bottom: 2px solid #5c93bb; padding: 10px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .menu-title { font-weight: bold; color: #5c93bb; margin-bottom: 8px; display: block; text-align: center; font-size: 0.9em; }
/* --- パソコン・タブレット用のデフォルト設定（今まで通り適切に並ぶ） --- */
/* 205行目あたり */
.cat-grid {
    display: grid;
    /* 130px を 100px くらいに下げると、1列に並ぶボタンの数が増えます */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    gap: 6px; /* 隙間も少し詰めるとコンパクトです */
    margin-bottom: 10px;
}

/* --- スマホ用（画面幅が 600px 以下の時）だけ横スクロールにする --- */
@media (max-width: 600px) {
    .cat-grid {
        display: flex;         /* 横並びに変更 */
        overflow-x: auto;      /* 横スクロール許可 */
        white-space: nowrap;   /* 改行禁止 */
        gap: 10px;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
    }
    /* スマホ時はボタンの幅を自動(文字数に合わせる)にする */
    .cat-card {
        flex: 0 0 auto;
    }
    /* スクロールバーを隠す */
    .cat-grid::-webkit-scrollbar {
        display: none;
    }
}
.cat-card {
    background: white;
    padding: 4px 6px;    /* 標準上下を6px、左右を8pxに縮小 */
    text-align: center;
    border-radius: 4px;   /* 角丸も少し小さくするとシャープになります */
    border: 1px solid #5c93bb;
    text-decoration: none;
    color: #5c93bb;
    font-size: 0.85em;    /* 文字をほんの少し小さく */
    font-weight: bold;
}        .cat-card.active { background: #5c93bb; color: white; }

        /* --- ページネーションのデザイン --- */
        .pagination-wrapper { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 5px 0; font-family: sans-serif; }
        .page-num, .page-arrow {
            text-decoration: none;
            min-width: 28px; /ボタンサイズ
            height: 28px; /ボタンサイズ
/* --- ここが重要：文字を真ん中に固定する設定 --- 下記/でコメントアウト中 */
/    display: flex;           /* フレックスボックスを使う */
/    align-items: center;     /* 上下の中央 */
    justify-content: center; /* 左右の中央 */
/    text-align: center;      /* 文字そのものを中央寄せ */
/    line-height: 1;          /* 行の高さをリセットしてズレを防ぐ */
/    padding: 0;              /* 余計な余白をリセット */
/* ------------------------------------------ */
            display: flex;
            align-items: center;
/            justify-content: center;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            color: #5c93bb;
            font-weight: bold;
            font-size: 0.85em;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .page-num:hover, .page-arrow:hover {
            background: #f0f7ff;
            border-color: #5c93bb;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .page-num.current {
            background: #5c93bb;
            color: #fff;
            border-color: #5c93bb;
            box-shadow: 0 4px 10px rgba(92, 147, 187, 0.3);
        }
        .page-dots { color: #999; padding: 0 5px; font-weight: bold; }
        .page-arrow { font-size: 1.2em; color: #5c93bb; }

        .cat-card-wrapper { position: relative; display: inline-block; }
        .cat-tooltip {
            visibility: hidden; opacity: 0; position: absolute; bottom: 110%; left: 50%;
            transform: translateX(-50%) translateY(5px);
            background: rgba(44, 62, 80, 0.95); color: #fff; padding: 6px 10px;
            border-radius: 6px; font-size: 0.75em; width: max-content;
            z-index: 1001; transition: 0.3s ease; pointer-events: none;
        }
        .cat-card-wrapper:hover .cat-tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }
        
        .entry { background: white; padding: 20px; border-radius: 10px; margin-bottom: 25px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
        .entry-header { margin-bottom: 5px; border-left: 5px solid #5c93bb; padding-left: 15px; }
        .entry-meta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
        .entry-cat { color: #5c93bb; font-size: 0.85em; font-weight: bold; }
        .entry-area { color: #666; font-size: 0.85em; font-weight: bold; background: #eee; padding: 2px 8px; border-radius: 4px; }
        .entry-title-row { display: flex; align-items: baseline; gap: 10px; }
        .entry-no { font-size: 1.4em; font-weight: bold; color: #5c93bb; }
        .entry-title { font-size: 1.4em; font-weight: bold; color: #2c3e50; margin: 0; flex: 1; line-height: 1.05; }
        
        .entry-price-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
        .entry-price-container { display: inline-block; cursor: pointer; }
        .entry-price { font-size: 1.25em; font-weight: bold; color: #d32f2f; }
        .price-mask { 
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            background: #d32f2f; 
            color: white;
            font-size: 0.8em;
            padding: 4px 12px;
            border-radius: 4px; 
            font-weight: bold;
            vertical-align: middle;
            min-width: 100px;
        }
        .price-memo { font-size: 1.1em; color: #333; font-weight: normal; }
        .hidden { display: none !important; }

        .style-tile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-content: center; }
        .style-tile .img-container { width: 100%; }
        .style-tile .entry-img { width: 100%; height: 225px; object-fit: cover; }

        .style-slide { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
        .style-slide .img-container { flex: 0 0 300px; scroll-snap-align: start; }
        .style-slide .entry-img { width: 300px; height: auto; }

        .style-single { text-align: center; }
        .style-single .img-container { max-width: 300px; margin: 0 auto; }
        .style-single .entry-img { width: 100%; height: auto; border: 1px solid #eee; }

        .img-container { 
            position: relative; 
            border-radius: 8px; 
            overflow: hidden; 
            background: #eee; 
            margin-top: 5px; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .entry-img { 
            border-radius: 8px; 
            border: 1px solid #eee; 
            display: block; 
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            cursor: pointer;
        }

        .img-container:hover .entry-img {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .img-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 6px; font-size: 0.8em; text-align: center; line-height: 1.1; z-index: 10; }

        .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .fade-in.is-visible { opacity: 1; transform: translateY(0); }
        
        .floating-btns { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: center; gap: 15px; z-index: 1100; }
        
        .back-to-top { width: 50px; height: 50px; background: #5c93bb; color: white; border-radius: 50%; text-align: center; line-height: 50px; text-decoration: none; font-size: 24px; opacity: 0; visibility: hidden; transition: 0.3s; box-shadow: 0 3px 10px rgba(0,0,0,0.2); }
        .back-to-top.show { opacity: 1; visibility: visible; }

        .contact-btn { 
            width: 60px; height: 60px; 
            background: #ffcc80; /* リンクボタン背景の色 */ 
            color: #3e5c36; /* 文字色 */
            border-radius: 50%; 
            text-align: center; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            text-decoration: none; 
            font-size: 12px; 
            font-weight: bold; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
            animation: fuwafuwa 3s infinite ease-in-out;
            line-height: 1.2;
        }

        @keyframes fuwafuwa {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @media (max-width: 650px) { 
            .floating-btns { right: 15px; bottom: 15px; }
            .contact-btn { width: 55px; height: 55px; font-size: 11px; }
            .back-to-top { width: 45px; height: 45px; line-height: 45px; }
        }

/* すべての要素のフォントを強制的に統一する設定 */
* {
    font-family: "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Meiryo", sans-serif !important;
}

/* --- モーダル（拡大表示）の最新スタイル --- */

/* 背景：常に画面全体を覆い、中央寄せにする */
/* ポップアップ背景：画像が大きくてもスクロールできるようにします */
/* モーダル背景：常に中央配置 */
/* モーダル背景：常に画面全体を覆う */
/* モーダル背景：常に画面全体を覆う */
/* --- モーダル（拡大表示）の最新スタイル --- */

/* 背景：常に画面全体を覆い、中央寄せにする */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    overflow: auto; /* 原寸大の時にスクロール可能にする */
    cursor: zoom-out;
}

/* 画像配置のコンテナ：画面中央を維持 */
.modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

/* 拡大画像本体 */
.modal-content img {
    display: block;
    margin: auto;     /* 中央寄せ */
    max-width: 95vw;  /* 最初は画面幅に収める */
    max-height: 90vh; /* 最初は画面高さに収める */
    height: auto;
    border: 4px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    cursor: zoom-in;
    transition: transform 0.2s ease;
    background: #fff;
}

/* 原寸大モード（クリックで切り替え） */
.modal-content img.is-fullsize {
    max-width: none !important;
    max-height: none !important;
    cursor: zoom-out;
    margin-top: 0;   /* スクロールしやすくするため上端合わせ */
}

/* 閉じるボタン：★画面外に行かないよう fixed で右上に固定★ */
/* 閉じるボタン：サイズを半分程度にコンパクト化 */
.modal-close {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 60px;       /* 横幅を小さく */
    height: 30px;      /* 高さを低く */
    background: #ff4444; 
    color: #fff;
    font-size: 11px;   /* 文字も小さく */
    font-weight: bold;
    line-height: 30px; /* 高さと同じ数値にして中央に */
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10002;
    border: 1px solid #fff; /* 枠線も少し細く */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    opacity: 0.9;      /* 少し透かしておしゃれに */
}

.modal-close:hover {
    background: #cc0000;
    opacity: 1;
}

/* 中央配置を絶対守るためのコンテナ修正 */
.modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* 画面の高さに合わせる */
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* 点滅のアニメーション */
@keyframes blinker {
  50% { opacity: 0; }
}

/* ゆらゆら揺れるアニメーション */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* 虹色（グラデーション） */
.rainbow-text {
  background: linear-gradient(to right, #e60000, #f39800, #fff100, #009944, #0068b7, #1d2088, #920783);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

/* ふわふわ上下 */
@keyframes floating {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* くるくる回転 */
@keyframes spinning {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ズーム（鼓動） */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* カテゴリーボタンホバー */
.cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s;
}




.visitor-counter {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: rgba(0, 0, 0, 0.6); /* 半透明の黒 */
        color: #ffffff;
        padding: 5px 15px;
        border-radius: 30px; /* 丸みのある角 */
        font-family: 'Helvetica Neue', Arial, sans-serif;
        font-size: 11px;
        letter-spacing: 0.1em;
        backdrop-filter: blur(5px); /* 背景をぼかす（おしゃれ効果） */
        border: 1px solid rgba(255, 255, 255, 0.2);
        z-index: 1000;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        pointer-events: none; /* クリックの邪魔をしない */
        display: flex;
        align-items: center;
        gap: 8px;
        /* --- 修正ポイント：桁数が増えても隠れないように設定 --- */
        min-width: 140px;      /* 6桁が余裕を持って入る幅 */
        justify-content: center; /* 中身を中央寄せ */
        white-space: nowrap;  /* 数字の途中で改行させない */
    }
    .visitor-counter::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #00ffcc; /* アクセントカラーの点灯 */
        border-radius: 50%;
        box-shadow: 0 0 8px #00ffcc;
        /* --- 追加：点が数字に押されて潰れないように固定 --- */
        flex-shrink: 0;
    }
/* ネオン（発光） */
/ ぼんやりネオン .neon-text {
/  color: #fff;
/  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de;
/  font-weight: bold;
/}

/* 3D（立体文字） */
.text-3d {
  color: #2c3e50;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
  font-weight: bold;
}

/* タイプライター（1文字ずつ出現・文字数に合わせて止まる） */
.typewriter {
    display: inline-block;
    vertical-align: bottom; /* ズレ防止 */
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0;
    letter-spacing: .15em;
    
    /* 修正ポイント：幅の指定方法 */
    width: 0; /* 最初は非表示 */
    max-width: fit-content; 
    
    /* アニメーション：forwards を追加して最後で止まるようにします */
    animation: 
        typing 3.5s steps(40, end) forwards, 
        blink-caret .75s step-end infinite;
}

/* アニメーションの修正 */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; } /* inline-block要素の「中身の最大幅」まで広がります */
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}
/* --- 動き（アニメーション）系 --- */
/* 波打ち */
.text-wave {
    display: inline-block;
    animation: wave-anim 1.5s infinite ease-in-out;
    color: #ff5722;
    font-weight: bold;
}
@keyframes wave-anim {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* 弾む */
.text-poyo {
    display: inline-block;
    animation: poyo-anim 0.8s infinite;
    color: #e91e63;
    font-weight: bold;
}
@keyframes poyo-anim {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.2, 0.8) translateY(-5px); }
}

/* 電光掲示板：文字数に合わせる＆左右1文字余白＆流れるアニメ */
.text-scroll-container {
    display: inline-block;   /* 幅を中身（文字＋余白）に合わせる */
    vertical-align: middle;
    background: #000;
    border: 2px solid #444;
    border-radius: 4px;
    
    /* 左右に1文字分の「安全地帯」を作る */
    padding: 2px 1em; 
    
    overflow: hidden;        /* はみ出た文字は隠す */
    white-space: nowrap;     /* 改行させない */
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-weight: 900;
    line-height: 1.5;
}

.text-scroll {
    display: inline-block;
    /* 枠の中で右から左へ流れるアニメーション */
    animation: scroll-anim 5s linear infinite;
}

@keyframes scroll-anim {
    /* 1em（左余白分）から開始して、反対側の1em（右余白分）まで流れる */
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
/* アニメーションをさせない（または枠内だけで揺らす）場合 */
.text-scroll {
    display: inline-block;
    /* もし動かしたい場合は、ここを「左右に少し揺れる」程度にするとスマートです */
    /* animation: none; */ 
}

/* --- 背景・枠線（インパクト）系 --- */
/* 囲み枠 */
.text-box {
    border: 2px double #333;
    padding: 2px 6px;
    margin: 0 2px;
    display: inline-block;
}

/* 強い影 */
.text-shadow {
    color: #333;
    text-shadow: 3px 3px 0 #aaa;
    font-weight: bold;
}

/* 蛍光マーカー */
.text-marker {
    background: linear-gradient(transparent 50%, #ffff00 50%);
    padding: 0 2px;
    font-weight: bold;
}

/* グラデーション（虹色） */
.text-grad {
    font-weight: bold;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- 特殊な質感 --- */
/* 手書き風 */
.text-pen {
    color: #1a237e;
    font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
    border-bottom: 2px dotted #ff4081;
}

/* 袋文字 */
.text-border {
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

/* すりガラス */
.text-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff;
}

/* 打ち消し線 */
.text-strike {
    text-decoration: line-through;
    color: #888;
}

/* --- フォント・サイズ関連 --- */

/* 小さくする */
.text-small {
    font-size: 0.75em;
    vertical-align: middle;
}

/* もっと大きくする（既存のbigより大きくしたい場合） */
.text-huge {
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1.2;
}


/* 明朝体（カチッとした雰囲気、和風） */
.text-mincho {
    font-family: "YuMincho", "Hiragino Mincho ProN", serif;
}

/* デジタル時計風（数字などに使うと雰囲気が出ます） */
.text-digital {
    font-family: 'Courier New', Courier, monospace;
    background: #000;
    color: #0f0;
    padding: 0 4px;
    border-radius: 3px;
    font-weight: bold;
}

/* --- [grad:] 止まっている虹色（既存） --- */
.text-grad {
    font-weight: bold;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- [ugrad:] 動く虹色（新規追加） --- */
.text-ugrad {
    font-weight: bold;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ugrad-flow 3s linear infinite;
}

/* 虹を流すアニメーション設定 */
@keyframes ugrad-flow {
    0% { background-position: 0% center; }
    100% { background-position: -200% center; }
}

/* --- 昭和レトロなアンバー型板ガラス風 --- */
.text-retro-glass {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 2px; /* 昭和っぽく角は少しだけ残す */
    background: rgba(255, 191, 0, 0.2); /* ほんのり飴色の着色 */
    backdrop-filter: blur(4px) contrast(1.2); /* ぼかしとコントラストで質感を出す */
    -webkit-backdrop-filter: blur(4px) contrast(1.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.5); /* 内部の反射 */
    color: #4b2d00; /* 文字色は焦茶色系で */
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); /* 文字を浮かせる */
}

/* ひょっこり（下から出る） */
.text-up {
    display: inline-block;
    animation: anime-up 0.5s ease-out forwards;
}
@keyframes anime-up {
    0% { transform: translateY(15px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* 付箋（ふせん） */
.text-note {
    background: #fff100;
    padding: 0 8px;
    margin: 0 5px;
    font-weight: bold;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    transform: rotate(-2deg); /* 少し斜めにする */
    display: inline-block;
    color: #333;
}

/* ネオン（光る） */
.text-neon {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff00de, 0 0 20px #ff00de;
    animation: neon-flicker 2s infinite alternate;
}
@keyframes neon-flicker {
    0% { opacity: 1; text-shadow: 0 0 5px #fff, 0 0 10px #ff00de; }
    100% { opacity: 0.8; text-shadow: 0 0 2px #fff, 0 0 5px #ff00de; }
}

/*  少し激しいネオンにする場合は↓ */
/@keyframes neon-flicker {
/    0% { 
/        opacity: 1; 
/        text-shadow: 0 0 5px #fff, 0 0 10px #ff00de, 0 0 20px #ff00de; 
/    }
/    /* 途中で一瞬だけ光を弱く、影を消すことで「瞬き」を作ります */
/    90% { 
/        opacity: 1; 
/        text-shadow: 0 0 5px #fff, 0 0 10px #ff00de, 0 0 20px #ff00de; 
/    }
/    95% { 
/        opacity: 0.3; //ここを変えると明暗が変わる
/        text-shadow: none; 
/    }
/    100% { 
/        opacity: 1; 
/        text-shadow: 0 0 5px #fff, 0 0 10px #ff00de, 0 0 20px #ff00de; 
/    }}

/* ?? 宝石の形と光の設定（カラーコード対応版） */
.text-pink-diamond {
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding: 4px 12px;
    margin: 0 4px;
    overflow: hidden; 
    /* color: #fff !important; は削除。これで中の文字色指定が効くようになります */
    vertical-align: middle;
    /* 宝石の形（八角形） */
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    /* 立体感を出す影 */
    box-shadow: inset 0 0 10px rgba(255,255,255,0.5);
    /* 【外側】の影（浮き上がって見えます！） */
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));
}

/* 光の筋（キラ～ン） */
.text-pink-diamond::after {
    content: "";
    position: absolute;
    top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient( /* ?? 背景色とグラデーションの設定 */
        to right, 
        rgba(255,255,255,0) 0%,     /* 左上の明るさ（0.2は20%） */
        rgba(255,255,255,0.8) 50%, /* 中央（0は0%＝透明） */
        rgba(255,255,255,0) 100%  /* 右下の暗さ（0.2は20%） */
    );
    transform: skewX(25deg); /* 閃光の角度 初期値-25 */
    animation: pink-kira 7s infinite; /* 流れる間隔 */
}

@keyframes pink-kira {
    0% { left: -150%; } /* 開始位置 */
    70% { left: 150%; }  /* 20秒のうちの30%（6秒）で光が通り抜ける */
    100% { left: 150%; } /* 残りの70%（14秒）は右側で待機 */
}

/* 1. 最初：左に50pxずらして、透明にして待機させる。ここの全部を削除すると、元のふわ～になる2026 04 07 */
.fade-in {
    opacity: 0;
    transform: translateX(-50px); 
    transition: opacity 2.5s ease-out, transform 1.0s ease-out;
}

/* 2. 変化後：JSが「is-visible」を付けた瞬間、ふわっと定位置（0）に戻る */
.fade-in.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- 携帯電波風：リアルな電界強度シミュレーター（超スロー）2026 04 08 --- */
.signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    width: 30px;
    height: 25px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.signal-bars .bar {
    width: 5px;
    background-color: #5c93bb; 
    border-radius: 1px;
    opacity: 0.2;
    /* 全員同じ30秒の物語（スケジュール）を共有する */
    animation: field-strength-logic 30s infinite steps(1);
}

/* 高さの設定 */
.signal-bars .bar:nth-child(1) { height: 25%; }
.signal-bars .bar:nth-child(2) { height: 50%; }
.signal-bars .bar:nth-child(3) { height: 75%; }
.signal-bars .bar:nth-child(4) { height: 100%; }

/* --- バーごとの点灯条件 --- */
/* 右側（感度が高い状態）ほど、条件を厳しくする */
.signal-bars .bar:nth-child(1) { animation-delay: 0s; } /* 常に判定 */
.signal-bars .bar:nth-child(2) { animation-name: bar2-only; } /* 感度2以上で点灯 */
.signal-bars .bar:nth-child(3) { animation-name: bar3-only; } /* 感度3以上で点灯 */
.signal-bars .bar:nth-child(4) { animation-name: bar4-only; } /* 感度MAXで点灯 */

/* 1番目は基本点灯（たまに全消えする程度） */
@keyframes field-strength-logic {
    0%, 90% { opacity: 1; }
    91%, 100% { opacity: 0.2; }
}

/* 2番目：感度が「中」以上の時に点く */
@keyframes bar2-only {
    0%, 15% { opacity: 1; }   /* 強 */
    16%, 30% { opacity: 0.2; } /* 弱へ */
    31%, 50% { opacity: 1; }   /* また中へ */
    51%, 75% { opacity: 1; }   /* 維持 */
    76%, 100% { opacity: 0.2; }
}

/* 3番目：感度が「強」の時に点く */
@keyframes bar3-only {
    0%, 15% { opacity: 1; }   /* 強 */
    16%, 60% { opacity: 0.2; } /* なかなか上がらない */
    61%, 75% { opacity: 1; }   /* 一瞬復活 */
    76%, 100% { opacity: 0.2; }
}

/* 4番目：バリ4（一瞬だけ） */
@keyframes bar4-only {
    0%, 10% { opacity: 1; }
    11%, 100% { opacity: 0.2; }
}