/* 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%;
	}

	#wrapper {
		width: 768px;
	}
	#page_body, #page_bottom {
		width: 696px;
		margin-left: 36px;
	}
	#contents {
		width: 529px;
		padding: 0;
		margin: 0;
	}

	/* header */

	#header_2 {
		background-size: 742px;
		height: 151px;
		width: auto;
	}
	#root_list {
		left: 57px;
		top: 8px;
	}
	#logo a {
		left: 65px;
		top: 40px;
		background-size: 345px;
		width: 345px;
		height: 52px;
	}
	#search {
		width: 118px;
		left: 84px;
		top: 105px;
	}
	#search_bn {
		left: 207px;
		top: 103px;
		width: 65px;
		height: 21px;
	}

	/* footer */

	#footer {
		padding: 30px 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;
	}

	/* navi */

	#gnaviPlay {
		margin: 13px 0 0 0;
	}

	/* cotents */

	#pagetitle {
		background-position: -10px 0;
		background-size: 545px;
		width: 520px;
	}
	#title_txt2 {
		left: 20px;
		top: 22px;
	}
	#title_txt2_2 {
		left: 20px;
		top: 22px;
	}
	#title_txt3 {
		left: 23px;
		top: 46px;
	}
	#title_txt3_2 {
		left: 23px;
	}
	#gotoen {
		margin: 70px 15px 0 0;
	}

	.box_01 {
		padding: 0 0 10px 13px;
	}
	.box_02 {
		padding: 0 0 10px 13px;
	}

	#guide {
		width: 529px;
	}
	#guide_index a {
		left: 205px;
	}
}


/* for SP */
#sp_menu_bt {
	display: none;
	position: absolute;
	left: 0;
	top: 55px;
	width: 95px;
	height: 22px;
	text-indent: -9999px;
}
#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 {
		background: none;
		min-width: 320px;
	}
	body {
		width: 100%;
		-webkit-text-size-adjust: 100%;
	}
	#wrapper, #wrapper2, #page_body, #contents, #guide {
		min-width: 100%;
		width: 100%;
		margin: 5px 0 0 0;
		padding: 0;
	}
	#wrapper_menu {
		width: 100%;
	}

	/* header */

	#header_2 {
		width: 100%;
		height: auto;
		position: static;
		background: url(../images/header_02_sp.jpg) top right no-repeat;
		background-size: auto 75px;
	}
	#header_2 > #logo {
		display: block;
		height: 45px;
	}
	#header_2 > #logo a{
		position: static;
		display: block;
		width: 250px;
		height: 50px;
		background: url(../images/logo_sp.png) no-repeat;
		background-size: 230px;
		background-position: 8px 8px;
	}
	#header_2 > form {
		position: relative;
		height: 30px;
	}
	#header_2 > form > #search {
		left: auto;
		right: 75px;
		top: 10px;
		z-index: 999;
	}
	#header_2 > form > #search_bn {
		left: auto;
		right: 0;
		top: 6px;
	}
	#header_2 > form:after {
		content: "";
		position: absolute;
		height: 20px;
		display: block;
		background: #FFF;
		right: 71px;
		top: 6px;
		width: 131px;
		z-index: 998;
		border: 1px solid #CCC;
		border-radius: 5px;
	}
	#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: 35px;
		background-position: top center;
	}
	#footer ul {
		padding: 35px 20px 20px 20px;
		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: #FFF;
		position: absolute;
		display: none;
		width: 172px;
		box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.2);
		position: absolute;
		left: 0;
		top: 77px;
	}

	/* cotents */

	#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_img_green_02 {
		display: none;
	}

	#title_txt1 {
		position: static;
		margin: 10px;
	}
	#title_txt2, #title_txt2_2 {
		position: static;
		margin: 0;
	}
	#title_txt3, #title_txt3_2 {
		position: static;
		padding: 5px 15px 15px 15px;
		font-size: 20px;
	}

	#gotoen {
		position: absolute;
		margin: 0;
		right: 20px;
		bottom: 10px;
	}
	#gotojp {
		position: absolute;
		margin: 0;
		right: 20px;
		bottom: 10px;
	}
	.box_01, .box_02 {
		width: 100%;
		max-width: 508px;
		padding: 10px;
		box-sizing: border-box;
		margin: auto;
	}
	.main_content, #learn .main_content {
		box-sizing: content-box;
		width: auto;
		margin: auto;
		max-width: 470px;
	}

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


	.to_w80 {
		width: 17%;
	}
	.to_w159 {
		width: 34%;
	}
	.to_w180 {
		width: 37%;
	}
	.to_w225 {
		width: 47%;
	}
	.to_w260 {
		width: 55%;
	}
	.to_w280 {
		width: 60%;
	}
	.to_w300 {
		width: 64%;
	}
	.to_w320 {
		width: 66%;
	}
	.to_w370,.to_w380 {
		width: 80%;
	}
	.to_w420,.to_w470 {
		width: 100%;
	}

	/* for nature page */

	.img_right200 {
		width: 45%;
		max-width: 200px;
	}
	.img_right200 img{
		max-width: 100%;
		height: auto;
	}

	/* for kaiju page */

	.kaiju .img_left160 {
		width: 48%;
		margin: 0 4% 0 0; 
	}
	.kaiju .cap_txt {
		width: 48%;
		margin-left: 0 !important;
	}
	.kaiju .imgbox  .cap_rt_txt {
		width: 100%;
		float: left;
		margin-left: 0;
	}
	.kaiju .img_half { 
		width: 100% !important;  

	}
}