@charset "utf-8";
/* フォント・アイコンは各HTMLの内でlinkタグにて読み込み */
/* Custom Properties */
:root {
--text-color: #2D3036;
--dark-color: #1E2028;
--primary-color: #C7000A;
--primary-inverse-color: #fff;
--bg-color: #D9DEE4;
--bg-light: #E8ECF0;
--card-bg: #fff;
--border-color: rgba(45, 48, 54, 0.15);
--border-dashed-color: rgba(45, 48, 54, 0.25);
--global-space: 5vw;
--radius-pill: 100px;
--radius-card: 20px;
--section-gap: 6rem;
}
/* Keyframes */
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
/* Base & Reset */
html, body {
margin: 0;
padding: 0;
font-size: 13px;
overflow-x: hidden;
}
body {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
font-optical-sizing: auto;
-webkit-text-size-adjust: none;
background: var(--bg-color);
color: var(--text-color);
line-height: 2;
}
* {
box-sizing: border-box;
}
figure, dd, nav, ul, li, ol, address {
margin: 0;
padding: 0;
font-style: normal;
}
nav ul {
list-style: none;
}
section li {
margin-left: 1rem;
}
table {
border-collapse: collapse;
}
img, video {
border: none;
max-width: 100%;
height: auto;
vertical-align: middle;
}
iframe {
width: 100%;
}
input {
font-size: 1rem;
}
section + section {
margin-top: 3rem;
}
a {
color: var(--text-color);
transition: 0.3s;
text-decoration: none;
}
a:hover {
color: var(--primary-color);
text-decoration: none;
}
/* Layout */
#container {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-x: hidden;
}
#contents {
flex: 1;
padding: var(--global-space);
padding-top: max(var(--global-space), 80px);
overflow-x: hidden;
}
body:not(.home) #container {
justify-content: space-between;
}
/* ========== Decorative Circles ========== */
/* isolation: isolate でスタッキングコンテキストを生成し
z-index: -1 のサークルをコンテンツ背面・背景前面に配置する。
overflow: hidden は除去してページ両端まで装飾が届くようにする。
(#contents の overflow-x: hidden がページ境界でクリップする) */
main section,
.bg1,
.feature-block,
.guest-feature-text-only {
position: relative;
isolation: isolate;
}
.deco-circle {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
.deco-circle--dashed {
border: 1.5px dashed var(--border-dashed-color);
background: transparent;
}
.deco-circle--solid {
border: 1.5px solid var(--border-color);
background: transparent;
}
.deco-circle--filled {
background: rgba(199, 0, 10, 0.06);
border: none;
}
.deco-circle--filled-blue {
background: rgba(45, 80, 140, 0.05);
border: none;
}
.deco-circle--sm { width: 60px; height: 60px; }
.deco-circle--md { width: 120px; height: 120px; }
.deco-circle--lg { width: 200px; height: 200px; }
.deco-circle--xl { width: 340px; height: 340px; }
/* ========== Header ========== */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 10px 4vw;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(45, 48, 54, 0.10);
border-radius: var(--radius-pill);
padding: 6px 8px 6px 22px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
height: 56px;
font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
font-weight: 700;
}
#logo a {
display: block;
text-decoration: none;
color: var(--text-color);
white-space: nowrap;
}
#logo img {
display: block;
width: 160px;
}
#daigaku {
font-size: 0.72rem;
font-weight: 500;
opacity: 0.55;
line-height: 1.2;
letter-spacing: 0.02em;
}
#gikadaisai {
font-size: 1.0rem;
font-weight: 800;
line-height: 1.2;
}
/* Desktop Navigation - integrated into header pill */
#menubar-pc {
display: none;
}
#logo {
flex: 1;
}
.large-screen #menubar-pc {
display: flex;
align-items: center;
flex: 1;
justify-content: center;
}
.large-screen #menubar-pc > ul {
display: flex;
font-size: 0.85rem;
gap: 0.2rem;
list-style: none;
padding: 0;
margin: 0;
}
.large-screen #menubar-pc > ul > li > a {
display: block;
border-radius: var(--radius-pill);
padding: 0.3rem 1.0rem;
color: var(--text-color);
transition: all 0.25s ease;
white-space: nowrap;
}
.large-screen #menubar-pc > ul > li > a:hover {
background: var(--bg-light);
color: var(--primary-color);
}
/* "+" icon with circular background, rotates on hover */
.large-screen #menubar-pc .ddmenu_parent > a::before {
content: "+";
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 0.8em;
font-weight: 600;
background: var(--bg-color);
border-radius: 50%;
vertical-align: middle;
margin-right: 5px;
transition: transform 0.25s ease;
}
.large-screen #menubar-pc .ddmenu_parent:hover > a::before {
transform: rotate(90deg);
}
/* Mobile: hide dropdown by default (jQuery slideToggle will show/hide) */
.small-screen .ddmenu_parent ul {
display: none;
}
/* Desktop: no display:none — use visibility/opacity instead, avoids specificity conflicts */
/* Desktop dropdown: override to use CSS visibility transitions */
.large-screen #menubar-pc .ddmenu_parent {
position: relative;
}
/* Transparent hover bridge: matches margin-top so no hover gap */
.large-screen #menubar-pc .ddmenu_parent::after {
content: "";
position: absolute;
bottom: -12px;
left: 0;
right: 0;
height: 12px;
}
.large-screen #menubar-pc .ddmenu_parent > ul {
display: block;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
margin-top: 12px;
min-width: 160px;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(45, 48, 54, 0.10);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
overflow: hidden;
padding: 0.3rem 0;
list-style: none;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
z-index: 200;
}
.large-screen #menubar-pc .ddmenu_parent:hover > ul {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.large-screen #menubar-pc ul ul li + li {
border-top: 1px solid rgba(45, 48, 54, 0.06);
}
.large-screen #menubar-pc ul ul li a {
display: block;
padding: 0.55rem 1.1rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-color);
border-radius: 0;
white-space: nowrap;
}
.large-screen #menubar-pc ul ul li a:hover {
background: var(--bg-light);
color: var(--primary-color);
}
/* Header Actions */
.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 1;
}
.header-contact-btn {
background: var(--dark-color);
color: #fff !important;
border-radius: var(--radius-pill);
padding: 0.4rem 1.3rem;
font-size: 0.82rem;
font-weight: 700;
text-decoration: none;
transition: background 0.25s ease;
white-space: nowrap;
display: inline-block;
}
.header-contact-btn:hover {
background: var(--primary-color) !important;
color: #fff !important;
}
/* ========== Main Headings ========== */
main h1,
main h2 {
font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
font-size: 3rem;
letter-spacing: 0.1em;
color: var(--text-color);
position: relative;
}
main h1 .hosoku,
main h2 .hosoku {
display: block;
font-weight: normal;
font-size: 0.3em;
color: var(--text-color);
opacity: 0.6;
}
main h3 {
display: inline-block;
border-bottom: 2px solid var(--text-color);
}
/* ========== Utility ========== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ========== Footer ========== */
footer {
position: relative;
background: var(--dark-color);
color: #f0f0f0;
padding: 4rem var(--global-space) 0;
margin-top: var(--section-gap);
font-size: 0.9rem;
line-height: 1.8;
}
.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
padding-bottom: 3rem;
position: relative;
z-index: 1;
}
.footer-col {
flex: 1;
min-width: 250px;
}
.footer-col h4 {
font-family: "Reddit Sans", sans-serif;
font-size: 1.2rem;
color: var(--primary-inverse-color);
margin: 0 0 1rem 0;
font-weight: 600;
}
.logo-footer a {
text-decoration: none;
color: var(--primary-inverse-color);
display: inline-block;
margin-bottom: 1rem;
}
.daigaku-footer {
display: block;
font-size: 0.9rem;
font-weight: 300;
}
.gikadaisai-footer {
display: block;
font-size: 1.6rem;
font-weight: 800;
}
.footer-address {
font-size: 0.85rem;
color: #ccc;
}
.footer-nav {
list-style: none;
padding: 0;
}
.footer-nav li a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.footer-nav li a:hover {
color: var(--primary-color);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 1.5rem 0;
text-align: center;
font-size: 0.75rem;
color: #888;
position: relative;
z-index: 1;
}
/* ========== Components ========== */
/* ========== Section Backgrounds (bg1 = accent section) ========== */
.bg1 {
position: relative;
background: var(--card-bg);
color: var(--text-color);
padding: 4rem var(--global-space);
margin: var(--section-gap) calc(-1 * var(--global-space));
border-top: 1.5px solid var(--border-color);
border-bottom: 1.5px solid var(--border-color);
overflow: hidden;
}
.bg1 a {
color: inherit;
}
.bg1 h2 {
color: var(--text-color);
}
.bg1::before, .bg1::after {
content: none;
}
/* ========== Access Block ========== */
.map-container {
margin-bottom: 3rem;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.access-container {
max-width: 900px;
margin: 0 auto;
text-align: left;
}
.access-info {
background: var(--bg-light);
padding: 2rem;
border-radius: var(--radius-card);
border: 1.5px solid var(--border-color);
}
.access-method {
margin-bottom: 2rem;
}
.access-method:last-child {
margin-bottom: 0;
}
.access-method h4 {
font-size: 1.4rem;
font-weight: 600;
border-bottom: 1.5px solid var(--border-color);
padding-bottom: 0.5rem;
margin: 0 0 1rem 0;
}
.access-method h4 .fas {
margin-right: 0.8rem;
color: var(--primary-color);
}
.access-description p {
margin: 0;
line-height: 1.8;
}
.access-description .note {
display: block;
font-size: 0.85rem;
margin-top: 1rem;
opacity: 0.7;
}
/* Bus Countdown */
.bus-countdown-wrapper {
background: var(--card-bg);
border-radius: 16px;
padding: 1rem 1.5rem;
margin-top: 1.5rem;
border: 1.5px dashed var(--border-dashed-color);
}
.bus-countdown-wrapper h5 {
font-size: 1rem;
font-weight: 500;
margin: 0 0 0.5rem 0;
}
.bus-countdown-wrapper h5 .fas {
margin-right: 0.5rem;
color: var(--primary-color);
}
#bus-schedule-note {
display: none;
font-size: 0.8rem;
text-align: center;
padding: 0.3rem 0.5rem;
background: var(--bg-light);
border-radius: 4px;
margin-bottom: 0.5rem;
}
#bus-countdown-display {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: var(--bg-light);
padding: 0.5rem 1rem;
border-radius: 12px;
text-align: center;
}
#bus-countdown-display p {
margin: 0;
font-size: 0.9rem;
}
#bus-countdown-display .time-container {
font-family: "IBM Plex Mono", monospace;
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
}
#bus-countdown-display .time-container small {
font-family: "Noto Sans JP", sans-serif;
font-size: 0.8rem;
margin-left: 0.2rem;
font-weight: 400;
color: var(--text-color);
}
p.next-bus-info {
text-align: center;
font-size: 0.8rem;
opacity: 0.7;
margin-top: 0.5rem;
}
/* Map Button */
.map-button-container {
text-align: center;
margin-top: 2.5rem;
}
.map-button {
display: flex;
max-width: 400px;
margin: 0 auto;
align-items: center;
justify-content: center;
gap: 1rem;
background: var(--card-bg);
border-radius: var(--radius-card);
border: 1.5px solid var(--border-color);
padding: 1rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.map-button:hover {
border-color: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.map-button-icon {
font-size: 2.5rem;
line-height: 1;
color: var(--primary-color);
}
.map-button-text {
text-align: left;
}
.map-button-text strong {
font-size: 1.2rem;
display: block;
color: var(--primary-color) !important;
}
.map-button-text small {
font-size: 0.8rem;
color: #555 !important;
display: block;
}
/* ========== Countdown Card ========== */
.countdown-card {
background: var(--card-bg);
border: 1.5px solid var(--border-color);
border-radius: var(--radius-card);
padding: 2rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
text-align: center;
color: var(--text-color);
}
.countdown-card .event-date {
font-size: clamp(1.5rem, 5vw, 2.5rem);
font-weight: bold;
line-height: 1.2;
margin: 0;
}
.countdown-card #countdown-text {
font-size: 1rem;
font-weight: 300;
letter-spacing: 0.1em;
margin: 0.5rem 0 1.5rem 0;
opacity: 0.6;
}
#countdown {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
}
.timer-unit {
text-align: center;
}
#countdown span {
font-family: "IBM Plex Mono", monospace;
font-weight: 700;
font-size: clamp(2.5rem, 10vw, 4rem);
line-height: 1;
display: block;
color: var(--primary-color);
}
#countdown p {
font-size: 0.8rem;
margin-top: 0.25rem;
letter-spacing: 0.05em;
opacity: 0.6;
}
.separator {
width: 1.5px;
height: 50px;
background-color: var(--border-color);
}
.opening-time-container {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1.5px dashed var(--border-dashed-color);
}
.opening-time-unit {
text-align: center;
}
.opening-time-unit .opening-time-value {
font-family: "IBM Plex Mono", monospace;
font-weight: 700;
font-size: 2.5rem;
line-height: 1;
display: block;
color: var(--primary-color);
}
.opening-time-unit .opening-time-label {
font-size: 0.8rem;
margin-top: 0.25rem;
letter-spacing: 0.05em;
opacity: 0.6;
}
/* ========== Hamburger Button ========== */
#menubar_hdr {
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
width: 40px;
height: 40px;
padding: 11px 10px;
border: none;
background: var(--bg-color);
border-radius: 50%;
flex-shrink: 0;
}
#menubar_hdr span {
display: block;
transition: all 0.3s ease-in-out;
background-color: var(--text-color);
height: 2px;
width: 100%;
}
#menubar_hdr.ham span:nth-of-type(1) {
transform: translateY(8px) rotate(45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
transform: translateY(-8px) rotate(-45deg);
}
.large-screen #menubar_hdr {
display: none;
}
/* ========== Mobile Dropdown Menu ========== */
#menubar {
display: none;
}
.small-screen #menubar {
display: block;
position: fixed;
top: 72px; /* header top-padding(10) + pill-height(56) + gap(6) */
left: 16px;
right: 16px;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(45, 48, 54, 0.10);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
z-index: 999;
}
.small-screen #menubar.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.small-screen #menubar nav ul {
display: flex;
flex-direction: column;
padding: 0.4rem 0;
margin: 0;
list-style: none;
}
.small-screen #menubar nav li + li {
border-top: 1px solid rgba(45, 48, 54, 0.06);
}
.small-screen #menubar nav a {
display: block;
color: var(--text-color);
font-size: 1.0rem;
font-weight: 600;
font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
text-decoration: none;
padding: 0.85rem 1.4rem;
transition: background-color 0.18s, color 0.18s;
}
.small-screen #menubar nav a:hover {
background-color: var(--bg-light);
color: var(--primary-color);
}
/* Utility */
.c { text-align: center !important; }
/* ========== Sponsor Grid ========== */
.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.sponsor-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--card-bg);
border: 1.5px solid var(--border-color);
border-radius: var(--radius-card);
padding: 1.5rem 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(0,0,0,0.03);
min-height: 160px;
cursor: pointer;
text-decoration: none;
}
.sponsor-tile:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
border-color: var(--primary-color);
}
.sponsor-tile img {
max-height: 70px;
max-width: 100%;
object-fit: contain;
margin-bottom: 1rem;
}
.sponsor-tile .sponsor-name {
font-weight: 600;
color: var(--text-color);
text-align: center;
line-height: 1.4;
font-size: 0.9rem;
}
/* ========== View Options ========== */
.view-options {
margin-bottom: 2rem;
}
.filter-sort-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;
}
.control-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.control-group label {
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
}
.control-group select {
border: 1.5px solid var(--border-color);
border-radius: 10px;
padding: 0.4rem 0.6rem;
font-size: 0.85rem;
background-color: var(--card-bg);
cursor: pointer;
transition: border-color 0.3s;
}
.control-group select:focus-visible {
border-color: var(--primary-color);
outline: none;
}
/* ========== Shop Cards ========== */
.shop-list-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.shop-card {
background: var(--card-bg);
border-radius: var(--radius-card);
border: 1.5px solid var(--border-color);
box-shadow: 0 4px 16px rgba(0,0,0,0.03);
transition: all 0.3s ease;
overflow: hidden;
display: flex;
flex-direction: column;
}
.shop-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
border-color: rgba(199, 0, 10, 0.3);
}
.shop-card-image {
width: 100%;
aspect-ratio: 1 / 1;
background-color: var(--bg-light);
overflow: hidden;
}
.shop-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.shop-card-content {
padding: 1.2rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.shop-card-title {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.5;
color: var(--text-color);
margin: 0 0 1rem 0;
flex-grow: 1;
}
.shop-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: auto;
padding-top: 0.75rem;
border-top: 1.5px dashed var(--border-dashed-color);
}
.shop-card-circle {
font-size: 0.85rem;
font-weight: 500;
color: #555;
line-height: 1.4;
}
.shop-card-location {
background: var(--bg-light);
color: var(--text-color);
font-weight: 600;
font-size: 0.8rem;
padding: 0.3em 0.8em;
border-radius: var(--radius-pill);
white-space: nowrap;
flex-shrink: 0;
border: 1px solid var(--border-color);
}
/* ========== Contact Page ========== */
.contact-container {
max-width: 800px;
margin: 3rem auto 0;
text-align: left;
}
.contact-button-wrapper {
text-align: center;
margin: 2rem 0 3rem;
}
.cta-button {
display: inline-block;
background: var(--primary-color);
color: var(--primary-inverse-color);
padding: 1rem 2.5rem;
border-radius: var(--radius-pill);
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(199, 0, 10, 0.2);
}
.cta-button:hover {
background: #a50008;
color: var(--primary-inverse-color);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(199, 0, 10, 0.3);
}
.cta-button .fas {
margin-right: 0.8em;
}
.contact-notes {
background: var(--card-bg);
border: 1.5px solid var(--border-color);
border-radius: var(--radius-card);
padding: 1.5rem 2rem;
margin-top: 2rem;
}
.contact-notes h3 {
border-bottom: 1.5px solid var(--border-color);
padding-bottom: 0.5rem;
margin: 0 0 1rem 0;
}
.contact-notes h3 .fas {
margin-right: 0.5em;
color: var(--primary-color);
}
.contact-notes p {
margin: 0;
line-height: 1.8;
}
/* ========== Feature Blocks (Theme & Guest) ========== */
.feature-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
padding: 5vw var(--global-space);
margin: 5vw 0;
overflow: hidden;
position: relative;
}
.guest-feature-text-only {
padding: 5vw var(--global-space);
margin: 5vw 0;
position: relative;
}
.feature-poster-container img {
width: 100%;
height: auto;
object-fit: contain;
border-radius: var(--radius-card);
border: 1.5px solid var(--border-color);
box-shadow: 0 12px 32px rgba(0,0,0,0.06);
transition: all 0.4s ease;
}
.feature-poster-container img:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.feature-content-text {
text-align: center;
}
.feature-heading {
margin-bottom: 2rem;
line-height: 1.2;
}
.feature-en-heading {
display: block;
font-family: "Reddit Sans", sans-serif;
font-weight: 800;
font-size: clamp(2.5rem, 8vw, 4.5rem);
color: var(--text-color);
letter-spacing: 0.05em;
}
.feature-ja-heading {
display: block;
font-family: "Noto Sans JP", sans-serif;
font-size: 1rem;
font-weight: 500;
margin-top: 0.5rem;
color: var(--text-color);
opacity: 0.6;
}
.theme-showcase-text {
font-family: "Zen Maru Gothic", "Noto Sans JP", serif;
font-size: clamp(4rem, 20vw, 9rem);
font-weight: 500;
line-height: 1;
margin: 0;
color: var(--primary-color);
}
.guest-showcase-text {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.8;
margin-bottom: 2.5rem;
}
.feature-button {
display: inline-block;
margin-top: 1.5rem;
background: var(--primary-color);
color: #fff;
padding: 0.8rem 2.5rem;
border-radius: var(--radius-pill);
text-decoration: none;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(199, 0, 10, 0.2);
}
.feature-button:hover {
background: #A50008;
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(199, 0, 10, 0.3);
}
/* ========== Fixed Action Buttons ========== */
/* ページトップボタン: opacity/visibility でフェード制御 (display:none は使わない) */
.pagetop {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pagetop.is-visible {
opacity: 1;
visibility: visible;
}
.fixed-button {
position: fixed;
right: 20px;
z-index: 99;
}
/* 共通ビジュアルスタイル */
.pagetop a,
.fixed-button {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-color);
font-size: 1.2rem;
background: var(--card-bg);
width: 50px;
height: 50px;
border-radius: 50%;
border: 1.5px solid var(--border-color);
cursor: pointer;
padding: 0;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
transition: all 0.3s ease;
}
.pagetop a:hover,
.fixed-button:hover {
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
/* 右下ボタン群 — 模擬店マップボタンを基準に下から積み上げる */
#map-button {
bottom: 90px; /* 20px(pagetop) + 50px(button height) + 20px(gap) */
}
/* ========== Modal ========== */
.modal-overlay {
display: none;
position: fixed;
z-index: 2000;
inset: 0;
background-color: #333;
}
.modal-content {
width: 100%;
height: 100%;
background-color: #1a1a1a;
animation: fadeIn 0.3s;
display: flex;
flex-direction: column;
}
.modal-header {
display: flex;
align-items: center;
padding: 10px;
background-color: rgba(0,0,0,0.2);
flex-shrink: 0;
gap: 10px;
}
.map-switcher {
display: flex;
flex-grow: 1;
gap: 10px;
}
.map-switch-button {
flex: 1;
padding: 10px 15px;
font-size: 0.9rem;
font-weight: 600;
color: #fff;
background-color: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.map-switch-button.active {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.modal-close-btn {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
border-radius: 8px;
width: 44px;
height: 44px;
font-size: 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.modal-close-btn:hover {
background: rgba(255,255,255,0.2);
}
.map-panels-container {
flex-grow: 1;
position: relative;
background-color: #fff;
}
.map-panel {
display: none;
position: absolute;
inset: 0;
}
.map-panel.active {
display: block;
}
.map-zoom-container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
-webkit-touch-callout: none;
user-select: none;
}
/* PinchZoom が img をラップした後もレイアウトを保持 */
.map-zoom-container img {
display: block;
width: 100%;
height: auto;
max-height: 100%;
}
.map-instruction-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1rem;
line-height: 1.6;
transition: opacity 0.5s ease, visibility 0.5s ease;
pointer-events: none;
opacity: 1;
visibility: visible;
}
.map-instruction-overlay.hidden {
opacity: 0;
visibility: hidden;
}
.map-instruction-overlay .fas {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.modal-footer-note {
padding: 12px;
background-color: rgba(0, 0, 0, 0.3);
flex-shrink: 0;
text-align: center;
}
.modal-footer-note p {
margin: 0;
font-size: 0.8rem;
color: #ccc;
line-height: 1.5;
}
.modal-footer-note .fas {
margin-right: 0.5em;
}
body.modal-open {
overflow: hidden;
}
/* ========== Media Queries ========== */
@media screen and (max-width: 600px) {
.countdown-card {
padding: 1.5rem 1rem;
}
#countdown {
gap: 0.5rem;
justify-content: space-around;
}
.separator {
display: none;
}
.footer-container {
flex-direction: column;
text-align: center;
}
.access-container {
padding: 1.5rem 1rem;
}
#bus-countdown-display {
flex-direction: column;
gap: 0.5rem;
}
}
@media screen and (min-width: 900px) {
html, body {
font-size: 16px;
}
}
@media screen and (max-width: 768px) {
.feature-block {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.feature-poster-container {
order: 2;
}
}
@media screen and (min-width: 769px) {
.map-instruction-overlay {
display: none;
}
}
/* ========== Coming Soon ========== */
.coming-soon-section {
position: relative;
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
}
.coming-soon-content {
position: relative;
z-index: 1;
text-align: center;
}
.coming-soon-label {
font-family: "IBM Plex Mono", monospace;
font-size: clamp(0.85rem, 2vw, 1rem);
font-weight: 600;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--primary-color);
margin: 0 0 0.75rem;
}
.coming-soon-title {
font-family: "Zen Maru Gothic", "Noto Sans JP", serif;
font-size: clamp(3rem, 10vw, 5.5rem);
font-weight: 700;
line-height: 1.1;
margin: 0 0 1.5rem;
color: var(--text-color);
}
.coming-soon-desc {
font-size: clamp(1rem, 2.5vw, 1.15rem);
line-height: 2;
margin: 0 auto 2.5rem;
max-width: 400px;
opacity: 0.7;
}
.coming-soon-links {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.coming-soon-link-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
background: var(--card-bg);
border: 1.5px solid var(--border-color);
border-radius: var(--radius-card);
padding: 1.4rem 1rem;
min-width: 120px;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-color);
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.coming-soon-link-btn .fas {
font-size: 1.6rem;
color: var(--primary-color);
transition: color 0.25s;
}
.coming-soon-link-btn span {
white-space: nowrap;
}
.coming-soon-link-btn:hover {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(199, 0, 10, 0.22);
}
.coming-soon-link-btn:hover .fas {
color: #fff;
}
/* 4ボタン 2×2 グリッド配置 */
.coming-soon-links--grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
max-width: 380px;
margin-left: auto;
margin-right: auto;
}
/* ========== Actions Grid (Support Page) ========== */
.action-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin: 3rem auto;
max-width: 700px;
}
@media (max-width: 600px) {
.action-grid {
grid-template-columns: 1fr;
}
}
.action-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.8rem;
background: var(--card-bg);
border: 1.5px solid var(--border-color);
border-radius: var(--radius-card);
padding: 2rem 1.5rem;
font-size: 1.1rem;
font-weight: 700;
color: var(--text-color);
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.action-card .fas {
font-size: 2.2rem;
color: var(--text-color);
transition: color 0.25s ease;
}
.action-card:hover {
border-color: var(--primary-color);
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(199, 0, 10, 0.15);
color: var(--primary-color);
}
.action-card:hover .fas {
color: var(--primary-color);
}
.action-card-primary {
background: rgba(199, 0, 10, 0.04);
border-color: rgba(199, 0, 10, 0.2);
}
.action-card-primary .fas {
color: var(--primary-color);
}
.action-card-primary:hover {
background: var(--primary-color);
color: #fff;
}
.action-card-primary:hover .fas {
color: #fff;
}
/* ========== Supporter Grid ========== */
.supporter-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
.supporter-chip {
background: var(--card-bg);
border: 1.5px solid var(--border-color);
border-radius: var(--radius-pill);
padding: 0.6rem 1.4rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--text-color);
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
transition: all 0.25s ease;
}
.supporter-chip:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
border-color: var(--primary-color);
}