/* @import は head.php の に移動（並列ダウンロード化のため） */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
--bg:#0B0A08;
--bg2:#111009;
--surface:#161410;
--gold:#C4955A;
--gold2:#E8C88A;
--gold-dim:#7A5C34;
--cream:#F2EDE4;
--cream2:#C8BFB0;
--muted:#6B6355;
--border:rgba(196,149,90,0.2);
--border2:rgba(196,149,90,0.08);
--radius:4px;
/* テーマ切替対応のための補助変数 */
--body-bg:#000;
--body-image:url(../assets/moon.png);
--loader-bg:#0c0a07;
--link:#999;
--shadow:rgba(0,0,0,0.5);
--overlay:rgba(0,0,0,0.7);
--nav-bg:rgba(11,10,8,1);
--menu-bg:#1a1610;
--menu-border:#2a2520;
--menu-text:#aaa;
}
/* ===== SAKURA THEME (桜) ===== */
:root[data-theme="sakura"]{
--bg:#1F1518; --bg2:#2A1B22; --surface:#2E1F26;
--gold:#E8A4B8; --gold2:#F5C8D5; --gold-dim:#A87080;
--cream:#FCEEEF; --cream2:#D9B6BF; --muted:#8E6973;
--border:rgba(232,164,184,0.22); --border2:rgba(232,164,184,0.08);
--body-bg:#1F1518; --body-image:none; --loader-bg:#1F1518;
--link:#E8A4B8; --shadow:rgba(0,0,0,0.5); --overlay:rgba(20,10,15,0.7);
--nav-bg:rgba(31,21,24,1); --menu-bg:#2A1B22;
--menu-border:#3A2530; --menu-text:#D9B6BF;
}
/* ===== SEA THEME (海) ===== */
:root[data-theme="sea"]{
--bg:#0A1822; --bg2:#0F2333; --surface:#142B3D;
--gold:#7AB6CC; --gold2:#A6D2E2; --gold-dim:#3D6678;
--cream:#E6F1F6; --cream2:#A8BFCC; --muted:#5C7585;
--border:rgba(122,182,204,0.22); --border2:rgba(122,182,204,0.08);
--body-bg:#0A1822; --body-image:none; --loader-bg:#0A1822;
--link:#7AB6CC; --shadow:rgba(0,0,0,0.5); --overlay:rgba(10,15,25,0.7);
--nav-bg:rgba(10,24,34,1); --menu-bg:#0F2333;
--menu-border:#1A3445; --menu-text:#A8BFCC;
}
/* ===== FOREST THEME (森) ===== */
:root[data-theme="forest"]{
--bg:#0E1A11; --bg2:#152319; --surface:#1A2C20;
--gold:#9DBE7E; --gold2:#C4DCAA; --gold-dim:#5A7548;
--cream:#EAF0E2; --cream2:#B5C3A6; --muted:#6F7E64;
--border:rgba(157,190,126,0.22); --border2:rgba(157,190,126,0.08);
--body-bg:#0E1A11; --body-image:none; --loader-bg:#0E1A11;
--link:#9DBE7E; --shadow:rgba(0,0,0,0.5); --overlay:rgba(10,20,12,0.7);
--nav-bg:rgba(14,26,17,1); --menu-bg:#152319;
--menu-border:#243528; --menu-text:#B5C3A6;
}
/* ===== MONO THEME (墨白 / モノクロームの白) =====
純白の余白に墨色のアクセント。ギャラリー的でミニマル */
:root[data-theme="mono"]{
--bg:#FFFFFF; --bg2:#FAFAFA; --surface:#FFFFFF;
--gold:#1A1A1A; --gold2:#4A4A4A; --gold-dim:#B5B5B5;
--cream:#1A1A1A; --cream2:#4A4A4A; --muted:#9A9A9A;
--border:rgba(0,0,0,0.14); --border2:rgba(0,0,0,0.06);
--body-bg:#FFFFFF; --body-image:none; --loader-bg:#FFFFFF;
--link:#2A2A2A; --shadow:rgba(0,0,0,0.08); --overlay:rgba(255,255,255,0.6);
--nav-bg:rgba(255,255,255,1); --menu-bg:#FFFFFF;
--menu-border:rgba(0,0,0,0.10); --menu-text:#4A4A4A;
}
/* ===== SUNSET THEME (夕陽) ===== */
:root[data-theme="sunset"]{
--bg:#1A0F0A; --bg2:#2A1812; --surface:#34201A;
--gold:#F2A864; --gold2:#FFD0A0; --gold-dim:#A8693A;
--cream:#FBEDDF; --cream2:#D9B89C; --muted:#946F58;
--border:rgba(242,168,100,0.22); --border2:rgba(242,168,100,0.08);
--body-bg:#1A0F0A; --body-image:none; --loader-bg:#1A0F0A;
--link:#F2A864; --shadow:rgba(0,0,0,0.5); --overlay:rgba(20,10,8,0.7);
--nav-bg:rgba(26,15,10,1); --menu-bg:#2A1812;
--menu-border:#3A2520; --menu-text:#D9B89C;
}
html{scroll-behavior:smooth;}
body{
font-family:'Noto Sans JP',sans-serif;
background:var(--body-bg);
color:var(--cream);
min-height:100vh;
font-size:calc(16px * var(--font-scale,1));
line-height:1.8;
overflow-x:hidden;
display:flex;
flex-direction:column;
background-image: var(--body-image);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
a{
color: var(--link);
text-decoration: none;
}
/* ===== HERO ===== */
.hero{
/*min-height:100dvh;*/
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:4rem 2rem;
position:relative;
margin: auto;
/*background:radial-gradient(ellipse at 50% 30%,#1a1508 0%,var(--bg) 70%);
background-image: url(../assets/moon.jpg);
background-color:#000;
background-position: center;
background-repeat: no-repeat;*/
}
.hero::before{
content:'';
position:absolute;
inset:0;
background:repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(196,149,90,0.015) 40px,rgba(196,149,90,0.015) 41px);
pointer-events:none;
}
.hero-mark{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.4em;
color:var(--gold);
margin-bottom:2rem;
opacity:0.8;
}
.hero-title{
font-family:'Cormorant Garamond',serif;
font-size:calc(clamp(2.2rem,6vw,3.8rem) * var(--font-scale,1));
font-weight:300;
letter-spacing:0.08em;
color:var(--cream);
line-height:1.2;
margin-bottom:0.5rem;
}
.hero-sub{
font-family:'Noto Serif JP',serif;
font-size:calc(clamp(0.75rem,2vw,0.9rem) * var(--font-scale,1));
color:var(--gold);
letter-spacing:0.2em;
margin-bottom:2rem;
font-weight:300;
}
.hero-desc{
font-family:'Noto Serif JP',serif;
font-size:calc(clamp(0.8rem,2vw,0.95rem) * var(--font-scale,1));
color:var(--cream2);
line-height:2.2;
margin-bottom:3rem;
font-weight:300;
}
.hero-reading-sub{
font-family:'Noto Serif JP',serif;
font-size:calc(clamp(0.82rem,2vw,0.96rem) * var(--font-scale,1));
color:var(--cream2);
line-height:2.4;
margin-bottom:2.2rem;
font-weight:300;
letter-spacing:.04em;
}
.hero-divider{
width:1px;
height:60px;
background:linear-gradient(to bottom,transparent,var(--gold),transparent);
margin:0 auto 3rem;
}
.btn-hero{
display:inline-block;
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.35em;
color:var(--gold);
border:0.5px solid var(--gold-dim);
padding:14px 36px;
cursor:pointer;
background:none;
transition:all 0.3s;
text-decoration:none;
text-transform:uppercase;
}
.btn-hero:hover{background:rgba(196,149,90,0.08);border-color:var(--gold);}
/* ── ログイン後ウェルカムメッセージ ── */
.hero-welcome{
margin-top:2.2rem;
text-align:center;
position:relative;
padding:1rem 2rem;
max-width:480px;
margin-left:auto;
margin-right:auto;
}
/* 上下のゴールドライン */
.hero-welcome::before,
.hero-welcome::after{
content:'';
display:block;
position:absolute;
left:50%;
transform:translateX(-50%);
height:0.5px;
background:linear-gradient(to right, transparent, var(--gold-dim), transparent);
animation:welcomeLineExpand 0.9s ease both;
}
.hero-welcome::before{ top:0; width:0; animation-delay:0s; }
.hero-welcome::after { bottom:0; width:0; animation-delay:0.1s; }
/* マーク */
.hero-welcome-mark{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.5em;
color:var(--gold-dim);
margin-bottom:1rem;
opacity:0;
animation:welcomeFadeUp 0.8s ease 0.6s both;
}
/* 1行目 */
.hero-welcome-line1{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
font-weight:300;
letter-spacing:0.35em;
color:var(--gold);
margin-bottom:0rem;
opacity:0;
animation:welcomeFadeUp 0.9s ease 0.85s both;
}
/* 2行目 */
.hero-welcome-line2{
font-family:'Noto Serif JP',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.18em;
color:var(--cream2);
font-weight:300;
line-height:2.2;
opacity:0;
animation:welcomeFadeUp 0.9s ease 1.1s both;
}
@keyframes welcomeLineExpand{
0% { width:0; opacity:0; }
40% { opacity:1; }
100%{ width:100%; opacity:1; }
}
@keyframes welcomeFadeUp{
0% { opacity:0; transform:translateY(10px); }
100%{ opacity:1; transform:translateY(0); }
}
.scroll-hint{
position:absolute;
bottom:2rem;
left:50%;
transform:translateX(-50%);
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.3em;
color:var(--muted);
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}
.scroll-hint::after{
content:'';
width:0.5px;
height:40px;
background:linear-gradient(to bottom,var(--muted),transparent);
}
/* ===== NAV ===== */
.site-nav{
position:sticky;
top:0;
z-index:200;
background:var(--nav-bg);
backdrop-filter:blur(12px);
border-bottom:0.5px solid var(--border2);
display:flex;
justify-content:space-around;
align-items:center;
gap:6px;
/* 統合 PWA 3 機能共通:
ヘッダー高さ 60px + safe-area-inset-top(ノッチ/ステータスバー回避)、
パディング:上 8px + inset / 左右 16px / 下 8px */
min-height:calc(60px + env(safe-area-inset-top, 0px));
padding:calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
box-sizing:border-box;
}
@media(max-width:978px){
.site-nav{
justify-content: flex-start;
}
}
.nav-btn{
background:transparent;
border:1px solid rgba(180,160,120,0.3);
border-radius:2px;
padding:5px 12px;
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.25em;
color:var(--muted);
cursor:pointer;
transition:color 0.2s,border-color 0.2s,background 0.2s;
text-transform:uppercase;
text-decoration:none;
display:inline-block;
}
.nav-btn.active{
color:var(--gold);
border-color:var(--gold);
background:rgba(180,150,80,0.08);
}
.nav-btn:hover{
color:var(--cream2);
border-color:var(--cream2);
background:rgba(255,255,255,0.04);
}
/* ===== SECTION ===== */
.section{display:none;padding:1rem 2rem;max-width:1480px;margin:0 auto;}
.section.active{display:block;}
.section-mark{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.4em;
color:var(--gold);
text-align:center;
margin-bottom:1rem;
opacity:0.7;
text-transform:uppercase;
}
.section-title{
font-family:'Cormorant Garamond',serif;
font-size:calc(clamp(1.43rem,4vw,2.2rem) * var(--font-scale,1));
font-weight:300;
letter-spacing:0.1em;
color:var(--cream);
text-align:center;
margin-top:0rem;
margin-bottom:0;
}
.gold-line{
width:40px;
height:0.5px;
background:var(--gold);
margin:0 auto 3rem;
opacity:0.5;
}
/* ===== 今日の広場ピックアップ（カード引いた後の参加導線）===== */
.board-pick{
margin:3rem auto 1rem;
max-width:720px;
padding:1.3rem 1rem 1.1rem;
background:linear-gradient(180deg, rgba(212,175,55,0.05), rgba(212,175,55,0));
border-top:1px solid rgba(212,175,55,0.18);
border-bottom:1px solid rgba(212,175,55,0.18);
}
.board-pick-title{
font-family:'Cormorant Garamond',serif;
font-size:calc(1.2rem * var(--font-scale,1));
text-align:center;
color:var(--gold);
letter-spacing:0.2em;
margin:0 0 .25rem;
font-weight:300;
}
.board-pick-sub{
text-align:center;
font-size:calc(.8rem * var(--font-scale,1));
opacity:.55;
color:var(--cream);
margin:0 0 1rem;
letter-spacing:.05em;
}
.board-pick-list{
display:flex;
flex-direction:column;
gap:.6rem;
}
.board-pick-card{
display:flex;
gap:.8rem;
padding:.7rem;
background:rgba(0,0,0,0.22);
border:1px solid rgba(212,175,55,0.15);
border-radius:12px;
transition:border-color .25s, transform .25s;
}
.board-pick-card:hover{
border-color:rgba(212,175,55,0.4);
transform:translateY(-1px);
}
.bp-thumb{
flex:0 0 60px;
width:60px; height:80px;
border-radius:6px;
overflow:hidden;
background:#000;
border:1px solid rgba(212,175,55,0.15);
}
.bp-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.bp-thumb-fb{
display:flex; align-items:center; justify-content:center;
width:100%; height:100%;
color:var(--gold);
font-family:'Cormorant Garamond',serif;
font-size:calc(1.1rem * var(--font-scale,1));
opacity:.65;
}
.bp-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem; }
.bp-title{
font-size:calc(.92rem * var(--font-scale,1));
color:var(--cream);
font-weight:500;
letter-spacing:.04em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bp-msg{
font-size:calc(1rem * var(--font-scale,1));
color:var(--cream);
opacity:.72;
line-height:1.45;
}
.bp-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:auto;
gap:.5rem;
}
.bp-sender{
display:flex;
align-items:center;
gap:.3rem;
font-size:calc(.72rem * var(--font-scale,1));
opacity:.65;
color:var(--cream);
min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bp-avatar{ width:18px; height:18px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.bp-like{
flex-shrink:0;
display:inline-flex;
align-items:center;
gap:.3rem;
background:transparent;
border:1px solid rgba(212,175,55,0.3);
border-radius:999px;
padding:.25rem .75rem;
font-size:calc(.8rem * var(--font-scale,1));
color:var(--cream);
cursor:pointer;
transition:all .25s;
font-family:inherit;
}
.bp-like:hover{ background:rgba(212,175,55,0.1); border-color:rgba(212,175,55,0.5); }
.bp-like:disabled{ opacity:.5; cursor:wait; }
.bp-like.liked{
background:rgba(255,80,100,0.15);
border-color:rgba(255,100,120,0.5);
color:#ffd0d8;
}
.bp-like.liked .bp-heart{ color:#ff6b8a; }
.bp-like .bp-heart{ font-size:.95em; line-height:1; }
.bp-like.pop{ animation:bpPop .5s ease-out; }
@keyframes bpPop{
0%{ transform:scale(1); }
40%{ transform:scale(1.3); }
100%{ transform:scale(1); }
}
.board-pick-more{ text-align:center; margin-top:1rem; }
.board-pick-more a{
color:var(--gold);
text-decoration:none;
font-size:calc(.82rem * var(--font-scale,1));
letter-spacing:.12em;
opacity:.75;
transition:opacity .2s;
}
.board-pick-more a:hover{ opacity:1; }
/* ===== STREAK BANNER（連続ログイン日数）===== */
.streak-banner{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:.4em .6em;
margin:0 auto .9rem;
padding:.45rem 1rem;
max-width:min(100%, 480px);
background:linear-gradient(135deg, rgba(212,175,55,0.10), rgba(212,175,55,0.04));
border:1px solid rgba(212,175,55,0.35);
border-radius:999px;
color:var(--cream);
font-family:'Cormorant Garamond','Noto Serif JP',serif;
font-size:calc(clamp(.85rem,2.5vw,1rem) * var(--font-scale,1));
letter-spacing:0.04em;
box-shadow:0 0 12px rgba(212,175,55,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
}
.streak-banner .streak-icon{
font-size:1.1em;
filter:drop-shadow(0 0 4px rgba(255,170,60,0.5));
}
.streak-banner .streak-text strong{
font-size:1.25em;
color:var(--gold);
margin:0 .15em;
font-weight:500;
}
.streak-banner .streak-best{
opacity:.65;
font-size:.92em;
}
.streak-banner .streak-celebrate{
display:inline-block;
margin-left:.4em;
padding:.05em .55em;
background:rgba(212,175,55,0.18);
border-radius:999px;
color:var(--gold);
font-weight:500;
font-size:.92em;
animation:streakPulse 2.6s ease-in-out infinite;
}
.streak-banner[data-celebrate="1"]{
animation:streakGlow 3s ease-in-out infinite;
border-color:rgba(212,175,55,0.6);
}
@keyframes streakPulse{
0%,100%{transform:scale(1);opacity:1;}
50%{transform:scale(1.04);opacity:.85;}
}
@keyframes streakGlow{
0%,100%{box-shadow:0 0 12px rgba(212,175,55,0.12), inset 0 1px 0 rgba(255,255,255,0.04);}
50%{box-shadow:0 0 22px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.08);}
}
/* ===== TODAY ===== */
.draw-steps{
display:flex;
flex-direction:column;
gap:0rem;
margin-bottom:1rem;
max-width:560px;
margin-left:auto;
margin-right:auto;
}
.draw-step{display:flex;align-items:flex-start;gap:1rem;justify-content: center;}
.draw-step-icon{font-size:calc(18px * var(--font-scale,1));flex-shrink:0;margin-top:2px;}
.draw-step-text{
font-family:'Noto Serif JP',serif;
font-size:calc(16px * var(--font-scale,1));
color:var(--cream2);
line-height:2;
font-weight:300;
}
/* カードステージ 352:609 */
.card-stage{
width:min(22em,80vw);
aspect-ratio:352/609;
perspective:1200px;
cursor:pointer;
flex-shrink:0;
}
.card-inner{
width:100%;height:100%;
position:relative;
transform-style:preserve-3d;
transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.card-inner.flipped{transform:rotateY(180deg);}
.card-front,.card-back{
position:absolute;inset:0;
backface-visibility:hidden;
border-radius:var(--radius);
overflow:hidden;
}
.card-front{border:0.5px solid var(--border);}
.card-front-img{width:100%;height:100%;object-fit:cover;display:block;}
.card-back{
transform:rotateY(180deg);
border:0.5px solid var(--border);
background:var(--surface);
}
.card-back-img{
width:100%;height:100%;
object-fit:cover;
display:none;
position:absolute;inset:0;
}
.card-back-img.show{display:block;}
.card-back-noimg{
display:none;
position:absolute;inset:0;
flex-direction:column;
align-items:center;justify-content:center;
gap:12px;padding:2rem;text-align:center;
}
.card-back-noimg.show{display:flex;}
.cb-num{font-family:'Cormorant Garamond',serif;font-size:calc(16px * var(--font-scale,1));color:var(--gold);letter-spacing:0.3em;}
.cb-title{font-family:'Cormorant Garamond',serif;font-size:calc(18px * var(--font-scale,1));font-weight:300;color:var(--cream);letter-spacing:0.15em;}
.cb-line{width:30px;height:0.5px;background:var(--gold-dim);}
.cb-meaning-fb{font-family:'Noto Serif JP',serif;font-size:calc(16px * var(--font-scale,1));color:var(--cream2);line-height:2;font-weight:300;}
.btn-draw{
display:block;
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.35em;
color:var(--gold);
border:0.5px solid var(--gold-dim);
padding:14px 36px;
cursor:pointer;
background:none;
transition:all 0.3s;
text-transform:uppercase;
margin-top:2rem;
white-space:nowrap;
}
.btn-draw:hover{background:rgba(196,149,90,0.08);border-color:var(--gold);}
/* ── カードを引いた後：タイトル・説明をふわっと消して上に詰める ── */
#section-today .section-title {
max-height: 160px;
overflow: hidden;
transition: opacity 0.4s ease,
max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
margin-bottom 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
#section-today .draw-steps {
max-height: 300px;
overflow: hidden;
transition: opacity 0.4s ease,
max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
margin-bottom 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
#section-today.card-drawn .section-title,
#section-today.card-drawn .draw-steps {
opacity: 0;
max-height: 0;
margin-bottom: 0;
}
/* ===== 左右レイアウト ===== */
.draw-layout{
display:flex;
gap:0;
align-items:flex-start;
justify-content:center;
}
/* 左カラム */
.draw-left{
display:flex;
flex-direction:column;
align-items:center;
flex-shrink:0;
/* translateX でスムーズに左へ */
transform: translateX(0);
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
/* gap の代わりにmargin-rightで間隔管理 */
margin-right: 0;
padding-bottom: 20px;
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
margin-right 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 引いた後：右パネル分のgapを開ける */
.draw-layout.revealed .draw-left{
margin-right: 1rem;
}
/* 右パネル：max-width で滑らかに展開（GPUアクセラレート） */
.draw-right{
display: none;
}
/* 引いた後：右パネルを表示 */
.draw-right.show{
display: block;
background-color: rgba(0, 0, 0, 0.5);
padding-bottom: 3rem;
animation: fadeInRight 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes fadeInRight {
from { opacity:0; transform:translateX(24px); }
to { opacity:1; transform:translateX(0); }
}
/* リセット中 */
.draw-layout.resetting .draw-left{
margin-right: 0;
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
margin-right 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.draw-layout.resetting .draw-right{
display: none;
}
/* ===== KEYFRAMES ===== */
/* 右パネル各ブロック：下からふわっと */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 右：各ブロックを順番にフェードイン（flex展開後に発火） */
.draw-right.show .td-block:nth-child(1) { animation: fadeInUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.65s both; }
.draw-right.show .td-block:nth-child(2) { animation: fadeInUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.78s both; }
.draw-right.show .td-block:nth-child(3) { animation: fadeInUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.91s both; }
.draw-right.show .td-block:nth-child(4) { animation: fadeInUp 0.55s cubic-bezier(0.22,1,0.36,1) 1.04s both; }
.draw-right.show .td-light { animation: fadeInUp 0.55s cubic-bezier(0.22,1,0.36,1) 1.18s both; }
/* ===== カード一覧アニメーション ===== */
@keyframes cardItemIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-item--animate {
opacity: 0;
animation: cardItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* ===== モーダルアニメーション ===== */
@keyframes modalIn {
from {
opacity: 0;
transform: translateY(24px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes overlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-overlay.open {
animation: overlayIn 0.3s ease forwards;
}
.modal--enter {
animation: modalIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.td-block{
border:0.5px solid var(--border2);
padding:0.25rem 1.5rem;
margin-bottom:10px;
position:relative;
}
.td-block::before{
content:'';
position:absolute;
top:0;left:0;
width:2px;height:100%;
background:linear-gradient(to bottom,var(--gold),transparent);
opacity:0.35;
}
.td-label{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.35em;
color:var(--gold);
margin-bottom:0;
text-transform:uppercase;
opacity:0.8;
}
.td-text{
font-family:'Noto Serif JP',serif;
font-size:calc(16px * var(--font-scale,1));
line-height:2.1;
color:var(--cream2);
font-weight:300;
}
.td-light{
text-align:center;
padding:1.5rem;
border:0.5px solid var(--border);
margin-top:10px;
}
.td-light .td-label{text-align:center;margin-bottom:10px;}
.td-light .td-text{
font-family:'Cormorant Garamond',serif;
font-size:calc(17px * var(--font-scale,1));
font-weight:300;
color:var(--cream);
letter-spacing:0.05em;
line-height:1.9;
}
/* ===== LIST ===== */
.filter-row{
display:flex;flex-wrap:wrap;
gap:8px;justify-content:center;
margin-bottom:2.5rem;
}
.filter-chip{
background:none;
border:0.5px solid var(--border);
padding:6px 16px;
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.2em;
color:var(--muted);
cursor:pointer;
transition:all 0.2s;
text-transform:uppercase;
}
.filter-chip.active,.filter-chip:hover{
color:var(--gold);
border-color:var(--gold-dim);
background:rgba(196,149,90,0.05);
}
.card-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:10px;
}
.card-item{
border:0.5px solid var(--border2);
background:var(--surface);
cursor:pointer;
transition:border-color 0.2s,transform 0.2s;
overflow:hidden;
}
.card-item:hover{border-color:var(--gold-dim);transform:translateY(-3px);}
.card-item-img{
width:100%;
aspect-ratio:352/609;
object-fit:cover;
display:block;
background:var(--bg2);
}
.card-item-body{padding:.8rem 1rem;}
.ci-num{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));color:var(--gold);
letter-spacing:0.2em;margin-bottom:4px;
}
.ci-title{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));font-weight:300;
letter-spacing:0.1em;
color:var(--cream);margin-bottom:4px;
}
.ci-meaning{font-family:'Noto Serif JP',serif;font-size:calc(16px * var(--font-scale,1));color:var(--muted);line-height:1.7;font-weight:300;}
.ci-fav{
background:none;border:none;
cursor:pointer;
color:var(--muted);
padding:4px;
margin-top:4px;
transition:color 0.2s;
display:flex;align-items:center;
}
.ci-fav:hover{color:var(--gold);}
/* ===== MODAL ===== */
.modal-overlay{
display:none;position:fixed;inset:0;
background:rgba(0,0,0,0.85);
z-index:300;
align-items:center;justify-content:center;
padding:1rem;
backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex;}
.modal{
background:var(--surface);
border:0.5px solid var(--border);
max-width:480px;width:100%;
max-height:90vh;overflow-y:auto;
position:relative;
}
.modal-img-wrap{
width:100%;
aspect-ratio:352/609;
max-height:100vh;
overflow:hidden;
background:var(--bg2);
}
.modal-img{width:100%;height:100%;object-fit:cover;display:block;}
.modal-img-placeholder{
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
}
.modal-img-placeholder span{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));color:var(--muted);letter-spacing:0.2em;
}
.modal-body{padding:2rem;}
.modal-close{
position:absolute;top:0.5rem;right:1rem;
background:#fff;
border:0.5px solid var(--border);
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
font-size:calc(16px * var(--font-scale,1));color:var(--muted);cursor:pointer;
z-index:1;transition:color 0.2s;
}
.modal-close:hover{color:var(--cream);}
.m-mark{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));color:var(--gold);
letter-spacing:0.35em;margin-bottom:6px;opacity:0.7;
}
.m-title{
font-family:'Cormorant Garamond',serif;
font-size:calc(26px * var(--font-scale,1));font-weight:300;
letter-spacing:0.12em;
color:var(--cream);margin-bottom:1.5rem;
}
.m-div{height:0.5px;background:var(--border);margin:1.25rem 0;}
.m-sec{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));letter-spacing:0.35em;
color:var(--gold);margin-bottom:8px;
text-transform:uppercase;opacity:0.7;
}
.m-text{
font-family:'Noto Serif JP',serif;
font-size:calc(16px * var(--font-scale,1));line-height:2.2;
color:var(--cream2);font-weight:300;
}
.m-light-wrap{
margin-top:1.5rem;
padding:1.5rem;
border:0.5px solid var(--border);
text-align:center;
}
.m-light-text{
font-family:'Cormorant Garamond',serif;
font-size:calc(18px * var(--font-scale,1));font-weight:300;
color:var(--cream);letter-spacing:0.05em;
line-height:1.8;
}
/* ===== FOOTER ===== */
.site-footer{
border-top:0.5px solid var(--border2);
padding:0.5rem 2rem;
text-align:center;
/*margin-top:4rem;*/
}
.footer-title{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));letter-spacing:0.3em;
color:var(--gold);margin-bottom:1rem;
opacity:0.7;
}
.footer-text{font-size:calc(16px * var(--font-scale,1));color:var(--muted);letter-spacing:0.1em;line-height:2;}
/* ===== RESPONSIVE ===== */
@media(max-width:720px){
.draw-layout{flex-direction:column;align-items:center;}
.draw-left{margin-right:0 !important;transition:none;}
.draw-layout.revealed .draw-left{margin-right:0;}
.draw-right{width:100%;}
.draw-right.show{width:100%;}
.card-stage{width:min(280px,78vw);}
.btn-draw{margin:1.5rem auto 0;display:block;}
}
@media(max-width:480px){
.section{padding:1rem 1.25rem;}
.card-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
.modal-img-wrap{
max-height:100vh !important;
margin:4rem auto;
}
.modal-body{padding:1.25rem;}
.m-title{font-size:calc(22px * var(--font-scale,1));}
.nav-btn{padding:6px 10px;font-size:calc(16px * var(--font-scale,1));letter-spacing:0.1em;}
}
/* ===== NAV USER ===== */
.nav-user{
display:flex;
align-items:center;
gap:10px;
margin-left:auto;
padding:0 1.5rem;
}
.nav-avatar{
width:28px;height:28px;
border-radius:50%;
object-fit:cover;
border:0.5px solid var(--border);
}
.nav-avatar-dummy{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;height:28px;
border-radius:50%;
border:0.5px solid var(--border);
color:var(--muted);
flex-shrink:0;
}
.nav-avatar-dummy svg{
width:44px; height:44px;
}
.nav-username{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.1em;
color:var(--cream2);
}
.nav-logout{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.15em;
color:var(--muted);
text-decoration:none;
border:0.5px solid var(--border2);
padding:4px 12px;
transition:color 0.2s, border-color 0.2s;
}
.nav-logout:hover{color:var(--cream2);border-color:var(--border);}
/* ===== NAV LINKS (常時表示) ===== */
.nav-links{
display:flex;
align-items:center;
gap:12px;
}
/* ===== PC NAV：ボタンを真ん中、ユーザー情報を右に絶対配置 ===== */
/* position:sticky は absolute の基準にもなるため relative は不要 */
.nav-user{
position:absolute;
right:0rem;
/* safe-area-inset-top を加味して、ノッチ下のコンテンツ領域の中央に配置 */
top:calc(50% + env(safe-area-inset-top, 0px) / 2);
transform:translateY(-50%);
margin-left:0;
}
/* ログアウトアイコン: マウスホバーで赤みを帯びる */
.nav-logout-icon:hover{ color:#E24B4A; border-color:rgba(226,75,74,0.6); background:rgba(226,75,74,0.06); }
/* ===== ナビアイコンボタン（ホーム・カレンダー） ===== */
.nav-icon-btn {
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;height:44px;
color:var(--muted);
flex-shrink:0;
text-decoration:none;
transition:color 0.2s;
}
.nav-icon-btn:hover,
.nav-icon-btn.active { color:var(--gold); }
.nav-icon-btn svg{
width: 24px; height: 24px;
}
@media(max-width:978px){
/* モバイル: 3 機能(Card / Community / Messenger)で完全に同じヘッダーレイアウトに統一。
基準値は Community(.comm-nav)。
- position: fixed で viewport 固定
- 上 padding は 8px + safe-area-inset-top でノッチ回避
- 下 padding 8px / 左右 16px
- min-height: 60px + safe-area
- flex 配置 (space-between + align-items: center)
本文側は body の padding-top でヘッダー分を押し下げる。 */
.site-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
min-height: calc(60px + env(safe-area-inset-top, 0px));
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
flex-wrap: nowrap;
box-sizing: border-box;
}
/* fixed ヘッダーぶん本文を押し下げる */
body {
padding-top: calc(60px + env(safe-area-inset-top, 0px));
}
/* ロゴはコンパクトに、flex の child として中央配置(absolute 解除) */
.nav-logo {
position: static;
transform: none;
left: auto;
top: auto;
font-size:calc(18px * var(--font-scale,1));
letter-spacing: 0.14em;
}
.nav-logo span { font-size:calc(13px * var(--font-scale,1)); letter-spacing: 0.36em; }
/* ユーザーアイコン群もロゴと同じく flex の child に揃える(absolute 解除) */
.nav-user {
position: static;
transform: none;
top: auto;
right: auto;
}
/* ボタンをコンパクトに（タイル化されるが念のため） */
.nav-links { gap:5px; }
.nav-links .nav-btn {
font-size:calc(16px * var(--font-scale,1));
padding:4px 12px;
letter-spacing:0.04em;
white-space:nowrap;
}
.nav-icon-btn { width:44px; height:44px; }
.nav-icon-btn svg { width: 24px; height: 24px; }
/* 管理者アイコンをモバイルでも表示 */
.nav-btn-admin{ display:inline-flex; }
/* ユーザーアバター右端配置（absolute をやめて flex の右端に） */
.nav-user {
position: static;
transform: none;
right: auto;
top: auto;
margin-left: auto;
}
}
@media(max-width:480px){
.nav-username { display:none; }
.nav-user { padding:0; gap:8px; }
.nav-links .nav-btn {
font-size:calc(16px * var(--font-scale,1));
padding:3px 12px;
letter-spacing:0.03em;
}
.nav-icon-btn { width:44px; height:44px; }
.nav-icon-btn svg { width: 22px; height: 22px; }
}
/* ===== ANSWER / RECORD ===== */
.td-answer{
margin-top:10px;
padding:0 1.5rem;
/* border:0.5px solid var(--border2); */
border: none;
position:relative;
}
.td-answer::before{
content:'';position:absolute;top:0;left:0;
width:2px;height:100%;
background:linear-gradient(to bottom,var(--gold),transparent);
opacity:0.35;
}
.answer-textarea{
width:100%;
min-height:100px;
background:transparent;
border:none;
border-bottom:0.5px solid var(--border);
color:var(--cream);
font-family:'Noto Serif JP',serif;
font-size:calc(16px * var(--font-scale,1));
line-height:2.1;
font-weight:300;
resize:vertical;
outline:none;
padding:0.5rem 0;
margin-top:0.5rem;
}
.answer-textarea::placeholder{color:var(--muted);font-size:calc(16px * var(--font-scale,1));}
.answer-textarea:disabled{opacity:0.5;cursor:default;}
.answer-footer{
display:flex;
align-items:center;
gap:1rem;
margin-top:0;
}
/* スマホ: 「記録する」を上段、SHARE / 灯りを配る を下段にセンタリング */
@media (max-width: 720px) {
.answer-footer { flex-wrap: wrap; row-gap: .8rem; justify-content: center; }
.answer-footer .btn-save { order: -1; flex: 0 0 100%; }
.answer-footer .save-status { order: 0; flex: 0 0 100%; text-align: center; }
.answer-footer .share-wrap {
order: 1;
flex: 0 0 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
gap: .5rem;
}
.answer-footer .share-wrap > .btn-share { margin-left: 0 !important; }
}
.td-answer .td-label{
font-size:calc(16px * var(--font-scale,1)); letter-spacing:0.3em; color:var(--gold);
text-transform:uppercase; margin-top:1.5rem; margin-bottom:0.75rem;
}
.btn-save{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.35em;
color:var(--gold);
border:0.5px solid var(--gold-dim);
padding:10px 32px;
background:none;
cursor:pointer;
transition:all 0.25s;
text-transform:uppercase;
position:relative;
overflow:hidden;
}
.btn-save::after{
content:'';
position:absolute; inset:0;
background:linear-gradient(135deg,rgba(196,149,90,0.12),transparent);
opacity:0; transition:opacity 0.25s;
}
.btn-save:hover{ border-color:var(--gold); color:var(--cream); }
.btn-save:hover::after{ opacity:1; }
.btn-save:disabled{opacity:0.35;cursor:default;pointer-events:none;}
.save-status{
font-size:calc(16px * var(--font-scale,1)); color:var(--muted);
font-family:'Noto Serif JP',serif;
letter-spacing:0.08em;
}
.save-status.saved{ color:var(--gold); }
.save-status.error{ color:#E24B4A; }
.save-status.limit{ color:rgba(196,149,90,0.65); }
/* ===== SHARE ===== */
.share-wrap{
position:relative;
margin-left:auto;
flex-shrink:0;
}
.btn-share{
position:relative;
padding:7px 16px;
background:none;
border:0.5px solid rgba(196,149,90,0.35);
color:var(--muted);
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.18em;
cursor:pointer;
transition:border-color 0.2s, color 0.2s;
font-family:'Cormorant Garamond',serif;
white-space:nowrap;
}
.btn-share:hover{ border-color:var(--gold); color:var(--cream); }
.btn-share:disabled{ opacity:0.35; cursor:default; pointer-events:none; }
.share-menu{
position:absolute;
bottom:calc(100% + 8px);
right:0;
background:var(--menu-bg);
border:0.5px solid var(--menu-border);
min-width:160px;
z-index:100;
box-shadow:0 4px 20px var(--shadow);
}
.share-menu-item{
display:flex;
align-items:center;
gap:8px;
width:100%;
padding:10px 16px;
background:none;
border:none;
color:var(--menu-text);
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.08em;
text-align:left;
cursor:pointer;
transition:background 0.15s, color 0.15s;
font-family:'Cormorant Garamond',serif;
white-space:nowrap;
}
.share-menu-item:hover{ background:rgba(196,149,90,0.08); color:var(--cream,#e8e0d0); }
.share-menu-item + .share-menu-item{ border-top:0.5px solid #2a2520; }
.share-opts{
display:flex;
gap:12px;
padding:8px 14px 6px;
}
.share-opt-label{
display:flex;
align-items:center;
gap:5px;
font-size:calc(16px * var(--font-scale,1));
color:var(--muted,#888);
cursor:pointer;
user-select:none;
white-space:nowrap;
}
.share-opt-label input[type=checkbox]{
accent-color:var(--gold,#c4955a);
cursor:pointer;
width:13px;
height:13px;
}
.share-menu-sep{
border:none;
border-top:0.5px solid #2a2520;
margin:0;
}
/* ===== MODAL FAVORITE ===== */
.m-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
margin-bottom:0;
}
.m-header > div { flex:1; min-width:0; }
.btn-fav{
background:none;
border:0.5px solid var(--border2);
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
color:var(--muted);
transition:color 0.2s, border-color 0.2s;
flex-shrink:0;
margin-top:4px;
}
.btn-fav:hover{color:var(--gold);border-color:var(--gold-dim);}
/* ===== 管理画面ボタン（管理者のみ表示・鍵アイコン） ===== */
.nav-btn-admin{
padding:5px 0 !important;
line-height:0;
border-color:transparent !important;
color:rgba(190,150,220,0.75) !important;
}
.nav-btn-admin:hover{
color:rgba(210,175,240,1) !important;
border-color:transparent !important;
background:rgba(160,110,200,0.07) !important;
}
.nav-btn-admin svg{ display:block; width: 24px; height: 24px;}
div#visionList {
padding: 1rem;
color: #999;
}
/* ===== 全画面没入オーバーレイ (today.php) ===== */
.fs-overlay{
position:fixed;inset:0;z-index:9999;
background:var(--bg);
display:flex;align-items:center;justify-content:center;
opacity:0;
animation:fsOverlayIn 0.6s ease forwards;
}
@keyframes fsOverlayIn{
from{opacity:0;}
to{opacity:1;}
}
.fs-overlay.closing{
animation:fsOverlayOut 0.5s ease forwards;
pointer-events:none;
}
@keyframes fsOverlayOut{
from{opacity:1;}
to{opacity:0;}
}
.fs-overlay-inner{
text-align:center;
padding:2.5rem 2rem;
display:flex;flex-direction:column;align-items:center;gap:1.4rem;
}
.fs-overlay-mark{
font-size:calc(16px * var(--font-scale,1));letter-spacing:0.45em;color:var(--gold-dim);
}
.fs-overlay-title{
font-family:'Cormorant Garamond',serif;
font-size:calc(clamp(2.2rem,6vw,3.6rem) * var(--font-scale,1));
font-weight:300;letter-spacing:0.28em;
color:var(--cream);line-height:1.15;
}
.fs-overlay-sub{
font-family:'Noto Serif JP',serif;
font-size:calc(16px * var(--font-scale,1));letter-spacing:0.14em;
color:var(--cream2);line-height:1.9;
max-width:320px;
}
.fs-overlay-divider{
width:40px;height:0.5px;
background:var(--gold-dim);
margin:.4rem 0;
}
.fs-overlay-btn{
margin-top:.6rem;
background:none;
border:0.5px solid var(--gold-dim);
color:var(--gold);
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));letter-spacing:0.32em;
padding:14px 36px;
cursor:pointer;
transition:background 0.25s, border-color 0.25s, color 0.25s;
position:relative;overflow:hidden;
}
.fs-overlay-btn::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,rgba(196,149,90,0.12),rgba(196,149,90,0));
opacity:0;transition:opacity 0.25s;
}
.fs-overlay-btn:hover{
border-color:var(--gold);color:var(--gold2);
}
.fs-overlay-btn:hover::after{ opacity:1; }
.fs-overlay-skip{
font-size:calc(16px * var(--font-scale,1));letter-spacing:0.18em;color:var(--muted);
background:none;border:none;cursor:pointer;padding:4px 8px;
transition:color 0.2s;
}
.fs-overlay-skip:hover{ color:var(--cream2); }
/* ===== NAV LOGO ===== */
.nav-logo{
position:absolute;
/* 統合 PWA 3 機能共通: ロゴ左位置 16px(ナビパディング padding-x と同値)*/
left:16px;
/* safe-area-inset-top を加味して、ノッチ下のコンテンツ領域の中央に来るよう微調整 */
top:calc(50% + env(safe-area-inset-top, 0px) / 2);
transform:translateY(-50%);
font-family:'Cormorant Garamond',serif;
font-weight:300;
font-size:calc(20px * var(--font-scale,1));
letter-spacing:0.16em;
color:var(--cream);
text-decoration:none;
line-height:1.15;
text-align:center;
text-transform:uppercase;
transition:color 0.2s;
}
.nav-logo span{
display:block;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.42em;
color:var(--gold-dim);
transition:color 0.2s;
}
.nav-logo:hover{ color:var(--gold); }
.nav-logo:hover span{ color:var(--gold); }
/* ===== サイトフッター（固定・下部・アコーディオン） ===== */
.site-footer{
position:fixed;
bottom:0; left:0; right:0;
background:rgba(0,0,0,0.8);
border-top:0.5px solid var(--border);
z-index:200;
/* backdrop-filter:blur(10px); */
/* -webkit-backdrop-filter:blur(10px); */
}
/* 常時表示バー */
.footer-bar{
display:flex;
align-items:center;
justify-content:center;
padding:10px 48px 10px 20px;
position:relative;
min-height:38px;
}
.footer-copy{
font-family:'Cormorant Garamond',serif;
font-size:calc(16px * var(--font-scale,1));
letter-spacing:0.2em;
color:rgba(160,148,130,0.85);
line-height:1.25;
}
/* 開閉トグルボタン */
.footer-toggle{
position:absolute;
right:16px;
top:50%; transform:translateY(-50%);
background:none; border:none; cursor:pointer;
color:rgba(160,148,130,0.35);
padding:6px;
display:flex; align-items:center; justify-content:center;
transition:color 0.2s;
line-height:0;
}
.footer-toggle svg{
transition:transform 0.3s ease;
width: 25px;
height: 25px;
color:rgba(160,148,130,0.85);
}
.footer-toggle.open svg{ transform:rotate(180deg); }
.footer-toggle:hover{ color:var(--gold); }
/* アコーディオン */
.footer-accordion{
overflow:hidden;
max-height:0;
transition:max-height 0.32s ease;
}
.footer-accordion.open{ max-height:52px; }
.footer-links-inner{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:nowrap;
gap:clamp(8px, 2.4vw, 20px);
padding:10px 16px 2px;
max-width:100%;
}
.footer-link{
font-family:'Cormorant Garamond',serif;
font-size:calc(clamp(9.5px, 2.6vw, 13.5px) * var(--font-scale,1));
letter-spacing:clamp(0.04em, 0.35vw, 0.18em);
color:rgba(160,148,130,0.85);
text-decoration:none;
white-space:nowrap;
transition:color 0.2s;
}
.footer-link:hover{ color:var(--gold); }
.footer-sep{
color:var(--border);
font-size:calc(clamp(9px, 2.4vw, 13px) * var(--font-scale,1));
flex-shrink:0;
}
@media (max-width: 480px) {
.footer-bar { padding: 8px 42px 8px 14px; min-height: 36px; }
.footer-copy { font-size:calc(11.5px * var(--font-scale,1)); letter-spacing: 0.14em; }
.footer-toggle { right: 10px; padding: 4px; }
.footer-toggle svg { width: 20px; height: 20px; }
.footer-accordion.open { max-height: 44px; }
.footer-links-inner { padding: 8px 12px 2px; }
}
/* フッター分の余白は JS の setPad() で動的にセット */
/* ============================================================
GUIDE 以上向け: ADMIN/USER 表示切替ドット
- 構造:
- 外側ボタン: 16px の可視サイズ相当 + 8px の左右上下 padding（合計 32×32px）
- 内側ドット: 16×16 の点滅円（ADMIN=青 / USER=緑）
- 各フッターの一番左端に絶対配置（親に position: relative または fixed）
============================================================ */
.role-view-toggle{
position:absolute;
left:-16px;
top:50%;
transform:translateY(-50%);
width:32px;
height:32px;
padding:12px; /* ドットを 8px に縮めた分、padding を増やしてクリック領域 32px を維持 */
background:transparent;
border:0;
cursor:pointer;
box-sizing:border-box;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:0;
outline:none;
z-index:1;
}
.role-view-toggle:focus-visible{
outline:2px solid rgba(58,158,255,0.5);
outline-offset:1px;
border-radius:50%;
}
body.role-view-as-user .role-view-toggle:focus-visible{
outline-color:rgba(47,177,77,0.5);
}
.rvt-dot{
display:block;
width:8px;
height:8px;
border-radius:50%;
background:#3a9eff; /* ADMIN ビュー: 青 */
animation:rvt-blink 1.6s ease-in-out infinite;
transition:background .2s;
}
body.role-view-as-user .rvt-dot{
background:#2fb14d; /* USER ビュー: 緑 */
}
@keyframes rvt-blink{
0%, 100%{ opacity:0.35; }
50% { opacity:1; }
}
/* 親要素を positioning context にする */
.footer-bar { position:relative; }
.comm-footer { position:relative; }
/* messenger 用 mini-footer の小さな copyright + トグル */
.msg-mini-footer{
position:fixed;
left:0; right:0; bottom:0;
height:26px;
background:rgba(12,10,7,0.85);
border-top:0.5px solid rgba(196,149,90,0.18);
z-index:200;
text-align:center;
pointer-events:none;
}
.msg-mini-footer .msg-mini-copy{
font-family:'Cormorant Garamond',serif;
font-size:calc(11px * var(--font-scale,1)); letter-spacing:.16em;
color:rgba(160,148,130,0.65);
margin:0; padding:5px 14px;
line-height:16px;
pointer-events:auto;
}
.msg-mini-footer .msg-mini-copy .role-view-toggle{ pointer-events:auto; }
/* 共通 footer (= site-footer) 分だけ messenger アプリの高さを縮めて composer が隠れないように。
高さは JS が --site-footer-h を body に セット する (= footer.php の setPad)。 fallback は 28px。 */
body:has(.site-footer) .msg-app{
height: calc(100vh - var(--site-footer-h, 28px)) !important;
height: calc(100dvh - var(--site-footer-h, 28px)) !important;
}
/* community footer の copyright 行（親 .comm-footer-inner の text-align: center で中央配置）*/
.comm-footer-copy{
font-family:'Cormorant Garamond',serif;
font-size:calc(11px * var(--font-scale,1)); letter-spacing:.16em;
color:rgba(196,149,90,0.55);
margin:.6rem 0 0;
}
/* USER ビュー時: GUIDE 以上だけが見える要素を非表示
（ドット自身は .is-role-elevated を持たないので消えない） */
body.role-view-as-user .is-role-elevated,
body.role-view-as-user #onlinePanel,
body.role-view-as-user #adminLeftPanel{
display:none !important;
}
@media (max-width: 480px) {
.role-view-toggle{ right:10px; }
.role-view-toggle-comm{ right:10px; bottom:10px; }
.role-view-toggle-msg{ right:10px; bottom:10px; }
}
/* ============================================================
カード型UIの角丸を 5px に統一
============================================================ */
.set-card,
.lb-card,
.qa-item, .qa-card,
.fr-thread, .fr-pin-admin, .fr-cat-admin, .fr-cat-item, .fr-pin-list > li,
.ev-card,
.comm-feature-card,
.theme-card,
.rk-card, .rk-row,
.jt-entry, .jt-theme, .jt-form,
.qd-question, .qd-answer, .qd-answer-form,
.ed-wrap, .ed-info-card, .ed-organizer, .ed-rsvp, .ed-attendees, .ed-endorsed-banner, .ed-comment, .ed-comment-form,
.ft-thread, .ft-reply, .ft-reply-form,
.cf-list > li,
.lb-meta-top
{ border-radius: 5px !important; }
.set-card .set-card,
.set-card form,
form.set-card { border-radius: 5px !important; }
/* 詳細ページのコンテンツ画像・動画も同じ角丸に（アバターは除外） */
.ed-cover,
.qm-attached-item img,
.qm-attached-item video,
.qm-preview img,
.qm-preview video,
.lb-thumb,
.diary-modal-thumb { border-radius: 5px !important; }
/* ============================================================
グローバルナビ アイコン版
============================================================ */
.nav-links-icon { gap: .8rem; }
.nav-links-icon .nav-btn {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0; font-size:calc(22px * var(--font-scale,1)); letter-spacing: 0;
border-radius: 50% !important;
border: 1px solid transparent;
transition: color .18s, background .18s, border-color .18s, transform .15s;
}
.nav-links-icon .nav-btn:hover {
color: var(--gold);
background: rgba(196,149,90,.08);
border-color: rgba(196,149,90,.3);
transform: translateY(-1px);
}
.nav-links-icon .nav-btn.active {
color: var(--cream);
background: rgba(196,149,90,.14);
border-color: var(--gold);
box-shadow: 0 0 6px rgba(196,149,90,.25);
}
.nav-links-icon .nav-btn i { line-height: 1; }
@media (max-width: 978px) {
.nav-links-icon { gap: .5rem; }
.nav-links-icon .nav-btn { width: 44px; height: 44px; font-size:calc(22px * var(--font-scale,1)); }
}
/* コミュニティリンクのアイコン版 */
/* 統合 PWA 3 機能共通: ヘッダー右端アイコン(44px / 20px / 円形)*/
.nav-community-icon {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 !important;
font-size:calc(20px * var(--font-scale,1)); letter-spacing: 0 !important;
border-radius: 50% !important;
}
.nav-community-icon i { line-height: 1; }
/* ============================================================
スマホ用 フロートタイルメニュー（LINE リッチメニュー風）
PC では非表示。≤978px で右下 FAB → ボトムシート展開
============================================================ */
.nav-tile-fab,
.nav-tile-menu,
.nav-tile-menu-backdrop { display: none; }
body.nav-tile-menu-lock { overflow: hidden; }
@media (max-width: 978px) {
/* スマホでは既存のグローバルナビ（リンク列）を非表示 → タイルメニューに置換 */
.site-nav .nav-links { display: none; }
.nav-tile-fab {
display: inline-flex;
align-items: center;
justify-content: center;
position: fixed;
right: 16px;
bottom: calc(16px + env(safe-area-inset-bottom));
width: 56px; height: 56px;
border-radius: 50%;
/* Frosted Glass */
background: rgba(255, 255, 255, .08);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
color: #F2EDE4;
border: 1px solid rgba(255, 255, 255, .15);
font-size:calc(22px * var(--font-scale,1));
cursor: pointer;
box-shadow:
0 8px 24px rgba(0, 0, 0, .45),
0 2px 4px rgba(0, 0, 0, .25),
inset 0 1px 0 rgba(255, 255, 255, .08);
z-index: 1001;
transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
}
.nav-tile-fab:hover {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .25);
transform: translateY(-1px);
}
.nav-tile-fab:active { transform: translateY(0); }
.nav-tile-fab[aria-expanded="true"] {
background: rgba(255, 255, 255, .18);
border-color: rgba(255, 255, 255, .3);
}
.nav-tile-fab .fab-icon-close { display: none; }
.nav-tile-fab[aria-expanded="true"] .fab-icon-open { display: none; }
.nav-tile-fab[aria-expanded="true"] .fab-icon-close { display: inline-block; }
/* 未読がある時に FAB の右上に小さなドット */
.nav-tile-fab-dot {
position: absolute; top: 6px; right: 6px;
width: 12px; height: 12px;
border-radius: 50%;
background: #E24B4A;
border: 2px solid var(--gold);
box-shadow: 0 0 6px rgba(226,75,74,.6);
}
.nav-tile-menu-backdrop {
display: block;
position: fixed; inset: 0;
background: rgba(0,0,0,.55);
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
z-index: 999;
}
.nav-tile-menu-backdrop[hidden] { display: none; }
.nav-tile-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.nav-tile-menu {
display: block;
position: fixed;
left: 0; right: 0; bottom: 0;
background: var(--bg2);
border-top: .5px solid rgba(196,149,90,.3);
border-radius: 18px 18px 0 0;
padding: 8px 14px calc(20px + env(safe-area-inset-bottom));
transform: translateY(100%);
transition: transform .3s cubic-bezier(.2,.85,.3,1);
z-index: 1000;
box-shadow: 0 -10px 28px rgba(0,0,0,.5);
max-height: 82vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
pointer-events: none;
}
.nav-tile-menu.open { transform: translateY(0); pointer-events: auto; }
.nav-tile-menu-handle {
width: 40px; height: 4px;
margin: 6px auto 12px;
border-radius: 2px;
background: rgba(196,149,90,.4);
}
.nav-tile-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
/* PC グローバルメニュー (.nav-links-icon .nav-btn) と同じ配色を適用 */
.nav-tile {
aspect-ratio: 1 / .92;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
border: 1px solid transparent;
border-radius: 12px;
padding: 10px 8px;
text-decoration: none;
color: var(--cream);
transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .15s;
min-height: 92px;
box-sizing: border-box;
position: relative;
}
.nav-tile i {
font-size:calc(26px * var(--font-scale,1));
color: var(--cream);
line-height: 1;
transition: color .18s;
}
.nav-tile span {
font-family: 'Noto Serif JP', serif;
font-size:calc(13px * var(--font-scale,1));
line-height: 1.3;
text-align: center;
color: var(--cream2);
letter-spacing: .04em;
}
.nav-tile:hover {
color: var(--gold);
background: rgba(196,149,90,.08);
border-color: rgba(196,149,90,.3);
transform: translateY(-1px);
}
.nav-tile:hover i { color: var(--gold); }
.nav-tile.active {
color: var(--cream);
background: rgba(196,149,90,.14);
border-color: var(--gold);
box-shadow: 0 0 6px rgba(196,149,90,.25);
}
.nav-tile.active i { color: var(--gold); }
.nav-tile.active span { color: var(--cream); }
.nav-tile-badge {
position: absolute; top: 8px; right: 8px;
min-width: 18px; height: 18px;
padding: 0 5px; border-radius: 9px;
background: #E24B4A;
color: #fff;
font-family: 'Cormorant Garamond', serif;
font-size:calc(12px * var(--font-scale,1)); font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 6px rgba(226,75,74,.6);
}
}
@media (max-width: 480px) {
.nav-tile-fab { width: 52px; height: 52px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); font-size:calc(20px * var(--font-scale,1)); }
.nav-tile-menu-grid { gap: 6px; }
.nav-tile { min-height: 84px; padding: 8px 6px; }
.nav-tile i { font-size:calc(22px * var(--font-scale,1)); }
.nav-tile span { font-size:calc(12px * var(--font-scale,1)); letter-spacing: .03em; }
}
/* ════════════════════════════════════════════════════════════
✦ 非同期ロード用スケルトン（共通ユーティリティ）
使い方：
または手書きで：
"Loading…" テキストが点滅し、JS で innerHTML を上書きする
════════════════════════════════════════════════════════════ */
@keyframes skel-blink {
0%, 100% { opacity: .35; }
50% { opacity: 1; }
}
.skel-load {
display: flex; align-items: center; justify-content: center;
min-height: 80px;
padding: 1rem;
margin: .5rem 0;
font-family: 'Cormorant Garamond', serif;
font-size:calc(13px * var(--font-scale,1));
letter-spacing: .3em;
color: var(--gold-dim, #8B7140);
text-transform: uppercase;
border: .5px dashed color-mix(in srgb, var(--gold, #C4955A) 22%, transparent);
border-radius: 3px;
background: color-mix(in srgb, var(--gold, #C4955A) 3%, transparent);
animation: skel-blink 1.4s ease-in-out infinite;
box-sizing: border-box;
}
.skel-load:empty::before { content: 'Loading…'; }
/* バリエーション */
.skel-load.skel-tall { min-height: 220px; }
.skel-load.skel-short { min-height: 48px; padding: .55rem; font-size:calc(12px * var(--font-scale,1)); }
.skel-load.skel-inline { display: inline-flex; min-height: 28px; padding: .25rem .8rem; font-size:calc(11px * var(--font-scale,1)); margin: 0; }
.skel-load.skel-block { width: 100%; }
.skel-load.skel-bare { border: none; background: transparent; }
/* fetch 失敗時の差し替え用スタイル */
.skel-error {
text-align: center; padding: 1.4rem 1rem;
font-family: 'Noto Serif JP', serif;
font-size:calc(13px * var(--font-scale,1));
color: var(--muted, #8a8073);
border: .5px dashed rgba(226,75,74,.35);
border-radius: 3px;
background: rgba(226,75,74,.04);
letter-spacing: .04em;
line-height: 1.7;
}
.skel-error a {
color: var(--gold, #C4955A);
text-decoration: underline;
cursor: pointer;
margin-left: .5em;
}
@media (prefers-reduced-motion: reduce) {
.skel-load { animation-duration: 2.4s; }
}
/* ════════════════════════════════════════════════════════════════════
✦ グローバルルール: FontAwesome ソリッドアイコンの既定サイズ
個別 CSS で別サイズを指定している箇所は特異性で勝つので影響なし。
──────────────────────────────────────────────────────────────────── */
.fa-solid,
.fas {
font-size:calc(20px * var(--font-scale,1));
}
/* ════════════════════════════════════════════════════════════════════
✦ グローバルルール: タイトル要素内の先頭アイコンに美しい余白
タイトル系の見出しに や