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

/************************************
** あの空の下 デザイン「白い紙に墨」 2026-09-23
** 仕様: 改善/DESIGN.md（awesome-design-md-jp 形式）
** 1つ前（夕暮れの本棚）に戻すとき: 改善/backups/child_style_css_current_2026-09-22.css
** 手を入れる前の素の状態: 改善/backups/child_style_css_backup_2026-09-21.css
**
** 決まりごと（DESIGN.md 7章）
**  - 角丸0・影なし・左の色付き縦罫なし・ピル型なし・ホバーで動かさない
**  - 見出しと書名は明朝、本文はゴシック
**  - 朱（--sr-accent）は文字と細線だけ。面は墨と白
************************************/

/* ============================================
   1. デザイントークン
   ============================================ */
:root {
  --sr-ink: #1f1d1a;
  --sr-ink-sub: #5f5b55;
  --sr-ink-faint: #8a857d;
  --sr-paper: #ffffff;
  --sr-paper-alt: #f6f5f2;
  --sr-rule: #e3e0da;
  --sr-rule-strong: #1f1d1a;
  --sr-accent: #a8401e;

  --sr-font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
    "游ゴシック Medium", YuGothic, "游ゴシック体", "Noto Sans JP", Meiryo, sans-serif;
  --sr-font-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho,
    "游明朝", "游明朝体", "BIZ UDPMincho", "Noto Serif JP", serif;
}

/* ============================================
   2. ベース
   ============================================ */
body {
  background-color: var(--sr-paper);
  color: var(--sr-ink);
  font-family: var(--sr-font-sans);
  line-height: 2;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

/* サイト幅はCocoonの既定（1256px = メイン860 + サイドバー376 + 余白）を変えない。
   ここを狭めるとサイドバーが下に回り込み、2カラムが崩れる。 */

#content.content {
  margin-top: 40px;
}

/* 面・枠・影をやめ、白い紙1枚にする */
.main,
.sidebar {
  background-color: var(--sr-paper);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.main {
  padding: 0 36px 48px;
}

.sidebar {
  padding: 0 0 32px 24px;
}

/* 本文リンク：墨＋下線。ホバーで朱 */
.entry-content a:not(.btn):not(.a-wrap):not([class*="yyi-rinker"]) {
  color: var(--sr-ink);
  text-decoration: underline;
  text-decoration-color: var(--sr-ink-faint);
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  transition: color .2s, text-decoration-color .2s;
}

.entry-content a:not(.btn):not(.a-wrap):not([class*="yyi-rinker"]):hover {
  color: var(--sr-accent);
  text-decoration-color: var(--sr-accent);
}

/* キーボード操作で今どこにいるか分かるようにする */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sr-accent);
  outline-offset: 2px;
}

/* ============================================
   3. ヘッダー
   ============================================ */
#header-container,
.header-container {
  background-color: var(--sr-paper);
  border-bottom: none;
}

#header .header-in,
#header-in {
  min-height: 0;
  height: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#header {
  padding: 0;
  background-color: var(--sr-paper);
}

.header-container-in.hlt-center-logo .logo,
#header .logo,
#header .logo-header {
  margin: 0;
  padding: 0;
  text-align: left;
}

.header-container-in.hlt-center-logo .header-in,
#header .header-in {
  max-width: 1256px;
  margin: 0 auto;
  padding: 26px 20px 18px;
  text-align: left;
}

.site-name-text,
.site-name a {
  font-family: var(--sr-font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--sr-ink);
  line-height: 1.3;
}

.site-name-text-link {
  display: inline-block;
  padding: 0;
  border: none;
  text-decoration: none;
}

.site-name-text-link:hover .site-name-text,
.site-name a:hover {
  color: var(--sr-ink);
  opacity: .75;
}

/* Cocoonはキャッチフレーズをサイト名より前に出力するので、orderで下へ回す */
.tagline {
  order: 2;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sr-ink-sub);
  text-align: left;
  letter-spacing: .06em;
}

.header-container-in.hlt-center-logo .tagline {
  text-align: left;
}

