/* 本文の行間・文字間隔・フォント最適化 */
.article-2022 article p,
.article-2022 article li,
.article-2022 article td {
    line-height: 1.9 !important; /* 日本語は行間を広めに */
    letter-spacing: 0.05em; /* 文字間隔を微調整 */
    font-feature-settings: "palt" 1; /* プロポーショナルメトリクス有効化 */
}

/* 段落の間隔調整 */
.article-2022 article p {
    margin-bottom: 1.2rem;
}


/* ========================================
   2. 見出しスタイル（視認性向上）
   ======================================== */

/* H3見出しの強調 */
.article-2022 article h3,
.article-2022 article h4 {
    padding-left: 12px;
    border-left: 4px solid #00aee6; /* アクセントライン */
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #333;
}

/* H2見出しは既存スタイル維持（模板内定義） */


/* ========================================
   3. ステップ番号の視覚強調
   ======================================== */

.step {
    display: inline-block;
    background: linear-gradient(135deg, #00aee6 0%, #0099cc 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
    margin-right: 8px;
    font-size: 0.9em;
    box-shadow: 0 2px 4px rgba(0, 174, 230, 0.3);
    white-space: nowrap; /* 改行防止 */
}


/* ========================================
   4. リストスタイル（視認性向上）
   ======================================== */

/* UL（箇条書きリスト） */
.article-2022 article ul {
    list-style: none; /* デフォルトの点を削除 */
    padding-left: 0;
    margin-left: 0;
}

.article-2022 article ul li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.8rem;
}

.article-2022 article ul li::before {
    content: "✔"; /* 太字チェックマーク */
    position: absolute;
    left: 0.2em;
    top: 0.1em;
    color: #00aee6;
    font-weight: bold;
    font-size: 1.2em;
}

/* OL（番号付きリスト）は標準スタイル維持 */
.article-2022 article ol {
    padding-left: 1.5em;
}

.article-2022 article ol li {
    margin-bottom: 0.8rem;
    padding-left: 0.5em;
}

/* ネストされたリスト（2階層目） */
.article-2022 article ul ul {
    margin-top: 0.5rem;
    margin-left: 1.5em;
}

.article-2022 article ul ul li::before {
    content: "▸"; /* サブリストは矢印 */
    color: #666;
    font-size: 1em;
    font-weight: normal;
}

/* info_box内のリスト統一 */
.info_box ul {
    list-style: none;
    padding-left: 0;
}

.info_box ul li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.6rem;
}

.info_box ul li::before {
    content: "✔";
    position: absolute;
    left: 0.2em;
    top: 0.1em;
    color: #00aee6;
    font-weight: bold;
    font-size: 1.2em;
}

/* ========================================
   5. 注意喚起ボックス（info_box強化）
   ======================================== */

