@charset "utf-8";
/* clip_PC */
.clip__area {
  background: url(../img/clip_list_bg.png) left top no-repeat;
  background-size: cover;
}
.clip__area .title {
 text-align: center;
	margin-bottom: 29px;
}
.clip__ul > li {
  position: relative;
  padding-bottom: 3.2rem;
}
.clip__list {
  display: -ms-flexbox;
  display: flex;
}
.clip__img {
  flex-shrink: 0;
  margin-top: 6.4rem;
  width: 50%;
  text-align: center;
}
.clip__img img {
  padding: 6px;
	background-color: #f0ede5;
  box-shadow: 2px 2px 5px rgba(6, 0, 0, .2),-1px -2px 3px rgba(6, 0, 0, .1);
  -webkit-transform: rotate(-4.72deg);
  transform: rotate(-4.72deg);
  width: 76.7%;
}
.clip__info {
  flex-shrink: 0;
  padding-left: 1.533rem;
  width: 50%;
  color: #000;
}
.clip__ttl {
  font-size: 1.666rem;
}
.clip__ttl span {
  font-size: 1.333rem;
}
.clip__ttl-comment {
  font-size: 1rem;
}
.clip__price {
  color: #ff9a9a;
  font-weight: 700;
  font-size: 1.666rem;
}
.clip__price span {
  font-weight: 700;
  font-size: .8em;
}
.clip__price-comment {
  font-size: .666rem;
}
.clip__icon {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 1.666rem 0;
  padding-right: 3em;
}
.clip__icon li {
  margin: 0 .666rem .666rem 0;
}
.clip__icon-desc {
  display: block;
  cursor: pointer;
  transition: all .3s linear;
}
.clip__icon-top {
  margin-top: -1rem;
  margin-bottom: 1rem;
}
.clip__icon-desc:hover {
  opacity: .7;
}
.clip__area .clip__txt {
  font-size: .666rem;
}
.clip__comment {
  margin: 1.6rem 0;
  padding: 1em;
  border-bottom: 1px solid #b6b5b7;
  background-color: #f0ede5;
  box-shadow: 1px 1px 1px #dddcdc, -1px 0 1px #dddcdc;
  font-size: .666rem;
}
.clip__item {
  display: inline-flex;
  min-width: 47%;
}
.clip__item dt {
  flex-shrink: 0;
  margin-right: .5em;
  margin-bottom: .7em;
  width: 8em;
  height: 1.4em;
  border: 1px solid #000;
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
}
.clip__item dd {
  border: 1px solid transparent;
  line-height: 1.3;
}
.clip__btn-contact {
	display: flex;
	justify-content: space-around;
  margin: 1.7rem auto;
  width: 500px;
}
.clip__btn {
	position: relative;
	cursor: pointer;
}
.clip__btn::after {
	position: absolute;
	content: "";
	top: 30%;
	right: 17%;
	width: 49px;
	height: 49px;
	background-image: url("../../category/img/clip-heart_off.png");
	background-repeat: no-repeat;
	transition: all .36s;
}
.clip__btn.on::after {
	position: absolute;
	content: "";
	top: 30%;
	right: 17%;
	width: 49px;
	height: 49px;
	background-image: url("../../category/img/clip-heart_on.png");
	background-repeat: no-repeat;
	transition: all .36s;
}

/******** Hover **********/
@media screen and (min-width:641px) {
}

/********  TAB **********/
@media screen and (max-width:768px) {
  .clip__icon {
    padding-right: 0;
  }
  .clip__icon li {
    flex-shrink: 0;
    margin-right: 2.66%;
    width: 14%;
  }
}
/********  SP **********/
@media screen and (max-width:640px) {
  /* MV_SP */
	.clip__area .title {
		width: 66%;
		margin:  0 auto 2rem;
	}
  .cate-main__img img {
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  .cate-main__logo {
    bottom: -29%;
    height: 60%;
  }
  /* introduction_SP */
  .intro__txt {
    text-align: left;
  }
  .intro__subttl {
    height: 37px;
  }
  .intro__list li {
    background-size: 1.2rem;
    font-size: 1.2rem;
  }
  /* clip_SP */
  .clip__list {
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .clip__ul > li {
    background-image: none !important;
  }
  .clip__img {
    margin: 0 auto 2.5em;
    width: 76.7%;
  }
  .clip__img img {
    margin-top: 2em;
    padding: 4px;
    width: 100%;
    box-shadow: 1px 1px 3px rgba(6, 0, 0, .2),-1px -1px 2px rgba(6, 0, 0, .1);
  }
  .clip__info {
    margin: 0 auto;
    padding-left: 0;
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);
  }
  .clip__btn-contact {
    width: 51.6%;
    max-width: 200px;
  }
  .clip__ttl {
    font-size: 1.333rem;
  }
  .clip__price {
    font-size: 2.5rem;
  }
  .clip__icon {
    margin: 1.25rem 0 .5rem;
  }
  .clip__icon li {
    flex-shrink: 0;
    margin-right: 2.28%;
    width: 12%;
  }
  .clip__icon-top {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  .clip__icon li:nth-child(7n) {
    margin-right: 0;
  }
  .clip__comment {
    margin: 1rem 0;
  }
  .clip__item dt {
    margin-bottom: 1em;
  }
}