/* ==========================================================
   業種トップ（.ik-ind-top）・業種ページ（.ik-ind-page）— Figma（マルキンアド 10/29版）「業種別」「業種別_業種」
   棚の色は .ik--industry（オレンジ #FF8441）。共通の部品（knowledge.css）はそのまま使い、違う所だけここで上書きする。
   このファイルは全部のナレッジ画面で読まれるので、上書きは必ず .ik-ind-top / .ik-ind-page の中だけに効かせる
   ========================================================== */

/* ---------- 切り替えバー「業種から探す／課題から探す」（業種ページ・表層課題のページの冒頭の下） ---------- */
.ik-ind-switch { padding: 66px 20px 65px; text-align: center; }
.ik-ind-switch__label { margin: 0 0 18px; font-size: 16px; font-weight: 700; line-height: 24px; }
.ik-ind-switch__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 20px; }
.ik-ind-switch__list li { margin: 0; }
.ik-ind-switch__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 280px;
	height: 70px;
	border: 1px solid var(--ik-ink);
	border-radius: 35px;
	background: #fff;
	color: var(--ik-ink);
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
}
.ik .ik-ind-switch__btn { color: var(--ik-ink); }
.ik .ik-ind-switch__btn.is-on { border-color: var(--ik-shelf); background: var(--ik-shelf); color: #fff; }
.ik .ik-ind-switch__btn:hover { border-color: var(--ik-shelf); }

/* ==========================================================
   業種トップ（固定ページ /knowledge/industry/ の本文に直書きしたHTML ＋ 自動の部品）
   ========================================================== */
.ik-ind-top { overflow-x: hidden; padding-bottom: 50px; }

/* 冒頭: 種別ラベル＋英字の大見出し＋右の写真（写真の位置は共通の .ik-tophead） */
.ik-ind-tophead__label {
	display: block;
	width: fit-content;
	margin: 37px 0 0;
	padding: 0 19px;
	border-radius: 12px;
	background: var(--ik-shelf);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
}
.ik-ind-top .ik-tophead__en { padding-top: 0; margin-top: 2px; font-weight: 300; }

.ik-ind-intro { max-width: 1260px; margin: 122px auto 0; padding: 0 20px; font-size: 20px; line-height: 40px; text-align: center; }

.ik-ind-top .ik-sec { margin-top: 100px; }
.ik-ind-top .ik-ind-intro + .ik-sec { margin-top: 121px; }
.ik-ind-top .ik-sec.ik-ind-more { margin-top: 66px; }
.ik-ind-top .ik-sec.ik-ind-popular { margin-top: 80px; }

/* 一覧の見出し: 線から字までがナレッジトップより14px詰まる */
.ik-ind-top .ik-sechead { padding-top: 26px; margin-bottom: 39px; }
/* 下の2つ（ほかのナレッジ・よく読まれている記事）は見出しが一回り小さい */
.ik-ind-top .ik-ind-sechead--sm { gap: 28px; padding-top: 32px; margin-bottom: 42px; }
.ik-ind-sechead--sm .ik-sechead__en { font-weight: 500; }
.ik-ind-sechead--sm .ik-sechead__ja { font-size: 30px; }

/* ほかのナレッジを見る（4つの棚。いま見ている棚は棚の色で塗る） */
.ik-ind-shelves { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ik-ind-shelf > a,
.ik-ind-shelf > span { display: block; height: 100%; min-height: 178px; border-radius: 20px; padding: 30px 20px; color: var(--ik-ink); text-decoration: none; }
.ik-ind-shelf b { display: block; font-size: 16px; font-weight: 700; line-height: 24px; }
.ik-ind-shelf small { display: block; color: #555; font-size: 12px; line-height: 18px; }
.ik-ind-shelf--own > * { background: #FCEFF3; }
.ik-ind-shelf--note > * { background: #EEF2FC; }
.ik-ind-shelf--basics > * { background: #EAF6EE; }
.ik-ind-shelf--industry > * { background: #FBF3E6; }
.ik-ind-shelf.is-here > * { background: var(--ik-shelf); color: #fff; }
.ik-ind-shelf.is-here small { color: #fff; }
.ik-ind-shelf > a:hover b { color: var(--ik-shelf); }

/* ==========================================================
   業種ページ（投稿タイプ ik_industry の1件表示）
   ========================================================== */
.ik-ind-page { padding-bottom: 21px; }

/* 冒頭: 写真ではなくオレンジのグラデーション。H1 の2行目は副題 */
.ik-ind-hero { background: #FF6A00 var(--ik-hero-img) center / cover no-repeat; padding-top: 186px; }
.ik-ind-hero .ik-hero__label { line-height: 29px; }
.ik-ind-hero__sub { display: block; font-size: 30px; line-height: 55px; }

/* 目次: 記事と少し違う（ラベルの角丸・1列目の字下げと幅・折り返した行の行送り30px・下の余白） */
.ik-ind-page .ik-toc { padding-bottom: 43px; }
.ik-ind-page .ik-toc__label { border-radius: 9.5px; }
.ik-ind-page .ik-toc__cols ul:first-child { padding: 0 100px 0 12px; }
.ik-ind-page .ik-toc__cols ul + ul { margin-left: 12px; }
.ik-ind-page .ik-toc li { padding: 7.5px 0; line-height: 30px; }

/* 章の見出し（線から字までが記事より8px詰まる・章と章の間は線まで120px） */
.ik-ind-page .ik-content h2 { margin: 120px 0 42px; }
.ik-ind-page .ik-content > h2:first-child { margin-top: 120px; }

/* アイコネクトの見解の下の note へのリンク */
.ik-ind-page .ik-content .ik-ind-note { margin-top: 30px; }

/* 顧客が、検討を始めるきっかけ（カード3列） */
.ik-ind-page .ik-content .ik-ind-moments { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ik-ind-page .ik-content .ik-ind-moment { margin: 0; border-radius: 20px; background: var(--ik-bg); padding: 30px 30px 30px; line-height: 30px; }
.ik-ind-page .ik-content .ik-ind-moment__title { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid #C4C4C4; font-size: 18px; font-weight: 700; line-height: 30px; }
.ik-ind-moment__dl { margin: 0; }
.ik-ind-moment__dl dt {
	width: fit-content;
	margin: 0;
	border: 1px solid #8F8F8F;
	border-radius: 13px;
	padding: 0 10px;
	color: #8F8F8F;
	font-size: 12px;
	font-weight: 400;
	line-height: 24px;
}
.ik-ind-moment__dl dd { margin: 4px 0 12px; font-size: 14px; line-height: 26px; }
.ik-ind-moment__dl dt.ik-ind-moment__look { margin-top: 21px; border-color: var(--ik-shelf); border-radius: 14.5px; color: var(--ik-shelf); line-height: 27px; }
.ik-ind-moment__dl dd.ik-ind-moment__look { margin: 1px 0 0; font-size: 16px; line-height: 30px; }

/* よくある課題: 表層課題の見出し（オレンジの太い縦線＋一文） */
.ik-ind-page .ik-content h3.ik-ind-issue { margin: 82px 0 43px; padding-left: 40px; font-size: 26px; line-height: 36px; }
.ik-ind-page .ik-content h2 + h3.ik-ind-issue { margin-top: 96px; }
.ik-ind-page .ik-content h3.ik-ind-issue::before { top: -2px; width: 20px; height: 70px; }
.ik-ind-issue__voice { display: block; margin-top: 4px; font-size: 16px; font-weight: 400; line-height: 24px; }

/* 課題カード（2列・解決策まで全部見せる） */
.ik-ind-page .ik-content .ik-ind-cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; }
.ik-ind-page .ik-content .ik-ind-card {
	display: flex;
	flex-direction: column;
	min-height: 469px;
	margin: 0;
	border: 1px solid #C6C6C6;
	border-radius: 19.5px;
	background: #fff;
	padding: 39px 29px 30px 30px;
	line-height: 30px;
}
.ik-ind-page .ik-content .ik-ind-card p { margin: 0; }
.ik-ind-page .ik-content .ik-ind-card__title { font-size: 18px; font-weight: 700; line-height: 30px; }
.ik-ind-page .ik-content .ik-ind-card p.ik-ind-card__now { margin-top: 19px; color: #8F8F8F; font-size: 14px; line-height: 24px; }
.ik-ind-card__sol { margin: 20px 0 0; }
.ik-ind-card__label {
	display: block;
	width: fit-content;
	margin: 0 0 5px 1px;
	border: 1px solid var(--ik-shelf);
	border-radius: 14.5px;
	padding: 0 9px;
	color: var(--ik-shelf);
	font-size: 12px;
	line-height: 27px;
}
.ik-ind-page .ik-content .ik-ind-card__sol p { font-size: 16px; line-height: 30px; }
.ik-ind-page .ik-content .ik-ind-card__more { align-self: flex-end; margin-top: auto; color: var(--ik-ink); text-decoration: none; }
.ik-ind-page .ik-content .ik-ind-card__sol + .ik-ind-card__more { margin-top: auto; }
.ik-ind-page .ik-content .ik-ind-card__more:hover { color: var(--ik-shelf); border-color: var(--ik-shelf); }
.ik-ind-card__sol { margin-bottom: 30px; }

/* アイコネクトで相談できること（線で区切った行・名前＋説明） */
.ik-ind-page .ik-content .ik-ind-services { list-style: none; margin: 44px 0 0; padding: 0; border-top: 1px solid var(--ik-ink); }
.ik-ind-page .ik-content .ik-ind-services li { margin: 0; border-bottom: 1px solid var(--ik-ink); }
.ik-ind-page .ik-content .ik-ind-services a,
.ik-ind-services__nolink { position: relative; display: block; padding: 20px 48px 20px 0; color: var(--ik-ink); text-decoration: none; font-size: 18px; font-weight: 700; line-height: 30px; }
.ik-ind-page .ik-content .ik-ind-services a::after { content: "→"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 400; }
.ik-ind-services__desc { margin-left: 30px; font-size: 16px; font-weight: 400; }
.ik-ind-page .ik-content .ik-ind-services a:hover strong { color: var(--ik-shelf); }

/* 導入事例（3列・間に細い縦線） */
.ik-ind-page .ik-content .ik-ind-cases { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: 357.5fr 385fr 357.5fr; }
.ik-ind-page .ik-content .ik-ind-case { margin: 0; padding: 10px 27.5px 5px; line-height: 24px; }
.ik-ind-page .ik-content .ik-ind-case:first-child { padding-left: 0; }
.ik-ind-page .ik-content .ik-ind-case:last-child { padding-right: 0; }
.ik-ind-page .ik-content .ik-ind-case + .ik-ind-case { border-left: 1px solid #CCC; }
.ik-ind-page .ik-content .ik-ind-case a { display: block; color: var(--ik-ink); text-decoration: none; }
.ik-ind-case__img { display: block; aspect-ratio: 330 / 218; background: #DDD; }
.ik-ind-case__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ik-ind-case__tag {
	display: block;
	width: fit-content;
	margin-top: 20px;
	border: 1px solid rgba(0, 0, 0, .5);
	border-radius: 14px;
	padding: 0 15px;
	color: rgba(0, 0, 0, .5);
	font-size: 12px;
	line-height: 26px;
}
.ik-ind-case__company { display: block; margin-top: 8px; color: rgba(0, 0, 0, .3); font-size: 12px; font-weight: 700; line-height: 18px; }
.ik-ind-case__title { display: block; font-size: 14px; font-weight: 700; line-height: 24px; }
.ik-ind-case__tag + .ik-ind-case__title { margin-top: 8px; }
.ik-ind-case a:hover .ik-ind-case__title { color: var(--ik-shelf); }

/* ---------- スマートフォン ---------- */
@media (max-width: 900px) {
	.ik-ind-switch { padding: 36px 16px 8px; }
	.ik-ind-switch__label { margin-bottom: 14px; }
	.ik-ind-switch__list { gap: 10px; }
	.ik-ind-switch__list li { flex: 1 1 0; max-width: 220px; }
	.ik-ind-switch__btn { width: auto; height: 52px; border-radius: 26px; font-size: 15px; }

	/* 業種トップ */
	.ik-ind-top { padding-bottom: 40px; }
	.ik-ind-tophead__label { margin-top: 0; }
	.ik-ind-intro { margin-top: 40px; padding: 0 16px; font-size: 16px; line-height: 30px; text-align: left; }
	.ik-ind-intro br { display: none; }
	.ik-ind-top .ik-sec,
	.ik-ind-top .ik-ind-intro + .ik-sec,
	.ik-ind-top .ik-sec.ik-ind-more,
	.ik-ind-top .ik-sec.ik-ind-popular { margin-top: 60px; }
	.ik-ind-top .ik-ind-sechead--sm { gap: 14px; }
	.ik-ind-sechead--sm .ik-sechead__ja { font-size: 22px; }
	.ik-ind-shelves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ik-ind-shelf > a,
	.ik-ind-shelf > span { min-height: 0; padding: 20px 16px; }

	/* 業種ページ */
	.ik-ind-hero { padding-top: 130px; }
	.ik-ind-hero__sub { font-size: 20px; line-height: 32px; margin-top: 4px; }
	.ik-ind-page .ik-toc { padding-bottom: 30px; }
	.ik-ind-page .ik-toc__cols ul:first-child { padding: 0; }
	.ik-ind-page .ik-toc__cols ul + ul { margin-left: 0; }
	.ik-ind-page .ik-toc li { padding: 3px 0; }
	.ik-ind-page .ik-content h2 { margin-top: 70px; }
	.ik-ind-page .ik-content > h2:first-child { margin-top: 50px; }
	.ik-ind-page .ik-content .ik-ind-moments { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ik-ind-page .ik-content .ik-ind-moment { padding: 24px 20px; }
	.ik-ind-page .ik-content h3.ik-ind-issue,
	.ik-ind-page .ik-content h2 + h3.ik-ind-issue { margin: 56px 0 24px; padding-left: 24px; font-size: 20px; line-height: 30px; }
	.ik-ind-page .ik-content h3.ik-ind-issue::before { top: 0; width: 10px; height: 100%; }
	.ik-ind-issue__voice { font-size: 14px; line-height: 22px; }
	.ik-ind-page .ik-content .ik-ind-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
	.ik-ind-page .ik-content .ik-ind-card { min-height: 0; padding: 26px 20px 22px; }
	.ik-ind-page .ik-content .ik-ind-card__title { font-size: 17px; line-height: 28px; }
	.ik-ind-card__sol { margin-bottom: 20px; }
	.ik-ind-page .ik-content .ik-ind-services a,
	.ik-ind-services__nolink { padding: 16px 32px 16px 0; font-size: 16px; line-height: 26px; }
	.ik-ind-services__desc { display: block; margin: 4px 0 0; font-size: 14px; line-height: 22px; }
	.ik-ind-page .ik-content .ik-ind-cases { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
	.ik-ind-page .ik-content .ik-ind-case,
	.ik-ind-page .ik-content .ik-ind-case:first-child,
	.ik-ind-page .ik-content .ik-ind-case:last-child { padding: 0 0 24px; }
	.ik-ind-page .ik-content .ik-ind-case + .ik-ind-case { border-left: 0; border-top: 1px solid #CCC; padding-top: 24px; }
}