@charset "utf-8";
        .footer {
        background-color: #f8f8f8;
        margin-top: 40px;  /* ページとフッターの余白を統一 */
        padding: 50px 20px 10px 60px; /*余白上、右、下、左*/
        font-family: 'Arial', sans-serif;
        color: #b0adad;
        width: 100%;           /* ← 画面幅いっぱいに広げる */
        border-top: 1px solid #ccc;   /* ← 上に罫線を引く */
        box-sizing: border-box;
        }

        .footer-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1200px;
        margin: auto;
        }

        .footer-logo {
        flex: 1 1 300px;
        background: none; /* 背景色を透明に */
            padding: 0;       /* 余白をリセット */
            margin: 0;
        }

        .footer-logo img {
        max-width: 180px;
        margin-bottom: 10px;
        }
    .company-info p {
      margin: 4px 0;
      font-size: 16px;   /* ← 文字の大きさを変更 */
      color: #333;       /* ← 文字の色を変更 */
    }

        .company-info p:first-child {
      font-size: 20px;   /* ← 一番上の行だけ大きく */
      font-weight: bold; /* ← 太字にする */
      color: #000;       /* ← 濃い色にする */
    }


        .footer-menu {
        flex: 2 1 600px;
        }

    .footer-menu ul {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* ← 等分を厳密に固定 */
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 100%; /* ← max-widthではなく幅を固定 */
    max-width: 1000px; /* 必要に応じて調整 */
    justify-items: center; /* 各セル内の中央寄せ */
    align-items: center;
    row-gap: 25px;
  }

  /* 段違い配置 */
  .footer-menu li:nth-child(1) { grid-column: 1; grid-row: 1; }
  .footer-menu li:nth-child(2) { grid-column: 3; grid-row: 1; }
  .footer-menu li:nth-child(3) { grid-column: 5; grid-row: 1; }
  .footer-menu li:nth-child(4) { grid-column: 7; grid-row: 1; }

  .footer-menu li:nth-child(5) { grid-column: 2; grid-row: 2; }
  .footer-menu li:nth-child(6) { grid-column: 4; grid-row: 2; }
  .footer-menu li:nth-child(7) { grid-column: 6; grid-row: 2; }

  /* 均等幅＆中央揃えを強制 */
  .footer-menu li {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }


    .footer-menu li {
      text-align: center;
    }

        .footer-menu a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
        font-size: 15px;

        }

        .footer-menu a strong
        {
            font-size: 30px;
        }


        .footer-menu a span {
        display: block;
        font-weight: normal;
        font-size: 12px;
        margin-top: 4px;
        }

        .footer-bottom {
        border-top: 1px solid #ccc;
        margin-top: 20px;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        }

        .footer-bottom a {
        text-decoration: none;
        color: #333;
        }

        .footer-logo .company-info {
            background: none; /* 背景色を透明に */
            border: none;     /* 枠線を削除 */
            padding: 0;       /* 余白も削除 */
            margin: 0;        /* 不要なマージンもリセット */
        }


    .submenu a {
      display: flex;
      flex-direction: column; /* 縦並びにする */
      align-items: center;    /* 中央揃え */
      text-decoration: none;
      color: #333;
    }

    /* VALUE 親タイトル */
    .value-title {
      display: block;
      text-align: center;   /* 中央揃え */
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;  /* 下に余白 */
      text-decoration: none;
      color: #333;
    }

    /* VALUE の下に横並びの2つ */
    .value-submenu {
      display: flex;
      justify-content: center;
      gap: 20px;       /* 間隔を調整 */
      flex-wrap: nowrap; /* ← 折り返さず横並びを維持 */
    }

    .value-submenu .submenu-item {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      text-decoration: none;
      white-space: nowrap;     /* 改行させない */
    }

    .value-submenu .submenu-item:hover {
      color: #000;
      text-decoration: underline;
    }
    .footer-top {
      text-align: left;   /* 全体は左寄せ */
      padding-left: 0px;
      position: relative; /* 子要素の位置調整に使う */
      align-items: center;   /* 縦の中央配置を維持 */
      padding-right: 70px;


    }

    .footer-logo {
      display: flex;
      flex-direction: column;
      align-items: center;   /* ロゴと会社名を中央揃え */
      margin: 0 auto;        /* 横方向で中央寄せ */
      width: fit-content;    /* コンテンツ幅に縮める */
      transform: translateX(-100px); /* 左に40pxスライド */

    }

    .footer-logo-img {
      width: 60px;
      height: auto;
      margin-bottom: 8px;
    }

    .company-name {
      font-size: 1.2rem;
      font-weight: bold;
      color: #333;
    }

    .company-info {
      margin-top: 15px;
      text-align: left; /* 住所は左寄せのまま */
    }

    /* VALUE の li だけ縦並びにする */
  .value-footer {
    display: flex;
    flex-direction: column; /* ← 縦方向に並べる */
    align-items: center;    /* 中央揃え */
  }

  /* VALUE の下に横並びの2つ */
  .value-submenu-footer {
    display: flex;  
    justify-content: center; /* 中央揃え */
    gap: 20px;               /* 2つの間隔 */
    margin-top: 6px;         /* VALUEとの余白 */
  }

  .value-submenu-footer .submenu-item {
    font-size: 13px;
    font-weight: normal;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
  }

  .value-submenu-footer .submenu-item:hover {
    color: #000;
    text-decoration: underline;
  }

    /* ===== スマホ用レイアウト（幅600px以下） ===== */
  @media (max-width: 600px) {
    .footer {
    padding: 40px 20px 10px 20px; /* 左右を揃える */
  }
    .footer-logo {
    transform: none !important;
    margin: 0 auto;
    text-align: center;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

     .footer-top {
    padding: 0 !important;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }



    /* 画像そのものも中央 */
    .footer-logo img {
  margin: 0 auto 10px;
}

   
  .footer-menu ul {
    display: flex !important;
    flex-direction: column;
    align-items: center;       /* 各項目を横中央に */
    justify-content: center;   /* リスト全体を縦中央に */
    gap: 12px;
    padding: 0;
    margin: 20px 0 0;
    width: 100%;
  }

  /* ────────────
     各 li とリンクを幅100%＆中央寄せ
     ──────────── */
  .footer-menu li {
    width: 100%;
    margin: 0;
  }

  .footer-menu a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
  }

 /* リンク自体をブロック化して中央テキスト */
  .footer-menu {
    /* flex: 2 1 600px を打ち消し */
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}