/*
 * Robse Kids - メインスタイル。
 * カラーはCSS変数で管理し、テーマオプションの値が :root を上書きする。
 *
 * デザイン言語 (v0.2.0):
 *  - 空色を主役に、ピンク・黄緑・黄色を差し色にした、にぎやかで親しみやすい構成
 *  - パズルピース柄・雲・街並み・ガーランドの装飾(すべてCSS/インラインSVGで自作)
 *  - 見出しは中央揃えの丸ゴシック太字。ボタンは塗り+白丸矢印
 *  - カードは白地に太めの主色ボーダーと大きな角丸
 */

:root {
	--robse-primary: #4ec1f0;
	--robse-primary-thin: rgba(78, 193, 240, 0.10);
	--robse-primary-soft: rgba(78, 193, 240, 0.55);
	--robse-accent: #f16ca2;
	--robse-accent-thin: rgba(241, 108, 162, 0.12);
	--robse-green: #90be26;
	--robse-yellow: #ffcf4d;
	--robse-text: #3f4a52;
	--robse-text-light: #8a9aa4;
	--robse-border: #e2eef5;
	--robse-bg: #ffffff;
	--robse-navy: #2f9fd0;
	--robse-sunday: #f16ca2;
	--robse-radius: 20px;
	--robse-shadow: 0 2px 18px rgba(60, 140, 180, 0.10);
	--robse-shadow-hover: 0 12px 32px rgba(60, 140, 180, 0.18);
	--robse-container: 1120px;
	--robse-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "Meiryo", sans-serif;
	--robse-font-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic Medium", sans-serif;
	--robse-font-serif: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic Medium", sans-serif;
	--robse-font-en: "Poppins", "Avenir Next", "Helvetica Neue", sans-serif;
	/* 主色から自動生成するグラデーションと淡色(オプションの色変更に追従) */
	--robse-grad: linear-gradient(135deg, color-mix(in srgb, var(--robse-primary), #fff 30%) 0%, var(--robse-primary) 100%);
	--robse-pale: color-mix(in srgb, var(--robse-primary), #fff 92%);
	--robse-pale-strong: color-mix(in srgb, var(--robse-primary), #fff 82%);
	--robse-accent-pale: color-mix(in srgb, var(--robse-accent), #fff 82%);
	/* 装飾アイコン(色オプション変更時は dynamic-css.php が選択色で再生成して上書きする) */
	--robse-icon-arrow-primary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7h7M7 4l3 3-3 3' stroke='%234ec1f0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--robse-icon-arrow-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7h7M7 4l3 3-3 3' stroke='%23f16ca2' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--robse-icon-puzzle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 40 40'%3E%3Cpath d='M8 6h9a5 5 0 0 1 10 0h5v9a5 5 0 0 1 0 10v9h-9a5 5 0 0 0-10 0H8v-9a5 5 0 0 0 0-10z' fill='%234ec1f0'/%3E%3C/svg%3E");
}

/* ===== リセット・ベース ===== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--robse-font);
	font-size: 16px;
	line-height: 1.9;
	color: var(--robse-text);
	background: var(--robse-bg);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--robse-primary);
	color: #fff;
}

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

a {
	color: var(--robse-primary);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
	opacity: 0.75;
}

h1,
h2,
h3,
h4 {
	line-height: 1.5;
	margin: 0 0 0.6em;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 8px 16px;
	background: var(--robse-primary);
	color: #fff;
}

/* ===== ボタン ===== */

/* 塗りボタン(お問い合わせ等の主CTA): 主色グラデーション */
.button-accent {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 2.4em;
	border-radius: var(--robse-radius);
	background: var(--robse-grad);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.08em;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--robse-primary), transparent 65%);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.button-accent::after {
	content: "\2192";
	font-family: var(--robse-font-en);
	transition: transform 0.25s ease;
}

.button-accent:hover {
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--robse-primary), transparent 55%);
}

.button-accent:hover::after {
	transform: translateX(4px);
}

/* アウトラインボタン: 白地+主色枠。右下にずらした淡い影 */
.button-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	padding: 0.95em 3em;
	border: 1px solid var(--robse-primary);
	border-radius: var(--robse-radius);
	background: #fff;
	color: var(--robse-primary);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	box-shadow: 5px 5px 0 color-mix(in srgb, var(--robse-primary), #fff 82%);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.button-outline::before {
	content: "\2192";
	font-family: var(--robse-font-en);
	transition: transform 0.25s ease;
}

.button-outline:hover {
	opacity: 1;
	background: var(--robse-primary);
	color: #fff;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 color-mix(in srgb, var(--robse-primary), #fff 82%);
}

.button-outline--white {
	border-color: #fff;
	box-shadow: 5px 5px 0 rgba(255, 255, 255, 0.28);
}

.button-outline--white:hover {
	background: #fff;
	color: var(--robse-primary);
	box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.28);
}

/* テキストリンク(→つき下線) */
.text-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	color: var(--robse-primary);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.08em;
}

.text-link-arrow::after {
	content: "\2192";
	font-family: var(--robse-font-en);
	transition: transform 0.25s ease;
}

.text-link-arrow:hover::after {
	transform: translateX(4px);
}

/* ===== ヘッダー ===== */
.site-header {
	position: relative;
	background: transparent;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: none;
	margin: 0 auto;
	padding: 14px 0 14px 28px;
}

.site-branding {
	margin-right: auto;
}

.site-title {
	font-family: var(--robse-font-round);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--robse-text);
}

.custom-logo {
	display: block;
	max-height: 64px;
	width: auto;
}

/* ロゴ画像(マスコット等)＋事業所名の並び表示 */
.site-title--with-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.site-title__logo {
	display: block;
	width: auto;
	max-height: 48px;
	flex: 0 0 auto;
}

.site-title__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-header__contact {
	display: flex;
	align-items: center;
	gap: 24px;
}

.header-phone {
	color: var(--robse-text);
	font-weight: 500;
	font-size: 1.2rem;
	font-family: var(--robse-font-en);
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* お問い合わせボタンがない構成では電話番号が右端に張り付くため余白を確保 */
.site-header__contact > .header-phone:last-child {
	margin-right: 28px;
}

.header-phone__number::before {
	content: "\260E\FE0E";
	margin-right: 0.35em;
	color: var(--robse-primary);
	font-size: 0.9em;
}

/* お問い合わせ: 右上のグラデーションブロック */
.header-reserve {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 16px 30px;
	border-radius: 0 0 0 var(--robse-radius);
	background: var(--robse-grad);
	color: #fff;
	text-align: center;
	align-self: stretch;
	justify-content: center;
	transition: filter 0.25s ease;
}

.header-reserve:hover {
	opacity: 1;
	filter: brightness(1.06);
}

.header-reserve__jp {
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.1em;
}

.header-reserve__en {
	font-family: var(--robse-font-en);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	opacity: 0.85;
}

/* ハンバーガー */
.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.menu-toggle__bar,
.menu-toggle__bar::before,
.menu-toggle__bar::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--robse-text);
	position: relative;
	margin: 0 auto;
	transition: transform 0.2s ease;
	content: "";
}

.menu-toggle__bar::before {
	position: absolute;
	top: -7px;
}

.menu-toggle__bar::after {
	position: absolute;
	top: 7px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar {
	background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar::before {
	top: 0;
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar::after {
	top: 0;
	transform: rotate(-45deg);
}

/* グローバルナビ: 余白で組む細めのリンク */
.global-nav__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--robse-container);
}

.global-nav__list a {
	position: relative;
	display: block;
	padding: 10px 22px 14px;
	color: var(--robse-text);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.12em;
}

.global-nav__list a::after {
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 8px;
	height: 2px;
	border-radius: 2px;
	background: var(--robse-primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.global-nav__list a:hover {
	opacity: 1;
	color: var(--robse-primary);
}

.global-nav__list a:hover::after {
	transform: scaleX(1);
}

/* ===== パンくず ===== */
.breadcrumb {
	max-width: var(--robse-container);
	margin: 0 auto;
	padding: 12px 20px;
	font-size: 0.85rem;
	color: var(--robse-text-light);
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumb li + li::before {
	content: "›";
	margin-right: 0.5em;
	color: var(--robse-text-light);
}

/* ===== レイアウト ===== */
.site-main__inner {
	max-width: var(--robse-container);
	margin: 0 auto;
	padding: 40px 20px 80px;
}

.site-main__inner--narrow {
	max-width: 820px;
}

.page-header {
	margin-bottom: 40px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--robse-border);
}

.page-title {
	font-family: var(--robse-font-round);
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	color: var(--robse-text);
}

/* ===== トップページ: メインビジュアル ===== */
.front-hero {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 8px 0 34px;
}

/* 水彩にじみ風の色面(左上に淡いティール・左に淡い黄) */
.front-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(520px 340px at 6% 8%, color-mix(in srgb, var(--robse-primary), #fff 80%) 0%, transparent 68%),
		radial-gradient(420px 300px at 26% 2%, color-mix(in srgb, var(--robse-primary), #fff 88%) 0%, transparent 70%),
		radial-gradient(380px 300px at 2% 62%, var(--robse-accent-pale) 0%, transparent 66%);
	opacity: 0.9;
}

.front-hero__inner {
	position: relative;
	z-index: 1;
}

/* 写真あり: 左にキャッチ・右に大きな角丸写真の2カラム(横書き) */
.front-hero--photo .front-hero__inner {
	display: grid;
	grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	max-width: var(--robse-container);
	margin: 0 auto;
	padding: clamp(32px, 5vw, 72px) 20px clamp(24px, 4vw, 56px);
}

.front-hero__photo {
	order: 2;
}

.front-hero__photo img {
	display: block;
	width: 100%;
	height: clamp(320px, 48vh, 460px);
	object-fit: cover;
	border-radius: 28px;
	box-shadow: var(--robse-shadow);
}

.front-hero--photo .front-hero__copy {
	order: 1;
}

.front-hero--photo .front-hero__title {
	margin: 0 0 0.7em;
	font-family: var(--robse-font-round);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.9;
	color: var(--robse-primary);
	animation: robse-fade-up 0.9s ease 0.1s both;
}

.front-hero--photo .front-hero__text {
	margin: 0;
	font-size: 0.98rem;
	letter-spacing: 0.06em;
	line-height: 2.2;
	animation: robse-fade-up 0.9s ease 0.35s both;
}

/* 写真なし: 水彩背景の上に横書きで大きく */
.front-hero:not(.front-hero--photo) {
	padding: 110px 20px 60px;
}

.front-hero:not(.front-hero--photo) .front-hero__copy {
	position: relative;
	z-index: 1;
	max-width: var(--robse-container);
	margin: 0 auto;
}

.front-hero:not(.front-hero--photo) .front-hero__title {
	font-family: var(--robse-font-round);
	font-size: clamp(1.7rem, 3.6vw, 2.7rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 2;
	color: var(--robse-primary);
	margin-bottom: 0.6em;
	animation: robse-fade-up 0.9s ease 0.1s both;
}

.front-hero:not(.front-hero--photo) .front-hero__text {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.3;
	max-width: 640px;
	animation: robse-fade-up 0.9s ease 0.35s both;
}

/* 大切なお知らせバー */
.front-hero__newsbar {
	position: relative;
	z-index: 1;
	max-width: var(--robse-container);
	margin: 30px auto 0;
	padding: 0 20px;
}

.hero-newsbar {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 920px;
	color: var(--robse-text);
}

.hero-newsbar:hover {
	opacity: 1;
}

.hero-newsbar__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	color: var(--robse-primary);
	font-family: var(--robse-font-round);
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: 0.14em;
}

.hero-newsbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--robse-primary);
	color: #fff;
	font-family: var(--robse-font-en);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
}

.hero-newsbar__title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-bottom: 6px;
	border-bottom: 1px solid color-mix(in srgb, var(--robse-text), #fff 55%);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
}

.hero-newsbar__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: 1px solid var(--robse-primary);
	border-radius: 50%;
	color: var(--robse-primary);
	font-family: var(--robse-font-en);
	transition: transform 0.25s ease;
}

.hero-newsbar:hover .hero-newsbar__arrow {
	transform: translateX(4px);
}

/* ===== トップページ: セクション共通 ===== */
.front-section {
	position: relative;
	padding: 96px 20px;
	overflow: hidden;
}

.front-section__inner {
	position: relative;
	z-index: 1;
	max-width: var(--robse-container);
	margin: 0 auto;
}

/* セクション見出し: 細身の大きな英字 + 小さな日本語(どちらも主色) */
.front-section__title {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	margin-bottom: 2.4em;
}

.front-section__title-en {
	font-family: var(--robse-font-en);
	font-size: clamp(2.2rem, 4.6vw, 3.2rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--robse-primary);
}

.front-section__title-jp {
	font-family: var(--robse-font-round);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	color: var(--robse-primary);
}

.front-section__title--left {
	align-items: flex-start;
	text-align: left;
	margin-bottom: 0;
}

.front-section__title--onpanel .front-section__title-en,
.front-section__title--onpanel .front-section__title-jp {
	color: #fff;
}

/* 英字なし(汎用)見出し */
.front-section__title--plain {
	position: relative;
	padding-bottom: 0.6em;
}

.front-section__title--plain::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 40px;
	height: 2px;
	background: var(--robse-primary);
	border-radius: 2px;
}

.front-section__more {
	text-align: center;
	margin-top: 3em;
}

.front-section__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	padding: 0.85em 3em;
	border: 1px solid var(--robse-primary);
	border-radius: var(--robse-radius);
	background: #fff;
	color: var(--robse-primary);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	box-shadow: 5px 5px 0 color-mix(in srgb, var(--robse-primary), #fff 82%);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.front-section__more a:hover {
	opacity: 1;
	background: var(--robse-primary);
	color: #fff;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 color-mix(in srgb, var(--robse-primary), #fff 82%);
}

/* 旧英字透かしは廃止 */
.front-section[data-en]::before {
	content: none;
}

/* ===== メッセージ(フリースペース) ===== */
.front-free::after {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -80px;
	width: 420px;
	height: 360px;
	pointer-events: none;
	background: radial-gradient(closest-side, var(--robse-accent-pale) 0%, transparent 72%);
}

.message-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
}

.message-grid--no-photo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 780px;
	margin-inline: auto;
}

