@charset "utf-8";
/* ==========================================================================
   rn-ai.css  ai.html 専用の追加スタイル（renewal.css の補助）
   ・renewal.css のコンポーネント（rnSection / rnSplit / rnCards / rnScreen / rnSteps）を
     ai.html の構成に合わせて微調整するだけのファイル
   ========================================================================== */

/* ページ内リンクの着地位置（固定ヘッダー分） */
.rnSection[id], #ai-steps { scroll-margin-top: 90px; }

/* 3大メニュー概要：a.rnCard の内部 */
.rnCards > a.rnCard strong { color: #b80000; }
.rnCard .rnTags { margin: 8px 0 0; padding: 0; font-size: inherit; }
.rnCard .issue { margin-top: 4px; }

/* メニュー詳細：文章＋写真 */
.rnSplit.top { align-items: flex-start; }
.rnSplit .txt .lead { margin: 0 0 14px; font-size: 20px; font-weight: bold; line-height: 1.7; color: #2b2b2b; }
.rnSplit .txt p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.95; }
.rnSplit .txt strong { color: #b80000; }
.rnSplit .txt .rnCheck { margin: 0 0 16px; }
.rnSplit .txt .rnCheck li { font-size: 15px; }
.rnSplit .txt .issue { padding: 10px 14px; font-size: 14.5px; line-height: 1.8; background: #fdeceb; }
.rnSplit .txt .issue b { color: #b80000; }
.rnSplit > .aiPhoto { flex: 0 0 38%; }
.aiPhoto img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 20px rgba(16,32,74,0.12); }

/* 小見出し（画面イメージ・アーキテクチャ） */
.rnSubHead { margin: 44px 0 16px; padding-left: 12px; font-size: 19px; line-height: 1.5; color: #1C4C9F; border-left: 5px solid #1C4C9F; }

/* 画面イメージは読みやすさ優先で幅広に */
.aiScreenWrap { max-width: 940px; margin: 0 auto; }

/* データ活用カード内の「連携データ／業務への戻し方」 */
.rnCard ul.meta { margin: 0 0 12px; padding: 10px 14px; list-style: none; font-size: 14px; line-height: 1.8; background: #f5f7fb; }
.rnCard ul.meta b { color: #1C4C9F; }
.rnCard strong { color: #b80000; }
.rnNote a, .aiPractice a { color: #1C4C9F; font-weight: bold; }

/* 社内での技術発信と実践 */
.aiPractice .links { margin-top: auto; font-size: 14px; }
.aiPractice .links a { display: inline-block; margin-right: 14px; }
.aiPractice .links a:after { content: " →"; }

/* 導入ステップ（#contentsBody 内で rnFig / rnSteps を使う） */
.aiSteps .rnFig { max-width: 1040px; margin: 16px auto 28px; }
.aiSteps .rnSteps { margin-top: 8px; }
.aiSteps .rnSteps h4, .aiSteps .rnSteps h3:where(.rnH4) { font-size: 17px; }
.aiSteps .rnNote { font-size: 13.5px; }
.aiSteps .rnNote a { color: #1C4C9F; font-weight: bold; }

@media screen and (max-width: 767px) {
	.rnSplit .txt .lead { font-size: 16.5px; }
	.rnSplit .txt .rnCheck li { font-size: 14px; }
	.rnSplit .txt p { font-size: 14.5px; }
	.rnSplit > .aiPhoto { flex: none; width: 100%; }
	.rnSubHead { margin-top: 32px; font-size: 16.5px; }
	.rnHead .jp br { display: none; }

	/* --- 表示品質調整（スマホ） --- */
	/* ヒーロー：vw指定の文字がスマホで極小になるため、中央寄せで読める大きさに */
	.slide > div[style]:not(.slideInner) { bottom: auto !important; left: 0 !important; width: 100%; padding: 0 12px; box-sizing: border-box; text-align: center; line-height: 1.4; letter-spacing: 0.04em !important; }
	.slide > div[style]:nth-of-type(3) { top: 44% !important; font-size: 4.3vw !important; }
	.slide > div[style]:nth-of-type(4) { top: 60% !important; font-size: 2.6vw !important; }
	.slide > div[style]:nth-of-type(5) { top: 71% !important; font-size: 2.7vw !important; }
	.slide .aitop-red { top: 40%; left: 5%; }
	/* 英字見出しの1語だけの折り返しを防ぐ */
	.rnHead .en { text-wrap: balance; }
	/* 写真はスマホで横長にトリミングして高さを抑える */
	.rnSplit > .aiPhoto img { aspect-ratio: 16 / 9; object-fit: cover; }
	/* カードのアイコン・技術タグをスマホでは一回り小さく */
	.rnCard .icon { width: 56px; height: 56px; margin-bottom: 10px; }
}
/* 見出し・リード・費用欄の改行を文節単位に */
@media screen and (min-width: 768px) { .rnLeadText { word-break: auto-phrase; text-wrap: balance; } }
.rnSubHead, .rnSplit .txt .lead { word-break: auto-phrase; text-wrap: balance; }

/* AI活用例：現状 → AI活用後 の比較カード */
.aiUseCases { color: #fff; background: linear-gradient(180deg, rgba(10,22,54,0.95), rgba(16,32,74,0.9)), url('../images/ai/develop_bg.jpg') no-repeat center / cover; }
.aiUseCases .rnHead .en { color: #ff7a7a; }
.aiUseCases .rnHead .jp, .aiUseCases .rnLeadText { color: #fff; }
.aiUcList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 0; padding: 0; list-style: none; }
.aiUc { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.28); }
.aiUc .ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.aiUc .ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.aiUc:hover .ph img { transform: scale(1.04); }
.aiUc .ph .no { position: absolute; top: 0; left: 0; padding: 6px 14px; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 0.16em; color: #fff; background: #b80000; border-radius: 0 0 6px 0; }
.aiUc .body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 24px; }
.aiUc h3 { margin: 0 0 14px; padding-left: 12px; font-size: 20px; line-height: 1.45; text-align: left; letter-spacing: 0.04em; color: #10204a; border-left: 4px solid #b80000; }
.aiUc .ba { display: flex; flex: 1; flex-direction: column; margin: 0; }
.aiUc .ba > div { padding: 12px 15px 13px; border-radius: 6px; }
.aiUc .ba .before { flex: 1; background: #f2f4f8; }
.aiUc .ba .after { position: relative; margin-top: 18px; background: #fdeceb; box-shadow: inset 3px 0 0 #b80000; }
.aiUc .ba .after:before { content: ""; position: absolute; top: -15px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-top: 10px solid #b80000; border-bottom: 0; }
.aiUc .ba dt { display: inline-block; margin: 0 0 6px; padding: 2px 11px; font-size: 12px; font-weight: bold; line-height: 1.7; letter-spacing: 0.08em; border-radius: 20px; }
.aiUc .ba .before dt { color: #fff; background: #7b8496; }
.aiUc .ba .after dt { color: #fff; background: #b80000; }
.aiUc .ba dd { margin: 0; font-size: 14.5px; line-height: 1.8; color: #555; word-break: auto-phrase; text-wrap: pretty; }
.aiUc .ba .after dd { font-size: 15px; font-weight: bold; color: #2b2b2b; }
.aiUcNote { margin-top: 26px; text-align: center; color: #c9d1e3; }
.aiUseCases .rnBtns { margin-top: 22px; }
@media screen and (max-width: 1023px) {
	.aiUcList { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media screen and (max-width: 640px) {
	.aiUcList { grid-template-columns: 1fr; gap: 18px; }
	.aiUc .ph { aspect-ratio: 21 / 9; }
	.aiUc .body { padding: 16px 16px 18px; }
	.aiUc h3 { margin-bottom: 12px; font-size: 17px; }
	.aiUc .ba dd { font-size: 14px; }
	.aiUc .ba .after dd { font-size: 14.5px; }
	.aiUcNote { text-align: left; }
	.aiUseCases .rnBtns .rnBtn { width: 100%; min-width: 0; }
}
/* 「提供すること」「仕事の進め方」の図：PCで横幅いっぱい（約1150px）だと図内の文字が大きくなりすぎるため上限を設定 */
#contentsBody > img.figPc.aiFigMid { max-width: 840px; height: auto; margin: 0 auto; }
/* 「04 生成AIによる業務効率化」：見出しを下の本文（.bunn 最大860px）と同じ左端にそろえ、写真を少し小さく */
#contentsBody > h3.subtitle.aiAreaHead { max-width: 860px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.aiAreaHead + .bunn > img { width: 260px; height: auto; }
/* 05〜09 の行頭の赤い三角：上端に寄っていたため、文字の行の縦中央に */
.threeDetailCol .inner .li:before { content: ""; display: inline-block; width: 0; height: 0; margin: 0 0.45em 0 0.1em; vertical-align: 0.1em; background: none; border-style: solid; border-width: 0.32em 0 0.32em 0.5em; border-color: transparent transparent transparent #b80000; }
/* データ活用・自動化につながる開発実績：業種アイコン付きのカード */
.aiWorkList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.aiWorkList > li { padding: 22px 22px 18px; background: #fff; border-top: 3px solid #1C4C9F; border-radius: 0 0 8px 8px; box-shadow: 0 6px 18px rgba(16,32,74,0.07); }
.aiWorkList .hd { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e6e9f0; }
.aiWorkList .ic { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 46px; height: 46px; background: #eef2f9; border-radius: 50%; }
.aiWorkList .ic img { width: 28px; height: 28px; }
.aiWorkList h3 { margin: 0; font-size: 19px; font-weight: bold; line-height: 1.4; text-align: left; letter-spacing: 0.04em; color: #10204a; }
.aiWorkList ul { margin: 0; padding: 0; list-style: none; }
.aiWorkList ul li { position: relative; padding: 6px 0 6px 18px; font-size: 14.5px; line-height: 1.6; color: #333; word-break: auto-phrase; }
.aiWorkList ul li + li { border-top: 1px dashed #e3e6ee; }
.aiWorkList ul li:before { content: ""; position: absolute; left: 2px; top: calc(6px + 0.8em - 3px); width: 6px; height: 6px; background: #b80000; border-radius: 50%; }
.aiWorkNote { margin-top: 22px; text-align: center; }
.aiWorks .rnBtns { margin-top: 18px; }
@media screen and (max-width: 1023px) {
	.aiWorkList { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media screen and (max-width: 640px) {
	.aiWorkList { grid-template-columns: 1fr; gap: 12px; }
	.aiWorkList > li { padding: 16px 16px 12px; }
	.aiWorkList .ic { width: 40px; height: 40px; }
	.aiWorkList .ic img { width: 24px; height: 24px; }
	.aiWorkList h3 { font-size: 17px; }
	.aiWorkList ul li { font-size: 14px; }
	.aiWorkNote { text-align: left; }
	.aiWorks .rnBtns .rnBtn { width: 100%; min-width: 0; }
}
/* エスプリフォートを選ぶ理由：番号・アイコン付きの2列カード */
.aiReasonList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.aiReasonList > li { display: grid; grid-template-columns: 84px 1fr; gap: 0 20px; align-items: start; padding: 28px 28px 26px; background: #f5f7fb; border-top: 3px solid #b80000; border-radius: 0 0 8px 8px; }
.aiReasonList .ic { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; background: #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(16,32,74,0.1); }
.aiReasonList .ic img { width: 50px; height: 50px; }
.aiReasonList .lbl { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 6px; font-family: Arial, "Helvetica Neue", sans-serif; font-weight: bold; }
.aiReasonList .lbl .no { font-size: 28px; line-height: 1; color: #b80000; }
.aiReasonList .lbl .en { font-size: 12px; letter-spacing: 0.14em; color: #1C4C9F; }
.aiReasonList h3 { margin: 0 0 10px; font-size: 19px; font-weight: bold; line-height: 1.55; text-align: left; letter-spacing: 0.03em; color: #10204a; word-break: auto-phrase; }
.aiReasonList .txt > p:last-child { margin: 0; font-size: 15px; line-height: 1.95; color: #333; word-break: normal; overflow-wrap: anywhere; text-wrap: pretty; }
@media screen and (max-width: 1023px) {
	.aiReasonList { grid-template-columns: 1fr; gap: 14px; }
}
@media screen and (max-width: 640px) {
	.aiReasonList > li { grid-template-columns: 56px 1fr; gap: 0 14px; padding: 20px 16px 18px; }
	.aiReasonList .ic { width: 56px; height: 56px; }
	.aiReasonList .ic img { width: 34px; height: 34px; }
	.aiReasonList .lbl .no { font-size: 22px; }
	.aiReasonList .lbl .en { font-size: 11px; letter-spacing: 0.1em; }
	.aiReasonList h3 { font-size: 16.5px; }
	.aiReasonList h3 br { display: none; }
	.aiReasonList .txt > p:last-child { font-size: 14px; line-height: 1.85; }
}
/* AI導入ステップの注記：中央寄せの図（最大840px）と同じ幅・位置にそろえる */
.aiSteps .rnNote { max-width: 1040px; margin: 4px auto 0; text-align: center; }
@media screen and (max-width: 767px) { .aiSteps .rnNote { text-align: left; } }
/* こんなお困りごとを解決します：お困りごと → 解決策 のカード */
.aiProblemList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.aiProblemList > li { display: flex; flex-direction: column; padding: 26px 24px 24px; background: #fff; border: 1px solid #e3e6ee; border-top: 3px solid #b80000; border-radius: 0 0 10px 10px; box-shadow: 0 6px 18px rgba(16,32,74,0.06); transition: transform 0.2s, box-shadow 0.2s; }
.aiProblemList > li:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(16,32,74,0.12); }
.aiProblemList .ic { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 14px; background: #fdeceb; border-radius: 50%; }
.aiProblemList .ic img { width: 36px; height: 36px; }
.aiProblemList h3 { margin: 0 0 14px; font-size: 18px; font-weight: bold; line-height: 1.5; text-align: left; letter-spacing: 0.03em; color: #10204a; word-break: auto-phrase; text-wrap: balance; }
.aiProblemList .sol { margin: auto 0 0; padding: 12px 14px 13px; font-size: 14.5px; line-height: 1.8; color: #333; background: #f5f7fb; border-left: 3px solid #1C4C9F; border-radius: 0 6px 6px 0; }
.aiProblemList .sol .lbl { display: block; margin-bottom: 2px; font-size: 12px; font-weight: bold; letter-spacing: 0.1em; color: #1C4C9F; }
@media screen and (max-width: 1023px) {
	.aiProblemList { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media screen and (max-width: 640px) {
	.aiProblemList { grid-template-columns: 1fr; gap: 12px; }
	.aiProblemList > li { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; padding: 18px 16px; }
	.aiProblemList .ic { grid-row: 1; width: 48px; height: 48px; margin: 0; }
	.aiProblemList .ic img { width: 28px; height: 28px; }
	.aiProblemList h3 { grid-row: 1; align-self: center; margin: 0; font-size: 16px; }
	.aiProblemList .sol { grid-column: 1 / -1; margin-top: 12px; font-size: 14px; }
}
/* そのほかの対応領域：領域カード5枚（PCは3＋2）と相談ボックス */
.aiAreaList { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.aiAreaList > li { grid-column: span 2; position: relative; padding: 22px 22px 20px 26px; background: #f5f7fb; border-radius: 8px; overflow: hidden; }
.aiAreaList > li:nth-child(n+4) { grid-column: span 3; }
.aiAreaList > li:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #b80000; }
.aiAreaList h3 { margin: 0 0 8px; font-size: 18px; font-weight: bold; line-height: 1.5; text-align: left; letter-spacing: 0.03em; color: #10204a; word-break: auto-phrase; }
.aiAreaList p { margin: 0; font-size: 14.5px; line-height: 1.85; color: #333; }
.aiAreaList .scope { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e1e5ee; font-size: 13px; line-height: 1.6; color: #555; }
.aiAreaList .scope span { position: relative; padding-left: 11px; }
.aiAreaList .scope span:before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: #b80000; border-radius: 50%; }
.aiAreaCta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 24px 28px; background: #fdeceb; border-radius: 8px; }
.aiAreaCta .ttl { margin: 0 0 4px; font-size: 18px; font-weight: bold; color: #b80000; }
.aiAreaCta .txt p:last-child { margin: 0; font-size: 14.5px; line-height: 1.8; color: #333; }
.aiAreaCta .rnBtn { flex: 0 0 auto; }
@media screen and (max-width: 1023px) {
	.aiAreaList { grid-template-columns: repeat(2, 1fr); }
	.aiAreaList > li, .aiAreaList > li:nth-child(n+4) { grid-column: auto; }
	.aiAreaList > li:last-child { grid-column: 1 / -1; }
	.aiAreaCta { flex-direction: column; align-items: flex-start; }
}
@media screen and (max-width: 640px) {
	.aiAreaList { grid-template-columns: 1fr; gap: 12px; }
	.aiAreaList > li { padding: 18px 16px 16px 20px; }
	.aiAreaList h3 { font-size: 16.5px; }
	.aiAreaList p { font-size: 14px; }
	.aiAreaCta { padding: 20px 18px; }
	.aiAreaCta .ttl { font-size: 16.5px; }
	.aiAreaCta .rnBtn { width: 100%; min-width: 0; }
}