@charset "utf-8";
/* 2017/11/10更新 */

/*//////////////////////////////////////////
//////////////// 共通style ////////////////
/PCとスマホ共通のデザインはこれ以下に指定/
///////////////////////////////////////*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
* {
	margin: 0;
	padding: 0;font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif,monospace;
}

a {text-decoration: none;}

.fixed {
	position: fixed;
	top: 0;
	height: 70px;
	z-index: 1;
	}

.float_left{float: left;}
.float_right{float: right;}

.clearText {
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	}

.bold{
font-weight: bold;
}

/* contentsごとの背景 */
section,
header{
	height: 100vh;
	}
#screen1 {
	background: url(../img/fv_img1.jpg);
	position: relative;
	background-size: cover;}
#screen2 {
	height: auto;
	background: url(../img/bg1.jpg) repeat;
	}
#screen3,
#screen5{background: white;}
#screen4{
	height: auto;
}
	

/* TOP背景アニメーション */
  .test-animation{
  /* ５秒かけてアニメーションする */
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  /* 4秒待ってからアニメーションする */
  -webkit-animation-duration: 4s;
  animation-delay:4s;
}

/* メニューのデザイン */
nav {
	position: absolute;
	bottom: 0;
	margin-bottom: 0;
	width: 100%;
	height: 70px;
	background:black;
	opacity: 0.95;
	z-index: 10000;
	overflow: hidden;
	}
	
	nav li {
		width: 200px;
		height: 70px;
		display: inline-block;
		padding: 25px 10px;
		border-right: 1px solid #0D0D0D;
		line-height:20px;
		}
	
	nav li:first-child{
		display: inline-block;
		padding: 24px 10px;
		border-left: 1px solid #0D0D0D;
		}
		
	nav li a {
		width: 200px;
		display: inline-block;
		color: white;/* メニューの文字色 */
		text-transform: uppercase;
		}
	
	@media only screen and (max-width:750px) {
		nav li {padding: 24px 4px;}
		nav li a {font-size: 14px;}
		}
		
	nav .btn{
		font-family: sans-serif;
		text-transform: uppercase;
		text-align: center;
		position: relative;
		text-decoration: none;
		display:inline-block;
		}
	
	nav .btn::before {
		content: '';
		position: absolute;
		bottom: 0%;
		left: 0px;
		width: 100%;
		height: 3px;/* メニューのアンダーラインの太さ */
		background: #43b29d;/* メニューのアンダーラインの色 */
		display: block;
		-webkit-transform-origin: right top;
		-ms-transform-origin: right top;
		transform-origin: right top;
		-webkit-transform: scale(0, 1);
		-ms-transform: scale(0, 1);
		transform: scale(0, 1);
		-webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
		transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
		}
	
	nav .btn:hover::before {
		-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
		transform-origin: left top;
		-webkit-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		transform: scale(1, 1)
		}



/*//////////////////////////////////////////
///////////////// PC-style ////////////////
/パソコン用のデザインはこれ以下に指定する/
///////////////////////////////////////*/

@media (min-width: 750px) {

body {
	font-size: 18px;
	text-align: center;
	}
	
	/* PCページの横幅設定 */
	#containar{
		width:1000px;
		background:white;
		margin:0 auto;
		border-left:1px solid #F8F2F2;
		border-right:1px solid #F8F2F2;
		}

	/* スマホ用のコンテンツを非表示にする */
	.sp{display:none;}

	/* 光るリンク */
	.hover:hover{
		filter:alpha(opacity=80);
		opacity:0.8;
		}

	/* PC-TOP画像 */
	.top{
	position: absolute;
	width: 100%;
	height: 30px;
	z-index: 10000;
	}

	h1{
	width: 300px;
	font-size: 10px;
	text-align: left;
	color: white;
	z-index: -1000000;
	font-weight: normal;
	}

	/* PCの右上の電話番号 */
	.top .fv_tel{
		width: 262px;
		height: 25px;
		margin-right: 10px;
		display: block;
		float:right;
	}	

	/* PCのロゴの位置 */
	.fv_logo{
		position: absolute;
		top: -80px;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 425px;
		height: 65px;
		z-index: 10000;
		}	


		
