@charset "UTF-8";
/* ============================================================
   corp.css — 当社の魅力 (page-concept.php), よくある質問 (page-faq.php), お知らせ (page-articles.php, index.php,
   single.php). 2026-10-07 代表承認. Same world as 企業情報 / ラウレアハレ (cream ground, Shippori Mincho titles,
   rounded cards, the three office colors). Classes are prefixed "cp-". Loaded after common.css (page kind "corp").
   Motion: assets/js/corp.js. Hidden start states exist only under html.cp-motion (set by corp.js), so without
   JavaScript and with reduced motion everything is shown finished.
   ============================================================ */

/* ===== Tokens (same values as about.css / laulea.css) ===== */
:root{
  --cream:#FBF7F1;--cream-2:#F4ECE1;--paper:#FFFFFF;
  --ink:#2B2420;--ink-2:#5E534B;
  --pink:#C8285A;--pink-ink:#AD1F4C;--pink-soft:#F7E6EA;--pink-light:#F2C6D3;
  --green:#1F4D3A;--green-soft:#E3EEE7;
  --blue:#2E6FB0;--blue-ink:#1F5F99;--blue-soft:#E4EEF8;
  --teal:#1F9E8F;--teal-ink:#0F6B66;--teal-soft:#E0F2EF;
  --amber-ink:#9A4F12;--amber-soft:#F8EBDD;  /* autumn cards: 6.1:1 on white */
  --line:#E6DACB;
  --radius-xl:36px;--radius-lg:28px;--radius:18px;
  --shadow:0 24px 48px -28px rgba(43,36,32,.38);--shadow-sm:0 10px 24px -16px rgba(43,36,32,.35);
  --font-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-sans:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

/* ===== Base (scoped to <main>) ===== */
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);line-height:1.85}
main img{max-width:100%;height:auto;display:block}
main picture{display:contents}
main a{color:var(--pink-ink);text-underline-offset:.2em}
main a:hover{text-decoration-thickness:2px}
main h1,main h2,main h3{font-family:var(--font-serif);font-weight:700;line-height:1.45;margin:0;letter-spacing:.02em}
main p{margin:0 0 1em}
main :focus-visible{outline:3px solid var(--pink-ink);outline-offset:3px;border-radius:6px}
.cp-wrap{width:min(1160px,100%);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.cp-nw{white-space:nowrap}
@media (max-width:420px){.cp-h1__t .cp-nw{white-space:normal}}

/* buttons */
.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.6em;border-radius:999px;border:2px solid transparent;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;line-height:1.3;text-align:center;transition:transform .25s var(--ease-out),background-color .25s,color .25s}
.cp-btn svg{width:18px;height:18px;flex:none}
main a.cp-btn--pink{background:var(--pink);color:#fff;box-shadow:0 12px 24px -12px rgba(200,40,90,.7)}
main a.cp-btn--pink:hover{background:var(--pink-ink);transform:translateY(-2px)}
main a.cp-btn--line{background:var(--paper);color:var(--green);border-color:var(--green)}
main a.cp-btn--line:hover{background:var(--green);color:#fff}

/* section heads */
.cp-sec{padding-block:clamp(64px,9vw,120px)}
.cp-sec--tint{background:var(--cream-2)}
.cp-head{max-width:900px;margin-bottom:clamp(28px,4.4vw,48px)}
.cp-eyebrow{font-family:var(--font-sans);font-size:.8125rem;font-weight:700;letter-spacing:.28em;color:var(--pink-ink);margin:0 0 .6em}
.cp-title{font-size:clamp(1.6rem,3.4vw,2.3rem);text-wrap:balance}
.cp-lead{margin:1em 0 0;color:var(--ink-2);font-size:1.0625rem;max-width:40em}
.cp-note{margin:1.4em 0 0;color:var(--ink-2);font-size:1rem}

/* reveal (hidden only after corp.js set html.cp-motion). The hero entrance (.cp-anim, flowers) is CSS only, under html.js. */
html.cp-motion .cp-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--rd,0s)}
html.cp-motion .cp-reveal.is-in{opacity:1;transform:none}
html.js .cp-anim{opacity:0;transform:translateY(14px);filter:blur(6px);animation:cpShow .8s var(--ease-out) forwards}
html.js .cp-anim:nth-child(2){animation-delay:.12s}
html.js .cp-anim:nth-child(3){animation-delay:.24s}
html.js .cp-anim:nth-child(4){animation-delay:.36s}
@keyframes cpShow{to{opacity:1;transform:none;filter:none}}

/* ===== Breadcrumb ===== */
.cp-crumb{padding-top:var(--gh-h,64px);background:var(--cream);font-size:.9375rem;color:var(--ink-2)}
.cp-crumb ol{width:min(1160px,100%);margin-inline:auto;padding-inline:clamp(20px,5vw,48px);min-height:48px}
.cp-crumb li+li::before{content:"＞";content:"＞"/"";opacity:.7}
.cp-crumb a{color:var(--ink);padding:0 4px;text-decoration:underline}

/* ===== Hero (shared) ===== */
.cp-hero{position:relative;overflow:hidden;background:var(--cream);padding-block:clamp(16px,3vw,40px) clamp(48px,7vw,96px)}
.cp-hero__glow{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(42% 52% at 86% 22%,rgba(242,198,211,.55),rgba(242,198,211,0) 70%),
  radial-gradient(36% 46% at 74% 86%,rgba(46,111,176,.12),rgba(46,111,176,0) 70%),
  radial-gradient(34% 44% at 98% 64%,rgba(31,158,143,.14),rgba(31,158,143,0) 70%)}
