/* スクロール連動アニメーション(reveal.js が .reveal / .is-inview を付与) */
.js-reveal .reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity .8s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
		transform .8s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.js-reveal .reveal.is-inview {
	opacity: 1;
	transform: none;
}

/* ABOUT:写真・パネルが出たあと、黒い帯が左から右へカーテンのように開く */
.js-reveal .about__catch,
.js-reveal .about__body {
	clip-path: inset(0 100% 0 0);
	transition: clip-path .9s cubic-bezier(.65, 0, .35, 1);
}
.js-reveal .about__main.is-inview .about__catch,
.js-reveal .about__main.is-inview .about__body {
	clip-path: inset(0 0 0 0);
}
.js-reveal .about__main.is-inview .about__catch--1 { transition-delay: 1s; }
.js-reveal .about__main.is-inview .about__catch--2 { transition-delay: 1.3s; }
.js-reveal .about__main.is-inview .about__body     { transition-delay: 1.6s; }

/* PRICE:見出し・背景が出たあと、黒い説明ボックスが左から右へ開く */
.js-reveal .price__box {
	clip-path: inset(0 100% 0 0);
	transition: clip-path .9s cubic-bezier(.65, 0, .35, 1);
}
.js-reveal .price__inner.is-inview .price__box {
	clip-path: inset(0 0 0 0);
	transition-delay: 1s;
}

/* PROBLEMS:お悩みボックスが上からふわっと、1つずつ順番に降りてくる */
.js-reveal .problems__item {
	opacity: 0;
	transform: translateY(-24px);
	transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
}
.js-reveal .problems__list.is-inview .problems__item {
	opacity: 1;
	transform: none;
}
.js-reveal .problems__list.is-inview .problems__item:nth-child(1) { transition-delay: .3s; }
.js-reveal .problems__list.is-inview .problems__item:nth-child(2) { transition-delay: .6s; }
.js-reveal .problems__list.is-inview .problems__item:nth-child(3) { transition-delay: .9s; }
.js-reveal .problems__list.is-inview .problems__item:nth-child(4) { transition-delay: 1.2s; }
.js-reveal .problems__list.is-inview .problems__item:nth-child(5) { transition-delay: 1.5s; }
.js-reveal .problems__list.is-inview .problems__item:nth-child(6) { transition-delay: 1.8s; }

/* ヘッダー:ページ読み込み時のみ、上からふわっと降りてくる(JS不要) */
@keyframes header-drop {
	from {
		opacity: 0;
		transform: translateY(-24px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.site-header__logo,
.site-header__toggle {
	animation: header-drop .9s cubic-bezier(.22, .61, .36, 1) .1s both;
}

/* ボタン・ナビはPCのみ(SPはメニュー開閉のたびに再生されるのを避ける)
   ロゴ → ボタン3つ → ナビ項目 の順に、1つずつ降りてくる */
@media (min-width: 768px) {
	.site-header__cta .btn-outline,
	.site-header__nav li {
		animation: header-drop .8s cubic-bezier(.22, .61, .36, 1) both;
	}
	.site-header__cta .btn-outline:nth-child(1) { animation-delay: .4s; }
	.site-header__cta .btn-outline:nth-child(2) { animation-delay: .55s; }
	.site-header__cta .btn-outline:nth-child(3) { animation-delay: .7s; }
	.site-header__nav li:nth-child(1) { animation-delay: .9s; }
	.site-header__nav li:nth-child(2) { animation-delay: 1s; }
	.site-header__nav li:nth-child(3) { animation-delay: 1.1s; }
	.site-header__nav li:nth-child(4) { animation-delay: 1.2s; }
	.site-header__nav li:nth-child(5) { animation-delay: 1.3s; }
	.site-header__nav li:nth-child(6) { animation-delay: 1.4s; }
	.site-header__nav li:nth-child(7) { animation-delay: 1.5s; }
}

/* ヒーロー:読み込み時に上から順番に表示(中央寄せの transform と干渉しないよう translate を使う) */
@keyframes hero-rise {
	from {
		opacity: 0;
		translate: 0 28px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

.hero__label,
.hero__title,
.hero__lead,
.hero__tags,
.hero__cta {
	animation: hero-rise 1s cubic-bezier(.22, .61, .36, 1) both;
}
.hero__label { animation-delay: .4s; }
.hero__title { animation-delay: .6s; }
.hero__lead  { animation-delay: .9s; }
.hero__tags  { animation-delay: 1.1s; }
.hero__cta   { animation-delay: 1.4s; }

/* 「図面」に黄色の下線を引く */
.hero__title em {
	position: relative;
}
.hero__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 4px;
	background: var(--color-yellow);
	transform: scaleX(0);
	transform-origin: left;
	/* 1.6秒後に引かれ、5秒後にフェードアウトして消える */
	animation:
		hero-underline .7s cubic-bezier(.65, 0, .35, 1) 1.6s forwards,
		hero-underline-out .6s cubic-bezier(.65, 0, .35, 1) 5s forwards;
}
@keyframes hero-underline {
	to { transform: scaleX(1); }
}
/* 右端を基準に、左から縮んで消える */
@keyframes hero-underline-out {
	from {
		transform-origin: right;
		transform: scaleX(1);
	}
	to {
		transform-origin: right;
		transform: scaleX(0);
	}
}

/* お問い合わせボタンの矢印を小さく動かす */
@keyframes hero-arrow {
	0%, 100% { right: 20px; }
	50%      { right: 14px; }
}
.hero__cta-btn::after {
	animation: hero-arrow 1.6s ease-in-out 2.6s infinite;
}

@media (prefers-reduced-motion: reduce) {
	.hero__label,
	.hero__title,
	.hero__lead,
	.hero__tags,
	.hero__cta,
	.hero__cta-btn::after {
		animation: none;
	}
	.hero__title em::after {
		animation: none;
		transform: scaleX(1);
	}
	.js-reveal .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.site-header__logo,
	.site-header__toggle,
	.site-header__cta .btn-outline,
	.site-header__nav li {
		animation: none;
	}
}