@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Template: cocoon-master
Version: 1.1.3
*/

/* =========================================================
   00. Base / Typography
   - まずは全体の文字設計。ここを変えると印象が一気に変わります。
   ========================================================= */

body{
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
}

h1,h2,h3,h4{
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  letter-spacing: .01em;
}

button,
input,
select,
textarea{
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* =========================================================
   01. Global Link Color（サイト全体のリンク）
   - “ベタだけど青がいい”方針。うるさくない青に寄せます。
   ========================================================= */

a{
  color:#1e6bd6;
}

a:hover{
  color:#144fa8;
}








/* =========================================================
   Header Layout Control
   ---------------------------------------------------------
   ヘッダー全体の「高さ・余白・レスポンシブ挙動」を管理
   固定pxを避け、画面幅に応じて自然に伸縮させる
   ========================================================= */

/* ヘッダー全体のラッパー */
#header-container{
  height: auto;                 /* 固定高さをやめる */
  min-height: 320px;            /* 最低限の見せたい高さ */
  max-height: 560px;            /* 画面が広くてもデカくなりすぎない */
  margin-bottom: 48px;          /* ヘッダーと本文の呼吸（めり込み防止） */
}

/* 実際に背景画像を持つヘッダー本体 */
#header{
  height: clamp(320px, 38vw, 520px);
  /* ↑
     320px：最小（ノート・狭ブラウザ）
     38vw ：可変ゾーン（画面幅依存）
     520px：最大（フルHD以上）
  */

  background-size: cover;            /* トリミング前提 */
  background-position: center center;/* 構図の芯を守る */
}



/* =========================================================
   Header Inner Alignment
   ---------------------------------------------------------
   サイトタイトル＋ディスクリプションを
   「上に張り付かせず、中央にまとめる」
   ========================================================= */

#header-in{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 縦方向の中央寄せ */
  min-height: 100%;
}



/* =========================================================
   Site Title (サイト名)
   ---------------------------------------------------------
   視線の主役。重心を下げ、ディスクリプションと一体化させる
   ========================================================= */

.site-name-text{
  display: block;
  margin-bottom: -0.2em;     /* 行間を物理的に詰める（意図的） */
  line-height: 1.25;         /* 文字の縦密度を上げる */
  letter-spacing: .04em;

  color: rgba(255,255,255,.92);

  text-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 4px 12px rgba(0,0,0,.45);
}



/* =========================================================
   Tagline / Description（説明文）
   ---------------------------------------------------------
   主張しすぎず、タイトルの下に「静かに寄り添う」
   ========================================================= */

.tagline{
  margin-top: 0;             /* 余計な距離は持たせない */
  line-height: 1.45;         /* 間延び防止（重要） */
  font-size: .85em;
  letter-spacing: .06em;

  opacity: 0.9;
  color: rgba(255,255,255,.85);

  text-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 3px 10px rgba(0,0,0,.40);
}










/* ナビ全体：白 */
#navi{
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* 内側余白 */
#navi-in{
  padding: 8px 0;
}

/* ULは囲わない */
#navi .menu-header.menu-pc{
  display:flex;
  justify-content:center;
  gap:12px;
  background: transparent !important;
  border: none !important;
}

/* メニューリンク */
#navi .menu-header.menu-pc a{
  padding: 10px 16px;
  border-radius: 10px;
  background: transparent;
  color: rgba(20,20,20,.85) !important;
  text-decoration:none;
  transition: background .15s ease, color .15s ease;
}

/* ホバー */
#navi .menu-header.menu-pc a:hover{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.95) !important;
}

/* 現在地 */
#navi .current-menu-item > a{
  background: rgba(0,0,0,.10);
  color: rgba(0,0,0,.95) !important;
}

/* 下線無効 */
#navi a::after{
  content:none !important;
}






#navi .sub-menu{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

#navi .sub-menu a{
  color: rgba(20,20,20,.90) !important;
  padding: 10px 12px;
}

#navi .sub-menu a:hover{
  background: rgba(0,0,0,.06);
}


















