/* /event だけ: 画面いっぱいの iPad。種目を押すと、その中に紹介が開く。正典: seeker-hp/SPEC.md
   画面の中はアプリ（seeker-events）の配色「白グレー地＋ブルー1色」に合わせ、.em のトークンで持つ。
   見えるかどうかは .on / .off / hidden（display）で決める。動きは transform だけ（ping の輪だけは飾りなので opacity も使う）。
   JS が動かない時は、iPad の中にメニューと全種目の紹介が縦に並ぶ（.js が付いた時だけ画面の大きさに固定する）。 */
@property --s{syntax:'<number>';inherits:false;initial-value:1}
.em{
  --dev:#1c2331;
  --dev-edge:#3b4459;
  --app-bg:#f8fafc;
  --app-card:#ffffff;
  --app-on:#ffffff;
  --em-shadow-dev:rgba(22,33,58,.6);
  --em-shadow-tile:rgba(15,23,42,.45);
  --em-shadow-btn:rgba(37,99,235,.7);
  --app-ink:#0f172a;
  --app-muted:#64748b;
  --app-line:#e2e8f0;
  --app-blue:#2563eb;
  --app-blue-line:#bfdbfe;
  --em-hold:90vh
}
.em{position:relative;margin-top:8px;touch-action:manipulation}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 舞台: 画面いっぱいに固定し、スクロールに合わせて iPad を拡大する ---------- */
.em-stage{display:flex;align-items:center;justify-content:center;padding:24px var(--gut)}
.js .em{height:calc(100vh - var(--hd) + var(--em-hold));height:calc(100svh - var(--hd) + var(--em-hold))}
.js .em-stage{position:sticky;top:var(--hd);height:calc(100vh - var(--hd));height:calc(100svh - var(--hd))}

/* ---------- iPad（横向き） ---------- */
.em-dev{position:relative;width:100%;max-width:1200px;padding:clamp(10px,1.3vw,18px);border-radius:clamp(22px,2.8vw,40px);background:var(--dev);box-shadow:inset 0 0 0 1.5px var(--dev-edge),0 40px 80px -40px var(--em-shadow-dev);transform:scale(var(--s,1));transform-origin:50% 45%}
.js .em-dev{width:min(100%,calc((100vh - var(--hd) - 48px) * 1.4));width:min(100%,calc((100svh - var(--hd) - 48px) * 1.4));will-change:transform}
/* 紹介を開いている間は原寸（拡大の途中で開いても、ボタンを小さくしない） */
.js .em.em-open .em-dev{transform:none}
.em-dev::before{content:"";position:absolute;top:calc(clamp(10px,1.3vw,18px) / 2 - 3px);left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--dev-edge)}
.em-scr{container-type:inline-size;position:relative;display:flex;flex-direction:column;overflow:hidden;overflow:clip;border-radius:clamp(12px,1.6vw,22px);background:var(--app-bg);color:var(--app-ink);line-height:1.5;letter-spacing:.01em}
.js .em-scr{aspect-ratio:1.44}
.em-nav{position:relative;flex:none;height:clamp(45px,5cqi,56px);display:flex;align-items:center;justify-content:center;background:var(--app-card);border-bottom:1px solid var(--app-line);font-size:clamp(12px,1.4cqi,16px);font-weight:700}
.em-logo{display:flex;align-items:center;gap:.6em}
.em-logo img{width:.8em;height:auto}
.em-logo[hidden],.em-nav-t[hidden],.em-back[hidden]{display:none}
.em-back{position:absolute;left:4px;top:0;bottom:0;display:flex;align-items:center;gap:4px;min-width:44px;padding:0 clamp(10px,1.4cqi,18px);border:0;background:none;color:var(--app-blue);font-size:inherit;font-weight:600;cursor:pointer}
.em-back:focus-visible{outline:2px solid var(--app-blue);outline-offset:-6px;border-radius:8px}
.em-view{position:relative}
.js .em-view{flex:1;min-height:0}

