/* ヘッダー専用CSS */
/* Header Styles - Nested Structure based on site-header.php */

.hd {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    /* hd__title セクション */
    .hd__title {
        display: none;
    }
    
    /* hd__main セクション */
    .hd__main {
        padding: 20px 0;
        
        .hd__container {
            max-width: 1500px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            /* ロゴ部分 */
            .hd__logo {
                display: flex;
                align-items: center;
                a {
                    display: flex;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                
                img {
                    width: 80px;
                    height: auto;
                    margin-right: 16px;
                }
                
                .company {
                    display: flex;
                    flex-direction: column;
                    white-space: nowrap;
                    .company__jpn {
                        font-size: 24px;
                        font-weight: 700;
                        color: #333;
                        line-height: 1.2;
                        .company__form {
                            font-size: 20px;
                        }
                        
                        .company__name {
                            font-size: 35px;
                            color: #333;
                        }
                    }
                    .company__eng {
                        font-size: 15px;
                        color: #101080;
                        margin-top: 2px;
                        letter-spacing: 0.5px;
                    }
                }
            }
            
            /* ナビゲーションとお問い合わせ部分 */
            .hd__nav-area {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 16px;
                
                /* サービスメニューとお問い合わせボタンの行 */
                .hd__top-row {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    width: 100%;
                    justify-content: space-between;
                    
                    /* サービスメニュー */
                    .hd__services {
                        display: flex;
                        gap: 16px;
                        
                        .hd__service-item {
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            color: #1E5698;
                            padding: 0;
                            font-size: 14px;
                            font-weight: 600;
                            
                            i {
                                font-size: 20px;
                                color: #1E5698;
                            }
                            
                            span {
                                font-size: 12px;
                                text-align: center;
                            }
                        }
                    }
                    
                    /* お問い合わせボタン */
                    .hd__contact {
                        display: flex;
                        gap: 12px;
                        margin-top: 0;
                        
                        .hd__contact-btn {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            padding: 12px 16px;
                            border-radius: 25px;
                            text-decoration: none;
                            font-size: 14px;
                            font-weight: 600;
                            transition: all 0.3s ease;
                            border: 2px solid transparent;
                            
                            img {
                                width: 16px;
                                height: 16px;
                                object-fit: contain;
                            }
                            
                            span {
                                white-space: nowrap;
                            }
                            
                            &.hd__contact-btn--phone {
                                background: #F98B3C;
                                color: white !important;
                                border-color: #F98B3C; 
                                &:hover {
                                    opacity: 0.8;
                                    transform: translateY(-2px);
                                }
                            }
                            
                            &.hd__contact-btn--mail {
                                background: #1E5698;
                                color: white !important;
                                border-color: #1E5698;
                                
                                &:hover {
                                    opacity: 0.8;
                                    transform: translateY(-2px);
                                }
                            }
                            &.hd__contact-btn--line {
                                background: #00C300;
                                color: white !important;
                                border-color: #00C300; 
                                
                                &:hover {
                                    opacity: 0.8;
                                    transform: translateY(-2px);
                                }
                            }
                        }
                    }
                }
                
                /* ナビゲーションメニュー */
                nav.hd__nav {
                    margin-top: 0;
                    
                    .hd__nav-list {
                        display: flex;
                        gap: 24px;
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        flex-wrap: wrap;
                        
                        .hd__nav-item {
                            margin: 0;
                            
                            a {
                                text-decoration: none;
                                color: #333;
                                font-size: 14px;
                                font-weight: 500;
                                padding: 8px 0;
                                transition: color 0.3s ease;
                                white-space: nowrap;
                                
                                &:hover {
                                    color: #1E5698;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 1024px) {
    .hd {
        & .hd__main {
            & .hd__container {
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 20px;
                .hd__nav-area {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    .hd__top-row {
                        flex-direction: column;
                        justify-content: center;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .hd {
        position: relative !important;
        
        .hd__main {
            padding: 0;
            .hd__container {
                flex-direction: column;
                padding: 0;
                justify-content: center;
                gap: 20px;
                .hd__nav-area {
                    align-items: center;
                    .hd__top-row {
                        flex-direction: column;
                        gap: 20px;
                        
                        .hd__services {
                            flex-wrap: wrap;
                            justify-content: center;
                            gap: 16px;
                        }
                    }
                }
                .hd__logo {
                    img {
                        width: 60px;
                        margin-right: 10px;
                    }
                    .company {
                        .company__jpn {
                            font-weight: normal;
                            .company__form {
                                font-size: 16px;
                                margin-right: 0;
                            }
                            .company__name {
                                font-size: 24px;
                            }
                        }
                        .company__eng {
                            font-size: 12px;
                        }
                    }
                }
                .hd__nav-area {
                    display: none;
                }
            }
        }
    }
}