@charset "UTF-8";
/*
    Template: swell
    Theme Name: TecNect-theme
    Theme URI: https://swell-theme.com/
    Description: TecNectのテーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.toku-font{
	  font-family: 'Josefin Sans', sans-serif;
}

.toku-h2{
	font-size:3em!important;
	font-family: 'Josefin Sans', sans-serif;
	margin-bottom:1em!important;

}
.toku-h3{
	font-size:1.5em!important;
	margin-top:2em!important;
	margin-bottom:1em!important;
	font-family: 'Josefin Sans', sans-serif;
}
.toku-h5{
	font-size:25px;
}
.about-bg{
	background-image: linear-gradient(90deg, #000000, #243b54);
}
.news-bg{
	  background-image: radial-gradient(#243952, #000000);

}
.p-spMenu__body{
		font-family: 'Josefin Sans', sans-serif;
}
.img-hanten{
	transform: scale(-1, 1);
}
.works img{border:solid 1px #111c28;}

@media screen and (max-width: 768px) {
	.toku-h5{
	font-size:18px;
}
}
.l-topTitleArea__body{margin-top:100px;}

#breadcrumb{background-color:#000;color:#FFF;}
/* ---========▼▼▼▼▼ ヒーロセクション ▼▼▼▼▼========--- */

/* --- ヒーローセクション全体 --- */
.hero-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 背景色は黒に近い濃紺で引き締める */
  color: #fff;
  font-family: 'Josefin Sans', sans-serif;
  z-index: 10;
}

/* --- 背景1：パーティクルキャンバス --- */
#hero-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1; /* 最背面 */
  pointer-events: none;
opacity:.8;
}

/* --- 背景2：グリッド線（以前のまま維持） --- */
.hero-grid-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* --- コンテンツ配置 --- */
.hero-content {
  position: relative;
  z-index: 10; /* パーティクルより手前 */
  text-align: center;
  width: 100%;
  padding: 0 20px;
	margin-top: -40px; /* スクロール矢印分のスペース確保のため少し上げる */
}

.hero-sub {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
  opacity: 0.9;
}

/* --- ▼▼▼ 新・テキスト切り替え（発光強化版） ▼▼▼ --- */
.hero-title-switcher {
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

/* 共通スタイル（アニメーション指定は削除） */
.switch-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
}

/* 1つ目のテキスト（文字） */
.text-tech {
  font-size: 3rem !important;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #fff;
  /* ★文字用アニメーションを適用 */
  animation: text-switch 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 2つ目のロゴ（画像） */
.text-logo-style {
  width: 20%;
  max-width: 300px;
  height: auto;
  /* ★ロゴ用アニメーションを適用（3秒遅れで） */
  animation: logo-switch 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 3s;
}

/* --- アニメーション定義（2種類に分離） --- */

/* 1. 文字用アニメーション（text-shadow版） */
@keyframes text-switch {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
    filter: blur(15px);
    text-shadow: 0 0 0 rgba(255,255,255,0); 
  }
  
  /* 15%〜40%：表示中は常に全力で光らせる！（ここを延長しました） */
  15%, 40% { 
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0px);
    text-shadow: 
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 40px #3399CC;
  }
  
  /* 50%：光ったままボケて消える */
  50% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    filter: blur(15px);
    /* 消える瞬間まで光を残す */
    text-shadow: 0 0 40px #3399CC; 
  }
  
  100% { opacity: 0; }
}
/* 2. ロゴ用アニメーション（drop-shadow最強発光版） */
@keyframes logo-switch {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
    /* 最初の状態：ボケて影なし */
    filter: blur(15px) drop-shadow(0 0 0 rgba(51,153,204,0));
  }
  
  /* 15%〜40%：表示中は常に最強発光！（ここを延長しました） */
  15%, 40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    /* 複数の影を重ねて発光体を表現 */
    filter: 
      blur(0px)
      drop-shadow(0 0 10px #fff)       /* 核となる白い光 */
      drop-shadow(0 0 30px #3399CC)    /* 青いハロー */
      drop-shadow(0 0 60px #3399CC);   /* 広がる光 */
  }
  
  /* 50%：光ったままボケて消える */
  50% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    /* 消える瞬間も光を残しつつボカす */
    filter: 
      blur(15px) 
      drop-shadow(0 0 60px #3399CC);
  }
  
  100% { opacity: 0; }
}

/* --- ★追加：スクロールインジケーター --- */
.scroll-indicator {
  position: absolute;
  bottom: 30px; /* 下からの距離 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 120;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.scroll-indicator:hover {
  opacity: 1;
}

.scroll-text {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  font-weight: 300;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 5px rgba(51, 153, 204, 0.5);
}

.scroll-line {
  width: 1px;
  height: 60px; /* 線の長さ */
  background: rgba(255, 255, 255, 0.2); /* 軌道（薄い線） */
  position: relative;
  overflow: hidden;
}

/* 動く光の線 */
.scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #3399CC, #fff); /* 青から白へ */
  animation: scroll-drop 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scroll-drop {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}


/* スマホ調整 */
@media screen and (max-width: 768px) {
	.hero-wrapper { height: 95vh; }
  .hero-title-switcher { height: 80px; }
  .text-tech { font-size: 1.8rem !important; white-space: normal; }
  .text-logo-style { width: 50%; /* スマホではロゴを大きめに */ }
	.hero-sub {
  font-size: 2rem;
  margin-bottom: 20px;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
  opacity: 0.9;
}
.scroll-indicator { bottom: 20px; }
  .scroll-line { height: 40px; }	
}


/* --- ボタン（既存ママ） --- */
.hero-btn-area { margin-top: 20px; }
.hero-btn {
  display: inline-flex; align-items: center; padding: 15px 40px;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 50px;
  color: #fff; text-decoration: none; font-weight: bold;
  background: rgba(51, 153, 204, 0.1); /* 少し青みを入れる */
  backdrop-filter: blur(5px); transition: all 0.3s;
}
.hero-btn:hover {
  background: #3399CC; color: #fff;
  box-shadow: 0 0 30px rgba(51, 153, 204, 0.8);
  border-color: #3399CC;
}



/* ---========▼▼▼▼▼ ヘッダーカプセルメニュー ▼▼▼▼▼========--- */

.l-header,
.l-header .c-gnav a,
.l-header .c-iconList__item, 
.l-header .c-headLogo__link {
		font-family: 'Josefin Sans', sans-serif !important;
	color:#243b54;
}
.c-gnav>.menu-item>a .ttl {
	font-weight:bold!important;
}


/* PCサイズ（960px以上）の時のみ適用 */
@media (min-width: 960px) {

  /* ヘッダー全体を浮かせて丸める設定 */
  .l-header {
    position: fixed;          /* 固定配置 */
    top: 25px;                /* 上からの距離 */
    left: 50%;                /* 左から50%の位置 */
    transform: translateX(-50%); /* 中央寄せの補正 */
    width: 95%;               /* 横幅（画面に対する割合） */
    max-width: 1400px;        /* 横幅の最大値（お好みで調整） */
    background-color: #fff;   /* 背景色 */
    border-radius: 60px;      /* 角丸の強さ（カプセル型にする） */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 影をつけて浮遊感を出す */
    z-index: 1001;            /* 他の要素より手前に表示 */
    padding: 0 5px;          /* 左右の内側余白 */

  }
}

  /* 検索ボタンなどのアイコンサイズ微調整（必要に応じて） */
  .c-iconList__item {
     margin-left: 10px;
  }

/* ---========▼▼▼▼▼ スマホ版ヘッダー制御（修正・色変更版） ▼▼▼▼▼========--- */

/* スマホサイズ（959px以下） */
@media (max-width: 959px) {

  /* 1. 通常時のヘッダー */
  .l-header {
    position: fixed;
    top: 15px;
    left: 2.5%;
    width: 95%;
    background-color: #fff;
    border-radius: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 2; /* ★ここを下げるとクリックできなくなる恐れがあります。一旦このまま */
    padding: 5px 15px;
    transition: all 0.4s ease;
  }

  .c-headLogo__link img {
    max-height: 30px;
    width: auto;
  }
  
/* ---▼▼ スクロール後の変化（色変更・最強優先度版） ▼▼--- */
  
  /* ヘッダー全体の設定（透明化・位置移動） */
  body.is-mobile-scrolled #header.l-header {
    width: 95% !important;
	right: 15px !important;
    top: 15px !important;
    right: auto !important;
    background-color: transparent !important; /* 背景透明 */
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* ロゴ非表示 */
  body.is-mobile-scrolled .c-headLogo {
    display: none !important;
  }

  /* ハンバーガーボタンのデザイン（ここを強制的に紺色に） */
  body.is-mobile-scrolled #header .c-iconList {
    background-color: #243b54 !important; /* ★紺色（強制） */
    color: #fff !important; /* 文字色も白に */
    
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    
    display: flex !important;
    justify-content: center;
    align-items: center !important;
    margin: 0 !important;
  }

  /* リンクの余白リセット */
  body.is-mobile-scrolled #header .c-iconList__item,
  body.is-mobile-scrolled #header .c-iconList__item a {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center;
    align-items: center !important;
  }

  /* 3本線を「真っ白」にする（SWELLの仕様に合わせ全パターン網羅） */
  body.is-mobile-scrolled #header .c-iconList__icon,
  body.is-mobile-scrolled #header .c-iconList__icon span,
  body.is-mobile-scrolled #header .c-iconList__icon span::before,
  body.is-mobile-scrolled #header .c-iconList__icon span::after {
    background-color: #ffffff !important; /* ★白線（強制） */
    height: 2px !important;
  }
  
  /* 位置ズレ防止 */
  body.is-mobile-scrolled #header .c-iconList__icon span {
      position: relative !important;
      display: block !important;
  }
 }	
	
