/* ==========================================================================
   Robust lab. — トップページ フルリデザイン
   Glassmorphism / 3D immersive / Bold typography / Neumorphism
   時間帯によってライト/ダームをページ全体で自動切替（html[data-theme]）
   ========================================================================== */

:root {
	--rl-red: #ff4438;
	--rl-highlight: #ff4438;

	--rl-radius-lg: 32px;
	--rl-radius-md: 22px;
	--rl-radius-sm: 14px;

	--rl-ff-jp: "M PLUS 1", "Hiragino Kaku Gothic ProN", sans-serif;
	--rl-ff-en: "Urbanist", var(--rl-ff-jp);
	--rl-ff-mincho: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

/* ダークモード（既定・JS未実行時のフォールバックにもなる） */
html,
html[data-theme="dark"] {
	--rl-bg-image: url("../img/dark01.webp");
	--rl-scrim-top: rgba(6, 8, 14, 0.12);
	--rl-scrim-bottom: rgba(6, 8, 14, 0.32);
	--rl-blob-color: #05070c;

	--rl-text: #f5f6f8;
	--rl-text-dim: rgba(245, 246, 248, 0.68);

	--rl-glass-bg: rgba(255, 255, 255, 0.08);
	--rl-glass-bg-strong: rgba(255, 255, 255, 0.15);
	--rl-glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);

	--rl-card-bg: rgba(28, 32, 40, 0.55);
	--rl-card-shadow-a: rgba(0, 0, 0, 0.45);
	--rl-card-shadow-b: rgba(255, 255, 255, 0.06);

	--rl-tile-bg: rgba(255, 255, 255, 0.07);
}

/* ライトモード */
html[data-theme="light"] {
	--rl-bg-image: url("../img/light01.webp");
	--rl-scrim-top: rgba(255, 255, 255, 0.1);
	--rl-scrim-bottom: rgba(240, 243, 248, 0.35);
	--rl-blob-color: #ffffff;

	--rl-text: #20242b;
	--rl-text-dim: rgba(32, 36, 43, 0.66);

	--rl-glass-bg: rgba(255, 255, 255, 0.42);
	--rl-glass-bg-strong: rgba(255, 255, 255, 0.58);
	--rl-glass-shadow: 0 20px 50px rgba(60, 70, 100, 0.18);

	--rl-card-bg: rgba(255, 255, 255, 0.55);
	--rl-card-shadow-a: rgba(140, 150, 170, 0.35);
	--rl-card-shadow-b: rgba(255, 255, 255, 0.85);

	--rl-tile-bg: rgba(255, 255, 255, 0.4);
}

/* SWELL本体のCSSを読み込まないため、ブラウザ標準のmarginをリセット */
html,
body.rl-front-body {
	margin: 0;
	padding: 0;
}

/* リデザイン非対象のプラグインが残すDOM（プリローダー等）を無効化 */
#loftloader-wrapper,
#search_modal,
.p-fixBtnWrap {
	display: none !important;
}

#rl-front {
	--wp--content-color: var(--rl-text);
	font-family: var(--rl-ff-en);
	font-weight: 200;
	color: var(--rl-text);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	transition: color 0.6s ease;
}
#rl-front * {
	box-sizing: border-box;
}
#rl-front img,
#rl-front video {
	max-width: 100%;
	display: block;
}
#rl-front a {
	color: inherit;
	text-decoration: none;
}
#rl-front section {
	position: relative;
	padding: clamp(72px, 12vw, 160px) clamp(20px, 5vw, 64px);
}
#rl-front .rl-inner {
	max-width: 1180px;
	margin: 0 auto;
}
#rl-front .rl-eyebrow {
	font-family: var(--rl-ff-en);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.92rem;
	color: var(--rl-red);
	margin-top: 3px;
	margin-bottom: 0;
}
#rl-front .rl-bold-heading {
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/* 全セクション共通の固定背景（ライト/ダーク各グループの画像を切替） */
.rl-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: var(--rl-bg-image);
	background-size: cover;
	background-position: center;
	opacity: 1;
	transition: opacity 0.5s ease;
}
.rl-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--rl-scrim-top), var(--rl-scrim-bottom) 70%);
}
@media (prefers-reduced-motion: reduce) {
	.rl-bg {
		transition: none;
	}
}
/* スクロールパララックスはモバイル幅のみ有効（PCでは等倍のまま最大解像度で表示） */
@media (max-width: 960px) {
	.rl-bg {
		/* translateYを先(外側)に指定すること。scale()を先にすると、あとに続く
		   translateYの移動量までscale倍に増幅されてしまい、余白の計算が狂う */
		transform: translateY(var(--rl-bg-parallax, 0px)) scale(1.2);
		will-change: transform;
	}
}

/* ==========================================================================
   下層ページ限定：背景（最背面）と本文（最前面）の間に、いびつで不規則に
   動く「ボヤボヤ」を入れて可読性を上げる（rl-shell-header.php側で
   is_front_page()の場合はこのマークアップ自体を出力していない）。
   色はダークモード＝黒系・ライトモード＝白系（--rl-blob-color）。
   .rl-bgと同じ position:fixed; z-index:-1; の層で、DOM順で.rl-bgの後ろに
   置くことで.rl-bgの上・本文の下に重なるようにしている
   ========================================================================== */
