/* Theme Name: 北海道体育文化協会 / Hokkaido Physical Education & Culture Association Theme URI: https://hokkaido-taiiku-bunka.jp/ Author: 一般社団法人 北海道アーバンスポーツ協会 Author URI: https://hokkaido-urbansports.jp/ Description: 一般財団法人 北海道体育文化協会の公式サイト用カスタムテーマ。v12採用版モックアップをベースにWordPress化。4階層の情報設計（重要告知・最新ニュース・セクション内お知らせ・アーカイブ）を実装。フェーズ3 v10 でお知らせアーカイブテンプレート(archive.php)とカテゴリ/検索フィルタ機能を追加。フェーズ3 v11 で情報公開アーカイブ(archive-info_public.php)とACFフィールド(pdf_file/nendo/nendo_sort/info_name_en)を追加。フェーズ3 v12 で施設アーカイブ(archive-facility.php)と施設シングル(single-facility.php、external_url 301リダイレクト方式)を追加。フェーズ3 v13 で防災ページ用ネットワーク図(.network-diagram)と2枚並び画像(.image-row)のスタイルを追加。v13.1 で .network-diagram の余白圧縮、.network-title への rich-content h3 装飾(緑縦線・左パディング)リセット、リストマーカー打ち消しを追加。v13.2 で .numbered-cards を 2列レイアウト化(minmax 220→280)・パディング圧縮で間延び解消、.rich-content table.timeline で日付列nowrapを追加。v13.3 で table:has(thead) フォールバックを追加し、about.html未差替えでも沿革テーブル日付列のnowrapが効くように。フェーズ3 v14 でサイト内検索モーダル(.search-modal)と検索結果ページ(.search-results)のスタイルを追加、モバイル時のサイト内検索フォーム(.mobile-search)も追加。検索対象を全コンテンツ横断(post / page / facility / info_public)に拡張。フェーズ3 v15 でスクロール演出パッケージ(フェードイン .fade-in / パララックス .parallax-img / ヘッダー縮小 .scrolled)を追加。prefers-reduced-motion に完全対応。フェーズ3 v16 でFAQページの ACF 化に伴い、page-faq.php / template-parts/faq-list.php / FAQページ用スタイル(.faq-page / .faq-toc / .faq-section / .faq-item)を追加。フェーズ3 v17 でFAQをCPT化(faq CPT + faq_category タクソノミ)、archive-faq.php / template-parts/faq-list.php(CPT版)に置換。検索対象に faq を追加(全5種横断)。フェーズ3 v20 でFAQページ全体の余白を詰めた(faq-page padding 64→48 / faq-page-head margin 48→32 / faq-toc margin 48→24・padding 24→16 / faq-section margin 64→32 / faq-section-head margin 24→16)。フェーズ3 v21 でFAQ さらに詰める(faq-item padding 24→16 / faq-q margin 12→8 / faq-section margin 32→24 / faq-section-head margin 16→12・padding 12→8)。これで Q&A同士・セクション同士の余白がほぼ最小限に。フェーズ3 v23 でグローバル section padding-block の上限を 140px→100px に縮小(全ページの上下余白が約3割圧縮)。加えて FAQ リストの `
` を `
` 化し、グローバル section 指定の対象外に(FAQ余白の根本解決、応急処置の打ち消しリスト不要に)。フェーズ3 v24 でフローティングクイックナビ(.fqn)を追加。グローバルナビ7項目を5項目にスリム化(協会について/施設紹介/お知らせ/防災への取り組み/情報公開)+ FAQとアクセスを右下フローティングへ移行。意匠は kaminishi 風の右下ノッチ(--notch-fqn:14px、モバイル12px)、緑塗り+白字、ホバーで --green-deep。枠線は外側ボックス+1pxインセット ::before の二重レイヤーで擬似表現(clip-pathが素のborderを綺麗に切れないため)。フッター手前で自動フェードアウト(JS連動、.fqn.hide-near-footer)。派生サイトでは :root の --green / --green-deep 上書きだけで色追従。フェーズ3 v27 で /access/ ページの「各施設のアクセス」セクションを facility-card-compact.php で動的化(写真自動取得・リンク化)、.facility-row-link のスタイルを追加。アリーナ派生 v28 でTOPの§12 COMFORT RULES (快適な利用のために)を追加(.rules / .rules-head / .rules-list / .rules-item / .rules-foot 一式)。土足禁止・スパイク禁止・スケート時手袋必須など利用ルール5項目を常設で目立たせるシンプルリスト。担当者要望書C2「注意事項の掲載強化」対応。アリーナ派生 v29 でTOPの§13 ABOUT (施設について)をアリーナ仕様に差し替え。協会版の理念ブロックを撤去しv6モック準拠の薄い版(沿革1段落+4スタッツ)に置換。.about-*系を整理(.about-head 新規 / .num-jp / .label-jp 追加 / .about-divider・.about-more 撤去 / .about-stats を border-block化)。フルスペックは下層 /about/ ページに分離する方針。アリーナ派生 v30 でTOPの§9 NEWS&TOPICS カードのタイトル文字数制御を追加(.news-titleにline-clamp:3 + word-break:break-word)。長いタイトルや英数字の連続文字列もカード内に収まるよう抑制。flex-grow構造を保つため.news-readをmargin-top:auto化。併せてfront-page.phpから協会版残置4セクション(PRINCIPLES/BOUSAI/INFO/PARTNERS)を撤去。アリーナ派生 v33 で全テンプレ共通のパンくず(.breadcrumb / .breadcrumb-list / .breadcrumb-item / .breadcrumb-sep / .breadcrumb-current)を追加。各 hero(page-hero / post-hero / archive-hero / faq-page-head / lessons-page-head)が text-align:center であることを利用し、breadcrumb 自体は中央揃えを親から継承。inline-flex の breadcrumb-list で要素を横並びにし、flex-wrap で狭幅3階層も折り返し許容。Home リンクのみ Jost 大文字小型・現在地は ink-soft で控えめ強調・セパレータ "/" は --rule 色で薄く配置。.page-hero.has-image (アイキャッチ背景) 時はパンくず色を白系に補正。担当者要望書 C4「パンくずリスト」対応。アリーナ派生 v33.2 で .breadcrumb の text-align を left に確定。v33 では親継承で hero 系は中央寄せ・post-hero (single.php) のみ左寄せで不統一だった。本指定により親が text-align:center の hero 内でも breadcrumb 部分だけ左寄せ・本体タイトル類は中央寄せのまま動作する。アリーナ派生 v33.3 で page-hero のヒーロー高さを圧縮(padding-block clamp 80-10vw-130 → 48-6vw-80, eyebrow/divider/breadcrumb の margin var--s-5(24px) → var--s-4(16px))。約470px→約318px (画面1/3弱) に縮小し v6モック他セクション(GUIDE/COMFORT RULES/ACCESS)の section padding と揃えた。.page-hero.has-image (アイキャッチ画像背景時) は写真主役のため min-height(360-42vw-520) 管理を維持・触らない。併せて page.php / page-mock.php の htb_breadcrumb() 呼び出し位置を .page-hero-inner の中から .container 直下に移動 (v33.2 までは 720px ボックスの左端=画面中央寄りに表示されていたのを、container 左端=画面左端+gutter に統一。lessons など他テンプレと揃う)。アリーナ派生 v33.4 で hero テンプレのパンくず位置を「上 padding 約32px に統一」する非対称化を実施(page-hero / post-hero / archive-hero の 3 テンプレが対象。padding-block の上だけを clamp(20px,2.5vw,32px) に縮め、下 padding は各テンプレの意図(archive-hero はリスト前提で広め・post-hero は本文流入用に狭め・page-hero は装飾感で中庸)を維持)。faq-page / lessons-page は親の padding-top が既に var(--s-7)=48px と控えめでパンくず位置が自然だったため対象外・現状維持(先生の判断で「lessons の見え方を基準に他を寄せる」方針に確定)。これで全 hero でパンくずから IMPORTANT帯までの距離が 32〜48px 帯に収束し、サイト全体のリズム感が統一された。アリーナ派生 v46 でTOPの§14 ACCESS の連結延長セクション (.access-routes-section) を3カード方式から /access/ 詳細ページへの単一CTA (.access-routes-cta) に集約。3カード分の .access-route-card / .access-route-num / .access-route-title および対応するレスポンシブ規則を撤去。併せて HERO 領域の C 案残骸を整理：dead code (.hero.hero-c-v2 .hero-scroll の単発ルール) を撤去し、「C案：レスポンシブ切替」ブロックと v25-events-r2 のモバイル復活ブロックの display:none/!important × display:flex/!important の打ち消し合戦を解消、A 案モバイル位置調整 1ブロックに統合。.hero-news-* 系ラッパは v25-events 以降 A 案 EVENT FLOAT で流用されている旨を コメントで明示。アリーナ派生 v47 で §14 ACCESS を再スリム化：.access-row dd の Fax / Email 行を撤去（Fax は申請動線に集約・Email は contact 公開済みのため CF7 に一本化）。access-actions に「アクセス詳細を見る」CTA を追加し 3 CTA 化（電話する=.btn green / Googleマップで開く=.btn solid / アクセス詳細を見る=.btn green の構成で map を中央視覚アンカーに）。v46 で導入した .access-routes-section / .access-routes-cta および 対応する 720px @media を撤去（中間段階の独立セクションが不要になったため）。front-page.php の §14b 呼び出しも同時に撤去。access-routes.php 自体は呼び出し元なしで残置（FTP 削除推奨）。アリーナ派生 v48 でヘッダーのスマホSNS対応と下境界線の視認性改善を実施。(1) スマホSNS: SNSアイコンは .header-utils 内にあり @media(max-width:860px)の「.global-nav, .header-utils{display:none}」でトップバーごと非表示だった(構造上の非表示=ACF/キャッシュではない)。モバイル専用クラスタ .header-sns-mobile を新設(既定 display:none / 860px以下で display:flex・margin-left:auto でハンバーガー左に常設)。アイコン意匠は既存 .header-sns 流用。ドロワー側には置かない方針。(2) 下境界線: .site-header の border-bottom を --rule-soft(#ECEAE2)→--rule(#DCD9CF)に変更。地(#FAFAF7)とほぼ同色で線が見えず「メニューバー感」が無かったため1段濃く(新色は追加しない)。縦区切り(.header-utils border-left)は既に --rule のため据え置き(くどさ回避)。header.php は v36-arena-sns-mobile / HTB_THEME_VERSION 1.5.9→1.5.10。アリーナ派生 v48.1 でヘッダー下境界線の視認性を再調整。v48 で --rule-soft→--rule にしたが #DCD9CF でも地 #FAFAF7 との差が弱く線が見えなかったため、暖色グレー階調に --rule-strong(#C9C5B7) を新設(rule-soft→rule→rule-strong の中間グレーの延長・新アクセント色ではない)。.site-header の border-bottom と .header-utils の border-left(ナビ↔ユーティリティ縦区切り)を --rule-strong に統一(元の「線はJA前ディバイダに揃える」意図を保ったまま両方を視認可能な濃さに)。微調整は :root の --rule-strong 値を変えるだけで両方追従(薄く→#D2CEC0 / 濃く→#BFBBAD)。HTB_THEME_VERSION 1.5.10→1.5.11。アリーナ派生 v48.2 で .header-utils の縦区切りを border-left(ヘッダー全高)→ ::before の短い縦線(height:18px・上下中央)に変更。担当者要望「テキストサイズくらいの短い縦線で区切りたい」対応。長さ調整は ::before の height のみ。HTB_THEME_VERSION 1.5.11→1.5.12。アリーナ派生 v48.3 で「短い縦線で区切る」要望の本来の対象=ナビ項目どうしの間(施設案内┃スケジュール┃スポーツ教室┃ご利用案内)に短い縦区切りを追加。引き継ぎメモの「ナビ↔ユーティリティ間の縦区切り」という記述に引きずられ対象を取り違えていたのを修正。.global-nav li:not(:last-child)::after で gap(--s-6=32px)中央に height:14px の線を配置(ホバー下線が a::after を使用中のため li::after)。色は --rule-strong 追従。v48.2 の .header-utils::before(ナビ↔ユーティリティ間)は据え置き。HTB_THEME_VERSION 1.5.12→1.5.13。アリーナ派生 v48.4 で .header-utils の縦区切りを v48.2 の短縮(::before 18px)から元の全高 border-left に復帰(担当者「ご利用案内┃JA/EN は元の長さで区切る」)。短い縦線はナビ項目間(v48.3)のみ・ナビ↔ユーティリティ間は全高に。色は視認のため --rule-strong 維持。HTB_THEME_VERSION 1.5.13→1.5.14。 Version: 1.5.33-nopporo-hero-quicklinks Requires at least: 6.0 Requires PHP: 8.0 License: Proprietary License URI: - Text Domain: hokkaido-taiiku-bunka Tags: custom-logo, custom-menu, featured-images, translation-ready */ /* ============================================ DESIGN TOKENS — Orthodox / Clean Editorial ============================================ */ :root { --bg: #FAFAF7; --bg-alt: #F2F0E9; --bg-pure: #FFFFFF; --ink: #1A1A1A; --ink-soft: #3A3A3A; --ink-mute: #7A7A7A; --rule: #DCD9CF; --rule-soft: #ECEAE2; --rule-strong: #C9C5B7; /* v48.1: rule の暖色グレー系を1段濃くしたステップ。ヘッダー帯/縦区切り用。#DCD9CFが地#FAFAF7に薄すぎて線が見えなかった対策。新アクセント色ではなく rule-soft→rule→rule-strong の中間グレー階調の延長 */ /* === アリーナ用カラー上書き(v27 / B案) === セキスイハイム ブランドカラーをロゴ(logo.svg #316DAE)に合わせる。 --green-deep は元00_絶対前提案の濃紺(#0c3966)を維持してメリハリ確保。 派生サイト展開時はこの4行のみ施設色に差し替えれば全体追従する設計。 */ --green: #3071b7; --green-deep: #0c3966; --green-light: #9BBADD; --green-soft: #E6EDF7; --font-jp-mincho: "Noto Serif JP", "Hiragino Mincho ProN", serif; --font-jp-gothic: "Noto Sans JP", system-ui, sans-serif; --font-en-serif: "Cormorant Garamond", Georgia, serif; --font-en-sans: "Jost", system-ui, sans-serif; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --max-w: 1280px; --gutter: clamp(20px, 4.5vw, 56px); --header-h: 88px; --notch: 22px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-jp-gothic); font-weight: 400; font-size: 15px; line-height: 1.95; color: var(--ink); background: var(--bg); font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { background: none; border: none; cursor: pointer; font-family: inherit; color: inherit; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); } section { padding-block: clamp(80px, 10vw, 100px); } /* HERO・STRIP系は section デフォルトの上下padding を打ち消す（独自に高さ管理） */ section.hero, .news-strip, .news-recent { padding-block: 0; } .news-strip { padding-block: 8px; } .news-recent { padding-block: var(--s-4); } /* ヘッダーオフセット：fixed なヘッダー分を body 全体で確保 これで、最上部に news-strip が来ても hero が来ても 隙間ゼロでベタ付け .admin-bar クラスは WP管理バー表示時に自動で付与される（先生からは32px見える） */ body { padding-top: var(--header-h); } /* Eyebrow — small caps en + dash */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-en-sans); font-weight: 400; font-size: 11px; letter-spacing: 0.28em; color: var(--green-deep); text-transform: uppercase; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--green-deep); } /* センター配置時は両側にダッシュ (page-hero / post-hero で使用) */ .eyebrow.is-centered::after { content: ""; width: 28px; height: 1px; background: var(--green-deep); } /* H2 standard */ .h2 { font-family: var(--font-jp-mincho); font-weight: 500; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.45; letter-spacing: 0.06em; color: var(--ink); } .h2-en { font-family: var(--font-en-serif); font-style: italic; font-weight: 400; font-size: clamp(15px, 1.4vw, 18px); color: var(--ink-mute); letter-spacing: 0.02em; margin-top: 6px; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 14px; padding: 14px 24px 14px 26px; background: transparent; color: var(--ink); border: 1px solid var(--ink); font-family: var(--font-jp-gothic); font-weight: 500; font-size: 13px; letter-spacing: 0.16em; transition: background 0.3s, color 0.3s, gap 0.3s, border-color 0.3s; } .btn:hover { background: var(--ink); color: var(--bg); gap: 22px; } .btn .arr { font-family: var(--font-en-serif); font-size: 16px; font-weight: 400; } .btn.green { color: var(--green-deep); border-color: var(--green-deep); } .btn.green:hover { background: var(--green-deep); color: #fff; } .btn.solid { background: var(--green-deep); color: #fff; border-color: var(--green-deep); } .btn.solid:hover { background: var(--ink); border-color: var(--ink); } /* "VIEW MORE" simple link */ .view-more { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-en-sans); font-size: 12px; letter-spacing: 0.2em; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--ink); transition: gap 0.3s, color 0.2s, border-color 0.2s; } .view-more:hover { gap: 22px; color: var(--green-deep); border-color: var(--green-deep); } /* ============================================ HEADER — Clean, fixed top ============================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); background: rgba(250, 250, 247, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-strong); /* v48.1: rule(#DCD9CF)でも地と差が弱く不可視だったため rule-strong(#C9C5B7)へ。1pxのまま色だけ1段濃く=「軽く・でも見える」線。もっと薄く→#D2CEC0 / 濃く→#BFBBAD で微調整可 */ transition: background 0.3s; } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); max-width: var(--max-w); margin-inline: auto; } .brand { display: flex; align-items: center; color: var(--ink); flex-shrink: 0; height: 100%; } /* フルロゴ画像（SVG）：マーク+日本語+英文+小タグライン込みで1枚 */ .brand-logo { height: 56px; width: auto; max-width: 280px; display: block; object-fit: contain; transition: opacity 0.2s; } .brand:hover .brand-logo { opacity: 0.85; } /* モバイル：ヘッダー高さに合わせてロゴ縮小 */ @media (max-width: 860px) { .brand-logo { height: 44px; max-width: 220px; } } @media (max-width: 480px) { .brand-logo { height: 38px; max-width: 190px; } } .global-nav { display: flex; align-items: center; gap: var(--s-7); } .global-nav ul { display: flex; gap: var(--s-6); align-items: center; } .global-nav a { position: relative; padding: 8px 0; font-family: var(--font-jp-gothic); font-weight: 500; font-size: 13px; letter-spacing: 0.1em; transition: color 0.2s; } .global-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--green-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; } .global-nav a:hover { color: var(--green-deep); } .global-nav a:hover::after { transform: scaleX(1); } /* v48.3: ナビ項目どうしの間の短い縦区切り(施設案内 ┃ スケジュール ┃ …) gap(--s-6=32px)の中央に、テキストサイズ相当(14px)の短い縦線を配置。 ホバー下線は a::after を使用中のため、こちらは li::after で実装。 最終項目の右には出さない(:not(:last-child))。色は --rule-strong 追従。 長さ調整は height(14px)、位置調整は right(gap中央=gap×-0.5)。 */ .global-nav li { position: relative; } .global-nav li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(var(--s-6) * -0.5); transform: translateY(-50%); width: 1px; height: 14px; background: var(--rule-strong); } .header-utils { display: flex; align-items: center; gap: var(--s-4); padding-left: var(--s-5); border-left: 1px solid var(--rule-strong); /* v48.4: v48.2の短縮(::before 18px)を撤回し、元の全高ボーダーに復帰。短い区切りはナビ項目間だけ・ここ(ナビ↔ユーティリティ間)は全高で。色は視認用に --rule-strong 維持 */ } .lang { font-family: var(--font-en-sans); font-size: 12px; letter-spacing: 0.14em; display: flex; align-items: center; gap: 6px; color: var(--ink-mute); } .lang .active { color: var(--ink); font-weight: 500; padding: 4px 2px; } .lang .sep { color: var(--rule); } .lang-en { padding: 4px 6px; color: var(--ink-mute); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .lang-en:hover { color: var(--green-deep); border-bottom-color: var(--green-deep); } .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; transition: background 0.2s, border-color 0.2s, color 0.2s; } .icon-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* ============================================ SNS ICONS in HEADER — v25-sns-r2 追加 (2026-04-29) header-utils 内、検索ボタン右に並ぶ Instagram / X .icon-btn(検索ボタン) との視覚差別化のため丸枠なし・素のSVG表示 header.php で .header-sns クラスとして使用 ============================================ */ .header-sns { display: inline-flex; align-items: center; justify-content: center; padding: 6px; color: var(--ink-mute); transition: color 0.2s ease, transform 0.2s ease; } .header-sns:hover { color: var(--green-deep); transform: translateY(-1px); } .header-sns svg { display: block; } /* ============================================ SNS ICONS (MOBILE) — v48 / header.php v36-arena-sns-mobile .header-utils は @media(max-width:860px)で display:none になるため、 スマホ用にトップバー(ハンバーガー左)へ常設するクラスタ。 PC では非表示。表示は下部 @media(max-width:860px)で display:flex に。 アイコン本体の意匠は上の .header-sns を流用。 ============================================ */ .header-sns-mobile { display: none; } /* === SNS ICONS 追加分ここまで === */ .menu-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; } .mobile-nav { position: fixed; inset: 0; background: var(--bg); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; padding: calc(var(--header-h) + 32px) var(--gutter) var(--s-7); overflow-y: auto; } .mobile-nav.open { opacity: 1; pointer-events: auto; } .mobile-nav ul { display: flex; flex-direction: column; } .mobile-nav li { border-bottom: 1px solid var(--rule); } .mobile-nav a { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; font-family: var(--font-jp-mincho); font-weight: 500; font-size: 22px; letter-spacing: 0.08em; } .mobile-nav a .mn-num { font-family: var(--font-en-serif); font-style: italic; font-size: 14px; color: var(--green-deep); } .menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .menu-toggle.open span:nth-child(2) { opacity: 0; } .menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ============================================ HERO — Photo-first slider ============================================ */ .hero { position: relative; /* margin-top は #site-content または body に集約（後述） */ height: calc(100vh - var(--header-h)); min-height: 580px; max-height: 800px; overflow: hidden; } .hero-slider { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease-in-out; } .hero-slide.active { opacity: 1; } .hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.4) 100%); } .hero-content { position: absolute; bottom: var(--s-9); left: 0; right: 0; z-index: 3; color: #fff; } .hero-content .container { display: flex; flex-direction: column; gap: var(--s-5); } .hero-eyebrow { font-family: var(--font-en-sans); font-size: 11px; letter-spacing: 0.32em; color: rgba(255,255,255,0.85); text-transform: uppercase; display: inline-flex; align-items: center; gap: 14px; } .hero-eyebrow::before { content: ""; width: 32px; height: 1px; background: rgba(255,255,255,0.7); } .hero h1 { font-family: var(--font-jp-mincho); font-weight: 500; font-size: clamp(28px, 4vw, 52px); line-height: 1.55; letter-spacing: 0.12em; color: #fff; max-width: 900px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); } .hero-en { font-family: var(--font-en-serif); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.6vw, 22px); color: rgba(255,255,255,0.85); letter-spacing: 0.04em; margin-top: 4px; } .hero-name { position: absolute; top: var(--s-7); right: var(--gutter); z-index: 3; font-family: var(--font-en-serif); font-style: italic; font-size: 14px; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); } .hero-scroll { position: absolute; bottom: var(--s-5); left: var(--gutter); z-index: 3; font-family: var(--font-en-sans); font-size: 10px; letter-spacing: 0.28em; color: rgba(255,255,255,0.7); text-transform: uppercase; display: flex; align-items: center; gap: 14px; } .hero-scroll::after { content: ""; width: 60px; height: 1px; background: rgba(255,255,255,0.5); animation: scrollLine 2s ease-in-out infinite; transform-origin: left; } @keyframes scrollLine { 0%, 100% { transform: scaleX(0.4); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } } /* ============================================ HERO 採用版 A: ファーストビューに What's New が見える高さ 85vh で News Recent帯が画面下端に収まる ============================================ */ .hero.hero-a { height: calc(85vh - var(--header-h)); } /* ============================================ HERO Float Wrapper — A 案 EVENT FLOAT のラッパベース .hero-news-float / .hero-news-float-r / .hero-news-label / .dot / .hero-news-list / .hero-news-more は A 案 HERO で event float パネル（コンサート告知等）を表示するためのラッパ群。 v25-events (2026-04-29) で C 案から A 案へ用途転用済。 - 文字読みづらさ対策：黒半透明背景＋背景ぼかし＋テキストシャドウ - 内部のイベント項目は .hero-event-* を使用（次セクション） - モバイル（720px以下）の位置調整は CSS 下部の @media 参照 ============================================ */ .hero-news-float { position: absolute; z-index: 4; display: flex; flex-direction: column; padding: 16px 22px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); max-width: min(440px, 92vw); border-left: 2px solid var(--green-light); transition: background 0.3s; } /* 右下配置（C案 v2 の標準位置） */ .hero-news-float-r { right: var(--gutter); bottom: var(--s-7); } .hero-news-float:hover { background: rgba(0, 0, 0, 0.6); } .hero-news-label { font-family: var(--font-en-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; display: inline-flex; align-items: center; gap: 8px; color: #E0EBE6; text-transform: uppercase; margin-bottom: 10px; } .hero-news-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-light); flex-shrink: 0; animation: pulseDot 2s ease-in-out infinite; } @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } /* 3件並びのリスト */ .hero-news-list { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 10px; } .hero-news-more { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.15); font-family: var(--font-en-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-light); display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; transition: gap 0.3s, color 0.2s; } .hero-news-more:hover { color: #fff; gap: 14px; } /* ============================================ HERO EVENT FLOAT — v25-events 追加 (2026-04-29) .hero-news-float (協会既存ラッパー) を流用しつつ、 イベント告知用の「日付バッジ付きアイテム」を追加。 アリーナのコンサート告知などで使用。 v6モック (icearena_TOP_v6_20260428.html) の hero-target-* を 協会の命名規則に合わせて hero-event-* にリネームしたもの。 ============================================ */ .hero-event-item { display: grid; grid-template-columns: 40px 1fr 20px; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); text-shadow: 0 1px 4px rgba(0,0,0,0.4); transition: padding-left 0.2s, color 0.2s; } .hero-event-item:last-child { border-bottom: none; } .hero-event-item:hover { padding-left: 6px; color: var(--green-light); } .hero-event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.45); border-radius: 2px; font-family: var(--font-en-serif); line-height: 1; padding: 4px 0; flex-shrink: 0; } .hero-event-date .he-month { font-size: 10px; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); margin-bottom: 2px; } .hero-event-date .he-day { font-size: 16px; font-weight: 500; color: #fff; letter-spacing: 0.02em; } .hero-event-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hero-event-jp { font-family: var(--font-jp-mincho); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; line-height: 1.3; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero-event-sub { font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); line-height: 1.3; } .hero-event-arr { font-family: var(--font-en-serif); font-size: 18px; color: rgba(255,255,255,0.6); text-align: right; } /* === HERO EVENT FLOAT 追加分ここまで === */ /* ============================================ HERO Float モバイル挙動（v46 で C 案残骸を整理し統合） - デスクトップ: .hero-news-float-r で右下配置 - モバイル (≤720px): A 案 HERO のフロートを画面上部にフルワイドで再配置 （H1 テキストとの衝突回避・v25-events-r3 由来の配置方針） ============================================ */ @media (max-width: 720px) { .hero.hero-a .hero-news-float { left: 20px; right: 20px; top: 20px; bottom: auto; width: auto; max-width: none; } } /* ============================================ NEWS strip (just below hero) ============================================ */ /* ============================================ NEWS STRIP — Important Notices (常設ではない・最大2件) ヘッダー直下に配置、該当告知がある時のみ表示。カテゴリ色分け ============================================ */ .news-strip { background: #FBF6EE; border-bottom: 1px solid #E8DCC2; padding-block: 8px; position: relative; /* margin-top は不要（HERO/news-recent側でheaderオフセットを処理） */ } .news-strip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #B8722C; } .news-strip-inner { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center; } /* 一行化ラベル：丸「!」 + IMPORTANT + 縦罫 + 重要なお知らせ */ .news-strip-label { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .news-strip-label::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; background: #B8722C; color: #fff; border-radius: 50%; font-family: var(--font-jp-gothic); font-size: 12px; font-weight: 700; line-height: 1; padding-bottom: 1px; flex-shrink: 0; } .news-strip-label .en { font-family: var(--font-en-sans); font-size: 10px; letter-spacing: 0.28em; color: #B8722C; font-weight: 500; text-transform: uppercase; } .news-strip-label .sep { width: 1px; height: 14px; background: #D4BB99; } .news-strip-label .jp { font-family: var(--font-jp-mincho); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); } .news-strip-list { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .news-strip-list a { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink); transition: color 0.2s; min-width: 0; } .news-strip-list a:hover { color: var(--green-deep); } .news-strip-list a:hover .ns-title { text-decoration: underline; text-underline-offset: 3px; } /* カテゴリバッジ */ .ns-cat { font-family: var(--font-jp-gothic); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; padding: 2px 9px; color: #fff; flex-shrink: 0; line-height: 1.5; } .ns-cat.cat-kinkyu { background: #C0392B; } /* 緊急：赤 */ .ns-cat.cat-event { background: #2E6B9E; } /* イベント：青 */ .ns-cat.cat-juyou { background: #B8722C; } /* 重要：ブラウン */ .news-strip-list .dt { font-family: var(--font-en-sans); font-size: 12.5px; color: var(--ink-mute); letter-spacing: 0.04em; flex-shrink: 0; } .ns-title { font-size: 13.5px; color: var(--ink); transition: color 0.2s; /* 長すぎたら1行で省略（…） */ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================ NEWS RECENT — 最新ニュース・さりげない表示（ヒーロー下） Lv.2: 最新3件を常設、VIEW RECENT NEWSで下の#newsセクションへ ============================================ */ .news-recent { background: var(--bg-pure); border-bottom: 1px solid var(--rule-soft); padding-block: var(--s-4); } .news-recent-inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-6); align-items: center; } .news-recent-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-en-sans); font-size: 11px; letter-spacing: 0.22em; color: var(--green-deep); font-weight: 500; text-transform: uppercase; white-space: nowrap; } .news-recent-label::before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; flex-shrink: 0; } .news-recent-list { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .news-recent-list a { display: flex; align-items: baseline; gap: 18px; font-size: 13.5px; color: var(--ink); transition: color 0.2s; min-width: 0; } .news-recent-list a:hover { color: var(--green-deep); } .news-recent-list a:hover .nr-title { text-decoration: underline; text-underline-offset: 3px; } .news-recent-list .nr-date { font-family: var(--font-en-sans); font-size: 12.5px; color: var(--ink-mute); letter-spacing: 0.04em; flex-shrink: 0; min-width: 80px; } .news-recent-list .nr-title { /* 長すぎたら1行で省略（…） */ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-recent-more { font-family: var(--font-en-sans); font-size: 11px; letter-spacing: 0.2em; color: var(--ink); text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); transition: color 0.2s, border-color 0.2s, gap 0.3s; } .news-recent-more:hover { color: var(--green-deep); border-color: var(--green-deep); gap: 14px; } /* ============================================ ABOUT (intro) ============================================ */ /* ============================================ ABOUT (intro) — v29 で v6モック §13 準拠にリビルド 協会版の理念ブロック向け仕様(.about-divider / .about-more 等)を 撤去し、施設紹介の薄い版(沿革1段落+4スタッツ)向けに整理。 .about-head ラッパで見出し3点を中央寄せ flex 化、 .num-jp と .label-jp を追加し英数字スタッツ(.num)と 和文混じりスタッツ("10,133㎡" "多種目" "通年" 等)を フォント切替で出し分けられる構造に。 ============================================ */ .about { background: var(--bg-pure); } .about-inner { max-width: 920px; margin-inline: auto; } /* v29追加: 見出し3点 (eyebrow / h2 / h2-en) のセンター寄せラッパ */ .about-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: 40px; } .about-lead { font-family: var(--font-jp-mincho); font-weight: 400; font-size: clamp(15px, 1.4vw, 17px); line-height: 2.1; color: var(--ink-soft); letter-spacing: 0.06em; margin-bottom: 56px; } /* v29: border-top のみ → border-block (上下) に変更、padding-block で上下対称化 */ .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 32px); padding-block: 48px; border-block: 1px solid var(--rule-soft); } /* v29: flex-column センタリングで縦並び3要素 (num/num-jp + label + label-jp) */ .about-stat { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } /* 英数字スタッツ用 (Cormorant Garamond italic) — 例: "1972" */ .about-stat .num { font-family: var(--font-en-serif); font-style: italic; font-size: clamp(28px, 4vw, 48px); font-weight: 500; color: var(--green-deep); line-height: 1.0; letter-spacing: 0.02em; } /* v29追加: 和文混じりスタッツ用 (Noto Serif JP) — 例: "10,133㎡" "多種目" "通年" */ .about-stat .num-jp { font-family: var(--font-jp-mincho); font-weight: 500; font-size: clamp(22px, 3vw, 32px); color: var(--green-deep); line-height: 1.0; } /* 英ラベル (uppercase / spaced) */ .about-stat .label { font-family: var(--font-en-sans); font-size: 10px; letter-spacing: 0.24em; color: var(--ink-mute); text-transform: uppercase; } /* v29追加: 和文サブラベル */ .about-stat .label-jp { font-size: 11px; letter-spacing: 0.16em; color: var(--ink-mute); margin-top: -4px; } /* === ABOUT v29 リビルドここまで === */ /* ============================================ FACILITY — Clean photo cards ============================================ */ .facility { background: var(--bg-alt); } .facility-head { text-align: center; margin-bottom: var(--s-8); } .facility-head .eyebrow { justify-content: center; } .facility-head .h2 { margin-top: var(--s-4); } .facility-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); } .facility-card { display: block; } .facility-img-wrap { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); position: relative; } .facility-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.8s ease; } .facility-card:hover .facility-img { transform: scale(1.05); } .facility-img-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.0) 70%, rgba(0,0,0,0.25) 100%); } .facility-num { position: absolute; top: var(--s-4); left: var(--s-5); z-index: 2; font-family: var(--font-en-serif); font-style: italic; font-size: 18px; color: rgba(255,255,255,0.95); } .facility-body { padding-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); } .facility-en { font-family: var(--font-en-serif); font-style: italic; font-size: 14px; color: var(--green-deep); letter-spacing: 0.02em; } .facility-name { font-family: var(--font-jp-mincho); font-weight: 500; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; letter-spacing: 0.06em; } .facility-lead { font-size: 13px; line-height: 1.9; color: var(--ink-soft); letter-spacing: 0.04em; } .facility-link { margin-top: var(--s-3); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-en-sans); font-size: 11px; letter-spacing: 0.2em; color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid var(--ink); width: fit-content; transition: gap 0.3s, color 0.2s, border-color 0.2s; } .facility-card:hover .facility-link { gap: 18px; color: var(--green-deep); border-color: var(--green-deep); } /* ============================================ NEWS — 通常お知らせ カード型一覧 ============================================ */ .news { background: var(--bg); } .news-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: end; margin-bottom: var(--s-8); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); } .news-head-title h2 { margin-top: 14px; } .news-tabs { display: flex; gap: var(--s-4); } .news-tab { font-family: var(--font-jp-gothic); font-size: 12px; letter-spacing: 0.14em; padding: 8px 14px; color: var(--ink-mute); border: 1px solid var(--rule); background: var(--bg-pure); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; } .news-tab.active { color: var(--bg-pure); background: var(--ink); border-color: var(--ink); } .news-tab:hover:not(.active) { color: var(--green-deep); border-color: var(--green-deep); } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); } .news-card { display: flex; flex-direction: column; padding: var(--s-6) var(--s-5); border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); background: var(--bg-pure); transition: background 0.2s; cursor: pointer; } .news-card:hover { background: var(--green-soft); } .news-card:nth-child(3n) { border-right: none; } .news-meta { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); } .news-date { font-family: var(--font-en-sans); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-soft); } .news-cat { font-family: var(--font-jp-gothic); font-size: 10px; letter-spacing: 0.16em; padding: 3px 10px; border: 1px solid var(--ink-mute); color: var(--ink-mute); } .news-cat.cat-oshirase { color: var(--green-deep); border-color: var(--green-deep); } .news-cat.cat-houkoku { color: #8B6B3D; border-color: #8B6B3D; } .news-title { font-family: var(--font-jp-mincho); font-weight: 500; font-size: 15px; line-height: 1.7; letter-spacing: 0.04em; color: var(--ink); margin-bottom: var(--s-5); /* v30: 長文タイトル制御 --- line-clamp で最大3行表示、超過分は省略。 word-break/overflow-wrap で空白なし英数字連続(testtesttest…等) もカード内で強制改行する。 display:-webkit-box を使う関係で flex-grow は両立しないため 撤去し、代わりに .news-read 側に margin-top:auto を付与して READ MORE をカード下端に押し出す。 */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; overflow-wrap: anywhere; } .news-read { margin-top: auto; /* v30: .news-title の flex-grow 撤去に伴い、READ MOREをカード下端へ */ font-family: var(--font-en-sans); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-mute); text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s, gap 0.2s; } .news-card:hover .news-read { color: var(--green-deep); gap: 14px; } .news-more { margin-top: var(--s-8); text-align: center; } /* ============================================ PRINCIPLES — quiet 7 column with stripe ============================================ */ .principles { background: var(--bg-pure); } .principles-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: end; margin-bottom: var(--s-8); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); } .principles-head .lead { font-family: var(--font-jp-mincho); font-weight: 400; font-size: clamp(15px, 1.4vw, 17px); line-height: 2.2; letter-spacing: 0.08em; color: var(--ink-soft); } .principles-head .lead .em { color: var(--green-deep); font-weight: 500; } .principles-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; } .principle { padding: var(--s-6) var(--s-4); border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--s-4); min-height: 220px; transition: background 0.3s; } .principle:last-child { border-right: 1px solid var(--rule); } .principle:hover { background: var(--green-soft); } .principle-num { font-family: var(--font-en-serif); font-style: italic; font-size: 24px; color: var(--green-deep); font-weight: 400; } .principle-text { margin-top: auto; font-family: var(--font-jp-mincho); font-weight: 500; font-size: 13px; line-height: 1.85; letter-spacing: 0.04em; color: var(--ink); } /* ============================================ BOUSAI ============================================ */ .bousai { background: var(--bg-alt); } .bousai-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-9); align-items: center; } .bousai-img { aspect-ratio: 4 / 3; background: linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.4) 100%), linear-gradient(160deg, #6E5036 0%, #3D2A1A 60%, #1A1208 100%); position: relative; overflow: hidden; } .bousai-img-label { position: absolute; top: var(--s-5); left: var(--s-5); font-family: var(--font-en-sans); font-size: 10px; letter-spacing: 0.22em; color: rgba(255,255,255,0.85); text-transform: uppercase; } .bousai-img-bottom { position: absolute; bottom: var(--s-5); left: var(--s-5); right: var(--s-5); z-index: 2; } .bousai-img-jp { font-family: var(--font-jp-mincho); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.5; letter-spacing: 0.1em; color: #fff; } .bousai-text { display: flex; flex-direction: column; gap: var(--s-5); } .bousai-text p { font-size: 14px; line-height: 2; color: var(--ink-soft); letter-spacing: 0.05em; } .bousai-keys { margin-top: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .bousai-key .label { font-family: var(--font-en-sans); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 4px; } .bousai-key .value { font-family: var(--font-jp-mincho); font-weight: 500; font-size: 15px; color: var(--ink); letter-spacing: 0.06em; } /* ============================================ INFO DISCLOSURE ============================================ */ .info { background: var(--bg-pure); } .info-grid { display: grid; grid-template-columns: 1fr 1.8fr; gap: var(--s-9); } .info-side .h2 { margin-top: var(--s-3); } .info-side p { margin-top: var(--s-5); font-size: 14px; line-height: 2; color: var(--ink-soft); max-width: 380px; } .info-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); } .info-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--s-5); align-items: center; padding: var(--s-5) var(--s-4); border-bottom: 1px solid var(--rule); transition: padding 0.3s, background 0.3s; } .info-row:hover { padding-left: 18px; background: var(--bg-alt); } .info-pill { font-family: var(--font-en-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; color: var(--ink-mute); border: 1px solid var(--rule); padding: 6px 9px; text-transform: uppercase; } .info-name { font-family: var(--font-jp-mincho); font-weight: 500; font-size: 16px; letter-spacing: 0.06em; } .info-name .meta { display: block; font-family: var(--font-en-serif); font-style: italic; font-size: 13px; color: var(--ink-mute); margin-top: 2px; } .info-size { font-family: var(--font-en-sans); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.06em; } .info-arr { font-family: var(--font-en-serif); font-style: italic; font-size: 18px; color: var(--ink-mute); transition: transform 0.3s, color 0.2s; } .info-row:hover .info-arr { transform: translateX(4px); color: var(--green-deep); } /* ============================================ PAGE HEAD (固定ページ用ヘッダーブロック) ============================================ */ .page-head { background: var(--bg-pure); padding-block: clamp(80px, 9vw, 120px) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule); } .page-head-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-9); align-items: end; } .page-head h1 { font-family: var(--font-jp-mincho); font-weight: 500; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.35; letter-spacing: 0.06em; margin-top: var(--s-4); } .page-head .h1-en { font-family: var(--font-en-serif); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.6vw, 20px); color: var(--ink-mute); letter-spacing: 0.02em; margin-top: var(--s-3); } .page-head .lead { font-size: 14px; line-height: 2.1; color: var(--ink-soft); max-width: 520px; } /* ============================================ INFO ARCHIVE (/info/ 一覧ページ専用) ============================================ */ .info-archive { background: var(--bg-pure); padding-block: clamp(48px, 6vw, 80px) clamp(80px, 10vw, 140px); } .info-cat { margin-bottom: var(--s-9); } .info-cat:last-child { margin-bottom: 0; } .info-cat-head { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-5); align-items: baseline; padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--green-deep); } .info-cat-num { font-family: var(--font-en-serif); font-style: italic; font-weight: 400; font-size: 26px; color: var(--green-deep); letter-spacing: 0.04em; } .info-cat-title { font-family: var(--font-jp-mincho); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: 0.08em; color: var(--ink); } .info-cat-title .meta-en { font-family: var(--font-en-serif); font-style: italic; font-size: clamp(13px, 1.2vw, 15px); color: var(--ink-mute); letter-spacing: 0.04em; margin-left: var(--s-3); font-weight: 400; } /* archive内の info-row は5カラムに上書き (TOPは4カラムのまま) */ .info-archive .info-row { grid-template-columns: auto 1fr 130px 80px auto; } .info-nendo { font-family: var(--font-jp-mincho); font-weight: 500; font-size: 14px; color: var(--ink-soft); letter-spacing: 0.06em; text-align: right; } .info-nendo.is-empty { color: var(--ink-mute); font-family: var(--font-en-serif); font-style: italic; font-size: 16px; } .info-archive .info-size { text-align: right; } /* 件数ゼロ時の空状態 */ .info-empty { padding: var(--s-7) var(--s-4); text-align: center; color: var(--ink-mute); font-size: 13px; letter-spacing: 0.06em; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* ============================================ PARTNERS ============================================ */ .partners { background: var(--bg); } .partners-head { text-align: center; margin-bottom: var(--s-7); } .partners-head .eyebrow { justify-content: center; } .partners-head .h2 { margin-top: var(--s-4); } .partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .partner-cell { background: var(--bg); padding: var(--s-6) var(--s-4); display: grid; place-items: center; text-align: center; font-family: var(--font-jp-mincho); font-weight: 500; font-size: 13px; line-height: 1.65; letter-spacing: 0.04em; color: var(--ink); min-height: 100px; transition: background 0.3s, color 0.3s; } .partner-cell:hover { background: var(--green-soft); color: var(--green-deep); } /* ============================================ ACCESS ============================================ */ .access { background: var(--bg-alt); } .access-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-8); align-items: stretch; } .access-info .h2 { margin-top: var(--s-3); } .access-info .h2-en { margin-bottom: var(--s-7); } .access-rows { display: flex; flex-direction: column; border-top: 1px solid var(--rule); } .access-row { display: grid; grid-template-columns: 100px 1fr; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .access-row dt { font-family: var(--font-en-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; color: var(--green-deep); text-transform: uppercase; } .access-row dd { font-family: var(--font-jp-mincho); font-weight: 500; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; } .access-row dd .num { font-family: var(--font-en-sans); font-weight: 400; font-size: 17px; letter-spacing: 0.04em; } .access-actions { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; } .access-map { background: var(--bg-pure); border: 1px solid var(--rule); position: relative; display: grid; place-items: center; overflow: hidden; min-height: 440px; } .access-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(0deg, rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 36px 36px; } .access-map-pin { width: 50px; height: 50px; background: var(--green-deep); border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 2; box-shadow: 0 4px 16px rgba(0,0,0,0.15); } .access-map-pin::after { content: ""; position: absolute; width: 100px; height: 100px; border: 1px solid rgba(0,0,0,0.15); border-radius: 50%; animation: ripple 2.4s ease-out infinite; } .access-map-pin span { width: 12px; height: 12px; background: #fff; border-radius: 50%; } @keyframes ripple { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } } .access-map-label { position: absolute; top: var(--s-5); left: var(--s-5); font-family: var(--font-en-sans); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase; } /* ============================================================ PHASE 3 — Page / Single Templates (下層ページ実装) v1.2.0-phase3-v8 2026-04-26 - .page-hero / .post-hero: 固定ページ・投稿個別のヒーロー - .rich-content: Classic Editor 出力の汎用整形 - .feature-box / .callout / .numbered-cards / .tag-row / .facility-row: 拡張ユーティリティ - .post-nav: 投稿個別末尾の前後ナビ ============================================================ */ /* ---------- Page Hero (page.php / page-mock.php) ---------- */ /* v33.3 (2026-05-02): 上下padding を clamp(80,10vw,130) → clamp(48,6vw,80) に圧縮。 v6モックの他セクション (GUIDE/COMFORT RULES/ACCESS) の section padding-block と 揃えた。eyebrow/divider/breadcrumb の margin も var(--s-5)(24px) → var(--s-4)(16px) に詰めて、ヒーロー全体高さを 約470px → 約318px (画面 1/3 弱) に縮小。 .page-hero.has-image (アイキャッチ画像背景) は写真主役のため min-height ベースの 別管理 (1671行付近) を維持・触らない。 v33.4 (2026-05-02): padding-block を非対称化。上だけ clamp(20px,2.5vw,32px) に さらに圧縮し、パンくずを IMPORTANT 帯の直下近く(約32px下)に配置。下 padding は v33.3 の clamp(48,6vw,80) を維持(緑三角装飾の見え方とヒーローの「重み」のため)。 全 hero (post-hero / archive-hero) でも上 padding を約32pxに揃え、サイト全体で パンくず位置のリズム統一。 */ .page-hero { position: relative; padding-block: clamp(20px, 2.5vw, 32px) clamp(48px, 6vw, 80px); background: var(--bg-alt); overflow: hidden; } .page-hero::before { /* 右下のコーナー装飾 (緑薄三角) */ content: ""; position: absolute; bottom: 0; right: 0; width: clamp(80px, 14vw, 180px); height: clamp(80px, 14vw, 180px); background: var(--green-soft); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: 0.7; } .page-hero-inner { position: relative; max-width: 720px; margin-inline: auto; text-align: center; z-index: 2; } .page-hero-eyebrow { margin-bottom: var(--s-4); /* v33.3: --s-5(24) → --s-4(16) */ } .page-hero-title { font-family: var(--font-jp-mincho); font-weight: 600; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.4; letter-spacing: 0.1em; color: var(--ink); } .page-hero-divider { display: block; width: 56px; height: 1px; background: var(--ink); margin: var(--s-4) auto; /* v33.3: --s-5(24) → --s-4(16) */ } .page-hero-en { font-family: var(--font-en-serif); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.6vw, 20px); color: var(--ink-mute); letter-spacing: 0.02em; } .page-body { padding-block: clamp(48px, 6vw, 80px); background: var(--bg); } /* ---------- Page Hero (アイキャッチが背景になるモード) ---------- */ .page-hero.has-image { background-color: var(--ink); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: clamp(360px, 42vw, 520px); display: flex; align-items: center; padding-block: clamp(80px, 10vw, 130px); } /* 暗いオーバーレイで文字を読みやすく */ .page-hero.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 100%); z-index: 1; } /* 既存の右下ノッチ装飾は写真モードでは非表示 (写真の主役感を邪魔しないため) */ .page-hero.has-image::before { display: none; } /* テキストを白に */ .page-hero.has-image .page-hero-inner { color: #fff; } .page-hero.has-image .page-hero-eyebrow { color: rgba(255, 255, 255, 0.9); } .page-hero.has-image .eyebrow.is-centered::before, .page-hero.has-image .eyebrow.is-centered::after { background: rgba(255, 255, 255, 0.7); } .page-hero.has-image .page-hero-title { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .page-hero.has-image .page-hero-divider { background: rgba(255, 255, 255, 0.7); } .page-hero.has-image .page-hero-en { color: rgba(255, 255, 255, 0.85); } /* ---------- Single Hero (single.php) ---------- */ /* v33.4 (2026-05-02): padding-block の上だけを clamp(70,9vw,110) → clamp(20,2.5vw,32) に 圧縮(パンくず位置を IMPORTANT 帯直下に統一)。下 padding は本文流入用に狭めの clamp(40,5vw,70) を維持(他 hero テンプレと意図的に異なる)。 */ .post-hero { position: relative; padding-block: clamp(20px, 2.5vw, 32px) clamp(40px, 5vw, 70px); background: var(--bg-alt); overflow: hidden; } .post-hero::before { content: ""; position: absolute; bottom: 0; right: 0; width: clamp(80px, 12vw, 140px); height: clamp(80px, 12vw, 140px); background: var(--green-soft); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: 0.7; } .post-hero-inner { position: relative; max-width: 880px; margin-inline: auto; z-index: 2; } .post-meta { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; } .post-date { font-family: var(--font-en-serif); font-style: italic; font-size: 16px; letter-spacing: 0.04em; color: var(--ink-soft); } .post-category { display: inline-block; padding: 5px 14px; background: var(--green-soft); color: var(--green-deep); font-family: var(--font-jp-gothic); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; border-radius: 2px; } .post-category.is-important { background: #FBE9E5; color: #C0392B; } .post-hero-title { font-family: var(--font-jp-mincho); font-weight: 600; font-size: clamp(24px, 3.8vw, 42px); line-height: 1.55; letter-spacing: 0.06em; color: var(--ink); } /* Featured Image (アイキャッチ・任意) */ .post-featured { margin-block: 0; background: var(--bg-alt); overflow: hidden; } .post-featured img { display: block; width: 100%; max-width: var(--max-w); margin-inline: auto; height: auto; aspect-ratio: 21 / 9; object-fit: cover; } .post-body { padding-block: clamp(48px, 6vw, 80px); background: var(--bg); } /* ---------- .rich-content — Classic Editor 出力の汎用整形 ---------- */ .rich-content { max-width: 760px; margin-inline: auto; font-family: var(--font-jp-gothic); font-size: 15px; line-height: 2; color: var(--ink-soft); letter-spacing: 0.04em; } .rich-content > * + * { margin-top: var(--s-5); } .rich-content > h2 + *, .rich-content > h3 + *, .rich-content > h4 + * { margin-top: var(--s-3); } .rich-content h2 { position: relative; font-family: var(--font-jp-mincho); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.5; letter-spacing: 0.06em; color: var(--ink); margin-top: var(--s-8); padding-bottom: var(--s-4); } .rich-content h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--green-deep); } .rich-content h3 { font-family: var(--font-jp-mincho); font-weight: 600; font-size: clamp(17px, 2vw, 20px); line-height: 1.6; letter-spacing: 0.05em; color: var(--ink); margin-top: var(--s-7); padding-left: var(--s-4); border-left: 3px solid var(--green); } .rich-content h4 { font-family: var(--font-jp-gothic); font-weight: 600; font-size: 16px; line-height: 1.7; color: var(--green-deep); margin-top: var(--s-6); } .rich-content p { color: var(--ink-soft); } .rich-content a { color: var(--green-deep); border-bottom: 1px solid var(--green-light); transition: color 0.2s, border-color 0.2s; } .rich-content a:hover { color: var(--ink); border-bottom-color: var(--ink); } .rich-content ul, .rich-content ol { padding-left: 1.4em; } .rich-content ul { list-style: disc outside; } .rich-content ol { list-style: decimal outside; } .rich-content li { margin-top: 6px; } .rich-content li::marker { color: var(--green); } .rich-content blockquote { margin: var(--s-6) 0; padding: var(--s-5) var(--s-6); border-left: 3px solid var(--green); background: var(--bg-alt); font-family: var(--font-jp-mincho); color: var(--ink-soft); } .rich-content blockquote p { margin: 0; } .rich-content table { width: 100%; border-collapse: collapse; font-size: 14px; margin-block: var(--s-5); } .rich-content th, .rich-content td { padding: 14px 16px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; line-height: 1.7; } .rich-content th { background: var(--bg-alt); font-family: var(--font-jp-mincho); font-weight: 500; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; } /* Timeline table (沿革等の年表) — 1列目を nowrap で日付改行を防ぐ 2系統で発火: (1) class="timeline" が付与されている (2) thead を持つテーブル :has() による (2) で about.html 未差し替えでも効くようにしている */ .rich-content table.timeline thead th:first-child, .rich-content table.timeline tbody td:first-child, .rich-content table:has(thead) tbody td:first-child { white-space: nowrap; width: 1%; padding-right: var(--s-6); font-family: var(--font-jp-mincho); color: var(--ink); letter-spacing: 0.04em; } .rich-content figure { margin-block: var(--s-6); } .rich-content img { margin-block: var(--s-5); border-radius: 2px; } .rich-content figcaption { margin-top: var(--s-3); font-size: 12px; color: var(--ink-mute); text-align: center; letter-spacing: 0.04em; } .rich-content hr { border: none; border-top: 1px solid var(--rule); margin-block: var(--s-7); } .rich-content strong { font-weight: 600; color: var(--ink); } .rich-content em { font-style: italic; } .rich-content code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; padding: 2px 6px; background: var(--bg-alt); border-radius: 2px; } /* ---------- 拡張ユーティリティ (Classic Editor で
で使用) ---------- */ /* Feature Box (デフォルト = アウトライン / 普通の枠線) */ .feature-box { position: relative; margin-block: var(--s-7); padding: var(--s-7) var(--s-6); background-color: transparent; border: 1px solid var(--ink); color: var(--ink-soft); } .feature-box .feature-box-title { display: inline-block; margin: 0 0 var(--s-5) 0 !important; padding: var(--s-2) var(--s-5) !important; border: 1px solid var(--ink); font-family: var(--font-jp-mincho); font-weight: 500; font-size: 17px; letter-spacing: 0.1em; color: var(--ink); background: transparent; } .feature-box p { color: var(--ink-soft) !important; line-height: 2; } /* Feature Box .dark (黒塗り版・右下ノッチ / 強訴求用) */ .feature-box.dark { background-color: var(--ink); border: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); color: rgba(250, 250, 247, 0.85); } .feature-box.dark .feature-box-title { border-color: rgba(250, 250, 247, 0.7); color: #fff; } .feature-box.dark p { color: rgba(250, 250, 247, 0.85) !important; } .feature-box.dark a { color: var(--green-light) !important; border-bottom-color: rgba(143, 191, 163, 0.5) !important; } /* Callout (淡・補足情報) */ .callout { margin-block: var(--s-6); padding: var(--s-5) var(--s-6); background: var(--bg-alt); border-radius: 2px; position: relative; } .callout::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--green-deep); } .callout .callout-title { font-family: var(--font-jp-mincho); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: var(--s-3) !important; letter-spacing: 0.06em; } /* Numbered Cards (kaminishi 4つの役割風 / 右下ノッチ) v13.2: minmax 220→280 で desktop 2列化、垂直余白圧縮(間延び解消) */ .numbered-cards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); list-style: none !important; padding: 0 !important; margin-block: var(--s-7); counter-reset: ncard; } .numbered-cards > li { position: relative; padding: var(--s-5) var(--s-5); background: var(--bg-alt); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); counter-increment: ncard; margin-top: 0 !important; font-family: var(--font-jp-mincho); font-size: 14px; line-height: 1.85; color: var(--ink); text-align: center; } .numbered-cards > li::before { content: counter(ncard); display: block; font-family: var(--font-en-serif); font-style: italic; font-size: 36px; font-weight: 400; color: var(--green-deep); margin-bottom: var(--s-2); line-height: 1; } .numbered-cards > li::marker { content: none; } /* Tag Row (枠線アロー型ラベル / kaminishi 車・バス・タクシー風) */ .tag-row { display: grid !important; grid-template-columns: auto 1fr; gap: var(--s-4) var(--s-5); align-items: baseline; list-style: none !important; padding: 0 !important; margin-block: var(--s-5); } .tag-row > dt { display: inline-flex; align-items: center; justify-content: center; padding: 0 26px 0 14px; min-width: 84px; height: 30px; font-family: var(--font-jp-gothic); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; color: var(--ink); background-image: url("data:image/svg+xml;charset=utf8,"); background-repeat: no-repeat; background-size: 100% 100%; white-space: nowrap; justify-self: start; } .tag-row > dd { font-size: 14px; line-height: 1.85; color: var(--ink-soft); margin: 0; } /* Facility Row (4施設カード横並び・固定ページ本文用) ⚠️ TOP の .facility-grid / .facility-card とは別物。.facility-row の中だけにスコープ */ .facility-row { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); list-style: none !important; padding: 0 !important; margin-block: var(--s-7); } .facility-row > li { margin-top: 0 !important; display: flex; flex-direction: column; } .facility-row > li::marker { content: none; } .facility-row .facility-img { aspect-ratio: 4 / 3; position: relative; overflow: hidden; } .facility-row .facility-img img { width: 100%; height: 100%; object-fit: cover; } .facility-row .facility-img-label { position: absolute; bottom: var(--s-3); left: var(--s-3); font-family: var(--font-en-sans); font-size: 9px; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; } /* 写真未設定時の施設別カラープレースホルダー */ .facility-row .facility-img.is-icearena { background: linear-gradient(160deg, #2C5F7E 0%, #1A3A4E 60%, #0E2230 100%); } .facility-row .facility-img.is-stadium { background: linear-gradient(160deg, #2E7A4E 0%, #1A5A36 60%, #0E3520 100%); } .facility-row .facility-img.is-koen { background: linear-gradient(160deg, #4E5F2E 0%, #36421A 60%, #20280E 100%); } .facility-row .facility-img.is-nopporo { background: linear-gradient(160deg, #9E5A2E 0%, #6E3A1A 60%, #3E200E 100%); } .facility-row .facility-name { font-family: var(--font-jp-mincho); font-weight: 600; font-size: 14px; line-height: 1.5; letter-spacing: 0.04em; color: var(--ink); margin-top: var(--s-3) !important; } .facility-row .facility-en { font-family: var(--font-en-serif); font-style: italic; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.02em; line-height: 1.5; margin-top: 4px !important; } .facility-row .facility-desc { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; margin-top: var(--s-2) !important; } /* Map Embed (Googleマップなどの iframe ラッパー) */ .map-embed { margin-block: var(--s-5); width: 100%; border: 1px solid var(--rule); background: var(--bg-alt); overflow: hidden; } .map-embed iframe { display: block; width: 100%; height: 450px; border: 0; } @media (max-width: 860px) { .map-embed iframe { height: 320px; } } /* FAQ List (折りたたみ Q&A / details + summary) */ .faq-list { margin-block: var(--s-7); border-top: 1px solid var(--rule); } .faq-list details { border-bottom: 1px solid var(--rule); padding-block: var(--s-5); margin-top: 0 !important; } .faq-list summary { cursor: pointer; list-style: none; position: relative; padding: 0 40px 0 36px; font-family: var(--font-jp-mincho); font-weight: 500; font-size: 16px; line-height: 1.7; color: var(--ink); letter-spacing: 0.04em; transition: color 0.2s; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::before { content: "Q"; position: absolute; left: 0; top: -2px; font-family: var(--font-en-serif); font-style: italic; font-size: 22px; color: var(--green-deep); line-height: 1.4; } .faq-list summary::after { content: "+"; position: absolute; right: 8px; top: 0; font-family: var(--font-en-sans); font-size: 22px; font-weight: 300; color: var(--ink-mute); line-height: 1; transition: color 0.2s; } .faq-list details[open] summary::after { content: "−"; } .faq-list summary:hover { color: var(--green-deep); } .faq-list summary:hover::after { color: var(--green-deep); } .faq-list details > p { margin-top: var(--s-4); padding-left: 36px; position: relative; color: var(--ink-soft); line-height: 2; } .faq-list details > p::before { content: "A"; position: absolute; left: 0; top: -4px; font-family: var(--font-en-serif); font-style: italic; font-size: 22px; color: var(--ink-mute); line-height: 1.4; } /* ---------- Post Navigation (single.php 末尾) ---------- */ .post-nav { max-width: 760px; margin: var(--s-8) auto 0; padding-top: var(--s-6); border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-5); align-items: center; } .post-nav-prev a, .post-nav-next a { display: flex; flex-direction: column; gap: 4px; transition: color 0.2s; } .post-nav-prev a:hover, .post-nav-next a:hover { color: var(--green-deep); } .post-nav-next { text-align: right; } .post-nav-label { font-family: var(--font-en-sans); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-mute); } .post-nav-title { font-family: var(--font-jp-mincho); font-size: 13px; line-height: 1.6; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-nav-back { justify-self: center; } /* ============================================================ ARCHIVE — お知らせ一覧 (archive.php / 検索結果 / カテゴリ別) Phase 3 v10 2026-04-26 ------------------------------------------------------------ - 全体白ベース・余白広め・装飾少なめ (KAMINISHI参照) - ヒーロー: タイトル + 下線のみ - タブ: テキスト型 (Category ▶ すべて お知らせ 報告) - リスト: 横長1列・上下ライン・カテゴリは枠付きピル - ページネーション: 下線スタイル ============================================================ */ .archive-main { background: var(--bg-pure); } /* ---- Archive Hero (シンプル) ---- */ /* v33.4 (2026-05-02): padding-block の上だけを clamp(80,9vw,120) → clamp(20,2.5vw,32) に 圧縮(パンくず位置を IMPORTANT 帯直下に統一)。下 padding は記事リスト前提で広めの clamp(48,5vw,72) を維持。 */ .archive-hero { padding-block: clamp(20px, 2.5vw, 32px) clamp(48px, 5vw, 72px); background: var(--bg-pure); text-align: center; } .archive-hero-title { font-family: var(--font-jp-mincho); font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.4; letter-spacing: 0.14em; color: var(--ink); } .archive-hero-divider { display: block; width: 48px; height: 1px; background: var(--ink); margin: var(--s-5) auto 0; } /* ---- Controls (タブ + 検索) ---- */ .archive-controls { padding-block: 0 clamp(28px, 3vw, 40px); background: var(--bg-pure); } .archive-controls-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); } /* テキスト型タブ */ .archive-tabs { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-jp-gothic); } .archive-tabs-label { font-family: var(--font-en-sans); font-size: 11px; letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase; margin-right: var(--s-2); } .archive-tabs-arrow { color: var(--ink-mute); font-size: 11px; margin-right: var(--s-2); } .archive-tab { font-size: 13px; letter-spacing: 0.08em; color: var(--ink-mute); padding: 6px 4px; position: relative; transition: color 0.2s; cursor: pointer; } .archive-tab:hover { color: var(--ink); } .archive-tab.is-active { color: var(--ink); font-weight: 500; } .archive-tab.is-active::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 1px; background: var(--ink); } /* 検索ボックス (軽量・下線のみ) */ .archive-search { display: flex; align-items: center; border-bottom: 1px solid var(--rule); padding-bottom: 4px; } .archive-search input[type="search"] { font-family: var(--font-jp-gothic); font-size: 13px; padding: 6px 8px; border: none; outline: none; background: transparent; width: 200px; color: var(--ink); letter-spacing: 0.04em; } .archive-search input::placeholder { color: var(--ink-mute); font-size: 12px; letter-spacing: 0.06em; } .archive-search button { padding: 6px 8px; font-family: var(--font-en-sans); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-mute); text-transform: uppercase; transition: color 0.2s; } .archive-search button:hover { color: var(--green-deep); } /* 結果サマリー (検索/フィルタ時のみ表示) */ .archive-summary { margin-top: var(--s-5); padding-bottom: var(--s-3); font-family: var(--font-jp-gothic); font-size: 13px; color: var(--ink-mute); letter-spacing: 0.04em; } .archive-summary strong { color: var(--ink); font-weight: 600; } .archive-summary .clear { display: inline-block; margin-left: var(--s-3); padding: 3px 10px; font-size: 11px; border: 1px solid var(--rule); color: var(--ink-soft); letter-spacing: 0.06em; transition: background 0.2s, color 0.2s, border-color 0.2s; } .archive-summary .clear:hover { background: var(--ink); color: #fff; border-color: var(--ink); } /* ---- List (横長1列) ---- */ .archive-list { padding-block: 0 clamp(64px, 7vw, 96px); } .archive-list-inner { border-top: 1px solid var(--rule); } .archive-row { display: grid; grid-template-columns: 120px 90px 1fr; gap: var(--s-5); align-items: baseline; padding: var(--s-6) var(--s-2); border-bottom: 1px solid var(--rule); transition: background 0.2s; cursor: pointer; } .archive-row:hover { background: var(--bg); } .archive-date { font-family: var(--font-en-sans); font-size: 14px; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 400; } /* カテゴリラベル (枠線+色付きピル型 = 既存 .news-cat と同じ系統) */ .archive-cat { justify-self: start; font-family: var(--font-jp-gothic); font-size: 10px; letter-spacing: 0.16em; padding: 4px 12px; border: 1px solid var(--ink-mute); color: var(--ink-mute); white-space: nowrap; } .archive-cat.cat-oshirase { color: var(--green-deep); border-color: var(--green-deep); } .archive-cat.cat-houkoku { color: #8B6B3D; border-color: #8B6B3D; } .archive-cat.cat-juyou { color: #C0392B; border-color: #C0392B; background: #FCEFEE; } .archive-title { font-family: var(--font-jp-mincho); font-weight: 500; font-size: 16px; line-height: 1.7; color: var(--ink); letter-spacing: 0.04em; transition: color 0.2s; } .archive-row:hover .archive-title { color: var(--green-deep); } /* 検索ハイライト */ .archive-title mark { background: rgba(248, 215, 117, 0.55); color: inherit; padding: 0 2px; } /* 0件メッセージ */ .archive-empty { padding: var(--s-9) var(--s-5); text-align: center; color: var(--ink-mute); font-family: var(--font-jp-mincho); font-size: 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* ---- ページネーション (paginate_links 出力対応) ---- */ .archive-pagination { display: flex; justify-content: center; align-items: center; gap: var(--s-3); margin-top: var(--s-8); flex-wrap: wrap; } .archive-pagination .page-numbers { font-family: var(--font-en-sans); font-size: 13px; letter-spacing: 0.06em; min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; color: var(--ink-mute); transition: color 0.2s, border-color 0.2s; border-bottom: 1px solid transparent; text-decoration: none; } .archive-pagination a.page-numbers:hover { color: var(--ink); border-bottom-color: var(--ink); } .archive-pagination .page-numbers.current { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); } .archive-pagination .page-numbers.dots { border: none; } .archive-pagination .page-numbers.prev, .archive-pagination .page-numbers.next { letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; padding-inline: 14px; } /* ============================================ FOOTER ============================================ */ /* ─── FOOTER: ライト版（nopporo-footer-light）　取込日 ─── 野幌はロゴが 2 色ブルーグラデ(#3071b7→#0c3966)。暗地 #1A1A1A だと 濃い側が溶けて消えるため、フッター地を明るく(--green-soft #E6EDF7)に反転。 背景を明るくしたので、フッター内の白文字系(テキスト/見出し/枠/SNS/CTA)を すべてダーク系に組替えた(背景だけ変えると白文字が消えるため)。 地の色味を変えるなら下の background を差し替え(暖色寄りは --bg-alt 等)。 */ .site-footer { background: var(--green-soft); color: var(--ink-soft); padding-block: var(--s-9) var(--s-5); } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid rgba(48, 113, 183, 0.18); } /* フッターのブランドエリア：フルロゴSVG（白文字）を1枚で表示 */ .footer-logo-link { display: inline-block; line-height: 0; transition: opacity 0.2s; } .footer-logo-link:hover { opacity: 0.85; } .footer-brand-logo { height: 64px; width: auto; max-width: 320px; display: block; object-fit: contain; } .footer-brand p { margin-top: var(--s-5); font-size: 13px; line-height: 1.85; } .footer-brand .num { font-family: var(--font-en-sans); } /* モバイル時は少し縮小 */ @media (max-width: 860px) { .footer-brand-logo { height: 52px; max-width: 280px; } } .footer-col h4 { font-family: var(--font-en-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; color: var(--green-deep); text-transform: uppercase; margin-bottom: var(--s-5); } .footer-col ul { display: flex; flex-direction: column; gap: 12px; } .footer-col a { font-family: var(--font-jp-mincho); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; transition: color 0.2s; } .footer-col a:hover { color: var(--green); } .footer-bot { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-5); font-size: 11px; color: var(--ink-mute); flex-wrap: wrap; gap: var(--s-3); } .footer-bot .copyright { font-family: var(--font-en-sans); letter-spacing: 0.12em; } .footer-bot .reuse { font-family: var(--font-jp-mincho); font-size: 12px; } /* ============================================ FACILITY ARCHIVE — Large alternating panels (v12) ============================================ */ .facility-archive { background: var(--bg-pure); padding-block: clamp(64px, 8vw, 120px) clamp(80px, 10vw, 140px); } .facility-panel { margin-bottom: clamp(96px, 12vw, 160px); position: relative; } .facility-panel:last-child { margin-bottom: 0; } .facility-panel-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; min-height: 540px; } .facility-panel-photo { aspect-ratio: 4 / 3; background-color: var(--ink); background-size: cover; background-position: center; position: relative; z-index: 1; } .facility-panel-photo .photo-num { position: absolute; top: var(--s-4); left: var(--s-5); font-family: var(--font-en-serif); font-style: italic; font-size: 17px; color: rgba(255, 255, 255, 0.95); letter-spacing: 0.18em; background: rgba(0, 0, 0, 0.45); padding: 6px 14px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .facility-panel-card { background: var(--ink); color: #fff; padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 52px); z-index: 2; position: relative; align-self: center; margin-left: -120px; } /* 偶数番目 (02 / 04) は写真右・カード左の鏡像配置 */ .facility-panel.right .facility-panel-photo { order: 2; } .facility-panel.right .facility-panel-card { order: 1; margin-left: 0; margin-right: -120px; } .facility-panel-title-frame { border: 1px solid rgba(255, 255, 255, 0.65); padding: var(--s-4) var(--s-5) 14px; margin-bottom: var(--s-6); } .facility-panel-title-en { display: block; font-family: var(--font-en-serif); font-style: italic; font-size: 13px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); margin-bottom: 6px; line-height: 1.3; } .facility-panel-title-jp { display: block; font-family: var(--font-jp-mincho); font-size: clamp(18px, 2vw, 21px); font-weight: 500; color: #fff; letter-spacing: 0.06em; line-height: 1.5; } .facility-panel-subitems { display: grid; grid-template-columns: 1fr 1fr; gap: 8px var(--s-5); margin-bottom: var(--s-6); font-size: 13px; color: #fff; letter-spacing: 0.04em; list-style: none; padding: 0; } .facility-panel-subitems li { line-height: 1.6; } .facility-panel-desc { font-size: 13.5px; line-height: 1.95; color: rgba(255, 255, 255, 0.88); margin: 0 0 var(--s-6); letter-spacing: 0.03em; } .facility-panel-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; background: #fff; color: var(--ink); padding: 14px 24px 14px 32px; border-radius: 999px; font-family: var(--font-en-sans); letter-spacing: 0.18em; font-size: 12px; font-weight: 400; min-width: 200px; transition: transform 0.25s ease, background 0.25s ease; } .facility-panel-cta:hover { transform: translateY(-2px); background: #f0f0f0; } .facility-panel-cta-arrow { width: 26px; height: 26px; background: var(--ink); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; transition: transform 0.25s ease; } .facility-panel-cta:hover .facility-panel-cta-arrow { transform: translateX(3px); } .facility-empty { text-align: center; padding: var(--s-9) 0; color: var(--ink-mute); font-size: 14px; } /* ============================================ FACILITY SINGLE — 浅い概要紹介 (フォールバック表示) external_url 設定時は wp_redirect でこのテンプレに到達しない ============================================ */ .facility-single-main { background: var(--bg-pure); } .facility-single-hero { position: relative; height: 64vh; min-height: 460px; background-color: var(--ink); background-size: cover; background-position: center; } .facility-single-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%); z-index: 1; } .facility-single-hero .container { position: relative; height: 100%; display: flex; align-items: flex-end; z-index: 2; } .facility-single-hero-meta { color: #fff; padding-bottom: clamp(32px, 5vw, 56px); max-width: 720px; } .facility-single-num { font-family: var(--font-en-serif); font-style: italic; font-size: 14px; letter-spacing: 0.3em; margin-bottom: var(--s-3); opacity: 0.9; } .facility-single-name-en { font-family: var(--font-en-serif); font-style: italic; font-size: clamp(18px, 2vw, 22px); letter-spacing: 0.15em; margin-bottom: var(--s-2); opacity: 0.95; line-height: 1.4; } .facility-single-name-jp { font-family: var(--font-jp-mincho); font-size: clamp(28px, 4vw, 38px); font-weight: 500; letter-spacing: 0.08em; line-height: 1.4; margin: 0; } .facility-single-body { background: var(--bg-pure); padding-block: clamp(64px, 8vw, 100px); } .facility-single-body .container { max-width: 720px; } .facility-single-catch { font-family: var(--font-jp-mincho); font-size: clamp(18px, 2.4vw, 22px); line-height: 1.9; text-align: center; color: var(--ink); letter-spacing: 0.06em; font-weight: 500; margin: 0 0 var(--s-7); } .facility-single-prose { font-size: 15px; line-height: 2.1; color: var(--ink); letter-spacing: 0.03em; margin-bottom: var(--s-9); } .facility-single-prose p { margin-bottom: 1.5em; } .facility-single-prose p:last-child { margin-bottom: 0; } .facility-single-back-wrap { text-align: center; } .facility-single-back { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-en-sans); font-size: 12px; letter-spacing: 0.2em; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--ink); transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .facility-single-back:hover { gap: 22px; color: var(--green-deep); border-color: var(--green-deep); } .facility-single-back-arrow { font-size: 14px; transition: transform 0.25s ease; } .facility-single-back:hover .facility-single-back-arrow { transform: translateX(-3px); } /* ============================================ NETWORK DIAGRAM (防災ページ用 / カミニシ風) rich-content 内に