/* =====================================================================
   TOPページだけの演出（inc/front-motion.php から TOP でのみ読み込む）
   既存の theme.css には手を入れない。ここを外せば従来のTOPに戻る。
   ===================================================================== */

/* ---------- ① 開いたときの幕 ---------- */
.bd-op{position:fixed;inset:0;z-index:10000;pointer-events:none}
.bd-op-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr)}
.bd-op-tiles i{display:block;background:#141519;box-shadow:0 0 0 .5px #141519;transform-origin:50% 0;animation:bdOpTile .75s cubic-bezier(.77,0,.18,1) calc(.95s + var(--d)) forwards}
.bd-op-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.2em;font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(18px,2vw,24px);letter-spacing:.5em;color:#fff;opacity:0;animation:bdOpLogo 1.15s ease forwards}
.bd-op-logo b{width:9px;height:9px;background:var(--color-accent);margin-left:-.2em}
@keyframes bdOpTile{to{transform:scaleY(0)}}
@keyframes bdOpLogo{0%{opacity:0;letter-spacing:.9em}40%{opacity:1;letter-spacing:.5em}78%{opacity:1}100%{opacity:0}}
@media (max-width:900px){.bd-op-tiles{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr)}}

/* ---------- ② ファーストビュー：白いタイルが外れて写真が現れる ----------
   写真と白いグラデーション（.hero-top::before）の間に挟む。大きさ・配置は従来のまま */
.hero-tiles{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);pointer-events:none}
.hero-tiles i{display:block;background:var(--color-bg);box-shadow:0 0 0 .5px var(--color-bg);transform-origin:var(--o,0 0);animation:bdTileOut .95s cubic-bezier(.77,0,.18,1) calc(.15s + var(--d)) forwards}
.hero-tiles i:nth-child(3n){--o:100% 0}
.hero-tiles i:nth-child(3n+1){--o:0 100%}
.hero-tiles i:nth-child(4n){--o:100% 100%}
.hero-tiles i:nth-child(5n){--o:50% 50%}
@keyframes bdTileOut{to{transform:scale(0)}}
.hero-slides .hs-ph.on{animation:bdKen 2.8s cubic-bezier(.22,.61,.36,1) .1s both}
@keyframes bdKen{from{transform:scale(1.12)}to{transform:none}}
@media (max-width:900px){.hero-tiles{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr)}}

/* 幕を出したときは、ヒーローの動きを幕が外れてから始める */
html.bd-op-on .hero-tiles i{animation-delay:calc(1.45s + var(--d))}
html.bd-op-on .hero-slides .hs-ph.on{animation-delay:1.4s}
html.bd-op-on .hero-line>span{animation-delay:1.75s}
html.bd-op-on .hero-line:nth-of-type(2)>span{animation-delay:1.89s}
html.bd-op-on .hero-fade{animation-delay:2.15s}
html.bd-op-on .hero-grid>.rv{transition-delay:1.7s!important}

