/*  ------------------------------------------------------------------
    CHRONO RECTUS / QuillANCHOR – Deluxe UI Stylesheet
    ------------------------------------------------------------------
      1.  ルート変数・ユーティリティ
      2.  ベースリセット & ナビゲーション
      3.  ロゴ & バックグラウンド
      4.  グリッドカード
      5.  ポップアップ
      6.  レスポンシブ
    ------------------------------------------------------------------ */

/* ──────────────────────────────────────────
   1. Root variables
────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
:root{
  /* palette */
  --clr-bg:#0d0d11;
  --clr-fg:#eae6e1;
  --clr-accent:#c6a669;
  --clr-accent-d:#9e7d43;
  --clr-overlay:rgba(10,10,12,0.85);

  /* metrics */
  --logo-size:200px;   /* デスクトップ基準 */
  --nav-height:64px;
}

/*  ------------------------------------------------------------------
   2. Reset & Navigation
------------------------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  position:relative; 
  height:100%;
  background:var(--clr-bg);
  color:var(--clr-fg);
  font-family:'Crimson Text',serif;
  scroll-behavior:smooth;
  overflow:hidden;
}

::selection{background:var(--clr-accent);color:var(--clr-bg);}
::-moz-selection{background:var(--clr-accent);color:var(--clr-bg);}

.nav-wrapper{
  position:fixed;top:0;left:0;right:0;
  height:var(--nav-height);
  display:flex;justify-content:center;align-items:center;
  background:linear-gradient(to bottom,rgba(13,13,17,.9),transparent);
  backdrop-filter:blur(6px);
  z-index:1000;
}
#main-nav ul{display:flex;gap:2.5rem;list-style:none;}
#main-nav a{
  font-family:'Cinzel',serif;
  font-size:1.1rem;
  letter-spacing:.04em;
  color:var(--clr-fg);
  text-decoration:none;
  position:relative;
  transition:color .4s ease,transform .4s ease;
}
#main-nav a::after{
  content:"";
  position:absolute;left:0;bottom:-6px;
  height:2px;width:0;
  background:var(--clr-accent);
  transition:width .4s ease;
}
#main-nav a:hover{
  color:var(--clr-accent);
  transform:translateY(-2px);
}
#main-nav a:hover::after{width:100%;}

/*  ------------------------------------------------------------------
   3. Logo & Background
------------------------------------------------------------------ */
#logo-container{
  position:absolute;
  top:30%;left:50%;
  transform:translate(-50%,-50%);
  width:var(--logo-size);height:var(--logo-size);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  animation:pulse 5s ease-in-out infinite,glow 8s ease-in-out infinite;
  z-index:500;
}
@keyframes pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);}
  50%    {transform:translate(-50%,-50%) scale(1.08);}
}
@keyframes glow{
  0%,100%{filter:drop-shadow(0 0 6px var(--clr-accent));}
  50%    {filter:drop-shadow(0 0 16px var(--clr-accent));}
}
#site-logo{width:100%;height:auto;pointer-events:none;}

#bg-slider{position:fixed;inset:0;overflow:hidden;z-index:0;}
.bg-frame{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  animation:fadeSlide 144s infinite;
  will-change:opacity;
}
@keyframes fadeSlide{
  0%{opacity:0;}4%{opacity:1;}28%{opacity:1;}32%{opacity:0;}100%{opacity:0;}
}
.bg-frame::after{              /* ソフトなブラー＋パララックス */
  content:"";position:absolute;inset:0;
  transform:scale(1.12);
  background:inherit;background-size:inherit;background-position:inherit;
  filter:blur(2px);opacity:.15;pointer-events:none;
}

/*  ------------------------------------------------------------------
   4. Card Grid
------------------------------------------------------------------ */
#main-stage{
  position:relative;height:100%;
  z-index:1;    
  display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;
  padding-bottom:2.5rem;
}

.grid-top,.grid-bottom{
  display:flex;flex-wrap:wrap;
  gap:1.5rem;margin-bottom:1.5rem;
  justify-content:center;
}
.grid-item{
  position:relative;
  border:2px solid var(--clr-accent-d);
  border-radius:10px;
  overflow:hidden;cursor:pointer;
  transition:transform .35s ease,border-color .35s ease;
  isolation:isolate;            /* ::before を分離 */
}
.grid-item::before{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;transition:opacity .35s ease;
  z-index:1;
}
.grid-item:hover{
  transform:translateY(-4px);
  border-color:var(--clr-accent);
}
.grid-item:hover::before{opacity:1;}

