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

/************************************
** はちどりの巣 — トンマナ
**
** このファイルはリポジトリが原本で、scripts/setup-dev-site.sh が子テーマへ写す。
** WordPress 側で直接編集すると次に流したときに消える。直すならリポジトリ側。
**
** 上のテーマヘッダは消さないこと。WordPress は Template: の行で親テーマを引くので、
** 消すと子テーマとして認識されなくなる。
************************************/

/************************************
** 基準色
**
** 濃紺・ティール・補助文字の3色は app/.../domain/EyecatchImage.kt と同じ値。
** アイキャッチは記事と一緒に WordPress へ上がり、記事一覧でサイトの地と隣り合う。
** 別々に決めるとその場で色がぶつかるので、片方を写した。
** **EyecatchImage.kt の色を変えたらここも変える。**
************************************/
:root {
  /* アイキャッチと同値 */
  --hns-ink: #0F1C2E;         /* 濃紺。EyecatchImage の BACKGROUND */
  --hns-ink-soft: #16293F;    /* 同 BACKGROUND_ACCENT */
  --hns-accent: #4ECDC4;      /* ティール。同 ACCENT */
  --hns-muted: #9FB3C8;       /* 同 SUB_COLOR。**濃紺の地の上でだけ使う** */

  /* サイト側だけで使う色 */
  --hns-paper: #FFFFFF;
  --hns-paper-tint: #F4F7F9;  /* 地。カードや囲みの背景 */
  --hns-border: #DCE3E9;
  --hns-text: #1F2933;        /* 本文。純黒にしないのは長文で目が疲れるため */

  /* ティールは白地に対して 1.9:1 しかなく、文字色に使うと読めない。
     文字に使う濃さを別に持つ（#0E7C74 は白地に対しておよそ 4.9:1 で WCAG AA を満たす）。
     **リンクや文字に --hns-accent を直接使わないこと。** 装飾（帯・下線・ボタンの地）専用。 */
  --hns-accent-ink: #0E7C74;

  /* 白地の上に置く補助文字（日付・抜粋・注記）。
     **--hns-muted をここに使わないこと。** あれは濃紺の地の上で成立する色で、
     白地に対しては約 2.15:1 しかなく、WCAG AA（4.5:1）に遠く届かない。
     地の明るさで色を使い分ける。 */
  --hns-muted-ink: #55636F;

  /* 字送りと余白。読者を初心者層に置いたので、詰めるより緩める方に倒してある
     （docs/working/フェーズS-サイト基盤/要件定義.md の「読者トーン」） */
  --hns-body-size: 17px;
  --hns-line-height: 1.9;
  --hns-para-gap: 1.6em;
  --hns-block-gap: 2.4rem;
}

/************************************
** 本文
************************************/
body {
  color: var(--hns-text);
  background-color: var(--hns-paper-tint);
}

.entry-content,
.article {
  font-size: var(--hns-body-size);
  line-height: var(--hns-line-height);
}

.entry-content p {
  margin-bottom: var(--hns-para-gap);
}

/* 箇条書きは手順を並べる場所なので、本文より更に緩める。
   自宅サーバーの手順記事は「上から順にやる」形が中心になる */
.entry-content ul li,
.entry-content ol li {
  margin-bottom: 0.7em;
}

/************************************
** 見出し
**
** 濃紺を「面」ではなく差し色に使う。全面を濃紺にすると硬派に寄りすぎ、
** 読者を初心者層に置いた判断と合わなくなる。
************************************/
.entry-content h2 {
  color: var(--hns-ink);
  background-color: var(--hns-paper-tint);
  border-left: 6px solid var(--hns-accent);
  border-bottom: none;
  padding: 0.6em 0.8em;
  margin-top: var(--hns-block-gap);
}

.entry-content h3 {
  color: var(--hns-ink);
  border-bottom: 2px solid var(--hns-border);
  padding-bottom: 0.4em;
  margin-top: var(--hns-block-gap);
}

.entry-content h4 {
  color: var(--hns-ink-soft);
  border: none;
  padding-left: 0;
}

