@charset "utf-8";

/* ===================================================================
   ノイフィルハーモニー管弦楽団
   =================================================================== */

:root {
    --green-deep:    #1a4414;
    --green-dark:    #2a6020;
    --green-primary: #3d8b37;
    --green-light:   #5aa04f;
    --green-pale:    #e8f5e3;
    --green-ultra:   #f4faf2;

    --text-dark:   #1e1e1e;
    --text-body:   #333333;
    --text-muted:  #777777;

    --gray-100: #f5f5f5;
    --gray-200: #e8e8e8;
    --gray-300: #cccccc;

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);

    --radius-sm: 3px;
    --radius:    6px;
    --ease:      0.2s ease;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
    color: var(--text-body);
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: 'Noto Sans JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    background: #fff;
}

h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, form {
    margin: 0;
    padding: 0;
}

ul { list-style-type: none; }
img { border: none; max-width: 100%; }
input, textarea, select { font-size: 1em; font-family: inherit; }
form { margin: 0; }
table { border-collapse: collapse; font-size: 100%; border-spacing: 0; }
address { font-style: normal; }

/* ===== Links ===== */
a {
    color: #2266bb;
    text-decoration: none;
    transition: color var(--ease);
}
a:hover {
    color: #174d8f;
    text-decoration: underline;
}

/* ===== Container ===== */
#container {
    text-align: left;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background: #fff;
}

/* ===== Header ===== */
header {
    background: #fff;
    height: 90px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    position: relative;
}

header p { margin: 0; padding: 0; }

/* CSS text logo (replaces logo.gif — Retina-ready, uses Noto Sans JP) */
header #logo { line-height: normal; }

header #logo a {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
}

header #logo a:hover { text-decoration: none; }

.logo-ja {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--green-primary);
    letter-spacing: 0.03em;
    line-height: 1.15;
    white-space: nowrap;
    transition: color var(--ease);
}

.logo-en {
    display: block;
    font-size: 12.5px;
    font-weight: 300;
    color: var(--green-light);
    letter-spacing: 0.18em;
    white-space: nowrap;
    transition: color var(--ease);
}

header #logo a:hover .logo-ja { color: var(--green-dark); }
header #logo a:hover .logo-en { color: var(--green-primary); }

/* ===== Navigation ===== */
nav#global-nav {
    background: var(--green-primary);
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    position: relative; /* for .nav-toggle positioning */
}

nav#global-nav ul {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

nav#global-nav ul li a {
    display: block;
    padding: 13px 22px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: background var(--ease);
}

nav#global-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: rgba(255,255,255,0.55);
    transition: width var(--ease);
}

nav#global-nav ul li a:hover,
nav#global-nav ul li a.active {
    background: var(--green-dark);
    text-decoration: none;
    color: #fff;
}

nav#global-nav ul li a:hover::after,
nav#global-nav ul li a.active::after {
    width: 60%;
}

/* Hamburger toggle button (in header, hidden on desktop) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-body);
    border-radius: 1px;
    transition: transform var(--ease), opacity var(--ease), background var(--ease);
}

/* ===== Main ===== */
main {
    width: 100%;
    padding: 32px 40px;
}

/* h1 */
main h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    padding: 10px 0 10px 16px;
    border-left: 4px solid var(--green-primary);
    margin-bottom: 20px;
}

main h1.welcome {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-muted);
    border-left: none;
    padding: 0 0 4px 4px;
    margin-bottom: 8px;
}

/* h2 */
main h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    padding: 10px 0 10px 14px;
    border-left: 4px solid var(--green-light);
    margin: 44px 0 14px;
}

/* h3 */
main h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 8px;
}

/* Paragraphs */
main p {
    padding: 0.3em 0 0.7em;
    line-height: 1.9;
}

/* ===== Slideshow (index.html only) ===== */
#mainimg {
    position: relative;
    height: 500px;
    width: 100%;
    overflow: hidden;
}

#mainimg .slide_file { display: none; }

#slide_image {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#slide_image2 {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Welcome section (index.html) ===== */
.welcome-section {
    text-align: center;
    padding: 3em 1em 2.5em;
}

.welcome-heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    border-left: none;
    padding: 0;
    margin: 0 0 1.2em;
    line-height: 1.3;
}

.welcome-lead {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.8;
    padding: 0;
    margin: 0;
}

.welcome-sub {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-body);
    line-height: 1.8;
    padding: 0;
    margin: 0 0 2em;
}