/* PC-PRICE */	
#screen2{
	padding-bottom: 40px;
	}
	
	#screen2 h2{
	width: 90px;
	padding: 60px 0 0 0;
	margin: 0 auto;
	margin-bottom: 40px;
	border-bottom: 6px solid;
	}
	#screen2 p{
	margin-bottom: 40px;
	}
	
	#screen2 table {
	width: 900px;
	margin: 0 auto;
	margin-bottom: 40px;
	border-collapse:collapse;
	}
		
	th,td {
	padding:5px;
	text-align:center;
	}
	th {
	background-color:black;
	color: white;
	font-weight: normal;
	}
	td {
	border-bottom: 1px dashed #DDDDDD;
	
	}
	td.col03 {
	text-align:right;
	}
	
	/* テーブル列幅指定 */
	.col01 {
	width:65%;
	text-align: left;
	padding: 10px 20px;
	}
	.col02 {
	width:120px;
	}
	.col03 {
	width:35%;
	text-align: right;
	padding: 10px 20px;
	}
	.col04 {
	width:200px;
	}

		
		
/* PC-保育 */	
#screen3{
	height: 750px;
	padding-bottom: 40px;
	}
	
	#screen3 h2{
	width: 90px;
	padding: 60px 0 0 0;
	margin: 0 auto;
	margin-bottom: 40px;
	border-bottom: 6px solid;
	}
	#screen3 p{
	margin-bottom: 40px;
	}
	
	.w90px{
	width: 900px;
	overflow: hidden;
	margin: 0 auto;
	
	}
	
	.w90px img{
	margin-left: 10px;
	}
	
	.w90px ul li{
	width: 250px;
	float: left;
	margin-top: 40px;
	margin-left: 65px;
	list-style: none;
	text-align: left;
	}
	
	.w90px ul li:first-child{
	margin-left: 15px;
	}
	
		
/* PC-STAFF */	
#screen4{
height: auto;
overflow: hidden;
	padding-bottom: 70px;
	}
	
	#screen4 h2{
	width: 90px;
	padding: 60px 0 0 0;
	margin: 0 auto;
	margin-bottom: 40px;
	border-bottom: 6px solid;
	}
	#screen4 p{
	margin-bottom: 40px;
	}
	
	#screen4 .bold{
	clear: both;
	font-weight: bold;
	text-align: left;
	padding-top: 20px;
	}
	
	#screen4 .staff1,
	#screen4 .staff2{
	width: 900px;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 20px;
	text-align: left;
	}
	
	#screen4 .staff1 img,
	#screen4 .staff2 img{
	margin-right: 10px;
	width: 190px;
	}
		
	#screen4 .staff1 p,
	#screen4 .staff2 p{
	margin-top: 5px;
	}
	
	#screen4 .staff1 .bg_white,	
	#screen4 .staff2 .bg_white{
	width: 650px;
	height: 240px;
	overflow: hidden;
	margin-bottom: 10px;
	padding:0 10px;
	background: white;
	border-radius: 10px;
	float: right;
	}
	
	#screen4 .staff1 h3,
	#screen4 .staff2 h3{
	margin-bottom: 20px;
	border-bottom: 1px solid;
	}
	
	#screen4 .staff1 h3 .font_large,
	#screen4 .staff2 h3 .font_large{
	font-size:27px;
	}
	
	#screen4 .staff1 .border_bottom{
	width: 320px;
	display: inline-block;
	}		
	#screen4 .staff2 .border_bottom{
	width: 360px;
	display: inline-block;
	}

	#screen4 .staff2 hr{
	margin-bottom: 60px;
	}
	
	.slider{
	width: 900px!important;
	margin-top: 10px!important;
	}


		
/* PC-ACCESS */	
#screen5{
	height: auto;
	overflow: hidden;
	padding-bottom: 70px;
	}
	
	#screen5 h2{
	width: 98px;
	padding: 60px 0 0 0;
	margin: 0 auto;
	margin-bottom: 40px;
	border-bottom: 6px solid;
	}
	#screen5 p{
	margin-bottom: 40px;
	}

	.google-maps {
	position: relative;
	padding-bottom: 3%; 
	overflow: hidden;
	}

	.google-maps iframe {
	width: 100% !important;
	height: 400px !important;
	position:inherit;
	top: 0;
	left: 0;
	}
	
	.access{
	width:900px;
	height:auto;
	margin:0 auto;
	text-align:left;
	}
	