/* ============================================
   4. グローバルナビ
   上に薄罫、下に墨罫。現在地とホバーは朱の下線
   ============================================ */
#navi,
.navi {
  background-color: var(--sr-paper);
  border-top: 1px solid var(--sr-rule);
  border-bottom: 1px solid var(--sr-rule-strong);
  box-shadow: none;
}

#navi .navi-in > ul,
.navi-in > ul {
  max-width: 1256px;
  margin: 0 auto;
  justify-content: flex-start;
  padding: 0 8px;
}

#navi .navi-in > ul > li,
.navi-in > ul > li {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

#navi .navi-in > ul > li > a,
.navi-in > ul > li > a {
  width: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  padding: 0 12px;
  margin: 0 6px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--sr-ink);
  background: none;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}

#navi .navi-in > ul > li > a:hover,
.navi-in > ul > li > a:hover {
  color: var(--sr-accent);
  background: none;
  border-bottom-color: var(--sr-accent);
}

#navi .navi-in > ul > li.current-menu-item > a {
  color: var(--sr-accent);
  border-bottom-color: var(--sr-accent);
}

/* メニュー名の「…」を消す。
   省略しているのは a でも li でもなく、その中の .item-label に効いている
   overflow:hidden + text-overflow:ellipsis なので、そこを直接外す。 */
.navi-in > ul > li > a .caption-wrap,
.navi-in > ul > li > a .item-label,
#navi .item-label {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  max-width: none;
  width: auto;
}

/* ============================================
   5. パンくず
   ============================================ */
.breadcrumb {
  margin: 0 0 22px;
  padding: 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--sr-ink-sub);
}

.breadcrumb a {
  color: var(--sr-ink-sub);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--sr-accent);
  text-decoration: underline;
}

/* ============================================
   6. 記事一覧カード
   面・枠・影なし。目録の行のように薄罫で区切る
   ============================================ */
.entry-card-wrap,
.related-entry-card-wrap {
  border: none;
  border-bottom: 1px solid var(--sr-rule);
  border-radius: 0;
  padding: 22px 0;
  margin-bottom: 0;
  background: none;
  box-shadow: none;
  transition: none;
}

.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  background: none;
  border-color: var(--sr-rule);
  box-shadow: none;
}

.entry-card-thumb,
.related-entry-card-thumb {
  overflow: hidden;
  border-radius: 0;
}

.entry-card-thumb img,
.related-entry-card-thumb img,
.widget-entry-cards figure img,
.eye-catch img {
  border-radius: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: none;
  transition: opacity .2s;
}

.entry-card-wrap:hover .entry-card-thumb img,
.related-entry-card-wrap:hover .related-entry-card-thumb img {
  transform: none;
  opacity: .88;
}

.entry-card-title,
.related-entry-card-title {
  font-family: var(--sr-font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--sr-ink);
  margin-bottom: 8px;
}

.entry-card-wrap:hover .entry-card-title,
.related-entry-card-wrap:hover .related-entry-card-title {
  color: var(--sr-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.entry-card-snippet,
.related-entry-card-snippet {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--sr-ink-sub);
}

.entry-card-meta,
.related-entry-card-meta {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--sr-ink-sub);
}

/* カテゴリーラベル：白地に朱の小さな文字。ピル・ベタ塗りはやめる */
.cat-label {
  background-color: var(--sr-paper);
  color: var(--sr-accent);
  border: none;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  padding: 3px 8px;
  top: 0;
  left: 0;
  opacity: 1;
}

/* ============================================
   7. 記事詳細
   ============================================ */
.entry-title,
.article h1.entry-title {
  font-family: var(--sr-font-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--sr-ink);
  letter-spacing: .03em;
  font-feature-settings: "palt";
  word-break: auto-phrase;
  margin: 0 0 16px;
  padding: 0;
  border: none;
}

.date-tags {
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--sr-ink-sub);
  margin-bottom: 26px;
}

.eye-catch-wrap,
.entry-content > .eye-catch {
  margin-bottom: 36px;
}

