/*
 * Robse Kids - 着せ替え(デザインパターン)。
 *
 * main.css を読み込んだ「後」に読み込む上書き専用ファイル。
 * html[data-robse-skin="スラッグ"] の属性セレクタだけで切り替わるので、
 * 属性値を差し替えるだけで見た目が丸ごと変わる(デモの切替ボタンもこれを使う)。
 *
 * 設計のきまりごと:
 *  1. 配色3色(--robse-primary / --robse-accent / --robse-bg)はここに書かない。
 *     正本はテーマオプションで、inc/dynamic-css.php が :root で配信する。
 *     ここに書くと属性セレクタのほうが強く、利用者が選んだ色を潰してしまう。
 *  2. それ以外の変数(文字色・枠線・角丸・影・書体・装飾)はここで差し替える。
 *  3. 変数で足りない構造の違いだけ、html[data-robse-skin="..."] 接頭辞つきで書く。
 *     (接頭辞に html を含めるのは、main.css の同じ深さのルールより確実に強くするため)
 *  4. 既定の「ポップ」は main.css そのままなので、このファイルに pop の記述はない。
 */

/* =========================================================================
   ナチュラル — 生成り × 若草。木のぬくもり。角丸と影をひかえめに。
   ========================================================================= */

html[data-robse-skin="natural"] {
	--robse-text: #4a4238;
	--robse-text-light: #8d8375;
	--robse-border: #e7ddcb;
	--robse-green: #7a9e5e;
	--robse-yellow: #d8a54a;
	--robse-navy: #5f7f48;
	--robse-sunday: #c4703f;
	--robse-radius: 12px;
	--robse-shadow: 0 2px 14px rgba(120, 100, 70, 0.10);
	--robse-shadow-hover: 0 10px 26px rgba(120, 100, 70, 0.16);
	--robse-font-round: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif;

	/* カード: 細い枠・小さめの角丸・やわらかい影(ハードシャドウをやめる) */
	--robse-card-border: 1px solid var(--robse-border);
	--robse-card-radius: 12px;
	--robse-card-shadow: 0 2px 12px rgba(120, 100, 70, 0.09);
	--robse-card-shadow-hover: 0 10px 24px rgba(120, 100, 70, 0.15);
	--robse-card-lift: translateY(-4px);

	/* ボタン: 角丸をおさえた長方形。押し込み影ではなく落ち影 */
	--robse-btn-radius: 8px;
	--robse-btn-border: none;
	--robse-btn-shadow: 0 3px 10px color-mix(in srgb, var(--robse-primary), transparent 68%);
	--robse-btn-shadow-hover: 0 6px 16px color-mix(in srgb, var(--robse-primary), transparent 58%);
	--robse-btn-lift: translateY(-2px);

	/* 背景の柄・空・光 */
	--robse-sky-top: #efe6d3;
	--robse-sky-bottom: #f8f2e6;
	--robse-hero-glow: #f2e8d2;
	--robse-puzzle-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23e9e0ce'%3E%3Ccircle cx='20' cy='24' r='3'/%3E%3Ccircle cx='96' cy='16' r='2.4'/%3E%3Ccircle cx='132' cy='58' r='3'/%3E%3Ccircle cx='54' cy='72' r='2.4'/%3E%3Ccircle cx='16' cy='108' r='3'/%3E%3Ccircle cx='88' cy='120' r='2.6'/%3E%3Ccircle cx='140' cy='136' r='2.4'/%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 60h1200v30H0z' fill='%23faf6ee'/%3E%3C/svg%3E");

	/* 見出しの上の飾り: ガーランドではなく葉のライン(mask なので主色に追従する) */
	--robse-deco-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='28' viewBox='0 0 200 28'%3E%3Cpath d='M6 14h188' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cg fill='%23000'%3E%3Cpath d='M42 14c0-6 5-10 12-10 0 6-5 10-12 10z'/%3E%3Cpath d='M70 14c0 6 5 10 12 10 0-6-5-10-12-10z'/%3E%3Cpath d='M100 14c0-6 5-10 12-10 0 6-5 10-12 10z'/%3E%3Cpath d='M128 14c0 6 5 10 12 10 0-6-5-10-12-10z'/%3E%3C/g%3E%3C/svg%3E");
	--robse-deco-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M3 17C3 8.7 9.3 3 17.5 3 17.5 11.3 11.2 17 3 17z' fill='%23000'/%3E%3C/svg%3E");

	/* カード6色: アースカラー */
	--robse-card-1: #a3bd82;
	--robse-card-1-shadow: #e6eed9;
	--robse-card-1-bg: #f2f6ea;
	--robse-card-2: #ddb07a;
	--robse-card-2-shadow: #f6e8d6;
	--robse-card-2-bg: #faf1e6;
	--robse-card-3: #cfa39a;
	--robse-card-3-shadow: #f2e2df;
	--robse-card-3-bg: #f8eeec;
	--robse-card-4: #b0c5bb;
	--robse-card-4-shadow: #e3ece8;
	--robse-card-4-bg: #f0f5f3;
	--robse-card-5: #d5c68b;
	--robse-card-5-shadow: #f1ebd6;
	--robse-card-5-bg: #f8f4e6;
	--robse-card-6: #a6bac6;
	--robse-card-6-shadow: #e2eaef;
	--robse-card-6-bg: #f0f5f8;
}