/* PC-footer */
footer{
	width:100%;
	overflow:hidden;
	background:black;
	text-align:right;
	color:white;
	padding:30px 0;
	}

	.footer_inner{
	width:900px;
	margin:0 auto;
	}
	
	footer small{
		color:#333;
	}
	
}



/*//////////////////////////////////////////
////////////// Tablet-style ///////////////
/タブレットのデザインはこれ以下に指定する/
///////////////////////////////////////*/
@media (max-width: 1000px){
	.br_pconly{display:none;}
	
	#screen2 table {
	width: 95%;
	margin: 0 auto;
	margin-bottom: 30px;
	border-collapse:collapse;
	}
		
	th,td {
	padding:5px;
	text-align:center;
	}
	th {
	background-color:black;
	color: white;
	font-weight: normal;
	}
	td {
	border-bottom: 1px dashed #DDDDDD;
	
	}
	td.col03 {
	text-align:right;
	}
	
	/* テーブル列幅指定 */
	.col01 {
	width:65%;
	text-align: left;
	padding: 10px 20px;
	}
	.col02 {
	width:40px;
	}
	.col03 {
	width:35%;
	text-align: right;
	padding: 10px 20px;
	}
	.col04 {
	width:200px;
	}	
	
	

/* tablet-保育 */	
#screen3{
	height: auto;
	padding-top: 20px;
	}
	
	#screen3 h2{
	width: 90px;
	padding: 30px 0 0 0;
	margin: 0 auto;
	margin-bottom: 30px;
	border-bottom: 6px solid;
	}
	#screen3 p{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 30px;
	text-align: left;
	}	
	
	.w90px{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	}	
	
	.w90px img{
	width: 46%;
	float: left;
	text-align: center;
	margin-left: 20px;
	margin-bottom: 20px;
	}	
	
	.w90px ul li{
	width: 31%;
	float: left;
	margin-top: 40px;
	margin-left: 10px;
	list-style: none;
	text-align: left;
	}
	
	.w90px ul li:first-child{
	margin-left: 20px;
	}
	

/* tablet-STAFF */
#screen4{
	width:auto;
	height: auto;
	padding-top: 20px;
	}
	
	#screen4 h2{
	width: 90px;
	padding: 30px 0 0 0;
	margin: 0 auto;
	margin-bottom: 30px;
	border-bottom: 6px solid;
	}
	#screen4 p{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 10px;
	text-align: left;
	}
	
	#screen4 .bold{
	clear: both;
	font-weight: bold;
	text-align: center;
	padding-top: 20px;
	}
	
	#screen4 .staff1,
	#screen4 .staff2{
	width: 90%;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 20px;
	text-align: center;
	}
	
	#screen4 .staff1 img,
	#screen4 .staff2 img{
	width: 80%;
	max-width: 300px;
	margin:0 auto;
	margin-bottom:40px;
	text-align:center;
	}
	
	#screen4 .staff1 .float_left,
	#screen4 .staff2 .float_left{
	float: none !important;
	clear:both;
	}
	
	#screen4 .staff1 p,
	#screen4 .staff2 p{
	margin-top: 5px;
	}
	
	#screen4 .staff1 .bg_white,	
	#screen4 .staff2 .bg_white{
	width: auto;
	height: auto;
	overflow: hidden;
	margin-bottom: 10px;
	padding:0 10px;
	background: white;
	border-radius: 10px;
	float: right;
	}
	
	#screen4 .staff1 h3,
	#screen4 .staff2 h3{
	margin-bottom: 20px;
	border-bottom: 1px solid;
	}
	
	#screen4 .staff1 h3 .font_large,
	#screen4 .staff2 h3 .font_large{
	font-size:27px;
	}
	
	#screen4 .staff1 .border_bottom{
	width: 320px;
	display: inline-block;
	}		
	#screen4 .staff2 .border_bottom{
	width: 360px;
	display: inline-block;
	}

	#screen4 .staff2 hr{
	margin-bottom: 60px;
	}	
	
	.slider{
	width: 70%!important;
	margin-top: 10px!important;
	}
	
	
