@charset "utf-8";


/* home =============================================================
======================================================================== */


/* slider
=========================================================================================== */

	.p-sliderBase {
		overflow: hidden;
		width: 100%;
		}
	.p-slider {
		position: relative;
		overflow: hidden;
		}
	@media print, screen and (min-width: 768px) {
 		.p-sliderBase {
			position: fixed ;
			top: 0;
			left: 0;
			}
		.p-slider {
			width: 1920px;
			margin-left: -20%;
			margin-left: -webkit-calc( (100% - 1920px) / 2 );
			margin-left: -moz-calc( (100% - 1920px) / 2 );
			margin-left: calc( (100% - 1920px) / 2 );
			}
	}
	@media (max-width: 767px) {
 		.p-sliderBase {
			margin-top: 50px;
			}
		.p-slider::after {
			position: absolute;
			content: url(../img/common/bg_shadowbottom.png);
			left: 50%;
			margin-left: -668px;
			top: 0px;
			line-height: 0;
			}
	}



	/* logo on slider */
	@media print, screen and (min-width: 768px) {
		.p-sliderMark {
			height: 800px;
			position: relative;
			}
			.p-sliderMark img {
				position: absolute;
				top: 50px;
				left: 50px;
				}
	}
	@media (max-width: 767px) {
		.p-sliderMark {
			display: none;
			}
	}
	
	/* フェードイン */
		.p-delayLoad {
			-webkit-animation: delayLoad 5.0s forwards;
			animation: delayLoad 4.0s forwards;
			}
				@-webkit-keyframes delayLoad {
					0% { opacity: 0; }
					100% { opacity: 1; }
				}	
				@keyframes delayLoad {
					0% { opacity: 0; }
					100% { opacity: 1; }
				}




/* company
=========================================================================================== */

	.p-companyBase {
		background: url(../img/home/bg_company.jpg) center top;
		}

	@media print, screen and (min-width: 768px) {
		.p-companyBase {
			height: 559px;
			}
		.p-companyPh {
			float: right;
			width: 450px;
			margin-top: 45px;
			}
		.p-companyTxt {
			float: left;
			width: 540px;
			font-size: 1.8rem;
			line-height: 2;
			font-weight: bold;
			margin-top: 160px;
			}
	}
	@media (max-width: 767px) {
		.p-companyBase {
			background-size: auto 100%;
			padding: 40px 0;
			}
		.p-companyPh {
			width: 70%;
			max-width: 450px;
			margin: 0 auto 20px auto;
			}
		.p-companyTxt {
			line-height: 1.8;
			font-weight: bold;
			text-align: center;
			}
	}




/* works
=========================================================================================== */

	.p-worksBase {
		background: url(../img/home/bg_works.jpg) center top;
		text-align: center;
		box-sizing: border-box;
		}
	.p-worksTxt {
		background-color: rgba(255,255,255,0.7);
		box-sizing: border-box;
		padding: 20px;
		font-weight: bold;
		}
		.p-worksTxt p {
			text-align: left;
			}
	@media print, screen and (min-width: 768px) {
		.p-worksBase {
			height: 655px;
			padding-top: 75px;
			}
		.p-worksTxt {
			height: 305px;
			line-height: 2;
			}
	}
	@media (max-width: 767px) {
		.p-worksBase {
			background-size: auto 100%;
			padding: 40px 0;
			}
		.p-worksTxt {
			line-height: 1.8;
			}
	}




/* examples
=========================================================================================== */

	.p-examplesBase {
		background: url(../img/home/bg_examples.jpg) center top;
		text-align: center;
		box-sizing: border-box;
		}
	@media print, screen and (min-width: 768px) {
		.p-examplesBase {
			height: 731px;
			padding-top: 75px;
			}
	}
	@media (max-width: 767px) {
		.p-examplesBase {
			background-size: auto 100%;
			padding: 40px 0;
			}
	}



/* google maps
=========================================================================================== */
	/* google maps */
	.p-gmap {
		position: relative;
		}
		 
		.p-gmap iframe,
		.p-gmap object,
		.p-gmap embed {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}

	@media print, screen and (min-width: 768px) {
		.p-gmap {
			height: 500px;
			}
	}
	@media (max-width: 767px) {
		.p-gmap {
			padding-bottom: 56.25%;
			padding-top: 30px;
			height: 0;
			overflow: hidden;
			}
	}