/* ---------- ③ 開催予定：日程を「年／月日／曜日」に分けてひと目で読めるように ---------- */
#sec-schedule .table td{vertical-align:middle;padding-top:18px;padding-bottom:18px}
#sec-schedule .sd{white-space:nowrap;line-height:1}
#sec-schedule .sd-y{display:block;font-family:"Archivo",sans-serif;font-weight:600;font-size:11px;letter-spacing:.24em;color:color-mix(in srgb,var(--color-text) 50%,transparent)}
#sec-schedule .sd-md{display:flex;align-items:baseline;gap:10px;margin-top:7px;font-family:"Archivo",sans-serif;font-weight:700;font-size:30px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--color-text)}
#sec-schedule .sd-w{display:inline-flex;align-items:baseline;gap:6px;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:14px;letter-spacing:0}
#sec-schedule .sd-w em{font-style:normal;font-family:"Archivo",sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.16em;color:var(--color-accent)}
#sec-schedule td[data-label="イベント"] a{font-size:15.5px;letter-spacing:.01em}
#sec-schedule .table tbody tr{transition:background .3s}
@media (max-width:760px){#sec-schedule .sd-md{font-size:26px;margin-top:0}#sec-schedule .sd-y{display:inline-block;margin-right:10px}#sec-schedule .sd{display:flex!important;align-items:baseline;flex-wrap:wrap}#sec-schedule .sd::before{flex-basis:100%}}

/* ---------- ④ 会場アクセス：事務所の写真 ---------- */
.venue-photo{grid-column:1/-1;position:relative;margin:0;overflow:hidden;aspect-ratio:21/9;border-bottom:2px solid var(--color-text);background:var(--color-surface)}
.venue-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.venue-card:hover .venue-photo img{transform:scale(1.04)}
.venue-photo figcaption{position:absolute;right:12px;bottom:12px;z-index:2;color:#fff}
@media (max-width:900px){.venue-photo{aspect-ratio:16/9}}
.vp-city{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(28px,3vw,42px);letter-spacing:.05em;line-height:1}
.vp-note{font-size:11px;font-weight:700;letter-spacing:.06em;background:rgba(10,10,12,.6);padding:3px 10px}
/* 写真を覆うタイル（front.js が足す。JSが無ければタイル自体が無いので写真はそのまま見える） */
.vp-tiles{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);pointer-events:none}
.vp-tiles b{display:block;background:var(--color-bg);box-shadow:0 0 0 .5px var(--color-bg);transform-origin:var(--o,0 0)}
.vp-tiles b:nth-child(3n){--o:100% 0}.vp-tiles b:nth-child(3n+1){--o:0 100%}.vp-tiles b:nth-child(4n){--o:100% 100%}
.venue-photo.in .vp-tiles b{animation:bdTileOut .85s cubic-bezier(.77,0,.18,1) var(--d) forwards}

/* ---------- ⑤ BizMatch：3枚のカード ---------- */
.bm-head{width:100%}
.bm-head .kicker-row{margin-bottom:0}
.bm-head .sec-h2{margin-top:14px!important}
.bm-deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}
.bm-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:370px;padding:28px 26px 30px;border:2px solid var(--color-text);border-radius:16px;background:var(--color-bg);color:var(--color-text);box-shadow:0 30px 60px -36px rgba(15,16,20,.6)}
.bm-k{font-family:"Archivo",sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent)}
.bm-tag{align-self:flex-start;margin-top:12px;font-size:11.5px;font-weight:800;letter-spacing:.04em;border:1.5px solid currentColor;padding:3px 10px}
.bm-card h3{font-family:"Archivo","Noto Sans JP",sans-serif;font-weight:800;font-size:23px;line-height:1.45;margin:18px 0 0}
.bm-card p{position:relative;z-index:1;font-size:14px;line-height:1.9;margin:12px 0 0;opacity:.82}
.bm-card strong{font-weight:800}
.bm-no{position:absolute;right:12px;bottom:-30px;font-family:"Archivo",sans-serif;font-weight:800;font-size:160px;line-height:1;opacity:.07;pointer-events:none}
.bm-card--2{background:var(--color-text);color:var(--color-bg)}
.bm-card--2 .bm-k{color:#ff8b7e}
.bm-card--3{background:var(--color-accent);color:#fff}
.bm-card--3 .bm-k{color:#fff}
@media (max-width:900px){.bm-deck{grid-template-columns:1fr}.bm-card{min-height:0}}

/* PCで front.js が動いたとき：画面を止めて、山札 → 手札 → 横一列 */
.bm-hand.is-hand{height:280vh}
.bm-hand.is-hand .bm-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:72px}
.bm-hand.is-hand .bm-deck{position:relative;display:block;height:min(460px,60vh);margin-top:24px}
.bm-hand.is-hand .bm-card{position:absolute;left:50%;top:50%;width:300px;height:410px;min-height:0;margin:-205px 0 0 -150px;transform-origin:50% 130%;will-change:transform}

/* ---------- ⑦ 参加費：チケット（クーポン券）と、¥3,000 に線が引かれて ¥2,000 が出る ----------
   ここに書いた見た目が完成形。front.js が .fx を付けたときだけ「動く前」の状態から始める */
.price-hero .ph-old{position:relative;display:inline-block;margin-right:.35em;font-size:.6em;vertical-align:.2em;color:color-mix(in srgb,var(--color-text) 42%,transparent)}
.price-hero .ph-old::after{content:"";position:absolute;left:-6%;right:-6%;top:52%;height:3px;background:var(--color-accent);transform:rotate(-8deg);transform-origin:left center}
/* 英数字（Archivo）は同じ大きさでも和文より小さく見えるので、¥2,000 だけ一回り大きくする（「です。」より小さく見えないように） */
.price-hero .ph-amt{display:inline-block;font-size:1.3em;line-height:1;letter-spacing:-.03em}
.price-hero.fx .ph-old::after{transform:rotate(-8deg) scaleX(0);transition:transform .55s cubic-bezier(.77,0,.18,1) .35s}
.price-hero.fx .ph-amt{opacity:0;transform:translateY(.35em) scale(.88);transition:opacity .45s ease .9s,transform .75s cubic-bezier(.34,1.56,.64,1) .9s}
.price-hero.fx.is-in .ph-old::after{transform:rotate(-8deg) scaleX(1)}
.price-hero.fx.is-in .ph-amt{opacity:1;transform:none}

.price-tix{--pad:clamp(18px,2vw,26px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px;row-gap:0}
.tix{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;padding:28px var(--pad) 30px;margin-bottom:18px;border:2px solid var(--color-text);background:var(--color-bg);transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s}
.tix--accent{background:var(--color-accent-100)}
.tix>.tag{justify-self:start;align-self:start}
.tix>p:first-of-type{align-self:start}
.tix-perf{align-self:end}
.tix:hover{transform:translateY(-6px);box-shadow:8px 10px 0 var(--color-text)}
/* 切り取り線と、左右の切り欠き（円の内側半分だけ線を引いて「穴」に見せる） */
.tix-perf{position:relative;display:block;height:0;margin:24px calc(var(--pad) * -1) 0;border-top:2px dashed color-mix(in srgb,var(--color-text) 30%,transparent)}
/* 切り欠き（縁の半円）は付けない。3通り試したが、どの方式でも縁の線と半円のつなぎ目がずれて見えたため（2026-10-05）。
   チケットらしさは点線の切り取り線で出す */
.tix--free>p:first-of-type{justify-self:start;align-self:center;margin:14px 0 0!important;padding:6px 12px 8px;border:3px solid var(--color-accent);border-radius:6px;box-shadow:inset 0 0 0 2px var(--color-accent-100),inset 0 0 0 4px var(--color-accent);font-size:clamp(26px,2.4vw,32px)!important;line-height:1.1!important;transform:rotate(-12deg);transform-origin:center;opacity:.92}
/* 画面に入ったとき：左から順に少し傾いて入り、「次回無料」はスタンプのように押される */
.price-tix.fx .tix{opacity:0;transform:translateY(44px) rotate(-2.5deg)}
.price-tix.fx.is-in .tix{opacity:1;transform:none;transition:opacity .6s ease,transform .9s cubic-bezier(.22,1.25,.36,1)}
.price-tix.fx.is-in .tix:nth-child(2){transition-delay:.09s}
.price-tix.fx.is-in .tix:nth-child(3){transition-delay:.18s}
.price-tix.fx.is-in .tix:nth-child(4){transition-delay:.27s}
.price-tix.fx .tix--free>p:first-of-type{opacity:0;transform:scale(2) rotate(-20deg)}
.price-tix.fx.is-in .tix--free>p:first-of-type{opacity:.92;transform:rotate(-12deg);transition:opacity .2s ease 1s,transform .45s cubic-bezier(.2,1.7,.4,1) 1s}
@media (max-width:1000px){.price-tix{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- ⑦-2 人数保証（参加費の下） ----------
   帯は左から「無料／−¥1,000／通常」。列の幅（--cols）は人数の比率。
   区切りの白線は gap ではなく2つ目以降の左の線で出す（gap だと区切りの数で位置がずれ、段どうしの半分の位置がそろわない） */
.guar{margin-top:28px;padding:clamp(22px,3vw,34px);border:2px solid var(--color-text);background:var(--color-bg)}
.guar-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;align-items:center}
.guar-head .tag{justify-self:start}
.guar-h{margin:0;font-family:"Archivo","Noto Sans JP",sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,28px);line-height:1.35;letter-spacing:-.01em}
.guar-lead{grid-column:1 / -1;margin:6px 0 0;font-size:14.5px;line-height:1.9;color:color-mix(in srgb,var(--color-text) 78%,transparent)}
.guar-lead strong{font-weight:800}
.guar-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px 20px;align-items:center;margin-top:22px}
.guar-name{margin:0;font-weight:800;font-size:15px;line-height:1.5}
.guar-name small{display:block;font-size:12px;font-weight:700;color:var(--color-muted)}
.guar-bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:var(--cols);min-height:64px}
.guar-bar li{box-sizing:border-box;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:10px 14px;line-height:1.3}
.guar-bar li+li{border-left:3px solid var(--color-bg)}
.guar-bar b{font-family:"Archivo","Noto Sans JP",sans-serif;font-weight:800;font-size:clamp(14px,1.5vw,18px)}
.guar-bar li>span{margin-top:3px;font-size:12px;font-weight:700;white-space:nowrap}
.guar-bar .g-amt{font-style:normal;white-space:nowrap}
.guar-bar .g-free{background:var(--color-accent);color:#fff}
.guar-bar .g-off{background:var(--color-accent-100);color:var(--color-accent-700);box-shadow:inset 0 0 0 2px var(--color-accent)}
.guar-bar .g-base{background:var(--color-surface);color:color-mix(in srgb,var(--color-text) 62%,transparent)}
.guar-note{margin:18px 0 0;font-size:12.5px;line-height:1.85;color:color-mix(in srgb,var(--color-text) 62%,transparent)}
.sp-only{display:none}
/* 画面に入ったら、帯が左から伸びる */
.guar.rv .guar-bar li{transform:scaleX(0);transform-origin:left center}
.guar.rv.in .guar-bar li{transform:none;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.guar.rv.in .guar-bar li:nth-child(2){transition-delay:.12s}
.guar.rv.in .guar-bar li:nth-child(3){transition-delay:.24s}
@media (max-width:760px){
  .guar-head{grid-template-columns:1fr}
  .guar-row{grid-template-columns:1fr}
  .guar-bar{grid-template-columns:minmax(0,1fr);min-height:0}
  .guar-bar li{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
  .guar-bar li+li{border-left:0;border-top:3px solid var(--color-bg)}
  .sp-only{display:inline}
}
@media (prefers-reduced-motion:reduce){.guar.rv .guar-bar li{transform:none}}

@media (max-width:560px){.price-tix{grid-template-columns:1fr}}


/* 1文ごとに改行する段落（文の途中では折り返さない。狭い画面で1文が収まらないときだけ文中で折り返す） */
.sent{display:block}


/* ---------- ⑧ 開催予定（スマホ）：ラベルをやめて、1回分を詰めたカードに ----------
   theme.css のスマホ表示（各セルの上に「日程」「イベント」…の見出し）だと1回分が縦に長くなりすぎる */
@media (max-width:760px){
  #sec-schedule .table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"date status" "title title" "venue venue";gap:8px 12px;padding:16px 16px 18px}
  #sec-schedule .table td{padding:0!important;border:0!important;width:auto}
  #sec-schedule .table td::before{display:none}
  #sec-schedule td[data-label="日程"]{grid-area:date}
  #sec-schedule td[data-label="イベント"]{grid-area:title}
  #sec-schedule td[data-label="会場"]{grid-area:venue}
  #sec-schedule td[data-label="募集状況"]{grid-area:status;align-self:start}
  #sec-schedule .sd{display:flex!important;align-items:baseline;gap:10px}
  #sec-schedule .sd-y{display:inline-block;margin:0}
  #sec-schedule .sd-md{margin-top:0;font-size:26px}
}
/* タップした行が「選択中」の色のまま残らないように */
@media (hover:none){#sec-schedule .table tbody tr:hover{background:transparent}}

/* ---------- ① 背景動画（ファーストビュー） ----------
   写真（.hs-ph）の上・タイルと白いグラデーションの下に重ねる。再生が始まってからゆっくり現れる */
/* 写真・動画の下端はくっきり切らず、白にグラデーションで溶かす */
.hero-slides{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 200px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 200px),transparent)}
@media (max-width:900px){.hero-slides{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 120px),transparent)}}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:0;transition:opacity 2s ease;pointer-events:none}
.hero-video.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}