.welcome-action { padding: 0; margin: 0; }

.btn-outline {
    display: inline-block;
    padding: 14px 40px;
    border: 2px solid var(--green-primary);
    border-radius: 6px;
    background: var(--green-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.btn-outline:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: #fff;
    text-decoration: none;
}

/* ===== Updates list (index.html) ===== */
main .updates-list {
    overflow: auto;
    max-height: 200px;
    width: 100%;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
}

main .updates-list dl {
    clear: left;
    border-bottom: 1px solid var(--gray-200);
    overflow: hidden;
    padding: 7px 14px;
}

main .updates-list dl:last-child { border-bottom: none; }

main .updates-list dt {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    float: left;
    width: 88px;
}

main .updates-list dd {
    float: left;
    width: calc(100% - 88px);
    font-size: 15px;
}

/* ===== Card (history.html) ===== */
main .card {
    display: flex;
    gap: 2.5em;
    align-items: flex-start;
    background: #fff;
    padding: 20px 24px;
    margin-bottom: 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--ease), border-color var(--ease);
}

main .card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--green-pale);
}

.card-image { flex: 0 0 auto; }

.card-image img {
    display: block;
    width: 200px;
    height: auto;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    transition: border-color var(--ease);
}

.card-image a:hover img { border-color: var(--green-primary); }

.card-body {
    flex: 1;
    min-width: 0;
}

main .card h4 {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 10px;
    color: var(--green-dark);
    border-bottom: 1px solid var(--gray-200);
    margin: 0 0 12px;
}

/* dl inside .card-body (concert detail grid in history.html) */
.card-body dl {
    display: grid;
    grid-template-columns: 3.5em 1fr;
    gap: 0.35em 0.8em;
    margin: 0 0 1em;
    font-size: 0.875em;
    line-height: 1.6;
}

.card-body dl dt {
    font-weight: 600;
    color: var(--green-dark);
    white-space: nowrap;
}

.card-body dl dd { margin: 0; }

main .card p {
    padding: 0.8em 0 0;
    font-size: 0.875em;
    line-height: 1.7;
    margin: 0;
    border-top: 1px solid var(--gray-200);
}

/* ===== Data Table ===== */
.data-table { width: 100%; }

.data-table,
.data-table td,
.data-table th {
    border: 1px solid var(--gray-300);
    line-height: 1.8;
}

.data-table td {
    padding: 10px 16px;
    vertical-align: top;
}

.data-table th {
    padding: 10px 16px;
    text-align: center;
    background: var(--green-ultra);
    font-weight: 600;
    color: var(--text-dark);
    vertical-align: middle;
}

/* Header row */
.data-table thead th {
    color: #fff;
    background: var(--green-primary);
    font-size: 15px;
}

td.center { text-align: center; }

/* Schedule cards (practice.html) */
.schedule-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 1.5em;
}

.schedule-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}

.schedule-card.past {
    opacity: 0.5;
}

.schedule-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--green-ultra);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 500;
}

.schedule-card-header .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: var(--green-primary);
    color: #fff;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.schedule-card-header .date {
    font-size: 15px;
    color: var(--text-dark);
}

.schedule-card-body {
    padding: 10px 14px;
}

.schedule-card-body dl {
    display: grid;
    grid-template-columns: 3em 1fr;
    gap: 4px 10px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.schedule-card-body dt {
    color: var(--text-muted);
    font-weight: 500;
}

.schedule-card-body dd {
    margin: 0;
}

.schedule-card.honban .schedule-card-header {
    background: var(--green-primary);
}

.schedule-card.honban .schedule-card-header .num {
    background: #fff;
    color: var(--green-primary);
}

.schedule-card.honban .schedule-card-header .date {
    color: #fff;
}

/* ===== Contact Page (contact.html) ===== */
.contact-lead {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-body);
    margin-bottom: 2em;
}

.contact-card {
    background: var(--green-ultra);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    margin-bottom: 2em;
}

.contact-card .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--green-primary);
    border-radius: 50%;
    margin-bottom: 12px;
}

.contact-card .contact-icon svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

.contact-card h2 {
    border: none;
    padding: 0;
    margin: 0 0 8px;
    font-size: 18px;
}

.contact-card address { font-style: normal; }

.contact-card .email-link {
    font-size: 18px;
    font-weight: 500;
    color: var(--green-primary);
    text-decoration: none;
}
.contact-card .email-link:hover { text-decoration: underline; }

