@charset "UTF-8";
/* ==========================================================================
   various-innovation / animation.css
   読み込みアニメーション（ローダー）とサイト全体の動き
   ・html.js が付いている時だけ要素を隠す（JSが動かない環境では普通に表示）
   ・OSの「視差効果を減らす」設定時は動きを止めて表示
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
}

/* ==========================================================================
   ローダー
   ========================================================================== */
.c-loader { display: none; }

.js .c-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--noise), var(--c-green);
  color: var(--c-white);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-inout) .2s, visibility 0s 1.2s;
  /* 万一JSが止まっても6秒後には自動で消える */
  animation: loader-failsafe .6s 6s forwards;
}
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

.js .is-loaded .c-loader,
.js.is-loaded .c-loader {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}

/* ローディング中はスクロールさせない */
.js:not(.is-loaded) body { overflow: hidden; }

.c-loader__inner {
  position: relative;
  display: grid;
  place-items: center;
  width: 320px;
  height: 320px;
  transition: opacity .4s ease, transform .8s var(--ease-inout);
}
.is-loaded .c-loader__inner { opacity: 0; transform: translateY(-40px); }

/* 同心円（ABOUTの装飾と同じモチーフ） */
.c-loader__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: loader-rings-rotate 14s linear infinite;
}
.c-loader__rings circle {
  fill: none;
  stroke: url(#loader-ring);
  stroke-width: .8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: loader-ring-draw 1.6s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * .09s);
}
@keyframes loader-ring-draw { to { stroke-dashoffset: 0; } }
@keyframes loader-rings-rotate { to { transform: rotate(360deg); } }

/* ロゴ（1文字ずつ浮かび上がる） */
.c-loader__logo {
  position: relative;
  font-family: var(--ff-en);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: .12em;
  text-align: center;
  white-space: nowrap;
}
.c-loader__word { display: block; }
.c-loader__logo span span {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(.4em);
  animation: loader-letter 1s var(--ease-out) forwards;
  animation-delay: calc(.35s + var(--i) * .045s);
}
@keyframes loader-letter { to { opacity: 1; filter: blur(0); transform: none; } }

/* 金色の進行ライン（実際の読み込み状況に合わせて伸びる） */
.c-loader__bar {
  position: absolute;
  bottom: 74px;
  left: 50%;
  width: 120px;
  height: 1px;
  margin-left: -60px;
  overflow: hidden;
  background: rgba(255, 255, 255, .15);
  opacity: 0;
  animation: loader-fade .6s .9s forwards;
}
.c-loader__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform .4s ease-out;
}
.c-loader__copy {
  position: absolute;
  bottom: 38px;
  font-family: var(--ff-mincho);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--c-beige);
  opacity: 0;
  animation: loader-fade .8s 1.1s forwards;
}
@keyframes loader-fade { to { opacity: 1; } }

/* 2ページ目以降（同じセッション内）は短く */
.is-quick .c-loader__inner { display: none; }
.js.is-quick .c-loader { transition: opacity .5s ease .1s, visibility 0s .6s; clip-path: none; }
.js.is-quick.is-loaded .c-loader { opacity: 0; clip-path: none; }

@media (max-width: 1023px) {
  .c-loader__inner { width: 260px; height: 260px; }
  .c-loader__logo { font-size: 28px; }
  .c-loader__bar { bottom: 58px; }
  .c-loader__copy { bottom: 26px; font-size: 11px; }
}

/* ==========================================================================
   ヘッダー・FV（ローダーが開くのに合わせて登場）
   ========================================================================== */
.js .l-header__logo,
.js .l-nav {
  opacity: 0;
  translate: 0 -12px;
}
.js .l-nav {
  transition: top .4s var(--ease), right .4s var(--ease), padding .4s var(--ease), background-color .4s, border-color .4s,
              opacity .9s ease 1.2s, translate .9s var(--ease-out) 1.2s;
}
.js .l-header__logo { transition: opacity .9s ease 1.1s, translate .9s var(--ease-out) 1.1s; }
.is-loaded .l-header__logo,
.is-loaded .l-nav { opacity: 1; translate: 0 0; }
/* スクロール後のナビの変形は遅延なしで */
.is-loaded.is-scrolled-once .l-nav {
  transition: top .4s var(--ease), right .4s var(--ease), padding .4s var(--ease), background-color .4s, border-color .4s, opacity .4s, translate .4s;
}