/* 見出し: 大きすぎない太さ・広い字間で落ち着かせる */
html[data-robse-skin="natural"] .front-section__title-jp {
	font-size: clamp(1.35rem, 2.6vw, 1.8rem);
	font-weight: 700;
	letter-spacing: 0.18em;
}

html[data-robse-skin="natural"] .front-section__title-en {
	letter-spacing: 0.3em;
	opacity: 0.6;
}

/* ガーランド → 葉のライン */
html[data-robse-skin="natural"] .front-course .front-section__title::before,
html[data-robse-skin="natural"] .front-flow .front-section__title::before,
html[data-robse-skin="natural"] .front-vacancy .front-section__title::before,
html[data-robse-skin="natural"] .front-staff .front-section__title::before,
html[data-robse-skin="natural"] .front-recruit .front-section__title::before,
html[data-robse-skin="natural"] .front-faq .front-section__title::before {
	width: 140px;
	height: 20px;
	margin-bottom: 14px;
	background: var(--robse-primary);
	opacity: 0.55;
	-webkit-mask: var(--robse-deco-line) center / contain no-repeat;
	mask: var(--robse-deco-line) center / contain no-repeat;
}

/* 小見出し頭のパズルピース → 葉 */
html[data-robse-skin="natural"] .card__title::before,
html[data-robse-skin="natural"] .staff-row__name::before {
	width: 14px;
	height: 14px;
	background: var(--robse-primary);
	-webkit-mask: var(--robse-deco-mark) center / contain no-repeat;
	mask: var(--robse-deco-mark) center / contain no-repeat;
}

/* プログラムカードの色分けは色相フィルタではなく地の色に合わせる */
html[data-robse-skin="natural"] .front-course .card:nth-child(n) .card__title::before {
	filter: none;
	background: var(--robse-text-light);
}

/* お知らせ: 空と雲をやめ、生成りの帯にする */
html[data-robse-skin="natural"] .front-news::before,
html[data-robse-skin="natural"] .front-news::after {
	content: none;
}

html[data-robse-skin="natural"] .front-news {
	padding-bottom: 96px;
}

html[data-robse-skin="natural"] .front-news .front-section__inner::after {
	content: none;
}

html[data-robse-skin="natural"] .front-news .front-section__title-en,
html[data-robse-skin="natural"] .front-news .front-section__title-jp,
html[data-robse-skin="natural"] .front-news__more .text-link-arrow {
	color: var(--robse-primary);
}

html[data-robse-skin="natural"] .journal-grid {
	border: 1px solid var(--robse-border);
	box-shadow: none;
	border-radius: 14px;
}

/* ヒーロー: 吹き出しのしっぽと押し込み影をやめ、静かな白パネルに */
html[data-robse-skin="natural"] .front-hero--photo .front-hero__copy {
	border: 1px solid var(--robse-border);
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(120, 100, 70, 0.10);
}

html[data-robse-skin="natural"] .front-hero--photo .front-hero__copy::after {
	content: none;
}

html[data-robse-skin="natural"] .front-hero__photo img {
	border-radius: 14px;
	border: none;
	box-shadow: 0 10px 30px rgba(120, 100, 70, 0.16);
}

