/*===============================

  花紹介　タイトル画像

================================*/

  /*
    ページタイトル　画像の上に乗せる
  ================================*/




  h2.orchid_back_title{
  　　　　color:#fff!important;
    }



  .full-width-orchid {
      margin-top:80px;
      margin-left: calc(-50vw + 50%);
      background-image: url(../img/orchid/orchid_back.png);
      background-repeat: no-repeat;
      background-size: cover;
      padding: 70px 0;
  }




  h2.orchid_back{
    letter-spacing: 10px;
    font-size:25px;
    font-weight: 600;
    color:#fff;
    text-align: center;
    }

    .orchid_back_span{
      color:#fff;
      text-align: center;
    }



/*===============================

	  見出し

================================*/



h2.orchid_h2{
  letter-spacing: 10px;
  font-size:25px;
  font-weight: 600;
  }

h2.orchid_h2_border{
  letter-spacing: 10px;
  font-size:25px;
  font-weight: 600;
	padding-bottom: .5em;
  border-bottom: 1px solid #ccc;
  }

h2.orchid_h2_haru,
h2.orchid_h2_natsu,
h2.orchid_h2_fuyu,{
  letter-spacing: 7px;
  font-size:25px;
  font-weight: 600;
  }

h2.orchid_h2_natsu{
  margin-bottom:20px;
  }

h2.orchid_h2_kingdom{
    margin-top:0;
  }



h2.orchid_h2_haru::after {
	      content: 'Dendrobium \A Kingianum';
	      text-align: left;
	      display: block;
	      font-size: 13px;
	      color:#898989;
	      font-weight: normal;
	      letter-spacing: 5px;
				padding-top:10px;
         white-space: pre;
         line-height: 1.7;
	  }


h2.orchid_h2_natsu::after {
	      content: 'Grammatophyllum';
	      text-align: left;
	      display: block;
	      font-size: 13px;
	      color:#898989;
	      font-weight: normal;
	      letter-spacing: 5px;
	      padding-top:10px;
	  }

h2.orchid_h2_fuyu::after {
	      content: 'Cymbidium';
	      text-align: left;
	      display: block;
	      font-size: 13px;
	      color:#898989;
	      font-weight: normal;
	      letter-spacing: 5px;
	      padding-top:10px;
	  }



    h2.orchid_h2_kingdom::after {
    	      content: 'Kingdom';
    	      text-align: left;
    	      display: block;
    	      font-size: 13px;
    	      color:#898989;
    	      font-weight: normal;
    	      letter-spacing: 5px;
    	      padding-top:10px;
    	  }


/*===============================

  蘭について　テキスト

================================*/


.br_space{
  display: block;
content: "";
margin: 10px 0;
}


/*===============================

  蘭について　テキスト

================================*/

.orchid_text{
  margin-bottom:50px;
}



/*===============================

  スライダー キャプション

================================*/



.slide_caption{
  text-align: center;
}

/*===============================

  サムネイル付きスライダー

================================*/



#wrap{
  padding: 20px 0;
}
#slider,#thumbnail_slider{
  max-width: 100%;
  margin: 0 auto 10px;
}
.slide-item{
  img{
    width: 100%;
  }
}
.thumbnail-item{
  img{
    width: 100%;
    margin: 0 auto;
  }
}



#wrap ul{
     padding-left: 0px;
}



/*===============================

  花紹介

================================*/


.introduction_yoko{
 display: flex;
}

.introduction_left{
width:40%;
}


.introduction_right{
	width:60%;
	padding:0 0 0 50px;

}


.introduction_space{
  margin-bottom:50px;
}


.slide-item a:hover{
  opacity: 0.5 ;
}

#natsulink { margin-top: -50px; padding-top: 50px;}


.anchor {
    display: block;
    padding-top:-50px;
    margin-top: 50px;
}




.kingianum_click{
text-align:center;

}


.click {
  max-width:250px;
  padding:40px 0px 20px 0;
  text-align:center;
}


.kingianum_click a img{
  opacity: 1;
  transition: 0.3s;
}

.kingianum_click a:hover img{
  opacity: .5;
}


.clickicon{
  width:150px;
}

.clickscroll {
    margin-top:30px;
    margin-bottom:10px;
    animation-name: clickscrollanime;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

@keyframes clickscrollanime {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}





.scroll {
  display: inline-block;
  padding-top: 70px;
  position: relative;
  margin-bottom:20px;
}
.scroll::before {
  animation: scroll 3.5s infinite;
  border: solid #000;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}





.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}