@charset "utf-8";

#contents_ver4 {
  margin-left: 0;
  margin-right: 0;
  width: inherit;
  min-width: 1024px;
}

.w1024auto {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}

#idecobag {
  font-family: "游ゴシック", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", sans-serif;
  width: 100%;
  color: #000;
  overflow: hidden;
}

#idecobag img {
  width: 100%;
}

#idecobag .hover:hover {
  opacity: 0.7;
  transition-duration: 0.4s;
}

#idecobag #share {
  width: 1024px;
  margin: 0 auto 120px;
  padding-top: 112px;
  background-color: #fff;
}

#idecobag .inner {
  width: 1024px;
  margin: 0 auto;
  padding: 0;
}


#idecobag #shop {
  clear: both;
  width: 800px;
  margin: 119px auto 0;
  position: relative;
}
#idecobag #shop img {
  width: inherit;
}
#idecobag #shop .sp {
  display: none !important;
}
#idecobag #shop .banner {
  display: block;
  width: 800px;
  height: 145px;
  /* position: absolute; */
  background-color: #ba0c2f;
  position: relative;
  margin-bottom: 30px;
}

#idecobag #shop .banner:hover {
  /* opacity: 0.7; */
}

#idecobag #shop .banner:hover img {
  background: none;
}
#idecobag #shop .banner .photo,
#idecobag #shop .banner .title {
  position: absolute;
}
#idecobag #shop .banner .photo {
  top: 10px;
  left: 10px;
}
#idecobag #shop .banner .title {
  left: 320px;
  top: 55px;
}

#idecobag #shop .banner .title img {
  float: left;
  width: 146px;
}
#idecobag #shop .banner .title span {
  display: block;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  margin-top: 10px;
  margin-left: 30px;
  letter-spacing: 4px;
  float: left;
}
#idecobag #shop .banner:before {
  content: "";
  width: 11px;
  height: 16px;
  background-image: url(https://sc3.locondo.jp/contents/img-fitfit/banner/lp/share/img/arrow_white.svg);
  background-size: 100% auto;
  position: absolute;
  right: 30px;
  top: 50%;
  margin-top: -8px;
}

#idecobag .bg-note {
  background-image: url(https://media.aws.locondo.jp/fitfitstatic/common/img/banner/lp/ecobag/img/bg_note.png);
  background-position: center top;
  background-color: #F3F0E6;
  padding-bottom: 40px;
}

#idecobag #contents1 {
  padding: 96px 0 0;
}

#idecobag #contents1 .title {
  width: 910px;
  margin: 0px auto;
}

#idecobag #contents1 .text {
  width: 900px;
  margin: 48px auto;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  color: #3e3e3e;
  line-height: 1.6;
}

#idecobag .contents .photo {
  position: relative;
}

#idecobag #contents2 {
  padding: 0 0 353px;
}

#idecobag #contents2 .photo1 {
  width: 748px;
  left: 139px;
}

#idecobag .contents .box {
  position: absolute;
}

#idecobag .contents .box .title {
  position: absolute;
}

#idecobag .contents .box .text {
  font-weight: bold;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 26px;
  text-align: left;
  color: #1e1e1e;
}

#idecobag #contents2 .box1 {
  top: 324px;
  left: 841px;
  width: 180px;
}

#idecobag #contents2 .box1 .title {
  width: 240px;
  top: -60px;
  left: -78px;
}

#idecobag #contents2 .box2 {
  top: 705px;
  left: 314px;
  width: 570px;
}

#idecobag #contents2 .box2 .title {
  width: 146px;
  top: -108px;
  left: -170px;
}

#idecobag #contents2 .box3 {
  top: 937px;
  left: 69px;
  width: 395px;
}

#idecobag #contents2 .box3 .title {
  width: 395px;
  top: -101px;
  left: -40px;
}

#idecobag #contents2 .box4 {
  top: 937px;
  left: 594px;
  width: 405px;
}

#idecobag #contents2 .box4 .title {
  width: 441px;
  top: -101px;
  left: -46px;
}

#idecobag .contents .inner {
  position: relative;
}

#idecobag #contents2 .inner .parts {
  position: absolute;
}

#idecobag #contents2 .inner .parts.parts1 {
  width: 296px;
  top: 92px;
  left: -268px;
}

#idecobag #contents2 .inner .parts.parts2 {
  width: 94px;
  top: 72px;
  right: -183px;
}

#idecobag #contents2 .inner .parts.parts3 {
  width: 115px;
  top: 807px;
  left: -175px;
}

