/* =========================================
   WordPress・Cocoon 枠リセット
   ========================================= */
.content { margin-top: 0 !important; }
.main { padding: 0 !important; }
.entry-content { margin-top: 0 !important; }

.wrap {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 📦 下のコンテンツエリア（最大幅1400px・中央寄せ） */
.maincontainer {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4%; /* 左右の余白 */
  box-sizing: border-box;
	position:relative;
	z-index:2;
}

/* 改行コントロール用の便利クラス  {
 */
/* 🖥️ 通常時（パソコンなど画面が広いとき）は改行タグを非表示にする */
.sp-only {display: none !important;
}

/* 📱 画面幅が768px以下（スマホ・タブレット）になったら改行を有効にする */
@media screen and (max-width: 768px) {
  .sp-only {
    display: inline !important;
  }
}

/* =========================================
   トップバナーエリア（下側はみ出しダイナミック版）
   ========================================= */
.postpartum-banner {
  width: 100%;
  background-color: #ffffff;
  position: relative;
  
  /* 💡【重要】ここを visible に変えることで、下側へのはみ出しを許可します */
  overflow: visible;   
  
  display: flex;
  align-items: center;
  box-sizing: border-box;

  /* 左側の余白を下の1400px（余白4%）の左端と完全に同期 */
  padding-left: calc((100vw - 1400px) / 2 + 4%);
  padding-right: 4%;
	margin-bottom:-1% !important;
}

/* 画面幅が1400px未満になった場合の安全対策 */
@media screen and (max-width: 1400px) {
  .postpartum-banner {
    padding-left: 4%;
  }
}

/* --- 左側：テキストエリア --- */
.banner-content {
  width: 50%;
  position: relative;
  z-index: 2; /* イラストより前面に表示 */
  padding-top: 70px;
  padding-bottom: 40px;
  box-sizing: border-box;
}
.banner-title {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size:70px;
	font-weight:700;
	color:#FE6564;
}
.banner-subtitle {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size:27px;
	font-weight:500;
	color:#FE6564;
	margin-bottom:0 !important;
}
.banner-text {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size:18px;
	text-align:justify;
	color:#585858;
}

/* --- 右側：イラストを画面右端に吸着 ＆ 下にはみ出させる設定 --- */
.banner-image-wrap {
  position: absolute;
  top: 0;
  right: 0; /* 画面の右端ぴったりに固定 */
  width: 50%; 
  height: 100%;
  /* 💡 ここも visible にして子要素（画像）がはみ出せるようにします */
  overflow: visible; 
  z-index: 1;
}

/* お花の背景（右上ぴったりに配置・これはバナー枠に収める） */
.bg-flower {
	position: absolute;
    top: -30%;
    right: 0;
    width: auto;
    object-fit: contain;
}

/* 親子のメインイラスト（白い枠線を下側にはみ出させる） */
.bg-illustration {
  position: absolute;
  
  /* 💡 top指定を 50% から「0」または「10px」などに変え、
     高さをバナーの100%（あるいはそれ以上）にすることで下側へ飛び出させます */
  top: 12%; 
  right: 30%; 
  
  /* 💡 バナーの高さ（380px）よりも大きいサイズ（例: 430px）を直接指定して、
     強制的に下へはみ出させます（サイズはお好みで微調整してください） */
  height: 470px; 
  
  width: auto;
  object-fit: contain;
}

/* =========================================
   📱 モバイル（スマホ）対応（画面幅768px以下）
   ========================================= */
@media screen and (max-width: 500px) {
  
  /* 📦 メインコンテナの余白を少し狭めて画面を広く使う */
  .maincontainer {
    padding: 0 5%;
	  margin-top:-45%;
  }

  /* 💡 バナーを縦並び（上下配置）に変更 */
  .postpartum-banner {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 5% !important; /* calcを解除して一律5%に */
    padding-right: 5% !important;
    min-height: auto; /* 高さを中身（テキスト＋画像）に合わせる */
    overflow: hidden; /* スマホでは画面外へのはみ出しによる横揺れを防ぐ */
    margin-bottom: 25px !important;
  }

  /* --- 左側だったテキストエリア --- */
  .banner-content {
    width: 100%; /* 横幅いっぱい */
    padding-top: 40px;
    padding-bottom: 0;
  }

  /* スマホに合わせて文字サイズを最適化 */
  .banner-title {
    font-size: 36px; /* 70pxからスマホサイズに縮小 */
    white-space: normal; /* スマホ画面で自動改行を許可 */
  }
  .banner-subtitle {
    font-size: 18px; /* 27pxから縮小 */
    margin-top: 5px;
  }
  .banner-text {
    font-size: 15px; /* 説明文も少しコンパクトに */
    line-height: 1.6;
  }
	.kakomi {font-size:18px !important;}
	.daygentei {font-size:17px !important;}
	.dayttl2 {font-size:23px !important;line-height: 1.3;}

  /* --- 右側だったイラストエリア（テキストの下へ配置） --- */
  .banner-image-wrap {
    position: relative; /* 絶対配置(absolute)を解除して、テキストの下に並べる */
    width: 100%;
    height: 220px; /* スマホでの画像の表示高さ */
    margin-top: 0;
    margin-bottom: 20px;
    overflow: hidden; /* お花のはみ出しをカット */
  }

  /* お花の背景 */
  .bg-flower {
    top: 0;
    right: -10%; /* 右側に少し寄せてトリミング気味に見せる */
    height: 70%;
    width: auto;
  }

  /* 親子のメインイラスト */
  .bg-illustration {
            position: absolute;
        top: 31%;
        right: auto;
        left: 60%;
        transform: translate(-50%, -50%);
        height: 70%;
        width: auto;
  }
}
/* 以降の .daygentei やスケジュールテーブルなどのCSSは変更不要でそのまま下に続けてOKです */



.daygentei {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size:22px;
	font-weight:500;
	color:#585858;
}
.kakomi {
	font-size:25px;
	background:#FE6564;
	color:#fff;
	padding: 0 15px;
    border: 1px solid #FE6564;
    border-radius: 25px;
    margin-right: 0.5em;
}
.dayttl2 {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size:25px;
	font-weight:700;
	color:#FE6564;
}
.sp-only {
    display: block;
  }
/*スケジュール*/
/* =========================================
   産後デイサービス スケジュールテーブル
   ========================================= */
.schedule-table-wrap {
  margin: 30px 0;
  font-family: "Zen Maru Gothic", sans-serif; /* 優しいフォントに変更 */
  max-width: 100%;
  overflow-x: auto; /* スマホでハミ出た時の横スクロール保険 */
}

.schedule-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px; /* 画像のようなセルの間隔を作る */
  font-size: 0.95rem;
  line-height: 1.5;
  table-layout: fixed; /* 各列の幅を固定 */
}