/* ---========▼▼▼▼▼ H2ブロックリビール（白） ▼▼▼▼▼========--- */

/* --- ブロックリビール見出し（親要素） --- */
.block-reveal-h2 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  font-size: 3em !important;
  font-family: 'Josefin Sans', sans-serif;
}

/* ★修正：テキスト部分（ここで光のアニメーションを設定） */
.block-reveal-h2 .reveal-text {
  display: block;
  opacity: 0; /* JSで表示されるまで隠す */
  
  /* --- 光るテキストの設定 --- */
  
  /* グラデーション：白 → 青 → 白 */
  /* 基本が白なので、両端を#fffにします */
  background: linear-gradient(
    to right,
    #ffffff 0%,
    #ffffff 30%,
    #3399CC	 50%,   /* ここが光の色（シアンブルー） */
    #ffffff 70%,
    #ffffff 100%
  );
  
  /* 背景サイズを大きくして動く幅を作る */
  background-size: 200% auto;
  
  /* 文字の形で切り抜く */
  color: transparent; /* 文字色を透明にして背景色を見せる */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* アニメーション：3秒かけて往復（alternate）し続ける */
  animation: shine-flow 3s ease-in-out infinite alternate;
}

/* 動く四角い背景（カーテン）※ここは変更なし */
.block-reveal-h2 .reveal-curtain {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #243b54;
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* --- アニメーション定義（最下部に追記してください） --- */
@keyframes shine-flow {
  0% {
    background-position: -50% center; /* 左端 */
  }
  100% {
    background-position: 150% center; /* 右端 */
  }
}

/* ---========▼▼▼▼▼ H2ブロックリビール（黒） ▼▼▼▼▼========--- */

/* --- ブロックリビール見出し（親要素） --- */
.block-reveal-h2b {
  position: relative;
  display: inline-block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  font-size: 3em !important;
  font-family: 'Josefin Sans', sans-serif;
}

.block-reveal-h2b .reveal-text {
  display: block;
  opacity: 0; /* JSで表示されるまで隠す */

  background: linear-gradient(
    to right,
    #222 0%,
    #222 30%,
    #3399CC	 50%,   /* ここが光の色（シアンブルー） */
    #222 70%,
    #222 100%
  );
    background-size: 200% auto;
  color: transparent; /* 文字色を透明にして背景色を見せる */
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine-flow 3s ease-in-out infinite alternate;
}

.block-reveal-h2b .reveal-curtain {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #243b54;
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

@keyframes shine-flow {
  0% {    background-position: -50% center; /* 左端 */  }
  100% {    background-position: 150% center; /* 右端 */  }
}

/* ---========▼▼▼▼▼ H2ブロックリビール（固定・消えない版） ▼▼▼▼▼========--- */

/* --- 親要素 --- */
.block-reveal-h2-static {
  position: relative;
  display: inline-block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  font-size: 5em !important;
  font-family: 'Josefin Sans', sans-serif;
}

/* --- テキスト（光るアニメーション） --- */
.block-reveal-h2-static .reveal-text {
  display: block;
  opacity: 0; 
  background: linear-gradient(
    to right,
    #222 0%,
    #222 30%,
    #3399CC 50%,
    #222 70%,
    #222 100%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine-flow 3s ease-in-out infinite alternate;
}

/* --- カーテン（動く四角） --- */
.block-reveal-h2-static .reveal-curtain {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #243b54;
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
/* モバイル調整 */
@media screen and (max-width: 768px) {
  .block-reveal-h2-static {
    font-size: 2em !important;
  }
}

/* ---========▼▼▼▼▼ Enterkeyアニメーション（軽量化版） ▼▼▼▼▼========--- */

/* --- Enterアニメーション ベース設定 --- */
.enter-section-wrapper {
  position: relative;
  width: 100vw; height: 100vh;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  background-color: #000;
  overflow: hidden; 
  z-index: 10;
  /* 3Dアクセラレーション有効化 */
  transform: translateZ(0);
}

.sticky-content {
  position: relative; width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
  overflow: hidden;
}

.black-bg-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #000; z-index: 1;
}

/* --- 動画コンテナ（マスクサイズのアニメーションを簡略化） --- */
.masked-video-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 3;
  
  /* SVGマスク設定 */
  -webkit-mask-image: url('https://tecnect.com/wp-content/uploads/2025/12/enter_key.svg');
  mask-image: url('https://tecnect.com/wp-content/uploads/2025/12/enter_key.svg');
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  
  /* 初期サイズ */
  -webkit-mask-size: 300px auto; 
  mask-size: 300px auto;
  
  background-color: #000;
  /* will-change は mask-size のみ指定 */
  will-change: mask-size;
}

/* --- ★光レイヤー（光量アップ調整版） --- */
.glow-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2;
  
  /* 背景画像設定 */
  background-image: url('https://tecnect.com/wp-content/uploads/2025/12/enter_key.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 300px auto;
  
  /* 透明度は戻す */
  opacity: 1; 
  
  /* 【重要】フィルタの組み合わせで強い光を作る */
  filter: 
    /* 1. まず対象を真っ白にする */
    brightness(0) invert(1)
    /* 2. 全体をぼかして光を拡散させる（値を大きくすると広がる） */
    blur(8px)
    /* 3. 明るさをブーストして「発光」させる（1が基準、大きくすると眩しくなる） */
    brightness(3)
    /* 4. 芯となる鋭い光を1つだけ足す（これで輪郭がハッキリする） */
    drop-shadow(0 0 5px #ffffff);
    
  /* アニメーション用 */
  will-change: background-size;
  transform: translateZ(0); 
}

.target-video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* ぼかしフィルタも重いので初期値はなし */
  filter: brightness(1);
  transform: scale(1);
  /* will-change を削除してブラウザに任せる（過剰なメモリ消費を防ぐ） */
}

/* --- テキスト設定 --- */
.text-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 50; 
  pointer-events: none;
}

.enter-label-group {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-70%, -70%);
  text-align: left;
  /* テキストの影もシンプルに */
  text-shadow: 0 0 5px rgba(0,0,0,0.8);
}

