/* ============================================================
   AndPOST（参加型投票企画）専用スタイル
   ・モックv2（AndPOST_お題一覧/お題詳細_モックv2.html）から移植
   ・テーマ style.css と併用する前提（モックも同じ組み合わせで設計済み）
   ============================================================ */
:root{
  --pk:#ff0062; --ink2:#090a1a; --sub2:#6b6c74; --mut2:#a3a3a3;
  --line2:#e6e6ea; --alt2:#fbfbfb;
  --ease2:cubic-bezier(0.16,1,0.3,1);
}

.ap-hidden{display:none;}
.hidden{display:none;}

/* ===== 一覧：ヒーローA（名前主役・受付中お題がない時のフォールバック） ===== */

/* ===== 一覧：ヒーローC（お題主役・採用案） ===== */

/* 小さなポストアイコン */
.post-ico{width:34px;margin:0;flex:none;}
.post-ico .h{width:34px;height:20px;background:var(--pk);border-radius:17px 17px 0 0;position:relative;}
.post-ico .h::after{content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);width:20px;height:3px;background:#fff;border-radius:2px;}
.post-ico .b{width:34px;height:18px;background:var(--pk);border-radius:0 0 5px 5px;}

/* ナビ内のAndPOST表記 */

/* ===== 一覧：見出し行＋タブ ===== */
.list-header{
  max-width:1080px;margin:0 auto clamp(18px,3vw,26px);padding:0 var(--px,24px);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.list-header .section-title, .articles .section-title{
  font-family:'Noto Sans JP',sans-serif;font-size:17px;font-weight:700;letter-spacing:-0.005em;
  margin-bottom:0;display:flex;align-items:center;gap:11px;color:var(--ink2);
}
.list-header .section-title::before, .articles .section-title::before{
  content:"";width:5px;height:20px;background:var(--pk);border-radius:3px;flex:none;
}

/* ===== 一覧：お題カード ===== */

.grid-empty{grid-column:1/-1;text-align:center;font-size:13px;color:var(--sub2);padding:40px 0;}
.pager{display:flex;gap:6px;justify-content:center;align-items:center;margin:clamp(24px,3.5vw,40px) auto clamp(72px,10vw,110px);}
.pager:empty{margin:0 auto clamp(72px,10vw,110px);}
.pager .pg{min-width:38px;height:38px;border:1px solid var(--line2);background:#fff;border-radius:999px;font-family:var(--font-en,Inter,sans-serif);font-size:13px;font-weight:600;color:var(--sub2);cursor:pointer;transition:border-color .2s ease,color .2s ease;}
.pager .pg:hover{border-color:var(--ink2);color:var(--ink2);}
.pager .pg.on{background:var(--ink2);border-color:var(--ink2);color:#fff;}
.pager .pg.off{opacity:.35;cursor:default;}
.pager .pg.off:hover{border-color:var(--line2);color:var(--sub2);}

.st{font-size:10px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:3px 11px;flex:none;}
.st.open{background:var(--pk);color:#fff;}
.st.done{background:var(--ink2);color:#fff;}
.st.counting{background:#f0a52e;color:#fff;}
.st.soon{background:transparent;border:1px solid var(--line2);color:var(--mut2);}

.cta.open{color:var(--pk);}
.cta.done{color:var(--ink2);}
.cta.soon{color:var(--mut2);}

/* ============================================================
   一覧 v3（2026-09-04・デザイン画像準拠）
   ロゴ主役ヘッダー → PICK UP → 吹き出し型お題カード＋フィルタ
   ・archive-odai.php はこの v3（.apt-*）を使用
   ・旧 .hero-quiz / .ocard / .odai-tabs 系は後方互換のため残置（触らない）
   ・吹き出し：本体はCSS枠線（左下だけ角丸なし）＋しっぽは素材SVGの曲線を移した小SVG
   ・色：受付中＝ピンク＋緑点／結果＝黒＋青点／集計中＝グレー＋オレンジ点（素材SVG準拠）
   ============================================================ */
.apt-head{
  --hs:1.2; /* 上部の余白倍率（上・下を同じ比率で拡縮。1=基準・2026-09-04確定） */
  padding:calc(var(--header-h,68px) + clamp(84px,11vw,150px) * var(--hs)) var(--px,24px) calc(clamp(48px,6vw,80px) * var(--hs));
  text-align:center;
}
.apt-logo{display:block;width:clamp(230px,32vw,400px);margin:0 auto clamp(8px,1vw,12px);} /* ロゴ〜タグライン間は倍率に連動させず詰める */
.apt-logo img{width:100%;height:auto;display:block;}
@keyframes apt-logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── 上部の演出（2026-09-04確定）──
   ロゴ＋タグラインは .apt-unit という1つの箱に入れ、箱だけを動かす（塊として動く・位相ずれなし）
   流れ：①箱がふわっと現れる（画面中央）→ ②タグラインが1文字ずつ（読点の後で一呼吸）→
        ③打ち終わり0.65s後、ブロックの高さが1.4sで縮み上へスライド → ④PICK UPが下からふわっと → ⑤箱はゆっくり浮遊
   JSが main.apt に .is-intro / .is-settled を付ける。OSの「視差効果を減らす」では .is-intro を付けず最初から定位置 */
.apt-head{display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;}
.apt-unit{display:flex;flex-direction:column;align-items:center;will-change:transform;backface-visibility:hidden;
  animation:apt-logo-float 4.5s ease-in-out 1.3s infinite;}
.apt.is-intro .apt-head{min-height:calc(100vh - var(--header-h,68px));transition:min-height 1.4s cubic-bezier(.55,0,.1,1);}
.apt.is-intro.is-settled .apt-head{min-height:0;}
.apt.is-intro .apt-unit{animation:apt-up .5s var(--ease2) both;}
.apt.is-intro.is-settled .apt-unit{animation:apt-up .5s var(--ease2) both, apt-logo-float 4.5s ease-in-out 1.6s infinite;}
.apt.is-intro .apt-pickup{opacity:0;}
.apt.is-intro.is-settled .apt-pickup{animation:apt-up-soft 1.1s .55s cubic-bezier(.3,0,.1,1) both;}
@keyframes apt-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes apt-up-soft{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* タイプライター（文字は .ch、カーソルは1本の実要素。表示切替はJS） */
.apt.is-intro .apt-tagline .ch{opacity:0;}
.apt.is-intro .apt-tagline .ch.on{opacity:1;}
.apt.is-intro.is-settled .apt-tagline .ch{opacity:1;}
.apt-tagline .caret{display:inline-block;width:2px;height:.92em;background:var(--pk);vertical-align:-.06em;margin-right:-2px;opacity:0;pointer-events:none;}
.apt-tagline .caret.on{opacity:1;animation:apt-caret 1s steps(1) infinite;}
.apt.is-settled .apt-tagline .caret{opacity:0!important;animation:none!important;}
@keyframes apt-caret{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){ .apt-unit{animation:none!important;} }
.apt-tagline{font-size:clamp(15px,1.4vw,20px);font-weight:500;color:var(--sub2);letter-spacing:.18em;padding-left:.18em;margin:0;} /* 字間ぶんの末尾余白を左で相殺して光学的に中央へ */

.apt-sec{max-width:1080px;margin:0 auto;padding:0 var(--px,24px);}
.apt-sec-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 clamp(16px,2.4vw,24px);}
.apt-title{display:flex;align-items:center;gap:12px;font-size:clamp(18px,2.2vw,26px);font-weight:800;letter-spacing:.02em;color:var(--ink2);margin:0;line-height:1.2;}
.apt-title.en{font-family:var(--font-en,Inter,sans-serif);letter-spacing:.06em;}
.apt-title::before{content:"";width:5px;height:1.15em;background:var(--pk);border-radius:3px;flex:none;}

/* PICK UP */
.apt-pickup{margin-bottom:clamp(56px,8vw,96px);}
.apt-pcard{display:block;background:#f7f7f8;border-radius:clamp(20px,3vw,32px);padding:clamp(32px,5vw,56px) clamp(20px,4vw,48px);text-align:center;text-decoration:none;color:var(--ink2);transition:transform .45s var(--ease2),background .3s ease;}
a.apt-pcard:hover{transform:translateY(-3px);background:#f2f2f4;}
.apt-pcard .apt-pill{margin-bottom:clamp(18px,2.6vw,28px);}
.apt-pcard-title{font-size:clamp(1.5rem,3.6vw,2.6rem);font-weight:800;line-height:1.4;letter-spacing:-0.01em;margin:0 0 clamp(20px,3vw,32px);text-wrap:balance;}
.apt-pcard-cta{font-size:13px;font-weight:700;color:var(--pk);letter-spacing:.02em;}

/* 顔アイコン列（選択肢の先頭数人＋「+N」。画像付き選択肢が3つ以上ある時だけ出る） */
.apt-faces{display:flex;justify-content:center;align-items:center;margin:0 0 clamp(16px,2.4vw,22px);}
.apt-faces .f{
  width:46px;height:46px;border-radius:50%;border:3px solid #fff;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;
  margin-left:-10px;box-shadow:0 2px 6px rgba(9,10,26,.16);
}
.apt-faces .f:first-child{margin-left:0;}
.apt-faces .f img{width:100%;height:100%;object-fit:cover;display:block;}
.apt-faces .f.more{background:#fff;color:var(--sub2);font-size:12px;border:1px solid var(--line2);}
.apt-pcard .apt-faces .f{width:clamp(44px,5vw,64px);height:clamp(44px,5vw,64px);margin-left:-12px;}
.apt-pcard .apt-faces .f.more{font-size:clamp(12px,1.2vw,15px);}
.apt-pcard-meta{font-size:13px;color:var(--sub2);margin:0 0 clamp(18px,2.6vw,28px);letter-spacing:.02em;}
.apt-card .apt-faces{justify-content:center;margin:0 0 18px;}
.apt-card .apt-faces .f{width:34px;height:34px;border-width:2px;margin-left:-8px;font-size:11px;box-shadow:0 1px 3px rgba(9,10,26,.15);}
.apt-card .apt-faces .f.more{font-size:10.5px;}

/* ピル（状態） */
.apt-pill{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:6px 20px;line-height:1.4;}
.apt-pill.open{background:var(--pk);color:#fff;}
.apt-pill.results{background:var(--ink2);color:#fff;} /* 黒はサイト共通の #090a1a に統一（9/5） */
.apt-pill.counting{background:#fff;color:var(--ink2);border:2px solid var(--ink2);padding:4px 18px;}

/* フィルタ（セレクト＋リセット） */
.apt-filter{display:flex;align-items:center;gap:12px;}
.apt-filter .lbl{font-family:var(--font-en,Inter,sans-serif);font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--mut2);}
.apt-select{
  appearance:none;-webkit-appearance:none;border:1px solid var(--line2);border-radius:4px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23090a1a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center/10px 6px;
  padding:5px 30px 5px 16px;font-family:inherit;font-size:12px;font-weight:600;color:var(--ink2);min-width:108px;text-align:center;cursor:pointer;
}
.apt-select:focus{outline:2px solid var(--pk);outline-offset:1px;}
.apt-reset{font-size:11px;color:var(--mut2);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;}
.apt-reset:hover{color:var(--ink2);}

/* お題カード（吹き出し） */
.apt-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(20px,3vw,40px);row-gap:clamp(20px,3vw,32px);max-width:1080px;margin:0 auto;padding:0 var(--px,24px);}
.apt-grid .grid-empty{grid-column:1/-1;}
.apt-card{
  --bc:var(--pk); --dot:#41e59a;
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:3px solid var(--bc);border-radius:28px 28px 28px 0;
  padding:26px 26px 32px;margin-bottom:44px; /* 下のしっぽ分 */
  text-decoration:none;color:var(--ink2);transition:transform .45s var(--ease2);
}
.apt-card.results{--bc:var(--ink2);--dot:#41a9e5;}
.apt-card.counting{--bc:#aaaaaa;--dot:#e5a941;}
a.apt-card:hover{transform:translateY(-4px);}
.apt-tail{position:absolute;left:-3px;top:100%;width:60px;height:44px;overflow:visible;pointer-events:none;display:block;}
.apt-tail .fill{fill:#fff;}
.apt-tail .line{fill:none;stroke:var(--bc);stroke-width:3;stroke-miterlimit:10;}
.apt-card-head{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:16px;min-height:24px;}
.apt-card .apt-pill{font-size:10.5px;padding:4px 16px;}
.apt-card .apt-period{position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--font-en,Inter,sans-serif);font-size:10px;color:var(--mut2);letter-spacing:.04em;white-space:nowrap;}
.apt-card-title{font-size:15.5px;font-weight:800;line-height:1.6;text-align:center;margin:0 0 12px;letter-spacing:-0.005em;text-wrap:balance;} /* 日本語は禁則どおり折り、2行の長さを揃える（text-wrap:balance）。縦棒（|）で区切った区間は塊として扱い、境目で折る */
.apt-card-title .seg{display:inline-block;}

/* 締めのクレジット帯：ビジュアル（背景なし・ピンクの＆POSTアイコン＋常時アニメーション）
   ・アイコンはゆっくり上下に浮遊
   ・周りにカードの点と同じ3色（緑・青・オレンジ）の丸が順にポンと現れて消える＝「みんなの声が集まってくる」
   ・OSの「視差効果を減らす」では静止 */
.cb-visual{position:relative;display:grid;place-items:center;}
.cb-visual img{width:clamp(180px,60%,320px);height:auto;display:block;animation:cb-float 5s ease-in-out infinite;}
.cb-visual .cb-orb{position:absolute;width:14px;height:14px;border-radius:50%;opacity:0;transform:scale(.4);pointer-events:none;box-shadow:0 2px 6px rgba(9,10,26,.12);animation:cb-orb 5.4s ease-in-out infinite;}
.cb-visual .cb-orb--g{background:#41e59a;left:16%;top:22%;animation-delay:0s;}
.cb-visual .cb-orb--b{background:#41a9e5;right:17%;top:18%;animation-delay:1.8s;}
.cb-visual .cb-orb--o{background:#e5a941;right:22%;bottom:20%;animation-delay:3.6s;}
@keyframes cb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes cb-orb{0%,30%,100%{opacity:0;transform:scale(.4)}5%{opacity:1;transform:scale(1.15)}8%,22%{opacity:1;transform:scale(1)}}
@media(max-width:860px){ .cb-visual img{width:clamp(160px,44vw,220px);} }
@media(prefers-reduced-motion:reduce){ .cb-visual img,.cb-visual .cb-orb{animation:none;} .cb-visual .cb-orb{opacity:1;transform:none;} }
.apt-card-desc{font-size:12px;color:var(--sub2);line-height:1.9;margin:0 0 20px;flex:1;}
.apt-card-cta{font-size:12px;font-weight:700;color:var(--pk);text-align:center;letter-spacing:.02em;padding-right:24px;margin-top:auto;} /* 説明文なしでも下端に */
.apt-dot{position:absolute;right:22px;bottom:18px;width:13px;height:13px;border-radius:50%;background:var(--dot);}
.apt-grid + .pager{margin-top:clamp(8px,1.5vw,16px);}

@media(max-width:1024px){ .apt-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:768px){
  .apt-grid{grid-template-columns:1fr;max-width:440px;}
  .apt-sec-head{justify-content:space-between;gap:12px;}
  .apt-pcard-title{font-size:clamp(1.2rem,5.5vw,1.6rem);}
  .apt-card{padding:24px 22px 30px;}
}

/* ===== 一覧：AndPOSTの記事（タグ引き） ===== */
.articles{max-width:1080px;margin:0 auto clamp(72px,10vw,110px);padding:0 var(--px,24px);}
.articles .list-header{padding:0;}
.article-list{border-top:1px solid var(--line2);}
.arow{display:flex;align-items:baseline;gap:18px;padding:18px 4px;border-bottom:1px solid var(--line2);text-decoration:none;color:var(--ink2);transition:color .2s ease;}
.arow:hover .at{color:var(--pk);}
.arow .ad{font-family:var(--font-en,Inter,sans-serif);font-size:11.5px;color:var(--mut2);flex:none;letter-spacing:.04em;}
.arow .at{font-size:14px;font-weight:600;line-height:1.7;transition:color .2s ease;}
.arow .aa{margin-left:auto;color:var(--mut2);font-size:13px;flex:none;}

/* ===== 一覧：紹介クレジット帯 ===== */
.credit-band{padding:clamp(56px,8vw,88px) 0;background:#f7f7f7;}
.cb-inner{max-width:1080px;margin:0 auto;padding:0 var(--px,24px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center;}
.cb-copy{text-align:left;}
.cb-logo{display:flex;align-items:center;justify-content:flex-start;gap:11px;margin-bottom:18px;}

.cb-wordmark{font-family:var(--font-en,Inter,sans-serif);font-size:34px;font-weight:800;letter-spacing:-0.01em;color:var(--ink2);line-height:1;}
.cb-wordmark .pk{color:var(--pk);}
.cb-desc{font-size:13.5px;color:var(--sub2);line-height:2.15;margin:0;}
.cb-photo{
  aspect-ratio:4/3;background:#fff;border:1px solid var(--line2);border-radius:var(--radius-xl,28px);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.cb-photo span{font-size:11px;color:var(--mut2);letter-spacing:.04em;line-height:2;}
.cb-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-xl,28px);display:block;}
@media(max-width:860px){ .cb-inner{grid-template-columns:1fr;} .cb-photo{aspect-ratio:16/9;}  }

/* ============================================================
   詳細ページ
   ============================================================ */
.andpost-page{max-width:720px;margin:0 auto;padding:calc(var(--header-h,68px) + clamp(36px,5vw,56px)) var(--px,24px) 0;color:var(--ink2);}
.crumb{font-size:11.5px;color:var(--mut2);margin-bottom:28px;letter-spacing:.02em;}
.crumb a{color:var(--mut2);text-decoration:none;transition:color .2s ease;}
.crumb a:hover{color:var(--pk);}

/* ステータス帯 */

.badge{font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:5px 14px;}
.badge.open{background:var(--pk);color:#fff;}
.badge.open::before{content:"●";font-size:7px;margin-right:6px;animation:ap-blink 1.4s infinite;vertical-align:1px;}
@keyframes ap-blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.badge.counting{background:#f0a52e;color:#fff;}
.badge.results{background:var(--ink2);color:#fff;}

.andpost-page h1{font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:700;line-height:1.55;letter-spacing:-0.01em;margin-bottom:16px;}

/* ===== 投票UI ===== */
.vote-note{font-size:13.5px;color:var(--sub2);line-height:2.1;margin-bottom:26px;}

.cmt{width:100%;box-sizing:border-box;border:1px solid var(--line2);border-radius:var(--radius-sm,6px);padding:10px 14px;font-family:inherit;font-size:13.5px;line-height:1.8;resize:vertical;background:#fff;color:var(--ink2);}
.cmt:focus{outline:none;border-color:var(--pk);}

.rrow .face img {width:100%;height:100%;object-fit:cover;display:block;}

/* 送信完了 */
.thanks{text-align:center;padding:28px 0 10px;}

.thanks .en{font-family:var(--font-en,Inter,sans-serif);font-size:clamp(32px,5.4vw,44px);font-weight:800;letter-spacing:.06em;margin-bottom:20px;color:var(--pk);}

.thanks p{font-size:13.5px;color:var(--sub2);line-height:2.1;margin-bottom:28px;}

/* 集計中 */
.counting-box{text-align:center;padding:44px 0 20px;}
.counting-box .big{font-size:clamp(20px,3vw,24px);font-weight:700;margin-bottom:14px;letter-spacing:-0.005em;}
.counting-box p{font-size:13.5px;color:var(--sub2);line-height:2.15;margin-bottom:28px;}

/* ===== 結果表示 ===== */
.andpost-page h2{font-size:17px;font-weight:700;margin:46px 0 18px;display:flex;align-items:center;gap:11px;letter-spacing:-0.005em;}
.andpost-page h2::before{content:"";width:3px;height:17px;background:var(--pk);border-radius:2px;flex:none;}
.rank{display:flex;flex-direction:column;gap:10px;}
.rank .empty{background:var(--alt2);border:1px solid #f0f0f3;border-radius:var(--radius-md,12px);padding:24px;font-size:12.5px;color:var(--sub2);text-align:center;}
.rrow{background:#fff;border:1px solid var(--line2);border-radius:var(--radius-md,12px);padding:15px 18px;transition:border-color .3s var(--ease2);}
.rrow:hover{border-color:#c9c9d1;}
.rrow .top{display:flex;align-items:center;gap:12px;margin-bottom:9px;}
.rrow .pos{font-family:var(--font-en,Inter,sans-serif);font-size:12px;font-weight:600;color:var(--mut2);width:34px;flex:none;}
.rrow.first .pos{color:var(--pk);font-size:14px;font-weight:700;}
.rrow .face{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;overflow:hidden;}
.rrow .nm{font-size:14px;font-weight:600;flex:1;}
.rrow.first .nm{font-size:16px;font-weight:700;}
.rrow .nm.oth{color:var(--sub2);font-weight:500;}
.rrow .val{font-family:var(--font-en,Inter,sans-serif);font-size:14px;font-weight:600;}
.rrow.first .val{font-weight:700;}
.rrow .val small{font-size:10.5px;color:var(--mut2);font-weight:500;margin-left:6px;}
.bar{height:7px;background:#f1f1f4;border-radius:4px;overflow:hidden;position:relative;}
.bar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--pk);border-radius:4px;}
.bar .fill.oth{background:#cfcfd6;}

.article-cta{text-align:center;margin:38px 0 6px;}
.article-cta a{display:inline-block;background:var(--pk);color:#fff;font-size:13px;font-weight:700;border-radius:var(--radius-sm,8px);padding:14px 32px;text-decoration:none;transition:transform .2s ease,opacity .2s ease;}
.article-cta a:hover{transform:translateY(-1px);opacity:.92;}

.backlink{text-align:center;padding-bottom:80px;}
.backlink a{font-size:12.5px;font-weight:500;color:var(--ink2);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .2s ease;}
.backlink a:hover{color:var(--pk);}

/* 特別お題（商品化連動） */
.vote-note a{color:var(--pk);}
.vote-note b{color:var(--ink2);}

/* ===== 埋め込みモード（?embed=1）=====
   AIM1等のパートナーサイトに iframe で置く想定。
   ヘッダー・フッター・パンくずを消し、AndPOSTのブランド表記は必ず残す */
body.is-embed .site-header,
body.is-embed .footer-mega,
body.is-embed .crumb,
body.is-embed .backlink{display:none;}
body.is-embed .andpost-page{padding-top:28px;max-width:640px;}
/* 主催表記は自社サイト内では非表示・埋め込み（外部サイト設置）時のみ表示 */

/* 埋め込み時もiframe内に権利表記を残す（footer非表示の代替） */
   /* 旧：埋め込み時だけの固定文言。現行は .ap-credit（お題ごとの権利表記・常時表示） */

.ap-credit{font-size:10.5px;color:var(--mut2);text-align:center;padding:8px 24px 28px;margin:0;letter-spacing:.02em;}

/* ============================================================
   詳細ページ v4（2026-08-25 改装）
   ・仕様の実体：~/OW/AndPOST_単一レイアウト自動調整_モック_20260825.html
   ・レイアウトは1種（中央寄せの丸顔グリッド）。自動調整は「8個以下＝円が大」のみ
   ・掟：答える前は白黒、選ぶと色がつく
   ・旧詳細スタイル（.vgrid/.vopt/.thanks等）はテンプレートから参照されなく
     なったが後方互換のため残置。以下はすべて .apv4 スコープ
   ============================================================ */
.andpost-page.apv4{max-width:none;padding-left:0;padding-right:0;}
.apv4 .crumb{max-width:720px;margin:0 auto 8px;padding:0 24px;}

/* ヘッド */
.apv4 .ap-head{text-align:center;padding:clamp(28px,5vw,56px) 24px 0;}
.apv4 .ap-kicker{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:26px;}
.apv4 .ap-kicker small{display:block;font-size:9.5px;color:var(--mut2);font-weight:600;letter-spacing:.14em;margin-top:4px;text-transform:uppercase;}
.apv4 .ap-title{font-size:clamp(1.9rem,5.4vw,3.2rem);font-weight:900;line-height:1.45;letter-spacing:-0.015em;max-width:880px;margin:0 auto 22px;text-wrap:balance;}
.apv4 .ap-desc{font-size:13.5px;color:var(--sub2);line-height:2.1;max-width:600px;margin:0 auto 20px;}
.apv4 .ap-quiet{font-size:12.5px;color:var(--sub2);}
.apv4 .ap-quiet:empty{display:none;}
.apv4 .ap-chips{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.apv4 .ap-chips > span{display:inline-block;border-radius:999px;padding:5px 16px;font-size:12px;font-weight:800;letter-spacing:.04em;}
.apv4 .ap-live{background:var(--pk);color:#fff;}
.apv4 .ap-live::before{content:"●";font-size:7px;margin-right:6px;vertical-align:1px;animation:ap-blink 1.4s infinite;}
.apv4 .ap-days{background:#fff5f9;border:1.5px solid #ffd6e6;color:var(--pk);font-family:var(--font-en,Inter,sans-serif);}
.apv4 .ap-days.hot{background:var(--pk);border-color:var(--pk);color:#fff;}
.apv4 .ap-count{background:#fff;border:1.5px solid var(--line2);color:var(--sub2);font-family:var(--font-en,Inter,sans-serif);}
.apv4 .ap-chips > span.hidden{display:none;}

/* 確定ゾーン（ロスターの下に開く。上下に大きく余白をとる） */
.apv4 .ap-commit{text-align:center;max-height:0;overflow:hidden;opacity:0;padding:0 24px;transition:max-height .6s var(--ease2),opacity .5s ease .1s,padding .6s var(--ease2);}
.apv4 .ap-commit.show{max-height:820px;opacity:1;padding:clamp(48px,7vw,84px) 24px 90px;}
.apv4 .cface{width:96px;height:96px;border-radius:50%;margin:6px auto 22px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:32px;font-family:var(--font-en,Inter,sans-serif);overflow:hidden;}
.apv4 .cface img{width:100%;height:100%;object-fit:cover;display:block;}
.apv4 .pick-label{display:block;justify-content:center;text-align:center;font-size:clamp(19px,2.6vw,23px);font-weight:900;color:var(--ink2);letter-spacing:.01em;margin:0 0 26px;}
.apv4 .pick-label::before{display:none;}
.apv4 .declare{font-size:clamp(24px,3.6vw,32px);font-weight:900;line-height:1.5;margin:0 0 30px;color:var(--pk);}
.apv4 .oneword{display:block;width:min(400px,86%);margin:0 auto 10px;border:none;border-bottom:1px solid var(--line2);background:none;font-family:inherit;font-size:14px;text-align:center;padding:10px 4px;color:var(--ink2);}
.apv4 .ap-cmt-note{font-size:11px;color:var(--mut2);margin:0 auto 34px;max-width:400px;line-height:1.9;}
.apv4 .oneword:focus{outline:none;border-bottom-color:var(--ink2);}
.apv4 .oneword::placeholder{color:var(--mut2);}
.apv4 .vote-go{background:var(--pk);color:#fff;border:none;border-radius:999px;font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.02em;padding:14px 44px;cursor:pointer;box-shadow:0 8px 24px rgba(255,0,98,.24);transition:transform .2s ease;}
.apv4 .vote-go:hover{transform:scale(1.03);}

/* 選択肢の見出し（管理画面「選択肢の見出し」・空なら出ない） */
.apv4 .ap-choose{justify-content:center;text-align:center;font-size:clamp(19px,2.6vw,23px);font-weight:900;letter-spacing:.01em;margin:clamp(56px,7vw,80px) 24px 0;}
.apv4 .ap-choose::before{display:none;}

/* ロスター：中央寄せの丸顔グリッド（唯一のレイアウト） */
.apv4 .ap-roster{width:min(1000px,calc(100vw - 32px));margin:0 auto;padding:clamp(28px,4vw,48px) 0 40px;}
.apv4 .pool{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:30px 18px;--optw:88px;}
.apv4 .opt{vertical-align:top;}
.apv4 .pool.roomy{--optw:clamp(110px,16vw,150px);gap:34px 26px;}
.apv4 .opt{border:none;background:none;cursor:pointer;text-align:center;padding:0;width:var(--optw);font-family:inherit;}
.apv4 .opt .face{display:flex;width:100%;aspect-ratio:1;border-radius:50%;margin:0 auto 10px;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:calc(var(--optw) * .3);font-family:var(--font-en,Inter,sans-serif);overflow:hidden;transition:transform .45s var(--ease2),box-shadow .45s ease;}
.apv4 .opt .face img{width:100%;height:100%;object-fit:cover;display:block;}
.apv4 .opt .nm{display:block;font-size:12px;font-weight:500;color:var(--sub2);line-height:1.5;transition:color .3s ease;}
.apv4 .pool.roomy .nm{font-size:14px;font-weight:700;}
.apv4 .opt:hover .face{transform:scale(1.1);box-shadow:0 10px 26px rgba(9,10,26,.18);}
.apv4 .opt:hover .nm{color:var(--ink2);}
.apv4 .opt.sel .face{transform:scale(1.1);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--pk);}
.apv4 .opt.sel .nm{color:var(--pk);font-weight:700;}

/* サンクス */
.apv4 .ap-thanks{text-align:center;padding:clamp(20px,4vw,40px) 24px 0;}
.apv4 .thx-en{display:block;justify-content:center;font-family:var(--font-en,Inter,sans-serif);font-size:clamp(34px,6vw,52px);font-weight:900;letter-spacing:.05em;color:var(--pk);margin:0 0 30px;text-align:center;}
.apv4 .thx-en::before{display:none;}
/* サンクス・集計中：ヘッドを畳む（タイトルは小さな文脈行に・説明文/チップ/補足行は消す） */
body.is-compact .apv4 .ap-title{font-size:14px;font-weight:700;color:var(--sub2);letter-spacing:.02em;margin:0 auto 4px;}
body.is-compact .apv4 .ap-desc,
body.is-compact .apv4 .ap-chips,
body.is-compact .apv4 .ap-quiet{display:none;}
body.is-compact .apv4 .ap-head{padding-top:clamp(16px,3vw,28px);}
body.is-compact .apv4 .ap-kicker{margin-bottom:14px;}
.apv4 .ap-thanks .cface{width:120px;height:120px;font-size:40px;margin:0 auto 24px;}
.apv4 .ap-thanks .declare{margin-bottom:10px;}
.apv4 .ap-thanks-lead{font-size:13.5px;color:var(--sub2);margin-bottom:34px;}
.apv4 .ap-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;}
.apv4 .abtn{display:inline-block;border-radius:999px;font-size:13px;font-weight:600;padding:12px 28px;text-decoration:none;cursor:pointer;border:none;transition:transform .2s ease,background .25s ease,border-color .25s ease;}
.apv4 .abtn:hover{transform:translateY(-1px);}
.apv4 .abtn.x{background:var(--ink2);color:#fff;}
.apv4 .abtn.x:hover{background:var(--pk);}
.apv4 .abtn.f{background:#fff;color:var(--ink2);border:1px solid var(--line2);}
.apv4 .abtn.f:hover{border-color:var(--ink2);}

/* 集計中・結果・途中経過の器 */
.apv4 .ap-block{max-width:720px;margin:0 auto;padding:0 24px;}
.apv4 .counting-box{max-width:640px;margin:0 auto;padding-left:24px;padding-right:24px;}
.apv4 .backlink{padding-top:24px;}
.apv4 .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ===== みんなのひとこと（承認済みコメント。3面共通の声スタイル） ===== */
.apv4 .ap-voices{max-width:480px;margin:0 auto 36px;text-align:left;}

.apv4 .ap-voices-thanks{margin-top:16px;margin-bottom:10px;}

/* 投票後の案内カード（管理画面「投票後の案内」） */
.apv4 .ap-thanks-note{max-width:480px;margin:22px auto 0;background:var(--alt2);border:1px solid #f0f0f3;border-radius:14px;padding:16px 22px;font-size:12.5px;color:var(--sub2);line-height:2;text-align:center;}
.apv4 .ap-thanks-note a{color:var(--pk);font-weight:700;text-decoration:none;}

/* ===== 一覧：みんなのひとこと帯 ===== */

/* 埋め込み（?embed=1）調整 */
body.is-embed .apv4 .ap-head{padding-top:8px;}
body.is-embed .apv4 .ap-roster{padding-bottom:40px;}

/* ============================================================
   詳細ページ v5（2026-09-05・プレビュー AndPOST_投票ページ_プレビュー を移植）
   .apv4 の土台（ロスター・確定ゾーン・サンクス・ランキング）を継承し、.apv5 で上書き
   ・ヘッド：大ロゴ → 中央揃えパンくず → タイトル → 「● あと◯日」ピル＋締切
   ・入り：幕（受付中ピンク／集計中グレー／結果ピンク）→ スタンプで一気に
   ・掲載コメント＝素材形の吹き出し（最大4件・件数別スロット・浮遊）／顔180px
   ・コメント必須（50文字）・確認モーダル・自分のコメント＋コピー・みんなのコメント
   ============================================================ */
/* ── ヘッド ── */
.apv5 .ap-head{padding-top:clamp(36px,5vw,64px);padding-bottom:0;}
.apv5 .vp-logo{display:block;width:clamp(200px,26vw,320px);margin:0 auto 22px;}
.apv5 .vp-logo img{width:100%;height:auto;display:block;}
.apv5 .crumb{text-align:center;max-width:none;margin:0 auto clamp(30px,3.6vw,44px);padding:0 24px;font-size:11.5px;color:var(--mut2);}
.apv5 .crumb a{color:var(--mut2);text-decoration:none;} .apv5 .crumb b{color:var(--sub2);font-weight:600;}
.apv5 .ap-title{margin-bottom:clamp(16px,2vw,24px);}
.apv5 .ap-chips{gap:14px;margin-bottom:0;}
.apv5 .ap-days{background:var(--pk);border-color:var(--pk);color:#fff;font-family:var(--font-ja);font-weight:800;}
.apv5 .ap-days::before{content:"●";font-size:7px;margin-right:6px;vertical-align:1px;animation:ap-blink 1.4s infinite;}
.apv5 .ap-days.hidden{display:none;}
.apv5 .ap-deadline{font-size:12.5px;color:var(--sub2);font-weight:600;letter-spacing:.02em;}
.apv5 .ap-deadline:empty{display:none;}
body.st-counting .apv5 .ap-days,body.st-results .apv5 .ap-days{background:var(--ink2);border-color:var(--ink2);color:#fff;}
body.st-counting .apv5 .ap-days::before,body.st-results .apv5 .ap-days::before{animation:none;opacity:.9;}
.apv5 .js-state-open > .ap-desc{margin-top:clamp(32px,4vw,48px);margin-bottom:clamp(20px,2.4vw,28px);text-align:center;padding:0 24px;}
@media(max-width:600px){.apv5 .js-state-open > .ap-desc{text-align:left;}} /* SPは行が短く中央揃えだと段が崩れて見えるので左揃え */
.apv5 .js-state-open > .ap-quiet{text-align:center;margin-bottom:0;}
.apv5 .ap-choose{margin-top:clamp(64px,8vw,96px);text-wrap:balance;}
body.st-thanks .apv5 .ap-title{display:none;}
body.is-compact .apv5 .ap-title{font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit;margin:0 auto clamp(16px,2vw,24px);} /* v4の圧縮表示は使わない */
body.is-compact .apv5 .ap-chips,body.is-compact .apv5 .ap-desc{display:flex;}
/* ── 幕 ── */
.apv5 .opening{position:fixed;inset:0;z-index:200;pointer-events:none;}
.apv5 .opening .op-half{position:absolute;left:0;right:0;height:50.5%;background:var(--pk);transition:transform .75s var(--ease2);}
.apv5 .opening .op-top{top:0;} .apv5 .opening .op-bottom{bottom:0;}
.apv5 .opening .op-line{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scaleX(1);width:min(240px,56vw);height:5px;border-radius:3px;background:#fff;transition:opacity .3s ease;}
.apv5 .opening .op-dot{position:absolute;right:clamp(18px,3.4vw,52px);bottom:clamp(18px,3.4vw,52px);width:clamp(14px,1.4vw,20px);height:clamp(14px,1.4vw,20px);border-radius:50%;background:#fff;}
.apv5 .opening.split .op-top{transform:translateY(-101%);} .apv5 .opening.split .op-bottom{transform:translateY(101%);} .apv5 .opening.split .op-line{opacity:0;}
.apv5 .opening.off{display:none;}
body.st-counting .apv5 .opening .op-half{background:#aaaaaa;}
.apv5 .opening.closing .op-half{transition:transform .6s cubic-bezier(.16,1,.3,1);}
.apv5 .opening.closing .op-line{opacity:1;transform:translate(-50%,-50%) scaleX(0);transition:transform .4s cubic-bezier(.16,1,.3,1) .45s;}
.apv5 .opening.closing.shut .op-line{transform:translate(-50%,-50%) scaleX(1);}
/* ── 入り（スタンプ・一気に）。.is-intro のときだけ pre 状態にする ── */
.apv5.is-intro .vp-logo,.apv5.is-intro .crumb{opacity:0;transform:translateY(8px);transition:opacity .55s var(--ease2),transform .55s var(--ease2);}
.apv5.is-intro.go .vp-logo,.apv5.is-intro.go .crumb{opacity:1;transform:none;} .apv5.is-intro.go .crumb{transition-delay:.1s;}
.apv5.is-intro .ap-title{opacity:0;transform:scale(1.5) rotate(-3deg);}
.apv5.is-intro.go .ap-title{opacity:1;transform:none;transition:opacity .22s ease .3s,transform .35s cubic-bezier(.2,1.4,.4,1) .3s;}
.apv5.is-intro.go .ap-head{animation:ap-thump .3s ease .57s;}
@keyframes ap-thump{0%,100%{transform:none}35%{transform:translateY(3px)}}
.apv5.is-intro .ap-days{opacity:0;transform:scale(2.2) rotate(-10deg);}
.apv5.is-intro.go .ap-days{opacity:1;transform:none;transition:opacity .18s ease .45s,transform .35s cubic-bezier(.2,1.4,.4,1) .45s;}
.apv5.is-intro .ap-deadline,.apv5.is-intro .ap-desc,.apv5.is-intro .ap-quiet,.apv5.is-intro .ap-choose,.apv5.is-intro .counting-box .big,.apv5.is-intro .counting-box p,.apv5.is-intro .counting-box .abtn,.apv5.is-intro .ap-browse{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease2) .5s,transform .6s var(--ease2) .5s;}
.apv5.is-intro.go .ap-deadline,.apv5.is-intro.go .ap-desc,.apv5.is-intro.go .ap-quiet,.apv5.is-intro.go .ap-choose,.apv5.is-intro.go .counting-box .big,.apv5.is-intro.go .counting-box p,.apv5.is-intro.go .counting-box .abtn,.apv5.is-intro.go .ap-browse{opacity:1;transform:none;}
.apv5.is-intro .js-state-open .opt{opacity:0;transform:translateY(14px);}
.apv5.is-intro.go .js-state-open .opt{opacity:1;transform:none;transition:opacity .5s var(--ease2) .55s,transform .6s var(--ease2) .55s;}
/* 結果発表：1位がポン → 棒が伸びる */
.apv5.is-intro .ap-winner{opacity:0;transform:scale(.7);}
.apv5.is-intro.go .ap-winner{animation:ap-winpop .6s .75s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes ap-winpop{to{opacity:1;transform:none}}
.apv5.is-intro .rank-h,.apv5.is-intro .rrow,.apv5.is-intro .article-cta,.apv5.is-intro .js-results-lead{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease2),transform .5s var(--ease2);}
.apv5.is-intro.go .rank-h,.apv5.is-intro.go .rrow,.apv5.is-intro.go .article-cta,.apv5.is-intro.go .js-results-lead{opacity:1;transform:none;}
.apv5.is-intro.go .rank-h{transition-delay:1.2s;} .apv5.is-intro.go .rrow{transition-delay:calc(1.3s + var(--i,0)*90ms);} .apv5.is-intro.go .article-cta{transition-delay:2.2s;}
.apv5.is-intro .bar .fill{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1);}
.apv5.is-intro.go .bar .fill{transform:scaleX(1);transition-delay:calc(1.5s + var(--i,0)*90ms);}
.apv5 .ap-winner .win-burst i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;opacity:0;}
.apv5.is-intro.go .ap-winner .win-burst i{animation:ap-fly 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(1.05s + var(--d,0s));}
@keyframes ap-fly{0%{opacity:1;transform:translate(0,0) scale(.6)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
/* ── 集計中 ── */
.apv5 .counting-box{text-align:center;padding:clamp(28px,4vw,48px) 24px 8px;}
.apv5 .counting-box .big{font-size:clamp(20px,3vw,26px);font-weight:900;margin-bottom:14px;letter-spacing:-.005em;color:var(--pk);text-wrap:balance;}
.apv5 .counting-box p{font-size:13.5px;color:var(--sub2);line-height:2.1;margin-bottom:26px;}
.apv5 .counting-box p:empty{display:none;}
/* ── 結果発表 ── */
.apv5 .ap-results{max-width:720px;margin:0 auto;padding:0 24px;}
.apv5 .ap-results .rank-h{display:block;text-align:center;font-size:clamp(19px,2.6vw,23px);font-weight:900;letter-spacing:.01em;margin:clamp(24px,3vw,40px) 0 18px;}
.apv5 .ap-results .rank-h::before{display:none;}
.apv5 .ap-results .rrow{border-width:1.5px;border-radius:16px;padding:16px 20px;}
.apv5 .ap-results .rrow.first{border-color:var(--pk);border-width:2.5px;border-radius:16px 16px 16px 0;}
.apv5 .ap-results .rrow .face img{width:100%;height:100%;object-fit:cover;display:block;}
.apv5 .ap-results .rrow.first .face{width:44px;height:44px;}
.apv5 .ap-results .article-cta a{border-radius:999px;}
.apv5 .ap-winner{text-align:center;margin:clamp(28px,4vw,48px) auto clamp(24px,3vw,36px);}
.apv5 .ap-winner.hidden{display:none;}
.apv5 .ap-winner .crown{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--pk);font-family:var(--font-en,Inter,sans-serif);margin-bottom:10px;}
.apv5 .ap-winner .win-face{position:relative;display:inline-block;margin:0 auto 14px;}
.apv5 .ap-winner .win-face .cface{width:180px;height:180px;font-size:52px;margin:0;}   /* 選択時・投票後と同じ180px（1位が小さく見えないように） */
@media(max-width:760px){.apv5 .ap-winner .win-face .cface{width:140px;height:140px;font-size:42px;}}
.apv5 .ap-winner .win-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;}
.apv5 .ap-winner .declare{margin-bottom:4px;}
.apv5 .ap-winner .pct{font-family:var(--font-en,Inter,sans-serif);font-size:15px;font-weight:700;color:var(--sub2);}
.apv5 .ap-winner .pct b{color:var(--pk);font-size:22px;margin-right:4px;}
/* ── 確定ゾーン：顔180px＋吹き出し ── */
.apv5 .ap-commit.show{max-height:2600px;}
.apv5 .cstage{position:relative;width:min(1000px,100%);min-height:180px;margin:6px auto 22px;display:flex;justify-content:center;align-items:center;--x:clamp(110px,11vw,170px);--bw:176px;}
.apv5 .cstage .cface{width:180px;height:180px;font-size:52px;margin:0;position:relative;z-index:1;}
.apv5 .cstage.n1,.apv5 .cstage.n2{min-height:200px;margin:14px auto 26px;}
.apv5 .cstage.n3,.apv5 .cstage.n4{min-height:360px;margin:28px auto 64px;}
.apv5 .cbub{position:absolute;width:176px;min-height:150px;display:flex;align-items:center;background:#fff;border:2.5px solid var(--pk);border-radius:16px 16px 16px 0;padding:16px 26px 18px 18px;font-size:12px;line-height:1.75;color:var(--ink2);text-align:left;opacity:0;transform:scale(.7);z-index:2;}
.apv5 .cbub.staff{border-color:var(--ink2);}
.apv5 .cbub small{position:absolute;left:18px;bottom:8px;font-size:10px;color:var(--mut2);letter-spacing:.04em;}
.apv5 .cbub::before{content:"";position:absolute;right:10px;bottom:10px;width:8px;height:8px;border-radius:50%;background:#41e59a;}
.apv5 .cbub.staff::before{background:#41a9e5;}
.apv5 .cbub .ctail{position:absolute;left:-2.5px;top:100%;width:40px;height:29px;overflow:visible;pointer-events:none;display:block;}
.apv5 .cbub .ctail .fill{fill:#fff;} .apv5 .cbub .ctail .line{fill:none;stroke:var(--pk);stroke-width:2.5;stroke-miterlimit:10;}
.apv5 .cbub.staff .ctail .line{stroke:var(--ink2);}
.apv5 .cbub.p-r {left:calc(50% + var(--x));top:50%;transform:translateY(-50%) scale(.7);}
.apv5 .cbub.p-l {left:calc(50% - var(--x) - var(--bw));top:50%;transform:translateY(-50%) scale(.7);}
.apv5 .cbub.p-r1{left:calc(50% + var(--x));top:0;} .apv5 .cbub.p-r2{left:calc(50% + var(--x));bottom:0;}
.apv5 .cbub.p-l1{left:calc(50% - var(--x) - var(--bw));top:0;} .apv5 .cbub.p-l2{left:calc(50% - var(--x) - var(--bw));bottom:0;}
@keyframes ap-cbub-in{to{opacity:1;transform:scale(1)}}
@keyframes ap-cbub-in-c{to{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes ap-drift1{0%,100%{translate:0 0}40%{translate:2px -9px}70%{translate:-1px -4px}}
@keyframes ap-drift2{0%,100%{translate:0 0}35%{translate:-2px -6px}65%{translate:1px -11px}}
@keyframes ap-drift3{0%,100%{translate:0 0}50%{translate:-1px -8px}80%{translate:2px -2px}}
@keyframes ap-drift4{0%,100%{translate:0 0}45%{translate:1px -7px}75%{translate:-2px -10px}}
.apv5 .ap-commit.show .cbub.b1,.apv5 .bstage.show .cbub.b1{animation:ap-cbub-in .5s .35s cubic-bezier(.34,1.56,.64,1) forwards, ap-drift1 6.2s ease-in-out 1s infinite;}
.apv5 .ap-commit.show .cbub.b2,.apv5 .bstage.show .cbub.b2{animation:ap-cbub-in .5s .55s cubic-bezier(.34,1.56,.64,1) forwards, ap-drift2 5.1s ease-in-out 1.4s infinite;}
.apv5 .ap-commit.show .cbub.b3,.apv5 .bstage.show .cbub.b3{animation:ap-cbub-in .5s .75s cubic-bezier(.34,1.56,.64,1) forwards, ap-drift3 7.3s ease-in-out .6s infinite;}
.apv5 .ap-commit.show .cbub.b4,.apv5 .bstage.show .cbub.b4{animation:ap-cbub-in .5s .95s cubic-bezier(.34,1.56,.64,1) forwards, ap-drift4 6.8s ease-in-out 1.2s infinite;}
.apv5 .ap-commit.show .cbub.p-r,.apv5 .ap-commit.show .cbub.p-l,.apv5 .bstage.show .cbub.p-r,.apv5 .bstage.show .cbub.p-l{animation-name:ap-cbub-in-c,ap-drift1;}
.apv5 .bstage.show .cbub.b1{animation-delay:.1s,1s;} .apv5 .bstage.show .cbub.b2{animation-delay:.25s,1.4s;} .apv5 .bstage.show .cbub.b3{animation-delay:.4s,.6s;} .apv5 .bstage.show .cbub.b4{animation-delay:.55s,1.2s;}
/* ── コメント欄（必須・50文字・自動で行が増える）── */
.apv5 .ap-cmt-label{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:6px 0 12px;}
.apv5 .ap-cmt-label .q{grid-column:2;font-size:clamp(17px,2.2vw,20px);font-weight:900;letter-spacing:.01em;color:var(--ink2);}
.apv5 .ap-cmt-label .sub{grid-column:3;justify-self:start;margin-left:12px;display:inline-flex;align-items:center;}
.apv5 .ap-cmt-label .req{display:inline-block;background:var(--pk);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:4px;padding:2px 6px;}
.apv5 textarea.oneword{display:block;resize:none!important;overflow:hidden;line-height:1.8;min-height:0;height:auto;font-family:inherit;}
.apv5 .ap-cmt-count{font-size:11px;color:var(--mut2);margin:6px 0 0;letter-spacing:.02em;}
.apv5 .ap-cmt-count .js-cnt{font-family:var(--font-en,Inter,sans-serif);font-weight:600;}
.apv5 .ap-cmt-count.near{color:var(--pk);}
.apv5 .ap-cmt-note{margin-top:8px;}
.apv5 .ap-cmt-hint{font-size:11.5px;color:var(--pk);margin:8px 0 0;min-height:1.2em;}
.apv5 .vote-go[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none;transform:none;}
/* ── 確認モーダル ── */
.apv5 .ap-confirm{position:fixed;inset:0;z-index:400;background:rgba(9,10,26,.55);display:flex;align-items:center;justify-content:center;padding:20px;}
.apv5 .ap-confirm[hidden]{display:none;}
.apv5 .ap-confirm-card{background:#fff;border-radius:24px;padding:clamp(28px,4vw,40px) clamp(22px,4vw,40px);width:min(480px,100%);text-align:center;box-shadow:0 30px 80px rgba(9,10,26,.3);animation:ap-cf-in .35s cubic-bezier(.34,1.4,.64,1) both;}
@keyframes ap-cf-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.apv5 .ap-confirm-card h2{display:block;font-size:clamp(18px,2.4vw,22px);font-weight:900;margin:0 0 20px;letter-spacing:.01em;text-align:center;}
.apv5 .ap-confirm-card h2::before{display:none;}
.apv5 .ap-confirm-card .cface{width:110px;height:110px;margin:0 auto 12px;}
.apv5 .ap-confirm-card .declare{font-size:clamp(20px,3vw,26px);margin:0 0 12px;}
.apv5 .ap-confirm-card .cf-comment{font-size:14px;line-height:1.9;color:var(--ink2);margin:0 0 22px;word-break:break-all;}
.apv5 .ap-confirm-card .cf-actions{display:flex;flex-direction:column;gap:10px;align-items:center;}
.apv5 .ap-confirm-card .vote-go{min-width:220px;}
/* ── サンクス：投票した相手の顔は確定ゾーンと同じ大きさ（180px）に。決めた相手が小さく見えないように ── */
.apv5 .ap-thanks .cface{width:180px;height:180px;font-size:52px;margin:0 auto 20px;}
.apv5 .ap-thanks .declare{margin-bottom:10px;}
@media(max-width:760px){.apv5 .ap-thanks .cface{width:140px;height:140px;font-size:42px;}}
/* ── サンクス：あなたのコメント＋コピー ── */
.apv5 .ap-mycomment{max-width:480px;margin:-10px auto 26px;background:var(--alt2);border:1px solid #f0f0f3;border-radius:16px;padding:16px 18px 14px;text-align:center;}
.apv5 .ap-mycomment .lbl{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--sub2);margin:0 0 6px;}
.apv5 .ap-mycomment .txt{font-size:14px;line-height:1.9;color:var(--ink2);margin:0 0 10px;word-break:break-all;}
.apv5 .ap-mycomment .copy{background:#fff;border:1px solid var(--line2);border-radius:999px;padding:7px 18px;font:600 12px var(--font-ja);color:var(--sub2);cursor:pointer;}
.apv5 .ap-mycomment .copy:hover{border-color:var(--ink2);color:var(--ink2);}
.apv5 .ap-mycomment .copy.done{background:var(--ink2);border-color:var(--ink2);color:#fff;}
.apv5 .ap-mycomment.hidden{display:none;}
/* ── みんなのコメント ── */
.apv5 .ap-browse{max-width:1000px;margin:clamp(40px,6vw,64px) auto 0;padding:0 16px;}
.apv5 .ap-browse.hidden{display:none;}
.apv5 .ap-browse h2{display:block;text-align:center;font-size:clamp(19px,2.6vw,23px);font-weight:900;letter-spacing:.01em;margin:0 0 8px;}
.apv5 .ap-browse h2::before{display:none;}
.apv5 .ap-browse .ap-roster{padding-top:clamp(12px,1.6vw,20px);padding-bottom:0;}
.apv5 .ap-browse .pool{--optw:64px;gap:22px 12px;} .apv5 .ap-browse .pool .opt .nm{font-size:11px;}
.apv5 .ap-browse .opt{opacity:1;transform:none;transition:none;}
.apv5 .ap-browse .opt.none{opacity:.38;filter:grayscale(.6);} .apv5 .ap-browse .opt.none:hover{opacity:.7;}
.apv5 .ap-browse .opt.sel .face{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--pk);}
.apv5 .ap-browse .bstage{display:none;text-align:center;margin-top:clamp(24px,3vw,40px);}
.apv5 .ap-browse .bstage.show{display:block;}
.apv5 .ap-browse .bstage.has-voices.n3,.apv5 .ap-browse .bstage.has-voices.n4{padding-top:16px;}
.apv5 .ap-browse .bstage .declare{font-size:clamp(20px,3vw,26px);margin-bottom:24px;}
.apv5 .ap-browse .bstage .nov{font-size:12.5px;color:var(--mut2);text-align:center;margin:0 0 10px;}
.apv5 .ap-browse .bstage .nov.hidden{display:none;}
/* ── SP ── */
@media(max-width:760px){
  .apv5 .cstage,.apv5 .cstage.n1,.apv5 .cstage.n2,.apv5 .cstage.n3,.apv5 .cstage.n4{display:flex;flex-direction:column;align-items:center;min-height:0;margin:8px auto 24px;width:100%;}
  .apv5 .cstage .cface{width:120px;height:120px;font-size:36px;margin-bottom:6px;}
  .apv5 .cstage .js-sel-voices,.apv5 .cstage .js-bvoices{display:flex;flex-direction:column;gap:30px;width:min(360px,100%);margin-top:16px;padding-bottom:22px;}
  .apv5 .cbub,.apv5 .cbub[class*="p-"]{position:relative;width:auto;min-height:0;display:block;left:auto;right:auto;top:auto;bottom:auto;border-radius:16px 16px 16px 0;padding:11px 28px 12px 16px;font-size:12.5px;line-height:1.7;transform:none;opacity:1;animation:none!important;}
  .apv5 .cbub small{position:static;display:block;margin-top:4px;}
  .apv5 .cbub .ctail{width:36px;height:26px;}
  .apv5 .ap-cmt-label{grid-template-columns:1fr;justify-items:center;gap:6px;} .apv5 .ap-cmt-label .q,.apv5 .ap-cmt-label .sub{grid-column:1;margin-left:0;}
  .apv5 .ap-browse .pool{--optw:56px;gap:16px 8px;}
  .apv5 .ap-browse .bstage{padding-top:12px;}
}
@media(prefers-reduced-motion:reduce){ .apv5 .cbub,.apv5 .ap-winner,.apv5 .ap-winner .win-burst i{animation:none!important;opacity:1;transform:none;} }
/* 一覧 v3：投票ページへ出るときの幕（行き先の状態色。投票ページ側で同じ幕が開く）*/
.apt-curtain{position:fixed;inset:0;z-index:200;pointer-events:none;display:none;}
.apt-curtain.on{display:block;pointer-events:auto;}
.apt-curtain .ct-half{position:absolute;left:0;right:0;height:50.5%;background:#ff0062;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.apt-curtain .ct-top{top:0;transform:translateY(-101%);} .apt-curtain .ct-bottom{bottom:0;transform:translateY(101%);}
.apt-curtain.counting .ct-half{background:#aaaaaa;}
.apt-curtain .ct-line{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scaleX(0);width:min(240px,56vw);height:5px;border-radius:3px;background:#fff;transition:transform .4s cubic-bezier(.16,1,.3,1) .45s;}
.apt-curtain .ct-dot{position:absolute;right:clamp(18px,3.4vw,52px);bottom:clamp(18px,3.4vw,52px);width:clamp(14px,1.4vw,20px);height:clamp(14px,1.4vw,20px);border-radius:50%;background:#fff;}
.apt-curtain.shut .ct-top,.apt-curtain.shut .ct-bottom{transform:none;} .apt-curtain.shut .ct-line{transform:translate(-50%,-50%) scaleX(1);}