/*
 * ORANGE ヨガ教室 — 案件専用の上書きCSS
 * -------------------------------------------------------------------------
 * 置き場所: wp-content/uploads/studio-custom.css
 * Cocoon 子テーマ（Studio Cocoon Starter）/ Easy Site Setup 本体は編集せず、
 * Figma デザインカンプに合わせた差分だけをここに書く。
 * テンプレCSS・プラグインCSSより後に読み込まれるので上書きが効く
 * （子テーマ functions.php が uploads/ の studio-custom.css を最後に enqueue）。
 * File Manager でこのファイルだけ差し替えれば反映される（テーマ更新でも消えない）。
 */

/* =========================================================================
   クラス紹介カード：クラス名を 30px
   -------------------------------------------------------------------------
   mu-plugin（orange-class-card-pattern.php）が表示時に <h3> → <p> へ変換するので、
   プラグイン純正の `.entry-content .yoga-card > h3.yoga-card__title { font-size:18px }`
   はもう当たらない。<h3> / <p> どちらでも効くように class セレクタで指定する。
   数値（font-size / weight / line-height）は ORANGE の Figma に合わせて調整。
   ========================================================================= */
.entry-content .yoga-card__title {
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  letter-spacing: 0.08em;   /* 少し広め。0.04em〜0.12em で調整 */
  margin: 0 0 8px !important;
}

/* カードを複数グリッドで並べたとき 30px だと詰まって見えるとき用（任意・コメント解除して使う）
.entry-content .yoga-cards--class .yoga-card__title {
  font-size: clamp(20px, 3.2vw, 30px) !important;
}
*/

/* =========================================================================
   クラス紹介カード：対象タグが2行になったとき、行間に余白を追加
   -------------------------------------------------------------------------
   プラグイン純正の flex/gap 指定は `.yoga-card > p.yoga-card__tags` に対して
   のみ効く。class-price ページのようにカラムブロックで組んだ箇所は `.yoga-card`
   の外側に無いため当たらない。どちらの構造でも効くよう、`.yoga-card` を前提に
   せず自前で flex を指定する。
   ========================================================================= */
.entry-content .yoga-card__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  column-gap: 6px !important;
  row-gap: 0 !important;
  margin-bottom: 0 !important; /* Cocoonのブロック既定の下余白(1.8em)を打ち消す */
}

/* タグのテキスト色を白に。Cocoon側の段落文字色（より強い指定）に
   負けて灰色/茶色になってしまうため、!important で上書きする。 */
.entry-content .yoga-card__tag {
  color: #fff !important;
}

/* =========================================================================
   クラス紹介カード：「所要時間」など単発の行に時計アイコンを付ける
   -------------------------------------------------------------------------
   対象の段落ブロックを選択 → 右サイドバー「高度な設定」→「追加 CSS クラス」に
   yoga-card__duration と入力するだけ（HTML編集は不要）。
   見た目は既存の .yoga-card__meta（開催・料金の行）に揃えてある。
   使いたいカードだけに個別で付けられるので「一部だけ追加」に対応できる。
   上と同じ理由で `.yoga-card` の内側かどうかに関係なく効くようにしてある。
   ========================================================================= */
.entry-content .yoga-card__duration {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: auto 0 0 !important;
  padding-top: 8px;
  font-size: 14px;
  color: #8a7f77;
}
.entry-content .yoga-card__duration::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f017"; /* fa-clock（テーマ同梱の Font Awesome 5 を流用） */
  font-size: 14px;
  color: var(--yoga-accent, #F38061);
}

/* =========================================================================
   クラス紹介カード：「強度」の右に所要時間を並べる（時計アイコン付き）
   -------------------------------------------------------------------------
   上の yoga-card__duration は独立した1行（class-price ページ用）。
   こちらは「強度 ★★」と同じ行に並べたいとき用の別クラス。
   使い方：「強度」の段落のすぐ後ろに新しい段落ブロックを追加 → 中身は
   「60分」のように数字だけ入力 → 右サイドバー「高度な設定」→「追加 CSS クラス」に
   yoga-card__duration-inline と入力。
   :has() で「直後に所要時間の段落があるときだけ」強度側もインライン化するので、
   このクラスを使わない既存カードの見た目には影響しない。
   ========================================================================= */
