@charset "UTF-8";

#mainmovie {margin:0; padding:0; width:100%; height: 100vh; position: relative;}
.movieblock {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden; border-bottom: solid 1px #333;}
.movieblock video {position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;}

#muteBtn {background:url("../img/index/sound_off.png") no-repeat 0 0; width:90px; height:25px; background-size:contain; display:inline-block; z-index: 999; right:20px; bottom:20px; position:absolute}
#muteBtn.on {background:#000 url("../img/index/sound_on.png") no-repeat 0 0; background-size:contain;}

.border {content: "";  width: 100%;  height: 1px; border-top: solid 1px #000;}
.txtL {font-size:26px; letter-spacing: 7px; margin: 0 0 20px}
.txtM {font-size:16px; letter-spacing: 1px}
img.btn {height: 42px; width: auto}

/*  CREDO  */
#credo {margin-bottom: 80px; margin-top:-200px; padding-top: 200px; clear:both}

/*  company  */
#company  {font-size: 0;}
#company .company_img { background:#d5e0e8 url("../img/index/company_back.jpg") no-repeat center center; background-size:cover; width: 45%; height:950px; display: inline-block}
#company .company_img_sp { display: none}
#company .company_box {width:55%; display: inline-block; vertical-align: top; padding:20px 0 0 75px; box-sizing: border-box}
#company dl {width: 100%; margin:20px auto 30px; padding:0; font-size:16px;}
#company dl dt{
	font-weight:bold;
	padding: 12px 0 8px 10px;
	float:left;
	width:120px;
	}
#company dl dd{
margin:0;
padding: 12px 0 8px 150px;
display:block;
}

/*  access  */
#access {padding-bottom: 60px; margin-top:-100px; padding-top: 100px}
#access .ac_box {clear: both}
#access h3 {font-size:30px; font-weight:normal; letter-spacing:5px}
#access .ac_txt {width:400px; display:inline-block;margin:0 0 0 100px; padding-top:70px; vertical-align:top; line-height:2.2em;}
#access .ac_txt a.map_btn {display:inline-block; padding:0; margin:20px 0 0;}
#access .ac_map {width:540px; display:block; font-size:0; padding:0;}
#access .ac_map img {width:100%; background:#FFF; padding:0; border:solid 1px #333; box-sizing: border-box}
#access .ac_map img.map_otsu {margin-bottom:50px;}

/*  eagle court  */
#eagle {margin-top: -100px; padding-top:100px;}
#eagle ul { text-align:center; font-size:0; margin: 0 0 80px}
#eagle ul li { display: inline-block; width: 475px; margin:20px 20px 50px; border: solid 1px #CCC; box-shadow: 4px 4px 6px #CCC;}
#eagle ul li img:hover {opacity: 0;-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;}
#eagle ul li.ec_otsu-tyuou1 {background:url("../img/index/ec_otsu-tyuou1_ov.jpg") no-repeat 0 0;}
#eagle ul li.ec_nijo23 {background:url("../img/index/ec_nijo23_ov.jpg") no-repeat 0 0;}


/*  works  */
#works { background: #333; color: #EEE; margin:-20px 0 0 0; padding:20px 0 0 0;}
#works .txtM {margin-bottom: 40px} 
#works .works_L {width: 45%; height:540px; float: left; padding:0; box-sizing: border-box}
#works .works_R { background: #333 url("../img/index/wr_deve_back2.jpg") no-repeat left bottom; background-size:100% auto;  width:calc(55% - 55px); height:540px; float: right; padding:0; box-sizing: border-box}
#works .works_txt {background: #FFF; color: #333; width: 360px; float: right; height:250px; padding:40px 0 0 60px; box-sizing:border-box}
#works .works_txt2 {background: #FFF url("../img/index/wr_deve_back.png") no-repeat 360px top; color: #333; width:100%; height:196px; padding:30px 0 0 40px; box-sizing:border-box}
#works::after {clear: both; content:""; display: block;width: 100%; height:150px; }
#works h3 {font-size: 40px; margin:0; padding: 0; line-height: 1.0em}
#works .works_txt2 h3 {font-size: 47px;}
#works .works_txt p,#works .works_txt2 p {margin:0; padding:20px 0 20px 5px; font-size: 15px; line-height: 1.4em}
#works .works_txt2 p {padding:7px 0 20px 5px}
#works .investment,#works .utilization {width: 100%; height:250px; margin-bottom:40px;}
#works .investment { background: url("../img/index/wr_util_back.jpg") no-repeat calc(100% - 360px) center; background-size: contain}
#works .utilization {background: url("../img/index/wr_inve_back.jpg") no-repeat calc(100% - 360px) center; background-size: contain}