/* ヘッダー全体のスタイル */
.schedule-table thead th {
  border: none;
  padding: 10px;
}

/* 「スケジュール例」タイトル */
.table-main-title {
  background-color: #FFB3B3;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 6px 6px 0 0; /* 上部角丸 */
}

/* ベビー・時間・ママの見出し行 */
.table-sub-header th {
  padding-top: 20px !important; /* アイコンが乗るスペースを作る */
}
.table-sub-header th { font-weight: normal; }

.head-content {
	position: relative;
	display: inline-block;
	font-size:20px;
}

/* ★★★ 重要：アイコン画像の設置 ★★★ */
/* ここにメディアライブラリにアップロードしたアイコン画像のURLを入れてください */
.icon-baby, .icon-mother {
  position: absolute;
  top: -75px; /* 見出しの上に浮かせる */
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* 優しい影 */
  background-position: center;
  background-repeat: no-repeat;
	z-index:10;
}

/* 各アイコンの画像URL（メディアライブラリのURLに変更してください） */
.icon-baby {
  left: 60px;
  background-image: url('/renewal/wp-content/uploads/2026/07/baby_icon.svg'); 
}
.icon-mother {
  right: 60px;
  background-image: url('/renewal/wp-content/uploads/2026/07/mother_icon.svg');
}

