@charset "utf-8";

@media screen and (max-width: 640px) {
/*****************************************
				HTML
*****************************************/
	html { background: none; }
/*****************************************
				Body
*****************************************/
	body {
		width: 100% !important;
		position: static;
	}
/*****************************************
				Container
*****************************************/
	#container {
		min-width: 100%;
		min-height: inherit;
	}
/*****************************************
			Main Container
*****************************************/
	#mainContainer { padding: 0; }
/*****************************************
				Wrapper
*****************************************/
	#wrapper {
		padding: 0;
		float: none;
	}
/*****************************************
				Main
*****************************************/
	#main {
		margin: 0;
		padding: 0;
	}
/*****************************************
				Contents
*****************************************/
	#contents {
		width: 98%;
		margin: 0;
		padding: 0 1%;
		border: none;
		border-radius: 0;
	}
/*****************************************
				Header
*****************************************/
	#header {
		background: url(../img/header/header_bg2.jpg) 0 42px no-repeat;
		background-size: contain;
		width: 100%;
		min-width: 100%;
		height: auto;
		margin: 0;
		padding: 47px 0 0 0;
		overflow: visible;
		text-align: center;
		letter-spacing: -0.4em;
	}
	#headerNav {
		background: #FFF;
		height: 40px;
	}
	#headerNavInner {}
	#logoTitle {
		width: 137px;
		height: 100px;
		margin: 0 auto 7px auto;
	}
	#logoTitle a { background-size: 137px 100px; }
	#btn_city {
		background-size: 125px 30px;
		width: 125px;
		height: 30px;
	}
	#tools {
		width: 116px;
		margin: 0;
		padding: 0;
		display: inline-block;
		vertical-align: top;
		letter-spacing: normal;
	}
	#btn_searchBox {
		background: url(../img/header/btn_searchbox.png) 0 0 no-repeat;
		background-size: 50px auto;
		width: 50px;
		height: 52px !important;
		margin: 10px 4px 0 0;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
		display: inline-block;
		vertical-align: top;
		letter-spacing: normal;
	}
	#btn_menuBox {
		background: url(../img/header/btn_menubox.png) 0 0 no-repeat;
		background-size: 50px auto;
		width: 50px;
		height: 52px !important;
		margin: 10px 4px 0 0;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
		display: inline-block;
		vertical-align: top;
		letter-spacing: normal;
	}
	#foreigners,
	#sizeChanger { display: none;}
/*****************************************
			Search Box
*****************************************/
	#searchBox {
		display: none;
		margin: 0 1%;
		width: 98%;
		background: #F0F5F6;
		border: solid 2px #0060DF;
		box-sizing: border-box;
		box-shadow: 0 2px 3px 0 rgba(0,0,0,0.6);
		position: absolute;
		top: 10px;
		left: 0;
		z-index: 9999 !important;
	}
	#searchBox h2 {
		padding: 8px;
		background: -webkit-gradient(linear, left top, left bottom, from(#0080FF), color-stop(0.65, #0060DF));
		background: -o-linear-gradient(#0080FF 0%, #0060DF 65%);
		background: linear-gradient(#0080FF 0%, #0060DF 65%);
		border-bottom: solid 1px #0060DF;
		font-weight: bold;
		color: #FFF;
		text-align: center;
		text-shadow: none;
		position: relative;
		cursor: pointer;
		display: block !important;
	}
	#searchBox h2 .btn_closeBox {
		display: block;
		width: 20px;
		height: 20px;
		background: url(../img/parts/btn_close.png) 0 0 no-repeat;
		background-size: 20px 20px;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
		position: absolute;
		top: 7px;
		right: 8px;
	}
	#search {
		background: none;
		width: 96%;
		padding: 0.8em 2%;
		text-align: center;
		border: none;
	}
	#search label {
		display: none;
	}
	#field_search {
		background-color: #FFF;
		padding: 0 1%;
		width: 88%;
		height: 28px;
		line-height: 28px;
		border: none;
		letter-spacing: normal;
	}
	#btn_search {
		position: static;
		top: 0;
		right: 0;
		width: 8%;
		margin: 3px 0 0 0;
		float: right;
	}
