/* ===================================================
	★ 画面の横幅が500px以下の設定
=================================================== */

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

	.title_area {
		position: relative;
	}


	/* タイトル画像 */
	.title_img {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
	}

	/* 幕恋情報局 */
	.menu_01,
	.menu_02 {
		top: 5%;
		left: 0;
		position: absolute;
	}

	/* 幕恋ファクトリー */
	.menu_03,
	.menu_04 {
		top: 5%;
		left: 25%;
		position: absolute;
	}

	/* 居酒屋ばくれん */
	.menu_05,
	.menu_06 {
		top: 5%;
		right: 0;
		position: absolute;
	}

	/* 雪月風花 */

	.menu_07,
	.menu_08 {
		bottom: 15vh;
		right: 5vw;
		position: absolute;
	}

	/* 戻る */
	.menu_09,
	.menu_10 {
		bottom: 5%;
		right: 10%;
		position: absolute;
	}

	/* おまけ 軍鶏小屋 */
	.menu_11,
	.menu_12 {
		bottom: 5%;
		left: 10%;
		position: absolute;
	}

	/* コピーライト */
	.menu_13 {
		bottom: 30vh;
		right: 30vw;
		position: absolute;
	}

}

/* ===================================================
	★ 画面の横幅が501～1000pxの設定
=================================================== */

@media screen and (min-width: 501px) and (max-width: 1000px) {

	.title_area {
		position: relative;
		overflow: hidden;
	}

	/* タイトル画像 */
	.title_img {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
		z-index: 1;
	}

	/* 幕恋情報局 */
	.menu_01,
	.menu_02 {
		top: 0;
		right: 5%;
		position: absolute;
		z-index: 2;
	}

	/* 幕恋ファクトリー */
	.menu_03,
	.menu_04 {
		top: 40%;
		right: 5%;
		position: absolute;
		z-index: 2;
	}

	/* 居酒屋ばくれん */
	.menu_05,
	.menu_06 {
		bottom: 0;
		right: 5%;
		position: absolute;
		z-index: 2;
	}

	/* 雪月風花 */
	.menu_07,
	.menu_08 {
		top: 90vh;
		right: 5vw;
		position: absolute;
		z-index: 2;
	}

	/* 戻る */
	.menu_09,
	.menu_10 {
		bottom: 0;
		left: 5%;
		position: absolute;
		z-index: 2;
	}

	/* おまけ 軍鶏小屋 */
	.menu_11,
	.menu_12 {
		top: 10%;
		left: 10%;
		position: absolute;
		z-index: 2;
	}

	/* コピーライト */
	.menu_13 {
		bottom: 20%;
		right: 35%;
		position: absolute;
		z-index: 2;
	}

}

/* ===================================================
	★ 画面の横幅が1001px以上の設定
=================================================== */

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

	.title_area {
		position: relative;
		overflow: hidden;
	}

	/* タイトル画像 */
	.title_img {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
	}

	/* 幕恋情報局 */
	.menu_01,
	.menu_02 {
		top: 10%;
		right: 5%;
		position: absolute;
	}

	/* 幕恋ファクトリー */
	.menu_03,
	.menu_04 {
		top: 30%;
		right: 5%;
		position: absolute;
	}

	/* 居酒屋ばくれん */
	.menu_05,
	.menu_06 {
		top: 50%;
		right: 5%;
		position: absolute;
	}

	/* 雪月風花 */
	.menu_07,
	.menu_08 {
		top: 70%;
		right: 5%;
		position: absolute;
	}

	/* 戻る */
	.menu_09,
	.menu_10 {
		bottom: 5%;
		left: 5%;
		position: absolute;
	}

	/* おまけ 軍鶏小屋 */
	.menu_11,
	.menu_12 {
		top: 10%;
		left: 7%;
		position: absolute;
	}

	/* コピーライト */
	.menu_13 {
		bottom: 20%;
		right: 40%;
		position: absolute;
	}

}