/* =========================================================
   GTIE — 案"WARM" 追加スタイル（詳細ページ + index拡張）
   ベースは styles.css（同フォルダ） を共有。ここは WARM 用の追加のみ。
   ・詳細ページ共通クラスは active/detail.css と同名・同構造。
     色/フォントを WARM（アイボリー地・焦茶テキスト・朱赤アクセント・
     やわらか角丸・Barlow英字・手描き感の点線罫/丸✓/ふきだしvoice）に。
   ・index 用の拡張（KPIバンド4枚・参加する3つの理由・FAQ）も末尾に。
   共通の詳細クラス: .dt-breadcrumb / .dt-head / .dt-hero / .dt-article /
     .dt-inner / .check-list / .info-table / .timetable / .apply-box /
     .dt-foot-note / .photo-grid / .voice / .dt-related / .proposal-note
   ========================================================= */

/* ===== パンくず ===== */
.dt-breadcrumb{font-family:var(--en);font-weight:700;font-size:12.5px;color:var(--ink-2);letter-spacing:.02em;padding-top:26px}
.dt-breadcrumb a{color:var(--ink-2)}
.dt-breadcrumb a:hover{color:var(--red)}
.dt-breadcrumb .sep{margin:0 9px;color:var(--ink-3)}

/* ===== ページヘッド（status / host / title / 日時） ===== */
.dt-head{background:var(--ivory-2);border-bottom:1.5px solid var(--hair);padding-bottom:36px}
.dt-head .meta-row{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 14px}
.dt-head h1{font-family:var(--jp);font-weight:700;font-size:clamp(24px,4.2vw,42px);line-height:1.45;letter-spacing:.02em}
.dt-head h1 em{color:var(--red)}
.dt-head .dt-dateline{margin-top:16px;font-family:var(--jp);font-weight:700;font-size:14px;color:var(--red);letter-spacing:.04em}
.dt-head .dt-dateline a{color:var(--ink);border-bottom:2px solid var(--sun)}

/* ===== メインビジュアル（手描きフレーム） ===== */
.dt-hero{position:relative;margin:34px auto 0;max-width:1180px;width:86%}
.dt-hero .frame{overflow:hidden;border-radius:20px;aspect-ratio:16/9;position:relative;border:6px solid #fff;box-shadow:0 24px 50px rgba(51,39,31,.16)}
.dt-hero .frame img{width:100%;height:100%;object-fit:cover}
.dt-hero::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:2px dashed var(--red);border-radius:22px;z-index:-1}
.dt-hero .ph-tag{position:absolute;left:16px;bottom:16px;background:var(--red);color:#fff;font-family:var(--en);font-weight:700;font-size:11px;letter-spacing:.04em;padding:5px 12px;border-radius:999px;z-index:2}

/* ===== 本文カラム ===== */
.dt-article{padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px)}
.dt-inner{width:88%;max-width:760px;margin:0 auto}
.dt-inner > p{font-size:15.5px;color:var(--ink-2);margin-bottom:18px;line-height:2}
.dt-inner > p strong{color:var(--ink);font-weight:700;background:linear-gradient(transparent 62%, var(--sun) 62%)}
.dt-inner h2{font-family:var(--jp);font-weight:700;font-size:clamp(20px,3vw,26px);line-height:1.5;margin:48px 0 18px;padding-left:18px;position:relative}
.dt-inner h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:6px;border-radius:999px;background:var(--red)}
.dt-inner h3{font-family:var(--jp);font-weight:700;font-size:18px;margin:32px 0 12px}
.dt-inner a.inline{color:var(--red);font-weight:700;border-bottom:1px solid var(--red)}

/* ===== こんな人におすすめ（丸✓リスト） ===== */
.check-list{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:12px}
.check-list li{position:relative;padding:15px 20px 15px 50px;background:var(--ivory-2);border:1.5px solid var(--hair);border-radius:14px;font-weight:700;font-size:15px}
.check-list li::before{content:"✓";position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#fff;background:var(--red);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;line-height:1}

/* ===== 開催概要テーブル ===== */
.info-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14.5px}
.info-table th,.info-table td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--hair);vertical-align:top}
.info-table th{width:122px;background:var(--ivory-2);font-family:var(--jp);font-weight:700;color:var(--ink);white-space:nowrap;border-radius:10px 0 0 10px}
.info-table td{color:var(--ink-2)}
.info-table td strong{color:var(--ink);font-weight:700}

/* ===== タイムテーブル（点線罫＋朱赤の時刻） ===== */
.timetable{list-style:none;margin:10px 0;padding:0}
.timetable li{display:flex;gap:18px;padding:15px 0;border-bottom:1.5px dashed var(--hair)}
.timetable .t{flex:none;width:62px;font-family:var(--en);font-weight:700;color:var(--red);letter-spacing:.02em}
.timetable span:last-child{color:var(--ink-2);font-size:14.5px}

