html { font-size: 100%; color:#231815; }
body { margin:0; padding:0;  }
img  { border:0; vertical-align:bottom; }

h1 { margin:0; padding:0; }
h2 { font-size:1.6rem; margin-top:0; }
  h2 div { font-size:1.0rem; }
h3 { font-size:1.6rem; margin-top:0; }
h4 { font-size:1.3rem;  }

.flexBox { display:flex; justify-content: space-between;  }
.maxBox  {  width:100%; max-width:1200px; margin: 0 auto; }
a.btn { border:1px solid #231815; border-radius: 30px; color:#231815; display:block; padding:8px; width:352px; margin:24px auto; text-decoration:none; text-align:center; }


header { width:100%; max-width:1200px; margin:0 auto; padding:12px 0; position:relative; }
header h1 { margin:0; padding:0; }
 ul#hMenu { display:flex; justify-content: right; margin:0: auto; position:absolute; right:0; top:0; bottom:0; align-items: center; }
 ul#hMenu li { list-style-type:none; border-right:1px solid #231815; }
 ul#hMenu li:nth-child(n+4) { border:0; }
 ul#hMenu li a { text-decoration:none; color:#231815; display:block; padding:12px 24px; font-size:1.0rem; }
 ul#hMenu li a:hover { color:#b5b0af; }

#tpMain { background:url("images/tpMain_logo.png") no-repeat 0 0,url("images/tpMain_bk.png") repeat-x center 0; text-align:center; padding:32px 0; background-position: center; background-size: auto 100%; box-sizing:border-box; position:relative; height:calc(100vh - 100px); }
#tpMain h2 { margin:0; padding:0; position:absolute; top:15%; left:0; right:0;}

#tpMain p  {  font-size:2.8vh;  position:absolute; bottom:2%; left:0; right:0; color:#FFF; }
#tpMain p span { line-height:20px; display:block; padding-top:0.1%; font-size:80%; }


#tpConcept { text-align:center; padding:48px 0; }
#tpConcept p { width:1000px; margin:0 auto; display:flex; text-align:left; font-size:1.0rem; }
#tpConcept p div {  }
#tpConcept .maxBox img { max-width:48%; height:auto; }

#tpQuality { background:#00a6a2 url('images/tpQualityBk.png') no-repeat 0 0;  text-align:center; padding:48px 0; color:#FFF;  }
#tpQuality p { width:800px; margin:24px auto; text-align:left; font-size:1.0rem;  }
#tpQuality .maxBox { margin:48px auto;}
#tpQuality .maxBox img { max-width:32%; height:auto; }


#tpQuality a.btn { color:#FFF; border:1px solid #FFF; }

#tpWorks,#tpInformation { padding:48px 0; text-align:center; }
#tpInformation { background-color:#e6e6e6; }
#tpWorks ul,#tpInformation ul { display:flex; justify-content: space-between; width:90%; max-width:1200px; margin:24px auto; padding:0; flex-wrap:wrap; }
#tpWorks ul:after,#tpInformation ul:after { content: ""; display: block; width: 23%; height:0; } 
#tpWorks li,#tpInformation li { list-style-type:none; width:23%; margin:0; padding:0; }
#tpWorks li img,#tpInformation li img { max-width:100%; height:auto; }

.thumb    { overflow:hidden; width:100%; height: 184px; }
.blgTitle { font-size:.9rem; text-align:left; height:5em; }
.blgYMD   { font-size:.8rem; }
.blgCtg   { font-size:.8rem;}

footer { background-color:#0052a4; padding:32px 0; text-align:center; color:#FFF; }
footer ul { display:flex; justify-content: center; margin:0: auto; align-items: center; }
footer li { list-style-type:none; border-right:1px solid #FFF; }
footer li:first-child { border-left:1px solid #FFF; }
footer a  { text-decoration:none; color:#FFF; padding:0 12px; }
footer div,footer p { font-size:0.8rem;  }
footer div img { margin-bottom:8px; }

/* エフェクト */
#tpConcept,#tpQuality,#tpWorks,#tpInformation {
   opacity: 0; 
   transform: translateY(100px); 
   transition: opacity 0.5s, transform 0.5s; 
}

@media screen and (max-width:1200px) {
	html { font-size:90%; }
	header   { width:96%; max-width:auto; }
	.maxBox  { width:90%; max-width:auto; }


	header h1 { padding:0; }
	 ul#hMenu li a { padding:12px 12px; font-size:1.0rem; }

	section { width:100%; margin:0 auto; overflow:hidden; }

	#tpConcept p { width:90%; margin:0 auto; }
	#tpQuality p { width:90%; margin:0 auto; }

}
@media screen and (max-width:878px) {
	html { font-size:80%; }
	#tpConcept p { display:block; }
	#tpConcept p img { display:block; padding:24px 0 0; margin:0 auto; }
}
@media screen and (max-width:848px) {
	html { font-size:80%; }
	ul#hMenu li:nth-child(-n+4) { display:none; }

	#tpWorks ul:after,#tpInformation ul:after { width: 32%; height:0; } 
	#tpWorks li,#tpInformation li { width:32%; padding-bottom:24px; }


}


@media screen and (max-width:620px) {
	h1 img { width:40%; }
	#tpMain h2 img { width:90%; }

	h4 { width:90%; margin:0 auto; }


	#tpWorks ul:after,#tpInformation ul:after { width: 48%; height:0; } 
	#tpWorks li,#tpInformation li { width:48%; }

}
/*

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

	html { font-size: 90%; color:red; }
h3,h4 { color:red; }
	#tpConcept p { display:block; }


}
*/