@charset "UTF-8";
/* =============================================================
   concept.css — コンセプトページ固有（concept.html）
   内容の正典＝**コンセプトブック**（`資料/コンセプトブック/*.png`）。
   構成も本文もブック踏襲：
     OUR PHILOSOPHY ／ TIME REIMAGINED ／ OUR PROMISE(01-04) ／ VALUE(01-05)
   読み込み順：common.css → category.css → concept.css
   ※ここに書くのは「既存部品では足りない分だけ」。
     ヒーロー(.page-hero--split/.phead/.circle-badge)・写真＋白ボックス
     (.concept__overlap/.concept__script)・暗い写真帯(.promise)・
     カード(.perf-card/.workcard)・パンくず(.crumb)・CTA・フッターは既存部品。
   ※上書きは必ずベース定義の後＝このファイル内でもレスポンシブは末尾に置く。
   ============================================================= */

/* ---- 0 共通の小物 ------------------------------------------ */
/* パンくず（ヒーロー内に置くので下余白だけ詰める） */
.concept-crumb{margin-bottom:clamp(18px,2.2vw,30px)}

/* でこのページだけ 68px/91.8px → 50px/76px にしていたが、
   **（2026-08-29）で 50px/行間1.6 が全ページ共通になった**ので上書きは撤去した。
   （font-size は基底と同値。行間だけ 1.52 → 1.6 に揃う） */

/* 傍点（ブックの署名的な組版）。「咲顔」「再生」の上にアクセント色の点を打つ。
   ブックでは見出しの一部の文字だけに打たれている。 */
.em-dot{font-style:normal;
  -webkit-text-emphasis:filled dot var(--accent);
          text-emphasis:filled dot var(--accent);
  -webkit-text-emphasis-position:over right;
          text-emphasis-position:over right}
/* 点のぶん字面が上に伸びるので、見出しの1行目が詰まらないよう余白を足す */
.phead__title:has(.em-dot),
.philosophy .sec-title:has(.em-dot){padding-top:.35em}

/* ---- 1 OUR PHILOSOPHY（.concept__overlap を流用） ---------- */
/* TOPのコンセプトと同じ組版。paper 面の上なので白ボックスは既定の白のまま。
   本文がブックの3段落ぶんあるので、行間と段落間だけ調整する。 */
.philo1 .concept__title{letter-spacing:.08em}
/* ブック本文はページの核。TOPの薄いグレーではなく墨で読ませる */
.philo1 .concept__lead{color:var(--ink);margin-bottom:0}
.philo1 .concept__lead + .concept__lead{margin-top:1.5em}

/* ---- 2 TIME REIMAGINED（.promise の暗い写真帯を流用） ------
   「見えないものを大切に」の一枚ステートメント。
   .promise の背景写真・暗幕・白文字を継承し、実績数値と4項目グリッドは持たない。 */
/* 本文が5段落と長いぶん、.promise 既定(.70/.62)の暗幕では背景の人物が
   文字と競る。この帯だけ暗幕を濃くして写真を後ろに引かせる。 */
.philosophy::after{background:linear-gradient(180deg,rgba(24,20,16,.82),rgba(24,20,16,.78))}
.philosophy .sec-head{margin-bottom:clamp(30px,4vw,48px)}
.philosophy .sec-title{font-size:clamp(24px,3.6vw,42px);line-height:1.7}
.philosophy__body{max-width:820px;margin-inline:auto;text-align:center}
.philosophy__body p{color:rgba(255,255,255,.86);
  font-size:clamp(15px,1.6vw,16px);line-height:2.3;letter-spacing:.06em}
.philosophy__body p + p{margin-top:1.9em}

/* ---- 3 OUR PROMISE（ブックの4本立て・円形ポートレート） ---- */
/* ブックの見開きどおり：写真 → PROMISE 0X → アクセント色の見出し → 本文。
   列の区切りは面や枠ではなく細い縦罫だけ（.vcard と同じ考え方）。
   ⚠ 2026-09-12 ：写真は丸（●）ではなく**長方形の角丸**。列の幅いっぱい・4:3・角丸は写真共通の --radius。 */
/* ⚠ 4列のとき、両端のカードは外側の余白が0（下の first/last）。等幅の列だと両端だけ中身が広くなり、
      写真を列の幅いっぱいにしたら01・04の写真だけ大きくなった（1440で295px vs 263px）。
      → 両端の列を余白1つぶん細く、中の列を太くして、4枚とも中身の幅をそろえる。 */
