/*
 * スクロールリビール（IntersectionObserver + CSS keyframes方式）。
 * <html> に has-reveal があるときだけ要素を隠す（付け外しは inc/enqueue.php の futawa_output_reveal_init()）。
 * JSが動かない・scroll-reveal.js が読めないときは has-reveal が無いので、最初から全部見える。
 */
.has-reveal .js-fade-up,
.has-reveal .js-fade-in,
.has-reveal .js-fade-left,
.has-reveal .js-fade-right {
    opacity: 0;
}

.has-reveal .js-fade-up {
    transform: translateY(24px);
}

.has-reveal .js-fade-left {
    transform: translateX(-24px);
}

.has-reveal .js-fade-right {
    transform: translateX(24px);
}

.has-reveal .js-fade-up.is-inview {
    animation: base-fade-up 0.8s ease forwards;
}

.has-reveal .js-fade-in.is-inview {
    animation: base-fade-in 0.8s ease forwards;
}

.has-reveal .js-fade-left.is-inview {
    animation: base-fade-left 0.8s ease forwards;
}

.has-reveal .js-fade-right.is-inview {
    animation: base-fade-right 0.8s ease forwards;
}

@keyframes base-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes base-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes base-fade-left {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes base-fade-right {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

/*
 * 本文中の写真を横からスライドさせて入れる演出（ヒーロー・流れる写真帯には使わない）。
 * .js-fade-left/right（24px）より大きく動かし、「横から入ってくる」ことが分かるようにする。
 * 画面の外から入ってくる写真が横スクロールを生まないよう、親セクションに
 * overflow-x: clip を付けておくこと（事業内容・健康経営のセクションは設定済み）。
 */
.has-reveal .js-slide-left,
.has-reveal .js-slide-right {
    opacity: 0;
}

.has-reveal .js-slide-left {
    transform: translateX(-90px);
}

.has-reveal .js-slide-right {
    transform: translateX(90px);
}

.has-reveal .js-slide-left.is-inview {
    animation: base-slide-left 1s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}

.has-reveal .js-slide-right.is-inview {
    animation: base-slide-right 1s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}

@keyframes base-slide-left {
    from { opacity: 0; transform: translateX(-90px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes base-slide-right {
    from { opacity: 0; transform: translateX(90px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .has-reveal .js-slide-left,
    .has-reveal .js-slide-right,
    .has-reveal .js-fade-up,
    .has-reveal .js-fade-in,
    .has-reveal .js-fade-left,
    .has-reveal .js-fade-right {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ヘッダー fixed 時のシャドウ */
.c-header {
    box-shadow: none;
    transition: box-shadow var(--transition-base), background-color var(--transition-base);
}

.c-header.is-scrolled {
    box-shadow: 0 2px 12px rgba(22, 50, 79, 0.12);
}

/* ハンバーガーメニューのトランジション */
.c-header__hamburger span {
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.c-header__hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.c-header__hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.c-header__hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 899px) {
    .c-header__nav {
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-base), visibility var(--transition-base);
    }

    .c-header__nav.is-open {
        opacity: 1;
        visibility: visible;
    }
}

body.is-nav-open {
    overflow: hidden;
}

/* ヒーロークロスフェード */
.c-hero__slide {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.c-hero__slide.is-active {
    opacity: 1;
}

/*
 * ホームのヒーロー見出し。スクロール連動の .js-* と違い、読み込みと同時に動かす
 * （ファーストビューにあるので、スクロールを待つと表示されない）。日本語のサブは
 * 英字より遅らせて、2段の見出しが順に現れるようにする。サブページの見出しは動かさない。
 */
.c-hero:not(.c-hero--sub) .c-hero__title {
    animation: futawa-hero-title 2.4s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

/* 遅延1.6s＋2.4s＝4.0秒で2段とも表示しきる */
.c-hero:not(.c-hero--sub) .c-hero__title-sub {
    animation: futawa-hero-title 2.4s cubic-bezier(0.22, 0.7, 0.2, 1) 1.6s both;
}

@keyframes futawa-hero-title {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .c-hero:not(.c-hero--sub) .c-hero__title,
    .c-hero:not(.c-hero--sub) .c-hero__title-sub {
        animation: none;
    }
}