@charset "UTF-8";

/*  */

.warappr{
	max-width:	950px;
	margin-right: 	auto;
	margin-left : 	auto;
	padding:	0;
	margin-top:	0;
	text-align:	center;
}

body {
	font-family: "Arial", "メイリオ", sans-serif;
	background-color: #ffefd5;			/*--　全体背景色　---*/
	margin:		0;
}

h1{
	text-align:	center;
	margin:		3rem 0 0rem 0;
}

p{
	display: inline-block;
	text-align: left;
	max-width:	800px;
	color:		#583822;
}

	/*--　文字　色変更　---*/

.iro{
	color:			#993300;
	text-decoration:	none;
}


/*--◆◆-----------------------------　ヘッダー	------------------------------*/

.header{
	text-align:	center;
}

.header img{
	width:		100%;				/* ロゴ　max-widthの前に　width:	100%; をつける　*/
	max-width:	950px;
	margin-top:	1rem;
}

	/*--　タイトル文字　設定　---*/

.moji_zentai{
	display:	flex;
	align-items:	center;
	justify-content:	center;
}
.moji_zentai img{
	width:	5rem;
}

	/*--　歯車　設定　---*/

.neji_zentai{
	height:		rem;
	width:		rem;
	display:flex;
	align-items:	center;
	justify-content:	center;
}

.neji-1{
	width:		3rem;
	height:		3rem;
}

.neji-2{
	width:		5rem;
	height:		5rem;
}

	/*--　タイトル　本　回転　---*/

.moji4{
	animation: moji 5s linear infinite;
}

@keyframes moji{
  0%{ transform:rotate(0);}
  10%{ transform:rotate(0);}
  25%{ transform:rotate(45deg);}
  50%{ transform:rotate(-45deg);}
  75%{ transform:rotate(-45deg);}
  100%{ transform:rotate(360deg); }
}

	/*--　小さい歯車　設定　回転　---*/

.neji1{
  animation: rotate-anime 60s steps(60) infinite;
}

@keyframes rotate-anime {
  0%  {transform: rotate(0);}
  100%  {transform: rotate(360deg);}
}

	/*--　大きい歯車　設定　回転　---*/

.neji2{
  animation: rotate-anime2 60s steps(60) infinite;
}

@keyframes rotate-anime2 {
  100%  {transform: rotate(0);}
  0%  {transform: rotate(360deg);}
}

	/*--　展示写真　設定　---*/

.tenji-syasin img{
	max-width:	20rem;
	margin-top:	3rem;
}

	/*--　展示文章　設定　---*/

.setumei{
	margin-top:	2rem;
}


.setumei-dai{
	font-size:	1.2rem;
	font-weight:	bold;
	margin-top:	1rem;
}

/*--◆◆-----------------------------　フッター	------------------------------*/


footer{
	position:	fixed;
	width:		100%;
	background-color:	#993300;
	bottom:	0;	
}

.hp{
	text-align:	right;		/* トップページのリンク　 */
	margin-top:	1rem;
	margin-bottom:	0rem;
	margin-right:	1rem;
}

.hp a{
	color:		#f5deb3;
}



/**********************	********************************	768	************/

@media(max-width: 768px){

	.warappr{
		max-width:	768px;
		margin:		0 0.3rem;	
		padding:	0;
	}

	main{
		margin:		0 0.5rem;
	}



	.header img{
		max-width:	768px;
	}

	h3{
		line-height:	1.5rem;
	}


}	/* 消しちゃダメ　 */


/******************************************************		415	************/


@media(max-width: 415px){

/*--◆◆-----------------------------　　共通設定	------------------------------*/

	.warappr{
		max-width:	415px;
		margin:		0 0.3rem;	
		padding:	0;
	}

	.setumei-zenntai{					/*　全体説明　PC用　非表示 */
		display:	none;
	}
	.logo-pc{						/*　PC  ロゴ　消す */
		display:	none;
	}

	.logo-tab{						/*　Tab  ロゴ　表示 */
		display:	inline;
	}

	p{
		font-size:	0.8rem;
		text-align:	left;
		line-height:	1.1rem;		
	}

	h1{
		font-size:	1.2rem;
		margin:		2rem 0;
	}

	h3{
		line-height:	1.3rem;
		font-size:	1rem;
	}

	.header img{
		max-width:	415px;
	}

	.tenji-syasin img{
		margin-top:	0;
		max-width:	10rem;
	}

	.tenji-syasin1{
		margin-top:	0.5rem;
	}

	.setumei-dai{
		font-size:	0.9rem;
		margin-top:	0.3rem;
	}

	.hp{
		font-size:	0.7rem;
	}

	footer{
		height:		3.5rem;
	}

/*--◆◆-----------------------------　今回のみ	------------------------------*/


	.moji_zentai img{
		width:	2rem;
	}


	.neji-1 img{
		width:		2rem;
		height:		2rem;
	}

	.neji-2 img{
		width:		3rem;
		height:		3rem;
	}



}	/* 消しちゃダメ　 */