/* styles.css */


    /*共通スタイル*/
    html {
      scroll-behavior: smooth; /* スムーススクロールを有効化 */
      scroll-padding-top: 80px; /* 固定ヘッダーの高さ分の余白 */
    }


    /* 基本のスタイル */
    body {
        margin: 0;
        font-family: 'Roboto', 'Noto Sans JP', sans-serif;
        background-color: #FDFBF1; /* ページ全体の背景色を指定 */
        font-weight: 300;
        font-size: 62.5%;

    }

    .h1 {
        font-family: "Vollkorn", 'Shippori Mincho B1', serif; /* 基本フォントを指定 */
        font-weight: 800;
        font-size: 3rem;
}
    .h2 {
        font-family: "Vollkorn", 'Shippori Mincho B1', serif; /* 基本フォントを指定 */
        font-weight: 400;
        font-size:2rem;
}

    .p {
        font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    }


    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(224, 231, 231, 0.6); /* 背景色を半透明に設定 */
        backdrop-filter: blur(30px); /* 背景をぼかす */
            -webkit-backdrop-filter: blur(30px); /* Safari対応 */
        padding: 5px 30px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        box-sizing: border-box;
        font-family: 'Roboto', 'Noto Sans JP', sans-serif;
        font-size: 0.9rem;
    }

    .navigation ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .navigation li {
        margin: 0 15px;
    }

    .navigation a {
        text-decoration: none;
        color: #333;
        font-weight: 300; /* フォントの太さを細く設定 */
        position: relative;
    }

    /* 現在のページに下線 */
    .navigation a.active::after {
        background: linear-gradient(to left, cadetblue, #18e218); /* 下線の色 */
        height: 1px; /* 下線の高さ */
        width: 100%; /* 要素の幅 */
        left: 0; /* 要素の左端からの距離 */
        transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形 */
    } 


    .navigation a:hover {
        color:cadetblue;
    }

    /* アニメーション下線のスタイル */
    .navigation a::after { 
        background: linear-gradient(to left, cadetblue, #18e218); /* 下線の色 */
        bottom: -5px; /* 要素の下端からの距離 */
        content:''; /* 要素に内容を追加 */
        height: 1px; /* 下線の高さ */
        width: 100%; /* 要素の幅 */
        left: 0; /* 要素の左端からの距離 */
        position: absolute; /* 絶対位置指定 */
        transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
        transform-origin: center top; /* 変形の原点を中央上に指定 */
        transition: transform .3s; /* 変形をアニメーション化 */
    }
    /* リンクにホバーした際の下線の表示 */
    .navigation a:hover::after {
      transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
    }


    /* ハンバーガーアイコン（モバイル表示時のみ） */
    .hamburger-icon {
        display: none; /* デフォルトでは非表示 */
        flex-direction: column;
        justify-content: space-between; /* 各バーの間隔を調整 */
        cursor: pointer;
        width: 30px; /* アイコンの幅 */
        height: 18px; /* アイコンの高さ（3つのバーの高さ） */
    }

    .hamburger-icon span {
        width: 100%; /* 各バーの幅を親に合わせる */
        height: 2px; /* バーの高さ */
        background-color: #333;
        transition: all 0.3s ease; /* アニメーションの設定 */
    }

    /* メニュー（デフォルトでは表示しない） */
    .navigation {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute; /* メニューの位置をabsoluteに変更 */
        top: 88%; /* 初期位置で隠れている状態 */
        left: 0;
        right: 0;
        text-align: left;
        padding: 20px 20px;
        z-index: 2000;  /* 他の要素より上に表示 */  
        visibility: hidden; /* 非表示の状態でも領域を占める */
        opacity: 0; /* 完全に透明にして表示しない */
        transition: top 0.5s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out; /* アニメーションの設定 */
    }

    /* メニューが表示された時のスタイル */
    .navigation.active {
        top: 49px; /* スライド後に正しい位置に設定 */
        visibility: visible; /* 表示 */
        opacity: 1; /* 不透明にする */
        background-color: rgba(224, 231, 231, 1); /* 背景色を不透明に設定 */
        box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.2); /* 右下方向にぼやけた影 */
        box-sizing: border-box; /* パディングやボーダーを含めて幅を調整 */
    }

    /* メニューアイテム */
    .navigation.active ul {
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    .navigation.active li {
        margin: 10px 0;
    }

    /* ハンバーガーアイコンをモバイルで表示する */
    @media (max-width: 768px) {        
        .hamburger-icon {
            display: flex; /* モバイル表示時に表示 */
        }

        .navigation {
            display: block; /* ハンバーガーアイコンをクリックした時に表示 */
        }

        header {
            background-color: rgba(224, 231, 231, 1); /* 背景色を不透明に設定 */
            backdrop-filter: none; /* 背景をぼかしなし */
            padding: 10px 24px; /* ヘッダーの余白を詰める*/  
        }

        /* ハンバーガーアイコンがアクティブな状態 */
        .hamburger-icon.active span:nth-child(1) {
            transform: rotate(45deg) translate(4px, 7px); /* 上のバーを回転 */
        }

        .hamburger-icon.active span:nth-child(2) {
            opacity: 0; /* 中央のバーを非表示 */
        }

        .hamburger-icon.active span:nth-child(3) {
            transform: rotate(-45deg) translate(4px, -7px); /* 下のバーを回転 */
        }
    }

    /* デスクトップ表示時（通常のメニュー） */
    @media (min-width: 769px) {
        .hamburger-icon {
            display: none; /* デスクトップでは非表示 */
        }

       .navigation {
            display: flex; /* ナビゲーションメニューは横並び */
            position: static; /* 固定位置ではなく、通常の位置に戻す */
            top: auto; /* topプロパティを解除 */
            visibility: visible; /* デスクトップでは常に表示 */
            opacity: 1; /* 完全に表示 */
        }
    }


/* ヒーローセクション */
    .hero {
        position: relative;           /* 子要素を絶対配置するための相対位置 */
        margin-top: 70px;
        height: 90vh;                 /* ビューポートの高さに合わせる */
        width: 100%;                  /* 要素の幅を画面幅に合わせる */
        display: flex;                /* フレックスボックスで子要素を配置 */
        justify-content: center;      /* 水平方向に中央揃え */
        align-items: flex-end;        /* 垂直方向に下揃え */
        text-align: left;             /* テキストを左揃え */
        color: white;                 /* テキストの色を白に */
        overflow: hidden; /* 背景がはみ出さないように */
    }

    .hero-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      object-fit: cover;
      z-index: -1;
      transform: scale(1.05) translateY(0);
      opacity: 0;
      will-change: transform, opacity;
      transition: transform 0.3s ease-out;
    }

   /* ヒーロー画像（toppage以外）  */
    .hero-image-low-saturate {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;                   /* 背景として最背面に */
        filter: saturate(80%) brightness(90%);
    }

    /* ページロード時のフェードイン＋ズーム効果 */
    .hero-image.loaded {
      animation: heroFadeZoom 2s ease-out forwards;
    }

    /* フェードイン＋ズーム */
    @keyframes heroFadeZoom {
      0% {
        opacity: 0;
        transform: scale(1);
      }
      100% {
        opacity: 1;
        transform: scale(1.05);
      }
    }

    /* スマホ用 */
    @media (max-width: 768px) {
      .hero-image {
        height: 100%;
        transform: scale(1.02);
      }
    }


    /* ヒーローコンテナー */
    .hero-container {
        display: flex;
        padding: 24px;
    }

    /* ヒーローコンテンツのスタイル */
    .hero-content {
        width: 700px;                   /* コンテナーの幅を画面の半分に設定 */
        position: absolute;           /* 絶対配置 */
        top: 20%;                      /* 上から20%の位置（中央） */
        left: 30px  ;                       /* 左端に配置 */
        transform: translateY(-50%);   /* コンテナーを垂直方向に中央揃え */
        z-index: 1;                   /* テキストを画像の上に表示 */
        background-color: rgba(249, 252, 250, 0.13); /* 半透明の背景色 */
        padding: 30px;                 /* コンテンツ内の余白 */
        border-radius: 30px;           /* 角を丸くする */
        text-align: left;              /* テキストを左寄せにする */
        backdrop-filter: blur(10px);    /* 背景をぼかす */
            -webkit-backdrop-filter: blur(30px); /* Safari対応 */
        transform: translateY(30px);
        animation: fadeInMove 1.5s ease-out forwards;
}

    /* ヒーローコンテンツの中央揃えスタイル */
    .hero-content-centre {
        width: 600px;                   /* コンテナーの幅を画面の半分に設定 */
        position: absolute;             /* 親要素に対して絶対配置 */
        top: 50%;                       /* 親要素の高さの50%の位置 */
        left: 50%;                      /* 親要素の幅の50%の位置 */
        transform: translate(-50%, -50%); /* 親要素の中央に正確に配置 */
        z-index: 1;                     /* コンテナーを前面に */ 
        padding: 24px;
        background-color: rgba(195, 198, 196, 0.26); /* 半透明の背景色 */
        border-radius: 20px;            /* 角を丸くする */
        box-sizing: border-box;         /* パディング込みで幅を計算 */
        backdrop-filter: blur(30px);    /* 背景をぼかす */
            -webkit-backdrop-filter: blur(30px); /* Safari対応 */
        text-align: center;
    }


    /* ヒーローセクションの見出し */
    .hero h1 {
        margin: 0;
        font-size: 3.7rem;
        letter-spacing: -0.02em;
        line-height:1.4;
        font-family: "Vollkorn", 'Shippori Mincho B1', serif; /* 基本フォントを指定 */
        font-weight: 500;
    }

    /* ヒーローセクションの段落 */
    .hero p {
        font-size: 1.8rem;
        font-family: 'Shippori Mincho B1', serif; /* 基本フォントを指定 */
        font-weight: 500;
        line-height:1.5;
    }

    /* ヒーローセクションのh2 */
    .hero h2 {
        margin: 0;
        font-size: 1rem;
        letter-spacing: -0.02em;
        line-height:2;
        font-family: 'Roboto', 'Noto Sans JP' , sans-serif; /* 基本フォントを指定 */
        font-weight: 200;
        font-weight: 200;
    }


    /* CTAボタンのスタイル */
    .cta-button {
        display: inline-block;
        margin-top: 30px;
        padding: 10px 20px;
        /* background-color: #333; */
        color: white;
        text-decoration: none;
        border-radius: 30px;
        font-family: 'Roboto','Noto Sans JP', sans-serif; /* ボタンのフォントを指定 */
        /* font-weight: bold; */
        border: 1px solid #E0E7E7;
        font-size: 1.0rem;
        transition: all 0.5s ease;
    }

    .cta-button:hover {
        background: linear-gradient(to left, cadetblue, #18e218); /* グラデーション */   
    }


/* === フェードインアニメーション === */
    @keyframes fadeInMove {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* === スマホ対応 === */
@media (max-width: 768px) {
    /* パララックス効果をOFF（固定表示） */
    .hero-image {
        transform: translateY(0) !important;
        height: 100%;
    }
}

    /* サービスメニュー */

    .services {
        width: 100%; /* 要素の幅を画面幅に合わせる */
        box-sizing: border-box; /* 親要素の幅の計算にパディングを含める */
}

    .services-title {
        width: 768px;
    } 

    .container-normal-container-maxwidth .services-title h1 {
        font-family: "Vollkorn", 'Shippori Mincho B1', serif; /* 基本フォントを指定 */
        font-weight: 800;
        text-align: left;
        font-size: 2.7rem;
        letter-spacing: -0.08em;
        line-height:1.5;
        margin: 0;
    /*    transform: scale(1, 1); */ フォント幅の変更
        }

    .services h2 {
        text-align: left;
        font-size: 1.3rem;
        font-family: 'Roboto', 'Noto Sans JP', 'sans-serif';
        font-weight: 700;
    }
    .services-container {
    /*    height: 40vh; /* ビューポートの高さに合わせる */
        width: 100%;
        display: grid;
        flex-wrap: wrap;　/* 画面幅が小さい場合は折り返す */
        justify-content: space-evenly;
        gap: 30px;
        /* 幅に応じてカラム数を自動調整 */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        transition: box-shadow 0.3s ease-in-out;  /* 影がスムーズに変化するように */
        box-sizing: border-box;  /* ボックスサイズをボーダーとパディングを含めた幅にする */ 
        }

    .services-container :hover {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* 右下方向にぼやけた影 */
/*        transform: scale(1.05);*/
   }

    .services-menu {
        position: relative;
        overflow: hidden;
        height: 450px;
        width: 100%;
    /*    margin: 0px 20px 20px 0px; */
        padding: 0px;
        border-radius: 20px;
        box-sizing: border-box; /* ボックスの幅にパディングを含める */
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* 文字エリアを下に配置 */
    }

    /* 画像を背景のように全体に配置 */
    .services-menu-image,
    .services-menu-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* 背景と同じように拡大表示 */
        z-index: 0;
        transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1), 
                    filter 1.5s ease;
    }

    /* ホバー時：枠は変わらず画像のみ拡大 */
    .services-menu:hover .services-menu-image img {
        transform: scale(1.1);
        filter: brightness(0.9);
    }


    .services-menu a{
        position: absolute;
        top: 0;
        left: 0;
        height:100%;
        width: 100%;
        z-index: 1; /* 画像の上に配置 */
    }

    .services-menu .text-area {
        position: relative;
        bottom: 0;
        width: auto;
        height: 40%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(15px);
        display: flex-start;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px 20px;
        text-align: left;
        color: white;
        vertical-align: top;
        z-index: 1; /* 画像の上に配置 */

    }

    .services-menu h2 {
        pointer-events: none; /* 子要素でのマウスイベントを無効にする */
        text-align: left;
        font-family: 'Vollkorn';
        font-weight: 600;
        font-size: 5rem;
        color: white;
        margin: 0;
        padding: 0; 
        position: absolute;
        top: 20px;
        left: 20px;
    }

    .services-menu .text-area h3 {
        pointer-events: none; /* 子要素でのマウスイベントを無効にする */
        font-size: 1.8rem;
        font-weight: bold;
        text-align: left;
        margin-top: 15px;
    }

    .services-menu .text-area p {
        pointer-events: none; /* 子要素でのマウスイベントを無効にする */
        font-weight:300;
        font-size: 1rem;
    }


     /* 通常のタイトルセクション */
    .container-normal {
        background-color: #FDFBF1;
        color: #333;
        overflow: hidden;
        padding: 0; 
        text-align: center; /* 見出しなどの中央揃え用 */
    }

    /* 16/9固定の画像のスタイル */
    .image-ratio169 {
        margin: 40px 0px;           /*上下のマージンを指定*/
        left: 0;                      /* 左端に配置 */
        width: 100%;                  /* 幅を100%に設定 */
        height: auto;
        aspect-ratio: 16/9;          /* 縦横比を固定 */
        object-fit: cover;            /* 画像が枠に収まるように調整 */
        border-radius: 20px;    /* 角を丸くする */
    }

    /* 通常のコンテナー */
    .container-normal-container {
        display: block;
        padding: 50px 100px;
        max-width: 1000px;
        margin: 0 auto; /* 中央揃えのポイント！ */
    /*    max-width: 50%; /* 幅の最大値を設定 */
    }

    /* 通常のコンテナーの見出し */

    .container-normal-title {
        margin: 0;
        text-align: center;
        font-family: 'Vollkorn', 'Shippori Mincho B1', serif;
    }

    .container-normal h1 {
        padding: 40px 0 20px;
        margin: 0;
        text-align: center;
        font-family: 'Vollkorn', 'Shippori Mincho B1', serif;
        font-size: 2rem;
    }

    .container-normal h2 {
        padding: 20px 0;
        margin: 0;
        text-align: left;
        font-family: 'Vollkorn', 'Shippori Mincho B1', serif;
        font-size: 1.7rem;

    }

    .container-normal h3 {
        margin: 20px 0;
        text-align: left;
        font-family: 'Vollkorn', 'Shippori Mincho B1', serif;
        font-size: 1.4rem;

    }


    /* 通常のコンテナーのテキスト */
    .container-normal p {
        margin: 0;
        text-align: left;
        font-size: 1rem;
        font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    }

    /* リスト */
    .container-normal ul {
        font-size: 1rem;
        font-family: 'Roboto', 'Noto Sans JP', sans-serif;
        text-align: left;
    }

    /* 通常のセクション 2段*/
    .container-normal-2 {
        width: 100%; /* 要素の幅を画面幅に合わせる */
        display: flex;
        justify-content: center;
        align-items: flex-start;
        text-align: center;
    }

   .container-normal-2 h1 {
        padding: 10px 0;
        margin: 0;
        text-align: center;
        font-family: 'Vollkorn', 'Shippori Mincho B1', serif;
        font-size: 2.8rem;
        letter-spacing: -0.07em;
    }

    .container-normal-2 h2 {
        padding: 10px 0;
        margin: 0;
        text-align: left;
        font-family: 'Vollkorn', 'Shippori Mincho B1', serif;
        font-size: 1.7rem;

    }

    .container-normal-2 h3 {
        padding: 10px 0;
        margin: 0;
        text-align: left;
        font-family: 'Vollkorn', 'Shippori Mincho B1', serif;
        font-size: 1.4rem;

    }


    /* 通常のコンテナーのテキスト */
    .container-normal-2 p {
        text-align: left;
        font-size: 1rem;
        font-family: 'Roboto', 'Noto Sans JP', sans-serif;
        margin: 0;
}

    /* リスト */
    .container-normal-2 ul {
        font-size: 1rem;
        font-family: 'Roboto', 'Noto Sans JP', sans-serif;
        text-align: left;
    }



    /* 通常のコンテナーワイド */
    .container-normal-container-maxwidth {
        padding: 30px; 
        max-width: 100%;
    }



    /* 緑のセクション 2段*/
    .container-green {
        background-color: #344634;
    /*    height: 80vh; /* ビューポートの高さに合わせる */
        width: 100%; /* 要素の幅を画面幅に合わせる */
        display: flex;
        justify-content: center;
        align-items: flex-start;
    /*    -webkit-justify-content: flex-start; */
        text-align: center;
        color: white;
        font-family: 'Roboto', 'Noto Sans JP' , sans-serif; /* 基本フォントを指定 */
        font-weight:300;
    }

    /* 緑のコンテナー */
    .container-green-container {
        padding: 50px; 
    }

    /* 緑のコンテナー　中央寄せ */
    .container-green-container-center {
        text-align: center;
        padding: 50px;
        width: 70%;
    }

    /* 緑のコンテナーの見出し */
    .container-green h1 {
        margin: 0;
        font-size: 2em;
        font-family: 'Vollkorn', 'Shippori Mincho B1',  serif; 
    }
    .container-green h2 {
        font-family: 'Vollkorn', 'Shippori Mincho B1',  serif; 
    }

    /* 緑のコンテナーのテキスト */
    .container-green p {
        font-size: 1rem;
        text-align: left;    
    }

    /* 分割のコンテナー*/
    .divide-container {
        display: flex;
/*        height: 100vh; /* 画面全体の高さ */
        padding-top: 20px;
        background-color: #ccedcc;
        border-radius: 20px;
        padding: 20px;
        margin-top: 20px;
    }

    /* 左側のコンテンツ */
    .left {
        flex: 1;
        padding: 20px;
    }

    /* 右側のコンテンツ */
    .right {
        text-align: left;
        flex: 1;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: top; /* 垂直方向に中央揃え */
        align-items: center; /* 水平方向に中央揃え */
        flex-basis:30%;
        padding:20px 20px 0 50px;
        }

    /* コンテナー全面の画像のスタイル */
    .container-image {
        width: 100%;           /* 画像の幅を画面の100%に設定 */
        max-width: 500px;      /* 最大幅を500pxに制限 */
        height: auto;          /* 高さは自動調整 */
        border-radius: 20px;   /* 角を丸くする */
        margin-top: 0px;       /* 画像上の余白 */
    }


    /* 問い合わせフォーム */
    .contact {
        max-width: 800px;
        margin: 0 auto;
        padding: 50px;
        border-radius: 20px;
        background-color: #FDFBF1;
        color: #333;
        font-family: 'Roboto', 'Noto Sans JP' , sans-serif;
        font-size: 1rem;

    }

    .contact h1{
        text-align: left;
        font-family: 'Vollkorn', 'Shippori Mincho B1',  serif; 
    }
    .contact p {
        text-align: left;
    }

    .contact form {
        display: flex;
        flex-direction: column;
    }

    .form-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 10px;
    }

    .contact label {
        flex: 1;
        margin-right: 15px;
        text-align: right;
    }

    .contact input, textarea {
        flex: 2;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 16px;
        border-radius: 20px;
    }

    .contact textarea {
        resize: vertical;
    }

    .contact button {
        width: 100px;
        background-color: #18e218;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 20px;
        cursor: pointer;
        align-items: center;
        font-size: 1rem;
    }

    .contact button:hover {
        background: linear-gradient(to left, cadetblue, #18e218); /* グラデーション */
    }

    .g-recaptcha {
        margin-top: 10px;
        margin-bottom: 20px;
    }


    /* 横線 */
    .thin-line {
        border: none;
        border-top: 1px solid #d3d3d3; /* 薄い灰色の細い線 */
        margin: 20px 0; /* 上下の余白 */
    }

    /* リスト全体のスタイル */
    .simple-list {
        font-family: 'Roboto', 'Noto Sans JP' , sans-serif;
        list-style-type: disc; /* 項目の前にディスク型の箇条書き */
        margin: 0px; /* リストの外側の余白なし */
        padding-left: 0px; /* リストアイテムの左側に余白なし */
    }

    .simple-list ul {
        margin: 0;
        padding: 0;
        font-family: 'Vollkorn', 'Shippori Mincho B1',  serif; 
        list-style-type: none;
        margin-left: 0;        /* インデント */

    }

    /* リストアイテムのカスタムスタイル */
    .simple-list li {
        line-height: 1.5em; /* 行間 */
        text-align: left;
        padding: 0 0 0.8em;
        list-style-type: none;
    }

    .simple-list ul ul {
        list-style-type: circle;  /* 子リストは丸い点 */
        margin-left: 1em;        /* インデント */
        padding: 0;
        font-family: 'Roboto', 'Noto Sans JP' , sans-serif;
        list-style-type: disc;
        margin-left: 0;        /* インデント */

        }

    .simple-list h3 {  
        margin: 0;
    }


    /* 企業情報、マップのスタイル */
    .company-location {
        position: relative;            /* 親コンテナにrelativeを指定 */
        height: 80vh;                  /* 高さをビューポートの80%に設定 */
        width: 100%;                   /* 幅を100%に設定 */
        background-color: #f4f4f4;     /* 背景色 */
        margin-top: 60px;
    }

    .map-container {
        position: absolute;            /* 地図は絶対配置 */
        top: 0;                         /* 上端に配置 */
        left: 0;                        /* 左端に配置 */
        width: 100%;                    /* 地図の幅を100%に設定 */
        height: 100%;                   /* 地図の高さを100%に設定 */
        z-index: 1;                     /* 地図を最背面に配置 */
    }

    .company-info {
        position: absolute;            /* 会社情報は絶対配置 */
        top: 10%;                       /* 上端から10%の位置に配置（余白を取る） */
        right: 20px;                    /* 右端から20pxのマージンを追加 */
        width: 400px;                   /* 会社情報の幅を400pxに設定 */
        padding: 24px;
        background-color: rgba(255, 255, 255, 0.8); /* 半透明の背景色 */
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影を追加して目立たせる */
        z-index: 2;                     /* 会社情報は地図の上に表示 */
        transform: translateY(0);       /* 垂直方向の変形をリセット */
    }

    .company-info h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        font-family: 'Vollkorn', 'Shippori Mincho B1',  serif;
    }

    .company-info p {
        font-size: 1rem;
        margin-bottom: 10px;
        font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    }

    .cta-button-black {
        display: inline-block;
        margin-top: 30px;
        padding: 10px 20px;
        /* background-color: #333; */
        color: #333;
        text-decoration: none;
        border-radius: 30px;
        font-family: 'Roboto', 'Noto Sans JP', sans-serif; /* ボタンのフォントを指定 */
        /* font-weight: bold; */
        border: 1px solid #344634;
        font-size: 1rem;
    }

    .cta-button-black:hover {
        background: linear-gradient(to left, cadetblue, #18e218); /* グラデーション */
        color: white;
        border: 1px solid #344634;
    }
/* レスポンシブ対応 */
    @media (max-width: 768px) {
        
        .hero {
            height: 90vh; /* ビューポートの高さに合わせる */
            margin-top: 25px; /*ヘッダーの高さに合わせる　*/

        }
        .hero-container {
            display:flex;
            justify-content: column;
            align-items: center;
            width: 100%; 
        }

       .hero-content {
            width: 79%;                /* 小さい画面では幅を82%に変更 */
            /*top: 10%;                   /* 上から10%の位置に変更 */
            left: 0;                    /* 左端に配置 */
            /*transform: translateY(0);   /* 垂直方向の中央揃えを解除 */
            padding: 20px;              /* 少し余白を減らす */
            margin:24px;
        }

        .hero-content-centre {
            width: 90%;                /* 小さい画面では幅を90%に変更 */
            top: 30%;                   /* 上から30%の位置に変更 */
            left: 05%;                  /* 左端を調整し中央に配置 */
            transform: translateY(0);   /* 垂直方向の中央揃えを解除 */
            padding: 10px;              /* 少し余白を減らす */
        }
        
        .hero h1 {
            font-size: 3rem;
        }

        .hero p {
            font-size: 1.4rem;
        }

        .services-title {
            width: 100%;    
        }
        
        .services .services-title h1 {
            font-size: 2rem;
        }
        


        .services-container{
            flex-direction: column;
            align-items: center;
            font-size; 2em;
            width: 100%;
/*            padding: 30px 20px 0px;*/

        }

        .services-menu .text-area h3{
            font-size: 1.5rem;
        }        
        .services-menu .text-area p{
            font-size: 0.9rem;
        }
        
        .services-menu {
            width: 100%;
        }

        .z-group {
            flex-direction: column;
        }
        
        .container-normal h1 {
            font-size: 2rem;
        }

        .container-normal h2 {
            font-size: 1.5rem;
        }

        .container-normal p {
           font-size: 0.9rem;           
        }
        
        .container-normal-2 h1 {
        font-size: 2rem;
        }

       .container-normal-2 h2 {
           font-size: 1.5rem;
        }

       .container-normal-2 p {
           font-size: 0.9rem;
        }

        /* 問い合わせの調整*/
        .contact {
        padding: 24px;
        margin: 50px 0 auto;
        max-width: 100%;
        }
        .form-group {
            flex-direction: column; /* 縦並びに変更 */
            align-items: flex-start; /* 左寄せ */
        }

        .contact label {
            margin-right: 0; /* 横並び時の余白を削除 */
            margin-bottom: 8px; /* ラベルと入力フィールドの間に少し余白を追加 */
            text-align: left; /* ラベルを左寄せ */
        }

        .contact input, .contact textarea {
            width: 100%; /* 入力フィールドの幅を100%に */
            margin-bottom: 10px; /* 入力フィールド間のスペースを確保 */
        }

        .contact button {
            width: 100%; /* ボタンの幅を100%に */
            margin-top: 20px; /* ボタンとフォームの間にスペースを追加 */
        }
                        
        .container-green-container-center {
            width: 90%;
            padding: 20px;

        }
        

        /* 通常のコンテナー */
        .container-normal-container {
            padding: 24px; 
            max-width: 100%;
        }
        
        /* 通常のコンテナーワイド */
        .container-normal-container-maxwidth {
            padding: 15px; 
            max-width: 100%;
            text-align: left;
        }
        
        /* リスト */
        .container-normal-2 ul {
            font-size: 0.9rem;
        }

        /* 通常のコンテナーの見出し */
        .container-normal-title {
            text-align: left;
        }
        
        /* 通常のコンテナーのリスト */
        .container-normal ul {
            font-size: 0.9rem;
        }
        
        .services h1 {
        font-size: 1.5em;            
        }
        .container-green h1 {
            font-size: 1.5em;
        }
    
        /* 横に並べる　*/
        .divide-container {
            flex-direction: column;
            padding: 0; 
        }
        
        /* 右側のコンテンツ */
        .right {
        flex-basis:100%;
        padding:20px 20px 0 20px;
        }

                
        /* 地図の高さ調整 */
        .map-container {
            height: 80vh; /* モバイル表示時は地図の高さを少し小さく */
        }

        /* 会社情報の位置調整 */
        .company-info {
            position: relative;          /* 絶対配置を解除 */
            top: auto;                    /* 上位置を解除 */
            right: auto;                  /* 右位置を解除 */
            width: auto;                  /* 幅を100%に変更 */
            padding: 24px;                /* パディングを調整 */
            background-color: rgba(255, 255, 255, 1); /* 完全に不透明に */
            box-shadow: none;             /* シャドウを取り除く */
            border-radius: 0;             /* 角丸を取り除く */
        }

        /* 見出しの文字サイズ */
        .company-info h2 {
            font-size: 1.5rem; /* モバイルでは少し小さく */
            margin-bottom: 15px;
        }

        /* テキストのフォントサイズ */
        .company-info p {
            font-size: 0.9rem; /* フォントサイズを小さく */
            margin-bottom: 8px;
        }

        /* ボタンの調整 */
        .cta-button {
            padding: 8px 15px;  /* モバイル用にボタンのサイズを調整 */
            font-size: 0.9rem;   /* ボタンの文字サイズを少し小さく */
            border-radius: 25px; /* ボタンの角を少し丸く */
        }        
        .cta-button-black {
            padding: 8px 15px;  /* モバイル用にボタンのサイズを調整 */
            font-size: 0.9rem;   /* ボタンの文字サイズを少し小さく */
            border-radius: 25px; /* ボタンの角を少し丸く */
        }
        

        /*　フッターの縦並び */
        
         .footer-navigation ul {
            flex-direction: column; /* アイテムを縦並びに変更 */
            align-items: left; /* 中央揃え */
            margin: 0 auto;

        }

        .footer-navigation li {
            margin: 10px 0; /* アイテムの上下マージンを調整 */
            padding-left: 0; /* 左の余白を削除 */
            padding-top: 5px; /* 上下に少し余白を追加 */
            padding-bottom: 5px; /* 上下に少し余白を追加 */
            border-bottom: 0.5px solid white; /* 縦並び時にアイテム間に横線 */
            text-align: left;
        }

        /* 最後のアイテムには線を入れない */
        .footer-navigation li:last-child {
            border-bottom: none;
        }
        
    }
        

    /* フッターのスタイル */
    footer {
        background-color: #33483c; /* 深緑色 */
        color: white;
        padding: 20px 0;
        text-align: center;
        position: relative;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        font-family: 'Roboto', 'Noto Sans JP' , sans-serif;
        font-weight: 100; /* フォントを細く設定 */
        font-size: 0.9rem; /* フォントサイズを14pxに設定 */
    }

    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;

    }

    .footer-navigation ul {
        list-style: none;
        padding: 0;
        margin: 10px 0 0;
        display: flex;
        justify-content: center;
    }

    .footer-navigation li {
        margin: 0 15px;
    }

    .footer-navigation a {
        text-decoration: none;
        color: white;
        font-family: inherit; /* 親要素の font-weight を継承 */
        font-weight: inherit; /* 親要素の font-weight を継承 */
    }

    .footer-navigation a:hover {
        text-decoration: underline;
    }