@charset "utf-8";

body {
  overflow: hidden;
  display: flex;
  justify-content: center; /* 横方向中央 */
  align-items: center; /* 縦方向中央 */
  height: 100vh; /* ビューポートの高さに合わせる */
  margin: 0; /* デフォルトのマージンをリセット */
  background-color: #f0f0f0; /* 背景色 */
}

.container {
  width: 80%; /* 幅を80%に設定 */
  max-width: 600px; /* 最大幅を600pxに設定 */
  padding: 50px;
  background-color: #fff; /* コンテナの背景色 */
  border: 1px solid #ccc; /* 枠線 */
  border-radius: 8px; /* 角を丸く */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 影をつける */
}

/** ロゴ部分 */
#logo {
  position: fixed; /* 固定位置 */
  top: 10px; /* 上からの距離 */
  left: 10px; /* 左からの距離 */
  z-index: 1000; /* レイヤーを一番上に */
  /* width: 60px; */

  #logo_img {
    width: 10vw; /* ビューポート幅に応じて幅を指定 */
    height: auto; /* 高さは自動調整 */
    max-width: 200px; /* 最大幅を設定して、これ以上大きくならないように */
  }
}

/** エロ動画部分 */
#ero {
  padding: auto;
  margin: auto;
  text-align: center;
  max-width: 100%; /* 幅を100%に設定して、親要素に合わせる */
}

#ero_img {
  border-radius: 5px;
  max-width: 60%; /* 幅を60%に設定 */
  max-height: 60%; /* 高さを自動調整 */
}

#ero_title {
  font-size: clamp(1.5rem, 5vw, 3rem); /* 最小1.5rem、最大3rem、ビューポート幅に応じて調整 */
  text-align: center; /* 中央揃え */
  padding: 10px; /* パディングを追加して余白を作る */
}

/* スマホ用メディアクエリ */
@media (max-width: 600px) {

  .container {
    padding: 20px; /* スマホ向けのパディング調整 */
  }
  
  #ero_title {
    font-size: 8vw; /* スマホではさらに大きくする */
  }

  #ero_img {
    max-width: 100%; /* スマホでは幅を100%に */
  }

  .details {
    padding: 0.25em; /* スマホ向けのパディング調整 */
  }
}