/* ==========================================================================
   基本スタイル (Base Styles)
   ========================================================================== */
body {
    font-family: "Meiryo", "メイリオ", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
h1 {
    text-align: center;
    color: #1a73e8;
}

/* ==========================================================================
   レイアウト (Layout)
   ========================================================================== */

.site-header {
    background-color: #2C3E50;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 998;
    box-sizing: border-box;
}
.header-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.logo {
    font-size: 28px;
    font-weight: bold;
    color: #ECF0F1;
    text-decoration: none;
    flex-shrink: 0;
}

.ad-item-long{margin: 0 auto;}
/* ▼▼▼ この main-nav の定義を、ここ（レイアウトセクション）に移動 ▼▼▼ */
.main-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-right-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hamburger-btn {
    display: none; }

.site-body-wrapper {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    flex-grow: 1;
    padding: 20px;
    box-sizing: border-box;
}
main {
    grid-column: 2 / 3;
    width: 1100px;
}
.sidebar-left, .sidebar-right {
    width: 300px;
}
.sidebar-left {
    grid-column: 1 / 2;
    justify-self: end;
}
.sidebar-right {
    grid-column: 3 / 4;
    justify-self: start;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.site-footer {
    background-color: #2C3E50;
    color: #bdc3c7; 
    border-top: 1px solid #34495E;
    padding: 20px;
    font-size: 14px;
    box-sizing: border-box;
}
.footer-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.footer-links { margin-bottom: 10px; }
.footer-links a { color: #ECF0F1; text-decoration: none; margin: 0 15px; }
.footer-links a:hover { text-decoration: underline; }

/* ==========================================================================
   モジュール (Modules & Components)
   ========================================================================== */
.desktop-nav { display: flex; align-items: center; gap: 10px; }
.nav-link { color: #5c6264; text-decoration: none; font-size: 15px; font-weight: 500; padding: 5px 10px; border-radius: 6px; transition: all 0.2s ease; border: 2px solid transparent; }
.nav-link:visited { color: #bdc3c7;; }
.nav-link:hover { background-color: #f0f2f5; }
.nav-link.active { color: #1a73e8; font-weight: bold; border-bottom: 2px solid #3498DB;  border-radius: 0; }

.hamburger-btn { display: none; }
.mobile-menu-overlay { display: none; }

/* --- サイト説明文 --- */
.site-description p { margin-top: 0; margin-bottom: 8px; text-align: center; }
.site-description p:last-child { margin-bottom: 30px; }

/* --- メインコンテンツの各要素 --- */
.input-area { display: flex; gap: 10px; margin-bottom: 30px; }
#codeInput { width: 100%; min-height: 80px; padding: 15px; border-radius: 8px; border: 1px solid #ddd; font-size: 16px; resize: vertical; box-sizing: border-box; }
#executeBtn { padding: 10px 20px; font-size: 16px; background-color: #1a73e8; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; white-space: nowrap; display: flex; align-items: center; justify-content: center; }
#executeBtn:hover { background-color: #155ab6; }

.main-output-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.output-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch; 
}
.output-box { background-color: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; min-width: 0; }
.output-box h2 { /* ← ★★★ 新しくこのセレクタを追加 ★★★ */
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 18px;
}
.result-content { white-space: pre-wrap; word-wrap: break-word; min-height: 300px; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.result-content p { margin-top: 0; margin-bottom: 1em; text-align: left; }
.result-content ul, .legal-container ul { list-style: none; padding-left: 0; }
.result-content ul li, .legal-container ul li { padding-left: 1.5em; position: relative; margin-bottom: 0.5em; }
.result-content ul li::before, .legal-container ul li::before { content: "・"; position: absolute; left: 0; top: 0; }
.result-content ul li p, .legal-container ul li p { margin-bottom: 0; margin-top: 0; }
.result-content code, .legal-container code { word-break: break-all; background-color: #f0f2f5; padding: 2px 5px; border-radius: 4px; font-size: 0.9em; }

/* --- ▼▼▼ AI解説文のブロックスタイル ▼▼▼ --- */
.explanation-block {background-color: #ffffff;border: 1px solid #e0e0e0;border-radius: 8px;padding: 15px 20px;margin-bottom: 15px;}
.explanation-block h2 {margin-top: 0;font-size: 16px;border-bottom: none; /* legal-containerのh2スタイルを上書き */padding-bottom: 0;}

/* ダークモード対応 */
.dark-mode .explanation-block {background-color: #2c2c2e;border-color: #444;}

.vertical-split { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; }
#examplePlaceholder { margin: 0; color: #888; text-align: center; }
.code-display-wrapper { margin-bottom: auto; background-color: #282c34; border-radius: 8px 8px 0 0; padding: 15px; overflow: auto; min-height: 100px; position: relative; }
.code-display-wrapper pre, .code-display-wrapper code { margin: 0; padding: 0 !important; background: none !important; }
.preview-title {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 18px;
    
    /* アイコンとテキストを横並びにするための指定 */
    display: flex;
    align-items: center;
    gap: 8px;
}
.preview-title::before {
    content: '👁️'; /* 目玉のアイコン */
    display: inline-block;
}

.preview-wrapper { 
    flex-shrink: 0;
    /* border-top は削除されたまま */
}
.dark-mode .preview-title {
    border-bottom-color: #333;
    color: #e0e0e0; /* 文字色を明るくする */
}
.preview-wrapper { flex-shrink: 0; border-top: 2px solid #e0e0e0; }
#renderPreview { width: 100%; height: 100%; border: none; background-color: #ffffff; }

#copyBtn { position: absolute; top: 10px; right: 10px; background-color: #4a505c; color: #e0e0e0; border: 1px solid #6c7382; border-radius: 6px; padding: 2px 8px; cursor: pointer; opacity: 0.7; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; font-size: 13px; }
#copyBtn:hover { opacity: 1; background-color: #5a606c; }

/* ... (ローディングスピナー、ランダムコード、履歴、フィードバック機能はここにまとめてあります) ... */
.loader { border: 3px solid #f3f3f3; border-top: 3px solid #1a73e8; border-radius: 50%; width: 18px; height: 18px; animation: spin 1s linear infinite; display: none; }
#executeBtn.loading .btn-text { display: none; }
#executeBtn.loading .loader { display: block; }
#executeBtn.loading { cursor: not-allowed; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.random-code-area { display: flex; justify-content: center; margin-bottom: 20px; gap: 15px; flex-wrap: wrap;}
/* 共通のボタンスタイル */
#randomCodeBtn, .promo-button {
    background-color: #ffffff;
    border: 1px solid #1a73e8;
    color: #1a73e8;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none; /* aタグの下線を消す */
    transition: all 0.2s ease;
}

#randomCodeBtn:hover, .promo-button:hover {
    background-color: #e8f0fe;
    transform: translateY(-2px);
}

/* SQLチェッカーへのボタンの色を緑にする */
.promo-button {
    border-color: #28a745;
    color: #28a745;
}
.promo-button:hover {
    background-color: #f0fff4;
}

/* ダークモード対応 */
.dark-mode #randomCodeBtn, .dark-mode .promo-button {
    background-color: #252627;
}
.dark-mode #randomCodeBtn {
    border-color: #58a6ff;
    color: #58a6ff;
}
.dark-mode #randomCodeBtn:hover {
    background-color: #303841;
}
.dark-mode .promo-button {
    border-color: #33d45c;
    color: #33d45c;
}
.dark-mode .promo-button:hover {
    background-color: #2c3b2f;
}
.history-container { background-color: #fff; border: none; border-radius: 8px; padding: 15px 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
.history-header h3 { margin: 0; font-size: 14px; font-weight: bold; color: #5f6368; }
#clearHistoryBtn { background: #f0f2f5; border: none; color: #5f6368; border-radius: 5px; padding: 4px 10px; font-size: 12px; cursor: pointer; transition: background-color 0.2s; }
#clearHistoryBtn:hover { background-color: #e0e4e8; }
#historyList { list-style: none; padding: 0; margin: 0; max-height: 150px; overflow-y: auto; }
#historyList li { padding: 10px 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #f0f0f0; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; transition: background-color 0.2s; }
#historyList li:last-child { border-bottom: none; }
#historyList li:hover { background-color: #f5f7fa; color: #1a73e8; }
#feedbackBtn { position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px; background-color: #1a73e8; color: white; border: none; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 999; }
#feedbackBtn:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay.active { display: flex; }
.modal-content { background-color: white; padding: 30px; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative; }
.modal-content h2, .modal-content p { text-align: center; }
#feedbackTextarea { width: 100%; min-height: 120px; margin-top: 15px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; resize: vertical; box-sizing: border-box; }
#sendFeedbackBtn { width: 100%; padding: 12px; margin-top: 15px; background-color: #1a73e8; color: white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; }
#sendFeedbackBtn:hover { background-color: #155ab6; }
.close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 28px; color: #aaa; cursor: pointer; }

/* --- 静的ページ & ブログ --- */
.legal-container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); line-height: 1.8; }
.legal-container h1 { text-align: center; margin-bottom: 30px; }
.legal-container h2 { margin-top: 40px; border-bottom: 2px solid #eee; padding-bottom: 5px; }
.legal-table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
.legal-table th { background-color: #f9f9f9; width: 30%; }
.post-list { list-style: none; padding: 0; counter-reset: post-counter; }
.post-list li { border-bottom: 1px solid #eee; padding: 12px 5px; display: flex; align-items: baseline; }
.post-list li::before { counter-increment: post-counter; content: counter(post-counter) ". "; font-weight: bold; font-size: 18px; color: #5f6368;  margin-right: 10px; min-width: 25px; }
.post-list li:first-child { border-top: 1px solid #eee; }
.post-list a { text-decoration: none; color: #313331; font-size: 18px; font-weight: bold; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-list a:hover { text-decoration: underline; }
.back-to-list-wrapper {margin-top: 40px;padding-top: 20px;border-top: 1px solid #eee;text-align: center;}

.back-to-list-btn {display: inline-block;background-color: #f0f2f5;color: #5f6368;padding: 10px 20px;border-radius: 8px;text-decoration: none;font-weight: 500;transition: all 0.2s ease;}

.back-to-list-btn:hover {background-color: #e0e4e8;color: #333;}

/* --- ▼▼▼ 著者情報ボックスのスタイル ▼▼▼ --- */
.author-box {
    margin-top: 50px;
    padding: 25px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}
.author-info h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #5f6368;
}
.author-info p {
    text-align: left;
    margin: 0 0 15px 0;
    font-size: 15px;
    line-height: 1.7;
}
.author-profile-link {
    font-weight: bold;
}

/* ダークモード対応 */
.dark-mode .author-box {
    background-color: #252526;
    border-color: #333;
}
.dark-mode .author-info h4 {
    color: #a0a0a0;
}

/* --- ダークモード対応 --- */
.dark-mode .back-to-list-wrapper {border-top-color: #333;}
.dark-mode .back-to-list-btn {background-color: #252526;color: #a0a0a0;}
.dark-mode .back-to-list-btn:hover {background-color: #333;color: #e0e0e0;}

/* --- サイドバー広告 --- */
.ad-container-sticky { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 20px; }
.sidebar-title { font-size: 14px; font-weight: bold; color: #5f6368; margin: 0 0 15px 0; text-align: left; }

/* ==========================================================================
   ダークモード (Dark Mode)
   ========================================================================== */
.dark-mode-toggle { background: none; border: 1px solid #ddd; border-radius: 20px; padding: 5px; cursor: pointer; display: flex; align-items: center; margin-left: 20px; }
.dark-mode-toggle .dark-icon { display: none; }
.dark-mode .dark-mode-toggle .dark-icon { display: inline; }
.dark-mode .dark-mode-toggle .light-icon { display: none; }
body.dark-mode { background-color: #121212; color: #e0e0e0; }
.dark-mode .container, .dark-mode .legal-container { background-color: #1e1e1e; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.dark-mode .site-header, .dark-mode .site-footer { background-color: #1e1e1e; border-color: #333; }
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode .logo { color: #5971db; }
.dark-mode p, .dark-mode .footer-container, .dark-mode .footer-links a, .dark-mode .sidebar-title { color: #a0a0a0; }
.dark-mode #codeInput { background-color: #252526; border-color: #333; color: #e0e0e0; }
.dark-mode .output-box, .dark-mode .history-container { background-color: #252627; border-color: #333; box-shadow: none; }
.dark-mode .history-header, .dark-mode #historyList li { border-color: #333; }
.dark-mode .history-header h3 { color: #a0a0a0; }
.dark-mode #clearHistoryBtn { background-color: #333; border-color: #555; color: #e0e0e0; }
.dark-mode #clearHistoryBtn:hover { background-color: #444; }
.dark-mode #historyList li:hover { background-color: #303841; }
.dark-mode #randomCodeBtn { background-color: #252627; border-color: #58a6ff; color: #58a6ff; }
.dark-mode #randomCodeBtn:hover { background-color: #303841; }
.dark-mode .result-content code, .dark-mode .legal-container code { background-color: #333; color: #e0e0e0; }
.dark-mode .post-list a {  color: #c8ccc8;}

/* ==========================================================================
   レスポンシブデザイン (Responsive Design)
   ========================================================================== */

/* --- タブレットサイズ向けの調整 --- */
@media (max-width: 1440px) {
    .site-body-wrapper {
        display: block; /* Gridレイアウトを解除し、シンプルなブロックにする */
    }
    main {
        width: auto; /* ★★★ これが最も重要な修正です ★★★ */
        padding: 20px;
    }
    .sidebar-left, .sidebar-right {
        display: none; /* サイドバーは非表示に */
    }
}

/* --- スマートフォンサイズ向けの調整 --- */
@media (max-width: 768px) {
    .desktop-nav { display: none; } /* PC用メニューを隠す */
    main {
        padding: 10px;
    }
    .container, .legal-container {
        padding: 15px;
        margin-bottom: 80px;
    }
    h1 {
        font-size: 24px;
    }
    .output-container {
        grid-template-columns: 1fr;
    }
    .result-content {
        min-height: 250px;
    }
    .modal-content {
        width: 95%;
    }
    .post-list li {
        display: block;
        padding: 15px 0;
    }
    .post-list li::before {
        display: inline-block;
        vertical-align: top;
        margin-right: 8px;
        min-width: auto;
    }
    .post-list a {
        display: inline;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    
}

/* ==========================================================================
   SQLチェッカーページ専用のスタイル
   ========================================================================== */

.tool-container h1 {
    color: #28a745; /* アクセントカラー: 緑 */
}
.tool-container .tool-subtitle {
    font-size: 16px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 25px;
}

/* --- 使い方の説明欄 --- */
.usage-guide {
    background-color: #f0fff4; 
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 30px;
    font-size: 14px;
}
.usage-guide h3 {
    margin-top: 0;
    color: #333;
}
.usage-guide ul {
    padding-left: 20px;
    margin: 0;
}
.usage-guide code {
    background-color: #e0e4e8;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 13px;
}

/* --- 左右2分割レイアウト --- */
.sql-checker-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右を1:1の比率で分割 */
    gap: 20px; /* カラム間の隙間 */
}

/* --- 左カラム：入力エリア --- */
.sql-input-area {
    display: flex;
    flex-direction: column; /* テキストエリアとボタンを縦に並べる */
}
#sqlInput {
    width: 100%;
    flex-grow: 1; /* 親の高さに合わせて伸びる */
    min-height: 300px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
    background-color: #1e1e1e; /* ダークな背景色 */
    color: #e0e0e0; /* 明るい文字色 */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 16px;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 20px;
}
#checkSqlBtn {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#checkSqlBtn:hover {
    background-color: #218838;
}

/* --- 右カラム：結果表示エリア --- */
.result-wrapper h2 {
    margin-top: 0;
    color: #28a745; /* ★ タイトルをアクセントカラーの「緑色」に */
    text-align: left;
    border-bottom: 1px solid #5fd69f;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.result-wrapper h2 {
    margin-top: 0;
}
.result-content-box {
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    min-height: 400px;
    color: #e0e0e0;
    text-align: left;
    overflow-y: auto; /* 結果が長くなったらスクロール */
}
.result-content-box .placeholder-text {
    color: #888;
    text-align: center;
    padding-top: 150px;
}
.result-content-box h1, .result-content-box h2, .result-content-box h3 {
    text-align: left;
    color: #e0e0e0;
    border-bottom-color: #444;
}

/* --- ダークモード対応 --- */
.dark-mode .tool-container h1 { color: #33d45c; }
.dark-mode .usage-guide { background-color: #2c3b2f; /* 少し緑がかった濃いグレー */
    border-color: #28a745;  }
.dark-mode .usage-guide h3 { color: #e0e0e0; }
.dark-mode .usage-guide code { background-color: #444; }

/* --- スマホ表示では縦積みにする --- */
@media (max-width: 768px) {
    .mobile-dark-mode-toggle-wrapper span.theme-text {
        font-weight: 500;
    }
    
    /* ライトモードの時: "ライトモード"のテキストを隠す */
    .dark-theme-text {
        display: none;
    }
    
    /* ダークモードの時: "ダークモード"のテキストを隠し、"ライトモード"を表示 */
    .dark-mode .dark-theme-text {
        display: inline;
    }
    .dark-mode .light-theme-text {
        display: none;
    }
    main { padding: 10px; }
    .container, .legal-container { padding: 15px; margin-bottom: 80px; }
    h1 { font-size: 24px; }
    .output-container { grid-template-columns: 1fr; }
    .result-content { min-height: 250px; }
    .modal-content { width: 95%; }
    .post-list li { display: block; padding: 15px 0; }
    .post-list li::before { display: inline-block; vertical-align: top; margin-right: 8px; min-width: auto; }
    .post-list a { display: inline; white-space: normal; overflow: visible; text-overflow: clip; }
    .sql-checker-layout { grid-template-columns: 1fr; }
    
    /* ▼▼▼ ここからが、完全に抜け落ちていたハンバーガーメニューのスタイルです ▼▼▼ */
    .desktop-nav { display: none; }
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px; height: 30px;
        background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1002;
    }
    .hamburger-btn span { width: 30px; height: 3px; background-color: #ECF0F1; border-radius: 5px; transition: all 0.3s linear; }
    .dark-mode .hamburger-btn span { background-color: #e0e0e0; }

    .mobile-menu-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
    .mobile-menu-overlay.open { opacity: 1; visibility: visible; }
    
    .mobile-nav { position: fixed; top: 0; right: -280px; width: 280px; height: 100%; background-color: #fff; padding-top: 60px; transition: right 0.3s ease;overflow-y: auto;box-sizing: border-box; }
    .mobile-menu-overlay.open .mobile-nav { right: 0; }
    .dark-mode .mobile-nav { background-color: #1e1e1e; }
    .mobile-nav a { display: block; padding: 15px 20px; text-decoration: none; color: #333; border-bottom: 1px solid #f0f0f0; }
    .dark-mode .mobile-nav a { color: #e0e0e0; border-color: #333; }
    .mobile-nav hr { border: none; border-top: 1px solid #f0f0f0; margin: 0; }
    .dark-mode .mobile-nav hr { border-color: #333; }
    .mobile-menu-header { /* ▼▼▼ 以下を追加 ▼▼▼ */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 60px;
        border-bottom: 1px solid #f0f0f0;
    }
    .dark-mode .mobile-menu-header { border-color: #333; }
    
    .mobile-menu-header .logo { font-size: 22px; }
    
    .close-menu-btn {
        background: none; border: none; font-size: 32px;
        color: #333; cursor: pointer;
    }
    .dark-mode .close-menu-btn { color: #e0e0e0; }

    .mobile-dark-mode-toggle-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-top: 1px solid #f0f0f0;
        margin-top: 10px;
    }
    .dark-mode .mobile-dark-mode-toggle-wrapper { border-color: #333; }
}

/* --- 通常リンクのスタイル --- */
.nav-link {
    color: #ECF0F1; /* 通常時の文字色 */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 2px solid transparent; /* ★ アクティブ時の枠線のためのスペース確保 */
}

/* 1. 訪問済みリンクの色を変えない */
.nav-link:visited {
    color: #bdc3c7; /* 通常時と同じ色を指定 */
}

/* 2. マウスを乗せたら（ホバーしたら）少し色を変える */
.nav-link:hover {
    background-color: #343a40;
    color: #ffffff;
}

/* 3. 現在開いているページ（アクティブ）のがっつり色を変える */
.nav-link.active {
    color: #1a73e8; ;
    font-weight: bold;
    border-bottom: 2px solid #3498DB; /* ★ 下線でアクティブを表現 */
    border-radius: 0; /* 下線を綺麗に見せるため */
}

/* ==========================================================================
   JSONフォーマッターページ専用のスタイル
   ========================================================================== */

.tool-container h1 {
    color: #333; /* JSONフォーマッターのタイトルは落ち着いた色に */
}

.formatter-section {
    margin-bottom: 20px;
}

/* --- 入力エリア --- */
#jsonInput {
    width: 100%;
    min-height: 200px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 15px;
    resize: vertical;
    box-sizing: border-box;
}

.url-input-container {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
#jsonUrlInput {
    flex-grow: 1;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
}
#fetchUrlBtn {
    background-color: #5f6368;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0 15px;
    cursor: pointer;
}

/* --- 操作ボタンエリア --- */
.formatter-controls {
    display: flex;
    gap: 10px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 20px;
    align-items: center;
}
.formatter-controls button,
.file-input-label {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    border-radius: 6px;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
}
.formatter-controls button:hover,
.file-input-label:hover {
    background-color: #f0f0f0;
}

/* --- 出力エリア --- */
.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.output-header h2 {
    margin: 0;
}
.output-actions button {
    margin-left: 10px;
    background: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

#jsonOutput {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    min-height: 200px; /* ← 入力欄のmin-heightと同じ値を設定 */
    max-height: 60vh;
    overflow: auto;
    border-radius: 8px;
    text-align: left;
    height: 100%; /* ← 追加：親要素の高さに追従させる */
    box-sizing: border-box;
    display: block; 
}

/* --- エラー表示 --- */
.error-display {
    background-color: #fff0f0;
    border: 1px solid #ffcccc;
    color: #d8000c;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    white-space: pre-wrap;
}
.error-display.hidden {
    display: none;
}

/* --- ダークモード対応 --- */
.dark-mode .tool-container h1 { color: #e0e0e0; }
.dark-mode #jsonInput { background-color: #1e1e1e; border-color: #555; color: #e0e0e0; }
.dark-mode #jsonUrlInput { background-color: #333; border-color: #555; color: #e0e0e0; }
.dark-mode #fetchUrlBtn { background-color: #777; }
.dark-mode .formatter-controls { background-color: #1e1e1e; }
.dark-mode .formatter-controls button,
.dark-mode .file-input-label { background-color: #333; border-color: #555; color: #e0e0e0; }
.dark-mode .formatter-controls button:hover,
.dark-mode .file-input-label:hover { background-color: #444; }
.dark-mode .output-actions button { border-color: #555; color: #e0e0e0; }
.dark-mode #jsonOutput { background-color: #1e1e1e; border-color: #555; }
.dark-mode .error-display { background-color: #4d2b2b; border-color: #8b4545; color: #ffc9c9; }

/* --- スマホ表示では縦積みにする --- */
@media (max-width: 768px) {
    .formatter-controls { flex-wrap: wrap; }
}

/* ==========================================================================
   正規表現テスターページ専用のスタイル
   ========================================================================== */

/* .tool-container h1 {
    color: #fd7e14; /* アクセントカラー: オレンジ 
}*/

/* --- 説明欄のオレンジスタイル --- */
.usage-guide.regex-guide {
    background-color: #fff8f0; /* 薄いオレンジ */
    border-color: #ffdec0;    /* 少し濃いオレンジの枠線 */
}
.dark-mode .usage-guide.regex-guide {
    background-color: #4d3a2b; /* オレンジがかった濃いグレー */
    border-color: #fd7e14;   /* アクセントカラーのオレンジ */
}

.regex-section {
    margin-bottom: 25px;
}
.regex-section label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}

/* --- パターン入力欄 --- */
.regex-input-wrapper {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 5px 10px;
}
.regex-input-wrapper span {
    color: #888;
    font-size: 18px;
}
#regexPattern {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 8px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 16px;
}
#regexFlags {
    width: 100px;
    border: none;
    outline: none;
    padding: 8px;
    font-size: 16px;
    border-left: 1px solid #ddd;
    margin-left: 10px;
}

/* --- テスト文字列入力欄 --- */
#testString {
    width: 100%;
    min-height: 200px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 16px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}

/* --- 結果表示エリア --- */
.match-result-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    min-height: 150px;
}
.match-result-box .placeholder-text {
    color: #888;
}
.match-result-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.match-result-box li {
    background-color: #fffbe6; /* マッチ部分をハイライト */
    border: 1px solid #ffeeba;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

/* --- ダークモード対応 --- */
.dark-mode .tool-container h1 { color: #ff9a40; }
.dark-mode .regex-input-wrapper { background-color: #252526; border-color: #555; }
.dark-mode .regex-input-wrapper span { color: #888; }
.dark-mode #regexPattern, .dark-mode #regexFlags { background-color: transparent; color: #e0e0e0; border-left-color: #555; }
.dark-mode #testString, .dark-mode .match-result-box { background-color: #1e1e1e; border-color: #555; color: #e0e0e0; }
.dark-mode .match-result-box li { background-color: #4d442b; border-color: #8b7d45; }

@media (max-width: 768px) {
   
}

/* ==========================================================================
   CSS Box-Shadowジェネレーターページ専用のスタイル
   ========================================================================== */

/* --- 全体レイアウト --- */
.generator-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    height: calc(100vh - 100px); /* ヘッダーの高さを引いた画面いっぱいの高さ */
    box-sizing: border-box;
}

/* --- 左側：プレビューエリア --- */
.preview-pane {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef; /* プレビューが分かりやすいように背景色を設定 */
    border-radius: 8px;
}
.preview-box {
    width: 200px;
    height: 200px;
    background-color: #58a6ff;
    border-radius: 12px;
    transition: box-shadow 0.2s ease; /* 影の変化を滑らかに */
}

/* --- 右側：コントロールパネル --- */
.control-pane {
    width: 320px;
    flex-shrink: 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* 設定項目が多くなったらスクロール */
}
.control-pane h1 {
    font-size: 22px;
    text-align: left;
    margin: 0 0 20px 0;
}

/* --- レイヤー管理 --- */
.layers-control h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
}
.layers-list {
    margin-bottom: 10px;
}
.layer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 5px;
}
.layer-item.active {
    background-color: #e8f0fe;
}
.layer-item .layer-name {
    font-size: 14px;
}
.layer-item .delete-layer-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #888;
}
#addLayerBtn {
    width: 100%;
    padding: 8px;
    border: 1px dashed #ccc;
    background: none;
    border-radius: 6px;
    cursor: pointer;
}

/* --- 設定項目 --- */
#settingsPanel {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin: 15px 0;
}
.setting {
    margin-bottom: 15px;
}
.setting label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
}
.setting input[type="range"] {
    width: 100%;
}
.setting .color-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.setting input[type="color"] {
    width: 40px;
    height: 30px;
    padding: 0;
    border: 1px solid #ccc;
}
.setting input[type="text"] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 8px;
    width: 100px;
}
.setting .checkbox-wrapper {
    display: flex;
    align-items: center;
}

/* --- 生成コード表示エリア --- */
.code-output-area {
    margin-top: auto; /* 一番下に配置 */
}
.code-output-area h3 {
    font-size: 16px;
    margin: 0 0 10px 0;
}
.code-output-area pre {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
}
#copyCssBtn {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #1a73e8;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

/* --- ダークモード対応 --- */
.dark-mode .preview-pane { background-color: #121212; }
.dark-mode .control-pane { background-color: #1e1e1e; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.dark-mode .control-pane h1 { color: #e0e0e0; }
.dark-mode .layer-item.active { background-color: #303841; }
.dark-mode #addLayerBtn { border-color: #555; color: #a0a0a0; }
.dark-mode #settingsPanel { border-color: #333; }
.dark-mode .setting input[type="color"] { border-color: #555; }
.dark-mode .setting input[type="text"] { background-color: #333; border-color: #555; color: #e0e0e0; }
.dark-mode .code-output-area pre { background-color: #252526; border-color: #333; }

/* --- スマホ表示では縦積みにする --- */
@media (max-width: 768px) {
    .generator-container {
        flex-direction: column;
        height: auto;
    }
    .control-pane {
        width: auto;
        margin-top: 20px;
    }
}

/* ==========================================================================
   JSONジェネレーターページ専用のスタイル
   ========================================================================== */

/* --- 全体レイアウト --- */
.json-generator.generator-container {
    height: calc(100vh - 100px);
}
.json-generator .control-pane {
    width: 40%;
    max-width: 500px;
}
.json-generator .preview-pane {
    background-color: #1b1a1a; /* プレビューはダークに */
    padding: 15px;
    display: flex; 
    flex-direction: column;
}

.json-generator .preview-pane .output-header {
    flex-shrink: 0; /* ヘッダーが縮まないように */
}
.json-generator .preview-pane .output-header h2 {
    color: #e0e0e0; /* ★★★ 文字色を白っぽく指定 ★★★ */
}
.json-generator .preview-pane .output-actions button {
    border-color: #555;
    color: #e0e0e0;
}
.json-generator .preview-pane pre {
    flex-grow: 1; /* 残りのスペースをすべて使う */
}
#jsonOutput {
    background: none;
    border: none;
    min-height: 100%;
    color: #e0e0e0;
    font-size: 14px;
}

/* --- スキーマビルダー --- */
.schema-builder {
    margin-bottom: 20px;
}
.schema-field {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
}
.schema-field input, .schema-field select {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 14px;
}
.schema-field input.key-input {
    width: 120px;
}
.delete-field-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
}

/* --- データ型ごとの色分け（レゴブロックスタイル）--- */
.schema-field[data-type="String"] { border-left: 5px solid #28a745; } /* 緑 */
.schema-field[data-type="Number"] { border-left: 5px solid #fd7e14; } /* オレンジ */
.schema-field[data-type="Boolean"] { border-left: 5px solid #6f42c1; } /* 紫 */
.schema-field[data-type="Name"], .schema-field[data-type="Email"], .schema-field[data-type="Phone"], .schema-field[data-type="Address"], .schema-field[data-type="Company"] { border-left: 5px solid #17a2b8; } /* 青緑 */
.schema-field[data-type="URL"], .schema-field[data-type="IPAddress"], .schema-field[data-type="UserAgent"] { border-left: 5px solid #007bff; } /* 青 */
.schema-field[data-type="Date"], .schema-field[data-type="Time"] { border-left: 5px solid #dc3545; } /* 赤 */
.schema-field[data-type="GUID"], .schema-field[data-type="Color"], .schema-field[data-type="ImageURL"] { border-left: 5px solid #ffc107; } /* 黄 */

/* --- 下部コントロール --- */
.schema-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.generate-config label {
    font-size: 14px;
    margin-right: 5px;
}
.generate-config input {
    width: 60px;
}

/* --- ダークモード対応 --- */
.dark-mode .json-generator .preview-pane { background-color: #121212; }
.dark-mode .schema-field { border-color: #555; }
.dark-mode .schema-field input, .dark-mode .schema-field select { background-color: #333; border-color: #555; color: #e0e0e0; }

/* --- スマホ表示では縦積みにする --- */
@media (max-width: 768px) {
    .json-generator.generator-container {
        flex-direction: column;
        height: auto;
    }
    .json-generator .control-pane {
        width: auto;
        max-width: none;
    }
}


/* ==========================================================================
   カラーコードコンバーターページ専用のスタイル
   ========================================================================== */



/* --- 全体レイアウト --- */
.color-converter-layout {
    display: flex;
    gap: 30px;
}

/* --- 左側：カラーピッカーとプレビュー --- */
.color-picker-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.color-preview {
    width: 280px;
    height: 60px;
    margin-top: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
    /* チェッカーボード柄の背景（透明度を分かりやすくするため） */
    background-image:
        linear-gradient(45deg, #eee 25%, transparent 25%),
        linear-gradient(-45deg, #eee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eee 75%),
        linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* --- 右側：数値入力とスライダー --- */
.color-values-wrapper {
    flex-grow: 1;
}
.value-group {
    margin-bottom: 20px;
}
.value-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}
.value-group input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

.slider-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.slider-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.slider-item span {
    width: 20px;
    font-weight: 500;
    color: #555;
}
.slider-item input[type="range"] {
    flex-grow: 1;
}
.slider-item input[type="number"] {
    width: 60px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 6px;
}

/* --- ダークモード対応 --- */
.dark-mode .tool-container.color-converter h1 { color: #e0e0e0; }
.dark-mode .color-preview { border-color: #555; }
.dark-mode .value-group label { color: #e0e0e0; }
.dark-mode .value-group input[type="text"] { background-color: #333; border-color: #555; color: #e0e0e0; }
.dark-mode .slider-item span { color: #a0a0a0; }
.dark-mode .slider-item input[type="number"] { background-color: #333; border-color: #555; color: #e0e0e0; }

/* --- スマホ表示では縦積みにする --- */
@media (max-width: 768px) {
    .color-converter-layout {
        flex-direction: column;
    }
}

/* ==========================================================================
   CRONジェネレーターページ専用のスタイル
   ========================================================================== */


/* --- 入力エリア --- */
.cron-input-area {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}
#cronInput {
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 16px;
}
#generateCronBtn {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    background-color: #6f42c1;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
#generateCronBtn:hover {
    background-color: #5a379b;
}

/* --- 結果表示エリア --- */
.result-wrapper.hidden {
    display: none;
}
.cron-expression-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 15px;
}
.cron-expression-display code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 20px;
    font-weight: bold;
    color: #d8365d; /* CRON式を目立たせる色 */
}
#copyCronBtn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.cron-translation {
    font-size: 16px;
    font-style: italic;
    color: #5f6368;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
}
.next-runs-area h4 {
    margin: 0 0 10px 0;
}
.next-runs-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
.next-runs-area li {
    padding: 5px 0;
}

/* --- ダークモード対応 --- */
.dark-mode .tool-container.cron-generator h1 { color: #8f6afe; }
.dark-mode #cronInput { background-color: #252526; border-color: #555; color: #e0e0e0; }
.dark-mode #generateCronBtn { background-color: #8f6afe; }
.dark-mode #generateCronBtn:hover { background-color: #6f42c1; }
.dark-mode .cron-expression-display { background-color: #252526; border-color: #333; }
.dark-mode .cron-expression-display code { color: #ff85a1; }
.dark-mode #copyCronBtn { border-color: #555; color: #a0a0a0; }
.dark-mode .cron-translation { background-color: #252526; color: #a0a0a0; }
.dark-mode .next-runs-area { color: #e0e0e0; }

/* --- スマホ表示では縦積みにする --- */
@media (max-width: 768px) {
    .cron-input-area {
        flex-direction: column;
    }
}

/* ==========================================================================
   Base64コンバーターページ専用のスタイル
   ========================================================================== */



/* --- 各変換ツールのボックス --- */
.converter-box {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}
.converter-box h2 {
    margin-top: 0;
    font-size: 18px;
    text-align: left;
}

/* --- 入力/出力テキストエリア --- */
.io-textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 15px;
    resize: vertical;
    box-sizing: border-box;
}
/* readonly属性のテキストエリアのスタイル */
.io-textarea[readonly] {
    background-color: #f0f2f5;
}

/* --- 変換の矢印 --- */
.converter-arrow {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #888;
    margin: 10px 0;
}

/* --- ダークモード対応 --- */
.dark-mode .tool-container.base64-converter h1 { color: #a0a0a0; }
.dark-mode .converter-box { background-color: #252526; border-color: #333; }
.dark-mode .converter-box h2 { color: #e0e0e0; }
.dark-mode .io-textarea { background-color: #1e1e1e; border-color: #555; color: #e0e0e0; }
.dark-mode .io-textarea[readonly] { background-color: #2a2a2a; }
.dark-mode .converter-arrow { color: #777; }

/* --- スマホ表示ではフォントサイズを少し調整 --- */
@media (max-width: 768px) {
    .io-textarea {
        font-size: 14px;
        min-height: 100px;
    }
}

/* --- ▼▼▼ ツールページの共通ガイドボックススタイル ▼▼▼ --- */
.usage-guide {
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 30px;
    font-size: 14px;
}
.usage-guide h3 {
    margin-top: 0;
    color: #333;
}
.usage-guide ul {
    padding-left: 20px;
    margin: 10px 0 0 0;
    line-height: 1.8;
}
.usage-guide code {
    background-color: rgba(0,0,0,0.08);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 13px;
}

/* --- トップページ (コード解説) のガイドの色 --- */
.usage-guide.index-guide {
    background-color: #e8f0fe; /* 薄い青 */
    border: 1px solid #d2e3fc; /* 少し濃い青の枠線 */
}

/* --- ダークモード対応 --- */
.dark-mode .usage-guide h3 { color: #e0e0e0; }
.dark-mode .usage-guide code { background-color: #444; }
.dark-mode .usage-guide.index-guide {
    background-color: #2c313a;
    border-color: #58a6ff;
}
/* ==========================================================================
   フッター上部広告のスタイル
   ========================================================================== */
.footer-ad-container {
    /* メインコンテンツの最大幅と合わせ、中央揃えにする */
    max-width: 1100px; 
    margin: 30px auto; /* 上下に30pxの余白をつけ、左右は自動で中央揃え */
    text-align: center; /* 広告が中央に表示されるように念のため指定 */
}
.asakioriginal {
    margin: 25px 0;
    text-align: center;
}

/* 画面幅が768px以下の場合（スマホ表示）のスタイル */
@media (max-width: 768px) {
    .asakioriginal {
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* ▼▼▼ この部分を追記・強化します ▼▼▼ */
    .asakioriginal a,
    .asakioriginal img {
        max-width: 100% !important; 
        height: auto !important;
    }
    
}
@media (max-width: 1180px) {
    .asakioriginal {
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* ▼▼▼ この部分を追記・強化します ▼▼▼ */
    .asakioriginal a,
    .asakioriginal img {
        max-width: 100% !important; 
        height: auto !important;
    }
    
}


/* ==========================================================================
   ツール一覧ページ専用スタイル (旧トップページスタイル)
   ========================================================================== */
.top-page-layout {
    display: grid;
    grid-template-columns: 1fr 300px; /* 左(メイン)を可変、右(サイドバー)を300pxに固定 */
    gap: 30px;
}

.main-content .tool-list h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
    margin-top: 30px;
}
.main-content .tool-list ul {
    list-style: none;
    padding-left: 0;
    
}
.main-content .tool-list ul li {
    margin-bottom: 12px;
    
}
.main-content .tool-list ul li a {
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #206A75;
    
    
}
.main-content .tool-list ul li a:hover {
    text-decoration: underline;
}

.sidebar-content .sidebar-nav {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px; 
}
.sidebar-content .sidebar-nav h3 {
    margin-top: 0;
    font-size: 16px;
}
.sidebar-content .sidebar-nav ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.sidebar-content .sidebar-nav ul li a {
    text-decoration: none;
    color: #5f6368;
}

.sidebar-content .sidebar-ad {
    background-color: #f9f9f9;
}

/* --- スマホ表示では縦積みにする --- */
@media (max-width: 768px) {
    .top-page-layout {
        grid-template-columns: 1fr; 
        display: block; /* Gridレイアウトを解除して、シンプルなブロック要素に戻す */
        padding: 0 10px; /* コンテナの内側に少しだけ余白を持たせる *//* 1カラムにする */
    }
    .top-page-layout .sidebar-content {
        display: none; /* スマホでは右側のサイドバーを非表示にする */
    }
}

/* ダークモード対応 */
.dark-mode .sidebar-content .sidebar-nav {
    background-color: #252627;
    border-color: #333;
}

/* ==========================================================================
   解説レベル切り替えボタン スタイル
   ========================================================================== */
.level-selector-area {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}
.level-btn {
    background-color: #f0f2f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #5f6368;
    cursor: pointer;
    transition: all 0.2s ease;
}
.level-btn:hover {
    background-color: #e0e4e8;
    transform: scale(1.14);
}
/* 選択されているボタンのスタイル */
.level-btn.active {
    background-color: #e8f0fe;
    color: #1a73e8;
    border-color: #1a73e8;
    font-weight: bold;
}

/* ダークモード対応 */
.dark-mode .level-btn {
    background-color: #333;
    border-color: #555;
    color: #a0a0a0;
}
.dark-mode .level-btn:hover {
    background-color: #444;
}
.dark-mode .level-btn.active {
    background-color: #303841;
    color: #58a6ff;
    border-color: #58a6ff;
}

/* ==========================================================================
   ブログ記事用 ツール誘導ボックス (CTA)
   ========================================================================== */
.cta-box {
    background-color: #e8f0fe;
    border: 2px solid #d2e3fc;
    border-radius: 8px;
    padding: 25px;
    margin: 40px 0;
    text-align: center;
}
.cta-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    color: #1a73e8;
}
.cta-box p {
    margin-bottom: 20px;
    line-height: 1.7;
}
.cta-button {
    display: inline-block;
    background-color: #1a73e8;
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.2s ease;
}
.cta-button:hover {
    background-color: #155ab6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.cta-button .arrow {
    margin-left: 8px;
    transition: transform 0.2s;
}
.cta-button:hover .arrow {
    transform: translateX(4px);
}

/* ダークモード対応 */
.dark-mode .cta-box {
    background-color: #2c313a;
    border-color: #58a6ff;
}
.dark-mode .cta-box h3 {
    color: #58a6ff;
}

/* ==========================================================================
   共有機能 (Share Section) スタイル
   ========================================================================== */
.share-section {
    /* output-container が grid なので、2カラムをまたぐように設定 */
    grid-column: 1 / -1; 
    text-align: center;
    padding: 20px;
    margin-top: 10px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
.share-section.hidden {
    display: none;
}

.share-button {
    background-color: #28a745; /* 目立つように緑色に */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.share-button:hover {
    background-color: #218838;
}

.share-url-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.share-url-container.hidden {
    display: none;
}
.share-url-container input[type="text"] {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px 0 0 6px;
    background-color: #fff;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
.share-url-container button {
    background-color: #5f6368;
    color: white;
    border: none;
    padding: 0 15px;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
}

/* ダークモード対応 */
.dark-mode .share-section {
    background-color: #252627;
    border-color: #333;
}
.dark-mode .share-url-container input[type="text"] {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
}


/* ==========================================================================
   共有ページ (share.html) 専用スタイル
   ========================================================================== */
.shared-code-area {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.shared-code-area h2 {
    margin-top: 0;
}
.shared-code-area pre code {
    white-space: pre-wrap;
    word-break: break-all;
}
.share-info {
    text-align: right;
    font-size: 14px;
    color: #5f6368;
    margin-top: 15px;
    margin-bottom: 0;
}
.back-to-top-area {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* ダークモード対応 */
.dark-mode .shared-code-area {
    background-color: #252627;
    border-color: #333;
}
.dark-mode .share-info {
    color: #a0a0a0;
}
.dark-mode .back-to-top-area {
    border-top-color: #333;
}

/* スマホ表示用の調整 */
@media (max-width: 768px) {
    .shared-code-area {
        padding: 15px;
    }
    .shared-code-area h2 {
        font-size: 20px;
    }
    .back-to-top-area {
        margin-top: 20px;
    }
}

/* ==========================================================================
   タイトルデザイン：グラデーション背景
   ========================================================================== */
.container h1 {
    /* ▼▼▼ display を flex に変更し、中央揃えの指定を追加 ▼▼▼ */
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center;     /* 垂直方向の中央揃え */
    
    width: fit-content; /* 内容に合わせて幅を調整 */
    margin-left: auto;  /* 右側に自動でマージンを設定 */
    margin-right: auto; /* 左側に自動でマージンを設定 */
    /* ▲▲▲ 修正ここまで ▲▲▲ */

    background: linear-gradient(90deg, #1a73e8, #22a3b9);
    color: white;
    padding: 8px 18px;  
    font-size: 28px;   
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ダークモードでは少し明るいグラデーションに */
.dark-mode .container h1 {
    background: linear-gradient(90deg, #58a6ff, #4dd0e1);
    color: #1e1e1e;
}

.console-note {
    font-weight: normal;
    font-size: 12px;
    color: #888;
    margin-left: 10px;
}

/* ダークモード対応 */
.dark-mode .console-note {
    color: #aaa;
}