/* ================================================================
   株式会社RELI.STYLE デザインの仕上げ（2026-11-09）
   ROUTii BASE（11/09 公開）と同じ考え方で、木と本のサイトを参考に
   「明朝の見出し・広い余白・そっと動く」作りへ。情報と導線は変えず、見せ方だけを変える。
   色は会社サイトの地色（生成り）と差し色（テラコッタ）をそのまま使う。
   読み込みと確認用の切り替えは includes/design.php。やめるときは RS_DESIGN_ON を false。
   ================================================================ */
:root{
  --rs-ease:cubic-bezier(.22,.61,.36,1);
  --rs-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --rs-latin:"Cormorant Garamond","Shippori Mincho",serif;
}

/* ---- 文字 ---- */
body{ -webkit-font-smoothing:antialiased; }
h1, h2, .section-title, .hero h1, .page-hero h1,
.brand-card h3, .rt-h2, .fit-h3, .fit-job-title, .staff-name, .recruit-cta-role,
.cta-box h2, .pillar h3{
  font-family:var(--rs-serif); font-weight:600; letter-spacing:.06em;
}
.hero h1, .page-hero h1{ font-weight:700; letter-spacing:.08em; }
/* 英字の小見出しは、字間を広げた欧文の書体で */
.hero-eyebrow, .rt-eyebrow, .recruit-cta-eyebrow, .brand-category, .fit-fv-eyebrow, .pillar-label{
  font-family:var(--rs-latin); font-weight:600; letter-spacing:.3em;
}
.page-hero .hero-eyebrow::before, .rt-eyebrow::before{
  content:""; display:inline-block; width:26px; height:1px; background:currentColor;
  vertical-align:middle; margin-right:12px; opacity:.8;
}

