/* ============================================================
   OSUSHI STUDIO デザインリニューアル v1（方向性A: 専門メディア路線）
   適用方法: WP管理画面 → 外観 → カスタマイズ → 追加CSS に全文貼り付け
   戻し方: 追加CSSを空にするだけ（テーマファイルは一切変更しない）

   デザイントークン:
     藍（プライマリ）: #14344f / 濃藍（フッター）: #0f2540
     朱（アクセント・控えめに）: #b3402f
     墨（本文）: #1c1c1c / 生成り（背景）: #faf9f6 / 罫線: #e5e1d8
     見出し: 明朝（Shippori Mincho）/ 本文: Hiragino（現状維持）
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&display=swap');

:root {
  --os-ai: #14344f;
  --os-ai-dark: #0f2540;
  --os-shu: #b3402f;
  --os-sumi: #1c1c1c;
  --os-kinari: #faf9f6;
  --os-line: #e5e1d8;
  --os-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* ---------- 全体 ---------- */
body {
  background: var(--os-kinari);
  color: var(--os-sumi);
}
a { color: var(--os-ai); }
a:hover { color: var(--os-shu); }

/* ---------- ヘッダー: 白地 + 藍の帯で「媒体」の顔に ---------- */
.header-container {
  background: #fff;
  border-bottom: 3px solid var(--os-ai);
}
.site-name-text {
  font-family: var(--os-serif);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--os-sumi);
}
.tagline {
  font-family: var(--os-serif);
  color: var(--os-ai);
  letter-spacing: 0.2em;
  font-size: 12px;
}

/* グローバルナビ */
#navi { background: #fff; border-bottom: 1px solid var(--os-line); }
.navi-in > ul li { border: none; }
.navi-in a {
  font-family: var(--os-serif);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--os-sumi);
}
.navi-in a:hover {
  background: transparent;
  color: var(--os-shu);
  box-shadow: inset 0 -2px 0 var(--os-shu);
}

