@charset "utf-8";
/* CSS Document */

/****
 *
 * グローバル
 *
 ****/

html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,cite,code,img,q,samp,small,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,figcaption,figure,footer,header,nav,section,time,audio,video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font-style:normal;
	font-weight:normal;
	vertical-align:top;
	background-color:transparent;
}

body {
	line-height:1;}

blockquote,q {quotes:none; }
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none; }
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent; }
table {border-collapse:collapse;border-spacing:0; }
img,input,select {vertical-align:top; }
article,aside,footer,header,main,nav,section{display:block;}iframe{ border:none;}

html { font-size:62.5%; overflow-y: scroll;}

@font-face {
	font-family:"Noto Sans JP";
	src:url(../font/NotoSansCJKjp-Lights.woff2) format('woff2');
}

body {
	background-image:url(../img/bg-pattern.png);
	font-size:62.5%;
	font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Helvetica,sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust:100%;
	-webkit-print-color-adjust: exact;
	overflow:hidden;}
input,button,textarea {
	font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Helvetica,sans-serif;
}

a:link    { color:#555555; text-decoration:none; }
a:active  { color:#555555; text-decoration:underline; }
a:visited { color:#000000; text-decoration:none; }
a:hover   { color:#555555; text-decoration:underline; }

#wrap{
	position:relative;
	z-index:1;
}

#header li,
nav#breadcrumb li,
#side li,
#footer li{ list-style:none;}


/****
 *
 * PC
 *
 ****/

@media screen and (min-device-width: 641px), print{

/****
 * 共通
 ****/

body{
	min-width:1080px;
}

#wrap{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:1080px;
	margin:0 auto;
	color:#333;
}

 #wrap {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  width:1080px;
  margin:0 auto
 }
 #header {
  width:100%;
  padding:45px 0 0 0;
  position:relative;
  z-index:3
 }
 #header::after {
  content:"";
  display:block;
  width:calc(200vw + 100%);
  height:100%;
  position:absolute;
  left:calc(0px - 100vw);
  top:0;
  z-index:-1;
  box-sizing:border-box;
 }
 #header #header-logo {
  position:absolute;
  left:0;
  top:46px
 }
 #header #header-logo a {
  display:block
 }
 #header #pc-header-utility {
  display:flex;
  flex-direction:column
 }
 #header #pc-header-utility .conversion {
  display:flex;
  justify-content:flex-end;
  align-items:center
 }
 #header #pc-header-utility .conversion p.tel {
  padding:3px 0 0 20px;
  font-size:3.0em;
  line-height:1.2;
  color:#454f07;
  background:url(../img/icon_tel.png) left calc(50% + 1px)/17px auto no-repeat;
  word-break:break-all
 }
 #header #pc-header-utility .conversion p.contact {
  margin-left:30px
 }
 #header #pc-header-utility .conversion p.contact a {
  display:inline-block;
  padding:4px 20px 4px 39px;
  border-radius:50em;
  position:relative;
  border:1px solid transparent;
  box-shadow:0 0 2px 1px rgba(200,200,200,0.7);
  text-align:center;
  font-size:1.6rem;
  line-height:1.7em;
  font-weight:normal;
  color:#fff;
  text-shadow:0px 1px 0 rgba(0,0,0,0.3)
 }
 #header #pc-header-utility .conversion p.contact a::before {
  display:block;
  content:"";
  width:19px;
  height:calc( ( 19px * 22 ) / 30);
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  background:url(../img/icon_mail.png) left top/100% 100% no-repeat
 }
 #header #pc-header-utility .conversion p.contact a:hover {
 }
 #header #pc-header-utility .shortcut {
  margin-top:10px;
  display:flex;
  justify-content:flex-end
 }
 #header #pc-header-utility .shortcut li {
  align-self:center;
  margin-left:10px;
  margin-bottom:13px;
  font-size:2rem;
  line-height:1.7em
 }
 #header #pc-header-utility .shortcut li a {
  display:inline-block;
  padding:4px 12px 4px 12px;
  position:relative
 }
 #header #pc-header-utility .shortcut li a:hover {
  background-color:#c1d1a8
 }
 #header #pc-header-utility .shortcut li a::before {
  content:"";
  display:block;
  width:20px;
  height:20px;
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%)
 }
 #header #pc-header-utility .shortcut li.current a,
 #header #pc-header-utility .shortcut li.current a:hover {
  background:#28621f;
  color:#fff
 }
  #header #sp-header-utility {
  display:none
 }
 #header button#sp-header-toggle,
 #header #sp-header-toggle-content {
  display:none
 }
 nav#breadcrumb {
  width:100%;
  position:relative;
  z-index:2
 }
 nav#breadcrumb ol {
  display:flex;
  flex-wrap:wrap;
  width:100%;
  padding:10px 0
 }
 nav#breadcrumb ol li {
  margin:0;
  padding:0 0 0 21px;
  position:relative;
  z-index:1;
  font-size:1.4rem;
  line-height:1.7em
 }
 nav#breadcrumb ol li:first-child {
  padding-left:0
 }
 nav#breadcrumb ol li:not(:first-child)::before {
  content:"";
  display:block;
  box-sizing:border-box;
  width:6px;
  height:6px;
  position:absolute;
  left:7px;
  top:calc( ( ( 1.4rem * 1.7 ) / 2 ) - 2px);
  z-index:1;
  border-right:1px solid #333;
  border-bottom:1px solid #333;
  transform:rotate(-45deg)
 }

