@charset "UTF-8";
/*----------------------------------------
css -> page -> printlist.css
 モバイルファースト
----------------------------------------*/
.contentsWrapper {
	padding-bottom: calc(50 / 14 * 1em);
}

/* 刺繍加工
---------------------------------------- */
.printWrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(373px, 1fr));
	gap: 20px;
	margin-top: calc(34 / 16 * 1em);
}

.printSection {
	display: flex;
	flex-direction: column;
}

.printBox {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.printContainer {
	border-radius: 4px;
	padding: 29px 20px 64px;
	flex: 1;
}

.printContainer01 {
	border: 2px dashed var(--mainBgColor);
}

.printContainer02 {
	border: 2px solid var(--mainBgColor);
	box-shadow: 3px 3px #7cb9ff;
}

.printHeader {
	/* border-bottom: 1px solid #b0b0b0; */
}

.printDetail {
	text-align: right;
	padding-bottom: calc(18 / 16 * 1em);
	border-bottom: 1px solid #b0b0b0;
	margin: -1.5em 0.5em 0;
}

.printDetailLink {
	font-size: calc(14 / 16 * 1rem);
	font-weight: 500;
	color: var(--mainBgColor);
	display: inline-flex;
	align-items: center;
}

.printDetailLink::after {
	content: "";
	border-top: 2px solid var(--mainBgColor);
	border-right: 2px solid var(--mainBgColor);
	display: inline-block;
	transform: rotate(45deg);
	width: 7px;
	height: 7px;
	margin-left: 0.5em;
}

.printBody {
	padding: calc(24 / 16 * 1em) 0 0;
	/* border-top: 1px solid #b0b0b0; */
}

.printList > li {
	display: flex;
	counter-increment: number;
	padding: 0 1em;
}

.printList > li + li {
	margin-top: calc(28 / 16 * 1em);
}

.printListText {
	font-size: calc(14 / 16 * 1rem);
	letter-spacing: 0.02em;
	line-height: calc(24 / 16);
	padding-top: 0.5em;
	flex: 1;
}

.printListText > span {
	font-weight: 700;
	color: var(--mainBgColor);
}

.printListText + .printPointWrapper {
	margin-right: calc(12 / 16 * 1em);
}

.printPointWrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: calc(56 / 16 * 1em);
	height: calc(56 / 16 * 1em);
	background-color: rgb(211 232 255/ 0.5);
	border-radius: 50%;
	flex-shrink: 0;
	order: -1;
}

.printPoint {
	font-size: calc(10 / 16 * 1rem);
	font-weight: 700;
	font-family: "Zen Kaku Gothic Antique", serif;
	color: #1464c2;
	line-height: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.printPoint::after {
	content: counter(number, decimal-leading-zero);
	font-size: calc(20 / 10 * 1em);
	font-weight: inherit;
	font-family: inherit;
	line-height: inherit;
}

.pageLinkWrapper {
	text-align: center;
	position: relative;
	z-index: 1;
	margin-top: -1em;
}

.pageLink {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	padding: calc(9 / 16 * 1em) calc(64 / 16 * 1em) calc(16 / 16 * 1em);
}

.pageLink::before {
	content: "";
	background-image: url("../../images/printlist/pageLink.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.pageLink:after {
	content: "";
	clip-path: polygon(100% 0, 0 0, 50% 78%);
	background-color: var(--mainBgColor);
	display: block;
	width: 14px;
	height: 6px;
	margin-top: 0.5em;
	transition: opacity 0.3s;
}

.pageLink > span {
	font-size: 1rem;
	font-family: "Zen Kaku Gothic Antique", serif;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: opacity 0.3s;
}

@media (hover: hover) and (pointer: fine) {
	.pageLink:hover {
		opacity: 1;
	}

	.pageLink:hover > span {
		opacity: 0.7;
	}

	.pageLink:hover:after {
		opacity: 0.7;
	}
}

/* 加工一覧
---------------------------------------- */
.articleList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 20px;
}

.articleContainer {
	display: flex;
	flex-direction: column;
	padding: 30px;
	box-shadow: 0px 0px 3px #00000030;
}

.articleBody {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.articleBody > h3 {
	font-size: calc(24 / 16 * 1rem);
	font-family: "Zen Kaku Gothic Antique", serif;
	font-weight: 700;
}

.articleBody > p {
	line-height: calc(24 / 16);
	margin-bottom: calc(24 / 16 * 1em);
	margin-top: 0.5em;
}

.articleBody + .articleImg {
	margin-bottom: calc(10 / 16 * 1em);
}

.articleLink {
	display: flex;
	justify-content: center;
	margin-top: auto;
}

.articleImg {
	order: -1;
}

.articleImg > img {
	width: 100%;
}

.linkWrapper {
	display: flex;
	justify-content: center;
	margin-top: calc(40 / 16 * 1em);
}

/*===============================================
●画面の横幅が770px以上(PC)
===============================================*/
@media not all and (max-width: 770px) {
	.contentsWrapper {
		padding-bottom: calc(100 / 16 * 1em);
	}

	.subTitle {
		font-size: calc(20 / 16 * 1rem);
	}

	/* MARKING LAB Annexでできる加工一覧
	---------------------------------------- */
	.printListText {
		font-size: 1rem;
	}

	/* 加工一覧
	---------------------------------------- */
	.articleBody > h3 {
		font-size: calc(24 / 16 * 1rem);
		font-family: "Zen Kaku Gothic Antique", serif;
	}
}