@charset "UTF-8";




/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
	.flame{
		position: absolute;
		z-index: 101;
		width: 120px;
	}
	.deco{
		position: absolute;
		z-index: 101;
	}
	.flame_tr{
		top: -1px;
		right: -3px;
	}
	.flame_tl{
		top: -1px;
		left: -3px;
	}
	.flame_br{
		bottom: -1px;
		right: -3px;
	}
	.flame_bl{
		bottom: -1px;
		left: -3px;
	}
	.overwrap{
		overflow: hidden;
	}
	/*-----------------------------
	
		まちづくり事業
	
	--------------------------------*/
	#service.comdev{
		overflow: hidden;
	}
	#service.comdev #leadArea{
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
		#service.comdev #leadArea .txt_box{
			box-sizing: border-box;
			width: 440px;
			margin-left: 80px;
		}
			#service.comdev #leadArea .txt_box .hd{
				font-size: 25px;
				font-weight: bold;
				margin-bottom: 40px;
				letter-spacing: 3px;
			}
			#service.comdev #leadArea .txt_box p{
				line-height: 2;
			}
				#service.comdev #leadArea .txt_box .illust{
					width: 98px;
					position: absolute;
					top: 0;
					right: 0;
				}

						
		#service.comdev #leadArea .img_box{
			margin-left: 50px;
			width: calc(100% - 580px);
			margin-right: 3px;
			position: relative;
			border-radius: 16px;
			min-height: 470px;
		}
			#service.comdev #leadArea .img_box{
				background: url("../img/comdev/lead_pht.jpg")no-repeat left bottom/cover;
			}
			#service.comdev #leadArea .img_box .flame{
				width: 120px;
				border-radius: 0;
			}
	#service.comdev #leadArea .img_box .flame_br{
				width: 121px;
				border-radius: 0;
			}
	
	
	/* 共通
	---------------------------------*/
	#service.comdev .sec{
		margin-top: 200px;
		position: relative;
	}
	
		#service.comdev .sec h2{
			position: relative;
			margin: 0 auto 30px;
			text-align: center;
			font-size: 25px;
			letter-spacing: 3px;
			width: 275px;
			padding-left: 3px;
		}
	#service.comdev .sec h2:before,
	#service.comdev .sec h2:after{
		content: '';
		display: block;
		position: absolute;
		width: 15px;
		height: 29px;
		top: 0;
		bottom: 0;
		margin: auto 0;
	}
		#service.comdev .sec h2:before{
			background: url("../img/tit_l.png") no-repeat center/cover;
			left: 0;
		}
		#service.comdev .sec h2:after{
			background: url("../img/tit_r.png") no-repeat center/cover;
			right: 0
		}
			#service.comdev .sec .lead{
				font-weight: bold;
				font-size: 18px;
				text-align: center;
				line-height: 2;
			}
	
	#service.comdev .btn{
		width: 400px;
		border: solid 3px #66cbaf;
		border-radius: 18px;
		position: relative;
		color: #0da997;
		padding: 13px 25px 13px 13px;
		display: block;
		font-weight: bold;
		margin: 30px 0 0;
		line-height: 1em;
		box-sizing: border-box;
		font-feature-settings: "palt";
	}
		#service.comdev .btn + .btn{
			margin-top: 20px;
		}
		#service.comdev .btn::before {
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			right: 15px;
			margin: auto;
			background-image: url(../../common/img/arrow.png);
			background-size: cover;
			width: 20px;
			height: 15px;
			transition: 300ms;
		}
			#service.comdev .btn:hover {
				background-color: #66cbaf !important;
				color: #fff;
			}
			#service.comdev .btn:hover::before{
				right: 8px;
				background-image: url(../../common/img/arrow_w.png);
			}
			#service.comdev .btn .type{
				display: inline-block;
				font-size: 12px;
				color: #fff;
				background-color: #0da997;
				border-radius: 6px;
				padding: 5px 8px;
				line-height: 1em;
				margin-right: 5px;
			}
			#service.comdev .btn:hover .type{
				color: #0da997;
				background-color: #fff;
			}
	
	/* サービス内容
	---------------------------------*/
	#service.comdev #exp{
		position: relative;
	}
	#service.comdev #exp .content{
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
	}
	#service.comdev #exp .flame_br{
		right: -1px;
	}
	#service.comdev #exp .content:nth-of-type(2n){
		flex-direction: row-reverse;
	}
		#service.comdev #exp .content + .content{
			margin-top: 200px;
		}
			#service.comdev #exp .content .deco{
				width: 162px;
			}
			#service.comdev #exp .content .flame_tl{
				width: 120px;
			}
			#service.comdev #exp .content .flame_br{
				width: 120px;
				transform: rotate(-180deg);
			}
			#service.comdev #exp .content:nth-of-type(2n) .flame_tr{
				transform: scale(-1,1);
			}
			#service.comdev #exp .content:nth-of-type(2n) .flame_bl{
				transform: scale(1,-1);
				left: -1px;
				width: 119px;
			}
			#service.comdev #exp .content .flame_br{
				width: 119px;
				transform: rotate(-180deg);
			}
			#service.comdev #exp .content .img_box{
				position: relative;
				width: 50%;
				min-height: 400px;
				border-radius: 0 16px 0 16px;
			}
				#service.comdev #exp .content:nth-of-type(2n) .img_box{
					border-radius: 16px 0 16px 0;
					
				}
				#service.comdev #exp .content .img_box .num{
					position: absolute;
					width: 32px;
					left: 0;
					top: 0;
					z-index: 102;
				}
					#service.comdev #exp .content:nth-of-type(2n) .img_box .num{
						left: auto;
						right: 0;
					}

			#service.comdev #exp .content .txt_box{
				width: calc(50% - 140px);
				margin-left: 50px;
			}
				#service.comdev #exp .content:nth-of-type(2n) .txt_box{
					width: calc(50% - 140px);
					margin-left: 0;
					margin-right: 50px;
				}
					#service.comdev #exp .content .txt_box .hd{
						font-size: 22px;
						font-weight: bold;
						letter-spacing: 0.1em;
						margin-bottom: 20px;
					}
	#service.comdev #exp .content .txt_box .hd span{
		display: block;
		font-size: 18px;
	}
	/* 01 */
	#service.comdev #exp .content:nth-of-type(1) .img_box{
		background: url("../img/comdev/pht01.jpg")no-repeat left bottom/cover;
	}
	#service.comdev #exp .content:nth-of-type(1) .deco{
		bottom: -90px;
		right: -95px;
	}
	#service.comdev #exp .content:nth-of-type(1) .deco.illust{
			width: 98px;
			position: absolute;
			bottom: 100px;
			right: 0;
		}
	/* 02 */
	#service.comdev #exp .content:nth-of-type(2) .img_box{
		background: url("../img/comdev/pht02.jpg")no-repeat right bottom/cover;
	}
		#service.comdev #exp .content:nth-of-type(2) .deco.illust{
			width: 98px;
			position: absolute;
			bottom: 60px;
			left: 0;
		}
	/* 03 */
	#service.comdev #exp .content:nth-of-type(3) .img_box{
		background: url("../img/comdev/pht03.jpg")no-repeat left bottom/cover;
	}
	#service.comdev #exp .content:nth-of-type(3) .deco.illust{
			width: 98px;
			position: absolute;
			top: -100px;
			right: -20px;
		}

}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	.flame{
		position: absolute;
		z-index: 101;
		width: 60px;
	}
	.deco{
		position: absolute;
		z-index: 101;
	}
	.flame_tr{
		top: -1px;
		right: -2px;
	}
	.flame_tl{
		top: -1px;
		left: -2px;
	}
	.flame_br{
		bottom: -1px;
		right: -2px;
	}
	.flame_bl{
		bottom: -1px;
		left: -2px;
	}
	.overwrap{
		overflow: hidden;
	}
	/*-----------------------------
	
		まちづくり事業
	
	--------------------------------*/
	#service.comdev{
		overflow: hidden;
	}
	#service.comdev #leadArea{
		margin-top: 160px;
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
		#service.comdev #leadArea .txt_box{
			box-sizing: border-box;
		}
			#service.comdev #leadArea .txt_box .hd{
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 10px;
			}
			#service.comdev #leadArea .txt_box p{
				line-height: 2;
			}
				#service.comdev #leadArea .txt_box .illust{
					max-width: 98px;
					width: 20%;
					position: absolute;
					top: 0;
					right: 0;
				}
						
		#service.comdev #leadArea .img_box{
			position: relative;
			margin-bottom: 20px;
		}
		#service.comdev #leadArea .img_box img{
			border-radius: 0 8px 0 8px;
		}
			#service.comdev #leadArea .img_box .flame{
				width: 60px;
				
			}
	#service.comdev #leadArea .img_box .flame img{
		border-radius: 0;
	}
	
	
	/* 共通
	---------------------------------*/
	#service.comdev .sec{
		margin-top: 100px;
		position: relative;
	}
	
		#service.comdev .sec h2{
			position: relative;
			margin: 0 auto 30px;
			text-align: center;
			font-size: 22px;
			width: 90%;
			max-width: 275px;
			padding-left: 3px;
		}
	#service.comdev .sec h2:before,
	#service.comdev .sec h2:after{
		content: '';
		display: block;
		position: absolute;
		width: 15px;
		height: 29px;
		top: 0;
		bottom: 0;
		margin: auto 0;
	}
		#service.comdev .sec h2:before{
			background: url("../img/tit_l.png") no-repeat center/cover;
			left: 0;
		}
		#service.comdev .sec h2:after{
			background: url("../img/tit_r.png") no-repeat center/cover;
			right: 0
		}
			#service.comdev .sec .lead{
				font-weight: bold;
				font-size: 16px;
				text-align: center;
				line-height: 2;
			}
	
	/* サービス内容
	---------------------------------*/
	#service.comdev .btn{
		max-width: 400px;
		width: 100%;
		border: solid 3px #66cbaf;
		border-radius: 18px;
		display: block;
		position: relative;
		color: #0da997;
		padding: 15px 45px 15px 15px;
		box-sizing: border-box;
		line-height: 1.3;
		font-weight: bold;
		margin: 20px 0 0;
	}
	#service.comdev .btn + .btn{
		margin-top: 10px;
	}
		#service.comdev .btn::before {
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			right: 15px;
			margin: auto;
			background-image: url(../../common/img/arrow.png);
			background-size: cover;
			width: 20px;
			height: 15px;
			transition: 300ms;
		}
		#service.comdev .btn .type{
			display: block;
			width: 4.5em;
			text-align: center;
			font-size: 12px;
			color: #fff;
			background-color: #0da997;
			border-radius: 6px;
			padding: 5px 8px;
			line-height: 1em;
			margin-bottom: 5px;
		}
	#service.comdev #exp{
		position: relative;
	}
	#service.comdev #exp .content{
		position: relative;
	}
		#service.comdev #exp .content + .content{
			margin-top: 60px;
		}
			#service.comdev #exp .content .deco{
				width: 110px;
			}
			#service.comdev #exp .content .flame_tl{
				width: 60px;
			}
			#service.comdev #exp .content .flame_br{
				width: 60px;
				transform: rotate(-180deg);
			}
				#service.comdev #exp .content:nth-of-type(2n) .flame_tr{
					transform: scale(-1,1);
				}
				#service.comdev #exp .content:nth-of-type(2n) .flame_bl{
					transform: scale(1,-1);
					left: -1px;
				}
			#service.comdev #exp .content .img_box{
				margin-bottom: 20px;
				position: relative;
			}
				#service.comdev #exp .content .img_box > img{
					border-radius: 0 8px 0 8px;
				}
				#service.comdev #exp .content:nth-of-type(2n) .img_box > img{
					border-radius: 8px 0 8px 0;
				}
	
				#service.comdev #exp .content .img_box .num{
					position: absolute;
					width: 25px;
					left: 0;
					top: 0;
					z-index: 102;
				}
					#service.comdev #exp .content .img_box .num img{
						display: block;
					}
					#service.comdev #exp .content:nth-of-type(2n) .img_box .num{
						left: auto;
						right: 0;
					}

			#service.comdev #exp .content .txt_box{
			}
				#service.comdev #exp .content:nth-of-type(2n) .txt_box{
				}
					#service.comdev #exp .content .txt_box .hd{
						font-size: 20px;
						font-weight: bold;
						letter-spacing: 0.1em;
						margin-bottom: 10px;
					}
	#service.comdev #exp .content .txt_box .hd span{
		display: block;
		font-size: 16px;
		line-height: 1.5;
	}
	/* 01 */
	#service.comdev #exp .content:nth-of-type(1) .img_box{
	}
	#service.comdev #exp .content:nth-of-type(1) .deco{
		display: none;
	}
	#service.comdev #exp .content:nth-of-type(1) .illust{
		max-width: 98px;
		width: 20%;
		position: absolute;
		bottom: 80%;
		right: 15%;
		display: block;
	}
	/* 02 */
	#service.comdev #exp .content:nth-of-type(2) .txt_box .illust{
		max-width: 98px;
		width: 20%;
		position: absolute;
		top: 0;
		right: 0;
	}
	#service.comdev #exp .content:nth-of-type(2) .img_box{
	}
				
	/* 03 */
	#service.comdev #exp .content:nth-of-type(3) .img_box{
	}
	#service.comdev #exp .content:nth-of-type(3) .illust{
		max-width: 98px;
		width: 20%;
		position: absolute;
		top: 0;
		right: 0;
	}
	

}