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

/************************************
** THE HISTORY JAPAN 用(site/DESIGN.md)
** このファイルが原本。WordPress のテーマエディターへは、ここから貼り付ける
************************************/

/* 配色 A「和紙と群青」(背景・ヘッダー・フッターの色は Cocoon 設定の「全体」「ヘッダー」「フッター」で指定) */
:root {
  --thj-gunjo: #1f3a68;   /* 群青: キーカラー、見出し */
  --thj-kinari: #f6f1e4;  /* 生成り: 背景 */
  --thj-kin: #c9a24a;     /* 金: 線 */
  --thj-shu: #b7282e;     /* 朱: ボタン */
  --thj-text: #2b2b2b;
}

/* 見出し: h2 は群青の帯+金の下線、h3 は群青の左線 */
.article h2 {
  background: var(--thj-gunjo);
  color: var(--thj-kinari);
  border: none;
  border-bottom: 3px solid var(--thj-kin);
  border-radius: 0;
  padding: 0.6em 0.9em;
}
.article h3 {
  border: none;
  border-left: 5px solid var(--thj-gunjo);
  border-bottom: 1px solid var(--thj-kin);
  border-radius: 0;
  padding: 0.4em 0.7em;
  color: var(--thj-gunjo);
}
.entry-title {
  color: var(--thj-gunjo);
}

/* PR表記(本文の上・大) */
.pr-label-l {
  background: #efe6cf;
  color: #6b5420;
  border: none;
  border-left: 4px solid var(--thj-kin);
  border-radius: 0;
}

/* ボタン(アフィリエイトなど)は朱 */
.btn-wrap a,
.ad-btn,
.product-item-buttons a {
  background-color: var(--thj-shu);
  border-color: var(--thj-shu);
  color: #fff;
}

/* カテゴリのラベル: 城=群青、寺社=臙脂、モデルコース=金茶、聖地巡礼=緑青 */
.cat-label { background-color: var(--thj-gunjo); border-color: var(--thj-gunjo); color: #fff; }
.cat-label-3 { background-color: #8a2a2a; border-color: #8a2a2a; }
.cat-label-5 { background-color: #8a6a1f; border-color: #8a6a1f; }
.cat-label-4 { background-color: #2e6b5e; border-color: #2e6b5e; }

/* 記事の最後の「次に読む」リンク(作品一覧・総合ページなどへの導線) */
.thj-next-link a {
  display: block;
  padding: 0.9em 2.4em 0.9em 1.1em;
  border: 2px solid var(--thj-gunjo);
  border-left-width: 6px;
  background: #fff;
  color: var(--thj-gunjo);
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
.thj-next-link a::after {
  content: "→";
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--thj-kin);
}
.thj-next-link a:hover {
  background: var(--thj-kinari);
}

/* 書籍ページ(/books/): 書誌情報は小さく、販売サイトへのリンクは朱のボタン */
.thj-book-meta {
  font-size: 0.85em;
  color: #6b6b6b;
  margin-bottom: 0.4em;
}
.thj-book-link a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 1.4em;
  background: var(--thj-shu);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}

/* トップのアピールエリア(浮世絵の背景の上に、群青の札で見出しと紹介文) */
.appeal-content {
  background: rgba(31, 58, 104, 0.88);
  color: var(--thj-kinari);
  border: 1px solid var(--thj-kin);
  border-radius: 0;
}
.appeal-title {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.appeal-message {
  font-size: 0.95em;
  line-height: 1.8;
}

/* トップページ(固定ページ「トップ」): ページ名・日付・シェアボタン・パンくずは出さない */
.home.page .entry-title,
.home.page .date-tags,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .author-info,
.home.page .breadcrumb {
  display: none;
}

/* トップの入口タイル(新着記事・ドラマ・アニメ・書籍) */
.thj-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 2em;
}
.thj-tile {
  display: block;
  padding: 1.4em 1em;
  background: #fff;
  border: 2px solid var(--thj-gunjo);
  border-top: 6px solid var(--thj-kin);
  color: var(--thj-gunjo);
  text-decoration: none;
  text-align: center;
}
.thj-tile:hover {
  background: var(--thj-kinari);
}
.thj-tile-title {
  display: block;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 1.3em;
  font-weight: 600;
}
.thj-tile-desc {
  display: block;
  margin-top: 0.4em;
  font-size: 0.85em;
  color: #555;
}

/* 最新の記事(最新の投稿ブロック) */
.thj-latest {
  padding-left: 0;
}
.thj-latest li {
  list-style: none;
  padding: 0.8em 0;
  border-bottom: 1px solid #e3dccb;
  overflow: hidden;
}
.thj-latest .wp-block-latest-posts__post-title {
  font-weight: 600;
  color: var(--thj-gunjo);
}

/* YouTube を本文の横幅いっぱいに(Cocoon 既定は最大 640px) */
.video-container {
  max-width: 100%;
}

/* 見出しは明朝体 */
.entry-title,
.article h2,
.article h3,
.list-title,
.related-entry-heading {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-weight: 600;
}

/* アフィリエイトのボタンを押しやすく(スマホで横幅いっぱい・高さ 48px 以上) */
.btn-wrap a,
.ad-btn,
.product-item-buttons a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
}

/*834px以下*/
@media screen and (max-width: 834px){
  .thj-tiles {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .btn-wrap a,
  .product-item-buttons a {
    width: 100%;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
}