:root{
  /* sunday flower パーソナルカラースタイル設定 */
  --text:#333333; --ink:#1C1C1C; --ivory:#F5F2EB; --offwhite:#D7D4D4;
  --brick:#FC3B1C; --mustard:#FAB30D; --peacock:#00ABF2; --purple:#B958D8;
  --camel:#EBA46A; --terra:#FB6604; --khaki:#A2B130; --blue:#206CC4; --brown:#A76C38;
  --serif:"Noto Serif JP","Yu Mincho",serif;
  --logo:"Cormorant Garamond",serif;
  --sans:"Zen Kaku Gothic New","Segoe UI","Hiragino Sans","Yu Gothic UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--text);font-family:var(--sans);line-height:1.85}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--brick)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid #eae6dc}
header.site .wrap{display:flex;align-items:center;gap:22px;height:64px}
.brand{font-family:var(--logo);font-style:italic;font-size:1.5rem;color:var(--ink);
  letter-spacing:.02em;white-space:nowrap}
.brand:hover{color:var(--brick)}
nav.main{display:flex;gap:22px;align-items:center;margin-left:auto}
nav.main a{color:var(--text);font-size:.93rem}
nav.main a:hover{color:var(--brick)}
.btnlink{display:inline-block;background:var(--brick);color:#fff !important;
  border-radius:999px;padding:7px 20px;font-size:.88rem;font-weight:500;
  transition:background .2s, transform .2s}
.btnlink:hover{background:var(--terra);transform:translateY(-1px)}
#langBtn{background:none;border:1px solid #d8d3c6;color:var(--text);
  border-radius:999px;padding:5px 14px;cursor:pointer;font-size:.82rem;font-family:var(--sans)}
#langBtn:hover{border-color:var(--brick);color:var(--brick)}
#menuBtn{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
#menuBtn span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;
  transition:transform .3s, opacity .3s}
body.menu-open #menuBtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open #menuBtn span:nth-child(2){opacity:0}
body.menu-open #menuBtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{background:var(--ivory);padding:88px 0 64px}
.hero .eyebrow{font-family:var(--logo);font-style:italic;font-size:1.1rem;color:var(--brick)}
.hero h1{font-family:var(--serif);font-weight:700;font-size:2.6rem;color:var(--ink);
  letter-spacing:.03em;margin:6px 0 4px}
.hero h1 small{font-family:var(--sans);font-weight:400;font-size:1.05rem;color:#8a857a}
.hero .sub{font-family:var(--serif);color:var(--brown);font-size:1.05rem}
.hero p.lead{margin-top:16px;max-width:620px;color:#5a564d}
.chips{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.chip{font-size:.78rem;padding:3px 14px;border-radius:999px;background:#fff;
  border:1px solid #e2ddd0;color:var(--brown)}
.dots{display:flex;gap:6px;margin-top:26px}
.dots i{width:14px;height:14px;border-radius:50%}

/* ---------- sections / headings（縦線の代わり：英字ラベル＋短い下線） ---------- */
h2.sec{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--ink);
  margin:70px 0 4px;letter-spacing:.02em}
h2.sec::after{content:"";display:block;width:44px;height:3px;margin-top:10px;
  background:var(--brick);border-radius:2px}
.eyebrow-s{display:block;font-family:var(--logo);font-style:italic;font-size:.95rem;
  color:var(--brick);margin:70px 0 -66px;position:relative}
p.secsub{color:#8a857a;font-size:.88rem;margin:14px 0 22px}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{background:#fff;border:1px solid #e8e4d8;border-radius:14px;padding:20px;
  transition:box-shadow .25s, transform .25s;border-top:3px solid var(--card-accent,var(--camel))}
.card:hover{box-shadow:0 10px 26px rgba(28,28,28,.08);transform:translateY(-3px)}
.card .date{font-size:.75rem;color:#a49e90;letter-spacing:.06em}
.card h3{font-family:var(--serif);font-size:1.04rem;color:var(--ink);margin:4px 0 8px;font-weight:700}
.card ul{list-style:none;margin-top:6px}
.card li{margin:4px 0;font-size:.9rem}
.card li::before{content:"— ";color:var(--camel)}
.tag{display:inline-block;font-size:.68rem;border-radius:999px;padding:1px 10px;
  margin-left:8px;vertical-align:2px;font-family:var(--sans);font-weight:500}
.tag.work{background:rgba(250,179,13,.15);color:#b07f09}
.tag.game{background:rgba(185,88,216,.13);color:var(--purple)}

/* ---------- news rows (top page) ---------- */
.newsrow{display:flex;align-items:baseline;gap:16px;padding:12px 16px;
  border-bottom:1px solid #eee9dd;flex-wrap:wrap}
.newsrow:hover{background:var(--ivory)}
.newsrow .d{min-width:110px;color:var(--ink);font-family:var(--serif);font-weight:700;font-size:.95rem}
.newsrow a{font-size:.88rem}

/* ---------- links page ---------- */
.linkcard{display:block;background:#fff;border:1px solid #e8e4d8;border-radius:14px;
  padding:16px 20px;transition:box-shadow .25s, transform .25s;
  border-left:none;border-top:3px solid var(--card-accent,var(--peacock))}
.linkcard:hover{box-shadow:0 10px 26px rgba(28,28,28,.08);transform:translateY(-3px)}
.linkcard .t{color:var(--ink);font-weight:700;font-family:var(--serif)}
.linkcard .s{color:var(--blue);font-size:.8rem;margin-top:2px}
.linkcard .u{color:#a49e90;font-size:.73rem;word-break:break-all;margin-top:4px}
.linkcard .n{color:var(--brown);font-size:.8rem;margin-top:4px}

/* ---------- footer ---------- */
footer{margin-top:90px;background:var(--ink);color:var(--ivory);padding:36px 0;
  font-size:.82rem}
footer .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
footer .logo{font-family:var(--logo);font-style:italic;font-size:1.2rem}
footer .pal{display:flex;gap:5px;margin-left:auto}
footer .pal i{width:10px;height:10px;border-radius:50%;display:block}

/* ---------- page top button ---------- */
#toTop{position:fixed;right:22px;bottom:22px;z-index:60;width:48px;height:48px;
  border-radius:50%;border:none;background:var(--ink);color:var(--ivory);
  font-size:1.2rem;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(14px);transition:opacity .4s, transform .4s, background .2s}
#toTop.show{opacity:.88;visibility:visible;transform:translateY(0)}
#toTop:hover{background:var(--brick);opacity:1}

/* ---------- responsive (sunday flower: SP~519 / tab 520-959 / pc 960~) ---------- */
@media(max-width:959px){
  #menuBtn{display:block}
  nav.main{position:fixed;inset:64px 0 auto 0;background:#fff;flex-direction:column;
    align-items:flex-start;gap:0;padding:8px 24px 18px;margin:0;
    border-bottom:1px solid #eae6dc;box-shadow:0 14px 28px rgba(28,28,28,.10);
    transform:translateY(-130%);transition:transform .35s ease;z-index:40}
  body.menu-open nav.main{transform:translateY(0)}
  nav.main a{padding:12px 0;width:100%;border-bottom:1px solid #f1ede2;font-size:1rem}
  nav.main .btnlink{margin-top:12px;text-align:center;border-bottom:none}
  nav.main #langBtn{margin-top:12px}
  .hero h1{font-size:1.9rem}
}