@charset "utf-8";

/*----------------------------------*/

@media screen and (max-width:768px) { /*SP*/
    .ytWrap{
        width: 100%; height: 100%;
        /* height: calc( 100% - 10px )!important; */
        /* padding: 0px 10px 8px 10px; */
        position: relative;
    }
    .ytEnd{
        width: 100%;
        display: none;
        margin: -5px 0 0 0;
    }
    .ytInfoSP{
        display: block;
        padding: 5px 30px 0px 30px;
        background-color: #66B72E;
    }
    .ytInfoPC{
        display: none;
    }
    .ytThumbnail{
        position: absolute;
        top: 0; left: 0; z-index: 50;
        width: 100%; height: 100%;
        transition: opacity 0.3s;
        display: flex; justify-content: center;
        align-items: center; flex-wrap: nowrap;
        margin: -3px 0 0 0;
        /* background-color: #000; */
        /* padding: 10px; */
        /* display: none; */
    }
}
@media screen and (min-width:769px) , print { /*PC&TB*/
    .ytWrap{
        width: 100%;
		height: 100%;
        position: relative;
        /* background-color: #000; */
    }
    .ytEnd{
        width: 100%;
        display: none;
    }
    .ytInfoSP{
        display: none;
    }
    .ytInfoPC{
        display: block;
        padding: 20px;
        background-color: #66B72E;
        border-top: 1px solid #009800;
    }
    .ytThumbnail{
        position: absolute;
        top: 0; left: 0; z-index: 50;
        width: 100%; height: 100%;
        transition: opacity 0.3s;
        display: flex; justify-content: center;
        align-items: center; flex-wrap: nowrap;
        margin: -3px 0 0 0;
        /* background-color: #000; */
        /* padding: 10px; */
        /* display: none; */
    }
}

.ytThumbnail picture , .ytThumbnail img{
    width: 100%; height: 99.0%;
}
.ytIcon{
    position: absolute;
    top: 0; left: 0; z-index: 51;
    width: 100%; height: 100%;
    background-image: url(../img/youtube_icon.png);
    background-repeat: no-repeat;
    background-size: 64px 45px;
    background-position: center center;
    transition: opacity 0.3s, background-color 0.3s;
    cursor: pointer;
}
.ytIcon:hover{
    opacity: 0.5;
    background-color: rgba(255, 255, 255, 0.5);
}
.ytIcon2{
	background-image: url(../img/ico_play.png);
	background-size: 139px 138px;
	background-position: center 170px;
}
.ytHidden{
    opacity: 0;
}
.ytStatus {
    width: 100%; padding: 10px; text-align: center; 
    background-color: #303030; color: #fff; transition: 0.3s;
    display: none;
}
.ytTime {
    display: none;
}
.ytMute{
    background-color: #ccc;
    border: 1px solid #999;
}
.ytMute:hover{
    cursor: pointer;
    opacity: 0.5;
}
.kv_player2 .idxf_mainImg_note{
	background-image: url(../img/img_kv_pc.png);
}
.kv_player2 .idxf_mainImg_note iframe{
	max-width: 948px;
	width: 100% !important;
	height: 100% !important;
}
.ytThumbnail,.ytThumbnail img{
	top: 0 !important;
	margin: 0 !important;
}
.ytThumbnail{
	background: #38b9b9 url(../img/img_kv_pc.png) no-repeat center top;
	background-size: auto 100%;
}


@media screen and (max-width:768px) { /*SP*/
	.kv_player2{
		background: none;
		height: 79vw;
	}
	.kv_player2 .idxf_mainImg_note{
		display: block;
		height: 100%;
	}
	.kv_player2 img{
		max-width: 100%;
		height: calc(100 + 3px) !important;
		margin-top: -1px !important;
	}
	.ytThumbnail{
		background: url(../img/img_kv_sp.png) no-repeat center top;
		background-size: 100% auto;
	}
	.ytIcon2{
		background-image: url(../img/ico_play.png);
		background-size: 66px 65px;
		background-position: center 25vw;
	}
}