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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*
.widget_new_entries .display-none {
	display: block;
	padding-top: 0.2em;
	text-align: down;
}
*/
/* デスクトップ向けのスタイル */

/* 例えば、#my-element というIDを持つ要素を表示する場合 */
/* デスクトップでは表示する */
/* それをコメントアウト
#my-element {
  display: block;
}
*/
/*
.main, 
.sidebar {
  background-color: #ccc;
}
*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*必要ならばここにコードを書く*/
/*1023px以下*/
/* モバイルでは非表示にする */
/* それをコメントアウト*/
@media screen and (max-width: 1023px){
	#my-element {
    display: none;
  }
}


/*834px以下*/
/* モバイルでは非表示にする */
/* それをコメントアウト*/
@media screen and (max-width: 834px){
	#my-element {
    display: none;
  }
}


/*480px以下*/
/* モバイルでは非表示にする */
/* それをコメントアウト*/
@media screen and (max-width: 480px){
	#my-element {
    display: none; /* モバイルでは非表示にする */
  }
}

/* =======================================================================
   【2026-09-15 たくみ】メインメニュー上のホバー型プルダウン
   （#navi .navi-in .sub-menu）拡大対応 → CEO確認の結果、要望対象が
   別の要素（下記「小カテゴリボタン」）だったため、本対応はロールバック
   済み（2026-09-15、第4回修正）。CSSは一旦削除。必要になれば本コメントの
   直後にあった #navi .navi-in .sub-menu 系のルール（padding 14px 24px、
   caption-wrap min-height 32px、item-label font-size 16px）を復元する。
   ======================================================================= */

/* =======================================================================
   【2026-09-15 たくみ・第3回修正】メインメニューボタンを押した後に現れる
   「小カテゴリボタン」を、メインメニューボタン相当の大きさまで拡大

   CEO再訂正：「メインメニューボタンを押したあとに現れる、サブメニュー
   ボタンを大きくして」との指摘。

   調査（headless Chromiumで実際にメインメニューボタンをクリック/タップし
   遷移後の画面をスクリーンショットで確認。/academic/ 等のカテゴリー
   アーカイブページで検証）：
   - これまで2回対応していた「メインメニュー上でのホバー時プルダウン」
     （#navi .navi-in .sub-menu、本ファイル上部の別ブロック）とは
     別物であることを実機相当の操作で確認した。
   - 本項目が指すのは、メインメニューボタン（例:「学術」）をクリックして
     カテゴリーアーカイブページに遷移した直後、メインメニュー直下に
     表示される「小カテゴリボタン」の行（例:「語学」「心理学」
     「水産学」「生物学」）。DOM上は <a class="subcat-btn">語学</a> という
     単純なリンクで、追加CSS側の既存ルール
     `.subcat-btn { padding: 2px 10px !important; font-size: 13px !important; }`
     により、メインメニューのピルボタン（padding 14px 26px, 実質font-size
     14px前後）と比べて明らかに小さく表示されていた。
   - これはPC幅・モバイル幅の両方のスクリーンショットで再現を確認済み
     （ハンバーガー式ドロワーメニュー #navi-menu-input はこのサイトでは
     未使用であることも確認済み。モバイル用メインメニューはタップで
     即座にページ遷移するのみで、独自のクリック展開式サブメニューは
     存在しない）。
   - `.liacsy-subcats-wrapper` は幅固定ではなく flex 的に折り返す行
     （display:inline-block + margin）のため、ボタンサイズを拡大しても
     単に折り返し行数が増えるだけで、横はみ出し・他要素との重なりは
     発生しない。念のため拡大後もPC幅・モバイル幅で折り返し崩れが
     ないことをスクリーンショットで確認済み。
   ======================================================================= */
/* 追加CSS側（外観→カスタマイズ→追加CSS）に .subcat-btn { font-size:13px !important }
   が既に存在し、かつそちらは本ファイルより後に読み込まれるため、クラスの
   詳細度のみでは負けてしまう。実際のマークアップ（#header 配下の
   div.subcat-buttons > a.subcat-btn）に合わせて #header を付与し、
   詳細度で確実に上書きする。 */
/* 【2026-10-31 たくみ】CEO依頼：小カテゴリボタンの高さ・文字サイズを
   トップメニュー（2026-10-31対応分、padding:6px 12px / 実表示文字
   サイズ17px / caption-wrap高さ24px）と統一する。
   実機計測したトップメニューの内訳：
   padding(6px×2=12px) + border(3px×2=6px) + 内容の高さ(24px、
   caption-wrapで明示固定) = 42px。
   .subcat-btn にはcaption-wrap構造が無く<a>直下にテキストがあるため、
   font-size・line-heightで内容の高さを直接24pxに合わせることで、
   トップメニューと同じ合計42pxにする（line-heightをpx指定にして
   font-sizeの丸め誤差の影響を受けないようにしている）。 */
#header .subcat-btn,
#header .liacsy-subcat-btn {
  padding: 6px 12px !important;
  font-size: 17px !important;
  line-height: 24px !important;
  border-radius: 20px !important;
}

/* 小カテゴリボタン群の行間・行の余白も拡大後のボタン高さに合わせて調整 */
#header .subcat-buttons,
.liacsy-subcats-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

