/* 1) ベースの整形 */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
  margin: 0; 
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, -apple-system, sans-serif; 
  color: #1a2332; 
  line-height: 1.7; 
  background: #ffffff;
}

/* Google Fonts読み込み */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* 2) 改良されたカラーパレット */
:root{
  /* ブランドカラー - 海をイメージした上品な青緑 */
  --brand-primary: #0891b2;     /* メインブランド色 */
  --brand-secondary: #0f766e;   /* アクセント色 */
  --brand-light: #67e8f9;       /* 薄いブランド色 */
  
  /* テキストカラー */
  --text-primary: #1a2332;      /* メインテキスト */
  --text-secondary: #64748b;    /* サブテキスト */
  --text-muted: #94a3b8;        /* 薄いテキスト */
  --text-white: #ffffff;
  
  /* 背景色 */
  --bg-primary: #ffffff;        /* メイン背景 */
  --bg-secondary: #f8fafc;      /* セカンダリ背景 */
  --bg-accent: #f0f9ff;         /* アクセント背景 */
  --bg-dark: #0f172a;           /* ダーク背景 */
  
  /* カード・ボーダー */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* レイアウト */
  --max-width: 1200px;
  --border-radius: 16px;
  --border-radius-sm: 8px;
  --border-radius-lg: 24px;
  
  /* アニメーション */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease-out;

/* 3) レイアウトユーティリティ */
.container{ 
  max-width: var(--max-width); 
  margin-inline: auto; 
  padding: 0 24px; 
}

.grid{ 
  display: grid; 
  gap: 32px; 
}

.grid-3{ 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
}

/* セクション共通スタイル */
section {
  padding: 80px 0;
}

section:nth-child(even) {
  background: var(--bg-secondary);
}

/* 見出し共通スタイル */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 24px;
  text-align: center;
}

h3 {
  font-size: clamp(20px, 3vw, 24px);
  margin-bottom: 16px;
}

/* 段落 */
p {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* 4) ヘッダー/フッター */
.site-header{ position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); backdrop-filter: blur(6px); border-bottom:1px solid #e5e7eb; }
.nav{ display:flex; align-items:center; gap:16px; flex-wrap: wrap; }
.nav a{ text-decoration:none; color:var(--ink); padding:10px 12px; border-radius:10px; }
.nav a:hover{ background:#eef2f7; }

/* 5) ボタン */
.btn{ display:inline-block; background:var(--brand); color:var(--brand-ink); padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; }
.btn:hover{ filter:brightness(1.05); }

/* 6) ヒーロー */
.hero{
  min-height:60vh;
  display:grid; place-items:center;
  text-align:center; color:#fff;
  /* ここをあなたの画像に */
  background: url('images/DSC_5352.jpg') center/cover no-repeat;
  position:relative;
}
.hero::before{
  content:""; position:absolute; inset:0;
  /* 文字が読みやすいよう、やさしいグラデを敷く */
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25));
}
.hero .inner{ position:relative; padding:48px 24px; }
.hero h1{ font-size: clamp(28px, 5vw, 48px); margin:0 0 12px; }
.hero p{ font-size: clamp(16px, 2.6vw, 20px); margin:0 0 24px; }
/* 7) カード */
.card{ background:var(--card); border:1px solid #e5e7eb; border-radius:16px; padding:20px; }
.card h3{ margin-top:0; }

/* 8) 画像 */
img{ max-width:100%; height:auto; border-radius:12px; display:block; }

/* 9) フッター */
.site-footer{ background:#0b1220; color:#cbd5e1; }
.site-footer a{ color:#cbd5e1; }