@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;
}

.name {
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
	margin-top: 0.6rem;
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@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;
	}

	#sub02 .small-text {
		margin-top: 0.4rem;
	}

	#sub02 .flex-container.half.sp-col2,
	#sub03 .flex-container.half.sp-col2,
	#sub04 .flex-container.half.sp-col2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#sub02 .flex-container.half>.flex-item,
	#sub03 .flex-container.half>.flex-item,
	#sub04 .flex-container.half>.flex-item {
		width: 47%;
		margin-top: 0;
	}

	#sub02 .name,
	#sub03 .name,
	#sub04 .name {
		font-size: 1.2rem;
	}

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

	#sub02 ul.list-figures.col2.step li.has-arrow::before {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 12%;
		background: url(/edictionary/products/common/images/caret-right-solid.svg) no-repeat;
		background-size: 20%;
		margin: 0 0.5em 0 0;
		top: 50%;
		left: 30%;
		transform: translate(-50%, -50%);
	}

	ul.list-figures.col5.has-frame li.large.yamakei .img {
		padding: 22% 10%;
	}
}

/* ====================================
	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 .small-text {
		margin-top: 1rem;
	}

	#sub02 .name,
	#sub03 .name,
	#sub04 .name {
		font-size: 1.4rem;
	}

	#sub02 .flex-container.half,
	#sub03 .flex-container.half,
	#sub04 .flex-container.half {
		align-items: center;
		justify-content: center;
	}

	#sub02 .flex-container.half>.flex-item,
	#sub03 .flex-container.half>.flex-item,
	#sub04 .flex-container.half>.flex-item {
		width: 45%;
		padding: 0 1%;
	}

	#sub03 ul.list-figures.col2 li {
		width: 45%;
		margin-top: 1em;
	}

	ul.list-figures.col5.has-frame li.large .img {
		padding: 30.7% 4%;
	}

	ul.list-figures.col5.has-frame li.large.yamakei .img {
		padding: 22% 10%;
	}

	#sub02 ul.list-figures.col2.step li.has-arrow::before {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 38px;
		background: url(/edictionary/products/common/images/caret-right-solid.svg) no-repeat;
		background-size: 15%;
		margin: 0 0.5em 0 0;
		top: 50%;
		left: 36%;
		transform: translate(-50%, -50%);
	}
}

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

	ul.list-figures.tab-col3 li.large {
		width: 30.66%;
	}
}

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

	ul.list-figures.col5.has-frame li.large .img {
		padding: 30.7% 4%;
	}
}