.rl-page-blur {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.rl-page-blur__blob {
	position: absolute;
	background: var(--rl-blob-color);
	opacity: 0.62;
	filter: blur(55px);
	border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
	will-change: transform, border-radius;
}
.rl-page-blur__blob--1 {
	width: 46vw;
	height: 46vw;
	top: -12vw;
	left: -14vw;
	animation: rl-blob-drift-1 26s ease-in-out infinite;
}
.rl-page-blur__blob--2 {
	width: 36vw;
	height: 36vw;
	top: 28vh;
	right: -14vw;
	animation: rl-blob-drift-2 32s ease-in-out infinite;
}
.rl-page-blur__blob--3 {
	width: 32vw;
	height: 32vw;
	bottom: -12vw;
	left: 10vw;
	animation: rl-blob-drift-3 29s ease-in-out infinite;
}
@media (min-width: 681px) {
	.rl-page-blur__blob--4 {
		width: 24vw;
		height: 24vw;
		bottom: 8vh;
		right: 6vw;
		animation: rl-blob-drift-4 35s ease-in-out infinite;
	}
}
@keyframes rl-blob-drift-1 {
	0%, 100% { transform: translate(0, 0) scale(1); border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
	33% { transform: translate(4vw, 6vh) scale(1.1); border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%; }
	66% { transform: translate(-3vw, 4vh) scale(0.92); border-radius: 65% 35% 55% 45% / 40% 55% 45% 60%; }
}
@keyframes rl-blob-drift-2 {
	0%, 100% { transform: translate(0, 0) scale(1); border-radius: 55% 45% 40% 60% / 50% 40% 60% 50%; }
	40% { transform: translate(-5vw, -5vh) scale(1.12); border-radius: 40% 60% 55% 45% / 60% 50% 50% 40%; }
	70% { transform: translate(3vw, -3vh) scale(0.94); border-radius: 60% 40% 45% 55% / 45% 60% 40% 55%; }
}
@keyframes rl-blob-drift-3 {
	0%, 100% { transform: translate(0, 0) scale(1); border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%; }
	50% { transform: translate(5vw, -5vh) scale(1.08); border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%; }
}
@keyframes rl-blob-drift-4 {
	0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50% 50% 35% 65% / 60% 40% 60% 40%; }
	45% { transform: translate(-4vw, 5vh) scale(1.14); border-radius: 65% 35% 55% 45% / 40% 60% 45% 55%; }
}
@media (prefers-reduced-motion: reduce) {
	.rl-page-blur__blob {
		animation: none;
	}
}

/* 背景コントロール（ライト/ダーク切替・背景シャッフル） */
.rl-bg-controls {
	position: fixed;
	left: calc(10px + max(0px, (100vw - 1200px) / 2));
	bottom: 56px;
	z-index: 600;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rl-bg-controls__btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rl-glass-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--rl-glass-shadow);
	color: var(--rl-text);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.2s ease;
}
.rl-bg-controls__btn:hover {
	background: var(--rl-glass-bg-strong);
	transform: translateY(-2px);
}
.rl-bg-controls__icon {
	width: 20px;
	height: 20px;
}
.rl-bg-controls__canvas {
	width: 30px;
	height: 30px;
	pointer-events: none;
}
/* シャッフルボタンは塗りつぶしをやめ、3Dブロックだけを大きく見せる */
.rl-bg-controls__btn--shuffle {
	width: 88px;
	height: 88px;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}
.rl-bg-controls__btn--shuffle .rl-bg-controls__canvas {
	width: 76px;
	height: 76px;
}
.rl-bg-controls__btn--theme .rl-bg-controls__icon--moon {
	display: none;
}
html[data-theme="light"] .rl-bg-controls__btn--theme .rl-bg-controls__icon--sun {
	display: none;
}
html[data-theme="light"] .rl-bg-controls__btn--theme .rl-bg-controls__icon--moon {
	display: block;
}
@media (max-width: 960px) {
	.rl-bg-controls {
		left: 16px;
		bottom: 44px;
	}
	.rl-bg-controls__btn {
		width: 42px;
		height: 42px;
	}
	.rl-bg-controls__btn--shuffle {
		width: 76px;
		height: 76px;
	}
	.rl-bg-controls__btn--shuffle .rl-bg-controls__canvas {
		width: 66px;
		height: 66px;
	}
}

/* reveal-on-scroll */
#rl-front .rl-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
#rl-front .rl-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	#rl-front .rl-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   Nav
   ========================================================================== */
/* ライト/ダーク切替ボタン＋.rl-nav をまとめて配置するラッパー。
   位置（fixed/中央寄せ・右寄せ）はこちらが持ち、.rl-nav 自体は通常のflex子要素になる */
.rl-nav-row {
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 600;
	display: flex;
	align-items: center;
	gap: 12px;
}
/* PC幅では中央寄せをやめ、.rl-inner の右端に合わせて右寄せにする */
@media (min-width: 961px) {
	.rl-nav-row {
		left: auto;
		right: calc(10px + max(0px, (100vw - 1200px) / 2));
		transform: none;
	}
}
.rl-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: min(760px, calc(100vw - 220px));
	height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--rl-glass-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--rl-glass-shadow);
	transition: background 0.6s ease;
}
.rl-nav__logo {
	position: fixed;
	top: 28px;
	/* .rl-hero .rl-inner（max-width:1180px, margin:auto, 親のpadding-left:10px）の
	   実際の左端と厳密に一致させる計算式 */
	left: calc(10px + max(0px, (100vw - 1200px) / 2));
	z-index: 600;
	font-family: var(--rl-ff-en);
	font-weight: 800;
	font-size: 1.7rem;
	letter-spacing: -0.01em;
	color: var(--rl-text);
	white-space: nowrap;
}
.rl-nav__links {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rl-nav__links a {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--rl-text-dim);
	transition: background 0.25s ease, color 0.25s ease;
}
.rl-nav__links a:hover {
	background: rgba(128, 128, 128, 0.14);
	color: var(--rl-text);
}
.rl-nav__toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: none;
	background: none;
	position: relative;
	cursor: pointer;
}
.rl-nav__toggle span {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	height: 2px;
	background: var(--rl-text);
	transition: transform 0.3s ease, opacity 0.3s ease;
	top: 20px;
}
/* ::before/::after の left/right は span 自身（18px幅）を基準に解決されるため、
   親（.rl-nav__toggle）と同じ 12px を指定すると幅が負数になり消えてしまう。
   span を基準に0〜100%（left:0; right:0;）で指定するのが正しい */
