.marker {
    display: inline;
    background:linear-gradient(transparent 40%, #b3bc72 60%);
    background-repeat: no-repeat;

  /* マーカーの横方向を0にして縮める */
  background-size: 0% 100%;

  /* マーカーが引かれる速度を指定 */
  transition:background-size 1.5s;
}
.marker.on {
    background-size: 100% 100%;
}
.icon {
    background-color: goldenrod;
    color: #fff;
    padding: 4px 8px;
    font-size: 1rem;
}

/* top */
#intro {
    margin-top: 1rem;
    padding: 5rem calc(4% + 5px);
    position: relative;
    text-align: center;
    background-color: mintcream;
}
#intro:before,
#intro:after {
    content: "";
    position: absolute;
}
#intro:before {
    width: 8rem;
    height: 8rem;
    bottom: 1rem;
    right: 0;
    background: url(../img/features/bag-collection/flower01.png) 0 / contain no-repeat;
}
#intro:after {
    width: 8rem;
    height: 8rem;
    top: 2rem;
    left: 2rem;
    background: url(../img/features/bag-collection/flower02.png) 0 / contain no-repeat;
}
#intro .top-ttl {
    font-size: 2.1rem;
    line-height: 2;
}
#intro .top-txt {
    font-size: 1.6rem;
    line-height: 2;
}
@media only screen and (min-width: 769px) {
    #intro {
        max-width: 1200px;
        margin: 5rem auto;
        padding: 5rem 0;
        border-radius: 30rem;
    }
    #intro:before {
        width: 12rem;
        height: 12rem;
        bottom: -1rem;
    }
    #intro:after {
        width: 10rem;
        height: 12rem;
    }
}

.category_section.bg:after {
    background-color: #FFFFEF;
}
.about_section {
    margin-bottom: 3rem;
}