@charset "UTF-8";

header {
  background: #000000;
  
}
header h1 {
    text-align: center;
    padding: 1rem;
    color: #FFF;
  }
  
  nav ul {
    padding-bottom: 1rem;
    text-align: center;
  }
  
  nav ul li {
    display: inline-block;
    margin: 0 20px;
  }
  
  nav ul li a {
    font-weight: bold;
    color: #ffffff;
  }

section {
  background: #FFF;
}
main {
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
  }

footer {
  background: #ffffff;
}




/* 全体的な設定 (例として、背景色やフォントなど) */
body {
  margin: 0;
  font-family: 'Shippori Mincho B1', 'Playfair Display', serif; /* 優先順位を指定 */
  line-height: 1.6;
  background-color: #0a0a0a; /* 暗めの背景色 */
  color: #f0f0f0; /* 明るめの文字色 */
}

#wrap {
  max-width: 1200px; /* サイト全体の最大幅 */
  margin: 0 auto; /* 中央寄せ */
  background-color: #070707; /* ラップの背景色を少し明るく */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* 影で立体感を出す */
}

/* ヘッダー */
header {
  background-color: #090909;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  position: sticky; /* スクロールしても追従 */
  top: 0;
  z-index: 1000; /* 他の要素より手前に表示 */
}

header h1 {
  margin: 0;
  font-size: 2.5em;
  letter-spacing: 2px;
  letter-spacing: 2px; /* 文字間を2px広げる */
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 15px 0 0 0;
  display: flex;
  justify-content: center;
  gap: 25px; /* メニュー間のスペース */
}

nav ul li a {
  color: #f0f0f0;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  padding: 5px 10px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

nav ul li a:hover {
  color: #ffdfe2; /* アクセントカラー（ゴールド） */
  background-color: rgba(251, 181, 181, 0.223);
  border-radius: 5px;
}

/* メインコンテンツ */
main {
  padding-bottom: 50px; /* フッターとの間隔 */
}

/* ヒーローイメージセクション */
.hero-image {
  height: 80vh; /* 画面の高さの80%を使用 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; /* 繰り返しなし */
  display: flex;
  flex-direction: column; /* 縦並びにする */
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 20px; /* テキストのパディング */
}

.hero-text {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
  padding: 30px 50px;
  border-radius: 10px;
  max-width: 80%; /* テキストブロックの最大幅 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* 影で浮き上がらせる */
}

.hero-text h1 {
  font-size: 3.5em; /* 非常に大きく */
  margin-bottom: 15px;
  letter-spacing: 3px;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8); /* 強い影で視認性向上 */
}

.hero-text p {
  font-size: 1.6em;
  opacity: 0.9; /* 少し透明度を持たせる */
}

/* その他のセクション（例として） */
section {
  padding: 40px 20px;
  margin-bottom: 30px;
  background-color: #000000; /* セクションの背景色 */
  border-radius: 8px;
  text-align: center; /* ← これを追加 */
}

section h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 25px;
  color: #eda3a3; /* アクセントカラー */
  border-bottom: 2px solid rgba(255, 189, 189, 0.5); /* 下線 */
  padding-bottom: 10px;
  display: inline-block; /* 下線の幅を文字に合わせる */
  margin-left: auto;
  margin-right: auto;
}

/* フッター */
footer {
  background-color: #000000;
  color: #000000;
  text-align: center;
  padding: 20px 0;
  font-size: 0.9em;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  header h1 {
      font-size: 2em;
  }
  nav ul {
      flex-direction: column; /* スマートフォンでは縦並び */
      gap: 10px;
  }
  .hero-image {
      height: 60vh; /* 小さめの画面では少し高さを抑える */
  }
  h1 {
    letter-spacing: 2px; /* 文字間を2px広げる */
}
  }
  .hero-text p {
      font-size: 1.1em;
  }
  .hero-text {
      padding: 20px 30px;
  }


@media (max-width: 480px) {
  .hero-text h1 {
      font-size: 1.8em;
  }
  .hero-text p {
      font-size: 1em;
  }
}





/* 全体的な設定 */
body {
  /* 日本語表示も考慮した読みやすいゴシック体 */
  font-family: 'Shippori Mincho B1', 'Playfair Display', serif; /* 優先順位を指定 */
  line-height: 1.6;
  background-color: #0a0a0a;
  color: #f0f0f0;
}

/* ヘッダーのタイトル (光と影) */
header h1 {
  /* 装飾的でエレガントな明朝体 */
  font-family: 'Shippori Mincho B1', 'Playfair Display', serif; /* 優先順位を指定 */
  font-size: 2.5em;
  letter-spacing: 2px;
  margin: 0;
}

/* ヒーローセクションのタイトル */
.hero-text h1 {
  /* ヘッダーのタイトルと同じ、または少し太めにする */
  font-family: 'Shippori Mincho B1', 'Playfair Display', serif; /* 優先順位を指定 */
  font-size: 3.5em;
  letter-spacing: 3px;
  /* text-shadow などはそのまま残す */
}

/* ヒーローセクションのサブテキスト */
.hero-text p {
  /* 本文と同じ読みやすいフォント */
 font-family: 'Shippori Mincho B1', 'Playfair Display', serif; /* 優先順位を指定 */
  font-size: 1.6em;
}

/* ナビゲーション */
nav ul li a {
  /* 本文と同じか少し太めのフォント */
  font-family: 'Shippori Mincho B1', 'Playfair Display', serif; /* 優先順位を指定 */
  font-weight: bold;
  font-size: 1.1em;
}

/* 各セクションの見出し (ギャラリー、光と影について) */
section h2 {
  /* タイトルと同じか、少しシンプルなセリフ体 */
  font-family: 'Shippori Mincho B1', 'Playfair Display', serif; /* 優先順位を指定 */
  font-size: 2em;
  text-align: center;
}