.main-text {
  display: block; font-size: 1.8rem; font-weight: 700; color: #fff;
  line-height: 1; 
}

.sub-text {
  display: block; font-size: 0.8rem; color: #fff;
  margin-top: 5px;
}

.message-content {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; text-align: center; z-index: 60;
}

.fade-text {
  color: #fff; opacity: 0;
  transform: translateY(30px); 
  /* blurアニメーションは重いので削除し、透明度と移動だけで表現 */
  /* filter: blur(10px); ←削除 */
  font-weight: bold; line-height: 1.5;
}

/* --- 背景テキストスライダー設定（ここも軽くする） --- */

/* 黒背景レイヤー */
.black-bg-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #000; 
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ラッパー */
.bg-text-slider-wrapper {
  width: 100%;
  height: 100%; /* 120%から戻す */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  
  /* マスク処理は残すが、シンプルなグラデーションにする */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  
  opacity: 0.3; /* さらに薄くして描画負荷を下げる */
}

/* 各行 */
.bg-text-row {
  display: flex;
  white-space: nowrap;
  font-family: 'Arial', sans-serif;
  font-size: 4vw;
  font-weight: 700;
  color: #333;
  /* will-change 追加 */
  will-change: transform;
}

.bg-track {
  padding-right: 50px;
  /* 3Dアクセラレーション */
  transform: translateZ(0); 
}

/* --- アニメーション --- */
.move-left .bg-track {
  animation: bg-slide-left 60s linear infinite;
}

.move-right .bg-track {
  animation: bg-slide-right 60s linear infinite;
}

@keyframes bg-slide-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes bg-slide-right {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

/* ---========▼▼▼▼▼ Horizontal Scroll Section/横スクロールセクション（整形版） ▼▼▼▼▼========--- */

/* ベース設定：画面幅いっぱいに広げるエリア */
.horizontal-scroll-wrapper {
  position: relative; /* 子要素のabsolute基準点 */
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  display: flex;
  background-color: #f8fbff;
  z-index: 50;
  font-family: 'Josefin Sans', sans-serif;
}

/* ★修正：ドット間隔広め・色薄め・ウェーブ版 */
.tn-dot-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; 
  pointer-events: none;

  /* 1. マスク（ドットは小さいまま、間隔を広げる） */
  -webkit-mask-image: radial-gradient(circle, black 1.5px, transparent 2px);
  mask-image: radial-gradient(circle, black 1.5px, transparent 2px);
  
  /* ★ここを変更：間隔を50pxに広げる（数字を大きくするともっと広がる） */
  -webkit-mask-size: 30px 30px; 
  mask-size: 30px 30px;
  
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;

  /* 2. 背景色（薄いウェーブ） */
  background: linear-gradient(
      90deg, 
      rgba(51, 153, 204, 0.05) 0%,    
      rgba(51, 153, 204, 0.2) 30%,   
      rgba(51, 153, 204, 0.4) 50%,    
      rgba(51, 153, 204, 0.2) 70%,   
      rgba(51, 153, 204, 0.05) 100% 
  );
  
  background-size: 200% 100%;

  /* 3. アニメーション */
  animation: color-wave-anim 6s linear infinite;
}

/* 左から右へ色が流れるアニメーション */
@keyframes color-wave-anim {
    0% {
        background-position: 100% 0; /* 右端からスタート */
    }
    100% {
        background-position: -100% 0; /* 左へ流れる（見た目は波が右へ進む） */
    }
}

/* ★追加：左上固定タイトル */
.tn-section-title {
  position: absolute;
  top: 120px;  /* 上からの距離（ヘッダーと重ならないよう調整） */
  left: 10%;   /* 左からの距離 */
  z-index: 30; /* コンテンツより前面に */
  pointer-events: none; /* 下にあるスライド操作を邪魔しないように */
}

/* モバイル調整 */
@media screen and (max-width: 768px) {
  .tn-section-title {
    top: 30px;
    left: 20px;
  }
}

/* 横に動くコンテナ */
.horizontal-container {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  height: 100%;
  box-sizing: border-box;
  
  /* ★追加：ここが重要！ドット(z-index:0)より手前に持ち上げる設定 */
  position: relative;
  z-index: 10;
}

