@charset 'UTF-8';
/*----------------------------------------

	- pageTitle
	- toc(accordion)
	- welcome
	- common
		- speech
		- item
		- summary
		- flow
		- btn
	- s01
	- s02
	- s03
	- s04
	- s05
	- firstJingu
	- side scroll animation
	- scroll effect

-----------------------------------------*/
.content {
    background-color: var(--color-first-background01);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	margin-block-end: 0;
}

@media (width <=800px) {
	.content {
		display: block;
		margin-block-end: 0;
	}
}

.content_wrap {
	inline-size: 450px;
	margin-inline: auto;
	grid-column: 2/3;
	grid-row: 1/2;
	padding-block-end: 80px;
	box-shadow: 0 0 9px rgb(from var(--color-black01) r g b / 10%);
}

@media (width <=800px) {
	.content_wrap {
		inline-size: 100%;
		padding-block-end: 64px;
		box-shadow: unset;
	}
}

/*----------------------------------------
	side01 / side02
-----------------------------------------*/
[class*="sideContent0"] {
	position: sticky;
	top: 0;
	block-size: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (width <=800px) {
	[class*="sideContent0"] {
		display: none;
	}
}

.sideContent01 {
	grid-column: 1/2;
	overflow: hidden;
}

.sideContent02 {
	grid-column: 3/4;
	overflow: hidden;
}

.sideContent01 {
	color: var(--color-white01);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size18);
	line-height: var(--line-height15);
}

.sideContent01 dl {
	display: grid;
	gap: 20px;
	padding-inline: 20px;
}

.sideContent01 dt {
	color: var(--color-first-peacock01);
	font-size: var(--font-size16);
	line-height: var(--line-height15);
	font-weight: var(--font-weight-medium);
}

.sideContent01 dd {
	padding-block: 8px;
	border-block-end: 1px solid var(--color-first-peacock01);
}

.sideContent01 dd a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-first-peacock01);
	font-size: var(--font-size16);
	line-height: var(--line-height15);
	font-weight: var(--font-weight-medium);
}

.sideContent01 dd a span {
	font-family: var(--font-family-mincho);
	font-size: var(--font-size12);
	line-height: var(--line-height15);
}

.sideContent02 img {
	inline-size: 120px;
}

/*----------------------------------------
	pageTitle
-----------------------------------------*/
.pageTitle {
	inline-size: 100%;
	margin-block-start: 24px;
}

.pageTitle .pageCategoryUnique {
	font-family: var(--font-family-mincho);
	font-size: var(--font-size18);
	line-height: var(--line-height15);
	text-align: right;
	padding-inline: 27px;
}

.pageTitle .pageTitleContainer {
	margin-block-start: 48px;
}

.pageTitle .pageTitleContainer h1 {
	position: relative;
	z-index: 2;
	inline-size: fit-content;
	margin-inline: auto;
}

.pageTitle .pageTitleContainer h1 > span {
	display: block;
}

.pageTitle .pageTitleContainer h1 > span:nth-of-type(1) {
	color: var(--color-first-peacock01);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size50);
	line-height: var(--line-height15);
	text-align: center;
}

.pageTitle .pageTitleContainer h1 > span:nth-of-type(1) > span {
	letter-spacing: -.5em;
}

.pageTitle .pageTitleContainer h1 > span:nth-of-type(2) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-block-start: -15px;
}

.pageTitle .pageTitleContainer h1 > span:nth-of-type(2) span:nth-of-type(1) {
	color: var(--color-first-gold01);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size50);
	line-height: var(--line-height15);
}

.pageTitle .pageTitleContainer h1 > span:nth-of-type(2) span:nth-of-type(2) {
	font-family: var(--font-family-mincho);
	color: var(--color-first-peacock01);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size28);
	line-height: var(--line-height15);
	display: grid;
	grid-template-columns: repeat(3, auto);
	align-items: center;
	gap: 9px;
	padding-block-start: 12px;
}

.pageTitle .pageTitleContainer h1 > span:nth-of-type(2) span:nth-of-type(2)::before,
.pageTitle .pageTitleContainer h1 > span:nth-of-type(2) span:nth-of-type(2)::after {
	content: "";
	display: block;
	inline-size: 14px;
	block-size: 1px;
	background-color: var(--color-first-peacock01);
}

.pageTitle .pageTitleContainer .img {
	position: relative;
	block-size: fit-content;
	aspect-ratio: 1;
	padding-inline: 12px;
	padding-block-start: 15px;
}

.pageTitle .pageTitleContainer .img::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	margin: auto;
	inline-size: 96%;
	aspect-ratio: 1;
	background-color: var(--color-first-offwhite01);
	opacity: .8;
	border-radius: 50%;
}

.pageTitle .pageTitleContainer img {
	position: relative;
	z-index: 1;
}

.pageTitle .pageTitleContainer .pageTitleContainerInner {
	padding-block-start: 21px;
	margin-block: 0 auto;
	margin-inline: 36px auto;
}

.pageTitle .pageTitleContainer .pageTitleContainerInner p {
	color: var(--color-first-peacock01);
	font-size: var(--font-size18);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height15);
	text-align: left;
}

@media (width <=800px) {
	.pageTitle {
		inline-size: 100%;
		margin-block-start: 20px;
	}

	.pageTitle .pageCategoryUnique {
		inline-size: 88%;
		margin-inline: auto;
		padding-inline: 0;
		font-size: var(--font-size16);
	}

	.pageTitle .pageTitleContainer {
		margin-block-start: 40px;
	}

	.pageTitle .pageTitleContainer h1 {
		inline-size: fit-content;
		margin-inline: auto;
	}

	.pageTitle .pageTitleContainer h1 > span:nth-of-type(1) {
		font-size: var(--font-size44);
		text-align: center;
		padding-inline: 0;
	}

	.pageTitle .pageTitleContainer h1 > span:nth-of-type(2) {
		justify-content: center;
		flex-wrap: wrap;
		gap: 0 8px;
		margin-block-start: -10px;
	}

	.pageTitle .pageTitleContainer h1 > span:nth-of-type(2) span:nth-of-type(1) {
		font-size: var(--font-size44);
	}

	.pageTitle .pageTitleContainer h1 > span:nth-of-type(2) span:nth-of-type(2) {
		font-size: var(--font-size24);
		gap: 8px;
	}

	.pageTitle .pageTitleContainer h1 > span:nth-of-type(2) span:nth-of-type(2)::before,
	.pageTitle .pageTitleContainer h1 > span:nth-of-type(2) span:nth-of-type(2)::after {
		inline-size: 12px;
	}

	.pageTitle .pageTitleContainer .img {
		padding-inline: 11px;
		padding-block-start: 11px;
	}

	.pageTitle .pageTitleContainer .pageTitleContainerInner {
		padding-block-start: 16px;
		margin-inline: 32px auto;
	}

	.pageTitle .pageTitleContainer .pageTitleContainerInner p {
		font-size: var(--font-size16);
	}
}

