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

@media only screen and (max-width: 640px) {			
	
	br.resp {
		display: block;
	}
		
/* -------------------------------------------------------- header */
	
	header.default {
		display: none;
	}
	
	header.responsive {
		background: #ffffff;
		display: block;
	}
	
	header.responsive div.inner {
		width: auto;
		margin: 0;
		padding: 10px 10px 10px 0;
	}
	
	header.responsive div.logo {
		float: left;
		width: 250px;
		margin: 0 auto;
	}
	
	header.responsive div.logo img {
		display: block;
		width: 250px;
	}	

/* -------------------------------------------------------- menuButton */

	div.menuButton {
		float: right;
		/* background: url(../img/menubutton.png) no-repeat;
		background-size: 36px 36px;
		background-position: center;
		cursor: pointer;
		width: 36px;
		height: 36px; */
		display: block;
		position: relative;
		width: 40px;
		height: 30px;
	}

	div.menuButton.active {
		/* background: url(../img/menubutton_active.png) no-repeat;
		background-size: 36px 36px;
		background-position: center; */
	}
	
	div.menuButton span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;	
		position: absolute;
		left: 0;
		width: 100%;
		height: 6px;
		background-color: #ef8200;
	}

	div.menuButton span:nth-of-type(1) {
		top: 0;
	}
	
	div.menuButton span:nth-of-type(2) {
		top: 12px;
	}
	
	div.menuButton span:nth-of-type(3) {
		bottom: 0;
	}
	
	div.menuButton.active span:nth-of-type(1) {
		-webkit-transform: translateY(12px) rotate(-45deg);
		-moz-transform: translateY(12px) rotate(-45deg);
		-ms-transform: translateY(12px) rotate(-45deg);
		-o-transform: translateY(12px) rotate(-45deg);
		transform: translateY(12px) rotate(-45deg);
	}
	
	div.menuButton.active span:nth-of-type(2) {
		opacity: 0;
	}
	
	div.menuButton.active span:nth-of-type(3) {
		-webkit-transform: translateY(-12px) rotate(45deg);
		-moz-transform: translateY(-12px) rotate(45deg);
		-ms-transform: translateY(-12px) rotate(45deg);
		-o-transform: translateY(-12px) rotate(45deg);
		transform: translateY(-12px) rotate(45deg);
	}
	
	/* ie9 */
	
	html.ie9 div.menuButton {		
		background: url(../img/menubutton.png) no-repeat;
		background-size: 40px 30px;
		background-position: center;
		cursor: pointer;
		width: 40px;
		height: 30px;
		display: block;
		position: relative;
	}

	html.ie9 div.menuButton.active {
		background: url(../img/menubutton_active.png) no-repeat;
		background-size: 40px 30px;
		background-position: center;
	}
	
	html.ie9 div.menuButton span {
		display: none;
	}
		
/* -------------------------------------------------------- nav.responsive */

	nav.responsive {
		display: block;
		background: #faf8f6;
		height: 0;
		max-height: 0;
		overflow: hidden;
    	transition: all 0.5s ease-in-out 0s;
	}
	
	nav.responsive.active {
		height: auto;
		max-height: 1000px;
	}
	
	nav.responsive div.search {
		width: 100%;
		padding: 10px 5px;
		box-sizing: border-box;
		border-top: 1px solid #e6e2d7;		
	}
	
	nav.responsive div.search div.title {
		color: #42210b;
		font-weight: bold;
		padding: 5px 0.5em 0 0;
	}
	
	nav.responsive div.search input#searchword-resp {
		background: #fff none repeat scroll 0 0;
		border: 1px solid #cccccc;
		border-radius: 5px;
		color: #9f9f9f;
		font-size: 100%;
		padding: 0.5em;
		width: 140px;
		height: 30px;
		box-sizing: border-box;
	}
	
	nav.responsive div.search input#searchword-resp:focus {
		background: #ffffff none repeat scroll 0 0;
		border: 1px solid #cccccc;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
		outline: medium none;
	}
	
	nav.responsive div.search input#searchword-resp:active {
		background: #ffffff none repeat scroll 0 0;
		border: 1px solid #cccccc;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
		outline: medium none;
	}
	
	nav.responsive div.search input#btnSearch-resp {
		background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #ef8200, #ef8200) repeat scroll 0 0;
		border: medium none;
		border-radius: 5px;
		color: #ffffff;
		font-size: 100%;
		font-weight: bold;
		letter-spacing: 1px;
		padding: 0 1em;
		height: 30px;
		box-sizing: border-box;
	}
	
	nav.responsive ul {
		border-top: 1px solid #e6e2d7;		
	}
	
	nav.responsive ul li {
		font-size: 93%;
		display: block;
    	overflow: hidden;
   		width: 50%;
		border-bottom: 1px solid #e6e2d7;
		border-right: 1px solid #e6e2d7;
		box-sizing: border-box;
		float: left;
		background: #fff;
	}
	
	nav.responsive ul li:nth-child(even) {
		border-right: none;
	}
	
	nav.responsive ul li.last {
		border-bottom: none;
	}
	
	nav.responsive ul li a {
		box-sizing: border-box;
		display: block;
		font-weight: bold;
		padding: 10px;
		position: relative;
		text-align: left;
		width: 100%;
	}	
	
	nav.responsive ul li a::after {
		border-right: 2px solid #ef8200;
		border-top: 2px solid #ef8200;
		content: "";
		display: block;
		height: 6px;
		margin-top: -5px;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transition: all 0.2s ease-in-out 0s;
		width: 6px;
	}
	
	nav.responsive div.bar {
		height: 20px;
		font-weight: bold;
		padding: 0 10px;
	}
	
	nav.responsive div.bar.language {
		border-top: 1px solid #e6e2d7;
	}
	
