@charset "utf-8";
/* CSS Document */
#MvWrapper {
 width: 100%;
 background: url("../img/mv_bg.gif") repeat-x top left;
 margin-bottom: 50px;
}
#Mv {
 position: relative;
 width: 100%;
 padding: 200px 0 170px;
 background: url("../img/mv.jpg") no-repeat top center;
}
#TrySearch {
 width: 100%;
 max-width: 1000px;
	margin: 0 auto;
}
#TrySearch > p {
 font-size: 33px;
 font-weight: bold;
 text-align:center;
}
#TrySearch > p span {
 position: relative;
 padding: 10px 80px 10px 50px;
background-image: url("../img/try_bg_left.png"), url("../img/try_bg_right.png");
 background-position: left center, right center;
 background-repeat: no-repeat;
}
#TrySearch > p span:after {
 position: absolute;
 content: "";
 top: 20px;
 right: 40px;
 width: 23px;
 height: 23px;
 background: url("../img/ashi_black.png") no-repeat top right;
}
#GoToResult{
	 max-width:1000px;
	display: block;
  margin:100px auto 0;
	padding-left: 160px;
}




#GoToResult a {
 display: block;
	width: 288px;
 font-size: 26px;
 font-weight: bold;
 line-height: 1.2;
	position: relative;
 margin-bottom: 30px
}

#GoToResult a:hover {
	text-decoration: none !important
}
#GoToResult a span{
	border-bottom: double 3px #333;
}
#GoToResult a span:hover{
	border-bottom: none;
		text-decoration: none
}

#GoToResult a:hover {
 text-decoration: underline
}
@media screen and (min-width: 821px) {
#TrySearch > p {
	margin-left: 30px;
	margin-bottom: 0;
	line-height: 1;
	 text-align:left;
}
#TrySearch > p span {
 position: relative;
 padding: 76px 80px 50px 142px;
background-image: url("../img/try_bg_left_pc.png");
 background-position: left center;
 background-repeat: no-repeat;
}
#TrySearch > p span:after {
 position: absolute;
 content: "";
 top:80px;
 right: 30px;
 width: 31px;
 height: 37px;
 background: url("../img/try_bg_right_pc.png") no-repeat top right;
}
	
#TopSearchWrapper{
	max-width:1000px;
	margin: 0 auto
}
}






.select_box_wrapper {
 width: 100%;
 background: url("../img/search_bg_left.gif")　url("../img/search_bg_right.png"), calc(50% - 200px) calc(50% + 250px), top, no-repeat;
	 background-image: url("../img/search_bg_left.png"),url("../img/search_bg_right.png");
	background-position:  calc(50% - 200px) top,calc(50% + 250px) bottom;
	background-repeat: no-repeat;
	padding-top: 30px;
}


.select_box {
 width: 100%;
 max-width: 1020px;
 margin: 0 auto;
 padding: 0 10px 50px;
}
.select_box h2 {
 width: 100%;
 font-size: 35px;
 padding: 10px;
 border-bottom: 5px dotted #f2b300;
 margin-bottom: 40px;
}
.select_box ul {
 width: 100%;
 display: flex;
 flex-flow: wrap;
 justify-content: space-between;
 margin: 0 auto;
}
.select_box ul li {
 width: 50%;
 margin-bottom: 30px;
 padding: 0 20px
}
.select_box ul li img {
 margin-bottom: 15px;
 transition: all 0.2s
}
.select_box ul li img:hover {
 transform: scale(1.04, 1.04);
}
.select_box ul li a {
 display: block;
 text-align: center;
 font-size: 20px;
 font-weight: bold;
 line-height: 1.2;
}
.select_box ul li a:hover {
 text-decoration: underline
}
.select_box #Food ul {
 width: 100%;
 display: flex;
 flex-flow: wrap;
 justify-content:flex-start;
 margin: 0 auto;
	padding-left: 50px;
}

.select_box p{
	font-size:23px;
	font-weight: bold;
	text-align: center;
	padding: 70px 0 50px
}
	.select_box p a{
		border-bottom: double 3px #333
}
	.select_box p a:hover{
		border-bottom:none
}


