@charset "utf-8";
/* =========================================================
   ticket_new.css
   木村聖哉 FUN! MEETING 2025 イベントページ 専用スタイル
   base.css / subpage.css の後に読み込む前提。
   #header_line / #main / #title / #menu の枠組みはサイト共通仕様を尊重し、
   #content 以下の見た目だけをこのファイルで上書きする。
   ========================================================= */

:root{
  --fm-bg-raise:  #ffffff;
  --fm-line:      #c9cfd5;
  --fm-line-soft: #dadfe3;
  --fm-ink:       #1b232c;
  --fm-ink-dim:   #5c6670;
  --fm-ink-faint: #88919a;
  --fm-accent:    #3c6285;
}

/* ---------- #main / #content をレスポンシブに ---------- */
#main{
  width:800px;
  max-width:100%;
  box-sizing:border-box;
  border-left-color:var(--fm-line) !important;
  border-right-color:var(--fm-line) !important;
  border-bottom-color:var(--fm-line) !important;
}
#header_line{
  background-color:var(--fm-ink) !important;
}
#menu{
  background-color:var(--fm-bg-raise) !important;
  border-top-color:var(--fm-line) !important;
  border-bottom-color:var(--fm-line) !important;
}
#content{
  padding-left:0;
  box-sizing:border-box;
}

/* ---------- 共通 ---------- */
.fm-page{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  color:var(--fm-ink);
  line-height:1.9;
  max-width:880px;
  margin:0 auto;
  padding:0 28px 60px;
  box-sizing:border-box;
}
.fm-page *{ box-sizing:border-box; }
.fm-mono{ font-family:"JetBrains Mono","Courier New",monospace; }
.fm-page a{ color:var(--fm-accent); }
.fm-page a:hover{ color:var(--fm-ink); }
.fm-perf{
  height:1px;
  background-image:linear-gradient(to right, var(--fm-line) 0 6px, transparent 6px 14px);
  background-size:14px 1px;
  background-repeat:repeat-x;
  margin:0;
}

/* ---------- 見出し ---------- */
.fm-section{ padding:30px 0; }
.fm-section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:28px; gap:16px; flex-wrap:wrap;
}
.fm-section-head h2{
  margin:0; font-size:20px; font-weight:700; letter-spacing:.01em;
  color:var(--fm-ink);
}
.fm-section-head .fm-idx{ font-size:12px; color:var(--fm-ink-faint); }

/* ---------- リード文 ---------- */
.fm-lede{
  margin:18px 0 0;
  max-width:100%;
  font-size:15px;
  color:var(--fm-ink-dim);
}
.fm-lede strong{ color:var(--fm-ink); font-weight:700; }

.fm-meta{
  margin-top:26px;
  display:flex; flex-wrap:wrap; gap:8px 26px;
  font-size:13px; color:var(--fm-ink-dim);
}
.fm-meta span b{ color:var(--fm-ink); font-weight:700; margin-right:6px; }

/* ---------- 更新情報 ---------- */
.fm-updates{ list-style:none; margin:0; padding:0; }
.fm-updates li{
  display:grid; grid-template-columns:96px 1fr;
  gap:16px; padding:8px 0;
  border-bottom:1px solid var(--fm-line-soft);
  font-size:13.5px;
}
.fm-updates li:first-child{ border-top:1px solid var(--fm-line-soft); }
.fm-updates time{ color:var(--fm-ink-faint); }
.fm-new-flag{
  display:inline-block; margin-left:8px;
  font-size:10px; font-weight:700; letter-spacing:.06em; color:#fff;
  background:#d0333d; border:1px solid #d0333d;
  border-radius:4px; padding:2px 6px;
  transform:translateY(-1px);
}

/* ---------- パネル（最新更新内容 / イベント情報 / チケット販売） ---------- */
.fm-panel{
  border:1px solid var(--fm-line);
  border-left:3px solid var(--fm-accent);
  background:var(--fm-bg-raise);
}
.fm-panel-pad{ padding:26px 22px; }

.fm-panel h3{ margin:0 0 12px; font-size:16px; font-weight:700; }
.fm-panel p{ margin:0 0 12px; color:var(--fm-ink-dim); font-size:14px; }
.fm-panel p:last-child{ margin-bottom:0; }

.fm-slot-table{ margin-top:16px; border-top:1px solid var(--fm-line-soft); }
.fm-slot-row{
  display:grid; grid-template-columns:80px 1fr;
  gap:12px; padding:10px 0;
  border-bottom:1px solid var(--fm-line-soft);
  font-size:13px;
}
.fm-slot-row .fm-part{ color:var(--fm-ink); font-weight:700; }
.fm-slot-row .fm-time{ color:var(--fm-ink-dim); }

