/* ページのスクロール時に背景がはみ出ないように調整 */
html,
body {
	overflow-x: hidden;
	font-family: 'Noto Sans JP';
}

/* メインビジュアルをページ幅いっぱいにし、上部に余白を追加 */
.main-visual {
	display: flex;
	flex-direction: column; /* ここをcolumnに */
	width: 100vw; /* ページ幅いっぱい */
	max-width: 1712px; /* 最大幅を指定 */
	margin: 100px auto 15px; /* 上部に余白を追加 */
	gap: 0; /* gapは不要 */
	background-color: #f6f7fa;
}

.main-visual-inner {
	display: flex;
	width: 100%;
	gap: 15px;
}

/* スマホ対応: main-visual-innerを縦方向に変更 */
@media (max-width: 768px) {
	.main-visual-inner {
		flex-direction: column; /* スマホでは縦並びに変更 */
		gap: 10px; /* 要素間の間隔 */
	}
}

/* 必要に応じてレスポンシブ調整 */
@media (max-width: 1440px) {
	/* 1440px以下のノートPCでの表示調整 */
	.main-visual {
		max-width: 100%; /* 横幅を100%に */
	}

	.main-visual .left,
	.main-visual .right {
		width: 50%; /* 幅を50%に設定して比率を維持 */
		height: 500px !important; /* 高さを500pxに固定 */
		background-size: cover; /* 背景画像をカバー */
		background-position: center; /* 背景画像の位置を中央に */
	}
}

@media (max-width: 1024px) {
	.main-visual {
		margin-top: 60px; /* タブレットで少し縮める */
	}
}

@media (max-width: 768px) {
	.main-visual {
		margin-top: 40px; /* スマホではさらに縮める */
		height: 700px;
	}
}

/* 左右のカラムのスタイル（position: relative を追加） */
.main-visual .left,
.main-visual .right {
	flex: 1;
	width: 856px;
	height: 700px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	padding: 40px;
	background-color: #f6f7fa;
	position: relative; /* 追加 */
}

/* 各セクションの背景画像 */
.main-visual .left {
	background: url('../images/top-sign-bg.png') no-repeat center center/cover;
}

.main-visual .right {
	background: url('../images/top-pm-bg.png') no-repeat center center/cover;
}

/* .btn-container のスタイルを絶対配置に変更 */
.main-visual .btn-container {
	position: absolute; /* 追加 */
	bottom: 39px; /* 下から39px */
	right: 52px; /* 右から55px */
	display: flex;
	gap: 20px;
	/* 不要な margin-top を削除 */
}

