@charset "utf-8";

/* ====================================================================== */
/* ====================================================================== */
/* ---------------------------------------------------------------------- */
/* 1450px */
@media screen and (max-width:1450px){
	
	
	/* ====================================================== */
	/* 1.home ----------------------------------------------- */
	#home header{
		background: url(../images/home/back_home.png) no-repeat center bottom;
		border-bottom: 3px solid #EA5710;
	}
	
	#home_logo figure{
		padding: 113px 10% 0 10%;
		box-sizing: border-box;
	}
	.hhome_copy1{
		padding: 283px 10% 140px 10%;
	}
	
	
}





/* ====================================================================== */
/* ---------------------------------------------------------------------- */
/* 1030 */
@media screen and (max-width:1030px){

	/* works */
	#works .contents h2{
		width: 90%;
	}
	.page_copy{
		width: 90%;
	}
	.works_wrap{
		width: 90%;
	}
	.works_wrap article{
		width: 29.7%;
		padding-right: 2.5%;
		margin: 0 2.5% 4.5% 0;
	}
	.works_wrap article:nth-child(3n){
		margin-right: 0;
		padding-right: 0;
	}
	.works_wrap article:nth-child(3n+1){
		clear: both;
	}
}



/* ====================================================================== */
/* ====================================================================== */
/* ---------------------------------------------------------------------- */
/* 1000 */
@media screen and (max-width:1000px){
	#gnav li a{
		padding: 0 80px;
		font-size: 21px;
	}




	/* ====================================================== */
	/* 2.concept -------------------------------------------- */
	#concept .contents h1{
	}
	#concept .contents h2{
		font-size: 21px;
		margin: 0 0 65px 0;
		padding: 0 5%;
	}
	#concept .contents p{
		font-size: 16px;
		line-height: 2.5em;
		padding: 0 5%;
	}
}




/* ====================================================================== */
/* ====================================================================== */
/* ---------------------------------------------------------------------- */
/* 980 */
@media screen and (max-width:980px){
	/* header */
	#header_base .snsnav li.hnav1{
		padding: 3px 15px 0 0;
	}
	#header_base .snsnav li.hnav2{
		padding: 3px 25px 0 0;
	}
	#header_base .snsnav li.hnav3{
		width: 142px;
		padding: 0 25px 0 0;
	}
	
	
	
	/* ====================================================== */
	/* 1.home ----------------------------------------------- */
	.home_nav li a{
		padding: 80px 0;
	}
	#home_logo h1{
		padding-left: 10%;
	}
	
	
	
	/* ====================================================== */
	/* 3.aboutus -------------------------------------------- */
	.about_wrap1,
	.about_wrap2{
		width: 700px;
	}
	.about_wrap1 .dleft{
		width: 360px;
	}
	.about_wrap1 .dleft h2{
		font-size: 24px;
		margin-bottom: 20px;
	}
	.about_wrap1 .dleft p{
		font-size: 14px;
	}
	.about_wrap1 .dleft .job{
		margin-bottom: 25px;
	}
	.about_wrap1 .dright{
		width: 300px;
		float: right;
	}
	.about_wrap2 table th,
	.about_wrap2 table td{
		padding: 0 0 20px 0;
		font-size: 16px;
	}
}




/* ====================================================================== */
/* ====================================================================== */
/* ---------------------------------------------------------------------- */
/* 820 */
@media screen and (max-width:820px){
	/* ====================================================== */
	/* 4.contact -------------------------------------------- */
	.contact_wrap{
		padding: 0 5%;
		width: 680px;
		box-sizing: border-box;
	}
}





/* ====================================================================== */
/* ====================================================================== */
/* ---------------------------------------------------------------------- */
/* 730 */
@media screen and (max-width:730px){
	#gnav li a{
		padding: 0 40px;
		font-size: 21px;
	}
	
	#gnav{
		display: block;
	}
	
	
	/* ====================================================== */
	/* 3.aboutus -------------------------------------------- */
	.about_wrap1,
	.about_wrap2{
		width: 100%;
		padding: 5%;
		box-sizing: border-box;
	}
	.about_wrap1 .dleft{
		width: 100%;
		float: none;
		padding-bottom: 2em;
	}
	.about_wrap1 .dleft h2{
		font-size: 24px;
		margin-bottom: 20px;
	}
	.about_wrap1 .dleft p{
		font-size: 14px;
	}
	.about_wrap1 .dleft .job{
		margin-bottom: 25px;
	}
	.about_wrap2{
		padding-top: 4em;
	}
	.about_wrap1 .dright{
		width: 100%;
		float: none;
		padding-bottom: 4em;
	}
	.about_wrap2 table th,
	.about_wrap2 table td{
		padding: 0 0 20px 0;
		font-size: 16px;
		font-weight: normal;
	}
	.about_wrap2 table th{
		width: 115px;
	}
	
	/* works */
	.works_wrap article{
		width: 48%;
		padding-right: 0;
		margin: 0 0 6% 0;
		border: none;
	}
	.works_wrap article:nth-child(3n){
		padding-right: 0;
		margin: 0 0 6% 0;
	}
	.works_wrap article:nth-child(3n+1){
		clear: none;
	}
	.works_wrap article:nth-child(even){
		float: right;
	}
	.works_wrap article:nth-child(2n+1){
		clear: both;
	}
	.works_wrap article figure{
		margin-bottom: 10px;
	}
	.works_wrap article h3{
		font-size: 14px;
		margin-bottom: 10px;
	}
	.works_wrap article p{
		font-size: 13px;
	}
	
}