/*----------------------------------------
	目次 （SP専用）
-----------------------------------------*/
.toc {
	display: none;
}

@media (width <=800px) {
	.toc {
		display: block;
		padding-block-start: 6px;
		padding-inline: 9px;
		inline-size: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		transition: opacity .3s, visibility .3s, transform .3s;
	}

	/* 追従用 */
	.toc:not(.is-scroll) {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-200px);
	}

	.toc.is-scroll {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.accordionWrap {
		background-color: var(--color-first-peacock01);
		border-radius: 18px;
		box-shadow: 0 2px 4px rgb(from var(--color-black01) r g b / 20%);
	}

	.accordionMenu {
		position: relative;
		padding-block: 16px;
		padding-inline: 16px 38px;
		background-color: transparent;
		cursor: pointer;
		border: 0;
		color: var(--color-white01);
		font-weight: var(--font-weight-medium);
		font-size: var(--font-size16);
		line-height: var(--line-height15);
	}

	.accordionMenu::after {
		content: '';
		display: block;
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: 16px;
		transform: translateY(-50%);
		block-size: 20px;
		inline-size: 20px;
		border-radius: 100vh;
		background: var(--color-darkgold01) url(/asset/img/common/mark_plus_s.svg) no-repeat center center;
		background-size: 11px 11px;
	}

	.accordionMenu.active {
		background-color: transparent;
		color: var(--color-white01);
	}

	.accordionMenu.active::after {
		background-image: url(/asset/img/common/mark_minus_s.svg);
	}

	@media (hover: hover) {
		.accordionMenu:hover {
			background-color: transparent;
			color: var(--color-white01);
		}

		.accordionMenu:hover::after {
			background: var(--color-darkgold01) url(/asset/img/common/mark_plus_s.svg) no-repeat center center;
			background-size: 11px 11px;
		}

		.accordionMenu.active:hover {
			background-color: transparent;
			color: var(--color-white01);
		}

		.accordionMenu.active:hover::after {
			background-image: url(/asset/img/common/mark_minus_s.svg);
		}
	}

	.accordionMenu span {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.accordionMenu span::before {
		content: "";
		display: block;
		inline-size: 40px;
		block-size: 40px;
		background: var(--color-first-skyblue01) url(/asset/img/first/beginner_sengu/priest_a_s.webp) no-repeat center 4px;
		background-size: contain;
		border-radius: 50%;
	}

	.accordionMenu .accordionContent {
		max-height: 0;
		overflow: hidden;
		transition: all 0.3s cubic-bezier(0.45, 0, 0.55, 1);
	}

	.accordionMenu.active .accordionContent {
		max-height: auto;
	}

	.accordionContent ul {
		padding: 16px 16px 32px 72px;
		display: grid;
		gap: 16px;
	}

	.accordionContent ul a {
		display: flex;
		align-items: center;
		gap: 8px;
		color: var(--color-white01);
		font-size: var(--font-size16);
		line-height: var(--line-height15);
		font-weight: var(--font-weight-medium);
	}

	.accordionContent ul a span {
		font-family: var(--font-family-mincho);
		font-size: var(--font-size12);
		line-height: var(--line-height15);
	}
}

/*----------------------------------------
	神宮へようこそ ~
-----------------------------------------*/
.welcome01 {
	inline-size: 92%;
	margin-inline: auto;
	margin-block: 108px;
	display: flex;
	flex-direction: column;
	background-color: var(--color-first-cream01);
	border-radius: 80px;
	border: 1px solid var(--color-first-gold01);
	padding: 36px 18px;
}

.welcome01 p {
	color: var(--color-first-gold01);
	line-height: var(--line-height15);
	text-align: center;
}

.welcome01 p:nth-of-type(1) {
	font-size: var(--font-size28);
	font-weight: var(--font-weight-medium);
}

.welcome01 p:nth-of-type(2) {
	font-size: var(--font-size18);
	font-weight: var(--font-weight-bold);
	margin-block-start: 36px;
}

.welcome01 .img {
	inline-size: 47.7%;
	margin-inline: auto;
	margin-block-start: 22px;
}

@media (width <=800px) {
	.welcome01 {
		inline-size: 92%;
		margin-block: 64px 96px;
		border-radius: 80px;
		padding: 32px 16px;
	}

	.welcome01 p:nth-of-type(1) {
		font-size: var(--font-size24);
	}

	.welcome01 p:nth-of-type(2) {
		font-size: var(--font-size16);
		margin-block-start: 32px;
	}

	.welcome01 .img {
		inline-size: 47.6%;
		margin-block-start: 20px;
	}
}

/*----------------------------------------
	吹き出し
-----------------------------------------*/
/* 青 */
.speech01 {
	margin-block: 22px 0;
}

.speech01 :where(h2, p) {
	inline-size: 324px;
	margin-inline: auto 0;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.speech01 :where(h2, p) span {
	background-color: var(--color-first-blue01);
	padding: 16px;
	border-radius: 18px 18px 0 18px;
	color: var(--color-first-peacock01);
	font-size: var(--font-size20);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height15);
	display: block;
	inline-size: 100%;
}

.speech01 :where(h2, p)::after {
	content: "";
	display: block;
	inline-size: 18px;
	block-size: 18px;
	background-image: url(/asset/img/first/beginner_sengu/speech_blue.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	flex-shrink: 0;
}

/* 白（基本パターン） */
.speech02 {
	margin-block: 22px 0;
	display: grid;
	grid-template-columns: auto 1fr;
}

.speech02 .img {
	inline-size: 45px;
	block-size: 45px;
	background-color: var(--color-first-skyblue01);
	border-radius: 50%;
	overflow: hidden;
	padding-block-start: 4px;
}

.speech02 .img img {
	display: block;
	inline-size: 31.5px;
	margin-inline: auto;
}

.speech02 p {
	inline-size: 315px;
	margin-inline: 0 auto;
	display: flex;
}

.speech02 p span {
	background-color: var(--color-first-offwhite01);
	padding: 18px;
	font-size: var(--font-size18);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height15);
	display: block;
	inline-size: 100%;
	border-radius: 0 18px 18px 18px;
}

.speech02 p::before {
	content: "";
	display: block;
	inline-size: 18px;
	block-size: 18px;
	background-image: url(/asset/img/first/beginner_sengu/speech_white.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	flex-shrink: 0;
}

/* 白（上下） */
.speech03 {
	margin-block: 22px 0;
	display: grid;
	gap: 8px;
}

.speech03 p {
	inline-size: 360px;
	margin-inline: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.speech03 p span {
	background-color: var(--color-first-offwhite01);
	padding: 18px;
	font-size: var(--font-size18);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height15);
	display: block;
	inline-size: 100%;
}

.speech03 p::after {
	content: "";
	display: block;
	inline-size: 18px;
	block-size: 18px;
	background-image: url(/asset/img/first/beginner_sengu/speech_white.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.speech03 p:nth-of-type(1) span {
	border-radius: 18px 18px 0 18px;
}

.speech03 p:nth-of-type(2) {
	flex-flow: column-reverse;
}

.speech03 p:nth-of-type(2) span {
	border-radius: 18px 0 18px 18px;
}

.speech03 p:nth-of-type(2)::after {
	transform: rotate(90deg);
}

.speech03 .img {
	inline-size: 180px;
	margin-inline: auto;
}

/* scrollEffects上書き */
[class*="speech0"].opacity,
[class*="speech0"]>.opacity {
	transition: opacity .3s linear;
}


@media (width <=800px) {
	/* 青 */
	.speech01 {
		margin-block: 20px 0;
	}

	.speech01 :where(h2, p) {
		inline-size: min(288px, 100%);
	}

	.speech01 :where(h2, p) span {
		padding: 16px;
		border-radius: 16px 16px 0 16px;
		font-size: var(--font-size18);
		inline-size: 100%;
	}

	.speech01 :where(h2, p)::after {
		inline-size: 16px;
		block-size: 16px;
	}

	/* 白（基本パターン） */
	.speech02 {
		margin-block: 20px 0;
	}

	.speech02 .img {
		inline-size: 40px;
		block-size: 40px;
	}

	.speech02 .img img {
		inline-size: 28px;
	}

	.speech02 p {
		inline-size: min(280px, 100%);
	}

	.speech02 p span {
		padding: 16px;
		font-size: var(--font-size16);
		border-radius: 0 16px 16px 16px;
	}

	.speech02 p::before {
		inline-size: 16px;
		block-size: 16px;
	}

	/* 白（上下） */
	.speech03 {
		margin-block: 20px 0;
		gap: 8px;
	}

	.speech03 p {
		inline-size: min(320px, 100%);
	}

	.speech03 p span {
		padding: 16px;
		font-size: var(--font-size16);
	}

	.speech03 p::after {
		inline-size: 16px;
		block-size: 16px;
	}

	.speech03 p:nth-of-type(1) span {
		border-radius: 16px 16px 0 16px;
	}

	.speech03 p:nth-of-type(2) span {
		border-radius: 16px 0 16px 16px;
	}

	.speech03 .img {
		inline-size: min(160px, 100%);
	}
}

/*----------------------------------------
	その他 共通
-----------------------------------------*/
.innerBox {
	inline-size: 92%;
	margin-inline: auto;
}

.item {
	padding-block: 108px;
}

.item>p,
.scrollTtl {
	color: var(--color-first-peacock01);
	font-size: var(--font-size24);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height15);
	text-align: center;
	margin-block: 22px 0;
}

.item>p .large,
.scrollTtl .large {
	font-size: var(--font-size32);
}

@media (width <=800px) {
	.item {
		padding-block: 96px;
	}

	.item>p,
	.scrollTtl {
		font-size: var(--font-size20);
		margin-block: 20px 0;
	}

	.item>p .large,
	.scrollTtl .large {
		font-size: var(--font-size28);
	}
}

/* ここまでのまとめ */
.summary01 {
	margin-block-start: 108px;
	display: flex;
	flex-direction: column;
	background-color: var(--color-first-cream01);
	border-radius: 80px;
	border: 1px solid var(--color-first-peacock01);
	padding: 44px 36px;
	overflow: hidden;
}

.summary01 dt {
	color: var(--color-white01);
	font-size: var(--font-size18);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height15);
	background-color: var(--color-first-peacock01);
	border-radius: 10em;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	padding: 9px;
}

.summary01 dt span {
	font-family: var(--font-family-mincho);
	font-size: var(--font-size16);
	font-weight: var(--font-weight-regular);
}

.summary01 dd {
	display: grid;
	grid-template-rows: auto auto auto 1fr auto;
}

.summary01 dd p {
	position: relative;
	z-index: 1;
}

.summary01 dd p:nth-of-type(1) {
	grid-column: 1/2;
	grid-row: 1/2;
	margin-block-start: 36px;
	color: var(--color-first-peacock01);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size28);
	line-height: var(--line-height15);
	text-align: center;
}

.summary01 dd p:nth-of-type(2) {
	grid-column: 1/2;
	grid-row: 2/3;
	margin-block-start: 36px;
}

.summary01 dd p:nth-of-type(3) {
	grid-column: 1/2;
	grid-row: 3/4;
}

.summary01 dd p:nth-of-type(4) {
	grid-column: 1/2;
	grid-row: 4/5;
}

.summary01 dd p:nth-of-type(5) {
	grid-column: 1/2;
	grid-row: 5/6;
}

.summary01 dd :where(p:nth-of-type(n+2)) {
	margin-block-start: 22px;
	color: var(--color-first-peacock01);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size20);
	line-height: var(--line-height15);
}