.pbgrid{--pbpad:clamp(18px,2.2vw,38px);--pbcol:calc((100% - 2 * var(--pbpad)) / 4);
  display:grid;gap:0;
  grid-template-columns:var(--pbcol) calc(var(--pbcol) + var(--pbpad)) calc(var(--pbcol) + var(--pbpad)) var(--pbcol)}
.pbitem{display:flex;flex-direction:column;align-items:center;
  padding:0 var(--pbpad);
  border-right:1px solid var(--line)}
.pbitem:first-child{padding-left:0}
.pbitem:last-child{border-right:0;padding-right:0}
.pbitem__av{width:100%;aspect-ratio:4/3;border-radius:var(--radius);
  overflow:hidden;background:var(--line)}
.pbitem__av img{width:100%;height:100%;object-fit:cover}
.pbitem__no{display:flex;flex-direction:column;align-items:center;gap:2px;
  margin-top:clamp(18px,2vw,26px)}
.pbitem__no i{font-family:var(--en);font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sub);line-height:1}
.pbitem__no b{font-family:var(--num);font-weight:400;font-size:clamp(22px,2.2vw,28px);
  line-height:1;color:var(--accent);letter-spacing:.02em}
.pbitem__ttl{color:var(--accent);text-align:center;font-weight:500;
  font-size:clamp(15px,1.6vw,18px);line-height:1.8;letter-spacing:.08em;
  margin-top:clamp(14px,1.6vw,20px)}
.pbitem__body{width:100%;margin-top:clamp(20px,2.4vw,30px)}
.pbitem__body p{font-size:15px;line-height:2;letter-spacing:.04em;color:var(--ink)}
.pbitem__body p + p{margin-top:1.5em}

/* ---- 4 VALUE（家のかたちのカードを1段で） ------------------
   5つのVALUEを「家型」のカードにして横1列に並べる。広い画面では
   5枚がちょうど収まり、幅が足りなくなったら横スクロール。
   送りボタン・進捗バーは main.js の [data-scroller] を流用（新規JSなし）。
   ※矢印は必ずスクロールしない外枠(.vscroll)側に置く。内側(track)に
     入れると中身と一緒に流れてしまう。 */
.vscroll{position:relative;--vgap:clamp(14px,1.6vw,24px)}
/* ⚠ 縦は hidden（overflow-x:auto だけだと縦も auto になり、.reveal のずれで縦に20pxあふれて
   ホイール・指の縦送りがこの枠で一度止まる。2026-09-12・トップのお客様の声と同じ穴） */
.vscroll__track{display:flex;gap:var(--vgap);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-block:2px 4px}
.vscroll__track::-webkit-scrollbar{display:none}
/* 2026-08-27：Value01 だけ20px下げる。
   1枚目は上に、残りは下に同じ20pxを空ける＝どのカードも「行の高さ−20px」になり、
   高さは揃ったまま1枚目だけ20px下がる。負のマージンを使わないので枠から出ず、
   縦のスクロールも生まれない。
   ⚠ transform は使わない（.vscroll .vhouse の出現アニメが transform を使っており、
      あとから transform:none で打ち消されて効かなくなる）。 */
.vscroll__track .vhouse:nth-child(1){margin-top:20px}
.vscroll__track .vhouse:not(:nth-child(1)){margin-bottom:20px}

/* .vhouse / .value__no は部位別ページでも使うため common.css に移設した */

/* 操作行（進捗バー＋送りボタン）。カードの下に置く。
   ※右端に浮かせると追従SNS（.hero__social＝fixed）と重なるため、
     .gallery__nav と同じく「並べる」方式にしている。 */
.vscroll__ctrl{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(12px,1.6vw,20px)} /* Value01のずらしで下に20px空くぶん詰める */
.vscroll__bar{flex:1;min-width:0;height:2px;background:var(--line);overflow:hidden}
.vscroll__bar span{display:block;height:100%;background:var(--accent);width:100%}
.vscroll__nav{flex:none;
  width:clamp(40px,3.2vw,48px);height:clamp(40px,3.2vw,48px);border-radius:50%;
  background:rgba(42,42,42,.68);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,opacity .25s ease}
.vscroll__nav:hover{background:var(--accent)}
.vscroll__nav svg{width:42%;height:42%}
/* 端に着いたボタンは効かないので薄く落とす */
.vscroll.is-start [data-scroller-prev],
.vscroll.is-end [data-scroller-next]{opacity:.25;pointer-events:none}
/* スクロールの必要がない幅（5枚が収まる）では操作行ごと消す */
.vscroll.is-start.is-end .vscroll__ctrl{display:none}

