適用手順（Macソース）
編集元の想定パスは /Users/yuika/Sites/kokage-soudan です。
以下は Next.js 想定の一般的手順です。実際のファイル配置・パッケージマネージャに合わせて読み替えてください。
既存CSSの後に読み込む
本番反映前にバックアップ必須
事前準備
-
作業ディレクトリを確認
Mac で/Users/yuika/Sites/kokage-soudanを開き、git 状態と現行ブランチを確認します。 -
バックアップ
変更前にコミット、またはブランチ作成・ディレクトリコピーなどで退避します。
cd /Users/yuika/Sites/kokage-soudan git status git checkout -b fix/duo-responsive # または: cp -a 対象CSS 対象CSS.bak.$(date +%Y%m%d) -
パッチCSSを入手
このマニュアルのdownloads/duo-responsive.css（または BOX の/workspace/kokage-duo-patch/duo-responsive.css）を Mac 側へコピーします。
CSSの配置と import
プロジェクト内のスタイル置き場に合わせて配置します（例）。
| 置き場所の例 | import の例 |
|---|---|
app/styles/duo-responsive.css |
app/globals.css の末尾で @import "./styles/duo-responsive.css"; |
styles/duo-responsive.css |
styles/globals.css 末尾、または _app / root layout で後から import |
推奨：グローバルCSSの最後で読み込む
/* globals.css など、既存ルールの後 */
@import "./duo-responsive.css";
重要： 既存のグローバル CSS の後に読み込ませ、
.page-sheet の高さ依存ルールを上書きできるようにしてください。
短いメモ: apply-snippet.txt
ビルド / 再起動
プロジェクトの慣習に合わせて実行します（例）。
# 開発確認
npm run dev
# 本番相当の確認
npm run build && npm run start
# pnpm / yarn の場合は同等コマンド- ローカルで表示を確認してから、通常のデプロイ手順で公開環境へ反映
- Tailscale 公開中の URL がある場合は、反映後に同じパスで再確認
- ソース取得後は、重複する旧ルールの整理やコンポーネント側の微調整も検討
適用後にやること
- 確認チェックリストに沿って Duo 閉じ/開き・縦横を確認
- 相談フォームに入力した状態で開閉し、状態が消えないことを確認
- 問題なければコミット／PR／デプロイ
このマニュアルサイトについて
BOX 上の静的サイトです。Mac パスのファイルをここから直接書き換えません。 ライブサイトへの反映は、上記のとおり Mac 上のソースへ CSS を適用してビルドする作業が残っています。