/* =========================================================
   MEOページ（新原稿）用の追加CSS  2026-09-27 CTO 第2版
   - テーマ style.css に無い部品だけを足す。すべて .meo2 の内側に閉じる
   - 本文用の指定は .meo2-body（本文の入れ物）に絞り、フォーム（.meo2-form）には効かせない
   - 色（2026-09-29 改）：他の事業ページとトンマナをそろえるため、テーマの緑 #51ba97・青 #0a86ac に戻した。
         表はサイネージ運用代行ページの .s-table と同じ作り（見出し #51ba97 に白・行見出し #f7f9f8・罫 #eee・角丸12px）。
         ボタンはテーマ既定のグラデーションのまま。リンクの文字は青 #0a86ac
   - ブレークポイントはテーマと同じ 799px
   ========================================================= */

.meo2 { --meo2-green-text: #51ba97; --meo2-green-dark: #51ba97; --meo2-blue-text: #0a86ac; --meo2-gold-text: #ddab24; }
.meo2 *, .meo2 *::before, .meo2 *::after { box-sizing: border-box; }
.meo2 .meo2-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- 本文の読み幅と行間（テーマの p{margin-bottom:2em}・line-height:2.2 を長文向けに詰める） --- */
.meo2 .meo2-body { max-width: 960px; margin: 0 auto; }
.meo2 .meo2-body > p, .meo2 .meo2-body .meo2-acc-panel p, .meo2 .meo2-body .l-text p,
.meo2 .meo2-body li { line-height: 2.0; }
.meo2 .meo2-body p { margin-bottom: 1.4em; }
.meo2 .meo2-body ul.c-list-circle, .meo2 .meo2-body ol { margin-bottom: 1.6em; }
.meo2 .meo2-body a:not(.c-button-main) { color: var(--meo2-blue-text); }
.meo2 ul.c-list-circle li::before { color: var(--meo2-green-text); }

/* --- 章見出し（小さい型 u-small。英字は飾りで見出しの外） --- */
.meo2 .meo2-chapter .c-section { padding-top: 0; }
.meo2 .meo2-chapter-title { margin-bottom: 1.6em; }
.meo2 .meo2-chapter-title .english { display: block; }
.meo2 .meo2-chapter-title h2.japanese { margin: 0; font-size: 2.8rem; line-height: 1.6; }

/* 見出しへ飛んだとき固定ヘッダー（PC 約120px）の下に隠れないように。飛び先になる要素だけに付ける */
.meo2 .meo2-chapter, .meo2 .meo2-acc, .meo2 .meo2-form, .meo2 h3[id] { scroll-margin-top: 140px; }

/* 見出し3（テーマの .c-title-underline を流用） */
.meo2 .meo2-body h3.c-title-underline { margin-top: 2.4em; font-size: 2.2rem; line-height: 1.6; }
.meo2 .meo2-body h3.c-title-underline:first-child { margin-top: 0; }

/* 見出しの位置（テーマの見出し1は span.japanese 想定。h1 にしても同じ見た目にする） */
.meo2-hero-title h1.japanese { margin: 0; display: block; }

/* --- 冒頭 --- */
.meo2 .meo2-lead p { font-size: 1.8rem; }
.meo2 .meo2-supervise { color: #555; font-size: 1.3rem; }

/* --- CTA（テーマの .c-button-main を2つ横並び）。矢印は右端に絶対配置なので、その分の余白を明示する --- */
.meo2 .meo2-cta { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin: 2.4em 0 3em; }
.meo2 .meo2-cta .c-button-main { min-width: 320px; padding-right: 5em; text-decoration: none; }
/* ボタンの色はテーマ既定（緑・金のグラデーション）のまま。他の事業ページとそろえる */
.meo2 .meo2-cta .c-button-main:focus-visible { outline: 3px solid var(--meo2-blue-text); outline-offset: 4px; }
.meo2 .meo2-cta-large { margin-top: 1em; }

/* --- 目次（テーマの ol の「(1)」番号を上書き） --- */
.meo2 .meo2-toc { margin: 0 0 1em; }
.meo2 .meo2-toc-title { margin: 0 0 1em; font-weight: 900; font-size: 2.0rem; }
.meo2 .meo2-toc ol { column-count: 2; column-gap: 40px; margin: 0; counter-reset: meo2toc; }
.meo2 .meo2-toc ol li { break-inside: avoid; padding-left: 2.4em; line-height: 1.8; margin-bottom: 0.5em; }
.meo2 .meo2-toc ol li::before { counter-increment: meo2toc; content: counter(meo2toc, decimal-leading-zero); color: var(--meo2-green-text); font-weight: 700; }
.meo2 .meo2-toc a { color: #000; }

/* --- 開け閉め（見出しの中のボタン） --- */
.meo2 .meo2-acc-btn { display: flex; align-items: flex-start; gap: .6em; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.meo2 .meo2-acc-btn:disabled { cursor: default; }
.meo2 .meo2-acc-btn:focus-visible { outline: 3px solid var(--meo2-blue-text); outline-offset: 4px; border-radius: 4px; }
.meo2 .meo2-acc-label { flex: 1 1 auto; }
.meo2 .meo2-acc-icon { display: none; flex: 0 0 auto; width: 1.2em; text-align: center; color: var(--meo2-green-text); font-weight: 400; }
.meo2.meo2-js .meo2-acc-btn:not(:disabled) .meo2-acc-icon { display: inline-block; }
.meo2 .meo2-acc-icon::before { content: "＋"; }
.meo2 .meo2-acc-btn[aria-expanded="true"] .meo2-acc-icon::before { content: "－"; }
.meo2 .meo2-acc-panel[hidden] { display: none; }

/* 業種別・よくある質問 */
.meo2 .meo2-acc[data-acc="always"] { border-bottom: 1px solid rgba(0,0,0,.15); }
.meo2 .meo2-acc[data-acc="always"]:first-child { border-top: 1px solid rgba(0,0,0,.15); }
.meo2 .meo2-acc[data-acc="always"] .meo2-acc-h { margin: 0; font-size: 1.8rem; line-height: 1.6; }
.meo2 .meo2-acc[data-acc="always"] .meo2-acc-btn { padding: 1.1em 0; }
.meo2 .meo2-acc[data-acc="always"] .meo2-acc-panel { position: relative; padding: 0 0 1.2em 2.2em; }
.meo2 .meo2-q { flex: 0 0 1.6em; color: var(--meo2-green-text); font-family: neue-haas-grotesk-display, sans-serif; font-weight: 700; }
.meo2 .meo2-a { position: absolute; left: 0; top: 0; color: var(--meo2-gold-text); font-family: neue-haas-grotesk-display, sans-serif; font-weight: 700; line-height: 2.0; }

/* --- 12の施策カード（テーマの .l-business-services-lineup。段組みと余白はテーマに任せる：gap を足すと2列に落ちる） --- */
.meo2 .meo2-services { margin: 3em 0 2em; }
/* PC は本文の幅（960px）から外に出して、テーマの外枠（1200px）いっぱいに広げる。3列のまま1枚の幅を取る（2026-09-29 こうさん指摘） */
@media screen and (min-width: 800px) {
  .meo2 .meo2-body .meo2-services { width: min(1200px, calc(100vw - 80px)); position: relative; left: 50%; transform: translateX(-50%); }
}
.meo2 .meo2-services .l-text p { margin-bottom: 1em; }

/* --- 表 --- */
.meo2 .meo2-table { margin: 0 0 2em; }
.meo2 .meo2-table table { width: 100%; margin: 0; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: 1.4rem; }
.meo2 .meo2-table th, .meo2 .meo2-table td { border: none; border-bottom: 1px solid #eee; padding: 18px 20px; line-height: 1.8; text-align: left; vertical-align: top; color: #000; }
.meo2 .meo2-table thead th { background: var(--color-primary, #51ba97); color: #fff; font-weight: 700; font-size: 1.5rem; }
.meo2 .meo2-table tbody th { background: #f7f9f8; font-weight: 700; min-width: 7em; }
.meo2 .meo2-table tbody tr:last-child th, .meo2 .meo2-table tbody tr:last-child td { border-bottom: none; }
.meo2 .meo2-table-scroll:focus-visible { outline: 3px solid var(--meo2-blue-text); outline-offset: 2px; }

/* --- 注記・要確認・例文・手順 --- */
.meo2 .meo2-note { margin: 0 0 1.6em; padding: 1.2em 1.4em; border-left: 4px solid var(--meo2-green-text); background: rgba(81,186,151,.10); line-height: 1.9; }
.meo2 .meo2-example { margin: 0 0 1.6em; padding: 1.2em 1.4em; border: 1px dashed #999; background: #fff; line-height: 1.9; }
.meo2 .meo2-step { margin: 0 0 1em; padding: 1.2em 1.4em; border-radius: 10px; background: rgba(81,186,151,.10); line-height: 1.9; }
.meo2 .meo2-step strong { color: var(--meo2-green-text); }
/* 【要確認】の印は下書き中だけの目印。公開前に HTML から消す（CSSで隠すのではない。deploy-runbook.md の機械チェック） */
.meo2 mark.meo2-tbd { background: #fff3b0; padding: 0 .2em; }
.meo2 .meo2-tbd-box { margin: 0 0 1.6em; padding: 1em 1.2em; border: 2px dashed #ddab24; background: #fffbe6; line-height: 1.9; }
.meo2 .meo2-tbd-box mark.meo2-tbd { background: none; }

/* --- お問い合わせ（常に開いたまま。フォームの枠には本文用の指定を効かせない） --- */
.meo2 .meo2-tel a { font-family: neue-haas-grotesk-display, sans-serif; font-size: 3.2rem; font-weight: 700; color: #000; text-decoration: none; }
.meo2 .meo2-form { margin: 0 0 2em; }
.meo2 .meo2-satori-slot { min-height: 120px; padding: 2em; border: 2px dashed var(--meo2-blue-text); border-radius: 10px; background: #f3f9fb; }
.meo2 .meo2-satori-label { margin: 0; font-weight: 700; color: var(--meo2-blue-text); }
.meo2 .meo2-form-fallback { margin: 1em 0 0; font-size: 1.4rem; }
.meo2 .meo2-form-fallback a { color: var(--meo2-blue-text); }

/* 追従カード（promo.js）を問い合わせ欄の上で引っ込めるための目印。テーマの .action-contact の見た目を全部打ち消す */
.meo2 #contact { position: relative; }
.meo2 .action-contact.meo2-promo-guard { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: visible; padding: 0; margin: 0; background: none; color: inherit; pointer-events: none; }
.meo2 .action-contact.meo2-promo-guard::before, .meo2 .action-contact.meo2-promo-guard::after { content: none; display: none; }

/* =========================================================
   スマホ幅（テーマと同じ 799px 以下）
   ========================================================= */
@media screen and (max-width: 799px) {
  .meo2 .meo2-body { font-size: 1.4rem; }        /* テーマは SP の body を 12px にしている。本文だけ 14px */
  .meo2 .meo2-lead p { font-size: 1.5rem; }
  .meo2 .meo2-body p, .meo2 .meo2-body li { line-height: 1.9; }
  .meo2 .meo2-chapter, .meo2 .meo2-acc, .meo2 .meo2-form, .meo2 h3[id] { scroll-margin-top: 80px; }
  .meo2 .meo2-chapter-title h2.japanese { font-size: 1.9rem; }
  .meo2 .meo2-body h3.c-title-underline { font-size: 1.7rem; }

  .meo2 .meo2-cta { flex-direction: column; align-items: stretch; gap: 14px; }
  .meo2 .meo2-cta .c-button-main { width: 100%; min-width: 0; }

  .meo2 .meo2-toc ol { column-count: 1; }

  /* 12の施策：スマホだけ開閉。テーマの SP 用「開く」アイコン（背景画像）は使わず、ボタンの記号に統一する */
  .meo2 .meo2-services .l-header { background: none; }
  .meo2.meo2-js .meo2-services .l-header .l-title { margin-bottom: 0; }
  .meo2.meo2-js .meo2-services .lineup:not(.is-open) { padding-bottom: 6vw; }

  .meo2 .meo2-acc[data-acc="always"] .meo2-acc-h { font-size: 1.5rem; }

  /* 表（縦積み）：見出し列をカードの題、それ以外は data-label をラベルに出す */
  .meo2 .meo2-table-stack table, .meo2 .meo2-table-stack tbody,
  .meo2 .meo2-table-stack tr, .meo2 .meo2-table-stack th, .meo2 .meo2-table-stack td { display: block; width: 100%; }
  .meo2 .meo2-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .meo2 .meo2-table-stack tr { margin: 0 0 12px; border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; }
  .meo2 .meo2-table-stack table { border-radius: 0; background: none; }
  .meo2 .meo2-table-stack tbody th { background: rgba(81,186,151,.12); }
  .meo2 .meo2-table-stack th, .meo2 .meo2-table-stack td { border: none; font-size: 1.4rem; padding: .7em 1em; }
  .meo2 .meo2-table-stack td::before { content: attr(data-label); display: block; color: var(--meo2-green-text); font-size: 1.2rem; font-weight: 700; }
  /* 表（横スクロール）：比較表は列を保ったまま横に送る */
  .meo2 .meo2-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .meo2 .meo2-table-scroll table { min-width: 560px; }
  .meo2 .meo2-table-scroll th, .meo2 .meo2-table-scroll td { font-size: 1.3rem; padding: .7em .8em; }

  .meo2 .meo2-tel a { font-size: 2.6rem; }
  .meo2 .meo2-satori-slot { padding: 1.2em; }
}

/* =========================================================
   印刷：閉じた本文を全部開く／追従カードと操作ボタンを隠す／表を黒文字に
   ========================================================= */
@media print {
  .meo2 .meo2-acc-panel[hidden] { display: block !important; }
  .meo2 .meo2-acc-icon, .meo2 .meo2-cta, .meo2 .meo2-form { display: none !important; }
  [class*="dpk-"], .js-fixed-slidein, .dpp-anchor, .dpp-top { display: none !important; }
  /* テーマは印刷用の指定を持たず、固定ヘッダーと隠しメニューが全ページに重なる。このページでは外す */
  .header-global, .megamenu, .nav-sp, .nav-pc, .nav-action, .footer-global { display: none !important; }
  /* スクロールで出す演出が未発火のまま印刷されると白紙になるので、出た状態に固定する */
  .js-inview { opacity: 1 !important; transform: none !important; }
  .meo2 .meo2-table th, .meo2 .meo2-table td, .meo2 .meo2-table thead th { color: #000 !important; background: #fff !important; border: 1px solid #000 !important; }
}

/* --- 2026-09-29 追加：冒頭の大見出し・来店までの流れの絵・対象業種（既存ページの部品を流用） --- */
.meo2 .meo2-catch { margin: 0 0 1.2em; }
.meo2 .meo2-journey { margin: 1em 0 2em; }
.meo2 .meo2-journey .c-frame-beige { padding: 1.8em 2.4em 1.4em; }
/* 本文の幅（960px）だとテーマの丸が縦に伸びる。丸は幅に合わせて正円にする（2026-09-29 こうさん指摘） */
.meo2 .meo2-journey .l-image { height: auto; aspect-ratio: 1 / 1; }
.meo2 .meo2-journey .l-header { margin-top: .6em; }
.meo2 .meo2-journey .l-title { margin: 0; }
.meo2 .meo2-targets { margin: 1em 0 2em; }
.meo2 .meo2-targets .heading .title { margin: 0; }
@media screen and (max-width: 799px) {
  .meo2 .meo2-journey .c-frame-beige { padding: 2em 0 2em 1.2em; }
}