@charset "UTF-8";

/* 各ページ共通 */

.story-page {
	overflow-x: hidden;
	
	h1 {
		margin: 95px auto 0;
		max-width: max-content;

		img {
			width: 100%;
		}
	}

	h2,
	h3,
	h4 {
		font-family: 'Noto Serif JP';
	}

	a {
		text-decoration: none;
	}
}

.story-lead {
	background: #F5F5F5;
	display: flex;
	justify-content: center;
	position: relative;
	margin-top: 60px;
	min-height: 970px;

	&::before {
		content: "";
		position: absolute;
		top: -37px;
		left: 0;
		background: url(../images/top/white-deco_pc.webp);
		width: 100%;
		height: 75px;
	}

	&::after {
		content: "";
		position: absolute;
		bottom: -47px;
		left: 0;
		background: url(../images/top/white-deco_pc.webp);
		background-repeat: repeat-x;
		width: 100%;
		height: 75px;
	}

	.text-wrap {
		align-self: center;
		text-align: center;
		width: 50%;

		h2 {
			margin: 130px auto 0;
			width: 80%;
			max-width: max-content;

			img {
				width: 100%;
			}
		}

		p {
			font-family: 'Noto Serif JP';
			font-weight: bold;
			font-size: 20px;
			line-height: 2;
			text-align: left;
			width: 80%;

			@media (min-width: 1920px) {
				max-width: 1160px !important;
			}
		}
	}

	.detail {
		background: #fff;
		display: flex;
		align-items: center;
		gap: 68px;
		opacity: .95;
		padding: 16px 21px 16px 51px;
		position: absolute;
		bottom: 75px;
		right: 33px;
		width: 44%;
		max-width: 1160px;

		span {
			font-size: 18px;
			font-weight: 500;
			min-width: max-content;
		}

		p {
			font-size: 14px;
			position: relative;

			&::before {
				content: "";
				background: #102543;
				position: absolute;
				left: -23px;
				width: 1px;
				height: 100%;
			}
		}
	}

	.img-wrap {
		text-align: center;
		width: 50%;
		min-width: 0;

		img {
			object-fit: cover;
			object-position: center;
			width: 100%;
			height: 100%;
		}
	}
}

/* 矢印リンク 共通 */
.story-arrow-link {
	color: #000;
	display: block;
	font-size: 16px;
	line-height: 2;
	margin: 0 auto;
	padding-bottom: 14px;
	position: relative;
	text-align: center;
	transition: .3s;

	&::after {
		content: "";
		background: url(../images/story/arrow_black.svg) no-repeat;
		background-size: contain;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 8px;
		transition: .3s;
	}

	&:hover {
		color: #B40019;

		&::after {
			background: url(../images/story/arrow_red.svg) no-repeat;
			background-size: contain;
			right: -30px;
		}
	}
}

/* 外部リンク 共通 */
.ex-link {
	color: #102543;
	border-bottom: 1px solid #102543;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 2;
	padding: 0 21px 6px 19px;
	text-align: center;
	transition: .3s;
	margin: 0 auto;
	width: max-content;

	&::after {
		content: "";
		background: url(../images/external-link.svg) no-repeat;
		display: block;
		width: 14px;
		height: 14px;
	}

	&:hover {
		color: #B40019;
		border-bottom: 1px solid #B40019;

		&::after {
			background: url(../images/external-link_hover.svg) no-repeat;
		}
	}

}

/* 装飾付きタイトル 共通 */
.story-common-title {
	color: #102543;
	font-size: 36px;
	line-height: 1.66;
	text-align: center;
	position: relative;

	&::before {
		content: "";
		background: url(../images/jirikihongan_gray.webp) no-repeat;
		background-size: contain;
		position: absolute;
		top: -136px;
		left: 50%;
		transform: translateX(-50%);
		width: 144px;
		height: 128px;
	}

	span {
		font-size: 21px;
	}
}

/* スライダー 共通 */
.story-slider {
	padding: 236px 0 180px;

	h2 {
		position: relative;
		text-align: center;

		&::before {
			content: "";
			position: absolute;
			top: -87px;
			left: 50%;
			background: #102543;
			width: 1px;
			height: 70px;
		}

		&::after {
			content: "";
			background: url(../images/story/slider-splash.webp) no-repeat;
			position: absolute;
			top: -73px;
			left: 50%;
			transform: translateX(-50%);
			width: 213px;
			height: 210px;
			z-index: -1;
		}
	}

	.splide {
		margin: 86px auto 0;
		max-width: 1680px;

		.splide__slide {
			max-width: 380px;
		}

		img {
			transition: .3s;
			width: 100%;
		}

		a:hover {
			img {
				opacity: .7;
			}

			.img-wrap h3,
			p {
				color: #B40019;
			}
		}
	}

	.img-wrap {
		position: relative;

		h3 {
			color: #102543;
			font-size: 38px;
			background: #fff;
			padding: 25px 17px;
			position: absolute;
			top: 0;
			left: -1px;
			z-index: 1;
			writing-mode: vertical-rl;
			white-space: nowrap;
			letter-spacing: -0.4em;
			line-height: 1;
			transition: .3s;
		}
	}

	p {
		color: #102543;
		font-family: 'Noto Serif JP';
		font-weight: 500;
		font-size: 28px;
		line-height: 1.42;
		margin-top: 17px;
		transition: .3s;
	}

	.story-return {
		border: 1px solid #102543;
		border-radius: 8px;
		color: #102543;
		display: flex;
		align-items: center;
		gap: 16px;
		font-size: 16px;
		letter-spacing: .08em;
		line-height: 1.375;
		transition: .3s;
		padding: 18px 18px 18px 37px;
		margin: 78px auto 0;
		width: max-content;

		&::after {
			content: "";
			display: block;
			background: url(../images/arrow.svg) no-repeat;
			background-size: contain;
			width: 5px;
			height: 9px;
		}

		&:hover {
			background: #B40019;
			border: 1px solid transparent;
			color: #fff;

			&::after {
				background: url(../images/arrow_w.svg) no-repeat;
				background-size: contain;
			}
		}
	}
}

/* safari専用 */
_::-webkit-full-page-media,
_:future,
:root .img-wrap h3 {
	letter-spacing: normal;
}