/* その他の .btn のスタイルはそのまま */
.main-visual .btn {
	width: 180px;
	height: 46px;
	display: inline-flex; /* inline-block → inline-flex に変更 */
	align-items: center;
	justify-content: center; /* 中央揃えにする場合 */
	gap: 8px; /* テキストとSVGの間隔 */
	padding: 10px 20px;
	font-size: 16px;
	font-weight: bold;
	color: var(--Kima_green, #af9448);
	border-radius: 4px;
	border: 1px solid var(--Kima_green, #af9448);
	background: #f2f2f2;
	text-decoration: none;
	transition: background 0.3s;
}

.main-visual .btn:hover {
	background: #9a8240;
	color: #fff;
}

/* スマホ対応 */
@media (max-width: 1024px) {
	.main-visual {
		margin: 60px auto 15px; /* 上部マージン調整 */
	}
	.main-visual-inner {
		flex-direction: column; /* 縦方向に変更 */
		gap: 15px; /* 要素間の間隔 */
	}
	.main-visual .left,
	.main-visual .right {
		width: 100%; /* 幅を100%に設定 */
		height: 400px;
		background-position: center; /* 背景画像の位置を中央に */
		background-size: cover; /* 背景画像をカバー */
	}
}

@media (max-width: 768px) {
	.main-visual {
		margin: 65px auto 10px; /* スマホでさらにマージン調整 */
		gap: 10px; /* 間隔を狭める */
	}
	.main-visual-inner {
		flex-direction: column; /* スマホでは縦並びに変更 */
		gap: 10px; /* 要素間の間隔 */
	}
	.main-visual .left,
	.main-visual .right {
		height: 300px; /* スマホでは高さを小さく */
		padding: 20px; /* パディングも小さく */
		background-position: center 30%; /* 背景画像の位置を少し上に */
	}

	/* ボタンコンテナの位置調整 */
	.main-visual .btn-container {
		bottom: 20px; /* 下からの位置を調整 */
		right: 20px; /* 右からの位置を調整 */
		gap: 10px; /* ボタン間の間隔を狭める */
	}

	/* ボタンのサイズ調整 */
	.main-visual .btn {
		width: 140px; /* 幅を小さく */
		height: 40px; /* 高さを小さく */
		font-size: 14px; /* フォントサイズ小さく */
	}

	/* 左カラムを中央寄せ */
	.pickup-sidebar {
		padding-left: 10px;
		text-align: center;
	}
	/* カテゴリフィルタも中央寄せかつ横並びに */
	.pickup-sidebar .category-filter {
		margin: 20px auto; /* 中央寄せ */
		display: flex; /* 横並び */
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px; /* ボタン間のスペース */
	}
	.pickup-sidebar .category-filter li {
		margin-bottom: 0; /* 余計な余白を削除 */
	}
}
@media (max-width: 480px) {
	.main-visual .left,
	.main-visual .right {
		height: 250px; /* さらに小さなスマホでは高さをさらに小さく */
	}

	/* ボタンをさらに小さく調整 横並び */
	.main-visual .btn-container {
		width: 300px;
		flex-direction: row;
		bottom: 10px; /* 下からの位置を調整 */
		/* 中心寄せ */
		left: 50%;
		transform: translateX(-50%);
	}

	.main-visual .btn {
		height: 36px;
		font-size: 12px;
	}

	/* スマホ（max-width:480px）向けにSwiperスライドの幅を全体に */
	.swiper-slide {
		width: 100% !important;
	}
}

/* ピックアップ記事のレイアウト（背景をページ幅いっぱいに） */
.pickup-section {
	display: flex;
	width: 100vw; /* ページ幅いっぱい */
	margin: 0 auto;
	padding: 60px 0;
	gap: 50px;
	background: url('../images/pickup-bg.png') no-repeat center center/cover;
}
.case-section {
	display: flex;
	width: 100vw; /* ページ幅いっぱい */
	margin: 0 auto;
	padding: 60px 0;
	gap: 50px;
}
/* ピックアップ記事のレイアウト（背景をページ幅いっぱいに） */
/* 左カラム（カテゴリ & ボタン） */
.pickup-sidebar {
	width: 20%;
	color: white;
	padding-left: 40px; /* 左側に余白を追加 */
}

.category-filter {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}

.category-filter li {
	margin: 5px 5px 10px 0;
	display: inline-flex;
}

.category-filter a {
	display: flow;
	padding: 8px 10px;
	width: fit-content;
	color: #fff;
	font-family: 'Noto Sans JP';
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	border-radius: 20px;
	background: var(--Gray-3, #828282);
	border: 2px solid #828282;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	width: 100px; /* ボタンの幅を指定 */
}

.category-filter a:hover {
	background-color: #af9448;
	color: #fff;
	border-color: #af9448;
	text-decoration: none;
}
.pickup-sidebar h2 {
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	/* テキストの前に見出しのドットを追加 */
	position: relative;
	/* padding-left: 20px; */
	/* ドットの色は#af9448 */
	/* &::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 10px;
		height: 10px;
		background: #af9448;
		border-radius: 50%;
	} */
}
.pickup-sidebar p {
	color: #fff;
	font-family: 'Noto Sans JP';
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 36px; /* 150% */
	/* padding-top: 20px;
	padding-bottom: 10px; */
}
.pickup-text .pick {
	color: var(--Kima_green, #af9448);
	font-family: 'Plus Jakarta Sans';
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	/* padding-bottom: 20px; */
}
/* ピックアップ記事のスライダー */
.pickup-slider {
	width: 80%;
	overflow: visible; /* スライドの表示を改善 */
	position: relative;
	/* padding: 100px 0 121px; */
}

/* スワイパーのトランジション設定を改善 */
.swiper-container {
	width: 100%;
	overflow: visible; /* 隣のスライドを見せるために変更 */
	/* トランジションの調整 */
	--swiper-theme-color: #af9448;
	padding: 0 5px; /* 左右に少しパディングを追加 */
}

.swiper-wrapper {
	display: flex;
	justify-content: space-between; /* 均等配置 */
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); /* イージング調整 */
	margin-top: 10px;
	/* transformのバックフェイスを隠して、より滑らかに */
	backface-visibility: hidden;
	transform: translate3d(0px, 0px, 0px);
	/* 3D加速を有効化 */
	will-change: transform;
}

/* スムーズなトランジションのための追加設定 */
.swiper-slide {
	width: 300px !important; /* 一定サイズに固定 */
	max-width: 300px;
	height: 353px !important;
	background: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	/* text-align: center; */
	padding: 20px;
	flex-shrink: 0; /* 画像サイズを固定 */
	transform-origin: center center; /* 変形原点を中央に */
	transform: translate3d(0, 0, 0);
	transition-property: transform, background-color;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	-webkit-tap-highlight-color: transparent; /* タップ時の青いハイライトを防ぐ */
	box-sizing: border-box; /* パディングを含めた全体サイズを指定 */
	margin-right: 30px !important; /* スライド間の間隔を固定 */
	transition: transform 0.3s, opacity 0.3s !important;
}

/* スワイプ操作時の視覚効果 */
.swiper-slide-active {
	z-index: 2; /* アクティブなスライドを前面に */
}

/* スマホ対応 */
@media (max-width: 1024px) {
	.swiper-wrapper {
		justify-content: flex-start; /* スライダーを左寄せ */
	}

	.swiper-slide {
		width: 250px; /* スマホで少し小さめに */
	}
}

@media (max-width: 768px) {
	.main-visual {
		margin: 65px auto 10px; /* スマホでさらにマージン調整 */
		gap: 10px; /* 間隔を狭める */
	}
	.main-visual-inner {
		flex-direction: column; /* スマホでは縦並びに変更 */
		gap: 10px; /* 要素間の間隔 */
	}
	.main-visual .left,
	.main-visual .right {
		height: 300px; /* スマホでは高さを小さく */
		padding: 20px; /* パディングも小さく */
		background-position: center 30%; /* 背景画像の位置を少し上に */
	}

	/* ボタンコンテナの位置調整 */
	.main-visual .btn-container {
		bottom: 20px; /* 下からの位置を調整 */
		right: 20px; /* 右からの位置を調整 */
		gap: 10px; /* ボタン間の間隔を狭める */
	}

	/* ボタンのサイズ調整 */
	.main-visual .btn {
		width: 140px; /* 幅を小さく */
		height: 40px; /* 高さを小さく */
		font-size: 12px; /* フォントサイズ小さく */
	}

	/* 左カラムを中央寄せ */
	.pickup-sidebar {
		padding-left: 10px;
		text-align: center;
	}
	/* カテゴリフィルタも中央寄せかつ横並びに */
	.pickup-sidebar .category-filter {
		margin: 20px auto; /* 中央寄せ */
		display: flex; /* 横並び */
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px; /* ボタン間のスペース */
	}
	.pickup-sidebar .category-filter li {
		margin-bottom: 0; /* 余計な余白を削除 */
	}
	.pickup-section {
		flex-direction: column;
		gap: 5px;
	}
	.case-section {
		flex-direction: column;
	}
	.pickup-sidebar {
		width: 100%;
		padding: 0 10px;
	}
	.pickup-slider {
		width: 100%;
		padding: 0 15px;
	}
	.pickup-slider .swiper-slide {
		width: 100%;
	}
	.swiper-button-prev,
	.swiper-button-next {
		display: block !important;
	}
	.swiper-button-prev {
		left: 5px;
	}
	.swiper-button-next {
		right: 5px;
	}
	.swiper-button-prev,
	.swiper-button-next {
		top: 50%;
		transform: translateY(-50%);
	}
	.swiper-button-prev {
		left: 5px;
	}
	.swiper-button-next {
		right: 5px;
	}
	.swiper-button-prev,
	.swiper-button-next {
		display: block !important;
	}
	.support-header {
		padding: 40px 0 33px 0;
	}
	.support-header h2 {
		font-size: 21px;
	}
	.support-header p {
		font-size: 13px;
	}
	.reason-section {
		height: 500px;
		padding: 60px 20px;
	}
	.service-section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 20px;
	}
	.service-header h2 {
		font-size: 24px;
	}
	.service-header p {
		font-size: 16px;
	}
	.voice-case {
		height: 900px;
	}
	.voice-img img {
		margin-top: 100px;
	}
	.movie-overlay h2 {
		font-size: 36px;
	}
	.movie-overlay p {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.pickup-section {
		flex-direction: column;
		gap: 5px;
		padding: 30px 0; /* パディングを減らす */
	}

	.pickup-slider {
		width: 100%;
		overflow: hidden; /* スマホではオーバーフローを隠す */
		padding: 0;
	}

	.swiper-container {
		overflow: hidden;
		padding: 0;
	}

	.swiper-slide {
		width: calc(100% - 30px) !important; /* 横幅を画面いっぱいに（余白考慮） */
		max-width: none;
		height: auto !important;
		min-height: 300px; /* 最小高さを設定 */
		padding: 15px;
		margin: 0 15px; /* 左右に余白を追加 */
	}

	/* スマホでのナビゲーションボタンの位置調整 */
	.swiper-button-prev,
	.swiper-button-next {
		width: 35px;
		height: 35px;
		background: rgba(92, 181, 49, 0.8); /* キマルームのテーマカラー */
		color: white;
		display: flex !important;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		border-radius: 50%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		cursor: pointer;
	}

	.swiper-button-prev {
		left: 5px;
	}

	.swiper-button-next {
		right: 5px;
	}

	.swiper-button-prev::after,
	.swiper-button-next::after {
		font-size: 16px;
		font-weight: bold;
	}

	/* ナビゲーションボタンをタップしやすくする */
	.swiper-button-prev,
	.swiper-button-next {
		padding: 15px;
	}

	/* カテゴリフィルターの強調表示 */
	.category-filter a.active {
		background-color: #af9448;
		color: #fff;
		border-color: #af9448;
		transform: scale(1.05);
	}
}

@media (max-width: 480px) {
	.swiper-slide {
		width: calc(100% - 20px) !important; /* さらに小さいスマホで余白を調整 */
		margin: 0 10px;
		padding: 12px;
	}

	/* 画像サイズも調整 */
	.swiper-slide img {
		max-height: 140px;
	}

	.swiper-slide h3 {
		font-size: 14px;
		margin: 15px 0;
	}

	.category-item {
		font-size: 10px;
		padding: 6px 8px;
	}
}

/* スライドのトランジションを明確にする */
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right {
	background-image: none; /* デフォルトのシャドウ効果を無効化 */
}

/* ピックアップ記事のスライダー */
.pickup-slider {
	width: 80%;
	overflow: hidden; /* はみ出た要素を非表示 */
	position: relative;
	/* padding: 100px 0 121px; */
}

/* スワイパーのトランジション設定を改善 */
.swiper-container {
	width: 100%;
	overflow: hidden;
	/* トランジションの調整 */
	--swiper-theme-color: #af9448;
}

.swiper-wrapper {
	display: flex;
	justify-content: space-between; /* 均等配置 */
	transition-property: transform;
	transition-timing-function: ease-out;
	margin-top: 10px;
	/* transformのバックフェイスを隠して、より滑らかに */
	backface-visibility: hidden;
	transform: translate3d(0px, 0px, 0);
	/* 3D加速を有効化 */
	will-change: transform;
}

/* スムーズなトランジションのための追加設定 */
.swiper-slide {
	width: 300px; /* 一定サイズに固定 */
	max-width: 300px;
	height: 353px !important;
	background: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	/* text-align: center; */
	padding: 20px;
	flex-shrink: 0; /* 画像サイズを固定 */
	transform-origin: bottom center; /* 変形原点を下辺の中央に */
	transform: translate3d(0, 0, 0);
	transition-property: transform, background-color;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

.swiper-slide a {
	text-decoration: none;
	color: #333;
}
/* ホバー時 */
.swiper-slide:hover {
	background-color: #e3ffd6;
	/* 例：10px持ち上げる */
	transform: translateY(-10px) !important;
	transition: transform 0.3s ease-in-out;
}
/* スライド内の画像サイズを統一 */
.swiper-slide img {
	width: 100%; /* 幅は100% */
	/* max-width: 260px; 最大幅を指定 */
	height: auto; /* 高さは自動調整 */
	max-height: 156px; /* 最大高さを指定 */
	object-fit: cover; /* 画像の比率を崩さずトリミング */
	border-radius: 4px;
	display: block;
}
.swiper-slide h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 21px 0;
	text-align: left;
}

.swiper-backface-hidden .swiper-slide {
	margin-top: 10px;
}
.category-item {
	text-align: left;
	font-size: 12px;
	color: #828282;
	margin-bottom: 20px;
	border-radius: 20px;
	border: 1px solid var(--Gray-3, #828282);
	background: #fff;
	padding: 8px 10px;
	margin-right: 5px;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
/* ナビゲーションボタン */
.swiper-button-prev,
.swiper-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	border-radius: 50%;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	z-index: 10;
}

.swiper-button-prev {
	left: 10px; /* 見えやすい位置に調整 */
}

.swiper-button-next {
	right: 10px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
	background: rgba(0, 0, 0, 0.8);
}

/* スマホ対応 */
@media (max-width: 1024px) {
	.swiper-wrapper {
		justify-content: flex-start; /* スライダーを左寄せ */
	}

	.swiper-slide {
		width: 250px; /* スマホで少し小さめに */
	}
}

@media (max-width: 768px) {
	.swiper-slide {
		width: 100%; /* 1画面に1つ表示 */
	}

	.swiper-button-prev {
		left: 5px;
	}

	.swiper-button-next {
		right: 5px;
	}
	.pickup-sidebar {
		text-align: center;
	}
	.pickup-sidebar h2 {
		&::before {
			left: 150px;
		}
	}
	.category-filter a {
		display: block;
		width: 100px;
		font-size: 12px;
	}
}

/* ナビゲーションボタンを左側に統一 */
.nav-buttons {
	display: flex;
	gap: 15px;
	margin-top: 20px;
	justify-content: center;
}

.nav-buttons button {
	background: none;
	border: 2px solid #828282;
	color: #828282;
	font-size: 18px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background 0.3s ease;
}

.nav-buttons button:hover {
	background: #af9448;
	border-color: #af9448;
	color: #fff;
	font-size: 20px;
}

/* 右側のナビゲーションボタンを非表示 */
.swiper-button-prev,
.swiper-button-next {
	display: none !important;
}

/* ムービーエリア（背景動画） */
.movie-section {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.movie-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
}

.movie-background video {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

/* パララックス効果を適用 */
.movie-overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	text-align: center;
	color: white;
	background: rgba(0, 0, 0, 0.3);
	padding: 20px;
}

.movie-overlay h2 {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 10px;
}

.movie-overlay p {
	font-size: 18px;
	max-width: 800px;
	line-height: 1.5;
}

/* ボイスエリア */
.voice-section {
	display: flex;
	justify-content: center; /* 中央配置 */
	align-items: center; /* 縦方向も中央 */
	width: 100vw; /* ページ幅いっぱい */
}

.voice-img {
	/* 画像中央配置 */
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
}

.voice-img img {
	width: 100%; /* 画像幅いっぱい */
	height: auto; /* アスペクト比を維持 */
	border-radius: 10px; /* 角丸デザイン */
	margin-top: 550px;
}
/* ピックアップ記事セクションまで背景動画を固定 */
.voice-case {
	position: relative;
	z-index: 1;
	background: transparent;
	height: 1448px;
	/* 背景色は0％ #FFFFFF 63% #3F3F3Fのグラデーション　上から下 */
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(63, 63, 63, 0.63));
	-moz-animation: alternate infinite 1s;
	-webkit-animation: alternate infinite 1s;
	animation: alternate infinite 1s;
}

/* ボイスエリア */
.client-section {
	display: flex;
	justify-content: center; /* 中央配置 */
	align-items: center; /* 縦方向も中央 */
	width: 100vw; /* ページ幅いっぱい */
	/* background-color: #f6f6f6; */
	background-color: #f6f7fa;
}

.client-img {
	/* 画像中央配置 */
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 1728px;
}

.client-img img {
	width: 100%; /* 画像幅いっぱい */
	height: auto; /* アスペクト比を維持 */
	margin: 98px 0;
}
.support-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	background-color: #f6f6f6;
}

/* 見出し */
.support-header {
	width: 80%;
	max-width: 1200px;
	padding: 105px 0 33px 0;
	text-align: center;
}

.support-header h2 {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
	font-family: 'Noto Sans JP', sans-serif;
}

.support-header p {
	font-size: 16px;
	line-height: 1.8;
}

/* 3カラム */
.support-container {
	display: flex;
	justify-content: center;
	gap: 30px;
	width: 80%;
	max-width: 1492px;
	padding: 33px 0 154px 0;
}

/* 各ボックス */
.support-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 33%;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.support-box img {
	width: 100%;
	/* max-width: 300px; */
	height: auto;
	border-radius: 10px;
}

.support-box h3 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

.support-btn {
	display: inline-block;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	background-color: #af9448;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-top: 10px;
}

.support-btn:hover {
	background-color: #9a8240;
}
.pc {
	/* 表示 */
	display: block;
}
.sp {
	/* 非表示 */
	display: none;
}
@media (max-width: 768px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.support-container {
		flex-direction: column;
		align-items: center;
		padding: 33px 0 54px 0;
	}

	.support-box {
		width: 100%;
	}
	.nav-buttons {
		display: none;
	}
}

/* キマルームが賃貸業界をリードする理由背景色 */
.reason-bg {
	background-color: #f4f4f4;
}
/* キマルームが賃貸業界をリードする理由 */
.reason-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 1492px; /* 指定された背景サイズ */
	height: 840px;
	background-color: #bdbdbd;
	border-radius: 4px;
	margin: 0 auto; /* 中央配置 */
	padding: 60px 20px; /* 内側の余白 */
	text-align: center;
}

/* 見出し */
.reason-header {
	max-width: 1200px; /* コンテンツの最大幅 */
}

.reason-header h2 {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 20px;
	font-family: 'Noto Sans JP', sans-serif;
	color: #fff;
}

.reason-header p {
	font-size: 18px;
	line-height: 1.8;
	color: #fff;
}

/* CTAボタン */
.reason-container {
	margin-top: 40px;
}

.btn {
	display: inline-block;
	padding: 15px 30px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	background-color: #af9448;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.3s ease-in-out;
}

.btn:hover {
	background-color: #9a8240;
}

/* レスポンシブ対応 */
@media (max-width: 1492px) {
	.reason-section {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.client-img img {
		margin: 49px 0;
	}
	.reason-header h2 {
		font-size: 24px;
	}

	.reason-header p {
		font-size: 16px;
	}

	.btn {
		font-size: 16px;
		padding: 12px 24px;
	}
}

/* 不動産賃貸業務を一瞬でDX化 */
.service-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%; /* ページ幅いっぱい */
	height: 900px; /* 指定の高さ */
	background-color: #f6f7fa;
	padding: 60px 20px; /* 内側の余白 */
	text-align: center;
}

/* 見出し */
.service-header {
	max-width: 1486px;
}

.service-header h2 {
	color: #000;
	font-family: 'Noto Sans JP';
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 56px; /* 175% */
}
.service-subheader {
	max-width: 1486px; /* 見出しと同じ最大幅 */
	width: 100%;
	margin: 0 auto 20px; /* 上下の余白と中央寄せ */
	text-align: left; /* テキストを左寄せ */
}

.service-section h3 {
	text-align: left;
	/* h3 の左端を、(100% - 1486px) / 2 に設定 */
	margin: 0 0 20px calc((100% - 1486px) / 2);
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	position: relative;
	padding-left: 20px; /* ドット用の余白 */
	margin-bottom: 20px;
	/* ドットの色は#af9448 */
	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 10px;
		height: 10px;
		background: #af9448;
		border-radius: 50%;
	}
}
.service-header p {
	color: #000;
	text-align: center;
	font-family: 'Noto Sans JP';
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 28px; /* 155.556% */
}