/* パネル（スライド1枚分） */
.horizontal-panel {
  width: 85vw;
  height: 100%; /* 高さは画面いっぱい */
	max-height:1080px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 4vw 80px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* --- カードレイアウト (tn-card) --- */
.tn-card {
  display: flex;
  justify-content: space-between;
  /*align-items: center;*/
  width: 100%;
  max-width: 1280px;
  height: auto;
  position: relative;
  gap: 60px;
}

/* --- 左側：テキストエリア (tn-text) --- */
.tn-text {
  width: 45%;
  z-index: 2;
  text-align: left;
}

/* 飾り */
.job-meta {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.1em;
}

.job-icon {
  color: #3399CC;
  font-size: 1.5rem;
}

/* 英語タイトル */
.job-en {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 4.5rem !important;
  line-height: 1.1!important;
  color: #3399CC;
  margin: 0 !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 日本語タイトル */
.job-jp {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.8rem !important;
  font-weight: 700;
  color: #222;
  margin: .5rem !important;
  letter-spacing: 0.1em;
}

/* 説明文 */
.job-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1rem;
  line-height: 2;
  color: #666;
  margin-bottom: 40px;
  font-feature-settings: "palt";
}

/* ボタン */
.job-btn {
  font-family: 'Josefin Sans', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background-color: #243b54;
  color: #fff;
  padding: 12px 20px 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  min-width: 220px;
  box-shadow: 0 10px 20px rgba(36, 59, 84, 0.2);
}

.job-btn .arrow {
  background: #fff;
  color: #243b54;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-left: 15px;
  transition: transform 0.3s ease;
}

.job-btn:hover {
  background-color: #3399CC;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(51, 153, 204, 0.3);
}
.job-btn:hover .arrow {
  transform: translateX(3px);
}

/* --- 右側：ビジュアルエリア (tn-visual) --- */
.tn-visual {
  width: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px; 
}

/* メイン画像 */
.img-main {
  width: 85%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 30px; 
  z-index: 2;
  box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
  transition: transform 0.5s ease;
}

/* サブ画像 */
.img-sub {
  position: absolute;
  top: -10%;
  right: 0;
  width: 40%;
  max-width: 240px;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 15px;
  z-index: 3;
  border: 5px solid #fff;
  box-shadow: 10px 10px 40px rgba(0,0,0,0.15);
  transition: transform 0.5s ease 0.1s;
}

/* 手書き風ポイント装飾 */
.hand-write {
  position: absolute;
  bottom: 10%;
  right: -5%;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: #3399CC;
  transform: rotate(-10deg);
  z-index: 4;
  background: #fff;
  padding: 5px 15px;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ホバー効果 */
.tn-card:hover .img-main {
  transform: scale(1.02);
}
.tn-card:hover .img-sub {
  transform: translateY(-10px) scale(1.02);
}

/* --- 背景装飾：巨大文字 --- */
.tn-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: 35vw; /* 画面幅の35%という超巨大サイズ */
  line-height: 1;
  color: #243b54; /* 紺色 */
  opacity: 0.03;  /* ★重要：限りなく薄くする（0.03〜0.05くらい） */
  
  z-index: 1; /* 一番奥に配置 */
  pointer-events: none; /* クリックの邪魔をしない */
  white-space: nowrap;
  user-select: none;
}

/* スマホでは少し小さく、あるいは縦書きにするなど */
@media screen and (max-width: 768px) {
  .tn-bg-text {
    font-size: 50vw;
    opacity: 0.02;
    transform: translate(-50%, -50%) rotate(90deg); /* スマホなら縦にしちゃうのもアリ */
  }
}


/* --- スマホ対応（768px以下） --- */
@media screen and (max-width: 768px) {
  .horizontal-panel {
    width: 100vw;
    padding: 80px 20px 60px; /* 上部にタイトル分の余白を確保 */
  }
  
  .tn-card {
    flex-direction: column-reverse;
    gap: 0px;
    height: auto;
  }
  
  .tn-text, .tn-visual {
    width: 100%;
  }
	.tn-text{
		text-align:center;
	}
	.tn-visual{
		    min-height: 300px;
	}
  .img-main {
    width: 90%;
    margin-right: auto;
  }
  
  .img-sub {
    width: 45%;
    top: -5%;
    right: 0;
  }
  
  .hand-write {
    font-size: 1.2rem;
    bottom: 0;
    right: 0;
  }

  .job-en { font-size: 3.5rem !important; }
  .job-jp { font-size: 1.2rem !important; }
  .job-desc { font-size: 0.95rem; text-align: justify; margin-bottom:20px;}
  
  .job-btn {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  .tn-text {
    text-align: center;
  }
  .job-meta {
    justify-content: center;
  }
}

/* ---========▼▼▼▼▼ 上下無限ループギャラリー ▼▼▼▼▼========--- */


/* --- カラム内 無限ループ用CSS --- */

/* 1. 外枠（窓）の設定 */
.v-loop-box {
  position: relative;
  width: 100%;
  height: 800px; /* ★ここの高さで表示エリアが決まります */
  overflow: hidden; /* はみ出し部分を隠す */
}

/* 2. 動くレール */
.v-move-track {
  display: flex;
  flex-direction: column;
  gap: 25px; /* 画像の間の隙間 */
  width: 100%;
}

/* 3. 画像の束 */
.v-img-group {
  display: flex;
  flex-direction: column;
  gap: 25px;
	margin:0 auto;
}

/* 4. 画像スタイル */
.v-img-group img {
  width: 300px;
  height: 300px; /* 画像1枚の高さ */
  object-fit: cover;
  display: block;
 border-radius: 12px; /* 角丸（お好みで） */

}


/* --- アニメーション設定 --- */

/* 上へ昇る動き */
.move-up {
  animation: loop-up 40s linear infinite;
}

/* 下へ降りる動き */
.move-down {
  animation: loop-down 40s linear infinite;
}

@keyframes loop-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); } /* 半分（1セット分）動いて戻る */
}

@keyframes loop-down {
  0% { transform: translateY(-50%); } /* 最初から半分ずらしておく */
  100% { transform: translateY(0); }   /* 0に戻ることで降りているように見える */
}

/* --- ▼スマホ対応：縦ループを横ループへ変身させる魔法 --- */
@media screen and (max-width: 768px) {
	
	.news-sec{
		padding:0 .5em;
	}
  /* 1. 箱の形を「縦長」から「横長の帯」に変える */
  .v-loop-box {
    height: 200px; /* スマホでの画像の高さ */
    width: 100vw;  /* 画面幅いっぱい */
    margin: 1em -20px!important; /* SWELLのパディング対策（画面端まで広げる） */
    border-radius: 0; /* 角丸解除 */
    background: transparent; /* 背景透明化 */
padding:1em 0;
  }

  /* 2. 中身の並び方向を「縦(column)」から「横(row)」に変える */
  .v-move-track {
    flex-direction: row; /* 横並び */
    width: max-content;  /* 中身に合わせて幅を確保 */
    gap: 10px;
  }

  .v-img-group {
    flex-direction: row; /* グループ内も横並び */
    gap: 10px;
  }

  /* 3. 画像サイズ調整 */
  .v-img-group img {
    width: 250px;  /* スマホでの画像1枚の幅 */
    height: 150px;  /* 高さは箱に合わせる */
    border-radius: 6px;
  }

  /* 4. アニメーションを「縦移動」から「横移動」へ上書き */
  
  /* 左ボックス（元・下から上）→ スマホでは「左へ流れる」 */
  .left-box .move-up {
    animation: loop-horizontal-left 20s linear infinite;
  }

  /* 右ボックス（元・上から下）→ スマホでは「右へ流れる」 */
  .right-box .move-down {
    animation: loop-horizontal-right 20s linear infinite;
  }
}

/* --- スマホ用 横移動アニメーション定義 --- */
@keyframes loop-horizontal-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 左へ半分動く */
}

@keyframes loop-horizontal-right {
  0% { transform: translateX(-50%); } /* 最初から半分左へ */
  100% { transform: translateX(0); }   /* 右へ戻る（右へ流れているように見える） */
}

/* ---========▼▼▼▼▼ 4分割パネルアニメーション（スマホ：右からスライド完全版） ▼▼▼▼▼========--- */

/* ラッパー：PC/スマホ共に絶対配置で親の上に重ねる */
.tn-four-panels-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0 !important;
  background-color: transparent; 
  z-index: 100; 
  pointer-events: none; 
  display: block;
}

/* 4つのパネルを収納するコンテナ */
.tn-panels-container {
  display: flex;
  width: 100%;
  height: 100%;
}

/* 各カラム（共通設定） */
.tn-panel-col {
  position: relative;
  overflow: hidden;
  background-color: #243b54;
  box-sizing: border-box;
  pointer-events: auto;
  
  /* CSSでは表示状態にしておく（JSで制御） */
  transform: none; 
  opacity: 1;
}

/* --- PC用レイアウト --- */
@media screen and (min-width: 769px) {
  .tn-panel-col {
    width: 25%;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,0.1);
  }
  .tn-panel-col:last-child { border-right: none; }
  
  .tn-panel-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin: 0;
  }
}

/* --- スマホ用レイアウト（右から左へ） --- */
@media screen and (max-width: 768px) {
  
  /* コンテナ：縦積みに変更 */
  .tn-panels-container { 
    flex-direction: column; 
  }
  
  /* パネル：横幅一杯、高さは画面の1/4ずつ */
  .tn-panel-col {
    width: 100%; 
    height: 25%; /* ★ここ重要：4枚で100%にする */
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .tn-panel-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin: 0;
  }
  
  /* オーバーレイの位置微調整 */
  .tn-panel-overlay {
    bottom: 20px;
    left: 20px;
  }
}

/* 共通：中身と画像 */
.tn-panel-inner { width: 100%; height: 100%; position: relative; overflow: hidden; }
.tn-panel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-panel-overlay { position: absolute; bottom: 30px; left: 20px; z-index: 2; opacity: 1; }