/* メニュー: タイル（バナー・種目名・区分） */
.em-home{padding:clamp(12px,2.4cqi,32px) clamp(12px,2.6cqi,34px)}
.js .em-home{position:absolute;inset:0;z-index:1;overflow:auto}
.js .em-home.off{display:none}
/* 主役は有料の 3 種目（大きく）。無料のゲームは下に小さく添える */
.em-grid{display:grid;gap:clamp(8px,1.6cqi,20px)}
.em-paid{grid-template-columns:repeat(3,minmax(0,1fr))}
.em-free-g{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,1.3cqi,16px)}
.em-sub{margin:clamp(14px,2.4cqi,30px) 0 clamp(6px,1cqi,12px);font-size:clamp(10.5px,1.15cqi,14px);font-weight:600;color:var(--app-muted)}
.em-free-g .em-tt{font-size:clamp(10.5px,1.25cqi,15px);padding-top:clamp(5px,.8cqi,10px)}
.em-free-g .em-of{margin-bottom:clamp(6px,1cqi,12px)}
.em-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0;text-align:left;border:1px solid var(--app-line);border-radius:clamp(8px,1.2cqi,14px);background:var(--app-card);overflow:hidden;cursor:pointer;color:inherit;transition:transform var(--t0) var(--ease),box-shadow var(--t0) var(--ease),border-color var(--t0) var(--ease)}
.em-tile img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:var(--app-line)}
.em-tile[data-em-to="iq-quiz"] img{object-position:0 50%}
.em-tt{padding:clamp(6px,1.1cqi,14px) clamp(8px,1.3cqi,16px) 0;font-size:clamp(11px,1.6cqi,18px);font-weight:700;line-height:1.35}
.em-paid .em-tt{font-size:clamp(12px,1.9cqi,22px)}
.em-of{margin:clamp(4px,.7cqi,8px) clamp(8px,1.3cqi,16px) clamp(8px,1.4cqi,16px);padding:0 .6em;border:1px solid var(--app-line);border-radius:4px;font-size:clamp(9px,1.05cqi,12px);font-weight:600;line-height:1.7;color:var(--app-muted);white-space:nowrap}
.em-of.free{color:var(--app-blue);border-color:var(--app-blue-line)}
.em-tile:active{transform:scale(.97)}
.em-tile:focus-visible{outline:2px solid var(--app-blue);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .em-tile:hover{transform:translateY(-3px);border-color:var(--app-blue-line);box-shadow:0 14px 28px -16px var(--em-shadow-tile)}
}
/* 押せることの合図（最初のタイルの右上で脈打つ点。最初に押したら消す） */
.em-ping{position:absolute;top:10px;right:10px;z-index:1;width:12px;height:12px;border-radius:50%;background:var(--app-blue);box-shadow:0 0 0 3px var(--app-on)}
.em-ping::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--app-blue);animation:emPing 1.6s ease-out infinite}
.em-ping[hidden]{display:none}
@keyframes emPing{from{transform:scale(.5);opacity:1}to{transform:scale(1.7);opacity:0}}


/* ---------- 種目の紹介（iPad の画面の中。左に動画と説明・右に要点） ---------- */
.em-d{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(14px,3cqi,40px);align-items:start;align-content:start;padding:clamp(14px,2.6cqi,34px);background:var(--app-bg);transform-origin:0 0}
.em-d + .em-d{border-top:1px solid var(--app-line)}
.js .em-d{position:absolute;inset:0;z-index:2;display:none;overflow:auto;border-top:0}
.js .em-d.on{display:grid}
.em-d:focus-visible{outline:2px solid var(--app-blue);outline-offset:-3px}
.em-d-l,.em-d-r{display:flex;flex-direction:column;gap:clamp(12px,1.8cqi,22px);min-width:0}
.em-d .player{border-radius:clamp(8px,1cqi,12px)}
.em-d .player-bar{margin-top:8px;font-size:clamp(11px,1.1cqi,13px)}
.em-fig{margin:0}
.em-fig img{width:100%;height:auto;border-radius:clamp(8px,1cqi,12px);border:1px solid var(--app-line);background:var(--app-card)}
.em-fit{margin-top:6px;font-size:clamp(12.5px,1.3cqi,15px);font-weight:600}
.em-desc{font-size:clamp(12.5px,1.35cqi,15.5px);line-height:1.9;color:var(--app-muted)}
.em-d-desc .note{margin-top:10px;font-size:clamp(11px,1.1cqi,13px)}
.em-d-head h3{margin-top:clamp(6px,.8cqi,10px);font-size:clamp(19px,2.7cqi,32px);line-height:1.35}
.em-one{margin-top:clamp(4px,.6cqi,8px);font-size:clamp(13px,1.55cqi,18px);font-weight:600;line-height:1.7;color:var(--app-blue)}
.em-h{margin-top:clamp(14px,2cqi,24px);font-size:clamp(11px,1.15cqi,13px);font-weight:600;letter-spacing:.04em;color:var(--app-muted)}
.em-d-body > .em-h:first-child{margin-top:0}
.em-flow{margin-top:6px;border-top:1px solid var(--app-line);counter-reset:ef}
.em-flow li{position:relative;padding:.65em 0 .65em 2.4em;border-bottom:1px solid var(--app-line);font-size:clamp(12.5px,1.3cqi,15px);line-height:1.7;counter-increment:ef}
.em-flow li::before{content:counter(ef);position:absolute;left:0;top:.7em;width:1.65em;height:1.65em;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--app-ink);color:var(--app-on);font-size:.8em;font-weight:700;font-variant-numeric:tabular-nums}
.em-facts{margin-top:clamp(12px,1.8cqi,20px);border-top:1px solid var(--app-ink)}
.em-facts div{display:grid;grid-template-columns:7.8em 1fr;gap:2px 14px;padding:.6em 0;border-bottom:1px solid var(--app-line);font-size:clamp(12px,1.25cqi,14.5px);line-height:1.7}
.em-facts dt{font-weight:600;color:var(--app-muted);font-size:.92em}
.em-d .chips{margin-top:8px}
.em-d .chips span{font-size:clamp(11.5px,1.15cqi,13px)}
.em-d .links-row{margin-top:clamp(12px,1.8cqi,20px)}
.em-d .tlink{min-height:44px;align-items:center}
.em-extra{margin-top:20px;font-size:14.5px;color:var(--ink-2)}
.em-note{margin-top:8px}

