@charset "UTF-8";
/* ==========================================================================
   サイドバー
   --------------------------------------------------------------------------
   Cocoon のサイドバーは2ゾーンに分かれている。

     #sidebar
       .widget-sidebar-standard   … 追従しない（検索・バナー）
       #sidebar-scroll            … position:sticky で追従する
         .widget-sidebar-scroll   … カテゴリー・タグ・バナー・人気記事

   現行の問題
     ・SPで #sidebar{display:none}。カテゴリー・タグ・人気記事・検索が丸ごと消える
     ・追従域の高さが 1,739px あり、画面より高いので追従がほとんど効いていない
       （デザイン案の指摘：固定領域が 533px を超えると本文の可読性を圧迫する）

   デザイン案の方針
     記事ページ … 追従するのは「ミニ目次＋正方形バナー」だけ。
                  人気記事は読み終えた位置＝記事下へ。カテゴリーは
                  ヘッダー・ドロワー・フッターと重複するので出さない。
     一覧ページ … 「探す」画面なので追従させない。全部スクロールして見えるほうがよい。
     1080px以下 … 追従を解除し、サイドバーの中身は本文の下へ。
   ========================================================================== */

/* --------------------------------------------------------------------------
   全体
   -------------------------------------------------------------------------- */
#sidebar.sidebar{
  background: var(--c-bg);
}
#sidebar .widget{ margin-bottom: 32px; }
#sidebar .widget:last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   ウィジェット見出し
   現行は 10px・中央寄せ・英字サブなしだった
   -------------------------------------------------------------------------- */
#sidebar .widget-sidebar h3{
  display:     flex;
  align-items: baseline;
  gap:         8px;
  margin:      0 0 14px;
  padding:     0 0 10px;
  border:      0;
  border-bottom: 2px solid var(--c-brand);
  border-radius: 0;
  background:  none;
  font-size:   15px;
  font-weight: 700;
  letter-spacing: .06em;
  color:       var(--c-ink);
  text-align:  left;
}
#sidebar .widget-sidebar h3::before,
#sidebar .widget-sidebar h3::after{ content: none; }

/* --------------------------------------------------------------------------
   記事ページはサイドバーを左に置く

   #content-in は display:flex なので、並び順を入れ替えるだけで済む
   （Cocoon設定 → カラム →「サイドバーの位置」でも変えられるが、
     あちらはサイト全体が変わる。ここなら記事ページだけに限定でき、
     複製サイトにもコードのまま引き継げる）。

   本文とサイドバーの間隔は margin ではなく余白の取り方で決まっているため、
   入れ替えても隙間は 20px のまま崩れない。
   1023px以下はサイドバーが本文の下へ回るので、この指定は要らない。
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px){
  .single #content-in{ flex-direction: row-reverse; }
}

/* --------------------------------------------------------------------------
   検索
   -------------------------------------------------------------------------- */
#sidebar .search-box{
  display:     flex;
  align-items: center;
  gap:         8px;
  margin:      0;
  padding:     5px 5px 5px 16px;
  border:        1px solid var(--c-line-strong);
  border-radius: 999px;
  background:  var(--c-bg);
  transition:  border-color .15s;
}
#sidebar .search-box:focus-within{
  border-color: var(--c-brand);
  outline:      4px solid var(--c-brand-tint);
  outline-offset: 0;
}
#sidebar .search-edit{
  flex:       1;
  min-width:  0;
  height:     36px;
  padding:    0;
  border:     0;
  background: transparent;
  font-size:  14px;      /* SPで16px未満だと iOS Safari が自動拡大するので下で戻す */
  font-family: inherit;
  color:      var(--c-ink);
}
#sidebar .search-edit:focus{ outline: 0; }
#sidebar .search-edit::placeholder{ color: var(--c-ink-4); }

#sidebar .search-submit{
  flex:        none;
  display:     grid;
  place-items: center;
  width:       36px;
  height:      36px;
  border:      0;
  border-radius: 50%;
  background:  var(--c-brand);
  color:       var(--c-on-dark);
  cursor:      pointer;
}
#sidebar .search-submit:hover{ background: var(--c-brand-dark); }

/* --------------------------------------------------------------------------
   カテゴリー
   -------------------------------------------------------------------------- */
#sidebar .widget_categories ul{
  margin:     0;
  padding:    0;
  list-style: none;
}
#sidebar .widget_categories li{
  margin:  0;
  padding: 0;
  border:  0;
}
#sidebar .widget_categories li a{
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     11px 4px;
  border:      0;
  border-bottom: 1px solid var(--c-line);
  background:  none;
  font-size:   14px;
  font-weight: 700;
  color:       var(--c-ink-2);
}
#sidebar .widget_categories li a:hover{
  color:           var(--c-brand-dark);
  background:      none;
  text-decoration: none;
}
#sidebar .widget_categories li a::before{ content: none; }

