/* =====================================================================
   KINAN DAYS — ISSUE（誌面）
   1人＝1ページ。PCではスクロールすると次のページが上から重なり、
   誌面をめくっていく感覚にする。グリッドはところどころ、あえて崩す。
   オレンジはピリオドと、ごく一部だけ。
   ===================================================================== */
:root{--hd:56px;--giant:clamp(120px,30vw,540px)}
.giant i,.cv-logo i,.into2-h i,.work2-h i{font-style:normal;color:var(--orange)}

/* ---------- 柱（ページ上端の小さな見出しとノンブル） ---------- */
.run{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.14em;padding-block:12px;border-top:1px solid currentColor;opacity:.9}
.run span:nth-child(2){flex:1;text-align:center}
@media (max-width:640px){.run span:first-child{display:none}.run span:nth-child(2){text-align:left}}

/* ---------- 巨大な見出し ---------- */
.giant{font-family:var(--f-display);font-weight:900;font-stretch:62%;font-size:var(--giant);line-height:.76;letter-spacing:-.045em;margin:0 0 0 -.05em;text-transform:uppercase}
.giant-ja{font-weight:900;font-size:clamp(26px,4vw,64px);line-height:1.25;letter-spacing:.02em}
.big-link{display:inline-block;font-family:var(--f-display);font-weight:900;font-stretch:75%;font-size:clamp(28px,4.4vw,64px);line-height:1;letter-spacing:-.01em;border-bottom:4px solid currentColor;padding-bottom:6px}
.big-link:hover{color:var(--orange)}
.big-link--light{color:var(--paper)}

/* =====================================================================
   COVER：写真が全部。ロゴは写真からはみ出して、次のページにかかる。
   ===================================================================== */
