@charset "UTF-8"; /* * ===================================================================== * イベント21 拠点トップページ共通スタイルシート * style.css * * 【複製ガイド】 * 新拠点を追加するときは以下の手順だけでOKです： * 1. 「★ 拠点カラー定義」セクションに新拠点の :root ブロックを追加 * 2. HTMLのを等に変更 * 3. HTML内の拠点固有テキスト（電話番号・住所・担当者名など）を差し替え * 4. 拠点固有の画像パスを差し替え * それだけで別拠点サイトが完成します。CSSの大部分は共通で使い回せます。 * * ファイル構成（セクション順） * 1. 共通リセット・ベース * 2. ★ 拠点カラー定義（← 拠点複製時はここだけ追加） * 3. 拠点カラー適用（body クラスによる上書き） * 4. 固定ヘッダー（site-header） * 5. ヒーローヘッダー（header / heroheader_title） * 6. 共通パーツ（ラベル・見出し・ボタン・リビール） * 7. ABOUTセクション * 8. シーン別セクション（nara_eventscene） * 9. PLANSセクション * 10. RENTAL PRODUCTSセクション * 11. WORKSスライダーセクション * 12. VOICESセクション * 13. FLOWセクション * 14. FAQセクション * 15. MESSAGEセクション * 16. CONTACT + RECRUITセクション * 17. フッター * 18. スクロールアニメーション（inview） * 19. レスポンシブ * ===================================================================== */ /* ===================================================================== 1. 共通リセット・ベース ===================================================================== */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0.05em; color: #292929; background-color: #ffffff; overflow-x: hidden; line-height: 1.7; } img { display: block; width: 100%; max-width: 100%; } img.fit { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } a { text-decoration: none; color: #292929; } a:active { color: #292929; } a:focus { outline: none; } /* ===================================================================== 2. ★ 拠点カラー定義 ----------------------------------------------------------------- 【複製ガイド】新拠点を追加する場合は、このブロックをコピーしてクラス名と色だけ変えてください。変数名はすべて共通（--fe21-concept 等）なので HTML側のbodyクラスを変えるだけで自動的に切り替わります。拠点一覧（body に付けるクラス）： .fukuoka-page … 福岡（オレンジ系） .hokkaido-page … 北海道（水色系） .kumamoto-page … 熊本（赤系） ※ 今後追加する場合はここに追記 ===================================================================== */ /* * 以下は全拠点共通の変数（拠点ごとに変えない色） * body に直接指定するか、共通セレクタで定義します */ body { --fe21-black: #111111; --fe21-mid: #3a3a3a; --fe21-gray: #666666; --fe21-lgray: #999999; --fe21-border: #e8e8e8; --fe21-bg: #f7f7f7; --fe21-white: #ffffff; --fe21-text: #222222; } /* --- 福岡（デフォルト / オレンジ系） --- */ .fukuoka-page { --fe21-concept: #f7921e; --fe21-concept-dk: #d97a0e; --fe21-midashi: #ffb35a; --fe21-pale: #fff8f0; --fe21-pale2: #fff3e3; } /* --- 熊本（赤系） --- */ .kumamoto-page { --fe21-concept: #c0392b; /* メインカラー：熊本城・火の国をイメージした赤 */ --fe21-concept-dk: #962d22; /* ダーク */ --fe21-midashi: #e87e77; /* アクセント：明るめの赤 */ --fe21-pale: #fff5f4; /* 淡い背景 */ --fe21-pale2: #ffecea; /* より薄い背景 */ } /* --- 熊本（赤系） --- */ .chiba-page { --fe21-concept: #8f1bbd; /* メインカラー：熊本城・火の国をイメージした赤 */ --fe21-concept-dk: #640b86; /* ダーク */ --fe21-midashi: #c152ec; /* アクセント：明るめの赤 */ --fe21-pale: #f9f4ff; /* 淡い背景 */ --fe21-pale2: #f8eaff; /* より薄い背景 */ } /* ===================================================================== 3. 拠点カラー適用（固定ヘッダー） ----------------------------------------------------------------- ヘッダーの枠線・ロゴ・ナビの強調色などに拠点カラーを適用します。デザインは変わらず、色だけが切り替わります。 ===================================================================== */ /* ヘッダー下枠線 */ .fukuoka-page .site-header, .hokkaido-page .site-header, .kumamoto-page .site-header { border-bottom-color: var(--fe21-concept); } /* ロゴマーク背景 */ .fukuoka-page .site-header__logo-mark, .hokkaido-page .site-header__logo-mark, .kumamoto-page .site-header__logo-mark { background: var(--fe21-concept); } /* ロゴサブテキスト */ .fukuoka-page .site-header__logo-text span, .hokkaido-page .site-header__logo-text span, .kumamoto-page .site-header__logo-text span { color: var(--fe21-concept); } /* ナビ英語ラベル */ .fukuoka-page .nav-label-en, .hokkaido-page .nav-label-en, .kumamoto-page .nav-label-en { color: var(--fe21-concept); } /* ナビホバー背景 */ .fukuoka-page .nav-link:hover, .hokkaido-page .nav-link:hover, .kumamoto-page .nav-link:hover { background: color-mix(in srgb, var(--fe21-concept) 8%, white); } /* ナビアクティブライン */ .fukuoka-page .nav-link::after, .hokkaido-page .nav-link::after, .kumamoto-page .nav-link::after { background: var(--fe21-concept); } /* ドロップダウン上枠 */ .fukuoka-page .dropdown, .hokkaido-page .dropdown, .kumamoto-page .dropdown { border-top-color: var(--fe21-concept); } .fukuoka-page .dropdown-item::after, .hokkaido-page .dropdown-item::after, .kumamoto-page .dropdown-item::after { color: var(--fe21-concept); } .fukuoka-page .dropdown-item:hover, .hokkaido-page .dropdown-item:hover, .kumamoto-page .dropdown-item:hover { background: color-mix(in srgb, var(--fe21-concept) 8%, white); color: var(--fe21-concept); } .fukuoka-page .dropdown-section-label, .hokkaido-page .dropdown-section-label, .kumamoto-page .dropdown-section-label { color: var(--fe21-concept); } /* ブログボタン */ .fukuoka-page .btn-blog .en, .hokkaido-page .btn-blog .en, .kumamoto-page .btn-blog .en { color: var(--fe21-concept); } .fukuoka-page .btn-blog:hover, .hokkaido-page .btn-blog:hover, .kumamoto-page .btn-blog:hover { background: color-mix(in srgb, var(--fe21-concept) 8%, white); } /* 公式サイトボタン */ .fukuoka-page .btn-official, .hokkaido-page .btn-official, .kumamoto-page .btn-official { background: var(--fe21-concept); } .fukuoka-page .btn-official:hover, .hokkaido-page .btn-official:hover, .kumamoto-page .btn-official:hover { background: var(--fe21-concept-dk); } /* モバイルメニュー */ .fukuoka-page .mobile-en, .hokkaido-page .mobile-en, .kumamoto-page .mobile-en { color: var(--fe21-concept); } .fukuoka-page .arrow, .hokkaido-page .arrow, .kumamoto-page .arrow { color: var(--fe21-concept); } .fukuoka-page .mobile-nav-link:active, .hokkaido-page .mobile-nav-link:active, .kumamoto-page .mobile-nav-link:active, .fukuoka-page .mobile-dropdown a:active, .hokkaido-page .mobile-dropdown a:active, .kumamoto-page .mobile-dropdown a:active { background: color-mix(in srgb, var(--fe21-concept) 8%, white); } .fukuoka-page .mobile-dropdown a::after, .hokkaido-page .mobile-dropdown a::after, .kumamoto-page .mobile-dropdown a::after { color: var(--fe21-concept); } .fukuoka-page .mobile-section-label, .hokkaido-page .mobile-section-label, .kumamoto-page .mobile-section-label { color: var(--fe21-concept); } .fukuoka-page .mobile-btn-blog, .hokkaido-page .mobile-btn-blog, .kumamoto-page .mobile-btn-blog { border-color: var(--fe21-concept); background: color-mix(in srgb, var(--fe21-concept) 8%, white); } .fukuoka-page .mobile-btn-blog .en, .hokkaido-page .mobile-btn-blog .en, .kumamoto-page .mobile-btn-blog .en { color: var(--fe21-concept); } .fukuoka-page .mobile-btn-official, .hokkaido-page .mobile-btn-official, .kumamoto-page .mobile-btn-official { background: var(--fe21-concept); } /* ===================================================================== 4. 固定ヘッダー（.site-header） ===================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; border-bottom: 2px solid transparent; /* 色は拠点クラスで注入 */ -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); } .site-header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; height: 72px; width: 100%; } /* ── ロゴ ── */ .site-header__logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; text-decoration: none; padding: 2% 20px; border-right: 1px solid #e8e8e8; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .site-header__logo-mark { width: 38px; height: 38px; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 18px; color: white; font-weight: 700; letter-spacing: -1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; -ms-flex-negative: 0; flex-shrink: 0; /* background は拠点クラスで注入 */ } .site-header__logo:hover .site-header__logo-mark { -webkit-transform: rotate(-5deg) scale(1.05); transform: rotate(-5deg) scale(1.05); } .site-header__logo-text { width: 100%; max-width: 300px; } .site-header__logo-text img { min-width: 200px; } .site-header__logo-text span { display: block; font-size: 9px; font-weight: 400; letter-spacing: 0.05em; /* color は拠点クラスで注入 */ } .site-header__spacer { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } /* ── メインナビゲーション ── */ .site-header__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .nav-item { position: relative; -ms-flex-negative: 0; flex-shrink: 0; } .nav-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 13px; height: 72px; text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-transition: background 0.15s; transition: background 0.15s; gap: 2px; position: relative; } .nav-label-en { font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; /* color は拠点クラスで注入 */ } .nav-label-ja { font-size: max(9px, 0.75vw); font-weight: 500; color: #1a1a1a; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3px; } .nav-label-ja svg { width: 10px; height: 10px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; -ms-flex-negative: 0; flex-shrink: 0; } .nav-item:hover .nav-label-ja svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* アクティブライン（下線） */ .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; /* background は拠点クラスで注入 */ } .nav-link:hover::after, .nav-item:hover .nav-link::after { -webkit-transform: scaleX(1); transform: scaleX(1); } /* ── ドロップダウン ── */ .dropdown { position: absolute; top: calc(72px + 2px); left: 50%; -webkit-transform: translateX(-50%) translateY(8px); transform: translateX(-50%) translateY(8px); background: #fff; border-top: 3px solid transparent; /* 色は拠点クラスで注入 */ -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14); min-width: 240px; padding: 8px 0; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s, visibility 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, visibility 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; transition: opacity 0.2s, transform 0.2s, visibility 0.2s, -webkit-transform 0.2s; z-index: -1; pointer-events: none; display: none; } .nav-item:hover .dropdown { display: block; opacity: 1; visibility: visible; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); pointer-events: auto; z-index: 2000; } .dropdown-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 11px 20px; font-size: 13px; color: #1a1a1a; text-decoration: none; -webkit-transition: background 0.15s, color 0.15s, padding-left 0.15s; transition: background 0.15s, color 0.15s, padding-left 0.15s; gap: 12px; white-space: nowrap; } .dropdown-item::after { content: '›'; font-size: 16px; -ms-flex-negative: 0; flex-shrink: 0; } .dropdown-item:hover { padding-left: 26px; } .dropdown-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 20px 4px; border-top: 1px solid #e8e8e8; margin-top: 4px; opacity: 0.7; } .dropdown-section-label:first-child { border-top: none; margin-top: 0; padding-top: 8px; } /* グリッドドロップダウン（2列・3列） */ .dropdown--grid-2, .dropdown--grid-3 { min-width: unset; padding: 12px; } .dropdown__grid { display: -ms-grid; display: grid; gap: 4px; } .dropdown--grid-2 .dropdown__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); width: 300px; } .dropdown--grid-3 .dropdown__grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); width: 440px; } .dropdown--grid-2 .dropdown-item, .dropdown--grid-3 .dropdown-item { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 14px; border: 1px solid #e8e8e8; border-radius: 6px; font-size: 12px; -webkit-transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s; } .dropdown--grid-2 .dropdown-item::after, .dropdown--grid-3 .dropdown-item::after { display: none; } .dropdown--grid-2 .dropdown-item:hover, .dropdown--grid-3 .dropdown-item:hover { padding-left: 14px; } .dropdown--grid-2 .dropdown-section-label, .dropdown--grid-3 .dropdown-section-label { grid-column: 1 / -1; padding: 4px 4px 6px; } /* ── 右エリア（ブログ・公式サイトボタン） ── */ .site-header__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-negative: 0; flex-shrink: 0; border-left: 1px solid #e8e8e8; } .btn-blog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 22px; text-decoration: none; border-right: 1px solid #e8e8e8; gap: 2px; -webkit-transition: background 0.15s; transition: background 0.15s; min-width: 90px; } .btn-blog .en { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } .btn-blog .ja { font-size: 12px; font-weight: 600; color: #1a1a1a; } .btn-official { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 20px; text-decoration: none; gap: 4px; -webkit-transition: background 0.15s; transition: background 0.15s; min-width: 110px; /* background は拠点クラスで注入 */ } .btn-official .label { font-size: 11px; font-weight: 700; color: white; white-space: nowrap; } .logo-placeholder-box { width: 100px; height: 24px; border: 0px dashed rgba(255, 255, 255, 0.55); border-radius: 4px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 8px; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.04em; } /* ── ハンバーガーボタン ── */ .site-header__hamburger { display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; cursor: pointer; padding: 0 18px; border-left: 1px solid #e8e8e8; min-width: 56px; -ms-flex-negative: 0; flex-shrink: 0; background: none; border-top: none; border-right: none; border-bottom: none; margin-left: auto; } .site-header__hamburger span { display: block; width: 22px; height: 2px; background: #1a1a1a; border-radius: 2px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform-origin: center; transform-origin: center; } .site-header__hamburger.active span:nth-child(1) { -webkit-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); } .site-header__hamburger.active span:nth-child(2) { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } .site-header__hamburger.active span:nth-child(3) { -webkit-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); } /* ── モバイルメニュー ── */ .mobile-menu { display: none; position: fixed; top: calc(72px + 2px); left: 0; right: 0; bottom: 0; background: #fff; z-index: 999; overflow-y: auto; padding: 0 0 40px; } .mobile-menu.open { display: block; } .mobile-nav-item { border-bottom: 1px solid #e8e8e8; } .mobile-nav-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 16px 24px; font-size: 14px; font-weight: 600; color: #1a1a1a; text-decoration: none; cursor: pointer; background: none; width: 100%; border: none; text-align: left; font-family: 'Noto Sans JP', sans-serif; } .mobile-en { font-size: 10px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 2px; /* color は拠点クラスで注入 */ } .arrow { font-size: 18px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; -ms-flex-negative: 0; flex-shrink: 0; /* color は拠点クラスで注入 */ } .mobile-nav-item.open .arrow { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .mobile-dropdown { display: none; background: #fafafa; border-top: 1px solid #e8e8e8; } .mobile-nav-item.open .mobile-dropdown { display: block; } .mobile-dropdown a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 13px 32px; font-size: 13px; color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #e8e8e8; font-family: 'Noto Sans JP', sans-serif; } .mobile-dropdown a::after { content: '›'; font-size: 16px; } .mobile-dropdown a:last-child { border-bottom: none; } .mobile-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 32px 4px; opacity: 0.7; /* color は拠点クラスで注入 */ } .mobile-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; padding: 20px; } .mobile-btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 14px 12px; border-radius: 8px; text-decoration: none; gap: 4px; font-family: 'Noto Sans JP', sans-serif; } .mobile-btn-blog { border: 1.5px solid transparent; /* 色は拠点クラスで注入 */ } .mobile-btn-blog .en { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; } .mobile-btn-blog .ja { font-size: 13px; font-weight: 700; color: #1a1a1a; } .mobile-btn-official { /* background は拠点クラスで注入 */ } .mobile-logo-placeholder { width: 60px; height: 18px; border: 1.5px dashed rgba(255, 255, 255, 0.6); border-radius: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 7px; color: rgba(255, 255, 255, 0.7); } .mobile-btn-official .ja { font-size: 12px; font-weight: 700; color: white; } /* ── ヘッダー表示切り替え（レスポンシブ） ── */ @media (min-width: 1101px) { .site-header__hamburger { display: none !important; } .site-header__nav, .site-header__right { display: -webkit-box; display: -ms-flexbox; display: flex; } .mobile-menu { display: none !important; } } @media (max-width: 1100px) { .site-header__hamburger { display: -webkit-box; display: -ms-flexbox; display: flex; } .site-header__nav { display: none; } .site-header__right { display: none; } .site-header__logo { border-right: none; } } /* ===================================================================== 5. ヒーローヘッダー（