/* 内部リンク 共通 */
.internal-links {
	display: flex;
	justify-content: center;
	border-left: 1px solid #102543;
	border-right: 1px solid #102543;
	margin: 0 auto;
	width: max-content;

	a {
		background: #fff;
		color: #102543;
		font-family: 'Noto Serif JP';
		font-size: 20px;
		line-height: 1.8;
		display: flex;
		align-items: center;
		flex-flow: column;
		padding: 4px 21.5px 11px;
		width: max-content;
		min-width: 123px;
		transition: .3s;

		&::after {
			content: "";
			background: url(../images/story/internal-links-arrow.svg) no-repeat;
			display: block;
			width: 12px;
			height: 6px;
			transition: .3s;
		}

		&:hover {
			background: #B40019;
			color: #fff;

			&::after {
				background: url(../images/story/internal-links-arrow_hover.svg) no-repeat;
			}
		}

		&+a {
			border-left: 1px dashed #102543;
		}
	}
}

/* さらに知る 共通 */

.more-content {
	background: url(../images/story/more-back.webp);
	box-shadow: 8px 8px 12px rgba(178, 163, 137, .25);
	padding: 75px 54px 75px 43px;
	position: relative;
	margin: 0 auto;
	max-width: 1140px;
	width: 90%;

	&::before {
		content: "";
		position: absolute;
		top: -38px;
		right: -23px;
		width: 166px;
		height: 166px;
	}

	.col {
		display: flex;
		align-items: center;
		gap: 39px;

		div:has(img) {
			flex-shrink: 0;
		}

		img {
			display: block;
			margin: 0 auto;
			width: 100%;
			max-width: max-content;
		}
	}

	h3 {
		color: #102543;
		font-size: 32px;
		line-height: 1.875;

		span {
			display: block;
			font-size: 16px;
			line-height: .5;
		}
	}

	p {
		font-size: 16px;
		line-height: 1.75;
	}

	a {
		color: #102543;
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 14px;
		padding: 0 21px 7px 6px;
		position: relative;
		transition: .3s;
		margin: 26px auto 0;
		width: max-content;

		&::before {
			content: "";
			position: absolute;
			bottom: 0;
			background: #102543;
			width: 100%;
			height: 1px;
		}

		&::after {
			content: "";
			display: block;
			background: url(../images/external-link.svg) no-repeat;
			width: 14px;
			height: 14px;
		}

		&:hover {
			color: #B40019;

			&::before {
				background: #B40019;
			}

			&::after {
				background: url(../images/external-link_hover.svg) no-repeat;
			}
		}
	}

	@media (max-width: 1240px) {
		.col {
			flex-flow: column;
		}
	}
}

.more-content.learn::before {
	background: url(../images/story/more-icon_learn.webp) no-repeat;
}

.more-content.worship::before {
	background: url(../images/story/more-icon_worship.webp) no-repeat;
}

.more-content.eat::before {
	background: url(../images/story/more-icon_eat.webp) no-repeat;
}


/* お守り 共通 */

.omamori {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 60px;
	padding-top: 100px;
	margin: 0 0 0 auto;
	width: 95%;

	.adjust-sp {
		display: none;
	}

	div {
		width: 540px;
	}

	h3::before {
		background: url(../images/story/shirokojinja/title-omamori.svg) no-repeat;
	}

	p {
		font-size: 16px;
		letter-spacing: .08em;
		line-height: 1.875;
		margin-top: 29px;
	}

	.story-arrow-link {
		margin-top: 14px;
		width: 144px;
	}

	h3 {
		color: #102543;
		display: flex;
		align-items: center;
		flex-flow: column;
		gap: 13px;
		justify-content: center;
		font-size: 30px;
		line-height: 1.06;
		letter-spacing: .08em;

		&::before {
			content: "";
			display: block;
			width: 50px;
			height: 43px;
		}

		span {
			font-size: 21px;
		}
	}
}

@media (max-width: 1300px) {

	.omamori {
		display: block;

		.adjust-pc {
			display: none;
		}

		.adjust-sp {
			display: block;
			margin: 21px auto 0;
			width: 100%;
			max-width: max-content;
		}

		div {
			margin: 0 auto;
			width: 90%;
		}
	}
}


/* =========================================
   上杉鷹山
   ========================================= */

.uesugiyouzan .story-lead .text-wrap p {
	margin: 58px auto 133px;
	max-width: 693px;
}

/* 上杉鷹山 コンテンツ */
.uesugiyouzan-introduction {
	margin: 284px auto 0;
	width: 90%;
	max-width: 1140px;

	>p {
		font-family: 'Noto Serif JP';
		font-size: 20px;
		line-height: 1.8;
		margin-top: 48px;
	}

	.col {
		display: flex;
		align-items: center;
		gap: 35px;
		margin: 70px auto 0;

		img {
			width: 90%;
			max-width: 455px;
		}

		&:nth-child(even) {
			flex-flow: row-reverse;
		}

		&:nth-of-type(1) h3::before {
			background: url(../images/story/uesugiyouzan/intro-icon_1.svg) no-repeat;
		}

		&:nth-of-type(2) h3::before {
			background: url(../images/story/uesugiyouzan/intro-icon_2.svg) no-repeat;
		}

		&:nth-of-type(3) h3::before {
			background: url(../images/story/uesugiyouzan/intro-icon_3.svg) no-repeat;
		}

		p {
			display: block;
			font-size: 16px;
			line-height: 2;
			margin-top: 17px;
		}

		span {
			display: block;
			font-size: 14px;
			margin-top: 31px;
		}

		.story-arrow-link {
			margin-top: 4em;
			width: 205px;
		}

		.effort {
			max-width: 540px;
		}
	}

	h3 {
		color: #102543;
		display: flex;
		align-items: center;
		gap: 14px;
		font-size: 30px;
		letter-spacing: .08em;
		line-height: 1.06;
		position: relative;

		&::before {
			content: "";
			display: block;
			width: 50px;
			height: 43px;
		}
	}
}

/* 細井平洲の教え */

