/* ============================================================
   新ヘッダー適用に伴うレイアウト調整(TOPページ専用)

   旧ヘッダーは透明オーバーレイ(#header { position: absolute })で
   ヒーロー(#mv)の上に重ねる設計でしたが、新ヘッダーは白背景・固定表示の
   バーになるため、ヒーローが隠れないよう分だけ下にずらします。

   このページの構造上、2段階の対応が必要でした:

   1. #mv に position: relative を追加
      → 中の .mvinner(position:absolute; top:0;)が、指定しないと
        ページ全体を基準にしてしまい、#mv の margin-top が
        画像に反映されなかったため。

   2. #mv .mvinner の height も #mv に合わせて縮める
      → .mvinner 自体は height:100vh 固定だったため、そのままだと
        ヘッダー分だけ下にはみ出し、その中の bottom:0 で配置されている
        .mvnavwrapper(アイリアSDK/Embedded AI/DX Insightのバー)が
        画面外に押し出されてしまっていたため。
   ============================================================ */

/* ごく僅かな横あふれによる横スクロールを封じる定番の書き方。
   position: fixed のヘッダーや sticky なサブナビには影響しない。
   body だけでなく html にも指定し、実機のSafariなどでも確実に効かせる。 */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}

/* .contentspic(会社概要・製品ラインナップなどの装飾画像)が
   right:2% 等の%指定でごくわずかに画面からはみ出すため、
   親要素側で確実にクリップする */
.mainbody .contentsinner {
  overflow-x: hidden;
}

#mv {
  position: relative;
  margin-top: 60px;
  height: calc(100vh - 60px);
  overflow: hidden;
}
#mv .mvinner {
  height: calc(100vh - 60px);
  overflow: hidden;
}

@media (max-width: 767px) {
  #mv {
    margin-top: 48px;
    height: auto;
    overflow: visible;
  }
  #mv .mvinner {
    height: auto;
    overflow: visible;
  }
}