.fm-note{ margin-top:12px; font-size:12px; color:var(--fm-ink-faint); }
.fm-note + .fm-note{ margin-top:4px; }

/* ---------- イベント情報グリッド ---------- */
.fm-info-grid{ display:grid; grid-template-columns:1fr 1fr; }
.fm-info-cell{
  border-right:1px solid var(--fm-line-soft);
  border-bottom:1px solid var(--fm-line-soft);
  padding:20px 18px;
}
.fm-info-cell:nth-child(2n){ border-right:none; }
.fm-info-cell.fm-wide{ grid-column:1 / -1; }
.fm-info-cell .fm-label{ font-size:11px; color:var(--fm-ink-faint); margin-bottom:8px; }
.fm-info-cell .fm-value{ font-size:14px; }
.fm-info-cell .fm-value + .fm-value{ margin-top:6px; }

.fm-price{ font-size:26px; font-weight:700; color:var(--fm-accent); }
.fm-price .fm-yen{ font-size:13px; font-weight:400; color:var(--fm-ink-dim); margin-left:6px; }

@media (max-width:600px){
  .fm-info-grid{ grid-template-columns:1fr; }
  .fm-info-cell{ border-right:none; }
}

/* ---------- チケット販売スケジュール ---------- */
.fm-tix + .fm-tix{ margin-top:24px; }
.fm-tix h4{
  margin:0 0 10px; font-size:13.5px; font-weight:700;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.fm-tag{
  font-size:11px; color:var(--fm-ink-faint);
  border:1px solid var(--fm-line); padding:2px 8px;
}
.fm-tag.fm-active{ color:#fff; background:var(--fm-accent); border-color:var(--fm-accent); }
.fm-status{ color:var(--fm-ink-faint); font-size:13px; margin:0; }
.fm-tix ul{ list-style:none; margin:0; padding:0; font-size:13px; color:var(--fm-ink-dim); }
.fm-tix li{ padding:6px 0; border-bottom:1px solid var(--fm-line-soft); }

.fm-cta{
  display:inline-block; margin-top:20px; font-size:13px;
  color:#ffffff; font-weight:700; text-decoration:none;
  background:#1a2b4c; border:1px solid #1a2b4c; padding:11px 22px;
}

.fm-cta:hover{ background:#13203a; border-color:#13203a; color:#fff; }
  .fm-page a.fm-cta{ color:#ffffff; }
    .fm-cta-outline{
    display:inline-block; margin-top:4px; font-size:13px;
    font-weight:700; text-decoration:none;
    background:#ffffff; border:1px solid #1a2b4c; padding:11px 22px;
  }
  .fm-page a.fm-cta-outline{ color:#1a2b4c; }
  .fm-cta-outline:hover{ background:#1a2b4c; color:#ffffff; }

.fm-cta-stubs{
  display:inline-block; margin-top:4px; font-size:13px;
  font-weight:700; text-decoration:none;
  background:#9335d0; border:1px solid #9335d0; padding:11px 22px;
}
.fm-page a.fm-cta-stubs{ color:#ffffff; }
.fm-cta-stubs:hover{ background:#2d4d68; border-color:#2d4d68; color:#ffffff; }


/* ---------- Q&A ---------- */
.fm-qa details{ border-bottom:1px solid var(--fm-line-soft); }
.fm-qa details:first-of-type{ border-top:1px solid var(--fm-line-soft); }
.fm-qa summary{
  cursor:pointer; list-style:none;
  padding:8px 0; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:var(--fm-ink);line-height:1.4;
}
.fm-qa summary::-webkit-details-marker{ display:none; }
.fm-qa summary .fm-plus{ font-family:"JetBrains Mono",monospace; color:var(--fm-ink-faint); flex:none; }
.fm-qa details[open] summary .fm-plus{ transform:rotate(45deg); display:inline-block; }
.fm-qa .fm-qa-body{ padding:0 0 8px; color:var(--fm-ink-dim); font-size:13px; max-width:64ch; margin:0;line-height:1.6;}

/* ---------- お問い合わせ ---------- */
.fm-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fm-contact-cell .fm-label{ font-size:11px; color:var(--fm-ink-faint); margin-bottom:6px; }
.fm-contact-cell .fm-value{ font-size:14px; }
@media (max-width:600px){
  .fm-contact-grid{ grid-template-columns:1fr; }
}

/* ---------- モバイル調整 ---------- */
@media (max-width:680px){
  .fm-page{ padding:0 16px 44px; }
  .fm-section{ padding:32px 0; }
  .fm-section-head h2{ font-size:18px; }
}
@media (max-width:420px){
  .fm-updates li{ grid-template-columns:78px 1fr; font-size:12.5px; }
  .fm-slot-row{ grid-template-columns:66px 1fr; }
}
