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

body .pa-page--guide .page-content__body :is(.page-course, .cta) {
  --main-color: #f54851;
  --sub-color: #009bd3;
  --base-color: #fff6ec;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) a:hover img {
opacity: 1;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) div,
body .pa-page--guide .page-content__body div:is(.page-course, .cta),
body .pa-page--guide .page-content__body :is(.page-course, .cta) span,
body .pa-page--guide .page-content__body :is(.page-course, .cta) h1,
body .pa-page--guide .page-content__body :is(.page-course, .cta) h2,
body .pa-page--guide .page-content__body :is(.page-course, .cta) h3,
body .pa-page--guide .page-content__body :is(.page-course, .cta) h4,
body .pa-page--guide .page-content__body :is(.page-course, .cta) p,
body .pa-page--guide .page-content__body :is(.page-course, .cta) em,
body .pa-page--guide .page-content__body :is(.page-course, .cta) img,
body .pa-page--guide .page-content__body :is(.page-course, .cta) sup,
body .pa-page--guide .page-content__body :is(.page-course, .cta) b,
body .pa-page--guide .page-content__body :is(.page-course, .cta) dl,
body .pa-page--guide .page-content__body :is(.page-course, .cta) dt,
body .pa-page--guide .page-content__body :is(.page-course, .cta) dd,
body .pa-page--guide .page-content__body :is(.page-course, .cta) ul,
body .pa-page--guide .page-content__body :is(.page-course, .cta) li,
body .pa-page--guide .page-content__body :is(.page-course, .cta) table,
body .pa-page--guide .page-content__body :is(.page-course, .cta) tbody,
body .pa-page--guide .page-content__body :is(.page-course, .cta) thead,
body .pa-page--guide .page-content__body :is(.page-course, .cta) tr,
body .pa-page--guide .page-content__body :is(.page-course, .cta) th,
body .pa-page--guide .page-content__body :is(.page-course, .cta) td,
body .pa-page--guide .page-content__body :is(.page-course, .cta) nav,
body .pa-page--guide .page-content__body :is(.page-course, .cta) section,
body .pa-page--guide .page-content__body section:is(.page-course, .cta) {
margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: #0000;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) *,
body .pa-page--guide .page-content__body *:is(.page-course, .cta) {
-webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.5;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) h1,
body .pa-page--guide .page-content__body :is(.page-course, .cta) h2,
body .pa-page--guide .page-content__body :is(.page-course, .cta) h3,
body .pa-page--guide .page-content__body :is(.page-course, .cta) h4 {
line-height: 1.5;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) p {
line-height: 1.8;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) li {
list-style-type: none;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) a {
text-decoration: none;
  color: inherit;
}

@media screen and (min-width: 750px) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) a {
-webkit-transition: all 0.5s;
    transition: all 0.5s;
}
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) img {
vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) sup {
font-size: 0.7em;
  vertical-align: super;
  padding: 0 5px 10px;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) table {
border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) [data-anime] {
opacity: 0;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) [data-anime="fadein"].is-active {
animation: pa-course-fadein 0.75s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .delay1 {
animation-delay: 0.2s !important;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .delay2 {
animation-delay: 0.4s !important;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .center {
text-align: center;
  overflow: clip;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .left {
text-align: left;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .mi0 {
margin-inline: 0 !important;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) h3 {
margin-top: 2em;
  font-size: 1.25em;
}

@media (min-width: 1050px) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) h3 {
margin-top: 2.5em;
    font-size: 1.75em;
}
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .arrow-circle {
fill: currentColor;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .arrow-path {
stroke: #fff;
  fill: none;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .small-caption {
font-size: 0.85em;
  letter-spacing: 0;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .more-button {
margin: 2em auto 0;
  display: grid;
  place-items: center;
  height: 60px;
  font-weight: 700;
  padding: 0 3em;
  width: 100%;
  max-width: 320px;
  text-align: center;
  background-color: #fff;
  border: 2px solid var(--main-color);
  color: var(--main-color);
  border-radius: 2em;
  position: relative;
  line-height: 1.2;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .more-button svg {
width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .more-button.reverse {
background-color: var(--main-color);
  border: 2px solid #fff;
  color: #fff;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .more-button.reverse .arrow-path {
stroke: var(--main-color);
}

@media (min-width: 1050px) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .more-button {
height: 80px;
    max-width: fit-content;
    font-size: 1.5em;
    padding-inline: 2em 3.5em;
}
}

@media (hover: hover) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .more-button:hover {
background-color: var(--main-color);
    color: #fff;
}
}

@media (hover: hover) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .more-button:hover .arrow-path {
stroke: var(--main-color);
}
}

@media (hover: hover) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .more-button.reverse:hover {
background-color: #fff;
    border: 2px solid var(--main-color);
    color: var(--main-color);
}
}

@media (hover: hover) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .more-button.reverse:hover .arrow-path {
stroke: #fff;
}
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .maincol {
color: var(--main-color);
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .table-wrap {
width: calc(100% + 1em);
  overflow-x: auto;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table {
width: max-content;
  margin: 2em auto 0;
  border: 1px solid #474747;
  border-collapse: separate;
  overflow: clip;
  border-spacing: 0;
  border-radius: 10px;
  text-align: center;
  background: #fff;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table ul {
margin: 0;
  padding-left: 1em;
  list-style: disc;
  text-align: left;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table ul li {
list-style-type: disc;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table b {
font-weight: 700;
  color: var(--main-color);
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table .maincol {
font-weight: 700;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table th,
body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table td {
padding: 1em 0.5em;
  vertical-align: middle;
  border-right: 1px solid #474747;
  border-bottom: 1px solid #474747;
  position: relative;
  z-index: 0;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table th:last-child,
body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table td:last-child {
border-right: none;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table th {
background: #e1e1e1;
  font-weight: 700;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table th.feature {
border-color: var(--main-color);
  background: var(--main-color);
  color: #fff;
  z-index: 2;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table th.feature:before {
content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: calc(100% - 4px);
  height: 110%;
  border-top: 4px solid var(--main-color);
  border-left: 4px solid var(--main-color);
  border-right: 4px solid var(--main-color);
  z-index: 2;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table th.feature-row {
border-color: var(--main-color);
  background: var(--main-color);
  color: #fff;
  z-index: 2;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table th.feature-row:before {
content: "";
  position: absolute;
  top: -2px;
  left: -4px;
  width: calc(100% - 2px);
  height: calc(100% - 4px);
  border: 4px solid var(--main-color);
  z-index: 2;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table td.feature {
background: #fff7f7;
  position: relative;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table td.feature:before {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 4px);
  height: 110%;
  border-left: 4px solid var(--main-color);
  border-right: 4px solid var(--main-color);
  z-index: 2;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table td.feature-row {
background: #fff7f7;
  position: relative;
  z-index: 2;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table td.feature-row:before {
content: "";
  position: absolute;
  top: -2px;
  left: -4px;
  width: calc(100% + 12px);
  height: calc(100% - 4px);
  border-top: 4px solid var(--main-color);
  border-bottom: 4px solid var(--main-color);
  z-index: 2;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table td.feature-row.end {
border-right: 4px solid var(--main-color);
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table tbody tr:last-child th,
body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table tbody tr:last-child td {
border-bottom: none;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table tbody tr:last-child td.feature {
border-bottom: 4px solid var(--main-color);
}

@media (min-width: 1050px) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .compare-table {
width: 100%;
}
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .num {
font-family: Inter, sans-serif;
  font-size: 1.3em;
  font-weight: 700;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .plus {
margin: 0.25em auto;
  width: 1em;
  height: 1em;
  position: relative;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .plus:before,
body .pa-page--guide .page-content__body :is(.page-course, .cta) .plus:after {
content: "";
  position: absolute;
  background: var(--main-color);
  width: 2px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .plus:before {
transform: translate(-50%) rotate(90deg);
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .place-center {
display: grid;
  place-content: center;
}

body .pa-page--guide .page-content__body .cta:is(.page-course, .cta) {
padding: 3em 1.5em;
  background: #fff;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__title {
text-align: center;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__title span {
color: var(--main-color);
  font-weight: 700;
  border-bottom: 2px solid var(--main-color);
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__topic {
display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 2em;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__topic--item {
overflow: clip;
  border-radius: 1em;
  display: flex;
  align-items: center;
  background: #f5f3ed;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__topic--item img {
display: block;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__topic--item p {
flex: 1;
  letter-spacing: 0px;
  margin: 0;
  padding-inline: 1em;
  font-weight: 700;
  color: #664500;
  margin: 0 !important;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__topic--item p span {
display: block;
  font-size: 1.25em;
}

@media (min-width: 750px) {
body .pa-page--guide .page-content__body .cta:is(.page-course, .cta) {
text-align: center;
    padding-block: 6em;
}
}

@media (min-width: 750px) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__title {
font-size: 1.8em;
    margin-bottom: 1em;
}
}

@media (min-width: 750px) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__title span {
font-size: 1.6em;
    margin-inline: 0.1em;
    padding-bottom: 0.1em;
}
}

@media (min-width: 750px) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__topic {
flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}
}

@media (min-width: 750px) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__topic--item {
width: 320px;
    border: 2px solid #f5f3ed;
}
}

@media (min-width: 750px) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) .cta__topic--item p {
text-align: left;
    white-space: nowrap;
}
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .banner-pac {
margin-block: 4em;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) .sticky-col {
position: sticky !important;
  top: 0;
  left: 0;
  z-index: 3 !important;
}

/* 構造的な差の手当て（当たり判定を経由しない。理由: main.contents (14px) が dev の実ページに存在しないため、body(15px)からの継承の終点をここ（器自身）へ直接書く（Issue #2709）。） */
body .pa-page--guide .page-content__body :is(.page-course, .cta) {
  font-size: 14px;
}

/* 動きを控える設定（prefers-reduced-motion: reduce）への上乗せ。 移行元は見ないが、テーマの他の登場演出の書き方に揃える（司令塔指示・Issue #2709） */
@media (prefers-reduced-motion: reduce) {
body .pa-page--guide .page-content__body :is(.page-course, .cta) [data-anime] {
  opacity: 1;
}

body .pa-page--guide .page-content__body :is(.page-course, .cta) [data-anime].is-active {
  animation: none;
}
}

/* 移行元 @keyframes fadein。上の残した規則が animation で参照するため付け足す。名前の重なりを避けて `pa-course-fadein` へ改名した（Issue #2709）。 */
@keyframes pa-course-fadein {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CTA 区画の導入文の上の空きを、移行元と同じに戻す（Bug #3616）。

   【移行元の値】`.contents p:not([class]) { margin-top: 1em }` が当たり、
   この段落の字が 14px なので **14px** になる（CDP の `CSS.getMatchedStylesForNode` で
   勝っている規則を読んで確かめた）。**固定の 14px ではなく `1em`** なので、
   ここでも `1em` で写す。

   【dev に差が出る筋道】このファイルの上にある移行元の初期化の写し
   （`:is(.page-course, .cta) p` を含む長い当たり先）が `margin: 0` を置くため、
   移行元の 1em が消えていた。

   【実測（幅 375px）】`.cta` の高さが移行元 629.25px に対し dev は 615.25px
   （**-14px**）で、以降の 4 要素が 13px 上へずれていた。

   【パソコン幅では差が出ない】幅 1440px では、見出し（`.cta__title`）の下の外余白
   25.2px とこの段落の上の外余白 14px が重なり合う（margin collapse）ため、
   間隔は両側とも 25.19px になる。**戻してもパソコン幅の見た目は変わらない**ことを
   実測で確かめた。

   【当たり先をこの段落だけに絞る理由】移行元の `p:not([class])` は `.contents` の中の
   クラスを持たない段落すべてに当たる。同じ形で写すと、**いま移行元と一致している
   ほかの段落まで動かしてしまう**（全数の突き合わせでは 1,034 要素のうち差はこの 1 件
   だけだった）。見出しの次の段落だけに絞る。

   【強さの数え直し】この選択子は class 4 つ ＋ 要素 1 つで (0,4,1)。上の初期化は
   `body`（要素）＋ class 3 つ ＋ `p`（要素）で (0,3,2) なので、class の桁で勝つ. */
body .pa-page--guide .page-content__body .cta .cta__title + p {
  margin-top: 1em;
}