/* ---========▼▼▼▼▼ ガラス・オーバーレイセクション ▼▼▼▼▼========--- */
/* --- キャンバス（パーティクル背景）の設定 --- */
#glass-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* 背景として配置 */
  pointer-events: none; /* クリックを透過 */
}

/* 既存のラッパー設定に少し追記（念のため確認） */
.tn-glass-wrapper {
  /* 既存の設定はそのまま維持 */
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(51, 153, 204, 0.85); /* 青色の透過背景 */
  backdrop-filter: blur(10px);
  z-index: 200;
  
  /* 中身の配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* はみ出し防止 */
}

/* コンテンツはキャンバスより手前に */
.tn-glass-content {
  position: relative;
  z-index: 10; /* キャンバス(0)より手前 */
  width: 90%;
  max-width: 1200px;
  text-align: center;
}

/* タイトル周り */
.glass-title {
  font-size: 2rem!important;
  font-weight: 700;
  margin-bottom: 1em!important;
  letter-spacing: 0.05em;
  color: #fff;
	  font-family: "Zen Kurenaido", sans-serif;

}
.glass-sub {
  font-size: 1.2rem;
  margin-bottom: 60px;
  font-weight: bold;
}

/* アイコンの並び */
.glass-icons-row {
  justify-content: center;
  align-items: center;
  margin: 0 auto 60px;
	max-width:400px;
}

.glass-item {
  width: 100%;
  align-items: center;
}

/* 丸いアイコン枠 */
.glass-icon-circle {
  width: 120px; height: 120px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.glass-num {
  position: absolute;
  top: -15px;
  background: #fff;
  color: #3399CC;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 10px;
}

.glass-icon-img {
  width: 50%;
  height: auto;
}

.glass-item-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.4;
}

.glass-item-desc {
  font-size: 0.9rem;
  line-height: 1.8;
  text-align: left;
}

.glass-arrow {
  font-size: 2rem;
  padding-top: 40px;
  opacity: 0.5;
}

/* ボタン */
.glass-btn {
  display: block;
  align-items: center;
  border: 1px solid #fff;
  color: #fff;
  padding: 10px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
	width:50%;
	margin:1em auto;
	text-align:center;
}
.glass-btn:hover {
  background: #fff;
  color: #3399CC;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
  /* --- ガラスセクション（スマホでも絶対配置にする！） --- */
  .tn-glass-wrapper {
    
    /* 背景色だけ調整 */
    background-color: rgba(51, 153, 204, 0.9); /* 少し濃いめにする */
    padding: 60px 20px;
  }
  
  .glass-title { font-size: 1.5rem; }
  .glass-sub { font-size: 1rem; margin-bottom: 40px; }
  
  .glass-icons-row {
    flex-direction: column;
    gap: 40px;
  }
  .glass-item { width: 100%; }
  .glass-arrow { display: none; } /* スマホで矢印は消す */
  
  .glass-item-desc { text-align: center; }
	.glass-btn{width:90%;}
}

/* ---========▼▼▼▼▼ SF風ディバイダー（PC・スマホ完全対応版） ▼▼▼▼▼========--- */

.sf-divider-wrapper {
  position: relative;
  width: 100%;
  
  /* 【PC版のミソ】箱自体の高さは「0」にする */
  height: 0; 
  margin-top: 0 !important; /* マージンも0でOK */
  
  /* 箱からはみ出した図形を表示させる */
  overflow: visible; 
  z-index: 20;
  pointer-events: none;
	bottom: -40px;
}

/* SVG設定 */
.sf-notch-svg {
  position: absolute;
  bottom: 0; /* 下揃え */
  left: 0;
  width: 100%;
  
  /* 【PC版の高さ】ここで高さを指定します！ */
  /* 150pxあれば、PCでもしっかり深い段差に見えます */
  height: 60px; 
}

/* --- スマホ調整（成功している設定を維持） --- */
@media screen and (max-width: 768px) {
  .sf-divider-wrapper {
    /* スマホは以前の設定のままでOK */
	bottom: -35px;
  }
  
  .sf-notch-svg {
    /* スマホでは親要素の高さに合わせる */
    height: 45px; 
  }
}


/* ---========▼▼▼▼▼ マップ ▼▼▼▼▼========--- */
.map_sec{
	margin-bottom:0!important;
}
.mono iframe{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: 0.4s;
	display: block;       /* これで「行間の隙間」が消えます */
  vertical-align: bottom; /* 念のための保険 */
}
iframe:hover{
  filter: none;
  -webkit-filter: none;
}
/* Googleマップのiframeを狙い撃ちして色を反転させる */
iframe[src*="google.com/maps"] {
  /* 1. invert(92%): 白い地図を「92%」反転させて、濃いグレーにします。
     2. hue-rotate(180deg): 反転した色相を180度回して、自然な色味に戻します。
        （これにより、赤いピンが「サイバーブルー（水色）」に光って見えます）
     3. contrast(1.2): ぼやけないようにコントラストを上げてクッキリさせます。
  */
  filter: invert(92%) hue-rotate(180deg) contrast(120%);
  
  /* 角を少し丸くして、浮かんでいるパネル感を出す */
  border-radius: 12px;
  
  /* 完全に真っ暗にしたい場合は brightness(80%) などを追加してもOK */
}

/* ---========▼▼▼▼▼ Contact & Footer ▼▼▼▼▼========--- */

/* 共通設定：濃紺の背景エリア */
.tn-dark-section,
.tn-footer {
  background-color: #0a1520; /* ディバイダーと同じ色で継ぎ目なしにする */
  color: #fff;
  font-family: 'Josefin Sans', sans-serif;
  position: relative;
  z-index: 10;
}

.tn-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Contact Section --- */
.tn-dark-section {
  padding: 60px 0 30px;
}

.tn-section-header {
  text-align: center;
  margin-bottom: 50px;
}

.tn-title-en {
  font-size: 3rem!important;
  letter-spacing: 0.1em;
  margin: 0!important;
  background: linear-gradient(to right, #fff, #3399CC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tn-title-jp {
  font-size: 0.9rem!important;
  color: #3399CC;
  letter-spacing: 0.2em;
  margin-top: 10px;
  font-weight: 700;
}

/* コンタクトグリッド */
.tn-contact-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(51, 153, 204, 0.2);
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
  position: relative;
}

/* 各ボックス共通 */
.tn-contact-box {
  flex: 1;
  text-align: center;
}

.box-label {
  display: block;
  font-size: 0.8rem;
  color: #3399CC;
  letter-spacing: 0.2em;
  margin-bottom: 15px;
  font-weight: 700;
}

/* 電話エリア */
.phone-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.phone-number {
  font-size: 2.5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all 0.3s;
  /* デジタルっぽい発光 */
  text-shadow: 0 0 10px rgba(51, 153, 204, 0.5);
}

.phone-number:hover {
  color: #3399CC;
  text-shadow: 0 0 20px rgba(51, 153, 204, 1);
}

.phone-desc, .form-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.9rem;
  color: #aaa;
  margin: 0;
}
.form-desc { margin-bottom: 20px; }

/* 中央の仕切り線 */
.tn-contact-divider {
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, #3399CC, transparent);
  opacity: 0.5;
}

/* フォームボタン */
.tn-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  padding: 15px 20px;
  background: #3399CC;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 700;
  transition: all 0.3s;
  box-shadow: 0 5px 20px rgba(51, 153, 204, 0.4);
}

