@charset "utf-8";
/* style.css: 穴吹ソフトプラス 自主ビサイト 共通スタイル */

/* 1. カラー変数とタイポグラフィ */
:root {
	--color-main: #004d99;
	/* ディープブルー（信頼感、専門性） */
	--color-accent: #ff8c00;
	/* オレンジ（CTA、アクション） */
	--color-accent-hover: #e55a5a;
	/* オレンジ（CTA、アクション）ホバー色 */
	--color-text: #333333;
	/* 標準テキスト色 */
	--color-background: #f0f3f5;
	/* セクション背景色（薄いグレーで明確な境界線） */
	--color-border: #c0c0c0;
	/* カードや要素の境界線色 */
	--color-blue: #42a4d3;
	--color-blue-boder: #92a3d7;
	/* セクション境界線色 */
	--color-blue-hover: #92a3d7;
	/* セクションホバー色 */
	--color-green: #09b305;
	--color-green-boder: #4bb949;
	/* セクション境界線色 */
	--color-green-hover: #4bb949;
	/* セクションホバー色 */
	--color-orange: #d3672a;
	--color-orange-boder: #e17e31;
	/* セクション境界線色 */
	--color-orange-hover: #e17e31;
	/* セクションホバー色 */
	--color-text: #4a4a4a;
	--white: #fff;
	--black: #000;
	--menuback: #e4e9f3;
	--menu-border: #999;
	--border-color: #ddd;
	--button-bg-color: #b5b5b5;
	--color-topic-bg: #ececec;
	--color-detail-bg: #ececec;
	--color-dx-border: #0056b3;
	--color-dx-message: #fafad2;
	--color-gate-corner: #eee;
	--color-gate-gradation: #eee;

	--color-bttop-base: #e17e31;
	/* トップへ戻るボタンカラー */
	--color-bttop-hover: #eee;
	/* トップへ戻るボタンhoverカラー */


	--font-family: 'Noto Sans JP', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;
	--transition-speed: 0.3s;
	--spacing-lg: 60px;
	--spacing-md: 30px;
}

/* 2. ベーススタイルとリセット */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-family);
	line-height: 1.6;
	color: var(--color-text);
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
}

a {
	color: var(--color-main);
	text-decoration: none;
	transition: color var(--transition-speed);
}

h1,
h2,
h3 {
	font-weight: 700;
	line-height: 1.3;
}

/* 3. 共通レイアウト */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.bold {
	font-weight: bold;
}

.pc {
	display: inline;
}

.sp {
	display: none;
}

.tcenter {
	text-align: center !important;
}

.tleft {
	text-align: left !important;
}

.tright {
	text-align: right !important;
}

.marker_accent {
	color: var(--color-accent);
}

/* 1. PCナビゲーション */
.menubox {
	display: flex;
	/*	justify-content: flex-end;*/
	justify-content: space-between;
	align-items: center;
	padding: 0px 20px 15px 60px;
	margin-left: 10px;
}

.site-logo {
	display: contents;
	margin-left: 48px;
}

.site-logo img {
	width: 182px;
	margin-top: 6px;
	filter: brightness(100);
}

.header-nav-pc .nav-link {
	display: block;
	padding: 10px 15px;
	margin-left: 5px;
	font-weight: 500;
}

.header-nav-pc ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-nav-pc li a {
	color: var(--white);
}

.header-nav-pc .nav-contact-btn {
	background-color: var(--color-accent);
	color: #FFFFFF;
	border-radius: 4px;
	padding: 10px 20px;
	transition: background-color 0.3s;
}

.header-nav-pc .nav-contact-btn:hover {
	background-color: #E67A00;
}

/* 2. ハンバーガーアイコン (PC非表示) */
.hamburger-menu-btn {
	display: none;
	/* PCでは非表示 */
	background: none;
	border: none;
	cursor: pointer;
	width: 30px;
	height: 30px;
	position: relative;
	z-index: 1000;
	margin-top: 7px;
}