#idecobag #contents2 .inner .parts.parts4 {
  width: 353px;
  top: 491px;
  right: -300px;
}

#idecobag #contents2 .inner .parts.parts5 {
  width: 287px;
  top: 1235px;
  left: -209px;
}

#idecobag #contents2 .inner .parts.parts6 {
  width: 305px;
  top: 1759px;
  right: -271px;
}

#idecobag #contents2 .inner .parts.parts7 {
  width: 94px;
  top: 1597px;
  right: -183px;
}

#idecobag #contents3 .photo2 {
  width: 507px;
  left: 504px;
}

#idecobag #contents3 .box5 {
  top: 179px;
  left: 8px;
  width: 400px;
}

#idecobag #contents3 .box5 .title {
  width: 506px;
  top: -111px;
  left: 0px;
}

#idecobag #contents4 .photo3 {
  width: 523px;
  top: -5px;
  left: -1px;
}

#idecobag #contents4 .box6 {
  top: 203px;
  left: 589px;
  width: 400px;
}

#idecobag #contents4 .box6 .title {
  width: 324px;
  top: -139px;
  left: -128px;
}

#idecobag #contents5 .photo4 {
  width: 486px;
  top: 14px;
  left: 505px;
}

#idecobag #contents5 .box7 {
  top: 182px;
  left: 8px;
  width: 400px;
}

#idecobag #contents5 .box7 .title {
  width: 486px;
  top: -111px;
  left: 0px;
}

#idecobag .btn {
  display: block;
  width: 520px;
  margin: 68px auto;
  padding: 30px 0;
  background-color: #000;
  border-radius: 50px;
  text-align: center;
}

#idecobag .btn span {
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

#idecobag #color {
  padding: 71px 0;
}

#idecobag #color .inner {

  max-width: inherit;

  width: 1215px;
}

#idecobag #color .title {
  width: 374px;
  margin: 0 auto 40px;
}

#idecobag #color ul {
  display: flex;
}

#idecobag #color ul li {
}

#idecobag #color ul li a {
  display: block;
}

#idecobag #color ul li .img {}

#idecobag #color ul li .name {
  margin: 0 auto 21px;
}

#idecobag #color ul li .price {
    text-align: center;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: #000;
    margin: 0 0 16px;
}

#idecobag #color ul li .link {
    text-align: center;
    border: solid 1px #000;
    border-radius: 20px;
    width: 180px;
    display: block;
    margin: 0 auto;
    font-size: 14px;
    padding: 8px 0;
    transition-duration: 0.3s;
}
#idecobag #color ul li:hover .link {
  border: 1px solid #fff;
  background-color: #000;
  color: #fff;
}

#idecobag #color ul li:nth-child(1) {
  width: 358px;
  margin-right: 56px;
}

#idecobag #color ul li:nth-child(1) .name {
  width: 99px;
  margin-top: 7px;
}

#idecobag #color ul li:nth-child(2) {
  width: 393px;
  margin-right: 55px;
}

#idecobag #color ul li:nth-child(2) .name {
  width: 83px;
  margin-top: 7px;
}

#idecobag #color ul li:nth-child(3) {
  width: 358px;
}

#idecobag #color ul li:nth-child(3) .name {
  width: 99px;
  margin-top: 3px;
}

/* start アニメーション設定 */

@keyframes fade {
  0% {
    opacity: 0;
    /* transform: translateY(50px); */
  }

  100% {
    opacity: 1;
    /* transform: translateY(0px); */
  }
}

#idecobag .scr-effect {
  opacity: 0;
}

#idecobag .scr-effect.in {
  animation-name: fade;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.535, 0.260, 0.455, 0.865);
}

#idecobag #color.scr-effect li {
  opacity: 0;
}
#idecobag #color.scr-effect.in li {

}
#idecobag #color.scr-effect.in li:nth-child(1) {
  animation-name: fade;
  animation-duration: 0.5s;
  animation-delay: 0.0s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.535, 0.260, 0.455, 0.865);
}

#idecobag #color.scr-effect.in li:nth-child(2) {
  animation-name: fade;
  animation-duration: 0.5s;
  animation-delay: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.535, 0.260, 0.455, 0.865);
}

#idecobag #color.scr-effect.in li:nth-child(3) {
  animation-name: fade;
  animation-duration: 0.5s;
  animation-delay: 0.6s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.535, 0.260, 0.455, 0.865);
}

/* end アニメーション設定 */