/* Vendor */
@import "compass";

/* Site settings */
@import "settings";
// ブレイクポイント
/*$break-pc: 1000px;
$break-tb: 768px;
$break-sp: 540px;*/
$newbreak-pc: 999px;
$newbreak-tb: 768px;
$newbreak-sp: 540px;
//ラッパー
@mixin wrap($wrap-width) {
    box-sizing: border-box;
    padding: 0 20px;
    max-width: calc(#{$wrap-width} + 40px);
    margin: 0 auto;
    @media screen and (max-width:$break-sp) {
        padding: 0 10px;
    }
}

#main_slide-c.container {
    width: 100%;
    max-width: 1366px;
    @media screen and (max-width:$newbreak-pc) {
        padding: 0;
    }
}
#main_slider {
    height:auto !important;
    @media screen and (max-width:$newbreak-pc) {
        height: 350px;
    }
    @media screen and (max-width:$newbreak-sp) {
        height: 240px;
    }

    .sp-slide {
        img {
            height:100% !important;
            width:100%;
        }
        picture {
            display:block;
        }
    }
}
@media screen and (max-width: 540px) {
    #main_slider {
        height: auto;
    }
    #main_slider .sp-slides {
        height: 53vw !important;
    }
}

/*TOP共通*/
.top-ttl {
    font-size: 55px;
    line-height: 1;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: $base-color;
    text-align: center;
    @media screen and (max-width:$newbreak-tb) {
        font-size: 45px;
    }
    @media screen and (max-width:$newbreak-sp) {
        font-size: 35px;
    }
    &:after {
        content: "";
        position: relative;
        width: 80px;
        height: 1px;
        background: $base-color;
        display: block;
        margin: 25px auto 0;
        @media screen and (max-width:$newbreak-sp) {
            width: 40px;
            margin: 20px auto 0;
        }
    }
}

/*ヒーロー代替え*/
#main_hero {
    width:100%;
    max-width:1366px;
    margin:0 auto;
    padding:0;
    a {
        display:block;
    }
    img {
        display:block;
        width:100%;
        height:auto;
    }
    .image_pc {display:block;}
    .image_sp {display:none;}
    @media screen and (max-width:$newbreak-sp) {
        .image_pc {display:none;}
        .image_sp {display:block;}
    }
}

