/* ギャラリーアイテム */
.gallery_inner{
    width: 80%;
    margin: 0 auto;
}

.item {
    width: 300px;
    margin-bottom: 20px;
}

.item img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.item img:hover {
    transform: scale(1.05);
}



/*****/
/* タブ全体を囲むコンテナの設定 */
.tab-switch {
    display: flex; /* タブを横並びに */
    flex-wrap: wrap; /* 幅に応じて折り返し */
    gap: 10px;/* タブ間の余白 */
}

/* 各タブボタンの設定 */
.tab-switch > label {
    order: -1; /* 上部に表示する */
    position: relative; /* 絶対位置指定用の基準 */
    padding: .7em 1em; /* 上下左右の内側余白 */
    cursor: pointer; /* ポインターを指アイコンに変更 */
    color: #5a5a5a;
    font-family: 'Arial', sans-serif;
}

/* タブボタンのホバーおよび選択状態のスタイル */
.tab-switch > label:hover,
.tab-switch label:has(:checked) {
    color: #8fa3b0;
    border-bottom: 1px solid #8fa3b0;
}

/* ラジオボタン自体は非表示 */
.tab-switch input {
    display: none; /* 見た目に表示されないようにする */
}

/* タブコンテンツのスタイル */
.tab-switch > div {
    display: none; /* 初期状態では非表示 */
    width: 100%; /* コンテンツ幅を全体に */
    padding: 1.5em 1em; /* 内側余白 */
}

/* 選択されたタブのコンテンツを表示 */
.tab-switch label:has(:checked) + div {
    display: block; /* 選択されたタブに対応するコンテンツを表示 */
}

.gallery_inner h2 {
    display: none;
}