/* CSS変数の定義 */
:root {
    --background-color: #ffffff;
    --title-color: #000000; /* デイモードでのサイトタイトル色 color: var(--site_title_color);*/
    --title-boder-color: #000000;
    --text-color: #333333;

    --link-color: #1122cc; /* デイモードでのデフォルトリンク色 */
    --link-hover-color: #0056b3; /* デイモードでのリンクホバー色 */
    --link-visited-color: #6611cc; /* デイモードでのリンクビジター色 */

    --timestamp-color: #666666;

    --post-border-color: #aaaaaa; /* デイモードでのサイトタイトル色 color: var(--post-border-color);*/
    --navi-border-color: #666666; /* デイモードでのサイトタイトル色 color: var(--navi-border-color);*/

    --text-info-color: #CF3838; /* デイモードでのサイトタイトル色 color: var(--text-info-color);*/

    --button-bg: #e9ecef; /* 通常ボタンの背景色（ライトモード） */
    --button-text: #495057; /* 通常ボタンのテキスト色（ライトモード） */
    --button-border: #adb5bd; /* ボタンの境界線色（ライトモード） */
    --button-active-bg: #007bff; /* アクティブなボタンの背景色（ライトモード） */
    --button-active-text: #ffffff; /* アクティブなボタンのテキスト色（ライトモード） */
}

/* ナイトモードのスタイル */
body.dark-mode {
  --background-color: #21252b; /* より深いダークグレーで、コンテンツが際立つように */
  --title-color: #e0e0e0; /* テキストと同じ色で統一感を持たせる */
  --title-border-color: #60656c; /* タイトル下のボーダーは背景より少し明るいグレーで区切りを明確に */
  --text-color: #e0e0e0; /* 明るすぎず、目に優しいオフホワイト */

  --link-color: #e0e0e0; /* 青みがかった落ち着いた色で、リンクと認識しやすいように */
  --link-hover-color: #cab4ff; /* ホバー時に少し明るくしてインタラクションを示す */
  --link-visited-color: #ccb6ff; /* 訪問済みリンクは少し紫がかった色で区別 */

  --timestamp-color: #9ea7b4;

  --post-border-color: #4a4a4a; /* 記事間のボーダーは控えめなダークグレーでコンテンツの区切りを示す */
  --navi-border-color: #848484; /* ナビゲーションのボーダーはさらに暗くして、背景との一体感を出す */

  --text-info-color: #e66b6b; /* 注意や強調が必要な情報を目立たせる赤（彩度を少し下げて目に優しく） */

  --button-bg: #343a40; /* 通常ボタンの背景色は、背景色より少し濃いグレーで立体感を出す */
  --button-text: #e0e0e0; /* 通常ボタンのテキスト色はメインテキストと同じで統一 */
  --button-border: #495057; /* ボタンの境界線は背景に馴染みつつ、視認できる程度に */
  --button-active-bg: #7da5ed; /* アクティブなボタンの背景色はリンク色と同じにし、一貫性を高める */
  --button-active-text: #21252b; /* アクティブなボタンのテキスト色は背景色と同じでコントラストを出す */
}

body {
    margin: 0;
    padding: 0;
/*    font-family: sans-serif; *//* 例：フォントファミリーを指定 */
    font-family: Inter, Noto Sans JP, Source Han Sans, sans-serif;
    line-height: 1.4; /* 行間を指定 */

    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/*
header, footer {
    background-color: var(--header-footer-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}
*/

/* 728px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 748px) {
    body {
        width: 100%; /* 画面幅いっぱいに表示 */
        box-sizing: border-box; /* padding, border を幅に含める */
        padding: 0; /* 左右に余白を追加 */
        margin: 0 auto;
    }
}

/* 729px以上の画面幅に適用されるスタイル */
@media screen and (min-width: 749px) {
    body {
        width: 748px; /* 最大幅を748pxに設定 */
        padding: 0; /* 左右に余白を追加 */
        margin: 0 auto;
    }
}

a {
    color: var(--link-color);
    text-decoration: none; /* デフォルトの下線を消す場合 */
    transition: color 0.3s ease; /* スムーズな色切り替え */
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline; /* ホバー時に下線を付ける場合 */
}

a:visited {
    color: var(--link-visited-color);
    text-decoration: none; /* デフォルトの下線を消す場合 */
}

ul {
    margin: 0 10px;
    padding: 0 0 1.0em 0;
}

li {
    margin: 0;
    padding: 0;
    list-style: none;
}

li.date {
    color: var(--timestamp-color);
    padding: 0;
    font-size: 0.7em;
}

li.date span {
    padding-left: 1em;
}

li.post {
    padding: 0 0 0.4em 0;
    margin: 0 0 0.3em 0;
    border-bottom: 1px solid var(--post-border-color);
    font-size: 0.9em;

    overflow-wrap: anywhere; /* 収まらない場合に折り返す */
    word-break: break-all;  /* 長い単語でも途中で改行 */
}

li.post a:hover {
    color: var(--link-hover-color);
    text-decoration: underline; /* ホバー時に下線を付ける場合 */
}

li.post a:visited {
    color: var(--link-visited-color);
    text-decoration: none; /* デフォルトの下線を消す場合 */
}

li.post span {
    padding-left: 0.3em;
}

li.post img {
    padding-top: 3px;
    height: auto;
    vertical-align: text-top;
}

header {
    display: flex;
    margin: 0 10px;
    justify-content: space-between; /* 要素を左右に配置 */
    align-items: baseline; /* 要素を垂直方向に中央揃え */
}

