/**
 *
 * page-home.scss
 *
 */
/* ------------------------------------------------------------
 home-kv
------------------------------------------------------------ */
.home-kv {
	position: relative;
	container-type: inline-size;
}

.home-kv::before {
	content: '';
	display: block;
	width: 100%;
	background: var(--color-gradation6);
	position: absolute;
	left: 0;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.home-kv::before {
		height: 36.5rem ;
		bottom: -6.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-kv::before {
		height: 21.8rem ;
		bottom: -7.1rem ;
	}
}

/* ----------------------------------------
 home-kv__inner
---------------------------------------- */
.home-kv__inner {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: var(--wh);
}

@media screen and (min-width: 1024px) {
	.home-kv__inner {
		min-height: 61.33333vw;
		max-height: 66.66667vw;
	}
}

@media screen and (max-width: 1023px) {
	.home-kv__inner {
		min-height: 179.5vw;
		max-height: 200vw;
	}
}

.home-kv__inner::after {
	content: '';
	display: block;
}

@media screen and (min-width: 1024px) {
	.home-kv__inner::after {
		padding-top: 82.66667%;
	}
}

/* ---------- home-kv__logo ---------- */
.home-kv__logo {
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.home-kv__logo {
		width: 22.2rem ;
		top: 15.13333cqw ;
		left: 3.53333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.home-kv__logo {
		width: 9rem ;
		top: 40.5cqw ;
		left: 4.75cqw ;
	}
}

/* ---------- home-kv__catch ---------- */
.home-kv__catch {
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.home-kv__catch {
		width: 12.6rem ;
		top: 14.6cqw ;
		right: 4.13333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.home-kv__catch {
		width: 2.5rem ;
		top: 42cqw ;
		right: 5.75cqw ;
	}
}

/* ---------- home-kv__scroll ---------- */
.home-kv__scroll {
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.home-kv__scroll {
		left: 3.53333cqw ;
		bottom: 22.93333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.home-kv__scroll {
		left: 4.75cqw ;
		bottom: 1.7rem ;
	}
}

/* ---------- home-kv__nav ---------- */
.home-kv__nav {
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.home-kv__nav {
		left: 3.53333cqw ;
		bottom: 3.93333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.home-kv__nav {
		display: none;
	}
}

.home-kv__nav__list {
	display: flex;
	align-items: flex-start;
	gap: 2.2rem ;
}

.home-kv__nav__list a {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.home-kv__nav__list a::before {
	content: '';
	display: block;
	width: 1.8rem ;
	height: 1.8rem ;
	border-radius: 50%;
	background-color: var(--color-icon3);
	transition: background-color var(--transition-hover);
	margin-bottom: 1.1rem ;
}

@media (hover: hover) {
	.home-kv__nav__list a:hover::before {
		background-color: var(--color-txt);
	}
}

.home-kv__nav__list span {
	display: block;
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	font-weight: 600;
	font-size: var(--font-size18);
	letter-spacing: 0.1em;
}

.home-kv__nav__list i {
	margin-top: 0.6rem ;
}

/* ---------- home-kv__button ---------- */
@media screen and (min-width: 1024px) {
	.home-kv__button {
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.home-kv__button {
		position: absolute;
		top: 24cqw ;
		right: 3.5cqw ;
		width: 4.0rem;
		height: 4.0rem;
		border-radius: 50%;
		overflow: hidden;
		background-color: var(--color-txt);
		transition: var(--transition-sitemap);
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
	}
}

@media (hover: hover) {
	.home-kv__button:hover span:nth-of-type(4), .home-kv__button:hover span:nth-of-type(5), .home-kv__button:hover span:nth-of-type(6) {
		height: 100%;
	}
}

.home-kv__button span {
	display: block;
	background-color: var(--color-bg);
	position: absolute;
}

.home-kv__button span:nth-of-type(1), .home-kv__button span:nth-of-type(2), .home-kv__button span:nth-of-type(3) {
	width: 100%;
	height: 1px;
	left: 0;
}

.home-kv__button span:nth-of-type(1) {
	top: 34.48276%;
}

.home-kv__button span:nth-of-type(2) {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.home-kv__button span:nth-of-type(3) {
	bottom: 34.48276%;
}

.home-kv__button span:nth-of-type(4), .home-kv__button span:nth-of-type(5), .home-kv__button span:nth-of-type(6) {
	width: 1px;
	height: 0;
	top: 0;
	transition: height var(--transition-hover);
}

.home-kv__button span:nth-of-type(4) {
	left: 34.48276%;
	transition-delay: 0ms;
}

.home-kv__button span:nth-of-type(5) {
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	transition-delay: 60ms;
}

.home-kv__button span:nth-of-type(6) {
	right: 34.48276%;
	transition-delay: 120ms;
}

/* ----------------------------------------
 home-kv__slider
---------------------------------------- */
.home-kv__slider {
	position: relative;
	z-index: 0;
	opacity: 0;
	-webkit-filter: brightness(280%) grayscale(100%);
	filter: brightness(280%) grayscale(100%);
}

.home-kv.is-shown .home-kv__slider {
	opacity: 1;
	-webkit-filter: brightness(100%) grayscale(0%);
	filter: brightness(100%) grayscale(0%);
	transition: opacity var(--transition-slider-opacity), -webkit-filter var(--transition-slider-filter);
	transition: opacity var(--transition-slider-opacity), filter var(--transition-slider-filter);
	transition: opacity var(--transition-slider-opacity), filter var(--transition-slider-filter), -webkit-filter var(--transition-slider-filter);
	will-change: opacity, filter;
}

.home-kv__slider li {
	position: relative;
}

.home-kv__slider li:not(:first-of-type) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.home-kv__slider li.is-active {
	opacity: 1;
	transition: opacity var(--transition-slider-opacity), -webkit-filter var(--transition-slider-filter);
	transition: opacity var(--transition-slider-opacity), filter var(--transition-slider-filter);
	transition: opacity var(--transition-slider-opacity), filter var(--transition-slider-filter), -webkit-filter var(--transition-slider-filter);
	will-change: opacity, filter;
	-webkit-filter: brightness(100%) grayscale(0%);
	filter: brightness(100%) grayscale(0%);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.home-kv__slider li.is-next {
	opacity: 0;
	-webkit-filter: brightness(280%) grayscale(100%);
	filter: brightness(280%) grayscale(100%);
}

.home-kv__slider li.is-put {
	-webkit-animation: zoom var(--animatino-slider-zoom);
	animation: zoom var(--animatino-slider-zoom);
}

/* ------------------------------------------------------------
 home-intro
------------------------------------------------------------ */
.home-intro {
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.home-intro {
		margin-top: -6.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-intro {
		margin-top: -1rem ;
	}
}

/* ----------------------------------------
 home-intro__header
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.home-intro__header {
		padding: 0 11.8vw;
	}
}

@media screen and (max-width: 1023px) {
	.home-intro__header {
		padding: 0 10vw;
	}
}

/* ----------------------------------------
 home-intro__main
---------------------------------------- */
.home-intro__main {
	background-color: var(--color-bg);
}

.home-intro__main__inner {
	position: relative;
	z-index: 0;
	min-height: 200vh;
	overflow: clip;
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

@media screen and (min-width: 1024px) {
	.home-intro__main__inner {
		margin-top: 2.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-intro__main__inner {
		margin-top: 1.6rem ;
	}
}

.home-intro__main__inner::before {
	--background-color: var( --color-bg8 );
	width: 100%;
	left: 0;
	-webkit-mask-image: var(--color-gradation4);
	mask-image: var(--color-gradation4);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
	-webkit-transform: translateY(-1px);
	transform: translateY(-1px);
}

@media screen and (min-width: 1024px) {
	.home-intro__main__inner::before {
		height: 89rem ;
		bottom: -42.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-intro__main__inner::before {
		height: 45.4rem ;
		bottom: -12.6rem ;
	}
}

.home-intro__main__inner::after {
	content: '';
	display: block;
	width: 100%;
	background: var(--color-gradation5);
	position: absolute;
	z-index: 10;
	left: 0;
}

@media screen and (min-width: 1024px) {
	.home-intro__main__inner::after {
		height: 60.5rem ;
		top: -16rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-intro__main__inner::after {
		height: 45rem ;
		top: -7.6rem ;
	}
}

/* ---------- home-intro__main__bg ---------- */
.home-intro__main__bg {
	position: absolute;
	top: -100vh;
	left: 0;
	z-index: -1;
	width: 100%;
	height: calc( 100% + 200vh);
}

.home-intro__main__bg figure {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
}

/* ---------- home-intro__main__contents ---------- */
.home-intro__main__contents {
	position: relative;
	z-index: 100;
	color: var(--color-txt2);
}

@media screen and (min-width: 1024px) {
	.home-intro__main__contents {
		padding: clamp(20rem, 35vh, 40rem) 0 clamp(22rem, 44vh, 50rem);
	}
}

@media screen and (max-width: 1023px) {
	.home-intro__main__contents {
		padding: 11.2rem 0 16rem;
	}
}

@media screen and (max-width: 767px) {
	.home-intro__main__contents {
		padding: 9.6rem 0 12.8rem;
	}
}

@media screen and (max-width: 560px) {
	.home-intro__main__contents {
		padding: 8.4rem 0 10.8rem;
	}
}

.home-intro__txts {
	margin: 0 clamp(2.2rem, 5vw, 8rem) 0 auto;
	position: relative;
}

@media screen and (min-width: 1024px) {
	.home-intro__txts {
		width: clamp(34rem, 33vw, 47rem);
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 5.4rem;
		padding: 0;
		background: none;
		border-radius: 0;
		backdrop-filter: none;
	}
}

@media screen and (max-width: 1023px) {
	.home-intro__txts {
		width: clamp(26rem, 47vw, 38rem);
		margin: 0 2.4rem 0 auto;
		display: flex;
		flex-direction: column;
		gap: 3.6rem;
		padding: 0;
		background: none;
		border-radius: 0;
		backdrop-filter: none;
	}
}

@media screen and (max-width: 767px) {
	.home-intro__txts {
		width: clamp(21rem, 52vw, 31rem);
		margin: 0 1.4rem 0 auto;
		gap: 4.4rem;
	}
}

@media screen and (max-width: 560px) {
	.home-intro__txts {
		width: clamp(18rem, 54vw, 27rem);
		max-width: none;
		margin: 0 0.8rem 0 auto;
		gap: 3.8rem;
	}
}

.home-intro__txts p {
	--transition-delay: 0ms;
	max-width: 100%;
}

.home-intro__lead {
	font-size: clamp(3.2rem, 2.05vw, 4.5rem);
	line-height: 1.72;
	letter-spacing: 0.045em;
}

.home-intro__column {
	position: relative;
	font-size: clamp(2.15rem, 1.3vw, 2.85rem);
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	letter-spacing: 0.045em;
	line-height: 1.84;
	border-inline: none;
	border-top: none;
	border-bottom: none;
	padding: 0;
}

.home-intro__column::before {
	content: "50TH";
	position: absolute;
	top: -1.3rem;
	left: 0;
	font-family: var(--font-sans-serif);
	font-size: var(--font-size10);
	font-weight: 600;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.78);
	animation: none;
	display: none;
}

.home-intro__column span {
	display: block;
	/* Japanese is full-width: one character is 1em, not 1ch. `ch` measures the
	   "0" glyph (roughly half-width here), so the old 23ch capped this column at
	   ~13 characters per line — half the comfortable Japanese measure of 25-40,
	   and narrower than the heading above it. em keeps the cap in real
	   characters. */
	max-width: 24em;
	text-wrap: pretty;
	animation: none;
}

@media screen and (max-width: 1023px) {
	.home-intro__lead {
		font-size: clamp(2.6rem, 4.2vw, 3.2rem);
		line-height: 1.74;
		letter-spacing: 0.045em;
	}
}

@media screen and (max-width: 1023px) {
	.home-intro__column {
		font-size: clamp(2rem, 3.4vw, 2.45rem);
		letter-spacing: 0.045em;
		line-height: 1.84;
		padding: 0;
	}
}

@media screen and (max-width: 1023px) {
	.home-intro__column::before {
		top: -1.1rem;
		font-size: var(--font-size9);
		letter-spacing: 0.14em;
	}
}

@media screen and (max-width: 1023px) {
	.home-intro__column span {
		max-width: 26em;
	}
}

.home-intro__txts__bar {
	display: flex;
	align-items: center;
	gap: 0;
}

.home-intro__txts__bar::before {
	content: "";
	display: block;
	flex: 0 0 clamp(4.2rem, 7vw, 9.2rem);
	height: 1px;
	background-color: currentColor;
	opacity: 0.62;
	display: none;
}

@media screen and (max-width: 1023px) {
	.home-intro__txts__bar::before {
		flex-basis: clamp(3.2rem, 7vw, 5.8rem);
	}
}

.home-intro__txts__bar span {
	font-size: clamp(2.1rem, 1.2vw, 2.6rem);
	letter-spacing: 0.045em;
	font-weight: 700;
	line-height: 1.76;
}

@media screen and (max-width: 767px) {
	.home-intro__lead {
		font-size: clamp(2.2rem, 4.8vw, 2.6rem);
		line-height: 1.78;
		letter-spacing: 0.045em;
	}
}

@media screen and (max-width: 767px) {
	.home-intro__column {
		font-size: clamp(1.95rem, 4.4vw, 2.35rem);
		letter-spacing: 0.045em;
		line-height: 1.82;
		padding: 0;
		border-top: none;
		border-bottom: none;
	}
}

@media screen and (max-width: 767px) {
	.home-intro__column span {
		max-width: none;
	}
}

@media screen and (max-width: 767px) {
	.home-intro__column::before {
		display: none;
	}
}

@media screen and (max-width: 560px) {
	.home-intro__column {
		font-size: clamp(1.82rem, 4.9vw, 2.2rem);
		letter-spacing: 0.04em;
		line-height: 1.82;
	}
}

@media screen and (max-width: 560px) {
	.home-intro__column::before {
		font-size: var(--font-size8);
		letter-spacing: 0.1em;
		top: -0.9rem;
	}
}

@media screen and (max-width: 560px) {
	.home-intro__lead {
		font-size: clamp(2rem, 5.5vw, 2.36rem);
		letter-spacing: 0.04em;
		line-height: 1.8;
	}
}

@media screen and (max-width: 560px) {
	.home-intro__column span {
		max-width: 22em;
	}
}

@media screen and (max-width: 560px) {
	.home-intro__txts__bar {
		gap: 0.8rem;
	}
}

@media screen and (max-width: 560px) {
	.home-intro__txts__bar::before {
		flex-basis: 1.8rem;
	}
}

@media screen and (max-width: 560px) {
	.home-intro__txts__bar span {
		font-size: clamp(1.82rem, 4.8vw, 2.12rem);
		letter-spacing: 0.04em;
		line-height: 1.8;
	}
}

@media screen and (max-width: 767px) {
	.home-intro__txts__bar::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-intro__column::before,
	.home-intro__column span {
		animation: none !important;
	}
}

/* ------------------------------------------------------------
 home-about
------------------------------------------------------------ */
.home-about {
	position: relative;
	z-index: 11;
	isolation: isolate;
}

@media screen and (min-width: 1024px) {
	.home-about {
		padding: 30.6rem 0 22rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-about {
		padding: 2.2rem 0 13.2rem ;
	}
}

/* ----------------------------------------
 home-about__inner
---------------------------------------- */
.home-about__inner {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.home-about__inner {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		justify-content: space-between;
	}
}

/* ---------- home-about__catch ---------- */
/* The vertical school-song catch must never paint above the fixed
   .l-header UI: keep .home-about an isolated stacking context whose
   z-index (11) stays below the header layers (100+), and keep the
   catch on a low layer inside it so it cannot escape upward. */
.home-about__catch {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.home-about__catch {
		width: 28.6rem ;
		margin-right: 1.68067%;
	}
}

@media screen and (max-width: 1023px) {
	.home-about__catch {
		width: 15.1rem ;
		margin-left: auto;
		margin-right: 0;
	}
}

/* ---------- home-about__contents ---------- */
/* ---------- home-about__emblem ---------- */
/* 縦組みの校歌と ABOUT の間に空いていた面へ校章を置く。
   flex の並びに割り込ませると縦組みの位置が動くので、inner に対して絶対配置で
   浮かせる。z-index は catch(1) より上、contents(10) より下。文字には被せない。 */
.home-about__emblem {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.home-about__emblem img {
	display: block;
	width: 100%;
	height: auto;
	/* 校章の緑をそのまま置くと草の絵より前に出て浮くので、少しだけ沈ませる。 */
	opacity: 0.9;
}

@media screen and (min-width: 1024px) {
	.home-about__emblem {
		/* 縦組みの左端（約74%）と本文の右端（約41%）のあいだ。大きくしたぶん
		   左へ寄せて、縦組みに触れないところで止める。 */
		left: 45%;
		top: 0.4rem;
		width: 30rem;
	}
}

@media screen and (max-width: 1023px) {
	/* 縦積みになるので、縦組みの左横に空く面へ置く。 */
	.home-about__emblem {
		left: 0;
		top: 1rem;
		width: 15.2rem;
	}
}

.home-about__contents {
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.home-about__contents {
		width: 41.42857%;
		margin-top: 9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-about__contents {
		margin-top: 7.4rem ;
	}
}

@media screen and (min-width: 1024px) {
	.home-about__txt {
		margin-top: 10rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-about__txt {
		margin-top: 3.5rem ;
	}
}

/* ----------------------------------------
 home-about__light-1
---------------------------------------- */
[class*="home-about__light-"] {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

@media screen and (min-width: 1024px) {
	.home-about__light-1 {
		width: 109.6rem ;
		top: -78.3rem ;
		right: -38.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-about__light-1 {
		width: 47.7rem ;
		top: -36.6rem ;
		right: -16.2rem ;
	}
}

@media screen and (min-width: 1024px) {
	.home-about__light-2 {
		width: 25.8rem ;
		top: -48.8rem ;
		left: 16.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-about__light-2 {
		width: 18.1rem ;
		top: 8.8rem ;
		left: -13.4rem ;
	}
}

@media screen and (min-width: 1024px) {
	.home-about__light-3 {
		width: 45.5rem ;
		top: 15rem ;
		left: -27.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-about__light-3 {
		width: 33.8rem ;
		right: -19.6rem ;
		bottom: -8.2rem ;
	}
}

@media screen and (min-width: 1024px) {
	.home-about__light-4 {
		width: 52.8rem ;
		top: 46.9rem ;
		right: -25.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-about__light-4 {
		width: 18.2rem ;
		left: 5.6rem ;
		bottom: -31.8rem ;
	}
}

/* ------------------------------------------------------------
 home-other
------------------------------------------------------------ */
.home-other {
	position: relative;
	z-index: 100;
}

@media screen and (min-width: 1024px) {
	.home-other {
		padding-bottom: 9.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-other {
		padding-bottom: 7.9rem ;
	}
}

.home-other__bg {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 200px;
}

/* ---------- home-other__catch ---------- */
.home-other__catch {
	font-weight: 700;
	letter-spacing: 0.08em;
}

@media screen and (min-width: 1024px) {
	.home-other__catch {
		font-size: var(--font-size29);
		--line-height: 2.13793;
	}
}

@media screen and (max-width: 1023px) {
	.home-other__catch {
		width: var(--contents-md);
		margin-inline: auto;
		font-size: var(--font-size20);
		--line-height: 2;
	}
}

/* ---------- home-other__column ---------- */
@media screen and (min-width: 1024px) {
	.home-other__column {
		margin-top: 9.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-other__column {
		margin-top: 5.8rem ;
	}
}

/* ---------- home-other：扉（とびら）構成のコンテンツカード ----------

 参照元は「白いカード＋ホバーで地色が深緑に反転」する作りだった。
 文字色が墨のまま据え置かれるため、ホバー時に見出しが 1.90、タグに至っては
 地色と同値で 1.00（＝不可視）まで落ちていた。

 記念誌の見開き扉に寄せて組み直す。01 は深緑の地に生成りの縦組み、
 02 は生成りの地に深緑の縦組みで対にする。地色と文字色をカードごとに
 固定し、ホバーでは色を一切動かさない（動くのは写真と矢印だけ）ので、
 色が入れ替わって読めなくなる事故が構造的に起きない。

 配色はカード側で --card-ink / --card-gold / --card-rule に畳んで、
 中の要素はそれを参照するだけにしている。地色を足すときはこの3つを
 決めれば、コントラストの担保が1箇所で済む。
------------------------------------------------------------ */
.home-other__column {
	position: relative;
	display: block !important;
}

.p-contents {
	position: relative;
	z-index: 1;
	opacity: 0;
	-webkit-transform: translateY(4rem);
	transform: translateY(4rem);
	-webkit-transition: opacity 0.7s var(--ease-level2), -webkit-transform 0.8s var(--ease-level2);
	transition: opacity 0.7s var(--ease-level2), transform 0.8s var(--ease-level2);
}

.p-contents:nth-of-type(2) {
	-webkit-transition-delay: 0.12s;
	transition-delay: 0.12s;
}

.p-contents.is-shown {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.home-other .p-contents__link {
	position: relative;
	display: grid;
	align-items: center;
	overflow: hidden;
	color: var(--card-ink);
	background-color: var(--card-bg);
	-webkit-transition: -webkit-transform var(--transition-hover);
	transition: transform var(--transition-hover);
}

/* 01：深緑の地。金は明るめを使う（#C8B06A だと小さな英字ラベルで
   コントラスト 3.6 までしか出ず、AA の 4.5 に届かない）。 */
.home-other .p-contents--about .p-contents__link {
	--card-bg: var(--okn-green);
	--card-ink: var(--okn-cream);
	--card-gold: #dcc98f;
	--card-rule: rgba(246, 244, 236, 0.32);
}

/* 02：生成りの地。こちらは逆に金を沈める（#A98A45 では 2.93 しか出ない）。 */
.home-other .p-contents--activities .p-contents__link {
	--card-bg: var(--okn-cream);
	--card-ink: var(--okn-green);
	--card-gold: #7e6329;
	--card-rule: rgba(30, 91, 65, 0.24);
	box-shadow: inset 0 0 0 1px var(--color-line4);
}

.home-other .p-contents__title {
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	margin: 0;
	color: var(--card-ink);
	font-family: var(--font-mincho);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.22em;
	white-space: nowrap;
}

.home-other .p-contents__body {
	display: grid;
	justify-items: start;
	border-left: 1px solid var(--card-rule);
	min-width: 0;
}

.home-other .p-contents__num {
	width: auto;
	margin: 0;
	color: var(--card-gold);
	font-family: var(--font-serif);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.04em;
	border-bottom: 0;
}

.home-other .p-contents__label {
	margin: 0;
	color: var(--card-gold);
	font-family: var(--okn-en-serif);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	line-height: 1;
}

.home-other .p-contents__lead {
	margin: 0;
	color: var(--card-ink);
	font-family: var(--font-mincho);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 2;
	max-width: 22em;
}

.home-other .p-contents__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* タグは地色ではなく必ず --card-ink を使う。旧実装はここが深緑固定で、
   深緑の地に乗った瞬間に消えていた。 */
.home-other .p-contents__tags li {
	color: var(--card-ink);
	font-weight: 400;
	letter-spacing: 0.08em;
	border: 1px solid var(--card-rule);
	background-color: transparent;
	border-radius: 0;
}

/* 元の実装は矢印をカード右下へ position:absolute で貼っていた。扉構成では
   本文が縦に積まれるため、狭幅でタグの2行目と重なってしまう。流し込みに戻す。 */
.home-other .p-contents__arrow {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--card-ink);
	background-color: transparent;
	border: 1px solid var(--card-rule);
	-webkit-transition: -webkit-transform var(--transition-hover);
	transition: transform var(--transition-hover);
}

.home-other .p-contents__figure {
	overflow: hidden;
	width: 100%;
	margin: 0;
}

.home-other .p-contents__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	-webkit-transition: -webkit-transform var(--transition-scale);
	transition: transform var(--transition-scale);
}

/* ホバーで動かすのは写真と矢印だけ。地色・文字色は動かさない。 */
@media (hover: hover) {
	.home-other .p-contents__link:hover .p-contents__figure img {
		-webkit-transform: scale(1.04);
		transform: scale(1.04);
	}

	.home-other .p-contents__link:hover .p-contents__arrow {
		-webkit-transform: translateX(0.6rem);
		transform: translateX(0.6rem);
	}
}

.home-other .p-contents__link:focus-visible {
	outline: 2px solid var(--okn-gold);
	outline-offset: 3px;
}

@media screen and (min-width: 1024px) {
	.home-other__column {
		margin-top: 8.2rem;
	}

	.p-contents + .p-contents {
		margin-top: 4.8rem;
	}

	.home-other .p-contents__link {
		grid-template-columns: max-content minmax(0, 1fr) minmax(0, 0.82fr);
		gap: 5.6rem;
		min-height: 40rem;
		padding: 4.8rem 5.2rem;
	}

	/* 02 は写真を左に寄せ、見開きの左右を入れ替える。 */
	.home-other .p-contents--activities .p-contents__link {
		grid-template-columns: minmax(0, 0.82fr) max-content minmax(0, 1fr);
	}

	.home-other .p-contents--activities .p-contents__figure {
		grid-column: 1;
		grid-row: 1;
	}

	.home-other .p-contents__title {
		font-size: 4.4rem;
		height: 100%;
		max-height: 30rem;
	}

	.home-other .p-contents__body {
		gap: 1.8rem;
		padding-left: 4.4rem;
	}

	.home-other .p-contents__num {
		font-size: 5.6rem;
	}

	.home-other .p-contents__label {
		font-size: var(--font-size13);
	}

	.home-other .p-contents__lead {
		font-size: var(--font-size14);
	}

	.home-other .p-contents__tags li {
		font-size: var(--font-size12);
		padding: 0.6rem 1.2rem;
	}

	.home-other .p-contents__arrow {
		width: 4.8rem;
		height: 4.8rem;
		margin-top: 0.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.home-other__column {
		margin-top: 4.8rem;
	}

	.p-contents + .p-contents {
		margin-top: 3.2rem;
	}

	/* 狭幅では縦組みの見出しが縦を食いすぎるので、見出しだけ横組みに戻し、
	   写真・見出し・本文の縦積みにする。扉の対比（深緑／生成り）は保つ。 */
	.home-other .p-contents__link {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.4rem;
		padding: 3.2rem 2.4rem;
	}

	.home-other .p-contents__title {
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		font-size: 2.8rem;
		letter-spacing: 0.14em;
	}

	.home-other .p-contents__body {
		gap: 1.4rem;
		border-left: 0;
		border-top: 1px solid var(--card-rule);
		padding-top: 2.4rem;
	}

	.home-other .p-contents__num {
		font-size: 3.6rem;
	}

	.home-other .p-contents__label {
		font-size: var(--font-size11);
	}

	.home-other .p-contents__lead {
		font-size: var(--font-size13);
		max-width: none;
	}

	.home-other .p-contents__tags li {
		font-size: var(--font-size11);
		padding: 0.5rem 1rem;
	}

	/* common.min.css が狭幅で position:absolute !important と width:23% を
	   当てているので、ここで打ち消さないと本文の上に貼り付いたままになる。 */
	.home-other .p-contents__arrow {
		position: static !important;
		right: auto;
		bottom: auto;
		width: 4.2rem;
		height: 4.2rem;
		margin-top: 0.6rem;
	}

	/* 写真は見出しの前（＝カードの先頭）に置く。 */
	.home-other .p-contents__figure {
		grid-row: 1;
	}

	.home-other .p-contents__title {
		grid-row: 2;
	}

	.home-other .p-contents__body {
		grid-row: 3;
	}
}

/* ------------------------------------------------------------
 home-container
------------------------------------------------------------ */
.home-container {
	position: relative;
}

/* ----------------------------------------
 home-container__curve
---------------------------------------- */
.home-container__curve-1,
.home-container__curve-2 {
	position: absolute;
	top: -1px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100%;
	will-change: filter;
}

@media screen and (min-width: 1024px) {
	.home-container__curve-1,
	.home-container__curve-2 {
		width: 100%;
		height: 29.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-container__curve-1,
	.home-container__curve-2 {
		width: 138%;
		height: 10.7109rem ;
	}
}

.home-container__curve-1 div,
.home-container__curve-2 div {
	width: 100%;
	height: 100%;
	will-change: clip-path;
}

.home-container__curve-1 {
	z-index: 100;
	-webkit-filter: var(--shadow6);
	filter: var(--shadow6);
}

.home-container__curve-1 div {
	clip-path: url(#home-container__curve-1);
}

.home-container__curve-2 {
	z-index: 1;
	-webkit-filter: var(--shadow7);
	filter: var(--shadow7);
}

.home-container__curve-2 div {
	clip-path: url(#home-container__curve-2);
}

/* ----------------------------------------
 home-container__inner
---------------------------------------- */
.home-container__inner {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.home-container__inner {
		padding: 45.4rem 0 14.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-container__inner {
		padding: 22.2rem 0 9.2rem ;
	}
}

.home-container__inner::before {
	--background-color: var( --color-main2 );
	--background: var( --color-gradation2 );
	width: 100%;
	top: 0;
	left: 0;
	-webkit-transform: scale(1, -1);
	transform: scale(1, -1);
}

@media screen and (min-width: 1024px) {
	.home-container__inner::before {
		height: 41.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-container__inner::before {
		height: 34rem ;
	}
}

.home-container__inner::after {
	--background-color: var( --color-main2 );
	--background: var( --color-gradation2 );
	width: 100%;
	left: 0;
	bottom: 0;
}

@media screen and (min-width: 1024px) {
	.home-container__inner::after {
		height: 41.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-container__inner::after {
		height: 34rem ;
	}
}

/* ------------------------------------------------------------
 home-people
------------------------------------------------------------ */
.home-people {
	position: relative;
	overflow: clip;
	border-radius: 3.6rem;
	background: linear-gradient(135deg, #52d86c 0%, #b6ec59 45%, #ffe35a 100%);
	box-shadow: 0 2rem 4rem rgba(37, 109, 66, 0.16);
}

@media screen and (min-width: 1024px) {
	.home-people {
		padding: 8rem 6rem 6.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.home-people {
		padding: 5.2rem 2.2rem 4.8rem;
		border-radius: 2.8rem;
	}
}

/* ----------------------------------------
 home-people__inner
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.home-people__inner {
		display: flex;
		align-items: flex-start;
		gap: 8rem ;
	}
}

@media screen and (min-width: 1024px) {
	.home-people__inner > * {
		flex-basis: 100%;
	}
}

/* ---------- home-people__poster ---------- */
@media screen and (max-width: 1023px) {
	.home-people__poster {
		position: relative;
		width: min(100%, 35.7rem);
		margin-inline: auto;
	}
}

@media screen and (min-width: 1024px) {
	.home-people__poster {
		position: relative;
		width: min(100%, 50rem);
	}
}

.home-people__poster__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.home-people__poster__main {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.home-people__poster__main {
		padding: 1.2rem 0 2rem;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__poster__main {
		padding: 0.8rem 0 1.2rem;
	}
}

.home-people__headline {
	display: grid;
	gap: 1.6rem;
}

@media screen and (min-width: 1024px) {
	.home-people__headline {
		margin-top: 2.2rem;
	}
}

.home-people__headline-card {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2rem;
	border: 0.3rem solid rgba(255, 255, 255, 0.88);
	box-shadow: 0 1.2rem 0 rgba(61, 81, 122, 0.16);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 900;
	letter-spacing: 0.03em;
	line-height: 1.08;
}

@media screen and (min-width: 1024px) {
	.home-people__headline-card {
		min-height: 8.4rem;
		font-size: clamp(3rem, 2.3vw, 4.4rem);
		padding: 0 3.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__headline-card {
		min-height: 6.8rem;
		font-size: clamp(2.6rem, 8vw, 4rem);
		padding: 0 2rem;
	}
}

.home-people__headline-card--cream {
	background: #fff5ef;
	color: #23271f;
	rotate: -4deg;
	width: fit-content;
}

.home-people__headline-card--sky {
	background: #1e5b41;
	color: #ffffff;
	rotate: 2deg;
	width: fit-content;
}

.home-people__headline-card--coral {
	background: #a98a45;
	color: #23271f;
	rotate: -2deg;
	width: fit-content;
}

@media screen and (min-width: 1024px) {
	.home-people__headline-card--cream {
		width: 34rem;
	}

	.home-people__headline-card--sky {
		width: 30rem;
		margin-left: 2.8rem;
	}

	.home-people__headline-card--coral {
		width: 35.6rem;
		margin-left: 1.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__headline-card--cream {
		width: min(100%, 28.8rem);
	}

	.home-people__headline-card--sky {
		width: min(100%, 26.4rem);
		margin-left: 1.6rem;
	}

	.home-people__headline-card--coral {
		width: min(100%, 30rem);
		margin-left: 0.9rem;
	}
}

.home-people__sticker {
	position: absolute;
	right: 0;
	display: grid;
	place-items: center;
	border-radius: 2.2rem;
	background: #143f2d;
	color: #ffffff;
	border: 0.3rem solid rgba(255, 255, 255, 0.92);
	box-shadow: 0 1rem 0 rgba(83, 64, 124, 0.22);
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.home-people__sticker {
		top: 9.4rem;
		width: 12.4rem;
		min-height: 12.4rem;
		padding: 1.6rem 1rem 1.3rem;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__sticker {
		top: 9rem;
		right: 0.2rem;
		width: 9rem;
		min-height: 9rem;
		padding: 1.2rem 0.8rem 1rem;
	}
}

.home-people__sticker strong {
	display: block;
	font-family: "Albert Sans", sans-serif;
	font-weight: 800;
	letter-spacing: 0.04em;
}

@media screen and (min-width: 1024px) {
	.home-people__sticker strong {
		font-size: 2.1rem;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__sticker strong {
		font-size: 1.7rem;
	}
}

.home-people__sticker small {
	display: block;
	margin-top: 0.5rem;
	font-size: 1rem;
	letter-spacing: 0.08em;
}

.home-people__bubble,
.home-people__spark {
	position: absolute;
	display: block;
}

.home-people__bubble {
	border-radius: 999px;
	opacity: 0.38;
	filter: blur(0.2rem);
}

.home-people__bubble--sky {
	width: 16rem;
	height: 11rem;
	left: -5rem;
	top: 17rem;
	background: #9dbfae;
}

.home-people__bubble--lime {
	width: 13rem;
	height: 13rem;
	right: 2rem;
	top: -1.4rem;
	background: #c8b06a;
}

.home-people__bubble--lemon {
	width: 18rem;
	height: 11rem;
	right: -2rem;
	bottom: 0;
	background: rgba(255, 244, 164, 0.72);
}

.home-people__spark {
	background: rgba(255, 255, 255, 0.52);
	clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
}

.home-people__spark--lg {
	width: 4rem;
	height: 4rem;
	right: 1.8rem;
	top: 1.2rem;
}

.home-people__spark--sm {
	width: 2.8rem;
	height: 2.8rem;
	left: 0.6rem;
	bottom: 2.8rem;
}

/* ---------- home-people__contents ---------- */
@media screen and (min-width: 1024px) {
	.home-people__contents {
		margin-top: 3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__contents {
		margin-top: 3.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__header {
		display: flex;
		justify-content: center;
	}
}

/* ----- home-people__catch ----- */
.home-people__catch {
	color: #23271f;
	font-family: var(--okn-serif);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

@media screen and (min-width: 1024px) {
	.home-people__catch {
		margin-top: 4rem ;
		font-size: clamp(2.4rem, 1.8vw, 3.2rem);
	}
}

@media screen and (max-width: 1023px) {
	.home-people__catch {
		margin-top: 2.4rem ;
		text-align: center;
		font-size: 2.1rem;
	}
}

/* ----- home-people__txt ----- */
.home-people__txt {
	color: rgba(31, 44, 89, 0.92);
	text-wrap: pretty;
}

@media screen and (min-width: 1024px) {
	.home-people__txt {
		max-width: 51rem;
		margin-top: 2.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__txt {
		text-align: center;
		margin-top: 1.8rem ;
	}
}

/* ----------------------------------------
 home-people__carousel
---------------------------------------- */
.home-people__carousel {
	position: relative;
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.home-people__carousel {
		margin-top: 16.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__carousel {
		margin-top: 7rem ;
	}
}

@media screen and (max-width: 430px) {
	.home-people__carousel {
		width: 100%;
		left: 0;
		-webkit-transform: none;
		transform: none;
	}
}

.home-people__carousel:not(.swiper-initialized) {
	opacity: 0;
	visibility: hidden;
}

@media screen and (min-width: 1024px) {
	.home-people__carousel article {
		width: 58.4rem ;
	}
}

@media screen and (max-width: 1023px) and (min-width: 431px) {
	.home-people__carousel article {
		width: 50rem ;
	}
}

@media screen and (max-width: 430px) {
	.home-people__carousel article {
		width: 100%;
	}
}

.home-people__carousel article > * {
	opacity: .7 !important;
	transition: opacity var(--transition-card);
}

.home-people__carousel article.swiper-slide-active > * {
	opacity: 1 !important;
}

/* ---------- home-people__dots ---------- */
.home-people__dots {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.home-people__dots {
		bottom: 4.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__dots {
		bottom: 4.5rem ;
	}
}

@media screen and (max-width: 430px) {
	.home-people__dots {
		bottom: 3.2rem ;
	}
}

/* ---------- home-people__arrow ---------- */
.home-people__arrow button {
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.home-people__arrow button {
		top: 35.3rem ;
		--side: 30rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__arrow button {
		top: 38rem ;
		--side: 18.6rem ;
	}
}

@media screen and (max-width: 430px) {
	.home-people__arrow button {
		top: 31.4rem ;
		--side: 13.2rem ;
		-webkit-transform: scale(0.78);
		transform: scale(0.78);
	}
}

.home-people__arrow button:nth-of-type(1) {
	left: calc( 50% - var(--side));
}

.home-people__arrow button:nth-of-type(2) {
	right: calc( 50% - var(--side));
}

/* ----------------------------------------
 home-people__button
---------------------------------------- */
.home-people__button {
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.home-people__button {
		margin-top: 5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__button {
		margin-top: 3.4rem ;
	}
}

/* ------------------------------------------------------------
 home people / community ribbon
------------------------------------------------------------ */
.home-people {
	background: #f8faf4;
	border: 0.1rem solid rgba(46, 155, 67, 0.14);
}

@media screen and (min-width: 1024px) {
	.home-people {
		padding: 7.2rem 4rem 6.4rem;
	}

	.home-people__inner {
		display: grid;
		grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
		align-items: center;
		gap: 4.8rem;
	}

	.home-people__poster {
		width: 100%;
	}

	.home-people__contents {
		margin-top: 0;
	}

	.home-people__headline {
		gap: 0.8rem;
		margin-top: 0;
	}

	.home-people__headline-card {
		min-height: 5.6rem;
		padding: 0 1.8rem;
		border-width: 0.2rem;
		border-radius: 1.4rem;
		font-size: 2.7rem;
		box-shadow: 0 0.7rem 0 rgba(61, 81, 122, 0.14);
	}

	.home-people__headline-card--cream,
	.home-people__headline-card--sky,
	.home-people__headline-card--coral {
		width: 22rem;
		margin-left: 0;
	}

	.home-people__headline-card--sky {
		margin-left: 1.2rem;
	}

	.home-people__headline-card--coral {
		margin-left: 0.6rem;
	}

	.home-people__sticker {
		top: 5rem;
		right: -0.4rem;
		width: 8rem;
		min-height: 8rem;
		padding: 1rem 0.6rem;
		border-radius: 1.6rem;
	}

	.home-people__sticker strong {
		font-size: 1.45rem;
	}

	.home-people__catch {
		margin-top: 2.8rem;
		font-size: clamp(3.2rem, 3.8vw, 5.8rem);
		line-height: 1.18;
	}

	.home-people__txt {
		max-width: 72rem;
		margin-top: 1.8rem;
	}
}

.home-people__carousel {
	overflow: hidden;
}

@media screen and (min-width: 1024px) {
	.home-people__carousel {
		margin-top: 6.4rem;
		padding: 0 5.6rem 7.8rem;
	}

	.home-people__carousel article {
		width: auto;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__carousel {
		margin-top: 4rem;
		padding-bottom: 7rem;
	}
}

.home-people__preview-label {
	position: absolute;
	top: 1.4rem;
	right: 1.4rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0 1.1rem;
	border-radius: 999px;
	background: #ffffff;
	color: #1f6b2e;
	border: 0.1rem solid rgba(46, 155, 67, 0.35);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.home-people__dots {
	bottom: 2.8rem;
}

.home-people__arrow button {
	top: 50%;
	margin-top: -4.8rem;
}

@media screen and (min-width: 1024px) {
	.home-people__arrow button {
		--side: 3.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.home-people__arrow button {
		--side: 2.2rem;
	}
}

.home-people__preview-note {
	max-width: 92rem;
	margin: 1.2rem auto 0;
	color: rgba(31, 44, 89, 0.72);
	font-size: 1.25rem;
	line-height: 1.7;
	text-align: center;
}

/* ----------------------------------------
 home-story-card
 トップの Alumni カルーセルを STORIES の特集カードと同じ意匠にする。
 1スライド＝1人ぶんの見開き（写真＋本文）で、6人ぶんを自動送りする。
 色は page-stories.css と同じ規則：面は深緑と生成り、朱は番号と引用だけ。
---------------------------------------- */
.home-story-card {
	--story-paper: #fffdf7;
	--story-ink: #23271f;
	--story-hairline: rgba(35, 39, 31, 0.22);
	display: grid;
	grid-template-columns: minmax(22rem, 0.4fr) minmax(0, 0.6fr);
	overflow: hidden;
	background: var(--story-paper);
	color: var(--story-ink);
	border: 1px solid var(--story-hairline);
	box-shadow: 0.9rem 1rem 0 rgba(35, 39, 31, 0.14);
}

/* 1枚ずつ送るため、左右に覗く前後のカードは既定の減光（.7）のままにして
   「まだ続きがある」ことだけを伝え、読ませる対象を1枚に絞る。 */

.home-story-card__photo {
	position: relative;
	min-height: 44rem;
	overflow: hidden;
	background: #e7e1d5;
}

/* 縦位置は上寄せ。横長の枠に中央合わせで入れると顔が切れる。 */
.home-story-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

/* 番号は朱。STORIES 一覧・詳細と同じ規則。 */
.home-story-card__no {
	position: absolute;
	top: 1.8rem;
	left: 1.8rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 5.6rem;
	height: 5.6rem;
	border-radius: 50%;
	background: var(--okn-vermilion);
	color: #fff;
	font-family: var(--font-sans-serif);
	font-size: 2rem;
	font-weight: 800;
}

/* 掲載イメージのバッジだけは記念誌の色に上書きする（丸ピンクの名残を消す）。 */
.home-story-card .home-people__preview-label {
	top: 1.8rem;
	right: 1.8rem;
	border-radius: 0;
	background: var(--okn-cream);
	border: 1px solid var(--okn-gold-soft);
	color: var(--okn-ink);
	font-size: 1.1rem;
	letter-spacing: 0.06em;
}

.home-story-card__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 3.6rem 3.4rem 3.2rem;
}

.home-story-card__label {
	margin: 0 0 1.2rem;
	font-family: var(--font-sans-serif);
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: 0.24em;
	color: var(--okn-green);
}

.home-story-card__name {
	margin: 0;
	font-family: var(--okn-serif);
	font-size: clamp(3rem, 3.4vw, 4.8rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

.home-story-card__role {
	margin: 0.8rem 0 0;
	font-size: 1.6rem;
	font-weight: 700;
}

.home-story-card__meta {
	width: 100%;
	margin: 1.6rem 0 0;
	padding: 1.2rem 0;
	border-top: 1px solid var(--story-hairline);
	border-bottom: 1px solid var(--story-hairline);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.home-story-card__quote {
	margin: 2rem 0 0;
	padding: 0;
	font-family: var(--okn-serif);
	font-size: clamp(1.8rem, 1.9vw, 2.4rem);
	font-weight: 600;
	line-height: 1.75;
	color: var(--okn-vermilion);
}

.home-story-card__body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 1.2rem 0 0;
	font-size: 1.4rem;
	line-height: 1.95;
}

.home-story-card__read {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 21rem;
	min-height: 5.4rem;
	margin-top: auto;
	padding: 1.3rem 2.8rem;
	border: 2px solid var(--okn-green);
	background: var(--okn-green);
	color: #fff;
	font-family: var(--font-sans-serif);
	font-size: 1.4rem;
	font-weight: 800;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.home-story-card__read:hover {
	background: transparent;
	color: var(--okn-green);
	transform: translateY(-2px);
}

.home-story-card__read:focus-visible {
	outline: 3px solid var(--okn-vermilion);
	outline-offset: 4px;
}

@media screen and (min-width: 1024px) {
	.home-story-card__copy {
		padding: 4.2rem 4rem 3.6rem;
	}
}

/* 前後ボタンはカードの左右端へ。3枚並べていた頃の中央基準（left: calc(50% - --side)）
   のままだと、1枚見せではカードの真ん中に2つ並んで文字に重なる。 */
.home-people__arrow button:nth-of-type(1) {
	left: 1.2rem;
	right: auto;
}

.home-people__arrow button:nth-of-type(2) {
	right: 1.2rem;
	left: auto;
}

/* スマホでは1枚で画面を占有しないよう、写真を横長の帯に切り替えて全体を詰める。
   縦積みのまま各要素をデスクトップ寸法で並べると、カード1枚が画面丈を超えて
   「次がある」ことも下の導線も見えなくなる。 */
@media screen and (max-width: 767px) {
	.home-story-card {
		grid-template-columns: 1fr;
		box-shadow: 0.5rem 0.6rem 0 rgba(35, 39, 31, 0.14);
	}

	/* 4:3 のままだと 700px 級の画面で写真だけで 500px を超えるので上限を切る。 */
	.home-story-card__photo {
		min-height: 0;
		aspect-ratio: 4 / 3;
		max-height: 30rem;
	}

	.home-story-card__no {
		top: 1.4rem;
		left: 1.4rem;
		width: 4.4rem;
		height: 4.4rem;
		font-size: 1.7rem;
	}

	.home-story-card .home-people__preview-label {
		top: 1.4rem;
		right: 1.4rem;
		min-height: 2.6rem;
		font-size: 1rem;
	}

	.home-story-card__copy {
		padding: 2.2rem 2rem 2.4rem;
	}

	.home-story-card__label {
		margin-bottom: 0.9rem;
		font-size: 1.1rem;
	}

	.home-story-card__name {
		font-size: 2.6rem;
	}

	.home-story-card__role {
		margin-top: 0.6rem;
		font-size: 1.4rem;
	}

	.home-story-card__meta {
		margin-top: 1.2rem;
		padding: 0.9rem 0;
		font-size: 1.2rem;
	}

	.home-story-card__quote {
		margin-top: 1.4rem;
		font-size: 1.7rem;
		line-height: 1.55;
	}

	.home-story-card__body {
		-webkit-line-clamp: 3;
		margin-top: 1rem;
		font-size: 1.3rem;
		line-height: 1.8;
	}

	.home-story-card__read {
		width: 100%;
		min-height: 4.6rem;
		margin-top: 2rem;
		padding: 1rem 2rem;
		font-size: 1.3rem;
	}

	/* 前後ボタンは写真の帯の上へ。本文に重ねると読む邪魔になる。
	   16px の矢印のままではタップ範囲が足りないので、当たり判定を広げる。 */
	.home-people__arrow button {
		top: 12rem;
		margin-top: 0;
		display: grid;
		place-items: center;
		/* テーマ側で scale(0.78) が掛かるので、実寸 44px 相当まで大きめに取る */
		width: 5.8rem;
		height: 5.8rem;
		border-radius: 50%;
		background: rgba(246, 244, 236, 0.92);
	}

	/* c-arrow3 は hover で矢印が現れる作り。タッチ端末では hover が来ないので
	   灰色の点だけが残ってしまう。小さい画面では矢印を出したままにする。 */
	.home-people__arrow .c-arrow3::before {
		display: none;
	}

	.home-people__arrow .c-arrow3 svg {
		width: 1.6rem;
		opacity: 1;
	}

	.home-people__arrow .c-arrow3 path {
		stroke: var(--okn-ink);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-story-card__read {
		transition: none;
	}
}

.home-stories-invite {
	display: grid;
	max-width: 128rem;
	margin: 4rem auto 0;
	overflow: hidden;
	border-radius: 2.8rem;
	background: #1e5b41;
	color: #ffffff;
	box-shadow: 0 1.8rem 3.8rem rgba(31, 95, 63, 0.16);
}

@media screen and (min-width: 1024px) {
	.home-stories-invite {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr);
	}
}

.home-stories-invite__lead {
	padding: 4rem;
	background: #143f2d;
}

.home-stories-invite__eyebrow,
.home-stories-dialog__eyebrow {
	font-family: "Albert Sans", sans-serif;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: 0.14em;
}

.home-stories-invite__lead h3 {
	margin-top: 1.2rem;
	font-family: var(--okn-serif);
	font-size: clamp(2.8rem, 3vw, 4.8rem);
	font-weight: 600;
	line-height: 1.45;
}

.home-stories-invite__lead > p:not(.home-stories-invite__eyebrow) {
	max-width: 44rem;
	margin-top: 1.6rem;
	font-size: 1.4rem;
	line-height: 1.8;
}

.home-stories-invite__button,
.home-stories-form__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 5.6rem;
	padding: 0 2.8rem;
	border-radius: 999px;
	background: #a98a45;
	color: #23271f;
	font-size: 1.6rem;
	font-weight: 900;
	letter-spacing: 0.03em;
}

.home-stories-invite__button {
	margin-top: 2.4rem;
	box-shadow: 0 0.8rem 0 rgba(164, 66, 30, 0.16);
}

.home-stories-invite__features {
	display: grid;
	gap: 1.4rem;
	align-content: center;
	padding: 4rem;
}

.home-stories-invite__features li {
	display: grid;
	grid-template-columns: minmax(9rem, 12rem) 1fr;
	align-items: center;
	gap: 1.6rem;
	min-height: 6.4rem;
	padding: 1.3rem 2rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #1e5b41;
}

.home-stories-invite__features strong {
	font-size: 1.5rem;
	font-weight: 900;
}

.home-stories-invite__features span {
	font-size: 1.3rem;
	line-height: 1.5;
}

/* 下端を inset:0 に任せると、そこは「URLバーが隠れた最大の高さ」に付く。
   バーが出ている実機では、その分（iOS Safari で約180px）だけダイアログの下が
   画面の外へ出る。固定要素なのでページを送っても追えず、「次へ」に手が届かない。
   dvh は今見えている高さに追う。1行目は dvh 未対応ブラウザ向けの控え。
   キーボードが出ると dvh も縮まないので、開いているあいだは page-home.js が
   visualViewport の実測を inline style で上書きする。 */
.home-stories-modal {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: 100vh;
	height: 100dvh;
	z-index: 10000001;
	display: grid;
	place-items: center;
	/* それでも入りきらないときの逃げ道。center のままだと溢れた上端が
	   スクロールしても出てこないので safe を足す。safe 未対応のブラウザは
	   この1行を捨て、上の center が残る。 */
	align-items: safe center;
	padding: 4rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.home-stories-modal[hidden] {
	display: none;
}

/* 枠が縦にスクロールしうるので、暗幕は absolute だと一緒に流れて上下に
   すき間ができる。画面に貼り付ける。 */
.home-stories-modal__backdrop {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background: rgba(11, 28, 18, 0.72);
	cursor: default;
}

.home-stories-dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(112rem, 100%);
	/* 枠（＝見えている高さ − padding）を超えない。超えたぶんは中の段が送る。 */
	max-height: 100%;
	overflow: hidden;
	border-radius: 2.8rem;
	background: #ffffff;
	box-shadow: 0 3rem 8rem rgba(10, 45, 28, 0.28);
}

/* 縮んでよいのは読む場所（.home-stories-step）だけ。ここを縮ませると
   見出しや「次へ」の字が潰れて読めなくなる。 */
.home-stories-dialog__header,
.home-stories-progress,
.home-stories-form__error,
.home-stories-form__footer {
	flex-shrink: 0;
}

.home-stories-dialog__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	padding: 2.6rem 3.2rem 2rem;
	border-bottom: 0.1rem solid rgba(31, 95, 63, 0.13);
}

.home-stories-dialog__eyebrow {
	color: #1e5b41;
}

.home-stories-dialog__header h2 {
	margin-top: 0.5rem;
	font-family: var(--okn-serif);
	font-size: 2.8rem;
	font-weight: 600;
	color: #23271f;
}

.home-stories-dialog__header p:last-child {
	margin-top: 0.7rem;
	color: rgba(17, 17, 17, 0.66);
	font-size: 1.3rem;
}

.home-stories-dialog__close,
.home-stories-form__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 4.4rem;
	padding: 0 1.8rem;
	border: 0.1rem solid rgba(31, 44, 89, 0.24);
	border-radius: 999px;
	color: #23271f;
	font-size: 1.3rem;
	font-weight: 800;
}

.home-stories-progress {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 2rem 3.2rem;
	border-bottom: 0.1rem solid rgba(31, 95, 63, 0.13);
}

.home-stories-progress li {
	display: grid;
	grid-template-columns: 3.2rem 1fr;
	align-items: center;
	gap: 1rem;
	color: rgba(17, 17, 17, 0.48);
}

.home-stories-progress li + li {
	border-left: 0.1rem solid rgba(31, 95, 63, 0.16);
	padding-left: 2rem;
}

.home-stories-progress li span {
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: #ecefec;
	font-size: 1.3rem;
	font-weight: 900;
}

.home-stories-progress li strong {
	font-size: 1.35rem;
	font-weight: 800;
}

.home-stories-progress li small {
	grid-column: 2;
	font-size: 1.05rem;
}

.home-stories-progress li.is-current,
.home-stories-progress li.is-complete {
	color: #2e6e52;
}

.home-stories-progress li.is-current span,
.home-stories-progress li.is-complete span {
	background: #1e5b41;
	color: #ffffff;
}

.home-stories-form {
	display: flex;
	min-height: 0;
	flex: 1;
	flex-direction: column;
}

.home-stories-step,
.home-stories-success {
	min-height: 0;
	overflow-y: auto;
	/* 端まで送ったあと、後ろのページまで一緒に動かさない。 */
	overscroll-behavior: contain;
	padding: 2.8rem 3.2rem 2.4rem;
	/* 境目でぷつりと切れると「ここで終わり」に見えて、下を探してもらえない。
	   上下に影を出して続きがあることを示す。white の2枚は紙と同じ色の覆いで、
	   local（＝中身と一緒に流れる）なので端まで送ると影を隠す。影の2枚は
	   scroll（＝枠に貼り付く）ので、送る余地があるあいだだけ見える。 */
	background:
		linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)) top / 100% 2.4rem no-repeat local,
		linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) bottom / 100% 2.4rem no-repeat local,
		radial-gradient(farthest-side at 50% 0, rgba(20, 63, 45, 0.16), rgba(20, 63, 45, 0)) top / 100% 0.9rem no-repeat scroll,
		radial-gradient(farthest-side at 50% 100%, rgba(20, 63, 45, 0.16), rgba(20, 63, 45, 0)) bottom / 100% 0.9rem no-repeat scroll;
}

.home-stories-step__intro h3,
.home-stories-success h3 {
	font-size: 2.2rem;
	font-weight: 900;
	color: #23271f;
}

.home-stories-step__intro p,
.home-stories-success p {
	margin-top: 0.7rem;
	color: rgba(17, 17, 17, 0.66);
	font-size: 1.3rem;
	line-height: 1.7;
}

.home-stories-fields {
	display: grid;
	gap: 1.6rem;
	margin-top: 2.2rem;
}

.home-stories-fields--two-column {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-stories-field {
	display: grid;
	gap: 0.8rem;
}

.home-stories-field > span {
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.5;
}

.home-stories-field em {
	margin-left: 0.4rem;
	color: #d84c2b;
	font-size: 1rem;
	font-weight: 800;
}

.home-stories-field small {
	margin-left: 0.4rem;
	color: rgba(17, 17, 17, 0.52);
	font-size: 1rem;
}

.home-stories-field input,
.home-stories-field select,
.home-stories-field textarea {
	width: 100%;
	min-height: 4.8rem;
	padding: 1.1rem 1.3rem;
	border: 0.1rem solid rgba(31, 44, 89, 0.22);
	border-radius: 0.8rem;
	background: #ffffff;
	color: #111111;
	font-size: 1.4rem;
	cursor: text;
}

.home-stories-field select,
.home-stories-field input[type="file"] {
	cursor: pointer;
}

/* iOS Safari は、文字が 16px 未満の欄に焦点が当たるとページ全体を勝手に拡大
   する。拡大されると横がはみ出してダイアログの右端（閉じる）が画面の外へ出、
   縦に見える範囲もそのぶん狭くなる。実機で「入力する枠が小さい」と見えるのは
   これで、欄そのものの寸法の問題ではない。
   タッチの画面では欄の文字を 16px にして、拡大を起こさせない。
   root が幅に追従する（390px 幅で 9.76px）ため rem では 16px に届かないので、
   ここだけ px で置く。viewport の maximum-scale で拡大を禁じる手は使わない
   ——利用者が自分で広げる手段まで奪うことになるため。 */
@media (pointer: coarse) {
	.home-stories-field input,
	.home-stories-field select,
	.home-stories-field textarea {
		font-size: 16px;
	}
}

/* common.min.css は select にも appearance:none を当てているため、開くための
   矢印が消え、テキスト入力と見分けがつかない。学科は必須の選択項目なので、
   このフォームだけブラウザ既定の矢印を戻す（描き起こしの擬似アイコンは使わない）。 */
.home-stories-field select {
	-webkit-appearance: auto;
	appearance: auto;
	padding-right: 3.2rem;
}

.home-stories-field textarea {
	line-height: 1.7;
}

.home-stories-field input:focus,
.home-stories-field select:focus,
.home-stories-field textarea:focus {
	border-color: #1e5b41;
	box-shadow: 0 0 0 0.3rem rgba(46, 155, 67, 0.15);
}

.home-stories-field--wide {
	grid-column: 1 / -1;
}

.home-stories-capabilities {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.home-stories-capabilities p {
	padding: 1.2rem 1.4rem;
	border-radius: 1rem;
	background: #edf8ef;
	color: #1e5b41;
	font-size: 1.2rem;
	line-height: 1.5;
}

.home-stories-capabilities strong {
	display: block;
	font-weight: 900;
}

.home-stories-review-note {
	margin-top: 1.6rem;
	padding: 1.2rem 1.4rem;
	border-radius: 1rem;
	background: #fff6d6;
	color: #684f00;
	font-size: 1.2rem;
	line-height: 1.6;
}

.home-stories-transcript {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

.home-stories-transcript li {
	padding: 1.2rem 1.4rem;
	border-left: 0.3rem solid #4f7d68;
	background: #f6f4ec;
	font-size: 1.2rem;
	line-height: 1.65;
}

.home-stories-transcript strong,
.home-stories-transcript span {
	display: block;
}

.home-stories-transcript span {
	margin-top: 0.4rem;
	color: rgba(17, 17, 17, 0.68);
}

.home-stories-question {
	margin-top: 2rem;
}

.home-stories-question__count {
	margin-bottom: 0.8rem;
	color: #1e5b41;
	font-size: 1.2rem;
	font-weight: 900;
}

/* 書いた字数。上限（textarea の maxlength）に届く応募者はまれだが、長く書く
   人ほど「どこまで書けるのか」を気にする。欄のすぐ下に小さく置く。
   root は幅に追従して狭い帯では 1rem が 8px 近くまで落ちるので、px の下限を
   添える（theme-okunankai.css:1723 などと同じ書き方）。 */
.home-stories-question__length {
	margin-top: 0.6rem;
	color: rgba(17, 17, 17, 0.58);
	font-size: max(1.2rem, 11px);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.home-stories-question__length.is-limit {
	color: #9c3b26;
	font-weight: 700;
}

.home-stories-consent {
	display: grid;
	grid-template-columns: 2.4rem 1fr;
	align-items: flex-start;
	gap: 1rem;
	margin-top: 2rem;
	padding: 1.4rem;
	border-radius: 1rem;
	background: #f5f8f5;
	font-size: 1.2rem;
	line-height: 1.7;
	cursor: pointer;
}

.home-stories-consent input {
	width: 2.2rem;
	height: 2.2rem;
	border: 0.1rem solid rgba(31, 44, 89, 0.34);
	border-radius: 0.4rem;
	background: #ffffff;
}

.home-stories-consent input:checked {
	background: #1e5b41;
	box-shadow: inset 0 0 0 0.5rem #ffffff;
}

.home-stories-form__error {
	min-height: 2.2rem;
	padding: 0 3.2rem;
	color: #c3381d;
	font-size: 1.2rem;
	line-height: 1.5;
}

.home-stories-form__footer {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.6rem;
	padding: 1.6rem 3.2rem 2rem;
	border-top: 0.1rem solid rgba(31, 95, 63, 0.13);
}

.home-stories-form__footer p {
	color: rgba(17, 17, 17, 0.58);
	font-size: 1.15rem;
	text-align: center;
}

.home-stories-form__next[disabled],
.home-stories-form__back[disabled] {
	opacity: 0.55;
	cursor: wait;
}

.home-stories-form__back[hidden],
.home-stories-form__footer[hidden] {
	display: none;
}

body.is-story-modal-open {
	overflow: hidden;
}

@media screen and (max-width: 1023px) {
	.home-people__inner {
		display: block;
	}

	.home-people__contents {
		margin-top: 2rem;
	}

	.home-stories-invite__lead,
	.home-stories-invite__features {
		padding: 2.6rem 2.2rem;
	}

	.home-stories-modal {
		align-items: end;
		align-items: safe end;
		padding: 1.2rem;
	}

	.home-stories-dialog {
		border-radius: 2rem;
	}

	.home-stories-dialog__header,
	.home-stories-progress,
	.home-stories-step,
	.home-stories-success,
	.home-stories-form__footer {
		padding-right: 2rem;
		padding-left: 2rem;
	}

	.home-stories-progress li {
		grid-template-columns: 2.8rem 1fr;
		gap: 0.7rem;
	}

	.home-stories-progress li + li {
		padding-left: 1rem;
	}

	.home-stories-progress li span {
		width: 2.8rem;
		height: 2.8rem;
	}

	.home-stories-progress li strong {
		font-size: 1.1rem;
	}
}

@media screen and (max-width: 560px) {
	.home-stories-invite {
		border-radius: 2rem;
	}

	.home-stories-invite__features li {
		grid-template-columns: 1fr;
		gap: 0.4rem;
		border-radius: 1.4rem;
	}

	.home-stories-fields--two-column,
	.home-stories-capabilities {
		grid-template-columns: 1fr;
	}

	.home-stories-progress {
		padding-top: 1.4rem;
		padding-bottom: 1.4rem;
	}

	.home-stories-progress li {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.home-stories-progress li span {
		grid-column: 1;
	}

	.home-stories-progress li strong,
	.home-stories-progress li small {
		grid-column: 1;
	}

	.home-stories-dialog__header h2 {
		font-size: 2.2rem;
	}

	.home-stories-form__footer {
		grid-template-columns: auto 1fr;
	}

	.home-stories-form__footer p {
		display: none;
	}

	.home-stories-form__next {
		min-height: 5rem;
		padding: 0 1.8rem;
		font-size: 1.35rem;
	}
}

/* ソフトキーボードが出ているあいだの詰めた表示。
   下の @media (max-height:...) では届かない。@media が見るのは画面の高さで、
   iOS Safari ではキーボードが出ても innerHeight は縮まないため、狭い画面用の
   指定が一切効かないまま枠だけが縮む。実測できるのは JS だけなので、
   page-home.js が visualViewport を見て is-cramped を付ける。
   書いている欄に場所を渡すのが目的なので、読み物のほうから先に畳む。 */
.home-stories-modal.is-cramped .home-stories-dialog__eyebrow,
.home-stories-modal.is-cramped .home-stories-dialog__header p:last-child,
.home-stories-modal.is-cramped .home-stories-progress,
.home-stories-modal.is-cramped .home-stories-step__intro {
	display: none;
}

.home-stories-modal.is-cramped .home-stories-dialog__header {
	padding-top: 1.2rem;
	padding-bottom: 1rem;
}

.home-stories-modal.is-cramped .home-stories-dialog__header h2 {
	margin-top: 0;
	font-size: 1.8rem;
}

.home-stories-modal.is-cramped .home-stories-step,
.home-stories-modal.is-cramped .home-stories-success {
	padding-top: 1.4rem;
	padding-bottom: 1.4rem;
}

.home-stories-modal.is-cramped .home-stories-question {
	margin-top: 1.2rem;
}

/* rows="6" のままだと欄だけで 162px あり、キーボードを除いた枠に入らない。
   入らない欄は上端しか見えず、書いた字が隠れていく。畳んで収める。 */
.home-stories-modal.is-cramped .home-stories-field--answer textarea {
	height: 8rem;
	min-height: 0;
}

.home-stories-modal.is-cramped .home-stories-form__footer {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* エラーが無いときも 2.2rem を確保している。ふだんは字が動かなくてよいが、
   キーボードで場所が無いときは書く場所へ回す。display:none にはしない——
   読み上げの生きた領域なので、消すと出したときに読まれないことがある。
   高さだけ 0 にして、要素は残す。 */
.home-stories-modal.is-cramped .home-stories-form__error:empty {
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* ここから下は「縦が狭い」ときの話。横幅ではなく高さで効かせる。
   スマホを横に持ったとき、URLバーが出ているとき、キーボードが出ているとき、
   ブラウザの文字サイズを上げているときが該当する。
   見出しと進行表示は動かないぶん、狭くなるほど読む場所を丸ごと食う。
   390x664 では見出し103px + 進行90px + 脚85px で、残る読む場所は約340px。
   ここを詰めないと、入力欄が数行しか見えないまま延々と送ることになる。 */
@media screen and (max-height: 700px) {
	.home-stories-dialog__header {
		padding-top: 1.4rem;
		padding-bottom: 1.2rem;
	}

	/* 見出しと同じことを言い直している飾り。狭いときは落とす。 */
	.home-stories-dialog__eyebrow {
		display: none;
	}

	.home-stories-dialog__header h2 {
		margin-top: 0;
		font-size: 2rem;
	}

	/* aria-describedby の参照先。display:none でも説明としては読み上げられる
	   （AccName は直接参照された非表示要素を含める）ので、隠してよい。 */
	.home-stories-dialog__header p:last-child {
		display: none;
	}

	.home-stories-progress {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.home-stories-progress li small {
		display: none;
	}

	.home-stories-step,
	.home-stories-success {
		padding-top: 1.8rem;
	}

	/* 1・2段目の前置きは安心のための言い添え。3段目のそれは写真の形式と
	   容量という、外すと弾かれてから気づく決まりなので落とさない。 */
	[data-story-step="1"] .home-stories-step__intro p,
	[data-story-step="2"] .home-stories-step__intro p {
		display: none;
	}

	.home-stories-form__footer {
		padding-top: 1.2rem;
		padding-bottom: 1.2rem;
	}
}

/* 詰めてもなお足りない高さ（横向きのスマホ＋キーボード等）。
   ここで中の段だけを送る形のままだと、見出し・進行・脚だけで枠を使い切り、
   読む場所の高さが 0 に潰れて何も出せなくなる。行き止まりを作らないため、
   この帯だけはダイアログ全体を枠の中で送る形に切り替える。 */
@media screen and (max-height: 480px) {
	.home-stories-modal {
		align-items: start;
		align-items: safe start;
	}

	.home-stories-dialog {
		max-height: none;
		overflow: visible;
	}

	.home-stories-step,
	.home-stories-success {
		overflow-y: visible;
		background: none;
	}

	/* 枠ごと送る形になると、脚は長い紙の一番下へ行ってしまう。この帯では
	   送るのは枠なので、脚を枠の下端に貼り付けられる（あいだに overflow を
	   持つ要素が無いので sticky が効く）。押す場所を探して往復させない。 */
	.home-stories-form__footer {
		position: sticky;
		bottom: 0;
		background: #ffffff;
	}
}
/* ==========================================================================
   home-people__shelf — Alumni 節の 3D 本棚（home-shelf.js）
   カルーセルと同じ枠に重ね、本を選んだらカードへ入れ替わる。
   JS が hidden を外すまでは存在しないのと同じ。動きを抑える設定・WebGL 不可
   では出さないので、ここが読解の前に立つことはない。
   ========================================================================== */
.home-people__shelf[hidden] {
	display: none;
}

.home-people__shelf {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
	padding-bottom: 2.4rem;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.home-people__shelf.is-ready {
	opacity: 1;
}

.home-people__shelf.is-leaving {
	opacity: 0;
	transition: opacity 0.42s ease;
}

/* 案内文のぶんは本の場所から引く。重ねて置くと、段数が増えるスマホで
   下の段の本と文字が重なる。min-height:0 が無いと canvas が縮まない。 */
.home-people__shelf-stage {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}

.home-people__shelf-stage canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.home-people__shelf-hint,
.home-people__shelf-skip {
	position: relative;
	z-index: 1;
	transition: opacity 0.4s ease;
}

.home-people__shelf-hint {
	font-size: 1.4rem;
	letter-spacing: 0.04em;
	color: rgba(35, 39, 31, 0.66);
	pointer-events: none;
}

.home-people__shelf-skip {
	padding: 0.8rem 2.2rem;
	border: 1px solid var(--okn-green, #1e5b41);
	border-radius: 999px;
	background: transparent;
	font-size: 1.3rem;
	letter-spacing: 0.08em;
	color: var(--okn-green, #1e5b41);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.4s ease;
}

.home-people__shelf-skip:hover,
.home-people__shelf-skip:focus-visible {
	background: var(--okn-green, #1e5b41);
	color: #fffdf7;
}

/* 本を選んだら、案内も逃げ道も引く。開いた紙面と重ねて読ませない。 */
.home-people__shelf.is-opening .home-people__shelf-hint,
.home-people__shelf.is-opening .home-people__shelf-skip {
	opacity: 0;
	pointer-events: none;
}

/* 本棚が出ている間、カードと操作子は伏せる。display:none にすると
   Swiper が幅を測れなくなるので、場所は残したまま見えなくする。 */
.home-people__carousel.is-shelf .swiper-wrapper,
.home-people__carousel.is-shelf .home-people__dots,
.home-people__carousel.is-shelf .home-people__arrow {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

@media screen and (max-width: 767px) {
	.home-people__shelf {
		padding-bottom: 1.6rem;
		gap: 0.9rem;
	}

	.home-people__shelf-hint {
		font-size: 1.25rem;
	}

	/* 本棚はカルーセルの枠に重なるので、伏せているカードの高さをそのまま受け継ぐ。
	   スマホではカードが縦積みで 600px を超えるのに、本の大きさは画面の幅から
	   決まるため、本の上下に大きな余白が残る。本が収まる高さまで枠を詰める。
	   （本の幅は画面幅の約3割、天地はその1.5倍。2.4冊ぶん入る比率がここ） */
	.home-people__carousel.is-shelf {
		height: 90vw;
		min-height: 32rem;
		max-height: 42rem;
	}
}

/* ------------------------------------------------------------
 home-news：トップの「お知らせ」欄（2026-08-08 / 2026-08-10 写真つきカードの横送りへ）

 1 件が 1 枚の小さなカード。上に 16:9 の写真、下に日付・分類・見出し・本文・ボタン。
 横に並べて矢印・ドット・スワイプで送る（Swiper）。送りの初期化は
 public/assets/js/page-home.js、組版は scripts/build-home-news.cjs、
 中身は scripts/news.data.cjs。

 ▼ 欄を小さく保つための決めごと
   見出しと本文は 2 行で切る（line-clamp）。切らないと、長い 1 件の高さに
   並んだ全カードが引きずられ、他のカードが余白だらけになる。以前あった
   日時・会場・会費の並び（dl）は、この大きさに収まらないので廃止した。

 JS が動かない環境でも読めることは崩さない。Swiper が立ち上がるまでは
 素の横スクロール（scroll-snap）として並び、押しても動かない矢印とドットは
 隠しておく。隣の home-people__carousel は初期化まで丸ごと隠しているが、
 お知らせは読めること自体が目的なので、そちらには倣わない。
------------------------------------------------------------ */
.home-news {
	position: relative;
	z-index: 1;
	background-color: var(--okn-cream);
}

/* 送り出したカードは本文の列の外へ出さない。Swiper 自身の overflow:hidden は
   .swiper クラスに付くもので、この節はそのクラスを持たない（隣の
   home-people__carousel と同じ組み方）ため、ここで閉じる。
   外周の負のマージンと同じ幅の内側余白は、カードの浮き上がりと影が
   切り取られないようにするための逃げ。中身の幅は変わらない。 */
.home-news__carousel {
	position: relative;
	overflow: hidden;
	margin: -1.2rem;
	padding: 1.2rem;
}

.home-news__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* swiper-slide の既定は中身の高さ。カードを height:100% で伸ばすために、
   スライド側を伸縮させて行の高さへ揃える。これが無いと、隣に高いカードが
   あってもカードの下に隙間が空き、ボタンの位置が段違いになる。 */
.home-news__item {
	height: auto;
}

.home-news__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--color-line4);
	border-radius: 10px;
	background-color: #fffdf7;
	/* 左端の深緑。border-left を太くすると中身が右へずれるので、内側の影で足す。 */
	box-shadow: inset 3px 0 0 var(--okn-green);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 写真。元の画像は 3:2 や 4:3 とまちまちなので、16:9 に切り抜いて高さを揃える。
   揃えないとカードごとに写真の高さが変わり、下の日付の位置がばらつく。 */
.home-news__thumb {
	margin: 0;
	/* 左端の深緑の帯を写真で隠さない。 */
	margin-left: 3px;
	background-color: var(--color-line4);
}

.home-news__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.home-news__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.home-news__meta {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0;
}

.home-news__date {
	color: #7e6329;
	font-family: var(--okn-en-serif);
	font-weight: 400;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.home-news__category {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--okn-gold);
	color: #6b5322;
	font-family: var(--font-gothic);
	letter-spacing: 0.08em;
	white-space: nowrap;
}

/* 見出しと本文は 2 行で切る。切らないと 1 件の長さに全カードが引きずられる。
   line-clamp は表示を切るだけで、文そのものは DOM に残る（読み上げは全文を読む）。
   それでも目で読む人には続きが出ないので、news.data.cjs 側で長さの目安を示している。 */
.home-news__headline,
.home-news__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.home-news__headline {
	margin: 0.8rem 0 0;
	font-family: var(--font-mincho);
	font-weight: 500;
	line-height: 1.5;
}

.home-news__text {
	margin: 0.6rem 0 0;
	color: #4a4f45;
	font-family: var(--font-gothic);
	line-height: 1.8;
}

/* margin-top:auto でボタンをカードの底へ落とす。本文が 1 行の件と 2 行の件が
   混ざっても、並んだカードのボタンの高さが揃う。 */
.home-news__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: auto;
	color: #6b5322;
	font-family: var(--font-mincho);
	text-decoration: none;
	/* 枠を外して文字だけにする。小さなカードでは枠付きのボタンが場所を食う。 */
	border-bottom: 1px solid var(--okn-gold);
	padding-bottom: 0.3rem;
}

.home-news__cta svg {
	width: 1.6rem;
	height: 1.6rem;
	transition: transform 0.3s ease;
}

/* ---------- 送りの操作（矢印・ドット） ---------- */
.home-news__nav {
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-news__dots {
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-news__arrow {
	display: flex;
	align-items: center;
}

/* c-arrow3 の丸は ::before で描かれ、素の <i> の箱（2.1rem）より大きい
   （--hover-circle-size と同じ 5.4rem）。ボタンを箱の大きさのまま置くと、
   見えている丸より押せる範囲がずっと小さくなる。丸に合わせて広げる。 */
.home-news__arrow button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5.4rem;
	height: 5.4rem;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* c-arrow3 は既定だと矢印がホバーまで出ない（隣の home-people__arrow も同じ）。
   あちらは大きなカードに重ねてあるので丸だけでも掴めるが、こちらはドットと
   並ぶ小さな操作なので、出ていないとただの丸に見える。指で触る画面には
   ホバーが無く、そこでは最後まで矢印が現れない。この節だけ常に出しておく。 */
.home-news__arrow .c-arrow3 svg {
	opacity: 1;
}

.home-news__arrow button:focus-visible,
.home-news__dots button:focus-visible {
	outline: 2px solid var(--okn-green);
	outline-offset: 0.4rem;
}

/* 端に着いたら矢印を薄くする。消すと押せる場所が動いて指が迷うので、残す。 */
.home-news__arrow button.is-disabled {
	opacity: 0.35;
	cursor: default;
}

/* ---------- JS が立ち上がる前／動かないとき ---------- */
.home-news__carousel:not(.swiper-initialized) .home-news__list {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.home-news__carousel:not(.swiper-initialized) .home-news__item {
	flex: none;
	scroll-snap-align: start;
}

/* 押しても動かない操作は出さない。Swiper が initialized を付けた時点で現れる。 */
.home-news__carousel:not(.swiper-initialized) ~ .home-news__nav {
	display: none;
}

.home-news__note {
	color: #6f7469;
	font-family: var(--font-gothic);
	line-height: 1.8;
}

@media (hover: hover) {
	.home-news__card:hover {
		box-shadow: inset 3px 0 0 var(--okn-green), 0 0.6rem 1.8rem rgba(60, 51, 24, 0.1);
		transform: translateY(-0.3rem);
	}

	.home-news__cta:hover svg {
		transform: translateX(0.4rem);
	}
}

/* 動きを減らす設定のときは、浮き上がりも矢印の滑りも止める。
   横送りそのものは Swiper 側で自動送りを切っている（page-home.js）。 */
@media (prefers-reduced-motion: reduce) {
	.home-news__card,
	.home-news__cta svg {
		transition: none;
	}

	.home-news__card:hover {
		transform: none;
	}
}

@media screen and (min-width: 1024px) {
	.home-news {
		padding: 7.2rem 0 8rem;
	}

	.home-news__header {
		display: grid;
		justify-items: start;
		gap: 1.2rem;
		margin-bottom: 2.8rem;
	}

	.home-news__display {
		margin: 0;
		color: var(--okn-green);
		font-family: var(--font-mincho);
		font-size: 3.4rem;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0.16em;
	}

	.home-news__body {
		padding: 1.8rem 1.8rem 2rem;
	}

	.home-news__date {
		font-size: 1.5rem;
	}

	.home-news__category {
		min-width: 6rem;
		height: 2.4rem;
		padding: 0 0.8rem;
		font-size: 1.2rem;
	}

	.home-news__headline {
		font-size: 1.6rem;
	}

	.home-news__text {
		font-size: 1.3rem;
	}

	.home-news__cta {
		margin-top: 1.6rem;
		font-size: 1.4rem;
	}

	/* 4 枚並ぶ幅。slidesPerView:4 / spaceBetween:24 のときに Swiper が出す幅と
	   同じ式にしてある。揃えておくと、立ち上がった瞬間に幅が跳ねない。 */
	.home-news__carousel:not(.swiper-initialized) .home-news__list {
		gap: 2.4rem;
		padding-bottom: 1.6rem;
	}

	.home-news__carousel:not(.swiper-initialized) .home-news__item {
		width: calc((100% - 7.2rem) / 4);
	}

	.home-news__nav {
		gap: 2.4rem;
		margin-top: 3.2rem;
	}

	.home-news__arrow {
		gap: 0.8rem;
	}

	.home-news__note {
		margin: 2rem 0 0;
		font-size: 1.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.home-news {
		padding: 5.6rem 0 6rem;
	}

	.home-news__header {
		display: grid;
		justify-items: start;
		gap: 1.2rem;
		margin-bottom: 2.4rem;
	}

	.home-news__display {
		margin: 0;
		color: var(--okn-green);
		font-family: var(--font-mincho);
		font-size: 2.4rem;
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.14em;
	}

	.home-news__body {
		padding: 1.6rem 1.6rem 1.8rem;
	}

	.home-news__date {
		font-size: 1.4rem;
	}

	.home-news__category {
		min-width: 5.6rem;
		height: 2.2rem;
		padding: 0 0.7rem;
		font-size: 1.1rem;
	}

	.home-news__headline {
		font-size: 1.5rem;
	}

	.home-news__text {
		font-size: 1.2rem;
	}

	.home-news__cta {
		margin-top: 1.4rem;
		font-size: 1.3rem;
	}

	/* 1 枚強を見せて、右にもう 1 枚あることを端で示す。ぴったり 1 枚にすると
	   横に送れる欄だと気づかれない。slidesPerView:1.35 とほぼ同じ幅。 */
	.home-news__carousel:not(.swiper-initialized) .home-news__list {
		gap: 1.6rem;
		padding-bottom: 1.2rem;
	}

	.home-news__carousel:not(.swiper-initialized) .home-news__item {
		width: 72%;
	}

	.home-news__nav {
		gap: 1.6rem;
		margin-top: 2.4rem;
	}

	.home-news__arrow {
		gap: 0.4rem;
	}

	.home-news__note {
		margin: 1.6rem 0 0;
		font-size: 1.1rem;
	}
}

/* ------------------------------------------------------------
 home-business：卒業生事業・店舗紹介の抜粋（2026-08-09）

 Alumni の深緑帯（home-container）の直後、ANNIVERSARY 帯の手前。
 インタビューまで読んだ人に「その先にもう一つ、卒業生の今がある」と
 手渡す位置なので、緑帯の熱を引き継がず生成りへ戻して静かに置く。

 中身は public/pages/business.html が出典、組版は
 scripts/build-home-business.cjs。事業ページと同じ「本」で見せるが、
 あちらのしなる紙と指めくりはトップには重いので、紙が横へ滑る
 スライドだけにしている。動きは public/assets/js/home-business-book.js。

 JS が無いときは全ページを縦に並べたまま。本として畳むのは
 [data-home-book-ready="true"] が付いてからで、この属性は JS だけが付ける。
 掲載が読めなくなる作りにはしない。
------------------------------------------------------------ */
.home-business {
	background-color: var(--color-bg8);
}

.home-business__header {
	text-align: center;
}

.home-business__eyebrow {
	margin: 0;
	color: var(--okn-gold);
	font-family: var(--okn-en-serif);
	font-size: 1.2rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.home-business__title {
	margin: 1.2rem 0 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	letter-spacing: 0.12em;
}

.home-business__lead {
	margin: 2.4rem 0 0;
	font-family: var(--font-mincho);
	line-height: 1.8;
	letter-spacing: 0.08em;
}

.home-business__intro {
	max-width: 46em;
	margin: 1.6rem auto 0;
	color: #55584f;
	font-size: 1.4rem;
	line-height: 2;
}

/* ----------------------------------------
 本
---------------------------------------- */
.home-business__book {
	/* めくりの尺の唯一の出典。JS はこの値を読む（同じ数値を両方に書かない）。 */
	--home-book-slide: 520ms;
	position: relative;
	margin: 5.6rem auto 0;
}

.home-business__book:focus-visible {
	outline: 2px solid var(--okn-gold);
	outline-offset: 1.2rem;
}

/* 表紙・小口・のど。JS が本にしたときだけ出す飾り。 */
.home-business__book-cover,
.home-business__book-leaves,
.home-business__book-gutter {
	display: none;
	position: absolute;
	pointer-events: none;
}

.home-business__book[data-home-book-ready="true"] .home-business__book-cover,
.home-business__book[data-home-book-ready="true"] .home-business__book-leaves {
	display: block;
}

/* 表紙の板。紙面より一回り大きく、金の罫を一本。 */
.home-business__book-cover {
	z-index: 1;
	top: -1rem;
	right: -1.2rem;
	bottom: -1.3rem;
	left: -1.2rem;
	background: linear-gradient(180deg, #1f5340 0%, #17452f 55%, #103526 100%);
	box-shadow: inset 0 0 0 1px rgba(201, 176, 106, 0.45);
}

.home-business__book-cover::before {
	position: absolute;
	inset: 0.5rem;
	border: 1px solid rgba(201, 176, 106, 0.4);
	content: "";
}

/* 小口。紙が積んである厚みを両端に出す。 */
.home-business__book-leaves {
	z-index: 2;
	inset: 0.4rem -0.8rem;
}

.home-business__book-leaves::before,
.home-business__book-leaves::after {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0.8rem;
	background: repeating-linear-gradient(90deg, #efe9d8 0 1px, #cdc4ac 1px 2px);
	content: "";
}

.home-business__book-leaves::before {
	left: 0;
	box-shadow: inset -0.2rem 0 0.4rem rgba(35, 39, 31, 0.24);
}

.home-business__book-leaves::after {
	right: 0;
	box-shadow: inset 0.2rem 0 0.4rem rgba(35, 39, 31, 0.24);
}

/* のどの落ち込み。紙の上に固定で置き、滑っている間も動かさない。 */
.home-business__book[data-home-book-ready="true"] .home-business__book-gutter {
	display: block;
	z-index: 6;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 9rem;
	transform: translateX(-50%);
	background: linear-gradient(
		90deg,
		rgba(58, 46, 22, 0) 0%,
		rgba(58, 46, 22, 0.05) 26%,
		rgba(48, 38, 18, 0.16) 42%,
		rgba(38, 30, 14, 0.3) 49.2%,
		rgba(255, 253, 247, 0.5) 50%,
		rgba(38, 30, 14, 0.28) 50.8%,
		rgba(48, 38, 18, 0.14) 58%,
		rgba(58, 46, 22, 0.04) 74%,
		rgba(58, 46, 22, 0) 100%
	);
}

/* ----------------------------------------
 紙
---------------------------------------- */
.home-business__pages {
	position: relative;
	z-index: 3;
	display: grid;
	gap: 3.2rem;
	min-width: 0;
}

/* 本になったら、紙は1枚ずつ同じ場所に重ねる。 */
.home-business__book[data-home-book-ready="true"] .home-business__pages {
	gap: 0;
	overflow: hidden;
	grid-template-areas: "sheet";
}

.home-business__page {
	position: relative;
	background-color: var(--okn-cream);
	border: 1px solid #bdb6a2;
	/* 版ずれの影。ぼかさない（事業ページの紙と同じ作り）。 */
	box-shadow: 0.8rem 0.9rem 0 rgba(35, 39, 31, 0.14);
}

.home-business__book[data-home-book-ready="true"] .home-business__page {
	grid-area: sheet;
	box-shadow: none;
	/* 重ねた紙のうち、いま出ている1枚と動いている1枚だけを見せる。 */
	visibility: hidden;
}

.home-business__book[data-home-book-ready="true"] .home-business__page[data-book-active="true"],
.home-business__book[data-home-book-ready="true"] .home-business__page[data-book-leave] {
	visibility: visible;
}

.home-business__page[data-book-leave] {
	z-index: 4;
}

.home-business__page[data-book-enter] {
	z-index: 5;
}

/* 滑り。入ってくる紙は小口の側から、出ていく紙は反対側へ抜ける。
   紙の先端に落ちる影で、重なった紙の上を滑っているように見せる。 */
@keyframes home-book-enter-next {
	from {
		transform: translateX(38%);
		opacity: 0.35;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes home-book-leave-next {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(-24%);
		opacity: 0;
	}
}

@keyframes home-book-enter-previous {
	from {
		transform: translateX(-38%);
		opacity: 0.35;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes home-book-leave-previous {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(24%);
		opacity: 0;
	}
}

.home-business__page[data-book-enter="next"] {
	animation: home-book-enter-next var(--home-book-slide) cubic-bezier(0.32, 0.08, 0.16, 1) both;
	box-shadow: -1.4rem 0 2.2rem rgba(35, 39, 31, 0.22);
}

.home-business__page[data-book-leave="next"] {
	animation: home-book-leave-next var(--home-book-slide) cubic-bezier(0.32, 0.08, 0.16, 1) both;
}

.home-business__page[data-book-enter="previous"] {
	animation: home-book-enter-previous var(--home-book-slide) cubic-bezier(0.32, 0.08, 0.16, 1) both;
	box-shadow: 1.4rem 0 2.2rem rgba(35, 39, 31, 0.22);
}

.home-business__page[data-book-leave="previous"] {
	animation: home-book-leave-previous var(--home-book-slide) cubic-bezier(0.32, 0.08, 0.16, 1) both;
}

/* 丁付け。本になったときだけ出す。 */
.home-business__folio {
	display: none;
	position: absolute;
	z-index: 2;
	right: 1.6rem;
	bottom: 1.2rem;
	margin: 0;
	color: #8a8578;
	font-family: var(--okn-en-serif);
	font-size: 1.2rem;
	letter-spacing: 0.14em;
}

.home-business__book[data-home-book-ready="true"] .home-business__folio {
	display: block;
}

.home-business__folio span {
	color: var(--okn-vermilion);
}

.home-business__figure {
	margin: 0;
	overflow: hidden;
	background-color: var(--color-bg10);
}

.home-business__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 写真が届いていない店。空枠ではなく活字の台紙にする。 */
.home-business__figure.-plate {
	display: grid;
	place-items: center;
	padding: 2.4rem;
}

.home-business__plate {
	margin: 0;
	text-align: center;
}

.home-business__plate-name {
	display: block;
	font-family: var(--font-mincho);
	font-size: 1.8rem;
	line-height: 1.6;
	letter-spacing: 0.08em;
}

.home-business__plate-note {
	display: block;
	margin-top: 1rem;
	color: #676960;
	font-size: 1.2rem;
}

.home-business__body {
	padding: 3.2rem 3.2rem 3.6rem;
}

.home-business__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.2rem;
	margin: 0;
	font-size: 1.2rem;
}

.home-business__region,
.home-business__type {
	padding: 0.3rem 1rem;
	border: 1px solid var(--color-line3);
	color: #55584f;
}

.home-business__name {
	margin: 1.6rem 0 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 2.2rem;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

.home-business__owner {
	margin: 0.8rem 0 0;
	color: #55584f;
	font-size: 1.3rem;
	line-height: 1.8;
}

.home-business__quote {
	margin: 2rem 0 0;
	padding-top: 1.8rem;
	border-top: 1px solid rgba(35, 39, 31, 0.12);
	color: var(--okn-green);
	font-family: var(--font-mincho);
	font-size: 1.7rem;
	line-height: 1.9;
	letter-spacing: 0.04em;
}

/* ----------------------------------------
 送り
---------------------------------------- */
.home-business__book-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	margin-top: 3.2rem;
}

.home-business__book-button {
	padding: 1rem 2rem;
	border: 1px solid var(--color-line3);
	background-color: transparent;
	color: var(--okn-ink);
	font-family: var(--font-mincho);
	font-size: 1.4rem;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.home-business__book-button:focus-visible {
	outline: 2px solid var(--okn-gold);
	outline-offset: 2px;
}

.home-business__book-position {
	margin: 0;
	color: #676960;
	font-family: var(--okn-en-serif);
	font-size: 1.4rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
}

@media (hover: hover) {
	.home-business__book-button {
		transition:
			background-color 0.2s ease,
			color 0.2s ease,
			border-color 0.2s ease;
	}

	.home-business__book-button:hover {
		border-color: var(--okn-gold);
		background-color: var(--okn-gold);
		color: var(--okn-cream);
	}
}

.home-business__note {
	margin: 2.8rem 0 0;
	color: #676960;
	font-size: 1.25rem;
	line-height: 1.7;
	text-align: center;
}

.home-business__more {
	margin: 3.2rem 0 0;
	text-align: center;
}

.home-business__more a {
	display: inline-flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.2rem 2.4rem;
	border: 1px solid var(--okn-gold);
	color: #6b5322;
	font-family: var(--font-mincho);
	font-size: 1.6rem;
	text-decoration: none;
}

.home-business__more svg {
	width: 2.2rem;
	height: 2.2rem;
	flex: none;
}

@media (hover: hover) {
	.home-business__more a {
		transition:
			background-color 0.2s ease,
			color 0.2s ease;
	}

	.home-business__more a:hover {
		background-color: var(--okn-gold);
		color: var(--okn-cream);
	}
}

/* 動きを減らす設定では滑らせない。JS 側も即座に差し替える。 */
@media (prefers-reduced-motion: reduce) {
	.home-business__page[data-book-enter],
	.home-business__page[data-book-leave] {
		animation: none !important;
		box-shadow: none;
	}
}

@media screen and (min-width: 1024px) {
	.home-business {
		padding: 14rem 0;
	}

	.home-business__title {
		font-size: 3.2rem;
	}

	.home-business__lead {
		font-size: 2.4rem;
	}

	.home-business__book {
		max-width: 96rem;
	}

	/* 見開き。左が写真、右が本文。 */
	.home-business__page {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-height: 46rem;
	}

	.home-business__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@media screen and (max-width: 1023px) {
	.home-business {
		padding: 8.8rem 0;
	}

	.home-business__title {
		font-size: 2.2rem;
	}

	.home-business__lead {
		font-size: 1.9rem;
	}

	.home-business__book {
		margin-top: 4rem;
	}

	/* 狭い画面は1ページずつ。のどは出さない（片面しか無いため）。 */
	.home-business__book[data-home-book-ready="true"] .home-business__book-gutter {
		display: none;
	}

	.home-business__figure {
		aspect-ratio: 4 / 3;
	}

	.home-business__body {
		padding: 2.4rem 2rem 2.8rem;
	}

	.home-business__name {
		font-size: 1.8rem;
	}

	.home-business__book-nav {
		gap: 1.6rem;
	}

	.home-business__book-button {
		padding: 0.9rem 1.4rem;
		font-size: 1.3rem;
	}
}
/*# sourceMappingURL=sourcemaps/page-home.css.map */