/* navbar-pattern.css */

/* ナビバー専用・グレー系幾何学模様 */
.custom-navbar-pattern {
    background-color: #4a4a4a !important; /* ベースの濃いグレー */
    background-image: 
        repeating-linear-gradient(
            45deg,
            #5a5a5a,
            #5a5a5a 12px,
            #4a4a4a 12px,
            #4a4a4a 24px
        ),
        repeating-linear-gradient(
            -45deg,
            #5a5a5a,
            #5a5a5a 12px,
            #4a4a4a 12px,
            #4a4a4a 24px
        );
    background-size: 48px 48px;
}

/* ヘッダー専用・ナビバーと統一感あるグレー系＋グラデーション */
.custom-header-pattern {
    background-color: #4a4a4a !important; /* ナビバーの色ベース */
    background-image:
        repeating-linear-gradient(
            45deg,
            #5a5a5a,
            #5a5a5a 12px,
            #4a4a4a 12px,
            #4a4a4a 24px
        ),
        repeating-linear-gradient(
            -45deg,
            #5a5a5a,
            #5a5a5a 12px,
            #4a4a4a 12px,
            #4a4a4a 24px
        ),
        linear-gradient(135deg, #1e3c72, #2a5298, #6a11cb, #2575fc); /* 動くグラデーション */
    background-size: 48px 48px, 48px 48px, 400% 400%;
    animation: gradientShift 15s ease infinite; /* グラデーションアニメーション */
    color: #fff;
    padding: 120px 20px;
    text-align: center;
    box-shadow: inset 0 -30px 50px rgba(0,0,0,0.4);
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.custom-header-pattern h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.custom-header-pattern p {
    font-size: 1.3rem;
    opacity: 0.95;
    margin-bottom: 25px;
}

.custom-header-pattern a.btn {
    font-weight: 600;
    border-radius: 30px;
    padding: 14px 36px;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* お問い合わせフォームの修正 */
#contact .form-control {
    width: 100% !important;   
    max-width: 600px;         
    margin: 0 auto;           
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
#contact form {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}