html[data-robse-skin="natural"] .front-hero--photo .front-hero__title {
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* 1日の流れ・空き状況 */
html[data-robse-skin="natural"] .flow-timeline {
	border: 1px solid var(--robse-border);
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(120, 100, 70, 0.09);
}

html[data-robse-skin="natural"] .flow-switch__tab {
	border-width: 1px;
	border-radius: 8px;
}

html[data-robse-skin="natural"] .flow-switch__radio--weekday:checked ~ .flow-switch__tabs .flow-switch__tab--weekday,
html[data-robse-skin="natural"] .flow-switch__radio--holiday:checked ~ .flow-switch__tabs .flow-switch__tab--holiday {
	box-shadow: none;
}

/* アクセス〜フッター: 角丸をおさえた1色パネル */
html[data-robse-skin="natural"] .front-access > .front-section__inner {
	background: var(--robse-primary);
	border-radius: 16px 16px 0 0;
}

/* =========================================================================
   クレヨン — オレンジ × ターコイズ。太い輪郭とずらした影の手描き風。
   ========================================================================= */

html[data-robse-skin="crayon"] {
	--robse-text: #3b3128;
	--robse-text-light: #7d6f60;
	--robse-border: #e8dcc8;
	--robse-green: #7cc45c;
	--robse-yellow: #ffc93c;
	--robse-navy: #2f8f88;
	--robse-sunday: #e35d6a;
	--robse-radius: 22px;
	--robse-shadow: 4px 4px 0 rgba(59, 49, 40, 0.14);
	--robse-shadow-hover: 7px 7px 0 rgba(59, 49, 40, 0.2);

	/* カード: 太い輪郭 + ずらしたハードシャドウ */
	--robse-card-border: 3px solid var(--robse-text);
	--robse-card-radius: 22px;
	--robse-card-shadow: 6px 6px 0 var(--robse-text);
	--robse-card-shadow-hover: 2px 2px 0 var(--robse-text);
	--robse-card-lift: translate(4px, 4px);

	/* ボタンも同じ手描き風 */
	--robse-btn-radius: 999px;
	--robse-btn-border: 3px solid var(--robse-text);
	--robse-btn-shadow: 5px 5px 0 var(--robse-text);
	--robse-btn-shadow-hover: 2px 2px 0 var(--robse-text);
	--robse-btn-lift: translate(3px, 3px);

	/* 背景の柄・空・光 */
	--robse-sky-top: #35bfb4;
	--robse-sky-bottom: #86ded7;
	--robse-hero-glow: #ffe6a8;
	--robse-puzzle-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg%3E%3Cpath d='M28 10l4.2 8.8 9.6 1.3-7 6.6 1.8 9.5-8.6-4.7-8.6 4.7 1.8-9.5-7-6.6 9.6-1.3z' fill='%23ffe0b0'/%3E%3Ccircle cx='120' cy='34' r='7' fill='%23bfe9e5'/%3E%3Cpath d='M178 74l4.2 8.8 9.6 1.3-7 6.6 1.8 9.5-8.6-4.7-8.6 4.7 1.8-9.5-7-6.6 9.6-1.3z' fill='%23ffd3d7'/%3E%3Ccircle cx='62' cy='96' r='6' fill='%23d7edc4'/%3E%3Cpath d='M26 150l4.2 8.8 9.6 1.3-7 6.6 1.8 9.5-8.6-4.7-8.6 4.7 1.8-9.5-7-6.6 9.6-1.3z' fill='%23bfe9e5'/%3E%3Ccircle cx='150' cy='168' r='7' fill='%23ffe0b0'/%3E%3Ccircle cx='196' cy='198' r='5' fill='%23ffd3d7'/%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='%23fffdf4'/%3E%3C/svg%3E");

	/* 見出しの飾り: クレヨンで引いた線 / 星 */
	--robse-deco-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24'%3E%3Cpath d='M8 16c14-10 28 6 42-2s28-10 42-2 28 10 42 2 28-10 42-2 28 8 40 2' stroke='%23000' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	--robse-deco-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.6 5.6 6.1.8-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L1.3 7.4l6.1-.8z' fill='%23000'/%3E%3C/svg%3E");

	/* カード6色: ビタミンカラー(影は輪郭色なので、shadow変数は使わず下で上書きする) */
	--robse-card-1: #f28c28;
	--robse-card-1-bg: #ffeed8;
	--robse-card-2: #2fb3a8;
	--robse-card-2-bg: #d9f2ef;
	--robse-card-3: #f6c945;
	--robse-card-3-bg: #fff3d1;
	--robse-card-4: #e3697a;
	--robse-card-4-bg: #ffe0e4;
	--robse-card-5: #7cc45c;
	--robse-card-5-bg: #e6f5dd;
	--robse-card-6: #7a86d8;
	--robse-card-6-bg: #e5e8fa;
	--robse-card-1-shadow: var(--robse-text);
	--robse-card-2-shadow: var(--robse-text);
	--robse-card-3-shadow: var(--robse-text);
	--robse-card-4-shadow: var(--robse-text);
	--robse-card-5-shadow: var(--robse-text);
	--robse-card-6-shadow: var(--robse-text);
}

/* 見出し: 大きく・マーカーを引く */
html[data-robse-skin="crayon"] .front-section__title-jp {
	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
	font-weight: 900;
	letter-spacing: 0.08em;
	color: var(--robse-text);
	padding: 0 0.35em 0.05em;
	background: linear-gradient(transparent 64%, color-mix(in srgb, var(--robse-accent), #fff 58%) 64%);
}

html[data-robse-skin="crayon"] .front-section__title-en {
	color: var(--robse-primary);
	opacity: 1;
	font-weight: 500;
}

/* マーカーの分だけ英字ラベルが重なるので行間を空ける */
html[data-robse-skin="crayon"] .front-section__title {
	gap: 10px;
}

/* お知らせはターコイズの空の上。白抜き見出し + 影のマーカーにする */
html[data-robse-skin="crayon"] .front-news .front-section__title-jp {
	color: #fff;
	background: linear-gradient(transparent 64%, rgba(0, 0, 0, 0.16) 64%);
}

html[data-robse-skin="crayon"] .front-news .front-section__title-en {
	color: #fff;
}

/* ガーランド → クレヨンの線 */
html[data-robse-skin="crayon"] .front-course .front-section__title::before,
html[data-robse-skin="crayon"] .front-flow .front-section__title::before,
html[data-robse-skin="crayon"] .front-vacancy .front-section__title::before,
html[data-robse-skin="crayon"] .front-staff .front-section__title::before,
html[data-robse-skin="crayon"] .front-recruit .front-section__title::before,
html[data-robse-skin="crayon"] .front-faq .front-section__title::before {
	width: min(240px, 62vw);
	height: 22px;
	margin-bottom: 8px;
	background: var(--robse-primary);
	-webkit-mask: var(--robse-deco-line) center / contain no-repeat;
	mask: var(--robse-deco-line) center / contain no-repeat;
}

/* 小見出し頭のパズルピース → 星 */
html[data-robse-skin="crayon"] .card__title::before,
html[data-robse-skin="crayon"] .staff-row__name::before {
	width: 16px;
	height: 16px;
	background: var(--robse-accent);
	-webkit-mask: var(--robse-deco-mark) center / contain no-repeat;
	mask: var(--robse-deco-mark) center / contain no-repeat;
}

html[data-robse-skin="crayon"] .front-course .card:nth-child(n) .card__title::before {
	filter: none;
	background: var(--robse-text);
}

/* カードの輪郭は6色、影は輪郭色で統一(ずらした太い影) */
html[data-robse-skin="crayon"] .front-course .card a,
html[data-robse-skin="crayon"] .front-recruit .recruit-card {
	border-width: 3px;
	border-style: solid;
}

html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+1) a,
html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+2) a,
html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+3) a,
html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+4) a,
html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+5) a,
html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+6) a,
html[data-robse-skin="crayon"] .front-recruit .recruit-card:nth-child(3n+1),
html[data-robse-skin="crayon"] .front-recruit .recruit-card:nth-child(3n+2),
html[data-robse-skin="crayon"] .front-recruit .recruit-card:nth-child(3n+3) {
	box-shadow: 6px 6px 0 var(--robse-text);
}

