@charset "UTF-8";
/* ==========================================================================
   page-head.css — 下層ページ共通のページ見出し
   使っているページ：出演バンド紹介（/band/）、メンバー一覧（/member-list/）
   v261012b：動かないスポットライトを追加
   v261012d：光をデモと同じ台形＋足もとの光だまりに変更／スマホではヘッダーの裏（画面の上端）から光を当てる
   v261012g：波紋を削除／前置きの文字も英字に合わせて伸び縮み
   v261013 ：リード文の蛍光ペン風マーカー（.page-head-marker）を追加。ほかは v261012g のまま
   読み込み順：style.css → header.css → これ → 各ページのCSS

   ■ HTML の形（文言は HTML 側だけで変えられます）
     <div class="page-head">
       <p class="page-head-label">小さな前置き（不要なら行ごと削除）</p>
       <h1 class="page-head-title">
         <span class="page-head-en">BANDS</span>
         <span class="page-head-ja">
           <img class="page-head-kira is-l1" …>  ← キラキラ4つ（装飾なので alt="" ）
           <img class="page-head-kira is-l2" …>
           出演バンド大解剖図鑑
           <img class="page-head-kira is-r1" …>
           <img class="page-head-kira is-r2" …>
         </span>
       </h1>
       <div class="page-head-rule" aria-hidden="true"></div>
       <p class="page-head-lead">リード文</p>
     </div>

   ■ よく調整する値は、すぐ下の .page-head の変数にまとめています
     ページごとに変えたいときは <div class="page-head" style="--ph-ja-ratio:.7"> のように上書き。
   ========================================================================== */

.page-head {
    /* ---- 調整用の値 ---- */
    --ph-en-size: clamp(32px, 10vw, 46px);   /* 英字の大きさ */
    --ph-ja-ratio: 0.62;                     /* 日本語＝英字の何倍か。英字と一緒に画面幅で伸び縮みします */
    --ph-label-ratio: 0.39;                  /* 小さな前置き＝英字の何倍か（スマホで約16px） */

    /* ---- 色・書体（ほかのCSSに無くても動くよう、ここで持っています） ---- */
    --ph-navy:  #1e1b4b;
    --ph-muted: #8a857c;
    --ph-text:  #6b6459;
    --ph-line:  rgba(60, 53, 24, 0.12);
    --ph-font-latin: var(--font-latin, "Avenir Next", Avenir, "Century Gothic"), sans-serif;

    /* ---- スポットライトの調整用 ---- */
    --ph-spot-offset: 60px;                    /* .container の上の余白。光をカードの上端から当てるため */
    --ph-bleed: 24px;                          /* .container の左右の余白。影をカードの端まで広げるため */
    --ph-stage-h: 200px;                       /* 照らす範囲（見出しの上端から、日本語タイトルの下あたりまで） */
    --ph-beam-w: 0.64;                         /* 光の下端の幅（カードの幅の何倍か）。0.5 で細め、0.8 で太め */
    --ph-shade: #efe9dc;                       /* 光の外側を沈める色。濃くするなら #ece4d2（そのときは光を rgba(255,255,253,.98) に） */
    --ph-light: #ffffff;                       /* 光の色。背景が薄いぶん真っ白にして、差を保っています */

    position: relative;
    isolation: isolate;            /* 光と影を、見出しの後ろだけに閉じ込める */
    margin-bottom: 34px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   小さな前置き（英字の上）
   -------------------------------------------------------------------------- */
.page-head-label {
    display: block;                /* h1 の中で <span> にしても同じ見た目になるように */
    margin: 30px 0 0px;
    font-size: calc(var(--ph-en-size) * var(--ph-label-ratio));   /* 英字と一緒に伸び縮み */
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.12em;
    color: var(--ph-muted);
}

/* h1 はブラウザの既定値を消して、中の span に任せます */
.page-head-title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
    color: inherit;
}

/* --------------------------------------------------------------------------
   英字（BANDS と同じ見た目）
   -------------------------------------------------------------------------- */
.page-head-en {
    display: block;
    font-family: var(--ph-font-latin);
    font-size: var(--ph-en-size);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-indent: 0.04em;
    line-height: 1.15;
    color: var(--ph-navy);

    /* 文字の中を流れる紫＋金のグラデーション */
    --ph-title-art: linear-gradient(100deg,
        #1e1b4b 0%, #311042 26%, #6f5aa8 44%, #a8842e 52%, #6f5aa8 60%, #311042 76%, #1e1b4b 100%);
    --ph-title-art-size: 300% 100%;
    --ph-title-art-motion: phTitleFlow 5s linear infinite;   /* 秒数が小さいほど速く流れます */
}

/* background-clip: text が使えない環境では単色のまま */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .page-head-en {
        background-image: var(--ph-title-art);
        background-size: var(--ph-title-art-size);
        background-position: 0 50%;
        background-repeat: repeat-x;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: var(--ph-title-art-motion);
    }
}

@keyframes phTitleFlow {
    from { background-position:    0 50%; }
    to   { background-position: -300% 50%; }
}

/* --------------------------------------------------------------------------
   日本語（英字の 62%）
   -------------------------------------------------------------------------- */
/* 文字幅ぴったりの箱にして、キラキラの位置の基準にします */
.page-head-ja {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 14px 0 25px;
    font-size: calc(var(--ph-en-size) * var(--ph-ja-ratio));   /* 英字の 0.62 倍（--ph-ja-ratio で調整） */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-indent: 0.06em;
    color: var(--ph-navy);
    word-break: keep-all;          /* 単語の途中で折り返さない */
    overflow-wrap: anywhere;       /* それでも入らないときだけ折る */
}

