@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){
  /*必要ならばここにコードを書く*/
}


/* ===== ここから下は自動で入れ替えます（手で編集しない） ===== */

/* 「海外の反応」記事の見た目。
 *
 * WordPress には本文の HTML しか送られないので、このスタイルが無いと
 * 訳も原文も同じ見た目でベタっと並ぶ。**テーマのカスタムCSS欄に貼る。**
 * Cocoon なら「Cocoon設定 > カスタムCSS」。
 *
 * 全部 `.kaigai` の中だけに効かせてある。テーマ側の見出しや footer を
 * 巻き込まないため——記事の中にも <footer>（引用元）があるので、
 * 素の要素セレクタで書くとテーマのフッターまで変わってしまう。
 * このスコープのおかげでテーマを乗り換えてもそのまま使える。
 */

/* **端末のダークモードで文字色を反転させてはいけない。**
 *
 * ここには以前 `@media (prefers-color-scheme:dark)` があって、訳文を
 * #e8ebf2（ほぼ白）に切り替えていた。**ところが背景を持っているのは
 * テーマのほうで、Cocoon は端末が暗くても白いままだった。** 実測で、
 * スマホの表示は文字 rgb(232,235,242) / 背景 rgb(255,255,255)、
 * コントラスト比 1.1:1——白地に白で、訳が読めない状態だった。
 *
 * 背景を決めているのが自分でない以上、文字色だけを反転する判断はできない。
 * **テーマが暗くなったら、そのときはテーマ側の色に任せる。**
 * 記事側は常に濃い文字で通す。
 */
.kaigai{
  --k-fg:#1c1f26; --k-sub:#5c6470; --k-card:#fff; --k-line:#e6e8ef;
  --k-quote:#4e7a24; --k-head:#2f6fb5; --k-accent:#d94f4f;
  color:var(--k-fg); line-height:1.8;
}

/* ---------- 冒頭 ---------- */
/* 作品の権利表記。**画像1枚ずつではなく記事の頭に1回だけ出す。**
   figcaption に「出典：(C)…」を付けていたが、他作品のリアクション画像や
   実写にも同じ文が付いて出典として嘘になっていた */
.kaigai .credit{
  color:var(--k-sub);font-size:.8rem;line-height:1.7;
  margin:0 0 20px;padding:10px 12px;
  background:var(--k-card);border:1px solid var(--k-line);border-radius:6px;
}
.kaigai .meta{color:var(--k-sub);font-size:.85rem;margin:0 0 24px}
.kaigai .lead,
.kaigai .summary{
  background:var(--k-card);border:1px solid var(--k-line);
  border-radius:10px;padding:14px 16px;margin:16px 0 28px;
}
.kaigai .summary .t{font-weight:700;margin-bottom:6px}

/* ---------- 節の見出し（4chan / Reddit） ---------- */
.kaigai h2{
  font-size:1.2rem;margin:48px 0 16px;padding:10px 14px;border-radius:8px;
  background:var(--k-card);border-left:6px solid var(--k-accent);
}

/* ---------- コメント1件 ---------- */
.kaigai .c{border-bottom:1px solid var(--k-line);padding:16px 2px}
.kaigai .c .h{color:var(--k-head);font-size:.82rem;font-weight:700;margin-bottom:6px}
/* **訳は太字。** 原文を小さく薄くしたので、太さでもう一段差を付ける。
 * 読者が読むのは訳のほうで、原文は「元はこう書いてあった」を確かめる添え物 */
.kaigai .c .ja{margin:0 0 6px;font-weight:700}
/* グリーンテキスト（4chan の引用行）。ここが緑でないと引用と本文が混ざる */
.kaigai .c .q{color:var(--k-quote)}
/* 引用先へのページ内リンク */
.kaigai .c .a{margin:0 0 6px;font-size:.85rem}
.kaigai .c .a a{color:var(--k-sub);text-decoration:none}
.kaigai .c .a a:hover{text-decoration:underline}
/* **段下げされたものには出さない。** 返信が親の真下に置かれるように
 * なったので、`>>20` は真上のコメントを指すだけの飾りになった。
 * **段下げされていないものには残す**——親が記事に載らなかった回や、
 * 別の群に入った回は、これだけが辿る手がかりになる（実測で、この記事は
 * アンカー13件のうち12件が段下げ済み、残り1件は親が別の群にいた） */
.kaigai .c[data-depth] .a{display:none}
/* 原文。訳と見分けが付くよう、小さめのグレーの等幅にする。
 *
 * **訳より一段落として詰める。** 読者が読むのは訳のほうで、原文は
 * 「元はこう書いてあった」を確かめるための添え物。同じ重さで置くと、
 * 1件あたりの縦が倍になって記事が間延びする。等幅は行が伸びやすいので、
 * 字の大きさだけでなく行間も詰める */
