body {background-color:#f1f1f1;}
.tpl_area{margin: 40px auto 40px; text-align: center;}
.tpl_area ul{display: flex; flex-wrap: wrap;}
.tpl_area ul li{width: 29.3333%; margin-right: 6%; margin-bottom: 40px;}
.tpl_area ul li:nth-child(3n){margin-right: 0;}
.tpl_area .fw-bold{font-size: 1.1rem; margin-bottom: 10px;}
#tpl button{text-align: center;}
.tpl_name{text-align: center; margin-top: 12px;}
/* ラジオボタン自体の非表示化 */
.radio-item input[type="radio"] {
  display: none;
}

.radio-item {
  cursor: pointer;
  display: block;
}
.image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* 画像の基本設定 */
.image-wrapper img {
  width: 100%;
  height: 290px;
  object-fit: cover;
  display: block;
}
/* キャプション（基本は非表示） */
.image-wrapper .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
 padding: 15px 18px;
    box-sizing: border-box;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 100%;
    display: flex;
    align-items: center;
 
    text-align: left;
}

/* ホバー（マウスオーバー）時のアクション */
/*.radio-item:hover .image-wrapper {
  transform: translateY(-5px); 
}*/

.radio-item:hover .caption {
  opacity: 1; /* キャプションを表示 */
}

/* 選択された時の装飾（枠線などで強調） */
.radio-item input[type="radio"]:checked + .image-wrapper {
  outline: 3px solid var(--bs-primary);
}

/* =========================================================
	SP
========================================================= */
@media screen and (max-width: 767px) {
.container{max-width: initial;}	
.tpl_area{margin: 10% auto 6%;}
.tpl_area ul{display: block;}
.tpl_area ul li{width: 75%; margin:0 auto 8%;}
.tpl_area ul li:nth-child(3n){margin-right: auto;}
.image-wrapper img {height: 85vw;}	
}