/*ヒーロー直下ロゴ*/
#logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    flex-wrap: wrap;
    @media screen and (max-width:$newbreak-sp) {
        flex-direction: column;
    }
    img {
        width: 100%;
        display: block;
    }
    a {
        display: block;
        &:hover {
            opacity: .7;
        }
    }
    .leadtxt {
        text-align: center;
        font-size: 14px;
        line-height: 1.6;
        @media screen and (max-width:$newbreak-pc) {
            width: 100%;
            font-size: 13px;
            margin-bottom: 10px;
        }
    }
    .logos-holder {
        display: flex;
    }
    .logos-holder1 {
        margin: 0 30px;
        @media screen and (max-width:$newbreak-pc) {
            margin: 0 20px 0 0;
        }
        @media screen and (max-width:$newbreak-sp) {
            margin: 0px auto 15px;
        }
        div:nth-of-type(1) {
            width: 82px;
            margin-right: 15px;
        }
        div:nth-of-type(2) {
            width: 55px;
        }
    }
    .logos-holder2 {
        p {
            font-size: 12px;
            margin-right: 5px;
        }
        div:nth-of-type(1) {
            width: 113px;
            margin-right: 15px;
        }
        div:nth-of-type(2) {
            width: 129px;
        }
    }
}
/*ニュース・ごみの数*/
#news-status {
    margin-bottom: 30px;
    .containerwrap {
        @include wrap(1366px);
        @media screen and (max-width:$newbreak-pc) {
            padding: 0 !important;
        }
        .containerbox {
            border: 1px solid #ddd;
            display: flex;
            @media screen and (max-width:$newbreak-pc) {
                flex-direction: column;
                border: none;
            }
        }
    }
    #news-box {
        flex: 1;
        display: flex;
        @media screen and (max-width:$newbreak-pc) {
            flex-direction: column;
            box-sizing: border-box;
        }
        div {
            &.slide-arrow {
                position: absolute;
                //top: 50%;
                z-index: 3;
                cursor: pointer;
            }
            &.prev-arrow {
                //margin-top: -15px;
                top: 20px;
                right: 20px;
                width: 0;
                height: 0;
                @include transition(all 0.3s);
                &:before {
                    content: "";
                    width: 7px;
                    height: 7px;
                    border: 0px;
                    border-top: solid 2px #707070;
                    border-left: solid 2px #707070;
                    transform: rotate(45deg);
                    position: absolute;
                    top: 50%;
                    left: 0;
                }
            }
            &.next-arrow {
                bottom: 25px;
                right: 20px;
                width: 0;
                height: 0;
                @include transition(all 0.3s);
                &:before {
                    content: "";
                    width: 7px;
                    height: 7px;
                    border: 0px;
                    border-top: solid 2px #707070;
                    border-right: solid 2px #707070;
                    transform: rotate(135deg);
                    position: absolute;
                    top: 50%;
                    left: 0;
                }
            }
        }
        .nw-ttl {
            width: 180px;
            color: #333;
            font-family: 'Open Sans', sans-serif;
            font-weight: 700;
            font-size: 18px;
            background: #F8F8F8;
            display: flex;
            align-items: center;
            justify-content: center;
            @media screen and (max-width:$newbreak-pc) {
                box-sizing: border-box;
                width: 100%;
                font-size: 14px;
                padding: 5px 0 5px 20px;
                justify-content: flex-start;
                border-bottom: 1px solid #ddd;
            }
            @media screen and (max-width:$newbreak-sp) {
                padding: 3px 0 3px 10px;
            }
        }
        .nw-holder {
            flex: 1;
            ul {
                overflow: hidden;
                li {
                    height: 83px;
                    padding: 0 30px 0 20px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    @media screen and (max-width:$newbreak-sp) {
                        padding: 0 30px 0 10px;
                    }
                    p {
                        &.dates {
                            font-size: 14px;
                            font-weight: 700;
                            line-height: 1;
                            font-family: 'Open Sans', sans-serif;
                            display: block;
                            margin-bottom: 4px;
                            @media screen and (max-width:$newbreak-pc) {
                                font-size: 12px;
                            }
                        }
                        &.news-ttl {
                            font-size: 14px;
                            line-height: 1.5;
                            @media screen and (max-width:$newbreak-sp) {
                                font-size: 13px;
                                line-height: 1.4;
                            }
                        }
                    }
                    a {
                        color: $base-color;
                    }
                }
            }
        }
    }
    #status-box {
        width: 330px;
        padding: 8px 20px;
        background: #F8F8F8;
        display: flex;
        align-items: center;
        @media screen and (max-width:$newbreak-pc) {
            width: 100%;
            padding: 20px 0 15px;
            justify-content: center;
        }
        @media screen and (max-width:350px) {
            padding-left: 20px;
        }
        img {display:block; width:100%;}
        .s-holder {
            width: 330px;
            display: flex;
            @media screen and (max-width:$newbreak-pc) {
                width: 100%;
                max-width: 330px;
            }
            .sh-ttl {
                font-size: 12px;
                font-weight: 700;
                margin-bottom: 5px;
                line-height: 1;
            }
            .holder1 {
                width: 190px;
                @media screen and (max-width:350px) {
                    width: 170px;
                }
            }
            .holder2 {flex: 1;}
            .holder1 {
                .graphbox {
                    display: flex;
                    align-items: center;
                    .graph {width: 47px; margin-right: 10px;}
                    ul {
                        li {
                            display: flex;
                            align-items: center;
                            &:nth-of-type(1) {
                                margin-bottom: 7px;
                            }
                            .garbage-sorting {
                                font-size: 10px;
                                line-height: 1;
                                &:before {
                                    content: "";
                                    display: inline-block;
                                    background: #3286D2;
                                    width: 10px;
                                    height: 10px;
                                    border-radius: 50%;
                                    margin-right: 3px;
                                    position: relative;
                                    top: 2px;
                                }
                            }
                            .non-burnable {
                                &:before {
                                    background: #084c8d;
                                }
                            }
                            .volume {
                                margin-left: 10px;
                                line-height: 1;
                                span:nth-of-type(1) {
                                    font-size: 14px;
                                    font-weight: 700;
                                }
                                span:nth-of-type(2) {
                                    font-size: 10px;
                                }
                            }
                        }
                    }
                    
                }
            }
            .holder2 {
                .sh-ttl {
                    margin-bottom: 10px;
                }
                .volume {
                    line-height: 1;
                    span:nth-of-type(1) {
                        font-size: 14px;
                        font-weight: 700;
                    }
                    span:nth-of-type(2) {
                        font-size: 10px;
                    }
                }
                .latest-dates {
                    color: #777;
                    font-size: 10px;
                    margin-top: 11px;
                    line-height: 1;
                }
            }
            .vline {
                width: 1px;
                height: auto;
                background: #ddd;
                margin-right: 20px;
                @media screen and (max-width:350px) {
                    margin-right: 10px;
                }
            }
        }
    }
}
/*重要なお知らせ*/
#notices {
    .box, .box2 {
        max-width: 780px;
        margin: 0 auto;
        display: flex;
        @media screen and (max-width:$newbreak-sp) {
            display: block;
            position: relative;
        }
    }
    .box2 {
        margin-bottom: 10px;
        @media screen and (max-width:$newbreak-sp) {
            .icon {
                display: none;
            }
        }
    }
    .icon {
        background: #d50d18;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        min-height: 40px;
        line-height: 1;
        @media screen and (max-width:$newbreak-sp) {
            width: 28px;
            min-height: 28px;
            height: 28px;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    .holder2 {
        padding: 10px 10px 10px 15px;
        border: 1px solid #d50d18;
        min-height: 40px;
        box-sizing: border-box;
        flex: 1;
        @media screen and (max-width:$newbreak-sp) {
            padding: 10px;
            flex: auto;
            display: block;
        }
        p {
            /*color: #d50d18;
            font-size: 12px;
            line-height: 17px;
            display: flex;
            @media screen and (max-width:$newbreak-sp) {
                display: block;
                font-weight: 700;
            }*/
            color: #d50d18;
            display: block;
            font-weight: bold;
            font-size: 14px;
            line-height: 22px;
        }
        a {
            color:#d50d18;
            text-decoration: underline;
            display:inline-block;
            margin-top:2px;
        }
    }
    .holder {
        padding: 10px 10px 10px 15px;
        border: 1px solid #d50d18;
        min-height: 40px;
        box-sizing: border-box;
        flex: 1;
        @media screen and (max-width:$newbreak-sp) {
            padding: 5px 0 15px 10px;
            flex: auto;
            display: block;
        }
        a {
            color: #d50d18;
            font-size: 12px;
            line-height: 17px;
            display: flex;
            @media screen and (max-width:$newbreak-sp) {
                display: block;
                font-weight: 700;
            }
            p {
                &:nth-of-type(1) {
                    padding-right: 15px;
                    margin-right: 15px;
                    border-right: 1px solid #d50d18;
                    @media screen and (max-width:$newbreak-sp) {
                        border: none;
                        padding: 0 0 4px 25px;
                        margin: 0;
                        border-bottom: 1px solid #d50d18;
                    }
                }
                &:nth-of-type(2) {
                    @media screen and (max-width:$newbreak-sp) {
                        padding: 10px 10px 0 0;
                    }
                    span {
                        width: 15px;
                        display: inline-block;
                        position: relative;
                        top: -2px;
                        margin-left: 2px;
                        @media screen and (max-width:$newbreak-sp) {
                            display: block;
                            top: 2px;
                            margin-left: auto;
                        }
                        img {
                            display: block;
                        }
                    }
                }
            }
        }
    }
}
/*横並びバナー*/
#top-bnrbox {
    @include wrap(1366px);
    margin-top: 40px;
    margin-bottom: 40px;
    @media screen and (max-width:$newbreak-sp) {
        margin-top: 30px;
        margin-bottom: 20px;
    }
    picture {
        display:block;
    }
    img {
        height:auto;
    }
    ul {
        display: flex;
        justify-content: space-between;
        @media screen and (max-width:$newbreak-sp) {
            flex-direction: column;
        }
        li {
            @media screen and (max-width:$newbreak-sp) {
                &:not(:last-child) {
                    margin-bottom: 20px;
                }
            }
            img {
                display: block;
                width: 100%;
            }
        }
        &.type1bnr {
            li {
                width: 100%;
                max-width:673px;
                margin:0 auto;

                img:nth-of-type(1) {
                    display: block !important;
                }
                img:nth-of-type(2) {
                    display: none;
                }
                @media screen and (max-width:$newbreak-sp) {
                    img:nth-of-type(1) {
                        display: none;
                    }
                    img:nth-of-type(2) {
                        display: block;
                    }
                }
            }
        }
        &.type2bnr { //20210428修正
            justify-content: center;
            li {
                width: 100%;
                max-width: 440px;
                &:nth-of-type(1) {
                    margin-right: 2%;
                    @media screen and (max-width:$newbreak-sp) {
                        margin-right: 0;
                    }
                }
                @media screen and (max-width:$newbreak-sp) {
                    width: 100%;
                    max-width: 100%;
                }
            }
        }
        &.type3bnr {
            li {
                width: 32.5%;
                @media screen and (max-width:$newbreak-sp) {
                    width: 100%;
                }
            }
        }
    }
}
/**/
#feature {
    margin-top: 80px !important;
    @media screen and (max-width:$newbreak-pc) {
        margin-top: 60px !important;
    }
    @media screen and (max-width:$newbreak-sp) {
        margin-top: 40px !important;
    }
    .container {
        width: 100%;
        @include wrap(1366px);
        @media screen and (max-width:$newbreak-pc) {
            padding: 0;
        }
    }
    h2 {
        font-size: 40px;
        font-weight: 700;
        color: $base-color;
        text-align: center;
        line-height: 1.3;
        br {display:none;}
        @media screen and (max-width:$newbreak-pc) {
            font-size: 29px;
            padding: 0 10px;
        }
        @media screen and (max-width:$newbreak-sp) {
            font-size: 21px;
            line-height: 1.5;
            br {display:block;}
        }
    }
    .lead {
        font-size: 18px;
        text-align: center;
        margin: 40px 0 30px;
        @media screen and (max-width:$newbreak-pc) {
            margin: 30px 0;
        }
        @media screen and (max-width:$newbreak-sp) {
            font-size: 16px;
            margin: 20px 0 30px;
            padding: 0 10px;
            br {display:none;}
        }
    }
    .box {
        background-image:url(../img/toppage2021/bg.webp), linear-gradient(#005194, #005194);
        background-repeat: no-repeat, no-repeat;
        background-size: cover, cover;
        background-position:center, center;
        padding: 60px 0;
        @media screen and (max-width:$newbreak-tb) {
            padding: 40px 0;
        }
        .container {
            display: flex;
            justify-content: center;
            width: 100%;
            @media screen and (max-width:$newbreak-pc) {
                flex-direction: column;
                align-items: center;
            }
        }
        section {
            width: calc((100% - 1px) / 2);
            @media screen and (max-width:$newbreak-pc) {
                width: 100%;
            }
            h3 {
                text-align: center;
                color: #fff;
                span {
                    &:nth-of-type(1) {
                        font-size: 18px;
                        line-height: 1;
                        font-weight: 700;
                        @media screen and (max-width:$newbreak-pc) {
                            font-size: 17px;
                        }
                        @media screen and (max-width:$newbreak-sp) {
                            font-size: 14px;
                        }
                    }
                    &:nth-of-type(2) {
                        display: block;
                        font-size: 36px;
                        line-height: 1;
                        font-weight: 700;
                        margin: 20px 0 30px;
                        @media screen and (max-width:$newbreak-pc) {
                            font-size: 33px;
                        }
                        @media screen and (max-width:$newbreak-tb) {
                            margin: 15px 0 25px;
                        }
                        @media screen and (max-width:$newbreak-sp) {
                            font-size: 22px;
                            margin: 5px 0 20px;
                        }
                    }
                }
            }
            .sub-lead {
                text-align: center;
                font-size: 14px;
                font-weight: 700;
                color: #fff;
                @media screen and (max-width:$newbreak-sp) {
                    line-height: 1.5;
                }
            }
            .btns {
                display: flex;
                justify-content: center;
                margin: 40px 0;
                @media screen and (max-width:$newbreak-tb) {
                    margin: 30px 0 35px; 
                }
                @media screen and (max-width:$newbreak-sp) {
                    margin: 30px 0; 
                }
                p {
                    font-size: 22px;
                    font-weight: 700;
                    margin: 0 10px;
                    @media screen and (max-width:$newbreak-pc) {
                        font-size: 21px;
                    }
                    @media screen and (max-width:$newbreak-sp) {
                        font-size: 19px;
                        margin: 0 5px;
                    }
                    color: #fff;
                    a {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 220px;
                        height: 55px;
                        border-radius: 8px;
                        box-shadow: 0 3px 6px rgba(0,0,0,.2);
                        background: #00A040;
                        color: #fff;
                        @media screen and (max-width:$newbreak-pc) {
                            width: 190px;
                        }
                        @media screen and (max-width:$newbreak-sp) {
                            width: 140px;
                            height: 50px;
                        }
                        span {
                            @media screen and (max-width:$newbreak-sp) {
                                display:none;
                            }
                        }
                    }
                }
            }
            .btn {
                display: flex;
                justify-content: center;
                margin: 40px 0;
                @media screen and (max-width:$newbreak-sp) {
                    margin: 35px 0;
                }
                p {
                    font-size: 21px;
                    font-weight: 700;
                    color: #fff;
                    position: relative;
                    @media screen and (max-width:$newbreak-sp) {
                        font-size: 19px;
                    }
                    &:before {
                        position: absolute;
                        content: "";
                        display: block;
                        width: 62px;
                        height: 47px;
                        background-image: url(../img/toppage2021/ill-freecomment.svg);
                        background-size: cover;
                        vertical-align: middle;
                        top: -47px;
                        left: -67px;
                        @media screen and (max-width:$newbreak-sp) {
                            width: 46px;
                            height: 34px;
                            top: -22px;
                            left: -55px;
                        }
                    }
                    a {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 310px;
                        height: 55px;
                        border-radius: 8px;
                        box-shadow: 0 3px 6px rgba(0,0,0,.2);
                        background: #188FDE;
                        color: #fff;
                        @media screen and (max-width:$newbreak-pc) {
                            width: 290px;
                        }
                        @media screen and (max-width:$newbreak-sp) {
                            width: 220px;
                            height: 50px;
                        }
                        span {
                            @media screen and (max-width:$newbreak-sp) {
                                display: none;
                            }
                        }
                    }
                }
            }
            .sub-txt {
                font-size: 14px;
                font-weight: 500;
                text-align: center;
                color: #fff;
                @media screen and (max-width:$newbreak-sp) {
                    font-size: 13px;
                    font-weight: 700;
                }
                span.opc {
                    @media screen and (max-width:$newbreak-sp) {
                        display: none;
                    }
                }
                span.osp {
                    display: none;
                    @media screen and (max-width:$newbreak-sp) {
                        display: block;
                    }
                }
            }
            .logos {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 30px;
                @media screen and (max-width:$newbreak-sp) {
                    margin-top: 10px;
                }
                p {
                    a {
                        display: block;
                    }
                    img {
                        display: block;
                        width: 100%;
                    }
                    &:nth-of-type(1) {width:146px;}
                    &:nth-of-type(2) {width:98px; margin:0 30px;}
                    &:nth-of-type(3) {width:62px;}
                    @media screen and (max-width:$newbreak-sp) {
                        &:nth-of-type(1) {width:99px;}
                        &:nth-of-type(2) {width:67px; margin:0 20px;}
                        &:nth-of-type(3) {width:42px;}
                    }
                }
            }
            .images {
                width: 240px;
                margin: 15px auto 0;
                img {
                    width: 100%;
                    display: block;
                }
            }
        }
        .v-line {
            width: 1px;
            height: auto;
            background: rgba(255,255,255,.7);
            display: block;
            @media screen and (max-width:$newbreak-pc) {
                width: 100%;
                height: 1px;
                margin: 50px auto;
            }
            @media screen and (max-width:$newbreak-sp) {
                margin: 40px auto 30px;
            }
        }
    }
}
/*BLUE SHIPについて*/
#toabout {
    border-top: 1px solid #fff;
    margin-bottom: 120px !important;
    @media screen and (max-width:$newbreak-tb) {
        margin-bottom: 100px !important;
    }
    @media screen and (max-width:$newbreak-sp) {
        margin-bottom: 50px !important;
    }
    &.container {
        width: 100%;
        @include wrap(1366px);
        @media screen and (max-width:$newbreak-pc) {
            padding: 0;
        }
    }
    a {
        background: $base-color;
        padding: 30px 10px;
        display: block;
        position: relative;
        @media screen and (max-width:$newbreak-sp) {
            padding: 25px 0;
        }
        p {
            color: #fff;
            text-align: center;
            span {
                &:nth-of-type(1) {
                    font-size: 15px;
                    display: block;
                    margin-bottom: 10px;
                    @media screen and (max-width:$newbreak-sp) {
                        font-size: 12px;
                        margin-bottom: 0;
                    }
                }
                &:nth-of-type(2) {
                    font-size: 32px;
                    font-weight: 700;
                    @media screen and (max-width:$newbreak-sp) {
                        font-size: 18px;
                    }
                }
            }
        }
        .arrow-right-white {
            width: 42px;
            position: absolute;
            top: 52px;
            right: 40px;
            @include transition(all 0.3s);
            @media screen and (max-width:$newbreak-sp) {
                width: 26px;
                top: 45px;
                right: 20px;
            }
            img {
                width: 100%;
                display: block;
            }
        }
        &:hover {
            .arrow-right-white {
                transform: translateX(7px);
            }
        }
    }
}

