/****************************
 * レイアウト・全体
 ****************************/
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&family=Noto+Serif+JP:wght@200..900&display=swap');

	html, body
	{
		width:100%;
		height:100%;
		margin:0px;
		padding:0px;
	}
	html
	{
		font-size: 62.5%;
		scroll-behavior: smooth;
		background:#f4f3ef;
	}
	body
	{
		color:#1c1a17;
		background:#f4f3ef;
		font-family: "Noto Serif JP", serif;
		font-weight: 400;
		position: relative;
		line-height: 1.7;
		letter-spacing: 0.05em;
	}
	main
	{
		display: block;
		margin:0px;
		padding:0px;
	}
	section
	{
		display: block;
		width: 100%;
		margin:0;
		padding-bottom:80px;
	}
	section > .inner
	{
		width: 100%;
		max-width: 1200px;
		margin-inline:auto;
	}
	figure
	{
		margin:0px;
		padding:0px;
	}
	figure > img
	{
		width: 100%;
		height:auto;
		object-fit: contain;
	}
	aside.kome
	{
		color:gray;
		font-size: 1.4rem;
	}
	aside.kome p
	{
		display: flex;
	}
	aside.kome p::before
	{
		content: "※";
		margin-right: .25em;
	}

	.pc{display:block;}
	span.pc{display:inline;}
	.sp{display:none;}

/****************************
 * ヘッダー
 ****************************/
	header
	{
		width: 100%;
		max-width: 1200px;
		height:58vh;
		margin:0px auto 30px;
		padding:0;
		background:url(../images/main.jpg) no-repeat center center#bf8b37;
		background-size: cover;
		position: relative;
	}
	header h1
	{
		width: fit-content;
		position: absolute;
		font-size:3.6rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.07em;
		color:#fff;
		text-align: center;
		right:70px;
		bottom:30px;
	}
	header h1 p
	{
		font-size: 2.2rem;
		line-height: 1;
		margin:0;
	}
	header h1 p.name
	{
		font-size: 3.2rem;
		margin-bottom:10px;
	}
	header h1 p.kana
	{
		font-size: 1.2rem;
		margin-bottom:16px;
		opacity: 0.6;
	}
	header h1 p.title
	{
		font-size: 3.6rem;
		margin-top:20px;
		margin-bottom:24px;
	}
/****************************
 * フッター
 ****************************/
	footer
	{
		line-height:1.3;
		text-align:center;
		background:#000;
		color:#fff;
		padding:8px;
		font-size:12px;
	}

