@charset "UTF-8";
/* CSS Document */
/* 戦国武将 家紋図鑑 六十六選 */
/**/
/**/

/* 全体コンテナの制限 */
.kamon-gallery {
  max-width: 750px;
  margin: 0 auto; /* 親ページの中でセンターに寄せる */
  font-family: "Hiragino Mincho ProN", "BIZ UDPMincho", serif;
  color: #333;
}

.section-title {
  text-align: center;
  border-bottom: 2px solid #d2b48c;
  padding-bottom: 10px;
  margin-bottom: 30px;
  font-size: 23px!important;
  font-family: "Hiragino Mincho ProN", "BIZ UDPMincho", serif!important;
}

/* グリッドの調整：750px幅に合わせて2列〜3列が綺麗です */
/* グリッドの調整：最小幅を下げて3列を許容する */
.kamon-grid {
  display: grid;
  /* 220px から 180px 前後に変更 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px; /* 隙間も少し詰めるとより余裕が生まれます */
  padding: 10px 5px;
}

/* --- kamon-card のデフォルト状態 --- */
.kamon-card {
  background: #fffaf0; 
  border: 1px solid #d2b48c;
  padding: 25px 20px 20px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 浮き上がりと不透明度の両方に効くように1つに統合 */
  transition: all 0.3s ease; 
}

/* --- kamon-card のマウスホバー時 --- */
.kamon-card:hover {
  transform: translateY(-5px);
  /* ホバー時に「白」へ、枠線を「濃い茶色」へ */
  background: #ffffff;
  border-color: #8b4513; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 画像のセンター配置 */
.kamon-img {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.kamon-img img {
  display: block;
  /* ここでサイズを指定します */
  width: 150px;       /* 横幅を150pxに固定 */
  height: 150px;      /* 縦幅を150pxに固定 */
  object-fit: contain; /* 画像の比率を保ったまま枠内に収める（歪みを防ぐ） */
  
  border-radius: 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  max-width: 100%;     /* スマホなどで枠が150px以下の時に突き抜けないように */
}

/* テキスト周り */
.busho-name {
  font-size: 1.3rem;
  margin: 10px 0 0 0;
  line-height: 1.4;
}

.busho-name .ruby {
  display: block;
  font-size: 0.9rem;
  font-weight: normal;
  color: #666;
  margin-top: 5px;
}

.kamon-name {
  font-weight: bold;
  color: #8b4513; /* Sienna系 */
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.kamon-name .kamon-ruby {
  font-size: 0.9rem;
  font-weight: normal;
  color: #555;
  display: inline-block;
  margin-top: 3px;
}

.description {
  font-size: 0.85rem;
  text-align: left;
  line-height: 1.6;
}

.kamon-nav {
  max-width: 750px;
  margin: 20px auto 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px double #d2b48c;
  font-family: serif;
  font-weight: 700;
}

.nav-group {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
}

.nav-group:last-child { margin-bottom: 0; }

.nav-label {
  width: 80px;
  font-size: 0.85rem;
  font-weight: bold;
  color: #8b4513;
  padding-top: 5px;
  border-right: 1px solid #d2b48c;
  margin-right: 15px;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.nav-links a {
  display: inline-block;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #d2b48c;
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.nav-links a:hover {
  background: #8b4513;
  color: #fff;
  border-color: #8b4513;
}

/* 「〇行」というリンク（hrefが #kana- で始まるもの）のスタイル */
.nav-links a[href^="#kana-"] {
    background: #f5f5f0; /* 適切な薄いグレー（お好みで #eee などに） */
    font-weight: bold;    /* 「行」なので少し太くすると視認性が上がります */
    border-color: #c0c0c0; /* 枠線も少しだけ濃くして区別 */
}

/* ホバー時の挙動（既存のhover設定を維持、あるいは微調整） */
.nav-links a[href^="#kana-"]:hover {
    background: #8b4513;
    color: #fff;
}

/* 似顔絵の注釈 */
.kamon-portrait-note {
  max-width: 750px;
  margin: 5px auto;   /* ページ中央に配置 */
  padding: 0 10px;     /* 左右の余白 */
  font-size: 0.85rem;   /* 少し小さめに */
  color: #333;         /* 目立ちすぎないグレー */
  text-align: right;   /* 右寄せ（図鑑のキャプションのルールに合わせる） */
  font-family: serif;  /* 全体と統一 */
  font-style: italic;  /* 少し斜体にして注釈らしさを出す（お好みで） */
}

/* もしカードの中にも注釈をつけたい場合の工夫 */
.portrait-img::after {
  content: "Illustration"; /* 英語で小さく入れるとお洒落です */
  display: block;
  font-size: 0.6rem;
  color: #aaa;
  margin-top: 2px;
}

/* 似顔絵のスタイル */
.portrait-img {
  margin: 0 0 10px 0;
  padding: 0;
  width: 100%;
}

.portrait-img img {
  width: 120px; /* カード内で少し小さめに表示 */
  height: auto;
  border-radius: 50%; /* 円形に見せると家紋との対比が美しいです */
  border: 2px solid #d2b48c;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* カード全体の余白微調整 */
.kamon-card {
  padding-top: 25px; /* 上部に少し余裕を持たせる */
}

/* リセットナビ全体の調整 */
.reset-nav {
  margin-top: 15px;
  border-top: 1px dashed #ccc;
  padding-top: 10px;
  text-align: center;
}

/* リセットボタンの装飾 */
.btn-reset {
  display: inline-block;
  padding: 5px 15px;
  background-color: #f0f0f0; /* 薄いグレー */
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333 !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9em;
  transition: all 0.3s ease;
}

/* --- リセットボタンのホバー時 --- */
.btn-reset:hover {
  /* エンジ系の背景にする場合の設定 */
  background-color: #8b4513; 
  border-color: #8b4513;
  color: #ffffff !important; /* 黒文字で見えなくなるのを防ぐ */
}

/* 現在選択中のフィルター（JSでclassList.add('active')する場合） */
.kamon-nav .nav-links a.active {
  background-color: #555;
  color: #fff !important;
  border-radius: 3px;
}

/* スマホ対応：ラベルを上にする */
@media (max-width: 480px) {
  .nav-group { flex-direction: column; }
  .nav-label { 
    border-right: none; 
    border-bottom: 1px solid #d2b48c; 
    margin-bottom: 8px;
    width: 100%;
  }
}