@charset "UTF-8";

.sp {
    display: none;
}
@media screen and (max-width: 869px){
    .sp {
        display: block;
    }
}

/*-------------------------------------------------------------------------
COMMITMENT
-------------------------------------------------------------------------*/

.commitment {
    width: 1140px;
    margin: auto;
}
.mv {
    display: grid;
    grid-template-columns: 489px 1fr;
    position: relative;
    margin: 0 0 140px;
    padding: 76px 0 100px;
}
.mv:before {
    content: "";
    background-color: rgba(25,113,213,.9);
    width: 100vw;
    height: 100%;
    position: absolute;
    top     : 0;
    right: calc(50% - 98px);
    z-index: 0;
    mix-blend-mode: multiply;
}
    .mv__block {
        position: relative;
    }
        .mv__headline {
            margin: 0 0 63px;
        }
        .mv__text {
            position: inherit;
            font-size  : 16px;
            font-weight: bold;
            color      : #fff;
            line-height: 2.18;
            padding: 0 60px 0 0;
        }
        .mv__movie + .mv__text {
            margin: -100px 0 0;
        }
    .mv__movie {
        width: 100%;
        margin: 174px 0 0;
        position: relative;
    }
        .mv__movie iframe {
            width: 100%;
            height: 360px;
        }

@media screen and (max-width: 1200px){
    .commitment {
        width: 100%;
    }
    .mv {
        padding: 61px 30px 63px;
    }


}
@media screen and (max-width: 869px){
    .mv {
        display: block;
        margin-bottom: 0;
    }
    .mv__headline {
        margin: 0 0 36px;
        text-align: center
    }
    .mv:before {
        width: 100%;
        right: 0;
    }
    .mv__text:not(:last-child){
        margin: 0 0 25px;
        line-height: 2;
    }
    .mv__text {
        line-height: 2;
        padding: 0;
    }
    .mv__text br {
        display: none;
    }
    .mv__movie {
        width: calc(100% + 60px);
        margin: 46px 0 153px -30px;
    }
    .mv__movie iframe {
        height: 56vw;
    }
}

/*-------------------------------------------------------------------------
REASON
-------------------------------------------------------------------------*/

.reason {
    position: relative;
    margin: 0 0 100px;
    padding: 68px 30px 80px;
    z-index: 1;
}
.reason:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: rgba(250,255,106,.9);
    mix-blend-mode: multiply;
    position: absolute;
    top     : 0;
    left: -30px;
}
    .reason__ttl {
        margin: 0 0 63px;
        position: relative;
        text-align: center;
    }
    .reason__list {
        display              : grid;
        gap                  : 50px;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        position: relative;
        margin: 0 0 55px;
    }
        .reason__items {
            background-color: #fff;
            padding: 0 20px 24px;
            text-align: center;
            border-radius: 20px;
        }
            .reason__num {
                position: relative;
                top     : -19px;
                left: 7px;
                text-align: left;
                margin: 0 0 -2px;
            }
            .reason__sub-ttl {
                margin: 0 0 -7px;
            }
                .reason__sub-ttl span {
                    font-size: 22px;
                    font-weight: bold;
                    line-height: 1.38;
                }
            .reason__text {
                font-size: 14px;
                line-height: 2;
                text-align: center;
            }
                .reason__text figure {
                    margin: 0 0 17px;
                }
    .reason__foot {
        position: relative;
        font-size  : 22px;
        font-weight: bold;
        line-height: 1.59;
        text-align: center;
    }
.text-link {
    display        : flex;
    align-items    : center;
    justify-content: center;
    mix-blend-mode: multiply;
}
.text-link:hover {
    opacity: .8;
}

