/* ============================================================
RAKUFUL — FX layer (overlay layer 4) 「第一印象」の設計
参考サイトの“印象づくり”手法を、ラクフルのブランドで独自実装：
スプラッシュ導入 / ヒーロー行送りリビール / 下層ヘッダーのパララックス /
スクロール指示の微強化。すべて reduced-motion・rkflshot 安全。
※基盤トークン（--navy 等）は design2.css の :root を継承。
============================================================ */
/* ---- 1. スプラッシュ導入 --------------------------------------------------
html.rkfl-splashing は 内の同期スクリプトが「セッション初回のみ」付与
（＝FOUCなしで最初の描画から幕が全面を覆う）。fx.js が約1.9秒後に class を外す。
JSが失敗しても curtain は forwards で画面外へ退避し、操作を妨げない。 */
html.rkfl-splashing::before{ /* 幕（生成りクリーム） */
content:""; position:fixed; inset:0; z-index:2147483646;
background:radial-gradient(58% 58% at 50% 44%, rgba(233,120,92,.08), transparent 70%), var(--paper,#FBF7F0);
animation:rkflSplashCurtain 1.85s cubic-bezier(.76,0,.24,1) forwards;
}
html.rkfl-splashing::after{ /* 透過ロゴ＋loading... */
content:"loading..."; position:fixed; top:50%; left:50%; z-index:2147483647;
transform:translate(-50%,-50%) scale(.94); opacity:0;
display:flex; align-items:flex-end; justify-content:center;
width:min(320px,66vw); height:clamp(188px,30vh,252px); padding-bottom:2px;
background:url('../../uploads/2026/07/rkfl-logo-color-v.png') no-repeat center top;
background-size:auto clamp(126px,20vh,184px);
font-family:var(--font-en,'Outfit',sans-serif); font-weight:600; font-size:12px; letter-spacing:.34em; text-transform:lowercase;
color:var(--muted,#a99e8f);
animation:rkflSplashLogo 1.85s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes rkflSplashLogo{
0%{ opacity:0; transform:translate(-50%,-50%) scale(.92); letter-spacing:.44em; }
18%{ opacity:1; transform:translate(-50%,-50%) scale(1); letter-spacing:.24em; }
52%{ opacity:1; transform:translate(-50%,-50%) scale(1.015); }
66%{ opacity:0; transform:translate(-50%,-60%) scale(1.015); }
100%{ opacity:0; }
}
@keyframes rkflSplashCurtain{
0%,52%{ transform:translateY(0); }
100%{ transform:translateY(-100%); }
}
/* ---- 2. ヒーロー キャッチの行送りマスクリビール（TOP） --------------------
fx.js が .catch を
ごとに … に包む。
スプラッシュが明ける頃（body.rkfl-hero-go）に各行が下から迫り上がる。 */
body.home #header_slider_catch .catch{ opacity:1 !important; transform:none !important; }
body.home #header_slider_catch .catch .rkfl-linewrap{ display:block; overflow:hidden; padding-bottom:.04em; }
body.home #header_slider_catch .catch .rkfl-lineinner{
display:block; transform:translateY(116%);
transition:transform 1.05s cubic-bezier(.16,1,.3,1); will-change:transform;
}
body.home.rkfl-hero-go #header_slider_catch .catch .rkfl-lineinner{ transform:none; }
body.home.rkfl-hero-go #header_slider_catch .catch .rkfl-linewrap:nth-child(2) .rkfl-lineinner{ transition-delay:.13s; }
body.home.rkfl-hero-go #header_slider_catch .catch .rkfl-linewrap:nth-child(3) .rkfl-lineinner{ transition-delay:.26s; }
/* ---- 3. 下層ページヘッダー写真：パララックス（scale で余白を確保→JSで縦移動） ---- */
#page_header{ overflow:hidden; }
#page_header .bg_image{ transform:scale(1.14); will-change:transform; }
/* ---- 4. スクロール指示の微強化：マウス下に "SCROLL" ラベル（TOP） ---- */
body.home #header_slider_button{ overflow:visible; }
body.home #header_slider_button::after{
content:"SCROLL"; position:absolute; left:50%; top:calc(100% + 9px); transform:translateX(-50%);
font-family:var(--font-en,'Outfit',sans-serif); font-weight:600; font-size:9.5px;
letter-spacing:.28em; color:rgba(23,21,15,.5); white-space:nowrap;
}
/* ---- 5. 固定サブヘッダー：スクロールでヘッダー内にコンパクトCTAが出現 ---- */
#header .rkfl-hdr-cta{
display:inline-flex; align-items:center; gap:.5em; margin-left:auto; margin-right:clamp(10px,1.4vw,18px);
padding:11px 20px; border-radius:999px; background:var(--coral,#E9785C); color:#fff;
font-family:var(--font-jp,sans-serif); font-weight:700; font-size:.85rem; letter-spacing:.02em; text-decoration:none; white-space:nowrap;
box-shadow:0 12px 24px -12px rgba(233,120,92,.7);
opacity:0; transform:translateX(14px); pointer-events:none;
transition:opacity .45s var(--ease), transform .45s var(--ease), background .3s, box-shadow .3s;
}
#header .rkfl-hdr-cta::after{ content:"→"; font-family:var(--font-en,sans-serif); font-weight:600; transition:transform .3s var(--ease); }
#header.rkfl-hdr-show .rkfl-hdr-cta{ opacity:1; transform:none; pointer-events:auto; }
#header .rkfl-hdr-cta:hover{ background:var(--brand-deep,#D45F40); box-shadow:0 16px 30px -12px rgba(233,120,92,.8); }
#header .rkfl-hdr-cta:hover::after{ transform:translateX(3px); }
@media (max-width:680px){ #header .rkfl-hdr-cta{ display:none; } } /* SPはドロワーCTAに委ねる */
/* ---- 6. PICK UP：注目コンテンツの横スクロール ---- */
.rkf-pickup{ max-width:var(--container,1160px); margin:0 auto; padding:clamp(28px,4vw,48px) 0 6px; }
.rkf-pickup-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:0 clamp(16px,2vw,10px); margin-bottom:16px; }
.rkf-pickup-label{ font-family:var(--font-en,sans-serif); font-weight:800; font-size:clamp(1.05rem,2vw,1.35rem); letter-spacing:.16em; color:var(--coral,#E9785C); }
.rkf-pickup-sub{ font-family:var(--font-jp,sans-serif); font-weight:700; font-size:.92rem; color:var(--muted,#8a8578); }
.rkf-pickup-viewport{ overflow:hidden; }
.rkf-pickup-track{
display:flex; width:max-content; padding:6px 0 18px;
animation:rkfl-pickmarq 46s linear infinite; will-change:transform;
}
.rkf-pickup:hover .rkf-pickup-track,.rkf-pickup-viewport:hover .rkf-pickup-track{ animation-play-state:paused; }
@keyframes rkfl-pickmarq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.rkf-pickup-ctrl{ display:none !important; } /* 自動マーキー化に伴い手動操作UIは非表示 */
@media (prefers-reduced-motion:reduce){ .rkf-pickup-track{ animation:none; transform:none; } }
/* ---- 6b. ブログ一覧：右→左オートマーキー（JSが .rkf-bloglist-vp でラップ＋3セット複製）---- */
.rkf-bloglist-vp{ overflow:hidden; max-width:var(--container,1160px); margin:0 auto; padding:18px 0 20px; }
.rkf-bloglist-vp .blog_list{
display:flex !important; width:max-content !important; max-width:none !important; margin:0 !important; gap:0 !important;
animation:rkfl-blogmarq 50s linear infinite; will-change:transform;
}
.rkf-bloglist-vp:hover .blog_list{ animation-play-state:paused; }
.rkf-bloglist-vp .blog_list .item{
flex:0 0 auto !important; width:clamp(280px,29vw,330px) !important; margin:0 clamp(18px,2.4vw,30px) 0 0 !important;
}
@keyframes rkfl-blogmarq{ from{ transform:translateX(0); } to{ transform:translateX(calc(-100% / 3)); } }
@media (prefers-reduced-motion:reduce){ .rkf-bloglist-vp .blog_list{ animation:none; } }
.rkf-pickup-track::-webkit-scrollbar{ display:none; }
.rkf-pickcard{
position:relative; flex:0 0 auto; width:clamp(264px,30vw,348px); margin-right:clamp(16px,1.8vw,26px); scroll-snap-align:start;
border-radius:18px; overflow:hidden; background:var(--navy,#1E3A5B); text-decoration:none;
box-shadow:var(--shadow-sm,0 8px 24px -16px rgba(30,58,91,.4)); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.rkf-pickcard .ph{ display:block; position:relative; aspect-ratio:16/10; overflow:hidden; }
.rkf-pickcard .ph .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .85s var(--ease); }
.rkf-pickcard .ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(21,41,63,.78), rgba(21,41,63,0) 64%); }
.rkf-pickcard .tx{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:15px 18px 17px; }
.rkf-pickcard .jp{ display:block; font-family:var(--font-jp,sans-serif); font-weight:900; font-size:1.05rem; color:#fff; letter-spacing:.02em; }
.rkf-pickcard .en{ display:block; margin-top:3px; font-family:var(--font-en,sans-serif); font-weight:600; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.rkf-pickcard .ar{ position:absolute; right:15px; top:calc(56.25% - 44px); z-index:2; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-en,sans-serif); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:background .4s, transform .4s var(--ease); }
.rkf-pickcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow,0 24px 50px -24px rgba(30,58,91,.5)); }
.rkf-pickcard:hover .ph .bg{ transform:scale(1.07); }
.rkf-pickcard:hover .ar{ background:var(--coral,#E9785C); transform:translateX(2px); }
.rkf-pickup-ctrl{ display:flex; align-items:center; gap:16px; padding:2px clamp(16px,2vw,10px) 0; }
.rkf-pickup-prog{ position:relative; flex:1; height:2px; background:var(--line,#e7e2d8); border-radius:2px; overflow:hidden; }
.rkf-pickup-prog i{ position:absolute; left:0; top:0; height:100%; width:26%; background:var(--coral,#E9785C); border-radius:2px; transition:left .3s var(--ease), width .3s var(--ease); }
.rkf-pickup-btn{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-2,#efe9df); background:#fff; cursor:pointer; position:relative; transition:background .3s, border-color .3s, opacity .3s; }
.rkf-pickup-btn::before{ content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; border-top:2px solid var(--navy,#1E3A5B); border-right:2px solid var(--navy,#1E3A5B); }
.rkf-pickup-btn.prev::before{ transform:translate(-30%,-50%) rotate(-135deg); }
.rkf-pickup-btn.next::before{ transform:translate(-70%,-50%) rotate(45deg); }
.rkf-pickup-btn:hover{ background:var(--navy,#1E3A5B); border-color:var(--navy,#1E3A5B); }
.rkf-pickup-btn:hover::before{ border-color:#fff; }
.rkf-pickup-btn[disabled]{ opacity:.32; cursor:default; }
.rkf-pickup-btn[disabled]:hover{ background:#fff; border-color:var(--line-2,#efe9df); }
.rkf-pickup-btn[disabled]:hover::before{ border-color:var(--navy,#1E3A5B); }
/* ---- 7. 数字カウントアップ演出：番号下にコーラルのバーが描画 ---- */
.rkfl-stat-bar{ display:block; width:46px; height:3px; margin:12px auto 0; border-radius:3px; background:var(--line,#e7e2d8); overflow:hidden; }
.rkfl-stat-bar i{ display:block; height:100%; width:0; background:var(--grad-warm,linear-gradient(135deg,#E9785C,#F0A07E)); border-radius:3px; transition:width 1.25s cubic-bezier(.16,1,.3,1); }
.rkfl-stats.rkfl-stat-go .rkfl-stat-bar i{ width:100%; }
#index_content_builder .rkfl-stat .rkfl-stat-bar + .rkfl-stat-label{ margin-top:11px; }
/* ---- 8. ドロワー：ネイビー化＋上部CTA＋ENラベル＋アコーディオン ---- */
#drawer_menu{ background:linear-gradient(165deg,var(--navy,#1E3A5B) 0%, var(--navy-deep,#15293F) 100%) !important; }
.rkfl-drawer-cta{ display:flex; flex-direction:column; gap:11px; padding:6px clamp(22px,6vw,40px) 20px; }
.rkfl-drawer-cta a{ display:flex; align-items:center; justify-content:center; gap:.55em; padding:15px; border-radius:12px; font-family:var(--font-jp,sans-serif); font-weight:700; font-size:1rem; text-decoration:none; transition:transform .25s var(--ease), box-shadow .3s, background .3s; }
.rkfl-drawer-cta a::after{ content:"→"; font-family:var(--font-en,sans-serif); font-weight:600; }
.rkfl-drawer-cta .c1{ background:var(--coral,#E9785C); color:#fff; box-shadow:0 14px 26px -14px rgba(233,120,92,.75); }
.rkfl-drawer-cta .c2{ background:rgba(255,255,255,.09); color:#fff; border:1px solid rgba(255,255,255,.28); }
.rkfl-drawer-cta a:active{ transform:scale(.985); }
#global_menu li.rkfl-has-acc{ position:relative; }
/* アコーディオン行はテーマの斜線矢印を隠し、± トグルに一本化 */
#global_menu li.rkfl-has-acc > a .inner::before,
#global_menu li.rkfl-has-acc > a .inner::after{ display:none !important; }
.rkfl-acc-toggle{
position:absolute; top:0; height:100px; width:56px; z-index:3;
right:max(14px, calc((100% - 1030px) / 2)); background:transparent; border:0; cursor:pointer;
}
.rkfl-acc-toggle::before,.rkfl-acc-toggle::after{
content:""; position:absolute; top:50%; right:8px; width:14px; height:2px; background:#fff; transition:transform .35s var(--ease);
}
.rkfl-acc-toggle::before{ transform:translateY(-50%); }
.rkfl-acc-toggle::after{ transform:translateY(-50%) rotate(90deg); }
.rkfl-acc-toggle.open::after{ transform:translateY(-50%) rotate(0); }
.rkfl-acc-sub{ list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; background:rgba(0,0,0,.16); transition:max-height .4s var(--ease); }
.rkfl-acc-sub.open{ max-height:260px; }
.rkfl-acc-sub a{ display:block; padding:13px clamp(22px,6vw,40px) 13px calc(clamp(22px,6vw,40px) + 16px); color:rgba(255,255,255,.8) !important; font-size:.92rem; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.06); transition:color .3s, background .3s; }
.rkfl-acc-sub a::before{ content:"└ "; color:var(--coral,#E9785C); }
.rkfl-acc-sub a:hover{ background:rgba(255,255,255,.06); color:#fff !important; }
/* テーマのドロワー行高に追従（>750px=100px / ≤750px=50px） */
@media (max-width:750px){ .rkfl-acc-toggle{ height:50px; } .rkfl-acc-sub a{ padding-top:12px; padding-bottom:12px; } }
/* ---- 9. reduced-motion：導入・リビール・パララックス・演出を無効化（即時可視） ---- */
@media (prefers-reduced-motion: reduce){
html.rkfl-splashing::before,
html.rkfl-splashing::after{ display:none !important; }
body.home #header_slider_catch .catch .rkfl-lineinner{ transform:none !important; transition:none !important; }
#page_header .bg_image{ transform:none !important; }
.rkfl-stat-bar i{ width:100% !important; transition:none !important; }
.rkf-pickup-track{ scroll-behavior:auto; }
}