/ .heroheader_title） ----------------------------------------------------------------- 【複製ガイド】画像パス（heroheaderfukuoka1.jpg 等）とh1テキストを拠点別に差し替えます。 ===================================================================== */ header { width: 100%; aspect-ratio: 16 / 9; max-height: 800px; position: relative; overflow: hidden; } header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 1; } /* クロスフェードスライドショー */ header img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0; -webkit-transform: scale(1); transform: scale(1); -webkit-animation: fadeScale 30s infinite ease-in-out; animation: fadeScale 30s infinite ease-in-out; will-change: opacity, transform; } header img:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } header img:nth-of-type(2) { -webkit-animation-delay: 15s; animation-delay: 15s; } @-webkit-keyframes fadeScale { 0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 5% { opacity: 1; -webkit-transform: scale(1.02); transform: scale(1.02); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 60% { opacity: 0; -webkit-transform: scale(1.07); transform: scale(1.07); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes fadeScale { 0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 5% { opacity: 1; -webkit-transform: scale(1.02); transform: scale(1.02); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 60% { opacity: 0; -webkit-transform: scale(1.07); transform: scale(1.07); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } /* キャッチコピー */ .heroheader_title { color: #ffffff; position: absolute; left: 10%; bottom: 1%; z-index: 2; } .heroheader_title h1 { font-size: clamp(1.5rem, calc(2vw + 1rem), 5rem); margin: 2px 0; } .heroheader_title h2 { position: relative; } .heroheader_title h2::after { position: absolute; content: ""; display: block; width: 200px; height: 1px; background-color: #fff; top: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: -250px; } /* ===================================================================== 6. 共通パーツ（ラベル・見出し・ボタン・リビールアニメーション） ===================================================================== */ /* LABEL（セクション小見出し） */ .fe21-lbl { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.28em; color: var(--fe21-concept); text-transform: uppercase; margin-bottom: 12px; } .fe21-lbl::before { content: ''; display: block; width: 22px; height: 2px; background: var(--fe21-concept); -ms-flex-negative: 0; flex-shrink: 0; } .fe21-lbl-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* 大見出し */ .fe21-ttl { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.3; letter-spacing: -0.01em; color: var(--fe21-black); } /* アクセントカラー文字 */ .fe21-ac { color: var(--fe21-concept); } /* ボタン（塗りつぶし） */ .fe21-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.06em; padding: 14px 32px; border: 2px solid var(--fe21-concept); background: var(--fe21-concept); color: #fff; cursor: pointer; -webkit-transition: background 0.25s, border-color 0.25s; transition: background 0.25s, border-color 0.25s; text-decoration: none; } .fe21-btn::after { content: '→'; } .fe21-btn:hover { background: var(--fe21-concept-dk); border-color: var(--fe21-concept-dk); } /* ボタン（アウトライン） */ .fe21-btn-ol { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; padding: 12px 28px; border: 2px solid var(--fe21-concept); background: transparent; color: var(--fe21-concept); -webkit-transition: background 0.25s, color 0.25s; transition: background 0.25s, color 0.25s; text-decoration: none; } .fe21-btn-ol::after { content: '→'; } .fe21-btn-ol:hover { background: var(--fe21-concept); color: #fff; } /* リビールアニメーション */ .fe21-rv { opacity: 0; -webkit-transform: translateY(24px); transform: translateY(24px); -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease; transition: opacity 0.6s ease, -webkit-transform 0.6s ease; transition: opacity 0.6s ease, transform 0.6s ease; transition: opacity 0.6s ease, transform 0.6s ease, -webkit-transform 0.6s ease; } .fe21-rv.fe21-on { opacity: 1; -webkit-transform: none; transform: none; } /* ディレイクラス */ .fe21-d1 { -webkit-transition-delay: 0.08s; transition-delay: 0.08s; } .fe21-d2 { -webkit-transition-delay: 0.16s; transition-delay: 0.16s; } .fe21-d3 { -webkit-transition-delay: 0.24s; transition-delay: 0.24s; } .fe21-d4 { -webkit-transition-delay: 0.32s; transition-delay: 0.32s; } .fe21-d5 { -webkit-transition-delay: 0.40s; transition-delay: 0.40s; } /* ===================================================================== 7. ABOUT セクション ===================================================================== */ .fe21-about { background: var(--fe21-pale); } /* 上段バナー */ .fe21-about-banner { position: relative; overflow: hidden; background: var(--fe21-pale2); padding: 72px 7vw; display: -ms-grid; display: grid; -ms-grid-columns: 1fr auto; grid-template-columns: 1fr auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 48px; } /* 斜め背景装飾 */ .fe21-about-banner::before { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: var(--fe21-pale); -webkit-clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%); z-index: 0; } .fe21-about-banner-text { position: relative; z-index: 1; max-width: 600px; } .fe21-about-banner-text .fe21-lbl { color: var(--fe21-concept-dk); } .fe21-about-banner-text .fe21-lbl::before { background: var(--fe21-concept-dk); } .fe21-about-ttl { font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 900; color: var(--fe21-black) !important; line-height: 1.3; margin-bottom: 20px; } .fe21-about-ttl .fe21-ac { color: var(--fe21-concept); } .fe21-about-banner-lead { font-size: 0.9rem; color: var(--fe21-gray); line-height: 2; } /* 九州地図SVG */ .fe21-kyushu-wrap { position: relative; z-index: 1; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; } .fe21-kyushu-wrap svg { width: 100%; height: auto; -webkit-filter: drop-shadow(0 8px 24px rgba(247, 146, 30, 0.25)); filter: drop-shadow(0 8px 24px rgba(247, 146, 30, 0.25)); } /* 下段：テキスト＋写真 */ .fe21-about-body { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; margin-bottom: 8%; } .fe21-about-copy { padding: 56px 7vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 18px; } .fe21-about-divider { width: 36px; height: 2px; background: var(--fe21-concept); } .fe21-about-copy p { font-size: 0.9rem; color: var(--fe21-gray); line-height: 2.1; } .fe21-about-feats { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } .fe21-about-feat { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 10px; font-size: 1rem; color: var(--fe21-mid); line-height: 1.6; } .fe21-about-feat::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--fe21-concept); margin-top: 6px; -ms-flex-negative: 0; flex-shrink: 0; } /* 現場写真グリッド */ .fe21-about-imgs { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: 1fr 1fr; grid-template-rows: 1fr 1fr; } .fe21-about-img { overflow: hidden; position: relative; } .fe21-about-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.6s; transition: -webkit-transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; } .fe21-about-img:hover img { -webkit-transform: scale(1.07); transform: scale(1.07); } .fe21-about-cap { position: absolute; bottom: 0; left: 0; right: 0; background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.6)), to(transparent)); background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); color: #fff; font-size: 1rem; font-weight: 500; padding: 20px 10px 8px; letter-spacing: 0.04em; } /* ===================================================================== 8. シーン別セクション（.nara_eventscene） ----------------------------------------------------------------- 【複製ガイド】各拠点で背景画像（fukuokatextbox1 等）のみ差し替えます。背景画像クラスは HTML の