.entry-content .yoga-card__intensity:has(+ .yoga-card__duration-inline),
.entry-content .yoga-card__duration-inline {
  display: inline-flex !important;
  align-items: center;
}
.entry-content .yoga-card__intensity:has(+ .yoga-card__duration-inline) {
  margin-right: 16px !important;
}
.entry-content .yoga-card__duration-inline {
  gap: 3px;
  margin: 0 0 6px !important;
  font-size: 16px;
  font-weight: 600;
}
.entry-content .yoga-card__duration-inline::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400; /* far（アウトライン/白抜き）版。900だと塗りつぶしのsolidになる */
  content: "\f017"; /* fa-clock */
  font-size: 16px;
  color: var(--yoga-accent, #F38061);
  position: relative;
  top: 2px; /* アイコンだけ少し下げてテキストと目視で揃える */
}

/* =========================================================================
   表パターン（5行2列）の見た目
   -------------------------------------------------------------------------
   mu-plugin の「表（5行2列）」パターンに付く .orange-table 用の暫定スタイル。
   Figma のデザインが決まったら罫線・余白・1列目の強調などを合わせて調整する。
   ========================================================================= */
.entry-content .orange-table table {
  width: 95%;
  /* ブロックエディタ標準の has-fixed-layout（table-layout:fixed）だと
     セル幅が中身に応じて自動調整されないので、auto に上書きする。 */
  table-layout: auto !important;
  border-collapse: collapse;
}
.entry-content .orange-table td {
  padding: 12px 16px;
  border: 1px solid #e4e3dc;
  font-size: 16px;
  vertical-align: middle;
}
.entry-content .orange-table tr td:first-child {
  /* width:1% + white-space:nowrap は「中身の一番長いテキスト幅に自動で
     収まる」ための定番の書き方（table-layout:auto が前提）。 */
  width: 1%;
  white-space: nowrap;
  font-weight: 500;
  background: #faf8f5;
}
.entry-content .orange-table tr td:last-child {
  width: auto; /* 残り幅いっぱいに広がる */
  background: #fff;
}

/* =========================================================================
   表パターン：スマホでは2列表示をやめて縦積みにする
   -------------------------------------------------------------------------
   table/tr/td を display:block にすると、HTML の並び順どおり
   「左列1行目 → 右列1行目 → 左列2行目 → 右列2行目…」の順で上から積み上がる。
   （<tr><td>左</td><td>右</td></tr> という並びそのものを利用しているだけなので、
   表の中身側の変更は不要）
   ========================================================================= */
@media (max-width: 600px) {
  .entry-content .orange-table table,
  .entry-content .orange-table tbody,
  .entry-content .orange-table tr,
  .entry-content .orange-table td {
    display: block;
    width: 100% !important;
  }
  .entry-content .orange-table tr {
    margin-bottom: 10px;
  }
  .entry-content .orange-table tr td:first-child {
    white-space: normal; /* PC用の「折り返さない」指定を解除 */
    border-bottom: none; /* 同じ行の項目と内容がひとつながりに見えるように */
  }
}

/* =========================================================================
   PCヘッダー：コンテンツとの間にドロップシャドウ
   -------------------------------------------------------------------------
   スマホ〜1024px用の .yss-mheader には元々シャドウが付いている
   （box-shadow: 0 2px 10px rgba(0,0,0,.08)）。PC（1025px〜）で使われる
   Cocoon純正のヘッダーには付いていなかったので、同じ値を合わせて追加。
   1024px以下は .yss-mheader 側に既に入っているので対象から外す。
   注意：#header はロゴだけを包む小さな箱（幅がロゴ分しかない）で、メニュー
   （#navi）は別要素。両方を含む全幅の白いバーは #header-container なので、
   そちらに付ける（#header に付けるとロゴの周りだけに影が付いてしまう）。
   ========================================================================= */
@media (min-width: 1025px) {
  #header-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  }
}

