@charset "utf-8";

/* ==========================================================================
   Front Page
   ========================================================================== */

.site-main.top {
	margin: 0;
}

.front-section {
	padding: var(--space-20, 80px) 0;
}

.section-heading--center {
	text-align: center;
}

.section-heading--center .section-heading__subtitle {
	margin-top: var(--space-3, 12px);
}

/* Hero */
.front-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	overflow: hidden;
}

.front-hero__media {
	position: absolute;
	inset: 0;
}

.front-hero__video,
.front-hero__fallback {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.front-hero__fallback {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.front-hero__overlay {
	position: absolute;
	inset: 0;z-index: 10;
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.38) 0%,
			rgba(0, 0, 0, 0.18) 42%,
			rgba(0, 0, 0, 0.18) 58%,
			rgba(0, 0, 0, 0.38) 100%
		),
		rgba(0, 0, 0, 0.28);
}

.front-hero__inner {
	position: relative;
	z-index: 11;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	max-width: var(--layout-maxWidth-content, 1200px);
	min-height: inherit;
	margin-inline: auto;
	padding: var(--space-20, 80px) var(--space-5, 20px);
	text-align: center;
}

.front-hero__title {
	margin: 0;
	font-family: var(--typography-fontFamily-serif, "Noto Serif JP", serif);
	font-size: var(--typography-fontSize-sectionTitleLg, 48px);
	font-weight: var(--typography-fontWeight-regular, 400);
	line-height: 2;
	color: var(--color-text-onDark, #ffffff);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   front-hero スライドショー（フェードアウト＋ズーム）
   
   設計:
   - スライド枚数       : 6枚
   - 総サイクル時間     : 60s
   - 1枚の占有時間      : 10s
   - ズーム時間         : 9s（表示中ずっと）
   - フェードアウト時間 : 1s
   
   仕組み:
   - 全スライドを重ねて opacity:1 で配置
   - 上のスライドがフェードアウトすると下のスライドが現れる
   - フェードインアニメーション不要（下が控えているため）
   - delay を -9s 刻みにすることでフェードアウト開始タイミングをずらす
   
   @keyframes パーセンテージの根拠（60sベース）:
   - フェードアウト開始 : 9s ÷ 60s = 15%
   - フェードアウト完了 : 10s ÷ 60s = 16.667%
   ============================================================ */

.front-hero__slideshow {
    /* 親 .front-hero が position: relative であることが前提 */
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.front-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 1; /* 全スライドを重ねて表示。上のスライドがフェードアウトすると下が現れる */

    animation-name: hero-fade-zoom;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    /* * 【修正】60s ÷ 6枚 ＝ 1枚あたり10s のサイクルに修正
     * index:0 → delay: -60s（0s地点と同等、最初に表示）
     * index:1 → delay: -50s（10s進んだ地点からスタート）
     * index:5 → delay: -10s（50s進んだ地点からスタート）
     */
    animation-delay: calc((6 - var(--slide-index, 0)) * -5s);
    z-index: calc(5 - var(--slide-index, 0));
}

.front-hero__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.front-hero__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================================
   キーフレーム: ズーム＋フェードアウト（完全版）
   
   0%       : 自身の出番スタート・ズーム開始 scale(1)
   15%      : ズーム継続中にフェードアウト開始 [9s地点]
   16.667%  : フェードアウト完了 → 一旦非表示へ [10s地点]
   98.333%  : 非表示のまま scale(1) にリセット [59s地点]
   100%     : 【修正】59sから60sの1秒間で、次の出番に向けてじわっとフェードイン！
   ============================================================ */
@keyframes hero-fade-zoom {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    15% {
        opacity: 1;
        transform: scale(1.07);
    }
    16.667% {
        opacity: 0;
        transform: scale(1.08);
    }
    98.333% {
        opacity: 0;
        transform: scale(1);
    }
    /* * 98.333% から 100% にかけて、CSSが自動で opacity を 0 から 1 へ
     * 1秒間かけてアニメーション（フェードイン）させてくれます。
     */
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .front-hero__slide {
        animation-name: hero-fade-only;
    }
}

/* ズームなし版も同様に修正 */
@keyframes hero-fade-only {
    0%      { opacity: 1; transform: none; }
    15%     { opacity: 1; transform: none; }
    16.667% { opacity: 0; transform: none; }
    98.333% { opacity: 0; transform: none; }
    100%    { opacity: 1; transform: none; }
}
/* Concept */
.front-concept__inner {
	display: grid;justify-content: space-between;
	gap: var(--space-10, 40px);
	align-items: start;
}

.front-concept__media img {
	display: block;
	width: 100%;
	max-width: 400px;
	border-radius: var(--radius-card, 5px);
	object-fit: cover;
	aspect-ratio: 2 / 3;
}

.front-concept__title {
	font-family: var(--typography-fontFamily-serif, "Noto Serif JP", serif);
	font-size: var(--typography-fontSize-h1, 32px);
	font-weight: var(--typography-fontWeight-regular, 400);
	line-height: 1.5;
}

.front-concept__subtitle {
	font-family: var(--typography-fontFamily-serif, "Noto Serif JP", serif);
	margin: var(--space-2, 8px) 0 var(--space-10, 40px);
	font-size: var(--typography-fontSize-sectionSubtitle, 24px);
	line-height: 1;
	color: var(--color-palette-gray-500, #999999);
}

.front-concept__text,
.front-works__text,
.front-about__text,
.front-land__text {
	margin: 0 0 var(--space-8, 32px);
	max-width: 500px;
}

.front-concept__text p,
.front-works__text p,
.front-about__text p,
.front-land__text p,
.front-quality__text p,
.cta-panel__text p {
	margin: 0;
	line-height: 2;
}

.front-concept__text p + p,
.front-works__text p + p,
.front-about__text p + p,
.front-land__text p + p,
.front-quality__text p + p,
.cta-panel__text p + p {
	margin-top: var(--space-4, 16px);
}

/* Works */
.front-works__inner {
	display: grid;
	gap: var(--space-20, 80px);
}

/* Quality */
.front-quality__header {
	max-width: 760px;
	margin: 0 auto var(--space-10, 40px);
	text-align: center;
}

.front-quality__text {
	margin-top: var(--space-6, 24px);
}

.front-quality__grid {
	display: grid;
	gap: var(--space-1, 2px);
	grid-template-columns: 1fr;
}

.quality-card {
	overflow: hidden;
}

.quality-card__link {
	position: relative;
	display: block;
	color: inherit;
}

.quality-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	min-height: 280px;
	background: var(--color-bg-card, #f0eee7);
}

.quality-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quality-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6, 24px);
	background: rgba(0, 0, 0, 0.4);
	color: var(--color-text-onDark, #ffffff);
	transition: background .3s;
}
.quality-card__link:hover .quality-card__overlay {
	background: rgba(0, 0, 0, 0.6);
}

.quality-card__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-6, 24px);
	max-width: 22em;
	text-align: center;
}