.message-grid__title {
	font-family: var(--robse-font-round);
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 2;
	color: var(--robse-primary);
	margin: 0 0 1em;
}

.front-free__content {
	font-size: 0.96rem;
	line-height: 2.4;
	letter-spacing: 0.04em;
}

.front-free__content p {
	margin: 0 0 1.6em;
}

.message-grid__photo {
	margin: 0;
}

.message-grid__photo img {
	display: block;
	width: 100%;
	border-radius: var(--robse-radius);
	box-shadow: var(--robse-shadow);
}

/* コンセプト(旧汎用2カラム。後方互換のため残す) */
.concept-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.concept-grid__label {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid var(--robse-text-light);
	margin: 0;
}

.concept-grid__catch {
	font-family: var(--robse-font-round);
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--robse-primary);
	margin: 0.9em 0 0.9em;
}

.concept-grid__body p:not(.concept-grid__label):not(.concept-grid__catch) {
	font-size: 0.95rem;
	line-height: 2.1;
}

.concept-grid__photo {
	margin: 0;
}

.concept-grid__photo img {
	width: 100%;
	border-radius: var(--robse-radius);
	box-shadow: var(--robse-shadow);
}

/* ===== 支援プログラム ===== */
.front-course {
	background: var(--robse-pale);
}

.front-course::before {
	content: "";
	position: absolute;
	left: -140px;
	top: -60px;
	width: 460px;
	height: 380px;
	pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--robse-primary), #fff 78%) 0%, transparent 72%);
}

/* カードグリッド */
.card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.card-grid--staff {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card a {
	display: block;
	height: 100%;
	background: #fff;
	border-radius: var(--robse-radius);
	overflow: hidden;
	color: var(--robse-text);
	box-shadow: var(--robse-shadow);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card a:hover {
	box-shadow: var(--robse-shadow-hover);
	transform: translateY(-5px);
	opacity: 1;
}

.card__thumb {
	overflow: hidden;
}

.card__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.card a:hover .card__thumb img {
	transform: scale(1.05);
}

.card__thumb--round {
	padding: 24px 24px 0;
}

.card__thumb--round img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
}

.card--staff {
	text-align: center;
}

.card__title {
	font-family: var(--robse-font-round);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--robse-primary);
	text-align: center;
	margin: 18px 20px 8px;
}

.card__excerpt {
	margin: 0 20px 20px;
	font-size: 0.88rem;
	line-height: 1.9;
	color: var(--robse-text-light);
}

/* ===== 空き状況 ===== */
.front-vacancy {
	background: var(--robse-pale);
}

.front-vacancy::before {
	content: "";
	position: absolute;
	right: -130px;
	top: -60px;
	width: 420px;
	height: 360px;
	pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--robse-accent), #fff 72%) 0%, transparent 72%);
}

.vacancy-card {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 40px);
	background: #fff;
	border-radius: 24px;
	box-shadow: var(--robse-shadow);
}

.vacancy-updated {
	margin: 0 0 1em;
	text-align: right;
	font-size: 0.86rem;
	color: var(--robse-text-light);
}

/* 空き状況の記号 */
.vacancy-table .robse-vac-open {
	color: var(--robse-accent);
	font-weight: 700;
	font-size: 1.2em;
}

.vacancy-table .robse-vac-few {
	color: var(--robse-primary);
	font-weight: 700;
	font-size: 1.15em;
}

.vacancy-table .robse-vac-full {
	color: #c76b6b;
	font-weight: 700;
	font-size: 1.1em;
}

.vacancy-table .robse-vac-closed {
	color: #c9bfb4;
	font-size: 0.82em;
}

.vacancy-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	font-size: 0.86rem;
	color: var(--robse-text-light);
}

.vacancy-legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vacancy-legend__mark {
	font-weight: 700;
	font-size: 1.05em;
}

.vacancy-card__cta {
	margin: 28px 0 0;
	text-align: center;
}

/* ===== 1日の流れ ===== */
.front-flow::before {
	content: "";
	position: absolute;
	left: -120px;
	bottom: -60px;
	width: 400px;
	height: 340px;
	pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--robse-primary), #fff 82%) 0%, transparent 70%);
}

.flow-switch {
	position: relative;
	z-index: 1;
	max-width: 820px;
	margin: 0 auto;
}

/* ラジオ本体は隠し、ラベルでタブを作る(JS不要の切替) */
.flow-switch__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.flow-switch__tabs {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 36px;
}

.flow-switch__tab {
	padding: 0.7em 2em;
	border: 1px solid var(--robse-primary);
	border-radius: 999px;
	background: #fff;
	color: var(--robse-primary);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.flow-switch__tab:hover {
	background: var(--robse-primary-thin);
}

/* 選択中のタブを塗り、対応するパネルだけ表示する */
.flow-switch__radio--weekday:checked ~ .flow-switch__tabs .flow-switch__tab--weekday,
.flow-switch__radio--holiday:checked ~ .flow-switch__tabs .flow-switch__tab--holiday {
	background: var(--robse-primary);
	color: #fff;
}

.flow-switch__panel {
	display: none;
}

.flow-switch--single .flow-switch__panel,
.flow-switch__radio--weekday:checked ~ .flow-switch__panel--weekday,
.flow-switch__radio--holiday:checked ~ .flow-switch__panel--holiday {
	display: block;
}

/* タイムライン */
.flow-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* 縦のガイド線 */
.flow-timeline::before {
	content: "";
	position: absolute;
	left: 92px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--robse-primary), #fff 70%);
}

.flow-step {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 20px 40px;
	padding: 0 0 32px;
}

.flow-step:last-child {
	padding-bottom: 0;
}

.flow-step__time {
	font-family: var(--robse-font-en);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--robse-primary);
	text-align: right;
	padding-top: 0.15em;
}

/* 時刻の右にある丸ポチ */
.flow-step::before {
	content: "";
	position: absolute;
	left: 86px;
	top: 0.5em;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--robse-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--robse-primary), #fff 82%);
}

.flow-step__body {
	min-width: 0;
}

.flow-step__title {
	font-family: var(--robse-font-round);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 0.3em;
}

.flow-step__text {
	font-size: 0.94rem;
	line-height: 2;
	color: var(--robse-text-light);
}

.flow-step__text p {
	margin: 0;
}

.flow-step__thumb {
	grid-column: 2;
}

.flow-step__thumb img {
	display: block;
	width: 100%;
	max-width: 340px;
	border-radius: var(--robse-radius);
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* ===== スタッフ紹介 ===== */
.front-staff::before {
	content: "";
	position: absolute;
	right: -130px;
	top: 40px;
	width: 420px;
	height: 360px;
	pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--robse-primary), #fff 84%) 0%, transparent 72%);
}

.staff-rows {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 40px;
	max-width: 980px;
	margin: 0 auto;
}

