/* ----------------------------------------------------
※ バナー広告表示領域に関する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;
	}
}