@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500&display=swap');

/*
:root {
  font-family: 'Outfit', sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light;
  background-color: #f0f2f5;
}
*/

body {
  margin: 0;
  padding: 0;
  /*min-width: 320px;
  min-height: 100vh;
  overflow: hidden;*/
}

#app {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  /* perspective: 1200px; */
}

/* Common Layer Styles */
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Layer 1: Background */
.layer-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  background-color: #000;
}

.layer-bg-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-size: cover;
  background-position: center 90%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  transform-origin: center center;
  bottom: auto;
  will-change: mask-position, -webkit-mask-position, opacity;
}

.bg-wipe-in {
  /* マスク画像: 左上が黒、右下が透明 */
  -webkit-mask-image: linear-gradient(to bottom right, black 0%, black 40%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(to bottom right, black 0%, black 40%, transparent 60%, transparent 100%);
  /* マスクサイズを縦横3倍に */
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  /* 左上から右下へのアニメーション (5秒) */
  animation: wipeIn 5s ease-in-out forwards;
}

@keyframes wipeIn {
  0% {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
  100% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
}


/* Layer 2: Middle (Seiza) */
.layer-middle {
  z-index: 50; /* 背景よりは上、ロゴよりは下 */
}

.seiza-img {
  max-width: 94%;
  max-height: 94%;
  object-fit: contain;
  opacity: 0.85;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
  animation: floatSeiza 8s ease-in-out infinite;
  /* 全体的に少し上に配置（25vh -> 40vh） */
  padding-bottom: 40vh; 
  /* 奥行き0 (基準) */
  transform: translateZ(0); 
}

@keyframes floatSeiza {
  /* 上から下に流れるような動きに変更（移動距離を半分に）、さらにPC版は右寄りに配置 */
  0%, 100% { transform: translateX(200px) translateY(-15px) translateZ(0) scale(1); }
  50% { transform: translateX(200px) translateY(15px) translateZ(0) scale(1.02); }
}

/* Layer 3: Front (Logo) */
.layer-front {
  z-index: 100; /* 確実に最前面へ */
  display: flex;
  justify-content: flex-start; /* 左寄せ */
  align-items: center; /* 上下は中央だが、ロゴ側で少し上にずらす */
  padding-left: max(45px, 5%); 
  box-sizing: border-box; 
}

/* ロゴ全体を縦に並べるコンテナ */
.logo-container {
  display: flex;
  flex-direction: column;
  gap: 0; /* ユーザー要望: ロゴ3つの上下隙間は0にして */
  /* 今の位置をキープ */
  transform: translate(0, -20%);
}

/* 各行のアニメーション用ラッパー */
.logo-wrapper {
  position: relative;
  display: inline-block;
  align-self: flex-start; /* 左寄せキープ */
}

/* 1行目、2行目、3行目のアニメーション遅延設定 (スタッガー) */
/* アニメーションスピードをゆったり（全体を長め）にするため、全体的な時間を引き延ばします */
.logo-wrapper.line-1::before { 
  animation-delay: 0.2s; 
  background-color: #c70075; /* 1行目: 指定色 */
}
.logo-wrapper.line-1 .logo-img { animation-delay: 1.0s; } /* 0.2 + 0.8 */

.logo-wrapper.line-2::before { 
  animation-delay: 0.6s; /* 1行目の動作が途中まで進んでから開始 */
  background-color: #c70075; /* 2行目指定色 */
} 
.logo-wrapper.line-2 .logo-img { animation-delay: 1.4s; } /* 0.6 + 0.8 */

.logo-wrapper.line-3::before { 
  animation-delay: 1.0s; /* さらに 0.4s 後 */
  background-color: #FFFFFF; /* 3行目指定色 */
} 
.logo-wrapper.line-3 .logo-img { animation-delay: 1.8s; } /* 1.0 + 0.8 */


.logo-img {
  display: block;
  /* ユーザー要望: 高精細対応のためCSSでの表示サイズは実際の横幅の半分に指定 */
  max-width: 50%;
  height: auto;
  opacity: 0; 
  /* ボックスが通り過ぎた後でふわっと表示（時間を 1.2s へゆっくりに） */
  animation: logoImageReveal 1.2s ease-out forwards;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
}

/* アクセントカラーの帯が左から右へシュッと通り抜けさせる */
.logo-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* 画像の表示幅(50%)に合わせる */
  height: 100%;
  /* ベースカラーは持たせず、各行単位（.line-x）で個別に色を指定する */
  /* background-color: #276993; */
  /* ロゴの背後を流れるようにz-indexを下げてもOK */
  z-index: 1;
  
  transform-origin: left;
  transform: scaleX(0);
  
  /* ユーザー要望: ボックスアニメーションは、動き出しは滑らかで後半グッと加速するcubic-bezier */
  /* アニメーション時間を 0.8s から 1.2s（または1.4s）へ延長し、ゆったりさせる */
  animation: boxSweep 1.2s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes boxSweep {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  45% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

@keyframes logoImageReveal {
  from {
    opacity: 0;
    transform: translateY(10px); /* ほんの少し下から浮かび上がる演出（任意） */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .layer-bg-container {
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
  }
  .layer-bg-item, #initial-bg {
    background-size: cover;
    background-position: center 80%; /* bottomすぎるとアドレスバーに食われるため */
    transform: scale(1.0);
    transform-origin: center bottom;
    background-attachment: scroll; /* Mobile Safariなどでfixed+100vhがおかしくなる不具合を回避 */
  }

  #app {
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
  }

  .layer-bg-item, #initial-bg {
    /* JSで切替時も優先して下揃えを持続させるために !important を使用します */
    background-size: cover !important;
    background-position: center 80% !important; /* bottomすぎるとアドレスバーに食われるため */
    background-attachment: scroll !important; /* Mobile Safariなどでfixed+100vhがおかしくなる不具合を回避 */
    transform: scale(1.0) !important;
    transform-origin: center bottom !important;
    top: auto !important; /* 上基準を解除 */
    bottom: 0 !important; /* 下端を強制的に吸い付かせる */
    height: 100%;
    min-height: -webkit-fill-available;
  }
  
  .seiza-img {
    max-width: 180%; 
    /* スマホ版でロゴよりもっと上になるように大幅に引っぱり上げる（20vh -> 50vh -> 少し下げて35vhに調整） */
    padding-bottom: 35vh; 
    opacity: 0.8;
    animation: floatSeizaMobile 8s ease-in-out infinite;
  }

  .layer-front {
    justify-content: center; /* 水平中央 */
    align-items: flex-start;
    padding: 0;
    /* 人物と被らないように少し上部に浮かせる (例: top 15% 相当) */
    padding-top: 20vh; 
  }

  .logo-container {
    /* 中央揃えの基準位置と横幅調整 */
    align-items: center; /* 子要素ラッパーを中央揃えに */
    width: 75%; /* スマホ画面に対して適切な幅（広がりすぎず重ならないよう75%に調整） */
    max-width: 300px;
    transform: translate(0, 10px); /* ユーザー要望: 以前の位置から下に50px移動するため、-40pxから+10pxへ変更 */
    padding-bottom: env(safe-area-inset-bottom); /* iOSの下部セーフエリア考慮 */
  }

  /* スマホでの各行ラッパー調整 */
  .logo-wrapper {
    align-self: center; /* 左寄せキープではなく画面中央へ */
    width: 100%; /* コンテナ幅いっぱいを使うようにして画像サイズの50%をコントロール */
    text-align: center; /* width100%の中で画像を中央に置くため */
  }

  /* スマホ版では画像の幅（50%指定）をコンテナ基準に合わせ、さらに中央配置する */
  .logo-img {
    margin: 0 auto; /* 水平中央配置 */
      /* サイズをより大きく見せたい場合は 70% や 80% でもOK */
    max-width: 80%;
  }

  /* スマホ版の帯（背景色）のサイズと初期位置も画像サイズ（80%）と中央寄せに合わせる */
  .logo-wrapper::before {
    left: 10%; /* 要素幅の100% に対して画像が80%・マージン左右10%のため */
    width: 80%;
  }
}

@keyframes floatSeizaMobile {
  /* 上から下に流れるような動きに変更（移動距離を半分に） */
  0%, 100% { transform: translateY(-15px) translateZ(0) scale(1); }
  50% { transform: translateY(15px) translateZ(0) scale(1.02); }
}

/* =========================================
   Layer 1.5: Fireflies (CSS Particles)
   ========================================= */
.layer-fireflies {
  z-index: 10; /* bg(1)より上でseiza(50)より下 */
}

.firefly {
  position: absolute;
  background-color: #fff; /* ごく薄い黄色・白（box-shadowで色味を調整） */
  border-radius: 50%;
  opacity: 0; 
  /* 光のぼかし効果 */
  box-shadow: 0 0 6px 2px rgba(220, 255, 253, 0.8), 0 0 12px 4px rgba(114, 192, 255, 0.5);
}

/* 点滅アニメーション */
@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* 漂うアニメーション */
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -50px) rotate(120deg); }
  66% { transform: translate(-20px, -80px) rotate(240deg); }
  100% { transform: translate(0, -120px) rotate(360deg); }
}

