/* ====================================================
   PC/共通スタイル（メディアクエリ外）
==================================================== */

/* ----- 基本機能セクション ----- */
/* ・カード群の上部余白（基本機能セクション全体） */
#chatbot-section .basic-functions-container {
  margin-top: 1em;  /* 1行分の余白（必要に応じて調整） */
}

/* ・カードサイズの縮小（PC表示時） */
#chatbot-section .card {
  /* padding: 15px !important;  既定の20pxから15pxに減らす場合の例 */
  max-width: 270px;    /* カードの最大幅（調整可能） */
  max-height: 300px;
}

/* ----- 画像コンテナとキャプション（システム構成イメージ用） ----- */
.img-container {
  position: relative;
  width: 600px;
  margin: 0 auto;
  text-align: center;
}

.img-container img {
  display: block;
  width: 90%;
}

.caption {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #3fa9ff;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 1em;
  color: #fff;
  font-weight: bold;
}

/* ----- カード画像の効果 ----- */
/* 画像の境界を柔らかく見せる（白いハロー効果） */
.card-image {
  filter: drop-shadow(0 0 5px #fff);
}

/* ----- 導入メリットセクション専用 ----- */
/* merit-wrapper：左右に固定マージンを確保（ページ端に張らないように） */
#merit-section .merit-wrapper {
  margin: 0 50px !important;
}

/* ----- 共通フォント設定（見出し関連） ----- */
/* ページ内の h3, h4 全てに Zen Maru Gothic Bold を適用 */
h3, h4 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: bold;
}

/* 基本機能カードの見出し（circle-card）フォントサイズを調整 */
.circle-card h3 {
  font-size: 1.4em;  /* 必要に応じて調整 */
}


/* ====================================================
   レスポンシブデザイン（画面幅768px以下）
==================================================== */
@media (max-width: 768px) {

  /* (1) 無料コンサルご相談パーツを非表示 */
  #consultation-wrapper {
    display: none !important;
  }

  /* (2) 基本機能セクションの冒頭画像の幅を80%に */
  .center-image {
    width: 80% !important;
  }

  /* (3) モーダルの幅を画面幅90%に、中央寄せ & 固定高さ */
  .modal-content {
    width: 90% !important;
    max-width: 90% !important;
    height: 80vh !important;  /* 高さを固定（例: 80vh） */
    margin: 40px auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }
  
  .modal-content h3 {
    display: block; /* 幅いっぱいに表示 */
    margin: 0 auto 0.5em auto;  /* 上下のマージンは調整 */
    text-align: center;          /* テキスト中央寄せ */
  }

  /* (4) 親コンテナ .functions-block を幅100%に */
  .functions-block {
    width: 100% !important;
    margin: 0 auto;
  }

  /* (5) 基本機能のカード群を1列にする */
  #chatbot-section .basic-functions-container {
    grid-template-columns: 1fr !important;
  }

  /* (6) カードの幅と高さ調整（中央寄せ、固定高さ解除） */
  #chatbot-section .basic-functions-container .card,
  #chatbot-section .basic-functions-container .voc-card,
  .card-voc,
  .voc-card {
    width: 90% !important;
    margin: 0 auto;
    height: auto !important;  /* 固定高さを解除 */
  }

  /* (7) PC用に設定した固定カードサイズを解除し、幅を90%に */
  #chatbot-section .basic-functions-container .card {
    max-width: none !important;
    width: 90% !important;
  }

  /* (8) 画像コンテナとキャプションの調整 */
  .img-container {
    width: 90% !important;
  }
  
  .caption {
    font-size: 0.8em !important;
  }

  /* ----- モーダルのレスポンシブ調整 ----- */
  /* モーダル内部レイアウト：背景画像とテキスト領域を含む */
  .modal-flex {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  /* 背景画像：絶対配置でモーダル全体を覆い、中央配置 */
  .modal-flex img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  /* テキスト領域：上部に配置して余白を詰める */
  .modal-text {
    position: absolute;
    top: 0;  /* 下部から上部に変更 */
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px 20px 20px;  /* 上:10px, 左右・下:20px */
    box-sizing: border-box;
    z-index: 2;
  }

  /* モーダル内の見出し（h3）の中央寄せおよび上部余白の削減 */
  .modal .modal-content .modal-text h3 {
    margin-top: 45px !important;
    text-align: center !important;
  }

  /* クローズボタンを最前面に表示 */
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
  }
}


/* ====================================================
   レスポンシブデザイン（画面幅1024px以上）
==================================================== */
@media (min-width: 1024px) {
  /* カード群を3列に配置 */
  .basic-functions-container {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}