@charset "UTF-8";

html {
    /* -> 10px; */
    font-size: 62.5%;
}

body {
    width: 100%;
    min-width: 280px;
    margin: 0;
    padding: 0;
    border: none;
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
    /* -> 14px; */
    font-size: 1.4rem;
    font-size: 14px;
    background: url("../../img/haikei.svg") no-repeat #fff;
    background-size: cover;
    background-attachment: fixed;
}

@media screen and (max-width: 1024px) {
    body {
        background:none
    }

    body::before {
        content:"";
        display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:-9999;
        width:100%;
        height:100vh;
        background:url("../../img/haikei.svg") center/cover no-repeat #fff;
    }
}

@font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 400;
}

/*▼▼▼▼▼▼▼▼ 全体 ▼▼▼▼▼▼▼▼*/
.ssc_archive {
    color: #404141;
}

/*▼▼▼▼▼▼▼▼▼▼▼▼ TOP -トップ- ▼▼▼▼▼▼▼▼▼▼▼▼*/
/*TOP写真とタイトルを重ねる*/
.top {
    position: relative;
    width: 100%;
    margin: 0;
}

.photo {
    width: 100%;
    text-align: right;
}

.top_img {
    width: 100%;
    margin-top: 12vw;
}

/*ページタイトル*/
.title {
    position: absolute;
    top: 52vw;
    left: 5vw;
    text-align: center;
    color: #2a7dd5;
}

h2 {
    margin: 0;
    font-size: 8vw;
    line-height: 1.2;
}

.title span {
    display: block;
    margin: 0;
    font-size: 2vw;
    font-weight: bold;
    line-height: 1.2;
}

/*768px以上*/
@media screen and (min-width: 768px) {

    .top_img {
        width: 84%;
    }

    /*ページタイトル*/
    .title {
        top: 32vw;
        left: 7vw;
    }

    h2 {
        font-size: 4vw;
        line-height: 1.6;
    }

    .title span {
        font-size: 1.2vw;
        line-height: 1.6;
    }

}

/*1025px以上*/
@media screen and (min-width: 1025px) {
    .top_img {
        margin-top: 96px;
    }
}

/*▼▼▼▼▼▼▼▼▼▼▼▼ まとめ ▼▼▼▼▼▼▼▼▼▼▼▼*/
/*h3タイトル*/
h3 {
    margin: 8rem 0 2rem;
    text-align: center;
    color: #2a7dd5;
}

h3 strong {
    display: block;
    font-size: 3.4rem;
    line-height: 1;
}

h3 span {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
}

.interview {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
}

/*1366px以上*/
@media screen and (min-width: 1366px) {

    /*タイトル*/
    h3 {
        margin: 20rem 0 4rem;
    }

    h3 strong {
        font-size: 5rem;
    }

}

/*▼▼▼▼▼▼▼▼▼▼▼▼ INTERVIEW MOVIE ▼▼▼▼▼▼▼▼▼▼▼▼*/
/*ulの中身*/
.interview_contens {
    width: 100%;
    padding: 0;
    list-style-type:none;
}

.interview_contens li {
    display: inline-block;
    width: 80%;
    margin-top: 70px;
    word-wrap: normal;
}

.list_content {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    background-color: #000;
    cursor: pointer;
}

/*動画*/
.list_content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*KENJA GLOBALバナー*/
.list_banner {
    position: absolute;
    top: 26%;
    left: 0;
    width: 100%;
}

/*h4タイトル*/
.interview_contens h4 {
    font-size: 1.6rem;
    word-wrap: normal;
}

/*768px以上*/
@media screen and (min-width: 768px) {

    .interview_contens {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
    }

    .interview_contens li {
        width: 30%;
    }

}

/*1024px以上*/
@media screen and (min-width: 1024px) {

    .interview_contens h4 {
        font-size: 1.8rem;
    }

}

/*一番下のmargin*/
.forMargin {
    margin-bottom: 200px;
}