/* Tailwindの基本スタイルを読み込むディレクティブ（Tailwind CLIを使用する場合に必要） */
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */

/* 日本語フォントと英語フォントの指定 */
body {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  color: #1F1F1F;
}

/* 各セクションの背景色をデフォルトでイエローに設定。
 個別にbg-whiteなどが指定されている場合はそちらが優先されます。 */
body > main > section {
  background-color: #FFEB3B;
}

/* 見出し用のカスタムフォントスタイル */
.section-title {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-align: center;
}

/* スムーズスクロールの実装 */
html {
  scroll-behavior: smooth;
}

/* テキストの影 */
.text-shadow {
   text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
}

/* antialiased: フォントのアンチエイリアスを適用 */
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* ヒーロービデオのスタイリング */
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 縦横比を維持しつつ、要素全体をカバーします。
                     スマートフォンのような縦長の画面では、動画の左右が見切れることがありますが、これは画面全体を動画で埋めるための意図的な動作です。*/
z-index: -1;      /* ヘッダーやコンテンツの背景になるように設定 */
}