/* 動画：大きく写った状態からゆっくり引いていく */
.js .p-fv__media { clip-path: inset(6% 4% 6% 4% round 20px); }
.js .p-fv__video { transform: scale(1.18); }
.js .p-fv__media,
.js .p-fv__video { transition: clip-path 1.8s var(--ease-inout) .25s, transform 2.6s var(--ease-out) .25s; }
.is-loaded .p-fv__media { clip-path: inset(0 0 0 0 round 20px); }
.is-loaded .p-fv__video { transform: scale(1); }

/* ロゴ：1文字ずつせり上がる（JSで文字を分割） */
.js .p-fv__logo .u-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%) rotate(4deg);
  transform-origin: left bottom;
  transition: opacity 1s ease, transform 1.2s var(--ease-out);
  transition-delay: calc(.9s + var(--i) * .04s);
}
.is-loaded .p-fv__logo .u-char { opacity: 1; transform: none; }
.js .p-fv__logo-line::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--ease-inout) 1.5s;
}
.is-loaded .p-fv__logo-line::after { transform: scaleX(1); }

.js .p-fv__copy-sub,
.js .p-fv__copy-main,
.js .p-fv__scroll {
  opacity: 0;
  filter: blur(6px);
  translate: 0 16px;
  transition: opacity 1.2s ease, filter 1.2s ease, translate 1.2s var(--ease-out);
}
.js .p-fv__copy-sub { transition-delay: 1.4s; }
.js .p-fv__copy-main { transition-delay: 1.6s; }
.js .p-fv__scroll { transition-delay: 2s; }
.is-loaded .p-fv__copy-sub,
.is-loaded .p-fv__copy-main,
.is-loaded .p-fv__scroll { opacity: 1; filter: blur(0); translate: 0 0; }

/* SCROLL DOWN の矢印 */
.p-fv__scroll .c-circle-btn { overflow: hidden; }
.p-fv__scroll .c-circle-btn svg { animation: scroll-arrow 2.4s var(--ease-inout) infinite; }
@keyframes scroll-arrow {
  0%   { transform: translateY(-140%); opacity: 0; }
  30%  { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(140%); opacity: 0; }
}

/* ==========================================================================
   スクロールで現れる要素（JSで .is-inview を付与）
   ========================================================================== */
/* 共通：ふわっと浮かび上がる */
.js [data-anim="up"] {
  opacity: 0;
  translate: 0 40px;
  transition: opacity 1.2s ease, translate 1.2s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-anim="up"].is-inview { opacity: 1; translate: 0 0; }

/* 見出し：英字が下からせり上がり、和文が続く */
.js .c-title__en,
.js .c-title__ja { transition-delay: var(--d, 0s); }
.js [data-anim="title"] .c-title__en {
  clip-path: inset(0 0 100% 0);
  translate: 0 .5em;
  transition: clip-path 1.2s var(--ease-out), translate 1.2s var(--ease-out);
}
.js [data-anim="title"] .c-title__ja {
  opacity: 0;
  letter-spacing: .6em;
  transition: opacity 1.2s ease .35s, letter-spacing 1.6s var(--ease-out) .35s;
}
.js [data-anim="title"].is-inview .c-title__en { clip-path: inset(-10% 0 -10% 0); translate: 0 0; }
.js [data-anim="title"].is-inview .c-title__ja { opacity: 1; letter-spacing: .3em; }

/* 写真：下から幕が上がるように現れ、少しズームが戻る */
.js [data-anim="photo"] {
  clip-path: inset(100% 0 0 0 round 6px);
  scale: 1.08;
  transition: clip-path 1.4s var(--ease-inout), scale 2s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-anim="photo"].is-inview { clip-path: inset(0 0 0 0 round 6px); scale: 1; }

