@charset "UTF-8";

#kv {
	width: 100%;
	height: 25em;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
	#kv .circle {
		position: absolute;
		content: '';
		display: block;
		margin: auto;
		padding: 0;
	}
		#kv .circle.kv1 {
			width: 35%;
			top: 3em;
			left: -8%;
			z-index: 1;
		}
		#kv .circle.kv2 {
			width: 60%;
			top: 0;
			left: 16%;
			z-index: 3;
		}
		#kv .circle.kv3 {
			width: 45%;
			top: 2em;
			right: -10%;
			z-index: 2;
		}
		#kv .circle.kv4 {
			width: 25%;
			bottom: 7em;
			right: 0;
			z-index: 1;
		}
		#kv .circle.kv5 {
			width: 40%;
			bottom: 0;
			right: 10%;
			z-index: 2;
		}
		#kv .circle.kv6 {
			width: 30%;
			bottom: 0;
			left: 2%;
			z-index: 2;
		}
		#kv .circle.kv7 {
			width: 20%;
			bottom: 5em;
			left: 10%;
			z-index: 1;
		}
		#kv .circle img {
			width: 100%;
			height: auto;
		}
		#kv .circle.kv_main {
			width: 70%;
			height: 17.5em;
			background: rgba(255,255,255,0.85);
			border: 3px solid #4FBFC8;
			border-radius: 40% 50% 50% 50%/50% 40% 55% 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			bottom: 0;
			left: 10%;
			z-index: 3;
		}
			#kv .circle.kv_main:before {
				position: absolute;
				content: '';
				width: 40%;
				height: 10em;
				background: url(../images/top/kv_camp.png) center / contain no-repeat;
				top: -2em;
				left: -10%;
				z-index: 4;
				animation: expansion 5s ease-in-out infinite;
			}
			#kv .circle.kv_main div {
				margin: 0 auto;
				padding: 0;
				font-size: 5.6vw;
				line-height: 120%;
				color: #4DBFC6;
				font-family: 'RocknRoll One', sans-serif;
				font-weight: 500;
			}
			#kv .circle.kv_main p.camp {
				margin: 5% auto 2%;
				padding: 0;
				font-size: 4.6vw;
				line-height: 140%;
				color: #FC5F96;
			}
				#kv .circle.kv_main p.camp span {
					font-size: 4.0vw;
					line-height: 140%;
				}
			#kv .circle.kv_main p.btm {
				margin: 0 auto;
				padding: 0;
				font-size: 3.6vw;
				line-height: 140%;
				color: #796A54;
			}


/* 私たちにとっても「家族」です */
#first_cont {
	opacity: 1;
	width: 100%;
	margin: 10% auto 0;
	padding: 0 4% 15%;
	text-align: left;
}
	#first_cont h3 {
		margin: 0;
		padding: 0;
		font-size: 5.0vw;
		line-height: 160%;
		color: #4CB0A0;
		text-align: left;
		font-family: 'RocknRoll One', sans-serif;
		font-weight: 500;
	}
		#first_cont h3 span {
			font-size: 3.8vw;
			line-height: 160%;
		}
	#first_cont .first_about {
		margin: 5% auto 0;
		padding: 0;
	}
		#first_cont .first_about .txt {
			width: 100%;
			margin: 0;
			padding: 0;
			line-height: 180%;
			position: relative;
			z-index: 2;
		}
			#first_cont .first_about .txt p {
				margin: 3% 0 0;
				padding: 0;
			}
				#first_cont .first_about .txt p:first-of-type {
					margin: 0;
				}
		#first_cont .first_about .img {
			margin: -15% auto 0;
			padding: 0;
			text-align: right;
			position: relative;
			z-index: 1;
		}
			#first_cont .first_about .img img {
				width: 60%;
				height: auto;
			}

