/* encompass.co.jp All rights reserved Fuku*/


/* 全体の余白リセット */
body {
    margin: 0;
    padding: 0;
    font-family: 'メイリオ', '游ゴシック', 'ヒラギノ角ゴシック', sans-serif;
    line-height: 1.6;
    color: #2d2b67;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
header {
    position: fixed;
    top: -100px; /* 初期状態で隠す */
    left: 0;
    width: 100%;
    background-color: #004080; /* ヘッダーの背景色 */
    color: #fff;
    padding: 10px 20px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* ヘッダーの影 */
    transition: top 0.3s ease; /* スムーズな表示・非表示 */
     margin-bottom: 0; /* 下部の余白を削除 */
}
header.visible {
    top: 0; /* ヘッダーを表示 */
}
header ul {
    list-style: none;
    padding: 0;
}
header ul li {
    display: inline;
    margin: 0 10px;
}
header ul li a {
    color: #fff;
    text-decoration: none;
}
header .logo {
    display: flex;
    align-items: center;
}
header .logo img {
    height: 50px; /* ロゴの高さ */
    margin-right: 20px; /* ナビゲーションとロゴの間にスペース */
    margin-left: 10px; /* 左側に2pxの余白を追加 */
}
header nav ul {
    list-style: none;
    padding: 0;
    display: flex;
}
header nav ul li {
    margin: 0 10px;
}
header nav ul li a {
    color: #fff;
    text-decoration: none;
}
/* ヒーローセクションのスタイル */
#hero {
    margin: 0; /* 外部余白を完全に削除 */
    padding: 0; /* 内部余白も調整 */
    margin-bottom: 80px; /* 下の余白を増やす */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    overflow: hidden;
    transition: border-radius 0.2s ease; /* 滑らかに変化 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 視覚的な境界を追加 */
}
/* 背景イメージ */
.parallax-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 背景画像の横幅は固定 */
    height: 100%;
    background: url('../img/hero-image.webp') no-repeat center center/cover;
    z-index: 1; /* コンテンツの背面に配置 */
    transform-origin: center; /* 縮小の中心点を設定 */
    transition: transform 0.2s ease; /* パララックスのみ動く */
    will-change: transform; /* パフォーマンス向上 */ 
}
#hero .container {
    color: #fff; /* 白文字で背景とコントラストを取る */
    width: 90%;
    box-sizing: border-box;
    margin: auto;
    will-change: transform; /* パフォーマンス向上 */
}
/* ヒーローコンテンツのスタイル 不要かも*/
#hero .container {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 20px;
    text-align: center;
    background: rgba(27, 102, 240, 0.35);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#hero h1 {
    font-size: 2.5rem;
}
#hero p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}
#hero .btn:hover {
    background: #003d80;
}
section {
    margin: 2rem 0;
}
.grid {
    display: flex;
    gap: 20px; /* 各ボックスの間隔を調整 */
    justify-content: center; /* 横方向に中央揃え */
    flex-wrap: wrap; /* 狭い画面では折り返し */
}
.grid div {
    padding: 1rem;
    border-radius: 5px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 初期状態で非表示 */
.service-box {
    opacity: 0;
    transform: translateX(50px); /* 左からスライドイン */
    transition: opacity 0.5s ease, transform 0.5s ease;
}
/* 表示時 */
.service-box.visible {
    opacity: 1;
    transform: translateX(0); /* 元の位置に戻る */
}
/* サービスごとの背景画像設定 */
.investment-support {
    background: url('../img/investment-support.webp') no-repeat center center/cover; /* 背景画像 */
    position: relative; /* 必須：相対位置指定 */
}
.real-estate-management {
    background: url('../img/real-estate-management.webp') no-repeat center center/cover; /* 不動産管理の背景 */
}
.consulting {
    background: url('../img/consulting.webp') no-repeat center center/cover; /* コンサルティングの背景 */
}
/* 事業内容セクション */
#services {
    margin-top: 80px; /* 上の余白を増やす */
    margin-bottom: 80px; /* 下の余白を増やす */
}
#services h2 {
    font-size: 2.5rem; /* フォントサイズを調整 */
    font-weight: bold; /* 文字を太く */
    text-align: center; /* 中央揃え（オプション） */
    margin-bottom: 1rem; /* 見出し下の余白を設定 */
}
.service-box {
    background-size: cover;
    background-position: center;
    color: #fff; /* テキストを白にして背景に映えるように */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
    min-height: 360px; /* 各四角の高さを統一 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative; /* 擬似要素の配置に必要 */
        flex: 1; /* 均等幅 */
    max-width: 30%; /* 通常画面では横幅30% */
        width: calc(33.333% - 1rem); /* 通常画面で3分割 */
    box-sizing: border-box; /* パディングを含めたサイズ調整 */

    /* 背景のオーバーレイ（透過効果） */
    background-color: rgba(0, 0, 0, 0.5); /* デフォルトの黒オーバーレイ */
    background-blend-mode: overlay; /* 背景画像と色をブレンド */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .grid {
        flex-direction: column; /* スマートフォンでは縦並びに変更 */
        gap: 1rem; /* 各ボックスの間に余白 */
    }

    .service-box {
        max-width: 100%; /* 横幅を画面幅いっぱいに設定 */
        margin-bottom: 1rem; /* 下に余白を追加 */
    }
}