.cv{position:relative;height:min(94svh,1080px);min-height:560px;background:var(--ink);color:#fff;overflow:hidden}
.cv-photo{position:absolute;inset:0;display:block}
.cv-photo .ph{position:absolute;inset:0}
.cv-photo .ph-tag{top:auto;bottom:24%;left:auto;right:var(--gutter);text-align:right;max-width:46%}
.cv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 28%,rgba(0,0,0,0) 60%,rgba(0,0,0,.35));pointer-events:none}
.cv-issue{position:absolute;z-index:2;top:16px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.7);padding-top:8px;font-size:10px}
.cv-sub{position:absolute;z-index:2;top:64px;left:var(--gutter);font-weight:700;font-size:clamp(14px,1.4vw,18px);line-height:1.7}
.cv-catch{position:absolute;z-index:2;top:56px;right:var(--gutter);writing-mode:vertical-rl;font-weight:900;font-size:clamp(28px,4vw,64px);line-height:1.25;letter-spacing:.12em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.cv-cap{position:absolute;z-index:2;right:var(--gutter);bottom:16%;display:grid;justify-items:end;gap:2px;text-align:right;max-width:min(420px,60%)}
.cv-cap b{font-weight:900;font-size:clamp(20px,2.4vw,34px)}
.cv-cap span{font-size:12px;opacity:.85}
@media (max-width:760px){.cv-cap{bottom:auto;top:46%;right:auto;left:var(--gutter);justify-items:start;text-align:left}.cv-photo .ph-tag{display:none}}

.cv-logo{position:relative;z-index:5;margin:calc(var(--giant) * -.5) 0 0;padding-inline:var(--gutter);font-family:var(--f-display);font-weight:900;font-stretch:62%;font-size:var(--giant);line-height:.76;letter-spacing:-.045em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;pointer-events:none}
.cv-logo span{display:block}
.cv-logo span + span{margin-left:.42em}
.cv-logo i{color:#0DA5ED} /* 反転（difference）でオレンジに見える色 */

/* ---------- 目次 ---------- */
.toc{padding:clamp(64px,10vw,160px) var(--gutter) clamp(48px,8vw,120px);display:grid;gap:20px}
.toc > .mono{color:var(--ink-2)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.toc a{display:grid;gap:4px}
.toc b{font-family:var(--f-display);font-weight:900;font-stretch:66%;font-size:clamp(56px,9vw,150px);line-height:.8;letter-spacing:-.03em;transition:color .25s}
.toc small{font-size:12px;color:var(--ink-2)}
.toc a:hover b{color:var(--orange)}
.toc li:nth-child(2){margin-top:clamp(24px,5vw,80px)}
.toc li:nth-child(3){margin-top:clamp(0px,2vw,24px)}
.toc li:nth-child(4){margin-top:clamp(40px,7vw,120px)}
@media (min-width:900px){.toc ol{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* =====================================================================
   READ：1人＝1ページ
   ===================================================================== */
.issue{position:relative}
.pg{position:relative;background:var(--paper);padding-inline:var(--gutter);padding-bottom:clamp(72px,12vw,140px)}
.pg-photo{display:block;overflow:hidden;background:var(--off);margin-inline:calc(var(--gutter) * -1);aspect-ratio:4/5}
.pg-photo .ph{transition:transform 1.4s var(--ease)}
.pg:hover .pg-photo .ph{transform:scale(1.02)}
.pg-q{font-weight:900;font-size:clamp(36px,10vw,64px);line-height:1.22;letter-spacing:.01em;margin:28px 0 0;word-break:auto-phrase}
.pg-q a{background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 .1em no-repeat;transition:background-size .8s var(--ease)}
.pg-q a:hover{background-size:100% .1em}
.pg-who{display:grid;gap:4px;margin-top:28px}
.pg-name{font-weight:900;font-size:clamp(34px,8vw,72px);line-height:1.05;letter-spacing:.04em}
.pg-en{color:var(--ink-2);font-size:11px}
.pg-role{font-size:14px;font-weight:700;margin-top:6px;display:grid}
.pg-role small{font-size:11px;font-weight:400;color:var(--ink-2)}
.pg-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-weight:700;font-size:14px}
.pg-links a{border-bottom:2px solid currentColor;padding-bottom:2px}
.pg-links a:hover{color:var(--accent)}
.pg-meet{color:var(--accent)}
.pg-inset{display:none}

.pg--title{display:grid;align-content:end;gap:24px;padding-top:0}
.pg--title .run{margin-bottom:clamp(40px,8vw,120px)}
.read-all{padding:40px var(--gutter) 120px}

/* ほかの人：あえて揃えない */
.pm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px;margin-block:40px 64px}
.pm{display:grid;gap:10px;align-content:start}
.pm-photo{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--off)}
.pm-photo .ph-tag{display:none}
.pm b{font-weight:900;font-size:clamp(17px,2vw,26px);line-height:1.4}
.pm-name{font-weight:700;font-size:14px}
.pm:hover b{color:var(--accent)}
.pm--1{margin-top:64px}

/* ---------- PC：めくる誌面 ---------- */
@media (min-width:960px){
  .pg{min-height:calc(100svh - var(--hd))}
  .pg-q{margin:0}
  .pg-who{margin:0}
  .pm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 48px}
  .pm--0{margin-top:0;width:86%}
  .pm--1{margin-top:180px}
  .pm--2{margin-top:60px;width:78%;justify-self:end}

  /* a：右に大きな写真、左に縦書きの言葉、名前は左下に大きく */
  .pg--a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr auto;column-gap:40px}
  .pg--a .run{grid-column:1/-1}
  .pg--a .pg-photo{grid-column:2;grid-row:2/4;margin:0 calc(var(--gutter) * -1) calc(clamp(72px,12vw,140px) * -1) 0;aspect-ratio:auto;min-height:620px}
  .pg--a .pg-q{grid-column:1;grid-row:2;writing-mode:vertical-rl;font-size:clamp(44px,5vw,92px);line-height:1.3;max-height:62svh;justify-self:end;padding-top:24px}
  .pg--a .pg-who{grid-column:1;grid-row:3;align-self:end}

  /* b：写真を全面に。言葉は写真の上に、黒い帯で大きく */
  .pg--b{display:grid;grid-template-rows:auto 1fr;padding-bottom:0;color:#fff;background:var(--ink)}
  .pg--b .run{position:relative;z-index:3}
  .pg--b .pg-photo{position:absolute;inset:0;margin:0;aspect-ratio:auto}
  .pg--b .pg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 60%)}
  .pg--b .pg-q{position:relative;z-index:3;align-self:end;max-width:11em;font-size:clamp(52px,7vw,128px);line-height:1.18;margin-bottom:clamp(48px,7vw,96px)}
  .pg--b .pg-q a{background:var(--ink);color:#fff;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .12em}
  .pg--b .pg-who{position:absolute;z-index:4;right:var(--gutter);top:22%;background:var(--paper);color:var(--ink);padding:24px 28px;transform:rotate(-3deg);box-shadow:0 18px 40px rgba(0,0,0,.25);max-width:340px}
  .pg--b .pg-who .pg-name{font-size:clamp(36px,3.6vw,56px)}

  /* c：写真を傾けて置き、職場の写真を重ねる。言葉は大きく横組み */
  .pg--c{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:24px;background:var(--off)}
  .pg--c .run{grid-column:1/-1}
  .pg--c .pg-photo{grid-column:1/7;grid-row:2;margin:24px 0 0;aspect-ratio:4/5;max-height:72svh;transform:rotate(-1.6deg);box-shadow:0 20px 50px rgba(0,0,0,.18)}
  .pg--c .pg-inset{display:block;grid-column:5/8;grid-row:2;align-self:end;aspect-ratio:4/3;overflow:hidden;transform:rotate(3deg) translateY(-40px);box-shadow:0 16px 40px rgba(0,0,0,.25);border:8px solid var(--paper);z-index:2}
  .pg--c .pg-inset .ph-tag{font-size:9px}
  .pg--c .pg-q{grid-column:7/13;grid-row:2;align-self:start;margin-top:clamp(40px,8svh,96px);font-size:clamp(44px,5.2vw,96px);line-height:1.2;margin-left:-.4em;position:relative;z-index:3}
  .pg--c .pg-who{grid-column:9/13;grid-row:2;align-self:end;margin-bottom:32px;position:relative;z-index:3}
}
/* 画面の高さが足りるときだけ、ページを重ねる */
@media (min-width:960px) and (min-height:680px){
  .pg{position:sticky;top:var(--hd);height:calc(100svh - var(--hd));min-height:0;overflow:hidden;box-shadow:0 -24px 48px -24px rgba(0,0,0,.35)}
  .pg--more{height:auto;min-height:calc(100svh - var(--hd));position:relative;overflow:visible}
  .pg--a .pg-photo{min-height:0}
}