/* ---------- ⑪ 公式LINEの画面（動画） ----------
   LINEのリッチメニューと同じ橙→赤のグラデーションを、スマホの後ろの光に使う */
.ld-sec{position:relative;overflow:hidden;padding:clamp(64px,8vw,112px) 0;background:#fbf7f4;border-top:2px solid var(--color-text)}
.ld-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"phone head" "phone body";gap:24px clamp(32px,6vw,96px);align-items:start}
.ld-head{grid-area:head;align-self:end}
.ld-body{grid-area:body}
.ld-lead{margin:18px 0 0;font-size:15px;line-height:1.95;color:color-mix(in srgb,var(--color-text) 78%,transparent)}
.ld-phone-wrap{grid-area:phone;position:relative;justify-self:center;align-self:center;width:min(300px,74vw)}
/* 後ろの光は動かさない（ぼかしをかけた大きな要素を動かし続けると描画が重く、動画のコマ落ちの原因になる） */
.ld-blob{position:absolute;inset:-14% -26%;border-radius:50%;background:radial-gradient(closest-side,rgba(232,96,28,.42),rgba(214,64,90,.24) 55%,transparent 76%);pointer-events:none}
.ld-phone{position:relative;padding:26px 10px 20px;border-radius:42px;background:#141519;box-shadow:0 46px 80px -34px rgba(15,16,20,.65),inset 0 0 0 1.5px #3a3b40;rotate:3deg;animation:ldFloat 6s ease-in-out infinite}
.ld-phone::before{content:"";position:absolute;top:11px;left:50%;width:64px;height:6px;margin-left:-32px;border-radius:6px;background:#2c2d33}
@keyframes ldFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.ld-video{display:block;width:100%;height:auto;aspect-ratio:600/968;border-radius:26px;background:#111;object-fit:cover}
.ld-steps{list-style:none;margin:8px 0 0;padding:0;border-top:2px solid var(--color-text)}
.ld-step{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 10px;width:100%;padding:14px 4px 15px;border-bottom:1px solid var(--color-divider);cursor:pointer;transition:opacity .4s,background .3s}
.ld-step:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.ld-n{grid-row:span 2;font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;line-height:1.6;color:var(--color-accent)}
.ld-step b{font-size:16px;font-weight:800;line-height:1.6}
.ld-d{font-size:13.5px;line-height:1.8;color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.ld-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#e8601c,#d6405a);transform:scaleX(var(--p,0));transform-origin:left center}
/* 動画が動いているときだけ、いまの画面の項目を強調する（JSが .is-live を付ける） */
.ld-sec.is-live .ld-step{opacity:.42}
.ld-sec.is-live .ld-step:hover{opacity:.75}
.ld-sec.is-live .ld-step.is-on{opacity:1;background:linear-gradient(90deg,rgba(232,96,28,.07),transparent 70%)}
.ld-btn{margin-top:24px}
.ld-note{margin:14px 0 0;font-size:12px;line-height:1.8;color:color-mix(in srgb,var(--color-text) 58%,transparent)}
@media (max-width:900px){
  .ld-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "phone" "body";gap:28px}
  .ld-phone-wrap{width:min(270px,70vw);margin:12px 0}
}
@media (prefers-reduced-motion:reduce){.ld-phone{animation:none}}

/* ---------- ⑨ Instagram ----------
   公式アカウントの見た目（グレーの壁に差す光・明朝の告知・モノグラム）に寄せる。
   背景は斜めに差す光の帯、スマホの後ろには会場オフィスのリールを1枚傾けて置く */
.ig-sec{position:relative;overflow:hidden;isolation:isolate;padding:clamp(64px,8vw,112px) 0;background:#e9e8e5;border-top:2px solid var(--color-text)}
.ig-sec::before{content:"";position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;filter:blur(28px);
  background:linear-gradient(118deg,transparent 0 44%,rgba(255,255,255,.75) 44% 53%,transparent 53% 57%,rgba(255,255,255,.45) 57% 60%,transparent 60%)}
.ig-sec::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 80% at 80% 50%,rgba(255,255,255,.35),transparent 70%)}
.ig-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px clamp(32px,5vw,80px);align-items:center}
.ig-lead{margin:20px 0 0;font-size:15px;line-height:1.95;color:color-mix(in srgb,var(--color-text) 78%,transparent)}
.ig-handle{display:table;margin-top:22px;font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.01em;color:var(--color-text);
  background:linear-gradient(90deg,#f58529,#dd2a7b 45%,#8134af 75%,#515bd4) 0 100%/0 3px no-repeat;transition:background-size .5s cubic-bezier(.22,.61,.36,1)}
.ig-handle:hover{background-size:100% 3px;color:var(--color-text)}
.ig-btn{display:inline-flex;margin-top:26px;padding:2px;border-radius:999px;background:linear-gradient(90deg,#f58529,#dd2a7b 45%,#8134af 75%,#515bd4);box-shadow:0 14px 30px -14px rgba(221,42,123,.6);transition:transform .3s,box-shadow .3s}
.ig-btn>span{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;background:var(--color-bg);color:var(--color-text);font-weight:800;font-size:14.5px;transition:background .3s,color .3s}
.ig-btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(221,42,123,.75)}
.ig-btn:hover>span{background:transparent;color:#fff}

/* スマホの枠（Instagramのプロフィール画面を模したもの） */
.ig-phone{position:relative;justify-self:center;display:block;width:min(320px,82vw);transform:rotate(-4deg);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.ig-phone:hover{transform:rotate(0) translateY(-6px)}
/* 後ろに置くリール（会場オフィスとモノグラム） */
.ig-float{position:absolute;top:7%;right:-40%;width:64%;aspect-ratio:3/4;border-radius:10px;overflow:hidden;rotate:10deg;
  box-shadow:0 30px 60px -24px rgba(15,16,20,.55);transition:translate .8s cubic-bezier(.22,.61,.36,1),rotate .8s cubic-bezier(.22,.61,.36,1)}
.ig-float img{width:100%;height:100%;object-fit:cover;display:block}
.ig-phone:hover .ig-float{translate:12px -8px;rotate:13deg}
.ig-screen{position:relative;display:block;padding:18px 14px 16px;border:2px solid var(--color-text);border-radius:34px;background:#fff;box-shadow:0 0 0 8px #141519,0 40px 70px -30px rgba(15,16,20,.55)}
.ig-screen::before{content:"";position:absolute;top:8px;left:50%;width:70px;height:6px;margin-left:-35px;border-radius:6px;background:#141519}
.ig-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.ig-av{flex:none;display:block;width:48px;height:48px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}
.ig-av img,.ig-av b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:2px solid #fff;background:#fff;object-fit:cover}
.ig-av b{background:#141519;color:#fff;font-family:"Archivo",sans-serif;font-weight:800;font-size:13px}
.ig-name{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ig-name b{font-size:13.5px;font-weight:800;color:var(--color-text)}
.ig-name small{font-size:10.5px;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-follow{margin-left:auto;flex:none;padding:5px 12px;border-radius:8px;background:#0095f6;color:#fff;font-size:11.5px;font-weight:800}
.ig-bio{display:block;margin:10px 2px 10px;font-size:11.5px;color:var(--color-text)}
/* 投稿／リール／タグ付けのタブ */
.ig-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin:0 -14px;border-top:1px solid #dbdbdb}
.ig-tabs i{position:relative;height:26px}
.ig-tabs i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border:1.6px solid #a8a8a8;border-radius:2px}
.ig-tabs i.is-on{box-shadow:inset 0 -1.5px #141519}
.ig-tabs i.is-on::after{border-color:#141519}
/* 投稿の格子（Instagramのプロフィールと同じ 3:4） */
.ig-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:0 -14px;overflow:hidden;border-radius:0 0 22px 22px}
.ig-tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#ecebe8}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.ig-phone:hover .ig-tile img{transform:scale(1.06)}
.ig-reel{position:absolute;top:5px;right:5px;width:14px;height:14px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.ig-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ig-tile.ig-more img{width:52%;height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 6px 14px -8px rgba(15,16,20,.4)}
.ig-phone:hover .ig-tile.ig-more img{transform:none}
.ig-more em{font-style:normal;font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;font-size:10.5px;letter-spacing:.12em;color:#555}
/* 画面に入ったとき：枠が下から上がり、投稿が1枚ずつ現れ、後ろのリールが滑り出る（front.js が .fx / .is-in を付ける） */
.ig-sec.fx .ig-phone{opacity:0;translate:0 80px}
.ig-sec.fx .ig-tile img{opacity:0;scale:1.15}
.ig-sec.fx .ig-float{opacity:0;translate:-46% 4%;rotate:0deg}
.ig-sec.fx.is-in .ig-phone{opacity:1;translate:0 0;transition:opacity .8s ease,translate 1.2s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.ig-sec.fx.is-in .ig-tile img{opacity:1;scale:1;transition:opacity .6s ease calc(.5s + var(--i) * .1s),scale .9s cubic-bezier(.16,1,.3,1) calc(.5s + var(--i) * .1s),transform .8s cubic-bezier(.22,.61,.36,1)}
.ig-sec.fx.is-in .ig-float{opacity:1;translate:0 0;rotate:10deg;transition:opacity .6s ease 1s,translate 1.3s cubic-bezier(.16,1,.3,1) 1s,rotate 1.3s cubic-bezier(.16,1,.3,1) 1s}
.ig-sec.fx.is-in .ig-phone:hover .ig-float{translate:12px -8px;rotate:13deg;transition:translate .8s cubic-bezier(.22,.61,.36,1),rotate .8s cubic-bezier(.22,.61,.36,1)}
@media (max-width:900px){.ig-in{grid-template-columns:1fr}.ig-phone{margin-top:8px;width:min(300px,76vw)}.ig-float{right:-30%;width:52%}}

/* ---------- ⑩ 会場アクセス（スマホ）：写真→地図→住所で1会場が画面1つ半になるので、地図を外す。
   地図は「Googleマップで開く」ボタンから見られる ---------- */
@media (max-width:760px){.venue-card .venue-map{display:none}}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  .bd-op{display:none}
  .hero-tiles{display:none}
  .hero-slides .hs-ph.on{animation:none}
  .vp-tiles{display:none}
}