/* 私たちができること */
#can_do {
	width: 100%;
	margin: 10% auto 0;
	padding: 10% 4% 15%;
	background: #fff;
}
	#can_do h3 {
		margin: 0;
		padding: 0;
		font-size: 4.4vw;
		line-height: 160%;
		color: #4CB0A1;
		font-weight: 500;
	}
	#can_do h4 {
		margin: 0;
		padding: 0;
		font-size: 4.4vw;
		line-height: 160%;
		font-weight: 500;
	}
	#can_do p {
		width: 100%;
		margin: 3% auto 0;
		padding: 0;
		font-size: 3.6vw;
		line-height: 160%;
		text-align: left;
	}
	#can_do ul.can_do_cont {
		margin: 0 auto;
		padding: 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}
		#can_do ul.can_do_cont li {
			width: 40%;
			margin: 5% 3% 0;
			padding: 0;
		}
			#can_do ul.can_do_cont li img {
				width: 90%;
				height: auto;
			}
				#can_do ul.can_do_cont li:nth-child(1) img {
					animation: move1 5s ease-in-out 1s infinite;
				}
				#can_do ul.can_do_cont li:nth-child(2) img {
					animation: move1 5s ease-in-out 1.5s infinite;
				}
				#can_do ul.can_do_cont li:nth-child(3) img {
					animation: move1 5s ease-in-out 2s infinite;
				}
				#can_do ul.can_do_cont li:nth-child(4) img {
					animation: move1 5s ease-in-out 2.5s infinite;
				}
				#can_do ul.can_do_cont li:nth-child(5) img {
					animation: move1 5s ease-in-out 3s infinite;
				}
			#can_do ul.can_do_cont li span {
				height: 3.2em;
				color: #4DB0A2;
				display: flex;
				justify-content: center;
				align-items: center; 
			}

/* ファミーユの特徴について */
#top_about {
	margin: 0 auto;
	padding: 10% 0 10%;
	background: #D7F2E3;
	position: relative;
	z-index: 1;
	transform: translate3d(0,0,0);
}
	#top_about:before {
		position: absolute;
		content: '';
		width: 150%;
		height: 22px;
		display: block;
		margin: 0;
		padding: 0;
		background: url(../images/top/about_top.png) left top repeat-x;
		top: -22px;
		left: 0;
		animation: move2 10s linear infinite;
	}
	#top_about:after {
		position: absolute;
		content: '';
		width: 150%;
		height: 22px;
		display: block;
		margin: 0;
		padding: 0;
		background: url(../images/top/about_btm.png) left top repeat-x;
		bottom: -22px;
		left: 0;
		animation: move2 12s linear infinite;
	}
	#top_about div.about_in {
		width: 100%;
		margin: 0 auto;
		padding: 0 4%;
		position: relative;
		z-index: 3;
		transform: translateZ(1px);
	}
		#top_about div.about_in h3 {
			opacity: 0;
			width: 90%;
			margin: 0 auto;
			padding: 3% 3% 4%;
			background: rgba(255,255,255,0.5);
			border-radius: 20% 30% 15% 20%/50% 50% 50% 55%;
		}
			#top_about.scrollin div.about_in h3 {
				animation: anim1 0.5s ease 1.0s 1 forwards;
			}
			#top_about div.about_in h3 span {
				margin: 0 auto;
				padding: 0;
				font-size: 3.6vw;
				line-height: 120%;
				color: #4CB0A1;
				font-family: 'Baloo Chettan 2', cursive;
				font-weight: 700;
			}
			#top_about div.about_in h3 p {
				margin: 0 auto;
				padding: 0;
				font-size: 5.6vw;
				line-height: 120%;
				font-family: 'RocknRoll One', sans-serif;
			}
		#top_about div.about_in ul {
			width: 100%;
			margin: 0 auto;
			padding: 5% 0 0;
			list-style: none;
		}
			#top_about div.about_in ul li {
				width: 75%;
				margin: 10% auto 0;
				padding: 8% 3% 10%;
				background: #fff;
				position: relative;
			}
				#top_about div.about_in ul li span {
					position: absolute;
					content: '';
					width: 28%;
					height: 0;
					padding: 5% 0 23%;
					font-size: 9.0vw;
					line-height: 120%;
					color: #fff;
					font-weight: bold;
					font-family: 'Baloo Chettan 2', cursive;
					background: url(../images/top/about_pop.png) center / contain no-repeat;
					top: -5%;
					left: 0;
					display: flex;
					justify-content: center;
				}
				#top_about div.about_in ul li:nth-of-type(4) {
					border-radius: 40% 50% 50% 50%/50% 40% 55% 50%;
				}
				#top_about div.about_in ul li:nth-of-type(1),
				#top_about div.about_in ul li:nth-of-type(6) {
					border-radius: 40% 50% 50% 50%/50% 40% 55% 50%;
				}
				#top_about div.about_in ul li:nth-of-type(2),
				#top_about div.about_in ul li:nth-of-type(7) {
					border-radius: 50% 50% 45% 48%/50% 40% 55% 52%;
				}
				#top_about div.about_in ul li:nth-of-type(3) {
					border-radius: 50% 50% 45% 48%/50% 40% 55% 52%;
				}
				#top_about div.about_in ul li:nth-of-type(5) {
					border-radius: 50% 50% 45% 48%/50% 40% 55% 52%;
				}
					#top_about div.about_in ul li.scrollin span {
						animation: move1 4s ease-in-out 1s infinite;
					}
				#top_about div.about_in ul li img {
					width: 50%;
					height: auto;
				}
				#top_about div.about_in ul li h4 {
					margin: 3% auto 0;
					padding: 0;
					font-size: 4.8vw;
					line-height: 140%;
					font-family: 'RocknRoll One', sans-serif;
					font-weight: 500;
				}
				#top_about div.about_in ul li p {
					margin: 2% auto 0;
					padding: 0;
					font-size: 3.6vw;
					line-height: 160%;
				}
				#top_about div.about_in ul li small {
					display: block;
					margin: 1% auto 0;
					padding: 0;
					font-size: 3.2vw;
					line-height: 160%;
				}
		#top_about div.about_btm {
			margin: 5% auto 0;
			padding: 0;
		}
			#top_about div.about_btm p {
				margin: 0;
				padding: 0 0 0 1em;
				text-indent: -1em;
				font-size: 3.4vw;
				line-height: 160%;
				text-align: left;
				display: flex;
				justify-content: flex-end;
			}
	#top_about img.bg_circle {
		position: absolute;
		display: block;
		z-index: 2;
		transform: translateZ(1px);
	}
		#top_about img.bg_circle.circle1 {
			top: 10em;
			left: 5%;
		}
		#top_about img.bg_circle.circle2 {
			top: 64em;
			right: -4%;
		}
		#top_about img.bg_circle.circle3 {
			bottom: 10em;
			left: 2%;
		}
		#top_about img.bg_circle.circle4 {
			top: 38em;
			right: 2%;
		}
		#top_about img.bg_circle.circle5 {
			bottom: 30em;
			left: -20%;
		}
		#top_about img.bg_circle.circle6 {
			bottom: 40em;
			right: 0;
		}

