ローディングアニメーション　水がいっぱいになるやつ　※ロゴURLは当HPのドメインで使うこと！

/* ==============================
ローディング
水アニメロゴ＋中央から外へ四角く開く
mask固定版
============================== */
ロゴ表示後に開いていく時間などは上記追加ｃｓｓで調整。

ロゴURLはJS【ロゴアニメーション　水注ぎロゴ　3文字白抜き】にいれる。
ローディングの水をいっぱいにする時間や待機時間など調整可能。
幕色とロゴ文字色は同じになるように設定している。

新・固定表示の開閉タブ

下記ｃｓｓとＪＳ【新・固定表示開閉タブOP/CL　タブ遅延仕様 / 表示が崩れない対策】でうごく。

/* ===========================
NEW 固定表示開閉タブ
完全作り直し版
動き：
・文章の幅は最初から完成幅
・外側だけ0幅にして隠す
・中身は左からスライド
・高さ計算JSなし
============================= */

無料のＨＰフィッティング（デモサイト作成）
❖ 画像や文章は、事業内容に合わせて変更可能
❖ 他のデザインも見たい方はこちら

固定背景bg1を左から右へ動かしたり、じんわり拡大するｃｓｓはカスタムに入っている。片方は効かなくしている。

none

固定背景を非表示にするには、stock-blockをクラス名にいれる。それとbg5 or bg6のクラス名を変更する　→　bg6stockとか。
スライド、アンカー確認！

none

【スライドや固定背景の増減についての基本設定・要点】

【基本型４枚　２枚まで増加可能】
通常：
b1 → b2 → b3 → b6 → b7
bg1 → bg2 → bg3 → bg4

1枚追加：
b1 → b2 → b3 → b4 → b6 → b7
bg1 → bg2 → bg3 → bg5 → bg4

2枚追加：
b1 → b2 → b3 → b4 → b5 → b6 → b7　　　b7は最後のCONTACT用。b6の直後に置く。最後位置の計算に使う。
bg1 → bg2 → bg3 → bg5 → bg6 → bg4　　　いずれもbg4をラストにする。

b4 / b5：追加用の普通スライド。b3 と b6 の間に入れる。b2・b6と同じ固定幅タイプ。

スマホのb１上での配置などを調整する場合

