/* ==========================================================================
   member-map-addon.css
   シャッフルバンド メンバー紹介（リスト表示）
   ※ style.css → header.css の後に読み込むこと
   ※ 現在はリスト表示のみ稼働。マップ表示は最後尾に「後日用」として保持
   ========================================================================== */

/* --------------------------------------------------------------------------
   フォント設定：Avenir（欧文）＋ 游ゴシック（和文）
   -------------------------------------------------------------------------- */
:root {
    /* 欧文（総称フォントは付けない） */
    --font-latin: "Avenir Next", Avenir, "Century Gothic";

    /* 和文：Webフォント → OS標準の順。sans-serif は最後の1回だけ */
    --font-jp: "Zen Kaku Gothic New",
               "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
               "Yu Gothic", "游ゴシック",
               "Hiragino Sans", "ヒラギノ角ゴシック",
               sans-serif;

    /* 本文の標準：英数字はAvenir、日本語はZen Kaku Gothic New */
    --font-base: var(--font-latin), var(--font-jp);
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-base);
}

body {
    font-weight: 400;          /* 游ゴシックが細くなりすぎるため 300 から変更 */
    letter-spacing: 0.04em;
}

/* Montserrat を使っていた箇所を Avenir 系に置き換え */
.site-header-logo-main,
.site-header-nav a,
.gnav-toggle,
.gnav-toggle-label,
.gnav-group-label,
.mm-band-block-sub,
.mm-member-chip-part,
.copyright {
    font-family: var(--font-latin), sans-serif;
}





/* --------------------------------------------------------------------------
   ページ見出し（タイトル・リード文）
   -------------------------------------------------------------------------- */
.mm-page-head {
    margin-bottom: 30px;
    text-align: center;
}

.mm-page-label {
    margin: 0 0 10px;
    font-family: var(--font-base), sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #8a857c;
}

.mm-page-title {
    margin: 0 0 30px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
    color: #1e1b4b;
}

.mm-page-lead {
    margin: 45px 0 0 0;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #6b6459;
    text-align: left;
    padding:0 8px;
}

/* 注釈（※で始まる補足） */
.mm-page-note {
    margin: 16px 0 20px;
    padding: 14px 16px;
    background: rgba(60, 53, 24, 0.04);
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.9;
    letter-spacing: 0.03em;
    color: #8a857c;
    text-align: left;
}

/* --------------------------------------------------------------------------
   特記事項モーダル
   -------------------------------------------------------------------------- */

/* 開くボタン（控えめ・アウトライン） */
.mm-note-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 20px 0 4px;
    padding: 14px 16px;
    background: transparent;
    border: 1px solid rgba(60, 53, 24, 0.22);
    border-radius: 10px;
    box-shadow: none;
    color: #3c3518;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.mm-note-btn:hover,
.mm-note-btn:active {
    transform: translateY(-2px);
    background: rgba(60, 53, 24, 0.04);
    border-color: rgba(60, 53, 24, 0.4);
}

.mm-note-btn-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mm-note-btn-sub {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: #8a857c;
}

.mm-note-btn-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.mm-note-btn-arrow {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(60, 53, 24, 0.22);
    background: transparent;
    color: #8a857c;
    font-size: 12px;
}

/* オーバーレイ */
.mm-note-overlay {
    position: fixed;
    inset: 0;
    z-index: 10040;               /* ヘッダー(9000)・メニュー(10001)より前面 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: rgba(15, 12, 30, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mm-note-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* パネル */
.mm-note-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    background: #fffdfa;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 12, 30, 0.4);
    overflow: hidden;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.mm-note-overlay.is-open .mm-note-panel {
    transform: none;
}

/* ヘッダー（固定） */
.mm-note-head {
    position: relative;
    flex-shrink: 0;
    padding: 20px 64px 18px 22px;
    background: linear-gradient(150deg, #1e1b4b 0%, #311042 100%);
    color: #ffffff;
}

.mm-note-head-label {
    margin: 0 0 5px;
    font-family: var(--font-latin), sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: #ffff05;
}

.mm-note-head-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* MENUボタンと同じ「枠線＋中身だけ」の角丸ボックスに揃える */
.mm-note-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    color: #ffffff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mm-note-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.8);
}

/* 本文（ここだけスクロール） */
.mm-note-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;      /* 背面ページのスクロールに伝播させない */
    padding: 22px 22px calc(26px + env(safe-area-inset-bottom, 0px));
}

