/* --------------------------------
* ヘッダー
* -------------------------------- */
#header.sticky-top {
	top: 0;
	z-index: 1030;
	background-color: #FFF;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.navbar-brand img {
	max-height: 40px; /* ロゴの高さを調整 */
}

		/* --------------------------------
			* ナビゲーションメニュー
			* -------------------------------- */
			.navbar-nav .nav-link {
			font-weight: 500;
			}
			.navbar-nav .nav-link .bi-arrow-right-short {
					display: inline-block;
					vertical-align: middle;
					font-size: 1.2em;
					color: var(--bs-red);
					opacity: 0;
					transform: translateX(-8px);
					transition: all 0.2s ease-in-out;
			}
			.navbar-nav .nav-link:hover .bi-arrow-right-short,
			.navbar-nav .nav-link.active .bi-arrow-right-short {
					opacity: 1;
					transform: translateX(0);
			}


			/* --------------------------------
			 * SP用メニュー展開時のデザイン
			 * -------------------------------- */
			@media (max-width: 991.98px) {
					.navbar-collapse {
							margin-top: 0.5rem;
							border-top: 1px solid #dee2e6;
							padding-top: 0.5rem;
					}
					.navbar-nav .nav-item {
							margin: 0.25rem 0;
					}
					.navbar-nav .nav-link {
							display: block;
							padding: 0.65rem 1rem;
							border-radius: 0.3rem;
							transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
					}
					.navbar-nav .nav-link:hover,
					.navbar-nav .nav-link:focus {
							background-color: #e9ecef;
					}
					.navbar-nav .nav-link.active {
							background-color: #0d6efd;
							color: white;
					}
					/* SPではアイコン非表示 */
					.navbar-nav .nav-link .bi-arrow-right-short {
							display: none;
					}
			}

/* Bootstrap 5.2までの .container-* 最大幅を再現 */
.container-sm  { max-width: 540px!important; }
.container-md  { max-width: 720px!important; }
.container-lg  { max-width: 960px!important; }
.container-xl  { max-width: 1140px!important; }
.container-xxl { max-width: 1320px!important; }


.container {
	max-width: 1140px;
}



section h2.text-center {
	color: var(--bs-blue);
	margin-bottom: 1rem;
}
section h2.text-center>i {
	color: var(--bs-red);
	text-align: center;
	margin-right: 0.5rem;
}


.header-top {
	background-color: #f8f9fa;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.header-top .df {
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-top2 {
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-top2 .logo img {
	max-width: 250px;
	/* サイズ調整 */
	height: auto;
}

#header_main_right .tel img {
	max-width: 180px;
	/* サイズ調整 */
	height: auto;
}

.head_sp_tel {
	background-color: #007bff;
	color: white;
	padding: 0.75rem 1rem;
	text-align: center;
}

.head_sp_tel p {
	margin-bottom: 0.25rem;
}

.head_sp_tel .title {
	font-weight: bold;
	display: block;
}

.head_sp_tel .time {
	font-size: 0.8rem;
	display: block;
}

.head_sp_tel .df {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	font-weight: bold;
}

.head_sp_tel .df img {
	width: 20px;
	height: auto;
	margin-right: 0.5rem;
}

.head_sp_tel .df a {
	color: white;
	text-decoration: none;
}

/* Bootstrap Navbarの調整 */
.navbar {
	/* 必要に応じて背景色などを調整 */
}

.navbar-dark .navbar-nav .dropdown-menu {
	background-color: #343a40;
	border: none;
}

.navbar-dark .navbar-nav .dropdown-item {
	color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .dropdown-item:hover,
.navbar-dark .navbar-nav .dropdown-item:focus {
	color: #fff;
	background-color: #495057;
}


/* PC/SP表示切り替え */
.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

@media (max-width: 767.98px) {

	/* mdブレークポイント未満 */
	.pc {
		display: none !important;
	}

	.sp {
		display: block !important;
	}
}

@media (max-width: 991.98px) {

	/* lgブレークポイント未満 */
	.header-top2 {
		flex-direction: column;
		align-items: center;
	}

	.header-top2 .logo {
		margin-bottom: 0.5rem;
	}

	#header_main_right {
		justify-content: center;
	}
}


        /* パンくずリスト */
        .breadcrumb {
					font-size: 0.875rem; /* 少し小さめのフォントサイズ */
			}
			.breadcrumb-item + .breadcrumb-item::before {
					color: #6c757d; /* 区切り文字の色 */
			}
			.breadcrumb a {
				text-decoration: none;
				color: #333;
		}

        /* ヒーローセクション */
        .hero-section {
					background-color: #e9ecef; /* 明るいグレーの背景 */
					padding: 3rem 1.5rem; /* パディングを少し調整 */
					text-align: center;
					margin-bottom: 2rem;
					border-radius: 0.5rem; /* 角丸 */
			}
			.hero-section .hero-subtitle { /* サブタイトルのラベル風スタイル */
					display: inline-block; /* ラベルとしてインラインブロック要素にする */
					background-color: #007bff; /* ラベルの背景色 (例: プライマリカラー) */
					color: white;             /* ラベルの文字色 */
					font-size: 0.9rem;        /* フォントサイズを少し小さく */
					padding: 0.3rem 0.75rem;   /* ラベル内のパディング */
					border-radius: 0.25rem;   /* ラベルの角丸 */
					margin-bottom: 0.75rem;    /* メインタイトルとの間隔を調整 */
					font-weight: 500;          
			}
			.hero-section .display-5 { /* メインタイトルの調整 */
					margin-bottom: 1rem;     /* 説明文との間隔 */
			}
			.hero-section .lead {
					color: #343a40;         /* 説明文の色を少し濃く */
			}
			.hero-section .btn {
					font-weight: 500;        /* ボタンの文字を少し太く */
			}


        /* コンテンツセクション共通スタイル */
        .content-section {
					padding-top: 2.5rem; /* 上のパディングを調整 */
					padding-bottom: 2.5rem; /* 下のパディングを調整 */
			}
			/* エリア特性セクションのカードスタイル */
			#area-characteristics-section .card {
					border: 1px solid #dee2e6;
			}
			#area-characteristics-section .card-body {
					padding: 2rem; /* カード内のパディング */
			}

			.content-section h2 {
					font-size: 1.75rem;
					font-weight: 600;
					margin-bottom: 1.5rem;
					color: #343a40;
			}
			.content-section p {
					line-height: 1.8; 
					color: #495057;
					margin-bottom: 1rem; 
			}
			.content-section p:last-of-type {
					margin-bottom: 0; 
			}



			/* エリア部数表テーブル */
			.table th {
					background-color: #f8f9fa; 
			}
			.table td, .table th {
					vertical-align: middle;
			}




.card {
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
}


footer {
	position: relative;
	width: 100%;
	height: auto;
	background-image: url(/posting/pripos/column/assets/img/test/bg_area.jpg);
	background-color: #3a579c;
	background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: #FFF;
}