.tn-contact-btn .arrow {
  margin-left: 10px;
  transition: transform 0.3s;
}

.tn-contact-btn:hover {
  background: #fff;
  color: #3399CC;
  box-shadow: 0 0 30px rgba(51, 153, 204, 0.8);
  transform: translateY(-2px);
}
.tn-contact-btn:hover .arrow {
  transform: translateX(5px);
}


/* --- Footer Section --- */
.tn-footer {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 60px 0 30px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 50px;
}

.footer-logo {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
}

.footer-logo img {
filter: brightness(0) invert(1);
}

.footer-address {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #888;
}

.footer-links {
  display: flex;
  gap: 60px;
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  margin-bottom: 15px;
}

.link-list a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
  font-size: 1rem;
}

.link-list a:hover {
  color: #3399CC;
  text-shadow: 0 0 10px rgba(51, 153, 204, 0.5);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-socials {
  display: flex;
  gap: 20px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.3s;
}

.social-icon:hover {
  background: #3399CC;
  border-color: #3399CC;
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(51, 153, 204, 0.5);
}

.copyright {
  font-size: 0.8rem;
  color: #666;
}

/* --- スマホ対応 (768px以下) --- */
@media screen and (max-width: 768px) {
  .tn-contact-wrapper {
    flex-direction: column;
    padding: 30px;
    gap: 30px;
  }
  
  .tn-contact-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, #3399CC, transparent);
  }
  
  .phone-number {
    font-size: 1.8rem;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 40px;
  }
  
  .footer-links {
    width: 100%;
    justify-content: flex-start;
    gap: 40px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

/*===========================================▼フロー▼================================================*/

.flow-clm{
	max-height:600px;
}

.flow_step .swell-block-step__title{
  --accent: #50c2c2;
  --line-h: 1px;  
  --dot: 12px;   

  position: relative;
  padding-bottom: 16px;
  font-weight: 700;
  color: #fff;      
}
.flow_step .swell-block-step__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: var(--dot);  
  bottom: 0;
  height: var(--line-h);
  background: var(--accent);
  border-radius: 999px;
}
.flow_step .swell-block-step__title::before {
  content: "";
  position: absolute;
  right: 0;
  width: var(--dot);
  height: var(--dot);
  bottom: calc((var(--line-h) - var(--dot)) / 2); 
  border: var(--line-h) solid var(--accent);
  border-radius: 50%;
  background: transparent; 
}
.flow_step .swell-block-step__number{
  border:solid 1px #50c2c2;
  box-shadow: 0px 0px 6px #50c2c2;
}

/*===========================================▼ロゴ無限ループエリア▼================================================*/

.tn-logo-loop-section {
  width: 100%;
  overflow: hidden; /* 画面外のロゴを隠す */
  padding: 40px 0; /* 上下の余白 */
  white-space: nowrap; /* 画像を横一列に並べる */
  position: relative;
  z-index: 10;
}

/* スクロールするレール */
.tn-logo-track {
  display: inline-block;
  /* 40秒かけて一周するアニメーション（時間は好みで変更可） */
  animation: logo-slide-infinite 40s linear infinite;
}

/* ロゴ画像の設定 */
.tn-logo-track img {
  height: 50px; /* ロゴの高さ（お好みで調整） */
  width: auto;
  margin: 0 60px; /* ロゴ同士の間隔 */
  vertical-align: middle;
   transition-duration: 0.7s;
	filter: brightness(0) invert(1);
  
  /* 画像が選択されないようにする */
  user-select: none;
  -webkit-user-drag: none;
}

/* ホバー時にロゴを濃くする */
.tn-logo-track img:hover {
  filter: brightness(1) invert(0);
}

/* --- アニメーション定義（無限ループ） --- */
@keyframes logo-slide-infinite {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 画像セットの半分（50%）まで移動したら0に戻ることでループさせる */
    transform: translateX(-50%);
  }
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
  .tn-logo-track img {
    height: 30px; /* スマホでは少し小さく */
    margin: 0 30px; /* 間隔も詰める */
  }
}

/* ---========▼▼▼▼▼ パスワード保護画面（完全復元・SFデザイン版） ▼▼▼▼▼========--- */

/* 
  body:has(.tn-password-gate)
  「もし画面内に .tn-password-gate（パスワード入力欄）がある場合だけ、
    body（ページ全体）のデザインを変更する」という最新の指定方法です。
*/

/* 1. ページ全体のレイアウト（パスワード画面がある時だけ適用） */
body:has(.tn-password-gate),
body:has(.tn-password-gate) .site {
  background-color: #0a1520 !important; /* 強制的に濃紺 */
  color: #fff !important;
  display: flex;
  flex-direction: column;
  margin: 0;
	min-height:100vh!important;
}
body:has(.tn-password-gate) #content{
	height:100vh;
}

/* 2. ヘッダーをダークモード化（パスワード画面がある時だけ） */
body:has(.tn-password-gate) #masthead,
body:has(.tn-password-gate) .site-header,
body:has(.tn-password-gate) header {
  background-color: #0a1520 !important;
  border-bottom: 1px solid rgba(51, 153, 204, 0.2);
}

/* ヘッダー内の文字を白くする */
body:has(.tn-password-gate) header a,
body:has(.tn-password-gate) header li,
body:has(.tn-password-gate) #masthead a,
body:has(.tn-password-gate) .site-header a {
  color: #fff !important;
}

/* ヘッダーのロゴ（画像）を白く反転させる */
body:has(.tn-password-gate) header img,
body:has(.tn-password-gate) #masthead img,
body:has(.tn-password-gate) .custom-logo {
  filter: brightness(0) invert(1);
}

