@charset "UTF-8";
/* ==========================================================================
   トップページ リニューアルデザイン案
   Figma「トップページ」(node 479:40 / 1440px) をHTML化
   カラー・サイズはFigmaの実測値に準拠
   ========================================================================== */

/* --------------------------------------------------------------------------
   トークン
   -------------------------------------------------------------------------- */
html {
	overflow-x: hidden;
}

.rt {
	--navy: #0c0b86;
	--orange: #e83817;
	--cta-red: #d9161b;
	--blue: #406faf;
	--ink: #000;
	--muted: #707070;
	--line: #c5c5c5;
	--bg-soft: #fbfcfe;
	--bg-gray: #f6f6f6;
	--card-head: rgba(235, 239, 255, 0.5);
	--container: 1120px;

	/* 可読性基準：本文16px以上／注釈14pxを下限（PC/SP共通） */
	--fs-body: 16px;
	--fs-note: 14px;

	font-family: "Noto Sans JP", sans-serif;
	color: var(--ink);
	line-height: 1.625;
	font-size: 16px;
	overflow-x: hidden;

	/* main.cssを読み込んでいないため、ブラウザ既定のbody余白を自前でリセット */
	margin: 0;
	/* 共通CSS(header-footer.css)がbodyにも bg-body.png を敷いているため、
	   ヘッダー内の <img class="rt-header__blob"> と二重になる。
	   デザイン上は白オーバーレイの「上」に赤い装飾が乗るので、img側に一本化する */
	background-image: none;
}
.rt *,
.rt *::before,
.rt *::after {
	box-sizing: border-box;
}
.rt img {
	max-width: 100%;
}
/* リセットは :where() で詳細度0にし、各コンポーネントの余白指定を優先させる */
.rt :where(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rt :where(p) {
	margin: 0;
}
.rt :where(a) {
	color: inherit;
	text-decoration: none;
}

.rt-container {
	width: min(var(--container), 100% - 48px);
	margin-inline: auto;
}

/* ページ内リンクの着地位置。スクロール時に降りてくる固定ナビ（57px）に隠れないようにする */
.rt-voice,
.rt-areas {
	scroll-margin-top: 72px;
}
@media (max-width: 767px) {
	.rt-container {
		width: min(var(--container), 100% - 32px);
	}
}

/* 青丸＋白矢印のアイコン。「お知らせ一覧はこちら」と同じ意匠で、
   5領域の円・選ばれる理由のカードでも使う（レビュー指摘の参照画像に準拠） */
.rt-arrow-icon {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--blue);
	vertical-align: middle;
}
.rt-arrow-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 46%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

/* 数値表示（FigmaはDIN Bold指定） */
.rt-num {
	font-family: "DIN", "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-style: normal;
}

/* --------------------------------------------------------------------------
   セクション見出し（32px＋オレンジ下線 90×4）
   -------------------------------------------------------------------------- */
.rt-heading {
	text-align: center;
	margin: 0;
}
.rt-heading__main {
	display: block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
}
.rt-heading__sup {
	display: block;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.625;
	margin-bottom: 8px;
}
.rt-heading::after {
	content: "";
	display: block;
	width: 90px;
	height: 4px;
	margin: 24px auto 0;
	background-color: var(--orange);
}
@media (max-width: 767px) {
	.rt-heading__main {
		font-size: 24px;
	}
	.rt-heading__sup {
		font-size: 18px;
	}
	.rt-heading::after {
		width: 70px;
		margin-top: 16px;
	}
}

