カレールウ まろやかスパイスカレー
動きの仕様( PC・スマホサイズ共通 )

メニュー画面の表示
■ 表示形式
メニューバーを画面上部に常時固定し、スクロールしても隠れないようにする。クリック時は、背面にカバー(#332211の不透明度60%)を敷く。
■ サイズとスクロール
高さ:画面の高さ100%で固定。
横幅:画面の右側に表示し、PCでは50%、スマホでは全幅にする。
スクロール:コンテンツが画面の高さを超える場合は、枠内だけで縦スクロールができるようにする。表示中は、後ろのメインページが動かないよう制御する。
■ 閉じる操作
「×」ボタン、または枠外のカバー部分をクリックで閉じるようにする。

アレンジレシピの詳細表示
■ 表示形式
画面中央に白背景の角丸ボックスを表示。背面には半透明のカバー(#332211の不透明度60%)を敷く。
■ サイズとスクロール
高さ:PCでは画面の高さの70%、スマホでは90%とする。
横幅:PCでは最大800pxとし、画面幅が狭くなった時や、スマホ表示では画面幅の80%で可変するようにする。
スクロール:コンテンツが画面の高さを超える場合は、枠内だけでスクロールできるようにする。表示中は、後ろのメインページが動かないよう制御する。
■ 閉じる操作
「×」ボタン、または枠外の半透明部分をクリックで閉じるようにする。

FAQの表示
■ 表示形式
初期状態では「回答」部分は非表示。
質問エリア(または右端のアイコン)をクリックすると、回答がスライドして表示されるようにする。
■ アイコンの切り替え
閉じている時は「+」、開いている時は「ー」のアイコンに切り替わるようにする。