/* ========================================================= いばみっけ — Design System (ibamikke.css) 茨城の地元応援ローカルメディアやわらかい丸ゴシック × 爽やかなブルー基調 ========================================================= */ /* ---------- Design tokens ---------- */ :root{ /* Brand & accents */ --brand: #7EC8F3; /* sky blue (brand) */ --brand-deep: #48A3D7; /* interactive blue (buttons / search / links) */ --brand-ink: #2E86BE; /* deep blue text on light */ --accent: #FFE17A; /* highlight yellow (nav underline, marker) */ --accent-deep: #F4C84B; /* feature read button */ /* Category palette */ --c-gourmet: #F5A3C6; --c-cafe: #FCCF64; --c-odekake: #AADEAC; --c-kozure: #FCE5AC; --c-biyou: #C2B6D6; --c-kurashi: #BED7F3; --c-izakaya: #B5E5F9; --c-event: #FBD7DF; /* Neutrals / surfaces */ --bg: #F4FAFD; --surface: #FFFFFF; --tint: #EAF6FC; /* pale blue panel */ --tint-2: #F2F8FB; --ink: #555555; --ink-strong:#3C4248; --muted: #93A0AA; --line: #E3EDF3; /* Radius (overridden by [data-radius]) */ --r-card: 20px; --r-pill: 999px; --r-tile: 22px; --r-input: 14px; /* Spacing scale (overridden by [data-density]) */ --gap: 24px; --section-pad: 64px; --container: 1120px; /* Shadows — soft, low-contrast */ --shadow-sm: 0 2px 10px rgba(74,134,180,.08); --shadow-md: 0 8px 28px rgba(74,134,180,.12); --shadow-lg: 0 16px 48px rgba(40,110,160,.16); /* Fonts */ --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Quicksand", sans-serif; --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif; } /* ---- Theme variants (set on ) ---- */ html[data-theme="pastel"]{ --bg:#FBF7FB; --tint:#F6EEF6; --tint-2:#FBF6FA; --brand:#9DCBE8; --brand-deep:#7FB6DD; --brand-ink:#5E93BE; } html[data-theme="calm"]{ --bg:#F1F5F8; --tint:#E7EEF3; --tint-2:#EFF3F6; --brand:#8FB4C9; --brand-deep:#5E8AA6; --brand-ink:#456A82; --ink-strong:#34404A; } /* ---- Accent variants ---- */ html[data-accent="coral"]{ --accent:#FFB59A; --accent-deep:#F2906E; } html[data-accent="none"]{ --accent:#CFE6F4; --accent-deep:#9FCBE6; } /* ---- Density ---- */ html[data-density="comfy"] { --gap:30px; --section-pad:84px; } html[data-density="compact"]{ --gap:18px; --section-pad:44px; } /* ---- Radius ---- */ html[data-radius="lg"]{ --r-card:26px; --r-tile:28px; --r-input:18px; } html[data-radius="sm"]{ --r-card:10px; --r-tile:12px; --r-input:8px; } /* ---- Font variant ---- */ html[data-font="gothic"]{ --font-display:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif; --font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif; } /* ---------- Reset ---------- */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family:var(--font-body); color:var(--ink); background:var(--bg); font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased; font-weight:500; } img{ display:block; max-width:100%; } a{ color:var(--brand-ink); text-decoration:none; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink-strong); margin:0; line-height:1.5; font-weight:700; } .container{ max-width:var(--container); margin:0 auto; padding:0 28px; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-display); font-weight:700; font-size:15px; border:none; border-radius:var(--r-pill); padding:13px 26px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn:hover{ transform:translateY(-2px); } .btn .arw{ font-size:.85em; } .btn-primary{ background:var(--brand-deep); color:#fff; box-shadow:0 6px 16px rgba(72,163,215,.32); } .btn-primary:hover{ background:var(--brand-ink); } .btn-outline{ background:#fff; color:var(--brand-deep); box-shadow:inset 0 0 0 2px var(--brand-deep); } .btn-outline:hover{ background:var(--tint); } .btn-accent{ background:var(--accent); color:#7a5b12; box-shadow:0 6px 16px rgba(244,200,75,.4); } .btn-accent:hover{ background:var(--accent-deep); } .btn-text{ background:none; color:var(--brand-deep); padding:6px 4px; font-weight:700; } .btn-text:hover{ text-decoration:underline; transform:none; } .btn-ghost-pill{ /* small "see all" pill */ background:#fff; color:var(--brand-deep); border-radius:var(--r-pill); padding:11px 24px; font-weight:700; font-size:14px; box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; gap:.5em; } .btn-ghost-pill:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); } /* ---------- Category tag pills ---------- */ .tag{ display:inline-flex; align-items:center; border-radius:var(--r-pill); font-family:var(--font-display); font-weight:700; font-size:12.5px; color:#fff; padding:5px 14px; letter-spacing:.02em; text-shadow:0 1px 1px rgba(0,0,0,.08); } .tag.gourmet{ background:var(--c-gourmet); } .tag.cafe{ background:var(--c-cafe); color:#7a5b12; text-shadow:none;} .tag.odekake{ background:var(--c-odekake); color:#3f6b41; text-shadow:none;} .tag.kozure{ background:var(--c-kozure); color:#8a6a1d; text-shadow:none;} .tag.biyou{ background:var(--c-biyou); } .tag.kurashi{ background:var(--c-kurashi); color:#3c618c; text-shadow:none;} .tag.izakaya{ background:var(--c-izakaya); color:#2d7fa0; text-shadow:none;} .tag.event{ background:var(--c-event); color:#b5648a; text-shadow:none;} /* ---------- Section headings ---------- */ .section{ padding:var(--section-pad) 0; } .section-head{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:36px; } .section-head h2{ font-size:30px; letter-spacing:.04em; } .section-head .spark{ width:26px; opacity:.9; } .section-head .spark.flip{ transform:scaleX(-1); } .section-head--left{ justify-content:flex-start; } /* ---------- Header ---------- */ .site-header{ background:#fff; position:sticky; top:0; z-index:40; box-shadow:0 2px 14px rgba(74,134,180,.07); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:24px; } .brand-logo img{ height:64px; width:auto; } .main-nav{ display:flex; align-items:center; gap:30px; } .nav-item{ display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--ink); font-size:13.5px; font-weight:700; font-family:var(--font-display); padding-bottom:8px; border-bottom:3px solid transparent; transition:color .15s; } .nav-item .ic{ width:24px; height:24px; stroke:var(--brand-deep); stroke-width:1.7; fill:none; } .nav-item:hover{ color:var(--brand-deep); } .nav-item.active{ color:var(--ink-strong); border-bottom-color:var(--accent); } .nav-item.active .ic{ stroke:var(--ink-strong); } .lang-btn{ border:2px solid var(--brand); color:var(--brand-deep); background:#fff; border-radius:var(--r-pill); padding:8px 18px; font-weight:700; font-size:13px; } .lang-btn:hover{ background:var(--tint); } /* ---------- Search bar ---------- */ .searchbar{ display:flex; align-items:center; background:#fff; border:2px solid var(--line); border-radius:var(--r-input); box-shadow:var(--shadow-sm); overflow:hidden; } .searchbar input{ flex:1; border:none; outline:none; padding:16px 20px; font-size:15px; font-family:var(--font-body); color:var(--ink); background:transparent; } .searchbar input::placeholder{ color:var(--muted); } .searchbar button{ background:var(--brand-deep); border:none; color:#fff; width:64px; align-self:stretch; display:grid; place-items:center; } .searchbar button:hover{ background:var(--brand-ink); } .searchbar button svg{ width:22px; height:22px; stroke:#fff; stroke-width:2.4; fill:none; } /* ---------- Hero ---------- */ .hero{ position:relative; overflow:hidden; } .hero-photo{ position:relative; min-height:460px; display:flex; align-items:center; background:linear-gradient(180deg,#cdeaf6 0%,#bfe3f4 100%); } .hero-inner{ position:relative; z-index:3; width:100%; } .hero-inner .container{ display:grid; } .hero-copy{ max-width:560px; } .hero h1{ font-size:clamp(34px,4.4vw,54px); line-height:1.35; letter-spacing:.02em; color:#3c4248; text-shadow:0 2px 12px rgba(255,255,255,.7); } .hero h1 .mk{ color:var(--brand-ink); position:relative; } .hero h1 .mk::after{ content:""; position:absolute; left:-2%; right:-2%; bottom:.04em; height:.18em; background:var(--brand); opacity:.55; border-radius:4px; z-index:-1; } .hero p{ margin:20px 0 26px; font-size:16px; color:#46535c; max-width:430px; text-shadow:0 1px 8px rgba(255,255,255,.7); } .hero .searchbar{ max-width:520px; } .hero-bubble{ position:absolute; right:6%; top:42px; z-index:3; background:#fff; border:2.5px dashed var(--brand); border-radius:30px; padding:18px 26px; text-align:center; font-family:var(--font-display); font-weight:700; color:var(--brand-ink); line-height:1.6; box-shadow:var(--shadow-md); } .hero-bubble .big{ font-size:19px; } .hero-photo .ph-img{ position:absolute; inset:0; } /* placeholder image styling */ .ph{ --ph-fg:#9cc6dd; position:relative; background: repeating-linear-gradient(45deg,#e9f3f9 0 12px,#dceaf3 12px 24px); display:grid; place-items:center; overflow:hidden; color:#6f93a8; } .ph::after{ content:attr(data-label); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; letter-spacing:.04em; color:#6f93a8; opacity:.85; background:rgba(255,255,255,.7); padding:4px 10px; border-radius:6px; border:1px dashed #9cc6dd; } /* ---------- Category grid ---------- */ .cat-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:var(--gap); } .cat-item{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; } .cat-tile{ width:96px; height:96px; border-radius:var(--r-tile); display:grid; place-items:center; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; background:#fff; } .cat-item:hover .cat-tile{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .cat-tile img{ width:54px; height:54px; object-fit:contain; } .cat-label{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink-strong); } .cat-tile.t-gourmet{ background:#FDEFF5; } .cat-tile.t-cafe{ background:#FDF6E6; } .cat-tile.t-odekake{ background:#EEF8EF; } .cat-tile.t-kozure{ background:#FEF8E9; } .cat-tile.t-biyou{ background:#F4F1F8; } .cat-tile.t-kurashi{ background:#EDF4FC; } .cat-tile.t-izakaya{ background:#E8F6FC; } .cat-tile.t-event{ background:#FDEFF2; } .see-all-right{ display:flex; justify-content:flex-end; margin-top:26px; } /* ---------- Article cards ---------- */ .article-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap); } .card{ background:#fff; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column; } .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); } .card-media{ position:relative; aspect-ratio:4/3; } .card-media .ph{ position:absolute; inset:0; } .badge-new{ position:absolute; top:0; left:14px; z-index:2; background:var(--accent); color:#7a5b12; font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.08em; padding:5px 10px 6px; border-radius:0 0 10px 10px; box-shadow:0 3px 8px rgba(244,200,75,.4); } .card-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1; } .card-body .tag{ align-self:flex-start; } .card-title{ font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.6; color:var(--ink-strong); text-wrap:pretty; } .card-meta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--muted); padding-top:6px; } .card-meta .loc{ display:inline-flex; align-items:center; gap:4px; } .card-meta .loc svg{ width:14px; height:14px; stroke:var(--brand-deep); fill:none; stroke-width:1.8; } .center-cta{ display:flex; justify-content:center; margin-top:36px; } /* ---------- Three-up lower band (area / feature / info) ---------- */ .band{ background:var(--tint); } .band-grid{ display:grid; grid-template-columns:1.05fr 1.25fr 1fr; gap:var(--gap); align-items:stretch; } .panel{ background:#fff; border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-sm); } .panel h3{ font-size:19px; text-align:center; margin-bottom:18px; } /* area */ .area-panel .area-flex{ display:flex; flex-direction:column; align-items:center; gap:18px; } .area-illust{ position:relative; width:100%; max-width:340px; aspect-ratio:16/9; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); flex:0 0 auto; } .area-illust > *{ position:absolute; } .ai-sky{ inset:0; background:linear-gradient(180deg,#eaf7fd,#d3ecfa 55%); } .ai-sun{ width:46px; right:16%; top:14px; opacity:.95; filter:drop-shadow(0 0 14px rgba(255,224,150,.8)); } .ai-cloud{ width:64px; left:8%; top:16px; opacity:.85; } .ai-birds{ width:46px; left:38%; top:24px; opacity:.8; } .ai-sea{ left:0; right:0; bottom:0; top:56%; background:linear-gradient(180deg,#bfe6f0,#62b3d8); } .ai-cliff{ right:-4%; bottom:0; width:34%; height:54%; background:linear-gradient(190deg,#a9d6b3,#82bf94); border-radius:70% 0 0 0 / 100% 0 0 0; } .ai-lighthouse{ width:42px; right:10%; bottom:34%; z-index:2; filter:drop-shadow(0 4px 7px rgba(0,0,0,.15)); } .ai-ferry{ width:60px; left:12%; top:62%; opacity:.95; } .area-map{ width:208px; flex:0 0 auto; } .area-list{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; } .area-list a{ display:flex; align-items:center; justify-content:space-between; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:8px 14px; font-size:12.5px; font-weight:700; font-family:var(--font-display); color:var(--ink-strong); } .area-list a.wide{ grid-column:1 / -1; } .area-list a:hover{ border-color:var(--brand); background:var(--tint-2); } .area-panel .panel-cta{ display:flex; justify-content:center; margin-top:18px; } /* feature */ .feature-card{ position:relative; border-radius:var(--r-card); overflow:hidden; min-height:300px; display:flex; flex-direction:column; justify-content:flex-start; padding:26px; color:#fff; box-shadow:var(--shadow-sm); background: linear-gradient(180deg, rgba(30,64,40,.55) 0%, rgba(30,64,40,.1) 40%, rgba(30,64,40,.62) 100%), repeating-linear-gradient(45deg,#a9d8b6 0 14px,#9ccfac 14px 28px); } .feature-card h3{ color:#fff; text-align:left; font-size:24px; line-height:1.5; text-shadow:0 2px 10px rgba(0,0,0,.18); } .feature-card .fc-inner{ position:relative; z-index:2; display:flex; flex-direction:column; height:100%; } .feature-card .read-btn{ margin-top:auto; align-self:flex-start; } .feature-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; } .feature-thumbs .ph{ height:62px; border-radius:10px; border:2px solid rgba(255,255,255,.7); } /* info cards */ .info-stack{ display:flex; flex-direction:column; gap:var(--gap); } .info-card{ background:#fff; border-radius:var(--r-card); padding:22px 24px; box-shadow:var(--shadow-sm); border:1.5px solid var(--line); } .info-card.tinted{ background:var(--tint-2); } .info-card h4{ font-size:16px; color:var(--brand-ink); margin-bottom:10px; display:flex; align-items:center; gap:8px; } .info-card p{ margin:0 0 16px; font-size:13.5px; line-height:1.85; } .info-card .ic-emoji{ width:26px; height:26px; } /* ---------- Footer ---------- */ .site-footer{ background:#fff; border-top:3px solid var(--tint); padding:48px 0 28px; } .footer-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; } .footer-nav{ display:flex; gap:48px; flex-wrap:wrap; } .footer-col h5{ font-family:var(--font-display); font-size:13px; color:var(--brand-ink); margin:0 0 12px; letter-spacing:.04em; } .footer-col a{ display:block; color:var(--ink); font-size:13px; padding:5px 0; } .footer-col a:hover{ color:var(--brand-deep); } .footer-bottom{ text-align:center; margin-top:36px; color:var(--muted); font-size:12px; } /* ---------- Decorations ---------- */ .deco{ position:absolute; pointer-events:none; opacity:.9; z-index:2; } /* ---------- Filters / toolbar (shop search) ---------- */ .filter-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:8px; } .chip{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:9px 16px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink-strong); transition:all .15s; } .chip .dot{ width:11px; height:11px; border-radius:50%; } .chip:hover{ border-color:var(--brand); background:var(--tint-2); } .chip.is-active{ background:var(--brand-deep); color:#fff; border-color:var(--brand-deep); } .chip.is-active .dot{ background:#fff !important; } .toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 26px; flex-wrap:wrap; } .toolbar .count{ font-family:var(--font-display); font-weight:700; color:var(--ink-strong); font-size:15px; white-space:nowrap; } .toolbar .count b{ color:var(--brand-deep); font-size:20px; margin:0 3px; } .toolbar .sort{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); } .toolbar select{ font-family:var(--font-body); font-weight:700; color:var(--ink-strong); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:9px 16px; background:#fff; font-size:13px; } .pager{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:44px; } .pager a{ min-width:42px; height:42px; padding:0 12px; display:grid; place-items:center; border-radius:12px; background:#fff; border:1.5px solid var(--line); font-family:var(--font-display); font-weight:700; color:var(--ink-strong); font-size:14px; } .pager a:hover{ border-color:var(--brand); } .pager a.is-active{ background:var(--brand-deep); color:#fff; border-color:var(--brand-deep); } /* ---------- Article detail ---------- */ .article-wrap{ max-width:760px; margin:0 auto; } .article-head{ text-align:center; padding:8px 0 30px; } .article-head .tag{ margin-bottom:18px; } .article-head h1{ font-size:34px; line-height:1.55; letter-spacing:.02em; text-wrap:pretty; } .article-head .a-meta{ display:flex; justify-content:center; gap:22px; margin-top:18px; color:var(--muted); font-size:13.5px; } .article-head .a-meta span{ display:inline-flex; align-items:center; gap:5px; } .article-head .a-meta svg{ width:15px; height:15px; stroke:var(--brand-deep); fill:none; stroke-width:1.8; } .article-hero{ height:420px; border-radius:var(--r-card); margin:0 auto 44px; max-width:1000px; } .article-body{ font-size:16.5px; line-height:2.1; color:var(--ink); } .article-body > p{ margin:0 0 26px; } .article-body .lead{ font-size:18px; font-weight:700; color:var(--ink-strong); line-height:2; } .article-body h2{ font-size:23px; margin:48px 0 20px; padding-left:16px; border-left:6px solid var(--brand); line-height:1.6; } .article-body .inline-img{ height:300px; border-radius:16px; margin:8px 0 30px; } .article-body .pullquote{ background:var(--tint); border-radius:var(--r-card); padding:28px 32px; margin:34px 0; font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.9; color:var(--brand-ink); position:relative; } .shop-info{ background:#fff; border:2px solid var(--line); border-radius:var(--r-card); padding:28px 30px; margin:40px 0; } .shop-info h3{ font-size:18px; color:var(--brand-ink); margin-bottom:18px; display:flex; align-items:center; gap:8px; } .shop-info dl{ display:grid; grid-template-columns:120px 1fr; gap:12px 18px; margin:0; font-size:14.5px; } .shop-info dt{ font-family:var(--font-display); font-weight:700; color:var(--ink-strong); } .shop-info dd{ margin:0; color:var(--ink); } .shop-info .map-embed{ height:220px; border-radius:14px; margin-top:22px; } .related{ background:var(--tint); } .related .article-grid{ grid-template-columns:repeat(3,1fr); } /* ---------- Page intro (lower pages) ---------- */ .page-hero{ background:var(--tint); padding:46px 0 40px; position:relative; overflow:hidden; } .page-hero h1{ font-size:34px; letter-spacing:.04em; } .page-hero .crumb{ font-size:13px; color:var(--muted); margin-bottom:10px; } .page-hero .crumb a{ color:var(--brand-deep); } .page-hero .lead{ margin-top:10px; color:var(--ink); max-width:600px; } .page-hero .deco-cloud{ position:absolute; right:4%; top:30px; width:120px; opacity:.7; } .page-hero .deco-lh{ position:absolute; right:16%; bottom:-6px; width:46px; opacity:.6; } /* ---------- Responsive ---------- */ @media (max-width:1080px){ .article-grid{ grid-template-columns:repeat(3,1fr); } .cat-grid{ grid-template-columns:repeat(4,1fr); } .band-grid{ grid-template-columns:1fr; } } @media (max-width:760px){ .main-nav{ display:none; } .article-grid{ grid-template-columns:repeat(2,1fr); } .cat-grid{ grid-template-columns:repeat(3,1fr); } .hero-bubble{ display:none; } .hero h1{ font-size:30px; } .related .article-grid{ grid-template-columns:repeat(2,1fr); } .article-hero{ height:240px; } .shop-info dl{ grid-template-columns:90px 1fr; } } /* ========================================================= Hitachi seaside illustration (moved from index.html