/**
Theme Name: 平中建板用CSS
Description: 翼友用Wordpressテーマ
Author: Hitoshi Sasaki
Version: 1.00
**/
img { border:0; }
html,body  { margin: 0; padding: 0; font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; overflow-x:hidden;}
header,footer { width:100%; }
header { position:fixed; bottom:0; z-index:100; margin:0; padding:0; /* background-image: url(images/home_bk.jpg); */ background-position: center bottom; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; height:133px;  }

h1 { margin:0; padding:3px 0; height:101px; overflow:hidden; /* background-image: url(images/home_bk.jpg); */ background-position: center bottom; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; }
h1 img { position:absolute; top:0px; left:100px; }
#hContact { position:absolute; top:64px; right:100px; }

footer { background-color:#003984; color:#FFF; font-size:70%; height:34px; position:relative; }
#copyright { position:absolute; bottom:4px; right:32px; }
#btnTop { position:fixed; bottom:48px; right:32px; display:none; }
img { border: 0; vertical-align: bottom; }
.ctsFrame { clear: both; margin: 0 auto; padding:0; position: relative; width:980px; }
.ctsFrame::after { display: table; content: " "; clear: both; }

section { margin:0; padding:0; border-bottom:12px solid #FFF;  }
#home { width: 100vw; height:auto; min-height: 100vh; background-image: url(images/home_bk_w.jpg); background-position: center bottom; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; position:relative; overflow:hidden;  }
#hmHiranaka { background:url("images/hm_tri.png") no-repeat 0 0; width:100%; height:281px; position:relative; }
#hmHiranaka img { position:absolute; top:80px; left:100px; }
#home .ctsFrame { height:100vh; }
#hmConcept { position:absolute; bottom:30%; left:100px;}
#hmCompany { display:none; }

#menu { width:100%; background: linear-gradient(90deg,#003984, #001752); height:26px; font-size:12px; border-bottom:12px solid #FFF; font-size:14px; }
#menu ul { width:980px; margin: 0 auto; }
#menu li { float:left; list-style-type:none; width:12.5%; text-align:center; line-height:26px; }
#menu a { color:#FFF; text-decoration:none; }

h2 { font-size:20px; }
/* ごあいさつ */
#greeting { width: 100vw; position:relative; background-color:#222222; color:#FFF; padding:0 0 64px 0; }
#greeting .ctsFrame { background:url("images/grt_bk.png") no-repeat right top; padding-top:100px; opacity: 0;  }
#greeting h2 { float:left; width:130px; margin:0; padding:0; margin-top:1.5em; }
#greeting p  { margin:1.5em 315px 0 160px; line-height:200%; }
#grtHirano { background: linear-gradient(90deg,#001752, #003984); height:116px; margin-top:32px; }
#grtHirano img { position:absolute; bottom:-100px; right:0; }
#grtHirano .ctsFrame { text-align:center; line-height:116px; background-image:none; padding-top:0;  }
#president { text-align:right; margin-right:315px; }

/* 業務案内 */
#works { width: 100vw; position:relative; background:#222222 url("images/wks_bk.png") no-repeat center top; color:#FFF; padding:100px 0 0 0; }
#works h2 { position:absolute; top:48px; left:0; margin:0; padding:0; }
#works .ctsFrame { height:383px; /* background:url("images/wks_cts_bk.png") no-repeat 0 0; */ padding-bottom:100px; opacity: 0;  }
#wksLogo   { position:absolute; top:32px; right:0; }
#wksCtsImg { position:absolute; bottom:0; right:-79px; }
#wksMImg   { position:absolute; top:32px; right:224px; }
#wksConcept{ position:absolute; top:92px; left:0; font-size:30px; z-index:10; }
#wksFt { position:relative; }
#wksFt .ctsFrame { position:absolute; width:100%; height:140px; bottom:0; left:0; padding:0; }
#wksFtUp { background-color:#333; height:50%; position:absolute; top:0; left:0; width:100%; }
#wksFtDown { background-color:#333; height:100%; position:absolute; bottom:0; left:0; width:100%; }
#horizon1  { position:absolute; top:50%; left:0; width:0; height:3px; background-color:#FFF; z-index:99;}
#wksConBox { width:464px; height:140px; margin:0 auto; background-color:#00A0E9; color:#FFF; text-align:center; padding-top:24px; box-sizing:border-box; display:none; }
#wksConBox div { margin:0 0 12px 0; }
#wksConBox a.frm { display:block; width:203px; height:25px; line-height:24px; text-decoration:none; color:#FFF; margin: 0 auto; display:block; background:url("images/wks_tel_bk.png") no-repeat 0 0; }
/* 会社案内 */
#company { width: 100vw; background: linear-gradient(90deg,#001752, #003984); color:#FFF; padding:0; position:relative; padding:100px 0 0 0; text-align:left; }
#cmpImg { position:absolute; top:0; right:0; }
#company .ctsFrame { padding:48px 0 24px 0; opacity: 0;  }
#company h2 { margin:0; padding:0; position:absolute; top:24px; left:0; }
#company dl { margin:0 0 0 130px; padding:0; line-height:200%; border-bottom:1px solid #FFF;  }
#company dt { clear:both; float:left; width:120px; margin:0; padding:6px 0;  border-top:1px solid #FFF;  }
#company dd { margin: 0 0 0 120px; padding:6px 0; border-top:1px solid #FFF; }
#company dd a { color:#FFF; text-decoration:none; }
#cmpStaff { text-align:right; padding-top:32px; }

#cmpFt { position:relative; }
#cmpFt .ctsFrame { position:absolute; width:100%; height:140px; bottom:0; left:0; overflow:hidden; padding:0; }
#cmpFtUp { background-color:#333; height:50%; position:absolute; top:0; left:0; width:100%; }
#cmpFtDown { background-color:#333; height:100%; position:absolute; bottom:0; left:0; width:100%; }
#horizon2  { position:absolute; top:50%; left:0; width:0; height:3px; background-color:#FFF; z-index:99;}

#cmpConBox { width:464px; height:140px; margin:0 auto; background-color:#00A0E9; color:#FFF; text-align:center; padding-top:24px; box-sizing:border-box; display:none; }
#cmpConBox div { margin:0 0 12px 0; }
#cmpConBox a.frm { display:block; width:203px; height:25px; line-height:24px; text-decoration:none; color:#FFF; margin: 0 auto; display:block; background:url("images/wks_tel_bk.png") no-repeat 0 0; }

/* スタッフ */
#staff { width: 100vw; background: linear-gradient(#001752, #003984); color:#FFF; padding:0; position:relative;  padding:100px 0 0 0;  }
#staff .ctsFrame { position:relative; padding:48px 0 0 0; opacity: 0;  }
#staff h2 { margin:0; padding:0; position:absolute; top:32px; left:0; }
#stfConcept { position:absolute; top:32px; left:274px; }
#stfMain    { margin:0; text-align:center; }

/* 施工事例 */
#example { 
	width: 100vw; 
	background-color:#222222;
	background-image: url("images/ex_bkL.png"),url("images/ex_bk.png");
	background-repeat: no-repeat,no-repeat;
	background-position:top left,calc(50% + 320px) top;
	color:#FFF; padding:0; position:relative;  padding:100px 0 0 0;  }
#exLogo   { position:absolute; top:32px; right:0; }
#example h2 { margin:0; padding:0; }
#example .ctsFrame { position:relative; padding:48px 0 0 0; opacity: 0;  }
#exBkR   { position:absolute; top:0; right:0; }
#example p  { margin:0 0 32px 180px; }
#example h3 { clear:both; margin:0 0 0 180px; }
#example ul { margin:0 0 64px 180px; padding:0; }
#example li { list-style-type:none; float:left; height:auto; margin:0 24px 24px 0; }
ul#exYane last-child { text-align:right; }

#example li h3 { text-align;left; margin:0; }


/* フォトギャラリー */
#gallery { width: 100vw; background:#222222 url("images/gal_bk.png") no-repeat -630px bottom; color:#FFF; padding:0; position:relative;  padding:100px 0 0 0;  }
#gallery h2 { margin:0; padding:0; float:left; }
#gallery .ctsFrame { position:relative; padding:48px 0 0 0; opacity: 0;  }
#galMain { float:right; margin:0 52px 0 0; }
#galList    { clear:both; margin:0 0 0 180px; padding-top:32px; }
#galList ul { clear:both; margin:0; padding:0; overflow:hidden; }
#galList li { list-style-type:none; float:left; margin:0 32px 24px 0; }

/* 問い合わせ */
#contact { width: 100vw; background:#222222 url("images/con_bk.png") no-repeat -300px top; color:#FFF; padding:32px 0 64px 0; position:relative ;   padding:100px 0 80px 0; border:0;}
#contact .ctsFrame { opacity: 0; }
#contact h2 { margin:0 0 32px; padding:0; }
#contact dl { margin:0 auto; padding:0; width:800px;  }
#contact dt { margin:0; padding:0; }
#contact dd { margin:0 0 16px 0; padding:0; }
#contact dd input,#contact dd textarea { background-color:#4E4947; border:1px solid #999999; width:100%; padding:8px; box-sizing:border-box; color:#FFF; }
#contact dd textarea { height:12em; }
#btnBox { width:800px; margin:0 auto; text-align:center; }
#btnBox button { width:160px; background-color:#CCCCCC; border:1px solid #999; }
#msgbox { text-align:center; padding-top:24px; }
#mgbox  { border:1px solid #FFFF00; color:#FFFF00; width:800px; margin:0 auto; }
#errbox { border:1px solid #FF0000; color:#FF0000; width:800px; margin:0 auto; }

#conTel { border-top:1px solid #FFF; border-bottom:1px solid #FFF; width:800px; margin:0 auto; padding:32px 0; text-align:center; font-size:32px; }
#contact a { text-decoration:none; color:#FFF; }


.slicknav_menu { display:none; }

@media(min-width: 479px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}

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


	.slicknav_menu { display:block; }
	.slicknav_menu {
	    width: 100%;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 1000000;
	   background-color: transparent !important;
	}

	.slicknav_menu li { background-color: rgba(0,0,0,0.9) !important; }
	.menu_var_scroll ul {
	    height: 100% !important;
	    overflow: auto !important;


	}

	header { display:none; }
	h1 {  }
	#hContact { display:block; top:0; left:0; z-index:99; }
	#hmCompany { display:block; position:absolute; left:24px; bottom:0; width:100%; }
	#hmCompany img { margin-bottom:3px; }
	#hTel { display:inline-block; position:absolute; right:32px; bottom:0; }
	#menu { display:none; }

	#home {  }
	#hmHiranaka img { width:60%; height:auto; left:24px; }
	#hmConcept { width:80%; height:auto; top:50%; left:24px;}

	.ctsFrame { width:90%; margin:0 auto; }

/* ごあいさつ */
	#greeting { padding:0; }
	#greeting .ctsFrame { padding:24px 0 0 0; }
	#greeting h2 { float:none; margin:0 auto; }
	#greeting p  { margin:1.5em auto;  } 

	#president { text-align:right; margin-right:12px; }

	#grtHirano { height:auto; margin-top:12px; }
	#grtHirano img { width:100%; height:auto; position:static; }

/* 業務案内 */
	#works	  { padding:24px 0 0 0; }
	#works h2 { position:static; margin-bottom:24px; }
	#works .ctsFrame { padding-bottom:100px; }
	#wksLogo  { display:none; }

	#wksMImg   { position:static; width:100%; height:auto; }
	#wksConcept{ position:static; margin-bottom:24px; }
	#wksConcept img { width:60%; height:auto;}

	#wksFt { display:none; }


/* 会社案内 */
	#company { padding:24px 0 0 0; }
	#cmpImg  { display:none; }
	#company .ctsFrame { padding:0; }
	#company h2 { position:static; }
	#company dl { margin:0; }
	#cmpStaff img { width:100%; height: auto; }
	#cmpFt { display:none; }

/* スタッフ */
	#staff { padding:24px 0 0 0;  }
	#staff .ctsFrame { padding:0 0 0 0; }
	#staff h2 { margin:0; padding:0; }
	#stfConcept { position:absolute; top:0px; left:35%; width:auto; height:100px; }
	#stfMain    { margin-top:48px; text-align:center; }
	#stfMain img { width:100%; height:auto; }

/* 施工事例 */
	#example { padding:24px 0 0 0;  }
	#exLogo   { display:none; }
	#example h2 { margin:0 0 24px 0; padding:0; }
	#example .ctsFrame { padding:0; }

	#example p  { margin:0 0 24px 0; }
	#example h3 { margin:0;  }
	#example ul { margin:0 0 64px 0; height:auto; }
	#example li { float:none; height:auto; margin:0 0 14px 0; text-align:center; }

	#example li h3 { margin:0; text-align:left; }
	#example li img { width:100%; height:auto; }

/* フォトギャラリー */
	#gallery { padding:24px 0 0 0;  }
	#gallery h2 { margin:0; float:none; }
	#gallery .ctsFrame { padding:0; }

	#galMain { float:none; margin:0; width:100%; height:auto;  }
	#galList    { clear:both; margin:0; padding-top:32px; }
	#galList ul { clear:both; margin:0; padding:0; overflow:hidden; }
	#galList li { float:none; margin:0 0 12px 0; text-align:center; }


/* 問い合わせ */
	#contact { padding:24px 0 180px 0; }
	#contact dl { width:100%;  }
	#btnBox { width:100%; }


	#conTel { width:100%; }

}