.gnav{
	order:2;
	width:100%;
	position:relative;
	z-index:2;
}
	.gnav ul{
		display:flex;
		justify-content:space-between;
	}
		.gnav ul li{
			list-style:none;
			font-size:1.6rem;
			line-height:1.5em;
		}
			.gnav ul li a{
				position:relative;
				display:block;
				padding-left:24px;
				color:#333;
			}
			.gnav ul li.home a{
				background:url(../img/icon-home.png) no-repeat left center;
				background-size:16px auto;
			}
			.gnav ul li.daily a{
				background:url(../img/icon-daily.png) no-repeat left center;
				background-size:16px auto;
			}
			.gnav ul li.company-school a{
				background:url(../img/icon-company-school.png) no-repeat left center;
				background-size:16px auto;
			}
			.gnav ul li.kindergarten a{
				background:url(../img/icon-kindergarten.png) no-repeat left center;
				background-size:16px auto;
			}
			.gnav ul li.special-order a{
				background:url(../img/icon-special-order.png) no-repeat left center;
				background-size:16px auto;
			}
			.gnav ul li.company-info a{
				background:url(../img/icon-company-info.png) no-repeat left center;
				background-size:16px auto;
			}
				.gnav ul li a:hover{
					text-decoration:none;
				}
				.gnav ul li a:hover:before{
					position:absolute;
					left:0;
					bottom:-4px;
					display:block;
					width:100%;
					height:4px;
					background:#ffe5e5;
					content:"";
				}
				.gnav ul li.current a:before{
					position:absolute;
					left:0;
					bottom:-4px;
					display:block;
					width:100%;
					height:4px;
					background:#c11714;
					content:"";
				}


#side{
	order: 3;
	width: 220px;
}

