@charset "utf-8";
.main-content{
    width: 100%;
    display: block;
}
header div{
    display: block;
}
header{
    width: 100%;
    top: 0;
}
/* PC
------------------------------------------------------------*/
@media (min-width: 769px) {
    .main-content{
        margin: 80px auto 0 auto;
    }
    .link-button{
        width: 400px;
        height: 60px;
        background: #F66C19;
        margin: 0 auto;
        line-height: 60px;
        text-align: center;
        border-radius: 30px;
    }
    .link-button a{
        color: #FFF;
        text-decoration: none;
        font-size: 2.0rem;
        display: block;
    }
    .link-button:hover{
        background-color: rgba(255, 255, 255, 0);
        border: 1px solid #F66C19;
    }
    .link-button a:hover{
        color: #F66C19;
    }
    /*MV*/
    .mv-group{
        width: 100%;
        height: 520px;
        position: relative;
    }
    .mv-group video{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        z-index: 1;
    }
    .mv-group::after{
        content: "";
        position: absolute;
        z-index: 2;
        width: 100%;
        height:100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5);
        background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
        background-size: 3px 3px;
        background-position: 0 0, 3px 3px;
    }
    .mv-group .mv-text{
        width: 90%;
        height: auto;
        z-index: 3;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit- transform: translateY(-50%) translateX(-50%);
    }
    .mv-group .mv-text h2{
        font-size: 3.6rem;
        font-weight: 900;
        color: #fff;
        text-align: center;
    }
    .mv-group .mv-text p{
        width: 60%;
        color: #fff;
        text-align: center;
        margin: 24px auto auto auto;
    }
    .mv-text .link-button{
        margin-top: 24px;
    }

    /*.steps-contents*/
    .steps-contents{
        width: calc(100% - 120px);
        max-width: 1200px;
        margin: 40px auto 0 auto;
    }
    .steps-title{
        text-align: center;
        height: 160px;
        position: relative;
    }
    .steps-title h2{
        font-size: 3.6rem;
        font-weight: 900;
        position: relative;
        z-index: 2;
    }
    .steps-title h2 span{
        color: #F66C19;
    }
    .steps-title p{
        position: relative;
        margin: 16px auto auto auto;
        z-index: 2;
    }
    .steps-title::after{
        content: "";
        display: block;
        width: 273px;
        height: 160px;
        position: absolute;
        bottom: 0;
        right: 0;
        background: url("../img/index/title-bg.png")no-repeat;
        background-size: contain;
        z-index: 1;
    }
    .steps-list{
        display: flex;
        justify-content: space-between;
    }
    .steps-list li{
        width: 24%;
        height: auto;
        background: #f9f9f9;
        border-radius: 8px;
        padding: 32px 20px;
        margin: 40px auto 60px auto;
    }
    .steps-list li h3{
        text-align: center;
        color: #F66C19;
        font-size: 2.0rem;
        margin-bottom: 16px;
    }
    .steps-list li img{
        margin-bottom: 16px;
    }
    .steps-list li p{
        text-align: center;
    }

    /*copyright*/
    .copyright{
        border-top: 1px solid #cbcbcb;
        padding-top: 40px;
        margin-top: 60px;
    }

}

/* Tablet and SP
------------------------------------------------------------*/
@media (max-width: 768px) {
    header{
        width: 100%;
        height: 60px;
        display: block;
        position: fixed;
        z-index: 200;
        background: #FFF;
    }
    header div{
        display: none;
    }
    .main-content{
        margin: 60px auto 0 auto;
    }
    .link-button{
        width: 100%;
        height: 60px;
        background: #F66C19;
        margin: 0 auto;
        line-height: 60px;
        text-align: center;
        border-radius: 30px;
    }
    .link-button a{
        color: #FFF;
        text-decoration: none;
        font-size: 2.0rem;
        display: block;
    }
    .link-button:hover{
        background-color: rgba(255, 255, 255, 0);
        border: 1px solid #F66C19;
    }
    .link-button a:hover{
        color: #F66C19;
    }
    /*MV*/
    .mv-group{
        width: 100%;
        height: calc( 100vh - 60px);
        position: relative;
    }
    .mv-group video{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        z-index: 1;
    }
    .mv-group::after{
        content: "";
        position: absolute;
        z-index: 2;
        width: 100%;
        height:100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5);
        background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
        background-size: 3px 3px;
        background-position: 0 0, 3px 3px;
    }
    .mv-group .mv-text{
        width: 90%;
        height: auto;
        z-index: 3;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit- transform: translateY(-50%) translateX(-50%);
    }
    .mv-group .mv-text h2{
        font-size: 2.4rem;
        font-weight: 900;
        color: #fff;
        text-align: center;
    }
    .mv-group .mv-text p{
        width: 100%;
        color: #fff;
        text-align: center;
        margin: 24px auto auto auto;
    }
    .mv-text .link-button{
        margin-top: 24px;
    }
    /*.steps-contents*/
    .steps-contents{
        width: calc(100% - 40px);
        height: auto;
        margin: 40px auto 0 auto;
    }
    .steps-title{
        text-align: center;
        position: relative;
    }
     .steps-title h2{
        font-size: 2.4rem;
        font-weight: 900;
        position: relative;
        z-index: 2;
    }
    .steps-title h2 span{
        color: #F66C19;
    }
    .steps-title p{
        position: relative;
        margin: 16px auto auto auto;
        z-index: 2;
    }
    .steps-title::after{
        content: "";
        display: block;
        width: 153px;
        height: 90px;
        position: absolute;
        bottom: -50px;
        right: 0;
        background: url("../img/index/title-bg.png")no-repeat;
        background-size: contain;
        z-index: 1;
    }
    .steps-list{
        margin: 80px auto 60px auto;
    }
    .steps-list li{
        width: 100%;
        height: auto;
        background: #f9f9f9;
        border-radius: 8px;
        padding: 32px 20px;
        margin: 0 auto 24px auto;
    }
    
    .steps-list li:last-child{
        margin-bottom: 0;
    }
    .steps-list li h3{
        text-align: center;
        color: #F66C19;
        font-size: 2.0rem;
        margin-bottom: 16px;
    }
    .steps-list li img{
        margin-bottom: 16px;
    }
    .steps-list li p{
        text-align: center;
    }
    /*copyright*/
    .copyright{
        border-top: 1px solid #cbcbcb;
        padding: 24px 0;
    }
    footer{
        height: auto;
        margin-top: 40px;
    }

}