/* ============================================================
   丸を使ったレイアウト
   ============================================================ */

/* ---- 写真の丸 ---- */
.bub{position:absolute;display:block;border-radius:50%;pointer-events:none;z-index:3;
  width:var(--s,180px);height:var(--s,180px);left:var(--x,0);top:var(--y,0);
  background-size:cover;background-position:center;
  box-shadow:0 18px 50px -18px rgba(20,16,14,.7),0 0 0 1px rgba(240,232,222,.16);
  animation:bubFloat 11s ease-in-out infinite, bubGlow 9s ease-in-out infinite}
.bub::after{content:'';position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(240,232,222,.55),transparent 62%);
  opacity:.25;animation:bubHalo 9s ease-in-out infinite}
@keyframes bubFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes bubGlow{0%,100%{filter:saturate(.85) brightness(1.02)}
                   50%    {filter:saturate(1.1) brightness(1.55)}}
@keyframes bubHalo{0%,100%{opacity:.18}50%{opacity:.72}}

/* 輪郭だけの丸（装飾） */
.ring-o{position:absolute;border-radius:50%;pointer-events:none;
  width:var(--s,220px);height:var(--s,220px);left:var(--x,0);top:var(--y,0);
  border:1px solid rgba(227,220,208,.28);
  animation:bubFloat 14s ease-in-out infinite}
.dot-o{position:absolute;border-radius:50%;pointer-events:none;
  width:var(--s,12px);height:var(--s,12px);left:var(--x,0);top:var(--y,0);
  background:var(--c,rgba(143,187,212,.75));
  animation:bubHalo 7s ease-in-out infinite}
.disc{position:absolute;border-radius:50%;pointer-events:none;
  width:var(--s,160px);height:var(--s,160px);left:var(--x,0);top:var(--y,0);
  background:var(--c,var(--paper-sand));opacity:var(--o,1);
  animation:bubFloat 13s ease-in-out infinite}

/* ---- トップの一枚目：大きな丸の中に見出し ---- */
.chero{position:relative;min-height:100svh;display:grid;place-items:center;
  background:var(--paper-deep);overflow:hidden;isolation:isolate}
