@charset "utf-8";
/* CSS Document */
html.light { overflow: hidden;}
section .inner h2.final { background-color: transparent; text-align: center; color: #FFF; font-size: 32px; line-height: 1.4;}
.image.image2 { max-width: 300px;}
.image.image3 { max-width: 80%;}

.rank { background-color: rgba(0,0,0,.2); border-radius: .3em; padding: 20px;}
.rank li { display: flex;align-items: center; padding: 1em 0; border-bottom: 1px solid #666;}
.rank li figure { width: 170px; margin-right: 2em; }
.rank li figure img { width: 100%; height: auto;}
.rank li div { width: calc(100% - 170px - 2em); }
.rank li h4 { font-size: 160%; margin-bottom: .4em; color: #FFF;}



.lb-next,.lb-prev {
    height: 100%;
    cursor: pointer;
    display: block
}

a.lb-prev {
    width: 34%;
    left: 0;
    float: left;
    background: url(../images/prev.png) left 48% no-repeat;
    filter: alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity .6s;
    -moz-transition: opacity .6s;
    -o-transition: opacity .6s;
    transition: opacity .6s
}

a.lb-prev:hover {
    filter: alpha(Opacity=100);
    opacity: 1
}

 a.lb-next {
    width: 64%;
    right: 0;
    float: right;
    background: url(../images/next.png) right 48% no-repeat;
    filter: alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity .6s;
    -moz-transition: opacity .6s;
    -o-transition: opacity .6s;
    transition: opacity .6s
}

 a.lb-next:hover {
    filter: alpha(Opacity=100);
    opacity: 1
}
/* Lightbox全画面表示のカスタマイズ */
        .lb-outerContainer {
            max-width: 98vw !important;
            max-height: 98vh !important;
            width: auto !important;
            height: auto !important;
            background: transparent !important;
            border: none !important;
            margin: 0 auto !important;
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            padding: 0 !important;
        }
        
        .lb-image {
            max-width: 98vw !important;
            max-height: 98vh !important;
            width: auto !important;
            height: auto !important;
            object-fit: contain !important;
            margin: 0 !important; border: none!important;
        }
        
        .lb-dataContainer {
            max-width: 98vw !important;
            width: 100% !important;
            background: transparent !important;
            position: absolute !important;
            bottom: -40px !important;
            padding: 0 !important;
        }

        .lb-container {
            padding: 0 !important;
            background: transparent !important;
        }

        .lb-nav {
            padding: 0 !important; height: 60px; top:50%; transform: translateY(-50%);
        }

        .lightbox {
            background-color: rgba(0, 0, 0, 0.9) !important;
        }

       .lb-cancel {
            margin: 0 !important;
        }

        .lb-image {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            cursor: grab;
        }
        
        .lb-image:active {
            cursor: grabbing;
        }

        .gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 0px;
        }
        
        .gallery-item {
            width: calc((100% - 30px) / 4);
            aspect-ratio: 1 / 1;
            overflow: hidden;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .gallery-item img:hover {
            transform: scale(1.05);
        }

h3 { color: #FFF; font-size:18px; border-bottom: 1px solid #FCD729; padding: 1em 0; margin-bottom: .7em; line-height: 1.4;}
section.under .inner { padding: 30px 0; }
.image.image3 a { transition: all .4s ease 0s;}
.image.image3 a:hover { opacity: .5;}

#world { background-color: rgba(255,255,255,.1);}
section.under .inner h2 { line-height: 1.4;}

img { border-radius: .4em;}

@media screen and (max-width: 999px) {
.image.image2 { max-width: 50%;}	
	.image.image3 { max-width: 100%;}
	section.under .inner {
        padding: 30px 15px;
        width: auto;
        margin: 0 auto;
    }
	
	.gallery-item {
            width: calc((100% - 10px) / 2);
        }
	
	.lb-nav a.lb-next,.lb-nav a.lb-prev { opacity: 1;}
	section .inner h2.final { font-size: 22px;}
	
	.rank li figure { width: 100px; margin-right: 1em; }
.rank li div { width: calc(100% - 100px - 1em); }
	.rank li h4 {
    font-size: 130%;
}
	.rank li h4 + p { font-size: 80%;}
}

/* Zoom buttons style */
        .zoom-controls {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 100000;
            display: none;
            pointer-events: auto; width: 100%; text-align: center;
        }

        #lightbox .zoom-controls {
            display: block;
        }

        .zoom-btn {
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            padding: 10px 15px;
            margin: 0 5px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 16px;
            transition: background 0.3s;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

.zoom-reset { width: auto;}

        .zoom-btn:hover {
            background: rgba(0, 0, 0, 0.9);
        }