/***** main-top *****/

.top_wave,
.top_wave_filter {
    border-bottom-left-radius: 1200px 700px;
    border-bottom-right-radius: 1600px 1000px;
    height: 750px;
    margin-left: -100px;
    margin-right: -80px;
    padding-left: 100px;
    padding-right: 80px;
    position: relative;
}
.top_wave_filter {
    background: initial;
    border-bottom: solid 20px rgba(31, 146, 191, 0.7);
}

@media screen and (max-width: 700px) {
    /* モバイル向けスタイル */
    .top_wave,
    .top_wave_filter {
        height: 450px;
    }
}

/***** main 背景動画 *****/

.top_wave {
    background-image: none;
}
#video {
    display: block;
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 100%;
    height: 770px;
    object-fit: cover;
    border-bottom-left-radius: 1200px 700px;
    border-bottom-right-radius: 1600px 1000px;
}


.top_message {
    margin: auto;
    padding-top: 170px;
    color: #fff;
    text-shadow: 0px 0px 30px #fff;
    font-family: "游ゴシック","Hiragino Kaku Gothic ProN","sans-serif";
}
.top_message h1 {
    font-weight: bold;
    padding: 20px 0;
}

@media screen and (max-width: 700px) {
    /* モバイル向けスタイル */
    .top_message {
        padding-top: 90px;
    }
}


/***** main-top_title *****/

.title {
    height: 400px;
    position: relative;
}
.title h2 {
    font-size: 28px;
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.title h2::before {
    position: absolute;
    top: -100px;
    transform: translateX(-50%);
    color: rgba(6, 5, 99, 0.15);
    font-size: 120px;
    font-family: "Georgia";
    text-transform: uppercase;
    z-index: -1;
    background: none;
}
.blog_new h2::before {
    content: 'BLOG';
    left: -10%;
}
.company_rinen h2::before {
    content: 'COMPANY';
    left: -10%;
}
.balance_learning h2::before {
    content: 'LEARNING';
    left: -220%;
}
.recruit h2::before {
    content: 'RECRUIT';
    left: -10%;
}
.title span::before {
    content: '';
    position: absolute;
    left: 30%;
    bottom: -15px;/*線の上下位置*/
    display: inline-block;
    width: 60%;/*線の長さ*/
    height: 1px;/*線の太さ*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);/*位置調整*/
    background-color: #060563;/*線の色*/
}

/***** main-pagelink *****/

.pagelink {
    width: 85%;
    margin-top: 70px;
    font-size: 20px;
    text-align: right;
    letter-spacing: 2px;
}
.pagelink svg {
    transform: translateX(-8px);
    transition: all 0.3s ease;
}
.pagelink:hover svg {
    transform: translateX(0);
}
.pagelink_underline {
    position: relative;
    color: black;
    padding: 0 15px 15px 0;
}
.pagelink_underline:after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 1);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.pagelink:hover .pagelink_underline:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/***** main-blog_new *****/

.latest_article {
    width: 70%;
    margin: 60px auto 0 auto;
    padding: 70px 140px;
    background: rgba(255, 255, 255, 0.5);
    background-image: url("../images/blog.png");
    background-repeat: no-repeat;
    background-position: 90% 100%;
}
.latest_article ul {
    width: 100%;
    margin: auto;
}
.latest_article li {
    padding: 20px;
    border-bottom: solid 0.5px #060563;
}
.latest_article li:first-child {
    border-bottom: solid 1px #060563;
    padding-top: 0;
}
.latest_article a {
    display: flex;
}
.latest_article time {
    width: 20%;
}
.latest_article p {
    width: 80%;
}

@media screen and (max-width: 1328px) {
    /* モバイル向けスタイル */
    .title h2::before {
        position: absolute;
        top: -40px;
        transform: translateX(-50%);
        color: rgba(6, 5, 99, 0.15);
        font-size: 50px;
        font-family: "Georgia";
        text-transform: uppercase;
        z-index: -1;
        background: none;
    }
    .title {
        height: 200px;
        margin-top: 100px;
        position: relative;
    }
}
@media screen and (max-width: 950px) {
    /* モバイル向けスタイル */
    .latest_article {
        width: 80%;
        margin: 40px auto 0 auto;
        padding: 7vw;
        background-position: 90% 100%;
        background-size: 50%;
    }
}
@media screen and (max-width: 700px) {
    /* モバイル向けスタイル */
    .latest_article td {
        display: inline-block;
        padding: 10px;
    }
    #video {
        height: 470px;
    }
    
}