/* 料金について */
#top_price {
	width: 100%;
	margin: 20% auto 0;
	padding: 0 4%;
}
	#top_price .img {
		width: 100%;
		margin: 0;
		padding: 0;
	}
		#top_price .img img {
			width: 100%;
			height: auto;
			border-radius: 3em 3em 0 0;
		}
	#top_price .txt {
		width: 100%;
		margin: 0;
		padding: 4% 3% 8%;
		background: #fff;
		border-right: 4px solid #F4F4F2;
		border-bottom: 4px solid #F4F4F2;
		border-left: 4px solid #F4F4F2;
		border-radius: 0 0 3em 3em;
	}
		#top_price .txt h3 {
			margin: 0;
			padding: 0;
			font-size: 5.6vw;
			line-height: 120%;
			text-align: left;
			font-family: 'RocknRoll One', sans-serif;
			font-weight: 500;
		}
		#top_price .txt p {
			margin: 3% 0 0;
			padding: 0;
			font-size: 3.6vw;
			line-height: 160%;
			text-align: left;
		}
			#top_price .txt p:first-of-type {
				margin: 5% 0 0;
			}

/* 商品/ブログ */
#top_productsblog {
	width: 100%;
	margin: 0 auto;
	padding: 0 4%;
}
	#top_productsblog div.productsblog_box {
		width: 100%;
		margin: 20% auto 0;
		padding: 0;
	}
		#top_productsblog div.productsblog_box .img {
			width: 100%;
			margin: 0;
			padding: 0;
		}
			#top_productsblog div.productsblog_box .img img {
				width: 100%;
				height: auto;
				border-radius: 3em 3em 0 0;
			}
		#top_productsblog div.productsblog_box .txt {
			width: 100%;
			margin: 0;
			padding: 4% 3% 8%;
			background: #fff;
			border-right: 4px solid #F4F4F2;
			border-bottom: 4px solid #F4F4F2;
			border-left: 4px solid #F4F4F2;
			border-radius: 0 0 3em 3em;
		}
			#top_productsblog div.productsblog_box .txt h3 {
				margin: 0;
				padding: 0;
				font-size: 5.6vw;
				line-height: 120%;
				text-align: left;
				font-family: 'RocknRoll One', sans-serif;
				font-weight: 500;
			}
			#top_productsblog div.productsblog_box .txt p {
				margin: 3% 0 0;
				padding: 0;
				font-size: 3.6vw;
				line-height: 160%;
				text-align: left;
			}
		#top_productsblog div.productsblog_box .btm_txt {
			margin: 2% 2% 0;
			padding: 0 0 0 1em;
			text-indent: -1em;
			font-size: 3.2vw;
			line-height: 160%;
			text-align: left;
		}

