
.cxe-lp{
  --cxe-purple:#7b4dc0;
  --cxe-purple2:#8555cd;
  --cxe-cta:#cf3644;      /* CONX2026公式のCTA色 #e14b58 を濃くしたもの。白文字とのコントラスト 4.92:1 */
  --cxe-cta-dark:#a02734; /* ボタン下辺の影 */
  --cxe-surface:#f4f0f9;
  --cxe-surface2:#ebe5f4;
  --cxe-ink:#111111;
  --cxe-gray:#666666;
  --cxe-line:#d8cfe8;
  --cxe-jp:"Noto Sans JP","Hiragino Sans",Meiryo,sans-serif;
  --cxe-head:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --cxe-en:"Inter",sans-serif;

  font-family:var(--cxe-jp);
  color:var(--cxe-ink);
  line-height:1.8;
  font-size:16px;
  background:#fff;
  overflow-x:hidden;
  overflow-x:clip;   /* ★hidden のままだと overflow-y が auto になり、下の背景の延長が切られる */
}
.cxe-lp *,
.cxe-lp *::before,
.cxe-lp *::after{ box-sizing:border-box; }

.cxe-lp p,
.cxe-lp li,
.cxe-lp dd,
.cxe-lp dt{ margin:0; font-size:16px; line-height:1.9; color:var(--cxe-ink); }
.cxe-lp h1,.cxe-lp h2,.cxe-lp h3,.cxe-lp h4{ margin:0; font-family:var(--cxe-head); line-height:1.45; }
.cxe-lp ul{ margin:0; padding:0; list-style:none; }
.cxe-lp img{ display:block; width:100%; height:auto; }
.cxe-lp a{ color:var(--cxe-cta); }

/* 画面幅いっぱいに広げる（テーマの本文カラムから抜け出す） */
.cxe-lp .cxe-full{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }

.cxe-lp .cxe-inner{ width:100%; max-width:1040px; margin:0 auto; padding:0 24px; }
.cxe-lp .cxe-narrow{ width:100%; max-width:760px; margin:0 auto; padding:0 24px; }

/* ---- CTAボタン ----
   PC：幅420pxの横長（§2・§7とも）／ SP：横幅いっぱい  */
