@charset "utf-8";
/* 見出し用に Noto Sans JP の太字（700）を読み込む（各ページは 400 のみ読み込み） */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap");
/* ==========================================================================
   renewal.css  2026年サイト改修の共通コンポーネント
   ・既存の style.css（#contents / #contentsBody / .subtitle / .bunn /
     .threeDetailCol / .btnClickHere… ）のデザインを踏襲し、不足する部品だけを追加
   ・配色：赤 #b80000 / 紺 #1C4C9F / 濃紺 #000088 / 文字 #2b2b2b / グレー背景 #f2f2f2
   ・接頭辞 rn- で既存クラスと衝突しないようにする
   ========================================================================== */

/* ---------- セクション ---------- */
.rnSection { padding: 56px 0; clear: both; }
.rnSection.gray { background: #f2f2f2; }
.rnSection.navy { background: #10204a; color: #fff; }
.rnSection.navy .rnHead .jp, .rnSection.navy .rnLeadText { color: #fff; }
.rnInner { max-width: 1080px; width: 90%; margin: 0 auto; }

/* 見出し：英字ラベル＋日本語（トップの title_all / title_comment_all と同じ構成） */
.rnHead { text-align: center; margin: 0 0 32px; }
.rnHead .en { display: block; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 0.24em; color: #b80000; }
.rnHead .jp { display: block; margin-top: 8px; font-size: 28px; font-weight: bold; line-height: 1.5; color: #2b2b2b; }
.rnHead .jp:after { content: ""; display: block; width: 48px; height: 3px; margin: 14px auto 0; background: #b80000; }
.rnHead.left { text-align: left; }
.rnHead.left .jp:after { margin-left: 0; }
.rnLeadText { max-width: 860px; margin: 0 auto 28px; font-size: 16.5px; line-height: 2; text-align: center; color: #333; }
.rnLeadText.left { text-align: left; }
.rnLeadText strong { color: #b80000; }

/* ---------- バリュープロポジション／ファクトバッジ ---------- */
.rnValue { max-width: 980px; margin: 0 auto; padding: 28px 32px; border-left: 6px solid #b80000; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,0.06); font-size: 19px; font-weight: bold; line-height: 1.9; color: #2b2b2b; }
.rnValue em { font-style: normal; color: #b80000; }
.rnFacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 28px auto 0; padding: 0; list-style: none; }
.rnFacts li { flex: 1 1 220px; max-width: 300px; padding: 20px 16px 18px; text-align: center; border-top: 4px solid #1C4C9F; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,0.07); }
.rnFacts .num { display: block; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 40px; font-weight: bold; line-height: 1.1; color: #b80000; }
.rnFacts .num small { font-size: 17px; margin-left: 2px; color: #2b2b2b; }
.rnFacts .label { display: block; margin-top: 8px; font-size: 14px; font-weight: bold; line-height: 1.6; color: #333; }

/* ---------- カードグリッド ---------- */
.rnCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.rnCards.col2 { grid-template-columns: repeat(2, 1fr); }
.rnCards.col4 { grid-template-columns: repeat(4, 1fr); }
.rnCard { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; background: #fff; border: 1px solid #e3e3e3; box-sizing: border-box; color: #2b2b2b; text-decoration: none; }
.rnCard:before { content: ""; position: absolute; top: 0; left: 0; border: 9px solid #b80000; border-right-color: transparent; border-bottom-color: transparent; }
a.rnCard { transition: box-shadow 0.2s, transform 0.2s; }
a.rnCard:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.12); transform: translateY(-2px); color: #2b2b2b; }
.rnCard .icon { width: 72px; height: 72px; margin: 0 0 14px; }
.rnCard .icon img { width: 100%; height: 100%; }
.rnCard .num { font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 0.16em; color: #b80000; }
.rnCard h4, .rnCard h3:where(.rnH4) { margin: 4px 0 10px; font-size: 19px; line-height: 1.55; color: #b80000; }
.rnCard p { margin: 0 0 10px; font-size: 15px; line-height: 1.9; }
.rnCard ul { margin: 0 0 10px; padding: 0 0 0 1.2em; font-size: 14.5px; line-height: 1.85; }
.rnCard .more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: bold; color: #1C4C9F; }
.rnCard .more:after { content: " →"; }
.rnCard .issue { margin: 0 0 10px; padding: 8px 12px; font-size: 14px; line-height: 1.7; background: #fdeceb; }
.rnCard .issue b { color: #b80000; }

/* ---------- 技術タグ ---------- */
.rnTags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.rnTags li { padding: 3px 10px; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 12.5px; font-weight: bold; line-height: 1.6; color: #1C4C9F; background: #eaf0fa; border-radius: 3px; }
.rnTags li.red { color: #b80000; background: #fdeceb; }
.rnTags li.gray { color: #555; background: #eee; }
.rnStack { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rnStack li { padding: 8px 18px; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 15px; font-weight: bold; color: #2b2b2b; background: #fff; border: 1px solid #d6dbe6; border-radius: 30px; }

/* ---------- 導入事例カード ---------- */
.rnCase { display: flex; flex-direction: column; background: #fff; border: 1px solid #e0e0e0; box-sizing: border-box; }
.rnCase .caseHead { padding: 18px 22px; color: #fff; background: #1C4C9F; }
.rnCase .caseHead .client { display: block; font-size: 13px; letter-spacing: 0.06em; opacity: 0.85; }
.rnCase .caseHead h4, .rnCase .caseHead h3:where(.rnH4) { margin: 4px 0 0; font-size: 18px; line-height: 1.55; color: #fff; }
.rnCase .caseThumb img { display: block; width: 100%; height: auto; }
.rnCase dl { margin: 0; padding: 16px 22px 8px; font-size: 14.5px; line-height: 1.85; }
.rnCase dt { margin-top: 10px; font-size: 13px; font-weight: bold; color: #b80000; }
.rnCase dt:first-child { margin-top: 0; }
.rnCase dd { margin: 2px 0 0; }
.rnCase .result { margin: auto 22px 20px; padding: 14px 16px; background: #fdf4f4; border-left: 4px solid #b80000; }
.rnCase .result b { display: block; font-size: 13px; color: #b80000; }
.rnCase .result .metric { display: inline-block; margin-right: 14px; font-family: Arial, sans-serif; font-size: 26px; font-weight: bold; color: #b80000; }
.rnCase .result .metric small { font-size: 13px; color: #333; font-family: "Noto Sans JP", sans-serif; }

/* ---------- 比較表 ---------- */
.rnTableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rnTable { width: 100%; min-width: 640px; border-collapse: collapse; background: #fff; font-size: 15px; line-height: 1.8; }
.rnTable th, .rnTable td { padding: 14px 16px; border: 1px solid #dcdcdc; text-align: left; vertical-align: top; }
.rnTable thead th { color: #fff; background: #1C4C9F; text-align: center; }
.rnTable thead th.hl { background: #b80000; }
.rnTable tbody th { width: 20%; background: #f5f6f9; color: #2b2b2b; }
.rnTable td.hl { background: #fff8f8; }

/* ---------- ステップ ---------- */
.rnSteps { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: rnstep; }
.rnSteps li { position: relative; flex: 1; padding: 22px 26px 22px 34px; background: #fff; border: 1px solid #e0e0e0; counter-increment: rnstep; }
.rnSteps li + li { margin-left: 18px; }
.rnSteps li:not(:last-child):after { content: ""; position: absolute; top: 50%; right: -16px; z-index: 1; margin-top: -10px; border: 10px solid transparent; border-left: 12px solid #b80000; }
.rnSteps li:before { content: "STEP " counter(rnstep); display: block; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 0.14em; color: #b80000; }
.rnSteps h4, .rnSteps h3:where(.rnH4) { margin: 4px 0 6px; font-size: 18px; line-height: 1.5; color: #2b2b2b; }
.rnSteps .term { display: inline-block; margin-bottom: 6px; padding: 1px 10px; font-size: 12.5px; font-weight: bold; color: #fff; background: #1C4C9F; border-radius: 3px; }
.rnSteps p { margin: 0; font-size: 14.5px; line-height: 1.85; }

/* ---------- タイムライン（沿革など） ---------- */
.rnTimeline { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; }
.rnTimeline:before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 9px; width: 3px; background: #d8dce6; }
.rnTimeline > li { position: relative; margin-bottom: 26px; }
.rnTimeline > li:before { content: ""; position: absolute; top: 6px; left: -32px; width: 14px; height: 14px; border: 3px solid #b80000; border-radius: 50%; background: #fff; }
.rnTimeline .date { font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color: #b80000; }
.rnTimeline .body { margin-top: 2px; font-size: 15.5px; line-height: 1.85; }

/* ---------- 図版（PC／スマホ出し分け） ---------- */
.rnFig { margin: 8px 0 28px; text-align: center; }
.rnFig img { display: block; width: 100%; height: auto; margin: 0 auto; }
.rnFig img.figSp { display: none; }
.rnFig figcaption, .rnFig .cap { margin-top: 10px; font-size: 13px; line-height: 1.7; color: #666; }

/* ---------- 画面イメージ（ブラウザ枠／タブレット枠） ---------- */
.rnScreen { margin: 0 auto 12px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(16,32,74,0.18); border: 1px solid #d9dde6; }
.rnScreen .bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #eceff4; border-bottom: 1px solid #d9dde6; }
.rnScreen .bar i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #d0d4dc; }
.rnScreen .bar i:first-child { background: #e06c5c; }
.rnScreen .bar span { margin-left: 10px; padding: 2px 12px; font-size: 11px; color: #777; background: #fff; border-radius: 10px; }
.rnScreen img { display: block; width: 100%; height: auto; }
.rnScreen.tablet { max-width: 640px; padding: 16px; border-radius: 24px; background: #1d2433; border: none; }
.rnScreen.tablet img { border-radius: 6px; }
.rnScreen.phone { max-width: 280px; padding: 12px; border-radius: 30px; background: #1d2433; border: none; }
.rnScreen.phone img { border-radius: 18px; }
.rnScreenNote { font-size: 12.5px; color: #777; text-align: center; }

/* ---------- 2カラム（文章＋図） ---------- */
.rnSplit { display: flex; align-items: center; gap: 40px; }
.rnSplit > * { flex: 1; min-width: 0; }
.rnSplit.rev { flex-direction: row-reverse; }
.rnSplit .txt { font-size: 16px; line-height: 2; }
.rnSplit .txt h4, .rnSplit .txt h3:where(.rnH4) { margin: 0 0 10px; font-size: 21px; line-height: 1.5; color: #b80000; }

/* ---------- チェックリスト／注記 ---------- */
.rnCheck { margin: 0; padding: 0; list-style: none; }
.rnCheck li { position: relative; padding: 0 0 0 30px; margin-bottom: 8px; font-size: 15.5px; line-height: 1.8; }
.rnCheck li:before { content: ""; position: absolute; top: 5px; left: 2px; width: 16px; height: 9px; border-left: 3px solid #b80000; border-bottom: 3px solid #b80000; transform: rotate(-45deg); }
.rnNote { margin: 16px 0 0; font-size: 13px; line-height: 1.8; color: #666; }
.rnBox { padding: 22px 26px; background: #fff; border: 2px solid #1C4C9F; }
.rnBox.red { border-color: #b80000; }
.rnBox h4, .rnBox h3:where(.rnH4) { margin: 0 0 8px; font-size: 18px; color: #1C4C9F; }
.rnBox.red h4, .rnBox.red h3:where(.rnH4) { color: #b80000; }

/* ---------- ボタン ---------- */
.rnBtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 24px 0 0; }
.rnBtn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 280px; padding: 16px 40px 16px 24px; box-sizing: border-box; font-size: 16px; font-weight: bold; color: #fff; text-decoration: none; background: #b80000; border-radius: 4px; transition: background-color 0.2s; }
.rnBtn:after { content: ""; position: absolute; top: 50%; right: 18px; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
.rnBtn:hover, .rnBtn:visited { color: #fff; }
.rnBtn:hover { background: #9a0000; }
.rnBtn.navy { background: #1C4C9F; }
.rnBtn.navy:hover { background: #163d80; }
.rnBtn.line { color: #b80000; background: #fff; border: 2px solid #b80000; }
.rnBtn.line:after { border-color: #b80000; }
.rnBtn.line:hover { color: #fff; background: #b80000; }
.rnBtn.line:hover:after { border-color: #fff; }

/* ---------- 全ページ共通 デュアルCTA ---------- */
#contents.contactus.rnCta { display: block !important; width: 100%; padding: 64px 0 56px; }
.rnCta .rnCtaLead { margin: 18px 0 30px; font-size: 16px; line-height: 2; text-align: center; color: #333; }
.rnCtaCols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; width: 90%; margin: 0 auto; }
.rnCtaCol { display: flex; flex-direction: column; align-items: center; padding: 26px 22px 24px; text-align: center; color: #2b2b2b; background: rgba(255,255,255,0.96); border: 1px solid #e3e3e3; border-top: 4px solid #1C4C9F; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.rnCtaCol:hover { color: #2b2b2b; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.rnCtaCol img { width: 56px; height: 56px; }
.rnCtaCol .tag { margin-top: 10px; padding: 2px 10px; font-size: 12px; font-weight: bold; color: #fff; background: #1C4C9F; border-radius: 3px; }
.rnCtaCol.main { border-top-color: #b80000; }
.rnCtaCol.main .tag { background: #b80000; }
.rnCtaCol h4, .rnCtaCol h3:where(.rnH4) { margin: 10px 0 6px; font-size: 18px; line-height: 1.5; color: #b80000; }
.rnCtaCol p { margin: 0 0 14px; font-size: 14px; line-height: 1.8; }
.rnCtaCol .go { margin-top: auto; font-size: 14px; font-weight: bold; color: #1C4C9F; }
.rnCtaCol .go:after { content: " →"; }

/* フッター：SNSリンク */
.rnFooterSns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin: 18px 0 0; padding: 0; list-style: none; }
.rnFooterSns a { display: inline-block; padding: 6px 16px; font-size: 12.5px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.4); border-radius: 20px; }
.rnFooterSns a:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* ---------- ページ冒頭のリード見出し（パンくず直後の .subtitle.rnLead） ----------
   英字ラベル → 大見出し（キーワードを赤マーカーで強調）→ 赤紺のバー → サブコピー の構成。
   背景は四隅にうっすらドット柄、見出しの左上に赤・右下に紺の三角（ブランドの三角モチーフ） */
#contents .subtitle.rnLead { position: relative; margin: 0; padding: 64px 20px 60px; text-align: center; border: 0; border-radius: 0; background: linear-gradient(180deg, #f4f6fb 0%, #fff 100%); overflow: hidden; }
#contents .subtitle.rnLead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(28,76,159,0.18) 1.2px, transparent 1.8px) 0 0 / 20px 20px; -webkit-mask-image: radial-gradient(ellipse 60% 78% at 50% 50%, transparent 48%, #000 100%); mask-image: radial-gradient(ellipse 60% 78% at 50% 50%, transparent 48%, #000 100%); pointer-events: none; }
#contents .subtitle.rnLead .subtitleBody { position: relative; z-index: 1; display: inline-block; width: auto; max-width: 980px; padding: 34px 64px 36px; box-sizing: border-box; }
#contents .subtitle.rnLead .subtitleBody > br { display: none; }
#contents .subtitle.rnLead .subtitleBody::before { top: 0; left: 0; width: 28px; height: 28px; }
#contents .subtitle.rnLead .subtitleBody::after { top: auto; bottom: 0; left: auto; right: 0; width: 28px; height: 28px; background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #1C4C9F 50.5%) no-repeat; }
#contents .subtitle.rnLead .rnLeadEn { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 16px; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 0.3em; text-indent: 0.3em; color: #b80000; }
#contents .subtitle.rnLead .rnLeadEn::before, #contents .subtitle.rnLead .rnLeadEn::after { content: ""; width: 32px; height: 1px; background: currentColor; }
#contents .subtitle.rnLead .subtitleBody .title { margin: 0; font-size: clamp(22px, 2.2vw + 10px, 38px); font-weight: 700; line-height: 1.55; letter-spacing: 0.06em; color: #10204a; word-break: auto-phrase; text-wrap: balance; overflow-wrap: anywhere; }
#contents .subtitle.rnLead .subtitleBody .title em { font-style: normal; color: #b80000; background: linear-gradient(transparent 66%, rgba(184,0,0,0.13) 66%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#contents .subtitle.rnLead .subtitleBody .title::after { content: ""; display: block; width: 64px; height: 4px; margin: 22px auto 0; background: linear-gradient(90deg, #b80000 0 50%, #1C4C9F 50% 100%); }
#contents .subtitle.rnLead .subtitleBody .subtitle { margin: 20px 0 0; padding: 0; font-size: 17px; font-weight: bold; line-height: 1.8; letter-spacing: 0.06em; color: #444; word-break: auto-phrase; text-wrap: balance; }
#contents .subtitle.rnLead .rnLeadTags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 720px; margin: 24px auto 0; padding: 0; list-style: none; }
#contents .subtitle.rnLead .rnLeadTags li { padding: 5px 16px; font-size: 14.5px; font-weight: bold; line-height: 1.6; color: #10204a; background: #fff; border: 1px solid #d6dbe6; border-radius: 30px; box-shadow: 0 2px 6px rgba(16,32,74,0.06); }
#contents .subtitle.rnLead .rnLeadTags li.sys { font-family: Arial, "Helvetica Neue", sans-serif; letter-spacing: 0.04em; color: #fff; background: #1C4C9F; border-color: #1C4C9F; }
#contents .subtitle.rnLead .rnLeadTags li.etc { padding-left: 4px; padding-right: 4px; color: #777; background: none; border: 0; box-shadow: none; }
@media screen and (max-width: 767px) {
	#contents .subtitle.rnLead { padding: 32px 12px 28px; }
	#contents .subtitle.rnLead .subtitleBody { display: block; padding: 24px 16px 26px; }
	#contents .subtitle.rnLead .subtitleBody::before, #contents .subtitle.rnLead .subtitleBody::after { width: 18px; height: 18px; }
	#contents .subtitle.rnLead .rnLeadEn { gap: 10px; margin-bottom: 12px; font-size: 11px; letter-spacing: 0.22em; text-indent: 0.22em; }
	#contents .subtitle.rnLead .rnLeadEn::before, #contents .subtitle.rnLead .rnLeadEn::after { width: 20px; }
	#contents .subtitle.rnLead .subtitleBody .title { letter-spacing: 0.03em; }
	#contents .subtitle.rnLead .subtitleBody .title::after { width: 48px; margin-top: 18px; }
	#contents .subtitle.rnLead .subtitleBody .subtitle { margin-top: 16px; font-size: 14px; letter-spacing: 0.03em; }
	#contents .subtitle.rnLead .rnLeadTags { gap: 6px; margin-top: 18px; }
	#contents .subtitle.rnLead .rnLeadTags li { padding: 3px 11px; font-size: 12.5px; }
}

/* ---------- 本文（#contentsBody 直下の .bunn） ----------
   1行が長すぎて読みにくかったため、約45文字/行に抑えて中央にそろえ、行間・字間を整える。
   見出し直後の導入文は白いカードにして、リード見出しと重ねて見せる */
#contentsBody > .bunn { max-width: 860px; margin-left: auto; margin-right: auto; font-size: 16.5px; line-height: 2.1; letter-spacing: 0.04em; text-wrap: pretty; }
#contentsBody > .rnValue { max-width: 920px; box-sizing: border-box; }
#contentsBody > .rnBox { max-width: 860px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
#contentsBody > .bunn strong { background: linear-gradient(transparent 70%, rgba(184,0,0,0.10) 70%); }
#contents .subtitle.rnLead + br { display: none; }
.rnLead ~ #contentsBody > .bunn:first-child { position: relative; z-index: 2; max-width: 920px; margin-top: -28px; padding: 44px 56px 46px; box-sizing: border-box; color: #333; background: #fff; border: 1px solid #e3e7ef; border-radius: 6px; box-shadow: 0 14px 36px rgba(16,32,74,0.08); }
.rnLead ~ #contentsBody > .bunn:first-child::before { content: ""; position: absolute; top: -1px; left: 56px; width: 64px; height: 4px; background: linear-gradient(90deg, #b80000 0 50%, #1C4C9F 50% 100%); }
.rnLead ~ #contentsBody > .bunn:first-child::after { content: ""; display: block; clear: both; }
/* 本文中の章見出しの下線も、リード見出しと同じ赤紺のバーに */
#contents > .subtitle:not(.rnLead) > hr:not(.hr-white), #contents > .subtitle:not(.rnLead) > p[style*="#c00"] { width: 56px; height: 4px; margin: 18px auto 0; border: 0; background: linear-gradient(90deg, #b80000 0 50%, #1C4C9F 50% 100%); }
#contents > .subtitle:not(.rnLead) > .title { letter-spacing: 0.05em; }
@media screen and (max-width: 767px) {
	#contentsBody > .bunn { max-width: none; font-size: 15px; line-height: 2; letter-spacing: 0.02em; }
	.rnLead ~ #contentsBody > .bunn:first-child { margin-top: -14px; padding: 26px 18px 26px; border-radius: 4px; }
	.rnLead ~ #contentsBody > .bunn:first-child::before { left: 18px; width: 48px; }
	#contents > .subtitle:not(.rnLead) > hr:not(.hr-white), #contents > .subtitle:not(.rnLead) > p[style*="#c00"] { width: 44px; margin-top: 14px; }
}

/* ---------- 改行の整え ----------
   見出し・ボタン・ラベルは文節単位で改行し、行の長さをそろえて1〜2文字だけの行を防ぐ。
   本文は最終行が極端に短くならないようにする（いずれも非対応ブラウザでは従来どおり） */
.rnHead .jp, .rnValue, .rnCard h4, .rnCase h4, .rnCase .client, .rnSteps h4, .rnBox h4, .rnSplit .txt h4, .rnCtaCol h4, .rnFacts .label, .rnBtn, .rnTable th,
.rnFig figcaption, .rnScreenNote, #contents :is(h2,h3).subtitle, .title_comment_all.rnAsH3, .subtitleBody .title, .subtitleBody .subtitle, .bunn strong, .threeDetailCol span, .rnCard h3:where(.rnH4), .rnCase h3:where(.rnH4), .rnSteps h3:where(.rnH4), .rnBox h3:where(.rnH4), .rnSplit .txt h3:where(.rnH4), .rnCtaCol h3:where(.rnH4) {
	word-break: auto-phrase; text-wrap: balance; overflow-wrap: anywhere;
}
.rnLeadText, .rnCard p, .rnCase dd, .rnSteps p, .rnCheck li, .rnTable td, .rnTimeline .body, .rnCtaCol p, .bunn p, .bunn li {
	text-wrap: pretty;
}

/* ---------- 拠点地図（各ページ下部の .companyMap）：style.css の margin-left:10% + width:100% で右にはみ出すのを中央寄せに ---------- */
.company .companyMap { width: auto; max-width: 1040px; margin: 0 auto 24px; padding: 0 40px; box-sizing: border-box; }
.company .companyMap:after { content: ""; display: block; clear: both; }
.company .companyMap .map { width: 38%; }
.company .companyMap .text { margin-left: 43%; }
@media screen and (max-width: 767px) {
	.company .companyMap { margin: 0 0 20px; padding: 0 20px; }
	.company .companyMap .map { float: none; width: 100%; }
	.company .companyMap .text { margin-left: 0; }
	.company .companyMap .logo br:first-child { display: none; }
}

/* ---------- グローバルナビ（PC）：プルダウン項目の文字切れ防止・親項目の▼ ---------- */
@media screen and (min-width: 769px) {
	nav.gnav ul li ul { width: auto; min-width: 250px; }
	nav.gnav ul li ul li, nav.gnav ul li ul li ul li { float: none; width: auto; white-space: nowrap; }
	nav.gnav ul li ul li > a { display: block; padding-right: 36px; }
	nav.gnav > ul > li.subnav > a { padding-right: 7px; }
	nav.gnav > ul > li.subnav > a:after { content: ""; display: inline-block; position: relative; top: -3px; width: 5px; height: 5px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
}
/* 769〜1049px：項目の間隔を詰めて1段に収める */
@media screen and (min-width: 769px) and (max-width: 1049px) {
	nav.gnav > ul > li { margin: 5px 2px; padding: 5px 4px; }
	nav.gnav > ul > li.subnav > a { padding-right: 2px; }
	nav.gnav > ul > li.subnav > a:after { margin-left: 6px; }
}
/* ---------- グローバルナビ（スマホ）：階層がわかるインデントと開閉アイコン ---------- */
@media screen and (max-width: 768px) {
	nav.gnav > ul { background: #efefef; }
	nav.gnav li li { border-bottom-width: 1px; background: #f7f7f7; }
	nav.gnav li li a { padding-left: 36px; }
	nav.gnav li li li { background: #fff; }
	nav.gnav li li li a { padding: 10px 20px 10px 52px; font-size: 14px; font-weight: normal; }
	nav.gnav .subnav > a:before { display: none; }
	nav.gnav .subnav > a:after, nav.gnav .subnav > a:hover:after { top: 20px; right: 24px; width: 8px; height: 8px; margin-top: -6px; background: none; border-right: 2px solid #b80000; border-bottom: 2px solid #b80000; transition: transform 0.2s; }
	nav.gnav .subnav > a:hover:after { border-color: #fff; }
	nav.gnav li.subnav.active > a { color: #b80000 !important; }
	nav.gnav li.subnav.active > a:hover { color: #fff !important; }
	nav.gnav .subnav.active > a:after { margin-top: -2px; transform: rotate(-135deg); }
}

/* ---------- レスポンシブ ---------- */
@media screen and (max-width: 1023px) {
	.rnCards.col4 { grid-template-columns: repeat(2, 1fr); }
	.rnCards { grid-template-columns: repeat(2, 1fr); }
	.rnSteps { flex-direction: column; }
	.rnSteps li + li { margin: 18px 0 0; }
	.rnSteps li:not(:last-child):after { top: auto; right: auto; bottom: -24px; left: 50%; margin: 0 0 0 -10px; border: 10px solid transparent; border-top: 12px solid #b80000; }
}
@media screen and (max-width: 767px) {
	.rnSection { padding: 40px 0; }
	.rnHead .jp { font-size: 20px; }
	.rnLeadText { font-size: 14.5px; text-align: left; }
	.rnValue { padding: 20px 18px; font-size: 16px; }
	/* 下層ページのヒーロー：インラインの vw 指定（2vw/1vw 等）ではスマホで7px前後になるため、読める大きさに */
	/*   ページ専用CSSで個別に調整したページはそちらを優先するよう、詳細度を :where() で下げている */
	.slide > div:where([style*="vw"]:not([style*="#000"])) { left: 0 !important; width: 100%; padding: 0 14px; box-sizing: border-box; text-align: center; line-height: 1.45; text-shadow: 0 1px 4px rgba(0,0,0,0.55); word-break: auto-phrase; text-wrap: balance; }
	.slide > div:where([style*="vw"][style*="bold"]:not([style*="#000"])) { top: auto !important; bottom: 35%; font-size: 17px !important; letter-spacing: 0.04em !important; }
	.slide > div:where([style*="vw"]:not([style*="bold"])) { top: 67% !important; font-size: 10.5px !important; letter-spacing: 0.04em !important; }
	/* 数字バッジは2列にして縦に間延びさせない（奇数個なら最後を横いっぱいに） */
	.rnFacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
	.rnFacts li { max-width: none; padding: 14px 8px 12px; }
	.rnFacts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.rnFacts .num { font-size: 28px; }
	.rnFacts .num small { font-size: 14px; }
	.rnFacts .label { margin-top: 6px; font-size: 12.5px; line-height: 1.5; }
	.rnCards, .rnCards.col2, .rnCards.col4 { grid-template-columns: 1fr; gap: 16px; }
	.rnCard { padding: 22px 18px 18px; }
	.rnCard h4, .rnCard h3:where(.rnH4) { font-size: 17px; }
	.rnCard p { font-size: 14px; }
	.rnSplit, .rnSplit.rev { flex-direction: column; gap: 20px; }
	.rnSplit .txt { font-size: 14.5px; }
	.rnFig img.figPc { display: none; }
	.rnFig img.figSp { display: block; }
	.rnTable { font-size: 13.5px; }
	.rnTable th, .rnTable td { padding: 10px; }
	.rnBtn { min-width: 0; width: 100%; }
	/* CTA：スマホはアイコン左・本文右の横長カードにして縦の長さを抑える */
	#contents.contactus.rnCta { padding: 44px 0 40px; }
	.rnCta .rnCtaLead { margin: 14px 0 22px; padding: 0 16px; font-size: 14px; text-align: left; }
	.rnCtaCols { grid-template-columns: 1fr; gap: 12px; }
	.rnCtaCol { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; padding: 16px 16px 14px; text-align: left; }
	.rnCtaCol > * { grid-column: 2; }
	.rnCtaCol img { grid-column: 1; grid-row: 1 / span 4; width: 44px; height: 44px; margin-top: 2px; }
	.rnCtaCol .tag { justify-self: start; margin-top: 0; font-size: 11px; }
	.rnCtaCol h4, .rnCtaCol h3:where(.rnH4) { margin: 6px 0 4px; font-size: 16px; }
	.rnCtaCol p { margin: 0 0 6px; font-size: 13px; line-height: 1.7; }
	.rnCtaCol .go { font-size: 13px; }
	/* フッター：見出しの下に子リンクを横並びで折り返して縦長を抑え、行間を広げて押しやすく。
	   コピーライトは右下のページトップボタンに隠れないように */
	footer .fnav { margin: 0 20px; }
	footer .fnav ul li { margin: 0; padding: 4px 0; font-size: 12.5px; line-height: 1.5; }
	footer .fnav > ul > li.subnav5 { padding-top: 10px; font-size: 13px; font-weight: bold; }
	footer .fnav ul ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 2px; }
	footer .fnav ul ul li { font-size: 12.5px; font-weight: normal; }
	footer .fnav ul ul li:has(> ul) { flex-basis: 100%; }
	footer .fnav ul ul ul { padding-left: 12px; border-left: 2px solid rgba(255,255,255,0.2); }
	footer .fnav > ul > li:not(.subnav5) { display: none; }
	footer .copyright { padding: 16px 76px 18px 16px; box-sizing: border-box; line-height: 1.6; text-wrap: balance; }
}

/* ==========================================================================
   SEO用のタグ構造変更（見出し要素・main・nav）に伴う打ち消し
   style.css の h1〜h3 要素への既定スタイル（h1:100px、h2:余白・28px・spanの線、h3:30px 等）が
   新しい見出しに効かないよう、変更前の要素（div・p・h3）と同じ見た目に戻す。
   tag:where(.class) で詳細度を「要素セレクタ1つ分」にそろえ、各クラスの指定は従来どおり優先させる
   ========================================================================== */
main { display: block; }
/* ロゴ（旧 header h1） */
header .siteLogo { float: left; font-size: 16px; line-height: 50px; color: #fff; }
@media screen and (max-width: 768px) {
	header .siteLogo { padding: 0 0 0 10px; }
	header .siteLogo .img_logo { width: min(240px, calc(100vw - 195px)); background-size: contain; background-position: left center; }
}
/* 下層ページのヒーロー内ページ名（親の div の書式をそのまま使う） */
h1:where(.rnPageTitle) { display: inline; margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; }
/* div から変えた見出し */
h2:where(.rnH2Div) { margin: 0; font-size: 100%; line-height: inherit; color: inherit; text-align: inherit; }
/* p から変えた見出し（style.css の p { font-size:13px } 相当） */
h2:where(.rnH2P) { margin: 0; font-size: 13px; line-height: inherit; color: inherit; text-align: inherit; }
/* h3 から変えた見出し（style.css の h3 の既定スタイル相当） */
:is(div, h1, h2):where(.rnAsH3) { margin: 0 0 0.25em; font-size: 30px; line-height: inherit; text-align: center; font-weight: bold; color: #424242; letter-spacing: 0.07em; }
@media screen and (max-width: 767px) {
	:is(div, h1, h2):where(.rnAsH3) { font-size: 18px; }
}
/* style.css の h2 span／h2 span::before・::after（見出し横の線）を無効化 */
h2:where(.rnH2Div, .rnH2P, .rnAsH3) span { font-size: 100%; position: static; }
h2:where(.rnH2Div, .rnH2P, .rnAsH3) span::before, h2:where(.rnH2Div, .rnH2P, .rnAsH3) span::after { content: none; position: static; top: auto; right: auto; left: auto; z-index: auto; margin-top: 0; border-top: 0; }
/* ページトップのタイトル：赤三角・ページ名・英字を、どの画面幅でも中央にそろえる
   （各ページの left:◯% 指定は文字の長さ分だけ中心からずれるため） */
.slide > div[class*="top-red"] { left: 50% !important; transform: translateX(-50%); }
.slide > div:where([style*="vw"]:not([style*="#000"])) { left: 0 !important; width: 100%; box-sizing: border-box; text-align: center; }

/* SEO見出し階層：h2直下のh4をh3へ変更。見た目は従来のh4と同じに保つ（style.css の h3/h4 ルールを打ち消し・再現） */
h3:where(.rnH4) { margin: 0.25em 0; font-size: 16px; font-weight: bold; text-align: inherit; color: inherit; letter-spacing: normal; }