/* 【2026-10-31 たくみ】CEO依頼：トップメニューと小カテゴリボタン群
   （.subcat-btn、ホバードロップダウン.sub-menuとは別物・対象外）との
   間が詰まっているので少し開け、逆に小カテゴリボタンが複数行に
   折り返した時の1行目・2行目間は詰めてほしい、との指摘。

   実機計測（liacsy.local「技術」「ホーム」ページで実測）：
   - トップメニュー下端と小カテゴリボタン1行目上端の間隔：0px
     （.subcat-buttonsにmargin-top/padding-topが無かったため）
   - 折り返し時の1行目下端・2行目上端の間隔：14px の内訳
     = 上のgap指定のrow-gap分(8px) + 各ボタン(.subcat-btn)自体に
     既存の追加CSS側ルールで指定されていた margin-bottom:6px!important
     （詳細度で#header .subcat-btnにより上書きし0に統一、下記）

   対応：
   - トップメニューとの間隔を0→16pxに広げる（margin-top）。
   - 折り返し行間は、ボタン自体のmargin-bottomを0にして行間制御を
     gapのrow-gapのみに一本化した上で、8px→4pxに詰める。 */
#header .subcat-buttons {
  margin-top: 16px !important;
  row-gap: 4px !important;
}

#header .subcat-btn {
  margin-bottom: 0 !important;
}

/* =======================================================================
   【2026-09-15 たくみ・第5回修正】メインメニュー本体（トップレベルの
   ピルボタン）のフォントサイズ・ボタンサイズを拡大

   CEO依頼：現状比おおむね1.15〜1.3倍程度で、視認性が明らかに向上する
   程度に拡大してほしい。

   現状の実描画値（headless Chromiumで実測）：
   - ボタン（<a>）パディング：14px 26px（追加CSS側 2026-08-29 ルール）
   - 表示文字サイズ：14px（`a > .caption-wrap .item-label` の
     font-size:14px !important が実際の描画を決めており、同じ2026-08-29
     ルールが a 自体に指定した font-size:2rem は item-label 側の直接指定に
     阻まれ、実際には反映されていなかった）
   - caption-wrap 高さ：20px固定（Cocoon本体ではなく追加CSS側 2026-08-29
     ルールでの上書き）

   変更後の目標値：
   - パディング 14px 26px → 16px 30px（縦約1.14倍・横約1.15倍）
   - 文字サイズ 14px → 17px（約1.21倍）
   - caption-wrap 高さ 20px → 24px（拡大後の文字が収まるよう最小限のみ拡張）
   - 768px以下（モバイル横スクロールメニュー）はやや控えめに
     パディング12px→14px、文字14px→16px

   詳細度について：対象の各ルールは追加CSS側の2026-08-29ルール
   （#navi .menu-top.menu-header.menu-pc > li > a 等、ID1個+class3個+
   要素2個）と同一セレクタで !important 同士がぶつかり、かつ追加CSS側の
   方が本ファイルより後に読み込まれるため、詳細度で確実に勝つよう
   #navi #navi-in（ID2個）を付与している。

   影響範囲の確認：
   - `> li > a` の直接子孫セレクタのみを使用しているため、ホバー型
     ドロップダウン（.sub-menu 配下の孫要素）や、小カテゴリボタン
     （.subcat-btn、別要素）には一切影響しない。
   - トップレベル項目は8個（ホーム/学術/技術/脅威/雑談/心豊寺/ピア道/
     そよ風、いずれも2〜3文字）。拡大後、PC幅（1400px）・タブレット
     境界幅（1024px）の両方で1行に収まり折り返しが発生しないことを
     headless Chromiumのスクリーンショットで確認済み。
   - モバイル幅は既存の横スクロールコンテナ（overflow-x:auto）内に
     収まっているため、そもそも画面幅からのはみ出し・折り返し崩れは
     発生しない（スクロール量が増えるのみ）。
   - ヘッダー全体の高さは #header-in 側で明示的に固定していないため、
     ボタン高さの増分だけ自然に伸びる。ロゴ・検索窓は各々 flex の
     align-items:center で中央揃えのため、崩れないことをスクリーン
     ショットで確認済み。
   ======================================================================= */
#navi #navi-in .menu-top.menu-header.menu-pc > li > a,
#navi #navi-in .menu-top.menu-mobile > li > a {
  padding: 16px 30px !important;
}

#navi #navi-in .menu-top.menu-header.menu-pc > li > a > .caption-wrap,
#navi #navi-in .menu-top.menu-mobile > li > a > .caption-wrap {
  height: 24px !important;
}

#navi #navi-in .menu-top.menu-header.menu-pc > li > a > .caption-wrap .item-label,
#navi #navi-in .menu-top.menu-mobile > li > a > .caption-wrap .item-label {
  font-size: 17px !important;
}

@media screen and (max-width: 768px) {
  #navi #navi-in .menu-top.menu-header.menu-pc > li > a,
  #navi #navi-in .menu-top.menu-mobile > li > a {
    padding: 14px 20px !important;
  }

  #navi #navi-in .menu-top.menu-header.menu-pc > li > a > .caption-wrap .item-label,
  #navi #navi-in .menu-top.menu-mobile > li > a > .caption-wrap .item-label {
    font-size: 16px !important;
  }
}