/* リード文 */
.rt-lead {
	text-align: center;
	font-size: 16px;
	line-height: 26px;
	margin-top: 32px;
}
.rt-subhead {
	text-align: center;
	color: var(--navy);
	font-size: 24px;
	font-weight: 700;
	line-height: 26px;
	margin-top: 66px;
}
.rt-subhead + .rt-lead {
	margin-top: 18px;
}
@media (max-width: 767px) {
	.rt-subhead {
		font-size: 19px;
		line-height: 1.5;
		margin-top: 40px;
	}
	.rt-lead {
		/* font-size はPCの16pxを維持（SPで縮小しない） */
		line-height: 1.8;
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   ファーストビュー
   -------------------------------------------------------------------------- */
.rt-fv {
	position: relative;
	margin-top: -123px;
	padding-top: 123px;
	/* ファーストビュー内にPICK UPセクションの上部が覗くよう高さを抑える */
	min-height: 620px;
	background-image: url("../images/fv-bg.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
.rt-fv__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: 52px 24px 40px 153px;
}
.rt-fv__title {
	margin: 0;
	font-size: 56px;
	font-weight: 700;
	line-height: 69px;
}
.rt-fv__text {
	margin-top: 28px;
	max-width: 476px;
	font-size: 16px;
	line-height: 26px;
}
.rt-fv__movie {
	margin-top: 34px;
	width: 260px;
}
/* ボタン要素にしたため、ブラウザ既定の余白・背景をリセットする */
.rt-fv__thumb {
	position: relative;
	display: block;
	width: 260px;
	height: 146px;
	padding: 0;
	border: 1px solid var(--line);
	background: none;
	overflow: hidden;
	cursor: pointer;
}
/* 再生ボタンの用途をスクリーンリーダーにだけ伝える */
.rt-fv__thumb-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.rt-fv__thumb:hover .rt-fv__play {
	background-color: #fff;
	transform: translate(-50%, -50%) scale(1.08);
}
.rt-fv__play {
	transition: transform 0.2s, background-color 0.2s;
}
.rt-fv__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rt-fv__thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 1;
}
.rt-fv__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	z-index: 2;
}
.rt-fv__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-left: 11px solid var(--ink);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
/* 動画の下：タイトル＋再生時間（レビュー指摘） */
.rt-fv__caption {
	margin-top: 8px;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
/* PC・タブレットはサムネイル幅（260px）を少しはみ出しても1行で見せる。
   見出し・リード文と揃えて左端起点にし、画面端で切れないようにする */
@media (min-width: 768px) {
	.rt-fv__caption {
		width: max-content;
		text-align: left;
		white-space: nowrap;
	}
}
.rt-fv__duration {
	display: inline-block;
	white-space: nowrap;
	margin-left: 4px;
	font-size: var(--fs-note);
	font-weight: 400;
	color: #333;
}
@media (max-width: 1100px) {
	.rt-fv__inner {
		padding-left: 24px;
	}
}
@media (max-width: 900px) {
	/* SPはヘッダーをロゴのみにしてFVへ重ねる（business.jcom.co.jp と同じ仕様）。
	   背景画像はPC同様に画面上端まで敷く（レビュー指摘） */
	.rt-fv {
		margin-top: 0;
		padding-top: 88px;
	}
}
@media (max-width: 767px) {
	.rt-fv {
		min-height: 0;
		padding-bottom: 40px;
		background-position: 72% top;
	}
	.rt-fv__inner {
		padding-top: 8px;
	}
	.rt-fv__title {
		font-size: 30px;
		line-height: 1.35;
	}
	.rt-fv__text {
		margin-top: 20px;
		/* font-size はPCの16pxを維持（SPで縮小しない） */
		line-height: 1.8;
		background-color: rgba(255, 255, 255, 0.72);
		padding: 12px;
		border-radius: 6px;
	}
	.rt-fv__movie {
		margin-top: 28px;
		width: 100%;
		max-width: 301px;
	}
	.rt-fv__thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 301 / 169;
	}
}

/* --------------------------------------------------------------------------
   PICK UP
   -------------------------------------------------------------------------- */
.rt-pickup {
	padding: 56px 0 110px;
	background-color: #fff;
}
/* 大見出しに代わる左寄せの小見出し。カルーセルと左端を揃える */
.rt-pickup__head {
	width: min(var(--container), 100% - 120px);
	margin-inline: auto;
}
.rt-pickup__label {
	margin: 0;
	color: var(--navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
}
.rt-pickup__carousel {
	position: relative;
	width: min(var(--container), 100% - 120px);
	margin: 24px auto 0;
	/* カード1枚の幅。矢印の縦位置の算出にも使う */
	--card-w: calc((100% - 48px) / 3);
}
/* 矢印の位置基準。ドットを含まないカード領域だけを囲う */
.rt-pickup__stage {
	position: relative;
}
.rt-pickup__viewport {
	overflow: hidden;
	/* 横方向の指の動きはフリック操作（script.js）に使い、縦はページのスクロールに任せる */
	touch-action: pan-y;
	/* カード下端のボーダー1pxがクリップされないよう余白を確保 */
	padding-bottom: 2px;
}
.rt-pickup__track {
	display: flex;
	gap: 24px;
	transition: transform 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
	.rt-pickup__track {
		transition: none;
	}
}
/* 1画面に3件。4件以上のときだけJSがカルーセル化する */
.rt-pickup__slide {
	flex: 0 0 var(--card-w);
	border: 1px solid var(--line);
	background-color: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.rt-pickup__slide:hover {
	border-color: var(--navy);
	box-shadow: 0 2px 12px rgba(12, 11, 134, 0.08);
}
/* タイトルの行数が違ってもカードの高さが揃うようにflexで組む */
.rt-pickup__slide > a {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.rt-pickup__thumb {
	position: relative;
	flex: 0 0 auto;
}
.rt-pickup__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
/* 日付と同じ行に置くカテゴリラベル */
.rt-pickup__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
}
/* カテゴリ表記は「お知らせ・ニュースリリース」と同じ黒枠＋黒文字に揃える（レビュー指摘） */
.rt-pickup__cat {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	padding: 2px 10px;
	border: 1px solid var(--ink);
	background-color: transparent;
	color: var(--ink);
	font-size: var(--fs-note);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.04em;
}
.rt-pickup__date {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-note);
	line-height: 1.4;
}
.rt-pickup__body {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 14px 20px 20px;
}
.rt-pickup__title {
	margin: 8px 0 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 25px;
	/* 長いタイトルは3行で打ち切り、カード間の高さ差を抑える */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* カルーセルの送りアロー。PICK UPを基準に、ページ内すべて同じ意匠に揃える
   （レビュー指摘：丸の囲みなし・矢印のみ。色は #406faf）
   ボタン自体は44px角のままにして、タップ領域を確保している */
.rt-pickup__arrow,
.rt-banner__arrow,
.rt-areas__nav {
	position: absolute;
	/* カード全体の上下中央に合わせる */
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 2;
	transition: opacity 0.2s;
}
.rt-pickup__arrow[hidden] {
	display: none;
}
.rt-pickup__arrow::before,
.rt-banner__arrow::before,
.rt-areas__nav::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin-inline: auto;
	border-top: 4px solid var(--blue);
	border-right: 4px solid var(--blue);
}
.rt-pickup__arrow--prev::before,
.rt-banner__arrow--prev::before,
.rt-areas__nav--prev::before {
	transform: translateX(3px) rotate(-135deg);
}
.rt-pickup__arrow--next::before,
.rt-banner__arrow--next::before,
.rt-areas__nav--next::before {
	transform: translateX(-3px) rotate(45deg);
}
.rt-pickup__arrow:hover,
.rt-banner__arrow:hover,
.rt-areas__nav:hover {
	opacity: 0.6;
}
.rt-pickup__arrow--prev {
	left: -56px;
}
.rt-pickup__arrow--next {
	right: -56px;
}
.rt-pickup__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	margin-top: 40px;
}
.rt-pickup__dots:empty {
	display: none;
}
.rt-pickup__dot {
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #d9d9d9;
	cursor: pointer;
}
.rt-pickup__dot.is-current {
	width: 24px;
	height: 24px;
	background-color: var(--blue);
}
/* タブレットは2件、SPは1件表示 */
@media (max-width: 1023px) {
	.rt-pickup__carousel {
		--card-w: calc((100% - 24px) / 2);
	}
}
@media (max-width: 767px) {
	.rt-pickup {
		padding: 48px 0 56px;
	}
	.rt-pickup__head,
	.rt-pickup__carousel {
		width: min(var(--container), 100% - 32px);
	}
	.rt-pickup__label {
		font-size: 17px;
	}
	.rt-pickup__carousel {
		--card-w: 100%;
	}
	.rt-pickup__title {
		font-size: 16px;
		line-height: 1.5;
	}
	.rt-pickup__body {
		padding: 12px 16px 16px;
	}
	/* 矢印はカードの両サイドに置く（レビュー指摘）。
	   左右に矢印ぶんの余白を取り、カードは中央に1枚 */
	.rt-pickup__carousel.is-carousel {
		width: calc(100% - 96px);
	}
	.rt-pickup__arrow--prev {
		left: -46px;
	}
	.rt-pickup__arrow--next {
		right: -46px;
	}
	/* ドットは現在地の目安なので小さく詰める（レビュー指摘：少しコンパクトに）。
	   送り操作は44pxの矢印が担う */
	.rt-pickup__dots {
		gap: 0;
		margin-top: 16px;
	}
}

/* --------------------------------------------------------------------------
   貴社の課題は、どこにありますか
   -------------------------------------------------------------------------- */
.rt-issue {
	padding: 66px 0 38px;
	background-color: #f2f2f2;
}
.rt-issue__list {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 83px;
}
.rt-issue__item {
	width: 325px;
	border: 4px solid var(--navy);
	border-radius: 10px;
	background-color: #fff;
	overflow: hidden;
}
.rt-issue__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20px 16px;
	background-color: var(--card-head);
}
.rt-issue__figure {
	width: 214px;
	margin: -7px 0 0;
}
.rt-issue__figure img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}
.rt-issue__data {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	margin-top: -6px;
	color: var(--orange);
}
.rt-issue__value {
	font-size: 64px;
	line-height: 70px;
}
.rt-issue__unit {
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	padding-bottom: 12px;
	letter-spacing: 0.06em;
}
.rt-issue__label {
	margin-top: 4px;
	text-align: center;
	font-size: 16px;
	line-height: 26px;
}
.rt-issue__title {
	margin: 19px 0 0;
	padding: 0 20px;
	text-align: center;
	color: var(--navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 27px;
}
/* 見出しの開閉ボタン。PCでは見た目・動作とも通常の見出しと同じにする */
.rt-issue__toggle {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: inherit;
	cursor: default;
}
/* 開閉用の矢印はSPのみ表示 */
.rt-issue__icon {
	display: none;
}
.rt-issue__text {
	margin: 15px 0 0;
	padding: 0 22px 28px;
	font-size: 16px;
	line-height: 26px;
}
.rt-issue__note {
	margin: 44px auto 0;
	max-width: 1015px;
	text-align: center;
	color: var(--muted);
	font-size: var(--fs-note);
	line-height: 1.7;
}
@media (max-width: 1120px) {
	.rt-issue__list {
		flex-wrap: wrap;
	}
}
/* PCはラベルを2行分の高さで確保し、3枚の見出し位置を揃える */
@media (min-width: 768px) {
	.rt-issue__label {
		min-height: 52px;
	}
}
@media (max-width: 767px) {
	.rt-issue {
		padding: 48px 0 32px;
	}
	.rt-issue__list {
		margin-top: 40px;
		gap: 24px;
	}
	/* SPはカードを全幅にし、グラフ画像と数値を横並びにして高さを抑える（スマホファーストの追加調整） */
	.rt-issue__list {
		gap: 16px;
	}
	.rt-issue__item {
		width: 100%;
		border-width: 3px;
	}
	.rt-issue__head {
		display: grid;
		grid-template-columns: 96px 1fr;
		align-items: center;
		column-gap: 12px;
		padding: 12px 16px;
	}
	.rt-issue__figure {
		grid-row: 1 / 3;
		width: 96px;
		margin: 0;
	}
	.rt-issue__data {
		justify-content: flex-start;
		margin-top: 0;
	}
	.rt-issue__value {
		font-size: 48px;
		line-height: 1.1;
	}
	.rt-issue__unit {
		padding-bottom: 6px;
	}
	.rt-issue__label {
		margin-top: 0;
		text-align: left;
		line-height: 1.5;
	}
	.rt-issue__title {
		margin-top: 14px;
		padding: 0 16px;
		text-align: left;
		font-size: 18px;
		line-height: 1.5;
	}
	/* 改行位置はPC幅前提のため、SPでは自然に折り返す */
	.rt-issue__title br {
		display: none;
	}
	.rt-issue__text {
		margin-top: 8px;
		padding: 0 16px 18px;
		line-height: 1.75;
	}
	/* SPはタップで本文を開閉する（JSが .is-accordion を付けたときのみ。JSなしでは全文表示） */
	.rt-issue.is-accordion .rt-issue__item {
		position: relative;
		/* 下中央の矢印ぶんの余白 */
		padding-bottom: 26px;
	}
	.rt-issue.is-accordion .rt-issue__title {
		margin-top: 0;
		padding: 0;
	}
	.rt-issue.is-accordion .rt-issue__toggle {
		padding: 12px 16px 4px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	/* カード全体（数値ブロックを含む）をタップ領域にする */
	.rt-issue.is-accordion .rt-issue__toggle::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	/* 開閉を示す矢印（JSが挿入）。カード下端の中央に置く */
	.rt-issue.is-accordion .rt-issue__icon {
		display: block;
		position: absolute;
		bottom: 12px;
		left: 50%;
		width: 10px;
		height: 10px;
		margin-left: -5px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s;
	}
	.rt-issue.is-accordion .rt-issue__toggle[aria-expanded="true"] .rt-issue__icon {
		bottom: 6px;
		transform: rotate(-135deg);
	}
	.rt-issue.is-accordion .rt-issue__toggle:focus-visible {
		outline: 2px solid var(--navy);
		outline-offset: -4px;
	}
	.rt-issue.is-accordion .rt-issue__text {
		margin-top: 4px;
		padding-bottom: 0;
	}
	.rt-issue.is-accordion .rt-issue__text[hidden] {
		display: none;
	}
	.rt-issue__note {
		margin-top: 24px;
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   J:COM BUSINESSに、できること（5領域）
   -------------------------------------------------------------------------- */
.rt-areas {
	padding: 67px 0 0;
	background-color: var(--bg-soft);
}
/* --- 5つの領域の図（元は1枚画像／HTML化したもの） ---------------------
   円の配置はFigma原寸 1411×829 を基準にした%指定。
   1000px未満では円配置をやめてカードのグリッドに切り替える。 */
.rt-areas__figure {
	margin: 46px auto 0;
	max-width: 1411px;
}
.rt-areas__diagram {
	position: relative;
	/* 背景の同心円が上下で切れず、かつ円内テキストを14px以上にできる比率 */
	aspect-ratio: 71 / 50;
	overflow: hidden;
}

/* 背景の同心円 */
.rt-areas__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
}
.rt-areas__ring--1 {
	width: 68%;
	background-color: rgba(243, 247, 252, 0.6);
}
.rt-areas__ring--2 {
	width: 52%;
	background-color: rgba(232, 240, 251, 0.55);
}
.rt-areas__ring--3 {
	width: 38%;
	background-color: rgba(223, 233, 248, 0.45);
}

/* 中心から各領域への点線 */
.rt-areas__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* 中心のブランド円 */
.rt-areas__center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 18%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-image: radial-gradient(circle at 34% 28%, #f4581f 0%, #e8380f 56%, #d92c06 100%);
	color: #fff;
	text-align: center;
}
/* 中心のロゴは共通素材 logo-jcom-white.svg を使用（レビュー指摘） */
.rt-areas__brand {
	width: 42%;
	max-width: 110px;
}
.rt-areas__brand img {
	display: block;
	width: 100%;
	height: auto;
}
.rt-areas__tagline {
	position: relative;
	margin-top: 10px;
	padding-top: 10px;
	font-size: var(--fs-note);
	font-weight: 700;
	line-height: 1.5;
}
.rt-areas__tagline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 74px;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.85);
}

/* 5つの領域の円 */
.rt-areas__nodes {
	position: static;
}
.rt-areas__node {
	position: absolute;
	width: 21%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
}
.rt-areas__node--net {
	top: 16.63%;
	left: 50%;
}
.rt-areas__node--dx {
	top: 39.69%;
	left: 72.35%;
}
.rt-areas__node--fac {
	top: 39.69%;
	left: 27.65%;
}
.rt-areas__node--bosai {
	top: 77%;
	left: 63.81%;
}
.rt-areas__node--promo {
	top: 77%;
	left: 36.19%;
}
.rt-areas__node > a,
.rt-areas__node > button {
	/* ボタン化に伴う既定スタイルのリセット */
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	height: 100%;
	padding: 7% 7%;
	border: 1px solid #b9c6e6;
	border-radius: 50%;
	background-color: #fff;
	text-align: center;
	/* クリックできることが分かるよう、通常時も薄い影を付ける（ホバーで濃くする） */
	box-shadow: 0 2px 12px rgba(12, 11, 134, 0.08);
	transition: box-shadow 0.2s, transform 0.2s;
}
.rt-areas__node > a:hover,
.rt-areas__node > button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(12, 11, 134, 0.14);
}
@media (prefers-reduced-motion: reduce) {
	.rt-areas__node > a:hover,
	.rt-areas__node > button:hover {
		transform: none;
	}
}
.rt-areas__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 31%;
	aspect-ratio: 1;
}
.rt-areas__icon img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
.rt-areas__node-title {
	margin-top: 6px;
	color: var(--navy);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
.rt-areas__node-text {
	font-size: var(--fs-body);
	line-height: 1.5;
	color: #4a4a4a;
	white-space: nowrap;
}
/* 対象読者の補足（例：施設価値向上＝マンション経営者向け） */
.rt-areas__node-target {
	margin-top: -1px;
	color: var(--navy);
	font-size: var(--fs-note);
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}
/* 詳細を開くアロー。参照画像の配色（青丸＋白矢印）にし、18px→26pxへ拡大（レビュー指摘） */
.rt-areas__more {
	display: block;
	position: relative;
	width: 26px;
	height: 26px;
	margin-top: 6px;
	border-radius: 50%;
	background-color: var(--blue);
}
.rt-areas__more::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 46%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}