/*  contact  */
#contact {background:url("../img/index/contact_back.jpg") no-repeat center top; clear: both;}
#contact .contact_box {margin:0 0 0 560px; padding: 20px 0 0; height:480px}
#contact .tel {font-size:32px; margin:0 0 0 20px}
#contact .tel span {font-size:16px; display:inline-block; width:100px}
.form_btn {display:inline-block; padding:0; margin:20px 0 50px 20px;}


@media screen and (max-width: 767px) {
.txtL {font-size:19px; letter-spacing: 3px; margin: 0 0 20px}
.txtM {font-size:15px; letter-spacing: 0px}
img.btn {height: 30px; width: auto}

#muteBtn {right:10px; top:calc(100vh - 100px);}

/*  CREDO  */
#credo {margin-top: 0; padding-top:0px; margin-bottom: 40px}

    
/*  company  */
#company .company_img { display: none}
#company .company_img_sp { background:#d5e0e8 url("../img/index/company_back.jpg") no-repeat center calc(100vw * -0.42); background-size:100% auto; width: 100%; height:calc(100vw * 0.6); display: inline-block}
#company .company_box {width:100%; display:block; padding:0 15px; box-sizing: border-box}
#company dl {width:100%; margin:0; padding:0px 15px 50px; box-sizing:border-box;background:url(../img/index/back_company_sp.png) no-repeat left bottom; background-size:100% auto; background-attachment:fixed;}
#company dl dt{padding: 15px 0 5px; display:block; width:100%;}
#company dl dd{margin:0; padding: 15px 0 11px 10px; width:100%}

/*  access  */
#access h3 {font-size:22px; margin-bottom:15px}
#access .ac_txt {width:100%; margin:0px 20px 0; padding-top:0px;line-height:1.8em;}
#access .ac_txt a.map_btn {padding:0; margin:5px 0 0;;}
#access .ac_map {width:100%; margin:20px 0 50px; padding: 0 20px}
#access .ac_map img {width:100%; background:#FFF; padding:10px; border:solid 1px #CCC}
#access .ac_map img.map_otsu {margin-bottom:0px;}
	
/*  eagle court  */
#eagle {margin-top:-10px !important; padding-top:10px; margin-bottom:70px;}
#eagle ul {margin: 0 0 40px}
#eagle ul li { display: inline-block; width: 46%; margin:0px 2% 10px; border: solid 1px #CCC; box-shadow: 4px 4px 6px #CCC;}
#eagle ul li.ec_otsu-tyuou1,#eagle ul li.ec_nijo23 {background-size: cover;}
    
/*  works  */
#works { clear: both} 
#works::after {height:50px; }
#works .works_L {width:calc(100% - 30px); margin: 0 15px; height:auto; }
#works .works_R { width:calc(100% - 30px); margin: 0 15px; background: #333 url("../img/index/wr_deve_back2.jpg") no-repeat left bottom; background-size:100% auto;  height:320px; }
#works .works_txt {width: 60%; height:150px; padding:25px 0 0 20px; box-sizing:border-box;}
#works .works_txt2 {background: #FFF url("../img/index/wr_deve_back.png") no-repeat right top; background-size:250px auto; height:150px; padding:25px 0 0 25px; }

#works h3 {font-size: 24px; margin:0; padding: 0; line-height: 1.0em}
#works .works_txt2 h3 {font-size: 28px;}
#works .works_txt p,#works .works_txt2 p {margin:0; padding:5px 0 15px 5px; font-size: 13px; line-height: 1.4em}
#works .works_txt2 p {padding:7px 0 20px 5px}
    
#works .investment,#works .utilization {width: 100%; height:150px; margin-bottom:30px;}
#works .investment { background: url("../img/index/wr_util_back.jpg") no-repeat left center; background-size:calc(100vw * 0.5)}
#works .utilization {background: url("../img/index/wr_inve_back.jpg") no-repeat left bottom;}

/*  contact  */
#contact {background:url("../img/index/contact_back2.jpg") no-repeat left bottom; background-size:100%; clear: both;}
#contact .contact_box {margin:0 0 0 0px; padding: 0px 0 0; height: 500px}
#contact p {text-align:left; margin:0 0px}
#contact .tel {font-size:22px; margin:20px 0 0 20px;}
#contact .tel span {font-size:16px; width:auto}
.form_btn {margin:20px 0 50px 15px}
}