/* 3. メインエリア（コンテンツ部分）の調整 */
body:has(.tn-password-gate) #content,
body:has(.tn-password-gate) main,
body:has(.tn-password-gate) .site-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0a1520 !important;
  
  /* サイバーなグリッド背景 */
  background-image: 
    linear-gradient(rgba(51, 153, 204, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 153, 204, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* フッターも黒く */
body:has(.tn-password-gate) footer,
body:has(.tn-password-gate) .site-footer {
  background-color: #0a1520 !important;
  color: #fff !important;
  border-top: 1px solid rgba(51, 153, 204, 0.2);
}

/* --- 4. セキュリティゲート本体（回転ボーダー版） --- */
.tn-password-gate {
  width: 100%;
  max-width: 600px;
  padding: 60px 60px;
  
  /* 【重要】ここが回転アニメーションの肝です */
  position: relative;
  overflow: hidden; /* はみ出した光をカットする */
  z-index: 1; /* 重なり順の基準を作る */
  
  /* 角丸 */
  border-radius: 16px;
  
  /* 以前のborderプロパティは削除し、影だけ残します */
  /* border: ...; ←削除 */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  
  text-align: center;
}
/* ★追加：青いサブタイトル（制作事例） */
.tn-gate-subtitle {
  color: #3399CC; /* ブランドカラー */
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em; /* 文字間を広げてテック感を出す */
  margin-bottom: 5px; /* タイトルとの距離 */
  text-transform: uppercase; /* 強制的に大文字にする */
  
  /* 青い光の滲み */
  text-shadow: 0 0 15px rgba(51, 153, 204, 0.8);
  
  /* ふわっと出現するアニメーション（お好みで） */
  animation: tn-text-flicker 3s infinite alternate;
}

/* ついでにメインタイトルのマージンを少し調整 */
.tn-gate-title {
  margin-top: 0; /* 上の隙間を詰める */
}

/* チカチカ点滅アニメーション */
@keyframes tn-text-flicker {
  0% { opacity: 0.8; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* ▼▼▼ 回転する青い光の帯（土台） ▼▼▼ */
.tn-password-gate::before {
  content: '';
  position: absolute;
  z-index: -2; /* 一番後ろへ */
  
  /* 中心に配置 */
  left: 50%;
  top: 50%;
  /* 回転しても角が見えないように十分大きくする */
  width: 200%;
  height: 200%;
  
  /* レーダーのようなグラデーションを作る */
  background: conic-gradient(
    transparent 0deg, 
    transparent 270deg, 
    #3399CC 360deg /* ここが光の先端 */
  );
  
  /* グルグル回す */
  animation: tn-border-rotate 4s linear infinite;
  
  /* 中心を基準に配置補正 */
  transform: translate(-50%, -50%);
}

/* ▼▼▼ 内側の黒い背景（マスク） ▼▼▼ */
/* これを重ねることで、縁（ボーダー）だけが光っているように見せます */
.tn-password-gate::after {
  content: '';
  position: absolute;
  z-index: -1; /* 光よりは手前、文字よりは奥 */
  
  /* 縁の太さ（ここを2pxや3pxにすると線が太くなります） */
  inset: 2px; 
  
  /* 背景色（少し透けさせる） */
  background: rgba(10, 21, 32, 0.85); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* 親要素に合わせて角丸 */
  border-radius: 14px; /* 親(16px)からinset分引くと綺麗 */
	box-shadow: 0 0 20px rgba(51, 153, 204, 0.8);
}

/* 回転アニメーション定義 */
@keyframes tn-border-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* --- 以下、中のコンテンツ装飾（変更なし） --- */

/* アイコン */
.tn-gate-icon svg {
  width: 50px; height: 50px; margin-bottom: 20px;
  stroke: #3399CC;
  filter: drop-shadow(0 0 10px rgba(51, 153, 204, 0.8));
  animation: tn-pulse 3s infinite;
}

/* タイトル */
.tn-gate-title {
  font-family: 'Josefin Sans', sans-serif;
  color: #fff; font-size: 2rem!important; margin-bottom: 10px;
  letter-spacing: 0.15em;
  text-shadow: 0 0 10px rgba(51, 153, 204, 0.5);
	margin:2em auto!important;
}

/* 説明文 */
.tn-gate-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem; margin-bottom: 40px;
  font-family: "Noto Sans JP", sans-serif;
}

/* 入力欄 */
.tn-gate-input-wrap {
  margin-bottom: 20px;
}
.tn-gate-input {
  width: 100%; padding: 15px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(51, 153, 204, 0.3);
  border-radius: 50px;
  color: #fff; font-family: 'Josefin Sans', sans-serif;
  font-size: 1.1rem; text-align: center;
  outline: none; transition: 0.3s;
}
.tn-gate-input:focus {
  border-color: #3399CC;
  box-shadow: 0 0 15px rgba(51, 153, 204, 0.4);
  background: rgba(0, 0, 0, 0.8);
}

/* 送信ボタン */
.tn-password-gate .tn-submit-btn {
  width: 100%; padding: 15px 0;
  background: linear-gradient(90deg, #3399CC, #2575a0);
  color: #fff; border: none; border-radius: 50px;
  font-family: 'Josefin Sans', sans-serif; font-weight: 700;
  cursor: pointer; transition: 0.3s;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  display: block; margin: 0 auto;
}
.tn-password-gate .tn-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(51, 153, 204, 0.6);
  filter: brightness(1.2);
}

/* アイコン点滅 */
@keyframes tn-pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; filter: drop-shadow(0 0 15px #3399CC); }
  100% { opacity: 0.5; }
}

/* ---========▼▼▼▼▼ Aboutページ（SFデータベース風） ▼▼▼▼▼========--- */

.tn-about-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 80px;
  font-family: 'Josefin Sans', "Noto Sans JP", sans-serif;
  color: #fff;
}

/* --- セクション共通設定 --- */
.tn-about-section {
  margin-bottom: 100px;
  position: relative;
}

/* セクション見出し（ID番号付き） */
.about-section-header {
  align-items: baseline;
  border-bottom: 1px solid rgba(51, 153, 204, 0.3);
  padding-bottom: 10px;
}
.tn-section-id {
  font-size: 3rem;
  font-weight: 700;
  color: rgba(51, 153, 204, 0.2);
  margin-right: 20px;
  line-height: 1;
}
.about-section-title {
  font-size: 2rem!important;
  color: #3399CC;
  letter-spacing: 0.1em;
  margin: 0;
  text-shadow: 0 0 10px rgba(51, 153, 204, 0.5);
	padding:0 0 0.5em 0.5em!important;
}

/* --- 01. VISION エリア --- */
.tn-vision-box {
  padding: 40px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 4px solid #3399CC; /* 左に青いライン */
  background: linear-gradient(90deg, rgba(51,153,204,0.05) 0%, transparent 100%);
}
.tn-vision-lead {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1.6;
}
.tn-vision-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #ccc;
}

.tn-biz-list {
  display: flex;
  flex-direction: column;
  gap: 60px; /* 各事業ごとの間隔 */
}

/* 各事業のブロック */
.tn-biz-item {
  display: flex;
  background: rgba(10, 21, 32, 0.6); /* 半透明の黒背景 */
  border: 1px solid rgba(51, 153, 204, 0.3);
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

/* ホバー時に枠を光らせる */
.tn-biz-item:hover {
  border-color: #3399CC;
  box-shadow: 0 0 20px rgba(51, 153, 204, 0.2);
  background: rgba(10, 21, 32, 0.8);
}

/* --- 画像エリア（左側） --- */
.tn-biz-image {
  width: 40%;
  position: relative;
  overflow: hidden;
  min-height: 300px; /* 画像エリアの最低高さ */
}

.tn-biz-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいにトリミング */
  transition: transform 0.5s ease;
}
/* ホバーで画像ズーム */
.tn-biz-item:hover .tn-biz-image img {
  transform: scale(1.05);
}

/* 左上の数字バッジ */
.tn-biz-num {
  position: absolute;
  top: 0;
  left: 0;
  background: #3399CC;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 10px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); /* 角を落とす */
  z-index: 2;
}

/* --- コンテンツエリア（右側） --- */
.tn-biz-content {
  width: 60%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* タイトル */
.tn-biz-content h3 {
  font-size: 1.5rem;
  color: #3399CC;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(51, 153, 204, 0.2);
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 15px;
}
.tn-biz-content h3 .ja {
  font-size: 1rem;
  color: #fff;
  font-weight: normal;
}

/* 説明文 */
.tn-biz-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #ddd;
  margin-bottom: 20px;
}

/* サービス内容リスト */
.tn-biz-features {
  list-style: none;
  padding: 0!important;
  margin: 0 0 30px 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列にする */
  gap: 10px;
}
.tn-biz-features li {
  font-size: 0.9rem;
  color: #aaa;
  position: relative;
  padding-left: 15px;
}
/* リストの先頭に四角いマーク */
.tn-biz-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: #3399CC;
}

/* --- ボタン --- */
.tn-biz-btn-area {
  text-align: right; /* 右寄せにする */
}
.tn-biz-btn {
  display: inline-block;
  padding: 10px 30px;
  background: transparent;
  border: 1px solid #3399CC;
  color: #3399CC;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  position: relative;
  overflow: hidden;
}

/* ボタンホバー時 */
.tn-biz-btn:hover {
  background: #3399CC;
  color: #fff;
  box-shadow: 0 0 15px rgba(51, 153, 204, 0.5);
}

