/* ----------------------------------------------------
※ バナー広告表示領域に関するCSSのみが書いてあります
---------------------------------------------------- */

.ad-banner {
	margin: 0 auto;
}


/* メインコンテンツの一番下（※注釈の上）
------------------------------------------------------------------------------*/

.ad-banner-wrap1 {
	margin-top: 30px;
}

.ad-banner-wrap1 .c2it {
	text-align: center;
}

.ad-banner-wrap1 .box {
	text-align: center;
}

.ad-banner-wrap1 .ad-banner {
	/* height指定により縦長のバナーが出力されるのを頭打ちにして阻止
	** 高さ250px前後のバナーが出る601px～768px付近のみ下方に30px前後の余白ができるがCLS対策を優先とし許容範囲とする */
	height: 280px;
	max-width: 336px;/* widthを336px固定値にすると601px～641pxや幅狭320px端末で横幅オーバーになるので注意 */
}

@media screen and (max-width: 600px) {
/*--- 表示領域が600px以下の場合に適用するスタイル ---*/
	.ad-banner-wrap1 {
		max-width: 98%;
	}

	.ad-banner-wrap1 .box {
		width: 94%;
	}

	.ad-banner-wrap1 .box.right-side {
		margin: 0;
	}

	.ad-banner-wrap1 .box.right-side .ad-banner {
		height: 1px;
		min-height: revert;
		width: 1px;
	}
}

@media screen and (max-width: 400px) {
/*--- 表示領域が400px以下の場合に適用するスタイル ---*/
	.ad-banner-wrap1 .ad-banner {
		height: revert;
		max-height: 280px;/* 縦長のバナーが出力されるのを頭打ちにして阻止 */
		min-height: 250px;/* CLS対策として最低限確保しておきたい高さぶん */
	}
}


/* フッターの内部
------------------------------------------------------------------------------*/

.ad-banner-wrap2 {
	margin-bottom: 10px;
}

.ad-banner-wrap2 .box {
	margin: 0 auto;
	text-align: center;
	width: 94%;
}

.ad-banner-wrap2 .ad-banner {
	min-height: 200px;
}

@media screen and (max-width: 600px) {
/*--- 表示領域が600px以下の場合に適用するスタイル ---*/
	.ad-banner-wrap2 .ad-banner {
		min-height: 280px;
	}
}

@media screen and (max-width: 400px) {
/*--- 表示領域が400px以下の場合に適用するスタイル ---*/
	.ad-banner-wrap2 .ad-banner {
		min-height: 250px;
	}
}



/* テスト用CSS（※本番用バナー設置前のイメージチェック段階のみ使用）
------------------------------------------------------------------------------*/

/* メインコンテンツの一番下（※注釈の上）*/

.bnr1-a {}

@media screen and (max-width: 704px) {
	.bnr1-b {
		display: none;
	}
}

/* フッターの内部 */

.bnr2-l {}

.bnr2-m,
.bnr2-s {
	display: none;
}

@media screen and (max-width: 969px) {
	.bnr2-m {
		display: inline-block;
	}

	.bnr2-l,
	.bnr2-s {
		display: none;
	}
}

@media screen and (max-width: 740px) {
	.bnr2-s {
		display: inline-block;
	}

	.bnr2-l,
	.bnr2-m {
		display: none;
	}
}