/* =====================================================================
   upell Inc. / 株式会社アペル  コーポレートサイト 共通スタイル
   --------------------------------------------------------------------
   元の各HTMLのインライン <style> と src/index.css のカスタムクラス・
   @keyframes をここに集約しています。
   Tailwind のユーティリティクラス（px-6, flex 等）は各HTMLの head で
   読み込む Tailwind Play CDN が担当します。ここには CDN で賄えない
   カスタムクラス／キーフレーム／微調整のみを記述しています。
   ===================================================================== */

/* ---------- ベース ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', 'Noto Serif JP', sans-serif;
  background: #0a0a0a;
  color: #ffffff;
  overflow-x: hidden;
  margin: 0;
}

/* 明色背景のページ（recruit / privacy / sitemap / thanks など）用に
   body.light を付与すると白基調に切り替わります。 */
body.light {
  background: #ffffff;
  color: #0a0a0a;
}

/* ---------- フォントユーティリティ ---------- */
.font-display { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.font-jp { font-family: 'Noto Serif JP', serif; }
.font-ui { font-family: 'Montserrat', sans-serif; }

/* ---------- カラーユーティリティ ---------- */
.gold { color: #c9a961; }
.bg-gold { background-color: #c9a961; }
.border-gold { border-color: #c9a961; }

/* ---------- スクロールアニメーション ---------- */
/* フェイルセーフ方針：
   各 reveal 系クラスの初期状態 opacity:0 は、JS が有効なとき（html.js）だけ
   適用します。JS が無効／失敗した場合は opacity が初期値（1）のままになり、
   本文が必ず表示されます。さらに main.js が 2.5 秒後に html.reveal-all を付与し、
   万一スクロール表示の発火が漏れても全要素を強制表示します。 */

/* Fade up */
.fade-up { transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1), transform 0.9s cubic-bezier(0.4,0,0.2,1); }
html.js .fade-up { opacity: 0; transform: translateY(40px); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
/* Fade in */
.fade-in { transition: opacity 1.1s cubic-bezier(0.4,0,0.2,1); }
html.js .fade-in { opacity: 0; }
.fade-in.visible { opacity: 1; }
/* Slide from left */
.slide-left { transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1), transform 0.9s cubic-bezier(0.4,0,0.2,1); }
html.js .slide-left { opacity: 0; transform: translateX(-50px); }
.slide-left.visible { opacity: 1; transform: translateX(0); }
/* Slide from right */
.slide-right { transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1), transform 0.9s cubic-bezier(0.4,0,0.2,1); }
html.js .slide-right { opacity: 0; transform: translateX(50px); }
.slide-right.visible { opacity: 1; transform: translateX(0); }
/* generic on-view (opacity + translateY for inline-style sections) */
.reveal { transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
html.js .reveal { opacity: 0; transform: translateY(24px); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-sm { transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1); }
html.js .reveal-sm { opacity: 0; transform: translateY(16px); }
.reveal-sm.visible { opacity: 1; transform: translateY(0); }
.reveal-card { transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1); }
html.js .reveal-card { opacity: 0; transform: translateY(32px); }
.reveal-card.visible { opacity: 1; transform: translateY(0); }

/* 詳細度修正：html.js .X（詳細度0-2-1）に対し .visible（0-2-0）が負けて
   スクロール表示が効かなかったため、html.js 付きの .visible で上書きする。
   これが無いと IntersectionObserver が .visible を付けても透明のままになる。 */
html.js .fade-up.visible, html.js .fade-in.visible, html.js .slide-left.visible, html.js .slide-right.visible,
html.js .reveal.visible, html.js .reveal-sm.visible, html.js .reveal-card.visible {
  opacity: 1 !important; transform: none !important;
}

/* フェイルセーフ：reveal-all が付いたら全 reveal 系・hero-anim を強制表示 */
html.reveal-all .fade-up,
html.reveal-all .fade-in,
html.reveal-all .slide-left,
html.reveal-all .slide-right,
html.reveal-all .reveal,
html.reveal-all .reveal-sm,
html.reveal-all .reveal-card,
html.reveal-all .hero-anim {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }

/* ---------- ナビ共通 ---------- */
/* ゴールドの下線ホバーリンク（PCナビ） */
.gold-hover-link {
  position: relative; color: rgba(255,255,255,0.85); text-decoration: none;
  letter-spacing: 0.15em; font-size: 12px; font-weight: 300; transition: color 0.3s ease;
  font-family: 'Montserrat', sans-serif;
}
.gold-hover-link::after {
  content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px;
  background: #c9a961; transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
}
.gold-hover-link:hover { color: #c9a961; }
.gold-hover-link:hover::after { width: 100%; }

/* モバイルメニューのリンク */
.mm-link {
  position: relative; color:#fff; letter-spacing:0.3em; font-weight:300; cursor:pointer;
  padding:1rem 0; width:100%; text-align:center; text-decoration:none;
  font-family:'Montserrat',sans-serif; font-size:clamp(16px,4.5vw,24px);
  transition: color 0.3s ease;
}
.mm-link:hover { color:#c9a961; }

/* フッターリンク */
.footer-link { color:#bbb; font-weight:400; font-size:0.75rem; letter-spacing:0.15em; font-family:'Montserrat',sans-serif; text-decoration:none; transition:color 0.3s ease; cursor:pointer; }
.footer-link:hover { color:#c9a961; }

/* ---------- 見出し・装飾 ---------- */
.section-label {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.35em; text-transform: uppercase; color: #c9a961;
}
.divider-gold { width: 40px; height: 1px; background: #c9a961; }

/* ---------- スクロールバー ---------- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #c9a961; border-radius: 2px; }

/* ---------- ユーティリティ ---------- */
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* スクリーンリーダー専用（視覚的に隠すがアクセシビリティ・SEOには有効） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- お問い合わせフォーム 文字色・コントラスト（No.7） ---------- */
/* ラベルは可読なグレー、入力文字は明色（暗背景フォーム）、
   プレースホルダは中間色で十分なコントラストを確保 */
#contactForm label,
.contact-form label { color: #9a9a9a; }
#contactForm input,
#contactForm textarea,
.contact-form input,
.contact-form textarea { color: #ffffff; -webkit-text-fill-color: #ffffff; }
#contactForm input::placeholder,
#contactForm textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #8a8a8a; opacity: 1; }
#contactForm input:focus::placeholder,
#contactForm textarea:focus::placeholder { color: #6f6f6f; }

/* ---------- CEO/ディレクター メッセージ ---------- */
.ceo-msg p { color:#c0c0c0; font-size:clamp(12px,1.8vw,13.5px); font-family:'Noto Serif JP',serif; font-weight:300; line-height:2.3; margin:0; }

/* ---------- FAQ アコーディオン ---------- */
.faq-body { overflow: hidden; transition: max-height 0.5s ease-in-out; max-height: 0; }

/* ---------- Hero キーフレーム ---------- */
@keyframes hero-pan { from { transform: scale(1.07) translateX(2%);} to { transform: scale(1.03) translateX(-2%);} }
@keyframes hero-overlay-in { from { opacity: 0;} to { opacity: 1;} }
@keyframes brand-fade-in { from { opacity:0; letter-spacing:0.6em; transform:translateY(-6px);} to { opacity:1; letter-spacing:0.35em; transform:translateY(0);} }
@keyframes gold-line-grow { from { width:0; opacity:0;} to { width:40px; opacity:1;} }
@keyframes hero-fade-up { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }
@keyframes headline-in { from { opacity:0; transform:translateY(30px); filter:blur(5px);} to { opacity:1; transform:translateY(0); filter:blur(0);} }
@keyframes scroll-bounce { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} }

/* hero-anim も JS 有効時のみ非表示開始（hero-loaded 付与でアニメ表示）。
   JS 無効/失敗時は opacity:1 のままヒーロー文字が表示される。 */
html.js .hero-anim { opacity: 0; }
.hero-loaded .hero-pan { animation: hero-pan 14s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.hero-loaded .a-overlay  { animation: hero-overlay-in 2s ease 0s forwards; }
.hero-loaded .a-brand    { animation: brand-fade-in 1.8s cubic-bezier(0.16,1,0.3,1) 0.5s forwards; }
.hero-loaded .a-goldline { animation: gold-line-grow 1.4s cubic-bezier(0.16,1,0.3,1) 1.8s forwards; }
.hero-loaded .a-premium  { animation: hero-fade-up 1.4s ease-out 2.4s forwards; }
.hero-loaded .a-head1    { animation: headline-in 1.6s cubic-bezier(0.16,1,0.3,1) 2.2s forwards; }
.hero-loaded .a-head2    { animation: headline-in 1.6s cubic-bezier(0.16,1,0.3,1) 2.8s forwards; }
.hero-loaded .a-divider  { animation: hero-fade-up 1.4s ease-out 3.6s forwards; }
.hero-loaded .a-desc     { animation: hero-fade-up 1.4s ease-out 4.0s forwards; }
.hero-loaded .a-cta      { animation: hero-fade-up 1.4s ease-out 4.5s forwards; }
.hero-loaded .a-scroll   { animation: hero-fade-up 1.4s ease-out 5.2s forwards; }

/* ---------- 下層ページ（privacy / sitemap / thanks）用 ---------- */
.legal-body { color:#333; font-family:'Noto Serif JP',serif; font-weight:400; line-height:2.1; font-size:14px; }
.legal-body h2 { color:#0a0a0a; font-family:'Cormorant Garamond','Noto Serif JP',serif; font-weight:500; font-size:clamp(18px,2.4vw,24px); letter-spacing:0.04em; margin:3rem 0 1rem; }
.legal-body h3 { color:#1a1a1a; font-family:'Noto Serif JP',serif; font-weight:600; font-size:15px; letter-spacing:0.04em; margin:1.6rem 0 0.6rem; }
.legal-body p { margin:0 0 1rem; }
.legal-body ul { margin:0 0 1rem; padding-left:1.3rem; }
.legal-body li { margin:0 0 0.4rem; }
.legal-body a { color:#a07830; text-decoration:underline; text-underline-offset:3px; }
.legal-body a:hover { color:#c9a961; }