@charset "utf-8";

/* CSS Document */

/*
  font-family: "Goldman", sans-serif;
*/


/***********
mainVisual
************/

.mainVisual {
  position: relative;
  padding: 0 40px;
  text-align: center;
}

.mainVisual-container {
}
.mainVisual-img {
}
.mainVisual-img area {
  cursor: pointer;
}



.mainVisual-chart {
  padding-top: 20px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}

.mainVisual-chart-item {
  padding-right: 2em;
  padding-left: 1.8em;
  margin-bottom: 0.3em;
  font-size: 139%;
  font-weight: 600;
  position: relative;
  white-space: nowrap;
}
.mainVisual-chart-item::before {
  content: "";
  display: block;
  width: 1.3em;
  height: 1.3em;
  background: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}


.mainVisual-chart-item.-allseason {
  padding-left: 3.5em;
}
.mainVisual-chart-item.-allseason::before {
  background-color: #d9e3eb;
}
.mainVisual-chart-item.-allseason::after {
  content: "";
  display: block;
  width: 1.3em;
  height: 1.3em;
  background: #9fb8cd;
  position: absolute;
  left: 1.5em;
  top: 50%;
  transform: translateY(-50%);
}
.mainVisual-chart-item.-spring::before {
  background-color: #f6d4d8;
}
.mainVisual-chart-item.-summer::before {
  background-color: #bbc637;
}
.mainVisual-chart-item.-autumn::before {
  background-color: #ffc000;
}
.mainVisual-chart-item.-winter::before {
  background-color: #fce9af;
}

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

  .mainVisual {
    position: relative;
    padding: 0 min(2vw,20px);
    text-align: center;
  }

  .mainVisual-chart {
    padding-top: 10px;
  }

  .mainVisual-chart-item {
    min-width: initial;
    font-size: 100%;
    padding-right: 1em;
    padding-left: 1.5em;
  }

  .mainVisual-chart-item.-allseason {
    width: 100%;
  }

}

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

  .mainVisual-chart-item {
  }

}

/***********
mainPlant
************/

.mainPlant {
  padding-top: 4em;
  padding-bottom: 10em;
}
.mainPlant-container {
}

.mainPlant-list {
  display: flex;
  flex-wrap: wrap;
}
.mainPlant-list li {
  width: 33.3%;
  margin-bottom: -1px;
  margin-left: -1px;
}
.mainPlant-list a {
  display: flex;
  font-size: 154%;
  text-decoration: none;
  align-items: center;
  padding: 0.5em 1em 0.5em 1.5em;
  min-height: 4.5em;
  border: 1px solid #888;
  cursor: pointer;
  position: relative;
  transition: 0.2s;
}
body.is-pc .mainPlant-list a:hover {
  border-color: #fff;
  z-index: 2;
}
.mainPlant-list-num {
  font-family: "Goldman", sans-serif;
  font-weight: 400;
  font-size: 154%;
  display: inline-block;
  width: 1em;
  margin-right: 1em;
  text-align: center;
}
.mainPlant-list-title {
}

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

  .mainPlant {
    padding-top: 2em;
    padding-bottom: 5em;
  }
  .mainPlant-list a {
    font-size: 116%;
    padding-left: 1em;
  }
  .mainPlant-list-num {
    font-size: 139%;
    width: 1em;
    margin-right: 0.3em;
  }

}

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

  .mainPlant {
    padding-top: 2em;
    padding-bottom: 5em;
  }
  .mainPlant-container {
  }

  .mainPlant-list {
  }
  .mainPlant-list li {
    width: 50%;
  }
  .mainPlant-list a {
    font-size: 108%;
    padding: 0.5em 0.5em 0.5em 0.5em;
    min-height: 4em;
    font-feature-settings: "palt";
  }
  body.is-pc .mainPlant-list a:hover {
    border-color: #fff;
    z-index: 2;
  }
  .mainPlant-list-num {
    font-size: 131%;
  }

}


/***********
subPlant
************/

