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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

.cocoon-custom-text-1{
	color: #c300ff;
}
.cocoon-custom-text-2{
	color: #ababab;
}

.entry-header .entry-title {
  font-size: 32px;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  border-bottom: 2px solid #333;
  padding-bottom: 10px; 
  margin-bottom: 20px;
}
.date-tags {
  display: none !important;
}

/* 固定ページID12にだけ適用 */
.page-id-12 .toc,
.page-id-12 .tnt-number,
.page-id-12 .toc-center,
.page-id-12 .border-element {
  display: none !important;
}

/************************************
** ●ヘッダーメニュー幅調整
************************************/
#menu-item-431, #menu-item-432, #menu-item-433, #menu-item-434, #menu-item-435 { /*HOMEメニュー幅変更*/
  width: 125px!important;
}
#menu-item-437, #menu-item-438 { /*SNSアイコンメニュー幅変更*/
  width: 38px!important;
}
#menu-item-439 { /*ダミーメニュー無効化*/
	pointer-events: none;
	cursor: default;
	text-decoration:none;
	width: 25px!important;
}
#menu-item-437 .caption-wrap,
#menu-item-438 .caption-wrap { /*アイコンサイズ*/
  font-weight: 500;
  font-size: 30px;
}


/************************************
** ナビの検索
************************************/
.fa-search {
    color: #666;
	font-size: 22px;
}
#navi .fa-search {
    color: #222;
}
#navi .navi-in>ul>li:last-child {
    display: none;
}
.menu-drawer .search-menu-button2 {
    display: none;
}
.search-menu-button2 {
    width: 20px!important;
}
@media screen and (min-width: 1024px) {
	#navi .navi-in>ul>li:last-child {
		display: block;	
	}	
}
footer .fa-search:before,
.search-menu-button2 .fa-search:before {
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-color: #fff;
    -webkit-text-stroke-width: 0.7px;
}
#search-menu-open2 {
	padding: 15px;
	margin-left: 5px;
}
#search-menu-content2,
#search-menu-content2 .search-box {
	max-width: 570px;
	margin-right: auto;
	margin-left: auto;
}
#search-menu-content2 .search-box {
    margin: 0;
}
.search-menu-content2 {
  transition: .3s ease-in-out;
  position: fixed;
  top: 40%;
  z-index: 99;
  width: 90%;
  left: 5%;
  right: 5%;
  -webkit-transform: translateY(900%);
  transform: translateY(900%);
  opacity: 0;
}
.search-menu-content2 .search-edit {
  width: 100%;
  max-width: 570px;
}
/*閉じる用の薄黒カバー*/
#search-menu-close2 {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  transition: .3s ease-in-out;
}
#search-menu-input2:checked ~ #search-menu-close2 {
  display: block;
  opacity: .5;
}
#search-menu-input2:checked ~ #search-menu-content2 {
  transition: .3s ease-in-out;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  opacity: 1;  
}
#search-menu-content2 .search-edit {
  font-size: 16px;
}

.instagram-gradient {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ========== 共通カード（一覧や前後ナビ） ========== */
.concert-card {
  display: block;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}
.concert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* サムネは4:3（カード専用）。画像が無い時は白背景のダミー */
.concert-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #fff; /* 背景は #FFFFFF */
}
.concert-thumb.placeholder {
  background: #fff;
}

.concert-meta { padding: 10px 12px 12px; }
.concert-date { display: block; font-size: .85rem; color: #6b7280; margin-bottom: 4px; }
.concert-title { font-size: .98rem; line-height: 1.4; color: #111827; }

/* ========== 一覧ページ：最新の演奏会 ========== */
.latest-concert { margin-bottom: 40px; }
.latest-wrap {
  display: grid;
  gap: 16px;
}
@media (min-width: 1024px) {
  .latest-wrap {
    grid-template-columns: minmax(280px, 480px) 1fr; /* 左画像 最大480px */
    align-items: start;
    gap: 24px;
  }
}
.latest-media img {
  width: 100%;
  height: auto;          /* 画像の縦横比はそのまま（トリミングしない） */
  display: block;
  object-fit: contain;   /* 画像全体を表示 */
  background: #fff;
}
.latest-title { margin: 0 0 6px; font-size: 1.3rem; }
.latest-date  { display: block; color: #6b7280; margin-bottom: 12px; }

/* ========== 一覧ページ：過去の演奏会 ========== */
.concert-archives h2 { margin-top: 32px; }
.concert-group { margin: 14px 0 22px; }
.concert-group > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
}
.concert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* スマホ2列 */
  gap: 12px;
}
@media (min-width: 1024px) {
  .concert-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* PC4列 */
    gap: 16px;
  }
}

