@charset "utf-8";

/*****************************************************************************
 layout
 *****************************************************************************/
.lower{width:900px;max-width:100%;margin:0 auto;padding:0 0 80px;position:relative;}
.inner{padding-bottom:100px;}
.border{border-top:5px solid #ddd;}
.pankuzu {padding:20px 0;font-size:13px;}
.pankuzu span {margin:0 10px 0;}
.pankuzu a {color:#fff;}
.pankuzu a:hover {opacity:0.8;}


.titleArea{width:100%;position:relative;}
.bg_ttl1{width:100%;position:relative;background:url(../img/common/bg-ttl1.jpg)no-repeat center center;background-size:cover;}
.bg_ttl2{width:100%;position:relative;background:url(../img/common/bg-ttl2.jpg)no-repeat center center;background-size:cover;}
.bg_ttl3{width:100%;position:relative;background:url(../img/common/bg-ttl3.jpg)no-repeat center center;background-size:cover;}
.titleArea div{width:1080px;max-width:100%;height:310px;margin:0 auto;padding:0 15px;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.titleArea h2{color:#fff;font-size:28px;font-weight:400;text-align:center;letter-spacing:8px;} 
.titleArea h2 small{display:block;color:#fff;font-size:20px;font-weight:700;letter-spacing:2px;line-height:1.5;margin:20px 0 0;}

.top_ttl{color:#fff!important;font-size:50px;font-weight:300;font-family:'Poppins',sans-serif;letter-spacing:1px;text-align:center;margin-bottom:50px;}
.top_ttl small{display:block;color:#fff;font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "Poppins", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana,  sans-serif;font-size:14px;font-weight:700;margin-top:15px;letter-spacing:2px;}

.line{display:flex;align-items:center;color:#00083e;font-size:22px;margin:30px 0 25px;}
.line small{color:#666;font-size:13px;padding-left:10px;}
.line:before, .line:after{content:"";flex-grow:1;height:1px;background:#00083e;display:block;}
.line:before{margin-right:.4em;}
.line:after {margin-left:.4em;}

.lower em{font-style:normal;font-weight:bold;background:linear-gradient(transparent 60%, #F3F47F 60%);}
.lower b{font-weight:bold;}
.lower p{color:#fff;font-size:15px;line-height:1.8;padding:0 0 30px;}
.lower a{text-decoration:none;}
.lower .red{color:red;}
.lower .cen{text-align:center;}

.photo{margin:0;padding:0;display:flex;flex-flow:row wrap;justify-content:space-between;}
.photo li{width:48%;padding:15px 0;}

/*.check{margin:0;padding:0 0 20px;}
.check li{font-size:15px;line-height:1.5;}
.check li:before{color:#f50;content:"\f046";font-family:FontAwesome;margin-right:5px;}

.check2{margin:0;padding:0;display:flex;flex-flow:row wrap;}
.check2 li{line-height:1.8;padding:0 10px;display:flex;align-items:baseline;}
.check2 li:before{color:#f50;content:"\f046";font-family:FontAwesome;margin-right:5px;}*/

/*****************************************************************************
 contact
 *****************************************************************************/
.inq_table{width:100%;/*border-collapse:separate;*/border-spacing:3px;font-size:14px;margin-bottom:30px;}
.inq_table th{text-align:left;color:#fff;border-bottom:1px solid #222;border-right:1px solid #333;background:#000;vertical-align:top;padding:15px;width:33%;line-height:1.3;}
.inq_table th span{color:#fff;float:right;font-size:11px;padding:3px 5px;background:#e00;}
.inq_table td {color:#fff;background:#000;border-bottom:1px solid #222;vertical-align:middle;line-height:1.8;padding:15px;}
.inq_table td p{color:#f7f7f7;font-size:12px;line-height:1.2;padding:0;}
.inq_table .bn{border-bottom:none;}
.inq_table label{cursor:pointer;position:relative;}
.inq_table textarea{height:200px;}
/*.inq_table input{margin-bottom:10px;}*/
.inq_table input[type="text"],
.inq_table input[type="email"],
.inq_table textarea{padding:5px;cursor:pointer;font-size:13px;}
.inq_table input:focus,
.inq_table textarea:focus{border:2px solid #ccc;}
.cont01 {width:96%;height:35px;}
.cont02 {width:96%;height:180px;}
.cont03 {width:60%;}
.cont04 {width:40%;}
.cont05 {width:10%;}
.btn_form{text-align:center;margin:30px auto 10px;width:432px;font-family: "游ゴシック", YuGothic, "Poppins", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana,  sans-serif;}
.btn_form input[type="submit"]{width:280px;padding:15px 20px;color:#fff;border:none;background:#7d0022;cursor:pointer;letter-spacing:3px;font-size:1.2rem;}
.btn_form input[type="submit"]:hover{opacity:0.7;}
.btn_send {background:#7d0022;padding:12px;color:#fff;border:none;cursor:pointer;letter-spacing:3px;font-size:16px;width:200px;font-family: "游ゴシック", YuGothic, "Poppins", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana,  sans-serif;}
.btn_send:hover {opacity:0.8;}
.btn_reset {background:#333;margin-left:20px; color:#fff;border:none;cursor:pointer;letter-spacing:3px;font-size:16px;font-family: "游ゴシック", YuGothic, "Poppins", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana,  sans-serif;}
.btn_reset:hover {background:#333;}
.btn_back {background:#ccc;font-family: "游ゴシック", YuGothic, "Poppins", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana,  sans-serif;}
.btn_back:hover {background:#aaa;}
.send {margin:30px auto 10px;width:432px;font-family: "游ゴシック", YuGothic, "Poppins", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana,  sans-serif;}
.back {margin:30px auto 10px;width:224px;width:432px;font-family: "游ゴシック", YuGothic, "Poppins", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana,  sans-serif;}
.inq_table td a{color:#fff;text-decoration:none;}
.inq_table td a:hover{opacity:0.8;}

/*****************************************************************************
 about
 *****************************************************************************/
.about iframe{display:block;width:96%;height:350px;vertical-align:bottom;margin:0 auto 30px;}
.about .pic{display:flex;flex-flow:row wrap;}
.about .pic li{width:16.6%;padding:10px;}
.about .catch{font-size:18px;line-height:2;text-align:center;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

/*****************************************************************************
 work
 *****************************************************************************/
.work ul{
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-start; 
	align-items: flex-start;
	display : -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap; 
}
.work ul li{width:33%;padding:15px 10px;}
.work ul li img{border:5px solid #59493f;}
.work .catch{font-size:18px;line-height:1.8;text-align:center;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;padding:50px 0;}

/*****************************************************************************
 privacy
 *****************************************************************************/
.privacy dl{margin-top:20px;}
.privacy dl dt{font-size:22px;line-height:1.5;letter-spacing:2px;border-bottom:solid 2px #222;margin-bottom:10px;padding:0 0 5px;}
.privacy dl dd{font-size:14px;line-height:1.5;padding:0 0 30px;}

/*****************************************************************************
 link
 *****************************************************************************/
.linkBox{border-bottom:solid 2px #222;margin-bottom:30px;}
.link h5{padding:0 0 15px;font-size:18px;}
.link h5 a,.more a{color:#7d0022;}
.link h5 a:hover,.more a:hover{opacity:0.7;}
.link .more{text-align:right;font-size:14px;padding-bottom:10px;}
.link .more:before{content:"\f0da";font-family:FontAwesome;color:#7d0022;margin-right:10px;}

/*****************************************************************************
 product
 *****************************************************************************/
.product ul{display:flex;flex-flow:row wrap;}
.product ul li{width:33%;padding:10px 15px;}
.product ul li img{margin-bottom:5px;}
.product ul li p{color:#fff;font-size:14px;line-height:1.5;text-align:center;padding:0;}

/*****************************************************************************
 flow
 *****************************************************************************/
.flow .chart_contents{margin: 0 0 120px;border-top:1px solid #333;padding:20px 0;position:relative;}
.flow .chart_contents:not(:last-child):after{content:"\f175";font-family:FontAwesome;font-size:50px;position:absolute;top:100%;left:50%;transform:translate(-50%,50%);color:#fff;}
.flow .chart h2{color:#fff;font-size:30px;line-height:1.2;border-left:10px solid #7d0022;padding-left:10px;margin-bottom:15px;}
.flow .chart h2 span{font-size:40px;padding: 0 20px 0 10px;}
.flow .chart ul{display:flex;flex-flow:row wrap;}
.flow .chart ul li{color:#fff;line-height:1.8;padding:15px 15px 15px 25px;}
.flow .chart ul li span{color:#7d0022;}

/*****************************************************************************
 
 *****************************************************************************/






@media screen and (max-width: 768px){
	
/* 	.titleArea{width:100%;margin:9vw 0 20px;position:relative;} */
	.titleArea{width:100%;margin:calc(2.6875vw * 5) 0 20px;position:relative;}
	.titleArea div{width:100%;height:210px;margin:0 auto;padding:0 15px;display:flex;align-items:center;}
	.titleArea h2{font-size:18px;text-align:center;letter-spacing:5px;}
	.titleArea h2 small{font-size:12px;}
	.line{font-size:18px;line-height:1.2;}
	#contents .pankuzu {font-size:12px;padding:0 10px 20px;}
    .pages .wrap{padding:0 10px 30px;}
	.lower{padding:0 10px 30px;}	
	.lower p{font-size:14px;letter-spacing:0;}
	.inner .col-12,.inner .col-09,.inner .col-04{width:100%;}
	.inner img{display:block;margin:0 auto 20px;}
	.inner{padding-bottom:30px;}
    .about .catch,.work .catch{font-size:15px;text-align:left;}
	/*.check li{font-size:14px;line-height:1.5;}*/
	
	.top_ttl{text-align:center;font-size:40px;margin-bottom:40px;}
	.top_ttl small{font-size:18px;margin-top:5px;}

	/* inquiry */
	.inq_table {font-size:13px;border-top:none;}
	.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;border-right:none;}
	.inq_table th span {float:none;display:inline-block;margin:5px 0 0 5px;}
	.contact .btn_form input[type="submit"]{width:100%;}
	.cont01 {width:96%;}
	.cont02 {width:96%;}
	.cont03 {width:96%;}
	.cont04 {width:96%;}
	.cont05 {width:96%;}
	.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%;}
	
	/* about */
	.about .col-03,.about .col-09{width:100%;}
	.about_table {font-size:13px;border-top:none;}
	.about_table th,.about_table td{padding:10px;border-right:none;}
	.photo li{width:48%;padding:0;}

	/* work */
	.worklist li h2{width:100%;}
	.worklist li h3{font-size:14px;}
	.worklist li h3 small{display:block;font-size:12px;margin-top:10px;}
	.worklist li p{color:#666;font-size:14px;line-height:1.5;margin-bottom:10px;}
	.pagenavi{display:flex;flex-flow:row wrap;justify-content:center;margin:30px 0;}
	
	/* privacy */
    .privacy dl dt{font-size:16px;}
    .privacy dl dd{font-size:14px;}

    /* about */
    .about iframe{height:250px;}
    
	/* flow */
	.flow .chart_contents{margin-bottom:80px;}
	.flow .chart_contents:not(:last-child):after{font-size:40px;}
	.flow .chart h2{font-size:20px;}
	.flow .chart h2 span{font-size:20px;}
	.flow .chart ul li{font-size:15px;}

}


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

	
}

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

	.lower p{font-size:13px;line-height:1.5;}
	

	
	
	.responsive{margin-bottom:30px;overflow-x:scroll;-webkit-overflow-scrolling:touch;}
	.responsive table{min-width:600px;margin:0 !important;}
	.responsive table *{font-size:11px !important;}
	/**{-webkit-appearance: none;-webkit-text-size-adjust:100%;}*/

	
}

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

	.about .pic li{text-align:center;width:50%;margin:0 auto;}
    .work ul li{width:50%;padding:10px;}
    .product ul li{width:100%;}
    
}
	
@media screen and (max-width: 414px){

    

}

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


	.worklist li{width:96%;}

}


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

.titleArea h2{letter-spacing:3px;}

}





/* -- 調整 -- */

.flow .chart ul li {
	font-size:16px;
}

.flow .chart ul li span 	{
	color:#666;
	font-size:0.8em
}

.worklist{
	padding:0 0 90px 0;
}

.work  ul li	{
	width: 33.3333%;
	padding: 15px;
}

.work ul li img{
	border:5px solid #242624;
	width:100%;
}


.mapinfo	{
	letter-spacing: 2px;
}

@media screen and (max-width: 768px){
	.work ul li	{
		width: 50%;
	}
	
	.work ul li img{
		border:3px solid #242624;
	}

}


@media screen and (max-width: 480px){
	.work  ul	{
		padding:5px;
	}
	
	.work  ul li	{
		padding:5px;
	}
}