.kaigai .c .en{
  margin:0;color:var(--k-sub);font-size:.72rem;line-height:1.45;
  font-family:Consolas,"Courier New",monospace;word-break:break-word;
}
.kaigai .c .n{margin:8px 0 0;font-size:.82rem;color:var(--k-sub)}

/* ---------- 本編のスクショ ---------- */
.kaigai figure{margin:20px 0}
.kaigai figure img{width:100%;height:auto;border-radius:8px;display:block}
.kaigai figcaption{color:var(--k-sub);font-size:.75rem;margin-top:4px}

/* ---------- 管理人のひとこと ---------- */
.kaigai .talk{
  display:flex;gap:10px;align-items:flex-start;margin:20px 0;
  background:var(--k-card);border:1px solid var(--k-line);
  border-radius:10px;padding:12px 14px;
}
.kaigai .talk .who{font-weight:700;font-size:.8rem;white-space:nowrap;color:var(--k-accent)}

/* ---------- 引用元 ---------- */
.kaigai footer{
  margin-top:56px;padding-top:20px;border-top:1px solid var(--k-line);
  color:var(--k-sub);font-size:.85rem;background:none;
}
.kaigai footer a{color:var(--k-head)}
.kaigai footer ul{padding-left:1.2em}

/* ---------- 広告・アフィリ ---------- */
/* ---------- 同じ回の動画 ---------- */
/* **iframe を使わない代わりの見た目。** サムネイル1枚とリンクで、
 * 埋め込みプレイヤーに見えるところまで持っていく。読み込むのは画像1枚だけ */
.kaigai .yt{margin:28px 0}
.kaigai .yt-link{
  display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;
  background:var(--k-card);border:1px solid var(--k-line);border-radius:10px;
  padding:10px;
}
.kaigai .yt-link:hover{border-color:var(--k-head)}
.kaigai .yt-thumb{position:relative;flex:0 0 160px;line-height:0}
.kaigai .yt-thumb img{width:100%;height:auto;border-radius:6px;display:block}
/* 再生ボタン。画像を足さずに三角だけ置く */
.kaigai .yt-thumb::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 16px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.6));
}
.kaigai .yt-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.kaigai .yt-label{font-size:.78rem;color:var(--k-accent);font-weight:700}
.kaigai .yt-title{font-size:.9rem;line-height:1.5;font-weight:700}
.kaigai .yt-ch{margin:6px 0 0;font-size:.78rem}
.kaigai .yt-ch a{color:var(--k-sub)}
@media (max-width:600px){
  .kaigai .yt-thumb{flex-basis:112px}
  .kaigai .yt-title{font-size:.85rem}
}

.kaigai .ad-slot{margin:28px 0}
.kaigai .aff-box{
  margin:32px 0;padding:14px 16px;background:var(--k-card);
  border:1px solid var(--k-line);border-radius:10px;
}

/* ---------- スマホ ---------- */
@media (max-width:600px){
  .kaigai h2{font-size:1.1rem;margin:36px 0 12px}
  .kaigai .c{padding:14px 0}
  .kaigai .c .en{font-size:.7rem}
}


/* テーマ側の見た目。**記事の CSS（article.css）とは別に持つ。**
 *
 * 子テーマの style.css には、この2つをつないだものを送る。
 * 以前は `work/追加CSS_貼り付け用.css` が article.css を**複製して**
 * 持っていて、article.css を直しても push に載らなかった
 * （実測で、原文を小さくした変更が「変わっていないので送りません」と
 * 弾かれた）。**複製をやめて、push のときに組み立てる。**
 *
 * ここに入るのは、記事ではなくサイト全体に効くもの——ヘッダーのバナー、
 * ナビの帯、メニューのアイコン、スマホのメニューとフッター。
 */

/* ==================================================================
   ここから下はサイトに元から入っていたヘッダーの分。
   **記事用のCSSだけで置き換えるとバナーが崩れる**ので残してある
   ================================================================== */

.logo-header .site-name-text-link { display: block; }