/*****************************************
			Menu Box
*****************************************/
	#menuBox {
		display: none;
		margin: 0 1%;
		width: 98%;
		height: auto;
		background: #F0F5F6;
		border: solid 2px #0060DF;
		box-sizing: border-box;
		box-shadow: 0 2px 3px 0 rgba(0,0,0,0.6);
		position: absolute;
		top: 10px;
		left: 0;
		z-index: 9999 !important;
	}
	#menuBox h2 {
		padding: 8px;
		background: -webkit-gradient(linear, left top, left bottom, from(#0080FF), color-stop(0.65, #0060DF));
		background: -o-linear-gradient(#0080FF 0%, #0060DF 65%);
		background: linear-gradient(#0080FF 0%, #0060DF 65%);
		border-bottom: solid 1px #0060DF;
		font-weight: bold;
		color: #FFF;
		text-align: center;
		text-shadow: none;
		position: relative;
		cursor: pointer;
		display: block !important;
		letter-spacing: normal;
	}
	#menuBox h2 .btn_closeBox {
		display: block !important;
		width: 20px;
		height: 20px;
		background: url(../img/parts/btn_close.png) 0 0 no-repeat;
		background-size: 20px 20px;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
		position: absolute;
		top: 7px;
		right: 8px;
	}
	#menuBox h3 {
		padding: 8px;
		background: #0060DF;
		border: solid 1px #0060DF;
		border-bottom: none;
		color: #FFF;
		font-weight: bold;
		text-shadow: none;
		letter-spacing: normal;
		letter-spacing: normal;
	}
	#menuBox ul {
		list-style: none;
		background: #FFF;
		border: solid 1px #0060DF;
		margin: 10px;
	}
	#menuBox ul li {
		border-bottom: dotted 1px #0060DF;
		letter-spacing: normal;
		text-align: left;
	}
	#menuBox ul li:last-child {
		border-bottom: none;
	}
	#menuBox ul li a {
		display: block;
		padding: 8px 16px 8px 8px;
		background: url(../img/parts/list_arw_blue.png) 98% 50% no-repeat;
		background-size: auto 16px;
		text-decoration: none;
		color: #3F1F0A;
	}
/*****************************************
			Global Navigation
*****************************************/
	#gNav {
		width: 100%;
		margin: 0;
		padding: 0;
		clear: both;
	}	
	#gNav ul {
		background: #FFF;
		overflow: hidden;
		width: auto;
		margin: 0;
		letter-spacing: normal;
		font-size: 86%;
		list-style: none;
		float: none;
	}
	#gNav ul li {
		background: none;
		margin: 0;
		padding: 0;
		display: block;
		width: 50% !important;
		height: auto;
		float: left;
		list-style: none;
		border-bottom: solid 2px #50C491;
	}
	#gNav ul li:nth-child(1) {
		background: url(../img/gnav/gnav01.png) 4px 9px no-repeat;
		background-size: auto 22px;
	}
	#gNav ul li:nth-child(2) {
		background: url(../img/gnav/gnav02.png) 4px 9px no-repeat;
		background-size: auto 22px;
	}
	#gNav ul li:nth-child(3) {
		background: url(../img/gnav/gnav03.png) 4px 9px no-repeat;
		background-size: auto 22px;
	}
	#gNav ul li:nth-child(4) {
		background: url(../img/gnav/gnav04.png) 4px 9px no-repeat;
		background-size: auto 22px;
	}
	#gNav ul li:nth-child(5) {
		background: url(../img/gnav/gnav05.png) 4px 9px no-repeat;
		background-size: auto 22px;
	}
	#gNav ul li:nth-child(6) {
		background: url(../img/gnav/gnav06.png) 4px 9px no-repeat;
		background-size: auto 22px;
	}
	#gNav ul li a {
		background: none;
		width: auto;
		line-height: 40px !important;
		display: block;
		font-weight: bold;
	}
	#gNav ul li:nth-child(odd) a { border-right: solid 1px #50C491; }
	#gNav ul li:nth-child(even) a { border-left: solid 1px #50C491; }
