/*
Theme Name: おいしいかりんとうが大好きですVersion: 1.0
Theme URI:yukipro.cloudfree.jp
Author: プラスパワーホールディングス
Description: おいしいかりんとうが大好きですVersion: 1.0
*/

:root {
    --bg-color: #ffffff;
    --text-color: #111111;
    --link-color: #0066cc;
    --accent-color: #222222;
    --meta-color: #666666;
    --border-color: #eeeeee;
    --code-bg: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #e0e0e0;
        --link-color: #66b3ff;
        --accent-color: #ffffff;
        --meta-color: #aaaaaa;
        --border-color: #333333;
        --code-bg: #2a2a2a;
    }
}

/* Base Setup */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
    margin: 0;
    padding: 0;
}

a { color: var(--link-color); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.3; font-weight: 700; color: var(--text-color); }

/* Layout */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
header { border-bottom: 1px solid var(--border-color); padding-bottom: 20px; margin-bottom: 40px; }
.site-title { font-size: 1.5rem; margin: 0; }
.site-title a { color: var(--text-color); }

/* Post Content */
article { margin-bottom: 50px; }
.post-title { font-size: 2rem; margin-bottom: 10px; }
.post-meta { color: var(--meta-color); font-size: 0.9rem; margin-bottom: 20px; }
.entry-content h2 { 
    border-bottom: 2px solid var(--accent-color); 
    padding-bottom: 5px; 
    margin-top: 40px; 
}

/* ガジェット用：スペック表 (Table) */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.95rem;
}
th, td {
    border: 1px solid var(--border-color);
    padding: 10px;
    text-align: left;
}
th { background-color: var(--code-bg); font-weight: bold; width: 30%; }

/* ガジェット用：CVボタン (CTA) */
.btn-wrap { text-align: center; margin: 30px 0; }
.btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--bg-color) !important;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: bold;
    transition: opacity 0.2s;
}
.btn:hover { opacity: 0.8; }

/* Footer */
footer { 
    border-top: 1px solid var(--border-color); 
    text-align: center; 
    padding: 20px; 
    font-size: 0.8rem; 
    color: var(--meta-color);
}
/* メリット・デメリットボックス */
.review-box {
    display: flex;
    gap: 20px;
    margin: 30px 0;
}
.review-col {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    background: var(--code-bg);
}
.review-good { border-top: 4px solid #4CAF50; } /* 緑 */
.review-bad { border-top: 4px solid #F44336; }  /* 赤 */

.review-title {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    text-align: center;
}
.review-list { padding-left: 20px; margin: 0; }
.review-list li { margin-bottom: 5px; }

/* スマホ表示対応 */
@media (max-width: 600px) {
    .review-box { flex-direction: column; gap: 10px; }
}
/* --------------------
   自動生成目次 (TOC)
   -------------------- */
.toc-box {
    background-color: var(--code-bg); /* 背景色 */
    border: 1px solid var(--border-color);
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
}
.toc-title {
    font-weight: bold;
    text-align: center;
    margin: 0 0 15px 0;
    font-size: 1.1rem;
}
.toc-box ul {
    margin: 0;
    padding-left: 20px;
}
.toc-box li {
    margin-bottom: 8px;
    list-style: decimal; /* 数字リスト */
}
.toc-box a {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px dotted var(--meta-color);
}
.toc-box a:hover {
    color: var(--link-color);
}

/* --------------------
   まとめ・総評枠
   -------------------- */
.summary-box {
    border: 3px solid var(--accent-color); /* 太めの枠線で強調 */
    padding: 30px;
    margin: 50px 0;
    position: relative;
    border-radius: 4px;
    background-color: var(--bg-color);
}
/* 「まとめ」というラベルを枠の上に載せる */
.summary-box::before {
    content: "Review Summary"; /* 好きな文字に変更可 */
    position: absolute;
    top: -14px;
    left: 20px;
    background: var(--accent-color);
    color: var(--bg-color);
    padding: 0 15px;
    font-weight: bold;
    font-size: 0.9rem;
    line-height: 28px;
    border-radius: 4px;
}
.summary-text {
    font-size: 1.05rem;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.8;
}
/* --------------------
   カテゴリーメニュー
   -------------------- */
.cat-nav {
    border-top: 1px solid var(--border-color);
    padding: 10px 0;
    margin-top: 20px;
    overflow-x: auto; /* 横スクロールを有効化 */
    -webkit-overflow-scrolling: touch; /* スマホでの慣性スクロール */
}

/* スクロールバーを隠す（見た目スッキリ） */
.cat-nav::-webkit-scrollbar { display: none; }

.cat-nav ul {
    display: flex; /* 横並びにする */
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
    white-space: nowrap; /* 折り返さない */
}

.cat-nav li a {
    display: inline-block;
    padding: 6px 16px;
    background-color: var(--code-bg);
    border-radius: 20px; /* 丸みのあるボタン */
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.2s;
}

/* マウスを乗せた時と、現在のページ */
.cat-nav li a:hover,
.cat-nav li.current-cat a {
    background-color: var(--accent-color);
    color: var(--bg-color);
}
/* カテゴリーページのタイトル */
.archive-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 0;
    background-color: var(--code-bg);
    border-radius: 8px;
}
.archive-subtitle {
    display: block;
    font-size: 0.8rem;
    color: var(--meta-color);
    letter-spacing: 2px;
    margin-bottom: 5px;
}
.archive-title {
    margin: 0;
    font-size: 1.8rem;
}
.archive-meta {
    margin-top: 10px;
    font-size: 0.9rem;
}
/* --------------------
   収納ボックス（アコーディオン）
   -------------------- */
details {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin: 20px 0;
    background-color: var(--bg-color);
    transition: all 0.3s;
}

/* クリックするバーの部分 */
summary {
    cursor: pointer;
    padding: 12px 20px;
    font-weight: bold;
    background-color: var(--code-bg);
    border-radius: 4px; /* 閉じている時は角丸 */
    list-style: none; /* デフォルトの▶を消す */
    position: relative;
    outline: none;
}

/* 開いた時の中身 */
details[open] {
    border-color: var(--accent-color); /* 開くと枠線の色が変わる */
}

details[open] summary {
    border-bottom: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0; /* 上だけ角丸 */
    margin-bottom: 0;
}

.details-content {
    padding: 20px;
    font-size: 0.95rem;
}

/* オリジナルの矢印アイコンを作る（CSSで描画） */
summary::after {
    content: '+'; 
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 1.2rem;
    transition: transform 0.2s;
}

/* 開いた時は「+」を回転させて「×」っぽくする */
details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

/* Chrome/Safariのデフォルト矢印を消すおまじない */
summary::-webkit-details-marker {
    display: none;
}