@charset "UTF-8";
/* CSS Document */
.border-dot {
  border-top: 2px dotted #D5BF78;
  margin: 0;
}
.section-category {
  background-color: #FFF9FC;
}
.section-category h2 {
  font-size: 3.6rem;
  color: #9A863C;
  text-align: center;
  margin-top: 60px;
  font-weight: 300;
}
.earrings-category-img, .barretta-category-img {
  width: 150px;
  margin-top: 30px;
  margin-bottom: 10px;
}
.earrings-category__container, .barretta-category__container {
  text-align: center;
}
.section-category h3 a {
  text-decoration: none;
  color: #9A863C;
}
.section-category h3 {
  text-align: center;
}
.view-all-button {
  width: 150px;
  margin-top: 30px;
  margin-bottom: 80px;
}
.view-all-container {
  text-align: center;
}

@media(min-width:480px){
  .section-category h2 {
  margin-top: 30px;
}
  
  .category__container{
    display: flex ;
    justify-content: center ;
    margin-top: 50px ;
  }
  
  .earrings-category__container{
    margin-right: 140px ; 
  }
  
  .view-all-button {
  margin-top: 40px;
  margin-bottom: 30px;
}
}



.earrings-top-img {
  background-image: url("../images/earrings-top__sp.png");
  height: 300px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
}
.earrings-collection h2,.barretta-collection h2 {
  text-align: center;
  font-size: 3.2rem;
  line-height: 1.5;
  font-weight: 300;
  color: #9A863C;
  margin-top: 60px;
  margin-bottom: 30px;
}
.earrings-collection_description, .earrings-collection_description2{
  text-align: center;
  line-height: 1.8;
  margin-bottom: 50px;
}

.barretta-collection_description,.barretta-collection_description2 {
   text-align: center;
  line-height: 1.8;
  margin-bottom: 50px;
}


.earrings-collection_description2 {
  margin-bottom: 60px;
}
.rosebouquet-img__div, .pearl-blue-bouquet-img__div,.rococo-bouquet-img__div,.lily-img__div,.daisy-img__div {
  text-align: center;
}
.rosebouquet-img,.lily-img {
  width: 375px;
  margin-top: 90px;
  vertical-align: bottom;
}

.rosebouquet-img_pc,.rococo-boouquet-img_pc,.lily-img_pc,.daisy-img_pc{
  display: none ;
}

.section-earrings,.section-barretta {
  background-color: #FFF9FC;
}
.rosebouquet, .pearl-blue-bouquet,.rococo-bouquet,.lily,.daisy {
  background-color: #ffffff;
  width: 335px;
  margin: 0 auto;
  padding: 0 10px 40px;
  margin-bottom: 120px;
  filter: drop-shadow(4px 6px 6px rgb(217, 217, 217));
}

.rosebouquet h3, .pearl-blue-bouquet h3,.rococo-bouquet h3,.lily h3 ,.daisy h3 {
  font-size: 3.6rem;
  text-align: center;
  line-height: 1;
  padding-top: 40px;
  font-weight: 300;
  margin-bottom: 30px;
  color: #9A863C;
}
.rosebouquet-small, .pearl-blue-bouquet-small,.rococo-bouquet-small,.lily-small,.daisy-small {
  font-size: 2.0rem;
}
.view-all__link {
  text-decoration: none;
  color: #9A863C;
}
.view-all {
  position: relative;
  text-align: center;
  font-size: 1.2rem;
  margin-top: 30px;
}
.view-all ::after {
  content: url("../images/arrow.png");
  transform: scale(0.6);
  position: absolute;
  top: -3px;
  left: 218px;
}
.pearl-blue-bouquet-img,.rococo-bouquet-img,.daisy-img {
  width: 375px;
  vertical-align: bottom;
}
.pearl-blue-bouquet-img_pc{
  display: none ;
}

.rococo-bouquet {
  background-color: #ffffff;
  width: 335px;
  margin: 0 auto;
  padding: 0 10px 40px;
  margin-bottom: 60px;
  filter: drop-shadow(4px 6px 6px rgb(217, 217, 217));
}

.online-store__div{
  text-align: center ;
}

.online-store,.online-store2{
  width: 200px ;
  margin-bottom :60px ;
}

.barretta-top-img {
  background-image: url("../images/barretta-top-img_sp.png");
  height: 300px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
}

@media(min-width:480px){
  .earrings-top-img {
  background-image: url("../images/earrings-top-img_pc.png");
  height: 300px ;
}
  
  .earrings-collection h2,.barretta-collection h2 {
  font-size: 3.6rem;
  margin-top: 80px;
  margin-bottom: 50px;
}
  
  .earrings-collection_description,.barretta-collection_description{
    margin-bottom: 0 ;
  }
  
  .earrings-collection_description2 {
  margin-bottom: 80px;
}
  
  .barretta-collection_description2{
    margin-bottom: 115px ;
  }
  
  .rosebouquet-container,.rococo-bouquet-container,.lily-container{
    display: flex ;
    justify-content: center ;
  }
  
  .rosebouquet-container{
    overflow: hidden ;
    
  }
  
  .rosebouquet,.lily,.daisy {
  width: 519px;
  margin-top: 108px ;
  padding: 0 55px 40px;
  margin-bottom: 120px;
  margin-left: -35px ;
  margin-right: 0 ;
}
  
  .lily{
    margin-top: 127px 
  }
  
  .rosebouquet h3, .pearl-blue-bouquet h3,.rococo-bouquet h3,.lily h3 ,.daisy h3 {
  text-align: left;
  line-height: 1;
  padding-top: 30px;
  margin-bottom: 20px;
}
  .rosebouquet-img_pc,.lily-img_pc{
    display: block ;
    width: 500px ;
    margin-top: 90px ;
  }
  
  .rosebouquet-img,.pearl-blue-bouquet-img,.rococo-bouquet-img,.lily-img,.daisy-img {
  display: none ;
}
  
  .view-all ::after {
  left: 312px;
}
  .pearl-blue-bouquet-container,.daisy-container{
    display: flex ;
    justify-content: center ;
    flex-direction: row-reverse ;
  }
  
  .pearl-blue-bouquet{
  width: 519px;
  margin-top: 20px ;
  padding: 0 55px 40px;
  margin-bottom: 120px;
  margin-left: 0 ;
  margin-right: -35px ;
    }
  
  .pearl-blue-bouquet-img_pc{
    display: block ;
    width: 500px ;
    margin-top: 0 ;
  }
  
  .rococo-bouquet{
  width: 519px;
  margin-top: 7px ;
  padding: 0 55px 40px;
  margin-bottom: 90px;
  margin-left: -35px ;
  margin-right: 0 ;
  }
  
  .rococo-boouquet-img_pc{
    display: block ;
    width: 500px ;
    margin-top: 0;
  }
  
  .online-store{
  margin-bottom :70px ;
}
  
  .barretta-top-img{
  background-image: url("../images/barretta-top-img_pc.png");
  }
  
  .daisy-img_pc{
    display: block ;
    width: 500px ;
  }
  
  .daisy{
  width: 519px;
  margin-top: 36px ;
  padding: 0 55px 40px;
  margin-bottom: 120px;
  margin-left: 0 ;
  margin-right: -35px ;
  }
  
  .online-store2{
    margin-top: 50px ;
    margin-bottom: 120px ;
  }
}


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}