@charset "utf-8";

/* ==========================================================================

  common

  ========================================================================== */

body{

	overflow: hidden;

}



/* ==========================================================================

  mv

  ========================================================================== */

.mv{

	position: relative;

	width: 100%;

	height: 100vh;

	overflow-x: hidden;

	overflow-y: scroll;

}



.mv_slide{

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100vh;

}



.mv_slide li{

	height: 100vh;

}



.mv_slide01{

	position:absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100vh;

	background: url("../img/mv01_a.png") center right no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

}



.mv_slide02{

	position:absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100vh;

	background: url("../img/mv01_b.png") center right no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

}



.mv_slide03{

	background: url("../img/mv04.jpg") center right no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

}



.mv_slide04{

	background: url("../img/mv02.jpg") center right no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

}



.mv_logo{

	

    position: absolute;

    top: 50%;

    right: 5%;

    /* left: 0%; */

    /* margin-right: -50%; */

    -webkit-transform: translate(5%, -50%);

    transform: translate(5%, -50%);

}


@media screen and (max-width: 1024px) and (orientation: portrait){

.mv_slide01{
    
    background: url(../img/mv01_tab.jpg) center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;

}

}

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

.mv_slide01{

	background: url("../img/mv01_sp.jpg") center no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

}



.mv_slide02{

	background: url("../img/mv03_sp.jpg") center no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

}

.mv_slide03{

	background: url("../img/mv04_sp.jpg") center no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

}

.mv_slide04{

	background: url("../img/mv02_sp.jpg") center no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

}



.mv_logo{

	position: absolute;

	top: 50%;

	left: 50%;

	right: auto;

	width: 60%;

	height: auto;

	-webkit-transform: translate(-50%, -50%);

	-ms-transform: translate(-50%, -50%);

	-o-transform: translate(-50%, -50%);

	transform: translate(-50%, -50%);

}



.mv_logo img{

	height: auto;

}

}



/* ==========================================================================

  header / footer

  ========================================================================== */

#header{

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

}



.footer{

	position: absolute;

	bottom: 0;

	left: 0;

	width: 100%;

	z-index: 100;

}



.footer{

	color: #fff;

	background-color: rgba(210,210,210,0.85);

}

footer .footer .info{

	display: -webkit-box;

	display: -moz-box;

	display: -webkit-flexbox;

	display: -moz-flexbox;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: -moz-flex;

	display: flex;

	width: 80%;

	margin: 20px auto;

}



footer .footer .info .info_tel{

	width: 60%;

	max-width: 600px;

	margin: 0;

}



footer .footer .info .tel{

	color: #0c0c0c;

	font-size: 42px;

	font-family: 'Lora', serif;

}



footer .footer .info .tel i{

	margin-right: .5em;

	font-size: .8em;

}



.footer .info_req.btn{

	display: inline-block;

	position: relative;

	width: 32%;

	max-width: 320px;

	margin-top: 0;

	font-size: 14px;

}





.footer .info_req.btn span{

	position: absolute;

	top: 50%;

	left: 50%;

	width: 100%;

	-webkit-transform: translate(-50%, -50%);

	-ms-transform: translate(-50%, -50%);

	-o-transform: translate(-50%, -50%);

	transform: translate(-50%, -50%);

}



.copyright{

	color: #0c0c0c;

	background-color: transparent;

}







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

footer .footer .info{

	display: block;

	width: 100%;

	margin: 0;

}



footer .footer .info .info_tel{

	width: 100%;

	max-width: 640px;

	margin: 10px 0;

}



footer .footer .info .tel{

	font-size: 32px;

}





.footer .info_req.btn{

	width: 100%;

	max-width: 640px;

	padding: 20px 0;

}

}