@charset "UTF-8";

body{
	margin: 0px;
	padding: 0px;
}
p{
	margin: 0px;
	padding: 0px;
}

#topimg{
	background-image: url(top.jpg);/*←背景画像を指定*/
	background-repeat: no-repeat;/*←背景画像は繰り返さずに1枚だけ表示*/
	background-size: cover;/*←背景画像をトリミングしつついいかんじに表示*/
	background-position: 50%  50%;/*←背景画像の真ん中から表示*/
	width: 100%;/*←これ見ているデバイスの横の画面サイズいっぱい*/
	height: 100vh;/*←これ見ているデバイスの縦の画面サイズいっぱい*/
	display: flex;
	justify-content: center;
	align-items: center;
}

.main_tit{
	background-color: #000000;
	transform: rotate(-5deg);/*←これで角度を変えられます*/
	padding: 10px;
	font-size: 1.2em;
	color: #ffffff;
}

.setsumei{
	width: 370px;
	margin-top: 100px;
	margin-bottom: 100Px;
	margin-left: auto;
	margin-right: auto;
}


.haikeigazou{
	background-image: url(cat.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 350px;
	height: 277px;
	color: #ffffff;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.5em;
}

.haikei_pattern{
	background-image: url(pattern.gif);
	background-repeat: repeat;
	width: 350px;
	height: 250px;
	color: #ffffff;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.haikei_pattern_x{
	background-image: url(pattern.gif);
	background-repeat:repeat-x;
	background-color: #eeeeee;
	width: 350px;
	height: 250px;
}
.haikei_pattern_y{
	background-image: url(pattern.gif);
	background-repeat:repeat-y;
	background-color: #eeeeee;
	width: 350px;
	height: 250px;
}