/* === 共通設定 === */
/*1*/
/* 共通の動画枠設定：16:9比率を維持 */
.responsive-video {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 56.25%;  /* 16:9 = 9/16*100 = 56.25% */
  height: 0;
  overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* PC表示時（画面幅769px以上）：枠（および動画）の幅を60%に */
@media (min-width: 769px) {
  .responsive-video {
    width: 60% !important;
    margin: 0 auto;
  }
}

/* レスポンシブ時（画面幅768px以下）：枠（および動画）の幅を90%に */
@media (max-width: 768px) {
  .responsive-video {
    width: 90% !important;
    margin: 0 auto;
  }
}



/* その他の共通スタイル */
.responsive-img { max-width: 100%; height: auto; }
.box-panel {
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #f9f9f9;
  padding: 20px;
}
.w60-center { width: 60%; margin: 0 auto; }
.w40-center { width: 40%; margin: 0 auto; }

/* 導入事例の箇条書きスタイル */
#case-study ul {
  list-style: disc;
  margin-left: 1.5em;
  padding-left: 1.5em;
  display: block;
}
#case-study ul li {
  display: list-item;
  list-style-position: outside;
}
#case-study ul li::marker {
  display: inline-block;
  width: 1em;
  font-size: 1.5em;
  line-height: 1.2;
}

/* === モバイル用（画面幅768px以下） === */
@media (max-width: 768px) {
  /* ボックスの幅をスマホに合わせる */
  .box-panel,
  .w40-center,
  .w60-center {
    width: 90% !important;
    margin: 0 auto;
  }
  
  /* 無料コンサルご相談パーツを非表示に */
  #consultation-wrapper {
    display: none !important;
  }
  
  /* モーダルの最大横幅をスマホ画面幅に合わせる */
  .modal-content {
    max-width: 90% !important;
  }
  
  /* すべての .text-center 内の画像の max-width を100% に */
  .text-center img {
    max-width: 100% !important;
  }
}