/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 主体字体和背景 */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f7fa;
    color: #333;
    line-height: 3; /* 调整行高为 2 */
}

/* Header部分 */
header {
    background-color: #1a3a5f; /* 深蓝色，传递稳重感 */
    color: white;
    padding: 20px 0;
    display: flex;
    justify-content: space-between; /* 左右分布 */
    align-items: center; /* 垂直居中对齐 */
    width: 100%;
}
.logo h1 a {
    text-decoration: none; /* 去掉链接下划线 */
    color: #ddd; /* 链接颜色与标题一致 */
    transition: color 0.3s ease; /* 平滑过渡效果 */
}

.logo h1 a:hover {
    color: #fff; /* 鼠标悬停时颜色变化 */
}

/* 导航栏 */
.navbar {
    display: flex;
    justify-content: center; /* 水平居中导航栏 */
    flex-grow: 1; /* 使导航栏可以占据剩余空间 */
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.navbar a:hover {
    background-color: #27ae60; /* 绿色，给人信任感 */
    transform: scale(1.1); /* 悬浮时放大效果 */
}

/* 主内容区 */
main {
    padding: 40px 20px;
    text-align: center;
}

/* 会社信息部分 */
.company-info h2 {
    font-size: 28px;
    color: #1a3a5f;
    margin-bottom: 20px;
}

/* 改善表格的外观 */
.company-details {
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
    background: linear-gradient(to right, #ffffff, #f5f7fa); /* 渐变背景 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    border-radius: 10px; /* 圆角 */
}

/* 为表格内容设置不同的行高 */
.company-details td {
    padding: 15px 30px; /* 增加左右内边距，左右间距变大 */
    text-align: left;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    background-color: #f9f9f9; /* 背景色 */
    line-height: 1.8; /* 调整表格行高为 1.8 */
    transition: background-color 0.3s ease; /* 背景色变化的动画效果 */
}

.company-details .label {
    font-weight: bold;
    color: #333;
    width: 150px;
    background-color: #f1f1f1; /* 标题部分背景色 */
    padding-left: 30px; /* 增加标签的左边距 */
}

.company-details td:last-child {
    color: #555;
}

/* 鼠标悬浮时改变背景颜色 */
.company-details tr:hover td {
    background-color: #d0e4f1; /* 浅蓝色背景 */
}

.company-details tr:nth-child(even) td {
    background-color: #f5f7fa; /* 交替的背景色 */
}

.company-details tr:nth-child(odd) td {
    background-color: #ffffff;
}

/* 去掉最后一行的底部边框 */
.company-details tr:last-child td {
    border-bottom: none;
}


/* 房源卡片 */
.property-card {
    display: inline-block;
    width: 30%;
    margin-right: 15px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.property-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.property-card:hover {
    transform: translateY(-10px); /* 鼠标悬浮时上升 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.property-card h3 {
    color: #1a3a5f; /* 深蓝色 */
    font-size: 18px;
    margin-bottom: 10px;
}

.property-card p {
    color: #27ae60; /* 绿色 */
    font-size: 16px;
    margin-bottom: 10px;
}

.property-card a {
    color: #3498db; /* 蓝色 */
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    padding: 8px 12px;
    background-color: #ecf0f1; /* 浅灰色背景 */
    transition: background-color 0.3s ease;
}

.property-card a:hover {
    background-color: #1a3a5f; /* 深蓝色 */
    color: white;
}

/* 搜索部分 */
.search input {
    padding: 12px 18px;
    margin-right: 10px;
    font-size: 16px;
    border: 2px solid #3498db;
    border-radius: 5px;
    transition: border-color 0.3s ease;
}

.search input:focus {
    border-color: #27ae60;
    outline: none;
}

.search button {
    padding: 12px 20px;
    background-color: #3498db; /* 蓝色 */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.search button:hover {
    background-color: #1a3a5f; /* 深蓝色 */
    transform: scale(1.05);
}

.search button:focus {
    outline: none;
}

/* 按钮样式 */
button {
    background-color: #3498db; /* 蓝色 */
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
    background-color: #27ae60; /* 绿色 */
    transform: scale(1.1);
}

button:focus {
    outline: none;
}

/* サービス部分 */
.our-services h2 {
    font-size: 28px;
    color: #1a3a5f;
    margin-bottom: 20px;
}

.services-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* 防止内容溢出，自动换行 */
}

.service-card {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    width: 30%;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card h3 {
    font-size: 22px;
    color: #1a3a5f;
    margin-bottom: 15px;
}

.service-card p {
    font-size: 16px;
    color: #777;
}

.service-card:hover {
    transform: translateY(-10px); /* 鼠标悬浮时上升 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
/* 页脚部分 */
footer {
    background-color: #1a3a5f; /* 深蓝色背景 */
    color: white;
    padding: 20px 10px; /* 调整padding，使得整体更紧凑 */
    text-align: center;
}

.footer {
    max-width: 1000px; /* 限制最大宽度 */
    margin: 0 auto; /* 居中显示 */
    padding: 20px; /* 为内容添加内边距 */
    background-color: #1a3a5f; /* 保证背景色覆盖整个页脚 */
    border-radius: 10px; /* 圆角边框 */
}

.footer-company {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 使内容可以换行 */
    margin-bottom: 20px; /* 减少底部间距 */
}

.company-title {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中心对齐公司名称 */
    margin-right: 20px; /* 右侧间距 */
}

.footer-company-logo img {
    width: 100%;
    height: auto;
    max-width: 120px; /* 设置图片宽度限制 */
}

.company-name {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    color: #fff;
}

.company-address {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.company-item {
    margin-bottom: 10px;
}

.company-item span {
    font-weight: bold;
}

.company-item div {
    margin-bottom: 5px;
}

/* TEL 和 FAX 放在同一行 */
.company-item .tel-fax {
    display: flex;
    justify-content: center;
    gap: 20px; /* 设置间距 */
}

/* 确保 営業時間 和 定休日 在同一行 */
.company-item .business-hours {
    display: inline-flex; /* 使用 inline-flex 确保它们在同一行 */
    justify-content: center;
    gap: 20px; /* 设置间距 */
    align-items: center; /* 垂直居中对齐 */
}

/* 为了使版权信息更小 */
footer p {
    font-size: 12px; /* 更小的字体 */
    color: #bbb;
    margin-top: 15px;
}
/* Basic styles for the contact form table */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table td {
    padding: 8px;
    vertical-align: middle;
}

table td label {
    display: block;
    font-weight: bold;
}

table input,
table textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

table input:focus,
table textarea:focus {
    border-color: #0056b3;
    outline: none;
}

table button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

table button:hover {
    background-color: #0056b3;
}

form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    table td {
        display: block;
        width: 100%;
    }

    table button {
        width: 100%;
    }
}

/* 在小屏幕上调整布局 */
@media (max-width: 768px) {
    .footer-company {
        flex-direction: column; /* 小屏幕时每一部分垂直排列 */
        align-items: center;
    }

    .company-name {
        text-align: center;
    }

    .company-address {
        align-items: center;
    }

    /* 小屏幕下将TEL和FAX改为垂直排列 */
    .company-item .tel-fax {
        flex-direction: column;
    }

    /* 小屏幕下将営業時間和定休日改为垂直排列 */
    .company-item .business-hours {
        flex-direction: column;
    }
}


/* 为了在小屏幕上更好显示，调整服务卡片的宽度 */
@media (max-width: 768px) {
    .service-card {
        width: 100%; /* 小屏幕上每个服务占满整行 */
    }
}
/* 手机端样式（最大宽度768px） */
@media (max-width: 768px) {

    /* Header部分 */
    header {
        padding: 15px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo h1 a {
        font-size: 18px;
    }

    /* 导航栏（隐藏默认的ul菜单） */
    .navbar {
        display: none; /* 默认隐藏导航栏 */
        width: 100%;
        position: absolute;
        top: 70px; /* 定位到页面顶部 */
        left: 0;
        background-color: #1a3a5f;
        text-align: center;
        z-index: 999;
    }

    .navbar ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .navbar a {
        display: block;
        padding: 15px 20px;
        color: white;
        text-decoration: none;
        font-size: 16px;
        border-top: 1px solid #ddd;
        transition: background-color 0.3s ease;
    }

    .navbar a:hover {
        background-color: #27ae60;
    }

    /* 汉堡菜单 */
    .hamburger-menu {
        display: block; /* 显示汉堡菜单 */
        cursor: pointer;
    }

    .hamburger-menu .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: #fff;
        transition: 0.3s;
    }

    /* 菜单展开后的效果 */
    .navbar.active {
        display: block; /* 显示菜单 */
    }

    /* Header中导航栏菜单被激活时，汉堡菜单图标变换 */
    .hamburger-menu.active .bar:nth-child(1) {
        transform: rotate(-45deg);
        position: relative;
        top: 8px;
    }

    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active .bar:nth-child(3) {
        transform: rotate(45deg);
        position: relative;
        top: -8px;
    }
}

/* 默认导航栏（桌面端）保持原样 */
.navbar {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.navbar a:hover {
    background-color: #27ae60;
    transform: scale(1.1);
}