/* --- 🌟 トップページ専用スタイル (css/home.css) - 幾何学＆縮小スノー版 🌟 --- */

.hero {
  position: relative;
  height: 100vh;
  /* 🌟 直線と多角形で構成された幾何学的な結晶SVG 🌟 */
  background-image: 
    /* 層1: 幾何学的な結晶 (奥、少し大きめ) */
    /* viewBoxを200x200と広く取ることで、結晶自体を相対的に小さくしています */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cg id='a1'%3E%3Cline x1='0' y1='0' x2='0' y2='-35' stroke-width='1.5'/%3E%3Cpolygon points='0,-42 4,-32 -4,-32' fill='rgba(150,200,255,0.4)' stroke='none'/%3E%3Cline x1='0' y1='-15' x2='10' y2='-25' stroke-width='1.2'/%3E%3Cline x1='0' y1='-15' x2='-10' y2='-25' stroke-width='1.2'/%3E%3Cline x1='0' y1='-5' x2='6' y2='-11' stroke-width='1'/%3E%3Cline x1='0' y1='-5' x2='-6' y2='-11' stroke-width='1'/%3E%3C/g%3E%3C/defs%3E%3Cg stroke='rgba(150,200,255,0.4)' stroke-linecap='square'%3E%3Cpolygon points='100,92 107,96 107,104 100,108 93,104 93,96' fill='none' stroke-width='1.5'/%3E%3Cg transform='translate(100,100)'%3E%3Cuse href='%23a1' transform='rotate(0)'/%3E%3Cuse href='%23a1' transform='rotate(60)'/%3E%3Cuse href='%23a1' transform='rotate(120)'/%3E%3Cuse href='%23a1' transform='rotate(180)'/%3E%3Cuse href='%23a1' transform='rotate(240)'/%3E%3Cuse href='%23a1' transform='rotate(300)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    
    /* 層2: 幾何学的な結晶 (手前、さらに小さめ) */
    /* 先端にひし形(斜めの正方形)を配置し、サイバー感を強調 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cg id='a2'%3E%3Cline x1='0' y1='0' x2='0' y2='-25' stroke-width='1'/%3E%3Crect x='-2' y='-30' width='4' height='4' fill='rgba(150,200,255,0.25)' stroke='none' transform='rotate(45 0 -28)'/%3E%3Cline x1='0' y1='-10' x2='6' y2='-16' stroke-width='0.8'/%3E%3Cline x1='0' y1='-10' x2='-6' y2='-16' stroke-width='0.8'/%3E%3C/g%3E%3C/defs%3E%3Cg stroke='rgba(150,200,255,0.25)' stroke-linecap='square'%3E%3Cpolygon points='100,95 104,97.5 104,102.5 100,105 96,102.5 96,97.5' fill='none' stroke-width='1'/%3E%3Cg transform='translate(100,100)'%3E%3Cuse href='%23a2' transform='rotate(15)'/%3E%3Cuse href='%23a2' transform='rotate(75)'/%3E%3Cuse href='%23a2' transform='rotate(135)'/%3E%3Cuse href='%23a2' transform='rotate(195)'/%3E%3Cuse href='%23a2' transform='rotate(255)'/%3E%3Cuse href='%23a2' transform='rotate(315)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    
    /* 元のダークグラデーション背景 */
    radial-gradient(circle at center, #0f172a 0%, #020617 100%);
  
  /* 🌟 サイズを広く保ち「時々」降るまばらな間隔を維持 🌟 */
  background-size: 1000px 1000px, 700px 700px, auto;
  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
  overflow: hidden;
  
  /* ゆっくりと優雅に落下 */
  animation: crystal_fall 55s linear infinite;
}

/* --- 🌟 1. 3Dサイバーグリッド（床面）🌟 --- */
.hero::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: 
    linear-gradient(rgba(41, 181, 232, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 181, 232, 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(600px) rotateX(75deg) translateY(0) translateZ(-200px);
  animation: gridMove 10s linear infinite;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
}

/* --- 🌟 2. 飛び交う光のデータストリーム（レーザー）🌟 --- */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(90deg, transparent 0%, rgba(41, 181, 232, 0) 40%, rgba(255, 255, 255, 0.9) 50%, rgba(41, 181, 232, 0) 60%, transparent 100%),
    linear-gradient(0deg, transparent 0%, rgba(41, 181, 232, 0) 40%, rgba(41, 181, 232, 0.9) 50%, rgba(41, 181, 232, 0) 60%, transparent 100%);
  background-size: 200% 2px, 2px 200%;
  background-repeat: no-repeat;
  opacity: 0.6;
  z-index: 2;
  animation: dataStreamFlash 4s infinite;
}

/* --- 🌟 3. ヒーローコンテンツ（スリガラスの浮遊パネル）🌟 --- */
.hero-content {
  position: relative;
  z-index: 10;
  background: rgba(15, 23, 42, 0.4);
  padding: 60px;
  border-radius: 20px;
  border: 1px solid rgba(41, 181, 232, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 40px rgba(41, 181, 232, 0.1), inset 0 0 20px rgba(41, 181, 232, 0.05);
  animation: floatPanel 6s ease-in-out infinite;
}

.hero-content h1 {
  font-size: 3.8rem;
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 0 0 15px rgba(41, 181, 232, 0.6), 0 0 30px rgba(41, 181, 232, 0.4);
}

.hero-content h1 span {
  color: var(--primary);
  text-shadow: 0 0 20px rgba(41, 181, 232, 0.8), 0 0 40px rgba(41, 181, 232, 0.6);
}

.hero-content p {
  font-size: 1.3rem;
  color: #cbd5e1;
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .hero-content { padding: 30px; }
  .hero-content h1 { font-size: 2.2rem; }
}

/* --- 🌟 アニメーション定義 🌟 --- */

/* 雪の結晶落下アニメーション */
@keyframes crystal_fall {
  0% { 
    background-position: 0 -1000px, 0 -700px, center; 
  }
  100% { 
    background-position: 400px 1000px, -300px 700px, center; 
  }
}

/* グリッドが手前に向かって永遠に流れてくる動き */
@keyframes gridMove {
  0% { transform: perspective(600px) rotateX(75deg) translateY(0) translateZ(-200px); }
  100% { transform: perspective(600px) rotateX(75deg) translateY(60px) translateZ(-200px); }
}

/* 光の線が画面を縦横無尽にスパークする動き */
@keyframes dataStreamFlash {
  0% { 
    background-position: -200% 20%, 30% -200%;
    opacity: 0;
  }
  10% { opacity: 1; }
  30% { 
    background-position: 200% 20%, 30% 200%;
    opacity: 0;
  }
  100% { opacity: 0; }
}

/* コンテンツパネルが宇宙空間のようにフワフワ浮遊する動き */
@keyframes floatPanel {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}


/* --- 🌟 News: お知らせセクションのスタイル (白背景対応版) --- */
.news-section {
    padding: 60px 0 20px; /* 上下の余白を広げて独立させる */
    position: relative;
    z-index: 20;
}

/* 🌟 外枠：白背景に浮かび上がるよう、背景を濃くし、影を調整 */
.news-wrapper {
    background: #0f172a; /* 濃いネイビーに変更して視認性を確保 */
    border: 1px solid rgba(41, 181, 232, 0.4);
    border-radius: 24px;
    padding: 30px 40px;
    max-width: 950px;
    margin: 0 auto;
    /* 白背景で映える、少し強めの青みがかった影 */
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
}

.news-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    margin-bottom: 20px;
    background: rgba(41, 181, 232, 0.15);
    border: 1px solid rgba(41, 181, 232, 0.3);
    border-radius: 6px;
    color: var(--primary); /* Snowflakeブルー */
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
}

#news-ticker-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-item {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.news-item:last-child {
    border-bottom: none;
}