.hamburger-menu-btn span {
	display: block;
	width: 24px;
	height: 3px;
	background-color: var(--white);
	margin-bottom: 5px;
	border-radius: 2px;
	transition: all 0.3s;
}

.hamburger-menu-btn.is-active span {
	background-color: var(--color-main);
}

/* 3. スマホ・タブレット用メニュー (PC非表示) */
.header-nav-sp-tab {
	display: none;
	/* PCでは非表示 */
}

/* --- レスポンシブ切り替え (タブレット・スマホ) --- */
@media (max-width: 992px) {

	/* PC用ナビゲーションを非表示 */
	.header-nav-pc {
		display: none;
	}

	/* ハンバーガーアイコンを表示 */
	.hamburger-menu-btn {
		display: block;
	}

	/* スマホ・タブレット用メニュー（呼び出し格納式） */
	.header-nav-sp-tab {
		position: fixed;
		top: 0;
		right: -100%;
		/* 初期状態では画面外に隠す */
		width: 70%;
		max-width: 300px;
		height: 100%;
		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
		transition: right 0.3s ease-in-out;
		z-index: 999;
	}

	.header-nav-sp-tab ul {
		background-color: var(--menuback);
	}

	.header-nav-sp-tab li {
		padding-left: 18px;
	}

	.header-nav-sp-tab li:hover {
		background-color: var(--white);
	}

	/* JavaScriptで 'is-active' クラスが付与されたら表示 */
	.header-nav-sp-tab.is-active {
		right: 0;
		display: block;
	}

	.header-nav-sp-tab .nav-list-sp {
		list-style: none;
		padding: 10px 20px 20px 10px;
		/* ヘッダーの高さ分を開ける */
		margin: 0;
		border-radius: 8px 0 0 8px;
	}

	.header-nav-sp-tab .nav-list-sp a {
		display: block;
		padding: 15px 0;
		border-bottom: 1px solid var(--menu-border);
		color: var(--color-text);
		font-weight: 500;
	}

	.header-nav-sp-tab .nav-contact-sp {
		color: var(--color-accent) !important;
		font-weight: bold;
	}
}

/* セクションのスタイル (余白を十分にとる)  */
section {
	width: 94%;
	margin-bottom: 3rem;
	margin-right: auto;
	margin-left: auto;
	padding: 3.4rem 20px;
	border: 1px solid var(--color-blue-boder);
	/* セクションの境界を示す  */
	border-radius: 15px;
}

.section-title {
	text-align: center;
	margin-bottom: var(--spacing-md);
	font-size: 28px;
	margin-bottom: 10px;
}

.page-top-accent-bar {
	content: '';
	display: block;
	height: 70px;
	/* 60px〜80pxの間の高さ */
	/* 3色で分割 */
	background: linear-gradient(to right,
			#6a9bd8 60px,
			var(--color-main) 60px, var(--color-main) 99%,
			/* 2色目の開始と終了 */
			#6a9bd8 99%
			/* 3色目の開始 */
		);
	width: 100%;
	/* 帯の上下にシャドウを追加し、締まりを強調 */
	box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.2);
	margin-bottom: 3.4rem;
	position: fixed;
	z-index: 999;
}

.page-header {
	background-color: var(--color-background);
	/* 薄いグレーの背景 */
	/* ページタイトル・概要文用のpaddingを設定 */
	padding-top: 40px;
	padding-bottom: 0;
	/* 帯の前に隙間を設けるため、ここでは下paddingを0にする */
	position: relative;
	margin-bottom: 4rem;
}

/* ページタイトルを含むコンテナのスタイル調整 */
.page-header .container {
	margin-bottom: 30px;
	/* タイトルと帯の間の隙間を確保 */
	position: relative;
	z-index: 20;
	/* 帯の上にテキストが来るように */
}

.page-header h1 {
	font-size: 36px;
	margin-top: 0;
}