.rl-nav__toggle span::before,
.rl-nav__toggle span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--rl-text);
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.rl-nav__toggle span::before {
	top: -6px;
}
.rl-nav__toggle span::after {
	top: 6px;
}
#rl-front.is-nav-open .rl-nav__toggle span {
	background: transparent;
}
#rl-front.is-nav-open .rl-nav__toggle span::before {
	top: 0;
	transform: rotate(45deg);
}
#rl-front.is-nav-open .rl-nav__toggle span::after {
	top: 0;
	transform: rotate(-45deg);
}

.rl-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 590;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rl-scrim-bottom);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
#rl-front.is-nav-open .rl-nav-overlay {
	opacity: 1;
	pointer-events: auto;
}
.rl-nav-overlay ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
	width: min(320px, 80vw);
}
.rl-nav-overlay__item {
	position: relative;
	overflow: hidden;
}
.rl-nav-overlay__item::before {
	content: attr(data-slug);
	position: absolute;
	left: auto;
	right: 50px;
	top: 44%;
	transform: translateY(-50%);
	z-index: 0;
	font-family: var(--rl-ff-en);
	font-weight: 600;
	font-size: clamp(2.4rem, 11vw, 5rem);
	line-height: 1;
	color: var(--rl-highlight);
	opacity: 0.3;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.rl-nav-overlay a {
	position: relative;
	z-index: 1;
	display: block;
	padding: 18px 0;
	text-align: right;
	font-size: clamp(1.3rem, 4.5vw, 1.9rem);
	font-weight: 500;
	color: var(--rl-text);
}

/* ==========================================================================
   Hero
   ========================================================================== */
#rl-front section.rl-hero {
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding-top: clamp(120px, 18vw, 180px);
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
}
.rl-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: start;
	gap: 40px;
	width: 100%;
}
.rl-hero__stage {
	position: relative;
	aspect-ratio: 1 / 1;
	max-height: 60vh;
}
/* デスクトップ幅では、3Dステージをテキスト列の高さから完全に切り離し、
   ローテーション文言の長さに関係なく常にセクションの垂直中央に固定する */
@media (min-width: 961px) {
	.rl-hero__grid {
		position: relative;
		height: min(46vw, 560px);
		max-width: 1180px;
		margin: 0 auto;
		display: block;
	}
	.rl-hero__text {
		position: absolute;
		left: 0;
		top: -10px;
		max-width: 620px;
		display: block;
	}
	.rl-hero__stage {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: min(46vw, 560px);
	}
}
#rl-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.1s ease;
}
#rl-hero-canvas.is-loaded {
	opacity: 1;
}
.rl-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.rl-hero__text .rl-eyebrow {
	margin-left: 10px;
}
#rl-front .rl-hero__headline {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: clamp(1.7rem, 3vw, 3rem);
	font-weight: 200;
	line-height: 1.4;
	margin: 12px 0 18px;
}
/* PC幅ではHero見出し・eyebrowを少し小さく（ここは上のデスクトップ用グリッド
   ブロックより後ろに置くこと。同じ詳細度のルールはソース順で後勝ちなので、
   先に書くと無条件の基本ルールに上書きされてしまい効果が出ない） */
@media (min-width: 961px) {
	#rl-front .rl-hero__text .rl-eyebrow {
		font-size: 0.82rem;
	}
	#rl-front .rl-hero__headline {
		font-size: clamp(1.6rem, 2.7vw, 2.7rem);
	}
}
.rl-hero__rotator {
	display: inline-block;
	color: var(--rl-text);
}
.rl-hero__tcy {
	text-combine-upright: all;
}
.rl-hero__rotator-text {
	display: inline-block;
	transition: opacity 0.4s ease;
}
.rl-hero__rotator-text.is-swapping {
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.rl-hero__rotator-text {
		transition: none;
	}
}
.rl-hero__card {
	background: var(--rl-glass-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: var(--rl-radius-md);
	padding: 26px 28px;
	max-width: 560px;
	font-size: 0.98rem;
	color: var(--rl-text-dim);
	box-shadow: var(--rl-glass-shadow);
	transition: background 0.6s ease;
}
.rl-hero__card p + p {
	margin-top: 0.9em;
}

/* ==========================================================================
   About — Neumorphism（フローティングのソフトUIカード）
   ========================================================================== */
#rl-front section.rl-about {
	padding-top: 0;
}
.rl-about__heading {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	margin: 10px 0 24px;
}
.rl-about__lead {
	color: var(--rl-text);
	font-weight: 400;
	max-width: 640px;
	margin: 10px 0 24px;
}
#rl-front {
	--rl-reactor-size: min(600px, 90vw);
}
@media (min-width: 961px) {
	#rl-front {
		--rl-reactor-size: min(640px, 44vw);
	}
}
.rl-reactor__stage {
	position: relative;
	width: var(--rl-reactor-size);
	aspect-ratio: 1 / 1;
	margin-left: auto;
}
#rl-reactor-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.1s ease;
}
#rl-reactor-canvas.is-loaded {
	opacity: 1;
}

/* ==========================================================================
   Own products — カード内に画像を右上はみ出しで重ねる構成
   ========================================================================== */
/* PC幅では上paddingだけ詰める（#rl-front section の基本paddingを
   クラス追加で詳細度アップして上書き） */
@media (min-width: 961px) {
	#rl-front section.rl-products {
		padding-top: 20px;
	}
}
.rl-products__heading {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	margin: 10px 0 44px;
}
.rl-products__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}
.rl-product-card__card {
	position: relative;
	z-index: 100;
	margin: 0;
	padding: 22px clamp(24px, 3vw, 34px);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-glass-bg-strong);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--rl-glass-shadow);
	text-align: left;
}
.rl-product-card__img {
	position: absolute;
	top: -32px;
	right: -20px;
	z-index: 100;
	width: min(48%, 220px);
	aspect-ratio: 4 / 3;
	object-fit: contain;
	pointer-events: none;
}
.rl-product-card__card .rl-service-card__tag {
	max-width: calc(100% - min(48%, 220px) + 24px);
}

