@charset "UTF-8";
/*
Theme Name: Ranius One Page
Theme URI: http://ranius.nijin.co.jp/
Author: NIJIN Inc.
Author URI: https://nijin.co.jp/
Description: ranius.nijin.co.jp 専用の1ページテーマ。日本語が「/」、英語が「/en/」。文章は inc/content-ja.php と inc/content-en.php にあります。
Version: 19.3.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: ranius
*/

/* ------------------------------------------------------------------ */
/* 変数とリセット                                                       */
/* ------------------------------------------------------------------ */

.ranius {
	--r-deep: #2E1065;
	--r-deep-2: #3B0764;
	--r-pri: #6D28D9;
	--r-pri-2: #7C3AED;
	--r-pri-soft: #F3EEFC;
	--r-gold: #D9A441;
	--r-gold-deep: #B9862C;
	--r-bg: #FDFBF7;
	--r-bg-2: #F7F4EE;
	--r-card: #FFFFFF;
	--r-line: #E7E2DA;
	--r-line-strong: #D6CFC3;
	--r-ink: #1F2329;
	--r-ink-2: #454B55;
	--r-sub: #6D7480;
	--r-on-dark: #F6F2FB;
	--r-on-dark-sub: #C6B8E4;
	--r-ok: #1E9E6A;
	--r-bad: #C63B3B;
	--r-warn: #B87A16;

	--r-wrap: 1120px;
	--r-wrap-narrow: 760px;
	--r-radius: 14px;
	--r-radius-sm: 9px;

	--r-font-ja: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, "Yu Gothic", system-ui, sans-serif;
	--r-font-en: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--r-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, var(--r-font-ja);

	background: var(--r-bg);
	color: var(--r-ink);
	font-family: var(--r-font-ja);
	font-size: 16px;
	line-height: 1.9;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

.ranius *,
.ranius *::before,
.ranius *::after { box-sizing: border-box; }

.ranius img { max-width: 100%; height: auto; }

.ranius a { color: var(--r-pri); text-decoration: none; }
.ranius a:hover { text-decoration: underline; }

.ranius h1, .ranius h2, .ranius h3, .ranius h4 {
	margin: 0;
	line-height: 1.45;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ranius p, .ranius ul, .ranius ol, .ranius dl, .ranius figure { margin: 0; }
.ranius ul, .ranius ol { padding: 0; list-style: none; }

.ranius--lang-en {
	line-height: 1.75;
	font-family: var(--r-font-ui);
}
.ranius--lang-en h1,
.ranius--lang-en h2,
.ranius--lang-en h3,
.ranius--lang-en .r-hero__title,
.ranius--lang-en .r-vision__title,
.ranius--lang-en .r-quote p {
	font-family: var(--r-font-en);
	letter-spacing: -0.015em;
}

.r-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.r-skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--r-deep); color: #fff;
	padding: 10px 18px; z-index: 100;
}
.r-skip:focus { left: 8px; top: 8px; }

.ranius :focus-visible {
	outline: 3px solid var(--r-gold);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 骨組み                                                              */
/* ------------------------------------------------------------------ */

.r-wrap {
	width: 100%;
	max-width: var(--r-wrap);
	margin: 0 auto;
	padding: 0 22px;
}
.r-wrap--narrow { max-width: var(--r-wrap-narrow); }

.r-sec { padding: 84px 0; }
.r-sec--quiet { background: var(--r-bg-2); }
.r-sec--center { text-align: center; }

.r-sec--dark {
	background: var(--r-deep);
	color: var(--r-on-dark);
}
.r-sec--brand {
	background: linear-gradient(150deg, var(--r-deep) 0%, #4C1D95 55%, #5B21B6 100%);
	color: var(--r-on-dark);
}
.r-sec--dark a, .r-sec--brand a { color: var(--r-gold); }

/* ------------------------------------------------------------------ */
/* ヘッダー                                                            */
/* ------------------------------------------------------------------ */

.r-head {
	position: sticky; top: 0; z-index: 50;
	background: rgba(253, 251, 247, 0.93);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--r-line);
}
.r-head__inner {
	display: flex; align-items: center; gap: 16px;
	max-width: var(--r-wrap); margin: 0 auto; padding: 12px 22px;
}

.r-brand { display: flex; align-items: center; gap: 10px; color: inherit; }
.r-brand:hover { text-decoration: none; }
.r-brand__mark {
	width: 34px; height: 34px; flex: none;
	display: grid; place-items: center;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--r-deep), var(--r-pri-2));
	color: #fff; font-weight: 800; font-size: 17px;
	font-family: var(--r-font-en);
}
.r-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.r-brand__text strong { font-size: 19px; letter-spacing: -0.02em; }
.r-brand__text small { font-size: 10px; color: var(--r-sub); letter-spacing: 0.1em; }

.r-burger { display: none; }

.r-nav { margin-left: auto; }
.r-nav__list { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.r-nav__link {
	display: block; padding: 8px 12px; border-radius: 999px;
	font-size: 13.5px; font-weight: 700; color: var(--r-ink-2);
	font-family: var(--r-font-ui);
}
.r-nav__link:hover { background: var(--r-pri-soft); color: var(--r-pri); text-decoration: none; }
.r-nav__link.is-current { color: var(--r-pri); background: var(--r-pri-soft); }
.r-nav__link--lang {
	border: 1px solid var(--r-line-strong);
	letter-spacing: 0.04em;
}
.r-nav__cta { margin-left: 6px; }

/* ------------------------------------------------------------------ */
/* ボタン                                                              */
/* ------------------------------------------------------------------ */

.r-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
	font-family: var(--r-font-ui);
	font-size: 15px; font-weight: 700; line-height: 1.3;
	text-align: center; cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
	background: var(--r-pri); color: #fff;
}
.r-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(46, 16, 101, .18); }

