@charset "utf-8"; /* ================================================================ signal-Z MEMORIES 県別ページ専用CSS 読み込み順：style.css → memories-pref.css ※ style.css 内で parts.css は @import 済み対象： ================================================================ */ /* ========================================= 0. 地方別アクセントカラー ========================================= */ body.memories-pref-body { --pref-accent-color: #c00; } body.area-hokkaido { --pref-accent-color: #6f86d6; } body.area-tohoku { --pref-accent-color: #00a6d6; } body.area-kanto { --pref-accent-color: #34a853; } body.area-tokai { --pref-accent-color: #e0c000; } body.area-hokuriku { --pref-accent-color: #009688; } body.area-koshinetsu { --pref-accent-color: #c6a700; } body.area-kansai { --pref-accent-color: #f08a24; } body.area-chugoku { --pref-accent-color: #e57373; } body.area-shikoku { --pref-accent-color: #9c6ade; } body.area-kyushu { --pref-accent-color: #e65aa5; } body.area-okinawa { --pref-accent-color: #00bcd4; } /* ========================================= 1. 県別ページ基本レイアウト ========================================= */ body.memories-pref-body #contents { padding: 0; padding-top: 0; } body.memories-pref-body section { margin: 0; padding: 0; } body.memories-pref-body main.memory-pref-page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem 4rem; background: #eee; box-sizing: border-box; } body.memories-pref-body main.memory-pref-page p { padding-inline: 0; } /* ========================================= 2. 県別ヘッダー ========================================= */ body.memories-pref-body .pref-hero { display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; gap: 2rem; align-items: start; max-width: 1080px; margin: 0 auto 2rem; padding: 0; } body.memories-pref-body .pref-hero-photo { margin: 0; text-align: center; } body.memories-pref-body .pref-hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #ccc; background: #fff; } body.memories-pref-body .pref-hero-photo figcaption { margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.5; color: #333; } body.memories-pref-body .pref-hero-text { text-align: center; } body.memories-pref-body .pref-hero-text h1 { margin: 0 0 1.4rem; font-size: 2rem; line-height: 1.4; font-weight: 500; letter-spacing: 0.08em; } body.memories-pref-body .pref-hero-text p { max-width: 32em; margin: 0 auto; text-align: left; font-size: 0.95rem; line-height: 1.9; } /* ========================================= 3. 共通サブタイトル ========================================= */ body.memories-pref-body .pref-subtitle { position: relative; max-width: 1080px; margin: 0 auto 1.1rem; padding: 0 0 0.45rem; border-bottom: 1px dotted color-mix(in srgb, var(--pref-accent-color) 45%, #999); font-size: 1.45rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.05em; } body.memories-pref-body .pref-subtitle::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 140px; height: 3px; background: var(--pref-accent-color); } /* ========================================= 4. 信号ネタメモ ========================================= */ body.memories-pref-body .pref-feature-list { max-width: 1080px; margin: 0 auto 2.5rem; padding: 1.2rem 0 0; border-top: 4px solid var(--pref-accent-color); } body.memories-pref-body .pref-feature-list dl { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr; gap: 0.9rem 0.55rem; align-items: center; margin: 0; } body.memories-pref-body .pref-feature-list dt { margin: 0; padding: 0.25rem 0.55rem; background: var(--pref-accent-color); color: #fff; font-weight: 700; line-height: 1.5; white-space: nowrap; } body.memories-pref-body .pref-feature-list dd { margin: 0; padding-right: 0.8rem; font-size: 0.9rem; line-height: 1.6; } /* ========================================= 5. 市町村別図鑑 ========================================= */ body.memories-pref-body .pref-city-list { max-width: 1080px; margin: 0 auto; padding: 0; } body.memories-pref-body .city-section { margin: 2.2rem 0 3rem; padding: 0; } body.memories-pref-body .city-section h3 { margin: 0 0 1.2rem; padding: 0 0 0.35rem; border-bottom: 1px dotted color-mix(in srgb, var(--pref-accent-color) 45%, #999); font-size: 1.55rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.08em; } body.memories-pref-body .memories-city-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; } /* ========================================= 6. 市町村サムネイルカード ========================================= */ body.memories-pref-body .city-signal-card { --maker-color: #ddd; --maker-bg: #f6f6f6; display: flex; flex-direction: column; flex: 0 0 240px; width: 240px; height: 275px; min-height: 275px; box-sizing: border-box; overflow: hidden; background: var(--maker-bg); border: 3px solid var(--maker-color); color: #111; text-decoration: none; transition: transform 0.16s ease, box-shadow 0.16s ease; } body.memories-pref-body .city-signal-card:hover { transform: translateY(-3px); box-shadow: 0 5px 14px rgba(0,0,0,0.18); } body.memories-pref-body .city-signal-card h4 { margin: 0; padding: 0.28rem 0.4rem; background: var(--maker-color); font-size: 0.95rem; line-height: 1.35; font-weight: 700; } body.memories-pref-body .city-signal-card figure { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0.45rem; background: transparent; box-sizing: border-box; } body.memories-pref-body .city-signal-card img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } body.memories-pref-body .city-signal-info { padding: 0.45rem; background: transparent; font-size: 0.9rem; line-height: 1.65; } body.memories-pref-body .city-signal-info p { margin: 0 0 0.1rem; } body.memories-pref-body .city-signal-info .model { font-family: Consolas, "Courier New", monospace; letter-spacing: 0.08em; } /* 横型：350×160 */ body.memories-pref-body .city-signal-card.type-horizontal figure { height: 118px; } body.memories-pref-body .city-signal-card.type-horizontal img { aspect-ratio: 350 / 160; } /* 矢印：350×350 */ body.memories-pref-body .city-signal-card.type-arrow figure { height: 170px; } body.memories-pref-body .city-signal-card.type-arrow img { aspect-ratio: 1 / 1; } /* 縦型・歩行者：画像左、文字右 */ body.memories-pref-body .city-signal-card.type-vertical .city-signal-layout, body.memories-pref-body .city-signal-card.type-pedestrian .city-signal-layout { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 0.6rem; height: calc(100% - 1.9rem); padding: 0.45rem; background: var(--maker-bg); box-sizing: border-box; } body.memories-pref-body .city-signal-card.type-vertical figure, body.memories-pref-body .city-signal-card.type-pedestrian figure { width: 95px; height: 190px; align-items: flex-start; justify-content: center; padding: 0; } body.memories-pref-body .city-signal-card.type-vertical img, body.memories-pref-body .city-signal-card.type-pedestrian img { width: 95px; height: 190px; object-fit: contain; } body.memories-pref-body .city-signal-card.type-vertical img { aspect-ratio: 215 / 450; } body.memories-pref-body .city-signal-card.type-vertical .city-signal-info, body.memories-pref-body .city-signal-card.type-pedestrian .city-signal-info { padding: 0; } /* 珍しい信号・過去ネタ用カード */ body.memories-pref-body .city-signal-card.type-rare figure { height: 170px; } body.memories-pref-body .city-signal-card.type-rare img { aspect-ratio: 1 / 1; } /* ========================================= 7. メーカー色 ========================================= */ body.memories-pref-body .maker-koito { --maker-color: aqua; --maker-bg: #e9ffff; } body.memories-pref-body .maker-nissin { --maker-color: lime; --maker-bg: #ecffec; } body.memories-pref-body .maker-kyosan { --maker-color: yellow; --maker-bg: #fffde8; } body.memories-pref-body .maker-denzai { --maker-color: orange; --maker-bg: #fff3df; } body.memories-pref-body .maker-matsushita { --maker-color: hotpink; --maker-bg: #ffe8f3; } body.memories-pref-body .maker-sankyo { --maker-color: salmon; --maker-bg: #fff0ed; } body.memories-pref-body .maker-seiwa { --maker-color: mediumorchid; --maker-bg: #f7eafa; } body.memories-pref-body .maker-omron { --maker-color: #66CCFF; --maker-bg: #ddf4ff; } body.memories-pref-body .maker-smdn { --maker-color: #8080ff; --maker-bg: #ededff; } /* レア物カード色 */ body.memories-pref-body .maker-rare { --maker-color: #333; --maker-bg: #eeeeee; } /* レア物カードの帯文字 */ body.memories-pref-body .city-signal-card.maker-rare h4, body.memories-pref-body .city-signal-card.type-rare h4 { color: #fff; } body.memories-pref-body .city-signal-card.type-rare { border-color: #333; } body.memories-pref-body .city-signal-card.type-rare .city-signal-info { color: #111; } /* ========================================= 8. レスポンシブ ========================================= */ @media (max-width: 1000px) { body.memories-pref-body .pref-hero { grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 1.5rem; } body.memories-pref-body .pref-feature-list dl { grid-template-columns: auto 1fr auto 1fr; } } @media (max-width: 850px) { body.memories-pref-body main.memory-pref-page { padding: 1.2rem 1rem 3rem; } body.memories-pref-body .pref-hero { grid-template-columns: 1fr; max-width: 560px; } body.memories-pref-body .pref-hero-text { order: -1; } body.memories-pref-body .pref-hero-text h1 { margin-bottom: 1rem; } } @media (max-width: 600px) { body.memories-pref-body main.memory-pref-page { padding: 1rem 0.8rem 3rem; } body.memories-pref-body .pref-hero-text h1 { font-size: 1.6rem; } body.memories-pref-body .pref-subtitle { font-size: 1.25rem; } body.memories-pref-body .pref-feature-list dl { grid-template-columns: auto 1fr; gap: 0.65rem 0.45rem; } body.memories-pref-body .pref-feature-list dd { padding-right: 0; } body.memories-pref-body .city-section h3 { font-size: 1.3rem; } body.memories-pref-body .memories-city-grid { gap: 1rem; } body.memories-pref-body .city-signal-card, body.memories-pref-body .city-signal-card.type-vertical, body.memories-pref-body .city-signal-card.type-pedestrian { flex: 0 0 240px; width: 240px; height: 275px; min-height: 275px; } }