/* =========================================
   world
   ========================================= */
/* 地図セクションの全体枠 */
.seira-global-map-wrapper {
  width: 100%;
  margin: 40px 0;
  padding: 0;
  position: relative;
}

/* 地図本体: 縮小されすぎないように最小幅を固定 */
.seira-global-map {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.map-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* ピンの共通設定 */
.map-location {
  position: absolute;
  z-index: 10;
}

/* 各国の座標 */
.loc-japan {  top: 39%; left: 62%; }
.loc-india {  top: 61%;  left: 25%; }
.loc-china { top: 45%; left: 48%; }
.loc-usa { top: 35%; left: 90%; }
.loc-myanmar { top: 62%; left: 35%; }
.loc-thailand { top: 65%; left: 40%; }

/* 国旗アイコンの設定 */
.map-pin {
width: clamp(32px, 5vw, 54px);
  height: clamp(32px, 5vw, 54px);
  margin-left: calc(clamp(32px, 5vw, 54px) / -2);
  z-index: 5;
}

.map-pin:hover { 
  transform: scale(1.15); 
}

.map-pin img { 
  width: 100%; 
  height: 100%;
  object-fit: contain; /* 画像を崩さずにコンテナに収める */
  display: block;
}

/* フキダシ全体の設定 */
.map-tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  width: max-content;
  border-top: 3px solid #1e3a8a;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.map-location:hover .map-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 拠点名の見出し */
.map-tooltip h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: bold;
  color: #1e3a8a;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 4px;
}

/* リスト(ul)の設定 */
.map-tooltip ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* リスト項目(li)の設定 */
.map-tooltip li {
  font-size: 11px;
  color: #333;
  line-height: 1.5;
  white-space: nowrap;
  padding: 2px 0;
}

/* --- 左上に浮かせるテキスト --- */
.company__content {
  position: absolute; /* 親(wrapper)を基準に絶対配置 */
  top: 5%;   /* 上からの位置（お好みで調整） */
  left: 5%;  /* 左からの位置（お好みで調整） */
  max-width: 420px;
  z-index: 1;
}

/* リード文のデザイン */
.company__lead {
  font-size: clamp(16px, 3vw, 24px);
  font-weight: bold;
  color: #1e3a8a; /* SEIRAブルー */
}

/* 説明文のデザイン */
.company__description {
  font-size: clamp(12px, 2.5vw, 14px);
  line-height: 1.6;
  color: #333333;
  z-index: 10;
}





/* =========================================
   無限スクロール（巨大テクスチャ風）
   ========================================= */

/* 外側の枠 */
.seira-ticker-wrapper {
  width: 100%;
  overflow: hidden;
  background-color: #ffffff; /* 👈 背景を真っ白にして上下と馴染ませる */
  padding: 40px 0; /* 上下の余白を広めにとって優雅に */
}

/* 文字を乗せるレール */
.seira-ticker-track {
  display: flex;
  width: max-content;
  /* 30秒かけてゆっくり動かす（重厚感が出ます） */
  animation: ticker-slide 100s linear infinite; 
}

/* 文字のデザイン */
.seira-ticker-text {
  /* 👈 最小40px〜最大100pxまでドカンと巨大化！ */
  font-size: clamp(40px, 8vw, 100px); 
  font-weight: 900;
  /* 👈 SEIRAブルーを透明度5%（0.05）にして極薄の背景模様に！ */
  color: rgba(30, 58, 138, 0.5); 
  white-space: nowrap;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

/* 単語の間の「・」のデザイン */
.ticker-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  /* 👈 オレンジも少し薄くして馴染ませる */
  background-color: rgba(255, 102, 0, 0.5); 
  border-radius: 50%;
  margin: 0 40px; /* 左右の余白も広げる */
}

/* アニメーションの動き */
@keyframes ticker-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}




/* =========================================
   切り替わる文字（パタパタアニメーション）
   ========================================= */

/* 全体のレイアウト */
.seira-dynamic-text-wrap {
  font-size: clamp(20px, 4vw, 36px);
  font-weight: 900;
  color: #1e3a8a;
  margin: 80px 0; 
  letter-spacing: 0.05em;
  /* Flexboxをやめて、テキスト用の「中央揃え」に変更！ */
  text-align: center; 
  line-height: 1.5; /* スマホで改行された時のために少し行間を確保 */
}

/* スロットの「窓」（ここからはみ出た文字は隠す） */
.sliding-words-window {
  display: inline-flex;
  vertical-align: 0px;
  height: 1.2em;
  overflow: hidden;
  position: relative;
  margin: 0 4px; /* ここの数字で左右の隙間を調整！ */
  color: #ff6600;
  border-bottom: 4px solid #ff6600;
}

/* スロットの「リール」（文字が縦に並んでいるレール） */
.sliding-words-track {
  display: flex;
  flex-direction: column;
  /* 8秒かけてアニメーション。少しバネのように弾むプロの隠し味！ */
  animation: slide-up-words 8s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; 
}

/* 各キーワードの箱 */
.word {
  height: 1.2em;
  line-height: 1.2;
  text-align: center;
}

/* アニメーションの動き（8秒かけて4つの言葉を移動） */
@keyframes slide-up-words {
  0%, 20%   { transform: translateY(0); }           /* 浜松 */
  25%, 45%  { transform: translateY(-1.2em); }      /* インド */
  50%, 70%  { transform: translateY(-2.4em); }      /* シカゴ */
  75%, 95%  { transform: translateY(-3.6em); }      /* 世界中 */
  100%      { transform: translateY(-4.8em); }      /* 浜松（ループ用） */
}

/* 文字の箱が勝手に広がらないようにストッパーをかける */
.seira-dynamic-text-wrap > span {
  flex: none !important;
  width: auto !important;
}