/* イラスト：ぼかしから浮かび上がる */
.js [data-anim="fade"] {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1.6s ease, filter 1.6s ease;
  transition-delay: var(--d, 0s);
}
.js [data-anim="fade"].is-inview { opacity: 1; filter: blur(0); }

/* ABOUTの斜め線：線が引かれる */
.js .p-about__deco-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s var(--ease-inout) .6s;
}
.js .p-about__deco.is-inview .p-about__deco-line { stroke-dashoffset: 0; }

/* ABOUTの同心円：広がって現れ、ゆっくり回り続ける */
.js .p-about__circles {
  opacity: 0;
  scale: .6;
  transition: opacity 2s ease, scale 2.4s var(--ease-out);
}
.js .p-about__circles.is-inview { opacity: .5; scale: 1; }
.p-about__circles { animation: circles-rotate 40s linear infinite; }
@keyframes circles-rotate { to { rotate: 360deg; } }

/* SERVICEの縦線：上から伸びる */
.js .p-service__line {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 2s var(--ease-inout) .4s;
}
.js .p-service__line.is-inview { transform: scaleY(1); }

/* ニュース・会社概要の区切り線：左から伸びる */
.js .p-news__item,
.js .p-company__row { position: relative; }
.js .p-news__item[data-anim] { border-bottom-color: transparent; }
.js .p-news__item[data-anim]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgba(255, 255, 255, .3);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease-inout);
  transition-delay: calc(var(--d, 0s) + .3s);
}
.js .p-news__item[data-anim].is-inview::after { transform: scaleX(1); }

/* フッター */
.js .l-footer__box[data-anim="up"] { translate: 0 60px; }

/* ==========================================================================
   視差効果（JSで --py を更新）
   ========================================================================== */
[data-parallax] { translate: 0 var(--py, 0px); }
.js [data-anim="up"][data-parallax].is-inview { translate: 0 var(--py, 0px); }

/* ==========================================================================
   ホバー
   ========================================================================== */
.l-nav__list a,
.l-footer__list a { position: relative; }
.l-nav__list a::after,
.l-footer__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: .2em;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease-out);
}
.l-nav__list a:hover::after,
.l-footer__list a:hover::after { transform: scaleX(1); transform-origin: left center; }
.l-nav__list a:hover,
.l-footer__list a:hover { opacity: 1; }

.c-mail-btn svg { transition: transform .6s var(--ease-out); }
.c-mail-btn:hover svg { transform: rotate(-12deg) scale(1.06); }

.c-circle-link .c-circle-btn { transition: background-color .3s, transform .6s var(--ease-out); }
.c-circle-link:hover .c-circle-btn { transform: scale(1.06); }

/* SP：FVの写真は角丸なし・上から開く */
@media (max-width: 1023px) {
  .js .p-fv__media { clip-path: inset(0 0 100% 0); }
  .is-loaded .p-fv__media { clip-path: inset(0 0 0 0); }
}

/* ==========================================================================
   動きを減らす設定
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .c-loader { transition: opacity .3s, visibility 0s .3s; clip-path: none !important; }
  .js.is-loaded .c-loader { opacity: 0; }
  .c-loader__rings, .p-about__circles,
  .p-fv__scroll .c-circle-btn svg { animation: none !important; }
  .js [data-anim], .js [data-anim] *,
  .js .p-fv__media, .js .p-fv__video, .js .p-fv__logo .u-char,
  .js .p-fv__copy-sub, .js .p-fv__copy-main, .js .p-fv__scroll,
  .js .l-header__logo, .js .l-nav,
  .js .p-about__circles, .js .p-service__line, .js .p-about__deco-line {
    clip-path: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
    transition-duration: .01ms !important;
  }
  .js .p-about__deco-line { stroke-dashoffset: 0; }
  .js [data-anim], .js .p-fv__logo .u-char, .js .p-fv__copy-sub, .js .p-fv__copy-main,
  .js .p-fv__scroll, .js .l-header__logo, .js .l-nav, .js [data-anim="title"] .c-title__ja { opacity: 1; }
  .js .p-about__circles { opacity: .5; }
  [data-parallax] { translate: none; }
}