/* 第1回 セミナー＆ディスカッション：新デザイン案（v2）のページ固有分
   共通の部品は v2.css・v2-pages.css。ここには、このページだけの組み方（最初の画面の日付と顔写真、参加方法の比較、時間割など）を置く。 */


/* ===== 1. 最初の画面：左に見出しとボタン、右にDM表面と同じ大きな日付と顔写真 ===== */
.e01-hero .wrap.e01-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"main next" "act next";column-gap:56px;align-items:end;max-width:1120px;padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(40px,5vw,64px)}
.e01-hero::after{display:none}
.e01-hero-main{grid-area:main}
.e01-hero-act{grid-area:act;align-self:start;margin-top:8px}
.e01-next{grid-area:next;border-top:1px solid rgba(255,255,255,.5);padding-top:20px}
.e01-hero .v2-kicker{display:block;border:0;padding:0;border-radius:0;font-size:14px;line-height:1.7}
.e01-hero .hero-title{font-size:clamp(26px,4vw,46px)}
.e01-hero .hero-lead{max-width:34em;margin-bottom:28px}
.e01-hero .hero-date{margin:0 0 16px}
.e01-hero .hero-date .d{font-size:clamp(44px,5.4vw,64px)}
.e01-hero .hero-date .w{margin-left:12px;font-size:14px}
.e01-hero .hero-date .t{font-size:clamp(20px,2.4vw,26px)}
.e01-hero .hero-meta{display:block;border-top:0;padding-top:0;margin:0 0 22px;line-height:1.75}
.e01-hero .hero-meta span{display:block;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.e01-hero .hero-meta .hero-fee{font-size:13px;color:rgba(255,255,255,.88)}
.e01-hero .v2-faces{margin-bottom:0}
.e01-hero .btn-stack{text-align:center}
@media (max-width:860px){
  .e01-hero .wrap.e01-hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "next" "act";row-gap:32px;padding-bottom:36px}
  .e01-hero-act{margin-top:0}
  .e01-hero .hero-actions .btn{width:100%}
}

/* ===== 2. 開催概要：4項目を大きな文字で ===== */
.e01-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--navy);border-bottom:1px solid var(--line);margin:0 0 56px}
.e01-facts>div{padding:18px 20px 18px 0}
.e01-facts>div+div{padding-left:20px;border-left:1px solid var(--line)}
.e01-facts dt{font-size:13px;font-weight:700;color:var(--sub);margin-bottom:4px}
.e01-facts dd{margin:0}
.e01-facts b{display:block;font-size:clamp(17px,1.8vw,20px);color:var(--navy);line-height:1.5}
.e01-facts small{display:block;font-size:13px;color:var(--sub);line-height:1.7;margin-top:4px}
@media (max-width:860px){
  .e01-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e01-facts>div:nth-child(3){padding-left:0;border-left:0}
  .e01-facts>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:480px){
  .e01-facts{grid-template-columns:minmax(0,1fr)}
  .e01-facts>div,.e01-facts>div+div{padding:14px 0;border-left:0}
  .e01-facts>div+div{border-top:1px solid var(--line)}
}
.e01-steps-h{border-bottom:0;padding-bottom:0;font-size:18px}
.e01-steps .phase{margin-bottom:10px}
.e01-steps .ph-bar span{font-size:14px;padding:6px 14px}
.e01-steps .ph-legend{margin:0 0 16px}
.e01-steps-p{font-size:15px;line-height:1.9;margin:0 0 16px}
.e01-steps .ph-items li{font-size:14.5px;padding:11px 2px}
@media (max-width:420px){.e01-steps .ph-bar span{font-size:12px;padding:5px 8px}}

/* ===== 4. 実践者の「実際」（紺の面）：悩みと共有することを罫線で対応させる ===== */
.e01-qa{border-top:1px solid rgba(255,255,255,.3)}
.e01-qa-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.e01-q{font-size:clamp(17px,2vw,21px);font-weight:700;line-height:1.6;color:#fff;margin:0}
.e01-a h3{font-size:17px;margin:0 0 6px}
.e01-a p{font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.88);margin:0}
.e01-qa-note{margin:28px 0 0}
@media (max-width:860px){.e01-qa-row{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px 0}}

/* ===== 5. 演者・座長 ===== */
.e01-people{margin-top:36px}
.e01-people .v2-person p{margin:0 0 10px}
.e01-people .v2-person .v2-org{margin-bottom:14px}
.e01-talk{font-size:17px!important;font-weight:700;color:var(--navy)}
.e01-cred{font-size:13px!important;color:var(--sub);line-height:1.8!important;border-left:2px solid var(--line);padding-left:12px}