.mm-note-intro {
    margin: 0 0 22px;
    font-size: 12.5px;
    line-height: 1.9;
    color: #6b6459;
}

.mm-note-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #8a857c;
    white-space: nowrap;
}

.mm-note-group::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(60, 53, 24, 0.12);
}

.mm-note-item {
    margin-bottom: 20px;
    padding: 16px 16px 14px;
    background: #f7f4ef;
    border-radius: 12px;
}

.mm-note-item:last-of-type { margin-bottom: 24px; }

.mm-note-item-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #3c3518;
}

.mm-note-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e1b4b, #311042);
    color: #ffffff;
    font-family: var(--font-latin), sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.mm-note-text {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.95;
    color: #5c554b;
}

.mm-note-text:last-child { margin-bottom: 0; }

.mm-note-text strong {
    font-weight: 700;
    color: #311042;
}

.mm-note-list {
    margin: 0;
    padding-left: 1.1em;
    font-size: 12px;
    line-height: 1.9;
    color: #8a857c;
}

.mm-note-list li { margin-bottom: 4px; }

.mm-note-line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background-color: #06C755;
    border-radius: 50px;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.mm-note-line-btn-2 {
    display: flex;
    width:70%;
    margin:30px auto 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background-color: #06C755;
    border-radius: 50px;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.mm-note-outro {
    margin: 18px 0 0;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #8a857c;
    text-align: center;
}

/* モーダル表示中は背面をスクロールさせない */
body.mm-note-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .mm-note-overlay,
    .mm-note-panel {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   絞り込みチップ（横スクロール）
   ※ サイト側の .member-filter-chip と衝突しないよう mm- 接頭辞
   -------------------------------------------------------------------------- */
.mm-filter-bar {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    /* .container の左右パディング分を打ち消して端まで流す */
    margin: 0 -24px 24px;
    padding: 0 24px 14px;
    border-bottom: 1px solid rgba(60, 53, 24, 0.1);
    scrollbar-width: none;
}

@media (max-width: 600px) {
    .mm-filter-bar {
        margin: 0 -16px 24px;
        padding: 0 16px 14px;
    }
}

.mm-filter-bar::-webkit-scrollbar { display: none; }

.mm-filter-chip {
    flex-shrink: 0;
    appearance: none;
    padding: 7px 15px;
    background: transparent;
    border: 1px solid rgba(60, 53, 24, 0.18);
    color: #8a857c;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.mm-filter-chip:hover { border-color: rgba(60, 53, 24, 0.35); }
.mm-filter-chip:active { transform: scale(0.96); }

.mm-filter-chip.is-active {
    background: linear-gradient(135deg, #1e1b4b 0%, #311042 100%);
    border-color: transparent;
    color: #ffffff;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   バンド（ジャンル）ブロック ※クリーム背景の上に直接置く
   -------------------------------------------------------------------------- */
.mm-band-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --------------------------------------------------------------------------
   スクロールフェードイン（member-map.js の initReveal が is-revealed を付与）
   -------------------------------------------------------------------------- */
.mm-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--mm-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.mm-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* メンバー行は少し小さめの動きで、順番に出す */
.mm-member-chip.mm-reveal {
    transform: translateY(10px);
    transition-duration: 0.5s;
}

/* JSが動かない環境でも必ず表示されるようにしておく */
@media (prefers-reduced-motion: reduce) {
    .mm-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ロゴを枠外にはみ出させるためのラッパー（block は glow 用に overflow:hidden のまま） */
.mm-band-item {
    position: relative;
}

.mm-band-item.is-filtered-out { display: none; }

/* タイトル左のロゴ：枠から少しはみ出す */
.mm-band-mark {
    position: absolute;
    top: 8px;
    left: -16px;
    z-index: 2;
    width: 70px;
    height: 70px;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(15, 12, 30, 0.35));
    animation: mm-mark-float 4.5s ease-in-out infinite;
    /* ブロックごとに少しずらして、揃って動かないようにする */
    animation-delay: calc(var(--mm-index, 0) * -0.6s);
}

@keyframes mm-mark-float {
    0%   { transform: translateY(0)     rotate(-4deg); }
    50%  { transform: translateY(-7px)  rotate(4deg); }
    100% { transform: translateY(0)     rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mm-band-mark { animation: none; }
}

@media (max-width: 600px) {
    .mm-band-mark {
        top: -3px;
        left: -5px;
        width: 85px;
        height: 85px;
    }
}

/* ロゴのぶん、見出しまわりだけ字下げする（メンバー行は全幅のまま） */
.mm-band-block-head {
    position: relative;
    padding-left: 60px;
    min-height: 46px;
}

@media (max-width: 600px) {
    .mm-band-block-head { padding-left: 70px; }
}

.mm-band-block {
    position: relative;
    overflow: hidden;
    padding: 18px 22px 40px;
    border-radius: 15px;
    background: linear-gradient(150deg, #1e1b4b 0%, #311042 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 12px 28px rgba(30, 27, 75, 0.22);
    color: #f4ede0;
}

.mm-band-block.is-filtered-out { display: none; }

/* アクセントカラーのぼかし（右上） */
.mm-band-block-glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--mm-accent, #9d4edd) 0%, transparent 70%);
    opacity: 0.3;
    filter: blur(6px);
    pointer-events: none;
}

/* ジャンル名の上のサブキャッチ */
.mm-band-block-sub {
    position: relative;
    display: block;
    margin: 0 0 2px;
    font-family: var(--font-latin);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--mm-accent, #9d4edd);
}

.mm-band-block-title {
    position: relative;
    margin: 0 0 25px;
    font-family: var(--font-base);
    font-size: 25px;
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.3;
    background: linear-gradient(90deg, #ffffff 10%, var(--mm-accent, #e0c3fc) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mm-band-block-desc {
    position: relative;
    margin: 0 0 18px;
    padding-left: 12px;
    border-left: 2px solid var(--mm-accent, #9d4edd);
    font-size: 12px;
    line-height: 1.75;
    color: #c9bfe0;
}

/* メンバー：1行1名 */
.mm-band-block-members {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* ← 各チップを内容幅に縮める */
    gap: 8px;
    font-family: var(--font-base);
}

.mm-member-chip {
    display: flex;
    align-items: center;
    gap: 15px;
    width: auto; /* ← 100% をやめる */
    max-width: 100%;
    min-width: 300px;
    padding: 12px 16px 12px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    font-family: inherit;
    color: inherit;
    text-align: left;
    /* ▼ 詳細モーダルは後日実装のため、クリック演出は無効化中
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; */
}

/* ▼ モーダル実装時に有効化
.mm-member-chip:hover,
.mm-member-chip:active {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--mm-accent, #9d4edd);
    transform: translateY(-1px);
}
*/

.mm-member-chip-part {
    flex-shrink: 0;
    min-width: 65px;
    padding: 3px 8px;
    text-align: center;
    font-family:"Avenir Next", Avenir, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #ffffff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mm-accent, #9d4edd), #7b2cbf);
}

.mm-member-chip-name {
    flex: 0 1 auto;            /* ← flex: 1 をやめる */
    margin-right: auto;        /* ← 余白を名前の右に集めて、期を右端へ */
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #f4ede0;
    white-space: nowrap;
}

.mm-member-chip-term {
    flex-shrink: 0;            /* ← 長い名前でも期は潰れない */
    font-size: 14px;
    font-family:"Avenir Next", Avenir, sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #a78bfa;
}

/* --------------------------------------------------------------------------
   メンバー詳細モーダル
   -------------------------------------------------------------------------- */
.mm-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 20, 39, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 10030;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.mm-modal-overlay.is-open { display: flex; }

.mm-modal-content {
    position: relative;
    width: 100%;
    max-width: 330px;
    padding: 30px 26px 26px;
    background: linear-gradient(150deg, #1e1b4b 0%, #311042 100%);
    border: 1px solid var(--mm-accent, #9d4edd);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15, 12, 30, 0.45);
    text-align: center;
    color: #f4ede0;
}

#mm-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
}

.mm-detail-meta {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--mm-accent, #9d4edd);
}

.mm-detail-name {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
}

.mm-detail-sub {
    margin: 0 0 16px;
    font-size: 12.5px;
    color: #c9bfe0;
}

.mm-detail-comment {
    margin: 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.8;
    text-align: left;
    color: #f4ede0;
}

/* ==========================================================================
   ▼ 以下、マップ表示用（後日実装）
   HTML側のコメントアウトを外すとそのまま使えます
   ========================================================================== */

.mm-embed {
    position: relative;
    background: #0f0a15;
    border-radius: 18px;
    padding: 12px;
    color: #f4ede0;
    box-shadow: 0 14px 32px rgba(15, 10, 21, 0.35);
    overflow: hidden;
}

.mm-embed-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.mm-nav { display: flex; gap: 6px; flex: 1; }

.mm-toggle-btn {
    flex: 1;
    padding: 9px 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f4ede0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.mm-toggle-btn.is-active {
    background: linear-gradient(135deg, #7b2cbf 0%, #9d4edd 100%);
    border-color: transparent;
    color: #ffffff;
}

.mm-fullscreen-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: #f4ede0;
    font-size: 15px;
    cursor: pointer;
}

.mm-view { display: none; position: relative; }
.mm-view.is-active { display: block; }

.mm-map-frame {
    position: relative;
    width: 100%;
    height: 460px;
    overflow: hidden;
    border-radius: 12px;
    background-color: #1c1427;
    touch-action: none;
    cursor: grab;
}

.mm-map-frame:active { cursor: grabbing; }

@media (max-width: 480px) {
    .mm-map-frame { height: min(62vh, 460px); }
}

.mm-map-stage {
    position: absolute;
    width: 800px;
    height: 1100px;
    background-color: #1c1427;
    background-image: url('img/mm_stage_bg.jpg');
    background-size: cover;
    background-position: center;
    transform-origin: 0 0;
}

.mm-map-stage.is-animating { transition: transform 0.3s ease; }

.mm-map-controls {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mm-map-controls button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    border-radius: 50%;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.mm-hint {
    margin: 10px 2px 0;
    font-size: 10.5px;
    line-height: 1.6;
    color: #9d93b0;
    letter-spacing: 0.03em;
}

.mm-band-label {
    position: absolute;
    z-index: 10;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.mm-band-count { color: #f72585; margin-left: 6px; }

.mm-pin {
    position: absolute;
    z-index: 20;
    width: 50px;
    height: 50px;
    padding: 0;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mm-pin-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.mm-pin-label {
    position: absolute;
    top: 48px;
    font-size: 11px;
    color: #f4ede0;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.mm-embed .is-dimmed { opacity: 0.2; pointer-events: none; }

.mm-pin img[src*="img/tamago.png"],
.mm-pin img[src*="img/denkyu.png"] {
    animation: glow-pulse 2s infinite alternate ease-in-out;
}

@keyframes glow-pulse {
    0% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6))
                drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
    }
    100% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
                drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
    }
}

/* 全画面モード */
body.mm-fullscreen-open { overflow: hidden; }

/* .scroll-section の transform が position:fixed の基準になってしまうため、
   全画面表示中だけ解除する（is-visible 状態では translateY(0) なので見た目は変わらない） */
body.mm-fullscreen-open .scroll-section {
    transform: none !important;
}

.mm-embed.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 10005;
    border-radius: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    box-shadow: none;
}

.mm-embed.is-fullscreen .mm-view.is-active { flex: 1; min-height: 0; }
.mm-embed.is-fullscreen .mm-map-frame { height: 100%; border-radius: 14px; }
.mm-embed.is-fullscreen #mm-list-view { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mm-embed.is-fullscreen .mm-hint { display: none; }



.mm-list-title {
    line-height: 1.4;
    margin-top: 0px;
    margin-bottom: 24px;
    color: #1e1b4b;
    /* border: solid 1px #eae7e1; */
    border-radius: 12px;
    /* padding: 25px 20px 20px 20px; */
    /* 右上のサークルと衝突しないよう、タイトルの上下余白を微調整 */
    letter-spacing: 0.08em;
    display: flex;
    flex-direction: column; /* 縦に並べることで画像を上に配置 */
    gap: 12px;
    /* background: linear-gradient(135deg, #1e1b4b 0%, #311042 100%); */
    position: relative;
    /* 左側に数字画像が入り込むための余白（60px）を確保 */
    width: 100%;
    margin-bottom: 10px;    /* タイトル下のコンテンツとの余白 */
}

.mm-list-title h3 {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

/* キラキラのスタイリング */
/* 左右のキラキラ共通のベース設定 */
.mm-list-kirakira-l,
.mm-list-kirakira-r {
    display: inline-block;
    height: 2em; /* 文字の大きさに合わせる */
    width: auto;
    object-fit: contain;
    
    /* スマホ長押し拡大防止 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* --- ①【位置のズレ】と ②【アニメーション】の個別設定 --- */

/* 左側のキラキラ：ほんの少し「下」にズラし、3秒周期でゆったり浮遊 */
.mm-list-kirakira-l {
    position: absolute;
    top:-30px;
    left:20px;
    transform: translateY(0.1em); 
    animation: floatKirakiraLeft 3s ease-in-out infinite;
}

.mm-list-kirakira-l-2 {
    position: absolute;
    top:-20px;
    left:2px;
    transform: translateY(0.1em); 
    animation: floatKirakiraLeft 3s ease-in-out infinite;
}

/* 右側のキラキラ：ほんの少し「上」にズラし、2.4秒周期で少し早めに浮遊 */
.mm-list-kirakira-r {
    position: absolute;
    bottom:-50px;
    right:5px;
    transform: translateY(-0.2em); 
    animation: floatKirakiraRight 2.4s ease-in-out infinite;
}

.mm-list-kirakira-r-2 {
    position: absolute;
    bottom:-30px;
    right:10px;
    transform: translateY(-0.2em); 
    animation: floatKirakiraRight 2.4s ease-in-out infinite;
}

.mm-list-kirakira-l img {
    display: block;
    height: 20px;           /* デザインに合わせてサイズは自由に調整してください */
    width: auto;
}
.mm-list-kirakira-l-2 img {
    display: block;
    height: 30px;           /* デザインに合わせてサイズは自由に調整してください */
    width: auto;
}

.mm-list-kirakira-r img {
    display: block;
    height: 20px;           /* デザインに合わせてサイズは自由に調整してください */
    width: auto;
}


.mm-list-kirakira-r-2 img {
    display: block;
    height: 30px;           /* デザインに合わせてサイズは自由に調整してください */
    width: auto;
}

/* 蛍光ペン風マーカー */
.mm-marker {
    background: linear-gradient(transparent 62%, #ffff00 62%);
    /* 折り返した各行にも同じ背景を描く */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 1px;
    font-weight: 700;
}


.contact-section-member-list {
        margin: 50px auto 60px auto;
    padding: 0px;
    max-width: 380px;
    text-align: center;

}

.copyright-member-list {
    font-size: 11px;
    color: #aaa59e;
    letter-spacing: 0.15em;
    text-align: center;
}

/* --------------------------------------------------------------------------
   トップへ戻るボタンの位置調整
   トップページはスマホ下部ナビを避けるため bottom:80px（PWA/LINEは115px）だが、
   このページには下部ナビがないため、その回避ぶんを取り消して下げる。
   style.css 側が !important を使っているため、こちらも !important が必要
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .scroll-top-btn,
    body.is-pwa .scroll-top-btn,
    body.is-line .scroll-top-btn {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
    }
}