/* =================================
   Common Styles - サイト共通スタイル
   ================================= */

/* --- 基本設定と変数 --- */
:root {
    --main-color: #1d1d1f;
    --accent-color-blue: #007AFF;
    --accent-color-red: #FF3B30;
    --background-color: #ffffff;
    --text-color: #333333;
    --light-gray: #f2f2f7;
    --border-color: #e5e5e5;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family:
  /* 欧文フォントを先に指定 */
  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,  
  /* 日本語フォントを指定 */
  "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "游ゴシック UI", YuGothic, "游ゴシック", Meiryo, sans-serif;
    line-height: 1.6;
    background-color: var(--background-color);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.container { width: 90%; max-width: 1100px; margin: 0 auto; }
h1, h2, h3 { color: var(--main-color); font-weight: 700; }
section { padding: 60px 0; }


/* --- ヘッダー (共通) --- */
.site-header {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-container { display: flex; justify-content: space-between; align-items: center; }
.site-logo { line-height: 1; }
.site-logo img { height: 42px; width: auto; vertical-align: middle; }
.main-nav ul { list-style: none; display: flex; }
.main-nav li { margin-left: 25px; }
.main-nav a { text-decoration: none; color: var(--main-color); font-weight: 500; position: relative; padding-bottom: 5px; }
.main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent-color-blue); transition: width 0.3s ease; }
.main-nav a:hover::after { width: 100%; }


/* --- フッター (共通) --- */
.site-footer {
    background-color: var(--main-color);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 50px 0;
}
.social-links { list-style: none; margin-bottom: 20px; }
.social-links li { display: inline-block; margin: 0 15px; }
.social-links a { color: var(--background-color); text-decoration: none; font-size: 1.5em; transition: color 0.3s ease, transform 0.3s ease; display: inline-block; }
.social-links a:hover { color: var(--accent-color-blue); transform: scale(1.2); }


/* --- ユーティリティ (共通) --- */
.spacer { width: 100%; clear: both; }
.spacer-sm { height: 0.8rem; }
.spacer-md { height: 1.6rem; }
.spacer-lg { height: 3.2rem; }


/* --- レスポンシブ (共通) --- */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 10px;
    }
    .main-nav li {
        margin: 0 10px;
    }
}