.info_box {
    position: relative;
    padding-left: 50px !important;
    background: linear-gradient(to right, #e8f7ff 0%, #ffffff 100%);
    border-left: 4px solid #00aee6 !important;
    margin-bottom: 1.5rem;
}

/* アイコン追加 */
.info_box::before {
    content: "ℹ";
    position: absolute;
    left: 15px;
    top: 20px;
    font-size: 24px;
    color: #00aee6;
    font-weight: bold;
    font-family: Arial, sans-serif;
    line-height: 1;
}


/* ========================================
   6. マーカーハイライト（3色バリエーション）
   ======================================== */

/* 黄色マーカー（デフォルト） */
.marker,
.marker-yellow {
    background-image: linear-gradient(to bottom, transparent 60%, #fff59d 60%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    padding: 0 2px;
}

/* 赤色マーカー（警告） */
.marker-red {
    background-image: linear-gradient(to bottom, transparent 60%, #ffcdd2 60%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    color: #c62828;
    padding: 0 2px;
}

/* 緑色マーカー（成功・推奨） */
.marker-green {
    background-image: linear-gradient(to bottom, transparent 60%, #c8e6c9 60%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    padding: 0 2px;
}


/* ========================================
   7. コードブロックスタイル
   ======================================== */

.article-2022 article code {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: #d63384;
    border: 1px solid #e0e0e0;
    font-size: 0.9em;
}

/* コードブロック（複数行） */
.article-2022 article pre {
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 6px;
    border-left: 3px solid #00aee6;
    overflow-x: auto;
}

.article-2022 article pre code {
    background: none;
    border: none;
    padding: 0;
    color: #333;
}


/* ========================================
   8. 表組みスタイル（ホバーエフェクト）
   ======================================== */

.article-2022 article table tbody tr {
    transition: all 0.2s ease;
}

.article-2022 article table tbody tr:hover {
    background-color: #e3f5ff !important;
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 174, 230, 0.15);
}

/* 表のセル内テキスト */
.article-2022 article table td {
    vertical-align: top; /* 上揃え */
}


/* ========================================
   9. FAQアコーディオンスタイル
   ======================================== */

/* 質問タイトルのホバーエフェクト */
.faq ul li h5 {
    transition: color 0.3s ease;
    cursor: pointer;
}

.faq ul li h5:hover {
    color: #00aee6;
}

/* 回答部分のフェードインアニメーション */
.faq ul li div {
    animation: rcv-jp-fadeIn 0.3s ease-in-out;
}

/* アニメーション定義：フェードイン */
@keyframes rcv-jp-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================
   10. ダウンロードボタンの強化
   ======================================== */

.btn_donwWin,
.btn_donwMac {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ホバー時の波紋エフェクト */
.btn_donwWin::before,
.btn_donwMac::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    pointer-events: none; /* クリックイベントを透過 */
}

.btn_donwWin:hover::before,
.btn_donwMac:hover::before {
    width: 300px;
    height: 300px;
}


/* ========================================
   11. スクロール表示アニメーション
   ======================================== */

.article-2022 article h2,
.article-2022 article h3,
.article-2022 article .info_box {
    animation: rcv-jp-slideInUp 0.6s ease-out;
}

/* アニメーション定義：下からスライドイン */
@keyframes rcv-jp-slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================
   12. 画像の遅延読み込みプレースホルダー
   ======================================== */

.article-2022 article img:not([src]) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: rcv-jp-loading 1.5s infinite;
    min-height: 200px; /* プレースホルダー高さ */
}

/* 画像読み込み完了時はアニメーション解除 */
.article-2022 article img[src] {
    animation: none;
    background: none;
}

/* アニメーション定義：ローディング */
@keyframes rcv-jp-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


/* ========================================
   13. サイドバーアンカーの現在位置表示
   ======================================== */

.article-sidebar-anchor a.active {
    color: #00aee6 !important;
    font-weight: bold;
    border-left: 3px solid #00aee6;
    padding-left: 12px;
    background-color: #f0f9ff;
    transition: all 0.3s ease;
}


/* ========================================
   14. ツールチップスタイル（拡張用）
   ======================================== */

[data-tooltip] {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted #00aee6;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1000;
    margin-bottom: 5px;
}

/* ツールチップの矢印 */
[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1001;
}


/* ========================================
   15. 読了時間表示の改善
   ======================================== */

.speed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
}

.speed::before {
    content: "📖";
    font-size: 16px;
}


/* ========================================
   16. 引用ブロックスタイル
   ======================================== */

.article-2022 article blockquote {
    border-left: 4px solid #00aee6;
    background: #f8f9fa;
    padding: 15px 20px;
    margin: 20px 0;
    font-style: italic;
    color: #555;
    border-radius: 0 4px 4px 0;
}

.article-2022 article blockquote p:last-child {
    margin-bottom: 0; /* 最後の段落のマージン削除 */
}


/* ========================================
   17. リンクスタイルの改善
   ======================================== */

.article-2022 article a {
    color: #00aee6;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.3s ease;
}

.article-2022 article a:hover {
    border-bottom-color: #00aee6;
}


/* ========================================
   18. スムーズスクロール
   ======================================== */

html {
    scroll-behavior: smooth;
}

/* スクロールバーのカスタマイズ（Webkit系ブラウザ） */
.article-2022 article::-webkit-scrollbar {
    width: 8px;
}

.article-2022 article::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.article-2022 article::-webkit-scrollbar-thumb {
    background: #00aee6;
    border-radius: 4px;
}

.article-2022 article::-webkit-scrollbar-thumb:hover {
    background: #0099cc;
}


/* ========================================
   19. アクセシビリティ向上
   ======================================== */

/* キーボードフォーカス時の視覚フィードバック */
a:focus,
button:focus {
    outline: 2px solid #00aee6;
    outline-offset: 2px;
}

/* フォーカス時のスキップリンク表示 */
.skip-link:focus {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #00aee6;
    color: #fff;
    padding: 10px 15px;
    z-index: 10000;
}


/* ========================================
   20. モバイル最適化（スマートフォン対応）
   ======================================== */

@media (max-width: 768px) {
    /* テキストサイズ調整（iOS Safariズーム防止） */
    .article-2022 article p,
    .article-2022 article li {
        font-size: 16px; /* 16px未満だとiOSでズームが発動 */
        line-height: 1.8;
    }
    
    /* 見出しサイズ調整 */
    .article-2022 article h2 {
        font-size: 20px;
        padding: 15px !important;
    }
    
    .article-2022 article h3 {
        font-size: 18px;
        padding-left: 10px;
        border-left-width: 3px; /* ボーダーを細く */
    }
    
    .article-2022 article h4 {
        font-size: 16px;
        padding-left: 10px;
    }
    
    /* info_boxのモバイル調整 */
    .info_box {
        padding: 15px 15px 15px 45px !important;
    }
    
    .info_box::before {
        left: 10px;
        top: 15px;
        font-size: 20px;
    }
    
    /* ステップ番号のサイズ調整 */
    .step {
        font-size: 0.85em;
        padding: 3px 10px;
    }
    
    /* テーブルの横スクロール */
    .article-2022 article table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
    }
    
    /* ボタンのタップ領域拡大 */
    .btn_donwWin,
    .btn_donwMac {
        min-height: 48px; /* タッチ推奨サイズ */
        line-height: 48px;
    }
}


