/* ============================================================
   style-front.css — トップページ専用スタイル
   style-eiken.css に続いて is_front_page() 時のみ読み込まれる
   ビル総合管理から工務まで、トータルサポート
   ============================================================
   目次
   [1] Page Loader            ← .page-loader（初回ローディング）
   [2] Top Catch              ← .top-catch キャッチ帯
   [3] Top Slider             ← .top-slider MV スライダー
   [4] Slide Catch & Panel    ← .ts-catch-wrap .ts-panel-*
   [5] Slide Arrow & Animation ← .ts-arrow @keyframes
   ============================================================ */

/* ============================================================
   [1] PAGE LOADER — トップページ初回ローディング（#js-page-loader）
   ============================================================ */
/* トップページ初回ローディング画面（JS で .is-done を付与しフェードアウト） */
.page-loader {
  --loader-intro-delay: 0.44s;
  --loader-sweep-loop: 2.2s;
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
  background: linear-gradient(160deg, var(--c-loader-start) 0%, var(--c-loader-mid) 38%, var(--c-loader-end) 100%);
  transition: opacity 0.55s ease, visibility 0.55s ease;

  &.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
.page-loader__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(var(--loader-logo-maxw, 240px), 48vw);
  max-height: clamp(56px, 18vw, 140px);
  margin: 0 0 var(--space-lg);
  object-fit: contain;
  flex-shrink: 0;
}
.page-loader__tagline {
  margin: 0 0 var(--space-md);
  max-width: min(100%, 92vw);
  font-weight: 700;
  color: var(--c-main);
}
.page-loader__company {
  margin: 0;
  max-width: min(100%, 92vw);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--c-text-dark);
  position: relative;
  display: inline-block;
}
/* 会社名のキラキラ光彩アニメーション要素 */
.page-loader__company-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  pointer-events: none;
  white-space: nowrap;

  &::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.5) 40%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.5) 60%,
      transparent 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px transparent;
    text-shadow: none;
    background-size: 480px 100%;
    background-repeat: no-repeat;
    background-position: -480px center;
    animation: page-loader-shine var(--loader-shine-duration, 2.5s) linear forwards;
    animation-delay: 0.2s;
  }
}

@keyframes page-loader-shine {
  0%   { background-position: -480px center; }
  100% { background-position: calc(100% + 480px) center; }
}

@media (max-width: 767px) {
  .page-loader__logo {
    margin-bottom: var(--space-md);
  }
}

/* ============================================================
   [2][3][4][5] TOP PAGE — キャッチ帯 / スライダー / ラベル / アニメーション
   ============================================================ */
/* ================================================
   上段キャッチ帯（高さ200px）
   背景画像の上にキャッチコピーを表示するエリア
   ================================================ */
