モーダル機能

```html
<div class="main-content">
    <img class="modal-open img-hover" 
           src="#" alt="#" />

    <div class="modal-container">
        <div class="modal-body">
            <div class="modal-close">
                ×
            </div>

            <div class="modal-content">
                <div class="modal-sp">
                    <div>
                        <img src="#" alt="#" 
                           class="modal-image" />

                            <a href="#" 
                             target="_blank"
                                rel="noopener noreferrer">
                            </a>
                        </p>
                    </div>

                    <div class="modal-content-img">
                        <div>
                            <a href="#">
                                <img src="#" alt="#" />
                                <div class="box" style="text-align: center;">
                                    <p style="font-weight: normal;">詳細</p>
                                </div>
                            </a>
                        </div>

                        <div class="img-hover">
                            <a href="#">
                                <img src="#" alt="#" />
                                <div class="box" style="text-align: center;">
                                    <p style="font-weight: normal;">もっとみる</p>
                                </div>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

```

```css
.main-container {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.main-content {
    width: calc(100% /3);
}

.img-hover:hover {
    opacity: 0.6;
    filter: brightness(110%);
    -webkit-transition: all .3s;
    transition: all .3s;
}

/*モーダルを開くボタン*/
.modal-open {
    cursor: pointer;
}

/*モーダル本体 + モーダル外側の背景*/
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    z-index: 101;
}

/*モーダル本体の擬似要素の指定*/
.modal-container:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

/*モーダル本体に「active」クラス付与した時*/
.modal-container.active {
    opacity: 1;
    visibility: visible;
}

/*モーダル枠*/
.modal-body {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

/*モーダルを閉じるボタン*/
.modal-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 5px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #929191;
    cursor: pointer;
}

/*モーダル内のコンテンツ*/
.modal-content {
    background: #fff;
    text-align: left;
    padding: 40px;
}

.modal-content-img {
    display: inline-grid;
    row-gap: 20px;
    width: 30%;
}

.modal-sp {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.modal-link-image {
    width: 30%;
    margin: 30px 0px 0px 0px;
}

.fhoto-text {
    magin-top: 10px;
    font-weight: bold;
}

.box {
    text-align: center;
    margin-top: 1em;
    border: solid 1px #000000;
}

.box p {
    margin: 0;
    padding: 0;
}

/*スマホ時の設定*/
@media screen and (max-width: 767px),
print {

    .main-container {
        gap: 10px;
        margin-bottom: 10px;
    }

    .modal-body {
        width: 90%;
    }

    .modal-content-text {
        margin: 0px;
    }

    .modal-content {
        margin: 0px;
        padding: 25px
    }

    .modal-close {
        font-size: 30px;
        width: 20px;
        height: 30px;
    }

    .modal-image {
        width: 100%;
    }

    .modal-link-image {
        width: 50%;
        margin: 20px 0px 15px 0px;
    }
}

```

```Javascript

$(function () {

    // 変数に要素を入れる
    var open = $('.modal-open'),
        close = $('.modal-close'),
        container = $('.modal-container');

    //開くボタンをクリックしたらモーダルを表示する
    open.on('click', function () {
        container.addClass('active');
        return false;
    });

    //閉じるボタンをクリックしたらモーダルを閉じる
    close.on('click', function () {
        container.removeClass('active');
    });

    //モーダルの外側をクリックしたらモーダルを閉じる
    $(document).on('click', function (e) {
        if (!$(e.target).closest('.modal-body').length) {
            container.removeClass('active');
        }
    });


```