/* ============================================================
   新川帆立 公式サイト 共通デザインシステム（_shared.css）
   案A「お茶の時間」｜静けさ × 抜け感 × 小さな遊び心
   固定ページが読み込む。トップ（index.html）はインラインCSSで自己完結。
   ============================================================ */
:root{
  --anzu:#DD9A5B;
  --anzu-deep:#C07E3F;
  --kinari:#F6F0E6;
  --paper:#FDFBF7;
  --sumi:#3A3A3A;
  --sumi-soft:#6E675E;
  --line:#E9E0D2;
  --bk1:#F6F0E6; --bk2:#F3E7D7; --bk3:#EFE9DC; --bk4:#F8F1E4;
  --radius:20px;
  --w:1020px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  font-weight:400;color:var(--sumi);background:var(--paper);
  font-size:16.5px;line-height:1.95;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;vertical-align:middle}
/* 紙の目（ごく薄いグレイン） */
body::after{
  content:"";position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.027;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,.lead,.btn{word-break:auto-phrase;text-wrap:balance}
.inner{max-width:var(--w);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:0;top:0;transform:translateY(-150%);background:var(--sumi);color:#fff;padding:8px 16px;border-radius:0 0 10px 0;z-index:200}
.skip:focus{transform:translateY(0)}
.eng{display:block;font-size:11px;font-weight:500;letter-spacing:.42em;color:var(--anzu-deep);text-transform:uppercase;margin-bottom:14px}
.ht{color:var(--anzu)}
.note{font-size:12px;color:var(--sumi-soft);letter-spacing:.03em}
.more{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;letter-spacing:.12em;padding:4px 2px;border-bottom:1.5px solid var(--anzu);transition:color .25s ease}
.more:hover{color:var(--anzu-deep)}
.more .dot{width:6px;height:6px;border-radius:50%;background:var(--anzu)}

/* ---- header ---- */
.hd{position:sticky;top:0;z-index:100;background:rgba(253,251,247,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-in{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:72px}
.hd-logo{display:flex;align-items:baseline;gap:12px}
.hd-logo .nm{font-size:19px;font-weight:700;letter-spacing:.14em}
.hd-logo .en{font-size:10px;font-weight:500;letter-spacing:.3em;color:var(--sumi-soft)}
.hd-nav ul{display:flex;gap:30px}
.hd-nav a{font-size:13.5px;font-weight:500;letter-spacing:.08em;color:var(--sumi);padding:6px 0;position:relative}
.hd-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--anzu);border-radius:2px;transition:right .3s ease}
.hd-nav a:hover::after{right:0}
.hd-nav a[aria-current="page"]::after{right:0}
.mn-btn{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.mn-btn span{position:absolute;left:10px;right:10px;height:2px;border-radius:2px;background:var(--sumi);transition:transform .3s ease,opacity .3s ease}
.mn-btn span:nth-child(1){top:16px}
.mn-btn span:nth-child(2){top:22px}
.mn-btn span:nth-child(3){top:28px}
body.menu-open .mn-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .mn-btn span:nth-child(2){opacity:0}
body.menu-open .mn-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:90;background:var(--kinari);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
body.menu-open .mnav{opacity:1;visibility:visible}
.mnav ul{text-align:center;display:grid;gap:6px}
.mnav a{display:inline-block;font-size:19px;font-weight:500;letter-spacing:.14em;padding:10px 18px}
.mnav .mnav-ht{margin:26px auto 0;width:30px;opacity:.75;display:block}

/* ---- page hero（固定ページの題字帯。FVはトップ専用） ---- */
.ph{padding:96px 0 72px;border-bottom:1px solid var(--line)}
.ph h1{font-size:clamp(30px,4.6vw,44px);font-weight:700;letter-spacing:.18em;line-height:1.4}
.ph .lead{max-width:640px;margin-top:18px}
.ph .ht-mark{width:26px;margin-bottom:22px;display:block;opacity:.85} /* 未使用のまま温存（2026-08-26 帆立の音量調整で「見出しマーク」は不採用に変更） */
.ph h1::after{ /* ペンの走り：題字の下に杏の罫線が引かれる */
  content:"";display:block;width:54px;height:2px;margin-top:20px;
  border-radius:2px;background:var(--anzu);transform-origin:left center;
}
html.j .ph h1::after{animation:penline .8s .35s cubic-bezier(.25,.6,.3,1) both}
@keyframes penline{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- 共通セクション ---- */
.sec{padding:96px 0}
.sec-h{margin-bottom:44px}
.sec-h h2{font-size:clamp(24px,3.4vw,32px);font-weight:700;letter-spacing:.16em;line-height:1.5}
.lead{max-width:640px;color:var(--sumi);margin-top:16px}

/* ---- お知らせ行 ---- */
.nw-list{border-top:1px solid var(--line)}
.nw{position:relative;display:flex;align-items:baseline;gap:34px;padding:24px 10px;border-bottom:1px solid var(--line);transition:background .3s ease}
.nw::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--anzu);border-radius:0 0 2px 2px;transition:height .25s ease} /* 栞 */
.nw:hover::before{height:100%}
.nw:hover{background:var(--kinari)}
.nw time{flex:0 0 84px;font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--sumi-soft)}
.nw p{font-size:15.5px;line-height:1.8;word-break:auto-phrase}

/* ---- 書影 ---- */
.bk{position:relative;display:block;aspect-ratio:100/145;border-radius:3px 7px 7px 3px;background:var(--bk1);box-shadow:1px 2px 6px rgba(58,58,58,.10);transition:transform .35s ease,box-shadow .35s ease;overflow:hidden}
.bk::before{content:"";position:absolute;top:0;bottom:0;left:7px;width:1.5px;background:rgba(192,126,63,.4)}
.bk.has-img::before{display:none}
.bk.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bk .t{position:absolute;top:14px;right:12px;bottom:30px;writing-mode:vertical-rl;font-size:14.5px;font-weight:500;letter-spacing:.14em;line-height:1.55;color:var(--sumi)}
.bk .t.s{font-size:11.5px;letter-spacing:.08em}
.bk .a{position:absolute;left:11px;bottom:12px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.2em;color:var(--sumi-soft)}
.bk-tag{position:absolute;top:-10px;left:-4px;z-index:2;font-size:9.5px;font-weight:500;letter-spacing:.14em;color:var(--anzu-deep);background:var(--paper);border:1px solid var(--anzu);border-radius:999px;padding:2px 9px;white-space:nowrap}

/* ---- 作品ページ（works） ---- */
.wk-group{padding:64px 0;border-bottom:1px solid var(--line)}
.wk-group:last-of-type{border-bottom:0}
.wk-group > h2{font-size:22px;font-weight:700;letter-spacing:.16em;margin-bottom:8px}
.wk-group > .gnote{font-size:13px;color:var(--sumi-soft);margin-bottom:34px}
.wk-row{display:grid;grid-template-columns:118px 1fr;gap:34px;padding:30px 0;border-top:1px solid var(--line);align-items:start}
.wk-row:first-of-type{border-top:0}
.wk-row .bk{box-shadow:1px 3px 7px rgba(58,58,58,.12),0 12px 10px -10px rgba(58,58,58,.20)} /* 棚に置かれた接地感 */
.wk-row .bk:hover{transform:translateY(-5px)}
.wk-t{font-size:18px;font-weight:700;letter-spacing:.08em;line-height:1.7}
.wk-meta{margin-top:8px;font-size:13px;color:var(--sumi-soft);letter-spacing:.05em}
.wk-note{margin-top:10px;font-size:13.5px;line-height:1.9}
.wk-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.wk-tag{font-size:10.5px;font-weight:500;letter-spacing:.12em;color:var(--anzu-deep);border:1px solid var(--anzu);border-radius:999px;padding:2px 11px}
.wk-buy{margin-top:14px}
.wk-buy a{font-size:12.5px;font-weight:500;letter-spacing:.1em;color:var(--sumi-soft);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .25s ease,border-color .25s ease}
.wk-buy a:hover{color:var(--anzu-deep);border-color:var(--anzu)}
.wk-sub{margin-top:6px;font-size:13px;color:var(--sumi-soft);line-height:1.9}

/* ---- この本のかたち（単行本と文庫の版） ---- */
.wk-eds{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.wk-eds-h{font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--anzu-deep)}
.wk-eds ul{margin-top:11px;display:flex;flex-direction:column;gap:10px}
.wk-eds li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.ed-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.ed-k{flex:none;font-size:10.5px;font-weight:500;letter-spacing:.12em;color:var(--sumi-soft);background:var(--kinari);border-radius:999px;padding:3px 11px}
.ed-m{font-size:12.5px;color:var(--sumi-soft);letter-spacing:.04em;word-break:auto-phrase}
.ed-p{font-size:12.5px;color:var(--sumi-soft);letter-spacing:.04em;overflow-wrap:anywhere}
.ed-a{font-size:12.5px;font-weight:500;letter-spacing:.1em;color:var(--sumi-soft);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .25s ease,border-color .25s ease}
.ed-a:hover{color:var(--anzu-deep);border-color:var(--anzu)}

/* ---- 作品の絞り込み：キャラのタブ＋タイトル検索（JS有効時のみ表示） ---- */
.wk-filter-wrap{border-bottom:1px solid var(--line)}
.wk-filter{display:none;padding:24px 0 20px;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.wk-filter.is-ready{display:flex}
.wk-tabs{display:flex;gap:10px;flex-wrap:wrap}
.wk-tab{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--line);border-radius:999px;background:var(--paper);
  padding:9px 18px;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.08em;color:var(--sumi-soft);
  cursor:pointer;transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.wk-tab:hover{border-color:var(--anzu)}
.wk-tab .tab-ht{display:none;width:26px;height:26px}
.wk-tab.act{background:var(--kinari);border-color:var(--anzu);color:var(--sumi)}
.wk-tab.act .tab-ht{display:block;animation:tabpop .45s cubic-bezier(.3,1.6,.45,1)}
@keyframes tabpop{0%{transform:scale(.3)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.wk-searchbox{margin:0}
.wk-search{
  font-family:inherit;font-size:14px;color:var(--sumi);
  background:var(--kinari);border:1.5px solid var(--line);border-radius:999px;
  padding:10px 20px;width:230px;letter-spacing:.05em;
}
.wk-search:focus{outline:none;border-color:var(--anzu);background:#fff}
.wk-none{display:none;padding:64px 0 40px;text-align:center;color:var(--sumi-soft);font-size:14px;letter-spacing:.06em}
.wk-none img{display:block;margin:0 auto 14px;opacity:.92}

.wk-row{scroll-margin-top:96px}
@media (min-width:901px){ /* 作品一覧はPC2カラム（2026-08-26 内田指示） */
  .wk-group .inner{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:start}
  .wk-group .inner > *{grid-column:1/-1}
  .wk-group .inner > .wk-row{grid-column:auto;border-top:1px solid var(--line)}
}

.wk-h3{font-size:17px;font-weight:700;letter-spacing:.12em;margin:48px 0 4px}
.wk-h3 small{font-size:12px;color:var(--sumi-soft);font-weight:500;margin-left:12px}
.wk-h3 + .gnote{font-size:13px;color:var(--sumi-soft);margin-bottom:18px}

/* ---- 台帳（寄稿 kikou）・一覧行 ---- */
.lg-list{border-top:1px solid var(--line)}
.lg{display:flex;align-items:baseline;gap:22px;padding:22px 8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lg .ttl{font-size:16px;font-weight:500;letter-spacing:.06em;flex:1 1 240px}
.lg .st{font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--sumi-soft);background:var(--kinari);border-radius:999px;padding:4px 14px;white-space:nowrap}
.lg .st.on{color:var(--anzu-deep);background:#fff;border:1px solid var(--anzu)}
.info-box{background:var(--kinari);border-radius:var(--radius);padding:34px 38px;margin-top:44px}
.info-box h3{font-size:15px;font-weight:700;letter-spacing:.12em;margin-bottom:10px}
.info-box p{font-size:14px;line-height:2;word-break:auto-phrase}

/* ---- プロフィール ---- */
.pf-quote{background:var(--kinari);padding:80px 0;text-align:center}
.pf-quote q{display:block;font-size:clamp(19px,2.8vw,27px);font-weight:700;letter-spacing:.1em;line-height:2;quotes:none;word-break:auto-phrase;text-wrap:balance}
.pf-quote q::before{content:none}
.pf-quote q::after{content:none}
.pf-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.pf-photo{margin:0}
.pf-photo-img{background:var(--kinari);border:1.5px solid var(--line);border-radius:var(--radius);aspect-ratio:3/4;overflow:hidden}
.pf-photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo-credit{margin-top:8px;font-size:11px;letter-spacing:.06em;color:var(--sumi-soft);text-align:right;line-height:1.6}
.pf-own{background:var(--kinari);border-radius:var(--radius);padding:34px 38px;font-size:14px;line-height:2.1}
.tl{border-top:1px solid var(--line)}
.tl li{display:flex;gap:30px;padding:19px 6px;border-bottom:1px solid var(--line);align-items:baseline}
.tl .y{flex:0 0 74px;font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--anzu-deep)}
.tl p{font-size:14.5px;line-height:1.9;word-break:auto-phrase}
.aw-list li{display:flex;gap:22px;padding:14px 6px;border-bottom:1px solid var(--line);align-items:baseline}
.aw-list .y{flex:0 0 52px;font-size:13px;color:var(--sumi-soft)}
.aw-list p{font-size:14.5px}

/* ---- 実験室 ---- */
.lab-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:44px 46px}
.lab-panel li{display:flex;align-items:center;gap:14px;padding:15px 4px;font-size:15px;font-weight:500;letter-spacing:.12em;justify-content:space-between}
.lab-panel li + li{border-top:1px solid var(--line)}
.lab-panel .nm{display:flex;align-items:center;gap:14px}
.lab-panel .dot{width:7px;height:7px;border-radius:50%;background:var(--anzu);flex:0 0 auto}
.lab-panel .st{font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--sumi-soft);background:var(--kinari);border-radius:999px;padding:4px 14px}

/* ---- お問い合わせ ---- */
.ct-main{max-width:660px;margin:0 auto;text-align:center}
.ct-main .big{font-size:clamp(19px,2.6vw,24px);font-weight:700;letter-spacing:.1em;line-height:2.1;word-break:auto-phrase;text-wrap:balance}
.ct-main .sub{margin-top:24px;font-size:14.5px;line-height:2.1;color:var(--sumi);word-break:auto-phrase}
.pub-list{margin-top:56px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pub-list li a{display:inline-block;font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--sumi);background:var(--kinari);border:1.5px solid var(--line);border-radius:999px;padding:8px 20px;transition:border-color .25s ease,background .25s ease,color .25s ease}
.pub-list li a:hover{border-color:var(--anzu);background:#fff;color:var(--anzu-deep)}

/* ---- SNS ---- */
.sns{padding:96px 0 130px;text-align:center}
.sns p{font-size:15.5px;letter-spacing:.1em}
.sns-links{margin-top:30px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.sns-pill{display:inline-flex;align-items:baseline;gap:10px;border:1.5px solid var(--line);border-radius:999px;padding:13px 30px;font-size:14px;font-weight:500;letter-spacing:.1em;transition:border-color .3s ease,background .3s ease}
.sns-pill small{font-size:11px;color:var(--sumi-soft);letter-spacing:.06em}
.sns-pill:hover{border-color:var(--anzu);background:var(--kinari)}

/* ---- 実験室：試作の棚＋見本カード（見せ方の見本） ---- */
.lab-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.lab-shelf{border-top:1px solid var(--line)}
.lab-shelf li{display:flex;align-items:baseline;gap:20px;padding:23px 8px;border-bottom:1px solid var(--line)}
.lab-shelf .nm{font-size:16px;font-weight:700;letter-spacing:.14em;flex:0 0 96px}
.lab-shelf .desc{font-size:13.5px;color:var(--sumi-soft);letter-spacing:.04em}
.lab-mascot{margin:0 0 14px;text-align:center}
.lab-mascot img{display:inline-block}
.lab-sample{
  position:relative;margin-top:10px;
  background-color:#FBF6EC;
  background-image:linear-gradient(rgba(192,126,63,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(192,126,63,.09) 1px,transparent 1px);
  background-size:22px 22px;
  border:1px solid var(--line);border-radius:14px;padding:40px 38px 34px;
}
.lab-sample::before{ /* マスキングテープ */
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:96px;height:22px;background:rgba(221,154,91,.42);border-radius:2px;
}
.lab-sample .chip{display:inline-block;font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--anzu-deep);border:1px solid var(--anzu);border-radius:999px;padding:2px 11px;background:var(--paper)}
.lab-sample h3{margin-top:16px;font-size:17px;font-weight:700;letter-spacing:.1em}
.lab-sample .date{margin-top:6px;font-size:11px;letter-spacing:.16em;color:var(--sumi-soft)}
.lab-sample .body{margin-top:16px;font-size:14px;line-height:2.05;word-break:auto-phrase}
.lab-sample .smp-note{margin-top:18px;font-size:11px;color:var(--sumi-soft);letter-spacing:.04em}

/* ---- プロフィール：たたき台の下書き ---- */
.pf-own p{color:var(--sumi);font-size:14.5px;line-height:2.1;margin-top:14px;word-break:auto-phrase}
.pf-own p:first-of-type{margin-top:0}
.pf-own .pf-own-note{color:var(--sumi-soft);font-size:12px;line-height:1.9;margin-bottom:18px}

/* ---- お供の帆立（下層：スクロールで降りてくる・吹き出しつき） ---- */
.buddy{
  position:fixed;right:22px;bottom:24px;z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  pointer-events:none;opacity:0;transform:translateY(-46vh);
  transition:transform 1.4s cubic-bezier(.3,.8,.35,1),opacity .7s ease;
}
.buddy.on{opacity:1;transform:translateY(0)}
.buddy-figs{position:relative;display:block;width:86px;height:86px;animation:buddyhop 3.8s ease-in-out infinite;pointer-events:auto}
.buddy-figs:hover{animation:ft-hop .55s cubic-bezier(.3,1.5,.5,1)}
.buddy-figs .bf{position:absolute;inset:0;width:100%;height:auto;opacity:0;transition:opacity .25s ease}
.buddy-figs .bf.act{opacity:1}
.buddy-balloon{
  position:relative;background:#fff;border:1.5px solid var(--anzu);border-radius:999px;
  padding:8px 16px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--sumi);
  white-space:nowrap;box-shadow:0 4px 14px -8px rgba(58,58,58,.25);
}
.buddy-balloon::after{
  content:"";position:absolute;right:26px;bottom:-6px;width:10px;height:10px;background:#fff;
  border-right:1.5px solid var(--anzu);border-bottom:1.5px solid var(--anzu);transform:rotate(45deg);
}
@keyframes buddyhop{
  0%,100%{transform:translateY(0) scale(1)}
  12%{transform:translateY(0) scaleY(.96) scaleX(1.02)}
  36%{transform:translateY(-10px) scale(1)}
  60%,100%{transform:translateY(0) scale(1)}
}
@media (max-width:768px){
  .buddy .buddy-balloon{display:none}
  .buddy.talk .buddy-balloon{display:block;animation:bpop .5s cubic-bezier(.3,1.6,.45,1)}
  .buddy-figs{pointer-events:auto}
}
@keyframes bpop{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.buddy{display:none}}

/* ---- 実験室：一覧＋サイドバー ---- */
.inner-wide{max-width:1220px}
.lab-wrap{display:grid;grid-template-columns:1fr 308px;gap:84px;align-items:start}
.lab-list{border-top:1px solid var(--line)}
.lab-item{display:flex;align-items:baseline;gap:18px;padding:22px 8px;border-bottom:1px solid var(--line);transition:background .25s ease;flex-wrap:wrap}
.lab-item:hover{background:var(--kinari)}
.lab-item time{flex:0 0 92px;font-size:12.5px;font-weight:500;color:var(--sumi-soft);letter-spacing:.08em}
.lab-item .cat{font-size:10.5px;font-weight:500;border:1px solid var(--anzu);color:var(--anzu-deep);border-radius:999px;padding:2px 11px;letter-spacing:.12em;white-space:nowrap}
.lab-item .t{font-size:15.5px;font-weight:500;letter-spacing:.04em;word-break:auto-phrase}
.lab-none{display:none;padding:48px 0;text-align:center;color:var(--sumi-soft);font-size:14px;letter-spacing:.06em}
.lab-none img{display:block;margin:0 auto 12px;opacity:.92}
.lab-side{display:grid;gap:38px}
.side-h{font-size:12.5px;font-weight:700;letter-spacing:.2em;border-left:3px solid var(--anzu);padding-left:11px;margin-bottom:14px}
.side-cats li a{display:flex;align-items:center;gap:11px;padding:9px 4px;font-size:13.5px;font-weight:500;letter-spacing:.06em;border-bottom:1px solid var(--line);transition:background .25s ease}
.side-cats li a:hover{background:var(--kinari)}
.side-cats li a.act{color:var(--anzu-deep)}
.side-new li a{display:block;padding:9px 2px;font-size:13px;line-height:1.75;letter-spacing:.03em;border-bottom:1px solid var(--line);transition:color .25s ease}
.side-new li a:hover{color:var(--anzu-deep)}
.side-new time{display:block;font-size:10.5px;color:var(--sumi-soft);letter-spacing:.1em;margin-bottom:2px}
.side-prof{display:block;text-align:center}
.side-prof img{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:50% 26%;display:inline-block}
.side-prof p{margin-top:14px;font-size:12.5px;line-height:2;color:var(--sumi-soft);word-break:auto-phrase;text-align:left}
.side-sns li a{display:block;padding:9px 2px;font-size:13px;letter-spacing:.04em;border-bottom:1px solid var(--line);transition:color .25s ease}
.side-sns li a:hover{color:var(--anzu-deep)}
.post-meta{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.post-meta .cat{font-size:10.5px;font-weight:500;border:1px solid var(--anzu);color:var(--anzu-deep);border-radius:999px;padding:2px 11px;letter-spacing:.12em}
.post-meta time{font-size:12.5px;color:var(--sumi-soft);letter-spacing:.1em}
.lab-post p{font-size:15px;line-height:2.15;margin-top:1.2em;word-break:auto-phrase}
.post-author{margin-top:56px;background:var(--kinari);border-radius:var(--radius);padding:32px 34px;display:flex;gap:24px;align-items:flex-start}
/* WebPの出し分けで <picture> が入っても、写真の大きさと並びが変わらないようにする。
   picture 自身を写真と同じ大きさの箱にして並びの子にする。
   display:contents は使わない（<source> まで並びの子になり、余白が1つ増えるため）。 */
.post-author picture{flex:0 0 88px;display:block;line-height:0}
.post-author img{flex:0 0 88px;width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 16%}
.pa-name{font-size:16px;font-weight:700;letter-spacing:.12em}
.pa-name span{font-size:11px;font-weight:500;color:var(--sumi-soft);margin-left:10px;letter-spacing:.08em}
.pa-bio{margin-top:10px;font-size:13px;line-height:2;color:var(--sumi);word-break:auto-phrase}
.lab-post p:first-child{margin-top:0}

/* ---- 実験室：カテゴリの棚（キャラつき・ページ内リンク） ---- */
.lab-cats li{padding:0}
.lab-cats a{display:flex;align-items:center;gap:16px;padding:20px 8px;transition:background .25s ease}
.lab-cats a:hover{background:var(--kinari)}
.lab-cats img{flex:0 0 30px}
.lab-cats .nm{font-size:16px;font-weight:700;letter-spacing:.14em;flex:0 0 84px}
.lab-cats .desc{font-size:13.5px;color:var(--sumi-soft);letter-spacing:.04em}
.lab-cat{padding:44px 0 8px;scroll-margin-top:90px}
.lab-cat-h{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700;letter-spacing:.14em;margin-bottom:18px}
.lab-empty{font-size:13.5px;color:var(--sumi-soft);letter-spacing:.04em;padding:14px 2px;border-bottom:1px solid var(--line)}
.lab-frame{
  display:inline-block;background:#fff;border:1.5px solid var(--line);border-radius:10px;
  padding:26px 30px 16px;box-shadow:0 10px 26px -18px rgba(58,58,58,.3);
}
.lab-frame img{display:block;margin:0 auto}
.lab-frame .cap{margin-top:12px;font-size:11.5px;letter-spacing:.14em;color:var(--sumi-soft);text-align:center}
.lab-sample h4{font-size:17px;font-weight:700;letter-spacing:.1em;margin-top:14px}

/* ---- 奥付帯（各ページの結び・帆立マークなし） ---- */
.okuzuke{background:var(--kinari);padding:54px 0;text-align:center}
.okuzuke p{font-size:13px;letter-spacing:.16em;color:var(--sumi-soft);word-break:auto-phrase}

/* ---- footer ---- */
.ft{border-top:1px solid var(--line);background:var(--paper);padding:70px 0 40px}
.ft-in{max-width:var(--w);margin:0 auto;padding:0 24px}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.ft-name .nm{font-size:20px;font-weight:700;letter-spacing:.16em}
.ft-name .en{display:block;font-size:10px;letter-spacing:.32em;color:var(--sumi-soft);margin-top:6px}
.ft-name .role{display:block;font-size:11px;letter-spacing:.26em;color:var(--sumi-soft);margin-top:10px}
.ft-name .ht{display:block;width:42px;margin-top:20px}
.ft-ht{position:relative}
.ft-ht .fp{position:absolute;inset:0;width:100%;height:auto;opacity:0;animation:32s linear infinite}
.ft-ht .fp1{position:relative;animation-name:ftpose1}
.ft-ht .fp2{animation-name:ftpose2}
.ft-ht .fp3{animation-name:ftpose3}
.ft-ht .fp4{animation-name:ftpose4}
@keyframes ftpose1{0%,22%{opacity:1}26%,96%{opacity:0}100%{opacity:1}}
@keyframes ftpose2{0%,22%{opacity:0}26%,47%{opacity:1}51%,100%{opacity:0}}
@keyframes ftpose3{0%,47%{opacity:0}51%,72%{opacity:1}76%,100%{opacity:0}}
@keyframes ftpose4{0%,72%{opacity:0}76%,96%{opacity:1}100%{opacity:0}}
.ft-ht.pk{animation:ft-hop .55s cubic-bezier(.3,1.5,.5,1) 1}
@keyframes ft-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-8px) rotate(-4deg)}70%{transform:translateY(0) scaleY(.94)}}
.ft-nav ul{display:flex;flex-wrap:wrap;gap:8px 26px;max-width:520px}
.ft-nav a{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--sumi);padding:4px 0}
.ft-nav a:hover{color:var(--anzu-deep)}
.ft-contact{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);font-size:12.5px;color:var(--sumi-soft);letter-spacing:.04em}
.ft-contact a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--anzu)}
.ft-copy{margin-top:26px;font-size:10.5px;letter-spacing:.18em;color:var(--sumi-soft)}

