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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body.home .wp-block-cover .wp-block-cover__inner-container{ max-width: none; }

/* カバー内のレイアウトを厳密に中央揃え */
body.home .wp-block-cover .wp-block-cover__inner-container{
  display: flex;
  flex-direction: column;
  align-items: center;   /* 共通のセンターライン */
  justify-content: center;
  text-align: center;
  gap: 12px;
}

/* カバー内のボタン周りの余白リセット（ズレの元を除去） */
body.home .wp-block-cover .wp-block-buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 !important;  /* ブロックギャップ無効化 */
  text-align: center;
  width: 100%;
}
body.home .wp-block-cover .wp-block-buttons > .wp-block-button{
  margin: 0 !important;          /* 旧仕様の margin-left を無効に */
  margin-inline-start: 0 !important; /* ブラウザによってはこっちが効く */
}
body.home .wp-block-cover .wp-block-button__link{
  margin: 0;                      /* アンカー自身のマージンもゼロに */
}

/* 見出し側の左右余白もゼロ基準に */
body.home .wp-block-cover h1.wp-block-heading{
  margin-left: 0;
  margin-right: 0;
}
/************************************
** トップページのスタイル
************************************/
/* 横並びの骨組み */
.hop-concert-card-flex{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  margin: 6px 0 10px;
}
.hop-concert-card-left{ }
.hop-concert-card-right{ }

.hop-line span {
  margin-right: 0.5em;
}

