/* ===== animation.css ｜ 全モーションを隔離（animationスキル準拠） =====
   強度: 控えめ＋（マーキー・Why切替はFigma指定）。easing/duration は patterns.md の推奨レンジ内。
   初期非表示は html.js 配下のみ（no-JSでも全コンテンツが見える）。reduced-motion で全停止。 */
:root{
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out-quart:cubic-bezier(.76,0,.24,1);
}
html{scroll-behavior:smooth;scroll-padding-top:80px}

/* ---- 1. マーキー（Figma get_motion_context: 24s linear 無限） ---- */
@keyframes fv-marquee{from{transform:translateX(0)}to{transform:translateX(-2079px)}}
@keyframes hojokin-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 44px))}}
.fv__track{animation:fv-marquee 24s linear infinite;will-change:transform}
.hojokin__marquee-run{animation:hojokin-marquee 48s linear infinite;will-change:transform}

/* ---- 1b. 採用ページ Join Us 横流し（hojokin と同じ作法: グループ複製を -100%-gap まで流す。48s linear） ---- */
@keyframes joinus-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 16px))}}
.joinus__run{animation:joinus-marquee 48s linear infinite;will-change:transform}
/* ---- 1c. 採用ページ モーダル（<dialog>）: 開くときパネルが 8px 下からフェードイン。閉じるは JS で .is-closing を付けて逆再生 ---- */
@keyframes modal-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes modal-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
.modal[open] .modal__panel{animation:modal-in .35s var(--ease-out-quint) both}
.modal[open]::backdrop{animation:backdrop-in .3s var(--ease-out-quint) both}
.modal.is-closing .modal__panel{animation:modal-out .25s var(--ease-out-quart) both}
.modal.is-closing::backdrop{animation:backdrop-in .25s var(--ease-out-quart) reverse both}

/* ---- 2. FV自動再生（IOを待たないCSSアニメ。LCP保護） ---- */
@keyframes fv-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fv-fade{from{opacity:0}to{opacity:1}}
.js .fv__headline{animation:fv-in .9s var(--ease-out-expo) .15s both}
.js .fv__sub{animation:fv-in .9s var(--ease-out-expo) .45s both}
.js .fv__marquee{animation:fv-fade .8s var(--ease-out-quint) .05s both}

/* ---- 3. スクロールリビール（IO・1回きり・stagger 0.08s 上限0.6s） ---- */
.js .js-reveal,
.js .js-reveal-group > *{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out-quint),transform .8s var(--ease-out-quint);transition-delay:var(--reveal-delay,0s)}
.js .js-reveal.is-inview,
.js .js-reveal-group.is-inview > *{opacity:1;transform:none}
.js .why__photo.js-reveal{--reveal-delay:.1s}
.js .contact__side.js-reveal{--reveal-delay:.12s}
.js .contact__tel.js-reveal{--reveal-delay:.2s}
.js .intv-card.js-reveal:nth-child(3n+2){--reveal-delay:.1s}.js .intv-card.js-reveal:nth-child(3n){--reveal-delay:.2s}
.js .recruit__photo--2.js-reveal{--reveal-delay:0s}.js .recruit__photo--4.js-reveal{--reveal-delay:.1s}.js .recruit__photo--3.js-reveal{--reveal-delay:.2s}.js .recruit__photo--1.js-reveal{--reveal-delay:.3s}
/* 画像のマスクリビール（Company写真：左から拭き取り＋内側scale） */
.js .js-reveal-mask{clip-path:inset(0 100% 0 0 round 0 5px 5px 0);transition:clip-path 1.1s var(--ease-out-quint)}
.js .js-reveal-mask img{transform:scale(1.12);transition:transform 1.1s var(--ease-out-quint)}
.js .js-reveal-mask.is-inview{clip-path:inset(0 0 0 0 round 0 5px 5px 0)}
.js .js-reveal-mask.is-inview img{transform:none}