/* =========================================================================
   トグルボックス（アコーディオン）：枠とテキストをオレンジに
   -------------------------------------------------------------------------
   Cocoon 標準の base.css に
     .toggle-button, .toggle-button::before { color:#333 !important; }
   があり、ブロック側の「カスタムテキスト色」でオレンジを指定しても
   （--cocoon-custom-text-color:#f39800 が入っていても）上書きされてしまう。
   ここでも !important を使って勝たせる。
   .cocoon-block-toggle は個々のトグルボックス（wp-block-cocoon-blocks-toggle-box-N）
   に共通のクラスなので、サイト内の全アコーディオンに効く。
   ========================================================================= */
.cocoon-block-toggle .toggle-button,
.cocoon-block-toggle .toggle-button::before {
  color: #f39800 !important;
  border-color: #f39800 !important;
}

/* トグルを開いたときの中身（.toggle-content）：左右の余白を無くす（上下はそのまま） */
.cocoon-block-toggle .toggle-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================================
   講師紹介：スマホでは肩書き・名前だけ中央寄せ、それ以降のテキストは左寄せ
   -------------------------------------------------------------------------
   プラグイン純正CSSが @media (max-width:782px) で .yoga-instructor 全体
   （肩書き・名前・本文すべて）を text-align:center にしている。
   .yoga-instructor__body の直下の子のうち、肩書き(.yoga-instructor__title)と
   名前(.yoga-instructor__name)以外だけを左寄せに戻す。
   ========================================================================= */
@media (max-width: 782px) {
  .entry-content .yoga-instructor__body > *:not(.yoga-instructor__title):not(.yoga-instructor__name) {
    text-align: left;
  }
}

/* =========================================================================
   Schedule：既製の yss-carousel を「1枚ずつ・ほぼ全幅」で見せる
   -------------------------------------------------------------------------
   プラグイン同梱の yss-carousel が .yoga-schedule を自動でスライダー化する
   （mu-plugin 側で data-per-view="1" を付けて、画像2枚でも必ず矢印付きの
   スライダーになるようにしている。以前ここに置いていた独自カルーセルの
   CSSは、この既製の仕組みと二重に動いてしまうため撤去した）。
   ただし carousel.css 側の .yss-carousel__item はレビュー用の「3分割」幅が
   既定値なので、そのままだとカレンダー画像が1/3幅でしか表示されない。
   ここで1枚=ほぼ全幅になるよう上書きする。
   ========================================================================= */