/* 出現＝右のカードから左へ順に流す。
   ※横スクロール枠の中の要素に .reveal を直接付けない（画面外のカードが
     opacity:0 のまま残る）。親(.vscroll)で発火させ、子は遅延だけで表現する。 */
.vscroll .vhouse{opacity:0;transform:translateY(24px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.vscroll.in .vhouse{opacity:1;transform:none}
.vscroll .vhouse:nth-child(5){transition-delay:0s}
.vscroll .vhouse:nth-child(4){transition-delay:.12s}
.vscroll .vhouse:nth-child(3){transition-delay:.24s}
.vscroll .vhouse:nth-child(2){transition-delay:.36s}
.vscroll .vhouse:nth-child(1){transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .vscroll .vhouse{opacity:1;transform:none;transition:none}
}

/* ---- 5 善循環（線のみの円環図） ---------------------------- */
.zen{display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(32px,5vw,84px);align-items:center}
.zen__body .sec-head{margin-bottom:0}

/* 図：正方形の枠に SVG の環を敷き、ノードは % 座標で絶対配置する。
   ※ノードに .reveal を付けないこと（.reveal.in{transform:none} が
     translate(-50%,-50%) を打ち消して位置が崩れる）。 */
.zen__fig{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin-inline:auto}
/* 縁（環と矢印）はゆっくり右回り＝時計回りに巡る。中央の「善循環」と
   6つのノードは静止したまま（文字が回らないよう、回すのはSVGだけ）。
   書き方は .circle-badge（category.css）と揃える。 */
.zen__ring{position:absolute;inset:0;width:100%;height:100%;
  animation:zen-ring-spin 30s linear infinite}
@keyframes zen-ring-spin{from{rotate:0deg}to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.zen__ring{animation:none}}
/* 環は --line だと薄すぎてノードの隙間で消えるので、--sub を薄めて引く */
.zen__ring .ring{fill:none;stroke:var(--sub);stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke}
.zen__ring .hub{fill:var(--white);stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.zen__ring .arw{fill:var(--accent)}

.zen__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;z-index:2}
.zen__center b{font-size:clamp(17px,1.9vw,22px);font-weight:500;letter-spacing:.12em;line-height:1.4}
.zen__center i{font-family:var(--en);font-style:normal;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);line-height:1.4}

.zen__node{position:absolute;transform:translate(-50%,-50%);
  width:21%;aspect-ratio:1;border-radius:50%;
  background:var(--white);border:1px solid var(--line);
  display:grid;place-items:center;text-align:center;
  font-size:13px;line-height:1.6;letter-spacing:.04em;color:var(--ink);z-index:2}
/* 6点＝半径38%・上から時計回りに60度きざみ（x=50+38cosθ / y=50+38sinθ） */
.zen__node--1{left:50%;top:12%}
.zen__node--2{left:82.9%;top:31%}
.zen__node--3{left:82.9%;top:69%}
.zen__node--4{left:50%;top:88%}
.zen__node--5{left:17.1%;top:69%}
.zen__node--6{left:17.1%;top:31%}

/* =============================================================
   レスポンシブ（末尾＝ベース定義の後に置く）
   ※共通CSS側の @media は特異度(0,1,0)。ここの (0,2,0) がベースで勝つため、
     列数の切替はメディアクエリ内にも必ず書くこと。
   ============================================================= */
@media (max-width:1100px){
  /* 円写真＋本文の4列は窮屈になるので2×2へ。縦罫は2列目だけ落とす */
  .pbgrid{grid-template-columns:1fr 1fr;gap:clamp(34px,4vw,52px) 0}
  .pbitem:nth-child(2n){border-right:0;padding-right:0}
  .pbitem:nth-child(2n+1){padding-left:0}
}
@media (max-width:980px){
  .zen{grid-template-columns:1fr;gap:clamp(34px,6vw,48px)}
  .zen__fig{max-width:440px}
}
@media (max-width:600px){
  /* の .cpt .phead__title(0,2,0) は category.css の @600(0,1,0) に
     ベースで勝ってしまうため、SPの値もここで同特異度で上書きし直す */
  .cpt .phead__title{font-size:23px;line-height:40px}
  /* VALUE＝スマホは1枚を大きめに見せて横スワイプ（送りは指なので矢印は消す） */
  .vhouse{flex-basis:min(78vw,300px)}
  .vscroll__nav{display:none}
  .vscroll__ctrl{margin-top:20px}
  .philosophy .sec-title{font-size:23px;line-height:40px}
  .philosophy__body p{font-size:15px;line-height:2.1}
  .philo1 .concept__title{font-size:23px;line-height:40px}
  /* 約束は1列に。縦罫はやめて下罫で区切る */
  .pbgrid{grid-template-columns:1fr;gap:34px}
  .pbitem{padding:0 0 30px;border-right:0;border-bottom:1px solid var(--line)}
  .pbitem:last-child{border-bottom:0;padding-bottom:0}
  .pbitem__body p{font-size:15px}
  /* （2026-09-12・スマホ版）。前の3つは**コンセプトのこの要素だけ**
     （.phead__tag は35ページ共通の部品なので .cpt で絞る）。約束の見出しは同一クラス全部＝コンセプトにしか無い。 */
  .cpt .page-hero--split{padding-top:120px}                                  /* 90 → 120 */
  .cpt .page-hero--split .phead__tag{font-size:18px;line-height:32px;text-align:center} /* */
  .pbitem__ttl{font-size:20px;line-height:36px}                              /* /15/27 → 20/36 */
  /* 善循環の図：（2026-09-12）「PCと同じように動く図でわかりやすく」。
     ⚠ 前はスマホだけラベルの一覧（2列のピル）に切り替えていた。→ **PCと同じ円環のまま縮める**。
       回るのは SVG（.zen__ring）だけ＝スマホでも同じアニメーション。
     ・図は最大360px。まわりの丸は 21% → 24%（390で約84px）・文字12px。
       いちばん長い「これから／出会う人」（2行）が丸に収まる。隣の丸とは約133px離れていて重ならない。
     ・中央は hub（直径の31%＝約108px）の中。英字の字間を詰めて収める。 */
  .zen__fig{max-width:360px}
  .zen__node{width:24%;font-size:12px;line-height:1.5;letter-spacing:.02em}
  .zen__center b{font-size:17px}
  .zen__center i{font-size:12px;letter-spacing:.04em}   /* 最小12px。字間で収める */
  /* ：右の見出しの小見出し「Zen-junkan ／ 善循環」はスマホだけ出さない（図の中央と重複するため） */
  .zen__body .eyebrow{display:none}
}

/* =============================================================
   2026-09-14：OUR PHILOSOPHY は白い箱をやめ、写真の上に直接文字を置く（PCだけ）。
   「白枠の上に文字を載せると背景の写真が見えない」への答え。
   写真（明るいリビング）が白文字に負けるので、左から暗くするグラデーションで文字の下地をつくる。
   ⚠ スマホは今までどおり（写真の下に白い箱）＝写真を隠していないため。
   ⚠ .concept__box は common.css で absolute。ここでは写真と同じマス（grid-area 1/1）に重ねて置く。
   ============================================================= */
@media (min-width:881px){
  .philo1 .concept__overlap{display:grid;grid-template-columns:1fr;align-items:center}
  .philo1 .concept__photo{grid-area:1/1;align-self:stretch;width:100%;aspect-ratio:auto;
    min-height:clamp(520px,44vw,640px);position:relative}
  .philo1 .concept__photo::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(24,20,16,.84) 0%,rgba(24,20,16,.74) 42%,rgba(24,20,16,.26) 72%,rgba(24,20,16,0) 100%)}
  /* ⚠ .80/.66 では本文の下地が 4.42:1 で、小さい文字の 4.5:1 に届かなかった（2026-09-14 実測）→ .84/.74 */
  .philo1 .concept__box{grid-area:1/1;position:relative;z-index:2;top:auto;bottom:auto;left:auto;height:auto;
    align-self:center;justify-self:start;margin:0;background:none;border-radius:0;
    width:min(620px,54%);padding:clamp(40px,4.4vw,72px)}
  .philo1 .concept__box .eyebrow{color:rgba(255,255,255,.86)}
  .philo1 .concept__title{color:#fff}
  .philo1 .concept__lead{color:rgba(255,255,255,.94)}
}

