/* =========================================================
 * TOP「4つの入り口」H案（ポスターの壁） v3
 * 見出しは front-page.php の既存（.fp-sec-head）のまま。
 * front-page.css の #fp-top 付き打ち消しに負けないよう、
 * セレクタはすべて #fp-top から始めています。
 * ========================================================= */

/* .fp-wrap の幅の中に収める（左右に余白） */
#fp-top .fpe {
	--fpe-row: clamp(260px, 29.7vw, 380px);
	--fpe-radius: 16px;
	--fpe-art-opacity: .55;       /* ハンボーの濃さ（1で元のまま） */
	--fpe-art-opacity-hover: .9;  /* マウスを乗せたとき */
	container-type: inline-size;
	position: relative;
	font-family: "Noto Sans JP", sans-serif;
	color: #333;
}
@supports (width: 1cqw) {
	#fp-top .fpe { --fpe-row: clamp(260px, 29.7cqw, 380px); }
}

/* ---------- ポスターの壁（すき間なし） ---------- */
#fp-top .fpe-wall {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: var(--fpe-row) var(--fpe-row);
	gap: 0;
	border-radius: var(--fpe-radius);
	overflow: hidden;
}

#fp-top .fpe-t {
	position: relative;
	display: block;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	isolation: isolate;
}
#fp-top .fpe-t--shiru   { grid-column: 1 / span 5;  grid-row: 1 / span 2; background: #e6eff4; }
#fp-top .fpe-t--ikasu   { grid-column: 6 / span 7;  grid-row: 1;          background: #f6eed6; }
#fp-top .fpe-t--itawaru { grid-column: 6 / span 4;  grid-row: 2;          background: #f6e4e8; }
#fp-top .fpe-t--tips    { grid-column: 10 / span 3; grid-row: 2;          background: #e2efe7; }

/* コピー */
#fp-top .fpe-copy {
	position: absolute;
	z-index: 2;
	margin: 0;
	padding: 0;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .04em;
}
#fp-top .fpe-t--shiru .fpe-copy {
	right: 7%;
	top: 6%;
	writing-mode: vertical-rl;
	font-size: clamp(26px, 3.1vw, 40px);
	font-size: clamp(26px, 3.1cqw, 40px);
	letter-spacing: .08em;
	color: #263f4f;
}
#fp-top .fpe-t--ikasu .fpe-copy {
	left: 6.4%;
	top: 50%;
	transform: translateY(-60%);
	font-size: clamp(28px, 3.45vw, 44px);
	font-size: clamp(28px, 3.45cqw, 44px);
	color: #5a4512;
	white-space: nowrap;
}
#fp-top .fpe-t--itawaru .fpe-copy {
	left: 8.4%;
	top: 10%;
	font-size: clamp(22px, 2.65vw, 34px);
	font-size: clamp(22px, 2.65cqw, 34px);
	line-height: 1.45;
	color: #6b2c3c;
}
#fp-top .fpe-t--tips .fpe-copy {
	left: 9.4%;
	top: 9.5%;
	font-size: clamp(20px, 2.2vw, 30px);
	font-size: clamp(20px, 2.2cqw, 30px);
	color: #1f4a33;
}

/* ハンボー */
#fp-top .fpe-art {
	position: absolute;
	z-index: 1;
	height: auto;
	max-width: none;
	opacity: var(--fpe-art-opacity);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .4s;
}
#fp-top .fpe-t--shiru   .fpe-art { left: -3%;  bottom: 13%;  width: 62%; }
#fp-top .fpe-t--ikasu   .fpe-art { right: -1%; bottom: -10%; width: 35%; }
#fp-top .fpe-t--itawaru .fpe-art { left: 50%;  bottom: 14%;  width: 40%; }
#fp-top .fpe-t--tips    .fpe-art { left: 22%;  bottom: 22%;  width: 54%; }

/* 労わるの「z」 */
#fp-top .fpe-z {
	position: absolute;
	z-index: 2;
	right: 10%;
	bottom: 56%;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #b06a7b;
	opacity: 0;
	animation: fpe-z 2.6s ease-out infinite;
}
#fp-top .fpe-z--2 { right: 6%; bottom: 62%; font-size: 16px; animation-delay: 1.3s; }
@keyframes fpe-z {
	0%   { opacity: 0; transform: translate(0, 0); }
	30%  { opacity: 1; }
	100% { opacity: 0; transform: translate(14px, -26px); }
}

/* ---------- ボタン（カテゴリへの導線） ---------- */
#fp-top .fpe-btn {
	position: absolute;
	z-index: 3;
	left: 28px;
	bottom: 26px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	box-sizing: border-box;
	padding: 10px 22px 10px 20px;
	border-radius: 999px;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	white-space: nowrap;
	box-shadow: 0 4px 0 rgba(0, 0, 0, .14);
	transition: transform .2s, box-shadow .2s;
}
#fp-top .fpe-no { font-size: 13px; letter-spacing: .1em; opacity: .85; }
#fp-top .fpe-arrow { display: inline-block; transition: transform .2s; }

