/* 参加方法：金属の反射、光の軌跡、立体的な装飾をコードで描画。 */
.premium-lp #benefit {
  background: radial-gradient(ellipse at 18% 38%, #7b4c1426, transparent 52%), radial-gradient(ellipse at 88% 38%, #456c8e24, transparent 52%), #08090b !important;
}
#benefit .join-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
#benefit .join-card {
  --join-accent:#f1d08b; --join-bright:#fff2c8; --join-rgb:225,177,82; --join-dark:#181109;
  --join-metal:linear-gradient(115deg,#916022 0%,#e7bd67 18%,#fff5d0 34%,#bf8d37 49%,#f5d889 64%,#97631c 81%,#e9cc87 100%);
  position:relative; isolation:isolate; display:flex; flex-direction:column; min-width:0;
  border:1px solid transparent;
  background:linear-gradient(145deg,#17120b,#08090a 50%,#1b1409) padding-box, var(--join-metal) border-box;
  box-shadow:0 24px 65px #0009,0 0 35px rgba(var(--join-rgb),.09),inset 0 0 38px rgba(var(--join-rgb),.04);
}
#benefit .join-card-online {
  --join-accent:#d9dfe7; --join-bright:#f6f8fb; --join-rgb:195,205,220; --join-dark:#0c151f;
  --join-metal:linear-gradient(115deg,#4a647a 0%,#bdd5e8 20%,#fff 35%,#6b879f 49%,#d3e5f2 64%,#516f87 80%,#c2ddf3 100%);
  background:linear-gradient(145deg,#15181d,#090b0f 50%,#191e25) padding-box,var(--join-metal) border-box;
}
#benefit .join-card::before {
  content:''; position:absolute; z-index:5; inset:7px; pointer-events:none;
  border:1px solid rgba(var(--join-rgb),.2);
  background:linear-gradient(var(--join-accent),var(--join-accent)) left top/26px 1px no-repeat,linear-gradient(var(--join-accent),var(--join-accent)) left top/1px 26px no-repeat,linear-gradient(var(--join-accent),var(--join-accent)) right bottom/26px 1px no-repeat,linear-gradient(var(--join-accent),var(--join-accent)) right bottom/1px 26px no-repeat;
}
#benefit .join-card::after {
  content:''; position:absolute; z-index:6; pointer-events:none; left:5%; right:5%; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--join-bright),transparent); box-shadow:0 0 15px rgba(var(--join-rgb),.9);
}
#benefit .join-art { position:relative; aspect-ratio:1122 / 612; overflow:hidden; }
#benefit .join-art>img { display:block; width:100%; height:auto; max-width:none; }
#benefit .join-art::after { content:''; position:absolute; inset:auto 0 0; height:18px; background:linear-gradient(transparent,#100e0a); pointer-events:none; }
#benefit .join-card-online .join-art::after { background:linear-gradient(transparent,#0e1116); }
#benefit .join-accessible-title { position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#benefit .join-details { position:relative; padding:27px 34px 25px; background:radial-gradient(ellipse at 0% 25%,rgba(var(--join-rgb),.065),transparent 65%); }
#benefit .join-details::before { content:''; position:absolute; inset:0 18px auto; height:1px; background:linear-gradient(90deg,transparent,var(--join-accent),transparent); box-shadow:0 0 12px rgba(var(--join-rgb),.35); }
#benefit .join-list-label { color:var(--join-bright); font:500 42px/1.5 var(--serif); font-family:var(--serif)!important; font-weight:500!important; text-align:center; word-break:keep-all; }
#benefit .join-list-label>small { display:block; margin-bottom:15px; font:500 11px/1.5 var(--sans); letter-spacing:.23em; color:var(--join-accent)!important; }
#benefit .join-list-label>span { display:block; margin-top:5px; color:var(--join-accent); white-space:nowrap; }
#benefit .join-list-label em { display:inline-block; margin-right:2px; vertical-align:-3px; font:italic 86px/1 Georgia,serif; color:var(--join-bright); }
#benefit .join-list-label { min-height:185px; display:flex; flex-direction:column; justify-content:center; }
#benefit .join-features { list-style:none; padding:0; margin:24px 0 0; }
#benefit .join-features>li { position:relative; display:flex; align-items:center; gap:17px; padding:21px 0; }
#benefit .join-features>li+li::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,rgba(var(--join-rgb),.06),rgba(var(--join-rgb),.4),rgba(var(--join-rgb),.06)); }
#benefit .join-feature-mark { position:relative; display:grid; place-items:center; flex:0 0 54px; width:54px; height:54px; border:1px solid transparent; border-radius:50%; color:var(--join-accent); background:linear-gradient(140deg,#34281a,#0d0c0a 55%,#312315) padding-box,var(--join-metal) border-box; box-shadow:0 0 15px rgba(var(--join-rgb),.14),inset 0 0 0 3px #0008; }
#benefit .join-card-online .join-feature-mark { background:linear-gradient(140deg,#25394a,#090e15 55%,#1c2c3c) padding-box,var(--join-metal) border-box; }
#benefit .join-feature-mark::after { content:''; position:absolute; inset:3px; border:1px solid rgba(var(--join-rgb),.2); border-radius:50%; }
#benefit .join-feature-mark svg { width:29px; height:29px; filter:drop-shadow(0 0 5px rgba(var(--join-rgb),.3)); }
#benefit .join-features h4 { color:var(--join-bright); font:600 20.4px/1.75 var(--serif); font-family:var(--serif)!important; font-weight:600!important; -webkit-text-stroke:0!important; text-shadow:0 1px 10px #000!important; overflow-wrap:anywhere; }
#benefit .join-features p { margin-top:5px; color:#bcb9b1; font:400 12px/1.8 var(--sans); font-weight:400!important; }
#benefit .join-card-online .join-features p { color:#b5c0c9; }
#benefit .join-note { margin-top:8px; padding:15px 18px; background:linear-gradient(120deg,#a3c4df10,#a3c4df03); border:1px solid #a3c4df24; }
#benefit .join-note>p { color:#d0deea; font:500 14px/1.8 var(--sans); }
#benefit .join-note ul { padding:0 0 0 1.2em; margin:5px 0 0; color:#abbac7; font:400 14px/1.8 var(--sans); }
#benefit .join-note li+li { margin-top:4px; }
#benefit .join-footer { position:relative; margin-top:auto; padding:25px 34px 34px; background:linear-gradient(0deg,rgba(var(--join-rgb),.1),transparent); }
#benefit .join-footer::before { content:'◆'; display:block; margin-bottom:12px; text-align:center; color:var(--join-accent); font-size:9px; background:linear-gradient(90deg,transparent,rgba(var(--join-rgb),.45)) left 50%/44% 1px no-repeat,linear-gradient(90deg,rgba(var(--join-rgb),.45),transparent) right 50%/44% 1px no-repeat; }
#benefit .join-recommendation { margin-bottom:17px; text-align:center; color:var(--join-bright); font:400 14px/1.8 var(--serif); font-family:var(--serif)!important; letter-spacing:.05em; }
/* ユーザーがFigmaで制作したボタン画像をそのまま使用。 */
#benefit .join-cta { display:block; width:100%; max-width:460px; margin-inline:auto; border:0; background:none; box-shadow:0 6px 18px #0007,0 2px 4px #0005; transition:transform .12s cubic-bezier(.2,.9,.3,1),box-shadow .18s ease,filter .2s ease; }
#benefit .join-cta>img { display:block; width:100%; height:auto; }
#benefit .join-cta:hover { transform:translateY(2px) scale(.985); box-shadow:0 3px 8px #0009,inset 0 2px 4px #0007; filter:brightness(.95); }
#benefit .join-cta:active { transform:translateY(3px) scale(.975); box-shadow:0 1px 4px #000c,inset 0 3px 6px #0009; filter:brightness(.88); }
#benefit .join-cta:focus-visible { outline:2px solid var(--join-bright); outline-offset:6px; }
#benefit .join-features p { font-family:var(--sans)!important; font-size:16px; line-height:1.9; }
#benefit .join-note>p, #benefit .join-note ul, #benefit .join-note li { font-family:var(--sans)!important; }
#benefit .join-card-online .join-feature-mark { color:#e3e8ee; background:linear-gradient(140deg,#383f48,#0c1015 55%,#262f39) padding-box,var(--join-metal) border-box; }
@media(max-width:1100px) and (min-width:861px) {
  #benefit .join-details,#benefit .join-footer { padding-inline:24px; }
  #benefit .join-features>li { gap:12px; }
  #benefit .join-feature-mark { flex-basis:46px; width:46px; height:46px; }
  #benefit .join-features h4 { font-size:18px; }
  #benefit .join-list-label { font-size:36px; }
}
@media(max-width:860px) {
  #benefit .join-grid { grid-template-columns:minmax(0,1fr); gap:38px; max-width:560px; margin-inline:auto; }
}
@media(max-width:540px) {
  /* 数字5の字面上の余白も含め、スマホの見出し間隔を約半分にする。 */
  #benefit .join-card-offline .join-list-label>span { margin-top:-16px; }
  #benefit .join-details { padding:25px 23px 17px; }
  #benefit .join-list-label { font-size:36px; }
  #benefit .join-list-label em { font-size:76px; }
  #benefit .join-list-label>small { font-size:10px; letter-spacing:.18em; }
  #benefit .join-features { margin-top:20px; }
  #benefit .join-features>li { gap:13px; padding:20px 0; }
  #benefit .join-feature-mark { flex-basis:44px; width:44px; height:44px; }
  #benefit .join-feature-mark svg { width:24px; height:24px; }
  #benefit .join-features h4 { font-size:18px; line-height:1.75; }
  #benefit .join-features p { font-size:14px; }
  #benefit .join-note { padding:14px; }
  #benefit .join-note>p, #benefit .join-note ul { font-size:13px; }
  #benefit .join-footer { padding:15px 20px 28px; }
  #benefit .join-recommendation { font-size:13px; }
}
@media(max-width:360px) {
  #benefit .join-details { padding-inline:19px; }
  #benefit .join-list-label { font-size:32px; }
  #benefit .join-feature-mark { flex-basis:38px; width:38px; height:38px; }
  #benefit .join-features>li { gap:10px; }
  #benefit .join-features h4 { font-size:16.8px; }
  #benefit .join-footer { padding-inline:16px; }
  #benefit .join-recommendation { font-size:12px; }
}