/* =====================================================================
   WHAT ARE YOU INTO?（黒地。オレンジは「?」とホバーだけ）
   ===================================================================== */
.into2{position:relative;z-index:2;background:var(--ink);color:var(--paper);padding:var(--sec) var(--gutter);display:grid;gap:24px}
.into2 > .mono{color:color-mix(in srgb,var(--paper) 60%,transparent)}
.into2-h{font-family:var(--f-display);font-weight:900;font-stretch:62%;font-size:clamp(96px,19vw,320px);line-height:.78;letter-spacing:-.04em;margin:0;text-transform:uppercase}
.into2-ja{font-weight:900;font-size:clamp(22px,3vw,40px)}
.into2-list{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;align-items:baseline}
.into2-list li{display:contents}
.into2-list a{display:inline-flex;align-items:flex-start;gap:4px;font-weight:900;font-size:clamp(28px,5vw,80px);line-height:1.25;padding-right:.6em;transition:color .2s}
.into2-list a small{font-family:var(--f-mono);font-weight:400;font-size:12px;opacity:.6;margin-top:.4em}
.into2-list li:nth-child(even) a{color:color-mix(in srgb,var(--paper) 45%,transparent)}
.into2-list a:hover,.into2-list a:focus-visible{color:var(--orange)!important}
@media (min-width:960px){.into2{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:start}.into2 > .mono,.into2-h,.into2-ja{grid-column:1}.into2-list{grid-column:2;grid-row:1/4;margin-top:0;align-self:center}}

/* =====================================================================
   MEET：日付と、会える人の顔を大きく
   ===================================================================== */