.eye-catch .cat-label {
  top: 0;
  left: 0;
}

.entry-content {
  font-size: 17px;
  line-height: 2;
  letter-spacing: normal;
}

.entry-content p {
  margin: 0 0 1.7em;
}

/* ============================================
   8. 見出し
   H2は明朝＋上に墨の罫。H3以下はゴシック太字だけ
   ============================================ */
.entry-content h2,
.article h2 {
  font-family: var(--sr-font-serif);
  background: none;
  background-color: transparent;
  border: none;
  border-top: 1px solid var(--sr-rule-strong);
  border-radius: 0;
  color: var(--sr-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .03em;
  font-feature-settings: "palt";
  word-break: auto-phrase;
  margin: 4em 0 1.1em;
  padding: 18px 0 0;
}

.entry-content h3,
.article h3 {
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: var(--sr-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.7;
  margin: 2.6em 0 .8em;
  padding: 0;
}

.entry-content h4,
.article h4 {
  background: none;
  border: none;
  color: var(--sr-ink);
  font-size: 17px;
  font-weight: 700;
  margin: 2em 0 .6em;
  padding: 0;
}

.entry-content h2::before,
.entry-content h2::after,
.entry-content h3::before,
.entry-content h3::after {
  content: none;
}

/* 記事の一番上の見出しは、上の余白を詰める */
.entry-content > h2:first-child {
  margin-top: .6em;
}

/* ============================================
   9. 本文パーツ
   ============================================ */
.entry-content ul,
.entry-content ol {
  margin: 0 0 1.7em;
  padding-left: 1.5em;
}

.entry-content li {
  margin-bottom: .5em;
}

.entry-content ul li::marker {
  color: var(--sr-ink-sub);
}

.entry-content blockquote {
  background: none;
  border: none;
  border-left: 1px solid var(--sr-ink-faint);
  border-radius: 0;
  color: var(--sr-ink-sub);
  margin: 2.2em 0;
  padding: 2px 0 2px 22px;
}

.entry-content blockquote::before,
.entry-content blockquote::after {
  content: none;
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content strong,
.entry-content b {
  font-weight: 700;
  color: var(--sr-ink);
}

.entry-content hr {
  border: none;
  border-top: 1px solid var(--sr-rule);
  margin: 3.2em 0;
}

/* 表：横罫だけ。スマホで画面外にはみ出させない */
.entry-content .scrollable-table,
.entry-content figure.wp-block-table,
.entry-content .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 2.2em;
}

.entry-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  line-height: 1.75;
  background-color: var(--sr-paper);
  border: none;
  border-top: 1px solid var(--sr-rule-strong);
}

.entry-content table th,
.entry-content table td {
  border: none;
  border-bottom: 1px solid var(--sr-rule);
  padding: 12px 14px 12px 0;
  text-align: left;
  vertical-align: top;
  background: none;
}

.entry-content table th {
  color: var(--sr-ink);
  font-weight: 700;
  background: none;
}

.entry-content table thead th,
.entry-content table tr:first-child th {
  border-bottom: 1px solid var(--sr-rule-strong);
}

.entry-content table tbody tr:nth-child(even) td {
  background: none;
}

/* ============================================
   10. 目次
   面をやめ、上下を罫で挟むだけ
   ============================================ */
.entry-content .toc,
.toc {
  background: none;
  border: none;
  border-top: 1px solid var(--sr-rule-strong);
  border-bottom: 1px solid var(--sr-rule);
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  padding: 18px 0 16px;
  margin: 2.6em 0;
  display: block;
}

.entry-content .toc .toc-title,
.toc .toc-title {
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--sr-ink-sub);
  margin: 0 0 10px;
  padding: 0;
  border: none;
}

.entry-content .toc .toc-content,
.toc .toc-content {
  text-align: left;
}

.entry-content .toc ol,
.entry-content .toc ul {
  padding-left: 1.4em;
  margin: 0;
}

.entry-content .toc li {
  margin-bottom: .35em;
  line-height: 1.75;
  font-size: 15px;
}

