/* CSS Document */
* {	margin:0px;	padding:0px;}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
/*
=============================================================================================================================
初期値リセット
=============================================================================================================================
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}
ol, ul {list-style: none;}
caption{font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
figure{ margin:0; padding:0;}

body{
	font-size:16px;
	line-height:1.6em;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
color:#3f4042;
-webkit-text-size-adjust: none;
}
a { text-decoration:none; color:#252525;}

body section{ width:100%;}
/*
#p-index a,
#p-index a:hover img {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;}
*/

header:after, section:after, aside:after, footer:after{ content: "";display:table; clear:both;}
/*img { max-width:100%;}*/

/**** 番号 ****/
a[href^="tel:"] { pointer-events:none;}
@media only screen and (max-width: 840px){a[href^="tel:"] { pointer-events:auto;}	}

/*ヘッダー
--------------------------------------*/

header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:86px;
	z-index:10000;
	}

header div{
	padding:0 30px;
	margin:0 auto;
	position:relative;
	}

header h1{
	padding-top:40px;
	width:390px;
	position:absolute;
	z-index:60000;
	}

.title_a{
	display:block;
	width:390px;
	height:48px;
	}

@media only screen and (max-width: 1229px) {
	
	header{
	position:absolute;
	background:none;
	height:auto;
	}

header div{ width:100%; padding:0;}
header h1{ display:none;}

}

/* スライドエリア
------------------------------------------------------------*/

.contena, .contena-n{
	width:100%;
	margin:0;
	padding:0;
	position:relative;
	z-index:10000;
	}

