/* フッター装飾の基準位置。ヘッダーのpositionはSWELL追尾を壊すため上書きしない */
.design-switcher.ds-footer-wave .l-footer,
.design-switcher.ds-footer-curve .l-footer,
.design-switcher.ds-footer-city .l-footer {
isolation: isolate;
}

/**
 * Design Switcher v0.8.2
 */

.design-switcher {
	--ds-wave-pc-height: 72px;
	--ds-wave-sp-height: 36px;
	--ds-curve-pc-height: 68px;
	--ds-curve-sp-height: 40px;
	--ds-city-pc-height: 88px;
}

.design-switcher.ds-header-wave .l-header,
.design-switcher.ds-header-curve .l-header,
.design-switcher.ds-header-city .l-header {
	background-color: var(--ds-header-color);
}

.design-switcher.ds-footer-wave .l-footer,
.design-switcher.ds-footer-curve .l-footer,
.design-switcher.ds-footer-city .l-footer {
	background-color: var(--ds-footer-color);
}

/* フッター上部の装飾と本文が近くなりすぎないように、装飾用の余白を確保 */
.design-switcher.ds-footer-wave .l-footer,
.design-switcher.ds-footer-curve .l-footer {
	padding-top: max(76px, var(--ds-wave-pc-height));
}

.design-switcher.ds-footer-curve .l-footer {
	padding-top: max(94px, var(--ds-curve-pc-height));
}

.design-switcher.ds-footer-city .l-footer {
	padding-top: 50px;
}

.design-switcher.ds-header-wave .l-header::before,
.design-switcher.ds-header-curve .l-header::before,
.design-switcher.ds-header-city .l-header::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 4px;
	background: var(--ds-accent-color);
	z-index: 3;
	pointer-events: none;
}

.design-switcher.ds-header-wave .l-header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: var(--ds-wave-pc-height);
	background: var(--ds-soft-bg);
	-webkit-mask-image: var(--ds-svg-wave-header-pc);
	mask-image: var(--ds-svg-wave-header-pc);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	z-index: 4;
	pointer-events: none;
}

.design-switcher.ds-footer-wave .l-footer::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 100%;
	height: var(--ds-wave-pc-height);
	background: var(--ds-soft-bg);
	-webkit-mask-image: var(--ds-svg-wave-pc);
	mask-image: var(--ds-svg-wave-pc);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transform: scaleY(-1);
	z-index: 4;
	pointer-events: none;
}

.design-switcher.ds-header-curve .l-header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: var(--ds-curve-pc-height);
	background: var(--ds-soft-bg);
	-webkit-mask-image: var(--ds-svg-curve-pc);
	mask-image: var(--ds-svg-curve-pc);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	z-index: 4;
	pointer-events: none;
}

.design-switcher.ds-footer-curve .l-footer::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 100%;
	height: var(--ds-curve-pc-height);
	background: var(--ds-soft-bg);
	-webkit-mask-image: var(--ds-svg-curve-pc);
	mask-image: var(--ds-svg-curve-pc);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transform: scaleY(-1);
	z-index: 4;
	pointer-events: none;
}

@media (min-width: 768px) {
	.design-switcher.ds-header-city .l-header {
		min-height: var(--ds-city-pc-height);
	}

	.design-switcher.ds-header-city .l-header::after {
		content: "";
		position: absolute;
		left: 4.5%;
		bottom: 8px;
		width: 28%;
		height: 54px;
		background: var(--ds-city-line-color);
		-webkit-mask-image: var(--ds-svg-city-left);
		mask-image: var(--ds-svg-city-left);
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: left bottom;
		mask-position: left bottom;
		z-index: 2;
		pointer-events: none;
	}

	.design-switcher.ds-header-city .l-header .l-header__inner::after,
	.design-switcher.ds-header-city .l-header .c-headLogo::after,
	.design-switcher.ds-header-city .l-header .l-header__logo::after {
		content: "";
		position: absolute;
		right: 4.5%;
		bottom: 8px;
		width: 28%;
		height: 54px;
		background: var(--ds-city-line-color);
		-webkit-mask-image: var(--ds-svg-city-right);
		mask-image: var(--ds-svg-city-right);
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: right bottom;
		mask-position: right bottom;
		z-index: 2;
		pointer-events: none;
	}

	.design-switcher.ds-header-city .l-header .l-header__inner,
	.design-switcher.ds-header-city .l-header .c-headLogo,
	.design-switcher.ds-header-city .l-header .l-header__logo {
		position: relative;
	}
}

.design-switcher.ds-footer-city .l-footer::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -48px;
	width: min(520px, 58vw);
	height: 58px;
	transform: translateX(-50%);
	background: var(--ds-city-line-color);
	-webkit-mask-image: var(--ds-svg-city-left);
	mask-image: var(--ds-svg-city-left);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	z-index: 3;
	pointer-events: none;
}

@media (max-width: 767px) {

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 58px;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 74px;
	}

	.design-switcher.ds-footer-city .l-footer {
		padding-top: 58px;
	}

	.design-switcher {
		--ds-wave-pc-height: var(--ds-wave-sp-height);
		--ds-curve-pc-height: var(--ds-curve-sp-height);
	}

	.design-switcher.ds-header-wave .l-header::after {
		height: var(--ds-wave-sp-height);
		-webkit-mask-image: var(--ds-svg-wave-header-sp);
		mask-image: var(--ds-svg-wave-header-sp);
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		height: var(--ds-wave-sp-height);
		-webkit-mask-image: var(--ds-svg-wave-sp);
		mask-image: var(--ds-svg-wave-sp);
	}

	.design-switcher.ds-header-curve .l-header::after {
		height: var(--ds-curve-sp-height);
		-webkit-mask-image: var(--ds-svg-curve-sp);
		mask-image: var(--ds-svg-curve-sp);
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		height: var(--ds-curve-sp-height);
		-webkit-mask-image: var(--ds-svg-curve-sp);
		mask-image: var(--ds-svg-curve-sp);
	}

	.design-switcher.ds-header-city .l-header::after,
	.design-switcher.ds-header-city .l-header .l-header__inner::after,
	.design-switcher.ds-header-city .l-header .c-headLogo::after,
	.design-switcher.ds-header-city .l-header .l-header__logo::after {
		display: none;
	}

	.design-switcher.ds-footer-city .l-footer::before {
		content: "";
		position: absolute;
		left: 7%;
		top: -40px;
		width: 34%;
		height: 40px;
		transform: none;
		background: var(--ds-city-line-color);
		-webkit-mask-image: var(--ds-svg-city-left);
		mask-image: var(--ds-svg-city-left);
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: left bottom;
		mask-position: left bottom;
	}

	.design-switcher.ds-footer-city .l-footer::after {
		content: "";
		position: absolute;
		right: 7%;
		top: -40px;
		width: 34%;
		height: 40px;
		background: var(--ds-city-line-color);
		-webkit-mask-image: var(--ds-svg-city-right);
		mask-image: var(--ds-svg-city-right);
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: right bottom;
		mask-position: right bottom;
		z-index: 3;
		pointer-events: none;
	}
}