/* tablet-ACCES */	
#screen5{	
	width:auto;
	height: auto;
	padding-top: 20px;
	}
	
	#screen5 h2{
	width: 98px;
	padding: 30px 0 0 0;
	margin: 0 auto;
	margin-bottom: 30px;
	border-bottom: 6px solid;
	}
	#screen5 p{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 30px;
	text-align: center;
	}


	.google-maps {
	height:auto;
	position: relative;
	padding-bottom: 1%; 
	overflow: hidden;
	}

	.google-maps iframe {
	width: 100% !important;
	height: 400px !important;
	position:inherit;
	top: 0;
	left: 0;
	}
	
	.access{
	width:90%;
	margin:30px auto;
	text-align:left;
	}
	
	#screen5 .access p{
	width: 100%;
	margin: 0 auto;
	margin-bottom: 30px;
	text-align: left;
	}
	
	
/* Tablet-footer */
footer{
	width:100%;
	overflow:hidden;
	background:black;
	text-align:right;
	color:white;
	padding:30px 0;
	}

	.footer_inner{
	width:90%;
	margin:0 auto;
	}
	
	footer img{
	width:70%;
	max-width:260px;
	}
	
	footer small{
		color:#333;
	}
	
	
}	
	
	



/*//////////////////////////////////////////
///////////////// SP-style ////////////////
//スマホ用のデザインはこれ以下に指定する//
///////////////////////////////////////*/

@media (max-width: 750px) { 

body {
	font-size: 9px;
	font-size: 0.9rem;
	text-align: center;
	}
	
	/* スマホページの横幅設定 */
	#containar{
		width:100%;
		margin:0 auto;
		}
		
		#screen1{
		margin-top: -70px;
		}
		
	/* PC用のコンテンツを非表示にする */
	.pc{display:none;}
	
	/* TOP画像 */
	.top{
	position: absolute;
	width: 100%;
	padding-top: 70px;
	z-index: 10000;
	}

	h1{
	font-size: 3px;
	font-size: 0.3rem;
	text-align: left;
	color: white;
	z-index: -1000000;
	font-weight: normal;
	}

	/* PCの右上の電話番号 */
	.top .fv_tel img{
		width: 50%;
		margin-right: 10px;
		display: block;
		float:right;
	}

	/* スマホのロゴの位置 */
	.fv_logo img{
		position: absolute;
		top: -40px;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 80%;
		max-width: 425px;
		z-index: 10000;
		}	

	nav li,
	nav li a,
	nav li:first-child{
		width:auto;
		border-right: none;
		border-left: none;
		margin-right: 5px;
		}
		
/* SP-PRICE */	
#screen2{
	padding-bottom: 30px;
	}
	
	#screen2 h2{
	width: 90px;
	padding: 30px 0 0 0;
	margin: 0 auto;
	margin-bottom: 30px;
	border-bottom: 6px solid;
	}
	#screen2 p{
	margin-bottom: 30px;
	}
	
	#screen2 table {
	width: 95%;
	margin: 0 auto;
	margin-bottom: 30px;
	border-collapse:collapse;
	}
		
	th,td {
	padding:5px;
	text-align:center;
	}
	th {
	background-color:black;
	color: white;
	font-weight: normal;
	}
	td {
	border-bottom: 1px dashed #DDDDDD;
	
	}
	td.col03 {
	text-align:right;
	}
	
	/* テーブル列幅指定 */
	.col01 {
	width:65%;
	text-align: left;
	padding: 10px 20px;
	}
	.col02 {
	width:40px;
	}
	.col03 {
	width:35%;
	text-align: right;
	padding: 10px 20px;
	}
	.col04 {
	width:200px;
	}	


