/* event.html 専用。Astro移行時はそのまま scoped style へ移せる */
.detail_wrap{display:flex;gap:48px;align-items:flex-start}
  .detail_main{flex:1;min-width:0}
  .detail_side{width:320px;flex:none;position:sticky;top:96px;align-self:flex-start}
  .detail_kv{position:relative;overflow:hidden;padding-top:52.63158%;background:var(--nm-mist);margin-bottom:24px}
  .detail_kv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .detail_kv .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--nm-sage-light),var(--nm-mist));
    font-family:var(--nm-font-cond);font-size:1.4rem;font-weight:700;letter-spacing:.16em;
    color:rgba(52,52,52,.45);text-transform:uppercase}
  .detail_title{font-size:3rem;font-weight:900;line-height:1.45;letter-spacing:.03em;margin:12px 0 16px}
  .detail_body h2{margin:36px 0 12px;font-size:1.9rem;font-weight:700;letter-spacing:.04em;
    padding-left:12px;border-left:4px solid var(--nm-red)}
  .detail_body p{font-size:1.5rem;line-height:2}
  /* 4Sの description は HTML文字列で返る（実APIで確認済み）。
     主催者が入稿しうる要素を一通り定義しておく。挿入時のサニタイズは実装側の必須事項。 */
  .detail_body ul,.detail_body ol{margin:12px 0 12px 1.4em;font-size:1.5rem;line-height:2}
  .detail_body ul{list-style:disc}
  .detail_body ol{list-style:decimal}
  .detail_body li{margin-bottom:4px}
  .detail_body a{color:var(--nm-red-dark);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
  .detail_body a:hover{opacity:.75}
  .detail_body img{max-width:100%;height:auto;margin:16px 0;border-radius:8px}
  .detail_body blockquote{
    margin:16px 0;padding:12px 20px;border-left:3px solid var(--nm-line);
    background:#f5f5f5;font-size:1.45rem;line-height:1.9;
  }
  .detail_body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:1.4rem;display:block;overflow-x:auto}
  .detail_body th,.detail_body td{border:1px solid var(--nm-line);padding:8px 12px;text-align:left}
  .detail_body pre{overflow-x:auto;padding:12px;background:#f5f5f5;border-radius:6px;font-size:1.3rem}
  .detail_body h3,.detail_body h4{margin:24px 0 8px;font-size:1.6rem;font-weight:700;line-height:1.5}
  .info_table{width:100%;border-collapse:collapse;margin-top:8px}
  .info_table th,.info_table td{padding:16px 4px;border-bottom:1px solid var(--nm-line);
    font-size:1.4rem;line-height:1.8;text-align:left;vertical-align:top}
  .info_table th{width:96px;font-weight:700;color:var(--nm-gray);white-space:nowrap;
    font-size:1.3rem;letter-spacing:.06em}
  .side_card{background:var(--nm-white);border:1px solid var(--nm-line);padding:24px 24px}
  .side_card .price{font-family:var(--nm-font-en);font-size:2.6rem;font-weight:700;line-height:1.2}
  .side_card .price small{font-size:1.3rem;font-weight:500;margin-left:4px}
  .side_card .btn{width:100%;margin-top:16px}
  .side_meta{margin:0}
  .side_meta dt{font-family:var(--nm-font-cond);font-size:1.25rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--nm-gray);margin-top:12px}
  .side_meta dt:first-child{margin-top:0}
  .side_meta dd{margin:2px 0 0;font-size:1.4rem;line-height:1.7}
  .side_meta .price{font-family:var(--nm-font-en);font-size:2.2rem;font-weight:700;line-height:1.3}
  .side_meta .price small{font-size:1.2rem;font-weight:500;margin-left:4px}
  .detail_side{padding-bottom:24px}
  .side_note{margin-top:14px;font-size:1.3rem;line-height:1.8;color:var(--nm-ink)}
  .host_box{margin-top:20px;padding:20px;background:#f5f5f5}
  .host_box .ttl{font-family:var(--nm-font-cond);font-size:1.2rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--nm-ink)}
  .host_box .name{margin-top:6px;font-size:1.6rem;font-weight:700}
  .official_mark{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
    background:var(--nm-red);color:var(--nm-white);font-size:1.3rem;font-weight:700;letter-spacing:.04em}
  .backlink{display:inline-flex;align-items:center;height:44px;min-height:44px;margin-bottom:4px;font-size:1.3rem;color:var(--nm-ink);
    font-weight:500}
  .backlink:hover{color:var(--nm-red-dark)}
  @media screen and (max-width:1024px){
    .detail_wrap{flex-direction:column;gap:32px}
    .detail_side{width:100%;position:static}
  }
  @media screen and (max-width:767px){
    .detail_title{font-size:2.2rem}
  }
  .sp_cta{display:none}
  @media screen and (max-width:1024px){
    .sp_cta{
      display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;
      align-items:center;justify-content:space-between;gap:16px;
      padding:10px 16px calc(10px + env(safe-area-inset-bottom));
      background:rgba(255,255,255,.96);border-top:1px solid var(--nm-line);
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    }
    .sp_cta_info{display:flex;flex-direction:column;line-height:1.35}
    .sp_cta_date{font-size:1.3rem;font-weight:700}
    .sp_cta_fee{font-family:var(--nm-font-en);font-size:1.7rem;font-weight:700}
    .sp_cta .btn{flex:none;padding:16px 24px;min-height:44px}
    .has_sp_cta{padding-bottom:88px}
  }

/* CLS対策: ヒーロー帯の高さを先に確保する。
   backlink/eyebrow がフォント適用前後で高さを変え、.page_main_cont が24pxずれていた
   （実測 CLS 0.0244 / 発生源 .page_main_cont） */
.page_title_area .backlink{height:44px;line-height:44px}
.page_title_area .eyebrow{display:block;height:24px;line-height:24px}
@media screen and (max-width:767px){
  .page_title_area{min-height:204px}
}
@media screen and (min-width:768px){
  .page_title_area{min-height:232px}
}