/* ====================================================================== */
/* ====================================================================== */
/* ---------------------------------------------------------------------- */
/* 700 */
@media screen and (max-width:700px){
	
	/* ====================================================== */
	/* 1.home ----------------------------------------------- */
	.home_nav li a{
		padding: 50px 0;
		font-size: 21px;
	}
	
	/* ====================================================== */
	/* 4.contact -------------------------------------------- */
	.contact_wrap{
		width: 100%;
	}
}





/* ====================================================================== */
/* ====================================================================== */
/* ---------------------------------------------------------------------- */
/* 660 */
@media screen and (max-width:660px){
	
	
	/* ====================================================== */
	/* 1.home ----------------------------------------------- */
	#home header{
		background: none;
		padding: 150px 0 0 0;
	}
	#home #header_base{
		padding-top: 100px 0 0 0;
	}
	#home #header_base h1{
		display: block;
		padding: 20px 0 0 20px;
		width: 45%;
	}
	
	
	#gnav{
		display: none;
	}
	
	#close_btn{
		display: block;
		cursor: pointer;
		position: absolute;
		margin: 0;
		float: left;
		right: 20px;
		top: 20px;
		padding: 0;
		text-align: left;
		
		font-size: 25px;
		color: #EA5710;
		background: #FFF;
		
	}
	
	#spnav{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background:rgba(255,255,255,0.95);
		z-index: 9999;
	}
	#spnav h2{
		display: block;
		padding: 20px 0 20px 20px;
		width: 45%;
		line-height: 0;
		font-size: 0;
		text-align: left;
	}
	#spnav ul{
		text-align: inherit;
		margin-bottom:0;
		width: 100%;
		display: block;
		border-top: 1px solid #EA5710;
	}
	#spnav li{
		display: block;
		padding: 0;
		width: 100%;
	}
	#spnav li a{
		width: 100%;
		float: none;
		display: block;
		padding: 10px 0;
		text-align: center;
		line-height: 2em;
		font-size: 21px;
		border-right: none;
		color: #EA5710;
		text-decoration: none;
		border-bottom: 1px solid #EA5710;
	}
	#spnav li a:hover{
		color: #000;
	}
	#spnav li:nth-child(3) a{
		border-right: none;
	}

	
	#home_logo{
		width: 100%;
		float: none;
	}
	#home_logo {
		background: url(../images/home/backsp_head1.png) center bottom no-repeat;
		background-size: cover;
	}
	#home_logo h1{
		display: none;
	}
	#home_logo figure{
		padding: 50px 10% 50px 10%;
		text-align: center;
	}
	#home_copy{
		width: 100%;
		float: none;
		background: url(../images/home/backsp_head2.png) center bottom no-repeat;
		background-size: cover;
	}
	.hhome_copy1{
		padding: 50px 10%;
	}
	.hhome_copy1.pcv{
		display: none;
	}
	.hhome_copy1.spv{
		display: block;
		padding: 50px 10%;
		text-align: left;
		line-height: 2em;
		font-size: 15px;
		font-weight: bold;
	}
	
	
	.contents{
		padding-top: 80px;
	}
	
	/* ====================================================== */
	/* 2.concept -------------------------------------------- */
	#concept .contents h1{
		margin: 0 0 40px 0;
	}
	#concept .contents .pcv{
		display: none;
	}
	#concept .contents .spv{
		display: block;
	}
	#concept .contents h2{
		font-size: 18px;
		margin: 0 0 50px 0;
		line-height: 2.0em;
		text-align: left;
	}
	#concept .contents p{
		font-size: 14px;
		line-height: 2em;
		text-align: left;
	}
	
	/* works */
	.page_copy{
		font-size: 16px;
		text-align: left;
	}
	.page_copy br{
		display: none;
	}
	
	#y2020 #header_base{
		border-bottom: none;
	}
	#y2020 .contents{
		padding-top: 0;
	}
	#y2020 #gnav ul{
		margin-bottom: 0;
	}
	#y2020 .pcv{
		display: none;
	}
	#y2020 .spv{
		display: block;
	}

	
}





