/* ===============================================
   ヘッダーとフッターの新しいスタイル（ここから追加）
   =============================================== */

/* ◆ ヘッダー全体（上の帯） */
header {
    background-color: #5a4a42; /* 背景色を物語のh1と同じ茶色に */
    padding: 10px 40px;        /* 上下の余白10px、左右の余白40px */
    display: flex;             /* ロゴとメニューを横並びにする魔法 */
    justify-content: space-between; /* 両端に配置する魔法 */
    align-items: center;       /* 上下中央にそろえる魔法 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.header-logo {
    height: 40px; /* ロゴの高さを調整 */
    width: auto;
}

/* ◆ ナビゲーションメニューの基本設定 */
nav ul.bmenu {
    margin: 0;
    padding: 0;
    list-style: none; /* リストの黒丸を消す */
}

nav ul.bmenu > li {
    display: inline-block; /* メニュー項目を横並びに */
    position: relative;    /* ドロップダウンの基準位置にする */
    margin-left: 10px;
}

nav ul.bmenu a {
    display: block;
    padding: 10px 15px;
    color: #fdfaf6; /* 文字色をクリーム色に */
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s; /* ホバー時の変化を滑らかに */
}

nav ul.bmenu > li > a:hover {
    background-color: #7a6a62; /* マウスを乗せた時の色 */
    border-radius: 4px;
}

/* ◆ ドロップダウンメニューの設定 */
nav ul.bmenu ul {
    display: none; /* 通常は隠しておく */
    position: absolute; /* 親(li)を基準に浮かせる */
    top: 100%;
    left: 0;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    padding: 5px 0;
    list-style: none;
    min-width: 180px; /* ドロップダウンの幅 */
    z-index: 1000; /* 他の要素より手前に表示 */
}

nav ul.bmenu li:hover > ul {
    display: block; /* 親メニューにマウスを乗せたら表示 */
}

nav ul.bmenu ul a {
    color: #333333; /* ドロップダウン内の文字色 */
    white-space: nowrap; /* 文字を改行させない */
}
nav ul.bmenu ul a:hover {
    background-color: #f0eeeb; /* ドロップダウン内のホバー色 */
}
/* 全体の基本的な設定 */
body {
    background-color: #fdfaf6; /* 背景をすこしクリーム色に */
    color: #333333; /* 文字の色を濃い灰色に */
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; /* 読みやすいフォントに */
    line-height: 1.8; /* 行間を広げて読みやすく */
    margin: 0;
    padding: 20px;
}

/* 物語全体を囲むコンテナ */
.story-container {
    max-width: 800px; /* 横幅が広くなりすぎないように */
    margin: 0 auto; /* 画面の中央に配置 */
    background-color: #ffffff; /* 物語の部分の背景を白に */
    padding: 40px;
    border-radius: 8px; /* 角を少し丸くする */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* ふんわりした影をつける */
}

/* 物語の大きな見出し */
h1 {
    color: #5a4a42; /* 見出しの色を茶色っぽく */
    text-align: center;
    border-bottom: 2px solid #e0ddd9; /* 下線を引く */
    padding-bottom: 10px;
    margin-bottom: 5px;
}

/* サブタイトル */
.subtitle {
    text-align: center;
    color: #888888;
    margin-top: 0;
}

/* 各章の見出し */
h2 {
    color: #8c786d;
    border-left: 5px solid #c9b7ae; /* 左側にアクセントの線を引く */
    padding-left: 15px;
}

/* 段落の文字 */
p {
    text-indent: 1em; /* 段落の先頭を１文字下げる */
}

