/*
Theme Name: Salon Natural
Description: ナチュラルでふわっとした感じのサロン向けWordPressテーマ
Version: 1.0
Author: uzuraFarm
*/

/* ========================================
   ナチュラル・ふわっとデザインシステム
   ======================================== */

/* ========================================
   1. デザイントークン（ナチュラルカラー）
   ======================================== */
:root {
    /* ナチュラルカラーパレット */
    --primary: #8FBC8F;        /* セージグリーン */
    --secondary: #DEB887;      /* バーリーウッド */
    --accent: #F5DEB3;         /* ウィート */
    --soft-pink: #F8E8E8;      /* ソフトピンク */
    --cream: #FFF8DC;          /* コーンシルク */
    --sage: #9CAF88;           /* セージ */
    --lavender: #E6E6FA;       /* ラベンダー */
    
    /* テキストカラー */
    --text: #4A4A4A;           /* ソフトグレー */
    --text-light: #7A7A7A;     /* ライトグレー */
    --text-soft: #A0A0A0;      /* ソフトグレー */
    
    /* 背景カラー */
    --bg: #FEFEFE;             /* ピュアホワイト */
    --bg-soft: #F9F9F9;        /* ソフトホワイト */
    --bg-cream: #FFF8DC;       /* クリーム */
    --bg-sage: #F0F4ED;        /* ソフトセージ */
    
    /* ボーダー */
    --border: #E8E8E8;         /* ソフトボーダー */
    --border-light: #F0F0F0;   /* ライトボーダー */
    
    /* スペーシング（ふわっと感を演出） */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;        /* 少し大きめ */
    --space-xl: 4rem;          /* ゆったり */
    --space-2xl: 6rem;         /* 余裕のある間隔 */
    --space-3xl: 8rem;         /* 贅沢な間隔 */
    
    /* タイポグラフィ */
    --font-family-primary: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    --font-family-accent: 'Georgia', 'Times New Roman', serif;
    
    /* コンテナ設定 */
    --container-max: 1200px;
    --container-padding: 2rem;
    
    /* ブレイクポイント */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    
    /* シャドウ（ふわっと感） */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
    
    /* ボーダーラディウス（やわらかい印象） */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
}

/* ========================================
   2. ベーススタイル
   ======================================== */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-primary);
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    font-size: 16px;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   3. 柔軟なコンテナシステム
   ======================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    box-sizing: border-box;
}

.container-full {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.container-fluid {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* サイト全体のレイアウト調整 */
.site {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

.site-content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ========================================
   4. フレキシブルグリッドシステム
   ======================================== */
.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

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

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

.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }

/* ギャップ調整 */
.gap-none { gap: 0; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-2-1,
    .grid-1-2 {
        grid-template-columns: 1fr;
    }
    
    .grid {
        gap: var(--space-md);
    }
    
    .grid-auto {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   5. ナチュラルコンポーネント
   ======================================== */

/* カード（ふわっと感） */
.card {
    background: var(--bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: all 0.4s ease;
    border: 1px solid var(--border-light);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.card-content {
    padding: var(--space-xl);
}

.card-soft {
    background: var(--bg-soft);
    border: none;
    box-shadow: var(--shadow-soft);
}

.card-cream {
    background: var(--bg-cream);
}

.card-sage {
    background: var(--bg-sage);
}

/* ボタン（ナチュラル） */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-xl);
    border: none;
    border-radius: var(--radius-xl);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-family-primary);
    letter-spacing: 0.5px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--sage));
    color: white;
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary), var(--accent));
    color: var(--text);
    box-shadow: var(--shadow-soft);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-soft {
    background: var(--bg-soft);
    color: var(--text);
    border: 1px solid var(--border);
}

/* ========================================
   6. セクション管理
   ======================================== */
.section {
    position: relative;
}

.section-padding {
    padding: var(--space-3xl) 0;
}

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

.section-padding-lg {
    padding: calc(var(--space-3xl) * 1.5) 0;
}

/* 背景バリエーション */
.section-bg-soft {
    background: var(--bg-soft);
}

.section-bg-cream {
    background: var(--bg-cream);
}

.section-bg-sage {
    background: var(--bg-sage);
}

.section-bg-gradient {
    background: linear-gradient(135deg, var(--bg-cream) 0%, var(--bg-sage) 100%);
}

/* 全幅セクション */
.section-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ========================================
   7. タイポグラフィ（ナチュラル）
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary);
    color: var(--text);
    line-height: 1.4;
    margin: 0 0 var(--space-md) 0;
    font-weight: 600;
}

h1 {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 1px;
}

h2 {
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

h3 {
    font-size: 2rem;
    font-weight: 500;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1.125rem;
}

p {
    margin: 0 0 var(--space-md) 0;
    line-height: 1.8;
    color: var(--text-light);
}

/* アクセントテキスト */
.text-accent {
    font-family: var(--font-family-accent);
    font-style: italic;
    color: var(--primary);
}

/* ========================================
   8. ユーティリティクラス
   ======================================== */

/* スペーシング */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }

.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }

/* テキスト */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-soft { color: var(--text-soft); }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 600; }

/* 表示制御 */
.hidden { display: none; }
.visible { display: block; }

@media (max-width: 768px) {
    .hidden-mobile { display: none; }
    .visible-mobile { display: block; }
}

@media (min-width: 769px) {
    .hidden-desktop { display: none; }
    .visible-desktop { display: block; }
}

/* ========================================
   9. レスポンシブ調整
   ======================================== */
@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
        --space-xl: 3rem;
        --space-2xl: 4rem;
        --space-3xl: 5rem;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.75rem;
    }
    
    .section-padding {
        padding: var(--space-2xl) 0;
    }
    
    .section-padding-lg {
        padding: var(--space-3xl) 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 0.75rem;
    }
}