@charset "utf-8";
/* 相談会（分類 icon01）の記事ページ（T273）。event/entry.twig が icon01 のときだけ読む。
   参考: funaimachiya.com/event/2395・neie.jp/event/consultation/001（写真を大きく・章ごとに区切る・流れを見せる）。装飾は少なく、余白と細い線と明朝体で見せる（2026-10-17 の依頼で簡素化）。
   本文は管理画面の WYSIWYG で編集されるので、独自クラスに頼らず、素の p / h3 / ul / img / strong を装飾する。
   page-system.css の #event .system-contents 系に勝つため、すべて #event .cs-lp 配下で書き、headArea の最後に読む。
   配色は既存の相談会ページ（page-event.css）と同じ系統: 茶 #7A3B24・金 #c9a063・生成り #f7f3ec */

#event .system-contents.cs-lp { background: transparent; padding: 0; margin-bottom: 40px; }
#event .cs-lp .system-contents-inner { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; padding: 0; overflow: hidden; }
#event .cs-lp .system-contents-inner > * { min-width: 0; }

/* ---------- ヒーロー: 見出し（titleArea）と写真（system-i-pic）を同じセルに重ねる ---------- */
#event .cs-lp .titleArea, #event .cs-lp .system-i-pic { grid-area: 1 / 1; }
#event .cs-lp .system-i-pic { position: relative; margin: 0; text-align: left; }
#event .cs-lp .system-i-pic img { display: block; width: 100%; max-width: none; height: 560px; max-height: none; object-fit: cover; }
#event .cs-lp .system-i-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 20, 12, 0) 35%, rgba(30, 20, 12, 0.62) 100%); }
#event .cs-lp .titleArea { position: relative; z-index: 2; align-self: end; margin: 0; padding: 0 56px 60px; border: 0; color: #fff; }
#event .cs-lp .titleArea::after { content: none; }
#event .cs-lp .system-date { display: none; }
#event .cs-lp .system-category-set { margin: 0 0 14px; }
#event .cs-lp .system-category { float: none; display: inline-block; width: auto; margin: 0; padding: 0; border: 0; background: transparent !important; color: rgba(255, 255, 255, 0.92); font-size: 12px; letter-spacing: 0.4em; line-height: 1.4; }
#event .cs-lp .event-ended-note { margin-bottom: 14px; }
#event .cs-lp .system-ttl { margin: 0 0 12px; padding: 0; border: 0; color: #fff; font-family: "Noto Serif JP", "游明朝", YuMincho, serif; font-size: 36px; font-weight: 400; letter-spacing: 0.12em; line-height: 1.5; }
#event .cs-lp .system-subttl { margin: 0 0 12px; color: #fff; font-size: 15px; }

/* 日時・場所・予約条件は、枠のない 1 行の文字で。項目の間に細い縦線 */
#event .cs-lp .sy-txtare.sy-meta { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 16px 0 0; color: #fff; font-size: 14px; line-height: 1.6; }
#event .cs-lp .sy-meta p { margin: 0; padding: 0 16px; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.55); background: transparent; color: #fff; font-size: 14px; letter-spacing: 0.08em; }
#event .cs-lp .sy-meta p:first-child { padding-left: 0; border-left: 0; }
#event .cs-lp .sy-meta p::before { content: none; display: none; }
#event .cs-lp .sy-meta .sy-tags { display: flex; flex-wrap: wrap; gap: 0 12px; }
#event .cs-lp .sy-meta .sy-tag { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: 14px; }
#event .cs-lp .sy-meta .sy-note { flex-basis: 100%; margin-top: 6px; padding: 0; border: 0; font-size: 13px; opacity: 0.9; }

/* 旧形式の記事（項目別入力欄が空で、開催日が自由記入の HTML）の開催日欄も、写真の上で読めるように白字にする */
#event .cs-lp .titleArea .sy-txtare:not(.sy-meta) { margin: 14px 0 0; color: #fff; }
#event .cs-lp .titleArea .sy-ttl-01 { margin: 0 0 4px; color: #fff; font-size: 14px; width: auto; }
#event .cs-lp .titleArea .wysiwyg { max-width: none; margin: 0; color: #fff; font-size: 14px; line-height: 1.7; }
#event .cs-lp .titleArea .wysiwyg p { margin: 0; color: #fff; }

