/* ラジオボタンは隠す */
input[name="tab-item"] { display: none; }

/* タブ（写真）の並び */
.tab-label-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-label {
  flex: 1;
  cursor: pointer;
  opacity: 0.6; /* 非選択時は少し薄く */
  transition: 0.3s;
}

/* 選択された写真だけハッキリさせる */
#tab1:checked ~ .tab-label-group label[for="tab1"],
#tab2:checked ~ .tab-label-group label[for="tab2"],
#tab3:checked ~ .tab-label-group label[for="tab3"],
#tab4:checked ~ .tab-label-group label[for="tab4"] {
  opacity: 1;
  transform: scale(1.05); /* 少し大きくして選択中を強調 */
}

/* コンテンツの制御 */
.tab-content {
  display: none; /* 基本は全部隠す */
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

/* 選択された番号のコンテンツだけ表示 */
#tab1:checked ~ .tab-content-group #content1,
#tab2:checked ~ .tab-content-group #content2,
#tab3:checked ~ .tab-content-group #content3,
#tab4:checked ~ .tab-content-group #content4 {
  display: block;
  animation: fadeIn 0.5s; /* ふわっと表示 */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mainitem-dait{
    letter-spacing: 0.2rem;
    font-size: 2rem;
    font-weight: bold;
    font-family: "游明朝", serif;
    text-align:center;
}

.content_img {
  max-width: 100%;
  height:180px;
  border-radius: 8px;
  margin-top: 10px;
  object-fit: cover;  /* これが重要！比率を保ったまま枠を埋める */
}

.brp{
display:none;
}
@media (max-width: 768px) {
  .mainitem-dait{
    font-size: 1rem;
}  

.content_img {
  height:auto;
}

.brp{
display:inline;
}

}