/* =============================================================
   2026-09-18 コンセプトブック（第二校）版に作り替え
   構成＝ヒーロー（表紙）→ OUR PHILOSOPHY 5見開き → 全幅写真 → PURPOSE
         → PROMISE（円を縦に重ねて線で本文へ）→ VALUE（5つの円を横に重ねる）→ 写真の帯
   前半（.cbhero / .cbp）＝写真と文章を大小・左右非対称に散らす編集型のレイアウト。
   後半（.cbg）＝細い線の円と線だけで見せる。色は使わず、線は墨の半透明。
   ⚠ 上の旧部品（.philo1 / .promise-book / .pbgrid / .vscroll / .vhouse）は
     このページの本文からは外れた。旧本文の控え＝wp/_bak-20260918-concept/。
   ============================================================= */
.cpt{--cbline:rgba(42,42,42,.5)}
.cb-en{display:block;font-family:var(--en);font-size:13px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent2);line-height:1.4}

/* ---- ヒーロー：左に写真（上端・左端まで）、右に縦書きの見出し ---- */
.cbhero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  min-height:clamp(640px,100svh,1040px);background:var(--bg) var(--grain) repeat;background-size:var(--grain-size)}
.cbhero__media{position:relative;overflow:hidden;background:#ece6dc}
.cbhero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.cbhero__panel{display:flex;flex-direction:column;
  padding:clamp(118px,10vw,150px) calc(var(--gut) + 56px) clamp(40px,4vw,64px) clamp(28px,4vw,72px)}
.cbhero__crumb{margin-bottom:0}
.cbhero__title{align-self:center;margin-top:auto;margin-bottom:auto;
  writing-mode:vertical-rl;font-family:var(--sans);font-weight:300;color:var(--ink);
  font-size:clamp(26px,2.5vw,38px);line-height:2.3;letter-spacing:.34em;padding:clamp(24px,3vw,48px) 0}
/* ⚠ 見出しそのものを flex にしない。縦書きの flex は主軸が縦になり、2行が縦に並んで途中で折れる。
   ⚠ 余白は top/bottom で書く。縦書きの要素では margin-block / padding-block が「左右」を指す */
.cbhero__line{display:block}
.cbhero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.cbhero__book{font-family:var(--en);font-size:12px;letter-spacing:.22em;line-height:1.9;
  text-transform:uppercase;color:var(--sub)}
.cbhero__script{font-family:"Mrs Saint Delafield",cursive;font-size:clamp(28px,2.6vw,40px);
  color:var(--accent2);line-height:1;white-space:nowrap;transform:rotate(-6deg);transform-origin:right bottom}

/* ---- OUR PHILOSOPHY：1見開き＝1ブロック。12列のグリッドに写真と文章を散らす ---- */
.cbphilo{background:var(--bg) var(--grain) repeat;background-size:var(--grain-size);
  padding:clamp(120px,12vw,200px) 0 0}
.cbp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);
  padding-inline:var(--gut);align-items:start}
