.gallely-container {
	/* [disabled]max-width: 1000px; */
	/* 必要に応じて調整 */
	margin: 40px auto;
	position: relative;
	font-family: sans-serif;
}

.gallely-layout {
    display: grid;
    /* 左2: 右1 の比率で分割 */
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    /* 画像の隙間 */
}

.gallely-main {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
}

.gallely-subs {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.gallely-main img,
.gallely-sub img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
	/* [disabled]border-radius: 4px; */
    transition: opacity 1.0s ease;
    /* お好みで */
}

.gallely-main img.fading,
.gallely-sub img.fading {
    opacity: 0;
}

/* ナビゲーションボタン */
.gallely-controls {
    text-align: center;
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
    gap: 20px;
	width: 50%;
	max-width: 270px;
	margin: 1em auto 0;
}

@media screen and (max-width:476px){
.gallely-controls {
	width: 100%;
	max-width: 270px;
	margin: 1em auto 0;
}
}
.gallely-controls button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}

.gallely-controls button:hover {
    opacity: 0.7;
}

.gallely-controls img {
	/* [disabled]height: 40px; */
	width: auto;
}

/* スマホ対応（500px以下） */
@media (max-width: 500px) {
    .gallely-layout {
        display: block;
        /* グリッド解除 */
    }

    .gallely-main {
        aspect-ratio: 4 / 3;
        /* スマホでのメイン画像の縦横比 */
    }

    /* サブ画像を非表示にする */
    .gallely-subs {
        display: none;
    }
}

@media screen and (max-width:800px){
}

@media screen and (max-width:476px){
}