@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;
		width: 162px;
	}
	.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.gakudou{
		overflow: hidden;
	}
	#service.gakudou #leadArea{
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
		#service.gakudou #leadArea .txt_box{
			box-sizing: border-box;
			width: 440px;
			margin-left: 80px;
		}
			#service.gakudou #leadArea .txt_box .hd{
				font-size: 25px;
				font-weight: bold;
				margin-bottom: 40px;
				letter-spacing: 3px;
			}
			#service.gakudou #leadArea .txt_box p{
				line-height: 2;
			}

						
		#service.gakudou #leadArea .img_box{
			margin-left: 50px;
			width: calc(100% - 580px);
			margin-right: 3px;
			position: relative;
			border-radius: 16px;
			min-height: 470px;
		}
			#service.gakudou #leadArea .img_box{
				background: url("../img/gakudou/lead_pht.jpg")no-repeat top center/cover;
			}
			#service.gakudou #leadArea .img_box .flame{
				width: 120px;
				border-radius: 0;
			}
			#service.gakudou #leadArea .img_box .flame_br{
				width: 121px;
				border-radius: 0;
			}
	
	
	/* 共通
	---------------------------------*/
	#service.gakudou .sec{
		margin-top: 200px;
		position: relative;
	}
	
		#service.gakudou .sec h2{
			position: relative;
			margin: 0 auto 30px;
			text-align: center;
			font-size: 25px;
			letter-spacing: 3px;
			width: 275px;
			padding-left: 3px;
		}
	#service.gakudou .sec h2:before,
	#service.gakudou .sec h2:after{
		content: '';
		display: block;
		position: absolute;
		width: 15px;
		height: 29px;
		top: 0;
		bottom: 0;
		margin: auto 0;
	}
		#service.gakudou .sec h2:before{
			background: url("../img/tit_l.png") no-repeat center/cover;
			left: 0;
		}
		#service.gakudou .sec h2:after{
			background: url("../img/tit_r.png") no-repeat center/cover;
			right: 0
		}
			#service.gakudou .sec .lead{
				font-weight: bold;
				font-size: 18px;
				text-align: center;
				line-height: 2;
			}
	
	#service.gakudou .btn{
		width: 215px;
		border: solid 3px #66cbaf;
		border-radius: 18px;
		position: relative;
		color: #0da997;
		padding: 18px 25px 18px 5px;
		text-align: center;
		display: block;
		font-weight: bold;
		margin: 30px 0 0;
		line-height: 1em;
		box-sizing: border-box;
		font-feature-settings: "palt";
	}
		#service.gakudou .btn + .btn{
			margin-top: 20px;
		}
		#service.gakudou .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.gakudou .btn:hover {
				background-color: #66cbaf !important;
				color: #fff;
			}
			#service.gakudou .btn:hover::before{
				right: 8px;
				background-image: url(../../common/img/arrow_w.png);
			}
			#service.gakudou .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.gakudou .btn:hover .type{
				color: #0da997;
				background-color: #fff;
			}
	
	/* 利用可能条件
	---------------------------------*/
	#service.gakudou #req{
		position: relative;
	}
	#service.gakudou #req .deco{
		right: -100px;
		z-index: 101;
		bottom: -80px;
	}
	#service.gakudou #req h2{
		margin-bottom: 80px;
	}
	#service.gakudou #req .wrap{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
		#service.gakudou #req .wrap > dl{
			position: relative;
			margin: 0 25px;
			font-weight: bold;
			opacity: 0;
			transition-delay: .2s;
			transition-duration: 1s;
			transform: translateY(10px);
		}
	
		#service.gakudou #req .wrap.view.on > dl{
			opacity: 1;
    		transform: translateY(0px);
		}
		#service.gakudou #req .wrap.view.on > dl:nth-of-type(2){
			transition-delay: .4s;
		}
		#service.gakudou #req .wrap.view.on > dl:nth-of-type(3){
			transition-delay: .6s;
		}
			#service.gakudou #req .wrap > dl > dt{
				position: absolute;
				top: -8px;
				text-align: center;
				right: 0;
				left: 0;
				margin: 0 auto;
				font-size: 16px;
			}
			#service.gakudou #req .wrap > dl > dd{
				background: url("../img/gakudou/box_req2.png") no-repeat top center/cover;
				width: 261px;
				height: 261px;
				text-align: center;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				font-size: 18px;
			}
				#service.gakudou #req .wrap > dl:nth-of-type(1) > dd{
					background: url("../img/gakudou/box_req.png") no-repeat top center/cover;
				}
	
	/* 過ごし方・活動例
	---------------------------------*/
	#service.gakudou #ex ul{
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		z-index: 101;
	}
	#service.gakudou #ex ul:after{
		display: none;
	}
		#service.gakudou #ex ul li{
			width: 100%;
			position: relative;
			min-height: 300px;
			opacity: 0;
			transition-delay: .2s;
			transition-duration: 1s;
			transform: translateY(-10px);
		}
	_:-ms-lang(x)::-ms-backdrop,#service.gakudou #ex ul li{
		width: 24%;
	}
	
			#service.gakudou #ex ul li:nth-of-type(1){
				background: url("../img/gakudou/ex01.jpg") no-repeat center/cover;
				border-radius:0 16px 16px 0;
			}
			#service.gakudou #ex ul li:nth-of-type(3){
				background: url("../img/gakudou/ex02.jpg") no-repeat center/cover;
				border-radius: 16px;
			}
			#service.gakudou #ex ul li:nth-of-type(4){
				background: url("../img/gakudou/ex03.jpg") no-repeat center/cover;
				border-radius: 16px 0 0 16px;
			}
			#service.gakudou #ex ul li + li{
				margin-left: 25px;
			}
				#service.gakudou #ex ul li > img{
					border-radius: 16px;
				}
					#service.gakudou #ex ul li:first-of-type > img{
						border-radius:0 16px 16px 0;
					}
					#service.gakudou #ex ul li:last-of-type > img{
						border-radius: 16px 0 0 16px;
					}
				#service.gakudou #ex ul li .fl{
					position: absolute;
					top: 0;
					width: 100%;
				}
				#service.gakudou #ex ul li .fl:last-of-type{
					top: auto;
					bottom: 0;
				}
				#service.gakudou #ex ul li:nth-of-type(2){
				}
				#service.gakudou #ex ul li:nth-of-type(2) dl{
					background: url("../img/gakudou/box02.png") no-repeat center/100% 100%;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					justify-content: center;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					flex-direction: column;
					height: 100%;
					width: 100%;
					box-sizing: border-box;
					padding: 0 40px;
					font-weight: bold;
					font-size: 18px;
				}
					#service.gakudou #ex ul li dl dt{
						position: relative;
						z-index: 2;
						color: #0da997;
						margin-bottom: 10px;
					}
					#service.gakudou #ex ul li dl dd{
						position: relative;
						z-index: 2;
						width: 100%;
					}
					#service.gakudou #ex ul li .fl img{
						display: block;
						border-radius: 0;
					}
	#service.gakudou #ex ul.view.on li{
		opacity: 1;
    	transform: translateY(0px);
	}
	#service.gakudou #ex ul li:nth-of-type(2){
		transition-delay: .4s;
	}
	#service.gakudou #ex ul li:nth-of-type(3){
		transition-delay: .6s;
	}
	#service.gakudou #ex ul li:nth-of-type(4){
		transition-delay: .8s;
	}
	
	
	/* 運営学童保育室
	---------------------------------*/
	#hoiku ul{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin-top: 80px;
	}
	#hoiku ul:after{
		display: none;
	}
	#hoiku ul li{
		width: 278px;
		height: 278px;
		position: relative;
		text-align: center;
		margin: 0 30px;
	}
	#hoiku ul li dl{
		font-weight: bold;
		font-size: 18px;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		flex-direction: column;
		height: 100%;
		background-color: #f7f7f7;
		position: relative;
	}
	#hoiku ul li:after,
	#hoiku ul li dl:after,
	#hoiku ul li:before,
	#hoiku ul li dl:before{
		content: '';
		display: block;
		position: absolute;
		background: url("../img/gakudou/flame_br.png") no-repeat center/cover;
		width: 65px;
		height: 66px;
		z-index: 2;
	}
	#hoiku ul li:after{
		top: 0;
		left: 0;
		transform: rotate(180deg);
	}
	#hoiku ul li:before{
		top: 0;
		right: 0;
		transform: rotate(-90deg);
	}
	#hoiku ul li dl:after{
		bottom: 0;
		left: 0;
		transform: rotate(90deg);
	}
	#hoiku ul li dl:before{
		bottom: 0;
		right: 0;
	}
	#hoiku ul li dl dt{
		margin-bottom: 15px;
	}
	#hoiku .deco{
		top: 100px;
		left: 0;
		width: 197px;
	}
	
	/* お問い合わせ
	---------------------------------*/
	#contact .btnArea{
		margin-top: 10px;
	}
	#contact .btnArea .btn{
		margin: 0 auto;
	}
	#contact .btnArea p{
		text-align: center;
		margin-bottom: 40px;
	}
	#contact .deco{
		bottom: 0;
		right: 50%;
		margin-right: -420px;
		width: 155px;
	}
	
	
	
}