@media(prefers-reduced-motion:reduce) {
  #benefit .join-cta { transition:none; }
}

/* オンライン参加の廃止で1枚になったので、オフラインのカードを中央に1列で置く */
#benefit .join-grid { grid-template-columns:minmax(0,1fr); max-width:560px; margin-inline:auto; }
/* 2026-10-22 カード上部の画像をやめ、キャッチコピーをコードで描く（写真は会場の客席だけを使う） */
#benefit .join-art.join-art-coded { aspect-ratio:auto; display:flex; flex-direction:column; background:radial-gradient(ellipse 80% 70% at 50% 0%,rgba(226,190,120,.24),transparent 70%),linear-gradient(180deg,#14110b,#0b0a08); }
#benefit .join-hero-copy { position:relative; z-index:2; margin:0; padding:44px 22px 0; text-align:center; font-family:var(--serif)!important; font-weight:700!important; line-height:1.25; word-break:keep-all; }
#benefit .join-hero-lead { display:block; font-size:30px; letter-spacing:.04em; color:#fbf1d6; text-shadow:0 0 22px rgba(240,200,120,.45),0 2px 6px rgba(0,0,0,.8); }
#benefit .join-hero-main { display:block; margin-top:10px; font-size:44px; letter-spacing:.02em; color:#f0d38c; background:linear-gradient(180deg,#fff7dc 0%,#f3d68f 42%,#c79a45 72%,#f2d996 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 14px rgba(232,190,100,.35)) drop-shadow(0 3px 4px rgba(0,0,0,.7)); }
#benefit .join-hero-main em { font-style:normal; font-size:1.25em; }
#benefit .join-art>img.join-hero-photo { display:block; width:100%; height:auto; margin-top:-6px; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 78%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 78%,transparent 100%); }
@media (max-width:540px) {
  #benefit .join-hero-copy { padding:32px 14px 0; }
  #benefit .join-hero-lead { font-size:20px; }
  #benefit .join-hero-main { margin-top:6px; font-size:29px; }
}
/* 「リアル参加だからこそ得られる」は1行に収め、「5つの価値」を主役にする */
#benefit .join-list-label>.join-label-lead { display:block; font-size:24px; font-weight:500; letter-spacing:.06em; white-space:nowrap; color:var(--join-bright); }
#benefit .join-list-label>.join-label-lead+span { margin-top:6px; }
@media (max-width:540px) {
  #benefit .join-list-label>.join-label-lead { font-size:17px; letter-spacing:.03em; }
  #benefit .join-card-offline .join-list-label>.join-label-lead+span { margin-top:2px; }
}