#main{
	order:4;
	width:710px;
	margin-left:auto;
	position:relative;
	z-index:1;
}
	#main p{
		margin-top:1.6rem;
		font-size:1.6rem;
		line-height:1.7em;
	}

	#main a{
		display:inline-block;
		position:relative;
		padding-left:20px;
	}
		#main a:before{
			display:block;
			position:absolute;
			top:0;
			bottom:0;
			left:4px;
			width:6px;
			height:6px;
			margin:auto 0;
			/*! border-top:1px solid #28621f; */
			/*! border-right:1px solid #28621f; */
			-webkit-transform:rotate(45deg);
			transform:rotate(45deg);
			content:"";
		}


	#footer{
		position:relative;
		display:flex;
		flex-wrap:wrap;
		order:5;
		width:100%;
		margin:7rem -500% 0;
		padding:0 500% 0;
		position:relative;
		z-index:4;
		background:#bdc1a8;
	}
	#footer #back-to-top{
		margin:0 0 18px 1020px;
		position:fixed;
		bottom:0;
		z-index:10;
		transition:margin 800ms,opacity 250ms;
	}
		#footer #back-to-top a{
			display:block;
			width:70px;
			height:50px;
			padding:0;
			background:url(../img/page-top.png);
			background-size:70px auto;
			color:transparent;
		}
	#footer .company-info{
		width:320px;
		color:#333333;
		margin-top: 30px;
	}
		#footer .company-info .footer-logo{
		width:188px;


	}
			#footer .company-info .footer-logo a{
				color:#fff;
				font-size:22px;
				font-size:2.2rem;
			}
				#footer .company-info .footer-logo a:hover{
					text-decoration:none;
				}
				#footer .company-info .footer-logo a span{
					display:inline-block;
					margin-left:10px;
					font-size:18px;
					font-size:1.8rem;
					vertical-align:baseline;
				}
		#footer .company-info .address{
			margin-top:0.6em;
			font-size:18px;
			font-size:1.2rem;
		}
			#footer .company-info .address .code{
				margin-right:10px;
			}
		#footer .company-info .tel{
			display:inline-block;
			margin-top:12px;
			padding-left:24px;
			background:url(../img/icon_tel-big.png) no-repeat left center;
			background-size:23px auto;
			font-size:26px;
			font-size:2.6rem;
			vertical-align:baseline;
			color: #454f08;
		}
	#footer #footer-nav{
		width:408px;
		margin-left: 22px;
	}
			#footer #footer-nav ul{
				display:flex;
				flex-wrap:wrap;
				margin-left:-40px;
				margin-top: 40px;
			}
			#footer #footer-nav ul li{
				margin:0px 10px 5px 8px;
				font-size:18px;
				line-height:1.5em;

			}
				#footer #footer-nav ul li:nth-child(3){
					margin-right:40px;
				}
				#footer #footer-nav ul li:last-child{
					max-width:170px;
				}
				#footer #footer-nav ul li a{
					display:inline-block;
					padding:5px 8px 5px 8px;
					color:#333;
				}

				#footer #footer-nav ul li.current a{
					background: #28621f;
					color: #FFF;
				 }
				#footer #footer-nav ul li a:hover{
				  background-color:#c1d1a8;
				  color:#333;
				 }

		#footer #footer-nav .privacy{
			display:inline-block;
			margin-top:1em;
			vertical-align:baseline;
			}
			#footer #footer-nav .privacy a{
				position:relative;
				display:inline-block;
				padding-left:20px;
				font-size:13px;
				font-size:1.3rem;
				color:#fff;
			}
				#footer #footer-nav .privacy a:before{
					display:block;
					position:absolute;
					top:0;
					bottom:0;
					left:4px;
					width:4px;
					height:4px;
					margin:auto 0;
					border-top:1px solid #fff;
					border-right:1px solid #fff;
					-webkit-transform:rotate(45deg);
					transform:rotate(45deg);
					content:"";
				}
				#footer #footer-banner{
					width:272px;
					margin: 48px 0px 0px 58px;
					float: right;
				}

	#footer #copyright{
		width:100%;
		margin:30px -500% 0;
		padding:34px 500%;
		text-align:center;
		font-size:12px;
		font-size:1.2rem;
		color:#fff;
		background: #6d8c3e;
	}

}

/* SP */

@media screen and (max-device-width: 640px){
	img{
		max-width: 100%;
		height: auto;
	}

	#header{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		align-items:center;
		position:relative;
		z-index:3;
	}
		#header #header-logo{
			width:calc(50vw - 10px);
			max-width:160px;
			margin:0 auto 0;
			padding:8px 0 8px 0;
		}
		#header #pc-header-utility{
			display:none;
		}
		#header button#sp-header-toggle{
			position:absolute;
			top:8px;
			margin:0;
			right:10px;
			display:block;
			width:43px;
			height:43px;
			padding:0;
			border:none;
			background:none;
			color:transparent;
			z-index:4;
			outline:none;
		}
		#header #sp-header-toggle-content button.sp-header-toggle-content-close{
			display:inline-block;
			margin:20px 0 0 0;
			padding:10px 20px 10px 38px;
			position:relative;
			border:1px solid #ccc;
			background:#fff;
			cursor:pointer;
			text-align:center;
			font-size:1.4rem;
			line-height:1.4em;
		}
			#header #sp-header-toggle-content button.sp-header-toggle-content-close::before{
				display: block;
				content: "";
				width: 13px;
				height: 13px;
				position: absolute;
				left: 14px;
				top: calc(50% + -6px);
				background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%3E%3Cpolygon%20id%3D%22toggle-content-close-shape%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23333333%22%20points%3D%2228%2C2.9%2025.1%2C0%2014%2C11.1%202.9%2C0%200%2C2.9%2011.1%2C14%200%2C25.1%202.9%2C28%2014%2C16.9%2025.1%2C28%2028%2C25.1%2016.9%2C14%20%22%2F%3E%3C%2Fsvg%3E) no-repeat 0 0/13px auto;
			}

		#header #sp-header-toggle-content{
			width:100%;
			height:0;
			margin:0;
			padding:0 10px;
			text-align:center;
			opacity:0;
			transition:all 500ms;
			position:relative;
			z-index:3;
			overflow:hidden;
		}
		#header button#sp-header-toggle.opened+#sp-header-toggle-content{
			margin:0;
			padding:0 10px 10px 10px;
			background:#29621e;
			opacity:1;
		}
			#header #sp-header-toggle-content::after{
				content:"";
				display:block;
				width:calc(200vw + 100%);
				height:100%;
				position:absolute;
				left:calc(0px - 100vw);
				top:0;
				z-index:-1;
				background:bd0905;
				opacity:0;
				transition:opacity 500ms;
			}
			#header #sp-header-toggle-content #sp-header-nav{
				margin:10px 0 0px 0;
				padding-bottom:30px;
				background:#bdc1a8;
			}
			#header #sp-header-toggle-content #sp-header-nav nav{
				display:flex;
				flex-wrap:wrap;
				background:#fff;
			}
					#header #sp-header-toggle-content #sp-header-nav nav ul{
						width:100%;
						margin:0;
						border:1px solid #9da284;
						border-top:none;
						background-color: #bdc1a8;
					}
					#header #sp-header-toggle-content #sp-header-nav nav ul li{
						border-top:1px solid #9da284;
						font-size:1.6rem;
						line-height:1.7em;
						text-align:left;
					}
							#header #sp-header-toggle-content #sp-header-nav nav ul li a{
								display: block;
								padding: 10px 10px 10px 18px;
								background:#bdc1a8;
							}
							/* current */
							#header #sp-header-toggle-content #sp-header-nav nav ul li.current a{
								background-color:#28621f;
								color:#fff;
							}
				#header #sp-header-toggle-content #sp-header-nav .tel{
					width:80%;
					text-align:center;
					margin:1rem auto;}
				#header #sp-header-toggle-content #sp-header-nav .tel a{
					display:block;
					margin-top:2em;
					padding:12px 22px 14px 30px;
					/*! border:1px solid #fff; */
					background:url(../img/icon-tel-white.png) no-repeat 24px center #454f08;
					background-size:16px auto;
					border-radius:10em;
					color:#fff;
					font-size:2.2rem;
					box-sizing:border-box;
				}


	.gnav{
		display:none;
	}

