/*----画面遷移----*/
.site-bg {
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 1100;
    position: fixed;
    top: 0;
    left: 0;
}

.site-bg .top-text {
    font-size: 3.0rem;
    text-align: center;
    font-weight: bold;
    align-items: center;
    position: absolute;
    top: 44%;
    left: 0;
    right: 0;
}

/*アニメーション要素のスタイル*/
.site-bg .top-text {
    opacity: 0;
    transform: translate(0, 30%);
    transition: 1.5s;
}

/*アニメーション要素までスクロールした時のスタイル*/
.site-bg .top-text.active {
    transform: translate(0, 0);
    opacity: 1;
}


/*-------------------------------------------
Video
-------------------------------------------*/
/*
動画を全画面表示
*/
.video-box {
    width: 100%;
    height: 100vh;
}




/*共通*/
#main {
    margin-top: 100vh;
    width: 100%;
    display: block;
    background-color: #fff;
    padding: 300px 0;
    z-index: 10;
}


/*about-contact*/

#about,
#contact {
    display: flex;
    justify-content: center;
    margin-bottom: 250px;
}

#about .about-left,
#contact .contact-left {
    width: 35%;
    align-items: center;
    padding: 0 3% 0 0;
}

#about .about-left .sec-title,
#contact .contact-left .sec-title {
    font-size: 4.0rem;
    border-bottom: solid 3px  rgb(237, 126, 0);
    line-height: 1;
    margin-bottom: 80px;
    font-family: 'PT Sans', sans-serif;
    font-style: normal;
    font-weight: 700;

}

#about .about-left .sec-text,
#contact .contact-left .sec-text {
    overflow-wrap: break-word;
    margin-bottom: 80px;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    line-height: 1.4;
    padding: 0 7%;

}

#about .about-right,
#contact .contact-right {
    width: 40%;
    text-align: right;

}

#about .about-right img,
#contact .contact-right img {
    line-height: 1px;
    width: auto;
    height: 100%;
    vertical-align: bottom;
    object-fit: cover;

}

#contact {
    margin-bottom: 0;
}



/*like*/

#like {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
}

.contents {
    -webkit-transform: rotate(3deg) translate3d(0, 0, 0);
    margin-left: -25%;
    position: relative;
    transform: rotate(3deg) translate3d(0, 0, 0);
    width: 150%;
    background:  rgb(237, 126, 0);
    padding: 100px 0;
    margin-bottom: 200px;
}

.contents_inner {
    -webkit-transform: rotate(-3deg) translate3d(0, 0, 0);
    color: #fff;
    margin: 0 auto;
    max-width: 100%;
    transform: rotate(-3deg) translate3d(0, 0, 0);
    width: 1100px;
}


#like .like-right {
    width: 55%;
    align-items: center;
    padding: 0 3%;
}

#like .like-right .sec-title {
    font-size: 4.0rem;
    padding-bottom: 5px;
    border-bottom: solid 3px #fff;
    line-height: 1;
    margin-bottom: 80px;
    color:#fff;
}

#like .like-right .sec-text {
    overflow-wrap: break-word;
    margin-bottom: 80px;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: #fff;
    padding: 0 7%;

}

#like .like-left {
    width: 70%;

}

#like .like-left img {
    line-height: 1px;
    width: auto;
    height: 100%;
    position: relative;
    left: 0;
    vertical-align: bottom;
    object-fit: cover;

}
.contents .more-btn {
    width: 55%;
    height: 50px;
    display: flex;
    align-items: baseline;
    font-size: 1.3rem;
    text-align: center;
    justify-content: center;
    line-height: 50px;
    color: #f5f3f2;
    margin: 0 auto;
    border: solid 1px #fff;
    transition: 0.5s;

}

.contents .more-btn:hover {
    background: #fff;
    border:none;
}


.contents .more-btn a {
    width: 100%;
    margin-right: 5px;
    color: #fff;
}
.contents .more-btn a:hover {
    color: rgb(237, 126, 0);
}

.contents .more-btn::after {
    content: "";
    width: 30px;
    height: 5px;
    position: relative;
    border-bottom: solid 2px;
    border-right: solid 2px;
    transform: skew(45deg);
    color: #fff;
    position: relative;
}
.contents .more-btn:hover::after {
    color: rgb(237, 126, 0);
}