body {line-height: 1;}
@media screen and (width < 768px) {
	.slider { max-width:100%; margin: auto;} 
}
@media screen and (width >= 768px) {
	.slider { max-width:500px; margin: auto;} 
}
@media screen and (width >= 1200px) {
	.slider { max-width:700px; margin: auto;} 
}
.flex-caption {
              padding: 2%;
              left: 0;
              bottom: 0;
              background: rgba(0, 83, 135,.5);
              color: #fff;
              text-shadow: 0 -1px 0 rgba(0,0,0,.3);
              font-size: 16px;
              line-height: 20px;
            }

h2.kikakuweb_mincho {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color: #005387;
	font-weight: bold;
	font-size: 1.8em;
	margin-bottom: 15px;
	text-align: center;
}

p{ font-size: 1.2em; line-height: 1.4em;}

  /* ボタンの基盤：5:4の比率を維持 */
  .custom-link-btn {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 5 / 4; /* 横5:縦4 */
      overflow: hidden;    /* はみ出る背景画像をカット */
      text-decoration: none;
      border-radius: 8px;
      border: 1px solid #dee2e6; /* Bootstrap標準のグレーに近い色 */
      box-sizing: border-box;     /* 罫線がボタンのサイズに含まれるように設定 */            
  }

  /* 背景画像（擬似要素で制御することで拡大しても枠からはみ出さない） */
  .custom-link-btn::before {
      content: "";
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background-size: cover;
      background-position: center;
      transition: transform 0.6s ease; /* 拡大の動きを滑らかに */
      z-index: 1;
  }

  /* サンプル画像（実際の画像パスに差し替えてください） */
  .btn-bg-1::before { background-image: url('../images/btn-image-01.jpg'); }
  .btn-bg-2::before { background-image: url('../images/btn-image-02.jpg'); }
  .btn-bg-3::before { background-image: url('../images/btn-image-03b.jpg'); }
  .btn-bg-4::before { background-image: url('../images/btn-image-04b.jpg'); }
  .btn-bg-5::before { background-image: url('../images/btn-image-05.jpg'); }
  /* 中央の横帯 */
  .horizontal-strip {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); /* 垂直方向の真ん中に配置 */
      width: 100%;
      height: 40%; /* 帯の高さ（お好みで調整） */
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      
      /* 初期：白で10%透過（不透明度90%） */
      background-color: rgba(255, 255, 255, 0.95);
      transition: all 0.4s ease;
      width: 100%;
  }

  /* テキスト（初期：青色） */
  .strip-text {
      color: #215caa;
      font-weight: bold;
      line-height: 1.4;
      transition: color 0.4s ease;
      font-size: 1.2rem;
  }

  /* --- HOVER時のエフェクト --- */

  /* 1. 背景画像を拡大 */
  .custom-link-btn:hover::before {
      transform: scale(1.1);
  }

  /* 2. 帯の色を青に変更（透過なし） */
  .custom-link-btn:hover .horizontal-strip {
      background-color: rgba(33, 92, 170, 0.8);
  }

  /* 3. 文字色を白に変更 */
  .custom-link-btn:hover .strip-text {
      color: #ffffff;
  }