.cp-hero .cp-wrap{position:relative}
.cp-h1{font-family:var(--font-sans);line-height:1.5;letter-spacing:.04em}
.cp-h1__k{display:block;font-size:.875rem;font-weight:700;letter-spacing:.28em;color:var(--pink-ink);margin-bottom:.6em}
.cp-h1__t{display:block;font-family:var(--font-serif);font-weight:700;font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.4;color:var(--ink);text-wrap:balance}
.cp-h1__t--big{font-size:clamp(2.4rem,6vw,4.2rem)}
.cp-hero__lead{margin:1.4em 0 0;max-width:38em;font-size:1.0625rem;color:var(--ink)}
.cp-hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin:1.6em 0 0}

/* concept hero: text + facts + flowers */
.cp-hero__in{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,22vw,300px);grid-template-areas:"text fl" "facts facts";gap:clamp(24px,4vw,48px) clamp(24px,4vw,56px);align-items:center}
.cp-hero__text{grid-area:text}
.cp-hero__flowers{grid-area:fl;position:relative;aspect-ratio:1/1}
.cp-hfl{position:absolute;display:block}
.cp-hfl img{width:100%;height:auto;filter:drop-shadow(0 14px 24px rgba(43,36,32,.18))}
.cp-hfl--laulea{left:4%;top:2%;width:56%}
.cp-hfl--izumi{right:0;top:30%;width:42%}
.cp-hfl--seseragi{left:22%;bottom:0;width:44%}
html.js .cp-hfl{animation:cpFl 1.1s cubic-bezier(.3,1.4,.5,1) both}
html.js .cp-hfl--izumi{animation-delay:.15s}
html.js .cp-hfl--seseragi{animation-delay:.3s}
@keyframes cpFl{from{opacity:0;transform:scale(.3) rotate(-90deg)}to{opacity:1;transform:none}}
.cp-facts{grid-area:facts;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cp-facts li{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px 20px;display:grid;gap:2px}
.cp-facts__k{font-size:.875rem;font-weight:700;letter-spacing:.14em;color:var(--pink-ink)}
.cp-facts__v{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.4}
@media (max-width:899px){
  .cp-hero__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"fl" "text" "facts"}
  .cp-hero__flowers{aspect-ratio:auto;display:flex;gap:10px}
  .cp-hfl{position:static;width:clamp(48px,12vw,64px)!important}
  .cp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== 当社の魅力: floor guide ===== */
.cp-floors__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.62fr);gap:clamp(24px,4vw,56px);align-items:start}
.cp-floors__fig{margin:0;position:sticky;top:calc(var(--gh-h,64px) + 24px);background:var(--paper);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:clamp(14px,2.4vw,28px)}
.cp-floors__svg{display:block;width:100%;height:auto;overflow:visible}
.cp-floors__cap{margin-top:10px;font-size:.9375rem;color:var(--ink-2)}
.cp-slab-top{fill:#F3ECE2;stroke:#D9CDBE;stroke-width:1}
.cp-slab-front{fill:#D5C7B4}
.cp-z{fill:#FFFFFF;stroke:#D9CDBE;stroke-width:1;transition:fill .5s var(--ease-out),opacity .5s}
.cp-z--kitchen{fill:#FBEFE3}
.cp-z--day{fill:var(--teal-soft)}
.cp-z--hall{fill:var(--pink-soft)}
.cp-z--bath{fill:var(--blue-soft)}
.cp-z--entrance{fill:#FFF8E8}
.cp-z--office,.cp-z--reception{fill:#F4F0EA}
.cp-z--ev,.cp-z--other{fill:#ECE7E0}
.cp-lb{font-family:var(--font-sans);font-size:21px;font-weight:700;fill:var(--ink-2);text-anchor:middle;pointer-events:none}
.cp-lb--s{font-size:16px}
.cp-fl__name{font-family:var(--font-serif);font-weight:700;font-size:26px;fill:var(--ink)}
.cp-shaft{stroke:#BCAE9C;stroke-width:2;stroke-dasharray:4 5}
.cp-door path{fill:none;stroke:var(--pink);stroke-width:3;stroke-linecap:round}
.cp-door text{font-family:var(--font-sans);font-size:18px;font-weight:700;fill:var(--pink-ink)}
.cp-walker{opacity:0;pointer-events:none;transition:transform .9s cubic-bezier(.5,0,.2,1),opacity .4s}
.cp-walker circle{fill:var(--ink);stroke:#fff;stroke-width:4}
.cp-walker .cp-walker__ring{fill:none;stroke:var(--ink);stroke-width:2;transform-origin:center;transform-box:fill-box;animation:cpPulse 1.8s ease-out 3} /* 3 pulses per stop (stops within 6s) */
@keyframes cpPulse{from{transform:scale(1);opacity:.8}to{transform:scale(2.6);opacity:0}}
/* lit state (corp.js sets data-on on the figure and .is-on on the zones / labels) */
.cp-floors__fig[data-on] .cp-z{opacity:.55}
.cp-floors__fig[data-on] .cp-z.is-on{opacity:1;fill:var(--pink-light);stroke:var(--pink);stroke-width:2.5}
.cp-floors__fig[data-on] .cp-z--day.is-on{fill:#BFE6DF;stroke:var(--teal)}
.cp-floors__fig[data-on] .cp-z--bath.is-on{fill:#C9DCF2;stroke:var(--blue)}
.cp-floors__fig[data-on] .cp-lb.is-on{fill:var(--ink)}
.cp-floors__fig[data-on] .cp-walker{opacity:1}
/* clickable zones (corp.js adds .is-link to the zones that have a step) */
.cp-z.is-link{cursor:pointer}
.cp-z.is-link:hover{stroke:var(--pink-ink);stroke-width:2.5;opacity:1}
/* buttons under the diagram: the same places, for keyboard and touch */
.cp-floors__chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cp-fchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border-radius:999px;background:var(--cream);border:2px solid var(--line);color:var(--ink);font-weight:700;font-size:.9375rem;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
main a.cp-fchip{color:var(--ink)}
.cp-fchip:hover{border-color:var(--pink)}
.cp-fchip__n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pink);color:#fff;font-size:.875rem}
.cp-fchip[aria-current="true"]{background:var(--ink);border-color:var(--ink)}
main a.cp-fchip[aria-current="true"]{color:#fff}
.cp-fchip[aria-current="true"] .cp-fchip__n{background:#fff;color:var(--ink)}

.cp-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3vw,32px)}
.cp-step{scroll-margin-top:8px;background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;border:2px solid transparent;transition:border-color .4s,box-shadow .4s}
.cp-step.is-on{border-color:var(--pink);box-shadow:var(--shadow)}
.cp-step__ph{margin:0}
.cp-step__ph img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cp-step__text{padding:18px 22px 22px}
.cp-step__no{display:flex;align-items:center;gap:10px;margin:0 0 .4em}
.cp-step__n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;font-weight:700;font-size:1rem}
.cp-step__fl{font-size:.9375rem;font-weight:700;color:var(--ink-2);letter-spacing:.08em}
.cp-step__h{font-size:1.35rem;margin-bottom:.3em}
main .cp-step__p{margin:0}
@media (min-width:900px){
  /* the steps are tall so the sticky diagram changes while reading */
  .cp-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center}
  .cp-step:last-child{margin-bottom:12vh}
}
@media (max-width:899px){
  .cp-floors__grid{grid-template-columns:minmax(0,1fr)}
  .cp-floors__fig{top:calc(var(--gh-h,64px) + 8px);z-index:2;padding:10px 12px;border-radius:var(--radius)}
  .cp-floors__cap{display:none}
  .cp-floors__chips{flex-wrap:nowrap;overflow-x:auto;margin-top:6px;padding-bottom:2px;scrollbar-width:none}
  .cp-floors__chips::-webkit-scrollbar{display:none}
  .cp-floors__chips li{flex:none}
  .cp-step__ph img{aspect-ratio:2/1}
}

/* ===== 当社の魅力: roles ===== */
.cp-roles__line{display:block;width:100%;height:56px;margin-bottom:-8px}
.cp-roles__line path{stroke:#E59BB2}
.cp-roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.cp-role{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--radius-xl);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow);border-top:6px solid var(--pink)}
.cp-role--blue{border-top-color:var(--blue)}
.cp-role--teal{border-top-color:var(--teal)}
.cp-role__fl{width:64px;height:64px;object-fit:contain;margin-bottom:10px;transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
.cp-role:hover .cp-role__fl,.cp-role:focus-within .cp-role__fl{transform:rotate(24deg) scale(1.06)}
main .cp-role__kind{margin:0;font-size:.9375rem;color:var(--ink-2);font-weight:700}
.cp-role__name{font-size:1.8rem;color:var(--pink-ink)}
.cp-role--blue .cp-role__name{color:var(--blue-ink)}
.cp-role--teal .cp-role__name{color:var(--teal-ink)}
main .cp-role__when{display:inline-block;align-self:flex-start;margin:.5em 0 1em;padding:2px 14px;border-radius:999px;background:var(--pink-soft);color:var(--pink-ink);font-weight:700;font-size:.9375rem}
.cp-role--blue .cp-role__when{background:var(--blue-soft);color:var(--blue-ink)}
.cp-role--teal .cp-role__when{background:var(--teal-soft);color:var(--teal-ink)}
.cp-role__list{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:8px}
.cp-role__list li{position:relative;padding-left:1.4em;line-height:1.6}
.cp-role__list li::before{content:"";position:absolute;left:0;top:.45em;width:.8em;height:.8em;border-radius:50%;background:var(--pink-light)}
.cp-role--blue .cp-role__list li::before{background:#B9D2EC}
.cp-role--teal .cp-role__list li::before{background:#A9DCD4}
main .cp-role__more{margin:auto 0 0}
.cp-role__more a{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:700}
.cp-role--blue .cp-role__more a{color:var(--blue-ink)}
.cp-role--teal .cp-role__more a{color:var(--teal-ink)}
.cp-role__more svg{width:16px;height:16px}
@media (max-width:899px){.cp-roles{grid-template-columns:minmax(0,1fr)}.cp-roles__line{display:none}}
html.cp-motion .cp-roles__line path{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.6s var(--ease-out)}
html.cp-motion .cp-roles__line.is-in path{stroke-dashoffset:0}

/* ===== 当社の魅力: numbers ===== */
.cp-nums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,20px)}
.cp-num{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(18px,2.6vw,30px)}
main .cp-num__v{margin:0;font-family:var(--font-serif);font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1.1;color:var(--pink-ink)}
.cp-num__v small{font-family:var(--font-sans);font-size:1.0625rem;margin-left:.15em;color:var(--ink)}
.cp-num:nth-child(3n+2) .cp-num__v{color:var(--blue-ink)}
.cp-num:nth-child(3n) .cp-num__v{color:var(--teal-ink)}
main .cp-num__l{margin:.3em 0 0;font-weight:700;font-size:1.0625rem}
main .cp-num__s{margin:0;color:var(--ink-2);font-size:.9375rem}
@media (max-width:767px){.cp-nums{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== 当社の魅力: work ===== */
.cp-work{background:var(--pink-soft);padding-block:clamp(56px,8vw,96px)}
.cp-work__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
main .cp-work__count{margin:1em 0;font-weight:700;display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
.cp-work__num{font-family:var(--font-serif);font-size:clamp(2.6rem,5vw,3.4rem);line-height:1;color:var(--pink-ink)}
.cp-work__num small{font-family:var(--font-sans);font-size:1.0625rem;margin-left:.15em;color:var(--ink)}
.cp-work__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cp-work__list li{background:var(--paper);border-radius:var(--radius);padding:18px 22px;display:grid;gap:4px;box-shadow:var(--shadow-sm)}
.cp-work__list b{font-family:var(--font-serif);font-size:1.2rem;color:var(--pink-ink)}
.cp-work__list span{color:var(--ink);font-size:1rem;line-height:1.75}
@media (max-width:899px){.cp-work__in{grid-template-columns:minmax(0,1fr)}}

/* ===== 当社の魅力: creed ===== */
.cp-creed{padding-block:clamp(72px,11vw,140px);text-align:center;background:
  radial-gradient(40% 70% at 20% 30%,rgba(242,198,211,.45),rgba(242,198,211,0) 70%),
  radial-gradient(40% 70% at 80% 70%,rgba(31,158,143,.12),rgba(31,158,143,0) 70%),var(--cream)}
.cp-creed__label{display:inline-flex;align-items:center;min-height:36px;padding:.2em 1.1em;border-radius:999px;background:var(--pink-soft);color:var(--pink-ink);font-family:var(--font-sans);font-size:1rem;letter-spacing:.16em}
main .cp-creed__q{margin:.8em 0 .8em;font-family:var(--font-serif);font-weight:700;font-size:clamp(1.7rem,4.4vw,3.2rem);line-height:1.6;letter-spacing:.04em;text-wrap:balance}
.cp-creed__more a{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:700}
.cp-creed__more svg{width:16px;height:16px}

/* ===== CTA (shared) ===== */
.cp-cta{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(48px,7vw,80px)}
.cp-cta__in{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:clamp(16px,3vw,40px);align-items:center}
.cp-cta .cp-title{font-size:clamp(1.4rem,2.6vw,1.9rem)}
main .cp-cta p{margin:.4em 0 0}
main .cp-cta__tel{margin:0;display:grid}
.cp-cta__tel a{display:inline-flex;align-items:center;min-height:52px;font-family:var(--font-serif);font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);color:var(--ink);text-decoration:none;white-space:nowrap}
.cp-cta__tel a:hover{text-decoration:underline}
.cp-cta__tel small{color:var(--ink-2);font-size:.9375rem}
main .cp-cta__btn{margin:0}
@media (max-width:899px){.cp-cta__in{grid-template-columns:minmax(0,1fr)}}

/* ===== よくある質問 ===== */
.cp-hero--faq{padding-bottom:clamp(32px,5vw,56px)}
.cp-faq-tools{margin-top:clamp(20px,3vw,32px);display:grid;gap:12px;max-width:760px}
.cp-search__label{display:block;font-weight:700;margin-bottom:6px}
.cp-search__box{position:relative}
.cp-search__box svg{position:absolute;left:18px;top:50%;width:22px;height:22px;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.cp-search input{width:100%;min-height:58px;padding:10px 18px 10px 52px;font:inherit;font-size:1.125rem;color:var(--ink);background:var(--paper);border:2px solid #B9AD9E;border-radius:999px;box-shadow:var(--shadow-sm);-webkit-appearance:none;appearance:none}
.cp-search input:focus-visible{outline:3px solid var(--pink-ink);outline-offset:2px;border-color:var(--pink-ink)}
main .cp-faq-count{margin:0;color:var(--ink-2);font-weight:700}
.cp-chips ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cp-hero--news .cp-chips{margin-top:clamp(20px,3vw,28px)}
.cp-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--paper);border:2px solid var(--line);color:var(--ink);font-weight:700;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
main a.cp-chip{color:var(--ink)}
.cp-chip:hover{border-color:var(--pink)}
.cp-chip[aria-current="page"],.cp-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
main a.cp-chip[aria-current="page"],main a.cp-chip.is-on{color:#fff}
.cp-chip__n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--cream-2);font-size:.8125rem;color:var(--ink)}
.cp-chip.is-on .cp-chip__n{background:#fff}
.cp-faq{padding-top:clamp(24px,4vw,48px)}
.cp-faq-group{scroll-margin-top:8px}
.cp-faq-group+.cp-faq-group{margin-top:clamp(40px,6vw,72px)}
.cp-faq-group__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--pink-light)}
.cp-faq-group__head .cp-eyebrow{margin:0;order:2}
.cp-faq-group--blue .cp-faq-group__head{border-color:#B9D2EC}
.cp-faq-group--blue .cp-eyebrow{color:var(--blue-ink)}
.cp-faq-group--teal .cp-faq-group__head{border-color:#A9DCD4}
.cp-faq-group--teal .cp-eyebrow{color:var(--teal-ink)}
.cp-faq-group--green .cp-faq-group__head{border-color:#BCD5C7}
.cp-faq-group--green .cp-eyebrow{color:var(--green)}
.cp-faq-list{display:grid;gap:10px}
.cp-qa{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-sm);scroll-margin-top:8px;border:2px solid transparent;transition:border-color .3s}
.cp-qa[open]{border-color:var(--pink-light)}
.cp-qa summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 18px;cursor:pointer;font-weight:700;font-size:1.0625rem;line-height:1.6;border-radius:var(--radius)}
.cp-qa summary::-webkit-details-marker{display:none}
.cp-qa summary:focus-visible{outline-offset:-3px}
.cp-qa__q{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pink);color:#fff;font-family:var(--font-serif);font-size:1.0625rem}
.cp-faq-group--blue .cp-qa__q{background:var(--blue)}
.cp-faq-group--teal .cp-qa__q{background:var(--teal-ink)}
.cp-faq-group--green .cp-qa__q{background:var(--green)}
.cp-qa__text{flex:1}
.cp-qa__icon{flex:none;position:relative;width:28px;height:28px;border-radius:50%;background:var(--cream-2)}
.cp-qa__icon::before,.cp-qa__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease-out)}
.cp-qa__icon::after{transform:rotate(90deg)}
.cp-qa[open] .cp-qa__icon::after{transform:rotate(0)}
.cp-qa__a{padding:0 22px 20px 68px;color:var(--ink)}
main .cp-qa__a p{max-width:42em}
.cp-qa__a mark,.cp-qa summary mark{background:#FDE7A6;color:inherit;border-radius:3px;padding:0 1px}
main .cp-qa__more{margin:0}
.cp-qa__more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
@media (max-width:599px){.cp-qa summary{padding:12px 14px;gap:10px;font-size:1rem}.cp-qa__a{padding:0 16px 18px}}
.cp-qa.is-hit{border-color:#F3D27A}
/* medical care, rebuilt from faq.png: color + mark + words */
.cp-med{display:grid;gap:10px;margin:4px 0 8px}
.cp-med__row{border-radius:14px;padding:12px 14px;background:#EEF7F3;border-left:6px solid var(--teal-ink)}
.cp-med__row--judge{background:#FFF6E5;border-left-color:#B07A12}
.cp-med__row--no{background:#F8ECEC;border-left-color:#A33A3A}
main .cp-med__head{margin:0 0 6px;font-weight:700;display:flex;align-items:center;gap:8px}
.cp-med__mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;font-size:1rem;color:var(--teal-ink);border:2px solid currentColor}
.cp-med__row--judge .cp-med__mark{color:#8A5D08}
.cp-med__row--no .cp-med__mark{color:#9A2F2F}
.cp-med__items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cp-med__items li{background:#fff;border-radius:999px;padding:2px 12px;font-size:.9375rem;font-weight:700}
.cp-faq-none{margin-top:24px;background:var(--paper);border-radius:var(--radius-lg);padding:24px;text-align:center;box-shadow:var(--shadow-sm)}
main .cp-faq-none__h{font-weight:700;font-size:1.125rem;margin-bottom:.4em}
.cp-faq-group[hidden],.cp-qa[hidden]{display:none}

/* ===== お知らせ: list ===== */
.cp-news{padding-top:clamp(16px,3vw,40px)}
.cp-tag{display:inline-flex;align-items:center;padding:1px 12px;border-radius:999px;background:var(--pink-soft);color:var(--pink-ink);font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.cp-tag--tayori{background:var(--teal-soft);color:var(--teal-ink)}
main a.cp-tag{min-height:44px;padding:0 16px;font-size:.875rem}
.cp-feature{margin-bottom:clamp(20px,3vw,32px)}
.cp-feature__link{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;background:var(--paper);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:clamp(24px,4vw,52px);text-decoration:none;color:var(--ink);transition:transform .35s var(--ease-out),box-shadow .35s}
main a.cp-feature__link{color:var(--ink)}
.cp-feature__link:hover{transform:translateY(-4px);box-shadow:0 32px 60px -30px rgba(43,36,32,.5)}
.cp-feature__date{display:grid;justify-items:center;width:clamp(120px,16vw,200px);aspect-ratio:1;border-radius:50%;align-content:center;background:var(--season-soft,var(--pink-soft));color:var(--season-ink,var(--pink-ink))}
.cp-feature__y{font-weight:700;letter-spacing:.2em;font-size:clamp(.875rem,1.4vw,1.0625rem)}
.cp-feature__m{font-family:var(--font-serif);font-weight:700;font-size:clamp(3.4rem,7vw,5.6rem);line-height:1}
.cp-feature__m small{font-size:.32em;margin-left:.1em}
.cp-feature__body{display:grid;gap:10px;justify-items:start}
.cp-feature__new{font-size:.8125rem;font-weight:700;letter-spacing:.2em;color:var(--ink-2)}
.cp-feature__title{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.45;text-wrap:balance}
.cp-feature__time{font-size:.9375rem;color:var(--ink-2)}
.cp-feature__ex{color:var(--ink);max-width:40em}
.cp-feature__more{font-weight:700;color:var(--pink-ink);text-decoration:underline;text-underline-offset:.2em}
@media (max-width:767px){.cp-feature__link{grid-template-columns:minmax(0,1fr)}.cp-feature__date{width:112px}}
.cp-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:clamp(14px,2vw,22px)}
.cp-card__link{display:flex;flex-direction:column;gap:10px;height:100%;background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 24px 26px;text-decoration:none;color:var(--ink);border-top:6px solid var(--season-line,var(--pink-light));transition:transform .3s var(--ease-out),box-shadow .3s}
main a.cp-card__link{color:var(--ink)}
.cp-card__link:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cp-card__link:hover .cp-card__title{text-decoration:underline;text-underline-offset:.2em}
.cp-card__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.cp-card__date{font-size:.9375rem;color:var(--ink-2);font-weight:700}
.cp-card__title{font-family:var(--font-serif);font-weight:700;font-size:1.3rem;line-height:1.5}
.cp-card__ex{font-size:.9375rem;color:var(--ink-2);line-height:1.75}
.cp-season--spring{--season-soft:var(--pink-soft);--season-ink:var(--pink-ink);--season-line:var(--pink-light)}
.cp-season--summer{--season-soft:var(--blue-soft);--season-ink:var(--blue-ink);--season-line:#9DC0E6}
.cp-season--autumn{--season-soft:var(--amber-soft);--season-ink:var(--amber-ink);--season-line:#E5BE95}
.cp-season--winter{--season-soft:var(--teal-soft);--season-ink:var(--teal-ink);--season-line:#93D0C6}
.cp-pager{margin-top:clamp(28px,4vw,48px)}
.cp-pager ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cp-pager a,.cp-pager span{display:inline-grid;place-items:center;min-width:48px;min-height:48px;padding:0 14px;border-radius:999px;background:var(--paper);border:2px solid var(--line);font-weight:700;color:var(--ink);text-decoration:none}
.cp-pager .current{background:var(--ink);border-color:var(--ink);color:#fff}
.cp-pager .dots{border:0;background:none}
.cp-years{margin:clamp(28px,4vw,48px) auto 0;max-width:760px;background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.cp-years summary{display:flex;align-items:center;min-height:56px;padding:0 22px;font-weight:700;cursor:pointer}
.cp-years ul{list-style:none;margin:0;padding:0 16px 16px;display:flex;flex-wrap:wrap;gap:8px}
.cp-years a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--cream-2);color:var(--ink);font-weight:700;text-decoration:none}
.cp-years a span{font-size:.8125rem;color:var(--ink-2)}
.cp-empty{max-width:760px;margin:0 auto;background:var(--paper);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:clamp(28px,5vw,48px);text-align:center}
main .cp-empty__h{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.6rem);margin-bottom:.5em}
.cp-empty__links{list-style:none;margin:1.2em 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cp-empty__links a{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--green);color:var(--green);font-weight:700;text-decoration:none}
.cp-empty__links a:hover{background:var(--green);color:#fff}

/* ===== お知らせ: article ===== */
.cp-article__head{position:relative;overflow:hidden;background:var(--cream);padding-block:clamp(16px,3vw,40px) clamp(32px,5vw,56px)}
.cp-article__headin{position:relative;max-width:900px}
main .cp-article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 1em;color:var(--ink-2);font-weight:700}
.cp-article__title{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.45;text-wrap:balance}
.cp-article__wrap{max-width:900px;padding-bottom:clamp(56px,8vw,96px)}
main .cp-article__old{margin:0 0 24px;padding:12px 18px;border-radius:14px;background:var(--cream-2);color:var(--ink-2);font-size:.9375rem}
.cp-toc{margin:0 0 32px;background:var(--paper);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-sm);border-left:6px solid var(--season-line,var(--pink-light))}
main .cp-toc__t{margin:0 0 .4em;font-weight:700}
.cp-toc ol{margin:0;padding-left:1.4em}
.cp-toc a{display:inline-flex;align-items:center;min-height:44px}
.cp-prose{background:var(--paper);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:clamp(24px,5vw,56px)}
.cp-prose>*{max-width:35em}
.cp-prose p{font-size:1.125rem;line-height:2;margin:0 0 1.3em}
.cp-prose h2{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:1.8em 0 .8em;padding-left:.8em;border-left:5px solid var(--season-line,var(--pink-light));scroll-margin-top:8px}
.cp-prose h2:first-child{margin-top:0}
.cp-prose ul,.cp-prose ol{font-size:1.0625rem;margin:0 0 1.4em;padding-left:1.4em;line-height:1.9}
.cp-prose img{border-radius:var(--radius)}
.cp-prose p:last-child{margin-bottom:0}
.cp-prose .cp-sig{text-align:right;color:var(--ink-2)}
main .cp-article__src{margin:14px 0 0;font-size:.9375rem;color:var(--ink-2)}
.cp-pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(32px,5vw,48px)}
.cp-pn__a{display:grid;gap:4px;background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:18px 22px;text-decoration:none;color:var(--ink);min-height:44px;transition:transform .3s var(--ease-out)}
main a.cp-pn__a{color:var(--ink)}
.cp-pn__a:hover{transform:translateY(-3px)}
.cp-pn__a--next{grid-column:2;text-align:right}
.cp-pn__k{font-size:.875rem;font-weight:700;color:var(--pink-ink)}
.cp-pn__t{font-family:var(--font-serif);font-weight:700;font-size:1.125rem;line-height:1.5}
.cp-pn__d{font-size:.875rem;color:var(--ink-2)}
@media (max-width:599px){.cp-pn{grid-template-columns:minmax(0,1fr)}.cp-pn__a--next{grid-column:auto;text-align:left}}
main .cp-article__back{margin:clamp(28px,4vw,40px) 0 0;text-align:center}

/* ===== Reduced motion: stop everything, show everything ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.cp-motion .cp-reveal,html.js .cp-anim{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}
  html.js .cp-hfl{animation:none!important}
  html.cp-motion .cp-roles__line path{stroke-dashoffset:0!important;transition:none!important}
  .cp-walker,.cp-z,.cp-fchip,.cp-step,.cp-btn,.cp-role__fl,.cp-card__link,.cp-feature__link,.cp-pn__a,.cp-qa__icon::before,.cp-qa__icon::after{transition:none!important}
  .cp-walker .cp-walker__ring{animation:none!important;opacity:0}
  main a.cp-btn--pink:hover,.cp-card__link:hover,.cp-feature__link:hover,.cp-pn__a:hover{transform:none}
  .cp-role:hover .cp-role__fl,.cp-role:focus-within .cp-role__fl{transform:none}
}

/* ===== お知らせ: the bookshelf of しあわせたより (2026-10-07 代表選択). CSS only (no images). ===== */
.cp-news--latest{padding-bottom:clamp(24px,4vw,48px)}
main .cp-news__none{margin:0;background:var(--paper);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-sm)}
main .cp-more{margin:18px 0 0}
.cp-more a,.cp-shelf-alt a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.cp-shelf-sec{padding-top:clamp(40px,6vw,72px)}
main .cp-shelf-alt{margin-top:-40px;padding-bottom:clamp(56px,8vw,96px)}
.cp-tag--news{background:var(--pink-soft);color:var(--pink-ink)}

/* the cabinet: dark wood back, books standing on a plank */
.cp-shelf{position:relative;border-radius:14px;padding:28px clamp(16px,3vw,36px) 0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.04) 2px 7px),
    linear-gradient(90deg,#3A2416,#4B2F1C 30%,#432918 70%,#36210F);
  box-shadow:inset 0 0 0 10px #5A3820,inset 0 0 0 12px #2A190C,0 30px 50px -30px rgba(43,36,32,.6)}
.cp-shelf__row{display:flex;align-items:flex-end;gap:5px;min-height:360px;padding:0 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cp-shelf__plank{height:22px;margin:0 -6px;border-radius:3px;
  background:linear-gradient(180deg,#8A5A33,#6E4426 40%,#5A361D 41%,#4A2C17);box-shadow:0 10px 18px -8px rgba(0,0,0,.6)}
.cp-shelf__end{flex:none;align-self:flex-end;margin-left:auto;padding:0 6px 4px;opacity:.95}
.cp-shelf__hint{display:none}
.cp-shelf__end img{width:56px;height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}

/* a book spine: leather, gold bands, title written top to bottom */
.cp-book{--skin:#6B1E2A;--skin-hi:#8A2F3D;--gold:#E2C47E;
  position:relative;flex:none;width:var(--bw,56px);height:var(--bh,240px);margin:0;padding:18px 0;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  border-radius:5px 5px 2px 2px;color:var(--gold);font:inherit;
  background:
    radial-gradient(120% 60% at 30% 10%,rgba(255,255,255,.18),rgba(255,255,255,0) 60%),
    radial-gradient(90% 40% at 70% 95%,rgba(0,0,0,.35),rgba(0,0,0,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 18%,rgba(255,255,255,.12) 45%,rgba(0,0,0,0) 70%,rgba(0,0,0,.5)),
    linear-gradient(180deg,var(--skin-hi),var(--skin));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.12),2px 0 3px rgba(0,0,0,.35);
  transform-origin:50% 100%;transition:transform .35s var(--ease-out),box-shadow .35s}
.cp-book--navy{--skin:#1F2F4D;--skin-hi:#2E4470}
.cp-book--forest{--skin:#23402F;--skin-hi:#335C44}
.cp-book--brown{--skin:#5A3A22;--skin-hi:#68452A}
.cp-book--plum{--skin:#4A2440;--skin-hi:#683459}
.cp-book--ochre{--skin:#553A10;--skin-hi:#664817}
.cp-book--teal{--skin:#1F4A4A;--skin-hi:#285757}
.cp-book--slate{--skin:#3A3F48;--skin-hi:#474D58}
.cp-book:hover,.cp-book:focus-visible{transform:translateY(-14px) rotate(-1.2deg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 16px 18px -10px rgba(0,0,0,.7)}
.cp-book:focus-visible{outline:3px solid #FFE08A;outline-offset:3px}
.cp-book__band{display:block;width:100%;height:12px;border-block:2px solid var(--gold);opacity:.85;
  background:repeating-linear-gradient(90deg,rgba(226,196,126,.25) 0 2px,transparent 2px 6px)}
.cp-book__title{writing-mode:vertical-rl;white-space:nowrap;display:flex;align-items:center;gap:12px;font-family:var(--font-serif);font-weight:700;letter-spacing:.14em;
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(255,240,200,.25)}
.cp-book__name{font-size:1rem}
.cp-book__year{font-size:1.125rem;padding:8px 0;border-block:1px solid rgba(226,196,126,.6)}
.cp-book.is-out{transform:translateY(-40px) scale(1.04);transition:transform .3s var(--ease-out)}

/* the open book (one <dialog> per year). Without JavaScript the dialogs show as plain lists. */
html:not(.js) .cp-tome{display:block;position:static;margin:24px 0 0;border:0;padding:0;background:none;max-width:none;width:auto}
html:not(.js) .cp-tome__left,html:not(.js) .cp-tome__cover,html:not(.js) .cp-tome__sheet,html:not(.js) .cp-tome__close{display:none}
.cp-tome{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:hidden;color:#3B2A1A}
.cp-tome::backdrop{background:rgba(20,12,6,.72);backdrop-filter:blur(3px)}
.cp-tome[open]{display:grid;place-items:center}
.cp-tome__book{--skin:#6B1E2A;position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(960px,92vw);height:min(620px,82vh);perspective:2400px;
  transform:translateX(-25%);transition:transform .9s cubic-bezier(.5,0,.2,1)}
.cp-tome--navy .cp-tome__book{--skin:#1F2F4D}.cp-tome--forest .cp-tome__book{--skin:#23402F}.cp-tome--brown .cp-tome__book{--skin:#5A3A22}
.cp-tome--plum .cp-tome__book{--skin:#4A2440}.cp-tome--ochre .cp-tome__book{--skin:#553A10}.cp-tome--teal .cp-tome__book{--skin:#1F4A4A}.cp-tome--slate .cp-tome__book{--skin:#3A3F48}
.cp-tome.is-open .cp-tome__book{transform:none}
/* paper: aged, darker at the edges and the fold */
.cp-tome__left,.cp-tome__right{position:relative;padding:clamp(24px,4vw,48px);overflow:auto;
  background:
    radial-gradient(130% 100% at 50% 50%,rgba(255,250,235,0) 60%,rgba(120,80,30,.22)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .1  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"),
    #F3E7CF;
  box-shadow:inset 0 0 0 1px rgba(110,80,40,.25)}
.cp-tome__left{border-radius:10px 0 0 10px;background-color:#F1E3C8;box-shadow:inset -26px 0 30px -24px rgba(80,50,20,.55),inset 0 0 0 1px rgba(110,80,40,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;transition:opacity .4s .55s;z-index:4} /* above the opened cover */
.cp-tome__right{border-radius:0 10px 10px 0;box-shadow:inset 26px 0 30px -24px rgba(80,50,20,.55),inset 0 0 0 1px rgba(110,80,40,.25)}
.cp-tome.is-open .cp-tome__left{opacity:1}
/* leather edge around the pages */
.cp-tome__book::before{content:"";position:absolute;inset:-12px;border-radius:16px;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.25)),var(--skin);
  box-shadow:0 40px 60px -20px rgba(0,0,0,.7);clip-path:inset(0 0 0 50%);transition:clip-path .9s cubic-bezier(.5,0,.2,1)}
.cp-tome.is-open .cp-tome__book::before{clip-path:inset(0 0 0 0)}
main .cp-tome p,.cp-tome p{margin:0}
.cp-tome__kicker{font-family:var(--font-serif);font-weight:700;letter-spacing:.3em;font-size:1.0625rem;color:#7A5530}
.cp-tome__big{font-family:var(--font-serif);font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:.12em;color:#4A3018;margin:.3em 0}
.cp-tome__sub{font-size:.9375rem;color:#6A4E33;letter-spacing:.1em}
.cp-tome__orn{font-size:1.8rem;color:#9A7448;margin-top:1em}
.cp-tome__h{font-family:var(--font-serif);font-size:1.4rem;color:#3B2A1A;text-align:center;letter-spacing:.2em;margin-bottom:.8em;padding-bottom:.5em;border-bottom:1px solid rgba(110,80,40,.35)}
.cp-toc2{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cp-toc2 a{display:flex;align-items:baseline;gap:10px;min-height:48px;padding:8px 6px;color:#3B2A1A;text-decoration:none;border-radius:6px;font-family:var(--font-serif);font-weight:700;font-size:1.0625rem;line-height:1.5}
.cp-tome .cp-toc2 a{color:#3B2A1A}
.cp-toc2 a:hover,.cp-toc2 a:focus-visible{background:rgba(160,110,50,.14)}
.cp-toc2 a:focus-visible{outline:3px solid #8A5A20;outline-offset:0}
.cp-toc2__m{flex:none;min-width:2.6em;color:#7A5530}
.cp-toc2__dots{flex:1;min-width:16px;border-bottom:2px dotted rgba(110,80,40,.45);transform:translateY(-5px)}
.cp-toc2__t{flex:0 1 auto;max-width:72%;text-align:right}
/* the cover: closed over the right page, swings open to the left */
.cp-tome__cover{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.6,0,.2,1);z-index:3;pointer-events:none}
.cp-tome.is-open .cp-tome__cover{transform:rotateY(-180deg)}
.cp-tome__front,.cp-tome__inside{position:absolute;inset:-12px -12px -12px 0;border-radius:0 14px 14px 0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cp-tome__front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#E2C47E;
  background:
    radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--skin);
  box-shadow:inset 0 0 0 10px rgba(0,0,0,.18),inset 0 0 0 12px rgba(226,196,126,.6),inset 0 0 0 16px rgba(0,0,0,.12)}
.cp-tome__ftitle{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:.3em;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.cp-tome__fyear{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:.3em;padding:6px 18px;border-block:1px solid rgba(226,196,126,.7)}
.cp-tome__inside{transform:rotateY(180deg);border-radius:14px 0 0 14px;inset:-12px 0 -12px -12px;background:#E9D7B4;box-shadow:inset 0 0 0 1px rgba(110,80,40,.3)}
/* the page that turns when a title is chosen */
.cp-tome__sheet{position:absolute;inset:0;transform-origin:0 50%;background:#F3E7CF;border-radius:0 10px 10px 0;opacity:0;pointer-events:none;
  box-shadow:inset 26px 0 30px -24px rgba(80,50,20,.55)}
.cp-tome.is-turning .cp-tome__sheet{opacity:1;animation:cpTurn .7s cubic-bezier(.5,0,.3,1) forwards}
@keyframes cpTurn{0%{transform:perspective(2000px) rotateY(0)}100%{transform:perspective(2000px) rotateY(-178deg);box-shadow:inset -26px 0 30px -24px rgba(80,50,20,.55)}}
.cp-tome__close{position:fixed;top:max(16px,env(safe-area-inset-top));right:16px;margin:0;z-index:5}
.cp-tome__close button{min-height:48px;padding:0 20px;border-radius:999px;border:2px solid #E2C47E;background:rgba(30,18,8,.85);color:#F6E7C1;font:inherit;font-weight:700;cursor:pointer}
.cp-tome__close button:focus-visible{outline:3px solid #FFE08A;outline-offset:3px}
@media (max-width:767px){
  .cp-shelf__row{min-height:290px}
  main .cp-shelf__hint{display:block;margin:10px 0 0;font-size:.9375rem;color:var(--ink-2)}
  .cp-shelf__hint::after{content:" →"}
  .cp-book{height:calc(var(--bh,292px) - 64px);width:calc(var(--bw,62px) - 8px)}
  .cp-book__name{font-size:.875rem}
  .cp-book__year{font-size:1rem}
  .cp-tome__book{grid-template-columns:1fr;width:min(520px,94vw);height:min(640px,80vh);transform:none}
  .cp-tome__left{display:none}
  .cp-tome__right{border-radius:10px}
  .cp-tome__cover{left:0;width:100%;transition:transform 1s cubic-bezier(.6,0,.2,1),opacity .2s .9s}
  .cp-tome.is-open .cp-tome__cover{opacity:0}
  .cp-tome__book::before{clip-path:none}
  .cp-toc2__t{max-width:80%}
}
@media (prefers-reduced-motion: reduce){
  .cp-book,.cp-tome__book,.cp-tome__cover,.cp-tome__left,.cp-tome__book::before{transition:none!important}
  .cp-book:hover,.cp-book:focus-visible{transform:none}
  .cp-tome.is-turning .cp-tome__sheet{animation:none;opacity:0}
}