/* ==========================================================================
   Service card typography — Own products / 両兵衛プレビューで共用
   ========================================================================== */
.rl-service-card__tag {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--rl-text-dim);
	letter-spacing: 0.02em;
}
.rl-service-card__name {
	font-family: var(--rl-ff-en);
	font-size: 1.9rem;
	font-weight: 700;
	margin: 6px 0 14px;
	color: var(--rl-text);
}
.rl-service-card__name--mincho {
	font-family: var(--rl-ff-mincho);
}
.rl-service-card__desc {
	font-size: 0.92rem;
	font-weight: 400;
	color: var(--rl-text-dim);
}
.rl-br-sp {
	display: none;
}
.rl-br-pc {
	display: none;
}
@media (min-width: 961px) {
	.rl-br-pc {
		display: inline;
	}
}

/* ==========================================================================
   Timely — 左にテキスト、右にリアクター3D（左寄せ／右寄せの並び）
   モバイルでは 見出し→3D→本文 の順、PCでは 見出し+本文（左列）／3D（右列）
   ========================================================================== */
#rl-front .rl-timely {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"head"
		"reactor"
		"body";
	row-gap: clamp(14px, 3vw, 28px);
	column-gap: clamp(24px, 5vw, 60px);
}
/* PCでは.rl-timely__headと.rl-timely__bodyを普通のブロック要素として
   1つの列にまとめたいので、モバイルでは display:contents で透過させて
   直下のhead/bodyをgridアイテムとして直接配置し（3D を間に挟める）、
   PCでは通常のブロックに戻して1つのgridアイテム（col）として扱う。
   headとreactorが別々のgrid行にまたがってreactorの高さ分だけ行が
   膨張し、見出しと本文の間に大きな空白ができるのを防ぐための構成 */
.rl-timely__col {
	display: contents;
}
@media (min-width: 961px) {
	#rl-front .rl-timely {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "col reactor";
		align-items: center;
	}
	.rl-timely__col {
		display: block;
		grid-area: col;
	}
}
/* .rl-timelyは<section>ではないため#rl-front sectionの左右paddingを
   受け取れず、モバイル幅でだけ他セクションと揃うようpaddingを補う */
@media (max-width: 960px) {
	#rl-front .rl-timely {
		padding: 0 clamp(20px, 5vw, 64px);
	}
}
.rl-timely__head {
	grid-area: head;
	max-width: 560px;
}
.rl-timely__body {
	grid-area: body;
	max-width: 560px;
}
.rl-reactor__stage {
	grid-area: reactor;
}
/* #rl-front .rl-bold-heading（font-weight:900）に詳細度で負けないよう、
   .rl-timely__heading単体ではなく#rl-front .rl-timely__headingで指定する */
#rl-front .rl-timely__heading {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	margin: 10px 0 22px;
	color: var(--rl-text);
	font-weight: 400;
}
.rl-timely__body p {
	color: var(--rl-text-dim);
	font-weight: 400;
}
.rl-timely__body p + p {
	margin-top: 1em;
}

/* ==========================================================================
   Media badges
   ========================================================================== */
.rl-media-row-wrap {
	padding: 0 clamp(20px, 5vw, 64px);
	margin: 0 0 clamp(48px, 8vw, 96px);
}
.rl-media-row {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 11px 26px;
	border-radius: 20px;
	background: var(--rl-glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--rl-glass-shadow);
	transition: background 0.6s ease;
}
.rl-media-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--rl-text);
	text-align: left;
}
.rl-pre-about-media {
	position: relative;
	margin: 0 0 clamp(48px, 8vw, 96px);
}
.rl-pre-about-media__frame {
	position: relative;
	left: clamp(-260px, -16vw, -60px);
	width: clamp(560px, 68vw, 1180px);
	aspect-ratio: 1 / 1;
	border-radius: var(--rl-radius-lg);
	overflow: hidden;
}
.rl-pre-about-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rl-pre-about-media__card-layer {
	position: absolute;
	inset: 0;
	padding: 0 clamp(20px, 5vw, 64px);
	pointer-events: none;
}
.rl-pre-about-media__card-layer .rl-inner {
	position: relative;
	height: 100%;
}
.rl-pre-about-media__card {
	position: absolute;
	left: calc(590px - 32vw);
	right: 0;
	top: 50%;
	padding: 24px clamp(26px, 3vw, 40px);
	border-radius: var(--rl-radius-lg);
	background: var(--rl-glass-bg-strong);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	text-align: left;
	transition: background 0.6s ease;
	pointer-events: auto;
}

