@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** nijioshi skin v1 (共通テンプレート)
** サイト固有の差分は :root の変数だけを変更する
************************************/
:root{
  --nijioshi-accent:#3d5a80;
  --nijioshi-accent-dark:#2c4460;
  --nijioshi-silver:#e8edf3;
}
a{ color: var(--nijioshi-accent); }
#header-container{ border-bottom: 3px solid var(--nijioshi-accent); }
#header .site-name-text{ color: var(--nijioshi-accent-dark); letter-spacing: .04em; }
#footer .site-name-text{ color: #fff; }
.navi-in a:hover{ background-color: var(--nijioshi-accent); color:#fff; }
.widget-title{
  background: var(--nijioshi-accent);
  color:#fff;
  padding: .45em .8em;
  border-radius: 4px;
  font-size: 1.02em;
}
.entry-card-title:hover{ color: var(--nijioshi-accent); }
.cat-label{ background-color: var(--nijioshi-accent); }
.pagination .current{ background: var(--nijioshi-accent); border-color: var(--nijioshi-accent); }
.go-to-top-button{ background: var(--nijioshi-accent); }
::selection{ background: var(--nijioshi-silver); }

/************************************
** nijioshi header banner (バナー側にサイト名を焼き込み済みのサイト用)
** バナーはサイト幅に内包し、拡縮に追従させる
************************************/
#header-container{ background-color: transparent !important; }
#header-container-in{ max-width: 1556px; margin: 0 auto; }
#header{
  aspect-ratio: 1600 / 420;
  background-size: cover;
  background-position: center 72%;
}
#header .tagline, #header .logo{ visibility: hidden; }
@media (max-width: 768px){
  #header{ aspect-ratio: 1600 / 560; }
}

/************************************
** nijioshi 3column (C1: 左レール付き)
************************************/
#nijioshi-left-rail{ display: none; }
.rail-widget{ margin-bottom: 1.6em; }
.rail-widget ul{ list-style: none; margin: 0; padding: 0; }
.rail-widget ul li a{
  display: block;
  padding: .55em .8em;
  border-bottom: 1px solid #e3e8ef;
  color: var(--nijioshi-accent-dark);
  text-decoration: none;
}
.rail-widget ul li a:hover{ background: var(--nijioshi-silver); }
@media (min-width: 1501px){
  #header-container-in{ max-width: 1840px !important; }
  #container #content #content-in{
    width: auto !important;
    max-width: 1840px !important;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 376px;
    column-gap: 24px;
  }
  #nijioshi-left-rail{ display: block; }
  #content-in .main{ float: none; width: auto !important; }
  #content-in .sidebar{ float: none; width: auto !important; margin: 0; }
  #header-container-in{ container-type: inline-size; }
  #header{
    aspect-ratio: auto;
    height: calc((100cqw - 724px) * 0.2625);
    background-size: calc(100% - 724px) auto;
    background-position: 324px 0;
    background-repeat: no-repeat;
  }
    #navi{
    width: min(1116px, calc(100% - 724px));
    margin-left: max(324px, calc(50% - 596px));
    margin-right: auto;
  }

  #navi .navi-in{ width: auto !important; max-width: none; }
}

/************************************
** nijioshi mobile (SPバナー＋表示順)
************************************/
@media (max-width: 768px){
  #header{
    background-image: url(https://shirupare.nijioshi.com/wp-content/uploads/2026/11/banner_a3_sp.jpg) !important;
  }
}
@media (max-width: 1024px){
  #container #content #content-in{ display: flex; flex-direction: column; }
  #content-in .sidebar, #content-in #nijioshi-left-rail{ display: contents; }
  #content-in .main{ order: 30; width: auto !important; float: none; }
  #content-in .widget{ order: 45; }
  #content-in .widget_popular_entries{ order: 10; }
  #content-in #common_ad-1{ order: 20; }
  #content-in .widget_new_entries{ order: 40; }
  #content-in .widget_search{ order: 50; }
  #content-in #categories-3{ order: 60; }
  #content-in #custom_html-1{ order: 70; }
  #content-in #common_ad-2{ order: 80; }
}

/* nijioshi heading v2 (2026-11-10): 黒文字＋端まで細下線。出典は小文字用クラス */
.article h2 {
  background: none !important;
  background-color: transparent !important;
  color: #1a1a1a !important;
  border: none;
  border-bottom: 2px solid var(--nijioshi-accent);
  box-shadow: none;
  padding: 0.15em 0 0.35em;
}
.article h3 {
  background: none !important;
  background-color: transparent !important;
  color: #1a1a1a !important;
  border: none;
  border-bottom: 1px solid #c9d4e2;
  box-shadow: none;
  padding: 0.1em 0 0.3em;
}
.sources {
  font-size: 12px;
  color: #666;
  line-height: 1.8;
  margin-top: 2em;
}
.sources h2 {
  font-size: 13px !important;
  color: #666 !important;
  border-bottom: 1px solid #ddd;
  padding: 0 0 0.2em;
  margin-bottom: 0.4em;
}
.sources ul { margin: 0; padding-left: 1.2em; }
.sources a { color: #666; }

/* tweet embed centering (2026-11-10) */
.tweet-embed { display: flex; justify-content: center; margin: 1em 0; }
.tweet-embed .twitter-tweet { margin: 0 auto !important; }