/* QUIZ STYLES */
/* Styles to prettify the quiz page */

@media screen and (min-width: 768px) {
	.button {
		width: 200px;
		margin: 20px auto;
		padding: 10px 15px;
		text-align: center;
		color: #ffffff;
		background-color: #3d9b37;
		border: 3px solid #3d9b37;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-decoration: none;
		font-size: 20px;
		font-weight: bold;
		display: block;
	}
	.button:hover {
		color: #3d9b37;
		text-decoration: none;
		background-color: #fff;
	}

	.tryAgain {
		float: none;
		margin: 20px 0;
	}

	/* clearfix */
	.quizArea, .quizResults {
		zoom: 1;
	}
	.quizArea:before, .quizArea:after, .quizResults:before, .quizResults:after {
		content: "\0020";
		display: block;
		height: 0;
		visibility: hidden;
		font-size: 0;
	}
	.quizArea:after, .quizResults:after {
		clear: both;
	}

	.questionCount {
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 14px;
		font-style: italic;
	}
	.questionCount span {
		font-weight: bold;
	}

	ol.questions {
		margin-top: 20px;
		margin-left: 0;
	}
	ol.questions li {
		margin-left: 0;
	}

	ul.answers {
		margin-left: 20px;
		margin-bottom: 20px;
	}

	ul.responses li {
		margin: 10px 20px 20px;
	}


	.quizResults h3 {
		margin: 0;
	}
	.quizResults h3 span {
		font-weight: normal;
		font-style: italic;
	}
	.quizResultsCopy {
		clear: both;
		margin-top: 20px;
	}



	.page-title-wrapper {
		margin-bottom: 0;
	}

	#contents {
		width: 950px;
		margin: 100px auto 60px;
		padding-bottom: 30px;
		background: url(../img/bg_rain.png) repeat 0 0;
		border-radius: 20px;
	}

	#contents h2 {
		height: 60px;
		margin-top: 0;
		text-align: center;
		background-color: #51d5ff;
		border-radius: 20px 20px 0 0;
		position: relative;
	}

	#contents h2 img {
		margin-top: -20px;
	}

	#movieContent h3 {
		margin-top: 35px;
		text-align: center;
	}

	#movie {
		margin: 0 auto;
		text-align: center;
	}

	#movie>.inner {
		background-color: #b0d274;
		border: 2px dashed #fff;
		box-shadow: 0 0 0 7px #b0d274;
		display: inline-block;
		margin: 7px 0 0;
		padding: 8px;
		border-radius: 8px;
	}

	#movie iframe {
		border-radius: 6px;
		vertical-align: bottom;
	}

	.siteList {
		margin-top: 37px;
		overflow: hidden;
	}

	.siteList li {
		float: left;
	}

	.siteList li:first-child {
		margin-left: 130px;
		margin-right: 27px;
	}

	.siteList li a:hover img {
		filter       : alpha(opacity=70);
		-moz-opacity : 0.7;
		opacity      : 0.7;
	}


	#quizContent {
		width: 770px;
		margin: 80px auto;
		padding-bottom: 15px;
		background: url(../img/bg.png) repeat-x left top #fff;
		border: 3px solid #1ba4d0;
		border-radius: 12px;
	}

	#quizContent h3 {
		padding: 23px 0 0 112px;
	}

	#quizContent p {
		margin: -34px 0 0 87px;
	}
	
	#quizContent p.attent {
		margin: 0 0 0 0;
		text-align: center;
	}

	#quizContent ul {
		margin-top: 25px;
		margin-left: 65px;
		margin-bottom: 33px;
		overflow: hidden;
	}

	#quizContent li {
		margin-right: 45px;
		float: left;
	}

	#quizContent li:last-child {
		margin-right: 0;
	}

	#quizContent li a:hover img {
		filter       : alpha(opacity=70);
		-moz-opacity : 0.7;
		opacity      : 0.7;
	}

	.kidsContent h4 {
		text-align: center;
	}

	.agricultural ul {
		width: 715px;
		margin: 35px auto 40px;
		overflow: hidden;
	}
	
	.agricultural p {
		margin: 0 auto 110px;
		text-align: center;
	}

	.agricultural li:nth-child(1) { float: left;}
	.agricultural li:nth-child(2) { float: right;}
	.agricultural li:nth-child(3) { margin-top: 140px;}
	.agricultural li:nth-child(4) { float: left; margin-top: -107px;}
	.agricultural li:nth-child(5) { float: right; margin-top: -107px;}


	.facilityList {
		margin-top: 50px;
		margin-left: 75px;
	}

	.facilityList li {
		width: 255px;
		margin-right: 15px;
		margin-bottom: 20px;
		text-align: center;
		float: left;
	}

	.facilityList li:nth-child(3n) {
		margin-right: 0;
	}

	.facilityList li:nth-child(3n+1) {
		clear: both;
	}

	.facilityList li a:hover {
		text-decoration: none;
	}

	.facilityList li img {
		width: 100%;
		border-radius: 10px;
	}

	.facilityList li a:hover img {
		filter       : alpha(opacity=70);
		-moz-opacity : 0.7;
		opacity      : 0.7;
	}

	.facilityList li p {
		font-family: 'Noto Sans Japanese';
		font-weight: 600;
		font-size: 1.8rem;
		color: #005893;
	}

	.faciBox {
		padding-bottom: 30px;
		text-align: center;
		display: block;
		border-radius: 20px;
	}

	.faciBox .centerTitle {
		height: 63px;
		margin: 0;
		padding-top: 10px;
		color: #fff;
		font-family: 'Noto Sans Japanese';
		font-weight: 600;
		font-size: 29px;
		text-shadow: 0 0 10px #000;
		background: url(../img/bg_quiz_title.png) repeat-x center bottom;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.faciBox .photo {
		width: 90%;
		margin: 30px 0 20px 5%;
		text-align: center;
	}

	.faciBox .photo img {
		max-width: 100%;
	}

	.faciBox .detail {
		margin: 0 30px;
		font-size: 16px;
		font-size: 1.6rem;
	}
	.faciBox .detail.left {
		text-align: left;
	}
	
	.faciBox .photos {
		overflow: hidden;
	}
	
	.faciBox .photos li {
		width: 350px;
		float: left;
	}
	
	.faciBox .photos li:first-child {
		margin-right: 30px;
		position: relative;
		display: inline-block;
	}
	
	.faciBox .photos li:first-child::before{
		right: -51px;
		box-sizing: border-box;
		width: 15px;
		height: 15px;
		border: 15px solid transparent;
		border-left: 15px solid #7a0;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		content: "";
		vertical-align: middle;
	}
	.faciBox .photos li:first-child::after{
		right: -57px;
		width: 32px;
		height: 10px;
		border-left: 30px solid #7a0;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		content: "";
		vertical-align: middle;
	}

}