/************************************
** リンク
**
** 色だけで区別しない（色覚特性のある読者に伝わらないため）。下線を必ず残す。
************************************/
.entry-content a {
  color: var(--hns-accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.entry-content a:hover {
  color: var(--hns-ink);
}

/* 内部リンクのカード（集客の島 → 収益の島 の導線。競合調査で最優先とした機能）。
   本文の中で「別の記事へ渡す場所」だと分かるよう、地と枠で本文から浮かせる */
.entry-content .blogcard-wrap {
  background-color: var(--hns-paper);
  border: 1px solid var(--hns-border);
  border-left: 4px solid var(--hns-accent);
}

/************************************
** ヘッダーとフッター
************************************/
.header-container,
.navi {
  background-color: var(--hns-ink);
  color: var(--hns-paper);
}

.header-container a,
.navi a {
  color: var(--hns-paper);
}

.navi-in > ul > li > a:hover {
  background-color: var(--hns-ink-soft);
}

.site-name-text {
  color: var(--hns-paper);
}

.tagline {
  color: var(--hns-muted);
}

.footer {
  background-color: var(--hns-ink);
  color: var(--hns-muted);
}

.footer a {
  color: var(--hns-paper);
}

/************************************
** 記事一覧のカード
**
** アイキャッチが濃紺なので、カードの地は白のまま、境界を薄く保つ。
** カードにも濃紺を敷くとアイキャッチとの境目が消えて何枚あるか分からなくなる。
************************************/
.entry-card-wrap,
.related-entry-card-wrap {
  background-color: var(--hns-paper);
  border: 1px solid var(--hns-border);
}

.entry-card-title,
.related-entry-card-title {
  color: var(--hns-ink);
}

.entry-card-snippet,
.related-entry-card-snippet {
  color: var(--hns-muted-ink);
}

/* **アイキャッチに重ねるカテゴリラベルは出さない。**
   このサイトのアイキャッチは EyecatchCategory.kt がカテゴリ名を画像に焼いているので、
   Cocoon が上に重ねると同じ文字が2つ重なって見える（狭い画面で特にぶつかる）。
   画像を持たない記事のために色だけは残しておく。 */
.cat-label {
  background-color: var(--hns-ink);
  border-color: var(--hns-ink);
  color: var(--hns-paper);
}

.eye-catch .cat-label,
.entry-card-thumb .cat-label,
.related-entry-card-thumb .cat-label {
  display: none;
}

/************************************
** ボタン
**
** ティールを地に、文字を濃紺にする。ティールの上に白文字を置くと読めない
** （--hns-accent の注記と同じ理由）。
************************************/
.entry-content .btn,
.entry-content .btn-wrap > a {
  background-color: var(--hns-accent);
  color: var(--hns-ink);
  border: none;
  font-weight: bold;
}

.entry-content .btn:hover,
.entry-content .btn-wrap > a:hover {
  background-color: var(--hns-ink);
  color: var(--hns-paper);
}

/************************************
** 広告表記
**
** article-pipeline が本文の冒頭に機械挿入する `<p class="ad-disclosure">`。
** class 名は AdDisclosure.kt が決めていて、あちらのコメントが「大きさ・色はテーマの
** CSS が決める」と書いている。ここがその受け側。**class 名を変えるなら両方を変える。**
**
** 読者に伝わることが目的なので、目立たなくしない。薄いグレーにして
** 「読み飛ばしてよい注記」に見せるのは、広告表記を置いた理由に反する。
************************************/
.entry-content .ad-disclosure {
  background-color: var(--hns-paper-tint);
  border: 1px solid var(--hns-border);
  padding: 0.7em 1em;
  margin-bottom: var(--hns-para-gap);
  font-size: 0.95em;
  color: var(--hns-text);
}

/************************************
** 記事の冒頭の並び
**
** Cocoon は header.article-header の中に 題名 → アイキャッチ → 日付 の順で出す。
** 読者が見慣れているのは 題名 → 日付 → アイキャッチ で、日付が題名のすぐ下に付く形。
** いまの並びだと、日付がアイキャッチの後ろに小さく右寄せで現れて、
** 「いつ書かれた記事か」を探しに行くことになる。
**
** **3つとも同じ親の兄弟なので、flex にして order で入れ替えられる。**
** テンプレートを子テーマに置いて上書きする手もあるが、それは PHP を WordPress の中に
** 置くことになり、このプロジェクトの制約に触れる（要件定義の「制約」を参照）。
**
** パンくずはここには入らない。Cocoon の設定 single_breadcrumbs_position=main_top が
** article-header より前に出しているので、CSS で動かす必要が無い。
************************************/
.article-header {
  display: flex;
  flex-direction: column;
}

.article-header .entry-title    { order: 1; }
.article-header .date-tags      { order: 2; }
.article-header .eye-catch-wrap { order: 3; }

/************************************
** 記事の題名
**
** **題名が本文中の見出しより小さかった。** しかも同じ題名がアイキャッチにも焼かれていて
** そちらの方が何倍も大きく、同じ文字列が2回、大きさが逆転して出ていた。
**
** 記事のいちばん上の階層なので、本文の h2 より確実に大きくする。
** 行間を詰めているのは、長い題名が2〜3行になったときに間延びさせないため
** （このサイトの題名は「MAP-E回線でポート開放できない時のMinecraftサーバー公開術」のように長い）。
************************************/
.entry-title {
  font-size: 1.9rem;
  line-height: 1.45;
  color: var(--hns-ink);
  margin-bottom: 0.5em;
}

/* 日付は題名の直下に置く。既定の右寄せだと、題名との結び付きが見えない */
.article-header .date-tags {
  text-align: left;
  margin-bottom: 1.6em;
  color: var(--hns-muted-ink);
}

/************************************
** シェアボタン
**
** 色と表示位置は Cocoon の設定で決めてある（setup-dev-site.sh の
** sns_bottom_share_button_color=brand_color_white）。**ここで色を上書きしない。**
** CSS が受け持つのは、Cocoon が設定項目を持っていない形（角の丸み）だけ。
************************************/
.sns-share .sns-buttons a.sns-button,
.sns-follow .sns-buttons a.sns-button {
  border-radius: 999px;
}

/************************************
** 面の作り（角丸と影）
**
** 参照サイト（digital-style.jp）が「モダン」に見える要素のうち、配色を除いた部分は
** ほぼこれ。**面が地から浮いていて、角が丸い。**
**
** 影は薄く1段だけにする。濃い影や多段の影を当てると、読者を初心者層に置いた判断
** （硬派に寄せない）に対して装飾が勝ちすぎる。
************************************/
:root {
  --hns-radius: 10px;
  --hns-shadow: 0 1px 3px rgba(15, 28, 46, 0.06), 0 4px 12px rgba(15, 28, 46, 0.05);
}

.entry-card-wrap,
.related-entry-card-wrap,
.widget-sidebar-standard,
.entry-content .blogcard-wrap,
.entry-content .ad-disclosure {
  border-radius: var(--hns-radius);
}

.entry-card-wrap,
.related-entry-card-wrap,
.widget-sidebar-standard {
  box-shadow: var(--hns-shadow);
}

/* カードの中のアイキャッチは、カードの角に合わせて上側だけ丸める。
   丸めないと、四角い画像が丸い枠からはみ出して見える */
.entry-card-thumb img,
.related-entry-card-thumb img {
  border-top-left-radius: var(--hns-radius);
  border-top-right-radius: var(--hns-radius);
}

/************************************
** 商品のカードと箱書き
**
** どちらも `ItemLinkInserter` が本文に差し込む HTML（`ItemCard` / `ItemSpecBox`）。
** **モデルが書く囲み（`ArticleBox`）とはクラスを分けてある**ので、囲みの見た目を
** 触ってもここは動かない（逆も同じ）。
**
** 読む順は「箱書き（スペックと推奨構成）→ カード（画像・名前・価格・ボタン）」。
** 推奨構成を読んだ直後に価格が目に入る並びにしている。
************************************/

/* **枠と余白を幅に含める。** Cocoon 側の指定に頼らず、この節だけで閉じる。
   含めないと `width: 100%` のボタンが padding のぶんカードからはみ出す
   （375px 幅で実測して踏んだ）。 */
.entry-content .hns-item-specs,
.entry-content .hns-item-card,
.entry-content .hns-item-card-thumb,
.entry-content .hns-item-card-body,
.entry-content .hns-item-card-button {
  box-sizing: border-box;
}

/* 箱書き。**面の作り（地・枠・角丸）は既存の節に揃える。** */
.entry-content .hns-item-specs {
  background-color: var(--hns-paper-tint);
  border: 1px solid var(--hns-border);
  border-radius: var(--hns-radius);
  padding: 1.1em 1.3em;
  margin-bottom: 1rem;
}

/* 項目名と値を 2 列に。**項目名の幅は中身なりで、値が残りを取る。** */
.entry-content .hns-item-specs dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4em 1.2em;
  margin: 0;
}

.entry-content .hns-item-specs dt {
  font-weight: 700;
  color: var(--hns-ink);
}

.entry-content .hns-item-specs dd {
  margin: 0;
  min-width: 0;
}

/* スペックが変わりうることの断り。**価格の「◯◯時点」と同じ弱さで置く** ──
   読む必要はあるが、スペックそのものより先に目に入ってはいけない。 */
.entry-content .hns-item-specs-note {
  margin: 0.9em 0 0;
  font-size: 0.85em;
  line-height: 1.6;
  color: var(--hns-muted-ink);
}

/* 推奨構成。値そのものが「メモリ 32GB の構成を選ぶ」という文なので、前置きは付けない。 */
.entry-content .hns-item-specs-config {
  margin: 0.9em 0 0;
  font-weight: 700;
  color: var(--hns-ink);
}

/* カード本体。画像を左、テキストとボタンを右の 2 段組み。 */
.entry-content .hns-item-card {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  background-color: var(--hns-paper);
  border: 1px solid var(--hns-border);
  border-radius: var(--hns-radius);
  padding: 1.2em;
}

/* 画像の枠。**楽天 API の mediumImageUrl は 128×128 で、これより大きい画像は取れない**
   （Cocoon のマニュアルに「L サイズはありません」とある）。128px を前提に組む。
   **商品コードが規則に合わない商品ではこの枠ごと出ない**ので、そのときは本体が全幅を取る。 */
.entry-content .hns-item-card-thumb {
  flex: 0 0 128px;
}

.entry-content .hns-item-card-thumb a {
  text-decoration: none;
}

/* `img` が持つ width="128" 属性より CSS を優先させる。
   ただし 128px より大きく引き伸ばさない（引き伸ばすとぼやける）。 */
.entry-content .hns-item-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 128px;
  border-radius: calc(var(--hns-radius) - 4px);
}

