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

/* =========================================================
   日本の行事・イベント事典 — Cocoon子テーマ style.css

   【配色の基準値】新しい記述もこの範囲から選ぶこと
     文字グレー       #6b6255
     淡いグレー       #8a8071
     罫線・淡ボーダー #e5e0d8 / #b9b0a2
     背景ベージュ     #faf8f4 / #f0ece4 / #ece9e3
     アクセント（赤） #c8452f
     アクセント（橙） #c98a3f
     強調（金）       #d9a441

   【構成】
     1. 記事冒頭の囲み欄
     2. 直近の行事
     3. カレンダー（共通）
     4. カレンダーの色分け
     5. 年間カレンダー
     6. 月別ページ・今後5年間の一覧
     7. ナビゲーションリンク
     8. メディアクエリ

   メディアクエリはすべて 8 にまとめてある。
   幅による調整を足すときも、各セクションではなく 8 に書くこと。
   ========================================================= */


/* =========================================================
   1. 記事冒頭の囲み欄
   ========================================================= */
.entry-content .gyoji-box {
  margin: 0 0 1.8em;
  padding: 1em 1.2em;
  background: #faf8f4;
  border: 1px solid #e5e0d8;
  border-left: 4px solid #c98a3f;
  border-radius: 3px;
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.7;
}
.entry-content .gyoji-box p { margin: 0; }
.entry-content .gyoji-box p + p { margin-top: .4em; }

/* 日付が出せないときの警告。編集権限のある人にしか出力されない。 */
.gyoji-gd-warn {
  display: inline-block;
  padding: 0 .4em;
  font-size: .85em;
  font-weight: 700;
  color: #fff;
  background: #c8452f;
  border-radius: 3px;
}


/* =========================================================
   2. 直近の行事
   ========================================================= */

/* 小見出し。
   Cocoonが .entry-content h3 に背景・余白・ボーダーを当てているため、
   .gyoji-sec-head だけでは詳細度が足りず上書きされない。
   .entry-content を前置し、いったんリセットしてから引き直す。 */
.entry-content .gyoji-sec-head {
  font-size: 1.05em;
  margin: 1.8em 0 .6em;
  padding: .1em 0 .1em .6em;
  background: none;
  border: none;
  border-left: 4px solid #c98a3f;
  border-radius: 0;
  color: inherit;
}
.entry-content .gyoji-sec-head.is-past-head {
  border-left-color: #b9b0a2;
  color: #6b6255;
}

.gyoji-upcoming {
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
  border-top: 1px solid #e5e0d8;
}
.gyoji-upcoming li {
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding: .7em .2em;
  border-bottom: 1px solid #e5e0d8;
  line-height: 1.5;
}
.gyoji-upcoming .gyoji-d {
  flex: 0 0 6.6em;   /* 「9/19–9/20」が折り返さない幅 */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #6b6255;
  white-space: nowrap;
}
.gyoji-upcoming .gyoji-d small { font-weight: 400; font-size: .8em; }
.gyoji-upcoming a { flex: 1 1 auto; text-decoration: none; }
.gyoji-upcoming a:hover { text-decoration: underline; }
.gyoji-upcoming .gyoji-badge {
  flex: 0 0 auto;
  font-size: .78em;
  padding: .15em .6em;
  border-radius: 1em;
  background: #f0ece4;
  color: #6b6255;
  white-space: nowrap;
}

/* 今日・今日から・開催中・最終日 */
.gyoji-upcoming .is-today .gyoji-badge { background: #c8452f; color: #fff; }

/* 終了した行事。濃度の指定はこの1か所だけにまとめている。 */
.gyoji-upcoming .is-past { opacity: .72; }
.gyoji-upcoming.is-past-list .gyoji-badge {
  background: #ece9e3;
  color: #6b6255;
}


/* =========================================================
   3. カレンダー（共通）
   ========================================================= */
.gyoji-cal { margin: 0 0 2em; }
.gyoji-cal-head {
  font-weight: 700;
  font-size: 1.05em;
  padding: .4em 0;
  letter-spacing: .04em;
}
.gyoji-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: #e5e0d8;
  border: 1px solid #e5e0d8;
}

.gyoji-cal-wd,
.gyoji-cal-cell { min-width: 0; }

