/****************************
 * レイアウト・全体
 ****************************/
	html, body
	{
		width:100%; height:100%;
		margin:0px; padding:0px;
		font-size:15px; color:#fff;
		line-height:170%; letter-spacing:1px;
		background:#fff;
		font-family: "Noto Sans JP", sans-serif;
		overflow-x: hidden;
	}

	.sp_only{display:block;}
	.pc_only{display:none;}
	span.pc_only{display:none;}
	p.sp_only{font-weight:normal;font-size:9px;margin-top:5px;line-height:1.5;}
/****************************
 * ヘッダー
 ****************************/
	header
	{
		margin:0px auto 0px;
		padding:0px 0 0px;
		position: relative;
		z-index: 2;
	}
	header :is(.bg1,.bg2) img
	{
		width:260px;
		height:auto;
	}
	header .bg1
	{
		top:250px;
		left:50%;
	}
	header .bg2
	{
		top:680px;
		left:-40%;
	}
	header h1
	{
		width:100%;
		margin:auto;
		flex-direction: column;
		align-items: center;
	}
	.caption
	{
		text-align: center;
		color:#3e3a39;
		padding:50px 0 64px 0;
	}
	.caption .copy
	{
		font-size:1.4rem;
		line-height: 1.5;
	}
	.caption .read
	{
		font-size:0.9rem;
		padding-inline: 15px;
		line-height: 1.8;
	}

/****************************
 * フッター
 ****************************/

/****************************
 * main
 ****************************/
	main div.wrap
	{
		width:100%;
		padding:0 20px;
	}
	main .bookinfo1
	{
		width:100%;
		margin:0px 0 0px;
		padding:35px 0 35px;
		background: rgb(220, 224, 225);
		color:#3e3a39;
	}
	main .bookinfo2
	{
		width:100%;
		margin:0px 0 50px;
		padding:35px 0 35px;
		background: rgb(17, 19, 42);
		color:#fff;
	}
	main .bookinfo_wrap
	{
		flex-direction: column;
		align-items: center;
		gap:30px;
		padding:0 0px;
	}
	.bookinfo2 .bookinfo_wrap 
	{
		flex-direction: column-reverse;
	}
	.bookinfo_wrap > div h2
	{
		font-size:1.2rem;
		line-height:1.6;
		font-weight: 600;
		margin-bottom:20px;
	}
	.bookinfo2 + aside
	{
		width:80%;
		margin:-40px auto 40px;
	}
	main .event
	{
		width:100%;
		padding:0px 0 40px;
	}

	.event .event_date + figure
	{
		width: 100%;
		margin-inline: auto;
	}
	.event .event_date + figure img
	{
		width: 100%;
	}
	.btn_wrap
	{
		text-align:center;
		margin:20px auto 30px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap:20px;
	}
	.event_info aside.kome
	{
		padding:10px 0px 5px;
		background: #fff;
		font-size:0.8rem;
		line-height: 1.5;
		text-align: left;
		margin:10px 0 0 1.5em; 
	}
	main .e_commerce
	{
		padding:40px 0 10px;
	}
	.e_commerce h3
	{
		text-align: center;
		font-size:1.6rem;
		font-weight: 600;
		color:#3e3a39;
		margin-bottom:20px;
		padding:30px 0;
		letter-spacing: 5px;
		background:url(../images/bg4.png) no-repeat;
		background-size: contain;
		background-position: center center;
	}
	.shop_box
	{
		width:100%;
		margin:0 auto 30px;
		text-align: center;
		background: #fff;
	}
	.shop_box h4
	{
		padding:8px;
	}
	.shop_box .inner
	{
		padding:20px;
	}
	.shop_box .postcard img
	{
		width:100%;
	}
	.shop_box .info p:first-child
	{
		margin-bottom: 0.5em;
		text-align: center;
	}
	.shop_box aside.kome 
	{
		padding: 0px 0px 5px;
		background: #fff;
		font-size: 0.8rem;
		line-height: 1.5;
		text-align: left;
		margin: 10px 0 0 1.5em;
		font-weight: 100;
	}
	.shop_box aside.kome p
	{
		text-align: left!important;
	}
	main .shop
	{
		width:100%;
		padding:40px 0 30px;
		color:#333;
	}
	.shop h2
	{
		text-align: center;
		font-size:1.6rem;
		font-weight: 600;
		color:#3e3a39;
		margin-bottom:20px;
		padding:30px 0;
		letter-spacing: 5px;
		background:url(../images/bg4.png) no-repeat;
		background-size: contain;
		background-position: center center;
	}
	.shop .shop_box
	{
		width:90%;
		margin:0 auto 0;
		text-align: center;
		padding:0px 0 0px;
	}
	.shop .shop_box .info figure img
	{
		width: 60%;
	}
	
	.shop .shop_box .info figure.shop_postcard.fix img
	{
		width:100%;
		height:auto;
	}