.summary01 dd .small01 {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size18);
}

.summary01 dd .small02 {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size16);
}

.summary01 dd .small02--notice {
	padding-inline-start: 1em;
	text-indent: -1em;
}

.summary01 dd .small02--notice::before {
	content: "※";
}

.summary01 dd .img {
	grid-column: 1/2;
	grid-row: 2/5;
	inline-size: 46.4%;
	block-size: fit-content;
	margin-block: 36px auto;
	margin-inline: auto -20px;
}

@media (width <=800px) {
	.summary01 {
		margin-block-start: 96px;
		border-radius: 80px;
		padding: 40px 32px;
	}

	.summary01 dd {
		inline-size: min(100%, 304px);
		margin-inline: auto;
	}

	.summary01 dt {
		font-size: var(--font-size16);
		gap: 12px;
		padding: 8px;
	}

	.summary01 dt span {
		font-size: var(--font-size14);
	}

	.summary01 dd p:nth-of-type(1) {
		margin-block-start: 32px;
		font-size: var(--font-size24);
	}

	.summary01 dd p:nth-of-type(2) {
		margin-block-start: 31px;
	}

	.summary01 dd :where(p:nth-of-type(n+2)) {
		margin-block-start: 20px;
		font-size: var(--font-size18);
	}

	.summary01 dd .small01 {
		font-size: var(--font-size16);
	}

	.summary01 dd .small02 {
		font-size: var(--font-size14);
	}

	.summary01 dd .img {
		inline-size: 46.5%;
		padding-block-start: 15px;
		margin-block: auto;
		margin-inline: auto -17px;
	}
}

/* お祭りの主な流れ */
.flow01 {
	margin-block-start: 36px;
	display: flex;
	flex-direction: column;
	background-color: var(--color-first-cream01);
	border-radius: 80px;
	border: 1px solid var(--color-first-peacock01);
	padding: 44px 36px;
	overflow: hidden;
}

.flow01 dt {
	color: var(--color-white01);
	font-size: var(--font-size18);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height15);
	background-color: var(--color-first-peacock01);
	border-radius: 10em;
	text-align: center;
	padding: 9px;
}

.flow01 dd {
	margin-block-start: 36px;
	display: grid;
	gap: 9px;
}

.flow01 dd>p {
	grid-column: 1/2;
	grid-row: 1/2;
	color: var(--color-first-peacock01);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size28);
	line-height: var(--line-height15);
	position: relative;
	z-index: 1;
}

