0 UMI

【基本型４枚　２枚まで増加可能】
通常：
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と同じ固定幅タイプ。

スマホのときのｂ１上の文字の配置は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：上下位置 */

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;
}
}

/* 画像＋色レイヤーをまとめて透明から表示 */
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;
}
}

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;
}
}