/* --- 1240px未満：円配置をやめてカードのグリッドへ ---------------------
   円のままだと直径が足りず、円内テキストが14pxを下回るため --- */
@media (max-width: 1239px) {
	.rt-areas__figure {
		padding-inline: 24px;
	}
	.rt-areas__diagram {
		aspect-ratio: auto;
		overflow: visible;
	}
	.rt-areas__ring,
	.rt-areas__lines {
		display: none;
	}
	.rt-areas__center {
		position: static;
		transform: none;
		width: 220px;
		margin: 0 auto 28px;
	}
	.rt-areas__tagline {
		font-size: var(--fs-note);
		margin-top: 12px;
		padding-top: 12px;
	}
	.rt-areas__tagline::before {
		width: 74px;
	}
	.rt-areas__nodes {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.rt-areas__node {
		position: static;
		width: auto;
		aspect-ratio: auto;
		transform: none;
	}
	.rt-areas__node > a,
.rt-areas__node > button {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		gap: 4px 14px;
		height: 100%;
		padding: 18px 20px;
		border-radius: 12px;
		text-align: left;
	}
	.rt-areas__icon {
		width: 44px;
	}
	.rt-areas__node-title {
		margin-top: 0;
		font-size: 16px;
		white-space: normal;
	}
	.rt-areas__node-text {
		flex: 1 0 100%;
		font-size: var(--fs-body);
		line-height: 1.6;
		white-space: normal;
	}
	.rt-areas__more {
		position: absolute;
		right: 16px;
		bottom: 16px;
		margin-top: 0;
	}
	.rt-areas__node > a,
.rt-areas__node > button {
		position: relative;
	}
}
@media (max-width: 767px) {
	.rt-areas__figure {
		padding-inline: 16px;
	}
	/* 中心は円のモチーフをやめ、横長の帯にして高さを抑える（レビュー指摘） */
	.rt-areas__center {
		flex-direction: row;
		gap: 16px;
		width: 100%;
		aspect-ratio: auto;
		margin-bottom: 12px;
		padding: 14px 20px;
		border-radius: 12px;
		background-image: linear-gradient(100deg, #f4581f 0%, #e8380f 60%, #d92c06 100%);
	}
	.rt-areas__brand {
		width: 72px;
		flex-shrink: 0;
	}
	.rt-areas__tagline {
		margin-top: 0;
		padding: 0 0 0 16px;
		font-size: var(--fs-body);
		text-align: left;
	}
	.rt-areas__tagline::before {
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 1px;
		height: 36px;
	}
	/* 5領域は2カラムにして高さを抑える（レビュー指摘） */
	.rt-areas__nodes {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.rt-areas__node > a,
	.rt-areas__node > button {
		flex-direction: column;
		align-items: flex-start;
		flex-wrap: nowrap;
		gap: 6px;
		padding: 14px 12px 44px;
		border-radius: 10px;
	}
	.rt-areas__icon {
		width: 36px;
	}
	.rt-areas__node-title {
		line-height: 1.4;
	}
	.rt-areas__node-text {
		flex: 0 0 auto;
		line-height: 1.55;
	}
	.rt-areas__node-text br {
		display: none;
	}
	.rt-areas__more {
		right: 10px;
		bottom: 10px;
	}
	/* 5件目（施設価値向上）は1行ぶん使い、奇数の余白を作らない */
	.rt-areas__node--fac {
		grid-column: 1 / -1;
	}
}
@media (max-width: 767px) {
	.rt-areas {
		padding-top: 48px;
	}
	.rt-areas__figure {
		margin-top: 24px;
	}
}

/* --------------------------------------------------------------------------
   ご相談例（課題タブ）
   Figma(479:40)の構成に準拠。配色・角丸・余白は既存トークンに合わせて調整
   -------------------------------------------------------------------------- */
.rt-voice {
	padding: 83px 0 90px;
	background-color: var(--bg-soft);
	background-image: linear-gradient(to bottom, rgba(252, 251, 253, 0.7) 0%, rgba(248, 250, 253, 0.7) 64%, rgba(231, 237, 250, 0.7) 100%);
}

/* タブ（レビュー指摘：ボタンの並びではなく、パネルに接続したタブの見せ方にする）。
   選択中のタブだけ白地にしてパネルとつなげ、非選択は薄いグレー地で奥に下げる */
.rt-voice__tabs {
	max-width: 900px;
	margin: 48px auto 0;
}
.rt-voice__tablist {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: end;
	gap: 6px;
}
.rt-voice__tablist li {
	display: flex;
}
.rt-voice__tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 12px 10px;
	border: 1px solid var(--line);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background-color: #edf0f7;
	color: #555;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}
.rt-voice__tab:hover {
	background-color: #fff;
	color: var(--navy);
}
.rt-voice__tab.is-current {
	/* パネルの上罫線に1px重ねて、タブとパネルを地続きに見せる */
	z-index: 1;
	min-height: 60px;
	margin-bottom: -1px;
	border-top: 4px solid var(--navy);
	background-color: #fff;
	color: var(--navy);
}

/* パネル */
/* パネル一式をカード化。幅はセクションのコンテナより狭い900pxに絞る */
.rt-voice__panel {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	/* タブとの間に少し余白を入れる（レビュー指摘） */
	padding: 10px 40px 40px;
	border: 1px solid var(--line);
	border-radius: 0 0 12px 12px;
	background-color: #fff;
	box-shadow: 0 2px 12px rgba(12, 11, 134, 0.06);
}
.rt-voice__panel[hidden] {
	display: none;
}
/* イラストの下端を罫線に接地させるため、余白はテキスト側だけに持たせる */
.rt-voice__head {
	display: flex;
	align-items: flex-end;
	gap: 28px;
	border-bottom: 1px solid var(--line);
}
.rt-voice__headtext {
	padding-bottom: 24px;
}
/* イラストは縦横比がタブごとに違うため、高さを固定して下端を罫線に接地させる
   （レビュー指摘：どのタブでもイラストの高さを揃える） */
.rt-voice__illust {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 130px;
	height: 150px;
	padding-top: 10px;
}
.rt-voice__illust img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
}
.rt-voice__cat {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}
.rt-voice__catch {
	margin-top: 10px;
	color: var(--navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.45;
}
/* 鉤括弧はCSSで付与し、原稿側には持たせない */
.rt-voice__catch::before {
	content: "「";
}
.rt-voice__catch::after {
	content: "」";
}
.rt-voice__desc {
	margin: 0 0 26px;
	font-size: var(--fs-body);
	line-height: 1.85;
}

/* 該当サービス／関連導入事例 */
/* 左：相談内容と該当サービス／右：関連導入事例。事例側を狭くして全体の高さを抑える */
.rt-voice__cols {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	margin-top: 28px;
}
.rt-voice__colhead {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}
.rt-voice__services {
	margin-top: 18px;
}
.rt-voice__services li + li {
	margin-top: 10px;
}
/* ボタン型のリンク。領域モーダルのリストと同じ質感に揃えている */
.rt-voice__service {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 10px 42px 10px 18px;
	border: 1px solid var(--line);
	border-radius: 100px;
	background-color: #fff;
	color: var(--navy);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.5;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.rt-voice__service::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(45deg);
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--navy);
	border-right: 2px solid var(--navy);
	transition: border-color 0.2s;
}
.rt-voice__service:hover {
	border-color: var(--navy);
	background-color: var(--navy);
	color: #fff;
}
.rt-voice__service:hover::after {
	border-color: #fff;
}

.rt-voice__case {
	display: block;
	margin-top: 14px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background-color: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.rt-voice__case:hover {
	border-color: var(--navy);
	box-shadow: 0 2px 10px rgba(12, 11, 134, 0.08);
}
.rt-voice__case-img {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	background-color: var(--bg-gray);
}
.rt-voice__case-img img {
	display: block;
	width: 100%;
	height: auto;
}
.rt-voice__case-body {
	display: block;
	margin-top: 10px;
}
.rt-voice__case-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: var(--fs-note);
	font-weight: 700;
	line-height: 1.4;
	color: var(--navy);
}
.rt-voice__case-text {
	display: block;
	margin-top: 8px;
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.7;
	/* 4行で打ち切り、カードの高さを抑える */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

@media (max-width: 767px) {
	.rt-voice {
		padding: 48px 0 56px;
	}
	/* 5つのタブは1行の横スクロールにする。選択中タブの見せ方はPCと共通 */
	.rt-voice__tabs {
		margin-top: 28px;
		margin-inline: -16px;
		padding-inline: 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.rt-voice__tabs::-webkit-scrollbar {
		display: none;
	}
	.rt-voice__tablist {
		display: flex;
		gap: 4px;
		width: max-content;
	}
	.rt-voice__tab {
		min-height: 44px;
		padding: 8px 16px;
		white-space: nowrap;
	}
	.rt-voice__tab.is-current {
		min-height: 48px;
	}
	/* ---- パネルは1画面（375×812で固定メニューを除いた高さ）に収める（レビュー指摘） ----
	   文字サイズは基準（本文16px／注釈14px）を守り、余白・イラスト・事例サムネイルで詰める */
	.rt-voice__panel {
		padding: 0 16px 12px;
		border-radius: 0 0 8px 8px;
	}
	.rt-voice__head {
		gap: 10px;
	}
	.rt-voice__illust {
		width: 44px;
		padding-top: 8px;
	}
	.rt-voice__headtext {
		padding: 10px 0 8px;
	}
	.rt-voice__cat {
		font-size: var(--fs-note);
		line-height: 1.3;
	}
	.rt-voice__catch {
		margin-top: 2px;
		font-size: 17px;
		line-height: 1.4;
	}
	.rt-voice__cols {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 10px;
	}
	.rt-voice__desc {
		margin: 0 0 10px;
		line-height: 1.65;
	}
	.rt-voice__services {
		margin-top: 6px;
	}
	.rt-voice__services li + li {
		margin-top: 5px;
	}
	.rt-voice__service {
		min-height: 44px;
		padding: 8px 36px 8px 16px;
		line-height: 1.4;
	}
	.rt-voice__service::after {
		right: 16px;
	}
	.rt-voice__case {
		margin-top: 6px;
		padding: 8px 12px;
	}
	/* 事例はサムネイルを省き、テキストだけで見せる */
	.rt-voice__case-img {
		display: none;
	}
	.rt-voice__case-body {
		margin-top: 0;
	}
	.rt-voice__case-text {
		margin-top: 4px;
		line-height: 1.6;
		-webkit-line-clamp: 2;
	}
}
/* --------------------------------------------------------------------------
   選ばれる理由
   レビュー指摘：縦に長い3ブロックをやめ、横並びのカードにしてコンパクト化。
   カードを押すと、これまでの本文をモーダル（.rt-areamodal を流用）で読める
   -------------------------------------------------------------------------- */
.rt-reason {
	padding: 76px 0 90px;
	background-color: #fff;
}
.rt-reason__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 48px auto 0;
}
.rt-reason__item {
	display: flex;
}
.rt-reason__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 28px 24px 22px;
	border: 2px solid #1d2b4f;
	border-radius: 20px;
	background-color: #fff;
	color: var(--ink);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: box-shadow 0.2s, transform 0.2s;
}
.rt-reason__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(12, 11, 134, 0.12);
}
@media (prefers-reduced-motion: reduce) {
	.rt-reason__card:hover {
		transform: none;
	}
}
.rt-reason__head {
	display: block;
}
.rt-reason__num {
	display: block;
	color: var(--orange);
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.06em;
}
.rt-reason__label {
	display: block;
	position: relative;
	margin-top: 8px;
	padding-bottom: 12px;
	color: var(--navy);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.35;
}
.rt-reason__label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	background-color: var(--orange);
}
.rt-reason__title {
	display: block;
	margin-top: 14px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}