.parts-header {
	background-color: var(--color-background);
	/* 薄いグレーの背景 */
	/* ページタイトル・概要文用のpaddingを設定 */
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	margin-bottom: 0.5rem;
	text-align: center;
}

.parts-header h2 {
	margin: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* 4. 共通コンポーネント: CTAボタン */
.btn-cta {
	display: inline-block;
	padding: 15px 30px;
	background-color: var(--color-accent);
	color: #FFFFFF;
	font-weight: 700;
	border-radius: 5px;
	text-align: center;
	transition: background-color var(--transition-speed), transform 0.15s, box-shadow var(--transition-speed);
	cursor: pointer;
	border: none;
	margin-left: 0;
	margin-right: 0;
}

.btn-cta.accent-bule {
	background-color: var(--color-main);
}

.btn-cta.accent-bule:hover {
	background-color: var(--color-blue);
}

/* ホバーエフェクト: 明確に選択されていることを示す */
.btn-cta:hover {
	background-color: var(--color-accent-hover);
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* 5. 共通コンポーネント: カード/リンク要素 (ソリューション・事例) */
.card-grid-top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 25px;
	margin-bottom: 2rem;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 25px;
	margin-bottom: 2rem;
}

.card-grid.short {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card,
.nolink-card {
	display: block;
	/* カード全体をリンクにするため */
	background-color: #FFFFFF;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow var(--transition-speed), transform var(--transition-speed);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	/* 初期状態から弱い影をつけて締める */
}

.card {
	cursor: pointer;
}

/* ホバーエフェクト: 明確に選択されていることを示し、影を強くする */
.card:hover {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
	/* 影をさらに濃く、強くする */
	transform: translateY(-7px);
	/* 動きを強調 */
}

.card-img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	background-color: var(--color-background);
}

.nolink-card .card-img {
	height: 100px;
}

.card-content {
	padding: 20px;
}

.card.cta {
	color: var(--white);
	background-color: var(--color-accent);
}

.card.cta:hover {
	background-color: var(--color-accent-hover);
}

.card.cta-blue {
	color: var(--white);
	background-color: var(--color-blue);
}

.card.cta-blue:hover {
	background-color: var(--color-blue-hover);
}

.card.cta-green {
	color: var(--white);
	background-color: var(--color-green);
}

.card.cta-green:hover {
	background-color: var(--color-green-hover);
}

.card.cta-orange {
	color: var(--white);
	background-color: var(--color-orange);
}

.card.cta-orange:hover {
	background-color: var(--color-orange-hover);
}

.card dl,
.nolink-card dl,
.line-box dl {
	margin-left: 10px;
	margin-right: 10px;
}

.card dt,
.nolink-card dt,
.line-box dt {
	font-weight: bold;
	color: var(--color-main);
}

.card dt.list,
.nolink-card dt.list,
.line-box dt.list {
	margin-inline-start: 0;
}

.card dt.list ul,
.nolink-card dt.list ul,
.line-box dt.list ul {
	padding-inline-start: 1.5rem;
	list-style-type: none;
}

.card dt.list li,
.nolink-card dt.list li,
.line-box dt.list li {
	margin-left: -23px;
}

.card dt.list li::before,
.nolink-card dt.list li::before,
.line-box dt.list li::before {
	content: "●";
}

.card dd.list,
.nolink-card dd.list,
.line-box dd.list {
	margin-inline-start: 0;
}

.card dd.list ul,
.nolink-card dd.list ul,
.line-box dd.list ul {
	padding-inline-start: 1.5rem;
	list-style-type: none;
}

.card dd.list li,
.nolink-card dd.list li,
.line-box dd.list li {
	margin-left: -23px;
}

.card dd.list li::before,
.nolink-card dd.list li::before,
.line-box dd.list li::before {
	content: "●";
}

.card ul.inlist,
.nolink-card ul.inlist,
.line-box ul.inlist {
	list-style: none;
	margin-left: -37px;
}

.card-gate {
	background: linear-gradient(150deg, transparent 0%, transparent 80%, var(--color-gate-corner) 50%, var(--color-gate-gradation) 100%);
}

.card-gate h3 {
	font-size: 1.9em;
}

.list-label {
	padding: 10px;
	border: 1px solid var(--color-main);
	border-radius: 5px;
	background-color: var(--color-main);
	color: var(--white) !important;
	margin-bottom: 10px;
}

.list-label.topic {
	border: 1px solid var(--color-topic-bg);
	background-color: var(--color-topic-bg);
	color: var(--color-text) !important;
}

.header.dx-intro {
	margin-top: 30px;
	margin-bottom: 30px;
	padding-top: 8px;
	padding-bottom: 30px;
	background-color: var(--color-main);
	/* フォールバックカラー */
	color: #FFFFFF;
	text-align: center;
	padding: 0 0 30px 0;
	/* 余白を縮小 */
	background-image: url('../images/dx/dx-intro01.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	/* はみ出した背景を隠す */
	z-index: 1;
}

.header.dx-intro.img2 {
	background-image: url('../images/dx/dx-intro02.jpg');
}

.header.dx-intro.img3 {
	background-image: url('../images/dx/dx-intro03.jpg');
}

.header.dx-intro::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	/* テキストより下に、背景画像より上に配置 */
	border-radius: 15px;
}

/* ヒーローセクション内のテキストスタイル */
.header.dx-intro h1,
.header.dx-intro h2 {
	color: #FFFFFF;
	font-size: 28px;
	position: relative;
	/* オーバーレイより上に配置 */
	z-index: 3;
	/* ★文字の境界線（影）を適用★ */
	text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
}

.header.dx-intro h1 {
	font-size: 44px;
}

.header.dx-intro p {
	font-size: 20px;
	margin: 10px 30px 30px 30px;
	opacity: 0.9;
	position: relative;
	/* オーバーレイより上に配置 */
	z-index: 3;
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 1);
	/* 暗い影で文字を強調 */
	color: var(--white);
}

