@charset "utf-8";
/* ==========================================================================
   rn-product.css  product.html（プロダクト・自社サービス開発）専用の追加スタイル
   ・共通部品は renewal.css を使用し、ここではページ固有の不足分のみを定義
   ========================================================================== */

/* ヒーロー：他ページと同じく、赤三角・ページ名・英字を中央に縦並び */
.slide .pvHeroTtl { position: absolute; top: 55%; left: 0; width: 100%; color: #fff; text-align: center; font-size: 2vw; font-weight: bold; letter-spacing: 0.07em; }
.slide .pvHeroEn { position: absolute; top: 65%; left: 0; width: 100%; color: #fff; text-align: center; font-size: 1vw; }
.slide .consultop-red.pvTri { top: 43%; left: calc(50% - 1.25vw); }

/* アンカー位置（固定ヘッダー分） */
.rnSection[id] { scroll-margin-top: 110px; }

/* リード・ページ内ナビ */
.pvLead a { color: #1C4C9F; font-weight: bold; }

/* ラベル（自社サービス／開設年） */
.pvLabel { margin: 0 0 10px; }
.pvLabel span { display: inline-block; margin: 0 8px 4px 0; padding: 2px 12px; font-size: 12.5px; font-weight: bold; line-height: 1.7; color: #fff; background: #b80000; border-radius: 3px; }
.pvLabel span.sub { color: #1C4C9F; background: #eaf0fa; }
.rnSplit .txt p { margin: 0 0 12px; }
.rnSplit .txt .rnCheck { margin: 4px 0 8px; }
.rnSplit .txt .rnCheck b { color: #b80000; }
.rnBtns.left { justify-content: flex-start; }

/* ケーススタディ */

/* R&D / AI Lab（濃紺背景） */
#lab .rnHead .en { color: #ff9c9c; }
#lab .rnLeadText strong.pvW { color: #fff; }
#lab .rnSplit .txt { color: #fff; }
#lab .rnSplit .txt h4, #lab .rnSplit .txt h3:where(.rnH4) { color: #fff; }
#lab .rnScreenNote, #lab .rnNote { color: #c9d2e8; }
#lab .rnNote a { color: #fff; font-weight: bold; }
#lab .rnScreen { border-color: #2c3b66; }
.pvLabSplit { margin-bottom: 40px; }
#lab .rnBtn.line { border-color: #fff; }

/* 過去の自社サービス（アーカイブ） */

@media screen and (max-width: 767px) {
	/* スマホ：他ページ（renewal.css のヒーロー共通指定）と同じ大きさ・位置 */
	.slide .pvHeroTtl { top: auto; bottom: 35%; padding: 0 14px; box-sizing: border-box; font-size: 17px; letter-spacing: 0.04em; line-height: 1.45; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
	.slide .pvHeroEn { top: 67%; font-size: 10.5px; letter-spacing: 0.04em; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
	.rnSection[id] { scroll-margin-top: 80px; }
	.rnBtns.left { justify-content: center; }
}
@media screen and (max-width: 767px) {
	.subtitle .subtitleBody.business .title { font-size: 22px; line-height: 1.6; }
}

/* 表示品質調整（文節改行・ボタン） */
@media screen and (max-width: 767px) {
	/* CASE STUDY ラベル：スマホは区切り記号を消して2行に */
	.rnHead .en .pvSep { display: none; }
	/* アーカイブ見出し：サービス名と説明を2行に分け、語の途中で改行しない */
	/* 長いボタン：1行に収める */
	.rnBtn.pvBtnLong { font-size: 15px; letter-spacing: -0.01em; padding-left: 20px; }
}

/* 改行させない語句（最終行に1〜2文字だけ残るのを防ぐ） */
.pvNw { white-space: nowrap; }
/* おもろ会議 → ガチ会議 → 自社サービス の流れ */
.pvFlow { margin-top: 8px; }
.pvFlow h4, .pvFlow h3:where(.rnH4) { word-break: auto-phrase; }
/* 各プロダクトの画像（斜めのバナー）・利用シーン写真・概要 */
.pvBanner { max-width: 960px; margin: -4px auto 30px; }
.pvBanner img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(16,32,74,0.18)); }
.pvScenes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pvScenes li { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 6px 18px rgba(16,32,74,0.12); }
.pvScenes li:first-child { grid-column: 1 / -1; }
.pvScenes img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pvScenes li:not(:first-child) img { aspect-ratio: 4 / 3; }
.pvScenes span { position: absolute; left: 0; bottom: 0; padding: 4px 12px; font-size: 13px; font-weight: bold; color: #fff; background: rgba(16,32,74,0.82); border-radius: 0 6px 0 0; }
.pvInfo { margin: 0; padding: 24px 26px; background: #fff; border-top: 4px solid #b80000; border-radius: 6px; box-shadow: 0 6px 18px rgba(16,32,74,0.08); }
.pvInfo dt { margin: 16px 0 4px; font-size: 13px; font-weight: bold; letter-spacing: 0.06em; color: #1C4C9F; }
.pvInfo dt:first-child { margin-top: 0; }
.pvInfo dd { margin: 0; padding-bottom: 14px; font-size: 15.5px; font-weight: bold; line-height: 1.7; color: #2b2b2b; border-bottom: 1px dashed #dde1ea; word-break: auto-phrase; }
.pvInfo dd:last-child { padding-bottom: 0; border-bottom: 0; }
.rnSection:not(.gray) .pvInfo { background: #f5f6f9; box-shadow: none; }
.rnSplit > .pvScenes, .rnSplit > .pvInfo { flex: 1; }
@media screen and (max-width: 767px) {
	.pvBanner { margin: 0 -2% 20px; }
	.pvInfo { padding: 18px 16px; }
	.pvInfo dd { font-size: 14.5px; }
	.pvScenes { gap: 8px; }
}