/* **楽天 API から商品を引けなかったときの枠を、読者に見せない。**

   Cocoon は取得に失敗すると `product-item-error` の枠を出し、その中に
   **商品コードをそのまま検索語にした楽天の検索 URL** へのリンクを張る
   （`search.rakuten.co.jp/search/mall/<ショップ>%3A<番号>/`）。
   要件定義は失敗時の見え方を「画像だけ出ない」と想定し、「エラーの文言は管理者にしか
   見えない」ことを根拠に受け入れると決めていたが、**実測すると文言は出ないものの
   枠と検索リンクは読者にも出て、商品コードが露出していた**（2026-08-27、本番で確認）。

   検索へ送るのは、要件定義が「読者が別の商品に着くことがある」として却下した導線でもある。
   **枠ごと隠して「画像だけ出ない」に落とす。** カードの残り（商品名・価格・購入ボタン）は
   DB の値で組むので、何の商品でいくらでどこへ行けるかは変わらず伝わる。

   **PHP は足さない。** `cocoon_rakuten_api_request_args` のようなフィルタで直す手もあるが、
   「WordPress の中に PHP を置かない」既存の制約に触れる。CSS で閉じる。

   `:has()` に対応しない古いブラウザでは枠だけが消え、128px の空きが残る
   （読者に見えるのは余白だけで、コードは出ない）。 */