html[data-robse-skin="crayon"] .front-course .card a:hover,
html[data-robse-skin="crayon"] .front-recruit .recruit-card:hover {
	transform: translate(4px, 4px);
	box-shadow: 2px 2px 0 var(--robse-text);
}

/* お知らせ: ターコイズの空。雲はそのまま */
html[data-robse-skin="crayon"] .journal-grid {
	border: 3px solid var(--robse-text);
	border-radius: 22px;
	box-shadow: 6px 6px 0 var(--robse-text);
}

/* ヒーロー: 吹き出しも太い輪郭に */
html[data-robse-skin="crayon"] .front-hero--photo .front-hero__copy {
	border: 3px solid var(--robse-text);
	border-radius: 22px;
	box-shadow: 6px 6px 0 var(--robse-text);
}

html[data-robse-skin="crayon"] .front-hero--photo .front-hero__copy::after {
	filter: drop-shadow(3px 0 0 var(--robse-text));
}

html[data-robse-skin="crayon"] .front-hero__photo img {
	border: 3px solid var(--robse-text);
	border-radius: 22px;
	box-shadow: 8px 8px 0 var(--robse-text);
}

html[data-robse-skin="crayon"] .front-hero--photo .front-hero__title {
	font-weight: 900;
	letter-spacing: 0.04em;
}

