@charset "UTF-8";
/* lp-a6: 入社前事件簿の作り込み（2026-10-06 新規）
   既存CSS（offer-a / refinement / art-v2 / polish-v5）の定義は書き換えず、このファイルを最後に読み込んで上書きする。
   1. 書体：丸ゴシック（M PLUS Rounded 1c）と極太（Dela Gothic One）をやめ、角ゴシック極太（Zen Kaku Gothic New）と IBM Plex Mono に
   2. 見出しロゴ：紺のグラデーション＋白フチ＋薄い厚み
   3. 縁取りと色数を整理（太い紺の縁・原色の付箋を、細い縁・やわらかい紙色に）
   4. 地紙・額装・人物のはみ出し（既存の絵だけで）
   5. 体験版：スマホでの人物の重なり・タイトル画面の配置 */

:root{
 --round:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
 --impact:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
 --type:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
 --a6-navy:#1b2d63;
 --a6-navy-d:#101b40;
 --a6-red:#d93d22;
 --a6-paper:#fffdf7;
 --a6-kraft:#f1e6cf;
 --a6-grid:linear-gradient(rgba(41,118,200,.075) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(41,118,200,.075) 1px,transparent 1px) 0 0/28px 28px;
}

/* ---------- 1. 書体 ---------- */
/* refinement.css が見出しに Noto Sans JP を直接指定しているので、同じ範囲を角ゴシックに戻す */
.art-v2 :is(.sec-title,.title-name,.result-title,.ending-title,.final h2,.cutin-word,.story-invitation h2,.production-brief h2,.hero-title,.hero-kicker,.brand-wordmark,.brief-number,.hero-wordmark){font-family:var(--round)}
/* 極太（Dela）で太さ指定が無かった所は 900 を明示 */
.art-v2 :is(.clue-mark,.testify-banner,.choice-key,.result-stamp,.stamp,.folder-stamp,.title-name,.cutin-word,.result-title){font-weight:900}
.art-v2 .brand-wordmark{font-weight:900;letter-spacing:.01em}
.art-v2 .hero-title{font-weight:900;letter-spacing:.01em}
.art-v2 .hero-kicker{font-weight:700}
/* 等幅の欧文ラベル（CASE FILE など）。字間を広げて書類の通し番号らしく */
.art-v2 :is(.label span,.hud-case b,.title-kicker,.pin-step,.folder-tab,.case-no,.case-dl dt,.case-value b,.maker-label,.ending-label,.ev-code){font-family:var(--type);font-weight:600}

