/* 施術ページ専用の修正CSS */

/* メインコンテンツがヘッダーに隠れないようにする */
main#main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* ヘッダーの高さに応じた適切なマージン */
@media (min-width: 768px) {
  main#main {
    margin-top: 80px !important; /* md:h-16 = 64px + padding */
  }
}

@media (max-width: 767px) {
  main#main {
    margin-top: 56px !important; /* h-10 = 40px + padding */
  }
}

/* セクションの z-index 整理 */
.section {
  position: relative;
  z-index: 1;
}

/* hero セクションの調整 */
.hero {
  position: relative;
  z-index: 1;
  background-color: var(--off-white);
}

/* info-bar の読みやすさ改善 */
.info-bar {
  position: relative;
  z-index: 2;
}

/* コンテンツセクションの確実な表示 */
.introduction,
.concerns,
.features,
.pricing,
.process,
.results,
.faq,
.cautions,
.cta {
  position: relative;
  z-index: 1;
}

/* コンテナー内のテキストが確実に表示されるように */
.container {
  position: relative;
  z-index: 1;
}

/* ヘッダーのドロップダウンメニューが最前面に */
header .group > div {
  z-index: 100 !important;
}

/* モバイルメニューの表示優先度 */
#mobile-menu {
  position: relative;
  z-index: 90;
}