.entry-content .hns-item-card-thumb .product-item-error {
  display: none;
}

.entry-content .hns-item-card-thumb:has(.product-item-error) {
  display: none;
}

/* **`min-width: 0` が要る。** 入れないと flex の子が中身の幅より縮まず、
   長い商品名のときに狭い画面で横スクロールが出る。 */
.entry-content .hns-item-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.entry-content .hns-item-card-name {
  margin: 0;
  font-weight: 700;
  color: var(--hns-ink);
  line-height: 1.5;
}

.entry-content .hns-item-card-price {
  margin: 0.5em 0 0;
  color: var(--hns-ink);
}

/* 「◯◯時点」。**この仕組みは公開後の価格を追わない**ので、いつ時点の値かを必ず添える。 */
.entry-content .hns-item-card-asof {
  margin-left: 0.4em;
  font-size: 0.85em;
  color: var(--hns-muted-ink);
}

.entry-content .hns-item-card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.9em 0 0;
}

/* 購入ボタン。
   **`.entry-content a` の下線と色をここで打ち消す。** 「リンクは色だけで区別せず
   下線を残す」の規律は地の文のリンクの話で、**塗りつぶした矩形で押せると分かる**
   ボタンには当てはまらない。
   **既存の `.entry-content .btn` とは別のクラスにしてある**ので、あちらの規則は壊れない。 */
