@charset "utf-8";
/*
Theme Name: Mobile Prince Child
Template: minimaga
Description: Minimaga の子テーマ。オフィスシマブクロ デザイントークン（紺青・白基調）を適用し、親テーマが消しているフォーカスリングを復活させる。親テーマ本体は編集せず、上書きはこの1枚に集約する（＝MinimalWPのサポートを維持するための必須条件）。
Author: オフィスシマブクロ
Version: 1.0.0
*/

/* ============================================================
   親テーマCSSの読み込み
   Minimaga は header.php で bloginfo('stylesheet_url') を直接出力するため、
   子テーマ有効化時は「子の style.css」だけが読まれ、親の style.css が
   自動では読み込まれない。ここで @import して親→子の順に適用する。
   （responsive.css は header.php が get_template_directory_uri() で
   親から直接読むので別途対応不要）
   ※親テーマのフォルダ名が "minimaga" 以外の場合は下のパスを合わせること。
   ============================================================ */
@import url("../minimaga/style.css");


/* ============================================================
   オフィスシマブクロ カラートークン v1.1
   （正本: Vault の color-tokens.css。ここは複製）
   ============================================================ */
:root {
  /* ---- 主役: 紺青 ---- */
  --c-primary:        #2B4C9B;
  --c-primary-hover:  #233F82;
  --c-primary-strong: #1B3166;
  --c-primary-tint:   #EAEFF9;

  /* ---- ニュートラル ---- */
  --c-text:         #1A1A1A;
  --c-text-sub:     #595959;
  --c-text-muted:   #767676;
  --c-bg:           #FFFFFF;
  --c-bg-sub:       #F5F5F3;
  --c-border:       #DCDCD8;
  --c-border-input: #8C8C8C;

  /* ---- セマンティック（状態表示地専用） ---- */
  --c-success:      #2E7D32;
  --c-success-tint: #EAF3EB;
  --c-warning:      #B45309;
  --c-warning-tint: #FAF1E0;
  --c-danger:       #C62828;
  --c-danger-tint:  #FBEBEA;

  /* ---- グラフ系列 ---- */
  --chart-1: #2B4C9B;
  --chart-2: #0B7285;
  --chart-3: #B23A2E;
  --chart-4: #5F3DC4;
  --chart-5: #8C8C8C;
}


/* ============================================================
   1. 基本（本文・フォント）
   ============================================================ */
body {
  font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",YuGothic,"メイリオ",Meiryo,sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
}


/* ============================================================
   2. リンク
   運用ルール: 本文リンクは「青＋下線」。ナビ・カード見出し等の
   構造リンクは地の色（黒）を保ち、青を要所に限定して白8割を守る。
   ============================================================ */

/* 本文中のリンク（＝要所。青＋下線） */
.single-contents a,
.page-contents a,
.item-text a,
.top-wide-contents a,
.textwidget a,
p a,
.breadcrumb span,
.breadcrumb span a {
  color: var(--c-primary);
  text-decoration: underline;
}
.single-contents a:hover,
.page-contents a:hover,
.item-text a:hover,
.textwidget a:hover,
p a:hover,
.breadcrumb span a:hover {
  color: var(--c-primary-hover);
}

/* 構造リンク（ナビ・カード見出し・記事タイトル）は黒を維持 */
.nav-menu li a,
.item-title a,
.blog-title a,
.pagetitle a,
.pagetitle-single a,
.similar li a,
.sidebox-new li a {
  color: var(--c-text);
  text-decoration: none;
}
.nav-menu li a:hover,
.item-title a:hover,
.blog-title a:hover,
.similar li a:hover,
.sidebox-new li a:hover {
  color: var(--c-primary);
}

/* サイドバー／ウィジェット／フッターのリスト（ナビ的なので黒〜サブ） */
.widget li a,
.sidebox li a,
.topbox li a,
.footerbox li a,
.singlebox li a {
  color: var(--c-text);
}
.widget li a:hover,
.sidebox li a:hover,
.topbox li a:hover,
.footerbox li a:hover,
.singlebox li a:hover {
  color: var(--c-primary);
}


/* ============================================================
   3. ブランドアクセント（紺青は要所だけ）
   ============================================================ */