/*****************************************
			Topicpath
*****************************************/
	#topicpath { border-top: none; }
/*****************************************
			Main Contents
*****************************************/
	#mainContents {
		background: #FFF;
		margin-bottom: 0;
	}
/*****************************************
			Page Title
*****************************************/
	#pageTitle,
	#pageTitle_about,
	#pageTitle_work,
	#pageTitle_housing,
	#pageTitle_award,
	#pageTitle_parenting,
	#pageTitle_flow {
		background: #50C491;
		margin: 0 auto 12px auto;
		border-radius: 0;
	}
	#pageTitle .innerTitle,
	#pageTitle_about .innerTitle,
	#pageTitle_work .innerTitle,
	#pageTitle_housing .innerTitle,
	#pageTitle_award .innerTitle,
	#pageTitle_parenting .innerTitle,
	#pageTitle_flow .innerTitle {
		background: -webkit-gradient(linear, left top, left bottom, from(#58C695), color-stop(0.5, #ADE4CC), color-stop(0.9, #58C695));
		background: -o-linear-gradient(#58C695 0%, #ADE4CC 50%, #58C695 90%);
		background: linear-gradient(#58C695 0%, #ADE4CC 50%, #58C695 90%);
		padding: 5px 8px;
		width: auto;
		height: auto;
		text-indent: 0;
		white-space: normal;
		line-height: 1.41;
		font-size: 150%;
		font-weight: bold;
	}
/*****************************************
				Contents
*****************************************/
	#contents {
		width: 98%;
		background: none;
		margin: 0;
		padding: 0 1%;
	}
/*****************************************
			Contents Title
*****************************************/
	#contents h2,
	#contents h3,
	#contents h4,
	#contents h5,
	#contents h6 { margin: 15px 0 8px 0; }
/*****************************************
			Page Information
*****************************************/
	#pageInfo { padding: 10px 0; }
	#print { display: none; }
/*****************************************
			Page Top
*****************************************/
	#pageTop {
		margin: 0 auto;
		float: none;
	}
/*****************************************
				Social
*****************************************/
	#social {
		margin: 0;
		padding: 10px 1%;
		letter-spacing: -0.4em;
	}
	#social div {
		letter-spacing: normal;
		display: inline-block;
		vertical-align: top;
	}
	#social .twitter,
	#social .facebook { width: 110px !important; }
	#social .LINE {
		width: 88px;
		height: 20px;
	}
	#social .LINE a {
		display: block;
		width: 100%;
		height: 100%;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
		background: url(../img/parts/btn_LINE.png) 0 0 no-repeat;
		background-size: 88px 20px;
	}
/*****************************************
				Mail Form
*****************************************/
	#mailform dl {
		margin: -1px 0 0 0;
		padding: 10px;
		border: solid 1px #CCC;
		border-left: solid 3px #CCC;
		overflow: hidden;
	}
	#mailform dl.req {
		border-left: solid 3px #F00;
	}
	#mailform dl dt {
		width: auto;
		float: none;
	}
	#mailform dl dd {
		width: auto;
		float: none;
	}
	#field_subject,
	#field_name,
	#field_zip,
	#field_address,
	#field_tel,
	#field_email,
	#field_email_conf,
	#content { width: 100%; }
/*****************************************
				About Top
*****************************************/
	#aboutTop {
		background-size: cover;
		height: 160px;
		padding: 20px 0 10px 0;
		min-width: 100%;
	}
	#aboutTop p {
		background: url(../../img/contents/top_text2.png) 50% 0 no-repeat;
		background-size: contain;
		width: 90%;
		height: 160px;
		margin: 0 auto;
	}
	#btn_more_about { display: none; }
