/*
Theme Name: Cocomiru Theme
Author: Societa Inc.
Description: 医療系人材マッチングサイト「ココミル」向けの軽量オリジナルテーマ。自作プラグイン「Cocomiru Matching」のデザイントーン(ティール緑基調・角丸カード)に合わせたヘッダー・フッター・トップページを提供します。
Version: 0.4.8
Text Domain: cocomiru-theme
*/

/* ---------- 変数定義(プラグイン ccm-style.css と同一トーン) ---------- */
:root {
	--ccm-primary: #3ec9b0;
	--ccm-primary-dark: #2a9d8a;
	--ccm-primary-light: #e6f7f4;
	--ccm-accent-green: #4caf50;

	--ccm-text: #2f3a3a;
	--ccm-text-light: #74807e;
	--ccm-bg: #ffffff;
	--ccm-bg-soft: #f4f7f6;
	--ccm-border: #e3e9e8;

	--ccm-radius-lg: 16px;
	--ccm-radius-md: 10px;
	--ccm-radius-sm: 6px;
	--ccm-radius-pill: 999px;

	--ccm-shadow: 0 2px 14px rgba(30, 40, 40, 0.07);
	--ccm-shadow-hover: 0 8px 22px rgba(30, 40, 40, 0.12);

	--ccm-tag-medical-bg: #ffe3ea;
	--ccm-tag-medical-text: #d6336c;
	--ccm-tag-dental-bg: #e0f0ff;
	--ccm-tag-dental-text: #1c7ed6;
	--ccm-tag-pharmacy-bg: #e2f8e6;
	--ccm-tag-pharmacy-text: #2b8a3e;

	--ccm-footer-bg: #20282a;
	--ccm-footer-text: #c7d1d0;
}

/* ---------- ベース ---------- */
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: var(--ccm-bg);
	color: var(--ccm-text);
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
img {
	max-width: 100%;
	height: auto;
}
a {
	color: var(--ccm-primary-dark);
}

.cct-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- 共通ボタン(プラグインと同トーン) ---------- */
.cct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 30px;
	border-radius: var(--ccm-radius-pill);
	border: none;
	font-size: 0.98em;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.4;
	transition: filter 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cct-btn-primary {
	background: linear-gradient(135deg, var(--ccm-primary), var(--ccm-accent-green));
	color: #fff;
	box-shadow: 0 4px 14px rgba(62, 201, 176, 0.32);
}
.cct-btn-primary:hover {
	filter: brightness(1.06);
	color: #fff;
}
.cct-btn-outline {
	background: #fff;
	color: var(--ccm-primary-dark);
	border: 2px solid var(--ccm-primary);
}
.cct-btn-outline:hover {
	background: var(--ccm-primary-light);
}
.cct-btn-small {
	padding: 9px 20px;
	font-size: 0.88em;
}

/* ---------- ヘッダー ---------- */
.cct-header {
	background: #fff;
	border-bottom: 1px solid var(--ccm-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
/* ログイン中はWP管理者バー(モバイル幅では高さ46px)が画面上部に固定表示されるため、
   スティッキーヘッダーの位置と初期表示位置がバーと重なってしまう(文字・ロゴが隠れる)不具合への対処。
   WP標準のadmin-barブレークポイント(782px)に合わせてheader.phpの吸着位置とbodyの上余白を補正する。 */
body.admin-bar {
	margin-top: 32px !important;
}
body.admin-bar .cct-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar {
		margin-top: 46px !important;
	}
	body.admin-bar .cct-header {
		top: 46px;
	}
}
.cct-header-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.cct-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}
.cct-logo img {
	height: 40px;
	width: auto;
	display: block;
}
.cct-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px 18px;
	flex-wrap: wrap;
}
.cct-nav a {
	text-decoration: none;
	color: var(--ccm-text);
	font-size: 0.9em;
	font-weight: 700;
	padding: 8px 4px;
	transition: color 0.15s ease;
}
.cct-nav a:hover {
	color: var(--ccm-primary-dark);
}
.cct-nav .cct-nav-clinic {
	color: var(--ccm-text-light);
	font-size: 0.85em;
}
.cct-nav .cct-btn {
	padding: 10px 22px;
	font-size: 0.88em;
}
.cct-nav .cct-nav-logout {
	color: var(--ccm-text-light);
	font-size: 0.85em;
}

/* ---------- メインラッパー ---------- */
.cct-main {
	min-height: 55vh;
}

