/*
* JAZZ協同組合 — 共通スタイルシート (v2 esthetic)
* ============================================================
* 色変えたいとき → :root の変数だけ変える
*/
/* Google Fonts は各 HTML の で タグとして読み込む（@import は描画ブロックのため廃止） */
:root {
--paper: #f2eddf;
--paper-dark: #e6dfcc;
--ink: #1e1a14;
--ink-mid: #3d3526;
--ink-light: #6b5f48;
--teal: #2a6672;
--teal-faded: #3d8a97;
--red-stamp: #8b1a1a;
--gold-old: #a07830;
--rule: #b8aa90;
/* compatibility aliases */
--stamp: #8b1a1a;
--gold: #a07830;
--gold-light: #c8a84a;
--yellow: #f2eddf;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Noto Serif JP', serif;
background-color: var(--paper);
color: var(--ink);
font-weight: 300;
font-size: 14.5px;
line-height: 1.9;
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 31px,
rgba(160,140,100,0.07) 31px,
rgba(160,140,100,0.07) 32px
);
}
a { color: var(--teal); }
a:visited { color: #4a3060; }
a:hover { color: var(--red-stamp); text-decoration: underline; }
hr {
border: none;
border-top: 1px solid var(--rule);
margin: 14px 0;
}
hr.rule-double {
border-top: 3px double var(--ink);
margin: 20px 0;
}
/* ──────── MASTHEAD STRIP ──────────────────────── */
.masthead {
background: var(--ink);
color: var(--paper);
padding: 10px 24px;
font-family: 'Courier Prime', monospace;
font-size: 0.72rem;
letter-spacing: 0.12em;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.masthead-left { color: rgba(242,237,223,0.55); }
.masthead-right { color: var(--gold-old); }
/* ──────── HEADER ──────────────────────────────── */
.site-header {
border-bottom: 3px double var(--rule);
background: var(--paper);
}
.header-top {
max-width: 960px;
margin: 0 auto;
padding: 28px 24px 16px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.site-title {
font-family: 'Special Elite', serif;
font-size: clamp(1.6rem, 4vw, 2.6rem);
color: var(--ink);
letter-spacing: 0.06em;
line-height: 1;
margin-bottom: 4px;
}
.site-title a {
text-decoration: none;
color: inherit;
}
.site-title a:hover {
color: inherit;
text-decoration: none;
}
.site-title em {
font-family: 'IM Fell English', serif;
font-style: italic;
font-size: 0.55em;
color: var(--ink-light);
letter-spacing: 0.15em;
display: block;
margin-top: 2px;
}
.site-stamp {
font-family: 'Special Elite', serif;
font-size: 0.7rem;
color: var(--red-stamp);
border: 2px solid var(--red-stamp);
padding: 3px 10px;
letter-spacing: 0.15em;
transform: rotate(-2deg);
display: inline-block;
opacity: 0.75;
}
/* ──────── NAV ─────────────────────────────────── */
.header-nav {
display: flex;
gap: 0;
border: 1px solid var(--rule);
overflow: hidden;
border-radius: 2px;
align-self: center;
}
.header-nav a {
font-family: 'Courier Prime', monospace;
font-size: 0.8rem;
letter-spacing: 0.1em;
padding: 8px 18px;
text-decoration: none;
color: var(--ink-mid);
border-right: 1px solid var(--rule);
transition: background 0.15s, color 0.15s;
background: var(--paper);
}
.header-nav a:last-child { border-right: none; }
.header-nav a:hover { background: var(--teal); color: #fff; text-decoration: none; }
.header-nav a:visited { color: var(--ink-mid); }
/* 投稿フォームボタン */
.header-nav a.nav-form-btn {
background: var(--teal);
color: #fff;
font-weight: bold;
letter-spacing: 0.15em;
}
.header-nav a.nav-form-btn:visited { color: #fff; }
.header-nav a.nav-form-btn:hover { background: var(--ink); color: var(--paper); }
.header-nav a.nav-form-btn.active,
.header-nav a.nav-form-btn.active:visited { background: var(--ink); color: var(--paper); }
/* ──────── HAMBURGER MENU ──────────────────────── */
.nav-toggle {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 54px;
height: 52px;
padding: 10px 8px 7px;
background: var(--teal);
border: none;
border-radius: 3px;
cursor: pointer;
align-self: center;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: #fff;
transition: transform 0.2s, opacity 0.2s;
}
/* MENU / CLOSE テキストラベル */
.nav-toggle::after {
content: 'MENU';
font-family: 'Courier Prime', monospace;
font-size: 9px;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.9);
line-height: 1;
margin-top: 1px;
transition: opacity 0.15s;
}
.site-header.nav-open .nav-toggle::after { content: 'CLOSE'; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 760px) {
.nav-toggle { display: flex; }
.header-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
flex-direction: column;
background: var(--paper);
border-top: 2px solid var(--rule);
border-bottom: 3px double var(--rule);
overflow: hidden;
}
.site-header { position: relative; }
.site-header.nav-open .header-nav { display: flex; }
.header-nav a {
border-right: none;
border-bottom: 1px solid var(--rule);
padding: 13px 24px;
font-size: 0.85rem;
}
.header-nav a.nav-form-btn {
font-size: 0.85rem;
letter-spacing: 0.1em;
background: var(--paper);
color: var(--ink-mid);
font-weight: normal;
}
.header-nav a.nav-form-btn:visited { color: var(--ink-mid); }
.header-nav a.nav-form-btn:hover { background: var(--teal); color: #fff; }
.header-nav a.nav-form-btn.active,
.header-nav a.nav-form-btn.active:visited { background: var(--paper-dark); color: var(--ink); }
.header-nav a:last-child { border-bottom: none; }
}
/* ──────── ANNOUNCE BAR ────────────────────────── */
#announce {
background: var(--teal);
color: rgba(242,237,223,0.85);
font-family: 'Courier Prime', monospace;
font-size: 13px;
padding: 8px 24px;
letter-spacing: 1px;
border-bottom: 2px solid var(--ink);
}
#announce a,
#announce a:visited {
color: rgba(242,237,223,0.85);
text-decoration: underline;
}
.ann-new {
background: var(--red-stamp);
color: #fff;
font-size: 11px;
padding: 2px 7px;
letter-spacing: 2px;
margin-right: 8px;
vertical-align: middle;
}
/* ──────── BREADCRUMB ──────────────────────────── */
#breadcrumb {
max-width: 960px;
margin: 0 auto;
padding: 8px 24px;
font-family: 'Courier Prime', monospace;
font-size: 10px;
color: var(--ink-light);
letter-spacing: 1px;
border-bottom: 1px solid var(--rule);
}
#breadcrumb a { color: var(--ink-light); text-decoration: none; }
#breadcrumb a:hover { text-decoration: underline; color: var(--teal); }
#breadcrumb span { color: var(--ink-mid); }
/* ──────── PAGE HEADING ────────────────────────── */
.page-heading {
display: flex;
align-items: baseline;
gap: 20px;
padding-bottom: 14px;
margin-bottom: 32px;
border-bottom: 1px solid var(--ink);
}
.page-heading-en {
font-family: 'Special Elite', serif;
font-size: clamp(1.2rem, 3vw, 1.6rem);
letter-spacing: 0.2em;
color: var(--ink);
line-height: 1;
flex-shrink: 0;
}
.page-heading-en::after {
display: none;
}
.page-heading-ja {
font-family: 'Noto Serif JP', serif;
font-weight: 300;
font-size: 0.8rem;
color: var(--ink-light);
letter-spacing: 0.18em;
}
/* ──────── PAGE LAYOUT ─────────────────────────── */
.page-wrap {
max-width: 960px;
margin: 0 auto;
padding: 36px 24px 80px;
}
.magazine-layout {
display: grid;
grid-template-columns: 1fr 260px;
gap: 40px;
align-items: start;
}
/* ──────── SECTION HEADINGS (list/detail) ──────── */
.sec-head {
font-family: 'Special Elite', serif;
font-size: 14px;
letter-spacing: 2px;
color: var(--paper);
background: var(--ink);
padding: 6px 13px;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.sec-head::before { content: '◆'; color: var(--gold-light); font-size: 11px; }
.sec-head-teal { background: var(--teal); }
/* ──────── HORIZONTAL RULE ORNAMENT ────────────── */
.hr-ornament {
text-align: center;
color: var(--rule);
font-size: 0.9rem;
letter-spacing: 0.5em;
margin: 32px 0;
user-select: none;
}
/* ──────── LEAD ARTICLE (top page) ─────────────── */
.lead-article {
margin-bottom: 32px;
}
.lead-kicker {
font-family: 'Courier Prime', monospace;
font-size: 0.7rem;
letter-spacing: 0.2em;
color: var(--teal);
text-transform: uppercase;
margin-bottom: 8px;
}
.lead-headline {
font-family: 'Noto Serif JP', serif;
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 600;
line-height: 1.4;
margin-bottom: 12px;
color: var(--ink);
}
.lead-deck {
font-family: 'IM Fell English', serif;
font-style: italic;
font-size: 1.05rem;
color: var(--ink-light);
line-height: 1.7;
border-left: 3px solid var(--teal);
padding-left: 16px;
margin-bottom: 20px;
}
.lead-img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
filter: sepia(40%) contrast(1.05);
margin-bottom: 20px;
border: 1px solid var(--rule);
}
.lead-body {
font-size: 0.92rem;
color: var(--ink-mid);
columns: 2;
column-gap: 28px;
column-rule: 1px solid var(--rule);
}
.lead-body p { margin-bottom: 12px; }
.lead-byline {
font-family: 'Courier Prime', monospace;
font-size: 0.72rem;
color: var(--ink-light);
letter-spacing: 0.1em;
margin-top: 16px;
display: flex;
justify-content: space-between;
border-top: 1px solid var(--rule);
padding-top: 8px;
}
/* ──────── ARTICLE LIST (top page) ─────────────── */
.article-item {
display: grid;
grid-template-columns: 100px 1fr;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid var(--rule);
align-items: start;
}
.article-item:last-child { border-bottom: none; }
.article-thumb {
width: 100px;
height: 75px;
object-fit: cover;
filter: sepia(35%);
display: block;
border: 1px solid var(--rule);
flex-shrink: 0;
}
.article-cat {
font-family: 'Courier Prime', monospace;
font-size: 0.9rem;
letter-spacing: 0.18em;
color: var(--teal);
display: block;
margin-bottom: 5px;
}
.article-title {
font-weight: 600;
font-size: 1.18rem;
line-height: 1.5;
margin-bottom: 7px;
color: var(--ink);
}
.article-title a {
text-decoration: none;
color: inherit;
border-bottom: 1px solid var(--rule);
}
.article-title a:hover {
color: var(--teal);
border-bottom-color: var(--teal);
text-decoration: none;
}
.article-excerpt {
font-size: 1.02rem;
color: var(--ink-light);
line-height: 1.85;
}
/* ──────── FEATURED CAFES (top page) ───────────── */
.featured-head {
font-family: 'Special Elite', serif;
font-size: 1.25rem;
letter-spacing: 0.05em;
color: var(--ink);
margin-bottom: 4px;
}
.featured-sub {
font-family: 'Courier Prime', monospace;
font-size: 0.78rem;
color: var(--ink-light);
letter-spacing: 0.12em;
margin-bottom: 20px;
}
.cafe-3col {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.cafe-col {
border: 1px solid var(--rule);
background: var(--paper-dark);
}
.cafe-col-img {
width: 100%;
height: 120px;
object-fit: cover;
display: block;
filter: sepia(45%);
border-bottom: 1px solid var(--rule);
}
.cafe-col-noimg {
width: 100%;
height: 120px;
background: var(--paper-dark);
display: flex;
align-items: center;
justify-content: center;
color: var(--rule);
font-size: 24px;
border-bottom: 1px solid var(--rule);
}
.cafe-col-body { padding: 12px 14px; }
.cafe-col-city {
font-family: 'Courier Prime', monospace;
font-size: 0.74rem;
letter-spacing: 0.14em;
color: var(--teal-faded);
display: block;
margin-bottom: 4px;
}
.cafe-col-name {
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 6px;
}
.cafe-col-name a {
text-decoration: none;
color: var(--ink);
border-bottom: 1px solid transparent;
}
.cafe-col-name a:hover,
.cafe-col:hover .cafe-col-name a {
border-bottom-color: var(--teal);
color: var(--teal);
text-decoration: none;
}
.cafe-col-note {
font-size: 0.86rem;
color: var(--ink-light);
line-height: 1.75;
overflow-wrap: break-word;
word-break: break-word;
}
/* ──────── SIDEBAR ─────────────────────────────── */
.sidebar-box {
border: 1px solid var(--rule);
margin-bottom: 28px;
background: var(--paper-dark);
}
.sidebar-box-head {
background: var(--ink);
color: var(--paper);
padding: 8px 14px;
font-family: 'Special Elite', serif;
font-size: 0.82rem;
letter-spacing: 0.1em;
display: flex;
align-items: center;
gap: 8px;
}
.sidebar-box-head::before {
content: '◆';
color: var(--gold-old);
font-size: 0.7rem;
}
.sidebar-box-head.teal { background: var(--teal); }
.sidebar-box-body { padding: 14px; }
/* update entries */
.update-entry {
padding: 9px 0;
border-bottom: 1px dashed var(--rule);
font-size: 0.92rem;
}
.update-entry:last-child { border-bottom: none; }
.update-more {
border-top: 1px dashed var(--rule);
margin-top: 2px;
}
.update-more > summary {
font-family: 'Courier Prime', monospace;
font-size: 0.72rem;
color: var(--ink-light);
letter-spacing: 0.05em;
cursor: pointer;
padding: 8px 0;
list-style: none;
user-select: none;
}
.update-more > summary::-webkit-details-marker { display: none; }
.update-more > summary::before {
content: '▶';
font-size: 0.55rem;
color: var(--teal);
margin-right: 6px;
transition: transform 0.2s;
display: inline-block;
}
.update-more[open] > summary::before { transform: rotate(90deg); }
.update-more-body { padding-top: 4px; }
.update-d {
font-family: 'Courier Prime', monospace;
font-size: 0.78rem;
color: var(--ink-light);
display: block;
margin-bottom: 2px;
}
.update-t a {
color: var(--ink);
text-decoration: none;
line-height: 1.7;
}
.update-t a:hover { color: var(--teal); text-decoration: underline; }
/* about box */
.about-text {
font-size: 0.82rem;
color: var(--ink-mid);
line-height: 1.85;
}
.about-text p + p { margin-top: 10px; }
.about-since {
font-family: 'Special Elite', serif;
font-size: 1.8rem;
color: var(--teal);
line-height: 1;
display: block;
margin-bottom: 4px;
}
/* cafe mini list */
.cafe-mini-item {
padding: 9px 0;
border-bottom: 1px dashed var(--rule);
font-size: 0.82rem;
}
.cafe-mini-item:last-child { border-bottom: none; }
.cafe-mini-city {
font-family: 'Courier Prime', monospace;
font-size: 0.66rem;
letter-spacing: 0.12em;
color: var(--teal-faded);
display: block;
}
.cafe-mini-name a {
color: var(--ink);
text-decoration: none;
font-weight: 400;
}
.cafe-mini-name a:hover { text-decoration: underline; color: var(--teal); }
/* hand note */
.hand-note {
font-family: 'IM Fell English', serif;
font-style: italic;
font-size: 0.82rem;
color: var(--ink-light);
margin-top: 10px;
padding: 8px;
border: 1px dashed var(--rule);
background: rgba(255,255,245,0.5);
line-height: 1.7;
}
.sidebar-link {
display: block;
margin-top: 10px;
font-family: 'Courier Prime', monospace;
font-size: 0.75rem;
color: var(--teal);
text-decoration: none;
letter-spacing: 0.1em;
text-align: right;
}
.sidebar-link:hover { text-decoration: underline; }
/* ──────── SIDEBAR SEARCH ──────────────────────── */
.sidebar-search-input {
width: 100%;
box-sizing: border-box;
padding: 6px 8px;
background: var(--paper-dark);
border: 1px solid var(--rule);
color: var(--ink);
font-family: 'Courier Prime', monospace;
font-size: 0.78rem;
outline: none;
}
.sidebar-search-input::placeholder { color: var(--ink-light); }
.sidebar-search-input:focus { border-color: var(--teal); }
.sidebar-search-results { margin-top: 8px; }
.sidebar-search-hit {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 6px;
padding: 5px 0;
border-bottom: 1px dashed var(--rule);
text-decoration: none;
font-size: 0.78rem;
color: var(--ink);
}
.sidebar-search-hit:last-child { border-bottom: none; }
.sidebar-search-hit:hover { color: var(--teal); }
.sidebar-search-area {
font-family: 'Courier Prime', monospace;
font-size: 0.68rem;
color: var(--ink-light);
white-space: nowrap;
flex-shrink: 0;
}
.sidebar-search-closed {
font-size: 0.62rem;
color: #b04030;
border: 1px solid #b04030;
padding: 0 3px;
margin-left: 3px;
vertical-align: middle;
letter-spacing: 0.02em;
}
.sidebar-search-none {
font-size: 0.75rem;
color: var(--ink-light);
font-style: italic;
margin: 6px 0 0;
}
/* ──────── BADGES ──────────────────────────────── */
.new-badge,
.badge-new {
display: inline-block;
background: var(--red-stamp);
color: #fff;
font-family: 'Courier Prime', monospace;
font-size: 0.6rem;
padding: 1px 6px;
letter-spacing: 0.05em;
margin-left: 4px;
vertical-align: middle;
}
.closed-badge {
display: inline-block;
background: var(--ink-light);
color: #fff;
font-family: 'Courier Prime', monospace;
font-size: 0.6rem;
line-height: inherit;
padding: 1px 6px;
letter-spacing: 0.05em;
margin-left: 4px;
vertical-align: middle;
text-decoration: none;
}
a.closed-badge,
a.closed-badge:visited,
a.closed-badge:hover {
color: #fff;
text-decoration: none;
}
.media-tag {
display: inline-block;
border: 1px solid var(--rule);
font-family: 'Courier Prime', monospace;
font-size: 9px;
padding: 1px 5px;
letter-spacing: 1px;
color: var(--teal);
margin-right: 3px;
margin-bottom: 2px;
}
.req-tag {
display: inline-block;
border: 1px solid var(--gold);
font-family: 'Courier Prime', monospace;
font-size: 9px;
padding: 1px 5px;
letter-spacing: 1px;
color: var(--gold);
}
.small-link {
font-family: 'Courier Prime', monospace;
font-size: 11px;
letter-spacing: 1px;
}
/* ──────── FOOTER ──────────────────────────────── */
.site-footer {
border-top: 3px double var(--rule);
background: var(--paper-dark);
}
.footer-inner {
max-width: 960px;
margin: 0 auto;
padding: 20px 24px;
display: flex;
justify-content: center;
gap: 0;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
list-style: none;
}
.footer-nav li + li::before {
content: '|';
color: var(--rule);
margin: 0 10px;
}
.footer-nav a {
font-family: 'Courier Prime', monospace;
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--ink-light);
text-decoration: none;
text-transform: uppercase;
}
.footer-nav a:hover { color: var(--teal); }
.footer-copy {
max-width: 960px;
margin: 0 auto;
padding: 12px 24px 20px;
font-family: 'Courier Prime', monospace;
font-size: 0.68rem;
color: var(--ink-light);
letter-spacing: 0.1em;
border-top: 1px solid var(--rule);
}
/* ─────────────────────────────────────────────────
CAFE LIST PAGE
───────────────────────────────────────────────── */
/* jump links above list */
.jump-links {
font-family: 'Courier Prime', monospace;
font-size: 13px;
letter-spacing: 1px;
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.jump-links span { color: var(--ink-light); font-size: 12px; }
.jump-links a {
padding: 3px 10px;
border: 1px solid var(--rule);
text-decoration: none;
color: var(--teal);
background: var(--paper-dark);
font-size: 13px;
}
.jump-links a:hover { background: var(--teal); color: #fff; text-decoration: none; }
/* list page intro note */
.misc-note {
font-size: 12px;
color: var(--ink-light);
border: 1px dashed var(--rule);
padding: 8px 10px;
margin-top: 8px;
line-height: 1.8;
background: rgba(255,255,240,0.4);
}
/* region blocks */
.region-block { margin-bottom: 28px; }
.region-head {
background: var(--ink);
color: var(--paper);
font-family: 'Special Elite', serif;
font-size: 14px;
letter-spacing: 4px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 8px;
}
.region-head::before { content: '◆'; color: var(--gold-old); font-size: 10px; }
.region-count {
font-family: 'Courier Prime', monospace;
font-size: 12px;
color: rgba(242,237,223,0.75);
margin-left: auto;
letter-spacing: 1px;
}
.region-head-teal { background: var(--teal); }
.region-head-faded { background: var(--ink-light); }
/* cafe table */
.cafe-table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
}
.cafe-table thead tr { background: rgba(42,102,114,0.07); }
.cafe-table thead th {
font-family: 'Courier Prime', monospace;
font-size: 12px;
letter-spacing: 2px;
color: var(--teal);
text-align: left;
padding: 7px 10px;
border-bottom: 1px solid var(--rule);
font-weight: normal;
}
.cafe-table tbody tr { border-bottom: 1px dashed var(--rule); }
.cafe-table tbody tr:last-child { border-bottom: 1px solid var(--rule); }
.cafe-table tbody tr { cursor: pointer; transition: background 0.15s ease; }
.cafe-table tbody tr:hover { background: rgba(255,255,240,0.7); }
.cafe-table tbody tr:hover .td-name a:not(.closed-badge) { color: var(--teal); }
.cafe-table td { padding: 9px 10px; vertical-align: top; }
.td-name { font-weight: 600; }
.td-name a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.td-name a:hover { color: var(--teal); }
.td-date {
display: block;
font-family: 'Courier Prime', monospace;
font-size: 0.68rem;
color: var(--ink-light);
letter-spacing: 0.05em;
font-weight: 300;
margin-top: 2px;
}
.td-memo { color: var(--ink-light); font-size: 13.5px; line-height: 1.8; }
.td-meta { font-size: 13.5px; color: var(--ink-light); line-height: 1.85; }
.td-flags { display: block; font-size: 11px; color: var(--ink-mid); margin-top: 2px; letter-spacing: 0.5px; }
/* closed items */
.closed-item {
padding: 6px 0;
border-bottom: 1px dashed rgba(184,170,144,0.4);
font-size: 13px;
color: var(--ink-light);
}
.closed-item:last-child { border-bottom: none; }
/* sidebar filter links */
.filter-links { display: flex; flex-direction: column; gap: 3px; }
.filter-links a {
font-family: 'Courier Prime', monospace;
font-size: 12.5px;
letter-spacing: 1px;
color: var(--teal);
text-decoration: none;
padding: 4px 0;
border-bottom: 1px dashed var(--rule);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.filter-links a:hover { text-decoration: underline; }
.filter-links a:last-child { border-bottom: none; }
.filter-count { font-size: 11px; color: var(--ink-light); }
.sidebar-box-head .filter-count { margin-left: auto; color: rgba(242,237,223,0.75); float: none; }
/* filter sidebar group headers (東京都 / 地方) */
.filter-group-head {
font-family: 'Courier Prime', monospace;
font-size: 12px;
letter-spacing: 1px;
color: var(--ink-mid);
padding: 7px 0 2px;
margin-top: 6px;
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.filter-group-head.filter-group-sep { margin-top: 12px; }
.filter-group-count { font-size: 11px; color: var(--ink-mid); }
/* collapsible filter groups () */
.filter-group-details {
border-bottom: 1px solid var(--rule);
}
.filter-group-details:last-child { border-bottom: none; }
.filter-group-details > summary {
list-style: none;
cursor: pointer;
padding: 8px 0;
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: 'Courier Prime', monospace;
font-size: 12px;
letter-spacing: 1px;
color: var(--ink-mid);
user-select: none;
gap: 6px;
}
.filter-group-details > summary::-webkit-details-marker { display: none; }
.filter-group-details > summary .filter-toggle {
margin-left: auto;
font-size: 0.75em;
opacity: 0.55;
transition: transform 0.18s;
display: inline-block;
}
.filter-group-details[open] > summary .filter-toggle {
transform: rotate(90deg);
}
.filter-group-details .filter-links {
padding-bottom: 6px;
}
/* jump links group label */
.jump-links .jump-group-head {
flex-basis: 100%;
font-size: 12px;
letter-spacing: 1px;
color: var(--ink-mid);
padding: 2px 0;
border-bottom: 1px solid var(--rule);
margin-bottom: 2px;
}
.jump-links .jump-group-sep { margin-top: 8px; }
/* main list group title dividers */
.region-group-title {
font-family: 'Courier Prime', monospace;
font-size: 13px;
letter-spacing: 2px;
color: var(--ink-mid);
padding: 6px 2px;
margin-top: 0;
margin-bottom: 16px;
border-top: 2px solid var(--ink-mid);
border-bottom: 1px solid var(--rule);
}
.region-group-title.region-group-title-sep {
margin-top: 0;
padding-top: 40px;
border-top: none;
border-bottom: 2px solid var(--ink-mid);
position: relative;
}
.region-group-title.region-group-title-sep::before {
content: '';
position: absolute;
top: 18px;
left: 0;
right: 0;
border-top: 2px solid var(--ink-mid);
}
/* sidebar cafe list (new) */
.side-cafe-item {
padding: 9px 0;
border-bottom: 1px dashed var(--rule);
font-size: 0.9rem;
}
.side-cafe-item:last-child { border-bottom: none; }
.side-cafe-date {
display: block;
font-family: 'Courier Prime', monospace;
font-size: 0.68rem;
color: var(--ink-light);
letter-spacing: 0.05em;
margin-top: 2px;
}
.side-cafe-region {
font-family: 'Courier Prime', monospace;
font-size: 0.74rem;
letter-spacing: 0.12em;
color: var(--teal-faded);
display: block;
}
.side-cafe-name a { color: var(--ink); text-decoration: none; font-weight: 400; }
.side-cafe-name a:hover { text-decoration: underline; color: var(--teal); }
/* ─────────────────────────────────────────────────
DETAIL PAGE
───────────────────────────────────────────────── */
.cafe-title-block {
border-bottom: 3px double var(--ink);
padding-bottom: 16px;
margin-bottom: 20px;
}
.cafe-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.ctag {
font-family: 'Courier Prime', monospace;
font-size: 10px;
letter-spacing: 2px;
padding: 2px 7px;
border: 1px solid;
}
.ctag-region { color: var(--teal); border-color: var(--teal); }
.ctag-media { color: var(--ink-light); border-color: var(--rule); }
.ctag-kissa { color: var(--ink-mid); border-color: var(--ink-mid); }
.ctag-sake { color: var(--ink-mid); border-color: var(--ink-mid); }
.ctag-shokuji { color: var(--ink-mid); border-color: var(--ink-mid); }
.ctag-new { color: var(--red-stamp); border-color: var(--red-stamp); }
.cafe-main-title {
font-family: 'Noto Serif JP', serif;
font-size: 20px;
font-weight: 600;
line-height: 1.35;
margin-bottom: 4px;
}
.cafe-visit-line {
font-family: 'Courier Prime', monospace;
font-size: 10px;
color: var(--ink-light);
letter-spacing: 1px;
}
/* info table */
.info-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin-bottom: 20px;
}
.info-table td {
padding: 7px 10px;
border-bottom: 1px dashed var(--rule);
vertical-align: top;
}
.info-table tr:last-child td { border-bottom: none; }
.info-label {
font-family: 'Courier Prime', monospace;
font-size: 13.5px;
letter-spacing: 1px;
color: var(--teal-faded);
white-space: nowrap;
width: 110px;
background: var(--paper-dark);
}
.info-val { color: var(--ink); word-break: break-all; overflow-wrap: break-word; }
.info-val a { color: var(--teal); text-decoration: none; }
.info-val a:hover { text-decoration: underline; }
/* photo strip */
.photo-strip {
display: grid;
grid-template-columns: 1.8fr 1fr 1fr;
gap: 3px;
margin: 14px 0 5px;
border: 1px solid var(--rule);
}
.photo-strip img {
width: 100%;
height: 132px;
object-fit: cover;
display: block;
filter: sepia(42%) contrast(1.05);
}
.photo-strip img:hover { filter: sepia(10%); transition: filter 0.3s; cursor: zoom-in; }
.photo-caption {
font-family: 'Courier Prime', monospace;
font-size: 10px;
color: var(--ink-light);
text-align: right;
margin-bottom: 18px;
letter-spacing: 1px;
}
/* review section */
.review-kicker {
font-family: 'Courier Prime', monospace;
font-size: 13px;
color: var(--teal-faded);
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 4px;
}
.review-title {
font-family: 'Noto Serif JP', serif;
font-size: 16px;
font-weight: 600;
margin-bottom: 13px;
padding-bottom: 8px;
border-bottom: 1px solid var(--rule);
line-height: 1.45;
}
.review-body {
font-size: 13px;
color: var(--ink-mid);
line-height: 2.05;
}
.review-body p { margin-bottom: 13px; }
.byline {
font-family: 'Courier Prime', monospace;
font-size: 10px;
color: var(--ink-light);
letter-spacing: 2px;
display: flex;
justify-content: space-between;
border-top: 1px solid var(--rule);
padding-top: 6px;
margin-top: 10px;
clear: both;
}
.pull-quote {
float: right;
width: 38%;
margin: 2px 0 14px 20px;
padding: 10px 13px;
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--rule);
font-family: 'IM Fell English', serif;
font-style: italic;
font-size: 13.5px;
line-height: 1.6;
}
.pull-quote::before {
content: '\201C';
font-size: 2.2rem;
color: var(--rule);
display: block;
line-height: 0.6;
margin-bottom: 7px;
}
/* comments */
.comment-item {
padding: 14px 0;
border-bottom: 1px dashed var(--rule);
font-size: 14px;
}
.comment-item:last-child { border-bottom: none; }
.comment-meta {
font-family: 'Courier Prime', monospace;
font-size: 13px;
color: var(--teal-faded);
letter-spacing: 1px;
margin-bottom: 6px;
font-weight: bold;
}
.comment-text { color: var(--ink-mid); line-height: 1.65; }
/* site search form */
.site-search-form {
display: flex;
flex-wrap: wrap;
gap: 5px;
width: 100%;
box-sizing: border-box;
}
.site-search-form input[type="text"] {
flex: 1 1 0;
min-width: 0;
width: 0;
padding: 6px 8px;
font-family: 'Noto Serif JP', serif;
font-size: 12px;
border: 1px solid var(--rule);
background: var(--paper);
color: var(--ink);
outline: none;
box-sizing: border-box;
}
.site-search-form input[type="text"]:focus {
border-color: var(--teal);
}
.site-search-form button {
flex-shrink: 0;
padding: 6px 8px;
background: var(--ink);
color: var(--paper);
border: none;
font-family: 'Courier Prime', monospace;
font-size: 11px;
letter-spacing: 1px;
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
}
.site-search-form button:hover {
background: var(--teal);
}
/* detail sidebar extras */
.s-note {
font-size: 11.5px;
color: var(--ink-light);
line-height: 1.8;
font-style: italic;
}
.s-btn-out {
display: block;
width: 100%;
background: transparent;
color: var(--teal);
border: 1px solid var(--teal);
padding: 7px;
font-family: 'Courier Prime', monospace;
font-size: 11px;
letter-spacing: 2px;
text-align: center;
text-decoration: none;
margin-top: 6px;
}
.s-btn-out:hover { background: var(--teal); color: var(--paper); text-decoration: none; }
.organizer-note {
background: var(--teal);
padding: 13px;
font-size: 12px;
color: rgba(242,237,223,0.88);
line-height: 1.85;
font-style: italic;
}
.organizer-kicker {
font-family: 'Courier Prime', monospace;
font-style: normal;
font-size: 10px;
color: var(--gold-old);
letter-spacing: 2px;
display: block;
margin-bottom: 6px;
}
/* related cafes */
.related-item {
display: flex;
gap: 11px;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed var(--rule);
text-decoration: none;
}
.related-item:last-child { border-bottom: none; }
.related-item img {
width: 62px;
height: 46px;
object-fit: cover;
filter: sepia(42%);
border: 1px solid var(--rule);
flex-shrink: 0;
}
.related-region {
font-family: 'Courier Prime', monospace;
font-size: 9px;
color: var(--teal-faded);
letter-spacing: 2px;
display: block;
}
.related-name { font-size: 12px; color: var(--ink); }
.related-item:hover { text-decoration: none; } /* a:hover のグローバル下線を上書き */
.related-item:hover .related-name { text-decoration: underline; color: var(--teal); }
/* ──────── RESPONSIVE ──────────────────────────── */
@media (max-width: 760px) {
.magazine-layout { grid-template-columns: 1fr; }
.lead-body { columns: 1; }
.cafe-3col { grid-template-columns: 1fr 1fr; }
.footer-inner { padding: 16px 16px; }
.photo-strip { grid-template-columns: 1fr 1fr; }
.photo-strip img:first-child { grid-column: 1 / 3; }
.pull-quote { float: none; width: 100%; margin: 0 0 13px; }
/* マストヘッド左テキスト（英語説明文）はスマホで非表示 */
.masthead-left { display: none; }
/* ③ TOPページ「本日のジャズ喫茶」サイドバーボックスをスマホで非表示
スマホでは sidebar がメインの下に来るため、10件のリストが長くなりすぎる */
#sidebar-box-daily { display: none; }
/* ④ アナウンスバーのスマホ用パディング調整
デスクトップの 24px → 14px（page-wrap の余白に合わせる）。フォントは 13px を維持 */
#announce { padding: 8px 14px; font-size: 13px; line-height: 1.7; }
/* ⑥ 「全リストを見る →」のタップエリアを縦に広げてタップしやすく */
.small-link { display: inline-block; padding: 8px 0; }
/* ① カフェリストのジャンプリンク：タップ領域を縦に広げる（現状3px → 7px） */
.jump-links a { padding: 7px 10px; }
/* ⑥ TOPへ戻るボタン：スマホ推奨タップサイズ44×44pxに拡大 */
#back-to-top { width: 44px; height: 44px; bottom: 24px; right: 16px; font-size: 14px; }
/* ② サイドバーリンクのタップ領域を縦に広げる（推奨44px確保） */
.sidebar-link { padding: 8px 0; margin-top: 2px; }
}
@media (max-width: 480px) {
.cafe-3col { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr; }
.article-item { grid-template-columns: 1fr; }
.article-thumb { width: 100%; height: 140px; }
.cafe-table thead { display: none; }
.cafe-table td { display: block; padding: 3px 8px; }
.cafe-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--rule); }
/* page-wrap のパディングをスマホ用にコンパクト化 */
.page-wrap { padding: 16px 14px 60px; }
/* photo-strip: 480px以下は1列に（縦スクロールで見やすく） */
.photo-strip { grid-template-columns: 1fr; }
.photo-strip img:first-child { grid-column: auto; }
.photo-strip img { height: 200px; }
/* ──────────────────────────────────────────────────
info-table 縦積みレイアウト
属性項目名が長くても td 幅に収まるように、
ラベル（th/info-label）を行の上に出して縦積みにする。
将来の cafe_attrs 拡張にも対応。
────────────────────────────────────────────────── */
.info-table,
.info-table tbody,
.info-table tr,
.info-table td { display: block; width: 100%; box-sizing: border-box; }
.info-table tr { border-bottom: 1px dashed var(--rule); padding: 4px 0; }
.info-table tr:last-child { border-bottom: none; }
.info-table td { border-bottom: none; padding: 2px 12px; }
.info-label {
white-space: normal;
width: auto;
padding-top: 8px;
padding-bottom: 1px;
font-size: 11px;
background: transparent;
letter-spacing: 0.5px;
}
.info-val { padding-top: 1px; padding-bottom: 8px; font-size: 14px; }
/* ⑤ 更新情報タイムライン：480px以下ではフォントを少し小さくしてコンパクトに
※ .update-d は display:block で既に縦積み済み。追加調整のみ */
.update-log { padding-left: 16px; }
.update-entry { font-size: 0.85rem; }
.update-d { font-size: 0.72rem; }
/* カフェカード説明文：1カラムになるタイミングで少し大きく */
.cafe-col-note { font-size: 0.9rem; }
/* ⑤ カフェリストの注意書き：12px → 13px に引き上げ（小さすぎる）*/
.misc-note { font-size: 13px; line-height: 1.9; }
/* ④ 店舗詳細の手書き注記（※掲載情報は…）：12px → 13px */
.hand-note { font-size: 13px; }
}
/* ──────── MISC UTILITY ─────────────────────────── */
/* navmenu (form page anchor list) */
.navmenu {
list-style: none;
border: 1px solid var(--rule);
background: var(--paper-dark);
padding: 10px 14px;
}
.navmenu li {
padding: 5px 0;
border-bottom: 1px dashed var(--rule);
}
.navmenu li:last-child { border-bottom: none; }
.navmenu li a {
font-family: 'Courier Prime', monospace;
font-size: 14px;
letter-spacing: 1px;
color: var(--teal);
text-decoration: none;
}
.navmenu li a:hover { text-decoration: underline; }
/* update log (top page) — base styles moved to TIMELINE section */
/* area header row in cafe table */
.td-area-head {
background: rgba(42,102,114,0.05);
font-family: 'Courier Prime', monospace;
font-size: 10px;
letter-spacing: 2px;
color: var(--teal);
padding: 5px 10px !important;
border-bottom: 1px solid var(--rule) !important;
}
/* article-list: no-image fallback */
.article-item.no-thumb {
grid-template-columns: 1fr;
}
/* article list wrapper */
.article-list {
border-top: 2px solid var(--rule);
margin-top: 8px;
margin-bottom: 32px;
}
/* ── バックナンバー ── */
.backnumber-wrap {
margin-bottom: 32px;
}
.backnumber-head {
font-family: 'Courier Prime', monospace;
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-light);
border-bottom: 1px solid var(--rule);
padding-bottom: 4px;
margin-bottom: 6px;
}
.backnumber-item {
border-bottom: 1px dotted var(--rule);
}
.backnumber-item > summary {
display: flex;
align-items: baseline;
gap: 12px;
padding: 7px 2px;
cursor: pointer;
list-style: none;
user-select: none;
}
.backnumber-item > summary::-webkit-details-marker { display: none; }
.backnumber-item > summary::before {
content: '▶';
font-size: 0.55rem;
color: var(--teal);
flex-shrink: 0;
transition: transform 0.2s;
}
.backnumber-item[open] > summary::before {
transform: rotate(90deg);
}
.bn-date {
font-family: 'Courier Prime', monospace;
font-size: 0.72rem;
color: var(--ink-light);
white-space: nowrap;
flex-shrink: 0;
}
.bn-title {
font-size: 0.88rem;
color: var(--ink-mid);
}
.backnumber-item:hover > summary .bn-title { color: var(--teal); }
.bn-body {
padding: 12px 4px 16px 20px;
font-size: 0.87rem;
color: var(--ink-mid);
line-height: 1.85;
border-left: 2px solid var(--rule);
margin-left: 4px;
}
.bn-body p { margin-bottom: 10px; }
.bn-body p:last-child { margin-bottom: 0; }
/* ──────── BACK TO TOP ──────────────────────────── */
#back-to-top {
position: fixed;
bottom: 32px;
right: 28px;
width: 38px;
height: 38px;
background: var(--ink);
color: var(--paper);
border: none;
cursor: pointer;
font-size: 13px;
font-family: 'Courier Prime', monospace;
letter-spacing: 0;
display: none;
z-index: 200;
opacity: 0.72;
transition: opacity 0.2s, background 0.2s;
border-radius: 2px;
}
#back-to-top:hover { background: var(--teal); opacity: 1; }
/* ──────── HERO CROSSFADE ─────────────────────── */
.top-hero {
position: relative;
width: 100%;
height: 320px;
overflow: hidden;
margin-bottom: 28px;
border: 1px solid var(--rule);
}
.top-hero img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: sepia(30%) contrast(1.08) brightness(0.95) saturate(0.85);
opacity: 0;
transition: opacity 1.2s ease-in-out;
}
.top-hero img.hero-active {
opacity: 1;
}
/* ──────── CAFE CARD HOVER ────────────────────── */
.cafe-col {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cafe-col:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(30,26,20,0.12);
}
.cafe-col:hover .cafe-col-img {
filter: sepia(10%) contrast(1.05);
transition: filter 0.4s;
}
/* ──────── NAV ACTIVE (underline style) ───────── */
.header-nav a.active {
background: var(--paper);
color: var(--ink);
border-bottom: 3px solid var(--teal);
padding-bottom: 5px;
}
.header-nav a.active:visited { color: var(--ink); }
/* ──────── UPDATE TIMELINE ────────────────────── */
.update-log {
margin-top: 12px;
position: relative;
padding-left: 20px;
}
.update-log::before {
content: '';
position: absolute;
left: 5px;
top: 8px;
bottom: 8px;
width: 1px;
background: var(--rule);
}
.update-entry {
position: relative;
padding: 9px 0;
border-bottom: 1px dashed var(--rule);
}
.update-entry::before {
content: '';
position: absolute;
left: -19px;
top: 16px;
width: 7px;
height: 7px;
background: var(--teal);
border-radius: 50%;
border: 2px solid var(--paper);
box-shadow: 0 0 0 1px var(--rule);
}
/* ──────── CLOSED CAFES SECTION ───────────────── */
.closed-cafes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.closed-cafe-card {
border: 1px solid var(--rule);
background: var(--paper-dark);
padding: 14px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.closed-cafe-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(30,26,20,0.1);
}
.closed-cafe-card .closed-badge-lg {
display: inline-block;
background: var(--ink-light);
color: #fff;
font-family: 'Courier Prime', monospace;
font-size: 0.58rem;
padding: 1px 5px;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.closed-cafe-card .closed-card-name {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 4px;
line-height: 1.4;
}
.closed-cafe-card .closed-card-name a {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-bottom-color 0.2s, color 0.2s;
}
.closed-cafe-card .closed-card-name a:hover,
.closed-cafe-card:hover .closed-card-name a {
color: var(--teal);
border-bottom-color: var(--teal);
}
.closed-cafe-card .closed-card-area {
font-family: 'Courier Prime', monospace;
font-size: 0.68rem;
color: var(--ink-light);
letter-spacing: 0.1em;
display: block;
margin-bottom: 6px;
}
.closed-cafe-card .closed-card-note {
font-size: 0.82rem;
color: var(--ink-light);
line-height: 1.7;
}
@media (max-width: 760px) {
.closed-cafes-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.closed-cafes-grid { grid-template-columns: 1fr; }
}
/* ──────── AREA MINI-MAP (sidebar) ────────────── */
.area-map-box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.area-map-item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 6px;
font-family: 'Courier Prime', monospace;
font-size: 0.7rem;
color: var(--ink-mid);
text-decoration: none;
border-bottom: 1px dashed var(--rule);
letter-spacing: 0.03em;
transition: background 0.15s;
}
.area-map-item:hover {
background: rgba(42,102,114,0.07);
color: var(--teal);
text-decoration: none;
}
.area-map-count {
font-size: 0.62rem;
color: var(--ink-light);
margin-left: 4px;
}
/* ──────── ENRICHED FOOTER ────────────────────── */
.footer-grid {
max-width: 960px;
margin: 0 auto;
padding: 28px 24px 16px;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 32px;
align-items: start;
}
.footer-col-head {
font-family: 'Special Elite', serif;
font-size: 0.78rem;
letter-spacing: 0.12em;
color: var(--ink);
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid var(--rule);
}
.footer-col-head::before {
content: '◆ ';
color: var(--gold-old);
font-size: 0.65rem;
}
.footer-about-text {
font-size: 0.75rem;
color: var(--ink-light);
line-height: 1.85;
}
.footer-link-list {
list-style: none;
}
.footer-link-list li {
padding: 3px 0;
}
.footer-link-list a {
font-family: 'Courier Prime', monospace;
font-size: 0.72rem;
color: var(--ink-light);
text-decoration: none;
letter-spacing: 0.06em;
}
.footer-link-list a:hover { color: var(--teal); }
.footer-sns-link {
display: block;
font-family: 'Courier Prime', monospace;
font-size: 0.72rem;
color: var(--teal);
text-decoration: none;
letter-spacing: 0.06em;
padding: 3px 0;
}
.footer-sns-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
.footer-grid { grid-template-columns: 1fr; gap: 20px; }
}