.cbp + .cbp{margin-top:clamp(130px,14vw,240px)}
.cbp__ph{margin:0;overflow:hidden;border-radius:var(--radius)}
.cbp__ph img{display:block;width:100%;height:auto}
/* 画面の端まで出す写真。外側の角は丸めない */
.cbp__ph.is-bleed-r{margin-right:calc(-1 * var(--gut));border-radius:var(--radius) 0 0 var(--radius)}
.cbp__ph.is-bleed-l{margin-left:calc(-1 * var(--gut));border-radius:0 var(--radius) var(--radius) 0}
.cbp__title{font-family:var(--sans);font-weight:400;color:var(--ink);
  font-size:clamp(22px,2.1vw,30px);line-height:1.85;letter-spacing:.12em;
  margin:14px 0 clamp(30px,3vw,48px)}
.cbp__title:has(.em-dot){padding-top:.3em}
.cbp__text p{font-size:16px;line-height:2.2;letter-spacing:.07em;color:var(--ink)}
.cbp__text p + p{margin-top:1.7em}

/* 2-1：文章は左、写真は右端まで（写真は少し下げて始める） */
.cbp--a .cbp__text{grid-column:1 / 6;grid-row:1;padding-top:clamp(0px,1vw,20px)}
.cbp--a .cbp__ph--main{grid-column:7 / 13;grid-row:1;margin-top:clamp(80px,9vw,170px)}
/* 2-2：写真は左端まで、文章は右。小さい写真を文章の下へ */
.cbp--b .cbp__ph--main{grid-column:1 / 7;grid-row:1 / 3}
.cbp--b .cbp__text{grid-column:8 / 13;grid-row:1;margin-top:clamp(40px,5vw,90px)}
.cbp--b .cbp__ph--sub{grid-column:10 / 12;grid-row:2;margin-top:clamp(40px,5vw,80px)}
/* 2-3：1段目＝写真と文章。2段目＝小さい写真・文章・小さい写真を段違いに */
.cbp--c .cbp__ph--main{grid-column:2 / 7;grid-row:1}
.cbp--c .cbp__text{grid-column:8 / 13;grid-row:1;margin-top:clamp(40px,6vw,110px)}
.cbp--c .cbp__ph--s1{grid-column:1 / 4;grid-row:2;margin-top:clamp(70px,8vw,140px)}
.cbp--c .cbp__text--2{grid-column:5 / 10;grid-row:2;margin-top:clamp(140px,15vw,260px)}
.cbp--c .cbp__ph--s2{grid-column:10 / 13;grid-row:2;margin-top:clamp(320px,32vw,560px)}
/* 2-4：文章は左、写真は右端まで。縦長の写真を文章の下に */
.cbp--d .cbp__text{grid-column:2 / 7;grid-row:1}
.cbp--d .cbp__ph--main{grid-column:7 / 13;grid-row:1 / 3;margin-top:clamp(40px,5vw,90px)}
.cbp--d .cbp__ph--sub{grid-column:3 / 5;grid-row:2;margin-top:clamp(50px,6vw,100px)}
/* 2-5：大きい写真を中央に、下に文章と小さい写真 */
.cbp--e .cbp__ph--main{grid-column:3 / 11;grid-row:1}
.cbp--e .cbp__text{grid-column:2 / 8;grid-row:2;margin-top:clamp(70px,8vw,130px)}
.cbp--e .cbp__ph--sub{grid-column:9 / 13;grid-row:2;margin-top:clamp(180px,18vw,320px)}