.subPlant {
}
.subPlant-container {
}
.subPlant-heading {
  padding-bottom: 2em;
}
.subPlant-heading-title {
  font-size: 231%;
}
.subPlant-heading-subTitle {
  font-family: "Goldman", sans-serif;
  font-size: 154%;
  font-weight: 400;
  opacity: 0.5;
}

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

  .subPlant-heading {
    padding-bottom: 1.2em;
  }
  .subPlant-heading-title {
    font-size: 170%;
  }
  .subPlant-heading-subTitle {
    font-size: 100%;
  }

}

/***********
plants
************/

.plants {
}
.plants-filtering {
  display: flex;
  align-items: center;
  padding-bottom: 2em;
}
.plants-filtering-heading {
}
.plants-filtering-title {
  font-family: "Goldman", sans-serif;
  font-size: 200%;
  white-space: nowrap;
  margin-bottom: 10px;
}
.plants-filtering-title i {
  margin-right: 0.3em;
}
.plants-filtering-inner {
  flex: 1;
  padding-left: 2em;
}
.plants-filtering-list {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.plants-filtering-box {
  display: flex;
  flex-wrap: wrap;
}
.plants-filtering-trigger {
  border: 1px solid #888;
  padding: 0.5em 2em;
  margin-bottom: 10px;
  min-width: 11em;
  min-height: 5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  opacity: 0.8;
}
.plants-filtering-trigger {
  margin-right: 10px;
}
body.is-pc .plants-filtering-trigger:hover {
  border-color: #fff;
  opacity: 1;
}
.plants-filtering-trigger.mixitup-control-active {
  border-color: #fff;
  opacity: 1;
}
.plants-filtering-list small {
  display: block;
  font-family: "Goldman", sans-serif;
  font-size: 131%;
  line-height: 1;
  padding-top: 0.2em;
  user-select: none;
}
.plants-filtering-list span {
  display: block;
  font-size: 93%;
  user-select: none;
}

/*
sort
*/

.plants-sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1.5em;
  white-space: nowrap;
}
.plants-sort-title {
}
.plants-sort-inner {
}
.plants-sort-inner span {
  display: inline-block;
  position: relative;
  margin-left: 0.3em;
  padding: 0.2em 0;
  cursor: pointer;
}
.plants-sort-inner span.mixitup-control-active::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #fff;
}




/*
list
*/

.plants-list {
  margin-left: -1%;
  margin-bottom: 1%;
  margin-right: -1em;
  font-size: 0;
}
.plants-item {
  width: 32.3%;
  margin-bottom: 1%;
  margin-left: 1%;
  position: relative;
  display: inline-block;
  vertical-align: top;
  position: relative;
  font-size: initial;
}
.plants-item a {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.plants-item-img {
  position: relative;
  background-size: 200% auto;
  background-position: center center;
}
.plants-item-img::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: 0.4s;
}
body.is-pc .plants-item:hover .plants-item-img::after {
  opacity: 0;
}
.plants-item-img img {
  transition: 0.4s;
  width: 100%;
  height: clamp(180px,20vw, 260px);
  object-fit: cover;
}


body.is-pc .plants-item:hover .plants-item-img img {
  opacity: 0;
}
.plants-item-block {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3% 4%;
}
.plants-item-title {
  font-size: 131%;
  font-weight: 500;
}