.contact-card .contact-note {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
}

.inquiry-note {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 1em;
}

.inquiry-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2em;
}

.inquiry-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-200);
    font-size: 15px;
    line-height: 1.6;
}

.inquiry-list li:last-child { border-bottom: none; }

.inquiry-list .inquiry-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--green-pale);
    border-radius: 50%;
    flex-shrink: 0;
}

.inquiry-list .inquiry-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--green-primary);
}

/* ===== Event Poster (concert.html) ===== */
.event-poster {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 10px 0 40px;
    text-align: center;
}

.event-poster a {
    flex: 0 1 500px;
    max-width: calc((100% - 20px) / 2);
    text-decoration: none;
}

.event-poster a:only-of-type { max-width: 500px; }

.event-poster.concert-poster a {
    flex-basis: 450px;
    max-width: calc((90% - 20px) / 2);
}

.event-poster.home-poster a {
    flex-basis: 425px;
    max-width: 85%;
}

.event-poster img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--ease);
}

.event-poster img:hover { box-shadow: var(--shadow-md); }

.now-printing {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 300px;
    height: 423px;
    margin: 0 10px;
    background: var(--gray-100);
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-sm);
    color: var(--gray-300);
}

.now-printing svg { opacity: 0.4; }

.now-printing span:first-of-type {
    font-size: 14px;
    font-weight: 500;
}

.now-printing span:last-of-type {
    font-size: 13px;
    font-style: italic;
}

/* ===== Detail List (concert.html, index.html) ===== */
dl.detail-list {
    display: grid;
    grid-template-columns: 100px 1fr;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 15px;
    margin: 0;
}

dl.detail-list dt {
    font-weight: 600;
    text-align: center;
    background: var(--green-ultra);
    border-right: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-300);
    padding: 12px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.6;
}

dl.detail-list dd {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-300);
    line-height: 1.8;
}

dl.detail-list dt:last-of-type,
dl.detail-list dd:last-of-type {
    border-bottom: none;
}

dl.detail-list .notice {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: normal;
}

/* ===== Concert Summary (index.html トップページ用・非テーブル) ===== */
ul.concert-summary {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em;
    font-size: 16px;
}

ul.concert-summary li {
    display: flex;
    gap: 1.2em;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dotted var(--gray-200);
    line-height: 1.8;
}

ul.concert-summary li:last-child {
    border-bottom: none;
}

ul.concert-summary .label {
    font-weight: 600;
    color: var(--green-primary);
    min-width: 3em;
    flex-shrink: 0;
}

ul.concert-summary.wide .label {
    min-width: 7em;
}

.concert-more {
    text-align: left;
    margin-top: 0.8em;
}

.concert-more a {
    display: inline-block;
    padding: 8px 22px;
    border: 2px solid var(--green-primary);
    border-radius: 6px;
    background: var(--green-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.concert-more a:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: #fff;
    text-decoration: none;
}

/* ===== YouTube video grid (index.html) ===== */
.video-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 1em 0 1.5em;
}

.video-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    padding: 0 0 6px;
    margin: 0;
    line-height: 1.5;
}

.video-meta {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    border-radius: var(--radius-sm);
}

/* ===== Map ===== */
.map {
    margin: 20px 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
}

.map iframe {
    border: 0;
    display: block;
}

.map iframe {
    display: block;
    width: 100%;
    height: 500px;
}

/* ===== PDF file ===== */
.pdf-file {
    flex-basis: 100%;
    text-align: center;
    margin: 2px 0 0;
}

.pdf-file a {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid #e2aaa5;
    border-radius: var(--radius);
    background: #fff;
    color: #b33a33;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.pdf-file a:hover {
    background: #fff5f4;
    border-color: #c98078;
    color: #92251f;
    text-decoration: none;
}

/* ===== Media object (conductor.html) ===== */
.media {
    margin-bottom: 2em;
}

.media h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 1em;
}

.media h3 .name-en {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: #666;
    margin-top: 0.2em;
}

.media-content {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
}

.media img {
    flex: 0 0 200px;
    max-width: 200px;
    height: auto;
    border-radius: var(--radius-sm);
}

.media-body {
    flex: 1;
    min-width: 0;
}

.media p, .media-body p {
    margin-bottom: 0.8em;
    line-height: 1.85;
}