/* 本文リンクの下線ルール（:not()が重なって詳細度が高い）に負けないよう、同じ形で書く */
.entry-content .toc a:not(.btn):not(.a-wrap):not([class*="yyi-rinker"]) {
  color: var(--sr-ink);
  text-decoration: none;
}

.entry-content .toc a:hover {
  color: var(--sr-accent);
  text-decoration: underline;
}

/* ============================================
   11. Rinker（商品カード）
   ボタンの色はストアの識別色なので変えない
   ============================================ */
/* 外側の .yyi-rinker-box と内側の .yyi-rinker-contents の両方に罫を引くと二重枠になるので、内側だけ */
.entry-content .yyi-rinker-contents {
  margin-top: 2.4em;
  margin-bottom: 2.4em;
  border-radius: 0;
  border: 1px solid var(--sr-rule);
  box-shadow: none;
}

.entry-content div.yyi-rinker-box {
  border: none;
  box-shadow: none;
}

.entry-content .yyi-rinker-contents .yyi-rinker-title a {
  color: var(--sr-ink);
  font-weight: 700;
}

/* ============================================
   12. SNSボタン
   ブランド色のベタをやめ、白地＋薄罫＋墨にそろえる
   ============================================ */
.sns-share-message,
.sns-follow-message {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--sr-ink-sub);
}

.sns-share.bc-brand-color a.sns-button,
.sns-follow.bc-brand-color a.sns-button,
.sns-share a.sns-button,
.sns-follow a.sns-button {
  background-color: var(--sr-paper);
  color: var(--sr-ink);
  border: 1px solid var(--sr-rule);
  border-radius: 0;
  box-shadow: none;
}

.sns-share a.sns-button:hover,
.sns-follow a.sns-button:hover {
  color: var(--sr-accent);
  border-color: var(--sr-ink-faint);
  opacity: 1;
}

.sns-share a.sns-button .social-icon,
.sns-follow a.sns-button .social-icon,
.sns-share a.sns-button .button-caption,
.sns-follow a.sns-button .button-caption {
  color: inherit;
}

/* ============================================
   13. 著者情報・記事下
   ============================================ */
.author-box {
  border: none;
  border-top: 1px solid var(--sr-rule-strong);
  border-bottom: 1px solid var(--sr-rule);
  border-radius: 0;
  background: none;
  padding: 22px 0;
}

.author-box .author-thumb img {
  border-radius: 50%;
}

.related-entry-heading,
.comment-title,
.under-entry-content .related-entry-main-heading {
  font-family: var(--sr-font-sans);
  color: var(--sr-ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--sr-rule-strong);
  border-radius: 0;
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
}

.pagination .page-numbers,
.pager-post-navi a,
.comment-btn {
  border: 1px solid var(--sr-rule);
  border-radius: 0;
  color: var(--sr-ink);
  background-color: var(--sr-paper);
  box-shadow: none;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background-color: var(--sr-ink);
  border-color: var(--sr-ink);
  color: #fff;
}

.pagination-next-link {
  border: 1px solid var(--sr-ink);
  border-radius: 0;
  color: var(--sr-ink);
  background: none;
  letter-spacing: .1em;
}

.pagination-next-link:hover {
  background-color: var(--sr-ink);
  color: #fff;
}

/* ============================================
   14. サイドバー
   面・枠なし。見出しはゴシック小さめ＋墨の罫
   ============================================ */
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar .wp-block-heading,
.sidebar .widget-sidebar-title {
  font-family: var(--sr-font-sans);
  background: none;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--sr-rule-strong);
  border-radius: 0;
  color: var(--sr-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
  padding: 0 0 10px;
  margin: 0 0 12px;
  text-align: left;
}

.sidebar h2::before,
.sidebar h2::after,
.sidebar h3::before,
.sidebar h3::after {
  content: none;
}

.sidebar .widget {
  margin-bottom: 40px;
  font-size: 14px;
  line-height: 1.9;
}

