@charset "utf-8";



/* 960px以下
-------------------------------------------------------------- */
@media screen and (max-width: 960px){
	#content {
		width:100%;
		padding-left:0;
	}
	#nav {
			-webkit-transform: translateX(-240px);
			-ms-transform: translateX(-240px);
		transform: translateX(-240px);
	}
	#openBtn {
		opacity: 1;
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
		transform: scale(1);
	}
	#nav.opened {
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
		transform: translateX(0);
	}
}



/* 768px以下
-------------------------------------------------------------- */
@media screen and (max-width: 768px){
	body{
		line-height:22px;
		letter-spacing:1px;
	}
	#content {
		width:100%;
		padding:0;
	}
	article {
		width:calc(100% - 40px);
		margin:0 auto;
		padding:0 20px;
	}
	article#notfound{
		min-height:calc(100% - 154px);
	}
	.title img.l{
		left:0;
		margin-left:0;
	}
	.title img.r{
		right:0;
		margin-right:0;
	}
	#page_top {right:20px}

	/* フッター
	----------------------------*/
	footer{
		padding:30px 0 40px 0;
		font-size:10px;
	}
	footer #copyright{
		margin-top:20px;
		font-size:6px;
	}

	/* トップページ
	-------------------------------------------*/
	#topimage,
	#concept
	{
		width:100%;
		padding:0;
	}
	#concept section{font-size:12px}
	#concept #c_logo{
		margin-left:-79px;
		width:158px;
		height:90px;
	}
	#concept #c1 h3,
	#concept #c2 h3,
	#concept #c3 h3{margin-top:0}
	#concept #c1{
		left:7%;
		top:15%;
		width:219px;
		height:139px;
	}
	#concept #c2{
		right:7%;
		top:35%;
		width:259px;
		height:139px;
	}
	#concept #c3{
		left:7%;
		top:56%;
		width:270px;
		height:267px;
	}
	#concept #c3 ul{padding-left:1.7em}

	#access div.l{
		/*width:100%;*/
		float:none;
		margin:0 auto;
		padding:40px 0;
	}
	#access div.l div{
		width:100%;
		max-width:310px;
		margin:0 auto;
	}
	#access div.r{
		width:100%;
	}
	#access div.r div{
		width:100%;
		max-width:400px;
		margin:0 auto;
		text-align:center;
	}
	
	/* 当園について
	-------------------------------------------*/
	#guidance section:nth-child(2){padding:0 20px}
	#guidance p+p{display:inline}
	#event #ev_aw01 .spring1{width:98px}
	#event #ev_aw01 .spring2{width:90px}
	#event #ev_aw01 .spring3{width:72px}
	#event #ev_aw02 .summer1{width:85px}
	#event #ev_aw02 .summer2{width:117px}
	#event #ev_aw02 .summer3{width:97px}
	#event #ev_aw03 .autumn1{width:115px}
	#event #ev_aw03 .autumn2{width:85px}
	#event #ev_aw03 .autumn3{width:78px}
	#event #ev_aw04 .winter1{width:88px}
	#event #ev_aw04 .winter2{width:90px}
	#event #ev_aw04 .winter3{width:158px}
	
	/* 入園案内
	-------------------------------------------*/
	#greetings .title img.l{left:50%}
}



