@charset "utf-8";

/* common.cssの設定を連携しているため変更点や追加点のみ記載 */
body {
    background: none;
    background-color: var(--primary-whiteLow);
}

.topic {
    line-height: 0.8;
    margin-bottom: 60px;
}

.sub {
    font-size: 1.8rem;
}


/* グリッドスタイル */
.img_kids {
    display: flex; /* フレックスボックスを使用して画像を横並びに */
    flex-wrap: wrap;
    justify-content: space-around; /* 画像間のスペースを均等に */
    gap: 20px;
    padding: 0 20px;
}
  
/* サムネイル画像のスタイル */
.zoomable {
    max-width: 150px;
    max-height: 100px;
    width: auto;
    cursor: pointer;  /* カーソルをポインターにしてクリック可能に */
    transition: transform 0.3s; /* ホバー時の変化を滑らかに */
}

.zoomable:hover {
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

.footer {
    padding-top: 80px;
}

/* ===== モーダル用スタイル ===== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.close-btn:hover {
  color: #ccc;
}



/* gallery-kids- pc */
@media screen and (min-width: 769px) {
    .topic {
        margin-top: 150px;
        line-height: 0.6;
    }

    .sub {
        font-size: 3rem;
    }

    .img_kids {
        gap: 70px;
        padding: 0 150px;
        margin-top: 170px;
    }

    .zoomable {
        max-width: 380px;
        max-height: 250px;
    }

}/* pc 769px */


/* modal closeが表示されっぱなしだから設定要 */