/* メインボディ */
#main{
	order:4;
	margin-left:auto;
	position:relative;
	z-index:1;
}
	#main p{
		margin-top:1.6rem;
		font-size:1.6rem;
		line-height:1.7em;
	}

	#main a{
		display:inline-block;
		position:relative;
		padding-left:20px;
	}
		#main a:before{
			display:block;
			position:absolute;
			top:0.65em;
			bottom:0;
			left:4px;
			width:6px;
			height:6px;
			margin:0;
			border-top:1px solid #28621f;
			border-right:1px solid #28621f;
			-webkit-transform:rotate(45deg);
			transform:rotate(45deg);
			content:"";
		}





	/* フッター */
	#footer{
		position:relative;
		order:5;
		margin:7rem 0 0;
		padding:0 0px 0;
		position:relative;
		z-index:4;
		background:#bdc1a7;
	}
	#footer #back-to-top{
		margin:0px 0px 45px 916px;
		position:fixed;
		bottom:0;
		z-index:10;
		transition:margin 800ms,opacity 250ms;
	}
		#footer #back-to-top a{
			display:block;
			width:70px;
			height:70px;
			padding:0;
			background:url(../img/page-top.png);
			background-size:70px auto;
			color:transparent;
		}
	/* instagram-area */
	#footer .area-instagram{
		position:relative;
		width:100%;
		margin:0 -10px 80px;
		padding:30px 10px 200px;
		background:url(../img/bg-area-instagram.png) no-repeat center bottom #f8e6e6;
		background-size:453px auto;
	}
		#footer .area-instagram:after{
			position:absolute;
			bottom:-30px;
			left:0;
			display:block;
			width:100%;
			height:30px;
			background: #f8e6e6;
			content:"";
		}
		#footer .area-instagram p{
			max-width:600px;
			font-size:16px;
			font-size:1.6rem;
			line-height:1.7em;
		}
		#footer .area-instagram .title{
			padding-left:31px;
			font-size:2.4rem;
			line-height:1.7em;
			background:url(../img/icon-instagram2.png) no-repeat left 0.28em;
			background-size:24px auto;
		}
		#footer .area-instagram .title + p{
			margin-top:1.4em;
		}
		#footer .area-instagram .button{
			margin-top:1.5em;
			text-align:center;}
			#footer .area-instagram .button a{
				display:inline-block;
				min-width:200px;
				padding:7px 40px 6px 50px;
				border:1px solid #bd0905;
				background:url(../img/icon-instagram.png) no-repeat 15px center #fff;
				background-size:16px auto;
				border-radius:10em;
				font-size:18px;
				font-size:1.8rem;
				color:#bd0905;
			}
				#footer .area-instagram .button a:hover{
					background-color:#ffe5e5;
					text-decoration:none;
				}
	/* 企業情報 */
	#footer .company-info{
		width:80%;
		color:#333333;
		padding: 4.4em 0px 0px 0px;
		margin: 0px auto;
	}
		#footer .company-info .footer-logo{
			width:63%;
			text-align:left;
		}
			#footer .company-info .footer-logo a{
				color:#fff;
				font-size:2.4rem;

			}
				#footer .company-info .footer-logo a:hover{
					text-decoration:none;
				}
				#footer .company-info .footer-logo a span{
					display:inline-block;
					margin-left:10px;
					font-size:18px;
					font-size:1.8rem;
					vertical-align:baseline;
				}
		#footer .company-info .address{
			margin:1.4rem auto 0;
			font-size:14px;
			font-size:1.4rem;
			line-height:1.5em;
		}
			#footer .company-info .address .code{
				display:block;
		}
		#footer .company-info .tel{
			width:100%;
			text-align:center;

		}
		#footer .company-info .tel a{
			display:block;
			margin-top:0.6em;
			padding:14px 22px 15px 30px;
			background:url(../img/icon-tel-white.png) no-repeat 24px center #454f08;
			background-size:16px auto;
			border-radius:10em;
			color:#fff;
			font-size:2.2rem;
			box-sizing:border-box;
		}
		#footer .company-info .button{
			display:block;
			width:80%;
			margin:1em auto 0;
			text-align:center;
		}
			#footer .company-info .button a{
				display:block;
				padding:14px 22px 11px 30px;
				background:url(../img/icon-mail.png) no-repeat 15px center #fff;
				background-size:16px auto;
				border-radius:10em;
				font-size:22px;
				font-size:2.2rem;
				color:#bd0905;
			}
				#footer .company-info .button a:hover{
					opacity:0.8;
					text-decoration:none;
				}
	#footer #footer-nav{
		width:100%;
	}
		#footer #footer-nav ul{
			margin-top:3rem;
			border-top:1px solid #9da284;
		}
			#footer #footer-nav ul li{
				margin:0;
				border-bottom:1px solid #9da284;
				font-size:1.6rem;
				line-height:1.5em;
			}
				#footer #footer-nav ul li a{
					display:block;
					padding:1.4rem 18px;
					color:#333333;
				}
				#footer #footer-nav ul li.current a{
					display:block;
					color:#ffffff;
			        background-color: #28621f;
	      		}
				#footer #footer-nav ul li.home a{
					background:url(../img/icon-home-white.png) no-repeat left center;
					background-size:16px auto;
				}
				#footer #footer-nav ul li.daily a{
					background:url(../img/icon-daily-white.png) no-repeat left center;
					background-size:16px auto;
				}
				#footer #footer-nav ul li.company-school a{
					background:url(../img/icon-company-school-white.png) no-repeat left center;
					background-size:16px auto;
				}
				#footer #footer-nav ul li.kindergarten a{
					background:url(../img/icon-kindergarten-white.png) no-repeat left center;
					background-size:16px auto;
				}
				#footer #footer-nav ul li.special-order a{
					background:url(../img/icon-special-order-white.png) no-repeat left center;
					background-size:16px auto;
				}
				#footer #footer-nav ul li.company-info a{
					background:url(../img/icon-company-info-white.png) no-repeat left center;
					background-size:16px auto;
				}
		#footer #footer-nav .privacy{
			margin-top:1.5rem;
		}
			#footer #footer-nav .privacy a{
				position:relative;
				padding-left:20px;
				font-size:1.3rem;
				color:#fff;
			}
				#footer #footer-nav .privacy a:before{
					display:block;
					position:absolute;
					top:0;
					bottom:0;
					left:4px;
					width:4px;
					height:4px;
					margin:auto 0;
					border-top:1px solid #fff;
					border-right:1px solid #fff;
					-webkit-transform:rotate(45deg);
					transform:rotate(45deg);
					content:"";
				}
	#footer #copyright{
		margin:2em 0 0;
		text-align:center;
		font-size:10px;
		font-size:1.0rem;
		color:#fff;
		line-height:1.5em;
		background: #6e8c3e;
		padding: 1.2em 0 1.2em 0;
	}
	#footer #footer-banner{
		display:block;
		padding:1.4rem 20px 0 20px;
		color:#333333;
		width: auto;
		text-align: center;
	}


}