.entry-content .hns-item-card-button {
  display: inline-block;
  padding: 0.55em 1.2em;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
}

.entry-content .hns-item-card-button:hover {
  opacity: 0.88;
  text-decoration: none;
}

/* **ブランドの色。これはサイトのトンマナ（濃紺・ティール）から意図的に外す判断。**
   購入ボタンは「どこの店へ行くか」を色で伝えるのが役目で、参照サイトも色分けしている。
   **基準色（`--hns-*`）とは別に置く**のは、トンマナを変えてもここは動かないため。
   コントラスト比は楽天がおよそ 6.5:1、Amazon がおよそ 6.3:1 で、どちらも WCAG AA
   （4.5:1）を満たす。 */
:root {
  --hns-rakuten: #bf0000;
  --hns-rakuten-ink: #ffffff;
  --hns-amazon: #ff9900;
  --hns-amazon-ink: #232f3e;
}

.entry-content .hns-item-card-button-rakuten,
.entry-content .hns-item-card-button-rakuten:hover {
  background-color: var(--hns-rakuten);
  color: var(--hns-rakuten-ink);
}

.entry-content .hns-item-card-button-amazon,
.entry-content .hns-item-card-button-amazon:hover {
  background-color: var(--hns-amazon);
  color: var(--hns-amazon-ink);
}

/************************************
** サイドバー
**
** 見出しの地が薄いグレー（Cocoon の既定）のままで、濃紺もティールも使われていなかった。
** サイトの配色が本文とヘッダーにしか効いておらず、**サイドバーだけ別のサイトに見えていた。**
**
** 見出しは濃紺の文字＋ティールの下線にする。地を濃紺で塗らないのは、
** 5つ並ぶと画面の右側が濃紺の帯だらけになり、本文より目立ってしまうため。
************************************/
.widget-sidebar-standard {
  background-color: var(--hns-paper);
  border: 1px solid var(--hns-border);
  padding: 1.2em 1.3em;
}

.widget-sidebar-standard .wp-block-heading,
.widget-sidebar-standard .widget-sidebar-title {
  color: var(--hns-ink);
  background-color: transparent;
  border: none;
  border-bottom: 3px solid var(--hns-accent);
  padding: 0 0 0.5em;
  margin: 0 0 0.9em;
  font-size: 1.05rem;
  font-weight: bold;
}