/* ========================================
   21. タブレット最適化（中間サイズ）
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .article-2022 article p,
    .article-2022 article li {
        font-size: 17px;
    }
    
    .article-2022 article h2 {
        font-size: 23px;
    }
    
    .article-2022 article h3 {
        font-size: 20px;
    }
}


/* ========================================
   22. 印刷時の最適化
   ======================================== */

@media print {
    /* 背景色を削除（インク節約） */
    .article-2022 article {
        color: #000;
        background: #fff;
    }
    
    /* マーカーを下線に変換 */
    .marker,
    .marker-yellow,
    .marker-red,
    .marker-green {
        background: none !important;
        border-bottom: 2px solid #333;
        padding: 0;
    }
    
    /* info_boxの印刷最適化 */
    .info_box {
        border: 2px solid #333 !important;
        background: #fff !important;
        page-break-inside: avoid; /* ボックス途中で改ページしない */
    }
    
    .info_box::before {
        color: #000;
    }
    
    /* リンクURLを表示 */
    .article-2022 article a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    /* 画像の最適化 */
    .article-2022 article img {
        max-width: 100%;
        page-break-inside: avoid;
    }
    
    /* 不要な要素を非表示 */
    .btn_donwWin,
    .btn_donwMac,
    .article-sidebar-anchor {
        display: none !important;
    }
}


/* ========================================
   23. ダークモード対応（将来対応用）
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* 現在は未対応（将来の拡張用コメントアウト） */
    /*
    .article-2022 article {
        background: #1a1a1a;
        color: #e0e0e0;
    }
    
    .article-2022 article h2,
    .article-2022 article h3 {
        color: #fff;
        background-color: #2a2a2a;
    }
    */
}


/* ========================================
   24. レスポンシブイメージ
   ======================================== */

.article-2022 article img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Retinaディスプレイ対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .article-2022 article img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* ========================================
   25. パフォーマンス最適化
   ======================================== */

/* GPU加速の有効化 */
.article-2022 article h2,
.article-2022 article h3,
.info_box,
.btn_donwWin,
.btn_donwMac {
    transform: translateZ(0);
    will-change: transform;
}

/* アニメーション最適化 */
@media (prefers-reduced-motion: reduce) {
    /* アニメーション無効化設定のユーザー向け */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   END OF FILE
   ======================================== */