/* --------------------------------------------------------------------------
   キラキラ（日本語の左上に2つ・右下に2つ）
   大きさ・位置は em（＝日本語の文字1つ分）で指定しているので、
   画面幅で文字が縮むとキラキラも一緒に縮みます。
   ずらしたいときは top / left などの数値を変えてください。
   -------------------------------------------------------------------------- */
.page-head-kira {
    position: absolute;
    display: block;
    width: auto;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;   /* スマホ長押しのプレビューを出さない */
}

/* 左上：小（線）＋大（塗り） */
.page-head-kira.is-l1 {
    top: -0.2em;
    left: -1em;
    height: 0.55em;
    animation: phKiraL 3s ease-in-out infinite;
}

.page-head-kira.is-l2 {
    top: 0.5em;
    left: -1.5em;
    height: 0.8em;
    animation: phKiraL 3s ease-in-out infinite -1.2s;
}

/* 右下：小（線）＋大（塗り） */
.page-head-kira.is-r1 {
    bottom: -0.5em;
    right: -1em;
    height: 0.55em;
    animation: phKiraR 2.4s ease-in-out infinite;
}

.page-head-kira.is-r2 {
    bottom: -0.1em;
    right: -1.3em;
    height: 0.8em;
    animation: phKiraR 2.4s ease-in-out infinite -0.8s;
}

/* 左はゆったり、右は少し早めに。周期をずらして揃って動かないようにしています */
@keyframes phKiraL {
    0%, 100% { transform: translateY(2px)  rotate(0deg); }
    50%      { transform: translateY(-2px) rotate(-3deg); }
}

@keyframes phKiraR {
    0%, 100% { transform: translateY(-3px) rotate(0deg); }
    50%      { transform: translateY(-7px) rotate(4deg); }
}

/* --------------------------------------------------------------------------
   区切り線・リード文
   -------------------------------------------------------------------------- */
.page-head-rule {
    display: block;
    width: 100%;
    height: 1px;
    margin: 26px auto 22px;
    background-color: var(--ph-line);
}

.page-head-lead {
    margin: 0;
    padding: 0 4px;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--ph-text);
    text-align: left;
}

/* --------------------------------------------------------------------------
   スポットライト（動かない）
   カードの上端から、タイトルに向かって1本だけ光を当てます。
   クリームの上では白い光が見えないので、光の外側（::before）を少し沈めて、
   光（::after）が「照らしている」ように見せています。
   開いたときに照明が入るように1回だけチカッと点き、そのあとは止まったままです。
   -------------------------------------------------------------------------- */
/* 舞台：照らす範囲を一段沈めたベージュにして、下の80pxでカードの色に溶かす。
   足もと（照らす範囲の下端）には光だまりを置く */
.page-head::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: calc(var(--ph-spot-offset) * -1);
    left: calc(var(--ph-bleed) * -1);
    right: calc(var(--ph-bleed) * -1);
    height: calc(var(--ph-spot-offset) + var(--ph-stage-h) + 80px);
    background:
        radial-gradient(closest-side, var(--ph-light), transparent)
            50% calc(var(--ph-spot-offset) + var(--ph-stage-h) - 120px) / 60% 120px no-repeat,
        linear-gradient(to bottom, var(--ph-shade) 0%, var(--ph-shade) calc(100% - 80px), transparent 100%);
    pointer-events: none;
}

/* 光の筋：上が細く下が広い台形を、全体にぼかして当てる */
.page-head::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(var(--ph-spot-offset) * -1);
    left: 50%;
    width: calc((100% + var(--ph-bleed) * 2) * var(--ph-beam-w));
    height: calc((var(--ph-spot-offset) + var(--ph-stage-h)) * 1.06);
    transform: translateX(-50%);
    background: linear-gradient(to bottom, var(--ph-light), transparent 92%);
    clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
    filter: blur(10px);
    pointer-events: none;
    animation: phLightOn 1.4s ease-out both;
}

/* --------------------------------------------------------------------------
   スマホ：ヘッダーの裏まで光を通す
   カードをヘッダーの高さぶん上に引き上げて、画面の一番上から光を当てます。
   ページの一番上にいるあいだはヘッダーを透明にし、
   スクロールしてヘッダーが縮んだら（.is-scrolled）いつものクリームに戻ります。
   .page-head があるページだけに効きます。
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    body:has(.page-head) .container {
        margin-top: calc(var(--header-h, 78px) * -1);
        padding-top: calc(50px + var(--header-h, 78px));    /* 50px は style.css のスマホ時の上余白 */
    }

    body:has(.page-head) .site-header:not(.is-scrolled):not(.is-menu-open) {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .page-head {
        --ph-spot-offset: calc(50px + var(--header-h, 78px));
        --ph-bleed: 20px;
    }
}

@keyframes phLightOn {
    0%   { opacity: 0; }
    20%  { opacity: 0.9; }
    32%  { opacity: 0.25; }
    100% { opacity: 1; }
}

/* 見出しが画面の外にあるあいだは、タイトルのグラデーションやキラキラを止める（page-motif.js が .is-idle を付けます） */
.page-head.is-idle *,
.page-head.is-idle *::before,
.page-head.is-idle::after {
    animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   リード文の中の蛍光ペン風マーカー
   使い方：<span class="page-head-marker">強調したい言葉</span>
   -------------------------------------------------------------------------- */
.page-head-marker {
    background: linear-gradient(transparent 62%, #ffff00 62%);
    -webkit-box-decoration-break: clone;   /* 折り返した各行にも線を引く */
    box-decoration-break: clone;
    padding: 0 1px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   動きを減らす設定の端末
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .page-head-en   { --ph-title-art-motion: none; }
    .page-head-kira { animation: none; }
    .page-head::after { animation: none; }   /* 光は最初から点いた状態 */
}