.entry-content .yoga-schedule .yss-carousel__item {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* 矢印（‹ ›）はカレンダー画像の上部、丸ボタンなしのプレーン表示で置く。
   間に案内文「次の月も見られます」を入れる（実テキストは::beforeで生成）。
   carousel.js が矢印をビューポート直下（.yoga-schedule と兄弟の位置）に
   生成するため、:has() で「.yoga-schedule を含むビューポート」に絞って
   上書きする。 */
.yss-carousel__viewport:has(.yoga-schedule) {
  padding-top: 36px;
}
.yss-carousel__viewport:has(.yoga-schedule)::before {
  content: "次の月も見られます";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  color: #8a7f77;
  pointer-events: none;
}
.yss-carousel__viewport:has(.yoga-schedule) .yss-carousel__arrow {
  top: 0 !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #5b4b45 !important;
  font-size: 22px !important;
}
.yss-carousel__viewport:has(.yoga-schedule) .yss-carousel__arrow.is-prev {
  left: 0 !important;
}
.yss-carousel__viewport:has(.yoga-schedule) .yss-carousel__arrow.is-next {
  right: 0 !important;
}




/*=====LP
============*/
/* Scoped for WordPress + !important: the yoga-cocoon-starter-v1 theme's
   base.css forces font-weight/padding/margin/color on h1-h6/p/a/li via
   !important, which beats higher-specificity rules that lack !important.
   Wrap the pasted HTML fragment in <div class="ryt200-lp">...</div>. */
html { scroll-behavior: smooth; }

.ryt200-lp {
  --orange: #F39800 !important;
  --coral: #F26522 !important;
  --green: #2BB24C !important;
  --brown: #5B4B45 !important;
  --brown-light: #9C948F !important;
  --gray-bg: #F2F5F5 !important;
  --peach-bg: #FBEAE3 !important;
  --peach-bg2: #FCE9E1 !important;
  --cream-bg: #FDF3D2 !important;
  --white: #FFFFFF !important;
  --divider: #E0BBA8 !important;
  --content-width: 900px !important;
  --font-serif: "Noto Serif JP", serif !important;
  --font-sans: "Noto Sans JP", sans-serif !important;
}

.ryt200-lp * {
  box-sizing: border-box !important;
}

.ryt200-lp {
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  color: var(--brown) !important;
  background: #fff !important;
  -webkit-font-smoothing: antialiased !important;
}

.ryt200-lp img {
  max-width: 100% !important;
  display: block !important;
}

.ryt200-lp .section {
  padding: 30px 24px !important;
}

@media (min-width: 769px) {
.ryt200-lp .section {
  padding: 30px calc((100% - var(--content-width)) / 2) !important;
}
}

.ryt200-lp .eyebrow {
  text-align: center !important;
  margin-bottom: 24px !important;
}

.ryt200-lp .eyebrow .en {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  letter-spacing: 1.5px !important;
  color: var(--brown) !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.ryt200-lp .eyebrow .rule {
  width: 32px !important;
  height: 2px !important;
  background: var(--orange) !important;
  border: none !important;
  margin: 0 auto 8px !important;
}

.ryt200-lp .eyebrow .jp {
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  color: var(--brown) !important;
}

@media (min-width: 769px) {
.ryt200-lp .eyebrow .en {
  font-size: 30px !important;
  letter-spacing: 2px !important;
}
.ryt200-lp .eyebrow .rule {
  width: 40px !important;
  margin-bottom: 12px !important;
}
}

.ryt200-lp .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 32px !important;
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #F9A94D, var(--coral)) !important;
}

.ryt200-lp .btn.green {
  background: linear-gradient(135deg, #6ED08A, var(--green)) !important;
}

.ryt200-lp .btn.white {
  background: #fff !important;
  color: var(--coral) !important;
}

.ryt200-lp .hero {
  position: relative !important;
  min-height: 520px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 40px 24px !important;
  text-align: center !important;
}

.ryt200-lp .hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background: url("/wp-content/uploads/ryt200-lp/hero-bg.jpg") center/cover no-repeat !important;
}

.ryt200-lp .hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(91,75,69,0.05), rgba(91,75,69,0.22) 55%, rgba(91,75,69,0.3)) !important;
}

.ryt200-lp .hero-content {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  max-width: 640px !important;
}

.ryt200-lp .ryt-badge {
  position: relative !important;
  z-index: 1 !important;
  width: 110px !important;
  height: 110px !important;
  margin: 0 auto !important;
}

.ryt200-lp .hero-content h1 {
  color: #fff !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.ryt200-lp .hero-schedule-badge {
  background: rgba(255,255,255,0.7) !important;
  color: #c2410c !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border-radius: 4px !important;
  padding: 10px 20px !important;
  display: inline-block !important;
}

.ryt200-lp .hero-content p.sub {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

@media (min-width: 769px) {
.ryt200-lp .hero {
  min-height: 640px !important;
  flex-direction: row !important;
  gap: 48px !important;
  text-align: left !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px calc((100% - var(--content-width)) / 2) !important;
}
.ryt200-lp .hero-content {
  max-width: none !important;
  align-items: flex-start !important;
  text-align: left !important;
  flex: 1 !important;
}
.ryt200-lp .ryt-badge {
  width: 140px !important;
  height: 140px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.ryt200-lp .hero-content h1 {
  font-size: 40px !important;
}
.ryt200-lp .hero-inner {
  display: flex !important;
  align-items: center !important;
  gap: 48px !important;
  width: 100% !important;
  max-width: var(--content-width) !important;
}
}

.ryt200-lp .video-box {
  max-width: 800px !important;
  margin: 0 auto !important;
  aspect-ratio: 16/9 !important;
  background: #D9D9D9 !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.ryt200-lp .video-box .play {
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ryt200-lp .video-box .play::after {
  content: "" !important;
  border-style: solid !important;
  border-width: 12px 0 12px 20px !important;
  border-color: transparent transparent transparent var(--coral) !important;
  margin-left: 4px !important;
}

.ryt200-lp .video-note {
  text-align: center !important;
  font-size: 14px !important;
  color: var(--brown-light) !important;
  margin-top: 12px !important;
}

.ryt200-lp .message {
  text-align: center !important;
  position: relative !important;
}

.ryt200-lp .message h2 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  margin: 0 0 20px !important;
  line-height: 1.5 !important;
}

.ryt200-lp .message p {
  max-width: 640px !important;
  margin: 0 auto !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}

@media (min-width: 769px) {
.ryt200-lp .message h2 {
  font-size: 30px !important;
}
}

.ryt200-lp .wave {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  margin-top: -1px !important;
}

.ryt200-lp .hook {
  position: relative !important;
  overflow: hidden !important;
  min-height: 380px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 40px 24px !important;
}

.ryt200-lp .hook-bg {
  position: absolute !important;
  inset: 0 !important;
  background: url("/wp-content/uploads/ryt200-lp/message-bg.jpg") center/cover no-repeat !important;
}

.ryt200-lp .hook-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(243,152,0,0.28), rgba(242,101,34,0.68)) !important;
}