.staff-row__link {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 44px;
	align-items: center;
	padding: 36px 40px;
	background: #fff;
	border-radius: var(--robse-radius);
	box-shadow: var(--robse-shadow);
	color: var(--robse-text);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 偶数行は写真を右に */
.staff-row:nth-child(even) .staff-row__link {
	grid-template-columns: minmax(0, 1fr) 300px;
}

.staff-row:nth-child(even) .staff-row__photo {
	order: 2;
}

.staff-row__link:hover {
	box-shadow: var(--robse-shadow-hover);
	transform: translateY(-4px);
	opacity: 1;
}

/* 写真未設定のスタッフは1カラムで全幅を使う(空の写真列を残さない)。
   偶数行の .staff-row:nth-child(even) セレクタに詳細度で負けないよう nth-child 付きも併記。 */
.staff-row__link--no-photo,
.staff-row:nth-child(even) .staff-row__link--no-photo {
	grid-template-columns: minmax(0, 1fr);
}

.staff-row__photo {
	overflow: hidden;
	border-radius: var(--robse-radius);
}

.staff-row__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.staff-row__link:hover .staff-row__photo img {
	transform: scale(1.05);
}

.staff-row__name {
	font-family: var(--robse-font-round);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 0.3em;
}

.staff-row__role {
	display: inline-block;
	padding: 0.1em 1.1em;
	border: 1px solid var(--robse-primary);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--robse-primary);
	margin: 0 0 1em;
}

.staff-row__bio {
	font-size: 0.94rem;
	line-height: 2;
	color: var(--robse-text-light);
	margin: 0 0 1.2em;
}

.staff-row__more {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.55em 1.9em;
	border: 1px solid var(--robse-primary);
	border-radius: var(--robse-radius);
	background: #fff;
	color: var(--robse-primary);
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	box-shadow: 4px 4px 0 color-mix(in srgb, var(--robse-primary), #fff 82%);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.staff-row__more::after {
	content: "→";
	display: inline-block;
	font-family: var(--robse-font-en);
	transition: transform 0.25s ease;
}

.staff-row__link:hover .staff-row__more {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 color-mix(in srgb, var(--robse-primary), #fff 82%);
}

.staff-row__link:hover .staff-row__more::after {
	transform: translateX(4px);
}

/* ===== 求人情報 ===== */
.front-recruit::before {
	content: "";
	position: absolute;
	left: -120px;
	bottom: -70px;
	width: 400px;
	height: 340px;
	pointer-events: none;
	background: radial-gradient(closest-side, var(--robse-accent-pale) 0%, transparent 70%);
}

.front-recruit__lead {
	position: relative;
	z-index: 1;
	text-align: center;
	margin: -1.6em 0 2.8em;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	color: var(--robse-text-light);
}

.recruit-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
}

.recruit-card {
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--robse-primary), #fff 55%);
	border-radius: var(--robse-radius);
	box-shadow: 6px 6px 0 color-mix(in srgb, var(--robse-primary), #fff 86%);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.recruit-card:hover {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 color-mix(in srgb, var(--robse-primary), #fff 86%);
}

.recruit-card__link {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: 28px;
	color: var(--robse-text);
}

.recruit-card__link:hover {
	opacity: 1;
}

.recruit-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 0.2em 1.1em;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.8;
	color: #fff;
	background: var(--robse-text-light);
}

.recruit-badge--fulltime {
	background: var(--robse-primary);
}

.recruit-badge--parttime {
	background: var(--robse-accent);
}

.recruit-badge--contract {
	background: var(--robse-navy);
}

.recruit-card__title {
	font-family: var(--robse-font-round);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0;
}

.recruit-card__excerpt {
	font-size: 0.92rem;
	color: var(--robse-text-light);
	margin: 0;
}

.recruit-card__meta {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 14px 16px;
	background: var(--robse-pale);
	border-radius: calc(var(--robse-radius) - 2px);
	font-size: 0.88rem;
}

.recruit-card__meta-row {
	display: flex;
	gap: 12px;
}

.recruit-card__meta-row dt {
	flex-shrink: 0;
	font-weight: 700;
	color: var(--robse-primary);
}

.recruit-card__meta-row dd {
	margin: 0;
}

.recruit-card__more {
	margin-top: auto;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--robse-primary);
}

.recruit-card__more::after {
	content: "→";
	display: inline-block;
	margin-left: 6px;
	font-family: var(--robse-font-en);
	transition: transform 0.25s ease;
}

.recruit-card:hover .recruit-card__more::after {
	transform: translateX(4px);
}

/* 求人個別ページ: 募集要項テーブル */
.single-article__badge {
	margin: 0 0 0.9em;
}

.recruit-conditions {
	margin-top: 56px;
}

.recruit-conditions__title {
	position: relative;
	padding: 0.4em 0 0.4em 0.9em;
	font-family: var(--robse-font-round);
	font-size: 1.3rem;
	margin: 0 0 0.9em;
}

.recruit-conditions__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	bottom: 0.35em;
	width: 4px;
	border-radius: 2px;
	background: var(--robse-primary);
}

.recruit-table {
	width: 100%;
	border-collapse: collapse;
}

.recruit-table tr {
	border-bottom: 1px solid var(--robse-border);
}

.recruit-table th {
	width: 9em;
	padding: 16px 18px;
	text-align: left;
	vertical-align: top;
	font-weight: 700;
	background: var(--robse-pale);
}

.recruit-table td {
	padding: 16px 18px;
	vertical-align: top;
}

.recruit-conditions__cta {
	margin-top: 32px;
	text-align: center;
}

/* ===== FAQ ===== */
.faq-list {
	max-width: 820px;
	margin: 0 auto;
}

.faq-item {
	background: #fff;
	border-radius: var(--robse-radius);
	box-shadow: var(--robse-shadow);
	margin-bottom: 16px;
	overflow: hidden;
}

.faq-item__question {
	padding: 20px 56px 20px 60px;
	position: relative;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.2s ease;
}

.faq-item__question:hover {
	background: var(--robse-primary-thin);
}

.faq-item__question::-webkit-details-marker {
	display: none;
}

.faq-item__question::before {
	content: "Q";
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--robse-primary);
	color: #fff;
	font-family: var(--robse-font-en);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
}

/* 開閉インジケーター(+/−) */
.faq-item__question::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--robse-primary);
	font-family: var(--robse-font-en);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1;
	transition: transform 0.25s ease;
}

.faq-item[open] .faq-item__question::after {
	content: "−";
}

.faq-item__answer {
	padding: 4px 24px 20px 60px;
	position: relative;
	color: var(--robse-text);
}

.faq-item__answer::before {
	content: "A";
	position: absolute;
	left: 18px;
	top: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--robse-accent-thin);
	color: color-mix(in srgb, var(--robse-accent), #000 35%);
	font-family: var(--robse-font-en);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
}

.faq-item__answer > :first-child {
	margin-top: 0;
}

/* ===== 自己評価結果の公表 ===== */
.hyoka-card {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 40px);
	background: #fff;
	border-radius: 24px;
	box-shadow: var(--robse-shadow);
}

.hyoka-list__intro {
	margin: 0 0 1.6em;
	color: var(--robse-text);
}

.hyoka-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.hyoka-item {
	padding: 20px 24px;
	border: 1px solid var(--robse-border);
	border-radius: var(--robse-radius);
	background: var(--robse-pale);
}

.hyoka-item__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 6px 16px;
	margin-bottom: 14px;
}

.hyoka-item__year {
	font-family: var(--robse-font-round);
	font-size: 1.15rem;
	font-weight: 700;
	color: color-mix(in srgb, var(--robse-primary), #000 25%);
}

.hyoka-item__date {
	font-size: 0.85rem;
	color: var(--robse-text-light);
}

.hyoka-item__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 16px;
	margin: 0;
}

.hyoka-item__link.button-outline {
	padding: 0.75em 3.2em 0.75em 1.6em;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
}

.hyoka-item__links--empty {
	color: var(--robse-text-light);
}

/* ===== お知らせ(ジャーナル型カード) ===== */
.front-news::before {
	content: "";
	position: absolute;
	left: -140px;
	top: 30%;
	width: 400px;
	height: 360px;
	pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--robse-primary), #fff 86%) 0%, transparent 72%);
}

.front-news__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 2.4em;
}

.front-news__more {
	margin: 0 0 0.6em;
}

.journal-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.journal-card__link {
	display: block;
	color: var(--robse-text);
}

.journal-card__link:hover {
	opacity: 1;
}

.journal-card__thumb {
	overflow: hidden;
	border-radius: var(--robse-radius);
	box-shadow: var(--robse-shadow);
}

.journal-card__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.journal-card__link:hover .journal-card__thumb img {
	transform: scale(1.05);
}

.journal-card__thumb--placeholder {
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(220px 160px at 20% 30%, color-mix(in srgb, var(--robse-primary), #fff 78%) 0%, transparent 70%),
		radial-gradient(200px 150px at 82% 76%, var(--robse-accent-pale) 0%, transparent 70%),
		#fff;
	box-shadow: none;
	border: 1px solid var(--robse-border);
}

.journal-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 8px;
}

.journal-card__tag {
	display: inline-block;
	padding: 0.05em 1em;
	border: 1px solid var(--robse-primary);
	border-radius: 999px;
	color: var(--robse-primary);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.journal-card__meta .posted-date {
	margin-left: auto;
	color: var(--robse-text-light);
}

.journal-card__title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.8;
	margin: 0;
	transition: color 0.2s ease;
}

.journal-card__link:hover .journal-card__title {
	color: var(--robse-primary);
}

/* ===== アクセス: ティールグラデーションのパネル ===== */
.front-access {
	padding: 0;
	margin-top: 100px;
	overflow: visible;
	background: transparent;
}

.front-access > .front-section__inner {
	max-width: none;
	padding: 76px 20px 72px;
	border-radius: 44px 44px 0 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--robse-primary), #fff 32%) 0%, var(--robse-primary) 100%);
	color: #fff;
}

.front-access .front-section__title,
.front-access .access-contact,
.front-access .access-card {
	max-width: var(--robse-container);
	margin-inline: auto;
}

.front-access .front-section__title-en,
.front-access .front-section__title-jp {
	color: #fff;
}

/* お問い合わせ導線(電話+メール) */
.access-contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 28px 72px;
	margin-bottom: 48px;
	text-align: center;
}

.access-contact__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	opacity: 0.92;
	margin-bottom: 10px;
}

.access-contact__number {
	font-family: var(--robse-font-en);
	font-size: 2.1rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #fff;
	line-height: 1.2;
}

/* 白カード(事業所情報+地図+開所時間表) */
.access-card {
	background: #fff;
	border-radius: 16px;
	padding: clamp(24px, 4vw, 44px);
	color: var(--robse-text);
	box-shadow: 0 18px 44px rgba(120, 70, 20, 0.20);
}

.access-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 48px;
	align-items: start;
}

/* 地図未設定時は1カラムで中央に */
.access-grid--no-map {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
	margin-inline: auto;
}

/* グリッド子要素の暗黙min-width:autoを打ち消す
   (開所時間表のmin-widthがページ全体を押し広げるのを防ぐ) */
.access-grid__info,
.access-grid__map {
	min-width: 0;
}

