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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/************************************
** 旧AFFINGER4の独自クラス互換(2026-08-08追加)
** Cocoonにはこれらの定義が無いため、旧テーマ時代に付けた太字・マーカー・
** 会話フキダシがすべて素の本文として表示されてしまう。
**
** 公開記事での使用数(wp db queryで実測):
**   oomozi 589 / ymarker 126 / hutoaka 18 / rmarker 7 / st-kaiwa 177
**
** みかん課長はライト基調なので、靴バカ(ダーク基調)と違い
** AFFINGERのオリジナルの色をほぼそのまま使える。
************************************/

/* ---- 文字装飾 ---- */
/* 旧定義は font-size:18pt(=24px) / line-height:35px の固定値。
   本文サイズ基準の相対値に置き換えて同等の見え方にしている */
.oomozi {
  font-size: 1.35em;
  line-height: 1.6;
  font-weight: bold;
}
.komozi {
  font-size: 80%;
}
.huto {
  font-weight: bold;
}
/* 白背景に対する純赤#ff0000は4.00:1でAA基準(4.5:1)をわずかに下回るため、
   見た目の印象を保ったまま基準を満たす#E60000(4.81:1)に寄せている */
.hutoaka {
  font-weight: bold;
  color: #E60000;
}

/* ---- マーカー(白背景なのでAFFINGERの色をそのまま使える) ---- */
.ymarker {
  background: #FFF9C4;
  padding: 0 2px;
}
.rmarker {
  background: #FFCDD2;
  padding: 0 2px;
}
.dotline {
  border-bottom: 1px dotted #212121;
}

/* ---- ボックス ---- */
.yellowbox,
.redbox,
.graybox {
  padding: 20px;
  margin-bottom: 20px;
}
.yellowbox {
  border: solid 1px #fffacd;
  background-color: #ffffe0;
}
.redbox {
  border: solid 1px #ef5350;
  background-color: #ffebee;
}
.graybox {
  border: solid 1px #ccc;
  background-color: #f3f3f3;
}

/* ---- 会話フキダシ(記事中177箇所) ----
** AFFINGERのHTML構造(.st-kaiwa-box > .st-kaiwa-face + .st-kaiwa-area)を
** 子テーマfunctions.phpのショートコードで再現し、見た目をここで作る。
** 記事本文は一切書き換えていないので、この定義を消せば元の状態に戻る。
** 「r」引数付き(右側表示)は -face2 / -area2 / -hukidashi2 側が使われる。 */
.st-kaiwa-box {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  display: table;
}
.st-kaiwa-face,
.st-kaiwa-face2 {
  text-align: center;
  display: table-cell;
  width: 60px;
  vertical-align: middle;
}
.st-kaiwa-face img,
.st-kaiwa-face2 img {
  border-radius: 60px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.st-kaiwa-face-name,
.st-kaiwa-face-name2 {
  color: #616161;
  font-size: 70%;
  line-height: 1.5;
  max-width: 60px;
}
.st-kaiwa-area {
  display: table-cell;
  margin: 0;
  vertical-align: middle;
  text-align: left;
}
.st-kaiwa-area2 {
  display: table-cell;
  margin: 0;
  vertical-align: middle;
  text-align: right;
}
.st-kaiwa-hukidashi,
.st-kaiwa-hukidashi2 {
  display: inline-block;
  padding: 15px 20px;
  border-radius: 7px;
  position: relative;
  background-color: #f9f9f9;
  text-align: left;
}
.st-kaiwa-hukidashi {
  margin-left: 20px;
}
.st-kaiwa-hukidashi2 {
  margin-right: 20px;
}
.st-kaiwa-hukidashi p:last-child,
.st-kaiwa-hukidashi2 p:last-child {
  margin-bottom: 0;
}
/* 吹き出しの三角(アイコン側に向ける) */
.st-kaiwa-hukidashi::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  margin-top: -10px;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #f9f9f9 transparent transparent;
}
.st-kaiwa-hukidashi2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -10px;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #f9f9f9;
}

/************************************
** ヒーロー画像・関連記事サムネ・フッター調整(2026-08-08追加)
************************************/