/* ---- 全幅写真 ---- */
.cbband{background:var(--bg) var(--grain) repeat;background-size:var(--grain-size);
  padding-top:clamp(130px,14vw,240px)}
.cbband img{display:block;width:100%;height:clamp(300px,40vw,700px);object-fit:cover;object-position:50% 55%}

/* ---- PURPOSE：ブックの1ページ1文をそのまま ---- */
.cbpurpose{background:var(--white);padding:var(--sec-pad) 0;text-align:center}
.cbpurpose__text{margin-top:clamp(24px,3vw,40px);font-weight:300;color:var(--ink);
  font-size:clamp(20px,2.3vw,32px);line-height:2.2;letter-spacing:.26em}

/* ---- 後半の共通：見出しは「英字（大）＋日本語（小）」を横に ---- */
.cbg{background:var(--bg) var(--grain) repeat;background-size:var(--grain-size);padding:var(--sec-pad) 0}
.cbg--value{border-top:1px solid var(--cbline);padding-bottom:0}
.cbg__wrap{max-width:calc(1120px + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.cbh{margin-bottom:clamp(56px,7vw,110px)}
.cbh__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;margin:0}
.cbh__en{font-family:var(--en);font-weight:400;font-size:clamp(38px,4.4vw,58px);
  letter-spacing:.01em;line-height:1;color:var(--ink)}
.cbh__ja{font-size:15px;font-weight:500;letter-spacing:.12em;color:var(--ink)}

/* 円（線だけ） */
.cbcircle{position:relative;width:var(--d);aspect-ratio:1;border:1px solid var(--cbline);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.cbcircle__lbl{font-family:var(--en);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub)}
.cbcircle__no{font-family:var(--en);font-size:clamp(28px,2.8vw,40px);font-weight:400;line-height:1;color:var(--ink)}

/* ---- PROMISE：円を縦に少し重ね、円の中心から横線で本文へ ---- */
.cbchain{--d:clamp(220px,22vw,290px);list-style:none;margin:0;padding:0}
.cbchain__item{display:grid;grid-template-columns:var(--d) minmax(0,1fr);align-items:center}
.cbchain__item + .cbchain__item{margin-top:calc(var(--d) * -.1)}
.cbchain__body{position:relative;padding-left:clamp(90px,10vw,150px)}
.cbchain__body::before{content:"";position:absolute;left:0;top:50%;
  width:calc(clamp(90px,10vw,150px) - 30px);border-top:1px solid var(--cbline)}
.cbchain__ttl{font-size:clamp(18px,1.6vw,21px);font-weight:500;line-height:1.8;letter-spacing:.08em;
  color:var(--ink);margin:0 0 14px}
.cbchain__body p{font-size:16px;line-height:2;letter-spacing:.05em;color:var(--ink)}
.cbchain__body p + p{margin-top:.6em}

/* ---- VALUE：5つの円を横に2割ずつ重ねる。本文は円の真下に1列ずつ ----
   円の幅＝100% ÷ (5 − 4×0.2)＝100% ÷ 4.2。重なり＝その2割（margin の % は親の幅が基準）。
   本文の列は間隔0・左右に円の1割ずつ余白＝列の中心が円の中心にそろう。 */
.cbring__circles{display:flex;list-style:none;margin:0;padding:0}
.cbcircle--ring{--d:calc(100% / 4.2);flex:none;border:0}
.cbcircle--ring + .cbcircle--ring{margin-left:calc(100% / 4.2 * -.2)}
.cbcircle__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  animation:cbspin 80s linear infinite}
.cbcircle__ring circle,.cbcircle__ring path{fill:none;stroke:var(--cbline);stroke-width:1;
  vector-effect:non-scaling-stroke}