/* テキスト自体のスタイル */
/* サービスボックスのスタイル */
.service-box {
    background-size: cover;
    background-position: center;
    color: #fff; /* テキストを白にして背景に映えるように */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative; /* 擬似要素の配置に必要 */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */

    /* 正方形の設定 */
    width: calc(100% / 3 - 20px); /* 横幅を3分割、間隔を調整 */
    aspect-ratio: 1 / 1; /* 縦横比を1:1に設定 */
}
form {
    max-width: 600px;
    margin: auto;
    text-align: left;
}
form label {
    display: block;
    margin: 0.5rem 0;
}
/* 名前/メアドテキストエリア */
form input, form textarea {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #004080; /* 青の境界線 */
    border-radius: 5px;
    }
/* 問い合わせテキストエリア */
textarea {
    height: 150px; /* 初期の縦幅を固定 */
    resize: none; /* ユーザーがサイズ変更できないようにする */
    font-family: inherit; /* 親要素のフォントを継承 */
    font-size: 1rem; /* フォントサイズを設定 */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}

form button {
    background: #004080; /* 深い青 */
    color: #fff;
    cursor: pointer;
    max-width: 200px;
    float: right;
}
form button:hover {
    background: #003060; /* ボタンのホバー色 */
}
footer {
    position: relative; /* スタティックにすることで、直前の要素にぴったりつける */
    width: 100%; /* 幅いっぱいに広げる */
    background-color: #003060;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    margin: 0;
    box-sizing: border-box;
}
#info .container {
    display: flex;
    flex-wrap: wrap; /* レスポンシブ対応: 狭い画面では縦並び */
    gap: 2rem; /* セクション間のスペース */
    justify-content: space-between;
    align-items: flex-start;
}
#info .container > div {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(50px); /* 初期位置は下 */
    transition: transform 0.5s ease, opacity 0.5s ease; /* アニメーションをスムーズに */
}
/* 初期スタイル */
#info .container > div {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(50px); /* 初期状態で下にずらす */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* アニメーション設定 */
}
#info .contact, #info .about {
    flex: 1; /* 均等幅 */
    max-width: 100%; /* 横幅を調整 */
    padding: 1.5rem;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
}
#info h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
#info form input, #info form button {
    width: calc(100%); /* フォーム幅を調整 */
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #004080;
    border-radius: 4px;
    box-sizing: border-box; /* パディングを含めた幅の計算 */
}
#info .about ul {
    list-style: none; /* 箇条書き記号を削除 */
    padding: 0;
}
#info .about li {
    margin-bottom: 0.5rem; /* 各項目の間隔調整 */
}
#info .about {
    text-align: left; /* 左寄せ */
}
.about-with-map {
    display: flex; /* 横並びに配置 */
    flex-wrap: wrap; /* 必要に応じて折り返し */
    gap: 20px; /* 要素間の余白 */
    width: 100%; /* 親要素の横幅に合わせる */
    background-color: #fff; /* 背景色 */
    border: 1px solid #ddd; /* 枠線 */
    border-radius: 10px; /* 角丸 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影 */
    padding: 7px; /* 内側の余白 */
    box-sizing: border-box;
    margin-top: 20px; /* 上部に余白を追加 */
    margin-bottom: 0; /* フッターとの間の余白をなくす */
    padding-bottom: 120px

}
.about {
    flex: 1; /* フレックスアイテムとして余白を均等に配置 */
    max-width: 400px; /* 会社概要の幅を文字数に応じて調整 */
    min-width: 300px; /* 最小幅を設定 */
    display: flex;
    flex-direction: column; /* 縦方向に要素を配置 */
    justify-content: flex-start; /* 上部揃え */
    box-sizing: border-box;
    padding-left: 20px; /* 左側に余白を追加 */
}
.about ul {
    margin: 0;
    padding: 0;
    list-style: none; /* 箇条書きの記号を削除 */
}