@media screen and (max-width: 767px) {
	.button {
		width: 200px;
		margin: 20px auto;
		padding: 10px 15px;
		text-align: center;
		color: #ffffff;
		background-color: #3d9b37;
		border: 3px solid #3d9b37;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-decoration: none;
		font-size: 20px;
		font-weight: bold;
		display: block;
	}
	.button:hover {
		color: #3d9b37;
		text-decoration: none;
		background-color: #fff;
	}

	.tryAgain {
		float: none;
		margin: 20px 0;
	}

	/* clearfix */
	.quizArea, .quizResults {
		zoom: 1;
	}
	.quizArea:before, .quizArea:after, .quizResults:before, .quizResults:after {
		content: "\0020";
		display: block;
		height: 0;
		visibility: hidden;
		font-size: 0;
	}
	.quizArea:after, .quizResults:after {
		clear: both;
	}

	.questionCount {
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 14px;
		font-style: italic;
	}
	.questionCount span {
		font-weight: bold;
	}

	ol.questions {
		margin-top: 20px;
		margin-left: 0;
	}
	ol.questions li {
		margin-left: 0;
	}

	ul.answers {
		margin-left: 20px;
		margin-bottom: 20px;
	}

	ul.responses li {
		margin: 10px 20px 20px;
	}


	.quizResults h3 {
		margin: 0;
	}
	.quizResults h3 span {
		font-weight: normal;
		font-style: italic;
	}
	.quizResultsCopy {
		clear: both;
		margin-top: 20px;
	}



	.page-title-wrapper {
		margin-bottom: 0;
	}

	.container .main.kidsContent {
		margin: 0;
		padding-top: 40px;
	}
	#contents {
		padding-bottom: 30px;
		background: url(../img/bg_rain.png) repeat 0 0;
		border-radius: 20px;
	}

	#contents h2 {
		height: 40px;
		margin-top: 0;
		text-align: center;
		background-color: #51d5ff;
		border-radius: 20px 20px 0 0;
		position: relative;
	}

	#contents h2 img {
		width: 85%;
		margin-top: -15px;
	}

	#movieContent h3 {
		width: 95%;
		margin: 35px auto 0;
		text-align: center;
	}

	#movie {
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}

	#movie>.inner {
		background-color: #b0d274;
		border: 2px dashed #fff;
		box-shadow: 0 0 0 7px #b0d274;
		margin: 7px 0 0;
		padding: 8px;
		border-radius: 8px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	#movie .movieBox {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#movie iframe {
		border-radius: 6px;
		vertical-align: bottom;
		position: absolute;
		top: 0;
		right: 0;
		width: 100%!important;
		height: 100%!important;
	}

	.siteList {
		margin: 25px 3%;
		overflow: hidden;
	}

	.siteList li {
		width: 47%;
		float: left;
	}

	.siteList li:last-child {
		float: right;
	}



	#quizContent {
		width: 90%;
		margin: 80px auto;
		background: url(../img/bg.png) repeat-x left -30px #fff;
		border: 3px solid #1ba4d0;
		border-radius: 12px;
	}

	#quizContent h3 {
		padding: 15px 0 0 10px;
	}

	#quizContent p {
		margin: -5px 10px 0;
	}

	#quizContent ul {
		margin: 25px 3% 30px;
		overflow: hidden;
	}

	#quizContent li {
		width: 31%;
		float: left;
	}
	
	#quizContent li:nth-child(2) {
		margin-left: 3%;
		margin-right: 3%;
	}

	#quizContent li a:hover img {
		filter       : alpha(opacity=70);
		-moz-opacity : 0.7;
		opacity      : 0.7;
	}

	.kidsContent h4 {
		width: 95%;
		margin: 0 auto;
		text-align: center;
	}

	.agricultural ul {
		width: 90%;
		margin: 20px auto 30px;
		overflow: hidden;
	}
	
	.agricultural p {
		margin: 0 auto 80px;
		text-align: center;
	}
	
	.agricultural li {
		width: 45%;
		margin-top: 3%;
		float: left;
	}
	
	.agricultural li:nth-child(even) {
		float: right;
	}


	.facilityList {
		width: 90%;
		margin: 20px auto 0;
	}

	.facilityList li {
		width: 47%;
		margin-bottom: 20px;
		text-align: center;
		float: left;
	}

	.facilityList li:nth-child(even) {
		float: right;
	}
	
	.facilityList li:nth-child(odd) {
		clear: both;
	}

	.facilityList li a:hover {
		text-decoration: none;
	}

	.facilityList li img {
		width: 100%;
		border-radius: 10px;
	}

	.facilityList li a:hover img {
		filter       : alpha(opacity=70);
		-moz-opacity : 0.7;
		opacity      : 0.7;
	}

	.facilityList li p {
		font-family: 'Noto Sans Japanese';
		font-weight: 600;
		font-size: 1.8rem;
		color: #005893;
	}

	.faciBox {
		padding-bottom: 30px;
		text-align: center;
		display: block;
		border-radius: 20px;
	}

	.faciBox .centerTitle {
		height: 63px;
		margin: 0;
		padding-top: 10px;
		color: #fff;
		font-family: 'Noto Sans Japanese';
		font-weight: 600;
		font-size: 25px;
		font-size: 2.5rem;
		text-shadow: 0 0 10px #000;
		background: url(../img/bg_quiz_title.png) repeat-x center bottom;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.faciBox .photo {
		width: 90%;
		margin: 30px 10px 20px;
		text-align: center;
	}

	.faciBox .photo img {
		max-width: 100%;
	}

	.faciBox .detail {
		margin: 0 20px;
		text-align: left;
		font-size: 16px;
		font-size: 1.6rem;
	}
}