/****************************
 * メイン
 ****************************/
	section.read .catchphrase
	{
		display: grid;
		place-content: center;
		width: 100%;
		height: calc(100vh - 58vh - 30px);
		position: relative;
		padding-top:0;
	}
	section h6
	{
		font-family: "Noto Sans JP", sans-serif;
		color:#C4BCAC;
		letter-spacing: 0.3em;
		position: absolute;
		left:56px;
		font-weight: 400;
	}
	section h6::after
	{
		content:"";
		position: relative;
		bottom:-8px;
		left:0;
		display: block;
		width:30px;
		height:1px;
		background-color: #C4BCAC;
	}
	section .catchphrase h2
	{
		font-size:4rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-align: center;
		position: relative;
		padding-top: 15px;
		padding-bottom: 35px;
	}
	section .catchphrase:before,
	section .catchphrase:after
	{
		content:"";
		position: absolute;
		bottom: 20px;
		left: calc(50% - 0.5px);
		width: 1px;
		height: 25px;
		border-radius: 9999px;
		background-color: #d1ccc1;
		transform-origin: 50% calc(100% - 0.5px);
	}
	section .catchphrase:before
	{
		transform: rotate(45deg);
	}
	section .catchphrase:after
	{
		transform: rotate(-45deg);
	}
	section .catchphrase h2 p
	{
		font-size:2.4rem;
		line-height: 1;
		padding:8px 16px;
		margin:24px 0 24px;
		font-weight: 400;
		color:#979184;
		border: 1px solid #979184;
	}
	section.read .inner .read_txt
	{
		font-size:1.7rem;
		padding-inline:56px;
		line-height: 2.5;
		margin-bottom:30px
	}

	section.comment .inner
	{
		position: relative;
		padding-inline: 56px;
		margin-bottom: 80px;
	}
	section.comment .inner h2
	{
		position: absolute;
		top:40px;
		left:50%;
		transform:translate(-50%, 0);
		font-size:2.8rem;

	}
	.comment_wrap
	{
		width: 80%;
		padding:120px 120px 30px;
		margin-inline: auto;
		border: 1px solid #d1ccc1;
		outline: 1px solid #d1ccc1;
		outline-offset: 10px;
		background-color: #ffffffaf;
		font-size: 1.7rem;
		line-height: 2.5;
	}
	.comment_wrap p:not(:last-child)
	{
		margin-bottom: 1.5em;
	}

	.bookinfo_wrap
	{
		display: flex;
		gap:80px;
		width: fit-content;
		margin-inline: auto;
	}
	.bookinfo_wrap figure
	{
		width: 256px;
	}
	.bookinfo_wrap figure img
	{
		width: 100%;
		box-shadow:0 10px 20px #a5a5a5;
	}
	.bookinfo_wrap > div
	{
		width: calc( 100% - 256px - 80px );
	}
	.bookinfo_wrap > div h6
	{
		position: static;
		margin-bottom:30px;
	}
	.bookinfo_wrap > div h2
	{
		font-size:2.4rem;
	}
	.bookinfo_wrap > div h2 span
	{
		display: inline-block;
		font-size:3.0rem;
		margin-right: 0.5em;
	}
	.bookinfo_wrap > div h2 strong
	{
		display: block;
		text-indent: -0.5em;
		font-size:3.6rem;
		letter-spacing: 0.3em;
	}
	.bookinfo_wrap > div > div
	{
		margin-top: 30px;
	}
	.bookinfo_wrap > div dl
	{
		display: flex;
		gap:1.5em;
		font-size: 1.6rem;
	}
	.bookinfo_wrap > div dt
	{
		width: 4em;
		white-space: nowrap;
		text-align-last: justify;
		font-weight: normal;
	}
	.bookinfo_wrap > div dd
	{
		margin-left:0;
		width: calc(100% - 3.5em - 1.5em);
	}
	.book_detail
	{
		padding:0.8em 1.2em;
		margin-top:12px;
		background-color: #fff;
		font-size:1.4rem;
	}
	.book_detail p:not(:last-child)
	{
		margin-bottom:16px;
	}

	section:is(.event,.shop) h2
	{
		text-align: center;
		font-size: 3.6rem;
		position: relative;
		margin: 40px 0;
		padding-top:20px;
	}
	section:is(.event,.shop) h2::before
	{
		content: "";
		position: absolute;
		top: -27px;
		left: 50%;
		transform: translateX(-50%);
		width: 240px;
		height: 12px;
		display: block;
		background:
				linear-gradient(#d1ccc1, #d1ccc1) left 70% / 35% 1px no-repeat,
				linear-gradient(#d1ccc1, #d1ccc1) right 70% / 35% 1px no-repeat;
		border-radius: 50%;
	}
	section:is(.event,.shop) h2::after
	{
		content: "";
		position: absolute;
		top: -23px;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
		width: 8px;
		height: 8px;
		border: 1px solid #d1ccc1;
		background-color: #d1ccc1;
	}
	.event_wrap
	{
		width: 100%;
		max-width: 890px;
		margin-inline:auto;
		background-color:#fff;
		padding:40px 40px 30px 40px;
		font-size: 2.1rem;
	}
	.event_wrap h3
	{
		font-family: "Noto Sans JP", sans-serif;
		color:#827A6B;
		font-weight: 400;
		font-size: 1.6rem;
		padding-bottom: 4px;
		border-bottom: 1px solid #827A6B;
		margin-bottom: 24px;
	}
	.event_wrap h3 + ul
	{
		margin-bottom: 48px;
	}
	.event_wrap h3 + ul li:not(:last-child)
	{
		margin-bottom:16px;
	}
	.event_wrap h3 + ul a
	{
		font-size: 2.4rem;
		color:#1c1a17;
		border-bottom:1px dashed #b1ada5;
		text-decoration: none;
		font-weight: 700;
		letter-spacing: 0.05em;
	}
	.event_wrap h3 + ul a:hover
	{
		opacity: 0.6;
		border-bottom:1px dashed #e2e0da;
	}
	.event_wrap h3 + ul a span
	{
		display: inline-block;
		align-items: center;
		font-size: 1.6rem;
		padding-left: 0.8em;
		color:#b1ada5;
		vertical-align: middle;
		position: relative;
	}
	.event_wrap h3 + ul a span::after
	{
		content:"";
		width:0.8em;
		height: 0.8em;
		margin-left: 0.3em;
		display: inline-block;
		background-color: #b1ada5;
		mask-image: url(../images/arrow.svg);
		mask-position: center;
		mask-size: contain;
		mask-repeat: no-repeat;
	}
	.event_detail
	{
		padding:30px 20px;
		margin-bottom: 8px;
		background-color: #f4f3ef;
	}
	.event_detail p
	{
		margin-bottom:16px;
	}
	.event_detail dl
	{
		margin:0px 0 5px 1em;
		display: flex;
		gap:0.5em;
		font-size: 1.8rem;
		font-family: "Noto Sans JP", sans-serif;
	}
	.event_detail dl:last-of-type
	{
		margin-bottom: 32px;
	}
	.event_detail dt
	{
		width: 5.5em;
		font-weight: 400;
	}
	.event_detail dd
	{
		font-weight: 400;
	}
	.event_detail figure
	{
		width: 160px;
		margin-inline: auto;
	}
	.event_detail figure img
	{
		width: 100%;
	}

	.shop_wrap
	{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto 1fr;
		grid-column-gap: 30px;
		grid-row-gap: 30px;
	}
	.official { grid-area: 1 / 1 / 2 / 3; }
	.rakuten { grid-area: 2 / 1 / 3 / 2; }
	.seven { grid-area: 2 / 2 / 3 / 3; }

	.shop_box
	{
		width: 100%;
		display: block;
		padding:20px;
		border:1px solid #dcd8ce;
	}
	.shop_box h3
	{
		width: 100%;
		display: block;
		padding:8px 0;
		background-color: #1c1a17;
		color:#fff;
		font-size: 1.5rem;
		font-family: "Noto Sans JP", sans-serif;
		text-align: center;
		letter-spacing: 0.08em;
		margin-bottom: 32px;
	}
	.shop_box .info
	{
		width: fit-content;
		margin-inline:auto;
		font-size:2rem;
		padding-inline:16px;
	}
	.shop_box .info p:not(:last-of-type)
	{
		margin-bottom:24px;
	}
	.shop_box .info figure
	{
		width: 200px;
		margin:32px auto 24px;
	}
	.shop_box.official .info figure
	{
		width: 300px;
		margin-inline:auto;
	}

	.btn_wrap
	{
		width:100%;
		margin-inline: auto;
		margin-bottom: 16px;
	}
	.btn_wrap a
	{
		width:90%;
		max-width: 400px;
		display: block;
		margin-inline: auto;
		text-align: center;
		border: 1px solid #1c1a17;
		padding:8px;
		font-size: 1.5rem;
		color:#1c1a17;
		text-decoration: none;
		font-family: "Noto Sans JP", sans-serif;
	}
	.btn_wrap a:hover
	{
		color:#fff;
		background-color: #1c1a17;
	}
	.shop_box_inner p .ylw
	{
		background:linear-gradient(transparent 60%, #ff6 60%);
	}
	.shop_box_inner + aside
	{
		width: fit-content;
		display: block;
		margin-inline: auto;
	}
	.shop_wrap + aside
	{
		width: fit-content;
		display: block;
		margin-inline: auto;
		margin-top: 24px;
	}

	.event.panel h2 + aside
	{
		width: fit-content;
		display: block;
		margin-inline: auto;
		margin-top: -24px;
		margin-bottom: 24px;
	}
	.panel_photo
	{
		width: 90%;
		margin-inline: auto;
		display: flex;
		gap:24px;
	}
	.event_detail .panel_photo figure
	{
		width:calc((100% - 48px) / 3);

	}