.search_box_wrapper {
 width: 100%;
 background: url("../img/search_bg_left.gif") calc(50% - 200px) top no-repeat;
 padding-bottom: 100px;
}
.search_box_wrapper_even {
 width: 100%;
 background: url("../img/search_bg_right.gif") calc(50% + 250px) top no-repeat;
 padding-bottom: 100px;
}
.search_box {
 width: 100%;
 max-width: 1020px;
 margin: 0 auto;
 padding: 0 10px;
}
.search_box h2 {
 width: 100%;
 font-size: 35px;
 padding: 10px;
 border-bottom: 5px dotted #f2b300;
 margin-bottom: 40px;
}
.search_box ul {
 width: 100%;
 display: flex;
 flex-flow: wrap;
 justify-content: space-between;
 margin: 0 auto;
}
.search_box ul li {
 width: 33%;
 margin-bottom: 30px;
 padding: 0 10px
}
.search_box ul li img {
 margin-bottom: 15px;
 transition: all 0.2s
}
.search_box ul li img:hover {
 transform: scale(1.04, 1.04);
}
.search_box ul li a {
 display: block;
 text-align: center;
 font-size: 20px;
 font-weight: bold;
 line-height: 1.2;
}
.search_box ul li a:hover {
 text-decoration: underline
}
.search_box #Food ul {
 width: 100%;
 display: flex;
 flex-flow: wrap;
 justify-content:flex-start;
 margin: 0 auto;
	padding-left: 50px;
}
.search_box #Food ul li {
 width: calc(100% / 6);
 margin-bottom: 30px;
 padding: 0
}
.search_box #Food ul li a {
 display:inline-block;
 text-align:left;
 font-size: 17px;
	padding:10px 0 10px 37px;
	background: url("../img/food_mammal.png") left center no-repeat;
	background-size: 32px 28px
}

.search_box #Food ul li.food_scavenging a {
	background: url("../img/food_scavenging.png") left center no-repeat;
	background-size: 32px 28px
}
.search_box #Food ul li.food_birds a {
	background: url("../img/food_birds.png") left center no-repeat;
	background-size: 32px 28px
}

.search_box #Food ul li.food_reptiles a {
	background: url("../img/food_reptiles.png") left center no-repeat;
	background-size: 32px 28px
}
.search_box #Food ul li.food_amphibian a {
	background: url("../img/food_amphibian.png") left center no-repeat;
	background-size: 32px 28px
}
.search_box #Food ul li.food_insect a {
	background: url("../img/food_insect.png") left center no-repeat;
	background-size: 32px 28px
}
.search_box #Food ul li.food_mollusks a {
	background: url("../img/food_mollusks.png") left center no-repeat;
	background-size: 32px 28px
}
.search_box #Food ul li.food_fish a {
	background: url("../img/food_fish.png") left center no-repeat;
	background-size: 32px 28px
}
.search_box #Food ul li.food_crustacean a {
	background: url("../img/food_crustacean.png") left center no-repeat;
	background-size: 32px 28px
}
.search_box #Food ul li.food_fruit a {
	background: url("../img/food_fruit.png") left center no-repeat;
	background-size: 32px 28px
}
.search_box #Food ul li.food_plant a {
	background: url("../img/food_plant.png") left center no-repeat;
	background-size: 32px 28px
}
.search_box p{
	font-size:23px;
	font-weight: bold;
	text-align: center;
	padding: 70px 0 50px
}
	.search_box p a{
		border-bottom: double 3px #333
}
	.search_box p a:hover{
		border-bottom:none
}
#Wrapper #demo-header-wrap::after {
 background: #fff !important;
}
#AboutWrapper {
 background-color: #f2c23a;
 background-image: url("../../img/footer_bg.png");
 background-position: calc(50% - 330px) 40px;
 background-repeat: no-repeat;
}
#About {
 width: 100%;
 max-width: 1020px;
 margin: 0 auto;
 padding: 50px 10px 0;
}
#About h2 {
 font-size: 34px;
 font-weight: bold;
 text-align: center;
 padding-top: 30px;
 margin-bottom: 60px;
}
#About h2 span {
 position: relative;
 padding: 10px 30px;
 background-image: url("../img/ashi_about_left.gif"), url("../img/ashi_about_right.gif");
 background-position: left center, right center;
 background-repeat: no-repeat;
}
#About p {
 width: 780px;
 margin: 0 auto 30px;
 font-weight: bold;
 line-height: 2.0;
 font-size: 15px;
}
#Top footer {
 width: 100%;
 background: url("../../img/senmu.png") bottom 20px right no-repeat;
 padding: 200px 10px 100px;
}

