/*
Theme Name: みちくさ花図鑑
Description: 道ばたの花の名前がわかる「花図鑑」+毎日の写真日記テーマ。深いグリーン×クリーム×金茶の落ち着いたデザイン、オープニング演出、収益化パーツ付き。
Version: 19.0.2
Author: HANA DIARY
Requires PHP: 7.4
*/
/* ============================================================
変数の対応(カスタマイザーから上書きされます)
--green:深いグリーン --deep:ダークグリーン --leaf:セージ
--yellow:金茶 --tint:クリーム --ink:文字色 --soft:うすい文字色
--paper:トップ背景 --white:ギャラリー背景
============================================================ */
:root{
--green:#006241;
--deep:#1E3932;
--leaf:#708C81;
--tint:#F7F5F0;
--yellow:#CBA258;
--ink:#2D2A26;
--soft:#6B675F;
--paper:#F2F0EB;
--white:#FAF9F6;
--line:#E0DCD3;
--lite:rgba(255,250,232,.85); /* 照明のいろ(季節で変わる) */
--lite2:rgba(255,250,232,.62);
--jp:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
--head:"Zen Old Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
--min:var(--head); /* 旧指定との互換用 */
--en:"Cormorant Garamond","Times New Roman",serif; /* 図録のような細身のセリフ */
--en2:"Lato","Noto Serif JP",sans-serif; /* 数字・日付など */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{
font-family:var(--jp);font-weight:400;color:var(--ink);
background:var(--paper);overflow-x:hidden;
font-feature-settings:"palt";
font-kerning:normal;
text-rendering:optimizeLegibility;
letter-spacing:.055em;
line-height:2.4; /* 情報密度を下げて、静けさを出す */
/* 4. 壁の質感:ごく淡い和紙の粒子 */
background-image:
radial-gradient(rgba(45,42,38,.018) 1px, transparent 1px),
radial-gradient(rgba(45,42,38,.012) 1px, transparent 1px);
background-size:22px 22px, 13px 13px;
background-position:0 0, 7px 9px;
}
/* ---------- タイポグラフィ(格調高い明朝体) ---------- */
h1,h2,h3,h4,h5,h6,
.hero h1,.gallery-head h2,.items-head h2,.item-title,
.z-arch-title,.z-card-name,.z-title,.z-point h2,.z-memo h2,.z-obs h2,
.z-cta-title,.z-related h2,.col-card-title,.follow-title{
font-family:var(--head);
font-weight:600;
font-feature-settings:"palt";
letter-spacing:.12em;
}
.hero h1,.z-title,.z-arch-title{
font-weight:500;
letter-spacing:.18em;
}
body,p,li,dt,dd,th,td,input,textarea,select,button{
font-family:var(--jp);
}
/* ---------- オープニング(深い緑の闇に、金の花火) ---------- */
#intro{
position:fixed;inset:0;z-index:100;
height:100dvh; /* スマホのアドレスバーぶんを除いた実際の高さ */
overflow:hidden;
background:radial-gradient(circle at 50% 42%,#FBFAF7 0%,var(--paper) 55%,#E9E5DC 100%);
transition:transform 1s cubic-bezier(.65,0,.25,1),opacity 1s ease;
}
#intro.leave{transform:translateY(-100%);opacity:0}
#intro canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
#introTitle{
position:absolute;left:50%;top:50%;
transform:translate(-50%,10px) scale(.94);
width:100%;padding:0 1rem;
text-align:center;opacity:0;
transition:opacity .8s ease .05s, transform .8s cubic-bezier(.2,1.2,.3,1) .05s;
pointer-events:none;
}
#intro.titled #introTitle{opacity:1;transform:translate(-50%,0) scale(1)}
#introTitle .en{
font-family:var(--en);font-weight:700;
font-size:clamp(1.6rem,4.6vw,2.4rem);
letter-spacing:.28em;text-indent:.28em;
text-transform:uppercase;color:var(--deep);
}
#introTitle .ja{
margin-top:.9em;font-weight:500;
font-size:clamp(.7rem,2vw,.78rem);
letter-spacing:.34em;text-indent:.34em;color:#CBA258;
line-height:1.9;
}
@media (max-width:700px){
#introTitle .en{font-size:1.45rem;letter-spacing:.22em;text-indent:.22em}
}
#skipIntro{
position:absolute;right:24px;bottom:24px;z-index:2;
font-family:var(--jp);font-weight:500;font-size:.78rem;
letter-spacing:.16em;color:var(--soft);
background:rgba(255,255,255,.6);
border:1px solid var(--line);border-radius:999px;
padding:.55em 1.6em;cursor:pointer;transition:.3s;
}
#skipIntro:hover,#skipIntro:focus-visible{background:var(--green);color:#fff;border-color:var(--green)}
/* ---------- ヒーロー(静かなクリームの空間) ---------- */
header.hero{
position:relative;text-align:center;overflow:hidden;
padding:clamp(7rem,16vw,12rem) 1.5rem clamp(6rem,13vw,9rem);
background:
radial-gradient(ellipse at 15% 0%, rgba(203,162,88,.07), transparent 42%),
radial-gradient(ellipse at 88% 100%, rgba(0,98,65,.06), transparent 42%),
var(--paper);
}
/* 大きな円弧(コーヒーの湯気のような、静かなライン) */
header.hero::before{
content:"";position:absolute;left:50%;top:52%;
width:min(150vw,1180px);aspect-ratio:1;
transform:translate(-50%,-50%);
border:1px solid rgba(0,98,65,.1);
border-radius:50%;pointer-events:none;
}
header.hero::after{
content:"";position:absolute;left:50%;top:52%;
width:min(110vw,860px);aspect-ratio:1;
transform:translate(-50%,-50%);
border:1px solid rgba(203,162,88,.16);
border-radius:50%;pointer-events:none;
}
.hero>*{position:relative;z-index:2}
.hero-en{
font-family:var(--en);font-weight:500;font-style:italic;
font-size:clamp(.95rem,2.4vw,1.15rem);
letter-spacing:.62em;text-indent:.62em;
text-transform:uppercase;
}
.hero h1{
margin-top:2.8rem;
font-weight:500;
font-size:clamp(1.7rem,5vw,2.9rem);
letter-spacing:.2em;line-height:2.1;
}
.hero h1 .mk{display:inline-block}
.hero .lead{
margin-top:3.2rem;font-weight:400;
font-size:clamp(.8rem,2vw,.88rem);
letter-spacing:.16em;line-height:2.9;
}
/* 静かに流れ落ちる、金の一筋 */
.scroll-cue{
display:inline-flex;flex-direction:column;align-items:center;gap:20px;
margin-top:4rem;text-decoration:none;
}
.scroll-cue span{
font-weight:400;font-size:.72rem;letter-spacing:.42em;text-indent:.42em;
color:var(--soft);transition:color .5s ease;
}
.scroll-cue i{
position:relative;display:block;font-style:normal;font-size:0;
width:1px;height:72px;
background:linear-gradient(180deg, rgba(203,162,88,.28), rgba(203,162,88,.06));
overflow:hidden;
}
/* 光の粒が、線の上をゆっくり降りていく */
.scroll-cue i::after{
content:"";position:absolute;left:-1px;top:0;
width:3px;height:22px;border-radius:2px;
background:linear-gradient(180deg, transparent, var(--yellow), transparent);
animation:drop 2.8s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes drop{
0%{transform:translateY(-24px);opacity:0}
25%{opacity:1}
75%{opacity:1}
100%{transform:translateY(72px);opacity:0}
}
.scroll-cue:hover span{color:var(--deep)}
/* 余白の、細い線の草花(ボタニカルライン) */
.fl{
position:absolute;z-index:1;pointer-events:none;
background-position:center;background-repeat:no-repeat;background-size:contain;
opacity:.5;
animation:floaty ease-in-out infinite alternate;
}
.fl-0{background-image:url("data:image/svg+xml,")}
.fl-1{background-image:url("data:image/svg+xml,")}
.fl-2{background-image:url("data:image/svg+xml,")}
.fl-3{background-image:url("data:image/svg+xml,")}
@keyframes floaty{
from{transform:translateY(-7px) rotate(-2deg)}
to{transform:translateY(7px) rotate(2deg)}
}
@media (max-width:640px){ .fl{opacity:.35} }
/* ---------- ギャラリー ---------- */
main{
background:
radial-gradient(ellipse 42% 30% at 18% 0%, var(--lite), transparent 72%),
radial-gradient(ellipse 42% 30% at 50% 0%, var(--lite2), transparent 72%),
radial-gradient(ellipse 42% 30% at 82% 0%, var(--lite), transparent 72%),
linear-gradient(180deg, rgba(45,42,38,0) 75%, rgba(45,42,38,.05) 100%),
var(--white);
border-top:1px solid rgba(203,162,88,.28);
padding:clamp(5.5rem,12vw,8.5rem) clamp(1rem,4vw,3rem) clamp(6rem,12vw,9rem);
}
.gallery-head{text-align:center;margin-bottom:clamp(2.8rem,6vw,4.2rem)}
.gallery-head .sec-en{
font-family:var(--en);font-weight:500;font-style:italic;
font-size:clamp(.88rem,2.2vw,1.05rem);
letter-spacing:.6em;text-indent:.6em;
text-transform:uppercase;color:var(--yellow);
}
.gallery-head h2{
margin-top:1.6rem;
font-weight:500;
font-size:clamp(1.35rem,3.8vw,1.85rem);
letter-spacing:.24em;text-indent:.24em;color:var(--deep);
line-height:2;
}
.gallery-head p{
margin-top:1.5rem;font-weight:400;font-size:.8rem;
letter-spacing:.24em;color:var(--soft);
}
/* 5. ヘアラインの罫線(極細の金) */
.gallery-head::after{
content:"";display:block;width:1px;height:46px;
background:linear-gradient(180deg,var(--yellow),transparent);
margin:2.6rem auto 0;
}
/* ---------- しぼりこみ・件数 ---------- */
.gallery-tools{
max-width:1160px;margin:0 auto clamp(2.6rem,5vw,3.8rem);
display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
}
.gallery-tools .filter{font-weight:500;font-size:.8rem;letter-spacing:.2em;color:var(--soft)}
#monthFilter{
font-family:var(--jp);font-weight:500;font-size:.88rem;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:999px;
padding:.55em 1.4em;cursor:pointer;
box-shadow:0 2px 8px rgba(45,42,38,.05);
transition:border-color .25s;
}
#monthFilter:hover{border-color:var(--green)}
#monthFilter:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.gallery-tools .count{
font-family:var(--en2);font-weight:700;font-size:.76rem;letter-spacing:.14em;
color:var(--green);
}
/* ---------- 壁と額(上質な細フレーム) ---------- */
.wall{
max-width:1160px;margin:0 auto;
display:grid;gap:66px 44px;
grid-template-columns:repeat(auto-fill,minmax(252px,1fr));
}
figure.frame-wrap{position:relative;padding-top:28px}
/* 釘とヒモ(ひかえめに) */
figure.frame-wrap::before{
content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);
width:96px;height:26px;
background:
radial-gradient(circle at 50% 3.2px,#F0E0B4 1.2px,#B08D57 3px,transparent 4px),
linear-gradient(to bottom right,transparent calc(50% - 1px),#CFC9BD calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) left top/50% 100% no-repeat,
linear-gradient(to bottom left, transparent calc(50% - 1px),#CFC9BD calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) right top/50% 100% no-repeat;
}
.frame{
position:relative;
display:block;width:100%;cursor:zoom-in;text-align:left;
/* 1. 磨かれた真鍮(ゴールド) */
background:linear-gradient(135deg,#E6D2A2 0%,#CBA96D 28%,#96793F 62%,#DCC28B 100%);
padding:7px;
border:0;border-radius:5px;
box-shadow:
0 30px 44px -28px rgba(45,42,38,.55),
0 4px 12px -6px rgba(45,42,38,.2);
transition:transform .3s ease,box-shadow .45s ease,filter .45s ease;
}
/* 面取り(ハイライトと影)は上に重ねる層で表現 */
.frame::after{
content:"";position:absolute;inset:0;border-radius:5px;pointer-events:none;
box-shadow:
inset 0 0 0 1px rgba(255,246,220,.75),
inset 0 0 0 2.5px rgba(92,70,38,.5);
}
/* 2. 胡桃(ダークウォールナット)× 金の内縁 */
figure.frame-wrap:nth-child(4n+2) .frame{
background:linear-gradient(140deg,#5C4832 0%,#3D3021 42%,#2A2015 78%,#4E3D29 100%);
}
figure.frame-wrap:nth-child(4n+2) .frame::after{
box-shadow:
inset 0 0 0 1px rgba(222,194,139,.5),
inset 0 0 0 2.5px rgba(0,0,0,.45);
}
/* 3. 銀(プラチナ) */
figure.frame-wrap:nth-child(4n+3) .frame{
background:linear-gradient(135deg,#F0EEE8 0%,#CBC8BF 30%,#95928A 65%,#E0DDD5 100%);
}
figure.frame-wrap:nth-child(4n+3) .frame::after{
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.85),
inset 0 0 0 2.5px rgba(72,70,63,.4);
}
/* 4. 黒檀(エボニー)× 金のビーズライン */
figure.frame-wrap:nth-child(4n+4) .frame{
background:linear-gradient(140deg,#39332C 0%,#211D17 58%,#322B23 100%);
}
figure.frame-wrap:nth-child(4n+4) .frame::after{
box-shadow:
inset 0 0 0 1px rgba(203,162,88,.55),
inset 0 0 0 2.5px rgba(0,0,0,.55);
}
.frame{
transform:perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
}
.frame:hover,.frame:focus-visible{
--lift:-7px;
filter:brightness(1.05);
box-shadow:
0 42px 58px -30px rgba(45,42,38,.6),
0 8px 18px -8px rgba(176,141,87,.3);
}
.frame:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.mat{
position:relative;display:block;background:#FCFBF7;
padding:17px 17px 14px;border-radius:2px;
/* 二重マット:内側にVカットの細い溝 */
box-shadow:
inset 0 0 0 1px rgba(45,42,38,.06),
inset 0 0 16px rgba(45,42,38,.05);
}
.mat img{
display:block;
width:100% !important;
height:auto !important;
aspect-ratio:4/5 !important;
object-fit:cover !important;
background:#ECE8DF;
border-radius:1px;
box-shadow:0 0 0 1px rgba(45,42,38,.12), 0 0 0 4px #FCFBF7, 0 0 0 5px rgba(176,141,87,.35);
}
.mat .noimg{
display:grid;place-items:center;width:100%;aspect-ratio:4/5;
background:#ECE8DF;border-radius:1px;color:var(--soft);
font-weight:500;font-size:.82rem;letter-spacing:.14em;
}
.caption{display:block;margin-top:13px;text-align:center}
.caption .t{
font-weight:700;font-size:1rem;letter-spacing:.14em;color:var(--ink);
}
.caption .d{
display:inline-block;margin-top:6px;
font-family:var(--en);font-weight:700;
font-size:.68rem;letter-spacing:.24em;color:var(--yellow);
}
.empty{
text-align:center;font-weight:400;font-size:.9rem;line-height:2.5;
letter-spacing:.08em;color:var(--soft);
background:#fff;border:1px solid var(--line);
border-radius:16px;padding:3.2rem 1.5rem;max-width:540px;margin:0 auto;
}
/* ---------- もっと見る ---------- */
.more-wrap{text-align:center;margin-top:clamp(3rem,6vw,4.2rem)}
#moreBtn{
position:relative;display:inline-block;text-decoration:none;
font-family:var(--jp);font-weight:500;font-size:.85rem;
letter-spacing:.34em;text-indent:.34em;
color:var(--deep);background:transparent;
border:0;border-radius:0;
padding:1em .6em;cursor:pointer;
transition:color .4s ease;
}
#moreBtn::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--yellow);
transform:scaleX(.32);transform-origin:center;
transition:transform .6s cubic-bezier(.16,1,.3,1);
}
#moreBtn:hover::after,#moreBtn:focus-visible::after{transform:scaleX(1)}
#moreBtn.loading{opacity:.6;pointer-events:none}
#moreSentinel{height:1px}
/* ---------- 流れる写真の帯 ---------- */
.marquee{
overflow:hidden;background:var(--tint);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:22px 0;
}
.marquee .track{
display:flex;align-items:center;gap:22px;width:max-content;
animation:mq 56s linear infinite;
}
.marquee img{
display:block;height:114px;width:152px;object-fit:cover;
border-radius:12px;
box-shadow:0 8px 18px -10px rgba(45,42,38,.3);
}
.mq-flower{
flex:0 0 auto;width:26px;height:30px;
background:url("data:image/svg+xml,") center/contain no-repeat;
opacity:.8;
}
@keyframes mq{to{transform:translateX(-50%)}}
/* ---------- ライトボックス ---------- */
#lightbox{
position:fixed;inset:0;z-index:90;display:none;
align-items:center;justify-content:center;padding:2rem 1rem;
background:rgba(16,27,22,.94);backdrop-filter:blur(3px);
}
#lightbox.open{display:flex}
#lightbox .inner{max-width:min(680px,94vw);width:100%;text-align:center}
/* 拡大表示:黒檀の額に、クリームのマットと金のヘアライン */
#lightbox .lb-frame{
display:inline-block;
padding:9px;border-radius:3px;
background:linear-gradient(140deg,#4A4239 0%,#2B251E 32%,#16120D 64%,#3A332A 100%);
box-shadow:
inset 0 0 0 1px rgba(228,203,148,.7),
inset 0 0 0 2px rgba(0,0,0,.6),
inset 0 0 0 4px rgba(180,146,86,.3),
0 40px 80px rgba(0,0,0,.6);
}
#lightbox img{
display:block;
max-width:100%;max-height:60vh;object-fit:contain;
background:#FCFBF7;
padding:18px; /* クリームのマット */
border-radius:1px;border:0;
box-shadow:inset 0 0 0 1px rgba(45,42,38,.1);
}
#lightbox .lb-title{
margin-top:1.5rem;font-family:var(--jp);font-weight:700;
font-size:1.15rem;letter-spacing:.16em;color:#F2EFE7;
}
#lightbox .lb-date{
margin-top:.6rem;font-family:var(--jp);font-weight:500;
font-size:.82rem;letter-spacing:.1em;color:var(--yellow);
}
#lightbox .lb-note{margin-top:.9rem;font-size:.9rem;letter-spacing:.08em;color:#D6D1C4;line-height:2.3}
#lightbox .lb-btns{margin-top:1.7rem;display:flex;gap:.9rem;justify-content:center}
#lightbox button{
font-family:var(--jp);font-weight:500;font-size:.82rem;letter-spacing:.14em;cursor:pointer;
border:1px solid rgba(242,239,231,.5);background:transparent;
color:#F2EFE7;border-radius:999px;padding:.6em 1.7em;transition:.3s;
}
#lightbox button:hover,#lightbox button:focus-visible{background:#F2EFE7;color:var(--deep)}
/* ---------- フッター ---------- */
footer{
position:relative;text-align:center;
padding:3.8rem 1.5rem 4.4rem;
background:var(--deep);color:#C8CFC7;
}
footer::before{
content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
width:64px;height:2px;background:var(--yellow);
}
footer .doodle{margin-bottom:1.3rem}
footer .doodle svg{display:inline-block;animation:floaty 5s ease-in-out infinite alternate}
footer .logo{
font-family:var(--en);font-weight:700;
font-size:1rem;letter-spacing:.5em;text-indent:.5em;
text-transform:uppercase;color:#F2EFE7;
}
footer .logo .dot{color:var(--yellow)}
footer p{margin-top:1.3rem;font-size:.8rem;line-height:2.5;letter-spacing:.1em}
footer code{
font-family:ui-monospace,monospace;font-size:.74rem;
background:rgba(242,239,231,.1);border-radius:4px;padding:.12em .5em;color:#E4D5B3;
}
/* ---------- 収益化パーツ ---------- */
.shop-wrap{margin-top:2rem}
.shop-btn{
display:inline-block;text-decoration:none;
font-family:var(--en);font-weight:700;font-size:.8rem;
letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
color:var(--deep);background:transparent;
border:1.5px solid var(--yellow);border-radius:999px;
padding:.85em 2.4em;transition:.3s;
}
.shop-btn:hover,.shop-btn:focus-visible{background:var(--yellow);color:#fff}
.pr-note{
margin-top:1.4rem;font-size:.68rem;letter-spacing:.08em;color:#A29B8D;
}
/* ギャラリー内の広告枠(額と同じ佇まいで) */
.ad-frame{padding-top:28px}
.ad-slot{
position:relative;display:block;background:#fff;
border:1px solid var(--line);border-radius:16px;
padding:26px 14px 14px;min-height:300px;
display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ad-label{
position:absolute;top:8px;left:14px;
font-size:.62rem;letter-spacing:.2em;color:#B4AD9F;
}
.ad-bottom{
position:relative;max-width:760px;margin:clamp(2.5rem,5vw,3.5rem) auto 0;
background:#fff;border:1px solid var(--line);border-radius:16px;
padding:30px 16px 16px;text-align:center;overflow:hidden;
}
/* おすすめコーナー(アフィリエイト) */
.items{
background:var(--tint);
border-top:1px solid var(--line);
padding:clamp(3.5rem,8vw,5.5rem) clamp(1rem,4vw,3rem);
}
.items-head{text-align:center;margin-bottom:clamp(2.2rem,5vw,3.2rem)}
.items-head h2{
font-weight:700;font-size:clamp(1.25rem,3.6vw,1.7rem);
letter-spacing:.18em;color:var(--deep);
}
.items-head p{margin-top:.9rem;font-size:.82rem;letter-spacing:.16em;color:var(--soft)}
.items-grid{
max-width:980px;margin:0 auto;
display:grid;gap:28px;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.item-card{
display:flex;flex-direction:column;gap:10px;text-decoration:none;
background:#fff;border-radius:16px;padding:16px;
box-shadow:0 10px 24px -20px rgba(45,42,38,.28);
transition:transform .3s ease,box-shadow .3s ease;
}
.item-card:hover{transform:translateY(-5px);box-shadow:0 20px 34px -18px rgba(45,42,38,.4)}
.item-card img,.item-noimg{
display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
border-radius:10px;background:#ECE8DF;
}
.item-title{font-weight:700;font-size:.95rem;letter-spacing:.08em;color:var(--ink)}
.item-text{font-size:.8rem;letter-spacing:.06em;line-height:1.9;color:var(--soft)}
.item-more{
margin-top:auto;align-self:flex-end;
font-family:var(--en);font-weight:700;font-size:.72rem;
letter-spacing:.16em;color:var(--green);
}
/* 拡大表示の購入ボタン */
#lbShop{
display:inline-block;margin-top:1.4rem;text-decoration:none;
font-weight:700;font-size:.85rem;letter-spacing:.14em;
color:var(--deep);background:var(--yellow);
border-radius:999px;padding:.75em 2em;transition:.3s;
}
#lbShop:hover,#lbShop:focus-visible{background:#fff}
#lbShop[hidden]{display:none}
/* フッターのリンク */
.foot-nav{margin-top:1.8rem;display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}
.foot-nav a{
font-size:.74rem;letter-spacing:.2em;color:#A9B3A8;text-decoration:none;
border-bottom:1px solid transparent;transition:.3s;
}
.foot-nav a:hover{color:#F2EFE7;border-color:var(--yellow)}
/* ---------- 花図鑑(Phase 1) ---------- */
.zukan-wrap{margin-top:2.4rem}
.zukan-btn{
position:relative;display:inline-block;text-decoration:none;overflow:hidden;
font-weight:500;font-size:.86rem;
letter-spacing:.3em;text-indent:.3em;
color:#EFE6D2;
/* 黒檀のプレート */
background:linear-gradient(150deg,#3B342C 0%,#241F19 48%,#191410 100%);
padding:1.15em 3em;
border:0;border-radius:2px;
box-shadow:
inset 0 0 0 1px rgba(203,162,88,.55), /* 金のヘアライン */
inset 0 0 0 2px rgba(0,0,0,.5),
inset 0 0 0 4px rgba(180,146,86,.28), /* 二重の内縁 */
0 22px 36px -24px rgba(30,25,18,.75);
transition:color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
/* ホバーで、金の光がゆっくり横切る */
.zukan-btn::after{
content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%;
background:linear-gradient(100deg,transparent,rgba(233,209,158,.3),transparent);
transform:skewX(-18deg);
transition:left .9s cubic-bezier(.16,1,.3,1);
}
.zukan-btn:hover,.zukan-btn:focus-visible{
color:#F7EFDC;transform:translateY(-2px);
box-shadow:
inset 0 0 0 1px rgba(228,203,148,.85),
inset 0 0 0 2px rgba(0,0,0,.5),
inset 0 0 0 4px rgba(203,162,88,.4),
0 30px 44px -24px rgba(30,25,18,.8);
}
.zukan-btn:hover::after,.zukan-btn:focus-visible::after{left:120%}
.crumb{
max-width:960px;margin:0 auto;
padding:1.6rem clamp(1rem,4vw,2rem) 0;
font-size:.72rem;letter-spacing:.1em;color:var(--soft);
display:flex;gap:.6em;flex-wrap:wrap;align-items:center;
}
.crumb a{color:var(--soft);text-decoration:none;border-bottom:1px solid transparent;transition:.25s}
.crumb a:hover{color:var(--green);border-color:var(--yellow)}
.crumb em{font-style:normal;color:var(--ink)}
.zukan-archive,.zukan-single{
background:
radial-gradient(ellipse 42% 26% at 30% 0%, var(--lite2), transparent 72%),
radial-gradient(ellipse 42% 26% at 74% 0%, var(--lite2), transparent 72%),
var(--white);
min-height:60vh;padding-bottom:clamp(4rem,8vw,6rem);
}
.z-arch-head{text-align:center;padding:clamp(2.4rem,6vw,4rem) 1.5rem clamp(2rem,5vw,3rem)}
.z-arch-head h1{
margin-top:1.4rem;font-weight:500;
font-size:clamp(1.6rem,4.6vw,2.3rem);letter-spacing:.16em;color:var(--deep);
}
.z-arch-sub{margin-top:1rem;font-size:.85rem;letter-spacing:.16em;color:var(--soft)}
/* 探索UI(色チップ・季節・場所) */
.z-filters{
max-width:880px;margin:0 auto clamp(2.2rem,5vw,3.2rem);
padding:0 1rem;display:grid;gap:24px;
}
.z-filter-row{display:flex;flex-direction:column;align-items:center;gap:11px}
.z-filter-label{font-size:.74rem;letter-spacing:.24em;text-indent:.24em;color:var(--soft)}
.z-filter-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.z-chip{
display:inline-flex;align-items:center;gap:7px;text-decoration:none;
font-size:.8rem;letter-spacing:.06em;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:999px;
padding:.42em 1em;transition:.25s;
}
.z-chip i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(45,42,38,.15)}
.z-chip small{font-size:.68rem;color:var(--soft)}
.z-chip:hover{border-color:var(--green)}
.z-chip.is-current{background:var(--green);border-color:var(--green);color:#fff}
.z-chip.is-current small{color:#CBE3D6}
.z-count{
text-align:center;margin-bottom:2rem;
font-family:var(--en);font-weight:700;font-size:.78rem;
letter-spacing:.2em;color:var(--green);
}
/* 図鑑カード */
.z-grid{
max-width:1100px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem);
display:grid;gap:28px;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.z-card{
display:flex;flex-direction:column;text-decoration:none;
background:#fff;border-radius:16px;padding:10px;
box-shadow:0 10px 24px -20px rgba(45,42,38,.28);
transition:transform .3s ease,box-shadow .3s ease;
}
.z-card:hover{transform:translateY(-5px);box-shadow:0 20px 32px -18px rgba(45,42,38,.4)}
.z-card-photo img,.z-card-photo .noimg{
display:block;width:100%!important;height:auto!important;
aspect-ratio:4/3!important;object-fit:cover!important;
border-radius:10px;background:#ECE8DF;
}
.z-card-photo .noimg{display:grid;place-items:center;color:var(--soft);font-size:.78rem;letter-spacing:.1em}
.z-card-body{padding:12px 6px 8px;text-align:center}
.z-card-yomi{display:block;font-size:.66rem;letter-spacing:.24em;color:var(--soft)}
.z-card-name{display:block;margin-top:2px;font-weight:700;font-size:1rem;letter-spacing:.12em;color:var(--ink)}
.z-card-dots{display:flex;gap:5px;justify-content:center;margin-top:8px}
.z-card-dots i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(45,42,38,.12)}
.z-more{
display:inline-block;text-decoration:none;
font-weight:700;font-size:.9rem;letter-spacing:.24em;text-indent:.24em;
color:#fff;background:var(--green);border-radius:999px;
padding:1em 3.2em;box-shadow:0 10px 22px -12px rgba(0,98,65,.55);
transition:background .3s;
}
.z-more:hover{background:var(--deep)}
.z-more.loading{opacity:.6;pointer-events:none}
/* 図鑑の詳細ページ */
.z-article{max-width:760px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.z-head{text-align:center;padding:clamp(2rem,5vw,3rem) 0 1.6rem}
.z-yomi{font-size:.78rem;letter-spacing:.4em;text-indent:.4em;color:var(--soft)}
.z-head h1{
margin-top:.9rem;font-weight:500;
font-size:clamp(1.8rem,5.2vw,2.6rem);letter-spacing:.2em;color:var(--deep);
}
.z-sci{margin-top:.8rem;font-family:var(--en);font-style:italic;font-size:.85rem;letter-spacing:.08em;color:var(--soft)}
.z-photo{max-width:520px;margin:0 auto 2.4rem}
.z-photo .mat img{aspect-ratio:auto!important;max-height:70vh;object-fit:contain!important;background:#fff}
.z-info{
width:100%;border-collapse:collapse;margin:0 auto 2.4rem;
background:#fff;border-radius:14px;overflow:hidden;
box-shadow:0 10px 22px -20px rgba(45,42,38,.25);
}
.z-info th,.z-info td{
padding:.95em 1.2em;font-size:.88rem;letter-spacing:.06em;
border-bottom:1px solid var(--tint);text-align:left;
}
.z-info tr:last-child th,.z-info tr:last-child td{border-bottom:none}
.z-info th{width:9em;background:var(--tint);color:var(--deep);font-weight:700;white-space:nowrap}
.z-info td a{color:var(--green);text-decoration:none;border-bottom:1px solid var(--yellow)}
/* 開花ごよみ(1〜12月の帯) */
.z-bloom{
display:flex;flex-direction:column;align-items:center;gap:12px;
background:#fff;border-radius:14px;
padding:1.3rem 1.2rem 1.1rem;margin:-1.2rem auto 2.4rem;
box-shadow:0 10px 22px -20px rgba(45,42,38,.25);
}
.z-bloom-label{font-size:.72rem;letter-spacing:.3em;text-indent:.3em;color:var(--soft)}
.z-bloom-bar{display:flex;gap:3px;width:100%;max-width:460px}
.z-bloom-cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.z-bloom-cell i{
display:block;width:100%;height:9px;border-radius:5px;
background:#EFEBE1;
}
.z-bloom-cell.on i{
background:linear-gradient(90deg,#E2C88E,#CBA258);
box-shadow:0 1px 4px rgba(203,162,88,.45);
}
.z-bloom-cell b{
font-family:var(--en2);font-weight:700;font-size:.6rem;
letter-spacing:.05em;color:var(--soft);
}
.z-bloom-cell.on b{color:#A5824F}
.z-body{font-size:.92rem;line-height:2.3;letter-spacing:.06em;margin-bottom:2.4rem}
.z-body p{margin-bottom:1.2em}
.z-point,.z-memo{
background:#fff;border-left:4px solid var(--yellow);
border-radius:0 14px 14px 0;
padding:1.5rem 1.6rem;margin-bottom:2rem;
box-shadow:0 12px 24px -18px rgba(45,42,38,.25);
}
.z-point h2,.z-memo h2{font-size:1rem;letter-spacing:.2em;color:var(--deep);margin-bottom:.8rem}
.z-point p,.z-memo p{font-size:.88rem;line-height:2.2;letter-spacing:.05em;color:var(--ink)}
.z-obs{margin:3rem 0}
.z-obs h2{text-align:center;font-size:1.15rem;letter-spacing:.24em;color:var(--deep)}
.z-obs-sub{text-align:center;margin:.7rem 0 2rem;font-size:.76rem;letter-spacing:.2em;color:var(--soft)}
.z-obs .wall{gap:48px 32px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.z-cta{
text-align:center;background:var(--tint);
border:1px solid var(--line);border-radius:18px;
padding:2.2rem 1.5rem;margin:2.6rem 0;
}
.z-cta-title{font-weight:700;font-size:1.05rem;letter-spacing:.14em;color:var(--deep)}
.z-cta-text{margin-top:.8rem;font-size:.84rem;letter-spacing:.08em;line-height:2;color:var(--soft)}
.z-cta-btn{
display:inline-block;margin-top:1.4rem;text-decoration:none;
font-weight:700;font-size:.88rem;letter-spacing:.12em;
color:var(--deep);background:var(--yellow);border-radius:999px;
padding:.85em 2.4em;transition:.3s;
}
.z-cta-btn:hover{background:var(--green);color:#fff}
.z-related{margin-top:3rem}
.z-related h2{text-align:center;font-size:1.05rem;letter-spacing:.24em;color:var(--deep);margin-bottom:1.8rem}
.z-related .z-grid{padding:0;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px}
.z-back{text-align:center;margin-top:3rem}
.z-back a{
font-size:.82rem;letter-spacing:.14em;color:var(--soft);text-decoration:none;
border-bottom:1px solid var(--line);padding-bottom:.2em;transition:.25s;
}
.z-back a:hover{color:var(--green);border-color:var(--yellow)}
#lbZukan{
display:inline-block;margin:1.4rem .5rem 0;text-decoration:none;
font-weight:700;font-size:.85rem;letter-spacing:.1em;
color:#F2EFE7;border:1px solid var(--yellow);border-radius:999px;
padding:.7em 1.8em;transition:.3s;
}
#lbZukan:hover{background:var(--yellow);color:var(--deep)}
#lbZukan[hidden]{display:none}
/* ---------- スクロールで現れる額縁 ---------- */
/* その場で、ゆっくり滲むように現れる(静けさ優先) */
.js-reveal .frame-wrap,
.js-reveal .z-card{
opacity:0;transform:scale(.985);
transition:opacity 1.5s ease, transform 1.6s cubic-bezier(.16,1,.3,1);
}
.js-reveal .frame-wrap:nth-child(3n+2),
.js-reveal .z-card:nth-child(3n+2){transition-delay:.14s}
.js-reveal .frame-wrap:nth-child(3n+3),
.js-reveal .z-card:nth-child(3n+3){transition-delay:.28s}
.js-reveal .frame-wrap.is-in,
.js-reveal .z-card.is-in{opacity:1;transform:scale(1);}
/* ---------- 上部ナビ(スクロールで現れる) ---------- */
.gnav{
position:fixed;top:0;left:0;right:0;z-index:80;
display:flex;align-items:center;justify-content:space-between;
padding:.8rem clamp(1rem,4vw,2.4rem);
background:rgba(250,249,246,.86);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
transition:box-shadow .35s ease;
}
.gnav.scrolled{box-shadow:0 8px 20px -14px rgba(45,42,38,.3)}
.gnav-logo{
font-family:var(--jp);font-weight:500;
font-size:.9rem;letter-spacing:.18em;
color:var(--deep);text-decoration:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:44%;
}
.gnav-links{display:flex;gap:clamp(.9rem,3vw,2.2rem);flex-shrink:0}
.gnav-links a{
font-size:.82rem;font-weight:500;letter-spacing:.16em;
color:var(--ink);text-decoration:none;white-space:nowrap;
border-bottom:1px solid transparent;padding-bottom:.15em;
transition:.25s;
}
.gnav-links a:hover{color:var(--green);border-color:var(--yellow)}
/* スマホ:サイト名を隠してメニューを均等配置(はみ出し防止) */
@media (max-width:680px){
.gnav{padding:.7rem .8rem}
.gnav-logo{display:none}
.gnav-links{width:100%;justify-content:space-around;gap:.4rem}
.gnav-links a{font-size:.8rem;letter-spacing:.06em}
}
/* ---------- 今日の一輪(一点飾り) ---------- */
.today{
text-align:center;
padding:clamp(3rem,7vw,4.5rem) 1.5rem clamp(3.5rem,7vw,5rem);
background:
radial-gradient(ellipse 55% 42% at 50% 0%, var(--lite), transparent 72%),
linear-gradient(180deg, rgba(45,42,38,0) 70%, rgba(45,42,38,.04) 100%),
var(--white);
border-top:1px solid var(--line);
}
.today .sec-en{
font-family:var(--en);font-weight:500;font-style:italic;
font-size:.95rem;letter-spacing:.6em;text-indent:.6em;
text-transform:uppercase;color:var(--yellow);
}
.today h2{
margin-top:1.4rem;font-weight:500;
font-size:clamp(1.3rem,3.8vw,1.8rem);
letter-spacing:.26em;text-indent:.26em;color:var(--deep);
}
.today-frame{max-width:300px;margin:2.6rem auto 0}
/* 黒檀の額(ギャラリーと同じ作り・4種のうち最上格) */
.frame--ebony{
background:linear-gradient(140deg,#39332C 0%,#211D17 58%,#322B23 100%)!important;
}
.frame--ebony::after{
box-shadow:
inset 0 0 0 1px rgba(203,162,88,.55),
inset 0 0 0 2.5px rgba(0,0,0,.55)!important;
}
.brass-plate{
display:inline-flex;flex-direction:column;gap:2px;
margin-top:18px;padding:.6em 1.8em .65em;
background:linear-gradient(135deg,#E4CE99 0%,#C3A265 45%,#9C7E45 100%);
border-radius:3px;
box-shadow:
inset 0 1px 0 rgba(255,246,214,.75),
inset 0 -1px 0 rgba(90,70,38,.55),
0 3px 8px rgba(45,42,38,.3);
}
.brass-plate .bp-name{
font-weight:700;font-size:.92rem;letter-spacing:.22em;text-indent:.22em;
color:#4A3A1E;text-shadow:0 1px 0 rgba(255,240,200,.55);
}
.brass-plate .bp-date{
font-family:var(--en2);font-weight:700;font-size:.76rem;
letter-spacing:.22em;text-indent:.22em;color:#6B5326;
text-shadow:0 1px 0 rgba(255,240,200,.45);
}
/* ギャラリーのキャプションも同じプレートに */
.mat{text-align:center}
.caption{
display:inline-flex;flex-direction:column;gap:1px;
margin-top:14px;padding:.5em 1.4em .55em;text-align:center;
background:linear-gradient(135deg,#E4CE99 0%,#C3A265 45%,#9C7E45 100%);
border-radius:3px;
box-shadow:
inset 0 1px 0 rgba(255,246,214,.75),
inset 0 -1px 0 rgba(90,70,38,.55),
0 2px 6px rgba(45,42,38,.28);
}
.caption .t{
font-weight:700;font-size:.86rem;letter-spacing:.18em;text-indent:.18em;
color:#4A3A1E;text-shadow:0 1px 0 rgba(255,240,200,.55);
}
.caption .d{
margin-top:3px;font-family:var(--en2);font-weight:700;font-size:.74rem;
letter-spacing:.2em;text-indent:.2em;color:#6B5326;
text-shadow:0 1px 0 rgba(255,240,200,.45);
}
/* ---------- いま咲いている花ボタン ---------- */
.now-wrap{margin-top:1.2rem}
.now-btn{
display:inline-block;text-decoration:none;
font-weight:500;font-size:.8rem;letter-spacing:.16em;
color:var(--soft);background:transparent;
border:1px solid var(--line);border-radius:999px;
padding:.75em 1.9em;
transition:color .4s ease, border-color .4s ease;
}
.now-btn:hover{color:#7A5C2E;border-color:var(--yellow)}
/* ---------- 夜の美術館モード(端末のダーク設定に自動対応) ---------- */
@media (prefers-color-scheme: dark){
html:root{
--white:#131E18;
--paper:#0E1712;
--ink:#EDE7DA;
--soft:#9DA79C;
--line:#2A3830;
--green:#3E8A63;
--deep:#0B130F;
}
#intro{background:radial-gradient(circle at 50% 42%,#16241E 0%,#0E1712 60%,#08100C 100%)}
#introTitle .en{color:#EDE7DA}
#skipIntro{background:rgba(19,30,24,.6);color:var(--soft);border-color:var(--line)}
header.hero{
background:
radial-gradient(ellipse at 15% 0%, rgba(203,162,88,.08), transparent 42%),
radial-gradient(ellipse at 88% 100%, rgba(62,138,99,.08), transparent 42%),
var(--paper);
}
body .hero h1,body .hero h1 .mk{color:var(--ink)}
body .hero .lead{color:var(--soft)}
main,.today{
background:
radial-gradient(ellipse 42% 30% at 50% 0%, rgba(255,244,214,.06), transparent 72%),
var(--white);
}
.zukan-archive,.zukan-single{
background:
radial-gradient(ellipse 42% 26% at 50% 0%, rgba(255,244,214,.06), transparent 72%),
var(--white);
}
.gallery-head h2,.z-arch-head h1,.z-head h1,.items-head h2,
.z-obs h2,.z-related h2,.z-point h2,.z-memo h2,.today h2,
.gnav-logo,.now-btn,.shop-btn{color:#E8DFC9}
.gnav{background:rgba(14,23,18,.86)}
.z-info,.item-card,.z-card,.z-bloom,.ad-slot,.ad-bottom,.empty,#monthFilter{
background:#16231C;border-color:var(--line);
}
.z-info th{background:#101A14;color:#D8CFAF}
.z-info th,.z-info td{border-color:#22302A}
.z-bloom-cell i{background:#243129}
.items,.z-cta{background:#121B15;border-color:var(--line)}
.z-search input[type="search"],.z-vs-col{background:#16231C;border-color:var(--line)}
.sticky-cta{background:rgba(14,23,18,.94)}
.sticky-cta a{color:#E8DFC9}
.sticky-cta button{background:#1B2A22;color:var(--soft)}
.z-buy{background:#16231C}
.z-buy-label{color:#E8DFC9}
.gift-wrap,.rank{background:var(--white)}
.gift-banner{background:linear-gradient(135deg,#1E2A22,#232E25)}
.gift-text,.rank h2{color:#E8DFC9}
.col-card,.col-mini,.col-pager .page-numbers{background:#16231C;border-color:var(--line)}
.col-home{background:#121B15}
.col-card-title,.col-mini-title,.col-home-head h2{color:#E8DFC9}
.col-body blockquote{background:#121B15}
.z-vs-name,.z-vs-text{color:var(--ink)}
.z-vs-text{background:#121B15}
.item-title,.z-cta-title{color:#E8DFC9}
.mat,.brass-plate,.caption{/* マットと真鍮は昼のまま(本物の美術館のように) */}
}
/* ---------- 季節の衣替え(照明の色温度がほんのり変わる) ---------- */
.season-haru{--lite:rgba(255,238,243,.9);--lite2:rgba(255,238,243,.66)} /* 桜がかった光 */
.season-natsu{--lite:rgba(240,250,228,.9);--lite2:rgba(240,250,228,.66)} /* 若葉の光 */
.season-aki{--lite:rgba(255,240,214,.92);--lite2:rgba(255,240,214,.68)} /* 琥珀の光 */
.season-fuyu{--lite:rgba(236,244,250,.9);--lite2:rgba(236,244,250,.66)} /* 青白い静かな光 */
/* ---------- 名前でさがす ---------- */
.z-search{
display:flex;justify-content:center;gap:0;
max-width:440px;margin:0 auto clamp(1.8rem,4vw,2.6rem);
padding:0 1rem;
}
.z-search input[type="search"]{
flex:1;min-width:0;
font-family:var(--jp);font-size:.9rem;letter-spacing:.06em;color:var(--ink);
background:#fff;border:1px solid var(--line);border-right:none;
border-radius:999px 0 0 999px;
padding:.7em 1.3em;outline:none;transition:border-color .25s;
}
.z-search input[type="search"]:focus{border-color:var(--green)}
.z-search button{
font-family:var(--jp);font-weight:700;font-size:.82rem;letter-spacing:.1em;
color:#fff;background:var(--green);border:none;
border-radius:0 999px 999px 0;padding:0 1.6em;cursor:pointer;
transition:background .3s;
}
.z-search button:hover{background:var(--deep)}
/* ---------- 見分け方くらべ(比較カード) ---------- */
.z-vs{margin:2.6rem 0}
.z-vs h2{
text-align:center;font-size:1.05rem;letter-spacing:.26em;text-indent:.26em;
color:var(--deep);margin-bottom:1.6rem;
}
.z-vs-grid{
display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
@media (max-width:560px){ .z-vs-grid{grid-template-columns:1fr} }
.z-vs-col{
background:#fff;border-radius:14px;padding:14px;
box-shadow:0 10px 24px -20px rgba(45,42,38,.28);
display:flex;flex-direction:column;gap:9px;text-align:center;
}
.z-vs-col.is-self{outline:1.5px solid var(--yellow);outline-offset:-1.5px}
.z-vs-tag{
align-self:center;font-size:.62rem;letter-spacing:.3em;text-indent:.3em;
color:var(--soft);
}
.z-vs-col.is-self .z-vs-tag{color:#A5824F}
.z-vs-col img,.z-vs-col .noimg{
display:block;width:100%!important;height:auto!important;
aspect-ratio:4/3!important;object-fit:cover!important;
border-radius:8px;background:#ECE8DF;
}
.z-vs-col .noimg{display:grid;place-items:center;font-size:.76rem;letter-spacing:.1em;color:var(--soft)}
.z-vs-name{font-weight:700;font-size:1rem;letter-spacing:.12em;color:var(--ink)}
.z-vs-name a{color:var(--green);text-decoration:none;border-bottom:1px solid var(--yellow)}
.z-vs-row{font-size:.76rem;letter-spacing:.05em;color:var(--soft)}
.z-vs-row b{
display:inline-block;margin-right:.7em;font-weight:700;font-size:.66rem;
letter-spacing:.14em;color:#A5824F;
}
.z-vs-text{
margin-top:2px;font-size:.78rem;line-height:2;letter-spacing:.04em;
color:var(--ink);text-align:left;
background:var(--tint);border-radius:8px;padding:.9em 1em;
}
/* ---------- 観察タイムライン(横スクロール) ---------- */
.z-timeline{
display:flex;gap:26px;align-items:flex-start;
overflow-x:auto;padding:34px 8px 18px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.z-timeline .frame-wrap{
flex:0 0 168px;position:relative;padding-top:0;
scroll-snap-align:center;
}
.z-timeline .frame-wrap::before{ /* 時のレール */
content:"";position:absolute;top:-20px;left:-13px;right:-13px;height:1px;
background:var(--line);width:auto;transform:none;
}
.z-timeline .frame-wrap::after{ /* 金の点 */
content:"";position:absolute;top:-23.5px;left:50%;transform:translateX(-50%);
width:8px;height:8px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#F0E0B4,#B08D57);
}
.z-timeline .frame{padding:4px}
.z-timeline .mat{padding:7px 7px 6px}
.z-timeline .caption{margin-top:8px;padding:.35em 1em .4em}
.z-timeline::-webkit-scrollbar{height:8px}
.z-timeline::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
/* ---------- ページ間のふわっとした遷移(対応ブラウザのみ) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){animation-duration:.35s}
/* ---------- 追従CTA(図鑑ページの下部バー) ---------- */
.sticky-cta{
position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
z-index:70;display:flex;align-items:center;gap:4px;
max-width:min(560px,calc(100vw - 24px));
background:rgba(250,249,246,.95);backdrop-filter:blur(8px);
border:1.5px solid var(--yellow);border-radius:999px;
box-shadow:0 14px 30px -14px rgba(45,42,38,.45);
padding:.35em .5em .35em 1.2em;
animation:cta-in .5s cubic-bezier(.2,.7,.25,1);
}
@keyframes cta-in{from{transform:translate(-50%,80px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.sticky-cta a{
flex:1;min-width:0;text-decoration:none;
font-weight:700;font-size:.84rem;letter-spacing:.06em;color:var(--deep);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
padding:.45em 0;
}
.sticky-cta button{
flex:0 0 auto;width:34px;height:34px;border-radius:50%;
border:none;background:var(--tint);color:var(--soft);
font-size:1rem;cursor:pointer;transition:.25s;
}
.sticky-cta button:hover{background:var(--line);color:var(--ink)}
.sticky-cta[hidden]{display:none}
/* ---------- この花を、暮らしに(商品枠) ---------- */
.z-buy{
display:flex;flex-direction:column;align-items:center;gap:8px;
text-align:center;background:#fff;
border:1.5px solid var(--yellow);border-radius:14px;
padding:1.4rem 1.3rem;margin:0 0 2.4rem;
box-shadow:0 10px 22px -20px rgba(45,42,38,.25);
}
.z-buy-label{font-weight:700;font-size:.92rem;letter-spacing:.16em;color:var(--deep)}
.z-buy-text{font-size:.8rem;letter-spacing:.06em;color:var(--soft);line-height:1.9}
.z-buy-btn{
display:inline-block;margin-top:.3rem;text-decoration:none;
font-weight:700;font-size:.85rem;letter-spacing:.1em;
color:#fff;background:var(--green);border-radius:999px;
padding:.7em 2.2em;transition:.3s;
}
.z-buy-btn:hover{background:var(--deep)}
/* ---------- この写真を飾る ---------- */
.z-print{text-align:center;margin-top:1.1rem}
.z-print-btn{
display:inline-block;text-decoration:none;
font-weight:700;font-size:.8rem;letter-spacing:.1em;
color:#7A5C2E;background:linear-gradient(135deg,#E9D6A4,#CBA96D);
border-radius:999px;padding:.7em 1.8em;
box-shadow:inset 0 1px 0 rgba(255,246,214,.7), 0 3px 8px rgba(45,42,38,.2);
transition:.25s;
}
.z-print-btn:hover{filter:brightness(1.06);transform:translateY(-2px)}
/* ---------- 季節商戦バナー ---------- */
.gift-wrap{padding:0 1.5rem;background:var(--white);text-align:center}
.gift-banner{
display:inline-flex;flex-direction:column;gap:4px;text-decoration:none;
text-align:center;
background:linear-gradient(135deg,#FFF7EA,#FBEED6);
border:1.5px solid var(--yellow);border-radius:14px;
padding:1.1rem 2rem;margin:1.6rem auto;
box-shadow:0 12px 24px -16px rgba(203,162,88,.5);
transition:transform .25s, box-shadow .25s;
}
.gift-banner:hover{transform:translateY(-3px);box-shadow:0 18px 30px -16px rgba(203,162,88,.6)}
.gift-en{
font-family:var(--en);font-weight:700;font-size:.62rem;
letter-spacing:.4em;text-indent:.4em;color:#B08D57;text-transform:uppercase;
}
.gift-text{font-weight:700;font-size:.92rem;letter-spacing:.08em;color:var(--deep)}
.z-article .gift-banner{display:flex;margin:0 0 2.4rem}
/* ---------- よく調べられている花(ランキング) ---------- */
.rank{
text-align:center;background:var(--white);
padding:clamp(3rem,7vw,4.5rem) clamp(1rem,4vw,3rem);
border-top:1px solid var(--line);
}
.rank .sec-en{
font-family:var(--en);font-weight:500;font-style:italic;
font-size:.95rem;letter-spacing:.6em;text-indent:.6em;
text-transform:uppercase;color:var(--yellow);
}
.rank h2{
margin:1.4rem 0 2.6rem;font-weight:500;
font-size:clamp(1.3rem,3.8vw,1.8rem);
letter-spacing:.22em;text-indent:.22em;color:var(--deep);
}
.rank-grid{
max-width:1100px;margin:0 auto;
display:grid;gap:26px;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.rank-item{position:relative}
.rank-no{
position:absolute;top:-12px;left:-6px;z-index:2;
display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
font-family:var(--en);font-weight:700;font-size:1rem;
color:#7A5C2E;background:linear-gradient(135deg,#EFDDB0,#CBA96D);
box-shadow:inset 0 1px 0 rgba(255,246,214,.7), 0 4px 10px rgba(45,42,38,.3);
}
.rank-item:nth-child(n+2) .rank-no{
background:linear-gradient(135deg,#F0EEE8,#B9B6AD);color:#5C594F;
}
/* ---------- 更新のお知らせ枠(フッター) ---------- */
.follow{
max-width:420px;margin:2rem auto 0;
background:rgba(242,239,231,.07);
border:1px solid rgba(242,239,231,.2);border-radius:14px;
padding:1.4rem 1.3rem;
}
.follow-title{font-weight:700;font-size:.85rem;letter-spacing:.14em;color:#F2EFE7}
.follow-body{margin-top:.9rem}
/* ---------- 読みもの(一覧) ---------- */
.col-list{
max-width:760px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);
display:grid;gap:22px;
}
.col-card{
display:grid;grid-template-columns:190px 1fr;gap:20px;
text-decoration:none;background:#fff;border-radius:16px;padding:14px;
box-shadow:0 10px 24px -20px rgba(45,42,38,.28);
transition:transform .3s ease,box-shadow .3s ease;
}
.col-card:hover{transform:translateY(-4px);box-shadow:0 20px 32px -18px rgba(45,42,38,.4)}
@media (max-width:560px){ .col-card{grid-template-columns:1fr} }
.col-card-photo img,.col-card-photo .noimg{
display:block;width:100%!important;height:auto!important;
aspect-ratio:4/3!important;object-fit:cover!important;
border-radius:10px;background:#ECE8DF;
}
.col-card-photo .noimg{display:grid;place-items:center;font-size:2rem}
.col-card-body{display:flex;flex-direction:column;gap:8px;padding:4px 4px 4px 0}
.col-card-meta{display:flex;align-items:center;gap:12px}
.col-card-meta b{
font-weight:700;font-size:.66rem;letter-spacing:.14em;
color:#fff;background:var(--green);border-radius:999px;padding:.28em .9em;
}
.col-card-meta time{
font-family:var(--en2);font-weight:700;font-size:.68rem;
letter-spacing:.16em;color:var(--soft);
}
.col-card-title{font-weight:700;font-size:1.05rem;letter-spacing:.08em;color:var(--ink);line-height:1.7}
.col-card-ex{font-size:.8rem;letter-spacing:.04em;line-height:1.95;color:var(--soft)}
.col-card-more{
margin-top:auto;align-self:flex-end;
font-family:var(--en);font-weight:700;font-size:.72rem;
letter-spacing:.16em;color:var(--green);
}
.col-pager{text-align:center;margin-top:2.6rem}
.col-pager .page-numbers{
display:inline-block;min-width:38px;padding:.5em .7em;margin:0 3px;
font-family:var(--en);font-weight:700;font-size:.8rem;
color:var(--soft);background:#fff;border:1px solid var(--line);
border-radius:999px;text-decoration:none;transition:.25s;
}
.col-pager .page-numbers:hover{border-color:var(--green);color:var(--green)}
.col-pager .page-numbers.current{background:var(--green);border-color:var(--green);color:#fff}
/* ---------- 読みもの(記事) ---------- */
.col-meta{display:flex;align-items:center;justify-content:center;gap:14px}
.col-cat{
font-weight:700;font-size:.68rem;letter-spacing:.14em;
color:#fff;background:var(--green);border-radius:999px;
padding:.32em 1em;text-decoration:none;
}
.col-meta time{
font-family:var(--en2);font-weight:700;font-size:.7rem;
letter-spacing:.2em;color:var(--soft);
}
.col-single .z-head h1{
font-size:clamp(1.5rem,4.4vw,2.2rem);letter-spacing:.1em;line-height:1.8;
}
.col-hero{margin-bottom:2.4rem}
.col-hero img{
display:block;width:100%;height:auto;border-radius:14px;
box-shadow:0 20px 36px -24px rgba(45,42,38,.5);
}
.col-body h2{
margin:2.4rem 0 1rem;padding-left:.7em;
font-weight:700;font-size:1.15rem;letter-spacing:.1em;color:var(--deep);
border-left:4px solid var(--yellow);line-height:1.7;
}
.col-body h3{
margin:2rem 0 .9rem;font-weight:700;font-size:1rem;
letter-spacing:.1em;color:var(--deep);
}
.col-body ul,.col-body ol{margin:0 0 1.4em 1.4em}
.col-body li{margin-bottom:.5em;line-height:2.1}
.col-body a{color:var(--green);border-bottom:1px solid var(--yellow);text-decoration:none}
.col-body img{max-width:100%;height:auto;border-radius:12px;margin:1.2em 0}
.col-body blockquote{
margin:1.6em 0;padding:1.1em 1.3em;
background:var(--tint);border-left:4px solid var(--line);border-radius:0 10px 10px 0;
font-size:.88rem;line-height:2.1;color:var(--soft);
}
.col-nav{
display:flex;justify-content:space-between;gap:14px;
margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.col-nav a{
font-size:.8rem;letter-spacing:.06em;color:var(--soft);
text-decoration:none;transition:.25s;max-width:46%;
}
.col-nav a:hover{color:var(--green)}
.col-nav-next{margin-left:auto;text-align:right}
/* ---------- トップの読みもの ---------- */
.col-home{
text-align:center;background:var(--tint);
border-top:1px solid var(--line);
padding:clamp(3.2rem,7vw,5rem) clamp(1rem,4vw,3rem);
}
.col-home-head .sec-en{
font-family:var(--en);font-weight:500;font-style:italic;
font-size:.95rem;letter-spacing:.6em;text-indent:.6em;
text-transform:uppercase;color:var(--yellow);
}
.col-home-head h2{
margin:1.4rem 0 1.1rem;font-weight:500;
font-size:clamp(1.3rem,3.8vw,1.8rem);
letter-spacing:.24em;text-indent:.24em;color:var(--deep);
}
.col-home-head p{font-size:.82rem;letter-spacing:.14em;color:var(--soft)}
.col-home-grid{
max-width:980px;margin:2.4rem auto 0;
display:grid;gap:24px;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.col-mini{
display:flex;flex-direction:column;gap:9px;text-decoration:none;
background:#fff;border-radius:14px;padding:12px;text-align:left;
box-shadow:0 10px 24px -20px rgba(45,42,38,.28);
transition:transform .3s ease;
}
.col-mini:hover{transform:translateY(-5px)}
.col-mini-photo img,.col-mini-photo .noimg{
display:block;width:100%!important;height:auto!important;
aspect-ratio:16/10!important;object-fit:cover!important;
border-radius:9px;background:#ECE8DF;
}
.col-mini-photo .noimg{display:grid;place-items:center;font-size:1.8rem}
.col-mini-date{
font-family:var(--en2);font-weight:700;font-size:.76rem;
letter-spacing:.12em;color:var(--yellow);
}
.col-mini-title{font-weight:700;font-size:.92rem;letter-spacing:.06em;color:var(--ink);line-height:1.7}
.col-home-more{margin-top:2.2rem}
.col-home-more a{
font-weight:700;font-size:.85rem;letter-spacing:.14em;
color:var(--green);text-decoration:none;
border-bottom:1px solid var(--yellow);padding-bottom:.2em;
}
/* ---------- 6. 額のキャプション:美術館の作品ラベル(cap-label のとき) ---------- */
.cap-label .caption,
.cap-label .brass-plate{
display:block;background:none;box-shadow:none;
border-radius:0;padding:0;margin-top:16px;
text-align:left;
border-left:1px solid var(--yellow);
padding-left:12px;
}
.cap-label .caption .t,
.cap-label .brass-plate .bp-name{
display:block;
font-family:var(--jp); /* サイト共通のゴシックに */
font-weight:700;font-size:.92rem;letter-spacing:.14em;text-indent:0;
color:var(--ink);text-shadow:none;
line-height:1.9;
}
.cap-label .caption .d,
.cap-label .brass-plate .bp-date{
display:block;margin-top:5px;
font-family:var(--jp); /* 日付もサイト共通の書体で */
font-weight:500;font-size:.8rem;
letter-spacing:.1em;text-indent:0;
color:var(--soft);text-shadow:none;
}
.cap-label .today-frame .brass-plate{
display:inline-block;margin-left:0;
}
.cap-label .today-frame{text-align:left}
.cap-label .z-timeline .caption{border-left:none;padding-left:0;text-align:center}
/* ---------- ボタン類も、線と余白の静かな表現へ ---------- */
.z-more,.zukan-btn,.z-buy-btn,.z-cta-btn{
border-radius:999px;
}
.gnav-links a{font-weight:500}
.scroll-cue span{letter-spacing:.4em;text-indent:.4em}
/* ============================================================
17.2 花図鑑CTA / ギャラリー拡大表示のプレミアム調整
============================================================ */
/* 花図鑑をひらく: 植物標本室の扉を思わせるシグネチャーボタン */
.zukan-wrap{margin-top:2.8rem;display:flex;justify-content:center}
.zukan-btn{
position:relative;
display:inline-grid;
grid-template-columns:50px minmax(0,1fr) 38px;
align-items:center;
gap:14px;
min-width:min(370px,92vw);
padding:10px 12px 10px 10px;
overflow:hidden;
text-align:left;
text-indent:0;
color:#F5EBD7;
background:
radial-gradient(circle at 18% 18%,rgba(255,255,255,.08),transparent 28%),
linear-gradient(135deg,#244A3A 0%,#173629 52%,#0E241B 100%);
border:1px solid rgba(214,183,119,.72);
border-radius:999px;
box-shadow:
inset 0 0 0 1px rgba(255,248,226,.08),
inset 0 -12px 24px rgba(4,18,13,.18),
0 18px 34px -22px rgba(16,39,29,.9);
transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,border-color .45s ease,background .45s ease;
}
.zukan-btn::before{
content:"";
position:absolute;inset:4px;
border:1px solid rgba(218,190,131,.18);
border-radius:999px;
pointer-events:none;
}
.zukan-btn::after{
content:"";
position:absolute;top:-40%;bottom:-40%;left:-55%;width:34%;
background:linear-gradient(100deg,transparent,rgba(255,239,197,.2),transparent);
transform:skewX(-18deg);
transition:left .9s cubic-bezier(.16,1,.3,1);
pointer-events:none;
}
.zukan-btn-emblem{
position:relative;z-index:1;
display:grid;place-items:center;
width:50px;height:50px;border-radius:50%;
color:#5A431E;
background:linear-gradient(145deg,#F1DCA9 0%,#D1AE67 52%,#A77D35 100%);
border:1px solid rgba(255,243,207,.82);
box-shadow:
inset 0 1px 0 rgba(255,250,232,.75),
inset 0 -3px 7px rgba(100,70,22,.22),
0 7px 16px rgba(5,20,14,.3);
}
.zukan-btn-emblem svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.zukan-btn-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.zukan-btn-copy small{
font-family:var(--en);font-weight:600;font-size:.65rem;
line-height:1.25;letter-spacing:.3em;color:#D9BD82;
}
.zukan-btn-copy strong{
font-family:var(--head);font-weight:500;font-size:.98rem;
line-height:1.65;letter-spacing:.2em;color:#F6EDDC;
white-space:nowrap;
}
.zukan-btn-arrow{
position:relative;z-index:1;
display:grid;place-items:center;
width:34px;height:34px;border-radius:50%;
font-family:var(--en);font-size:1.2rem;line-height:1;color:#E4C98F;
border:1px solid rgba(224,197,139,.5);
transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease,color .35s ease;
}
.zukan-btn:hover,.zukan-btn:focus-visible{
color:#FFF8E9;
border-color:#E4C98F;
background:
radial-gradient(circle at 18% 18%,rgba(255,255,255,.1),transparent 30%),
linear-gradient(135deg,#2A5542 0%,#1B3F30 52%,#11291F 100%);
transform:translateY(-3px);
box-shadow:
inset 0 0 0 1px rgba(255,248,226,.1),
inset 0 -12px 24px rgba(4,18,13,.14),
0 28px 42px -24px rgba(11,38,26,.95);
}
.zukan-btn:hover::after,.zukan-btn:focus-visible::after{left:125%}
.zukan-btn:hover .zukan-btn-arrow,.zukan-btn:focus-visible .zukan-btn-arrow{
color:#173629;background:#E3C98F;transform:translateX(3px);
}
.zukan-btn:focus-visible{outline:2px solid rgba(203,162,88,.75);outline-offset:5px}
/* ギャラリークリック後: 写真集・図録のような情報設計 */
#lightbox{
overflow-y:auto;
background:
radial-gradient(circle at 50% 22%,rgba(203,162,88,.10),transparent 34%),
rgba(8,18,13,.965);
backdrop-filter:blur(7px);
}
#lightbox .inner{max-width:min(720px,94vw);padding:1rem 1rem 1.5rem}
#lightbox .lb-frame{
box-shadow:
inset 0 0 0 1px rgba(237,213,161,.78),
inset 0 0 0 2px rgba(0,0,0,.65),
inset 0 0 0 5px rgba(166,126,60,.25),
0 42px 90px rgba(0,0,0,.68);
}
#lightbox .lb-title{
margin-top:1.8rem;
font-family:var(--head);font-weight:500;
font-size:clamp(1.25rem,4vw,1.65rem);
line-height:1.8;letter-spacing:.2em;text-indent:.2em;
color:#F3E8D2;
text-shadow:0 2px 16px rgba(0,0,0,.35);
}
#lightbox .lb-date{
margin-top:.45rem;
font-family:var(--en);font-weight:600;font-style:italic;
font-size:.98rem;line-height:1.5;letter-spacing:.24em;
color:#D7B873;
}
#lightbox .lb-date::before{
content:"PHOTO JOURNAL";
display:block;margin-bottom:.2rem;
font-family:var(--en);font-style:normal;font-weight:600;
font-size:.62rem;letter-spacing:.42em;text-indent:.42em;
color:rgba(229,207,159,.7);
}
#lightbox .lb-note{
position:relative;
max-width:560px;margin:1.25rem auto 0;padding:1.15rem 1.1rem 0;
font-family:var(--jp);font-weight:400;
font-size:.9rem;line-height:2.25;letter-spacing:.075em;
color:#DCD4C6;
border-top:1px solid rgba(203,162,88,.32);
}
#lightbox .lb-note:empty{display:none}
#lightbox .lb-btns{margin-top:1.8rem;gap:.7rem;flex-wrap:wrap}
#lightbox button{
font-family:var(--head);font-weight:500;font-size:.8rem;letter-spacing:.14em;
color:#EEE4D1;background:rgba(255,255,255,.025);
border:1px solid rgba(214,183,119,.42);
padding:.68em 1.55em;
}
#lightbox button:hover,#lightbox button:focus-visible{
color:#153428;background:#E5D3AA;border-color:#E5D3AA;
transform:translateY(-1px);
}
#lightbox #lbClose{border-color:rgba(242,239,231,.24);color:#CFC7B8}
#lightbox #lbClose:hover,#lightbox #lbClose:focus-visible{color:#153428;border-color:#E5D3AA}
#lbZukan,#lbShop{
font-family:var(--head);font-weight:500;
letter-spacing:.12em;
box-shadow:0 12px 24px -18px rgba(0,0,0,.7);
}
#lbZukan{
color:#F1E6D1;background:rgba(22,55,41,.72);
border-color:rgba(215,184,115,.75);
}
#lbZukan:hover,#lbZukan:focus-visible{background:#D5B574;color:#173629;border-color:#D5B574}
#lbShop{color:#173629;background:linear-gradient(135deg,#E8D29F,#CBA258)}
#lbShop:hover,#lbShop:focus-visible{background:#F4E8CB;color:#173629}
/* 花図鑑詳細: 明朝体と深緑・古金色を明確に使い分ける */
.z-head{position:relative;padding-bottom:2.2rem}
.z-head::after{
content:"";display:block;width:44px;height:1px;margin:1.5rem auto 0;
background:linear-gradient(90deg,transparent,var(--yellow),transparent);
}
.z-yomi{
font-family:var(--jp);font-weight:500;font-size:.72rem;
letter-spacing:.42em;text-indent:.42em;color:#96733E;
}
.z-head h1{
font-family:var(--head);font-weight:500;
color:#263E34;letter-spacing:.22em;text-indent:.22em;
}
.z-sci{
margin-top:.65rem;font-family:var(--en);font-weight:500;font-style:italic;
font-size:1rem;letter-spacing:.12em;color:#987742;
}
.z-info{
border:1px solid rgba(177,140,75,.22);
box-shadow:0 18px 40px -30px rgba(45,42,38,.5);
}
.z-info th,.z-info td{font-family:var(--jp);line-height:1.9}
.z-info th{
font-family:var(--head);font-weight:500;
letter-spacing:.13em;color:#654E28;background:#F4EFE4;
}
.z-info td{color:#3C3933}
.z-info td a{color:#315C49;border-bottom-color:rgba(203,162,88,.65)}
.z-bloom-label{
font-family:var(--head);font-weight:500;color:#765B31;
}
.z-body{
font-family:var(--jp);font-weight:400;
font-size:.94rem;line-height:2.35;letter-spacing:.065em;color:#393630;
}
.z-point,.z-memo{
background:linear-gradient(135deg,#FFFDF8 0%,#F8F3E9 100%);
border-left:3px solid #C5A05E;
box-shadow:0 18px 36px -30px rgba(52,43,29,.55);
}
.z-point h2,.z-memo h2,.z-obs h2,.z-related h2{
font-family:var(--head);font-weight:500;color:#294338;
}
.z-point p,.z-memo p{color:#454038}
.z-card-yomi{font-family:var(--jp);font-weight:500;color:#977A49}
.z-card-name{font-family:var(--head);font-weight:500;color:#2E463B;letter-spacing:.14em}
.z-back a{font-family:var(--head);font-weight:500;color:#776B58}
@media (max-height:760px){
#lightbox{align-items:flex-start}
#lightbox img{max-height:52vh}
}
@media (max-width:520px){
.zukan-btn{grid-template-columns:44px minmax(0,1fr) 32px;gap:10px;padding:8px 10px 8px 8px;min-width:min(345px,94vw)}
.zukan-btn-emblem{width:44px;height:44px}
.zukan-btn-emblem svg{width:27px;height:27px}
.zukan-btn-copy small{font-size:.57rem;letter-spacing:.24em}
.zukan-btn-copy strong{font-size:.88rem;letter-spacing:.14em}
.zukan-btn-arrow{width:30px;height:30px;font-size:1.05rem}
#lightbox .lb-title{letter-spacing:.14em;text-indent:.14em}
#lightbox .lb-note{padding-left:.25rem;padding-right:.25rem;font-size:.84rem}
}
@media (prefers-color-scheme:dark){
.z-head h1,.z-point h2,.z-memo h2,.z-obs h2,.z-related h2,.z-card-name{color:#E9DFC8}
.z-yomi,.z-sci,.z-bloom-label,.z-card-yomi{color:#CBAE73}
.z-info{border-color:rgba(203,162,88,.22)}
.z-info th{background:#101A14;color:#DCC693}
.z-info td,.z-body,.z-point p,.z-memo p{color:var(--ink)}
.z-point,.z-memo{background:linear-gradient(135deg,#17251E,#121D17)}
.z-back a{color:#AFA797}
}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---------- 動きを減らす設定の人へ ---------- */
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
}
/* ============================================================
17.3 花図鑑CTAをコンパクト化
スマートフォンで円形・大型表示にならないよう寸法を明示する
============================================================ */
header.hero .zukan-wrap{
margin-top:2rem;
display:flex;
justify-content:center;
}
header.hero .zukan-btn{
display:inline-grid !important;
grid-template-columns:40px minmax(0,1fr) 28px !important;
align-items:center !important;
gap:10px !important;
width:min(300px,calc(100vw - 44px)) !important;
min-width:0 !important;
max-width:300px !important;
height:64px !important;
min-height:64px !important;
max-height:64px !important;
aspect-ratio:auto !important;
padding:7px 10px 7px 8px !important;
border-radius:18px !important;
overflow:hidden !important;
}
header.hero .zukan-btn::before{
inset:3px !important;
border-radius:15px !important;
}
header.hero .zukan-btn-emblem{
width:40px !important;
height:40px !important;
min-width:40px !important;
min-height:40px !important;
border-radius:50% !important;
}
header.hero .zukan-btn-emblem svg{
width:24px !important;
height:24px !important;
}
header.hero .zukan-btn-copy{
gap:0 !important;
overflow:hidden;
}
header.hero .zukan-btn-copy small{
font-size:.52rem !important;
line-height:1.2 !important;
letter-spacing:.22em !important;
white-space:nowrap;
}
header.hero .zukan-btn-copy strong{
font-size:.82rem !important;
line-height:1.55 !important;
letter-spacing:.12em !important;
white-space:nowrap;
}
header.hero .zukan-btn-arrow{
width:28px !important;
height:28px !important;
min-width:28px !important;
min-height:28px !important;
font-size:1rem !important;
}
@media (max-width:380px){
header.hero .zukan-btn{
grid-template-columns:36px minmax(0,1fr) 26px !important;
gap:8px !important;
width:min(282px,calc(100vw - 36px)) !important;
height:58px !important;
min-height:58px !important;
max-height:58px !important;
padding:6px 8px 6px 7px !important;
border-radius:16px !important;
}
header.hero .zukan-btn::before{border-radius:13px !important}
header.hero .zukan-btn-emblem{
width:36px !important;height:36px !important;
min-width:36px !important;min-height:36px !important;
}
header.hero .zukan-btn-emblem svg{width:21px !important;height:21px !important}
header.hero .zukan-btn-copy small{font-size:.48rem !important;letter-spacing:.18em !important}
header.hero .zukan-btn-copy strong{font-size:.76rem !important;letter-spacing:.1em !important}
header.hero .zukan-btn-arrow{
width:26px !important;height:26px !important;
min-width:26px !important;min-height:26px !important;
font-size:.95rem !important;
}
}
/* ============================================================
17.4 花をひらくCTAの洗練化 / 流れる写真帯のクリック対応
============================================================ */
header.hero .zukan-wrap{margin-top:2.1rem}
header.hero .zukan-btn{
grid-template-columns:42px minmax(0,1fr) 30px !important;
width:min(318px,calc(100vw - 42px)) !important;
max-width:318px !important;
height:74px !important;
min-height:74px !important;
max-height:74px !important;
padding:8px 12px 8px 9px !important;
border-radius:24px !important;
background:
radial-gradient(circle at 18% 18%,rgba(255,255,255,.09),transparent 28%),
linear-gradient(135deg,#214634 0%,#183327 54%,#10231b 100%) !important;
box-shadow:
inset 0 0 0 1px rgba(255,248,226,.08),
inset 0 -14px 24px rgba(4,18,13,.16),
0 16px 30px -20px rgba(13,35,27,.72) !important;
}
header.hero .zukan-btn::before{inset:4px !important;border-radius:20px !important}
header.hero .zukan-btn::after{width:28% !important}
header.hero .zukan-btn-emblem{
width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;
background:linear-gradient(145deg,#F3DEAC 0%,#D7B873 52%,#AF8541 100%) !important;
}
header.hero .zukan-btn-emblem svg{width:24px !important;height:24px !important}
header.hero .zukan-btn-copy{display:flex !important;flex-direction:column !important;justify-content:center !important;gap:1px !important}
header.hero .zukan-btn-copy small{
font-size:.52rem !important;line-height:1.15 !important;letter-spacing:.24em !important;
color:#D9BD82 !important;white-space:nowrap;
}
header.hero .zukan-btn-copy strong{
font-size:.94rem !important;line-height:1.3 !important;letter-spacing:.14em !important;
color:#FFF5E5 !important;white-space:nowrap;
}
header.hero .zukan-btn-copy em{
display:block;font-style:normal;font-family:var(--jp);font-size:.66rem;line-height:1.35;
letter-spacing:.08em;color:rgba(245,235,215,.82);white-space:nowrap;
}
header.hero .zukan-btn-arrow{
width:30px !important;height:30px !important;min-width:30px !important;min-height:30px !important;
font-size:1rem !important;background:rgba(255,255,255,.03);
}
header.hero .zukan-btn:hover,
header.hero .zukan-btn:focus-visible{transform:translateY(-2px) !important}
header.hero .zukan-btn:hover .zukan-btn-arrow,
header.hero .zukan-btn:focus-visible .zukan-btn-arrow{transform:translateX(2px) !important}
.marquee{position:relative}
.marquee .track{align-items:center;gap:16px}
.marquee:hover .track,
.marquee:focus-within .track{animation-play-state:paused}
.marquee .mq-item{
flex:0 0 auto;display:block;position:relative;border-radius:14px;overflow:hidden;
box-shadow:0 10px 22px -14px rgba(30,36,31,.48);
transform:translateY(0);transition:transform .28s ease,box-shadow .28s ease,opacity .28s ease;
touch-action:manipulation;
}
.marquee .mq-item img{display:block}
.marquee .mq-item::after{
content:"見る";position:absolute;right:10px;bottom:10px;
padding:.26rem .5rem;border-radius:999px;
background:rgba(17,37,28,.78);color:#F4E8D0;
font-family:var(--jp);font-size:.66rem;line-height:1;letter-spacing:.08em;
border:1px solid rgba(223,198,145,.45);opacity:0;transform:translateY(4px);
transition:opacity .22s ease,transform .22s ease;
}
.marquee .mq-item:hover,
.marquee .mq-item:focus-visible{
transform:translateY(-2px);box-shadow:0 16px 28px -16px rgba(23,31,25,.58);
}
.marquee .mq-item:hover::after,
.marquee .mq-item:focus-visible::after{opacity:1;transform:translateY(0)}
.marquee .mq-item:focus-visible{outline:2px solid rgba(203,162,88,.75);outline-offset:4px}
@media (max-width:480px){
header.hero .zukan-btn{
grid-template-columns:40px minmax(0,1fr) 28px !important;
width:min(306px,calc(100vw - 36px)) !important;
max-width:306px !important;
height:70px !important;min-height:70px !important;max-height:70px !important;
padding:8px 11px 8px 8px !important;border-radius:22px !important;
}
header.hero .zukan-btn-copy small{font-size:.5rem !important;letter-spacing:.2em !important}
header.hero .zukan-btn-copy strong{font-size:.9rem !important;letter-spacing:.12em !important}
header.hero .zukan-btn-copy em{font-size:.63rem !important}
.marquee{padding:18px 0}
.marquee .track{gap:12px}
.marquee img{height:104px;width:138px}
}
@media (max-width:360px){
header.hero .zukan-btn{
grid-template-columns:36px minmax(0,1fr) 26px !important;
width:min(284px,calc(100vw - 28px)) !important;
max-width:284px !important;
height:66px !important;min-height:66px !important;max-height:66px !important;
padding:7px 9px 7px 7px !important;border-radius:20px !important;
}
header.hero .zukan-btn-emblem{width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important}
header.hero .zukan-btn-emblem svg{width:21px !important;height:21px !important}
header.hero .zukan-btn-copy strong{font-size:.84rem !important}
header.hero .zukan-btn-copy em{font-size:.6rem !important}
header.hero .zukan-btn-arrow{width:26px !important;height:26px !important;min-width:26px !important;min-height:26px !important}
}
/* ============================================================
17.5 流れる画像帯のドラッグ対応 / 画像のみ拡大表示
============================================================ */
.marquee{
cursor:grab;
user-select:none;
-webkit-user-select:none;
touch-action:pan-y;
}
.marquee.is-dragging{cursor:grabbing}
.marquee.is-dragging .track{pointer-events:none}
.marquee .track{will-change:transform}
#lightbox .lb-frame,
#lightbox #lbImg{cursor:zoom-in}
#lightbox .lb-zoom-note{
margin-top:.85rem;
font-family:var(--jp);
font-size:.74rem;
line-height:1.6;
letter-spacing:.06em;
color:rgba(229,207,159,.82);
}
#imageView{
position:fixed;
inset:0;
z-index:120;
display:none;
align-items:center;
justify-content:center;
padding:1rem;
background:rgba(5,11,9,.96);
backdrop-filter:blur(6px);
}
#imageView.open{display:flex}
#imageView img{
display:block;
max-width:min(96vw,1600px);
max-height:92vh;
width:auto;
height:auto;
object-fit:contain;
border-radius:10px;
box-shadow:0 30px 80px rgba(0,0,0,.56);
}
#imageViewClose{
position:absolute;
top:16px;
right:16px;
z-index:1;
font-family:var(--head);
font-size:.78rem;
letter-spacing:.12em;
color:#F3E8D2;
background:rgba(255,255,255,.06);
border:1px solid rgba(214,183,119,.45);
border-radius:999px;
padding:.7em 1.15em;
box-shadow:0 12px 24px -18px rgba(0,0,0,.7);
}
#imageViewClose:hover,
#imageViewClose:focus-visible{
background:#E5D3AA;
color:#153428;
border-color:#E5D3AA;
}
@media (max-width:520px){
#lightbox .lb-zoom-note{font-size:.7rem}
#imageView{padding:.75rem}
#imageViewClose{top:12px;right:12px;font-size:.72rem;padding:.62em 1em}
#imageView img{max-width:95vw;max-height:88vh;border-radius:8px}
}
/* 17.6 画像のみ拡大表示の操作性とキャッシュ更新 */
html.image-view-open,
html.image-view-open body{overflow:hidden}
#lightbox .lb-frame:focus-visible{
outline:2px solid rgba(224,197,139,.86);
outline-offset:6px;
}
#lightbox .lb-frame::after{
content:"＋";
position:absolute;
right:12px;
bottom:12px;
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:50%;
color:#F5EBD7;
background:rgba(15,35,26,.78);
border:1px solid rgba(224,197,139,.54);
font-family:var(--en);
font-size:1.05rem;
line-height:1;
pointer-events:none;
box-shadow:0 8px 18px rgba(0,0,0,.28);
}
#lightbox .lb-frame{position:relative}
/* ============================================================
17.7 細かな写真片が1枚に組み上がる既定演出 / 花をひらくボタンの意匠更新
============================================================ */
header.hero .zukan-wrap{
margin-top:2.25rem;
display:flex;
justify-content:center;
}
header.hero .zukan-btn{
position:relative;
display:inline-grid !important;
grid-template-columns:46px minmax(0,1fr) 32px !important;
align-items:center !important;
gap:12px !important;
width:min(330px,calc(100vw - 34px)) !important;
max-width:330px !important;
min-width:0 !important;
height:76px !important;
min-height:76px !important;
max-height:76px !important;
padding:9px 12px 9px 9px !important;
border-radius:24px !important;
overflow:hidden;
color:#F5ECDD;
background:
radial-gradient(circle at 18% 14%,rgba(255,255,255,.12),transparent 24%),
linear-gradient(135deg,#244535 0%,#173226 55%,#0E2119 100%) !important;
border:1px solid rgba(218,187,126,.75) !important;
box-shadow:
inset 0 0 0 1px rgba(255,248,226,.06),
inset 0 -14px 28px rgba(3,14,10,.18),
0 18px 34px -22px rgba(9,29,21,.76) !important;
}
header.hero .zukan-btn::before{
content:"";
position:absolute;
inset:4px !important;
border-radius:20px !important;
border:1px solid rgba(229,206,160,.18);
pointer-events:none;
}
header.hero .zukan-btn::after{
content:"";
position:absolute;
top:-38%;
bottom:-38%;
left:-54%;
width:28%;
background:linear-gradient(100deg,transparent,rgba(255,242,214,.24),transparent);
transform:skewX(-18deg);
transition:left .9s cubic-bezier(.16,1,.3,1);
pointer-events:none;
}
header.hero .zukan-btn-emblem{
width:46px !important;
height:46px !important;
min-width:46px !important;
min-height:46px !important;
border-radius:50%;
color:#5D4520;
background:linear-gradient(145deg,#F0DEB2 0%,#D6B577 52%,#B08440 100%) !important;
border:1px solid rgba(255,246,222,.82);
box-shadow:
inset 0 1px 0 rgba(255,252,236,.72),
inset 0 -3px 8px rgba(102,70,18,.25),
0 8px 18px rgba(5,19,14,.26);
}
header.hero .zukan-btn-emblem svg{width:26px !important;height:26px !important}
header.hero .zukan-btn-copy{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
justify-content:center;
gap:1px !important;
min-width:0;
}
header.hero .zukan-btn-copy small{
font-family:var(--en);
font-size:.52rem !important;
line-height:1.15 !important;
letter-spacing:.30em !important;
color:#DCC28D;
white-space:nowrap;
}
header.hero .zukan-btn-copy strong{
font-family:var(--head);
font-weight:500;
font-size:.98rem !important;
line-height:1.34 !important;
letter-spacing:.16em !important;
color:#F7EFDF;
white-space:nowrap;
}
header.hero .zukan-btn-copy em{
display:block;
font-style:normal;
font-family:var(--jp);
font-size:.67rem;
line-height:1.35;
letter-spacing:.08em;
color:rgba(245,235,215,.82);
white-space:nowrap;
}
header.hero .zukan-btn-arrow{
position:relative;
z-index:1;
display:grid;
place-items:center;
width:32px !important;
height:32px !important;
min-width:32px !important;
min-height:32px !important;
border-radius:50%;
border:1px solid rgba(224,197,139,.52);
background:rgba(255,255,255,.03);
color:#E4C98F;
font-size:1.02rem !important;
transition:transform .38s cubic-bezier(.16,1,.3,1),background .3s ease,color .3s ease;
}
header.hero .zukan-btn:hover,
header.hero .zukan-btn:focus-visible{
transform:translateY(-2px) !important;
border-color:#E6D0A1 !important;
box-shadow:
inset 0 0 0 1px rgba(255,248,226,.08),
inset 0 -14px 28px rgba(3,14,10,.16),
0 26px 40px -24px rgba(9,29,21,.88) !important;
}
header.hero .zukan-btn:hover::after,
header.hero .zukan-btn:focus-visible::after{left:126%}
header.hero .zukan-btn:hover .zukan-btn-arrow,
header.hero .zukan-btn:focus-visible .zukan-btn-arrow{
background:#E5CF9F;
color:#173428;
transform:translateX(2px);
}
@media (max-width:480px){
header.hero .zukan-btn{
grid-template-columns:42px minmax(0,1fr) 30px !important;
width:min(312px,calc(100vw - 28px)) !important;
max-width:312px !important;
height:72px !important;
min-height:72px !important;
max-height:72px !important;
padding:8px 10px 8px 8px !important;
border-radius:22px !important;
}
header.hero .zukan-btn-emblem{width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important}
header.hero .zukan-btn-emblem svg{width:24px !important;height:24px !important}
header.hero .zukan-btn-copy small{font-size:.49rem !important;letter-spacing:.25em !important}
header.hero .zukan-btn-copy strong{font-size:.91rem !important;letter-spacing:.13em !important}
header.hero .zukan-btn-copy em{font-size:.63rem}
header.hero .zukan-btn-arrow{width:30px !important;height:30px !important;min-width:30px !important;min-height:30px !important}
}
@media (max-width:360px){
header.hero .zukan-btn{
grid-template-columns:38px minmax(0,1fr) 28px !important;
width:min(286px,calc(100vw - 20px)) !important;
max-width:286px !important;
height:66px !important;
min-height:66px !important;
max-height:66px !important;
padding:7px 9px 7px 7px !important;
border-radius:20px !important;
}
header.hero .zukan-btn-emblem{width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important}
header.hero .zukan-btn-emblem svg{width:22px !important;height:22px !important}
header.hero .zukan-btn-copy strong{font-size:.84rem !important}
header.hero .zukan-btn-copy em{font-size:.58rem}
header.hero .zukan-btn-arrow{width:28px !important;height:28px !important;min-width:28px !important;min-height:28px !important}
}
/* ============================================================
17.8 断片が集まった輪郭を一瞬残す / 今日の一輪をギャラリーサイズへ調整
============================================================ */
.today-frame{
width:min(360px,92vw);
max-width:360px;
margin:2.6rem auto 0;
}
.today .frame{
box-shadow:
0 34px 48px -28px rgba(45,42,38,.58),
0 6px 16px -8px rgba(45,42,38,.22);
}
.today .mat{
padding:18px 18px 15px;
}
@media (min-width:900px){
.today-frame{
width:min(388px,36vw);
max-width:388px;
}
}
@media (max-width:480px){
.today-frame{
width:min(340px,94vw);
max-width:340px;
}
}
@media (max-width:360px){
.today-frame{
width:min(312px,95vw);
max-width:312px;
}
}
/* ============================================================
17.9 断片の輪郭表示時間を延長 / 今日の一輪をギャラリーと同じ幅感へ
============================================================ */
@media (max-width:767px){
.today{
padding-left:clamp(1rem,4vw,3rem);
padding-right:clamp(1rem,4vw,3rem);
}
.today-frame{
width:100%;
max-width:100%;
margin:2.6rem auto 0;
}
}
@media (min-width:768px){
.today-frame{
width:min(100%, 388px);
max-width:388px;
}
}
/* ============================================================
18.0 BOTANICAL EDITORIAL
構成・機能はそのままに、植物標本誌 × 和モダンへ再設計
============================================================ */
body{
--bot-forest:#18382f;
--bot-forest-2:#244b3d;
--bot-forest-3:#0f261f;
--bot-paper:#f5f0e6;
--bot-paper-2:#fbf8f1;
--bot-sage:#dce4d7;
--bot-sage-2:#edf1e9;
--bot-brass:#b88d4b;
--bot-brass-light:#dfc48f;
--bot-ink:#272a26;
--bot-muted:#77796f;
--bot-line:rgba(35,62,49,.16);
--bot-shadow:0 26px 60px -38px rgba(18,39,31,.52);
color:var(--bot-ink);
background:
radial-gradient(circle at 20% 8%,rgba(184,141,75,.07),transparent 26rem),
radial-gradient(circle at 92% 24%,rgba(53,91,72,.06),transparent 32rem),
var(--bot-paper);
background-attachment:fixed;
line-height:2.2;
}
body::before{
content:"";
position:fixed;inset:0;z-index:-1;pointer-events:none;
opacity:.32;
background-image:
linear-gradient(90deg,rgba(28,51,41,.018) 1px,transparent 1px),
linear-gradient(rgba(28,51,41,.014) 1px,transparent 1px);
background-size:32px 32px;
}
::selection{background:rgba(184,141,75,.26);color:var(--bot-forest-3)}
a,button{-webkit-tap-highlight-color:transparent}
/* 浮遊する標本誌ナビ */
.gnav{
top:14px;left:50%;right:auto;
width:min(1080px,calc(100% - 32px));
transform:translateX(-50%);
padding:.65rem .8rem .65rem 1.15rem;
border:1px solid rgba(255,255,255,.62);
border-radius:999px;
background:rgba(250,247,239,.82);
backdrop-filter:blur(18px) saturate(1.12);
box-shadow:0 12px 35px -28px rgba(10,32,23,.7),inset 0 0 0 1px rgba(35,62,49,.06);
}
.gnav.scrolled{box-shadow:0 18px 44px -28px rgba(10,32,23,.75),inset 0 0 0 1px rgba(35,62,49,.08)}
.gnav-logo{
font-family:var(--en);
font-size:.84rem;
font-weight:600;
letter-spacing:.28em;
color:var(--bot-forest);
text-transform:uppercase;
}
.gnav-links{gap:.25rem}
.gnav-links a{
position:relative;
padding:.55rem .9rem .48rem;
border:0;
border-radius:999px;
font-size:.74rem;
letter-spacing:.11em;
color:#424740;
transition:background .3s ease,color .3s ease,transform .3s ease;
}
.gnav-links a:hover,.gnav-links a:focus-visible{
color:#f8f1e3;
background:var(--bot-forest);
transform:translateY(-1px);
}
/* トップ：余白を大胆に使った植物標本誌の表紙 */
header.hero{
min-height:min(920px,100svh);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:clamp(8.5rem,16vw,12rem) 1.5rem clamp(5.5rem,10vw,7.5rem);
background:
linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 24%),
radial-gradient(ellipse 46% 36% at 50% 26%,rgba(255,255,255,.74),transparent 72%),
radial-gradient(circle at 9% 82%,rgba(184,141,75,.09),transparent 24rem),
var(--bot-paper);
}
header.hero::before{
width:min(124vw,980px);
top:55%;
border-color:rgba(24,56,47,.105);
}
header.hero::after{
width:min(90vw,710px);
top:55%;
border-color:rgba(184,141,75,.2);
}
.hero-en{
display:inline-flex;
align-items:center;
gap:.85rem;
font-style:normal;
font-size:.72rem;
letter-spacing:.5em;
color:var(--bot-brass);
}
.hero-en::before,.hero-en::after{content:"";width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--bot-brass))}
.hero-en::after{background:linear-gradient(90deg,var(--bot-brass),transparent)}
.hero h1{
margin-top:2.3rem;
max-width:880px;
font-size:clamp(2rem,5.2vw,3.65rem);
line-height:1.95;
letter-spacing:.18em;
color:var(--bot-forest);
text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.hero h1 .mk{
position:relative;
padding:0 .08em .14em;
}
.hero h1 .mk::after{
content:"";
position:absolute;left:.05em;right:.05em;bottom:.05em;height:5px;
background:linear-gradient(90deg,transparent,rgba(184,141,75,.62) 14%,rgba(184,141,75,.62) 86%,transparent);
border-radius:999px;
transform:scaleX(.82);
}
.hero .lead{
max-width:680px;
margin-top:2.6rem;
padding:1.25rem 1.5rem;
font-size:.82rem;
line-height:2.65;
letter-spacing:.16em;
color:#676b63;
background:rgba(255,255,255,.32);
border-top:1px solid rgba(184,141,75,.28);
border-bottom:1px solid rgba(184,141,75,.18);
}
/* 花をひらく：標本箱のラベルをイメージしたシグネチャーボタン */
header.hero .zukan-wrap{margin-top:2.4rem}
header.hero .zukan-btn{
grid-template-columns:48px minmax(0,1fr) 34px !important;
width:min(342px,calc(100vw - 34px)) !important;
max-width:342px !important;
height:78px !important;
min-height:78px !important;
max-height:78px !important;
gap:13px !important;
padding:9px 13px 9px 9px !important;
border-radius:8px 28px 8px 28px !important;
color:#f7f0e2;
background:
linear-gradient(135deg,rgba(255,255,255,.065),transparent 34%),
linear-gradient(135deg,var(--bot-forest-2),var(--bot-forest-3)) !important;
border:1px solid rgba(216,190,139,.68) !important;
box-shadow:0 18px 38px -24px rgba(10,32,23,.86),inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
header.hero .zukan-btn::before{
inset:4px !important;
border-radius:5px 23px 5px 23px !important;
border-color:rgba(224,202,158,.19);
}
header.hero .zukan-btn::after{width:24%;background:linear-gradient(100deg,transparent,rgba(255,244,218,.23),transparent)}
header.hero .zukan-btn-emblem{
width:48px !important;height:48px !important;min-width:48px !important;min-height:48px !important;
border-radius:50% !important;
color:#5d4521;
background:linear-gradient(145deg,#f2e1b9,#d1ae69 55%,#9e7333) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 8px 18px rgba(0,0,0,.22);
}
header.hero .zukan-btn-emblem svg{width:27px !important;height:27px !important}
header.hero .zukan-btn-copy small{font-size:.5rem !important;letter-spacing:.31em !important;color:#d9bf89}
header.hero .zukan-btn-copy strong{font-size:.98rem !important;letter-spacing:.17em !important;color:#fff8e9}
header.hero .zukan-btn-copy em{font-size:.64rem;letter-spacing:.08em;color:rgba(244,236,220,.74)}
header.hero .zukan-btn-arrow{
width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;
border-color:rgba(224,201,151,.5);
background:rgba(255,255,255,.035);
}
header.hero .zukan-btn:hover,header.hero .zukan-btn:focus-visible{
transform:translateY(-3px) !important;
box-shadow:0 28px 46px -26px rgba(10,32,23,.96),inset 0 0 0 1px rgba(255,255,255,.07) !important;
}
.now-btn,.shop-btn{
border-radius:8px 18px 8px 18px;
border-color:rgba(184,141,75,.38);
background:rgba(255,255,255,.38);
}
.scroll-cue{margin-top:3.2rem}
/* 今日の一輪：深い森の展示室 */
.today{
position:relative;
overflow:hidden;
padding:clamp(5rem,10vw,7.5rem) clamp(1rem,4vw,3rem) clamp(5.5rem,11vw,8rem);
color:#f5eddf;
background:
radial-gradient(circle at 50% -10%,rgba(220,196,145,.17),transparent 32rem),
radial-gradient(circle at 10% 90%,rgba(74,114,92,.22),transparent 26rem),
linear-gradient(155deg,#1d4437 0%,#112c24 48%,#0c211a 100%);
border:0;
}
.today::before{
content:"01";
position:absolute;right:clamp(1rem,6vw,5rem);top:clamp(1rem,4vw,3rem);
font-family:var(--en);font-size:clamp(5rem,14vw,10rem);line-height:1;
color:rgba(255,255,255,.035);letter-spacing:0;
}
.today .sec-en{font-style:normal;font-size:.72rem;letter-spacing:.52em;color:#d8b977}
.today h2{color:#f8f0e1;font-size:clamp(1.55rem,4vw,2.25rem);letter-spacing:.22em}
.today-frame{width:min(100%,388px);max-width:388px;margin-top:3.2rem}
.today figure.frame-wrap::before{display:none}
.today .frame{
padding:8px;
border-radius:4px;
background:linear-gradient(145deg,#cfb073,#70532c 42%,#31281e 76%,#ac874c) !important;
box-shadow:0 42px 82px -34px rgba(0,0,0,.82),0 0 0 1px rgba(239,215,164,.28) !important;
}
.today .frame::after{border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,238,199,.65),inset 0 0 0 3px rgba(23,18,12,.68) !important}
.today .mat{padding:18px;background:#f7f2e8}
.today .caption{border-color:rgba(184,141,75,.42)}
/* ギャラリー：標本誌の見開き */
main{
position:relative;
padding:clamp(6rem,11vw,9rem) clamp(1rem,4vw,3rem) clamp(7rem,12vw,10rem);
background:
linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,255,255,0) 13%),
radial-gradient(circle at 12% 6%,rgba(184,141,75,.09),transparent 23rem),
var(--bot-paper-2);
border-top:0;
}
.gallery-head{max-width:780px;margin-left:auto;margin-right:auto}
.gallery-head .sec-en{font-style:normal;font-size:.7rem;letter-spacing:.52em;color:var(--bot-brass)}
.gallery-head h2{font-size:clamp(1.6rem,4vw,2.35rem);line-height:1.8;letter-spacing:.2em;color:var(--bot-forest)}
.gallery-head p{font-size:.79rem;line-height:2.25;letter-spacing:.14em;color:var(--bot-muted)}
.gallery-head::after{width:72px;height:1px;background:linear-gradient(90deg,transparent,var(--bot-brass),transparent);margin-top:2.4rem}
.gallery-tools{
width:max-content;max-width:100%;
padding:.55rem .75rem;
border:1px solid var(--bot-line);
border-radius:999px;
background:rgba(255,255,255,.68);
box-shadow:0 12px 26px -22px rgba(18,39,31,.52);
}
#monthFilter{border:0;background:var(--bot-sage-2);box-shadow:none;padding:.55em 1.3em;color:var(--bot-forest)}
.gallery-tools .filter,.gallery-tools .count{font-size:.69rem;color:#6f766d}
.wall{gap:58px 36px;grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
figure.frame-wrap{padding-top:0}
figure.frame-wrap::before{display:none}
.frame{
padding:0;
border-radius:2px;
background:transparent !important;
box-shadow:var(--bot-shadow) !important;
transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .45s ease !important;
}
.frame::after{inset:-1px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(41,65,53,.16),inset 0 0 0 7px rgba(255,255,255,.4) !important}
.wall .frame-wrap:nth-child(3n+1){transform:rotate(-.45deg)}
.wall .frame-wrap:nth-child(3n+2){transform:rotate(.35deg)}
.wall .frame-wrap:nth-child(3n+3){transform:rotate(-.18deg)}
.wall .frame-wrap:hover{transform:rotate(0)}
.frame:hover,.frame:focus-visible{--lift:-9px;filter:none;box-shadow:0 38px 66px -38px rgba(14,37,28,.65) !important}
.mat{
padding:14px 14px 12px;
border-radius:2px;
background:#fdfaf4;
box-shadow:inset 0 0 0 1px rgba(35,62,49,.07),inset 0 0 22px rgba(35,62,49,.035);
}
.mat img{border-radius:0;box-shadow:0 0 0 1px rgba(35,62,49,.11),0 0 0 5px #fdfaf4,0 0 0 6px rgba(184,141,75,.16)}
.caption{
display:flex;
align-items:flex-start;
width:100%;
margin-top:15px;
padding:11px 4px 2px;
text-align:left;
background:none;
border-top:1px solid rgba(184,141,75,.31);
border-radius:0;
box-shadow:none;
}
.caption .t{font-size:.86rem;letter-spacing:.13em;text-indent:0;color:var(--bot-forest);text-shadow:none}
.caption .d{font-size:.65rem;letter-spacing:.18em;text-indent:0;color:#96723f;text-shadow:none}
.more-wrap{margin-top:5rem}
#moreBtn{
min-width:190px;
padding:.9em 2.2em;
color:#f7f1e5;
background:var(--bot-forest);
border-radius:8px 22px 8px 22px;
box-shadow:0 16px 30px -22px rgba(15,38,31,.8);
}
#moreBtn::after{display:none}
#moreBtn:hover,#moreBtn:focus-visible{transform:translateY(-2px);background:var(--bot-forest-2)}
/* 流れる写真：暗いフィルムストリップ */
.marquee{
padding:26px 0;
background:
linear-gradient(180deg,rgba(255,255,255,.035),transparent 20%),
var(--bot-forest-3);
border:0;
box-shadow:inset 0 1px 0 rgba(225,202,155,.18),inset 0 -1px 0 rgba(225,202,155,.12);
}
.marquee .track{gap:14px}
.marquee .mq-item{border-radius:3px;box-shadow:0 14px 26px -18px rgba(0,0,0,.8),0 0 0 1px rgba(222,196,143,.22)}
.marquee img{height:122px;width:162px;border-radius:3px}
.marquee .mq-item::after{right:8px;bottom:8px;background:rgba(8,26,20,.78);border-color:rgba(222,196,143,.4)}
.mq-flower{opacity:.5;filter:sepia(.6) brightness(1.25)}
/* ランキング・読みもの・販促：同じ紙面の章として統一 */
.rank,.items,.col-home,.gift-wrap{background:var(--bot-sage-2);border-color:rgba(35,62,49,.12)}
.rank,.items,.col-home{padding-top:clamp(4.5rem,8vw,6.5rem);padding-bottom:clamp(4.5rem,8vw,6.5rem)}
.rank h2,.items-head h2,.col-home-head h2{color:var(--bot-forest);font-size:clamp(1.45rem,3.5vw,2.05rem)}
.rank .sec-en,.col-home-head .sec-en{font-style:normal;font-size:.7rem;color:var(--bot-brass)}
.rank-no{border-radius:6px 16px 6px 16px;background:linear-gradient(145deg,#ead8ad,#b88d4b);box-shadow:0 8px 18px -12px rgba(30,50,40,.65)}
.gift-banner{
border-radius:8px 24px 8px 24px;
background:rgba(255,255,255,.72);
border:1px solid rgba(184,141,75,.42);
box-shadow:0 18px 34px -28px rgba(18,39,31,.5);
}
.col-card,.col-mini,.item-card,.z-card{
border:1px solid rgba(35,62,49,.1);
border-radius:4px 18px 4px 18px;
background:rgba(255,255,255,.78);
box-shadow:0 20px 42px -34px rgba(18,39,31,.58);
}
.col-card:hover,.col-mini:hover,.item-card:hover,.z-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -34px rgba(18,39,31,.68)}
.col-card-photo img,.col-mini-photo img,.item-card img,.z-card-photo img{border-radius:2px 14px 2px 14px}
.col-card-meta b,.col-cat{background:var(--bot-forest);border-radius:5px 12px 5px 12px}
.col-card-more,.col-home-more a{color:var(--bot-forest)}
/* 花図鑑・記事：図版集として統一 */
.zukan-archive,.zukan-single{
background:
radial-gradient(circle at 85% 3%,rgba(184,141,75,.08),transparent 24rem),
var(--bot-paper-2);
}
.z-head h1,.z-arch-head h1,.z-point h2,.z-memo h2,.z-obs h2,.z-related h2{color:var(--bot-forest)}
.z-card-body{padding:16px 8px 12px}
.z-card-yomi{color:#9a7844}
.z-card-name{color:var(--bot-forest)}
.z-info,.z-bloom,.z-point,.z-memo,.z-vs-col,.z-buy{
border:1px solid rgba(35,62,49,.1);
border-radius:4px 18px 4px 18px;
background:rgba(255,255,255,.78);
box-shadow:0 22px 42px -36px rgba(18,39,31,.55);
}
.z-info th{background:var(--bot-sage-2);color:var(--bot-forest)}
.z-search input[type="search"]{border-radius:8px 20px 8px 20px;background:rgba(255,255,255,.8)}
.z-search button,.z-buy-btn,.z-print-btn{border-radius:7px 18px 7px 18px;background:var(--bot-forest);color:#fff}
.col-body h2{color:var(--bot-forest);border-left-color:var(--bot-brass)}
.col-body blockquote{background:var(--bot-sage-2);border-left-color:var(--bot-brass)}
/* 拡大表示：暗室の展示台 */
#lightbox{
background:
radial-gradient(circle at 50% 18%,rgba(184,141,75,.13),transparent 28rem),
rgba(7,20,16,.972);
backdrop-filter:blur(10px);
}
#lightbox .inner{max-width:min(760px,95vw)}
#lightbox .lb-frame{
padding:8px;
border-radius:4px 16px 4px 16px;
background:linear-gradient(145deg,#d1b475,#76582f 45%,#221c15 76%,#9d793f);
box-shadow:0 52px 100px rgba(0,0,0,.66),inset 0 0 0 1px rgba(247,226,181,.54);
}
#lightbox img{padding:14px;border-radius:1px 10px 1px 10px;background:#f7f2e8}
#lightbox .lb-title{color:#f5ead7;font-size:clamp(1.25rem,4vw,1.8rem)}
#lightbox .lb-date{color:#d8b977}
#lightbox .lb-note{color:#d8d2c5}
#lightbox button{border-radius:6px 16px 6px 16px;border-color:rgba(224,200,151,.42)}
#imageView{background:rgba(5,16,12,.98)}
/* フッター：本の奥付 */
footer{
padding:5.5rem 1.5rem 5rem;
background:
radial-gradient(circle at 50% 0%,rgba(184,141,75,.13),transparent 26rem),
linear-gradient(160deg,#193c31,#0d241d);
color:#c7cec5;
}
footer::before{width:86px;height:1px;background:linear-gradient(90deg,transparent,#d2b574,transparent)}
footer .logo{font-size:1.15rem;letter-spacing:.45em;color:#f6ecdc}
.follow{border-radius:5px 18px 5px 18px;background:rgba(255,255,255,.045);border-color:rgba(222,198,145,.2)}
.foot-nav a{color:#d9c49a}
@media (max-width:767px){
.gnav{
top:0;left:0;right:0;width:100%;transform:none;
border-radius:0;border-left:0;border-right:0;border-top:0;
padding:.7rem .55rem;
}
.gnav-links a{padding:.48rem .48rem;font-size:.75rem;letter-spacing:.045em}
header.hero{min-height:auto;padding-top:7.7rem;padding-bottom:5.5rem}
.hero-en::before,.hero-en::after{width:24px}
.hero h1{font-size:clamp(1.85rem,8vw,2.6rem);letter-spacing:.13em;line-height:1.95}
.hero .lead{padding:1rem .45rem;font-size:.77rem;line-height:2.45;letter-spacing:.1em;background:transparent}
header.hero .zukan-btn{
grid-template-columns:44px minmax(0,1fr) 30px !important;
width:min(316px,calc(100vw - 26px)) !important;
max-width:316px !important;
height:72px !important;min-height:72px !important;max-height:72px !important;
gap:10px !important;padding:8px 10px 8px 8px !important;
border-radius:7px 24px 7px 24px !important;
}
header.hero .zukan-btn::before{border-radius:4px 20px 4px 20px !important}
header.hero .zukan-btn-emblem{width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important}
header.hero .zukan-btn-copy strong{font-size:.9rem !important}
header.hero .zukan-btn-copy em{font-size:.61rem}
.today-frame{width:100%;max-width:100%}
.wall{grid-template-columns:1fr;gap:42px}
.wall .frame-wrap{transform:none !important}
.gallery-tools{width:100%;justify-content:center;border-radius:8px 18px 8px 18px}
.caption{padding-top:10px}
.marquee img{height:108px;width:144px}
#lightbox .lb-frame{border-radius:3px 12px 3px 12px}
}
@media (prefers-reduced-motion:reduce){
.frame,.col-card,.col-mini,.item-card,.z-card,.zukan-btn{transition:none !important}
}
@media (prefers-color-scheme:dark){
body{
--bot-paper:#0d1712;
--bot-paper-2:#111d17;
--bot-sage:#1b2c23;
--bot-sage-2:#16251e;
--bot-ink:#e9e2d3;
--bot-muted:#a9afa7;
--bot-line:rgba(216,196,154,.14);
background:#0d1712;
color:var(--bot-ink);
}
.gnav{background:rgba(14,27,21,.84);border-color:rgba(216,196,154,.14)}
.gnav-logo,.gnav-links a{color:#e9e1d2}
header.hero{background:radial-gradient(circle at 50% 24%,rgba(54,87,70,.28),transparent 29rem),#0e1914}
.hero h1{color:#ede4d3;text-shadow:none}
.hero .lead{color:#b4b9b1;background:rgba(255,255,255,.025)}
main,.zukan-archive,.zukan-single{background:#111d17}
.gallery-head h2,.rank h2,.items-head h2,.col-home-head h2,.z-head h1,.z-arch-head h1,.z-card-name{color:#ece3d2}
.gallery-head p,.gallery-tools .filter,.gallery-tools .count{color:#a7aea6}
.gallery-tools,.col-card,.col-mini,.item-card,.z-card,.z-info,.z-bloom,.z-point,.z-memo,.z-vs-col,.z-buy{background:rgba(255,255,255,.035);border-color:rgba(216,196,154,.13)}
.mat{background:#eee8dc}
.caption .t{color:#1a362c}
.rank,.items,.col-home,.gift-wrap{background:#13231c}
.gift-banner{background:rgba(255,255,255,.035)}
}
/* ============================================================
19.0 NEO BOTANICAL — 現代的な最高品質のモーション・エディトリアル
構成と機能は維持し、光・奥行き・余白・動きだけを刷新
============================================================ */
:root{
--neo-forest:#0f2f25;
--neo-forest-2:#174436;
--neo-moss:#527665;
--neo-ivory:#f6f1e7;
--neo-paper:#eee9df;
--neo-gold:#d6b978;
--neo-gold-2:#f0dfb1;
--neo-ink:#183029;
--neo-muted:#717c75;
--neo-line:rgba(26,67,53,.13);
--neo-glass:rgba(255,255,255,.54);
--neo-ease:cubic-bezier(.16,1,.3,1);
--neo-shadow:0 34px 90px -54px rgba(8,35,26,.72);
}
html{scroll-padding-top:90px}
body{
background:
radial-gradient(circle at 15% 8%,rgba(214,185,120,.08),transparent 26rem),
radial-gradient(circle at 86% 20%,rgba(67,119,91,.07),transparent 28rem),
var(--neo-ivory);
}
body::before{
content:"";
position:fixed;
inset:0;
z-index:999;
pointer-events:none;
opacity:.12;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.hana-progress{
position:fixed;
top:0;
left:0;
z-index:130;
width:100%;
height:2px;
transform-origin:left center;
transform:scaleX(0);
background:linear-gradient(90deg,#b78d48,#f0dfb1,#5f8d75);
box-shadow:0 0 18px rgba(214,185,120,.44);
pointer-events:none;
}
/* ナビゲーション：空気のようなガラスレイヤー */
.gnav{
top:18px;
padding:.58rem .72rem;
border:1px solid rgba(255,255,255,.58);
background:rgba(246,241,231,.58);
backdrop-filter:blur(22px) saturate(135%);
-webkit-backdrop-filter:blur(22px) saturate(135%);
box-shadow:0 16px 50px -34px rgba(13,44,34,.72),inset 0 1px 0 rgba(255,255,255,.72);
transition:transform .55s var(--neo-ease),background .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.gnav.scrolled{
background:rgba(246,241,231,.82);
border-color:rgba(25,65,52,.1);
box-shadow:0 20px 54px -34px rgba(13,44,34,.82),inset 0 1px 0 rgba(255,255,255,.8);
}
.gnav.nav-hidden{transform:translate(-50%,-130%)}
.gnav-logo{letter-spacing:.24em}
.gnav-links a{
position:relative;
border-radius:999px;
transition:color .3s ease,background .3s ease,transform .3s var(--neo-ease);
}
.gnav-links a::after{
content:"";
position:absolute;
left:50%;
right:50%;
bottom:.25rem;
height:1px;
background:var(--neo-gold);
transition:left .35s var(--neo-ease),right .35s var(--neo-ease);
}
.gnav-links a:hover,.gnav-links a:focus-visible{background:rgba(255,255,255,.5);transform:translateY(-1px)}
.gnav-links a:hover::after,.gnav-links a:focus-visible::after{left:30%;right:30%}
/* ヒーロー：インタラクティブなオーロラと静かな奥行き */
header.hero{
--mx:50%;
--my:42%;
min-height:min(930px,100svh);
display:grid;
align-content:center;
isolation:isolate;
padding-top:clamp(8rem,15vh,12rem);
padding-bottom:clamp(7rem,13vh,10rem);
background:
radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.9),transparent 21rem),
radial-gradient(circle at 16% 18%,rgba(214,185,120,.20),transparent 28rem),
radial-gradient(circle at 84% 70%,rgba(76,129,102,.17),transparent 31rem),
linear-gradient(145deg,#f8f5ee 0%,#eeeae0 54%,#e7ede7 100%);
}
header.hero::before{
left:auto;
top:-18%;
right:-14%;
width:min(72vw,940px);
border-color:rgba(24,70,54,.11);
transform:none;
animation:neoOrbit 22s linear infinite;
}
header.hero::after{
left:-18%;
top:46%;
width:min(62vw,780px);
border-color:rgba(214,185,120,.18);
transform:none;
animation:neoOrbitReverse 28s linear infinite;
}
@keyframes neoOrbit{to{transform:rotate(360deg)}}
@keyframes neoOrbitReverse{to{transform:rotate(-360deg)}}
.hero-en{
font-style:normal;
font-size:clamp(.72rem,1.4vw,.86rem);
letter-spacing:.72em;
color:#6c7b73;
}
.hero-en::before,.hero-en::after{
content:"";
display:inline-block;
width:54px;
height:1px;
margin:0 1.2rem .25em;
background:linear-gradient(90deg,transparent,var(--neo-gold));
}
.hero-en::after{background:linear-gradient(90deg,var(--neo-gold),transparent)}
.hero h1{
max-width:920px;
margin:2.4rem auto 0;
font-size:clamp(2.15rem,6.4vw,4.65rem);
line-height:1.62;
letter-spacing:.12em;
text-wrap:balance;
color:var(--neo-forest);
text-shadow:0 24px 70px rgba(17,56,43,.08);
}
.hero h1 .mk{
position:relative;
color:transparent;
background:linear-gradient(100deg,#173f32 10%,#5d806f 50%,#a77f3f 92%);
-webkit-background-clip:text;
background-clip:text;
}
.hero h1 .mk::after{
content:"";
position:absolute;
left:.08em;
right:.18em;
bottom:.18em;
height:.18em;
z-index:-1;
border-radius:999px;
background:linear-gradient(90deg,rgba(214,185,120,.05),rgba(214,185,120,.34),rgba(214,185,120,.04));
transform:scaleX(.15);
transform-origin:left;
animation:neoUnderline 1.3s var(--neo-ease) .55s forwards;
}
@keyframes neoUnderline{to{transform:scaleX(1)}}
.hero .lead{
max-width:680px;
margin:2.4rem auto 0;
padding:1.1rem 1.5rem;
border:1px solid rgba(255,255,255,.54);
border-radius:999px;
background:rgba(255,255,255,.28);
backdrop-filter:blur(10px);
font-size:clamp(.76rem,1.6vw,.88rem);
line-height:2.4;
letter-spacing:.13em;
color:#65736c;
}
/* メインCTA：磁力と光を持つ現代的なシグネチャーボタン */
header.hero .zukan-wrap{margin-top:2.55rem}
header.hero .zukan-btn{
--mag-x:0px;
--mag-y:0px;
grid-template-columns:50px minmax(0,1fr) 38px !important;
width:min(352px,calc(100vw - 28px)) !important;
max-width:352px !important;
height:82px !important;
min-height:82px !important;
max-height:82px !important;
gap:13px !important;
padding:10px 13px 10px 10px !important;
border-radius:28px !important;
transform:translate3d(var(--mag-x),var(--mag-y),0);
background:
radial-gradient(circle at 14% 12%,rgba(255,255,255,.19),transparent 24%),
linear-gradient(135deg,#1c4939 0%,#102d23 56%,#0a2018 100%) !important;
border:1px solid rgba(241,220,175,.54) !important;
box-shadow:
0 26px 58px -30px rgba(6,30,21,.82),
inset 0 1px 0 rgba(255,255,255,.16),
inset 0 -16px 28px rgba(0,0,0,.18) !important;
transition:transform .28s var(--neo-ease),box-shadow .45s ease,border-color .35s ease !important;
}
header.hero .zukan-btn::before{
inset:4px !important;
border-radius:24px !important;
border-color:rgba(242,220,174,.2);
}
header.hero .zukan-btn::after{
top:-60%;
bottom:-60%;
width:22%;
background:linear-gradient(100deg,transparent,rgba(255,249,231,.36),transparent);
}
header.hero .zukan-btn-emblem{
width:50px !important;
height:50px !important;
min-width:50px !important;
min-height:50px !important;
background:radial-gradient(circle at 34% 28%,#fff2cf 0%,#d8b876 52%,#9d7233 100%) !important;
box-shadow:0 12px 24px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.78) !important;
}
header.hero .zukan-btn-emblem::before{
content:"";
position:absolute;
inset:-6px;
border:1px solid rgba(230,207,159,.34);
border-radius:50%;
animation:neoPulse 3.2s ease-in-out infinite;
}
@keyframes neoPulse{50%{transform:scale(1.09);opacity:.38}}
header.hero .zukan-btn-emblem svg{width:28px !important;height:28px !important}
header.hero .zukan-btn-copy small{font-size:.54rem !important;letter-spacing:.34em !important;color:#dcc38f}
header.hero .zukan-btn-copy strong{font-size:1.02rem !important;letter-spacing:.17em !important;color:#fff6e7}
header.hero .zukan-btn-copy em{font-size:.66rem;color:rgba(246,236,217,.72)}
header.hero .zukan-btn-arrow{
width:38px !important;
height:38px !important;
min-width:38px !important;
min-height:38px !important;
border-color:rgba(232,208,160,.38);
background:rgba(255,255,255,.045);
}
header.hero .zukan-btn:hover,header.hero .zukan-btn:focus-visible{
border-color:rgba(246,224,177,.88) !important;
box-shadow:0 36px 74px -34px rgba(6,30,21,.95),inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.scroll-cue{margin-top:3.6rem}
.scroll-cue i{height:64px}
/* セクション：スクロールに呼吸を与える */
.motion-section,.motion-heading{
opacity:0;
transform:translateY(34px);
filter:blur(8px);
transition:opacity .9s var(--neo-ease),transform .9s var(--neo-ease),filter .9s ease;
}
.motion-section.motion-in,.motion-heading.motion-in{
opacity:1;
transform:translateY(0);
filter:blur(0);
}
/* 今日の一輪：没入型の展示空間 */
.today{
min-height:88svh;
display:grid;
align-content:center;
overflow:hidden;
background:
radial-gradient(circle at 50% 42%,rgba(214,185,120,.20),transparent 23rem),
radial-gradient(circle at 10% 88%,rgba(79,126,101,.20),transparent 30rem),
linear-gradient(145deg,#163c30 0%,#0c281f 52%,#071c16 100%);
}
.today::before{
content:"BOTANICAL 01";
right:-.04em;
top:50%;
transform:translateY(-50%);
font-size:clamp(5rem,16vw,13rem);
letter-spacing:.06em;
writing-mode:vertical-rl;
color:rgba(255,255,255,.022);
}
.today::after{
content:"";
position:absolute;
width:min(70vw,720px);
aspect-ratio:1;
left:50%;
top:55%;
transform:translate(-50%,-50%);
border:1px solid rgba(231,207,158,.12);
border-radius:50%;
box-shadow:0 0 0 70px rgba(231,207,158,.018),0 0 0 140px rgba(231,207,158,.012);
pointer-events:none;
animation:todayBreath 7s ease-in-out infinite;
}
@keyframes todayBreath{50%{transform:translate(-50%,-50%) scale(1.035);opacity:.72}}
.today>*{position:relative;z-index:1}
.today-frame{width:min(100%,440px);max-width:440px}
.today .frame{
padding:10px;
border-radius:18px 4px 18px 4px;
background:linear-gradient(145deg,#e2c789,#886532 42%,#221d17 78%,#b48b4b) !important;
box-shadow:0 55px 110px -42px rgba(0,0,0,.92),0 0 0 1px rgba(247,224,176,.28) !important;
}
.today .mat{padding:18px;border-radius:13px 2px 13px 2px}
.today .mat img{border-radius:8px 1px 8px 1px}
/* ギャラリー：モダンなアートブックのグリッド */
main{
background:
radial-gradient(circle at 15% 5%,rgba(214,185,120,.12),transparent 25rem),
radial-gradient(circle at 88% 38%,rgba(77,124,101,.08),transparent 34rem),
linear-gradient(180deg,#f7f3ea 0%,#ede9df 100%);
}
.gallery-head h2{font-size:clamp(1.8rem,4.8vw,3rem);letter-spacing:.15em}
.gallery-tools{
border-radius:18px;
background:rgba(255,255,255,.58);
backdrop-filter:blur(18px) saturate(125%);
box-shadow:0 20px 55px -40px rgba(10,45,33,.68),inset 0 1px 0 rgba(255,255,255,.75);
}
.wall{gap:clamp(44px,6vw,76px) clamp(24px,3.5vw,46px)}
.wall .frame-wrap{transform:none !important}
.frame{
--px:50%;
--py:50%;
overflow:visible;
border-radius:20px 4px 20px 4px;
background:rgba(255,255,255,.48) !important;
box-shadow:0 28px 70px -50px rgba(8,40,29,.85),0 0 0 1px rgba(23,65,51,.08) !important;
}
.frame::before{
content:"";
position:absolute;
inset:-1px;
z-index:-1;
border-radius:21px 5px 21px 5px;
opacity:0;
background:radial-gradient(circle at var(--px) var(--py),rgba(226,199,142,.55),transparent 35%);
transition:opacity .4s ease;
}
.frame:hover::before,.frame:focus-visible::before{opacity:1}
.frame::after{border-radius:20px 4px 20px 4px !important;box-shadow:inset 0 0 0 1px rgba(31,74,58,.11),inset 0 0 0 7px rgba(255,255,255,.38) !important}
.mat{
overflow:hidden;
border-radius:18px 3px 18px 3px;
background:rgba(255,253,248,.88);
}
.mat img{
border-radius:12px 2px 12px 2px;
transform:scale(1.015);
transition:transform 1.05s var(--neo-ease),filter .8s ease;
}
.frame:hover .mat img,.frame:focus-visible .mat img{transform:scale(1.065);filter:saturate(1.07) contrast(1.015)}
.caption{
position:relative;
padding:14px 5px 4px;
border-top:0;
}
.caption::before{
content:"";
position:absolute;
left:4px;
right:4px;
top:0;
height:1px;
background:linear-gradient(90deg,var(--neo-gold),rgba(214,185,120,.12),transparent);
transform:scaleX(.32);
transform-origin:left;
transition:transform .6s var(--neo-ease);
}
.frame:hover .caption::before,.frame:focus-visible .caption::before{transform:scaleX(1)}
.caption .t{font-size:.91rem;letter-spacing:.14em;color:var(--neo-forest)}
.caption .d{margin-top:.35rem;font-size:.63rem;color:#9b7842}
.js-reveal .frame-wrap{
opacity:0;
transform:translateY(52px) scale(.965);
filter:blur(10px);
transition:opacity .9s var(--neo-ease),transform 1s var(--neo-ease),filter .9s ease;
}
.js-reveal .frame-wrap.is-in{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
#moreBtn{
border-radius:999px;
background:linear-gradient(135deg,#1d493a,#0d2c22);
box-shadow:0 22px 50px -32px rgba(4,28,19,.82);
}
/* 流れる写真：視差のあるギャラリーフィルム */
.marquee{
padding:32px 0;
background:
radial-gradient(circle at 15% 30%,rgba(214,185,120,.12),transparent 25rem),
linear-gradient(145deg,#0d2c22,#071d16);
}
.marquee::before,.marquee::after{
content:"";
position:absolute;
top:0;
bottom:0;
z-index:2;
width:min(12vw,130px);
pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,#0b281f,transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,#071d16,transparent)}
.marquee .track{gap:18px}
.marquee .mq-item{
border-radius:18px 4px 18px 4px;
transition:transform .45s var(--neo-ease),filter .4s ease,box-shadow .4s ease;
}
.marquee .mq-item:hover,.marquee .mq-item:focus-visible{
transform:translateY(-8px) scale(1.035);
filter:saturate(1.08);
box-shadow:0 28px 50px -28px rgba(0,0,0,.92),0 0 0 1px rgba(238,215,169,.42);
}
.marquee img{height:132px;width:176px;border-radius:16px 3px 16px 3px}
/* 情報カード群 */
.col-card,.col-mini,.item-card,.z-card,.z-info,.z-bloom,.z-point,.z-memo,.z-vs-col,.z-buy,.gift-banner{
border-radius:24px 5px 24px 5px;
background:rgba(255,255,255,.58);
backdrop-filter:blur(12px);
box-shadow:0 30px 80px -58px rgba(9,44,32,.78),inset 0 1px 0 rgba(255,255,255,.76);
transition:transform .6s var(--neo-ease),box-shadow .6s ease,border-color .4s ease;
}
.col-card:hover,.col-mini:hover,.item-card:hover,.z-card:hover{
transform:translateY(-10px);
border-color:rgba(214,185,120,.4);
box-shadow:0 40px 90px -58px rgba(9,44,32,.92),inset 0 1px 0 rgba(255,255,255,.84);
}
/* ライトボックス：シネマティックな暗室 */
#lightbox{
opacity:0;
transition:opacity .42s ease;
background:
radial-gradient(circle at 50% 22%,rgba(214,185,120,.15),transparent 28rem),
rgba(3,15,11,.975);
}
#lightbox.open{opacity:1}
#lightbox .inner{
transform:translateY(20px) scale(.975);
opacity:0;
transition:transform .6s var(--neo-ease),opacity .45s ease;
}
#lightbox.open .inner{transform:translateY(0) scale(1);opacity:1}
#lightbox .lb-frame{
border-radius:24px 5px 24px 5px;
background:linear-gradient(145deg,#e0c486,#76582f 46%,#211b14 78%,#a88042);
}
#lightbox img{border-radius:18px 3px 18px 3px}
#imageView img{animation:imageViewIn .65s var(--neo-ease)}
@keyframes imageViewIn{from{opacity:0;transform:scale(.965);filter:blur(10px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
/* フッター */
footer{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 50% -15%,rgba(214,185,120,.18),transparent 30rem),
linear-gradient(145deg,#13382c,#071e17);
}
footer::after{
content:"MICHIKUSA BOTANICAL ARCHIVE";
position:absolute;
left:50%;
bottom:-.25em;
transform:translateX(-50%);
white-space:nowrap;
font-family:var(--en);
font-size:clamp(2rem,8vw,7rem);
letter-spacing:.08em;
color:rgba(255,255,255,.025);
pointer-events:none;
}
@media (max-width:767px){
.gnav{top:0;background:rgba(246,241,231,.86)}
.gnav.nav-hidden{transform:translateY(-115%)}
header.hero{min-height:100svh;padding-top:7.4rem;padding-bottom:4.8rem}
.hero-en::before,.hero-en::after{width:22px;margin-left:.55rem;margin-right:.55rem}
.hero h1{font-size:clamp(2rem,10vw,3.15rem);line-height:1.72;letter-spacing:.105em}
.hero .lead{border-radius:24px;padding:.9rem .75rem;background:rgba(255,255,255,.26)}
header.hero .zukan-btn{
grid-template-columns:46px minmax(0,1fr) 34px !important;
width:min(328px,calc(100vw - 24px)) !important;
height:76px !important;min-height:76px !important;max-height:76px !important;
border-radius:25px !important;
}
header.hero .zukan-btn::before{border-radius:21px !important}
header.hero .zukan-btn-emblem{width:46px !important;height:46px !important;min-width:46px !important;min-height:46px !important}
header.hero .zukan-btn-copy strong{font-size:.91rem !important}
header.hero .zukan-btn-copy em{font-size:.6rem}
header.hero .zukan-btn-arrow{width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important}
.today{min-height:auto;padding-top:6rem;padding-bottom:6.5rem}
.today-frame{width:100%;max-width:100%}
.today::after{width:92vw}
.wall{gap:42px}
.frame{border-radius:18px 4px 18px 4px}
.mat{border-radius:16px 3px 16px 3px}
.marquee img{height:112px;width:150px}
.motion-section,.motion-heading{transform:translateY(24px);filter:blur(5px)}
}
@media (prefers-reduced-motion:reduce){
header.hero::before,header.hero::after,.today::after,.zukan-btn-emblem::before{animation:none !important}
.motion-section,.motion-heading,.js-reveal .frame-wrap{opacity:1 !important;transform:none !important;filter:none !important}
.mat img{transition:none !important}
.hana-progress{display:none}
}
@media (prefers-color-scheme:dark){
body::before{opacity:.06;mix-blend-mode:screen}
header.hero{
background:
radial-gradient(circle at var(--mx) var(--my),rgba(67,112,90,.18),transparent 21rem),
radial-gradient(circle at 14% 14%,rgba(214,185,120,.09),transparent 27rem),
linear-gradient(145deg,#0c1d17,#0e211a);
}
.hero-en,.hero .lead{color:#aeb8b1}
.hero h1{color:#ede6d7}
.hero h1 .mk{background:linear-gradient(100deg,#f0e6d2,#9eb7a9,#d8b879);-webkit-background-clip:text;background-clip:text}
.hero .lead{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08)}
.gnav{background:rgba(13,31,24,.68);border-color:rgba(255,255,255,.08)}
.gnav.scrolled{background:rgba(13,31,24,.9)}
main{background:linear-gradient(180deg,#111f19,#0e1c16)}
.frame,.gallery-tools,.col-card,.col-mini,.item-card,.z-card,.z-info,.z-bloom,.z-point,.z-memo,.z-vs-col,.z-buy,.gift-banner{background:rgba(255,255,255,.035)}
}
/* 19.0 オープニングHUD */
.intro-hud{
position:absolute;
left:clamp(18px,4vw,56px);
right:clamp(18px,4vw,56px);
bottom:clamp(22px,4vw,50px);
z-index:3;
display:grid;
grid-template-columns:auto minmax(80px,220px) auto;
align-items:center;
gap:14px;
pointer-events:none;
font-family:var(--en2);
font-size:.58rem;
line-height:1;
letter-spacing:.24em;
color:rgba(37,62,51,.58);
}
.intro-hud-line{
display:block;
height:1px;
overflow:hidden;
background:rgba(37,62,51,.14);
}
.intro-hud-line i{
display:block;
width:100%;
height:100%;
transform:scaleX(0);
transform-origin:left;
background:linear-gradient(90deg,#6a8a78,#d6b978);
transition:transform .12s linear;
}
.intro-hud-phase{text-align:right;color:#a17e43}
#intro.titled .intro-hud{opacity:.28;transition:opacity .6s ease}
#intro.leave .intro-hud{opacity:0}
@media (max-width:640px){
.intro-hud{grid-template-columns:auto 1fr auto;gap:9px;font-size:.48rem;letter-spacing:.16em}
.intro-hud-label{max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (prefers-color-scheme:dark){
.intro-hud{color:rgba(239,225,197,.55)}
.intro-hud-line{background:rgba(239,225,197,.16)}
.intro-hud-phase{color:#d6b978}
}
/* ============================================================
19.0.1 安定性・操作性改善（19.0の外観は変更しない）
============================================================ */
html.modal-open,
html.modal-open body{overflow:hidden}
.skip-link{
position:fixed;
top:8px;
left:8px;
z-index:10000;
transform:translateY(-160%);
padding:.65rem 1rem;
border-radius:999px;
color:#f7f2e8;
background:#15382d;
box-shadow:0 8px 22px rgba(0,0,0,.2);
transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}
#lightbox img.is-loading{
opacity:.45;
filter:blur(6px);
}
#lightbox img{
transition:opacity .22s ease,filter .22s ease;
}
/* ============================================================
19.0.3 操作・表示タイミング調整
============================================================ */
.js-reveal .frame-wrap{
transition-duration:.68s,.76s,.68s !important;
}
.js-reveal .frame-wrap:nth-child(3n+2){transition-delay:.04s !important}
.js-reveal .frame-wrap:nth-child(3n+3){transition-delay:.08s !important}