/* 事業所情報の定義リスト(下線区切り) */
.access-list {
	margin: 0;
}

.access-list__row {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 20px;
	padding: 18px 4px;
	border-bottom: 1px solid var(--robse-border);
}

.access-list__row:first-child {
	border-top: 1px solid var(--robse-border);
}

.access-list dt {
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--robse-primary);
}

.access-list dd {
	margin: 0;
	font-size: 0.95rem;
}

.access-hours {
	margin: 44px 0 0;
}

/*
 * 地図はアクセスカードの下に全幅で大きく出す(2026-08-29 村松さん指示)。
 * 以前は事業所情報の横に並べていたが、送迎エリアの説明もあるテーマなので
 * 場所が一目で分かるほうが役に立つ。
 */
.access-map {
	position: relative;
	z-index: 1;
	max-width: var(--robse-container);
	margin: clamp(28px, 4vw, 48px) auto 0;
	line-height: 0; /* iframe下の隙間を消す */
}

.access-map iframe,
.access-grid__map iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 42vw, 460px);
	min-height: 0;
	border: 0;
	border-radius: var(--robse-radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

/* ===== 開所時間表: 縦罫線なし・横罫線のみのミニマル表 ===== */
.hours-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hours-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	background: transparent;
	font-size: 0.95rem;
}

.hours-table th,
.hours-table td {
	border: 0;
	border-bottom: 1px solid var(--robse-border);
	padding: 14px 6px;
	text-align: center;
}

.hours-table thead th {
	background: transparent;
	color: var(--robse-text);
	font-weight: 700;
	border-bottom: 2px solid var(--robse-text);
	padding-bottom: 10px;
}

/* 曜日ごとの色: 土=主色 / 日祝=赤系 */
.hours-table thead .hours-day--sat {
	color: var(--robse-primary);
}

.hours-table thead .hours-day--sun,
.hours-table thead .hours-day--hol {
	color: var(--robse-sunday);
}

.hours-table .hours-table__label {
	white-space: nowrap;
	padding-inline: 12px;
}

.hours-table thead .hours-table__label {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	color: var(--robse-text-light);
	font-weight: 600;
}

.hours-table tbody .hours-table__label {
	background: transparent;
	font-weight: 700;
	text-align: left;
	font-size: 0.92rem;
	letter-spacing: 0.02em;
}

.hours-table .robse-mark-open {
	color: var(--robse-primary);
	font-weight: 700;
	font-size: 1.2em;
}

.hours-table .robse-mark-part {
	color: color-mix(in srgb, var(--robse-accent), #000 25%);
	font-weight: 700;
	font-size: 1.05em;
}

.hours-table .robse-mark-closed {
	color: #c3cad9;
	font-size: 0.82em;
}

.hours-note {
	margin-top: 1em;
	font-size: 0.85rem;
	color: var(--robse-text-light);
}

/* ===== 記事一覧 ===== */
.post-list__item {
	margin-bottom: 24px;
}

.post-list__link {
	display: flex;
	gap: 24px;
	padding: 20px;
	background: #fff;
	border-radius: var(--robse-radius);
	box-shadow: var(--robse-shadow);
	color: var(--robse-text);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.post-list__link:hover {
	box-shadow: var(--robse-shadow-hover);
	transform: translateY(-3px);
	opacity: 1;
}

.post-list__thumb {
	flex-shrink: 0;
	width: 240px;
}

.post-list__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 8px;
}

.post-list__title {
	font-size: 1.15rem;
	margin: 0.2em 0;
}

.post-list__excerpt {
	font-size: 0.92rem;
	color: var(--robse-text-light);
	margin: 0;
}

.posted-date {
	font-size: 0.85rem;
	font-family: var(--robse-font-en);
	letter-spacing: 0.04em;
	color: var(--robse-text-light);
}

/* card-grid内で使われた場合はカード型に */
.card-grid .post-list__item {
	margin: 0;
}

.card-grid .post-list__link {
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
}

.card-grid .post-list__thumb {
	width: 100%;
}

.card-grid .post-list__body {
	padding: 16px 18px;
}

/* ===== 個別記事 ===== */
.single-article__header {
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--robse-border);
}

.single-article__title {
	font-family: var(--robse-font-round);
	font-size: 1.6rem;
	letter-spacing: 0.08em;
}

.single-article__thumb {
	margin-bottom: 28px;
}

.single-article__thumb img {
	display: block;
	/*
	 * スタッフの顔写真のような正方形・縦長の画像を入れると、
	 * 横幅いっぱいに伸びて本文が押し出される。高さで頭打ちにして中央に置く。
	 * 横長の写真(お知らせ等)はこれまでどおり幅いっぱいのまま。
	 */
	max-height: 460px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	border-radius: var(--robse-radius);
}

.single-article__content h2 {
	position: relative;
	padding: 0.4em 0 0.4em 0.9em;
	font-family: var(--robse-font-round);
	font-size: 1.3rem;
	margin-top: 2em;
}

.single-article__content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	bottom: 0.35em;
	width: 4px;
	border-radius: 2px;
	background: var(--robse-primary);
}

.single-article__content h3 {
	border-bottom: 1px solid var(--robse-primary-soft);
	padding-bottom: 0.3em;
	font-size: 1.15rem;
	margin-top: 1.8em;
}

/* ===== ページネーション ===== */
.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	text-align: center;
	border: 1px solid var(--robse-border);
	border-radius: 8px;
}

.pagination .page-numbers.current {
	background: var(--robse-primary);
	border-color: var(--robse-primary);
	color: #fff;
}

/* ===== フッター(アクセスパネルから連続するティール) ===== */
.site-footer {
	margin-top: 0;
	background: var(--robse-primary);
	color: #fff;
}

.site-footer__inner {
	max-width: var(--robse-container);
	margin: 0 auto;
	padding: 64px 20px 28px;
}

.site-footer a {
	color: #fff;
}

/* フッター内のCTAボタンは白地に反転 */
.site-footer .button-accent {
	background: #fff;
	color: var(--robse-primary);
	box-shadow: 5px 5px 0 rgba(255, 255, 255, 0.25);
}

/* 3カラムフッター */
.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 48px;
	align-items: start;
}

