/* Easy Site Setup — セクションの装飾スタイル。
   色・フォント・下線・ボタン塗りは frontend.php が出力する CSS 変数
   （設定画面で変更可）を参照する。案件ごとの微調整は子テーマで上書きする想定。 */

/* ---- セクション見出し ----
   マークアップは「英語ラベル(.yoga-section__en, p) → 日本語見出し(.yoga-section__title, h2)」。
   英語ラベルを大きな見出しとして扱い、その下に線、日本語はその下の小さなテキスト。 */
.entry-content .yoga-section__en{
  margin: 0 0 4px !important;
  text-align: center;
  font-family: var(--yoga-font-en, "M PLUS Rounded 1c"), sans-serif !important;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: .06em;
  color: var(--yoga-text, #5B4B45);
}
.entry-content .yoga-section__en::after{
  content: "";
  display: var(--yoga-underline-display, block);
  width: 60px;
  height: 2px;
  margin: 12px auto 0;
  background: var(--yoga-underline, #F4A261);
}
.entry-content h2.yoga-section__title{
  margin: 6px 0 32px !important;
  text-align: center;
  font-family: var(--yoga-font-p, "Zen Kaku Gothic New"), sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--yoga-text, #5B4B45);
}
.entry-content h2.yoga-section__title::after{ display: none; }

/* ---- 編集者向けプレースホルダー ---- */
.yoga-placeholder{
  padding: 28px;
  border: 1px dashed #c9c1ba;
  border-radius: 14px;
  background: #fff;
  text-align: center;
  color: #8a7f77;
}

/* ---- CTA ボタン（予約 / LINE / お問い合わせ / もっと見る / フォロー） ---- */
.entry-content .yoga-button-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  margin-top: 40px !important;   /* ボタンとコンテンツの間の余白 */
}
/* 予約・LINE・お問い合わせは同じサイズに統一 */
.entry-content .yoga-button-row .wp-block-button{ margin: 0; }
.wp-block-button.is-reservation .wp-block-button__link,
.wp-block-button.is-line .wp-block-button__link,
.wp-block-button.is-contact .wp-block-button__link{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  min-height: 52px;
  padding: 12px 32px;
  border: 0;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transition: filter .2s ease, transform .2s ease;
}
/* ホバーは色を変えず、元の色のまま少し薄くする（＋わずかに浮かせる）。 */
.wp-block-button.is-reservation .wp-block-button__link:hover,
.wp-block-button.is-line .wp-block-button__link:hover,
.wp-block-button.is-contact .wp-block-button__link:hover{ opacity: .82; transform: translateY(-2px); }

.wp-block-button.is-reservation .wp-block-button__link{ background: var(--yoga-btn-resv, var(--yoga-accent, #F3A88F)); }
.wp-block-button.is-line .wp-block-button__link,
.wp-block-button.is-contact .wp-block-button__link{ background: var(--yoga-btn-line, var(--yoga-sub, #CBB8EF)); }

/* もっと見る / フォロー：白地のアウトライン小ボタン */
.wp-block-button.is-more .wp-block-button__link,
.wp-block-button.is-follow .wp-block-button__link{
  display: inline-block;
  padding: 8px 22px;
  border: 1.5px solid color-mix(in srgb, var(--yoga-text, #5B4B45) 30%, #fff);
  border-radius: 999px;
  background: #fff;
  color: var(--yoga-text, #5B4B45) !important;
  font-size: 14px;
  box-shadow: none;
}
.wp-block-button.is-more .wp-block-button__link:hover,
.wp-block-button.is-follow .wp-block-button__link:hover{ opacity: .7; }

/* 本文中のリンク：Cocoon の a:hover{color:#e53900}（赤）を打ち消し、
   元のリンク色のまま少し薄くする。リンク色は --yss-link で上書き可。 */
.entry-content{ --yss-link: #1967d2; }
.entry-content a:not(.wp-block-button__link){ color: var(--yss-link); transition: opacity .15s ease; }
.entry-content a:not(.wp-block-button__link):hover,
.entry-content a:not(.wp-block-button__link):focus{ color: var(--yss-link); opacity: .65; }

@media (max-width: 600px){
  /* SP：縦並び・幅は設定（80/90/100%）に従う */
  .entry-content .yoga-button-row{ flex-direction: column; align-items: center; gap: 12px; margin-top: 28px !important; }
  .entry-content .yoga-button-row .wp-block-button{ width: var(--yoga-btn-w, 90%); }
  .wp-block-button.is-reservation .wp-block-button__link,
  .wp-block-button.is-line .wp-block-button__link,
  .wp-block-button.is-contact .wp-block-button__link{ width: 100%; }
}

/* ---- クラス紹介：PC 2列 / SP 1列 ---- */
.entry-content .yoga-cards--class{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  /* 各カードは中身の高さに合わせる（行内で引き伸ばさない）。引き伸ばすと、
     「開催・料金」やボタンが無いカードで本文の下に空白が溜まるため。 */
  align-items: start;
}
.yoga-card{
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(70,55,45,.08);
}
/* 子テーマ base.css が見出し/段落に !important マージンを付けているため、
   カード内の詰めも !important で指定する。px はここで調整可能。
   本文系テキストの最低サイズは 14px。 */
.entry-content .yoga-card > .yoga-card__image{ margin: 0 0 6px !important; }
.yoga-card__image img{ border-radius: 12px; aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; }
.entry-content .yoga-card > h3.yoga-card__title{ margin: 0 0 5px !important; font-size: 18px; font-weight: 700 !important; }
.entry-content .yoga-card > p.yoga-card__intensity{ margin: 0 0 6px !important; font-size: 14px; font-weight: 600; text-indent: 2px; }
.yoga-card__stars{ color: var(--yoga-class-star, #F4A261); letter-spacing: .1em; text-indent: 0; }
.entry-content .yoga-card > p.yoga-card__tags{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 10px !important;
}
.yoga-card__tag{
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--yoga-main, #A4C58F) 88%, #fff);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.entry-content .yoga-card > p.yoga-card__meta{ margin: auto 0 0 !important; padding-top: 8px; font-size: 14px; color: #8a7f77; }
/* カード内の最後の要素の下マージンを消す（開催・料金やボタンを削除したカードで
   本文の下に余白が残らないように）。 */
.entry-content .yoga-card > *:last-child{ margin-bottom: 0 !important; }
/* 「詳しく見る」ボタン：カード下部で中央寄せ、開催時間・料金との間に余白 */
.entry-content .yoga-card > .wp-block-button.is-more{
  align-self: center;
  margin: 16px auto 0 !important;
}
@media (max-width: 782px){
  .entry-content .yoga-cards--class{ grid-template-columns: 1fr; gap: 18px; }
}

/* ---- 講師紹介：左写真 / 右テキスト ---- */
.yoga-instructor{ gap: 32px; margin-bottom: 40px; }
.yoga-instructor:last-child{ margin-bottom: 0; }
/* 写真は上揃え。アコーディオン（資格情報・もっと読む）を開いて本文が伸びても
   写真が縦中央に寄って動かないようにする。既存の生成ページ（center 揃え）にも効かせる。 */
.entry-content .yoga-instructor.are-vertically-aligned-center,
.entry-content .yoga-instructor.are-vertically-aligned-top{ align-items: flex-start; }
.entry-content .yoga-instructor > .wp-block-column{ align-self: flex-start; }
.yoga-instructor__image.is-rounded img{ border-radius: 999px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.yoga-instructor__title{ font-size: 14px; font-weight: 600; color: var(--yoga-accent, #F3A88F); margin: 0 0 2px; }
.yoga-instructor__name{ font-size: 22px; margin: 0 0 12px; }
.entry-content .yoga-instructor__license{ margin: 0; padding-left: 1.2em; font-size: 14px; color: #6f655d; line-height: 1.9; }

/* 資格情報・もっと読む：開閉ブロック */
.entry-content .yoga-instructor__acc{
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  text-align: left;
}
.entry-content .yoga-instructor__acc summary{
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--yoga-text, #5B4B45);
}
.entry-content .yoga-instructor__acc > :not(summary){ margin-top: 10px; font-size: 14px; }

@media (max-width: 782px){
  /* スマホ：columns を縦積みにして写真もセクションも中央寄せ。文章は中央寄せ。
     左右にゆとりを足してセクション端に詰まって見えないように。
     PC 用の align-items / align-self: flex-start（写真の上揃え）はここで打ち消す。 */
  .entry-content .yoga-instructor,
  .entry-content .yoga-instructor.are-vertically-aligned-center,
  .entry-content .yoga-instructor.are-vertically-aligned-top{ flex-direction: column; text-align: center; gap: 20px; padding-inline: 16px; align-items: center; }
  .entry-content .yoga-instructor > .wp-block-column{ flex-basis: auto !important; width: 100%; align-self: stretch; }
  .entry-content .yoga-instructor > .wp-block-column.yoga-instructor__media{ max-width: 200px; margin: 0 auto 10px; align-self: center; }
}

/* ---- スケジュール（カレンダー画像スライダー：PC 2枚 / SP 1枚） ---- */
.yoga-schedule .yoga-schedule__item{ text-align: center; }
.yoga-schedule .yoga-schedule__image{ margin: 0 !important; }
.yoga-schedule .yoga-schedule__image img{ border-radius: 12px; width: 100%; height: auto; }

/* ---- アクセス：左 地図 / 右 情報 ---- */
.yoga-access{ gap: 40px; align-items: flex-start; }
.yoga-access__map,
.yoga-access__map iframe{ width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 12px; }
.yoga-access__map{ display: flex; align-items: center; justify-content: center; background: #f2f2ef; overflow: hidden; }
.yoga-access__map-note{ margin: 0; padding: 20px; font-size: 14px; color: #8a7f77; text-align: center; }
.entry-content .yoga-access__name{ margin: 0 0 12px !important; font-size: 20px; }
.entry-content .yoga-access__address{ margin: 0 0 20px !important; line-height: 1.9; }
.entry-content h4.yoga-access__routes-title{
  margin: 0 0 8px !important;
  padding-left: 0 !important;
  font-size: 16px;
}
.entry-content h4.yoga-access__routes-title::before,
.entry-content h4.yoga-access__routes-title::after{ content: none !important; display: none !important; }
.entry-content .yoga-access__routes{ margin: 0 0 24px !important; padding-left: 1.2em; font-size: 14px; line-height: 1.9; }
@media (max-width: 782px){
  /* 縦積み。左右に少しゆとりを足す（テキストがセクション端に詰まって
     見えないように）。文字は左寄せのまま。 */
  .entry-content .yoga-access{ flex-direction: column; gap: 20px; padding-inline: 16px; }
  .entry-content .yoga-access > .wp-block-column{ flex-basis: auto !important; width: 100%; }
}

/* ---- 料金表 ---- */
.yoga-price-table{ margin-inline: auto; }

/* ---- 法定ページ（利用規約・プライバシーポリシー・特商法）：シンプルに ---- */
.entry-content .yss-legal-note{ font-size: 14px; color: #8a7f77; }
.entry-content .yss-legal-table table{ font-size: 15px; }
.entry-content .yss-legal-table th[scope="row"]{
  width: 1%;
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  background: #f7f5f2;
}
/* スマホ：2列テーブルをやめ、項目名（行）→内容（行）の縦積みにする */
@media (max-width: 600px){
  .entry-content .yss-legal-table table,
  .entry-content .yss-legal-table tbody,
  .entry-content .yss-legal-table tr,
  .entry-content .yss-legal-table th,
  .entry-content .yss-legal-table td{
    display: block;
    width: 100%;
  }
  .entry-content .yss-legal-table tr{ border-bottom: 1px solid #e5e2dd; }
  .entry-content .yss-legal-table tr:first-child{ border-top: 1px solid #e5e2dd; }
  .entry-content .yss-legal-table th[scope="row"]{
    width: 100%;
    white-space: normal;
    background: #f7f5f2;
    font-weight: 700;
    padding: 10px 14px;
    border: 0;
  }
  .entry-content .yss-legal-table td{
    padding: 12px 14px 14px;
    border: 0;
  }
}