/* 区切り線 */
.service-line {
	width: 80%;
	max-width: 1486px;
	height: 1px;
	background-color: #bdbdbd;
	margin: 30px 0;
}

/* 5カラムコンテナ */
.service-container {
	display: flex;
	justify-content: center;
	gap: 5px;
	width: 80%;
	max-width: 1486px;
	max-height: 378px;
	padding: 0;
}

/* 各サービスボックス */
.service-box {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	transition: width 0.3s ease-in-out;
}

/* リンクを確実にクリック可能にする */
.service-box a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2; /* 他の要素より前面に */
	cursor: pointer; /* カーソルをポインターに */
}

/* サービス画像：常に 440px の幅に設定 */
.service-box img {
	width: 440px;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	pointer-events: none; /* 画像自体のポインターイベントを無効化してリンクを優先 */
}

.service-box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1; /* リンクより下に */
	pointer-events: none; /* ポインターイベントを無効化 */
}

/* デフォルト状態：1番目は440px、2～5番目は255px */
.service-box:first-child {
	width: 440px;
}
.service-box:not(:first-child) {
	/* width: 255px; */
	width: 440px;
}

/* コンテナにマウスが乗ったとき、全てのボックスを一旦255pxにする */
.service-container:hover .service-box {
	/* width: 255px; */
	width: 440px;
}