/* ---- 4. Why MIZUTA 切り替え（写真クロスフェード・テキスト差し替え・装飾の移動） ---- */
.why__photo-img{transition:opacity .8s var(--ease-out-quint),transform .8s var(--ease-out-quint)}
.why__word{transition:opacity .5s var(--ease-out-quint),transform .5s var(--ease-out-quint),visibility 0s .5s;transform:translateY(12px)}
.why__word.is-active{transform:none;transition-delay:.1s,.1s,0s}
.why__deco{transition:transform 1s var(--ease-out-quint)}
/* Figma バリアント02〜05 の装飾位置（01との差分） */
.why.is-alt .why__deco--1{transform:translate(38.62px,0)}
.why.is-alt .why__deco--2{transform:translate(168.96px,112.57px)}
.why.is-alt .why__deco--3{transform:translate(89.45px,25.1px)}
.why__item{transition:color .3s var(--ease-out-quart)}

/* ---- 5. ホバー（往路 0.3〜0.45s / quint 統一）
        文字の「下から上へ回る」は base.css の .flip（main.js「5. 共通ホバー」が包む）。ここは色・矢印・塗りの動き ---- */
.btn{transition:background-color .35s var(--ease-out-quint),border-color .35s var(--ease-out-quint),color .35s var(--ease-out-quint)}
.btn__dl-col{transition:transform .35s var(--ease-out-quint)}
.btn-plus,.intv-card__btn,.modal__close,.header__cta,.contact__btn,.news-item,.gnav__link,.why__item,.hojokin__select,.footer__nav a,.footer__nav-links a,.footer__logo,.contact__tel-num,.why__pause{transition:background-color .35s var(--ease-out-quint),color .35s var(--ease-out-quint),opacity .35s var(--ease-out-quint),border-color .35s var(--ease-out-quint)}
.news-item__arrow img{transition:transform .35s var(--ease-out-quint)}
.service-card__img img{transition:transform .6s var(--ease-out-quint)}
/* A-5/A-6 右矢印: 右へ抜けて左から入り直す（yado-riki型）。transform ではなく translate を動かすので、
   ページ側の transform（.btn--back の scaleX(-1)・.btn__arrow--back の rotate 等）と衝突しない＝矢印が反転しない（B-4/B-5） */