/* 1日の流れ */
html[data-robse-skin="crayon"] .flow-timeline {
	border: 3px solid var(--robse-text);
	border-radius: 22px;
	box-shadow: 6px 6px 0 var(--robse-text);
}

html[data-robse-skin="crayon"] .flow-switch__tab {
	border-color: var(--robse-text);
}

html[data-robse-skin="crayon"] .flow-switch__radio--weekday:checked ~ .flow-switch__tabs .flow-switch__tab--weekday,
html[data-robse-skin="crayon"] .flow-switch__radio--holiday:checked ~ .flow-switch__tabs .flow-switch__tab--holiday {
	box-shadow: 4px 4px 0 var(--robse-text);
}

/* パネルの上に乗る見出し(アクセス)も白抜き + 影のマーカー */
html[data-robse-skin="crayon"] .front-section__title--onpanel .front-section__title-jp {
	color: #fff;
	background: linear-gradient(transparent 64%, rgba(0, 0, 0, 0.16) 64%);
}

html[data-robse-skin="crayon"] .front-section__title--onpanel .front-section__title-en {
	color: #fff;
}

/* アクセス〜フッター: 空の色を混ぜると濁るので主色だけのグラデーションにする */
html[data-robse-skin="crayon"] .front-access > .front-section__inner {
	background: linear-gradient(180deg, color-mix(in srgb, var(--robse-primary), #fff 16%) 0%, var(--robse-primary) 100%);
	border-radius: 32px 32px 0 0;
}

@media (max-width: 767px) {
	/* ずらした影はスマホだと窮屈なので少し詰める */
	html[data-robse-skin="crayon"] {
		--robse-card-shadow: 4px 4px 0 var(--robse-text);
		--robse-btn-shadow: 3px 3px 0 var(--robse-text);
	}

	html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+1) a,
	html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+2) a,
	html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+3) a,
	html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+4) a,
	html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+5) a,
	html[data-robse-skin="crayon"] .front-course .card:nth-child(6n+6) a,
	html[data-robse-skin="crayon"] .front-recruit .recruit-card:nth-child(3n+1),
	html[data-robse-skin="crayon"] .front-recruit .recruit-card:nth-child(3n+2),
	html[data-robse-skin="crayon"] .front-recruit .recruit-card:nth-child(3n+3),
	html[data-robse-skin="crayon"] .journal-grid,
	html[data-robse-skin="crayon"] .flow-timeline,
	html[data-robse-skin="crayon"] .front-hero--photo .front-hero__copy {
		box-shadow: 4px 4px 0 var(--robse-text);
	}
}

/* =========================================================================
   着せ替え × レイアウトの噛み合わせ
   (main.css のレイアウト指定より属性セレクタのほうが強いので、ここで足す)
   ========================================================================= */

/* クレヨン: 吹き出しのしっぽの影を、写真の位置に合わせて向き変えする */
html[data-robse-skin="crayon"] .front-hero--layout-photo-left .front-hero__copy::after {
	filter: drop-shadow(-3px 0 0 var(--robse-text));
}

@media (max-width: 767px) {
	/* スマホはしっぽが上向きになるので影も上向きに */
	html[data-robse-skin="crayon"] .front-hero--photo .front-hero__copy::after {
		filter: drop-shadow(0 -3px 0 var(--robse-text));
	}
}

/* 写真を全面: 枠は白い半透明のままにしたいので、影だけ写真に合うものへ */
html[data-robse-skin="crayon"] .front-hero--layout-full .front-hero__copy {
	box-shadow: 6px 6px 0 var(--robse-text);
}

html[data-robse-skin="natural"] .front-hero--layout-full .front-hero__copy {
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
}

/* ナチュラルは覆いを薄めにして、生成りの落ち着きを残す */
html[data-robse-skin="natural"] .front-hero--layout-full .front-hero__photo::after {
	background: linear-gradient(100deg, rgba(74, 66, 56, 0.30) 0%, rgba(74, 66, 56, 0.10) 46%, transparent 74%);
}