@charset "UTF-8";
/*
	Template: swell
	Theme Name: SWELL CHILD
	Theme URI: https://swell-theme.com/
	Description: SWELLの子テーマ
	Version: 1.0.0
	Author: LOOS WEB STUDIO
	Author URI: https://loos-web-studio.com/

	License: GNU General Public License
	License URI: http://www.gnu.org/licenses/gpl.html
*/

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ===== SWELL（既存・そのまま） ===== */
.p-profileBox {
	background-color: #ffffff !important;
}
/* 以下、標準動作の無効化 */
.-type-card .p-postList__link:hover .c-postThumb__img{
	-webkit-transform: unset;
	transform: unset;
}
.-type-card .p-postList__item > a{
	transition: all ease .3s;
}
.-type-card .p-postList__item a:hover{
	text-decoration:inherit !important;
	color:inherit !important;
	opacity:inherit !important;
	transform: translateY(-3px);
}
.follow-banner {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 20;
}
.follow-banner a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl;
  color: #fff;
  background-color: var(--color_main);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1.5em 1em;
  border-radius: 10px 0 0 10px;
  transition: opacity 0.25s;
}
.follow-banner a:hover {
  opacity: 0.7;
}
.follow-banner .swl-inline-icon::after {
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 599px) {
  .follow-banner {
    display: none;
  }
}

/* =========================================================
   ★重要（2026-08-19 判明）
   サーバー側のフィルタにより、影を付けるCSSプロパティを含むと
   追加CSSの保存がブロックされる（値を変えても名前があるだけで弾かれる）。
   → このCSSでは影のプロパティを一切使わない。border で代用している。
   詳細は進捗ファイル参照。
   ========================================================= */

/* =========================================================
   Rhymoe デザイン用CSS ＜まとめ版・最新＞
   外観 → カスタマイズ → 追加CSS
   ※ もともと入っていたSWELLのCSS（.p-profileBox や .follow-banner など）は
     消さずに残し、そのSWELL用CSSの「下」にこの内容を置いてください。
   ※ rhy- の接頭辞で、SWELL標準と衝突しないようにしています。
   ========================================================= */


:root{
  --rhy-red:#DF1F57; --rhy-pink:#E5308A; --rhy-blue:#016AC8; --rhy-yellow:#FFBB22;
  --rhy-green:#B9C42A; --rhy-purple:#60307A; --rhy-navy:#1B3F63;
  --rhy-ink:#2B2A28; --rhy-ink-soft:#6f6a64; --rhy-line:#EAE6DF; --rhy-paper:#FBFAF7;
}

/* ---- 見出し・リード ---- */

/* ---- セクションラベル（rhy-eyebrow）---- */

