.section{
    padding-top: 50px;
    padding-bottom: 50px;
}

.container{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
/*     width: 90%; */
/*     min-width: 700px;
    max-width: 1000px; */
    width: 200px;
    position: relative;
}

.img_wrap{
    width: 55%;
}

.img_inner{
    width: 100%;
}

.img_content{
    position: relative;
}

.img_box{
    display: block;
    width: 100%;
}

.img{
    display: block;
    width: 100%;
    height: auto;
}



/* 拡大レンズの要素のスタイル */
.zoom_lens{
    position: absolute;
    z-index: 1;
    background: #000;
    opacity: 0.2;
/*     height: 200px;
    width: 200px; */
    height: 40px;
    width: 40px;

    visibility: hidden;
}
/* 画像にホバーしたら表示されるようにする */
.img_content:hover .zoom_lens{
    visibility: visible;
}



/* 拡大プレビューエリアのスタイル */
.zoom_wrap{
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #000;
/*     height: 420px;
    width: 420px; */
    height: 70px;
    width: 70px;
    overflow: hidden;
    z-index: 2;
}
.zoom_wrap.active{
    visibility: visible;
}

/* .zoom_imgにはJavaScriptでスタイルをあてる */



.slick-arrow{
    pointer-events: auto;
    width: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.nav_img_inner{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
    width: 100%;
}

.nav_img_box,
.nav_img_box_dummy{
    width: 18%;
}
.nav_img_box.current{
    box-sizing: border-box;
    border: 2px solid #000;
}
.nav_img_box:nth-child(n+6){
    margin-top: 10px;
}

.nav_img{
    display: block;
    width: 100%;
    height: auto;
}

.info_wrap{
    width: 41%;
}

.info_title{
    font-size: 20px;
}

.info_text{
    font-size: 10px;
    line-height: 1.75;
    margin-top: 15px;
    text-align: justify;
}

// 賞品ズームプレビュー
let zoomWrapDOM = document.querySelector('.zoom_wrap');
let zoomImageDOM = zoomWrapDOM.querySelector('.zoom_img');
let zoomLensDOM = document.querySelector('.zoom_lens');
let imgContentDOMs = document.querySelectorAll('.img_content');
let zoomLensSize = zoomLensDOM.clientWidth;
let zoomScale = zoomWrapDOM.clientWidth / zoomLensSize;

for(let imgContentDOM of imgContentDOMs){
    let lens = imgContentDOM.querySelector('.zoom_lens');
    let img = imgContentDOM.querySelector('.img');
    imgContentDOM.addEventListener('mouseenter', function(){
        let image = imgContentDOM.querySelector('.img');
        zoomWrapDOM.classList.add('active');
        zoomImageDOM.setAttribute('src', image.src);
        zoomImageDOM.style.width = (image.offsetWidth * zoomScale) + 'px';
    });
    imgContentDOM.addEventListener('mouseleave', function(){
        zoomWrapDOM.classList.remove('active');
    });

    let xmax;
    let ymax;
    img.addEventListener('load', function(){
        xmax = img.offsetWidth - zoomLensSize;
        ymax = img.offsetHeight - zoomLensSize;
    });
    
    imgContentDOM.addEventListener('mousemove', function(e){
        let rect = imgContentDOM.getBoundingClientRect();
        let mouseX = e.pageX;
        let mouseY = e.pageY;
        let positionX = rect.left + window.pageXOffset;
        let positionY = rect.top + window.pageYOffset;
        let offsetX = mouseX - positionX;
        let offsetY = mouseY - positionY;
        let left = offsetX - (zoomLensSize / 2);
        let top = offsetY - (zoomLensSize / 2);

        lens.style.top = top + 'px';
        lens.style.left = left + 'px';
        zoomImageDOM.style.marginLeft = -(left * zoomScale) + 'px';
        zoomImageDOM.style.marginTop = -(top * zoomScale) + 'px';

        if(left > xmax){
            left = xmax;
        }
        if(top > ymax){
            top = ymax;
        }
        if(left < 0){
            left = 0;
        }
        if(top < 0){
            top = 0;
        }
        lens.style.top = top + 'px';
        lens.style.left = left + 'px';
        zoomImageDOM.style.marginLeft = -(left * zoomScale) + 'px';
        zoomImageDOM.style.marginTop = -(top * zoomScale) + 'px';
    });

};


$(function(){
    // スライダー
    $('.img_inner').slick({
        speed: 500,
        arrows: false,
        pauseOnHover: false,
    });
    $('.nav_img_box').each(function(index){
        $(this).attr('data-index', index);
    });
    $('.nav_img_box').eq(0).addClass('current');
    $('.nav_img_box').on('click',function(){
        let index = $(this).attr('data-index');
        $('.img_inner').slick('slickGoTo', index, false);
    });
    $('.img_inner').on('beforeChange',function(event, slick, currentSlide,nextSlide){
        $('.nav_img_box').each(function(){
            $(this).removeClass('current');
        });
        $('.nav_img_box[data-index="'+nextSlide+'"]').addClass('current');
    });

    // サムネイルにダミーdivを追加
    for(let i=0; i < 4; i++){
        $('.nav_img_inner').append('<div class="nav_img_box_dummy"></div>');
    }


});