.rt-reason__img {
	display: block;
	margin-top: auto;
	padding-top: 18px;
}
.rt-reason__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 10px;
}
.rt-reason__more {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 14px;
	color: var(--blue);
	font-size: var(--fs-body);
	font-weight: 700;
}

/* モーダル内（.rt-reason__detail を複製した中身） */
.rt-reason__detail-img {
	margin: 0 0 18px;
}
.rt-reason__detail-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}
.rt-reason__detail-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.rt-reason__detail-head .rt-reason__num {
	display: inline;
}
.rt-reason__detail-label {
	color: var(--navy);
	font-size: 18px;
	font-weight: 700;
}
.rt-reasonmodal .rt-areamodal__title {
	margin-top: 6px;
}
.rt-reason__text {
	margin-top: 14px;
	font-size: var(--fs-body);
	line-height: 1.85;
}
.rt-reason__point {
	margin-top: 20px;
	padding-left: 14px;
	border-left: 3px solid var(--orange);
	color: var(--navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
}

@media (max-width: 1023px) {
	.rt-reason__list {
		gap: 16px;
	}
	.rt-reason__card {
		padding: 22px 18px 18px;
	}
	.rt-reason__label {
		font-size: 22px;
	}
	.rt-reason__title {
		font-size: 16px;
	}
	.rt-reason__title br {
		display: none;
	}
}
/* SP：3枚を縦に積み、テキスト左・写真右の横長カードにして高さを抑える */
@media (max-width: 767px) {
	.rt-reason {
		padding: 48px 0 56px;
	}
	.rt-reason__list {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 28px;
	}
	.rt-reason__card {
		display: grid;
		grid-template-columns: 1fr 104px;
		grid-template-areas:
			"head img"
			"title img"
			"more more";
		column-gap: 14px;
		padding: 16px;
		border-width: 1px;
		border-color: var(--line);
		border-radius: 12px;
	}
	.rt-reason__head {
		grid-area: head;
		display: flex;
		align-items: baseline;
		gap: 8px;
	}
	.rt-reason__num {
		font-size: 16px;
	}
	.rt-reason__label {
		margin-top: 0;
		padding-bottom: 0;
		font-size: 20px;
	}
	.rt-reason__label::after {
		display: none;
	}
	.rt-reason__title {
		grid-area: title;
		margin-top: 6px;
		font-size: 16px;
		line-height: 1.5;
	}
	.rt-reason__img {
		grid-area: img;
		align-self: center;
		margin-top: 0;
		padding-top: 0;
	}
	.rt-reason__img img {
		aspect-ratio: 1;
		border-radius: 8px;
	}
	.rt-reason__more {
		grid-area: more;
		margin-top: 8px;
		min-height: 32px;
	}
}

/* --------------------------------------------------------------------------
   お知らせ・ニュースリリース
   -------------------------------------------------------------------------- */
.rt-news {
	padding: 76px 0 90px;
	background-color: #fff;
}
.rt-news__box {
	max-width: 961px;
	margin: 44px auto 0;
	padding: 22px 56px 30px;
	border-radius: 18px;
	background-color: var(--bg-gray);
}
.rt-news__item {
	display: grid;
	grid-template-columns: 136px 88px 1fr;
	align-items: start;
	gap: 0 24px;
	padding: 18px 0;
	border-bottom: 1px dashed #b9b9b9;
}
.rt-news__item:last-child {
	border-bottom: 0;
}
.rt-news__date {
	font-size: var(--fs-note);
	line-height: 22px;
	padding-top: 1px;
}
.rt-news__cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 22px;
	border: 1px solid var(--ink);
	font-size: var(--fs-note);
	line-height: 1;
}
.rt-news__title {
	font-size: 16px;
	line-height: 24px;
}
.rt-news__title a:hover {
	text-decoration: underline;
}
.rt-news__link {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	max-width: 961px;
	margin: 22px auto 0;
	color: var(--blue);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 20px;
}
.rt-news__link-icon {
	position: relative;
	width: 21px;
	height: 21px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--blue);
}
.rt-news__link-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 48%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
@media (max-width: 767px) {
	.rt-news {
		padding: 48px 0 56px;
	}
	.rt-news__box {
		padding: 8px 20px 16px;
		border-radius: 12px;
	}
	.rt-news__item {
		grid-template-columns: auto 88px;
		gap: 8px 12px;
	}
	.rt-news__title {
		grid-column: 1 / -1;
		/* font-size はPCの16pxを維持（SPで縮小しない） */
	}
}

/* --------------------------------------------------------------------------
   まずは気軽に、情報収集から
   -------------------------------------------------------------------------- */
.rt-collect {
	padding: 76px 0 90px;
	background-color: #fff;
}
.rt-collect__list {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 54px;
}
.rt-collect__item {
	display: flex;
	flex-direction: column;
	width: 520px;
	border: 3px solid var(--navy);
	border-radius: 10px;
	overflow: hidden;
	background-color: #fff;
}
.rt-collect__head {
	/* 枠の上端まで帯を伸ばす（h3の標準マージンを打ち消す）。
	   上を詰めた分、帯は67px→56pxへ少し細く調整 */
	margin: 0;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--navy);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
}
.rt-collect__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
	padding: 20px 20px 30px;
}
.rt-collect__text {
	font-size: 16px;
	line-height: 26px;
}
.rt-collect__thumb {
	width: 384px;
	max-width: 100%;
	/* 下24px＝レビュー指摘（画像とボタンが接していたため） */
	margin: 15px 0 24px;
}
.rt-collect__thumb a {
	display: block;
	transition: opacity 0.2s;
}
.rt-collect__thumb a:hover {
	opacity: 0.85;
}
.rt-collect__thumb img {
	display: block;
	width: 100%;
	height: auto;
}
.rt-collect__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	/* アローは右端固定のため、ラベルは中央のまま。position の基準にする */
	position: relative;
	width: 329px;
	max-width: 100%;
	height: 60px;
	margin-top: auto;
	border-radius: 100px;
	background-color: var(--blue);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
.rt-collect__btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 10px;
	height: 16px;
	background: url("../common_v10/images/icn-bullet-white.svg") no-repeat center center/contain;
}
.rt-collect__btn:hover {
	opacity: 0.85;
}
@media (max-width: 1100px) {
	.rt-collect__list {
		flex-wrap: wrap;
	}
}
@media (max-width: 767px) {
	.rt-collect {
		padding: 48px 0 56px;
	}
	.rt-collect__list {
		margin-top: 32px;
		gap: 24px;
	}
	.rt-collect__item {
		width: 100%;
	}
	.rt-collect__list {
		gap: 16px;
	}
	.rt-collect__head {
		height: 48px;
		font-size: 19px;
	}
	/* SPはサムネイル（左）とテキスト（右）を横並びにして高さを抑える（スマホファーストの追加調整） */
	.rt-collect__body {
		display: grid;
		grid-template-columns: 128px 1fr;
		align-items: center;
		gap: 14px 14px;
		padding: 16px;
	}
	.rt-collect__text {
		grid-column: 2;
		grid-row: 1;
		line-height: 1.6;
	}
	.rt-collect__thumb {
		grid-column: 1;
		grid-row: 1;
		width: 128px;
		margin: 0;
	}
	.rt-collect__btn {
		grid-column: 1 / -1;
		width: 100%;
		height: 52px;
		margin-top: 0;
		font-size: 18px;
	}
}

/* --------------------------------------------------------------------------
   地域とともに＋CTA
   -------------------------------------------------------------------------- */
.rt-closing {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(to bottom, #ffffff 0%, #f6fafd 52%, #e1f0f8 100%);
}
.rt-closing__inner {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 1440px;
	margin-inline: auto;
	min-height: 642px;
	padding: 42px 24px 0;
}
.rt-closing__photo {
	position: absolute;
	top: 42px;
	left: 95px;
	width: 1128px;
	height: 600px;
	pointer-events: none;
}
.rt-closing__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
	transform: scaleX(-1);
}
.rt-closing__body {
	position: relative;
	z-index: 1;
	margin-left: auto;
	width: 563px;
	padding-top: 56px;
}
/* 2行に収まる最大サイズ。文言を変えるときは幅563pxに収まるか要確認 */
.rt-closing__title {
	margin: 0;
	font-size: 46px;
	font-weight: 700;
	line-height: 57px;
}
.rt-closing__text {
	margin-top: 21px;
	font-size: 16px;
	line-height: 26px;
}
.rt-closing__cta {
	margin-top: 60px;
}
.rt-closing__cta-lead {
	font-size: 20px;
	font-weight: 500;
}
.rt-closing__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 440px;
	max-width: 100%;
	height: 80px;
	margin-top: 21px;
	border-radius: 100px;
	background-color: var(--cta-red);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