h1 {
    margin: 0.4em 0 0.6em 0;
    padding: 0;
    font-size: 1.0em;
}

header span.update a {
    padding-right: 0.2em;
    font-size: 0.8em;
    color: var(--timestamp-color);
}

h2 {
    margin: 0 10px 0.3em 10px;
    padding: 0 0 0.2em 0;
    font-size: 1.0em;
    border-bottom: 2px solid var(--title-color);
}

h2 a:link {
    color: var(--title-color);
}
h2 a:visited {
    color: var(--title-color);
}

nav {
    margin: 0 10px 0 10px;
    padding: 0;
    display: flex;
    justify-content: space-between; /* 要素を両端に配置 */
}

nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    /*overflow-x: auto; *//* 水平方向のスクロールを許可 */
    /*white-space: nowrap; *//* 要素を折り返さない */
    /*-webkit-overflow-scrolling: touch; *//* iOSでスムーズなスクロールを有効化 */
    flex-wrap: wrap; /* 要素を折り返すように変更 */
}

nav ul li {
    padding: 0 0.5em 0 0.5em;
    margin-bottom: 0.2em;
    border-left: 1px solid var(--navi-border-color);
    font-weight: bold;
}

nav ul li:last-child {
    border-right: 1px solid var(--navi-border-color);
}

nav ul li:last-child {
    margin-right: 0; /* 最後の要素の右マージンを削除 */
}

nav ul li a {
    font-size: 1.0em;
}

p.info {
    margin: 0 10px 0.8em 10px;
    padding: 0;
    font-size: 0.8em;
    font-weight: bold;
    color: var(--text-info-color);
}

footer {
    text-align: center;
}

/*
広告エリア
*/
.adarea {
    display: flex;
    gap: 10px; /* 左右の要素間の余白 */
    padding: 0.2em 10px 0.3em 10px ;
    /* 画面幅が狭い場合のデフォルトとして中央寄せを設定 */
    justify-content: center;
}

/* PCなど画面幅が広い場合（例: 769px以上） */
@media (min-width: 769px) {
    .adarea {
        justify-content: flex-start; /* 左寄せ */
    }
}



/* ====================================
スクロールボタン固有のスタイル (ブラウザ下段に固定・オーバーレイ)
.ad-container はとび先に必要
==================================== */
.ad-container {
    width: 100%;
}

.scroll-buttons {
    position: fixed;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* ボタン間のスペースを少し小さく */
    z-index: 1000;

    /* ボタン自体のリセット */
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.scroll-buttons button {
    width: 40px; /* ボタンの固定幅を小さく */
    height: 40px; /* ボタンの固定高さを小さく */
    background-color: rgba(0, 123, 255, 0.5); /* 背景色をより薄く (透明度を0.5に変更) */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* 影をより薄く */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;

    /* リセットと独立性を高めるための追加 */
    margin: 0;
    padding: 0;
    font-size: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

.scroll-buttons button:hover {
    background-color: rgba(0, 123, 255, 0.7); /* ホバー時の背景色を少し濃く */
    transform: translateY(-1px); /* 少し浮き上がるエフェクトを控えめに */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時の影を調整 */
}

.scroll-buttons button:active {
    background-color: rgba(0, 123, 255, 0.8); /* アクティブ時の背景色を調整 */
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.scroll-buttons button img {
    width: 55%; /* SVGアイコンのサイズをボタンに合わせて調整 */
    height: 55%;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

/* PCの場合：コンテンツ幅が861pxの時、右辺の外側にボタンを固定 */
@media (min-width: 861px) {
    .scroll-buttons {
    /* ボタン幅が40pxになるので、調整 */
        right: calc((100vw - 768px) / 2 - 50px); /* (ボタン幅40px + 余白20px) */
    }
}

/* スマホの場合：画面幅が860px以下の場合 */
@media (max-width: 860px) {
    .scroll-buttons {
        right: 26px; /* 画面右からの余白 */
    }
}



/* ====================================
ダークモードのボタンデザイン
==================================== */
.theme-switcher {
    display: inline-flex; /* ボタンを横並びにする */
    border: 1px solid var(--button-border); /* 全体を囲む境界線 */
    border-radius: 8px; /* 全体の角を丸める */
    overflow: hidden; /* 子要素の角丸がはみ出さないように */
    margin-top: 10px;
    background-color: var(--button-bg); /* 背景色を統一 */
}

.theme-button {
    flex-grow: 1; /* ボタンが均等に幅を取るように */
    background-color: transparent; /* 背景色は親要素から継承または透過 */
    color: var(--button-text);
    border: none; /* 各ボタンの境界線をなくす */
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

/* ボタン間の境界線をシミュレート */
.theme-button:not(:last-child) {
    border-right: 1px solid var(--button-border);
}

.theme-button:hover:not(.active) {
    background-color: rgba(var(--button-active-bg), 0.1); /* ホバー時の薄い背景 */
}

/* アクティブなボタンのスタイル */
.theme-button.active {
    background-color: var(--button-active-bg);
    color: var(--button-active-text);
    /* アクティブなボタンには境界線は不要 */
}

/* アクティブなボタンの左右のボタンの境界線を調整（オプション） */
/* アクティブなボタンの右にあるボタンの左境界線を非表示にする */
.theme-button.active + .theme-button {
    border-left: none;
}

/* アクティブなボタンの左にあるボタンの右境界線を非表示にする */
.theme-button:has(+ .active) {
    border-right: none;
}