@media screen and (max-width: 1200px){
    .reason {
        padding: 68px 30px 80px;
    }
    .reason:before {
        left: 0;
    }
}
@media screen and (max-width: 869px){
    .reason {
        padding: 56px 30px 40px;
    }
    .reason__ttl {
        margin-bottom: 50px;
    }
}
@media screen and (max-width: 603px){
    .reason__items {
        padding-bottom: 36px;
        text-align: left;
    }
    .reason__num {
        width: 26px;
        left: 2px;
    }
    .reason__sub-ttl span {
        position: relative;
        z-index : 1;
        font-size: 18px;
    }
    .reason__text {
        text-align: left;
        line-height: 1.64;
        position: relative;
        z-index : 0;
    }
    .reason__text figure {
        text-align: right;
        margin: -29px 0 17px;
        position: relative;
        z-index : -1;
    }
    .reason__items:nth-child(2) figure {
        margin-top: 1px;
    }
    .reason__text img {
        width: 67%;
    }
    .reason__foot {
        font-size: 16px;
    }
}

/*-------------------------------------------------------------------------
資料DL
-------------------------------------------------------------------------*/
.pickup {
    position: relative;
    width: 1020px;
    margin: 100px auto 0;
}
.pickup_inner {
    display: block;
    background: #fff;
    padding: 60px 0px 290px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}
.pickup_inner:hover {
    color: inherit;
    text-decoration: none;
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,.15);
    transition: .2s;
}
.pickup_inner div {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    width: 100%;
}
.pickup_inner dl {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pickup_inner dt {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}
.pickup_inner .txt {
    font-size: 15px;
    text-align: center;
    margin-bottom: 20px;
}
.pickup_inner ul {
    flex-wrap: wrap;
    flex-direction: column;
    display: flex;
    width: 455px;
    height: 45px;
    line-height: 1;
    justify-content: space-between;
    margin-bottom: 30px;
}
.pickup_inner li {
    font-size: 17px;
    font-weight: bold;
}
.pickup_inner li::before {
    content: url(/images/company/icn_check.png);
    margin: 0 4px 0 0;
}
.pickup_inner img {
    width: 440px;
}
.dl_btn {
    font-weight: bold;
    color: #e91e63;
    text-align: center;
    background-color: #fff;
    width: 100%;
    padding: 10px;
    border: 2px solid #e91e63;
    line-height: 1;
}
.dl_btn::after {
    content: url(/images/company/icn_triangle.png);
    margin-left: 10px;
}
.pickup_inner .btn {
    font-size: 22px;
    max-width: 210px;
}
.pickup_inner:hover .dl_btn {
    color: #fff;
    background: #e91e63;
    transition: .2s;
}
.pickup_inner:hover .dl_btn::after {
    content: url(/images/company/icn_triangle_hover.png);
    transition: .2s;
}
.max-sp, .max-tb {
    display: none;
}

@media screen and (max-width: 768px) {
    .pickup {
        width: 100%;
        padding: 0 30px;
    }
    .pickup_inner {
        padding: 40px 0px 520px;
    }
    .pickup_inner div {
        flex-direction: column-reverse;
        align-items: center;
        padding: 0 15px;
    }
    .pickup_inner img {
        width: 400px;
    }
    .pickup_inner dl {
        margin-top: 25px;
    }
    .pickup_inner dt {
        font-size: 28px;
    }
    .pickup_inner ul {
        width: 400px;
        height: 38px;
    }
    .pickup_inner li {
        font-size: 15px;
    }
    .max-tb {
        display: block;
    }
}
@media screen and (max-width: 480px) {
    .pickup_inner {
        padding: 30px 0px calc(320px + 35vw);
    }
    .pickup_inner::before {
        width: 190px;
        height: 190px;
        top: -60px;
        right: -30px;
    }
    .pickup_inner dt {
        font-size: 24px;
    }
    .pickup_inner .txt {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .pickup_inner ul {
        width: 280px;
        height: 52px;
    }
    .pickup_inner .btn {
        font-size: 18px;
        max-width: 180px;
    }
    .max-sp {
        display: block;
    }
}