/*CONTENTS*/
#contentsbox {
    margin-bottom: 140px !important;
    @media screen and (max-width:$newbreak-tb) {
        margin-bottom: 100px !important;
    }
    @media screen and (max-width:$newbreak-sp) {
        margin-bottom: 70px !important;
    }
    &.container {
        width: 100%;
        @include wrap(1286px);
        @media screen and (max-width:$newbreak-pc) {
            padding: 0;
        }
    }
    .top-ttl {
        margin-bottom: 50px;
        @media screen and (max-width:$newbreak-sp) {
            margin-bottom: 30px;
        }
    }
    ul#ctlist-pc {
        display: flex;
        @media screen and (max-width:$newbreak-pc) {
            display: none;
        }
        li {
            width: calc(100% / 3);
            h3 {
                //font-size: 22px;
                font-weight: 700;
                //line-height: 1.5;
                font-size:24px;
                line-height:1.4;
                margin-bottom:45px;
                color: $base-color;
                text-align: center;
                @media screen and (max-width:1180px) {
                    font-size: 19px;
                    margin-bottom:30px;
                }
                @media screen and (max-width:$newbreak-pc) {
                    font-size: 18px;
                }
                span:nth-of-type(2) {
                    display:block;
                    font-size:15px;
                    padding:8px 0 5px;
                    @media screen and (max-width:1180px) {
                        font-size:14px;
                        padding:5px 0 2px;
                    }
                }
            }
            h4 {
                font-size: 14px;
                font-weight: 400;
                text-align: center;
                margin: 20px 0;
            }
            a {
                @include transition(all 0.3s);
                display: block;
                position: relative;
                &:hover {
                    .imageholder .image {
                        &:after {
                            background: linear-gradient(360deg, rgba(0,81,148,0.8) 0%, rgba(0,0,0,0.2) 71%, rgba(0,0,0,0) 100%);
                        }
                    }
                    .arrow-right-bk {
                        transform: translateX(7px);
                    }
                }
            }
            .imageholder {
                position: relative;
                width: 100%;
                height: auto;
                overflow: hidden;
                display: block;
                @include transition(all 0.3s);
                .image {
                    position: relative;
                    @include scale(1);
                    &:before {
                        position: relative;
                        content: "";
                        display: block;
                        padding-top: 109%;
                    }
                    &:after {
                        @include transition(all 0.3s);
                        display: block;
                        content: "";
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        position: absolute;
                        //background:linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 100%);
                        transform: translateZ(10px);
                        background : linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(35,24,21,1) 85%, rgba(35,24,21,1) 99.47%);
                        opacity:0.6;
                    }
                    img {
                        height: auto;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        display: block;
                        width: 100%;
                    }
                    &.nonefilter:after {
                        background:none;
                    }
                }
                .blog-image {
                    img {
                        object-fit: cover;
                        height: 100%;
                    }
                }
            }
            .arrow-right-bk {
                margin-top: 25px;
                text-align: center;
                @include transition(all 0.3s);
                span:nth-of-type(1) {
                    font-size: 16px;
                    font-weight: 500;
                    color: $font-color;
                }
                span:nth-of-type(2) {
                    display: block;
                    width: 29px;
                    margin: 3px auto 0;
                    img {
                        width: 100%;
                        display: block;
                    }
                }
                a {
                    display: inline-block;
                    &:hover {
                        transform: translateX(7px);
                    }
                }
            }
            .txtbox {
                position: absolute;
                bottom: 10px;
                left: 20px;
                transform: translateZ(11px);
                display: block;
                .updates {
                    width: 62px;
                    height: 18px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #000;
                    font-size: 11px;
                    line-height: 1;
                    background: #fff;
                }
                .vol-name {
                    display: flex;
                    align-items: center;
                    .vol {
                        color: #fff;
                        line-height: 1;
                        span:nth-of-type(1) {
                            font-size: 47px;
                            font-weight: 400;
                            @media screen and (max-width:1180px) {
                                font-size: 36px;
                            }
                        }
                        span:nth-of-type(2) {
                            font-family: 'Roboto Condensed', sans-serif;
                            font-size: 100px;
                            font-weight: 700;
                            letter-spacing: -2px;
                            @media screen and (max-width:1180px) {
                                font-size: 80px;
                            }
                        }
                    }
                    .article-ttl {
                        margin: -6px 0 0 10px;
                        .at-ttl {
                            font-size: 18px;
                            font-weight: 700;
                            color: #fff;
                        }
                        .name {
                            font-size: 14px;
                            color: #fff;
                        }
                    }
                    &.mugen {
                        align-items: flex-end;
                        .article-ttl {
                            margin: 0 0 12px 10px;
                            br {display: none;}
                            @media screen and (max-width:1180px) {
                                margin: 0 0 10px 10px;
                                br {display: block;}
                            }
                        }
                    }
                }
                //ブログ用
                &.blogbox {
                    bottom: 23px;
                    .blog-ttl {
                        .b-dates {
                            font-size: 14px;
                            font-weight: 400;
                            color: #fff;
                        }
                        .b-ttl {
                            font-size: 18px;
                            font-weight: 700;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
    ul#ctlist-sp {
        display: none;
        @media screen and (max-width:$newbreak-pc) {
            display: block;
        }
        /*Slick設定*/
        .slick-slide {
            margin: 0 35px;
            @media screen and (max-width:690px) {
                margin: 0 25px;
            }
            @media screen and (max-width:$newbreak-sp) {
                margin: 0 10px;
            }
        }
        div { //ナビゲーションアロー
            &.slide-arrow {
                position: absolute;
                top: 50%;
                z-index: 3;
                cursor: pointer;
            }
            &.prev-arrow {
                left: 19.5%;
                width: 0;
                height: 0;
                @include transition(all 0.3s);
                @media screen and (max-width:690px) {
                    left: 9%;
                }
                @media screen and (max-width:$newbreak-sp) {
                    left: 14%;
                }
                @media screen and (max-width:350px) {
                    left: 9%;
                }
                &:before {
                    content: "";
                    width: 22px;
                    height: 22px;
                    border: 0px;
                    border-top: solid 1px #707070;
                    border-left: solid 1px #707070;
                    transform: rotate(315deg);
                    position: absolute;
                    top: 50%;
                    left: 0;
                    @media screen and (max-width:$newbreak-sp) {
                        width: 14px;
                        height: 14px;
                    }
                }
            }
            &.next-arrow {
                right: 22%;
                width: 0;
                height: 0;
                @include transition(all 0.3s);
                @media screen and (max-width:690px) {
                    right: 12%;
                }
                @media screen and (max-width:$newbreak-sp) {
                    right: 17.5%;
                }
                @media screen and (max-width:350px) {
                    right: 13.5%;
                }
                &:before {
                    content: "";
                    width: 22px;
                    height: 22px;
                    border: 0px;
                    border-top: solid 1px #707070;
                    border-right: solid 1px #707070;
                    transform: rotate(45deg);
                    position: absolute;
                    top: 50%;
                    left: 0;
                    @media screen and (max-width:$newbreak-sp) {
                        width: 14px;
                        height: 14px;
                    }
                }
            }
        }
        li {
            h3 {
                font-size: 19px;
                font-weight: 700;
                line-height: 1.5;
                color: $base-color;
                text-align: center;
                margin-bottom:20px;
                @media screen and (max-width:$newbreak-pc) {
                    font-size: 18px;
                }
                @media screen and (max-width:690px) {
                    font-size: 16px;
                }
                @media screen and (max-width:$newbreak-sp) {
                    font-size: 15px;
                }
                @media screen and (max-width:400px) {
                    font-size: 14px;
                }
                @media screen and (max-width:370px) {
                    font-size: 13px;
                    letter-spacing: -1px;
                }
                span:nth-of-type(2) {
                    display:block;
                    font-size:13px;
                    padding:6px 0 2px;
                    @media screen and (max-width:690px) {
                        padding:3px 0 2px;
                    }
                    @media screen and (max-width:540px) {
                        font-size:11px;
                        padding:4px 0 2px;
                    }
                    @media screen and (max-width:370px) {
                        font-size:10px;
                        padding:3px 0 2px;
                    }
                }
            }
            h4 {
                font-size: 14px;
                font-weight: 400;
                text-align: center;
                margin: 20px 0;
                @media screen and (max-width:690px) {
                    font-size: 13px;
                }
                @media screen and (max-width:400px) {
                    margin: 10px 0 15px;
                }
            }
            a {
                display: block;
                position: relative;
            }
            .imageholder {
                position: relative;
                width: 100%;
                height: auto;
                overflow: hidden;
                display: block;
                @include transition(all 0.3s);
                .image {
                    position: relative;
                    @include scale(1);
                    &:before {
                        position: relative;
                        content: "";
                        display: block;
                        padding-top: 109%;
                    }
                    &:after {
                        @include transition(all 0.3s);
                        display: block;
                        content: "";
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        position: absolute;
                        //background:linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%);
                        transform: translateZ(10px);
                        background : linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(35,24,21,1) 85%, rgba(35,24,21,1) 99.47%);
                        opacity:0.6;
                    }
                    img {
                        height: auto;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        display: block;
                        width: 100%;
                    }
                    &.nonefilter:after {
                        background:none;
                    }
                }
                .blog-image {
                    img {
                        object-fit: cover;
                        height: 100%;
                    }
                }
            }
            .arrow-right-bk {
                margin-top: 25px;
                text-align: center;
                @include transition(all 0.3s);
                span:nth-of-type(1) {
                    font-size: 16px;
                    font-weight: 500;
                    color: $font-color;
                }
                span:nth-of-type(2) {
                    display: block;
                    width: 29px;
                    margin: 3px auto 0;
                    img {
                        width: 100%;
                        display: block;
                    }
                }
            }
            .txtbox {
                position: absolute;
                bottom: 5px;
                left: 20px;
                transform: translateZ(11px);
                display: block;
                @media screen and (max-width:$newbreak-sp) {
                    left: 10px;
                }
                .updates {
                    width: 62px;
                    height: 18px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #000;
                    font-size: 11px;
                    line-height: 1;
                    background: #fff;
                }
                .vol-name {
                    display: flex;
                    align-items: center;
                    .vol {
                        color: #fff;
                        line-height: 1;
                        span:nth-of-type(1) {
                            font-size: 36px;
                            font-weight: 400;
                            @media screen and (max-width:$newbreak-sp) {
                                font-size: 20px;
                            }
                        }
                        span:nth-of-type(2) {
                            font-family: 'Roboto Condensed', sans-serif;
                            font-size: 80px;
                            font-weight: 700;
                            letter-spacing: -2px;
                            @media screen and (max-width:$newbreak-sp) {
                                font-size: 60px;
                            }
                        }
                    }
                    .article-ttl {
                        margin: -6px 0 0 10px;
                        .at-ttl {
                            font-size: 18px;
                            font-weight: 700;
                            color: #fff;
                            @media screen and (max-width:$newbreak-sp) {
                                font-size: 14px;
                                line-height: 1.4;
                            }
                        }
                        .name {
                            font-size: 14px;
                            color: #fff;
                            @media screen and (max-width:$newbreak-sp) {
                                font-size: 12px;
                                font-weight: 700;
                            }
                        }
                    }
                    &.mugen {
                        align-items: flex-end;
                        .article-ttl {
                            margin: 0 0 10px 10px;
                        }
                    }
                }
                //ブログ用
                &.blogbox {
                    bottom: 15px;
                    .blog-ttl {
                        .b-dates {
                            font-size: 14px;
                            font-weight: 400;
                            color: #fff;
                            @media screen and (max-width:$newbreak-sp) {
                                font-size: 12px;
                            }
                        }
                        .b-ttl {
                            font-size: 18px;
                            font-weight: 700;
                            color: #fff;
                            @media screen and (max-width:$newbreak-sp) {
                                font-size: 14px;
                                line-height: 1.4;
                            }
                        }
                    }
                }
            }
        }
    }
    .toallblog {
        margin-top: 55px;
        @media screen and (max-width:$newbreak-pc) {
            padding: 0 20px;
        }
        @media screen and (max-width:$newbreak-sp) {
            padding: 0 10px;
            margin-top: 35px;
        }
        a {
            display: block;
            @media screen and (max-width:$newbreak-tb) {
                border: 1px solid #707070;
                padding: 10px;
            }
            p {
                font-size: 16px;
                font-weight: 700;
                color: $font-color;
                text-align: right;
                position: relative;
                @media screen and (max-width:1180px) {
                    font-size: 15px;
                }
                span {
                    width: 29px;
                    display: inline-block;
                    position: relative;
                    top: -4px;
                    margin-left: 10px;
                    @media screen and (max-width:$newbreak-tb) {
                        width: 25px;
                        position: absolute;
                        right: 10px;
                        top: 17px;
                    }
                    @media screen and (max-width:$newbreak-sp) {
                        right: 0;
                    }
                    img {
                        width: 100%;
                        display: block;
                    } 
                }
                br {display: none;}
                @media screen and (max-width:$newbreak-tb) {
                    font-size: 14px;
                    font-weight: 400;
                    text-align: center;
                    br {display: block;}
                }
            }
        }
    }
}

/*PICK UP*/
#pickupbox {
    background: #F7F8F9;
    margin-bottom: 100px;
    @media screen and (max-width:$newbreak-tb) {
        margin-bottom: 80px;
    }
    @media screen and (max-width:$newbreak-sp) {
        margin-bottom: 30px;
    }
    .wrap {
        padding-bottom: 60px;
        @media screen and (max-width:$newbreak-sp) {
            padding-bottom: 40px;
        }
        .container {
            width: 100%;
            @include wrap(1286px);
        }
        .top-ttl {
            position: relative;
            top: -20px;
            margin-bottom: 50px;
            @media screen and (max-width:$newbreak-sp) {
                top: -13px;
                margin-bottom: 20px;
            }
        }
        .pu-box {
            margin-bottom: 80px;
            display: flex;
            padding-left: 50px;
            @media screen and (max-width:$newbreak-pc) {
                padding-left: 0;
            }
            @media screen and (max-width:$newbreak-sp) {
                flex-direction: column;
                margin-bottom: 40px;
            }
            &:last-child {
                margin-bottom: 0;
            }
            .pu-ttl {
                width: 190px;
                @media screen and (max-width:$newbreak-pc) {
                    width: 160px; 
                }
                @media screen and (max-width:$newbreak-sp) {
                    width: 100%;
                }
                h3 {
                    span:nth-of-type(1) {
                        font-size: 14px;
                        font-weight: 700;
                        display: block;
                        margin-bottom: 10px;
                        @media screen and (max-width:$newbreak-sp) {
                            margin-bottom: 5px;
                        }
                    }
                    span:nth-of-type(2) {
                        font-size: 30px;
                        font-weight: 700;
                        font-family: 'Roboto', sans-serif;
                        @media screen and (max-width:$newbreak-sp) {
                            font-size: 23px;
                        }
                    }
                    @media screen and (max-width:$newbreak-sp) {
                        text-align: center;
                    }
                }
                .arrow-right-bk {
                    margin-top: 60px;
                    @media screen and (max-width:$newbreak-sp) {
                        display: none;
                    }
                    a {
                        @include transition(all 0.3s);
                        display: block;
                        span:nth-of-type(1) {
                            font-size: 16px;
                            font-weight: 500;
                            color: $font-color;
                        }
                        span:nth-of-type(2) {
                            display: inline-block;
                            width: 29px;
                            margin: 0 0 0 8px;
                            position: relative;
                            top: -4px;
                            img {
                                width: 100%;
                                display: block;
                            }
                        }
                        &:hover {
                            transform: translateX(7px);
                        }
                    }
                }
            }
            ul {
                flex: 1;
                display: flex;
                justify-content: space-between;
                @media screen and (max-width:$newbreak-sp) {
                    margin-top: 20px;
                }
                li {
                    width: 32%;
                    @media screen and (max-width:$newbreak-pc) {
                        width: 48%;
                        &:nth-of-type(3) {
                            display: none;
                        }
                    }
                    @media screen and (max-width:$newbreak-sp) {
                        width: 49%;
                    }
                    a {
                        .imageholder {
                            position: relative;
                            width: 100%;
                            height: auto;
                            overflow: hidden;
                            .image {
                                position: relative;
                                @include scale(1);
                                &:before {
                                    position: relative;
                                    content: "";
                                    display: block;
                                    padding-top: 58%;
                                }
                                &:after {
                                    @include transition(all 0.3s);
                                    display: block;
                                    content: "";
                                    width: 100%;
                                    height: 100%;
                                    top: 0;
                                    left: 0;
                                    position: absolute;
                                    background: rgba(0,81,148,0);
                                    transform: translateZ(10px);
                                }
                                img {
                                    height: auto;
                                    position: absolute;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    display: block;
                                    width: 100%;
                                }
                            }
                            .suspended {
                                position: absolute;
                                top: 0; bottom: 0; left: 0; right: 0;
                                margin: auto;
                                color: #fff;
                                z-index: 3;
                                width: 100%; height: 100%;
                                background: rgba(0,0,0,.7);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 14px;
                            }
                        }
                        .txt {
                            margin-top: 10px;
                            @media screen and (max-width:$newbreak-sp) {
                                margin-top: 5px;
                            }
                            .ymd {
                                font-size: 14px;
                                font-weight: bold;
                                color: $base-color;
                                @media screen and (max-width:$newbreak-sp) {
                                    font-size: 13px;
                                }
                            }
                            .locat {
                                font-size: 14px;
                                font-weight: bold;
                                color: $font-color;
                                line-height: 1.4;
                                margin: 3px 0;
                                margin-left: 21px;
                                text-indent: -21px;
                                @media screen and (max-width:$newbreak-sp) {
                                    font-size: 13px;
                                }
                                &:before {
                                    content: "";
                                    display: inline-block;
                                    width: 12px;
                                    height: 16px;
                                    background-image: url(../img/common2021/svg/ico-pin.svg);
                                    background-size: cover;
                                    vertical-align: middle;
                                    position: relative;
                                    top: -2px;
                                    margin: 0 7px 0 2px;
                                }
                            }
                            .times {
                                font-size: 13px;
                                font-weight: bold;
                                color: $font-color;
                                &:before {
                                    content: "";
                                    display: inline-block;
                                    width: 16px;
                                    height: 16px;
                                    background-image: url(../img/common2021/svg/ico-clock.svg);
                                    background-size: cover;
                                    vertical-align: middle;
                                    position: relative;
                                    top: -2px;
                                    margin-right: 5px;
                                }
                            }
                            .event-ttl {
                                margin: 3px 0 0;
                                font-size: 14px;
                                color: $font-color;
                                line-height: 1.4;
                                @media screen and (max-width:$newbreak-sp) {
                                    font-size: 12px;
                                }
                            }
                        }
                        &:hover {
                            .imageholder .image {
                                &:after {
                                    background: rgba(0,81,148,0.2);
                                }
                            }
                        }
                    }
                }
            }
            .arrow-right-bk-sp {
                display: none;
                @media screen and (max-width:$newbreak-sp) {
                    display: block;
                    margin-top: 30px;
                }
                a {
                    @include transition(all 0.3s);
                    text-align: center;
                    display: block;
                    margin: 0 auto;
                    span:nth-of-type(1) {
                        font-size: 13px;
                        font-weight: 500;
                        color: $font-color;
                    }
                    span:nth-of-type(2) {
                        display: block;
                        width: 25px;
                        margin: 0 auto;
                        img {
                            width: 100%;
                            display: block;
                        }
                    }
                    &:hover {
                        transform: translateX(7px);
                    }
                }
            }
        }
    }
}

/**/
#other-linkbox {
    display: flex;
    justify-content: center;
    @media screen and (max-width:$newbreak-sp) {
        flex-direction: column;
        align-items: center;
    }
    div {
        width: 100%;
        max-width: 332px;
        margin: 0 10px;
        @media screen and (max-width:$newbreak-sp) {
            max-width: 320px;
            margin: 20px 0 0;
        }
        a {
            display: block;
            img {
                width: 100%;
                height:auto;
                display: block;
            }
        }
    }
}