/* 右端の並びは「件数 → 矢印」。
   余白は先頭のカテゴリー名側に持たせる（margin-right:auto）。
   件数や矢印に margin-left:auto を付けると、両方が auto を取り合って
   件数が中途半端な位置で止まってしまう。 */
#sidebar .widget_categories .list-item-caption{ margin-right: auto; }

#sidebar .widget_categories .post-count{
  flex:        none;
  margin:      0;
  padding:     0;
  border:      0;
  background:  none;
  font-size:   11px;
  font-weight: 400;
  color:       var(--c-ink-3);
  font-variant-numeric: tabular-nums;
}

#sidebar .widget_categories li a::after{
  content: "";
  flex:    none;
  width:   6px;
  height:  6px;
  border-top:   2px solid var(--c-ink-4);
  border-right: 2px solid var(--c-ink-4);
  /* 45度回してあるので、見た目で右へ動かすには回転後の座標で
     translate(x, -x) を指定する（x≈2px で右へ約2.8px） */
  transform:  rotate(45deg);
  transition: transform .15s, border-color .15s;
}
#sidebar .widget_categories li a:hover::after{
  transform:    rotate(45deg) translate(2px, -2px);
  border-color: var(--c-brand);
}

/* --------------------------------------------------------------------------
   タグクラウド
   -------------------------------------------------------------------------- */
#sidebar .tagcloud{
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}
/* Cocoon は タグ1つ1つに flex-grow:1 と justify-content:space-between を当てるため、
   短いタグでも箱が行幅いっぱいに伸び、「#」と文字が両端に離れてしまう。
   伸ばさず、内容ぶんの幅にして左詰めにする。 */
#sidebar .tagcloud a{
  display:     inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex:        0 0 auto;
  gap:         3px;
  width:       auto;
  min-width:   0;
  height:      28px;
  margin:      0;
  padding:     0 12px;
  border:        1px solid var(--c-line);
  border-radius: 999px;
  background:  var(--c-bg);
  color:       var(--c-ink-2);
  font-size:   12px !important;   /* Cocoon が font-size を style 属性で出力するため */
  line-height: 1;
}
#sidebar .tagcloud a::before{
  content: "#";
  color:   var(--c-ink-3);
}
#sidebar .tagcloud a:hover{
  border-color:    var(--c-brand);
  color:           var(--c-brand-dark);
  background:      var(--c-brand-pale);
  text-decoration: none;
}
/* 「#」を出すのでタグアイコンは使わない */
#sidebar .tagcloud a .tax-icon{ display: none; }

/* --------------------------------------------------------------------------
   人気記事
   -------------------------------------------------------------------------- */
#sidebar .popular-entry-cards{ counter-reset: rank; }

#sidebar .popular-entry-card-link{
  display:  block;
  margin:   0;
  padding:  0;
  border:   0;
}
#sidebar .popular-entry-card{
  display:     flex;
  gap:         12px;
  margin:      0;
  padding:     12px 0;
  border:      0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  box-shadow:  none;
  background:  none;
}
#sidebar .popular-entry-card-link:hover .popular-entry-card{
  background: none;
  box-shadow: none;
  transform:  none;
}
#sidebar .popular-entry-card figure{
  flex:   none;
  width:  84px;
  margin: 0;
}
#sidebar .popular-entry-card figure img{
  display:       block;
  width:         100%;
  aspect-ratio:  16 / 9;
  object-fit:    cover;
  border-radius: 5px;
}
#sidebar .popular-entry-card .widget-entry-card-content{
  margin:  0;
  padding: 0;
}
#sidebar .popular-entry-card .card-title{
  font-size:   13px;
  line-height: 1.65;
  font-weight: 700;
  color:       var(--c-ink);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#sidebar .popular-entry-card-link:hover .card-title{ color: var(--c-brand-dark); }

/* 順位バッジ。上位3件だけ紫にする */
#sidebar .widget-entry-cards.ranking-visible .card-thumb::before{
  display:     grid;
  place-items: center;
  left:        -6px;
  top:         -6px;
  width:       22px;
  height:      22px;
  border-radius: 5px;
  background:  var(--c-bg-sub);
  color:       var(--c-ink-3);
  font-size:   12px;
  font-weight: 700;
  line-height: 1;
}
#sidebar .popular-entry-card-link.no-1 .card-thumb::before,
#sidebar .popular-entry-card-link.no-2 .card-thumb::before,
#sidebar .popular-entry-card-link.no-3 .card-thumb::before{
  background: var(--c-brand);
  color:      var(--c-on-dark);
}