/* ====================================================================== */
/* ====================================================================== */
/* ---------------------------------------------------------------------- */
/* 620px */
@media screen and (max-width:620px){
	
	.spv{
		display: block;
	}
	
	#spnav_btn{
		display: block;
	}
	
	#header_base{
		position: relative;
		padding-bottom: 15px;
	}
	#header_base h1{
		float: none;
		display: block;
		padding: 20px 0 0 20px;
		width: 45%;
	}
	#spnav_btn{
		position: absolute;
		margin: 0;
		float: none;
		right: 20px;
		top: 20px;
		padding: 0;
	}
	#header_base .snsnav{
		float: none;
		font-size: 0;
		padding-top: 30px;
		text-align: center;
	}
	#header_base .snsnav li{
		display: inline-block;
		padding: 0 0 0 20px;
	}
	#header_base .snsnav li.hnav3{
		padding-right: 15px;
	}
	#header_base .snsnav li.hnav2{
		padding-right: 15px;
	}
	
	/* ====================================================== */
	/* 1.home ----------------------------------------------- */
	#home #header_base{
		position: relative;
	}
	#home header{
		padding-top: 0;
	}
	#home .contents{
		padding-top: 0;
	}
	.home_nav{
		border-bottom: none;
	}
	.home_nav ul{
		list-style: none;
	}
	.home_nav li{
		float: none;
		width: 100%;
		border-right: none;
	}
	.home_nav li:nth-child(3){
		width: 100%;
	}
	.home_nav li a{
		display: block;
		width: 100%;
		padding: 15px 0;
		border-right: none;
		color: #EA5710;
		font-size: 18px;
		border-bottom: 1px solid #EA5710;
	}
	.home_nav li:nth-child(3) a{
		border-right: none;
	}
	.home_nav li a:hover{
		background: #EA5710;
		color: #FFF;
	}

	.home_about{
		background: url(../images/home/back_corp.png) no-repeat center center;
		background-size: cover;
		padding: 50px 0 30px;
		text-align: center;
	}
	.home_about h2{
		line-height: 0;
		font-size: 0;
		padding: 0 0 50px 0;
	}
	.home_about h3{
		color: #FFF;
		font-size: 24px;
		line-height: 1.2em;
		padding: 0 0 20px 0;
	}
	.home_about address{
		color: #FFF;
		font-size: 18px;
		margin: 0;
		font-style: normal;
		line-height: 2em;
	}
	
	.home_about h2{
		width: 55%;
		margin: 0 auto;
		padding: 0 0 40px 0;
	}
	.home_about h3{
		font-size: 18px;
	}
	.home_about address{
		font-size: 15px;
	}
	
	/* ====================================================== */
	/* 3.aboutus -------------------------------------------- */
	.about_wrap2 table th,
	.about_wrap2 table td{
		display: list-item;
		list-style: none;
		padding: 0;
		margin: 0;
		font-size: 14px;
		vertical-align: top;
		text-align: left;
		line-height: 1.6em;
	}
	.about_wrap2 table th{
		font-size: 16px;
	}
	.about_wrap2 table td{
		margin-bottom: 2em;
	}
	.about_wrap2 table td p{
		margin-bottom: 0.5em;
		line-height: 1.6em;
	}
	
	
	#concept .contents h1 img,
	#aboutus .contents h1 img,
	#contact .contents h1 img{
		height: 50px;
	}
	
	

	/* ====================================================== */
	/* 4.contact -------------------------------------------- */
	.contact_wrap p{
		font-size: 14px;
	}
	.contact_wrap p.pb100{
		padding-bottom: 50px;
	}
	.contact_wrap textarea,
	.contact_wrap input[type=text]{
		font-size: 14px;
		padding: 5px;
	}
	.contact_wrap h4{
		font-size: 16px;
	}
	.contact_wrap .fm1{
		width: 80px;
		margin: 0 15px 0 0;
	}
	.contact_wrap textarea,
	.contact_wrap .fm2{
		width: 100%;
	}
	.contact_wrap .fm3{
		width: 100px;
	}
	.contact_wrap .fm4{
		width: 50px;
	}
	#addsearch{
		padding: 6px 0.5em;
		font-size: 16px;
		margin: 0 0 0 0.5em;
	}
	#addsearch:hover{
		background: #FFF;
	}
	.contact_wrap input[type=submit]{
		padding: 10px 1em;
		font-size: 16px;
		margin-bottom: 50px;
	}
	

}