/* ---------- ヒーロー(写真背景) ---------- */
.cct-hero {
	position: relative;
	background-size: cover;
	background-position: center right;
	padding: 96px 24px 88px;
	text-align: left;
}
.cct-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 45%, rgba(255, 255, 255, 0) 75%);
}
.cct-hero-inner {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}
/* モバイルでのみ表示する独立した写真バナー(768px以下)。デスクトップでは背景写真をそのまま使うため非表示。 */
.cct-hero-photo-mobile {
	display: none;
}
.cct-hero-lead {
	display: inline-block;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ccm-primary-dark);
	font-weight: 700;
	font-size: 0.9em;
	padding: 7px 20px;
	border-radius: var(--ccm-radius-pill);
	border: 1px solid var(--ccm-primary);
	margin: 0 0 22px;
}
.cct-hero-title {
	font-size: 2.9em;
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 14px;
	color: #fff;
	text-shadow: 0 2px 14px rgba(40, 60, 55, 0.45), 0 0 2px rgba(40, 60, 55, 0.5);
}
.cct-hero-sub {
	font-size: 1.3em;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 2px 12px rgba(40, 60, 55, 0.45), 0 0 2px rgba(40, 60, 55, 0.5);
	margin: 0 0 26px;
}
.cct-hero-wages {
	display: flex;
	justify-content: flex-start;
	gap: 10px 14px;
	flex-wrap: wrap;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
	max-width: 620px;
}
.cct-hero-wages li {
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--ccm-border);
	border-radius: var(--ccm-radius-pill);
	box-shadow: var(--ccm-shadow);
	padding: 10px 22px;
	font-size: 0.92em;
	font-weight: 700;
}
.cct-hero-wages .cct-wage {
	color: var(--ccm-primary-dark);
}
.cct-hero-cta {
	display: flex;
	justify-content: flex-start;
	gap: 14px;
	flex-wrap: wrap;
}
.cct-btn-outline-white {
	background: rgba(255, 255, 255, 0.92);
	color: var(--ccm-primary-dark);
	border: 2px solid var(--ccm-primary);
}
.cct-btn-outline-white:hover {
	background: #fff;
}

/* ---------- セクション共通 ---------- */
.cct-section {
	padding: 64px 0;
}
.cct-section-alt {
	background: var(--ccm-bg-soft);
}
.cct-section-title {
	text-align: center;
	font-size: 1.7em;
	font-weight: 800;
	margin: 0 0 10px;
}
.cct-section-lead {
	text-align: center;
	color: var(--ccm-text-light);
	font-size: 0.95em;
	margin: 0 0 36px;
}

