/*---------------------------------------------------- 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-bgcolor);
	}
	.shop-product__button:hover {
		transform: translateY(2px);
	}
}


/* FREE download image link */
.pdf-image {
	width: 100%;
	margin: 0 auto; /*中央*/
}
.pdf-image__img {
	width: 100%;
}
.pdf-image__link {
	display: block;
	position: relative;
	margin: 5rem 2rem 3rem;
}
.pdf-image__link::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-image__link:hover::before {
	opacity: 1;
}
/*---------------------------------------------------- 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: "\f56d";
	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-bgcolor);
	}
	.pdf-download__button:hover {
		transform: translateY(2px);
	}
}