/* =========================================================
   03. Front Page Tweaks（フロントページの不要タイトル）
   - フロントでh1/タイトルが出るケースの抑止
   ========================================================= */

.home .entry-title,
.front-page .entry-title{
  display:none !important;
}

.home .entry-content > h1,
.front-page .entry-content > h1{
  display:none !important;
}


/* =========================================================
   04. Sidebar Spacing Fix（サイドバー上の謎余白）
   - 余白の一次対処。必要になったらここだけ調整。
   ========================================================= */

#sidebar,
.sidebar{
  margin-top:0 !important;
  padding-top:0 !important;
}

#sidebar .widget:first-child,
.sidebar .widget:first-child{
  margin-top:0 !important;
}

#sidebar .widget-title,
.sidebar .widget-title{
  margin-top:0 !important;
}


/* =========================================================
   05. Live Archive (archive-live)
   - 一覧をカードグリッドで統一
   ========================================================= */

.live-archive{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
}

.live-item{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}

.live-item:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 38px rgba(0,0,0,.09);
}

.live-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.live-thumb{
  background:transparent;
  line-height:0;
}

.live-thumb img{
  width:100%;
  height:auto;
  display:block;
}

.live-title{
  margin:12px 14px 6px;
  font-size:18px;
  font-weight:700;
}

.live-meta{
  margin:0 14px 14px;
  font-size:14px;
  line-height:1.65;
}

.live-meta-row{
  display:flex;
  gap:8px;
  margin-top:6px;
}

/* 一覧下部：過去導線 */
.live-archive-past-link{
  margin:48px 0 16px;
  text-align:center;
}

.live-archive-past-link a{
  padding:10px 18px;
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.3);
  opacity:.85;
}

.live-archive-past-link a:hover{
  opacity:1;
}


/* =========================================================
   06. Single Live (single-live)
   - 詳細ページの“情報カード”をプロっぽく整える
   ========================================================= */

/* Cocoon標準タイトル・アイキャッチは使わない（自前表示に統一） */
.single-live .entry-title,
.single-live .eye-catch{
  display:none;
}

/* 自前見出し（上の一行タイトル） */
.single-live .live-headline{
  margin:20px 0 16px;
  font-size:24px;
  font-weight:800;
  line-height:1.35;
}

/* ---------- 06-1. メタ情報（フライヤー直下の情報ブロック） ---------- */

.live-detail-meta{
  margin:26px 0 18px;
  padding:16px 16px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.05);
  max-width:860px; /* Cocoonの幅に馴染ませる */
}

/* フライヤーのカード感（影は控えめ） */
.live-detail-flyer{
  margin:14px 0 18px !important;
}

.live-detail-flyer img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

/* 2枚目（タイムテーブル等）は“資料”として軽く */
.live-detail-flyer--secondary img{
  box-shadow:none;
  border:1px solid rgba(0,0,0,.10);
}

/* メタ行（📅/🕒/📍/🎤 の行）をカード化 */
.live-detail-meta > div{
  margin:10px 0;
  padding:10px 12px;
  border-radius:12px;
  background:#fafafa;
  border:1px solid rgba(0,0,0,.06);
  line-height:1.7;
  font-size:0.98rem;
  letter-spacing:.01em;
}

/* メタ内リンク：下線を“線”で上品に */
.live-detail-meta a{
  color:#1e6bd6;
  text-decoration:none;
  border-bottom:1px solid rgba(30,107,214,.35);
}

.live-detail-meta a:hover{
  color:#144fa8;
  border-bottom-color:rgba(20,79,168,.55);
}

/* Googleマップリンクだけ“ボタンっぽく” */
.live-detail-meta a[href*="google.com/maps"],
.live-detail-meta a[href*="goo.gl/maps"]{
  display:inline-block;
  margin-top:6px;
  padding:6px 12px;
  border-radius:999px;
  background:#f7f9ff;
  border:1px solid #dbe6ff;
  color:#1e6bd6;
  font-size:0.92rem;
  line-height:1;
}

