@charset "UTF-8";
.news-tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  padding-bottom:12px;
  width: 900px;
  margin: auto;
  margin-bottom:16px;
}

@media (max-width: 640px){
.news-tabs{
width: 100%;
}
}

.news-tabs .tab{
  appearance:none; border:1px solid #e5e7eb; background:#fff; color:#111827;
  padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:600;
}

.news-tabs .tab.is-active{
  border-color:#07958F; color:#07958F;
}

.text_img_layout{
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* 本文 */
.main_text{
  flex: 1 1 auto;
}

/* 画像 */
.side_image{
  flex: 0 0 260px;
}
.side_image img{
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ時だけ順番を逆にして画像を上に */
@media (max-width: 768px){
  .text_img_layout{
    flex-direction: column-reverse;
  }
}


/* ===============================
  ヘッダー
=============================== */
.concert__header{
  text-align: center;
  margin-bottom: 36px;
}

.concert__title{
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: .18em;
}

.concert__subtitle{
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

/* ===============================
  一覧
=============================== */
.concert__list{
  display: grid;
  gap: 26px;
  justify-content: center;
}

/* ===============================
  カード
=============================== */
.concertCard{
  width: 1000px;
  display: flex;
  gap: 32px;
  border: 1px solid #dcdcdc;
  background: #fff;
  padding: 26px 28px;
  box-sizing: border-box;
  margin:0 auto;
}

/* 左サムネ */
.concertCard__thumb{
  width: 180px;
  flex: 0 0 180px;
}

.concertCard__thumb img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* 右本文 */
.concertCard__body{
  flex: 1;
}

/* ===============================
  バッジ
=============================== */
.concertCard__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}

.concertCard__badge.is-closed{
  background: #1a36ff;
  color: #fff;
}

.concertCard__badge.is-open{
  background: #ff0000;
  color: #fff;
}

.concertCard__badge.is-ready{
  background: #004F43;
  color: #fff;
}

.concertCard__badge.is-normal{
  background: #111;
  color: #fff;
}

/* ===============================
  テキスト系
=============================== */
.concertCard__meta{
  margin: 0 0 8px;
  font-size: 16px;
  color: #666;
}

.concertCard__heading{
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

h2.concertCard__heading a{
	text-decoration: underline;:
}

.concertCard__place{
  margin: 0 0 12px;
  font-size: 16px;
  color: #666;
}

p.concertCard__place a{
	text-decoration: underline;:
}


/* 定義リスト（指揮など） */
.concertCard__dl{
  margin: 0 0 14px;
  font-size: 16px;
}

.concertCard__row{
  display: flex;
  gap: 14px;
  margin: 6px 0;
}

.concertCard__row dt{
  width: 6em;
  color: #777;
  flex: 0 0 6em;
}

.concertCard__row dd{
  margin: 0;
  flex: 1;
}

/* プログラム */
.concertCard__program{
  margin: 0;
  padding-left: 1.2em;
  font-size: 16px;
  color: #444;
}

.concertCard__program li{
  margin: 6px 0;
}

/* ===============================
  レスポンシブ
=============================== */
@media (max-width: 1020px){
  .concertCard{
    width: 94%;
  }
}

@media (max-width: 640px){
  .concertCard{
    flex-direction: column;
    gap: 16px;
    padding: 18px;
  }

  .concertCard__thumb{
    width: 100%;
    flex: none;
  }
/*
  .concertCard__thumb img{
    aspect-ratio: 16 / 9;
  }
*/
  .concert__title{
    font-size: 34px;
  }

  .concertCard__heading{
    font-size: 20px;
  }

  .concertCard__meta,
  .concertCard__place,
  .concertCard__dl,
  .concertCard__program{
    font-size: 14px;
  }
}

/* hover用アニメーション共通 */
.concertCard,
.concertCard__thumb img,
.concertCard__heading,
.concertCard__row dd,
.concertCard__meta,
.concertCard__place {
  transition: 0.3s;
}

/* カード全体 */
.concertCard:hover {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  background: rgba(202, 168, 81, 0.02);
}

/* 画像ズーム */
.concertCard:hover .concertCard__thumb img {
  transform: scale(1.05);
}

/* ===========================
   演奏会スケジュール 3カラム
=========================== */

.schedule_body2{
  list-style:none;
  padding:0;
  margin:32px 0 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  margin-bottom: 60px;
}

/* ===========================
   コンサートカード本体
=========================== */

.concertItem{
  position:relative;
  display:block;
  aspect-ratio:16 / 7;
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;

  background-image: var(--bg);
  background-size:cover;
  background-position:center;

  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:
    transform .18s ease,
    box-shadow .25s ease;
}

/* 文字を読みやすくする暗めのグラデーション */
.concertItem::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.60) 0%,
    rgba(0,0,0,.30) 55%,
    rgba(0,0,0,.08) 100%
  );
  pointer-events:none;
}

/* ===========================
   発光レイヤー（背景専用）
=========================== */

.concertItem::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(
    circle at center,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.30) 35%,
    rgba(255,255,255,0.12) 55%,
    rgba(255,255,255,0.00) 70%
  );
  opacity:0;
  transition: opacity .25s ease;
}

/* ホバー時：背景だけを発光 */
.concertItem:hover::after{
  opacity:1;
}

