@charset "utf-8";

/* ============================================================
   採用情報ページ — hara-hospital.jp 風のリニューアル
   既存の #other 系デフォルトスタイルを上書きし、
   モダンで読みやすい構成に組み替える
   ============================================================ */

#recruit-page{
	--rec-blue:#2f83ad;
	--rec-blue-dk:#1c5878;
	--rec-blue-lt:#e3f0f7;
	--rec-accent:#f0a833;
	--rec-ink:#232b31;
	--rec-ink-2:#4c5a63;
	--rec-muted:#8a99a3;
	--rec-line:#d9e3ea;
	--rec-bg:#fafcfd;
	--rec-bg-alt:#eef4f8;

	color:var(--rec-ink);
	background:#fff;
	font-family:'Yu Gothic','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
	line-height:1.9;
	font-size:16px;
}
#recruit-page *{box-sizing:border-box;}
#recruit-page img{display:block;max-width:100%;height:auto;}
#recruit-page a{color:var(--rec-blue);text-decoration:none;}
#recruit-page a:hover{color:var(--rec-blue-dk);}
#recruit-page b,#recruit-page strong{font-weight:700;color:var(--rec-ink);}

.rec-inner{width:1080px;max-width:92%;margin:0 auto;}

/* 既存の page-title 帯・3色タブ・#other 内デフォを打ち消し */
body.recruit-body .page-title{display:none !important;}
body.recruit-body #content{padding:0 !important;background:#fff;}
body.recruit-body #other{padding:0 !important;background:#fff;}
body.recruit-body #history{margin:0 !important;padding:0 !important;}
body.recruit-body #breadcrumb{
	max-width:1080px;margin:14px auto 0;padding:0 4%;
	font-size:12.5px;color:var(--rec-muted);letter-spacing:.05em;
}
@media (min-width:768px){
	body.recruit-body #page #gnav,
	body.recruit-body #gnav{display:none !important;}
}

/* ---------- HERO ---------- */
.rec-hero{
	position:relative;overflow:hidden;
	background:#0e1c28;
	color:#fff;
	min-height:520px;
}
.rec-hero-bg{
	position:absolute;inset:0;
	background:url("/common/img/index_main_01.jpg") center 55%/cover no-repeat;
}
.rec-hero-bg::after{
	content:"";position:absolute;inset:0;
	background:
		linear-gradient(180deg, rgba(14,28,40,.25), rgba(14,28,40,.55) 60%, rgba(14,28,40,.8));
}
.rec-hero-inner{
	position:relative;z-index:2;
	width:1080px;max-width:92%;margin:0 auto;
	padding:100px 0 90px;min-height:520px;
	display:flex;flex-direction:column;justify-content:flex-end;
}
.rec-hero .en{
	display:block;font-family:'Cormorant Garamond','Yu Mincho',serif;
	font-size:16px;letter-spacing:.24em;color:rgba(255,255,255,.85);
	font-style:italic;margin-bottom:14px;
}
.rec-hero h1{
	margin:0 0 20px;font-size:56px;font-weight:600;letter-spacing:.06em;line-height:1.35;
	text-shadow:0 4px 16px rgba(0,0,0,.4);
}
.rec-hero-sub{
	margin:0;font-size:18px;color:rgba(255,255,255,.92);letter-spacing:.04em;
	max-width:640px;
}
.rec-hero-tabs{
	position:absolute;left:0;right:0;bottom:0;
	background:rgba(255,255,255,.98);
	border-top:3px solid var(--rec-blue);
	z-index:3;
}
.rec-hero-tabs ul{
	width:1080px;max-width:92%;margin:0 auto;padding:0;list-style:none;
	display:flex;gap:0;
}
.rec-hero-tabs a{
	display:flex;flex-direction:column;justify-content:center;align-items:center;
	padding:18px 22px;gap:2px;
	font-size:14.5px;font-weight:600;color:var(--rec-ink);
	border-right:1px solid var(--rec-line);
	transition:background .3s;
}
.rec-hero-tabs a:hover{background:var(--rec-blue-lt);color:var(--rec-blue-dk);}
.rec-hero-tabs a .sm{font-size:11px;letter-spacing:.16em;color:var(--rec-muted);font-family:'Cormorant Garamond',serif;font-style:italic;}
.rec-hero-tabs li:last-child a{border-right:none;}

