CSS設計の方針

• 命名: BEMに準拠（.header, .header__inner, .blog__cardなど）
• レスポンシブ: 768pxブレークでPC/SP切替
• ユーティリティ: .innerを共通コンテナに適用（max-width 1280px）
• ファイル構成: base/page/global で分割
• 変数管理: カラー、フォント、ブレークポイントをSass変数化

JavaScriptで実装した機能

• ドロワー: ハンバーガーとドロワーの連動、背景固定でbody.is-drawer-active
• スライダー: Swiper.js（自動3秒、ループ、ページネーション・ナビゲーション）
• タブ切り替え: クリックでコンテンツ切り替え、aria-selectedで状態管理
• アコーディオン: GSAPで高さ・opacity、HTML <details>ベース
• スムーズスクロール: ページ内リンクに対応

ドロワーメニュー

ハンバーガーアイコンの3本線をXに変形。ドロワー表示時はbody.is-drawer-activeで背景を固定。PCは非表示。

スライダー（Swiper.js）

ケーススタディをスライダー化。自動3秒再生、ループ再生、ページネーション・ナビゲーション付き。カスタム矢印でナビゲーションを実装。

タブ切り替え（jQuery）

会社概要/沿革/認証取得をタブ切り替え。aria-selectedでアクセシビリティを確保。クリックで.js-showを付与してコンテンツを表示切替。

アコーディオン（GSAP）

FAQセクションに適用。高さとopacityをアニメーション。is-openedで状態管理し、<details>の開閉を統一的に制御。

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

• レスポンシブ: <picture>でPC/SP画像を出し分け
• グラデーション: ボタン・ドロワー背景にグラデーション適用
• 情報設計: ニュース/ケーススタディ/料金/ブログなどセクション整理
• アクセシビリティ: aria-label, aria-selectedなどARIA属性を追加
• 保守性: BEMとファイル分割でCSSの可読性・再利用性を確保

このコーディングでの学び

• BEMでクラス名の一貫性を確保
• GSAPでアコーディオンのアニメーションを実現
• タブでaria-selectedを状態管理に活用
• ドロワー表示時はbodyにis-drawer-activeを付与してスクロール防止
• Swiper.jsで複雑なスライダー要件に対応（ループ、自動再生、カスタムナビ）
• レスポンシブではmq(sp)でメディアクエリをmixin化