/* 画像の設定 */
img {
    max-width: 100%; /* 画像がコンテナからはみ出さないように */
    height: auto;
    display: block; /* 画像をブロック要素にして中央揃えしやすくする */
    margin: 30px auto; /* 画像の上下に余白をとり、中央に配置 */
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* ◆ フッター全体（下の帯） */
footer {
    background-color: #5a4a42; /* ヘッダーと同じ色で統一 */
    color: #fdfaf6;
    padding: 20px 40px;
    text-align: center;
    border-top: 5px solid #c9b7ae; /* 上部にアクセントの線 */
}

footer #footermoji,
footer form {
    display: inline-block; /* 横並びにする */
    vertical-align: middle; /* 上下中央揃え */
    margin: 0 20px;
}

footer a {
    color: #ffffff;
    font-weight: bold;
}

/* ◆ フッターの検索フォーム */
footer input[type="text"] {
    border: 1px solid #c9b7ae;
    border-radius: 4px;
    padding: 5px;
}
footer input[type="submit"] {
    background-color: #8c786d;
    border: none;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}
footer input[type="submit"]:hover {
    background-color: #7a6a62;
}

/* ===============================================
   微小貝劇場のナビゲーションタブ
   =============================================== */
.theater-nav {
    margin: 30px 0; /* 上下の余白 */
    text-align: center; /* 中央揃え */
}

.theater-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex; /* flexboxで横並び */
    border-radius: 8px;
    overflow: hidden; /* 角丸の外側を隠す */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.theater-nav li {
    margin: 0;
}

.theater-nav a {
    display: block;
    padding: 10px 25px;
    text-decoration: none;
    color: #5a4a42; /* 文字色を茶色に */
    background-color: #f0eeeb; /* 背景を薄いグレーに */
    font-size: 14px;
    transition: background-color 0.3s;
    border-right: 1px solid #e0ddd9; /* 右側に区切り線 */
}

.theater-nav li:last-child a {
    border-right: none; /* 最後のタブの区切り線は消す */
}

.theater-nav a:hover {
    background-color: #e0ddd9; /* マウスを乗せた時の色 */
}

/* ◆◆◆ 現在地を示す「アクティブ」なタブのスタイル ◆◆◆ */
.theater-nav a.active {
    background-color: #8c786d; /* 背景を濃い茶色に */
    color: #ffffff; /* 文字色を白に */
    font-weight: bold;
}
/* ===============================================
   画像に影を付けるための専用クラス
   =============================================== */
.shadow-image {
    box-shadow: 10px 5px 5px gray; /* ← ここにお好みの影のスタイルを入れる */
}
.box-shadow3{
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgb(0 200 0 / 30%),
    0 0 0 2px white,
      0.3em 0.3em 1em rgb(128 128 128 / 60%);
}      
/* ===============================================
   トップページのお知らせコーナー
   =============================================== */

/* 全体を囲むエリア（Flexboxで横並びにする） */
.announcement-area {
  display: flex; /* 横並びにする魔法 */
  justify-content: center; /* 全体を中央揃え */
  align-items: center;     /* 上下の中央をそろえる魔法 */
  margin: 20px 0;
  padding: 10px;
  gap: 15px; /* フキダシと画像の間のすき間 */
}

/* ガイドさんの画像エリア */
.guide-character {
  text-align: center;
}
.guide-character img {
  margin: 0; /* 画像の上下余白をリセット */
}
.guide-character p {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  text-indent: 0; /* 段落の字下げをリセット */
}

/* フキダシ本体のスタイル */
.speech-bubble {
  position: relative;
  background-color: #eaf2ff; /* フキダシの背景色（水色系） */
  padding: 15px 20px;
  border-radius: 10px;
  border: 2px solid #a9c5e8; /* フキダシの枠線 */
  max-width: 400px; /* 横幅が広くなりすぎないように */
}

/* フキダシの中の文字 */
.speech-bubble p {
  margin: 0;
  padding: 0;
  color: #334e68; /* 文字色を少し濃い青に */
  font-size: 15px;
  line-height: 1.6;
  text-indent: 0; /* 段落の字下げをリセット */
}

/* フキダシのしっぽを作る魔法 */
.speech-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%; /* フキダシの右側にくっつける */
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left-color: #a9c5e8; /* 枠線の色と同じ */
}
.speech-bubble::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: #eaf2ff; /* 背景色と同じ */
  margin-left: -2px; /* 位置を微調整 */
  z-index: 1; /* しっぽの本体 */
}