.design-switcher.ds-debug .l-header,
.design-switcher.ds-debug .l-footer {
	outline: 2px dashed rgba(255, 0, 0, .35);
}

/* =========================================================
 * v0.3.2 wave pattern refinement
 * - v0.2.9系をベースに、波の凹凸を見える形に調整
 * - 茶色の細線が出ないよう、境界に深めに食い込ませる
 * - スマホはPCより細めを維持しつつ、下辺の波感を強める
 * - 追尾ヘッダーは維持
 * ======================================================= */

.design-switcher {
	--ds-wave-pc-fill-height: 42px;
	--ds-wave-sp-fill-height: 18px;
}

.design-switcher.ds-header-wave .l-header {
	background-color: var(--ds-header-color) !important;
	margin-bottom: 0 !important;
	overflow: visible;
}

@media (max-width: 767px) {
	html:has(body.design-switcher.ds-header-wave) {
		background-color: var(--ds-header-color);
	}
	body.design-switcher.ds-header-wave {
		background-color: var(--ds-header-color);
	}
}

.design-switcher.ds-header-wave .l-header::after,
.design-switcher.ds-footer-wave .l-footer::before {
	background-image: none !important;
	background-color: var(--ds-soft-bg) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-size: 100% 100% !important;
	mask-size: 100% 100% !important;
}

@media (min-width: 768px) {
	.design-switcher.ds-header-wave .l-header::after {
		content: "";
		display: block !important;
		position: absolute;
		left: 0;
		top: auto !important;
		bottom: -21px !important;
		width: 100%;
		height: var(--ds-wave-pc-fill-height) !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-pc) !important;
		mask-image: var(--ds-svg-wave-fill-pc) !important;
		z-index: 40;
		pointer-events: none;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-wave .l-header::after {
		content: "";
		display: block !important;
		position: absolute;
		left: 0;
		top: auto !important;
		bottom: -9px !important;
		width: 100%;
		height: var(--ds-wave-sp-fill-height) !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-sp) !important;
		mask-image: var(--ds-svg-wave-fill-sp) !important;
		z-index: 40;
		pointer-events: none;
	}
}

.design-switcher.ds-footer-wave .l-footer {
	background-color: var(--ds-footer-color) !important;
	padding-top: 48px !important;
	overflow: visible;
}

.design-switcher.ds-footer-wave .l-footer::before {
	content: "";
	display: block !important;
	position: absolute;
	left: 0;
	top: -21px !important;
	width: 100%;
	height: var(--ds-wave-pc-fill-height) !important;
	background-color: var(--ds-soft-bg) !important;
	-webkit-mask-image: var(--ds-svg-wave-fill-pc) !important;
	mask-image: var(--ds-svg-wave-fill-pc) !important;
	transform: scaleY(-1);
	transform-origin: center center;
	z-index: 40;
	pointer-events: none;
}

@media (max-width: 767px) {
	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 38px !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -9px !important;
		height: var(--ds-wave-sp-fill-height) !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-sp) !important;
		mask-image: var(--ds-svg-wave-fill-sp) !important;
		transform: scaleY(-1);
	}
}

/* =========================================================
 * v0.3.3 wave fine-tuning
 * - ヘッダー白帯を少し細くして重たさを軽減
 * - フッター、特にスマホ側の波感を一段だけ強める
 * - 茶色の細線を再発させない範囲で上下差を微調整
 * ======================================================= */

.design-switcher {
	--ds-wave-pc-header-fill-height: 34px;
	--ds-wave-sp-header-fill-height: 14px;
	--ds-wave-pc-footer-fill-height: 40px;
	--ds-wave-sp-footer-fill-height: 18px;
}

@media (min-width: 768px) {
	.design-switcher.ds-header-wave .l-header::after {
		bottom: -17px !important;
		height: var(--ds-wave-pc-header-fill-height) !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-pc) !important;
		mask-image: var(--ds-svg-wave-fill-header-pc) !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -20px !important;
		height: var(--ds-wave-pc-footer-fill-height) !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-footer-pc) !important;
		mask-image: var(--ds-svg-wave-fill-footer-pc) !important;
	}

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 46px !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-wave .l-header::after {
		bottom: -7px !important;
		height: var(--ds-wave-sp-header-fill-height) !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-sp) !important;
		mask-image: var(--ds-svg-wave-fill-header-sp) !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -9px !important;
		height: var(--ds-wave-sp-footer-fill-height) !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-footer-sp) !important;
		mask-image: var(--ds-svg-wave-fill-footer-sp) !important;
	}

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 42px !important;
	}
}


/* =========================================================
 * v0.3.5 result fix
 * - v0.3.4で弱くなったヘッダーの凹凸を戻す
 * - PC/スマホのフッター波だけを一段強める
 * - 茶色の細線が出ないようオーバーラップは維持
 * ======================================================= */
@media (min-width: 768px) {
	.design-switcher.ds-header-wave .l-header::after {
		bottom: -16px !important;
		height: 32px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-pc) !important;
		mask-image: var(--ds-svg-wave-fill-header-pc) !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -21px !important;
		height: 42px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-footer-pc) !important;
		mask-image: var(--ds-svg-wave-fill-footer-pc) !important;
	}

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 47px !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-wave .l-header::after {
		bottom: -6px !important;
		height: 13px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-sp) !important;
		mask-image: var(--ds-svg-wave-fill-header-sp) !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -10px !important;
		height: 20px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-footer-sp) !important;
		mask-image: var(--ds-svg-wave-fill-footer-sp) !important;
	}

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 43px !important;
	}
}


/* =========================================================
 * v0.3.6 visible wave correction
 * - これまで見た目に差が出なかったため、SVGの山谷差を明確に変更
 * - ヘッダーは白帯を太くしすぎず、波の輪郭だけ強める
 * - フッターはPC/スマホとも波感をはっきり出す
 * - 追尾ヘッダーは維持
 * ======================================================= */