/* ---------- FVヒーロー（index-topウィジェット / hero-widget.html） ---------- */
.os-hero {
  background: linear-gradient(180deg, #fff 0%, var(--os-kinari) 100%);
  border: 1px solid var(--os-line);
  border-top: 3px solid var(--os-ai);
  padding: 3em 2em 2.2em;
  margin-bottom: 2em;
  text-align: center;
}
.os-hero-en {
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--os-shu);
  margin-bottom: 0.8em;
}
.os-hero-title {
  font-family: var(--os-serif);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.06em;
  color: var(--os-sumi);
  line-height: 1.6;
  margin: 0 0 0.7em;
  padding: 0 0 0.7em;
  border: none;
  position: relative;
}
.os-hero-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 3em;
  height: 2px;
  background: var(--os-shu);
}
.os-hero-lead {
  color: #6b675e;
  font-size: 14px;
  line-height: 2;
  margin-bottom: 1.6em;
}
.os-hero-topics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.os-hero-topics a {
  display: block;
  font-family: var(--os-serif);
  font-size: 14px;
  letter-spacing: 0.05em;
  border: 1px solid var(--os-line);
  background: var(--os-kinari);
  color: var(--os-sumi);
  padding: 0.8em 0.5em;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.os-hero-topics a:hover {
  border-color: var(--os-ai);
  color: var(--os-ai);
  background: #fff;
}
.paged .os-hero { display: none; }

/* ---------- パンくず ---------- */
.breadcrumb { color: #8a8578; font-size: 12px; }
.breadcrumb a { color: #8a8578; }

/* ---------- 記事一覧カード: タイル2列 + 細罫で雑誌の目次風に ---------- */
.main { background: transparent; border: none; }
.ect-entry-card .a-wrap,
.ect-tile-card .a-wrap,
.rect-entry-card .a-wrap {
  background: #fff;
  border: 1px solid var(--os-line);
  border-radius: 2px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ect-entry-card .a-wrap:hover,
.ect-tile-card .a-wrap:hover,
.rect-entry-card .a-wrap:hover {
  background: #fff;
  border-color: var(--os-ai);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(20, 52, 79, .08);
}
.ect-tile-card .entry-card-content { padding: 0.9em 1.1em 1.1em; }
/* カテゴリが「記事」1本のためラベルは情報価値なし → 非表示 */
.cat-label-1, .entry-category.cat-label-1 { display: none; }
.entry-card-title {
  font-family: var(--os-serif);
  font-weight: 600;
  line-height: 1.5;
  color: var(--os-sumi);
}
.entry-card-snippet { color: #6b675e; font-size: 13px; }
.entry-card-meta .post-date { color: #8a8578; }
.cat-label {
  background: #fff;
  border: 1px solid var(--os-ai);
  color: var(--os-ai);
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* ---------- 記事ページ ---------- */
.article {
  background: #fff;
  border: 1px solid var(--os-line);
  border-radius: 2px;
  padding: 2em 2.2em;
}
.entry-title,
.article h1 {
  font-family: var(--os-serif);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* H2: 藍の下罫 + 朱の短いアクセント（雑誌の柱見出し） */
.article h2 {
  font-family: var(--os-serif);
  font-weight: 600;
  background: transparent;
  color: var(--os-sumi);
  padding: 0 0 .45em;
  border: none;
  border-bottom: 2px solid var(--os-ai);
  position: relative;
  border-radius: 0;
}
.article h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 3em;
  height: 2px;
  background: var(--os-shu);
}

/* H3: 藍の左罫 */
.article h3 {
  font-family: var(--os-serif);
  font-weight: 600;
  border: none;
  border-left: 4px solid var(--os-ai);
  padding: .2em 0 .2em .6em;
  border-radius: 0;
}
.article h4 {
  font-family: var(--os-serif);
  border: none;
  border-bottom: 1px dashed var(--os-line);
  padding-bottom: .3em;
}

/* 本文の可読性 */
.entry-content { line-height: 1.95; }
.entry-content p { margin-bottom: 1.6em; }

/* テーブル: 藍ヘッダー + ゼブラ */
.entry-content table { border: 1px solid var(--os-line); }
.entry-content th {
  background: var(--os-ai);
  color: #fff;
  border: 1px solid var(--os-ai);
  font-weight: 600;
}
.entry-content td { border: 1px solid var(--os-line); }
.entry-content tr:nth-of-type(even) td { background: var(--os-kinari); }

/* 引用 */
.entry-content blockquote {
  background: var(--os-kinari);
  border-left: 4px solid var(--os-ai);
  color: #4a463d;
}

/* 目次（Cocoon標準 .toc / mu-plugin .me-toc 両対応） */
.toc, .me-toc {
  background: var(--os-kinari);
  border: 1px solid var(--os-line);
  border-radius: 2px;
  padding: 1.2em 1.6em;
}
.toc-title, .me-toc-title {
  font-family: var(--os-serif);
  font-weight: 600;
  color: var(--os-ai);
  letter-spacing: 0.2em;
}
.toc a, .me-toc a { color: var(--os-sumi); }
.toc a:hover, .me-toc a:hover { color: var(--os-shu); }

/* 関連記事セクション（me-related）とハブリンク */
.me-related h2 { margin-top: 2.5em; }
.me-hub-link a {
  display: inline-block;
  font-family: var(--os-serif);
  border: 1px solid var(--os-ai);
  color: var(--os-ai);
  padding: .5em 1.2em;
  text-decoration: none;
}
.me-hub-link a:hover { background: var(--os-ai); color: #fff; }

/* ---------- サイドバー ---------- */
.sidebar { background: transparent; }
.sidebar h3, .sidebar .widget > h3 {
  font-family: var(--os-serif);
  background: transparent;
  color: var(--os-sumi);
  border: none;
  border-bottom: 2px solid var(--os-ai);
  padding: 0 0 .4em;
  letter-spacing: 0.1em;
}
.sidebar .widget {
  background: #fff;
  border: 1px solid var(--os-line);
  border-radius: 2px;
  padding: 1.2em;
  margin-bottom: 1.5em;
}

/* サイドバー: トピック一覧（sidebar-topics.html） */
.os-topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.os-topic-list li {
  border-bottom: 1px dashed var(--os-line);
}
.os-topic-list li:last-child { border-bottom: none; }
.os-topic-list a {
  display: block;
  font-family: var(--os-serif);
  font-size: 14px;
  color: var(--os-sumi);
  padding: 0.7em 0.2em;
  text-decoration: none;
}
.os-topic-list a::before {
  content: "▸";
  color: var(--os-shu);
  margin-right: 0.5em;
}
.os-topic-list a:hover { color: var(--os-ai); }

/* サイドバー: 編集部ボックス（sidebar-editorial.html） */
.os-editor-box .os-editor-name {
  font-family: var(--os-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--os-sumi);
  margin-bottom: 0.5em;
}
.os-editor-box .os-editor-desc {
  font-size: 13px;
  line-height: 1.9;
  color: #6b675e;
  margin-bottom: 1em;
}
.os-editor-box .os-editor-link a {
  display: inline-block;
  font-family: var(--os-serif);
  font-size: 13px;
  border: 1px solid var(--os-ai);
  color: var(--os-ai);
  padding: 0.5em 1em;
  text-decoration: none;
}
.os-editor-box .os-editor-link a:hover { background: var(--os-ai); color: #fff; }

/* サイドバー: 検索フォーム */
.sidebar .search-box input[type="text"],
.sidebar .wp-block-search__input,
.sidebar input.search-edit {
  border: 1px solid var(--os-line);
  background: #fff;
  border-radius: 2px;
}

/* ---------- フッター: 濃藍で締める ---------- */
.footer {
  background: var(--os-ai-dark);
  color: #d5dbe2;
}
.footer a { color: #d5dbe2; }
.footer a:hover { color: #fff; }
.footer-bottom { background: var(--os-ai-dark); }

/* ---------- モバイル調整 ---------- */
@media screen and (max-width: 834px) {
  .article { padding: 1.2em 1em; }
  .site-name-text { font-size: 22px; }
  .os-hero { padding: 1.6em 1em 1.4em; }
  .os-hero-title { font-size: 20px; }
  .os-hero-lead br { display: none; }
  .os-hero-topics { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- サムネイル縦伸び防止（sizes=auto 画像対策） ---------- */
.ect-vertical-card .entry-card-wrap .entry-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}