/* ---------- 職種別特集カード ---------- */
.cct-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cct-feature-card {
	position: relative;
	border-radius: var(--ccm-radius-lg);
	box-shadow: var(--ccm-shadow);
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cct-feature-body {
	flex: 1 1 58%;
	padding: 34px 8px 26px 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}
.cct-feature-photo {
	flex: 1 1 42%;
	position: relative;
	min-height: 200px;
}
.cct-feature-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.cct-feature-card:hover {
	box-shadow: var(--ccm-shadow-hover);
	transform: translateY(-2px);
}
.cct-feature-medical {
	background: var(--ccm-tag-medical-bg);
}
.cct-feature-dental {
	background: var(--ccm-tag-dental-bg);
}
.cct-feature-pharmacy {
	background: var(--ccm-tag-pharmacy-bg);
}
/* カードの外に飛び出して見切れていたため、カード内に収まる通常配置に変更 */
.cct-feature-badge {
	display: inline-block;
	align-self: flex-start;
	background: var(--ccm-text);
	color: #fff;
	font-size: 0.74em;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: var(--ccm-radius-pill);
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.cct-feature-title {
	font-size: 1.25em;
	font-weight: 800;
	margin: 0;
}
.cct-feature-medical .cct-feature-title {
	color: var(--ccm-tag-medical-text);
}
.cct-feature-dental .cct-feature-title {
	color: var(--ccm-tag-dental-text);
}
.cct-feature-pharmacy .cct-feature-title {
	color: var(--ccm-tag-pharmacy-text);
}
.cct-feature-wage {
	font-size: 1.05em;
	font-weight: 700;
	margin: 0;
	color: var(--ccm-text);
}
.cct-feature-note {
	font-size: 0.85em;
	color: var(--ccm-text-light);
	margin: 0 0 10px;
}
.cct-feature-card .cct-btn {
	margin-top: auto;
	background: #fff;
	color: var(--ccm-text);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: none;
}
.cct-feature-card .cct-btn:hover {
	filter: brightness(0.97);
}

/* ---------- 新着案件 ---------- */
.cct-shift-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.cct-shift-card {
	background: #fff;
	border: 1px solid var(--ccm-border);
	border-radius: var(--ccm-radius-lg);
	box-shadow: var(--ccm-shadow);
	padding: 22px 24px;
	display: block;
	text-decoration: none;
	color: var(--ccm-text);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cct-shift-card:hover {
	box-shadow: var(--ccm-shadow-hover);
	transform: translateY(-2px);
}
.cct-shift-card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.cct-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--ccm-radius-pill);
	font-size: 0.76em;
	font-weight: 700;
	white-space: nowrap;
}
.cct-tag-medical {
	background: var(--ccm-tag-medical-bg);
	color: var(--ccm-tag-medical-text);
}
.cct-tag-dental {
	background: var(--ccm-tag-dental-bg);
	color: var(--ccm-tag-dental-text);
}
.cct-tag-pharmacy {
	background: var(--ccm-tag-pharmacy-bg);
	color: var(--ccm-tag-pharmacy-text);
}
.cct-tag-default {
	background: var(--ccm-bg-soft);
	color: var(--ccm-text-light);
}
.cct-shift-card-title {
	font-size: 1.02em;
	font-weight: 800;
	margin: 0 0 10px;
	line-height: 1.5;
}
.cct-shift-card-meta {
	display: flex;
	gap: 6px 16px;
	flex-wrap: wrap;
	font-size: 0.86em;
	color: var(--ccm-text-light);
	margin: 0;
}
.cct-shift-card-meta .cct-shift-wage {
	color: var(--ccm-primary-dark);
	font-weight: 800;
	font-size: 1.05em;
}
.cct-shift-empty {
	text-align: center;
	color: var(--ccm-text-light);
	background: #fff;
	border: 1px dashed var(--ccm-border);
	border-radius: var(--ccm-radius-lg);
	padding: 40px 24px;
}
.cct-shift-more {
	text-align: center;
	margin-top: 32px;
}

/* ---------- ご利用の流れ ---------- */
.cct-flow-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.cct-flow-card {
	background: #fff;
	border: 1px solid var(--ccm-border);
	border-radius: var(--ccm-radius-lg);
	box-shadow: var(--ccm-shadow);
	padding: 28px 22px;
	text-align: center;
}
.cct-flow-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ccm-primary), var(--ccm-accent-green));
	color: #fff;
	font-weight: 800;
	font-size: 1.1em;
	margin-bottom: 12px;
}
.cct-flow-title {
	font-size: 1.02em;
	font-weight: 800;
	margin: 0 0 8px;
}
.cct-flow-text {
	font-size: 0.86em;
	color: var(--ccm-text-light);
	margin: 0;
}

/* ---------- 最下部CTA ---------- */
.cct-bottom-cta {
	background: linear-gradient(135deg, var(--ccm-primary), var(--ccm-accent-green));
	border-radius: var(--ccm-radius-lg);
	padding: 44px 30px;
	text-align: center;
	color: #fff;
}
.cct-bottom-cta h2 {
	margin: 0 0 8px;
	font-size: 1.5em;
	font-weight: 800;
	color: #fff;
}
.cct-bottom-cta p {
	margin: 0 0 22px;
	font-size: 0.95em;
	opacity: 0.94;
}
.cct-bottom-cta .cct-btn {
	background: #fff;
	color: var(--ccm-primary-dark);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ---------- 固定ページ ---------- */
.cct-page {
	max-width: 1000px;
	margin: 0 auto;
	padding: 48px 24px 72px;
}
.cct-page-title {
	font-size: 1.6em;
	font-weight: 800;
	margin: 0 0 28px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--ccm-primary);
}
.cct-page-content {
	line-height: 1.9;
}