.sidebar ul li {
  border-bottom: 1px solid var(--sr-rule);
  line-height: 1.7;
}

.sidebar ul li a {
  color: var(--sr-ink);
  text-decoration: none;
  font-size: 14px;
  padding: 10px 0;
  display: block;
  background: none;
  transition: color .2s;
}

.sidebar ul li a:hover {
  color: var(--sr-accent);
  background: none;
}

.widget-entry-cards .widget-entry-card-title {
  font-family: var(--sr-font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--sr-ink);
  font-weight: 600;
}

.widget-entry-cards .a-wrap:hover {
  background: none;
}

.widget-entry-cards .a-wrap:hover .widget-entry-card-title {
  color: var(--sr-accent);
}

/* 検索窓 */
.search-box .search-edit,
#sidebar input[type="text"],
#sidebar input[type="search"] {
  border: 1px solid var(--sr-rule);
  border-bottom-color: var(--sr-ink);
  border-radius: 0;
  padding: 10px 12px;
  font-size: 15px;
  background-color: var(--sr-paper);
  box-shadow: none;
}

.search-box .search-edit:focus {
  border-color: var(--sr-ink);
}

/* ============================================
   15. フッター
   ============================================ */
.footer {
  background-color: var(--sr-ink);
  color: #cfcac2;
  border-top: none;
  margin-top: 64px;
}

.footer a {
  color: #e9e5de;
}

.footer a:hover {
  color: #fff;
}

.footer h3,
.footer .widget-title {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .2);
}

.navi-footer-in > .menu-footer li a {
  color: #cfcac2;
}

.footer .site-name-text {
  color: #fff;
}

/* トップへ戻る */
.go-to-top .go-to-top-button {
  background-color: var(--sr-ink);
  color: #fff;
  border-radius: 0;
  box-shadow: none;
}

/* ============================================
   16. レスポンシブ
   ============================================ */

