@charset "utf-8";
:root {
    --c_bk: #231815;
    --c_rd: #c7161d;
    --c_gy: #e5e5e6;
		--c_wh:#ffffff;
}

.p-notice-pickup {
	max-width: 860px;
	margin: 0 auto;
	padding: 50px 0;
	color: var(--c_bk);
	font-size: 16px;
	font-weight: 500;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Noto Sans JP', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Verdana;
	.sub-title {
		font-size: 112.5%;
		font-weight: 700;
	}
}
.p-notice-pickup-wrap {
	max-width: 750px;
	margin: 0 auto;
	.__ttl {
		text-align: center;
		font-size: 137.5%;
		font-weight: 700;
		line-height: 1.6;
		letter-spacing: 0.1em;
		margin-bottom: 50px;
		h2 {
			font-size: 122.7%;
			font-weight: 700;
		}
	}
	.__name {
		text-align: right;
		font-size: 112.5%;
		margin-bottom: 20px;
	}
	.__txt {
		font-size: 105%;
		line-height: 1.8;
		margin-bottom: 40px;
		.--underline {
			text-decoration: underline;
			letter-spacing: 0.05em;
			font-weight: 700;
		}
		strong {
			font-size: 121%;
			color: var(--c_rd);
		}
	}
	h3 {
		font-size: 87.5%;
		font-weight: 500;
		margin: 0 0 10px;
	}
}
.p-notice-pickup__cont {
	border: 1px solid var(--c_bk);
	padding: 35px;
	margin-bottom: 50px;
	dl {
		display: grid;
		grid-template-columns: 200px 1fr;
		gap: 10px 30px;
		font-size: 105%;
		font-weight: 700;
		letter-spacing: 0.01em;
		width: fit-content;
		margin: 0 auto;
		dt {
			background: var(--c_gy);
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 8px;
			font-size: 92.35%;
		}
		dd {
			padding: 5px 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.__price {
				white-space: nowrap;
				li {
					display: grid;
					grid-template-columns: 201px 1fr;
					align-items: center;
					gap: 10px;
					small {
						display: inline-block;
						font-size: 65%;
					}
					.--01 {
						display: flex;
						align-items: center;
						line-height: 1.2;
					}
					.--01 small {
						font-weight: 500;
					}
					span {
						display: inline-block;
						margin-right: .75em;
						font-size: 110%;
					}
				}
			}
		}
	}
	.note {
		max-width: 587px;
		margin: 10px auto 0;
		font-size: 12px;
	}
}

/*sp
---------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.p-notice-pickup {
		padding: 20px 0;
		font-size: 14px;
		.sub-title {
			font-size: 112.5%;
		}
	}
	.p-notice-pickup-wrap {
		.__ttl {
			font-size: 112.5%;
			margin-bottom: 25px;
			h2 {
				font-size: 105%;
			}
		}
		.__name {
			font-size: 100%;
			margin-bottom: 25px;
		}
		.__txt {
			font-size: 100%;
			margin-bottom: 40px;
			strong {
				font-size: 115%;
			}
		}
		h3 {
			font-size: 100%;
		}
	}
	.p-notice-pickup__cont {
		dl {
			grid-template-columns: repeat(1,1fr);
			gap: 7px;
			font-size: 115%;
			max-width: 550px;
			width: auto;
			dt {
				display: block;
				padding: 7px 10px;
				font-size: 92.35%;
			}
			dd {
				display: block;
				text-align: center;
				padding: 7px 3vw;
				.__price {
					white-space: nowrap;
					li {
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;
						gap: 1vw;
						padding: 3px 0;
						small {
							display: block;
							font-size: 85%;
							white-space: nowrap;
						}
						.--01 {
							display: flex;
							align-items: center;
							gap: 0 .1vw;
						}
						.--02 {
							display: flex;
							align-self: center;
							white-space: nowrap;
							margin-right: 0;
							margin-left: auto;
							small {
								line-height: 2.3;
							}
						}
						span {
							display: inline-block;
							margin-right: .75em;
							font-size: 110%;
						}
					}
				}
			}
		}
		.note {
			padding: 0 3vw;
			text-align: left;
			max-width: 550px;
		}
	}
}
@media screen and (max-width: 520px) {
	.p-notice-pickup__cont {
		padding: 3vw;
		dl {
			font-size: 3.2vw;
			dt {
				font-size: 110%;
			}
		}
		.note {
			font-size: 3.07vw;
		}
	}
}