/* -------------------------------------------------------- common */

	div.inner {
		width :100%;
		padding: 0 10px;
		box-sizing: border-box;
	}	
	
	section div.headline {
		position: relative;
	}
	
	section div.headline div.title span {
		font-size: 200%;
		vertical-align: top;
		color: #fff;
	}

	section div.headline div.title img {
		width: 168px;
		height: 24px;
		display: inline-block;	
	}
	
	div.link {
		position: absolute;
		top: 15px;
		right: 20px;
		z-index: 200;
	}
	
/* -------------------------------------------------------- section */
	
	div.mainVisual {
		height: auto;
		padding-top: 0;
	}
	
	div.mainVisual div.inner {
		height: auto;
		overflow: hidden;
	}

	div.mainVisual div.movie {
		margin-top: 0;
		position: relative;
		width: 100%;
		height: auto;
	}
	
	div.mainVisual div.movie iframe {
		height: auto;
		position: relative;
	}
	
	div.mainVisual div.movie iframe {
		height: 100% !important;
		position: relative;
		right: 0;
		top: 0;
		width: 100% !important;
		max-width: auto;
		margin: 0 auto;
	}	
	
	div.mainVisual div.movie a.iframe {
		position: absolute;
	}
	
	div.mainVisual div.movie,
	div.mainVisual div.movie img {
		width :100%;
	}
	
	div.mainVisual div.inner {
		padding: 0;
	}
	
	div.mainVisual div.calendarLink {
		display: none;
	}
	
	section.news,
	section.topics,
	section.jishin {
		width: 100%;
		margin-bottom: 20px;
	}
	
	section.purpose ul {
		display: block;
	}
	
	section.purpose ul li {
		display: block;
		float: left;
		width: 20%;
		height: 125px;
		box-sizing: border-box;
		border-bottom: 1px solid #e6e2d7;
	}
	
	section.purpose ul li:nth-child(5) {
		border-right: none;
	}
	
	section.purpose ul li a {
		box-sizing: border-box;
	}

	section.purpose ul li a span.icon {
		font-size: 250%;
	}
		
	section.purpose ul li a span.resp {
		display: none;
	}	
	
	section.living, 
	section.administration, 
	section.appearance, 
	section.mayor, 
	section.parliament, 
	section.localnews {
		float: none;
		margin: 0 0 20px 0;
		width: 100%;
	}
	
	div.section ul.banner {
		padding: 0 0;
	}
	
	div.section ul.banner li {
		width: 49%;
		margin-right: 1%;
		box-sizing: border-box;
	}
	
	div.section ul.banner li.last {
    	margin-right: 1%;
	}
	
	div.section ul.banner li img {
		width: 100%;
	}
	
	div.footerSitemap {
		display: none;
	}

/* -------------------------------------------------------- footer */
	
	div.snslink-resp {
		display: block;
	}
	
	div.snslink-resp ul {
		text-align: center;
		padding: 1em 0;
	}
	
	div.snslink-resp ul li {
		display: inline;
		padding: 0 0.5em;
	}
	
	div.snslink-resp ul li img {
		width: 80px;
		height: 80px;
	}
	
	
	footer {
		border: none;
		padding: 15px 10px;	
	}	
	
	footer div.number {
		line-height: 1.2;
		padding: 10px 0;
	}
	
	footer span.resp {
		display: none;
	}

	footer > div.inner > div.fl {
		border-right: none;
		box-sizing: border-box;
		width: 100%;
	}
	
	footer > div.inner > div.fr {
		display: none;
	}