/* その上で、ホバー中のサービスボックスだけを440pxにする */
.service-container .service-box:hover {
	width: 440px;
}

/* サービス画像：常に 440px の幅に設定 */
.service-box img {
	width: 440px;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.service-box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
	.service-container {
		flex-wrap: wrap;
		justify-content: center;
	}

	.service-box {
		width: 45%; /* 2列 */
	}
}

@media (max-width: 768px) {
	.service-section {
		display: flex; /* inline-flexからflexに変更 */
		flex-direction: column;
		justify-content: flex-start; /* 上揃えに変更 */
		align-items: center;
		width: 100%;
		height: auto; /* 固定高さから自動高さに変更 */
		padding: 60px 20px 100px; /* 下部のパディングを増やして余白を確保 */
		/* margin-bottom: 40px; */
		/* フッターとの間に余白を追加 */
	}

	/* サービスコンテナの修正 */
	.service-container {
		flex-direction: column; /* 縦並びを明示的に指定 */
		max-height: none; /* 最大高さの制限を解除 */
		width: 100%; /* 幅を100%に */
		/* gap: 20px; */
		/* アイテム間の間隔を増やす */
	}

	/* サービスボックスの修正 */
	.service-box-sp {
		width: 100%; /* 幅を100%に */
		/* margin-bottom: 15px; */
		/* 下マージンを追加 */
		overflow: visible; /* オーバーフローを表示 */
		transition: none; /* トランジション効果を完全に無効化 */
		padding: 20px;
	}

	.service-box-sp a {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 2;
		cursor: pointer;
	}

	/* サービスボックスの画像サイズ調整 */
	.service-box-sp img {
		width: 100%; /* 画像の幅をコンテナに合わせる */
		height: auto; /* 高さは自動調整 */
		transition: none; /* トランジション効果を完全に無効化 */
		border-radius: 10px; /* 角丸デザイン */
		pointer-events: none;
	}

	/* タップ時の挙動を明示的に無効化 */
	.service-box-sp:active,
	.service-box-sp:focus {
		width: 100%;
		transform: none;
	}

	/* ホバー時のサービスボックス幅を解除（スマホではホバー効果なし） */
	.service-container:hover .service-box-sp,
	.service-container .service-box-sp:hover {
		width: 100%;
		transform: none;
	}
}