.cxe-lp .cxe-btn{
  display:block; width:100%; max-width:420px; margin:0 auto; text-align:center;
  text-decoration:none;
  background:var(--cxe-cta); color:#fff !important;
  font-family:var(--cxe-jp); font-weight:700; font-size:18px; line-height:1.4;
  padding:20px 24px; border-radius:1.6em;
  box-shadow:0 2px 0 var(--cxe-cta-dark);
  transition:opacity .2s;
}
.cxe-lp .cxe-btn:hover{ opacity:.85; color:#fff !important; }

/* ---- 1. FV ---- */
.cxe-lp .cxe-fv{ background:#fff; }

/* ---- 2. リード ---- */
.cxe-lp .cxe-lead{ padding:64px 0 72px; text-align:center; }
.cxe-lp .cxe-lead h2{
  font-size:30px; font-weight:900; letter-spacing:.02em;
  color:var(--cxe-ink); margin-bottom:28px;
}
.cxe-lp .cxe-lead p{ margin-bottom:1.6em; text-align:left; }
.cxe-lp .cxe-lead p:last-of-type{ margin-bottom:0; }
.cxe-lp .cxe-lead .cxe-cta-wrap{ margin-top:36px; }
/* CTA下の注記。小さく置くが、読める濃さは保つ。
   ★セレクタに .cxe-lead を挟んでいるのは、上の「.cxe-lead p{text-align:left}」に
     詳細度で負けて中央揃えが効かなかったため                              */
.cxe-lp .cxe-lead .cxe-cta-note{
  margin-top:14px; text-align:center;
  font-size:13px; line-height:1.7; color:#555555;
}

/* ---- 3. MAP ----
   1100px以上：地図の左上の空きにテキストを重ねる（文字サイズは画面幅に連動）
   1100px未満：重ねずに地図の下へ回す（地図の陸地と重なるため）        */
.cxe-lp .cxe-map{ position:relative; background:var(--cxe-surface); padding-bottom:52px; }
.cxe-lp .cxe-map-copy{
  width:100%; max-width:760px; margin:0 auto; padding:32px 24px 0;
}
.cxe-lp .cxe-map-copy h2{
  font-size:22px; font-weight:900; color:var(--cxe-purple);
  margin-bottom:18px; text-align:center;
}
.cxe-lp .cxe-map-copy p{ margin-bottom:1.4em; font-size:15px; }
.cxe-lp .cxe-map-copy p:last-child{ margin-bottom:0; }

@media screen and (min-width:1100px){
  .cxe-lp .cxe-map{ padding-bottom:0; }
  .cxe-lp .cxe-map-copy{
    /* 実測：地図の「新大阪」バッジは x=38.8%〜42.9%、y=55.9%〜68.8%。
       バッジは「この帯」にしかないので、その上を通せば右端を44%まで伸ばせる。
       → left:14% / right:56%（右端44%）。テキスト下端が y55.9% を超えないことが条件。
       ★文言を増やすと下端が下がってバッジに当たる。増やしたら必ず描画して実測すること。 */
    position:absolute; left:14%; right:56%; top:6%;
    width:auto; max-width:none; margin:0; padding:0; z-index:2;
  }
  .cxe-lp .cxe-map-copy h2{
    font-size:clamp(19px,1.8vw,27px); text-align:left; margin-bottom:1.3vw;
  }
  .cxe-lp .cxe-map-copy p{
    font-size:clamp(11px,1.0vw,15px); line-height:1.8; margin-bottom:1.1em;
  }
}

/* ---- 4. CONXとは ---- */
.cxe-lp .cxe-about{ background:var(--cxe-surface2); padding:72px 0; }
.cxe-lp .cxe-about-card{
  background:#fff; border-radius:12px; padding:44px 48px;
  display:flex; align-items:center; gap:44px;
}
.cxe-lp .cxe-about-body{ width:56%; }
.cxe-lp .cxe-about-fig{ width:44%; }
.cxe-lp .cxe-about-fig img{ border-radius:8px; }
.cxe-lp .cxe-about h2{ font-size:24px; font-weight:900; color:var(--cxe-purple); margin-bottom:20px; }
.cxe-lp .cxe-about p{ font-size:15px; margin-bottom:1.4em; }
.cxe-lp .cxe-about .cxe-spec{
  font-size:14px; color:var(--cxe-gray); line-height:1.9;
  border-top:1px solid var(--cxe-line); padding-top:16px; margin-bottom:20px;
}
.cxe-lp .cxe-about .cxe-textlink{
  font-weight:700; font-size:15px; text-decoration:none; color:var(--cxe-cta);
}
.cxe-lp .cxe-about .cxe-textlink:hover{ text-decoration:underline; }

/* ---- 見出し共通 ---- */
.cxe-lp .cxe-h2{
  text-align:center; font-size:26px; font-weight:900;
  color:var(--cxe-ink); margin-bottom:40px;
}
.cxe-lp .cxe-h2 span{
  display:block; font-family:var(--cxe-en); font-size:12px; font-weight:700;
  letter-spacing:.14em; color:var(--cxe-purple); margin-bottom:10px;
}

/* ---- 5. 車内プログラム（切符モチーフ） ----
   半券・ミシン目・半円の切り欠きで「もぎった切符」に見せる。
   ★切り欠きの色はセクション背景と同じ #fff。背景を変えたらここも変える  */
.cxe-lp .cxe-prog{ padding:76px 0; background:#fff; }
.cxe-lp .cxe-prog-list{ display:flex; flex-direction:column; gap:22px; }
.cxe-lp .cxe-prog-item{
  display:flex; background:#fff; border:2px solid var(--cxe-purple);
  border-radius:12px; overflow:hidden; position:relative;
}
.cxe-lp .cxe-prog-stub{
  flex:0 0 92px; background:var(--cxe-purple); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  position:relative;
}
.cxe-lp .cxe-prog-no{ font-family:var(--cxe-en); font-weight:700; font-size:30px; line-height:1; }
.cxe-lp .cxe-prog-cap{ font-size:10px; letter-spacing:.12em; opacity:.85; }
.cxe-lp .cxe-prog-stub::after{
  content:""; position:absolute; right:0; top:8px; bottom:8px;
  border-right:2px dashed rgba(255,255,255,.55);
}
.cxe-lp .cxe-prog-item::before,
.cxe-lp .cxe-prog-item::after{
  content:""; position:absolute; left:82px; width:20px; height:20px;
  background:#fff; border-radius:50%; z-index:2;
}
.cxe-lp .cxe-prog-item::before{ top:-11px; }
.cxe-lp .cxe-prog-item::after{ bottom:-11px; }
.cxe-lp .cxe-prog-body{ padding:24px 28px; }
.cxe-lp .cxe-prog-body h3{
  font-size:19px; font-weight:700; color:var(--cxe-purple); margin-bottom:10px;
}
.cxe-lp .cxe-prog-body p{ font-size:15px; }
.cxe-lp .cxe-prog-foot{ margin-top:26px; text-align:center; }
.cxe-lp .cxe-prog-foot p{ font-size:15px; }
.cxe-lp .cxe-note{ font-size:13px; color:var(--cxe-gray); line-height:1.8; }

/* ---- 6. タイムスケジュール ----
   SP（767px以下）＝縦のタイムライン ／ PC（768px以上）＝同じ見た目のまま横並び。
   ★ドットはすべて22pxの同じ箱。大きさではなく「塗り」で差をつけることで、
     線とドットの中心が必ず揃う（サイズ違いにすると中心がずれる）          */
.cxe-lp .cxe-time{ padding:76px 0; background:var(--cxe-surface); }

.cxe-lp .cxe-time-list{ position:relative; padding-left:100px; }
.cxe-lp .cxe-time-item{ position:relative; padding:0 0 30px 32px; }
.cxe-lp .cxe-time-item:last-child{ padding-bottom:0; }

/* 縦線：自分のドット中心から次のドット中心まで */
.cxe-lp .cxe-time-item:not(:last-child)::before{
  content:""; position:absolute; left:-1.5px; top:15px;
  width:3px; height:100%; background:var(--cxe-purple); z-index:0;
}
/* 東京駅→会場（徒歩）は破線 */
.cxe-lp .cxe-time-item.is-dash:not(:last-child)::before{
  background:repeating-linear-gradient(180deg,var(--cxe-purple) 0 9px,transparent 9px 17px);
}

.cxe-lp .cxe-time-dot{
  position:absolute; left:0; margin-left:-11px; top:4px; z-index:1;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:5px solid var(--cxe-purple);
}
.cxe-lp .is-start .cxe-time-dot,
.cxe-lp .is-end .cxe-time-dot{ background:var(--cxe-purple); }
.cxe-lp .is-walk .cxe-time-dot{ border:2px dashed var(--cxe-purple); }

.cxe-lp .cxe-time-t{
  position:absolute; left:-100px; top:-2px; width:80px; text-align:right;
  font-family:var(--cxe-en); font-weight:700; font-size:25px; line-height:1.2;
  color:var(--cxe-purple); letter-spacing:.02em;
}
.cxe-lp .is-walk .cxe-time-t{
  font-family:var(--cxe-jp); font-size:14px; font-weight:700;
  color:var(--cxe-gray); top:3px;
}
.cxe-lp .cxe-time-n{ font-size:16px; font-weight:700; }
.cxe-lp .cxe-time-foot{ margin-top:26px; text-align:center; }

@media screen and (min-width:768px){
  .cxe-lp .cxe-time-list{ display:flex; padding-left:0; }
  .cxe-lp .cxe-time-item{ flex:1 1 0; min-width:0; padding:0; text-align:center; }
  /* 横線：自分のドット中心から次のドット中心まで（ドット中心＝上から55px） */
  .cxe-lp .cxe-time-item:not(:last-child)::before{
    left:50%; top:55px; margin-top:-1.5px;
    width:100%; height:3px;
  }
  .cxe-lp .cxe-time-item.is-dash:not(:last-child)::before{
    background:repeating-linear-gradient(90deg,var(--cxe-purple) 0 9px,transparent 9px 17px);
  }
  .cxe-lp .cxe-time-dot{ position:relative; left:auto; margin:14px auto 0; top:0; }
  /* 時刻の高さを固定して、徒歩の行でもドットの位置がずれないようにする */
  .cxe-lp .cxe-time-t{
    position:static; width:auto; text-align:center;
    height:30px; display:flex; align-items:center; justify-content:center;
  }
  .cxe-lp .is-walk .cxe-time-t{ top:0; }
  .cxe-lp .cxe-time-n{ margin-top:14px; font-size:15px; }
}

/* ---- 7. 参加方法・要項 ---- */
.cxe-lp .cxe-join{ padding:76px 0; background:#fff; }
.cxe-lp .cxe-step{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.cxe-lp .cxe-step-item{
  display:flex; gap:20px; align-items:flex-start;
  border:2px solid var(--cxe-purple); border-radius:12px; padding:22px 26px;
}
.cxe-lp .cxe-step-no{
  flex:0 0 auto; font-family:var(--cxe-en); font-weight:700; font-size:13px;
  letter-spacing:.08em; color:#fff; background:var(--cxe-purple);
  border-radius:4px; padding:5px 12px; margin-top:4px;
}
.cxe-lp .cxe-step-item p{ font-size:16px; font-weight:500; }
/* STEP2の念押し：枠は付けず、赤文字のみ。中央揃え */
.cxe-lp .cxe-alert{ margin-bottom:32px; text-align:center; }
.cxe-lp .cxe-alert p{ font-size:15px; font-weight:700; color:#b03a3a; }
.cxe-lp .cxe-cta-center{ text-align:center; margin-bottom:56px; }

.cxe-lp .cxe-dl{ border-top:1px solid var(--cxe-line); margin:0; }
.cxe-lp .cxe-dl-row{
  display:flex; border-bottom:1px solid var(--cxe-line); padding:16px 0;
}
.cxe-lp .cxe-dl-row dt{
  flex:0 0 190px; font-weight:700; font-size:15px; color:var(--cxe-purple);
}
.cxe-lp .cxe-dl-row dd{ flex:1 1 auto; margin:0; font-size:15px; }
.cxe-lp .cxe-dl-row dd small{ display:block; font-size:13px; color:var(--cxe-gray); line-height:1.8; }
/* お席について：赤枠＋赤文字で注意を引く */
.cxe-lp .cxe-seat{
  margin-top:20px; background:#fff4f4; border:1px solid #e6b8b8; border-radius:8px;
  padding:16px 20px;
}
.cxe-lp .cxe-seat p{ font-size:14px; font-weight:700; color:#b03a3a; }

/* ---- 8. 注意事項 ----
   ★最後のセクションなので、下に出るテーマ側の余白（白帯）を背景で塗りつぶす。
     padding で背景を400px下へ伸ばし、同じ分を負のマージンで戻すので
     レイアウトの高さは変わらない。フッターの位置もずれない。
     白帯が残るなら400pxを増やす／フッターまで色が回り込むなら減らす */
.cxe-lp .cxe-caution{
  padding:64px 0;
  /* margin-bottom:-400px; */
  background:var(--cxe-surface);
}
.cxe-lp .cxe-caution h2{ font-size:18px; font-weight:700; margin-bottom:18px; }
.cxe-lp .cxe-caution li{
  font-size:14px; line-height:1.9; color:var(--cxe-gray);
  padding-left:1.1em; text-indent:-1.1em; margin-bottom:6px;
}

/* ============ SP（767px以下） ============ */
@media screen and (max-width:767px){
  .cxe-lp{ font-size:15px; }
  .cxe-lp p,.cxe-lp li,.cxe-lp dd,.cxe-lp dt{ font-size:15px; }
  .cxe-lp .cxe-inner,.cxe-lp .cxe-narrow{ padding:0 20px; }

  .cxe-lp .cxe-lead{ padding:48px 0 52px; }
  .cxe-lp .cxe-lead h2{ font-size:23px; margin-bottom:24px; }

  .cxe-lp .cxe-map-copy{ padding:32px 20px 0; }
  .cxe-lp .cxe-map-copy h2{ font-size:21px; }

  .cxe-lp .cxe-about{ padding:52px 0; }
  .cxe-lp .cxe-about-card{ flex-direction:column-reverse; gap:24px; padding:28px 22px; }
  .cxe-lp .cxe-about-body,
  .cxe-lp .cxe-about-fig{ width:100%; }
  .cxe-lp .cxe-about h2{ font-size:20px; }

  .cxe-lp .cxe-h2{ font-size:21px; margin-bottom:28px; }

  .cxe-lp .cxe-prog{ padding:52px 0; }
  .cxe-lp .cxe-prog-stub{ flex:0 0 68px; }
  .cxe-lp .cxe-prog-no{ font-size:24px; }
  .cxe-lp .cxe-prog-cap{ font-size:9px; }
  .cxe-lp .cxe-prog-item::before,
  .cxe-lp .cxe-prog-item::after{ left:58px; }
  .cxe-lp .cxe-prog-body{ padding:20px 22px; }
  .cxe-lp .cxe-prog-body h3{ font-size:17px; }

  .cxe-lp .cxe-time{ padding:52px 0; }
  .cxe-lp .cxe-time-list{ padding-left:88px; }
  .cxe-lp .cxe-time-item{ padding:0 0 26px 26px; }
  .cxe-lp .cxe-time-t{ left:-88px; width:70px; font-size:22px; }
  .cxe-lp .is-walk .cxe-time-t{ font-size:13px; }
  .cxe-lp .cxe-time-n{ font-size:15px; }

  .cxe-lp .cxe-join{ padding:52px 0; }
  .cxe-lp .cxe-step-item{ flex-direction:column; gap:10px; padding:18px 20px; }
  .cxe-lp .cxe-step-no{ margin-top:0; }
  .cxe-lp .cxe-cta-center{ margin-bottom:40px; }
  .cxe-lp .cxe-btn{ max-width:none; font-size:16px; padding:17px 20px; }

  .cxe-lp .cxe-dl-row{ flex-direction:column; gap:4px; padding:14px 0; }
  .cxe-lp .cxe-dl-row dt{ flex:none; font-size:14px; }

  .cxe-lp .cxe-caution{ padding:48px 0; }
}