@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
.num-text .num {
	display: inline-block;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	margin-right: 0.6rem;
	line-height: 1.4;
}





/* ====================================
	プラグイン・アニメーション設定
 ==================================== */


/* アニメーション */
#sub02 .anime-item {
	padding-top: 175%;
	background-image: url(images/sub02-1.jpg);
	background-size: 300% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	animation: parapara-3koma 1.8s steps(3) infinite;
}

#sub04 .anime-item {
	padding-top: 104%;
	background-image: url(images/sub04-1.jpg);
	background-size: 400% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	animation: parapara-4koma 1.8s steps(4) infinite;
}


/* #sub04 .anime-item {
	padding-top: 104%;
	background-image: url(images/sub04-1.jpg);
	background-size: 300% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	animation: parapara-3koma 1.8s steps(3) infinite;
} */



/* パラパラ アニメーション */
@keyframes parapara-2koma {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 200% 0;
	}
}

@keyframes parapara-3koma {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 150% 0;
	}
}

@keyframes parapara-4koma {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 133.3333333% 0;
	}
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {
	.pc-only {
		display: none;
	}



	.has-arrow-container .img-arrow {
		position: absolute;
		top: -4rem;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 1.6em;
	}

	.has-arrow-container .flex-container>.flex-item:last-of-type {
		margin-top: 8rem;
		position: relative;
	}



	.small-text.num-text .num {
		padding-left: 0.5rem;
		height: 16px;
		width: 16px;
		font-size: 1.1rem;
	}

	.small-text.num-text .text {
		font-size: 1.2rem;

	}

	.small-text.num-text {
		font-size: 1.2rem;
		line-height: 1.6;
	}


	.flex-container.half.sp-col2 {
		display: flex;
		justify-content: space-between;
	}


}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 768px) {
	.btn-arrow {
		margin: 0 auto;
		line-height: 1.4;
	}

	.has-arrow-container {
		position: relative;
	}

	.has-arrow-container .img-arrow {
		position: absolute;
		top: 44%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 12%;
	}

	#sub02 .flex-container.half>.flex-item {
		padding: 0 4%;
	}

	ul.list-figures.col3.step li.has-arrow::before {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 35px;
		background: url(/edictionary/products/common/images/allow.svg) no-repeat;
		background-size: 6%;
		margin: 0 0.5em 0 0;
		top: 44%;
		left: 44%;
		transform: translate(-50%, -50%);
	}

	/* #sub06 .s-img {
		width: 60%;
	} */

}

/* ====================================
	タブレット、印刷専用スタイル
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.pc-only {
		display: none;
	}
}

/* ====================================
	PC大画面専用スタイル
===================================== */
@media only screen and (min-width: 1200px) {
	.tab-only {
		display: none;
	}
}