@media (min-width: 768px) {
	.design-switcher.ds-header-wave .l-header::after {
		bottom: -18px !important;
		height: 36px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-pc) !important;
		mask-image: var(--ds-svg-wave-fill-header-pc) !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -23px !important;
		height: 46px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-footer-pc) !important;
		mask-image: var(--ds-svg-wave-fill-footer-pc) !important;
	}

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 50px !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-wave .l-header::after {
		bottom: -7px !important;
		height: 14px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-sp) !important;
		mask-image: var(--ds-svg-wave-fill-header-sp) !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -12px !important;
		height: 24px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-footer-sp) !important;
		mask-image: var(--ds-svg-wave-fill-footer-sp) !important;
	}

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 44px !important;
	}
}


/* =========================================================
 * v0.3.7 stronger wave result
 * - PCヘッダーの白帯を少し細くしつつ、山谷差を見える形に戻す
 * - PCフッターは凹凸を一段強めて、波感を出す
 * - スマホヘッダーは太く見えすぎないよう微調整
 * - スマホフッターは凹凸を少し強める
 * - 茶色の地が出ないようオーバーラップは維持
 * ======================================================= */

@media (min-width: 768px) {
	.design-switcher.ds-header-wave .l-header::after {
		bottom: -15px !important;
		height: 30px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-pc) !important;
		mask-image: var(--ds-svg-wave-fill-header-pc) !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -22px !important;
		height: 44px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-footer-pc) !important;
		mask-image: var(--ds-svg-wave-fill-footer-pc) !important;
	}

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 48px !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-wave .l-header::after {
		bottom: -6px !important;
		height: 12px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-sp) !important;
		mask-image: var(--ds-svg-wave-fill-header-sp) !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -11px !important;
		height: 22px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-footer-sp) !important;
		mask-image: var(--ds-svg-wave-fill-footer-sp) !important;
	}

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 43px !important;
	}
}


/* =========================================================
 * v0.3.8 obvious wave correction
 * - PCヘッダーの波が弱すぎたため、ここで明確に振幅を上げる
 * - PCフッターも少し強める
 * - スマホは太くしすぎない範囲で波感を上げる
 * ======================================================= */

@media (min-width: 768px) {
	.design-switcher.ds-header-wave .l-header::after {
		bottom: -24px !important;
		height: 52px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-pc) !important;
		mask-image: var(--ds-svg-wave-fill-header-pc) !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -24px !important;
		height: 50px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-footer-pc) !important;
		mask-image: var(--ds-svg-wave-fill-footer-pc) !important;
	}

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 52px !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-wave .l-header::after {
		bottom: -9px !important;
		height: 18px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-sp) !important;
		mask-image: var(--ds-svg-wave-fill-header-sp) !important;
	}

	.design-switcher.ds-footer-wave .l-footer::before {
		top: -12px !important;
		height: 24px !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-footer-sp) !important;
		mask-image: var(--ds-svg-wave-fill-footer-sp) !important;
	}

	.design-switcher.ds-footer-wave .l-footer {
		padding-top: 44px !important;
	}
}


/* =========================================================
 * v0.3.12 PC header seam hard fix
 * - v0.3.8の見た目をベースに戻す
 * - PCヘッダー下端にだけ薄い白の内側被せを追加
 * - 茶色い細線を、位置調整ではなく白面で覆う
 * - スマホ/フッターは変更しない
 * ======================================================= */
@media (min-width: 768px) {
	.design-switcher.ds-header-wave .l-header {
		box-shadow: inset 0 -7px 0 var(--ds-soft-bg) !important;
	}

	.design-switcher.ds-header-wave .l-header::after {
		bottom: -24px !important;
		height: 52px !important;
		filter: none !important;
		-webkit-mask-image: var(--ds-svg-wave-fill-header-pc) !important;
		mask-image: var(--ds-svg-wave-fill-header-pc) !important;
	}
}


/* =========================================================
 * v0.5.0 curve implementation
 * - 波パターンは変更しない
 * - 見本準拠: 茶色面そのものをなめらかな円弧で張り出す
 * - ヘッダー: 中央がもっとも低い
 * - フッター: 中央がもっとも高い
 * - 白線・白帯は出さない
 * ======================================================= */

.design-switcher.ds-header-curve .l-header {
	background-color: var(--ds-header-color) !important;
	margin-bottom: 0 !important;
	overflow: visible !important;
}

.design-switcher.ds-footer-curve .l-footer {
	background-color: var(--ds-footer-color) !important;
	overflow: visible !important;
}

.design-switcher.ds-header-curve .l-header::after,
.design-switcher.ds-footer-curve .l-footer::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	width: 100% !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-size: 100% 100% !important;
	mask-size: 100% 100% !important;
	pointer-events: none !important;
	transform: none !important;
	z-index: 45 !important;
}

/* PC */
@media (min-width: 768px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: 100% !important;
		bottom: auto !important;
		height: 40px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-pc) !important;
		mask-image: var(--ds-svg-curve-arc-header-pc) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 54px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -40px !important;
		bottom: auto !important;
		height: 40px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
		mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
	}
}

/* SP */
@media (max-width: 767px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: 100% !important;
		bottom: auto !important;
		height: 22px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-sp) !important;
		mask-image: var(--ds-svg-curve-arc-header-sp) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 42px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -22px !important;
		bottom: auto !important;
		height: 22px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
		mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
	}
}


/* =========================================================
 * v0.5.1 curve correction
 * - 波パターンは固定で変更しない
 * - 見本準拠の「丸いカーブ」に寄せる
 * - ヘッダー: 中央が最下点の、なめらかな下向きアーチ
 * - フッター: 中央が最高点の、なめらかな上向きアーチ
 * - ヘッダー側に白線を出さないよう1pxオーバーラップ
 * ======================================================= */

.design-switcher.ds-header-curve .l-header,
.design-switcher.ds-footer-curve .l-footer {
	box-shadow: none !important;
	background-image: none !important;
	overflow: visible !important;
}

.design-switcher.ds-header-curve .l-header::after,
.design-switcher.ds-footer-curve .l-footer::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	width: 100% !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-size: 100% 100% !important;
	mask-size: 100% 100% !important;
	transform: none !important;
	filter: none !important;
	pointer-events: none !important;
	z-index: 60 !important;
}

