/* ==========================================
   ページ全体
   ========================================== */
body {
    background-color: #FFFDF7;
}

/* ==========================================
   背景：写真がばらまかれる演出（トップページHeroと同じ動き）
   .photo / scatterIn は共通の style.css を利用。サイズだけこのページ用に調整
   ========================================== */
.vm-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* トップのHeroと同様、写真をうっすら白で和らげて、手前の文字を読みやすくする */
.vm-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 253, 247, 0.4);
    z-index: 5;
}

/* ※高さを変える場合は voice-messages.js の photoH も合わせて変更してください */
.vm-bg .photo {
    width: 135px;
    height: 101px;
    border-width: 4px;
}

@media (min-width: 600px) {
    .vm-bg .photo {
        width: 185px;
        height: 139px;
    }
}

@media (min-width: 1024px) {
    .vm-bg .photo {
        width: 235px;
        height: 176px;
        border-width: 5px;
    }
}

/* ==========================================
   ヒーローエリア（デザインカンプ準拠）
   ラベル画像 → タイトル画像 → 説明文 の順に中央揃え
   ========================================== */
.vm-hero {
    position: relative;
    z-index: 1;
    background:
        /* 上から暗めのグラデーション：ラベル・タイトル画像から説明文の下あたりまで敷いて、白文字の可読性を上げる。
           高さに依存しないよう px で指定（PCの目安：画像は上から約70〜180px、説明文は約200〜320px）。
           濃さは 0.55 / 0.5 / 0.3 の数字、消える位置は 380px を調整 */
        linear-gradient(
            to bottom,
            rgba(70, 44, 20, 0.55) 0,
            rgba(70, 44, 20, 0.5) 120px,
            rgba(70, 44, 20, 0.3) 240px,
            rgba(70, 44, 20, 0) 380px
        ),
        url(../images/bg_gold.jpg) center center/cover no-repeat #A87E59;
    padding: 72px 20px 96px;
    text-align: center;
    overflow: hidden;
    /* 下端をゆるやかなカーブにして、一覧との境目を硬くしない */
    border-radius: 0 0 50% 50% / 0 0 28px 28px;
    box-shadow: 0 12px 24px -14px rgba(90, 60, 30, 0.45);
}

.vm-hero_inner {
    max-width: 760px;
    margin: 0 auto;
}

/* h1の中身は画像2枚（altにテキストを設定） */
.vm-hero_ttl {
    margin: 0 0 22px;
    line-height: 0;
}

.vm-hero_ttl img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* 「25周年 特別企画」ラベル */
.vm-hero_ttl .vm-hero_label {
    width: clamp(180px, 24vw, 250px);
    margin-bottom: 14px;
}

/* 「受講生の皆さまからのメッセージ」タイトル */
.vm-hero_title {
    width: min(92vw, 600px);
}

/* 説明文（PCはカンプどおり4行、スマホは文節ごとに折り返し） */
.vm-hero_sub {
    max-width: 640px;
    margin: 0 auto;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.9;
    letter-spacing: 0.03em;
    text-shadow:
        0 1px 2px rgba(110, 72, 36, 0.5),
        0 2px 12px rgba(110, 72, 36, 0.45);
}

/* ※style.css の「* { color: #222 }」で全要素に文字色が直接指定されているため、
   親(p)を白にしても中のspanは白を引き継がない。spanにも明示的に白を指定する */
.vm-hero_sub span {
    display: inline-block;
    color: #fff;
}

/* PCだけ改行する（スマホは文節で自然に折り返す） */
.vm-br-pc {
    display: none;
}

@media (min-width: 768px) {
    .vm-hero_sub {
        font-size: 1rem;
    }

    .vm-br-pc {
        display: inline;
    }
}

/* ==========================================
   メインエリア
   ========================================== */
.vm-main {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 20px 100px;
}

/* ==========================================
   教室で絞り込むプルダウン
   ========================================== */
.vm-filter {
    /* スクロールしても画面上部に固定（見た目は背景なしのシンプルなデザイン） */
    position: sticky;
    top: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    /* 固定中、行の空き部分がカードのタップを邪魔しないようにする */
    pointer-events: none;
}

.vm-filter_label,
.vm-filter_select {
    pointer-events: auto;
}

.vm-filter_label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #7A5A3C;
    font-weight: 800;
    font-size: 1rem;
}

.vm-filter_label i {
    color: #B8901F;
}