/* ---------- フッター ---------- */
.cct-footer {
	background: var(--ccm-footer-bg);
	color: var(--ccm-footer-text);
	margin-top: 64px;
	padding: 48px 24px 22px;
}
.cct-footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	/* 固定の列数+@mediaブレークポイントではなく、auto-fitで幅に応じて自動的に列数が減る形にしている。
	   これは特定の画面幅でしか列を減らせない書き方(旧実装)だと、環境によっては列が減らないまま
	   5列がそのまま潰れて表示される不具合が起きたための対処(ブレークポイントの有無に依存しない)。 */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 32px;
}
.cct-footer-logo {
	color: #fff;
	font-size: 1.2em;
	font-weight: 800;
	margin: 0 0 8px;
}
.cct-footer-tagline {
	font-size: 0.85em;
	color: #93a19f;
	margin: 0;
}
.cct-footer h4 {
	color: #fff;
	font-size: 0.92em;
	margin: 0 0 14px;
}
.cct-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cct-footer li {
	margin-bottom: 9px;
}
.cct-footer a {
	color: var(--ccm-footer-text);
	text-decoration: none;
	font-size: 0.88em;
}
.cct-footer a:hover {
	color: #fff;
}
.cct-footer-copyright {
	max-width: 1100px;
	margin: 32px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.78em;
	color: #93a19f;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 768px) {
	.cct-header-inner {
		padding: 10px 16px;
	}
	.cct-logo img {
		height: 34px;
	}
	.cct-nav {
		gap: 4px 14px;
	}
	.cct-nav a {
		font-size: 0.84em;
	}
	/* ヒーロー: モバイルでは背景写真とテキスト/ボタンが重なって見づらいため、
	   写真を上部の独立したバナーとして分離し、テキスト/ボタンはその下の単色背景に配置する。 */
	.cct-hero {
		background-image: none !important;
		background: linear-gradient(180deg, var(--ccm-primary-light) 0%, #ffffff 65%);
		padding: 0 20px 40px;
	}
	.cct-hero::before {
		display: none;
	}
	.cct-hero-photo-mobile {
		display: block;
		margin: 0 -20px 24px;
		height: 240px;
		overflow: hidden;
		border-radius: 0 0 var(--ccm-radius-lg) var(--ccm-radius-lg);
	}
	.cct-hero-photo-mobile img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 75% 20%;
		display: block;
	}
	.cct-hero-title {
		font-size: 1.8em;
		color: var(--ccm-text);
		text-shadow: none;
	}
	.cct-hero-sub {
		font-size: 1.02em;
		color: var(--ccm-text);
		text-shadow: none;
	}
	.cct-section {
		padding: 48px 0;
	}
	.cct-section-title {
		font-size: 1.4em;
	}
	.cct-feature-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.cct-shift-grid {
		grid-template-columns: 1fr;
	}
	.cct-flow-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.cct-hero-title {
		font-size: 1.5em;
	}
	.cct-hero-cta {
		flex-direction: column;
		align-items: stretch;
	}
	.cct-hero-cta .cct-btn {
		width: 100%;
	}
	.cct-flow-grid {
		grid-template-columns: 1fr;
	}
	.cct-page {
		padding: 32px 16px 56px;
	}
}

/* ------------------------------------------------------------------
   トップページ追加セクション(メリット / コラム / 使い方 / FAQ / 新着情報)
------------------------------------------------------------------- */

.cct-section-more { text-align: right; margin-top: 20px; }