#Top footer .sokka{
width:550px;
background: #fff;
text-align: center;
border-radius: 20px;
padding:5px 10px;
margin-bottom: 20px
}
#Top footer .sokka p{
margin-bottom: 0;
width: auto;
}
#Top footer .sokka a{
color: #009be6;
text-decoration: underline
}
#Top footer .sokka a:hover{
text-decoration: none
}
#Top footer #FooterName {
 width: 100%;
 max-width: 558px;
}
#Top footer #FooterName img {
 display: block
}
#Top small {
 text-align: right;
 display: block
}
@-webkit-keyframes hintbtn {
 0% {
  transform: translateY(-10px);
 }
 100% {
  transform: translateY(0px);
 }
}
@keyframes hintbtn {
 0% {
  transform: translateY(-10px);
 }
 100% {
  transform: translateY(0px);
 }
}

@media screen and (max-width: 970px) {
#Top footer .sokka{
width:50%;
text-align: left;
}
}



@media screen and (max-width: 820px) {
 #MvWrapper {
  background: none;
  margin-bottom:0;
 }
 #Mv {
  padding-top: 45%;
  padding-bottom:42%;
  background: url("../img/mv_mb.jpg") no-repeat top center;
  background-size: 100% auto
 }
 #TrySearch {
  margin-bottom: 50px;
 }
	 #HintWrapper {
  position: absolute;
  margin-top: 0;
  top: 50%;
  left: 50%;
  width: 90%;
  margin-left: -45%
 }
.hint_accordion{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 15px 5px;
  background: rgba(43, 24, 6, 0.97);
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: hintbtn 1s ease-in-out infinite alternate 1.1s;
 }
 .hint_accordion span {
  position: relative;
  border-bottom: none;
  padding-right: 0;
  background: none;
  line-height: 1.3
 }
 .hint_accordion span:after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  background: url("../img/hint_arrow.png") center no-repeat;
 }
 .search_box_wrapper {
  background: url("../img/search_bg_left.gif") left top no-repeat;
  background-size: auto 100%;
  padding-bottom: 6%;
 }
 .search_box_wrapper_even {
  background: url("../img/search_bg_right.gif") right top no-repeat;
  padding-bottom: 6%;
  background-size: auto 100%;
 }
	 .search_box_wrapper_even.food_wrapper{
  background:none;
 }
 .search_box h2 {
  width: 100%;
  font-size: 18px;
  padding: 5px 10px;
  border-bottom: 4px dotted #f2b300;
  margin-bottom: 30px;
 }
 .search_box ul li img {
  margin-bottom: 10px;
 }
 .search_box ul li a {
  font-size: 16px;
 }
		.search_box #Food ul {
			padding-left: 0

}
	.search_box #Food ul li {
 width: calc(100% / 4);
 margin-bottom: 30px;
		text-align: center;
		 padding: 0 5px
}
	.search_box #Food p{
	font-size:23px;
	text-align: left;
}
 .select_box_wrapper {
  background: url("../img/search_bg_left.png") left top no-repeat;
  background-size: auto 100%;
  padding-bottom: 6%;
 }	
 .select_box{
padding: 0 10px;
 }
 .select_box h2 {
  width: 100%;
  font-size: 18px;
  padding: 5px 10px;
  border-bottom: 4px dotted #f2b300;
  margin-bottom: 30px;
 }
 .select_box ul li img {
  margin-bottom: 10px;
 }
 .select_box ul li a {
  font-size: 16px;
 }
 #AboutWrapper {
  background-image: url("../../img/footer_bg_mb.png");
  background-position: center bottom calc(50% + 470px);
  background-size: 300px auto;
 }
 #About {
  padding: 50px 20px 0;
 }
 #About h2 {
  font-size: 20px;
  margin-bottom: 40px;
 }
 #About h2 span {
  padding: 10px 20px;
  background-size: 16px 16px
 }
 #About p {
  width: 100%;
  margin: 0 auto 20px;
  font-size: 14px;
 }
 #Top footer {
  width: 100%;
  background: url("../../img/senmu.png") bottom 70% center no-repeat;
  background-size: 50%;
  padding: 80% 10px 10px;
 }
 #Top footer #FooterName {
  margin: 0 auto
 }
 #Top small {
  text-align: right;
  display: block
 }
	
