@charset "UTF-8";

/* ===============================
	製品共通スタイル
=============================== */
.bold {
	font-weight: bold;
}

.red {
	color: var(--sharp-red);
}

/* アロータイトル・左 */
.has-arrow-left {
	padding-left: 1em;
	background: url('/assets/common/images/chevron-right-solid.svg') no-repeat left 0 top .4em / auto .9em;
}

/* 左余白 */
.p-left {
	padding-left: 1em;

}

#campaign .flex-container {
	font-size: 1.4rem;
	border-bottom: dashed 1px #ddd;
	padding-bottom: 3rem;
}

#campaign .flex-container .text {

	margin-top: 1.6rem;
}

#campaign .flex-container .main-text {
	margin-top: 1.6rem;
	line-height: 1.6;
}

/* ====================================
	カラー設定
 ==================================== */

.sub-section .sub-title {
	padding: 0.2em 0.5em;
	background: var(--white-gray);
}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

	/* キャンペーン */
	#campaign .flex-container {
		margin-top: 3rem;
	}

	#campaign .flex-container:first-of-type {
		margin-top: 2rem;
	}

	#campaign .flex-container .ttl {
		margin-top: 0.5em;
		font-size: 1.8rem;
		font-weight: 600;
	}

	#campaign .flex-item-img,
	#campaign .flex-item-text {
		margin-top: 2rem;
	}

	#campaign .flex-item-img:first-of-type,
	#campaign .flex-item-text:first-of-type {
		padding-top: 4rem;
		margin-top: 3rem;
	}

	#campaign .flex-container .flex-item-img {
		padding: 0 2%;
		margin-top: 0rem;
	}

	ul.star {
		margin-top: 2rem;
	}
}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {

	/* フレックスコンテナ */
	.flex-container {
		display: flex;
		flex-wrap: wrap;
	}

	/* キャンペーン */
	#campaign {
		padding-top: 7rem;
		padding-bottom: 2rem;
	}

	#campaign .sub-title-container {
		padding-top: 5rem;
		border-top: solid 1px #d9d9d9;
	}

	#campaign .flex-container {
		margin-bottom: 3rem;
	}

	#campaign .flex-container .ttl {
		margin-top: 0;
		font-size: 1.8rem;
		font-weight: 600;
	}

	#campaign .flex-container .text {
		margin-top: 2rem;
		font-size: 1.4rem;
	}

	#campaign .flex-container .text-small {
		font-size: 0.9em;
	}

	#campaign .flex-container .flex-item-img {
		width: 29%;
	}

	#campaign .flex-container .flex-item-text {
		width: 67%;
		margin-left: 3.5%;
	}

	#campaign .flex-container .flex-item:nth-of-type(3n-2) {
		margin-left: 0;
	}

	#campaign .flex-container .flex-item:nth-of-type(-n+3) {
		margin-top: 0;
	}
}