.flow01 dd .txt {
	grid-column: 1/2;
	grid-row: 2/3;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr auto;
	gap: 0 12px;
}

.flow01 dd .txt::before {
	content: "";
	display: block;
	inline-size: 16px;
	block-size: 100%;
	background-image: url(/asset/img/first/beginner_sengu/arrow01_s.svg);
	background-size: contain;
	background-position: left top;
	background-repeat: no-repeat;
	grid-column: 1/2;
	grid-row: 1/3;
}

.flow01 dd .txt p:nth-of-type(1) {
	color: var(--color-first-peacock01);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size18);
	line-height: var(--line-height15);
	block-size: fit-content;
	margin-block: auto 0;
}

.flow01 dd .txt p:nth-of-type(2) {
	color: var(--color-first-peacock01);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size16);
	line-height: var(--line-height15);
	margin-block-start: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.flow01 dd .txt p:nth-of-type(2)>span {
	background-color: var(--color-white01);
	padding: 7px 9px;
	border-radius: 9px;
	display: flex;
	align-items: baseline;
	gap: .2em;
}

.flow01 dd .txt p:nth-of-type(2)>span span {
	font-size: var(--font-size22);
	line-height: var(--line-height10);
}

.flow01 dd .img {
	grid-column: 1/2;
	grid-row: 1/3;
	inline-size: 31%;
	margin-inline: auto 0;
	margin-block: 0 auto;
	background-color: var(--color-white01);
	border-radius: 50%;
	overflow: hidden;
}

@media (width <=800px) {
	.flow01 {
		margin-block-start: 32px;
		padding: 40px 32px;
	}

	.flow01 dt {
		font-size: var(--font-size16);
		padding: 8px;
	}

	.flow01 dd {
		inline-size: min(100%, 304px);
		margin-inline: auto;
		margin-block-start: 32px;
		gap: 8px;
	}

	.flow01 dd>p {
		font-size: var(--font-size24);
	}

	.flow01 dd .txt {
		gap: 0 10px;
	}

	.flow01 dd .txt::before {
		inline-size: 14px;
		block-size: 100%;
	}

	.flow01 dd .txt p:nth-of-type(1) {
		font-size: var(--font-size16);
	}

	.flow01 dd .txt p:nth-of-type(2) {
		font-size: var(--font-size14);
		margin-block-start: 12px;
		gap: 8px;
	}

	.flow01 dd .txt p:nth-of-type(2)>span {
		padding: 6px 8px;
		border-radius: 8px;
	}

	.flow01 dd .txt p:nth-of-type(2)>span span {
		font-size: var(--font-size20);
	}

	.flow01 dd .img {
		inline-size: 31.8%;
	}
}

/* ボタン */
p:has(.btn03) {
	inline-size: fit-content;
	margin-inline: auto;
}

.btn03 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 15px 23px;
	border: var(--border-width1) solid var(--color-first-gold01);
	border-radius: 100vh;
	color: var(--color-first-gold01);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size18);
	line-height: var(--line-height15);
	user-select: none;
}

.btn03[target="_blank"]::after {
	content: "";
	display: block;
	block-size: 10px;
	inline-size: 10px;
	background: url(/asset/img/common/ic_external01_first02_s.svg) no-repeat center center;
	background-size: cover;
	flex-shrink: 0;
}

@media (hover: hover) {
	.btn03:hover {
		background-color: var(--color-first-gold01);
		color: var(--color-white01);
		transition: all 0.2s cubic-bezier(0.45, 0, 0.55, 1);
		opacity: 1 !important;
	}

	.btn03[target="_blank"]:hover::after {
		background-image: url(/asset/img/common/ic_external01w_s.svg);
		transition: all 0.2s cubic-bezier(0.45, 0, 0.55, 1);
	}
}

@media (width <=800px) {
	.btn03 {
		gap: 8px;
		padding: 12px 20px;
		font-size: var(--font-size16);
	}

	.btn03[target="_blank"]::after {
		block-size: 10px;
		inline-size: 10px;
	}
}

/*----------------------------------------
	s01 式年遷宮って何ですか？
-----------------------------------------*/
#s01 {
	scroll-margin-block-start: 68px;
}

#s01 .box01>.item01 .img {
	display: grid;
}

#s01 .box01>.item01 .img img {
	grid-column: 1/2;
	grid-row: 1/2;
}

#s01 .box01>.item01 .img img:nth-of-type(2) {
	inline-size: 15.217%;
	margin-block: auto 0;
	margin-inline: auto 23.37%;
}

#s01 .box02>.item01 .img {
	inline-size: 940px; /* 幅（スクロール量） */
	padding-inline: 18px;
}

#s01 .box02>.item02 {
	--items: 4; /* コマ数 */
}

#s01 .box02>.item02 .img {
	inline-size: 92%;
	padding: 4px;
	background-color: var(--color-first-cream01);
	border-radius: 18px;
}

#s01 .box02>.item03 {
	--items: 5; /* コマ数 */
}

#s01 .box02>.item03 .img {
	inline-size: 92%;
	padding: 4px;
	background-color: var(--color-first-cream01);
	border-radius: 18px;
}

#s01 .box03 .btnBox {
	margin-block-start: 90px;
}

#s01 .box03 .btnBox p:nth-of-type(1) {
	color: var(--color-first-gold01);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size18);
	line-height: var(--line-height15);
	text-align: center;
}

#s01 .box03 .btnBox p:nth-of-type(2) {
	margin-block-start: 36px;
}

@media (width <=800px) {
	#s01 {
		scroll-margin-block-start: 120px;
	}

	#s01 .box01>.item01 .img img:nth-of-type(2) {
		inline-size: 15.217%;
		margin-block: auto 0;
		margin-inline: auto 23.37%;
	}

	#s01 .box02>.item01 .img {
		inline-size: min(800px, 200vw);
		padding-inline: 16px;
	}

	#s01 .box02>.item02 .img {
		border-radius: 16px;
	}

	#s01 .box02>.item03 .img {
		border-radius: 16px;
	}

	#s01 .box03 .btnBox {
		margin-block-start: 80px;
	}

	#s01 .box03 .btnBox p:nth-of-type(1) {
		font-size: var(--font-size16);
	}

	#s01 .box03 .btnBox p:nth-of-type(2) {
		margin-block-start: 32px;
	}
}

/*----------------------------------------
	s02 お祭り？どう最大なんですか？
-----------------------------------------*/
#s02 {
	margin-block-start: 140px;
	scroll-margin-block-start: 68px;
}

#s02 .box01>.item01 .img,
#s02 .box01>.item02 .img {
	display: grid;
	gap: 18px;
}

#s02 .box01>.item01 .img img,
#s02 .box01>.item02 .img img {
	border-radius: 18px;
}

#s02 .box02>.item03 .img {
	inline-size: 4000px; /* 幅（スクロール量） */
}

#s02 .box02>.item04 .img {
	inline-size: 2000px; /* 幅（スクロール量） */
}

