@charset "utf-8";
/* CSS Document */


/* ========================================================
   バックナンバーページ専用のスクロールバー非表示設定
   ======================================================== */
/* 頭に「.page-backnumber」を付与したことで、他の通常ページ（single.phpやdate.php）のスクロールバーが100%安全に復活します */


/* Firefox、IE、Edge用：htmlタグのクラスを狙い撃ちして完全に消去 */
html.page-backnumber,
.page-backnumber {
    scrollbar-width: none !important; 
    -ms-overflow-style: none !important; 
    overflow-x: hidden !important; 
}

/* Chrome、Safari、Opera用：ブラウザ全体の最外殻ウインドウのバーを強制消滅 */
html.page-backnumber::-webkit-scrollbar,
.page-backnumber::-webkit-scrollbar,
.page-backnumber body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}



/*
========================================================
バックナンバー（年月アーカイブ）の設定　PC用
========================================================
*/

.yearly-archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 年ごとの外枠（左：年、右：その年の月たち） */
.year-group-item {
    display: flex;
    align-items: flex-start;
    border-bottom: 2px solid #000; /* 年ごとの区切りを太線に */
	margin-bottom: 0px; /*年ごとの区切り線の下に余白を開ける場合*/
    padding-bottom: 0px;/*月のブロックと年ごとの区切り線の間に余白を開ける場合*/
}

/* 左側：年を表示するゾーン（固定幅） */
.archive-year-zone {
    flex-shrink: 0;
    min-width: 104px; /* 年表示の幅 */
    padding: 4px; /* デフォルト 8px */
}

.archive-year-text {
    font-size: 1.2em;/*1.2em*/
    font-weight: bold;
    color: #333;
}

/* 右側：その年の月リストを格納するコンテナ */
.year-months-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* 月を上から下に並べる */
}

/* 月ごとの行（左：月、右：出来事） */
.archive-month-row {
    display: flex;
    align-items: flex-start;
    padding: 4px 0; /* デフォルト 上下8px */
    border-bottom: 1px solid #CCC; /* 月ごとの細い区切り線 */
}
.archive-month-row:last-child {
    border-bottom: none; /* その年の最後の月は線を消す */
}

/* 行内の左側：月 */
.archive-date {
    flex-shrink: 0;
    min-width: 100px; /* 月（12月など）の幅を固定 */
}

/* 記事がある月のリンク */
.archive-link {
    text-decoration: none;
    color: #0066cc;
    font-weight: bold;
}

/* 記事がない月のテキスト */
.archive-text-empty {
    color: #999;
    font-weight: normal;
}

/* 行内の右側：出来事全体の囲み */
.archive-events-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* 出来事の各行 */
.archive-event {
    color: #555;
    font-size: 1em;/*1em*/
    text-align: left;
    line-height: 2.0;
    display: block;
    position: relative;
    padding-left: 1em;
    text-indent: -1em;
}
/* 出来事がない場合の空要素 */
.archive-event-empty {
    line-height: 2.0;
}




/*
========================================================
タイムラインを移動するスライダーの設定　PC用
========================================================
*/

/* PC版ではフェードアウトさせず、常に100%表示させておくための最優先設定 */
.custom-timeline-container {
    position: fixed;
    right: 0;
    top: 0;
    width: 80px; 
    height: 100vh;
    z-index: 9999;
    user-select: none;
    
    /* ―― 【追加】PCでは常に表示（JSの消去命令をCSSでブロック） ―― */
    opacity: 1 !important;
    visibility: visible !important;
}




/* 縦のガイド線（変更なし：透明で広いクリック判定） */
.custom-timeline-track {
    position: absolute;
    top: 64px;
    bottom: 60px;
    right: 0;    
    width: 100%; 
    background: transparent; 
    cursor: pointer;
}

/* ★ 横棒（つまみ）：さらに細くし、主張の少ない薄いグレーに固定 */
.custom-timeline-handle {
    position: absolute;
    right: 15px; 
    top: 0;
    width: 25px;         /* 長さを35pxから25pxに少し短くしてより上品に */
    height: 1px;         /* ★ 2pxから「1px」の極細線にしました */
    background: #000000; /* ★ 目立ちすぎないライトグレーに固定→ブラックにしてみる */
    cursor: ns-resize;
    z-index: 10;
    /* transitionやtransformなど、ホバー時の変形アニメーションをすべて削除 */
}

