/* =========================================
   基本設定
========================================= */
* { box-sizing: border-box; }
body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0; padding: 0;
    color: #333; line-height: 1.6;
    letter-spacing: 0.05em;
    padding-top: 100px;
    background-color: #f0f6f9;
}
:root {
    --main-color: #010066;
    --accent-color: #013220;
    --bg-gray: #e6eef2;
}

/* =========================================
   ヘッダー
========================================= */
header {
    background-color: #fff; width: 100%; position: fixed; 
    top: 0; left: 0; z-index: 1000; height: 100px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: height 0.4s ease, box-shadow 0.4s ease;
}
header.is-scrolled { height: 70px; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.header-container { width: 100%; padding: 0 30px; display: flex; justify-content: space-between; align-items: center; height: 100%; }
.logo img { height: 80px; width: auto; display: block; transition: height 0.4s ease; }
header.is-scrolled .logo img { height: 50px; }

nav ul { list-style: none; display: flex; padding: 0; margin: 0; align-items: center; }
nav ul li { margin-left: 20px; }
nav ul li a { text-decoration: none; color: #333; font-weight: 500; font-size: 14px; position: relative; padding-bottom: 5px; display: block; }
nav ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: var(--accent-color); transition: width 0.3s ease; }
nav ul li a:hover::after { width: 100%; }
nav ul li a.btn-contact::after { display: none; }
.btn-contact { border: 1px solid var(--accent-color); color: var(--accent-color) !important; padding: 8px 18px; font-weight: bold; transition: all 0.3s; white-space: nowrap; }
.btn-contact:hover { background-color: var(--accent-color); color: #fff !important; }

/* =========================================
   メインビジュアル
========================================= */
.hero { position: relative; height: 600px; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: white; background-color: var(--main-color); overflow: hidden; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: linear-gradient(rgba(0,0,50,0.1), rgba(0,0,50,0.1)), url('hero1.jpg'); background-size: cover; background-position: center; animation: slideShow 8s infinite; }
.hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: linear-gradient(rgba(0,0,50,0.1), rgba(0,0,50,0.1)), url('hero2.jpg'); background-size: cover; background-position: center; }
@keyframes slideShow { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
.hero-content { position: relative; z-index: 10; max-width: 1000px; padding: 0 20px; }
.hero h2 { font-size: 50px; margin-bottom: 30px; line-height: 1.3; font-weight: 700; letter-spacing: 0.1em; text-shadow: 0 5px 15px rgba(0,0,0,0.8); }
.hero p { font-size: 20px; font-weight: 700; line-height: 1.8; text-shadow: 0 3px 8px rgba(0,0,0,0.8); }

/* =========================================
   共通セクション
========================================= */
section { padding: 100px 0; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.section-title { text-align: center; font-size: 32px; color: var(--main-color); margin-bottom: 60px; position: relative; }
.section-title::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--accent-color); margin: 15px auto 0; }
.section-gray { background-color: var(--bg-gray); }

.greeting-content p { text-align: center; margin-bottom: 30px; }
.ceo-name { text-align: right; font-weight: bold; margin-top: 40px; }

.company-table { width: 100%; border-collapse: collapse; background: transparent; box-shadow: none; }
.company-table tr { border-bottom: 1px solid #ccc; }
.company-table th, .company-table td { padding: 25px 10px; text-align: left; }
.company-table th { background-color: transparent; width: 20%; color: var(--main-color); font-weight: bold; padding-left: 0; }
.company-table td { width: 80%; }

/* =========================================
   事業内容
========================================= */
.service-list { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 60px; }
.service-item { background: #fff; width: 48%; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden; }
.service-img-box { width: 100%; height: 500px; overflow: hidden; position: relative; }
.service-img-box img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.5s ease; }
.img-main { z-index: 1; }
.img-sub { z-index: 2; animation: crossFade 8s infinite; }
@keyframes crossFade { 0% { opacity: 0; } 45% { opacity: 0; } 50% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }

.service-text { padding: 30px; }
.service-item h4 { font-size: 22px; color: var(--main-color); margin: 0 0 15px; border-bottom: 2px solid var(--accent-color); display: inline-block; padding-bottom: 5px; }
.service-item p { font-size: 15px; color: #666; margin: 0; line-height: 1.8; }

.area-info { background: #fff; padding: 40px; text-align: center; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin-top: 60px; border: 1px solid #eee; }
.area-info h4 { font-size: 20px; color: var(--main-color); margin: 0 0 20px; display: inline-block; border-bottom: 2px solid var(--accent-color); padding-bottom: 5px; font-weight: bold; }
.area-info p { font-size: 16px; margin: 0 0 10px; }
.area-info .small-note { font-size: 13px; color: #666; margin-top: 5px; }

/* =========================================
   トップページお問い合わせ
========================================= */
.contact-section { position: relative; width: 100%; padding: 100px 0; color: var(--main-color); overflow: hidden; }
.contact-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; }
.contact-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.85); }

.contact-content { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; }
.contact-left { width: 55%; }
.contact-title { font-size: 80px; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.05em; line-height: 1; color: var(--main-color); }
.contact-desc { font-size: 18px; font-weight: bold; line-height: 1.8; margin-bottom: 40px; color: #333; }
.contact-right { width: 40%; text-align: left; }
.contact-row { display: flex; align-items: center; margin-bottom: 30px; flex-wrap: wrap; }
.label-box { border: 1px solid var(--main-color); padding: 5px 15px; font-size: 13px; font-weight: bold; color: var(--main-color); margin-right: 20px; white-space: nowrap; background: rgba(255,255,255,0.5); }
.contact-text { font-size: 16px; font-weight: bold; line-height: 1.5; }
.contact-text .small { font-size: 14px; font-weight: normal; }
.contact-text .xs { font-size: 12px; font-weight: normal; opacity: 0.8; }
/* --- 修正：お問い合わせボタンを「白→緑」に変更 --- */
.btn-mail-form { 
    display: block; 
    width: 100%; 
    
    /* ★ここを変更：最初は白背景・緑文字・緑枠線 */
    background-color: #fff; 
    color: var(--accent-color); 
    border: 2px solid var(--accent-color);
    
    padding: 20px; 
    text-align: center; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 18px; 
    transition: all 0.3s; 
}

/* マウスを乗せた時の動き */
.btn-mail-form:hover { 
    /* ★ここを変更：ホバーすると緑背景・白文字 */
    background-color: var(--accent-color); 
    color: #fff; 
}

.btn-mail-form .arrow { 
    margin-left: 15px; 
}

/* =========================================
   フッター
========================================= */
footer { 
    background-color: #fff; /* 背景を白く */
    color: var(--main-color); 
    border-top: 5px solid var(--accent-color); 
    padding: 40px 0; 
    text-align: center; 
    
    /* ★ここを追加：写真の上に確実に乗せる設定 */
    position: relative; 
    z-index: 100; 
}

.footer-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 20px; 
}
.footer-logo img { 
    height: 60px; 
    width: auto; 
    background: none; 
    filter: none; 
    padding: 0; 
    mix-blend-mode: normal; 
}
footer p { 
    margin: 0; 
    font-size: 12px; 
    opacity: 1; 
    font-weight: bold; 
}

/* =========================================
   お問い合わせページ用 (contact.html)
========================================= */
.contact-hero-section { position: relative; width: 100%; min-height: 100vh; padding-top: 150px; padding-bottom: 100px; background-image: url('contact-hero.png'); background-size: cover; background-position: center; background-attachment: fixed; color: #fff; }
.contact-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; }
.contact-container {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 40px;
    
    /* ★ここを変更：0.6 から 0.4 にして、さらに薄く透けさせる */
    background-color: rgba(0, 0, 0, 0.4);
    
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.contact-hero-header { text-align: center; margin-bottom: 40px; }
.contact-hero-title { font-size: 36px; font-weight: bold; margin: 0 0 10px; letter-spacing: 0.1em; }
.contact-hero-subtitle { font-size: 16px; opacity: 0.8; letter-spacing: 0.2em; margin: 0 0 15px; color: var(--accent-color); font-weight: bold; }
.breadcrumb { font-size: 13px; opacity: 0.6; }
.breadcrumb a { color: #fff; text-decoration: none; }

.contact-message-area { text-align: center; margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.contact-message-area h3 { font-size: 24px; margin-bottom: 25px; display: inline-block; border-bottom: 3px solid var(--accent-color); padding-bottom: 10px; }
.contact-message-area p { font-size: 16px; line-height: 2.2; text-align: center; display: inline-block; }
.required-note { color: #ff9999; font-weight: bold; }

.contact-form-transparent { margin-top: 20px; }
.form-row { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 20px; }
.form-group { width: 48%; }
.form-group-full { width: 100%; margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-weight: bold; color: #fff; font-size: 15px; text-align: left; }
.required { background: #ff4d4d; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-left: 8px; }
.optional { background: rgba(255,255,255,0.3); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-left: 8px; }
input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 15px; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; background: rgba(255,255,255,0.1); color: #fff; font-size: 16px; font-family: inherit; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.5); }
input:focus, textarea:focus { background: rgba(255,255,255,0.2); border-color: var(--accent-color); outline: none; }
.form-btn-area { text-align: center; margin-top: 40px; }
/* --- 修正：送信ボタンを「白→緑」に変更 --- */
.btn-submit-white {
    /* ★最初は白背景・緑文字 */
    background-color: #fff;
    color: var(--accent-color);
    border: 2px solid var(--accent-color); /* 緑の枠線を追加 */
    
    width: 300px;
    padding: 18px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.btn-submit-white:hover {
    /* ★マウスを乗せると緑背景・白文字 */
    background-color: var(--accent-color);
    color: #fff;
}
/* =========================================
   ★プライバシーポリシー（ドキュメント風・完全一本化版）★
========================================= */

/* 背景設定 */
.policy-page-body {
    background-color: #f4f5f7;
    min-height: 100vh;
}

/* 全体の枠組み */
.policy-wrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 140px 20px 100px; /* 上の余白を確保 */
}

/* タイトルエリア */
.policy-title-area {
    text-align: center;
    margin-bottom: 50px;
}
.policy-title-area h1 {
    font-size: 30px;
    color: var(--main-color);
    margin: 0 0 10px;
    letter-spacing: 0.1em;
}
.policy-title-area p {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-color);
}

/* ★ここが重要：1枚の紙の設定 */
.policy-document {
    background: #fff;
    padding: 60px 50px; /* 紙の内側の余白 */
    border-radius: 5px;
    /* 影をつけて紙っぽく見せる */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}

/* --- ここから文章の間隔設定（Wordのような自然な並びにする） --- */

/* 冒頭の文章 */
/* --- 修正後（これをコピペして上書き！） --- */
.policy-document .lead-text {
    margin-bottom: 60px; /* ★ここの数字を大きくすれば、もっと空きます */
    line-height: 1.8;
}

/* 見出し（第〇条）のデザイン変更 */
.policy-document h2 {
    font-size: 18px;
    color: var(--main-color);
    
    /* ★ここを変更：下線を消して、左側に緑の太線を追加 */
    border-bottom: none; 
    border-left: 6px solid var(--accent-color); /* 緑色の縦線 */
    padding-left: 15px; /* 線と文字の間隔 */
    padding-bottom: 0;

    margin-top: 40px;    /* 上の余白 */
    margin-bottom: 15px; /* 下の余白 */
}

/* 最初の見出しだけ上を詰める（そのまま維持） */
.policy-document h2:first-of-type {
    margin-top: 0;
}

/* 本文・リストの文字設定 */
.policy-document p, 
.policy-document li {
    font-size: 15px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 5px; /* 文章の下に少しだけ隙間 */
}

/* リストの設定 */
.policy-document ul, 
.policy-document ol {
    margin: 5px 0 10px 20px; /* 左にインデント */
    padding: 0;
}

/* 住所ボックス */
.address-box {
    margin-top: 20px;
    background: #fafafa;
    padding: 20px;
    border-radius: 4px;
}
.address-box .company {
    font-weight: bold;
    color: var(--main-color);
}

/* 制定日 */
.date {
    text-align: right;
    margin-top: 40px;
    color: #888;
    font-size: 13px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* スマホ対応 */
@media screen and (max-width: 600px) {
    .policy-document { padding: 30px 20px; }
    .policy-title-area h1 { font-size: 24px; }
}
/* =========================================
   レスポンシブ対応（スマホ・タブレット）
   ここから下を上書きしてください
========================================= */
@media screen and (max-width: 900px) {
    
    /* --- 1. ヘッダーの修正（ロゴの下にメニュー） --- */
    header, header.is-scrolled {
        height: auto; /* 高さを自動調整 */
        padding: 15px 0;
    }
    
    .header-container {
        flex-direction: column; /* 縦並びにする */
        gap: 15px;
        padding: 0;
    }

    .logo img {
        height: 50px; /* ロゴサイズ調整 */
        margin: 0 auto; /* 中央寄せ */
    }

    /* メニューをロゴの下に横並びで配置 */
    nav {
        width: 100%;
    }
    nav ul {
        display: flex;
        justify-content: center; /* 中央揃え */
        flex-wrap: wrap; /* 入りきらない場合は折り返す */
        gap: 10px 15px; /* 上下10px, 左右15pxの間隔 */
        padding: 0 10px;
    }
    nav ul li {
        margin: 0; /* 元の余白をリセット */
    }
    nav ul li a {
        font-size: 12px;
        padding-bottom: 2px;
    }
    /* お問い合わせボタンの調整 */
    .btn-contact {
        padding: 6px 12px;
        font-size: 11px;
    }

    /* --- 2. メインビジュアルの文字サイズ調整 --- */
    .hero h2 {
        font-size: 28px; /* スマホで見やすいサイズに */
        line-height: 1.5;
        margin-bottom: 20px;
    }
    .hero p {
        font-size: 14px;
    }

    /* --- 3. 事業内容（縦並び＆画像比率修正） --- */
    .service-list {
        flex-direction: column; /* ★ここが重要：縦に積む */
        gap: 40px;
    }
    .service-item {
        width: 100%; /* 横幅いっぱいに */
    }
    .service-img-box {
        width: 100%;
        /* ★高さ500pxだとスマホでは縦長すぎるので、250pxに戻す */
        height: 250px; 
    }

    /* --- 4. 会社概要の表 --- */
    .company-table th, .company-table td {
        display: block;
        width: 100%;
        padding: 8px 0;
    }
    .company-table th {
        color: var(--accent-color);
        padding-bottom: 0;
        border-bottom: none;
    }

    /* --- 5. CONTACTセクション（縦並び・はみ出し防止） --- */
    .contact-section {
        padding: 60px 0;
    }
    
    /* 全体を縦並び・中央揃えに */
    .contact-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }
    
    /* 左側（タイトルなど） */
    .contact-left {
        width: 100%;
    }
    .contact-title {
        font-size: 42px; /* ★はみ出さないようにサイズ縮小 */
        margin-bottom: 15px;
        word-break: break-all; /* 長い単語でも折り返す */
    }
    .contact-desc {
        font-size: 15px;
        margin-bottom: 20px;
        text-align: center; /* 文字を中央に */
    }

    /* 右側（詳細情報・ボタン） */
    .contact-right {
        width: 100%;
        text-align: center;
    }
    
    /* 営業時間などの行を縦積みに */
    .contact-row {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .label-box {
        margin: 0; /* 余白リセット */
        display: inline-block;
        background: rgba(255,255,255,0.9); /* 読みやすく */
    }
    
    .contact-text {
        font-size: 15px;
    }
    
    /* ボタン */
    .btn-mail-form {
        padding: 15px;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box; /* パディングを含めて幅計算 */
    }

    /* --- その他：プライバシーポリシーなど --- */
    .policy-paper {
        padding: 30px 20px;
    }
    .policy-header-inner h1 {
        font-size: 24px;
    }
}