/* ---- 上部の細い進み具合バー ---- */
#rs-progress{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:2000; pointer-events:none;
  background:linear-gradient(90deg,var(--color-accent),#d47a52); transform-origin:0 50%; transform:scaleX(0); }

/* ---- トップ：街並みがゆっくり寄る／文字が順に現れる ---- */
.hero > img{ animation:rsKen 16s var(--rs-ease) both; will-change:transform; }
@keyframes rsKen{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
.rs-fx .hero-content > *,
.rs-fx .page-hero > *,
.rs-fx .fit-fv-body > *{ opacity:0; animation:rsUp 1.1s var(--rs-ease) forwards; }
.rs-fx .hero-content > *:nth-child(1), .rs-fx .page-hero > *:nth-child(1), .rs-fx .fit-fv-body > *:nth-child(1){ animation-delay:.2s; }
.rs-fx .hero-content > *:nth-child(2), .rs-fx .page-hero > *:nth-child(2), .rs-fx .fit-fv-body > *:nth-child(2){ animation-delay:.45s; }
.rs-fx .hero-content > *:nth-child(3), .rs-fx .page-hero > *:nth-child(3), .rs-fx .fit-fv-body > *:nth-child(3){ animation-delay:.7s; }
.rs-fx .hero-content > *:nth-child(4), .rs-fx .page-hero > *:nth-child(4), .rs-fx .fit-fv-body > *:nth-child(4){ animation-delay:.95s; }
/* 動きが止まる環境でも、2.5秒後には必ず文字が見えるようにする（js が rs-hero-done を付ける） */
.rs-hero-done .hero-content > *, .rs-hero-done .page-hero > *, .rs-hero-done .fit-fv-body > *{
  opacity:1!important; animation:none!important; transform:none!important;
}
@keyframes rsUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* 下へ誘う線（トップだけ） */
.rs-scroll{ display:block; position:absolute; right:28px; bottom:22px; z-index:3; color:var(--color-ink);
  font-family:var(--rs-latin); font-size:12px; letter-spacing:.35em; writing-mode:vertical-rl; opacity:.7; pointer-events:none; }
.rs-scroll::after{ content:""; display:block; width:1px; height:46px; margin:10px auto 0; background:currentColor;
  transform-origin:top; animation:rsLine 2.2s var(--rs-ease) infinite; }
@keyframes rsLine{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---- メニュー：スクロールすると少し透けて、影が付く／触れると下線が伸びる ---- */
.site-header{ transition:background .4s, box-shadow .4s; }
.site-header.rs-stuck{ background:rgba(250,248,245,.86); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 6px 24px rgba(42,38,34,.07); }
@media (min-width:900px){
  .main-nav a{ position:relative; }
  .main-nav a::after{ content:""; position:absolute; left:4px; right:4px; bottom:12px; height:1px; background:var(--color-accent);
    transform:scaleX(0); transform-origin:right; transition:transform .45s var(--rs-ease); }
  .main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
}

/* ---- 見出しの下の線：画面に入ると伸びる ---- */
.rs-fx .section-title.rs-rv::after{ transform:scaleX(0); transform-origin:left center; transition:transform .9s var(--rs-ease) .3s; }
.rs-fx .section-title.center.rs-rv::after{ transform-origin:center; }
.rs-fx .section-title.rs-rv.is-in::after{ transform:scaleX(1); }

/* ---- 画面に入ると、下からそっと現れる ---- */
.rs-fx .rs-rv{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--rs-ease), transform 1s var(--rs-ease); }
.rs-fx .rs-rv.is-in{ opacity:1; transform:none; }

/* 写真は幕が上がるように現れる */
.rs-fx .rs-curtain{ clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--rs-ease); }
.rs-fx .rs-curtain.is-in{ clip-path:inset(0 0 0 0); }

/* ---- 写真：枠の中でわずかに動く（奥行き）／触れると寄る ---- */
.brand-media, .fit-site-media{ overflow:hidden; border-radius:6px; }
.brand-media img, .fit-site-media img{ transition:transform 1.4s var(--rs-ease); will-change:transform; }
.rs-plx{ transform:translate3d(0,var(--rs-plx,0px),0) scale(1.08); }
.brand-card:hover .brand-media img, .fit-site:hover .fit-site-media img{ transform:translate3d(0,var(--rs-plx,0px),0) scale(1.13); }

/* ---- カード：触れると少し浮く ---- */
.blog-list-item, .staff-card, .recruit-cta-card, .fit-job, .pillar{
  transition:transform .5s var(--rs-ease), box-shadow .5s var(--rs-ease), opacity 1s var(--rs-ease);
}
.blog-list-item:hover, .staff-card:hover, .recruit-cta-card:hover, .fit-job:hover{
  transform:translateY(-4px); box-shadow:0 14px 34px rgba(42,38,34,.10);
}
.rs-fx .rs-rv.is-in.blog-list-item:hover, .rs-fx .rs-rv.is-in.staff-card:hover,
.rs-fx .rs-rv.is-in.recruit-cta-card:hover, .rs-fx .rs-rv.is-in.fit-job:hover{ transform:translateY(-4px); }

/* ---- ボタン：触れると浮いて、光が走る ---- */
.btn, .recruit-cta-btn, .fit-btn, .hiring-links-inner{
  position:relative; overflow:hidden; transition:transform .35s var(--rs-ease), box-shadow .35s var(--rs-ease), background .3s, color .3s;
}
.btn::after, .recruit-cta-btn::after, .fit-btn::after, .hiring-links-inner::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-20deg); transition:left .8s var(--rs-ease);
}
.btn:hover::after, .recruit-cta-btn:hover::after, .fit-btn:hover::after, .hiring-links-inner:hover::after{ left:140%; }
.btn:hover, .recruit-cta-btn:hover, .fit-btn:hover, .hiring-links-inner:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(42,38,34,.16); }
/* トップの「採用募集中」は、ときどき光る */
.hero .hiring-links-inner::after{ animation:rsShine 5s var(--rs-ease) 3s infinite; }
@keyframes rsShine{ 0%{ left:-120%; } 22%,100%{ left:140%; } }

/* ---- 本文の文字リンク：下線が伸びる ---- */
.block-inner p a:not(.btn), .rt-inner p a:not(.fit-btn){
  text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .45s var(--rs-ease);
}
.block-inner p a:not(.btn):hover, .rt-inner p a:not(.fit-btn):hover{ background-size:0 1px; background-position:100% 100%; }

/* ---- 余白をひと回り広く（PC） ---- */
@media (min-width:900px){
  section.block{ padding-top:calc(var(--space-5) * 1.18); padding-bottom:calc(var(--space-5) * 1.18); }
}

/* ---- 「動きを減らす」設定の端末では、動かさない ---- */
@media (prefers-reduced-motion: reduce){
  .hero > img, .rs-scroll::after, .hero .hiring-links-inner::after{ animation:none!important; }
  .rs-fx .rs-rv, .rs-fx .rs-curtain, .rs-fx .hero-content > *, .rs-fx .page-hero > *, .rs-fx .fit-fv-body > *{
    opacity:1!important; transform:none!important; clip-path:none!important; animation:none!important; transition:none!important;
  }
  .rs-plx{ transform:none!important; }
}
@media (max-width:767px){
  .rs-scroll{ right:14px; bottom:14px; font-size:11px; }
  .rs-scroll::after{ height:34px; }
}