@charset "utf-8";

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333333;
    background: linear-gradient(135deg, #fdf4ff 0%, #e0f2fe 50%, #e0e7ff 100%);
    background-attachment: fixed; 
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.8;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

ul, ol {
    list-style: none;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-logo img {
    height: 40px;
    width: auto;
}

#global-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

#global-nav ul {
    display: flex;
    gap: 1.5rem;
}

#global-nav a {
    font-weight: bold;
    font-size: 0.95rem;
    color: #475569;
    padding: 0.5rem 0.8rem;
    border-radius: 20px;
    transition: all 0.2s ease;
}

#global-nav a:hover {
    color: #2563eb;
    background-color: #eff6ff;
}

.header-sns {
    display: flex;
    gap: 0.8rem;
}

.admin-header-link {
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    color: #475569 !important;
    white-space: nowrap;
}

.admin-header-link:hover {
    color: #2563eb !important;
    background-color: #eff6ff;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
}

#mobile-menu-logo {
    display: none;
}

main {
    flex: 1;
    max-width: 1000px;
    width: 90%;
    margin: 2.5rem auto 4rem;
}

section {
    margin-bottom: 3.5rem;
}

h1 {
    font-size: 2.2rem;
    font-weight: 800;
    text-align: center;
    color: #1e3a8a;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

h1::after {
    content: '';
    display: block;
    width: 50%;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    margin: 0.3rem auto 0;
    border-radius: 2px;
}

#top {
    text-align: center;
    height: 25vh;
    min-height: 220px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
}

#main-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#main-visual img {
    width: min(980px, 96vw);
    max-width: 100%;
    height: auto;
    margin-bottom: -115px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

#Slogan {
    position: relative;
    z-index: 1;
}

.content-wrapper {
    background: #ffffff;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.slogan-examination h2 {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.slogan-title2 h3 {
    font-size: 2.5rem;
    font-weight: 900;
    color: #2563eb;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.slogan-detail p {
    color: #334155;
    font-size: 1rem;
    line-height: 1.8;
}


#News,
.news-page-section {
    width: 100%;
}

#News .news-title,
.news-page-title {
    margin-bottom: 1.25rem;
}

#News .news-title h1,
.news-page-title h1 {
    margin-bottom: 0;
}

#news-list {
    display: grid;
    gap: 0.9rem;
    width: 100%;
}

.news-item {
    width: 100%;
}

.news-item-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "badge title date"
        ". summary summary";
    align-items: center;
    column-gap: 0.9rem;
    row-gap: 0.45rem;
    width: 100%;
    padding: 1.05rem 1.25rem;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.055);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.news-item-inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 24px rgba(15, 23, 42, 0.09);
    border-color: rgba(99, 102, 241, 0.18);
}

.news-badge {
    grid-area: badge;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.8rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.news-badge.badge-info {
    background: #eef2ff;
    color: #4f46e5;
}

.news-badge.badge-event {
    background: #ecfeff;
    color: #0891b2;
}

.news-badge.badge-important {
    background: #fff1f2;
    color: #e11d48;
}

.news-text {
    grid-area: title;
    min-width: 0;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.55;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.news-date {
    grid-area: date;
    justify-self: end;
    font-size: 0.78rem;
    font-weight: 650;
    color: #64748b;
    white-space: nowrap;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
}

.news-summary {
    grid-area: summary;
    margin: 0;
    padding-top: 0.2rem;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.news-loading,
.no-news,
.news-error {
    width: 100%;
    padding: 1.4rem;
    text-align: center;
    color: #64748b;
    background: rgba(255, 255, 255, 0.72);
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
}

.news-error {
    color: #be123c;
    background: #fff1f2;
    border-color: #fecdd3;
}

#news-page {
    max-width: 920px;
    margin-top: 3rem;
}

#news-page .news-page-section {
    padding: 1.5rem 0 2rem;
}

#news-page #news-list {
    gap: 1rem;
}

@media (max-width: 640px) {
    .news-item-inner {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "badge date"
            "title title"
            "summary summary";
        padding: 1rem;
        column-gap: 0.65rem;
    }

    .news-date {
        justify-self: end;
    }

    .news-text {
        font-size: 0.96rem;
    }

    .news-summary {
        font-size: 0.84rem;
    }

    #news-page {
        width: 92%;
        margin-top: 2rem;
    }
}

#location-map {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}

#location-map iframe {
    width: 100%;
    height: 300px;
    border: none;
}

#location-info {
    background: #ffffff;
    padding: 1.2rem 2rem;
    border-radius: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

