/* ======================================================================
   全パターン共通の部品：議会動画カード（公式サイトへ案内する）
   各パターンは --cv-* の変数で色や形を変えられる
   ====================================================================== */
.cv{--cv-bg:#fff;--cv-ink:var(--navy);--cv-line:color-mix(in srgb,var(--navy) 14%,#fff);--cv-thumb:linear-gradient(135deg,var(--navy),var(--blue));--cv-radius:16px;margin:56px auto 0;max-width:1080px}
.cv__title{font-size:22px;font-weight:800;color:var(--cv-ink);margin-bottom:6px}
.cv__lead{color:var(--muted);margin-bottom:20px;font-size:15px}
.cv__list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cv__list--embed{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.cv__list--embed .cv__item{display:grid;gap:8px;align-content:start}
.cv__embed{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--cv-radius);overflow:hidden}
.cv__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cv__cap{color:var(--cv-ink);font-weight:700}
.cv__list--embed .cv__go{font-size:14px;color:var(--cv-ink);text-decoration:underline}
.cv__card{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:stretch;background:var(--cv-bg);border:1px solid var(--cv-line);border-radius:var(--cv-radius);overflow:hidden;color:var(--cv-ink);transition:transform .2s,box-shadow .2s;height:100%}
.cv__card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.1)}
.cv__thumb{background:var(--cv-thumb);display:flex;align-items:center;justify-content:center;min-height:120px}
.cv__thumb svg{width:46px;height:46px}
.cv__thumb circle{fill:rgba(255,255,255,.18);stroke:#fff;stroke-width:1.5}
.cv__thumb path{fill:#fff}
.cv__body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 14px 0}
.cv__date{font-size:13px;color:var(--muted)}
.cv__name{font-weight:800;font-size:16px}
.cv__topics{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.cv__topics span{font-size:12px;background:color-mix(in srgb,var(--sky) 18%,#fff);color:var(--navy);padding:2px 8px;border-radius:999px}
.cv__go{margin-top:auto;font-size:13px;font-weight:700;color:color-mix(in srgb,var(--blue) 82%,#000)}
.cv__note{margin-top:14px;font-size:12px;color:var(--muted)}
@media (max-width:600px){.cv__card{grid-template-columns:92px 1fr}.cv__thumb{min-height:100px}}

/* 表示を始める演出（data-reveal）。動きを減らす設定の人には最初から表示 */
[data-reveal]{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),clip-path .9s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}}

/* ======================================================================
   登場演出（body[data-intro]）：トップ画面の出方。全パターン共通
   rise=浮かび上がり / emerge=ぼかしから登場 / curtain=カーテン / opening=オープニング / vertical=1文字ずつ / pop=ポップ
   ・背景（元の写真）は .hp__base、人物（切り抜き）は .hp__person。切り抜きが無いときは写真全体が動く
   ・人物の位置合わせはスクリプトが行い、合ったら body に intro-on が付いて人物の動きが始まる
   ・顔に文字はかぶせない（演出は写真の枠の中だけ）。動きを減らす設定では何も動かさない
   ====================================================================== */
.hp__person{position:absolute;display:none;pointer-events:none;box-shadow:none!important;background:transparent!important}
.intro-on .hp__person{display:block}
/* 背景写真があるとき（場面）：元の写真は見えなくして、背景写真＋人物を重ねる（位置合わせ前・JSなしは元の写真のまま） */
.hp__bg{position:absolute;display:none;pointer-events:none}
.intro-on .hp__bg{display:block}
.intro-on .hp__base.is-scene{opacity:0!important}
/* 各パターンのトップの文字のかたまり */
:is(.hero__text,.p2-hero__inner,.p3-hero__text,.p4-hero__panel>*,.p5-cover__text,.p6-hero__text,.p7-hero__text,.p8-hero>:not(figure),.p9-tile--hello,.p10-hero__text){--intro-delay:0s}

@keyframes in-up{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes in-fade{from{opacity:0}to{opacity:1}}
@keyframes bg-zoom{from{scale:1.08;filter:blur(6px) brightness(.85)}to{scale:1;filter:none}}
@keyframes person-rise{from{opacity:0;translate:0 70px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes emerge{from{filter:blur(22px) brightness(.25) saturate(.3)}to{filter:none}}
@keyframes person-emerge{from{opacity:0;filter:blur(10px) brightness(1.6);scale:1.06}to{opacity:1;filter:none;scale:1}}
@keyframes person-pop{0%{opacity:0;scale:.55;translate:0 40px}60%{opacity:1;scale:1.06;translate:0 -6px}80%{scale:.98;translate:0 0}100%{opacity:1;scale:1;translate:0 0}}
@keyframes curtain{0%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes ring{from{opacity:.9;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}

/* ① 浮かび上がり：背景がズームしながら晴れ、人物が下から浮かぶ → 文字 */
[data-intro="rise"] [data-hero] :is(.hp__base,.hp__bg),[data-intro="rise"] :is(.hero,.p2-hero,.p3-hero,.p4-hero) :is(.hp__base,.hp__bg){animation:bg-zoom 2.6s cubic-bezier(.2,.7,.2,1) both}
[data-intro="rise"].intro-on .hp__person{animation:person-rise 1.4s .5s cubic-bezier(.2,.8,.2,1) both}
[data-intro="rise"] :is(.hero__text,.p2-hero__inner,.p3-hero__text,.p4-hero__panel>*,.p5-cover__text,.p6-hero__text,.p7-hero__text,.p8-hero>:not(figure),.p9-tile--hello,.p10-hero__text){animation:in-up 1s 1.2s cubic-bezier(.2,.7,.2,1) both}

/* ② ぼかしから登場：暗くぼやけた状態から、くっきり明るく */
[data-intro="emerge"] :is(.hp__base,.hp__bg){animation:emerge 2.2s cubic-bezier(.2,.7,.2,1) both}
[data-intro="emerge"].intro-on .hp__person{animation:person-emerge 1.6s .6s cubic-bezier(.2,.7,.2,1) both}
[data-intro="emerge"] :is(.hero__text,.p2-hero__inner,.p3-hero__text,.p4-hero__panel>*,.p5-cover__text,.p6-hero__text,.p7-hero__text,.p8-hero>:not(figure),.p9-tile--hello,.p10-hero__text){animation:in-fade 1.4s 1.4s ease both}

/* ③ カーテン：イメージカラーの幕が開いて、写真 → 人物 → 文字 */
[data-intro="curtain"] :is([data-hero],.hero,.p2-hero,.p3-hero,.p4-hero){position:relative}
[data-intro="curtain"] :is([data-hero],.hero,.p2-hero,.p3-hero,.p4-hero)::before{content:"";position:absolute;inset:0;z-index:30;background:linear-gradient(90deg,var(--navy),var(--blue));animation:curtain 1.1s .25s cubic-bezier(.77,0,.18,1) both;pointer-events:none}
[data-intro="curtain"].intro-on .hp__person{animation:person-rise 1.1s 1s cubic-bezier(.2,.8,.2,1) both}
[data-intro="curtain"] :is(.hero__text,.p2-hero__inner,.p3-hero__text,.p4-hero__panel>*,.p5-cover__text,.p6-hero__text,.p7-hero__text,.p8-hero>:not(figure),.p9-tile--hello,.p10-hero__text){animation:in-up .9s 1.3s cubic-bezier(.2,.7,.2,1) both}

/* ④ オープニング：名前とひと言の画面 → トップ画面（画面はスクリプトが作る） */
.intro-opening{position:fixed;inset:0;z-index:210;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(150deg,var(--navy),var(--blue));color:#fff;text-align:center;padding:24px;animation:in-fade .1s both,intro-out .8s 2.2s ease forwards}
.intro-opening__name{font-family:var(--hand);font-weight:var(--hand-weight);font-size:clamp(36px,7vw,80px);letter-spacing:.12em;animation:in-up 1s .2s cubic-bezier(.2,.7,.2,1) both}
.intro-opening__slogan{font-size:clamp(16px,2.2vw,22px);font-weight:700;letter-spacing:.1em;opacity:.9;animation:in-up 1s .6s cubic-bezier(.2,.7,.2,1) both}
.intro-opening__line{width:0;height:2px;background:var(--yellow);animation:line-grow 1.2s .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes line-grow{to{width:120px}}
@keyframes intro-out{to{opacity:0;visibility:hidden}}
[data-intro="opening"].intro-on .hp__person{animation:person-rise 1.2s 2.6s cubic-bezier(.2,.8,.2,1) both}
[data-intro="opening"] :is(.hp__base,.hp__bg){animation:bg-zoom 2.4s 2.2s cubic-bezier(.2,.7,.2,1) both}

/* ⑤ 1文字ずつ：キャッチコピーが1文字ずつ現れ、人物がふわっと出る（文字はスクリプトが分ける） */
.intro-char{display:inline-block;opacity:0;animation:in-fade .5s calc(var(--i) * .06s + .3s) ease forwards}
[data-intro="vertical"].intro-on .hp__person{animation:person-emerge 1.6s 1.2s ease both}
[data-intro="vertical"] :is(.hp__base,.hp__bg){animation:in-fade 1.6s ease both}

/* ⑥ ポップ：人物がポンと弾んで登場し、写真の枠から輪が広がる */
[data-intro="pop"].intro-on .hp__person{animation:person-pop 1s .5s cubic-bezier(.3,1.4,.5,1) both}
[data-intro="pop"] :is(.hp__base,.hp__bg){animation:in-fade .8s ease both}
.intro-ring{position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;border-radius:50%;border:6px solid var(--yellow);pointer-events:none;z-index:5;animation:ring 1.4s .6s cubic-bezier(.2,.7,.2,1) both}
.intro-ring:nth-of-type(2){border-color:var(--blue);animation-delay:.85s}
[data-intro="pop"] :is(.hero__text,.p2-hero__inner,.p3-hero__text,.p4-hero__panel>*,.p5-cover__text,.p6-hero__text,.p7-hero__text,.p8-hero>:not(figure),.p9-tile--hello,.p10-hero__text){animation:in-up .8s .9s cubic-bezier(.3,1.4,.5,1) both}

/* 横スライド表示・動きを減らす設定では、演出をしない */
.is-slide .intro-opening{display:none}
@media (prefers-reduced-motion:reduce){
  [data-intro] :is(.hp__base,.hp__bg),[data-intro] .hp__person,[data-intro] :is(.hero__text,.p2-hero__inner,.p3-hero__text,.p4-hero__panel>*,.p5-cover__text,.p6-hero__text,.p7-hero__text,.p8-hero>:not(figure),.p9-tile--hello,.p10-hero__text),.intro-char,.intro-ring{animation:none!important;opacity:1!important}
  [data-intro] :is([data-hero],.hero,.p2-hero,.p3-hero,.p4-hero)::before{display:none}
  .intro-opening{display:none}
}

/* 議会質問の一覧ページ（shitsumon.html）への案内（全パターン共通） */
.q-entry{display:flex;justify-content:center;margin:28px 0 0}
.q-entry__btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;background:var(--navy,#0b3c5d);color:#fff;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 0 0 2px #fff}
.q-entry__btn:hover{opacity:.9}
.q-entry__n{font-size:13px;background:#fff;color:var(--navy,#0b3c5d);border-radius:999px;padding:1px 10px}
/* パターン⑦は議会のところが暗い背景なので、白いボタンにする */
body[data-pattern="7"] #gikai .q-entry__btn{background:#fff;color:var(--navy,#0b3c5d);box-shadow:none}
body[data-pattern="7"] #gikai .q-entry__n{background:var(--navy,#0b3c5d);color:#fff}