/* ++++++++++++++++++++++++++++++++++++++++++++++    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.gakudou{
		overflow: hidden;
	}
	#service.gakudou #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.gakudou #leadArea .txt_box{
			box-sizing: border-box;
		}
			#service.gakudou #leadArea .txt_box .hd{
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 10px;
			}
			#service.gakudou #leadArea .txt_box p{
				line-height: 2;
			}

						
		#service.gakudou #leadArea .img_box{
			position: relative;
			margin-bottom: 20px;
		}
		#service.gakudou #leadArea .img_box img{
			border-radius: 0 8px 0 8px;
		}
			#service.gakudou #leadArea .img_box .flame{
				width: 60px;
				
			}
	#service.gakudou #leadArea .img_box .flame img{
		border-radius: 0;
	}
	
	
	/* 共通
	---------------------------------*/
	#service.gakudou .sec{
		margin-top: 100px;
		position: relative;
	}
	
		#service.gakudou .sec h2{
			position: relative;
			margin: 0 auto 30px;
			text-align: center;
			font-size: 22px;
			width: 90%;
			max-width: 275px;
			padding-left: 3px;
		}
	#service.gakudou .sec h2:before,
	#service.gakudou .sec h2:after{
		content: '';
		display: block;
		position: absolute;
		width: 15px;
		height: 29px;
		top: 0;
		bottom: 0;
		margin: auto 0;
	}
		#service.gakudou .sec h2:before{
			background: url("../img/tit_l.png") no-repeat center/cover;
			left: 0;
		}
		#service.gakudou .sec h2:after{
			background: url("../img/tit_r.png") no-repeat center/cover;
			right: 0
		}
			#service.gakudou .sec .lead{
				font-weight: bold;
				font-size: 16px;
				text-align: center;
				line-height: 2;
			}
	
	/* サービス内容
	---------------------------------*/
	#service.gakudou .btn{
		width: 215px;
		border: solid 3px #66cbaf;
		border-radius: 18px;
		position: relative;
		text-align: center;
		color: #0da997;
		padding: 18px 25px 18px 5px;
		box-sizing: border-box;
		line-height: 1;
		display: block;
		font-weight: bold;
		margin: 20px 0 0;
	}
	#service.gakudou .btn + .btn{
		margin-top: 10px;
	}
		#service.gakudou .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.gakudou .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.gakudou #exp{
		position: relative;
	}
	#service.gakudou #exp .content{
		position: relative;
	}
	
	/* 利用可能条件
	---------------------------------*/
	#service.gakudou #req{
		position: relative;
	}
	#service.gakudou #req .deco{
		width: 110px;
		right: -60px;
		z-index: 101;
		top: -120px;
	}
	#service.gakudou #req h2{
		margin-bottom: 40px;
	}
	#service.gakudou #req .wrap{
	}
		#service.gakudou #req .wrap > dl{
			position: relative;
			margin: 0 auto;
			font-weight: bold;
			opacity: 0;
			transition-delay: .2s;
			transition-duration: 1s;
			transform: translateY(10px);
		}
	#service.gakudou #req .wrap > dl.view.on{
		opacity: 1;
    	transform: translateY(0px);
	}
		#service.gakudou #req .wrap > dl + dl{
			margin-top: 30px;
		}
			#service.gakudou #req .wrap > dl > dt{
				position: absolute;
				top: -8px;
				text-align: center;
				right: 0;
				left: 0;
				margin: 0 auto;
				font-size: 14px;
			}
			#service.gakudou #req .wrap > dl > dd{
				background: url("../img/gakudou/box_req2.png") no-repeat top center/cover;
				width: 220px;
				height: 220px;
				margin: 0 auto;
				text-align: center;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				font-size: 16px;
			}
				#service.gakudou #req .wrap > dl:nth-of-type(1) > dd{
					background: url("../img/gakudou/box_req.png") no-repeat top center/cover;
				}
	
	/* 過ごし方・活動例
	---------------------------------*/
	#service.gakudou #ex ul{
		position: relative;
		width: 90%;
		margin: 0 auto;
	}
	#service.gakudou #ex ul:after{
		display: none;
	}
		#service.gakudou #ex ul li{
			position: relative;
			opacity: 0;
			transition-delay: .2s;
			transition-duration: 1s;
			transform: translateY(10px);
		}
	#service.gakudou #ex ul li.view.on{
		opacity: 1;
    	transform: translateY(0px);
	}
			#service.gakudou #ex ul li:nth-of-type(1){
				background: url("../img/gakudou/ex01.jpg") no-repeat center/cover;
				border-radius: 16px;
				height: 300px;
			}
			#service.gakudou #ex ul li:nth-of-type(3){
				background: url("../img/gakudou/ex02.jpg") no-repeat center/cover;
				border-radius: 16px;
				height: 300px;
			}
			#service.gakudou #ex ul li:nth-of-type(4){
				background: url("../img/gakudou/ex03.jpg") no-repeat center/cover;
				border-radius: 16px;
				height: 300px;
			}
			#service.gakudou #ex ul li + li{
				margin-top: 20px;
			}
				#service.gakudou #ex ul li > img{
					border-radius: 16px;
				}
					#service.gakudou #ex ul li:first-of-type > img{
						border-radius:0 16px 16px 0;
					}
					#service.gakudou #ex ul li:last-of-type > img{
						border-radius: 16px 0 0 16px;
					}
				#service.gakudou #ex ul li .fl{
				}
				#service.gakudou #ex ul li .fl:last-of-type{
					margin-top: -40px;
				}
				#service.gakudou #ex ul li:nth-of-type(2){
				}
				#service.gakudou #ex ul li:nth-of-type(2) dl{
					background: url("../img/gakudou/box02.png") no-repeat center/100% 100%;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					justify-content: center;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					box-sizing: border-box;
					padding: 30px 40px 0;
					font-weight: bold;
					font-size: 16px;
				}
					#service.gakudou #ex ul li dl dt{
						position: relative;
						z-index: 2;
						color: #0da997;
						margin-bottom: 10px;
					}
					#service.gakudou #ex ul li dl dd{
						position: relative;
						z-index: 2;
					}
					#service.gakudou #ex ul li .fl img{
						display: block;
						border-radius: 0;
					}
	
	/* 運営学童保育室
	---------------------------------*/
	#hoiku ul{
		margin-top: 40px;
	}
	#hoiku ul:after{
		display: none;
	}
	#hoiku ul li{
		width: 278px;
		height: 278px;
		position: relative;
		text-align: center;
		margin: 0 auto 40px;
	}
	#hoiku ul li dl{
		font-weight: bold;
		font-size: 16px;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		flex-direction: column;
		height: 100%;
		background-color: #f7f7f7;
		position: relative;
	}
	#hoiku ul li:after,
	#hoiku ul li dl:after,
	#hoiku ul li:before,
	#hoiku ul li dl:before{
		content: '';
		display: block;
		position: absolute;
		background: url("../img/gakudou/flame_br.png") no-repeat center/cover;
		width: 65px;
		height: 66px;
		z-index: 2;
	}
	#hoiku ul li:after{
		top: 0;
		left: 0;
		transform: rotate(180deg);
	}
	#hoiku ul li:before{
		top: 0;
		right: 0;
		transform: rotate(-90deg);
	}
	#hoiku ul li dl:after{
		bottom: 0;
		left: 0;
		transform: rotate(90deg);
	}
	#hoiku ul li dl:before{
		bottom: 0;
		right: 0;
	}
	#hoiku ul li dl dt{
		margin-bottom: 15px;
	}
	#hoiku .deco{
		width: 110px;
		left: -50px;
		bottom: 330px;
	}
	
	/* お問い合わせ
	---------------------------------*/
	#contact .btnArea{
		margin-top: 10px;
	}
	#contact .btnArea .btn{
		margin: 0 auto;
	}
	#contact .btnArea p{
		text-align: center;
		margin-bottom: 30px;
	}
	#contact .deco{
		top: -130px;
    	right: 20px;
		max-width: 155px;
    	width: 23vw;
	}
	
	
	
	
}