:root{
  --bg:#f6f4ef; --bg2:#ebe8e1; --card:#fff;
  --ink:#111; --body:#333; --muted:#777; --line:#111; --accent:#c8102e;
  --serif:"Noto Serif JP",serif; --disp:"Playfair Display","Noto Serif JP",serif; --sans:"Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);line-height:1.95;font-size:15px;
  background-image:repeating-linear-gradient(0deg,rgba(17,17,17,.012) 0 1px,transparent 1px 3px)}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
.wrap{max-width:1080px;margin:0 auto;padding:0 5vw}
.rule{height:1px;background:var(--line);opacity:.85;margin:0}
.rule--thick{height:4px}
.rule--double{height:6px;background:none;border-top:3px solid var(--line);border-bottom:1px solid var(--line)}

/* masthead */
.masthead{padding-top:16px}
.mast__in{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:10px}
.mast__left{margin:0;font-family:var(--serif);font-weight:700;font-size:13px;letter-spacing:.4em;color:var(--accent)}
.mast__mid{margin:0;font-size:12px;letter-spacing:.18em;color:var(--muted)}
.mast__right{margin:0;font-size:12px;color:var(--muted);font-family:var(--disp)}

/* hero */
.hero{padding:34px 0 0}
.hero__in{position:relative;padding-bottom:28px}
.hero__h{margin:0 0 20px;font-family:var(--serif);font-weight:700;color:var(--ink);line-height:1.06;letter-spacing:-.03em;
  font-size:clamp(34px,10.6vw,118px)}
.hero__h .l{display:block;white-space:nowrap}
.hero__h .l:first-child{margin-left:.02em}
.hero__sode{margin:0;font-family:var(--serif);font-size:clamp(13px,1.5vw,17px);line-height:1.95;color:var(--body);
  border-left:3px solid var(--line);padding-left:14px;max-width:30em}
.stamp{position:absolute;right:0;top:4px;width:clamp(86px,11vw,132px);height:clamp(86px,11vw,132px);border:3px solid var(--accent);border-radius:50%;
  display:grid;place-items:center;color:var(--accent);transform:rotate(-13deg);opacity:.92}
.stamp span{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.6vw,29px);line-height:1;text-align:center}
.stamp i{display:block;font-style:normal;font-size:12px;letter-spacing:.16em;margin-top:5px;font-family:var(--sans)}

/* lead */
.lead{padding:26px 0 34px}
.lead__red{margin:0 0 20px;color:var(--accent);font-family:var(--serif);font-weight:700;
  font-size:clamp(19px,3.1vw,34px);line-height:1.5}
.cols{column-count:2;column-gap:38px}
.cols--3{column-count:3}
.cols p{margin:0 0 1.1em;break-inside:avoid}
@media(max-width:780px){.cols,.cols--3{column-count:1}}

/* articles */
.art__in,.info .wrap,.fit__in,.faq .wrap{padding-top:26px;padding-bottom:34px}
.art__no{margin:0 0 8px;font-family:var(--serif);font-weight:700;font-size:12px;letter-spacing:.3em}
.art__h{margin:0 0 20px;font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:clamp(21px,3.4vw,40px);line-height:1.45;letter-spacing:-.01em;text-wrap:balance}
.tagwrap{display:grid;grid-template-columns:1fr 210px;gap:26px;align-items:end}
.tagwrap .cols{column-count:2}
.illust{width:210px;justify-self:end}
@media(max-width:780px){.tagwrap{grid-template-columns:1fr}.illust{width:150px}}

.list{margin:0;padding:0;list-style:none;counter-reset:n;
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);grid-template-columns:1fr 1fr;column-gap:38px}
.list li{counter-increment:n;margin:0 0 .9em;border-bottom:1px solid rgba(17,17,17,.14);padding-bottom:.7em;
  display:grid;grid-template-columns:2.2em 1fr;align-items:start}
.list li::before{content:counter(n);font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);line-height:1.5}
@media(max-width:780px){.list{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr}}
.note{margin:18px 0 0;font-size:14px;border-left:3px solid var(--line);padding-left:14px}

.who{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media(max-width:780px){.who{grid-template-columns:1fr}}
.who__box{border-top:1px solid rgba(17,17,17,.3);padding-top:14px}
.who__name{margin:0 0 6px;font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink)}
.who__photo{width:132px;filter:grayscale(1) contrast(1.08);margin-bottom:12px}

.dl{display:grid;grid-template-columns:7.5em 1fr;gap:0;margin:0}
.dl dt{font-family:var(--serif);font-weight:600;color:var(--ink);padding:11px 0;border-top:1px solid rgba(17,17,17,.18)}
.dl dd{margin:0;padding:11px 0;border-top:1px solid rgba(17,17,17,.18)}
@media(max-width:560px){.dl{grid-template-columns:1fr}.dl dd{border-top:none;padding-top:0}}

.fit__in{display:grid;grid-template-columns:1fr 1fr;gap:38px}
@media(max-width:780px){.fit__in{grid-template-columns:1fr}}
.ul{margin:0;padding:0;list-style:none}
.ul li{margin:0 0 .8em;padding-left:1.1em;position:relative}
.ul li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:1px;background:var(--ink)}
.ul--no li{color:var(--muted)}

details{border-top:1px solid rgba(17,17,17,.18)}
summary{cursor:pointer;padding:13px 0;font-family:var(--serif);font-weight:600;color:var(--ink)}
details p{margin:0 0 14px;font-size:14px}

.end{padding-top:0}
.end__in{padding:34px 0 46px}
.end__lead{margin:0 0 6px;color:var(--accent);font-family:var(--serif);font-weight:700;font-size:clamp(19px,3vw,32px)}
.end__when{margin:0 0 22px;font-family:var(--disp);font-weight:700;font-size:clamp(20px,3.6vw,42px);color:var(--ink);line-height:1.2}
.end__note{margin:12px 0 0;font-size:12px;color:var(--muted)}

.cta{margin:0}
.cta--inline{margin-top:6px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;
  padding:15px 38px;letter-spacing:.08em;font-size:15px;border:none}
.btn--big{padding:19px 54px;font-size:17px}
.btn:hover{background:#9d0c23}

.foot{border-top:1px solid rgba(17,17,17,.25);padding:22px 0 40px;font-size:12px;color:var(--muted)}
.foot p{margin:0 0 4px}

/* motion */
.rv{opacity:0;transform:translateY(16px)}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
  .stamp{transform:rotate(-13deg)!important;opacity:.92!important}
  *{animation:none!important;transition:none!important}
}

/* モバイル：スタンプを見出しに重ねない */
@media(max-width:780px){
  .hero__in{display:flex;flex-direction:column;align-items:stretch}
  .stamp{position:static;align-self:flex-end;margin:16px 0 0;width:104px;height:104px;flex:none}
  .stamp span{font-size:22px}
  .hero__h{margin-bottom:16px}
}
