/* ==========================================================
   iConnect Knowledge — Figma（マルキンアド 10/29版）の値に合わせる
   すべて .ik の中だけに効かせる。テーマの html{font-size:10px} に依存しないよう px で書く
   ========================================================== */

.ik {
	--ik-shelf: #10B8A2;          /* 棚の色：基礎知識＝緑。業種別は .ik--industry で上書き */
	--ik-ink: #000;
	--ik-gray: #6D6D6D;
	--ik-line: #D9D9D9;
	--ik-rule: #808080;
	--ik-bg: #F5F5F5;
	--ik-th: #787878;
	--ik-pillar: #B171C8;
	color: var(--ik-ink);
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 30px;
	text-align: left; /* テーマの body は中央揃え */
}
.ik--industry { --ik-shelf: #FF8441; }
.ik *, .ik *::before, .ik *::after { box-sizing: border-box; }
.ik h1, .ik h2, .ik h3, .ik h4, .ik-toc li, .ik-card__title { word-break: auto-phrase; } /* 見出しを文節で折り返す（対応ブラウザのみ） */
.ik h1, .ik h2, .ik h3, .ik h4, .ik p, .ik li, .ik th, .ik td { font-family: inherit; } /* テーマの見出しは英数字が Myriad Pro になる。Figma は全部 Noto Sans JP */
.ik a { color: inherit; }

/* ---------- 冒頭（写真の上の白抜きH1） ---------- */
.ik-hero {
	position: relative;
	min-height: 500px;
	padding: 180px 20px 60px;
	/* Figma: 2009px角の画像を 1500×500 の枠に x-152 / y-582 で置いている */
	background: #0E7FD8 var(--ik-hero-img) 30% 38.6% / 134% auto no-repeat;
	color: #fff;
}
.ik-hero__in { width: min(1260px, 100% - 120px); margin: 0 auto; } /* 左右の余白はヘッダーのロゴにそろえる */
.ik-hero__title { max-width: 820px; }
.ik-hero__label {
	display: inline-block;
	border: 1px solid #fff;
	border-radius: 999px;
	padding: 0 14px;
	font-size: 16px;
	line-height: 30px;
}
.ik-hero__title {
	margin: 15px 0 15px;
	font-size: 37px;
	font-weight: 700;
	line-height: 55px;
	color: #fff;
	text-wrap: balance;
}
.ik-hero__meta { margin: 0; font-size: 16px; line-height: 30px; }
.ik-hero__meta a { color: #fff; text-decoration: none; margin-right: 1em; }

/* ---------- 本文の枠 ---------- */
.ik-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.ik-lead { margin: 54px 0 50px; font-size: 18px; line-height: 38px; }

/* ---------- 目次 ---------- */
.ik-toc {
	background: var(--ik-bg);
	border-radius: 30px;
	padding: 50px 80px 60px;
}
.ik-toc__label {
	display: inline-block;
	margin: 0 0 20px;
	border: 1px solid var(--ik-ink);
	border-radius: 999px;
	padding: 0 12px;
	font-size: 16px;
	line-height: 30px;
}
.ik-toc__cols { display: grid; grid-template-columns: 1fr 1fr; }
.ik-toc__cols ul { list-style: none; margin: 0; padding: 0 40px 0 0; }
.ik-toc__cols ul + ul { border-left: 1px solid var(--ik-rule); padding: 0 0 0 100px; }
.ik-toc li { font-size: 18px; font-weight: 700; line-height: 45px; }
.ik-toc li a { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 本文 ---------- */
.ik-content > * { margin-top: 0; margin-bottom: 30px; }
.ik-content p { font-size: 16px; line-height: 30px; }
.ik-content a { color: var(--ik-shelf); text-decoration: underline; text-underline-offset: 3px; }
/* 内部リンクの先がまだ公開されていないときは文字だけ（includes/internal-links.php） */
.ik-content .ik-ilink.is-pending { color: inherit; text-decoration: none; }
/* 内部リンクの前に小さく「記事」と出す（公開済み・未公開とも） */
.ik-content .ik-ilink::before { content: "記事"; display: inline-block; margin: 0 4px 0 2px; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; font-size: 11px; line-height: 1.5; vertical-align: 2px; text-decoration: none; }
.ik-content .ik-ilink.is-pending::before { color: var(--ik-gray); }
.ik-content .ik-ilink.is-issue::before { content: "課題"; }
.ik-content .ik-ilink.is-industry::before { content: "業種"; }
/* 関連記事などの行のリストは見出しで分かるので札を付けない */
.ik-content .ik-linklist .ik-ilink::before { content: none; }
.ik-content strong { font-weight: 700; }

.ik-content h2,
.ik-issues h2 {
	margin: 112px 0 44px;
	padding: 18px 24px;
	background: color-mix(in srgb, var(--ik-shelf) 10%, #fff);
	border-left: 8px solid var(--ik-shelf);
	font-size: 30px;
	font-weight: 700;
	line-height: 45px;
	text-wrap: balance;
}
.ik-content h3 {
	position: relative;
	margin: 83px 0 40px;
	padding-left: 40px;
	font-size: 26px;
	font-weight: 700;
	line-height: 36px;
}
.ik-content h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 14px;
	height: 34px;
	background: var(--ik-shelf);
}
.ik-content h4 { margin: 50px 0 16px; color: color-mix(in srgb, var(--ik-shelf) 82%, #000); font-size: 22px; font-weight: 700; line-height: 34px; }

.ik-content ul,
.ik-content ol { padding-left: 1.6em; }
.ik-content li { margin-bottom: 8px; line-height: 30px; }

/* 表 */
.ik-content .wp-block-table { overflow-x: auto; margin: 31px 0 29px; }
/* 3列の表は Figma の 20%・60%・20%（219・661・220px） */
.ik-content table:has(thead th:nth-child(3):last-child) { table-layout: fixed; }
.ik-content table:has(thead th:nth-child(3):last-child) th:nth-child(1) { width: 20%; }
.ik-content table:has(thead th:nth-child(3):last-child) th:nth-child(2) { width: 60%; }
.ik-content table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 20px; }
.ik-content th,
.ik-content td { border: 1px solid var(--ik-line); padding: 15px 16px; text-align: left; vertical-align: middle; } /* 1行の行の高さ 51px */
.ik-content thead th { background: var(--ik-th); color: #fff; font-size: 16px; font-weight: 700; border-color: var(--ik-th); }
.ik-content tbody tr:nth-child(even) td { background: var(--ik-bg); }
.ik-content figure.wp-block-table { border: 0; }

/* アイコネクトの見解 */
.ik-content .ik-view {
	margin: 30px 0 60px;
	border: 2px solid var(--ik-shelf);
	border-radius: 20px;
	padding: 50px 80px 40px;
}
.ik-content .ik-view__label {
	display: inline-block;
	margin: 0 0 16px;
	border: 1px solid var(--ik-shelf);
	border-radius: 10px;
	padding: 0 10px;
	color: var(--ik-shelf);
	font-size: 16px;
	line-height: 30px;
}
.ik-content .ik-view__title { margin: 0 0 24px; padding: 0; font-size: 26px; font-weight: 700; line-height: 38px; }
.ik-content .ik-view__title::before { content: none; }
.ik-content .ik-view p:last-child { margin-bottom: 0; }

/* 図の枠（図解は本文確定後に差し込む） */
.ik-content .ik-figure {
	margin: 50px 0;
	background: var(--ik-bg);
	border-radius: 30px;
	padding: 50px 80px;
}
.ik-content .ik-figure--todo { color: var(--ik-gray); text-align: center; font-size: 14px; }
/* 図解の画像（白地のPNG）。グレーの枠の中に白いカードとして置く */
.ik-content .ik-figure--img { padding: 40px; }
.ik-content .ik-figure--img img { display: block; width: 100%; height: auto; border-radius: 16px; background: #fff; }

/* よくある質問 */
.ik-content .ik-faq { margin: 0; }
.ik-content .ik-faq__item { border-bottom: 1px solid var(--ik-line); padding: 30px 0; }
.ik-content .ik-faq__item:first-child { padding-top: 0; }
.ik-content .ik-faq__q,
.ik-content .ik-faq__a { position: relative; margin: 0; padding-left: 70px; min-height: 50px; }
.ik-content .ik-faq__q { display: flex; align-items: center; font-size: 18px; font-weight: 700; line-height: 30px; margin-bottom: 10px; }
.ik-content .ik-faq__q::before,
.ik-content .ik-faq__a::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}
.ik-content .ik-faq__q::before { content: "Q"; background: var(--ik-shelf); color: #fff; }
.ik-content .ik-faq__a::before { content: "A"; background: #CCC; color: var(--ik-ink); }
.ik-content .ik-faq__a { padding-top: 10px; }

/* 線で区切った行のリスト（noteの欄・関係する課題） */
.ik-content .ik-linklist,
.ik-rows { list-style: none; margin: 40px 0; padding: 0; border-top: 1px solid #333; }
.ik-content .ik-linklist li,
.ik-rows li { margin: 0; border-bottom: 1px solid #333; }
.ik-content .ik-linklist a,
.ik-rows a {
	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-content .ik-linklist a::after,
.ik-rows a::after { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--ik-gray); font-weight: 400; }
.ik-content .ik-linklist a::after { content: "↗"; }
.ik-rows a::after { content: "→"; }
.ik-content .ik-linklist a:hover,
.ik-rows a:hover { color: var(--ik-shelf); }
/* 行のリストで、リンク先がまだ公開されていない行（includes/internal-links.php）。リンクの行と同じ高さで灰色、「」は付けない */
.ik-content .ik-linklist .ik-ilink.is-pending { display: block; padding: 20px 48px 20px 0; color: var(--ik-gray); font-size: 18px; font-weight: 700; line-height: 30px; }
.ik-content .ik-linklist .ik-ilink.is-pending .ik-q { display: none; }

/* ---------- 関連する記事 ---------- */
.ik-related { max-width: 1240px; margin: 97px auto 120px; padding: 0 20px; }
.ik-sechead { display: flex; align-items: baseline; gap: 18px; margin-bottom: 44px; padding-top: 40px; border-top: 1px solid #333; }
.ik-sechead__en { color: #888; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.ik-sechead__ja { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.3; }
.ik-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ik-card a { display: block; height: 100%; border: 1px solid var(--ik-line); border-radius: 20px; overflow: hidden; text-decoration: none; background: #fff; }
.ik-card__img { display: block; aspect-ratio: 387 / 225; background: var(--ik-bg); }
.ik-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ik-card__body { display: block; padding: 16px 20px 24px; }
.ik-card__pillar { display: inline-block; margin-bottom: 4px; font-size: 10px; font-weight: 700; line-height: 18px; }
.ik-card__pillar::before { content: "●"; color: var(--ik-pillar); font-size: 8px; margin-right: 2px; }
.ik-card__title { display: block; font-size: 15px; font-weight: 700; line-height: 25px; }

/* ==========================================================
   ナレッジトップ（固定ページの本文に直書きしたHTML ＋ 自動の部品）
   ========================================================== */
.ik--top { overflow-x: hidden; padding-bottom: 196px; }
.ik-more {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ik-ink);
	color: var(--ik-ink);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
}
.ik-more::after { content: "→"; font-size: 13px; }
.ik-more--out::after { content: "↗"; }

/* 冒頭（英字の大見出し＋右の写真） */
.ik-tophead { position: relative; min-height: 427px; padding-top: 157px; }
.ik-tophead__in { width: min(1300px, 100% - 160px); margin: 0 auto; } /* 左右の余白はヘッダーのロゴにそろえる */
.ik-tophead__en { margin: 0; font-size: clamp(56px, 6vw, 90px); font-weight: 100; line-height: 1; letter-spacing: 0; padding-top: 70px; }
.ik-tophead__ja { margin: 22px 0 0; font-size: 20px; font-weight: 400; line-height: 30px; }
.ik-tophead__img { position: absolute; right: 0; top: 157px; width: 52%; max-width: 780px; height: 270px; }
.ik-tophead__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 紹介の帯 */
.ik-intro {
	margin-top: 120px;
	min-height: 560px;
	display: flex;
	align-items: center;
	background: var(--ik-bg) var(--ik-intro-img) right center / auto 100% no-repeat;
}
.ik-intro__in { width: 100%; max-width: 1300px; margin: 0 auto; padding-left: 43px; }
.ik-intro__title { margin: 0 0 30px; font-size: 37px; font-weight: 700; line-height: 60px; }
.ik-intro__text { margin: 0; font-size: 20px; line-height: 40px; }

/* 4つの入口（縦軸＝体系知／実践知、横軸＝独自論／一般論） */
.ik-entries { position: relative; max-width: 1300px; margin: 0 auto; padding: 106px 50px 0; }
.ik-axis { position: absolute; margin: 0; color: #C6C6C6; font-size: 20px; font-weight: 700; line-height: 24px; }
.ik-axis--top { top: 116px; left: 50%; transform: translateX(-50%); }
.ik-axis--bottom { bottom: -50px; left: 50%; transform: translateX(-50%); }
.ik-axis--left, .ik-axis--right { top: calc(50% + 31px); width: 20px; transform: translateY(-25%); writing-mode: vertical-rl; letter-spacing: 0; }
.ik-axis--left { left: 6px; }
.ik-axis--right { right: -7px; }
.ik-entries__grid { list-style: none; margin: 37px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ik-entry { position: relative; min-height: 280px; border-radius: 20px; padding: 66px 40px 40px 194px; }
.ik-entry--own { background: #FCEFF3; }
.ik-entry--note { background: #EEF2FC; }
.ik-entry--basics { background: #EAF6EE; }
.ik-entry--industry { background: #FBF3E6; }
.ik-entry__icon { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); width: auto; max-width: 110px; max-height: 120px; }
.ik-entry h3 { margin: 0 0 14px; padding: 0; font-size: 22px; font-weight: 700; line-height: 32px; }
.ik-entry h3::before { content: none; }
.ik-entry p { margin: 0 0 16px; font-size: 16px; line-height: 30px; }
.ik-entry .ik-more { position: absolute; right: 54px; bottom: 62px; }

/* 4つの入口を詰めた版（各一覧の下の「ほかのナレッジを見る」）。並び・アイコン・題名はトップと同じ。いま見ている棚は塗る */
.ik-other { margin-top: 120px; }
.ik-sechead--sm .ik-sechead__en { font-weight: 500; }
.ik-sechead--sm .ik-sechead__ja { font-size: 30px; }
.ik-entries--compact { max-width: none; padding: 36px 40px; }
.ik-entries--compact .ik-axis { font-size: 15px; line-height: 20px; }
.ik-entries--compact .ik-axis--top { top: 6px; }
.ik-entries--compact .ik-axis--bottom { bottom: 6px; }
.ik-entries--compact .ik-axis--left, .ik-entries--compact .ik-axis--right { top: 50%; transform: translateY(-50%); }
.ik-entries--compact .ik-axis--left { left: 8px; }
.ik-entries--compact .ik-axis--right { right: 8px; }
.ik-entries--compact .ik-entries__grid { margin: 0; gap: 16px; }
.ik-entries--compact .ik-entry { min-height: 0; padding: 24px 28px 22px 116px; }
.ik-entries--compact .ik-entry__icon { left: 30px; max-width: 62px; max-height: 66px; }
.ik-entries--compact .ik-entry h3 { margin: 0 0 2px; font-size: 18px; line-height: 28px; }
.ik-entries--compact .ik-entry p { margin: 0 0 10px; font-size: 14px; line-height: 22px; }
.ik-entries--compact .ik-entry .ik-more { position: static; }
.ik-entry__here { display: inline-block; margin-bottom: 6px; border: 1px solid currentColor; border-radius: 999px; padding: 0 10px; font-size: 11px; line-height: 20px; }
.ik-entry.is-current { color: #fff; }
.ik-entry--basics.is-current { background: #10B8A2; }
.ik-entry--industry.is-current { background: #FF8441; }
.ik-entry--own.is-current { background: #D9668B; }
.ik-entry--note.is-current { background: #5B78D6; }
.ik-entry.is-current .ik-entry__icon { filter: brightness(0) invert(1); }
.ik-entry.is-current .ik-more { color: #fff; border-color: #fff; }

/* 一覧のセクション（よく読まれている記事・業種・課題） */
.ik-sec { max-width: 1240px; margin: 83px auto 0; padding: 0 20px; }
.ik-entries + .ik-sec { margin-top: 112px; }
.ik-sechead { position: relative; }
.ik-sechead__more { position: absolute; right: 0; bottom: 4px; }

/* 業種タイル */
.ik-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 25px; }
.ik-tile a { display: block; height: 100%; min-height: 266px; border-radius: 20px; background: var(--ik-bg); padding: 20px 21px 24px; text-decoration: none; color: var(--ik-ink); }
.ik-tile__icon { display: flex; align-items: center; justify-content: center; width: 118px; height: 118px; margin: 0 auto 12px; border-radius: 50%; background: #fff; }
.ik-tile__icon img { max-width: 66px; max-height: 70px; width: auto; height: auto; }
.ik-tile__name { display: block; font-size: 16px; font-weight: 700; line-height: 24px; margin-bottom: 9px; word-break: auto-phrase; }
.ik-tile, .ik-tile a { min-width: 0; }
.ik-tile__name, .ik-tile__desc { overflow-wrap: anywhere; } /* スマホの2列で長い業種名がタイルからはみ出さないように */
/* Figma: 同じ行のタイルは説明の始まりがそろう（名前が2行の業種があっても）→ subgrid で行ごとにそろえる */
@supports (grid-template-rows: subgrid) {
	.ik-tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
	.ik-tile a { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding-bottom: 21px; }
	.ik-tile__name { align-self: start; }
}
.ik-tile__desc { display: block; color: var(--ik-gray); font-size: 12px; line-height: 20px; }
.ik-tile a:hover .ik-tile__name { color: var(--ik-shelf); }

/* 課題から探す */
.ik-issuecards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 22px; }
.ik-issuecard a { display: block; min-height: 102px; border-radius: 20px; background: var(--ik-bg); padding: 18px 27px; text-decoration: none; color: var(--ik-ink); }
.ik-issuecard__name { display: block; font-size: 16px; font-weight: 700; line-height: 30px; }
.ik-issuecard__voice { display: block; color: var(--ik-gray); font-size: 12px; line-height: 24px; margin-top: 6px; }
.ik-issuecard a:hover .ik-issuecard__name { color: var(--ik-shelf); }

/* ---------- スマートフォン ---------- */
/* ノートPCの幅：本文の左右の余白を広げる */
@media (min-width: 901px) and (max-width: 1300px) {
	.ik .ik-wrap, .ik .ik-related, .ik .ik-sec, .ik .ik-bs-intro, .ik .ik-bs-wrap, .ik .ik-bs-sec, .ik .ik-ind-intro { padding-left: 48px; padding-right: 48px; }
}

@media (max-width: 900px) {
	.ik-hero { min-height: 0; padding: 130px 16px 40px; background-size: cover; background-position: center; }
	.ik-hero__in { width: auto; }
	.ik-hero__title { font-size: 26px; line-height: 40px; margin: 20px 0 16px; }
	.ik-hero__meta { font-size: 14px; line-height: 26px; }
	.ik-wrap { padding: 0 16px; }
	.ik-lead { margin: 40px 0; font-size: 16px; }
	.ik-toc { padding: 30px 24px; border-radius: 20px; }
	.ik-toc__cols { grid-template-columns: 1fr; }
	.ik-toc__cols ul, .ik-toc__cols ul + ul { padding: 0; border-left: 0; }
	.ik-toc li { font-size: 16px; line-height: 36px; }
	.ik-content h2, .ik-issues h2 { margin-top: 70px; padding: 12px 14px; font-size: 24px; line-height: 36px; }
	.ik-content h3 { font-size: 20px; line-height: 30px; padding-left: 26px; }
	.ik-content h3::before { width: 10px; height: 30px; }
	.ik-content h4 { font-size: 18px; line-height: 28px; }
	.ik-content .ik-view, .ik-content .ik-figure { padding: 30px 20px; }
	.ik-content .ik-view__title { font-size: 20px; line-height: 30px; }
	.ik-content table { min-width: 640px; }
	.ik-sechead__ja { font-size: 26px; }
	.ik-cards { grid-template-columns: 1fr; }
	/* ナレッジトップ */
	.ik-tophead { min-height: 0; padding: 130px 16px 0; }
	.ik-tophead__in { width: auto; }
	.ik-tophead__en { font-size: 56px; padding-top: 0; }
	.ik-tophead__img { position: static; width: auto; height: 160px; margin: 24px -16px 0; }
	.ik-intro { margin-top: 40px; min-height: 0; padding: 40px 16px 200px; background-size: 100% auto; background-position: right bottom; }
	.ik-intro__in { padding-left: 0; }
	.ik-intro__title { font-size: 24px; line-height: 38px; }
	.ik-intro__text { font-size: 16px; line-height: 30px; }
	.ik-intro__text br, .ik-entry p br { display: none; }
	.ik-entries { padding: 60px 16px 0; }
	.ik-axis { display: none; }
	.ik-entries__grid { grid-template-columns: minmax(0, 1fr); }
	.ik-entry { min-height: 0; padding: 30px 24px 70px 110px; }
	.ik-entry__icon { left: 20px; max-width: 70px; max-height: 80px; }
	.ik-entry h3 { font-size: 18px; line-height: 28px; }
	.ik-entry .ik-more { right: 24px; bottom: 24px; }
	.ik-sec { margin-top: 70px; padding: 0 16px; }
	.ik-sechead__more { position: static; margin-top: 12px; }
	.ik-sechead { flex-wrap: wrap; }
	.ik-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ik-tile a { min-height: 0; padding: 16px 14px 20px; }
	.ik-tile__icon { width: 90px; height: 90px; margin-bottom: 16px; }
	.ik-tile__icon img { max-width: 50px; max-height: 54px; }
	.ik-issuecards { grid-template-columns: 1fr; gap: 12px; }
}