CSS 設計の方針

• 命名: Sass（SCSS）による効率的な CSS 管理、コンポーネント・プロジェクト・ファンデーション構造カラーシステム: Sass 変数による統一されたカラーパレット、フォント、ブレークポイント、z-index 理
• ファイル構成: foundation/component/project/layout/utility に分割した Sass 構造
• 変数管理: CSS カスタムプロパティと Sass 変数の連携、レイヤー管理（z-index の変数化）
• アニメーション: GSAP + ScrollTrigger による高品質なスクロール連動アニメーション

JavaScript で実装した機能

• ドロワーメニュー: ハンバーガーとドロワーの連動、body クラスによるスクロール制御
• スムーススクロール: jQuery によるページ内アンカーリンク、ヘッダー高さ自動調整
• 横スクロールカルーセル: タブクリックで対応するカードへスクロール、scroll-padding-left を考慮した正確なスクロール位置計算、scrollIntoView によるスマートなスクロール制御、最大スクロール位置の制限による実機での巻き戻り防止
• FAQ アコーディオン: GSAP による高品質な開閉アニメーション、details 要素と連携したアクセシビリティ対応
• Swiper 連携: メンバー紹介スライダー、レスポンシブ対応とカスタムナビゲーション
• 無限スクロールアニメーション: CSS 変数と JavaScript を連携したメインビジュアルの無限スクロール
• 文字アニメーション: 一文字ずつ表示するタイプライター風アニメーション（メッセージセクション）

アニメーション システム

• 多彩なパターン: フェードイン・スライドアップ、文字アニメーション、無限スクロール

このコーディングで特に工夫した点

横スクロールカルーセルの実装

• scroll-padding-left を考慮した正確なスクロール位置計算
• 実機での挙動を考慮した最大スクロール位置の制限
• scrollIntoView による scroll-padding-left の自動適用
• ページ全体のスクロール位置を保持したまま横スクロールのみ実行

コードの保守性

• BEM 記法による明確な命名規則
• コンポーネント単位でのファイル分割
• 変数・mixin によるスタイルの一元管理
• コメントによる処理の説明