.rl-media-badge__label {
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--rl-red);
	letter-spacing: 0.06em;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.rl-footer {
	position: relative;
	padding: clamp(90px, 14vw, 160px) 24px 48px;
	text-align: center;
	overflow: hidden;
}
.rl-footer__ring-wrap {
	position: relative;
	width: clamp(220px, 30vw, 320px);
	aspect-ratio: 1 / 1;
	margin: 0 auto 8px;
}
.rl-footer__ring {
	position: absolute;
	inset: 0;
	animation: rl-spin 22s linear infinite;
}
.rl-footer__ring text {
	font-family: var(--rl-ff-en);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	fill: var(--rl-text-dim);
	text-transform: uppercase;
}
.rl-footer__wordmark {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.rl-footer__wordmark strong {
	font-family: var(--rl-ff-en);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	color: var(--rl-text);
}
.rl-footer__wordmark span {
	font-family: var(--rl-ff-en);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	color: var(--rl-text-dim);
	margin-top: 4px;
}
@keyframes rl-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.rl-footer__ring { animation: none; }
}
.rl-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 22px;
	margin: 40px 0 24px;
	list-style: none;
	padding: 0;
}
.rl-footer__nav a {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--rl-text-dim);
}
.rl-footer__nav a:hover {
	color: var(--rl-text);
}
.rl-footer__copyright {
	font-size: 0.76rem;
	color: var(--rl-text-dim);
	opacity: 0.7;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
	.rl-hero__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.rl-hero__stage {
		max-height: 39vh;
		width: 39vh;
		max-width: 100%;
		order: -1;
		margin: 0 auto;
	}
	.rl-nav__logo {
		left: 20px;
		top: 10px;
	}
	.rl-hero__text {
		margin-left: 4px;
	}
	.rl-eyebrow {
		margin-left: 10px;
		margin-bottom: 0;
	}
	.rl-bg-controls {
		flex-direction: row;
	}
}
@media (max-width: 680px) {
	.rl-nav-row {
		left: auto;
		right: 16px;
		transform: none;
	}
	.rl-nav {
		width: auto;
		padding: 0;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
	}
	.rl-nav__links {
		display: none;
	}
	.rl-nav__toggle {
		display: block;
	}
	.rl-products__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	#rl-front section.rl-hero {
		padding-top: 110px;
	}
	.rl-br-sp {
		display: inline;
	}
	.rl-pre-about-media__frame {
		left: -22vw;
		width: 144vw;
	}
	.rl-pre-about-media__card-layer {
		padding: 0 20px;
	}
	.rl-pre-about-media__card {
		top: auto;
		bottom: 16px;
		right: 0;
		left: 0;
		width: auto;
		padding: 20px 20px 20px 28px;
	}
}

/* ==========================================================================
   下層ページ共通：本文をガラスカードに内包
   （page.php / home.php / single.php で使用）

   loos/tab・loos/accordion・loos/step・xo-liteslider等のSWELL/プラグイン製
   ブロックは、本体側のCSS/JSに依存して動作している（functions.php側の
   注記の通り、下層ページではそれらのアセットを意図的に温存している）ため、
   ここでは触れない。色・フォントは「継承」のみを使って.rl-content-card
   自体に指定し、loos系ブロックが自分で明示指定している色・フォントは
   継承より優先されるため自動的に上書きされない。margin等の非継承プロパティ
   のみ「直下の要素」に限定して当てることで、ネストしたloos系ブロックの
   内部要素にまで影響が及ばないようにしている。
   ========================================================================== */
.rl-page__title {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	margin: 0 0 32px;
	color: var(--rl-text);
}
/* /service/kaiwai/ 限定：本文冒頭のロゴ画像とページタイトルh1を横並び・
   中央寄せにする。上にはナビとの間隔を広げるため追加でmargin-topを持たせている */
.rl-kaiwai-title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: clamp(24px, 6vw, 72px) 0 32px;
}
.rl-kaiwai-title-row .wp-block-image {
	margin: 0;
	float: none;
}
/* 画像ブロックのインライン style="width:110px" を4/5サイズに縮小する
   （インラインstyleに勝つため!importantが必要） */
.rl-kaiwai-title-row .wp-block-image img {
	width: 88px !important;
}
.rl-kaiwai-title-row .rl-page__title {
	margin: 0;
}
/* #rl-front .rl-bold-heading（font-weight:900）より200細くする。詳細度で
   負けないよう#rl-frontを含めている。Urbanistは200/600/700/800しかロード
   していないため、実際にロード済みの700を指定する（中間値だとフォール
   バックマッチングで900のままスナップされ直すため、必ずロード済みの値から
   選ぶこと） */
#rl-front .rl-kaiwai-title-row .rl-page__title {
	font-weight: 700;
}
/* ロゴ画像自体はpc_onlyクラスでモバイル非表示になるが、このタイトル行内では
   モバイルでもh1と並べて表示したいので、ここだけ強制的に表示に戻す。
   あわせて、モバイルでは左上・右上の3Dオブジェクト（top:74px、高さ最大
   約133px）とロゴ画像が重なってしまうため、行の上マージンを増やして
   3Dオブジェクトの下端より下に押し下げる */
@media (max-width: 680px) {
	.rl-kaiwai-title-row {
		margin-top: 150px;
	}
	.rl-kaiwai-title-row .pc_only {
		display: block !important;
	}
}
/* 固定ページ共通のタイトルセクション（page.php / page-company.php / page-service.php /
   home.php で使用。/company/の仕様を全ページの標準としている）。
   背後にスラッグ由来の英語ラベルを大きく配置する */
.rl-page-title {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 0 40px;
	min-height: clamp(5.4rem, 19vw, 13rem);
}
.rl-page-title__en {
	position: absolute;
	left: -0.05em;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	font-family: var(--rl-ff-en);
	font-weight: 800;
	font-size: clamp(4.5rem, 16vw, 11rem);
	line-height: 1;
	color: var(--rl-highlight);
	opacity: 0.3;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	transition: color 0.6s ease;
}
.rl-page-title__ja {
	position: relative;
	z-index: 1;
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	font-weight: 500;
	color: var(--rl-text);
	margin: 0;
}
/* .rl-page__introは「ボックスの外」に出す本文用（例：/company/の代表挨拶より
   前の部分）。.rl-content-cardからガラスの背景・padding・box-shadowを除いた
   だけで、タイポグラフィ（下記の.rl-content-card__body系ルール）は共有する */