/* ランダムな遅延、位置、サイズの割り当て (20個) - 画面左側〜中央に寄せるように調整 */
.firefly:nth-child(1) { left: 10%; top: 85%; width: 4px; height: 4px; animation: drift 20s infinite linear 1s, blink 4s infinite ease-in-out 1s; }
.firefly:nth-child(2) { left: 55%; top: 70%; width: 6px; height: 6px; animation: drift 18s infinite linear 2.5s, blink 5s infinite ease-in-out 0.5s; }
.firefly:nth-child(3) { left: 30%; top: 90%; width: 3px; height: 3px; animation: drift 22s infinite linear 0s, blink 3.5s infinite ease-in-out 2s; }
.firefly:nth-child(4) { left: 45%; top: 60%; width: 5px; height: 5px; animation: drift 15s infinite linear 3s, blink 6s infinite ease-in-out 1.5s; }
.firefly:nth-child(5) { left: 20%; top: 40%; width: 7px; height: 7px; animation: drift 25s infinite linear 1.2s, blink 4.5s infinite ease-in-out 0s; }
.firefly:nth-child(6) { left: 60%; top: 30%; width: 4px; height: 4px; animation: drift 19s infinite linear 4s, blink 3s infinite ease-in-out 3s; }
.firefly:nth-child(7) { left: 5%; top: 50%; width: 5px; height: 5px; animation: drift 21s infinite linear 0.5s, blink 5.5s infinite ease-in-out 2.5s; }
.firefly:nth-child(8) { left: 50%; top: 80%; width: 3px; height: 3px; animation: drift 17s infinite linear 2s, blink 4s infinite ease-in-out 1s; }
.firefly:nth-child(9) { left: 35%; top: 20%; width: 6px; height: 6px; animation: drift 24s infinite linear 4.5s, blink 6s infinite ease-in-out 0.5s; }
.firefly:nth-child(10) { left: 25%; top: 75%; width: 4px; height: 4px; animation: drift 16s infinite linear 1.5s, blink 3.8s infinite ease-in-out 3.5s; }
.firefly:nth-child(11) { left: 40%; top: 45%; width: 5px; height: 5px; animation: drift 20s infinite linear 0.8s, blink 4.2s infinite ease-in-out 1.2s; }
.firefly:nth-child(12) { left: 15%; top: 15%; width: 7px; height: 7px; animation: drift 23s infinite linear 3.5s, blink 5.2s infinite ease-in-out 2s; }
.firefly:nth-child(13) { left: 8%; top: 25%; width: 3px; height: 3px; animation: drift 18s infinite linear 2.2s, blink 3.5s infinite ease-in-out 0.8s; }
.firefly:nth-child(14) { left: 32%; top: 55%; width: 6px; height: 6px; animation: drift 21s infinite linear 4.2s, blink 4.8s infinite ease-in-out 1.5s; }
.firefly:nth-child(15) { left: 12%; top: 65%; width: 4px; height: 4px; animation: drift 17s infinite linear 1.8s, blink 5.5s infinite ease-in-out 2.8s; }
.firefly:nth-child(16) { left: 58%; top: 40%; width: 5px; height: 5px; animation: drift 22s infinite linear 0s, blink 4s infinite ease-in-out 0s; }
.firefly:nth-child(17) { left: 22%; top: 10%; width: 6px; height: 6px; animation: drift 19s infinite linear 2.8s, blink 6s infinite ease-in-out 3s; }
.firefly:nth-child(18) { left: 63%; top: 85%; width: 3px; height: 3px; animation: drift 24s infinite linear 1s, blink 3.2s infinite ease-in-out 1.2s; }
.firefly:nth-child(19) { left: 18%; top: 35%; width: 7px; height: 7px; animation: drift 16s infinite linear 3.2s, blink 4.5s infinite ease-in-out 2.5s; }
.firefly:nth-child(20) { left: 28%; top: 5%; width: 4px; height: 4px; animation: drift 25s infinite linear 0.5s, blink 5s infinite ease-in-out 0.5s; }

