/* ============================================================ cvg.css — CVG サイト共通スタイルシート 配置場所: /css/cvg.css 読み込み: 全ページの に以下を記述 ============================================================ */ /* ============================================================ 1. CSS カスタムプロパティ（ブランドカラー・共通変数） ============================================================ */ :root { /* ブランドカラー */ --cvg-navy: #0d1b3e; --cvg-blue: #1a3a7c; --cvg-accent: #e63946; --cvg-gold: #d4a017; --cvg-light: #f5f7fa; --cvg-text: #1a1a2e; --cvg-muted: #5a6a8a; --cvg-border: rgba(0, 0, 0, 0.1); /* 地域カラー（tournament ページで JS が動的に更新） */ --area-color: #546e7a; --area-text: #fff; /* 角丸 */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; /* シャドウ */ --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.07); --sh-md: 0 4px 20px rgba(0, 0, 0, 0.10); --sh-lg: 0 8px 40px rgba(0, 0, 0, 0.13); /* トランジション */ --t: 0.25s ease; } /* ============================================================ 2. リセット・ベース ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Noto Sans JP', sans-serif; color: var(--cvg-text); font-size: 16px; line-height: 1.8; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* ============================================================ 3. レイアウト ユーティリティ ============================================================ */ /* コンテナ（最大幅・中央寄せ・横パディング） */ .cvg-wrap, .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* セクション共通 */ .cvg-sec, .section { padding: 80px 0; } /* ライト背景セクション */ .cvg-sec-light, .section-light { background: var(--cvg-light); } /* セクション ラベル（英字上部テキスト） */ .section-label { font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--cvg-accent); margin-bottom: 10px; } /* セクション タイトル */ .section-title { font-family: 'Noto Serif JP', serif; font-size: clamp(20px, 3vw, 32px); font-weight: 900; color: var(--cvg-navy); margin-bottom: 24px; } /* ============================================================ 4. フェードイン アニメーション ============================================================ */ /* about / application 系 */ .cf { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; } .cf.in { opacity: 1; transform: none; } /* tournament 系 */ .fade-in { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; } .fade-in.visible { opacity: 1; transform: none; } /* ============================================================ 5. ページトップへ戻るボタン ============================================================ */ /* about / application / alumni 系 (#cvg-btt) */ #cvg-btt { position: fixed; bottom: 28px; right: 28px; z-index: 99999; width: 48px; height: 48px; border-radius: 50%; background: var(--cvg-navy); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; } #cvg-btt.show { opacity: 1; transform: none; pointer-events: auto; } #cvg-btt:hover { background: var(--cvg-blue); } #cvg-btt svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* top / tournament 系 (#cvg-back-to-top / #back-to-top) */ #cvg-back-to-top, #back-to-top { position: fixed; bottom: 28px; right: 28px; z-index: 9999; width: 48px; height: 48px; border-radius: 50%; background: var(--cvg-navy); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; } #cvg-back-to-top.show, #back-to-top.show { opacity: 1; transform: none; pointer-events: auto; } #cvg-back-to-top:hover, #back-to-top:hover { background: var(--cvg-blue); } #cvg-back-to-top svg, #back-to-top svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ 6. パンくずリスト ============================================================ */ .cvg-about-bc, .cvg-app-bc, .cvg-tour-bc { background: var(--cvg-light); border-bottom: 1px solid var(--cvg-border); } .cvg-about-bc-inner, .cvg-app-bc-inner, .cvg-tour-bc-inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cvg-muted); } .cvg-about-bc a, .cvg-app-bc a, .cvg-tour-bc a { color: var(--cvg-muted); text-decoration: none; } .cvg-about-bc a:hover, .cvg-app-bc a:hover, .cvg-tour-bc a:hover { color: var(--cvg-blue); } /* ============================================================ 7. ボタン共通 ============================================================ */ /* プライマリボタン */ .cvg-btn-primary, .cvg-about-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 36px; background: var(--cvg-accent); color: #fff; border-radius: 40px; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 20px rgba(230, 57, 70, 0.4); transition: all var(--t); border: none; cursor: pointer; } .cvg-btn-primary:hover, .cvg-about-btn-primary:hover { background: #c1121f; transform: translateY(-2px); } /* ゴーストボタン */ .cvg-btn-ghost, .cvg-about-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 40px; font-size: 16px; font-weight: 600; text-decoration: none; transition: all var(--t); cursor: pointer; } .cvg-btn-ghost:hover, .cvg-about-btn-ghost:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } /* Zoho 組み込みボタン上書き（Zoho Sites 利用時） */ .zpbutton.zpbutton-type-primary { background-color: var(--cvg-accent) !important; border-color: var(--cvg-accent) !important; border-radius: 40px !important; font-weight: 700 !important; transition: all var(--t) !important; } .zpbutton.zpbutton-type-primary:hover { background-color: #c1121f !important; transform: translateY(-2px) !important; } /* ============================================================ 8. ナビゲーションカード（TOPページ） ============================================================ */ .cvg-nav-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cvg-border); border-radius: var(--r-lg); padding: 28px 24px; text-decoration: none; color: var(--cvg-text); transition: all var(--t); position: relative; overflow: hidden; } .cvg-nav-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cvg-accent); transform: scaleX(0); transition: transform var(--t); } .cvg-nav-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(230, 57, 70, 0.2); } .cvg-nav-card:hover::before { transform: scaleX(1); } .cvg-nav-card h3 { font-size: 17px; font-weight: 700; color: var(--cvg-navy); margin: 14px 0 8px; } .cvg-nav-card p { font-size: 13px; color: var(--cvg-muted); line-height: 1.65; flex: 1; } .cvg-nav-card-arrow { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--cvg-accent); } .cvg-nav-icon { width: 52px; height: 52px; background: var(--cvg-light); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 24px; transition: background var(--t); } .cvg-nav-card:hover .cvg-nav-icon { background: rgba(230, 57, 70, 0.1); } @media (max-width: 768px) { .cvg-nav-card { padding: 20px; } } /* ============================================================ 9. 開催スケジュール カード（TOPページ） ============================================================ */ .cvg-schedule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .cvg-sched-card { background: #fff; border: 1px solid var(--cvg-border); border-radius: var(--r-md); padding: 22px; position: relative; overflow: hidden; } .cvg-sched-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; } /* 地域別アクセントバー */ .cvg-sched-card.hokkaido::before { background: #00838F; } .cvg-sched-card.tohoku::before { background: #2E7D32; } .cvg-sched-card.tokyo::before { background: #6A1B9A; } .cvg-sched-card.chubu::before { background: #EF6C00; } .cvg-sched-card.osaka::before { background: #FF8F00; } .cvg-sched-card.chugoku::before { background: #C62828; } .cvg-sched-card.shikoku::before { background: #1565C0; } .cvg-sched-card.kyushu::before { background: #D32F2F; } .cvg-sched-area { font-size: 12px; font-weight: 700; letter-spacing: 1px; margin-bottom: 5px; } .cvg-sched-name { font-size: 18px; font-weight: 700; color: var(--cvg-navy); margin-bottom: 14px; } .cvg-sched-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--cvg-border); font-size: 13px; gap: 12px; } .cvg-sched-row:last-of-type { border-bottom: none; } .cvg-sched-label { color: var(--cvg-muted); flex-shrink: 0; font-weight: 500; } .cvg-sched-val { text-align: right; color: var(--cvg-text); font-weight: 500; } .cvg-sched-prize { display: inline-block; background: rgba(212, 160, 23, 0.12); color: #8a6200; border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 700; margin-top: 12px; } .cvg-sched-warn { font-size: 11px; color: var(--cvg-accent); font-weight: 700; } .cvg-sched-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--cvg-blue); text-decoration: none; } .cvg-sched-tbd { color: var(--cvg-muted); font-style: italic; } @media (max-width: 768px) { .cvg-schedule-grid { grid-template-columns: 1fr; } } /* ============================================================ 10. ブログカード（TOPページ / TOPICSページ） ============================================================ */ .cvg-blog-card { background: #fff; border: 1px solid var(--cvg-border); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: var(--cvg-text); display: flex; flex-direction: column; transition: box-shadow var(--t), transform var(--t); } .cvg-blog-card:hover { box-shadow: var(--sh-md); transform: translateY(-4px); } .cvg-blog-thumb { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 48px; } .cvg-blog-body { padding: 18px; flex: 1; display: flex; flex-direction: column; } .cvg-blog-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--cvg-muted); } .cvg-blog-cat { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; } .cvg-blog-cat.info { background: rgba(26, 58, 124, 0.1); color: #1a3a7c; } .cvg-blog-cat.interview { background: rgba(46, 125, 50, 0.1); color: #2E7D32; } .cvg-blog-title { font-size: 15px; font-weight: 700; color: var(--cvg-navy); line-height: 1.45; flex: 1; } .cvg-blog-card:hover .cvg-blog-title { color: var(--cvg-blue); } /* Zoho Blog ウィジェット 上書き（Zoho Sites 利用時） */ .cvg-blog-grid .theme-blog-list-wrapper { padding: 0 !important; } .cvg-blog-grid .theme-blog-post-wrapper { border-radius: var(--r-md) !important; overflow: hidden !important; border: 1px solid var(--cvg-border) !important; transition: box-shadow var(--t), transform var(--t) !important; } .cvg-blog-grid .theme-blog-post-wrapper:hover { box-shadow: var(--sh-md) !important; transform: translateY(-4px) !important; } .cvg-blog-grid .theme-blog-post-title a { font-weight: 700 !important; color: var(--cvg-navy) !important; } .cvg-blog-grid .theme-blog-post-title a:hover { color: var(--cvg-blue) !important; } /* ============================================================ 11. ステップ フロー（TOPページ / 応募ページ） ============================================================ */ .cvg-steps-wrap { display: flex; align-items: flex-start; gap: 0; position: relative; } .cvg-steps-line { position: absolute; top: 28px; left: 0; right: 0; height: 2px; background: var(--cvg-border); z-index: 0; } .cvg-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; position: relative; z-index: 1; } .cvg-step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--cvg-navy); color: #fff; font-size: 20px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--cvg-navy); margin-bottom: 14px; } .cvg-step h3 { font-size: 15px; font-weight: 700; color: var(--cvg-navy); margin-bottom: 8px; } .cvg-step p { font-size: 13px; color: var(--cvg-muted); line-height: 1.65; } @media (max-width: 640px) { .cvg-steps-wrap { flex-direction: column; } .cvg-steps-line { display: none; } } /* ============================================================ 12. エリアマップ（応募ページ） ============================================================ */ .cvg-am-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; } .cvg-am-map-box { position: relative; background: #fff; border: 1px solid var(--cvg-border); border-radius: var(--r-md); padding: 20px; box-shadow: var(--sh-sm); } .cvg-am-region { fill: #dde4ee; stroke: #fff; stroke-width: 1.5; cursor: pointer; transition: fill 0.18s ease, filter 0.18s ease; } .cvg-am-region:hover, .cvg-am-region:focus { outline: none; } /* デフォルト淡色 */ .cvg-am-region.hokkaido { fill: #b2dfdb; } .cvg-am-region.tohoku { fill: #c8e6c9; } .cvg-am-region.tokyo { fill: #ce93d8; } .cvg-am-region.chubu { fill: #ffcc80; } .cvg-am-region.osaka { fill: #ffe082; } .cvg-am-region.chugoku { fill: #ef9a9a; } .cvg-am-region.shikoku { fill: #90caf9; } .cvg-am-region.kyushu { fill: #ef9a9a; } /* ホバー・アクティブ */ .cvg-am-region.hokkaido:hover, .cvg-am-region.hokkaido:focus, .cvg-am-region.hokkaido.cvg-am-active { fill: #00838F; filter: drop-shadow(0 0 8px rgba(0,131,143,0.6)); } .cvg-am-region.tohoku:hover, .cvg-am-region.tohoku:focus, .cvg-am-region.tohoku.cvg-am-active { fill: #2E7D32; filter: drop-shadow(0 0 8px rgba(46,125,50,0.6)); } .cvg-am-region.tokyo:hover, .cvg-am-region.tokyo:focus, .cvg-am-region.tokyo.cvg-am-active { fill: #6A1B9A; filter: drop-shadow(0 0 8px rgba(106,27,154,0.6)); } .cvg-am-region.chubu:hover, .cvg-am-region.chubu:focus, .cvg-am-region.chubu.cvg-am-active { fill: #EF6C00; filter: drop-shadow(0 0 8px rgba(239,108,0,0.6)); } .cvg-am-region.osaka:hover, .cvg-am-region.osaka:focus, .cvg-am-region.osaka.cvg-am-active { fill: #FF8F00; filter: drop-shadow(0 0 8px rgba(255,143,0,0.6)); } .cvg-am-region.chugoku:hover, .cvg-am-region.chugoku:focus, .cvg-am-region.chugoku.cvg-am-active { fill: #C62828; filter: drop-shadow(0 0 8px rgba(198,40,40,0.6)); } .cvg-am-region.shikoku:hover, .cvg-am-region.shikoku:focus, .cvg-am-region.shikoku.cvg-am-active { fill: #1565C0; filter: drop-shadow(0 0 8px rgba(21,101,192,0.6)); } .cvg-am-region.kyushu:hover, .cvg-am-region.kyushu:focus, .cvg-am-region.kyushu.cvg-am-active { fill: #D32F2F; filter: drop-shadow(0 0 8px rgba(211,47,47,0.6)); } .cvg-am-tooltip { position: absolute; background: rgba(13, 27, 62, 0.94); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 10; transition: opacity 0.15s; } .cvg-am-list { display: flex; flex-direction: column; gap: 6px; } .cvg-am-list-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--cvg-border); border-radius: var(--r-md); cursor: pointer; text-decoration: none; color: var(--cvg-text); transition: all var(--t); } .cvg-am-list-item:hover, .cvg-am-list-item.cvg-am-highlight { border-color: var(--cvg-blue); box-shadow: var(--sh-sm); transform: translateX(4px); } .cvg-am-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .cvg-am-region-name { font-weight: 700; font-size: 14px; } .cvg-am-note { font-size: 12px; color: var(--cvg-muted); margin-top: 2px; } @media (max-width: 768px) { .cvg-am-wrap { grid-template-columns: 1fr; } } /* ============================================================ 13. alumni グリッド・モーダル（起業した先輩一覧） ============================================================ */ .alumni-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 1024px) { .alumni-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .alumni-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* タブバー */ .alumni-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 14px 24px 10px; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; background: #fff; border-bottom: 1px solid var(--cvg-border); position: sticky; top: 0; z-index: 100; } .alumni-tabs::-webkit-scrollbar { display: none; } /* モーダル */ .alumni-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .alumni-modal.open { opacity: 1; pointer-events: auto; } .alumni-modal-box { background: #fff; border-radius: 20px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative; transform: scale(0.95); transition: transform 0.2s; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .alumni-modal.open .alumni-modal-box { transform: scale(1); } @media (max-width: 640px) { .alumni-modal { align-items: flex-end; padding: 0; } .alumni-modal-box { max-width: 100%; border-radius: 20px 20px 0 0; max-height: 85vh; transform: translateY(40px); } .alumni-modal.open .alumni-modal-box { transform: translateY(0); } } /* ============================================================ 14. 大会タブナビ（各大会概要ページ） ============================================================ */ .area-tabs-wrap { background: #fff; border-bottom: 2px solid var(--cvg-border); position: sticky; top: 70px; z-index: 900; transition: top var(--t); } .area-tabs { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; } .area-tabs::-webkit-scrollbar { display: none; } .area-tab { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 14px 18px; background: none; border: none; border-bottom: 3px solid transparent; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--cvg-muted); transition: color var(--t), border-color var(--t); font-family: 'Noto Sans JP', sans-serif; white-space: nowrap; } .area-tab[aria-selected="true"] { color: var(--color, var(--cvg-navy)); border-bottom-color: var(--color, var(--cvg-navy)); } .area-tab:hover { color: var(--color, var(--cvg-navy)); } .area-tab-gem { font-size: 16px; } /* ============================================================ 15. 大会詳細カード（各大会概要ページ） ============================================================ */ .info-card { background: #fff; border: 1px solid var(--cvg-border); border-radius: var(--r-md); padding: 22px; display: flex; flex-direction: column; gap: 4px; } .info-card-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--cvg-muted); } .info-card-value { font-size: 18px; font-weight: 700; color: var(--cvg-navy); line-height: 1.4; } .info-card-sub { font-size: 13px; color: var(--cvg-muted); } /* 過去大会アーカイブ */ .archive-grid { display: flex; flex-wrap: wrap; gap: 10px; } .archive-item { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: #fff; border: 1px solid var(--cvg-border); border-radius: 40px; text-decoration: none; color: var(--cvg-text); font-size: 14px; font-weight: 500; transition: all var(--t); } .archive-item:hover { border-color: var(--cvg-blue); color: var(--cvg-blue); box-shadow: var(--sh-sm); } .archive-icon { font-size: 16px; } .archive-year { font-weight: 700; } /* エリア CTA */ .area-cta { text-align: center; padding: 64px 24px; border-radius: var(--r-lg); color: #fff; background: var(--area-color); } .area-cta h2 { font-family: 'Noto Serif JP', serif; font-size: clamp(22px, 3vw, 34px); font-weight: 900; margin-bottom: 12px; } .area-cta p { font-size: 16px; opacity: 0.85; margin-bottom: 32px; line-height: 1.8; } /* ============================================================ 16. Zoho Accordion 上書き（Zoho Sites 利用時） ============================================================ */ .cvg-app-faq .zpaccordion-item { border: 1px solid var(--cvg-border) !important; border-radius: var(--r-md) !important; margin-bottom: 6px !important; overflow: hidden !important; } .cvg-app-faq .zpaccordion-header { background: #fff !important; padding: 16px 20px !important; font-weight: 700 !important; font-size: 14px !important; color: var(--cvg-navy) !important; } .cvg-app-faq .zpaccordion-active .zpaccordion-header { background: var(--cvg-light) !important; color: var(--cvg-blue) !important; } .cvg-app-faq .zpaccordion-content { padding: 12px 20px 18px !important; font-size: 14px !important; color: var(--cvg-muted) !important; line-height: 1.8 !important; } /* ============================================================ 17. キーフレーム ============================================================ */ @keyframes cvg-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } } @keyframes cvg-spin { to { transform: rotate(360deg); } }