/* ==========================================
                    キャッチコピー
============================================ */
#corekara-original .goingout-frame {
	padding: 400px 0 10px 0;
    background-color:#fff3f3;
}

#corekara-original .bg--primary5{background-color:#78a3a0;}

#corekara-original .see_more5 a:hover {
  padding: 10px 100px;
  color: #ffffff;
  background: #78a3a0;
	border: 1px solid #ffffff;}

@media (max-width: 767px) {
#corekara-original .goingout-frame {
	padding: 80% 0 1% 0;
	}
}

#corekara-original .goingout-frame .goingout-box .goingout-title {
	font-size: 36px;
	font-weight: bold;
	line-height: 1.8;
	color: #20B2AA;
}
#corekara-original .goingout-box p {
    margin-top: 10px;
	margin-bottom: 50px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
}
@media (max-width: 767px) {
#corekara-original .goingout-box p {
	margin-bottom: 10%;
	font-size: 15px;
	}
}
#corekara-original .goingout-box {
	width: 1000px;
	margin: 0 auto;
	text-align:
	 center;
}
@media (max-width: 767px) {
#corekara-original .goingout-box {
	width: 100%;
	padding: 0 1%;
	}
#corekara-original .goingout-box img {
	width: 70%;
}
}

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

#corekara-original .trivia {
  margin: 0 auto;
  padding: 50px 0;
  background: repeating-linear-gradient(-45deg, #f9e1d0, #f9e1d0 3px, #f7d4d1 3px, #f7d4d1 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: #20B2AA;
}

#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秒遅れて開始 */
}