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


/* slide */
#idx_slide{width: 100%; height: 510px; overflow: hidden; position: relative;}
#idx_slide > div{position: absolute; top: 0; left: 0; width: 100%; height: 510px; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 10;   opacity: 0; animation-name: fade; animation-duration: 24s; animation-iteration-count: infinite;}
@keyframes fade{
  0%{opacity: 0;}
  20%{opacity: 1;}
  80%{opacity: 0;}
  100%{opacity: 0; z-index: 0;}
}
.idx_slide01{background-image: url("../images/idx_slide01.jpg");}
.idx_slide02{background-image: url("../images/idx_slide02.jpg"); animation-delay: 4s;}
.idx_slide03{background-image: url("../images/idx_slide03.jpg"); animation-delay: 8s;}
.idx_slide04{background-image: url("../images/idx_slide04.jpg"); animation-delay: 12s;}
.idx_slide05{background-image: url("../images/idx_slide05.jpg"); animation-delay: 16s;}
.idx_slide06{background-image: url("../images/idx_slide06.jpg"); animation-delay: 20s;}



/* infomation */
#idx_info{width: 90%; margin: 0 auto;}
.idx_info{border-bottom: 1px solid #ccc; height: 200px;}
.idx_info p{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-size: 15px; color: #666;}

@media screen and (min-width: 1001px) {
  #idx_info{padding: 75px 0 90px 0;}
  #idx_info h2{font-size: 33px;}
  .idx_info{padding: 15px 0 40px 0; margin-left: 100px;}
  .idx_info p{padding-top: 25px;}
}

@media screen and (max-width: 1000px) {
  #idx_info{padding: 50px 0 60px 0;}
  #idx_info h2{font-size: 30px;}
  .idx_info{padding: 10px 0 30px 0;}
  .idx_info p{padding-top: 20px;}
}



/* ログイン */
#idx_login{width: 100%; background-color: #ccc;}
.idx_login > div{margin: 0 auto; background-color: #fff; border-radius: 10px;}
.idx_login h2{color: #060; text-align: center;}
.login_txt{color: #060; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; text-align: center;}
.login_table > table{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}

@media screen and (min-width: 1001px) {
  .login_w70{display: none;}
  #idx_login{padding: 80px 0;}
  .idx_login{max-width: 1200px; min-width: 1000px; margin: 0 auto;}
  .idx_login > div{width: 94%; padding: 65px 0 90px 0;}
  .idx_login h2{font-size: 44px;}
  .login_txt{font-size: 15px; margin: 20px 0 50px 0;}
  .login_wrap{width: 750px; margin: 0 auto;}
  .login_table{float: left; padding-top: 15px;}
  .login01{font-size: 24px; text-align: right; padding-right: 20px;}
  .login02 input{font-size: 18px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 400px;}
  .login03{float: right;}
  div{
    &.login03 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 24px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";  font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}

@media screen and (min-width: 701px) and ( max-width: 1000px) {
  .login_w100{display: none;}
  #idx_login{padding: 60px 0;}
  .idx_login > div{width: 90%; padding: 50px 0 60px 0;}
  .idx_login h2{font-size: 36px; line-height: 130%;}
  .login_txt{font-size: 14px; margin: 20px 0 40px 0;}
  .login_wrap{width: 90%; margin: 0 auto;}
  .login_table > table{width: 400px; margin: 0 auto;}
  .login01{font-size: 20px;}
  .login02 input{font-size: 16px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 100%;}
  .login03_w{width: 154px; margin: 40px auto 0 auto;}
  .login03 input{background-color: #fff; border: 1px solid #ccc; border-radius: 77px; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; width: 154px; height: 154px; cursor: pointer; color: #000;}
  div{
    &.login03 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";  font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}

@media screen and (max-width: 700px) {
  .login_w100{display: none;}
  #idx_login{padding: 60px 0;}
  .idx_login > div{width: 90%; padding: 50px 0 60px 0;}
  .idx_login h2{font-size: 36px; line-height: 130%;}
  .login_txt{font-size: 14px; margin: 20px 0 40px 0;}
  .login_wrap{width: 90%; margin: 0 auto;}
  .login_table > table{width: 90%; margin: 0 auto;}
  .login01{font-size: 20px;}
  .login02 input{font-size: 16px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 100%;}
  .login03_w{width: 154px; margin: 40px auto 0 auto;}
  .login03 input{background-color: #fff; border: 1px solid #ccc; border-radius: 77px; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: 100; width: 154px; height: 154px; cursor: pointer; color: #000;}
  div{
    &.login03 {
      display: inline-block; width: 154px; height: 154px; position: relative; background: #fff; border: 1px solid #ccc; border-radius: 50%; overflow: hidden;
      &::before{
        content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: #000; z-index: 0; transition: all .6s ease; border-radius: 50%; opacity: 0;
      }
      >input{
        display: inline-block; position: absolute; width: 100%; height: 100%; background: none; border: none;  border-radius: 50%; text-align: center; top: 50%; transform: translateY(-50%); color: #000; z-index: 2; font-size: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";  font-weight: 100; cursor: pointer;
      }
      &:hover{
        &::before{
          width: 250px; height: 250px; opacity: 1;
        }
        >input{
          color: #fff;
        }
      }
    }
  }
}




/* 花苗検索 */
#idx_search{width: 100%; background-color: #eee;}
.idx_search > div{margin: 0 auto; background-color: #fff; border-radius: 10px;}
.idx_search_l h2{border-top: 1px solid #000; border-bottom: 1px solid #000; text-align: center;}
.idx_search_l p{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-size: 15px; text-align: center; }
.idx_search_r table{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}

@media screen and (min-width: 1101px) {
  .search_w100{display: none;}
  #idx_search{padding: 80px 0;}
  .idx_search{max-width: 1200px; min-width: 1101px; margin: 0 auto;}
  .idx_search > div{width: 94%; padding: 85px 0 100px 0;}
  .idx_search_l{float: left; padding: 0 7% 0 4%;}
  .idx_search_l h2{font-size: 33px; padding: 18px 0; width: 220px;}
  .idx_search_l p{margin: 10px 0;}
  .idx_search_r{float: left; padding-top: 20px;}
  .search01{font-size: 24px; padding-bottom: 5px;}
  .search02{vertical-align: top;}
  .search02 input{font-size: 18px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 450px;}
  .search03 select{-webkit-appearance: none; appearance: none; background-image: url("../images/idx_search03.gif"); background-repeat: no-repeat; background-size: 27px auto; background-position: right 12px center; background-color: #fff; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 450px; font-size: 18px;}
  .search04{vertical-align: bottom; width: 154px;}
  .search04 input[name="image"]:hover{opacity: 0.6;}
}

@media screen and (min-width: 1001px) and ( max-width:1100px) {
  .search_w100{display: none;}
  #idx_search{padding: 80px 0;}
  .idx_search{max-width: 1100px; min-width: 1001px; margin: 0 auto;}
  .idx_search > div{width: 94%; padding: 80px 0 100px 0;}
  .idx_search_l{width: 100%;}
  .idx_search_l h2{font-size: 33px; padding: 18px 0; width: 220px; margin: 0 auto;}
  .idx_search_l p{margin: 10px 0;}
  .idx_search_r{padding-top: 40px;}
  .idx_search_r table{width: 650px; margin: 0 auto;}
  .search01{font-size: 24px; padding-bottom: 5px;}
  .search02{vertical-align: top;}
  .search02 input{font-size: 18px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 450px;}
  .search03 select{-webkit-appearance: none; appearance: none; background-image: url("../images/idx_search03.gif"); background-repeat: no-repeat; background-size: 27px auto; background-position: right 12px center; background-color: #fff; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 450px; font-size: 18px;}
  .search04{vertical-align: bottom; width: 154px;}
}

@media screen and (max-width: 1000px) {
  .search_w110{display: none;}
  #idx_search{padding: 60px 0;}
  .idx_search > div{width: 90%; padding: 60px 0 70px 0;}
  .idx_search_l{width: 100%;}
  .idx_search_l h2{font-size: 30px; padding: 18px 0; width: 200px; margin: 0 auto;}
  .idx_search_l p{margin-top: 10px;}
  .idx_search_r{padding-top: 40px;}
  .idx_search_r table{width: 80%; margin: 0 auto;}
  .search01{font-size: 20px;}
  .search02, .search03{padding: 10px 0 20px 0;}
  .search02 input{font-size: 16px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 100%}
  .search03 select{-webkit-appearance: none; appearance: none; background-image: url("../images/idx_search03.gif"); background-repeat: no-repeat; background-size: 20px auto; background-position: right 12px center; background-color: #fff; padding: 12px; border: 1px solid #ccc; border-radius: 5px; width: 100%; font-size: 18px; color: #000;}
  .search04{vertical-align: top; text-align: center;}
}