/* ===== 申込ボックス（焦茶ダーク） ===== */
.apply-box{background:var(--ink);color:#fff;border-radius:24px;padding:clamp(30px,5vw,46px);text-align:center;margin-top:48px;position:relative;overflow:hidden}
.apply-box::after{content:"";position:absolute;right:-50px;bottom:-50px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)}
.apply-box > *{position:relative;z-index:2}
.apply-box h2{font-family:var(--jp);font-weight:700;font-size:clamp(20px,3vw,26px);margin-bottom:10px;padding:0;color:#fff}
.apply-box h2::before{display:none}
.apply-box p.note{font-size:12.5px;color:rgba(255,244,224,.72);margin-top:16px;line-height:1.8}
.apply-box .btn{margin-top:8px}

.dt-foot-note{margin-top:40px;font-size:13px;color:var(--ink-3);line-height:1.85}

/* ===== レポート: 写真グリッド ===== */
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.photo-grid figure{margin:0;overflow:hidden;border-radius:16px;aspect-ratio:4/3;position:relative;border:5px solid #fff;box-shadow:0 12px 26px rgba(51,39,31,.1)}
.photo-grid img{width:100%;height:100%;object-fit:cover}
.photo-grid figcaption{position:absolute;left:0;bottom:0;background:rgba(51,39,31,.78);color:#fff;font-size:11px;font-weight:700;padding:5px 11px}

/* ===== レポート: 参加者の声（ふきだし的） ===== */
.voice{position:relative;background:var(--ivory-2);border:1.5px solid var(--hair);border-left:5px solid var(--red);border-radius:16px;padding:22px 26px;margin:22px 0;font-weight:700;font-size:16px;line-height:1.85}
.voice::before{content:"\201C";position:absolute;left:14px;top:2px;font-family:var(--en);font-size:40px;color:var(--peach)}
.voice .who{display:block;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--ink-2)}

/* ===== 次回イベント/関連 ===== */
.dt-related{background:var(--ivory-2);border:1.5px solid var(--hair);border-radius:20px;padding:clamp(30px,5vw,46px);text-align:center;margin-top:48px}
.dt-related .sub{font-family:var(--en);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);margin-bottom:10px;display:block}
.dt-related h2{font-family:var(--jp);font-weight:700;font-size:clamp(19px,2.6vw,24px);margin-bottom:18px;padding:0}
.dt-related h2::before{display:none}

/* ===== 提案用補足ノート（実サイトには出さない想定） ===== */
.proposal-note{margin-top:40px;background:#fff8e6;border:1.5px dashed var(--sun);border-radius:14px;padding:18px 22px;font-size:13px;color:var(--ink-2);line-height:1.85}
.proposal-note strong{color:var(--ink)}

/* =========================================================
   index 拡張パーツ（WARM）
   ========================================================= */

/* ----- 数字バンド：複数KPI（既存 .band の中で使用） ----- */
.band-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,34px);margin-top:38px}
.band-kpis .k{position:relative}
.band-kpis .k::after{content:"";position:absolute;right:calc(clamp(18px,3vw,34px) / -2);top:6px;bottom:6px;width:1.5px;background:rgba(255,255,255,.22)}
.band-kpis .k:last-child::after{display:none}
.band-kpis .n{font-family:var(--en);font-weight:700;font-size:clamp(44px,6.4vw,76px);line-height:.95;display:block}
.band-kpis .n small{font-size:.46em;margin-left:2px}
.band-kpis .n .u{font-family:var(--jp);font-weight:700;font-size:.32em;margin-left:6px;letter-spacing:.02em}
.band-kpis .cap{margin-top:10px;font-size:13px;font-weight:700;color:#ffe6dc;letter-spacing:.02em}

/* ----- 参加する3つの理由（独立節） ----- */
.reasons{background:var(--ivory-2)}
.reasons .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.feat{position:relative;background:var(--paper);border:1.5px solid var(--hair);border-radius:20px;padding:30px 26px 28px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.feat:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(51,39,31,.1);border-color:var(--peach)}
.feat .ic{display:grid;place-content:center;width:60px;height:60px;border-radius:18px;background:var(--mint);color:var(--ink);margin-bottom:16px}
.feat:nth-child(2) .ic{background:var(--sun)}
.feat:nth-child(3) .ic{background:var(--sky)}
.feat .ic svg{width:30px;height:30px}
.feat .fn{font-family:var(--en);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--red);margin-bottom:6px}
.feat h3{font-family:var(--jp);font-weight:700;font-size:18px;line-height:1.5;margin-bottom:10px}
.feat p{font-size:13.5px;color:var(--ink-2);line-height:1.85}

/* ----- FAQ（手描き感のQ/A） ----- */
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:820px}
.faq-item{background:var(--paper);border:1.5px solid var(--hair);border-radius:18px;padding:22px 26px;transition:border-color .2s ease}
.faq-item:hover{border-color:var(--peach)}
.faq-item .q,.faq-item .a{display:flex;gap:14px;align-items:flex-start}
.faq-item .a{margin-top:12px;padding-top:12px;border-top:1.5px dashed var(--hair)}
.faq-item .mk{flex:none;display:grid;place-content:center;width:30px;height:30px;border-radius:50%;font-family:var(--en);font-weight:700;font-size:14px}
.faq-item .q .mk{background:var(--red);color:#fff}
.faq-item .a .mk{background:var(--sun);color:var(--ink)}
.faq-item .q > span:last-child{font-family:var(--jp);font-weight:700;font-size:16px;line-height:1.6;padding-top:3px}
.faq-item .a > span:last-child{font-size:14px;color:var(--ink-2);line-height:1.9;padding-top:4px}
.faq-item .a strong{color:var(--ink);font-weight:700;background:linear-gradient(transparent 62%, var(--sun) 62%)}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:940px){
  .band-kpis{grid-template-columns:1fr 1fr;gap:26px}
  .band-kpis .k:nth-child(2)::after{display:none}
  .reasons .feat-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .photo-grid{grid-template-columns:1fr}
  .info-table th{width:96px;padding:12px}
  .info-table td{padding:12px}
  .band-kpis{grid-template-columns:1fr 1fr;gap:18px}
  .band-kpis .k::after{display:none}
}