@charset "utf-8";
/* ==========================================================================
   case_kansai.css — 導入事例（関西電力様）ページ専用スタイル
   2026-08-24 / ポチ

   背景：本ページは 2026-07-24 のリニューアル前アーカイブから現行テンプレートへ
   移植したもの。旧ページは自前の subpages.css（60KB）を読んでおり、その中に
   .companyInfoBox / .mid-cta / .final-cta の定義があった。現行の共通CSSには
   これらが無いため、移植直後はスタイル無しの素のHTMLとして落ちていた。

   方針（五月女確認済み 2026-08-24）：
     ①旧CSSは持ち込まず、現行サイトのトンマナで作り直す
       - メイン #004da0 ／ CTA #BF5700 ／ 濃紺 #16283f
       - 末尾CTAは既存コンポーネント .pageEndCta と同一仕様に揃える
     ②本文7セクションの画像はテキストと2カラム（左右交互）にする
       - 旧版は画像が原寸(500x200/500x667)で本文中に浮き、縦長2枚は
         画面高の74%を占めていた
       - SP(768px以下)では縦積みへ自動復帰させる

   このファイルを読み込まなければ移植直後の状態に戻る（既存CSSは1行も変更しない）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 会社情報ブロック（.companyInfoBox）
   旧：定義が無く、定義リストが崩れて写真が下に原寸で落ちていた
   新：テキスト左／写真右の2カラム。ラベルは折り返さない幅を確保する
   -------------------------------------------------------------------------- */
.caseKansai .companyInfoBox {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: start;
	background-color: #f5f8fc;
	border: 1px solid #dde6f1;
	border-left: 4px solid #004da0;
	border-radius: 6px;
	padding: 28px 30px;
	margin: 24px 0 8px;
}
.caseKansai .companyInfoBox > ul {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;            /* grid内で子が縮まない罠を塞ぐ */
}
/* ⚠️ 既存CSS（subpages.css）が同クラスに display:flex; flex-direction:row を当てており、
   ラベル(s1/s3)と値(s2/s4)が横並びになってラベル列が痩せ、
   「成果実感コメン/ト」と語中で折り返していた（実測 s3=277px/12行）。
   同じ詳細度では勝てないため .caseKansai を2つ重ねて詳細度を上げ、縦積みへ戻す。 */
.caseKansai.caseKansai .companyInfoBox > ul > li {
	display: block;
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px dotted #cfdcea;
	font-size: 1.5rem;
	line-height: 1.8;
	list-style: none;
}
.caseKansai .companyInfoBox > ul > li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
/* ラベル（s1/s3）＋値（s2/s4）を定義リスト風に。
   ⚠️ ラベルを内包ブロックにすると「成果実感コメン/ト」と語中で折り返す実測あり。
   ラベル行は横幅いっぱいの見出しとして独立させ、折り返しを禁止する。 */
.caseKansai.caseKansai .companyInfoBox .s1,
.caseKansai.caseKansai .companyInfoBox .s3 {
	display: block;
	width: 100%;
	font-size: 1.3rem;
	font-weight: bold;
	color: #004da0;
	letter-spacing: .04em;
	margin-bottom: 6px;
	white-space: nowrap;     /* 語中での折り返しを禁止 */
}
.caseKansai.caseKansai .companyInfoBox .s2,
.caseKansai.caseKansai .companyInfoBox .s4 {
	display: block;
	font-size: 1.5rem;
	line-height: 1.8;
	color: #1a1a1a;
}
/* 成果実感コメントは引用として少し立たせる */
.caseKansai .companyInfoBox li.achievement .s4 {
	background-color: #fff;
	border-radius: 4px;
	padding: 14px 18px;
	border-left: 3px solid #BF5700;
}
/* 成果実感コメントを右いっぱいまで広げる（右の空白解消・五月女指摘）。
   ⚠️ HTMLは companyInfoBox > ul > li の入れ子で、コメントは ul の中の
   li.achievement。ラッパーが無いため grid-area では出せない。
   そこで ul 自体を2列グリッドの1列目に置いたまま、
   li.achievement だけ「写真の下」に来るよう ul を全幅に伸ばす方式にする：
   ①写真を1行目の2列目に固定 ②ul は1行目〜2行目にまたがらせる
   ③ul内の通常liは写真幅ぶん右に食い込まない（＝上2件は左カラム幅）
   ④li.achievement のみ負のマージンで写真カラム側まで広げる。 */