.quality-card__title {
	margin-top: var(--space-20, 80px);
	font-family: var(--typography-fontFamily-serif, "Noto Serif JP", serif);
	font-size: clamp(2.4rem, 4vw, var(--typography-fontSize-sectionTitle2, 40px));
	font-weight: var(--typography-fontWeight-bold, 700);
	line-height: 1.1;
}

.quality-card__caption {
	margin: 0 0 var(--space-4, 16px);
	font-size: var(--typography-fontSize-tab, 16px);
	line-height: 1.6;
}
/* Land */
.front-land {
	padding: 0;
}

.front-land__header {
	padding: var(--space-20, 80px) 0 var(--space-6, 24px);
	background: var(--color-bg-default, #fefefe);
	text-align: center;
}

.front-land__header-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: -13em;
}

.front-land__subtitle {
	margin: 0 0 var(--space-4, 16px);
	font-family: var(--typography-fontFamily-serif, "Noto Serif JP", serif);
	font-size: var(--typography-fontSize-tab, 16px);
	line-height: 1;
	color: var(--color-palette-gray-500, #999999);
}

.front-land__vertical {
	display: inline-flex;flex-direction: column-reverse;
	gap: var(--space-0, 0);
	margin: 0;
	font-family: var(--typography-fontFamily-serif, "Noto Serif JP", serif);
	font-size: var(--typography-fontSize-sectionTitle, 32px);
	line-height: 1.2;text-align: left;
	letter-spacing: .5em;
	writing-mode: vertical-rl;
}

.front-land__vertical-line {
	margin: 0;
}

.front-land__body {
	padding: var(--space-16, 64px) 0 var(--space-20, 80px);
	background: var(--color-bg-land, #f7f5ea);
}

.front-land__inner {
	display: grid;
	gap: var(--space-20, 80px);
	align-items: center;
}

.front-land__media img {
	display: block;
	width: 100%;
	object-fit: cover;
	aspect-ratio: 6 / 5;
}

/* About */
.front-about__inner {
	display: grid;
	gap: var(--space-10, 40px);
	align-items: center;
}

.front-about__media img {
	display: block;
	width: 100%;
	border-radius: var(--radius-card, 5px);
	object-fit: cover;
}

/* Events */
.front-events__inner {
}

.front-events__inner .section-heading {
	position: relative;
	padding-bottom: var(--space-6, 24px);
	margin-bottom: var(--space-10, 40px);
}

.front-events__inner .section-heading::before,
.front-events__inner .section-heading::after {
	content: "";position: absolute;left: 0;top: var(--space-6, 24px);
	width: min(395px, 100%);
	height: 1px;
	background: var(--color-border-default, #cfd0d4);
}
.front-events__inner .section-heading::after {
	left: auto;right: 0;
}

.front-events__grid {
	margin-bottom: var(--space-8, 32px);
}

.front-events__action {
	display: flex;
	justify-content: center;
}

/* CTA Panel */
.front-cta-panel {
	padding: var(--space-30, 120px) var(--space-4, 16px) var(--space-4, 16px);
}
.front-cta-panel .wrap {
	padding: 0;
}

.front-cta-panel__grid {
	display: grid;
	gap: var(--space-3, 12px);
	grid-template-columns: 1fr;
}

.cta-panel {
	position: relative;
	min-height: 353px;
	overflow: hidden;
}

.cta-panel__link {
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: 353px;
	color: var(--color-text-onDark, #ffffff);
}

.cta-panel__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cta-panel__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.cta-panel__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.cta-panel__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.4);
	transition: background .3s;
}

.cta-panel__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--space-10, 40px) 0;
	text-align: center;
}

