/* ========================================================= Wkey Inc. — Motion & Responsive Enhancements 上品・控えめなアニメーション + レスポンシブ調整 （style.css / service.css / service-desc.css の後に読み込む） ========================================================= */ /* --------------------------------------------------------- 1. スクロールリビール（ふわっと表示） JS が に .js-ready を付与したときのみ非表示にする。 → JS が無効でもコンテンツは必ず表示される（フォールバック）。 --------------------------------------------------------- */ .js-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .js-ready .reveal.is-visible { opacity: 1; transform: none; } /* 軽い横入り（画像やサイド要素向け） */ .js-ready .reveal-left { transform: translateX(-32px); } .js-ready .reveal-right { transform: translateX(32px); } .js-ready .reveal-left.is-visible, .js-ready .reveal-right.is-visible { transform: none; } /* ズーム系（円形サービスアイコンなど） */ .js-ready .reveal-zoom { transform: scale(0.94); } .js-ready .reveal-zoom.is-visible { transform: none; } /* --------------------------------------------------------- 2. ヒーロー（初回ロードの立ち上がり） --------------------------------------------------------- */ .js-ready .hero-video { opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 1.8s ease; } .js-ready .hero-video.is-in { opacity: 1; transform: scale(1); } /* --------------------------------------------------------- 3. ヘッダー：スクロールで背景を締める --------------------------------------------------------- */ .header { transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease; } .header.scrolled { background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 2px 16px rgba(15, 23, 42, 0.08); } /* リンクの下線スライド（PCナビ） */ @media screen and (min-width: 769px) { .header-nav > ul > li > a { position: relative; } .header-nav > ul > li > a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .header-nav > ul > li > a:hover::after { transform: scaleX(1); } } /* --------------------------------------------------------- 4. ホバー演出の底上げ --------------------------------------------------------- */ .service-item, .service-nav-item { transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; } .service-item:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); } .service-nav-item:hover { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18); } .map-item { transition: background-color 0.3s ease, padding-left 0.35s ease; } .map-item:hover { background-color: rgba(15, 23, 42, 0.03); padding-left: 12px; } .map-head, .detail-title, .job-title { transition: color 0.3s ease; } .btn-view, .btn-detail-view, .entry-btn, .recruit-center { transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background-color 0.3s ease; } .btn-view:hover, .btn-detail-view:hover, .entry-btn:hover { transform: translateY(-3px); } .btn-detail-view:hover { background-color: rgba(255, 255, 255, 0.08); } /* recruit の「+」を少し動かす */ .recruit-center .plus-icon, .service-nav-item .plus, .service-item .plus { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); display: inline-block; } .recruit-center:hover .plus-icon { transform: rotate(90deg); } .service-nav-item:hover .plus, .service-item:hover .plus { transform: rotate(90deg); } .recruit-img { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; } .recruit-img:hover { transform: translateY(-8px) scale(1.02); box-shadow: 1.4rem 1.4rem 0 rgba(0, 0, 0, 0.08); } .contact-box { transition: transform 0.35s ease, box-shadow 0.35s ease; } .contact-box:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } /* --------------------------------------------------------- 5. タブレット微調整（769–1080px） --------------------------------------------------------- */ @media screen and (max-width: 1080px) and (min-width: 769px) { .header { padding: 18px 32px; } .header-nav ul { gap: 36px; } .header-nav a { font-size: 1.9rem; } .about-info { flex: 0 0 52%; padding: 4rem 3rem 6rem 4rem; } .about-image { flex: 0 0 42%; } .detail-content { gap: 40px; } .detail-image { flex: 0 0 320px; } } /* --------------------------------------------------------- 6. スマホ：ハンバーガー → ドロワーメニュー --------------------------------------------------------- */ .hamburger-menu { background: none; border: 0; padding: 0; cursor: pointer; } @media screen and (max-width: 768px) { /* ヘッダー自身を背景オーバーレイより前面へ （header が作る重なり順コンテキスト内に nav があるため必須） */ .header { z-index: 1100; } /* ボタン本体（style.css の flex 指定を活かしつつ最前面へ） */ .hamburger-menu { display: flex !important; position: relative; z-index: 1200; } .hamburger-menu span { transition: transform 0.35s ease, opacity 0.25s ease; transform-origin: center; } /* 開いているとき → × 形 */ .header.is-menu-open .hamburger-menu span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .header.is-menu-open .hamburger-menu span:nth-child(2) { opacity: 0; } .header.is-menu-open .hamburger-menu span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ナビをドロワー化（style.css の display:none を上書き） */ .header-nav { display: block; position: fixed; top: 0; right: 0; width: min(82vw, 340px); height: 100vh; height: 100dvh; background: #ffffff; box-shadow: -8px 0 30px rgba(15, 23, 42, 0.12); padding: 96px 32px 40px; box-sizing: border-box; overflow-y: auto; transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); z-index: 1100; } .header.is-menu-open .header-nav { transform: translateX(0); } .header-nav ul { display: block; } .header-nav > ul > li { border-bottom: 1px solid #eee; } .header-nav > ul > li > a { display: block; padding: 18px 4px; font-size: 1.9rem; font-weight: 600; color: #111; } /* ドロワー内ではドロップダウンを常時展開して表示 */ .header-nav .dropdown-menu { display: block !important; position: static; transform: none; width: auto; background: transparent; box-shadow: none; padding: 0 0 12px 12px; } .header-nav .dropdown-category { margin-bottom: 12px; } .header-nav .dropdown-category h3 { font-size: 1.4rem; margin: 8px 0; color: #555; } .header-nav .dropdown-category ul li a { display: block; padding: 8px 4px; font-size: 1.5rem; color: #333; white-space: normal; } /* メニュー開閉用の背景オーバーレイ（JSが body に挿入） */ .nav-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; z-index: 1050; } .nav-backdrop.is-show { opacity: 1; visibility: visible; } /* ドロワー内リンクの入場（開いたときに順に出す） */ .header.is-menu-open .header-nav > ul > li { animation: navItemIn 0.5s both; } .header.is-menu-open .header-nav > ul > li:nth-child(1) { animation-delay: 0.08s; } .header.is-menu-open .header-nav > ul > li:nth-child(2) { animation-delay: 0.14s; } .header.is-menu-open .header-nav > ul > li:nth-child(3) { animation-delay: 0.20s; } .header.is-menu-open .header-nav > ul > li:nth-child(4) { animation-delay: 0.26s; } .header.is-menu-open .header-nav > ul > li:nth-child(5) { animation-delay: 0.32s; } @keyframes navItemIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } /* ヒーロー動画のスマホ表示を素直に */ .hero { height: 80vh; height: 80dvh; } .hero-video { width: 100%; height: auto; max-height: 60vh; margin-top: 80px; } } /* スクロールロック（body に付与） */ .no-scroll { overflow: hidden; touch-action: none; } /* --------------------------------------------------------- 7. モーション控えめ設定を尊重 --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js-ready .reveal, .js-ready .reveal-left, .js-ready .reveal-right, .js-ready .reveal-zoom, .js-ready .hero-video { opacity: 1 !important; transform: none !important; transition: none !important; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }