@charset "UTF-8"; /* ========================================================= anime.css _index.html 各セクション見出し(h2)の 「一文字ずつ・X軸・フェードイン（さざなみ）」登場アニメーション用 （実際のモーションは js/anime.js が GSAP で制御） ========================================================= */ /* JSが有効に初期化できたときだけ初期状態を隠す。 .js-anime は anime.js が gsap 検出後に へ付与する。 → JS無効・読み込み失敗時はこの指定が効かず、見出しは通常表示される。 分割前の一瞬のチラつき（全文表示→分割）を防ぐため、まず h2 ごと隠す。 */ .js-anime #main h2 { opacity: 0; } /* anime.js が分割生成する1文字 span。 X方向 transform を効かせるため inline-block 化する。 */ .anime-char { display: inline-block; will-change: transform, opacity; } /* 分割で生成した .anime-char が、既存の span 向けフォント指定 （例: #slide2 h2 span { font-size:2.3rem ... } ＝「とは」用）に 誤って巻き込まれないよう、常に親のフォントをそのまま継承させる。 #main を前置きして #slide2 h2 span より詳細度を高くしている。 */ #main .anime-char { font-size: inherit; font-family: inherit; font-weight: inherit; font-style: inherit; letter-spacing: inherit; } /* 登場完了後は will-change を解放（anime.js が h2 に付与） */ #main h2.anime-done, #main h2.anime-done .anime-char { will-change: auto; } /* ----------------------------------------------------------- Featured Items(#slide4)の下線を「左→右に伸びる」アニメに （border は部分描画できないため、静的borderを透明化して 伸びるバー .common_h2_line を anime.js が生成・重ねる） ※ #slide4 のみにスコープ。他ページ・他見出しの下線は不変。 ----------------------------------------------------------- */ .js-anime #slide4 h2.common_h2 { position: relative; border-bottom-color: transparent; /* 元の太線を隠す（太さ=レイアウトは維持） */ } .common_h2_line { position: absolute; left: 0; bottom: -5px; /* 元 border-bottom(太さ5px)の位置にぴったり重ねる */ width: 100%; height: 5px; /* thick 相当（SIGNETとはの線と同じ太さ） */ background: #000; transform: scaleX(0); /* 初期は幅0（左端から伸びる） */ transform-origin: left center; will-change: transform; } #slide4 h2.common_h2.anime-done .common_h2_line { will-change: auto; } /* ----------------------------------------------------------- NEWS(#slide3) 3カードの見出し・画像を登場前に隠す （anime.js が JS有効時のみ .js-anime を付与。JS無効時は通常表示） ----------------------------------------------------------- */ .js-anime #slide3 .topnews_list .topnews_h3, .js-anime #slide3 .topnews_list .list img { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js-anime #slide3 .topnews_list .topnews_h3, .js-anime #slide3 .topnews_list .list img { opacity: 1 !important; } } /* ----------------------------------------------------------- Unique Service(#slide5) の斜め装飾ライン（黄・緑・赤）を JS生成のSVGに差し替える。元はCSSの background グラデ3本。 JS有効時のみ元グラデを消し、SVGを写真・テキストの後ろに敷く。 ----------------------------------------------------------- */ .js-anime #slide5 { background-image: none; /* 元のCSSグラデ3本を消す */ isolation: isolate; /* SVGの z-index:-1 を #slide5 内に閉じ込める */ } .slide5-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: -1; /* 写真・テキストの後ろ（元グラデと同じ層） */ } /* ----------------------------------------------------------- MOTOR SPORTS(#slide6) 上下の黄色い斜め帯（C案：傾けて起こす）。 元は #slide6::before / ::after。JS有効時はそれを消し、同形の div を anime.js が生成して transform で起こす。 ----------------------------------------------------------- */ .js-anime #slide6::before, .js-anime #slide6::after { display: none; /* 元の擬似要素を消してdivに差し替え */ } .slide6-band { position: absolute; left: 0; width: 100%; height: 70px; /* 元の帯と同じ高さ */ background-color: var(--color-yellow); pointer-events: none; will-change: transform; z-index: 200; /* #slide6(z-index:201)より後ろ＝黒の背面 */ } /* section の箱は #slide6 と同じなので % で上下辺に追従（高さ変化に強い）。 直線エッジを 6px だけ黒の内側へ潜らせ、黒に隠す。 */ .slide6-band--top { bottom: calc(100% - 6px); /* 下端を #slide6 上辺の 6px 内側へ */ transform-origin: bottom left; /* 回転軸=左：左端固定。傾き中の右側は黒の裏に隠れる */ -webkit-clip-path: polygon(30% 100%, 100% 0, 100% 100%); clip-path: polygon(30% 100%, 100% 0, 100% 100%); } .slide6-band--bottom { top: calc(100% - 6px); /* 上端を #slide6 下辺の 6px 内側へ */ transform-origin: top right; /* 回転軸=右：右端固定。傾き中の左側は黒の裏に隠れる */ -webkit-clip-path: polygon(0 0, 70% 0, 0 100%); clip-path: polygon(0 0, 70% 0, 0 100%); } /* モバイル/タブレットは元CSS(@media max-width:1024px)と同じ角度に合わせる */ @media screen and (max-width: 1024px) { .slide6-band--top { -webkit-clip-path: polygon(5% 100%, 100% 0, 100% 100%); clip-path: polygon(5% 100%, 100% 0, 100% 100%); } .slide6-band--bottom { -webkit-clip-path: polygon(0 0, 95% 0, 0 100%); clip-path: polygon(0 0, 95% 0, 0 100%); } } /* モーション低減設定では演出せず常に表示（分割もしない） */ @media (prefers-reduced-motion: reduce) { .js-anime #main h2 { opacity: 1 !important; } .anime-char { transform: none !important; opacity: 1 !important; will-change: auto; } } /* ----------------------------------------------------------- about-signet.html About SIGNET(.about_white_wrap) の見出しまわり： 「SIGNETとは」と下の説明文(p_1)。 window.load後にJSが初期化するため、それまでの間のチラつきを防ぐため先にCSSで隠す。 ----------------------------------------------------------- */ .js-anime .about_white_wrap .about_about_h3, .js-anime .about_white_wrap .p_1 { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js-anime .about_white_wrap .about_about_h3, .js-anime .about_white_wrap .p_1 { opacity: 1 !important; } } /* ----------------------------------------------------------- about-signet.html Our Approach(.approach_wrap) の見出しまわり： 「Our Approach」「SIGNETの特長」と説明文(p_2)。 window.load後にJSが初期化するため、それまでの間のチラつきを防ぐため先にCSSで隠す。 ----------------------------------------------------------- */ .js-anime .approach_wrap .about_h3, .js-anime .approach_wrap .about_h3_jp, .js-anime .approach_wrap .p_2 { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js-anime .approach_wrap .about_h3, .js-anime .approach_wrap .about_h3_jp, .js-anime .approach_wrap .p_2 { opacity: 1 !important; } } /* ----------------------------------------------------------- about-signet.html Philosophy(.philosophy_wrap) の見出しまわり： 「Philosophy」「私たちの理念」「My First Tool」の白枠。 window.load後にJSが初期化するため、それまでの間のチラつきを防ぐため先にCSSで隠す。 ----------------------------------------------------------- */ .js-anime .philosophy_wrap .about_h3, .js-anime .philosophy_wrap .about_h3_jp, .js-anime .philosophy_wrap .philosophy_ttl { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js-anime .philosophy_wrap .about_h3, .js-anime .philosophy_wrap .about_h3_jp, .js-anime .philosophy_wrap .philosophy_ttl { opacity: 1 !important; } } /* ----------------------------------------------------------- about-signet.html Philosophy(.philosophy_wrap) の p_01： 「プロの現場でも選ばれる...」を1文字ずつ登場させる。 window.load後にJSが初期化するため、それまでの間の チラつき（全文表示→急に隠れる）を防ぐため先にCSSで隠す。 ----------------------------------------------------------- */ .js-anime .philosophy_wrap .p_01 { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js-anime .philosophy_wrap .p_01 { opacity: 1 !important; } } /* ----------------------------------------------------------- about-signet.html Philosophy(.philosophy_list) の丸(dt)3つを スクロールで左からスッと登場させ、丸の中の文字・説明文(dd)を続けてフェードイン。 JS有効時のみ初期状態を隠す（.js-anime は本ファイル冒頭と共通）。 ----------------------------------------------------------- */ .js-anime .philosophy_list dt { opacity: 0; will-change: transform, opacity; } .js-anime .philosophy_list dt span, .js-anime .philosophy_list dd { opacity: 0; will-change: opacity; } .philosophy_list dt.anime-done, .philosophy_list dt.anime-done span { will-change: auto; } @media (prefers-reduced-motion: reduce) { .js-anime .philosophy_list dt, .js-anime .philosophy_list dt span, .js-anime .philosophy_list dd { opacity: 1 !important; transform: none !important; } } /* ----------------------------------------------------------- about-signet.html Philosophy下の p_02： 「SIGNETはあなたの様々な"First"を叶える」をフェードイン、 一瞬遅れて「グローバルブランドです」を同じフェードインで表示。 ----------------------------------------------------------- */ .js-anime .philosophy_wrap2 .p_02 .philosophy-global-fade { opacity: 0; will-change: opacity; } @media (prefers-reduced-motion: reduce) { .js-anime .philosophy_wrap2 .p_02 .philosophy-global-fade { opacity: 1 !important; } } /* ----------------------------------------------------------- about-signet.html Our Story(.history)タイムライン： 年号のドット(●)を複製し、後ろで拡大→消える波紋(リップル)効果。 ドットをつなぐ縦棒は history_item ごとの区間に分割し、上→下へ伸びる。 元は .history::before(縦線・1本) / .history_item::before(ドット)。 JS有効時のみ元の擬似要素を消す（.js-anime は本ファイル冒頭と共通）。 ----------------------------------------------------------- */ .js-anime .history::before, .js-anime .history_item::before { display: none; } .history-dot { position: absolute; top: 18px; left: 185px; z-index: 2; width: 14px; height: 14px; background-color: #fff; border-radius: 50%; will-change: transform, opacity; } .history-dot-ripple { position: absolute; top: 18px; left: 185px; z-index: 1; width: 14px; height: 14px; background-color: #fff; border-radius: 50%; pointer-events: none; will-change: transform, opacity; } .history-line-seg { position: absolute; top: 29px; /* ドット中心(22px+14px/2)から下へ */ left: 192px; /* ドット中心(185+7)に一致 */ z-index: 0; /* ●(dot)より下に敷く */ width: 1px; background-color: #888; transform-origin: top center; will-change: transform; } /* 年号・本文・写真を時間差フェードイン(opacity 0→1)させるための初期非表示 */ .js-anime .history_year, .js-anime .history_txt, .js-anime .history_img { opacity: 0; will-change: opacity; } @media (prefers-reduced-motion: reduce) { .js-anime .history_year, .js-anime .history_txt, .js-anime .history_img { opacity: 1 !important; } } /* 年号の幅が縮む分、ドット・ライン・波紋も base.css の .history::before / .history_item::before に合わせて左へ寄せる */ @media screen and (max-width: 820px) { .history-dot, .history-dot-ripple { left: 155px; } .history-line-seg { left: 162px; } } @media screen and (max-width: 640px) { .history-dot, .history-dot-ripple { top: 8px; left: 87px; width: 10px; height: 10px; } .history-line-seg { top: 13px; /* ドット中心(8px+10px/2) */ left: 92px; /* ドット中心(87+5)に一致 */ } }