/* ========================================================================== たまさんぽ！学生リールコンテスト in 八王子 Design tokens - Primary: #1A6BB5 (浅川の水面を思わせる青) - Accent : #F5A623 (夕暮れの陽だまりオレンジ／CTA専用) - Coral : #E8735A (ロゴの朱色。差し色・タグ) - Teal : #14847A (ロゴの緑青。差し色・タグ) - Head : Zen Maru Gothic／Body: Noto Serif JP ========================================================================== */ :root { --color-primary: #1a6bb5; --color-primary-dark: #124d85; --color-primary-soft: #e8f4fd; --color-accent: #f5a623; --color-accent-dark: #d8890a; --color-coral: #e8735a; --color-teal: #14847a; --color-bg: #ffffff; --color-bg-warm: #fbf8f2; --color-text: #333333; --color-text-light: #656565; --color-line: #e2ddd0; --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; --font-body: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --max-width: 1100px; --radius-sm: 6px; --radius-md: 14px; --header-h: 72px; --shadow-soft: 0 10px 30px rgba(26, 70, 110, 0.1); --shadow-card: 0 6px 20px rgba(51, 40, 20, 0.1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* clip (not hidden) — hidden/auto pair overflow-y to "auto" per spec, which turns into a scroll container and breaks position:sticky for descendants (e.g. .top-col-left). clip avoids that side effect. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.8; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; line-height: 1.5; font-weight: 700; } p { margin: 0 0 1em; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: var(--font-body); font-size: 16px; } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; } .container { max-width: var(--max-width); margin-inline: auto; padding-inline: 16px; } @media (min-width: 768px) { .container { padding-inline: 40px; } } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; top: -100px; left: 12px; background: var(--color-primary); color: #fff; padding: 10px 18px; border-radius: var(--radius-sm); z-index: 1000; transition: top 0.2s ease; } .skip-link:focus { top: 12px; } /* ---------- Eyebrow / Section heading ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--color-primary); font-weight: 700; margin-bottom: 10px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); display: inline-block; } .section-title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 14px; } .section-lead { color: var(--color-text-light); max-width: 640px; margin-bottom: 34px; } .section { padding-block: 64px; } .section--warm { background: var(--color-bg-warm); } .section--soft { background: var(--color-primary-soft); } .section-head { text-align: center; margin-inline: auto; } .section-head .section-lead { margin-inline: auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; padding: 14px 28px; border: 2px solid transparent; border-radius: var(--radius-sm); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; white-space: nowrap; } /* CTA = pill shape, reserved for entry actions only (README 11-5) */ .btn-cta { border-radius: 9999px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: #fff; box-shadow: 0 10px 22px rgba(245, 166, 35, 0.4); padding: 16px 36px; } .btn-cta:hover, .btn-cta:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(245, 166, 35, 0.48); } .btn-cta--lg { font-size: 1.1rem; padding: 18px 46px; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover, .btn-primary:focus-visible { background: var(--color-primary-dark); transform: translateY(-2px); } .btn-outline { border-color: var(--color-primary); color: var(--color-primary); background: #fff; } .btn-outline:hover, .btn-outline:focus-visible { background: var(--color-primary-soft); } .btn-block { width: 100%; } .btn-sm { padding: 8px 16px; font-size: 0.8rem; margin-top: 12px; } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 500; display: flex; align-items: center; /* No backdrop-filter: filter/backdrop-filter on this element would make it a new containing block for its position:fixed descendant (.main-nav), collapsing that drawer to the header's own 72px box instead of the viewport. */ background: rgba(255, 255, 255, 0.97); box-shadow: 0 2px 16px rgba(20, 40, 60, 0.08); border-bottom: 1px solid var(--color-line); } .site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .brand img { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; } .brand-title { font-family: var(--font-head); font-weight: 700; font-size: 0.86rem; color: var(--color-text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .brand-title small { display: block; font-size: 0.62rem; font-weight: 500; color: var(--color-primary); } .main-nav { display: flex; } .nav-list { display: flex; align-items: center; gap: 2px; } .nav-link { display: block; font-family: var(--font-head); font-weight: 500; /* Sized down (was 0.86-0.92rem) so the brand title never has to ellipsis-truncate to make room for all 7 links + the CTA button in the 1100px+ inline nav — see also .brand-title and .site-header .nav-cta .btn, shrunk for the same reason. */ font-size: clamp(0.72rem, 0.44rem + 0.4vw, 0.8rem); white-space: nowrap; color: var(--color-text); padding: 8px 10px; border-radius: var(--radius-sm); transition: background 0.2s ease, color 0.2s ease; } .nav-link:hover, .nav-link[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary-dark); } /* Current-page marker, shared across every nav/menu on the site so it's always clear which page you're on. Orange reads fine against every background these appear on (transparent/solid header, dark left sidebar panel, dark footer); pointer-events:none disables the (redundant) link to the page you're already on. */ .nav-link[aria-current="page"], .top-col-left-nav a[aria-current="page"], .footer-links a[aria-current="page"], .sitemap-grid a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; pointer-events: none; cursor: default; } .nav-cta { margin-left: 6px; } .hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 8px; background: transparent; border: none; border-radius: var(--radius-sm); } .hamburger span { display: block; width: 100%; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 1200px is the single nav breakpoint site-wide: below it every page uses the hamburger drawer, above it sub-pages show the inline nav and the TOP page hands over to its left sidebar. Keeping one number means no width where TOP and the sub-pages disagree about which nav is showing. */ @media (min-width: 1200px) { .hamburger { display: none; } /* Shrunk so the inline 7-link nav + CTA never force the brand title to ellipsis-truncate at this breakpoint (mobile drawer keeps the regular .btn-cta size, where there's no width pressure). */ .site-header .nav-cta .btn { padding: 9px 18px; font-size: 0.82rem; } } @media (max-width: 1199.98px) { .brand-title { white-space: normal; overflow: visible; text-overflow: unset; max-width: 46vw; } .main-nav { position: fixed; inset: var(--header-h) 0 0 0; background: #fff; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; padding: 20px 0 40px; } .main-nav.is-open { transform: translateX(0); } .nav-list { flex-direction: column; align-items: stretch; gap: 2px; padding: 0 20px; } .nav-link { padding: 16px 10px; border-bottom: 1px solid var(--color-line); font-size: 1.02rem; } .nav-cta { margin: 16px 10px 0; } .nav-cta .btn { width: 100%; } } /* ---------- TOP page: hamburger-only header ---------- No inline menu bar at any width. The hamburger button is shown at every width below 1200px (README's SP + BP1タブレット tiers) — i.e. any time the left sidebar (.top-col-left-nav) isn't up yet. From 1200px the sidebar is the visible menu instead. The drawer always opens as a half-width panel from the right, at any scroll position — it's position:fixed, so scroll position never affects it. Selectors here are unscoped by width (higher specificity than the width-scoped rules above) so they apply at every breakpoint once .nav-hamburger-only is present. */ .site-header.nav-hamburger-only .main-nav { position: fixed; top: var(--header-h); right: 0; bottom: 0; left: auto; width: 50%; background: #fff; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; padding: 20px 0 40px; box-shadow: -8px 0 24px rgba(20, 40, 60, 0.15); } .site-header.nav-hamburger-only .main-nav.is-open { transform: translateX(0); } .site-header.nav-hamburger-only .nav-list { flex-direction: column; align-items: stretch; gap: 2px; padding: 0 20px; } .site-header.nav-hamburger-only .nav-link { padding: 16px 10px; border-bottom: 1px solid var(--color-line); font-size: 1.02rem; color: var(--color-text); text-shadow: none; } .site-header.nav-hamburger-only .nav-cta { margin: 16px 10px 0; } .site-header.nav-hamburger-only .nav-cta .btn { width: 100%; } .site-header.nav-hamburger-only .hamburger { display: none; } @media (max-width: 1199.98px) { .site-header.nav-hamburger-only .hamburger { display: inline-flex; } } /* ---------- Hero (TOP) ---------- Lives inline as the first block of .top-col-main (not a full-viewport section above it), so the left/center/right columns are all visible the moment the page loads. */ .hero { position: relative; min-height: 56vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--color-primary-dark); border-radius: var(--radius-md); margin: 24px 16px 0; } @media (min-width: 768px) { .hero { margin-inline: 40px; } } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease; } .hero-slide.is-active { opacity: 1; } /* G: gradient "breathing" glow — a soft living-light layer, kept separate from the scrim below so text contrast is never compromised */ .hero-glow { position: absolute; inset: 0; z-index: 1; background: linear-gradient( var(--breathe-angle, 135deg), rgba(26, 107, 181, 0.16), rgba(20, 132, 122, 0.1) ); mix-blend-mode: soft-light; pointer-events: none; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient( to top, rgba(6, 24, 38, 0.86) 0%, rgba(6, 24, 38, 0.45) 42%, rgba(6, 24, 38, 0.15) 68%, rgba(6, 24, 38, 0.35) 100% ); } .hero-content { position: relative; z-index: 3; color: #fff; padding-block: 44px 40px; width: 100%; } .hero-eyebrow { font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.22em; color: #ffd48a; margin-bottom: 14px; } .hero-title { margin: 0; font-family: var(--font-head); font-size: clamp(1.9rem, 6vw, 3.4rem); font-weight: 700; line-height: 1.35; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); } .hero-copy { margin-top: 18px; font-family: var(--font-head); font-size: clamp(1.05rem, 2.6vw, 1.35rem); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-align: center; display: block; width: 100%; } .hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ---------- Sub-page header band ---------- */ .page-band { padding-top: calc(var(--header-h) + 46px); padding-bottom: 46px; background: linear-gradient(160deg, var(--color-primary-soft), #fdf3e9 130%); border-bottom: 1px solid var(--color-line); } .page-band-inner { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* Page icon, sat on a white disc. object-fit:contain (not cover) and no rotation: these are flat square icons, not photos — cover would crop their built-in padding and a tilt would read as a misaligned image. */ .page-band img.page-band-photo { width: 104px; height: 104px; padding: 22px; object-fit: contain; background: rgba(255, 255, 255, 0.75); border-radius: 50%; flex-shrink: 0; } .breadcrumb { font-size: 0.8rem; color: var(--color-text-light); margin-bottom: 10px; } .breadcrumb a { color: var(--color-primary); } .page-title { font-size: clamp(1.6rem, 4.5vw, 2.4rem); } .page-lead { color: var(--color-text-light); margin-top: 8px; max-width: 620px; } /* Numbered step marker (schedule / contest flow). */ .trail-marker { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 3px solid var(--color-primary); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-family: "Varela Round", var(--font-head); font-weight: 700; margin-inline: auto; box-shadow: 0 4px 12px rgba(26, 107, 181, 0.25); } /* ---------- Cards ---------- */ .card-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 640px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 860px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--4 { grid-template-columns: repeat(4, 1fr); } } .card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 26px; border: 1px solid var(--color-line); } .card h3 { font-size: 1.08rem; margin-bottom: 10px; color: var(--color-primary-dark); } .card-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 14px; } /* ---------- Reel photo cards (signature) ---------- Vertical 9:16 frames echoing the Instagram Reel format the contest actually produces; slight scrapbook tilt + tape. */ .reel-row { display: flex; gap: 20px; overflow-x: auto; padding: 14px 4px 26px; scroll-snap-type: x proximity; } .reel-card { position: relative; flex: 0 0 auto; width: 168px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); scroll-snap-align: start; background: #111; } .reel-card:nth-child(odd) { transform: rotate(-2.5deg); } .reel-card:nth-child(even) { transform: rotate(2deg); } .reel-card img { width: 100%; height: 100%; object-fit: cover; } .reel-card::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 46px; height: 18px; background: rgba(245, 230, 200, 0.75); border: 1px solid rgba(200, 180, 140, 0.5); } .reel-card figcaption, .reel-card .reel-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px 8px; font-family: var(--font-head); font-size: 0.72rem; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent); } @media (min-width: 768px) { .reel-row { overflow: visible; flex-wrap: wrap; justify-content: center; } .reel-card { width: 190px; } } /* ---------- Timeline / schedule ---------- */ .timeline { display: grid; gap: 22px; } .timeline-item { display: grid; grid-template-columns: 46px 1fr; gap: 18px; } .timeline-item .trail-marker { margin-inline: 0; width: 46px; height: 46px; font-size: 0.95rem; } .timeline-item .timeline-body { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 16px 20px; box-shadow: var(--shadow-card); } /* Cards that open the detail modal (about page's "コンテストの流れ") — resets the