.rt-closing__btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	width: 12px;
	height: 19px;
	background: url("../common_v10/images/icn-bullet-white.svg") no-repeat center center/contain;
}
.rt-closing__btn:hover {
	opacity: 0.88;
}
@media (max-width: 1250px) {
	.rt-closing__photo {
		left: -60px;
		width: 900px;
	}
	.rt-closing__body {
		width: 52%;
	}
	.rt-closing__title {
		font-size: 42px;
		line-height: 1.35;
	}
}
@media (max-width: 767px) {
	.rt-closing__inner {
		display: block;
		min-height: 0;
		padding: 0 16px 48px;
	}
	.rt-closing__photo {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
	}
	.rt-closing__photo img {
		height: auto;
	}
	.rt-closing__body {
		width: 100%;
		padding-top: 0;
	}
	.rt-closing__title {
		font-size: 30px;
	}
	.rt-closing__cta {
		margin-top: 36px;
		text-align: center;
	}
	.rt-closing__cta-lead {
		font-size: 16px;
	}
	.rt-closing__btn {
		width: 100%;
		height: 68px;
		font-size: 17px;
		margin-inline: auto;
	}
}


/* --------------------------------------------------------------------------
   ブランド動画モーダル
   -------------------------------------------------------------------------- */
.rt-movie {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.rt-movie[hidden] {
	display: none;
}
.rt-movie__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.75);
}
.rt-movie__inner {
	position: relative;
	width: min(900px, 100%);
}
.rt-movie__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.rt-movie__close::before,
.rt-movie__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 2px;
	background-color: #fff;
}
.rt-movie__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.rt-movie__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.rt-movie__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: #000;
	overflow: hidden;
	border-radius: 6px;
}
.rt-movie__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* 視聴中でも他のコンテンツへ移動できるようにする導線 */
.rt-movie__links {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}
.rt-movie__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	height: 52px;
	padding: 0 40px 0 24px;
	border-radius: 100px;
	background-color: #fff;
	color: var(--navy);
	font-size: 16px;
	font-weight: 700;
}
.rt-movie__link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--navy);
	border-right: 2px solid var(--navy);
}
.rt-movie__link:hover {
	background-color: var(--navy);
	color: #fff;
}
.rt-movie__link:hover::after {
	border-color: #fff;
}
@media (max-width: 767px) {
	.rt-movie {
		padding: 16px;
	}
	.rt-movie__links {
		flex-direction: column;
		gap: 10px;
	}
	.rt-movie__link {
		min-width: 0;
		width: 100%;
		height: 48px;
		/* font-size はPCの16pxを維持（SPで縮小しない） */
	}
}


/* --------------------------------------------------------------------------
   5領域の詳細モーダル
   -------------------------------------------------------------------------- */
.rt-areamodal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.rt-areamodal[hidden] {
	display: none;
}
.rt-areamodal__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
}
.rt-areamodal__inner {
	position: relative;
	width: min(720px, 100%);
	max-height: calc(100vh - 48px);
	padding: 40px;
	border-radius: 12px;
	background-color: #fff;
	overflow-y: auto;
}
.rt-areamodal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.rt-areamodal__close::before,
.rt-areamodal__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	background-color: var(--ink);
}
.rt-areamodal__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.rt-areamodal__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.rt-areamodal__target {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 100px;
	background-color: var(--card-head);
	color: var(--navy);
	font-size: var(--fs-note);
	font-weight: 700;
}
.rt-areamodal__title {
	margin: 12px 0 0;
	color: var(--navy);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
}
.rt-areamodal__lead {
	margin-top: 14px;
	font-size: var(--fs-body);
	line-height: 1.85;
}
.rt-areamodal__subhead {
	margin-top: 28px;
	padding-left: 12px;
	border-left: 3px solid var(--orange);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}
.rt-areamodal__list {
	margin-top: 16px;
}
.rt-areamodal__list li + li {
	margin-top: 10px;
}
.rt-areamodal__list a {
	display: block;
	position: relative;
	padding: 14px 40px 14px 16px;
	border: 1px solid var(--line);
	border-radius: 6px;
	transition: border-color 0.2s, background-color 0.2s;
}
.rt-areamodal__list a:hover {
	border-color: var(--navy);
	background-color: var(--bg-soft);
}
.rt-areamodal__list a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%) rotate(45deg);
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--navy);
	border-right: 2px solid var(--navy);
}
.rt-areamodal__list b {
	display: block;
	color: var(--navy);
	font-size: 16px;
	line-height: 1.4;
}
.rt-areamodal__list span {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--muted);
}
.rt-areamodal__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	margin-top: 28px;
	border-radius: 100px;
	background-color: var(--blue);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}
.rt-areamodal__btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 10px;
	height: 16px;
	background: url("../common_v10/images/icn-bullet-white.svg") no-repeat center center/contain;
}
.rt-areamodal__btn:hover {
	opacity: 0.85;
}
@media (max-width: 767px) {
	.rt-areamodal {
		padding: 16px;
	}
	.rt-areamodal__inner {
		padding: 32px 20px 24px;
	}
	.rt-areamodal__title {
		font-size: 21px;
	}
}


/* --------------------------------------------------------------------------
   モーダルの表示アニメーション
   既定を「表示済み」の状態にし、開く瞬間だけ is-entering で少し下から始める。
   opacity は transition の対象にしていない（万一 transition が働かない環境でも
   モーダルが透明のまま残らないようにするため）。動きは transform で見せる
   -------------------------------------------------------------------------- */