#location-info p {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.text-station-label, .text-access-label {
    background: #3b82f6;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}

.text-station-name, .text-access-dist {
    font-weight: bold;
    color: #1e293b;
}

.map-container {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.map-image {
    border-radius: 12px;
    margin-bottom: 1rem;
}

.map-description h2 {
    font-size: 1.3rem;
    color: #1e3a8a;
    margin-bottom: 0.5rem;
}

.stage-section {
    margin-bottom: 2.5rem;
}

.stage-section h2, .timetable-container h2 {
    font-size: 1.4rem;
    color: #1e3a8a;
    margin-bottom: 1rem;
    border-left: 5px solid #3b82f6;
    padding-left: 0.8rem;
}

.event-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.event-card-item {
    background: #ffffff;
    padding: 1.2rem;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    border-top: 4px solid #3b82f6;
}

.event-time {
    display: inline-block;
    background: #eff6ff;
    color: #2563eb;
    font-weight: bold;
    font-size: 0.85rem;
    padding: 0.2rem 0.6rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.event-title {
    font-size: 1.1rem;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.event-desc {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}

.timetable-container {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
}

.timetable-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.timetable-table th, .timetable-table td {
    border: 1px solid #e2e8f0;
    padding: 0.8rem;
    text-align: center;
    font-size: 0.9rem;
}

.timetable-table th {
    background-color: #f8fafc;
    color: #334155;
    font-weight: bold;
}

.time-col {
    width: 120px;
}

.event-cell {
    border-radius: 8px;
    font-weight: bold;
}

.event-cell.blue { background-color: #dbeafe; color: #1e40af; }
.event-cell.yellow { background-color: #fef9c3; color: #854d0e; }
.event-cell.green { background-color: #dcfce7; color: #166534; }
.event-cell.pink { background-color: #fce7f3; color: #9d174d; }

.part-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.part-card {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.part-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.part-card.food { border-top: 5px solid #ef4444; }
.part-card.exhibit { border-top: 5px solid #3b82f6; }
.part-card.performance { border-top: 5px solid #10b981; }

.part-card-header {
    margin-bottom: 0.8rem;
}

.part-group {
    font-size: 0.75rem;
    font-weight: bold;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 0.3rem;
}

.part-name {
    font-size: 1.2rem;
    color: #0f172a;
}

.part-desc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
}

footer {
    background-color: #1e293b;
    color: #f8fafc;
    padding: 2.5rem 1.5rem 1rem;
    margin-top: auto;
}

footer nav {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-brand .footer-img img {
    max-width: 160px;
    margin-bottom: 0.5rem;
}

.footer-brand p {
    font-size: 0.85rem;
    color: #94a3b8;
}

.footer-sitemap h2, .footer-sns h2 {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    color: #38bdf8;
}

.footer-sitemap ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-sitemap a {
    color: #cbd5e1;
    font-size: 0.9rem;
}

.sns-links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.sns-links a {
    color: #cbd5e1;
    font-size: 0.9rem;
}

.line-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    background: #06c755;
    color: #ffffff;
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.line-icon::before {
    content: "";
    width: 34px;
    height: 26px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 11px;
    left: 9px;
}

.line-icon::after {
    content: "LINE";
    position: absolute;
    top: 17px;
    left: 0;
    width: 52px;
    color: #06c755;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-align: center;
    z-index: 1;
}

.line-icon:hover {
    transform: scale(1.08);
    opacity: 0.9;
}

.line-icon:focus-visible {
    outline: 3px solid rgba(6, 199, 85, 0.35);
    outline-offset: 3px;
}

footer small {
    display: block;
    text-align: center;
    color: #64748b;
    font-size: 0.75rem;
    border-top: 1px solid #334155;
    padding-top: 1rem;
}

@media (max-width: 768px) {
    #global-nav {
        display: none; 
    }
    
    .menu-toggle {
        display: flex;
    }

    #location-info {
        flex-direction: column;
        gap: 1rem;
    }

    .part-grid {
        grid-template-columns: 1fr;
    }

    #top {
        height: 24vh;
        min-height: 190px;
    }

    #main-visual img {
        width: min(98vw, 900px);
        margin-bottom: -80px;
    }
}

@media (max-width: 768px) {
    #global-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 999;
    }

    #global-nav.active {
        right: 0;
    }

    #global-nav ul {
        flex-direction: column;
        gap: 2rem;
    }
}

.filter-container {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.filter-btn {
    border: none;
    background: #ffffff;
    color: #475569;
    font-weight: bold;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.filter-btn.active, .filter-btn:hover {
    background: #2563eb;
    color: #ffffff;
}

.part-card {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.view-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin: 1.5rem auto 1rem;
    padding: 0.5rem 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    width: fit-content;
}

.counter-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: #38bdf8;
    letter-spacing: 1px;
}

.counter-num {
    font-family: 'Courier New', Courier, monospace; /* 数字を見やすく揃えるフォント */
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
    background: #0f172a;
    padding: 0.2rem 0.8rem;
    border-radius: 6px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    min-width: 8ch; 
    white-space: nowrap;
    text-align: center;
}
#access {
    width: 100%;
    max-width: 860px;
    margin: 0 auto 3.5rem;
}

#access .access-title {
    margin-bottom: 0.8rem;
    text-align: left;
}

#access .access-title h1 {
    display: inline-block;
    left: auto;
    transform: none;
    text-align: left;
    font-size: clamp(1.8rem, 4vw, 2.35rem);
    margin: 0 0 0.9rem;
    color: #111827;
}

#access .access-title h1::after {
    width: 100%;
    height: 3px;
    margin: 0.2rem 0 0;
    background: #0ea5e9;
}

#access-map {
    width: 100%;
    max-width: 820px;
    margin: 0 auto 1.6rem;
    border-radius: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

#access-map iframe {
    display: block;
    width: 100%;
    height: clamp(260px, 42vw, 420px);
    min-height: 260px;
    border: 0;
}