/* ボタンはカテゴリ色（白文字） */
#fp-top .fpe-t--shiru   .fpe-btn { background: #3d6f8c; color: #fff; }
#fp-top .fpe-t--ikasu   .fpe-btn { background: #86661a; color: #fff;    left: 6.4%; }
#fp-top .fpe-t--itawaru .fpe-btn { background: #9a4859; color: #fff;    left: 8.4%; }
#fp-top .fpe-t--tips    .fpe-btn { background: #357553; color: #fff;    left: 9.4%; }

@media (hover: hover) {
	#fp-top .fpe-t:hover .fpe-btn { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .14); }
	#fp-top .fpe-t:hover .fpe-arrow { transform: translateX(4px); }
	#fp-top .fpe-t:hover .fpe-art { transform: scale(1.05) rotate(-2deg); opacity: var(--fpe-art-opacity-hover); }
}
#fp-top .fpe-t:focus-visible { outline: none; }
#fp-top .fpe-t:focus-visible .fpe-btn { outline: 3px solid #333; outline-offset: 3px; }

/* ---------- ご家族・パートナー・同僚の方へ ---------- */
#fp-top .fpe-note { margin-top: 28px; }
#fp-top .fpe-note a {
	display: inline-block;
	padding: 10px 4px;
	color: #236a72;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}
#fp-top .fpe-note a:hover { text-decoration: none; }

/* ---------- スマホ ---------- */
@media (max-width: 820px) {
	#fp-top .fpe { --fpe-radius: 12px; }
	#fp-top .fpe-wall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: auto;
	}
	#fp-top .fpe-t { grid-row: auto; }
	#fp-top .fpe-t--shiru   { grid-column: 1 / -1; height: 400px; }
	#fp-top .fpe-t--ikasu   { grid-column: 1 / -1; height: 260px; }
	#fp-top .fpe-t--itawaru { grid-column: 1;      height: 300px; }
	#fp-top .fpe-t--tips    { grid-column: 2;      height: 300px; }

	#fp-top .fpe-t--shiru .fpe-copy   { font-size: 26px; right: 8%; top: 7%; }
	#fp-top .fpe-t--ikasu .fpe-copy   { font-size: clamp(26px, 8.4cqw, 34px); top: 28px; left: 20px; transform: none; }
	#fp-top .fpe-t--itawaru .fpe-copy { font-size: 17px; left: 14px; top: 20px; }
	#fp-top .fpe-t--tips .fpe-copy    { font-size: 17px; left: 14px; top: 20px; }

	#fp-top .fpe-t--shiru   .fpe-art { width: 62%; bottom: 20%; }
	#fp-top .fpe-t--ikasu   .fpe-art { width: 40%; right: -4%; bottom: -14%; }
	#fp-top .fpe-t--itawaru .fpe-art { width: 72%; left: 14%; bottom: 26%; }
	#fp-top .fpe-t--tips    .fpe-art { width: 72%; left: 14%; bottom: 26%; }

	#fp-top .fpe-btn {
		left: 16px;
		bottom: 16px;
		min-height: 44px;
		padding: 8px 14px;
		gap: 6px;
		font-size: 14px;
		letter-spacing: .02em;
	}
	#fp-top .fpe-no { font-size: 11px; }
	#fp-top .fpe-t--ikasu .fpe-btn { left: 20px; }
	#fp-top .fpe-t--itawaru .fpe-btn,
	#fp-top .fpe-t--tips .fpe-btn { left: 12px; right: 12px; justify-content: center; }
	#fp-top .fpe-note { margin-top: 20px; }
}

/* 「動きを減らす」設定の端末 */
@media (prefers-reduced-motion: reduce) {
	#fp-top .fpe-art,
	#fp-top .fpe-btn,
	#fp-top .fpe-arrow { transition: none; }
	#fp-top .fpe-t:hover .fpe-art { transform: none; }
	#fp-top .fpe-z { animation: none; opacity: 1; }
	#fp-top .fpe-z--2 { display: none; }
}

/* =========================================================
 * おまけ：TOPの検索欄（スマホ）
 * 入力欄（32px）とボタン（52px）の高さがそろっていなかったので、52pxにそろえる。
 * front-page.css より後に読み込まれるので、ここで上書きしています。
 * ========================================================= */
@media (max-width: 820px) {
	#fp-top .fp-search-input {
		height: 52px;
		min-height: 52px;
		box-sizing: border-box;
		align-items: center;
	}
	#fp-top .fp-search-input input {
		align-self: stretch;
		height: auto;
		min-height: 0;
	}
	#fp-top .fp-search-btn {
		height: 52px;
		min-height: 52px;
	}
}