#s02 .box03>.item01 .img {
	inline-size: 1760px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding-inline: 16px;
}

#s02 .box03>.item01 .img img {
	padding: 4px;
	background-color: var(--color-first-cream01);
	border-radius: 18px;
}

#s02 .box03>.item02 .img {
	inline-size: 1760px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding-inline: 16px;
}

#s02 .box03>.item02 .img img {
	padding: 4px;
	background-color: var(--color-first-cream01);
	border-radius: 18px;
}

/* 入手困難な素材 */
#s02 .box04>.itemBox {
	padding-block: 108px;
}

#s02 .box04>.itemBox .item {
	padding-block: 0;
	display: grid;
	grid-template-columns: 52.174% 1fr;
}

#s02 .box04 .itemBox .item02 {
	grid-template-columns: 1fr 52.174%;
}

#s02 .box04 .itemBox .item .img {
	background-color: var(--color-first-cream01);
	border-radius: 50%;
	padding: 16px;
}

#s02 .box04 .itemBox .item02 .img {
	grid-column: 2/3;
	grid-row: 1/2;
}

#s02 .box04 .itemBox .item p {
	block-size: fit-content;
	margin-block: auto;
}

#s02 .box04 .itemBox .item02 p {
	grid-column: 1/2;
	grid-row: 1/2;
}

@media (width <=800px) {
	#s02 {
		margin-block-start: 140px;
		scroll-margin-block-start: 120px;
	}

	#s02 .box01>.item01 .img,
	#s02 .box01>.item02 .img {
		gap: 16px;
	}

	#s02 .box01>.item01 .img img,
	#s02 .box01>.item02 .img img {
		border-radius: 16px;
	}

	#s02 .box02>.item03 .img {
		inline-size: min(900vw, 3600px);
	}

	#s02 .box02>.item04 .img {
		inline-size: min(2000px, 500vw);
	}

	#s02 .box03>.item01 .img {
		inline-size: calc(min(1600px, 400vw) - (16px * 2));
		gap: 20px;
		padding-inline: 16px;
	}

	#s02 .box03>.item01 .img img {
		border-radius: 16px;
	}

	#s02 .box03>.item02 .img {
		inline-size: calc(min(1600px, 400vw) - (16px * 2));
		gap: 20px;
		padding-inline: 16px;
	}

	#s02 .box03>.item02 .img img {
		border-radius: 16px;
	}

	/* 入手困難な素材 */
	#s02 .box04>.itemBox {
		padding-block: 96px;
	}

	#s02 .box04>.itemBox .item {
		grid-template-columns: 52.174% 1fr;
	}

	#s02 .box04 .itemBox .item02 {
		grid-template-columns: 1fr 52.174%;
	}

	#s02 .box04 .itemBox .item .img {
		padding: 16px;
	}
}

/*----------------------------------------
	s03 式年遷宮の見どころは何ですか？
-----------------------------------------*/
#s03 {
	margin-block-start: 140px;
	scroll-margin-block-start: 68px;
}

/* 東西に並ぶ新旧の社殿 */
#s03 .box01 .item01 .img {
	inline-size: 100%;
}

#s03 .box01 .item01 .img img {
	border-radius: 18px;
}

/* 約30のお祭り・行事 */
#s03 .box01>.item02 .img {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	gap: 18px;
	padding-inline: 18px;
}

#s03 .box01>.item02 img {
	inline-size: 368px;
	border-radius: 18px;
}

/* 御木曳行事（川曳） */
#s03 .box01>.item03 .img {
	inline-size: 1700px;
	display: grid;
	grid-template-columns: 1fr;
}

/* 背景黒 */
#s03 {
	background-color: transparent;
	transition: .3s;
}

#s03:has([data-scroll-tgt="1"].is-active) {
	background-color: var(--color-first-darkness01);
}

#s03 .box02 {
	margin-block-start: 96px;
}

#s03 .box02>.speech01 {
	margin-block-start: 0;
	padding-block-start: 22px;
}

#s03 .box01:has(+.is-active) .item>p,
#s03 .box01:has(+.is-active) .item .scrollTtl {
	color: var(--color-white01)
}

#s03 .box02.is-active .item>p,
#s03 .box02.is-active .item .scrollTtl {
	color: var(--color-white01)
}

/* 遷御の儀 */
#s03 .box02>.item01 .img {
	inline-size: 2300px; /* 幅（スクロール量） */
}

/* 羅紫御翳 */
#s03 .box02 .item02 .img {
	background-color: var(--color-first-gold01);
	border-radius: 18px;
	padding: 18px;
}

#s03 .box02>.item02 .img img {
	inline-size: 100%;
}

#s03 .box02 .btnBox {
	margin-block-start: 90px;
}

#s03 .box02 .btnBox p:nth-of-type(1) {
	color: var(--color-first-gold01);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size18);
	line-height: var(--line-height15);
	text-align: center;
}

#s03 .box02.is-active .btnBox p:nth-of-type(1) {
	color: var(--color-white01);
}

#s03 .box02 .btnBox p:nth-of-type(2) {
	margin-block-start: 36px;
}

#s03 .box02 .btnBox .btn03 {
	border-color: var(--color-first-gold01);
	color: var(--color-first-gold01);
}

#s03 .box02.is-active .btnBox .btn03 {
	border-color: var(--color-white01);
	color: var(--color-white01);
}

@media (hover: hover) {
	#s03 .box02 .btnBox .btn03:hover {
		border-color: var(--color-first-gold01);
		color: var(--color-white01);
		background-color: var(--color-first-gold01);
	}
}

@media (width <=800px) {
	#s03 {
		margin-block-start: 140px;
		scroll-margin-block-start: 120px;
	}

	#s03 .box01 .item01 .img img {
		border-radius: 16px;
	}

	/* 約30のお祭り・行事 */
	#s03 .box01>.item02 .img {
		gap: 16px;
		padding-inline: 16px;
	}

	#s03 .box01>.item02 img {
		inline-size: calc(min(100vw, 400px) - (16px * 2));
		border-radius: 16px;
	}

	/* 御木曳行事（川曳） */
	#s03 .box01>.item03 .img {
		inline-size: min(425vw, 1700px);
		display: grid;
		grid-template-columns: 1fr;
	}

	/* 背景黒 */
	#s03 .box02 {
		margin-block-start: 96px;
	}

	#s03 .box02>.speech01 {
		padding-block-start: 20px;
	}

	#s03 .box02>.item01 .img {
		inline-size: min(575vw, 2300px);
	}

	/* 羅紫御翳 */
	#s03 .box02 .item02 .img {
		border-radius: 16px;
		padding: 16px;
	}

	#s03 .box02 .summary01 {
		margin-block-start: 80px;
	}

	#s03 .box02 .btnBox {
		margin-block-start: 102px;
	}

	#s03 .box02 .btnBox p:nth-of-type(1) {
		font-size: var(--font-size16);
	}

	#s03 .box02 .btnBox p:nth-of-type(2) {
		margin-block-start: 32px;
	}
}

