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

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

/* ブランドカラー（Phase 2: 白ベース + 紺 + オレンジアクセント） */
:root {
  --brand-navy: #1a2b4c;
  --brand-orange: #e8743b;
}

/* ヘッダー背景: 紺トーンの写真
   ★#header-containerではなく#header（IDセレクタ）に直接指定すること。
   実際に塗りつぶされるのは内側の#header要素で、skin-colors-blueのCSSが
   .header{background-color:#0095d9}を直書きしているため、IDセレクタで
   確実に上書きする（キーカラー設定の変更では効かない箇所）。 */
#header {
  background-color: var(--brand-navy);
  background-image: url("https://almondbase.com/wp-content/uploads/2026/10/header_bg_v1.jpg");
  background-size: cover;
  background-position: center;
}
#header .tagline,
#header .site-name-text {
  color: #ffffff;
}

/* フォント: Meiryo UIを先頭に追加（Windowsで表示）。
   Mac/スマホ等Meiryo UIが存在しない環境は、元からあったMeiryo→Hiragino→
   汎用sans-serifのフォールバック連鎖がそのまま効くため表示が崩れることはない。 */
.ff-meiryo,
.wf-loading body,
.wp-admin-ff-meiryo .cocoon-block-wrap {
  font-family: "Meiryo UI", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

/* アクセントカラー: 本文リンクにオレンジを使用 */
.entry-content a {
  color: var(--brand-orange);
}
.entry-content a:hover {
  color: var(--brand-navy);
}

/* ============================================================
   skin-colors-blue の直書き色（#0095d9 / #89c3eb / #eaf4fc）を
   ブランドカラーに上書き。cocoon-master/skins/skin-colors-blue/style.css
   の該当セレクタをそのまま踏襲（同一specificity・読み込み順で子テーマが後勝ち）。
   ============================================================ */

/* Cocoon標準のカテゴリバッジは非表示（サムネイル画像side自体にカテゴリラベルを
   焼き込んでいるため二重表示になる。rugby-drillsと同じ対応） */
.cat-label {
  display: none !important;
}

/* モバイルメニュー・トップに戻るボタン・送信ボタン */
.mobile-menu-buttons,
.mobile-menu-buttons .menu-button > a,
.navi-menu-content,
.navi-menu-content a,
.go-to-top-button,
#submit {
  background-color: var(--brand-navy);
  color: #fff;
}
div.mobile-menu-buttons .menu-button:hover,
.navi-menu-content a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 人気記事ランキングの数字バッジ（アクセントのオレンジに） */
.widget-entry-cards.ranking-visible .card-thumb::before {
  background: var(--brand-orange);
}

/* ページネーション */
.page-numbers,
.tagcloud a,
.author-box,
.ranking-item,
.pagination-next-link,
.comment-reply-link,
.toc {
  border-color: var(--brand-navy);
}
.page-numbers,
.pagination-next-link {
  background: rgba(26, 43, 76, 0.06);
}
.pagination .current,
.page-numbers.current,
.page-numbers.dots {
  background: var(--brand-navy);
  color: #fff;
}

/* 記事内見出し */
.article h2 {
  background: rgba(26, 43, 76, 0.06);
  border-left-color: var(--brand-navy);
}
.article h3 {
  border-left-color: var(--brand-navy);
}
.article h4 {
  border-bottom-color: rgba(26, 43, 76, 0.2);
}

/* ナビゲーション */
.navi ul .sub-menu {
  background-color: var(--brand-navy);
}
.appeal-button {
  background-color: var(--brand-orange);
}

/* やるべきこと/避けるべきこと（寅アイコン付き2カラムボックス、build_post.pyが生成） */
.dos-donts-box {
  gap: 1.5em;
}
.dos-donts-icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 4px;
}
.dos-box,
.donts-box {
  padding: 1em 1.2em;
  border-radius: 8px;
}
.dos-box {
  background: rgba(46, 139, 87, 0.08);
  border-left: 4px solid #2e8b57;
}
.donts-box {
  background: rgba(200, 60, 60, 0.07);
  border-left: 4px solid #c83c3c;
}

/* キャリア・転職カテゴリ記事末尾のアフィリエイトCTA（build_post.pyが生成） */
.career-cta-box {
  background: rgba(26, 43, 76, 0.04);
  border: 1px solid rgba(26, 43, 76, 0.15);
  border-radius: 10px;
  padding: 1.5em 1.5em 0.5em;
  margin-top: 2em;
}
.career-cta-pr-label {
  display: inline-block;
  font-size: 0.75em;
  color: #888;
  background: #eee;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 0.5em;
}
.career-cta-icon {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-right: 4px;
}
.career-cta-buttons .wp-block-button__link {
  background-color: var(--brand-orange);
  border-radius: 6px;
}
.career-cta-buttons .is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--brand-navy);
  border: 2px solid var(--brand-navy);
}

/* SNSボタン（記事下部のシェア・フォロー）をシンプルな丸アイコンに統一。
   Cocoon側の基本スタイル（プラットフォームごとの色・キャプション・カウント表示）は
   動的生成されるインラインCSSにあり把握しづらいため、実際に使われているクラスへ
   完全に独自のスタイルを当てて上書きする（土台を気にせず完結させる方式）。 */
.sns-share-message,
.sns-follow-message {
  display: none;
}
.sns-buttons.sns-buttons {
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 1em;
}
.sns-buttons a.sns-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--brand-navy) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background-color 0.2s;
}
.sns-buttons a.sns-button:hover {
  background-color: var(--brand-orange) !important;
}
.sns-buttons a.sns-button .button-caption,
.sns-buttons a.sns-button .share-count {
  display: none !important;
}
.sns-buttons a.sns-button .social-icon,
.sns-buttons a.sns-button .icon-x-corp-logo {
  position: static;
  display: block;
  font-size: 16px;
  color: #fff;
  margin: 0;
}

/* リンクホバー時の薄い背景色 */
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.tagcloud a:hover,
.pagination a:hover,
.pager-links a:hover span,
.pagination-next-link:hover,
.comment-btn:hover,
.comment-reply-link:hover,
.navi-footer-in a:hover {
  background-color: rgba(26, 43, 76, 0.05);
}

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

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

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