body {
    margin: 0;
    /* Include explicit Windows/Japanese fallbacks for consistent rendering on Windows */
    font-family: 'Noto Sans JP', 'メイリオ', Meiryo, Arial, sans-serif;
    background: #000;
    color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

.logo {
    font-size: 0.4rem;
    font-weight: bold;
}

/* Logo image sizing inside header */
.logo img {
    height: 40px; /* default */
    width: auto;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 6px;
    transition: height 0.15s ease, margin-right 0.15s ease;
}

/* Small screens: smaller logo and nav */
@media (max-width: 600px) {
    .logo img {
        height: 32px;
        margin-right: 8px;
    }
    .logo { font-size: 0.5rem; }
    .nav a {
        font-size: 14px; /* mobile: smaller */
        margin-left: 12px;
    }
}

/* Large screens: larger logo and nav */
@media (min-width: 1000px) {
    .logo img {
        height: 56px;
        margin-right: 12px;
    }
    .logo { font-size: 1.85rem; }
    .nav a {
        font-size: 18px; /* large screens: slightly larger */
        margin-left: 24px;
    }
}

.hero {
    position: relative;
    text-align: center;
}

.hero img {
    width: 100%; 
    object-fit: cover;
    opacity: 0.7;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero-text h1 {
    font-size: 2.7rem;
    color: #FFD700;
}

.hero-text p {
    font-size: 1.4rem;
    color: #fff;
    margin-top: 10px;
}

.prefectures {
    padding: 40px 20px;
    background: #1a1a1a;
}

.prefectures h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: #FFD700;
    text-align: center;
}

.pref-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* New map/index block styles (replicate attached image layout) */
.pref-map-block {
    max-width: 1100px;
    margin: 0 auto 30px;
    background: linear-gradient(#f6fff6, #f0fff0);
    border-radius: 8px;
    padding: 14px;
    color: #222;
}
.metro-map .metro-canvas {
    display: flex;
    gap: 14px;
}
.metro-left {
    flex: 1 1 720px;
}
.map-panel {
    border-radius: 6px;
    background: #fff;
    padding: 12px;
    border: 1px solid #d6efe0;
}
.map-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}
.map-title{
    background:#31b76a;
    color:#fff;
    padding:6px 10px;
    border-radius:6px;
    font-weight:700;
}
.map-legend{font-size:15px;color:#666}
.leg-box{display:inline-block;width:14px;height:12px;border-radius:3px;margin:0 6px;vertical-align:middle}
.leg-box.orange{background:#ff8c42}
.leg-box.yellow{background:#ffd86b}
.leg-box.pink{background:#f7c0e6}

.map-grid{display:flex;flex-direction:column;gap:8px}
.grid-row{display:flex;gap:8px}
.grid-row.small-row{gap:6px}
.grid-cell{flex:1;padding:14px;border-radius:6px;font-size:15px;border:1px dashed rgba(0,0,0,0.06);text-align:center}
.grid-cell.pale-green{background:linear-gradient(#e6fff0,#dfffee);color:#1f7a4a}
.grid-cell.pale-blue{background:linear-gradient(#f0fbff,#eaf7ff);color:#2a6b9b}
.grid-cell.pale-lilac{background:linear-gradient(#f7f3ff,#fbf6ff);color:#6a4b9b}
.grid-cell.pale-pink{background:linear-gradient(#fff0f8,#fff6fb);color:#a94a8c}
.grid-cell.pale-orange{background:linear-gradient(#fff6f0,#fff2ea);color:#9a4a1f}
.grid-cell.pale-cyan{background:linear-gradient(#f0fffb,#e6fff9);color:#177a76}
.grid-cell.pale-gray{background:#f6f6f8;color:#333}
.grid-cell.pale-yellow{background:linear-gradient(#fffde8,#fff9d4);color:#8a6a1a}
.grid-cell.small{padding:8px;font-size:14px}

.metro-right{width:320px}
.nation-index{background:#fff;border-radius:6px;padding:12px;border:1px solid #dfeffb}
.nation-index h3{margin:0 0 8px 0;color:#2a7a9b}
.region-legend{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.legend-mini{width:36px;height:36px;background:linear-gradient(45deg,#ff8c42,#ffd86b);border-radius:4px}
.legend-map{flex:1;height:60px;background:linear-gradient(90deg,#dff0ff,#f0f6ff);border-radius:4px}
.region-list{display:flex;gap:10px}
.region-col{display:flex;flex-direction:column;gap:6px}
.region-col a{color:#1b6a8b;font-size:15px}

/* Styles for the SVG tokyo map block */
.tokyo-map{display:flex;gap:18px;align-items:flex-start;max-width:1100px;margin:20px auto}
.map-box{flex:1;background:transparent}
.map-svg{width:100%;height:auto;display:block;border-radius:8px}
.nation-panel{width:300px}
.nation-card{background:#fff;border:1px solid #f0f0f0;padding:12px;border-radius:8px}
.nation-card h3{margin:0 0 8px 0;color:#2a7a9b}
.nation-mini{height:72px;margin-bottom:8px}
.mini-map{width:100%;height:100%;background:linear-gradient(90deg,#dff4ff,#f6fbff);border-radius:6px}
.nation-links{display:flex;flex-direction:column;gap:6px}
.nation-links a{color:#2a6b9b;font-size:16px}

@media (max-width:900px){
    .tokyo-map{flex-direction:column}
    .nation-panel{width:100%}
}
.pref-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    background: #222;
    color: #FFD700;
    text-align: center;
    transition: transform 0.3s, background 0.3s;
}

.pref-card i {
    margin-bottom: 10px;
}

.pref-card:hover {
    transform: scale(1.1);
    background: #333;
}

.shops,
.specials {
    padding: 40px 20px;
}

.shops h2,
.specials h2 {
    font-size: 2.2rem;
    color: #FFD700;
    text-align: center;
    margin-bottom: 20px;
}

.shop-list,
.special-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.shop-list div,
.special-list div {
    background: #222;
    border-radius: 10px;
    padding: 15px;
    width: 220px;
    transition: transform 0.3s;
}

.shop-list div:hover,
.special-list div:hover {
    transform: scale(1.05);
}

.footer {
    text-align: center;
    padding: 20px;
    background: #222;
    color: #aaa;
}

/* Nearby results (small cards inside #new-shops) */
.near-card {
    background: #1b1b1b;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}
.near-title { font-weight: 700; color: #ffd76b; margin-bottom:6px }
.near-meta { font-size: 15px; color: #cfcfcf; margin-bottom:6px }
.near-desc { font-size: 15px; color: #aaa }
.near-meta .badge { background:#333;color:#fff;padding:2px 6px;border-radius:4px;margin-right:6px }
.near-meta .dist { color:#9bd1ff;margin-left:6px }

.location .privacy-note { font-size:14px; color:#cfcfcf; margin-top:6px }

.confirm-box { margin-top:8px; background:rgba(255,255,255,0.03); padding:8px; border-radius:6px; }
.confirm-text { color:#fff; margin-bottom:8px }
.confirm-actions { display:flex; gap:8px }
.btn { padding:6px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.06); cursor:pointer; background:transparent; color:#fff }
.btn:disabled { opacity:0.6; cursor:default }
.btn-primary { background:linear-gradient(90deg,#ffd76b,#ffb86b); color:#222; border:none }
.btn-secondary { background:#333; color:#fff }
.confirm-error { color:#ffb3b3 }