/* ============================================
  File:         style.css
  Version:      1.0.0
  Last update:  2025-05-29
  Description:  書影ギャラリー用スタイル（モバイルファースト設計）
  Notes:        レスポンシブ対応、BEM風クラス命名、一部ユーティリティ風構成
============================================ */
/*!
 * Project: genkai-shobo.jp
 * Author: genkai-shobo.jp (genkai@genkai-shobo.jp)
 * License: MIT
 *
 * This stylesheet is released under the MIT License.
 * You are free to use, modify, and distribute it as you wish,
 * as long as this notice is retained.
 *
 * (c) genkai-shobo.jp
 */

/*
 ↑ MITライセンスで「自由にどうぞ、でも責任はとりません」って意味
*/


/* ============================================
  全体設定：ベーススタイル（モバイルファースト）
============================================ */

/* ページ全体の背景色・テキスト色・フォント設定など基本装飾 */
body {
  background-color: ivory;
  color: darkolivegreen;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  margin: 0;
  padding: 0.25rem;
  /*
  line-height: 1.6;
    */
}

/* ============================================
  レイアウト：中央寄せ用コンテナ
============================================ */

/* 中央に配置されるカード型のメインラッパー */
.container {
  max-width: 1024px;
  margin: auto;
  background-color: ivory;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

/* モバイル向け：余白最小限にして横幅最大に */
@media screen and (max-width: 480px) {
  .container {
    padding: 0.5rem;         /* 横余白を最小限に */
    width: 100%;             /* 横幅いっぱいに広げる */
    box-sizing: border-box;  /* paddingを含めて幅を100%に収める */
  }
}

/* ============================================
  ヘッダー：ロゴとメニュー
============================================ */

/* ヘッダー全体：左右並び＆縦中央揃え */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: self-end;
  flex-wrap: wrap; /* モバイルで折り返しを許可 */
  color: ivory;
  position: unset;
  /*
  background-color: darkolivegreen;
  padding: 0.8em 1.2em;
  */
}

.site-header a {
  color: ivory;
  text-decoration: none;
}

.site-header a:hover {
  text-decoration: none;
}


/* カード上部に表示するタイトルリンク（強調帯） */
.site-link {
  font-size: 1.5rem;
  font-weight: bolder;
  text-decoration: none;
  flex-grow: 1;   /* 左寄せでスペース取る */
  padding: 0 1.5rem;
  /* container の padding を打ち消す */
  margin: -1.5rem -5.1rem 0rem -1.5rem;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: darkolivegreen;
  display: block;
  /*
  margin: -1.5rem -5rem 0rem -1.5rem; 
  color: ivory;
  padding: 0 1.5rem;
  text-decoration: none;
  background-color: transparent;
  color: ivory;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  */
}

/* PCサイズ以上でfont-size変更 */
@media screen and (min-width: 680px) {
  .site-link {
    font-size: 3rem;            /* ← 大きくする */
  }
}

.lang-switch {
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  /*
  color: ivory;
  padding-left: 1rem;
  */
}

/* 言語切替がないとき */
.no-lang-switch {
  margin: -1.5rem -1.5rem 0rem -1.5rem;
  font-size: 1rem;
}



/* ============================================
  書影ギャラリー（グリッド形式）
============================================ */

/* 書影を並べるグリッド：初期は2列 */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  justify-items: center;
  margin: 1rem 0;
}

/* 各書影カードの外枠 */
.bookcover {
  width: 100%;
}

/* 書影画像そのものの装飾 */
.cover {
  width: 100%;
  height: auto;
  border: 1px solid darkolivegreen;
  object-fit: contain;
}

/* PCサイズ以上では3列に変更＋サイズ調整 */
@media screen and (min-width: 680px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cover {
    max-width: 360px;
  }
}


/* ============================================
  コンテンツのセクションごとのスペーサー
============================================ */
.raw {
  margin-top: 2em;
}

/* ============================================
  タイトル・説明文
============================================ */

/* メインタイトル */
h1 {
  font-size: 3rem;
  font-weight: bolder;
  margin: 1rem 0;
}

/* サブタイトル */
h2 {
  font-size: 2rem;
  font-weight: bold;
}

/* 小見出し */
h5 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* 説明テキストブロック（左に線） */
.description {
  font-size: 1rem;
  margin: 1.2rem 0;
  background-color: ivory;
  padding: 1rem;
  border-left: 4px solid darkolivegreen;
}

/* ============================================
  書誌メタ情報
============================================ */
.book-info-block {
  margin-top: 1em;
}

/* 書誌メタ情報のラッパー */
.book-meta {
  line-height: 1.8;
  margin-top: 1rem;
}

/* 用語定義リスト：定義付き表記に使う */
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 0.5em;
  column-gap: 1em;
  margin: 1em 0;
}

/* ラベル（用語） */
dt {
  font-weight: bold;
  margin: 0;
}

/* 値（定義） */
dd {
  margin: 0;
}

/* 補足情報 */
.meta {
  font-size: 0.95rem;
  margin-top: 1.2rem;
}

.meta p {
  margin: 0.4rem 0;
}

/* ============================================
  ボタン共通スタイル（言語切替以外）
============================================ */

.button,
a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1em;
  border: 1px solid darkolivegreen;
  background-color: ivory;
  color: darkolivegreen;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 0.5em;
  min-height: 2.8em;
  line-height: 1.2;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

/* カレンダーボタン：イベントや日付用 */
.calendar-buttons {
  display: flex;
  flex-wrap: unset;
  gap: 0.5em;
  margin-top: 1em;
  justify-content: flex-start;
}

.calendar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: darkolivegreen;
  color: ivory;
  border: none;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

/* カレンダーボタンの先頭にアイコン */
.calendar-button::before {
  content: "📅";
  margin-right: 0.4em;
}

/* ホバーで色を少し濃く */
.calendar-button:hover {
  background-color: #4b5e2a;
}

/* PC画面向け：カレンダー関連のレスポンシブ */
@media screen and (min-width: 481px) {
  .calendar-buttons {
    flex-direction: row;
    flex-wrap: unset;
    gap: 0.5em;
  }

  .calendar-button {
    width: auto;
    min-width: 120px;
    font-size: 0.85rem;
    padding: 0.4em 0.8em;
  }
}

/* より広い画面でのサイズ調整 */
@media screen and (min-width: 680px) {
  .calendar-buttons {
    gap: 1em;
  }

  .calendar-button {
    min-width: 140px;
  }

  h1 {
    font-size: 2.4rem;
  }
}

/* ============================================
  フッター
============================================ */

/* サイト全体のフッター：背景＆文字色をヘッダーと統一 */
.site-footer {
  display: flex;
  justify-content: right;
  gap: 1.5em;
  margin: 1.5rem -1.5rem -1.5rem -1.5rem;
  padding: 0em 1.5rem 0em 1.5rem;
  background-color: darkolivegreen;
  color: ivory;
  text-align: center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
}

/* フッターリンクの標準スタイル */
.site-footer a {
  color: ivory;
  text-decoration: none;
}

/* フッターリンクのホバーで下線 */
.site-footer a:hover {
  text-decoration: none;
}