/* ---------- Section common ---------- */
.rec-sec{padding:96px 0;}
.rec-sec.alt{background:var(--rec-bg);}
.rec-sec.dark{background:linear-gradient(180deg,#182838,#20364a);color:#e6edf2;}
.rec-sec.dark a{color:#a9d2e5;}

.rec-sec-h{margin:0 0 50px;text-align:center;}
.rec-sec-h .en{
	display:block;font-family:'Cormorant Garamond','Yu Mincho',serif;
	font-size:15px;letter-spacing:.34em;color:var(--rec-blue);
	font-style:italic;font-weight:500;margin-bottom:12px;
}
.rec-sec.dark .rec-sec-h .en{color:#a9d2e5;}
.rec-sec-h h2{
	margin:0;font-size:32px;line-height:1.55;letter-spacing:.06em;font-weight:600;color:var(--rec-ink);
	font-family:'Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif;
}
.rec-sec.dark .rec-sec-h h2{color:#fff;}

.rec-lead{
	max-width:760px;margin:0 auto 50px;text-align:center;
	font-size:16px;line-height:2.05;color:var(--rec-ink-2);
}
.rec-sec.dark .rec-lead{color:rgba(255,255,255,.85);}

/* ---------- Message ---------- */
.rec-message{max-width:820px;margin:0 auto;}
.rec-message .catch{
	font-size:34px;line-height:1.6;letter-spacing:.06em;font-weight:600;
	text-align:center;margin:0 0 40px;color:var(--rec-ink);
	font-family:'Yu Mincho','Hiragino Mincho ProN',serif;
}
#recruit-page .rec-message .catch b{color:var(--rec-blue-dk);}
.rec-message p{
	margin:0 0 1.3em;font-size:15.5px;line-height:2.15;color:var(--rec-ink-2);
	text-align:justify;
}
.rec-message-sign{
	margin-top:36px;text-align:right;font-family:'Cormorant Garamond',serif;
	font-size:14px;color:var(--rec-muted);font-style:italic;letter-spacing:.14em;
}

/* ---------- 求める人物像 ---------- */
.rec-persons{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.rec-person{
	position:relative;padding:32px 26px 28px;border-radius:14px;
	background:#fff;border:1px solid var(--rec-line);
	transition:transform .3s, box-shadow .3s;
}
.rec-person:hover{transform:translateY(-3px);box-shadow:0 20px 36px -22px rgba(28,88,120,.4);}
.rec-person .n{
	position:absolute;left:24px;top:-18px;
	width:44px;height:44px;border-radius:50%;
	display:grid;place-items:center;
	background:var(--rec-blue);color:#fff;
	font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;
	box-shadow:0 8px 16px -6px rgba(47,131,173,.5);
}
.rec-person h3{
	margin:14px 0 12px;font-size:17px;line-height:1.55;letter-spacing:.04em;color:var(--rec-ink);
}
.rec-person p{margin:0;font-size:14.5px;line-height:1.9;color:var(--rec-ink-2);}

/* ---------- 働く魅力 Point ---------- */
.rec-attractions{display:grid;gap:26px;}
.rec-attraction{
	display:grid;grid-template-columns:5fr 6fr;gap:44px;align-items:center;
	padding:30px;border-radius:16px;background:#fff;border:1px solid var(--rec-line);
}
.rec-attraction.reverse{grid-template-columns:6fr 5fr;}
.rec-attraction.reverse .rec-attraction-img{order:2;}
.rec-attraction.reverse .rec-attraction-b{order:1;}
.rec-attraction-img{
	aspect-ratio:5/4;border-radius:12px;overflow:hidden;
	background-size:cover;background-position:center;
}
.rec-attraction-b .p{
	font-family:'Cormorant Garamond',serif;font-style:italic;
	font-size:15px;color:var(--rec-blue);letter-spacing:.22em;margin:0 0 6px;
}
.rec-attraction-b h3{
	margin:0 0 18px;font-size:22px;line-height:1.55;font-weight:600;color:var(--rec-ink);
	letter-spacing:.04em;
}
.rec-attraction-b p{margin:0;font-size:15px;line-height:2;color:var(--rec-ink-2);}

/* ---------- 数字で見る Numbers ---------- */
.rec-nums-top{
	display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:26px;
}
.rec-num{
	padding:34px 20px;border-radius:14px;text-align:center;
	background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.rec-num .lbl{
	font-size:12.5px;letter-spacing:.14em;color:rgba(255,255,255,.7);margin-bottom:10px;
}
.rec-num .val{
	font-family:'Cormorant Garamond','Yu Mincho',serif;
	font-size:56px;font-weight:600;color:#fff;line-height:1;margin-bottom:6px;
}
.rec-num .val small{font-size:20px;margin-left:6px;color:#a9d2e5;}
.rec-num .sub{font-size:13px;color:rgba(255,255,255,.7);}

.rec-nums-ages{
	padding:32px 30px;border-radius:14px;
	background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.rec-nums-ages h3{
	margin:0 0 22px;text-align:center;font-size:17px;font-weight:600;color:#fff;letter-spacing:.06em;
}
.rec-nums-ages ul{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(6,1fr);gap:16px;
}
.rec-nums-ages li{
	text-align:center;padding:14px 0;
	background:rgba(255,255,255,.04);border-radius:8px;
}
#recruit-page .rec-nums-ages li b{
	display:block;font-family:'Cormorant Garamond',serif;
	font-size:26px;font-weight:600;color:#fff;line-height:1.2;
}
#recruit-page .rec-nums-ages li b small{font-size:12px;color:#a9d2e5;margin-left:3px;}
.rec-nums-ages li span{font-size:12px;color:rgba(255,255,255,.7);}

/* ---------- 採用の流れ ---------- */
.rec-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;}
.rec-flow-step{
	position:relative;padding:32px 22px 26px;border-radius:14px;text-align:center;
	background:#fff;border:1px solid var(--rec-line);
}
.rec-flow-step .st{
	display:inline-flex;align-items:center;justify-content:center;
	width:50px;height:50px;border-radius:50%;margin-bottom:14px;
	background:linear-gradient(135deg,var(--rec-blue),#5bafd3);
	color:#fff;font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;
	box-shadow:0 10px 20px -8px rgba(47,131,173,.55);
}
.rec-flow-step h3{
	margin:0 0 10px;font-size:17px;font-weight:600;color:var(--rec-ink);letter-spacing:.04em;
}
.rec-flow-step p{margin:0;font-size:13.5px;line-height:1.9;color:var(--rec-ink-2);}
.rec-flow-step + .rec-flow-step::before{
	content:"";position:absolute;left:-14px;top:50%;
	width:10px;height:10px;
	border-right:2px solid var(--rec-blue);border-top:2px solid var(--rec-blue);
	transform:translateY(-50%) rotate(45deg);
	opacity:.5;
}

/* ---------- 募集職種 一覧 ---------- */
.rec-jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px;}
.rec-job-card{
	display:flex;flex-direction:column;
	padding:26px 24px 22px;border-radius:14px;background:#fff;
	border:1px solid var(--rec-line);
	transition:transform .3s, box-shadow .3s, border-color .3s;
}
.rec-job-card:hover{
	transform:translateY(-3px);
	box-shadow:0 22px 36px -22px rgba(28,88,120,.4);
	border-color:var(--rec-blue);
}
.rec-job-card .tag{
	display:inline-block;align-self:flex-start;margin-bottom:14px;padding:4px 14px;
	border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.14em;
	background:var(--rec-blue-lt);color:var(--rec-blue-dk);
}
.rec-job-card .tag.tag-blue{background:#e3f0f7;color:#1c5878;}
.rec-job-card .tag.tag-green{background:#e8f4dd;color:#4b7622;}
.rec-job-card .tag.tag-amber{background:#fdefd4;color:#a06a09;}
.rec-job-card h3{
	margin:0 0 4px;font-size:20px;letter-spacing:.04em;color:var(--rec-ink);line-height:1.45;
}
.rec-job-card .en{
	font-family:'Cormorant Garamond',serif;font-style:italic;
	font-size:14px;color:var(--rec-blue);letter-spacing:.14em;margin:0 0 14px;
}
.rec-job-card .facility{
	font-size:12.5px;color:var(--rec-muted);letter-spacing:.06em;margin:0 0 10px;
}
.rec-job-card p{margin:0 0 18px;font-size:14px;line-height:1.9;color:var(--rec-ink-2);flex:1;}
.rec-job-card .more{
	display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
	margin-top:auto;padding:11px 22px;border-radius:999px;
	background:var(--rec-blue);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.06em;
	transition:background .3s;
}
.rec-job-card .more:hover{background:var(--rec-blue-dk);color:#fff;}

.rec-empty{
	padding:30px;border-radius:14px;text-align:center;
	background:var(--rec-bg-alt);color:var(--rec-muted);font-size:14.5px;
}
.rec-empty h3{margin:0 0 6px;font-size:16px;color:var(--rec-ink);}

/* ---------- 職種詳細（アコーディオン） ---------- */
.rec-details{max-width:920px;margin:0 auto;}
.rec-details .cat{
	margin:44px 0 20px;padding:14px 22px;
	background:linear-gradient(90deg,var(--rec-blue),#5bafd3);color:#fff;
	border-radius:8px;font-size:19px;font-weight:600;letter-spacing:.05em;
}
.rec-details details{
	background:#fff;border:1px solid var(--rec-line);border-radius:12px;margin-bottom:14px;
	transition:border-color .3s;
}
.rec-details details[open]{border-color:var(--rec-blue);}
.rec-details summary{
	padding:22px 60px 22px 28px;position:relative;cursor:pointer;list-style:none;
	font-size:17px;font-weight:600;color:var(--rec-ink);letter-spacing:.04em;
	display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.rec-details summary::-webkit-details-marker{display:none;}
.rec-details summary::after{
	content:"";position:absolute;right:28px;top:50%;margin-top:-5px;
	width:10px;height:10px;
	border-right:2px solid var(--rec-blue);border-bottom:2px solid var(--rec-blue);
	transform:rotate(45deg);transition:transform .3s;
}
.rec-details details[open] summary::after{transform:rotate(-135deg);margin-top:-3px;}
.rec-details summary .type{
	padding:3px 10px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.06em;
}
.rec-details summary .type.full{background:#e3f0f7;color:#1c5878;}
.rec-details summary .type.part{background:#fdefd4;color:#a06a09;}
.rec-details .b{
	padding:0 30px 26px;border-top:1px solid var(--rec-line);
	margin-top:0;
}
.rec-details .b dl{
	display:grid;grid-template-columns:160px 1fr;gap:14px 24px;margin:20px 0 0;
	font-size:14.5px;
}
.rec-details .b dt{
	font-weight:700;color:var(--rec-blue-dk);border-left:3px solid var(--rec-blue);padding-left:12px;line-height:1.6;
}
.rec-details .b dd{margin:0;line-height:1.85;color:var(--rec-ink-2);}
.rec-details .b dd ul{margin:0;padding-left:1.2em;}

/* ---------- CTA ---------- */
.rec-cta{
	padding:70px 0;color:#fff;text-align:center;
	background:linear-gradient(120deg,var(--rec-blue-dk),var(--rec-blue));
}
.rec-cta h2{margin:0 0 16px;font-size:28px;letter-spacing:.06em;font-weight:600;color:#fff;}
.rec-cta p{margin:0 0 32px;font-size:15.5px;color:rgba(255,255,255,.9);line-height:2;}
.rec-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
#recruit-page .rec-btn{
	display:inline-flex;align-items:center;gap:10px;
	padding:16px 40px;border-radius:999px;
	font-size:15.5px;font-weight:600;letter-spacing:.08em;
	transition:transform .3s, box-shadow .3s, background .3s;
}
#recruit-page .rec-btn-primary{
	background:#fff;color:var(--rec-blue-dk);
	box-shadow:0 12px 22px -10px rgba(0,0,0,.35);
}
#recruit-page .rec-btn-primary:hover{background:#f2f9fd;color:var(--rec-blue-dk);transform:translateY(-2px);}
#recruit-page .rec-btn-ghost{
	background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);
}
#recruit-page .rec-btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff;}
.rec-cta .tel{
	margin-top:20px;font-size:16px;color:rgba(255,255,255,.9);letter-spacing:.06em;
}
.rec-cta .tel a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.4);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
	.rec-hero{min-height:auto;}
	.rec-hero-inner{padding:80px 0 80px;min-height:auto;}
	.rec-hero h1{font-size:36px;}
	.rec-hero-sub{font-size:15px;}
	.rec-hero-tabs{position:static;background:#fff;}
	.rec-hero-tabs ul{overflow-x:auto;flex-wrap:nowrap;}
	.rec-hero-tabs a{padding:12px 16px;font-size:13px;white-space:nowrap;}
	.rec-sec{padding:64px 0;}
	.rec-sec-h h2{font-size:24px;}
	.rec-message .catch{font-size:22px;}
	.rec-persons{grid-template-columns:1fr;gap:32px;}
	.rec-attraction,.rec-attraction.reverse{grid-template-columns:1fr;gap:20px;}
	.rec-attraction.reverse .rec-attraction-img{order:0;}
	.rec-attraction.reverse .rec-attraction-b{order:0;}
	.rec-nums-top{grid-template-columns:1fr;}
	.rec-num .val{font-size:44px;}
	.rec-nums-ages ul{grid-template-columns:repeat(4,1fr);}
	.rec-flow{grid-template-columns:1fr;gap:14px;}
	.rec-flow-step + .rec-flow-step::before{
		left:50%;top:-12px;
		transform:translateX(-50%) rotate(135deg);
	}
	.rec-jobs{grid-template-columns:1fr;}
	.rec-details .b dl{grid-template-columns:1fr;gap:6px 0;}
	.rec-details .b dt{margin-top:12px;}
}
@media (max-width:520px){
	.rec-hero h1{font-size:28px;letter-spacing:.03em;}
	.rec-hero .en{font-size:13px;}
	.rec-nums-ages ul{grid-template-columns:repeat(2,1fr);}
	.rec-message .catch{font-size:19px;}
	#recruit-page .rec-btn{padding:14px 22px;font-size:14px;}
}