/*---------------------------------------------------- 無料ダウンロードページ ---*/
/* === 使用上の注意 === */
.caution-box {
	margin: 3em 6em 5em;
	padding: 1em;
	background: #b0e0e6;
	border-radius: 10px;
}
.article .caution-box > h2 {
	margin: 0;
	padding: 1em 0;
	text-align: center;
	border: none;
	font-weight: bold;
	font-size: 1.2em;
	background-color: transparent;
}
.caution-box > ul {
	margin: 0;
	padding: 0;
}
.caution-box > ul li {
	margin: 1em;
	padding: 0 0 0 1.5rem;
	position: relative;
	list-style: none;
	font-size: 1em;
	&:before {
		content: "";
		position: absolute;
		top: .35rem;
		left: 0;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		border: 1px solid #333;
	}
}
/* === FREE download image link === */
.pdf-imagelink {
	width: 100%;
	margin: 0 auto; /*中央*/
}
.pdf-imagelink__image {
	width: 100%;
}
.pdf-imagelink__anchor {
	display: block;
	position: relative;
	margin: 5rem 2rem 3rem;
}
.pdf-imagelink__anchor::before {
	content: "DOWNLOAD";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	color: #f1f1f1;
	font-size: 1.5em;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	font-weight: bold;
	border-radius: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 1s ease-in-out;
}
.pdf-imagelink__anchor:hover::before {
	opacity: 1;
}
/* === FREE PDF 概要 === */
.free-refill-info {
	margin: 0 1.5em;
}
.free-refill-info .free-refill-info__title {
	position: relative;
	padding: 0 1em .8em;
	margin-bottom: 1em;
	border: none;
}
.free-refill-info .free-refill-info__title::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	content: '';
	background-image: repeating-linear-gradient(-45deg, #333, #333 1px, transparent 2px, transparent 5px);
	background-size: 7px 7px;
	backface-visibility: hidden;
}
.free-refill-info .free-refill-info__list {
	margin: 0;
	padding: 0 1em;
	list-style: none;
}
.free-refill-info .free-refill-info__item {
	display: flex;
	margin-bottom: .3em;
	line-height: 2;
}
.free-refill-info .free-refill-info__item::before {
	content: "・";
	flex: 0 0 auto;
	margin-right: .5em;
}

/* === FREE PDF download link box === */
.pdf-download {
	margin: 2em 2em;
	max-width: 100%;
	border: 1px solid #3f3f3f;
	border-radius: 10px;
	overflow: hidden;
	box-sizing: border-box;
	container-type: inline-size;
}
.pdf-download a.pdf-download__link {
	display: flex;
	gap: 20px;
	padding: 1.2em;
	color: #3f3f3f;
	text-decoration: none;
	background: none;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	transition: background-color 1s ease;
}
/* icon（幅広いときは右線） */
.pdf-download a.pdf-download__link::before {
	content: "\f1c1";
	font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 1.5em;
	line-height: 2;
	color: gray;
	padding: 0 1.2em 0 .5em;
	border-bottom: none;
	border-right: 1px solid #ddd;
	flex: 0 0 auto;
}
/* button（幅広いときは固定幅140px） */
.pdf-download .pdf-download__button {
	display: block;
	padding: .8em 1em;
	text-align: center;
	border-radius: 12px;
	color: #fefefe;
	background: #3f3f3f;
	font-size: .9em;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	width: auto;
	flex: 0 0 140px;
	box-sizing: border-box;
	transition: transform 0.3s ease;
}
/*【コンテナクエリ】パーツの横幅が 400px 未満*/
@container (max-width: 399px) {
	.pdf-download a.pdf-download__link {
		flex-direction: column;
		align-items: stretch;
	}
	/* アイコン（狭いときは下線） */
	.pdf-download a.pdf-download__link::before {
		padding-bottom: .8rem;
		padding-right: 0;
		line-height: 1;
		border-bottom: 1px solid #ddd;
		border-right: none;
	}
	/* ボタン（狭いときは横幅100%） */
	.pdf-download .pdf-download__button {
		width: 100%;
		flex: none;
	}
}
/* 共通スタイル */
.pdf-download .pdf-download__meta {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	flex: 1;
	text-align: left;
}
.pdf-download .pdf-download__filename {
	font-size: 1em;
	font-weight: 600;
	word-break: break-all;
	line-height: 1.4;
}
.pdf-download .pdf-download__size {
	color: gray;
	font-size: .7em;
	margin-top: 0.5em;
}
.pdf-download .pdf-download__tag {
	color: gray;
	font-size: .8em;
	line-height: 1;
}
/* link -focus-visible- */
a.pdf-download__link:focus-visible {
	outline: 2px solid #3f3f3f;
	outline-offset: -2px;
	border-radius: 10px;
	background: var(--link-bgcolor);
}
/* link -hover- */
@media (any-hover: hover) {
	a.pdf-download__link:hover {
		background: var(--link-hover-bgcolor);
	}
	.pdf-download__button:hover {
		transform: translateY(2px);
	}
}

/*---------------------------------------------------- 有料PDF紹介ページ ---*/
/* === SHOP PDF download link box === */
.shop-product {
	border: 1px solid #3f3f3f;
	border-radius: 10px;
	overflow: hidden;
	margin: 1.5em .5em;
}
.shop-product__link {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	padding: .5em 1em;
	text-decoration: none;
	transition: background-color 1s ease;
}
.shop-product__image {
	flex-basis: 120px;
	display: flex;
	align-items: center;
	margin: .5em auto;
}
.shop-product__image img {
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 10px;
}
.shop-product__info {
	flex: 1 1 195px;
	margin: .5em 0;
	display: flex;
	flex-direction: column;
}
.shop-product__title {
	color: #3f3f3f;
	flex-grow: 1;
}
.shop-product__data {
	display: block;
	font-size: .8em;
	color: gray;
	margin-bottom: 10px;
}
.shop-product__button {
	padding: .5em;
	background: #3f3f3f;
	border-radius: 10px;
	text-align: center;
	color: #fefefe;
	font-size: .8em;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	transition: transform 0.3s ease;
}
/* link -focus-visible- */
.shop-product__link:focus-visible {
	outline: 2px solid #3f3f3f;
	outline-offset: -2px;
	border-radius: 10px;
	background: var(--link-bgcolor);
}
/* link -hover- */
@media (any-hover: hover) {
	.shop-product__link:hover {
		background: var(--link-hover-bgcolor);
	}
	.shop-product__button:hover {
		transform: translateY(2px);
	}
}