/* style.css - ページの初期表示後、遅延して読み込む共通スタイル */

/* --- Bodyの装飾 (背景画像) --- */
/* ▼▼▼ このブロックを追加（または確認） ▼▼▼ */
body {
  background-image: url('/images/background-texture.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}
/* ▲▲▲ ここまで ▲▲▲ */

/* --- ホバーエフェクト --- */
.header-style-1 nav ul li a:hover,
.footer-style-1 nav ul li a:hover {
  color: #007bff;
}

/* --- フッター --- */
.footer-style-1 {
  background-color: #851530;
  color: white;
  padding: 30px 0;
  font-size: 0.9em;
}

.footer-style-1 .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-style-1 p {
  margin: 0;
}

.footer-style-1 nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.footer-style-1 nav ul li {
  margin-left: 20px;
}

.footer-style-1 nav ul li a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}



/* --- 署名用のスタイル --- */
/* 注: 記事ページなど、特定のコンテンツでのみ使われる場合は、「コンテンツごとのCSS」に移すこともできます */
.author-signature {
  text-align: right; /* 右寄せにする */
  margin-top: 4em;   /* 本文との間に十分な余白を設ける */
  font-family: "HGS教科書体","Yu Mincho", "Hiragino Mincho ProN", serif; /* 少し雰囲気のある明朝体系フォント */
  font-size: 1.2em;
  font-weight: bold; /* 太字にする */
  font-style: italic; /* 少し斜体にする */
}


/* style.css - ページの初期表示後、遅延して読み込む共通スタイル */
































/* --- ここまではPC用のスタイルを記述 --- */
.profile-card {
  max-width: 600px;
  /* ...その他のPC用スタイル... */
}


/* --- ハンバーガーメニュー関連 --- */

/* デフォルト (PC) ではハンバーガーボタンを隠す */
.hamburger-button {
  display: none;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1000; /* メニューより手前に */
}

/* ハンバーガーアイコンの線 (3本線を作る例) */
.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  width: 25px;
  height: 3px;
  background-color: white; /* ボタンの色 */
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
}
.hamburger-icon::before {
  top: -8px; /* 上の線 */
}
.hamburger-icon::after {
  top: 8px;  /* 下の線 */
}

/* ▼▼▼ スマホ表示用のメディアクエリ ▼▼▼ */
@media (max-width: 768px) {

  /* ヘッダーコンテナの配置調整 */
  .header-container {
    position: relative; /* ナビゲーションの位置基準 */

    display: flex; /* Flexboxを有効化 */
    justify-content: space-between; /* 子要素間のスペースを最大化 */
    align-items: center; /* 子要素を垂直方向中央に */
  }

  /* ハンバーガーボタンを表示 */
  .hamburger-button {
    display: block;
    /* ▼▼▼ これを追加 ▼▼▼ */
    margin-left: auto; /* ★ ボタンを右端に寄せる ★ */
    /* ▲▲▲ ここまで ▲▲▲ */
    /* 他の .hamburger-button スタイル (background, border など) */
  }

  /* ナビゲーションラッパーの初期状態 (隠す) */
  .navigation-wrapper {
    display: none; /* 最初は隠す */
    position: absolute; /* ヘッダーの下に重ねる */
    top: 100%; /* ヘッダーのすぐ下 */
    left: 0;
    width: 100%;
    background-color: #851530; /* ヘッダーと同じ背景色 */
    padding: 20px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    /* ★★★ 以下の order プロパティを追加 ★★★ */
     order: 1; /* ボタンが先頭に来るようにナビゲーションの順序を後にする */
  }

  /* ナビゲーションメニューを縦積みに */
  .main-navigation ul {
    flex-direction: column;
    align-items: center;
  }
  .main-navigation ul li {
    margin: 10px 0;
  }

  /* --- 開いた状態のスタイル --- */
  /* JavaScriptで .is-active クラスが付いたら表示 */
  .navigation-wrapper.is-active {
    display: block;
  }

  /* (オプション) 開いた時にボタンを「×」にする */
  .hamburger-button[aria-expanded="true"] .hamburger-icon {
    background-color: transparent; /* 真ん中の線を消す */
  }
  .hamburger-button[aria-expanded="true"] .hamburger-icon::before {
    transform: translateY(8px) rotate(45deg); /* 上の線を回転 */
  }
  .hamburger-button[aria-expanded="true"] .hamburger-icon::after {
    transform: translateY(-8px) rotate(-45deg); /* 下の線を回転 */
  }

  /* (検索ボックスがある場合) */
   .header-search {
       /* ★★★ 以下の order プロパティを追加 ★★★ */
       order: 2; /* 検索ボックスが一番右に来るようにする */
   }

  /* (オプション) スマホでは検索ボックスを非表示にする場合 */
  /*
  .header-search {
    display: none;
  }
  */
}