.gyoji-cal-wd {
  background: #faf8f4;
  text-align: center;
  font-size: .78em;
  padding: .35em 0;
  color: #6b6255;
}
.gyoji-cal-wd.wd0, .gyoji-cal-cell.wd0 .gyoji-cal-n { color: #c8452f; }
.gyoji-cal-wd.wd6, .gyoji-cal-cell.wd6 .gyoji-cal-n { color: #3a6ea5; }

.gyoji-cal-cell {
  position: relative;              /* 横線を絶対配置するため */
  background: #fff;
  min-height: 4.6em;
  padding: .25em .3em 1.1em;       /* 下は横線2本ぶんの余白 */
  font-size: .8em;
  overflow: hidden;
}
.gyoji-cal-cell.is-empty { background: #faf8f4; min-height: 0; padding-bottom: 0; }
.gyoji-cal-cell.is-today { background: #fdf6e8; box-shadow: inset 0 0 0 2px #d9a441; }
.gyoji-cal-cell.is-holiday { background: #fcf1ef; }
.gyoji-cal-cell.is-holiday .gyoji-cal-n { color: #c8452f; }

.gyoji-cal-n {
  display: block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* 行事名。左の縦線の色は 4 でラベルごとに上書きする。 */
.gyoji-cal-ev {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: .92em;
  line-height: 1.3;
  margin-top: .15em;
  padding-left: .35em;
  border-left: 3px solid #b9b0a2;
  text-decoration: none;
}
.gyoji-cal-ev:hover { text-decoration: underline; }
.gyoji-cal-more { display: block; font-size: .85em; color: #8a8071; margin-top: .1em; }

/* 期間行事の横線。セル下端に積む。
   左右を1pxはみ出させて、グリッドの隙間をまたいで線がつながって見えるようにする。
   週の変わり目では別の行になるため、線は必ず切れる。 */
.gyoji-cal-bars {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: .2em;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  pointer-events: none;
}
.gyoji-cal-bar {
  display: block;
  height: 3px;
  background: #b9b0a2;
}
.gyoji-cal-bar.is-start {
  margin-left: 3px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.gyoji-cal-bar.is-end {
  margin-right: 3px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}


/* =========================================================
   4. カレンダーの色分け
   ========================================================= *
   記事に付いたタグで色が決まる。cat-other は 3 の既定色をそのまま使う
   ため、ここには書かない。色を足すときは縦線と横線の両方に足すこと。 */

/* 記事名の左の縦線 */
.gyoji-cal-ev.cat-sekki      { border-left-color: #6a9a5b; }
.gyoji-cal-ev.cat-zassetsu   { border-left-color: #8a9a5b; }
.gyoji-cal-ev.cat-gosekku    { border-left-color: #c98a3f; }
.gyoji-cal-ev.cat-nenchu     { border-left-color: #c8452f; }
.gyoji-cal-ev.cat-shukujitsu { border-left-color: #b04a6a; }
.gyoji-cal-ev.cat-kyureki    { border-left-color: #5b7a9a; }
.gyoji-cal-ev.cat-matsuri    { border-left-color: #a0522d; }
.gyoji-cal-ev.cat-kaigai     { border-left-color: #7a6a9a; }
.gyoji-cal-ev.cat-modern     { border-left-color: #8a8071; }
.gyoji-cal-ev.cat-tsuka      { border-left-color: #b07a4a; }

/* 期間行事の横線 */
.gyoji-cal-bar.cat-sekki      { background: #6a9a5b; }
.gyoji-cal-bar.cat-zassetsu   { background: #8a9a5b; }
.gyoji-cal-bar.cat-gosekku    { background: #c98a3f; }
.gyoji-cal-bar.cat-nenchu     { background: #c8452f; }
.gyoji-cal-bar.cat-shukujitsu { background: #b04a6a; }
.gyoji-cal-bar.cat-kyureki    { background: #5b7a9a; }
.gyoji-cal-bar.cat-matsuri    { background: #a0522d; }
.gyoji-cal-bar.cat-kaigai     { background: #7a6a9a; }
.gyoji-cal-bar.cat-modern     { background: #8a8071; }
.gyoji-cal-bar.cat-tsuka      { background: #b07a4a; }

/* =========================================================
   複数イベント区別用カラーバリエーション (10色)
   ========================================================= */
.gyoji-cal-ev.ev-color-1  { border-left-color: #3182ce; }
.gyoji-cal-bar.ev-color-1 { background: #3182ce; }

.gyoji-cal-ev.ev-color-2  { border-left-color: #dd6b20; }
.gyoji-cal-bar.ev-color-2 { background: #dd6b20; }

.gyoji-cal-ev.ev-color-3  { border-left-color: #38a169; }
.gyoji-cal-bar.ev-color-3 { background: #38a169; }

.gyoji-cal-ev.ev-color-4  { border-left-color: #805ad5; }
.gyoji-cal-bar.ev-color-4 { background: #805ad5; }

.gyoji-cal-ev.ev-color-5  { border-left-color: #d69e2e; }
.gyoji-cal-bar.ev-color-5 { background: #d69e2e; }

.gyoji-cal-ev.ev-color-6  { border-left-color: #e53e3e; }
.gyoji-cal-bar.ev-color-6 { background: #e53e3e; }

.gyoji-cal-ev.ev-color-7  { border-left-color: #319795; }
.gyoji-cal-bar.ev-color-7 { background: #319795; }

.gyoji-cal-ev.ev-color-8  { border-left-color: #d97706; }
.gyoji-cal-bar.ev-color-8 { background: #d97706; }

.gyoji-cal-ev.ev-color-9  { border-left-color: #b83280; }
.gyoji-cal-bar.ev-color-9 { background: #b83280; }

.gyoji-cal-ev.ev-color-10 { border-left-color: #4a5568; }
.gyoji-cal-bar.ev-color-10{ background: #4a5568; }

/* =========================================================
   5. 年間カレンダー
   ========================================================= */
.gyoji-year .gyoji-cal {
  /* アンカーで飛んだとき、固定ヘッダーに隠れないようにする */
  scroll-margin-top: 4em;
  margin-bottom: 2.4em;
}
.gyoji-year .gyoji-cal-head a {
  text-decoration: none;
  color: inherit;
}
.gyoji-year .gyoji-cal-head a:hover { text-decoration: underline; }

.gyoji-year-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  margin: 0 0 1em;
  padding: .5em .2em;
  border-top: 1px solid #e5e0d8;
  border-bottom: 1px solid #e5e0d8;
}
.gyoji-year-switch a { text-decoration: none; font-size: .9em; white-space: nowrap; }
.gyoji-year-switch a:hover { text-decoration: underline; }
.gyoji-year-now { font-weight: 700; font-size: 1.15em; }


/* =========================================================
   6. 月別ページ・今後5年間の一覧
   ========================================================= */
.gyoji-month-note { font-weight: 700; margin: 0 0 .6em; }

.gyoji-years { margin: 0 0 2em 1.4em; }
.gyoji-years li { line-height: 1.9; }


/* =========================================================
   7. ナビゲーションリンク
   ========================================================= */

/* 暦の種類（罫線区切りのリスト） */
.gyoji-guide-links {
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
}
.gyoji-guide-links li {
  padding: .6em .2em;
  border-bottom: 1px solid #e5e0d8;
  line-height: 1.6;
}
.gyoji-guide-links li:first-child { border-top: 1px solid #e5e0d8; }
.gyoji-guide-links a { font-weight: 700; text-decoration: none; }
.gyoji-guide-links a:hover { text-decoration: underline; }

/* 月のボタン。トップページの月別リンクと、年間カレンダーのジャンプリンク。
   見た目は共通で、余白と文字の大きさだけを個別に変える。 */
.gyoji-month-links,
.gyoji-jump {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 2em;
  padding: 0;
}
.gyoji-month-links li,
.gyoji-jump li { margin: 0; }

.gyoji-month-links a,
.gyoji-jump a {
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  background: #faf8f4;
  border: 1px solid #e5e0d8;
  border-radius: 4px;
}
.gyoji-month-links a:hover,
.gyoji-jump a:hover { background: #f0ece4; }

.gyoji-month-links { gap: .5em; }
.gyoji-month-links a { padding: .6em .2em; }

.gyoji-jump { gap: .4em; }
.gyoji-jump a { padding: .5em .2em; font-size: .9em; }
.gyoji-jump li.is-now a {
  background: #fdf6e8;
  border-color: #d9a441;
}


/* =========================================================
   8. メディアクエリ
   ========================================================= */

/* 560px以下：カレンダーの文字を詰めて7列を維持する */
@media screen and (max-width: 560px) {
  .gyoji-cal-cell {
    min-height: 3.8em;
    font-size: .68em;
    padding: .2em .15em .9em;
  }
  .gyoji-cal-ev {
    font-size: .95em;
    padding-left: .25em;
    border-left-width: 2px;
    -webkit-line-clamp: 3;
  }
  .gyoji-cal-bar { height: 2px; }
  .gyoji-cal-bars { gap: 1px; bottom: .15em; }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  /* 直近の行事：記事名を次の行に送る */
  .gyoji-upcoming li { flex-wrap: wrap; gap: .4em .7em; }
  .gyoji-upcoming a { flex: 1 1 100%; order: 3; }

  /* 月のボタンを4列にする */
  .gyoji-month-links,
  .gyoji-jump { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}