.cta-panel__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-4, 16px);
	width: var(--space-6, 24px);
	line-height: 0;
}

.cta-panel__icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.cta-panel__title {
	font-family: var(--typography-fontFamily-serif, "Noto Serif JP", serif);
	font-size: var(--typography-fontSize-sectionSubtitle, 24px);
	font-weight: 600;line-height: 1;
	margin-bottom: var(--space-12, 48px);
}

.cta-panel__text {
	margin-bottom: var(--space-8, 32px);
	font-size: var(--typography-fontSize-body, 16px);
}

.cta-panel__text p {
	line-height: 1.6;
}
/* Responsive */
@media (max-width: 767px) {
	.front-section {
		padding: var(--space-16, 64px) 0;
	}

	/* Hero */
	.front-hero {
		min-height: 650px;
	}

	.front-hero__inner {
		justify-content: center;
		padding-block: var(--space-16, 64px) calc(70px + var(--space-8, 32px));
	}

	/* Concept */
	.front-concept {
		padding-top: var(--space-10, 40px);
	}

	.front-concept__inner {
		gap: var(--space-8, 32px);
	}

	.front-concept__media {
		margin-inline: calc(-1 * var(--wrap-gutter));
	}

	.front-concept__media img {
		max-width: none;
		width: min(219px, 56vw);
		border-radius: 0;
	}

	.front-concept__text,
	.front-works__text,
	.front-about__text,
	.front-land__text {
		max-width: none;
	}

	/* Works */
	.front-works__inner {
		gap: var(--space-10, 40px);
	}

	.front-works__grid {
		gap: var(--space-8, 32px);
		margin-inline: calc(-1 * var(--wrap-gutter));
	}

	.front-works__grid .card__body {
		padding-inline: var(--wrap-gutter);
	}

	.front-works__action {
		display: flex;
		justify-content: flex-start;
	}

	/* Quality */
	.front-quality__header {
		margin-bottom: var(--space-8, 32px);
	}

	.quality-card__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-6, 24px);
		max-width: 22em;
		text-align: center;
	}

	.front-quality__grid {
		gap: 0;
		margin-inline: calc(-1 * var(--wrap-gutter));
	}

	.quality-card {
		border-radius: 0;
	}

	.quality-card__media {
		min-height: 263px;
	}

	.quality-card__title {
		margin-top: 0;
	}

	/* Land */
	.front-land__header {
		position: relative;
		padding: var(--space-16, 64px) 0 var(--space-6, 24px);
	}

	.front-land__header-inner {
		margin-bottom: -12em;
		min-height: 25rem;
	}

	.front-land__vertical {
		letter-spacing: .4em;
	}

	.front-land__body {
		padding-top: 180px;padding-bottom: 0;
	}

	.front-land__inner {
		gap: var(--space-8, 32px);
	}
	.front-land__subtitle {
		display: block;width: 100%;
	}

	.front-land__media {
		margin: 0 -20px;
	}

	/* About */
	.front-about__inner {
		gap: var(--space-8, 32px);
	}

	.front-about__media img {
		border-radius: 0;
	}

	/* Events */
	.front-events__grid {
		gap: var(--space-8, 32px);
	}

	.front-events__inner .section-heading::before,
	.front-events__inner .section-heading::after {
		width: calc(50% - 6em);
	}

	/* CTA panel */
	.front-cta-panel {
		padding: var(--space-16, 64px) 0 0;
	}

	.front-cta-panel .wrap {
		padding-inline: 0;
	}

	.front-cta-panel__grid {
		gap: 1px;
	}

	.cta-panel,
	.cta-panel__link {
		min-height: 300px;
	}

}

