/* -----------------------------------------
  仄観測所 サイト共通スタイル
----------------------------------------- */

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #111111;
  color: #e0e0e0;
  line-height: 1.6;
}

/* ヘッダー部分 */
header {
  background-color: #1c1c1c;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo img {
  width: 100%;
  height: auto;
}

.logo {
  width: 80px;
  height: auto;
  margin-bottom: 0.5rem;
}

header h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

nav a {
  color: #e0e0e0;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

nav a:hover {
  color: #ccccff;
}

/* ヒーローセクション（トップの大きな見出し） */
.hero {
  background: url('../img/banner/hero_background.jpg') no-repeat center center / cover;
  padding: 5rem 2rem;
  text-align: center;
}

.hero-text h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.hero-text p {
  font-size: 1.2rem;
  color: #cccccc;
}

/* 最新通信記録 */
.news-preview {
  padding: 2rem;
  max-width: 700px;
  margin: 0 auto;
}

.news-preview h3 {
  border-bottom: 2px solid #666;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* フッター */
footer {
  background-color: #1c1c1c;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

footer a {
  color: #999;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

main.content {
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.works-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.news-intro {
  color: #aaa;
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.news-item {
  border-left: 3px solid #444;
  padding-left: 1rem;
  margin-bottom: 2rem;
}

.news-item time {
  font-size: 0.85rem;
  color: #888;
}

.news-item h3 {
  margin: 0.3rem 0;
  font-size: 1.2rem;
  color: #e0e0e0;
}

.news-item p {
  margin: 0;
  font-size: 1rem;
  color: #ccc;
}

.news-item h3 a {
  color: inherit;        /* 通常の文字色と合わせる */
  text-decoration: underline; /* 下線でリンクとわかるように */
  transition: color 0.3s;
}

.news-item h3 a:hover {
  color: #8888ff;        /* ホバー時に少し色を変える */
}

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* main.content だけでなく div.content にも対応させる */
main.content,
div.content {
  flex: 1;
}

.burger{display:none;}

/* 共通領域に追記  ─ PC/モバイルどちらでも効く */
.burger{
  width:36px; height:28px;           /* 少し大きく */
  filter:drop-shadow(0 0 4px #8888ff);/* ほのかな光彩 */
}

/* ライン色をアクセントに変更 */
.burger span,
.burger::before,
.burger::after{
  background:#8888ff;                /* ← 白 #e0e0e0 から変更 */
}

.works-list img{
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;   /* 画像がまだ読めなくても枠が確保される */
}

/* ホバー or フォーカス時に色を強調 */
.burger:hover span,
.burger:hover::before,
.burger:hover::after,
.burger:focus-visible span,
.burger:focus-visible::before,
.burger:focus-visible::after{
  background:#b0b0ff;                /* 1 段明るい色 */
  filter:drop-shadow(0 0 6px #b0b0ff);
}

/* ─── first‐visit overlay ─── */
#welcome-overlay{
  position:fixed;inset:0;z-index:9999;
  background:#0c0c0e;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  color:#e0e0e0;font-family:'Noto Sans JP',sans-serif;
  opacity:0;animation:fadeIn .4s forwards;
}
#welcome-overlay h2{font-size:2rem;margin:.2em 0;color:#8888ff;letter-spacing:.05em}
#welcome-overlay p {font-size:1rem;margin:0}
@keyframes fadeIn{to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}

/* ── first-visit overlay（派手版） ── */
#welcome-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:#0c0c0e;overflow:hidden;
  animation:fadeIn .4s ease-out forwards;
}
#welcome-overlay canvas{position:absolute;inset:0}
@keyframes fadeOut{to{opacity:0}}

#welcome-overlay h2{
  font:900 3.5rem/1 'Noto Sans JP',sans-serif;
  color:#e0e0e0;position:relative;
  letter-spacing:.15em;
}
/* グリッチ：ピンク&シアンずれ */
#welcome-overlay h2::before,
#welcome-overlay h2::after{
  content:attr(data-txt);position:absolute;inset:0;
  mix-blend-mode:screen;pointer-events:none;
}
#welcome-overlay h2::before{color:#ff4bff;animation:glA 1.2s infinite}
#welcome-overlay h2::after {color:#63c7ff;animation:glB 1.2s infinite reverse}

@keyframes glA{
  0%,88%,100%{clip-path:inset(0 0 60% 0)}
  89%{clip-path:inset(20% 0 40% 0);transform:translate(2px)}
  93%{clip-path:inset(75% 0 0 0); transform:translate(-2px)}
}
@keyframes glB{
  0%,88%,100%{clip-path:inset(70% 0 0 0)}
  91%{clip-path:inset(0 0 55% 0); transform:translate(-2px)}
  96%{clip-path:inset(35% 0 15% 0);transform:translate(2px)}
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}



@media (max-width: 768px) {

  /* ヘッダーを 1 行に & ハンバーガー */
  header {
    flex-direction: row;
    justify-content: space-between;
    padding: .8rem 1rem;
  }
  .logo-container {flex-direction: row;}
  .logo {width:56px;margin:0 .5rem 0 0;}
  nav ul {
    position: fixed;                /* 画面外に隠してスライドイン */
    top: 0; right: -100%;
    width: 70%; height: 100vh;
    flex-direction: column;
    gap: 1.2rem;
    background:#1c1c1c;
    padding-top:4rem;
    transition:right .3s ease;
  }
  nav ul.show {right: 0;}           /* JS で付与 */

  /* ハンバーガーアイコン */
  .burger {
    display:block; width:32px; height:24px;
    position:relative; cursor:pointer;
  }
  .burger span, .burger::before, .burger::after {
    content:""; position:absolute; left:0;
    width:100%; height:3px; background:#e0e0e0;
    transition:transform .3s, top .3s;
  }
  .burger::before {top:0;}
  .burger span      {top:10px;}
  .burger::after  {top:20px;}
  /* 開いた状態 → × */
  .burger.active::before {top:10px; transform:rotate(45deg);}
  .burger.active span    {transform:scaleX(0);}
  .burger.active::after  {top:10px; transform:rotate(-45deg);}

  /* メインビジュアルとグリッド */
  .hero   {padding:3rem 1rem;}
  .hero-text h2 {font-size:1.6rem;}
  .works-list  {grid-template-columns:1fr;}
  .news-preview, main.content {padding:1.5rem;}
}