/*
Theme Name: Lightning Child Sample
Template: lightning
Version: 0.6.0
*/

/* =========================================================
   ■ フッター（既存仕様維持）
========================================================= */

.site-footer,
.site-footer-container,
.site-footer .site-footer-content{
  border-top:none !important;
  box-shadow:none !important;
}

.site-footer{
  background:#fff;
  color:#333;
  padding:0;
  margin:0;
  text-align:right;
}

.site-footer a{ color:inherit; }
.site-footer a:hover{ opacity:.85; }

.site-footer-copyright p:nth-child(2){
  display:none;
}

.footer-logo{
  width:120px;
  height:auto;
  display:inline-block;
  cursor:pointer;
  transition:.2s;
}

.footer-logo:hover{ opacity:.6; }

/* =========================================================
   ■ 固定ページヘッダー非表示（維持）
========================================================= */

.page-header,
.vk_pageHeader,
.page-header-container,
.page-header-inner{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
}

/* =========================================================
   ■ フォント統一（既存維持）
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700;900&display=swap");

:root{
  --font-base:"Noto Sans JP",system-ui,-apple-system,
              "Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;

  --fw-thin:100;
  --fw-light:300;
  --fw-regular:400;
  --fw-bold:700;
  --fw-black:900;

  --black:#111;
  --gray:#666;
  --red:#b30000;
}

html,body{
  font-family:var(--font-base);
  font-weight:var(--fw-light);
  color:#333;
  line-height:1.7;
  margin:0;
  padding:0;
}

/* =========================================================
   ■ 背景パララックスレイヤー（維持）
========================================================= */

#bg-float{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.bg-dot{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(0,0,0,.12);
  will-change:transform;
}

.site,#page,#content{
  position:relative;
  z-index:1;
}


/* =========================================================
   ■ ゲーム共通
========================================================= */

.game-wrap{
  max-width:900px;
  margin:0 auto;
  padding:24px 16px;
  text-align:center;
}

canvas{
  display:block;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--black);
  touch-action:none;
}

#startBtn{
  margin-top:18px;
  width:min(320px,90%);
  padding:12px 0;
  background:transparent;
  border:1px solid var(--black);
  font-weight:700;
  letter-spacing:.2em;
  cursor:pointer;
}

#startBtn:active{
  background:var(--black);
  color:#fff;
}

/* =========================================================
   ■ BLOCK BREAKER（16:9）
========================================================= */

.game-wrap.bb canvas{
  width:100%;
  max-width:960px;
  aspect-ratio:16/9;
  height:auto;
}

/* =========================================================
   ■ DODGE（正方形）完全安定版
========================================================= */

.game-wrap.dodge{
  max-width:480px;
  border:1px solid var(--black);  /* ← 枠はここだけ */
}

/* ★ここが重要 */
.game-wrap.dodge canvas{
  width:100%;
  aspect-ratio:1/1;
  height:auto;

  display:block;
  touch-action:none;

  border:none;     /* ← canvasの枠を消す */
  background:#fff;
}


/* =========================================================
   ■ GAMES PORTAL（BB / DD 四角UI）
========================================================= */

.games-portal{
  padding:120px 20px;
  text-align:center;
}

.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:60px;
  max-width:700px;
  margin:0 auto;
}

.game-card{
  text-decoration:none;
  display:block;
}

.game-thumb{
  aspect-ratio:1/1;
  border:1px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s;
  background:#fff;
}

.game-thumb span{
  font-weight:900;
  font-size:clamp(40px,8vw,72px);
  letter-spacing:.15em;
  color:#111;
}

.game-card:hover .game-thumb{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* ==============================
   MODE DATE ｜縦構成
============================== */

#site-status{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;

  margin:40px 0 40px;
  font-size:10px;
  letter-spacing:.35em;
  color:#111;
}

/* TYOを縦に */
#site-status .timezone{
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight:900;
  letter-spacing:.4em;
}

/* 日時は薄く静かに */
#site-status #datetime{
  font-weight:300;
  opacity:.55;
}

/* =====================================
   TRY NEW THINGS｜文字うねり演出
   - 1行固定
   - JS制御前提
   - 既存レイアウト破壊なし
===================================== */

.tn-section{
  text-align:center;
  padding:80px 20px 80px;
  overflow:hidden;
}

.tn-main{
  margin:0;
  font-family: var(--font-base);
  font-weight:900;
  font-size:clamp(28px,7vw,96px);
  letter-spacing:.12em;
  color:#111;

  white-space:nowrap; /* ← 1行固定 */
}

.tn-sub{
  margin-top:28px;
  font-weight:300;
  font-size:14px;
  letter-spacing:.45em;
  opacity:.6;
}

/* JSが分解した1文字用 */
.js-try span{
  display:inline-block;
  will-change: transform;
}

/* =====================================
   スクロールインジケーター
   - 下部到達でNEXTに変化
===================================== */

.scroll-indicator{
  position: fixed;
  left: 30px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 999;
  transition: .4s ease;
}

.scroll-text{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  letter-spacing: .3em;
  font-weight: 600;
  color: #333333;
  transition: .4s ease;
}

.scroll-line{
  width: 2px;
  height: 60px;
  background: #333333;
  position: relative;
  overflow: hidden;
}

.scroll-line::after{
  content:"";
  position:absolute;
  top:-30%;
  left:0;
  width:100%;
  height:30%;
  background:#333333;
  animation: scrollMove 1.8s ease-in-out infinite;
}

@keyframes scrollMove{
  0% { top:-30%; }
  100% { top:100%; }
}

/* ===== 下部到達時 ===== */

.scroll-indicator.is-bottom .scroll-text{
  color:#333333;
  letter-spacing:.2em;
}

.scroll-indicator.is-bottom .scroll-line{
  background:#333333;
}

.scroll-indicator.is-bottom .scroll-line::after{
  animation:none;
  top:0;
  height:100%;
}

/* =====================================
   会社概要
===================================== */

.company-section{
  padding:120px 20px 160px;
}

.company-inner{
  max-width:640px;
  margin:0 auto;
}

.company-list{
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:140px 1fr;
  row-gap:26px;
  column-gap:40px;
}

/* 項目タイトル */
.company-list dt{
  font-weight:var(--fw-bold);
  font-size:13px;
  letter-spacing:.08em;
}

/* 内容 */
.company-list dd{
  margin:0;
  font-weight:var(--fw-thin);
  font-size:13px;
  letter-spacing:.04em;
  line-height:1.9;
}

/* リンク */
.company-list a{
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:.3s ease;
}

.company-list a:hover{
  border-bottom:1px solid #111;
}

/* =====================================
   地図リンク
===================================== */

.map-link{
  display:inline-block;
  margin-top:12px;
  font-size:11px;
  font-weight:var(--fw-thin);
  letter-spacing:.14em;
  text-decoration:none;
  opacity:.5;
  transition:.3s ease;
}

.map-link:hover{
  opacity:.9;
}