スマホのときのｂ１上の文字の配置はYOKOHPのｃｓｓ上で決めている。
/* ======================================
スマホ：b1を透明 + 文字を画面中央表示
＋位置微調整できる版
====================================== */
body:not(.wp-admin):not(.block-editor-iframe__body){
--b1-text-x: 0px; 　　　/* b1全体の文字：左右位置 */
--b1-text-y: -150px; 　　　/* b1全体の文字：上下位置 */　　←タイトルのこと
--b1-swipe-x: 0px;　　　 /* b1内のsp-only：左右位置 */　　←swipのやつのこと
--b1-swipe-y: 300px; 　　　/* b1内のsp-only：上下位置 */

光差し込み＋透明からレイヤーor画像へのアニメーション

selector{
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
}

/* 画像＋色レイヤーをまとめて透明から表示 */
selector .wp-block-cover__image-background,
selector .wp-block-cover__background{
animation: coverLayerFadeIn 5.0s ease-out 2.0s both;
animation-play-state: paused;
}
/* このカバー自身がアクティブになったら開始 */
selector.b-anim-active .wp-block-cover__image-background,
selector.b-anim-active .wp-block-cover__background{
animation-play-state: running;
}
/* 光：最初は透明からじんわり表示 */
selector::before{
content: "" !important;
position: absolute !important;
inset: -45% -35% !important;
z-index: 2 !important;
pointer-events: none !important;

background:
linear-gradient(116deg,
transparent 0%,
transparent 16%,
rgba(255,255,255,0.06) 20%,
rgba(255,255,255,0.34) 25%,
rgba(255,255,255,0.12) 31%,
transparent 39%
),
linear-gradient(113deg,
transparent 0%,
transparent 41%,
rgba(255,255,255,0.05) 44%,
rgba(255,255,255,0.24) 45.5%,
rgba(255,255,255,0.05) 47%,
transparent 52%
),
linear-gradient(119deg,
transparent 0%,
transparent 59%,
rgba(255,255,255,0.04) 63%,
rgba(255,255,255,0.26) 68%,
rgba(255,255,255,0.07) 73%,
transparent 81%
),
linear-gradient(111deg,
transparent 0%,
transparent 74%,
rgba(255,255,255,0.04) 75%,
rgba(255,255,255,0.18) 76%,
rgba(255,255,255,0.04) 77%,
transparent 81%
) !important;

filter: blur(10px) !important;
mix-blend-mode: screen !important;

animation: lightMainFadeIn 5.0s ease-out 2.2s both !important;
animation-play-state: paused !important;
}
/* 補助光 */
selector::after{
content: "" !important;
position: absolute !important;
inset: -50% -30% !important;
z-index: 2 !important;
pointer-events: none !important;

background:
linear-gradient(117deg,
transparent 0%,
transparent 32%,
rgba(255,255,255,0.04) 35%,
rgba(255,255,255,0.15) 36.5%,
rgba(255,255,255,0.04) 38%,
transparent 44%
),
linear-gradient(108deg,
transparent 0%,
transparent 52%,
rgba(255,255,255,0.035) 57%,
rgba(255,255,255,0.17) 64%,
rgba(255,255,255,0.05) 70%,
transparent 79%
) !important;

filter: blur(18px) !important;
mix-blend-mode: screen !important;

animation: lightSubFadeIn 5.0s ease-out 2.4s both !important;
animation-play-state: paused !important;
}

/* このカバー自身がアクティブになったら光も開始 */
selector.b-anim-active::before,
selector.b-anim-active::after{
animation-play-state: running !important;
}
/* 文字は一番上 */
selector .wp-block-cover__inner-container{
position: relative !important;
z-index: 3 !important;
}
/* 編集画面では普通に表示 */
.editor-styles-wrapper selector .wp-block-cover__image-background,
.editor-styles-wrapper selector .wp-block-cover__background{
animation: none !important;
}
.editor-styles-wrapper selector::before,
.editor-styles-wrapper selector::after{
animation: none !important;
opacity: 1 !important;
}
/* 透明 → それぞれ元の透明度へ戻る */
@keyframes coverLayerFadeIn{
from{
opacity: 0;
}
}
/* 主光：透明 → 表示 */
@keyframes lightMainFadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
/* 補助光：透明 → 表示 */
@keyframes lightSubFadeIn{
from{
opacity: 0;
}
to{
opacity: 0.9;
}
}

単にグラデを用いない透明からレイヤーor画像へのアニメーション

/* 画像＋色レイヤーをまとめて透明から表示 */
selector .wp-block-cover__image-background,
selector .wp-block-cover__background{
animation: coverLayerFadeIn 5.0s ease-out 2.0s both;
animation-play-state: paused;
}
/* このカバー自身がアクティブになったら開始 */
selector.b-anim-active .wp-block-cover__image-background,
selector.b-anim-active .wp-block-cover__background{
animation-play-state: running;
}
/* 編集画面では普通に表示 */
.editor-styles-wrapper selector .wp-block-cover__image-background,
.editor-styles-wrapper selector .wp-block-cover__background{
animation: none !important;
}
/* 透明 → それぞれ元の透明度へ戻る */
@keyframes coverLayerFadeIn{
from{
opacity: 0;
}
}

グラデ＋透明からレイヤーor画像へのアニメーション

selector{
/* ここだけ変更 */
--grad-left: #ffffff00; /* 左の色 */
--grad-right: #e9a02a; /* 右の色 */
--grad-opacity: 0.55; /* グラデの濃さ */

position: relative !important;
overflow: hidden !important;
}

/* カバー色レイヤーをグラデーションにする */

selector .wp-block-cover__background{
background: linear-gradient(
90deg,
var(--grad-left) 0%,
var(--grad-right) 100%
) !important;
opacity: var(--grad-opacity);
}

/* 画像＋グラデーションをまとめて透明から表示 */
selector .wp-block-cover__image-background,
selector .wp-block-cover__background{
animation: coverLayerFadeIn 5.0s ease-out 2.0s both;
animation-play-state: paused;
}

/* このカバー自身がアクティブになったら開始 */
selector.b-anim-active .wp-block-cover__image-background,
selector.b-anim-active .wp-block-cover__background{
animation-play-state: running;
}

/* 編集画面では普通に表示 */
.editor-styles-wrapper selector .wp-block-cover__image-background,
.editor-styles-wrapper selector .wp-block-cover__background{
animation: none !important;
}

/* 文字は一番上 */
selector .wp-block-cover__inner-container{
position: relative !important;
z-index: 3 !important;
}

/* 透明 → それぞれ元の透明度へ戻る */
@keyframes coverLayerFadeIn{
from{
opacity: 0;
}
}

イタリア創作料理

Gondola

ベネチア郷土料理を日本風にアレンジしています

We offer Venetian local cuisine with a Japanese twist.

Swipe →

b2,b4はシート増加可能
※※b2-free,b4-freeの中にいれるのはカバー（共通、pc-only、sp-only）じゃないと体裁がおかしくなるから注意！
※※b2-free,b4-freeと中のカバーは必須だから、b5とかにつかっているものから引っ張ってくるときは体裁を変える必要がある場合がある
カバー（b-half b2）
　└グループ（b2-free）
　　　└カバー（pc-only）
　　　└カバー（sp-only）
　　　└カバー（共通）

b2,b4のシートは増加して、くっつけることができる（b2-free,b4-freeを追加した）。一応シート幅はマックス75vwだが、それ以下なら下記ｃｓｓをカスタムｃｓｓにいれて調整できる。ただこのｃｓｓはスマホに効かせるとスマホ幅の75vwになるからＰＣのみに効かせること。

body:not(.wp-admin):not(.block-editor-iframe__body) selector{
width: 75vw !important;
min-width: 75vw !important;
max-width: none !important;
flex: 0 0 75vw !important;
}

※※b2-free,b4-freeの中にいれるのはカバーじゃないと体裁がおかしくなるから注意！
けっこうpc-onlyをグループにつけてるやつもあるのでそれはカバーに変更しなければきちんと反映されない。

ランチ Lunch Course

Aコース

￥4,000

・旬の前菜の盛り合わせ

・本日のパスタ（下記3種類から選べます）

a.イカ墨と九条ねぎのパスタ
b.あさりと柚子胡椒のボンゴレ
c.季節のGONDORAパスタ

・本日のメインディッシュ（下記2種類から選べます）

a.白身魚の南蛮サオール仕立て
b.鴨肉の赤ワイン味噌ソース

・GONDORAデザート

・ドリンク（エスプレッソorTEA）

Bコース

￥6,000

・旬の前菜の盛り合わせ

・本日のパスタ（下記3種類から選べます）

a.イカ墨と九条ねぎのパスタ
b.あさりと柚子胡椒のボンゴレ
c.季節のGONDORAパスタ

・鮮魚料理（白身魚の南蛮サオール仕立て）

・肉料理（鴨肉の赤ワイン味噌ソース）

・GONDORAデザート

・ドリンク（エスプレッソorTEA）

スマホ出力後の体裁

下記追加ｃｓｓにて調整可能
/* ==============================
PRICE スマホ自動出力
PC側 price-section を読み込み
============================== */

JSは「美容室版料金表のPC項目読み込み（スマホ用）」

文字フォントを一気にかえる場合は、下記をスマホ出力グループのカスタムｃｓｓにいれる
@media screen and (max-width: 600px){
.price-output,
.price-output *{
font-family: "Zen Kaku Gothic New", sans-serif !important;
}
}

LUNCH MENU

b3の中での各カバーの横幅設定について（重要！）

基本的な設定として、b3のスライドは中身に応じて自動収縮する。ただ、カラムとかを利用する場合、普通の文字を利用する場合と違いが生じる。細かいところは省くが、文字だけならあまり問題ないが、カラムを利用する場合は特に、親のカバーには下記カスタムｃｓｓをいれて、幅を指定することを推奨する。ただ、これはあくまでpc-onlyの場合のことでスマホと共通利用の場合はメディアクエリを使用すること。
下記ｃｓｓの75vwを基本的には上限として内容によって変えていくのが良い。

body:not(.wp-admin):not(.block-editor-iframe__body) selector{
width: 75vw !important;
min-width: 75vw !important;
max-width: none !important;
flex: 0 0 75vw !important;
}

/* 編集画面では幅指定を解除 */
.editor-styles-wrapper selector,
.block-editor-iframe__body selector{
width: auto !important;
min-width: 0 !important;
max-width: none !important;
flex: initial !important;
}

b3スライドの位置変更について（重要！）

b3の位置によってJSをかえていく。共存不可！！編集ページ内での位置はいまのままb2→b3→b4でいい。

b1→b2→b3→b4　JS（【横スクロールHP本体】＜b2→b3 ノーマルver＞目次page内link / スマホ対応 / スナップ付 /）
b1→b3→b2→b4　JS（【横スクロールHP本体】＜b3→b2 ver＞目次page内link / スマホ対応 / スナップ付 /）
b1→b2→b4→b3　JS（【横スクロールHP本体】＜b4→b3 ver＞目次page内link / スマホ対応 / スナップ付 /）

写真ギャラリー型にするひな形。読込元のこのカバーはstock-blockで非表示にしている。そのかわりPC版とスマホ版の出力グループを【並列で】出している。

■　b3-freeのグループにsg-tightを追加すれば、画像同士をくっつけることができる！
/* ==============================
SERVICE GALLERY
sg-tight を付けた時だけ
画像を縦横くっつける
============================== */

■　追加ｃｓｓ
/* ==============================
SERVICE GALLERY
sg-source → sg-pc / sg-sp 自動出力
PC・SPともに2枚縦積み
横幅は中身の枚数ぶん増える
横スクロール本体JSは触らない
============================== */

■　JSも利用している。「b3に画像ギャラリーを追加するためのJS」

b3を作成するときは必ず横幅を100vw以上にすること！シート１枚じゃ足りない【重要！】

シート１枚分の75vwとかだとなぜかb3スライド左の余白が100vwとの差の25vw広がって、b3右の余白が25vw短くなる。どうしようもなおせない。

一枚目のタイトル用のカバーを透過させるにはその裏のカバー（b-half-b3）を透過させておくこと

none

創作料理

- Italian -

すたいる１

　　↓PＣ出力用グループ

体裁調整　追加ｃｓｓ

/* ==============================
SERVICE GALLERY
sg-source → sg-pc / sg-sp 自動出力
PC・SPともに2枚縦積み
横幅は中身の枚数ぶん増える
横スクロール本体JSは触らない
============================== */

　　↓ＳＰ出力用グループ

PRICE / MENU

CUT

一般

￥5,000

高校生以下

￥3,000

小学生以下

￥2,000

COLOR

ワンメイク

￥6,000

ブリーチ

￥6,000

ナチュラルハーブカラー

￥7,000

オーガニックカラー

￥6,500

PERM

ポイントパーマ

￥3,000

デザインパーマ

￥6,000

デジタルパーマ

￥7,000

ストレートパーマ

￥7,000

縮毛矯正

￥8,000

OTHER

セット

￥5,000

メイク

￥3,000

着付け

￥7,000

スマホ出力後の体裁

PRICE / MENU

左縦型タイトルの体裁が崩れないようにするカラム設定について

selector{
display: grid !important;
grid-template-columns: 63px 29px 10fr 45fr 45fr !important;
align-items: stretch !important;
}

カスタムｃｓｓで決めている。
１列目63px、２列目29px、３列目-５列目を100％として割り振っている。
増減も可能。その場合は３列目以降を都度調整すること