@charset "UTF-8";
/* ==========================================================================
   キャンペーンの枠（中身の高さに合わせて伸び縮みする）

   - 枠線は SVG で描く。形は assets/js/campaign_frame.js が枠の実寸から計算する
   - 左右の縦線だけが伸び、斜めの角度と線の太さは変わらない
   - 線はひと続きのまっすぐな線。吹き出し・飾り文字が重なる箇所は、
     背景色つきの画像を上に載せて隠す
   - 数値はすべて「枠の幅」に対する割合。元の画像（CP1 / CP2）からの実測値
   ========================================================================== */

.cp-frames {
	/* 斜めの落差（枠の幅に対する割合）と線の太さ（同） */
	--cp-frame-slant: 0.105;
	--cp-frame-stroke: 0.007;

	/* 元画像は左右に吹き出し・飾り文字のはみ出し分の余白を持っていた。枠はその内側 */
	width: 85.157%;
	margin: 0 auto;
}

.cp-frame {
	position: relative;
	/* 中身の画像の上下の余白調整（マイナスの余白）が枠の外へ抜けないようにする */
	display: flow-root;
}

/* 上下の枠は斜めの辺どうしが噛み合うように重ねる。
   元の組み方（画像どうしを固定の px で重ねる）と同じ見え方になる値 */
.cp-frame + .cp-frame {
	margin-top: calc(1.549% - 60px);
}

/* 位置と大きさはスクリプトが枠よりひと回り大きく設定する（線の外側半分が切れないように） */
.cp-frame__line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* サイト共通のスタイルが SVG の幅を親の幅までに抑えるので、解除する */
	max-width: none;
	max-height: none;
	pointer-events: none;
}

.cp-frame__line path {
	fill: none;
	stroke: #fff;
	stroke-linejoin: miter;
}

/* 中身の画像（吹き出し・コピー・写真・飾り文字）。枠の外へはみ出す分だけ広く置く */
.cp-frame__visual {
	position: relative;
	z-index: 1;
	width: 117.431%;
	margin-left: -8.715%;
}

.cp-frame__visual picture,
.cp-frame__visual img {
	display: block;
	width: 100%;
	height: auto;
}

/* 枠の中に入る文字・店舗リスト */
.cp-frame__body {
	position: relative;
	z-index: 1;
	/* 下辺が水平の枠：中身と枠線の間の空き（元画像のキャンペーン2と同じ割合） */
	padding: 0 4.5% 6.3%;
}

/* 下辺が斜めの枠は、落差のぶん下を空ける（中身が枠線に当たらないように） */
.cp-frame[data-bottom="up"] > .cp-frame__body,
.cp-frame[data-bottom="down"] > .cp-frame__body {
	padding-bottom: 14.5%;
}

/* 店舗一覧の見出しの上：空きを取って、丸い点線で中身の画像と区切る */
.cp-frame__body .campaign-storelist-info-wrapper {
	position: relative;
	margin: 40px auto 0;
	padding: 40px 0 0;
}

.cp-frame__body .campaign-storelist-info-wrapper::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 2px, transparent 2.5px);
	background-size: 12px 4px;
	background-repeat: repeat-x;
	background-position: center top;
}

/* 店舗リストの下の注釈 */
/* 箱の下の余白（.wrap の margin 28px）は、注釈との間を詰めるため0にする。
   注釈のないリスト（キャンペーン2）は元の余白のまま（0にすると斜めの下辺に箱が近づきすぎる） */
.cp-frame__body .campaign-storelist:has(.campaign-storelist-note) .pro_store_teble .wrap {
	margin-bottom: 0;
}

.cp-frame__body .campaign-storelist-note {
	margin-top: 8px;
	align-items: flex-start;   /* 左寄せ（現行の注釈は右寄せ） */
}

/* 店舗リストの箱（.pro_store_teble .wrap）は1025px以上で幅90%・最大850px。注釈の左端を箱に揃える */
@media (min-width: 1025px) {
	.cp-frame__body .campaign-storelist-note {
		width: 90%;
	}
}

@media (max-width: 767px) {
	.cp-frame__body .campaign-storelist-info-wrapper {
		margin-top: 24px;
		padding-top: 24px;
	}

	.cp-frame__body .campaign-storelist-info-wrapper::before {
		height: 3px;
		background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 1.5px, transparent 2px);
		background-size: 8px 3px;
	}

	/* 「【〇〇配布 実施店舗一覧】」を1行に収める（16文字ぶん） */
	.cp-frame__body .campaign-storelist-title {
		font-size: min(3.85vw, 16px);
		white-space: nowrap;
	}

	.cp-frame__body .campaign-storelist-note-text {
		font-size: 12px;
	}
}

/* 幅の狭い端末（〜340px）でも1行に収める */
@media (max-width: 340px) {
	.cp-frame__body .campaign-storelist-title {
		font-size: 3.65vw;
	}
}

/* ---------- キャンペーン1 ---------- */
.cp-frame--1 .cp-frame__visual {
	margin-top: -4.201%;
	margin-bottom: -0.868%;
}

/* ---------- キャンペーン2 ---------- */
.cp-frame--2 .cp-frame__visual {
	margin-top: -0.681%;
}

/* ---------- キャンペーン3 ---------- */
/* 上辺が右下がり。中身はキャンペーン2を左右反転した配置なので、上辺との位置関係もキャンペーン2と同じにする */
.cp-frame--3 .cp-frame__visual {
	margin-top: -0.681%;
}

/* ---------- タブレット ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.cp-frame + .cp-frame {
		margin-top: calc(1.549% - 20px);
	}
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.cp-frames {
		--cp-frame-stroke: 0.0065;
		width: 89.214%;
	}

	.cp-frame + .cp-frame {
		margin-top: calc(1.705% - 20px);
	}

	.cp-frame__visual {
		width: 112.09%;
		margin-left: -6.045%;
	}

	.cp-frame__body {
		padding-right: 3%;
		padding-left: 3%;
	}

	.cp-frame--1 .cp-frame__visual {
		margin-top: -2.164%;
		margin-bottom: -1.403%;
	}

	.cp-frame--2 .cp-frame__visual {
		margin-top: -0.642%;
		margin-left: -5.97%;
	}

	.cp-frame--3 .cp-frame__visual {
		margin-top: -0.642%;
		margin-left: -5.97%;
	}
}

/* キャンペーン3の枠と、その下のリクエストバナーとの間（現行は PC 20px／SP 40px で詰まっていたので広げる） */
.cp-frames + .req-banner-area {
	margin-top: 80px;
}

@media (max-width: 1024px) {
	.cp-frames + .req-banner-area {
		margin-top: 60px;
	}
}

@media (max-width: 767px) {
	.cp-frames + .req-banner-area {
		margin-top: 56px;
	}
}