/* ココミルを利用するメリット */
.cct-merit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.cct-merit-card { background: #fff; border-radius: 12px; padding: 28px 24px; box-shadow: 0 2px 10px rgba(26,46,53,.06); }
.cct-merit-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%; background: #028090; color: #fff;
	font-weight: bold; font-size: 16px; margin-bottom: 14px;
}
.cct-merit-title { font-size: 17px; margin: 0 0 10px; line-height: 1.5; }
.cct-merit-body { font-size: 14px; line-height: 1.8; color: #5c7a80; margin: 0; }

/* おすすめ特集(コラム) */
.cct-column-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.cct-column-card {
	display: block; background: #fff; border-radius: 12px; overflow: hidden;
	text-decoration: none; color: inherit; box-shadow: 0 2px 10px rgba(26,46,53,.06);
	transition: transform .2s, box-shadow .2s;
}
.cct-column-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(26,46,53,.12); }
.cct-column-photo img { width: 100%; height: 170px; object-fit: cover; display: block; }
.cct-column-body { padding: 20px; }
.cct-column-date { font-size: 12px; color: #8aa5aa; }
.cct-column-title { font-size: 16px; margin: 8px 0 10px; line-height: 1.5; }
.cct-column-excerpt { font-size: 13px; line-height: 1.8; color: #5c7a80; margin: 0; }

/* はじめての方へ */
.cct-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cct-guide-card { border: 1px solid #d3ebe8; border-radius: 12px; padding: 24px; background: #fff; }
.cct-guide-title { font-size: 16px; margin: 0 0 10px; color: #028090; }
.cct-guide-body { font-size: 14px; line-height: 1.8; color: #5c7a80; margin: 0; }

/* よくある質問 */
.cct-faq-list { max-width: 820px; margin: 0 auto; }
.cct-faq-item { background: #fff; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.cct-faq-q {
	cursor: pointer; padding: 18px 22px; font-weight: bold; font-size: 15px;
	list-style: none; position: relative; padding-right: 48px;
}
.cct-faq-q::-webkit-details-marker { display: none; }
.cct-faq-q::after {
	content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
	font-size: 20px; color: #028090; font-weight: normal;
}
.cct-faq-item[open] .cct-faq-q::after { content: '−'; }
.cct-faq-a { padding: 0 22px 20px; font-size: 14px; line-height: 1.9; color: #5c7a80; }
.cct-faq-a p { margin: 0 0 10px; }

/* 新着情報 */
.cct-press-list { list-style: none; padding: 0; margin: 0 auto; max-width: 820px; }
.cct-press-item {
	display: flex; gap: 20px; align-items: baseline;
	padding: 16px 4px; border-bottom: 1px solid #e4efee; flex-wrap: wrap;
}
.cct-press-date { font-size: 13px; color: #8aa5aa; min-width: 96px; }
.cct-press-title { font-size: 15px; color: #1a2e35; text-decoration: none; }
.cct-press-title:hover { color: #028090; text-decoration: underline; }

@media screen and (max-width: 600px) {
	.cct-merit-card, .cct-guide-card { padding: 20px 18px; }
	.cct-press-item { gap: 6px; }
	.cct-press-date { min-width: 0; }
}

/* 最下部CTAの2ボタン(ワーカー / 医療機関) */
.cct-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.cct-btn-outline { background: transparent; border: 2px solid #fff; color: #fff; }
.cct-btn-outline:hover { background: rgba(255,255,255,.14); }

/* ==========================================================
 * 医療機関向けトップ(page-for-clinics.php)
 * ========================================================== */

.cct-lp-inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.cct-lp-narrow { max-width: 760px; }
.cct-lp-section { padding: 64px 0; }
.cct-lp-section:nth-of-type(even) { background: var(--ccm-bg-soft); }

.cct-lp-title { font-size: 1.75rem; text-align: center; margin: 0 0 8px; }
.cct-lp-subtitle { text-align: center; color: var(--ccm-text-light); margin: 0 0 36px; }
.cct-lp-note { text-align: center; color: var(--ccm-text-light); font-size: 0.84rem; margin-top: 20px; }

/* テーマ共通の .cct-btn-outline は暗い背景用(白文字)のため、
   明るい背景のこのページでは読めるよう上書きする */
.cct-lp .cct-btn-outline { border: 2px solid var(--lp-green-dark); color: var(--lp-green-dark); background: transparent; }
.cct-lp .cct-btn-outline:hover { background: #EAF6E7; }
.cct-btn-lg { padding: 15px 34px; font-size: 1.02rem; }

/* ヒーロー(元LPの構成・配色をそのまま再現) */
.cct-lp {
	--lp-green: #6EC46A;
	--lp-green-dark: #4FA84B;
	--lp-green-deep: #3E8C3B;
}
.cct-lp-hero {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
}
/* 写真の上でも文字が読めるよう、左から右へ薄くなる暗幕を重ねる */
.cct-lp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(45, 75, 45, .68) 0%, rgba(45, 75, 45, .45) 55%, rgba(45, 75, 45, .08) 100%);
}
.cct-lp-hero-photo { display: none; }
.cct-lp-hero-inner { position: relative; padding: 116px 20px 72px; text-align: left; }

.cct-lp-hero-label {
	display: inline-block;
	background: #fff;
	color: var(--lp-green-dark);
	font-weight: bold;
	font-size: 0.86rem;
	padding: 7px 20px;
	border-radius: var(--ccm-radius-pill);
	margin-bottom: 20px;
}
.cct-lp-hero-title {
	font-size: 2.3rem;
	font-weight: 900;
	line-height: 1.55;
	letter-spacing: .02em;
	margin: 0 0 32px;
	text-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}

/* メダル型バッジ */
.cct-lp-badges { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 36px; }
.cct-lp-badge { position: relative; width: 150px; text-align: center; }
.cct-lp-medal {
	position: relative;
	width: 132px;
	height: 132px;
	margin: 0 auto;
	background: rgba(255, 255, 255, .97);
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 18px;
}
.cct-lp-medal::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 2px solid var(--lp-green);
	border-radius: 50%;
}
.cct-lp-medal::after {
	content: "";
	position: absolute;
	inset: 11px;
	border: 1px dashed rgba(79, 168, 75, .55);
	border-radius: 50%;
}
.cct-lp-medal-num {
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--lp-green-dark);
	line-height: 1.15;
	white-space: nowrap;
	margin: 0;
}
.cct-lp-medal-num span { font-size: 0.82rem; }
.cct-lp-medal-num.is-s { font-size: 1.12rem; }
.cct-lp-medal-num.is-xs { font-size: 0.92rem; }
.cct-lp-medal-label {
	font-size: 0.6rem;
	font-weight: bold;
	color: #4a5568;
	margin: 3px 0 0;
	line-height: 1.35;
	white-space: nowrap;
}

/* 帯(リボン) */
.cct-lp-ribbon {
	position: relative;
	display: inline-block;
	margin: -14px 0 0;
	background: var(--lp-green-dark);
	color: #fff;
	font-size: 0.66rem;
	font-weight: bold;
	line-height: 1;
	padding: 7px 14px;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	white-space: nowrap;
}
.cct-lp-ribbon::before,
.cct-lp-ribbon::after { content: ""; position: absolute; top: 2px; border-style: solid; z-index: -1; }
.cct-lp-ribbon::before { left: -10px; border-width: 12px 10px 12px 0; border-color: transparent var(--lp-green-deep) transparent transparent; }
.cct-lp-ribbon::after { right: -10px; border-width: 12px 0 12px 10px; border-color: transparent transparent transparent var(--lp-green-deep); }

.cct-lp-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* 最終CTAは中央そろえ(text-alignはflexの子要素に効かないため個別に指定) */
.cct-lp-cta .cct-lp-hero-actions { justify-content: center; }

/* リード文 */
.cct-lp-intro p { line-height: 2; margin: 0 0 16px; }

/* カード(お悩み・レビュー) */
.cct-lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.cct-lp-card {
	background: #fff;
	border: 1px solid var(--ccm-border);
	border-radius: var(--ccm-radius-lg);
	box-shadow: var(--ccm-shadow);
	overflow: hidden;
	padding-bottom: 20px;
}
.cct-lp-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.cct-lp-card h3 { font-size: 1.02rem; line-height: 1.6; margin: 18px 20px 0; }
.cct-lp-card p { margin: 10px 20px 0; font-size: 0.92rem; line-height: 1.85; }
.cct-lp-bridge { text-align: center; margin-top: 32px; font-weight: bold; font-size: 1.05rem; }

/* 選ばれる理由 */
.cct-lp-merits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.cct-lp-merit {
	background: #fff;
	border: 1px solid var(--ccm-border);
	border-radius: var(--ccm-radius-lg);
	box-shadow: var(--ccm-shadow);
	padding: 28px 24px;
}
.cct-lp-merit-icon { width: 56px; height: 56px; color: var(--lp-green-dark); margin-bottom: 14px; }
.cct-lp-merit-icon svg { width: 100%; height: 100%; }
.cct-lp-merit-no { font-size: 0.78rem; font-weight: bold; letter-spacing: .1em; color: var(--lp-green-dark); margin: 0 0 6px; }
.cct-lp-merit h3 { font-size: 1.08rem; line-height: 1.6; margin: 0 0 12px; }
.cct-lp-merit p { margin: 0; font-size: 0.92rem; line-height: 1.9; color: var(--ccm-text-light); }

/* レビュー */
.cct-lp-review-lead {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 36px;
	align-items: center;
	max-width: 900px;
	margin: 0 auto 34px;
	padding: 0;
}
.cct-lp-review-art svg { width: 100%; height: auto; display: block; }
.cct-lp-review-lead p { margin: 0; line-height: 2; }
.cct-lp-review { padding: 24px 4px 22px; }
.cct-lp-stars { color: #f5a623; letter-spacing: .12em; margin: 0 20px 10px; }
.cct-lp-review h3 { margin-top: 0; }
.cct-lp-review-by { color: var(--ccm-text-light); font-size: 0.84rem; margin-top: 14px; }

/* ご利用の流れ */
.cct-lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.cct-lp-step {
	background: #fff;
	border: 1px solid var(--ccm-border);
	border-radius: var(--ccm-radius-lg);
	box-shadow: var(--ccm-shadow);
	overflow: hidden;
	padding-bottom: 18px;
	text-align: center;
}
.cct-lp-step img { width: 100%; height: 130px; object-fit: cover; display: block; }
.cct-lp-step-no { font-size: 0.76rem; font-weight: bold; letter-spacing: .1em; color: var(--lp-green-dark); margin: 14px 0 6px; }
.cct-lp-step h3 { font-size: 0.98rem; margin: 0 14px 8px; }
.cct-lp-step p { font-size: 0.86rem; line-height: 1.8; color: var(--ccm-text-light); margin: 0 14px; }

/* 料金 */
.cct-lp-price-box {
	background: #fff;
	border: 2px solid var(--lp-green);
	border-radius: var(--ccm-radius-lg);
	padding: 34px 28px;
	text-align: center;
}
.cct-lp-price-label { color: var(--ccm-text-light); margin: 0 0 4px; }
.cct-lp-price-value { font-size: 2.3rem; font-weight: bold; color: var(--lp-green-dark); margin: 0 0 14px; line-height: 1.15; }
.cct-lp-price-box p { line-height: 1.9; }
.cct-lp-price-box .cct-btn { margin-top: 18px; }

/* よくあるご質問 */
.cct-lp-faq {
	background: #fff;
	border: 1px solid var(--ccm-border);
	border-radius: var(--ccm-radius-md);
	margin-bottom: 12px;
	padding: 16px 20px;
}
.cct-lp-faq summary { cursor: pointer; font-weight: bold; display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.cct-lp-faq p { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; line-height: 1.9; color: var(--ccm-text-light); }
.cct-lp-faq-q, .cct-lp-faq-a {
	flex: none; width: 24px; height: 24px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.78rem; font-weight: bold;
}
.cct-lp-faq-q { background: var(--lp-green-dark); color: #fff; }
.cct-lp-faq-a { background: #EAF6E7; color: var(--lp-green-dark); }

/* 最終CTA */
.cct-lp-cta {
	background: linear-gradient(135deg, #4FA84B 0%, #79C673 100%);
	color: #fff;
	padding: 64px 0;
	text-align: center;
}
.cct-lp-cta h2 { font-size: 1.6rem; margin: 0 0 10px; }
.cct-lp-cta > .cct-lp-inner > p { margin: 0 0 26px; opacity: .95; }

@media (max-width: 768px) {
	.cct-lp-section { padding: 48px 0; }

	/* スマートフォンでは写真を上部に独立して置き、コピーは下の緑地に載せる */
	/* インラインの背景写真を打ち消しつつ、緑のグラデーションを確実に適用する */
	.cct-lp-hero { background-image: linear-gradient(165deg, #79C673 0%, #4FA84B 100%) !important; }
	.cct-lp-hero::before { display: none; }
	.cct-lp-hero-photo {
		display: block;
		position: relative;
		height: 232px;
		background-position: center 32%;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.cct-lp-hero-photo::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(30, 62, 30, .78) 0%, rgba(30, 62, 30, .5) 45%, rgba(30, 62, 30, 0) 78%);
	}
	.cct-lp-hero-photo-copy {
		position: absolute;
		left: 20px;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		color: #fff;
		font-weight: 900;
		font-size: clamp(17px, 5.2vw, 22px);
		line-height: 1.6;
		letter-spacing: .02em;
		text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
	}
	.cct-lp-hero-photo-big { font-size: 1.4em; }

	.cct-lp-hero-inner { padding: 36px 20px 44px; }
	.cct-lp-hero-label { font-size: 0.74rem; padding: 5px 14px; margin-bottom: 16px; }
	.cct-lp-hero-title { font-size: clamp(19px, 5.5vw, 26px); letter-spacing: 0; line-height: 1.5; margin-bottom: 22px; }

	.cct-lp-badges { gap: 12px; justify-content: center; flex-wrap: nowrap; margin-bottom: 28px; }
	.cct-lp-badge { width: 104px; }
	.cct-lp-medal { width: 96px; height: 96px; padding: 10px; }
	.cct-lp-medal::before { inset: 5px; }
	.cct-lp-medal::after { inset: 9px; }
	.cct-lp-medal-num { font-size: 1.2rem; }
	.cct-lp-medal-num.is-s { font-size: 0.86rem; }
	.cct-lp-medal-num.is-xs { font-size: 0.74rem; }
	.cct-lp-medal-label { font-size: 0.5rem; }
	.cct-lp-ribbon { font-size: 0.58rem; padding: 6px 9px; }
	.cct-lp-ribbon::before { left: -8px; border-width: 10px 8px 10px 0; }
	.cct-lp-ribbon::after { right: -8px; border-width: 10px 0 10px 8px; }

	.cct-lp-title { font-size: 1.35rem; }
	.cct-lp-hero-actions .cct-btn { width: 100%; }
	.cct-lp-price-value { font-size: 2rem; }
	.cct-checkbox-grid { grid-template-columns: 1fr; }
	.cct-lp-hero-actions { gap: 10px; }

	/* ご利用の流れは2列。5つ目が1枚だけ残ってしまうため、最後は横いっぱいに広げる */
	.cct-lp-steps { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.cct-lp-step:last-child { grid-column: 1 / -1; }
	.cct-lp-step img { height: 118px; }
	.cct-lp-step:last-child img { height: 150px; }

	.cct-lp-card img { height: 150px; }

	/* レビューのイラストは上に置いて縦積みにする */
	.cct-lp-review-lead { grid-template-columns: 1fr; gap: 16px; text-align: left; }
	.cct-lp-review-art { max-width: 240px; margin: 0 auto; }
}

/* 緑背景の上ではボタンが背景に埋もれるため、白地・緑文字にして目立たせる */
.cct-lp-hero .cct-btn-primary,
.cct-lp-cta .cct-btn-primary {
	background: #fff;
	color: var(--lp-green-dark);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}
.cct-lp-hero .cct-btn-primary:hover,
.cct-lp-cta .cct-btn-primary:hover {
	background: #f4fbf3;
	color: var(--lp-green-dark);
	filter: none;
}

.cct-lp-hero .cct-btn-outline,
.cct-lp-cta .cct-btn-outline { border: 2px solid #fff; color: #fff; background: transparent; }
.cct-lp-hero .cct-btn-outline:hover,
.cct-lp-cta .cct-btn-outline:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* ヘッダーの「採用担当者の方はこちら」が薄すぎて読みづらいため濃くする */
.cct-nav .cct-nav-clinic { color: var(--ccm-text); }
.cct-nav .cct-nav-clinic:hover { color: var(--ccm-primary-dark); }

/* 未読メッセージ件数のバッジ(ヘッダーのマイページボタン) */
.cct-unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	margin-left: 6px;
	border-radius: 999px;
	background: #e5484d;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

/* ---------- 固定ページの表(運営会社の会社概要など) ---------- */
.wp-block-table,
.ccm-company-table {
	margin: 1.5rem 0;
}

.wp-block-table table,
table.ccm-company-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--ccm-border, #e2e8e6);
	border-radius: 10px;
	overflow: hidden;
	font-size: 0.95rem;
	line-height: 1.9;
}

.wp-block-table th,
.wp-block-table td,
table.ccm-company-table th,
table.ccm-company-table td {
	padding: 0.9rem 1.1rem;
	border-bottom: 1px solid var(--ccm-border, #e2e8e6);
	text-align: left;
	vertical-align: top;
}

.wp-block-table tr:last-child th,
.wp-block-table tr:last-child td,
table.ccm-company-table tr:last-child th,
table.ccm-company-table tr:last-child td {
	border-bottom: none;
}

.wp-block-table th,
table.ccm-company-table th {
	width: 9em;
	background: #f4faf8;
	font-weight: 600;
	color: var(--ccm-primary-dark, #2a9d8a);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.wp-block-table th,
	table.ccm-company-table th {
		width: auto;
		white-space: normal;
	}

	.wp-block-table table,
	table.ccm-company-table,
	.wp-block-table tbody,
	table.ccm-company-table tbody,
	.wp-block-table tr,
	table.ccm-company-table tr,
	.wp-block-table th,
	table.ccm-company-table th,
	.wp-block-table td,
	table.ccm-company-table td {
		display: block;
	}

	.wp-block-table th,
	table.ccm-company-table th {
		border-bottom: none;
		padding-bottom: 0.2rem;
		font-size: 0.85rem;
	}

	.wp-block-table td,
	table.ccm-company-table td {
		padding-top: 0.2rem;
	}
}