/* 申し込みボタンは写真の下端にまたがせる。角は丸めず、影も付けない */
/* グリッドの子で auto マージンだと中身の幅に縮むので、幅 100% + 中央寄せで置く */
#event .cs-lp .event-apply-shortcut { position: relative; z-index: 3; width: 100%; margin: -28px 0 0; text-align: center; }
#event .cs-lp .event-apply-shortcut a { width: 320px; max-width: calc(100% - 40px); min-height: 56px; padding: 18px 30px; border-radius: 0; background: #7A3B24; font-size: 15px; font-weight: 500; letter-spacing: 0.2em; }
#event .cs-lp .event-apply-shortcut a:hover { background: #5f2d1b; }

/* ---------- 本文 ---------- */
#event .cs-lp .event-body { counter-reset: cs-sec; width: 100%; max-width: 760px; box-sizing: border-box; margin: 0 auto; padding: 88px 40px 16px; color: #3a2d20; font-size: 15px; line-height: 2.1; letter-spacing: 0.05em; }
#event .cs-lp .event-body p { margin: 0 0 1.8em; }
#event .cs-lp .event-body p:empty { display: none; }

/* 最初の段落は、ひと言の見出しのように */
#event .cs-lp .event-body > p:first-child { margin-bottom: 1.4em; color: #3a2d20; font-family: "Noto Serif JP", "游明朝", YuMincho, serif; font-size: 24px; line-height: 1.8; letter-spacing: 0.12em; text-align: center; }
#event .cs-lp .event-body > p:first-child::after { content: ""; display: block; width: 1px; height: 40px; margin: 32px auto 0; background: #c9a063; }
#event .cs-lp .event-body > p:nth-child(2) { text-align: center; }

/* 章見出し: 小さな連番 + 明朝 */
#event .cs-lp .event-body h3 { margin: 96px 0 36px; padding: 0; border: 0; background: none; color: #3a2d20; font-family: "Noto Serif JP", "游明朝", YuMincho, serif; font-size: 22px; font-weight: 400; letter-spacing: 0.14em; line-height: 1.7; text-align: center; }
#event .cs-lp .event-body h3::before { counter-increment: cs-sec; content: counter(cs-sec, decimal-leading-zero); display: block; margin-bottom: 12px; color: #c9a063; font-size: 13px; font-weight: 400; letter-spacing: 0.4em; line-height: 1; }
#event .cs-lp .event-body h3::after { content: none; }

/* 箇条書きは、細い線で区切る */
#event .cs-lp .event-body ul { margin: 0 0 2.4em; padding: 0; list-style: none; border-top: 1px solid #e6dfd3; }
#event .cs-lp .event-body li { position: relative; margin: 0; padding: 18px 8px 18px 40px; border-bottom: 1px solid #e6dfd3; font-size: 15px; line-height: 1.8; }
#event .cs-lp .event-body li::before { content: "✓"; position: absolute; left: 10px; top: 18px; color: #c9a063; font-size: 14px; line-height: 1.8; }

/* 所要時間などの強調は、細い枠の札 */
#event .cs-lp .event-body p > strong { display: inline-block; padding: 6px 22px; border: 1px solid #7A3B24; background: transparent; color: #7A3B24; font-size: 14px; font-weight: 400; letter-spacing: 0.12em; line-height: 1.6; }
#event .cs-lp .event-body p:has(> strong:only-child) { text-align: center; }

/* 写真は文章の幅より少し広く、角は丸めない。common.css の .wysiwyg img が width / height / max-width を !important で指定しているので、こちらも !important で上書きする。高さは写真の比率のまま（古い記事には文字入りのバナー画像があり、切り取ると読めなくなる） */
#event .cs-lp .event-body p:has(> img:only-child) { margin: 64px 0; }
#event .cs-lp .event-body p > img { display: block; width: calc(100% + 160px) !important; max-width: none !important; height: auto !important; margin: 0 -80px; }