/* ---------- 縁日の種目（線画の屋台・12種目の写真・手配のしかた） ---------- */
.en-top .sk{display:block;width:100%;max-width:470px;height:auto;margin:0 auto;color:var(--ink)}
.en-top .links-row{margin-top:26px}
.en-h{margin:64px 0 20px;font-size:clamp(18px,1.6vw,21px);line-height:1.5}
.en-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.en-list li{display:flex;flex-direction:column;gap:4px;min-width:0}
.en-list li > *{max-width:100%;overflow-wrap:anywhere}
.en-list img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);transition:transform var(--t1) var(--ease)}
.en-list b{font-size:16px;line-height:1.5}
.en-yatai{align-self:flex-start;font-size:12px;font-weight:600;line-height:1.7;color:var(--amber-ink);background:var(--amber-soft);border-radius:6px;padding:0 8px}
.en-list small{font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.en-feat h4{font-size:16.5px;line-height:1.5}
.pa-shots{margin-top:40px;align-items:start}
.en-band-btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.en-band-btn:hover{background:var(--on-navy);color:var(--ink)}
.en-price{margin-top:36px;font-size:clamp(17px,1.5vw,20px);font-weight:700}
@media (hover:hover) and (pointer:fine){
  .en-list li:hover img{transform:translateY(-4px)}
}
@media (max-width:980px){
  .en-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .en-h{margin-top:44px}
  .en-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .en-list b{font-size:15px}
  .en-top .sk{max-width:300px}
}

/* ---------- おすすめ診断と配置シミュレーター（専用ページ /event/plan と、/event の入口 #plan） ----------
   結果とシミュレーターは JS が出す（hidden）。JS が無い時は、質問と下の一覧表だけが見える。 */
.pl,.pl-fig{
  --ps-floor:#ffffff;
  --ps-grid:#dfe5ec;
  --ps-app:#e8f0ff;
  --ps-bad:#b42318;
  --ps-bad-bg:#fde8e7;
  --ps-hatch:rgba(180,35,24,.24);
  --ps-shadow:rgba(22,33,58,.45)
}
.pl [hidden]{display:none!important}
.pl-lead{max-width:46em;margin-top:-16px;color:var(--ink-2)}
.dg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;margin-top:36px;align-items:start}
.dg-f{min-width:0;margin:0 0 28px;padding:0;border:0}
.dg-f:last-child{margin-bottom:0}
.dg-f legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:0;margin-bottom:12px;font-size:16.5px;font-weight:700;line-height:1.6}
.dg-f legend small{flex-basis:100%;padding-left:34px;font-size:13px;font-weight:500;color:var(--ink-3)}
.dg-n{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12.5px;font-variant-numeric:tabular-nums}
.dg-opts{display:grid;gap:10px}
.dg-opts.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dg-opts.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dg-o{display:flex;align-items:flex-start;gap:10px;min-height:52px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);font-size:15px;font-weight:600;line-height:1.5;cursor:pointer;transition:border-color var(--t0) var(--ease),background-color var(--t0) var(--ease)}
.dg-o input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue-ink)}
.dg-o small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.dg-o:has(input:checked){border-color:var(--blue-ink);background:var(--ps-app);box-shadow:inset 0 0 0 1px var(--blue-ink)}
.dg-o:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.dg-out{display:none}
.js .dg-out{display:block;padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.js .dg-nojs,.js .ps-nojs{display:none}
.dg-wait{font-size:15px;color:var(--ink-3)}
.dg-res-k{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--blue-ink)}
.dg-res-h{margin-top:6px;font-size:clamp(22px,2.2vw,28px);line-height:1.4}
.dg-res-h [aria-hidden]{margin:0 .15em;color:var(--blue-ink)}
.dg-if{margin-top:6px;font-size:13.5px;color:var(--ink-3)}
.dg-why{margin-top:18px;border-top:1px solid var(--ink)}
.dg-why div{padding:12px 0;border-bottom:1px solid var(--line)}
.dg-why dt{font-size:15px;font-weight:700}
.dg-why dd{margin-top:4px;font-size:14px;line-height:1.85;color:var(--ink-2)}
.dg-res .links-row{margin-top:14px;gap:4px 24px}
.dg-res .tlink{min-height:44px}
.dg-note,.dg-free{margin-top:12px;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.dg-act{margin-top:20px}
.dg-redo{margin-top:14px;padding:10px 14px;border-radius:var(--r-sm);background:var(--panel-2);font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.dg-redo .tlink{display:flex;min-height:44px;margin-top:4px;font-size:14px}
.pl-cta .tlink{min-height:44px}
.dg-act .tlink{min-height:44px}
.dg-all{margin-top:44px}
.dg-tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.dg-tbl th,.dg-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.dg-tbl thead th{font-size:13px;font-weight:600;color:var(--ink-3);border-bottom-color:var(--ink)}
.dg-tbl td:last-child{font-weight:700}

/* /event の入口と、専用ページの見出しの横に置く飾りの会場図（6m×4m・割合は実寸どおり） */
.pl-cta{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px 56px;align-items:center;padding:40px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.pl-cta .sec-h{margin-bottom:20px}
.pl-cta p:not(.label):not(.note){color:var(--ink-2)}
.pl-fig{margin:0}
.pl-mini{position:relative;aspect-ratio:3/2;border:2px solid var(--ink);background-color:var(--ps-floor);background-image:linear-gradient(to right,var(--ps-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--ps-grid) 1px,transparent 1px);background-size:calc(100% / 6) calc(100% / 4)}
.pl-mini-it{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);padding:3px 5px;border:1.5px solid var(--ink-3);border-radius:3px;background:var(--panel-2);font-size:12px;font-weight:600;line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pl-mini-it[data-g="en"]{background:var(--amber-soft);border-color:var(--amber-ink)}
.pl-mini-it[data-g="app"]{background:var(--ps-app);border-color:var(--blue-ink)}
.pl-mini-it[data-g="part"]{font-size:0}
.ps{margin-top:8px}
.ps-venue{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px;font-size:15px;font-weight:600}
.ps-venue label{display:inline-flex;align-items:center;gap:8px}
.ps-venue input,.ps-part input,.ps-add select{font:inherit;font-size:16px;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:8px 10px}
.ps-venue input{width:5.5em}
.ps-venue input:focus,.ps-part input:focus,.ps-add select:focus{outline:2px solid var(--blue);outline-offset:0;border-color:transparent}
.ps-main{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:32px;margin-top:22px;align-items:start}
.ps-fig{padding:12px;border-radius:var(--r-md);background:var(--panel-2);overflow:hidden}
.ps-floor{position:relative;width:min(100%,calc(var(--ps-w,6) / var(--ps-d,4) * 62vh));aspect-ratio:var(--ps-w,6) / var(--ps-d,4);margin:0 auto;border:2px solid var(--ink);background-color:var(--ps-floor);background-image:linear-gradient(to right,var(--ps-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--ps-grid) 1px,transparent 1px);background-size:calc(100% / var(--ps-w,6)) calc(100% / var(--ps-d,4));overflow:hidden;overflow:clip;overflow-clip-margin:6px;-webkit-user-select:none;user-select:none}
/* 何も置いていない時は、図の中に始め方を出す（#ps に直接来た時、スマホでは一覧が図の下に回るため） */
.ps-floor:empty::after{content:"まだ何も置いていません。診断に答えるか、「種目・部品を足す」から足してください。";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;font-size:13.5px;font-weight:600;line-height:1.7;color:var(--ink-3);text-align:center}
.ps-scale{margin-top:8px;font-size:12.5px;color:var(--ink-3);text-align:center}
.ps-it{position:absolute;container-type:size;display:block;margin:0;padding:0;border:1.5px solid var(--ink-3);border-radius:3px;background:var(--panel-2);color:var(--ink);font:inherit;font-size:11px;line-height:1.3;text-align:left;cursor:grab;touch-action:manipulation}
/* 押せる範囲は四角の外へ 11px 広げる（小さい部品でも指で選べるように）。文字は内側の箱で切る */
.ps-it::before{content:"";position:absolute;inset:-11px}
.ps-it-in{position:absolute;inset:0;display:flex;align-items:flex-start;gap:3px;padding:2px 3px;overflow:hidden}
.ps-it[data-g="en"]{background:var(--amber-soft);border-color:var(--amber-ink)}
.ps-it[data-g="app"]{background:var(--ps-app);border-color:var(--blue-ink)}
.ps-it.is-hit{border:2px solid var(--ps-bad);background-image:repeating-linear-gradient(45deg,var(--ps-hatch) 0 5px,transparent 5px 10px)}
.ps-it.is-out{border:2px dashed var(--ps-bad)}
/* 選んだ四角だけ、指で動かせる（ほかの四角に触れてもページはスクロールする） */
.ps-it.is-sel{z-index:2;outline:3px solid var(--blue);outline-offset:1px;touch-action:none}
.ps-it.is-drag{z-index:3;cursor:grabbing;box-shadow:0 10px 24px -12px var(--ps-shadow)}
.ps-it:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ps-it-n{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 3px;border-radius:3px;background:var(--ink);color:var(--paper);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ps-it.is-hit .ps-it-n,.ps-it.is-out .ps-it-n{background:var(--ps-bad)}
.ps-it-t{flex:1;min-width:0;font-weight:600;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 四角が狭い時は名前を隠して番号だけに、もっと狭い時は番号も隠す（半分切れた字を見せない。一覧の行と選択の枠で見分ける） */
@container (max-width:66px){.ps-it-t{display:none}}
@container (max-height:19px){.ps-it-t{display:none}}
@container (max-width:21px){.ps-it-n{visibility:hidden}}
@container (max-height:19px){.ps-it-n{visibility:hidden}}
.ps-msg{padding:12px 14px;border-radius:var(--r-sm);background:var(--panel-2);font-size:14px;font-weight:600;line-height:1.7}
.ps-msg.is-bad{background:var(--ps-bad-bg);color:var(--ps-bad)}
.ps-list{margin-top:14px;border-top:1px solid var(--ink)}
.ps-row{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ps-row.is-sel{background:var(--ps-app)}
.ps-empty{display:block;font-size:14px;color:var(--ink-3)}
.ps-no{display:inline-flex;align-items:center;justify-content:center;height:20px;margin-top:2px;border-radius:3px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.ps-no:empty{visibility:hidden}
.ps-row-m b{display:block;font-size:14.5px;line-height:1.5}
.ps-row-s{display:block;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.ps-flag{display:block;font-size:12.5px;font-weight:700;line-height:1.6;color:var(--ps-bad)}
.ps-flag:empty{display:none}
.ps-row-b{grid-column:2;display:flex;flex-wrap:wrap;gap:6px}
.ps-b{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ps-b:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.ps-swap{max-width:12em;font-size:16px;font-weight:500}
.ps-sub{grid-column:1/-1;margin:4px 0 0 32px;border-top:1px dashed var(--line)}
.ps-sub .ps-row{border-bottom-style:dashed}
.ps-add{display:flex;align-items:flex-end;gap:10px;margin-top:18px}
.ps-add label{flex:1;min-width:0;display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.ps-add select{width:100%}
.ps-parts{min-width:0;margin:20px 0 0;padding:12px 16px 14px;border:1px solid var(--line);border-radius:var(--r-sm)}
.ps-parts legend{padding:0 6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.ps-part{display:grid;grid-template-columns:minmax(0,1fr) 5.4em auto 5.4em auto;align-items:center;gap:6px;margin-top:8px;font-size:13.5px}
.ps-part input{width:100%;padding:7px 8px}
/* 選んだ行にだけ出る、指で動かす代わりのボタン（10cm ずつ） */
.ps-mv{display:none;gap:6px}
.ps-row.is-sel > .ps-row-b .ps-mv{display:flex}
.ps-mv .ps-b{min-width:44px;padding:0;font-size:15px}
.ps-small{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:center}
@media (hover:hover) and (pointer:fine){
  .dg-o:hover{border-color:var(--ink-3)}
  .ps-b:hover{border-color:var(--ink-3)}
}
@media (max-width:980px){
  .pl-cta{grid-template-columns:minmax(0,1fr)}
  .pl-cta .pl-fig{max-width:420px}
  .ph .pl-fig{display:none}   /* 専用ページは1列になったら、飾りの図より先に診断を見せる */
}
@media (max-width:1100px){
  .dg{grid-template-columns:minmax(0,1fr);gap:28px}
  .ps-main{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .pl-lead{margin-top:-20px}
  .dg-opts.c3,.dg-opts.c2{grid-template-columns:minmax(0,1fr)}
  .dg-o{min-height:48px;padding:11px 12px}
  .js .dg-out{padding:20px 18px}
  .dg-tbl thead{display:none}
  .dg-tbl,.dg-tbl tbody,.dg-tbl tr,.dg-tbl td{display:block}
  .dg-tbl tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .dg-tbl td{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:8px;padding:2px 0;border:0}
  .dg-tbl td::before{content:attr(data-l);font-size:12.5px;font-weight:600;color:var(--ink-3)}
  .pl-cta{grid-template-columns:minmax(0,1fr);padding:26px 20px}
  .pl-cta .pl-fig{max-width:340px}
  .pl-mini-it{font-size:11px;padding:2px 4px}
  .ps-fig{padding:8px}
  .ps-venue{gap:8px 8px;font-size:14.5px}
  .ps-venue input{width:4.4em}
  .ps-floor{width:min(100%,calc(var(--ps-w,6) / var(--ps-d,4) * 55svh))}
  .ps-part{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto}
  .ps-part > span:first-child{grid-column:1/-1}
}

/* 開いた紹介の中身は、少しずつ下から上がる（止まっても位置が少しずれるだけで、見えなくはならない） */
.em-d.enter .em-st{animation:emRise .6s var(--ease) backwards}
.em-d.enter .em-d-head{animation-delay:.1s}
.em-d.enter .em-d-media{animation-delay:.16s}
.em-d.enter .em-d-desc{animation-delay:.22s}
.em-d.enter .em-d-body{animation-delay:.28s}
@keyframes emRise{from{transform:translateY(22px)}}

/* ---------- 縦長の画面（タブレットの縦持ち・スマホ）: iPad も縦にする ---------- */
@media (orientation:portrait){
  .js .em-dev{width:min(100%,calc((100vh - var(--hd) - 48px) * .7));width:min(100%,calc((100svh - var(--hd) - 48px) * .7))}
  .js .em-scr{aspect-ratio:.7}
  .em-dev::before{top:50%;left:calc(clamp(10px,1.3vw,18px) / 2 - 3px);margin:-3px 0 0}
  .em-free-g{grid-template-columns:repeat(3,minmax(0,1fr))}
  @container (min-width:560px){.em-free-g{grid-template-columns:repeat(5,minmax(0,1fr))}}
  .em-paid .em-tt{font-size:clamp(12px,2.6cqi,20px)}
  .em-sub{font-size:clamp(11px,2cqi,14px)}
  .em-tile img{aspect-ratio:8/3}
  .em-tt{font-size:clamp(12px,2.4cqi,19px)}
  .em-of{font-size:clamp(9.5px,1.6cqi,13px)}
    .em-nav{font-size:clamp(13px,2.2cqi,17px);height:clamp(45px,7cqi,58px)}
  /* 紹介は 1 列。見出し → 動画 → 説明 → 流れ の順に並べ直す */
  .em-d{grid-template-columns:minmax(0,1fr);gap:16px}
  .em-d-l,.em-d-r{display:contents}
  .em-d-head{order:1}
  .em-d-media{order:2}
  .em-d-desc{order:3}
  .em-d-body{order:4}
  .em-d-head h3{font-size:clamp(19px,4cqi,30px)}
  .em-one{font-size:clamp(13.5px,2.4cqi,18px)}
  .em-desc,.em-flow li{font-size:clamp(13px,2.2cqi,16px)}
  .em-facts div{font-size:clamp(12.5px,2.1cqi,15px)}
}
/* スマホ: 縦向きの iPad を、画面の高さいっぱいまで伸ばす */
@media (max-width:640px){
  .em-stage{padding:12px}
  .js .em-dev{width:100%}
  .em-dev{padding:9px;border-radius:24px}
  .em-scr{border-radius:16px}
  .js .em-scr{aspect-ratio:auto;height:calc(100vh - var(--hd) - 42px);height:calc(100svh - var(--hd) - 42px)}
  .em-home{padding:12px}
  .em-grid{gap:8px}
  .em-paid{grid-template-columns:minmax(0,1fr)}
  .em-paid .em-tile{display:grid;grid-template-columns:44% minmax(0,1fr);grid-template-rows:1fr auto 1fr;align-items:start}
  .em-paid .em-tile img{grid-row:1/4;height:100%;aspect-ratio:8/3}
  .em-paid .em-tt{grid-row:1;align-self:end;font-size:14px}
  .em-paid .em-of{grid-row:2;justify-self:start;margin:5px 10px 0}
  .em-free-g .em-tt{font-size:11.5px;padding:5px 6px 0}
  .em-free-g .em-of{margin:4px 6px 7px}
  .em-sub{margin:14px 0 6px}
  .em-tt{padding:7px 8px 0;font-size:12.5px}
  .em-of{margin:5px 8px 9px;font-size:11px;white-space:normal}
  .em-d{padding:14px 14px 28px}
  .em-ping{top:7px;right:7px}
}
@media (max-width:640px) and (orientation:portrait){
  .em-dev::before{left:2px}
}
/* 高さの低い横向き（スマホの横持ち）: 固定と拡大をやめ、iPad を幅いっぱい・高さ固定で置く */
@media (orientation:landscape) and (max-height:520px){
  .js .em{height:auto}
  .js .em-stage{position:relative;top:auto;height:auto}
  .js .em-dev{width:min(100%,900px);transform:none}
  .js .em-scr{aspect-ratio:auto;height:420px}
}
@media (prefers-reduced-motion:reduce){
  .js .em{height:auto}
  .js .em-stage{position:relative;top:auto}
  .js .em-dev{transform:none}
  .em-d.enter .em-st,.em-ping::after{animation:none}
  .em-tile{transition:none}
}

/* ---------- hero: iPad の体験と縁日の出し物を2枚のカードで並べる（keita 10/25 案A） ----------
   縁日のカードに iPad の画像は使わない（縁日も iPad のアプリだと誤解されないように）。
   スマホは縦に2枚。最初の画面に2枚目の頭が見えるよう、リード文はカードの下へ回す。 */
.eh{--eh-c:var(--blue)}
.eh-in{max-width:var(--wrap);margin:0 auto;padding:44px var(--gut) 48px;display:flex;flex-direction:column}
.eh h1{font-size:clamp(26px,2.9vw,40px);line-height:1.42;text-wrap:balance}
.eh-pre{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:14px;font-weight:600;line-height:1.6;letter-spacing:.06em;color:var(--blue-ink);text-wrap:wrap}
.eh-pre::before{content:"";flex:none;width:28px;height:1px;background:currentColor}
.eh .lead{margin-top:14px;max-width:46em;word-break:auto-phrase}
.eh-cards{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.eh-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);overflow:hidden}
.eh-ipad{--eh-c:var(--blue)}
.eh-en{--eh-c:var(--amber)}
.eh-ph{margin:0;aspect-ratio:1200/480;overflow:hidden;background:var(--panel-2)}
.eh-ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.eh-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:3px;background:var(--paper)}   /* 行の高さを図に合わせないと、写真の比率のまま下が切れる */
.eh-trio img{object-position:center 18%}
.eh-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 26px 26px;border-top:4px solid var(--eh-c)}
.eh-t{display:flex;align-items:center;gap:10px;font-size:22px}
.eh-t::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--eh-c)}
.eh-s,.eh-d{word-break:auto-phrase}
.eh-s{font-size:15px;font-weight:600;line-height:1.7;text-wrap:pretty}
.eh-d{font-size:14px;line-height:1.8;color:var(--ink-2)}
.eh-price{align-self:stretch;padding-top:8px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.eh-price b{margin-right:4px;font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.eh-price small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-3)}
.eh-body .btn{margin-top:auto}   /* 2枚のボタンの高さをそろえる（価格は本文のすぐ下） */
.eh-body .eh-price{margin-bottom:12px}
.eh-cta{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.eh-cta .tlink{min-height:44px}
@media (max-width:980px){
  .eh-in{padding:36px var(--gut) 40px}
  .eh-body{padding:20px 20px 22px}
}
@media (max-width:700px){   /* 縦に2枚になったら、2枚目の頭が最初の画面に入るよう詰める */
  .eh-in{padding:20px var(--gut) 28px}
  .eh-head{display:contents}
  .eh-d{display:none}   /* 補足文は下の #menu・#ennichi にもある */
  .eh .lead{order:1;margin-top:18px;font-size:14px;line-height:1.85}
  .eh-cards{order:0;grid-template-columns:minmax(0,1fr);margin-top:14px;gap:12px}
  .eh-cta{order:2;margin-top:16px}
  .eh-ph{aspect-ratio:4/1}
  .eh-ipad .eh-ph img{object-position:center 30%}
  .eh-body{gap:2px;padding:14px 16px 16px}
  .eh-t{font-size:19px}
  .eh-s{font-size:13.5px;line-height:1.7}
  .eh-price{padding-top:6px}
  .eh-body .eh-price{margin-bottom:10px}
  .eh-price b{font-size:18px}
  .eh-body .btn{align-self:stretch;justify-content:center}
  .eh-cta .btn{flex:1 1 100%;justify-content:center}
}
@media (max-width:640px){
  .eh h1{font-size:22px;line-height:1.45}
  .eh-pre{gap:8px;margin-bottom:6px;font-size:12.5px;letter-spacing:.02em}
  .eh-pre::before{width:16px}
}
@media (max-width:380px){   /* 360×640 でも2枚目の頭が見えるように */
  .eh-in{padding-top:14px}
  .eh-ph{aspect-ratio:5/1}
}

/* ---------- 節の区切り（keita 10/25: いまどこにいるか、次に何があるかがわかるように） ----------
   節ごとに地の色を交互にして罫線で区切り、見出しの上に「番号＋名前」、節の終わりに「次は」。
   いまいる節は、PC は右端の目次（site.css の .toc）、スマホ・タブレットは上の帯（.secbar・event.js）。 */
.ev-sec{padding-bottom:88px;border-top:1px solid var(--line)}
.eh + .ev-sec{border-top:0}   /* 冒頭の下罫線と重ねない */
.ev-alt{background:var(--paper)}
.split .ev-k{margin-top:0}
.ev-k{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--ink-2)}
.ev-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:7px;background:var(--ink);color:#fff;font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums}
.ev-next{display:flex;justify-content:center;margin-top:64px}
.ev-sec .links-row .tlink{min-height:44px}
.ev-next a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--ink-faint);border-radius:var(--btn-r);background:var(--paper);font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:border-color var(--t0) var(--ease),color var(--t0) var(--ease)}
.ev-alt .ev-next a{background:var(--bg)}
.ev-next b{color:var(--ink)}
.ev-next a:hover{border-color:var(--ink);color:var(--ink)}
/* 節の帯: スマホ・タブレットだけ。冒頭と iPad の全画面の間は JS が隠す（hidden＝display で決める） */
.secbar{display:none}
@media (max-width:1099px),(hover:none),(pointer:coarse){
  .js .secbar:not([hidden]){display:block;position:fixed;left:0;right:0;top:var(--hd);z-index:35;background:var(--paper);border-bottom:1px solid var(--line);animation:secIn var(--t0) var(--ease)}
  html{scroll-padding-top:calc(var(--hd) + 60px)}   /* 着地した後に帯が出ても、節の頭が帯に隠れないように */
}
.secbar.more-r ol{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.secbar ol{display:flex;gap:2px;margin:0;padding:0 var(--gut);list-style:none;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.secbar ol::-webkit-scrollbar{display:none}
.secbar a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;font-size:13px;font-weight:600;color:var(--ink-3);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -3px 0 transparent}
.secbar a b{font-size:12px;font-variant-numeric:tabular-nums}
.secbar a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--blue)}
@keyframes secIn{from{transform:translateY(-40%)}}
@media (prefers-reduced-motion:reduce){.js .secbar:not([hidden]){animation:none}}
/* 企画・コンサル（根拠は keita の発言だけ。実績の数字・取引先は書かない）と、大阪の本店・対応エリア */
.ev-cs{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:start}
.ev-cs .sec-h{margin-bottom:20px}
.ev-cl-h{margin-top:22px;font-size:14px;font-weight:600;color:var(--ink)}
.ev-cl{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.ev-cl li{position:relative;padding-left:22px;font-size:15px;line-height:1.8;color:var(--ink-2)}
.ev-cl li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:2px;background:var(--amber)}
.ev-cl a{color:var(--blue-ink)}
.ev-cs .links-row{margin-top:26px}
.ev-nap{padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.ev-nap h3{margin-bottom:16px;font-size:18px;line-height:1.55}
.ev-nap dl{display:grid;gap:10px;margin:0}
.ev-nap dl div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;font-size:14px;line-height:1.75}
.ev-nap dt{font-weight:600;color:var(--ink-3)}
.ev-nap dd{margin:0;word-break:auto-phrase}
.ev-nap .nw{white-space:nowrap}
.ev-nap dd a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue-ink);font-weight:600}
.ev-nap dl div:has(a){align-items:center}
@media (max-width:980px){
  .ev-cs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ev-sec{padding-bottom:64px}
  .ev-next{margin-top:44px}
  .ev-nap{padding:20px}
  .ev-nap dl div{grid-template-columns:minmax(0,1fr);gap:0}
}
/* 目次の名前は site.css では 1400px から出る。/event は 1460px 未満だと本文の右端に触れるので、それまでは点だけ（ホバーで名前） */
@media (min-width:1400px) and (max-width:1459px) and (hover:hover) and (pointer:fine){
  .toc{right:14px}
  .toc span{display:none;position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:#fff;padding:3px 9px;border-radius:6px;font-size:12px}
  .toc a:hover span,.toc a:focus-visible span{display:block}
}