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

  全体

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



body{
  margin: 0;
  padding: 0;
  font-family: "游明朝体","Yu Mincho", "Noto Serif JP", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 15px;
  letter-spacing:.1em;
  line-height: 2em;
}



a{
 text-decoration: none;
}


.android .p{
  font-family: ‘Noto Serif JP’, serif!important;
}

.Android .p{
font-family: ‘Noto Serif JP’, serif!important;
}


.android .body{
  font-family: ‘Noto Serif JP’, serif!important;
}

.Android .body{
font-family: ‘Noto Serif JP’, serif!important;
}

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

  main_visual

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



.zoomslider {
   height: 920px;
   width: 100%;

   background-position:center center;
   background-size: cover;
   display: flex;
   align-items: center;
   justify-content: center;
 }



.inner-content img{
width: 100%;
}


@-moz-document url-prefix() {
  .inner-content img{
  width:300px;
  }
}


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

  scroll

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

.top_scroll{
  position: relative;

}

.top_scroll a {
  padding-top: 70px;
  display: block;
  text-align:center;
  color:#fff;
  letter-spacing: 3px;
  font-size:12px;

}
.top_scroll a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}


@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}





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

  main_menu

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


/* 固定 */
.fixed {
  position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

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

section > h2[id] {
  display: block;
  height: 200px;
  margin-top: -6rem;
  content: "";
}


#dropdown {
  width: 100%;
   z-index:99999;
	 text-align: center;
}
#dropdown * {
    transition: .15s linear;
    -webkit-transition: .15s linear;
    -moz-transition: .15s linear;
    -o-transition: .15s linear;
    -ms-transition: .15s linear;
}

.dropdown_container{
	width:100%;
	display: inline-block;
 text-align: center;
}

#dropdown ul  {
	margin: 0 0 0 0em;
	padding:0px 0;
	width: 100%;
	letter-spacing: 0.1em;
	z-index:99999;
}

#dropdown ul li {
    position: relative;
    width: 24%;
    float: left;
		list-style:none;
		padding : 0;
}
#dropdown ul li a {
    display: block;
    color: #000;
    text-align: center;
    text-decoration: none;
    padding: 10px 0;
		z-index:99999;

}
#dropdown ul li:hover a {
    color:#c9c9c9;
}
#dropdown ul li ul {
    position: absolute;
    top: 100%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    -ms-filter: "alpha( opacity=0 )";
    filter: alpha( opacity=0 );
}
#dropdown ul li:hover ul {
    visibility: visible;
    opacity: 100;
    -ms-filter: "alpha( opacity=100 )";
    filter: alpha( opacity=100 );
}
#dropdown ul li ul li {
    float: none;
    width: 100%;
}
#dropdown ul li ul li a {
    display: block;
    margin-top: 0px;
}
#dropdown ul li:hover ul li a {
    background-color: #000;
		color:#fff;

}
#dropdown ul li:hover ul li a:hover {
    background-color: #fff;
		color:#000;

}


.menuborder li+ li {
  border-left: 1px solid #000;
}

.menubordernot{
  border:initial!important;
}





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

  header　

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


header{
  width:1200px;
  margin-right: auto;
  margin-left : auto;
  text-align: center;
}

.header_yoko{
display: flex;
margin-top:20px;
justify-content:space-between;
}

.header_logoimg{
width:80%;
float:left;
}

.header_menu{
width:70%;
}


.header_menu_list li{
  display: inline-block;
  border-left: 1px solid #000;
  padding-left:20px;
  padding-right:10px;

  }

  @-moz-document url-prefix() {
    .header_logoimg{
    width:220px;
    }
  }



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

    header　固定

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


  .is-fixed {
    position:  fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background-color: rgba(255,255,255,0.9);
    -webkit-transition: all .4s ease 0s,background .6s ease .2s;
    transition: all .4s ease 0s,background .6s ease .2s;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;

  }

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

    header　固定

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


  .header_container{
  width: 100%;
  max-width:1200px;
  margin-right: auto;
  margin-left: auto;

  }



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

  フェードイン

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

  .fadeInDown {
   -webkit-animation-fill-mode:both;
   -ms-animation-fill-mode:both;
   animation-fill-mode:both;
   -webkit-animation-duration:1s;
   -ms-animation-duration:1s;
   animation-duration:1s;
   -webkit-animation-name: fadeInDown;
   animation-name: fadeInDown;
   visibility: visible !important;
  }
  @-webkit-keyframes fadeInDown {
   0% { opacity: 0; -webkit-transform: translateY(60px); }
   100% { opacity: 1; -webkit-transform: translateY(0); }
  }
  @keyframes fadeInDown {
   0% { opacity: 0; -webkit-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px); }
   100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
  }




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

  container

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