/* ---------- ご予約の流れと申し込みの帯 ---------- */
#event .cs-lp .cs-lp-flow { margin: 56px 0 0; padding: 88px 40px 96px; background: #f7f3ec; text-align: center; }
#event .cs-lp .cs-lp-flow-ttl { margin: 0 0 56px; color: #3a2d20; font-family: "Noto Serif JP", "游明朝", YuMincho, serif; font-size: 22px; font-weight: 400; letter-spacing: 0.14em; line-height: 1.7; }
#event .cs-lp .cs-lp-flow-ttl span { display: block; margin-bottom: 12px; color: #c9a063; font-size: 13px; letter-spacing: 0.4em; }
#event .cs-lp .cs-lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 760px; margin: 0 auto 64px; padding: 0; list-style: none; }
#event .cs-lp .cs-lp-steps li { margin: 0; padding: 24px 0 0; border-top: 1px solid #c9a063; background: transparent; text-align: left; }
#event .cs-lp .cs-lp-steps b { display: block; margin-bottom: 14px; color: #c9a063; font-family: "Noto Serif JP", "游明朝", YuMincho, serif; font-size: 13px; font-weight: 400; letter-spacing: 0.4em; line-height: 1; }
#event .cs-lp .cs-lp-steps strong { display: block; margin-bottom: 8px; color: #3a2d20; font-size: 16px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.6; }
#event .cs-lp .cs-lp-steps span { display: block; color: #6b5a4a; font-size: 13px; line-height: 1.9; letter-spacing: 0.05em; }
#event .cs-lp .cs-lp-cta p { margin: 0 0 24px; color: #3a2d20; font-family: "Noto Serif JP", "游明朝", YuMincho, serif; font-size: 17px; letter-spacing: 0.12em; }
#event .cs-lp .cs-lp-cta a { display: inline-block; box-sizing: border-box; width: 320px; max-width: 100%; min-height: 56px; padding: 18px 30px; border-radius: 0; background: #7A3B24; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: 0.2em; line-height: 1.25; text-align: center; text-decoration: none; }
#event .cs-lp .cs-lp-cta a:hover { background: #5f2d1b; text-decoration: none; }

@media screen and (max-width: 1100px) {
  #event .cs-lp .event-body p > img { width: 100% !important; margin: 0; }
}

@media screen and (max-width: 767px) {
  #event .cs-lp .system-i-pic img { height: 440px; }
  #event .cs-lp .titleArea { padding: 0 20px 48px; }
  #event .cs-lp .system-category { font-size: 11px; }
  #event .cs-lp .system-ttl { font-size: 24px; line-height: 1.55; letter-spacing: 0.08em; }
  #event .cs-lp .system-subttl { font-size: 13px; margin: 0 0 10px; }
  #event .cs-lp .sy-txtare.sy-meta { margin-top: 12px; }
  /* SP は 1 項目 1 行で縦に並べる（折り返しで縦線が行頭に残るのを避ける） */
  #event .cs-lp .sy-txtare.sy-meta { display: block; }
  #event .cs-lp .sy-meta p { padding: 0; border-left: 0; font-size: 12px; }
  #event .cs-lp .sy-meta .sy-tags { display: block; }
  #event .cs-lp .sy-meta .sy-tag { font-size: 12px; }
  #event .cs-lp .event-apply-shortcut { margin-top: -26px; }
  #event .cs-lp .event-apply-shortcut a { width: calc(100% - 40px); margin: 0 auto; min-height: 52px; padding: 16px 20px; font-size: 14px; }
  #event .cs-lp .event-body { padding: 56px 20px 8px; font-size: 14px; line-height: 2; }
  #event .cs-lp .event-body > p:first-child { font-size: 18px; letter-spacing: 0.06em; }
  #event .cs-lp .event-body > p:first-child::after { height: 32px; margin-top: 24px; }
  #event .cs-lp .event-body h3 { margin: 64px 0 28px; font-size: 19px; letter-spacing: 0.1em; }
  #event .cs-lp .event-body li { padding: 15px 4px 15px 34px; font-size: 14px; }
  #event .cs-lp .event-body li::before { left: 6px; top: 15px; }
  #event .cs-lp .event-body p:has(> img:only-child) { margin: 44px 0; }
  #event .cs-lp .event-body p > img { width: calc(100% + 40px) !important; margin: 0 -20px; height: auto !important; }
  #event .cs-lp .cs-lp-flow { padding: 64px 20px 72px; }
  #event .cs-lp .cs-lp-flow-ttl { font-size: 19px; margin-bottom: 40px; }
  #event .cs-lp .cs-lp-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 48px; }
  #event .cs-lp .cs-lp-cta p { font-size: 15px; }
  #event .cs-lp .cs-lp-cta a { width: 100%; min-height: 52px; padding: 16px 20px; font-size: 14px; }
}