@charset "UTF-8";
/* CSS Document */

div.content {
	max-width: 750px;
    width: 100%;
    margin: 0 auto;
}

/* 全体の枠組み（スマホ時は100%幅） */
div.content-inner {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: bottom;
  background: transparent;
}

picture img {
  display: block; /* 隙間解消の核 */
  width: 100%;
  height: auto;
}

a {
  padding: 0;
  color: #333;
  text-decoration: none;
  border: none;
  display: block;
  margin: 1em 0;
}

a:hover {
  opacity: 0.7;
}

/* ★動画のスタイル（これだけで隙間も比率も解決します） */
.video-wrapper {
  width: 100%;
}

video {
  display: block;
  width: 100%;
  height: auto;
}

/* 横長動画（既存の動画）には16:9を指定 */
.video-wrapper video {
  aspect-ratio: 16 / 9; 
}

.video-wrapper-vertical {
    width: 100%;
    max-width: 360px; /* PCで巨大化するのを防ぐ（スマホの横幅程度に制限） */
    margin: 0 auto;   /* 画面の中央に配置 */
}

.video-wrapper-vertical video {
    width: 100%;
    height: auto;     /* 縦横比を維持（ここが重要！） */
    display: block;
	aspect-ratio: 9 / 16; /* ★縦長の比率で上書き！ */
}

/* ★PCサイズ（1025px以上）の時の設定 */
@media screen and (min-width:1025px) {
  div.content {
    width: 750px; /* PCの時は750px幅に固定 */
  }
}