/* ★ 1pxの極細線でも、掴みやすさ（透明なクッション）はそのまま維持 */
.custom-timeline-handle::before {
    content: '';
    position: absolute;
    top: -25px;    /* 判定を少しだけ上下に広げてさらに掴みやすく */
    bottom: -25px;
    left: -20px;   
    right: -20px;
}

/* ★ ホバー時やドラッグ中も、太さ・色は一切変えないように修正 */
.custom-timeline-container.is-dragging .custom-timeline-handle,
.custom-timeline-handle:hover {
    background: #cccccc; /* 色はグレーのまま */
    transform: none;     /* 太くしない（変形しない） */
}

/* スライダーの背景に表示する「年の目盛り」のスタイル */
.timeline-scale-label {
    position: absolute;
    right: 15px; 
    /* transform: translateY(-50%); から以下に変更して位置をビシッと合わせる */
    top: 0;
    line-height: 1;
    margin-top: -6px; /* 文字の高さ（11px）の約半分だけ上にずらして中央に */
    
    font-size: 11px;
    color: #b0b5ba; 
    font-family: sans-serif;
    pointer-events: none;
    padding-right: 35px; 
}

/* 目盛りの小さなポッチ */
.timeline-scale-label::after {
    content: '';
    position: absolute;
    right: -4px;
    /* top: 50%; transform: translateY(-50%); から以下に変更 */
    top: 5px; /* 11pxの文字のちょうど中央（5.5px付近）にポッチを合わせる */
    width: 4px;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}


/* 年月のポップアップバルーン（横幅固定・中央揃え版） */
.custom-timeline-bubble {
    position: absolute;
    right: 55px; 
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff; 
    color: #202124; 
    border: 1px solid #dadce0; 
    border-radius: 0; 
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15); 
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 20;

/*バルーンの寸法を調整する4つのCSSパラメータ*/
	width: 96px;           /* 1. バルーン自体の横幅（外枠のサイズ）横幅を「96px」に完全固定（文字が最も美しい余白で収まるサイズ） */
    font-size: 15px; 　　　 /* 2. 文字の大きさ */
    font-weight: bold;     /* 3. 文字の太さ */
    padding: 4px 0;        /* 4. バルーンの内側の余白（パディング）左右の余白（8px）を廃止し、上下の余白（4px）のみに制限 */

    text-align: center;    /* ★ 文字を完全に中央揃えにして、ガタつきを徹底排除 */
}

/*
■具体的な調整のコマンド（チートシート）
今後、デザインを変更したくなった際は、以下の数値を書き換えて物理演算を行ってください。

・バルーンのサイズ（横幅）を変えたいとき
width: 96px; の数値を上下させてください。
※注意点：文字サイズを大きくした場合は、文字がハミ出さないようにこの幅も一緒に広げる必要があります。

・文字の大きさを変えたいとき
font-size: 15px; の数値を調整します（例：少し小ぶりにしたい場合は 14px、もっと視認性を上げたい場合は 16px など）。

・バルーンと文字の上下の余白（隙間）を変えたいとき
padding: 4px 0; の最初の数値（4px）を書き換えます。
padding: 6px 0; にすると、上下の余白がさらに 2px 広がり、縦に少しふっくらとしたバルーンになります。
padding: 2px 0; にすると、限界までタイトでシャープな四角形になります。
*/



/* 表示切り替えのトリガー */
.custom-timeline-container.is-dragging .custom-timeline-bubble,
.custom-timeline-handle:hover .custom-timeline-bubble {
    opacity: 1;
    visibility: visible;
}




/* ========================================================
   バックナンバー（年月アーカイブ）の設定　スマホ用（@media (max-width: 768px)）
   ======================================================== */
