@charset "utf-8";

/*****************************************************************************
 layout
 *****************************************************************************/
.lower{width:1080px;max-width:100%;margin:0 auto;padding:0 15px 80px;position:relative;}
.frame{width:900px;max-width:100%;margin:0 auto;padding:0 15px 80px;position:relative;}
.frame2{width:800px;max-width:100%;margin:0 auto;padding:0 15px 80px;position:relative;}
.inner{padding:0 0 60px;}
.red{color:red;}

.pankuzu {padding:20px 15px;font-size:13px;}
.pankuzu span {margin:0 10px;}
.pankuzu a {color:#333;}
.pankuzu a:hover {opacity:0.7;}

.titleArea{width:100%;height:200px;display:flex;flex-flow:column wrap;justify-content:center;align-items:center;position:relative;background:#075a82;}
.titleArea_works{width:100%;height:200px;display:flex;flex-flow:column wrap;justify-content:center;align-items:center;position:relative;background:#7e6b59;}
.titleArea h2,
.titleArea_works h2{color:#fff;font-size:40px;font-weight:400;font-family:"poppins",sans-serif;text-align:center;} 
.titleArea h2 small,
.titleArea_works h2 small{display:block;margin:20px auto 0;font-size:15px;font-weight:600;font-family: "游ゴシック", YuGothic, "Poppins", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana,  sans-serif;letter-spacing:2px;}

.top_ttl{color:#333;font-size:48px;font-weight:400;font-family:"poppins",sans-serif;text-align:center;margin-bottom:40px;}
.top_ttl small{display:block;color:#555;font-size:14px;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-weight:600;letter-spacing:5px;margin-top:15px;}

.ttl_border{color:#095f83;border-bottom:5px solid #ddd;font-size:30px;font-weight:500;line-height:1.2;letter-spacing:0.1em;margin:0.75em 0 30px;padding:10px 0;	font-family: "Poppins", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana,  sans-serif;}

.lower p,.frame p {letter-spacing:0.05em;line-height:1.8;padding:0 0 30px;font-size:14px;}

/*****************************************************************************
 contact
 *****************************************************************************/
.contact p span {color:#095f83;}
.inq_table{width:100%;margin-bottom:30px;}
.inq_table th {text-align:left;color:#333;vertical-align:middle;padding:20px 15px;width:33%;}
.inq_table th span {float:right;color:#fff;background:#be0f18;background:#ff8500;font-size:11px;padding:3px 5px;border-radius:5px;}
.inq_table td {padding:10px 15px;vertical-align:middle;color:#333;line-height:1.8;}
.inq_table td p {padding:0;}
.inq_table label{cursor:pointer;position:relative;}
.inq_table textarea{height:200px;}
.inq_table input[type="text"],
.inq_table input[type="email"],
.inq_table textarea{padding:5px;border:3px solid #eee;cursor:pointer;}
.cont01 {width:96%;height:30px;}
.cont02 {width:96%;height:180px;}
.cont03 {width:60%;}
.cont04 {width:40%;}
.cont05 {width:10%;}
.btn_form{text-align:center;}
.btn_form input[type="submit"]{width:280px;padding:15px 20px;color:#fff;border:none;background:#be0f18;cursor:pointer;letter-spacing:3px;font-size:1.2rem;}
.btn_form input[type="submit"]:hover{opacity:0.7;}
.btn_send {border:none;background:#be0f18;cursor:pointer;padding:12px;font-size:16px;color:#fff;font-weight: bold; width:200px;}
.btn_send:hover {opacity:0.8;}
.btn_reset {background:#ccc;margin-left:20px;}
.btn_reset:hover {background:#888;}
.btn_back {background:#ccc;}
.btn_back:hover {background:#aaa;}
.send {margin:30px auto 10px;width:432px;}
.back {margin:50px auto;width:224px;}

/*****************************************************************************
 company
 *****************************************************************************/
.com_table{width:100%;margin-bottom:30px;}
.com_table th {text-align:left;color:#333;background:#eee;font-weight:400;vertical-align:middle;padding:20px 15px;width:33%;}
.com_table th span {float:right;color:#fff;background:#be0f18;font-size:11px;padding:3px 5px;border-radius:5px;}
.com_table td {padding:10px 15px;vertical-align:middle;color:#333;line-height:1.8;}
.com_table a{color:#095f83;text-decoration:none;}
.com_table a:hover{opacity:0.7;text-decoration:underline;}
.company ul.service li{font-size:14px;line-height:1.6;padding:7px 15px;display:flex;align-items:baseline;}
.company ul.service li:before{content:"\f101";font-family:FontAwesome;margin-right:5px;color:#095f83;}
.company .profile{display:flex;flex-flow:row wrap;justify-content:space-between;}
.company .prof1,.company .prof2{width:50%;padding:15px 15px 0;}
.company dl {font-size:14px;background-color:#e5f7fe;border-radius:5px;line-height:2;padding:15px;margin-bottom:10px;}
.company dl a{color:#095f83;text-decoration:none;}
.company dl a:hover{opacity:0.7;}
.company dl h4{font-size:14px;font-weight:bold;margin-bottom:5px;}
.company dl h4 i{margin-right:5px;}
.company dl.group{width:100%;margin:0 15px 10px;}
.company ul.staff{display:flex;flex-flow:row wrap;align-items:baseline;}
.company ul.staff li{font-size:14px;line-height:1.6;width:33.33%;padding:7px 15px;display:flex;align-items:baseline;}
.company ul.staff li:before{content:"\f046";font-family:FontAwesome;margin-right:5px;color:#095f83;}

/*****************************************************************************
 concept
 *****************************************************************************/
.concept h3{color:#333;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-size:30px;font-weight:500;border-bottom:5px solid #ddd;margin:0.75em 0 20px;padding:10px 0;display:flex;align-items:baseline;}
.concept h3:before{content:"\f044";font-family:FontAwesome;margin-right:10px;color:#095f83;}
.concept p{font-size:16px;line-height:2.5;width:100%;margin:0 auto 50px;}
.concept p span{color:#095f83;}
.concept figure{margin:50px 0 100px;width:100%;}

/*****************************************************************************
 works
 *****************************************************************************/
nav{width:100%;background:#fff;padding:15px;}
nav .lower{display:flex;justify-content:center;}
nav ul.menu{width:870px;display:flex;flex-flow: row wrap;}
nav ul.menu li {width:25%;padding:10px 15px;}
nav ul.menu li.b1 {border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
nav ul.menu li.b2 {border-bottom:1px solid #ccc;}
nav ul.menu li.b3 {border-right:1px solid #ccc;}
nav ul.menu li a:before{content:"\f0a9";font-family:FontAwesome;font-weight:300;margin-right:5px;}
nav ul.menu li a {color:#333;text-decoration:none;font-size:16px;display:flex;align-items:baseline;}
nav ul.menu li a:hover {color:#be0f18;}

.works h3{color:#333;font-size:12px;font-weight:normal;line-height:1.3;border-bottom:3px solid #eee;padding:10px 0;margin:1em 0 30px;display:flex;align-items:baseline;}
.works h3 b{font-size:16px;font-weight:bold;padding-right:5px;}
.works h3:before{content:"\f013";font-family:FontAwesome;margin-right:5px;color:#7e6b59;}
.works ul.pic{display:flex;flex-flow:row wrap;}
.works ul.pic li{width:25%;width:33.33333%;padding:0 15px 15px;}
.works ul.pic li img{border:2px solid #fff;margin-bottom:10px;padding:3px;box-shadow:0 0 4px 2px rgba(0, 0, 0, 0.1);}
.works h3 a{color:#095f83;text-decoration:none;}
.works h3 a:hover{opacity:0.7;}


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

	.lower{width:100%;padding:0 10px 40px;}
	.frame,.frame2{width:100%;padding:0 10px 40px;}
	.inner{padding:0 0 30px;}
	.pankuzu {font-size:12px;padding:0 10px;}		
	.titleArea,
	.titleArea_works {width:100%;height:180px;margin:12.5vw 0 20px;position:relative;}
	.titleArea h2,
	.titleArea_works h2{font-size:35px;text-align:center;}
	.titleArea h2 small,
	.titleArea_works h2 small{font-size:15px;}
	.top_ttl{font-size:24px;}
	.ttl_border{font-size:18px;}
	p.catch{text-align:left;}

	.lower h4,.frame h4 {font-size:18px;}
	.lower p,.frame p {font-size:14px;}
	.lower p.catch,.frame p.catch {font-size:16px;text-align:left;}	
	
	.inq_table {font-size:13px;}
	.inq_table tr,
	.inq_table th,
	.inq_table td {display:block;width:100%;}
	.inq_table td textarea{width:96%;}
	.inq_table th,.inq_table td{padding:10px;}
	.inq_table th span {float:none;display:inline-block;margin-left:5px;}
	.contact .btn_form input[type="submit"]{width:100%;}
	.btn_form {width:100%;height:50px;}
	.btn_send {width:100%;height:50px;}
	.btn_reset {margin:10px 0 0;}
	.send {margin:30px auto 10px;width:80%;}
	.inq_table button,
	.inq_table select,
	.inq_table textarea {-webkit-appearance: none;}
	
	.com_table {font-size:13px;}
	.com_table tr,
	.com_table th,
	.com_table td {display:block;width:100%;}
	.com_table th,.com_table td{padding:10px;}
	.company iframe{height:250px;}
	
	/* concept */
	.concept h3{font-size:18px;line-height:1.3;}
	.concept p{line-height:2;}
	
	/* works */
	.works ul.pic li{width:50%;padding:10px;}
	nav ul.menu{width:100%;}
	nav ul.menu li {width:50%;padding:5px 10px;border:none;}
	nav ul.menu li a{font-size:13px;line-height:1.3;}
	nav ul.menu li.b1,
	nav ul.menu li.b2,
	nav ul.menu li.b3{border:none;}

	

}

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

	
}

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

	nav ul.menu li {width:50%;padding:5px 10px;border:none;}
	.works h3 b{font-size:13px;}
	
	.responsive{margin-bottom:30px;overflow-x:scroll;-webkit-overflow-scrolling:touch;}
	.responsive table{min-width:600px;margin:0 !important;}
	.responsive table *{font-size:12px !important;}
	*{-webkit-appearance: none;-webkit-text-size-adjust:100%;}

}

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

	.company .prof1,.company .prof2{width:100%;padding:15px 15px 5px;border-bottom:1px solid #ccc;}
	.company ul.staff li{width:100%;}
	.company dl.group{margin:15px;}

}

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

}

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


}


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

}





.titleArea_works 			{	background:linear-gradient( #30aac5, #2fc5b6);}

.titleArea	{
	background:linear-gradient( #085D82, #3787a8);
}

#contact .titleArea	{
	background:linear-gradient( #222, #444);
}

#company .titleArea	{
	background:linear-gradient( #E6242A, #dd4c67);
}

.works h3	{
	font-size:14px;
	color:#5ca9ba
}

.works h3 b	{
	font-size:18px;
	color:#444;
}























ul.gallery {
	border:0px solid #ddd;
	padding:0px;
	margin:0;
		-webkit-justify-content : center;
		-ms-flex-pack : justify;
		justify-content : center;
		display : -webkit-flex;
		display :-ms-flexbox;
		display : flex;
		-webkit-flex-wrap : wrap;
		-ms-flex-wrap : wrap;
		flex-wrap : wrap; 
		background:$f9f9f9
	
}

ul.gallery li {
	width:25%;
	padding:5px;
	margin:0
}

ul.gallery img {
	border:1px solid #ddd;
	padding:4px;
	vertical-align: bottom;
	box-shadow:0px 0px 4px rgba(0, 0, 0, 0.1);
}



@media screen and (max-width: 480px){
ul.gallery li {
	width:50%;
｝