@charset "utf-8";
/*==================================================
	【トップ】ページ固有のスタイル
==================================================*/
.cleaning-plans {
  padding: 60px 20px;
  background: #e1eff9;
  color: #333;
}

.inner {
  max-width: 1000px;
  margin: 0 auto;
}

.plan-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列表示 */
  gap: 24px;
  align-items: flex-start;
}

.plan-card {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  border-top: 4px solid #244a9a;
}
.plan-card-in {
	display: flex;
  gap: 18px;
}

.plan-image {
  flex: 0 0 130px;
}

.plan-image img {
  width: 100%;
  border-radius: 12px;
  display: block;
}

.plan-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.plan-area {
  font-size: 13px;
  color: #333;
  border: 1px solid #BBB;
  border-radius: 3px;
  padding: 3px 5px;
  line-height: 1;
  margin-bottom: 4px;
  width: fit-content;
  max-width: fit-content;
}

.plan-copy {
  color: #244a9a;
  font-size: 14px;
  margin-bottom: 4px;
}

.plan-title {
  font-size: 21px;;
  color: #244a9a;
  margin: 4px 0 0px 0;
}

.plan-price {
  margin-bottom: 0px;
}

.price-main {
  font-size: 26px;
  font-weight: 700;
  color: #244a9a;
  margin: 0;
}

.price-main span {
  font-size: 14px;
}

.price-sub {
  font-size: 13px;
  margin-top: 4px;
}

.plan-actions {
  display: flex;
  margin-top: auto; /* 下部に寄せる */
  border-radius: 999px;
  overflow: hidden;
}

.plan-actions button,
.plan-actions a {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border: none;
}

.plan-toggle {
  background: #2b5cb4;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,0.3);
}

.plan-link {
  background: #14449b;
  display: flex;
  align-items: center;
  justify-content: center;
	color: #FFF !important;
}

.plan-detail {
  display: none;
  margin-top: 15px;
  color: #333;
  font-size: 14px;
}
.plan-detail .ttl {
	font-weight: 600;
  font-size: 120%;
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 2px solid #ccc;
}
.plan-card.open .plan-detail {
  display: block;
}

.detail-list {
  margin: 0 0 10px;
background: #f8f9fc;
	padding: 10px;
}

.detail-list li {
	margin-left: 20px;
}

.plan-btn {
  display: block;
  margin-top: 12px;
  padding: 10px 20px;
  background: #c80000;
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
	text-align: center;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}
.feature-text {;
	padding: 30px 0 60px;
	line-height: 1.8;
}

.feature-text h3 {
  margin-bottom: 16px;
}

.feature-text p {
  margin-bottom: 16px;
}

.feature-toggle {
  display: block;
  padding: 10px 18px;
  border: 1px solid #0f46a8;
  background: #0f46a8;
  cursor: pointer;
color: #fff;
  font-size: 14px;
	text-align: center;
	margin: auto;
	width: 250px;
  position: relative;
  z-index: 10;
}

.feature-toggle:hover {
  opacity: 0.8;
}
@media (max-width: 768px) {
  .plan-list {
    grid-template-columns: 1fr; /* スマホは1列 */
  }
  .plan-card {
    flex-direction: row;
  }
}
@media print, screen and (min-width: 769px){ /* PCのみ */
}
@media print, screen and (min-width: 641px){ /* PC・タブレット */
}
@media only screen and (max-width: 768px) and (min-width: 641px){ /* タブレットのみ */
}
@media only screen and (max-width: 768px) {  /* タブレット以下 */
	.cleaning-plans {
	padding: 30px 15px;
	}
}
@media only screen and (max-width: 640px) {  /* スマホ以下 */
	.plan-area {
	  font-size: 12px;
	}
	.plan-copy {
	  font-size: 13px;
	}
	.plan-image {
	  flex: 0 0 80px;
	}
	.plan-title {
	  font-size: 16px;
	}
	.price-main {
	  font-size: 20px;
	}
	.plan-card {
	  padding: 15px;
	}
	.price-sub {
	  font-size: 12px;
	  margin-top: 0;
	}
	.feature-text {
		padding: 10px 0 40px;
	}
	.feature-text .img_lft,
	.feature-text .img_rit {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		float: none;
	}
	

}