/* CSS Document */

#pamphlet{
	& h2+div:not([id]){
		text-align: left;
		line-height: inherit;
		&>*+*{
			margin-top: 16px;
		}
		& ul{
			display: grid;
			grid-gap: 8px;
			padding-left: 0;
			& li{
				position: relative;
				list-style: none;
				text-indent: -1em;
				padding-left: 1em;
				&:before{
					content: "※";
					aspect-ratio: 1;
				}
			}
		}
	}
}

#pamphletNav{
	margin-top: clamp(48px, calc(64 / 1200* 100vw), 64px);
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px 24px;
	}
	& li{
		width: min(100%, 200px);
	}
	& a{
		display: grid;
		grid-template-columns: 1fr 12px;
		align-items: center;
		grid-gap: 16px;
		min-height: 56px;
		margin: auto;
		padding: 8px 24px;
		border: 1px solid var(--color-theme);
		border-radius: 12px;
		background: #fff;
		color: var(--color-theme);
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		&:after {
				content: "";
				aspect-ratio: 1;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 7"><path d="M0,0h8s-4,6.32-4,6.32L0,0Z"/></svg>') no-repeat center / contain;
		}
	}
}

#pamphletList{
	position: relative;
	display: grid;
	margin-top: clamp(48px, calc(64 / 1200* 100vw), 64px);
	& section{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 12px), 192px), 1fr));
		grid-gap: clamp(24px, calc(48 / 1200 * 100vw), 48px);
		}
	& section+section{
		margin-top: clamp(48px, calc(64 / 1200* 100vw), 64px);
		}
	& h3{
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 8px 1fr;
		grid-column-gap: 16px;
		align-items: center;
		padding: 8px 8px 8px 0;
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 1200 * 100vw), 20px);
		letter-spacing: 0.05em;
		border-top-right-radius: 20px;
		background: var(--color-gr);
		&:before {
			content: "";
			width: 4px;
			height: calc(100% + 16px);
			background: var(--color-theme);
		}
	}
	& dl{
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(figure)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1 / 1.414;
			margin-bottom: 8px;
			border-radius: 20px;
			background: var(--dummy);
			background-size: 50%;
		}
		& dt{
			font-weight: 700;
			font-size: clamp(14px, calc(16 / 576* 100vw), 16px);
		}
		& dd{
			display: contents;
			&:nth-of-type(2){
				position: relative;
				&:after{
					content: "在庫なし";
					width: 100%;
					height: auto;
					padding: 0.8em;
					background: var(--color-theme-bg);
					text-align: center;
					z-index: -1;
				}
				&:has(input){
					&>div{
						display: grid;
						grid-template-columns: auto auto;
						justify-content: center;
						align-items: center;
						&:before{
							content: "部数：";
						}
					}
					&:after{
						display: none;
					}
				}
			}
		}
		& input{
			width: 5em;
		}
	}
	& p{
/*		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-height: calc(1.65em * 2); */
		margin-bottom: 16px;
		color: #4d4d4d;
		font-size: clamp(12px, calc(14 / 576 * 100vw), 14px);
		overflow: hidden;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr 20px;
		align-items: center;
		grid-gap: 16px;
		width: min(100%, 200px);
		min-height: 40px;
		margin: auto;
		padding: 8px 16px;
		border: 1px solid #fff;
		border-radius: 50px;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.44,11.94c-.26-.26-.26-.68,0-.94s.68-.26.94,0l1.94,1.94V2.67c0-.37.3-.67.67-.67s.67.3.67.67v10.28s1.95-1.95,1.95-1.95c.25-.23.64-.23.9,0,.27.25.29.67.05.94l-2.14,2.14s0,0,0,0c-.78.78-2.05.78-2.83,0l-2.14-2.14ZM17.33,12.67c-.37,0-.67.3-.67.67v2.67c0,.37-.3.67-.67.67H4c-.37,0-.67-.3-.67-.67v-2.67c0-.37-.3-.67-.67-.67-.37,0-.67.3-.67.67v2.67c0,1.1.9,2,2,2h12c1.1,0,2-.9,2-2v-2.67c0-.37-.3-.67-.67-.67Z"/></svg>') no-repeat center / contain;
		}
	}
	& figure{
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 8px;
		& img{
			aspect-ratio: 1 / 1.414;
			border-radius: 20px;
			object-fit: contain;
		}
	}
}

#request{
	grid-column: 2;
	display: grid;
	justify-items: center;
	grid-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	padding: clamp(24px, calc(48 / 1200 * 100vw), 48px) 0 clamp(96px, calc(120 / 1200 * 100vw), 120px);
	& a{
		display: grid;
		grid-template-columns: 1fr 20px;
		align-items: center;
		grid-gap: 16px;
		width: min(100%, 320px);
		min-height: 56px;
		padding: 8px 24px;
		border: 1px solid var(--color-theme);
		border-radius: 8px;
		background: #fff;
		color: var(--color-theme);
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M17.94,9.8s-.01-.02-.02-.03c-.05-.08-.12-.13-.21-.16l-8.93-4.4c-.06-.03-.12-.04-.19-.04-.08,0-.15.02-.22.06-.12.08-.2.21-.2.36v3.94s0,.04.01.05H2.42c-.23,0-.42.19-.42.42,0,.23.19.42.42.42h13.36s-6.77,3.32-6.77,3.32v-1.91c0-.23-.19-.42-.42-.42s-.42.19-.42.42v2.59c0,.15.08.28.2.36.12.08.28.08.41.02l8.98-4.41c.1-.05.16-.13.2-.22,0,0,0,0,0,0,.02-.05.03-.1.03-.15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01,0-.02,0-.04,0-.07-.02-.11,0-.03-.02-.05-.03-.07ZM9.02,9.52v-3.26s6.73,3.32,6.73,3.32h-6.74s.01-.04.01-.05Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transition: transform 0.2s ease-out;
		}
	}
}