/* 資格取得者の一覧(/designers/。2026-10-29 のオーナーの決定。docs/10 T-67)。tools/build-license-site.js が public/assets/designers.css に書き出す。
   色と書体は styles.css の :root(--navy・--gold・--cream・--font-head など)を使う。
   2026-10-29 にオーナーの依頼で作り直した(「載っていることがかっこいい」と思える、モダンでクールな見た目に):
     紺の帯 … 金の大きな数字で「認定者 ○名・活動地域・認定開始」を並べる(数え上がる)
     舞台 … 真ん中の方を大きく、左右の方を奥へ傾けて重ねるカルーセル。下に番号・進み具合の線・矢印
     名簿 … 全員を、写真・名前・年代・地域・肩書き・認定番号の行で 2 列に揃えて並べる(前の 4 列を上下にずらす並べ方はやめた)
   プロフィールの <dialog> は前のまま。動きを減らす設定の方には、数え上がり・自動で進む・傾きの動きを付けない */

/* このページだけ、横にはみ出したものを切る(2026-10-29。スマホで「ヘッダーが見切れる・詰まって見える」とオーナーから)。
   カルーセルの左右の方は画面の外まで並んでいて、iPhone の Safari では奥行きを付けた要素が舞台の overflow:hidden を抜け、
   ページが横に広がることがある(広がると、ページ全体が縮んだり、横にずれてヘッダーが見切れたりする)。
   clip はスクロールの箱を作らないので、ヘッダーの sticky はそのまま効く */
html,body{overflow-x:clip}

/* 下層ページの余白(.page-main の padding)を打ち消して、紺の帯を端まで出す */
.dz{margin:calc(-1 * clamp(40px,7vw,72px)) calc(-1 * clamp(16px,5vw,48px)) 0}

/* ---- 紺の帯 ---- */
.dz-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(56px,9vw,104px) var(--gutter) clamp(36px,5vw,56px)}
.dz-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,#000 15%,transparent 70%)}
.dz-hero::after{content:"";position:absolute;top:-34%;right:-14%;width:min(680px,72vw);aspect-ratio:1;border:1px solid rgba(194,163,90,0.42);border-radius:50%;box-shadow:0 0 0 56px rgba(194,163,90,0.035),0 0 0 112px rgba(194,163,90,0.02)}
.dz-hero-inner{position:relative;z-index:1;max-width:1120px;margin:0 auto}
.dz-kicker{margin:0 0 18px;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:0.3em}
.dz-title{margin:0;font-family:var(--font-head);font-weight:900;font-size:clamp(40px,8vw,84px);line-height:1.1;letter-spacing:0.06em}
.dz-lead{max-width:560px;margin:22px 0 0;color:rgba(255,255,255,0.8);font-size:clamp(15px,1.8vw,17px);line-height:2}