.news-section h2 {
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	color: #af9448;
	margin-bottom: 20px;
	/* テキストの前に見出しのドットを追加 */
	position: relative;
	padding-left: 20px;
	/* ドットの色は#af9448 */
	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 10px;
		height: 10px;
		background: #af9448;
		border-radius: 50%;
	}
}

.news-section p {
	font-size: 18px;
	color: #000;
	font-family: 'Noto Sans JP';
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 36px; /* 150% */
}

.news-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* ニュース一覧 */
.news-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* 最後のnews-itemにだけborder-bottomを追加する */
.news-item:last-child {
	border-bottom: 1px solid #e0e0e0;
}

/* 最終行だけ border-bottom を追加（PHPの修正を適用） */
.news-list .last-news-item {
	border-bottom: 1px solid #ddd;
}

/* 見出しと「新着記事一覧を見る」を横並びに */
.news-header {
	display: flex;
	justify-content: space-between; /* 左右に振り分け */
	align-items: center; /* 垂直方向を中央揃え */
	margin-bottom: 20px; /* 見出しの下に少し余白を追加 */
}

/* もともとの .news-more に設定していた margin-top: 20px; は不要になるため削除 */
.news-more {
	display: flex;
	align-items: center;
}

.news-more a {
	color: #000;
	font-family: 'Noto Sans JP';
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	text-decoration: none;
}
/* アイコンとテキストの間に隙間が欲しい場合 */
.news-more svg {
	margin-right: 8px;
}