/* --------------------------------------------------------------------------
   記事下の人気記事（ウィジェットエリア「投稿関連記事下」）
   サイドバーの人気記事はスクロールの16%で画面から消えていたので、
   読み終えた人＝次を探す人が必ず通る、関連記事の下へ移す。
   メインカラム幅なので2列に並べる。
   -------------------------------------------------------------------------- */
.widget-below-related-entries .widget-title{
  display:     flex;
  align-items: baseline;
  gap:         8px;
  margin:      0 0 14px;
  padding:     0 0 10px;
  border:      0;
  border-bottom: 2px solid var(--c-brand);
  background:  none;
  font-size:   15px;
  font-weight: 700;
  letter-spacing: .06em;
  color:       var(--c-ink);
  text-align:  left;
}
.widget-below-related-entries .widget-title::before,
.widget-below-related-entries .widget-title::after{ content: none; }

.widget-below-related-entries .popular-entry-cards{
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   0 32px;
}
.widget-below-related-entries .popular-entry-card{
  display:     flex;
  gap:         12px;
  margin:      0;
  padding:     12px 0;
  border:      0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  box-shadow:  none;
  background:  none;
}
.widget-below-related-entries .popular-entry-card-link:hover .popular-entry-card{
  background: none;
  box-shadow: none;
  transform:  none;
}
.widget-below-related-entries .popular-entry-card figure{
  flex:   none;
  width:  96px;
  margin: 0;
}
.widget-below-related-entries .popular-entry-card figure img{
  display:       block;
  width:         100%;
  aspect-ratio:  16 / 9;
  object-fit:    cover;
  border-radius: 5px;
}
.widget-below-related-entries .widget-entry-card-content{ margin: 0; padding: 0; }
.widget-below-related-entries .card-title{
  font-size:   14px;
  line-height: 1.65;
  font-weight: 700;
  color:       var(--c-ink);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.widget-below-related-entries .popular-entry-card-link:hover .card-title{ color: var(--c-brand-dark); }

.widget-below-related-entries .widget-entry-cards.ranking-visible .card-thumb::before{
  display:     grid;
  place-items: center;
  left:        -6px;
  top:         -6px;
  width:       22px;
  height:      22px;
  border-radius: 5px;
  background:  var(--c-bg-sub);
  color:       var(--c-ink-3);
  font-size:   12px;
  font-weight: 700;
  line-height: 1;
}
.widget-below-related-entries .popular-entry-card-link.no-1 .card-thumb::before,
.widget-below-related-entries .popular-entry-card-link.no-2 .card-thumb::before,
.widget-below-related-entries .popular-entry-card-link.no-3 .card-thumb::before{
  background: var(--c-brand);
  color:      var(--c-on-dark);
}

@media screen and (max-width: 834px){
  /* 2列だとタイトルが潰れるので1列に */
  .widget-below-related-entries .popular-entry-cards{ grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   追従ミニ目次（記事ページ・PCのみ）
   minitoc.js が本文の目次から作って #sidebar-scroll の先頭に挿す。
   -------------------------------------------------------------------------- */
.lg-minitoc{
  margin:        0 0 20px;
  padding:       14px 16px;
  border:        1px solid var(--c-line);
  border-radius: var(--radius);
  background:    var(--c-bg);
}
.lg-minitoc .lg-minitoc__title{
  margin:      0 0 8px;
  padding:     0;
  border:      0;
  background:  none;
  font-size:   12px;
  font-weight: 700;
  letter-spacing: .08em;
  color:       var(--c-ink-3);
  text-align:  left;
}
/* 高さは minitoc.js が「画面の高さ − 追従域のそれ以外（見出し・バナー）」で
   実測して入れる。ここの max-height は JS が動く前／効かない場合の保険。 */
.lg-minitoc .lg-minitoc__list{
  margin:     0;
  padding:    0;
  list-style: none;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lg-minitoc .lg-minitoc__list li{ margin: 0; }
.lg-minitoc .lg-minitoc__list a{
  display:     block;
  padding:     6px 0 6px 12px;
  border-left: 2px solid var(--c-line);
  font-size:   13px;
  line-height: 1.6;
  color:       var(--c-ink-3);
  text-decoration: none;
}
.lg-minitoc .lg-minitoc__list a:hover{
  color:           var(--c-brand-dark);
  text-decoration: none;
}
.lg-minitoc .lg-minitoc__list a.is-active{
  border-left-color: var(--c-brand);
  color:             var(--c-brand-deep);
  font-weight:       700;
}

/* --------------------------------------------------------------------------
   バナー枠
   -------------------------------------------------------------------------- */
#sidebar .widget_text .textwidget p{ margin: 0; }
#sidebar .widget_text img{
  display:       block;
  width:         100%;
  border-radius: var(--radius);
  transition:    opacity .3s;
}
#sidebar .widget_text a:hover img{ opacity: .92; }

/* 記事ページのバナーは正方形の差し替え枠。
   入稿は 640×640px 以上を推奨（320px表示の2倍）。

   目次の高さはこの枠に合わせて自動で縮む。
   minitoc.js の fit() が「追従域の高さ − 目次リストの高さ」で
   バナーぶんを実測しているため、比率を変えるだけで追従する。 */
.single #sidebar .widget_text img{
  aspect-ratio: 1 / 1;
  object-fit:   cover;
}

/* --------------------------------------------------------------------------
   追従の制御
   -------------------------------------------------------------------------- */
#sidebar-scroll.sidebar-scroll{
  position: sticky;
  top:      84px;
  z-index:  1;
  background: var(--c-bg);
}

/* 記事ページのサイドバーは 3つだけに絞る
     ① サイト内検索        （#search-2 ＝ 追従しないゾーン）
     ② 追従ミニ目次        （#sidebar-scroll の先頭。minitoc.js が挿す）
     ③ 16:9バナー ×1       （追従ゾーンの text ウィジェット）

   読んでいる間に要るものだけを残す。カテゴリーはヘッダー・フッターと重複し、
   人気記事は「読み終えてから要るもの」なので記事下へ移す。
   タグは記事ヘッダーにも出ているので重複。 */
.single #sidebar .widget_categories,
.single #sidebar .widget_popular_entries,
.single #sidebar .widget_tag_cloud,
.single #sidebar .widget-sidebar-standard.widget_text{ display: none; }

/* トップ・一覧では検索を出さない
   （ヘッダーの検索と、見出し下のカテゴリーフィルタで足りるため） */
.home #sidebar .widget_search,
.archive #sidebar .widget_search,
.search #sidebar .widget_search{ display: none; }

/* トップ・一覧の追従域そのものは追従させない

   カテゴリーと人気記事まで含めると 1400px 前後あり、画面より背が高い。
   貼りつけても下半分が画面に入らないので、ここは素直に流す。
   代わりに下部のタグとバナーだけを .lg-sidebar-pin として貼る（下記）。 */
.home #sidebar-scroll.sidebar-scroll,
.archive #sidebar-scroll.sidebar-scroll,
.search #sidebar-scroll.sidebar-scroll{
  position: static;
  top:      auto;
}

