/* modern.css
   Bootstrapはそのまま、見た目だけ現代化する上書き
================================================== */

/* ==================================================
   1) CSS Variables
================================================== */
:root{
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .06);
  --shadow-mid:  0 18px 55px rgba(0, 0, 0, .12);

  --text-main: #111;
  --text-sub:  #555;
}

/* ==================================================
   2) Base
================================================== */
html,
body{
  color: var(--text-main);
  background: #fff;
}

body{
  line-height: 1.8;
  letter-spacing: .02em;
}

/* 読みやすい最大幅（About等） */
.container,
.container-fluid{
  max-width: 1080px;
}

/* ==================================================
   3) Typography
================================================== */
h1, h2, h3, h4, h5, h6{
  letter-spacing: .02em;
  line-height: 1.25;
  margin: 0 0 .6em;
}

h1{ font-size: clamp(28px, 3.2vw, 44px); }
h2{ font-size: clamp(22px, 2.4vw, 32px); }
h3{ font-size: 20px; }
h4{ font-size: 18px; }

p,
li{
  color: #222;
}

/* muted系は既存の表示を維持するため強制 */
small,
.text-muted{
  color: #666 !important;
}

/* ==================================================
   4) Links / Buttons
================================================== */
a{
  text-underline-offset: .2em;
}

a:hover{
  text-decoration-thickness: 2px;
}

.btn,
button,
input[type="submit"]{
  border-radius: 999px !important;
  padding: .65rem 1.1rem !important;
  font-weight: 600;
}

.btn-primary{
  border: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

/* ==================================================
   5) Navbar
================================================== */
.navbar,
nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* ==================================================
   6) Section spacing
================================================== */
section,
.section{
  padding: 56px 0;
}

/* ==================================================
   7) HERO
================================================== */
.hero{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-mid);
}

.hero__img{
  width: 100%;
  display: block;
}

/* グラデーション */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .18) 0%,
    rgba(0, 0, 0, .60) 62%,
    rgba(0, 0, 0, .86) 100%
  );
}

/* Hero テキスト */
.hero__content{
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  max-width: 620px;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .78);
}

.hero__kicker{
  font-size: 12px;
  letter-spacing: .12em;
}

.hero__title{
  margin-top: 6px;
  font-size: clamp(22px, 3vw, 40px);
  font-family: 'Roboto Slab', serif;
}

.hero__lead{
  margin-top: 8px;
}

/* HEROテキストの色を強制的に白に固定（Safari対策） */
.hero__content,
.hero__content *{
  color: #fff !important;
  opacity: 1 !important;
}

@media (max-width: 767.98px){
  .hero__content{
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .hero__title{
    font-size: 26px !important;
  }
}

/* ==================================================
   8) Cards（演出プラン等）
================================================== */
.card{
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: var(--shadow-soft);
}

/* 演出プラン画像（共通） */
.plan-card__img{
  width: 100%;
  height: auto;
  display: block;
  transform: translateZ(0); /* iOS Safari保険 */
  backface-visibility: hidden;
}

/* PC・タブレット：見栄え重視 */
@media (min-width: 768px){
  .plan-card__img{
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

/* スマホ：拡大しない・全体表示 */
@media (max-width: 767.98px){
  .plan-card__img{
    aspect-ratio: auto;
    object-fit: contain;
    background: #000;
  }
}

/* ==================================================
   9) Social Icons
================================================== */
.social-row{
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}

.social-link{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .10);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .75);
  text-decoration: none;
}

.social-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .12);
}

/* ==================================================
   10) YouTube Page (pagehead / video-card / note / grid spacing)
================================================== */
.pagehead{
  padding: 10px 0 14px;
}

/* ここは“装飾ラベル”にしない（他ページに合わせる） */
.pagehead__kicker{
  display: none;
}

.pagehead__title{
  font-family: inherit; /* Roboto Slab 固定をやめる */
  font-weight: 700;    /* 見出しとしての芯 */
  letter-spacing: .02em;
  line-height: 1.25;
  margin-bottom: 10px;
}

/* 「演奏動画・作品」＝見出し下のサブ（About等のトーン） */
.pagehead__sub{
  font-size: 14px;
  color: rgba(0, 0, 0, .60);
  margin-bottom: 10px;
  letter-spacing: .02em;
}

.pagehead__lead{
  max-width: 760px;
}

/* Video card */
.video-card .ratio{
  background: #000; /* 読み込み中のちらつき対策 */
}

.video-card iframe{
  border: 0;
}

.video-card .card-body{
  padding: 18px 18px 20px;
}

.video-card__meta{
  margin-bottom: 10px;
}

/* Note */
.note{
  border: 1px solid rgba(0, 0, 0, .08);
  background: rgba(0, 0, 0, .02);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: rgba(0, 0, 0, .72);
}

/* ==================================================
   11) YouTube Grid spacing（確実に効く対策）
   - video-grid クラスにだけ適用（他ページに影響させない）
================================================== */
.video-grid{
  --bs-gutter-x: 1.5rem;  /* 横 */
  --bs-gutter-y: 1.75rem; /* 縦：少し強めに */
}

@media (min-width: 768px){
  .video-grid{
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 2.5rem;
  }
}

@media (min-width: 992px){
  .video-grid{
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
  }
}

/* スマホ：カード同士の“影の干渉”を避け、体感差を出す */
@media (max-width: 767.98px){
  .video-card{
    margin-bottom: 16px;
  }
}