@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 を付与し、
   詳細度で確実に上書きする。 */
#header .subcat-btn,
#header .liacsy-subcat-btn {
  padding: 10px 20px !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  border-radius: 20px !important;
}

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

/* =======================================================================
   【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;
  }
}