.news-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

/* 🌟 日付の色を少し明るいグレーに（白背景上の濃い箱の中でも読みやすく） */
.news-date {
    font-size: 0.9rem;
    color: #94a3b8; 
    margin-right: 25px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    flex-shrink: 0;
}

/* 🌟 テキストは純粋な白でくっきりと */
.news-text {
    font-size: 1rem;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.news-arrow {
    margin-left: 15px;
    color: var(--primary);
    font-weight: bold;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
    width: 25px;
    text-align: right;
}

/* --- 🌟 ホバーアクション --- */
.news-item:hover {
    background: rgba(255, 255, 255, 0.03); /* ほんの少しだけ明るく */
}

.news-item:hover .news-text {
    color: var(--primary);
}

.news-item:hover .news-date {
    color: #fff;
}

.news-item:hover .news-arrow {
    transform: translateX(10px);
}

/* 🌟 アーカイブリンク（もっと見る） */
.archive-link-container {
    text-align: right;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-more {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-more:hover {
    color: #fff;
    letter-spacing: 0.5px;
}

/* --- 🌟 最新News用点滅パルスアイコン --- */

.news-item {
    position: relative; /* パルスを絶対配置するため */
}

/* 最新（最初）のニュースのリンクにパディングを作る */
.news-item:first-child .news-link {
    padding-left: 30px; 
}

/* 点滅する丸（パルス）の本体 */
.latest-pulse {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: var(--primary); /* Snowflakeブルー */
    border-radius: 50%;
    z-index: 2;
}

/* 点滅する外輪（アニメーション） */
.latest-pulse::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--primary);
    border-radius: 50%;
    animation: pulse-ring 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    opacity: 0;
}

/* 🌟 アニメーション定義（以前のNewsラベル用を流用） */
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(3); opacity: 0; }
}