/* 送迎サービス */
#top_transfer {
	margin: 20% 4% 0;
	padding: 8% 5% 8%;
	background: #D7F2E3;
	border-radius: 3em;
}
	#top_transfer .txt {
		width: 100%;
		margin: 0;
		padding: 0;
		position: relative;
	}
		#top_transfer .txt div {
			position: absolute;
			display: block;
			content: '';
			width: 90%;
			height: 0;
			margin: 0 auto;
			padding: 6% 0 14.14%;
			font-size: 4.0vw;
			line-height: 120%;
			font-family: 'RocknRoll One', sans-serif;
			font-weight: 500;
			background: url(../images/top/transfer_ttl.png) center / contain no-repeat;
			top: -4em;
			left: -2em;
			animation: expansion 5s ease-in-out 1s infinite;
		}
		#top_transfer .txt h3 {
			margin: 0;
			padding: 0;
			font-size: 5.6vw;
			line-height: 120%;
			text-align: left;
			font-family: 'RocknRoll One', sans-serif;
			font-weight: 500;
		}
		#top_transfer .txt p {
			margin: 3% 0 0;
			padding: 0;
			font-size: 3.6vw;
			line-height: 160%;
			text-align: left;
		}
	#top_transfer .transfer_btn {
		width: 100%;
		margin: 9em 0 0;
		padding: 0;
		position: relative;
		z-index: 1;
	}
		#top_transfer .transfer_btn img {
			position: absolute;
			display: block;
			width: 80%;
			height: auto;
			top: -8.5em;
			left: 10%;
			z-index: -1;
			animation: move3 2s ease-in-out 1s infinite;
		}

/* 各種決済（トップ） */
#credit_cont {
	margin: 15% auto 15%;
}

/* お知らせ・インスタグラム */
#top_infoinsta {
	width: 100%;
	margin: 0 auto;
	padding: 10% 4%;
	background: #fff;
}
	#top_infoinsta div.info_cont {
		width: 100%;
		margin: 0 auto;
		padding: 3% 0 0;
		text-align: left;
	}
		#top_infoinsta div.info_cont dl {
			width: 100%;
			margin: 0;
			padding: 0;
		}
			#top_infoinsta div.info_cont dl dt {
				margin: 5% 0 0;
				padding: 0;
				color: #4CB0A1;
			}
			#top_infoinsta div.info_cont dl dd {
				margin: 0;
				padding: 0;
			}

/* 共通 */
div.link_btn {
	padding: 0;
}
	div.link_btn a {
		display: block;
		width: 100%;
		margin: 0 auto;
		padding: 0;
		font-size: 3.8vw;
		line-height: 3.5em;
		text-decoration: none;
		color: #fff;
		background: #4DB0A2;
		border-radius: 1.75em;
	}
/* コンテンツタイトル */
h3.cont_ttl {
	width: 90%;
	padding: 3% 3% 4%;
	background: rgba(235,249,241,0.5);
	border-radius: 20% 30% 15% 20%/50% 50% 50% 55%;
}
	h3.cont_ttl span {
		margin: 0 auto;
		padding: 0;
		font-size: 3.6vw;
		line-height: 120%;
		color: #4CB0A1;
		font-family: 'Baloo Chettan 2', cursive;
		font-weight: 700;
	}
	h3.cont_ttl p {
		margin: 0 auto;
		padding: 0;
		font-size: 5.6vw;
		line-height: 120%;
		font-family: 'RocknRoll One', sans-serif;
		font-weight: 500;
	}