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


/*=======================================================
	Topics 
=======================================================*/
.Topics {
	width: 100%;
	/*height: 8em;*/
	margin: 0 auto;
	overflow: scroll;
}


/*====================================================
	●style.css 画面の横幅が769px以上  
	Note PC size以上
======================================================*/
@media screen and (min-width: 769px){
	/*-------------
		home
	--------------*/
	.drawer-navbar ul.drawer-menu li:first-child a {
		/*border-bottom: 2px solid #9C0;*/
	}
	.drawer-navbar ul.drawer-menu li:first-child a::after {
		content: "";
		position: absolute;
		bottom: 2px;
		left: 50%;
		width: 4.5rem;
		height: 5px;
		background: #BEC78B;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	
	
	/*=================================================
		新着情報 / 「和=なごむ」●
	==================================================*/
	main > section:first-child {
		width: 90%;
		max-width: 1020px;
		margin: 2% auto 4% auto;
		padding: 0;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
		-webkit-justify-content: space-around;
		-webkit-box-pack: distribute;
		-ms-flex-pack: distribute;
		justify-content: space-around;
		
		/*border: thin dashed #F69;*/
	}
	
	/*==================================================
		●「和=なごむ」子供たちが日本の心を育む環境を
	====================================================*/
	main > section:first-child > div:first-child {
		width: 45%;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		/*-webkit-justify-content: space-between;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;*/
		-webkit-justify-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		
		/*border: thin dashed #0C9;*/
	}
	main > section:first-child > div:first-child p {
		width: 50%;
		color: #666;
		font-size: 1.2rem;
		text-align: left;
		font-weight: bold;
		/*-webkit-writing-mode: vertical-rl;*/
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl; /*縦書き、かつ右から左に行が流れる*/
		/*writing-mode: vertical-lr; 縦書き、かつ左から右*/
		/*writhig-mode: horizontal-tb;横書き、かつ右から左に行が流れる*/
		letter-spacing: 2px;
		line-height: 2rem;
		/*margin: 0 auto;*/
		/*background: #F96;*/
	}
	main > section:first-child > div:first-child picture {
		/**/margin-left: 4%;
	}
	
	
	/*==========================================
		  新着情報 
		  php sistem PKOBO_News01
	===========================================*/
	div.Topics {
		width: 45%;
		height: 300px;
		word-wrap: break-word;
		/*background: #FFF;*/
		padding: 3px;
		padding-top: 3%;
		overflow: visible;
		position: relative;
	}
	/*---------------
		title
	----------------*/
	div.Topics h2 {
		width: 90%;
		text-align: left;
		margin: 0 auto 2% auto;
		padding-bototm: 2%;
	}
	div.Topics h2 p {
		color: #F69;
		font-size: 0.8rem;
	}
	div.Topics h2 picture {
		width: 8rem;
	}
	
	/*--------------------
		  PHPsystem
	----------------------*/
	div#newsWrap {
		width: 100%;
		height: 200px;
		box-sizing: border-box;
		padding:  2% 0;
		overflow: scroll;
		
		/*border: thin dashed #6CF;*/
	}
	ul#newsList {
		text-align: left;
		margin:0 0 15px;
		padding:0;
		font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
	ul#newsList li {
		color:#666;
		font-size:12px;
		margin:0;
		padding:5px 0;
		margin-bottom:3px;
		border-bottom:1px dotted #ccc;
		line-height:120%;
		list-style-type:none;
	}
	a{color:#36F;text-decoration:underline;}
	a:hover{color:#039;text-decoration:none;}
	
	/** カテゴリ名 **/
	.catName{
		display:inline-block;
		padding:3px 8px;
		border:1px solid #ccc;
		border-radius:6px;
		font-size:11px;
		line-height:100%;
		margin:0 2px;
	}
	/** New!アイコン **/
	span.newMark{
		display:inline-block;
		border: 1px solid #F63;
		padding:1px 4px;
		font-size:11px;
		line-height:100%;
		background: #F63;
		color:#fff;
		box-shadow:1px 1px 1px #999;
		border-radius:8px;
		font-style:italic;
	}
	
	/*-------------------------
		サムネイル/本文抜粋
	--------------------------*/
	ul#newsList li div {
		display: -webkit-box;
		display: -ms-flxbox;
		display: flex;
	}
	/** ThumbNail画像 **/
	span.thumbNailWrap{
		width:110px;
		height:80px;
		display:block;
		overflow:hidden;
		/*border: thin dashed #F36;*/
	}
	/** 本文 **/
	span.comment{
		flex: 1;
		/*width:500px; 本文部分の幅。ここは特に設置ページ合わせて変更下さい */
		display:block;
		padding:3px 0;
		/*float:left;*/
		overflow:hidden;
		/*border: thin dashed #9C3;*/
	}
	
	/*--------------------
		icon 楓
	---------------------*/
	/** kaede02 **/
	div.Topics > picture:nth-last-child(2) {
		width: 2.5rem;
		position: absolute;
		top: -1rem;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translate(-50%);
	}
	/** kaede01 **/
	div.Topics > picture:last-child {
		width: 3rem;
		position: absolute;
		bottom: 4%;
		right: 0;
	}
	
	
	/*=================================================
		  NavigationLink
	==================================================*/
	section.NavigationLink {
		width: 100%;
		background-image: url(../img/main_background.jpg);
		background-repeat: repeat;
		margin: 3% 0;
		padding: 1% 0;
		position: relative;
		
		/*border: thin dashed #F99;*/
	}
	/** line上 **/
	section.NavigationLink::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		background: #96735A;
		top: 3px;
		left: 0;
	}
	/** line下 **/
	section.NavigationLink::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		background: #96735A;
		bottom: 3px;
		left: 0;
	}
	/*-------------------
		背景画 楓の枝
	-------------------*/
	section.NavigationLink > div:first-child {
		width: 100%;
		max-width: 1020px;
		margin: 0 auto;
		position: relative;
	}
	section.NavigationLink > div:first-child picture {
		width: 200px;
		position: absolute;
		z-index: -1;
		top: -8rem;
		left: -5rem;
	}
	section.NavigationLink ul {
		width: 98%;
		max-width: 900px;
		list-style-type: none;
		margin: 0 auto;
/* 		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: space-around;
		-webkit-box-pack: distribute;
		-ms-flex-pack: distirbute;
		justify-content: space-around; */

		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 20px;
	}
	section.NavigationLink li {
		/*border: thin dashed #F66;*/
	}
	section.NavigationLink a {
		width: 190px;
		height: 190px;
		border-radius: 50%;
		display: block;
		position: relative;
		padding: 5px;
		margin: 0 auto;
	}
	section.NavigationLink a picture {
		width: 200px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	section.NavigationLink a:hover picture {
		opacity: 0.9;
		filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));
		top: 49%;
	}
	section.NavigationLink a:active picture {
		filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
		top: 50%;
	}
	
	/*----------------
		入園要項
	-----------------*/
	section.NavigationLink ul li:first-child a picture {
		/* top: 40%; */
		width: 190px;
	}

	/* section.NavigationLink ul li:first-child a:hover picture {
		top: 39%;
	}
	section.NavigationLink ul li:first-child a:active picture {
		top: 40%;
	} */
	/*----------------
		園の一日
	----------------*/
	section.NavigationLink ul li:nth-child(2) a picture {
		width: 215px;
	}
	/*------------------------
		保護者・保育士の声
	-------------------------*/
	section.NavigationLink ul li:nth-child(3) a picture {
		width: 190px;
	}
	/*---------------
		主な行事
	----------------*/
	section.NavigationLink ul li:last-child a picture {
		width: 210px;
		top: 41%;
	}
	section.NavigationLink ul li:last-child a:hover picture {
		top: 40%;
	}
	section.NavigationLink ul li:last-child a:active picture {
		top: 41%;
	}
	
	
	/*-----------------
		背景画像 kids	
	------------------*/
	section.NavigationLink > div:last-child {
		width: 95%;
		max-width: 1020px;
		margin: 0 auto;
		position: relative;
	} 
	section.NavigationLink > div:last-child picture {
		width: 100px;
		position: absolute;
		bottom: 1rem;
		right: -2rem;
	}
	
	
	/*==========================================
		日本の四季に触れ、感性を豊かに
	===========================================*/
	section.Policy {
		width: 98%;
		max-width: 1020px;
		margin: 5% auto 0 auto;
		padding-bottom: 4%;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: space-around;
		-webkit-box-pack: distribute;
		-ms-flex-pack: distribute;
		justify-content: space-between;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	section.Policy picture {
		width: 40%;
	}
	section.Policy dl {
		width: 55%;
	}
	section.Policy dl dt {
		color: #960;
		font-size: 1.5rem;
		letter-spacing: 2px;
		margin-bottom: 5%;
	}
	section.Policy dl dd {
		color: #666;
		text-align: left;
		letter-spacing: 1px;
	}
	section.Policy dl dd p {
		line-height: 1.2rem;
		margin-bottom: 3%;
	}
	
	
	
	
	
	
	
	
	/*=====================================================================
	  pallarax Efect
	======================================================================
	#third {
		background-attachment: fixed;
		background-image: url("../img/parallaxback.jpg");
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: cover;
	}*/
	
	/** Retina用 safari:device-pixel-ration / その他resolution *
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
		#third {
			background-image: url("images/crazy-diamond-2x.jpg");
		}
	}
	@media (max-width: 640px) {
		#third {
			background-image: url("../img/parallaxback.jpg");
		}
	}
	@media (min-width: 641px) {
		#third {
			background-image: url("../img/parallaxback.jpg");
		}
	}*/
	/*-----------------------------------------------------
		Third Parallax
	------------------------------------------------------
	section.SubImage {
		width: 100%;
		height: 400px;
		color: #333;
		box-shadow: 0 0 50px rgba(0, 0, 0, 0.8)inset;
		margin: 0 auto;
		padding: 0;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-pack: center;
		align-items: center;
	}
	section#third dl {
		width: 7em;
		color: #F36;
		text-align: center;
		background-color: #FFF;
		border-radius: 1rem;
		padding: 0.5rem 0.5rem 1rem 0.5rem;
		
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	section#third dl dd {
		font-weight: bold;
		margin-top: 4%;
	}*/
	
	/*----------------------------------------
		IE11.hack
	----------------------------------------*/
	section.NavigationLink ul li a dl dt span img {
		/** IE11 画像幅が伸びるバグ用 **/
		flex-shrink: 0;
	}
	/*section.NavigationLink a:hover picture {
		drop-shadow:(0 0 3px rgba(0,0,0,0.8));
	}*/
	/*section.NavigationLink ul li a dl {
		width: 100%;
		height: 100%;
		border:thin dashed #F69;
		border-radius: 0.5rem;
		* IE11 :active hack **
		pointer-events: none; /*マウスのターゲットから外す*
	}*/
	@media all and (-ms-high-contrast:none) {
		/** 英文text **/
		section.ContentsList ul li a dl dt > div p:first-child {
			font-size: 0.8rem;
			padding-bottom: 2%;
			
			display: inline-block;
			min-height: 90px;
			vertical-align: middle;
		}
		/** 文字画像 **/
		section.ContentsList ul li a dl dt > div p:last-child {
			width: 70%;
			display: inline-block;
			min-height: 90px;
			vertical-align: middle;
		}
	}
	  
}




