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

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

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

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

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