@media (min-width: 768px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		bottom: auto !important;
		height: 34px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-pc) !important;
		mask-image: var(--ds-svg-curve-arc-header-pc) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 50px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -33px !important;
		bottom: auto !important;
		height: 34px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
		mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		bottom: auto !important;
		height: 18px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-sp) !important;
		mask-image: var(--ds-svg-curve-arc-header-sp) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 36px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -17px !important;
		bottom: auto !important;
		height: 18px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
		mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
	}
}


/* =========================================================
 * v0.5.3 stronger curve refinement
 * - 波パターンは変更しない
 * - カーブの両端を水平に固定
 * - ヘッダーは中央がもっとも低い谷型を一段強調
 * - フッターは中央がもっとも高い山型を一段強調
 * - PC/SPとも高さ差を少し広げ、見本の丸みを出す
 * ======================================================= */

@media (min-width: 768px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		height: 46px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-pc) !important;
		mask-image: var(--ds-svg-curve-arc-header-pc) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 60px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -45px !important;
		height: 46px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
		mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		height: 24px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-sp) !important;
		mask-image: var(--ds-svg-curve-arc-header-sp) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 42px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -23px !important;
		height: 24px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
		mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
	}
}


/* =========================================================
 * v0.5.4 curve edge correction
 * - 波パターンは変更しない
 * - カーブの両端からすぐに曲線が始まるように修正
 * - 横線っぽく始まって途中から曲がる見え方を避ける
 * ======================================================= */
@media (min-width: 768px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		height: 42px !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-pc) !important;
		mask-image: var(--ds-svg-curve-arc-header-pc) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 56px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -41px !important;
		height: 42px !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
		mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		height: 22px !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-sp) !important;
		mask-image: var(--ds-svg-curve-arc-header-sp) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 40px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -21px !important;
		height: 22px !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
		mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
	}
}


/* =========================================================
 * v0.5.5 curve-only refinement
 * - 波パターンは固定で一切変更しない
 * - カーブのみを見直し
 * - 両端は水平、中央の高低差を少し強める
 * - PC/SPともに、見本寄りの丸い谷型・山型へ寄せる
 * ======================================================= */
@media (min-width: 768px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		height: 48px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-pc) !important;
		mask-image: var(--ds-svg-curve-arc-header-pc) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 62px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -47px !important;
		height: 48px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
		mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		height: 26px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-sp) !important;
		mask-image: var(--ds-svg-curve-arc-header-sp) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 44px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -25px !important;
		height: 26px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
		mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
	}
}


/* =========================================================
 * v0.5.7 curve emphasis refinement
 * - 波パターンは一切変更しない
 * - 両端は同じ高さの一点で終わらせる
 * - 端からすぐ自然にカーブし、水平区間を作らない
 * - PC/SPともにカーブの高低差を少し強める
 * ======================================================= */
@media (min-width: 768px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		height: 54px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-pc) !important;
		mask-image: var(--ds-svg-curve-arc-header-pc) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 68px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -53px !important;
		height: 54px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
		mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		height: 30px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-sp) !important;
		mask-image: var(--ds-svg-curve-arc-header-sp) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 48px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -29px !important;
		height: 30px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
		mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
	}
}


/* v0.5.8 version correction: packaged as full plugin ZIP for WP upload overwrite. */

/* v0.6.1 curve endpoint correction: remove flat horizontal feel at both ends by starting curvature immediately from endpoints. */


/* =========================================================
 * v0.6.2 curve endpoint correction
 * - 波パターンは変更しない
 * - カーブパターンのみ最終上書き
 * - 左右端点は同じ高さ
 * - 端点からすぐ曲線に入る（水平な直線区間を作らない）
 * - 深さは強くしすぎず、現状程度〜少し控えめ
 * ======================================================= */

.design-switcher.ds-header-curve .l-header,
.design-switcher.ds-footer-curve .l-footer {
	overflow: visible !important;
	box-shadow: none !important;
	background-image: none !important;
}

.design-switcher.ds-header-curve .l-header::after,
.design-switcher.ds-footer-curve .l-footer::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	width: 100% !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-size: 100% 100% !important;
	mask-size: 100% 100% !important;
	transform: none !important;
	filter: none !important;
	pointer-events: none !important;
	z-index: 70 !important;
}

@media (min-width: 768px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		bottom: auto !important;
		height: 42px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-pc) !important;
		mask-image: var(--ds-svg-curve-arc-header-pc) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 56px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -41px !important;
		bottom: auto !important;
		height: 42px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
		mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		bottom: auto !important;
		height: 24px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-sp) !important;
		mask-image: var(--ds-svg-curve-arc-header-sp) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 40px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -23px !important;
		bottom: auto !important;
		height: 24px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
		mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
	}
}


/* =========================================================
 * v0.6.3 curve off-canvas endpoint correction
 * - 波パターンは変更しない
 * - カーブパターンのみ最終上書き
 * - 見えている左右端を曲線の始点/終点にしない
 * - SVGの始点/終点を画面外に逃がし、端からすぐ曲線に入る見え方にする
 * - 水平な直線区間を作らない
 * ======================================================= */

.design-switcher.ds-header-curve .l-header,
.design-switcher.ds-footer-curve .l-footer {
	overflow: visible !important;
	box-shadow: none !important;
	background-image: none !important;
}

.design-switcher.ds-header-curve .l-header::after,
.design-switcher.ds-footer-curve .l-footer::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	width: 100% !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-size: 100% 100% !important;
	mask-size: 100% 100% !important;
	transform: none !important;
	filter: none !important;
	pointer-events: none !important;
	z-index: 70 !important;
}

@media (min-width: 768px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		bottom: auto !important;
		height: 42px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-pc) !important;
		mask-image: var(--ds-svg-curve-arc-header-pc) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 56px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -41px !important;
		bottom: auto !important;
		height: 42px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
		mask-image: var(--ds-svg-curve-arc-footer-pc) !important;
	}
}

@media (max-width: 767px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		bottom: auto !important;
		height: 24px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-header-sp) !important;
		mask-image: var(--ds-svg-curve-arc-header-sp) !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 40px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -23px !important;
		bottom: auto !important;
		height: 24px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
		mask-image: var(--ds-svg-curve-arc-footer-sp) !important;
	}
}


/* =========================================================
 * v0.6.4 responsive curve correction
 * - 波パターンは変更しない
 * - カーブパターンのみ、画面幅別に分岐
 * - PC / 中間幅 / スマホで別SVGを使う
 * - 見えている左右端からすぐ曲線に入る
 * - ヘッダーは中央が低い谷型、フッターは中央が高い山型
 * ======================================================= */

