/* セールアイコン
/* 以下JSの「setSaleIcon」関数で出力されるdata-sale-value属性依存スタイル
/* https://gigaplus.makeshop.jp/kurasso/common/js/common.js
---------------------------------------------------------- */

.category-list > li[data-sale-value1] em.price,
#list_item > li[data-sale-value1] .price {
  color: #E64949 !important;
}


.category-list > li[data-sale-value1] .category-list-img a,
#list_item > li[data-sale-value1] .itemImg2,
.category-list > li[data-sale-value2] .category-list-img a,
#list_item > li[data-sale-value2] .itemImg2,
.category-list > li[data-free-label] .category-list-img a,
#list_item > li[data-free-label] .itemImg2 {
  position: relative;
}

.category-list > li[data-sale-value1] .category-list-img a::after,
#list_item > li[data-sale-value1] .itemImg2::after,
.category-list > li[data-sale-value2] .category-list-img a::before,
#list_item > li[data-sale-value2] .itemImg2::before,
.category-list > li[data-free-label] .category-list-img a::before,
#list_item > li[data-free-label] .itemImg2::before {
  display: block;
  position: absolute;
  left: 0;
  padding: 4px;
  z-index: 1;
  text-align: center;
}

.category-list > li[data-sale-value1] .category-list-img a::after,
.category-list > li[data-sale-value2] .category-list-img a::before ,
.category-list > li[data-free-label] .category-list-img a::before {
  width: 110px;
}

#list_item > li[data-sale-value1] .itemImg2::after,
#list_item > li[data-sale-value2] .itemImg2::before,
#list_item > li[data-free-label] .itemImg2::before {
  width: 70px;
}

.category-list > li[data-sale-value1] .category-list-img a::after,
#list_item > li[data-sale-value1] .itemImg2::after {
  content: attr(data-sale-value1) '%OFF';
  background-color: #E64949;
  color:#fff;
}

.category-list > li[data-sale-value2] .category-list-img a::before,
#list_item > li[data-sale-value2] .itemImg2::before {
  content: attr(data-sale-value2) '%還元';
  background-color: #DE8A56;
  color:#fff;
}

.category-list > li[data-free-label] .category-list-img a::before,
#list_item > li[data-free-label] .itemImg2::before {
  content: attr(data-free-label);
  background-color: #5690de;
  color:#fff;
}

.category-list > li[data-sale-value1] .category-list-img a::after,
.category-list > li[data-sale-value2] .category-list-img a::before,
.category-list > li[data-free-label] .category-list-img a::before {
  bottom: 20px;
  font-size: 16px;
  letter-spacing: .02em;
}

.category-list > li[data-sale-value1][data-sale-value2] .category-list-img a::after,
.category-list > li[data-sale-value1][data-free-label] .category-list-img a::after {
  bottom: 53px;
}

#list_item > li[data-sale-value1] .itemImg2::after,
#list_item > li[data-sale-value2] .itemImg2::before,
#list_item > li[data-free-label] .itemImg2::before {
  bottom: 0;
  font-size: 10px;
  letter-spacing: .02em;
}

#list_item > li[data-sale-value1][data-sale-value2] .itemImg2::after,
#list_item > li[data-sale-value1][data-free-label] .itemImg2::after {
  bottom: 21px;
}

/* アイテムレビュー
---------------------------------------------------------- */

/* --------- transition --------- */
.js-review-list {

}

.js-review-list.is-initialized .ira-article-sec_content {
  min-height: 0;
}

.js-review-list.is-initialized .ira-article-sec_content_loader {
  transform: scale(0);
  animation: none;
}

.js-review-list_cate {
  transform: scale(.75);
  opacity: 0;
  overflow: hidden;
  transition: margin .3s ease, transform .3s ease, opacity .3s ease;
}

.js-review-list_cate.is-active {
  transform: scale(1);
  opacity: 1;
}

.js-review-list_cate.is-active:nth-child(n+2) {
  margin-top: 57px;
}

@media screen and (max-width: 568px) {
  .js-review-list_cate.is-active:nth-child(n+2) {
    margin-top: 26px;
  }
}

.js-review-list_more {
  display: none;
}

.js-review-list_more.is-active {
  display: block;
}

.js-review-list_list {
  display: none;
}

.js-review-list_list.is-active {
  display: block;
}

/* --------- ira-wrap --------- */
.ira-wrap {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 65px;
  letter-spacing: .06em;
  color: #1a1a1a;
  overflow: hidden;
}

@media screen and (max-width: 1230px) {
  .ira-wrap {
    padding: 37px 15px 0;
  }
}

.ira-wrap:nth-child(n+2) {
  margin-top: 56px;
}

@media screen and (max-width: 568px) {
  .ira-wrap:nth-child(n+2) {
    margin-top: 17px;
  }
}

