@charset "UTF-8";

/* ==========================================
   Base Styles (リセット・基本設定)
   ========================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333333;
    background-color: #ffffff;
    line-height: 1.2;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    max-width: 800px;
}

/* ==========================================
   Header Area (ヘッダー・ロゴ)
   ========================================== */
.site-header {
    background-color: #4a9bd9; /* 画像から抽出したブルー */
    color: #ffffff;
    padding: 20px 10px 25px 10px;
}

.header-sub {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

.header-logo {
    max-width: 280px; /* スマホ表示時のロゴの最大横幅 */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================
   Main Content Area (メインコンテンツ)
   ========================================== */
.main-content {
    padding: 50px 0 10px 0;
}

/* メンテナンスメッセージ */
.maintenance-msg {
    color: #0066cc; /* 青ベースの文字色 */
    margin-bottom: 40px;
}

.msg-alert, .msg-status {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.msg-contact {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.tel-link {
    color: #0066cc;
    text-decoration: underline;
    font-weight: bold;
}

.msg-hours {
    font-size: 0.95rem;
}

/* イラスト */
.illustration-wrap {
    max-width: 240px;
    margin: 0 auto 40px auto;
}

.salon-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 店舗情報 */
.shop-info {
    font-style: normal;
    color: #333333;
    font-size: 1rem;
    letter-spacing: 0.03em;
}

.shop-address {
    margin-bottom: 6px;
}

/* ==========================================
   Footer Area (フッター)
   ========================================== */
.site-footer {
    background-color: #4a9bd9;
    color: #ffffff;
    padding: 30px 10px;
    margin-top: 20px;
}

.copyright {
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}

/* ==========================================
   Responsive (PC用の微調整)
   ========================================== */
@media screen and (min-width: 600px) {
    .header-sub {
        font-size: 0.85rem;
    }
    
    .header-logo {
        max-width: 380px; /* PCでのロゴの最大横幅 */
    }
    
    .main-content {
        padding: 70px 0 40px 0;
    }
    
    .msg-alert, .msg-status, .msg-contact {
        font-size: 1.0rem;
        margin-bottom: 10px;
    }
    
    .msg-hours {
        font-size: 1.05rem;
    }
    
    .shop-info {
        font-size: 0.9rem;
    }
}