.header.dx-intro .dx-info {
	color: var(--color-dx-message);
}

.header.dx-intro .dx-info::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 黒っぽい半透明のオーバーレイ */
	z-index: 2;
	/* テキストより下に、背景画像より上に配置 */
	border-radius: 15px;
}

/* CTAボタンもオーバーレイより上に配置 */
.header.dx-intro .cta-group {
	position: relative;
	margin: auto;
	z-index: 3;
}

/* 6. ヒーローセクション専用スタイル */
/* style.css: ヒーローセクションのスタイル調整 */

/* ヒーローセクション専用スタイル */
.hero {
	background-color: var(--color-main);
	/* フォールバックカラー */
	color: #FFFFFF;
	text-align: center;
	padding: 0 0 30px 0;
	/* 余白を縮小 */
	background-image: url('../images/hero-top01.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}

/* 背景画像のオーバーレイを追加 (オプション: 必要であれば) */
/* これにより背景画像を暗くしてテキストをさらに目立たせることができます */
.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 黒っぽい半透明のオーバーレイ */
	z-index: 2;
	/* テキストより下に、背景画像より上に配置 */
	border-radius: 15px;
}

/* ヒーローセクション内のテキストスタイル */
.hero h1 {
	color: #FFFFFF;
	font-size: 42px;
	position: relative;
	/* オーバーレイより上に配置 */
	z-index: 3;
	/* ★文字の境界線（影）を適用★ */
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
}

.hero p {
	font-size: 20px;
	margin-bottom: var(--spacing-md);
	opacity: 0.9;
	position: relative;
	/* オーバーレイより上に配置 */
	z-index: 3;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
	/* 暗い影で文字を強調 */
}

/* CTAボタンもオーバーレイより上に配置 */
.hero .cta-group {
	position: relative;
	z-index: 3;
}

.strength-item {
	border-left: 8px solid var(--color-blue);
	border-right: 8px solid var(--color-blue);
	border-radius: 5px;
	padding: 20px;
}

.section-primary.dx-pain-points .container {
	max-width: 900px;
}

.section-primary.dx-philosophy .emphasis-box {
	background-color: #ffe;
	border: 2px solid #ffcc66;
	padding: 15px;
	border-radius: 8px;
	margin: 30px auto;
	max-width: 800px;
}

.section-secondary {
	/* ★薄いグレーを使用し、白背景のセクションとの境界を明確化★ */
	background-color: var(--color-background);
}

.section-secondary.dx-why-us {
	background-color: #f7f7f7;
}

.section-secondary .container {
	max-width: 900px;
}

.section-secondary.dx-why-us .container {
	max-width: 1000px;
}

.section-secondary.dx-case-studies {
	background-color: #f0f8ff;
}

.section-secondary.dx-case-studies .container {
	text-align: center;
}

.section-secondary.dx-case-studies .container .appeal-1 {
	font-size: 1.1em;
}

.section-secondary.dx-case-studies .container .btn-cta {
	background-color: #28a745;
	margin-top: 20px;
}

.section-secondary.back-link {
	text-align: center;
}

.section-secondary.back-link .btn-cta {
	background-color: var(--color-main);
}

.cta-bottom {
	text-align: center;
	background-color: var(--color-dx-border);
	padding: 40px 20px;
	color: var(--white);
}

.cta-bottom .container h2 {
	color: var(--color-dx-message);
	font-size: 1.8em;
}

.cta-bottom .container .appeal-1 {
	font-size: 1.2em;
	margin-bottom: 30px;
}

.cta-bottom .container .appeal-2 {
	margin-top: 15px;
	font-size: 0.9em;
}

.cta-bottom .container .btn-cta {
	background-color: #ffc107;
	color: #333;
	font-size: 1.5em;
	padding: 15px 40px;
	border-radius: 5px;
	text-decoration: none;
	display: inline-block;
	font-weight: bold;
}

main {
	padding-top: 7.4rem;
}

main.low {
	padding-top: 4.4rem;
}

#top-gyoshu {
	border-style: none;
	margin-top: -11.4rem;
	padding-top: 3.4rem;
}

