/* ========================================================================== JOMON HOMON ページ v71.4 (セッション16) Hero(#a67676) → リード(章本文と同組) → エリアナビ(章ナビ型) → 施設リスト 幅は「はじまり」目次と同じ W1024 / calc(100%-136px) ========================================================================== */ /* ---------- Hero = 正方形 (CDモック hajimari_hero_JH-pc2.png 1440×1440 準拠) v72.9 地色 #c7a076。JOMON/HOMON = Goudy 160px/行送り160、サブ = 筑紫 48px、リード = 筑紫 24px 縦組み(行送り1.75) 実測: タイトル箱 top187 / サブ箱 top641 / リード top841・右端1109・左端329 / 段落間=空き1行 */ .homon-hero { --homon-hero-bg: #c7a076; position: relative; width: 100%; height: min(100vw, 1440px); margin-top: 24px; /* 章ページの chapter-hero と同じ (白地130px) */ background-color: var(--homon-hero-bg); display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; /* v73.4: 紋様のはみ出しを切る */ } /* v73.4: 紋様 doban.svg (#d7bc6c)。幅120%、PC=天地左右センター、SP=上寄せ・左右センター */ .homon-hero__pattern { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120%; max-width: none; height: auto; pointer-events: none; user-select: none; } .homon-hero__title, .homon-hero__sub, .homon-hero__copy { position: relative; z-index: 1; } .homon-hero__title { font-family: var(--font-goudy); font-size: min(11.11vw, 160px); line-height: 1; letter-spacing: var(--ls-display); color: var(--color-wine-typo); margin: min(12.99vw, 187px) 0 0; } .homon-hero__sub { font-family: var(--font-tsuku-old); font-size: min(3.33vw, 48px); line-height: 1; color: var(--color-wine-typo); margin: min(9.31vw, 134px) 0 0; } .homon-hero__copy { margin: min(10vw, 144px) 0 0; writing-mode: vertical-rl; text-orientation: upright; /* v73.0: Home/Manifest の縦組みと同じ (mixed → upright) */ height: min(33.33vw, 480px); /* v73.9: 最長列 18字 に 2字分の余裕 (TABで「る。」が折れた) */ font-family: var(--font-tsuku-old); font-size: min(1.67vw, 24px); line-height: 1.75; /* 列ピッチ 42px */ text-align: start; color: var(--color-wine-typo); font-feature-settings: "vpal" 1, "vert" 1; /* v74.2: vpal に戻す (iPad Safari では効かないが、手動詰めは PC を崩したため TAB は諦める) */ line-break: strict; } .homon-hero__copy p { margin: 0; white-space: nowrap; } .homon-hero__copy p + p { margin-right: 1.75em; } /* 段落間 = 空き1行 (縦組みでは右→左なので margin-right) */ /* ---------- エリアナビ（章ナビ＝しおり型） v71.5: ページ内の静的版は廃止。固定版のみ: Hero が画面上端を越えたら上部に降りてくる (地色=Hero) */ .homon-nav { font-family: var(--font-tsuku-old); color: var(--color-wine-typo); } .homon-nav__inner { position: relative; width: calc(100% - 136px); max-width: 1024px; margin: 0 auto; display: flex; align-items: center; gap: 28px; min-height: 66px; padding: 0 10px; } .homon-nav--fixed { position: fixed; top: 0; left: 0; right: 0; height: 66px; background: #c7a076; /* v73.1: Hero と同色 */ z-index: calc(var(--z-overlay) - 1); /* JOMONÖW/エンブレムを上に通す */ transform: translateY(-100%); transition: transform .4s var(--ease-out); } .homon-nav--fixed.is-visible { transform: translateY(0); } .homon-nav--fixed .homon-nav__inner { width: 100%; max-width: none; padding: 0 min(9.0625vw, 130.5px); } .homon-nav--fixed .homon-nav__toggle { color: var(--color-wine-typo); } /* v73.1: 地が明るくなったので Hero と同じワイン */ .homon-nav__toggle { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 12px; } .homon-nav__tri { width: 12.18px; height: 13.5px; flex: none; transition: transform .25s var(--ease-out); } .homon-nav__toggle:hover .homon-nav__tri { transform: translateX(3px); } .homon-nav.is-open .homon-nav__tri, .homon-nav.is-open .homon-nav__toggle:hover .homon-nav__tri { transform: rotate(90deg); } .homon-nav__label { font-size: 21px; line-height: 1; } /* v73.3: パネルは章のしおりナビと同セオリー (chapter.css v50.8): 左端〜エンブレム・センター(50vw)・影ナシ・文字頭=ラベル頭(▷12.18+gap12)・非アクティブ=白 / 現在地・hover=ワイン */ .homon-nav__list { position: absolute; top: 100%; left: 0; z-index: 6; list-style: none; margin: 0; padding: 18px 0 26px; width: 50vw; min-width: 340px; background: #c7a076; max-height: 70vh; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s; pointer-events: none; } .homon-nav.is-open .homon-nav__list { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .homon-nav--fixed .homon-nav__list { left: 0; } .homon-nav__opt { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; padding: 7px 40px 7px calc(min(9.0625vw, 130.5px) + 24.18px); /* ラベル左 + ▷12.18 + gap12 */ font-family: var(--font-tsuku-old); font-size: 15px; line-height: 1.5; letter-spacing: .02em; color: #f7f6f6; transition: color .15s; } .homon-nav__opt:hover, .homon-nav__opt.is-current { color: var(--color-wine-typo); } .homon-nav__cnt { font-family: var(--font-goudy); font-size: 15px; letter-spacing: var(--ls-display); } .homon-nav--fixed .homon-nav__inner { padding: 0 min(9.0625vw, 130.5px); } /* ラベル左 = しおりナビ左 (PC130.5/TAB48/SP12) */ /* ---------- 都道府県 = 章のように区切る */ .homon__pref { width: calc(100% - 136px); max-width: 1024px; margin: 0 auto; padding: 44px 0 24px; scroll-margin-top: 80px; } .homon__pref-name { font-family: var(--font-tsuku-old); font-size: 30px; line-height: 1; color: var(--color-wine-typo); margin: 0 10px 20px; } /* v74.6: ワインに戻す (v74.4 撤回) */ /* v74.9: 末尾の注意書き */ .homon__caution { width: calc(100% - 136px); max-width: 1024px; margin: 0 auto; padding: 40px 10px 88px; color: var(--color-wine-typo); } .homon__caution-head { font-family: var(--font-goudy); font-size: 20px; line-height: 1; letter-spacing: var(--ls-display); margin: 0 0 16px; } .homon__caution-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-tsuku-old); font-size: 15px; line-height: 1.9; } .homon__caution-list li { padding-left: 1.1em; text-indent: -1.1em; } .homon__caution-list li::before { content: "＊"; } /* v74.7: ページ内の 3px 罫はすべて Hero の地色 (県名下・末尾とも) */ .homon .detail-divider--thick { background-color: #c7a076; } .homon__pref > .detail-divider { margin-bottom: 8px; } .homon__pref:first-of-type { padding-top: 96px; } /* v72.9: Hero直下 (上の太罫は廃止) */ .homon__pref[hidden], .homon__entry[hidden] { display: none; } /* ---------- 施設エントリー */ .homon__entry { padding: 28px 10px 20px; } .homon__entry + .homon__entry { border-top: 1px solid var(--color-wine-typo); } /* v73.0: 施設間 1px (淡色をやめ実線)。都道府県の下は 3px */ .homon__place { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-family: var(--font-tsuku-old); font-size: 21px; line-height: 1; color: var(--color-wine-typo); margin: 0 0 12px; } /* v72.1: ノンブル (表示順 001〜、絞り込みで振り直し)。目次の日付位置 (右端・Goudy) に倣う */ .homon__num { font-family: var(--font-goudy); font-size: 24px; line-height: 1; letter-spacing: var(--ls-display); } .homon__name { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-tsuku-old); font-size: 36px; line-height: 1.3; color: var(--color-wine-typo); margin: 0; } .homon__pin { display: inline-block; width: 24px; height: 24px; flex: none; color: #c7a076; /* v74.6 */ transition: transform .35s var(--ease-out); } .homon__pin svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } .homon__pin:hover { transform: translateY(-3px); } .homon__comment { font-family: var(--font-tsuku-old); font-size: 21px; line-height: var(--lh-body); color: var(--color-wine-typo); margin: 14px 0 0; font-feature-settings: "palt"; } /* ---------- 写偶: 画像クリック=ライトボックス、章題クリック=note */ .homon__figs-label { font-family: var(--font-tsuku-old); font-size: 15px; line-height: 1; color: var(--color-wine-typo); margin: 24px 0 12px; } .homon__figs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 40px; } .homon__fig { display: flex; align-items: flex-end; gap: 14px; color: var(--color-wine-typo); } .homon__fig-btn { background: none; border: 0; padding: 0; cursor: zoom-in; display: block; } .homon__fig-img { height: 100px; width: auto; display: block; transform-origin: center bottom; transition: transform .45s var(--ease-out); } .homon__fig-btn:hover .homon__fig-img { transform: scale(1.08); } /* v71.6: 浮きではなく少し拡大 (CD指示) */ .homon__fig-cap { display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; font-family: var(--font-tsuku-old); } .homon__fig-name { font-size: 15px; line-height: 1.5; } /* v74.9: 複製で対面したもの (無表記=その施設の所蔵品を視た) */ .homon__fig-state { margin-left: 8px; font-size: 12px; color: #c7a076; } .homon__fig-ch { font-size: 14px; line-height: 1.5; text-decoration: none; color: #c7a076; display: inline-flex; align-items: center; gap: 4px; } /* v76.2: ↗ と同じベージュ */ .homon__fig-num, .homon__fig-pre { font-family: var(--font-goudy); letter-spacing: var(--ls-display); } .homon__fig-num { font-size: 16px; } /* v71.6: CD支給 note-ext-wine.svg (□+↗ 19.5px)。目次と同じく hover で ↗ だけ1回飛ぶ */ .homon__ext { position: relative; width: 12px; height: 12px; flex: none; margin-left: 4px; /* v71.7: 19.5→12 (文字14pxに合わせる) */ display: inline-block; color: #c7a076; } /* v74.6 */ .homon__ext-box, .homon__ext-arrow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .homon__ext-box path, .homon__ext-arrow polyline, .homon__ext-arrow line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-miterlimit: 10; vector-effect: non-scaling-stroke; } /* 縮小しても線幅は1.5px→約0.9px相当にならず一定 */ @keyframes homon-ext-fly { 0%{transform:translate(0,0)} 45%{transform:translate(2px,-2px)} 100%{transform:translate(0,0)} } .homon__fig-ch:hover .homon__ext-arrow { animation: homon-ext-fly .55s var(--ease-out) 1; } /* 写偶ライトボックス: lightbox.css (About/Contact) の枠と×を流用。地は透けない。画像は画面の80% */ .homon-lb .lightbox__overlay { background-color: var(--color-bg-light, #f7f6f6); } .homon-lb__card { position: relative; z-index: 1; transform: scale(.95); transition: transform .3s var(--ease-out); } .homon-lb.is-open .homon-lb__card { transform: scale(1); } .homon-lb__img { max-width: 80vw; max-height: 80vh; width: auto; height: auto; display: block; } .homon-lb .lightbox__close { top: auto; bottom: 100%; right: 0; margin-bottom: 8px; background-color: transparent; color: var(--color-wine-typo); border: 1px solid var(--color-wine-typo); } /* v81.1: 右アンカー = 八地方＋海外の漢数字（一〜九）。目次の .toc-anchor を流用。 漢数字は筑紫（tsuku-bold は親に font-family 明示が必要なので直接指定）。 施設のない地方は淡く残す（押せない）。PC はホバーで地方名を左に添える */ .homon-anchor { z-index: calc(var(--z-overlay) - 2); } .homon-anchor .toc-anchor__list { gap: 0.9em; } .homon-anchor__item { position: relative; font-family: var(--font-tsuku-old); font-weight: normal; font-size: 16px; /* v81.4: 18→16（CD指示：目立ちすぎ） */ -webkit-text-stroke-width: calc(1em * 0.02083); /* tsuku-bold と同じ理屈 */ -webkit-text-stroke-color: currentColor; paint-order: stroke fill; letter-spacing: 0; font-feature-settings: "palt" 1; /* v81.2: 〈八〉の括弧を詰める */ white-space: nowrap; } .homon-anchor__item.is-empty { opacity: 0.3; cursor: default; } .homon-anchor__item[data-label]::after { content: attr(data-label); position: absolute; right: 100%; top: 50%; margin-right: 0.7em; transform: translateY(-50%); font-size: 0.62em; /* ホバー時は scale(1.5) が掛かるので実寸は約 17px */ white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } @media (hover: hover) { a.homon-anchor__item:hover::after { opacity: 1; } /* v81.3: 施設のない地方（四国）もホバーで地方名を出す。本体と同じく淡いまま（CD指示）。 拡大しないので、文字サイズは拡大後の他の地方名と同じ実寸に合わせる */ .homon-anchor__item.is-empty:hover::after { opacity: 1; font-size: 0.93em; } } .homon-nav__opt.is-empty { opacity: 0.35; cursor: default; } @media (max-width: 1024px) { .homon-anchor__item { font-size: 14px; } } @media (max-width: 481px) { .homon-anchor__item { font-size: 12px; } .homon-anchor .toc-anchor__list { gap: 1.1em; } } /* v72.1: パンくず SP — 右端揃えで折り返す (JOMON HOMON が右端、Home… は成り行き)。ホバーは右へ */ body:has(.homon) .detail-breadcrumb__list a:hover { transform: translateX(4px); } /* v72.2: SP は1行・右端揃え。左にはみ出す Home/Design… は横スクロール(指でスライド)で読める。 初期位置は homon.js が右端へ寄せる */ @media (max-width: 481px) { body:has(.homon) .detail-breadcrumb__list { flex-wrap: nowrap; white-space: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body:has(.homon) .detail-breadcrumb__list::-webkit-scrollbar { display: none; } body:has(.homon) .detail-breadcrumb__list li { white-space: nowrap; flex: none; } body:has(.homon) .detail-breadcrumb__list wbr { display: none; } body:has(.homon) .detail-breadcrumb__list li:first-child { margin-left: auto; } } /* body の overflow-x:hidden (reset.css) が sticky/fixed の基準を狂わせるので、このページだけ clip に */ body:has(.homon) { overflow-x: clip; } /* ---------- レスポンシブ */ @media (max-width: 1024px) { .homon__pref, .homon__caution { width: calc(100% - 96px); max-width: 900px; } /* TAB: 目次と同じ */ .homon__name { font-size: 32px; } } @media (max-width: 481px) { /* SP (モック jh_hero-sp_260915.png 390×1124): 横組み・左揃え・改行維持。地色をリードの下まで */ .homon-hero { height: auto; padding: 0 0 40px; } .homon-hero__pattern { top: 0; transform: translate(-50%, 0); } /* SP: 上寄せ */ .homon-hero__title { font-size: 60px; margin-top: 108px; } .homon-hero__sub { font-size: 32px; margin-top: 110px; } /* v73.5: 25→32 (CD指示) */ .homon-hero__copy { writing-mode: horizontal-tb; height: auto; align-self: flex-start; width: calc(100% - 49px); max-width: none; margin: 112px 0 0 49px; /* v73.7: 文字頭=県名・施設名の頭 (312中央=39 + 内10) */ font-size: 18px; line-height: 2; text-align: left; /* v73.6: 17→18 (CD指示) */ text-orientation: mixed; font-feature-settings: "palt" 1; } .homon-hero__copy p + p { margin: 32px 0 0; } /* 段落間 = 空き1行 */ .homon-nav__inner { gap: 12px 16px; min-height: 66px; } .homon-nav--fixed { height: 66px; } /* v72.8: 章のしおりナビと同じ天地66 (帯の下端=ロゴ中央)。56→66 */ /* v72.8: 左右は章のしおりナビと同じ 12px インセット (v72.7 の 312px 中央寄せは取り消し) */ .homon-nav--fixed .homon-nav__inner { width: 100%; padding: 0 12px; margin: 0; gap: 10px; } .homon-nav__label { white-space: nowrap; } .homon-nav__cnt { font-size: 14px; } .homon-nav__tri { width: 9.74px; height: 10.8px; } .homon-nav__label { font-size: 17px; } .homon-nav__list { width: 100vw; min-width: 0; } /* v80.9: 章のしおりナビと同じく左右いっぱい (CD指示) */ .homon-nav__opt { padding-left: calc(12px + 18.74px); } /* SP: ラベル左12 + ▷9.74 + gap9 */ .homon__pref, .homon__caution { width: 312px; max-width: none; } .homon__caution { padding: 32px 0 64px; } .homon__caution-list { font-size: 14px; } /* v72.2: 「はじまり」目次と同じ SP 幅 (右アンカー被り回避) */ .homon__pref-name { font-size: 24px; } .homon__place { font-size: 16px; } .homon__num { font-size: 18px; } .homon__name { font-size: 26px; gap: 10px; } .homon__pin { width: 20px; height: 20px; } .homon__comment { font-size: 17px; } .homon__fig-img { height: 88px; } .homon__figs { gap: 16px 24px; } .homon__fig { flex-wrap: wrap; } } /* ---------- v72.3: Hero のフォント読込Reveal (章ページ chapter-hero と同方式) 既定で隠し、Typekit の wf-active でスライドイン。wf-inactive(3s超過/失敗)は素のまま表示。 JS無効時は