@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・読み込み順で子テーマが後勝ち）。
   ============================================================ */

/* カテゴリバッジ・モバイルメニュー・トップに戻るボタン・送信ボタン */
.cat-label,
.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);
}

/* リンクホバー時の薄い背景色 */
.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){
  /*必要ならばここにコードを書く*/
}