.cbcircle--ring:nth-child(even) .cbcircle__ring{animation-direction:reverse}
@keyframes cbspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cbcircle__ring{animation:none}}
.cbcircle__ttl{font-size:clamp(14px,1.3vw,17px);font-weight:500;line-height:1.8;letter-spacing:.06em;color:var(--ink)}
.cbcircle--ring .cbcircle__no{display:none}
.cbring__texts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:clamp(34px,4vw,56px) 0 0;
  padding:0 calc(100% / 4.2 * .1)}
.cbring__texts li{padding-inline:clamp(8px,1vw,16px)}
.cbring__texts p{font-size:14px;line-height:2;letter-spacing:.04em;color:var(--ink)}
/* 番号と見出しは円の中に出しているので、PCでは読み上げ用にだけ残す */
.cbring__no,.cbring__ttl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 写真の帯：高さの違う写真を下端でそろえて、画面幅いっぱいに ---- */
/* 写真の帯：右から左へ流し続ける（2026-09-26。もとは6枚を画面幅にぴったり並べていた）
   ⚠ 仕掛けはスタッフ一覧の `.staff-marquee` と同じ。HTML側に**同じ並びを2組**置き、
     `translateX(-50%)`＝1組ぶんだけ動かして繰り返す。
   ⚠ すきまは `gap` ではなく `margin-right` で取る。`gap` だと2組の継ぎ目にだけ
     すきまが1つ多く入り、-50% のところでカクッと飛ぶ。
   ⚠ 幅は % から vw に変えた。器が `width:max-content` なので % は基準（親の幅）を失う。
     比率はもとの 17/14/14/20/12/23% のまま。
   ⚠ 動きを減らす設定の人には流さない。その場合は先頭の数枚が見えるだけになる。 */
/* ⚠ ジグザグに置く（2026-09-26）。1枚おきに上下へずらす。
     もとは下端そろえ（`align-items:flex-end`）だったので、中心そろえに変えてから振る。
   ⚠ **ずらしたぶんは `.cbstrip` の上下 padding で逃がす。** 帯は横に流すため
     `overflow:hidden` を持っており、逃がさないと上下がスパッと切れる。
   ⚠ **奇数・偶数で振るので、1組の枚数は偶数でなければならない**（いまは6枚）。
     奇数にすると2組目の振れ方が逆になり、継ぎ目でガタッとずれる。 */
.cbstrip{--cbzig:clamp(14px,2vw,34px);
  margin-top:var(--sec-pad);line-height:0;overflow:hidden;padding-block:var(--cbzig)}
.cbstrip__track{display:flex;align-items:center;width:max-content;
  animation:cbstrip-flow 64s linear infinite;will-change:transform}
.cbstrip img{display:block;flex:none;height:auto;margin-right:clamp(10px,1.1vw,18px)}
.cbstrip img:nth-child(odd){transform:translateY(calc(var(--cbzig) * -1))}
.cbstrip img:nth-child(even){transform:translateY(var(--cbzig))}
.cbstrip img:nth-child(6n+1){width:17vw}
.cbstrip img:nth-child(6n+2){width:14vw}
.cbstrip img:nth-child(6n+3){width:14vw}
.cbstrip img:nth-child(6n+4){width:20vw}
.cbstrip img:nth-child(6n+5){width:12vw}
.cbstrip img:nth-child(6n+6){width:23vw}
@keyframes cbstrip-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cbstrip__track{animation:none}}