.container{
width: 100%;
max-width:1200px;
margin-right: auto;
margin-left: auto;
padding-top:35px;

}


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

  main

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

.main{
 margin-top:150px;
 margin-bottom:70px;
}

.greeting_yoko h2{
  margin-top:0;
  padding-top:0;
}

.greeting_yoko{
  display: flex;
  margin-bottom:50px;
}

.greeting_left{
  width:60%;
  margin-right:30px;
}

.greeting_left p{
  font-size:15px;
  line-height:2em;
}


.greeting_right{
   padding-left:20px;
}

.greeting_right img {
  width: 100%;
}




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

  画像切り替え

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



.banner-sp img {
    display: none!important;
}

@media screen and (max-width:768px) {
    .img-pc {
        display: none!important;
    }

    .banner-sp img {
        display: block!important;
    }
}

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

  bannerリンク

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


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

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


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

  onlineshop

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


.onlineshop_link:hover{
  opacity:0.5;
}

.onlineshop_back{
  background-color:#FFE3E3;
  padding:18px;
  margin-bottom:100px;
}



.onlineshop_items{
  display: flex;
    margin:0 auto 0 auto ;

}
.onlineshopimg{
    width:100%;
    padding-bottom:0!important;
    margin-bottom: 0!important;

}

.onlineshopimg img{
  width:100%;
  margin:0!important;
  padding:0!important;
  vertical-align:top;
}


.onlineshopimg_text{
  width:100%;
  background-color:#fff;
  display: grid;
place-items: center;
flex-basis: 40%;

  }



  .onlineshopimg_01{
      width:100%;
      padding-bottom:0!important;
      margin-bottom: 0!important;
background-image: url("../img/home/onlineshop_img01.png");
background-size:cover;
flex-basis: 30%;
  }


  .onlineshopimg_02{
      width:100%;
      padding-bottom:0!important;
      margin-bottom: 0!important;
      background-image: url("../img/home/onlineshop_img02.png");
      background-size:cover;
      flex-basis: 30%;
  }


  .onlineshopimg_01 img,.onlineshopimg_02 img,.onlineshopimg_text img{
      vertical-align:top;
  }



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

  .img-animation:before {
    animation: img-animation 3s 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%);
    }
  }



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

  hr dot

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

.dot {
  border-top: 1px dotted #bbb;
  border-bottom: 1px dotted #fff;
}



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

文字の中央寄せ

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

.textcenter{
  margin:10px 0px 45px 0px;
  text-align: center;
}

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

  pickupとfb

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


.pickup_fb{
  margin-top:80px;
  margin-bottom:150px;
}

.pickup_fb_yoko{
  margin-top:50px;
display: flex;
}

.pickup_left{
  width:60%;
  border: 1px solid #333;
  padding: 50px;
  margin-right:40px;
  position: relative;
}


.pickup_left::before{
  background-color: #fff;
  font-size:22px;
  color: #333;
  content: "Pick up";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -20px;
  }


.pickup_left img {
    width: 100%;
  }



    /*
    	pickup 花背景画像一覧
    ================================*/



  .pickup_haru{
      padding-top:100px;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXQdISfAAAAAElFTkSuQmCC) ,url("../img/home/pickup_haru.png");
      background-size: auto;
      position: relative;
      margin-bottom:20px;
  }


  h3.pickup_h_haru,
  h3.pickup_h_natsu,
  h3.pickup_h_fuyu
  {
      color:#fff;
      padding-left:25px;
      vertical-align : bottom;
      position: absolute;
      bottom: 0;
  }


  h3.pickup_h_haru::after {
      content: 'Dendrobium & Kingianum';
      text-align: left;
      display: block;
      font-size: 15px;
      font-weight: normal;
  }


  .pickup_natsu{
    padding-top:100px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXQdISfAAAAAElFTkSuQmCC) ,url("../img/home/pickup_natsu.png");
    background-size: auto;
    position: relative;
    margin-bottom:20px;
  }

  h3.pickup_h_natsu::after {
      content: 'Grammatophyllum';
      text-align: left;
      display: block;
      font-size: 15px;
      font-weight: normal;
  }





  .pickup_fuyu{
    padding-top:100px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXQdISfAAAAAElFTkSuQmCC) ,url("../img/home/pickup_fuyu.png");
    background-size: auto;
    position: relative;
  }

  h3.pickup_h_fuyu::after {
      content: 'Cymbidium';
      text-align: left;
      display: block;
      font-size: 15px;
      font-weight: normal;
  }






  .backimg_zoom {
    position: relative;
    overflow: hidden;
    width: 100%;
    height:110px;
    margin-bottom:20px;
  }
  .backimg_zoom > img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    object-fit: cover;
    z-index: 1;
    transition: all .4s;
  }
  .backimg_zoom > img:hover {
    transform: scale(1.5, 1.5);
    transition: all .4s;
  }
  .backimg_zoom > span {
    position: absolute;
    top: 85%;
    transform: translateY(-50%);
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    color: #FFF;
    z-index: 3;
    pointer-events: none;
  }
  .backimg_zoom > .darken {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXQdISfAAAAAElFTkSuQmCC);
    z-index: 2;
    pointer-events: none;
  }






  /*
  	facebook
  ================================*/