#top-solution {
	border-style: none;
	margin-top: -8.4rem;
	padding-top: 0.4rem;
}

/* TOPに戻るボタン */
.button_top {
	background-color: var(--color-bttop-base);
	color: var(--white);
	font-size: 16px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	/* ⑧色が変化する時間 */
	transition: .3s;

	/*デフォルトで非表示にする*/
	opacity: 0;
	visibility: hidden;

	/* 表示場所固定 */
	position: fixed;
	bottom: 16px;
	right: 16px;

	z-index: 996;
}

/*このクラスが付与されると表示する*/
.button_top.active {
	opacity: 1;
	visibility: visible;
}

/* マウスをかざした時に変化する色の指定 */
.button_top:hover {
	background-color: var(--color-bttop-hover);
	color: var(--color-bttop-base);
	border: 1px solid var(--color-bttop-base);
}

.button_top::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--white);
	border-right: 2px solid var(--white);
	transform: rotate(-45deg);

	/* ⑩色が変化する時間 */
	transition: .3s;
}

/* ⑨マウスをかざした時に変化する色の指定 */
.button_top:hover::before {
	border-top: 2px solid var(--color-bttop-base);
	border-right: 2px solid var(--color-bttop-base);
}

/* 業種リスト */
.system-by-industry h1 {
	border-left: 5px solid var(--color-main);
	padding-left: 15px;
	margin-top: 40px;
	margin-bottom: 20px;
	font-size: 32px;
}

/* 共通設定: システム名のリンクスタイルを調整 */
.solution-link {
	display: block;
	padding: 12px 0;
	color: var(--color-text);
	text-align: center;
}

.moreinfo .solution-link,
.listinfo .solution-link {
	color: var(--color-text);
	transition: color 0.2s;
}