.rl-page__intro {
	color: var(--rl-text-dim);
	font-family: var(--rl-ff-jp);
	font-weight: 300;
	line-height: 1.9;
	margin-bottom: clamp(28px, 5vw, 56px);
}
.rl-content-card {
	position: relative;
	background: var(--rl-glass-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: var(--rl-radius-lg);
	box-shadow: var(--rl-glass-shadow);
	padding: clamp(28px, 5vw, 56px);
	color: var(--rl-text-dim);
	font-family: var(--rl-ff-jp);
	font-weight: 300;
	line-height: 1.9;
}
.rl-content-card__body > :where(h1, h2, h3, h4, h5, h6),
.rl-page__intro > :where(h1, h2, h3, h4, h5, h6) {
	color: var(--rl-text);
	font-weight: 700;
	line-height: 1.4;
	margin: 1.4em 0 0.7em;
}
.rl-content-card__body > :where(h1, h2, h3, h4, h5, h6):first-child,
.rl-page__intro > :where(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}
/* SWELL標準の「is-style-section_ttl」見出し（本文中の「会社案内 / About us」
   「代表よりご挨拶 / Message」等）にも、.rl-page-titleと同じ「本文の背面に
   注釈(small.mininote)を大きく配置する」デザインを一回り小さいサイズで適用する。
   上のh1〜h6ルールで付いたcolor/weight/marginはそのまま活かし、位置決めだけ追加する。
   :has(.mininote)で絞っているのは、mininoteを持たない普通のis-style-section_ttl
   見出し（例：/service/kaiwai/の「新生ソーシャルネットワークkaiwai」）にまで
   flexが効いてしまうと、text-align:centerがjustify-contentに負けて左寄せに
   見えたり、<br>による改行が(下のbr非表示ルールと相まって)効かなくなる
   不具合があったため */
.rl-content-card__body h2.is-style-section_ttl:has(.mininote),
.rl-page__intro h2.is-style-section_ttl:has(.mininote) {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(3rem, 11vw, 6.6rem);
	/* 通常の見出し（0.7em）より広めに下の余白を取る */
	margin-bottom: 2em;
}
.rl-content-card__body h2.is-style-section_ttl:has(.mininote) > .swl-fz,
.rl-page__intro h2.is-style-section_ttl:has(.mininote) > .swl-fz {
	position: relative;
	z-index: 1;
	/* 通常の見出し（700）より100下げる */
	font-weight: 500;
	/* align-items:centerによる垂直中央からさらに下げる */
	top: 0.4em;
}
.rl-content-card__body h2.is-style-section_ttl:has(.mininote) br,
.rl-page__intro h2.is-style-section_ttl:has(.mininote) br {
	display: none;
}
.rl-content-card__body h2.is-style-section_ttl .mininote,
.rl-page__intro h2.is-style-section_ttl .mininote {
	position: absolute;
	left: -0.03em;
	/* 50%（垂直中央）から上げる */
	top: 38%;
	transform: translateY(-50%);
	z-index: 0;
	font-style: normal;
	pointer-events: none;
	user-select: none;
}
.rl-content-card__body h2.is-style-section_ttl .mininote .swl-fz,
.rl-page__intro h2.is-style-section_ttl .mininote .swl-fz {
	display: inline-block;
	font-family: var(--rl-ff-en);
	font-weight: 800;
	/* SWELLの.u-fz-lユーティリティがfont-sizeに!importantを付けているため、
	   こちらも!importantで上書きする必要がある */
	font-size: clamp(2.5rem, 9vw, 6rem) !important;
	line-height: 1;
	color: var(--rl-highlight);
	opacity: 0.3;
	white-space: nowrap;
	transition: color 0.6s ease;
}
@media (max-width: 680px) {
	/* モバイルはメイン文言をひとまわり、背面のmininoteはさらに大きく強調する */
	.rl-content-card__body h2.is-style-section_ttl:has(.mininote) > .swl-fz,
	.rl-page__intro h2.is-style-section_ttl:has(.mininote) > .swl-fz {
		font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
	}
	.rl-content-card__body h2.is-style-section_ttl .mininote .swl-fz,
	.rl-page__intro h2.is-style-section_ttl .mininote .swl-fz {
		font-size: clamp(3.5rem, 18vw, 7rem) !important;
	}
}
.rl-content-card__body > p,
.rl-page__intro > p {
	margin: 0 0 1.2em;
	font-weight: 400;
}
/* wp:media-textはコアブロック（loos系ではない）なので、直下子に限定せず
   中の段落にもfont-weight:400を適用してよい */
.rl-content-card__body .wp-block-media-text__content p,
.rl-page__intro .wp-block-media-text__content p {
	font-weight: 400;
}
.rl-content-card a,
.rl-page__intro a {
	color: var(--rl-highlight);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.rl-content-card__body > :where(ul, ol),
.rl-page__intro > :where(ul, ol) {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}
.rl-content-card__body li + li,
.rl-page__intro li + li {
	margin-top: 0.4em;
}
.rl-content-card__body > img,
.rl-content-card__body > figure img,
.rl-page__intro > img,
.rl-page__intro > figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--rl-radius-md);
}
.rl-content-card__body > figure,
.rl-page__intro > figure {
	margin: 0 0 1.2em;
}
.rl-content-card__body > figcaption,
.rl-content-card__body > figure figcaption,
.rl-page__intro > figcaption,
.rl-page__intro > figure figcaption {
	font-size: 0.85rem;
	margin-top: 8px;
}
.rl-content-card__body > table,
.rl-page__intro > table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.2em;
}
.rl-content-card__body > table th,
.rl-content-card__body > table td,
.rl-page__intro > table th,
.rl-page__intro > table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--rl-glass-bg-strong);
	text-align: left;
}
.rl-content-card__body > table th,
.rl-page__intro > table th {
	color: var(--rl-text);
	font-weight: 700;
	white-space: nowrap;
}
.rl-content-card__body > hr,
.rl-page__intro > hr {
	border: none;
	border-top: 1px solid var(--rl-glass-bg-strong);
	margin: 2em 0;
}
/* /service/kaiwai/ 限定：本文のほとんどがwp:group・loos/columns・タブ等で
   1階層以上ネストしており、見出し/段落が.rl-content-card__body・
   .rl-page__introの直接の子にならないため、上のh1〜h6・>p系ルール（直接の子
   限定）が届かず、カードの基本色（--rl-text-dim・font-weight:300）のまま
   薄く見えていた。このページに限定して、ネストの深さを問わず同じ明るさ・太さを
   適用する（:where()で詳細度を0にし、is-style-section_ttl用の位置決めルール
   等、既存のより詳細なルールとは競合しないようにしている）。段落は色
   （--rl-text-dim）は変えず太さだけ400にする（サイト全体の本文の太さ方針を踏襲） */