@keyframes arrow-through{0%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}45%{translate:230% 0;opacity:0}50%{translate:-230% 0;opacity:0;animation-timing-function:var(--ease-out-quint)}55%{opacity:1}100%{translate:0 0}}
/* 戻るボタン（矢印が左向き）は左へ抜けて右から入り直す */
@keyframes arrow-through-back{0%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}45%{translate:-230% 0;opacity:0}50%{translate:230% 0;opacity:0;animation-timing-function:var(--ease-out-quint)}55%{opacity:1}100%{translate:0 0}}
.btn__arrow,.contact__btn-icon img{translate:0 0}
/* A-5 CTAの塗り: 疑似要素を下から上へ scaleY で塗り上げる（離すと上へ抜ける）。文字と矢印は isolation で塗りの上に */
.header__cta,.contact__btn{position:relative;isolation:isolate;overflow:hidden}
.header__cta::before,.contact__btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleY(0);transform-origin:top center;transition:transform .45s var(--ease-out-quint)}
.header__cta::before{background:var(--c-main)}      /* ヘッダーCTAは通常が橙なので、塗り色は紺（要確認: 濃橙 #e0721a に変える場合はここだけ） */
.contact__btn::before{background:var(--c-accent)}   /* Contact白ボタン: 白 → 橙 #F4801D、文字は白へ */
.contact__btn-label{transition:color .35s var(--ease-out-quint)}
/* A-8 ヘッダー「事業案内」の下向き矢印はホバーで回転 */
.gnav__arrow{transition:transform .4s var(--ease-out-quint)}
@media (hover:hover){
  .btn:hover{background:#0f3a82;border-color:#0f3a82}
  .btn--sub:hover{background:#fff;border-color:var(--c-main)}
  .btn--accent2:hover{background:#0090d4;border-color:#0090d4}
  .btn:hover .btn__arrow:not(.btn__arrow--down){animation:arrow-through .6s both}
  .btn.btn--back:hover .btn__arrow:not(.btn__arrow--down){animation-name:arrow-through-back} /* 上の行より詳細度を上げて勝たせる */
  .btn:hover .btn__dl-col{transform:translateY(2px)}
  .header__cta:hover::before,.contact__btn:hover::before{transform:scaleY(1);transform-origin:bottom center}
  .contact__btn:hover .contact__btn-label{color:var(--c-inverse)}
  .contact__btn:hover .contact__btn-icon img{animation:arrow-through .6s both}
  .header__logo:hover{opacity:.8}
  .gnav__link:hover{color:var(--c-main)}
  .gnav__link:hover .gnav__arrow{transform:rotate(180deg)}
  .news-item:hover{background:rgba(21,73,160,.05)}
  .news-item:hover .news-item__title{color:var(--c-main)}
  .news-item:hover .news-item__arrow img{transform:translateX(3px)}
  .service-card:hover .service-card__img img{transform:scale(1.05)}
  .why__item:hover{color:var(--c-main)}
  .why__pause:hover{color:var(--c-main)}
  .hojokin__select:hover{border-color:var(--c-main)}
  .contact__tel-num:hover{opacity:.7}
  /* 採用ページ: 職種ボタンは枠が紺に、インタビューカードは写真がわずかに拡大、閉じるボタンは濃紺 */
  .btn-plus:hover{border-color:var(--c-main)}
  .intv-card__btn:hover .intv-card__img img{transform:scale(1.03)}
  .modal__close:hover{background:#0f3a82}
}
.intv-card__img img{transition:transform .6s var(--ease-out-quint)}
.btn-plus:focus-visible,.intv-card__btn:focus-visible,.modal__close:focus-visible{outline:2px solid var(--c-main2);outline-offset:3px}
/* キーボード操作にも同じ表現 */
.btn:focus-visible .btn__arrow:not(.btn__arrow--down){animation:arrow-through .6s both}
.btn.btn--back:focus-visible .btn__arrow:not(.btn__arrow--down){animation-name:arrow-through-back}
.header__cta:focus-visible::before,.contact__btn:focus-visible::before{transform:scaleY(1);transform-origin:bottom center}
.contact__btn:focus-visible .contact__btn-label{color:var(--c-inverse)}
.gnav__link:focus-visible .gnav__arrow{transform:rotate(180deg)}
.btn:focus-visible,.header__cta:focus-visible,.contact__btn:focus-visible,.news-item:focus-visible,.gnav__link:focus-visible,.why__item:focus-visible,.why__photo:focus-visible,.hojokin__select:focus-visible,.why__pause:focus-visible{outline:2px solid var(--c-main2);outline-offset:3px}

/* ---- 5b. ホバー強化＋メガメニュー（2026-09-15 指摘「通常ボタンのhoverが分かりにくい／メガメニューにもhoverアニメを」）
        ボタン: 3px持ち上げ＋紺の影＋塗りをもう一段濃く。グロナビ: 下線が左から伸びる。
        メガメニュー: 開くときカードが順に浮き上がる／写真がゆっくり寄る／矢印が抜ける ---- */
.btn,.fr-btn,.hk-btn-grad,.hk-linkbtn{translate:0 0;box-shadow:0 0 0 rgba(21,73,160,0)}
.btn{transition:background-color .35s var(--ease-out-quint),border-color .35s var(--ease-out-quint),color .35s var(--ease-out-quint),translate .35s var(--ease-out-quint),box-shadow .35s var(--ease-out-quint)}
.fr-btn,.hk-btn-grad,.hk-linkbtn{transition:opacity .35s var(--ease-out-quint),background-color .35s var(--ease-out-quint),translate .35s var(--ease-out-quint),box-shadow .35s var(--ease-out-quint)}
.gnav__link{position:relative}
.gnav__link::after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;border-radius:1px;background:var(--c-main);transform:scaleX(0);transform-origin:right center;transition:transform .4s var(--ease-out-quint)}
.gnav__link[aria-expanded="true"]::after,.gnav__link:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.mega__head,.mega__item{opacity:0;translate:0 10px;transition:opacity .45s var(--ease-out-quint),translate .45s var(--ease-out-quint)}
.mega.is-open .mega__head,.mega.is-open .mega__item{opacity:1;translate:0 0}
.mega.is-open .mega__item:nth-child(1){transition-delay:.06s}.mega.is-open .mega__item:nth-child(2){transition-delay:.12s}.mega.is-open .mega__item:nth-child(3){transition-delay:.18s}
.mega__img img{transition:transform .7s var(--ease-out-quint)}
.mega__icon{transition:background-color .35s var(--ease-out-quint)}
.mega__icon svg{translate:0 0}
.mega__sub-arrow{transition:translate .35s var(--ease-out-quint)}
@media (hover:hover){
  .btn:hover{background:#0c3070;border-color:#0c3070}
  .btn:hover,.fr-btn:hover,.hk-btn-grad:hover,.hk-linkbtn:hover{translate:0 -3px;box-shadow:0 10px 22px rgba(21,73,160,.28)}
  .btn--sub:hover,.btn--back:hover,.hk-linkbtn:hover{box-shadow:0 10px 22px rgba(21,73,160,.16)}
  .gnav__link:hover::after{transform:scaleX(1);transform-origin:left center}
  .news-item:hover{background:rgba(21,73,160,.08)}
  .mega__main:hover .mega__img img{transform:scale(1.06)}
  .mega__main:hover .mega__icon{background:#0c3070}
  .mega__main:hover .mega__icon svg{animation:arrow-through .6s both}
  .mega__sub-link:hover .mega__sub-arrow{translate:4px 0}
}
.mega__main:focus-visible .mega__icon svg{animation:arrow-through .6s both}

/* ---- 6. reduced-motion（既定は即時表示。動きは消しても情報は残す） ---- */
@media (prefers-reduced-motion:reduce){
  .js .js-reveal,.js .js-reveal-group > *,.js .js-reveal-mask img{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .js .js-reveal-mask{clip-path:none!important;transition:none!important}
  .js .fv__headline,.js .fv__sub,.js .fv__marquee{animation:none!important}
  .fv__track,.hojokin__marquee-run,.joinus__run{animation-play-state:paused!important}
  .modal[open] .modal__panel,.modal[open]::backdrop,.modal.is-closing .modal__panel,.modal.is-closing::backdrop{animation:none!important}
  .intv-card__img img{transition:none!important}
  .why__photo-img,.why__word,.why__deco,.btn,.btn__arrow,.btn__dl-col,.service-card__img img{transition:none!important}
  /* レーン1追加分: テキストロール・矢印・CTA塗り・ヘッダー矢印・パンくず下線・SPメニュー/トグル・下層タイトルのグラデ */
  .flip__t,.flip::after,.header__cta::before,.contact__btn::before,.contact__btn-label,.gnav__arrow,.breadcrumb a::after,.spnav,.spnav__acc,.spnav__sub,.spnav__plus::after,.header__menu-icon span{transition:none!important}
  .btn__arrow,.contact__btn-icon img{animation:none!important}
  .lfv__label,.lfv__en,.lfv__lead,.lfv__h1{animation:none!important;background:none!important;color:var(--c-text)!important}
  .btn,.fr-btn,.hk-btn-grad,.hk-linkbtn,.gnav__link::after,.mega__img img,.mega__icon,.mega__sub-arrow{transition:none!important}
  .mega__head,.mega__item{opacity:1!important;translate:none!important;transition:none!important}
  .mega__icon svg{animation:none!important}
  html{scroll-behavior:auto!important}
}
.no-motion .fv__track,.no-motion .hojokin__marquee-run,.no-motion .joinus__run{animation:none}