/* ========== 記事ページ：冒頭レイアウト（左画像/右本文） ========== */
.single-concert-hero { margin-bottom: 28px; }
.single-hero-wrap {
  display: grid;
  gap: 16px;
}
@media (min-width: 1024px) {
  .single-hero-wrap {
    grid-template-columns: minmax(280px, 520px) 1fr; /* 左画像 最大520px */
    gap: 28px;
    align-items: start;
  }
}
.single-hero-media img {
  width: 100%;
  height: auto;          /* 非トリミング・原画像比率で表示 */
  object-fit: contain;   /* 全体表示 */
  background: #fff;
  display: block;
}
.single-hero-title { margin: 0 0 8px; font-size: 1.6rem; }
.single-hero-date  { display: block; color: #6b7280; margin-bottom: 14px; }

/* ========== 記事ページ：前後ナビ（PC2列/スマホ2列だが幅制限） ========== */
.concert-nav-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* デフォは2列 */
  gap: 16px;
  align-items: start;
  justify-content: center;
  margin-top: 44px;
}
.concert-nav-cards .concert-card.is-center { max-width: none; margin: 0; }
@media (min-width: 1024px) {
  .concert-nav-cards { grid-template-columns: repeat(2, 300px); gap: 24px; }
}
.concert-nav-card-wrap { text-align: center; }
.concert-nav-label { font-size: .9rem; color: #374151; margin-bottom: 8px; }

.latest-concert > .latest-title {
  margin: 8px 0 16px;
  font-size: 1.4rem;
  font-weight: bold;
}

/* ========== ヒーロー型（左右レイアウト、タイトルのみ） ========== */
.hero-concert { margin: 28px 0; }
.hero-concert .hero-title {
  margin: 8px 0 16px;
  font-size: 1.35rem;
  font-weight: 700;
}
.hero-concert .hero-wrap {
  display: grid;
  gap: 16px;
}
@media (min-width: 1024px) {
  .hero-concert .hero-wrap {
    grid-template-columns: minmax(280px, 520px) 1fr; /* 左画像 最大520px */
    gap: 28px;
    align-items: start;
  }
}
.hero-concert .hero-media img {
  width: 100%;
  height: auto;       /* 非トリミング */
  object-fit: contain;/* 全体表示 */
  background: #fff;
  display: block;
}
.hero-concert .hero-body p:last-child { margin-bottom: 0; }

/* 「最新の演奏会」見出しは既存の .latest-concert を活かす */
.latest-concert { margin-bottom: 40px; }
.latest-concert > h2 { margin-bottom: 4px; }

/* 3件分のヒーロー（最近）を縦に並べる。必要ならmargin微調整可 */
.recent-heroes { margin-bottom: 32px; }

/* ========== 詳細ブロック（従来のカードグリッド） ========== */
.concert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* SP2列 */
  gap: 12px;
}
@media (min-width: 1024px) {
  .concert-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* PC4列 */
    gap: 16px;
  }
}
.concert-card {
  display: block;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}
.concert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.concert-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #fff; /* ダミー時の背景色 */
}
.concert-thumb.placeholder { background: #fff; }
.concert-meta { padding: 10px 12px 12px; }
.concert-date { display: block; font-size: .85rem; color: #6b7280; margin-bottom: 4px; }
.concert-title { font-size: .98rem; line-height: 1.4; color: #111827; }

/* ========== 既存：記事ページの前後ナビ/冒頭レイアウトのCSSはそのまま ========== */

.jump-to-past {
  margin-bottom: 20px;
  text-align: left;
}
.jump-to-past a {
  font-weight: bold;
  text-decoration: none;
}
.jump-to-past a:hover {
  text-decoration: underline;
}

body.page-id-460 .toc,
body.page-id-460 .tnt-number,
body.page-id-460 .toc-center,
body.page-id-460 .border-element {
    display: none !important;
}