@charset "utf-8";
/* core_system.html 専用（基幹システム構築・レガシーモダナイゼーション） */
.rnCsJump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.rnCsJump li a { display: inline-block; padding: 10px 22px 10px 18px; font-size: 15px; font-weight: bold; color: #1C4C9F; text-decoration: none; background: #fff; border: 1px solid #c9d3e6; border-radius: 30px; }
.rnCsJump li a:after { content: " ↓"; color: #b80000; }
.rnCsJump li a:hover { color: #fff; background: #1C4C9F; }
.rnCsSubHead { margin: 0 0 20px; padding-left: 14px; font-size: 21px; line-height: 1.5; color: #2b2b2b; border-left: 5px solid #b80000; }
.rnCsBoxText { margin: 0; font-size: 15.5px; line-height: 1.95; }
.rnCsBoxText strong { color: #b80000; }
.rnSplit .txt p { margin: 0 0 14px; }
.rnSplit .txt a, .rnCard p a { color: #1C4C9F; text-decoration: underline; }
.rnTags li a { color: inherit; text-decoration: none; }
.rnTags li a:hover { text-decoration: underline; }
.rnCsSystems .rnCard { padding: 22px 18px 16px; }
.rnCsSystems .rnCard h4, .rnCsSystems .rnCard h3:where(.rnH4) { font-size: 16.5px; }
.rnCsSystems .rnCard p { font-size: 14px; line-height: 1.8; }
#modernization .rnSplit { align-items: stretch; }
#modernization .rnBox { height: 100%; box-sizing: border-box; }
@media screen and (max-width: 767px) {
.rnCsJump li { width: 100%; }
.rnCsJump li a { display: block; text-align: center; font-size: 14px; }
.rnCsSubHead { font-size: 18px; }
.rnCsBoxText { font-size: 14.5px; }
}
h3.rnCsSubHead { text-align: left; }
.rnCsScreen { max-width: 980px; }
.rnCsScreenTxt { align-items: flex-start; }
.rnCsScreenTxt .rnCheck { margin-top: 44px; }
@media screen and (max-width: 767px) {
.rnCsScreenTxt .rnCheck { margin-top: 0; }
}
.rnSplit .txt p { font-size: 15.5px; line-height: 1.95; }
@media screen and (max-width: 767px) { .rnSplit .txt p { font-size: 14.5px; } }
@media screen and (max-width: 767px) {
/* 既存ブロックのスマホ表示補正（内容の切れ・極小文字の解消） */
#contents .sysConsulting .inner { height: auto; }
#contents .sysConsulting .inner .text { padding-bottom: 12px; }
#contents .coreSystemProblem li:nth-child(odd),
#contents .coreSystemProblem li:nth-child(1) { font-size: 13px; }
}
/* ==========================================================================
表示品質調整（PC・スマホ）
※ このファイルは service-typography.css より後に読み込む
========================================================================== */
/* 見出しの文節改行 */
.rnCsSubHead, .coreSystemProblem :is(h2,h3) { word-break: auto-phrase; text-wrap: balance; }
.rnCsSystems .rnCard p { text-wrap: pretty; }
/* お困り事リスト：チェックアイコンの右に本文を揃え、折り返し行がアイコン下に回り込まないように */
#contents .coreSystemProblem li:nth-child(odd) { display: flex; align-items: flex-start; }
#contents .coreSystemProblem li:nth-child(odd) img { flex: none; width: 18px !important; height: auto !important; margin: 0.45em 0.6em 0 0; padding: 0 !important; }
#contents .coreSystemProblem li { word-break: auto-phrase; }
@media screen and (max-width: 767px) {
/* ヒーロー：vw指定の文字がスマホで極小になるため拡大 */
.slide > div[style]:not(.slideInner) { bottom: auto !important; padding: 0 12px; box-sizing: border-box; line-height: 1.4; letter-spacing: 0.03em !important; }
.slide > div[style]:nth-of-type(3) { top: 48% !important; font-size: 3.9vw !important; }
.slide > div[style]:nth-of-type(4) { top: 66% !important; font-size: 2.8vw !important; }
.slide .ectop-red { top: 38%; left: 6%; }
/* セクション間の
連続による空白を詰める */
#wrapper > main > #contents:not(.rnCta):not(.company) > br,
#wrapper > main > #contents:not(.rnCta):not(.company) > #contentsBody > br + br { display: none; }
#contents > .subtitle { margin: 24px 0 16px; }
#contents > .subtitle .subtitleBody > br { display: none; }
#contents > .subtitle .subtitleBody { padding: 18px 0; }
#contents > .subtitle .subtitleBody .title { font-size: 19px; line-height: 1.6; }
#contents > .subtitle .subtitleBody .subtitle { margin: 10px 0 0; }
/* 「オーダーメイド＋パッケージ＋…」アイコン列：極小だったため2個ずつ折り返して拡大 */
.credoCol { justify-content: center; }
.credoCol .inner:nth-child(odd),
.credoCol .inner:nth-child(7) { width: auto; flex: 0 0 38%; margin: 0 0 14px; }
.credoCol .inner:nth-child(even) { width: auto; flex: 0 0 9%; align-self: center; padding: 0; margin: 0 0 14px; }
.credoCol .inner .image { width: 100%; text-align: center; }
.credoCol .inner img { display: block; width: auto !important; height: 92px; max-width: 100%; margin: 0 auto !important; }
.credoCol .inner:nth-child(even) img { width: 60% !important; height: auto; }
/* お困り事リスト */
#contents .coreSystemProblem li:nth-child(odd),
#contents .coreSystemProblem li:nth-child(1) { width: 100%; font-size: 14px; padding: 6px 0; }
#contents .coreSystemProblem li:nth-child(even) { display: none; }
.coreSystemProblem .text { padding-left: 6%; padding-right: 6%; }
.coreSystemProblem .bunn > br + br, .coreSystemProblem > br { display: none; }
#wrapper > main > #contents:not(.rnCta):not(.company) > #contentsBody > br:last-child { display: none; }
.coreSystemProblem .subtitle { margin-top: 0; padding-top: 28px; }
.coreSystemProblem { padding-bottom: 56px; background-size: 16% auto, 16% auto; }
/* システムコンサルティング：カード下の余白 */
.sysConsulting .body .bunn > br:last-child { display: none; }
.sysConsultingBody { padding-bottom: 32px; }
/* 改修メニュー：写真タイルの高さを抑える */
.dissatisfaction .inner img, .dissatisfaction-under .inner img { aspect-ratio: 3 / 1; object-fit: cover; }
.dissatisfaction .inner, .dissatisfaction-under .inner { margin-bottom: 12px; }
.dissatisfaction .inner .text, .dissatisfaction-under .inner .text { top: 50%; transform: translateY(-50%); }
.dissatisfaction .inner .text > br, .dissatisfaction-under .inner .text > br { display: none; }
.dissatisfaction .inner .text, .dissatisfaction-under .inner .text { padding: 0 16px; box-sizing: border-box; line-height: 1.6; word-break: auto-phrase; text-wrap: balance; }
/* 一括再構築／段階的移行の比較表：スマホでは縦積みに */
#modernization .rnTableWrap { overflow: visible; }
#modernization .rnTable { min-width: 0; }
#modernization .rnTable thead { display: none; }
#modernization .rnTable, #modernization .rnTable tbody, #modernization .rnTable tr, #modernization .rnTable th, #modernization .rnTable td { display: block; width: auto; }
#modernization .rnTable tr { margin-bottom: 12px; border: 1px solid #dcdcdc; }
#modernization .rnTable th, #modernization .rnTable td { border: 0; }
#modernization .rnTable tbody th { background: #1C4C9F; color: #fff; padding: 8px 12px; }
#modernization .rnTable td { padding: 8px 12px 10px; }
#modernization .rnTable td:before { display: block; margin-bottom: 2px; font-size: 12px; font-weight: bold; color: #767676; }
#modernization .rnTable td:nth-of-type(1):before { content: "一括再構築（ビッグバン型）"; }
#modernization .rnTable td:nth-of-type(2):before { content: "段階的移行（エスプリフォートの推奨）"; color: #b80000; }
/* 対応システム一覧（12枚）のカードを詰める */
.rnCsSystems.rnCards { gap: 10px; }
.rnCsSystems .rnCard { padding: 16px 16px 14px; }
.rnCsSystems .rnCard h4, .rnCsSystems .rnCard h3:where(.rnH4) { margin-bottom: 4px; }
}
@media screen and (max-width: 767px) {
#modernization .rnTable td { word-break: auto-phrase; text-wrap: pretty; }
}
#modernization .rnTable td { word-break: auto-phrase; text-wrap: pretty; }
/* システムコンサルティングの3カード：left:8% のずらしで右端のカードが切れる（768〜1024px）ため中央揃えに */
#contents .sysConsulting { left: 0; }
#contents .sysConsulting .inner { height: auto; }
#contents .sysConsulting .inner .text { padding-bottom: 12px; margin-left: auto; margin-right: auto; }
#contents .sysConsulting .inner .body { margin: 0 5%; }
#contents .sysConsulting .inner .body .bunn { font-size: 15px; line-height: 1.85; }
#contents .sysConsulting .inner .number:before { left: 50%; margin-left: -17px; }
/* PC：アイコン列（オーダーメイド開発×…／提案力×…）と「そして、コアバリュー」の帯、
「こんなお困り事や疑問点はありませんか？」が画面幅に比例して大きくなりすぎるため上限を設定 */
@media screen and (min-width: 768px) {
#contents .credoCol { max-width: 920px; margin-left: auto; margin-right: auto; }
#contents .rnCsAndBand { max-width: 920px; margin: 12px auto 32px !important; padding: 16px 20px !important; font-size: 22px; line-height: 1.5; letter-spacing: 0.08em; }
.coreSystemProblem { padding: 8px 0 48px; background-size: 150px auto, 150px auto; background-position: left 6% top 24px, right 6% bottom 24px; }
.coreSystemProblem .subtitle { margin: 36px 0 18px; }
.coreSystemProblem .text { max-width: 760px; margin: 0 auto; padding-left: 0; padding-right: 0; }
.coreSystemProblem ul { padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
.coreSystemProblem .bunn > br { display: none; }
.coreSystemProblem .bunn:after { content: ""; display: block; clear: both; }
}
/* 「そして、コアバリュー（顧客価値）」：スマホでも見出しとして読める大きさに */
@media screen and (max-width: 767px) {
#contents .rnCsAndBand { margin: 8px 0 24px !important; padding: 12px 14px !important; font-size: 17px; line-height: 1.5; letter-spacing: 0.05em; }
}
/* こんなお困り事や疑問点はありませんか？：左にイラスト、右にチェック付きのカード（背景は次のセクションの吹き出しと同じ #f7f7f7） */
.csProblems { background: #f7f7f7; padding-bottom: 72px; }
.csProbBody { position: relative; max-width: 780px; margin: 0 auto; }
.csProbBody .ill { position: absolute; top: 50%; right: calc(100% + 28px); width: 170px; transform: translateY(-50%); text-align: center; }
.csProbBody .ill .q { display: block; width: 62%; margin: 0 auto -8px; opacity: 0.85; }
.csProbBody .ill .man { display: block; width: 78%; margin: 0 auto; opacity: 0.85; }
.csProbList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; margin: 0; padding: 0; list-style: none; }
.csProbList li { position: relative; padding: 14px 16px 14px 50px; font-size: 15.5px; font-weight: bold; line-height: 1.6; color: #2b2b2b; background: #fff; border-radius: 8px; box-shadow: 0 4px 14px rgba(16,32,74,0.07); word-break: auto-phrase; }
.csProbList li:before { content: ""; position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: #b80000; border-radius: 50%; }
.csProbList li:after { content: ""; position: absolute; left: 23px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg); }
/* 左右にイラストを置く余白がない幅では、リストを中央に保ったままイラストを隠す */
@media screen and (max-width: 1199px) {
.csProbBody .ill { display: none; }
}
@media screen and (max-width: 640px) {
.csProblems { padding-bottom: 56px; }
.csProbList { grid-template-columns: 1fr; gap: 8px; }
.csProbList li { padding: 12px 14px 12px 46px; font-size: 14.5px; }
.csProbList li:before { left: 14px; }
.csProbList li:after { left: 21px; }
}
/* システムコンサルティング：写真背景の上に、見出し・本文・STEPカード3枚（矢印でつなぐ） */
.sysConsultingBody { position: relative; }
.sysConsultingBody:before { content: ""; position: absolute; inset: 0; background: rgba(10,22,54,0.55); }
.csConsult { position: relative; z-index: 1; padding: 72px 0 12px; color: #fff; }
.csConsult .rnHead .en { color: #ff9a9a; }
.csConsult .rnHead .jp { color: #fff; }
.csConsult .lead { max-width: 860px; margin: 0 auto 36px; }
.csConsult .lead p { margin: 0 0 12px; font-size: 16px; line-height: 2; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.45); }
.csConsultSteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.csConsultSteps > li { position: relative; padding: 24px 24px 20px; color: #2b2b2b; background: rgba(255,255,255,0.96); border-top: 4px solid #b80000; border-radius: 0 0 8px 8px; box-shadow: 0 10px 26px rgba(0,0,0,0.25); }
.csConsultSteps > li:not(:last-child):after { content: ""; position: absolute; top: 50%; right: -24px; margin-top: -11px; border: 11px solid transparent; border-left: 14px solid #fff; }
.csConsultSteps .no { display: block; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 12.5px; font-weight: bold; letter-spacing: 0.16em; color: #b80000; }
.csConsultSteps h3 { margin: 4px 0 12px; padding-bottom: 12px; font-size: 19px; font-weight: bold; line-height: 1.45; text-align: left; color: #10204a; border-bottom: 1px solid #e3e6ee; }
.csConsultSteps ul { margin: 0; padding: 0; list-style: none; }
.csConsultSteps ul li { position: relative; padding: 4px 0 4px 18px; font-size: 14.5px; line-height: 1.7; }
.csConsultSteps ul li:before { content: ""; position: absolute; left: 2px; top: calc(4px + 0.85em - 3px); width: 6px; height: 6px; background: #1C4C9F; border-radius: 50%; }
@media screen and (max-width: 900px) {
.csConsultSteps { grid-template-columns: 1fr; gap: 26px; max-width: 520px; margin: 0 auto; }
.csConsultSteps > li:not(:last-child):after { top: auto; right: auto; bottom: -24px; left: 50%; margin: 0 0 0 -11px; border: 11px solid transparent; border-top: 14px solid #fff; }
}
@media screen and (max-width: 640px) {
.csConsult { padding-top: 56px; }
.csConsult .lead p { font-size: 14.5px; line-height: 1.9; }
.csConsultSteps > li { padding: 18px 16px 14px; }
.csConsultSteps h3 { font-size: 17px; }
}