@media (max-width: 768px) {

  /* 【追加】大元の原因を撃破：PC版の横幅制限をスマホ時だけ強制解除 */
  .yearly-archive-list {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
  }

  /* 【残す部分】年グループアイテム：横幅を画面幅にジャストフィットさせる骨組み */
  .year-group-item {
      display: flex;
      align-items: flex-start;
      border-bottom: 2px solid #000; 
      margin-bottom: 20px;
      padding-bottom: 40px; 
      flex-direction: column;
      width: 100% !important; /* 横幅を100%に強制固定 */
      box-sizing: border-box;
  }

  /* 【下線100%貫通】右側50pxの空地を確保しつつ、下線を右端まで一直線に延長 */
  .archive-month-row {
      display: flex !important;
      align-items: flex-start !important;
      width: 100% !important; /* ★最重要：行全体の幅を強制的に100%にする */
      max-width: 100% !important;
      padding: 10px 50px 10px 16px !important; /* 右側に50pxのつまみ用安全空地をキープ */
      box-sizing: border-box !important;    
      border-bottom: 1px solid #CCC !important; /* ★これで下線が100%の幅で一本線になります */
  }

  /* 【潰れ防止】出来事エリアの横幅を右側の空地の手前まで突っ張らせ、文字の有無に関係なく強制最大化 */
  .archive-events-wrapper {
      flex-grow: 1 !important;    /* ★最重要：残りの横幅を限界まで使い切る */
      display: flex !important;
      flex-direction: column !important;
      width: auto !important;     /* ★ 100% から auto に変更してFlexboxの広がりを最優先 */
      min-width: 10px !important; /* ★ 0pxになるのを物理的に防御し、右端へ突っ張らせるトリガー */
  }




  /* ―― スマホ用タイムライン・トランスフォーム ―― */
    /* ① 操作時（.is-active）だけふわっと表示させる外枠 */
  .custom-timeline-container { 
      display: block !important; 
      width: 50px; 
      opacity: 0 !important;         
      visibility: hidden !important; 
      transition: opacity 0.4s ease, visibility 0.4s ease; 
	  	  /*消えるときの「ふわっと感（速度）」】の調整
	  一瞬でパッと消したいとき: 0.2s（0.2秒）に変更します。もっと霧のように、じわ〜っと消したいとき: 0.8s（0.8秒）や 1.0s（1秒）に変更します。*/



       /* スマホの勝手なジェスチャー（スクロール等）にタッチイベントを奪わせない */
      touch-action: none !important;            
      -webkit-overflow-scrolling: auto !important; 
  }


  /* 操作中、またはスクロール中のみ出現 */
  .custom-timeline-container.is-active {
      opacity: 1 !important;
      visibility: visible !important;
  }


  /* 縦のガイドトラック */
  .custom-timeline-track {
      top: 80px;    
      bottom: 60px;  
      width: 100%;
  }

  /* ② つまみを指先大の「美しい青い半円」に改造 */
  .custom-timeline-handle {
      position: absolute;
      right: 0px !important;    /* 画面の右端ぴったりに吸着 */
      width: 24px;              
      height: 48px;             
      background: #0066cc;      
      border-radius: 24px 0 0 24px; 
      cursor: ns-resize;
      box-shadow: -2px 0 8px rgba(0,0,0,0.15);
      z-index: 999999 !important;  /* 最前面に配置し、全てのタッチを最優先で奪う */
  }

  /* 親指キャッチ判定を左（内側）へ拡張し、右端のはみ出しを5px内側に戻してタッチを確実化 */
  .custom-timeline-handle::before {
      content: '' !important;
      position: absolute;
      top: -20px;   
      bottom: -20px;
      left: -45px;  /* 左側（内側）への親指キャッチ範囲を45pxに超拡張 */
      right: 5px;   /* ★右端のはみ出しを5px内側に戻すことで、スマホが100%タッチを認識します */
  }

  .custom-timeline-container.is-dragging .custom-timeline-handle,
  .custom-timeline-handle:hover {
      background: #0052a3; 
      transform: none;     
  }

  /* ③ 背景の「西暦の目盛り」楕円形カプセル */
  .timeline-scale-label {
      display: inline-block !important; 
      right: 8px; 
      font-size: 11px;
      font-weight: bold;
      color: #ffffff;           
      background: rgba(0, 0, 0, 0.4); 
      padding: 3px 8px;        
      border-radius: 12px;     
      margin-top: -9px;
      padding-right: 8px;      
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .timeline-scale-label::after {
      display: none;
  }

  /* ④ 現在地を表示するポップアップバルーン（つまみの左側に出現） */
  .custom-timeline-bubble {
      right: 34px;             
      font-size: 13px; 
      font-weight: bold;
      width: 90px;             
      padding: 5px 0; 
      border-radius: 4px;      
      background: #ffffff;
      border: 1px solid #dadce0;
      box-shadow: -2px 4px 12px rgba(0,0,0,0.15);
  }


 /* 【最後の防壁】出来事が空っぽ（ ）の過去の月でも、右側のエリアを強制的に右端まで突っ張らせる設定 */
  .archive-event-empty {
      display: block !important;
      flex-grow: 1 !important;    /* ★これがバネのようになり、中身が空でも右端（50px空地）までエリアを押し広げます */
      width: 100% !important;     /* 横幅を強制拡張 */
      min-width: 50vw !important; /* ★強力な重力：文字がなくても、画面の半分以上の横幅を強制的に占有させる */
  }


}/* end 768 */