.moreinfo .solution-link:hover,
.listinfo .solution-link:hover {
	color: var(--color-accent);
}

/* ★モバイルファースト（デフォルト）: 1列表示の設定★ */
.system-by-industry .system-list {
	display: block;
	/* 確実に1列で積み上がるように指定 */
	margin-left: 20px;
	/* モバイル時のインデント */
	padding: 0;
	list-style: none;
}

.system-by-industry .system-list h2 {
	font-size: 18px;
	font-weight: 500;
	margin: 0;
	padding: 0;
	border: 1px solid #999;
	border-radius: 9px;
}

.system-by-industry .system-list h2.moreinfo,
.system-by-industry .system-list h2.listinfo {
	transition: box-shadow var(--transition-speed), transform var(--transition-speed);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	/* 初期状態から弱い影をつけて締める */
	cursor: pointer;
}

/* ホバーエフェクト: 明確に選択されていることを示し、影を強くする */
.system-by-industry .system-list h2.moreinfo:hover,
.system-by-industry .system-list h2.listinfo:hover {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
	/* 影をさらに濃く、強くする */
	transform: translateY(-3px);
	/* 動きを強調 */
}

.system-by-industry .system-list h2.moreinfo .solution-link {
	position: relative;
}

.system-by-industry .system-list h2.moreinfo .solution-link::after {
	content: "詳細";
	display: inline-grid;
	align-items: center;
	border-left: 5px solid #b5cbf5;
	border-radius: 0px 9px 9px 0px;
	background-color: #6b9eff;
	color: var(--white);
	font-size: 82%;
	writing-mode: vertical-rl;
	position: absolute;
	top: 0;
	right: 0px;
	width: 41px;
	height: 100%;
	z-index: 2;
}

.system-by-industry .system-list h2.moreinfo .solution-link.triangle::after {
	content: "";
	display: inline-grid;
	align-items: center;
	border-radius: 0px 9px 9px 0px;
	background-color: #6b9eff;

	border-top: 23px solid transparent;
	border-bottom: 23px solid transparent;
	border-left: 26px solid #b5cbf5;

	position: absolute;
	top: 0;
	right: 0px;
	width: 33px;
	height: 100%;
	z-index: 2;
}

/* 共通スタイル: 画像とテキストを囲むコンテナ */
.feature-item {
	display: flex;
	gap: 30px;
	margin-bottom: 50px;
	align-items: flex-start;
	flex-wrap: wrap;
	/* スマホで自動的に折り返す */
}

/* 画像の共通スタイル */
.feature-item img {
	width: 100%;
	/* モバイル時の初期設定 */
	object-fit: cover;
	border-radius: 8px;
}

/* テキストエリアの共通スタイル */
.feature-text {
	flex-grow: 1;
}

/* 共通スタイルDX用: 画像とテキストを囲むコンテナ */
.dx-intro-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex-wrap: wrap;
	/* スマホで自動的に折り返す */
}

/* DX用 画像の共通スタイル */
.dx-intro-item img {
	width: 100%;
	/* モバイル時の初期設定 */
	object-fit: cover;
	border-radius: 8px;
}

/* DX用 テキストエリアの共通スタイル */
.dx-intro-text {
	flex-grow: 1;
}

.image-container {
	/* 表示したい幅を設定 */
	width: 100%;

	/* 高さまたは縦横比を設定 */
	/* 例1: 高さを固定する場合 */
	height: 200px;

	/* これが最も重要：はみ出た画像を隠す */
	overflow: hidden;
}

.image-container img {
	/* 親要素の領域いっぱいに画像を広げる */
	width: 100%;
	height: 100%;

	/* これが最も重要：画像が親要素に収まるようにトリミング */
	/* cover: 縦横比を維持したまま、親要素を完全に覆うように拡大・縮小し、はみ出た部分（この場合、上下）が隠される */
	object-fit: cover;

	/* 画像の表示位置を調整（任意） */
	/* 上下中央を基準にする */
	object-position: center;
	/* または上端を基準にする（下側がカットされる） */
	/* object-position: top; */

	margin: 40px 0;
	border-radius: 8px;
}

