@charset "UTF-8";

/*  */

.aka{
	background-color:	red;
}


.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: #fac559;			/*--　全体背景色　---*/
	margin:		0;
}

.pc-n{
	display:	none;
}

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

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

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

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

.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;
	flex-direction: column
}

.tyuui{
	font-size:	0.8rem;
}

.moji-1{
	width:	100%;
	max-width:	700px;
	margin-top:	3rem;
}


	/*--　くま　---*/

.ugoki-1{
	position:	relative;
	margin:0 auto;
	max-width:	4rem;
	height:	10rem;
}

.ugoki1{
	max-width:	4rem;
	position:	absolute;
}

.ugoki2{
	max-width:	4rem;
	position:	absolute;
}

.ugoki3{
	max-width:	4rem;
	position:	absolute;
}

.ugok4{
	max-width:	4rem;
	position:	absolute;
}


.ugoki1{
	animation: kuma1 3s linear infinite;		/*--　名前　秒　一定の速度で始まって終わる　繰り返し　　---*/
}

@keyframes kuma1 {
	0% {
		opacity: 1 ;
	}
	20% {
		opacity: 1 ;
	}	
	21% {
		opacity: 0 ;
	}
	60% {
		opacity: 0 ;
	}
	61% {
		opacity: 1 ;
	}
	80% {
		opacity: 1 ;
	}
	81% {
		opacity: 0 ;
	}
	100% {
		opacity: 0 ;
	}
}

.ugoki2{
	animation: kuma2 3s linear infinite;		/*--　名前　秒　一定の速度で始まって終わる　繰り返し　　---*/
}

@keyframes kuma2 {
	0% {
		opacity: 0 ;
	}
	20% {
		opacity: 0 ;
	}	
	21% {
		opacity: 1 ;
	}
	40% {
		opacity: 1 ;
	}
	41% {
		opacity: 0 ;
	}
	100% {
		opacity: 0 ;
	}
}

.ugoki3{
	animation: kuma3 3s linear infinite;		/*--　名前　秒　一定の速度で始まって終わる　繰り返し　　---*/
}

@keyframes kuma3 {
	0% {
		opacity: 0 ;
	}
	40% {
		opacity: 0 ;
	}	
	41% {
		opacity: 1 ;
	}
	60% {
		opacity: 1 ;
	}
	61% {
		opacity: 0 ;
	}
	100% {
		opacity: 0 ;
	}
}

.ugoku4{
	animation: kuma4 3s linear infinite;		/*--　名前　秒　一定の速度で始まって終わる　繰り返し　　---*/
}

@keyframes kuma4 {
	0% {
		opacity: 0 ;
	}
	80% {
		opacity: 0 ;
	}
	81% {
		opacity: 1 ;
	}
	100% {
		opacity: 1 ;
	}
}



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

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

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

.setumei{
	margin-top:	2rem;
}

	/*--　本棚　設定　---*/

.tana-0{	
	margin-bottom:	5rem;
}

.tana{
	border: 	 1rem solid #8b4513;
	background-color:	#deb887;
	width:		25rem;
	margin:0 auto;
}

.syo{
	height:		7rem;
	margin:		1rem 0 0 0;
}

table img{
	height:		7rem;
}




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


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;
	}

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




}	/* 消しちゃダメ　 */


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


@media(max-width: 415px){

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

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

	.moji-1{
		width:	100%;
		max-width:	410px;
		margin-top:	1rem;
	}

	.sumaho-n{
		display:	none;
	}

	.setumei{					/*　全体説明　PC用　非表示 */
		margin-top:	0.5rem;
	}

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

	h1{
		font-size:	1.2rem;
		margin:		1rem 0 0 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;
	}

	.tyuui{
		font-size:	0.6rem;
	}


	.hp{
		font-size:	0.7rem;
	}

	footer{
		height:		3.5rem;
	}

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




	.tana{
		border: 	 0.5rem solid #8b4513;
		width:		17rem;
		margin:0 auto;
	}

	.tana-0{	
		margin-bottom:	4rem;
	}


	.syo{
		height:		5rem;
		margin:		0.5rem 0 0 0;
	}

	.ugoki1{
		max-width:	3rem;
	}

	.ugoki2{
		max-width:	3rem;
	}

	.ugoki3{
		max-width:	3rem;
	}

	.ugok4{
		max-width:	3rem;
	}


	.ugoki-1{
		max-width:	3rem;
		height:	8rem;
	}



}	/* 消しちゃダメ　 */