/*===========================================================================
　  ●最大PC size  
===============================================================================*/
@media (min-width: 64em) {
	
}




/*================================================================================
　●tablet.css 画面の横幅が768pxまで
=================================================================================*/
@media screen and (max-width: 768px) {
	
	
	/*=================================================
		新着情報 / 「和=なごむ」●
	==================================================*/
	main > section:first-child {
		width: 90%;
		max-width: 1020px;
		margin: 2% auto 4% auto;
		padding: 0;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
		-webkit-justify-content: space-around;
		-webkit-box-pack: distribute;
		-ms-flex-pack: distribute;
		justify-content: space-around;
		
		/*border: thin dashed #F69;*/
	}
	
	/*==================================================
		●「和=なごむ」子供たちが日本の心を育む環境を
	====================================================*/
	main > section:first-child > div:first-child {
		width: 45%;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		/*-webkit-justify-content: space-between;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;*/
		-webkit-justify-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		
		/*border: thin dashed #0C9;*/
	}
	main > section:first-child > div:first-child p {
		width: 50%;
		color: #666;
		font-size: 1.1rem;
		text-align: left;
		font-weight: bold;
		writing-mode: vertical-rl; /*縦書き、かつ右から左に行が流れる*/
		/*writing-mode: vertical-lr; 縦書き、かつ左から右*/
		/*writhig-mode: horizontal-tb;横書き、かつ右から左に行が流れる*/
		letter-spacing: 0;
		line-height: 2rem;
		/*margin: 0 auto;*/
		/*background: #F96;*/
	}
	main > section:first-child > div:first-child picture {
		/**/margin-left: 4%;
	}
	
	
	/*==========================================
		  新着情報
	===========================================*/
	div.Topics {
		width: 45%;
		padding-top: 3%;
		
		/*border: thin dashed #F06;*/
	}
	/*---------------
		title
	----------------*/
	div.Topics h2 {
		width: 90%;
		text-align: left;
		margin: 0 auto 2% auto;
		padding-bototm: 2%;
	}
	div.Topics h2 p {
		color: #F69;
		font-size: 0.8rem;
	}
	div.Topics h2 picture {
		width: 8rem;
	}
	
	/*-------------------------------------------
		  News
		  PHPsystem
	--------------------------------------------*/
	div.Topics {
		height: 300px;
		word-wrap: break-word;
		/*background: #FFF;*/
		padding: 3px;
		overflow: visible;
		position: relative;
	}
	div#newsWrap {
		width: 100%;
		height: 200px;
		box-sizing: border-box;
		padding:  2% 0;
		overflow: scroll;
		
		/*border: thin dashed #6CF;*/
	}
	ul#newsList {
		text-align: left;
		margin:0 0 15px;
		padding:0;
		font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
	ul#newsList li {
		color:#666;
		font-size:12px;
		margin:0;
		padding:5px 0;
		margin-bottom:3px;
		border-bottom:1px dotted #ccc;
		line-height:120%;
		list-style-type:none;
	}
	a{color:#36F;text-decoration:underline;}
	a:hover{color:#039;text-decoration:none;}
	
	/** カテゴリ名 **/
	.catName{
		display:inline-block;
		padding:3px 8px;
		border:1px solid #ccc;
		border-radius:6px;
		font-size:11px;
		line-height:100%;
		margin:0 2px;
	}
	/** New!アイコン **/
	span.newMark{
		display:inline-block;
		border: 1px solid #F63;
		padding:1px 4px;
		font-size:11px;
		line-height:100%;
		background: #F63;
		color:#fff;
		box-shadow:1px 1px 1px #999;
		border-radius:8px;
		font-style:italic;
	}
	
	/*-------------------------
		サムネイル/本文抜粋
	--------------------------*/
	ul#newsList li div {
		display: -webkit-box;
		display: -ms-flxbox;
		display: flex;
	}
	/** ThumbNail画像 **/
	span.thumbNailWrap{
		width:110px;
		height:80px;
		display:block;
		overflow:hidden;
		/*border: thin dashed #F36;*/
	}
	/** 本文 **/
	span.comment{
		flex: 1;
		/*width:500px; 本文部分の幅。ここは特に設置ページ合わせて変更下さい */
		display:block;
		padding:3px 0;
		/*float:left;*/
		overflow:hidden;
		/*border: thin dashed #9C3;*/
	}
	
	/*--------------------
		icon 楓
	---------------------*/
	/** kaede02 **/
	div.Topics > picture:nth-last-child(2) {
		width: 2.5rem;
		position: absolute;
		top: -1rem;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translate(-50%);
	}
	/** kaede01 **/
	div.Topics > picture:last-child {
		width: 3rem;
		position: absolute;
		bottom: 4%;
		right: 0;
	}
	
	
	/*=================================================
		  NavigationLink
	==================================================*/
	section.NavigationLink {
		width: 100%;
		background-image: url(../img/main_background.jpg);
		background-repeat: repeat;
		margin: 3% 0;
		padding: 1% 0;
		position: relative;
		
		/*border: thin dashed #F99;*/
	}
	/** line上 **/
	section.NavigationLink::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		background: #96735A;
		top: 3px;
		left: 0;
	}
	/** line下 **/
	section.NavigationLink::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		background: #96735A;
		bottom: 3px;
		left: 0;
	}
	/*-------------------
		背景画 楓の枝
	-------------------*/
	section.NavigationLink > div:first-child {
		width: 100%;
		max-width: 1020px;
		margin: 0 auto;
		position: relative;
	}
	section.NavigationLink > div:first-child picture {
		width: 200px;
		position: absolute;
		z-index: -1;
		top: -8rem;
		left: -5rem;
	}
	
	/*============================
		● link Banner
	=============================*/
	section.NavigationLink ul {
		width: 98%;
		max-width: 750px;
		list-style-type: none;
		margin: 0 auto;
		
		/* display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: space-around;
		-webkit-box-pack: distribute;
		-ms-flex-pack: distirbute;
		justify-content: space-around; */

		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 20px;
		
	}
	section.NavigationLink li {
		/*border: thin dashed #F66;*/
	}
	section.NavigationLink a {
		width: 180px;
		height: 190px;
		border-radius: 50%;
		display: block;
		position: relative;
		padding: 5px;
		margin: 0 auto;
	}
	section.NavigationLink a picture {
		width: 180px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	section.NavigationLink a:hover picture {
		opacity: 0.9;
		filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));
		top: 49%;
	}
	section.NavigationLink a:active picture {
		filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
		top: 50%;
	}
	
	/*----------------
		入園要項
	-----------------*/
	section.NavigationLink ul li:first-child a picture {
		/* top: 40%; */
		width: 160px;
	}
	/* section.NavigationLink ul li:first-child a:hover picture {
		top: 39%;
	}
	section.NavigationLink ul li:first-child a:active picture {
		top: 40%;
	} */
	/*----------------
		園の一日
	----------------*/
	section.NavigationLink ul li:nth-child(2) a picture {
		width: 185px;
	}
	/*------------------------
		保護者・保育士の声
	-------------------------*/
	section.NavigationLink ul li:nth-child(3) a picture {
		width: 160px;
	}
	/*---------------
		主な行事
	----------------*/
	section.NavigationLink ul li:last-child a picture {
		width: 180px;
		top: 41%;
	}
	section.NavigationLink ul li:last-child a:hover picture {
		top: 40%;
	}
	section.NavigationLink ul li:last-child a:active picture {
		top: 41%;
	}
	
	
	/*-----------------
		背景画像 kids	
	------------------*/
	section.NavigationLink > div:last-child {
		width: 95%;
		max-width: 1020px;
		margin: 0 auto;
		position: relative;
	} 
	section.NavigationLink > div:last-child picture {
		width: 150px;
		position: absolute;
		bottom: 0;
		right: -2rem;
	}
	
	
	/*==========================================
		日本の四季に触れ、感性を豊かに
	===========================================*/
	section.Policy {
		width: 95%;
		max-width: 1020px;
		margin: 7% auto 0 auto;
		padding-bottom: 6%;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: space-around;
		-webkit-box-pack: distribute;
		-ms-flex-pack: distribute;
		justify-content: space-between;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	section.Policy picture {
		width: 43%;
	}
	section.Policy dl {
		width: 55%;
	}
	section.Policy dl dt {
		color: #963;
		font-size: 1.2rem;
		letter-spacing: 0;
		margin-bottom: 5%;
		line-height: 1.2;
	}
	section.Policy dl dd {
		color: #666;
		text-align: left;
		letter-spacing: 1px;
	}
	section.Policy dl dd p {
		line-height: 1.2rem;http://localhost/hoikuen和ちゃん/kazuchan/index.html
		margin-bottom: 3%;
	}
	
}