/* --- 6. セクション5: プロセス  --- */
.section-process {
	text-align: center;
}

.step-item p {
	text-align: left;
}

.step-icon {
	width: 40px;
	height: 40px;
	background-color: var(--color-blue);
	color: white;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	font-weight: 700;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* 事例紹介 */
/* 導入ソリューションのリンクスタイルを定義 */
.solution-link-in-case {
	color: var(--color-accent);
	/* メインカラーでリンクであることを強調 */
	text-decoration: none;
	border-bottom: 1px solid var(--color-accent);
	/* リンクであることを明確に示す下線 */
	transition: all 0.2s ease-in-out;
	font-weight: 700;
}

.solution-link-in-case:hover {
	color: var(--color-accent-hover);
	/* ホバー時にアクセントカラーに変化 */
	border-bottom-color: var(--color-accent-hover);
	/* 下線の色も変化 */
	opacity: 0.9;
}

/* 詳細情報のレイアウト */
.detail-info {
	background-color: var(--color-background);
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 30px;
}

.detail-info dl {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.detail-info dt {
	width: 200px;
	/* 見出し幅の固定 */
	font-weight: bold;
	color: var(--color-main);
	margin-top: 10px;
}

.detail-info dd {
	width: calc(100% - 200px);
	margin-left: 0;
	margin-top: 10px;
}

/* 導入事例専用の画像スタイル */
.case-image {
	width: 100%;
	height: auto;
	max-width: 900px;
	object-fit: cover;
	border-radius: 8px;
	margin: 20px 0;
	/* 上下の余白 */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.case-image.low {
	height: 300px;
	max-width: 900px;
}

/* DX */
.reason-list {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin-top: 30px;
}

.reason-card {
	background-color: var(--white);
	padding: 23px;
	border-top: 5px solid var(--color-dx-border);
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.process-flow {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 3rem;
}

.process-flow .step-card {
	flex: 1;
	min-width: 200px;
	position: relative;
	padding: 40px 15px 15px 15px;
	margin-bottom: 20px;
	border-left: 5px solid #f60;
	background-color: #fffaf0;
}

.process-flow .step-card h4 {
	color: #f60;
}

.pillar-icon {
	color: #007bff;
	margin-right: 5px;
}

.pain-points-list {
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-top: 30px;
}

.pain-points-list .accent {
	color: #c00;
}

.answer-text {
	text-align: center;
	margin-top: 30px;
	font-weight: bold;
	font-size: 1.1em;
}

/* 資料ダウンロードボタン専用のスタイル */
.download-button-group {
	max-width: 800px;
	margin: 40px auto;
	display: flex;
	flex-direction: column;
	/* 常に縦に積み上げる */
	gap: 20px;
	/* ボタン間の間隔 */
}

.btn-download {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	padding: 20px 30px;
	font-size: 18px;
	font-weight: 700;
	color: #FFFFFF;
	background-color: var(--color-accent);
	/* CTAカラーを使用 */
	border: 2px solid var(--color-accent);
	border-radius: 8px;
	transition: background-color 0.3s, transform 0.15s, box-shadow 0.3s;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-download:hover {
	background-color: #E67A00;
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
	text-decoration: none;
	/* ホバーで下線などを消す */
}

/* 戻るボタンのスタイル */
.back-to-top {
	margin-top: 50px;
	text-align: center;
}

/* 7. フッターセクション専用スタイル（全ページ共通） */
.footer {
	background-color: #333333;
	color: #E0E0E0;
	padding: 25px 0;
	font-size: 14px;
}

.footer p {
	margin: 5px 0;
}

.footer a {
	color: #AAAAAA;
}

/* 8. レスポンシブデザイン */
/* タブレット以上 (769px以上) */
@media (min-width: 769px) {
	.system-by-industry .system-list {
		/* 2列段組みの基本設定 */
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px 30px;
		/* 縦方向と横方向の隙間 */
		margin-left: 0;
		/* モバイル時のインデントを解除 */
		padding-left: 20px;
	}

	.dx-intro-item img {
		/* PC/タブレットでは最大幅を300pxに制限し、フレックスアイテムとして振る舞う */
		max-width: 250px;
		height: auto;
	}

	.dx-intro-item .dx-intro-text {
		/* テキストエリアが残りのスペースを占める */
		max-width: calc(100% - 300px);
		/* 280px (画像) + 20px (gap) のスペースを確保 */
	}

	/* 特徴 2: 画像を右側に配置するための順序変更を解除 (flex-wrap: wrap-reverse の代わりに order を使用) */
	.dx-intro-item.reverse img {
		order: 2;
		/* 画像を2番目に配置（右側） */
	}

	.dx-intro-item.reverse .dx-intro-text {
		order: 1;
		/* テキストを1番目に配置（左側） */
	}

	.feature-item img {
		/* PC/タブレットでは最大幅を300pxに制限し、フレックスアイテムとして振る舞う */
		max-width: 300px;
		height: auto;
	}

	.feature-item .feature-text {
		/* テキストエリアが残りのスペースを占める */
		max-width: calc(100% - 430px);
		/* 400px (画像) + 30px (gap) のスペースを確保 */
	}

	/* 特徴 2: 画像を右側に配置するための順序変更を解除 (flex-wrap: wrap-reverse の代わりに order を使用) */
	.feature-item.reverse img {
		margin: auto;
		order: 2;
		/* 画像を2番目に配置（右側） */
	}

	.feature-item.reverse .feature-text {
		order: 1;
		/* テキストを1番目に配置（左側） */
	}
}

/* タブレット (992px以下) */
@media (max-width: 992px) {
	.section-title {
		font-size: 24px;
	}

	.hero h1 {
		font-size: 36px;
	}

	.process-flow {
		flex-direction: column;
		margin-left: 16px;
		margin-right: 16px;
	}

	.step-item {
		padding-top: 0;
		text-align: left;
		padding-left: 60px;
	}

	.step-icon {
		left: 0;
		transform: none;
	}
}

/* スマートフォン (768px以下) */
@media (max-width: 768px) {
	.pc {
		display: none;
	}

	.sp {
		display: inline;
	}

	section {
		padding: 30px 0;
	}

	.card-grid {
		grid-template-columns: 1fr;
		/* 1列表示 */
	}

	.btn-cta {
		width: 94%;
		margin-bottom: 10px;
	}

	.hero {
		padding: 60px 0;
	}

	.menubox {
		padding-left: 25px;
	}

	.site-logo {
		margin-left: 8px;
	}

	.feature-item {
		/* 積み上げ順は通常順 (画像 -> テキスト) に統一 */
		flex-direction: column;
	}

	.feature-item img {
		/* スマホでは画像サイズを下げて、テキストへの誘導を速める */
		max-width: 300px;
		margin: 0 auto 15px auto;
		/* 中央寄せと下部マージン */
	}

	.feature-item.reverse {
		/* reverse クラスでも順序をリセット */
		flex-direction: column;
	}

	.process-flow {
		flex-direction: column;
		margin-left: 16px;
		margin-right: 16px;
	}

	.step-item {
		padding-top: 0;
		text-align: left;
		padding-left: 60px;
	}

	.step-icon {
		left: 0;
		transform: none;
	}

	.system-by-industry .system-list h2 {
		margin-bottom: 15px;
	}

	.header.dx-intro .cta-group a {
		width: 100%;
	}

	.page-top-accent-bar {
		/* 3色をで分割 */
		background: linear-gradient(to right,
				#6a9bd8 30px,
				var(--color-main) 30px, var(--color-main) 99%,
				/* 2色目の開始と終了 */
				#6a9bd8 99%
				/* 3色目の開始 */
			);
	}
}