@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.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* 記事内のYouTube動画（固定幅560pxのiframe）が左寄せに見えていたため中央寄せに */
.rd-video{text-align:center;}

/* カード下のタイトル文言はサムネイル画像内の文字と重複するため非表示。
   ただしSEO/読み上げ用にDOM上には残す（sr-onlyパターン、display:noneにはしない） */
.entry-card-title{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* --- サイドバー検索ボックス --- */
.search-box.input-box{display:flex;align-items:center;border:1.5px solid #e2e0d3;border-radius:999px;background:#fff;padding:4px 4px 4px 16px;transition:border-color .15s,box-shadow .15s;}
.search-box.input-box:focus-within{border-color:#0e284a;box-shadow:0 0 0 3px rgba(14,40,74,.12);}
.search-box .search-edit{border:none !important;background:transparent !important;outline:none;flex:1;font-size:14px;padding:8px 4px !important;box-shadow:none !important;min-width:0;}
.search-box .search-submit{position:static !important;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;border:none !important;background:#0e284a !important;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s;outline:none !important;box-shadow:none !important;margin:0 !important;padding:0 !important;}
.search-box .search-submit:hover,.search-box .search-submit:focus,.search-box .search-submit:active{background:#d69e2e !important;outline:none !important;box-shadow:none !important;}
.search-box .search-submit .fa{color:#fff !important;font-size:14px;}

/* --- カテゴリ／タグ絞り込みフォーム（Search & Filter） --- */
.searchandfilter ul{display:flex;flex-wrap:wrap;align-items:center;gap:10px;list-style:none;margin:0;padding:0;}
.searchandfilter ul li{margin:0;}
.searchandfilter select.postform{appearance:none;-webkit-appearance:none;border:1.5px solid #e2e0d3;border-radius:9px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23767676'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;background-size:16px;padding:9px 32px 9px 12px;font-size:14px;color:#16233a;min-width:160px;cursor:pointer;}
.searchandfilter select.postform:focus{outline:none;border-color:#0e284a;}
.searchandfilter input[type="submit"]{appearance:none;-webkit-appearance:none;border:none;background:#0e284a;color:#fff;font-weight:700;font-size:14px;padding:10px 22px;border-radius:999px;cursor:pointer;transition:background .15s;outline:none !important;box-shadow:none !important;}
.searchandfilter input[type="submit"]:hover,.searchandfilter input[type="submit"]:focus{background:#d69e2e;color:#0e284a;}

/* --- カテゴリバッジ非表示（アイキャッチ画像側に焼き込み済み） --- */
.cat-label{display:none !important;}

/* --- トップページの余白を詰めてコンパクトに --- */
body.public-page .sns-share.ss-top{margin:0.6em 0 !important;}
body.public-page #main{margin-top:0 !important;}
/* 絞り込みフォームの見た目をコンパクトに（余白を左右均等に） */
body.public-page .searchandfilter{max-width:100%;}

/* --- 絞り込みウィジェット内部の余白を強制的にゼロにし、外側の.wrapだけに幅を合わせる --- */
#custom_html-4,
#custom_html-4 .textwidget,
#custom_html-4 form.searchandfilter,
#custom_html-4 .searchandfilter > div{margin:0 !important;padding:0 !important;}
/* 「観たい動画を絞り込み」の見出しテキストは非表示（フォーム自体は表示） */
.widget-content-top-title{display:none !important;}

/* --- ヘッダー/固定ページ/本文/サイドバー間の縦の余白を全体的に詰める --- */
#header-container{margin-bottom:0 !important;}
.recommended{margin:0 !important;padding:0.3em 0 !important;}
#main{padding-top:0 !important;margin-top:0 !important;}
.sidebar{padding-top:0 !important;margin-top:0 !important;}
.sidebar .widget{margin-bottom:1em !important;}
.article{padding-top:0.6em !important;}
/* 上下対称のpaddingにして、ピルボタン列との間／記事一覧との間の余白を揃える */
.content-top{margin:0 !important;padding:4px 0 !important;}
/* .content{margin-top:24px}（Cocoon本体CSS）が絞り込みフォームと記事一覧の間にだけ
   余分な24pxを作っていた（上側には対応する余白が無く非対称の原因だった） */
.content{margin-top:0 !important;}
.sns-share.ss-top{margin:0.5em 0 !important;padding:0 !important;}
.list-new-entries{margin:0 !important;}

/* 「新着記事」の見出し（線+タイトル）は非表示、記事一覧はそのまま表示 */
.list-new-entries-title{display:none !important;}

/* --- ①一覧ページ上部のSNSシェアボタンを非表示（記事下部の物は維持） ---
   .sns-share.ss-top はトップページだけでなく、カテゴリ一覧・全記事一覧などあらゆる
   アーカイブ系一覧の1ページ目にCocoonが自動表示する仕様だった。以前は.front-top-page
   （トップページ限定）でしか非表示にしておらず、他の一覧ページの1ページ目にだけ
   バグのように表示され続けていた（2026-09-18判明）。範囲を全ページに広げて解消。 */
.sns-share.ss-top{display:none !important;}

/* --- 記事下部のSNSシェアボタン（ss-bottom）は非表示 ---
   ヘッダーのロゴ横にXシェアボタンを新設し、そちらに一本化したため
   （記事下だと読了後にしか見えず、設置場所として微妙という指摘のため移設）。 */
.sns-share.ss-bottom{display:none !important;}

/* --- ヘッダーのロゴ右：検索ボックス＋Xシェアボタン（2026-09-18新設） ---
   position:absolute+top:50%は親のheader-inの見えない余白の影響でズレ続けたため、
   CSS Gridの3カラム構成（左スペーサー／ロゴ／ツール）でロゴと同じ行の
   align-items:centerに乗せる方式に変更。これなら行の高さ＝ロゴの高さになり、
   確実にロゴの中心と揃う。 */
#header-in{
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center !important;
}
#header-in > .logo{grid-column:2;}
/* imgはinline要素のためline-height分の見えない余白（数px）を持つ。blockにして解消 */
.logo .site-logo-image{display:block;}
.rd-header-tools{
  grid-column:3;
  justify-self:end;
  /* サイドバーの右内側余白(19px)と合わせて、下の記事一覧・サイドバーの右端と揃える */
  margin-right:19px;
  position:static !important;
  display:flex;
  align-items:center;
  gap:10px;
}
.rd-header-search{
  height:28px !important;
  box-sizing:border-box;
  padding:0 2px 0 12px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center;
  align-self:center;
  line-height:1;
}
.rd-header-search .search-edit{
  width:110px;
  height:100% !important;
  padding:0 4px !important;
  font-size:12px !important;
  box-sizing:border-box;
}
.rd-header-search .search-submit{width:26px !important;height:26px !important;min-width:26px !important;}
.rd-header-x-share{
  display:flex;
  align-items:center;
  align-self:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#d69e2e;
  color:#0e284a;
  flex-shrink:0;
  transition:background .15s;
}
.rd-header-x-share:hover{background:#fff;color:#0e284a;}
.rd-header-x-share .social-icon{font-size:13px;}

/* ヘッダー上部の金帯（キャッチフレーズ）は検索ツールと干渉するため非表示 */
.header-container .tagline{display:none !important;}

/* 幅が狭い画面ではロゴと重なるため非表示（スマホは別途メニュー内に検索がある） */
@media screen and (max-width: 900px){
  .rd-header-tools{display:none !important;}
}

/* --- ②検索ボックスを絞り込みフォームの隣に配置 ---
   marginでの縦位置調整（旧margin-top:1.9em）は上下に余分な空白を生むため、
   align-items:centerで自然に高さの中央を揃える方式に変更。 */
#content-top-in{display:flex !important;flex-wrap:wrap;align-items:center;gap:20px;justify-content:space-between;}
#content-top-in .widget-content-top{flex:1 1 auto;}
#content-top-in #search-2{flex:0 0 260px;max-width:100%;}

/* --- ③固定ページ4枚のピル帯はサイドバーの縦ボタン（custom_html-8）に置き換えたため非表示 ---
   記事に辿り着くまでの導線を短くする目的（2026-09-17、専門的見地からの提案をユーザー承認）。 */
.recommended{display:none !important;}

/* --- サイドバーの固定ページ縦ボタン（custom_html-8） ---
   紺の塗りボタンは重く見えるとのフィードバックのため、下線区切りのシンプルなリストに変更。 */
.rd-page-nav{display:flex;flex-direction:column;}
.rd-page-nav-link{
  display:block;
  background:none;
  color:#16233a !important;
  text-align:center;
  font-weight:700;
  font-size:14px;
  padding:10px 4px;
  border-bottom:1px solid #e2e0d3;
  text-decoration:none;
  transition:color .15s;
}
.rd-page-nav-link:first-child{border-top:1px solid #e2e0d3;}
.rd-page-nav-link:hover{color:#d69e2e !important;}

/* --- ④左右の端をそろえる（デコボコ解消） ---
   Cocoon本体CSSでは .main{padding:36px 29px} だが、.recommended-in / #content-top-in は
   同じ .wrap（幅1256px）を使うのに左右パディングが無いため、本文カード列より29px外側から
   始まっていた。ここで同じ29pxを付けて左端をそろえる。 */
.recommended-in,
#content-top-in{padding-left:29px !important;padding-right:29px !important;box-sizing:border-box;}

/* --- ⑥本文とサイドバーの間の余白を詰める ---
   .main の右パディング(29px)＋2カラム間のgap(20px)＋.sidebarの左パディング(19px)＝68pxが
   本文カードとサイドバーの間に空いていた。左側（本文冒頭・絞り込み等との整列用）はそのまま残し、
   本文の右側とサイドバーの左側だけ狭める。 */
#main{padding-right:14px !important;}
.sidebar{padding-left:14px !important;}

/* --- ⑦グローバルメニュー（インデックス）を5列×2行にそろえてコンパクト化 ---
   これまでは各項目が文字幅に応じたバラバラの幅(auto)で並び、10項目が8+2の
   不均衡な2行に折り返されていた（PC表示のみ、モバイルは別メニューなので対象外）。 */
@media screen and (min-width: 1024px){
  .navi-in > ul.menu-pc{
    display:grid !important;
    grid-template-columns:repeat(5,1fr);
  }
  .navi-in > ul.menu-pc > li{
    width:auto !important;
    height:44px !important;
  }
  .navi-in > ul.menu-pc > li > a{
    padding:0 0.5em !important;
  }
  .navi-in > ul.menu-pc .item-label{
    font-size:14px;
  }
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /* スマホでは記事カードを2カラム→1カラムにし、サムネイルだけ表示
     （タイトルはサムネイル画像に焼き込み済みのため、下のテキストは非表示にして
     サムネイル自体を大きく見せる） */
  .ect-2-columns > *,
  .fpt-2-columns > *{
    width:100% !important;
  }
  .ect-2-columns .entry-card-content,
  .fpt-2-columns .entry-card-content{
    display:none !important;
  }
  /* テキストを消しても残る余白（figure自体のmargin、カードのpadding等）を除去 */
  .ect-2-columns .entry-card-thumb,
  .fpt-2-columns .entry-card-thumb{
    margin:0 !important;
    padding:0 !important;
    line-height:0;
  }
  /* imgはinline要素のため行の高さ分の見えない余白（数px）を下に持つ。
     ロゴの時と同じ現象なのでblockにして解消 */
  .ect-2-columns .entry-card-thumb-image,
  .fpt-2-columns .entry-card-thumb-image{
    display:block !important;
  }
  .ect-2-columns .entry-card,
  .fpt-2-columns .entry-card,
  .ect-2-columns .entry-card-wrap,
  .fpt-2-columns .entry-card-wrap{
    padding:0 !important;
    margin:0 0 0.5em 0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:none !important;
    overflow:visible !important;
  }
  .ect-2-columns .entry-card-thumb,
  .fpt-2-columns .entry-card-thumb{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .ect-2-columns .entry-card-thumb-image,
  .fpt-2-columns .entry-card-thumb-image{
    height:auto !important;
    max-height:none !important;
    border:none !important;
    box-shadow:none !important;
  }
}