/* ===== AINA QUACK — WHITE × GOLD THEME ===== */
:root {
--black: #faf8f3;
--fire: #b8872a;
--fire-rgb: 184, 135, 42;
--ember: #9a6e1a;
--heat: #7a5514;
--heat-rgb: 122, 85, 20;
--gold2: #d4a850;
--gold2-rgb: 212, 168, 80;
--gold-lite: #f5d98a;
--gold-lite-rgb: 245, 217, 138;
--foil-dark: #6b1535; /* 箔・見出し・下線の深い差し色（gold は signature の濃赤） */
--foil-dark-rgb: 107, 21, 53;
/* 下地（背景・ヘッダー・セクション地・カード地）。テーマごとに差し替える */
--bg-top: #faf8f3; --bg-mid: #f5f0e0; --bg-end: #f0e8d0;
--section: #f0e8d4; --section-alt: #f5f0eb; --header-bg: #f2e8c8;
--paper-base: #f8f1e2; --paper-1: #faf4e8; --paper-2: #f3ecd9; --paper-3: #ede2cb;
--smoke: #5a4830;
--muted: #8a7860;
--cream: #f0e8d4;
--ink: #1c1408;
--dark: #f5f0e6;
--dark2: #ece4d0;
--text: #1c1408;
--border: rgba(184, 135, 42, 0.2);
}
/* ===== 文字箔の切替（背景は常に金。ポイント文字だけ 赤金 / 青金 / 金 を切替） =====
で --rg-foil（見出し・タイトル・番号の箔）だけ差し替える。
下地・グロー・アクセントは :root（金）のまま固定。既定は red（HTML 属性＋head 先行スクリプト）。
main.js が localStorage から復元し、先行スクリプトで描画前に適用してチラつきを防ぐ。 */
html[data-theme="red"] {
--rg-foil: linear-gradient(100deg,
#6b1224 0%, #b81f2b 15%, #d4a850 33%, #f6e3a8 46%,
#b81f2b 60%, #6b1224 76%, #c62828 100%);
--num-color: #b81f2b;
}
html[data-theme="blue"] {
--rg-foil: linear-gradient(100deg,
#11283f 0%, #1f5f86 15%, #d4a850 33%, #f6e3a8 46%,
#1f5f86 60%, #11283f 76%, #2f7e94 100%);
--num-color: #1f5f86;
}
html[data-theme="gold"] {
--rg-foil: linear-gradient(100deg,
#6b1535 0%, #b8872a 18%, #f5d98a 32%, #b8872a 48%,
#6b1535 62%, #b8872a 82%, #6b1535 100%);
--num-color: #6b1535;
}
/* ヒーロー背景：炎→ゴールドグロー */
.hero-fire {
background:
radial-gradient(ellipse 60% 80% at 80% 60%, rgba(var(--fire-rgb), 0.18) 0%, transparent 65%),
radial-gradient(ellipse 40% 50% at 20% 30%, rgba(var(--gold2-rgb), 0.12) 0%, transparent 60%),
radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--fire-rgb), 0.1) 0%, transparent 50%),
linear-gradient(160deg, var(--bg-top) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
}
/* スキャンラインを無効化（明るいテーマに不要） */
.hero-grain {
display: none;
}
/* フィードパネル：暗背景→明背景 */
.hero-feed-panel {
background: rgba(250, 248, 243, 0.92);
border: 1px solid rgba(var(--fire-rgb), 0.3);
border-top: 2px solid var(--fire);
box-shadow: 0 4px 32px rgba(var(--fire-rgb), 0.08), inset 0 0 0 1px rgba(var(--fire-rgb), 0.05);
}
.hero-feed-item:first-child {
background: rgba(var(--fire-rgb), 0.06);
}
/* ヘッダー：ハードコードの暗背景を明るく */
.site-header {
background: var(--header-bg);
border-bottom-color: rgba(var(--fire-rgb), 0.2);
}
.site-logo {
color: var(--text);
}
.site-nav a {
color: var(--smoke);
}
.site-nav a:hover {
color: var(--fire);
}
/* モバイル：ハートボタンで開閉するアコーディオンメニュー */
@media (max-width: 640px) {
.site-header {
padding: calc(0.7rem + env(safe-area-inset-top, 0px)) 1rem 0.7rem;
}
.site-logo {
font-size: 1.3rem;
letter-spacing: 1.5px;
}
.nav-toggle { display: block; }
.site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
background: rgba(8, 4, 4, 0.8); /* 80% 暗い半透明 */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(var(--fire-rgb), 0.3);
max-height: 0;
overflow: hidden;
transition: max-height 0.32s ease;
}
.site-header.nav-open .site-nav {
max-height: 80vh;
}
.site-nav a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 1.3rem;
font-size: 0.82rem;
letter-spacing: 2px;
color: #faf8f3;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.site-nav a:first-child { border-top: none; }
.site-nav a:hover,
.site-nav a:active { color: var(--fire); }
/* 各項目の先頭にゴールドのハート */
.site-nav a::before {
content: "";
width: 13px;
height: 13px;
flex-shrink: 0;
background: var(--fire);
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z'/%3E%3C/svg%3E") center / contain no-repeat;
}
}
/* モバイル: セクションごとのスクロール領域チューニング */
@media (max-width: 640px) {
/* NEWS / BLOGS / FAN VOICES はページと一緒に自然スクロールさせる。
内部スクロール(max-height + overflow-y)は iOS Safari で
ページのスクロールを奪い「スクロールが止まる」原因になるため廃止。 */
}
/* PICK UP カード：暗背景→明るいクリーム */
.hero-pickup {
background: rgba(250, 248, 243, 0.92);
border: 1px solid rgba(var(--fire-rgb), 0.3);
border-left: 3px solid var(--fire);
}
.hero-pickup-text {
color: var(--ink);
}
/* THE END は装飾なので fire のまま、本文系のサブは AA 準拠の heat に */
.hero-title-sub {
color: var(--fire);
}
.hero-tagline {
color: var(--heat);
}
.section-heading-sub {
color: var(--heat);
}
.hero-feed-mobile-label {
color: var(--heat);
}
/* ヒーロータイトル：ボルドー */
.hero-title {
color: var(--foil-dark);
text-shadow:
0 0 60px rgba(var(--foil-dark-rgb), 0.2),
0 0 160px rgba(var(--foil-dark-rgb), 0.08);
}
/* セクション番号もボルドーで統一 */
.section-num {
color: var(--foil-dark);
}
/* セクション見出し: ベースライン揃え + 境界線は ::after で一体化 + 上下paddingを連動 */
.section-heading,
.section-heading.light {
gap: clamp(0.5rem, 1.4vw, 1.5rem);
align-items: baseline;
border-bottom: none;
padding: clamp(2rem, 4vw, 4rem) clamp(1.2rem, 2.5vw, 2.5rem) clamp(0.7rem, 1.3vw, 1.2rem);
}
/* セクション見出しアンダーライン */
.section-heading::after {
background: var(--foil-dark);
}
/* ニュースセクション背景 */
.section-news {
background: var(--section);
}
.news-row-title {
color: var(--text);
}
.news-row {
border-bottom-color: rgba(var(--fire-rgb), 0.15);
}
.news-row:hover {
background: rgba(var(--fire-rgb), 0.05);
}
/* FAN VOICESセクション（コンテンツ列と同じ温かいクリームに統一＝白帯を解消） */
.section-voices {
background: var(--section-alt);
}
/* YouTubeセクション（FAN VOICESの白と差をつけるため、はっきりクリームに） */
.section-youtube {
background: var(--section);
}
/* ブログセクション (news と揃えて --dark) */
.section-blogs {
background: #ffffff;
}
/* セクション見出しのライトバリアント */
.section-heading.light h2,
.section-heading.light .section-num {
color: var(--ink);
}
.section-heading.light::after {
background: var(--fire);
}
/* カレンダー（すでにライトなのでほぼそのまま） */
.cal-nav-btn {
background: var(--fire);
border-color: var(--fire);
}
.cal-nav-btn:hover {
background: none;
color: var(--fire);
}
/* カレンダー購読ボタン（cal-promo バナー内に配置） */
.cal-subscribe-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 1.3rem;
background: var(--fire);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 1.5px;
text-decoration: none;
border-radius: 4px;
border: 1px solid var(--fire);
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cal-subscribe-btn:hover {
background: var(--heat);
border-color: var(--heat);
transform: translateY(-1px);
}
.cal-subscribe-btn:focus-visible {
outline: 2px solid var(--heat);
outline-offset: 2px;
}
/* 購読解除方法（折りたたみ）— カレンダー左端と揃える */
.cal-unsubscribe {
margin: 0.2rem 0 1.2rem;
padding: 0 2.5rem;
font-size: 0.8rem;
color: var(--muted);
}
.cal-unsubscribe > summary {
cursor: pointer;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--heat);
padding: 0.5rem 0;
list-style: none;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.cal-unsubscribe > summary::-webkit-details-marker { display: none; }
.cal-unsubscribe > summary::before {
content: "▸";
font-size: 0.7rem;
transition: transform 0.15s ease;
display: inline-block;
}
.cal-unsubscribe[open] > summary::before {
transform: rotate(90deg);
}
.cal-unsubscribe > summary:hover { color: var(--ember); }
.cal-unsubscribe > summary:focus-visible {
outline: 2px solid var(--heat);
outline-offset: 2px;
border-radius: 2px;
}
.cal-unsubscribe-list {
margin: 0.5rem 0 0;
padding: 0.8rem 1rem;
background: rgba(255, 252, 245, 0.55);
border-left: 2px solid rgba(var(--fire-rgb), 0.4);
border-radius: 0 4px 4px 0;
line-height: 1.6;
}
.cal-unsubscribe-list dt {
font-weight: 700;
color: var(--text);
margin-top: 0.6rem;
}
.cal-unsubscribe-list dt:first-child { margin-top: 0; }
.cal-unsubscribe-list dd {
margin: 0.1rem 0 0;
padding-left: 0.8rem;
font-size: 0.78rem;
}
/* フッター */
.site-footer {
background: var(--cream);
color: var(--ink);
}
.footer-logo { color: var(--ink); }
.footer-logo span { color: var(--fire); }
.footer-note {
color: var(--muted);
}
/* =========================================================
RICH LAYERS — 質感・テクスチャの重ね掛けレイヤー
body に .rich-foil / .rich-paper を付けると各レイヤーが発動。
複数同時付与も可。
========================================================= */
/* ---------- 1) ゴールド箔風グラデーション ----------
PICK UP / セクション見出し / ボタンに金属箔っぽい光沢を
*/
.rich-foil .hero-title,
.rich-foil .section-heading h2,
.rich-foil .section-num {
background: linear-gradient(
100deg,
var(--foil-dark) 0%,
var(--fire) 18%,
var(--gold-lite) 32%,
var(--fire) 48%,
var(--foil-dark) 62%,
var(--fire) 82%,
var(--foil-dark) 100%
);
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: none;
/* filter: drop-shadow は background-clip:text と併用すると iOS Safari で
タイトルが永続合成レイヤー化し、スクロール時に画面上部へ残像化するため不使用 */
transition: background-position 1.2s ease;
}
/* 登場アニメ着地時の一瞬の点火（すぐ消えて通常のフォイルに戻る。薄め） */
.hero-title.hero-title-lit {
animation: heroIgnite 1.5s ease-in-out;
}
/* 休止状態(明るさ1)から滑らかに山を作って戻る＝段差なし。点火は薄め */
@keyframes heroIgnite {
0% { filter: drop-shadow(0 1px 0 rgba(var(--foil-dark-rgb), 0.18)) drop-shadow(0 0 0 rgba(var(--fire-rgb), 0)) brightness(1); }
45% { filter: drop-shadow(0 1px 0 rgba(var(--foil-dark-rgb), 0.18)) drop-shadow(0 0 16px rgba(var(--fire-rgb), 0.38)) brightness(1.08); }
100% { filter: drop-shadow(0 1px 0 rgba(var(--foil-dark-rgb), 0.18)) drop-shadow(0 0 0 rgba(var(--fire-rgb), 0)) brightness(1); }
}
.rich-foil .section-num {
opacity: 1;
background-image: linear-gradient(
160deg,
var(--foil-dark) 0%,
var(--foil-dark) 30%,
var(--fire) 70%,
var(--foil-dark) 100%
);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
filter:
drop-shadow(0 1px 1px rgba(var(--foil-dark-rgb), 0.3));
font-size: clamp(1.9rem, 4vw, 3.4rem);
letter-spacing: 0;
font-weight: 400;
align-self: baseline;
padding-bottom: 0;
}
.rich-foil .hero-title:hover,
.rich-foil .section-heading h2:hover {
background-position: 100% 50%;
}
/* ピックアップ枠の背景は控えめに（金グラデのアルファを下げてクリーム地を活かす） */
.rich-foil .hero-pickup {
background-image: linear-gradient(
135deg,
rgba(var(--gold-lite-rgb), 0.40) 0%,
rgba(var(--fire-rgb), 0.24) 35%,
rgba(var(--heat-rgb), 0.28) 65%,
rgba(var(--gold-lite-rgb), 0.30) 100%
);
border-color: rgba(var(--fire-rgb), 0.5);
}
/* ボタンは CTA なので従来どおり濃いめの金グラデを維持 */
.rich-foil .hero-pickup-btn {
background-image: linear-gradient(
135deg,
rgba(var(--gold-lite-rgb), 0.55) 0%,
rgba(var(--fire-rgb), 0.35) 35%,
rgba(var(--heat-rgb), 0.45) 65%,
rgba(var(--gold-lite-rgb), 0.4) 100%
);
border-color: rgba(var(--fire-rgb), 0.55);
color: var(--heat);
font-weight: 800;
}
.rich-foil .hero-pickup-btn:hover {
background-image: linear-gradient(135deg, var(--fire) 0%, var(--gold-lite) 50%, var(--fire) 100%);
color: #fff;
}
.rich-foil .section-heading::after {
background: linear-gradient(
90deg,
var(--foil-dark) 0%,
var(--foil-dark) 12%,
var(--fire) 28%,
rgba(var(--fire-rgb), 0.55) 50%,
rgba(var(--foil-dark-rgb), 0.3) 100%
);
height: 2px;
width: auto;
left: 0;
right: 0;
}
/* モバイル: 上の下線は右へフェードして境界が曖昧になるため、左右まで均一に見える対称グラデにする。
light 見出し(FAN VOICES / SCHEDULE / FAN BLOGS)も同じ下線に揃える。 */
@media (max-width: 640px) {
.rich-foil .section-heading::after,
.rich-foil .section-heading.light::after {
background: linear-gradient(90deg, var(--foil-dark) 0%, var(--fire) 50%, var(--foil-dark) 100%);
height: 2px;
}
}
/* PC も同様に「上の細い線＋下の太い線」。下線は左右均一の対称グラデで太め(3px) */
@media (min-width: 641px) {
.rich-foil .section-heading::after,
.rich-foil .section-heading.light::after {
background: linear-gradient(90deg, var(--foil-dark) 0%, var(--fire) 50%, var(--foil-dark) 100%);
height: 3px;
}
}
/* ---------- 2) 和紙テクスチャ背景 ----------
ライトセクション(news/blogs/voices/youtube)にSVG繊維テクスチャを敷く
*/
.rich-paper .hero-fire,
.rich-paper .site-footer {
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse at 30% 20%, rgba(var(--fire-rgb),0.07), transparent 60%),
radial-gradient(ellipse at 80% 90%, rgba(var(--foil-dark-rgb),0.05), transparent 65%);
background-size: 240px 240px, 100% 100%, 100% 100%;
background-blend-mode: multiply, normal, normal;
}
/* ニュース行・ブログカードはテクスチャが透けすぎないよう半透明白で底上げ → 本文視認性確保 */
.rich-paper .news-row {
background-color: rgba(255, 252, 245, 0.55);
}
.rich-paper .hero-fire {
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse 60% 80% at 80% 60%, rgba(var(--fire-rgb),0.22) 0%, transparent 65%),
radial-gradient(ellipse 40% 50% at 20% 30%, rgba(var(--gold2-rgb),0.14) 0%, transparent 60%),
linear-gradient(160deg, var(--bg-top) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
}
/* ---------- 3) hero-sparkles — Hero限定の発光収縮アニメ ----------
Hero内に7個の光点を配置、各々が異なる delay で fade in→拡大→fade out。
常時動く演出ではなく「時々ふわっと光って消える」上品な瞬き。
DOM追加は span × 7（軽量）、CSSアニメのみ。
*/
.hero-sparkles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0; /* hero-fire(背景) の上、hero-inner(本文 z-index:1) の下 */
}
.sparkle {
position: absolute;
width: 110px;
height: 110px;
/* 発光グラデを内蔵したゴールドのハート（mask不使用＝iOS Safariでも確実に描画） */
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cdefs%3E%3CradialGradient%20id='g'%20cx='50%25'%20cy='42%25'%20r='60%25'%3E%3Cstop%20offset='0%25'%20stop-color='rgb(255,250,225)'%20stop-opacity='0.95'/%3E%3Cstop%20offset='25%25'%20stop-color='rgb(245,217,138)'%20stop-opacity='0.7'/%3E%3Cstop%20offset='60%25'%20stop-color='rgb(184,135,42)'%20stop-opacity='0.35'/%3E%3Cstop%20offset='100%25'%20stop-color='rgb(184,135,42)'%20stop-opacity='0.08'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath%20d='M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z'%20fill='url(%23g)'/%3E%3C/svg%3E");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: blur(1.5px);
opacity: 0;
transform: scale(0);
/* 各 sparkle の animation-duration を nth-child で個別指定 → 周期ズレでランダム感 */
animation: hero-sparkle-twinkle 22s ease-in-out infinite;
/* will-change は iOS Safari で永続合成レイヤーを生み、hero の overflow:hidden を
突き抜けてスクロール時に残像化するため不使用（hero 側の合成レイヤーに内包させる） */
}
/* 10個の sparkle: 位置・サイズ・delay・duration をすべて散らす */
/* duration を 19〜30秒の互いに素な値にすると周期がほぼ同期しない */
/* 全 delay は +2s 起点（ページロード直後の初動を避ける） */
.sparkle:nth-child(1) { top: 8%; left: 14%; animation-delay: 2.0s; animation-duration: 23s; width: 90px; height: 90px; }
.sparkle:nth-child(2) { top: 58%; left: 32%; animation-delay: 3.7s; animation-duration: 19s; width: 80px; height: 80px; }
.sparkle:nth-child(3) { top: 18%; left: 68%; animation-delay: 5.9s; animation-duration: 27s; width: 140px; height: 140px; }
.sparkle:nth-child(4) { top: 74%; left: 58%; animation-delay: 7.4s; animation-duration: 21s; width: 70px; height: 70px; }
.sparkle:nth-child(5) { top: 34%; left: 86%; animation-delay: 9.6s; animation-duration: 25s; width: 100px; height: 100px; }
.sparkle:nth-child(6) { top: 66%; left: 6%; animation-delay: 11.8s; animation-duration: 22s; width: 90px; height: 90px; }
.sparkle:nth-child(7) { top: 4%; left: 48%; animation-delay: 14.1s; animation-duration: 29s; width: 120px; height: 120px; }
.sparkle:nth-child(8) { top: 46%; left: 22%; animation-delay: 16.3s; animation-duration: 20s; width: 110px; height: 110px; }
.sparkle:nth-child(9) { top: 86%; left: 78%; animation-delay: 18.4s; animation-duration: 26s; width: 90px; height: 90px; }
.sparkle:nth-child(10) { top: 28%; left: 4%; animation-delay: 20.7s; animation-duration: 24s; width: 80px; height: 80px; }
/* モバイルは画面が狭いので全体的に小さめ＋大小をさらに散らす */
@media (max-width: 640px) {
.sparkle:nth-child(1) { width: 46px; height: 46px; }
.sparkle:nth-child(2) { width: 32px; height: 32px; }
.sparkle:nth-child(3) { width: 70px; height: 70px; }
.sparkle:nth-child(4) { width: 28px; height: 28px; }
.sparkle:nth-child(5) { width: 52px; height: 52px; }
.sparkle:nth-child(6) { width: 40px; height: 40px; }
.sparkle:nth-child(7) { width: 62px; height: 62px; }
.sparkle:nth-child(8) { width: 36px; height: 36px; }
.sparkle:nth-child(9) { width: 48px; height: 48px; }
.sparkle:nth-child(10) { width: 30px; height: 30px; }
}
@keyframes hero-sparkle-twinkle {
0%, 100% { opacity: 0; transform: scale(0); }
2% { opacity: 0.95; transform: scale(0.7); } /* ふわっと現れる */
6% { opacity: 0.85; transform: scale(1.0); } /* ピーク */
14% { opacity: 0; transform: scale(1.7); } /* 広がりながら消える (約3秒) */
}
/* モーション過敏配慮 */
@media (prefers-reduced-motion: reduce) {
.sparkle {
animation: none;
}
}
/* ===== SHARE BUTTONS ===== */
/* Hero のシェアボタン：PC・モバイル両方で右下フロート（控えめ・縦並び） */
.hero-share {
position: fixed;
bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); /* scroll-top-btn (bottom 2rem + 44px) を避ける */
right: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-top: 0;
opacity: 0.78;
transition: opacity 0.25s ease;
z-index: 50;
}
.hero-share:hover,
.hero-share:focus-within {
opacity: 1;
}
.hero-share .share-btn {
background: rgba(250, 248, 243, 0.78);
border-color: rgba(var(--fire-rgb), 0.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.footer-share {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 1rem 2rem 0;
}
.footer-share-label {
font-family: 'Bebas Neue', sans-serif;
font-size: 0.85rem;
letter-spacing: 3px;
color: var(--muted);
margin-right: 0.3rem;
}
.share-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(250, 248, 243, 0.85);
border: 1px solid rgba(var(--fire-rgb), 0.4);
color: var(--heat);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
/* タップ判定領域を 44px+ に拡張（視覚サイズは変えない） */
.share-btn::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
}
.share-btn:hover {
background: var(--fire);
color: #fff;
border-color: var(--fire);
transform: translateY(-2px);
}
.share-btn svg {
width: 16px;
height: 16px;
}
@media (max-width: 640px) {
/* モバイル: 共有ボタンは左下、scroll-top-btn は右下に分離して干渉回避 */
.hero-share {
bottom: 1rem;
left: 1rem;
right: auto;
gap: 0.4rem;
}
.hero-share .share-btn {
width: 30px;
height: 30px;
}
/* モバイル時のタップ判定はさらに広げて 44px+ を確保 */
.hero-share .share-btn::before {
inset: -8px;
}
.hero-share .share-btn svg {
width: 13px;
height: 13px;
}
.footer-share {
padding: 1rem 1.2rem 0;
}
/* フッターメニューを5項目とも1行に収める（左右余白を詰め・間隔/文字も詰める） */
.site-footer { padding-left: 1.2rem; padding-right: 1.2rem; }
.footer-nav {
gap: 0.7rem;
flex-wrap: nowrap;
}
.footer-nav a {
font-size: 0.7rem;
letter-spacing: 0.5px;
}
}
/* ===== 背景テーマ切替スウォッチ（右下・scroll-top の左に配置） ===== */
.theme-switch {
position: fixed;
bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
right: calc(2rem + 46px + 0.8rem); /* scroll-top-btn(46px, right 2rem) の左隣 */
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.6rem;
background: rgba(250, 248, 243, 0.82);
border: 1px solid rgba(var(--fire-rgb), 0.35);
border-radius: 999px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 50;
}
/* 「色を選べる」ことを示すパレットアイコン（装飾・操作不可） */
.theme-switch-icon {
display: inline-flex;
align-items: center;
color: var(--heat);
opacity: 0.7;
margin-right: 0.05rem;
pointer-events: none;
}
.theme-swatch {
position: relative;
width: 22px;
height: 22px;
padding: 0;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.85);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* タップ判定を 44px+ に拡張（見た目サイズは変えない） */
.theme-swatch::before {
content: "";
position: absolute;
inset: -11px;
border-radius: 50%;
}
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch[data-theme-set="red"] { background: #c0492c; }
.theme-swatch[data-theme-set="blue"] { background: #2f7e94; }
.theme-swatch[data-theme-set="gold"] { background: #b8872a; }
/* 選択中スウォッチを白＋黒のリングで強調 */
html[data-theme="red"] .theme-swatch[data-theme-set="red"],
html[data-theme="blue"] .theme-swatch[data-theme-set="blue"],
html[data-theme="gold"] .theme-swatch[data-theme-set="gold"] {
transform: scale(1.12);
box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.45);
}
.theme-swatch:focus-visible {
outline: 2px solid var(--heat);
outline-offset: 2px;
}
@media (max-width: 640px) {
.theme-switch {
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
right: calc(1rem + 44px + 0.6rem); /* モバイル scroll-top(44px, right 1rem) の左隣 */
padding: 0.4rem 0.5rem;
gap: 0.42rem;
}
.theme-swatch { width: 20px; height: 20px; }
.theme-swatch::before { inset: -12px; }
}
/* ===== A11Y: キーボードフォーカスリング ===== */
.site-nav a:focus-visible,
.footer-nav a:focus-visible,
.fanclub-tile:focus-visible,
.sns-card:focus-visible,
.hero-pickup-btn:focus-visible,
.news-row:focus-visible,
.feat-card:focus-visible,
.voices-nav:focus-visible,
.scroll-top-btn:focus-visible,
.cal-nav-btn:focus-visible,
.footer-disclaimer a:focus-visible,
.footer-credit a:focus-visible,
.site-logo:focus-visible,
.footer-logo:focus-visible,
.share-btn:focus-visible,
.nav-toggle:focus-visible {
outline: 2px solid var(--heat);
outline-offset: 2px;
border-radius: 2px;
}
/* ===== A11Y: 小サイズラベルのコントラスト =====
明背景に乗る小ラベルは --fire(約3:1) だと小文字 AA(4.5:1) 未達。
--heat(約6.3:1) に置換。大見出し・装飾(.pickup-label 等)は --fire 維持。 */
.news-row-source,
.blog-card-source,
.yt-channel,
.fanclub-tile-label,
.hero-feed-label,
.cal-event-date {
color: var(--heat);
}
.hero-feed-label {
border-bottom-color: rgba(122, 85, 20, 0.25);
}
/* ===== セクション境界の波 =====
セクション自身の「上端」を波形にマスクで切り取る。波より上（谷の部分）は
背景(=上のセクションの色)が見え、波より下はこのセクションの色。波＝境界そのもの。
色を別途変える必要はなく、波のラインに色がぴったり揃う。 */
.sec-wave {
position: relative;
--wave-h: 60px;
-webkit-mask:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='60'%20viewBox='0%200%201200%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2060%20H1200%20V30%20Q%201000%202%20800%2030%20T%20400%2030%20T%200%2030%20Z'%20fill='%23000'/%3E%3C/svg%3E") top center / 100% var(--wave-h) no-repeat,
linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
mask:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='60'%20viewBox='0%200%201200%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2060%20H1200%20V30%20Q%201000%202%20800%2030%20T%20400%2030%20T%200%2030%20Z'%20fill='%23000'/%3E%3C/svg%3E") top center / 100% var(--wave-h) no-repeat,
linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
filter: drop-shadow(0 -2px 4px rgba(90, 70, 40, 0.22));
}
/* 「下端」を波形に切り取る（ヒーロー等。背景は維持、下辺だけ波） */
.wave-bottom {
--wave-h: 60px;
-webkit-mask:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='60'%20viewBox='0%200%201200%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200%20H1200%20V30%20Q%201000%2058%20800%2030%20T%20400%2030%20T%200%2030%20Z'%20fill='%23000'/%3E%3C/svg%3E") bottom center / 100% var(--wave-h) no-repeat,
linear-gradient(#000, #000) top center / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
mask:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='60'%20viewBox='0%200%201200%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200%20H1200%20V30%20Q%201000%2058%20800%2030%20T%20400%2030%20T%200%2030%20Z'%20fill='%23000'/%3E%3C/svg%3E") bottom center / 100% var(--wave-h) no-repeat,
linear-gradient(#000, #000) top center / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
filter: drop-shadow(0 2px 4px rgba(90, 70, 40, 0.18));
}
/* 上端・下端の両方を波で切る（クリーム側セクション用。上下の白へ波を出す） */
/* 各セクションの上端を波で切り、前のセクションへ少し重ねる。
谷（透明部）には前セクションの色が出る＝白いbodyが出ない。 */
.wave-top {
--wave-h: 60px;
position: relative;
margin-top: calc(-1 * var(--wave-h));
padding-top: var(--wave-h);
-webkit-mask:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='60'%20viewBox='0%200%201200%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2060%20H1200%20V30%20Q%201000%202%20800%2030%20T%20400%2030%20T%200%2030%20Z'%20fill='%23000'/%3E%3C/svg%3E") top center / 100% var(--wave-h) no-repeat,
linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
mask:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='60'%20viewBox='0%200%201200%2060'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2060%20H1200%20V30%20Q%201000%202%20800%2030%20T%20400%2030%20T%200%2030%20Z'%20fill='%23000'/%3E%3C/svg%3E") top center / 100% var(--wave-h) no-repeat,
linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
filter: drop-shadow(0 2px 3px rgba(90, 70, 40, 0.12));
}
/* 重ねられる側（前セクション）の下端に余白を確保（重なりで内容が隠れないよう） */
.section-pickup,
.section-youtube,
.section-voices,
.section-schedule,
.section-official,
.section-news {
padding-bottom: 4.5rem;
}
@media (max-width: 640px) {
.wave-bottom, .wave-top { --wave-h: 34px; }
}
/* 固定ヘッダー分、アンカー遷移時に見出しが隠れないよう余白を確保 */
#youtube, #voices, #schedule, #news, #blogs { scroll-margin-top: 80px; }
/* ヒーローサブ文タイプライター（点滅カーソル＋空表示時の高さ確保） */
.hero-sub { min-height: 1.2em; }
.hero-sub.typing::after {
content: "";
display: inline-block;
width: 2px;
height: 1em;
margin-left: 3px;
background: currentColor;
vertical-align: -0.12em;
animation: heroCaret 0.7s step-end infinite;
}
@keyframes heroCaret { 50% { opacity: 0; } }
/* ===== Pick up Movie おすすめコメント枠（管理人イチ推し度・🦆評価） ===== */
.pickup-rec {
width: 92%;
max-width: 760px;
margin: 16px auto 0;
background-color: var(--paper-base);
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(135deg, var(--paper-1) 0%, var(--paper-2) 60%, var(--paper-3) 100%);
background-size: 150px 150px, 100% 100%;
background-blend-mode: multiply, normal;
border: 2px solid rgba(var(--fire-rgb), 0.55);
border-radius: 14px;
padding: 1.05rem 1.3rem 1.15rem;
min-height: 6.5rem;
box-shadow: 0 3px 12px rgba(var(--fire-rgb), 0.18);
text-align: left;
}
.pickup-rec-top {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.pickup-label-kicker {
display: block;
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(0.95rem, 1.4vw, 1.35rem);
font-weight: 900;
letter-spacing: 4px;
color: var(--fire);
margin-bottom: 0.1rem;
}
.pickup-rec-lbl {
font-weight: 900;
letter-spacing: 1px;
font-size: 0.9rem;
color: var(--heat);
}
.pickup-rec-ducks { letter-spacing: 2px; font-size: 1.2rem; line-height: 1; }
.pickup-rec-title { font-weight: 900; font-size: 1.08rem; line-height: 1.3; color: var(--ink); margin-bottom: 0.35rem; letter-spacing: 0.01em; }
.pickup-rec-cmt { font-weight: 700; font-size: 0.95rem; line-height: 1.65; color: var(--ink); }
.pickup-rec-by { margin-top: 0.7rem; text-align: right; font-size: 0.82rem; color: var(--heat); font-weight: 700; }
/* ===== カレンダー「使ってほしい」管理人バナー（金枠・メッセージ＋ボタン一体） ===== */
.cal-promo {
margin: 0 2.5rem;
background-color: var(--paper-base);
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(135deg, var(--paper-1) 0%, var(--paper-2) 60%, var(--paper-3) 100%);
background-size: 150px 150px, 100% 100%;
background-blend-mode: multiply, normal;
border: 2px solid rgba(var(--fire-rgb), 0.55);
border-radius: 14px;
padding: 1.2rem 1.4rem 1.3rem;
box-shadow: 0 4px 16px rgba(var(--fire-rgb), 0.20);
text-align: left;
}
.cal-promo-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 900; font-size: 1.05rem; color: var(--heat); margin-bottom: 0.5rem; }
.cal-promo-body { font-weight: 700; font-size: 0.92rem; line-height: 1.7; color: var(--ink); }
.cal-promo-body b { color: var(--foil-dark); }
.cal-promo-cta { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.cal-promo .cal-subscribe-btn { padding: 0.75rem 1.6rem; font-size: 0.85rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(var(--fire-rgb), 0.4); }
.cal-promo-by { margin-top: 0.9rem; text-align: right; font-size: 0.82rem; color: var(--heat); font-weight: 700; }
@media (max-width: 640px) { .cal-promo { margin: 0 1rem; } }
/* ===== PICNIC 初回アクセス カウントダウン演出 ===== */
.picnic-intro {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
overflow: hidden;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse 90% 70% at 50% 45%, #241a0a 0%, #14100a 45%, #0a0805 100%);
cursor: pointer;
}
.picnic-intro.is-active { display: flex; }
/* 幕引け：上下に開いて消える */
.picnic-intro.is-leaving { animation: picnicCurtain 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
/* ゴールドのスイープ光 */
.picnic-intro-bg {
position: absolute;
inset: -20%;
background:
radial-gradient(circle at 50% 50%, rgba(217, 170, 60, 0.18) 0%, transparent 55%),
conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(217, 170, 60, 0.10) 40deg, transparent 90deg, transparent 270deg, rgba(217, 170, 60, 0.08) 320deg, transparent 360deg);
animation: picnicSpin 14s linear infinite;
}
/* 背後の金色 光線バースト（ファイナル用に華やかさ追加） */
.picnic-intro-rays {
position: absolute;
left: 50%; top: 42%;
width: 200vmax; height: 200vmax;
transform: translate(-50%, -50%) rotate(0deg);
background: repeating-conic-gradient(from 0deg at 50% 50%,
rgba(244, 216, 148, 0.13) 0deg 5deg,
transparent 5deg 17deg);
-webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,0.55) 28%, transparent 60%);
mask: radial-gradient(circle, #000 0%, rgba(0,0,0,0.55) 28%, transparent 60%);
pointer-events: none;
animation: picnicRaysSpin 26s linear infinite, picnicRaysPulse 3.6s ease-in-out infinite;
}
@keyframes picnicRaysSpin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes picnicRaysPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }
.picnic-intro-sparkles { position: absolute; inset: 0; pointer-events: none; }
.picnic-intro-sparkles span {
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: #f4d894;
box-shadow: 0 0 8px 2px rgba(244, 216, 148, 0.8);
opacity: 0;
animation: picnicTwinkle 2.6s ease-in-out infinite;
}
.picnic-intro-sparkles span:nth-child(1) { left: 12%; top: 22%; animation-delay: 0.1s; }
.picnic-intro-sparkles span:nth-child(2) { left: 82%; top: 18%; animation-delay: 0.5s; }
.picnic-intro-sparkles span:nth-child(3) { left: 24%; top: 72%; animation-delay: 0.9s; }
.picnic-intro-sparkles span:nth-child(4) { left: 70%; top: 78%; animation-delay: 0.3s; }
.picnic-intro-sparkles span:nth-child(5) { left: 50%; top: 12%; animation-delay: 1.2s; }
.picnic-intro-sparkles span:nth-child(6) { left: 8%; top: 52%; animation-delay: 0.7s; }
.picnic-intro-sparkles span:nth-child(7) { left: 92%; top: 58%; animation-delay: 1.5s; }
.picnic-intro-sparkles span:nth-child(8) { left: 38%; top: 88%; animation-delay: 0.4s; }
.picnic-intro-sparkles span:nth-child(9) { left: 60%; top: 40%; animation-delay: 1.0s; }
.picnic-intro-sparkles span:nth-child(10) { left: 18%; top: 38%; animation-delay: 1.8s; }
.picnic-intro-inner {
position: relative;
text-align: center;
padding: 2rem;
max-width: 92vw;
}
.picnic-intro-kicker {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
letter-spacing: 0.38em;
font-size: clamp(0.82rem, 3.2vw, 1.45rem);
color: #d9aa3c;
/* text-transform:uppercase は HTML の「AiNA」を「AINA」にしてしまうため不使用
（HTML 側で既に希望の大文字・小文字表記にしている） */
margin-bottom: clamp(0.8rem, 2.5vh, 1.6rem);
opacity: 0;
animation: picnicFadeUp 0.7s ease-out 0.25s forwards;
}
.picnic-intro-title {
font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
font-weight: 900;
letter-spacing: 0.06em;
line-height: 0.9;
font-size: clamp(4.5rem, 22vw, 16rem);
background-image: linear-gradient(105deg, #9a6e1a 0%, #f4d894 28%, #fff7e0 46%, #f4d894 60%, #b8872a 100%);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
opacity: 0;
transform: scale(1.35);
filter: blur(14px);
animation: picnicTitleIn 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards, picnicShine 2.8s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
}
.picnic-intro-count {
margin-top: clamp(0.6rem, 2.5vh, 1.4rem);
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
color: #fff7e8;
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 0.12em;
opacity: 0;
animation: picnicFadeUp 0.7s ease-out 0.85s forwards;
}
.picnic-intro-lead { font-size: clamp(0.9rem, 3.6vw, 1.6rem); letter-spacing: 0.04em; }
.picnic-intro-num {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.2rem, 13vw, 7.4rem);
line-height: 1;
color: #f4d894;
text-shadow: 0 0 24px rgba(244, 216, 148, 0.55);
padding: 0 0.08em;
transform-origin: center 60%;
animation:
picnicNumPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s backwards,
picnicHeartbeat 1.7s ease-in-out 1.75s infinite;
}
.picnic-intro-unit { font-size: clamp(1rem, 4vw, 1.9rem); }
.picnic-intro-skip {
position: absolute;
right: clamp(1rem, 4vw, 2.5rem);
bottom: clamp(1rem, 4vh, 2.5rem);
background: transparent;
border: 1px solid rgba(217, 170, 60, 0.5);
color: #d9aa3c;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
letter-spacing: 0.2em;
font-size: 0.72rem;
padding: 0.5rem 1rem;
border-radius: 999px;
cursor: pointer;
opacity: 0;
animation: picnicFadeUp 0.6s ease-out 1.6s forwards;
transition: background 0.15s, color 0.15s;
}
.picnic-intro-skip:hover { background: rgba(217, 170, 60, 0.15); color: #f4d894; }
/* ===== GRAND FINAL 演出（ファイナル公演用に盛大に） ===== */
/* 金箔の「GRAND FINAL」バッジ */
.picnic-intro-final {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
letter-spacing: 0.34em;
font-size: clamp(0.7rem, 2.6vw, 1.15rem);
padding: 0.3em 0.85em 0.26em 1.15em;
margin-bottom: clamp(0.5rem, 1.8vh, 1.1rem);
color: #2a1c06;
background: linear-gradient(100deg, #b8872a 0%, #f6e3a8 42%, #fff7e0 52%, #f4d894 64%, #b8872a 100%);
background-size: 220% auto;
border-radius: 999px;
box-shadow: 0 0 24px rgba(244, 216, 148, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
opacity: 0;
animation: picnicFadeUp 0.7s ease-out 0.5s forwards, picnicFinalShine 3s linear 1.3s infinite;
}
@keyframes picnicFinalShine { to { background-position: 220% center; } }
/* 金色コンフェッティ（紙吹雪） */
.picnic-intro-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.picnic-intro-confetti i {
position: absolute;
top: -10%;
width: 9px; height: 14px;
border-radius: 1px;
opacity: 0;
animation: picnicConfettiFall linear infinite;
}
@keyframes picnicConfettiFall {
0% { transform: translateY(-12vh) rotateZ(0deg) rotateX(0deg); opacity: 0; }
10% { opacity: 1; }
100% { transform: translateY(112vh) rotateZ(720deg) rotateX(360deg); opacity: 0.85; }
}
.picnic-intro-confetti i:nth-child(1) { left: 3%; background:#f4d894; animation-duration:3.6s; animation-delay:0.0s; }
.picnic-intro-confetti i:nth-child(2) { left: 9%; background:#c62828; animation-duration:4.4s; animation-delay:0.8s; width:7px; height:11px; }
.picnic-intro-confetti i:nth-child(3) { left: 15%; background:#fff7e8; animation-duration:3.1s; animation-delay:1.5s; }
.picnic-intro-confetti i:nth-child(4) { left: 21%; background:#b8872a; animation-duration:4.0s; animation-delay:0.4s; width:6px; height:6px; border-radius:50%; }
.picnic-intro-confetti i:nth-child(5) { left: 27%; background:#f6e3a8; animation-duration:3.4s; animation-delay:2.1s; width:11px; height:16px; }
.picnic-intro-confetti i:nth-child(6) { left: 33%; background:#f4d894; animation-duration:4.6s; animation-delay:1.0s; width:7px; height:12px; }
.picnic-intro-confetti i:nth-child(7) { left: 39%; background:#c62828; animation-duration:3.2s; animation-delay:0.2s; width:6px; height:6px; border-radius:50%; }
.picnic-intro-confetti i:nth-child(8) { left: 45%; background:#fff7e8; animation-duration:4.2s; animation-delay:1.8s; }
.picnic-intro-confetti i:nth-child(9) { left: 51%; background:#b8872a; animation-duration:3.5s; animation-delay:0.6s; width:11px; height:16px; }
.picnic-intro-confetti i:nth-child(10) { left: 57%; background:#f4d894; animation-duration:4.8s; animation-delay:2.4s; width:7px; height:11px; }
.picnic-intro-confetti i:nth-child(11) { left: 63%; background:#f6e3a8; animation-duration:3.3s; animation-delay:1.2s; }
.picnic-intro-confetti i:nth-child(12) { left: 69%; background:#c62828; animation-duration:4.1s; animation-delay:0.3s; width:6px; height:6px; border-radius:50%; }
.picnic-intro-confetti i:nth-child(13) { left: 75%; background:#fff7e8; animation-duration:3.7s; animation-delay:2.0s; width:11px; height:16px; }
.picnic-intro-confetti i:nth-child(14) { left: 81%; background:#f4d894; animation-duration:4.3s; animation-delay:1.6s; }
.picnic-intro-confetti i:nth-child(15) { left: 87%; background:#b8872a; animation-duration:3.0s; animation-delay:0.5s; width:7px; height:12px; }
.picnic-intro-confetti i:nth-child(16) { left: 93%; background:#c62828; animation-duration:4.5s; animation-delay:1.3s; }
.picnic-intro-confetti i:nth-child(17) { left: 98%; background:#fff7e8; animation-duration:3.4s; animation-delay:0.1s; width:6px; height:6px; border-radius:50%; }
.picnic-intro-confetti i:nth-child(18) { left: 6%; background:#ff5a7a; animation-duration:3.9s; animation-delay:2.6s; }
.picnic-intro-confetti i:nth-child(19) { left: 18%; background:#f4d894; animation-duration:4.7s; animation-delay:0.9s; width:11px; height:16px; }
.picnic-intro-confetti i:nth-child(20) { left: 30%; background:#7fd4e0; animation-duration:3.2s; animation-delay:1.9s; width:6px; height:6px; border-radius:50%; }
.picnic-intro-confetti i:nth-child(21) { left: 42%; background:#fff7e8; animation-duration:4.0s; animation-delay:0.7s; }
.picnic-intro-confetti i:nth-child(22) { left: 54%; background:#f6e3a8; animation-duration:3.6s; animation-delay:2.3s; width:7px; height:12px; }
.picnic-intro-confetti i:nth-child(23) { left: 66%; background:#c62828; animation-duration:4.4s; animation-delay:0.45s; width:11px; height:16px; }
.picnic-intro-confetti i:nth-child(24) { left: 78%; background:#f4d894; animation-duration:3.1s; animation-delay:1.45s; }
.picnic-intro-confetti i:nth-child(25) { left: 90%; background:#ff5a7a; animation-duration:4.2s; animation-delay:0.25s; width:6px; height:6px; border-radius:50%; }
.picnic-intro-confetti i:nth-child(26) { left: 11%; background:#fff7e8; animation-duration:3.8s; animation-delay:1.05s; width:7px; height:12px; }
.picnic-intro-confetti i:nth-child(27) { left: 36%; background:#b8872a; animation-duration:4.9s; animation-delay:2.15s; }
.picnic-intro-confetti i:nth-child(28) { left: 60%; background:#7fd4e0; animation-duration:3.3s; animation-delay:0.55s; }
.picnic-intro-confetti i:nth-child(29) { left: 84%; background:#f4d894; animation-duration:4.1s; animation-delay:1.75s; width:11px; height:16px; }
.picnic-intro-confetti i:nth-child(30) { left: 48%; background:#c62828; animation-duration:3.5s; animation-delay:0.35s; }
@keyframes picnicTitleIn {
to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes picnicShine {
0% { background-position: 200% center; }
100% { background-position: -120% center; }
}
@keyframes picnicNumPop {
0% { transform: scale(0.4); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* ドキ・ドキ：二拍打って小休止するハートビート */
@keyframes picnicHeartbeat {
0% { transform: scale(1); }
8% { transform: scale(1.22); }
17% { transform: scale(1); }
26% { transform: scale(1.14); }
37% { transform: scale(1); }
100% { transform: scale(1); }
}
@keyframes picnicFadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes picnicSpin { to { transform: rotate(360deg); } }
@keyframes picnicTwinkle {
0%, 100% { opacity: 0; transform: scale(0.5); }
50% { opacity: 1; transform: scale(1); }
}
@keyframes picnicCurtain {
0% { clip-path: inset(0 0 0 0); opacity: 1; }
100% { clip-path: inset(50% 0 50% 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.picnic-intro-bg, .picnic-intro-sparkles, .picnic-intro-confetti, .picnic-intro-rays { display: none; }
.picnic-intro-kicker, .picnic-intro-title, .picnic-intro-count, .picnic-intro-num, .picnic-intro-skip, .picnic-intro-final {
animation: none;
opacity: 1;
transform: none;
filter: none;
}
.picnic-intro-title { -webkit-text-fill-color: transparent; }
.picnic-intro.is-leaving { animation: none; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
}
/* =========================================================
POINT TEXT 赤金（金ベースは維持し、ポイント文字だけ赤金の箔に）
対象：ヒーロータイトル / セクション見出し h2・番号 / ロゴ QUACK
※ 不要なら本ブロックを削除すれば元の金箔に戻る
========================================================= */
:root {
--rg-foil: linear-gradient(100deg,
#6b1224 0%, #b81f2b 15%, #d4a850 33%, #f6e3a8 46%,
#b81f2b 60%, #6b1224 76%, #c62828 100%);
--num-color: #b81f2b;
}
.rich-foil .hero-title,
.rich-foil .section-heading h2 {
background-image: var(--rg-foil);
background-size: 220% 100%;
background-position: 0% 50%;
}
/* 番号(01等)は箔だと桁ごとに色が割れて見えるため単色（見出しの濃色＝0の色に統一） */
.rich-foil .section-num {
background: none;
-webkit-text-fill-color: var(--num-color);
text-fill-color: var(--num-color);
color: var(--num-color);
filter: none;
}