CSS（Sass）設計の方針

• 命名・設計: BEM を前提に命名し、FLOCSSを使用してファイルを分割
• ファイル構成: src/sass/style.scss をエントリに、foundation / layout / component / project / utility を @forward で集約
• 変数管理: src/sass/global/_variables.scss でフォント、カラー、インナー幅・SP 幅、ブレークポイントマップなどを一元管理
• レスポンシブ: @mixin mq($breakpoint) で sp / tab / pc を統一。rclamp() 関数（_functions.scss）で ビューポートに応じた fluid なサイズ（ロゴ・ヘッダー高さ・余白など）を指定
• 保守性: project 層をセクション単位（fv, points, about, feature, cta, case, price, faq, contact）に分割し、改修時の当たり所を限定

JavaScript で実装した機能

• ドロワーメニュー: ハンバーガー（#js-drawer-btn）の開閉とナビ（.header__nav）の is-active 連動、body.opened でスクロール制御。ページ内リンク・ボタン押下時にメニューを閉じる処理
• スムーススクロール: アンカーリンククリック時に、固定ヘッダーの高さと余白を差し引いた位置へアニメーションスクロール
• スクロール連動アニメーション: GSAP ScrollTrigger で .animated__fadeIn および .animated__fadeInDelay.--delay0～3 がビューに入ったタイミングで js-show を付与。遅延グループは時間差（setTimeout）で順に表示
• スライダー（Swiper）:ブレークポイントで slidesPerGroup など表示を調整し、一定幅以下のブラウザではカードを1枚ずつ送るように調整。
• フォーム: ヘッダー・コンタクトの各フォームで、入力欄に全て入力されるまで送信ボタンを押せないように設定。また、送信成功時に完了メッセージを表示し、送信ボタンは非表示となるように設定。

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

1. スタイルの拡張性と一貫性

Foundation（リセット・ベース）と Project／Component を分け、map-get($layer, …) で重なり順を明示。ヘッダーでは コンテナクエリ（container-type: inline-size）により、幅ベースでドロワーと横並びナビを切り替え、メディアクエリとの役割分担を整理しています。

2. UI 挙動の実装品質

スムーススクロールで 実際のヘッダー高さを取得し、固定ヘッダーによる見切れを防ぐ。スクロール演出は CSS（utility/_animation.scss の opacity / translate と transition）に状態クラス js-show を載せる形にし、JS は発火とクラス付与に集中させています。

3. 外部サービスとの連携と入力制御

Google フォームのエントリ名に合わせた必須入力チェックと、Ajax 送信後の UI フィードバックにより、バックエンドなしでも問い合わせフローを成立させつつ、空送信を防ぐ仕組みを入れています。