#access-info {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    background: transparent;
    padding: 0.2rem 0;
}

#access-info2 {
    width: 100%;
    text-align: center;
}

#access-info2 .access-line {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.15rem 0;
    color: #0f172a;
    font-weight: 800;
    line-height: 1.25;
}

#access-info2 .text1,
#access-info2 .text2,
#access-info2 .text3 {
    font-size: clamp(1.05rem, 2.7vw, 1.55rem);
}

#access-info2 .text4 {
    font-size: clamp(1.65rem, 4.5vw, 2.4rem);
    color: #00e5ff;
    font-weight: 900;
    letter-spacing: 0.01em;
}

@media (max-width: 768px) {
    #access {
        width: 100%;
        margin-bottom: 2.7rem;
    }

    #access .access-title h1 {
        font-size: 1.8rem;
    }

    #access-map iframe {
        height: 300px;
        min-height: 300px;
    }

    #access-info2 .access-line {
        gap: 0.3rem;
    }
}


@media(max-width:700px){.news-page-section{padding:110px 0 70px;}.news-page-card{padding:20px;}.news-page-meta{align-items:flex-start;flex-direction:column;gap:8px;}}

#news-page .news-title{margin-bottom:24px;}
#news-page #news-list{max-width:100%;}
#news-page .news-item-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:16px 0;
}
#news-page .news-summary{
  grid-column:2 / -1;
  margin:0;
  line-height:1.7;
  opacity:.82;
}
@media(max-width:700px){
  #news-page .news-item-inner{
    grid-template-columns:auto 1fr;
    gap:8px 12px;
  }
  #news-page .news-date{grid-column:2;}
  #news-page .news-summary{grid-column:1 / -1;}
}