.sns-profile {
    margin-top: 1.2em;
}

.sns-profile a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green-dark);
    text-decoration: none;
    font-size: 0.85rem;
    border: 1px solid var(--green-dark);
    border-radius: 20px;
    padding: 6px 16px;
    transition: background var(--ease), color var(--ease);
}

.sns-profile a:hover {
    background: var(--green-dark);
    color: #fff;
}

.sns-profile svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ===== Table wrap (join_us.html) ===== */
.table-wrap {
    display: flex;
    justify-content: center;
    margin: 1em 0 1.5em;
}

.table-wrap .data-table {
    width: 340px;
}

.table-wrap .data-table th,
.table-wrap .data-table td {
    text-align: center;
    padding: 5px 14px;
}

/* ===== Info boxes ===== */
.attention {
    margin: 12px 0;
    border: 1px solid #efb5cf;
    background: #f8dfea;
    padding: 1em;
    line-height: 1.6;
    font-size: 14px;
    border-radius: var(--radius-sm);
}

.info-box {
    margin: 12px 0;
    border: 1px solid #bce8f1;
    background: #d9edf7;
    padding: 1em;
    line-height: 1.6;
    font-size: 14px;
    border-radius: var(--radius-sm);
}

.promo-box {
    border: 1px solid var(--green-light);
    padding: 14px;
    margin-bottom: 14px;
    background: #f0ffe8;
    border-radius: var(--radius-sm);
}

.promo-box h3 { font-size: 14px; color: var(--green-dark); }
.promo-box a { text-decoration: none; }

.alert-box {
    margin: 12px 0;
    border: 2px solid #f5c66b;
    background: #fff9e6;
    padding: 1em;
    line-height: 1.6;
    font-size: 14px;
    border-radius: var(--radius-sm);
}

.alert-box strong { color: #e67e22; }

.alert-badge {
    display: inline-block;
    padding: 3px 8px;
    background: #fff3cd;
    border: 1px solid #f5c66b;
    color: #e67e22;
    font-weight: bold;
    border-radius: var(--radius-sm);
}

/* ===== Footer ===== */
footer {
    background: var(--green-ultra);
    border-top: 1px solid var(--gray-200);
}

footer .footer-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    padding: 32px 20px 16px;
}

footer .footer-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .footer-nav ul li {
    display: inline;
    font-size: 13px;
    line-height: 2;
}

footer .footer-nav ul li:not(:last-child)::after {
    content: "|";
    margin: 0 8px;
    color: var(--gray-300);
    font-size: 11px;
}

footer .footer-nav ul li a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--ease);
}

footer .footer-nav ul li a:hover {
    color: #174d8f;
    text-decoration: underline;
}

.copyright {
    text-align: center;
    color: rgba(255,255,255,0.8);
    padding: 20px 20px;
    background: var(--green-deep);
    font-size: 12px;
    line-height: 1.8;
    margin: 0;
}

.copyright p {
    margin: 0;
}

.copyright-sub {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.55);
}

.copyright a {
    text-decoration: none;
    color: rgba(255,255,255,0.65);
    transition: color var(--ease);
}

.copyright a:hover { color: #fff; }

/* ===== SNS Links (footer) ===== */
.sns-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 16px 0 6px;
}

.sns-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--green-primary);
    transition: color var(--ease), transform var(--ease);
    text-decoration: none;
}

.sns-links a:hover {
    color: var(--green-dark);
    transform: scale(1.1);
    text-decoration: none;
}

.sns-links svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* ===== Utility ===== */
.sp-only { display: none; }
.mb1em { margin-bottom: 1em; }
.clear { clear: both; }
ul.disc { padding: 0 25px 1em; list-style: disc; }
.text-accent { color: var(--green-primary); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.c { text-align: center; }


/* =================================================================
   Responsive breakpoints
   PC: 961px+  /  Tablet: 769-960px  /  Mobile: ≤768px
   ================================================================= */

/* ----- Tablet (≤ 960px) ----- */
@media (max-width: 960px) {
    header {
        padding: 0 16px;
        height: 76px;
    }

    .logo-ja { font-size: 24px; }
    .logo-en { font-size: 11px; }

    /* Switch to hamburger nav at tablet */
    .nav-toggle { display: flex; }

    nav#global-nav ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.25s ease;
    }

    nav#global-nav ul.open {
        max-height: 600px;
        opacity: 1;
    }

    nav#global-nav ul li a {
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        text-align: left;
    }

    nav#global-nav ul li a::after { display: none; }

    /* Hamburger animation: X shape when active */
    .nav-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    main { padding: 24px 20px; }

    main h1 { font-size: 22px; }
    main h2 { font-size: 18px; }

    .card { gap: 1.5em; padding: 16px 18px; }
    .card-image img { width: 160px; }

    .video-list { gap: 16px; }

    dl.detail-list { grid-template-columns: 90px 1fr; font-size: 14px; }
}