.meet{position:relative;z-index:2;background:var(--off);padding:0 var(--gutter) var(--sec)}
.meet .giant{margin-top:clamp(40px,8vw,120px)}
.meet-in{display:grid;gap:20px;margin-top:clamp(40px,6vw,80px)}
.meet-date{font-family:var(--f-display);font-weight:900;font-stretch:62%;font-size:clamp(110px,24vw,400px);line-height:.78;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.meet-when{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px}
.meet-lead{font-weight:900;font-size:clamp(32px,6vw,96px);line-height:1.15;margin-top:clamp(24px,5vw,72px)}
.meet-faces{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
.meet-faces a{display:grid;gap:8px}
.meet-av{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--paper)}
.meet-av .ph-tag{display:none}
.meet-faces b{font-weight:900;font-size:clamp(24px,3vw,44px);line-height:1.1}
.meet-faces small{font-size:13px;color:var(--ink-2)}
.meet-faces a:hover b{color:var(--accent)}
.meet-faces .f1{margin-top:56px}
.meet-title{display:grid;gap:6px;margin-top:24px}
.meet-title .mono{color:var(--ink-2)}
.meet-title a{font-weight:900;font-size:clamp(22px,2.6vw,36px);line-height:1.4}
.meet .big-link--light{color:var(--ink)}
@media (min-width:960px){
  .meet-in{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .meet-date,.meet-when{grid-column:1/-1}
  .meet-lead{grid-column:1/6;align-self:start}
  .meet-faces{grid-column:6/13;grid-row:3/6;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .meet-faces .f0{margin-top:120px}
  .meet-faces .f1{margin-top:0}
  .meet-faces .f2{margin-top:220px}
  .meet-title{grid-column:1/6;grid-row:4;align-self:end}
  .meet-in .big-link{grid-column:1/6;grid-row:5;align-self:start;justify-self:start}
}

/* =====================================================================
   TRY：散らばったメモのように
   ===================================================================== */
.try2{position:relative;z-index:2;background:var(--paper);padding:0 var(--gutter) var(--sec)}
.try2 .giant{margin-top:clamp(40px,8vw,120px)}
.try2 .giant-ja{margin-top:20px}
.try2-list{display:grid;gap:48px;margin-top:clamp(56px,8vw,120px)}
.try2-item{display:grid;gap:6px;border-top:3px solid var(--ink);padding-top:14px}
.try2-dur{font-family:var(--f-display);font-weight:900;font-stretch:62%;font-size:clamp(88px,13vw,200px);line-height:.8;letter-spacing:-.03em;transition:color .25s}
.try2-dur small{font-size:.26em;margin-left:.1em;letter-spacing:.02em}
.try2-item b{font-weight:900;font-size:clamp(18px,1.8vw,24px);line-height:1.45}
.try2-item > small{font-size:12px;color:var(--ink-2)}
.try2-item:hover .try2-dur{color:var(--orange)}
@media (min-width:960px){
  .try2-list{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .try2-item.t0{grid-column:1/5}
  .try2-item.t1{grid-column:6/10;margin-top:160px}
  .try2-item.t2{grid-column:9/13;margin-top:-40px;grid-row:2}
}

/* =====================================================================
   WORK：最後に、小さく、静かに
   ===================================================================== */
.work2{position:relative;z-index:2;background:var(--off);padding:0 var(--gutter) clamp(72px,10vw,140px)}
.work2-in{display:grid;gap:24px;margin-top:clamp(40px,6vw,80px)}
.work2-h{font-family:var(--f-display);font-weight:900;font-stretch:62%;font-size:clamp(72px,12vw,200px);line-height:.8;letter-spacing:-.04em;margin:0;text-transform:uppercase}
.work2-lead{font-weight:900;font-size:clamp(20px,2.4vw,32px);margin-bottom:20px}
.work2-list{list-style:none;margin:0 0 32px;padding:0;border-top:1px solid var(--ink)}
.work2-list a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--line)}
.work2-list b{font-weight:700;font-size:16px}
.work2-list span{font-size:12px;color:var(--ink-2)}
.work2-list a:hover b{color:var(--accent)}
.work2 .big-link{font-size:clamp(22px,2.6vw,36px);border-bottom-width:3px}
@media (min-width:960px){.work2-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;align-items:end}}

/* =====================================================================
   編集後記
   ===================================================================== */
.after{position:relative;z-index:2;background:var(--paper);padding:var(--sec) var(--gutter);display:grid;gap:28px;border-top:1px solid var(--ink)}
.after > .mono{color:var(--ink-2)}
.after-big{font-weight:900;font-size:clamp(34px,6.4vw,112px);line-height:1.2;letter-spacing:.01em;margin:0}
.after-flow{display:flex;flex-wrap:wrap;gap:8px 28px}
.after-flow a{font-family:var(--f-display);font-weight:900;font-stretch:66%;font-size:clamp(36px,5vw,72px);line-height:1}
.after-flow a:hover{color:var(--orange)}
.ft{position:relative;z-index:2}

@media (prefers-reduced-motion:reduce){.pg{position:relative!important;height:auto!important;top:auto!important}}