@charset "UTF-8";
#feature {
  margin: 0 auto 30px;
  padding-bottom: 20px;
  display: block;
  position: relative;
  background-color: #fffeee;
}
#feature *,
#feature *::after,
#feature *::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#feature img {
  max-width: 100%;
}
#feature a {
  display: block;
}
#feature a:hover {
  text-decoration: none;
}

/* ----- petals ----- */
#feature .petals img {
  position: absolute;
  z-index: 1;
}
#feature .petals .petal01 {
  top: 0;
  left: 394px;
}
#feature .petals .petal02 {
  top: 79px;
  left: 342px;
}
#feature .petals .petal03 {
  top: 91px;
  left: 918px;
}
#feature .petals .petal04 {
  top: 126px;
  left: 0;
}
#feature .petals .petal05 {
  top: 244px;
  left: 752px;
}
#feature .petals .petal06 {
  top: 328px;
  left: 143px;
}
#feature .petals .petal07 {
  top: 350px;
  left: 808px;
}
#feature .petals .petal08 {
  top: 419px;
  left: 866px;
}


/* ----- hero ----- */
#feature .hero {
  width: 990px;
  height: auto;
  margin: auto;
  position: relative;
  z-index: 1;
}
#feature .hero-enTxt, #feature .hero-title, #feature .hero-ttlDeco {
  position: absolute;
  z-index: 10;
}
#feature .hero-title {
  width: 338px;
  top: 72px;
  left: 135px;
}
#feature .hero-enTxt {
  width: 249px;
  top: 214px;
  left: 235px;
}
#feature .hero-ttlDeco {
  width: 253px;
  top: 200px;
  left: 687px;
}
#feature .hero-visual {
  width: 100%;
}


/* ----- lead ----- */
#feature .lead {
  margin: 30px auto 35px;
  position: relative;
  z-index: 10;
}
#feature .lead .marker {
  padding: .4em .6em;
  margin: auto;
  display: block;
  background: linear-gradient(to right, #66ff00 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 3em;
  background-position: 100% 0%;
  transition: background-position 1.0s linear;
}
#feature .lead .marker.is-show {
  background-position: 0% 0%;
}
#feature .lead .marker:first-child {
  width: 603px;
  margin-bottom: 18px;
}
#feature .lead .marker:last-child {
  width: 312px;
  transition: background-position 1.0s linear;
}


/* ----- item-blk ----- */
#feature .item-blk {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
#feature .item-blk li {
  width: 203px;
}

#feature .item-blk .item-blk__num {
  width: 100px;
  position: relative;
  z-index: 100;
}
#feature .item-blk .item02 .item-blk__num {
  width: 106px;
}
#feature .item-blk .item03 .item-blk__num {
  width: 107px;
}
#feature .item-blk .item04 .item-blk__num {
  width: 107px;
}

#feature .item-blk .item-blk__img {
  margin: -3px 0 0 0;
  position: relative;
}
#feature .item-blk .item-blk__img img {
  position: relative;
  z-index: 10;
}
#feature .item-blk .item-blk__txt {
  margin: -20px 0 0 0;
  position: relative;
  z-index: 1;
}
#feature .item-blk .item-blk__btn {
  width: 144px;
  margin: -10px auto 0;
  position: relative;
  z-index: 10;
}
#feature .item-blk .item-blk__btn a {
  display: inline-block;
}

#feature .recommend-btn {
  width: 575px;
  margin: 40px auto;
}


/* ----- 動き ----- */
#feature .fadeUp {
  opacity: 0;
  -webkit-transition: ease-in, opacity 2000ms, -webkit-transform 2000ms;
  transition: ease-in, opacity 2000ms, -webkit-transform 2000ms;
  transition: ease-in, opacity 2000ms, transform 2000ms;
  transition: ease-in, opacity 2000ms, transform 2000ms, -webkit-transform 2000ms;
  -webkit-transform: translateY(20%);
          transform: translateY(20%);
}
#feature .fadeUp.is-show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#feature .delay1 {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
#feature .delay2 {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
#feature .delay3 {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
#feature .delay4 {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}


/* ----- item-search ----- */
.item-search-contents {
  width: 990px;
  margin: 0 auto;
}