.fb_right{
    width:30%;
    border: 1px solid #333;
    padding: 50px 30px;
    position: relative;
  }


.fb_right::before{
    background-color: #fff;
    font-size:22px;
    color: #333;
    content: "Facebook";
    font-weight: bold;
    left: 30px;
    padding: 3px 10px;
    position: absolute;
    top: -20px;
    }



.facebook-wrapper {
    max-width: 500px;
    height:100%;
    margin: 0 auto;
    }
.facebook-wrapper > .fb-page {
    width: 100%;
    height:100%;
    }
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
    height:100%!important;
    }




    .fb_iframe_widget,
    .fb_iframe_widget span,
    .fb_iframe_widget iframe[style]{
        width: 100% !important;
        height:400px!important;
    }



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

  アニメーションボタン

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


.btn {
  width: 200px;
  height: 50px;
  border: 1px solid;
  margin: 20px auto 0px auto;
}

.btn a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 50px;
  color: #000;
  text-align: center;
  font-size: 0.8em;
  font-weight: 550;
  background-color: #fff;
  text-decoration: none;
}

.btn {
  overflow: hidden;
}
.btn a {
  position: relative;
  z-index: 2;
}
.btn a:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 120%;
  height: 100%;
  z-index: -1;
  background-color: #000;
  transition: all 300ms linear;
  transform: skewX(-30deg) scale(0, 1);
}
.btn a:hover {
  color: #fff;
}
.btn a:hover:before {
  left: -10%;
  transform: skewX(-30deg) scale(1, 1);
}








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

  アニメーションボタン auto

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


.btn-auto {
  width: 300px;
  height: 50px;
  border: 1px solid;
  margin: 20px auto 0px auto;
}

.btn-auto a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 50px;
  color: #000;
  text-align: center;
  font-size: 0.8em;
  font-weight: 550;
  background-color: #fff;
  text-decoration: none;
}

.btn-auto {
  overflow: hidden;
}
.btn-auto a {
  position: relative;
  z-index: 2;
}
.btn-auto a:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 120%;
  height: 100%;
  z-index: -1;
  background-color: #000;
  transition: all 300ms linear;
  transform: skewX(-30deg) scale(0, 1);
}
.btn-auto a:hover {
  color: #fff;
}
.btn-auto a:hover:before {
  left: -10%;
  transform: skewX(-30deg) scale(1, 1);
}




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

  トップへ戻るボタン

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



#pagetop_icon {
  background-color:#fff;
    position: fixed;
    bottom: 180px;
    right: 30px;
}



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

  footer

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

.footer{
border-top: solid 1px gray;
}

.footer_centre{
  width: 100%;
  max-width:1200px;
  margin-right: auto;
  margin-left: auto;
  margin-top:40px;
}

.footer_yoko{
display: flex;
justify-content:space-between;
}


.footer_p{
  margin:15px 0;
  line-height:25px;
}

.footer_logo{
  width:80%;
}


.footer_right{
  padding-top:22px;
  bottom:0;
}

.footer_menu li{
     display: inline-block;
     border-left: 1px solid #000;
     padding-left:10px;
}


.footer_menu li:first-child{
  border-left: none;
  }



.footer_menu a {
  color:#000;
}


.footer_menu a:hover {
  color:#c9c9c9;
}

.copy{
  padding-top:8px;
  text-align:right;
    }