html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh; /* ビューポートの高さに合わせて最小高さを設定 */
/* 1. 画像の指定 */
background-image: url('../picture/26873902.jpg'); /* ⚠️ 画像のファイルパスに置き換えてください */
/* 2. 画像の繰り返しを防ぐ */
background-repeat: no-repeat;
/* 3. 画像を画面全体にフィットさせる */
background-size: cover;
/* 4. スクロールしても背景を固定する（オプション） */
background-attachment: fixed;
/* 5. 画像が読み込まれない場合の予備の背景色 */
background-color: #f0f0f0;
}
/* ヘッダー */
header {
/* 以前のCSS */
color: white; /* 文字色 */
padding: 15px 20px; /* 上下の余白と左右の余白 */
display: flex; /* ヘッダー内の要素（h1とnav）をFlexboxで横並びにする */
justify-content: space-between; /* 要素を左右に配置（例: 左にロゴ、右にナビ） */
align-items: center; /* 垂直方向の中央に揃える */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 軽い影 */
/* --- グラデーションのCSS --- */
/* background-color はグラデーションがない場合の代替色として機能します。
グラデーションがある場合は background-image が優先されます。 */
background-color: #1a2b42; /* グラデーション非対応ブラウザ向けの色、またはグラデーションの出発点に近い色 */
/* メインのグラデーション指定 */
background-image: linear-gradient(to left, #0d1a2d 0%, #4169E1 100%);
/* グラデーションが繰り返されないようにする */
background-repeat: no-repeat;
/* 背景サイズを要素全体に合わせる */
background-size: cover; /* または 100% 100% も可 */
/* これ以降に他のCSSプロパティがあれば記述 */
}
/* ナビゲーションリストのスタイル */
header nav ul {
list-style: none; /* リストの点（・）を消す */
padding: 0; /* デフォルトのパディングをなくす */
margin: 0; /* デフォルトのマージンをなくす */
display: flex; /* ★これ１つで要素が横並びになる！★ */
}
/* 各メニュー項目（）のスタイル */
header nav li {
margin-left: 30px; /* 各項目の左側にスペースを作る */
/* あるいは margin: 0 15px; のように左右に均等なスペースを持たせることも */
}
/* 各リンク（）のスタイル */
header nav a {
color: white; /* リンクの文字色 */
text-decoration: none; /* リンクの下線を消す */
font-weight: bold; /* 文字を太くする */
transition: color 0.3s ease; /* ホバー時に滑らかに色が変わる */
}
/* リンクにマウスが乗ったときのスタイル */
header nav a:hover {
color: #00bcd4; /* ホバー時にアクアブルーに変化 */
}
/* コンテナ (サイドバーとメインコンテンツを含む) */
.container {
display: flex;
flex: 1; /* 残りのスペースを埋める */
}
.sidebar,
.nav-sidebar,
.left-menu { /* あなたのHTML/CSSで使われているクラス名に置き換えてください */
display: none; /* 要素を完全に画面から消す */
}
/* メインコンテンツ */
.main-content {
/* flex: 1; は削除されている前提 */
/* ページのコンテンツ幅を制限し、中央寄せにする */
max-width: 900px; /* 全体の最大幅を調整 */
margin: 0 auto; /* ページコンテンツを中央寄せ */
padding: 30px 20px; /* 上下の余白と左右のパディングを追加 */
background-color: transparent; /* メインコンテンツの背景をページ全体に合わせる */
}
/* スライドを内包する親要素（HTMLに合わせて .slideshow-container に変更） */
.slideshow-container {
width: 800px; /* 画像のサイズに合わせて調整 */
height: 450px; /* 画像のサイズに合わせて調整 */
position: relative;
overflow: hidden;
margin: 30px auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* 個々の画像 (スライド) のスタイル */
.slide {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0; /* JavaScriptが activeクラスを付けるまでは非表示 */
transition: opacity 1s ease-in-out; /* フェードアニメーション */
}
/* 現在表示中の画像にのみ適用するスタイル */
.slide.active {
opacity: 1; /* activeクラスが付いている画像だけ表示 */
}
/* 吹き出しのスタイル */
.speech-bubble {
/* 絶対配置にして、スライドショーの上に重ねる */
position: absolute;
/* どの要素よりも手前に表示する (スライドショーのz-indexより大きくする) */
z-index: 100;
/* 配置の調整: 例として右上に配置し、中央に寄せます */
top: 28rem; /* 上から50%の位置 */
left: 16vw; /* 左から50%の位置 */
/* 自身のサイズの半分だけずらして中央に配置 */
transform: translate(-50%, -50%);
/* 吹き出しのサイズ (必要に応じて調整) */
width: 300px;
/* マウスカーソルをデフォルトの矢印にして、吹き出し自体がリンクではないことを示す */
pointer-events: none;
}
/* 吹き出しの中の画像は、コンテナのサイズに合わせる */
.speech-bubble img {
width: 80%;
height: auto;
}
.message-container {
/* 元の薄い黄色の背景を削除し、画像に合わせた黒背景に変更 */
background-color: #000; /* 黒背景 */
color: #fff; /* 文字色を白に変更 */
padding: 30px 40px; /* 内側の余白を少し大きく */
margin-bottom: 20px; /* 下方向の余白 */
border-radius: 10px; /* 角を丸く */
text-align: center; /* テキストを中央寄せ */
/* 下部の光のラインを再現する影 (光沢感のある影) */
box-shadow:
0 0 15px rgba(0, 255, 255, 0.4), /* 薄いシアン系のぼんやりとした光 */
0 0 30px rgba(0, 255, 255, 0.2), /* さらにぼんやりとした広がり */
0 5px 20px rgba(0,0,0,0.5), /* 下方向への通常の影 */
inset 0 -3px 8px rgba(0, 255, 255, 0.7); /* 内側下部への光のライン */
font-size: 1.8em; /* 文字サイズを大きく */
font-weight: bold; /* 太字 */
max-width: 800px; /* メッセージの最大幅（任意） */
margin-left: auto; /* 左右中央寄せ */
margin-right: auto; /* 左右中央寄せ */
position: relative; /* 疑似要素などでさらに装飾する可能性のために */
overflow: hidden; /* タイピングアニメーションに必要 */
}
/* ★★★ タイピングアニメーションの核心部分 ★★★ */
#typing-message {
font-family: 'Arial', sans-serif;
display: inline-block;
border-right-color: transparent !important;
margin: 0;
color: #fff;
}
/* 1. タイピングアニメーションのメイン要素のスタイル */
#typing-message {
/* 👈 元のH2要素のサイズをベースに設定 */
font-size: 2.0rem; /* 全体のベースサイズ（例） */
}
/* 2. 1行目（1番目の子要素）のスタイル */
#typing-message .typing-line:nth-child(1) {
font-size: 1em; /* 👈 ベースの1.2倍に拡大 */
font-weight: bold;
display: block; /* 確実な改行（これは以前のコードから維持） */
}
/* 3. 2行目（2番目の子要素）のスタイル */
#typing-message .typing-line:nth-child(2) {
font-size: 0.4em; /* 👈 ベースの0.8倍に縮小 */
color: #CCC; /* 2行目は少し薄い色にするなど調整可能 */
display: block;
margin-top: 10px; /* 1行目との間隔を空ける */
}
/* セクション全体の装飾と中央寄せ */
.lesson-links-section {
max-width: 900px; /* メインコンテンツと同じ幅に */
margin: 40px auto; /* 上下にスペースを開ける */
padding: 20px;
text-align: center;
background-color: #f0f8ff; /* 薄い水色の背景 */
border: 1px solid #c0e0ff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* セクションの見出し */
.lesson-links-section .section-title {
color: #2c3e50;
font-size: 24px;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 3px solid #6cace4;
}
* ------------------------------------------- */
/* A. カードの共通ベーススタイル */
/* ------------------------------------------- */
.lesson-card {
position: relative; /* card-linkの基準点とする */
width: 250px; /* カードの幅を調整（画像に合わせて） */
height: 160px; /* カードの高さを調整（画像に合わせて） */
border-radius: 8px;
overflow: hidden;
cursor: pointer;
/* ★ヘキサゴン背景画像と青い光の枠線★ */
background-color: #1a2b42; /* 背景画像の読み込み失敗時の代替色 */
background-image: url('./picture/komoku.png'); /* ★ここにヘキサゴン画像のパスを指定★ */
background-size: cover;
background-position: center;
/* 画像の枠線と光るエフェクトを再現 */
border: 3px solid #00FFFF; /* 明るいシアンの枠線 */
box-shadow:
0 0 15px rgba(0, 255, 255, 0.8), /* 枠線から広がる光 */
inset 0 0 10px rgba(0, 255, 255, 0.5); /* 内側への光 */
transition: all 0.2s ease; /* ホバー時のアニメーション */
margin: 10px; /* カード間の余白 */
}
/* ホバー時の光るエフェクト強化 */
.lesson-card:hover {
box-shadow:
0 0 25px rgba(0, 255, 255, 1), /* ホバーでより強く光る */
inset 0 0 15px rgba(0, 255, 255, 0.7);
transform: translateY(-5px); /* 少し上に浮き上がらせる */
}
.card-content-wrapper {
position: absolute; /* ★ヘキサゴン画像の上に重ねる★ */
top: 40px;
left: 0;
width: 100%;
height: 100%;
/* 🔴 これが最も重要！要素をFlexコンテナにする */
display: flex;
/* 左右の並びを設定。デフォルトはrow（横並び）なので省略可能 */
/* flex-direction: column; */
/* 横方向のボタン間のスペースを調整するプロパティ（例） */
/* ボタンを左端から順に並べる */
/* justify-content: flex-start; */
/* ボタンを中央に配置 */
justify-content: center;
/* ボタン間に均等なスペースを開ける */
/* justify-content: space-around; */
/* 縦方向の位置を調整するプロパティ（例） */
/* 縦方向の中央揃え */
align-items: center;
/* ボタン間の間隔を設定（新しいCSS） */
gap: 5px; /* 例として20ピクセルの間隔 */
}
.card-title-link {
/* 🔴 親要素を基準にして位置を自由に決める */
position: absolute;
/* ボタンの真上に来るように位置を調整 */
top: -10px; /* 例：ボタンの上端から30px上に配置 */
left: 50%; /* 親要素の左端から50%の位置 */
/* 中央寄せの微調整 */
transform: translateX(-50%);
/* テキストのスタイル */
font-size: 2em;
width:100%;
font-weight: bold;
color: #ffffff; /* 白など見やすい色に設定 */
/* 背景色を付けても良い */
/* background-color: #333; */
padding: 2px 8px;
border-radius: 5px;
}
/* 下段: ボタン群のコンテナ */
.card-button-links {
/* 横並び Flexbox の設定は維持 */
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
/* ★重要：ボタン群を一番下に固定する★ */
margin-top: auto; /* これがタイトルとの間に大きなスペースを作る */
margin-bottom: 15px; /* 下部からの余白 */
}
/* ボタン画像そのもののスタイル */
.card-button-links .sub-button-img {
/* 画像の幅をカードの幅に応じて調整 */
max-width: 10px; /* ★ここで画像サイズを調整 (例: 120px) ★ */
height: auto;
display: block;
}
.sub-button-img{
width:110px;
height:50px;
}
/* ------------------------------------------- */
/* B. カード内のリンクテキストスタイル (中央寄せ) */
/* ------------------------------------------- */
.card-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex; /* テキストを中央寄せにするため */
justify-content: center;
align-items: center;
color: white;
font-size: 2.2em; /* 文字サイズを大きく */
font-weight: bold;
text-decoration: none;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 1); /* 濃い影をつけて文字を際立たせる */
z-index: 2; /* 背景画像より手前に配置 */
line-height: 1.2; /* 行の高さを調整 */
padding: 10px; /* 文字と枠の間の余白 */
box-sizing: border-box; /* パディングを含めて幅を計算 */
}
/* ------------------------------------------- */
/* C. ゲームカード（まだ食べるゲーム）のスタイル */
/* ------------------------------------------- */
.lesson-card.game-card {
/* 必要であれば、他のカードと異なる背景画像や光の色を設定 */
/* 例: より明るい青のヘキサゴン画像など */
}
/* links-gridの調整（カードを中央に配置し、横に並べる） */
.links-grid {
/* ★ 横に並べるために必須の設定 ★ */
display: flex;
flex-wrap: wrap;
/* 横並びにした要素を中央に配置 */
justify-content: center;
/* 要素間の隙間 */
gap: 20px;
/* ★追加・修正★ 親要素の幅を正しく取るための設定 */
width: 100%;
max-width: 1200px; /* メインコンテンツの幅と合わせる */
/* 上下の余白 */
margin-top: 30px;
margin-bottom: 30px;
}
/* お知らせセクションの調整 */
.info-section {
margin-top: 30px;
padding: 15px;
border-top: 1px dashed #ccc;
text-align: left;
}
/* カードの共通ベーススタイル */
.lesson-card {
position: relative;
/* ★ 幅の調整: 1行に3つ並べるための計算 ★ */
/* 900px (links-gridの最大幅) / 3 = 300px。
gap (20px) を考慮して、少し狭めに設定します。 */
width: 250px;
height: 160px; /* 高さの維持 */
border-radius: 8px;
overflow: hidden;
cursor: pointer;
/* background-imageは削除し、imgタグの設定に置き換えます */
background-color: #1a2b42; /* 画像がない場合の代替色 */
/* 光る枠線は維持 */
border: 3px solid #00FFFF;
box-shadow:
0 0 15px rgba(0, 255, 255, 0.8),
inset 0 0 10px rgba(0, 255, 255, 0.5);
transition: all 0.2s ease;
/* margin: 10px; は links-grid の gap があるため不要ですが、
Flexboxがうまくいかない場合は残して試しても構いません。 */
margin: 0; /* links-gridのgapに任せます */
}
/* ★ 画像を表示し、カード全体に広げるためのCSS ★ */
.lesson-card .card-image {
width: 100%;
height: 100%;
object-fit: cover; /* 画像をコンテナに合わせてトリミング */
display: block;
}
/* ==================== */
/* 8. フッター (bodyの子) */
/* ==================== */
footer {
background-color: #333; /* またはお好みの色 */
color: white;
text-align: center;
padding: 15px 0;
margin-top: 10px; /* 必要に応じて調整 */
font-size: 0.9em;
}
/* レスポンシブ対応 (オプション) */
@media (max-width: 768px) {
.container {
flex-direction: column; /* 画面が狭い場合は縦並びにする */
}
.sidebar {
width: 100%; /* サイドバーも全幅にする */
order: -1; /* サイドバーを上に移動 */
}
}