.concertItem:hover{
  box-shadow:
    0 0 25px rgba(255,255,255,0.45),
    0 0 50px rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

/* ===========================
   テキスト
=========================== */

.concertItem__tag,
.concertItem__title,
.concertItem__meta{
  position:relative; /* before/afterより前面に */
  display:block;
  text-align:left;
}

.concertItem__tag{
  margin:16px 16px 6px;
  font-size:12px;
  letter-spacing:.12em;
  opacity:.95;
}

.concertItem__title{
  margin:0 16px 8px;
  font-size:20px;
  font-weight:700;
  line-height:1.25;
}

.concertItem__meta{
  margin:0 16px 16px;
  font-size:13px;
  opacity:.95;
}

/* ===========================
   レスポンシブ
=========================== */

@media (max-width:900px){
  .schedule_body2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:560px){
  .schedule_body2{
    grid-template-columns:1fr;
  }
}

/* レイヤー順を固定（これが一番効きます） */
.concertItem{ position:relative; }
.concertItem::before{ z-index:0; }
.concertItem::after{  z-index:1; }

/* 文字は最前面に固定 */
.concertItem__tag,
.concertItem__title,
.concertItem__meta{
  position:relative;
  z-index:2;
}

/* 文字が消えないように縁取り（強め） */
.concertItem__tag,
.concertItem__title,
.concertItem__meta{
  text-shadow:
    0 2px 8px rgba(0,0,0,.85),
    0 0 2px rgba(0,0,0,.85);
}

/* レイヤー構造を完全固定 */
.concertItem{
  position: relative;
}

.concertItem::before{
  z-index: 0;   /* 暗幕 */
}

.concertItem::after{
  z-index: 1;   /* 発光 */
}

/* テキストは常に最前面・色固定 */
.concertItem__tag,
.concertItem__title,
.concertItem__meta{
  position: relative;
  z-index: 5;
  color: #fff !important;
}

/* 発光を少し弱めて文字の視認性を守る */
.concertItem::after{
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.18) 35%,
    rgba(255,255,255,0.08) 55%,
    rgba(255,255,255,0.00) 70%
  );
}
.concertItem__tag,
.concertItem__title,
.concertItem__meta{
  text-shadow:
    0 2px 8px rgba(0,0,0,.9),
    0 0 2px rgba(0,0,0,.9);
}

.pc_none {
  display: none;
}

/*SP*/
@media (max-width: 640px) {
  .pc_none {
    display: block;
  }

  .sp_none {
    display: none;
  }

 .sp_adjust{
	height:150px;
	text-align: center;
}
}

@media screen and (max-width: 640px) {
  main article.art_concert ul.schedule_body2 {
    display: block;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 640px) {
  main article.art_concert ul.schedule_body2 li {
    margin-bottom: 18px;
  }
}
main article.art_concert ul.schedule_body2 li a {
  width: 317px;
  height: 193px;
  display: block;
  transition: 0.3s;
}
@media screen and (max-width: 1100px) {
  main article.art_concert ul.schedule_body2 li a {
    width: 100%;
    height: auto;
    aspect-ratio: 344/193;
  }
  main article.art_concert ul.schedule_body2 li a img {
    vertical-align: bottom;
  }
}
main article.art_concert ul.schedule_body2 li a:hover {
  opacity: 0.8;
  transition: 0.3s;
}

@media screen and (max-width: 900px) and (orientation: landscape) {
      main article.art_mv ul.slider {
        width: 100vw;
        height: auto!important;
        aspect-ratio: 16 / 9;
    }
}

main article.art_info ul.news_body li dl dd.news_icon {
  background: #2ca77b!important;
}

main article.art_info ul.news_body li dl dd.report_icon {
  background: RGB(42, 88, 140)!important;
}

main article.art_info ul.news_body li dl dd.concert_icon {
  background: #452286!important;
}

main article.art_info ul.news_body li dl dd.other_icon {
  background: RGB(168, 142, 84)!important;
}

/* タブ共通（非アクティブ） */
.news-tabs .tab {
  background: #f2f2f2;
  color: #333;
  border: 1px solid #ddd;
  transition: background-color .2s ease, color .2s ease;
}

/* すべて */
.news-tabs .tab.is-active[data-filter="all"] {
  background: #666;
  color: #fff;
}

/* お知らせ（news_icon と同色） */
.news-tabs .tab.is-active[data-filter="news"] {
  background: #2ca77b; /* news_icon */
  color: #fff;
}

/* レポート（report_icon と同色） */
.news-tabs .tab.is-active[data-filter="report"] {
  background: rgb(42, 88, 140); /* report_icon */
  color: #fff;
}

/* 演奏会（concert_icon と同色） */
.news-tabs .tab.is-active[data-filter="concert"] {
  background: #452286; /* concert_icon */
  color: #fff;
}

/* その他（other_icon が将来増えた場合） */
.news-tabs .tab.is-active[data-filter="other"] {
  background: rgb(168, 142, 84); /* other_icon */
  color: #fff;
}

main article.art_concert ul.schedule_body {
    flex-wrap: wrap;
}

@media screen and (min-width: 1024px) {
main article.art_concert ul.schedule_body li a {
    width: 490px!important;
    height: 275px!important;
}
}

.txt-center{
	text-align:center;
}