.ira-wrap.opt-bg,
.ira-wrap.opt-bg2 {
  position: relative;
  padding-bottom: 60px;
}

@media screen and (max-width: 568px) {
  .ira-wrap.opt-bg,
  .ira-wrap.opt-bg2 {
    padding-top: 27px;
    padding-bottom: 40px;
  }
}

.ira-wrap.opt-bg::before,
.ira-wrap.opt-bg2::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #eee;
}

.ira-wrap.opt-bg::before {
  left: -1000%;
  right: -1000%;
}

.ira-wrap.opt-bg2::before {
  left: 0;
  right: 0;
}

@media screen and (min-width: 1201px) {
  .ira-wrap.opt-bg2::before {
    display: none;
  }
}

.ira-wrap + section,
.ira-wrap + style + section {
  margin-top: 31px;
}

.ira-wrap .head {
  position: relative;
}

/* --------- ira-header --------- */
.ira-header {
  position: relative;
}

.ira-header:nth-child(n+2) {
  margin-top: 65px;
}

.ira-header_title {
  position: relative;
  padding-bottom: 22px;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

@media screen and (max-width: 568px) {
  .ira-header_title {
    padding-bottom: 13px;
    font-size: 24px;
    font-weight: 700;
  }
}

.ira-header_title::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 76px;
  height: 6px;
  margin: 0 auto;
  border-radius: 2px;
  background-color: #c3ac4d;
}

@media screen and (max-width: 568px) {
  .ira-header_title::after {
    width: 30px;
    height: 4px;
  }
}

/* --------- ira-header2 --------- */

.ira-header2 {
  position: relative;
}

.ira-header2_title {
  font-size: 28px;
  line-height: 1.3;
  text-align: center;
}

/* --------- ira-text --------- */
.ira-text {
  position: relative;
  font-size: 16px;
  line-height: 2;
  text-align: center;
}

@media screen and (max-width: 568px) {
  .ira-text {
    margin: 0 9px;
    font-size: 14px;
  }
}

.ira-text:nth-child(n+2) {
  margin-top: 31px;
}

@media screen and (max-width: 568px) {
  .ira-text:nth-child(n+2) {
    margin-top: 22px;
  }
}

/* --------- ira-category-list --------- */
.ira-category-list-wrap {

}

.ira-category-list {
  padding: 50px;
  background-color: #fff;
}

@media screen and (max-width: 568px) {
  .ira-category-list {
    padding: 20px 10px;
  }
}

.ira-category-list > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: -24px 0 0 -16px;
}

@media screen and (max-width: 568px) {
  .ira-category-list > ul {
    margin: -10px 0 0 -8px;
  }
}

.ira-category-list > ul > li {
  margin: 24px 0 0 16px;
}

@media screen and (max-width: 568px) {
  .ira-category-list > ul > li {
    margin: 10px 0 0 8px;
  }
}

/* --------- ira-category --------- */
.ira-category {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

@media screen and (max-width: 568px) {
  .ira-category {
    font-size: 12px;
    font-weight: 700;
  }
}

.ira-category > button {
  box-sizing: border-box;
  height: 45px;
  padding: 10px 28px;
  border: 0;
  border-radius: 23px;
  background-color: #e4e1d3;
  font: inherit;
  letter-spacing: inherit;
  color: #6b685c;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}

@media screen and (max-width: 568px) {
  .ira-category > button {
    height: 29px;
    padding: 5px 13px;
    border-radius: 15px;
  }
}

.ira-category > button:hover,
.ira-category > button.is-current {
  background-color: #c3ac4d;
  color: #fff;
}

.ira-category > button.is-current {
  pointer-events: none;
}

/* --------- ira-article-sec --------- */

.ira-article-sec {
  position: relative;
}

.ira-article-sec:nth-child(n+2) {
  margin-top: 50px;
}

@media screen and (max-width: 568px) {
  .ira-article-sec:nth-child(n+2) {
    margin-top: 27px;
  }
}

.ira-article-sec_header {

}

.ira-article-sec_header_title {
  position: relative;
  padding-left: 80px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: #626262;
  text-align: left !important;
}

@media screen and (max-width: 568px) {
  .ira-article-sec_header_title {
    padding-left: 26px;
    font-size: 12px;
  }
}

.ira-article-sec_header_title::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(.65em - 1px);
  left: 0;
  width: 60px;
  height: 0;
  border-top: 2px solid #626262;
}

@media screen and (max-width: 568px) {
  .ira-article-sec_header_title::before {
    width: 20px;
    border-top-width: 1px;
  }
}

.ira-article-sec_content {
  position: relative;
  min-height: 464px;
}

@media screen and (max-width: 568px) {
  .ira-article-sec_content {
    min-height: 165px;
  }
}

.ira-article-sec_content:nth-child(n+2) {
  margin-top: 23px;
}

@media screen and (max-width: 568px) {
  .ira-article-sec_content:nth-child(n+2) {
    margin-top: 11px;
  }
}

/* --------- ira-article-sec_content_loader --------- */
.ira-article-sec_content_loader {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 5%;
  height: 0;
  padding-top: 5%;
  pointer-events: none;
  animation: ira-article-sec_content_loader .3s ease both;
  transition: transform .3s ease;
}

@keyframes ira-article-sec_content_loader {
  0% { transform: scale(0); }

  100% { transform: scale(1); }
}

@keyframes slider-wrap_loader {
  0% { transform: scale(0); }

  100% { transform: scale(1); }
}

.ira-article-sec_content_loader::before,
.ira-article-sec_content_loader::after,
.ira-article-sec_content_loader > span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 20%;
  height: 50%;
  margin: auto;
  background-color: #c3ac4d;
  border-radius: 1px;
}