/* ---- 演出（.j ゲート）：固定ページはリビールのみ ---- */
html.j .rv{opacity:0;transform:translateY(18px)}
html.j .rv.shown{opacity:1;transform:none} /* 絞り込み・検索の操作時はフェード待ちを強制解除（タブで中身が透明のまま繰り上がるバグの対策） */
@media (prefers-reduced-motion:reduce){
  html.j .rv{opacity:1;transform:none}
  .wk-tab.act .tab-ht{animation:none}
  html.j .ph h1::after{animation:none}
  .ft-ht.pk{animation:none}
  .ft-ht .fp{animation:none}
  .ft-ht .fp1{opacity:1}
  html{scroll-behavior:auto}
}

/* ---- responsive ---- */
@media (max-width:1100px){
  .hd-nav{display:none}
  .mn-btn{display:block}
}
@media (max-width:820px){
  .pf-grid{grid-template-columns:1fr;gap:44px}
  .post-author{flex-direction:column;align-items:center;text-align:center;padding:28px 24px}
  .post-author .pa-txt{text-align:left}
  .wk-search{width:100%}
  .wk-searchbox{flex:1 1 100%}
  .lab-grid2{grid-template-columns:1fr;gap:44px}
  .lab-wrap{grid-template-columns:1fr;gap:52px}
  .pf-photo{max-width:320px}
}
@media (max-width:768px){
  body{font-size:15.5px}
  .sec{padding:72px 0}
  .ph{padding:72px 0 56px}
  .wk-row{grid-template-columns:92px 1fr;gap:22px}
  .nw{gap:18px;padding:20px 4px}
  .nw time{flex-basis:74px}
  .sns{padding:72px 0 100px}
  .ft-top{flex-direction:column}
  .info-box{padding:28px 26px}
  .lab-panel{padding:32px 28px}
}

/* 既存投稿・固定ページの本文。新サイトの専用テンプレートには適用しない。 */
.entry p{margin:0 0 1.25em}
.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6{margin:1.8em 0 .75em}
.entry a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--anzu-deep)}
.entry img{height:auto}
.entry > :last-child{margin-bottom:0}