/* ============================================================
 * PC Terrace 新トップページ
 * すべて .pctfp 配下にスコープしてあります。
 * テーマ側のCSSには一切影響しません。
 * 配色・角丸・余白は現行サイトから採取した値をそのまま使用。
 * ============================================================ */

.pctfp {
	--pctfp-green: #0B7A4E;
	--pctfp-green-bright: #10A05C;
	--pctfp-green-deep: #22352C;
	--pctfp-ink: #1B2A22;
	--pctfp-muted: #66766C;
	--pctfp-line: #E2EAE5;
	--pctfp-tint: #F1F7F3;
	--pctfp-tint2: #E8F2EC;
	--pctfp-radius: 14px;

	color: var(--pctfp-ink);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

.pctfp *,
.pctfp *::before,
.pctfp *::after { box-sizing: border-box; }

.pctfp img { max-width: 100%; height: auto; }

.pctfp .pctfp-noimg {
	display: block; padding: 12px; font-size: 12px; color: #b00;
	background: #fff4f4; border: 1px dashed #e0b4b4; text-align: center;
}

/* 中央寄せの共通コンテナ */
.pctfp-sec {
	padding: 44px 16px;
}
.pctfp-sec > *,
.pctfp-hero > * {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

.pctfp .pctfp-eyebrow {
	font-size: 11px; letter-spacing: .16em; font-weight: 700;
	color: var(--pctfp-green); text-transform: uppercase; margin-bottom: 10px;
}
.pctfp h1, .pctfp h2 { letter-spacing: -.01em; font-weight: 800; }
.pctfp .pctfp-sec h2 { font-size: 24px; line-height: 1.45; margin: 0 auto; }
.pctfp .pctfp-lead { font-size: 14.5px; color: var(--pctfp-muted); margin-top: 10px; }

/* ---------- HERO ---------- */
.pctfp-herophoto { position: relative; line-height: 0; }
.pctfp-herophoto img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }
.pctfp-herophoto-tx {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 16px 18px;
	background: linear-gradient(180deg, rgba(12,22,17,0) 0%, rgba(12,22,17,.42) 38%, rgba(12,22,17,.86) 100%);
}
.pctfp .pctfp-herophoto-tx h1 {
	max-width: 1080px;
	margin: 0 auto; margin-left: auto; margin-right: auto;
	color: #fff; font-size: 27px; line-height: 1.42; letter-spacing: -.02em;
	text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.pctfp .pctfp-herophoto-tx h1 em { font-style: normal; color: #7FE0AC; display: block; }

.pctfp-hero {
	background: linear-gradient(180deg, #F6FAF7 0%, var(--pctfp-tint) 100%);
	padding: 26px 16px 38px;
}
.pctfp .pctfp-hero p { font-size: 14.5px; color: #4A5A51; max-width: 1080px; margin: 0 auto; }

/* 検索窓 */
.pctfp-search { margin-top: 22px; position: relative; }
.pctfp-search input[type="search"] {
	width: 100%; font-size: 16px; padding: 16px 52px 16px 18px;
	border: 2px solid var(--pctfp-green); border-radius: 12px; background: #fff;
	font-family: inherit; color: var(--pctfp-ink); -webkit-appearance: none; appearance: none;
}
.pctfp-search input::placeholder { color: #93A29A; }
.pctfp-search button {
	position: absolute; right: 6px; top: 6px; bottom: 6px; width: 44px;
	border: 0; background: var(--pctfp-green); border-radius: 9px;
	color: #fff; font-size: 17px; cursor: pointer; line-height: 1;
}
.pctfp .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.pctfp-chips-label { font-size: 11.5px; color: var(--pctfp-muted); margin-top: 16px; }
.pctfp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pctfp-chips a {
	font-size: 12.5px; padding: 7px 13px; border-radius: 999px;
	background: #fff; border: 1px solid var(--pctfp-line); color: #3D4D44; text-decoration: none;
}

/* ---------- 症状タイル ---------- */
.pctfp-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px;
}
.pctfp-tile {
	border: 1px solid var(--pctfp-line); border-radius: var(--pctfp-radius); overflow: hidden;
	text-decoration: none; color: inherit; background: #fff; display: block;
}
.pctfp-tile .pctfp-ph { aspect-ratio: 16/10; background: var(--pctfp-tint2); position: relative; overflow: hidden; }
.pctfp-tile .pctfp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pctfp-tile .pctfp-tx { padding: 11px 12px 13px; }
.pctfp-tile .pctfp-tx b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.pctfp-tile .pctfp-tx span { display: block; font-size: 11.5px; color: var(--pctfp-muted); margin-top: 3px; line-height: 1.5; }

.pctfp-diag {
	display: flex; align-items: center; gap: 13px; margin-top: 14px;
	border: 1.5px solid var(--pctfp-green); background: #F3FAF6; border-radius: var(--pctfp-radius);
	padding: 15px 16px; text-decoration: none; color: inherit;
	max-width: 1080px; margin-left: auto; margin-right: auto;
}
.pctfp-q {
	width: 42px; height: 42px; border-radius: 50%; background: var(--pctfp-green); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; font-weight: 700; flex-shrink: 0;
}
.pctfp-diag b { display: block; font-size: 15px; font-weight: 700; }
.pctfp-diag span { font-size: 12px; color: var(--pctfp-muted); }
.pctfp-diag em { margin-left: auto; font-style: normal; color: var(--pctfp-green); }

/* ---------- 初めての方へ ---------- */
.pctfp-start { background: var(--pctfp-tint); }
.pctfp-steps { display: grid; gap: 12px; margin-top: 12px; }
.pctfp-step {
	display: flex; gap: 14px; background: #fff; border: 1px solid var(--pctfp-line);
	border-radius: var(--pctfp-radius); padding: 16px; text-decoration: none; color: inherit;
}
.pctfp-n {
	width: 34px; height: 34px; border-radius: 50%; background: var(--pctfp-green); color: #fff;
	font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pctfp-step small { font-size: 11.5px; color: var(--pctfp-green); font-weight: 700; display: block; }
.pctfp-step b { font-size: 16px; font-weight: 700; display: block; margin: 2px 0 4px; letter-spacing: -.01em; }
.pctfp-step p { font-size: 12.5px; color: var(--pctfp-muted); line-height: 1.65; margin: 0; }

/* ---------- 無料ツール（濃色） ---------- */
.pctfp-tools { background: var(--pctfp-green-deep); color: #fff; }
.pctfp-tools .pctfp-eyebrow { color: #8CC7A6; }
.pctfp-tools h2 { color: #fff; }
.pctfp-tools .pctfp-lead { color: #B4C7BC; }
.pctfp-toolwrap { display: grid; gap: 14px; margin-top: 14px; }
.pctfp-tool { background: #fff; color: var(--pctfp-ink); border-radius: var(--pctfp-radius); padding: 20px 18px; }
.pctfp-tool small { font-size: 11.5px; color: var(--pctfp-green); font-weight: 700; }
.pctfp-tool b { display: block; font-size: 18px; font-weight: 800; margin: 5px 0 7px; letter-spacing: -.01em; }
.pctfp-tool p { font-size: 13px; color: var(--pctfp-muted); line-height: 1.7; margin: 0; }
.pctfp-tool a {
	display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700;
	color: var(--pctfp-green); text-decoration: none;
}

/* ---------- 最新の記事 ---------- */
.pctfp-cards { display: grid; gap: 16px; margin-top: 16px; }
.pctfp-card {
	border: 1px solid var(--pctfp-line); border-radius: var(--pctfp-radius);
	overflow: hidden; background: #fff; text-decoration: none; color: inherit; display: block;
}
.pctfp-card .pctfp-ph { aspect-ratio: 16/9; background: var(--pctfp-tint2); overflow: hidden; }
.pctfp-card .pctfp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pctfp-bd { padding: 15px 16px 17px; }
.pctfp-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.pctfp-tag {
	font-size: 11.5px; font-weight: 700; color: var(--pctfp-green);
	background: var(--pctfp-tint2); padding: 4px 10px; border-radius: 6px;
}
.pctfp-date { font-size: 11.5px; color: var(--pctfp-muted); }
.pctfp-card b { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.55; letter-spacing: -.01em; }
.pctfp-card p { font-size: 13px; color: var(--pctfp-muted); margin-top: 7px; line-height: 1.7; }
.pctfp-seeall {
	display: block; text-align: center; margin: 18px auto 0; padding: 13px; max-width: 1080px;
	border: 1px solid var(--pctfp-line); border-radius: 10px;
	font-size: 14px; font-weight: 700; color: var(--pctfp-green); text-decoration: none;
}

/* ---------- 運営者について ---------- */
.pctfp-about { background: var(--pctfp-tint); }
.pctfp-about p { font-size: 14px; color: #41524A; margin-top: 12px; }
.pctfp-badge {
	display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--pctfp-green);
	border: 1px solid var(--pctfp-green); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
.pctfp-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.pctfp-about-grid figure {
	margin: 0; border-radius: var(--pctfp-radius); overflow: hidden;
	background: #DCEAE1; position: relative;
}
.pctfp-about-grid img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.pctfp-about-grid figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 8px;
	font-size: 11.5px; font-weight: 700; color: #fff; letter-spacing: .02em;
	background: linear-gradient(180deg, rgba(12,22,17,0), rgba(12,22,17,.72));
}

/* ---------- 操作フィードバック ---------- */
@media (prefers-reduced-motion: no-preference) {
	.pctfp-tile, .pctfp-step, .pctfp-card { transition: transform .18s ease; }
	.pctfp-tile:active, .pctfp-step:active, .pctfp-card:active { transform: scale(.985); }
}
.pctfp a:focus-visible,
.pctfp button:focus-visible,
.pctfp input:focus-visible { outline: 3px solid var(--pctfp-green-bright); outline-offset: 2px; }

/* ============================================================
 * タブレット以上
 * ============================================================ */
@media (min-width: 768px) {
	.pctfp-sec { padding: 64px 24px; }
	.pctfp-hero { padding: 34px 24px 48px; }
	.pctfp .pctfp-sec h2 { font-size: 30px; }
	.pctfp-herophoto img { aspect-ratio: 21/9; max-height: 520px; }
	.pctfp-herophoto-tx { padding: 40px 24px 32px; }
	.pctfp .pctfp-herophoto-tx h1 { font-size: 40px; }

	.pctfp-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
	.pctfp-tile .pctfp-tx b { font-size: 15px; }

	.pctfp-steps { grid-template-columns: repeat(3, 1fr); gap: 14px; }
	.pctfp-step { flex-direction: column; }

	.pctfp-toolwrap { grid-template-columns: repeat(2, 1fr); }
	.pctfp-cards { grid-template-columns: repeat(3, 1fr); }
	.pctfp-about-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
}

/* ============================================================
 * 下層ページの写真ヒーロー（初めての方へ／PC Terraceとは）
 * ============================================================ */
.pctfp-pagehero {
	margin: 0 0 28px; padding: 0;
	border-radius: var(--pctfp-radius, 14px);
	overflow: hidden; line-height: 0; background: #E8F2EC;
}
.pctfp-pagehero img {
	width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover;
}
@media (min-width: 768px) {
	.pctfp-pagehero { margin-bottom: 36px; }
	.pctfp-pagehero img { aspect-ratio: 21/9; }
}