/* --- スマホ対応 (768px以下) --- */
@media screen and (max-width: 768px) {
  .tn-biz-item {
    flex-direction: column; /* 縦積みにする */
  }
  
  .tn-biz-image {
    width: 100%;
    height: 200px; /* スマホでの画像高さ固定 */
    min-height: auto;
  }
  
  .tn-biz-content {
    width: 100%;
    padding: 30px 20px;
  }
  
  .tn-biz-features {
    grid-template-columns: 1fr; /* リストを1列に */
  }
  
  .tn-biz-content h3 {
    flex-direction: column;
    gap: 5px;
  }
  .tn-biz-btn-area {
    text-align: center; /* スマホではボタン中央 */
  }
}

/* --- 03. COMPANY PROFILE（スペック表デザイン） --- */
.tn-profile-table {
  border-top: 2px solid #3399CC;
}


.tn-profile-table dl {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
  transition: 0.3s;
}
.tn-profile-table dl:hover {
  background: rgba(51, 153, 204, 0.05); /* ホバーで行が少し光る */
}

/* 見出し（左側） */
.tn-profile-table dt {
  width: 30%;
  padding: 20px;
  font-weight: 700;
  color: #3399CC;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center; /* 上下中央 */
  letter-spacing: 0.05em;
}

/* 内容（右側） */
.tn-profile-table dd {
  width: 70%;
  margin: 0;
  padding: 20px;
  color: #ddd;
  line-height: 1.8;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
  .tn-profile-table dl {
    flex-direction: column; /* スマホでは縦並び */
  }
  .tn-profile-table dt,
  .tn-profile-table dd {
    width: 100%;
    border-right: none;
    padding: 15px;
  }
  .tn-profile-table dt {
    background: rgba(51, 153, 204, 0.1);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  
  .tn-section-id {
    font-size: 2rem;
  }
  .about-section-title {
    font-size: 1.7rem!important;
  }
}

/* ---========▼▼▼▼▼ NEWSカテゴリー（ヘッダー白・タイトル調整版） ▼▼▼▼▼========--- */

/* 1. 全体の背景設定（濃紺グリッド） */
#body_wrap.category-news {
  background-color: #0a1520 !important;
  color: #fff !important;
  min-height: 100vh;
  
  /* グリッド背景 */
  background-image: 
    linear-gradient(rgba(51, 153, 204, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 153, 204, 0.05) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  background-attachment: fixed !important;
}

/* 2. SWELLの白い背景エリアを透明化（ヘッダー以外） */
#body_wrap.category-news #content,
#body_wrap.category-news #main_content,
#body_wrap.category-news .l-content,
#body_wrap.category-news .l-mainContent,
#body_wrap.category-news .l-mainContent__inner,
#body_wrap.category-news .l-container,
#body_wrap.category-news .l-article,
#body_wrap.category-news main,
#body_wrap.category-news .l-main {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* （ヘッダーを黒くする記述は削除しました。これでデフォルトの白に戻ります） */


/* 4. ページタイトル（NEWS）の装飾 */
#body_wrap.category-news .c-pageTitle {
  background: transparent !important;
  color: #3399CC !important;
  font-family: 'Josefin Sans', sans-serif !important;
  text-shadow: 0 0 20px rgba(51, 153, 204, 0.6) !important;
  border: none !important;
  padding: 60px 0 20px !important;
  text-align: center;
}

/* ★不要な文字を非表示にする設定★ */
/* 「- category -」を消す */
#body_wrap.category-news .c-pageTitle__subTitle {
  display: none !important;
}
/* SWELL標準の装飾線などを消す */
#body_wrap.category-news .c-pageTitle::before,
#body_wrap.category-news .c-pageTitle::after {
  display: none !important;
}
/* （「SYSTEM LOGS」を追加する記述も削除しました） */


/* 5. 記事リスト（テキスト型）のSFデザイン */
/* リスト全体 */
#body_wrap.category-news .p-postList {
  border-top: 2px solid #3399CC !important;
  margin-top: 30px !important;
}
/* 各行 */
#body_wrap.category-news .p-postList__item {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(51, 153, 204, 0.2) !important;
  padding: 0 !important;
}
/* リンク部分 */
#body_wrap.category-news .p-postList__link {
  color: #ffffff !important;
  display: block !important;
  padding: 20px 15px !important;
  transition: all 0.3s !important;
}
/* ホバー時 */
#body_wrap.category-news .p-postList__link:hover {
  background-color: rgba(51, 153, 204, 0.15) !important;
  padding-left: 25px !important;
  border-left: 4px solid #3399CC !important;
  text-decoration: none !important;
}
/* 記事タイトル */
#body_wrap.category-news .p-postList__title {
  color: #ffffff !important;
  font-size: 1.1rem !important;
}
/* 日付など */
#body_wrap.category-news .c-postTimes__posted,
#body_wrap.category-news .p-postList__cat {
  color: #3399CC !important;
}
#body_wrap.category-news .p-postList__cat {
  background: transparent !important;
}

/* 6. パンくずリストとフッター */
#body_wrap.category-news #breadcrumb {
  background: transparent !important;
}
#body_wrap.category-news .p-breadcrumb__text,
#body_wrap.category-news .p-breadcrumb__text span {
  color: rgba(255,255,255,0.7) !important;
}
#body_wrap.category-news .p-breadcrumb__item a {
  color: #3399CC !important;
}
/* フッターは黒のまま */
#body_wrap.category-news #footer,
#body_wrap.category-news .l-footer {
  background-color: #0a1520 !important;
  color: #fff !important;
  border-top: 1px solid rgba(51, 153, 204, 0.2) !important;
}

/* ページネーション */
#body_wrap.category-news .page-numbers {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(51, 153, 204, 0.3) !important;
}
#body_wrap.category-news .page-numbers.current,
#body_wrap.category-news .page-numbers:hover {
  background: #3399CC !important;
  border-color: #3399CC !important;
}

/* ---========▼▼▼▼▼ 最終パフォーマンスチューニング（見た目変更なし） ▼▼▼▼▼========--- */

/* 1. 動く要素をGPUレイヤーに独立させる（再描画のコスト削減） */
.v-move-track,        /* 縦無限ループ */
.v-img-group,         /* 縦無限ループの画像群 */
.horizontal-container, /* 横スクロール全体 */
.tn-logo-track,       /* ロゴ無限ループ */
.text-tech,           /* ヒーローテキスト */
.text-logo-style,     /* ヒーローロゴ */
.hero-wrapper,        /* ヒーロー全体 */
.enter-section-wrapper /* Enterキーセクション */
{
  /* 3D変形を有効にしてGPUを強制使用 */
  transform: translate3d(0, 0, 0);
  /* 裏面の描画を省略 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 遠近感をリセット */
  perspective: 1000px;
}

/* 2. 画像のレンダリング最適化 */
img {
  /* 画像の配置計算を簡略化 */
  content-visibility: auto;
}

/* 3. Enterキー動画の最適化 */
.target-video {
  /* 動画を独立レイヤー化 */
  will-change: transform; 
}

/* ---========▼▼▼▼▼ 最終パフォーマンスチューニング（見た目変更なし） ▼▼▼▼▼========--- */
.recaptcha-p{
	text-align:center;	
	margin-top:1em;
	line-height: 1.3em;
}
.recaptcha-p p{
	color: #C0C0C0;
    font-size: 11px;
}
.grecaptcha-badge { visibility: hidden; }