#GoToResult{
  margin: 30px auto;
	padding: 0;
	text-align: center
}
#GoToResult a {
	text-align: center;
	margin:0 auto 15px;
 font-size: 22px;
}
#Top footer .sokka{
width:100%;
text-align: left;
border-radius: 5px;
}
}
@media screen and (max-width: 560px) {
 #Mv {
  padding-bottom:20%;
 }
 #TrySearch {
  max-width: 80vw;
  margin: 0 auto;
 }
 #TrySearch > p {
  font-size: 5vw;
  padding-top: 0px;
  margin-bottom: 0;
 }
 #TrySearch > p span {
  padding: 0px 30px;
  background-image: url("../img/try_bg_left.png"), url("../img/try_bg_right.png");
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: auto 100%
 }
 #TrySearch > p span:after {
  display: none
 }
 #HintWrapper {
  top: 66%;
 }
 #Hint {
  margin: 0 auto;
 }
.hint_accordion{
  width: 75px;
  height: 75px;
  padding: 10px 3px;
  font-size: 11px;
 }
 #Hint .panel {
  top: 75px;
 }
 #Hint .panel_close {
  font-size: 14px;
 }
 #Hint .panel_close#CloseBottom {
  margin: 20px auto 0;
 }
 #Hint .panel_close:before {
  top: -4px;
  left: 2px
 }
.search_box #Food ul li {
 width:33%;
}
	.search_box #Food ul li a{
  font-size: 15px;
}
	.search_box #Food p{
	font-size:17px;
	padding: 50px 0
}
	.select_box ul li a{
  font-size: 15px;
}
	.select_box p{
	font-size:17px;
	padding:50px 0 0
}
	.select_box ul li {
 padding: 0 5px
}
 #AboutWrapper {
  background-position: center top -300px;
  background-size: 50% auto;
 }
	
#GoToResult{
	max-width: 80%;
  margin: 30px auto 0;
}
#GoToResult a{
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
}
@media screen and (max-width: 460px) {
 .panel_inner {
  padding: 20px;
 }
 .panel p {
  font-size: 14px;
 }
 .search_box ul {
  justify-content: space-around;
 }
 .search_box ul li {
  width: 50%;
  padding: 0 5px;
 }
 .search_box ul li img {
  margin-bottom: 0px;
 }
 #Top small {
  font-size: 12px;
 }
	.search_box #Food ul li {
 width:50%;
		margin-bottom: 10px;
		text-align: left;
}
	.search_box #Food ul li a{
  font-size: 14px;
		padding:5px 0px 5px 26px; 
			background-size: 22px auto;
}
	
	.search_box #Food ul li.food_scavenging a,
	.search_box #Food ul li.food_birds a,
	.search_box #Food ul li.food_reptiles a,
	.search_box #Food ul li.food_amphibian a,
	.search_box #Food ul li.food_insect a,
	.search_box #Food ul li.food_mollusks a,
	.search_box #Food ul li.food_fish a,
	.search_box #Food ul li.food_crustacean a,
	.search_box #Food ul li.food_fruit a,
	.search_box #Food ul li.food_plant a{
			background-size: 22px auto;
}
	 .select_box ul li img {
    margin-bottom: 0px;
  }
 #AboutWrapper {
  background-position: center top;
  background-size: 50% auto;
 }
	
#GoToResult{
	max-width: 80%;
  margin: 30px auto 0;
}
#GoToResult a {
 font-size:4vw;

}

#Top footer .sokka{
text-align: left;
}

#Top footer .sokka p{
line-height: 1.4
}
}