.r-btn--gold { background: var(--r-gold); color: #241505; }
.r-btn--gold:hover { background: var(--r-gold-deep); color: #fff; }

.r-btn--ghost { background: transparent; color: var(--r-on-dark); border-color: rgba(246, 242, 251, .45); }
.r-btn--ghost:hover { background: rgba(246, 242, 251, .1); color: #fff; }

.r-btn--line { background: transparent; color: var(--r-pri); border-color: var(--r-pri); }
.r-btn--line:hover { background: var(--r-pri-soft); }

.r-btn--sm { padding: 9px 17px; font-size: 13px; }
.r-btn--lg { padding: 16px 34px; font-size: 16.5px; }
.r-btn--block { width: 100%; }

/* ------------------------------------------------------------------ */
/* 見出しと補助テキスト                                                 */
/* ------------------------------------------------------------------ */

.r-label {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--r-pri);
	margin-bottom: 14px;
}
.r-sec--dark .r-label, .r-sec--brand .r-label, .r-label--light { color: var(--r-gold); }

/* 見出しの大きさは「4. 見出しの段差」（下のほう）にまとめてあります。
   ここに .r-h2 / .r-h2--xl / .r-h3 の font-size を書いても、
   .ranius .r-h2 (0,2,0) に負けて一度も効きません。書かないこと。 */
.r-h2--light { color: #fff; }
.r-h3--light { color: #fff; }

.r-lead {
	font-size: 17px; color: var(--r-ink-2);
	max-width: 68ch; margin-bottom: 30px;
}
.r-sec--dark .r-lead, .r-sec--brand .r-lead { color: var(--r-on-dark-sub); }
.r-sec--center .r-lead { margin-left: auto; margin-right: auto; }

.r-kicker {
	margin-top: 34px;
	font-size: 17px; font-weight: 700; line-height: 1.8;
	color: var(--r-deep);
	border-left: 3px solid var(--r-gold);
	padding-left: 16px;
	max-width: 72ch;
}
.r-kicker--light, .r-sec--dark .r-kicker, .r-sec--brand .r-kicker { color: #fff; }
.r-kicker--lg { font-size: 20px; }
.r-sec--center .r-kicker { border-left: 0; padding-left: 0; margin-inline: auto; }

.r-source {
	margin-top: 18px;
	font-size: 11.5px; line-height: 1.7; color: var(--r-sub);
	max-width: 90ch;
}
.r-sec--dark .r-source, .r-sec--brand .r-source { color: rgba(198, 184, 228, .8); }

.r-note { margin-top: 16px; font-size: 13px; color: var(--r-sub); }
.r-legend { margin-top: 24px; font-size: 12.5px; color: var(--r-sub); }

/* ------------------------------------------------------------------ */
/* ヒーロー                                                            */
/* ------------------------------------------------------------------ */

.r-hero {
	background: linear-gradient(155deg, var(--r-deep) 0%, #4C1D95 58%, #5B21B6 100%);
	color: #fff;
	padding: 96px 0 88px;
	position: relative; overflow: hidden;
}
.r-hero::after {
	content: ""; position: absolute; right: -140px; top: -140px;
	width: 460px; height: 460px; border-radius: 50%;
	background: radial-gradient(circle, rgba(217, 164, 65, .22), transparent 66%);
	pointer-events: none;
}
.r-hero__inner { position: relative; z-index: 1; }
.r-hero__eyebrow {
	font-family: var(--r-font-ui);
	font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
	color: var(--r-gold); margin-bottom: 22px;
}
.r-hero__title {
	font-size: clamp(38px, 7vw, 74px);
	line-height: 1.25; letter-spacing: -0.03em;
	margin-bottom: 18px;
}
.r-hero__sub {
	font-size: clamp(18px, 2.4vw, 24px);
	font-weight: 700; color: var(--r-gold); margin-bottom: 22px;
}
.r-hero__lead {
	font-size: 16.5px; color: var(--r-on-dark-sub);
	max-width: 60ch; margin-bottom: 34px;
}
.r-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.r-hero__cta--center { justify-content: center; margin-top: 34px; }
.r-hero__byline {
	margin-top: 34px; font-size: 12.5px;
	color: rgba(198, 184, 228, .85);
	font-family: var(--r-font-ui);
}

/* .r-page-hero 一式は、実際に使っているのが .r-phero なので撤去しました
   （テンプレート・JS・文章ファイルのどこからも参照されていません）。
   ページ見出しの実体は .r-phero__title です。 */

/* ------------------------------------------------------------------ */
/* 数字                                                                */
/* ------------------------------------------------------------------ */

.r-stats { display: grid; gap: 20px; margin-top: 12px; }
.r-stats--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.r-stats--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.r-stat {
	padding: 22px 0;
	border-top: 2px solid var(--r-gold);
}
.r-stat__value {
	font-family: var(--r-font-en);
	font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; line-height: 1.15;
	letter-spacing: -0.02em; margin-bottom: 8px;
}
.r-stat__label { font-size: 13.5px; line-height: 1.7; color: var(--r-sub); }
.r-sec--dark .r-stat__label { color: var(--r-on-dark-sub); }
.r-stat__cap {
	font-family: var(--r-font-ui);
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
	color: var(--r-sub); margin-bottom: 6px;
}
.r-stat--sm .r-stat__value { font-size: clamp(22px, 2.6vw, 30px); }
.r-stat--big { background: var(--r-card); border: 1px solid var(--r-line); border-top: 3px solid var(--r-gold); border-radius: var(--r-radius); padding: 26px 24px; }
.r-stat--big .r-stat__value { font-size: clamp(34px, 4.6vw, 52px); color: var(--r-deep); }

/* 内訳バー */
.r-split { margin-top: 46px; }
.r-split__bars { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.r-split__bar {
	flex: 1 1 240px;
	padding: 22px 22px 24px;
	border-radius: var(--r-radius);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
}
.r-split__bar--0 { background: rgba(217, 164, 65, .18); border-color: rgba(217, 164, 65, .4); }
.r-split__pct {
	display: block; font-family: var(--r-font-en);
	font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--r-gold);
}
.r-split__value { display: block; font-size: 19px; font-weight: 700; margin-top: 4px; }
.r-split__label { display: block; font-size: 13px; color: var(--r-on-dark-sub); margin-top: 6px; }

/* ------------------------------------------------------------------ */
/* 引用と年表                                                          */
/* ------------------------------------------------------------------ */

.r-quote { margin: 0 0 40px; }
.r-quote p {
	font-size: clamp(22px, 3.2vw, 34px);
	line-height: 1.6; font-weight: 700; color: var(--r-deep);
	position: relative; padding-left: 26px;
	border-left: 4px solid var(--r-gold);
}
.r-quote cite {
	display: block; margin-top: 16px; padding-left: 30px;
	font-size: 13px; font-style: normal; color: var(--r-sub);
}

.r-years {
	display: grid; gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	border-top: 1px solid var(--r-line);
}
.r-years__item {
	padding: 20px 20px 20px 0;
	border-bottom: 1px solid var(--r-line);
}
.r-years__y {
	display: block;
	font-family: var(--r-font-ui);
	font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
	color: var(--r-pri); margin-bottom: 6px;
}
.r-years__t { display: block; font-size: 15px; }

.r-stats--inline { margin-top: 40px; }

/* ------------------------------------------------------------------ */
/* カード                                                              */
/* ------------------------------------------------------------------ */

.r-cards { display: grid; gap: 20px; margin-top: 10px; }
.r-cards--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.r-cards--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.r-card {
	background: var(--r-card);
	border: 1px solid var(--r-line);
	border-radius: var(--r-radius);
	padding: 26px 24px;
	display: flex; flex-direction: column;
}
.r-sec--dark .r-card, .r-sec--brand .r-card {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
	color: var(--r-on-dark);
}
.r-card--flat { background: transparent; border: 0; border-top: 2px solid var(--r-line-strong); border-radius: 0; padding: 20px 0 0; }
.r-card--accent { border-top: 3px solid var(--r-gold); }
.r-card--lock { align-items: flex-start; }
.r-card--ask { border-top: 3px solid var(--r-pri); }

.r-card__icon {
	display: grid; place-items: center;
	width: 46px; height: 46px; border-radius: 12px;
	background: var(--r-pri-soft); color: var(--r-pri);
	margin-bottom: 16px;
}
.r-card__num {
	font-family: var(--r-font-en);
	font-size: 20px; font-weight: 700; color: var(--r-gold);
	margin-bottom: 8px;
}
.r-card__num--big { font-size: 30px; letter-spacing: 0.02em; }
.r-card__value {
	font-family: var(--r-font-en);
	font-size: clamp(26px, 3vw, 34px); font-weight: 700;
	color: var(--r-deep); line-height: 1.2; margin-bottom: 10px;
}
.r-card__title { font-size: 19px; margin-bottom: 6px; }
.r-card__title--sm { font-size: 16.5px; }
.r-card__sub { font-size: 13px; color: var(--r-pri); font-weight: 700; margin-bottom: 10px; }
.r-sec--dark .r-card__sub, .r-sec--brand .r-card__sub { color: var(--r-gold); }
.r-card__text { font-size: 14.5px; color: var(--r-ink-2); }
.r-sec--dark .r-card__text, .r-sec--brand .r-card__text { color: var(--r-on-dark-sub); }
.r-card__source {
	margin-top: auto; padding-top: 16px;
	font-size: 11.5px; line-height: 1.65; color: var(--r-sub);
}
.r-card__cta {
	margin-top: auto; padding-top: 18px;
	font-size: 14px; font-weight: 700;
	display: inline-flex; align-items: center; gap: 7px;
}
.r-card__cta span { transition: transform .15s ease; }
.r-card__cta:hover span { transform: translateX(3px); }

/* ------------------------------------------------------------------ */
/* 解決策まわり                                                        */
/* ------------------------------------------------------------------ */

.r-solution__name {
	font-family: var(--r-font-en);
	font-size: clamp(40px, 6vw, 66px); font-weight: 700;
	letter-spacing: -0.02em; line-height: 1.1; color: #fff;
}
.r-solution__etym {
	font-family: var(--r-font-ui);
	font-size: 12px; letter-spacing: 0.24em; color: var(--r-gold);
	margin: 6px 0 22px;
}

.r-pillars { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 26px; }
.r-pillar {
	display: grid; grid-template-columns: 24px 1fr; gap: 4px 10px;
	align-items: start;
	padding: 18px 18px 18px 16px;
	border-radius: var(--r-radius-sm);
	background: rgba(255, 255, 255, .07);
}
.r-pillar__check { grid-row: span 2; color: var(--r-gold); font-weight: 800; }
.r-pillar strong { font-size: 16px; }
.r-pillar span:last-child { font-size: 13px; color: var(--r-on-dark-sub); }

.r-steps {
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	counter-reset: r-step;
}
.r-steps__item {
	position: relative;
	padding: 20px 18px;
	border-radius: var(--r-radius-sm);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
}
.r-steps__num {
	display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--r-gold); color: #241505;
	font-family: var(--r-font-en); font-size: 13px; font-weight: 700;
	margin-bottom: 12px;
}
.r-steps__name { display: block; font-size: 15.5px; }
.r-steps__text { display: block; font-size: 12.5px; color: var(--r-on-dark-sub); margin-top: 4px; }

.r-compare {
	margin-top: 46px; padding: 28px 26px;
	border-radius: var(--r-radius);
	background: rgba(0, 0, 0, .18);
}
.r-compare__title { font-size: 15px; color: var(--r-gold); margin-bottom: 20px; }
.r-compare__row { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: center; margin-bottom: 12px; }
.r-compare__name { font-size: 13.5px; color: var(--r-on-dark-sub); }
.r-compare__bar {
	display: flex; align-items: center;
	height: 44px; border-radius: 6px; padding: 0 16px;
	font-weight: 700;
}
.r-compare__bar--old { width: 100%; background: rgba(255, 255, 255, .14); color: #fff; }
.r-compare__bar--new { width: 26%; min-width: 150px; background: var(--r-gold); color: #241505; }
.r-compare__note { margin-top: 16px; font-size: 12px; color: var(--r-on-dark-sub); line-height: 1.7; }

/* ------------------------------------------------------------------ */
/* 比較表                                                              */
/* ------------------------------------------------------------------ */

.r-tablewrap { overflow-x: auto; margin-top: 12px; -webkit-overflow-scrolling: touch; }
.r-table {
	width: 100%; min-width: 660px;
	border-collapse: collapse;
	background: var(--r-card);
	border: 1px solid var(--r-line);
	border-radius: var(--r-radius);
	overflow: hidden;
}
.r-table th, .r-table td {
	padding: 18px 20px; text-align: left; vertical-align: top;
	border-bottom: 1px solid var(--r-line);
	font-size: 14.5px;
}
.r-table thead th {
	font-family: var(--r-font-ui);
	font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
	background: var(--r-bg-2); color: var(--r-sub);
}
.r-table tbody th { font-size: 15px; font-weight: 700; width: 26%; }
.r-table tr:last-child th, .r-table tr:last-child td { border-bottom: 0; }
.r-table__old { color: var(--r-sub); }
.r-table__new { background: rgba(217, 164, 65, .07); }
.r-table thead .r-table__new { background: rgba(217, 164, 65, .16); color: var(--r-gold-deep); }

.r-mark { display: inline-block; width: 1.5em; font-weight: 800; }
.r-mark--no { color: var(--r-bad); }
.r-mark--yes { color: var(--r-ok); }

/* ------------------------------------------------------------------ */
/* 実績・段階                                                          */
/* ------------------------------------------------------------------ */

.r-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.r-badge {
	font-family: var(--r-font-ui);
	font-size: 12.5px; font-weight: 700;
	padding: 7px 15px; border-radius: 999px;
	background: var(--r-pri-soft); color: var(--r-deep);
	border: 1px solid #DFD3F5;
}

.r-phases {
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-top: 36px;
}
.r-phase {
	padding: 20px 20px 22px;
	border-radius: var(--r-radius-sm);
	background: var(--r-card); border: 1px solid var(--r-line);
}
.r-phases--light .r-phase { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
.r-phase__num {
	display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--r-deep); color: #fff;
	font-family: var(--r-font-en); font-size: 13px; font-weight: 700;
	margin-bottom: 12px;
}
.r-phases--light .r-phase__num { background: var(--r-gold); color: #241505; }
.r-phase strong { display: block; font-size: 16px; margin-bottom: 4px; }
.r-phase span:last-child { display: block; font-size: 13.5px; color: var(--r-sub); }
.r-phases--light .r-phase span:last-child { color: var(--r-on-dark-sub); }

.r-stages { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 12px; }
.r-stage {
	padding: 26px 24px; border-radius: var(--r-radius);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	border-top: 3px solid var(--r-gold);
}
.r-stage__when {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--r-gold);
}
.r-stage__name { font-size: 18px; margin: 10px 0 12px; color: #fff; }
.r-stage__size { font-size: 14px; font-weight: 700; color: var(--r-gold); margin-bottom: 8px; }
.r-stage__text { font-size: 13.5px; color: var(--r-on-dark-sub); }

.r-diff { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 34px; }
.r-diff__side {
	display: grid; grid-template-columns: 26px 1fr; gap: 4px 8px;
	padding: 20px; border-radius: var(--r-radius-sm);
	background: rgba(255, 255, 255, .05);
}
.r-diff__side .r-mark { grid-row: span 2; }
.r-diff__side strong { font-size: 16px; color: #fff; }
.r-diff__side span:last-child { font-size: 13.5px; color: var(--r-on-dark-sub); }
.r-diff__side--new { background: rgba(217, 164, 65, .14); }

/* ------------------------------------------------------------------ */
/* 課金の階段                                                          */
/* ------------------------------------------------------------------ */

.r-ladder { display: grid; gap: 14px; margin-top: 12px; }
.r-ladder__step {
	display: grid; grid-template-columns: 92px 1fr; gap: 20px;
	align-items: start;
	background: var(--r-card); border: 1px solid var(--r-line);
	border-left: 4px solid var(--r-pri);
	border-radius: var(--r-radius); padding: 24px 24px;
}
.r-ladder__step:nth-child(2) { border-left-color: var(--r-pri-2); }
.r-ladder__step:nth-child(3) { border-left-color: var(--r-gold); }
.r-ladder__tier {
	font-family: var(--r-font-en);
	font-size: 21px; font-weight: 700; color: var(--r-deep);
	background: var(--r-pri-soft); border-radius: var(--r-radius-sm);
	padding: 10px 0; text-align: center;
}
.r-ladder__when { font-family: var(--r-font-ui); font-size: 12.5px; font-weight: 700; color: var(--r-sub); }
.r-ladder__who { font-size: 19px; margin: 4px 0 8px; }
.r-ladder__text { font-size: 14.5px; color: var(--r-ink-2); }

/* ------------------------------------------------------------------ */
/* 具体像                                                              */
/* ------------------------------------------------------------------ */

.r-bridge { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 12px; }
.r-bridge__side {
	padding: 26px 24px; border-radius: var(--r-radius);
	background: var(--r-card); border: 1px solid var(--r-line);
}
.r-bridge__place {
	font-family: var(--r-font-ui);
	font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--r-pri); margin-bottom: 8px;
}
.r-bridge__who { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.r-bridge__text { font-size: 14.5px; color: var(--r-ink-2); }
.r-bridge__link {
	text-align: center; margin: 24px 0;
	font-size: 15px; font-weight: 700; color: var(--r-deep);
}

.r-facts {
	display: grid; gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	border-top: 1px solid var(--r-line); margin-top: 24px;
}
.r-facts__item { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--r-line); }
.r-facts dt {
	font-family: var(--r-font-ui);
	font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em;
	color: var(--r-sub); margin-bottom: 6px;
}
.r-facts dd { margin: 0; font-size: 15.5px; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* ビジョン                                                            */
/* ------------------------------------------------------------------ */

.r-vision__title {
	font-size: clamp(28px, 4.6vw, 48px);
	line-height: 1.4; color: #fff; margin-bottom: 28px;
}
.r-vision__line { font-size: 16.5px; color: var(--r-on-dark-sub); margin-bottom: 8px; }
.r-vision__kicker {
	margin-top: 28px; padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	font-size: 17px; font-weight: 700; color: var(--r-gold);
}

/* ------------------------------------------------------------------ */
/* リストと定義リスト                                                  */
/* ------------------------------------------------------------------ */

.r-list { display: grid; gap: 10px; }
.r-list li { font-size: 14.5px; line-height: 1.8; padding-left: 26px; position: relative; color: var(--r-ink-2); }
.r-list--dot li::before {
	content: ""; position: absolute; left: 6px; top: 0.75em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--r-pri);
}
.r-list--check li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	color: var(--r-ok); font-weight: 800;
}
.r-list--plain li { padding-left: 26px; color: var(--r-sub); font-size: 13.5px; }
.r-list--plain li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--r-line-strong); }
.r-list--light li { color: var(--r-on-dark-sub); }

.r-deflist { display: grid; gap: 0; border-top: 1px solid var(--r-line); margin-top: 12px; }
.r-deflist__item {
	display: grid; grid-template-columns: 220px 1fr; gap: 24px;
	padding: 24px 0; border-bottom: 1px solid var(--r-line);
}
.r-deflist dt { font-size: 16px; font-weight: 700; }
.r-deflist dd { margin: 0; font-size: 14.5px; color: var(--r-ink-2); }

/* ------------------------------------------------------------------ */
/* フォーム                                                            */
/* ------------------------------------------------------------------ */

.r-form { margin-top: 26px; }
.r-form__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.r-field { display: block; margin-bottom: 20px; }
.r-form__grid .r-field { margin-bottom: 0; }
.r-field__label {
	display: block; margin-bottom: 7px;
	font-size: 13.5px; font-weight: 700;
	font-family: var(--r-font-ui);
}
.r-field__req {
	display: inline-block; margin-left: 6px;
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
	padding: 2px 7px; border-radius: 3px;
	background: #FBEAEA; color: var(--r-bad);
}
.r-field__opt {
	display: inline-block; margin-left: 6px;
	font-size: 10.5px; font-weight: 700;
	padding: 2px 7px; border-radius: 3px;
	background: var(--r-bg-2); color: var(--r-sub);
}
.r-field__input {
	width: 100%; padding: 12px 14px;
	font-family: inherit; font-size: 15.5px; line-height: 1.6;
	color: var(--r-ink);
	background: var(--r-card);
	border: 1px solid var(--r-line-strong);
	border-radius: var(--r-radius-sm);
}
.r-field__input:focus { border-color: var(--r-pri); outline: 2px solid rgba(109, 40, 217, .18); outline-offset: 0; }
.r-field__input--area { resize: vertical; min-height: 110px; }

.r-fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.r-fieldset .r-field__label { padding: 0; }
.r-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.r-choice input {
	position: absolute; opacity: 0;
	width: 1px; height: 1px;
}
.r-choice label {
	display: inline-block; cursor: pointer;
	padding: 9px 17px; border-radius: 999px;
	font-size: 13.5px; font-weight: 700;
	font-family: var(--r-font-ui);
	background: var(--r-card); color: var(--r-ink-2);
	border: 1px solid var(--r-line-strong);
}
.r-choice label:hover { border-color: var(--r-pri); color: var(--r-pri); }
.r-choice input:checked + label {
	background: var(--r-pri); color: #fff; border-color: var(--r-pri);
}
.r-choice input:focus-visible + label { outline: 3px solid var(--r-gold); outline-offset: 2px; }

.r-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.r-form__privacy { font-size: 12.5px; color: var(--r-sub); margin-top: 4px; }
.r-form__submit { margin-top: 24px; }

/* ------------------------------------------------------------------ */
/* お知らせ・ダウンロード                                               */
/* ------------------------------------------------------------------ */

.r-notice {
	padding: 26px 26px; border-radius: var(--r-radius);
	border: 1px solid var(--r-line); background: var(--r-card);
	margin-bottom: 28px;
}
.r-notice--ok { border-left: 4px solid var(--r-ok); }
.r-notice--error { border-left: 4px solid var(--r-bad); background: #FDF3F3; }
.r-notice--warn { border-left: 4px solid var(--r-warn); background: #FDF8EE; }
.r-notice p { font-size: 15px; }
.r-notice .r-lead { margin-bottom: 0; }

.r-dl { display: grid; gap: 12px; margin-top: 6px; }
.r-dl__icon { display: inline-flex; }

.r-checklist { display: grid; gap: 10px; margin-top: 18px; }
.r-checklist li {
	position: relative; padding-left: 30px;
	font-size: 14.5px; color: var(--r-ink-2);
}
.r-checklist li::before {
	content: ""; position: absolute; left: 6px; top: 0.72em;
	width: 8px; height: 8px; border-radius: 2px;
	background: var(--r-gold);
}

.r-cta-band {
	margin-top: 40px; padding-top: 28px;
	border-top: 1px solid var(--r-line);
	text-align: center;
}
.r-cta-band p { font-size: 15px; margin-bottom: 18px; }
.r-cta-band .r-hero__cta { justify-content: center; }

.r-mail { font-size: clamp(18px, 2.6vw, 24px); font-weight: 700; margin: 12px 0 6px; }

/* ------------------------------------------------------------------ */
/* フッター                                                            */
/* ------------------------------------------------------------------ */

.r-foot { background: var(--r-deep-2); color: var(--r-on-dark); padding: 60px 0 0; }
.r-foot__inner {
	display: grid; gap: 40px;
	grid-template-columns: 1.6fr 1fr 1fr;
	max-width: var(--r-wrap); margin: 0 auto; padding: 0 22px 46px;
}
.r-brand--foot .r-brand__mark { background: var(--r-gold); color: #241505; }
.r-brand--foot .r-brand__text strong { color: #fff; }
.r-brand--foot .r-brand__text small { color: var(--r-on-dark-sub); }
.r-foot__tag { margin-top: 14px; font-size: 15px; font-weight: 700; color: #fff; }
.r-foot__note { margin-top: 8px; font-size: 13px; color: var(--r-on-dark-sub); }
.r-foot__h {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--r-gold); margin-bottom: 14px;
}
.r-foot ul { display: grid; gap: 9px; }
.r-foot a { color: var(--r-on-dark); font-size: 14px; }
.r-foot a:hover { color: var(--r-gold); }
.r-foot__base {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding: 22px;
}
.r-foot__legal, .r-foot__copy {
	max-width: var(--r-wrap); margin: 0 auto;
	font-size: 11.5px; color: rgba(198, 184, 228, .75); line-height: 1.7;
}
.r-foot__copy { margin-top: 10px; }

/* ------------------------------------------------------------------ */
/* 画面が狭いとき                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.r-sec { padding: 60px 0; }

	.r-burger {
		display: grid; place-items: center;
		margin-left: auto; width: 42px; height: 42px;
		background: transparent; border: 1px solid var(--r-line-strong);
		border-radius: 10px; cursor: pointer;
	}
	.r-burger__bars { display: grid; gap: 4px; }
	.r-burger__bars i { display: block; width: 18px; height: 2px; background: var(--r-ink); border-radius: 2px; }

	.r-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--r-card);
		border-bottom: 1px solid var(--r-line);
		box-shadow: 0 12px 26px rgba(31, 35, 41, .1);
		display: none;
	}
	.r-nav.is-open { display: block; }
	.r-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 14px 18px; }
	.r-nav__link { padding: 13px 10px; border-radius: 8px; font-size: 15px; }
	.r-nav__link--lang { text-align: center; margin-top: 8px; }
	.r-nav__cta { margin: 10px 0 0; }
	.r-nav__cta .r-btn { width: 100%; }


	.r-ladder__step { grid-template-columns: 1fr; gap: 12px; }
	.r-ladder__tier { width: 82px; }
	.r-deflist__item { grid-template-columns: 1fr; gap: 6px; }
	.r-compare__row { grid-template-columns: 1fr; gap: 6px; }
	.r-compare__bar--new { width: 46%; }
	.r-foot__inner { grid-template-columns: 1fr; gap: 34px; }
	.r-role { padding: 26px 20px; }
	.r-quote p { padding-left: 18px; }
	.r-quote cite { padding-left: 22px; }
}

@media (max-width: 560px) {
	.ranius { font-size: 15.5px; }
	.r-hero { padding: 66px 0 60px; }
	.r-btn { width: 100%; }
	.r-nav__cta .r-btn { width: 100%; }
	.r-hero__cta .r-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ranius * { transition: none !important; animation: none !important; }
	.r-btn:hover { transform: none; }
}

@media print {
	.r-head, .r-foot, .r-form, .ranius-dl, .r-hero__cta { display: none !important; }
	.ranius { background: #fff; color: #000; }
	.r-sec--dark, .r-sec--brand, .r-hero { background: #fff !important; color: #000 !important; }
}

/* ================================================================== */
/* 1ページサイト用の追加分                                             */
/* ================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ヘッダーの高さぶん、アンカーの着地点をずらす */
.ranius .r-sec,
.ranius .r-hero { scroll-margin-top: 68px; }

/* 現在地に応じてナビを光らせる（JSが .is-current を付ける） */
.r-nav__link.is-current { color: var(--r-pri); background: var(--r-pri-soft); }

/* ------------------------------------------------------------------ */
/* 4つの職種（開いて読む形）                                            */
/* ------------------------------------------------------------------ */

.r-roles { display: grid; gap: 12px; margin-top: 26px; }

.r-role {
	background: var(--r-card);
	border: 1px solid var(--r-line);
	border-left: 4px solid var(--r-pri);
	border-radius: var(--r-radius);
	overflow: hidden;
}
.r-role:nth-of-type(2) { border-left-color: #7C3AED; }
.r-role:nth-of-type(3) { border-left-color: #9061F9; }
.r-role:nth-of-type(4) { border-left-color: var(--r-gold); }

.r-role__head {
	display: grid;
	grid-template-columns: 46px 1fr 28px;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	cursor: pointer;
	list-style: none;
}
.r-role__head::-webkit-details-marker { display: none; }
.r-role__head:hover { background: #FBF9F5; }
.r-role[open] .r-role__head { background: var(--r-pri-soft); }

.r-role__num {
	font-family: var(--r-font-en);
	font-size: 26px;
	font-weight: 700;
	color: var(--r-gold);
	line-height: 1;
}
.r-role__headtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.r-role__name { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; line-height: 1.4; }
.r-role__sub { font-size: 12.5px; color: var(--r-sub); font-family: var(--r-font-ui); line-height: 1.6; }

/* 開閉のしるし */
.r-role__toggle {
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--r-pri-soft);
	justify-self: end;
}
.r-role__toggle::before,
.r-role__toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 11px;
	height: 2px;
	margin: -1px 0 0 -5.5px;
	background: var(--r-pri);
	border-radius: 2px;
	transition: transform .15s ease;
}
.r-role__toggle::after { transform: rotate(90deg); }
.r-role[open] .r-role__toggle::after { transform: rotate(0deg); }

.r-role__body { padding: 4px 24px 28px; border-top: 1px solid var(--r-line); }
.r-role[open] .r-role__body { animation: r-open .18s ease both; }
@keyframes r-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.r-role__lead {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--r-deep);
	border-left: 3px solid var(--r-gold);
	padding-left: 15px;
	margin: 22px 0 24px;
}
.r-role__cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.r-role__h {
	font-family: var(--r-font-ui);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--r-pri);
	margin: 0 0 12px;
}
.r-role__h--sub { margin-top: 24px; color: var(--r-sub); }

@media (prefers-reduced-motion: reduce) {
	.r-role[open] .r-role__body { animation: none; }
	.r-role__toggle::before, .r-role__toggle::after { transition: none; }
}

/* ------------------------------------------------------------------ */
/* 資料ダウンロードのフォーム（プラグイン側）を、この面になじませる        */
/* ------------------------------------------------------------------ */

.ranius .ranius-dl {
	background: var(--r-card);
	border-color: var(--r-line);
	margin: 28px 0 0;
}

/* ------------------------------------------------------------------ */
/* 画面が狭いとき                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.ranius .r-sec, .ranius .r-hero { scroll-margin-top: 62px; }
	.r-role__head { grid-template-columns: 34px 1fr 24px; padding: 18px 16px; gap: 10px; }
	.r-role__num { font-size: 21px; }
	.r-role__body { padding: 4px 16px 24px; }
}

/* 実績の範囲を断る一文 */
.r-scope {
	margin: -6px 0 26px;
	padding: 12px 16px;
	border-left: 3px solid var(--r-line-strong);
	background: var(--r-bg-2);
	border-radius: 0 var(--r-radius-sm) var(--r-radius-sm) 0;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--r-sub);
	max-width: 78ch;
}

/* 個人情報の取り扱い */
.r-privacy {
	margin-top: 26px;
	padding: 22px 24px;
	background: var(--r-card);
	border: 1px solid var(--r-line);
	border-radius: var(--r-radius-sm);
}
.r-privacy__title {
	font-family: var(--r-font-ui);
	font-size: 12px; font-weight: 800; letter-spacing: .1em;
	color: var(--r-sub); margin-bottom: 12px;
}
.r-privacy__list { display: grid; gap: 8px; }
.r-privacy__list li {
	position: relative; padding-left: 18px;
	font-size: 13px; line-height: 1.8; color: var(--r-ink-2);
}
.r-privacy__list li::before {
	content: ""; position: absolute; left: 4px; top: .8em;
	width: 5px; height: 5px; border-radius: 50%; background: var(--r-line-strong);
}

/* ------------------------------------------------------------------ */
/* ボタンの文字色を確定させる                                           */
/*                                                                    */
/* 上の方にある `.ranius a { color: ... }` は、詳細度が (0,1,1) で      */
/* `.r-btn` (0,1,0) より強い。そのままだとボタンの文字が               */
/* すべてリンク色（紫）になり、紫の面では読めなくなる。                 */
/* ここで `a.r-btn` (0,2,1) にして、意図した色を最後に確定させる。      */
/* ------------------------------------------------------------------ */

.ranius a.r-btn,
.ranius button.r-btn { color: #fff; }

.ranius a.r-btn--gold { color: #241505; }
.ranius a.r-btn--gold:hover,
.ranius a.r-btn--gold:focus { color: #fff; }

.ranius a.r-btn--ghost { color: var(--r-on-dark); }
.ranius a.r-btn--ghost:hover,
.ranius a.r-btn--ghost:focus { color: #fff; }

.ranius a.r-btn--line { color: var(--r-pri); }
.ranius a.r-btn--line:hover,
.ranius a.r-btn--line:focus { color: var(--r-pri); }

/* ナビの文字色も同じ理由で確定させる */
.ranius a.r-nav__link { color: var(--r-ink-2); }
.ranius a.r-nav__link:hover,
.ranius a.r-nav__link.is-current { color: var(--r-pri); }

/* ================================================================== */
/*  デザイン刷新 v2                                                    */
/*                                                                    */
/*  ともだちじゃぱん（tomodachi-japan.nijin.co.jp）と同じ設計に揃える。  */
/*  ・和文は Zen 系（あちらは丸ゴシック、こちらは角ゴシック）             */
/*  ・カードは白＋やわらかい影、角丸16px（枠線に頼らない）               */
/*  ・見出しラベルはピル型                                             */
/*  ・見出しは2色（地の色＋アクセント）                                 */
/*  ・比較表は濃い色のヘッダー行、自分たちの列だけ色を敷く               */
/*  色はRaniusのまま（紫＋金）。姉妹に見えて、別のブランドに見えるように。 */
/* ================================================================== */

.ranius {
	--r-font-ja: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--r-font-ui: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--r-shadow-sm: 0 1px 3px rgba(46, 16, 101, .05), 0 6px 18px rgba(46, 16, 101, .05);
	--r-shadow-md: 0 2px 6px rgba(46, 16, 101, .06), 0 14px 34px rgba(46, 16, 101, .08);
	--r-radius: 16px;
	--r-radius-sm: 12px;

	font-family: var(--r-font-ja);
	letter-spacing: .01em;
}

.ranius--lang-en { font-family: var(--r-font-ui); }

/* ------------------------------------------------------------------ */
/* 見出しラベルを、ピルにする                                           */
/* ------------------------------------------------------------------ */

.ranius .r-label {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--r-pri-soft);
	color: var(--r-pri);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	margin-bottom: 18px;
	text-transform: none;
}
.ranius .r-sec--dark .r-label,
.ranius .r-sec--brand .r-label,
.ranius .r-label--light {
	background: rgba(217, 164, 65, .16);
	color: var(--r-gold);
}
.ranius .r-page-hero__eyebrow {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--r-pri-soft);
	text-transform: none;
	letter-spacing: .14em;
}

/* ------------------------------------------------------------------ */
/* カードは、枠線ではなく影で立たせる                                    */
/* ------------------------------------------------------------------ */

.ranius .r-card,
.ranius .r-stat--big,
.ranius .r-phase,
.ranius .r-ladder__step,
.ranius .r-bridge__side,
.ranius .r-role,
.ranius .r-privacy,
.ranius .ranius-dl {
	border-color: transparent;
	border-radius: var(--r-radius);
	box-shadow: var(--r-shadow-sm);
}
.ranius .r-card:not(.r-card--flat) { border: 0; }
.ranius .r-card--flat { box-shadow: none; }

.ranius .r-card--accent,
.ranius .r-stat--big { border-top: 3px solid var(--r-gold); }
.ranius .r-card--ask { border-top: 3px solid var(--r-pri); }

/* 暗い面のカードは、影ではなく明るさで立たせる */
.ranius .r-sec--dark .r-card,
.ranius .r-sec--brand .r-card {
	box-shadow: none;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
}
.ranius .r-sec--dark .r-card--accent { border-top: 3px solid var(--r-gold); }

/* ------------------------------------------------------------------ */
/* ヒーロー：状態ピル ＋ 2色見出し ＋ ボタン下のひとこと                  */
/* ------------------------------------------------------------------ */

.r-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 18px 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 24px;
	backdrop-filter: blur(4px);
}
.r-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--r-gold);
	flex: none;
	box-shadow: 0 0 0 0 rgba(217, 164, 65, .7);
	animation: r-pulse 2.4s ease-out infinite;
}
@keyframes r-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(217, 164, 65, .6); }
	70%  { box-shadow: 0 0 0 9px rgba(217, 164, 65, 0); }
	100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0); }
}
@media (prefers-reduced-motion: reduce) { .r-status__dot { animation: none; } }

.ranius .r-hero__eyebrow { display: none; }

/* 見出しの中で、いちばん言いたい語だけ金にする */
.r-hi { color: var(--r-gold); }
.ranius .r-h2 .r-hi { color: var(--r-pri); }
.ranius .r-sec--dark .r-h2 .r-hi,
.ranius .r-sec--brand .r-h2 .r-hi { color: var(--r-gold); }

.r-reassure {
	margin-top: 14px;
	font-size: 12.5px;
	color: rgba(198, 184, 228, .95);
}

/* ------------------------------------------------------------------ */
/* 比較表：ヘッダー行を濃く、Raniusの列だけ色を敷く                       */
/* ------------------------------------------------------------------ */

.ranius .r-table {
	border: 0;
	border-radius: var(--r-radius);
	box-shadow: var(--r-shadow-sm);
	overflow: hidden;
}
.ranius .r-table thead th {
	background: var(--r-deep);
	color: #fff;
	font-size: 13px;
	letter-spacing: .04em;
	padding: 16px 20px;
}
.ranius .r-table thead .r-table__new {
	background: var(--r-pri);
	color: #fff;
}
.ranius .r-table tbody th { background: var(--r-bg-2); }
.ranius .r-table__new { background: rgba(217, 164, 65, .08); }
.ranius .r-table tbody tr:last-child th:first-child { border-bottom-left-radius: var(--r-radius); }

/* ------------------------------------------------------------------ */
/* 上に戻るボタン                                                      */
/* ------------------------------------------------------------------ */

.r-totop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 45;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--r-pri);
	box-shadow: var(--r-shadow-md);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.r-totop.is-shown { opacity: 1; visibility: visible; transform: none; }
.r-totop:hover { background: var(--r-pri); color: #fff; }
@media (prefers-reduced-motion: reduce) { .r-totop { transition: none; } }

/* ------------------------------------------------------------------ */
/* ヘッダーまわりの仕上げ                                               */
/* ------------------------------------------------------------------ */

.ranius .r-head { border-bottom: 1px solid rgba(231, 226, 218, .8); }
.ranius a.r-nav__link--lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--r-line-strong);
	border-radius: 999px;
}
.r-globe { width: 14px; height: 14px; flex: none; }

.ranius .r-brand__mark { border-radius: 12px; }

/* ------------------------------------------------------------------ */
/* こまかい調整                                                        */
/* ------------------------------------------------------------------ */

.ranius .r-btn { box-shadow: 0 2px 8px rgba(46, 16, 101, .1); }
.ranius .r-btn--ghost { box-shadow: none; }

.ranius .r-badge {
	background: #fff;
	border: 1px solid #E6DCC8;
	color: var(--r-deep);
	box-shadow: var(--r-shadow-sm);
}

.ranius .r-quote p { border-left-width: 5px; }

.ranius .r-scope {
	background: #fff;
	border-left: 3px solid var(--r-gold);
	border-radius: var(--r-radius-sm);
	box-shadow: var(--r-shadow-sm);
	padding: 16px 20px;
}

.ranius .r-split__bar { border-radius: var(--r-radius); }
.ranius .r-steps__item,
.ranius .r-stage,
.ranius .r-pillar { border-radius: var(--r-radius); }

.ranius .r-role__head { border-radius: var(--r-radius) var(--r-radius) 0 0; }
.ranius .r-role { border-left-width: 5px; }

/* ------------------------------------------------------------------ */
/* 日本語の折り返し                                                     */
/*                                                                    */
/* ch は「0」の幅が基準なので、和文に使うと1行が短くなりすぎる。         */
/* 和文のときだけ em で指定し直し、文節で折り返すようにする。            */
/* ------------------------------------------------------------------ */

.ranius--lang-ja .r-hero__lead,
.ranius--lang-ja .r-lead { max-width: 40em; }
.ranius--lang-ja .r-kicker { max-width: 42em; }
.ranius--lang-ja .r-source { max-width: 42em; }

/* 文節で折り返す（対応しないブラウザでは無視される） */
.ranius--lang-ja h1,
.ranius--lang-ja h2,
.ranius--lang-ja h3,
.ranius--lang-ja .r-hero__lead,
.ranius--lang-ja .r-lead,
.ranius--lang-ja .r-kicker,
.ranius--lang-ja .r-card__text,
.ranius--lang-ja .r-role__lead,
.ranius--lang-ja .r-status { word-break: auto-phrase; }