/* 導入事例一覧ボタン */
.case-button-container {
	text-align: center;
	margin-top: 40px;
}

.case-more-button {
	display: inline-block;
	background: #fff;
	color: #af9448;
	border: 1px solid #af9448;
	padding: 15px 30px;
	border-radius: 50px;
	text-decoration: none;
	font-family: 'Noto Sans JP';
	font-size: 16px;
	font-weight: 500;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.case-more-button:hover {
	background: #af9448;
	color: #fff;
}

/* お知らせセクションの基本設定 */
.news-section {
	width: 100%;
	padding: 50px 0;
}

.news-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 150%表示時の対応 */
html.zoomed-150 .news-container {
	max-width: 1250px; /* より狭い幅に制限 */
	padding: 0 30px; /* パディングを増加 */
}

html.zoomed-150 .news-header {
	flex-wrap: wrap; /* 必要に応じて折り返し */
}

html.zoomed-150 .news-more a {
	font-size: 13px; /* フォントサイズを少し小さく */
}

/* 160%以上表示時の対応 */
html.zoomed-high .news-container {
	max-width: 700px; /* さらに狭く */
	padding: 0 40px;
}

html.zoomed-high .news-header {
	flex-direction: column; /* 縦並びに変更 */
	align-items: flex-start;
	gap: 15px;
}

html.zoomed-high .news-more a {
	font-size: 12px;
}



/* レスポンシブ対応 */
@media (max-width: 768px) {
	.news-section {
		padding: 10px 0; /* 上下のパディングを小さく */
	}
	.news-container {
		max-width: 100% !important; /* スマホでは幅制限なし */
		padding: 0 20px !important; /* 左右のパディングを統一 */
	}
	.news-header {
		flex-direction: column; /* 縦並びに */
		align-items: flex-start; /* 左寄せ */
	}
	/* ズーム設定をスマホでリセット */
	html.zoomed-150 .news-container,
	html.zoomed-high .news-container {
		max-width: 100% !important;
		padding: 0 20px !important;
	}
	.news-list {
		flex-direction: column; /* 縦並びに */
		align-items: center; /* 中央揃え */
		/* 高さ固定 */
		height: 100%;
	}

	.news-more {
		margin-top: 20px; /* 上の余白を追加 */
	}
	/* 導入事例ボタンのスマホ対応 */
	.case-button-container {
		margin-top: 30px;
	}
	.case-more-button {
		padding: 12px 24px;
		font-size: 14px;
	}
	.pickup-section {
		flex-direction: column;
		gap: 5px;
	}
	.case-section {
		flex-direction: column;
	}
	.pickup-sidebar {
		width: 100%;
		padding: 0 10px;
	}
	.pickup-slider {
		width: 100%;
		padding: 0 15px;
	}
	.pickup-slider .swiper-slide {
		width: 100%;
	}
	.swiper-button-prev,
	.swiper-button-next {
		display: block !important;
	}
	.swiper-button-prev {
		left: 5px;
	}
	.swiper-button-next {
		right: 5px;
	}
	.swiper-button-prev,
	.swiper-button-next {
		top: 50%;
		transform: translateY(-50%);
	}
	.swiper-button-prev {
		left: 5px;
	}
	.swiper-button-next {
		right: 5px;
	}
	.swiper-button-prev,
	.swiper-button-next {
		display: block !important;
	}
	.support-header {
		padding: 40px 0 33px 0;
	}
	.support-header h2 {
		font-size: 21px;
	}
	.support-header p {
		font-size: 13px;
	}
	.reason-section {
		height: 500px;
		padding: 60px 20px;
	}
	.service-section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 20px;
	}
	.service-header h2 {
		font-size: 24px;
	}
	.service-header p {
		font-size: 16px;
	}
	.voice-case {
		height: 900px;
	}
	.voice-img img {
		margin-top: 100px;
	}
	.movie-overlay h2 {
		font-size: 36px;
	}
	.movie-overlay p {
		font-size: 16px;
	}
}