.top-catch {
  padding-top: var(--header-h);
  min-height: 200px;
  background: var(--img-site-header, url(../images/bak-site-header.png)) center top / cover no-repeat var(--c-light);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.top-catch-inner {
  max-width: var(--inner);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-lg) 0 var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* 下段サブコピー */
/* 下段のグラデーションシャイン文字（--c-main 緑・光彩ループアニメ） */
.top-catch-lower {
  margin: 0;
  line-height: var(--lh-heading);
  text-align: center;
  letter-spacing: -0.01em;
  font-weight: 700;
  background: linear-gradient(
    90deg,
    var(--top-catch-lower-c, var(--c-main)) 0%,
    var(--top-catch-lower-c, var(--c-main)) 45%,
    var(--top-catch-lower-c, var(--c-main)) 48%,
    #fff 50%,
    var(--top-catch-lower-c, var(--c-main)) 52%,
    var(--top-catch-lower-c, var(--c-main)) 55%,
    var(--top-catch-lower-c, var(--c-main)) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shine var(--top-catch-shine-dur, 15s) linear infinite;
}

@keyframes shine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .top-catch-inner {
    padding: 0 var(--space-lg);
  }
}

@media (max-width: 1024px) {
  .top-catch-inner {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ================================================
   下段スライダー（高さ600px）
   中央画像幅=.inner(1160px)、両脇に隣スライドが見える
   ================================================ */
/* キャッチ帯（.top-catch）が ACF 未入力で非表示のとき、PC/タブレットでは
   キャッチ帯が担っていたヘッダー分の余白をスライダー側で確保し、固定ヘッダー下への潜り込みを防ぐ。
   SP（〜767px）は元々キャッチ帯が display:none で .top-slider に margin-top が付くため対象外。 */
@media (min-width: 768px) {
  .top-slider--no-catch {
    padding-top: var(--header-h);
  }
}

.top-slider {
  position: relative;
  height: 600px;
  overflow: hidden;

  /* Splide（トップ MV） */
  .splide__track {
    height: 100%;
    cursor: default;
  }

  .splide__list {
    height: 100%;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  /* 各スライド：画像実寸 1160px に合わせる（JS fixedWidth と一致） */
  .splide__slide {
    position: relative;
    width: var(--inner);
    max-width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: translateZ(0);
    clip-path: polygon(60px 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
    margin-right: -59px;

    /* 画像上の薄い黒オーバーレイ */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--c-black-a10);
      z-index: 1;
      pointer-events: none;
    }

    /* 緑グラデーション座布団（アクティブスライドのみ） */
    &.is-active::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 65%;
      height: 100%;
      z-index: 2;
      /* 立体感アップ：上から①微細テクスチャ ②右上の光沢 ③奥行き多段グラデの順に重ねる。
         マスク/clip-path（下記）で斜めカット形状内にのみ表示される */
      background:
        /* 画像を薄める半透明の緑（数値を上げるほど画像が薄くなる：0=そのまま / 1=完全に消える） */
        linear-gradient(rgba(0,149,76,0.75), rgba(0,149,76,0.75)),
        /* 緑グラデの上に重ねるオーバーレイ画像（左下基準・横幅も高さも緑いっぱいにピッタリ） */
        var(--img-back-web08, url("../images/back_web08.png")) left bottom / 100% 100% no-repeat,
        linear-gradient(to top right, transparent 55%, rgba(170,255,204,0.18) 100%),
        linear-gradient(120deg, rgb(9,166,74) 0%, rgb(9,166,74) 32%, var(--c-main) 64%, rgba(0,149,76,0) 100%);
      /* 右斜め境界（左上→右下）を波線にするSVGマスク。左の領域を白(不透明)で塗り、右境界を縦サイン波にする */
      -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M70,0%20Q89.1,15.6%2086,40%20Q82.9,64.5%20102,80%20Q121.1,95.6%20118,120%20Q114.9,144.5%20134,160%20Q153.1,175.6%20150,200%20L0,200%20L0,0%20Z'%20fill='white'/%3E%3C/svg%3E"),
        linear-gradient(to left, transparent 5%, black 30%);
      -webkit-mask-size: 100% 100%, 100% 100%;
      -webkit-mask-repeat: no-repeat, no-repeat;
      -webkit-mask-composite: source-in;
      mask-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M70,0%20Q89.1,15.6%2086,40%20Q82.9,64.5%20102,80%20Q121.1,95.6%20118,120%20Q114.9,144.5%20134,160%20Q153.1,175.6%20150,200%20L0,200%20L0,0%20Z'%20fill='white'/%3E%3C/svg%3E"),
        linear-gradient(to left, transparent 5%, black 30%);
      mask-size: 100% 100%, 100% 100%;
      mask-repeat: no-repeat, no-repeat;
      mask-composite: intersect;
      /* 左斜めは画像カット(60px固定)と一致させ、幅変更でズレないようにする */
      clip-path: polygon(60px 0, 100% 0, 88% 100%, 0 100%);
      pointer-events: none;
      /* 既定は非表示。移動中は隠し、テキストと同じタイミング（is-catch-in）でフェードインさせる */
      opacity: 0;
    }

    /* アクティブな1枚だけキャッチを表示（Splide が .is-active を付与） */
    &:not(.is-active) .ts-catch-wrap {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    &.is-active .ts-catch-wrap {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

  /* ================================================
     スライドナビゲーション：ドット（Splide pagination）
     ================================================ */
  .splide__pagination {
    display: none;
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    max-width: calc(100% - (var(--space-lg) + var(--space-sm)));
    gap: var(--space-xs);
    pointer-events: auto;
  }

  .splide__pagination__page {
    width: 32px;
    height: 4px;
    padding: 0;
    margin: 0 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.55);
    border: none;
    opacity: 1;
    cursor: pointer;
    transition: background 0.4s ease, transform 0.4s ease;

    &.is-active {
      background: var(--c-white);
      transform: scaleY(1.5);
    }

    &:hover {
      background: rgba(255,255,255,0.85);
    }
  }
}

/* Splide（トップ MV） — トップレベル */
.top-slider-splide {
  height: 100%;
}

/* スライド画像 */
/* picture はレイアウトに影響させず、内側の img を従来通りスライド全面に敷く */
.splide__slide picture {
  display: contents;
}
.ts-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ================================================
   スライド左白パネル
   ================================================ */
.ts-catch-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60px;
  width: 60%;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl);
  /* テキスト・ボタンを 0.8rem 左に寄せる */
  padding-left: calc(var(--space-xl) - 0.8rem);
  pointer-events: auto;
  z-index: 100;
}

.ts-catch-wrap > * { position: relative; z-index: 1; }

.ts-panel-kicker {
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.7em;
  line-height: 1.5;
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  align-self: flex-start;
}

.ts-panel-heading {
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin: 0.5em 0;
}

.ts-panel-heading span {
  color: var(--c-main);
  text-shadow:
    0 0 15px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 50px #fff;
}

.ts-panel-body {
  color: #fff;
  line-height: 1.7;
  margin: 0.6em 0 1.2em;
}

.ts-panel-btns {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;;
}

.ts-panel-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  color: var(--c-white);
  /* 背景はリンク先ページのテーマ色（front-page.php が --ts-btn-bg を付与）。未指定時はメイン緑 */
  background: var(--ts-btn-bg, var(--c-main));
  border: 1px solid #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-18);
  border-radius: var(--radius);
  /* 座布団から浮き上がって見える影 */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: background var(--transition), color var(--transition), border-color var(--transition),
    box-shadow var(--transition), transform var(--transition);

  &:hover {
    /* テーマ色をそのまま 15% 暗くしてホバー色に（任意のテーマ色に対応） */
    background: color-mix(in srgb, var(--ts-btn-bg, var(--c-main)) 85%, #000);
    border-color: #fff;
    color: var(--c-white);
    /* ホバーでさらに持ち上がる */
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  }

  &:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  }
}

.ts-panel-btn--white {
  background: #fff;
  color: #00954c;
  border-color: #00954c;

  &:hover {
    background: #f0faf5;
    color: var(--c-main-hover);
    border-color: var(--c-main-hover);
  }
}

/* ================================================
   スライドナビゲーション：左右矢印
   ================================================ */
/* スライド左右矢印ボタン（透過円形） */
.ts-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: var(--fs-20);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, color 0.25s;

  &:hover {
    background: rgba(255,255,255,0.3);
    color: var(--c-white);
  }
}

