@charset "utf-8";

/*-------------------------------
	動画詳細
-------------------------------*/

.main{
    padding-top: var(--header-height);
}
#Detail{
    padding-top: 10rem;
    background: #e5e5e5;
}
.Detail-header{
    margin-bottom: 8rem;
}
.Detail-header__data{
    width: 100%;
    margin-bottom: 1rem;
    padding-left: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
	position: relative;
}
.Detail-header__data::before{
	background: var(--maincolor);
	content: "";
	display: block;
	width: 1.3rem;
	height: 1.3rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.Detail-header__time{
    letter-spacing: .05em;
    margin-right: 1em;
    padding-right: 1em;
    font-weight: 400;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.Detail-header__time::after{
    background: var(--blackcolor);
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    line-height: 1;
}
.Detail-header__category{
    font-weight: 400;
    line-height: 1;
    display: block;
}
.Detail-editor{
	padding-bottom: var(--padding-topbottom);
}
.Detail-header__title{
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: calc(7 / 4);
}

.Detail-visual{
	width: 100%;
	position: relative;
}
.Detail-visual__image{
	transition: var(--transition);
	width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
	z-index: 6000;
	overflow: hidden;
	cursor: pointer;
}
.Detail-visual__image.on{
	opacity: 0;
    visibility: hidden;
}
.Detail-visual__image::before{
    content: "";
    display: block;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    border: 1px solid #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6000;
	transform: translate(-50%, -50%);
    background-image: url(../images/common/icon_movie-button.svg);
    background-size: 4rem;
    background-repeat: no-repeat;
    background-position: calc(50% + .5rem) center;
}
.Detail-visual__image::after{
    transition: var(--transition);
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
    background: rgba(0,0,0,.3);
}
.Detail-visual__image:hover::after{
    opacity: .6;
}
.Detail-visual__image img{
	transition: var(--transition);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.Detail-visual__frame{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 4000;
}
.Detail-visual__frame iframe{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.Detail-editor__body{
	margin-top: 9rem;
}
.Detail-editor__title{
	font-size: 2.4rem;
	margin-bottom: 3rem;
	letter-spacing: .05em;
	line-height: calc(4.3 / 2.4);
	font-weight: 700;
}
.Detail-editor__text{
	letter-spacing: .05em;
    font-weight: 400;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

    .Detail-header__data{
        margin-bottom: 2rem;
        padding-left: 3.6rem;
    }
    .Detail-header__data::before{
        width: 2.2rem;
        height: 2.2rem;
    }
    .Detail-header__time{
        margin-right: 3rem;
        padding-right: 3rem;
    }
    .Detail-editor{
        padding-bottom: 6rem;
    }
    .Detail-header__title{
        line-height: calc(6 / 4);
        letter-spacing: .01em;
    }

    .Detail-visual__image::before{
        width: 16rem;
        height: 16rem;
        background-size: 4.3rem;
    }
    .Detail-editor__body{
        margin-top: 8rem;
    }
    .Detail-editor__title{
        font-size: 3.2rem;
        letter-spacing: 0;
        line-height: calc(5 / 3.2);
    }

}