/* Tailwind CDN でカバーしきれない微調整のみ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Meiryo", sans-serif;
}

/* details/summary のデフォルト三角マーカーを消す */
summary::-webkit-details-marker {
  display: none;
}
summary {
  list-style: none;
}

.chevron {
  transform: rotate(0deg);
}

/* ---------- YouTube埋め込み ---------- */

/*
  aspect-ratio で枠の比率を保つ。iframeは枠いっぱいに広げるだけなので、
  どの画面幅でも横にはみ出さない。
*/
.video-frame {
  position: relative;
  width: 100%;
  margin-inline: auto;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #000;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 通常動画（16:9）。横幅いっぱいまで使う */
.video-frame--wide {
  aspect-ratio: 16 / 9;
  max-width: 640px;
}

/*
  ショート動画（9:16）。縦長なので幅を絞らないと画面を占有しすぎる。
  スマホでも縦がはみ出さないよう、高さの上限も設ける。
*/
.video-frame--vertical {
  aspect-ratio: 9 / 16;
  max-width: 300px;
  max-height: 70vh;
}

/* 高さ上限が効いたときに横幅が伸びたままにならないようにする */
@supports (aspect-ratio: 9 / 16) {
  .video-frame--vertical {
    width: min(100%, 300px, calc(70vh * 9 / 16));
  }
}