@charset "UTF-8"; /*--[ 水平方向の配置を制御（中央寄せ） ]--*/ /*--[ CSSにおける body は、HTMLドキュメントの要素全体にスタイルを適用するためのセレクタとして使用されます。 ]--*/ body { text-align: center; } /*-- [ Header仕様 ]--*/ header { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700; font-style: normal; color: #0bd; width: 100vw; height: auto; margin: 0 auto; padding-bottom: 0 0; /* paddingを適切に設定 */ } /*--[ 見出し仕様 --*/ h1 { width: 100vw; height: auto; padding: 10px 0; /* 上下余白で高さを調整 */ font-size: 36px; background-color: #b65eab; text-align: center; margin: 0 0; } h2 { background-color: #9cd384; width: 100%; max-width: 100vw; height: auto; font-size: 24px; color: navy; margin: 0 0; } p { background-color: #ffffff; width: 100%; max-width: 100vw; height: auto; padding: 24px 0; /* 上下余白で高さを調整 */ font-size: 24px; color: rgb(2, 2, 33); /*または変更 */ } /*---------------------------------------------------------------------------------*/ /*----[ ナビゲーションメニュー ]-----------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ /* ナビゲーションのコンテナ */ .main-nav { background-color: #333; /* 背景色 */ padding: 10px 0; /* 上下のパディング */ } /* リストのスタイルをリセット */ .main-nav ul { list-style: none; /* リストの黒点を削除 */ margin: 0 0; padding: 0; text-align: center; /* 中央寄せ */ } /* リストアイテムを横並びにする */ .main-nav ul li { display: inline-block; /* インラインブロック要素にして横並びに */ margin: 0 0; /* 左右のマージンで間隔を調整 */ } /* リンクのスタイル */ .main-nav ul li a { color: white; /* 文字色 */ text-decoration: none; /* 下線を削除 */ padding: 10px 15px; /* クリックできる範囲を広げる */ display: block; /* パディングを適用するためにブロック要素に */ transition: background-color 0.3s ease; /* ホバー時のアニメーション */ } /* ホバー時のスタイル */ .main-nav ul li a:hover { background-color: #555; /* ホバー時の背景色 */ border-radius: 5px; /* 角を丸くする */ } /* セクションの基本的なスタイル */ section { padding: 60px 20px; text-align: center; min-height: 400px; border-bottom: 1px solid #eee; } section:nth-of-type(even) { background-color: #f9f9f9; } /*---------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------*/ /*--[ ]--*/ .video-container video { position: static; width: 100vw; height: auto; }