2. CSS変数とメディアクエリの注意点
   日本語説明CSS ネイティブ変数は、スタイルシート内で変数を定義し、再利用できる便利な機能です。しかし、メディアクエリ内でこれらの変数を直接使用すると、予期しない挙動が発生することがあります。主な問題点変数のスコープ ネイティブ変数のスコープは、通常、その変数が定義されているセレクタまたはスタイルシート全体です。メディアクエリ内の変数は、メディアクエリのスコープに限定されず、スタイルシート全体に影響を与える可能性があります。
3. CSS色変数の不透明度設定
   CSSの色変数に不透明度を適用するには、rgba()関数を使用します。この関数は、赤、緑、青の各チャネルの値と、不透明度（アルファ値）を指定します。基本的な構文解説:root要素 CSS変数を定義するグローバルな要素です。--main-color変数 赤色のカラーコードを格納しています。