/* TOP専用CSS（lp_full_mockベースのリニューアル版） */
/* 使用画像: top-1.jpg〜top-8.jpg (img/top/), icon01.svg */

.home {
	--ink: #132238;
	--muted: #53657b;
	--blue: #0068d9;
	--blue-dark: #004ea6;
	--orange: #ff7a1a;
	--green: #28a745;
	--line: #dfeaf5;
	--soft: #f5f9ff;
	color: var(--ink);
}

.home .homewrapper * { box-sizing: border-box; }

/* ===== 共通 ===== */
.home section { padding: 86px 30px; }
.home .section-inner { max-width: 1120px; margin: 0 auto; }
.home .center { text-align: center; }
.home .kicker { margin: 0 0 12px; color: var(--orange); font-size: 14px; font-weight: 900; letter-spacing: .04em; }
.home .section-title { margin: 0; font-size: 40px; line-height: 1.35; letter-spacing: 0; color: #10233d; }
.home .section-lead { margin: 22px auto 0; max-width: 920px; color: #344963; font-size: 17px; line-height: 2.05; font-weight: 700; }

.home .btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 54px; padding: 0 25px; border-radius: 999px;
	font-weight: 900; font-size: 15px; border: 1px solid transparent;
	box-shadow: 0 14px 30px rgba(0,64,128,.12); width: auto;
}
.home .btn.primary { color: #fff; background: linear-gradient(135deg, var(--orange), #ff9a34); }
.home .btn.secondary { color: #fff; background: linear-gradient(135deg, var(--blue-dark), var(--blue)); }
.home .btn.outline { color: var(--blue-dark); background: #fff; border-color: rgba(0,104,217,.22); box-shadow: none; }
.home .btn:hover { text-decoration: none; opacity: .92; }

.home .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.home .cta-row.center-cta { justify-content: center; margin-top: 40px; }

/* ===== ヒーロー（メインビジュアル） ===== */
/* 固定ヘッダー(10vh)を避けつつ、上部の余白は最小限に */
.home .hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 80vh;
	background:
		linear-gradient(100deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 40%, rgba(255,255,255,.55) 64%, rgba(255,255,255,.12) 100%),
		url(../img/top/top-1.jpg) center center / cover no-repeat;
}
.home .hero .bgcover { display: none; }

.home .hero-inner {
	width: min(1180px, calc(100% - 8vw));
	margin: 0 auto;
	padding: calc(10vh + 1.4rem) 0 6vh;
	display: grid;
	grid-template-columns: minmax(0, 600px) 1fr;
	align-items: start;
}

.home .eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	margin: 0 0 18px; padding: 9px 14px;
	border: 1px solid rgba(0,104,217,.18); border-radius: 999px;
	color: var(--blue-dark); background: rgba(255,255,255,.78);
	font-size: 15px; font-weight: 900;
	box-shadow: 0 12px 30px rgba(0,70,140,.08);
}
.home .eyebrow::before {
	content: ""; width: 10px; height: 10px; border-radius: 50%;
	background: var(--orange); box-shadow: 0 0 0 6px rgba(255,122,26,.16);
}

.home .hero h1 {
	margin: 0; font-size: 60px; line-height: 1.14; letter-spacing: 0; color: #10233d;
}
.home .hero h1 span { color: var(--orange); }

/* 旧カードの内容をキャッチコピー下に小さく配置 */
.home .hero-note {
	margin-top: 22px;
	padding: 14px 18px;
	background: rgba(255,255,255,.72);
	border: 1px solid rgba(0,104,217,.14);
	border-radius: 10px;
	display: inline-block;
	box-shadow: 0 10px 26px rgba(0,64,128,.08);
}
.home .hero-note-title { margin: 0 0 8px; color: var(--blue-dark); font-size: 15px; font-weight: 900; }
.home .hero-note ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.home .hero-note li {
	position: relative; padding-left: 18px;
	font-size: 13px; font-weight: 800; color: #2d4660;
}
.home .hero-note li::before {
	content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
	width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}

.home .catch-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.home .catch-list span {
	padding: 10px 15px; border-radius: 999px;
	background: rgba(255,255,255,.86); border: 1px solid rgba(0,104,217,.15);
	color: #173a62; font-size: 14px; font-weight: 900;
}

/* ===== このサイトについて ===== */
.home .about {
	background:
		linear-gradient(120deg, rgba(255,255,255,.96), rgba(245,249,255,.94)),
		url(../img/top/top-2.jpg) center center / cover no-repeat;
	background-attachment: fixed;
}
.home .about-layout {
	display: grid; grid-template-columns: minmax(0, 1fr) 360px;
	gap: 34px; align-items: center; text-align: left;
}
.home .about-copy { position: relative; padding: 34px 0 10px; }
.home .about-copy::before {
	content: ""; position: absolute; top: 0; left: 0;
	width: 74px; height: 5px; border-radius: 999px;
	background: linear-gradient(90deg, var(--orange), var(--blue), var(--green));
}
.home .about-copy .section-lead { margin-left: 0; margin-right: 0; max-width: 720px; }

.home .diagnosis-card {
	background: #fff; border: 1px solid rgba(223,234,245,.96); border-radius: 8px;
	padding: 24px; box-shadow: 0 26px 58px rgba(0,64,128,.12);
}
.home .diagnosis-card h3 { margin: 0; color: #10233d; font-size: 22px; line-height: 1.45; }
.home .diagnosis-card p { margin: 10px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.75; font-weight: 700; }
.home .diagnosis-row {
	display: grid; grid-template-columns: 82px 1fr; gap: 12px; align-items: center;
	padding: 13px 0; border-top: 1px solid #e7eef7;
}
.home .diagnosis-row b {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 34px; border-radius: 999px; color: #fff; background: var(--blue); font-size: 12px;
}
.home .diagnosis-row:nth-child(4) b { background: var(--orange); }
.home .diagnosis-row:nth-child(5) b { background: var(--green); }
.home .diagnosis-row span { color: #243952; font-size: 14px; font-weight: 900; line-height: 1.45; }

.home .feature-grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px; margin-top: 34px;
}
.home .feature-card {
	position: relative; overflow: hidden; background: #fff;
	border: 1px solid var(--line); border-radius: 8px;
	padding: 30px 28px 28px; box-shadow: 0 18px 42px rgba(0,64,128,.08); text-align: left;
}
.home .feature-card::before {
	content: attr(data-number); position: absolute; top: -14px; right: 18px;
	color: rgba(0,104,217,.08); font-size: 76px; line-height: 1; font-weight: 900;
}
.home .feature-card img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 16px; }
.home .feature-card h3 { margin: 0 0 10px; color: var(--blue-dark); font-size: 22px; }
.home .feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; font-weight: 700; }
.home .feature-label {
	display: inline-flex; align-items: center; margin-bottom: 12px;
	padding: 6px 10px; border-radius: 999px; color: var(--blue-dark);
	background: #eef6ff; font-size: 12px; font-weight: 900;
}

/* ===== 経営課題別の打ち手（CONTENTS） ===== */
.home .cards { background: var(--soft); }
.home .solution-list { display: grid; gap: 26px; margin-top: 44px; }
.home .solution {
	display: grid; grid-template-columns: 42% 58%; overflow: hidden;
	background: #fff; border: 1px solid var(--line); border-radius: 8px;
	box-shadow: 0 18px 44px rgba(0,64,128,.08);
}
.home .solution.reverse { grid-template-columns: 58% 42%; }
.home .solution.reverse .photo { order: 2; }
.home .photo { min-height: 310px; background-position: center; background-size: cover; }
.home .photo.p1 { background-image: url(../img/top/top-3.jpg); }
.home .photo.p2 { background-image: url(../img/top/top-4.jpg); }
.home .photo.p3 { background-image: url(../img/top/top-5.jpg); }
.home .photo.p4 { background-image: url(../img/top/top-6.jpg); }
.home .photo.p5 { background-image: url(../img/top/top-7.jpg); }
.home .photo.p6 { background-image: url(../img/top/top-8.jpg); }
.home .solution-body { padding: 38px; display: flex; flex-direction: column; justify-content: center; }
.home .solution-body h2 { margin: 0; color: #10233d; font-size: 30px; line-height: 1.35; }
.home .solution-body h3 { margin: 10px 0 0; color: var(--blue-dark); font-size: 18px; line-height: 1.5; }
.home .solution-body p { margin: 18px 0 0; color: #42566f; font-size: 15px; line-height: 1.95; font-weight: 700; }
.home .solution-body .btn { align-self: flex-start; margin-top: 24px; }

/* ===== よくある質問 ===== */
.home .faq-section { background: #eef4fa; }
.home .faqarea { margin-top: 34px; display: grid; gap: 14px; }
.home details.faq {
	background: #fff; border: 1px solid var(--line); border-radius: 8px;
	box-shadow: 0 14px 32px rgba(0,64,128,.06); overflow: hidden;
}
.home details.faq summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 22px 56px 22px 28px; color: var(--blue-dark);
	font-size: 18px; font-weight: 900; line-height: 1.6;
}
.home details.faq summary::-webkit-details-marker { display: none; }
.home details.faq summary::after {
	content: "+"; position: absolute; right: 24px; top: 50%;
	transform: translateY(-50%); font-size: 26px; font-weight: 700; color: var(--blue);
}
.home details.faq[open] summary::after { content: "−"; }
.home details.faq .answer { padding: 0 28px 24px; }
.home details.faq .answer p { margin: 0; color: #42566f; font-size: 14px; line-height: 1.9; font-weight: 700; }

/* ===== inview（共通アニメ）の微調整 ===== */
.home .hero-inner.inview { transform: translateY(2vw); }

/* ===== レスポンシブ ===== */
@media (max-width: 900px) {
	.home section { padding: 64px 20px; }
	.home .hero { min-height: auto; }
	.home .hero-inner { grid-template-columns: 1fr; padding: calc(10vh + 1rem) 0 5vh; }
	.home .hero h1 { font-size: 38px; }
	.home .hero-note { display: block; }
	.home .section-title { font-size: 28px; }
	.home .about-layout { grid-template-columns: 1fr; }
	.home .about { background-attachment: scroll; }
	.home .feature-grid { grid-template-columns: 1fr; }
	.home .solution,
	.home .solution.reverse { grid-template-columns: 1fr; }
	.home .solution.reverse .photo { order: 0; }
	.home .photo { min-height: 200px; }
	.home .solution-body { padding: 28px 24px; }
	.home .solution-body h2 { font-size: 24px; }
}