/* 600px以下
-------------------------------------------------------------- */
@media screen and (max-width: 600px){

	/* フッター
	----------------------------*/
	#loginform {
		width:320px;
		height:360px;
		margin-left:-170px;
		margin-top:-180px;
	}
	#loginform img.aw{right:30px}

	/* トップページ
	-------------------------------------------*/
	#concept{
		height:650px;
		background:url(images/toppage/concept.jpg) center center no-repeat;
		background-size:cover;
	}
	#concept section{
		font-size:10px;
		line-height:18px;
		letter-spacing:0.6px;
	}
	#concept img{display:none}
	#concept #c_logo{
		margin-left:-52px;
		width:105px;
		height:60px;
	}
	#concept #c_logo img{display:block}
	#concept h3{padding:5px 0}
	#concept #c1{
		left:2%;
		top:13%;
		width:165px;
		height:100px;
		z-index:3;
	}
	#concept #c2{
		right:2%;
		top:34%;
		width:215px;
		height:85px;
		z-index:2;
	}
	#concept #c3{
		left:2%;
		top:53%;
		width:190px;
		height:250px;
	}
	#concept #c3 ul{padding-left:1.3em}
	
	#access{padding:40px 0 80px 0}

	/* 当園について
	-------------------------------------------*/
	.b3_1, .b3_2, .b3_3{width:calc((100% / 2) - 5px)}
	#song .b3_1, #song .b3_2, #song .b3_3{font-size:13px}
	
	#time_table .title img.l{width:104px}
	#time_table .title img.r{width:106px}
	#time_table #table .left,
	#time_table #table .right{width:100%}
	#time_table #table .right .time{display:block}
	#time_table .space{width:10px}
	#time_table .baby,
	#time_table .child{width:calc(100% - 70px)}
	#time_table .time,
	#time_table .space,
	#time_table .baby,
	#time_table .child{margin-bottom:40px}
	#time_table .baby span.t2 img{right:-10px}

	#time_table span.t2{min-height:75px}
	#time_table span.t3{min-height:50px}
	#time_table span.t4{min-height:50px}
	#time_table span.t5{min-height:75px}
	#time_table span.t6{min-height:75px}
	#time_table span.t7{min-height:25px}
	#time_table span.t8{min-height:25px}
	#time_table span.t9{min-height:75px}
	#time_table span.t10{min-height:25px}
	#time_table span.t11{min-height:25px}
	#time_table span.t12{min-height:25px}
	
	#time_table #table div.popup:nth-child(1) span.t6,
	#time_table #table div.popup:nth-child(1) span.t8,
	#time_table #table div.popup:nth-child(2) span.t5,
	#time_table #table div.popup:nth-child(2) span.t7{display:none}
	#time_table #table div.popup:nth-child(-n+3) span.t4,
	#time_table #table div.popup:nth-child(n+4) span.t2{min-height:30px}
	
	#tree{padding:0}
	
	#event section+section{padding:0 0 40px 0}
	
	#event #ev_aw01,
	#event #ev_aw02,
	#event #ev_aw03,
	#event #ev_aw04{
		width:100%;
		margin:0 0 20px;
		background-position:center center;
		min-height:150px;
	}
	#event #spring,
	#event #summer,
	#event #autumn,
	#event #winter{text-align:center}
	#event #summer span{display:inline-block}
	#event #spring,
	#event #summer,
	#event #autumn,
	#event #winter{
		position:static;
		width:100%
	}
	#event #ev_aw01 .spring1{top:0;left:10%}
	#event #ev_aw01 .spring2{top:10%;left:68%}
	#event #ev_aw01 .spring3{top:40%;left:40%}
	#event #ev_aw02 .summer1{right:65%}
	#event #ev_aw02 .summer2{right:13%}
	#event #ev_aw02 .summer3{top:50%;right:40%}
	#event #ev_aw03 .autumn1{top:0;left:10%}
	#event #ev_aw03 .autumn2{left:68%}
	#event #ev_aw03 .autumn3{top:40%;left:42%}
	#event #ev_aw04 .winter1{top:-7%;right:10%}
	#event #ev_aw04 .winter2{right:68%}
	#event #ev_aw04 .winter3{right:28%}
	
	#profile .title img.l{width:67px}
	#profile table{width:100%}
	#profile table th{
		min-width:6em;
		padding-right:20px;
	}
	#profile table td.tel span{display:block}
	#profile table td.tel span+span{margin-left:0}
	
	#access_map .title img.r{width:77px}
	#access_map #map_canvas{width:100%}
	
	/* 会計監査報告
	-------------------------------------------*/
	#reports .title img.l{width:110px}
	#reports .report{min-height:100px}
	
	/* 入園案内
	-------------------------------------------*/
	#greetings section:nth-child(2),
	#rates table,#rates p{width:100%}
	#greetings .title{margin:60px auto}
	#greetings .title h2{margin-left:100px}
	#greetings .title img.l{
		width:83px;
		margin-left:-100px
	}
	#rates table th{width:100px}
	#fee .title img.l{width:72px}
	#fee .title img.r{width:62px}
	
	/* プライバシーポリシー
	-------------------------------------------*/
	#privacy .title img.l{width:92px}
	#privacy .policy p,
	#privacy .policy .signature span,
	#privacy .contact{width:100%}
	#privacy .policy ul{width:calc(100% - 20px)}

	/* 苦情解決公表
	-------------------------------------------*/
	#claim .title img.r{width:76px}
	#claim .resolution div{width:calc(100% - 40px)}
	#claim .flow ul{width:calc(100% - 20px)}

	/* お問い合わせ
	-------------------------------------------*/
	#contact .title{padding-bottom:0}
	#contact .title img.r,
	#confirm .title img.r,
	#thanks .title img.r{width:147px}
	#contact .description,
	#contact table,
	#confirm table{max-width:400px}
	#contact .tel img{
		display:block;
		margin:0 auto 30px auto;
		width:49px;
	}
	#contact .tel div{padding:0}
	#contact tr,
	#confirm tr{
		display:block;
		padding:10px 0;
	}
	#contact tr+tr,
	#confirm tr+tr{border-top:1px #ddd dotted}
	#contact tr:last-child,
	#confirm tr:last-child{border:none}
	#contact th,
	#contact td,
	#confirm th,
	#confirm td{
		display:list-item;
		list-style:none;
	}
	#contact th:after,
	#confirm th:after{content:""}
	#contact td,
	#confirm td{width:100%;padding-top:0}
	#contact td.submit img,
	#confirm td.submit img{
		top:40px;
		width:54px;
	}
	#contact input[type=submit],
	#confirm input[type=submit]{width:130px}

	/* ひみつの基地
	-------------------------------------------*/
	#secretbase .title img.r{width:103px}
	#topics .list div ul li p+p{margin-top:0}
	#topics .list div ul li .date{margin-bottom:0}
	#topics .list div ul li .detail{width:calc(100% - 10px)}
	#birthday .title {padding-top:40px}
	#birthday .title img.l{width:117px}
	#birthday .title img.r{width:124px}
	#birthday #birthlist ul{
		width:100%;
		font-size:12px;
	}
	#birthday #birthlist ul li{
		text-indent:-5.5em;
		padding-left:5.5em;
	}
	#letter .title img.r{width:56px}
	#letter .newletter ul li{width:100%}
	#letter .newletter ul li+li{margin-top:10px}
	#letter .newletter ul li:nth-child(1),
	#letter .newletter ul li:nth-child(3){text-align:center}
	#letter .letter_archive{width:100%}
	#letter .letter_archive a{width:calc(100% /3)}
	#events #movie div{width:calc(100% - 60px)}
}



/* 420px以下
-------------------------------------------------------------- */
@media screen and (max-width: 420px){

	/* トップページ
	-------------------------------------------*/
	#concept{height:480px;margin-bottom:100px}
	#concept section{padding:15px 10px}
	#concept #c1{top:73px}
	#concept #c2{top:185px}
	#concept #c3{top:275px;width:130px}

	/* 当園について
	-------------------------------------------*/
	#time_table #table div span{
		width:calc(100% - 20px);
		padding:0 10px;
	}

}