/*----------------------------------------
	s04 なぜ20年に一度神さまがお引越しするのですか？
-----------------------------------------*/
#s04 {
	margin-block-start: 140px;
	scroll-margin-block-start: 68px;
}

/* 社殿の尊厳を保つため？ */
#s04 .box01 .itemBox {
	padding-block: 108px;
}

#s04 .box01 .itemBox .item {
	padding-block: 0;
	display: grid;
	grid-template-columns: 52.174% 1fr;
}

#s04 .box01 .itemBox .item02 {
	grid-template-columns: 1fr 52.174%;
}

#s04 .box01 .itemBox .item .img {
	background-color: var(--color-first-cream01);
	border-radius: 50%;
	padding: 18px;
	overflow: hidden;
}

#s04 .box01 .itemBox .item02 .img {
	grid-column: 2/3;
	grid-row: 1/2;
}

#s04 .box01 .itemBox .item p {
	block-size: fit-content;
	margin-block: auto;
}

#s04 .box01 .itemBox .item02 p {
	grid-column: 1/2;
	grid-row: 1/2;
}

/* 神明造の社殿 */
#s04 .box01 .item01 .img {
	display: grid;
}

#s04 .box01 .item01 .img img {
	grid-column: 1/2;
	grid-row: 1/2;
}

#s04 .box01 .item01 .img img:nth-of-type(2) {
	inline-size: 15.217%;
	margin-block: auto -20px;
	margin-inline: 0 auto;
}

/* 石造りの建造物 */
#s04 .box02>.item01 {
	display: grid;
	grid-template-columns: 1fr 18px 1fr;
	grid-template-rows: 1fr auto;
}

#s04 .box02>.item01 .img {
	background-color: var(--color-first-cream01);
	border-radius: 50%;
	padding: 18px;
	inline-size: 100%;
	aspect-ratio: 1;
}

#s04 .box02>.item01 .img:nth-of-type(1) {
	grid-column: 1/3;
	grid-row: 1/2;
}

#s04 .box02>.item01 .img:nth-of-type(2) {
	grid-column: 2/4;
	grid-row: 1/3;
	margin-block: auto 0;
}

#s04 .box02>.item01 p {
	grid-column: 1/3;
	grid-row: 2/3;
	margin-block: 36px 38px;
}

#s04 .box03>.item01 {
	--items: 9; /* コマ数 */
}

#s04 .box03>.item01 .img img {
	padding-inline: 32px;
}

@media (width <=800px) {
	#s04 {
		margin-block-start: 140px;
		scroll-margin-block-start: 120px;
	}

	/* 社殿の尊厳を保つため？ */
	#s04 .box01 .itemBox {
		padding-block: 96px;
	}

	#s04 .box01 .itemBox .item {
		padding-block: 0;
		grid-template-columns: 52.174% 1fr;
	}

	#s04 .box01 .itemBox .item02 {
		grid-template-columns: 1fr 52.174%;
	}

	#s04 .box01 .itemBox .item .img {
		padding: 16px;
	}

	#s04 .box01 .itemBox .item p {
		margin-block: auto;
	}

	/* 神明造の社殿 */
	#s04 .box01 .item01 .img img:nth-of-type(2) {
		inline-size: 15.217%;
		margin-block: auto -20px;
		margin-inline: 0 auto;
	}

	/* 石造りの建造物 */
	#s04 .box02>.item01 {
		grid-template-columns: 1fr 16px 1fr;
	}

	#s04 .box02>.item01 .img {
		padding: 16px;
	}

	#s04 .box02>.item01 .img:nth-of-type(2) {
		margin-block: auto 0;
	}

	#s04 .box02>.item01 p {
		margin-block: 32px 34px;
	}

	#s04 .box03>.item01 .img img {
		padding-inline: 28px;
	}

	#s04 .box04 .summary01 {
		margin-block-start: 64px;
	}

	#s04 .box04 .summary01 .img {
		padding-block-start: 0;
		margin-block: 32px auto;
	}
}

/*----------------------------------------
	s05 古い社殿はどうなるんですか？
-----------------------------------------*/
#s05 {
	margin-block-start: 140px;
	scroll-margin-block-start: 68px;
}

/* 循環 */
#s05 .box02>.item01 {
	block-size: 300vh;
	position: relative;
}

#s05 .box02>.item01 .junkan_sticky {
	position: sticky;
	top: 0;
	left: 0;
	min-block-size: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 36px;
}

#s05 .box02>.item01 p {
	color: var(--color-first-gold01);
	font-size: var(--font-size24);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height15);
	text-align: center;
	margin-block-start: 64px;
}

#s05 .box02>.item01 .itemInner {
	display: grid;
	inline-size: 92%;
	margin-inline: auto;
	aspect-ratio: 1;
}

/* 白背景 */
#s05 .box02>.item01 .bg {
	display: block;
	grid-column: 1/2;
	grid-row: 1/2;
	inline-size: 100%;
	aspect-ratio: 1;
	background-color: var(--color-first-offwhite01);
	opacity: .8;
	border-radius: 50%;
	position: relative;
	z-index: 1;
}

/* 背景画像 */
#s05 .box02>.item01 .img {
	grid-column: 1/2;
	grid-row: 1/2;
	position: relative;
	z-index: 0;
	border-radius: 50%;
	overflow: hidden;
	margin-block-start: 250px;
	inline-size: 100%;
	aspect-ratio: 1;
	display: grid;
}

#s05 .box02>.item01 .img img {
	grid-column: 1/2;
	grid-row: 1/2;
}

#s05 .box02>.item01 .img img:nth-child(2) {
	opacity: 0;
	transition: opacity .5s;
}

#s05 .box02>.item01.is-active .img img:nth-child(2) {
	opacity: 1;
}

#s05 .box02>.item01 dd span {
	transition: all .5s;
	display: inline-block;
}

#s05 .box02>.item01.is-active dd span:not([data-pickup]) {
	opacity: 0 !important;
}

#s05 .box02>.item01.is-active dd span[data-pickup] {
	display: inline-block;
	scale: 1.4;
}

#s05 .box02>.item01 dd span[data-pickup="down"] {
	transform-origin: center -1em;
}

/* テキスト */
#s05 .box02>.item01 dl {
	display: grid;
	inline-size: 100%;
	aspect-ratio: 1;
	grid-column: 1/2;
	grid-row: 1/2;
	position: relative;
	z-index: 2;
}

#s05 .box02>.item01 dt {
	font-family: var(--font-family-mincho);
	color: var(--color-first-gold01);
	font-size: var(--font-size90);
	line-height: var(--line-height10);
	inline-size: fit-content;
	block-size: fit-content;
	grid-column: 1/2;
	grid-row: 1/2;
	margin-block: auto;
	margin-inline: 108px auto;
}

#s05 .box02>.item01 dt span {
	writing-mode: vertical-rl;
	padding-inline: 13px 0;
    letter-spacing: 0;
}