/* トップ・一覧：サイドバー下部（タグ・バナー）を追従させる

   本文のほうがサイドバーより 2000px 以上長く、サイドバーが終わったあと
   フッターまで空白が残っていた。この2つを貼りつけて空白を埋める。

   sidebar-pin.js が、追従域（#sidebar-scroll）の外＝ #sidebar の直下へ
   このグループを出している。可動域がサイドバー全体になるので、
   フッター直前まで貼りついたままになる。
   追従域の中に置いたままだと可動域が足りず、途中で剥がれる。

   高さは 630px 前後。ヘッダー84px と下の余白を足して 760px 未満の画面では
   下端が切れるので、そこでは貼らずに流す。 */
@media screen and (min-width: 1081px) and (min-height: 760px){
  .home .lg-sidebar-pin,
  .archive .lg-sidebar-pin,
  .search .lg-sidebar-pin{
    position: sticky;
    top:      84px;
  }
}

/* --------------------------------------------------------------------------
   1080px以下：追従を解除する
   固定領域が伸びると本文の可読性を圧迫するため
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px){
  #sidebar-scroll.sidebar-scroll{ position: static; top: auto; }
  /* 本文中の目次と重複するのでミニ目次は出さない */
  .lg-minitoc{ display: none; }
}

/* --------------------------------------------------------------------------
   SP（834px以下）
   現行は #sidebar{display:none} でカテゴリー・タグ・人気記事・検索が
   丸ごと消えていた。本文の下に回して残す。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 834px){
  #sidebar.sidebar{
    display: block;
    width:   auto;
    margin:  40px 0 0;
    /* 本文（#main）が padding:0 16px なので、左右の余白を揃える */
    padding: 0 16px;
  }

  #sidebar .widget{ margin-bottom: 28px; }

  /* iOS Safari は 16px 未満の入力欄でフォーカス時にページを自動拡大する */
  #sidebar .search-edit{ font-size: 16px; }

  /* 記事ページでは、記事下に出す人気記事と重複しないよう据え置き（上の .single 指定のまま） */
}