.grid-item img{
  width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .6s ease;
}
.grid-item:hover img{transform:scale(1.12);}

.grid-item figcaption{
  position:absolute;left:0;bottom:0;width:100%;
  padding:.45rem 0;
  font-family:'Cinzel',serif;
  font-size:.9rem;letter-spacing:.05em;
  text-align:center;
  background:rgba(13,13,17,.68);
  color:var(--clr-accent);
  z-index:2;
}
.grid-item.square{width:9.2rem;height:9.2rem;}
.grid-item.wide  {width:calc(50vw - 2.7rem);height:9.2rem;}

/*  ------------------------------------------------------------------
   5. Popup
------------------------------------------------------------------ */
.hidden{display:none!important;}

#popup-wrapper{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--clr-overlay);
  backdrop-filter:blur(4px);
  z-index:2000;
  transition:opacity .4s ease;
}
.popup-content{
  position:relative;
  width:92%;max-width:840px;
  max-height:88vh;
  background:#1a1a1f;
  border:2px solid var(--clr-accent-d);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 18px rgba(0,0,0,.7);
  animation:popupIn .5s ease;
}
@keyframes popupIn{
  from{transform:scale(.8) translateY(30px);opacity:0;}
  to  {transform:scale(1) translateY(0);opacity:1;}
}
.popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;  /* 明示的にサイズ指定 */
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gear-spin {
  width: 240px;
  height: 240px;
  transform: none; /* scaleではなく明示的にサイズ指定 */
}

.popup-scroll{
  padding:2rem;
  overflow-y:auto;
  max-height:calc(88vh - 4rem);
}
.popup-scroll::-webkit-scrollbar{width:8px;}
.popup-scroll::-webkit-scrollbar-thumb{
  background:var(--clr-accent-d);border-radius:4px;
}
.banner{
  width:100%;border-radius:6px;margin-bottom:1.2rem;
  box-shadow:0 0 8px rgba(0,0,0,.6);
}
.text p{line-height:1.7;margin-bottom:1rem;font-size:1.05rem;}
.gear-spin {
  transform: scale(0.2);
}
/*  ------------------------------------------------------------------
   6. Responsive tweaks
------------------------------------------------------------------ */
@media (max-width:768px){
  #logo-container{--logo-size:80px;top:13%;}
  #main-nav ul{gap:1.2rem;}
  .grid-item.square{width:7.2rem;height:7.2rem;}
  .grid-item.wide  {width:calc(100vw - 3rem);height:7.2rem;}
}
    .recruit-section h2 {
      font-family: 'Cinzel', serif;
      font-size: 2.2rem;
      color: #ffd700;
      text-align: center;
      margin-bottom: 1.5rem;
      letter-spacing: 2px;
      border-bottom: 1px dashed #ffd700;
      padding-bottom: 0.5rem;
    }

    .recruit-section h3 {
      font-size: 1.4rem;
      color: #e8d7a9;
      margin-top: 2rem;
      border-left: 4px solid #ffd700;
      padding-left: 0.5rem;
    }

    .recruit-section p, .recruit-section ul {
      font-size: 1.1rem;
      margin: 1rem 0;
    }

    .recruit-section ul {
      list-style: square inside;
      padding-left: 1rem;
    }

    .recruit-section strong {
      color: #ffd700;
    }

    @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Crimson+Text&display=swap');
/* ---------- 年カウンター (logo と同レイヤー) ---------- */
.year-counter{
  position:absolute;
  top:calc(100% + .8rem);      /* ロゴの直下に配置 */
  left:50%; transform:translateX(-50%);
  font-family:'Cinzel',serif;
  font-size:clamp(1.4rem,4vw,2.2rem);
  color:var(--clr-accent);
  letter-spacing:.08em;
  pointer-events:none;         /* クリック貫通 */
  opacity:0;                   /* ふわり表示 */
  animation:fadeYear .8s .4s forwards ease;
}
@keyframes fadeYear{to{opacity:1;}}
@keyframes pulseYear {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.12); }
  100% { transform: translateX(-50%) scale(1); }
}
// カウント完了後に1回だけ "ぷるん" と揺らす
if(current >= end){
  clearInterval(id);
  yearCounter.style.animation = "pulseYear 0.6s ease";
}
/* ---------- クルーメンバー ---------- */
     .crew-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  padding: 1rem;
}

.crew-member {
  text-align: center;
  max-width: 220px;
}

.crew-member img {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  .crew-member img {
    width: 30vw;  /* ← スマホ画面の30%に */
    max-width: none;
  }
}
/* ---------- クロノレクタス ---------- */
.responsive-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}