/* カテゴリの2段構成が見えるように、子カテゴリを字下げして細くする */
.widget-sidebar-standard .wp-block-categories-list li {
  margin-bottom: 0.4em;
}

.widget-sidebar-standard .wp-block-categories-list .children {
  margin-left: 1em;
  padding-left: 0.8em;
  border-left: 2px solid var(--hns-border);
}

/* **リンクは色だけで区別せず、下線を残す。** 本文と同じ規律をサイドバーにも当てる。
   最初は本文と同色＋下線なしで書いていて、**既定の状態でリンクだと分からなかった**
   （色でも形でも地の文と区別がつかない）。done-verifier が制約違反として指摘した。 */
.widget-sidebar-standard a,
.widget-sidebar-standard .wp-block-categories-list a,
.widget-sidebar-standard .wp-block-latest-posts a,
.widget-sidebar-standard .toc-list a {
  color: var(--hns-accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.widget-sidebar-standard a:hover {
  color: var(--hns-ink);
}

/************************************
** 運営者情報
**
** 読者が最初に知りたいのは「誰が書いているか」。名前を本文と同じ大きさで置くと、
** 自己紹介の文章に埋もれて誰の名前か分からなくなる。
**
** アイコン画像と SNS は依頼者から未提供。**枠だけ用意して後から差し替えられる形**にしてある
** （wordpress/widgets/widget_block.json の hns-profile-body に足す）。
************************************/
.hns-profile-name {
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--hns-ink);
  margin-bottom: 0.6em;
}

.hns-profile-body p {
  margin-bottom: 0.7em;
  font-size: 0.95rem;
  line-height: 1.8;
}

/************************************
** 本文の幅
**
** 1行が長いと、行の終わりから次の行の頭へ目を戻すときに迷子になる。
** 読者を初心者層に置いた判断（緩める方に倒す）と同じ方向。
************************************/
.entry-content {
  max-width: 46em;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  :root {
    /* 画面が狭いと 17px は1行の字数が減りすぎて、かえって読みにくくなる */
    --hns-body-size: 16px;
    --hns-block-gap: 1.8rem;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .entry-content h2 {
    padding: 0.5em 0.6em;
  }

  /* 画像を縮めて、テキストに幅を渡す。 */
  .entry-content .hns-item-card {
    gap: 0.9rem;
    padding: 1em;
  }

  .entry-content .hns-item-card-thumb {
    flex: 0 0 96px;
  }

  /* **ボタンを全幅で縦積みにする。** 375px 幅で 2 つ横に並べると、文言
     （「楽天市場で見る」「Amazon で見る」）が折り返して 1 行に収まらない。
     縦積みなら各ボタンが 1 行に収まる。 */
  .entry-content .hns-item-card-buttons {
    display: block;
  }

  .entry-content .hns-item-card-button {
    display: block;
    width: 100%;
  }

  .entry-content .hns-item-card-button + .hns-item-card-button {
    margin-top: 0.6rem;
  }

  /* 記事一覧のカードを画面いっぱいに広げる。
     Cocoon は縦型カードに width: 49.5% を当てていて（親テーマの style.css）、
     器は flex-wrap の2列。設定 smartphone_entry_card_1_column=1 は器に
     sp-entry-card-1-column を付けるが、カードの幅は 49.5% のまま残る。

     **確認済み。ただし撮り方に注意。**
     `google-chrome --headless --window-size=375,N` で直接撮ると、この 480px 以下の
     ブロックが効かない（ウィンドウ幅を 375 と指定してもビューポートが 480px より
     広くなる）。834px 以下のブロックは効くので気づきにくい。

     幅 375px の iframe に読み込ませて、その外側を撮ると本当のモバイル表示になる:

       <iframe src="http://localhost:8080/" style="width:375px;height:1200px"></iframe>

     この方法で、カードが1列で画面いっぱいに広がることを確認した。
     （切り分けは、このブロックに `body { background: red }` を入れて色が出るかで行った） */
  .list.ect-vertical-card .entry-card-wrap {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }
}