.chero-tiles{position:absolute;inset:0;z-index:0}
.chero-tiles i{position:absolute;display:block}
.chero-art{position:absolute;inset:0;z-index:1}
.chero-disc{position:relative;z-index:3;
  width:min(60vw,760px,68vh);aspect-ratio:1;border-radius:50%;margin-top:-24px;
  background:radial-gradient(circle at 38% 34%,#F4EFE6,var(--paper-sand) 68%,#D8CFC0);
  display:grid;place-items:center;text-align:center;
  box-shadow:0 40px 120px -40px rgba(20,16,14,.85)}
.chero-in{width:78%;color:#2C2521}
.chero-tag{display:inline-flex;align-items:center;gap:9px;padding:min(8px,1vh) 16px;margin-bottom:min(20px,2.4vh);
  border:1px solid rgba(44,37,33,.28);font-family:var(--ff-en);font-size:clamp(9.5px,1.3vh,11px);letter-spacing:.2em;
  color:#4A3E37}
.chero-tag i{width:7px;height:7px;border-radius:50%;background:#2E7D5B;display:block;
  animation:bubHalo 2.6s ease-in-out infinite}
.chero h1{font-family:var(--ff-serif);font-weight:600;color:#241E1B;
  font-size:clamp(23px,min(3.6vw,5.4vh),50px);line-height:1.42;letter-spacing:.07em}
.chero h1 em{font-style:normal;color:#A8412F}
.chero .lead{margin-top:min(20px,2.4vh);font-size:clamp(12px,min(1.1vw,1.8vh),16px);line-height:1.95;color:#5A4C44;
  max-width:34em;margin-inline:auto}
.chero .btns{margin-top:min(28px,3.4vh);display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.chero .btn{padding:min(14px,1.7vh) min(28px,2.4vw);font-size:clamp(12.5px,min(1vw,1.7vh),14.5px)}
.chero .btn-gold{background:#3A302B;color:var(--paper-sand);border-color:#3A302B}
.chero .btn-line{color:#3A302B;border-color:rgba(58,48,43,.45)}
.chero .btn-line:hover{color:var(--paper-sand)}
.chero .btn-line::before{background:#3A302B}

/* 一枚目の下に出る実績の数字 */
.chero-facts{position:absolute;left:0;right:0;bottom:0;z-index:8;padding:22px 0 26px;
  display:flex;justify-content:center;gap:clamp(14px,3vw,58px);flex-wrap:nowrap;
  font-family:var(--ff-en);
  background:linear-gradient(180deg,transparent,rgba(26,21,19,.72) 42%,rgba(26,21,19,.92))}
.chero-facts div{text-align:center;color:var(--td-sub)}
.chero-facts .n{font-size:clamp(17px,1.9vw,28px);white-space:nowrap;font-weight:300;color:var(--paper-sand)}
.chero-facts .n small{font-size:12px;margin-left:3px;letter-spacing:.1em}
.chero-facts .t{font-size:10.5px;white-space:nowrap;letter-spacing:.14em;margin-top:2px}

/* 一枚目の隊員 */
.chero-guard{position:absolute;right:3%;bottom:104px;width:min(13vw,168px);z-index:4;
  filter:drop-shadow(0 26px 60px rgba(20,16,14,.6))}
.chero-guard .pcl-svg{stroke-width:3.8}

/* スクロールの合図 */
.chero-cue{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:9;
  font-family:var(--ff-en);font-size:9.5px;letter-spacing:.3em;color:rgba(188,178,166,.75)}

@media (max-width:860px){
  .chero-disc{width:min(94vw,560px)}
  .chero-in{width:82%}
  .chero-guard{display:none}
  .chero-facts{gap:16px;bottom:14px}
  .bub{animation-duration:14s,11s}
}
@media (prefers-reduced-motion:reduce){
  .bub,.bub::after,.ring-o,.dot-o,.disc,.chero-tag i{animation:none}
}
/* セクションに散らす丸は、本文より後ろ */
.section .bub,.section .ring-o,.section .dot-o,.section .disc{z-index:0}
.section .bub{opacity:.62;box-shadow:0 16px 44px -20px rgba(20,16,14,.6),0 0 0 1px rgba(240,232,222,.12)}
.hero .bub,.chero .bub{opacity:1}
.chero .pfig{color:var(--td)}
.chero-cue{bottom:12px}

/* ---- 一枚目：右側に置く「切り分けられた写真」 ---- */
.chero-split{position:absolute;z-index:1;
  right:0;top:0;bottom:0;width:min(56%,900px);
  opacity:.9}
.chero-split .ps-img{animation:psGlowHero 10s ease-in-out infinite}
@keyframes psGlowHero{0%,100%{filter:saturate(.8) contrast(1.04) brightness(1.0)}
                      50%    {filter:saturate(.95) contrast(1.08) brightness(1.34)}}
.chero-split::after{inset:-4%}
/* 大円は写真より上 */
.chero-disc{z-index:3}
.chero-art{z-index:2}
@media (max-width:860px){.chero-split{display:none}}
/* 重なりの順番をはっきり決める
   写真(1) → 丸の装飾(2) → 大円(3) → 隊員(4) → 数字(8) → SCROLL(9) → ヘッダー(100) */
.chero-split{z-index:1}
.chero-art{z-index:2}
.chero-disc{z-index:3}
.chero-guard{z-index:4}
.chero-facts{z-index:8}
.chero-cue{z-index:9}
.header{z-index:100}
.chero-cue{color:rgba(210,200,188,.9)}
@media (max-width:860px){
  .chero-disc{margin-top:-40px}
  .chero-facts{padding:18px 0 20px}
}