.ryt200-lp .hook-content {
  position: relative !important;
  z-index: 1 !important;
  max-width: 640px !important;
  color: #fff !important;
}

.ryt200-lp .hook-content h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  margin: 0 0 20px !important;
  line-height: 1.4 !important;
}

.ryt200-lp .hook-content p {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

.ryt200-lp .hook-content p + p {
  margin-top: 20px !important;
}

@media (min-width: 769px) {
.ryt200-lp .hook {
  min-height: 460px !important;
}
.ryt200-lp .hook-content h2 {
  font-size: 32px !important;
}
.ryt200-lp .hook-content p {
  font-size: 17px !important;
}
}

.ryt200-lp .for-you {
  background: linear-gradient(160deg, #FCEAE0, #FDF3D2 50%, #FDF8ED) !important;
}

.ryt200-lp .checklist {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
}

.ryt200-lp .check-item {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-weight: 500 !important;
  font-size: 16px !important;
}

.ryt200-lp .check-badge {
  flex: 0 0 auto !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: var(--orange) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

@media (min-width: 769px) {
.ryt200-lp .checklist {
  grid-template-columns: 1fr 1fr !important;
}
}

.ryt200-lp .features-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
}

.ryt200-lp .feature-card {
  background: var(--gray-bg) !important;
  border-radius: 12px !important;
  padding: 24px 20px !important;
}

.ryt200-lp .feature-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.ryt200-lp .feature-num {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

.ryt200-lp .c1 {
  background: var(--orange) !important;
}

.ryt200-lp .c2 {
  background: var(--green) !important;
}

.ryt200-lp .c3 {
  background: var(--coral) !important;
}

.ryt200-lp .c4 {
  background: var(--brown) !important;
}

.ryt200-lp .feature-card h3 {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.ryt200-lp .feature-card p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

@media (min-width: 769px) {
.ryt200-lp .features-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
}

.ryt200-lp .curriculum {
  background: linear-gradient(160deg, #FEF6E0, #FCEBDA) !important;
}

.ryt200-lp .curriculum-intro {
  text-align: center !important;
  max-width: 640px !important;
  margin: 0 auto 32px !important;
  font-size: 16px !important;
}

.ryt200-lp .curriculum-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
}

.ryt200-lp .topic-card {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 20px 14px !important;
  text-align: center !important;
}

.ryt200-lp .topic-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  margin: 0 auto 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ryt200-lp .topic-icon img {
  width: 24px !important;
  height: 24px !important;
}

.ryt200-lp .topic-card h3 {
  margin: 0 0 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.ryt200-lp .topic-card p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

@media (min-width: 769px) {
.ryt200-lp .curriculum-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
.ryt200-lp .topic-card {
  padding: 32px 28px !important;
}
.ryt200-lp .topic-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
}
.ryt200-lp .topic-icon img {
  width: 28px !important;
  height: 28px !important;
}
.ryt200-lp .topic-card h3 {
  font-size: 17px !important;
}
.ryt200-lp .topic-card p {
  font-size: 13px !important;
}
}

.ryt200-lp .flow h2 {
  text-align: center !important;
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  margin: 0 0 16px !important;
}

.ryt200-lp .flow-intro {
  text-align: center !important;
  max-width: 640px !important;
  margin: 0 auto 32px !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.ryt200-lp .flow-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
}

.ryt200-lp .flow-card {
  border-radius: 16px !important;
  padding: 24px 22px !important;
}

.ryt200-lp .flow-card.zenki {
  background: var(--peach-bg) !important;
}

.ryt200-lp .flow-card.kouki {
  background: var(--cream-bg) !important;
}

.ryt200-lp .period-badge {
  display: inline-block !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 5px 16px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
}

.ryt200-lp .zenki .period-badge, .ryt200-lp .kouki .period-badge {
  background: var(--orange) !important;
}

.ryt200-lp .flow-card h3 {
  margin: 0 0 14px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.ryt200-lp .flow-sub {
  margin: 16px 0 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--coral) !important;
}

.ryt200-lp .flow-card p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

@media (min-width: 769px) {
.ryt200-lp .flow h2 {
  font-size: 28px !important;
}
.ryt200-lp .flow-cards {
  flex-direction: row !important;
  align-items: flex-start !important;
}
.ryt200-lp .flow-card {
  flex: 1 !important;
  padding: 32px !important;
}
}

.ryt200-lp .mid-cta {
  text-align: center !important;
}

.ryt200-lp .mid-cta h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
  line-height: 1.4 !important;
}

.ryt200-lp .mid-cta p {
  font-size: 14px !important;
  margin: 0 0 20px !important;
}

@media (min-width: 769px) {
.ryt200-lp .mid-cta h2 {
  font-size: 20px !important;
}
.ryt200-lp .mid-cta p {
  font-size: 16px !important;
}
}

.ryt200-lp .voices-intro {
  text-align: center !important;
  max-width: 640px !important;
  margin: 0 auto 32px !important;
  font-size: 16px !important;
}

.ryt200-lp .voice-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
}

.ryt200-lp .voice-card {
  background: var(--peach-bg2) !important;
  border-radius: 16px !important;
  padding: 24px 22px !important;
  text-align: center !important;
}

.ryt200-lp .voice-photo {
  width: 80px !important;
  height: 80px !important;
  border-radius: 999px !important;
  background: #D9D9D9 !important;
  margin: 0 auto 12px !important;
}

.ryt200-lp .voice-card h3 {
  margin: 0 0 2px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.ryt200-lp .voice-attr {
  font-size: 14px !important;
  color: var(--brown-light) !important;
  margin: 0 0 12px !important;
}

.ryt200-lp .voice-rule {
  width: 32px !important;
  height: 2px !important;
  border: none !important;
  margin: 0 auto 16px !important;
}

.ryt200-lp .voice-quote {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin: 0 0 16px !important;
}

.ryt200-lp .voice-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 0 !important;
}

.ryt200-lp .toggle-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.ryt200-lp .voice-qa {
  display: none !important;
  text-align: left !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1.5px solid var(--divider) !important;
}

.ryt200-lp .voice-card.open .voice-qa {
  display: block !important;
}

.ryt200-lp .voice-card.open .voice-quote-wrap {
  border-bottom: 1.5px solid var(--divider) !important;
  padding-bottom: 20px !important;
  margin-bottom: 4px !important;
}

.ryt200-lp .qa-block {
  margin-bottom: 24px !important;
}

.ryt200-lp .qa-block:not(:last-child) {
  border-bottom: 1.5px solid var(--divider) !important;
  padding-bottom: 24px !important;
}

.ryt200-lp .qa-q-badge {
  display: inline-block !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 6px !important;
}

.ryt200-lp .qa-block h4 {
  margin: 0 0 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.ryt200-lp .qa-block p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

@media (min-width: 769px) {
.ryt200-lp .voice-cards {
  flex-direction: row !important;
  align-items: stretch !important;
}
.ryt200-lp .voice-card {
  flex: 1 !important;
}
}

.ryt200-lp .schedule-inner {
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.ryt200-lp .schedule-table {
  display: flex !important;
  flex-direction: column !important;
}

.ryt200-lp .schedule-row {
  padding: 16px 0 !important;
  border-bottom: 1px solid #E5E0DD !important;
}

.ryt200-lp .schedule-row:first-child {
  border-top: 1px solid #E5E0DD !important;
}

.ryt200-lp .schedule-row dt {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--coral) !important;
  margin: 0 0 6px !important;
}

.ryt200-lp .schedule-row dd {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.ryt200-lp .schedule-photo {
  border-radius: 12px !important;
  width: 100% !important;
}

@media (min-width: 769px) {
.ryt200-lp .schedule-inner {
  flex-direction: row !important;
  align-items: flex-start !important;
}
.ryt200-lp .schedule-table {
  flex: 1 !important;
}
.ryt200-lp .schedule-row {
  display: flex !important;
  gap: 24px !important;
}
.ryt200-lp .schedule-row dt {
  flex: 0 0 120px !important;
  margin: 0 !important;
}
.ryt200-lp .schedule-row dd {
  flex: 1 !important;
}
.ryt200-lp .schedule-photo {
  width: 420px !important;
  height: 340px !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
}
}

.ryt200-lp .price {
  background: linear-gradient(160deg, #FEF6E0, #FDECC8) !important;
}

.ryt200-lp .price-card {
  background: #fff !important;
  border-radius: 16px !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
  text-align: center !important;
}

.ryt200-lp .price-main {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 0 16px !important;
}

.ryt200-lp .price-main .label {
  font-weight: 700 !important;
  font-size: 16px !important;
}

.ryt200-lp .price-main .amount {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 36px !important;
  color: var(--orange) !important;
}

.ryt200-lp .price-main .tax {
  font-size: 14px !important;
  color: var(--brown-light) !important;
}

.ryt200-lp .price-cap {
  font-size: 15px !important;
  margin-bottom: 20px !important;
}

@media (min-width: 769px) {
.ryt200-lp .price-main .amount {
  font-size: 48px !important;
}
}

.ryt200-lp .access {
  background: var(--peach-bg) !important;
}

.ryt200-lp .access-inner {
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  align-items: center !important;
  text-align: center !important;
}

.ryt200-lp .access-photo {
  width: 100% !important;
  max-width: 460px !important;
  border-radius: 12px !important;
}

.ryt200-lp .access-inner h3 {
  margin: 0 0 6px !important;
  font-size: 20px !important;
}

.ryt200-lp .access-inner p {
  margin: 0 0 12px !important;
}

@media (min-width: 769px) {
.ryt200-lp .access-inner {
  flex-direction: row !important;
  text-align: left !important;
  align-items: center !important;
}
.ryt200-lp .access-photo {
  max-width: 460px !important;
  height: 320px !important;
  object-fit: cover !important;
}
}

.ryt200-lp .faq-list {
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.ryt200-lp .faq-item {
  background: var(--gray-bg) !important;
  border-radius: 10px !important;
  padding: 20px !important;
}

.ryt200-lp .faq-q, .ryt200-lp .faq-a {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.ryt200-lp .faq-q {
  margin-bottom: 10px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.ryt200-lp .faq-a p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.ryt200-lp .faq-badge {
  flex: 0 0 auto !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.ryt200-lp .faq-badge.q {
  background: var(--orange) !important;
}

.ryt200-lp .faq-badge.a {
  background: var(--green) !important;
}

.ryt200-lp .final-cta {
  position: relative !important;
  overflow: hidden !important;
  min-height: 340px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 40px 24px !important;
}

.ryt200-lp .final-cta-bg {
  position: absolute !important;
  inset: 0 !important;
  background: url("/wp-content/uploads/ryt200-lp/cta-bg.jpg") center/cover no-repeat !important;
}

.ryt200-lp .final-cta-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(243,152,0,0.88), rgba(242,101,34,0.82)) !important;
}

.ryt200-lp .final-cta-content {
  position: relative !important;
  z-index: 1 !important;
  color: #fff !important;
  max-width: 560px !important;
}

.ryt200-lp .final-cta-content h2 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  margin: 0 0 16px !important;
}

.ryt200-lp .final-cta-content p {
  margin: 0 0 20px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

@media (min-width: 769px) {
.ryt200-lp .final-cta-content h2 {
  font-size: 32px !important;
}
}