.rt-areamodal__inner,
.rt-movie__inner {
	transform: none;
	transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.rt-areamodal.is-entering .rt-areamodal__inner,
.rt-movie.is-entering .rt-movie__inner {
	transform: translateY(18px) scale(0.98);
	transition: none;
}
@media (prefers-reduced-motion: reduce) {
	.rt-areamodal__inner,
	.rt-movie__inner {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   SPのタップ領域補正（44×44px以上を確保）
   カルーセルの矢印・ドット、テキストリンクは見た目を変えずに当たり判定だけ広げる
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.rt-pickup__arrow {
		width: 44px;
		height: 44px;
	}
	/* ドットは見た目10px（現在地14px）に詰め、当たり判定は padding で確保する */
	.rt-pickup__dot {
		width: 26px;
		height: 32px;
		padding: 11px 8px;
		border-radius: 50%;
		background-clip: content-box;
	}
	.rt-pickup__dot.is-current {
		width: 26px;
		height: 32px;
		padding: 9px 6px;
		background-clip: content-box;
	}
	.rt-news__link a,
	.rt-movie__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ==========================================================================
   SPレビュー（SP02）対応
   すべて767px以下のみ。PCの見た目は変えない。
   各セクションの既存SP指定より後ろに置き、同じ詳細度で上書きしている
   ========================================================================== */

/* SPだけで効かせる改行 */
.rt-br-sp {
	display: none;
}

@media (max-width: 767px) {
	.rt-br-sp {
		display: inline;
	}

	/* ---- FV ---------------------------------------------------------------
	   #1 見出し・リード文を少し下げる（ロゴとの間隔を確保）
	   #2 動画はSPのみメインビジュアルの下へ出す。
	      HTMLの順序は変えず、背景画像を ::before（グリッドの1〜2行目）に持たせて
	      3行目の動画を背景の外に出している */
	.rt-fv {
		padding: 0;
		background-color: #fff;
		background-image: none;
	}
	.rt-fv__inner {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		padding: 0 16px;
	}
	.rt-fv__inner::before {
		content: "";
		grid-column: 1;
		grid-row: 1 / 3;
		margin-inline: -16px;
		background-image: url("../images/fv-bg.jpg");
		background-size: cover;
		background-position: 72% top;
		background-repeat: no-repeat;
	}
	.rt-fv__title,
	.rt-fv__text {
		position: relative;
		grid-column: 1;
	}
	.rt-fv__title {
		grid-row: 1;
		padding-top: 128px;
	}
	.rt-fv__text {
		grid-row: 2;
		align-self: start;
		margin: 20px 0 36px;
	}
	.rt-fv__movie {
		grid-column: 1;
		grid-row: 3;
		justify-self: center;
		width: 100%;
		max-width: 343px;
		margin: 24px 0 0;
	}

	/* ---- PICK UP：#3 見出しをセンタリング ---- */
	.rt-pickup {
		padding-top: 40px;
	}
	.rt-pickup__label {
		text-align: center;
	}

	/* ---- 5領域 ----------------------------------------------------------- */
	/* #5 中心の帯は背景色なし。ロゴはカラー（HTML側で切替）、縦線とコピーは黒 */
	.rt-areas__center {
		justify-content: center;
		padding: 8px 0;
		background-image: none;
		color: var(--ink);
	}
	.rt-areas__tagline::before {
		background-color: var(--ink);
	}

	/* #6 カードは全て同じサイズの横スライド。アイコンを大きくし、中身とアローを中央揃えに */
	.rt-areas__figure {
		padding-inline: 0;
	}
	.rt-areas__center {
		margin-inline: 16px;
		width: auto;
	}
	.rt-areas__nodes {
		display: flex;
		gap: 12px;
		margin: 0;
		padding: 4px 16px 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.rt-areas__nodes::-webkit-scrollbar {
		display: none;
	}
	/* 1枚あたり画面の約6割。次のカードが覗くことで横に送れると分かるようにする */
	.rt-areas__node {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
	.rt-areas__node--fac {
		grid-column: auto;
	}
	.rt-areas__node > a,
	.rt-areas__node > button {
		align-items: center;
		justify-content: flex-start;
		gap: 6px;
		height: 100%;
		padding: 20px 14px 16px;
		text-align: center;
	}
	.rt-areas__icon {
		width: 56px;
	}
	.rt-areas__node-title,
	.rt-areas__node-target,
	.rt-areas__node-text {
		width: 100%;
		text-align: center;
	}
	/* 中の白矢印（::after）の位置基準にするため relative にする */
	.rt-areas__more {
		position: relative;
		right: auto;
		bottom: auto;
		margin-top: auto;
	}
	/* アローを下端に揃えるため、本文とアローの間を伸縮させる */
	.rt-areas__node-text {
		margin-bottom: 10px;
	}
	/* 中央揃えでは原稿の改行位置のほうが読みやすいため、SP2カラム時に消した改行を戻す */
	.rt-areas__node-text br {
		display: inline;
	}

	/* ---- ご相談例 ---------------------------------------------------------
	   #7 SPはタブをやめ、課題を選ぶボタン群（2列）にする。
	      操作・読み上げの仕組み（role="tab"）はPCと共通のまま、見た目だけ変える */
	.rt-voice__tabs {
		margin: 24px 0 0;
		padding: 0;
		overflow: visible;
	}
	.rt-voice__tablist {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		width: auto;
	}
	/* 5件目は1行ぶん使い、奇数の空きを作らない */
	.rt-voice__tablist li:last-child {
		grid-column: 1 / -1;
	}
	.rt-voice__tab,
	.rt-voice__tab.is-current {
		min-height: 48px;
		margin: 0;
		padding: 8px 12px;
		border: 1px solid var(--line);
		border-radius: 100px;
		background-color: #fff;
		color: var(--navy);
		white-space: normal;
	}
	.rt-voice__tab.is-current {
		border-color: var(--navy);
		background-color: var(--navy);
		color: #fff;
	}
	.rt-voice__panel {
		margin-top: 16px;
		padding: 0 16px 16px;
		border-radius: 12px;
	}

	/* #8 人物イラストはSPでは出さない */
	.rt-voice__illust {
		display: none;
	}
	/* 「〇〇 相談例」はSPでは出さず、そのぶん上を詰める（レビュー指摘） */
	.rt-voice__cat {
		display: none;
	}
	.rt-voice__headtext {
		padding: 10px 0 10px;
	}

	/* #9 該当サービスは小さいボタンにして横に並べる（折り返し） */
	.rt-voice__services {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 8px;
	}
	.rt-voice__services li + li {
		margin-top: 0;
	}
	.rt-voice__service {
		min-height: 40px;
		padding: 6px 30px 6px 14px;
		font-size: var(--fs-note);
		line-height: 1.4;
	}
	.rt-voice__service::after {
		right: 14px;
		width: 6px;
		height: 6px;
	}

	/* ---- 選ばれる理由 -----------------------------------------------------
	   #10 カードはPC版と同じ構成（番号・キーワード・下線・見出し・写真・詳しく見る）にし、
	       横スライドで見せる */
	.rt-reason__list {
		display: flex;
		gap: 12px;
		margin-top: 28px;
		margin-inline: -16px;
		padding: 4px 16px 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.rt-reason__list::-webkit-scrollbar {
		display: none;
	}
	.rt-reason__item {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}
	.rt-reason__card {
		display: flex;
		flex-direction: column;
		padding: 22px 18px 16px;
		border: 2px solid #1d2b4f;
		border-radius: 20px;
	}
	.rt-reason__head {
		display: block;
	}
	.rt-reason__num {
		font-size: 18px;
	}
	.rt-reason__label {
		margin-top: 6px;
		padding-bottom: 10px;
		font-size: 22px;
	}
	.rt-reason__label::after {
		display: block;
	}
	.rt-reason__title {
		margin-top: 12px;
		font-size: 16px;
		line-height: 1.6;
	}
	.rt-reason__img {
		margin-top: auto;
		padding-top: 14px;
	}
	.rt-reason__img img {
		aspect-ratio: 3 / 2;
		border-radius: 10px;
	}
	.rt-reason__more {
		justify-content: flex-end;
		margin-top: 12px;
		min-height: 32px;
	}

	/* ---- 問い合わせ枠 -----------------------------------------------------
	   #11 business.jcom.co.jp の .board-cv と同じ見せ方
	       （赤枠の角丸ボックス、斜線で挟んだリード文、赤いピル型ボタン） */
	.rt-closing__cta {
		margin-top: 32px;
		padding: 24px 16px;
		border: 2px solid var(--orange);
		border-radius: 32px;
		background-color: #fff;
		text-align: center;
	}
	.rt-closing__cta-lead {
		margin-bottom: 16px;
		color: #333;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
	}
	.rt-closing__cta-lead span {
		position: relative;
		display: inline-block;
		padding: 0 16px;
	}
	.rt-closing__cta-lead span::before,
	.rt-closing__cta-lead span::after {
		content: "";
		position: absolute;
		bottom: 0;
		width: 1px;
		height: 100%;
		background-color: #333;
	}
	.rt-closing__cta-lead span::before {
		left: 0;
		transform: rotate(-30deg);
	}
	.rt-closing__cta-lead span::after {
		right: 0;
		transform: rotate(30deg);
	}
	.rt-closing__btn {
		height: auto;
		min-height: 80px;
		margin-top: 0;
		padding: 14px 40px;
		background-color: var(--orange);
		font-size: 18px;
		line-height: 1.3;
	}
}

/* ==========================================================================
   SPレビュー（SP03）対応
   すべて767px以下のみ（スライダーのドットはPCでは生成されても表示しない）
   ========================================================================== */

/* 横スライドの件数・現在地ドット（script.js が data-sp-slider の直後に生成） */
.rt-slider-dots {
	display: none;
}

@media (max-width: 767px) {
	/* ---- FV --------------------------------------------------------------
	   #1 キャッチコピーが写真と同化するため、MVを高くして
	      下から白→透明のグラデーションを敷き、その上に文字を置く */
	.rt-fv__inner::after {
		content: "";
		position: relative;
		grid-column: 1;
		grid-row: 1 / 3;
		margin-inline: -16px;
		background-image: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.92) 38%, rgba(255, 255, 255, 0.6) 58%, rgba(255, 255, 255, 0) 80%);
	}
	.rt-fv__title,
	.rt-fv__text {
		z-index: 1;
	}
	.rt-fv__title {
		padding-top: 220px;
	}
	.rt-fv__text {
		margin-bottom: 24px;
		padding: 0;
		background-color: transparent;
	}

	/* #2 動画サムネイルを小さくし、タイトルと再生時間は2行に分ける */
	.rt-fv__movie {
		max-width: 260px;
		margin-top: 8px;
	}
	.rt-fv__duration {
		display: block;
		margin: 2px 0 0;
	}

	/* ---- 横スライドのドット（#3 5つの領域／#7 選ばれる理由） ---- */
	.rt-slider-dots {
		display: flex;
		justify-content: center;
		margin-top: 8px;
	}
	/* 見た目はPICK UPのドットと同じ（10px／現在地14px）。当たり判定は padding で確保 */
	.rt-slider-dots__dot {
		width: 26px;
		height: 32px;
		padding: 11px 8px;
		border: 0;
		border-radius: 50%;
		background-color: #d9d9d9;
		background-clip: content-box;
		cursor: pointer;
	}
	.rt-slider-dots__dot.is-current {
		padding: 9px 6px;
		background-color: var(--blue);
	}

	/* 5つの領域：1行が長い「デジタルの力で業務を最適化」が途中で折れない幅にする */
	.rt-areas__node {
		flex-basis: 68%;
	}
	.rt-areas__node > a,
	.rt-areas__node > button {
		padding-inline: 8px;
	}

	/* ---- ご相談例 ---------------------------------------------------------
	   #4 課題の切り替えは横スクロールの小さなチップにして高さを抑える。
	      右端をフェードさせ、続きがあることを示す */
	.rt-voice__tabs {
		margin: 20px -16px 0;
		padding: 0 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
		mask-image: linear-gradient(to right, #000 85%, transparent);
	}
	.rt-voice__tablist {
		display: flex;
		gap: 6px;
		width: max-content;
		padding-right: 32px;
	}
	.rt-voice__tablist li:last-child {
		grid-column: auto;
	}
	.rt-voice__tab,
	.rt-voice__tab.is-current {
		min-height: 40px;
		padding: 6px 14px;
		font-size: var(--fs-note);
		white-space: nowrap;
	}
	.rt-voice__panel {
		margin-top: 12px;
	}

	/* #5 該当サービスは枠なしの「アロー＋テキスト」にして詰める */
	.rt-voice__services {
		gap: 0 16px;
		margin-top: 4px;
	}
	.rt-voice__service {
		min-height: 36px;
		padding: 4px 0 4px 16px;
		border: 0;
		border-radius: 0;
		background-color: transparent;
	}
	.rt-voice__service::after {
		right: auto;
		left: 0;
	}
	.rt-voice__service:hover {
		background-color: transparent;
		color: var(--navy);
		text-decoration: underline;
	}
	.rt-voice__service:hover::after {
		border-color: var(--navy);
	}

	/* #6 関連導入事例：右側にアローを置き、押せるカードだと分かるようにする */
	.rt-voice__case {
		position: relative;
		padding-right: 48px;
	}
	.rt-voice__case::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 12px;
		transform: translateY(-50%);
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: var(--blue) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M11 8.5l4.5 4.5-4.5 4.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
	}

	/* ---- 近くに、相談できる相手がいます ----------------------------------
	   #8 人物写真を小さな挿絵ではなく、セクションの背景として右上に敷く */
	.rt-closing__inner {
		position: relative;
		padding-top: 190px;
	}
	.rt-closing__photo {
		position: absolute;
		top: 0;
		right: 0;
		left: auto;
		width: 115%;
		height: 300px;
		overflow: hidden;
	}
	.rt-closing__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 72% top;
		/* 元画像は人物が右寄り。SPは反転せず右側に置き、左側を文字の余白にする */
		transform: none;
	}
	/* 写真の下側を背景色へなじませ、見出しを読みやすくする */
	.rt-closing__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0) 65%);
	}
	.rt-closing__body {
		position: relative;
		z-index: 1;
	}

	/* #9 ボタンは1行・高さ60pxに */
	.rt-closing__btn {
		min-height: 60px;
		padding: 0 44px;
		font-size: 18px;
	}
}

/* ==========================================================================
   SPレビュー（SP04）対応
   ========================================================================== */

/* PCだけで効かせる改行（SPでは1続きの文章にする） */
.rt-br-pc {
	display: inline;
}
/* SP用のプルダウン・スライダーの送りボタンはPCでは使わない */
.rt-voice__select,
.rt-reason__next {
	display: none;
}