.design-switcher.ds-header-curve .l-header,
.design-switcher.ds-footer-curve .l-footer {
	overflow: visible !important;
	box-shadow: none !important;
	background-image: none !important;
}

.design-switcher.ds-header-curve .l-header::after,
.design-switcher.ds-footer-curve .l-footer::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	width: 100% !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-size: 100% 100% !important;
	mask-size: 100% 100% !important;
	-webkit-mask-position: center center !important;
	mask-position: center center !important;
	transform: none !important;
	filter: none !important;
	pointer-events: none !important;
	z-index: 80 !important;
}

/* Wide PC */
@media (min-width: 1100px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		bottom: auto !important;
		height: 38px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: url("../svg/curve-responsive-header-pc.svg") !important;
		mask-image: url("../svg/curve-responsive-header-pc.svg") !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 54px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -37px !important;
		bottom: auto !important;
		height: 38px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: url("../svg/curve-responsive-footer-pc.svg") !important;
		mask-image: url("../svg/curve-responsive-footer-pc.svg") !important;
	}
}

/* Narrow PC / tablet */
@media (min-width: 768px) and (max-width: 1099px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		bottom: auto !important;
		height: 34px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: url("../svg/curve-responsive-header-mid.svg") !important;
		mask-image: url("../svg/curve-responsive-header-mid.svg") !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 50px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -33px !important;
		bottom: auto !important;
		height: 34px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: url("../svg/curve-responsive-footer-mid.svg") !important;
		mask-image: url("../svg/curve-responsive-footer-mid.svg") !important;
	}
}

/* Smartphone */
@media (max-width: 767px) {
	.design-switcher.ds-header-curve .l-header::after {
		top: calc(100% - 1px) !important;
		bottom: auto !important;
		height: 22px !important;
		background-color: var(--ds-header-color) !important;
		-webkit-mask-image: url("../svg/curve-responsive-header-sp.svg") !important;
		mask-image: url("../svg/curve-responsive-header-sp.svg") !important;
	}

	.design-switcher.ds-footer-curve .l-footer {
		padding-top: 40px !important;
	}

	.design-switcher.ds-footer-curve .l-footer::before {
		top: -21px !important;
		bottom: auto !important;
		height: 22px !important;
		background-color: var(--ds-footer-color) !important;
		-webkit-mask-image: url("../svg/curve-responsive-footer-sp.svg") !important;
		mask-image: url("../svg/curve-responsive-footer-sp.svg") !important;
	}
}


/* =========================================================
 * v0.7.2 rollback to good curve + header line fix
 * - v0.6.4のカーブ形状へ戻す
 * - 波パターンは変更しない
 * - 装飾時だけ太く見える上部アクセントラインを無効化
 * - PICK UP位置調整は入れない（白帯/崩れ再発防止）
 * ======================================================= */

/* 装飾時に追加していた上部ラインを消す。テーマ側の元の表示に寄せる */
.design-switcher.ds-header-wave .l-header::before,
.design-switcher.ds-header-curve .l-header::before,
.design-switcher.ds-header-city .l-header::before {
	display: none !important;
	content: none !important;
	height: 0 !important;
}

/* v0.6.4のカーブを維持。余白や深さの追加調整はしない */
.design-switcher.ds-header-curve .l-header {
	margin-bottom: 0 !important;
}


/* =========================================================
 * v0.7.8 correct SWELL post slider title selector
 * - 波パターンは変更しない
 * - カーブ形状はv0.7.2を維持
 * - 実際のHTMLではdesign-switcherクラスがbodyではなく#body_wrapに付くため、
 *   body.design-switcherではなく #body_wrap.design-switcher を対象にする
 * - カーブパターン時だけ記事スライダータイトル（PICK UP）を非表示
 * ======================================================= */

#body_wrap.design-switcher.ds-header-curve #post_slider .p-postSlider__title {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	line-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* 念のため、bodyではなく#body_wrap配下の一般セレクタでも抑える */
#body_wrap.design-switcher.ds-header-curve .p-postSlider__title,
#body_wrap.design-switcher.ds-header-curve .p-postSlider__ttl,
#body_wrap.design-switcher.ds-header-curve .c-postSlider__title {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	line-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* 装飾時だけ太く見える上部アクセントラインは引き続き無効化 */
#body_wrap.design-switcher.ds-header-wave .l-header::before,
#body_wrap.design-switcher.ds-header-curve .l-header::before,
#body_wrap.design-switcher.ds-header-city .l-header::before,
.design-switcher.ds-header-wave .l-header::before,
.design-switcher.ds-header-curve .l-header::before,
.design-switcher.ds-header-city .l-header::before {
	display: none !important;
	content: none !important;
	height: 0 !important;
}


/* =========================================================
 * v0.7.9 post slider spacing after hiding title
 * - 波パターンは変更しない
 * - カーブ形状はv0.7.2/0.7.8を維持
 * - カーブ時だけPICK UPタイトルを非表示
 * - タイトル非表示後にサムネイルが上がりすぎるため、
 *   #post_slider .p-postSlider__swiper 側に画面幅別の余白を追加
 * ======================================================= */

/* カーブ時だけPICK UPタイトルを非表示 */
#body_wrap.design-switcher.ds-header-curve #post_slider .p-postSlider__title {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	line-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* PC幅 */
@media (min-width: 1100px) {
	#body_wrap.design-switcher.ds-header-curve #post_slider .p-postSlider__swiper {
		padding-top: 28px !important;
	}
}

/* タブレット・狭いPC幅 */
@media (min-width: 768px) and (max-width: 1099px) {
	#body_wrap.design-switcher.ds-header-curve #post_slider .p-postSlider__swiper {
		padding-top: 22px !important;
	}
}

/* スマホ幅 */
@media (max-width: 767px) {
	#body_wrap.design-switcher.ds-header-curve #post_slider .p-postSlider__swiper {
		padding-top: 16px !important;
	}
}

/* より狭いスマホでは少し控えめ */
@media (max-width: 480px) {
	#body_wrap.design-switcher.ds-header-curve #post_slider .p-postSlider__swiper {
		padding-top: 14px !important;
	}
}

/* 装飾時だけ太く見えていた上部アクセントラインは引き続き無効化 */
#body_wrap.design-switcher.ds-header-wave .l-header::before,
#body_wrap.design-switcher.ds-header-curve .l-header::before,
#body_wrap.design-switcher.ds-header-city .l-header::before,
.design-switcher.ds-header-wave .l-header::before,
.design-switcher.ds-header-curve .l-header::before,
.design-switcher.ds-header-city .l-header::before {
	display: none !important;
	content: none !important;
	height: 0 !important;
}