#s05 .box02>.item01 dd {
	font-family: var(--font-family-mincho);
	color: var(--color-first-black01);
	font-size: var(--font-size18);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height15);
	inline-size: fit-content;
	block-size: fit-content;
	grid-column: 1/2;
	grid-row: 1/2;
}

/* めぐる */
#s05 .box02>.item01 .t01 {
	margin-block: 28px auto;
	margin-inline: auto;
}
/* 環境 */
#s05 .box02>.item01 .t02 {
	margin-block: 74px auto;
	margin-inline: auto 140px;
}
/* 木を植え育てる */
#s05 .box02>.item01 .t03 {
	margin-block: 131px auto;
	margin-inline: auto 26px;
}
/* 古から現代未来へ */
#s05 .box02>.item01 .t04 {
	margin-block: 190px auto;
	margin-inline: auto 29px;
}
/* つながる */
#s05 .box02>.item01 .t05 {
	margin-block: auto 104px;
	margin-inline: auto 65px;
}
/* リサイクル */
#s05 .box02>.item01 .t06 {
	margin-block: auto 68px;
	margin-inline: auto 119px;
}
/* 感謝 */
#s05 .box02>.item01 .t07 {
	margin-block: auto 62px;
	margin-inline: 105px auto;
}
/* 実り */
#s05 .box02>.item01 .t08 {
	margin-block: auto 149px;
	margin-inline: 50px auto;
}
/* 真心 */
#s05 .box02>.item01 .t09 {
	margin-block: 157px auto;
	margin-inline: 32px auto;
}
/* 自然と共に */
#s05 .box02>.item01 .t10 {
	margin-block: 77px auto;
	margin-inline: 61px auto;
}

@media (width <=800px) {
	#s05 {
		margin-block-start: 140px;
		scroll-margin-block-start: 120px;
	}

	#s05 .box02>.item01 {
		padding-block-start: 0;
	}

	#s05 .box02>.item01 .junkan_sticky {
		gap: 32px;
	}

	#s05 .box02>.item01 p {
		margin-block-start: 96px;
	}

	#s05 .box02>.item01 .itemInner {
		inline-size: min(368px, 92vw);
	}

	#s05 .box02>.item01 .img {
		margin-block-start: min(250px, 62.5vw);
	}

	#s05 .box02>.item01 dt {
		font-size: min(80px, 20vw);
		margin-inline: min(108px, 27vw) auto;
	}

	#s05 .box02>.item01 dt span {
		padding-inline: min(13px, 3.25vw) 0;
	}

	#s05 .box02>.item01 dd {
		font-size: min(16px, 4vw);
	}
	/* めぐる */
	#s05 .box02>.item01 .t01 {
		margin-block: min(25px, 6.25vw) auto;
		margin-inline: auto;
	}
	/* 環境 */
	#s05 .box02>.item01 .t02 {
		margin-block: min(66px, 16.5vw) auto;
		margin-inline: auto min(125px, 31.25vw);
	}
	/* 木を植え育てる */
	#s05 .box02>.item01 .t03 {
		margin-block: min(117px, 29.25vw) auto;
		margin-inline: auto min(24px, 6vw);
	}
	/* 古から現代未来へ */
	#s05 .box02>.item01 .t04 {
		margin-block: min(169px, 42.25vw) auto;
		margin-inline: auto min(26px, 6.5vw);
	}
	/* つながる */
	#s05 .box02>.item01 .t05 {
		margin-block: auto min(93px, 23.25vw);
		margin-inline: auto min(59px, 14.75vw);
	}
	/* リサイクル */
	#s05 .box02>.item01 .t06 {
		margin-block: auto min(43px, 10.75vw);
		margin-inline: auto min(92px, 23vw);
	}
	/* 感謝 */
	#s05 .box02>.item01 .t07 {
		margin-block: auto min(62px, 15.5vw);
		margin-inline: min(105px, 26.25vw) auto;
	}
	/* 実り */
	#s05 .box02>.item01 .t08 {
		margin-block: auto min(133px, 33.25vw);
		margin-inline: min(45px, 11.25vw) auto;
	}
	/* 真心 */
	#s05 .box02>.item01 .t09 {
		margin-block: min(140px, 35vw) auto;
		margin-inline: min(29px, 7.25vw) auto;
	}
	/* 自然と共に */
	#s05 .box02>.item01 .t10 {
		margin-block: min(69px, 17.25vw) auto;
		margin-inline: min(55px, 13.75vw) auto;
	}
}

#s05 .box03 .btnBox {
	inline-size: 98%;
	margin-inline: auto;
	margin-block-start: 36px;
	padding: 36px 18px;
	border-radius: 40px;
	background-color: var(--color-first-gold01);
	display: grid;
	grid-template-columns: 1fr 28%;
	justify-content: center;
	gap: 18px;
}

#s05 .box03 .btnBox .img {
	block-size: fit-content;
	margin-block: auto;
}

#s05 .box03 .btnBox .img img {
	inline-size: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}

#s05 .box03 .btnBox p:has(.btn03) {
	inline-size: 100%;
	block-size: fit-content;
	margin-block: auto;
}

#s05 .box03 .btnBox .btn03 {
	border-color: var(--color-white01);
	color: var(--color-white01);
	inline-size: 100%;
}

@media (hover: hover) {
	#s05 .box03 .btnBox .btn03:hover {
		border-color: var(--color-white01);
		color: var(--color-darkgold01);
		background-color: var(--color-white01);
	}
}

@media (width <=800px) {
	#s05 .box03 .btnBox {
		margin-block-start: 32px;
		padding: 32px 16px;
		border-radius: 40px;
		grid-template-columns: 1fr 26.5%;
		gap: 16px;
	}

	#s05 .box03 .btnBox p:has(.btn03) {
		inline-size: min(100%, 249px);
	}

	#s05 .box03 .btnBox .btn03 {
		font-size: var(--font-size18);
		padding: 15px 20px;
	}
}

/*----------------------------------------
	はじめての神宮
-----------------------------------------*/
.firstJingu {
	margin-block-start: 80px;
	inline-size: 89%;
	margin-inline: auto;
}

.firstJingu > p {
	inline-size: fit-content;
	margin-inline: auto;
}

.firstJingu > p a {
	font-family: var(--font-family-mincho);
	color: var(--color-first-gold01);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size30);
	line-height: var(--line-height20);
	display: flex;
	align-items: center;
	gap: 12px;
}

.firstJingu > p a::before {
	content: "";
	display: block;
	inline-size: 32px;
	block-size: 32px;
	margin-block-start: 4px;
	background: var(--color-first-gold01) url(/asset/img/common/arrow01w_s.svg) no-repeat center center;
	border-radius: 50%;
	transform: rotate(-90deg);
}

.firstJingu .linkList {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, 1fr);
	gap: 4px;
	margin-block-start: 24px;
	border-radius: 40px;
	overflow: hidden;
}

.firstJingu .linkList a {
	background-color: var(--color-first-offwhite01);
	block-size: 100%;
	padding-block: 10px;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 1fr 182px;
}