.logo-header .site-name-text {
  display: block;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 1600 / 500;
  background: url("https://anime-no-umi.com/wp-content/uploads/2026/09/header.jpg")
              center / cover no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

.tagline { display: none; }
#header-in { padding: 0; }
.logo-header { margin: 0; padding: 0; }

/* ===== スクロールしたら、ナビの帯だけを画面上に残す =====
 *
 * バナーは流れて消え、リンクの帯だけが上に張り付く。
 *
 * **`#navi` に sticky を当てるだけでは効かない。** sticky は親の箱の中でしか
 * 止まらず、`#navi` の親（`#header-container-in`）はバナーと一緒に画面外へ
 * 出ていくので、ナビもそのまま流れてしまう。実測で確認した。
 *
 * そこで**親の箱を2つとも `display:contents` で畳んで**、`#navi` を
 * ページ全体を親にする。これで最後まで張り付く。
 * 適用の前後でヘッダー・本文・サイドバーの位置と大きさが1pxも変わらないことは
 * 実測で確かめてある（テーマの設定は触らなくてよい）。
 *
 * **背景を自分で持たせる。** 親を畳むと `.header-container` の白背景が
 * 消えるので、帯の下に記事が透ける。
 *
 * スマホでは効かない——Cocoon がモバイルでヘッダーのリンクを出さないので、
 * `#navi` の高さが 0 になる（実測 375px 幅で 0px）。貼り付ける帯そのものが無い。
 */
#header-container,
#header-container-in{ display: contents; }

#navi{
  position: sticky;
  top: 0;
  z-index: 99;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ===== メニューの一覧ではアイコンを出さない =====
 *
 * アイコンは**モバイルのボタン帯のために**メニュー項目に付けてある
 * （付けないと Cocoon が既定の ★ を出す）。ところが Cocoon は同じ
 * CSS クラスを PC 用メニューの `li 要素` にも付けるので、Font Awesome の
 * `::before` が `a 要素` の上の行に乗ってしまう——アイコンが文字の上に
 * 別行で出て、ラベルが押し出されて切れる。
 *
 * ボタン帯のほうは `span.fa.fa-home` を別に組み立てているので、
 * ここで消してもそちらは消えない。
 */
.navi-in .menu-pc li::before,
.navi-footer li::before,
.slicknav_nav li::before{ content: none; }

.navi-in .menu-pc li,
.navi-footer li,
.slicknav_nav li{ font-family: inherit; }

/* ===== スマホのトップメニュー（SlickNav） =====
 *
 * **矢印の当たり判定を広げる。** 素のままだと 44×11px しかなく、
 * 指で押すには低すぎる（実測）。上下に余白を足し、同じぶん負のマージンで
 * 引き戻すので、見た目の行の高さは変わらない。44×35px になる。
 *
 * **ハンバーガーを画面上に残す。** `.slicknav_menu` は body の直下に
 * 置かれるので、そのまま sticky が効く（`#navi` の中には無いので、
 * PC用の追従指定では届かない）。閉じているとき54px、開くと一覧ぶん伸びる。
 *
 * なお親の「2026年夏アニメ」を押すと下位は開かず、カテゴリーページへ飛ぶ。
 * SlickNav はリンクと開閉ボタンを分けている——**開きたいときは矢印**。
 */
/* **下位メニューを最初から開いておく。**
 *
 * SlickNav は親の文字を押すとリンク先へ飛び、矢印を押したときだけ開く。
 * その矢印が素のままだと 44x11px しかなく、指では狙いにくい（実測）。
 * **そもそも開閉させる必要が無い**——作品は2つで、全部出しても168px。
 * 開く操作を1つ減らすほうが、押し間違いも減る。
 *
 * JS が inline style で display:none を書くので `!important` が要る。
 * 開きっぱなしにするなら矢印は邪魔なので消す。
 */
.slicknav_nav li ul{ display: block !important; }
.slicknav_nav .slicknav_arrow{ display: none; }

/* **背景を指定しないこと。** テーマが `#4c4c4c`（濃いグレー）を敷いていて、
 * 文字は白。ここに白い背景を足すと**白地に白**になり、メニューが空に見える。
 * 実測でそうなった。もともと不透明なので、固定しても記事は透けない */
.slicknav_menu{
  position: sticky;
  top: 0;
  z-index: 99;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ===== スマホのフッターメニュー =====
 *
 * テーマは項目を**均等幅**（1023px以下で 32%、実測では176px）にするので、
 * 5項目が 2＋2＋1 に割れて、最後の「プライバシーポリシー」だけ全幅になる。
 * 左端に寄って不揃いに見えた。
 *
 * 文字幅ぶんだけ取らせて中央に寄せる。実測で高さが54px→32pxに縮んだ。
 *
 * **テーマ側は `.navi-footer-in > .menu-footer li.menu-item`（クラス3つ）で
 * 幅を決めている。** 同じ強さで書かないと勝てない——`.navi-footer li` では
 * 効かなかった。
 */
@media screen and (max-width: 1023px){
  .navi-footer-in > .menu-footer{ justify-content: center; }

  .navi-footer-in > .menu-footer li.menu-item{
    width: auto;
    flex: 0 0 auto;
    margin: 1px 0;
  }

  .navi-footer-in > .menu-footer li.menu-item a{
    width: auto;
    padding: 7px 11px;
    display: block;
  }
}

/* ===== 自動で入れ替えるのはここまで ===== */