.page-id-1008 .rl-content-card__body :where(h1, h2, h3, h4, h5, h6),
.page-id-1008 .rl-page__intro :where(h1, h2, h3, h4, h5, h6) {
	color: var(--rl-text);
	font-weight: 700;
	/* .rl-content-card/.rl-page__introは本文用に日本語専用フォントスタック
	   （var(--rl-ff-jp)、Urbanistを含まない）を明示指定しているため、見出し内の
	   英数字（例：「新生ソーシャルネットワークkaiwai」のkaiwai部分）がサイト
	   標準のUrbanistではなくM PLUS 1側の欧文グリフで描画され、他の英数字表記と
	   書体が変わって見えていた。見出しだけは基準のUrbanist優先スタックに戻す */
	font-family: var(--rl-ff-en);
}
.page-id-1008 .rl-content-card__body p,
.page-id-1008 .rl-page__intro p {
	font-weight: 400;
}
/* 「界隈の数だけ、SNSがあっていい。」「趣味、地域、悩み、職種・・〜」は
   見出しではなく<p>（has-large-font-size）だが、実質的にはタグライン/
   サブ見出しとして大きく表示される。上の>p色ルールだと本文と同じ--rl-text-dim
   のままで、大きな文字サイズだと薄く見えてしまうため、見出しと同じ明るさにする */
.page-id-1008 .rl-content-card__body p.has-large-font-size,
.page-id-1008 .rl-page__intro p.has-large-font-size {
	color: var(--rl-text);
}
/* 「界隈一覧」のタブボタン（loos/tab、SWELL標準）はSWELL側で
   color: var(--color_text) が固定で当たっており、これはこのサイトの
   ダーク/ライト自動切替とは連動しない（カスタマイザーのテキスト色設定に
   紐づく固定値）ため、ダークモードで黒文字のまま見えづらくなる。
   このページ限定でサイトのテーマ変数に連動させる */
.page-id-1008 .c-tabList__button {
	color: var(--rl-text);
}
/* 選択中/hover中のタブは`.is-style-bb .c-tabList__button[aria-selected="true"]`
   （詳細度がベースの.c-tabList__buttonより高い）でcolor: var(--color_main)
   （このサイトのカスタマイザー設定で#000000固定）が別途当たっており、
   上のルールだけでは上書きできない。同じ祖先パスに.page-id-1008を足して
   詳細度を上げ、こちらも連動させる */
.page-id-1008 .is-style-bb > .c-tabList .c-tabList__button:hover,
.page-id-1008 .is-style-bb > .c-tabList .c-tabList__button[aria-selected="true"] {
	color: var(--rl-text);
}
.rl-page__pagination {
	margin-top: 2em;
	display: flex;
	gap: 12px;
}

/* ==========================================================================
   Contact Form 7 のガラスモーフィズム再デザイン
   お問い合わせページの本文はCF7ショートコードのみなので、
   loos系ブロックとの競合を気にせず自由にスタイリングしてよい
   ========================================================================== */
.rl-content-card table.inquiry {
	width: 100%;
	border-collapse: collapse;
}
.rl-content-card table.inquiry tr {
	display: block;
	margin-bottom: 24px;
}
.rl-content-card table.inquiry th,
.rl-content-card table.inquiry td {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	text-align: left;
}
/* カスタマイザーの追加CSSに残っている古いCF7スタイルが、
   モバイル幅（max-width:500px）で!important付きの
   border-top:1px solid #d7d7d7を最初の項目にだけ残してしまうため、
   同じ詳細度勝負にならないようこちらも!importantで打ち消す */
.rl-content-card table.inquiry tr:first-child th {
	border-top: none !important;
}
.rl-content-card table.inquiry th {
	color: var(--rl-text);
	font-weight: 700;
	margin-bottom: 8px;
}
.rl-content-card .wpcf7-form-control {
	width: 100%;
	background: var(--rl-glass-bg);
	border: none;
	border-radius: var(--rl-radius-sm);
	padding: 12px 16px;
	color: var(--rl-text);
	font-family: var(--rl-ff-jp);
	font-size: 0.95rem;
}
.rl-content-card textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}
.rl-content-card .wpcf7-form-control::placeholder {
	color: var(--rl-text-dim);
}
.rl-content-card .wpcf7-form-control:focus {
	outline: 2px solid var(--rl-highlight);
	outline-offset: 2px;
}
.rl-content-card .wpcf7-checkbox .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 16px 8px 0;
}
/* 送信ボタンにはCF7標準クラスの他、カスタマイザーの追加CSSに残っている
   レガシーな#formbtn（IDセレクタ）指定があり、通常のクラスセレクタでは
   詳細度で負けて上書きできない。このボタン用ルールにも#formbtnを含めて
   詳細度を揃えている */
.rl-content-card .wpcf7-submit,
.rl-content-card #formbtn {
	display: inline-block;
	width: auto;
	margin-top: 8px;
	padding: 14px 40px;
	border: none;
	border-radius: var(--rl-radius-sm);
	background: var(--rl-highlight);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: opacity 0.3s ease;
}
.rl-content-card .wpcf7-submit:hover,
.rl-content-card #formbtn:hover {
	opacity: 0.85;
	background: var(--rl-highlight);
	color: #fff;
}
.rl-content-card .wpcf7-spinner {
	margin-left: 12px;
}
.rl-content-card .wpcf7-not-valid-tip {
	color: #ff6b6b;
	font-size: 0.82rem;
	margin-top: 6px;
}
.rl-content-card .wpcf7-response-output {
	margin-top: 24px;
	padding: 16px 20px;
	border-radius: var(--rl-radius-sm);
	background: var(--rl-glass-bg-strong);
	color: var(--rl-text);
}
.rl-content-card form.invalid .wpcf7-response-output {
	color: #ff6b6b;
}
.rl-content-card form.sent .wpcf7-response-output {
	color: #6bffb0;
}