@media (min-width: 768px) {

	.front-concept__inner {
		grid-template-columns: minmax(280px, 400px) 500px;
	}
	.front-concept__inner .front-concept__content {
		margin-top: var(--space-40, 160px);
	}

	.front-works__inner {
		grid-template-columns: minmax(280px, 420px) 1fr;
		align-items: start;
	}

	.front-works__grid {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.front-works__action {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
	}

	.front-quality__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.front-land__header {
		padding-bottom: var(--space-10, 40px);
	}

	.front-land__vertical {
		margin-bottom: calc(-1 * var(--space-12, 48px));
	}

	.front-land__body {
		padding-top: var(--space-30, 120px);
		padding-bottom: var(--space-30, 120px);
	}

	.front-land__inner {
		grid-template-columns: minmax(45%, 1fr) minmax(30%, 480px);
		align-items: center;
	}

	.front-about__inner {
		grid-template-columns: minmax(280px, 500px) 1fr;
	}

	.front-events__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-30, 120px) var(--space-12, 48px);
	}

	.front-cta-panel__grid {
		grid-template-columns: repeat(var(--cta-panel-cols, 3), minmax(0, 1fr));
	}
	.cta-panel__link:hover .cta-panel__overlay {
		background: rgba(0, 0, 0, 0.6);
	}
}

@media (min-width: 1024px) {
	.front-works__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}