/* =========================================================
 * v0.8.0 PC spacing fine-tune for curve pattern
 * - 波パターンは変更しない
 * - カーブ形状はv0.7.9を維持
 * - PICK UP非表示とスライダー余白はv0.7.9を維持
 * - スマホは現状維持
 * - PC幅だけ、ヘッダーロゴ下とフッター上の余白を少しだけ詰める
 * ======================================================= */

@media (min-width: 1100px) {
	/* PCヘッダー：ロゴ下の余白を少しだけ詰める */
	#body_wrap.design-switcher.ds-header-curve .l-header.-parallel.-parallel-top .l-header__logo {
		padding-bottom: 8px !important;
	}

	/* PCフッター：カーブ下からフッター本文までの余白を少しだけ詰める */
	#body_wrap.design-switcher.ds-footer-curve .l-footer {
		padding-top: 46px !important;
	}
}


/* =========================================================
 * v0.8.2 footer spacing fine-tune for curve pattern
 * - 波パターンは変更しない
 * - カーブ形状は変更しない
 * - ヘッダーはv0.8.0のまま維持
 * - PICK UP非表示と記事スライダー余白は維持
 * - PC/スマホ両方で、フッター上の余白を少し詰める
 * ======================================================= */

@media (min-width: 1100px) {
	#body_wrap.design-switcher.ds-footer-curve .l-footer {
		padding-top: 38px !important;
	}
}

@media (min-width: 768px) and (max-width: 1099px) {
	#body_wrap.design-switcher.ds-footer-curve .l-footer {
		padding-top: 36px !important;
	}
}

@media (max-width: 767px) {
	#body_wrap.design-switcher.ds-footer-curve .l-footer {
		padding-top: 32px !important;
	}
}

/* =========================================================
 * v0.8.3 footer spacing micro-adjustment for curve pattern
 * - ヘッダーは変更しない
 * - フッターのカーブ形状は変更しない
 * - PC/スマホとも、上側余白だけをもう一段だけ詰める
 * - 見た目のゆったり感は残しつつ、間延び感だけを軽減
 * ======================================================= */

@media (min-width: 1100px) {
	#body_wrap.design-switcher.ds-footer-curve .l-footer {
		padding-top: 30px !important;
	}
}

@media (min-width: 768px) and (max-width: 1099px) {
	#body_wrap.design-switcher.ds-footer-curve .l-footer {
		padding-top: 28px !important;
	}
}

@media (max-width: 767px) {
	#body_wrap.design-switcher.ds-footer-curve .l-footer {
		padding-top: 24px !important;
	}
}

/* =========================================================
 * v0.10.1 final city reset
 * - 波 / カーブは触らない
 * - 街並みだけを最終上書き
 * - ヘッダーは白線、フッターはメインカラー線
 * - フッターは茶色部分の上の白エリアに置く
 * ======================================================= */

@media (min-width: 768px) {
	#body_wrap.design-switcher.ds-header-city .l-header,
	.design-switcher.ds-header-city .l-header {
		background-color: var(--ds-header-color) !important;
		background-image: none !important;
		min-height: 92px !important;
		overflow: visible !important;
	}

	#body_wrap.design-switcher.ds-header-city .l-header::after,
	.design-switcher.ds-header-city .l-header::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: clamp(18px, 4.5vw, 72px) !important;
		right: auto !important;
		bottom: 10px !important;
		width: min(340px, 26vw) !important;
		height: 42px !important;
		background: var(--ds-city-line-header) !important;
		-webkit-mask-image: url('../svg/city-final-header-left.svg') !important;
		mask-image: url('../svg/city-final-header-left.svg') !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-position: left bottom !important;
		mask-position: left bottom !important;
		z-index: 2 !important;
		pointer-events: none !important;
	}

	#body_wrap.design-switcher.ds-header-city .l-header .l-header__inner::after,
	#body_wrap.design-switcher.ds-header-city .l-header .c-headLogo::after,
	#body_wrap.design-switcher.ds-header-city .l-header .l-header__logo::after,
	.design-switcher.ds-header-city .l-header .l-header__inner::after,
	.design-switcher.ds-header-city .l-header .c-headLogo::after,
	.design-switcher.ds-header-city .l-header .l-header__logo::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		right: clamp(18px, 4.5vw, 72px) !important;
		left: auto !important;
		bottom: 10px !important;
		width: min(340px, 26vw) !important;
		height: 42px !important;
		background: var(--ds-city-line-header) !important;
		-webkit-mask-image: url('../svg/city-final-header-right.svg') !important;
		mask-image: url('../svg/city-final-header-right.svg') !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-position: right bottom !important;
		mask-position: right bottom !important;
		z-index: 2 !important;
		pointer-events: none !important;
	}

	#body_wrap.design-switcher.ds-footer-city .l-footer,
	.design-switcher.ds-footer-city .l-footer {
		position: relative !important;
		overflow: visible !important;
		background-color: var(--ds-footer-color) !important;
		background-image: none !important;
		padding-top: 30px !important;
		isolation: isolate !important;
	}

	#body_wrap.design-switcher.ds-footer-city .l-footer::before,
	.design-switcher.ds-footer-city .l-footer::before {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: -44px !important;
		margin: 0 auto !important;
		width: min(1160px, calc(100% - 56px)) !important;
		height: 34px !important;
		background: var(--ds-city-line-footer) !important;
		-webkit-mask-image: url('../svg/city-final-footer-pc.svg') !important;
		mask-image: url('../svg/city-final-footer-pc.svg') !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-position: center top !important;
		mask-position: center top !important;
		z-index: 8 !important;
		pointer-events: none !important;
	}

	#body_wrap.design-switcher.ds-footer-city .l-footer::after,
	.design-switcher.ds-footer-city .l-footer::after {
		display: none !important;
		content: none !important;
	}
}

