/* ===== GorillAId Common Site Styles ===== */ /* Used by /, /web/, /ai-ops/, /about/, /contact/ */ /* /chatbot/ overrides via .chatbot-page on */ /* ===== Design Tokens ===== */ :root { --c-bg: #FAF7F2; /* 生成り (body & 主セクション) */ --c-bg-soft: #FFFDF8; /* 和紙 (暖かい白・交互セクション用) */ --c-bg-deep: #F3EEE5; /* 濃い生成り (chatbotアクセント) */ --c-text: #2A2826; --c-muted: #6B6764; --c-accent-primary: #C8322A; --c-accent-strong: #B8935A; --c-divider: rgba(184,147,90,0.35); --c-line: #D9D3C7; /* 装飾横線 (section-title 等) */ --c-text-dark: #1A1814; /* 墨（index.html --text と同値） */ --f-mincho: 'Zen Old Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', serif; --f-cormorant: 'Cormorant Garamond', Georgia, serif; --f-sans: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --easing: cubic-bezier(0.16, 1, 0.3, 1); --section-padding: 110px; } /* ===== Reset ===== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--f-sans); color: var(--c-text); background: var(--c-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* ===== 日本語テキストの孤立文字防止 ===== */ /* line-break: strict で日本語禁則処理を強化 (句読点が行頭に来ない等) */ /* h3〜h6 (カード見出し系) は text-wrap: balance で行幅均等化 (1文字ぶら下がり対策) */ /* h1/h2 は
による意図的な改行を持つことが多いため balance は使わず、pretty で末尾調整のみ */ /* word-break: keep-all は使わない (句読点が単独行に押し出される副作用が出るため) */ h1, h2 { text-wrap: pretty; line-break: strict; } h3, h4, h5, h6 { text-wrap: balance; line-break: strict; } p, li, dt, dd, figcaption, blockquote, .lead, .subtitle { text-wrap: pretty; line-break: strict; } /* ===== Skip Link ===== */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--c-text-dark); color: #fff; padding: 12px 24px; border-radius: 0 0 8px 8px; font-weight: 700; font-size: 14px; text-decoration: none; z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ===== Global Navigation ===== */ .site-nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 0 40px; height: 68px; display: flex; align-items: center; justify-content: space-between; background: rgba(250, 247, 242, 0.88); backdrop-filter: blur(20px) saturate(1.2); border-bottom: 1px solid rgba(232, 230, 225, 0.6); transition: all 0.4s var(--easing); } .site-nav.scrolled { box-shadow: 0 4px 24px rgba(28, 25, 23, 0.06); height: 60px; } /* Logo */ .site-nav__logo { display: flex; align-items: center; text-decoration: none; } .site-nav__logo img { height: 34px; width: auto; transition: transform 0.3s; } .site-nav__logo:hover img { transform: scale(1.04); } /* Menu links */ .site-nav__menu { display: flex; gap: 24px; list-style: none; } .site-nav__menu a { color: var(--c-muted); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; transition: color 0.25s; position: relative; } .site-nav__menu a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--c-accent-primary); border-radius: 1px; transition: width 0.3s var(--easing); } .site-nav__menu a:hover { color: var(--c-text); } .site-nav__menu a:hover::after { width: 100%; } .site-nav__menu a[aria-current="page"] { color: var(--c-accent-primary); font-weight: 700; } /* CTA button */ .site-nav__cta { background: var(--c-accent-primary); color: #fff; border: none; padding: 10px 24px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: all 0.3s var(--easing); white-space: nowrap; box-shadow: 0 6px 24px rgba(184, 147, 90, 0.28); } .site-nav__cta:hover { transform: translate(3px, -3px); box-shadow: 0 14px 40px rgba(200, 50, 42, 0.45), 0 0 0 4px rgba(200, 50, 42, 0.12); } .site-nav__cta:active { transform: translate(1px, 1px); box-shadow: 0 4px 12px rgba(200, 50, 42, 0.30); transition-duration: 0.1s; } /* ===== Hamburger ===== */ .hamburger { display: none; cursor: pointer; padding: 12px; min-width: 44px; min-height: 44px; background: transparent; border: none; font-size: 22px; line-height: 1; align-items: center; justify-content: center; color: var(--c-text); } .hamburger span { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: all 0.3s; } /* ===== Mobile Menu ===== */ .mobile-menu { display: none; position: fixed; top: 68px; left: 0; width: 100%; background: rgba(250, 250, 248, 0.98); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(217, 211, 199, 1); padding: 28px 40px; flex-direction: column; gap: 20px; z-index: 99; box-shadow: 0 12px 40px rgba(26,24,20,0.08), 0 4px 12px rgba(26,24,20,0.04); } .mobile-menu.open { display: flex; } .mobile-menu a { color: var(--c-text); text-decoration: none; font-size: 16px; font-weight: 600; } /* ===== Site Footer ===== */ .site-footer { background: var(--c-text); color: rgba(255, 255, 255, 0.85); padding: 56px 24px 28px; } .site-footer__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(3, 1fr); gap: 40px 32px; align-items: start; } .site-footer h4 { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.04em; margin-bottom: 12px; } .site-footer__col { display: block; } .site-footer__col--logo { display: flex; align-items: flex-start; } .site-footer__logo-link { display: inline-block; background: #fff; padding: 10px 14px; border-radius: 6px; line-height: 0; } .site-footer__logo { height: 56px; width: auto; display: block; } .site-footer__copy { grid-column: 1 / -1; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.03em; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 12px 0 0; } .site-footer__links { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .site-footer__links a { font-size: 14px; color: rgba(255, 255, 255, 0.7); text-decoration: none; font-weight: 500; letter-spacing: 0.02em; transition: color 0.2s; text-align: left; } .site-footer__links a:hover { color: #fff; } /* ===== Fade-in / Stagger Animations ===== */ .fade-in { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--easing), transform 0.7s var(--easing); } .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in.stagger-1 { transition-delay: 0.05s; } .fade-in.stagger-2 { transition-delay: 0.1s; } .fade-in.stagger-3 { transition-delay: 0.15s; } .fade-in.stagger-4 { transition-delay: 0.2s; } .fade-in.stagger-5 { transition-delay: 0.25s; } .fade-in.stagger-6 { transition-delay: 0.3s; } .fade-in.stagger-7 { transition-delay: 0.35s; } /* ===================================================================== * Section Components (5/13-14 段階B 共通化 — chatbot寄せ + テーマ連動) * --------------------------------------------------------------------- * 方針: chatbotの装飾豪華なtypographyを共通基準にする * - フォント: --f-cormorant / --f-mincho (site.css命名) * - 色: var(--c-accent-primary) (chatbotは朱、他ページは金茶) * - display(left/center) はページ固有差分として温存 * - 統合後はchatbot/index/web の `