.footer-grid__heading {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	opacity: 0.8;
	margin: 0 0 1em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-clinic-name {
	font-family: var(--robse-font-round);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 0.8em;
}

.footer-clinic-address,
.footer-clinic-hours {
	font-size: 0.92rem;
	opacity: 0.9;
	margin: 0.3em 0;
	line-height: 2;
}

.footer-clinic-phone {
	font-family: var(--robse-font-en);
	font-size: 1.3rem;
	letter-spacing: 0.05em;
	margin: 0.6em 0 0;
}

.footer-sitemap {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: 0.92rem;
}

.footer-sitemap a {
	opacity: 0.9;
	transition: opacity 0.2s ease, padding-left 0.2s ease;
}

.footer-sitemap a:hover {
	opacity: 1;
	padding-left: 6px;
}

.footer-reserve {
	margin: 1.4em 0 0;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin: 40px 0 0;
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	list-style: none;
	margin: 40px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.88rem;
	letter-spacing: 0.04em;
}

.footer-nav__list a {
	opacity: 0.9;
}

.footer-nav__list a:hover {
	opacity: 1;
}

.site-copyright {
	text-align: center;
	font-size: 0.78rem;
	font-family: var(--robse-font-en);
	letter-spacing: 0.12em;
	opacity: 0.7;
	margin: 28px 0 0;
}

/* ===== モーション ===== */

/* ヒーロー: 読み込み時にふわっと登場 */
@keyframes robse-fade-up {
	from {
		opacity: 0;
		transform: translateY(22px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* スクロールリビール(JS有効時のみ)。セクション内の要素を時間差で表示 */
.js-reveal .front-section .front-section__title,
.js-reveal .front-section .front-section__more,
.js-reveal .front-section :is(.card-grid, .staff-rows, .news-list, .faq-list, .access-grid, .journal-grid, .recruit-grid, .message-grid) > * {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-reveal .front-section.is-visible .front-section__title,
.js-reveal .front-section.is-visible .front-section__more,
.js-reveal .front-section.is-visible :is(.card-grid, .staff-rows, .news-list, .faq-list, .access-grid, .journal-grid, .recruit-grid, .message-grid) > * {
	opacity: 1;
	transform: translateY(0);
}

/* 子要素の時間差(スタガー) */
.js-reveal .front-section.is-visible :is(.card-grid, .staff-rows, .news-list, .faq-list, .access-grid, .journal-grid, .recruit-grid, .message-grid) > :nth-child(1) { transition-delay: 0.1s; }
.js-reveal .front-section.is-visible :is(.card-grid, .staff-rows, .news-list, .faq-list, .access-grid, .journal-grid, .recruit-grid, .message-grid) > :nth-child(2) { transition-delay: 0.18s; }
.js-reveal .front-section.is-visible :is(.card-grid, .staff-rows, .news-list, .faq-list, .access-grid, .journal-grid, .recruit-grid, .message-grid) > :nth-child(3) { transition-delay: 0.26s; }
.js-reveal .front-section.is-visible :is(.card-grid, .staff-rows, .news-list, .faq-list, .access-grid, .journal-grid, .recruit-grid, .message-grid) > :nth-child(4) { transition-delay: 0.34s; }
.js-reveal .front-section.is-visible :is(.card-grid, .staff-rows, .news-list, .faq-list, .access-grid, .journal-grid, .recruit-grid, .message-grid) > :nth-child(5) { transition-delay: 0.42s; }
.js-reveal .front-section.is-visible :is(.card-grid, .staff-rows, .news-list, .faq-list, .access-grid, .journal-grid, .recruit-grid, .message-grid) > :nth-child(6) { transition-delay: 0.5s; }
.js-reveal .front-section.is-visible :is(.card-grid, .staff-rows, .news-list, .faq-list, .access-grid, .journal-grid, .recruit-grid, .message-grid) > :nth-child(n+7) { transition-delay: 0.58s; }

.js-reveal .front-section.is-visible .front-section__more {
	transition-delay: 0.4s;
}

/* 動きを控えたい設定のユーザーにはアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.front-hero__title,
	.front-hero__text,
	.faq-item[open] .faq-item__answer {
		animation: none;
	}

	.js-reveal .front-section .front-section__title,
	.js-reveal .front-section .front-section__more,
	.js-reveal .front-section :is(.card-grid, .staff-rows, .news-list, .faq-list, .access-grid, .journal-grid, .recruit-grid, .message-grid) > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.card__thumb img,
	.staff-row__photo img,
	.journal-card__thumb img,
	.card a,
	.staff-row__link,
	.recruit-card,
	.post-list__link {
		transition: none;
	}
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.card-grid--staff {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.journal-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/*
	 * ハンバーガーの位置(実機で崩れていたので触るときは注意):
	 *  - 事業所名は白背景で1行表示(white-space:nowrap)なので、そのままだと
	 *    ロゴ+名前が最小幅で居座り、ハンバーガーを画面外へ押し出す。
	 *    実測で below は4px、ロゴ中央は28px はみ出していた。
	 *  - flexアイテムは min-content 未満に縮まないため、min-width:0 が要る。
	 *    これで名前が「…」で省略され、ハンバーガーが右端に収まる。
	 *  - ハンバーガー側は flex:0 0 auto で 44px(タップ領域)を守る。
	 */
	.menu-toggle {
		display: block;
		flex: 0 0 auto;
		margin-right: 0;
	}

	.site-header__contact {
		display: none;
	}

	.site-header__inner {
		padding: 12px 16px;
	}

	.site-branding {
		/*
		 * min-width:0 だけにすること。flex-grow を付けると、
		 * 折り返しありのヘッダー(ロゴの横)で事業所名が余白を全部吸って
		 * 行を埋め切り、ハンバーガーが次の行へ落ちる(実測で確認)。
		 * grow なしなら自然幅→必要な分だけ縮む、で3レイアウトとも1行に収まる。
		 */
		min-width: 0;
	}

	.site-title,
	.site-title--with-logo {
		min-width: 0;
	}

	.global-nav {
		display: none;
		border-top: 1px solid var(--robse-border);
		background: #fff;
	}

	.global-nav.is-open {
		display: block;
	}

	.global-nav__list {
		flex-direction: column;
	}

	.global-nav__list a {
		border-bottom: 1px solid var(--robse-border);
		padding: 14px 20px;
	}

	.global-nav__list a::after {
		display: none;
	}

	.front-hero {
		padding-bottom: 24px;
	}

	/* モバイルは写真を上・文言を下の1カラムに */
	.front-hero--photo .front-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 20px 16px 8px;
	}

	.front-hero__photo {
		order: 1;
	}

	.front-hero--photo .front-hero__copy {
		order: 2;
	}

	.front-hero__photo img {
		height: clamp(220px, 40vh, 320px);
		border-radius: 20px;
	}

	.front-hero--photo .front-hero__title {
		font-size: 1.35rem;
		letter-spacing: 0.08em;
		line-height: 1.9;
	}

	.front-hero:not(.front-hero--photo) {
		padding: 72px 20px 40px;
	}

	.front-hero:not(.front-hero--photo) .front-hero__title {
		font-size: 1.5rem;
		letter-spacing: 0.1em;
	}

	.hero-newsbar {
		flex-wrap: wrap;
		gap: 10px 14px;
	}

	.hero-newsbar__title {
		flex-basis: 100%;
		order: 3;
		white-space: normal;
	}

	.hero-newsbar__arrow {
		margin-left: auto;
	}

	.front-section {
		padding: 60px 16px;
	}

	.card-grid,
	.card-grid--staff,
	.journal-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.message-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.concept-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.front-news__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.access-map iframe,
	.access-grid__map iframe {
		height: clamp(240px, 62vw, 320px);
	}

	.access-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.access-contact {
		flex-direction: column;
		gap: 24px;
	}

	.access-list__row {
		grid-template-columns: 90px minmax(0, 1fr);
		gap: 12px;
	}

	.front-access > .front-section__inner {
		border-radius: 24px 24px 0 0;
		padding: 56px 16px 56px;
	}

	.access-card {
		padding: 20px 16px;
	}

	.staff-row__link,
	.staff-row:nth-child(even) .staff-row__link {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 20px;
	}

	.staff-row:nth-child(even) .staff-row__photo {
		order: 0;
	}

	.staff-row__photo {
		max-width: 260px;
		margin: 0 auto;
		width: 100%;
	}

	.staff-row__body {
		text-align: center;
	}

	.post-list__link {
		flex-direction: column;
		gap: 12px;
	}

	.post-list__thumb {
		width: 100%;
	}

	.footer-widgets {
		grid-template-columns: minmax(0, 1fr);
	}

	.footer-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.footer-grid__heading {
		margin-bottom: 0.8em;
	}

	.recruit-table th {
		width: 6.5em;
		padding: 12px 12px;
	}

	.recruit-table td {
		padding: 12px 12px;
	}

	/* タイムライン: 時刻を上に出す1カラム */
	.flow-timeline::before {
		left: 7px;
	}

	.flow-step {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		padding-left: 32px;
	}

	.flow-step::before {
		left: 0;
	}

	.flow-step__time {
		text-align: left;
	}

	.flow-step__thumb {
		grid-column: 1;
	}

	.flow-switch__tabs {
		flex-direction: column;
		align-items: stretch;
	}

	.vacancy-card {
		padding: 20px 16px;
	}
}

/* =========================================================================
   パズル風の装飾レイヤー (v0.2.0)
   ここから下は、上の基本スタイルを上書きしてにぎやかな見た目をつくる。
   装飾用の画像はすべてインラインSVG(data URI)で、外部ファイルを増やさない。
   ========================================================================= */

:root {
	/* パズルピースを散らしたタイル(淡い4色) */
	--robse-puzzle-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none'%3E%3Cpath d='M18 8h10a6 6 0 0 1 12 0h10v10a6 6 0 0 1 0 12v10H40a6 6 0 0 0-12 0H18V30a6 6 0 0 0 0-12z' fill='%23bfe6f7'/%3E%3Cpath d='M138 48h10a6 6 0 0 1 12 0h10v10a6 6 0 0 1 0 12v10h-10a6 6 0 0 0-12 0h-10V70a6 6 0 0 0 0-12z' fill='%23fbd3e2'/%3E%3Cpath d='M78 118h10a6 6 0 0 1 12 0h10v10a6 6 0 0 1 0 12v10h-10a6 6 0 0 0-12 0H78v-10a6 6 0 0 0 0-12z' fill='%23e2eeb8'/%3E%3Cpath d='M186 158h10a6 6 0 0 1 12 0h10v10a6 6 0 0 1 0 12v10h-10a6 6 0 0 0-12 0h-10v-10a6 6 0 0 0 0-12z' fill='%23ffe9b3'/%3E%3Cpath d='M30 178h10a6 6 0 0 1 12 0h10v10a6 6 0 0 1 0 12v10H52a6 6 0 0 0-12 0H30v-10a6 6 0 0 0 0-12z' fill='%23fbd3e2'/%3E%3C/g%3E%3C/svg%3E");
	/* ガーランド(三角旗) */
	--robse-garland: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='70' viewBox='0 0 560 70'%3E%3Cpath d='M0 6C120 54 200 54 280 30 360 6 440 6 560 40' stroke='%23b9c6cc' stroke-width='2' fill='none'/%3E%3Cg%3E%3Cpath d='M40 20l26 6-19 26z' fill='%23ffcf4d'/%3E%3Cpath d='M92 33l26 5-18 27z' fill='%234ec1f0'/%3E%3Cpath d='M144 42l26 3-16 28z' fill='%23f16ca2'/%3E%3Cpath d='M196 47l26 1-14 29z' fill='%2390be26'/%3E%3Cpath d='M248 46l26-2-11 30z' fill='%23ffcf4d'/%3E%3Cpath d='M300 40l25-5-8 30z' fill='%23f16ca2'/%3E%3Cpath d='M352 31l25-6-6 30z' fill='%234ec1f0'/%3E%3Cpath d='M404 23l25-5-4 30z' fill='%2390be26'/%3E%3Cpath d='M456 19l26-2-4 30z' fill='%23ffcf4d'/%3E%3Cpath d='M508 20l26 2-6 29z' fill='%23f16ca2'/%3E%3C/g%3E%3C/svg%3E");
	/* セクション境界の波形(白) */
	--robse-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='90' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 42c100-30 200-30 300 0s200 30 300 0 200-30 300 0 200 30 300 0v48H0z' fill='%23ffffff'/%3E%3C/svg%3E");
	/* カード(白い箱)の枠・角丸・影。着せ替えで差し替える */
	--robse-card-border: 3px solid color-mix(in srgb, var(--robse-primary), #fff 62%);
	--robse-card-radius: 24px;
	--robse-card-shadow: 0 6px 0 color-mix(in srgb, var(--robse-primary), #fff 84%);
	--robse-card-shadow-hover: 0 3px 0 var(--robse-pale);
	--robse-card-lift: translateY(3px);
	/* ボタンの角丸・枠・影。着せ替えで差し替える */
	--robse-btn-radius: 999px;
	--robse-btn-border: none;
	--robse-btn-shadow: 0 6px 0 color-mix(in srgb, var(--robse-primary), #000 18%);
	--robse-btn-shadow-hover: 0 3px 0 color-mix(in srgb, var(--robse-primary), #000 18%);
	--robse-btn-lift: translateY(3px);
	/* 空(お知らせセクション)とヒーローの光。着せ替えで差し替える */
	--robse-sky-top: #6fcdf3;
	--robse-sky-bottom: #a5e0f7;
	--robse-hero-glow: #fff2c9;
	/* 支援プログラム/求人カードの6色パレット。着せ替えで差し替える */
	--robse-card-1: #8fd7f4;
	--robse-card-1-shadow: #d9f0fb;
	--robse-card-1-bg: #e9f7fd;
	--robse-card-2: #f9a8c6;
	--robse-card-2-shadow: #fde0ec;
	--robse-card-2-bg: #fdeef4;
	--robse-card-3: #c3dd7a;
	--robse-card-3-shadow: #e8f3cd;
	--robse-card-3-bg: #f3f9e6;
	--robse-card-4: #ffd979;
	--robse-card-4-shadow: #fff0cd;
	--robse-card-4-bg: #fff8e6;
	--robse-card-5: #b3c8f2;
	--robse-card-5-shadow: #e0e8fb;
	--robse-card-5-bg: #eef2fd;
	--robse-card-6: #a9e0c8;
	--robse-card-6-shadow: #dcf2e9;
	--robse-card-6-bg: #e9f7f1;
	/* 空に散らす水玉(白・不透明度違い) */
	--robse-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='18' cy='22' r='5' opacity='.55'/%3E%3Ccircle cx='72' cy='14' r='3.5' opacity='.4'/%3E%3Ccircle cx='100' cy='46' r='5.5' opacity='.5'/%3E%3Ccircle cx='44' cy='58' r='3' opacity='.45'/%3E%3Ccircle cx='14' cy='86' r='4.5' opacity='.5'/%3E%3Ccircle cx='66' cy='96' r='5' opacity='.42'/%3E%3Ccircle cx='104' cy='104' r='3' opacity='.38'/%3E%3C/g%3E%3C/svg%3E")
}

/* ---- セクションの背景バリエーション ---- */

/* パズル柄を敷くセクション */
.front-course,
.front-staff,
.front-recruit {
	background-color: #fff;
	background-image: var(--robse-puzzle-tile);
	background-repeat: repeat;
}

.front-course::before,
.front-staff::before,
.front-recruit::before,
.front-flow::before,
.front-news::before,
.front-free::after,
.front-vacancy::before {
	content: none;
}

/* 淡水色のセクション */
.front-flow,
.front-vacancy {
	background: var(--robse-pale);
}

.front-free {
	background: #fff;
}

/* ---- お知らせ: 空+雲+街並み ---- */
.front-news {
	background-color: var(--robse-sky-top);
	background-image: var(--robse-dots), linear-gradient(180deg, var(--robse-sky-top) 0%, var(--robse-sky-bottom) 100%);
	background-repeat: repeat, no-repeat;
	padding-bottom: 150px;
}

/* ふわふわ浮かぶ雲(擬似要素2つ+子要素で計4つ) */
.front-news::before,
.front-news::after {
	content: "";
	position: absolute;
	border-radius: 100px;
	background: #fff;
	opacity: 0.92;
	pointer-events: none;
}

.front-news::before {
	width: 190px;
	height: 62px;
	left: 4%;
	top: 46px;
	box-shadow: 60px -26px 0 -6px #fff, 120px 4px 0 -10px #fff;
}

.front-news::after {
	width: 150px;
	height: 52px;
	right: 6%;
	top: 70px;
	box-shadow: -48px -22px 0 -6px #fff, -96px 6px 0 -10px #fff;
}

/* 下端の街並み */
.front-news .front-section__inner::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -150px;
	width: 100vw;
	height: 90px;
	background: var(--robse-wave) center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

.front-news .front-section__title-en {
	color: #fff;
}

.front-news .front-section__title-jp {
	color: #fff;
}

.front-news__more .text-link-arrow {
	color: #fff;
}

/* お知らせカードは白い角丸パネルにまとめる */
.journal-grid {
	background: #fff;
	border-radius: 28px;
	padding: clamp(20px, 3vw, 36px);
	box-shadow: 0 10px 30px rgba(40, 120, 160, 0.14);
}

/* ---- 見出し: 中央・主色・丸ゴシック太字 ---- */
.front-section__title {
	gap: 4px;
	margin-bottom: 2em;
}

.front-section__title-en {
	order: 2;
	font-family: var(--robse-font-en);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	color: var(--robse-primary);
	opacity: 0.75;
}

.front-section__title-jp {
	order: 1;
	font-family: var(--robse-font-round);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 900;
	letter-spacing: 0.14em;
	color: var(--robse-primary);
}

/* 見出しの上にガーランドを吊るす */
.front-course .front-section__title::before,
.front-flow .front-section__title::before,
.front-vacancy .front-section__title::before,
.front-staff .front-section__title::before,
.front-recruit .front-section__title::before,
.front-faq .front-section__title::before {
	content: "";
	display: block;
	width: min(560px, 84vw);
	height: 70px;
	margin: 0 auto 10px;
	background: var(--robse-garland) center / contain no-repeat;
}

.front-section__title--left {
	align-items: center;
	text-align: center;
}

.front-news__head {
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

/* ---- ボタン: 塗り+白丸の矢印 ---- */
.button-accent,
.front-section__more a,
.button-outline {
	position: relative;
	padding: 1em 3.4em 1em 2.4em;
	border: var(--robse-btn-border);
	border-radius: var(--robse-btn-radius);
	background: var(--robse-primary);
	color: #fff;
	font-family: var(--robse-font-round);
	font-weight: 700;
	letter-spacing: 0.08em;
	box-shadow: var(--robse-btn-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.button-accent::after,
.button-outline::before,
.front-section__more a::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff var(--robse-icon-arrow-primary) center / 14px 14px no-repeat;
}

.button-accent:hover,
.button-outline:hover,
.front-section__more a:hover {
	background: var(--robse-primary);
	color: #fff;
	transform: var(--robse-btn-lift);
	box-shadow: var(--robse-btn-shadow-hover);
}

.button-accent:hover::after,
.front-section__more a:hover::after {
	transform: translateY(-50%);
}

/* アクセントのCTA(お問い合わせ)はピンクに */
.vacancy-card__cta .button-accent,
.recruit-conditions__cta .button-accent {
	background: var(--robse-accent);
	box-shadow: 0 6px 0 color-mix(in srgb, var(--robse-accent), #000 18%);
}

.vacancy-card__cta .button-accent:hover,
.recruit-conditions__cta .button-accent:hover {
	background: var(--robse-accent);
	box-shadow: 0 3px 0 color-mix(in srgb, var(--robse-accent), #000 18%);
}

.vacancy-card__cta .button-accent::after,
.recruit-conditions__cta .button-accent::after {
	background-image: var(--robse-icon-arrow-accent);
}

/* アクセス欄の白抜きボタンはそのまま白丸+主色矢印で成立させる */
.button-outline--white {
	background: #fff;
	color: var(--robse-primary);
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12);
}

.button-outline--white:hover {
	background: #fff;
	color: var(--robse-primary);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

/* ---- ヘッダー: 白地+丸みのある主色ボタン ---- */
.site-header {
	background: #fff;
	border-bottom: 3px solid var(--robse-pale-strong);
}

.header-reserve {
	flex-direction: row;
	gap: 10px;
	align-self: center;
	padding: 12px 26px;
	margin: 8px 20px 8px 0;
	border-radius: 999px;
	background: var(--robse-accent);
	box-shadow: 0 4px 0 color-mix(in srgb, var(--robse-accent), #000 18%);
}

.header-reserve__en {
	display: none;
}

.global-nav__list a {
	font-family: var(--robse-font-round);
	font-weight: 700;
	color: var(--robse-primary);
}

.global-nav__list a::after {
	background: var(--robse-accent);
}

/* ---- カード: 白地+太めの主色ボーダー+大きな角丸 ---- */
.card a,
.recruit-card,
.staff-row__link,
.faq-item,
.vacancy-card,
.access-card,
.journal-card__thumb {
	border: var(--robse-card-border);
	border-radius: var(--robse-card-radius);
	box-shadow: var(--robse-card-shadow);
}

.card a:hover,
.recruit-card:hover,
.staff-row__link:hover {
	transform: var(--robse-card-lift);
	box-shadow: var(--robse-card-shadow-hover);
}

.card__title,
.staff-row__name,
.recruit-card__title,
.flow-step__title,
.journal-card__title {
	font-family: var(--robse-font-round);
	font-weight: 700;
}

/* 小見出しの前にパズルピースのアイコン */
.card__title::before,
.staff-row__name::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: -2px;
	background: var(--robse-icon-puzzle) center / contain no-repeat;
}

/* ---- ヒーロー: 写真+吹き出しのキャッチ ---- */
.front-hero {
	background: #fff;
	padding-bottom: 0;
}

.front-hero::before {
	background:
		radial-gradient(520px 340px at 8% 10%, color-mix(in srgb, var(--robse-primary), #fff 78%) 0%, transparent 66%),
		radial-gradient(420px 300px at 92% 8%, var(--robse-accent-pale) 0%, transparent 68%),
		radial-gradient(380px 300px at 4% 78%, var(--robse-hero-glow) 0%, transparent 66%);
	opacity: 0.85;
}

.front-hero--photo .front-hero__inner {
	align-items: center;
}

.front-hero__photo img {
	border-radius: 30px;
	border: 4px solid #fff;
	box-shadow: 0 10px 30px rgba(60, 140, 180, 0.18);
}

/* キャッチを吹き出しの中に置く */
.front-hero--photo .front-hero__copy {
	position: relative;
	padding: 34px 30px;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 8px 0 var(--robse-pale);
	border: 3px solid var(--robse-pale-strong);
}

/* 吹き出しのしっぽ(右向き) */
.front-hero--photo .front-hero__copy::after {
	content: "";
	position: absolute;
	right: -18px;
	top: 50%;
	transform: translateY(-50%);
	border-style: solid;
	border-width: 14px 0 14px 18px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(3px 0 0 var(--robse-pale-strong));
}

.front-hero--photo .front-hero__title {
	font-weight: 900;
	letter-spacing: 0.08em;
}

/* お知らせバー: 丸みのあるピンクのラベル */
.hero-newsbar__label {
	padding: 4px 16px 4px 8px;
	border-radius: 999px;
	background: var(--robse-accent);
	color: #fff;
}

.hero-newsbar__icon {
	background: #fff;
	color: var(--robse-accent);
}

.hero-newsbar__arrow {
	border-color: var(--robse-primary);
	color: var(--robse-primary);
}

/* ---- 空き状況・タイムライン ---- */
/*
 * 位置の決め方(触るときはこの計算に合わせること):
 *   ⚠ 線とドットで left の基準が違う。ここを間違えると線と丸がずれる。
 *     線  = .flow-timeline の padding box が基準(枠線3pxの内側から数える)
 *     ドット = .flow-step の padding box が基準(= .flow-timeline の content box。
 *              枠線3px + padding 28px の内側から数える) → 線より 31px 右が原点
 *   時刻の列 = 92px、列の間隔 = 56px
 *   → 時刻の右端は content box から 92px、本文の左端は 148px。中間は 120px
 *   ドット(14px): 120 - 7 = left:113px
 *   線(2px)    : 31 + 120 - 1 = left:147px  (ドットと同じ位置に来る)
 *   結果、時刻とドットの輪、ドットの輪と本文が、どちらも 17px ずつ空く
 */
.vacancy-card {
	background: #fff;
}

.flow-switch__tab {
	border: 3px solid var(--robse-primary);
	border-radius: 999px;
	font-family: var(--robse-font-round);
	font-weight: 700;
}

.flow-switch__radio--weekday:checked ~ .flow-switch__tabs .flow-switch__tab--weekday,
.flow-switch__radio--holiday:checked ~ .flow-switch__tabs .flow-switch__tab--holiday {
	background: var(--robse-primary);
	color: #fff;
	box-shadow: 0 4px 0 color-mix(in srgb, var(--robse-primary), #000 18%);
}

.flow-timeline {
	background: #fff;
	border: 3px solid var(--robse-pale-strong);
	border-radius: 24px;
	padding: 32px 28px;
	box-shadow: 0 6px 0 var(--robse-pale);
}

.flow-timeline::before {
	left: 147px;
}

.flow-step::before {
	left: 113px;
	background: var(--robse-accent);
	box-shadow: 0 0 0 4px var(--robse-accent-pale);
}

.flow-step {
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 20px 56px;
}

/* ---- FAQ ---- */
.faq-item__question::before {
	background: var(--robse-accent);
}

.faq-item__answer::before {
	background: var(--robse-pale-strong);
	color: var(--robse-primary);
}

/* ---- アクセス〜フッター: 空色のパネル ---- */
.front-access > .front-section__inner {
	background: linear-gradient(180deg, var(--robse-sky-top) 0%, var(--robse-primary) 100%);
	border-radius: 40px 40px 0 0;
}

.site-footer {
	background: var(--robse-primary);
}

.site-copyright {
	font-family: var(--robse-font-round);
}

/* ---- レスポンシブの微調整 ---- */
@media (max-width: 767px) {
	.front-news {
		padding-bottom: 110px;
	}

	.front-news .front-section__inner::after {
		bottom: -110px;
		height: 60px;
	}

	.front-hero--photo .front-hero__copy::after {
		right: auto;
		left: 50%;
		top: -18px;
		transform: translateX(-50%);
		border-width: 0 14px 18px 14px;
		border-color: transparent transparent #fff transparent;
		filter: drop-shadow(0 -3px 0 var(--robse-pale-strong));
	}

	/*
	 * スマホも同じ理由で基準がずれる。ここは
	 *   .flow-timeline の padding = 16px、.flow-step の padding-left = 32px
	 * なので、線の原点はドットの原点より 16px 左。
	 * ドット中心 = 32 + 7 = 39(content box基準)、線 = 16 + 39 - 1 = left:29px。
	 * (枠線の太さは両方に同じだけ効くので、着せ替えで枠が細くなってもずれない)
	 */
	.flow-timeline::before {
		left: 29px;
	}

	.flow-step::before {
		left: 7px;
	}

	.flow-timeline {
		padding: 24px 16px;
	}

	.flow-step {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- プログラムカード: 6色のパステルで塗り分けて賑やかに ---- */
.front-course .card a {
	display: flex;
	flex-direction: column;
	padding-bottom: 8px;
	background: #fff;
}

.front-course .card:nth-child(6n+1) a { border-color: var(--robse-card-1); box-shadow: 0 6px 0 var(--robse-card-1-shadow); }
.front-course .card:nth-child(6n+2) a { border-color: var(--robse-card-2); box-shadow: 0 6px 0 var(--robse-card-2-shadow); }
.front-course .card:nth-child(6n+3) a { border-color: var(--robse-card-3); box-shadow: 0 6px 0 var(--robse-card-3-shadow); }
.front-course .card:nth-child(6n+4) a { border-color: var(--robse-card-4); box-shadow: 0 6px 0 var(--robse-card-4-shadow); }
.front-course .card:nth-child(6n+5) a { border-color: var(--robse-card-5); box-shadow: 0 6px 0 var(--robse-card-5-shadow); }
.front-course .card:nth-child(6n+6) a { border-color: var(--robse-card-6); box-shadow: 0 6px 0 var(--robse-card-6-shadow); }

/* カードの上端に色帯を敷いて、写真がなくても見出しが締まるように */
.front-course .card__title {
	margin: 0;
	padding: 16px 20px 14px;
	border-radius: 20px 20px 0 0;
	font-size: 1.05rem;
	color: var(--robse-text);
}

.front-course .card:nth-child(6n+1) .card__title { background: var(--robse-card-1-bg); }
.front-course .card:nth-child(6n+2) .card__title { background: var(--robse-card-2-bg); }
.front-course .card:nth-child(6n+3) .card__title { background: var(--robse-card-3-bg); }
.front-course .card:nth-child(6n+4) .card__title { background: var(--robse-card-4-bg); }
.front-course .card:nth-child(6n+5) .card__title { background: var(--robse-card-5-bg); }
.front-course .card:nth-child(6n+6) .card__title { background: var(--robse-card-6-bg); }

/* 写真つきの場合はサムネを上に出す */
.front-course .card__thumb + .card__title {
	border-radius: 0;
}

.front-course .card__excerpt {
	margin: 14px 20px 18px;
	font-size: 0.9rem;
	color: var(--robse-text-light);
}

/* パズルアイコンをカードの色に合わせる */
.front-course .card:nth-child(6n+2) .card__title::before { filter: hue-rotate(-40deg) saturate(1.4); }
.front-course .card:nth-child(6n+3) .card__title::before { filter: hue-rotate(60deg) saturate(1.2); }
.front-course .card:nth-child(6n+4) .card__title::before { filter: hue-rotate(20deg) saturate(1.6); }
.front-course .card:nth-child(6n+5) .card__title::before { filter: hue-rotate(-90deg) saturate(0.9); }
.front-course .card:nth-child(6n+6) .card__title::before { filter: hue-rotate(90deg) saturate(0.9); }

/* ---- 求人カードも色分け ---- */
.front-recruit .recruit-card:nth-child(3n+1) { border-color: var(--robse-card-1); box-shadow: 0 6px 0 var(--robse-card-1-shadow); }
.front-recruit .recruit-card:nth-child(3n+2) { border-color: var(--robse-card-2); box-shadow: 0 6px 0 var(--robse-card-2-shadow); }
.front-recruit .recruit-card:nth-child(3n+3) { border-color: var(--robse-card-3); box-shadow: 0 6px 0 var(--robse-card-3-shadow); }

/* ---- スタッフカード: 見出しに色帯 ---- */
.staff-row__role {
	border-color: var(--robse-accent);
	color: var(--robse-accent);
}

/* =========================================================================
   レイアウトの選択肢 (テーマオプション「デザイン」タブ)
   ここは装飾レイヤーより後に置くこと。装飾レイヤーが
   .front-hero--photo .front-hero__copy などを上書きしているため。
   ========================================================================= */

/* ---- メインビジュアル: 左に大きく写真 ---- */
.front-hero--layout-photo-left .front-hero__inner {
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.95fr);
}

/* 写真側が広いぶんキャッチの幅が狭くなるので、文字も少し小さくして折り返しを防ぐ */
.front-hero--layout-photo-left .front-hero__title {
	font-size: clamp(1.45rem, 2.4vw, 2.05rem);
}

.front-hero--layout-photo-left .front-hero__photo {
	order: 1;
}

.front-hero--layout-photo-left .front-hero__copy {
	order: 2;
}

.front-hero--layout-photo-left .front-hero__photo img {
	height: clamp(360px, 56vh, 540px);
}

/* 吹き出しのしっぽを左向きに(既定は右向きに付いている) */
.front-hero--layout-photo-left .front-hero__copy::after {
	right: auto;
	left: -18px;
	border-width: 14px 18px 14px 0;
	border-color: transparent #fff transparent transparent;
	filter: drop-shadow(-3px 0 0 var(--robse-pale-strong));
}

/* ---- メインビジュアル: 写真を全面 ---- */
.front-hero--layout-full {
	padding-top: 0;
}

.front-hero--layout-full .front-hero__inner {
	position: relative;
	display: flex;
	align-items: center;
	max-width: none;
	margin: 0;
	padding: 0;
	min-height: clamp(420px, 64vh, 620px);
}

.front-hero--layout-full .front-hero__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.front-hero--layout-full .front-hero__photo img {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* 明るい写真でも文字の枠が沈まないように、左から薄い覆いをかける */
.front-hero--layout-full .front-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.12) 46%, transparent 74%);
}

/* 文字は白い半透明の枠に入れる(写真の明暗に関係なく読めるようにするため) */
.front-hero--layout-full .front-hero__copy {
	position: relative;
	z-index: 2;
	width: min(560px, 86vw);
	/* 左端をサイト内容の左端に合わせる */
	margin-left: max(20px, calc((100% - var(--robse-container)) / 2 + 20px));
	padding: clamp(22px, 3vw, 38px);
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--robse-card-radius, 24px);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
}

/* 全面のときは吹き出しのしっぽを出さない */
.front-hero--layout-full .front-hero__copy::after {
	content: none;
}

.front-hero--layout-full .front-hero__newsbar {
	margin-top: 26px;
}

/* ---- メニュー位置: ロゴの横 ---- */
.site-header--nav-inline .site-header__inner {
	flex-wrap: wrap;
}

.site-header--nav-inline .global-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.site-header--nav-inline .global-nav__list {
	justify-content: flex-end;
	max-width: none;
	margin: 0;
}

.site-header--nav-inline .global-nav__list a {
	padding: 10px 14px 12px;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
}

.site-header--nav-inline .global-nav__list a::after {
	left: 14px;
	right: 14px;
	bottom: 6px;
}

/* ---- メニュー位置: ロゴを中央 ---- */
.site-header--nav-center .site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding-left: 0;
}

.site-header--nav-center .site-branding {
	grid-column: 2;
	margin: 0;
	justify-self: center;
	text-align: center;
}

.site-header--nav-center .site-header__contact {
	grid-column: 3;
	justify-self: end;
}

.site-header--nav-center .menu-toggle {
	grid-column: 3;
	justify-self: end;
}

/* ---- タブレット幅(768〜1023px) ----
   7項目のメニューが1行に入りきらず、最後の「見学・お問い合わせ」だけが2段目に落ちていた。
   「ロゴの横」は 860px で電話番号が3段目へ押し出されていた(2026-09-22 実測)。
   この幅だけ、メニューの文字と余白を詰めて1行に収める。
   「ロゴの横」はメニューを2段目(全幅・中央)に回し、1段目にロゴと電話番号を並べる。
   ※ 767px 以下(ハンバーガー)の規則には触らない。 */
@media (min-width: 768px) and (max-width: 1023px) {
	.global-nav__list {
		flex-wrap: nowrap;
	}

	.global-nav__list a {
		padding: 10px 9px 12px;
		font-size: 0.8rem;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.global-nav__list a::after {
		left: 9px;
		right: 9px;
	}

	.site-header--nav-inline .global-nav {
		order: 10;
		flex: 1 0 100%;
	}

	.site-header--nav-inline .global-nav__list {
		justify-content: center;
	}

	.site-header--nav-inline .site-branding {
		margin-right: auto;
	}
}

/* 「ロゴの横」はメニューがヘッダーの内側(左右に余白あり)にあるぶん幅が狭く、
   768px 付近で 9px はみ出した。900px 未満だけ、もう一段詰める。 */
@media (min-width: 768px) and (max-width: 899px) {
	.site-header--nav-inline .global-nav__list a {
		padding-left: 6px;
		padding-right: 6px;
		font-size: 0.78rem;
	}

	.site-header--nav-inline .global-nav__list a::after {
		left: 6px;
		right: 6px;
	}
}

@media (max-width: 767px) {
	/* スマホは組み方によらず「写真が上・文言が下」の1カラムに戻す */
	.front-hero--layout-photo-left .front-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.front-hero--layout-photo-left .front-hero__photo img {
		height: clamp(220px, 40vh, 320px);
	}

	.front-hero--layout-photo-left .front-hero__copy::after {
		left: 50%;
		right: auto;
		top: -18px;
		transform: translateX(-50%);
		border-width: 0 14px 18px 14px;
		border-color: transparent transparent #fff transparent;
		filter: drop-shadow(0 -3px 0 var(--robse-pale-strong));
	}

	/* 全面は写真の上に文字を重ねたまま、縦を詰める */
	.front-hero--layout-full .front-hero__inner {
		min-height: clamp(340px, 62vh, 460px);
		padding: 24px 0;
	}

	.front-hero--layout-full .front-hero__photo {
		position: absolute;
	}

	.front-hero--layout-full .front-hero__photo img {
		height: 100%;
	}

	.front-hero--layout-full .front-hero__copy {
		width: auto;
		margin: 0 16px;
	}

	/*
	 * ロゴの横: 1行に入りきらないのでメニューは折り返してドロップダウンに戻す。
	 * ⚠ DOM順は ロゴ → メニュー → 連絡先 → ハンバーガー。
	 *   メニューを100%幅で折り返すと、その後ろにあるハンバーガーが
	 *   さらに次の行へ落ちて左端に取り残される(実機で確認)。
	 *   並び順を指定して、ハンバーガーをロゴと同じ行の右端に留める。
	 */
	.site-header--nav-inline .site-branding {
		order: 0;
		/*
		 * このレイアウトだけ flex-wrap:wrap(メニューを下段に折り返すため)。
		 * wrap があると、はみ出したアイテムは「縮まずに折り返す」ので、
		 * ロゴ+事業所名が単独行になりハンバーガーが次の行へ落ちていた。
		 * ハンバーガー(44px)と間隔(20px)を残す幅の上限を決めて、1行に押し込む。
		 * margin-right:auto は行の残りを吸ってしまうので、こちらでは使わない
		 * (右寄せはハンバーガー側の margin-left:auto で行う)。
		 */
		margin-right: 0;
		max-width: calc(100% - 64px);
	}

	.site-header--nav-inline .menu-toggle {
		order: 1;
		margin-left: auto;
	}

	.site-header--nav-inline .global-nav {
		order: 2;
		flex: 1 0 100%;
		/*
		 * このレイアウトだけメニューがヘッダーの内側にあるため、
		 * そのままだと左右に16pxの余白が残って他のレイアウトと見え方が揃わない。
		 * ヘッダーの padding を打ち消して、画面いっぱいのドロップダウンにする。
		 */
		margin: 12px -16px -12px;
	}

	.site-header--nav-inline .global-nav__list {
		justify-content: center;
	}

	.site-header--nav-inline .global-nav__list a {
		padding: 14px 20px;
		font-size: 0.9rem;
	}

	/*
	 * ロゴ中央はスマホだと窮屈で、ロゴがハンバーガーに重なっていた(実測で10px)。
	 * 下段メニューはどのみちハンバーガーに隠れるので、
	 * スマホでは他のレイアウトと同じ「左ロゴ・右ハンバーガー」に倒す。
	 * PCでは中央のまま。
	 */
	.site-header--nav-center .site-header__inner {
		display: flex;
		grid-template-columns: none;
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-header--nav-center .site-branding {
		grid-column: auto;
		justify-self: auto;
		text-align: left;
		margin-right: auto;
	}

	.site-header--nav-center .menu-toggle {
		grid-column: auto;
		justify-self: auto;
	}
}

/* =========================================================================
   お問い合わせフォーム
   フォーム本体はプラグイン(Contact Form 7 / Snow Monkey Forms)が作る。
   テーマは見た目だけを引き受ける。
   ここは色・角丸・影をすべてCSS変数で書くこと。そうすれば
   着せ替え(ポップ/ナチュラル/クレヨン)に自動で追従する。
   ========================================================================= */

/* ---- 入力欄(両プラグイン共通) ---- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select,
.smf-text-control__control,
.smf-email-control__control,
.smf-tel-control__control,
.smf-url-control__control,
.smf-textarea-control__control,
.smf-select-control__control {
	width: 100%;
	max-width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--robse-border);
	border-radius: calc(var(--robse-radius) * 0.5);
	background: #fff;
	color: var(--robse-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.7;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 textarea,
.smf-textarea-control__control {
	min-height: 9em;
	resize: vertical;
}

/* select だけは矢印を描く(appearance:none で消えるため) */
.wpcf7 select,
.smf-select-control__control {
	padding-right: 2.6em;
	background-image: linear-gradient(45deg, transparent 50%, var(--robse-primary) 50%), linear-gradient(135deg, var(--robse-primary) 50%, transparent 50%);
	background-position: right 1.2em top 55%, right 0.85em top 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus,
.smf-text-control__control:focus,
.smf-email-control__control:focus,
.smf-tel-control__control:focus,
.smf-url-control__control:focus,
.smf-textarea-control__control:focus,
.smf-select-control__control:focus {
	outline: none;
	border-color: var(--robse-primary);
	box-shadow: 0 0 0 3px var(--robse-primary-thin);
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--robse-text-light);
}

/* ---- ラベル ---- */
.wpcf7 label,
.smf-item__label {
	display: block;
	font-family: var(--robse-font-round);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	color: var(--robse-text);
}

.wpcf7 label input,
.wpcf7 label textarea,
.wpcf7 label select {
	margin-top: 0.5em;
	font-weight: 400;
	font-family: var(--robse-font);
}

.wpcf7 form > p,
.smf-item {
	margin: 0 0 1.6em;
}

/* 「必須」バッジ。ひな形では <span class="rks-required">必須</span> で入れる */
.rks-required,
.smf-item__label__text[data-required="1"]::after {
	display: inline-block;
	margin-left: 0.6em;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	background: var(--robse-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	vertical-align: 0.1em;
}

.smf-item__label__text[data-required="1"]::after {
	content: "必須";
}

/* ひな形の補足文(受給者証の注意など) */
.rks-form-note {
	margin: 0.5em 0 0;
	font-size: 0.85rem;
	line-height: 1.8;
	color: var(--robse-text-light);
}

/* ---- ラジオ・チェックボックス ---- */
.wpcf7 .wpcf7-radio .wpcf7-list-item,
.wpcf7 .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0 0 0.4em;
}

.wpcf7 .wpcf7-list-item-label {
	font-weight: 400;
	font-family: var(--robse-font);
}

.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
	margin-right: 0.5em;
	accent-color: var(--robse-primary);
	width: auto;
}

/* ---- 送信ボタン(テーマの主CTAと同じ見た目に揃える) ---- */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.smf-button-control__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: min(320px, 100%);
	padding: 1em 2.6em;
	border: var(--robse-btn-border);
	border-radius: var(--robse-btn-radius);
	background: var(--robse-primary);
	color: #fff;
	font-family: var(--robse-font-round);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.08em;
	box-shadow: var(--robse-btn-shadow);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
.smf-button-control__control:hover {
	transform: var(--robse-btn-lift);
	box-shadow: var(--robse-btn-shadow-hover);
}

.wpcf7 input[type="submit"]:disabled,
.smf-button-control__control:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wpcf7 .wpcf7-submit + .wpcf7-spinner {
	margin-left: 0.8em;
}

/* 送信ボタンを中央に置く(ひな形は .rks-form-submit で包む) */
.rks-form-submit {
	margin-top: 2em;
	text-align: center;
}

/* ---- エラーと結果表示 ---- */
.wpcf7 .wpcf7-not-valid-tip,
.smf-item__controls .smf-error-messages {
	display: block;
	margin-top: 0.4em;
	color: #c0392b;
	font-size: 0.85rem;
	font-weight: 700;
}

.wpcf7 .wpcf7-not-valid {
	border-color: #c0392b;
}

.wpcf7 form .wpcf7-response-output {
	margin: 1.6em 0 0;
	padding: 1em 1.2em;
	border: 1px solid var(--robse-border);
	border-radius: calc(var(--robse-radius) * 0.5);
	font-size: 0.92rem;
	line-height: 1.8;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--robse-primary);
	background: var(--robse-primary-thin);
	color: var(--robse-text);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #c0392b;
	background: rgba(192, 57, 43, 0.06);
	color: #a03225;
}

/* ---- フォームを白いパネルに収める(固定ページ本文の中でも締まる) ---- */
.rks-form-panel {
	max-width: 780px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 44px);
	background: #fff;
	border: var(--robse-card-border);
	border-radius: var(--robse-card-radius);
	box-shadow: var(--robse-card-shadow);
}

@media (max-width: 767px) {
	.wpcf7 input[type="submit"],
	.wpcf7 button[type="submit"],
	.smf-button-control__control {
		width: 100%;
		min-width: 0;
	}
}

/* ---- SNSボタン(フッター) ---- */
.sns-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

.sns-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: transparent;
	color: #fff;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sns-links__link:hover {
	opacity: 1;
	transform: translateY(-2px);
	background: #fff;
	color: var(--robse-primary);
}

.sns-links__link svg {
	display: block;
}

/* =========================================================================
   スタッフ一覧ページと研修・取り組み
   ========================================================================= */

/* リンクではない紹介カード(個別ページへ飛ばさないので、押せそうな挙動は消す) */
.staff-row__link--static {
	cursor: default;
}

.staff-row__link--static:hover {
	transform: none;
	box-shadow: var(--robse-card-shadow);
}

.staff-rows--full .staff-row__link--static:hover {
	box-shadow: var(--robse-shadow);
}

/* 一覧ページは本文を省略しないので、行間を本文向けに戻す */
.staff-row__bio--full {
	font-size: 0.94rem;
	line-height: 2;
	color: var(--robse-text-light);
}

.staff-row__bio--full p {
	margin: 0 0 1em;
}

.staff-row__bio--full p:last-child {
	margin-bottom: 0;
}

.staff-intro {
	max-width: 820px;
	margin: 0 auto 2.4em;
	font-size: 1rem;
	line-height: 2.1;
	text-align: center;
}

/* ---- 研修・取り組み ---- */
.staff-training {
	margin-top: clamp(48px, 7vw, 88px);
}

.training__intro {
	max-width: 820px;
	margin: 0 auto 2em;
	line-height: 2.1;
	text-align: center;
}

.training-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.training-list__item {
	padding: 26px 24px;
	background: #fff;
	border: var(--robse-card-border);
	border-radius: var(--robse-card-radius);
	box-shadow: var(--robse-card-shadow);
}

.training-list__title {
	margin: 0 0 0.6em;
	font-family: var(--robse-font-round);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--robse-primary);
}

.training-list__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 0.9em;
}

.training-list__tag {
	display: inline-block;
	padding: 0.2em 0.9em;
	border-radius: 999px;
	background: var(--robse-primary-thin);
	color: var(--robse-primary);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.training-list__tag--target {
	background: color-mix(in srgb, var(--robse-accent), #fff 88%);
	color: var(--robse-accent);
}

.training-list__body {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.95;
	color: var(--robse-text-light);
}

@media (max-width: 767px) {
	.staff-intro,
	.training__intro {
		text-align: left;
	}
}