/* ==========================================================================
   /news/ 一覧（お知らせ）カードグリッド
   ========================================================================== */
.rl-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
	margin-top: 40px;
}
.rl-news-card {
	border-radius: var(--rl-radius-lg);
	background: var(--rl-glass-bg-strong);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--rl-glass-shadow);
	overflow: hidden;
	transition: transform 0.3s ease;
}
.rl-news-card:hover {
	transform: translateY(-4px);
}
.rl-news-card__link {
	display: block;
	color: inherit;
}
.rl-news-card__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.rl-news-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rl-news-card__body {
	padding: 20px 22px 26px;
}
.rl-news-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--rl-text);
	margin: 8px 0 10px;
	line-height: 1.5;
}
.rl-news-card__excerpt {
	font-size: 0.88rem;
	font-weight: 400;
	color: var(--rl-text-dim);
	line-height: 1.7;
}
.rl-news-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.rl-news-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--rl-radius-sm);
	background: var(--rl-glass-bg);
	color: var(--rl-text);
}
.rl-news-pagination .page-numbers.current {
	background: var(--rl-highlight);
	color: #fff;
}
.rl-news-empty {
	color: var(--rl-text-dim);
	font-weight: 400;
	margin-top: 24px;
}

/* ==========================================================================
   投稿メタ（カテゴリー・日付）／単一投稿
   ========================================================================== */
.rl-post-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 10px;
}
.rl-post-meta__cat {
	color: var(--rl-red);
	text-transform: uppercase;
}
.rl-post-meta__date {
	color: var(--rl-text-dim);
	font-weight: 400;
}
.rl-single__thumb {
	margin: 20px 0 32px;
	border-radius: var(--rl-radius-lg);
	overflow: hidden;
}
.rl-single__thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.rl-single__tags {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rl-single__tag {
	font-size: 0.8rem;
	color: var(--rl-text-dim);
	background: var(--rl-glass-bg);
	border-radius: 999px;
	padding: 4px 14px;
}
.rl-single__back {
	margin-top: 32px;
}

/* ==========================================================================
   /service/ 専用テンプレート（page-service.php）
   トップページの.rl-pre-about-media（両兵衛）と.rl-products（Own products）を
   そのまま流用。どちらも<section>ではなくfull-bleed前提のdivなので、
   固定ナビの下に余白だけ足す（左右paddingは付けない＝画像の左はみ出しを崩さない）
   ========================================================================== */
.rl-service-page {
	padding-top: clamp(120px, 18vw, 180px);
}
.rl-single__back a {
	color: var(--rl-highlight);
}

/* ==========================================================================
   /company/（page-id-405）の「代表よりご挨拶」media-text画像を
   ダーク/ライトで差し替える。post_content側の<img src>は固定のままだが、
   CSSのcontent:url()で表示だけを上書きしている（背景画像の
   ダーク/ライト切替と同じ発想）
   ========================================================================== */
html[data-theme="dark"] .page-id-405 .wp-block-media-text__media img {
	content: url("/wp-content/uploads/2026/08/fukushima.png");
}
html[data-theme="light"] .page-id-405 .wp-block-media-text__media img {
	content: url("/wp-content/uploads/2024/05/fukushima_c.png");
}

/* ==========================================================================
   /service/kaiwai/ 専用：四隅に浮かぶ3Dオブジェクト（page-kaiwai.php）
   上の2つ（左上・右上）＝最前面（ページ本文より手前、ただしナビより奥）、
   下の2つ（右下・左下）＝最背面（.rl-bgと.rl-page-blurの上・本文より奥）
   左下は.rl-bg-controls（背景シャッフルボタン）と同じ角にあるため、
   ボタンの幅より右にずらして重ならないようにしている
   ========================================================================== */
.rl-kaiwai3d {
	position: fixed;
	pointer-events: none;
}
.rl-kaiwai3d canvas {
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.rl-kaiwai3d canvas.is-loaded {
	opacity: 1;
}
.rl-kaiwai3d--tl {
	top: 90px;
	left: 16px;
	width: clamp(150px, 22vw, 280px);
	height: clamp(150px, 22vw, 280px);
	z-index: 150;
}
.rl-kaiwai3d--br {
	bottom: 16px;
	right: 16px;
	width: clamp(170px, 26vw, 320px);
	height: clamp(170px, 26vw, 320px);
	z-index: -1;
}
.rl-kaiwai3d--tr {
	top: 90px;
	right: 16px;
	width: clamp(150px, 22vw, 280px);
	height: clamp(150px, 22vw, 280px);
	z-index: 150;
}
.rl-kaiwai3d--bl {
	bottom: 16px;
	left: 130px;
	width: clamp(170px, 26vw, 320px);
	height: clamp(170px, 26vw, 320px);
	z-index: -1;
}
@media (max-width: 680px) {
	/* sneaker（左上）はモバイル限定で他の3隅と扱いを変える：
	   垂直中央に寄せ、大きく、最背面（.rl-bg/.rl-page-blurより手前・本文より奥）に回す */
	.rl-kaiwai3d--tl {
		top: 50%;
		left: 16px;
		transform: translateY(-50%);
		width: clamp(200px, 58vw, 320px);
		height: clamp(200px, 58vw, 320px);
		z-index: -1;
	}
	.rl-kaiwai3d--tr {
		top: 74px;
		width: clamp(110px, 34vw, 180px);
		height: clamp(110px, 34vw, 180px);
	}
	/* モバイルでは左下（.rl-bg-controls＝背景シャッフルボタンとも近く、
	   窮屈だった）は非表示にし、その分右下を大きく見せる */
	.rl-kaiwai3d--bl {
		display: none;
	}
	.rl-kaiwai3d--br {
		width: clamp(220px, 62vw, 360px);
		height: clamp(220px, 62vw, 360px);
	}
}