@charset "utf-8";

@import "foundation/_setting.scss";
//==========================================================================
//special.scss
//==========================================================================
.wall {
    background-color: #f7f7f7;
    .mv {
        width: 100%;
        background-color: #d1d5d7;
        margin-bottom: 10px;
        @include smMax {
            margin-bottom: sm_vw(20);
        }
        &__image {
            position: relative;
            text-align: center;
            @include smMax {
                height: auto;
            }
            img {
                width: auto;
                max-width: 100%;
                @include smMax {
                    position: relative;
                    width: 100%;
                    right: 0;
                    transform: none;
                }
            }
        }
    }
    &__outer01 {
        padding-bottom: 110px;
        @include smMax {
            margin: 0 sm_vw(40);
            padding-bottom: sm_vw(120);
        }
    }
    &__outer02 {
        padding: 80px 0 110px;
        background-color: #fff;
        @include smMax {
            padding: sm_vw(100) sm_vw(40) sm_vw(150);
        }
    }
    &__inner01 {
        padding: 0;
        max-width: 1080px;
        @include smMax {
            padding: 0;
        }
    }
    &__box01 {
        @include smMin {
            width: 100%;
            padding: 0 20px;
            max-width: 1120px;
        }
    }

    .wall__outer01 + .wall__outer01 {
        padding: 80px 0 110px;
        @include smMax {
            padding: sm_vw(180) 0 sm_vw(180);
        }
    }
    .wall__outer02 + .wall__outer01 {
        padding: 80px 0 110px;
        @include smMax {
            padding: sm_vw(110) 0 sm_vw(110);
        }
    }
    

    .wall__box01 + .wall__box01 {
        margin-top: 60px;
        @include smMax {
            margin-top: sm_vw(80);
        }
    }
    .wall__box02 + .wall__box02 {
        margin-top: 60px;
        @include smMax {
            margin-top: sm_vw(80);
        }
    }
    .wall__box02 + .wall__box03 {
        @include smMax {
            margin-top: sm_vw(60);
        }
    }
    .wall__box03 + .wall__box03 {
        margin-top: 90px;
        @include smMax {
            margin-top: sm_vw(80);
        }
    }

    &__box02 {
        margin: 0 auto;
        padding: 60px 40px;
        width: calc(100% - 40px);
        max-width: 760px;
        border: 1px solid $colorBorder;
        display: flex;
        justify-content: center;
        align-items: center;
        @include smMax {
            max-width: 100%;
            width: 100%;
            padding: sm_vw(40) sm_vw(36);
        }
        ul {
            li {
                position: relative;
                padding-left: 44px;
                font-size: 18px;
                font-family: $font-serif;
                font-weight: 500;
                @include smMax {
                    padding-left: sm_vw(58);
                    font-size: sm_vw(30);
                }
                .is-red {
                    color: $colorRed04;
                }
                &::before {
                    content: "";
                    position: absolute;
                    bottom: calc(50% - 2px);
                    left: 0;
                    transform: translateY(50%);
                    width: 31px;
                    height: 27px;
                    background: transparent url("../images/ico_check01.png") 0 0 no-repeat;
                    background-size: 100% auto;
                    @include smMax {
                        width: sm_vw(43);
                        height: sm_vw(36);
                        transform: none;
                        bottom: auto;
                        top: 0.3em;
                    }
                }
                + li {
                    margin-top: 20px;
                    @include smMax {
                        margin-top: sm_vw(20);
                    }
                }
            }
        }
        > div {
            position: relative;
            padding-left: 44px;
            font-size: 18px;
            font-family: $font-serif;
            font-weight: 500;
            @include smMax {
                padding-left: sm_vw(58);
                font-size: sm_vw(30);
            }
            &::before {
                content: "";
                position: absolute;
                bottom: calc(50% - 2px);
                left: 0;
                transform: translateY(50%);
                width: 31px;
                height: 27px;
                background: transparent url("../images/ico_check01.png") 0 0 no-repeat;
                background-size: 100% auto;
                @include smMax {
                    width: sm_vw(43);
                    height: sm_vw(36);
                    transform: none;
                    bottom: auto;
                    top: 0.3em;
                }
            }
        }
    }
    &__box03 {
        @include smMax {
            position: relative;
        }
    }

    &__ttl01 {
        margin-bottom: 30px;
        @include smMax {
            margin-bottom: sm_vw(20);
        }
    }
    &__ttl02 {
        font-size: 26px;
        font-family: $font-serif;
        font-weight: 500;
        text-align: center;
        @include smMax {
            font-size: sm_vw(36);
        }
    }
    &__ttl03 {
        margin-top: 8px;
        font-size: 36px;
        font-weight: 500;
        font-family: $font-serif;
        @include smMax {
            margin-top: sm_vw(30);
            font-size: sm_vw(50);
        }
        a {
            @include hover {
                color: $colorBlue;
            }
        }
        .ico {
            position: relative;
            display: inline-block;
            padding-right: 35px;
            @include smMax {
                padding-right: sm_vw(56);
            }
            &::before {
                content: "";
                position: absolute;
                right: 0;
                bottom: calc(50% - 2px);
                transform: translateY(50%) rotate(180deg);
                width: 24px;
                height: 24px;
                border-radius: 12px;
                background: $colorBlue url("../images/ico_arrow01_w.svg") 50% 50% no-repeat;
                background-size: 7px 12px;
                @include smMax {
                    width: sm_vw(34);
                    height: sm_vw(34);
                    background-size: sm_vw(10) sm_vw(16);
                }
            }
        }
    }
    &__txt01 {
        margin-top: 15px;
        font-size: 18px;
        font-family: $font-serif;
        text-align: center;
        @include smMax {
            margin-top: sm_vw(20);
            font-size: sm_vw(30);
            text-align: left;
        }
    }

    &__list02 {
        li {
            position: relative;
            padding-left: 11px;
            font-size: 16px;
            font-weight: 500;
            font-family: $font-serif;
            color: #222;
            line-height: 1.8;
            @include smMax {
                padding-left: sm_vw(22);
                font-size: sm_vw(28);
            }
            &::before {
                content: "";
                position: absolute;
                bottom: calc(50% - 1px);
                left: 0;
                transform: translateY(50%);
                width: 8px;
                height: 8px;
                background-color: #222;
                @include smMax {
                    width: sm_vw(12);
                    height: sm_vw(12);
                }
            }
        }
    }

    &__image01 {
        margin-top: 20px;
        text-align: center;
        img {
            width: auto;
            max-width: 100%;
        }
    }
    &__image02 {
        margin: 60px auto 0;
        max-width: 960px;
        width: calc(100% - 40px);
        text-align: center;
        @include smMax {
            margin: 0;
            width: 480px;
        }
        img {
            width: auto;
            max-width: 100%;
        }
    }
    &__image03 {
        display: block;
        margin: 80px auto 0;
        width: calc(100% - 40px);
        max-width: 960px;
        border: 1px solid $colorBorder;
        @include smMax {
            margin-top: sm_vw(60);
            border: none;
            width: 100%;
        }
        img {
            width: auto;
            max-width: 100%;
        }
    }
    &__imageBox01 {
        display: flex;
        @include smMax {
            display: block;
        }
        .image01 {
            display: flex;
            justify-content: center;
            align-items: center;
            //width: 350px;
            width: calc(37.5% - 10px);
            margin-right: 10px;
            border: 1px solid $colorBorder;
            background-color: #fff;
            @include smMax {
                margin-right: 0;
                width: 100%;
                height: sm_vw(380);
            }
            img {
                max-width: 300px;
                @include smMax {
                    margin-right: 0;
                    width: sm_vw(330);
                    max-width: 100%;
                }
            }
        }
        .image02 {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            //width: 590px;
            width: calc(62.5% - 10px);
            margin-left: 10px;
            border: 1px solid $colorBorder;
            background-color: #fff;
            @include smMax {
                margin: sm_vw(40) 0 0 0;
                width: 100%;
                height: sm_vw(480);
            }
            img {
                max-width: 540px;
                @include smMax {
                    width: 100%;
                    max-width: 100%;
                }
            }
            .caption {
                position: absolute;
                top: calc(100% + 0.4em);
                width: 100%;
                display: block;
                text-align: right;
                font-size: 14px;
                font-weight: 500;
                font-family: $font-serif;
                color: #666;
                @include smMax {
                    top: calc(100% + 0.6em);
                    font-size: sm_vw(20);
                }
            }
        }
    }
    .wall__lineupBox01 + .wall__lineupBox01 {
        margin-top: 80px;
        @include smMax {
            margin-top: sm_vw(80);
        }
    }
    &__lineupBox01 {
        @include smMin {
            margin: 0 auto;
            width: calc(100% - 40px);
            max-width: 960px;
        }
        
    }
    &__video01 {
        position: relative;
        margin-top: 30px;
        width: 100%;
        padding-top: 56.25%;
        @include smMax {
            margin-top: sm_vw(40);
        }
        iframe {
            position: absolute;
            top: 0;
            right: 0;
            width: 100% !important;
            height: 100% !important;
        }
    }
    iframe {
        margin: 30px auto 0;
        width: calc(100% - 40px);
        max-width: 960px;
        height: 540px;
        display: block;
        @include smMax {
            margin-top: sm_vw(40);
            width: sm_vw(670);
            height: sm_vw(376);
        }
    }
    .scollItem {
        display: none;
        @include smMax {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                width: sm_vw(220);
            }
        }
    }
    .scrollBox {
        @include smMax {
            padding-bottom: sm_vw(40);
            width: 100%;
            border: 1px solid $colorBorder;
            .simplebar-scrollbar.simplebar-visible {
                top: 0;
                @include smMax {
                    height: sm_vw(16);
                }
            }
            .simplebar-scrollbar::before {
                left: 0;
                right: 0;
                background-color: $colorBlue;
                @include smMax {
                    border-radius: sm_vw(8);
                }
            }
            .simplebar-scrollbar.simplebar-visible::before {
                opacity: 1;
            }
            .simplebar-track.simplebar-horizontal {
                margin: sm_vw(20) sm_vw(20);
                background-color: #fff;
                @include smMax {
                    height: sm_vw(16);
                    border-radius: sm_vw(8);
                }
            }
            .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
                top: 0;
                left: 0;
                @include smMax {
                    height: sm_vw(16);
                }
            }
            .simplebar-track.simplebar-horizontal .simplebar-scrollbar::before {
                left: 0;
                right: 0;
                @include smMax {
                    height: sm_vw(16);
                }
            }
        }
    }
}