/*@media screen and (min-width : 320px) and (max-width: 1024px) {スマフォ・タブレット用
	section.SubImage div {
		background-attachment: scroll;
	}
}*/


/*@media only screen and (max-device-width: 768px) {
	body::before {
		content: "";
		width: 100%;
		height: 100vh;
		background-image: url(../img/parallaxback.jpg) no-repeat;
		background-size: cover;
		-webkit-background-size:cover;
		display: block;
		padding-bottom: 108px;
		
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
}*/



/*=========================================================================================
	●smart.css  
	画面の横幅が640pxまで
===========================================================================================*/
@media screen and (max-width: 640px) {
	/*=================================================
		新着情報 / 「和=なごむ」●
	==================================================*/
	main > section:first-child {
		width: 100%;
		/*max-width: 1020px;*/
		margin: 4% auto 4% auto;
		padding: 0;
		
		/*display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
		-webkit-justify-content: space-around;
		-webkit-box-pack: distribute;
		-ms-flex-pack: distribute;
		justify-content: space-around;*/
		display: block;
		
		/*border: thin dashed #F69;*/
	}
	
	/*==================================================
		●「和=なごむ」子供たちが日本の心を育む環境を
	====================================================*/
	main > section:first-child > div:first-child {
		width: 100%;
		background-image: url(../img/main_background.jpg);
		margin-bottom: 3rem;
		margin-top: 50px;
		padding: 5% 0;
		
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		/*-webkit-justify-content: space-between;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;*/
		-webkit-justify-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		background-repeat: repeat;
		
		position: relative;
		/*border: thin dashed #0C9;*/
	}
	main > section:first-child > div:first-child::before {
		content: "";
		position: absolute;
		top: 5px;
		left: 0;
		width: 100%;
		height: 3px;
		background: #A7866F;
	}
	main > section:first-child > div:first-child::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 5px;
		width: 100%;
		height: 3px;
		background: #A7866F;
	}
	main > section:first-child > div:first-child p {
		width: 45%;
		height: 12rem;
		color: #666;
		font-size: 1rem;
		text-align: left;
		writing-mode: vertical-rl; /*縦書き、かつ右から左に行が流れる*/
		/*writing-mode: vertical-lr; 縦書き、かつ左から右*/
		/*writhig-mode: horizontal-tb;横書き、かつ右から左に行が流れる*/
		letter-spacing: 2px;
		line-height: 2rem;
		padding-right: 2%;
	}
	main > section:first-child > div:first-child picture {
		width: 50%;
		/**/margin-left: 4%;
	}
	
	
	/*==========================================
		新着情報
	===========================================*/
	div.Topics {
		width: 90%;
		margin: 0 auto 4rem auto;
		padding-top: 3%;
		
		/*border: thin dashed #F06;*/
	}
	/*---------------
		title
	----------------*/
	div.Topics h2 {
		width: 90%;
		text-align: left;
		margin: 0 auto 2% auto;
		padding-bototm: 2%;
	}
	div.Topics h2 p {
		color: #F69;
		font-size: 0.8rem;
	}
	div.Topics h2 picture {
		width: 8rem;
	}
	
	/*-------------------------------------------
		  News
		  PHPsystem
	--------------------------------------------*/
	div.Topics {
		height: 300px;
		word-wrap: break-word;
		/*background: #FFF;*/
		padding: 3px;
		overflow: visible;
		position: relative;
	}
	div#newsWrap {
		width: 100%;
		height: 200px;
		box-sizing: border-box;
		padding:  2% 0;
		overflow: scroll;
		
		/*border: thin dashed #6CF;*/
	}
	ul#newsList {
		text-align: left;
		margin:0 0 15px;
		padding:0;
		font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
	ul#newsList li {
		color:#666;
		font-size:12px;
		margin:0;
		padding:5px 0;
		margin-bottom:3px;
		border-bottom:1px dotted #ccc;
		line-height:120%;
		list-style-type:none;
	}
	a{color:#36F;text-decoration:underline;}
	a:hover{color:#039;text-decoration:none;}
	
	/** カテゴリ名 **/
	.catName{
		display:inline-block;
		padding:3px 8px;
		border:1px solid #ccc;
		border-radius:6px;
		font-size:11px;
		line-height:100%;
		margin:0 2px;
	}
	/** New!アイコン **/
	span.newMark{
		display:inline-block;
		border: 1px solid #F63;
		padding:1px 4px;
		font-size:11px;
		line-height:100%;
		background: #F63;
		color:#fff;
		box-shadow:1px 1px 1px #999;
		border-radius:8px;
		font-style:italic;
	}
	
	/*-------------------------
		サムネイル/本文抜粋
	--------------------------*/
	ul#newsList li div {
		display: -webkit-box;
		display: -ms-flxbox;
		display: flex;
	}
	/** ThumbNail画像 **/
	span.thumbNailWrap{
		width:110px;
		height:80px;
		display:block;
		overflow:hidden;
		/*border: thin dashed #F36;*/
	}
	/** 本文 **/
	span.comment{
		flex: 1;
		/*width:500px; 本文部分の幅。ここは特に設置ページ合わせて変更下さい */
		display:block;
		padding:3px 0;
		/*float:left;*/
		overflow:hidden;
		/*border: thin dashed #9C3;*/
	}
	
	/*--------------------
		icon 楓
	---------------------*/
	/** kaede02 **/
	div.Topics > picture:nth-last-child(2) {
		width: 2.5rem;
		position: absolute;
		top: -1rem;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translate(-50%);
	}
	/** kaede01 **/
	div.Topics > picture:last-child {
		width: 3rem;
		position: absolute;
		bottom: 4%;
		right: 0;
	}
	
	
	/*=================================================
		  NavigationLink
	==================================================*/
	section.NavigationLink {
		width: 100%;
		background-image: url(../img/main_background.jpg);
		background-repeat: repeat;
		margin: 3% 0;
		padding: 5% 0;
		position: relative;
		
		/*border: thin dashed #F99;*/
	}
	/** line上 **/
	section.NavigationLink::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		background: #96735A;
		top: 3px;
		left: 0;
	}
	/** line下 **/
	section.NavigationLink::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		background: #96735A;
		bottom: 3px;
		left: 0;
	}
	/*-------------------
		背景画 楓の枝
	-------------------*/
	section.NavigationLink > div:first-child {
		width: 100%;
		/*max-width: 1020px;*/
		margin: 0 auto;
		position: relative;
	}
	section.NavigationLink > div:first-child picture {
		width: 200px;
		position: absolute;
		z-index: -1;
		top: -8rem;
		left: -5rem;
	}
	
	/*============================
		● link Banner
	=============================*/
	section.NavigationLink ul {
		width: 98%;
		max-width: 750px;
		list-style-type: none;
		margin: 0 auto;
		text-align: center;
	}
	section.NavigationLink li {
		/*border: thin dashed #F66;*/
	}
	section.NavigationLink a {
		width: 150px;
		height: 190px;
		border-radius: 50%;
		display: block;
		position: relative;
		padding: 5px;
		margin: 0 auto;
	}
	section.NavigationLink a picture {
		width: 180px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	section.NavigationLink a:hover picture {
		opacity: 0.9;
		filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));
		top: 49%;
	}
	section.NavigationLink a:active picture {
		filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
		top: 50%;
	}
	
	/*----------------
		入園要項
	-----------------*/
	/* section.NavigationLink ul li:first-child a picture {
		top: 40%;
	}
	section.NavigationLink ul li:first-child a:hover picture {
		top: 39%;
	}
	section.NavigationLink ul li:first-child a:active picture {
		top: 40%;
	} */
	/*----------------
		園の一日
	----------------*/
	section.NavigationLink ul li:nth-child(2) a picture {
		width: 185px;
	}
	/*------------------------
		保護者・保育士の声
	-------------------------*/
	section.NavigationLink ul li:nth-child(3) a picture {
		width: 160px;
	}
	/*---------------
		主な行事
	----------------*/
	section.NavigationLink ul li:last-child a picture {
		width: 180px;
		top: 41%;
	}
	section.NavigationLink ul li:last-child a:hover picture {
		top: 40%;
	}
	section.NavigationLink ul li:last-child a:active picture {
		top: 41%;
	}
	
	
	/*-----------------
		背景画像 kids	
	------------------*/
	section.NavigationLink > div:last-child {
		width: 95%;
		max-width: 1020px;
		margin: 0 auto;
		position: relative;
	} 
	section.NavigationLink > div:last-child picture {
		width: 100px;
		position: absolute;
		bottom: 8rem;
		right: -2rem;
	}
	
	
	/*==========================================
		日本の四季に触れ、感性を豊かに
	===========================================*/
	section.Policy {
		width: 95%;
		max-width: 1020px;
		margin: 7% auto 0 auto;
		padding-bottom: 6%;
		
		/*display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: space-around;
		-webkit-box-pack: distribute;
		-ms-flex-pack: distribute;
		justify-content: space-between;
		-webkit-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;*/
		display: block;
	}
	section.Policy picture {
		width: 95%;
		margin-left: 5%;
	}
	section.Policy dl {
		width: 90%;
		margin: 3% auto;
	}
	section.Policy dl dt {
		width: 80%;
		color: #963;
		font-size: 1.5rem;
		line-height: 1.7rem;
		letter-spacing: 2px;
		margin: 5% auto 5% auto;
	}
	section.Policy dl dd {
		color: #666;
		text-align: left;
		letter-spacing: 1px;
	}
	section.Policy dl dd p {
		line-height: 1.2rem;
		margin-bottom: 3%;
	}
	
	
}




/*========================================================
	iphone SE size
=========================================================*/
@media screen and (max-width: 340px) {
	
}