/* ---- ヒーロー画像 ----
** 旧テーマのヘッダー画像(mikankatyou_top_pc_1250.jpg / 1250x393 / 82KB)を
** そのまま使う。この画像には「みかん課長の脱サラ投資日記」というタイトルと
** キャッチコピーが既に描き込まれているため、Cocoonが出力するテキストの
** タイトル・キャッチフレーズと重複してしまう。
** そこでテキスト側は「HTMLには残したまま視覚的にだけ隠す」方式にする
** (完全にdisplay:noneにするとSEO・アクセシビリティ上の情報が失われるため)。
**
** 靴バカと違い暗いオーバーレイは掛けない。画像の文字を読ませるのが目的で、
** グレーがかると読みづらくなるため。
** 本番反映時はURLの /stg/ を外すこと。 */
#header-in {
  background-image: url('https://mikankatyou.com/wp-content/uploads/2018/10/mikankatyou_top_pc_1250.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  /* 画像の縦横比 1250:393 を保つ */
  aspect-ratio: 1250 / 393;
  padding: 0;
  /* 元画像が1250px幅しかないため、それを超えて引き伸ばすと解像度が足りず
     ぼやける。原寸を上限にして中央寄せし、広い画面では左右に余白を作る。
     モバイルではmax-widthが効かず画面幅まで縮むだけなので問題ない。 */
  width: 100%;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}
/* タイトル・キャッチフレーズは画像内に描かれているので視覚的にだけ隠す。
   スクリーンリーダーと検索エンジンには従来どおり読まれる */
/* キャッチフレーズは画像内に描かれているので視覚的にだけ隠す */
#header-in .tagline {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* サイト名(h1.logo)は消さずに、リンクをヘッダー画像全面に広げて
   「画像をクリックするとトップに戻る」動線にする。
   文字自体は text-indent で画面外へ送るので見た目には出ない。 */
#header-in {
  position: relative;
}
#header-in .logo,
#header-in .logo-text {
  position: static;
  margin: 0;
  padding: 0;
  line-height: 0;
}
#header-in .logo a,
#header-in .logo-text a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  z-index: 2;
}

/* ---- 関連記事・前後記事のサムネイル ----
** Cocoon標準は元画像の比率のままで横広に見えるため、
** 靴バカと同じ 5:4 に統一してトリミング表示する */
/* Cocoon本体は .related-entry-card-thumb に width:160px を指定した上で
   float でレイアウトしている。ここに aspect-ratio を足すと高さが
   コンテナ基準で決まってしまい、カード全体のレイアウトが崩れる。
   そこで比率は「中の img」側に持たせ、コンテナの幅指定には触らない。 */
/* 前後記事ナビ(.prev-post-thumb/.next-post-thumb)は Cocoon本体に幅指定が無く、
   比率を強制するとレイアウトが崩れたため対象から外し、標準のままにしている。 */
.related-entry-card-thumb img,
.blogcard-thumbnail img {
  aspect-ratio: 5 / 4;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ---- フッター(靴バカと同じく中央寄せ) ----
** Cocoon本体のデフォルトは「ロゴ左固定・メニュー右寄せ」 */
.footer-bottom-logo {
  float: none;
  position: static;
  text-align: center;
  margin-bottom: 12px;
}
.footer-bottom-content {
  float: none;
  text-align: center;
}
.navi-footer-in > .menu-footer {
  justify-content: center;
}

/* ---- サイドバー「こんな記事も読まれています」(旧AFFINGERの任意エントリの再現) ---- */
.widget_mk_picked .mk-picked-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget_mk_picked .mk-picked-item {
  border-bottom: 1px solid #eee;
}
.widget_mk_picked .mk-picked-item:last-child {
  border-bottom: none;
}
.widget_mk_picked .mk-picked-item a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  text-decoration: none;
  position: relative;
}
/* 順位バッジ。旧テーマはサムネ左上に数字を重ねていたので同じ見せ方にする */
.widget_mk_picked .mk-picked-rank {
  position: absolute;
  left: 0;
  top: 10px;
  z-index: 2;
  background: #f0a500;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 4px 8px;
}
/* サイドバーの実効幅は376px - padding19px×2 = 338px。
   サムネ120px + gap10px を引いた208pxがタイトル欄に残る計算で、
   1行あたり13文字前後・3行までなら収まる。 */
.widget_mk_picked .mk-picked-thumb {
  flex: 0 0 120px;
}
.widget_mk_picked .mk-picked-thumb img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  display: block;
}
.widget_mk_picked .mk-picked-title {
  flex: 1;
  font-size: 0.92em;
  line-height: 1.55;
  min-width: 0;
}