@media (min-width: 1400px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1728px;
	}
}

/* 導入事例セクション */
.case-section-top {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	background-color: #f6f7fa;
	padding: 60px 20px;
	text-align: center;
}

.case-container-top {
	width: 80%;
	max-width: 1486px;
}

.case-content-top {
	margin-bottom: 40px;
}

.case-content-top h2 {
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
}

.case-content-top p {
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
}

.case-grid-top {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	justify-content: center;
}

.case-item-top {
	background: white;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: transform 0.3s ease-in-out;
}

.case-item-top:hover {
	transform: translateY(-10px);
}

.case-item-top a {
	display: block;
	text-decoration: none;
	color: #333;
	padding: 0;
}

.case-item-top img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.case-hr {
	border: 0;
	height: 1px;
	background: #e0e0e0;
	margin: 15px 0;
}

.case-item-top h3 {
	font-size: 16px;
	font-weight: bold;
	margin: 15px;
	color: #000;
	text-align: left;
}

.case-meta-top {
	padding: 0 15px 15px;
	text-align: left;
}

.case-company-top {
	font-weight: bold;
	margin-bottom: 10px;
	font-size: 14px;
}

.case-logo-top {
	height: 30px;
	width: auto;
	margin-bottom: 10px;
}

.case-count-top,
.case-store-top {
	font-size: 12px;
	color: #666;
	display: inline-block;
	margin-right: 15px;
}

