/* =========================================================
   案I′「SHINE 2」 — 詳細ページ(告知/レポート)＋FAQ 追加スタイル
   ベースは styles.css（同フォルダ）を共有。ここは詳細ページ用の追加のみ。
   案Iからの改訂:
   - .voice はレポート専用（トップの学生の声は .voice-card に分離済み）で衝突なし
   - 時刻/日付ピルはそのまま多色。絵文字廃止(💡→POINTピル)、✓をSVG化、SP余白調整
   共通の詳細クラス: .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
   ＋ FAQ節用クラス: #faq / .faq-list / .faq-item
   ========================================================= */

/* ---------- パンくず ---------- */
.dt-breadcrumb{font-family:"Poppins";font-size:12.5px;color:var(--ink-2);font-weight:700;letter-spacing:.03em;padding-top:26px}
.dt-breadcrumb a{color:var(--ink-2)}
.dt-breadcrumb a:hover{color:var(--blue)}
.dt-breadcrumb .sep{margin:0 8px;color:var(--mute)}

/* ---------- ページヘッド ---------- */
.dt-head{background:var(--paper);border-bottom:1px solid var(--line);padding-bottom:38px;position:relative;overflow:hidden}
.dt-head .meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 16px}
.dt-head h1{font-size:clamp(24px,4.4vw,44px);font-weight:900;line-height:1.4;letter-spacing:.01em}
.dt-head .dt-dateline{margin-top:18px;font-family:"Poppins";font-size:14px;font-weight:700;color:var(--blue);letter-spacing:.04em}
.dt-head .dt-dateline a{font-family:"Poppins";color:var(--ink);background:var(--yellow);border-radius:var(--r-pill);padding:.05em .55em;box-shadow:var(--shadow-s)}

/* ---------- メインビジュアル（大きな上端Rを踏襲） ---------- */
.dt-hero{position:relative;margin:34px auto 0;max-width:1180px;width:88%}
.dt-hero .frame{overflow:hidden;aspect-ratio:16/9;position:relative;border-radius:var(--r-top) var(--r-top) 0 0;box-shadow:var(--shadow);background:var(--line)}
.dt-hero .frame img{width:100%;height:100%;object-fit:cover}
/* カラフルなカプセル装飾 */
.dt-hero::before{content:"";position:absolute;width:120px;height:44px;border-radius:99px;background:var(--orange);top:-14px;right:6%;transform:rotate(-12deg);z-index:2;opacity:.92}
.dt-hero::after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;background:var(--pink);bottom:24px;left:-22px;z-index:2;opacity:.92}

/* ---------- 本文カラム ---------- */
.dt-article{padding:clamp(44px,6vw,76px) 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:800;background:linear-gradient(transparent 60%,rgba(42,163,227,.28) 60%)}
.dt-inner h2{font-size:clamp(20px,3vw,26px);font-weight:900;margin:48px 0 18px;padding-left:18px;position:relative;line-height:1.5}
.dt-inner h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:6px;border-radius:99px;background:var(--blue)}
.dt-inner h2:nth-of-type(3n+2)::before{background:var(--green)}
.dt-inner h2:nth-of-type(3n)::before{background:var(--orange)}
.dt-inner h3{font-size:18px;font-weight:900;margin:32px 0 12px}
.dt-inner a.inline{color:var(--blue);font-weight:800;border-bottom:2px solid var(--blue)}
.dt-inner a.inline:hover{color:var(--indigo);border-color:var(--indigo)}

/* ---------- こんな人におすすめ（✓を多色SVGで） ---------- */
.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 52px;background:#fff;border:2px solid var(--line);border-radius:var(--r-pill);font-weight:700;font-size:15px}
.check-list li::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.6 4.5L19 7.5"/></svg>');background-position:center;background-size:14px;background-repeat:no-repeat}
.check-list li:nth-child(4n+1)::before{background-color:var(--orange)}
.check-list li:nth-child(4n+2)::before{background-color:var(--green)}
.check-list li:nth-child(4n+3)::before{background-color:var(--blue)}
.check-list li:nth-child(4n)::before{background-color:var(--pink)}