/* 左：日付バッジ */
.hop-datebox{
  width: 92px; min-height: 92px;
  border: 2px solid #3F3F3F; border-radius: 8px;
  display: grid; place-items: center;
  grid-template-rows: auto 1fr auto;
  text-align: center; line-height: 1;
  padding: 6px; background: #fff;
}
.hop-datebox__month{ font-size: 12px; letter-spacing: .04em; }
.hop-datebox__day{ font-size: 34px; font-weight: 700; margin: 2px 0; }
.hop-datebox__weekday{ font-size: 12px; color: #666; }

/* 右：メタ1行 */
.hop-card-meta{
  margin: 0;
  font-size: 14px; color: #555; line-height: 1.4;
}
.hop-card-meta .hop-meta-date{ font-weight: 600; }

/* レスポンシブ */
@media (max-width: 600px){
  .hop-concert-card-flex{
    grid-template-columns: 80px 1fr;
    gap: 10px;
  }
  .hop-datebox{ width: 80px; min-height: 80px; }
  .hop-datebox__day{ font-size: 28px; }
}

/* ボタンが潜るのを防ぐ（カバー/カード周り） */
.wp-block-post .wp-block-button__link{ position: relative; z-index: 2; }
.wp-block-cover__inner-container{ position: relative; z-index: 1; }
.entry-card .more-link, .entry-card a.more-link{ position: relative; z-index: 2; }
.entry-card .entry-card-wrap, .entry-card .entry-card-content{ position: relative; z-index: 1; }


/************************************
** 投稿用のスタイル
 ************************************/

/* 公演情報ボックス */
.hop-event-box{
  margin: 24px 0 32px;
  padding: 20px;
  background: #FAFAFA;
  border-left: 6px solid var(--c-accent, #C9A14D);
  border-radius: 4px;
}

/* 公演名（プログラム）3行ブロック */
.hop-concert-title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif; /* ゴシック体 */
}

.hop-concert-program {
  font-size: 1.1em;
  line-height: 1.6;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif; /* ゴシック体 */
}

/* 定義リスト */
.hop-event-meta{
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 8px 12px;
  margin: 0 0 8px;
}
.hop-event-meta dt{ font-weight: 600; }
.hop-event-meta dd{ margin: 0; }

/* セクション小見出し */
.hop-sec-heading{
  margin: 20px 0 8px;
  font-size: 18px;
  font-weight: 700;
  border-left: 6px solid var(--c-accent, #C9A14D);
  padding-left: 10px;
}

/* 箇条書き：中黒なし、余白整える */
/* 行コンテナ */
.hop-concert-row{
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

/* 1行ヘッダー：日付 | カテゴリ | 公演名 */
.hop-line{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  line-height: 1.5;
  margin-bottom: 6px;
}
.hop-sep{ color: #999; }

/* 日付 */
.hop-meta-date{
  font-weight: 600;
  color: #3F3F3F;
  white-space: nowrap;
}

/* カテゴリ（色分け） */
.hop-cat{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.9em;
  text-decoration: none;
  line-height: 1.4;
}
.hop-cat--opera{
  background: var(--c-opera, #D52824);
  color: #fff;
}
.hop-cat--orchestra{
  background: var(--c-orch, #2686E2);
  color: #fff;
}

/* 公演名（タイトル） */
.hop-title{
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}
.hop-title:hover{ text-decoration: underline; }

/* 出演ブロック */
.hop-cast-block{
  margin-left: 0; /* 必要なら微調整 */
  padding-left: 0;
}
.hop-cast-heading{
  font-size: 0.95rem;
  font-weight: 700;
  margin: 4px 0 2px;
}
.hop-list{
  list-style: none;     /* 中黒なし */
  padding-left: 0;
  margin: 0;
}
.hop-list li{ margin: .2em 0; }

/* レスポンシブ */
@media (max-width: 600px){
  .hop-line{ gap: 6px; }
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/* ===== Tablet (≤ 834px) — ほんの少し縮める */
@media (max-width: 834px){
  html { font-size: 15.5px; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.18rem; }
  h4 { font-size: 1.0rem; }
}

/* ===== Mobile (≤ 480px) — さらに抑える */
@media (max-width: 480px){
  html { font-size: 15px; }         /* 本文 ≒ 15px */
  h1 { font-size: 1.6rem; }         /* ≒ 24px */
  h2 { font-size: 1.25rem; }        /* ≒ 20px */
  h3 { font-size: 1.12rem; }        /* ≒ 18px */
  h4 { font-size: 0.98rem; }        /* ≒ 15–16px */
}


/* 抜粋カードやプログラム行が強すぎないよう相性調整 */
.hop-excerpt-card{ background:#f5f5f5; border:1px solid #eee; border-radius:8px; padding:12px; }
.hop-program-line{ line-height: 1.6; }
.hop-archive-card-link{ text-decoration:none; color:inherit; }
.hop-archive-card-link:hover{ text-decoration:none; }

/************************************
** フッターデザイン
************************************/
/* 画面下部固定のチケット購入バー */
#hop-ticket-sticky{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* iPhone下部の安全領域 */
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -6px 16px rgba(0,0,0,0.05);
}

/* ボタン本体 */
#hop-ticket-sticky .hop-ticket-btn{
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--c-accent, #C9A14D); /* 金色系：サイトキーカラーに合わせてOK */
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transition: filter .2s ease, transform .02s ease;
}
#hop-ticket-sticky .hop-ticket-btn:hover{ filter: brightness(0.92); }
#hop-ticket-sticky .hop-ticket-btn:active{ transform: translateY(1px); }

/* 小さめ画面での余白調整 */
@media (max-width: 480px){
  #hop-ticket-sticky .hop-ticket-btn{
    width: 100%;
    text-align: center;
  }
}

/************************************
** サイドメニューデザイン
************************************/
/* Latest Posts：カテゴリバッジをタイトル右に */
.hop-latest-posts--with-badge{ list-style:none; margin:0; padding:0; }
.hop-latest-posts--with-badge > li{ padding:6px 0; display:flex; flex-direction:column; gap:2px; }

.hop-recent-link{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; color:inherit;
}
.hop-recent-link:hover .hop-recent-title{ text-decoration:underline; }

.hop-cat-badge{
  display:inline-block; margin:0 0 0 8px; padding:2px 8px; border-radius:3px;
  font-size:12px; font-weight:600; color:#fff;
  line-height:1.4;
}

/* カテゴリ別カラー（既存変数を流用） */
.hop-cat-badge--opera{ background: var(--c-opera, #D52824); }
.hop-cat-badge--orchestra{ background: var(--c-orch, #2686E2); }
.hop-cat-badge--event{ background: var(--c-accent, #C9A14D); }
.hop-cat-badge--uncategorized{ background:#777; }

.hop-recent-date{ font-size:12px; color:#666; padding-left:22px; }

/* 全体リンク：下線なし（通常もホバーも） */
.hop-archive-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.hop-archive-card-link:hover,
.hop-archive-card-link:focus{
  text-decoration:none;
}

/* タイトル太字 */
.hop-archive-title{ font-weight:700; }

/* 抜粋カード（program用）：薄灰＋角丸 */
.hop-excerpt-card{
  margin-top:6px;
  padding:12px;
  background:#f5f5f5;
  border:1px solid #eee;
  border-radius:8px;
}
.hop-program-line{ line-height:1.6; }
.hop-program-title{ font-weight:600; }

/* （任意）フォーカス可視化 */
.hop-archive-card-link:focus-visible{
  outline:2px solid var(--c-accent, #C9A14D);
  outline-offset:2px;
}