/*****************************************
				Top Menu
*****************************************/
	#topMenu {
		height: auto;
		min-width: 100%;
		margin-bottom: 2px;
		padding: 10px 0;
	}
	#topMenuInner {
		background: none;
		height: auto;
	}
	#topMenu ul {
		width: 100%;
		margin: 0;
		padding: 0;
		letter-spacing: -0.4em;
		text-align: center;
	}
	#topMenu ul li {
		width: 153px;
		height: 40px;
		margin: 0 2px 10px 2px;
		float: none;
		display: inline-block;
	}
	#topMenu ul li.menu04,
	#topMenu ul li.menu08 { margin: 0 2px 10px 2px; }
	#topMenu ul li a {
		width: 100%;
		height: 100%;
		display: block;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
	#topMenu ul li.menu01 a {
		background: url(../../img/contents/menu01.png) 0 0 no-repeat;
		background-size: 153px 40px;
	}
	#topMenu ul li.menu02 a {
		background: url(../../img/contents/menu02.png) 0 0 no-repeat;
		background-size: 153px 40px;
	}
	#topMenu ul li.menu03 a {
		background: url(../../img/contents/menu03.png) 0 0 no-repeat;
		background-size: 153px 40px;
	}
	#topMenu ul li.menu04 a {
		background: url(../../img/contents/menu04.png) 0 0 no-repeat;
		background-size: 153px 40px;
	}
	#topMenu ul li.menu05 a {
		background: url(../../img/contents/menu05.png) 0 0 no-repeat;
		background-size: 153px 40px;
	}
	#topMenu ul li.menu06 a {
		background: url(../../img/contents/menu06.png) 0 0 no-repeat;
		background-size: 153px 40px;
	}
	#topMenu ul li.menu07 a {
		background: url(../../img/contents/menu07.png) 0 0 no-repeat;
		background-size: 153px 40px;
	}
	#topMenu ul li.menu08 a {
		background: url(../../img/contents/menu08.png) 0 0 no-repeat;
		background-size: 153px 40px;
	}
	#topMenu ul li.menu01 a:hover,
	#topMenu ul li.menu02 a:hover,
	#topMenu ul li.menu03 a:hover,
	#topMenu ul li.menu04 a:hover,
	#topMenu ul li.menu05 a:hover,
	#topMenu ul li.menu06 a:hover,
	#topMenu ul li.menu07 a:hover,
	#topMenu ul li.menu08 a:hover { background-position: 0 0; }
/*****************************************
				Main Block
*****************************************/
	#mainBlock {
		background: none;
		min-width: 100%;
		height: auto;
		padding: 0;
		text-align: left;
		letter-spacing: normal;
	}
/*****************************************
				News
*****************************************/
	#news {
		width: 100%;
		margin: 0 0 10px 0;
		display: block;
	}
	#news h2 {
		background-image: url(../../img/contents/title_news_left.png), url(../../img/contents/title_news_right.png);
		background-size: auto 48px, auto 24px;
		background-position: 5px 50%, 98% 50%;
		background-color: #A9DFE0;
		width: 100%;
		height: 58px;
		margin: 0 0 1px 0;
	}
	#newsContents {
		border-top: 1px solid #40B7B8;
	}
	#news dl {
		margin: 0;
		padding: 8px 24px 8px 6px;
		border-bottom: 1px solid #40B7B8;
	}
	#btn_newslist {
		background: url(../../img/contents/btn_newslist.png) 0 0 no-repeat;
		background-size: 178px auto;
		width: 178px;
		height: 40px;
		margin: 10px auto 15px auto;
		position: static;
		top: 0;
		right: 0;
	}
	#btn_newslist:hover { background-position: 0 0; }
