/*------------------------------------------
  Edge Talent Works - 共通スタイル
---------------------------------------------*/

/*------------------------------------------
  CSS変数（カラー・フォント・余白）
---------------------------------------------*/
:root {
  /* カラー */
  --main-teal: #006D77;
  --sub-mint: #83C5BE;
  --bg-light: #F8FBFC;
  --accent-gray: #EDF6F9;
  --color-white: #ffffff;
  --color-black: #2D3748;
  --color-gray: #6B7280;
  --teal-100: rgba(0, 109, 119, 0.1);
  --teal-600: #0d5c63;
  --teal-700: #0a4a50;
  --teal-800: #06383c;

  /* フォント */
  --font-family-sans: 'Noto Sans JP', sans-serif;
  --font-family-serif: 'Shippori Mincho', 'Noto Serif JP', serif;

  /* 余白 */
  --space-xs: 4px;
  --space-s: 8px;
  --space-sm: 16px;
  --space-m: 16px;
  --space-l: 40px;
  --space-xl: 60px;
  --space-xxl: 80px;

  /* レイアウト */
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1340px;
}

/*------------------------------------------
  ベース
---------------------------------------------*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-family-sans);
  color: var(--color-black);
  background-color: var(--bg-light);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

h1, h2, h3, .serif {
  font-family: var(--font-family-serif);
}

/*------------------------------------------
  フェードインアニメーション
---------------------------------------------*/
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in.delay-1 { transition-delay: 0.2s; }
.fade-in.delay-2 { transition-delay: 0.4s; }
.fade-in.delay-3 { transition-delay: 0.6s; }
.fade-in.delay-4 { transition-delay: 0.3s; }

/*------------------------------------------
  ナビゲーションリンク
---------------------------------------------*/
.nav-link {
  position: relative;
  transition: color 0.3s;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: var(--main-teal);
  transition: width 0.3s;
}

.nav-link:hover::after {
  width: 100%;
}

/*------------------------------------------
  縦書きテキスト
---------------------------------------------*/
.vertical-text {
  writing-mode: vertical-rl;
}

/*------------------------------------------
  ティールグラデーション
---------------------------------------------*/
.bg-teal-gradient {
  background: linear-gradient(135deg, var(--main-teal) 0%, var(--sub-mint) 100%);
}

/*------------------------------------------
  コンテナ
---------------------------------------------*/
.container {
  max-width: var(--max-width-2xl);
  margin: 0 auto;
  padding: 0 var(--space-m);
}

/* レスポンシブbr - SPで改行、PCで非表示 */
/* =========================
   改行制御用
========================= */

/* 初期状態：両方とも非表示にしておく */
.br-sp,
.br-pc {
  display: none;
}

/* =========================
   PC（768px〜）
========================= */
@media (min-width: 768px) {
  .br-pc {
    display: inline;
  }
}

/* =========================
   SP（〜767px）
========================= */
@media (max-width: 767px) {
  .br-sp {
    display: inline;
  }

  html {
    scroll-padding-top: 70px;
  }

  .container {
    padding: 0 var(--space-sm);
  }
}