.about ul li {
    margin-bottom: 10px; /* 各行の余白を調整 */
    line-height: 1.6; /* 行間を調整 */
}

.map-container {
    flex: 1; /* 残りのスペースを使用 */
    min-width: 300px; /* 最小幅を設定 */
    height: auto; /* 高さを自動調整 */
    box-sizing: border-box; /* 内側余白を含むサイズ計算 */
    display: flex;
    align-items: stretch; /* 高さを親要素に合わせる */
    border-radius: 10px; /* 角丸 */
    overflow: hidden; /* はみ出しを防ぐ */
    padding: 20px;
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}
.map-container #map {
    flex: 1; /* 高さを親要素に合わせる */
    width: 100%; /* 横幅を100%に設定 */
    height: auto; /* 自動調整 */
}
/* スマートフォン用レスポンシブ設定 */
@media (max-width: 768px) {
    .about-with-map {
        flex-direction: column; /* 縦並びに変更 */
    }

    .about {
        max-width: 100%; /* スマホ画面幅に合わせる */
        flex: none; /* 均等配置を解除 */
    }

    .map-container {
        max-width: 100%; /* 横幅を画面全体に合わせる */
        flex: none;
        height: 400px; /* スマホで適切な高さを固定 */
    }
}
/* スマートフォン対応（幅768px以下） */
@media (max-width: 768px) {
    #info .container {
        flex-direction: column; /* カラムを縦並びに */
        align-items: stretch; /* カラムを親の幅いっぱいに */
    }

    #info .about,
    #info .contact {
        max-width: 100%; /* 横幅を親要素いっぱいに設定 */
    }
    
}
/* レスポンシブ調整 */
@media (max-width: 768px) {
    #hero h2 {
        font-size: 2rem;
    }

    #hero p {
        font-size: 1rem;
    }

    #hero .container {
        padding: 15px;
    }
}
/* スマートフォン対応 */
@media (max-width: 768px) {
    .grid {
        flex-direction: column; /* 縦並びに変更 */
        gap: 1rem; /* ボックス間の間隔を調整 */
        padding: 0 1rem; /* グリッド全体に左右の余白を追加 */
    }

    .service-box {
        max-width: 100%; /* ボックスの幅を親要素に合わせる */
        margin: 0 auto 1rem auto; /* ボックスを中央揃えにし、下に余白を追加 */
        padding: 1rem; /* ボックス内部に余白を追加 */
    }
}