@media (max-width: 767px) {
	#body_wrap.design-switcher.ds-header-city .l-header,
	.design-switcher.ds-header-city .l-header {
		background-image: none !important;
	}

	#body_wrap.design-switcher.ds-header-city .l-header::after,
	#body_wrap.design-switcher.ds-header-city .l-header .l-header__inner::after,
	#body_wrap.design-switcher.ds-header-city .l-header .c-headLogo::after,
	#body_wrap.design-switcher.ds-header-city .l-header .l-header__logo::after,
	.design-switcher.ds-header-city .l-header::after,
	.design-switcher.ds-header-city .l-header .l-header__inner::after,
	.design-switcher.ds-header-city .l-header .c-headLogo::after,
	.design-switcher.ds-header-city .l-header .l-header__logo::after {
		display: none !important;
		content: none !important;
	}

	#body_wrap.design-switcher.ds-footer-city .l-footer,
	.design-switcher.ds-footer-city .l-footer {
		position: relative !important;
		overflow: visible !important;
		background-color: var(--ds-footer-color) !important;
		background-image: none !important;
		padding-top: 30px !important;
		isolation: isolate !important;
	}

	#body_wrap.design-switcher.ds-footer-city .l-footer::before,
	.design-switcher.ds-footer-city .l-footer::before {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: -34px !important;
		margin: 0 auto !important;
		width: calc(100% - 24px) !important;
		height: 24px !important;
		background: var(--ds-city-line-footer) !important;
		-webkit-mask-image: url('../svg/city-final-footer-sp.svg') !important;
		mask-image: url('../svg/city-final-footer-sp.svg') !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-position: center top !important;
		mask-position: center top !important;
		z-index: 8 !important;
		pointer-events: none !important;
	}

	#body_wrap.design-switcher.ds-footer-city .l-footer::after,
	.design-switcher.ds-footer-city .l-footer::after {
		display: none !important;
		content: none !important;
	}
}


/* =========================================================
 * v0.10.2 city final alignment fix
 * - PCヘッダー: 右の二重表示を止める
 * - PCフッター: 白エリア側に横幅いっぱいで配置
 * - SPフッター: 左右に分けて中央を空ける
 * - 街並みだけ最終上書き
 * ======================================================= */

@media (min-width: 768px) {
	body.design-switcher.ds-header-city .l-header,
	#body_wrap .design-switcher.ds-header-city .l-header,
	.design-switcher.ds-header-city .l-header {
		background-color: var(--ds-header-color) !important;
		background-image: none !important;
		min-height: 104px !important;
		overflow: visible !important;
		box-shadow: inset 0 4px 0 0 var(--ds-accent-color) !important;
	}

	body.design-switcher.ds-header-city .l-header::before,
	.design-switcher.ds-header-city .l-header::before {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: clamp(20px, 4.4vw, 72px) !important;
		bottom: 8px !important;
		width: min(350px, 27vw) !important;
		height: 46px !important;
		background: var(--ds-city-line-header) !important;
		-webkit-mask-image: url('../svg/city-final-header-left.svg') !important;
		mask-image: url('../svg/city-final-header-left.svg') !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-position: left bottom !important;
		mask-position: left bottom !important;
		z-index: 2 !important;
		pointer-events: none !important;
	}

	body.design-switcher.ds-header-city .l-header::after,
	.design-switcher.ds-header-city .l-header::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		right: clamp(20px, 4.4vw, 72px) !important;
		left: auto !important;
		bottom: 8px !important;
		width: min(350px, 27vw) !important;
		height: 46px !important;
		background: var(--ds-city-line-header) !important;
		-webkit-mask-image: url('../svg/city-final-header-right.svg') !important;
		mask-image: url('../svg/city-final-header-right.svg') !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-position: right bottom !important;
		mask-position: right bottom !important;
		z-index: 2 !important;
		pointer-events: none !important;
	}

	body.design-switcher.ds-header-city .l-header .l-header__inner::after,
	body.design-switcher.ds-header-city .l-header .c-headLogo::after,
	body.design-switcher.ds-header-city .l-header .l-header__logo::after,
	.design-switcher.ds-header-city .l-header .l-header__inner::after,
	.design-switcher.ds-header-city .l-header .c-headLogo::after,
	.design-switcher.ds-header-city .l-header .l-header__logo::after {
		content: none !important;
		display: none !important;
	}

	body.design-switcher.ds-footer-city .l-footer,
	.design-switcher.ds-footer-city .l-footer {
		position: relative !important;
		overflow: visible !important;
		background-color: var(--ds-footer-color) !important;
		background-image: none !important;
		padding-top: 18px !important;
		isolation: isolate !important;
	}

	body.design-switcher.ds-footer-city .l-footer::before,
	.design-switcher.ds-footer-city .l-footer::before {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: 50% !important;
		right: auto !important;
		top: -38px !important;
		transform: translateX(-50%) !important;
		width: min(1240px, calc(100vw - 56px)) !important;
		height: 36px !important;
		background: var(--ds-city-line-footer) !important;
		-webkit-mask-image: url('../svg/city-final-footer-pc.svg') !important;
		mask-image: url('../svg/city-final-footer-pc.svg') !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-position: center top !important;
		mask-position: center top !important;
		z-index: 12 !important;
		pointer-events: none !important;
	}

	body.design-switcher.ds-footer-city .l-footer::after,
	.design-switcher.ds-footer-city .l-footer::after {
		content: none !important;
		display: none !important;
	}
}

@media (max-width: 767px) {
	body.design-switcher.ds-header-city .l-header,
	.design-switcher.ds-header-city .l-header {
		background-image: none !important;
		box-shadow: inset 0 4px 0 0 var(--ds-accent-color) !important;
	}

	body.design-switcher.ds-header-city .l-header::after,
	body.design-switcher.ds-header-city .l-header::before,
	body.design-switcher.ds-header-city .l-header .l-header__inner::after,
	body.design-switcher.ds-header-city .l-header .c-headLogo::after,
	body.design-switcher.ds-header-city .l-header .l-header__logo::after,
	.design-switcher.ds-header-city .l-header::after,
	.design-switcher.ds-header-city .l-header::before,
	.design-switcher.ds-header-city .l-header .l-header__inner::after,
	.design-switcher.ds-header-city .l-header .c-headLogo::after,
	.design-switcher.ds-header-city .l-header .l-header__logo::after {
		content: none !important;
		display: none !important;
	}

	body.design-switcher.ds-footer-city .l-footer,
	.design-switcher.ds-footer-city .l-footer {
		position: relative !important;
		overflow: visible !important;
		background-color: var(--ds-footer-color) !important;
		background-image: none !important;
		padding-top: 20px !important;
		isolation: isolate !important;
	}

	body.design-switcher.ds-footer-city .l-footer::before,
	.design-switcher.ds-footer-city .l-footer::before {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: 8% !important;
		right: auto !important;
		top: -28px !important;
		width: 28% !important;
		height: 28px !important;
		transform: none !important;
		background: var(--ds-city-line-footer) !important;
		-webkit-mask-image: url('../svg/city-final-footer-sp-left.svg') !important;
		mask-image: url('../svg/city-final-footer-sp-left.svg') !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-position: left top !important;
		mask-position: left top !important;
		z-index: 12 !important;
		pointer-events: none !important;
	}

	body.design-switcher.ds-footer-city .l-footer::after,
	.design-switcher.ds-footer-city .l-footer::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		right: 8% !important;
		left: auto !important;
		top: -28px !important;
		width: 28% !important;
		height: 28px !important;
		background: var(--ds-city-line-footer) !important;
		-webkit-mask-image: url('../svg/city-final-footer-sp-right.svg') !important;
		mask-image: url('../svg/city-final-footer-sp-right.svg') !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-position: right top !important;
		mask-position: right top !important;
		z-index: 12 !important;
		pointer-events: none !important;
	}
}