/* ---- 狭いPC・タブレット：ブックの改行は長い行があるので外して流す ---- */
@media (max-width:1100px){
  .cbp__text p br{display:none}
  .cbp__text p{word-break:auto-phrase}
}
@media (max-width:900px){
  /* VALUE：円は数字だけにして1列に重ね、本文は下に並べる */
  .cbcircle--ring .cbcircle__lbl,.cbcircle--ring .cbcircle__ttl{display:none}
  .cbcircle--ring .cbcircle__no{display:block;font-size:clamp(18px,4.4vw,28px)}
  .cbring__texts{grid-template-columns:1fr;padding:0;margin-top:40px}
  .cbring__texts li{padding:24px 0;border-top:1px solid var(--cbline)}
  .cbring__texts li:last-child{border-bottom:1px solid var(--cbline)}
  .cbring__no,.cbring__ttl{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  .cbring__no{display:block;font-family:var(--en);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub)}
  .cbring__ttl{font-size:18px;font-weight:500;line-height:1.7;letter-spacing:.06em;margin:6px 0 10px}
  .cbring__texts p{font-size:15px}
}
@media (max-width:768px){
  /* ヒーロー：写真6：見出し4の割合のまま縮める */
  .cbhero{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);min-height:min(86svh,620px)}
  .cbhero__panel{padding:92px 14px 22px 16px}
  .cbhero__crumb{display:none} /* 右列が細く、縦書きの見出しと重なる。スマホでは main.js がパンくずを <main> の最後へ移す（移すと class が外れるので、この指定は移す前のちらつき止め） */
  .cbhero__title{font-size:21px;letter-spacing:.24em;line-height:2.1;padding:18px 0}
  .cbhero__foot{flex-direction:column;align-items:flex-start;gap:14px}
  .cbhero__script{font-size:24px;line-height:1.05;white-space:normal;transform-origin:left bottom} /* 1行だと右列（約160px）からはみ出して横スクロールが出た */

  /* PHILOSOPHY：6列にして、写真の幅と左右だけで変化をつける */
  .cbphilo{padding-top:96px}
  .cbp{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px}
  .cbp + .cbp{margin-top:110px}
  /* ⚠ PC側の配置（.cbp--a .cbp__ph--main など＝詳細度0,2,0）に負けないよう .cpt を付けて上げる */
  .cpt .cbp > *{grid-row:auto;margin-top:0}
  .cpt .cbp > * + *{margin-top:44px}
  .cbp .cbp__text{grid-column:1 / -1}
  .cbp__title{font-size:22px;margin-bottom:26px}
  .cbp--a .cbp__ph--main{grid-column:2 / -1}
  .cbp--b .cbp__ph--main{grid-column:1 / 6}
  .cbp--b .cbp__ph--sub{grid-column:4 / -1}
  .cbp--c .cbp__ph--main{grid-column:1 / -1}
  .cbp--c .cbp__ph--s1{grid-column:1 / 4}
  .cbp--c .cbp__text--2{grid-column:1 / -1}
  .cbp--c .cbp__ph--s2{grid-column:3 / -1}
  .cbp--d .cbp__ph--main{grid-column:2 / -1}
  .cbp--d .cbp__ph--sub{grid-column:1 / 4}
  .cbp--e .cbp__ph--main{grid-column:1 / -1;margin-inline:calc(-1 * var(--gut));border-radius:0}
  .cbp--e .cbp__ph--sub{grid-column:3 / -1}
  .cbband{padding-top:110px}
  .cbband img{height:62vw}
  .cbpurpose__text{font-size:19px;letter-spacing:.16em}

  /* PROMISE：円を左の列に小さく。重ねず、横線も引かない */
  .cbchain{--d:104px}
  .cbchain__item{align-items:start;column-gap:18px}
  .cbchain__item + .cbchain__item{margin-top:44px}
  .cbchain__body{padding-left:0}
  .cbchain__body::before{display:none}
  .cbchain .cbcircle{gap:4px}
  .cbchain .cbcircle__lbl{letter-spacing:.06em}
  .cbchain .cbcircle__no{font-size:26px}
  .cbchain__ttl{font-size:18px;word-break:auto-phrase}
  .cbchain__ttl br{display:none}
  .cbchain__body p{font-size:15px}
  .cbchain__body p br{display:none}

  /* 写真の帯：流れる形にしたので**枚数は減らさない**（減らすと2組がそろわず継ぎ目が飛ぶ）。
     画面が狭いぶん1枚を大きくして、同時に2〜3枚が見えるようにする。比率はPCと同じ。 */
  .cbstrip img{margin-right:10px}
  .cbstrip img:nth-child(6n+1){width:38vw}
  .cbstrip img:nth-child(6n+2){width:31vw}
  .cbstrip img:nth-child(6n+3){width:31vw}
  .cbstrip img:nth-child(6n+4){width:44vw}
  .cbstrip img:nth-child(6n+5){width:27vw}
  .cbstrip img:nth-child(6n+6){width:51vw}
  .cbstrip__track{animation-duration:44s}
}