.live-detail-meta a[href*="google.com/maps"]:hover,
.live-detail-meta a[href*="goo.gl/maps"]:hover{
  background:#eef3ff;
}

/* フライヤーとの“接近しすぎ”を回避（見た目の呼吸） */
.live-detail-meta + .live-section,
.live-detail-meta + .entry-content{
  margin-top:24px;
}


/* ---------- 06-2. 共通セクション（ひとこと / Photos / Videos） ---------- */

.live-section{
  margin:22px 0;
  padding:16px 14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
}

.live-section__title{
  margin:0 0 12px;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
}

/* ひとこと */
.live-note__label{
  font-size:12px;
  opacity:.7;
  margin-bottom:8px;
  letter-spacing:.02em;
}

.live-note__text{
  font-size:15px;
  line-height:1.85;
  padding:2px 0;
}

/* Photos（無料ACF：live_photo_1〜想定） */
.live-photos__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}

.live-photos__item{
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:#f6f6f6;
}

.live-photos__item img{
  width:100%;
  height:auto;
  display:block;
}

/* “クリックで拡大”の気配（lightbox想定） */
.live-photos__item{
  cursor:zoom-in;
}

@media (min-width:768px){
  .live-photos__grid{
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
  }
}

/* Videos（oEmbed） */
.live-videos__list{
  display:grid;
  gap:14px;
}

.live-videos__item iframe,
.live-videos__item video,
.live-videos__item embed,
.live-videos__item object{
  width:100% !important;
  max-width:100%;
  border:0;
  border-radius:14px;
}

.live-videos__item > *{
  margin:0;
}

.live-videos__item a{
  word-break:break-all;
  text-decoration:underline;
}


/* =========================================================
   07. Upcoming List（ショートコード: [mei_upcoming_live_list]）
   - “素人っぽい箇条書き”から、控えめに整ったリストへ
   - 出力HTML: .mei-upcoming-list / .mei-upcoming-list__items / li / a
   ========================================================= */

.mei-upcoming-list{
  margin:34px 0 0;
  padding:18px 16px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
}

/* タイトル（あなたがh2で出している .live-nextlist-title を活かす） */
.live-nextlist-title{
  margin:0 0 12px;
  padding:0 0 10px;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.04em;
  border-bottom:1px solid rgba(0,0,0,.10);
}

/* リスト */
.mei-upcoming-list__items{
  list-style:none;
  margin:0;
  padding:0;
}

/* 各行 */
.mei-upcoming-list__item{
  margin:0;
  padding:10px 0;
  border-bottom:1px dotted rgba(0,0,0,.12);
  font-size:0.95rem;     /* “浮いてる”問題はここで統一 */
  line-height:1.6;
}

.mei-upcoming-list__item:last-child{
  border-bottom:none;
}

/* リンク（青は維持、でも“ベタ青”で騒がない） */
.mei-upcoming-list__item a{
  color:#1e6bd6;
  text-decoration:none;
  border-bottom:1px solid rgba(30,107,214,.30);
}

.mei-upcoming-list__item a:hover{
  color:#144fa8;
  border-bottom-color:rgba(20,79,168,.55);
}

/* 行頭マーカー（「？」になってたのを修正） */
.mei-upcoming-list__item::before{
  content:"•";
  display:inline-block;
  margin-right:.55em;
  color:rgba(0,0,0,.25);
  transform:translateY(-1px);
}




/* =========================================================
   Upcoming Live List : 案内文（注釈）
   ========================================================= */

.mei-upcoming-list__note{
  margin: 0 0 1.2em;
  font-size: 0.9rem;        /* 本文より少し小さく */
  line-height: 1.7;
  color: #666;              /* 主張しすぎないグレー */
}

/* リンクは本文より少しだけ強調 */
.mei-upcoming-list__note a{
/*  color: inherit; */
  text-decoration: underline;
}
.mei-upcoming-list__note a:hover{
  opacity: 0.75;
}