@media (max-width: 767px) {
	.rt-br-pc {
		display: none;
	}

	/* #1 背景写真をもっと見せたいので、MVを高くしてコピーを下げる */
	.rt-fv__title {
		padding-top: 300px;
	}

	/* ---- 5つの領域 --------------------------------------------------------
	   #3 カードを画面中央に置き、左右の余白で前後のカードを覗かせる。
	      端までいくと反対側へ回る（ループはscript.js側） */
	.rt-areas__nodes {
		padding-inline: calc((100vw - 68vw) / 2);
		scroll-padding-inline: 0;
		scroll-snap-type: x mandatory;
	}
	.rt-areas__node {
		flex-basis: 68vw;
		scroll-snap-align: center;
	}

	/* ---- ご相談例 ---------------------------------------------------------
	   #7 課題の切り替えはタブの形をしたプルダウンにする */
	.rt-voice__tabs {
		display: none;
	}
	.rt-voice__select {
		position: relative;
		display: flex;
		align-items: center;
		gap: 10px;
		width: max-content;
		max-width: 100%;
		margin: 24px 0 0;
		padding: 10px 14px;
		border: 1px solid var(--line);
		border-bottom: 0;
		border-top: 4px solid var(--navy);
		border-radius: 10px 10px 0 0;
		background-color: #fff;
	}
	.rt-voice__select-label {
		color: var(--muted);
		font-size: var(--fs-note);
		white-space: nowrap;
	}
	.rt-voice__select select {
		appearance: none;
		-webkit-appearance: none;
		min-height: 36px;
		padding: 0 28px 0 0;
		border: 0;
		background: none;
		color: var(--navy);
		font-family: inherit;
		font-size: var(--fs-body);
		font-weight: 700;
		line-height: 1.4;
		cursor: pointer;
	}
	/* 右端の下向きアロー */
	.rt-voice__select::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 14px;
		width: 10px;
		height: 6px;
		margin-top: -3px;
		background-color: var(--navy);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		pointer-events: none;
	}
	.rt-voice__panel {
		margin-top: 0;
		border-top-left-radius: 0;
	}

	/* #5 該当サービスの行間を詰める */
	.rt-voice__services {
		gap: 0 14px;
	}
	.rt-voice__service {
		min-height: 32px;
		padding-block: 2px;
	}

	/* ---- 選ばれる理由 -----------------------------------------------------
	   #8 横に送れることが伝わるよう、右端に白丸のアローを重ねる */
	.rt-reason__slider {
		position: relative;
	}
	/* 丸アローの意匠はバナーと共通（青丸＋白矢印） */
	/* 送りアローの意匠はPICK UPと共通（矢印のみ・#406faf）。
	   カードには重ねず、左右の余白に置く（レビュー指摘） */
	.rt-reason__next,
	.rt-reason__prev {
		display: block;
		position: absolute;
		/* 上下位置はカードの中央に合わせてJSが指定する */
		top: 50%;
		right: -14px;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		z-index: 2;
	}
	.rt-reason__next::before,
	.rt-reason__prev::before {
		content: "";
		display: block;
		width: 18px;
		height: 18px;
		margin: 0 auto;
		transform: translateX(-3px) rotate(45deg);
		border-top: 4px solid var(--blue);
		border-right: 4px solid var(--blue);
	}
	.rt-reason__prev {
		right: auto;
		left: -14px;
	}
	.rt-reason__prev::before {
		transform: translateX(3px) rotate(-135deg);
	}
	/* 送れる向きにだけアローを出す */
	.rt-reason__next[hidden],
	.rt-reason__prev[hidden] {
		display: none;
	}

	/* #9 お知らせの本文（以前のレビューで14pxにしていたが、0930の指摘でPCと同じ16pxに戻した） */
	.rt-news__title {
		font-size: 16px;
		line-height: 1.6;
	}

	/* #12 フッター下の空きをなくす。
	   固定メニューは本番同様、コピーライト帯に重ねる（フッター内の余白80pxで本文は隠れない） */
	body {
		padding-bottom: 0;
	}
}

/* ==========================================================================
   SPレビュー（SP05）対応
   ========================================================================== */
@media (max-width: 767px) {
	/* #3 中心の帯（ロゴ＋コピー）を少し大きく */
	.rt-areas__center {
		gap: 18px;
		padding: 18px 20px;
	}
	.rt-areas__brand {
		width: 88px;
	}
	.rt-areas__tagline {
		padding-left: 18px;
		font-size: 17px;
		line-height: 1.6;
	}
	.rt-areas__tagline::before {
		height: 44px;
	}

	/* #1 現在地の表示はドットではなく横線（バー）にする */
	.rt-slider-dots {
		gap: 4px;
		margin-top: 12px;
	}
	.rt-slider-dots__dot {
		width: 32px;
		height: 24px;
		padding: 10px 0;
		border-radius: 0;
		background-color: #d5d8e2;
		background-clip: content-box;
	}
	.rt-slider-dots__dot.is-current {
		padding: 10px 0;
		background-color: var(--navy);
	}

	/* #4 「お知らせ・ニュースリリース一覧はこちら」は中央揃え */
	.rt-news__link {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   バナー（J:COM BUSINESS MOBILE）
   5領域セクションの下に置く。幅800px・薄い枠線（レビュー指摘）
   -------------------------------------------------------------------------- */
.rt-banner {
	width: min(800px, 100% - 48px);
	margin: 48px auto 0;
}
.rt-banner__slider {
	position: relative;
}
/* 横スクロール＋スナップの素朴なカルーセル。バナーを増やすときは<li>を足すだけ */
.rt-banner__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	/* 送りは矢印・ドット・フリック（script.js）で行う。ブラウザの横スクロールは使わない（レビュー指摘 0929） */
	overflow-x: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: 8px;
	touch-action: pan-y;
}
.rt-banner__track::-webkit-scrollbar {
	display: none;
}
.rt-banner__item {
	flex: 0 0 100%;
	scroll-snap-align: start;
}
.rt-banner__link {
	display: block;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.rt-banner__link:hover {
	border-color: var(--navy);
	box-shadow: 0 2px 12px rgba(12, 11, 134, 0.1);
}
.rt-banner img {
	display: block;
	width: 100%;
	height: auto;
}
/* 前後の矢印。バナーには重ねず、左右の外側に置く（レビュー指摘）。
   意匠は青丸（--blue）＋白矢印で、他セクションの丸アローと揃える */
.rt-banner__arrow--prev {
	left: -56px;
}
.rt-banner__arrow--next {
	right: -56px;
}
/* 現在地のドット。PC・SPとも表示する */
.rt-banner__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	/* 意匠は PICK UP のドットに合わせる */
	gap: 15px;
	margin-top: 16px;
}
.rt-banner__dots:empty {
	display: none;
}
.rt-banner__dot {
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #d9d9d9;
	cursor: pointer;
}
.rt-banner__dot.is-current {
	width: 24px;
	height: 24px;
	background-color: var(--blue);
}
@media (max-width: 767px) {
	/* 矢印を外側に出すぶん、バナー本体の幅を詰める */
	.rt-banner {
		width: min(800px, 100% - 96px);
		margin-top: 32px;
	}
	.rt-banner__arrow {
		width: 36px;
		height: 36px;
	}
	.rt-banner__arrow--prev {
		left: -44px;
	}
	.rt-banner__arrow--next {
		right: -44px;
	}
	/* パネル上部の余白はSPでも10px */
	.rt-voice__panel {
		padding: 10px 16px 12px;
	}
}

/* ==========================================================================
   SPレビュー（SP05 #5）対応
   5つの領域は、指定サイトの「プレーンな無限ループスライダー」と同じ考え方で
   1枚ずつ自動で流れる形にする（ナビゲーションのバーは廃止）
   ========================================================================== */

/* 複製したカードはPCでは使わない（PCは円レイアウトのため） */
.rt-areas__node--clone {
	display: none;
}
/* 手動送りのボタンもSPだけで使う */
.rt-areas__nav {
	display: none;
}

@media (max-width: 767px) {
	/* はみ出したカードを隠す枠 */
	.rt-areas__figure {
		overflow: hidden;
	}
	/* スクロール操作はやめ、CSSアニメーションで一定速度で流す */
	.rt-areas__nodes {
		display: flex;
		width: max-content;
		/* 左右に (画面幅 - カード幅) / 2 の余白をとり、止まったカードが画面中央に来るようにする */
		padding: 4px calc((100vw - 68vw) / 2);
		overflow: visible;
		scroll-snap-type: none;
		animation: rt-areas-loop 30s linear infinite;
	}
	.rt-areas__node--clone {
		display: block;
	}
	.rt-areas__node {
		flex: 0 0 68vw;
		scroll-snap-align: none;
	}
	/* 2セット並べているので、半分（＋gapの半分）動いたら先頭に戻る */
	@keyframes rt-areas-loop {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(calc(-50% - 6px));
		}
	}
	/* 指で押している間は止める */
	.rt-areas__nodes:active {
		animation-play-state: paused;
	}
	/* 手動で次（前）のカードへ送るボタン。意匠はPICK UPのアローと共通 */
	.rt-areas__nav {
		display: block;
	}
	.rt-areas__nav--prev {
		left: 6px;
	}
	.rt-areas__nav--next {
		right: 6px;
	}
	/* 動きを減らす設定の端末では自動で流さない（送りボタンでの操作は可能） */
	@media (prefers-reduced-motion: reduce) {
		.rt-areas__nodes {
			animation: none;
		}
	}
}

/* ==========================================================================
   5つの領域の自動スライダー：停止／再生ボタンとドットナビ
   jcom.co.jp（キャンペーン・特典）と同じ構成。SPのみ表示
   ========================================================================== */
.rt-areas__control {
	display: none;
}