/* スマホ等で重くならないように、画面が小さい時は11番目以降を非表示にして10個にする */
@media (max-width: 768px) {
  .firefly:nth-child(n+11) {
    display: none;
  }
}

/* =========================================================
   ここから下は WordPress（Solarisテーマ）組み込み用の専用調整
   ========================================================= */

/* V6の全体枠を「ヘッダーの下からスタート」させる */
#hero-animation-section {
  width: 100%;
  margin-top:80px; /* ★ここがポイント！PCヘッダーの高さ分だけ下に押し下げる */
  height: calc(100vh - 80px); 
  height: calc(100dvh - 80px); 
  position: relative;
  overflow: hidden;
  background-color: #FFF;
  z-index: 1;
}

/* スマホ画面用の高さ調整 ＆ ヘッダー透過設定 */
@media (max-width: 768px) {
  /* 1. 押し下げをゼロにして、画面の一番上からスタートさせる */
  #hero-animation-section {
    margin-top: 0 !important; /* ★ここを0に戻す */
    height: 100vh !important; 
    height: 100dvh !important;
  }

  /* 2. スマホのヘッダーを透過させて、V6の上に浮かせる */
  body.home #header {
    position: absolute !important;
    background: transparent !important; /* 背景を透明に */
    border-bottom: none !important; /* 下の線を消す */
  }

  /* TCDテーマ特有の「ヘッダー背景の白フィルター」も透明にする */
  body.home #header::after {
    background: transparent !important;
  }

  /* 3. ハンバーガーメニュー（3本線）を白色にして見やすくする */
  body.home #global_menu_button span {
    background-color: #ffffff !important;
  }
}
/* ---------------------------------------------------------
   V6ヒーローエリアと、その下のコンテンツ（検索窓）を密着させる
--------------------------------------------------------- */
body.home #index_content_builder,
body.home #cb_content_1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
border-top: none !important;
}