/* ===== 6. 2つの参加方法：縦の罫線で左右に。おすすめ側は上に緑の太い線 ===== */
.e01-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:8px 0 48px}
.e01-opt{display:flex;flex-direction:column;border-top:3px solid var(--navy);padding:22px 32px 4px 0}
.e01-opt+.e01-opt{padding-left:32px;padding-right:0;border-left:1px solid var(--line)}
.e01-opt.is-rec{border-top-color:var(--green)}
.e01-opt-tag{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;color:#fff;background:var(--green);padding:1px 10px;border-radius:2px;margin:0 0 8px}
.e01-opt h3{font-size:clamp(20px,2.2vw,24px);margin:0 0 2px}
.e01-opt-time{font-size:14px;color:var(--sub);margin:0 0 18px}
.e01-incl{list-style:none;border-top:1px solid var(--line);margin:0 0 18px}
.e01-incl li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:700;color:var(--navy);line-height:1.65}
.e01-incl li .small{font-weight:400}
.e01-incl li.x{color:var(--sub);font-weight:400;text-decoration:line-through;text-decoration-color:rgba(91,110,124,.5)}
.e01-opt-dl{border-top:0;margin-bottom:20px}
.e01-opt-dl>div{grid-template-columns:7em minmax(0,1fr);padding:12px 0}
.e01-opt-dl dd b.num{font-size:22px}
.e01-price{font-size:15px;font-weight:700;color:var(--navy);line-height:1.7;margin:0 0 22px}
.e01-price b{font-size:clamp(30px,3.4vw,40px);margin:0 2px 0 4px;letter-spacing:.01em}
.e01-price small{display:block;font-size:13px;font-weight:400;color:var(--sub);margin-top:6px}
.e01-opt .btn{margin-top:auto}
@media (max-width:860px){
  .e01-compare{grid-template-columns:minmax(0,1fr);gap:40px}
  .e01-opt,.e01-opt+.e01-opt{padding:20px 0 0;border-left:0}
}
.e01-calc{margin:0 0 36px}
.e01-calc .v2-h4{margin-top:0}
.e01-calc-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:15px;padding:12px 0;border-bottom:1px solid var(--line);margin:0}
.e01-calc-row:first-of-type{border-top:1px solid var(--line)}
.e01-calc-row b{font-size:22px;color:var(--navy)}
.e01-calc .v2-small{margin:14px 0 0}

/* ===== 7. プログラム：塗りの帯をやめ、上の太い線の時間割に ===== */
.v2-event .tt{background:transparent;margin-bottom:40px}
.v2-event .tt caption .bar{background:transparent;color:var(--navy);padding:0 0 10px;border-bottom:2px solid var(--navy);font-size:16px}
.v2-event .tt.after caption .bar{background:transparent;color:var(--green);border-bottom-color:var(--green)}
.v2-event .tt td{padding:14px 12px}
.v2-event .tt td:first-child{padding-left:0}
.v2-event .tt td.who{text-align:right;padding-right:0}
@media (max-width:760px){.v2-event .tt td.who{text-align:left}}

/* ===== 9・11. 2列（会費とお支払い／会場とWeb） ===== */
.e01-fee-main{margin-bottom:48px}
.e01-fee-main td b{font-size:clamp(22px,2.6vw,28px)}
.e01-fee-main td .small{display:inline-block;margin-top:4px}
.e01-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.e01-two .v2-more{margin-top:20px}
.e01-notes{list-style:none;border-top:1px solid var(--line)}
.e01-notes li{position:relative;padding:11px 0 11px 16px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.85}
.e01-notes li::before{content:"";position:absolute;left:0;top:1.35em;width:6px;height:1px;background:var(--sub)}
.e01-map{margin:18px 0 0}
@media (max-width:860px){.e01-two{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:480px){
  .v2-event .v2-price th,.v2-event .v2-price td{padding:12px 6px;font-size:14px}
  .v2-event .v2-price th:first-child{padding-left:0}
}

/* ===== 10. 流れ ===== */
.e01-flow{margin-bottom:0}

/* ===== 12. よくある質問 ===== */
.v2-event #faq .v2-h2{margin-bottom:12px}

/* 紺の面の中の未確定の印は読める色に */
body.review .v2-navy .chk{color:#3a2c00}
.e01-steps-more{margin:0 0 20px}
.e01-a .v2-tag{margin:10px 0 0}
.v2-event .tt td.who{width:16em}
.v2-event #for .v2-h2{word-break:auto-phrase}