/* 文字色 */
.baby-head {
	color: #FE6564;
	background: #fff;
	font-weight:500;
}
.mother-head {
	color: #FE6564;
	background: #fff;
	font-weight:500;
} 
.time-head { color: #333333; background-color: #fff; font-weight: bold;} /* 時間見出し背景色 */


/* ボディ（セル）のスタイル */
.schedule-table tbody td {
  border: none;
  padding: 15px 10px;
  vertical-align: middle;
}
.baby-cell { text-align: left; }
.time-cell { text-align: center; color: #333333; width: 15%;}
.mother-cell { text-align: left; }

/* 各列の幅（スマホ・PC共通） */
.schedule-table th:nth-child(1), .schedule-table td:nth-child(1) { width: 42.5%; }
.schedule-table th:nth-child(2), .schedule-table td:nth-child(2) { width: 15%; }
.schedule-table th:nth-child(3), .schedule-table td:nth-child(3) { width: 42.5%; }

/* ★背景色の再現 */
.bg-light { background-color: #edebcb;; color: #333333; } /* 非常に薄い黄 */
.bg-orange { background-color: #FCE6D3; color: #333333; } /* 薄いオレンジ */

/* 最終行の角丸 */
.schedule-table tbody tr:last-child td:first-child { border-radius: 0 0 0 6px; }
.schedule-table tbody tr:last-child td:last-child { border-radius: 0 0 6px 0; }

/* =========================================
   レスポンシブ（スマホ対応）
   ========================================= */
@media screen and (max-width: 600px) {
  .schedule-table { font-size: 16px; } /* スマホでは文字を少し小さく */
	.schedule-table thead th {padding:0 !important;}
  .icon-baby, .icon-mother {
	      top: -40px;
    width: 40px;
    height: 40px;
	} /* アイコンも少し小さく */
	.icon-baby{left: 30px;}
	.icon-mother {right: 30px;}
  .head-content { padding-left: 0; padding-right: 0; } /* スマホでの左右余白調整 */
}
.schedulettl {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 30px;
	font-weight:500;
	color: #FE6564;
	margin-top: -50px;
	margin-bottom: 0 !important;
}
@media screen and (max-width: 600px) {
	.schedulettl {
		font-size:20px;
		text-align:justify;
		line-height: 1.3;
        padding-left: 1em;
        text-indent: -1em;
	}
}
.schedulettlsub {
	padding-left:30px;
	font-family: "Zen Maru Gothic", sans-serif;
	color: #585858;
}
@media screen and (max-width: 600px) {
	.schedulettlsub{
		font-size:15px;
		text-align:justify;
		line-height: 1.5;
        padding-left: 1.4em;
		margin-top: 0.3em;
	}
	
}

/* =========================================
   お持ちいただくもの リスト
   ========================================= */
.belongings-list {
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  border: 1px solid #E2D7CD; /* 全体を囲む薄いベージュの枠線 */
  border-radius: 50px; /* 両端を丸くする */
  background-color: #fff;
  overflow: hidden; /* ラベルの角丸が枠からはみ出ないようにする */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* 優しい影を追加（お好みで） */
  margin: 30px 0;
  font-family: "Zen Maru Gothic", sans-serif; /* 優しいフォント（もしサイトに使っていれば） */
}

/* 左側のピンクのラベル */
.belongings-label {
  background-color: #FE6564; /* 画像から抽出したピンク色 */
  color: #fff;
  font-weight: bold;
  font-size: 1.3rem;
  padding: 15px 30px; /* ラベルの余白 */
  border-radius: 50px 0 0 50px; /* 左側だけ角丸 */
  white-space: nowrap; /* テキストを改行させない */
}

/* 右側のテキストエリア */
.belongings-text {
  color: #CD5C5C; /* 画像から抽出した文字色 */
  font-weight: bold;
  font-size: 2rem;
  padding: 0 30px; /* 右側のテキストの余白 */
  margin: 0 !important; /* Cocoonのデフォルトマージンをリセット */
  flex: 1; /* 残りのスペースをすべて使う */
  line-height: 1.4;
}

.amenities {
	width:70%;
	margin:0 auto;
}
.amenities-ttl {
	font-family: "Zen Maru Gothic", sans-serif; 
	font-size:22px;
	font-weight:500;
	color:#FE6564;
}
.amenities-subttl {
	font-family: "Zen Maru Gothic", sans-serif; 
	font-weight:500;
	color:#fff;
	background-color:#FE6564;
	border:1px solid #FE6564;
	border-radius:25px;
	width:10em;
	text-align:center;
}
.amenities-txt {
	font-family: "Zen Maru Gothic", sans-serif; 
	margin-bottom:1em;
	line-height:1.5;
	text-align:justify;
	padding-left:1em;
}

/* =========================================
   スマホ（レスポンシブ）対応
   ========================================= */
@media screen and (max-width: 600px) {
  .belongings-list {
    flex-direction: column; /* 縦並びにする */
    align-items: center; /* 中央揃え */
    border-radius: 20px; /* スマホでは角丸を少し緩く */
    padding-bottom: 15px; /* 下部に余白を追加 */
  }

  .belongings-label {
    width: 100%; /* 幅をいっぱいにする */
    text-align: center;
    border-radius: 20px 20px 0 0; /* 上部だけ角丸 */
    padding: 10px; /* スマホでは余白を詰める */
    margin-bottom: 15px; /* 下部テキストとの余白 */
  }

  .belongings-text {
    width: 100%;
    text-align: center;
    padding: 0 15px; /* スマホでは余白を詰める */
    font-size: 21px;
  }
}


/* =========================================
   アロマ・アメニティ案内エリア（image_9.png）
   ========================================= */
.amenity-section {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 縦方向を中央揃えに（上揃えが良ければ flex-start に） */
  margin: 40px 0;
  font-family: "Zen Maru Gothic", sans-serif;
  gap: 20px;
	width: 70%;
    margin: 0 auto;
}

/* 左側：テキスト全体の箱 */
.amenity-text-box {
  flex: 1;
}

/* 上段のリード文 */
.amenity-lead {
  font-size: 1.2rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px !important;
	font-weight:500;
}

/* 必要に応じて〜の塊 */
.amenity-required-wrap {
  margin-bottom: 30px;
}
.amenity-required-ttl {
  display: block;
  font-weight: bold;
  color: #333333;
  font-size: 1.5rem;
}
.amenity-required-items {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333333;
  margin: 0 !important;
}

/* 🔴 オプションメニューはこちらから ボタン */
.amenity-btn-wrap {
  margin: 25px 0;
	text-align:center;
}
.amenity-option-btn {
  display: inline-block;
  border: 2px solid #EF9F8A; /* ラフのピンク・赤系の枠線 */
  color: #EF9F8A;
  background-color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 50px;
  border-radius: 50px; /* カプセル型の丸み */
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* ボタンにマウスを乗せたとき（ホバー時）の演出 */
.amenity-option-btn:hover {
  background-color: #EF9F8A;
  color: #fff;
}

/* 右側：イラストの箱 */
.amenity-img-box {
  width: 25%; /* イラストの横幅ボリューム（お好みで微調整してください） */
  flex-shrink: 0;
}
.amenity-img-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   スマホ対応（画面幅が狭いとき）
   ========================================= */
@media screen and (max-width: 768px) {
  .amenity-section {
    flex-direction: column-reverse; /* スマホではイラストを上、テキストを下にする（通常の並びなら column ） */
    text-align: center;
    gap: 30px;
  }
  
  .amenity-img-box {
    width: 60%; /* スマホでイラストが大きすぎないように縮小 */
    margin: 0 auto;
  }
  
  .amenity-option-btn {
    display: block; /* スマホではボタンを押しやすく幅いっぱいに */
    padding: 12px 20px;
    font-size: 1.1rem;
  }
}



/*オプションメニュー*/
/* 全体を囲むエリア */
.day-option-wrapper {
  border-radius: 12px;
  padding: 40px 0; /* ★横パディングはlist側で制御するため0に変更 */
  margin: 5% 0;
  font-family: "Zen Maru Gothic", sans-serif;
  box-sizing: border-box;
}

/* ヘッダー部分 */
.day-option-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 0 15px; /* ★スマホ時の横余白 */
}
.day-option-badge {
  display: inline-block;
  color: #e67e22;
  font-size: 1.85rem;
  font-weight: 700;
  padding: 4px 15px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.day-option-header h2 {
  color: #e67e22;
  font-size: 2.3rem !important;
  margin: 0 0 5px 0 !important;
  font-weight: 700;
}
.day-option-lead {
  font-size: 1.2rem;
  color: #333333;
  line-height: 1.6;
}

/* メニューリストの構造（PCでは2列並び、スマホでは1列） */
/* メニューリストの構造（PCでは2列並び、スマホでは1列） */
.day-option-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* ★1fr から minmax(0, 1fr) に変更 */
  gap: 15px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
  width: 100%; /* ★確実に100%に収める */
}

@media screen and (min-width: 768px) {
  .day-option-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ★PC用も同様 */
  }
}

/* 各メニューカード */
.day-option-item {
  background: #fff;
  border: 1px solid #e2d7cd;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
  box-sizing: border-box;
  width: 100%;            /* ★追加 */
  min-width: 0;           /* ★Grid内での収縮を許可 */
  overflow-wrap: break-word; /* ★文字溢れ防止 */
}

/* 一番売りたい「おすすめ（アロマ全身）」だけを目立たせる */
.day-option-item.highlighted {
  border: 2px solid #e67e22;
  background-color: #fffdf9;
}
.item-recommend {
  position: absolute;
  top: -10px;
  left: 15px;
  background: #e67e22;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: bold;
}

/* テキストまわり */
.day-option-title {
  font-size: 1.1rem;
  color: #4a3c31;
  margin: 0 0 8px 0;
  font-weight: 700;
}
.day-option-desc {
  font-size: 0.85rem;
  color: #776a5f;
  margin: 0 0 15px 0;
  line-height: 1.5;
}

/* 価格表示 */
.day-option-price {
  font-size: 1.4rem;
  color: #e67e22;
  font-weight: 700;
  text-align: right;
  border-top: 1px dashed #eedcc7;
  padding-top: 10px;
  margin-top: auto;
}
.day-option-price::after {
  content: "（税込）";
  font-size: 0.75rem;
  color: #998d83;
}
.day-option-price-ask {
  font-size: 1rem;
  color: #776a5f;
  font-weight: 700;
  text-align: right;
  border-top: 1px dashed #eedcc7;
  padding-top: 10px;
  margin-top: auto;
}

/* 米じるしの注釈要素（全幅ぶち抜き設定） */
.day-option-item-kome {
  margin: 5px 0;          /* ★ネガティブマージン(-1%)を廃止し、安全なpx値に変更 */
  padding: 12px 15px;      /* ★上下左右に内側パディングを設定 */
  font-size: 0.95rem;      /* ★スマホで見やすいサイズに調整 */
  color: #fff;
  line-height: 1.5;
  text-align: center;
  background: #FE6564;
  border-radius: 6px;      /* ★少し角丸にするとカードと馴染みます */
  box-sizing: border-box;
  width: 100%;
}

/* PC（768px以上）で2列になった時に全幅にする */
@media screen and (min-width: 768px) {
  .day-option-item-kome {
    grid-column: 1 / -1; /* 1列目から最後の列までぶち抜く */
  }
}

/*利用の流れ*/
/* =========================================
   産後デイサービス ご利用の流れ（image_10.png）
   ========================================= */
.flow-section {
  margin: 50px 0;
  font-family: "Zen Maru Gothic", sans-serif;
}

/* 「ご利用の流れ」帯見出し */
.flow-main-title {
  background-color: #FFB3B3 !important; /* 画像と同じサーモンピンク色 */
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  padding:10px !important;
  margin-bottom: 5px !important;
}

/* リード文（赤文字） */
.flow-lead {
  color: #CD5C5C; /* 画像の濃い赤文字色 */
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 5px !important;
}
.flow-lead2 {
  color: #FFB3B3; /* 画像の濃い赤文字色 */
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 5px !important;
}

/* 4つのステップを並べる枠（PC用：横並び） */
.flow-step-container {
  display: flex;
  justify-content: space-between;
  gap: 15px; /* ステップ同士の間隔 */
}

/* 各ステップのカード */
.flow-step-item {
  flex: 1; /* 4つの幅を均等にする */
  display: flex;
  flex-direction: column;
}

/* ステップのヘッダー（黄緑の帯） */
.flow-step-header {
  background-color: #C1D319; /* 画像から抽出した黄緑色 */
  color: #0c4e75; /* 濃い紺色の文字 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 4px;
  position: relative;
  margin-bottom: 15px;
}

/* 白丸の数字 */
.step-num {
  background-color: #fff;
  color: #0c4e75; /* 数字の文字色 */
  font-weight: bold;
  font-size: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ステップのタイトル（申請、決定など） */
.step-ttl {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0 !important;
  color: #0c4e75 !important;
  letter-spacing: 0.1em;
}

/* 下段の説明テキスト */
.flow-step-desc {
  font-size: 1.1rem;
  color: #585858;
  line-height: 1.5;
  margin: 0 !important;
}

/* 改行コントロール用の便利クラス */
.pc-only { display: inline; }

/* =========================================
   レスポンシブ（スマホ対応）
   ========================================= */
@media screen and (max-width: 768px) {
  /* スマホでは横並びを解除して縦並び（1列）にする */
  .flow-step-container {
    flex-direction: column;
    gap: 30px; /* 縦に並んだときの間隔 */
  }
  
  .flow-lead {
    font-size: 1rem; /* スマホではリード文を少し小さく */
  }
	.flow-lead2 {
    font-size: 1rem; /* スマホではリード文を少し小さく */
  }
  
  .pc-only {
    display: none; /* スマホではPC用の改行を消す */
  }

  /* 💡 スマホのときだけ、ステップの間に「下向き矢印」を自動で挟む演出（お好みで） */
  .flow-step-item:not(:last-child) {
    position: relative;
  }
  .flow-step-item:not(:last-child)::after {
    content: "▼";
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    color: #C1D319;
    font-size: 0.9rem;
  }
}

/*市町村窓口*/
/* =========================================
   自治体 申込窓口一覧表（image_11.png 完全再現）
   ========================================= */
.contact-table-wrap {
  margin: 40px 0;
  width: 100%;
  overflow-x: auto; /* スマホで画面からはみ出た際のスクロール保険 */
}

.contact-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", sans-serif;
  font-size: 1.1rem;
  color: #333;
}

/* ヘッダー（最上段グレー） */
.contact-table thead th {
  background-color: #E2E4E7; /* 画像の薄いグレー */
  color: #111;
  font-weight: bold;
  padding: 15px 10px;
  text-align: center;
  border: none;
}

/* 各セルの基本設定 */
.contact-table tbody td {
  padding: 15px 20px;
  vertical-align: middle; /* 上下中央揃え */
  border-bottom: 1px solid #7F878C; /* 横の区切り線 */
}

/* 各列の幅固定（比率） */
.contact-table th:nth-child(1), .contact-table td:nth-child(1) { width: 20%; }
.contact-table th:nth-child(2), .contact-table td:nth-child(2) { width: 55%; }
.contact-table th:nth-child(3), .contact-table td:nth-child(3) { width: 25%; }

/* ① 市町村列（左側グレー背景・白文字） */
.city-cell {
  background-color: #9AA3AC; /* 画像の濃いグレー */
  color: #fff !important;
  font-weight: bold;
  text-align: center;
}

/* ② 申込窓口列（中央・左寄せ） */
.window-cell {
  text-align: left;
  line-height: 1.4;
  background-color: #fff;
  border-right: 1px dashed #000; /* 👈 右側の縦の黒点線を再現 */
}

/* ③ 連絡先列（右側・中央寄せ） */
.tel-cell {
  text-align: center;
  background-color: #fff;
}
/* 電話番号のリンクデザインを打ち消し、普通の黒文字にする */
.tel-cell a {
  color: #333 !important;
  text-decoration: none !important;
  pointer-events: auto; /* パソコンでもスマホでもタップ可能 */
  display: block;
}
/* 仙北市のように2行ある場合の行間調整 */
.tel-cell.font-double {
  line-height: 1.6;
}

/* =========================================
   スマホ表示での調整
   ========================================= */
@media screen and (max-width: 650px) {
  .contact-table {
    font-size: 0.9rem; /* スマホでは文字が溢れないよう少し縮小 */
  }
  .contact-table tbody td {
    padding: 10px 8px; /* スマホの余白詰め */
  }
	.amenities {width:100%;}
	.amenities-ttl {
		font-size:20px;
		line-height:1.5;
		margin-bottom:2%;
	}
	.amenity-section {width:100%;}
	.amenity-required-ttl {font-size: 1.4rem;}
	.day-option-header {padding:0;}
	.day-option-badge {
		font-size: 1.3rem;
		padding:0;
	}
	.day-option-header h2 {
		font-size: 1.8rem !important;
		padding:5px !important;
	}
	
}