@charset "UTF-8";

/* Common */

* { box-sizing:border-box; }
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h2,h3,h5,h6,
form,input,textarea,
p,th,td { margin:0; padding:0; box-sizing:border-box; }
html,body { background:#fff; }
img { border:0; vertical-align:top; line-height:0; }
h1,h2,h2 { font-size:100%; font-weight:normal; }
ul,dl,ol { text-indent:0; }
li { list-style:none; }
em,th { font-style:normal; font-weight:normal; }
table { border:none; border-collapse:collapse; border-spacing:0; font-size:inherit; }
th,td { text-align:left; vertical-align:top; }
input,select,textarea { font-size:100%; }
.disabled{
	filter: alpha(opacity=50);
	-moz-opacity:0.50;
	opacity:0.50;
}

body{
font-family: Avenir,'Helvetica neue',Helvetica,'游ゴシック',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
background:#c5dc94;
}

label img,
label input[type="radio"],
label input[type="checkbox"] { cursor:pointer; }

input[type="text"] { padding-left:5px; padding-right:5px; }
input[type="number"] { padding-left:5px; }

/* Header */

header{
background:#FFF;
margin: 0 0 40px;
}

header p{ text-align:center; padding:10px 0; }
header p img{ width:120px; }

#lead{
width:1000px;
height:400px;
margin: 0 auto 60px;
position:relative;
}

#lead img{
width:100%;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;

}

#lead h1{
position:absolute;
top:35%;
left:0%;
width:100%;
text-align: center;
margin: 0 0 30px;
}

#lead h1 span{
display:inline-block;
font-size:32px;
color:#FFF;
font-weight:bold;
text-shadow:2px 2px 3px #000;
border-bottom:2px solid #FFF;
padding: 0 0 10px;
}

#lead p{
position:absolute;
top:55%;
left:0%;
width:100%;
font-size:16px;
color:#FFF;
text-shadow:2px 2px 3px #000;
text-align:center;
line-height:2;
}

#introduction{
max-width:1000px;
margin:0 auto 40px;
text-align:center;
font-size:16px;
line-height:1.5;
}
#introduction br.sp{
display:none;
}
#introduction strong span{
color: #f1990d;
font-size: 20px;
}

h2{
max-width:1000px;
margin:0 auto 60px;
text-align:center;
}

h2 span{
display:inline-block;
border-bottom: 2px solid #679d39;
font-size:28px;
padding-bottom:10px;
}


section{
max-width:1000px;
margin: 0 auto 40px;
background:#FFF;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

section h2{
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
padding: 30px 0 20px;
margin: 0 20px 30px;
border-bottom: 1px solid #006038;
text-align:center;
font-weight:bold;
line-height: 1;
}

section h2 span{
display:inline-block;
width:32px;
height:32px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
background:#679d39;
color:#FFF;
text-align:center;
margin-right:10px;
}

section h2 img {
	height: 35px;
	margin-right: 10px;
}

#place ul,
#weed ul{
display:flex;
flex-direction: row;
flex-wrap:wrap;
margin: 0 30px;
padding: 0 0 10px;
}

#place ul li,
#weed ul li{
position: relative;
margin: 0 20px 30px 0;
width:calc((100% - 100px) / 6);
}

#place ul li:nth-child(6n),
#weed ul li:nth-child(6n){
margin-right:0;
}

#place ul li label:hover,
#weed ul li label:hover {
	cursor: pointer;
}

#place ul li label img,
#weed ul li label img{
width:100%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

#place ul li label h3,
#weed ul li label h3{
text-align:center;
font-size:14px;
/* margin:10px 0 0; */
font-weight:normal;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
margin: 0;
font-size: 17px;
font-weight: bold;
transform: translateY(-50%) translateX(-50%);
color: #fff;
z-index: 100;
line-height: 1.2;
}

#place ul li label h3 input,
#weed ul li label h3 input{
margin-right:6px;
}

#place ul li label p,
#weed ul li label p{
font-size:14px;
color:#444;
line-height:1.5;
}

#place ul li label em,
#weed ul li label em{
display:block;
margin: 10px 0 0;
font-size:16px;
color:#000;
text-align:right;
line-height:1.5;
}