.firstJingu .linkList img {
	inline-size: 156px;
	margin-inline: auto;
	margin-block: auto;
}

.firstJingu .linkList a > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block: auto;
}

.firstJingu .linkList a > span span:nth-of-type(1) {
	color: var(--color-first-peacock01);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size20);
	line-height: var(--line-height15);
	margin-inline-end: -1em;
}

.firstJingu .linkList a > span span:nth-of-type(2) {
	color: var(--color-first-gold01);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size20);
	line-height: var(--line-height15);
}

.firstJingu .linkList a > span span:nth-of-type(3) {
	font-family: var(--font-family-mincho);
	color: var(--color-first-peacock01);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size18);
	line-height: var(--line-height15);
	display: grid;
	grid-template-columns: repeat(3, auto);
	align-items: center;
	gap: 6px;
	margin-block-start: 4px;
}

.firstJingu .linkList a > span span:nth-of-type(3)::before,
.firstJingu .linkList a > span span:nth-of-type(3)::after {
	content: "";
	display: block;
	inline-size: 9px;
	block-size: 1px;
	background-color: var(--color-first-peacock01);
}

@media (width <=800px) {
	.firstJingu {
		inline-size: 100%;
	}

	.firstJingu .linkList a {
		padding-block: 10px;
		padding-inline: 6%;
		grid-template-columns: repeat(2, 1fr);
	}

	.firstJingu .linkList img {
		inline-size: min(312px, 100%);
		margin-block: auto;
		padding-inline: 0 20px;
	}
}

/*----------------------------------------
	side scroll
-----------------------------------------*/
.content_wrap {
	overflow: clip !important;
}

/* 基本スクロール */
.scroll_container {
	/* スクロールできる量をJSで設定 */
}

.sticky_wrap {
	overflow: hidden;
	position: sticky;
	top: 0;
	block-size: 100vh;
}

.horizontal_scroll {
	position: absolute;
	top: 0;
	inline-size: max-content;
	block-size: 100%;
	display: flex;
	align-items: center;
	will-change: transform;
}

.scroll_contents {
	inline-size: max-content;
	block-size: fit-content;
	margin-block: auto;
}

.scrollTtl {
	inline-size: 450px;
}

@media (width <=800px) {
	.scrollTtl {
		inline-size: min(800px, 100vw);
	}
}

/* old → new */
[data-scroll-tgt="2"] .img {
	block-size: fit-content;
	margin-block: auto;
	display: grid;
}

[data-scroll-tgt="2"] img {
	grid-column: 1/2;
	grid-row: 1/2;
}

[data-scroll-tgt="2"] img.new{
	position: relative;
	z-index: 1;
}

/* キラキラ */
[data-scroll-tgt="2"] .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: grid;
}

[data-scroll-tgt="2"] [class*="bg0"] {
	grid-column: 1/2;
	grid-row: 1/1;
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

[data-scroll-tgt="2"] [class*="bg0"]::before,
[data-scroll-tgt="2"] [class*="bg0"]::after {
	content: "";
	display: block;
	width: min(100%, 450px);
}

[data-scroll-tgt="2"] .bg01::before {
	aspect-ratio: 400/72;
	background: url(/asset/img/first/beginner_sengu/effect_top01.webp);
	background-size: cover;
}

[data-scroll-tgt="2"] .bg01::after {
	aspect-ratio: 400/137;
	background: url(/asset/img/first/beginner_sengu/effect_bottom01.webp) no-repeat center center;
	background-size: cover;
}

[data-scroll-tgt="2"] .bg02::before {
	aspect-ratio: 400/72;
	background: url(/asset/img/first/beginner_sengu/effect_top02.webp);
	background-size: cover;
}

[data-scroll-tgt="2"] .bg02::after {
	aspect-ratio: 400/137;
	background: url(/asset/img/first/beginner_sengu/effect_bottom02.webp) no-repeat center center;
	background-size: cover;
}

[data-scroll-tgt="2"] [class*="bg0"]:not(:first-child)  {
	opacity: 0;
}

[data-scroll-tgt="2"] [class*="bg0"] {
	opacity: 1;
}

[data-scroll-tgt="2"] [class*="bg0"]:has(+ .is-show) {
	opacity: 0;
}

[data-scroll-tgt="2"] [class*="bg0"].is-show:not(:has(+ .is-show)) {
	opacity: 1;
}

/* スクロールコマアニメ */
[data-scroll-tgt="3"] {
	height: calc(100vh * (var(--items) + 1) / 2 + 50vh);
	position: relative;
	padding-block: 0;
}

[data-scroll-tgt="3"]  .koma_sticky {
	position: sticky;
	top: 0;
	left: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

[data-scroll-tgt="3"] .img {
	display: grid;
}

[data-scroll-tgt="3"] img {
	grid-column: 1/2;
	grid-row: 1/2;
	opacity: 0;
}

[data-scroll-tgt="3"] img:first-child {
	opacity: 1;
}

[data-scroll-tgt="3"] img:has(+ .is-show) {
	opacity: 0;
}

[data-scroll-tgt="3"] img.is-show:not(:has(+ .is-show)) {
	opacity: 1;
}

/* gifコマアニメ */
[data-scroll-tgt="4"] li {
	display: grid;
}

[data-scroll-tgt="4"] img {
	grid-column: 1/2;
	grid-row: 1/2;
}

[data-scroll-tgt="4"] img:nth-child(2) {
	opacity: 0;
}

[data-scroll-tgt="4"] li.active img:nth-child(2) {
	animation: komaAnimation 1s 5 linear 0s;
}

@keyframes komaAnimation {
	0% {
		opacity: 0;
	}
	49% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

/*----------------------------------------
	scroll effect（式年遷宮用）
-----------------------------------------*/

.opacity.speech01 {
	transform: scale(0, 0);
	transform-origin: right bottom;
}

.opacity.speech01.active {
	animation: speechAnimation 1s ease 0s forwards;
}

.opacity.speech02 {
	transform: scale(0, 0);
	transform-origin: left bottom;
}

.opacity.speech02.active {
	animation: speechAnimation 1s ease 0s forwards;
}

.speech03>p.opacity:nth-of-type(1) {
	transform: scale(0, 0);
	transform-origin: center bottom;
}

.speech03>p.opacity:nth-of-type(2) {
	transform: scale(0, 0);
	transform-origin: center top;
}

.speech03>p.opacity.active {
	animation: speechAnimation 1s ease 0s forwards;
}

@keyframes speechAnimation {
	0% {
		transform: scale(0, 0);
	}
	70% {
		transform: scale(1.02, 1.02);
	}
	100% {
		transform: scale(1, 1);
	}
}

.scroll_left.speedup,
.scroll_right.speedup,
.scroll_up.speedup {
	transition: transform .5s ease, opacity .2s;
}

.scale_down.speedup {
	transition: scale .5s ease, opacity .2s;
}

.opacity.speedup {
	transition: opacity .3s ease;
}