.hosoi-heishu {
	background: #F5F5F5;
	padding: 98px 0 126px;
	position: relative;
	margin-top: 210px;

	&::before {
		content: "";
		background: url(../images/jirikihongan_gray.webp) no-repeat;
		background-size: contain;
		position: absolute;
		top: -64px;
		left: 50%;
		transform: translateX(-50%);
		width: 144px;
		height: 128px;
	}

	h2 {
		color: #102543;
		font-size: 36px;
		text-align: center;

		span {
			display: block;
			font-size: 28px;
		}
	}

	.col {
		display: flex;
		gap: 46px;
		margin-top: 56px;

		p {
			font-size: 18px;
			line-height: 2;
			margin: 0 0 auto auto;
			width: 90%;

			@media (min-width: 1940px) {
				margin: 0 auto;
				max-width: 1160px !important;
			}
		}

		.text-wrap {
			align-self: center;
			width: 50%;

			.story-arrow-link {
				margin-top: 5em;
				width: 253px;

				&::after {
					background-size: cover;
				}
			}
		}

		.img-wrap {
			width: 50%;

			img {
				object-fit: cover;
				object-position: center;
				width: 100%;
				height: 100%;
			}
		}
	}

	@media (max-width: 1140px) {
		.col {
			flex-flow: column-reverse;

			.text-wrap,
			.img-wrap {
				width: 100%;
			}
		}
	}
}

/* 上杉鷹山 さらに知る */

.uesugiyouzan-more {
	padding: 222px 0 0;

	h2 {
		color: #102543;
		font-size: 36px;
		line-height: 1.66;
		text-align: center;
		position: relative;

		&::before {
			content: "";
			background: #102543;
			position: absolute;
			top: -70px;
			left: 50%;
			width: 1px;
			height: 70px;
		}
	}

	.more-content {

		ul {
			background: #fff;
			padding: 11px 1em 11px 24px;
			margin-top: 16px;

			li {
				display: flex;
				gap: 1em;
				font-size: 14px;
			}

			span {
				display: flex;
				align-items: center;
				gap: 8px;
				position: relative;

				&::before {
					content: "";
					display: block;
					background: #B40019;
					width: 9px;
					height: 9px;
				}
			}
		}
	}

	.more-content.learn {
		margin-top: 52px;

		.col {
			align-items: flex-start;
			gap: 33px;
		}

		@media (max-width: 1240px) {
			.col {
				align-items: center;
			}
		}

		ul {
			span {
				min-width: 73px;
			}
		}
	}

	.more-content.worship {
		margin-top: 70px;
	}
}

/* =========================================
   白子神社
   ========================================= */
.shirokojinja .story-lead .text-wrap p {
	margin: 60px auto 119px;
	max-width: 684px;
}

/* 倹約誓詞 */
.oath {
	padding: 250px 0 0;

	>p {
		font-family: 'Noto Serif JP';
		font-size: 20px;
		text-align: center;
		margin: 37px auto 0;
	}

	.col {
		display: flex;
		align-items: flex-start;
		margin: 45px auto 0;
		width: 90%;
		max-width: 1140px;

		figcaption {
			font-size: 14px;
			line-height: 1.71;
			margin-top: 11px;
		}

		img {
			width: 100%;
		}

		>div {
			width: 50%;
		}

		h3 {
			border-bottom: 1px solid #000;
			font-size: 24px;
			font-weight: normal;
			line-height: 1;
			padding-left: 45px;
			padding-bottom: 23px;
			margin-top: 60px;
		}

		p {
			font-size: 16px;
			padding: 23px 45px;
		}
	}

	@media (max-width: 1040px) {
		.col {
			align-items: center;
			flex-flow: column;

			>div {
				width: 100%;
			}
		}
	}

	.splide {
		background: #F5F5F5;
		padding: 82px 0;
		margin-top: 64px;

		img {
			width: 100%;
		}
	}
}