/*1023px以下*/
@media screen and (max-width: 1023px) {
  .main {
    padding: 0 20px 36px;
  }

  .sidebar {
    padding: 32px 20px;
    border-top: 1px solid var(--sr-rule-strong);
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  body {
    font-size: 16px;
  }

  #content.content {
    margin-top: 24px;
  }

  #header .header-in,
  .header-container-in.hlt-center-logo .header-in {
    padding: 16px 16px 12px;
  }

  .site-name-text,
  .site-name a {
    font-size: 21px;
  }

  .tagline {
    font-size: 11.5px;
    margin-top: 4px;
  }

  .entry-title,
  .article h1.entry-title {
    font-size: 23px;
  }

  .entry-content {
    font-size: 16px;
    line-height: 1.95;
  }

  .entry-content h2,
  .article h2 {
    font-size: 20px;
    margin-top: 3.2em;
    padding-top: 14px;
  }

  .entry-content h3,
  .article h3 {
    font-size: 17.5px;
  }

  .entry-card-wrap {
    padding: 18px 0;
  }

  .entry-card-title {
    font-size: 16px;
  }

  /* 表は横スクロールさせる。画面外にはみ出させない */
  /* 包む箱が無く .entry-content 直下に置かれた表もあるので、表そのものを横スクロールの箱にする。
     （min-width を付けると箱の外にはみ出してページ全体が横に揺れる。2026-09-22版で実際に起きていた） */
  .entry-content table {
    font-size: 14px;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .entry-content figure.wp-block-table,
  .entry-content .scrollable-table {
    overflow-x: auto;
  }

  /* タップ対象を最低44px確保する */
  .sidebar ul li a,
  .navi-in > ul > li > a {
    min-height: 44px;
  }

  /* スマホのグローバルナビ：項目を省略せず、横スクロールで全部見せる。

     注意: Cocoonは ul.menu-pc と ul.menu-mobile の2本を出力し、画面幅に応じて
     片方を display:none で隠している。ここで display を指定すると両方出てしまい、
     メニューが二重に表示される。だから display には触れない。 */
  #navi .navi-in > ul,
  .navi-in > ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 6px;
    justify-content: flex-start;
  }

  #navi .navi-in > ul::-webkit-scrollbar,
  .navi-in > ul::-webkit-scrollbar {
    display: none;
  }

  #navi .navi-in > ul > li,
  .navi-in > ul > li {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  /* Cocoon本体がスマホ用メニューの項目に幅を割り当てていて、上の指定では勝てない
     （5項目が1つ181pxずつに広がり、2項目しか見えなかった）。詳細度を上げて外す。 */
  #navi .navi-in > ul.menu-mobile > li.menu-item {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  #navi .navi-in > ul > li > a,
  .navi-in > ul > li > a {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    width: auto;
    max-width: none;
    padding: 0 8px;
    margin: 0 4px;
    height: 46px;
    line-height: 46px;
    font-size: 13.5px;
  }

  /* 一覧のサムネイルが小さくなるので、カテゴリーラベルは載せない
     （小さい画像の上に文字を重ねると、どちらも読めなくなる） */
  .entry-card-wrap .cat-label,
  .widget-entry-cards .cat-label {
    display: none;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .main {
    padding: 0 16px 28px;
  }

  .sidebar {
    padding: 28px 16px;
  }

  .entry-title,
  .article h1.entry-title {
    font-size: 22px;
    line-height: 1.5;
  }

  .entry-content h2,
  .article h2 {
    font-size: 19px;
  }

  .site-name-text,
  .site-name a {
    font-size: 20px;
  }
}

/* 動きを減らす設定にしている人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================
   17. トップページの導線
   ウィジェット「インデックスリストトップ」に入れた .sr-index-top 用。

   このウィジェットエリアはトップページだけでなく
   カテゴリー・タグなどの一覧ページにも出力されるため、
   トップページ以外では隠す。
   ============================================ */
.sr-index-top {
  margin: 0 0 44px;
}

body:not(.home) .widget-index-top {
  display: none;
}

/* --- 注目記事：枠なし。大きな写真＋明朝の見出し --- */
.sr-hero {
  display: block;
  text-decoration: none;
  color: inherit;
  border: none;
  border-radius: 0;
  background: none;
}

.sr-hero-thumb {
  display: block;
  overflow: hidden;
  line-height: 0;
}

.sr-hero-thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .2s;
}

.sr-hero:hover .sr-hero-thumb img {
  opacity: .9;
}

.sr-hero-body {
  display: block;
  padding: 20px 0 0;
}

.sr-hero-badge {
  display: block;
  background: none;
  color: var(--sr-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 0;
  border-radius: 0;
  margin-bottom: 8px;
}

.sr-hero-title {
  display: block;
  font-family: var(--sr-font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .03em;
  font-feature-settings: "palt";
  word-break: auto-phrase;
  color: var(--sr-ink);
  margin-bottom: 10px;
}

.sr-hero:hover .sr-hero-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.sr-hero-lead {
  display: block;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--sr-ink-sub);
}

/* --- カテゴリー：3列。上に墨の罫、面・枠なし --- */
.sr-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

.sr-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  border-top: 1px solid var(--sr-rule-strong);
  border-radius: 0;
  padding: 14px 0 0;
  transition: none;
}

.sr-tile:hover {
  background: none;
  transform: none;
}

.sr-tile-name {
  font-family: var(--sr-font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sr-ink);
  margin-bottom: 6px;
}

.sr-tile:hover .sr-tile-name {
  color: var(--sr-accent);
}

.sr-tile-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--sr-ink-sub);
  flex: 1 1 auto;
  margin-bottom: 8px;
}

.sr-tile-count {
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--sr-ink-sub);
}

/* --- 別サイトの案内：上下の罫で挟んだ一行 --- */
.sr-guide {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 32px;
  padding: 16px 0;
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  border-top: 1px solid var(--sr-rule);
  border-bottom: 1px solid var(--sr-rule);
  border-radius: 0;
}

.sr-guide:hover {
  background: none;
}

.sr-guide-label {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--sr-accent);
  border: none;
  padding: 0;
  white-space: nowrap;
}