/* 数字: 金のグラデーションの大きな数字。項目のあいだに金の細い縦線 */
.dz-stats{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 0;margin:clamp(36px,5vw,56px) 0 0;padding:0}
.dz-stat{display:grid;gap:6px;padding:0 clamp(20px,4vw,48px);border-left:1px solid rgba(194,163,90,0.35)}
.dz-stat:first-child{padding-left:0;border-left:0}
.dz-stat dt{color:rgba(255,255,255,0.62);font-size:11px;font-weight:700;letter-spacing:0.24em}
.dz-stat dd{display:flex;align-items:baseline;gap:8px;margin:0}
.dz-stat-num{font-family:var(--font-head);font-weight:900;font-size:clamp(44px,6.4vw,76px);line-height:0.95;letter-spacing:0.02em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#f7e7b8 0%,#d8b86a 48%,#a8873c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dz-stat--main .dz-stat-num{font-size:clamp(72px,11vw,136px)}
.dz-stat-unit{color:rgba(255,255,255,0.78);font-size:14px;font-weight:700;letter-spacing:0.08em}

/* ---- 舞台(カルーセル) ---- */
.dz-stage{position:relative;overflow:hidden;clip-path:inset(0);margin-top:-1px;padding:clamp(12px,2vw,24px) 0 clamp(48px,7vw,80px);background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(194,163,90,0.18),transparent 70%),linear-gradient(180deg,var(--navy) 0%,#141b33 100%);color:#fff}
.dz-sample{box-sizing:border-box;width:min(560px,calc(100% - 32px));margin:0 auto 24px;padding:10px 18px;border:1px solid rgba(194,163,90,0.5);border-radius:var(--pill);background:rgba(194,163,90,0.12);color:#f2dfa8;font-size:13px;font-weight:700;text-align:center}
.dz-car{--w:min(360px,70vw);position:relative;height:calc(var(--w) + 200px);perspective:1600px;touch-action:pan-y}
.dz-car-track{position:absolute;inset:0;transform-style:preserve-3d}
.dz-slide{--d:0;--far:0;position:absolute;left:50%;top:50%;width:var(--w);padding:0;border:0;border-radius:18px;overflow:hidden;background:#0e1430;color:#fff;font:inherit;text-align:left;cursor:pointer;
  transform:translate(-50%,-50%) translateX(calc(var(--d) * 64%)) translateZ(calc(var(--far) * -180px)) rotateY(calc(var(--d) * -16deg));
  z-index:calc(10 - var(--far));opacity:calc(1 - var(--far) * 0.3);filter:grayscale(calc(var(--far) * 0.75)) brightness(calc(1 - var(--far) * 0.22));
  box-shadow:0 30px 80px rgba(0,0,0,0.45);transition:transform .75s cubic-bezier(.2,.75,.2,1),opacity .75s ease,filter .75s ease,box-shadow .75s ease}
.dz-slide.is-hidden{opacity:0;pointer-events:none}
.dz-slide.is-active{box-shadow:0 0 0 1px rgba(194,163,90,0.7),0 40px 110px rgba(0,0,0,0.55),0 0 80px rgba(194,163,90,0.18)}
.dz-slide-index{position:absolute;top:12px;left:16px;z-index:2;font-family:var(--font-head);font-weight:900;font-size:44px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.85);letter-spacing:0.02em}
.dz-slide-photo{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#1b2440}
.dz-slide-photo img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.2,.75,.2,1)}
.dz-slide.is-active .dz-slide-photo img{transform:scale(1.1)}
.dz-slide-photo::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(14,20,48,0.92))}
.dz-slide-info{position:relative;display:grid;gap:6px;margin-top:-56px;padding:0 22px 22px}
.dz-slide-no{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:0.2em;font-variant-numeric:tabular-nums}
.dz-slide-name{font-family:var(--font-head);font-weight:900;font-size:clamp(22px,3vw,30px);line-height:1.3;letter-spacing:0.06em}
.dz-slide-meta{color:rgba(255,255,255,0.72);font-size:13px;letter-spacing:0.06em}
.dz-slide-title{margin-top:4px;padding-left:10px;border-left:2px solid var(--gold);color:#ecdcae;font-size:13px;line-height:1.6}
.dz-slide:focus-visible{outline:3px solid #fff;outline-offset:4px}

.dz-car-bar{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,20px);margin-top:clamp(4px,1vw,12px);padding:0 var(--gutter)}
.dz-car-nav{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,0.32);border-radius:50%;background:transparent;color:#fff;font:inherit;font-size:24px;line-height:1;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.dz-car-nav:hover{border-color:var(--gold);background:rgba(194,163,90,0.12)}
.dz-car-count{display:flex;align-items:baseline;gap:8px;min-width:84px;margin:0;justify-content:center;font-family:var(--font-head);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:0.12em}
.dz-car-count [data-dz-index]{font-size:22px;color:#fff}
.dz-car-sep,.dz-car-count [data-dz-total]{font-size:13px;color:rgba(255,255,255,0.5)}
.dz-car-progress{position:relative;width:min(220px,30vw);height:2px;overflow:hidden;background:rgba(255,255,255,0.16)}
.dz-car-progress span{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.dz-car-progress span.is-running{animation:dz-progress 5.2s linear forwards}
@keyframes dz-progress{to{transform:scaleX(1)}}
.dz-stage.is-single .dz-car-bar{display:none}

/* ---- 名簿 ---- */
.dz-body{max-width:1120px;margin:0 auto;padding:clamp(56px,8vw,96px) var(--gutter) clamp(72px,10vw,120px)}
.dz-body-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;padding-bottom:18px;border-bottom:2px solid var(--navy)}
.dz-body-kicker{margin:0;color:var(--gold-text);font-size:12px;font-weight:700;letter-spacing:0.28em}
.dz-body-title{margin:0;font-family:var(--font-head);font-weight:900;font-size:clamp(22px,3vw,30px);letter-spacing:0.06em}
.dz-state{margin:24px 0 0;padding:28px;border:1px dashed var(--sand);border-radius:var(--radius);color:var(--muted);text-align:center}
.dz-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,5vw,64px);margin:0;padding:0;list-style:none}
.dz-row-btn{position:relative;display:grid;grid-template-columns:30px 60px minmax(0,1fr) auto 18px;align-items:center;gap:16px;width:100%;padding:18px 4px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.dz-row-btn::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--gold);transition:width .45s cubic-bezier(.2,.75,.2,1)}
.dz-row-index{color:var(--muted-2);font-family:var(--font-head);font-weight:900;font-size:13px;font-variant-numeric:tabular-nums}
.dz-row-photo{display:block;width:60px;height:60px;overflow:hidden;border-radius:50%;background:var(--beige)}
.dz-row-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(0.9);transition:filter .4s ease}
.dz-row-main{display:grid;gap:2px;min-width:0}
.dz-row-name{font-family:var(--font-head);font-weight:900;font-size:18px;letter-spacing:0.05em}
.dz-row-sub{overflow:hidden;color:var(--muted-2);font-size:12.5px;white-space:nowrap;text-overflow:ellipsis}
.dz-row-no{color:var(--gold-text);font-size:11px;font-weight:700;letter-spacing:0.14em;font-variant-numeric:tabular-nums}
.dz-row-arrow{color:var(--gold);transition:transform .3s ease}
.dz-row-btn:hover::after,.dz-row-btn:focus-visible::after{width:100%}
.dz-row-btn:hover .dz-row-photo img,.dz-row-btn:focus-visible .dz-row-photo img{filter:none}
.dz-row-btn:hover .dz-row-arrow,.dz-row-btn:focus-visible .dz-row-arrow{transform:translateX(4px)}
.dz-row-btn:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* ---- プロフィール(<dialog>) ---- */
.dz-dialog{width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:var(--radius-lg);background:var(--cream);color:var(--ink);box-shadow:0 40px 120px rgba(10,14,28,0.45);overflow:auto}
.dz-dialog::backdrop{background:rgba(17,22,40,0.72);backdrop-filter:blur(6px)}
.dz-dialog[open]{animation:dz-pop .35s cubic-bezier(.2,.7,.2,1)}
@keyframes dz-pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.dz-d-inner{position:relative;display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}
.dz-d-photo{background:var(--navy)}
.dz-d-photo img{display:block;width:100%;height:100%;min-height:100%;aspect-ratio:1;object-fit:cover}
.dz-d-body{padding:clamp(28px,4vw,48px)}
.dz-d-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;color:var(--gold-text);font-size:12px;font-weight:700;letter-spacing:0.16em}
.dz-d-badge::before{content:"";width:28px;height:1px;background:var(--gold)}
.dz-d-name{margin:0;font-family:var(--font-head);font-weight:900;font-size:clamp(26px,3.6vw,36px);line-height:1.35;letter-spacing:0.05em}
.dz-d-title{margin:8px 0 0;color:var(--muted);font-size:14px}
.dz-d-meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.dz-d-meta li{padding:4px 12px;border:1px solid var(--line);border-radius:var(--pill);font-size:12.5px;color:var(--muted)}
.dz-d-message{margin:22px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:15px;line-height:2;white-space:pre-line}
.dz-d-cert{display:flex;flex-wrap:wrap;gap:12px 32px;margin:26px 0 0;padding:16px 18px;background:var(--beige);border-radius:var(--radius)}
.dz-d-cert div{display:grid;gap:2px}
.dz-d-cert dt{color:var(--muted-2);font-size:11px;letter-spacing:0.14em}
.dz-d-cert dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0.06em}
.dz-d-close{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(251,250,246,0.9);color:var(--ink);font:inherit;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(27,36,64,0.18)}
.dz-d-close:hover{background:#fff}

@media (max-width:900px){
  .dz-roster{grid-template-columns:1fr}
  .dz-d-inner{grid-template-columns:1fr}
  .dz-d-photo img{max-height:56vh}
}

@media (max-width:640px){
  .dz-kicker{font-size:11px;letter-spacing:0.18em}
  .dz-slide:not(.is-active) .dz-slide-info,.dz-slide:not(.is-active) .dz-slide-index{opacity:0;transition:opacity .4s ease}
  .dz-stat{padding:0 16px}
  .dz-stat--main{flex-basis:100%;padding-left:0;border-left:0}
  .dz-stat:nth-child(2){padding-left:0;border-left:0}
  .dz-car{--w:min(300px,74vw);height:calc(var(--w) * 1.2 + 40px)}
  .dz-slide{transform:translate(-50%,-50%) translateX(calc(var(--d) * 74%)) translateZ(calc(var(--far) * -160px)) rotateY(calc(var(--d) * -12deg))}
  .dz-car-progress{display:none}
  .dz-row-btn{grid-template-columns:52px minmax(0,1fr) 18px;gap:14px}
  .dz-row-index,.dz-row-no{display:none}
  .dz-row-photo{width:52px;height:52px}
}

@media (prefers-reduced-motion:reduce){
  .dz-slide,.dz-slide-photo img,.dz-row-photo img,.dz-row-btn::after,.dz-row-arrow{transition:none}
  .dz-car-progress span.is-running{animation:none}
  .dz-dialog[open]{animation:none}
}