.contena{ height:1000px; background-color:#000;}


.slide-box { background-color:#CA8C17}

.sl-scrn{
	width:100%;
	position:absolute;
	z-index:500;
	top:500px;
	text-align:center;
	}

.slide{
	max-width:100%;
	height:738px;
	margin:0 auto;
	}

/*
.sl-scrn{
	width:100%;
	height:812px;
	position:absolute;
	*background: rgba(0,51,102,0.43);
	z-index:500;
	background-size:contain;
	}


.slide{
	width:100%;
	height:812px;
	margin:0;
	}

.sl-scrn h2{
	width:1100px;
	margin:0 auto;
	padding-top:440px;
	}
*/


@media only screen and (max-width: 1300px) {
	
	.slide{
	max-width:100%;
	height:0;
	padding-top:55.5%;
	}
	
	.contena{ height:0; padding-top:55.5%;}
	
}


@media only screen and (max-width: 1230px) {
	video { display:none}
	.slide-box { background-color: #FFF}
    .slide{ height:0 !important;
	padding-top: calc(720 / 1280 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background-size:contain;background-position:center bottom; background-repeat:no-repeat;}
	
	.sl-scrn{ top:200px; text-align:center;}
	.sl-scrn img{ width:50%;}
	

}

@media only screen and (max-width: 600px) {
	
	.slide{ padding-top:66.66%;}
	/*.sl-scrn h2 img{ width:80.81%;}*/
	
}



/* トップページコンテンツ
------------------------------------------------------------*/

/*創友建設工業について*/

.about{ background:url(../img/road1.gif) no-repeat left top, url(../img/road2.gif) no-repeat right bottom; padding:160px 0;}
.about article{ width:1200px; margin:0 auto;}
.about article figure{ width:43.6%; float:right;}
.about article figure img{ width:100%;}
.about article div{ width:54.4%; float:left;}

.about article div p:first-of-type{ font-weight:900; font-size:3em; color:#14A678; margin-bottom:0; font-family: 'Noto Sans JP', sans-serif; line-height:1.6em;}
.about article div h2{ font-size:1.2em; margin-bottom:1.5em;}

.viewmore1{ font-size:1.1em; font-weight:bold; color:#FFF; padding:1em 4em; display:table; float:right; position:relative; background-color:#14A678; margin-top:2em;}
.viewmore1:after{ content:'＞'; position:absolute; right:20px; top:30%;}
.viewmore1:hover{ color:#FFF; background:#066;}


@media only screen and (max-width: 1300px) {
	
	.about{ background:none; padding:160px 0;}
	.about article{ width:96%;}
	
	}

@media only screen and (max-width: 600px) {
	
	.about{ font-size:.85em; padding:4em 0;}
	.about article figure{ width:90%; float:none; margin:0 auto;}
    .about article div{ width:100%; float:none; margin-bottom:1em;}
	
	}
	

/*業務案内*/

.works{ background:url(../img/tb_2.jpg) no-repeat top left/100%; padding-top:82px;}
.works article:first-of-type{ width:100%; color:#FFF; text-align:center; margin-bottom:2em;}
.works article:first-of-type p{ font-weight:900; font-size:3em; margin-bottom:0; line-height:1.6em;}
.works article:first-of-type h2{ font-size:1.2em; margin-bottom:3em;}

.works article:nth-of-type(2){ width:96%; margin:0 auto; display:flex; flex-wrap:wrap;}
.works article:nth-of-type(2) div{ width:23.5%; color:#FFF; font-family: 'Noto Sans JP', sans-serif; padding-bottom:.8em; background:#14A678; font-weight:700;}
.works article:nth-of-type(2) div:nth-of-type(n+2){ margin-left:2%;}

.works article:nth-of-type(2) div figure{ height:0; padding-top:60%; width:100%; margin-bottom:1em;}
.works article:nth-of-type(2) div:nth-of-type(1) figure{ background:url(../img/t_mp1.jpg) no-repeat 50% 50%/cover;}
.works article:nth-of-type(2) div:nth-of-type(2) figure{ background:url(../img/t_mp2.jpg) no-repeat 50% 50%/cover;}
.works article:nth-of-type(2) div:nth-of-type(3) figure{ background:url(../img/t_mp3.jpg) no-repeat 50% 50%/cover;}
.works article:nth-of-type(2) div:nth-of-type(4) figure{ background:url(../img/t_mp4.jpg) no-repeat 50% 50%/cover;}

.works article:nth-of-type(2) div h3{ width:92%; margin:0 auto 1em; font-size:1.1em;}
.works article:nth-of-type(2) div a{ color:#14A678; background:#FFF; padding:.8em 3em .8em 2em; display:table; margin:0 auto; position:relative;}
.works article:nth-of-type(2) div a:after{ content:'＞'; position:absolute; right:15px; top:25%; font-size:.9em;}
.works article:nth-of-type(2) div a:hover{ color:#FFF; background:#066;}

@media only screen and (max-width: 1300px) {
	
	.works{ font-size:.85em;}
	.works article:nth-of-type(2) div figure{ padding-top:40%;}
	.works article:nth-of-type(2){ width:98%;}
	.works article:nth-of-type(2) div{ width:49.5%; margin-bottom:10px;}
	.works article:nth-of-type(2) div:nth-of-type(even){ margin-left:1%;}
	.works article:nth-of-type(2) div:nth-of-type(3){ margin-left:0;}
	
	
	}

@media only screen and (max-width: 900px) {
	
	.works{ background:url(../img/tb_2.jpg) no-repeat top left/100%; padding-top:40px;}
	
	}


@media only screen and (max-width: 600px) {
	
	
	.works{ background:url(../img/tb_2.jpg) no-repeat top left/100% 15%;}
	.works article:first-of-type h2{ margin-bottom:100px;}
	
	.works article:nth-of-type(2) div{ width:100%;}
	.works article:nth-of-type(2) div:nth-of-type(even){ margin-left:0;}
	
	}




/*採用情報*/

.recruit{ padding:160px 0;}
.recruit article{ width:1200px; margin:0 auto;}
.recruit article figure{ width:43.6%; float:left; margin-bottom:1em;}
.recruit article figure img{ width:100%;}
.recruit article div{ width:54.4%; float:right;}

.recruit article div p:first-of-type{ font-weight:900; font-size:3em; color:#14A678; margin-bottom:0; font-family: 'Noto Sans JP', sans-serif; line-height:1.6em;}
.recruit article div h2{ font-size:1.2em; margin-bottom:1.5em;}

@media only screen and (max-width: 1300px) {
	
	.recruit article{ width:96%;}
	

	}

@media only screen and (max-width: 600px) {
	
	.recruit{ font-size:.85em; padding:4em 0;}
	.recruit article figure{ width:90%; float:none; margin:0 auto;}
    .recruit article div{ width:100%; float:none; margin-bottom:1em;}
	
	}


/*お問い合わせ*/

.contact{ background:url(../img/tb_1.jpg) no-repeat 50% 50%/cover; color:#FFF; padding:90px 0;}
.contact article{ width:880px; margin:0 auto; text-align:center;}
.contact article p:first-of-type{ font-weight:900; font-size:3em; color:#FFF; margin-bottom:0; font-family: 'Noto Sans JP', sans-serif; line-height:1.6em;}
.contact article h2{ font-size:1.2em; margin-bottom:1.5em;}
.contact article p:nth-of-type(2){ margin-bottom:1em;}

.contact article div{ display:flex; flex-wrap:wrap;}
.contact article div a{ width:49%; display:block;}

.contact article div a:first-of-type{ background:url(../img/t_tel.png) no-repeat 0 50%; padding:.8em 0 .8em 10%; color:#FFF; font-family: 'Noto Sans JP', sans-serif; font-weight:bold; font-size:2.8em; text-align:left;}
.contact article div a:nth-of-type(2){ background: url(../img/t_mail.png) no-repeat 4% 50%; padding:1.4em 0 1.4em 10%; color:#FFF; font-family: 'Noto Sans JP', sans-serif; font-weight:bold; font-size:1.5em; border:1px solid #FFF; text-align:left;}
.contact article div a:nth-of-type(2):hover{ background: url(../img/t_mail.png) no-repeat 4% 50%, #333;}

@media only screen and (max-width: 960px) {
	
	.contact article{ width:96%;}
		
	}

@media only screen and (max-width: 900px) {
	
	.contact article div a{ width:100%; margin-bottom:10px;}
	.contact article div a:first-of-type{ background:url(../img/t_tel.png) no-repeat 0 50%; padding:.8em 0 .8em 14%;}
	.contact article div a:nth-of-type(2){ background: url(../img/t_mail.png) no-repeat 2% 50%; padding:1.4em 0 1.4em 14%;}
		
	}

@media only screen and (max-width: 600px) {
	
	.contact{ font-size:.85em;}
	.contact article div a:first-of-type{ padding:.8em 0 .8em 16%; font-size:2em;}
	.contact article div a:nth-of-type(2){ padding:1.4em 0 1.4em 16%; font-size:1.2em;}
	
	}

/*アクセスマップ*/

.google-maps {
position: relative;
padding-bottom: 30%; // これが縦横比
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

@media only screen and (max-width: 600px) {
	
	.google-maps { padding-bottom: 60%;}
	
	}

/*フッター*/

footer{ text-align:center; padding:4em 0 2em;}
footer figure{ width:100%; margin-bottom:1em;}
footer p{ font-size:.85em; margin-bottom:2em;}
footer p a{ display:block; margin-bottom:1em;}
footer p:last-of-type{ font-size:.75em; margin-bottom:0;}