/*
Theme Name: NBS Corporate（ゴージャス）
Template: nbs
Author: NBS
Description: 「NBS Corporate」テーマの派手バージョン（パチンコ風・ゴージャス／青緑系）。親テーマ nbs の構造・文章・機能を引き継ぎ、ビビッドなブルー×グリーン×ゴールドの配色・ネオングロー・キラッと光る演出を追加した子テーマ。
Version: 1.4.0
Text Domain: nbs-pachi
*/

/* =========================================================
   1. カラー（ビビッド：ブルー × グリーン × シアン × ゴールド）
   ========================================================= */
:root {
  --brand:        #1E7BFF; /* エレクトリックブルー */
  --brand-dark:   #0B57C4;
  --brand-darker: #06316E;

  --yellow:       #FFD21E; /* ゴールド（差し色の主役） */
  --yellow-bg:    #EAF3FF; /* 淡いブルー */
  --badge-border: #FFC400; /* ゴールド枠 */
  --circle-orange:#8FC6FF; /* ブルー装飾 */

  --sky:    #00D26A;       /* ネオングリーン */
  --sky-l1: #DEFBEC;
  --sky-l2: #C6F6DD;
  --sky-l3: #DDEFFF;

  --c-orange-bd: #FFD84D; --c-orange-sh: #FFE9A6;
  --c-yellow-bd: #BEE9CE; --c-yellow-sh: #D6F4E1;
  --c-reason-sh: #CFE6FF;
  --icon-orange-bg: #E1EEFF;
  --line-soft: #CFE6FF;

  --navy:   #06243F; /* ダークセクション＝ディープネイビー */
  --footer: #041B30;
  --bg:     #F5FAFF; /* ほんのりブルーの白 */

  --grad-divider: linear-gradient(90deg, #1E7BFF 0%, #00E0FF 50%, #00D26A 100%);

  /* 見出しはインパクトのある表示フォント */
  --font-heading: "RocknRoll One", "Zen Maru Gothic", sans-serif;
  --font-accent:  "Reggae One", "RocknRoll One", sans-serif;
}

/* =========================================================
   2. 背景（ビビッドなグラデーション）
   ========================================================= */
.hero,
.page-head,
.business-feature {
  background: linear-gradient(135deg, #DDF0FF 0%, #EAFBF1 50%, #DFF6FF 100%);
}
.recruit__card {
  background: #1E7BFF;
}
/* CTA帯：ゴージャスなゴールド */
.cta-band {
  background: linear-gradient(120deg, #FFB300 0%, #FFE24A 50%, #FFB300 100%);
}
.cta-band__text { color: #06316E; }

/* =========================================================
   3. ゴールド・ボタン（パチンコの主役）＋グロー＋シャイン
   ========================================================= */
.btn--orange {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFE86A 0%, #FFC400 55%, #FF9E00 100%);
  color: #5A2A00;
  border: 2px solid #fff;
  box-shadow: 0 4px 0 #B87400, 0 0 16px rgba(255, 196, 0, .6);
  animation: nbs-glow 1.8s ease-in-out infinite alternate;
}
.btn--orange:hover { transform: translateY(2px); box-shadow: 0 2px 0 #B87400, 0 0 22px rgba(255, 196, 0, .9); }
.btn--orange::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: skewX(-20deg);
  animation: nbs-shine 2.8s ease-in-out infinite;
}
@keyframes nbs-glow {
  from { box-shadow: 0 4px 0 #B87400, 0 0 10px rgba(255, 196, 0, .5); }
  to   { box-shadow: 0 4px 0 #B87400, 0 0 24px rgba(255, 196, 0, .95); }
}
@keyframes nbs-shine {
  0%   { left: -60%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}

/* 採用CTA（ブルー）にもグロー */
.btn--navy {
  background: linear-gradient(180deg, #2E9BFF 0%, #0B57C4 100%);
  box-shadow: 0 5px 0 #06316E, 0 0 16px rgba(30, 123, 255, .55);
  border: 2px solid rgba(255, 255, 255, .7);
}

/* CTA帯内のボタンはブルーに */
.cta-band .btn {
  background: linear-gradient(180deg, #3B9BFF 0%, #1E7BFF 100%);
  color: #fff;
  border-color: #fff;
}

/* =========================================================
   4. カード：ゴールド枠＋ネオングロー
   ========================================================= */
.card,
.card--orange,
.card--sky,
.card--yellow,
.reason-card,
.work-item,
.scene-card,
.interview-card,
.job-card,
.business__card,
.nbs-form,
.faq-item {
  border: 2px solid var(--yellow);
  box-shadow: 0 6px 0 rgba(30, 123, 255, .18), 0 0 18px rgba(0, 210, 106, .14);
}

/* =========================================================
   5. 光る見出し・区切り（キラキラ）
   ========================================================= */
/* 大見出しはブルー→シアン→グリーンのグラデ文字 */
.hero__title .accent,
.sec-head__title,
.reason-card__num {
  background: linear-gradient(90deg, #1E7BFF 0%, #00C2D6 45%, #00D26A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 英字ラベルはネオン風 */
.sec-head__eyebrow,
.page-head__eyebrow {
  color: var(--brand);
  text-shadow: 0 0 8px rgba(30, 123, 255, .5);
  letter-spacing: .1em;
}

/* 区切りラインを流れる光に */
.divider-line {
  background-size: 200% 100%;
  animation: nbs-flow 3s linear infinite;
}
@keyframes nbs-flow {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ヒーローのバッジもゴールドに光らせる */
.hero__badge {
  background: linear-gradient(180deg, #FFE86A, #FFC400);
  color: #6A4A00;
  border-color: #fff;
  box-shadow: 0 0 12px rgba(255, 196, 0, .6);
}

/* お問い合わせ・フッター（ディープネイビー）の見出しをゴールドに */
.contact__title { color: #FFD21E; text-shadow: 0 0 12px rgba(255, 210, 30, .5); }

/* ヘッダーを明るく */
.site-header { background: rgba(245, 250, 255, .92); }

/* =========================================================
   6. 追加エフェクト（動く光・キラキラ・ネオン）
   ========================================================= */

/* 見出しのグラデ文字を「流れる虹色」に＋発光 */
.hero__title .accent,
.sec-head__title,
.reason-card__num {
  background: linear-gradient(90deg, #1E7BFF, #00C2D6, #00D26A, #FFD21E, #1E7BFF);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(0, 194, 214, .45));
  animation: nbs-text-flow 6s linear infinite;
}
@keyframes nbs-text-flow {
  0%   { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

/* ヒーロー等の背景をゆっくり動かす */
.hero,
.page-head,
.business-feature {
  background: linear-gradient(135deg, #DDF0FF, #EAFBF1, #DFF6FF, #FFF3C8, #DDF0FF);
  background-size: 300% 300%;
  animation: nbs-bg-move 14s ease infinite;
}
@keyframes nbs-bg-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ヒーローにキラキラ（点滅する星屑） */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 18% 28%, rgba(255, 255, 255, .95), transparent),
    radial-gradient(2px 2px at 72% 18%, rgba(255, 210, 30, .95), transparent),
    radial-gradient(2px 2px at 38% 68%, rgba(0, 210, 106, .95), transparent),
    radial-gradient(2px 2px at 86% 58%, rgba(30, 123, 255, .95), transparent),
    radial-gradient(2px 2px at 55% 40%, rgba(255, 255, 255, .95), transparent),
    radial-gradient(2px 2px at 28% 85%, rgba(255, 210, 30, .95), transparent);
  animation: nbs-twinkle 2.2s ease-in-out infinite;
}
@keyframes nbs-twinkle {
  0%, 100% { opacity: .2; }
  50%      { opacity: 1; }
}

/* カードのホバーで浮き上がり＋グロー */
.card,
.reason-card,
.work-item,
.scene-card,
.interview-card,
.job-card,
.business__card,
.faq-item {
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover,
.reason-card:hover,
.work-item:hover,
.scene-card:hover,
.job-card:hover,
.business__card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 0 rgba(30, 123, 255, .22), 0 0 28px rgba(0, 210, 106, .35);
}

/* 採用バナー（単色ブルー）に斜めの光が横切る */
.recruit__card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 30%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: nbs-sweep 3.6s ease-in-out infinite;
}
@keyframes nbs-sweep {
  0%   { left: -40%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* お問い合わせ見出しのゴールドをネオン点滅 */
.contact__title {
  animation: nbs-neon 1.6s ease-in-out infinite alternate;
}
@keyframes nbs-neon {
  from { text-shadow: 0 0 8px rgba(255, 210, 30, .4); }
  to   { text-shadow: 0 0 18px rgba(255, 210, 30, .95), 0 0 32px rgba(255, 210, 30, .5); }
}

/* 動きを抑えたい設定の人には停止 */
@media (prefers-reduced-motion: reduce) {
  .hero__title .accent,
  .sec-head__title,
  .reason-card__num,
  .hero, .page-head, .business-feature,
  .hero::before,
  .recruit__card::after,
  .contact__title,
  .btn--orange,
  .btn--orange::after { animation: none !important; }
}