@charset "UTF-8";

/* =======================================================
	Sunmedic Theme - home.css（トップページ専用）
======================================================= */


/* =======================================================
	1. HERO（SmartSlider + 重ねテキスト）
======================================================= */

.hero {
	position: relative;
	width: 100%;
}

/* ▼ キャッチコピー（唯一の正解） */
.hero-catch {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	width: 90%;
	max-width: 1200px;
	text-align: center;
	color: #fff;
	pointer-events: none;
}

.hero-catch h1 {
	font-size: 48px;
	line-height: 1.6;
	font-weight: 700;
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ▼ スライダー（背景） */
.hero-slider {
	position: relative;
	overflow: visible;
}

.hero-slider>div {
	height: 100%;
}

/* =======================================================
	2. 3カラムリンク（白い箱付き）
======================================================= */

.top-links-section {
	position: relative;
	margin-top: -80px;
	z-index: 30;
}

.top-links-wrapper {
	width: 1200px;
	margin: 0 auto;
	background: #ffffff;
	padding: 30px 40px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.top-link-list {
	display: flex;
	gap: 30px;
	justify-content: space-between;
	padding: 0;
	list-style: none;
	margin: 0;
}

.top-link-list li {
	width: 32%;
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.top-link-list li .img-box {
	width: 100%;
	height: 220px;
	overflow: hidden;
}

.top-link-list li .img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.top-link-list li .caption {
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.link-company .caption {
	background: #FFAD33;
}

.link-pharmacy .caption {
	background: #52BDF8;
}

.link-nursing .caption {
	background: #66CDAA;
}

.link-cover {
	position: absolute;
	inset: 0;
	z-index: 5;
}



/* =======================================================
	3. 企業メッセージ（intro）
======================================================= */

.intro {
	padding: 80px 0;
	text-align: center;
}

.intro .lead {
	margin: 1em auto 0;
	line-height: 1.8;
}



/* =======================================================
	4. ダイレクトアクセス（直線2カラム）
======================================================= */

.direct-two {
	display: flex;
	gap: 24px;
	justify-content: space-between;
	margin: 3em auto 3em;
}

.contact-box {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 28px;
	min-height: 150px;
	max-width: 550px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	color: inherit;
	transition: .2s ease;
}

.contact-left {
	font-family: "Noto Sans JP", sans-serif;
}

.contact-left .label {
	font-size: 16px;
	margin: 0;
}

.contact-left .sub {
	font-size: 18px;
	font-weight: 600;
	margin-top: 6px;
}

.contact-right {
	font-family: "Noto Serif JP", serif;
	text-align: right;
}

.tel-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tel-row .tel-label {
	font-size: 16px;
	color: #d89a42;
}

.tel-row .tel-number {
	font-size: 28px;
	font-weight: 600;
}

.contact-right .time {
	margin-top: 6px;
	font-size: 13px;
	color: #777;
}

.mail-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mail-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mail-icon .material-symbols-outlined {
	font-size: 44px;
	font-variation-settings:
		"FILL" 0,
		"wght" 100,
		"GRAD" 0,
		"opsz" 48;
	line-height: 1;
	color: #333;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateY(2px);
}

.mail-status {
	font-size: 24px;
	font-weight: 600;
	margin: 0;
	padding: 0;
}

.mail-note {
	margin-top: 8px;
	font-size: 12px;
	color: #777;
	line-height: 1.6;
}



/* =======================================================
	5. レスポンシブ（SP）
======================================================= */

@media (max-width: 799px) {

	/* ▼ ダイレクトアクセス縦並び */
	.direct-two {
		flex-direction: column;
		align-items: center;
	}

	.contact-box {
		max-width: 100%;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
		gap: 10px;
	}

	.contact-left,
	.contact-right {
		width: 100%;
		text-align: left;
	}

	.tel-row {
		display: flex;
		flex-direction: row !important;
		align-items: center;
		gap: 8px;
	}

	.tel-row .tel-number {
		font-size: 24px;
		margin: 0;
	}

	.mail-row {
		display: flex;
		flex-direction: row !important;
		align-items: center;
		gap: 8px;
	}

	.mail-icon .material-symbols-outlined {
		font-size: 36px;
		line-height: 1;
	}

	.mail-status {
		font-size: 18px;
	}

	/* ▼ 3カラム */
	.top-links-section {
		margin-top: 0;
	}

	.top-links-wrapper {
		width: 92%;
		padding: 20px;
	}

	.top-link-list {
		flex-direction: column;
		gap: 24px;
		padding: 0;
	}

	.top-link-list li {
		width: 100%;
		border-radius: 12px;
		overflow: hidden;
	}

	.top-link-list li .img-box {
		height: 200px;
	}

	.top-link-list li .caption {
		font-size: 18px;
		height: 56px;
		line-height: 56px;
	}

	/* ▼ スマホ HERO */
	.hero {
		min-height: clamp(380px, 60svh, 520px);
	}

	.hero-catch {
		top: calc(50% - 28px);
	}

	.hero-catch h1 {
		font-size: 26px;
		line-height: 1.5;
	}

	/* ▼ スマホ時スライダー調整（既存ルール維持） */
	.hero-slider {
		height: auto;
	}

	.hero-slider>div {
		height: 100% !important;
	}

}

/* HERO キャッチ：初期は非表示（FOUC防止） */
.hero-catch h1 {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1.6s ease, transform 1.6s ease;
	will-change: opacity, transform;
}

/* 表示状態 */
.hero-catch h1.is-show {
	opacity: 1;
	transform: translateY(0);
}

/* ================================
   TOP 3リンク：フェードイン
================================ */

/* 初期状態 */
.top-links-wrapper {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 1.2s ease, transform 1.2s ease;
	will-change: opacity, transform;
}

/* 表示状態 */
.top-links-wrapper.is-show {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================
   INTRO / DIRECT LINKS：フェードイン共通
============================================ */
.intro,
.direct-links {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1.4s ease, transform 1.4s ease;
	will-change: opacity, transform;
}

/* 表示状態 */
.intro.is-show,
.direct-links.is-show {
	opacity: 1;
	transform: translateY(0);
}