/* --- 1. Reset & Global Styles (タイポグラフィ改善を含む) --- */
* {
    box-sizing: border-box; /* 全要素に適用し、レイアウト計算を容易に */
}
body {
    /* フォント指定を強化 */
    font-family: 'Hiragino Sans', 'Meiryo', 'Yu Gothic', sans-serif; 
    line-height: 1.7; /* 行の高さを上げて読みやすく */
    font-size: 16px; 
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f8f8f8; /* 背景をわずかにグレーにして見やすく */
}
.container {
    width: 90%;
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 15px;
}

/* リンクの基本スタイル (ホバーエフェクト統一) */
a {
    color: #004a99; /* テーマカラーを使用 */
    text-decoration: none;
    transition: color 0.3s, opacity 0.3s; /* ホバー効果にトランジションを追加 */
}
a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* 見出しの共通スタイル調整 */
h1, h2, h3, h4, h5 {
    font-weight: 700;
    line-height: 1.3;
    color: #222; /* 濃いグレーに見出しの色を統一 */
}
h2 { font-size: 1.8em; }
h3 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2em;
    border-bottom: 3px solid #004a99;
    width: fit-content;
    margin: 1.5em auto 40px auto; /* 上部余白を調整 */
    padding-bottom: 5px;
}
h4 {
    margin-top: 1.5em; 
    margin-bottom: 0.5em; 
}

/* 段落とリストのスタイル調整 */
p {
    margin-bottom: 1.5em; /* 段落間にゆとりを持たせる */
}
ul {
    list-style: disc; 
    padding-left: 20px;
    margin-bottom: 1.5em;
}
ul li {
    margin-bottom: 0.5em;
}


/* --- 2. Header & Navigation (H1調整) --- */
header {
    background-color: #004a99; 
    color: white;
    padding: 15px 0;
    position: sticky; 
    top: 0;
    z-index: 1000;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header h1 {
    margin: 0;
    font-size: 1.5em;
    color: white; /* 【修正点】ヘッダー内のH1の色を白に固定 */
    line-height: 1.2; /* 【修正点】行間を狭めて複数行でもコンパクトに */
}
header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
header nav ul li a {
    color: white;
    text-decoration: none;
    padding: 5px 15px;
    display: block;
    transition: background-color 0.3s;
}
header nav ul li a:hover {
    background-color: #003366; 
    text-decoration: none;
    opacity: 1; 
}
.btn-contact {
    background-color: #ff9900; 
    border-radius: 5px;
}


/* --- 3. Hero Section (トップ) --- */
.hero {
    background-color: #0056b3; 
    color: white;
    text-align: center;
    padding: 100px 0;
}
.hero h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: white;
    margin-top: 0; /* H2がセクションの最初に来るため、上マージンをリセット */
}
.hero p {
    color: #f0f0f0;
}
.btn {
    display: inline-block;
    padding: 10px 30px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    font-weight: bold;
}
.btn-primary {
    background-color: #FFFFCC; 
    color: #333333; 
    padding: 12px 24px;
    border: 1px solid #333333; 
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease; 
}
.btn-primary:hover {
    background-color: #FFE5B4;
}


/* --- 4. Business Section (事業内容) --- */
.section {
    padding: 60px 0;
}
.section:nth-child(even) { 
    background-color: #f4f4f4;
}
.business-area {
    margin-bottom: 40px;
    padding: 20px;
    border: 1px solid #ddd;
    border-left: 5px solid #004a99;
}
.service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.service-item {
    flex: 1 1 calc(50% - 20px); 
    padding: 20px;
    border: 1px dashed #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 
}
.service-item.highlight {
    background-color: #fffacd; 
    border: 2px solid #ff9900; 
}
.service-list .service-item h5 {
    font-size: 1.2em; 
    font-weight: bold;
    color: #004a99; 
    margin-top: 0;
    margin-bottom: 10px;
}
.service-list .service-item h5.service-title-large {
    font-size: 1.4em; 
    padding-bottom: 5px;
    border-bottom: 2px solid #ff9900; 
}


/* --- 5. Why Us Section (選ばれる理由 - 3列レイアウト) --- */
.whyus .reason-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; 
    justify-content: center; 
    margin-top: 40px;
}

.whyus .reason-item {
    flex: 1 1 calc(33.333% - 20px); 
    min-width: 280px; 
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); 
    border-top: 5px solid #ff9900; 
}

.whyus .reason-item h4 {
    font-size: 1.15em;
    color: #004a99;
    margin-top: 0;
    margin-bottom: 10px;
}


/* --- 6. Map Section (所在地図) --- */
.map-section {
    padding: 0; 
}
.map-section .container {
    padding-top: 60px; 
    padding-bottom: 30px; 
}
.map-section h3 {
    margin-bottom: 20px; 
}
.map-section iframe {
    display: block; 
}


/* --- 7. Contact & Form Styles --- */
.contact form {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.btn-submit {
    width: 100%;
    background-color: #004a99;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    border: none;
    padding: 15px 0;
    transition: background-color 0.3s;
}
.btn-submit:hover {
    background-color: #003366;
}
.privacy-check {
    display: flex; 
    align-items: center; 
    margin-top: 20px;
}
.privacy-check {
    display: flex; 
    align-items: center; 
    margin-top: 20px;
}
.privacy-check input[type="checkbox"] {
    width: auto !important; 
    margin: 0 10px 0 0; 
}
.privacy-check label {
    font-weight: normal;
    display: inline; 
    cursor: pointer;
    margin-bottom: 0;
    /* 【修正点】コントラストを高めるために黒に近い色に固定 */
    color: #111111; 
}

/* 【新規追加】リンクの識別性を高めるために下線を追加 */
.privacy-check label a {
    text-decoration: underline !important; 
}

.privacy-check label a:hover {
    text-decoration: none !important; 
}

/* --- 8. Footer --- */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
}
footer a {
    color: #ff9900;
    text-decoration: none;
}
footer a:hover {
    color: #ffd700; 
    text-decoration: underline;
}
.social-links a {
    color: white !important; 
    transition: color 0.3s;
}
.social-links a:hover {
    color: #ff9900 !important; 
}


/* --- 9. Media Queries (Responsive Design) --- */
@media (max-width: 992px) {
    /* 選ばれる理由を2列に */
    .whyus .reason-item {
        flex: 1 1 calc(50% - 15px); 
    }
}

@media (max-width: 768px) {
    /* ヘッダー */
    header .container {
        flex-direction: column;
        text-align: center;
    }
    header h1 {
        font-size: 1.2em; /* 【修正点】モバイルでH1の文字を小さく */
    }
    header nav ul {
        flex-direction: column;
        width: 100%; 
        margin-top: 10px;
    }
    
    /* 事業内容を1列に */
    .service-list {
        flex-direction: column; 
    }
    .service-item {
        flex: 1 1 100%; 
    }
    
    /* 導入セクションの文字サイズ縮小 */
    .hero h2 {
        font-size: 2.0em;
    }
    
    /* セクションのパディング調整 */
    .section {
        padding: 40px 0;
    }
}

@media (max-width: 576px) {
    /* 選ばれる理由を1列に */
    .whyus .reason-item {
        flex: 1 1 100%; 
    }
}