/* ===================================================
   Futakami Ballet Arts Sakura カスタマイズCSS
   =================================================== */

/* 1. Google Fonts（Zen丸ゴシック）と全体カラー設定 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');

body, h1, h2, h3, h4, h5, h6, .navbar, .btn {
    font-family: 'Zen Maru Gothic', sans-serif !important;
    color: #4a3b32; /* 優しいダークブラウン */
}

/* 2. メインカラー（オレンジ → 桜ピンクへ変更） */
:root {
    --bs-primary: #f08197; /* チラシのメインピンク */
    --bs-primary-rgb: 240, 129, 151;
}

/* ナビゲーションバーの見た目調整 */
#mainNav .navbar-brand {
    color: #f08197 !important;
    font-weight: bold;
}
#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #f08197 !important;
}

/* ボタンを丸みのあるピンクにする */
.btn-primary {
    background-color: #f08197 !important;
    border-color: #f08197 !important;
    border-radius: 30px !important;
    padding: 12px 30px;
    font-weight: bold;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #e06d84 !important;
    border-color: #e06d84 !important;
}

/* 背景色設定 */
.bg-primary {
    background-color: #f08197 !important;
}

.bg-light {
    background-color: #fffdfa !important; /* 温かみのある背景 */
}

/* メリットなどの枠（角丸ピンク枠カード） */
.card-box {
    background: #ffffff;
    border: 2px solid #fdecf0;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(240, 129, 151, 0.1);
    margin-bottom: 20px;
    height: 100%;
}

.card-box h3 {
    color: #f08197;
    font-size: 1.25rem;
    margin-bottom: 15px;
}


/* 4. 画像ホバー時のオーバーレイ（オレンジ → 桜ピンク半透明） */
.portfolio-box .portfolio-box-caption {
    background: rgba(240, 129, 151, 0.9) !important;
}

/* 5. 日本語用レイアウト・文字組調整 */
body {
    line-height: 1.85 !important; /* 行間を広げて読みやすく */
    letter-spacing: 0.05em;      /* 文字と文字の間を少し開ける */
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4 !important;
    letter-spacing: 0.08em;
    font-weight: 700 !important;
}

/* 英字の強制大文字変換（text-uppercase）を無効化 */
.text-uppercase {
    text-transform: none !important;
}

/* スマホ表示時の見出しサイズ調整 */
@media (max-width: 768px) {
    header.masthead h1, 
    header.masthead .h1 {
        font-size: 2.2rem !important;
    }
    h2 {
        font-size: 1.6rem !important;
    }
}

/* バナーホバー時のふわっと拡大アニメーション */
.img-hover-zoom img {
    transition: transform 0.3s ease;
}
.img-hover-zoom:hover img {
    transform: scale(1.03);
}

/* ==========================================
   無料体験レッスン（#contact）のボタン調整
========================================== */

/* 1. 白背景ボタン（申込みフォーム） */
#contact .btn-light {
    background-color: #ffffff !important;
    color: #f08197 !important;
    border: 2px solid #ffffff !important;
    font-weight: bold;
}
#contact .btn-light:hover {
    background-color: #fdecf0 !important; /* ホバーでほんのり淡いピンク */
    color: #f08197 !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* 2. 白枠・透明ボタン（公式LINE / Instagram） */
#contact .btn-outline-light {
    background-color: transparent !important;
    color: #ffffff !important;           /* デフォルトの文字色は白 */
    border: 2px solid #ffffff !important;/* くっきり白い2px枠線 */
    font-weight: bold;
}
#contact .btn-outline-light:hover {
    background-color: #ffffff !important; /* ホバーで白背景に変化 */
    color: #f08197 !important;           /* ホバーで文字色がピンクに */
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* ==========================================
   区切り線（hr.divider）をSAKURAピンクに変更
========================================== */
hr.divider {
    background-color: #f08197 !important;
    border-color: #f08197 !important;
    opacity: 1 !important;
}