/* 自らの決意を誓う */
.shirokojinja-content {
	padding: 287px 0 0;

	h2 {
		margin-bottom: 40px;
	}

	.title-wrap {
		display: flex;
		align-items: center;
		flex-flow: column;

		img {
			width: 100%;
			max-width: max-content;
		}
	}

	.img-wrap {
		margin: 0 auto;
		width: 100%;
		max-width: 1140px;

		img {
			object-fit: cover;
			object-position: center;
			width: 100%;
			min-height: 238px;
		}
	}

	h3 {
		color: #102543;
		display: flex;
		align-items: center;
		flex-flow: column;
		gap: 13px;
		justify-content: center;
		font-size: 30px;
		line-height: 1.06;
		letter-spacing: .08em;

		&::before {
			content: "";
			display: block;
			width: 50px;
			height: 43px;
		}

		span {
			font-size: 21px;
		}
	}

	.reservation {
		border: 1px solid #102543;
		display: flex;
		margin: 0 auto;
		max-width: max-content;

		p {
			background: #F5F5F5;
			color: #102543;
			font-family: 'Noto Serif JP';
			font-weight: bold;
			font-size: 18px;
			letter-spacing: .08em;
			line-height: 1.77;
			padding: 12px 0 14px;
			text-align: center;
			margin: 0 auto;
			max-width: max-content;

			&+p {
				border-left: 1px solid #102543;
			}
		}
	}

	.dedication {
		margin: 0 auto;
		padding-top: 65px;
		width: 90%;

		h3 {
			margin-top: 43px;
		}

		h3::before {
			background: url(../images/story/shirokojinja/title-dedication.svg) no-repeat;
		}

		>p {
			font-family: 'Noto Serif JP';
			font-size: 20px;
			line-height: 1.8;
			text-align: center;
			margin-top: 40px;
		}

		.refrain {
			color: #B40019;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			gap: 10px;
			font-family: 'Noto Sans JP';
			font-weight: 500;

			&::before {
				content: "";
				background: url(../images/story/shirokojinja/refrain-icon.svg) no-repeat;
				display: block;
				margin-top: 4px;
				width: 24px;
				height: 24px;
				flex-shrink: 0;
			}
		}

		.reservation {
			margin-top: 30px;

			p {
				min-width: 300px;
			}
		}

		.mind {
			border: 1px solid #102543;
			border-radius: 8px;
			box-shadow: 0 0 20px 0 rgba(189, 192, 199, .4);
			display: flex;
			flex-flow: column;
			gap: 56px;
			padding: 40px 60px 34px 70px;
			margin: 60px auto 0;
			width: 100%;
			max-width: 900px;
			min-height: 652px;
			writing-mode: vertical-rl;

			div {
				border-left: 1px dashed #102543;
				display: flex;
				flex-flow: column;
				gap: 42px;
				padding-left: 43px;
			}

			p {
				font-family: 'Noto Serif JP-rl';
				font-size: 20px;
				letter-spacing: .08em;
				margin-top: 45px;
			}

			ul {

				li {
					display: flex;
					font-family: 'Noto Serif JP-rl';
					font-weight: bold;
					font-size: 24px;
					line-height: 1.5;
					margin-left: 42px;

					&::before {
						content: "一、";
						font-family: 'Noto Serif JP-rl';
					}

					&:last-child {
						margin-left: 0;
					}
				}
			}
		}

		@media (max-width: 900px) {
			.mind {
				gap: 50px;
				padding: 48px 50px 58px;
				min-height: auto;
				writing-mode: initial;

				div {
					border-left: none;
					border-bottom: 1px dashed #102543;
					display: flex;
					align-items: center;
					gap: 24px;
					padding-left: 0;
					padding-bottom: 30px;
				}

				p {
					font-family: 'Noto Serif JP';
					margin-top: 0;
					line-height: 1.6;
				}

				ul li {
					font-family: 'Noto Serif JP';
					margin-left: 0;
					margin-bottom: 42px;

					&::before {
						font-family: 'Noto Serif JP';
					}

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}

	>.col {
		display: flex;
		align-items: flex-start;
		gap: 60px;
		margin: 102px auto 0;
		max-width: 1140px;

		section>p {
			font-size: 16px;
			letter-spacing: .08em;
			line-height: 1.875;
			margin-top: 29px;
		}

		.reservation {
			margin-top: 23px;

			p {
				min-width: 270px;
			}

			.phone {
				display: block;
				font-size: 14px;
				font-weight: normal;
				padding-top: 8px;
				position: relative;
			}

			.phone::before {
				content: "";
				border-top: 1px dashed #102543;
				position: absolute;
				top: 0;
				width: 90%;
				height: 1px;
			}
		}
	}

	@media (max-width: 1200px) {
		>.col {
			flex-flow: column;
			width: 90%;
		}
	}

	.worship {
		h3 {
			margin-top: 14px;

			&::before {
				background: url(../images/story/shirokojinja/title-worship.svg) no-repeat;
			}
		}
	}

	.ema {
		h3 {
			margin-top: 14px;

			&::before {
				background: url(../images/story/shirokojinja/title-ema.svg) no-repeat;
			}
		}
	}

	.festival {
		padding-top: 100px;
		margin: 0 auto;
		width: 90%;
		max-width: 1140px;

		h3::before {
			background: url(../images/story/shirokojinja/title-festival.svg) no-repeat;
		}

		.col {
			display: flex;
			align-items: center;
			gap: 30px;
			margin: 19px auto 14px;

			div {
				flex-shrink: 0;
				background: #F5F5F5;
				color: #102543;
				text-align: center;
				padding: 18px 47px 25px;

				h4 {
					border-bottom: 1px solid #102543;
					font-size: 30px;
				}

				p {
					border-bottom: 1px solid #102543;
					font-size: 18px;
					font-weight: bold;
				}
			}

			p {
				font-size: 16px;
				letter-spacing: .08em;
				line-height: 1.875;
			}
		}

		img {
			width: 100%;
		}
	}

	@media (max-width: 960px) {
		.festival .col {
			flex-flow: column;
			gap: 26px;

			div {
				display: flex;
				align-items: center;
				flex-flow: column;
				width: 100%;

				h4,
				p {
					display: block;
					white-space: nowrap;
					width: 140px;
				}
			}
		}
	}

	.access {
		background: #102543;
		padding: 75px 0 98px;
		margin: 100px auto 0;

		h3 {
			color: #fff;

			&::before {
				background: url(../images/story/shirokojinja/title-access.svg) no-repeat;
			}
		}

		.col {
			display: flex;
			margin: 40px auto 0;
			width: 90%;
			max-width: 1140px;
		}

		.map {
			width: 100%;
			max-width: 740px;

			iframe {
				width: 100%;
				height: 100%;
			}
		}

		.access-detail {
			background: #fff;
			padding: 20px 30px 0;

			h4 {
				font-size: 22px;
			}

			ul {
				padding: 14px 0;
			}

			li {
				display: flex;
				align-items: center;
				gap: 10px;
				font-size: 16px;
				letter-spacing: .08em;
				line-height: 1.875;

				&::before {
					content: "";
					display: block;
					background: #B40019;
					width: 9px;
					height: 9px;
				}
			}

			div {
				border-top: 1px dashed #939393;
				display: flex;
				align-items: flex-start;
				gap: 17px;
				padding: 14px 0;
			}

			h5 {
				background: #f5f5f5;
				font-size: 14px;
				font-weight: normal;
				letter-spacing: .08em;
				line-height: 2.14;
				text-align: center;
				width: 106px;
			}

			p {
				font-size: 14px;
				letter-spacing: .08em;
				line-height: 1.71;
			}
		}
	}
}

/* 誓詞について知る */
.dedication-more {
	padding-top: 150px;

	h2 {
		display: flex;
		flex-flow: column;
		align-items: center;
		gap: 15px;
		font-size: 36px;
		line-height: 1.66;

		&::before {
			content: "";
			background: #102543;
			display: block;
			width: 1px;
			height: 50px;
		}
	}

	.more-content.worship {
		margin-top: 58px;

		.circle {
			margin: 8px auto 14px 20px;

			li {
				display: flex;
				align-items: flex-start;
				gap: 7px;
				font-size: 16px;
				line-height: 1.75;

				&::before {
					content: "";
					display: block;
					background: #000;
					border-radius: 50%;
					margin-top: 11px;
					width: 6px;
					height: 6px;
				}
			}
		}

		.square {
			background: #fff;
			padding: 9px 1em 9px 24px;
			margin-top: 26px;

			li {
				display: flex;
				align-items: flex-start;
				gap: 8px;
				font-size: 14px;
				line-height: 2;

				&::before {
					content: "";
					display: block;
					background: #B40019;
					margin-top: 10px;
					width: 9px;
					height: 9px
				}
			}
		}
	}
}

/* =========================================
	原方さしこ
   ========================================= */

.harakatasashiko .story-lead .text-wrap p {
	margin: 55px auto 109px;
	max-width: 684px;
}

.harakatasashiko .story-lead .detail {
	gap: 36px;
	padding-left: 18px;

	p::before {
		left: -18px;
	}

	span span {
		display: block;
		font-size: 13px;
	}
}

.harakatasashiko .omamori {
	padding-top: 170px;
}

/* 花雑巾 */
.flower-rag {
	padding-top: 237px;
	margin: 0 auto;
	width: 90%;
	max-width: 1140px;

	>img {
		display: block;
		margin: 38px auto 0;
		width: 100%;
	}
}

.poem-wrap {
	position: relative;

	&::before {
		content: "";
		background: url(../images/story/harakatasashiko/pattern.webp) no-repeat;
		background-size: contain;
		position: absolute;
		top: -130px;
		right: -235px;
		width: 623px;
		height: 652px;
		z-index: -1;
	}
}

.poem {
	margin: 60px auto 0;
	max-width: 990px;
	writing-mode: vertical-rl;
	min-height: 375px;

	.poem-title {
		margin-left: 40px;

		p {
			text-align: right;
			margin: auto 20px 0 0;
		}
	}

	h3 {
		font-family: 'Noto Serif JP-rl';
		font-size: 36px;
	}

	p {
		font-family: 'Noto Serif JP-rl';
		font-size: 18px;
		font-weight: 500;
		letter-spacing: .15em;
		line-height: 1.77;
		margin-left: 34px;

		&:last-child {
			margin-left: 0;
		}
	}

	@media (max-width: 1100px) {

		.poem-title,
		p {
			margin-left: 20px;
		}
	}
}

@media screen and (max-width: 1000px) {

	.poem-wrap::before {
		top: -44px;
		right: -150px;
	}

	.poem {
		margin-top: 56px;
		max-width: 675px;
		writing-mode: initial;

		.poem-title {
			margin-left: 0;

			p {
				margin: 13px 0 0;
			}
		}

		h3 {
			font-family: 'Noto Serif JP';
			text-align: center;
		}

		p {
			font-family: 'Noto Serif JP';
			letter-spacing: 0;
		}
	}

	.poem-text {
		display: flex;
		align-items: center;
		flex-direction: column;
		flex-wrap: wrap;
		height: 530px;
		margin-top: 20px;

		p {
			margin: 34px 0 0;
			width: 48%;

			&:first-child,
			&:nth-child(4) {
				margin-top: 0;
			}
		}
	}
}

/* 遠藤きよ子 */
.endo-kiyoko {
	display: flex;
	align-items: center;
	gap: 65px;
	padding-top: 270px;
	margin: 0 auto;
	width: 90%;
	max-width: 1140px;

	.adjust-sp {
		display: none;
	}

	>div {
		margin-top: 128px;
	}

	.story-common-title {
		line-height: 1.38;

		span {
			margin-right: 18px;
		}
	}

	p {
		font-size: 16px;
		letter-spacing: .08em;
		line-height: 1.875;
		margin-top: 37px;
	}

	.book {
		background: #F5F5F5;
		border-radius: 4px;
		margin-top: 30px;
		padding: 18px 0;
		text-align: center;
		width: 100%;
	}
}

@media screen and (max-width: 1140px) {
	.endo-kiyoko {
		flex-flow: column;

		.adjust-sp {
			display: block;
			margin: 25px auto 0;
			width: 100%;
			max-width: max-content;
		}

		.adjust-pc {
			display: none;
		}

		>div {
			margin-top: 0;
		}
	}
}

/* 原方さしこをさらに知る */
.harakatasashiko-more {
	padding-top: 150px;

	h2 {
		font-size: 36px;
		line-height: 1.66;
		display: flex;
		align-items: center;
		flex-flow: column;
		gap: 15px;

		&::before {
			content: "";
			background: #102543;
			display: block;
			width: 1px;
			height: 50px;
		}
	}

	.more-content {
		margin-top: 45px;
	}
}

/* =========================================
	籍田の礼
   ========================================= */
.sekidennorei .story-lead .text-wrap p {
	margin: 80px auto 88px;
	max-width: 684px;
}

/* あきらめない心 */
.inherit {
	padding-top: 293px;
	margin: 0 auto;
	width: 90%;
	max-width: 1140px;

	.story-common-title {
		line-height: 1.38;
	}

	>p {
		margin-top: 34px;
		font-family: 'Noto Serif JP';
		font-size: 20px;
		line-height: 1.8;
		text-align: center;
	}

	img {
		width: 100%;
	}

	.inherit-gallery {
		margin-top: 40px;
	}

	.thumbnail-list {
		display: flex;
		margin-top: 6px;

		li {
			transition: .1s;

			img {
				opacity: 1;
				transition: 1s;
			}

			&+li {
				margin-left: 6px;
			}

			&.is-active {
				opacity: .5;
			}

			/*&.is-active {
				margin-left: 0;
				width: 0;

				img {
					opacity: 0;
				}
			}*/
		}

		/* 初期表示用 
		li.is-active+li:nth-child(2) {
			margin-left: 0;
		} */
	}

	/* 祭典 */
	.festival {
		padding-top: 33px;

		h3 {
			color: #102543;
			display: flex;
			align-items: center;
			flex-flow: column;
			gap: 13px;
			font-size: 30px;
			letter-spacing: .08em;
			line-height: 1.06;

			&::before {
				content: "";
				background: url(../images/story/sekidennorei/title-festival.svg) no-repeat;
				display: block;
				width: 50px;
				height: 43px;
			}
		}

		.col {
			display: flex;
			gap: 38px;
			margin-top: 19px;
		}

		@media (max-width: 960px) {
			.col {
				align-items: center;
				flex-flow: column;
			}
		}

		div p {
			font-size: 16px;
			line-height: 1.875;
		}

		.detail {
			background: #F5F5F5;
			color: #102543;
			padding: 16px 11px 12px;
			flex-shrink: 0;
			width: 100%;
			max-width: 394px;

			div {
				display: flex;
				gap: 42px;
				justify-content: center;
			}

			h4 {
				font-size: 30px;
				letter-spacing: .08em;
				text-align: center;
			}

			span {
				display: block;
				border-top: 1px solid #102543;
				border-bottom: 1px solid #102543;
				font-family: 'Noto Sans JP';
				font-size: 18px;
				line-height: 1.77;
				margin-top: 5px;
			}

			p {
				background: #fff;
				font-size: 14px;
				letter-spacing: .08em;
				line-height: 2.28;
				padding: 0 14px;
				margin-top: 16px;
			}
		}

		.ex-link {
			margin-top: 30px;
		}
	}

	/* 上杉藉田米 */
	.uesugisekidenmai {
		padding-top: 154px;

		.col {
			display: flex;
			align-items: center;
			gap: 68px;

			img {
				max-width: 560px;
			}
		}

		@media (max-width: 1040px) {
			.col {
				flex-flow: column-reverse;
			}

		}

		h3 {
			color: #102543;
			font-size: 36px;
			text-align: center;

			span {
				display: block;
				font-size: 21px;
			}
		}

		p {
			font-size: 16px;
			letter-spacing: .08em;
			line-height: 1.875;
			margin-top: 30px;
		}

		.ex-link {
			margin-top: 10px;
		}
	}
}

/* =========================================
   かてもの
   ========================================= */
.katemono .story-lead .text-wrap p {
	margin: 68px auto 34px;
	max-width: 684px;
}

/* デジタルライブラリー */

.katemono .story-lead .text-wrap .library {
	background: #fff;
	display: flex;
	align-items: center;
	gap: 56px;
	padding: 15px 30px 23px;
	margin: 57px auto 63px;
	width: 90%;
	max-width: 676px;

	div {
		max-width: 384px;
	}

	h3 {
		display: flex;
		align-items: center;
		gap: 23px;
		font-size: 24px;
		text-align: left;
		line-height: 1.66;

		span {
			font-family: 'Noto Sans JP';
			font-size: 14px;
			font-weight: normal;
		}
	}

	p {
		font-family: 'Noto Sans JP';
		font-size: 16px;
		font-weight: normal;
		line-height: 1.625;
		margin: 7px 0 0;
		width: 100%;
	}

	a {
		flex-shrink: 0;
		border: 1px solid #102543;
		border-radius: 8px;
		color: #102543;
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 14px;
		line-height: 2;
		padding: 15px 22px 15px 24px;
		transition: .3s;

		&::after {
			content: "";
			display: block;
			background: url(../images/external-link.svg) no-repeat;
			background-size: contain;
			width: 17px;
			height: 17px;
		}

		&:hover {
			background: #B40019;
			color: #fff;

			&::after {
				background: url(../images/external-link_hover_white.svg) no-repeat;
			}
		}
	}
}

@media (max-width: 1240px) {
	.katemono .story-lead .text-wrap .library {
		gap: 20px;
	}
}

@media (max-width: 1140px) {
	.katemono .story-lead .text-wrap .library {
		flex-flow: column;
		gap: 8px;
	}
}

/* かてものをさらに知る */
.katemono-more {
	padding-top: 150px;

	h2 {
		font-size: 36px;
		line-height: 1.66;
		display: flex;
		align-items: center;
		flex-flow: column;
		gap: 15px;

		&::before {
			content: "";
			background: #102543;
			display: block;
			width: 1px;
			height: 50px;
		}
	}

	.more-content {
		margin-top: 58px;

		ul {
			background: #fff;
			padding: 11px 24px;
			margin-top: 20px;
		}

		li {
			display: flex;
			gap: 1em;
			font-size: 14px;
			line-height: 1.71;
			margin-top: 12px;

			&:first-child {
				margin-top: 0;
			}

			span {
				display: flex;
				align-items: center;
				gap: 8px;
				min-width: 73px;

				&::before {
					content: "";
					background: #B40019;
					display: block;
					width: 9px;
					height: 9px;
				}
			}
		}
	}
}

/* -------- sp size */

@media screen and (max-width: 767px) {

	/* 各ページ共通 sp */

	h1 {
		margin-top: 60px;
	}

	.story-lead {
		flex-flow: column;
		margin-top: 22px;
		padding: 90px 0;

		&::before {
			background: url(../images/top/white-deco_sp.webp);
			background-position: center;
			height: 44px;
			top: -22px;
		}

		&::after {
			background: url(../images/top/white-deco_sp.webp);
			background-position: center;
			height: 44px;
			bottom: -25px;
		}

		.text-wrap {
			order: 2;
			width: 100%;

			p {
				font-size: 17px;
				line-height: 2;
				width: 90%;
			}
		}

		.img-wrap {
			order: 1;
			width: 100%;

			>img {
				margin-top: 37px;
			}
		}

		.detail {
			order: 3;
			flex-flow: column;
			gap: 21px;
			position: relative;
			bottom: auto;
			right: auto;
			margin: 0 auto;
			padding: 12px 24px;
			width: 90%;

			span {
				font-size: 16px;
			}

			p {
				line-height: 1.92;

				&::before {
					left: auto;
					top: -12px;
					width: 100%;
					height: 1px;
				}
			}
		}
	}

	/* 矢印リンク 共通 sp */
	.story-arrow-link {
		padding-bottom: 8px;
	}

	/* 装飾付きタイトル 共通 sp */
	.story-common-title {
		font-size: 24px;
		line-height: 1.5;

		&::before {
			top: -104px;
			width: 100px;
			height: 88px;
		}
	}

	/* 内部リンク 共通 */
	.internal-links {
		border: none;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 9px 0;

		a {
			font-size: 16px;
			line-height: 2.25;
			padding: 4px 18px 11px;
			min-width: 100px;
		}

		a:nth-child(4) {
			border: none;
		}
	}

	/* さらに知る 共通 sp */
	.more-content {
		padding: 0 0 38px;

		&::before {
			content: none;
		}

		.col {
			gap: 20px;

			>div {
				position: relative;
				margin: 0 auto;
				width: 90%;

				&:first-child::before {
					content: none;
				}

				&::before {
					content: "";
					position: absolute;
					top: -46px;
					right: -42px;
					width: 119px;
					height: 119px;
				}
			}
		}

		h3 {
			font-size: 22px;
			line-height: 1.36;

			span {
				line-height: 1.42;
			}
		}

		p {
			font-size: 14px;
			line-height: 1.71;
			margin-top: 14px;
		}
	}

	.more-content.learn .col>div::before {
		background: url(../images/story/more-icon_learn.webp) no-repeat;
		background-size: contain;
	}

	.more-content.worship .col>div::before {
		background: url(../images/story/more-icon_worship.webp) no-repeat;
		background-size: contain;
	}

	.more-content.eat .col>div::before {
		background: url(../images/story/more-icon_eat.webp) no-repeat;
		background-size: contain;
	}

	/* スライダー 共通 sp */
	.story-slider {
		padding-bottom: 95px;
		margin: 0 auto;
		width: 90%;

		.splide {
			margin-top: 78px;

			.splide__slide {
				max-width: none;
			}
		}

		p {
			font-size: 26px;
			line-height: 1;
			letter-spacing: .08em;
			margin-top: 13px;
		}

		.story-return {
			gap: 10px;
			font-size: 14px;
			padding: 10px 10px 10px 23px;
			margin-top: 45px;
		}
	}

	/* お守り 共通 sp */
	.omamori {
		padding-top: 90px;
		width: 100%;

		p {
			margin-top: 35px;
		}

		.story-arrow-link {
			margin-top: 22px;
		}

		h3 {
			font-size: 24px;
			line-height: 1.33;
			gap: 8px;

			span {
				font-size: 18px;
			}
		}
	}

	/* 上杉鷹山 sp */
	.uesugiyouzan .story-lead .text-wrap p {
		margin: 23px auto 26px;
	}

	.uesugiyouzan-introduction {
		margin-top: 189px;

		>p {
			font-size: 18px;
			line-height: 1.77;
			margin-top: 27px;
		}

		.col {
			flex-flow: column;
			gap: 0;
			margin-top: 60px;

			&:nth-child(even) {
				flex-flow: column;
			}

			p {
				line-height: 1.875;
				margin-top: 15px;
			}

			span {
				margin-top: 15px;
			}

			.story-arrow-link {
				margin-top: 2.5em;
				width: 176px;
			}
		}

		h3 {
			font-size: 24px;
			flex-flow: column;
			gap: 6px;
			margin-top: -25px;
		}
	}

	/* 細井平洲の教え sp */

	.hosoi-heishu {
		padding: 53px 0 60px;
		margin-top: 140px;

		&::before {
			top: -44px;
			width: 100px;
			height: 88px;
		}

		h2 {
			font-size: 24px;

			span {
				font-size: 16px;
			}
		}

		.col {
			flex-flow: column-reverse;
			gap: 32px;
			margin-top: 16px;

			.text-wrap {
				width: 100%;
			}

			.img-wrap {
				width: 100%;
			}

			p {
				font-size: 16px;
				line-height: 1.875;
				margin: 0 auto;
			}
		}
	}

	/* 上杉鷹山 さらに知る sp */

	.uesugiyouzan-more {
		padding: 113px 0 0;

		h2 {
			font-size: 24px;
			line-height: 2.5;

			&::before {
				top: -50px;
				height: 50px;
			}
		}

		.more-content {

			ul {
				padding: 17px 15px 23px 18px;
				margin-top: 28px;

				li {
					font-size: 14px;
					flex-flow: column;
					gap: 0;
					margin-top: 12px;

					&:first-child {
						margin-top: 0;
					}

					p {
						font-size: 14px;
						margin: 0 0 0 17px;
					}
				}
			}

			a {
				margin-top: 30px;
			}
		}

		.more-content.learn {
			margin-top: 22px;
		}

		.more-content.worship {
			margin-top: 44px;
		}
	}

	/* =========================================
	白子神社 sp
	========================================= */

	.shirokojinja .story-lead .text-wrap p {
		margin: 23px auto 38px;
	}

	/* 倹約誓詞 sp */
	.oath {
		padding-top: 180px;

		>p {
			font-size: 18px;
			line-height: 1.77;
			text-align: left;
			margin: 34px auto 0;
			width: 90%;
		}

		.col {

			h3 {
				font-size: 18px;
				margin-top: 45px;
				padding: 0 0 11px 0;
			}

			p {
				font-size: 14px;
				line-height: 1.71;
				padding: 23px 0 0;
			}
		}

		.splide {
			margin-top: 70px;
			padding: 40px 0;
		}
	}

	/* 自らの決意を誓う sp */
	.shirokojinja-content {
		padding-top: 174px;

		.title-wrap {
			flex-flow: column-reverse;
		}

		h3 {
			font-size: 24px;
			line-height: 1.33;
			gap: 8px;

			span {
				font-size: 18px;
			}
		}

		.reservation {
			flex-flow: column;

			p {
				font-size: 16px;

				&+p {
					border-left: none;
					border-top: 1px solid #102543;
				}
			}

			.phone {
				max-width: max-content;
				margin: 0 auto;
			}
		}

		>.col .reservation p {
			min-width: 316px;
		}

		.dedication {
			padding-top: 63px;

			h3 {
				margin: 0 auto 13px;
			}

			>p {
				font-size: 18px;
				line-height: 1.77;
				margin-top: 27px;
				text-align: left;
			}

			.refrain {
				font-size: 18px;
				line-height: 1.77;
			}

			.reservation p {
				min-width: 318px;
			}

			.mind {
				gap: 25px;
				padding: 30px 21px 35px;
				margin-top: 42px;

				img {
					width: 100%;
				}

				div {
					padding-bottom: 12px;
				}

				p {
					font-size: 14px;
					line-height: 1.71;
				}

				ul li {
					font-size: 18px;
					line-height: 1.66;
					margin-bottom: 30px;
				}
			}
		}

		>.col {
			margin-top: 0;
			gap: 0;

			section>p {
				font-size: 16px;
				line-height: 1.625;
				margin-top: 28px;
			}

			.reservation {
				margin-top: 26px;
			}
		}

		.worship {
			padding-top: 90px;

			h3 {
				margin: 0 auto 13px;
			}
		}

		.ema {
			padding-top: 90px;

			h3 {
				margin: 0 auto 21px;
			}
		}

		.festival .col {
			margin: 22px auto 19px;

			div {
				padding: 13px 0;

				h4 {
					font-size: 26px;
					line-height: 1.23;
				}

				p {
					font-size: 16px;
					line-height: 2;
				}
			}
		}

		.access {
			margin-top: 90px;
			padding: 50px 0 55px;

			.col {
				flex-flow: column-reverse;
				margin-top: 30px;
			}

			.access-detail {
				padding: 12px 21px 0;

				ul {
					padding: 11px 0 13px;
				}

				li {
					font-size: 14px;
					line-height: 1.71;

					&::before {
						content: none;
					}
				}

				div {
					flex-flow: column;
					gap: 7px;
					padding: 15px 0;
				}
			}

			img {
				display: none;
			}

			.map {
				height: 548px;
			}
		}
	}

	/* 誓詞について知る */
	.dedication-more {
		padding-top: 90px;

		h2 {
			gap: 0;
			font-size: 24px;
			line-height: 2.5;
		}

		.col>div::before {
			background: url(../images/story/more-icon_worship.webp) no-repeat;
			background-size: contain;
		}

		.more-content.worship {
			margin-top: 36px;

			.circle {
				margin: 10px auto 5px 29px;

				li {
					gap: 6px;
					font-size: 14px;
					line-height: 1.71;
				}
			}

			.square {
				padding: 17px 1em 10px 15px;

				li {
					font-size: 12px;
					line-height: 1.5;

					+li {
						margin-top: 5px;
					}
				}
			}
		}
	}

	/* =========================================
		原方さしこ sp
	========================================= */

	.harakatasashiko .story-lead .text-wrap p {
		margin: 19px auto 47px;
	}

	.harakatasashiko .story-lead .detail {
		gap: 20px;

		p::before {
			left: auto;
		}

		span {
			display: inline-block;
			line-height: 1.8;
			text-align: center;
		}

		span span {
			font-size: 16px;
		}
	}

	.harakatasashiko .omamori {
		padding-top: 90px;
	}

	/* 花雑巾 sp */
	.flower-rag {
		padding-top: 170px;
	}

	.poem-wrap::before {
		top: -9px;
		right: -170px;
		width: 489px;
		height: 511px;
	}

	.poem {
		margin-top: 3em;
		max-width: 500px;

		.poem-title {

			h3 {
				font-size: 24px;
				line-height: 1.33;
				letter-spacing: .12em;
				font-weight: 500;
			}

			p {
				font-size: 16px;
				line-height: 2;
				margin: 1.2em 0;
			}
		}
	}

	.poem-text {
		align-items: flex-start;
		margin: 0;
		height: auto;

		p {
			font-size: 16px;
			line-height: 2;
			margin: 32px auto 0;
			width: 100%;
		}
	}

	.endo-kiyoko {
		padding-top: 247px;

		p {
			line-height: 1.625;
		}

		.book {
			font-size: 14px;
			margin-top: 28px;
			padding: 15px;
		}
	}

	/* 原方さしこをさらに知る sp */

	.harakatasashiko-more {
		padding-top: 100px;

		h2 {
			gap: 0;
			font-size: 24px;
			line-height: 2.5;
		}
	}

	/* =========================================
	藉田の礼 sp
	========================================= */
	.sekidennorei .story-lead .text-wrap p {
		margin: 38px auto 0;
	}

	/* あきらめない心 sp */
	.inherit {
		padding-top: 168px;

		>p {
			font-size: 18px;
			line-height: 1.77;
			text-align: left;
			margin-top: 23px;
		}

		.inherit-gallery {
			margin-top: 35px;
		}

		.thumbnail-list {
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 0;

			li {
				width: calc(33% - 8px);
				margin-top: 6px;

				&+li {
					margin-left: 8px;
				}
			}

			/* 折り返し調整 
			li:nth-child(4):has(~li.is-active),
			li:nth-child(5) {
				margin-left: 0;
			}

			li:nth-child(5):has(~li.is-active) {
				margin-left: 8px;
			} */
			li:nth-child(4) {
				margin-left: 0;
			}
		}

		.festival {
			padding-top: 22px;

			h3 {
				font-size: 24px;
				line-height: 1.33;
				gap: 8px;
			}

			.col {
				margin-top: 18px;
				gap: 23px;
			}

			div p {
				line-height: 1.625;
			}

			.detail {
				padding: 10px 13px 12px;

				h4 {
					font-size: 26px;
					line-height: 1.23;
				}

				span {
					font-size: 16px;
					line-height: 2;
					margin-top: 10px;
				}

				p {
					font-size: 14px;
					line-height: 1.71;
					padding: 8px 0 5px;
					text-align: center;
				}
			}

			.ex-link {
				margin-top: 10px;
			}
		}

		/* 上杉藉田米 sp */
		.uesugisekidenmai {
			padding-top: 104px;

			.col {
				gap: 14px;
			}

			h3 {
				font-size: 24px;

				span {
					font-size: 18px;
				}
			}

			p {
				font-size: 16px;
				line-height: 1.625;
				margin-top: 17px;
			}

			.ex-link {
				margin-top: 17px;
			}
		}
	}

	/* =========================================
		かてもの sp
	========================================= */
	.katemono .story-lead .text-wrap p {
		margin: 33px auto 0;
	}

	.katemono .story-lead .text-wrap .library {
		margin: 30px auto 0;
		padding: 16px 23px 27px;

		h3 {
			align-items: initial;
			flex-flow: column;
			gap: 6px;
			font-size: 20px;
			line-height: 2;
			text-align: center;

			span {
				text-align: right;
				line-height: 1.42;
			}
		}

		a {
			padding: 8px 23px 8px 24px;
		}
	}

	.katemono-more {
		padding-top: 77px;

		h2 {
			gap: 0;
			font-size: 24px;
			line-height: 2.5;
		}

		.more-content {
			margin-top: 45px;

			&:first-of-type {
				margin-top: 18px;
			}

			li {
				flex-flow: column;
				gap: 0;
			}
		}
	}

	/* sp終了 */
}