/* ==========================================
                    キャッチコピー
============================================ */

#corekara-original .coupon-background {
  padding: 20px;
  background-color: #f7f7f7;
}
@media (max-width: 767px) {
  #corekara-original .coupon-background {
    padding: 80% 0 1% 0;
  }
}

#corekara-original .coupon-background .coupon .maine-title {
  font-size: 36px;
  font-weight: bold;
  line-height: 1.8;
  color: #006c9f;
}

#corekara-original .coupon {
  width: 1000px;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 767px) {
  #corekara-original .coupon {
    width: 100%;
    padding: 0 1%;
  }
}
#corekara-original .coupon p {
  margin-top: 30px;
  margin-bottom: 50px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
}
@media (max-width: 767px) {
  #corekara-original .coupon p {
    margin-bottom: 10%;
    font-size: 15px;
  }
}

#corekara-original .coupon-background {
  width: auto;
  padding: 365px 0 10px 0;
}

/* ==========================================
                    豆知識
============================================ */

#corekara-original .trivia {
  margin: 0 auto;
  padding: 50px 0;
  background: repeating-linear-gradient(-45deg, #9ed0ef, #9ed0ef 3px, #bedbed 3px, #bedbed 7px);
}
@media (max-width: 767px) {
  #corekara-original .trivia {
    margin-top: 80px;
  }
}

#corekara-original .trivia .container .col-pc-3,
.itemList-pc--4 .itemList__unit {
  margin: 0 auto;
}

#corekara-original .trivia .trivia-frame {
  background: white;
  width: 1000px;
  padding: 0 50px 60px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  #corekara-original .trivia .trivia-frame {
    width: 100%;
    padding: 1% 5% 5%;
  }
}

#corekara-original .trivia h3 {
  width: 500px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 50px;
  color: white;
}
#corekara-original .trivia h3 span {
  color: #2074cb;
}

#corekara-original .trivia h5 {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #ed2611;
  padding: 20px 0;
}

#corekara-original .trivia .trivia-frame .icon {
  text-align: center;
  line-height: 1.5;
}
#corekara-original .trivia .trivia-frame .icon img {
  width: 30px;
}
#corekara-original .trivia .trivia-frame .icon h4 {
  font-size: 24px;
  font-weight: bold;
}
#corekara-original .trivia .trivia-frame .sentence2 {
  text-align: left;
  line-height: 2;
  margin-top: 20px;
}
#corekara-original .trivia .trivia-frame .trivia-box {
  width: 895px;
  margin: 0 auto;
  padding-top: 30px;
  opacity: 0; /* 透明 */
  transform: translateY(30px); /* 下に30px移動 */
  transition:
    opacity 1s ease-out,
    transform 1s ease-out; /* 変化に1秒かける */
}
@media (max-width: 767px) {
  #corekara-original .trivia .trivia-frame .trivia-box {
    width: 100%;
    padding-top: 10%;
  }
  #corekara-original .trivia h3 {
    width: 100%;
    padding-bottom: 5%;
  }
  #corekara-original .trivia {
    padding: 5%;
  }

  #corekara-original .trivia .itemList__unit {
    max-width: 50%;
  }
}

/* is-animatedクラスが付与された時のスタイル */
#corekara-original .trivia .trivia-frame .trivia-box.is-animated {
  opacity: 1; /* 不透明 */
  transform: translateY(0); /* 元の位置に戻る */
}
/* ボックスごとに遅延を持たせるためのスタイル */
/* jQuery側でdata属性などで制御することも可能ですが、CSSで指定することもできます */
#corekara-original .trivia .trivia-frame .trivia-box:nth-child(1).is-animated {
  transition-delay: 0.2s; /* 最初のボックスは0.2秒遅れて開始 */
}
#corekara-original .trivia .trivia-frame .trivia-box:nth-child(2).is-animated {
  transition-delay: 0.4s; /* 2番目のボックスは0.4秒遅れて開始 */
}

#corekara-original .trivia .trivia-frame .trivia-box:nth-child(3).is-animated {
  transition-delay: 0.6s; /* 2番目のボックスは0.4秒遅れて開始 */
}