.vm-filter_select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid #D9BE7A;
    border-radius: 50px;
    padding: 12px 46px 12px 22px;
    font-size: 1rem;
    font-weight: 700;
    color: #2255A4;
    cursor: pointer;
    max-width: min(320px, 100%);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232255A4' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px;
}

.vm-filter_select:focus-visible {
    outline: 3px solid #E91E8C;
    outline-offset: 2px;
}

.vm-count {
    text-align: center;
    color: #6B5A48;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 32px;
}

/* ==========================================
   Pinterest風マソンリーグリッド
   ========================================== */
.vm-grid {
    scroll-margin-top: 84px;
    column-count: 1;
    column-gap: 22px;
}

@media (min-width: 560px) {
    .vm-grid {
        column-count: 2;
    }
}

@media (min-width: 900px) {
    .vm-grid {
        column-count: 3;
    }
}

@media (min-width: 1200px) {
    .vm-grid {
        column-count: 4;
    }
}

/* カード：上辺の色はLPの3色を順番に使い、同じ色を薄くして下からグラデーションで敷く */
.vm-card {
    --tone: #2255A4;
    --tone-rgb: 34, 85, 164;
    --tone-alpha: 0.16;
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    background-color: #fff;
    background-image: linear-gradient(
        to top,
        rgba(var(--tone-rgb), var(--tone-alpha)) 0%,
        rgba(var(--tone-rgb), 0) 75%
    );
    border-top: 6px solid var(--tone);
    border-radius: 4px 4px 14px 14px;
    padding: 22px 22px 20px;
    margin: 0 0 22px;
    box-shadow: 0 2px 10px rgba(90, 60, 30, 0.1);
    opacity: 0;
    /* 通常（スクロールで追加されるカード）は、動かさずにふわっと表示するだけ */
    --enter-anim: vmCardIn;
    animation: var(--enter-anim) 0.45s ease forwards;
}

.vm-card.is-tone-1 {
    --tone: #E91E8C;
    --tone-rgb: 233, 30, 140;
    --tone-alpha: 0.14;
}

.vm-card.is-tone-2 {
    --tone: #D4AF37;
    --tone-rgb: 212, 175, 55;
    --tone-alpha: 0.24;
}

/* 最初の画面（初回表示・絞り込み直後）のカードだけ、色ごとに登場の仕方を少し変える。
   青：フェードのみ／ピンク：下から少し浮かぶ／ゴールド：ほんの少し拡大 */
.vm-card.is-enter.is-tone-1 {
    --enter-anim: vmCardRise;
}

.vm-card.is-enter.is-tone-2 {
    --enter-anim: vmCardPop;
}

@keyframes vmCardIn {
    to {
        opacity: 1;
    }
}

@keyframes vmCardRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes vmCardPop {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 本文が主役 */
.vm-card_msg {
    color: #222222;
    font-size: 1rem;
    line-height: 1.9;
    white-space: pre-line;
    word-break: break-word;
}

/* 名前・教室は本文のあとに署名として置く */
.vm-card_sign {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #E3D2A4;
    text-align: right;
}

.vm-card_name {
    white-space: pre-line;
    color: #222222;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.5;
}

.vm-card_classroom {
    color: #5C6F8F;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.5;
}

/* ==========================================
   読み込み中／終了表示
   ========================================== */
.vm-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 35px 0;
    color: #7A5A3C;
    font-weight: 700;
    font-size: 0.95rem;
}

.vm-loader > span {
    color: inherit;
}

.vm-loader[hidden] {
    display: none;
}

.vm-loader_spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #F3E0A6;
    border-top-color: #E91E8C;
    border-radius: 50%;
    animation: vmSpin 0.8s linear infinite;
}

@keyframes vmSpin {
    to {
        transform: rotate(360deg);
    }
}

.vm-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: #2255A4;
    font-weight: 800;
    font-size: 1.05rem;
    padding: 40px 0 10px;
}

.vm-end[hidden] {
    display: none;
}

.vm-end i {
    color: #B8901F;
}

.vm-sentinel {
    height: 1px;
}

/* ==========================================
   動きを減らす設定の端末への配慮
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .vm-card {
        opacity: 1;
        animation: none;
    }

    .vm-loader_spinner {
        animation: none;
    }

    /* 背景写真は飛んでくる動きなしで、最終位置にそのまま表示 */
    .vm-bg .photo {
        animation: none;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--endRotate));
    }
}