/* =========================================================
 * v0.10.3 city: single full-width image strips
 * - PC header: one full-width strip with center gap
 * - PC footer: one full-width strip above footer body
 * - SP footer: one full-width strip with center gap
 * - No split pseudo elements for header/footer city
 * ======================================================= */

@media (min-width: 768px) {
  body.design-switcher.ds-header-city .l-header,
  #body_wrap.design-switcher.ds-header-city .l-header,
  .design-switcher.ds-header-city .l-header {
    background-color: var(--ds-header-color) !important;
    background-image: none !important;
    min-height: 104px !important;
    overflow: visible !important;
  }

  body.design-switcher.ds-header-city .l-header::after,
  #body_wrap.design-switcher.ds-header-city .l-header::after,
  .design-switcher.ds-header-city .l-header::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 6px !important;
    width: min(1500px, calc(100vw - 72px)) !important;
    height: 52px !important;
    margin: 0 auto !important;
    background: var(--ds-city-line-header) !important;
    -webkit-mask-image: url('../svg/city-strip-header-pc.svg') !important;
    mask-image: url('../svg/city-strip-header-pc.svg') !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center bottom !important;
    mask-position: center bottom !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  body.design-switcher.ds-header-city .l-header .l-header__inner::after,
  body.design-switcher.ds-header-city .l-header .c-headLogo::after,
  body.design-switcher.ds-header-city .l-header .l-header__logo::after,
  #body_wrap.design-switcher.ds-header-city .l-header .l-header__inner::after,
  #body_wrap.design-switcher.ds-header-city .l-header .c-headLogo::after,
  #body_wrap.design-switcher.ds-header-city .l-header .l-header__logo::after,
  .design-switcher.ds-header-city .l-header .l-header__inner::after,
  .design-switcher.ds-header-city .l-header .c-headLogo::after,
  .design-switcher.ds-header-city .l-header .l-header__logo::after {
    content: none !important;
    display: none !important;
  }

  body.design-switcher.ds-footer-city .l-footer,
  #body_wrap.design-switcher.ds-footer-city .l-footer,
  .design-switcher.ds-footer-city .l-footer {
    position: relative !important;
    overflow: visible !important;
    background-color: var(--ds-footer-color) !important;
    background-image: none !important;
    padding-top: 18px !important;
    isolation: isolate !important;
  }

  body.design-switcher.ds-footer-city .l-footer::before,
  #body_wrap.design-switcher.ds-footer-city .l-footer::before,
  .design-switcher.ds-footer-city .l-footer::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: -58px !important;
    transform: translateX(-50%) !important;
    width: min(1500px, calc(100vw - 48px)) !important;
    height: 50px !important;
    background: var(--ds-city-line-footer) !important;
    -webkit-mask-image: url('../svg/city-strip-footer-pc.svg') !important;
    mask-image: url('../svg/city-strip-footer-pc.svg') !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center bottom !important;
    mask-position: center bottom !important;
    z-index: 12 !important;
    pointer-events: none !important;
  }

  body.design-switcher.ds-footer-city .l-footer::after,
  #body_wrap.design-switcher.ds-footer-city .l-footer::after,
  .design-switcher.ds-footer-city .l-footer::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.design-switcher.ds-header-city .l-header,
  #body_wrap.design-switcher.ds-header-city .l-header,
  .design-switcher.ds-header-city .l-header {
    background-image: none !important;
  }

  body.design-switcher.ds-header-city .l-header::before,
  body.design-switcher.ds-header-city .l-header::after,
  body.design-switcher.ds-header-city .l-header .l-header__inner::after,
  body.design-switcher.ds-header-city .l-header .c-headLogo::after,
  body.design-switcher.ds-header-city .l-header .l-header__logo::after,
  #body_wrap.design-switcher.ds-header-city .l-header::before,
  #body_wrap.design-switcher.ds-header-city .l-header::after,
  #body_wrap.design-switcher.ds-header-city .l-header .l-header__inner::after,
  #body_wrap.design-switcher.ds-header-city .l-header .c-headLogo::after,
  #body_wrap.design-switcher.ds-header-city .l-header .l-header__logo::after,
  .design-switcher.ds-header-city .l-header::before,
  .design-switcher.ds-header-city .l-header::after,
  .design-switcher.ds-header-city .l-header .l-header__inner::after,
  .design-switcher.ds-header-city .l-header .c-headLogo::after,
  .design-switcher.ds-header-city .l-header .l-header__logo::after {
    content: none !important;
    display: none !important;
  }

  body.design-switcher.ds-footer-city .l-footer,
  #body_wrap.design-switcher.ds-footer-city .l-footer,
  .design-switcher.ds-footer-city .l-footer {
    position: relative !important;
    overflow: visible !important;
    background-color: var(--ds-footer-color) !important;
    background-image: none !important;
    padding-top: 18px !important;
    isolation: isolate !important;
  }

  body.design-switcher.ds-footer-city .l-footer::before,
  #body_wrap.design-switcher.ds-footer-city .l-footer::before,
  .design-switcher.ds-footer-city .l-footer::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: -46px !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 28px) !important;
    height: 40px !important;
    background: var(--ds-city-line-footer) !important;
    -webkit-mask-image: url('../svg/city-strip-footer-sp.svg') !important;
    mask-image: url('../svg/city-strip-footer-sp.svg') !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center bottom !important;
    mask-position: center bottom !important;
    z-index: 12 !important;
    pointer-events: none !important;
  }

  body.design-switcher.ds-footer-city .l-footer::after,
  #body_wrap.design-switcher.ds-footer-city .l-footer::after,
  .design-switcher.ds-footer-city .l-footer::after {
    content: none !important;
    display: none !important;
  }
}