.plants-tags{
  font-size: 85%;
}

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

  .plants {
  }
  .plants-filtering {
    display: block;
    padding-bottom: 1em;
  }
  .plants-filtering-heading {
  }
  .plants-filtering-title {
    font-size: 124%;
    margin-bottom: 5px;
  }
  .plants-filtering-inner {
    padding-left: 0;
  }
  .plants-filtering-list {
    display: block;
  }
  .plants-filtering-box {
  }
  .plants-filtering-trigger {
    padding: 0.5em 1em;
    margin-bottom: 5px;
    min-width: 11em;
    min-height: 4em;
  }
  .plants-filtering-trigger {
    margin-right: 5px;
  }
  .plants-filtering-list small {
    font-size: 124%;
  }
  .plants-filtering-list span {
    font-size: 77%;
  }


  /*
  sort
  */

  .plants-sort {
    margin-bottom: 1em;
  }



  /*
  list
  */

  .plants-list {
    margin-left: -1%;
    margin-bottom: 1%;
    margin-right: -1em;
    font-size: 0;
  }
  .plants-item-img img {
    width: 100%;
    height: clamp(180px,34vw, 260px);
    object-fit: cover;
  }
  .plants-item {
    width: 49%;
    margin-bottom: 1%;
    margin-left: 1%;
  }
  .plants-item-title {
    font-size: 116%;
  }
  .plants-tags{
    font-size: 70%;
  }

}


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

  .plants {
  }
  .plants-filtering {
    display: block;
  }
  .plants-filtering-heading {
  }
  .plants-filtering-title {
    font-size: 124%;
    margin-bottom: 5px;
  }
  .plants-filtering-inner {
    padding-left: 0;
  }
  .plants-filtering-list {
    display: block;
  }
  .plants-filtering-box {
    justify-content: space-between;
  }
  .plants-filtering-trigger {
    width: 49%;
    padding: 0.5em 1em;
    margin-bottom: 5px;
    min-width: initial;
    min-height: 4em;
  }
  .plants-filtering-trigger {
    margin-right: 0;
  }
  .plants-filtering-list small {
    font-size: 124%;
  }
  .plants-filtering-list span {
    font-size: 77%;
  }



  /*
  list
  */

  .plants-list {
    margin-left: -1%;
    margin-bottom: 1%;
    margin-right: -1em;
    font-size: 0;
  }
  .plants-item {
    width: 49%;
    margin-bottom: 1%;
    margin-left: 1%;
  }
  .plants-item-img img  {
    width: 100%;
    height: 44vw;
    object-fit: cover;
  }
  .plants-item-title {
    font-size: 100%;
    line-height: 1.2;
  }
  .plants-tags{
    font-size: 64%;
  }

}


/***********
mainPlantDetail
************/

.mainPlantDetail {
  text-align: left;
}
.mainPlantDetail-heading {
  display: flex;
  padding-bottom: 1.5em;
}
.mainPlantDetail-heading-num {
  display: inline-block;
  font-family: "Goldman", sans-serif;
  padding-right: 0.3em;
  font-size: 300%;
  font-weight: normal;
  line-height: 1;
  padding-top: 0.05em;
}
.mainPlantDetail-heading-inner {
  flex: 1;
}
.mainPlantDetail-heading-title {
  font-weight: 500;
  font-size: 200%;
  align-items: center;
}
.mainPlantDetail-heading-area {
  font-size: 116%;
}
.mainPlantDetail-container {
  display: flex;
  flex-direction: row-reverse;
}
.mainPlantDetail-img {
  width: 45%;
}
.mainPlantDetail-img img {
}
.mainPlantDetail-img-credit {
  text-align: right;
  font-size: 100%;
  padding-top: 0.5em;
  opacity: 0.7;
}
.mainPlantDetail-inner {
  flex: 1;
  padding-right: 5%;
}
.mainPlantDetail-text {
  font-size: 124%;
  line-height: 1.8;
}
.mainPlant-map {
  max-width: 480px;
  margin: 0 auto;
  padding-top: 2em;
}
.mainPlant-map img {
}

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

  .mainPlantDetail {
    max-width: 640px;
    margin: 0 auto;
    padding: 30px 5% 30px;
  }
  .mainPlantDetail-heading {
    display: flex;
    padding-bottom: 1.5em;
  }
  .mainPlantDetail-heading-num {
    font-size: 231%;
  }
  .mainPlantDetail-heading-inner {
    flex: 1;
  }
  .mainPlantDetail-heading-title {
    font-weight: 500;
    font-size: 170%;
  }
  .mainPlantDetail-heading-area {
    font-size: 100%;
  }
  .mainPlantDetail-container {
    display: block;
  }
  .mainPlantDetail-img {
    width: auto;
  }
  .mainPlantDetail-img-credit {
    margin-bottom: -0.5em;
  }
  .mainPlantDetail-inner {
    padding-right: 0;
    padding-top: 1.5em;
  }
  .mainPlantDetail-text {
    font-size: 108%;
    line-height: 1.6;
  }
  .mainPlant-map {
    width: 84%;
    max-width: 480px;
    margin: 0 auto;
    padding-top: 1em;
  }
  .mainPlant-map img {
  }

}