/* 見出しの「泣き別れ」を減らす */
.ranius h1, .ranius h2, .ranius h3 { text-wrap: pretty; }
.ranius .r-hero__title, .ranius .r-vision__title { text-wrap: balance; }

/* ------------------------------------------------------------------ */
/* ヒーローの写真                                                       */
/*                                                                    */
/* ともだちじゃぱんと同じ組み方：写真を敷き、暗いグラデーションを重ね、  */
/* 左側に白文字を置く。写真は左3分の1が暗くなるよう生成してあるので、    */
/* グラデーションと合わせて文字が確実に読める。                         */
/* ------------------------------------------------------------------ */

.ranius .r-hero {
	background-color: var(--r-deep);
	background-image:
		linear-gradient( 98deg,
			rgba(30, 10, 66, .95) 0%,
			rgba(38, 13, 84, .90) 30%,
			rgba(46, 16, 101, .62) 52%,
			rgba(46, 16, 101, .30) 74%,
			rgba(46, 16, 101, .38) 100% ),
		url( "assets/img/hero.jpg" );
	background-size: cover;
	background-position: 72% center;
	background-repeat: no-repeat;
	padding: 108px 0 100px;
}

/* 金色のにじみは、写真の上だと濁るので弱める */
.ranius .r-hero::after { opacity: .45; }

.ranius .r-hero__inner { max-width: 1120px; }
.ranius .r-hero__title,
.ranius .r-hero__sub,
.ranius .r-hero__lead { text-shadow: 0 1px 24px rgba(20, 6, 46, .45); }

@media (max-width: 900px) {
	/* 画面が狭いと人物が切れるので、写真は上に寄せて暗さを足す */
	.ranius .r-hero {
		background-position: 66% top;
		background-image:
			linear-gradient( 180deg,
				rgba(30, 10, 66, .80) 0%,
				rgba(38, 13, 84, .88) 45%,
				rgba(46, 16, 101, .95) 100% ),
			url( "assets/img/hero.jpg" );
		padding: 72px 0 64px;
	}
}

/* ------------------------------------------------------------------ */
/* 試作版の授業カード                                                   */
/* 画像ではなくHTMLで組んでいるので、拡大しても崩れず、文言も直せる。    */
/* ------------------------------------------------------------------ */

.r-mock {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin-top: 14px;
}

.r-mock__card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(10, 3, 28, .3);
	display: flex;
	flex-direction: column;
}