/* ----- Mobile (≤ 768px) ----- */
@media (max-width: 768px) {
    .sp-only { display: inline; }

    header {
        height: auto;
        min-height: 64px;
        padding: 10px 14px;
    }

    .logo-ja { font-size: 20px; }
    .logo-en { font-size: 10px; }

    main {
        padding: 20px 14px;
    }

    main h1 {
        font-size: 20px;
        padding: 8px 0 8px 12px;
    }

    main h2 {
        font-size: 17px;
        padding: 8px 0 8px 12px;
        margin: 20px 0 10px;
    }

    /* Slideshow: reduced height */
    #mainimg { height: 280px; }

    /* Updates list: stack dt/dd */
    main .updates-list dt {
        float: none;
        width: 100%;
        padding-bottom: 0;
    }

    main .updates-list dd {
        float: none;
        width: 100%;
    }

    /* Cards (history): vertical stack */
    main .card {
        flex-direction: column;
        gap: 1em;
        padding: 14px;
    }

    .card-image { text-align: center; align-self: center; }
    .card-image img { width: 100%; max-width: 280px; }

    .card-body dl {
        grid-template-columns: 3em 1fr;
        gap: 0.2em 0.6em;
    }

    /* Detail list: stack on mobile */
    dl.detail-list {
        grid-template-columns: 1fr;
        font-size: 14px;
    }

    dl.detail-list dt {
        border-right: none;
        padding: 8px 12px;
        text-align: left;
        justify-content: flex-start;
    }

    dl.detail-list dd {
        padding: 8px 12px;
    }

    /* Concert summary list */
    ul.concert-summary li {
        flex-direction: column;
        gap: 0.2em;
        padding: 6px 0;
    }

    ul.concert-summary .label { min-width: auto; }
    ul.concert-summary.wide .label { min-width: auto; }

    /* Video grid: single column with more gap */
    .video-list { grid-template-columns: 1fr; gap: 28px; }

    /* Buttons: center on mobile */
    .concert-more { text-align: center; }
    .welcome-action { text-align: center; }

    /* Tables: horizontal scroll */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    .table-wrap .data-table { width: 100%; min-width: 0; }

    .schedule-cards { gap: 10px; }
    .schedule-card-body dl { font-size: 13px; }

    /* Media object (conductor): stack vertically */
    .media-content {
        flex-direction: column;
        align-items: center;
    }

    .media img {
        flex: 0 0 auto;
        width: 160px;
        height: auto;
        margin-bottom: 0;
    }

    /* Event poster */
    .now-printing {
        width: 140px;
        height: 198px;
        margin: 0 5px;
    }
    .now-printing svg { width: 32px; height: 32px; }
    .now-printing span:first-of-type { font-size: 12px; }
    .now-printing span:last-of-type { font-size: 11px; }

    /* Map */
    .map iframe { height: 350px; }

    /* Footer */
    footer .footer-nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    footer .footer-nav ul li {
        display: block;
        text-align: center;
        border-bottom: 1px solid var(--gray-200);
    }

    footer .footer-nav ul li:nth-last-child(-n+2) {
        border-bottom: none;
    }

    footer .footer-nav ul li:not(:last-child)::after {
        display: none;
    }

    footer .footer-nav ul li a {
        display: block;
        padding: 10px 8px;
        font-size: 13px;
    }

    .sns-links a {
        width: 44px;
        height: 44px;
    }

    .copyright {
        padding: 16px 14px;
        font-size: 11px;
    }
}

/* ----- Narrow mobile only ----- */
@media (max-width: 599px) {
    .event-poster {
        flex-direction: column;
        align-items: center;
    }

    .event-poster a {
        width: 100%;
        max-width: 500px;
    }

    .event-poster.concert-poster a {
        width: 90%;
        max-width: 450px;
    }

    .event-poster.home-poster a {
        width: 85%;
        max-width: 425px;
    }
}