.pickup-tags-top {
	margin-top: 10px;
}

.tag-top {
	display: inline-block;
	font-size: 10px;
	padding: 3px 8px;
	border-radius: 20px;
	background: #f0f0f0;
	margin-right: 5px;
	margin-bottom: 5px;
}

/* 追加: .case-logoの拡大を防ぐための上書き */
.case-item-top .case-logo-top {
	width: auto;
	height: 30px;
	object-fit: contain;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
	.case-grid-top {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.case-grid-top {
		grid-template-columns: 1fr;
	}

	.case-section-top {
		padding: 40px 10px;
	}

	.case-container-top {
		width: 90%;
	}

	.case-content-top h2 {
		font-size: 24px;
	}

	.case-content-top p {
		font-size: 16px;
	}

	/* 日付とカテゴリを横並びにする */
	.news-meta {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		margin-bottom: 10px;
	}
	/* Hide the news arrow on smartphones */
	.news-arrow {
		display: none;
	}
}

/* クライアント一覧セクション */
.client-section {
	display: flex;
	flex-direction: column; /* 縦方向に要素を配置 */
	justify-content: center; /* 中央配置 */
	align-items: center; /* 縦方向も中央 */
	width: 100vw; /* ページ幅いっぱい */
	background-color: #fff;
	padding: 40px 0;
}

.client-container {
	width: 80%;
	max-width: 1486px;
	text-align: center;
	margin-bottom: 30px;
}

.client-container p {
	color: #000;
	font-family: 'Noto Sans JP';
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.client-img {
	/* 画像中央配置 */
	display: flex;
	flex-wrap: wrap; /* 複数行に折り返し */
	justify-content: center;
	align-items: center;
	gap: 20px; /* 画像間の間隔 */
	width: 100%;
	max-width: 1486px;
	padding: 0 20px;
}

.client-img img {
	width: calc(20% - 20px); /* 5列表示に調整、間隔を考慮 */
	height: auto;
	max-height: 100px; /* 高さを統一 */
	object-fit: contain; /* 比率を保持しつつ全体を表示 */
	margin: 10px 0;
	transition: transform 0.3s ease;
}

.client-img img:hover {
	transform: scale(1.05); /* ホバー時に少し拡大 */
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
	.client-img img {
		width: calc(25% - 20px); /* 4列表示 */
	}
}

@media (max-width: 768px) {
	.client-container p {
		font-size: 16px;
	}

	.client-img {
		gap: 15px;
	}

	.client-img img {
		width: calc(33.33% - 15px); /* 3列表示 */
	}

	.client-img img {
		margin: 5px 0;
	}
}

@media (max-width: 480px) {
	.client-container {
		width: 90%;
	}

	.client-img {
		gap: 10px;
	}

	.client-img img {
		width: calc(50% - 10px); /* 2列表示 */
		max-height: 50px;
	}
}

/* セミナー画像リンクセクション */
.seminar-section-top {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	background-color: #f6f7fa;
	padding: 40px 0;
}

.seminar-img {
	width: 100%;
	max-width: 1486px;
	text-align: center;
	padding: 0 20px;
	transition: transform 0.3s ease;
}

.seminar-img a {
	display: block;
	margin: 0 auto;
}

.seminar-img img {
	width: 100%;
	height: auto;
	/* border-radius: 10px; */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.seminar-img img:hover {
	/* transform: translateY(-5px); */
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* PCとスマホ表示の切り替え */
.seminar-img .pc {
	display: block;
}

.seminar-img .sp {
	display: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
	.seminar-section-top {
		padding: 30px 0;
	}

	.seminar-img .pc {
		display: none;
	}

	.seminar-img .sp {
		display: block;
	}
}

@media (max-width: 480px) {
	.seminar-section-top {
		padding: 20px 0;
	}

	.seminar-img {
		padding: 0 10px;
	}
}

/* サブサービス横並び */
.sub-services-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	width: 100vw;
	max-width: 1712px;
	margin: 10px auto 0 auto; /* 中央寄せ */
	padding: 0 0 0 0;
}

.sub-service-link {
	flex: 1 1 33.33%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sub-service-link img {
	width: 100%;
	max-width: 440px;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: contain;
	border-radius: 8px;
	/* background: #fff; */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* スマホ対応: サブサービス画像を縦並びに */
@media (max-width: 768px) {
	.sub-services-row {
		flex-direction: column;
		gap: 15px;
		padding: 0 20px;
		margin: 15px auto 0 auto;
	}

	.sub-service-link {
		flex: none;
		width: 100%;
		max-width: 300px;
	}

	.sub-service-link img {
		max-width: 100%;
		width: 100%;
		height: auto;
	}
}