/* SP-保育 */	
#screen3{
	padding-bottom: 40px;
	overflow: hidden;
	}
	
	#screen3 h2{
	width: 90px;
	padding: 30px 0 0 0;
	margin: 0 auto;
	margin-bottom: 30px;
	border-bottom: 6px solid;
	}
	#screen3 p{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 30px;
	text-align: left;
	}	
	.w90px{
	width: 95%;
	margin: 0 auto;
	}
	
	.w90px img{
	width: 100%;
	max-width: 433px;
	margin: 0 auto;
	float: none;
	text-align: center;
	margin-bottom: 20px;
	}
	
	.w90px ul li{
	width: 100%;
	float: none;
	margin-top: 0;
	margin-bottom: 20px;
	margin-left:0;
	list-style: none;
	text-align: center;
	}
	
	.w90px ul li:first-child{
	margin-left: 0;
	}
	
/* SP-STAFF */
#screen4{
	padding-bottom: 40px;
	overflow: hidden;
	}
	
	#screen4 h2{
	width: 90px;
	padding: 30px 0 0 0;
	margin: 0 auto;
	margin-bottom: 30px;
	border-bottom: 6px solid;
	}
	#screen4 p{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 10px;
	text-align: left;
	}
	
	#screen4 .bold{
	clear: both;
	font-weight: bold;
	text-align: center;
	padding-top: 20px;
	}
	
	#screen4 .staff1,
	#screen4 .staff2{
	width: 90%;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 20px;
	text-align: center;
	}
	
	#screen4 .staff1 img,
	#screen4 .staff2 img{
	width: 80%;
	max-width: 300px;
	margin:0 auto;
	margin-bottom:40px;
	text-align:center;
	}
	
	#screen4 .staff1 .float_left,
	#screen4 .staff2 .float_left{
	float: none !important;
	clear:both;
	}
	
	#screen4 .staff1 p,
	#screen4 .staff2 p{
	margin-top: 5px;
	}
	
	#screen4 .staff1 .bg_white,	
	#screen4 .staff2 .bg_white{
	width: 90%;
	height: auto;
	overflow: hidden;
	margin-bottom: 10px;
	padding:10px;
	background: white;
	border-radius: 10px;
	float: right;
	}
	
	#screen4 .staff1 h3,
	#screen4 .staff2 h3{
	margin-bottom: 20px;
	border-bottom: 1px solid;
	}
	
	#screen4 .staff1 h3 .font_large,
	#screen4 .staff2 h3 .font_large{
	font-size:25px;
	}
	
	#screen4 .staff1 .border_bottom{
	width: 90%;
	display: inline-block;
	}		
	#screen4 .staff2 .border_bottom{
	width: 100%;
	display: inline-block;
	}

	#screen4 .staff2 hr{
	margin-bottom: 60px;
	}
	
	.slider{
	width: 50%!important;
	margin-top: 10px!important;
	}
	
/* SP-ACCES */	
#screen5{	
	width:auto;
	height: auto;
	padding-top: 20px;
	}
	
	#screen5 h2{
	width: 98px;
	padding: 30px 0 0 0;
	margin: 0 auto;
	margin-bottom: 30px;
	border-bottom: 6px solid;
	}
	#screen5 p{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 30px;
	text-align: center;
	}	

	.google-maps {
	height:auto;
	position: relative;
	padding-bottom: 1%; 
	overflow: hidden;
	}

	.google-maps iframe {
	width: 100% !important;
	height: 300px !important;
	position:inherit;
	top: 0;
	left: 0;
	}
	
	.access{
	width:90%;
	margin:30px auto;
	text-align:left;
	}
	
	#screen5 .access p{
	width: 100%;
	margin: 0 auto;
	margin-bottom: 30px;
	text-align: left;
	}	
	
/* sp-footer */
footer{
	width:100%;
	overflow:hidden;
	background:black;
	text-align:center;
	color:white;
	padding:30px 0;
	}

	.footer_inner{
	width:90%;
	margin:0 auto;
	}
	
	footer img{
	width:60%;
	max-width:260px;
	}
	
	footer .float_right,
	footer .float_left{
	float: none !important;
	clear:both;
	}
	
	footer .margin_bottom{
		margin-bottom:30px;
	}
	
	footer small{
		color:#333;
	}

}