.news-admin-panel {
    margin: 0 auto 2rem;
    max-width: 1000px;
    padding: 1rem;
    border: 1px solid rgba(30, 41, 59, .12);
    border-radius: 16px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(8px);
}
.news-admin-status {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.75rem;
    flex-wrap:wrap;
}
.news-admin-btn,
.news-edit-btn,
.news-delete-btn {
    border:0;
    border-radius:10px;
    padding:.65rem 1rem;
    cursor:pointer;
    font-weight:700;
}
.news-admin-btn { background:#fff; color:#1e293b; }
.news-admin-primary { background:#1e40af; color:#fff; }
.news-editor {
    margin-top:1rem;
    padding:1rem;
    border-radius:14px;
    background:rgba(255,255,255,.75);
}
.news-editor label { display:block; margin-top:.8rem; }
.news-editor label > span { display:block; margin-bottom:.35rem; font-weight:700; }
.news-editor input,
.news-editor select,
.news-editor textarea {
    box-sizing:border-box;
    width:100%;
    padding:.7rem .8rem;
    border:1px solid #cbd5e1;
    border-radius:9px;
    background:#fff;
    font:inherit;
}
.news-editor-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}
.news-editor-actions {
    display:flex;
    gap:.6rem;
    margin-top:1rem;
}
.news-login-help { margin:.75rem 0 0; font-size:.9rem; }
.news-edit-actions {
    display:flex;
    gap:.5rem;
    margin-top:.75rem;
}
.news-edit-btn { background:#e0e7ff; color:#1e3a8a; }
.news-delete-btn { background:#fee2e2; color:#991b1b; }

@media (max-width: 640px) {
    .news-editor-grid { grid-template-columns:1fr; }
    .news-admin-status { justify-content:stretch; }
    .news-admin-btn { flex:1; }
}


.news-login-form {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(255,255,255,.75);
    max-width: 520px;
    margin-left: auto;
}
.news-login-form label { display:block; margin-top:.8rem; }
.news-login-form label > span { display:block; margin-bottom:.35rem; font-weight:700; }
.news-login-form input { box-sizing:border-box; width:100%; padding:.7rem .8rem; border:1px solid #cbd5e1; border-radius:9px; background:#fff; font:inherit; }
.news-login-form .news-admin-btn { margin-top:1rem; }
.news-login-error { margin:.75rem 0 0; color:#b91c1c; font-weight:700; }


.admin-back-btn {
    position: fixed;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #1e293b;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.08);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    backdrop-filter: blur(8px);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.admin-back-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

.admin-back-btn:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.28);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .admin-back-btn {
        top: 0.75rem;
        left: 0.75rem;
        padding: 0.58rem 0.82rem;
        font-size: 0.82rem;
    }
}

.admin-back-btn{position:static;display:flex;width:100%;box-sizing:border-box;justify-content:center;align-items:center;margin-top:.7rem;padding:.68rem 1rem;border-radius:10px;background:transparent;color:#475569;border:1px solid #cbd5e1;box-shadow:none;text-decoration:none;font-weight:700;font-size:.9rem;line-height:1.2;transition:background .18s ease,color .18s ease,border-color .18s ease}
.admin-back-btn:hover{background:#f8fafc;color:#1e293b;border-color:#94a3b8}
.admin-back-btn:focus-visible{outline:3px solid rgba(99,102,241,.28);outline-offset:2px}


.top-view-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1rem 1rem 0.5rem;
    text-align: center;
}

.view-counter-top {
    margin: 0;
}

.milestone-message {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
}

.milestone-message.milestone-active {
    color: #7c3aed;
    font-size: 1rem;
    animation: milestone-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes milestone-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.04); }
}


/* Firebase Timetable */
.timetable-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.event-stage { margin-top:0.6rem; font-size:0.78rem; font-weight:700; color:#64748b; }
.timetable-table td .event-cell { margin:0.15rem 0; padding:0.55rem; border-radius:8px; background:rgba(59,130,246,0.08); }


/* ===== Timetable duration timeline ===== */
.timetable-visual-container{
    margin-top:1.25rem;
    padding:1.5rem;
    overflow-x:auto;
}
.timetable-timeline{
    width:100%;
    overflow-x:auto;
    padding-bottom:1rem;
    -webkit-overflow-scrolling:touch;
}
.timeline-header{
    display:grid;
    grid-template-columns:var(--axis-width) repeat(4,var(--stage-width));
    min-width:1220px;
    border-bottom:2px solid #cbd5e1;
}
.timeline-header>div{
    padding:.9rem .45rem;
    text-align:center;
    font-weight:700;
    font-size:.9rem;
    background:#f8fafc;
    border-right:1px solid #e2e8f0;
    white-space:nowrap;
}
.timeline-header-time{
    position:sticky;
    left:0;
    z-index:8;
}
.timeline-body{
    position:relative;
    display:grid;
    grid-template-columns:var(--axis-width) repeat(4,var(--stage-width));
    min-width:1220px;
}
.timeline-time-axis{
    position:relative;
    height:100%;
    background:#fff;
    border-right:2px solid #94a3b8;
    z-index:6;
}
.timeline-time-label{
    position:absolute;
    left:0;
    width:100%;
    transform:translateY(-50%);
    padding-right:.45rem;
    text-align:right;
    font-size:.85rem;
    font-weight:700;
    color:#334155;
    box-sizing:border-box;
    white-space:nowrap;
}
.timeline-hour-line{
    position:absolute;
    left:0;
    width:100%;
    border-top:1px solid #cbd5e1;
    pointer-events:none;
}
.timeline-stage-area{
    position:absolute;
    left:var(--axis-width);
    right:0;
    top:0;
    height:100%;
    display:grid;
    grid-template-columns:repeat(4,var(--stage-width));
    background:#fff;
}
.timeline-stage-column{
    position:relative;
    min-width:0;
    border-right:1px solid #e2e8f0;
}
.timeline-grid-line{
    position:absolute;
    left:0;
    right:0;
    border-top:1px solid #e2e8f0;
    pointer-events:none;
    z-index:1;
}
.timeline-event{
    position:absolute;
    left:8px;
    right:8px;
    min-height:64px;
    box-sizing:border-box;
    padding:.7rem .75rem;
    border-radius:12px;
    background:#dbeafe;
    border:1px solid #93c5fd;
    box-shadow:0 3px 10px rgba(15,23,42,.08);
    overflow:auto;
    z-index:3;
}
.timeline-event strong{
    display:block;
    color:#1e3a8a;
    font-size:.92rem;
    line-height:1.35;
    overflow-wrap:anywhere;
}
.timeline-event span{
    display:block;
    margin-top:.3rem;
    color:#2563eb;
    font-size:.82rem;
    font-weight:700;
}
.timeline-event small{
    display:block;
    margin-top:.5rem;
    color:#475569;
    font-size:.9rem;
    line-height:1.55;
    overflow-wrap:anywhere;
}
@media(max-width:700px){
    .timetable-visual-container{padding:.8rem}
    .timeline-header,.timeline-body{min-width:1220px}
    .timeline-event{padding:.6rem .65rem}
    .timeline-event strong{font-size:.9rem}
    .timeline-event small{font-size:.82rem}
}

#timetable-page {
    max-width: 1600px;
    width: 90%;
}

.timetable-visual-container {
    width: 100%;
    padding: 1rem;
    overflow-x: auto;
    overflow-y: visible;
}

#timetable-timeline {
    width: 100%;
    min-width: 0;
}

.timeline-header,
.timeline-body {
    display: grid;
    grid-template-columns: var(--axis-width) repeat(4, minmax(0, 1fr));
    width: 100%;
}

.timeline-header {
    position: sticky;
    top: 0;
    z-index: 5;
}

.timeline-header > div {
    min-width: 0;
    padding: 0.7rem 0.35rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.timeline-header-time {
    grid-column: 1;
}

.timeline-body {
    position: relative;
    min-height: 0;
}

.timeline-time-axis {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    width: 100%;
}

.timeline-stage-area {
    grid-column: 2 / 6;
    grid-row: 1;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.timeline-stage-column {
    position: relative;
    min-width: 0;
    width: 100%;
    border-left: 1px solid #e2e8f0;
    border-right: 0;
}

.timeline-event {
    position: absolute;
    left: 6px;
    right: 6px;
    min-height: 48px;
    overflow: visible;
    z-index: 5;
}

@media (max-width: 640px) {
    #timetable-page {
        width: 96%;
    }

    .timetable-visual-container {
        padding: 0.6rem;
    }

    #timetable-timeline {
        min-width: 680px;
        width: 680px;
    }

    .timeline-header,
    .timeline-body {
        grid-template-columns: var(--axis-width) repeat(4, minmax(0, 1fr));
    }

    .timeline-header > div {
        font-size: 0.72rem;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }
}

/* ===== Timetable: long descriptions in short time slots ===== */
.timeline-event {
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.timeline-event small {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ===== Mobile navigation drawer fix ===== */
@media (max-width: 768px) {
    header {
        position: sticky;
        top: 0;
        z-index: 2000;
    }

    .menu-toggle {
        display: flex;
        position: relative;
        z-index: 2002;
        flex-shrink: 0;
        pointer-events: auto;
    }

    #global-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        width: min(80vw, 360px);
        max-width: 80vw;
        height: 100dvh;
        box-sizing: border-box;
        margin: 0;
        padding: 5rem 1.25rem 2rem;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.14);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 2001;
        overflow-y: auto;
        overflow-x: hidden;
        visibility: hidden;
    }

    #global-nav.active {
        transform: translateX(0);
        visibility: visible;
    }

    #global-nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #global-nav li {
        width: 100%;
        text-align: center;
    }

    #global-nav a {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #mobile-menu-logo {
        display: block;
        margin-bottom: 1.5rem;
        width: auto;
    }

    #mobile-menu-logo img {
        height: 42px;
        width: auto;
    }

    .header-sns {
        justify-content: center;
    }

    /* メニューの外側を暗くして、サイト本体を縮めずに重ねる */
    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.35);
        z-index: 1999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-nav-backdrop.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Prevent horizontal scrolling on mobile */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }
}