/* 上部の帯 = ブランドの1本線（親: 7px #333 → 紺青） */
.topborder {
  border-top-color: var(--c-primary);
}

/* ナビの現在地・ホバー面はグレーで（青を増やさない） */
.nav-menu li:hover > a,
.nav-menu li a:hover {
  background: var(--c-bg-sub);
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a,
.nav-menu .current-post-ancestor > a {
  color: var(--c-primary);
  background: var(--c-bg-sub);
}


/* ============================================================
   4. 見出し・罫線（#ccc/#ddd 系 → トークン）
   ============================================================ */
h2, h3, h4,
.blog-title,
.widget-title,
.single-widget-title,
.footer-widget-title,
.top-widget-title,
.similar-head,
.comment-head, .comment-reply-title,
.pagetitle, .pagetitle-top,
.pagetitle-kotei,
.widget_block h2 {
  border-color: var(--c-border);
  color: var(--c-text);
}
h4 { color: var(--c-text-sub); }

hr { border-top-color: var(--c-border); }

blockquote {
  border-left-color: var(--c-border);
  color: var(--c-text-sub);
}


/* ============================================================
   5. 記事カード
   ============================================================ */
.item-cat-name {
  background: var(--c-bg-sub);
}
.item-cat-name a { color: var(--c-text); }
.item-date { color: var(--c-text-muted); }
.item-text { color: var(--c-text-sub); }

/* カテゴリー色の例（親の .news 用スロット）→ 紺青tint */
.news { background-color: var(--c-primary-tint) !important; }


/* ============================================================
   6. ページャー
   ============================================================ */
a.page-numbers,
.pager .current {
  background: var(--c-bg-sub);
  color: var(--c-text);
}
a.page-numbers:hover {
  background: var(--c-primary-tint);
  color: var(--c-primary-strong);
}
.pager .current {
  background: var(--c-primary);
  color: #fff;
}


/* ============================================================
   7. ボタン / CTA
   運用ルール: 青塗りボタンは1画面1個。第二ボタンは白地×青文字×青枠。
   ============================================================ */

/* 第一ボタン（青塗り） */
.bt-order a {
  background-color: var(--c-primary);
  color: #fff;
  border-radius: 4px;
}
.bt-order a:hover {
  background: var(--c-primary-hover);
  color: #fff;
}

/* 第二ボタン（白地×青文字×青枠） */
.bt-order2 a {
  background: var(--c-bg);
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  border-radius: 4px;
}
.bt-order2 a:hover {
  background: var(--c-primary-tint);
  color: var(--c-primary-strong);
}

/* CTAウィジェット枠 */
.cta-minimal {
  background: var(--c-primary-tint);
  border-color: var(--c-primary-tint);
}
.cta-title {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}


/* ============================================================
   8. テーブル
   ============================================================ */
.single-contents th,
.single-contents td,
.page-contents th,
.page-contents td {
  border-color: var(--c-border);
}
.single-contents th,
.page-contents th {
  background-color: var(--c-bg-sub);
}


/* ============================================================
   9. 囲み・タグクラウド
   ============================================================ */
.line-kakoi  { border-color: var(--c-border); }
.line-kakoi2 { border-color: var(--c-border); }
.line-dotted, .line-solid, .line-footmenu { border-bottom-color: var(--c-border); }

.widget_tag_cloud a { background: var(--c-bg-sub); color: var(--c-text-sub); }


/* ============================================================
   10. フッター
   ============================================================ */
#footer { background: var(--c-bg-sub); }
#copyright { background: var(--c-text); }
#copyright a { color: #fff; }


/* ============================================================
   11. フォーム枠線
   ============================================================ */
input[type="text"], input[type="password"], input[type="email"],
input[type="url"], input[type="tel"], input[type="number"],
input[type="search"], textarea, select {
  border: 1px solid var(--c-border-input);
}


/* ============================================================
   12. フォーカスリング（必須）
   親テーマが outline:0 / outline:none を各所で掛けているため、
   !important で確実に復活させる。キーボード操作時のみ表示。
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.hamburger:focus-visible {
  outline: 2px solid var(--c-primary) !important;
  outline-offset: 2px;
}