/*
 * 入会案内のコースと料金のページ（/guide/course/）専用の、土台 CSS からの
 * 機械抜粋（Issue #2709）。
 *
 * 写し元: https://www.p-a.jp/assets/css/dialog.css
 *         （新デザイン全体で共有する土台の CSS）
 *         渡したファイル: www.p-a.jp_assets_css_dialog.css
 *         大きさ 3,526 バイト / SHA-256 89312d015097f54c79d8eb4b94c53f6d3584589b893cfb39841ad31f57667390
 *
 * 🚨 **写し元の同一性は、上のハッシュで照合すること。**以前この欄には
 * 「移行元コミット 19f499fe… の写しと 1 バイトも違わないことを確認済み」と
 * 固定の文で書いていたが、**この文は中身に関係なく毎回そのまま印字されて
 * いた**ため、別の版から作り直しても文だけが残り、事実と食い違った
 * （Issue #3206 のセルフレビューで発覚）。リポジトリに記録してある写しは
 * 圧縮版で、稼働中の本番は整形版であり、両者はバイト単位では一致しない。
 *
 * このファイルは手で書かない。`scripts/pa-cms/
 * extract-guide-course-base-css.py` で作り直す（使い方はスクリプト冒頭の
 * コメントを読む）。
 *
 * 土台 CSS の規則のうち、dev の実ページの本文の器
 * （.page-course と .cta）の中に実際に
 * 当たる規則だけを機械的に選んで残した。手で目視して選ぶと見落としが出る
 * ため（実例: 比較表を横スクロールさせる `.table-wrap` を、最初の手作業の
 * 抜き出しでは見落としていた）、選ぶこと自体を当たり判定に置き換えた。
 *
 * 判定した規則: 21 件（のべセレクタ 24 件）。
 *   残した規則: 17 件（セレクタ 20 件）。
 *   落とした規則: 4 件（セレクタ 4 件）。
 * `:root` の独自プロパティの定義（0 件）は当たり判定に掛けず、
 * 無条件で残した。
 *
 * 当たり判定は「状態と擬似要素を取り除いた形」（例: `.foo.is-active:hover` なら
 * `.foo`、`.plus::before` なら `.plus`）で行うが、書き出すセレクタは元のまま
 * （状態つき・擬似要素つき）である。実ページには押された状態も指を乗せた状態も
 * 無く、`querySelectorAll` は擬似要素を要素として返さないため、取り除かずに
 * 判定すると**その種類の規則が機械的に全部落ちる**（外部レビュー指摘・
 * Issue #2709 と #2723。詳しくはこのスクリプト冒頭のコメントを参照）。
 */

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog {
width: min(100% - calc(3.2 * var(--pa-course-rem)), calc(48 * var(--pa-course-rem)));
  max-width: calc(100% - calc(3.2 * var(--pa-course-rem)));
  max-height: min(90dvh, calc(64 * var(--pa-course-rem)));
  margin: auto;
  padding: 0;
  border: none;
  border-radius: calc(1 * var(--pa-course-rem));
  background: transparent;
  color: #474747;
  overflow: visible;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    overlay 0.25s allow-discrete,
    display 0.25s allow-discrete;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog[open] {
opacity: 1;
  transform: scale(1);
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog::backdrop {
background: rgb(0 0 0 / 0.6);
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transition-behavior: allow-discrete;
}

@media (prefers-reduced-motion: reduce) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog,
body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog::backdrop {
transition: none;
}
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__panel {
position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(90dvh, calc(64 * var(--pa-course-rem)));
  padding: calc(2.4 * var(--pa-course-rem));
  background: #fff;
  border-radius: inherit;
  overflow: visible;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__close {
position: absolute;
  top: calc(-1.2 * var(--pa-course-rem));
  right: calc(-1.2 * var(--pa-course-rem));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(3.2 * var(--pa-course-rem));
  height: calc(3.2 * var(--pa-course-rem));
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #b0aaaa;
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.25);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 🚨 移行元は閉じるボタンの囲み線を `outline: none` で消している。この 1 行だけは
   写さない（Bug #2748・ユーザー判断 2026-09-05）。

   消すと、キーボードでこのボタンへ移動しても**いまどこを選んでいるか分からない**。
   2026-08-05 のアクセシビリティの実測では dev の「フォーカスの輪郭が見えない要素は
   0 件」だった。この 1 行を写すとその 0 件が崩れる。

   **囲み線が出るのはキーボードで移動したときだけである**（`:focus-visible`）。
   指やマウスで押したときは出ないので、**移行元との見た目の違いにはならない**。
   だから移行元の再現という原則とぶつからない。

   `:focus` 側で消してあった `outline` は書き戻さない（ブラウザの既定に任せると
   地色 `#b0aaaa` の丸の上で見えにくいため、色と太さを自分で決める）. */
body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__close:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__close::before,
body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__close::after {
content: "";
  position: absolute;
  width: calc(1.6 * var(--pa-course-rem));
  height: 2px;
  background: currentcolor;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__close::before {
transform: rotate(45deg);
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__close::after {
transform: rotate(-45deg);
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__head {
flex-shrink: 0;
  padding: calc(1.6 * var(--pa-course-rem)) calc(2 * var(--pa-course-rem));
  background: #f6f6f6;
  text-align: center;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__title {
margin: 0;
  font-size: calc(1.8 * var(--pa-course-rem));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__body {
flex: 1;
  min-height: 0;
  padding: calc(2 * var(--pa-course-rem)) 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;

  @media screen and (max-width: 749px) {
    text-align: left;
  }
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__lead {
margin: 0 0 calc(1.6 * var(--pa-course-rem));
  font-size: calc(1.5 * var(--pa-course-rem));
  line-height: 1.8;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__em {
font-style: normal;
  font-weight: 700;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__notes {
margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(1.2 * var(--pa-course-rem));
  line-height: 1.8;
  color: #474747;
  text-align: center;

  @media screen and (max-width: 749px) {
    text-align: left;
  }
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .c-dialog__notes li + li {
margin-top: calc(0.4 * var(--pa-course-rem));
}