@charset "UTF-8";
body,html {
	margin:0px;background-color:#fffde1;
	font-family:Suzumushi;}
/* ヘッター*/
	nav {
		top:0;
		position: fixed;
		background-color:#d6b845 ;
		width:100%;
		height: 100px;
		z-index: 100;}

/*ヘッター画像(ホーム)*/
	.name{
		width: 100%;
		text-align: center;}

	.name img:nth-of-type(1){
		height: 80px;}

	.name img:nth-of-type(2){
		display: none;}

	.name img:nth-of-type(3){
		display: none;}

/*ヘッター画像（略歴）*/
	.name.kazinfo {
		width: 100%;
		text-align: center;}
	.name.kazinfo img:nth-of-type(1){
		display: none;}

	.name.kazinfo img:nth-of-type(2){
		display:inline;
		height:80px;}

	.name.kazinfo img:nth-of-type(3){
		display: none;}

/*ヘッター画像（出展・取扱店舗紹介）*/
	.name.saleinfo {
		width: 100%;
		height: 100px;
		text-align: center;}

	.name.saleinfo img:nth-of-type(1){
		display: none;}

	.name.saleinfo img:nth-of-type(2){
		display:none;}

	.name.saleinfo img:nth-of-type(3){
		display: inline;
		height: 80px;}
/*メニューボタン*/
	.btn{
		position: fixed;
		width:60px;
		height: 60px;
		top:30px;
		right: 10px;
		background-image:url("image/btn.png");
		background-size: cover;
		z-index: 100;}

	.btn i{
		position: absolute;
		left: 10px;
		width: 40px;
		height: 2px;
		opacity:1;
		background-color: aliceblue;
		transition:.5s;}

	.btn i:nth-of-type(1){
		top: 15px;}

	.btn i:nth-of-type(2){
		top: 25px;}

	.btn i:nth-of-type(3){
		top: 35px;}

/*メニュー選択肢画面*/
	.menu{
		position: fixed;
		top: 15px;
		bottom: 0;
		width: 100%;
		height: 95%;
		text-align: center;
		background-color:rgba(0,0,0,0.5);
		z-index: 99;
		opacity: 0;
		pointer-events: none;
		transition:.5s;}

	.menu ul{
		list-style-type: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;}

	.menu ul li{
			height: 200px;
			width:20%;
			margin-top: 20px;
			padding-top: 30px;
			margin-right: 5%;
			font-size: 20px;
			background-color: #fffde1;
			border: 1px solid #d6b845;
			cursor: pointer;}


	.tate{
		display: inline-block;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;}

	.tate a{
		text-decoration:none;
		color: #000000;}

/* ハンバーガークリック時*/
	.btn.active{
		position: fixed;
		top: 30;
		right: 10;
		width: 60px;
		height: 60px;
		z-index: 100;}

	.btn.active img{
		opacity:0;}

	.btn.active i{
		opacity: 1;
		z-index: 100;}

	.btn.active i:nth-of-type(1){
		transform: translateY(10px) rotate(45deg)}

	.btn.active i:nth-of-type(2){
		opacity: 0;}

	.btn.active i:nth-of-type(3){
		transform: translateY(-10px) rotate(-45deg)}

	.menu.active{
		opacity: 0.8;
		z-index: 99;
		pointer-events: auto;}
	


/*本体*/
	#main{
		position:absolute;
		top:100px;
		width:100%;
		background-color: aliceblue;}

	.title {
		text-align: center;
		background-color:#d6b845;
		}

	.insta{
		height: 35px;
		margin: 15px;}
	



/*ホーム*/
	.home{
		position:fixed;
		width:100%;
		pointer-events: auto;
		z-index: 50;
		opacity: 1;}
	#homeimg{
		width:100%;
		height:350px;
		}
	#mainimg{
		width: 100%;
		height:100%;
		object-fit: cover;
		animation:imgchang 8s infinite;
		opacity: 0;
		}
		@keyframes imgchang{
			0%  {opacity: 0;}
			35% {opacity: 1;}
			50% {opacity: 1;}
			75% {opacity: 1;}
			100%{opacity: 0;}
		}

	.news{
		margin: 10px;
		padding: 0px;
		height: 150px;
		border:2px solid #d6b845 ;
	}


	.news ul{
		list-style: none;
		margin-left: 0px;}
	.news ul li{
		margin-top: 10px;
		border-bottom: 1px dashed black;}

	.home.close{
		z-index: 1;
		opacity: 0;
		pointer-events: none;}
	

/*作家紹介*/
	.info{
		position:absolute;
		margin:10px 5%;
		width: 90%;
		border:2px solid  #d6b845;
		z-index: 2;
		opacity: 0;}

	.infoname{
		border-bottom:3px solid #e94709;
		width: 95%;
		margin: auto
		}

	.infoname img{
		height: 100px;
		object-fit: cover;
		margin-left: 30px;
		margin-top: 20px;}

	.info ul{
		list-style-type: none;
		padding: 20px;
		}

	.info ul li{
		margin: 10px;}

	.info.active{
		z-index: 50;
		opacity: 1;}



/*出展・取扱情報*/
	#saleinfo{
		position:absolute;
		margin: 10px 5%;
		width: 90%;
		opacity: 0;
		z-index: 3;
		pointer-events: none;}

	.saleinfo {
		border:1px solid #d6b845;
		margin-bottom:30px;}

	.shopname{
		width: 80%;
		margin: 20px 0px 20px 0px;
		font-size: 20px;
		margin-bottom: 10px;
		border-bottom: 1px dashed black;}

	.shopinfo{
		margin:0px 0px 10px 20px;
		font-size: 15px}
	.shopinfo img{
		width: 200px;}

	.saleinfo ul {
		list-style-type: none;}


	#saleinfo.active{
		opacity:1;
		z-index: 50;
		pointer-events: auto;}
/*フッター*/		
	#footer{
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 30px;
		background-color:#b19423d1;
		z-index: 100;
		text-align: center;
	}

/*pc用設定*/

@media screen and (min-width: 751px){
		/*ナビゲーションメニュー*/
			#nav.pc{
				background-color:transparent;
				opacity: 1;
				height: 100px;}
			.btn{
				opacity: 0;
				pointer-events: none;}

			.menu.pc{
				opacity: 1;
				pointer-events: auto;
				position: fixed;
				top: 0px;
				right: 5%;
				height: 170px;
				width:300px;
				background-color:transparent;
				z-index: 99;
				pointer-events: auto;
				transition: none;}
		
			.menu.pc ul{
				width: 100%;
				height:auto ;
				background-color: transparent;}

			.menu.pc ul li{
				background-color:transparent;
				height: 100%;
				width: 20px;
				padding: 0px;
				font-size: 20px;
				border:none;
				cursor: pointer;}
		/*メイン設定*/
			#main{
				top:0p;}
				

			/*ホーム画面設定*/
				.home.pc{
					position:fixed;
					top:0px;}

				#homeimg{
					height: 600px;
				}

			/*作家紹介*/
		}