.caseKansai.caseKansai .companyInfoBox {
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: start;
}
.caseKansai.caseKansai .companyInfoBox_img {
	grid-column: 2;
	grid-row: 1;
}
.caseKansai.caseKansai .companyInfoBox > ul {
	grid-column: 1;
	grid-row: 1;
}
/* 成果実感コメントだけ、右の写真カラム＋gap ぶん広げる */
.caseKansai.caseKansai .companyInfoBox > ul > li.achievement {
	margin-right: -332px;     /* 写真300px + gap32px */
}
.caseKansai .companyInfoBox_img {
	margin: 0;
}
.caseKansai .companyInfoBox_img img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;        /* 縦長原寸(500x667)がそのまま伸びるのを防ぐ */
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. 本文セクションの画像を2カラム化（.secBlock）
   旧：figure が本文幅いっぱいのブロックで、画像は原寸のまま中央に浮いていた
   新：直後の吹き出し群と横並びにし、セクションごとに左右を入れ替える
   -------------------------------------------------------------------------- */
.caseKansai .secBlock {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 28px 36px;
	align-items: start;
	margin-bottom: 8px;
}
.caseKansai .secBlock > .secBlock_txt { min-width: 0; }
/* ⚠️ 画像カラムは sticky にする。
   元画像が 500x200（横長バナー）で、380px幅で置くと高さ152pxにしかならない。
   一方テキスト側は長いセクションで 800〜2,000px あり、実測で右側に
   665〜1,589px の空白が生まれていた（五月女指摘）。
   元画像が500px幅しかないため引き伸ばすと粗くなる＝拡大では解決しない。
   スクロールに追従させることで、読んでいる間ずっと画像が視野に入る形にする。 */
.caseKansai .secBlock > .secBlock_img {
	margin: 0;
	min-width: 0;
	position: sticky;
	top: 96px;                /* 固定ヘッダーの下に収める */
	align-self: start;        /* stickyはstretchだと効かない */
}
.caseKansai .secBlock > .secBlock_img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
/* 偶数セクションは画像を左へ（左右交互でリズムを作る）
   ⚠️ order だけでは列トラックは入れ替わらない（順序だけ変わり、画像が 1fr 側の
   広いトラックに入って 684px まで伸びた実測あり）。列を明示指定する。 */
