@charset "utf-8";

/* ========================================
   CSS変数定義
======================================== */
:root {
  /* カラー管理 */
  --color-black: #111111;
  --color-white: #fafafa;
  --color-primary: #d4af37;
  --color-accent: #b3906d;
  --color-red: #e02f28;
  --color-text: #111111;
  --color-text-light: #b0b0b0;
  --color-bg-light: #f0f0f0;
  --color-bg-white: #fafafa;
  
  /* コンテンツ幅管理 */
  --content-width-sm: 800px;
  --content-width: 960px;
  --content-width-lg: 1200px;
  
  /* z-index管理 */
  --z-index-back: -1;
  --z-index-default: 1;
  --z-index-header: 100;
  --z-index-menu: 150;
  --z-index-modal: 200;
  
  /* スペーシング管理 */
  --spacing-xs: 0.5rem;      /* 8px */
  --spacing-xxs: 0.625rem;   /* 10px */
  --spacing-sm: 1rem;        /* 16px */
  --spacing-md: 1.5rem;      /* 24px */
  --spacing-lg: 2rem;        /* 32px */
  --spacing-xlg: 2.5rem;     /* 40px */
  --spacing-xl: 4rem;        /* 64px */
  --spacing-xxl: 5rem;       /* 80px */
  
  /* セクションパディング */
  --section-padding-pc: 140px;
  --section-padding-pc-sm: 120px;
  --section-padding-sp: 80px;
  --section-padding-sp-sm: 16px;
  
  /* フォント */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-display: "Playfair Display", serif;
}

/* ========================================
   ベーススタイル
======================================== */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  color: var(--color-text);
  background-color: var(--color-bg-white);
  font-size: 1rem;
  font-family: var(--font-sans);
  line-height: 1.8;
  letter-spacing: 0.05em;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.7;
}

/* クリックした際の青い枠線を削除 */
*:focus {
  outline: none;
}

/* タップした際の青い四角を削除 */
button,
span,
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ========================================
   ユーティリティクラス
======================================== */
/* PC表示時のみ非表示 */
.u_sp-none {
  display: block;
}

@media (max-width: 600px) {
  .u_sp-none {
    display: none;
  }
}

/* SP表示時のみ非表示 */
.u_pc-none {
  display: none;
}

@media (max-width: 600px) {
  .u_pc-none {
    display: block;
  }
}

/* タブレット以下で非表示 */
.u_tablet-none {
  display: block;
}

@media (max-width: 1080px) {
  .u_tablet-none {
    display: none !important;
  }
}

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

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