body{
	margin: 0;
}



a{
	font-family: sans-serif; 
}

img.baner{
	width: 50%;
	margin: 0 25% auto;
}




.movie{
    text-align:center;
    padding: 3%;
    width: 38%;
    height: auto;
    margin: auto;
}

.movieurl{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 35.25%;
    margin-bottom: 30px;
    overflow: hidden;
}

.movieurl iframe{
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 80%;
}

.pv{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #fff;
    background: #3D8CCB;/*背景色*/
}

.pv p{
    text-align:center;
    font-size:22px;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

footer{
	background: #3D8CCB;
	color: #fff;
	width: 100%;
    position: absolute;
    top: auto;
    left: 0;
    text-align: center;
    font-family: sans-serif;
}


@media screen and (max-width:1920px) /*画面が横幅1500px以下の場合。（PC など）*/
{


.movie{
    width: 44%;
}

}

@media screen and (max-width:1024px) /*画面が横幅1024px以下の場合。（タブレットなど）*/
{


.movie{
    text-align:center;
}

.movieurl{
    text-align:center;
}

.pv{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #fff;
    background: #3D8CCB;/*背景色*/
}
.pv p{
    text-align:center;
    font-size:22px;
    margin: 0;
    padding: 0;
}

footer{
	background: #3D8CCB;
	color: #fff;
}
}

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

}

@media screen and (max-width:480px) /*画面が横幅480px以下の場合。（スマホなど）*/
{




img.baner{
	width: 80%;
	margin: 0 10% auto;
}

.movie{
    width: 60%;
    max-width:900px;
    min-width: 100px;
    margin: auto;
    height: auto;   
}

.movieurl{
    text-align:center;
    padding-top: 56.25%;
}

.pv{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #fff;
    background: #3D8CCB;/*背景色*/
}
.pv p{
    text-align:center;
    font-size:22px;
    margin: 0;
    padding: 0;
}

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

footer{
	background: #3D8CCB;
	color: #fff;
	position: absolute;
}
}