/***********
plantsDetail
************/

.plantsDetail {
  text-align: left;
}
.plantsDetail-heading {
  padding-bottom: 1.5em;
}
.plantsDetail-heading-title {
  font-weight: 500;
  font-size: 254%;
  align-items: center;
}
.plantsDetail-tags {
  padding-top: 1em;
}
.plantsDetail-tags span{
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 116%;
}
.plantsDetail-container {
  display: flex;
  flex-direction: row-reverse;
}
.plantsDetail-img {
  width: 45%;
}
.plantsDetail-img-credit {
  font-size: 100%;
  padding-top: 0.5em;
  opacity: 0.7;
  text-align: right;
}
.plantsDetail-img img {
}
.plantsDetail-inner {
  flex: 1;
  padding-right: 5%;
}
.plantsDetail-text {
  font-size: 124%;
  line-height: 1.8;
}

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

  .plantsDetail {
    max-width: 640px;
    margin: 0 auto;
    padding: 30px 5% 30px;
  }
  .plantsDetail-heading {
    padding-bottom: 1.5em;
  }
  .plantsDetail-heading-title {
    font-size: 170%;
  }
  .plantsDetail-tags {
    padding-top: 1em;
  }
  .plantsDetail-tags span{
    margin-right: 3px;
    margin-bottom: 3px;
    font-size: 100%;
  }
  .plantsDetail-container {
    display: block;
  }
  .plantsDetail-img {
    width: auto;
  }
  .plantsDetail-img-credit {
    padding-bottom: -0.5em;
  }
  .plantsDetail-inner {
    padding-right: 0;
    padding-top: 1em;
  }
  .plantsDetail-text {
    font-size: 108%;
    line-height: 1.6;
  }

}


/***********
tags
************/

.tags {
  display: flex;
  font-feature-settings: "palt";
  flex-wrap: wrap;
  user-select: none;
}
.tags span {
  margin-right: 2px;
  margin-bottom: 2px;
  background-color: #000;
  padding: 0.2em 0.5em 0.2em 1.6em;
  border-radius: 3px;
  position: relative;
}
.tags span::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
  position: absolute;
  left: 0.3em;
  top: 50%;
  transform: translateY(-50%) scale(1.2);
}

.tags span.-tree{ background-color: #038421; }
.tags span.-tree::before {
  background-image: url(../../img/icon/tree_wt.png);
}
.tags span.-shrub{ background-color: #65b115; }
.tags span.-shrub::before {
  background-image: url(../../img/icon/shrub_wt.png);
}
.tags span.-bush{ background-color: #958d05; }
.tags span.-bush::before {
  background-image: url(../../img/icon/bush_wt.png);
}

.tags span.-evergreen{ background-color: #5dd100; }
.tags span.-evergreen::before {
  background-image: url(../../img/icon/evergreen_wt.png);
}
.tags span.-deciduous{ background-color: #af1b1b; }
.tags span.-deciduous::before {
  background-image: url(../../img/icon/deciduous_wt.png);
}

.tags span.-allseason{ background-color: #888; }
.tags span.-allseason::before {
  background-image: url(../../img/icon/allseason_wt.png);
}
.tags span.-allseason.-d2{ background-color: #327bbf; }
.tags span.-allseason.-d3{ background-color: #6fa2e8; }


.tags span.-spring{ background-color: #c18fb4; }
.tags span.-spring::before {
  background-image: url(../../img/icon/spring_wt.png);
}
.tags span.-summer{ background-color: #83c161; }
.tags span.-summer::before {
  background-image: url(../../img/icon/summer_wt.png);
}
.tags span.-autumn{ background-color: #e19f7e; }
.tags span.-autumn::before {
  background-image: url(../../img/icon/autumn_wt.png);
}
.tags span.-winter{ background-color: #d6d035; }
.tags span.-winter::before {
  background-image: url(../../img/icon/winter_wt.png);
}



/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/