.r-mock__art {
	position: relative;
	min-height: 188px;
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #fff;
}
.r-mock__card--0 .r-mock__art { background: linear-gradient(150deg, #2E1065 0%, #6D28D9 55%, #C026D3 100%); }
.r-mock__card--1 .r-mock__art { background: linear-gradient(150deg, #9F1239 0%, #E11D48 55%, #FB923C 100%); }
.r-mock__card--2 .r-mock__art { background: linear-gradient(150deg, #134E4A 0%, #0D9488 55%, #A3E635 100%); }

.r-mock__badge,
.r-mock__tag {
	position: absolute;
	top: 14px;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .30);
	backdrop-filter: blur(3px);
	color: #fff;
}
.r-mock__badge { left: 14px; }
.r-mock__tag { right: 14px; }

.r-mock__kicker { font-size: 12.5px; opacity: .92; margin-bottom: 4px; }
.r-mock__title { font-size: 18px; font-weight: 700; line-height: 1.45; }

.r-mock__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 18px 17px;
	background: #fff;
}
.r-mock__teacher { font-size: 15px; font-weight: 700; color: var(--r-ink); }
.r-mock__note { font-size: 11.5px; color: var(--r-sub); margin-top: 2px; }
.r-mock__nodata {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--r-pri-soft);
	color: var(--r-pri);
}

/* ================================================================== */
/*  複数ページ構成の部品                                               */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* ページ見出しのヒーロー（トップ以外の全ページ）                        */
/* ------------------------------------------------------------------ */

.r-phero {
	background-color: var(--r-deep);
	background-size: cover;
	background-position: 70% center;
	background-repeat: no-repeat;
	color: #fff;
	padding: 96px 0 84px;
	position: relative;
}
.r-phero__title {
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.32;
	letter-spacing: -.02em;
	margin: 14px 0 18px;
	max-width: 22em;
	text-wrap: balance;
	text-shadow: 0 1px 24px rgba(20, 6, 46, .45);
}
.r-phero__lead {
	font-size: 16.5px;
	line-height: 1.95;
	color: var(--r-on-dark-sub);
	max-width: 40em;
	text-shadow: 0 1px 18px rgba(20, 6, 46, .4);
}
.ranius .r-phero__lead strong { color: #fff; }
.ranius--lang-en .r-phero__lead { max-width: 60ch; }

/* パンくず */
.r-crumb {
	font-family: var(--r-font-ui);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--r-on-dark-sub);
	display: flex;
	align-items: center;
	gap: 10px;
}
.ranius .r-crumb a { color: var(--r-gold); }
.r-crumb span[aria-hidden] { opacity: .5; }

/* ------------------------------------------------------------------ */
/* トップの案内カード                                                   */
/* ------------------------------------------------------------------ */

.r-hub {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	margin-top: 12px;
}

.ranius a.r-hub__card {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: 6px;
	padding: 26px 24px 22px;
	background: #fff;
	border-radius: var(--r-radius);
	border-top: 3px solid var(--r-pri);
	box-shadow: var(--r-shadow-sm);
	color: var(--r-ink);
	text-decoration: none;
	transition: transform .14s ease, box-shadow .14s ease;
}
.ranius a.r-hub__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--r-shadow-md);
	text-decoration: none;
}
/* 上の .ranius a.r-hub__card より詳細度を上げないと色が変わらない */
.ranius a.r-hub__card:nth-child(4n+2) { border-top-color: #7C3AED; }
.ranius a.r-hub__card:nth-child(4n+3) { border-top-color: #9061F9; }
.ranius a.r-hub__card:nth-child(4n+4) { border-top-color: var(--r-gold); }

.r-hub__num {
	font-family: var(--r-font-en);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--r-gold);
}
.r-hub__title { font-size: 18.5px; font-weight: 700; line-height: 1.45; }
.r-hub__lead { font-size: 13.5px; line-height: 1.85; color: var(--r-sub); }
.r-hub__go { font-size: 17px; color: var(--r-pri); justify-self: end; transition: transform .14s ease; }
.r-hub__card:hover .r-hub__go { transform: translateX(4px); }

/* ------------------------------------------------------------------ */
/* 次のページへの導線                                                   */
/* ------------------------------------------------------------------ */

.r-next { background: var(--r-bg-2); padding: 54px 0 64px; }

.ranius a.r-next__link {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"label arrow"
		"title arrow"
		"lead  arrow";
	align-items: center;
	gap: 4px 20px;
	padding: 28px 30px;
	background: #fff;
	border-radius: var(--r-radius);
	box-shadow: var(--r-shadow-sm);
	color: var(--r-ink);
	text-decoration: none;
	transition: transform .14s ease, box-shadow .14s ease;
}
.ranius a.r-next__link:hover {
	transform: translateY(-3px);
	box-shadow: var(--r-shadow-md);
	text-decoration: none;
}
.r-next__label {
	grid-area: label;
	font-family: var(--r-font-ui);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	color: var(--r-sub);
}
.r-next__title { grid-area: title; font-size: 21px; font-weight: 700; line-height: 1.45; }
.r-next__lead  { grid-area: lead; font-size: 13.5px; color: var(--r-sub); }
.r-next__arrow {
	grid-area: arrow;
	font-size: 22px;
	color: var(--r-pri);
	transition: transform .14s ease;
}
.r-next__link:hover .r-next__arrow { transform: translateX(5px); }

@media (max-width: 900px) {
	.r-phero { padding: 64px 0 56px; background-position: 66% center; }
	.ranius a.r-next__link { padding: 22px 20px; gap: 4px 12px; }
	.r-next__title { font-size: 18.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.ranius a.r-hub__card,
	.ranius a.r-next__link,
	.r-hub__go,
	.r-next__arrow { transition: none; }
	.ranius a.r-hub__card:hover,
	.ranius a.r-next__link:hover { transform: none; }
}

/* ================================================================== */
/*  v4 — ともだちじゃぱんに寄せる                                       */
/*                                                                    */
/*  向こうの実測値に合わせています。                                    */
/*    見出し  41.6px / 700 / 中央揃え / 字間0.02em / 行間1.34 / ブランド色 */
/*    カード  角丸20px / 枠0.8px / 影 0 6px 18px -12px                  */
/*    ボタン  角丸999px / padding 15px 30px / 色付きの影                */
/*    横幅    1000〜1040px                                             */
/*  色はRaniusのまま（紫＋金）。組み方だけ揃えます。                     */
/* ================================================================== */

.ranius {
	--r-wrap: 1040px;
	--r-wrap-narrow: 720px;
	--r-radius: 20px;
	--r-radius-sm: 14px;
	--r-card-line: #E9E2D6;
	--r-shadow-sm: 0 6px 18px -12px rgba(40, 30, 70, .34);
	--r-shadow-md: 0 14px 34px -14px rgba(40, 30, 70, .40);
}

/* ------------------------------------------------------------------ */
/* セクションの頭は、中央に寄せる                                        */
/* ------------------------------------------------------------------ */

.ranius .r-sec > .r-wrap > .r-label,
.ranius .r-sec > .r-wrap > .r-h2,
.ranius .r-sec > .r-wrap > .r-lead,
.ranius .r-sec > .r-wrap > .r-h3,
.ranius .r-sec > .r-wrap > .r-kicker,
.ranius .r-sec > .r-wrap > .r-source,
.ranius .r-sec > .r-wrap > .r-scope,
.ranius .r-sec > .r-wrap > .r-legend,
.ranius .r-sec > .r-wrap > .r-note {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.ranius .r-h2 {
	font-size: clamp(26px, 4.2vw, 42px);
	line-height: 1.36;
	letter-spacing: .02em;
	color: var(--r-deep);
	margin-bottom: 20px;
	max-width: 24em;
	text-wrap: balance;
}

/* 強調したい節見出し。ページ見出し(.r-phero__title 34〜56px)を
   追い越さない範囲に収める。
   ※ .r-h2--xl だけで書くと .ranius .r-h2 (0,2,0) に負けて効かない。 */
.ranius .r-h2--xl { font-size: clamp(30px, 4.8vw, 48px); }
.ranius .r-h2--light,
.ranius .r-sec--dark .r-h2,
.ranius .r-sec--brand .r-h2 { color: #fff; }

.ranius .r-h3 {
	font-size: clamp(19px, 2.4vw, 26px);
	color: var(--r-deep);
	margin: 54px 0 20px;
	text-wrap: balance;
}
.ranius .r-h3--light,
.ranius .r-sec--dark .r-h3,
.ranius .r-sec--brand .r-h3 { color: #fff; }

.ranius .r-lead {
	font-size: 16px;
	line-height: 2;
	max-width: 40em;
	margin-bottom: 36px;
}

/* 見出しの中の一語だけ色を変える（向こうと同じ二色使い） */
.ranius .r-h2 .r-hi,
.ranius .r-h3 .r-hi { color: var(--r-gold-deep); }
.ranius .r-sec--dark .r-h2 .r-hi,
.ranius .r-sec--brand .r-h2 .r-hi,
.ranius .r-sec--dark .r-h3 .r-hi { color: var(--r-gold); }

/* 締めの一文は、線ではなく中央の帯にする */
.ranius .r-sec > .r-wrap > .r-kicker {
	border-left: 0;
	padding: 18px 26px;
	max-width: 46em;
	margin-top: 44px;
	background: rgba(109, 40, 217, .05);
	border-radius: var(--r-radius);
	font-size: 17px;
}
.ranius .r-sec--dark > .r-wrap > .r-kicker,
.ranius .r-sec--brand > .r-wrap > .r-kicker {
	background: rgba(255, 255, 255, .08);
}

.ranius .r-sec > .r-wrap > .r-source { max-width: 42em; margin-top: 20px; }

/* ------------------------------------------------------------------ */
/* カード — 角丸20px、細い枠、浅く広い影                                 */
/* ------------------------------------------------------------------ */

.ranius .r-card,
.ranius .r-stat--big,
.ranius .r-phase,
.ranius .r-ladder__step,
.ranius .r-bridge__side,
.ranius .r-role,
.ranius .r-privacy,
.ranius .r-mock__card,
.ranius a.r-hub__card,
.ranius a.r-next__link,
.ranius .ranius-dl {
	border: .8px solid var(--r-card-line);
	border-radius: var(--r-radius);
	box-shadow: var(--r-shadow-sm);
}
.ranius .r-card:not(.r-card--flat) { padding: 28px 26px; }
.ranius .r-card--flat { border: 0; box-shadow: none; }

.ranius .r-sec--dark .r-card,
.ranius .r-sec--brand .r-card {
	border-color: rgba(255, 255, 255, .16);
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* ボタン — 色付きの影。これが「浮いている」感の正体                      */
/* ------------------------------------------------------------------ */

.ranius .r-btn {
	padding: 15px 30px;
	font-size: 16px;
	border-width: 1.6px;
}
.ranius .r-btn--sm { padding: 9px 18px; font-size: 13.5px; }
.ranius .r-btn--lg { padding: 17px 36px; font-size: 17px; }

.ranius a.r-btn,
.ranius button.r-btn { box-shadow: 0 12px 26px -12px var(--r-pri); }
.ranius a.r-btn--gold,
.ranius button.ranius-dl__btn { box-shadow: 0 12px 26px -12px var(--r-gold-deep); }
.ranius a.r-btn--ghost { box-shadow: none; border-color: rgba(255, 255, 255, .72); }
.ranius a.r-btn--line { box-shadow: none; background: #fff; }

/* ------------------------------------------------------------------ */
/* ラベルのピル — 向こうの実測に合わせる                                 */
/* ------------------------------------------------------------------ */

.ranius .r-label,
.ranius .r-page-hero__eyebrow {
	font-size: 12px;
	letter-spacing: .15em;
	padding: 7px 16px;
	margin-bottom: 22px;
}

/* ------------------------------------------------------------------ */
/* 面のリズム                                                          */
/* ------------------------------------------------------------------ */

.ranius .r-sec { padding: 96px 0; }
.ranius .r-sec--quiet { background: #F6F2EA; }

@media (max-width: 900px) {
	.ranius .r-sec { padding: 64px 0; }
	.ranius .r-sec > .r-wrap > .r-kicker { padding: 16px 18px; font-size: 15.5px; }
	.ranius .r-card:not(.r-card--flat) { padding: 22px 20px; }
}

/* ------------------------------------------------------------------ */
/* v4.1 — 中央揃えの徹底                                                */
/*                                                                    */
/* inline-block の箱は margin:auto では中央に寄りません。               */
/* 幅を内容ぴったりにしたうえで block にして、auto を効かせます。         */
/* ------------------------------------------------------------------ */

.ranius .r-sec > .r-wrap > .r-label,
.ranius .r-page-hero .r-page-hero__eyebrow {
	display: block;
	width: fit-content;
}
.ranius .r-sec > .r-wrap > .r-label { margin-left: auto; margin-right: auto; }

/* 節の中の小見出しも中央に */
.ranius .r-split .r-h3,
.ranius .r-sec .r-h3 { text-align: center; }

/* 数字の三つ組は中央揃え。上の金色の線も中央から引く */
.ranius .r-stat { text-align: center; }
.ranius .r-stats--3 .r-stat,
.ranius .r-stats--2 .r-stat { padding: 26px 12px 22px; }
.ranius .r-stat--big { text-align: center; padding: 30px 24px; }

/* 内訳のバーも中身を中央に */
.ranius .r-split__bar { text-align: center; padding: 26px 22px 28px; }
.ranius .r-split__bars { justify-content: center; }

/* 3つの柱・工程・段階も中央に */
.ranius .r-pillar { text-align: center; grid-template-columns: 1fr; gap: 6px; padding: 22px 18px; }
.ranius .r-pillar__check { grid-row: auto; font-size: 18px; }
.ranius .r-steps__item { text-align: center; }
.ranius .r-steps__num { margin-left: auto; margin-right: auto; }
.ranius .r-phase { text-align: center; }
.ranius .r-phase__num { margin-left: auto; margin-right: auto; }

/* 実績のバッジは中央に並べる */
.ranius .r-badges { justify-content: center; }

/* 対比の2枚も中央 */
.ranius .r-diff__side { text-align: center; grid-template-columns: 1fr; gap: 6px; }
.ranius .r-diff__side .r-mark { grid-row: auto; }

/* 具体像の2枚も中央 */
.ranius .r-bridge__side { text-align: center; }

/* 余白の詰め */
.ranius .r-split { margin-top: 52px; }
.ranius .r-sec > .r-wrap > .r-source:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.ranius .r-stats--3 .r-stat, .ranius .r-stats--2 .r-stat { padding: 20px 8px; }
}

/* ================================================================== */
/*  v4.2 — 余白と文字の階層を、ともだちじゃぱんの実測値に合わせる         */
/*                                                                    */
/*  向こうの計測結果（1375px幅）                                        */
/*    セクション上下 : 68px（全帯で統一）                                */
/*    ラベル→見出し : 16px                                             */
/*    並びの gap    : 16px                                             */
/*    文字の階層     : 42 / 18 / 16 / 14 / 13 / 12                      */
/*    本文は 14px/500 が主力。見出しとの比は3.0倍                        */
/*                                                                    */
/*  Raniusは投資家・研究者が読む文章量なので、本文は15pxに留めます。      */
/*  （14pxだと日本語の長文がつらい）それ以外は向こうに合わせます。        */
/* ================================================================== */

/* ---- 面の余白 ---- */
.ranius .r-sec { padding: 68px 0; }
.ranius .r-phero { padding: 76px 0 68px; }
.ranius .r-next { padding: 44px 0 56px; }

/* ---- 見出しまわりの間隔 ---- */
.ranius .r-sec > .r-wrap > .r-label { margin-bottom: 16px; }
.ranius .r-h2 { margin-bottom: 16px; }
.ranius .r-sec > .r-wrap > .r-lead { margin-bottom: 30px; }
.ranius .r-h3 { margin: 44px 0 16px; }

/* ---- 並びの gap を16pxに揃える ---- */
.ranius .r-cards,
.ranius .r-stats,
.ranius .r-hub,
.ranius .r-mock,
.ranius .r-phases,
.ranius .r-stages,
.ranius .r-steps,
.ranius .r-pillars,
.ranius .r-diff,
.ranius .r-bridge,
.ranius .r-ladder,
.ranius .r-roles,
.ranius .r-split__bars { gap: 16px; }

/* ---- 文字の階層 ---- */
.ranius { font-size: 15px; }

.ranius .r-lead { font-size: 15px; line-height: 1.95; }
.ranius .r-card__title { font-size: 18px; }
.ranius .r-card__title--sm { font-size: 16px; }
.ranius .r-card__text,
.ranius .r-list li,
.ranius .r-checklist li,
.ranius .r-deflist dd,
.ranius .r-table td,
.ranius .r-stage__text,
.ranius .r-ladder__text,
.ranius .r-bridge__text { font-size: 14px; line-height: 1.85; }

.ranius .r-card__sub,
.ranius .r-stat__label,
.ranius .r-steps__text,
.ranius .r-phase span:last-child,
.ranius .r-years__t { font-size: 13px; }

.ranius .r-source,
.ranius .r-card__source,
.ranius .r-note,
.ranius .r-legend,
.ranius .r-scope,
.ranius .r-privacy__list li,
.ranius .r-compare__note { font-size: 12px; line-height: 1.8; }

.ranius .r-label,
.ranius .r-badge,
.ranius .r-mock__badge,
.ranius .r-mock__tag,
.ranius .r-mock__nodata { font-size: 12px; }

.ranius .r-table th { font-size: 14px; }
.ranius .r-table thead th { font-size: 12px; }

/* 締めの一文は本文より一段大きく。ここは読ませたい行なので */
.ranius .r-sec > .r-wrap > .r-kicker { font-size: 16px; margin-top: 36px; padding: 16px 24px; }

/* ---- カード内の余白も詰める ---- */
.ranius .r-card:not(.r-card--flat) { padding: 24px 22px; }
.ranius .r-mock__foot { padding: 14px 16px 16px; }
.ranius a.r-hub__card { padding: 22px 20px 18px; }

/* ---- 画面が狭いとき ---- */
@media (max-width: 900px) {
	.ranius .r-sec { padding: 52px 0; }
	.ranius .r-phero { padding: 56px 0 48px; }
	.ranius .r-cards, .ranius .r-stats, .ranius .r-hub, .ranius .r-mock,
	.ranius .r-phases, .ranius .r-stages, .ranius .r-steps, .ranius .r-pillars,
	.ranius .r-diff, .ranius .r-bridge, .ranius .r-ladder, .ranius .r-roles { gap: 12px; }
	.ranius .r-card:not(.r-card--flat) { padding: 20px 18px; }
}

/* ------------------------------------------------------------------ */
/* v4.2.1 — 本文の太さ                                                 */
/* 向こうは Zen Maru Gothic の 500 が本文の主力。こちらも500に揃える。   */
/* 400のままだと、和文が細く見えて情報が薄く感じられる。                 */
/* ------------------------------------------------------------------ */

.ranius { font-weight: 500; }
.ranius .r-lead,
.ranius .r-card__text,
.ranius .r-list li,
.ranius .r-checklist li,
.ranius .r-deflist dd,
.ranius .r-table td,
.ranius .r-stat__label,
.ranius .r-stage__text,
.ranius .r-ladder__text,
.ranius .r-bridge__text,
.ranius .r-years__t,
.ranius .r-steps__text { font-weight: 500; }

/* 注記だけは細く残して、本文との差をつける */
.ranius .r-source,
.ranius .r-card__source,
.ranius .r-note,
.ranius .r-legend,
.ranius .r-compare__note { font-weight: 400; }

/* 数字の説明は本文と同じ階層に上げる（向こうの主力は14px） */
.ranius .r-stat__label { font-size: 14px; }

/* ================================================================== */
/*  v4.3.0 — 実測して直したところ                                      */
/*                                                                    */
/*  ともだちじゃぱんと Ranius の computed style を並べて比べた結果の    */
/*  修正です。目視ではなく、ブラウザから吸い出した数値が根拠です。      */
/*  比較の表は レビュー/2026-08-21_第2回レビュー.md にあります。        */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* 1. スキップリンクが読めない（詳細度の事故・4回目）                   */
/*                                                                    */
/*   `.r-skip { color:#fff }` は詳細度 (0,1,0)。                       */
/*   ファイル冒頭の `.ranius a { color: var(--r-pri) }` が (0,1,1) で   */
/*   強いため、文字が紫のまま濃紫の面に乗っていた。実測 2.14:1。        */
/*   キーボードで Tab を押した最初の1回で必ず出る場所なので、           */
/*   ここが読めないのは支援技術の利用者にとって入口が塞がるのと同じ。    */
/*   決まりどおり `.ranius a.クラス名` の形にして確定させる。            */
/*   → 修正後 15.24:1                                                  */
/* ------------------------------------------------------------------ */

.ranius a.r-skip { color: #fff; }
.ranius a.r-skip:hover,
.ranius a.r-skip:focus { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* 2. 見出しの行間・字間が、書いたとおりに効いていなかった              */
/*                                                                    */
/*   これも同じ詳細度の事故だが、こちらは color ではなく                */
/*   line-height と letter-spacing で起きていた。                      */
/*                                                                    */
/*     .ranius h1, .ranius h2, .ranius h3, .ranius h4  → (0,1,1)      */
/*     .r-hero__title                                  → (0,1,0)      */
/*                                                                    */
/*   つまり見出しに個別に書いた行間・字間は、クラス1つだけの            */
/*   セレクタで書いてある限り、1つも効いていなかった。                  */
/*   実測でも h1 は狙いの 1.25 ではなく基底の 1.45 のままだった。       */
/*                                                                    */
/*   ともだちじゃぱんの実測値：h1 = 1.22 / +0.01em、h2 = 1.34 /        */
/*   +0.02em、h3 = 1.40 / 0em。大きい文字ほど行間を詰めている。         */
/*   Ranius は大小すべて 1.45 で、大見出しほど間延びして見えていた。     */
/*                                                                    */
/*   字間は、v2改修で決めた「和文の見出しは正の字間」に揃える。         */
/*   `.r-hero__title` に残っていた -0.03em は v2 より前の値で、         */
/*   `.r-h2` の +0.02em と符号が逆のまま放置されていた。                */
/*                                                                    */
/*   以後、見出しの行間・字間は必ず `.ranius .クラス名` で書くこと。     */
/* ------------------------------------------------------------------ */

.ranius .r-hero__title  { line-height: 1.24; letter-spacing: .01em; }
.ranius .r-phero__title { line-height: 1.28; letter-spacing: .01em; }
.ranius .r-vision__title { line-height: 1.36; letter-spacing: .01em; }

/* 中見出し・カードの見出しは、向こうの h3 に合わせて 1.4 */
.ranius .r-h3,
.ranius .r-card__title,
.ranius .r-stage__name,
.ranius .r-ladder__who,
.ranius .r-compare__title { line-height: 1.4; letter-spacing: .01em; }

/* 英字の小見出しラベル。広い字間が持ち味なのに、基底に消されていた */
.ranius .r-foot__h { letter-spacing: .16em; }
.ranius .r-role__h { letter-spacing: .14em; }
.ranius .r-privacy__title { letter-spacing: .1em; }

/* ------------------------------------------------------------------ */
/* 3. 1行が長すぎる                                                    */
/*                                                                    */
/*   実測（1280px幅）：                                                */
/*     .r-source        768px  / 12px   → 1行 64字                    */
/*     .r-legend        996px  / 12px   → 1行 83字                    */
/*     .r-compare__note 944px  / 12px   → 1行 79字                    */
/*     .r-foot__legal  1040px  / 11.5px → 1行 90字                    */
/*                                                                    */
/*   ともだちじゃぱんの本文は 392〜556px で、1行 24〜34字。            */
/*   和文で読みやすいのは 35〜45字とされる範囲で、64〜90字は           */
/*   行を追う目が戻り先を見失う長さ。                                  */
/*                                                                    */
/*   しかもこれが効いているのは全部「出典」と「但し書き」で、          */
/*   研究者と投資家がいちばん確かめたい行がいちばん読みにくい、        */
/*   という並びになっていた。                                          */
/*                                                                    */
/*   `.r-source` には3つのルールが重なっていた。90ch（欧文の目安）、  */
/*   lang-ja の 54em、そして中央寄せ用の 64em。いちばん詳細度の高い    */
/*   64em が勝っていたので、実測は 64字だった。                        */
/*   新しい上書きを積むと4枚目になるので、既にある2つ（1369行・        */
/*   1748行）の値そのものを 42em に直してある。下の宣言はその土台。    */
/* ------------------------------------------------------------------ */

.ranius .r-source,
.ranius .r-legend,
.ranius .r-compare__note {
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
}
.ranius .r-note { max-width: 40em; }
.ranius .r-foot__legal,
.ranius .r-foot__copy { max-width: 46em; }

/* 左揃えの文脈に置かれた出典は、左のまま幅だけ詰める */
.ranius .r-card .r-source,
.ranius .r-card__source { margin-left: 0; margin-right: 0; }

/* ------------------------------------------------------------------ */
/* 4. 補足文字のコントラストが AA に 0.3 足りない                       */
/*                                                                    */
/*   --r-sub (#6D7480) を淡い面 (#F6F2EA) に乗せると 4.22:1。          */
/*   WCAG AA の 4.5:1 に届いていない。これも出典・数字の説明という      */
/*   いちばん確かめられる行に使われている色。                          */
/*   #656B78 まで落とすと 4.79:1（白地 5.35:1／地色 5.17:1）。         */
/*   見た目の印象はほぼ変わらない。                                    */
/* ------------------------------------------------------------------ */

.ranius { --r-sub: #656B78; }

/* ------------------------------------------------------------------ */
/* 5. ルーブリックの観点リスト（共同研究ページ）                        */
/*                                                                    */
/*   辞書にありながらどこにも出ていなかった research.measure と、       */
/*   新しく足した research.instrument を出すための部品。               */
/*   濃紫の面に乗るので、色は最初から濃色面向けに決めている。           */
/* ------------------------------------------------------------------ */

.ranius .r-dims {
	display: grid;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.ranius .r-dim {
	display: grid;
	grid-template-columns: 54px 1fr auto;
	align-items: baseline;
	gap: 16px;
	padding: 16px 20px;
	background: rgba(255, 255, 255, .05);
	border: .8px solid rgba(255, 255, 255, .16);
	border-radius: var(--r-radius-sm);
}

.ranius .r-dim__code {
	font-family: var(--r-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--r-gold);
}

.ranius .r-dim__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ranius .r-dim__name {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .01em;
	color: #fff;
}

.ranius .r-dim__q {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.75;
	color: var(--r-on-dark-sub);
}

/* 「AI」か「人」か。どちらが付けた評定なのかは、この節のいちばん
   大事な区別なので、色ではなく枠で見えるようにしている。 */
.ranius .r-dim__by {
	flex: none;
	font-family: var(--r-font-ui);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .34);
	color: var(--r-on-dark);
	white-space: nowrap;
}

.ranius .r-note--light { color: var(--r-on-dark-sub); }

@media (max-width: 700px) {
	.ranius .r-dim {
		grid-template-columns: 46px 1fr;
		row-gap: 10px;
	}
	/* 狭いときは「AI／人」を2行目の右端に回す */
	.ranius .r-dim__by { grid-column: 2; justify-self: start; }
}

/* ================================================================== */
/*  v4.4.0 — スマートフォン幅（375px）で実測して直したところ            */
/*                                                                    */
/*  第2回は 1280px でしか測っていませんでした。375px で両サイトの       */
/*  computed style を並べたところ、PCでは揃っているのに                 */
/*  スマホだけ崩れている箇所が出ました。以下はその修正です。            */
/*  比較の表は レビュー/2026-08-21_第3回レビュー.md にあります。        */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* 1. スマホで、ページ見出しと節見出しの段差が消えていた                */
/*                                                                    */
/*   実測（375px）                                                     */
/*     ともだちじゃぱん  h1 35.1px ／ h2 25.65px → 1.37倍             */
/*     Ranius           h1 30px   ／ h2 28px    → 1.07倍             */
/*                                                                    */
/*   1.07倍では、ページの題と節の題が同じ大きさに見えます。            */
/*   clamp() の下限だけがぶつかっていたのが原因で、                     */
/*   PC（52px / 42px = 1.24倍）では気づけませんでした。                */
/*                                                                    */
/*   直したあと：34px / 26px = 1.31倍（PCは 56 / 42 = 1.33倍）         */
/*   → 実体は .r-phero__title と .ranius .r-h2 の clamp() 側です。     */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* 2. 段の中の文章が1行60字（第2回からの持ち越し）                      */
/*                                                                    */
/*   実測（1280px）：.r-ladder__text 834px / 14px → 60字               */
/*                   .r-ladder__who  834px / 19px → 44字               */
/*   カードの箱そのものを細くすると段組みが崩れるので、                 */
/*   第2回の宿題どおり、中の文字側に上限を置きます。                    */
/*   和文の読みやすい行長は35〜45字。                                   */
/* ------------------------------------------------------------------ */
.ranius .r-ladder__text { max-width: 42em; }
.ranius .r-ladder__who  { max-width: 30em; }

/* ------------------------------------------------------------------ */
/* 3. スマホで、数字カードの左右の余白が 8px しかなかった               */
/*                                                                    */
/*   .r-stats--2 は900px以下で1列に落ちるので、375px では              */
/*   画面いっぱいの箱に左右8pxしか余白がない状態でした。               */
/*   （向こうのカードは幅335pxで内側24px）                              */
/*   2〜3列に並んでいるあいだだけ詰めればよいので、                     */
/*   1列に落ちたあとは戻します。                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 560px) {
	.ranius .r-stats--3 .r-stat,
	.ranius .r-stats--2 .r-stat { padding: 22px 18px; }
}

/* ------------------------------------------------------------------ */
/* 4. スマホのメニューの中で、唯一のボタンが 39px しかなかった          */
/*                                                                    */
/*   指で押す的は44px以上が目安です（同じメニューの中の                */
/*   ふつうのリンクは55pxありました。ボタンだけが小さい）。            */
/*   .r-btn--sm は上部の細いバーでも使うので、                          */
/*   メニューの中にあるときだけ大きくします。                           */
/* ------------------------------------------------------------------ */
.ranius .r-nav__cta .r-btn--sm {
	min-height: 46px;
	padding-top: 12px;
	padding-bottom: 12px;
}

/* メニューを開いているあいだ、うしろの本文を止める（JS が付ける印） */
html.r-nav-open,
html.r-nav-open body { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* 5. スマホで、表が切れているのに切れていると分からない                */
/*                                                                    */
/*   /product/ の比較表は最低660px、375px幅では画面の外まで伸びます。   */
/*   .r-tablewrap が overflow-x:auto なので横に動かせるのですが、       */
/*   スマホには常時見えるスクロールバーがないので、                     */
/*   読み手は「右が切れている」ことに気づけません。                     */
/*                                                                    */
/*   右端（左端）に影を出し、動かせることを見せます。                   */
/*   影は scroll、白い覆いは local に貼るので、端まで動かすと           */
/*   その側の影だけが自然に消えます。                                   */
/* ------------------------------------------------------------------ */
.ranius .r-tablewrap {
	background:
		linear-gradient(to right, var(--r-card) 40%, rgba(255, 255, 255, 0)) left center / 26px 100% no-repeat local,
		linear-gradient(to left, var(--r-card) 40%, rgba(255, 255, 255, 0)) right center / 26px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(46, 16, 101, .16), rgba(46, 16, 101, 0)) left center / 13px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(46, 16, 101, .16), rgba(46, 16, 101, 0)) right center / 13px 100% no-repeat scroll;
}

/* ------------------------------------------------------------------ */
/* 6. コントラストの積み残し2件（全16ページを1ページずつ実測）          */
/*                                                                    */
/*   第2回は /about/ /product/ /traction/ の3ページしか測っておらず、   */
/*   残りに2件残っていました。                                          */
/*                                                                    */
/*   ① 見出しの中の強調 .r-hi                                          */
/*      --r-gold-deep #B9862C は、淡い面の上で                          */
/*        --r-bg  #FDFBF7 → 3.12                                       */
/*        --r-card #FFFFFF → 3.23                                      */
/*        quiet   #F6F2EA → 2.89  ← 大きい文字の下限3.0にも届かない    */
/*      いちばん濃い淡色面（quiet）で落ちていたので気づきにくい形でした。*/
/*      #8A6118 にすると 4.94 / 5.34 / 5.52 で、                        */
/*      小さい文字でもAA（4.5）を満たします。金の印象は残ります。       */
/*      ボタンの hover と表の見出しは白地・色地なので、そのままです。   */
/*                                                                    */
/*   ② /research/ の Q1・Q2 カードの但し書き .r-card__source            */
/*      濃紫の帯に載っているのに、淡色面用の --r-sub #656B78 のまま     */
/*      だったので 2.38。研究者がいちばん先に読む2行です。              */
/*      濃い面用の --r-on-dark-sub にすると 6.90。                      */
/* ------------------------------------------------------------------ */
.ranius {
	--r-hi-on-light: #8A6118;
}
.ranius .r-h2 .r-hi,
.ranius .r-h3 .r-hi { color: var(--r-hi-on-light); }

.ranius .r-sec--dark .r-card__source,
.ranius .r-sec--brand .r-card__source,
.ranius .r-sec--dark .r-card__sub,
.ranius .r-sec--brand .r-card__sub { color: var(--r-on-dark-sub); }

/* ================================================================== */
/*  v4.5.0 — 余白の「配り方」を直す（第4回レビュー）                    */
/*                                                                    */
/*  1280px と 375px で、両サイトの computed style を並べた結果です。    */
/*  比較表は レビュー/2026-08-21_第4回レビュー.md にあります。          */
/*                                                                    */
/*  いちばん大きかったズレは、余白の「量」ではなく「配り方」でした。    */
/*                                                                    */
/*                        ともだちじゃぱん   Ranius(v4.4)              */
/*    節と節のあいだ         168px            136px                    */
/*    見出し → 中身           46px             16px                    */
/*    その比                  3.65倍           8.5倍                   */
/*                                                                    */
/*  向こうは「節の外は大きく、見出しの下も相応に」。                    */
/*  こちらは「節の外だけ大きく、見出しは中身に貼りついている」。        */
/*  だから同じ68pxを入れているのに、向こうより窮屈に見えていました。    */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* 1. 見出しと、その見出しが連れてくる中身の間隔                        */
/*                                                                    */
/*   向こうは 見出しの箱（小ラベル＋h2）ごと margin-bottom:46px で      */
/*   中身から離しています。こちらは h2 の下が16pxしかなく、             */
/*   リードが無い節では見出しがカードに貼りついていました。             */
/*                                                                    */
/*   h2 → 中身 を40pxにします。ただし h2 の直後がリードのときは、       */
/*   「小ラベル → h2 → リード」で1つの塊に見せたいので16pxのまま。      */
/*   隣接兄弟のマイナスマージンで戻します（40 + (-24) = 16）。          */
/*   ここは相殺の計算が確実に効く形なので、:has() は使いません。        */
/* ------------------------------------------------------------------ */
.ranius .r-h2 { margin-bottom: 40px; }
.ranius .r-h2 + .r-lead { margin-top: -24px; }
.ranius .r-sec > .r-wrap > .r-lead { margin-bottom: 40px; }

/* h3 も同じ考え方。上を広げて「ここから別の話」を作り、下も24pxに。 */
.ranius .r-h3 { margin: 56px 0 24px; }

/* ------------------------------------------------------------------ */
/* 2. 節の上下                                                         */
/*                                                                    */
/*   向こうは 68px の帯どうしのあいだに、さらに 32px の地の色が         */
/*   見えています（帯の margin-bottom）。実質168px。                    */
/*   こちらは帯が隙間なく接しているので、同じ68pxでも136px。            */
/*                                                                    */
/*   帯のあいだに隙間を作ると、濃紫の面のあいだに地の色の縞が出て       */
/*   別物になるので、上下の余白のほうを76pxにします（＝152px）。        */
/*   1で見出しの下を広げた分があるので、ここは向こうに寄せすぎません。  */
/* ------------------------------------------------------------------ */
.ranius .r-sec { padding: 76px 0; }
.ranius .r-phero { padding: 84px 0 72px; }

/* ------------------------------------------------------------------ */
/* 3. 1行の字数（第2回・第3回からの積み残し）                          */
/*                                                                    */
/*   実測（1280px・日本語）                                            */
/*     .r-sec 直下の .r-list li   996px / 14px   → 71字  ← 最悪        */
/*     .r-dim__q                  834px / 13.5px → 62字                */
/*     .r-dim__name               834px / 15.5px → 54字                */
/*     .r-role__lead              944px / 15.5px → 61字                */
/*     .r-bridge__link            996px / 15px   → 66字                */
/*                                                                    */
/*   和文で読みやすいのは35〜45字。向こうの本文は24〜34字です。         */
/*   カードの中のリストは箱の幅で決まるので触りません。                 */
/*   帯の直下に置かれたリストだけを対象にします。                       */
/* ------------------------------------------------------------------ */
.ranius .r-sec > .r-wrap > .r-list,
.ranius .r-sec > .r-wrap > .r-checklist { max-width: 46em; }
.ranius .r-dim__body { max-width: 44em; }
.ranius .r-role__lead { max-width: 42em; }
.ranius .r-bridge__link { max-width: 42em; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ */
/* 4. 数字カードの左右の余白                                           */
/*                                                                    */
/*   .r-stats--2 .r-stat は 26px 12px。向こうの数字カードは 26px 18px。 */
/*   375pxのときは第3回で18pxに直しましたが、PCのほうが12pxのまま       */
/*   残っていました。                                                  */
/* ------------------------------------------------------------------ */
.ranius .r-stats--2 .r-stat { padding: 26px 20px 22px; }

/* ------------------------------------------------------------------ */
/* 5. 画面が狭いとき（375px）                                          */
/*                                                                    */
/*   実測（375px）                                                     */
/*     ともだちじゃぱん  帯 52/52 ＋ 帯の下30px → 134px                */
/*     Ranius           帯 52/52 ＋ 隙間なし   → 104px                */
/*   見出しの下も、PCほどは要らないので32pxにします。                   */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.ranius .r-sec { padding: 58px 0; }
	.ranius .r-phero { padding: 60px 0 52px; }
	.ranius .r-h2 { margin-bottom: 32px; }
	.ranius .r-h2 + .r-lead { margin-top: -18px; }
	.ranius .r-sec > .r-wrap > .r-lead { margin-bottom: 32px; }
	.ranius .r-h3 { margin: 44px 0 20px; }
}

/* ------------------------------------------------------------------ */
/* 6. コントラスト（v4.5.0 で全16ページを測り直した結果）               */
/*                                                                    */
/*   第3回までは「面の背景色」だけを見て測っていたので、               */
/*   グラデーションの面に載っている文字を測れていませんでした。         */
/*   今回はグラデーションのいちばん明るい停止色を背景とみなして         */
/*   （＝最悪ケース）測り直しています。                                */
/*                                                                    */
/*   ① 金色の数字が、淡色面で 2.25。4回目の「金は淡色面で読めない」。  */
/*      濃い面では金のままにしたいので、淡色面だけ差し替えます。       */
/*   ② ○×の記号（r-mark）が 3.41 / 5.13。○のほうが落ちていました。   */
/*   ③ しくみページのモック3枚。写真の代わりに置いた色面の             */
/*      明るい側に白文字が乗っていて、黄緑の1枚は 1.51 でした。        */
/*      色面は残したいので、文字の下にだけ暗幕を敷きます。             */
/*   ④ 紫のグラデーション面（r-sec--brand）の明るい端 #5B21B6 では、   */
/*      金のラベルが 3.99。端を #4C1D95 まで落として 4.87 にします。   */
/* ------------------------------------------------------------------ */

/* ① 金色の数字 */
.ranius .r-hub__num,
.ranius .r-role__num,
.ranius .r-card__num { color: var(--r-hi-on-light); }

/* 濃い面のカード番号（/research/ の Q1・Q2）は金のまま */
.ranius .r-sec--dark .r-card__num,
.ranius .r-sec--brand .r-card__num { color: var(--r-gold); }

/* ② ○× の記号 */
.ranius { --r-ok: #12805A; --r-bad: #A82626; }

/* ③ しくみページのモック */
.ranius .r-mock__art::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 3, 28, .68) 0%, rgba(10, 3, 28, .34) 42%, rgba(10, 3, 28, 0) 76%);
	pointer-events: none;
}
.ranius .r-mock__kicker,
.ranius .r-mock__title { position: relative; z-index: 1; }
.ranius .r-mock__badge,
.ranius .r-mock__tag { background: rgba(10, 3, 28, .55); z-index: 1; }

/* ④ 紫のグラデーション面 */
.ranius .r-sec--brand {
	background: linear-gradient(150deg, var(--r-deep) 0%, #40157E 52%, #4C1D95 100%);
}

/* ------------------------------------------------------------------ */
/* 7. 濃い面の色（v4.5.1 の測り直しで出た残り）                        */
/*                                                                    */
/*   ⑤ ○×の記号を淡色面向けに濃くしたら、濃紫の面（/traction/ の      */
/*      「他とどう違うか」）で逆に読めなくなりました（1.91 / 2.52）。  */
/*      淡色面と濃色面で、同じ色は使えません。分けます。               */
/*                                                                    */
/*   ⑥ 金色の小ラベルが、紫のグラデーションの明るい端で 3.98。         */
/*      ラベルの下地が「金16%」なので、金の文字の下だけ背景が          */
/*      明るくなって、自分で自分を読みにくくしていました。             */
/*      濃い面のときだけ、金を一段明るい #E8BE6B に置き換えます。      */
/*      var(--r-gold) を面ごとに差し替えるので、その面の中の           */
/*      金色（ラベル・カード番号・観点コード・柱のチェック）が         */
/*      まとめて上がります。5.12〜8.71。                               */
/*      金を背景に使っている場所（ボタン・段の番号）は文字が濃色       */
/*      なので、明るくなるぶんには問題ありません。                     */
/*                                                                    */
/*   ⑦ 濃い面の出典が rgba(...,.8) で薄まって 4.33。透過をやめます。   */
/* ------------------------------------------------------------------ */

/* ⑤ ○× の記号は、面ごとに */
.ranius .r-sec--dark .r-mark--yes,
.ranius .r-sec--brand .r-mark--yes { color: #4ADE80; }
.ranius .r-sec--dark .r-mark--no,
.ranius .r-sec--brand .r-mark--no { color: #FCA5A5; }

/* ⑥ 濃い面の金 */
.ranius .r-sec--dark,
.ranius .r-sec--brand { --r-gold: #E8BE6B; }

/* ⑦ 濃い面の出典 */
.ranius .r-sec--dark .r-source,
.ranius .r-sec--brand .r-source { color: var(--r-on-dark-sub); }

/* ------------------------------------------------------------------ */
/* 8. 指で押す的の大きさ（375px で実測・第4回レビュー）                 */
/*                                                                    */
/*   第3回でメニューの中のボタンだけ46pxに直しましたが、               */
/*   測り直したら、まだ小さいものが2種類残っていました。               */
/*                                                                    */
/*     フッターのリンク8本    20px  ← ここがいちばん小さい             */
/*     メニューを開くボタン    42px                                    */
/*                                                                    */
/*   WCAG 2.2 の「対象の大きさ（最小）」は 24×24px、                   */
/*   iOS のヒューマンインターフェイスガイドラインは 44×44px。          */
/*   フッターは、スクロールしきった人が次に行く場所を選ぶところなので、 */
/*   ここが 20px なのはもったいないです。                              */
/*                                                                    */
/*   見た目の行間は変えたくないので、リンクの箱だけを縦に伸ばし、       */
/*   その分 ul の gap を詰めて、全体の高さがほぼ変わらないようにします。*/
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.ranius .r-foot ul { gap: 0; }
	.ranius .r-foot__nav a,
	.ranius .r-foot__org a,
	.ranius .r-foot__base a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
	.ranius .r-burger { width: 46px; height: 46px; }
}

/* ------------------------------------------------------------------ */
/* 9. .r-cards--2 が3列になっていた                                    */
/*                                                                    */
/*   repeat(auto-fit, minmax(300px, 1fr)) は、中身の幅996pxだと        */
/*   3*300 + 2*16 = 932px で3列が入ってしまいます。                    */
/*   /research/ の「測っているもの」「データの扱い」「ご提供できるもの」*/
/*   はどれも4枚なので、3枚＋1枚の欠けた並びになっていました。          */
/*   クラス名のとおり2列にして、4枚は2×2に収めます。                   */
/*   （--3 のほうは3枚ちょうどなので、そのままで正しく並びます）        */
/* ------------------------------------------------------------------ */
@media (min-width: 901px) {
	.ranius .r-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================== */
/*  v5 — 本体（nijin.co.jp）のデザイン言語に寄せる                       */
/*                                                                    */
/*  nijin.co.jp の実測値                                                */
/*    ヒーロー見出し : 104px / 950 / 字間 -0.075em                      */
/*    セクション見出し: 64px / 950 / 字間 -0.052em / 色 #151515          */
/*    キーワード     : グラデーションを文字に切り抜き                     */
/*    見出しの揃え   : 左（中央ではない）                                */
/*    セクション余白 : 112px                                            */
/*    コンテンツ幅   : 1296px                                           */
/*    カード        : 角丸28px / 枠 rgba(23,23,23,.08) /                */
/*                    影 0 18px 42px rgba(30,30,30,.07)                */
/*    リード        : 16px / 700 / 行間33 / 色 #66717E                  */
/*    ラベル        : 色文字・極太・字間広め（ピルではない）              */
/*                                                                    */
/*  ここまで作った「ともだちじゃぱん寄り」（中央揃え・42px・ピル）を      */
/*  上書きします。色はRaniusのまま。                                    */
/* ================================================================== */

.ranius {
	--r-wrap: 1296px;
	--r-wrap-narrow: 860px;
	--r-radius: 28px;
	--r-radius-sm: 18px;
	--r-ink: #151515;
	--r-ink-2: #66717E;
	--r-card-line: rgba(23, 23, 23, .08);
	--r-shadow-sm: 0 18px 42px rgba(30, 30, 30, .07);
	--r-shadow-md: 0 26px 60px rgba(30, 30, 30, .12);
	--r-font-display: "Noto Sans JP", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* ------------------------------------------------------------------ */
/* 見出しを、本体と同じ「極太・詰める・左揃え」にする                     */
/* ------------------------------------------------------------------ */

.ranius .r-hero__title,
.ranius .r-phero__title,
.ranius .r-h2,
.ranius .r-h3,
.ranius .r-vision__title,
.ranius .r-solution__name {
	font-family: var(--r-font-display);
	font-weight: 900;
	text-align: left;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.ranius .r-hero__title {
	font-size: clamp(40px, 7.4vw, 104px);
	line-height: 1.06;
	letter-spacing: -.055em;
}
.ranius .r-phero__title {
	font-size: clamp(34px, 5.4vw, 72px);
	line-height: 1.12;
	letter-spacing: -.05em;
}
.ranius .r-h2 {
	font-size: clamp(30px, 4.6vw, 64px);
	line-height: 1.16;
	letter-spacing: -.048em;
	color: var(--r-ink);
	margin-bottom: 24px;
}
.ranius .r-h3 {
	font-size: clamp(22px, 2.8vw, 34px);
	line-height: 1.28;
	letter-spacing: -.035em;
	color: var(--r-ink);
	margin: 56px 0 20px;
}
.ranius .r-h2--light,
.ranius .r-h3--light,
.ranius .r-sec--dark .r-h2,
.ranius .r-sec--dark .r-h3,
.ranius .r-sec--brand .r-h2,
.ranius .r-sec--brand .r-h3 { color: #fff; }

.ranius .r-vision__title {
	font-size: clamp(32px, 5vw, 68px);
	line-height: 1.18;
	letter-spacing: -.05em;
}

/* ------------------------------------------------------------------ */
/* キーワードをグラデーションで切り抜く。本体の「エモさ」の核             */
/* Raniusの色（紫 → 赤紫 → 金）で、本体とは別のブランドに見えるように     */
/* ------------------------------------------------------------------ */

.ranius .r-hi {
	background-image: linear-gradient(96deg, #6D28D9 0%, #C026D3 46%, #F0A429 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
/* 暗い面では、明るいほうに振る */
.ranius .r-sec--dark .r-hi,
.ranius .r-sec--brand .r-hi,
.ranius .r-hero .r-hi,
.ranius .r-phero .r-hi {
	background-image: linear-gradient(96deg, #C4B5FD 0%, #F0ABFC 45%, #FBBF24 100%);
}

/* ------------------------------------------------------------------ */
/* 中央揃えをやめて、左に戻す                                           */
/* ------------------------------------------------------------------ */

.ranius .r-sec > .r-wrap > .r-label,
.ranius .r-sec > .r-wrap > .r-lead,
.ranius .r-sec > .r-wrap > .r-kicker,
.ranius .r-sec > .r-wrap > .r-source,
.ranius .r-sec > .r-wrap > .r-scope,
.ranius .r-sec > .r-wrap > .r-legend,
.ranius .r-sec > .r-wrap > .r-note {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}
.ranius .r-sec--center > .r-wrap > * { text-align: center; margin-left: auto; margin-right: auto; }
.ranius .r-sec--center .r-h2,
.ranius .r-sec--center .r-vision__title { text-align: center; }

.ranius .r-stat,
.ranius .r-split__bar,
.ranius .r-pillar,
.ranius .r-steps__item,
.ranius .r-phase,
.ranius .r-diff__side,
.ranius .r-bridge__side { text-align: left; }
.ranius .r-steps__num,
.ranius .r-phase__num { margin-left: 0; margin-right: 0; }
.ranius .r-badges { justify-content: flex-start; }
.ranius .r-split__bars { justify-content: flex-start; }

/* ------------------------------------------------------------------ */
/* ラベルはピルをやめ、色文字にする（本体と同じ）                        */
/* ------------------------------------------------------------------ */

.ranius .r-label,
.ranius .r-page-hero__eyebrow {
	background: none;
	padding: 0;
	width: auto;
	display: block;
	font-family: var(--r-font-display);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .16em;
	color: var(--r-pri);
	margin-bottom: 18px;
}
.ranius .r-sec--dark .r-label,
.ranius .r-sec--brand .r-label,
.ranius .r-label--light,
.ranius .r-page-hero--brand .r-page-hero__eyebrow,
.ranius .r-page-hero--dark .r-page-hero__eyebrow { color: var(--r-gold); }

/* ------------------------------------------------------------------ */
/* リードと本文                                                        */
/* ------------------------------------------------------------------ */

.ranius .r-lead {
	font-size: 16px;
	font-weight: 700;
	line-height: 2.05;
	color: var(--r-ink-2);
	max-width: 44em;
	margin-bottom: 40px;
}
.ranius .r-sec--dark .r-lead,
.ranius .r-sec--brand .r-lead { color: var(--r-on-dark-sub); }

/* 締めの一文は、帯ではなく太い一行に戻す（本体は帯を使わない） */
.ranius .r-sec > .r-wrap > .r-kicker {
	background: none;
	border-left: 4px solid var(--r-gold);
	border-radius: 0;
	padding: 6px 0 6px 20px;
	max-width: 44em;
	margin-top: 44px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.85;
	color: var(--r-ink);
}
.ranius .r-sec--dark > .r-wrap > .r-kicker,
.ranius .r-sec--brand > .r-wrap > .r-kicker { color: #fff; background: none; }

/* ------------------------------------------------------------------ */
/* 面の余白とカード                                                     */
/* ------------------------------------------------------------------ */

.ranius .r-sec { padding: 112px 0; }
.ranius .r-phero { padding: 104px 0 92px; }

.ranius .r-card,
.ranius .r-stat--big,
.ranius .r-phase,
.ranius .r-ladder__step,
.ranius .r-bridge__side,
.ranius .r-role,
.ranius .r-privacy,
.ranius .r-mock__card,
.ranius a.r-hub__card,
.ranius a.r-next__link,
.ranius .ranius-dl {
	border-radius: var(--r-radius);
	border: .8px solid var(--r-card-line);
	box-shadow: var(--r-shadow-sm);
}
.ranius .r-card:not(.r-card--flat) { padding: 28px 26px; }

/* ------------------------------------------------------------------ */
/* ヒーローを、本体と同じくらい大きく                                    */
/* ------------------------------------------------------------------ */

.ranius .r-hero { padding: 128px 0 116px; }
.ranius .r-hero__sub {
	font-family: var(--r-font-display);
	font-size: clamp(19px, 2.4vw, 30px);
	font-weight: 900;
	letter-spacing: -.03em;
	margin-top: 6px;
}
.ranius .r-hero__lead { font-size: 16px; font-weight: 700; line-height: 2.05; max-width: 44em; }

@media (max-width: 900px) {
	.ranius .r-sec { padding: 64px 0; }
	.ranius .r-hero { padding: 76px 0 64px; }
	.ranius .r-phero { padding: 60px 0 52px; }
	.ranius .r-h3 { margin-top: 40px; }
	.ranius .r-sec > .r-wrap > .r-kicker { font-size: 17px; padding-left: 14px; }
	.ranius .r-card:not(.r-card--flat) { padding: 22px 20px; }
}

/* ================================================================== */
/*  v6 — 縦のリズムを設計しなおす                                       */
/*                                                                    */
/*  これまで要素ごとに margin を足してきた結果、                         */
/*  ヒーローは全部 0px、節の中は 40/44/56/20 とばらばらでした。          */
/*  「隣り合う要素の間」を一括で決め、例外だけ上書きします。              */
/*                                                                    */
/*  基準（8の倍数）                                                    */
/*    ラベル → 見出し      16                                          */
/*    見出し → リード      20                                          */
/*    リード → 中身        40                                          */
/*    中身  → 中身         40                                          */
/*    中身  → 締めの一文    48                                          */
/*    締め  → 出典         16                                          */
/*    リード → ボタン       32                                          */
/*    ボタン → 補足         18                                          */
/* ================================================================== */

/* ---- ヒーロー ---- */
.ranius .r-hero__inner > * { margin-top: 0; margin-bottom: 0; }
.ranius .r-hero__inner > * + * { margin-top: 20px; }
.ranius .r-hero__inner > .r-hero__title { margin-top: 26px; }
.ranius .r-hero__inner > .r-hero__sub { margin-top: 16px; }
.ranius .r-hero__inner > .r-hero__lead { margin-top: 18px; }
.ranius .r-hero__inner > .r-hero__cta { margin-top: 34px; }
.ranius .r-hero__inner > .r-reassure { margin-top: 18px; }
.ranius .r-hero__inner > .r-hero__byline { margin-top: 10px; }

/* ---- ページ見出しのヒーロー ---- */
.ranius .r-phero > .r-wrap > * { margin-top: 0; margin-bottom: 0; }
.ranius .r-phero > .r-wrap > * + * { margin-top: 20px; }
.ranius .r-phero > .r-wrap > .r-phero__title { margin-top: 18px; }

/* ---- 節の中 ---- */
.ranius .r-sec > .r-wrap > * { margin-top: 0; margin-bottom: 0; }
.ranius .r-sec > .r-wrap > * + * { margin-top: 40px; }

.ranius .r-sec > .r-wrap > .r-h2 { margin-top: 16px; }
.ranius .r-sec > .r-wrap > .r-lead { margin-top: 20px; }
.ranius .r-sec > .r-wrap > .r-h3 { margin-top: 56px; }
.ranius .r-sec > .r-wrap > .r-kicker { margin-top: 48px; }
.ranius .r-sec > .r-wrap > .r-source { margin-top: 16px; }
.ranius .r-sec > .r-wrap > .r-note { margin-top: 16px; }
.ranius .r-sec > .r-wrap > .r-legend { margin-top: 20px; }
.ranius .r-sec > .r-wrap > .r-scope { margin-top: 20px; }
.ranius .r-sec > .r-wrap > .r-hero__cta { margin-top: 36px; }
.ranius .r-sec > .r-wrap > .r-mail { margin-top: 24px; }
.ranius .r-sec > .r-wrap > .r-privacy { margin-top: 40px; }

/* 出典のすぐ後ろにまた中身が来る節（US・研究）は、間を戻す */
.ranius .r-sec > .r-wrap > .r-source + .r-h3 { margin-top: 56px; }

/* ---- カードの中 ---- */
.ranius .r-card > * { margin-top: 0; margin-bottom: 0; }
.ranius .r-card > * + * { margin-top: 10px; }
.ranius .r-card > .r-card__text { margin-top: 12px; }
.ranius .r-card > .r-card__source { margin-top: 18px; padding-top: 0; }
.ranius .r-card > .r-card__cta { margin-top: 18px; padding-top: 0; }
.ranius .r-card__icon { margin-bottom: 4px; }

/* ---- 職種のアコーディオンの中 ---- */
.ranius .r-role__body > * + * { margin-top: 20px; }
.ranius .r-role__lead { margin: 20px 0 0; }
.ranius .r-role__cols { margin-top: 24px; }
.ranius .r-role__cta { margin-top: 26px; }

/* ---- 資料ダウンロードのフォーム ---- */
.ranius .ranius-dl__form > * + * { margin-top: 20px; }
.ranius .ranius-dl__submit { margin-top: 26px; }
.ranius .ranius-dl__privacy { margin-top: 14px; }

/* ---- 画面が狭いとき ---- */
@media (max-width: 900px) {
	.ranius .r-sec > .r-wrap > * + * { margin-top: 28px; }
	.ranius .r-sec > .r-wrap > .r-h2 { margin-top: 14px; }
	.ranius .r-sec > .r-wrap > .r-lead { margin-top: 16px; }
	.ranius .r-sec > .r-wrap > .r-h3 { margin-top: 40px; }
	.ranius .r-sec > .r-wrap > .r-kicker { margin-top: 34px; }
	.ranius .r-hero__inner > .r-hero__cta { margin-top: 28px; }
}

/* ================================================================== */
/*  「Raniusとは」の節                                                  */
/* ================================================================== */

.r-what { }
.r-what__lede {
	font-family: var(--r-font-display);
	font-size: clamp(20px, 2.6vw, 30px);
	font-weight: 900;
	line-height: 1.7;
	letter-spacing: -.03em;
	color: var(--r-ink);
	max-width: 30em;
}
.r-what__body { font-size: 16px; font-weight: 500; line-height: 2.1; color: var(--r-ink-2); max-width: 44em; }

.r-what__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.r-what__item {
	background: #fff;
	border: .8px solid var(--r-card-line);
	border-radius: var(--r-radius);
	box-shadow: var(--r-shadow-sm);
	padding: 24px 22px;
}
.r-what__num {
	font-family: var(--r-font-en);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--r-gold-deep);
	display: block;
	margin-bottom: 8px;
}
.r-what__t { font-size: 17px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; color: var(--r-ink); }
.r-what__d { font-size: 13.5px; line-height: 1.85; color: var(--r-ink-2); }

/* 語源 */
.r-what__etym {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 20px 24px;
	border-radius: var(--r-radius);
	background: linear-gradient(96deg, rgba(109,40,217,.07), rgba(240,164,41,.10));
	font-size: 15px;
	font-weight: 700;
	color: var(--r-ink);
}
.r-what__etym b {
	font-family: var(--r-font-display);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.02em;
}

@media (max-width: 900px) {
	.r-what__item { padding: 20px 18px; }
	.r-what__etym { padding: 16px 18px; font-size: 14px; }
}

/* 「Raniusとは」節の中の縦リズム微調整 -------------------------------- */
.ranius .r-sec > .r-wrap > .r-what__lede { margin-top: 22px; }
.ranius .r-sec > .r-wrap > .r-what__body { margin-top: 22px; }
.ranius .r-sec > .r-wrap > .r-what__grid { margin-top: 44px; }
.ranius .r-sec > .r-wrap > .r-what__etym { margin-top: 36px; }
@media (max-width: 782px) {
	.ranius .r-sec > .r-wrap > .r-what__lede { margin-top: 18px; }
	.ranius .r-sec > .r-wrap > .r-what__body { margin-top: 18px; }
	.ranius .r-sec > .r-wrap > .r-what__grid { margin-top: 30px; }
}

/* ==================================================================== */
/* v7 — 左端をそろえる／見出しの行間／ロゴ                              */
/* ==================================================================== */

/* --- 1. すべての左端を、ヘッダーのロゴと同じ位置にそろえる ------------- */
/* ヒーローだけ内幅が 1120px で、他の節（1296px）より内側に入っていた。 */
.ranius .r-hero__inner { max-width: 1296px; }

/* 節の中身は中央寄せをやめて、すべて左そろえにする。
   ※ .ranius (0,1,0) を先頭に付けないと、既存の中央寄せ規則に負ける。 */
.ranius .r-sec > .r-wrap > .r-label,
.ranius .r-sec > .r-wrap > .r-h2,
.ranius .r-sec > .r-wrap > .r-lead,
.ranius .r-sec > .r-wrap > .r-h3,
.ranius .r-sec > .r-wrap > .r-kicker,
.ranius .r-sec > .r-wrap > .r-source,
.ranius .r-sec > .r-wrap > .r-scope,
.ranius .r-sec > .r-wrap > .r-legend,
.ranius .r-sec > .r-wrap > .r-note,
.ranius .r-sec--center > .r-wrap > * {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}
/* 見出しの下の金色の線も、中央からではなく左から引く */
.ranius .r-sec > .r-wrap > .r-label { margin-left: 0; }
.ranius .r-sec .r-h3,
.ranius .r-split .r-h3 { text-align: left; }
/* ボタンの並びも左そろえ */
.ranius .r-sec > .r-wrap > .r-hero__cta,
.ranius .r-sec > .r-wrap > .r-btns { justify-content: flex-start; margin-left: 0; }
/* 「次に読む」やフォームなど、幅を絞っている要素も左に置く */
.ranius .r-sec > .r-wrap > .r-lead,
.ranius .r-sec > .r-wrap > .r-note,
.ranius .r-sec > .r-wrap > .r-source { margin-right: auto; }

/* --- 2. 見出しの行間 -------------------------------------------------- */
/* line-height 1.16 は欧文用の数字で、和文だと 2 行目が 1 行目に食い込む。
   実測で 19px 重なっていたので、和文の字面に合わせて広げる。 */
.ranius .r-h2 { line-height: 1.34; }
.ranius .r-h2--xl,
.ranius .r-phero__title,
.ranius .r-hero__title { line-height: 1.26; }
.ranius .r-vision__title { line-height: 1.28; }

/* --- 3. 「Raniusとは」の6項目は 3列×2段に ---------------------------- */
.r-what__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .r-what__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .r-what__grid { grid-template-columns: 1fr; } }

/* --- 4. ロゴマーク ---------------------------------------------------- */
/* 中身が文字から SVG に変わったので、grid の中央寄せは要らなくなった。 */
.r-brand__mark {
	display: block;
	padding: 6px;
	color: #fff;
}
.r-brand--foot .r-brand__mark { --r-logo-core: #2E1065; color: #241505; }

/* ==================================================================== */
/* v8 — 3本柱／課題の節／ページ見出しの高さ                             */
/* ==================================================================== */

/* --- 1. 「Raniusとは」の3本柱は、横並びではなく縦にずらりと ----------- */
.r-what__rows { display: grid; gap: 0; }
.r-what__row {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 0 28px;
	align-items: start;
	padding: 34px 0;
	border-top: 1px solid #E8E2D6;
}
.r-what__row:last-child { border-bottom: 1px solid #E8E2D6; }
.ranius .r-what__num {
	font-family: var(--r-font-en);
	font-size: 40px; font-weight: 800; line-height: 1;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--r-pri);
	background: none;
}
.ranius .r-what__row .r-what__t {
	font-size: clamp(20px, 2.4vw, 27px);
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: -.02em;
	color: var(--r-ink);
	margin-bottom: 12px;
}
.ranius .r-what__row .r-what__d {
	font-size: 16px;
	font-weight: 500;
	line-height: 2.05;
	color: var(--r-ink-2);
	max-width: 46em;
}
@media (max-width: 700px) {
	.r-what__row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
	.ranius .r-what__num { font-size: 30px; }
}
.ranius .r-sec > .r-wrap > .r-what__rows { margin-top: 40px; }

/* --- 2. 課題の節（4人） ----------------------------------------------- */
.r-need { display: grid; gap: 18px; }
.r-need__card {
	background: #fff;
	border: 1px solid #E8E2D6;
	border-radius: 18px;
	padding: 28px 30px 26px;
	box-shadow: 0 2px 14px rgba(46, 16, 101, .04);
}
.ranius .r-need__who {
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: -.02em;
	color: var(--r-deep);
}
.ranius .r-need__case {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.8;
	color: var(--r-pri);
}
.r-need__pair {
	margin-top: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.r-need__side {
	border-radius: 12px;
	padding: 16px 18px 18px;
}
.r-need__side--now { background: #F6F3EC; }
.r-need__side--next { background: #F4EFFF; }
.ranius .r-need__tag {
	display: inline-block;
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800;
	letter-spacing: .12em;
	margin-bottom: 8px;
}
.r-need__side--now .r-need__tag { color: #8A7F6B; }
.r-need__side--next .r-need__tag { color: var(--r-pri); }
.ranius .r-need__side p {
	font-size: 14.5px;
	line-height: 1.95;
	color: var(--r-ink-2);
}
.ranius .r-need__side--next p { color: var(--r-ink); }
@media (max-width: 700px) {
	.r-need__card { padding: 22px 20px 20px; }
	.r-need__pair { grid-template-columns: 1fr; gap: 10px; }
}
.ranius .r-sec > .r-wrap > .r-need { margin-top: 36px; }

/* --- 3. ページ見出しの高さ ------------------------------------------- */
/* ともだちじゃぱんの下層ページは 668px（画面高の約72%）。
   Ranius は 413px しかなく、写真がほとんど見えていなかった。 */
.ranius .r-phero {
	min-height: clamp(400px, 62vh, 660px);
	display: flex;
	align-items: center;
}
.ranius .r-phero > .r-wrap { width: 100%; }
@media (max-width: 782px) {
	.ranius .r-phero { min-height: clamp(320px, 52vh, 460px); }
}

/* 出典・注記が 504px で折り返して窮屈だったので、読みやすい幅まで広げる */
.ranius .r-sec > .r-wrap > .r-source,
.ranius .r-sec > .r-wrap > .r-note { max-width: 62em; font-size: 12.5px; }
/* 見出しが「や（で始まるときに、左端が右にずれて見えるのを防ぐ */
.ranius .r-h2,
.ranius .r-phero__title,
.ranius .r-hero__title { hanging-punctuation: first last; }

/* ==================================================================== */
/* v9 — 課題を数と絵で見せる／戦略の3段                                  */
/* ==================================================================== */

/* --- 1. 大きな数字 ---------------------------------------------------- */
.r-figs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.r-fig {
	background: #fff;
	border: 1px solid #E8E2D6;
	border-radius: 20px;
	padding: 32px 32px 30px;
}
.ranius .r-fig__v {
	font-family: var(--r-font-en), var(--r-font-ja);
	font-size: clamp(44px, 6.6vw, 76px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -.05em;
	color: var(--r-pri);
}
.r-fig--gold .r-fig__v { color: var(--r-gold-deep); }
.ranius .r-fig__l {
	margin-top: 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--r-ink);
}
.ranius .r-fig__cap {
	margin-top: 16px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--r-ink-2);
}
.ranius .r-fig__cap b { color: var(--r-ink); font-weight: 800; }

/* 100個の点。58個が「辞めた先生の穴」 */
.r-fig__dots {
	margin-top: 22px;
	display: grid;
	grid-template-columns: repeat(20, 1fr);
	gap: 5px;
	max-width: 380px;
}
.r-fig__dots i {
	display: block;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #E6DFD1;
}
.r-fig__dots i.is-on { background: var(--r-pri); }

/* 10人のうち1人だけ色が付く＝通えている、ではなく「これだけ増え続けている」の目印 */
.r-fig__kids {
	margin-top: 22px;
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	max-width: 380px;
}
.r-fig__kids i {
	display: block;
	width: 22px; height: 22px;
	border-radius: 7px 7px 4px 4px;
	background: var(--r-gold);
}
.r-fig__kids i.is-off { background: #E6DFD1; }

@media (max-width: 860px) {
	.r-figs { grid-template-columns: 1fr; gap: 14px; }
	.r-fig { padding: 24px 22px 22px; }
}
.ranius .r-sec > .r-wrap > .r-figs { margin-top: 32px; }

/* --- 2. 4人のカード：見出しにアイコンを付ける ------------------------- */
.r-need__head {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 16px;
	align-items: start;
}
.r-need__badge {
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: 13px;
	background: var(--r-pri-soft, #F4EFFF);
	color: var(--r-pri);
}
.r-need__icon { width: 24px; height: 24px; }
@media (max-width: 700px) {
	.r-need__head { grid-template-columns: 38px 1fr; gap: 12px; }
	.r-need__badge { width: 38px; height: 38px; border-radius: 11px; }
	.r-need__icon { width: 20px; height: 20px; }
}

/* --- 3. 戦略の3段 ----------------------------------------------------- */
.r-road {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	list-style: none;
	counter-reset: none;
	padding: 0;
}
.r-road__step {
	position: relative;
	background: #fff;
	border: 1px solid #E8E2D6;
	border-radius: 18px;
	padding: 26px 26px 24px;
}
.r-road__step.is-now {
	border-color: var(--r-pri);
	box-shadow: 0 6px 26px rgba(46, 16, 101, .10);
}
/* 段と段のあいだの矢印 */
.r-road__step + .r-road__step::before {
	content: "";
	position: absolute;
	left: -13px; top: 50%;
	width: 9px; height: 9px;
	border-top: 2px solid #CFC5B2;
	border-right: 2px solid #CFC5B2;
	transform: translateY(-50%) rotate(45deg);
}
.r-road__head {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 14px;
}
.ranius .r-road__n {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: .14em;
	color: var(--r-pri);
}
.ranius .r-road__when {
	font-size: 11px; font-weight: 800; letter-spacing: .06em;
	padding: 3px 10px; border-radius: 999px;
	background: #F2EDE3; color: #7A6F5B;
}
.is-now .r-road__when { background: var(--r-pri); color: #fff; }
.ranius .r-road__t {
	font-size: 18px; font-weight: 800; line-height: 1.55;
	letter-spacing: -.02em; color: var(--r-deep);
}
.ranius .r-road__d {
	margin-top: 10px;
	font-size: 14.5px; line-height: 1.95; color: var(--r-ink-2);
}
.ranius .r-road__proof {
	margin-top: 14px; padding-top: 14px;
	border-top: 1px dashed #E0D8C7;
	font-size: 13.5px; font-weight: 700; line-height: 1.7;
	color: var(--r-pri);
}
.ranius .r-road__program {
	margin-top: 22px;
	font-size: 14px; font-weight: 700; line-height: 1.9;
	color: var(--r-ink);
}
@media (max-width: 860px) {
	.r-road { grid-template-columns: 1fr; gap: 26px; }
	.r-road__step + .r-road__step::before {
		left: 50%; top: -18px;
		transform: translateX(-50%) rotate(135deg);
	}
}
.ranius .r-sec > .r-wrap > .r-road { margin-top: 40px; }

/* 「7年連続で増加」は数の内訳ではなく向きだけなので、点ではなく矢印で示す */
.r-fig__kids { display: none; }
.ranius .r-fig__trend {
	margin-top: 22px;
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 16px 10px;
	border-radius: 999px;
	background: #FBF3DE;
	color: var(--r-gold-deep);
	font-size: 14px; font-weight: 800; letter-spacing: .01em;
}
.ranius .r-fig__trend span { font-size: 19px; line-height: 1; }

/* ==================================================================== */
/* v10 — 数字の組み／チーム／入口／関わり方／応募                       */
/* ==================================================================== */

/* --- 1. 大きな数字の組み ---------------------------------------------- */
.ranius .r-fig__tag {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: .14em;
	color: var(--r-pri);
	margin-bottom: 14px;
}
.r-fig--gold .r-fig__tag { color: var(--r-gold-deep); }
.ranius .r-fig__v {
	display: flex; align-items: baseline; gap: .12em;
	font-feature-settings: "tnum" 1, "palt" 0;
	font-variant-numeric: tabular-nums;
}
.ranius .r-fig__n {
	font-family: var(--r-font-en), var(--r-font-ja);
	font-size: clamp(52px, 7.4vw, 92px);
	font-weight: 900; line-height: .95;
	letter-spacing: -.055em;
}
.ranius .r-fig__u {
	font-family: var(--r-font-ja);
	font-size: clamp(20px, 2.2vw, 27px);
	font-weight: 800; line-height: 1;
	letter-spacing: -.01em;
}
.ranius--lang-en .r-fig__u { font-family: var(--r-font-en); font-weight: 700; }

/* --- 2. チーム -------------------------------------------------------- */
.r-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.r-team__card {
	background: #fff; border: 1px solid #E8E2D6; border-radius: 18px;
	padding: 26px 26px 24px;
}
.ranius .r-team__role {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: .14em;
	color: var(--r-pri); margin-bottom: 12px;
}
.ranius .r-team__name {
	font-size: 21px; font-weight: 800; line-height: 1.4;
	letter-spacing: -.02em; color: var(--r-deep);
}
.ranius .r-team__name span {
	display: block; margin-top: 4px;
	font-family: var(--r-font-en);
	font-size: 12px; font-weight: 600; letter-spacing: .04em;
	color: var(--r-sub);
}
.ranius .r-team__bio {
	margin-top: 14px;
	font-size: 14.5px; line-height: 1.95; color: var(--r-ink-2);
}
.ranius .r-team__gap {
	margin-top: 24px;
	padding: 20px 24px;
	border-radius: 14px;
	background: #F4EFFF;
	border: 1px dashed #C9B6F0;
	font-size: 15px; font-weight: 600; line-height: 1.9;
	color: var(--r-ink);
}
.ranius .r-team__gap strong { color: var(--r-pri); font-weight: 800; }
@media (max-width: 860px) { .r-team { grid-template-columns: 1fr; } }
.ranius .r-sec > .r-wrap > .r-team { margin-top: 36px; }

/* --- 3. 入口（採用・共同研究） ---------------------------------------- */
.r-gate { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ranius a.r-gate__card {
	display: block;
	background: #fff; border: 1px solid #E8E2D6; border-radius: 20px;
	padding: 32px 32px 30px;
	color: inherit; text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ranius a.r-gate__card:hover {
	transform: translateY(-3px);
	border-color: var(--r-pri);
	box-shadow: 0 12px 34px rgba(46, 16, 101, .12);
}
.ranius a.r-gate__card--research:hover { border-color: var(--r-gold-deep); }
.ranius .r-gate__kicker {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: .14em;
	color: var(--r-pri);
}
.ranius .r-gate__card--research .r-gate__kicker { color: var(--r-gold-deep); }
.ranius .r-gate__title {
	margin-top: 10px;
	font-size: clamp(24px, 3vw, 32px); font-weight: 800;
	line-height: 1.35; letter-spacing: -.035em; color: var(--r-deep);
}
.ranius .r-gate__text {
	margin-top: 14px;
	font-size: 15px; line-height: 1.95; color: var(--r-ink-2);
}
.r-gate__list { margin-top: 18px; padding: 0; list-style: none; display: grid; gap: 9px; }
.ranius .r-gate__list li {
	position: relative; padding-left: 20px;
	font-size: 14px; font-weight: 600; line-height: 1.8; color: var(--r-ink);
}
.ranius .r-gate__list li::before {
	content: ""; position: absolute; left: 2px; top: .72em;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--r-pri);
}
.ranius .r-gate__card--research .r-gate__list li::before { background: var(--r-gold); }
.ranius .r-gate__go {
	display: inline-block; margin-top: 22px;
	font-size: 14.5px; font-weight: 800; color: var(--r-pri);
}
.ranius .r-gate__card--research .r-gate__go { color: var(--r-gold-deep); }
@media (max-width: 860px) {
	.r-gate { grid-template-columns: 1fr; }
	.ranius a.r-gate__card { padding: 24px 22px 22px; }
}
.ranius .r-sec > .r-wrap > .r-gate { margin-top: 40px; }

/* --- 4. 関わり方の3つ -------------------------------------------------- */
.r-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.r-ways__card {
	background: #fff; border: 1px solid #E8E2D6; border-radius: 18px;
	padding: 26px 26px 24px;
	display: flex; flex-direction: column;
}
.r-ways__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	padding-bottom: 14px; margin-bottom: 16px;
	border-bottom: 1px solid #EFE9DD;
}
.ranius .r-ways__name {
	font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--r-deep);
}
.ranius .r-ways__time {
	font-size: 12px; font-weight: 800; letter-spacing: .04em;
	padding: 4px 11px; border-radius: 999px;
	background: #F4EFFF; color: var(--r-pri);
}
.ranius .r-ways__text {
	font-size: 14.5px; line-height: 1.95; color: var(--r-ink-2);
	flex: 1;
}
.ranius .r-ways__fit {
	margin-top: 16px; padding-top: 14px;
	border-top: 1px dashed #E0D8C7;
	font-size: 13.5px; font-weight: 700; line-height: 1.7; color: var(--r-pri);
}
@media (max-width: 860px) { .r-ways { grid-template-columns: 1fr; } }
.ranius .r-sec > .r-wrap > .r-ways { margin-top: 36px; }

/* --- 5. 応募フォームの入れ物 ------------------------------------------- */
.r-apply { max-width: 860px; }
.ranius .r-sec > .r-wrap > .r-apply { margin-top: 32px; }
.r-apply .ranius-dl { margin: 0; }

/* --- 6. 4人の顔写真 ---------------------------------------------------- */
.r-need__badge--photo {
	width: 56px; height: 56px;
	padding: 0; overflow: hidden; border-radius: 14px;
	background: #EFE9DD;
}
.r-need__badge--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-need__head:has(.r-need__badge--photo) { grid-template-columns: 56px 1fr; }
@media (max-width: 700px) {
	.r-need__badge--photo { width: 44px; height: 44px; border-radius: 12px; }
	.r-need__head:has(.r-need__badge--photo) { grid-template-columns: 44px 1fr; }
}

/* チームは「1人＋3つの現場」の4枚。3列だと1枚あぶれるので自動で折る */
.r-team { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ranius .r-team__name span { letter-spacing: .02em; font-weight: 700; color: var(--r-pri); }
.ranius .r-sec > .r-wrap > .r-team__note { margin-top: 16px; }
.ranius .r-sec > .r-wrap > .r-team__gap { margin-top: 24px; }
@media (max-width: 1100px) { .r-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .r-team { grid-template-columns: 1fr; } }

/* ==================================================================== */
/* v11 — 4人に顔写真／入口の言い換え                                    */
/* ==================================================================== */

/* 写真つきのカードは、左に写真・右に中身の2段組み */
.r-need__card--photo {
	display: grid;
	grid-template-columns: 232px 1fr;
	gap: 0;
	padding: 0;
	overflow: hidden;
}
.r-need__photo { position: relative; background: #EFE9DD; }
.r-need__photo img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 28%;
	display: block;
}
/* 写真の右端を、紙のようにわずかに沈ませる */
.r-need__photo::after {
	content: "";
	position: absolute; inset: 0;
	box-shadow: inset -14px 0 22px -14px rgba(46, 16, 101, .18);
}
.r-need__card--photo .r-need__body { padding: 28px 30px 26px; }
.r-need__card--photo .r-need__head { display: block; }

@media (max-width: 780px) {
	.r-need__card--photo { grid-template-columns: 1fr; }
	.r-need__photo { aspect-ratio: 16 / 7; }
	.r-need__photo::after { box-shadow: inset 0 -14px 22px -14px rgba(46, 16, 101, .18); }
	.r-need__card--photo .r-need__body { padding: 20px 20px 20px; }
}

/* ------------------------------------------------------------------ */
/* v11.1 — スマホでの折り返し                                          */
/* ------------------------------------------------------------------ */
/* 375px 幅では 30px の見出しが1行11文字しか入らず、
   「オンライン日本語スクール」（12文字）が「スクー／ル」で割れていた。
   word-break: auto-phrase でも、1語が行幅を超えると効かない。 */
@media (max-width: 430px) {
	.ranius .r-h2 { font-size: 27px; letter-spacing: -.04em; }
	.ranius .r-hero__title { font-size: 37px; }
	.ranius .r-phero__title { font-size: 30px; }
	.ranius .r-what__row .r-what__t { font-size: 19px; }
	.ranius .r-gate__title { font-size: 23px; }
	.ranius .r-btn { font-size: 14.5px; padding-left: 18px; padding-right: 18px; }
}

/* ==================================================================== */
/* v12 — しくみページ：誰に何が届くか／先生になるまでの工程             */
/* ==================================================================== */

/* --- 1. 誰に、何が届くか ---------------------------------------------- */
.r-fw { display: grid; gap: 0; }
.r-fw__row {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 0 40px;
	align-items: start;
	padding: 30px 0;
	border-top: 1px solid #E8E2D6;
}
.r-fw__row:last-child { border-bottom: 1px solid #E8E2D6; }
.r-fw__who { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; }
.r-fw__face {
	width: 64px; height: 64px;
	border-radius: 16px; overflow: hidden;
	background: #EFE9DD;
}
.r-fw__face img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.ranius .r-fw__name {
	font-size: 15.5px; font-weight: 800; line-height: 1.6;
	letter-spacing: -.01em; color: var(--r-deep);
}
.ranius .r-fw__part {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: .12em;
	color: var(--r-pri); margin-bottom: 10px;
}
.ranius .r-fw__text {
	font-size: 15.5px; font-weight: 500; line-height: 2.05;
	color: var(--r-ink-2); max-width: 44em;
}
@media (max-width: 860px) {
	.r-fw__row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
	.r-fw__who { grid-template-columns: 52px 1fr; gap: 13px; }
	.r-fw__face { width: 52px; height: 52px; border-radius: 13px; }
}
.ranius .r-sec > .r-wrap > .r-fw { margin-top: 40px; }

/* --- 2. 先生になるまでの工程 ------------------------------------------ */
.r-flow { list-style: none; padding: 0; display: grid; gap: 0; }
.r-flow__step {
	position: relative;
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: 0 32px;
	padding: 30px 0 32px;
	border-top: 1px solid #E0D8C7;
}
.r-flow__step:last-child { border-bottom: 1px solid #E0D8C7; }
/* 工程がつながっていることを、左の縦線で示す */
.r-flow__step::before {
	content: "";
	position: absolute;
	left: 21px; top: 62px; bottom: -1px;
	width: 2px;
	background: linear-gradient(180deg, var(--r-pri) 0%, rgba(109, 40, 217, .18) 100%);
}
.r-flow__step:last-child::before { display: none; }
.r-flow__mark { display: grid; gap: 12px; justify-items: start; }
.ranius .r-flow__n {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--r-pri); color: #fff;
	font-family: var(--r-font-en);
	font-size: 15px; font-weight: 800; letter-spacing: -.02em;
	position: relative; z-index: 1;
}
.ranius .r-flow__span {
	font-size: 12px; font-weight: 800; letter-spacing: .02em;
	color: var(--r-sub);
}
.ranius .r-flow__name {
	font-size: clamp(20px, 2.4vw, 26px); font-weight: 800;
	line-height: 1.4; letter-spacing: -.03em; color: var(--r-deep);
}
.ranius .r-flow__text {
	margin-top: 12px;
	font-size: 15.5px; line-height: 2.05; color: var(--r-ink-2); max-width: 44em;
}
.ranius .r-flow__gate {
	margin-top: 16px;
	font-size: 14px; font-weight: 700; line-height: 1.8; color: var(--r-ink);
}
.ranius .r-flow__gate span {
	display: inline-block; margin-right: 10px;
	font-family: var(--r-font-ui);
	font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
	padding: 3px 9px; border-radius: 999px;
	background: #F2EDE3; color: #7A6F5B;
	vertical-align: 2px;
}
.ranius .r-flow__ai {
	margin-top: 10px;
	font-size: 13.5px; font-weight: 700; line-height: 1.8; color: var(--r-pri);
}
@media (max-width: 700px) {
	.r-flow__step { grid-template-columns: 1fr; gap: 14px; padding: 24px 0 26px; }
	.r-flow__step::before { display: none; }
	.r-flow__mark { grid-auto-flow: column; align-items: center; gap: 12px; justify-content: start; }
	.ranius .r-flow__n { width: 38px; height: 38px; font-size: 13px; }
}
.ranius .r-sec > .r-wrap > .r-flow { margin-top: 40px; }

/* 工程の「1日」「約1〜2ヶ月」が、行の高さいっぱいに引き伸ばされて
   丸から離れて見えていた。上詰めにする。 */
.r-flow__mark { align-content: start; }

/* ------------------------------------------------------------------ */
/* v12.1 — 比較表をスマホでは積み上げる                                */
/* ------------------------------------------------------------------ */
/* 660px の表を 316px の枠で横スクロールさせると、いちばん見せたい
   「Ranius」の列が初期表示で画面の外に出てしまう。
   スマホでは表をやめて、1行を1枚のカードにする。 */
@media (max-width: 700px) {
	.r-tablewrap { overflow-x: visible; }
	.ranius .r-table { min-width: 0; }
	.ranius .r-table,
	.ranius .r-table tbody,
	.ranius .r-table tr,
	.ranius .r-table td,
	.ranius .r-table tbody th { display: block; width: auto; }
	.ranius .r-table thead { display: none; }
	.ranius .r-table tr {
		background: #fff;
		border: 1px solid #E8E2D6;
		border-radius: 16px;
		padding: 18px 18px 16px;
		margin-bottom: 12px;
	}
	.ranius .r-table tbody th {
		font-size: 17px; font-weight: 800; line-height: 1.5;
		letter-spacing: -.02em; color: var(--r-deep);
		text-align: left; padding: 0 0 12px; border: 0;
	}
	.ranius .r-table td {
		position: relative;
		padding: 12px 14px 13px 14px;
		border: 0; border-radius: 11px;
		font-size: 14px; line-height: 1.9;
	}
	.ranius .r-table td + td { margin-top: 9px; }
	.ranius .r-table td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--r-font-ui);
		font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
		margin-bottom: 6px;
	}
	.ranius .r-table td.r-table__old { background: #F6F3EC; color: var(--r-ink-2); }
	.ranius .r-table td.r-table__old::before { color: #8A7F6B; }
	.ranius .r-table td.r-table__new { background: #F4EFFF; color: var(--r-ink); }
	.ranius .r-table td.r-table__new::before { color: var(--r-pri); }
	.ranius .r-table .r-mark { margin-right: 7px; }
}

/* ==================================================================== */
/* v13 — 左端をそろえる（帯つきの段落）                                 */
/* ==================================================================== */
/* 見出し・本文・出典はすべて 54px から始まるのに、左に帯を持つ段落
   （.r-kicker / .r-scope）だけ、帯と内側余白のぶん 79px から始まって
   いた。帯を文字列の外に逃がして、文字の左端を他とそろえる。 */
.ranius .r-sec > .r-wrap > .r-kicker {
	margin-left: -24px;
	padding-left: 20px;
}
.ranius .r-sec > .r-wrap > .r-scope {
	margin-left: -22.4px;
	padding-left: 20px;
}
@media (max-width: 700px) {
	/* スマホは画面の端が近いので、はみ出させない */
	.ranius .r-sec > .r-wrap > .r-kicker,
	.ranius .r-sec > .r-wrap > .r-scope { margin-left: 0; }
}

/* 「現在地」— できていること／求めていること -------------------------- */
.r-now { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.r-now__col {
	background: #fff;
	border: 1px solid #E8E2D6;
	border-radius: 20px;
	padding: 30px 30px 28px;
}
.r-now__col--todo { background: #FBF9F4; border-color: #E0D2F5; }
.r-now__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.ranius .r-now__badge {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: .12em;
	padding: 6px 13px; border-radius: 999px;
	background: var(--r-pri); color: #fff;
}
.r-now__col--todo .r-now__badge { background: var(--r-gold-deep); }
.ranius .r-now__whose { font-size: 12.5px; font-weight: 700; color: var(--r-sub); }

.r-now__list, .r-now__q { list-style: none; padding: 0; display: grid; gap: 20px; }
.r-now__list li { display: grid; gap: 7px; }
.ranius .r-now__list strong {
	font-size: 19px; font-weight: 800; line-height: 1.45;
	letter-spacing: -.02em; color: var(--r-deep);
}
.ranius .r-now__list span { font-size: 14px; line-height: 1.95; color: var(--r-ink-2); }

.r-now__q li { padding-bottom: 18px; border-bottom: 1px dashed #E0D8C7; }
.r-now__q li:last-child { border-bottom: 0; padding-bottom: 0; }
.ranius .r-now__ask {
	font-size: 17px; font-weight: 800; line-height: 1.5;
	letter-spacing: -.02em; color: var(--r-deep);
}
.ranius .r-now__how { margin-top: 8px; font-size: 14px; line-height: 1.95; color: var(--r-ink-2); }
.ranius .r-now__how span {
	display: inline-block; margin-right: 8px;
	font-family: var(--r-font-ui);
	font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
	padding: 2px 8px; border-radius: 999px;
	background: #F2EDE3; color: #7A6F5B; vertical-align: 2px;
}
.ranius .r-now__foot { margin-top: 22px; font-size: 12.5px; line-height: 1.85; color: var(--r-sub); }
@media (max-width: 860px) {
	.r-now { grid-template-columns: 1fr; gap: 14px; }
	.r-now__col { padding: 24px 22px 22px; }
}
.ranius .r-sec > .r-wrap > .r-now { margin-top: 36px; }

/* ==================================================================== */
/* v14 — Contact Form 7 のフォームを、サイトの見た目にそろえる          */
/* ==================================================================== */
.r-cf7 {
	background: #fff;
	border: 1px solid #E8E2D6;
	border-radius: 20px;
	padding: 32px 32px 30px;
	box-shadow: 0 2px 14px rgba(46, 16, 101, .04);
}
.r-cf7__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.ranius .r-cf7 p { margin: 0; }
.ranius .r-cf7__f { display: grid; gap: 8px; }
.ranius .r-cf7__f--wide { margin-top: 18px !important; }
.ranius .r-cf7__f label {
	font-size: 13.5px; font-weight: 800; letter-spacing: .01em; color: var(--r-ink);
}
.ranius .r-cf7__f label span { color: #B4322F; margin-left: 2px; }

.ranius .r-cf7 input[type="text"],
.ranius .r-cf7 input[type="email"],
.ranius .r-cf7 textarea,
.ranius .r-cf7 select {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid #DED6C6;
	border-radius: 11px;
	background: #fff;
	font-size: 15px;
	font-family: inherit;
	color: inherit;
	line-height: 1.6;
}
.ranius .r-cf7 select {
	padding-right: 40px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B6252' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center;
	appearance: none;
	-webkit-appearance: none;
}
.ranius .r-cf7 textarea { resize: vertical; min-height: 130px; }
.ranius .r-cf7 input:focus,
.ranius .r-cf7 textarea:focus,
.ranius .r-cf7 select:focus {
	outline: none;
	border-color: var(--r-pri);
	box-shadow: 0 0 0 3px rgba(109, 40, 217, .14);
}
.ranius .r-cf7 .wpcf7-form-control-wrap { display: block; }

.ranius .r-cf7__privacy {
	margin-top: 20px !important;
	font-size: 12.5px; line-height: 1.9; color: var(--r-sub);
}
.ranius .r-cf7__submit { margin-top: 20px !important; }
.ranius .r-cf7 input[type="submit"] {
	appearance: none; -webkit-appearance: none;
	border: 0; cursor: pointer;
	padding: 16px 34px;
	border-radius: 999px;
	background: var(--r-gold);
	color: #241505;
	font-family: inherit;
	font-size: 15.5px; font-weight: 800; letter-spacing: .01em;
	box-shadow: 0 2px 8px rgba(46, 16, 101, .1);
	transition: transform .15s ease, box-shadow .15s ease;
}
.ranius .r-cf7 input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(46, 16, 101, .16);
}

/* CF7 が出す各種メッセージ */
.ranius .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #B4322F; }
.ranius .wpcf7-response-output {
	margin: 22px 0 0 !important;
	padding: 15px 18px !important;
	border: 0 !important;
	border-radius: 12px;
	font-size: 14px; font-weight: 700; line-height: 1.85;
	background: #F2EDE3; color: var(--r-ink);
}
.ranius .wpcf7 form.sent .wpcf7-response-output { background: #EDF7EE; color: #1F5B2A; }
.ranius .wpcf7 form.invalid .wpcf7-response-output,
.ranius .wpcf7 form.failed .wpcf7-response-output { background: #FBEDEC; color: #8E2622; }
.ranius .wpcf7-spinner { margin-left: 12px; }

@media (max-width: 700px) {
	.r-cf7 { padding: 22px 20px 20px; border-radius: 16px; }
	.r-cf7__grid { grid-template-columns: 1fr; gap: 16px; }
	.ranius .r-cf7 input[type="submit"] { width: 100%; }
}

/* ==================================================================== */
/* v15 — 左右の余白／ページ見出しの高さ                                 */
/* ==================================================================== */

/* --- 1. 本文の左右の余白 ---------------------------------------------- */
/* 22px だと、大きな画面で文字が左端に張り付いて見える。
   画面幅に応じて 22px → 64px まで広げる。 */
.ranius .r-wrap,
.ranius .r-hero__inner {
	padding-left: clamp(20px, 4.4vw, 64px);
	padding-right: clamp(20px, 4.4vw, 64px);
}

/* --- 2. ページ見出しを、もう少し縦に ---------------------------------- */
/* ともだちじゃぱんの下層ページは 668px。いまは 610px で、
   横長に見えるというご指摘。画面高の 72% を上限に引き上げる。 */
.ranius .r-phero { min-height: clamp(460px, 72vh, 700px); }
@media (max-width: 782px) {
	.ranius .r-phero { min-height: clamp(360px, 58vh, 520px); }
}

/* ------------------------------------------------------------------ */
/* v15.1 — 左右の余白を、もう一段広げる                                */
/* ------------------------------------------------------------------ */
/* 64px でもまだ詰まって見えるとのことなので、上限を 112px まで。
   あわせて本文の最大幅も少し絞り、1行が長くなりすぎないようにする。 */
.ranius .r-wrap,
.ranius .r-hero__inner {
	padding-left: clamp(22px, 6.6vw, 112px);
	padding-right: clamp(22px, 6.6vw, 112px);
	max-width: 1360px;
}
@media (max-width: 782px) {
	.ranius .r-wrap,
	.ranius .r-hero__inner {
		padding-left: 22px;
		padding-right: 22px;
	}
}

/* ==================================================================== */
/* v16 — 1週間の流れ／試作版で確かめていること／Q&Aカード               */
/* ==================================================================== */

/* --- 1. 1週間の流れ --------------------------------------------------- */
.r-week { list-style: none; padding: 0; display: grid; gap: 0; }
.r-week__step {
	position: relative;
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 0 32px;
	padding: 30px 0 32px;
	border-top: 1px solid #E0D8C7;
}
.r-week__step:last-child { border-bottom: 1px solid #E0D8C7; }
.r-week__when { display: grid; gap: 8px; align-content: start; }
.ranius .r-week__day {
	display: inline-block; width: fit-content;
	padding: 7px 16px; border-radius: 999px;
	background: var(--r-deep); color: #fff;
	font-size: 14px; font-weight: 800; letter-spacing: .02em;
}
.ranius .r-week__len { font-size: 12.5px; font-weight: 700; color: var(--r-sub); }
.ranius .r-week__name {
	font-size: clamp(20px, 2.4vw, 26px); font-weight: 800;
	line-height: 1.4; letter-spacing: -.03em; color: var(--r-deep);
}
.ranius .r-week__text {
	margin-top: 12px;
	font-size: 15.5px; line-height: 2.05; color: var(--r-ink-2); max-width: 44em;
}
.ranius .r-week__text strong { color: var(--r-ink); font-weight: 800; }
.ranius .r-week__why {
	margin-top: 16px;
	font-size: 14px; line-height: 1.95; color: var(--r-ink-2); max-width: 44em;
}
.ranius .r-week__why span {
	display: inline-block; margin-right: 9px;
	font-family: var(--r-font-ui);
	font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
	padding: 3px 9px; border-radius: 999px;
	background: #F2EDE3; color: #7A6F5B; vertical-align: 2px;
}
/* AIが返すものの例 —— 端末の画面のように見せる */
.r-week__sample {
	margin-top: 18px;
	max-width: 44em;
	background: #1E0A42;
	border-radius: 14px;
	padding: 18px 20px 16px;
}
.ranius .r-week__sample-h {
	font-family: var(--r-font-ui);
	font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
	color: var(--r-gold); margin-bottom: 12px;
}
.ranius .r-week__line {
	display: grid; grid-template-columns: 74px 1fr; gap: 12px;
	padding: 7px 0;
	font-size: 13.5px; line-height: 1.8;
}
.ranius .r-week__line + .r-week__line { border-top: 1px solid rgba(255,255,255,.08); }
.ranius .r-week__line b {
	font-family: var(--r-font-en);
	font-weight: 700; color: var(--r-gold); letter-spacing: .02em;
}
.ranius .r-week__line span { color: rgba(255,255,255,.86); }
@media (max-width: 700px) {
	.r-week__step { grid-template-columns: 1fr; gap: 14px; padding: 24px 0 26px; }
	.r-week__when { grid-auto-flow: column; align-items: center; justify-content: start; gap: 12px; }
	.ranius .r-week__line { grid-template-columns: 62px 1fr; gap: 9px; font-size: 13px; }
}
.ranius .r-sec > .r-wrap > .r-week { margin-top: 40px; }

/* --- 2. よく聞かれること（Q&Aカード） --------------------------------- */
.r-note-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.r-note-card {
	background: #fff;
	border: 1px solid #E8E2D6;
	border-radius: 18px;
	padding: 26px 28px 24px;
}
.ranius .r-note-card__q {
	font-size: 17px; font-weight: 800; line-height: 1.5;
	letter-spacing: -.02em; color: var(--r-deep);
	padding-left: 26px; position: relative;
}
.ranius .r-note-card__q::before {
	content: "Q";
	position: absolute; left: 0; top: .05em;
	font-family: var(--r-font-en);
	font-size: 15px; font-weight: 800; color: var(--r-pri);
}
.ranius .r-note-card__a {
	margin-top: 12px;
	font-size: 14.5px; line-height: 2; color: var(--r-ink-2);
}
.ranius .r-note-card__a strong { color: var(--r-ink); font-weight: 800; }
@media (max-width: 860px) { .r-note-cards { grid-template-columns: 1fr; } }
.ranius .r-sec > .r-wrap > .r-note-cards { margin-top: 32px; }

/* --- 3. 試作版で確かめていること（3列） ------------------------------- */
.r-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.r-plan__col {
	background: #fff;
	border: 1px solid #E8E2D6;
	border-radius: 18px;
	padding: 26px 26px 24px;
}
.r-plan__col--test { border-color: var(--r-pri); box-shadow: 0 6px 26px rgba(46, 16, 101, .10); }
.r-plan__head { display: grid; gap: 7px; margin-bottom: 20px; }
.ranius .r-plan__badge {
	width: fit-content;
	font-family: var(--r-font-ui);
	font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
	padding: 6px 13px; border-radius: 999px;
	background: #F2EDE3; color: #7A6F5B;
}
.r-plan__col--next .r-plan__badge { background: #FBF3DE; color: var(--r-gold-deep); }
.r-plan__col--test .r-plan__badge { background: var(--r-pri); color: #fff; }
.ranius .r-plan__when { font-size: 12px; font-weight: 700; color: var(--r-sub); }
.r-plan__list { list-style: none; padding: 0; display: grid; gap: 14px; }
.ranius .r-plan__list li {
	position: relative; padding-left: 19px;
	font-size: 14px; line-height: 1.95; color: var(--r-ink-2);
}
.ranius .r-plan__list li::before {
	content: ""; position: absolute; left: 2px; top: .78em;
	width: 6px; height: 6px; border-radius: 50%; background: #CFC5B2;
}
.r-plan__col--test .r-plan__list li::before { background: var(--r-pri); }
.ranius .r-plan__list strong { color: var(--r-ink); font-weight: 800; }
@media (max-width: 900px) { .r-plan { grid-template-columns: 1fr; } }
.ranius .r-sec > .r-wrap > .r-plan { margin-top: 36px; }

/* ==================================================================== */
/* v17 — 実績の中身／市場の内訳／左右の余白をさらに                     */
/* ==================================================================== */

/* --- 1. 左右の余白 ---------------------------------------------------- */
/* 112px でもまだ足りないとのことなので、上限 160px まで。
   本文が伸びすぎないよう、内側の最大幅もあわせて調整する。 */
.ranius .r-wrap,
.ranius .r-hero__inner {
	padding-left: clamp(22px, 9vw, 160px);
	padding-right: clamp(22px, 9vw, 160px);
	max-width: 1440px;
}
@media (max-width: 900px) {
	.ranius .r-wrap,
	.ranius .r-hero__inner { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 640px) {
	.ranius .r-wrap,
	.ranius .r-hero__inner { padding-left: 22px; padding-right: 22px; }
}

/* --- 2. 実績の中身 ---------------------------------------------------- */
.r-proof { display: grid; gap: 0; }
.r-proof__row {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 0 44px;
	align-items: start;
	padding: 32px 0 34px;
	border-top: 1px solid #E0D8C7;
}
.r-proof__row:last-child { border-bottom: 1px solid #E0D8C7; }
.ranius .r-proof__v {
	font-family: var(--r-font-en), var(--r-font-ja);
	font-size: clamp(34px, 4.4vw, 54px);
	font-weight: 900; line-height: 1; letter-spacing: -.05em;
	color: var(--r-pri);
}
.r-proof__row.is-missing .r-proof__v { color: #B9AE99; }
.ranius .r-proof__l {
	margin-top: 10px;
	font-size: 13px; font-weight: 700; line-height: 1.75; color: var(--r-sub);
}
.ranius .r-proof__t {
	font-size: clamp(19px, 2.2vw, 24px); font-weight: 800;
	line-height: 1.5; letter-spacing: -.03em; color: var(--r-deep);
}
.r-proof__row.is-missing .r-proof__t { color: #7A6F5B; }
.ranius .r-proof__d {
	margin-top: 12px;
	font-size: 15.5px; line-height: 2.05; color: var(--r-ink-2); max-width: 44em;
}
.ranius .r-proof__d strong { color: var(--r-ink); font-weight: 800; }
@media (max-width: 860px) {
	.r-proof__row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0 28px; }
}
.ranius .r-sec > .r-wrap > .r-proof { margin-top: 40px; }

/* --- 3. 市場の3段 ----------------------------------------------------- */
.ranius .r-tam__size {
	font-family: var(--r-font-en), var(--r-font-ja);
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 900; line-height: 1.05; letter-spacing: -.05em;
	color: var(--r-deep);
	margin-bottom: 10px;
}
.ranius .r-tam__kind {
	font-size: 12.5px; line-height: 1.8; color: var(--r-sub);
	padding-bottom: 16px; margin-bottom: 16px;
	border-bottom: 1px dashed #E0D8C7;
}
.ranius .r-tam__kind span {
	display: inline-block; margin-right: 8px;
	font-family: var(--r-font-ui);
	font-size: 10px; font-weight: 800; letter-spacing: .1em;
	padding: 3px 8px; border-radius: 999px;
	background: #EDF3ED; color: #2F6B3A; vertical-align: 1px;
}
.r-plan__col--test .r-tam__kind span { background: #FBF3DE; color: var(--r-gold-deep); }

/* ------------------------------------------------------------------ */
/* v17.1 — 共同研究ページを、他のページと同じ組み方に                   */
/* ------------------------------------------------------------------ */
/* 濃紺と紫が交互に続く古い組み方をやめて、白地・カードにそろえたので、
   そこで使っていた部品の色を明るい背景用に定義し直す。 */
.r-note-card--plain { background: #FBF9F4; }
.ranius .r-note-card--plain .r-note-card__q { padding-left: 0; }
.ranius .r-note-card--plain .r-note-card__q::before { content: none; }
.ranius .r-note-card__s {
	margin-top: 12px; padding-top: 12px;
	border-top: 1px dashed #E0D8C7;
	font-size: 12px; line-height: 1.85; color: var(--r-sub);
}
/* 観点の一覧と、約束の一覧 */
.ranius .r-dim { border-color: #E8E2D6; }
.ranius .r-dim__code { background: #F4EFFF; color: var(--r-pri); }
.ranius .r-dim__name { color: var(--r-deep); }
.ranius .r-dim__q, .ranius .r-dim__by { color: var(--r-ink-2); }
.ranius .r-sec:not(.r-sec--dark):not(.r-sec--brand) .r-list--check li { color: var(--r-ink-2); }
.ranius .r-sec > .r-wrap > .r-dims,
.ranius .r-sec > .r-wrap > .r-list { margin-top: 24px; }

/* ================================================================== */
/* v17.2 — /en/research/ 研究者向けプロトコルページ                    */
/* ================================================================== */
/* 読者は教授・測定の専門家・共同研究の候補者の3人だけです。
   ここでの判断：
     - 写真を置かない。ヒーローも子どもの笑顔も出しません
     - 設計は表。査読者は散文ではなく表を探します
     - 未確定（.r-rp-tbd）は琥珀色ではっきり見せる。隠すと信用を失います
     - 図は1枚だけ。狭い画面では縮めずに横スクロールさせます
   セレクタは .ranius を前に置いて、既存の .ranius .r-h2 などに
   負けないようにしてあります（このファイルの他の節と同じ作法）。 */

.ranius .r-rp-top {
	background: var(--r-bg-2);
	border-bottom: 1px solid var(--r-line);
	padding: 40px 0 46px;
}

.ranius .r-rp-crumb {
	font-family: var(--r-font-ui);
	font-size: 12px; font-weight: 700;
	color: var(--r-sub);
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 18px;
}
.ranius .r-rp-crumb a { color: var(--r-pri); }

.ranius .r-rp-eyebrow {
	font-family: var(--r-font-ui);
	font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--r-pri);
	margin-bottom: 12px;
}

.ranius .r-rp-title {
	font-family: var(--r-font-en);
	font-size: clamp(27px, 3.9vw, 42px);
	line-height: 1.24; letter-spacing: -.02em;
	color: var(--r-ink);
	max-width: 20em;
	margin: 0 0 26px;
	text-wrap: balance;
}

/* ファーストビューの3行。何を・いつ・何を求めているか。 */
.ranius .r-rp-three {
	border-top: 1px solid var(--r-line-strong);
	max-width: 84ch;
}
.ranius .r-rp-three__row {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 0 26px;
	padding: 15px 0;
	border-bottom: 1px solid var(--r-line);
}
.ranius .r-rp-three dt {
	font-family: var(--r-font-ui);
	font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--r-sub);
	padding-top: 4px;
}
.ranius .r-rp-three dd {
	margin: 0;
	font-size: 16.5px; line-height: 1.62; color: var(--r-ink-2);
}
.ranius .r-rp-three dd strong { color: var(--r-ink); font-weight: 700; }

.ranius .r-rp-note {
	margin-top: 20px;
	font-size: 14px; line-height: 1.7; color: var(--r-sub);
	max-width: 80ch;
}

.ranius .r-rp-jump {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: 22px;
}
.ranius .r-rp-jump a {
	font-family: var(--r-font-ui);
	font-size: 12.5px; font-weight: 700;
	color: var(--r-ink-2);
	background: var(--r-card);
	border: 1px solid var(--r-line-strong);
	border-radius: 999px;
	padding: 6px 14px;
}
.ranius .r-rp-jump a:hover {
	text-decoration: none;
	border-color: var(--r-pri); color: var(--r-pri);
}

.ranius .r-rp-stamp {
	margin-top: 20px;
	font-size: 12.5px; line-height: 1.75; color: var(--r-sub);
	max-width: 84ch;
}

/* 節 ------------------------------------------------------------- */

.ranius .r-rp-sec { padding: 62px 0; }
.ranius .r-rp-sec--quiet { background: var(--r-bg-2); }

.ranius .r-rp-label {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: var(--r-pri);
	margin-bottom: 10px;
}

.ranius .r-rp-h2 {
	font-family: var(--r-font-en);
	font-size: clamp(23px, 2.7vw, 31px);
	line-height: 1.3; letter-spacing: -.018em;
	color: var(--r-ink);
	max-width: 26em;
	margin-bottom: 18px;
}

.ranius .r-rp-h3 {
	font-family: var(--r-font-ui);
	font-size: 13px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; color: var(--r-sub);
	margin: 40px 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--r-line-strong);
}

/* 一文で言い切るところ。ページで一番読ませたい文です。 */
.ranius .r-rp-oneline {
	font-family: var(--r-font-en);
	font-size: 19.5px; line-height: 1.58; color: var(--r-ink);
	border-left: 3px solid var(--r-gold);
	padding-left: 18px;
	max-width: 62ch;
	margin-bottom: 22px;
}

.ranius .r-rp-body {
	font-size: 16px; line-height: 1.75; color: var(--r-ink-2);
	max-width: 74ch;
	margin-bottom: 20px;
}
.ranius .r-rp-body strong { color: var(--r-ink); }

.ranius .r-rp-aside {
	margin-top: 14px;
	font-size: 12.5px; line-height: 1.75; color: var(--r-sub);
	max-width: 88ch;
}

.ranius .r-rp-close {
	margin-top: 26px;
	font-size: 16.5px; line-height: 1.7; font-weight: 700;
	color: var(--r-deep);
	max-width: 62ch;
}

.ranius .r-rp-sources {
	margin-top: 40px; padding-top: 18px;
	border-top: 1px solid var(--r-line);
	font-size: 11.5px; line-height: 1.8; color: var(--r-sub);
}

/* 未確定の印 ------------------------------------------------------ */
/* ★ この琥珀色を薄くしないこと。読者はここを探しています。
   「決めたふり」だけが致命傷で、未定を出すのは弱点ではありません。 */
.ranius .r-rp-tbd {
	display: inline-block;
	font-family: var(--r-font-ui);
	font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
	text-transform: uppercase;
	color: #7A4E00;
	background: #FBF0D9;
	border: 1px solid var(--r-warn);
	border-radius: 3px;
	padding: 2px 7px;
	margin-left: 6px;
	vertical-align: 2px;
	white-space: nowrap;
}

/* 表 -------------------------------------------------------------- */
/* 狭い画面では縮めずに横へスクロールさせます。字を潰さないため。 */
.ranius .r-rp-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--r-line-strong);
	border-radius: var(--r-radius-sm);
	background: var(--r-card);
}
.ranius .r-rp-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.65;
	text-align: left;
}
.ranius .r-rp-table thead th {
	font-family: var(--r-font-ui);
	font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
	text-transform: uppercase; color: var(--r-sub);
	background: var(--r-bg-2);
	border-bottom: 1px solid var(--r-line-strong);
	padding: 11px 16px;
}
.ranius .r-rp-table tbody th {
	font-weight: 700;
	color: var(--r-ink);
	width: 210px;
	vertical-align: top;
	padding: 14px 16px;
	border-bottom: 1px solid var(--r-line);
	border-right: 1px solid var(--r-line);
}
.ranius .r-rp-table tbody td {
	color: var(--r-ink-2);
	vertical-align: top;
	padding: 14px 18px;
	border-bottom: 1px solid var(--r-line);
}
.ranius .r-rp-table tbody td strong { color: var(--r-ink); }
.ranius .r-rp-table tbody tr:last-child th,
.ranius .r-rp-table tbody tr:last-child td { border-bottom: 0; }

/* 未確定の行は、行ごと琥珀に寄せる。飛ばし読みでも見つかるように。 */
.ranius .r-rp-table tbody tr.is-tbd th,
.ranius .r-rp-table tbody tr.is-tbd td { background: #FDF9EF; }
.ranius .r-rp-table tbody tr.is-tbd th { box-shadow: inset 3px 0 0 var(--r-warn); }

.ranius .r-rp-table--dims { min-width: 680px; }
.ranius .r-rp-table--dims tbody th { width: 64px; }

.ranius .r-rp-code {
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: 12px; font-weight: 700;
	color: var(--r-pri);
	background: var(--r-pri-soft);
	border-radius: 3px;
	padding: 2px 7px;
}
.ranius .r-rp-by {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--r-sub);
	white-space: nowrap;
}

/* 図 -------------------------------------------------------------- */

.ranius .r-rp-figure { margin: 44px 0 0; }
.ranius .r-rp-figure__head {
	display: flex; flex-direction: column; gap: 4px;
	margin-bottom: 12px;
}
.ranius .r-rp-figure__title {
	font-family: var(--r-font-en);
	font-size: 18px; line-height: 1.45; color: var(--r-ink);
}
.ranius .r-rp-figure__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--r-line-strong);
	border-radius: var(--r-radius-sm);
	background: #fff;
}
.ranius .r-rp-fig {
	display: block;
	width: 920px;
	max-width: 100%;
	height: auto;
}
.ranius .r-rp-figure__cap {
	margin-top: 12px;
	font-size: 13px; line-height: 1.7; color: var(--r-ink-2);
	max-width: 74ch;
}
.ranius .r-rp-figure__hint {
	margin-top: 6px;
	font-size: 11.5px; color: var(--r-sub);
}

/* 図のなかの字。SVG に style 要素を書くとページ全体に漏れるので、
   ここにまとめてあります。 */
.ranius .r-rp-fig .rpf-box { fill: #FFFFFF; stroke: var(--r-line-strong); stroke-width: 1; }
.ranius .r-rp-fig .rpf-band { fill: var(--r-bg-2); stroke: var(--r-line-strong); stroke-width: 1; }
.ranius .r-rp-fig .rpf-tbd { fill: #FDF4E3; stroke: var(--r-warn); stroke-width: 1; }
.ranius .r-rp-fig .rpf-arrow { stroke: #8F8A97; stroke-width: 1.4; fill: none; }
.ranius .r-rp-fig .rpf-h { font-family: var(--r-font-en); font-size: 15px; font-weight: 700; fill: var(--r-ink); }
.ranius .r-rp-fig .rpf-t { font-family: var(--r-font-ui); font-size: 13px; fill: var(--r-ink-2); }
.ranius .r-rp-fig .rpf-s { font-family: var(--r-font-ui); font-size: 11.5px; fill: var(--r-sub); }
.ranius .r-rp-fig .rpf-lbl {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 700; letter-spacing: .08em; fill: var(--r-sub);
}
.ranius .r-rp-fig .rpf-mono {
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: 11.5px; fill: var(--r-ink-2);
}
.ranius .r-rp-fig .rpf-tbdtx { font-family: var(--r-font-ui); font-size: 12px; fill: #7A4E00; }
.ranius .r-rp-fig .rpf-tbdlb {
	font-family: var(--r-font-ui);
	font-size: 10px; font-weight: 700; letter-spacing: .09em; fill: #7A4E00;
}

/* いま欠けているもの ---------------------------------------------- */
/* ★ 弱点の告白ではなく、共著者への招待状です。目立たせること。 */

.ranius .r-rp-sec--gap {
	background: #FFFCF5;
	border-top: 2px solid var(--r-warn);
	border-bottom: 1px solid var(--r-line);
}
.ranius .r-rp-label--gap { color: #8A5A00; }

.ranius .r-rp-gaps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	background: #EFE3C9;
	border: 1px solid #EFE3C9;
	border-radius: var(--r-radius-sm);
	overflow: hidden;
	margin-top: 26px;
}
.ranius .r-rp-gaps li { background: #fff; padding: 18px 20px; }
.ranius .r-rp-gaps__n {
	font-family: var(--r-font-ui);
	font-size: 14px; font-weight: 800; color: #7A4E00;
	margin-bottom: 6px;
}
.ranius .r-rp-gaps__t { font-size: 14px; line-height: 1.7; color: var(--r-ink-2); }

/* 実機で観測した値。主張ではなく現物。 --------------------------- */

.ranius .r-rp-ev {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 26px 0 0;
}
.ranius .r-rp-ev li {
	background: var(--r-card);
	border: 1px solid var(--r-line-strong);
	border-radius: var(--r-radius-sm);
	padding: 16px 16px 14px;
}
.ranius .r-rp-ev__v {
	display: block;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: 16px; font-weight: 700; line-height: 1.35;
	color: var(--r-deep);
	word-break: break-word;
	margin-bottom: 6px;
}
.ranius .r-rp-ev__t {
	display: block;
	font-size: 12.5px; line-height: 1.6; color: var(--r-sub);
}

/* 実装の一覧・データの一覧・連絡先の一覧 -------------------------- */

.ranius .r-rp-rules {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.ranius .r-rp-rules li {
	background: var(--r-card);
	border: 1px solid var(--r-line);
	border-left: 3px solid var(--r-line-strong);
	border-radius: var(--r-radius-sm);
	padding: 16px 18px;
}
.ranius .r-rp-rules li.is-tbd {
	border-left-color: var(--r-warn);
	background: #FDF9EF;
}
.ranius .r-rp-rules__n {
	font-size: 15px; font-weight: 700; line-height: 1.5;
	color: var(--r-ink);
	margin-bottom: 6px;
}
.ranius .r-rp-rules__t {
	font-size: 14px; line-height: 1.72; color: var(--r-ink-2);
}
.ranius .r-rp-rules__t strong { color: var(--r-ink); }

.ranius .r-rp-caveats { display: grid; gap: 14px; }
.ranius .r-rp-caveats li {
	border-left: 3px solid var(--r-warn);
	background: #FDF9EF;
	border-radius: var(--r-radius-sm);
	padding: 16px 18px;
}
.ranius .r-rp-caveats__n {
	font-size: 15px; font-weight: 700; color: #7A4E00;
	margin-bottom: 6px;
}
.ranius .r-rp-caveats__t { font-size: 14px; line-height: 1.72; color: var(--r-ink-2); }

.ranius .r-rp-cta {
	display: flex; flex-wrap: wrap; gap: 12px;
	margin-top: 30px;
}

/* 電話で読む人がいます。教授はメールを電話で開き、そのままここへ来ます。 */

@media (max-width: 880px) {
	.ranius .r-rp-gaps,
	.ranius .r-rp-rules { grid-template-columns: 1fr; }
	.ranius .r-rp-ev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ranius .r-rp-top { padding: 26px 0 32px; }
	.ranius .r-rp-sec { padding: 44px 0; }
	.ranius .r-rp-three__row { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }
	.ranius .r-rp-three dt { padding-top: 0; }
	.ranius .r-rp-three dd { font-size: 15.5px; }
	.ranius .r-rp-oneline { font-size: 17.5px; padding-left: 14px; }
	.ranius .r-rp-ev { grid-template-columns: 1fr; }
	.ranius .r-rp-cta .r-btn { width: 100%; }
	/* 図は縮めず、横スクロールで原寸のまま読ませます。
	   縮めると字が潰れて、結局どちらにしても読めなくなります。 */
	.ranius .r-rp-fig { max-width: none; }

	/* ★ 表は横スクロールをやめて、1行を1枚のカードに積み替えます。
	   横スクロールのままだと、項目名は見えているのに中身が画面の外に
	   出てしまい、いちばん読ませたい「未確定」の中身が読めません。
	   教授はメールを電話で読み、そのままここへ来ます。 */
	.ranius .r-rp-tablewrap {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
	}
	.ranius .r-rp-table,
	.ranius .r-rp-table--dims { min-width: 0; display: block; }
	.ranius .r-rp-table thead { display: none; }
	.ranius .r-rp-table tbody,
	.ranius .r-rp-table tbody tr { display: block; }
	.ranius .r-rp-table tbody tr {
		background: var(--r-card);
		border: 1px solid var(--r-line-strong);
		border-radius: var(--r-radius-sm);
		margin-bottom: 10px;
		padding: 6px 0 10px;
	}
	.ranius .r-rp-table tbody th,
	.ranius .r-rp-table tbody td,
	.ranius .r-rp-table--dims tbody th {
		display: block;
		width: auto;
		border-right: 0;
		border-bottom: 0;
		padding: 8px 16px;
	}
	.ranius .r-rp-table tbody th { padding-bottom: 2px; }
	.ranius .r-rp-table tbody tr.is-tbd {
		background: #FDF9EF;
		border-color: var(--r-warn);
	}
	.ranius .r-rp-table tbody tr.is-tbd th,
	.ranius .r-rp-table tbody tr.is-tbd td { background: transparent; }
	.ranius .r-rp-table tbody tr.is-tbd th { box-shadow: none; }
	.ranius .r-rp-tbd { margin-left: 0; margin-top: 6px; }
	.ranius .r-rp-table tbody th .r-rp-tbd { display: block; width: max-content; }
}

/* ==================================================================== */
/* v18 — 共同研究（日本語）：非認知能力評価の共同研究準備               */
/* ==================================================================== */

/* --- 準備中であることのチップ ----------------------------------------- */
.r-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ranius .r-chip {
	font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
	padding: 7px 15px; border-radius: 999px;
	background: #F2EDE3; color: #7A6F5B;
}
.ranius .r-chip--on { background: var(--r-gold); color: #241505; }
.ranius .r-sec > .r-wrap > .r-chips { margin-top: 16px; }
.ranius .r-sec > .r-wrap > .r-chips + .r-h2 { margin-top: 20px; }

/* --- いまの準備状況（在籍者数と、合意済み共同研究の件数） -------------- */
.r-rdy {
	background: #1E0A42;
	border-radius: 20px;
	padding: 30px 32px 28px;
	max-width: 720px;
}
.ranius .r-rdy__label {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: .14em;
	color: var(--r-gold);
	margin-bottom: 18px;
}
.r-rdy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.r-rdy__item {
	background: rgba(255, 255, 255, .06);
	border-radius: 14px;
	padding: 20px 22px 18px;
}
.ranius .r-rdy__v { display: flex; align-items: baseline; gap: .1em; }
.ranius .r-rdy__n {
	font-family: var(--r-font-en), var(--r-font-ja);
	font-size: clamp(34px, 4.2vw, 46px);
	font-weight: 900; line-height: 1; letter-spacing: -.05em;
	color: #fff;
}
.ranius .r-rdy__u { font-size: 17px; font-weight: 800; color: rgba(255,255,255,.8); }
.ranius .r-rdy__l {
	margin-top: 9px;
	font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.66);
}
/* この注記は消さないこと（500人は研究参加者数ではない） */
.ranius .r-rdy__note {
	margin-top: 16px;
	padding: 15px 18px;
	border-radius: 12px;
	background: rgba(227, 179, 75, .13);
	font-size: 13px; font-weight: 600; line-height: 1.9;
	color: rgba(255,255,255,.9);
}
@media (max-width: 640px) {
	.r-rdy { padding: 22px 20px 20px; }
	.r-rdy__grid { grid-template-columns: 1fr; }
}
.ranius .r-sec > .r-wrap > .r-rdy { margin-top: 36px; }

/* --- 主要質問 --------------------------------------------------------- */
.r-qmain {
	background: #F4EFFF;
	border: 1px solid #DECDF7;
	border-radius: 18px;
	padding: 28px 30px 26px;
}
.ranius .r-qmain__label {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: .12em;
	color: var(--r-pri); margin-bottom: 12px;
}
.ranius .r-qmain__text {
	font-size: clamp(19px, 2.2vw, 24px); font-weight: 800;
	line-height: 1.65; letter-spacing: -.02em; color: var(--r-deep);
}
.r-qmain__subs { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 10px; }
.ranius .r-qmain__subs li {
	position: relative; padding-left: 20px;
	font-size: 14.5px; line-height: 1.9; color: var(--r-ink-2);
}
.ranius .r-qmain__subs li::before {
	content: ""; position: absolute; left: 2px; top: .76em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--r-pri);
}
.ranius .r-qmain__b {
	margin-top: 20px; padding-top: 16px;
	border-top: 1px dashed #C9B6F0;
	font-size: 15px; font-weight: 700; line-height: 1.85; color: var(--r-pri);
}
.ranius .r-sec > .r-wrap > .r-qmain { margin-top: 28px; }

/* --- 測定の質（信頼性・妥当性・標準化・公平性） ------------------------ */
.r-qual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.r-qual__card {
	background: #fff;
	border: 1px solid #E8E2D6;
	border-radius: 16px;
	padding: 24px 22px 22px;
}
.ranius .r-qual__name {
	font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--r-deep);
}
.ranius .r-qual__text {
	margin-top: 10px;
	font-size: 14px; line-height: 1.95; color: var(--r-ink-2);
}
.ranius .r-qual__how {
	margin-top: 14px; padding-top: 13px;
	border-top: 1px dashed #E0D8C7;
	font-size: 12.5px; line-height: 1.8; color: var(--r-sub);
}
.ranius .r-qual__how span {
	display: block;
	font-family: var(--r-font-ui);
	font-size: 10px; font-weight: 800; letter-spacing: .1em;
	color: var(--r-pri); margin-bottom: 5px;
}
@media (max-width: 1100px) { .r-qual { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .r-qual { grid-template-columns: 1fr; } }
.ranius .r-sec > .r-wrap > .r-qual { margin-top: 28px; }

/* --- 求める専門性 ----------------------------------------------------- */
.r-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.r-field {
	background: #fff;
	border: 1px solid #E8E2D6;
	border-radius: 20px;
	padding: 30px 30px 26px;
}
.ranius .r-field__who {
	font-family: var(--r-font-ui);
	font-size: 11px; font-weight: 800; letter-spacing: .1em;
	color: var(--r-pri); margin-bottom: 12px;
}
.ranius .r-field__name {
	font-size: clamp(19px, 2.2vw, 23px); font-weight: 800;
	line-height: 1.5; letter-spacing: -.025em; color: var(--r-deep);
}
.r-field__qs { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 11px; }
.ranius .r-field__qs li {
	position: relative; padding-left: 20px;
	font-size: 14.5px; line-height: 1.95; color: var(--r-ink-2);
}
.ranius .r-field__qs li::before {
	content: ""; position: absolute; left: 2px; top: .78em;
	width: 6px; height: 6px; border-radius: 50%; background: #CFC5B2;
}
.ranius .r-field__ref {
	margin-top: 20px; padding-top: 15px;
	border-top: 1px dashed #E0D8C7;
	font-size: 13px; line-height: 1.8;
}
.ranius .r-field__ref span {
	display: inline-block; margin-right: 8px;
	font-family: var(--r-font-ui);
	font-size: 10px; font-weight: 800; letter-spacing: .1em;
	padding: 3px 8px; border-radius: 999px;
	background: #F2EDE3; color: #7A6F5B; vertical-align: 1px;
}
.ranius a.r-field__ref-link,
.ranius .r-field__ref a { color: var(--r-pri); font-weight: 700; }
@media (max-width: 860px) { .r-fields { grid-template-columns: 1fr; } }
.ranius .r-sec > .r-wrap > .r-fields { margin-top: 32px; }

/* --- ロードマップの見出し --------------------------------------------- */
.ranius .r-plan__name {
	font-size: 17px; font-weight: 800; line-height: 1.5;
	letter-spacing: -.02em; color: var(--r-deep);
	margin-bottom: 16px;
}

/* --- データ保護の約束 -------------------------------------------------- */
.ranius .r-privacy-note {
	background: #F6F3EC;
	border-radius: 14px;
	padding: 22px 24px;
	font-size: 13.5px; line-height: 2; color: var(--r-ink-2);
}
.ranius .r-privacy-note span {
	display: block;
	font-family: var(--r-font-ui);
	font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
	color: var(--r-pri); margin-bottom: 8px;
}
.ranius .r-sec > .r-wrap > .r-privacy-note { margin-top: 28px; }

/* 測定を鍛える場（NIJINアカデミー）— 研究準備ブロックの中 */
.ranius .r-rdy__site {
	margin-top: 16px;
	font-size: 13.5px; line-height: 1.95;
	color: rgba(255, 255, 255, .82);
}

/* 研究準備の数字が4つになったので、2列×2段でも収まるように */
@media (min-width: 641px) {
	.r-rdy { max-width: 860px; }
	.r-rdy__grid { grid-template-columns: 1fr 1fr; }
}
.ranius .r-rdy__l { min-height: 2.2em; }

/* ==================================================================== */
/* v19 — 使うほど良くなる輪／いまの課題                                 */
/* ==================================================================== */
.r-loop { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.r-loop__step {
	position: relative;
	background: #fff;
	border: 1px solid #E8E2D6;
	border-radius: 16px;
	padding: 24px 22px 22px;
}
/* 輪であることを、間の矢印で示す */
.r-loop__step + .r-loop__step::before {
	content: "";
	position: absolute; left: -12px; top: 40px;
	width: 8px; height: 8px;
	border-top: 2px solid #CFC5B2;
	border-right: 2px solid #CFC5B2;
	transform: rotate(45deg);
}
.ranius .r-loop__n {
	font-family: var(--r-font-en);
	font-size: 13px; font-weight: 800; letter-spacing: .06em;
	color: var(--r-pri);
}
.ranius .r-loop__name {
	margin-top: 10px;
	font-size: 17px; font-weight: 800; line-height: 1.5;
	letter-spacing: -.02em; color: var(--r-deep);
}
.ranius .r-loop__text {
	margin-top: 11px;
	font-size: 14px; line-height: 1.95; color: var(--r-ink-2);
}
.ranius .r-loop__text strong { color: var(--r-ink); font-weight: 800; }
@media (max-width: 1100px) { .r-loop { grid-template-columns: 1fr 1fr; } .r-loop__step + .r-loop__step::before { display: none; } }
@media (max-width: 560px) { .r-loop { grid-template-columns: 1fr; } }
.ranius .r-sec > .r-wrap > .r-loop { margin-top: 28px; }

/* いまの課題。弱点を先に出すための箱なので、目立たせすぎない。 */
.r-issue {
	background: #FBF3DE;
	border: 1px solid #EBD9A8;
	border-radius: 18px;
	padding: 28px 30px 26px;
}
.ranius .r-issue__title {
	font-size: clamp(19px, 2.2vw, 23px); font-weight: 800;
	line-height: 1.5; letter-spacing: -.025em; color: var(--r-gold-deep);
}
.ranius .r-issue__text {
	margin-top: 13px;
	font-size: 15px; line-height: 2.05; color: var(--r-ink-2); max-width: 46em;
}
.ranius .r-issue__text strong { color: var(--r-ink); font-weight: 800; }
.ranius .r-issue__cta { margin-top: 16px; font-size: 14.5px; font-weight: 800; }
.ranius .r-issue__cta a { color: var(--r-gold-deep); }
.ranius .r-sec > .r-wrap > .r-issue { margin-top: 28px; }


/* ==================================================================== */
/* v19.3 — Raniusでできること／チームRanius（/join/）                    */
/* ==================================================================== */
.ranius .r-can__who {
	list-style: none; padding: 0; margin: 22px 0 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.ranius .r-can__who li {
	font-family: var(--r-font-ui);
	font-size: 13px; font-weight: 700; line-height: 1;
	padding: 9px 14px; border-radius: 999px;
	background: var(--r-pri-soft); color: var(--r-deep);
	border: 1px solid #E2D6F7;
}
.r-can { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ranius .r-sec > .r-wrap > .r-can { margin-top: 32px; }
.r-can__card {
	display: flex; flex-direction: column; gap: 20px;
	background: #fff; border: 1px solid #E8E2D6; border-radius: 18px;
	padding: 26px 26px 24px;
}
.ranius .r-can__for {
	font-family: var(--r-font-ui);
	font-size: 12px; font-weight: 800; letter-spacing: .08em;
	color: var(--r-pri);
	display: flex; align-items: center; gap: 10px;
}
.ranius .r-can__n {
	font-family: var(--r-font-en); font-size: 14px; letter-spacing: .04em;
	color: var(--r-gold-deep);
}
.ranius .r-can__name {
	margin-top: 10px;
	font-size: clamp(18px, 2vw, 21px); font-weight: 800; line-height: 1.5;
	letter-spacing: -.02em; color: var(--r-deep);
}
.ranius .r-can__text {
	margin-top: 11px;
	font-size: 14.5px; line-height: 1.95; color: var(--r-ink-2);
}
.ranius .r-can__text strong { color: var(--r-ink); font-weight: 800; }

/* 小さな画面。開発中の Teacher Studio の雰囲気だけを伝える */
.r-can__screen {
	margin-top: auto;
	border-radius: 12px; overflow: hidden;
	border: 1px solid #DDD3EE;
	background: #FBFAFE;
	box-shadow: 0 10px 24px -18px rgba(46, 16, 101, .45);
}
.r-can__bar {
	display: flex; align-items: center; gap: 6px;
	padding: 9px 12px;
	background: linear-gradient(100deg, #2E1065, #4C1D95);
}
.r-can__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.ranius .r-can__bar span {
	margin-left: 8px;
	font-family: var(--r-font-ui);
	font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
	color: #EDE5FB;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-can__rows { padding: 6px 14px 8px; }
.ranius .r-can__row {
	display: grid; grid-template-columns: 5.6em 1fr; gap: 12px; align-items: baseline;
	padding: 8px 0;
	font-family: var(--r-font-ui);
	font-size: 12.5px; line-height: 1.6; color: var(--r-ink);
}
.ranius .r-can__row + .r-can__row { border-top: 1px dashed #E6DFF2; }
.ranius .r-can__row b { font-size: 11px; font-weight: 800; color: var(--r-sub); letter-spacing: .04em; }
.ranius .r-can__row--ok span,
.ranius .r-can__row--wait span {
	justify-self: start;
	font-size: 11.5px; font-weight: 800; line-height: 1;
	padding: 5px 9px; border-radius: 999px;
}
.ranius .r-can__row--ok span { background: #E3F5EC; color: #13714B; }
.ranius .r-can__row--wait span { background: #FBF0D9; color: #8A5B0E; }
.ranius--lang-en .r-can__row { grid-template-columns: 7.4em 1fr; }

.ranius #can .r-h3 { margin-top: 56px; }
.ranius #can .r-steps { margin-top: 20px; }
.ranius #can .r-hero__cta { margin-top: 30px; }

@media (max-width: 860px) {
	.r-can { grid-template-columns: 1fr; }
	.r-can__card { padding: 22px 20px 20px; }
}

/* チームRanius：頭文字の丸と、最後の「あなたの席」 */
.r-crew__head { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; }
.ranius .r-crew__mark {
	display: grid; place-items: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: linear-gradient(135deg, #4C1D95, #7C3AED);
	color: #fff; font-weight: 800; font-size: 19px; line-height: 1;
	font-family: var(--r-font-ui);
}
.ranius--lang-en .r-crew__mark { font-size: 15px; letter-spacing: .02em; }
.ranius .r-crew .r-team__role { margin-bottom: 4px; }
.ranius .r-crew .r-team__name { font-size: 20px; }
.r-team__card--open {
	background: #F7F3FF;
	border: 1.5px dashed #BBA6EA;
}
.ranius .r-team__card--open .r-crew__mark {
	background: #fff; color: var(--r-pri);
	border: 1.5px dashed #BBA6EA; font-size: 24px;
}
.ranius .r-crew__go { margin-top: 14px; font-size: 14.5px; font-weight: 800; }
.ranius .r-crew__go a { color: var(--r-pri); }
.r-crew { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .r-crew { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .r-crew { grid-template-columns: 1fr; } }
.ranius #crew .r-h3 { margin-top: 56px; }
.ranius #crew .r-roles { margin-top: 22px; }

/* 参加するまで：明るい背景の上なので、白いカードと濃い文字にする */
.ranius #can .r-steps__item {
	background: #fff; border: 1px solid #E8E2D6; text-align: left;
	padding: 22px 22px 20px;
}
.ranius #can .r-steps__num { margin-left: 0; margin-right: 0; }
.ranius #can .r-steps__name { color: var(--r-deep); font-size: 16px; font-weight: 800; }
.ranius #can .r-steps__text { color: var(--r-ink-2); font-size: 14px; line-height: 1.9; margin-top: 8px; }
.ranius .r-crew .r-team__card { padding: 26px 28px 24px; }