.caseKansai .secBlock.is-reverse { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.caseKansai .secBlock.is-reverse > .secBlock_img { grid-column: 1; grid-row: 1; }
.caseKansai .secBlock.is-reverse > .secBlock_txt { grid-column: 2; grid-row: 1; }

/* 縦長画像（img09 500x663）は高さを抑える。
   図表なので object-fit:cover で切ると情報が欠けるため contain で全体を見せる。 */
.caseKansai .secBlock > .secBlock_img img.is-tall {
	max-height: 460px;
	object-fit: contain;
	background-color: #f5f8fc;
}

/* --------------------------------------------------------------------------
   3. 中間CTA（.mid-cta）／ 末尾CTA（.final-cta）
   旧：定義が無く、素のテキストリンクとして落ちていた
   新：既存の .pageEndCta と同一仕様（濃紺グラデ＋オレンジボタン）に揃える
       オレンジ #BF5700 は真のCV導線にのみ使う（資料DLは白枠ボタンで従属させる）

   ⚠️ この2つだけ .caseKansai スコープを付けない。
   .final-cta は voice_detailPage（＝.caseKansai を付けた要素）を閉じた「外側」に
   出力されており、.caseKansai .final-cta では当たらない（実測：inCaseKansai=false・
   background:none・padding:0 で素のテキストリンクのまま本番公開してしまった）。
   .mid-cta は内側だが、対になる指定が片方だけスコープ有りだと将来また事故るので揃える。
   クラス名が固有（mid-cta/final-cta）で他ページに存在しないことを実測確認済み。
   -------------------------------------------------------------------------- */
.mid-cta,
.final-cta {
	background: linear-gradient(135deg, #004087 0%, #00559f 55%, #0a63b5 100%);
	padding: 40px 40px 38px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
/* 中間CTAは本文カラム内のカード → 角丸あり */
.mid-cta {
	margin: 44px 0;
	border-radius: 8px;
}
/* ⚠️ 末尾CTAは body 直下の全幅バンド（実測 0〜1440px）。
   ここに border-radius を付けると四隅から背後の白地が覗く（左右下が白く見える不具合）。
   角丸は付けない。
   また画面下部に .addFooter（position:fixed / height:73px）が居座るため、
   footer と同じだけ下に逃がさないと固定バーとかぶる。 */
.final-cta {
	margin-top: 56px;
	border-radius: 0;
}
.mid-cta::after,
.final-cta::after {
	content: '';
	position: absolute;
	right: -60px;
	bottom: -80px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .05);
	pointer-events: none;
}
.mid-cta-title,
.final-cta-title {
	font-size: 2.2rem;
	font-weight: bold;
	color: #fff;
	line-height: 1.6;
	margin-bottom: 12px;
	position: relative;
	z-index: 1;
}
.mid-cta p,
.final-cta-inner {
	color: #d8e6f5;
	font-size: 1.5rem;
	line-height: 1.8;
	margin: 0 auto 26px;
	max-width: 760px;
	text-align: left;
	position: relative;
	z-index: 1;
}
.mid-cta-buttons,
.final-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	position: relative;
	z-index: 1;
}
.mid-cta-buttons a,
.final-cta-buttons a {
	display: inline-block;
	font-size: 1.6rem;
	font-weight: bold;
	text-decoration: none;
	padding: 17px 40px 16px;
	border-radius: 4px;
	transition: background-color .3s ease, transform .3s ease, color .3s ease;
	box-sizing: border-box;
}
/* 第1導線＝相談（CVオレンジ）。div の2番目に置かれている */
.mid-cta-buttons > div:last-child a,
.final-cta-buttons > div:last-child a {
	background-color: #BF5700;
	color: #fff;
}
.mid-cta-buttons > div:last-child a:hover,
.final-cta-buttons > div:last-child a:hover {
	background-color: #ff7d15;
	transform: translateY(-2px);
	opacity: 1;
}
/* 第2導線＝資料DL（白枠。オレンジを2つ並べてCVを薄めない） */
.mid-cta-buttons > div:first-child a,
.final-cta-buttons > div:first-child a {
	background-color: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, .8);
}
.mid-cta-buttons > div:first-child a:hover,
.final-cta-buttons > div:first-child a:hover {
	background-color: #fff;
	color: #004da0;
	transform: translateY(-2px);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   4. タブレット・スマホ
   2カラムはすべて縦積みへ戻す（横並びのまま縮めると画像もテキストも潰れる）
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
	.caseKansai .secBlock { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; }
	.caseKansai .secBlock.is-reverse { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
	.caseKansai.caseKansai .companyInfoBox { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; }
	/* 写真240px + gap24px に合わせる（1024px帯） */
	.caseKansai.caseKansai .companyInfoBox > ul > li.achievement { margin-right: -264px; }
}
@media only screen and (max-width: 768px) {
	.caseKansai .secBlock,
	.caseKansai .companyInfoBox {
		display: block;
	}
	.caseKansai .secBlock > .secBlock_img { margin-top: 18px; }
	.caseKansai .secBlock > .secBlock_img img { max-width: 100%; }
	.caseKansai .secBlock > .secBlock_img img.is-tall { max-height: 380px; }
	.caseKansai .companyInfoBox { padding: 22px 20px; }
	.caseKansai .companyInfoBox_img { margin-top: 20px; }
	.caseKansai .companyInfoBox_img img { height: 200px; }
	/* ⚠️ 1カラム化したら成果実感コメントの負のマージンを必ず戻す。
	   残すと画面外へ332pxはみ出す（実測 375/390で267px・768で233pxの横溢れ）。 */
	.caseKansai.caseKansai .companyInfoBox > ul > li.achievement { margin-right: 0; }
	/* stickyもSPでは無効化（1カラムでは画像が本文を追い越して見えるため） */
	.caseKansai .secBlock > .secBlock_img { position: static; top: auto; }

	.mid-cta,
	.final-cta { padding: 32px 22px 30px; }
	.mid-cta { margin: 36px 0; }
	.mid-cta-title,
	.final-cta-title { font-size: 1.8rem; }
	.mid-cta p,
	.final-cta-inner { font-size: 1.4rem; margin-bottom: 22px; }
	.mid-cta-buttons,
	.final-cta-buttons { flex-direction: column; gap: 12px; }
	.mid-cta-buttons a,
	.final-cta-buttons a {
		display: block;
		width: 100%;
		padding: 16px 12px 15px;
		font-size: 1.5rem;
	}
}