@charset "utf-8";
/* CSS Document */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 共通スタイル設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* タグ単位のスタイル */
.overview-container .tbl2_brown td {
 text-align: left;
}
.fees-container .tbl_plain th {
 width: 50%;
}
.fees-container .tbl_plain td {
 text-align: left;
 vertical-align: top;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 基本domを全て非表示にする */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 個別設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 施設概要と利用料金 */
.container {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.overview-container, .fees-container {
 width: 50%; /* PC表示ではそれぞれ50%のサイズ */
 box-sizing: border-box; /* パディングとボーダーを幅に含める */
 padding: 0 10px; /* 内側のスペース */
}
.overview-container ul {
 margin-left: 0;
}
.overview-container ul li {
 list-style: none;
}
/* 月極利用 申込みボタン */
.pre_monthly_btn {
  display: block; /* ブロックレベル要素として扱い、中央寄せを可能にする */
  width: 100%;
  max-width: 500px; /* ボタンの最大幅 */
  position: relative;
  background: #FFA07A; /* オレンジ系の背景色 */
  border: 2px solid #FFA07A; /* ボーダーの色もオレンジ系に */
  padding: 1.5em 2em; /* パディングを少し増やしてボタンの高さを調整 */
  font-size: 20px; /* 文字サイズを大きく */
  font-weight: bold;
  color: white; /* 文字色を見やすい色に（ここでは例として青系を選択） */
  text-decoration: none;
  text-align: center;
  border-radius: 5px; /* 角を少し丸める */
  transition-duration: 0.3s;
	 margin: 40px auto; /* 上下に0、左右自動で中央寄せ、下に20pxのマージン */
}
.post_content .pre_monthly_btn a {
  color: white !important; 
}
.pre_monthly_btn:before {
  content: '';
  width: 10px; /* 矢印のサイズを大きく */
  height: 10px; /* 矢印のサイズを大きく */
  border: 0;
  border-top: 2px solid #fff; /* 矢印の色（白） */
  border-right: 2px solid #fff; /* 矢印の色（白） */
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -5px; /* 矢印の位置調整 */
}

/* マウスオーバーした際のデザイン */
.pre_monthly_btn:hover {
  background: #fff; /* 背景色を白に */
  color: #000; /* 文字色を黒に */
}
.pre_monthly_btn:hover a {
  color: #000; 
}
.pre_monthly_btn:hover:before {
  border-top: 2px solid #000; /* ホバー時の矢印の色を黒に */
  border-right: 2px solid #000; /* ホバー時の矢印の色を黒に */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* メディアクエリー */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ***************************************** */
/* 一般的なスマホ用 (767px)  */
/* ***************************************** */
@media (max-width: 767px) {
 /* 施設概要と利用料金 */
 .overview-container, .fees-container {
  width: 100%; /* スマホ表示では100% */
 }
 /* 位置合わせ */
 .tbl2_brown.overview, .tbl_plain.fees {
  margin-bottom: 20px; /* 下にスペース */
 }
}