/* -------------------------------------------------------- pageTop */
	
		
	div.pageTop.default {
		display: none;
	}
		
	div.pageTop.responsive {
		font-weight: bold;
		display: block;
		background: #fff;
		text-align: center;
		border-top: 1px solid #e6e2d7;		
		border-bottom: 1px solid #e6e2d7;
		background: #faf8f6;
	}
		
	div.pageTop.responsive a {
		color: #ef8200;		
		display: block;
		padding: 1em 0;
		position: relative;
	}	
		
		
	/* -------------------------------------------------------- contents */
	
	div.contents {
		width: 100%;
		margin: 0 auto;
	}	

	/* -------------------------------------------------------- aside */

	.topicPath {
		display: none;
	}
	
	div.contents {
		padding-top: 0;
	}
	
	div.contents div.main {
		width: 100%;
		float: none;
	}
	
	div.homeBack {
		background: #ffffff;
		display: block;
		border-bottom: none;
		text-align: inherit;
		display: inherit;
		width: 100%;
		font-size: 100%;
		padding: 0;
		border-top: 1px solid #e6e2d7;
	}
	
	div.homeBack ul {
		padding: 0;
		width: 100%;
		display: table;
		background: #faf8f6;
	}

	div.homeBack ul li {
		display: table-cell;
	}

	div.homeBack ul li.top {
		width: 30%;
		text-align: center;
		font-weight: bold;
		border-right: 1px solid #e6e2d7;
	}
	
	div.homeBack ul li.top a {
		color: #ef8200;
		padding: 1.5em 1em;
	}

	div.homeBack ul li.top a span {
		width: 20px;
		height: 20px;
		display: inline-block;
		overflow: hidden;
		vertical-align: top;
	}

	div.homeBack ul li.top a img {
		display: block;
		width: 20px;
	}

	div.homeBack ul li.back a {
		color: #ef8200;
		display: block;		
		padding: 1.5em 1em;
		text-decoration: none;
		font-weight: bold;
		position: relative;
	}
		
	/* -------------------------------------------------------- categoryheader */
	
	div.categoryheader {
		margin-top: 0;
	}
	
	div.categoryheader div.display {
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
	}
	
	div.categoryheader div.display div.title img {
		width: 90%;
		max-width: 350px;
	}
	
	div.categoryheader div.display div.subtitle {
		font-size: 100%; 
	}
	
	div.categoryheader div.display div.symbol {
		width: 40px;
		height: 60px;
		display: block;
		position: absolute;
		bottom: 0;
		right: 10px;
	}

	div.categoryheader div.display div.symbol img {
		width: 40px;
	}

	.topicPath {
		width: 100%;
	}
		
/* -------------------------------------------------------- categoryList */
	
	div.categoryList {
		width: 100%;
		margin: 0 auto;
		float: none;
	}
	
	div.categoryList ul {
		width: 95%;
		margin: 0 auto;
	}
	
	div.categoryList ul li {
		width: 100%;
		float: none;
		position: relative;
	}
	
	div.categoryList ul li:nth-child(even) {
		float: none;
	}
	
	div.categoryList a div.article div.link {
		float: none;
	}
	
	div.categoryList a div.article div.update {
		float: none;
	}
	
	div.categoryList a {
		position: relative;
    }
		
	div.categoryList a::after {
		border-right: 2px solid #ef8200;
		border-top: 2px solid #ef8200;
		content: "";
		display: block;
		height: 6px;
		margin-top: -5px;
		position: absolute;
		right: 15px;
		top: 50%;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transition: all 0.2s ease-in-out 0s;
		width: 6px;
	}
	
	div.categoryList div.article div.spot {
		width: 100%;
		height: 114px;
		margin-bottom: 10px;
		background: #f2f2f2;
		float: none;
		margin-right: 20px;	
	}
	
	div.categoryList div.article div.spot span {
		display: block;
		height: auto;
		width: 100%;
		height: 114px;
		position: relative;
	}
	
	div.categoryList div.article div.spot span img {
		position: absolute;
		display: block;
		height: auto;
		max-height: 100%;
		/* width: 100%; */
		margin: auto;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
/* -------------------------------------------------------- div.detail */	
	
	div.detail {		
		width: 100%;
		float: none;
	}
	
	div.detail div.header div.update {
	}

}