.ira-article-sec_content_loader::before,
.ira-article-sec_content_loader::after {
  content: '';
}

.ira-article-sec_content_loader > span {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  animation: ira-article-sec_content_loader_item .3s -.3s linear alternate-reverse infinite both;
  right: auto;
}

.ira-article-sec_content_loader::before {
  animation: ira-article-sec_content_loader_item .3s linear alternate-reverse infinite both;
}

.ira-article-sec_content_loader::after {
  left: auto;
  animation: ira-article-sec_content_loader_item .3s -.15s linear alternate-reverse infinite both;
}

@keyframes ira-article-sec_content_loader_item {
  0% { transform: translateY(-100%); }

  100% { transform: translateY(100%); }
}

/* --------- ira-article-list --------- */
.ira-article-list {

}

.ira-article-list > ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

@media screen and (max-width: 568px) {
  .ira-article-list.opt-scrollable > ul {
    flex-wrap: nowrap;
    margin: 0 -15px;
    overflow: auto;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.ira-article-list > ul > li {
  display: flex;
  box-sizing: border-box;
  width: 25%;
  padding: 0 10px;
}

@media screen and (max-width: 1024px) {
  .ira-article-list > ul > li {
    width: 50%;
  }
}

@media screen and (max-width: 568px) {
  .ira-article-list:not(.opt-scrollable) > ul > li {
    width: 100%;
  }
}

@media screen and (max-width: 568px) {
  .ira-article-list.opt-scrollable > ul > li {
    flex: 0 0 70.93vw;
    width: 70.93vw;
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media screen and (max-width: 568px) {
  .ira-article-list.opt-scrollable > ul > li:first-child {
    margin-left: 12px;
  }
}

.ira-article-list > ul > li:nth-child(n+5) {
  margin-top: 20px;
}

@media screen and (max-width: 1024px) {
  .ira-article-list > ul > li:nth-child(n+3) {
    margin-top: 20px;
  }
}

@media screen and (max-width: 568px) {
  .ira-article-list:not(.opt-scrollable) > ul > li:nth-child(n+2) {
    margin-top: 10px;
  }
}

@media screen and (max-width: 568px) {
  .ira-article-list.opt-scrollable > ul > li:nth-child(n+3) {
    margin-top: 0;
  }
}

.ira-article-list > ul > li > a {
  display: block;
  width: 100%;
  color: #000;
}

.ira-article-list > ul > li > a:hover {
  text-decoration: none;
}

/* --------- ira-nestingmore --------- */
.ira-nestingmore-wrap {
  flex: 0 0 100% !important;
  width: 100% !important;
}

@media screen and (max-width: 568px) {
  .ira-nestingmore-wrap {
    flex: 0 0 162px !important;
    width: 162px !important;
    padding-right: 20px !important;
  }
}

.ira-nestingmore {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.ira-nestingmore > a {
  display: block;
  padding-top: 64px;
  color: #c3ac4d;
  background: url(https://gigaplus.makeshop.jp/kurasso/common/img/icon_arrow.png) no-repeat center top / 77.92%;
}

/* --------- ira-article --------- */
.ira-article {
  display: flex;
  flex-flow: column;
  position: relative;
  box-sizing: border-box;
  height: 100%;
  border-radius: 0 0 20px 0;
  padding: 3px;
  background-color: #fff;
  color: #000;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2);
  transition: background-color .3s ease;
}

@media screen and (max-width: 568px) {
  .ira-article-list:not(.opt-scrollable) .ira-article {
    flex-flow: row;
    padding-left: 165px;
    align-items: center;
    height: auto;
    min-height: 165px;
  }
}

a:hover .ira-article {
  background-color: #e4e1d3;
}

.ira-article_image-wrap {
  flex: 0 0 auto;
  width: 100%;
}

@media screen and (max-width: 568px) {
  .ira-article-list:not(.opt-scrollable) .ira-article_image-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 165px;
  }
}

.ira-article_image {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
}

@media screen and (max-width: 568px) {
  .ira-article-list:not(.opt-scrollable) .ira-article_image {
    padding-top: 0;
    height: 100%;
  }
}

.ira-article.opt-icon-pr .ira-article_image::before {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 20px;
  width: 40px;
  height: 46px;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22113.386%22%20height%3D%22130.394%22%20viewBox%3D%220%200%20113.386%20130.394%22%3E%20%3Cg%3E%20%3Cpolygon%20points%3D%220%200%200%20130.394%2056.693%2087.874%20113.386%20130.394%20113.386%200%200%200%22%20fill%3D%22%23589880%22%2F%3E%20%3Cpolyline%20points%3D%2211.339%200%2011.339%20107.717%2056.693%2072.592%20102.047%20107.717%20102.047%200%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%224%22%2F%3E%20%3Ctext%20transform%3D%22translate(29.113%2054.651)%22%20font-size%3D%2240%22%20fill%3D%22%23fff%22%20font-family%3D%22BioSans-Bold%2C%20Bio%20Sans%22%20font-weight%3D%22700%22%20letter-spacing%3D%220.07em%22%3EPR%3C%2Ftext%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center center / 100%;
  opacity: .95;
}

@media screen and (max-width: 568px) {
  .ira-article.opt-icon-pr .ira-article_image::before {
    right: auto;
    left: 0;
    width: 30px;
    height: 35px;
  }
}

@media screen and (max-width: 568px) {
  .ira-article-list.opt-scrollable .ira-article.opt-icon-pr .ira-article_image::before {
    right: 16px;
    left: auto;
    width: 40px;
    height: 46px;
  }
}

.ira-article_image > img {
  position: absolute;
  top: -1000%;
  left: -1000%;
  right: -1000%;
  bottom: -1000%;
  margin: auto !important;
  min-width: calc(1000% + 20px);
  max-width: none;
  min-height: calc(1000% + 20px);
  transform: scale(.1);
  transition: transform .3s ease;
  backface-visibility: hidden;
  overflow: hidden;
}

a:hover .ira-article_image > img {
  opacity: 1;
  transform: scale(.11);
}

.ira-article_content {
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
  height: 100%;
  padding: 16px 11px 11px;
}

@media screen and (max-width: 568px) {
  .ira-article_content {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 15px 16px;
  }
}

.ira-article_date {
  padding-left: 22px;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  color: #A59247;
  text-align: left;
  background: url(//gigaplus.makeshop.jp/kurasso/assets/img/common/icon_clock01_000000.svg) no-repeat left top / 15px;
}

.ira-article_title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

@media screen and (max-width: 568px) {
  .ira-article_title {
    font-size: 12px;
  }
}

.ira-article_title:nth-child(n+2) {
  margin-top: 9px;
}

.ira-article_title:not(:last-child) {
  margin-bottom: 14px;
}

.ira-article_category-list {
  margin-top: auto;
}

.ira-article_category-list > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -10px 0 0 -9px;
}

@media screen and (max-width: 568px) {
  .ira-article_category-list > ul {
    margin: -6px 0 0 -4px;
  }
}

.ira-article_category-list > ul > li {
  margin: 10px 0 0 9px;
}

@media screen and (max-width: 568px) {
  .ira-article_category-list > ul > li {
    margin: 6px 0 0 4px;
  }
}

.ira-article_category {
  border-bottom: 1px solid #888585;
  padding-bottom: 3px;
  font-size: 12px;
  letter-spacing: -.05em;
  line-height: 1.3;
  color: #888585;
}

/* --------- ira-more --------- */
.ira-more {
  text-align: center;
}

.ira-more:nth-child(n+2) {
  margin-top: 60px;
}

@media screen and (max-width: 568px) {
  .ira-more:nth-child(n+2) {
    margin-top: 30px;
  }
}

.ira-more > button {
  width: 50px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity .3s ease;
}

@media screen and (max-width: 568px) {
  .ira-more > button {
    width: 40px;
  }
}

.ira-more > button:hover {
  opacity: .7;
}

.ira-more > button > img {
  width: 100%;
}

/* --------- ira-button --------- */
.ira-button {
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  line-height: 1.3;
}

.ira-button:nth-child(n+2) {
  margin-top: 70px;
}

.ira-button > a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 50px;
  min-width: 240px;
  max-width: 100%;
  border: 1px solid #A59247;
  border-radius: 25px;
  padding: 10px;
  background-color: #A59247;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, letter-spacing .3s ease;
}

.ira-button > a:hover {
  background-color: #fff;
  color: #000;
  border-color: #000;
  letter-spacing: .3em;
}