/* ---------- 開催概要テーブル（thを薄い色帯に） ---------- */
.info-table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0;font-size:14.5px;border:2px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.info-table th,.info-table td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none}
.info-table th{width:124px;background:#eaf6fd;font-weight:800;color:var(--ink);white-space:nowrap}
.info-table td{color:var(--ink-2)}
.info-table td strong{color:var(--ink);font-weight:800}

/* ---------- タイムテーブル（時刻はピル） ---------- */
.timetable{list-style:none;margin:10px 0;padding:0}
.timetable li{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px dashed var(--line)}
.timetable .t{flex:none;font-family:"Poppins";font-weight:800;font-size:13px;color:#fff;background:var(--blue);border-radius:var(--r-pill);padding:5px 14px;letter-spacing:.02em;line-height:1.4}
.timetable li:nth-child(6n+2) .t{background:var(--green)}
.timetable li:nth-child(6n+3) .t{background:var(--orange)}
.timetable li:nth-child(6n+4) .t{background:var(--pink)}
.timetable li:nth-child(6n+5) .t{background:var(--indigo)}
.timetable li:nth-child(6n) .t{background:var(--blue)}
.timetable span:last-child{color:var(--ink-2);font-size:14.5px;padding-top:3px}

/* ---------- 申込ボックス（濃色＋大角丸＋装飾） ---------- */
.apply-box{background:var(--blue);color:#fff;padding:clamp(30px,5vw,48px);text-align:center;margin-top:48px;border-radius:var(--r-lg);position:relative;overflow:hidden}
.apply-box::before{content:"";position:absolute;width:140px;height:50px;border-radius:99px;background:rgba(255,255,255,.16);top:22px;left:-30px;transform:rotate(-12deg)}
.apply-box::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.14);bottom:-26px;right:8%}
.apply-box h2{font-size:clamp(20px,3vw,26px);font-weight:900;margin-bottom:10px;padding:0;color:#fff;position:relative;z-index:2}
.apply-box h2::before{display:none}
.apply-box .btn{margin-top:8px;position:relative;z-index:2;max-width:100%;white-space:normal}
.apply-box p.note{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:16px;line-height:1.7;position:relative;z-index:2}

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

/* ---------- レポート: 写真グリッド（角丸＋多色キャプション帯） ---------- */
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.photo-grid figure{margin:0;overflow:hidden;aspect-ratio:4/3;position:relative;border-radius:var(--r-md);box-shadow:var(--shadow-s)}
.photo-grid img{width:100%;height:100%;object-fit:cover}
.photo-grid figcaption{position:absolute;left:10px;bottom:10px;color:#fff;font-size:11px;font-weight:800;padding:4px 12px;border-radius:var(--r-pill)}
.photo-grid figure:nth-child(4n+1) figcaption{background:var(--blue)}
.photo-grid figure:nth-child(4n+2) figcaption{background:var(--green)}
.photo-grid figure:nth-child(4n+3) figcaption{background:var(--orange)}
.photo-grid figure:nth-child(4n) figcaption{background:var(--pink)}

/* ---------- レポート: 参加者の声（多色の左罫＋大角丸） ---------- */
.voice{background:#fff;border:2px solid var(--line);border-left:6px solid var(--blue);border-radius:var(--r-lg);padding:24px 26px;margin:22px 0;font-weight:700;font-size:16px;line-height:1.8}
.voice:nth-of-type(2n){border-left-color:var(--green)}
.voice:nth-of-type(3n){border-left-color:var(--orange)}
.voice .who{display:block;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--mute)}

/* ---------- 次回イベント/関連（やわらか面＋ピル見出し） ---------- */
.dt-related{background:var(--paper);border-radius:var(--r-lg);padding:clamp(30px,5vw,48px);text-align:center;margin-top:48px}
.dt-related .sub{font-family:"Poppins";font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--pink);margin-bottom:10px;display:block}
.dt-related h2{font-size:clamp(19px,2.6vw,24px);font-weight:900;margin-bottom:20px;padding:0}
.dt-related h2::before{display:none}
.dt-related .btn{max-width:100%;white-space:normal}

/* ---------- 提案用補足ノート（実サイトには出さない想定） ---------- */
.proposal-note{margin-top:40px;background:#fffae8;border:2px dashed var(--yellow);padding:18px 22px;font-size:13px;color:var(--ink-2);line-height:1.8;border-radius:var(--r-md)}
.proposal-note strong{color:var(--ink);font-weight:800}
.proposal-note .pt{display:inline-block;font-family:"Poppins";font-weight:800;font-size:11px;letter-spacing:.1em;background:var(--yellow);color:var(--ink);padding:2px 10px;border-radius:var(--r-pill);margin-right:8px}

/* ---------- FAQ節（index用 / SHINEのピル・多色） ---------- */
#faq .faq-list{display:flex;flex-direction:column;gap:14px;max-width:840px;margin:0 auto}
.faq-item{background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-s)}
.faq-item .q,.faq-item .a{display:flex;gap:14px;align-items:flex-start;padding:18px 22px}
.faq-item .q{font-weight:800;font-size:15.5px}
.faq-item .a{border-top:1px dashed var(--line);font-size:14.5px;color:var(--ink-2);font-weight:500}
.faq-item .a strong{color:var(--ink);font-weight:800;background:linear-gradient(transparent 60%,rgba(252,172,21,.32) 60%)}
.faq-item .mk{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Poppins";font-weight:800;font-size:15px;color:#fff;line-height:1}
.faq-item .q .mk{background:var(--blue)}
.faq-item .a .mk{background:var(--orange)}
.faq-item:nth-child(3n+2) .q .mk{background:var(--green)}
.faq-item:nth-child(3n) .q .mk{background:var(--pink)}

/* ---------- レスポンシブ ---------- */
@media(max-width:600px){
  .photo-grid{grid-template-columns:1fr}
  .info-table th{width:96px;padding:13px 13px}
  .info-table td{padding:13px 13px}
  .dt-inner h2{padding-left:14px}
}