.ts-arrow-prev { left: var(--space-md); }
.ts-arrow-next { right: var(--space-md); }

/* ================================================
   スクロール誘導インジケーター（縦・右下）
   縦書き "SCROLL" ＋ 光が下へ流れる細いライン
   ================================================ */
.ts-scroll {
  position: absolute;
  left: var(--space-lg);
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: #fff;
  pointer-events: none;
  animation: ts-scroll-float 3.4s ease-in-out infinite;
}

.ts-scroll__text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.42em;
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  animation: ts-scroll-pulse 3.4s ease-in-out infinite;
}

.ts-scroll__line {
  position: relative;
  width: 1px;
  height: 72px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.45)
  );
  overflow: hidden;
}

/* 上から下へ流れる光のセグメント＋先端の輝点 */
.ts-scroll__line::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 45%;
  background: linear-gradient(to bottom, transparent, #fff);
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.65);
  animation: ts-scroll-flow 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes ts-scroll-flow {
  0%   { transform: translateY(-100%); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(222%); opacity: 0; }
}

@keyframes ts-scroll-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

@keyframes ts-scroll-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.5; }
}

/* SP：ヒーローが小さく窮屈なため非表示 */
@media (max-width: 767px) {
  .ts-scroll { display: none; }
}

/* ================================================
   エントランスアニメーション
   ================================================ */

/* テキスト：下からスライドイン */
@keyframes ts-catch-in {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* アニメーション直前に付けて非表示にするクラス */
.ts-catch-wrap.is-anim-ready {
  opacity: 0;
}

.ts-catch-wrap.is-animated {
  animation: ts-catch-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

/* 緑座布団：画像と一緒にスライドさせず、テキストと同じタイミングでフェードイン */
@keyframes ts-cushion-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.top-slider .splide__slide.is-active.is-catch-in::before {
  animation: ts-cushion-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}

/* TB+SP 共通（〜1024px）：全幅表示（隣スライドを見せず画像を画面幅いっぱいに） */
@media (max-width: 1024px) {
  .top-slider .splide__slide { width: 100vw; }
  .top-slider .splide__track { overflow: hidden; }
}

/* TB（768px〜1024px）：キャッチ帯・MV */
@media (min-width: 768px) and (max-width: 1024px) {
  .top-catch {
    min-height: 160px;
  }
  .top-slider { height: 480px; }
  .ts-catch-wrap { padding: var(--space-lg) var(--space-md) var(--space-lg) var(--space-lg); }
}

/* SP（〜767px）：キャッチ帯・MV */
@media (max-width: 767px) {
  /* キャッチ帯はスマホでも表示する（高さは控えめに） */
  .section.top-catch {
    min-height: 0;
  }
  /* テキスト上下の余白を 1rem に */
  .top-catch-inner {
    padding: 1rem 0;
  }
  /* キャッチ帯側でヘッダー分の余白を確保しているため、スライダー側の余白は不要 */
  .section.top-slider {
    margin-top: 0;
    padding: 0;
  }
  /* 枠を黄金比（横長 1.618:1）に。幅100vw → 高さ約61.8vw。
     黄金比のスマホ画像なら object-fit:cover で見切れ・余白なく収まる */
  .top-slider { aspect-ratio: 1.618 / 1; height: auto; min-height: 0; }
  /* スマホでは台形カットを解除して画像・緑グラデを全幅・矩形で表示 */
  .top-slider .splide__slide {
    clip-path: none;
    margin-right: 0;
  }
  .top-slider .splide__slide.is-active::before {
    clip-path: none;
  }
  .ts-catch-wrap {
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    padding: var(--space-md);
  }
  .ts-panel-btns { gap: var(--space-xs); }
  .ts-panel-btn { font-size: var(--fs-14); padding: var(--space-xs) var(--space-md); }
  /* スマホではスライダー上の「お問い合わせ」ボタンを非表示（左ボタンのみ表示） */
  .ts-panel-btn--white { display: none; }
}