@charset "utf-8";
/* CSS Document */

/* header hight */

body#index header {
  padding: 8em 0 10em;
}
body#management header,
body#plase header,
body#water header,
body#fertilizer header,
body#pests header,
body#season header,
body#spring header,
body#summer header,
body#autumn header,
body#winter header {
  padding: 7em 0 12em;
}



/* index */

body#index .left_pict {
  margin: 1em 0 ;
}
body#index .left_pict .left {
  width: calc(40% - 1em);
}
body#index .left_pict .left img {
  width: 100%;
  margin: 0.5em 0 ;
}
body#index .left_pict .right {
  width: calc(60% - 1em);
}


/* type */

.group_box {
  border: 2px solid #D0E0B0;
  padding: 2em;
}

#contents .group_box h3{
  font-size: 1.2em;
  color: #496400;
  letter-spacing: 0.05em;
  margin: 0 0 1.5em;
  text-align: left !important;
}
#contents .group_box ul {
  text-align: left;
  margin-left: 1em;
  border-top: 1px solid #E7E7E7;
}
#contents .group_box ul li {
  font-size: 1em;
  border-bottom: 1px solid #E7E7E7;
}
#contents .group_box ul li a {
  color: #007F4D;
  padding: 0.8em 1em 0.9em;
  display: block;
}
#contents .group_box ul li a:hover {
  color: #fff;
  background-color: #90B448;
  text-decoration: none;
}

#contents #base_data .photo {
	padding: 16px;
	background-color: #FFFFFF;
	box-shadow: 0 3px 18px -4px rgba(0, 0, 0, 0.4);
  transform: rotate(-2deg);
  width: 500px;
  margin: 3em 0 2em;
}

#contents #base_data .images {
  width: 500px;
  margin: 2em 0;
}

#contents #base_data dl{
  margin: 2em auto;
  display: flex;
  flex-wrap: wrap;
}
#contents #base_data dl dt {
  width:40%;
}

#contents #base_data dl dt h3 {
  font-size: 0.8em;
  letter-spacing: 0.05em;
  background:#176201;
  padding: 0.8em 0;
  color: white;
  border-radius: 2em;
  margin: 0.5em 0;
  border-left: none;
  text-align: center;
}
#contents #base_data dl dd {
  width: calc(60% - 1em);
  padding: 0.6em 0;
  margin: 0.5em 0 0 1em;
  text-align: left;
}

img.map {
  width: 100%;
  max-width: 500px;
  margin: 2em 0 4em;
}

/* management */
body#management .left_pict {
  margin: 1em 0 ;
}
body#management .left_pict .left {
  width: calc(30% - 1em);
}
body#management .left_pict .left img {
  width: 100%;
  margin: 0.5em 0 ;
}
body#management .left_pict .right {
  width: calc(70% - 1em);
}

/* season */

body#spring ul#sub_navi li,
body#summer ul#sub_navi li,
body#autumn ul#sub_navi li,
body#winter ul#sub_navi li {
  width: calc( 100% / 4 - 1px );
}
body#spring ul#sub_navi li:first-child,
body#summer ul#sub_navi li:first-child,
body#autumn ul#sub_navi li:first-child,
body#winter ul#sub_navi li:first-child {
  width: calc( 100% / 4 );
}


/* index */

body#index .left_pict {
  margin: 1em 0 ;
}
body#index .left_pict .left {
  width: calc(40% - 1em);
}
body#index .left_pict .left img {
  width: 100%;
  margin: 0.5em 0 ;
}
body#index .left_pict .right {
  width: calc(60% - 1em);
}



/* -----------------------------

TUB　タブレット 画面サイズが820px以下、721以上　

----------------------------- */

@media screen and (min-width:721px) and ( max-width:800px) {

}

/* -----------------------------

SP　スマホ 画面サイズが720px以下　

----------------------------- */

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

/* header hight */
  
header {
  padding: 4em 0 12em;
}
  
body#index header {
  padding: 4em 0 5em;
}
body#management header,
body#plase header,
body#water header,
body#fertilizer header,
body#pests header {
  padding: 4em 0 8em;
}
body#season header,
body#spring header,
body#summer header,
body#autumn header,
body#winter header {
  padding: 4em 0 10em;
}
body#type header {
  padding: 4em 0 15em;
}
/*body#superbum header,
body#bifurcatum header,
body#hillii header,
body#veitchii header,
body#andinum header {
  padding: 4em 0 11em;
}
body#willinckii header,
body#grande header,
body#coronarium header,
body#holttumii header,
body#ridleyi header,
body#wallichii header,
body#wandae header,
body#alcicorne header,
body#angolense header,
body#ellisii header,
body#quadridichotomum header,
body#stemaria header,
body#madagascariense header {
  padding: 4em 0 14em;
}*/

  
  
#contents #base_data .photo {
  width: 70%;
  max-width: 500px;
}

#contents #base_data .images {
  width: 70%;
  max-width: 500px;
}
	
  
}