#place ul li input[type="radio"],
#weed ul li input[type="radio"] {
	display: none;
}

#place ul li label:before,
#weed ul li label:before {
	position: absolute;
	content: "";
	display: block;
	/* width: 140px;
	height: 140px; */
	width: calc(100% - 12px);
	padding-top: calc(100% - 12px);
	border-radius: 50%;
	/* border: 4px solid #c5dc94; */
	border: 6px solid transparent;
	/* box-sizing: border-box; */
	z-index: 10;
}

#place ul li label:after,
#weed ul li label:after {
	position: absolute;
	top: 0px;
	left: 0px;
	content: "";
	display: block;
	/* width: 138px;
	height: 138px; */
	width: 100%;
	padding-top: 100%;
	border-radius: 50%;
	background: rgba(0,0,0,.3);
}
#place ul li input:checked + label:before,
#weed ul li input:checked + label:before {
	border-color: #f1990d;
	border-width: 6px;
}
#place ul li input:checked + label:after,
#weed ul li input:checked + label:after {
	background: none;
}
#place ul li input:checked + label h3,
#weed ul li input:checked + label h3 {
	text-shadow: 0 0 3px #000;
}

#place ul li:nth-of-type(1) input:checked + label h3,
#weed ul li:nth-of-type(1) input:checked + label h3 {
	color: #333;
	text-shadow: 0 0 0;
}

.column2{
max-width:1000px;
display:flex;
flex-direction: row;
flex-wrap:wrap;
margin: 0 auto;
padding: 0 0 10px;
}

.column2 > section{
margin: 0 40px 40px 0;
width:calc((100% - 40px) / 2);
}

.column2 > section:nth-child(2n){
margin: 0 0 40px;
}

#type ul,
#needs ul,
#effect ul,
#other ul{
margin: 0 30px;
padding: 0 0 30px;
}

#type ul li,
#needs ul li,
#effect ul li,
#other ul li{
margin: 0 0 10px;
font-size: 14px;
}

#type ul li label h3,
#needs ul li label h3,
#effect ul li label h3,
#other ul li label h3{
font-size:14px;
font-weight:normal;
}

#type ul li label h3 input,
#needs ul li label h3 input,
#effect ul li label h3 input,
#other ul li label h3 input{
margin-right:6px;
}

#type ul li label,
#needs ul li label,
#effect ul li label,
#other ul li label {
	position: relative;
	padding-left: 22px;
}

#type ul li label:before,
#needs ul li label:before,
#effect ul li label:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #999;
	border-radius: 50%;
}
#type ul li input[type="radio"],
#needs ul li input[type="radio"],
#effect ul li input[type="radio"],
#other ul li input[type="checkbox"] {
	display: none;
}
#type ul li input:checked + label:after,
#needs ul li input:checked + label:after,
#effect ul li input:checked + label:after {
	content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: #f1990d;
  border-radius: 50%;
}
#type ul li label span {
	display: inline-block;
	margin-left: 1.75em;
	font-size: 12px;
	color: #666;
}

#other ul li label:before {
	content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
#other ul li input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #f1990d;
  border-right: 3px solid #f1990d;
}


#result{
max-width:1000px;
display:flex;
flex-direction: row;
flex-wrap:wrap;
margin: 0 auto;
padding: 0 0 30px;
}

#result > li{
margin: 0 20px 20px 0;
width:calc((100% - 40px) / 3);
background:#FFF;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
display: flex;
flex-direction: column;
}

#result > li:nth-child(3n){
margin:0 0 20px;
}

#result > li > a{
display:block;
min-height: 0%;
padding:20px;
text-decoration:none;
}

#result > li img{ width:100%; margin-bottom:10px; }

#result > li > a h3{
	font-size:16px;
	color: #444;
	font-weight:normal;
	margin: 0 0 5px;
}

#result > li > a p{
	font-size:18px;
	color: #000;
	text-align:right;
}

#result > li .btn {
	display: flex;
	justify-content: space-between;
	justify-content: center;
	margin: auto 20px 20px;
}

#result > li .btn li {
	width: 48%;
	width: 100%;
}
#result > li .btn li + li {
	margin-left: 4%;
}