.sr-guide-text {
  font-size: 13px;
  line-height: 1.8;
  color: var(--sr-ink-sub);
}

.sr-guide-text strong {
  display: inline;
  font-family: var(--sr-font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--sr-ink);
  margin-right: 12px;
}

.sr-guide:hover .sr-guide-text strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

/* --- 新着記事の見出し（トップ限定）

   .sr-index-top は aside.widget-index-top の中に入るので、
   記事一覧(.list)の隣接兄弟は aside のほう。
   ウィジェットを display:none にしても隣接兄弟のセレクタは当たってしまうため、
   body.home で明示的に絞る。 --- */
body.home .widget-index-top + .list::before {
  content: "新着記事";
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--sr-ink);
  border-bottom: 1px solid var(--sr-rule-strong);
  padding-bottom: 10px;
  margin-bottom: 0;
}

/* --- スマホ --- */
@media screen and (max-width: 834px) {
  .sr-index-top {
    margin-bottom: 36px;
  }

  .sr-hero-body {
    padding-top: 14px;
  }

  .sr-hero-title {
    font-size: 20px;
  }

  .sr-hero-lead {
    font-size: 13.5px;
  }

  .sr-tiles {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 28px;
  }

  .sr-tile {
    border-top: 1px solid var(--sr-rule);
    padding: 14px 0 12px;
  }

  .sr-tile:first-child {
    border-top-color: var(--sr-rule-strong);
  }

  .sr-tile-desc {
    margin-bottom: 4px;
  }

  .sr-guide {
    display: block;
    margin-top: 20px;
    padding: 14px 0;
  }

  .sr-guide-label {
    display: block;
    margin-bottom: 4px;
  }

  .sr-guide-text strong {
    display: block;
    margin: 0 0 2px;
  }
}

/* ============================================
   18. 書影つきの本のカード（.sr-book、2026-09-23追加）
   記事中に「カスタムHTML」ブロックで置く。書影は openBD／Google Books を読み込むだけで、
   楽天APIは使わない（楽天ウェブサービス規約 第8条4項・第10条(5)を避けるため）。
   DESIGN.md どおり、角丸・影なし。上下の細罫で区切る。
   ============================================ */
.entry-content .sr-book {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 1.8em 0 2.2em;
  padding: 16px 0;
  border-top: 1px solid var(--sr-rule);
  border-bottom: 1px solid var(--sr-rule);
}

.entry-content .sr-book-cover {
  flex: 0 0 96px;
  line-height: 0;
}

.entry-content .sr-book-cover img {
  display: block;
  width: 96px;
  height: auto;
  border: 1px solid var(--sr-rule);
  border-radius: 0;
  box-shadow: none;
}

.entry-content .sr-book-body {
  flex: 1 1 auto;
  min-width: 0;
}

.entry-content .sr-book .sr-book-title {
  font-family: var(--sr-font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--sr-ink);
  margin: 0 0 4px;
}

.entry-content .sr-book .sr-book-meta {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--sr-ink-sub);
  margin: 0 0 12px;
}

.entry-content .sr-book .sr-book-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* 本文リンクの下線ルール（:not()が重なって詳細度が高い）に負けないよう、同じ形で書く */
.entry-content .sr-book a.sr-book-btn:not(.btn):not(.a-wrap):not([class*="yyi-rinker"]) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sr-ink);
  color: var(--sr-ink);
  background: var(--sr-paper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

.entry-content .sr-book a.sr-book-btn:not(.btn):not(.a-wrap):not([class*="yyi-rinker"]):hover {
  background: var(--sr-ink);
  color: #fff;
}

@media screen and (max-width: 480px) {
  .entry-content .sr-book {
    gap: 14px;
  }

  .entry-content .sr-book-cover {
    flex-basis: 76px;
  }

  .entry-content .sr-book-cover img {
    width: 76px;
  }

  .entry-content .sr-book a.sr-book-btn:not(.btn):not(.a-wrap):not([class*="yyi-rinker"]) {
    min-height: 44px;
  }
}