/* display:inline-block だと margin:auto が効かず左寄せになるため block+fit-content に変更 */
.rhy-eyebrow{
  display:block;
  width:fit-content;
  max-width:100%;
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  color:#016AC8;
  background:#DCEAF8;
  padding:7px 20px;
  border-radius:999px;
  margin:0 auto 8px !important;
  text-align:center;
}
/* 色バリエーション（クラスを足すと切り替わる／無指定はブルー） */
.rhy-eyebrow.is-green {color:#59660f;background:#F0F3DA;}
.rhy-eyebrow.is-pink  {color:#c0246e;background:#FBE3F0;}
.rhy-eyebrow.is-yellow{color:#8a5a00;background:#FDEFC9;}
.rhy-eyebrow.is-purple{color:#60307A;background:#EFE3F5;}
.rhy-eyebrow.is-red   {color:#b01340;background:#FBE0E8;}
.rhy-eyebrow.is-navy  {color:#1B3F63;background:#DDE6EF;}




.rhy-h2{font-family:"M PLUS Rounded 1c",sans-serif;font-weight:800;
  font-size:clamp(30px,4.8vw,44px) !important;text-align:center;margin:0 0 28px;color:var(--rhy-ink);
  padding-bottom:22px;position:relative;letter-spacing:.01em;line-height:1.4;}
.rhy-h2::after{content:"";position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);width:110px;height:5px;border-radius:999px;
  background:var(--rhy-blue);}
h2.rhy-h2{margin-top:0 !important;}
/* 長いH2が「1行＋あふれた数文字」にならないよう、折り返す幅を狭める。
   要素の幅・位置は変えず内側の余白だけで詰めるので、
   中央寄せと下線（left:50%）はこれまでどおり効く。
   画面が狭いときは max() で0になり、影響しない。 */
.rhy-h2{
  padding-left:max(0px, calc((100% - 15em) / 2));
  padding-right:max(0px, calc((100% - 15em) / 2));
}
/* ラベル（rhy-eyebrow）の直後に来る要素は、上の余白を消して距離を詰める
   トップページは <p class="rhy-center"><span class="rhy-eyebrow">…</span></p>
   の形なので、:has() で span を含む段落も対象にする */
.rhy-eyebrow + *{ margin-top:0 !important; }
.rhy-eyebrow + .wp-block-heading{ margin-top:0 !important; }
p:has(> .rhy-eyebrow){ margin-bottom:8px !important; }
p:has(> .rhy-eyebrow) + *{ margin-top:0 !important; }
.rhy-lead{text-align:center;color:var(--rhy-ink-soft);font-size:15.5px;max-width:680px;margin:0 auto;line-height:1.9;}
.rhy-center{text-align:center;}

/* ---- 教材カード ---- */
.rhy-mcard{border:1px solid var(--rhy-line);border-radius:18px;overflow:hidden;background:#fff;height:100%;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  box-shadow:0 2px 8px rgba(30,74,114,.06);}
.rhy-mcard:hover{transform:translateY(-3px);border-color:#cfd8e3;box-shadow:0 14px 30px rgba(30,74,114,.10);}
/* カード上部の色アクセント（rhy-top-●●） */
.rhy-mcard.rhy-top-navy{border-top:6px solid var(--rhy-navy);}
.rhy-mcard.rhy-top-blue{border-top:6px solid var(--rhy-blue);}
.rhy-mcard.rhy-top-pink{border-top:6px solid var(--rhy-pink);}
.rhy-mcard.rhy-top-red{border-top:6px solid var(--rhy-red);}
.rhy-mcard.rhy-top-yellow{border-top:6px solid var(--rhy-yellow);}
.rhy-mcard.rhy-top-green{border-top:6px solid var(--rhy-green);}
.rhy-mcard.rhy-top-purple{border-top:6px solid var(--rhy-purple);}
/* カード内の画像（横長バナー：3:2に自動トリミング） */
.rhy-mcard .rhy-card-img{margin:0;}
.rhy-mcard .rhy-card-img img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
/* カード本文 */
.rhy-cardbody{padding:18px 20px 20px !important;}
.rhy-cardbody > *{margin-top:0;margin-bottom:0;}
.rhy-tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;margin:0 0 8px;}
.rhy-tag-free{color:#33620f;background:#eaf3d8;}
.rhy-tag-sale{color:#8a4b00;background:#fdeecb;}
.rhy-tag-member{color:#7a1a3f;background:#fbe0ec;}
/* カード上部色に合わせた淡色タグ（rhy-tag と併用） */
.rhy-tag-blue{color:#016AC8;background:#DCEAF8;}
.rhy-tag-pink{color:#c0246e;background:#FBE3F0;}
.rhy-tag-green{color:#59660f;background:#eef3d8;}
.rhy-tag-yellow{color:#8a5a00;background:#FDEFC9;}
.rhy-tag-navy{color:#1B3F63;background:#DDE6EF;}
.rhy-tag-red{color:#b01340;background:#FBE0E8;}
.rhy-tag-purple{color:#60307A;background:#EFE3F5;}
.rhy-mtitle{font-family:"M PLUS Rounded 1c",sans-serif !important;font-weight:700;font-size:18px !important;margin:0 0 6px !important;color:var(--rhy-ink);line-height:1.5 !important;}
.rhy-mdesc{font-size:13px;color:var(--rhy-ink-soft);margin:0 0 10px !important;line-height:1.8;}
.rhy-mlink{font-size:12.5px;font-weight:700;margin:0 !important;}
.rhy-mlink a{color:var(--rhy-navy);text-decoration:none;}
.rhy-mlink a:hover{text-decoration:underline;}

/* ---- 本の表紙画像（切り取らず全体を見せる） ---- */
.rhy-coverimg{margin:0;padding:20px 18px 4px;text-align:center;}
.rhy-coverimg img{max-height:210px;width:auto;display:inline-block;}

/* ---- 丸ボタン（is-●● で色替え） ---- */
.rhy-btn{margin:4px 0 0 !important;}
.rhy-btn a{display:inline-block;background:var(--rhy-blue);color:#fff !important;
  font-weight:700;font-size:13.5px;text-decoration:none;padding:10px 22px;border-radius:999px;
  transition:opacity .2s;}
.rhy-btn a:hover{opacity:.85;text-decoration:none;}
.rhy-btn.is-blue a{background:var(--rhy-blue);}
.rhy-btn.is-pink a{background:var(--rhy-pink);}
.rhy-btn.is-navy a{background:var(--rhy-navy);}
.rhy-btn.is-green a{background:var(--rhy-green);color:#39470a !important;}

/* ---- 補足ノート ---- */
/* 【差し替え後】 */
.rhy-note{background:var(--rhy-paper);border:1px solid var(--rhy-line);border-radius:16px;
  padding:20px 26px;font-size:14.5px;color:var(--rhy-ink-soft);text-align:center;line-height:1.9;}

.rhy-note strong{color:var(--rhy-navy);}

/* カラム間の余白 */
.rhy-cards.wp-block-columns{gap:18px;}

/* ---- 既存ページにも差し込める共通部品 ---- */
.rhy-sectag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;
  padding:5px 14px;border-radius:999px;background:#fdeecb;color:#8a4b00;}
.rhy-sectag.is-blue{background:#DCEAF8;color:#016AC8;}
.rhy-sectag.is-green{background:#F0F3DA;color:#59660f;}
.rhy-sectag.is-pink{background:#FBE3F0;color:#E5308A;}

/* 教材詳細ページ下部の「2つのCTA」 */
.rhy-dc{background:var(--rhy-paper);border:1px solid var(--rhy-line);border-radius:14px;padding:18px 22px !important;height:100%;}
.rhy-dc h4{font-family:"M PLUS Rounded 1c",sans-serif;font-weight:700;font-size:15px;margin:0 0 6px !important;color:var(--rhy-ink);}
.rhy-dc p{font-size:12.5px;color:var(--rhy-ink-soft);margin:0 0 10px !important;line-height:1.8;}
.rhy-dc .rhy-dclink{margin:0 !important;font-weight:700;font-size:13px;}
.rhy-dc .rhy-dclink a{color:var(--rhy-navy);text-decoration:none;}
.rhy-dc .rhy-dclink a:hover{text-decoration:underline;}

/* ---- SWELLの見出し装飾を、Rhymoeのカード/セクション見出しには効かせない ---- */
.rhy-mtitle, .rhy-h2{border:none !important;background:transparent !important;
  padding-left:0 !important;padding-right:0 !important;}
.rhy-mtitle::before, .rhy-mtitle::after,
.rhy-h2::before{content:none !important;}
/* 写真＋文（横並び）：画像と文章を上下中央でそろえる */
.rhy-mediatext .wp-block-column{align-self:center;}
.rhy-mediatext img{border-radius:14px;display:block;}
.rhy-mt-title{font-family:"M PLUS Rounded 1c",sans-serif;font-weight:700;font-size:19px;
  margin:0 0 8px !important;color:var(--rhy-ink);}
/* 【差し替え後】 */
.rhy-mt-desc{font-size:15px;color:var(--rhy-ink-soft);margin:0 0 12px !important;line-height:1.95;}


/* プロセス（縦・番号付きステップ） */
.rhy-steps{counter-reset:rhystep;margin:0;}
.rhy-step{position:relative;padding:0 0 22px 64px !important;}
.rhy-step:not(:last-child)::before{content:"";position:absolute;left:21px;top:6px;bottom:-4px;
  width:2px;background:var(--rhy-line);}
.rhy-step::after{counter-increment:rhystep;content:counter(rhystep);position:absolute;left:0;top:0;
  width:44px;height:44px;border-radius:50%;background:var(--rhy-blue);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  font-family:"M PLUS Rounded 1c",sans-serif;}
.rhy-step .rhy-step-t{font-family:"M PLUS Rounded 1c",sans-serif;font-weight:700;font-size:16px;
  margin:6px 0 4px !important;color:var(--rhy-ink);}
/* 【差し替え後】 */
.rhy-step .rhy-step-d{font-size:14.5px;color:var(--rhy-ink-soft);margin:0 !important;line-height:1.9;}

/* ===== ページ上部タイトル背景（SWELLコンテンツヘッダー・確定方式） =====
   前提：カスタマイザー → コンテンツヘッダー で
        「画像フィルター＝なし」「オーバレイカラーの不透明度＝0」に設定
   各ページ：SWELL設定 → タイトル背景画像 に 1600×600 バナーを設定
        ／タイトル位置＝コンテンツ上 */
.l-topTitleArea{
  aspect-ratio: auto !important;
  height: min(42vw, 340px) !important;   /* PCで高くなりすぎない上限。数値で調整可 */
  min-height: 0 !important;
}
.l-topTitleArea .c-filterLayer,
.l-topTitleArea .l-topTitleArea__img{ height:100% !important; }
/* タイトル文字：ネイビー・丸ゴシック（画面幅で縮む・日本語を途中で切らない） */
.l-topTitleArea .c-pageTitle,
.c-pageTitle{
  color:#1B3F63 !important;
  text-shadow:none !important;
  font-family:"M PLUS Rounded 1c",sans-serif !important;
  font-size:clamp(22px,6.4vw,40px) !important;
  line-height:1.35 !important;
  word-break:keep-all;
}

/* プロセス（サムネイル付き）：各ステップの右に小さいサムネイル画像 */
.rhy-steps.is-thumb .rhy-step{ display:flex; gap:18px; align-items:center; }
.rhy-steps.is-thumb .rhy-step .rhy-step-body{ flex:1; }
.rhy-step-img{ margin:0 !important; flex:0 0 300px; }
.rhy-step-img img{ width:300px; height:200px; object-fit:cover; border-radius:12px; display:block; }

@media (max-width:599px){
  .rhy-steps.is-thumb .rhy-step{ flex-wrap:wrap; gap:10px; }
  .rhy-step-img{ flex-basis:100%; }
  .rhy-step-img img{ width:100%; height:150px; }
}

/* プロセスの番号丸の色（rhy-steps に is-●● を付けると全ステップの丸色が変わる） */
.rhy-steps.is-blue .rhy-step::after{background:var(--rhy-blue);}
.rhy-steps.is-green .rhy-step::after{background:var(--rhy-green);color:#39470a;}
.rhy-steps.is-pink .rhy-step::after{background:var(--rhy-pink);}
.rhy-steps.is-yellow .rhy-step::after{background:var(--rhy-yellow);color:#5a3d00;}
.rhy-steps.is-navy .rhy-step::after{background:var(--rhy-navy);}
.rhy-steps.is-red .rhy-step::after{background:var(--rhy-red);}
.rhy-steps.is-purple .rhy-step::after{background:var(--rhy-purple);}

/* 中央寄せの図版（コンセプト図など） */
.rhy-concept{max-width:640px;margin-left:auto;margin-right:auto;}
.rhy-concept img{width:100%;height:auto;display:block;border-radius:12px;}
/* 効果リスト・注記（写真＋文の中で使用） */
.rhy-mediatext ul{margin:8px 0 12px;padding-left:1.3em;}
.rhy-mediatext ul li{font-size:14px;color:var(--rhy-ink);line-height:1.9;margin:2px 0;}
.rhy-fine{font-size:12px;color:var(--rhy-ink-soft);margin:6px 0 0 !important;line-height:1.7;}

/* 写真＋文（メディアと文ブロック版・画像がそのまま選べる） */
.rhy-mediatext2 .wp-block-media-text__media img{border-radius:14px;}
.rhy-mediatext2 .wp-block-media-text__content{padding:0 8% 0 6%;}
@media (max-width:781px){
  .rhy-mediatext2 .wp-block-media-text__content{padding:16px 2% 0;}
}

/* ============================================================
   トップページ用レイアウト（2026-08 追加）
   ============================================================ */

/* ヒーローのループ動画／キービジュアル */
.rhy-hero-key video,.rhy-hero-key img{width:100%;height:auto;border-radius:14px;display:block;}

/* ①「Rhymoeについて」主役（横長）＋サブ2枚 */
.rhy-feat{overflow:hidden;}
.rhy-feat .wp-block-columns{gap:0 !important;align-items:stretch;margin-bottom:0;}
/* 画像の高さを固定して、右カラムの文章量に関係なく切れ方を一定にする。
   数値を変えると、上下がどこまで見えるかを調整できる。 */
.rhy-feat .rhy-card-img{margin:0;height:auto !important;align-self:center !important;}
.rhy-feat .rhy-card-img img{width:100%;height:340px !important;object-fit:cover;display:block;min-height:0 !important;aspect-ratio:auto;}
.rhy-feat .rhy-cardbody{padding:26px 30px !important;display:flex;flex-direction:column;justify-content:center;}
.rhy-feat .rhy-mtitle{font-size:22px !important;}
.rhy-feat .rhy-mdesc{font-size:14.5px;margin-bottom:12px !important;}
@media (max-width:781px){
  .rhy-feat .rhy-card-img img{min-height:0 !important;height:auto !important;aspect-ratio:16/9;}
  .rhy-feat .rhy-cardbody{padding:20px 22px !important;}
}
/* サブ2枚（コンパクト） */
.rhy-mini .rhy-cardbody{padding:13px 16px 15px !important;}
.rhy-mini .rhy-mtitle{font-size:15.5px !important;}
.rhy-mini .rhy-mdesc{font-size:12.5px;margin-bottom:8px !important;}

/* ②' 教室検索：薄い帯バナー（5:1） */
.rhy-band5{aspect-ratio:5/1;min-height:120px !important;height:auto !important;display:block !important;}
.rhy-band5 .wp-block-cover__inner-container{display:none !important;}
@media (max-width:781px){ .rhy-band5{aspect-ratio:3/1;} }

/* ⑤ 活用シーン：アイコン横並び */
.rhy-scene{gap:24px;}
.rhy-scene-item{text-align:center;padding:6px 4px;}
.rhy-scene-ic{width:clamp(140px,22vw,180px);height:clamp(140px,22vw,180px);border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--rhy-paper);}
.rhy-scene-ic .wp-block-image,.rhy-scene-ic figure{margin:0;width:100%;height:100%;}
.rhy-scene-ic img{width:100%;height:100%;object-fit:cover;}
.rhy-scene-item.is-pink .rhy-scene-ic{background:#FBE3F0;}
.rhy-scene-item.is-blue .rhy-scene-ic{background:#DCEAF8;}
.rhy-scene-item.is-yellow .rhy-scene-ic{background:#FDEFC9;}
.rhy-scene-t{font-family:"M PLUS Rounded 1c",sans-serif;font-weight:700;font-size:16px;margin:0 0 4px !important;}
.rhy-scene-t a{color:var(--rhy-ink);text-decoration:none;}
.rhy-scene-t a:hover{color:var(--rhy-navy);}
.rhy-scene-d{font-size:13px;color:var(--rhy-ink-soft);margin:0 !important;line-height:1.7;}

/* CTAボタンを確実に中央寄せ（.entry-content p のleft指定に負けないよう !important） */
.rhy-ctacenter{text-align:center !important;}
/* ブロックエディター内でも中央寄せを効かせる
   （エディターは段落の整列を別の仕組みで持つため、明示的に指定する） */
.editor-styles-wrapper .rhy-ctacenter{ text-align:center !important; }
.editor-styles-wrapper .rhy-btn{ text-align:center !important; }
.editor-styles-wrapper .rhy-btn.rhy-ctacenter a{ margin-left:auto; margin-right:auto; }
/* エディターは段落に自前の整列を持つため、has-text-align を上書きしない範囲で中央に寄せる */
.editor-styles-wrapper p.rhy-btn:not(.has-text-align-left):not(.has-text-align-right){
  text-align:center !important;
}


/* =========================================================
   トップ ヒーロー（SWELL メインビジュアル）フォント統一
   追加：2026-08-16
   ========================================================= */
.p-mainVisual__slideTitle{
	font-family:"M PLUS Rounded 1c",sans-serif !important;
	font-weight:700 !important;
}
.p-mainVisual__slideText{
	font-family:"M PLUS Rounded 1c",sans-serif !important;
	font-weight:400 !important;
}


/* =========================================================
   ストーリー導入（Note ブログカード）2026-08-16
   ========================================================= */
/* ブログカード（Note等）のタイトルを M PLUS Rounded 1c に揃える */
.swell-block-postLink__title,
.p-blogCard__title,
.blogcard-title{
	font-family:"M PLUS Rounded 1c",sans-serif;
	font-weight:700;
}
/* ストーリー導入セクション（淡いオレンジの島） */
.rhy-story{
	background:#EAF3FB;
	border-radius:20px;
	padding:48px 32px;
	margin:56px auto 0;
	max-width:960px;
	text-align:center;
}
.rhy-story .rhy-h2{
	color:#1B3F63;            /* 見出しをネイビーに（淡ブルー背景に上品に） */
	margin:8px 0 4px !important;
}
.rhy-story .rhy-eyebrow{
	color:#E5731F;            /* STORYラベルをオレンジに（青背景の補色アクセント） */
	background:#FBE6D2;       /* 淡いオレンジの地 */
}
.rhy-story-lead{
	max-width:640px;
	margin:0 auto 28px !important;
	color:var(--rhy-ink-soft);
	line-height:1.9;
}
/* 島の中でブログカードを少し浮かせる */
.rhy-story .swell-block-postLink,
.rhy-story .p-blogCard{
	background:#fff;
	border-radius:14px;
	border:1px solid #e3ecf4;
	box-shadow:0 6px 18px rgba(30,74,114,.10);
}
@media (max-width:600px){
	.rhy-story{padding:36px 18px;border-radius:16px;margin-top:40px;}
}


.rhy-activity{background:#fff;border-radius:18px;overflow:hidden;border:1px solid #eef2f6;box-shadow:0 4px 12px rgba(30,74,114,.08);}
.rhy-activity .rhy-act-banner{margin:0;}
.rhy-activity .rhy-act-banner img{width:100%;height:auto;display:block;}
.rhy-activity .rhy-act-photo{margin:0;}
.rhy-activity .rhy-act-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.rhy-activity .rhy-act-body{padding:16px 24px 20px !important;}
.rhy-activity .rhy-act-body > *{margin-top:0;margin-bottom:0;}
.rhy-activity .rhy-act-desc{font-size:14.5px;color:var(--rhy-ink-soft);line-height:1.95;margin:0 !important;}
.rhy-activity + .rhy-activity{margin-top:26px;}

.rhy-speclist{ margin:6px 0 0 !important; padding-left:1.2em; }
.rhy-speclist li{
  font-size:13.5px;
  color:var(--rhy-ink-soft);
  line-height:1.9;
  margin:3px 0;
}
.rhy-speclist li strong{ color:var(--rhy-ink); }

/* 長いリスト用：広い画面で2段組み */
@media (min-width:782px){
  .rhy-speclist.is-2col{ columns:2; column-gap:36px; }
  .rhy-speclist.is-2col li{ break-inside:avoid; }
}


/* ===== H3見出し（rhy-h2 をH3に使ったときのサイズ差） ===== */
h3.rhy-h2{
  font-size:clamp(17px,2vw,20px) !important;
  color:var(--rhy-navy);
  margin-top:0 !important;
  margin-bottom:10px !important;
  padding-bottom:10px;
  position:relative;
}
h3.rhy-h2::after{
  content:"" !important;
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:40px;
  height:3px;
  border-radius:999px;
  background:var(--rhy-blue);
  opacity:.5;
}

/* ===== カード画像を切り取らず全体表示する（is-banner） =====
   横長バナーや図版など、トリミングされると困る画像に付ける。
   rhy-feat（主役カード）の高さ100%指定より優先させるため !important を使う。 */
.rhy-mcard .rhy-card-img.is-banner img,
.rhy-feat .rhy-card-img.is-banner img{
  aspect-ratio:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
}
/* is-banner を含むカードは、左右の列を上下中央でそろえて余白をなくす */
.rhy-feat .rhy-card-img.is-banner{
  height:auto;
  align-self:center;
}
.rhy-feat:has(.is-banner) .wp-block-columns{ align-items:center; }
.rhy-feat:has(.is-banner) .wp-block-column{ align-self:center; }
.rhy-feat:has(.is-banner) .rhy-cardbody{ padding:20px 30px !important; }

/* ===== ボタンの下にテキストリンクを置くときの余白 =====
   rhy-btn と rhy-mlink はどちらも margin を !important で固定しているため、
   ブロック側の余白指定が効かない。この1行でスペーサー不要になる。 */
.rhy-btn + .rhy-mlink{ margin-top:20px !important; }


/* ===== カード全体をクリック可能にする =====
   rhy-mlink のリンクを疑似要素でカード全面に広げる。
   HTMLは変更しない。カード内に別のリンクがある場合は
   そのカードだけ個別対応が必要。 */
.rhy-mcard{position:relative;}
.rhy-mcard .rhy-mlink a::after{
  content:"";position:absolute;inset:0;z-index:1;
}
.rhy-mcard .rhy-mlink a{position:static;}
.rhy-mcard:hover .rhy-mlink a{text-decoration:underline;}


/* ===== リンクのないカードはホバーを出さない =====
   押せるカードだけが浮く。押せないカードは動かない。
   カード内に <a> が1本もないかを :has() で自動判定するため、
   HTMLにクラスを足す必要はない。あとでリンクを足せば自動でホバーが戻る。
   border-top-color は触らない（rhy-top-●● の色を残すため）。 */
.rhy-mcard:not(:has(a)){ transition:none; }
.rhy-mcard:not(:has(a)):hover{
  transform:none;
  box-shadow:0 2px 8px rgba(30,74,114,.06);
  border-right-color:var(--rhy-line);
  border-bottom-color:var(--rhy-line);
  border-left-color:var(--rhy-line);
}

/* ===== 中身がHTMLコメントだけの段落を消す =====
   コードエディターの目印 <p><!-- ---------- ○○ ---------- --></p> は
   ビジュアルに戻すと必ず <p> が復活する（Gutenbergの仕様）。
   コメントは :empty の判定に影響しないため、この1行で表示側の余白だけ消える。
   目印はコードエディターに残る。 */
.post_content p:empty,
.entry-content p:empty{ display:none; }


/* ===== 日本語の改行位置を整える =====
   日本語は単語の区切りがないため、ブラウザが文字単位で折る。
   結果、最終行に1文字だけ残ったり、語の途中で切れたりする。
   ・balance ＝ 各行の長さをそろえる（見出し・短文向け／Chromeは6行まで）
   ・pretty  ＝ 最終行が極端に短くなるのを避ける（本文向け）
   ・auto-phrase ＝ 文節の切れ目で折る（要 <html lang="ja">）
   未対応ブラウザは無視して従来どおり折り返すだけなので、崩れない。 */

/* 見出し・カードタイトル・短い文 */
.rhy-h2,
.rhy-mtitle,
.rhy-mt-title,
.rhy-step-t,
.rhy-scene-t,
.rhy-dc h4{
  text-wrap:balance;
  word-break:auto-phrase;
}

/* 中央寄せのテキストは行の長さをそろえる。
   1行目と2行目の長さが違いすぎると、中央寄せは落ち着かなく見える。
   Gutenbergの中央寄せは has-text-align-center が付くので、それを拾う。 */
.rhy-lead,
.post_content .has-text-align-center,
.rhy-center{
  text-wrap:balance;
  word-break:auto-phrase;
}

/* 本文・説明文・キャプション */
.rhy-mdesc,
.rhy-mt-desc,
.rhy-step-d,
.rhy-scene-d,
.rhy-act-desc,
.rhy-note,
.rhy-fine,
.rhy-dc p,
.rhy-speclist li{
  text-wrap:pretty;
  word-break:auto-phrase;
}


/* ===== 編集画面ではカード全面のクリック領域を無効化 =====
   公開ページではカード全体を押せるようにしているが、その透明な板が
   編集画面でもリンク文字の上に乗り、リンクを選択できなくなる。
   .editor-styles-wrapper は編集画面の本文だけに付く。公開ページには影響しない。 */
.editor-styles-wrapper .rhy-mcard .rhy-mlink a::after{ content:none !important; }
.editor-styles-wrapper .rhy-mcard:hover{ transform:none; }