@media (max-width: 767px) {
	.rt-areas__control {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		margin-top: 10px;
	}
	/* 停止／再生ボタン。再生中は一時停止アイコン（||）、停止中は再生アイコン（▶） */
	.rt-areas__toggle {
		position: relative;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.rt-areas__toggle::before,
	.rt-areas__toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 3px;
		height: 12px;
		margin-top: -6px;
		border-radius: 999px;
		background-color: #939393;
	}
	.rt-areas__toggle::before {
		left: 11px;
	}
	.rt-areas__toggle::after {
		left: 18px;
	}
	/* 停止中は▶（三角形）に切り替える */
	.rt-areas__toggle.is-paused::before {
		left: 12px;
		width: 0;
		height: 0;
		margin-top: -7px;
		border-radius: 0;
		background: none;
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
		border-left: 12px solid #939393;
	}
	.rt-areas__toggle.is-paused::after {
		display: none;
	}

	.rt-areas__dots {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 見た目は12px（現在地16px）の丸。当たり判定は padding で確保する */
	.rt-areas__dot {
		width: 28px;
		height: 32px;
		padding: 10px 8px;
		border: 0;
		border-radius: 50%;
		background-color: #e5e5e5;
		background-clip: content-box;
		cursor: pointer;
	}
	.rt-areas__dot.is-current {
		padding: 8px 6px;
		background-color: var(--blue);
	}
}

/* ==========================================================================
   SPレビュー（0918）対応
   ========================================================================== */
@media (max-width: 767px) {
	/* #1 5領域セクションの左右アローは出さない（停止ボタンとドットで操作する） */
	.rt-areas__nav {
		display: none;
	}

	/* #2 パネル上部の線は残したまま、タブの下に来る部分だけをタブ自身で隠す
	   （タブとパネルが地続きに見え、タブの右側には線が残る） */
	.rt-voice__select {
		margin-bottom: -1px;
	}

	/* #3 タブの後ろにもう1枚あるように見せるあしらい。
	   枠線はなし・1枚だけにして、タブ本体には重ならない位置に置く */
	.rt-voice__select {
		z-index: 1;
		margin-right: 24px;
	}
	.rt-voice__select-stack {
		position: absolute;
		right: -20px;
		bottom: 3px;
		z-index: -1;
		width: 16px;
		height: calc(100% - 5px);
		border-radius: 0 10px 0 0;
		background-color: #e0e4ec;
	}

	/* #4 相談内容の本文と「該当サービス」の間に余白を足す */
	.rt-voice__colhead {
		margin-top: 18px;
	}
	.rt-voice__col--case .rt-voice__colhead {
		margin-top: 0;
	}

	/* #5 選ばれる理由のナビは線ではなくドットに。
	   ドットの意匠は PICK UP に統一（見た目10px／現在地14px） */
	.rt-slider-dots,
	.rt-banner__dots,
	.rt-areas__dots {
		gap: 0;
	}
	.rt-slider-dots__dot,
	.rt-banner__dot,
	.rt-areas__dot {
		width: 26px;
		height: 32px;
		padding: 11px 8px;
		border-radius: 50%;
		background-color: #d9d9d9;
		background-clip: content-box;
	}
	.rt-slider-dots__dot.is-current,
	.rt-banner__dot.is-current,
	.rt-areas__dot.is-current {
		width: 26px;
		height: 32px;
		padding: 9px 6px;
		background-color: var(--blue);
	}

	/* #6 選ばれる理由のカードも、止まったときに中央へ来るようにする */
	.rt-reason__list {
		/* 画面幅いっぱいに広げ、カードが画面中央に来るようにする */
		margin-inline: -16px;
		padding-inline: calc((100vw - 76vw) / 2);
		scroll-padding-inline: 0;
	}
	.rt-reason__item {
		/* 左右にアローを置くぶんの余白をとる */
		flex: 0 0 76vw;
		scroll-snap-align: center;
	}
}

/* ==========================================================================
   メインビジュアル改修（TOPデザイン案 0928）
   ・背景を従来の写真（fv-main.png）から、淡い背景画像（fv-bg.jpg）に変更
   ・人物写真3枚を斜めの線で区切って並べ、1枚のビジュアルとして見せる
     PC：見出しの右側に配置（左のテキスト・動画は従来のまま）
     SP：ロゴの下に配置し、その下に見出し・リード文を置く（レビュー指摘 0929：
         スライドをやめ、白いグラデーションも外した）
   ========================================================================== */
.rt-fv__visual {
	/* 斜めの傾き（上辺と下辺の横ずれ）と、写真どうしのすき間 */
	--fv-skew: 64px;
	--fv-gap: 6px;
}
.rt-fv__photos {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rt-fv__photo {
	flex: 1 1 0;
	min-width: 0;
	/* 隣の写真と斜めの辺を重ね、すき間ぶんだけ離す */
	margin-left: calc(var(--fv-gap) - var(--fv-skew));
	clip-path: polygon(var(--fv-skew) 0, 100% 0, calc(100% - var(--fv-skew)) 100%, 0 100%);
}
/* 外側の辺（左端・右端）はまっすぐにする */
.rt-fv__photo:first-child {
	margin-left: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--fv-skew)) 100%, 0 100%);
}
.rt-fv__photo:last-child {
	clip-path: polygon(var(--fv-skew) 0, 100% 0, 100% 100%, 0 100%);
}
.rt-fv__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 人物の顔が切れないよう、写真ごとに見せる位置を調整 */
.rt-fv__photo--sales img {
	object-position: 45% 30%;
}
.rt-fv__photo--shop img {
	object-position: 55% 30%;
}
.rt-fv__photo--maker img {
	object-position: 42% 30%;
}

@media (min-width: 768px) {
	.rt-fv__inner {
		position: relative;
	}
	/* 見出しの右側（見出し幅＋余白）から、右端手前までを写真の領域にする */
	.rt-fv__visual {
		position: absolute;
		top: 0;
		right: 40px;
		bottom: 28px;
		left: 743px;
	}
	/* 左のテキストは写真より手前に置く */
	.rt-fv__title,
	.rt-fv__text,
	.rt-fv__movie {
		position: relative;
		z-index: 1;
	}
}

/* 1100px以下は左の余白が24pxになるため、見出しを画面幅に合わせて縮め、写真の領域もそれに合わせる */
@media (min-width: 768px) and (max-width: 1100px) {
	.rt-fv__title {
		font-size: clamp(36px, 4.6vw, 56px);
		line-height: 1.25;
	}
	.rt-fv__text {
		max-width: calc(clamp(36px, 4.6vw, 56px) * 10);
	}
	.rt-fv__visual {
		right: 24px;
		left: calc(54px + clamp(36px, 4.6vw, 56px) * 10);
		--fv-skew: 40px;
	}
}

/* SP：上から ロゴ（ヘッダー）→ 写真 → 見出し → リード文 → 動画 の順に積む。
   背景画像はPCと同じくメインビジュアル全体（グリッドの1〜4行目）に敷く */
@media (max-width: 767px) {
	.rt-fv__inner::before {
		grid-row: 1 / 5;
		background-position: 62% top;
	}
	/* 以前の白いグラデーション（文字を写真に重ねていたときのもの）は使わない */
	.rt-fv__inner::after {
		content: none;
	}
	.rt-fv__visual {
		--fv-skew: 30px;
		--fv-gap: 4px;
		position: relative;
		grid-column: 1;
		grid-row: 1;
		/* ロゴの下から始める */
		margin-top: 112px;
		aspect-ratio: 665 / 525;
	}
	.rt-fv__title {
		grid-row: 2;
		padding-top: 24px;
	}
	.rt-fv__text {
		grid-row: 3;
		margin: 16px 0 28px;
	}
	.rt-fv__movie {
		grid-row: 4;
		margin-bottom: 32px;
	}
}

/* ==========================================================================
   PICK UP：サービス紹介バナー枠（レビュー指摘 0928）
   セミナー等の情報が少ないときに差し込む、テキストエリアなしの画像だけのカード。
   画像は正方形のバナー（文字は中央85%に収めたもの）を、枠いっぱいに敷く。
   カードの高さは隣のテキスト付きカードに合わせる（画像は高さの計算に関わらないよう絶対配置）。
   バナーだけが並ぶ場合に高さが0にならないよう、最低限の高さを持たせている
   ========================================================================== */
.rt-pickup__slide--banner {
	min-height: 280px;
}
.rt-pickup__slide--banner > a {
	position: relative;
	overflow: hidden;
}
.rt-pickup__slide--banner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/* PICK UP：導入事例は日付の位置にクライアント名を出す（見た目は日付と同じ）。
   名前が長いときはラベルに押し出されず折り返す */
.rt-pickup__client {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-note);
	line-height: 1.4;
}
/* 日付・クライアント名のない項目は、カテゴリを他のカードと同じ右端に置く */
.rt-pickup__meta > .rt-pickup__cat:only-child {
	margin-left: auto;
}

/* ==========================================================================
   SP：5つの領域・選ばれる理由のフリック操作（レビュー指摘 0929）
   送りは script.js のフリック処理で行うため、ブラウザの横スクロールは使わない。
   縦方向の指の動きはページのスクロールに任せる
   ========================================================================== */
@media (max-width: 767px) {
	.rt-areas__nodes {
		touch-action: pan-y;
	}
	.rt-reason__list {
		overflow-x: hidden;
		touch-action: pan-y;
	}
}

/* ==========================================================================
   読み込み直後の表示崩れ対策（0929）
   script.js はHTMLの読み込み後に動くため、それまでの一瞬、カルーセルの矢印・ドットや
   SPの開閉カードが「組み立て前」の形で表示され、下の要素が上下にずれていた。
   <head> で html に .rt-js を付け、JSが組み立てた後と同じ形・高さを最初から当てておく
   ========================================================================== */

/* PICK UP：件数が1画面の表示件数を超えるときはカルーセル（矢印・ドットあり）になる。
   JSより先に、件数から判定して矢印の表示とドットの高さを合わせる */
@media (min-width: 1024px) {
	.rt-pickup__carousel:not(:has(.rt-pickup__slide:nth-child(4))) .rt-pickup__arrow {
		display: none;
	}
	.rt-js .rt-pickup__carousel:has(.rt-pickup__slide:nth-child(4)) .rt-pickup__dots:empty {
		display: block;
		height: 24px;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.rt-pickup__carousel:not(:has(.rt-pickup__slide:nth-child(3))) .rt-pickup__arrow {
		display: none;
	}
	.rt-js .rt-pickup__carousel:has(.rt-pickup__slide:nth-child(3)) .rt-pickup__dots:empty {
		display: block;
		height: 24px;
	}
}
@media (max-width: 767px) {
	.rt-pickup__carousel:not(:has(.rt-pickup__slide:nth-child(2))) .rt-pickup__arrow {
		display: none;
	}
	/* .is-carousel と同じ幅（左右に矢印ぶんの余白） */
	.rt-pickup__carousel:has(.rt-pickup__slide:nth-child(2)) {
		width: calc(100% - 96px);
	}
	.rt-js .rt-pickup__carousel:has(.rt-pickup__slide:nth-child(2)) .rt-pickup__dots:empty {
		display: block;
		height: 32px;
	}
}

/* バナー：2枚以上ならドットの高さを先に確保する */
.rt-js .rt-banner:has(.rt-banner__item:nth-child(2)) .rt-banner__dots:empty {
	display: block;
	height: 24px;
}
@media (max-width: 767px) {
	.rt-js .rt-banner:has(.rt-banner__item:nth-child(2)) .rt-banner__dots:empty {
		height: 32px;
	}
	/* 選ばれる理由のドット（入れ物はHTMLにある） */
	.rt-js .rt-slider-dots:empty {
		height: 32px;
	}
	/* 貴社の課題は：SPは最初から閉じた状態で表示する（JSが開閉を担当） */
	.rt-js .rt-issue.is-accordion .rt-issue__title:not(:has([aria-expanded="true"])) + .rt-issue__text {
		display: none;
	}
}