/* for TAB and PC */
@media all and (min-width: 768px){
	#navi {
		display: block !important;
	}
}


/* for TAB */
@media all and (min-width: 768px) and (max-width: 1024px){
	body {
		-webkit-text-size-adjust: 100%;
	}

	/* footer */

	#footer {
		padding: 21px 40px 17px 45px;
		height: auto;
		margin-left: 36px;
		width: 611px;
		background-size: 696px;
	}
	#footer ul {
		padding: 3px 20px 17px 20px;
		text-align: center;
	}
	#footer li {
		display: none;
		float: none;
	}
	#footer li a {
		height: 30px;
		width: auto;
	}
	#footer li#webjapan {
		display: inline-block;
		width: auto;
	}

}


/* for SP */
#sp_menu_bt {
	display: none;
	position: absolute;
	left: 0;
	top: 63px;
	width: 95px;
	height: 22px;
	text-indent: -9999px;
	z-index: 99;
}
#sp_menu_bt.open {
	background: url(../images/kids_menu_open.gif) no-repeat;
}
#sp_menu_bt.close {
	background: url(../images/kids_menu_close.gif) no-repeat;
}

@media all and (max-width: 767px){
	* {
		box-sizing: border-box;
	}
	html {
		min-width: 320px;
	}
	body {
		width: 100%;
		-webkit-text-size-adjust: 100%;
	}
	#wrapper, #page_body, #contents, #guide {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/* header */

	#header_2 {
		width: 100%;
		height: 85px;
		position: static;
		background: none;
	}
	#header_2 > #logo:before {
		display: block;
		content: " ";
		width: 90px;
		height: 85px;
		background: url(../images/img_head.gif) no-repeat;
		background-size: contain;
		position: absolute;
		left: 5px;
		top: 0;
		z-index: 1;
	}
	#header_2 > #logo:after {
		display: block;
		content: " ";
		width: 35px;
		height: 85px;
		background: url(../images/img_dog.gif) no-repeat;
		background-size: contain;
		position: absolute;
		right: 10px;
		top: 25px;
		z-index: 1;
	}
	#header_2 > #logo a{
		display: block;
		max-width: 58%;
		height: 92px;
		width: 392px;
		left: 110px;
		top: 10px;
		margin: 0;
		background: url(../images/logo_sp.gif) center no-repeat;
		background-size: contain;
		z-index: 2;

	}
	#root_list {
		display: none;
	}

	/* footer */

	#page_bottom {
		min-width: 100%;
		width: 100%;
		margin: 0;
		padding-top: 5px;
	}

	#footer {
		width: 100%;
		margin: 0;
		padding: 0;
		height: auto;
	}
	#footer ul {
		padding: 15px;
		text-align: center;
	}
	#footer li {
		display: none;
		float: none;
	}
	#footer li a {
		height: 30px;
		width: auto;
	}
	#footer #webjapan {
		display: inline-block;
		width: auto;
	}

	/* navi */

	#sp_menu_bt {
		display: block;
	}

	#navi {
		background-color: #daf0fe;
		position: absolute;
		display: none;
		width: 172px;
		box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.2);
		position: absolute;
		left: 0;
		top: 85px;
		padding: 4px 0 0 5px;
	}

	/* cotents */

	#page_body {
		background: #FFF;
		border: 5px solid #7bcdff;
		border-top: 15px solid #7bcdff;
		border-radius: 40px 40px 30px 30px;
	}
	#page_bottom {
		background: none;
		padding: 0;
		height: 1px;
	}
	#contents {
		right: auto;
		padding: 10px 0;
		border: 3px solid #daf0fe;
		border-top: 10px solid #daf0fe;
		border-bottom: 10px solid #daf0fe;
		border-radius: 25px;
	}
	#pagetitle {
		height: auto;
		margin: auto;
		padding: 10px;
		border-radius: 10px;
		border: 1px solid #BBB;
		box-shadow:0px 0px 5px 2px #BBB inset;
		background: none;
		background-color: #F7F7F7;
		width: 520px;
		max-width: 97%;
	}
	#pagetitle.title_yellow {
		border: 1px solid #FC9709;
		box-shadow:0px 0px 5px 2px #FC9709 inset;
		background-image: -moz-linear-gradient(top, #FEDD76, #FFEEA6);
		background-image: -ms-linear-gradient(top, #FEDD76, #FFEEA6);
		background-image: -o-linear-gradient(top, #FEDD76, #FFEEA6);
		background-image: -webkit-linear-gradient(top, #FEDD76, #FFEEA6);
		background-image: linear-gradient(top, #FEDD76, #FFEEA6);
	}
	#pagetitle.title_green {
		border: 1px solid #5DAF31;
		box-shadow:0px 0px 5px 2px #5DAF31 inset;
		background-image: -moz-linear-gradient(top, #92DC73, #D6F3BB);
		background-image: -ms-linear-gradient(top, #92DC73, #D6F3BB);
		background-image: -o-linear-gradient(top, #92DC73, #D6F3BB);
		background-image: -webkit-linear-gradient(top, #92DC73, #D6F3BB);
		background-image: linear-gradient(top, #92DC73, #D6F3BB);
	}
	#title_icon {
		display: none;
	}
	.title_img_green_02 {
		display: none;
	}
	#title_txt1 {
		position: static;
		margin: 10px;
	}
	#title_txt2, #title_txt2_2 {
		position: static;
		margin: 0;
		background-repeat: no-repeat;
	}
	#title_txt3, #title_txt3_2 {
		position: static;
		padding: 5px 15px 15px 15px;
		font-size: 20px;
	}

	.box_01, .box_02 {
		width: 100%;
		max-width: 508px;
		padding: 10px;
		margin: auto;
	}
	.main_content {
		box-sizing: content-box;
		width: auto;
		margin: auto;
		max-width: 470px;
	}

	#wrapper2, #wrapper_menu {
		max-width: 100%;
	}

	#guide {
		margin: 20px 0 0 0;
	}
	#guide ul {
		position: static;
	}
	#guide li {
		text-align: center;
		position: static;
	}
	#guide li a {
		left: auto;
		position: static;
		display: inline-block;
	}

	/* base image size */
	.img_left {
		width: 45%;
		max-width: 250px;
	}
	.img_left img{
		max-width: 100%;
		height: auto;
	}
	.img_right {
		width: 45%;
		max-width: 250px;
	}
	.img_right img{
		max-width: 100%;
		height: auto;
	}

	/* for nature page */
	.img_right200 {
		width: 45%;
		max-width: 200px;
	}
	.img_right200 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_left213 {
		width: 45% !important;
		max-width: 213px;
	}
	.img_left213 img{
		max-width: 100%;
		height: auto;
	}

	/* for culture page */
	.img_left200 {
		width: 45%;
		max-width: 200px;
	}
	.img_left200 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right201 {
		width: 45%!important;
		max-width: 201px;
	}
	.img_right201 img{
		max-width: 100%;
		height: auto;
	}
	
	/* for calendar page */
	.box_line1_green {
		max-width: 508px;
		padding: 10px;
		box-sizing: border-box;
		margin: auto;
	}
	#line1_green {
 		width: 100%;
 		margin-right: 0px;
 		margin-left: 0px;
 		padding-left: 0px;
 		padding-right: 0px;
	}
	
	.img_left160 {
		width: 45%;
		max-width: 160px;
	}
	.img_left160 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_left220 {
		width: 45%;
		max-width: 220px;
	}
	.img_left220 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_left300 {
		width: 45%;
		max-width: 300px;
	}
	.img_left300 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right130 {
		width: 45%;
		max-width: 130px;
	}
	.img_right130 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right180 {
		width: 45%;
		max-width: 180px;
	}
	.img_right180 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right220 {
		width: 45%;
		max-width: 220px;
	}
	.img_right220 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right300 {
		width: 45%;
		max-width: 300px;
	}
	.img_right300 img{
		max-width: 100%;
		height: auto;
	}

	/* for history page */
	.img_right208 {
		width: 45%!important;
		max-width: 208px;
	}
	.img_right208 img{
		max-width: 100%;
		height: auto;
	}
	
	.block_03 td {
		padding: 3px;
	}	
	.line_right {
		white-space: normal;
	}

	/* for schools page */
	.img_left180 {
		width: 45%;
		max-width: 180px;
	}
	.img_left180 img{
		max-width: 100%;
		height: auto;
	}
	
	/* for sport */
	.img_right204 {
		width: 45% !important;
		max-width: 204px;
	}
	.img_right204 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right214 {
		width: 45% !important;
		max-width: 214px;
	}
	.img_right214 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right215 {
		width: 45% !important;
		max-width: 215px;
	}
	.img_right215 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right216 {
		width: 45% !important;
		max-width: 216px;
	}
	.img_right216 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right217 {
		width: 45% !important;
		max-width: 217px;
	}
	.img_right217 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right218, .img_left218 {
		width: 45% !important;
		max-width: 218px;
	}
	.img_right218 img, .img_left218 img {
		max-width: 100%;
		height: auto;
	}
	
	.img_right219 {
		width: 45% !important;
		max-width: 219px;
	}
	.img_right219 img{
		max-width: 100%;
		height: auto;
	}

	/* for housing */
	.img_right209 {
		width: 45% !important;
		max-width: 209px;
	}
	.img_right209 img{
		max-width: 100%;
		height: auto;
	}

	/* for economy page*/
	.img_right223 {
		width: 45% !important;
		max-width: 223px;
	}
	.img_right223 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right228 {
		width: 45% !important;
		max-width: 228px;
	}
	.img_right228 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_left130 {
		width: 45%;
		max-width: 130px;
	}
	.img_left130 img{
		max-width: 100%;
		height: auto;
	}
	
	.img_right240 {
		width: 45% !important;
		max-width: 240px;
	}
	.img_right240 img{
		max-width: 100%;
		height: auto;
	}
	
	/* for regions page */
	.img_right150 {
		width: 45% !important;
		max-width: 150px;
	}
	.img_right150 img{
		max-width: 100%;
		height: auto;
	}
	
	.max_width341 {
		max-width: 341px !important;
		margin: 0 auto;
	}
	.max_width349 {
		max-width: 349px !important;
		margin: 0 auto;
	}
	.max_width363 {
		max-width: 363px !important;
		margin: 0 auto;
	}
	.max_width440 {
		max-width: 440px !important;
		margin: 0 auto;
	}
	.max_width494 {
		max-width: 494px !important;
		margin: 0 auto;
	}
	
	/* for imperial page */
	.max_width405 {
		max-width: 405px !important;
		margin: 0 auto;
	}

	/* for map page */
	.to_wfluid {
		width: 100%;
		height: auto;
	}
	
	/* for january-shichifukujin page */
	.max_width420 {
		max-width: 420px !important;
		margin: 0 auto;
	}
	
	
	
	
	.to_w159 {
		width: 34%;
		max-width: 159px;
	}
	.to_w225 {
		width: 48%;
		max-width: 225px;
	}
	.to_w260 {
		width: 55%;
		max-width: 260px;
	}
	.to_w300 {
		width: 64%;
		max-width: 300px;
	}
	.to_w320 {
		width: 66%;
		max-width: 320px;
	}
	.to_w470 {
		width: 100%;
		max-width: 470px;
		height: auto;
	}
}