/* ---------- 2. 見出しロゴ ---------- */
.art-v2 main :is(.sec-title,.story-invitation h2,.production-brief h2,.final-title){
 font-weight:900;letter-spacing:.01em;color:var(--a6-navy);
 background:linear-gradient(180deg,#2f50a8 0%,#1b2d63 56%,#0f1a3d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 0 #c5d1ec) drop-shadow(0 6px 6px rgba(16,27,64,.08))}
.art-v2 .final-title em{-webkit-text-fill-color:currentColor;color:var(--a6-red)}
/* 見出しを、事件ファイルの紙札（マニラ紙・少し傾け・テープ）に載せる。札の下辺に短い規制線（事件簿の記号） */
.art-v2 main :is(.sec-title,.story-invitation h2,.production-brief h2){position:relative;isolation:isolate;display:block;width:fit-content;max-width:100%;padding:.34em .62em .42em;margin-left:-.3em;margin-bottom:.5em;
 background:none;-webkit-text-fill-color:currentColor;color:var(--a6-navy);filter:none;text-shadow:0 1px 0 #fff,0 3px 0 rgba(27,45,99,.16)}
.art-v2 main .sec-head.center .sec-title{margin-inline:auto}
@media (max-width:560px){
 .art-v2 main :is(.sec-title,.story-invitation h2,.production-brief h2){padding:.3em .5em .38em;margin-left:-.2em}
 /* 「事件を」だけが1行になる改行を防ぐ（札の余白のぶん、1行に収まる大きさに） */
 .art-v2 main #case-title{font-size:min(26px,6.6vw)}
 .art-v2 main :is(.sec-title,.story-invitation h2,.production-brief h2):not(#case-title){font-size:min(28px,6.4vw)}
}
/* 依頼書の紙にしたので、スマホでも紙の内側に余白を */
@media (max-width:760px){.art-v2 .production-brief .brief-grid article{padding-inline:20px}}
.art-v2 main :is(.sec-title,.story-invitation h2,.production-brief h2)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:3px;rotate:-.8deg;
 background:linear-gradient(transparent calc(100% - 1px),rgba(41,118,200,.10) calc(100% - 1px)) 0 0/100% 1.1em,linear-gradient(180deg,#fdf6e2,#f7ebc9);
 border:1px solid rgba(27,45,99,.14);border-left:5px solid var(--a6-red);box-shadow:0 8px 16px rgba(80,50,10,.12)}
.art-v2 main :is(.sec-title,.story-invitation h2,.production-brief h2)::after{content:"";position:absolute;right:.5em;bottom:-.24em;width:64px;height:7px;border-radius:1px;rotate:-2deg;
 background:repeating-linear-gradient(-45deg,#ffd23f 0 7px,var(--a6-navy) 7px 14px)}
.art-v2 .label{font-weight:700;color:#3e4a72}
.art-v2 .label span{font-size:12px;letter-spacing:.16em;padding:4px 12px 3px;border-radius:2px;background:var(--a6-navy);box-shadow:3px 3px 0 var(--a6-red)}
.art-v2 .stage .title-name{background:linear-gradient(180deg,#2f50a8 0%,#1b2d63 60%,#0f1a3d 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.02em}

/* ---------- 3. 縁取りと色数の整理 ---------- */
.art-v2 .btn{border-width:2px}
.art-v2 .btn-sm{box-shadow:0 3px 0 var(--ink)}
.art-v2 :is(.hud-case,.hud-meter,.hud-time,.hud-btn,.hunt,.clue-mark,.clue-card){border-width:2px}
.art-v2 :is(.who,.chip-opt span){border-width:2px;box-shadow:0 2px 0 var(--ink)}
.art-v2 :is(.talk,.ending,.decide-q,.choice,.file-panel-in){border-width:3px;border-radius:16px}
.art-v2 .stage .title-card{border-width:3px;border-radius:16px}
.art-v2 .talk-name{border-width:2px}
.art-v2 .testify-banner{border-width:3px}
.art-v2 .choice-key{border-width:2px;border-radius:8px}
.art-v2 .pin{border-width:2px}
.art-v2 .note{border-width:1.5px;border-color:rgba(27,45,99,.55);box-shadow:0 6px 14px rgba(31,45,90,.10)}
.art-v2 .n-yellow{background:#fff5c8}.art-v2 .n-sky{background:#e3f1ff}.art-v2 .n-mint{background:#e1f5ec}.art-v2 .n-pink{background:#ffe8e2}
.art-v2 .make-list li{border-width:1.5px;border-color:rgba(27,45,99,.5);border-radius:10px;box-shadow:0 4px 12px rgba(31,45,90,.07);background:#fff linear-gradient(90deg,transparent 58px,rgba(217,61,34,.35) 58px 59px,transparent 59px)}
.art-v2 .make-list li::before{border-width:0;border-radius:6px;background:var(--a6-navy);font-family:var(--type);font-weight:600;font-size:14px}
.art-v2 .maker{border-width:2px;border-radius:14px;box-shadow:0 8px 0 rgba(31,45,90,.12);background:#fff9e3}
.art-v2 .maker-name small{border-width:1.5px}
.art-v2 .maker-game{border-width:2px;border-radius:12px;box-shadow:0 3px 0 var(--ink)}
.art-v2 .trail-step{border-width:2px;border-radius:14px}
.art-v2 .trail-no{border-width:2px;box-shadow:0 3px 0 var(--ink);background:var(--a6-navy);font-weight:600}
.art-v2 .trail-goal{background:#ffe27a}
.art-v2 .trail-goal .trail-no{background:var(--a6-red)}
.art-v2 .memo{border-width:2px}
.art-v2 .qa summary::before{background:var(--a6-navy);border:0;font-weight:600}
.art-v2 .folder-paper{border-width:2px}
.art-v2 .folder-tab{border-width:2px}
.art-v2 .folder-stamp{border-width:2px}
.art-v2 .final-card{border-width:3px;border-radius:18px;box-shadow:0 8px 0 var(--ink)}
.art-v2 .file-panel-title{font-weight:900}
/* ヒーローの手がかりカードの見出し（手がかり 1 等）が 11px だったので 12px に */
.art-v2 .clue-card b{font-size:12px}
/* 右端に近い手がかりの札は、画面の外へ出ないよう左へ開く（offer-a.js が is-edge-r を付ける） */
.art-v2 .clue.is-edge-r .clue-card{left:auto;right:0;translate:none}
/* 絵の下半分の手がかりは、札を上へ開く（絵の下の見出しや文章にかからないように） */
.art-v2 .clue.is-edge-b .clue-card{top:auto;bottom:calc(100% + 8px)}
/* 1040px以下は絵が狭く札どうしが重なるので、見つけた札は虫めがねが近くにある間だけ出す（見つけた印は残る） */
@media (max-width:1040px){
 .art-v2 .clue.is-found .clue-card{opacity:0}
 .art-v2 .clue.is-found.is-near .clue-card{opacity:1}
}

/* ---------- 4. 地紙・額装・人物 ---------- */
/* 方眼の地紙（捜査ノート） */
.art-v2 .uses{background:var(--a6-grid),#fffaf0}
.art-v2 .flow{background:var(--a6-grid),linear-gradient(180deg,#eef7ff 0%,#fbfdff 100%)}
.art-v2 .faq{background:radial-gradient(circle at 20% 30%,rgba(0,0,0,.05) 1px,transparent 1.6px) 0 0/9px 9px,linear-gradient(180deg,#f7efe0 0%,#f1e4c8 100%)}
.art-v2 .faq{position:relative;overflow:hidden}
.art-v2 .faq .memo{z-index:1;box-shadow:0 12px 0 rgba(31,45,90,.10),0 24px 40px rgba(80,50,10,.12)}
/* 導入ご担当者向け：依頼書の紙をクリップで留めた形に */
.art-v2 .production-brief{position:relative;overflow:hidden;background:radial-gradient(circle at 30% 40%,rgba(120,84,30,.06) 1px,transparent 1.6px) 0 0/8px 8px,linear-gradient(180deg,#f6eddb 0%,#efe2c6 100%);border-block:1px solid #e0cfa8}
.art-v2 .production-brief .wrap{position:relative}
.art-v2 .production-brief .brief-grid{position:relative;background:var(--a6-paper);border:1.5px solid rgba(27,45,99,.35);border-top:4px solid var(--a6-red);border-radius:4px;box-shadow:0 10px 0 rgba(120,84,30,.10),0 22px 40px rgba(80,50,10,.12)}
.art-v2 .production-brief .brief-grid::before{content:"";position:absolute;left:50%;top:-16px;width:110px;height:26px;translate:-50% 0;rotate:-2deg;background:rgba(255,255,255,.78);border:1px solid rgba(27,45,99,.18);box-shadow:0 2px 4px rgba(0,0,0,.06)}
.art-v2 .brief-number{font-family:var(--type);font-weight:600;color:var(--a6-red);border-bottom-color:var(--a6-navy)}
/* 人物のはみ出し（既存の立ち絵）。PCだけ、文字にかからない余白に置く */
.a6-peek{position:absolute;z-index:0;width:auto;max-width:none;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(31,45,90,.18));display:none}
/* 導入節の森（証拠ファイルを掲げる別ポーズ）。場面の写真の右に、写真と並ぶ幅のときだけ */
@media (min-width:1280px){
 .art-v2 .a6-peek-brief{display:block;right:-14px;top:-20px;height:310px;z-index:2}
}
/* スマホ〜タブレットでは、聞き込みメモの見出しの左右に2人を小さく（見出しは中央・短いので左右が空く） */
@media (max-width:1319px){
 .art-v2 .a6-peek-faq{display:block;top:30px;height:min(170px,40vw)}
 .art-v2 .a6-peek-faq.is-l{left:max(6px,calc(50% - 300px))}
 .art-v2 .a6-peek-faq.is-r{right:max(6px,calc(50% - 300px))}
}
@media (max-width:560px){
 /* ラベル（Q & A よくある質問）にかからないよう、見出しの札の段に小さく */
 .art-v2 .a6-peek-faq{top:96px;height:min(112px,29vw)}
 .art-v2 .a6-peek-faq.is-l{left:4px}
 .art-v2 .a6-peek-faq.is-r{right:4px}
}
/* PCは、メモ（幅880px）の外側の余白に収まる幅で（肘・タブレットがメモの枠にかからないように） */
@media (min-width:1320px){
 .art-v2 .a6-peek-faq{display:block;bottom:104px;height:auto}
 .art-v2 .a6-peek-faq.is-l{width:min(270px,calc(50% - 440px - 18px));left:calc(50% - 440px - 18px - min(270px,calc(50% - 440px - 18px)))}
 .art-v2 .a6-peek-faq.is-r{width:min(240px,calc(50% - 440px - 18px));left:calc(50% + 440px + 18px)}
}
/* 場面の挿絵（2026-10-07）：白い縁の写真として額装し、上辺に黄色いテープ。各節に1枚ずつ固有の場面 */
.a6-scene{position:relative;margin:0;padding:8px 8px 10px;background:#fff;border:1px solid rgba(27,45,99,.16);border-radius:3px;box-shadow:0 10px 22px rgba(31,45,90,.16);max-width:520px}
.a6-scene>img:first-child{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:2px}
.a6-scene::before{content:"";position:absolute;left:50%;top:-11px;width:92px;height:22px;translate:-50% 0;rotate:-3deg;background:rgba(255,226,122,.88);box-shadow:0 1px 2px rgba(0,0,0,.08);z-index:1}
.a6-prop{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(31,45,90,.2))}
/* 使える場面：説明会の場面。見出しの右（PC）／見出しの下（スマホ） */
.art-v2 .uses .sec-head{position:relative}
.a6-scene-uses{margin-top:26px;rotate:1.2deg}
@media (min-width:900px){
 .art-v2 .uses .sec-head{display:grid;grid-template-columns:minmax(0,1fr) min(460px,44%);column-gap:40px;align-items:center}
 .art-v2 .uses .sec-head>:not(.a6-scene){grid-column:1}
 .a6-scene-uses{grid-column:2;grid-row:1 / span 3;margin:0;width:100%}
}
/* 制作の範囲：打ち合わせの場面を「つくるのは」の札の上に。角に判子 */
.a6-scene-make{margin:4px 0 22px;rotate:-1deg}
.a6-prop-stamp{width:84px;right:-14px;bottom:-26px;rotate:-8deg;z-index:2}
@media (max-width:560px){.a6-prop-stamp{width:60px;right:-12px;bottom:-24px}}
/* 制作の流れ：公開の先（応募者が遊ぶ場面）を、05 公開の下に。証拠封筒を添える */
.a6-flow-end{position:relative;display:flex;justify-content:flex-end;align-items:flex-end;gap:18px;margin-top:40px}
.a6-scene-flow{width:min(440px,100%);rotate:1deg}
.a6-prop-bag{position:static;width:92px;rotate:-10deg;margin-bottom:6px}
/* PC：05 公開の札から写真へ、赤い点線の足あと（公開の先で遊ばれる、のつながり） */
@media (min-width:1181px){.a6-flow-end::before{content:"";position:absolute;right:calc((100% - 64px) / 10);top:-40px;height:34px;border-left:3px dashed var(--a6-red);opacity:.7}}
@media (max-width:899px){.a6-flow-end{justify-content:center}.a6-scene-flow{width:min(520px,calc(100% - 70px))}.a6-prop-bag{width:64px}}
/* 導入節：職場見学の場面。PCは見出しの右、狭い幅は導入文の下 */
.a6-scene-brief{margin:22px 0 48px;rotate:-1.2deg}
@media (min-width:1080px){.art-v2 .production-brief .a6-scene-brief{position:absolute;right:0;top:4px;width:min(340px,30%);margin:0}}
@media (min-width:1280px){.art-v2 .production-brief .a6-scene-brief{right:170px}}
/* 依頼書の紙：白いテープをやめ、金属のクリップで留める */
.art-v2 .production-brief .brief-grid::before{display:none}
.a6-prop-clip{left:50%;top:-40px;width:56px;translate:-50% 0;rotate:4deg;z-index:2}

/* ---------- 5. 体験版（#stage）の重なり ---------- */
/* 小さい文字を12px以上に（refinement.css:63 の 11px、.who small の 11px） */
.art-v2 .who small{font-size:12px}
@media (max-width:640px){
 .art-v2 .stmt-nav .btn{font-size:12px;padding:7px 9px}
 .art-v2 .stmt-nav .text-btn{font-size:12px}
}
/* 証拠カードの番号（E-01 等）が、題名に重ならないように */
.art-v2 .ev-head{padding-right:46px}
/* タイトル画面：中央の人物は案内のカードに隠れるので出さない。左右の2人は、カードにかからない幅のときだけ */
.art-v2 .stage[data-scene="title"] .sprite[data-who="arai"]{opacity:0}
.art-v2 .stage[data-scene="title"] .sprite[data-pos="left"]{left:1%}
.art-v2 .stage[data-scene="title"] .sprite[data-pos="right"]{right:1%}
.art-v2 .stage[data-scene="title"] .title-card{width:min(470px,calc(100% - 32px))}
@media (max-width:1180px){.art-v2 .stage[data-scene="title"] .sprite{opacity:0}}
/* 判断の画面：上の問いの箱に頭がかからないよう、人物を少し小さく。結末の画面（下の箱が高い）では、顔が箱より上に来るよう大きく */
.art-v2 .stage[data-scene="decide"] .sprite{height:64%}
.art-v2 .stage[data-scene="decide"]:has(.ending) .sprite{height:82%}
@media (max-width:1100px){.art-v2 .stage[data-scene="decide"]:has(.ending) .sprite{height:86%}}
/* 結末の札（ENDING 03 等）は右上に。左に立つ人物の顔の下にかからないように */
@media (min-width:761px){.art-v2 .ending-label{left:auto;right:20px}}
/* 証言の札：中央の人物の頭にかからないよう、右上へ。札を置く余白が無い幅では、スマホと同じく本文の「｜交換した製品について」で示す */
.art-v2 .testify-banner{left:auto;right:22px;translate:none}
@media (max-width:1100px){
 .art-v2 .testify-banner{display:none}
 .art-v2 .stmt-about{display:inline}
}
/* 会話の▼が、最後の行の文字に重ならないように */
.art-v2 .talk.is-click .talk-text{padding-right:22px}
/* つきつけの文字：狭い画面で枠からはみ出さないように */
@media (max-width:420px){.art-v2 .cutin-word{font-size:46px}}

@media (min-width:761px) and (max-width:900px){
 .art-v2 .sprite{top:70px;bottom:auto;height:calc(66% - 70px)}
 .art-v2 .stage[data-scene="decide"] .sprite{opacity:0}
 .art-v2 .stage[data-scene="decide"]:has(.ending) .sprite.is-on{opacity:1}
 .art-v2 .stage[data-scene="decide"]:has(.ending) .sprite{height:calc(60% - 70px)}
}
@media (max-width:760px){
 /* 中央の人が話しているとき（自分の発言も含む）は、左の人を出さない（狭い画面では2人の顔が重なるため） */
 .art-v2 .sprite[data-pos="left"]:has(~ .sprite.is-on[data-pos="center"]:not(.is-dim)){opacity:0}
 /* 結末の箱は、上の操作ボタンにかからない高さまで。長いときは箱の中で読み進める */
 .art-v2 .ending{max-height:calc(100% - 108px);overflow:auto}
 .art-v2 .stage[data-scene="decide"]:has(.ending) .sprite{height:calc(68% - 98px)}
 /* タイトル画面のカードを、狭い画面でも枠に収める */
 .art-v2 .stage .title-card::before{width:150px;height:89px;margin-bottom:8px}
 @media (max-width:360px){.art-v2 .stage .title-card::before{display:none}.art-v2 .stage .title-card{padding:16px 14px}.art-v2 .stage .title-name{font-size:30px}.art-v2 .stage .title-actions{margin-top:12px}}
 .art-v2 .stage[data-scene="title"] .title-card{top:calc(50% + 40px)}
 .art-v2 .title-card .a6-howto{margin-top:2px}
 /* 人物は上の操作ボタン（2段）の下から。会話の箱より上に収める */
 .art-v2 .sprite{top:98px;bottom:auto;height:calc(68% - 98px)}
 .art-v2 .sprite[data-pos="center"]{left:50%;margin-left:0;transform:translateX(-50%)}
 /* 話していない人は出さない（狭い画面では2人が重なって顔が隠れるため） */
 .art-v2 .sprite.is-dim{opacity:0}
 /* 判断の画面は選択肢が3段になるので、人物は出さない */
 .art-v2 .stage[data-scene="decide"] .sprite{opacity:0}
}

/* ---------- 5. ヒーローの手がかり探し＝最初の1手（2026-10-07） ---------- */
/* 案内の帯：「まずはここから」の札・ヒント。帯は画面の高さが足りないときも最初の画面に入る高さへ上げる */
.art-v2 .hunt{gap:12px;padding:10px 12px 10px 10px;font-size:15px;bottom:max(40px,calc(100% + 96px - 100svh))}
.art-v2 .hunt-tag{position:absolute;left:22px;top:-14px;padding:1px 10px;border-radius:999px;background:var(--a6-red);color:#fff;font-size:12px;font-weight:900;line-height:1.7;letter-spacing:.06em;box-shadow:0 2px 0 var(--ink);white-space:nowrap}
.art-v2 .hunt-hint{flex:none;min-height:40px;padding:4px 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:900;line-height:1.2;cursor:pointer;box-shadow:0 2px 0 var(--ink)}
.art-v2 .hunt-hint:hover{background:var(--yellow-l)}
.art-v2 :is(.hunt-hint,.hunt-go):focus-visible{outline:3px solid #2f7de1;outline-offset:3px}
/* 見つけた瞬間：帯がはね、点がはじけ、印に光の輪と小さな星 */
.art-v2 .hunt.is-hit{animation:a6HuntHit .5s cubic-bezier(.2,1.5,.4,1)}
.art-v2 .hunt-dots li.is-on{animation:a6DotPop .5s cubic-bezier(.2,1.6,.4,1)}
.art-v2 .clue-mark{position:relative}
.art-v2 .clue-mark::before,.art-v2 .clue-mark::after{content:"";position:absolute;border-radius:50%;opacity:0;pointer-events:none}
.art-v2 .clue-mark::after{inset:-5px;border:3px solid var(--yellow)}
.art-v2 .clue-mark::before{inset:-22px;background:radial-gradient(circle,#ffd23f 0 2.5px,transparent 3.5px) 0 0/14px 14px;-webkit-mask:radial-gradient(circle closest-side,transparent 55%,#000 60%,#000 92%,transparent 100%);mask:radial-gradient(circle closest-side,transparent 55%,#000 60%,#000 92%,transparent 100%)}
.art-v2 .clue.is-found .clue-mark{animation:a6ClueHit .6s cubic-bezier(.2,1.6,.4,1)}
.art-v2 .clue.is-found .clue-mark::after{animation:a6Ring .7s ease-out}
.art-v2 .clue.is-found .clue-mark::before{animation:a6Spark .8s ease-out}
/* 最初は虫めがねを手がかりの少し手前に置き、ゆっくり揺らして「動かせる」ことを見せる。のぞいている印は光の輪で呼ぶ */
.art-v2 .hero.is-idle .lens{animation:a6LensIdle 2.6s ease-in-out infinite}
.art-v2 .clue.is-near:not(.is-found) .clue-mark::after{animation:a6Peek 1.6s ease-out infinite}
@keyframes a6Peek{0%{opacity:.9;scale:.9}100%{opacity:0;scale:1.9}}
/* タブレット幅：帯は絵の右半分に収め、左の文章（注意書き）にかからないように */
@media (min-width:761px) and (max-width:1040px){.art-v2 .hunt{max-width:min(52%,460px);font-size:14px;line-height:1.5}}
/* 3つ見つけたら：事件ファイルを開くボタン（体験版へ進んで、そのまま事件が始まる） */
.art-v2 .hunt.is-done{gap:14px;padding:8px 8px 8px 12px;background:#fffbe6}
.art-v2 .hunt.is-started .hunt-tag{display:none}
.art-v2 .hunt-sub{display:block;font-size:13px;font-weight:700;color:var(--ink-2)}
.art-v2 .hunt .hunt-go{--bg:var(--a6-red);--fg:#fff;color:#fff;flex:none;min-height:48px;padding:8px 20px;font-size:16px;box-shadow:0 4px 0 var(--ink);animation:a6GoIn .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes a6HuntHit{0%{scale:1}40%{scale:1.06}100%{scale:1}}
@keyframes a6DotPop{0%{scale:.6}60%{scale:1.45}100%{scale:1.15}}
@keyframes a6ClueHit{0%{rotate:-18deg}60%{rotate:10deg}100%{rotate:0deg}}
@keyframes a6Ring{0%{opacity:1;scale:.7}100%{opacity:0;scale:2.2}}
@keyframes a6Spark{0%{opacity:1;scale:.5}100%{opacity:0;scale:1.35}}
@keyframes a6LensIdle{0%,100%{translate:0 0}50%{translate:-16px -10px}}
@keyframes a6GoIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
/* スマホ：帯は絵のすぐ下に置く（絵の上に重ねると手がかりを隠すため） */
@media (max-width:760px){
 .art-v2 .hunt{display:flex;position:relative;order:3;inset:auto;margin:0 -20px;padding:10px 14px;gap:10px;justify-content:flex-start;border-width:0 0 2px;border-radius:0;box-shadow:none;background:#fff;font-size:13px;line-height:1.5;animation:none}
 .art-v2 .hunt-q{flex:1;min-width:0}
 .art-v2 .hunt-ico{width:26px;height:26px;background-size:15px}
 .art-v2 .hunt-dots{gap:4px}
 .art-v2 .hunt-dots li{width:14px;height:14px}
 .art-v2 .hunt-tag{left:14px;top:-12px}
 .art-v2 .hunt-hint{min-height:44px;padding:4px 12px}
 .art-v2 .hunt.is-done{flex-wrap:wrap;padding:10px 14px 14px;background:#fffbe6}
 .art-v2 .hunt.is-done .hunt-dots{display:none}
 .art-v2 .hunt.is-done .hunt-sub{display:inline;margin-left:8px}
 .art-v2 .hunt-go{flex:1 1 100%;width:100%}
}
@media (max-width:359px){.art-v2 .hunt{margin:0 -18px}}