/* 画面幅が480pxまでの時 ========================================================================================== 画面幅が480pxまでの時 */

@media screen and (max-width: 480px) {

	body {
		min-width: 100svw;
		min-height: 100svh;
		max-width: 480px;
		font-size: 16pt;
		line-height: 24pt;
		box-sizing: border-box !important;
	}

	/* 文章DIV */
	.text_r,
	.text_c,
	.text_l,
	.footer {
		width: auto;
	}

	/* タイトルロゴ */
	.title {
		width: 50svw;
		text-align: center;
	}

	/* コンテンツボタン */
	.c_button {
		width: 100px;
		box-sizing: border-box;
	}

	/* 枠内余白 */
	.padding {
		padding: 10px 10px 10px 10px;
	}

	/* 枠外余白 */
	.margin {
		margin: 10px 10px 10px 10px;
	}

	/* 引用 */
	.indent {
		padding: 0 10px 0 10px;
	}

	/* フッター */
	.md-flex,
	.copyright {
		text-align: center;
	}

	.none_s {
		display: none;
	}
}

.con_area {
	width: 100%;
	padding: 10px;

}

/* 画面幅が481～750pxまでの時 ===================================================================================== 画面幅が481～750pxまでの時 */

@media screen and (min-width: 481px) and (max-width: 750px) {

	body {
		min-width: 100svw;
		min-height: 100svh;
		max-width: 750px;
		font-size: 14pt;
		line-height: 21pt;
		box-sizing: border-box !important;
	}

	/* 文章DIV */
	.text_r,
	.text_c,
	.text_l,
	.footer {
		width: auto;
		box-sizing: border-box;
		/* ボーダーとpaddingを含める */
	}

	/* タイトルロゴ */
	.title {
		width: 70svw;
	}

	/* コンテンツボタン */
	.c_button {
		width: 125px;
		box-sizing: border-box;
	}

	/* 枠内余白 */
	.padding {
		padding: 30px 30px 30px 30px;
	}

	/* 枠外余白 */
	.margin {
		margin: 30px 30px 30px 30px;
	}

	/* 引用 */
	.indent {
		padding: 0 30px 0 30px;
	}

	/* フッター */
	.md-flex,
	.copyright {
		text-align: center;
	}

	.none_m {
		display: none;
	}
}

.con_area {
	width: 80%;
	padding: 10px;

}

/* 画面幅が751px以上の時 ========================================================================================== 画面幅が751px以上の時 */

@media screen and (min-width: 751px) {

	body {
		min-width: 100svw;
		min-height: 100svh;
		font-size: 12pt;
		line-height: 18pt;
		box-sizing: border-box !important;
	}

	/* 文章DIV */
	.text_r,
	.text_c,
	.text_l,
	.footer {
		width: auto;
		box-sizing: border-box;
		/* ボーダーとpaddingを含める */
	}

	/* タイトルロゴ */
	.title {
		width: 50svw;
	}

	/* コンテンツボタン */
	.c_button {
		width: 150px;
		box-sizing: border-box;

	}

	/* 非表示 */
	.h_l {
		display: none;
	}

	/* 枠内余白 */
	.padding {
		padding: 50px 50px 50px 50px;
	}

	/* 枠外余白 */
	.margin {
		margin: 50px 50px 50px 50px;
	}

	/* 引用 */
	.indent {
		padding: 0 50px 0 50px;
	}

	/* フッター */
	.footer {
		display: flex;
		justify-content: space-between;
	}

	.md-flex {
		display: flex;
		text-align: left;
	}

	.copyright {
		display: flex;
		justify-content: right;
		align-items: right;
	}

	.none_l {
		display: none;
	}

	.con_area {
		width: 80%;
		padding: 30px;

	}

}

/* ===================================================
	★ パソコン画面用の配置（画面横幅が1001px以上の場合）
=================================================== */
@media screen and (min-width: 1001px) {

	/* タイトルエリア設定 */
	.t_area {
		width: 100%;
		min-height: 100%;
		position: relative;
		box-sizing: border-box;
		display: block;
	}

	/* 各メニューの位置指定 */
	/* タイトル画像 */
	.title_img {
		top: 150px;
		left: 0;
		right: 0;
		margin: 0 auto;
		position: absolute;
	}

	/* ご挨拶（右上1段目） */
	.menu_1 {
		top: 100px;
		right: 100px;
		position: absolute;
	}

	/* 活動内容（右上2段目） */
	.menu_2 {
		top: 100px;
		right: 200px;
		position: absolute;
	}

	/* 募集（右上3段目） */
	.menu_3 {
		top: 100px;
		right: 300px;
		position: absolute;
	}

	/* 戻る（左上） */
	.menu_4 {
		top: 50px;
		left: 50px;
		position: absolute;
	}

	/* DMグループ参加者募集（左下） */
	.menu_5 {
		top: 400px;
		left: 300px;
		position: absolute;
		transform: rotate(-20deg);
	}

	/* DMグループ参加者募集（左下） */
	.menu_6 {
		top: 100px;
		left: 300px;
		position: absolute;
		transform: rotate(-20deg);
	}

	/* ===================================================
	★スマホ・タブレット画面用の配置（画面横幅が1000px以下の場合）
	=================================================== */
	@media screen and (max-width: 1000px) {

		html,
		body {
			height: auto !important;
			/* 縦スクロールできるようにする */
			overflow-y: auto !important;
			box-sizing: border-box !important;
		}

		.t_area {
			display: flex !important;
			flex-direction: column !important;
			/* 上から下に縦並びにする */
			align-items: center !important;
			/* 中央寄せ */
			gap: 20px !important;
			/* 画像同士のすき間 */
			padding: 40px 20px !important;
			height: auto !important;
		}

		/* スマホ時は絶対配置をすべて解除して重なりを防ぐ */
		.title_img,
		.menu_1,
		.menu_2,
		.menu_3,
		.menu_4,
		.menu_5 {
			position: static !important;
			transform: none !important;
			max-width: 50% !important;
			width: 10%;
			/* スマホ画面に収まるサイズ */
		}

		/* タイトル画像を一番上に表示したい場合の順序調整 */
		.title_img {
			order: -1 !important;
			width: 15% !important;
		}
	}