#result > li .btn a {
	display: block;
	padding: 13px 10px;
	text-align: center;
	background: #f1990d;
	border: 2px solid #f1990d;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	border-radius: 10px;
	text-decoration: none;
	transition: all .5s;
}

#result > li .btn a:hover {
	opacity: .7;
}

#result > li .btn li:first-child a {
	background: #fff;
	border: 2px solid #f1990d;
	color: #f1990d;
}
#result > li .btn li:last-child a {
	background: #f1990d;
	border: 2px solid #f1990d;
	color: #fff;
}

.btn_a a{
display:block;
background:#f1990d;
-moz-border-radius:32px;
-webkit-border-radius:32px;
border-radius:32px;
height:64px;
width:360px;
margin: 0 auto 60px;
font-size:24px;
line-height:64px;
color:#FFF;
text-decoration:none;
text-align:center;
border: 2px solid #FFF;
}

.btn_b a{
display:block;
background:#808080;
-moz-border-radius:32px;
-webkit-border-radius:32px;
border-radius:32px;
height:64px;
width:360px;
margin: 0 auto 60px;
font-size:24px;
line-height:64px;
color:#FFF;
text-decoration:none;
text-align:center;
border: 2px solid #FFF;
}

/* Footer */

footer{
padding: 20px 10px;
text-align: center;
background:#006038;
}

footer small{
	color: #FFF;
	font-style: normal;
	font-family: Arial;
	font-size: 14px;
}

@media screen and (max-width:768px) {
}

@media screen and (min-width:641px) and (max-width:768px) {
}

@media screen and (max-width:640px) {
header{ margin: 0; }
header p img{ width:80px; }
#lead{ width:100%; height:auto; margin: 0 0 30px; }
#lead img{
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
#lead h1{margin: 0; top:33%; }
#lead h1 span{ font-size:24px; border:0; padding:0;}
#lead p{
	position:static;
	font-size:12px;
	text-shadow: none;
	padding:10px;
background:#006038;

}

#introduction{ margin: 0 20px 20px; font-size:14px; }
#introduction strong span{ font-size: 18px; }
#introduction br.sp{ display: block;}
section{margin: 0 10px 10px;}
section h2{
font-size: 18px;
padding: 20px 0 10px;
margin: 0 20px 20px;
}
section h2 span{
display:inline-block;
width:28px;
height:28px;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
}

#place ul,
#weed ul{
margin: 0 20px;
}

#place ul li,
#weed ul li{
margin: 0 20px 20px 0;
width:calc((100% - 20px) / 2);
}

#place ul li:nth-child(2n),
#weed ul li:nth-child(2n){
margin-right:0;
}

#place ul li label h3,
#weed ul li label h3{
text-align:center;
font-size:18px;
/* margin: 5px 0 0; */
}

#place ul li label h3 input,
#weed ul li label h3 input{
margin-right:5px;
}

#place ul li label p,
#weed ul li label p{
font-size:12px;
}

#place ul li label:before,
#weed ul li label:before {
	/* width: 100%;
	height: 100%; */
}
#place ul li label:after,
#weed ul li label:after {
	/* width: 99%;
	height: 99%; */
}

.column2{
display:block;
margin: 0;
padding: 0 0 10px;
}

.column2 > section{
width:auto;
margin: 0 10px 10px;
}

.column2 > section:nth-child(2n){
margin: 0 10px 10px;
}

#type ul,
#needs ul,
#effect ul,
#other ul{
padding: 0 0 20px;
}

#result{
max-width:1000px;
display:block;
padding: 0 0 30px;
}

#result > li{
margin: 0 10px 10px;
width:auto;
background:#FFF;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
border: 2px solid #e4eeea;
}

#result > li:nth-child(3n){
margin:0 10px 10px;
}

#result > li > a{
display:block;
padding:20px;
text-decoration:none;
}

#result > li img{ width:100%; margin-bottom:10px; }

#result > li > a h3{
	font-size:14px;
	color: #444;
	font-weight:normal;
	margin: 0 0 5px;
}

#result > li > a p{
	font-size:16px;
	color: #000;
	text-align:right;
}

.btn_a a,.btn_b a{
width:auto;
margin: 0 10px 40px;
font-size:18px;
}

}
@media screen and (max-width:320px) {
#result > li .btn a { font-size: 14px; }
}