@charset "utf-8";

/*
Theme Name: Minimaga Child (キオクロク)
Template: minimaga
Description: キオクロク用のMinimaga子テーマ。カスタマイズはこのファイルに書く。
Author: もとじ
Version: 1.0
*/


/* =====================================================================
   ★消さないこと★ 親テーマの読み込み

   Minimagaは header.php で <link href="stylesheet_url"> を直接書いている。
   そのため子テーマを有効化すると、親の style.css が読まれなくなる。
   （stylesheet_url が子テーマを指すため）

   functions.php で wp_enqueue_style すると、wp_head() が
   linkタグより後にあるせいで親CSSが子CSSを上書きしてしまう。
   なので @import で、ファイルの一番上に置くのが正解。
   ===================================================================== */

@import url("../minimaga/style.css");


/* =====================================================================
   調整パネル ─ まずはここの値だけ書き換える

   下の「適用」セクションが全部この値を参照しているので、
   ここをいじるだけでサイト全体が変わる。
   ===================================================================== */

:root {
  /* --- 色 --- */
  --accent:        #378893;  /* リンクの色。サイトの印象の8割はここ */
  --accent-hover:  #666666;  /* リンクにカーソルを乗せたとき */
  --text:          #333333;  /* 本文の文字色。真っ黒より少し薄い方が読みやすい */
  --text-sub:      #999999;  /* 日付・カテゴリなど控えめな文字 */
  --line:          #cccccc;  /* 見出しの罫線・区切り線 */

  /* --- 文字 --- */
  --font: "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  --body-size:    16px;  /* 本文の文字サイズ */
  --body-size-sp: 16px;  /* スマホでの本文サイズ（15〜17pxが読みやすい） */
  --line-height:  200%;  /* 行間。日本語は180〜210%が読みやすい */

  /* --- 幅 --- */
  --content-width: 960px;  /* サイト全体の最大幅。文章主体なら740〜800pxも試す価値あり */
}


/* =====================================================================
   適用 ─ 基本ここから下は触らなくていい
   ===================================================================== */

/* 全体 */
body {
  font-family: var(--font);
  color: var(--text);
}

.wrapper {
  max-width: var(--content-width);
}

/* 本文 */
p {
  font-size: var(--body-size);
  color: var(--text);
  line-height: var(--line-height);
}

p a,
.single-contents a,
.page-contents a {
  color: var(--accent);
}

p a:hover,
.single-contents a:hover,
.page-contents a:hover {
  color: var(--accent-hover);
}

/* 見出し */
h2 {
  color: var(--text);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

h3 {
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

h4 {
  border-bottom: 1px dotted var(--line);
}

/* 記事タイトル */
.blog-title {
  color: var(--text);
  border-top: 3px double var(--line);
  border-bottom: 1px solid var(--line);
}

.blog-title a,
.item-title a,
.pagetitle a {
  color: var(--text);
}

/* 日付・記事フッターなど控えめな文字 */
.blog-foot,
.blog-foot span,
.pagedate {
  color: var(--text-sub);
}

/* サイドバー / フッターのリンク */
.widget li a,
.sidebox li a,
.footerbox li a {
  color: var(--text);
}

.widget li a:hover,
.sidebox li a:hover,
.footerbox li a:hover {
  color: var(--accent);
}


/* =====================================================================
   スマホ（767px以下）

   親の responsive.css は style.css より先に読み込まれるので、
   スマホ向けの上書きはこのブロックに書く。
   ===================================================================== */

@media only screen and (max-width: 767px) {

  p {
    font-size: var(--body-size-sp);
  }

}


/* =====================================================================
   追記スペース

   ここから下に自由に書き足す。
   「何を・なぜ変えたか」を1行コメントで残すと半年後の自分が助かる。
   ===================================================================== */

/* 例）記事本文の余白を広く取りたくなったら
.single-contents p {
  padding: 20px 0;
}
*/