/* CSS Document */

@charset "utf-8";

header{
	display:flex;
	justify-content: space-between;
	align-content: center;
	background-color:transparent;
}
header h1{
	padding:1rem;
}
header a{
	display:flex;
	align-items: center;
	padding-right:1rem;
}
header a img{
	transition:all 0.3s;
}
header a:hover img{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
}

#movie-list{margin: 0 auto 7%;
	display: block;}


/*動画*/

.midasi01{
    max-width: 528px;
    margin: 0 auto 2%;
    display: block;
}


.mabttm{margin-bottom: 7%!important;}

.mv_container2 {
    width: 74%;
    aspect-ratio: 16/9;
    margin: 2rem auto 3rem;
}

.mv_container2 iframe {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


/*****モーダル*****/
	
video {
  width: 100%;
  max-width:750px; 
    margin: 0 auto;
    display: block;	
}		
	
#modal_window{
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index:6000;
	background-color: rgba(0,0,0,0.70);
	justify-content: center;
	align-items: center;
}
#modal_contents{
	width: 90%;
	max-width: 950px;
}
#modal_cont_wrap{
	position: relative;
	padding-left: 15%;
    width: 80%;
    aspect-ratio: 14/9;
    margin: 0 auto;
}

#modal_cont_wrap iframe{
	position: absolute;
	top: 18px;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
/***閉じるボタン***/
.close_btn{
	display: inline-block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	position: relative;
	float: right;
	margin-bottom: 8px;
	right: 0px;
    bottom: 40px;
	background-color: #fff100;
	border-radius: 50px;
}
.close_btn span{
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
}
.close_btn span::before,
.close_btn span::after{
	    display: block;
    content: "";
    position: relative;
    top: 54%;
    left: 58%;
    width: 68%;
    height: 10%;
    margin: -8% 0 0 -42%;
    background-color: #e0030a;
    border-radius: 3px;
}
.close_btn span::before{
	transform: rotate(-45deg);
}
.close_btn span::after{
	transform: rotate(45deg);
}
	
	
@media screen and (max-width:640px){	
video {
  width: 100%;
  max-width: 400px; /* 最大でも400px以下に */
}	
	
.close_btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: relative;
    float: right;
    margin-bottom: 8px;
    right: 33px;bottom: 33px;
}	
	
#modal_contents {
	width: 100%;}	
	
#modal_cont_wrap{
	
	padding-left: 0%;	
	}
	
	.midasi01 {max-width: 280px;}
	
.midasi01,.midasi02{width: 80%;
}	
	
.mv_container2 {
	width: 88%;margin: 0rem auto 3rem;}
	
	
	
}
/****************/
	

@media screen and (max-width:560px){
header h1{
	padding:0.5rem;
}
	
header a{
	padding-right:0.5rem;
}	

	}