/*****************************************
				Event
*****************************************/
	#event {
		width: 100%;
		margin: 0 0 10px 0;
		display: block;
	}
	#event h2 {
		background-image: url(../../img/contents/title_event_left.png), url(../../img/contents/title_event_right.png);
		background-size: auto 48px, auto 24px;
		background-position: 5px 50%, 98% 50%;
		background-color: #A9DFE0;
		width: 100%;
		height: 58px;
		margin: 0 0 1px 0;
	}
	#eventContents {
		border-top: 1px solid #40B7B8;
	}
	#event dl {
		margin: 0;
		padding: 8px 24px 8px 6px;
		border-bottom: 1px solid #40B7B8;
	}
	#event dl dt { display: none; }
	#event dl dd.eventday { margin: 0 0 5px 0; }
	#event dl dd.eventtext { margin: 0 0 0 0; }
	#event dl dd.eventdetail a {
		position: absolute;
		left: 6px;
		bottom: 8px;
	}
	#btn_eventlist {
		background: url(../../img/contents/btn_eventlist.png) 0 0 no-repeat;
		background-size: 178px auto;
		width: 178px;
		height: 40px;
		margin: 10px auto 15px auto;
		position: static;
		top: 0;
		right: 0;
	}
	#btn_eventlist:hover { background-position: 0 0; }
}
@media screen and (max-width: 860px) {
/*****************************************
				Footer
*****************************************/
	#footer {
		margin: 0;
		height: auto;
	}
	#footerInner {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	#footerNav {
		background: #FFF;
		border-top: solid 2px #CCC;
		overflow: hidden;
		width: auto;
		margin: 12px 0 0 0;
		letter-spacing: normal;
		font-size: 86%;
		list-style: none;
		float: none;
	}
	#footerNav li {
		background: none;
		margin: 0;
		padding: 0;
		display: block;
		width: 50%;
		float: left;
		list-style: none;
		border-bottom: solid 2px #CCC;
	}
	#footerNav #li_facebook,
	#footerNav #li_twitter {
		display: block;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
	#footerNav #li_facebook {
		background: url(../img/footer/btn_facebook2.png) 3px 3px no-repeat;
		background-size: auto 34px;
	}
	#footerNav #li_twitter {
		background: url(../img/footer/btn_twitter2.png) 3px 3px no-repeat;
		background-size: auto 34px;
	}
	#footerNav li a {
		background: none;
		line-height: 40px;
		padding: 0 0 0 2%;
		display: block;
		font-weight: bold;
	}
	#footerNav li:nth-child(odd) a { border-right: solid 1px #CCC; }
	#footerNav li:nth-child(even) a { border-left: solid 1px #CCC; }
	#footerNav li:nth-child(n+3) {
		background: url(../img/parts/list_arw_green.png) 98% 50% no-repeat;
		background-size: auto 14px;
	}
	#btnFooter2 {
		display: block;
		width: auto;
		overflow: hidden;
	}
	#btnFooter2 a {
		width: 150px;
		height: 34px;
		display: block;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
	#btnFooter2 .btn01 {
		background: url(../img/footer/btn01.png) 0 0 no-repeat;
		background-size: 150px auto;
		float: left;
	}
	#btnFooter2 .btn02 {
		background: url(../img/footer/btn02.png) 0 0 no-repeat;
		background-size: 150px auto;
		float: right;
	}
	#btnArea,
	#btnFooter { display: none; }
/*****************************************
			Footer Contents
*****************************************/
	#footerContents { background: #6A6A6A; }
	#footerContentsInner {
		background: url(../img/footer/footer_logo.png) 50% 15px no-repeat;
		max-width: 100%;
		height: auto;
		margin: 0;
		padding: 170px 0 0 0;
	}
	#contactus {
		width: 96%;
		margin: 0 2%;
	}
	#contactus dl {
		width: 100%;
		float: none;
	}
/*****************************************
			Copy Right
*****************************************/
	#copyright {
		background: url(../img/footer/copyright_bg.png) 0 0 repeat;
		background-size: 4px auto;
		margin: 10px 0 0 0;
		padding: 8px 0;
		color: #000;
		text-align: center;
	}
	#copyright span { display: none; }
}