#main .alpha { width: 100%; }
#main .beta  { display: none; }
#main .alpha .contBannerArea { display: none; }
#main .alpha h1 { display: none; }



/* 例・掲載箇所カ－ド全体のレイアウト設定 */
.card-container2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 横3列 */
	gap: 15px; /* 列の間隔 */
	padding: 15px;
	box-sizing: border-box;
}

/* 各カード */
.card2 {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background-color: #fff;
	display: flex;
	flex-direction: column;
}

/* 見出し行（1行目） */
.card-header2 {
	color: #fff;
	font-size: 150%;
	font-weight: bold;
	text-align: center;
	padding: 10px;
}

/* 見出し行の背景色（2カード用） */
.card2:nth-child(1) .card-header2 { background-color: #3a6d90; }
.card2:nth-child(2) .card-header2 { background-color: #3a6d90; }

/* カード本文（残り3行） */
.card-content2 {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 15px;
	text-align: center;
}

.card-content2 p {
	margin: 8px 0;
	line-height: 1.5;
}

/* スマホ対応（1列に切り替え） */
@media (max-width: 768px) {
	.card-container2 {
		grid-template-columns: 1fr; /* 縦1列に変更 */
	}
}






/* 価格 カード全体のレイアウト設定 */
.card-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 横3列 */
	gap: 15px; /* 列の間隔 */
	padding: 15px;
	box-sizing: border-box;
}

/* 各カード */
.card {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background-color: #fff;
	display: flex;
	flex-direction: column;
}

/* 見出し行（1行目） */
.card-header {
	color: #fff;
	font-size: 150%;
	font-weight: bold;
	text-align: center;
	padding: 10px;
}

/* 見出し行の背景色（3カード用） */
.card:nth-child(1) .card-header { background-color: #f38c4a; } /* オレンジ */
.card:nth-child(2) .card-header { background-color: #5bc0ba; } /* グリーン */
.card:nth-child(3) .card-header { background-color: #d5b055; } /* ゴールド */

/* カード本文（残り3行） */
.card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px 25px;
	text-align: center;
}

.card-content p {
	margin: 8px 0;
	line-height: 1.5;
}

/* スマホ対応（1列に切り替え） */
@media (max-width: 768px) {
	.card-container {
		grid-template-columns: 1fr; /* 縦1列に変更 */
	}
}



/* フローチャートのレイアウト設定 */
.step-flow {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: nowrap;
	margin: 2rem 0;
	gap: 0;
}

.step-item {
	flex: 1;
	position: relative;
	color: #fff;
	border: 1px solid #ddd;
}

.step-item::after {
  content: "";
  position: absolute;
  right: -30px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 26px solid transparent;
  border-bottom: 26px solid transparent;
  border-left: 30px solid #fff;
  z-index: 1;
}

.step-item:last-child::after {
  content: none;
}

.step-title {
	font-weight: 600;
	padding: 1.3rem;
	font-size: 1.7rem;
	text-align: center;
}

.step-content {
  background: #fff;
  color: #333;
  padding: 1.2rem;
  /*border: 1px solid #ddd;*/
  border-top: none;
  /*border-radius: 0 0 8px 8px;*/
}

/*.step-content h3 {
	border: none !important;
	margin-bottom: 0.4rem;
	border-left: 4px solid rgb(115 196 140) !important;
	padding-left: 1.5rem !important;
	margin-top: 0 !important;
	text-align: left;
}*/

.step-content p {
  font-size: 0.95rem;
  color: #555;
}

/* 各ステップの色 */
.color1 { background-color: #7ba5dd; }
.color2 { background-color: #7a8da5; }
.color3 { background-color: #556372; }
.color4 { background-color: #6bb6b0; }
.color5 { background-color: #8dba6a; }

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .step-flow {
    flex-direction: column;
  }

  .step-item {
    margin-bottom: 2.5rem;
  }

  .step-item::after {
	right: 50%;
        top: auto;
        bottom: -51px;
        border-top: 25px solid #7589a6;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        transform: translateX(50%);
  }
}




/* お問い合わせ */
.toi-container {
  display: flex;
  flex-wrap: wrap; /* レスポンシブ対応で折り返しを有効化 */
  gap: 16px; /* カラム間のスペース */
}

/* カラムのスタイル */
.toi-column {
  flex: 1; /* カラムを均等に分割 */
  min-width: 300px; /* 最小幅を指定 */
  padding: 16px;
  box-sizing: border-box;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .toi-container {
    flex-direction: column; /* 縦並びに変更 */
  }
}

.card-container.card-2 {
	grid-template-columns: repeat(2, 1fr) !important;
	@media (max-width: 768px) {
		.card-container {
			grid-template-columns: 1fr !important;
		}
	}
}