@charset "utf-8";

/* CSS Document */

/* ヘッダー
----------------------------------------------- */
header { width:100%; height:900px; text-align:center; background:url(../images/bg_top.png) no-repeat center top;}
header .mainvs { height:450px; text-align:center; margin:0 auto; background:url(../images/bg_mainvs_top.png) no-repeat center bottom;}
header .mainvs img.sp { display:none;}

@media only screen and (max-width: 960px) {
header { width:100%; height:auto; text-align:center; background:#FFF url(../images/bg_sp.png) no-repeat center top; background-size:100%;}
header .mainvs { height:auto; margin:0; padding:0; background:none;}
header .mainvs img.pc { display:none;}
header .mainvs img.sp { display:block;}
}



/* 人と人とのむすびつきを大切に
----------------------------------------------- */
#intro { min-height:780px; padding-bottom:90px; text-align:center; color:#FFF; background:url(../images/bg_top_intro.png) no-repeat center bottom;}
#intro h2 { margin-bottom:40px;}
#intro h3 { margin-bottom:30px; font-size:22px; font-weight:normal;}
#intro p { margin-bottom:30px;}
#intro ul { margin-bottom:15px;}
#intro ul li { margin:0 40px; padding:0; display:inline-block; overflow:hidden;}
#intro a.bt_green {
	margin:0 auto; width:303px; height:66px; padding:15px 20px 0 0; display:block;
	font-size:20px; color:#FFF; text-decoration:none;
	background:url(../images/bg_bt_green.png) no-repeat center; background-size:303px;
	-moz-transition: -moz-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    transition: transform 0.2s linear;}
#intro a.bt_green:hover {
	-webkit-transform: scale(1.2);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);}

@media only screen and (max-width: 960px) {
#intro { min-height:auto; padding:20px 5% 50px 5%;}
#intro h3 { font-size:18px;}
#intro p { max-width:700px; margin-left:auto; margin-right:auto; font-size:14px; text-align:left;}
#intro br.pc { display:none;}
#intro ul li { width:25%; margin:0 2%;}
#intro ul li img { width:100%; max-width:200px;}
}

@media only screen and (max-width: 460px) {
#intro a.bt_green {	width:212px; height:46px; padding:9px 10px 0 0; font-size:16px;
	background:url(../images/bg_bt_green.png) no-repeat center; background-size:212px;}
}


/* Instagram
----------------------------------------------- */
#instagram { min-height:540px; text-align:center; color:#FFF; background:url(../images/bg_top_instagram.png) no-repeat center bottom;}
#instagram h2 { margin:0 auto; padding:50px 40px 0 0;}
#instagram h2 img { width:235px;}
#instagram a.bt_brown {
	margin:0 auto; width:303px; height:66px; padding:15px 20px 0 0; display:block;
	font-size:20px; color:#FFF; text-decoration:none;
	background:url(../images/bg_bt_brown.png) no-repeat center; background-size:303px;
	-moz-transition: -moz-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    transition: transform 0.2s linear;}
#instagram a.bt_brown:hover {
	-webkit-transform: scale(1.2);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);}
#instagram img { margin:0 auto 30px auto;}

@media only screen and (max-width: 960px) {
#instagram { min-height:auto; padding-bottom:50px;}
#instagram h2 img { width:235px;}
}

@media only screen and (max-width: 460px) {
#instagram h2 { padding:30px 40px 0 0;}
#instagram h2 img { width:180px;}
#instagram a.bt_brown {	width:212px; height:46px; padding:9px 10px 0 0; font-size:16px;
	background:url(../images/bg_bt_brown.png) no-repeat center; background-size:212px;}
}


/* 当保育園について
----------------------------------------------- */
#about { width:100%; margin:0 auto; padding:75px 20px 80px; text-align:center; background:url(../images/bg_main.png) repeat center top;}
#about h2 { margin-bottom:20px; text-align:center;}
#about h2 img { width:330px;}
#about .box { width:1000px; margin:0 auto; color:#756A5B;}
#about .box:after { display:block; clear:both; height:0px; visibility:hidden; content:".";}
#about .box h3 { font-size:24px; margin-bottom:5px;}
#about .box img { float:right;}
#about .box dl { float:left; margin:15px auto 0 auto; padding-top:25px; width:450px; border-top:1px dotted #7D7365;}
#about .box dl dd { float:left; margin:0 0 10px 25px;}
#about .box dl dt { width:110px; height:34px;
	clear:both; float:left; margin:0 0 10px 0; padding-top:4px; color:#FFF; text-align:center;
	background:url(../images/top_bg_list.png) no-repeat center top; background-size:110px;}

@media only screen and (max-width: 1000px) {
#about { padding:50px 5%;}
#about .box { width:100%;}
#about .box img { float:none; margin:0 auto 30px auto; width:90%; max-width:450px;}
#about .box dl { float:none; padding-top:25px; width:70%; border-top:1px dotted #7D7365;}
}

@media only screen and (max-width: 650px) {
#about h2 img { width:280px;}
#about .box dl { float:none; width:100%;}
#about .box dl dd { float:none; margin:0 0 10px 0;}
#about .box dl dt { width:100%;}
}

/* 採用情報
----------------------------------------------- */
#recruit { position: fixed; bottom: 20px; right: 0; z-index: 100; max-width: 100%; width: 440px; height: auto;}
#recruit img { width: 100%; height: auto; display: block;}
#recruit img.sp { display:none;}

@media only screen and (max-width: 1000px) {
#recruit {  width: 340px;}
}

@media only screen and (max-width: 650px) {
#recruit img.sp { display:block;}
#recruit img.pc { display:none;}
#recruit { bottom: 10px; left: 0; width: 100%; height: auto;}
}