@charset "utf-8";

/* --------------------------------------
   〜年度別のボタン
-------------------------------------- */
.year-tabs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
	}

.tab-btn {
	display: inline-block;
	padding: 12px 0;
	background-color: #fdf6ed;
	color: #000;
	text-decoration: none;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	border: 1px solid #b39c7d;
	box-sizing: border-box; 
	
	/* =======================================================
	 【パソコン用：右の空きを完全に無くす計算の魔法】
	 4つのボタンの間に「3つのすき間（合計30px）」があります。
	 それを4つのボタンで均等に負担するため、引く数は「7.5px」になります。
	 ======================================================= */
	width: calc(25% - 7.5px); 
	margin-right: 10px;
	margin-bottom: 10px;
	}

/* 4つ目（一番右端）のボタンだけ右マージンを0にすることで、全体の右端とピタッと揃います */
.tab-btn:nth-child(4) {
	margin-right: 0;
	}

/* 今見ているページ・マウスホバー */
.tab-btn.active, .tab-btn:hover {
	background-color: #d98041;
	color: white;
	border-color: #d98041;
	font-weight: 600;
	}

@media screen and (max-width: 640px) {
	.tab-btn {
	/* =======================================================
	   【スマホ用：2列のときに右の空きを無くす計算】
	   2つのボタンの間に「1つのすき間（10px）」があります。
	   それを2つのボタンで均等に負担するため、引く数は「5px」になります。
	   ======================================================= */
	width: calc(50% - 5px);
	margin-right: 10px;
	}
	
	/* スマホの時は、奇数番目（1番目、3番目）だけ右マージンを残し、
	 偶数番目（2番目、4番目）の右マージンを0にして右端にピタッと揃えます */
	.tab-btn:nth-child(odd) {
	margin-right: 10px;
	}
	.tab-btn:nth-child(even) {
	margin-right: 0;
	}
}

/* --------------------------------------
   年度タイトル
-------------------------------------- */

.heading-wrap {
	margin: 0px 0 5px 0;
	}

/* 見出し全体のベース */
h3.section-title {
display: flex;
align-items: center;
margin: 0;
}

/* 丸いバッジ */
.title-badge {
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
border-radius: 50%;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.1em;
text-indent: 0.15em;
line-height: 1;
text-align: center;
color: #fff;
flex-shrink: 0;
background-color: #000;
position: relative;
z-index: 2; /* 線より上に重ねる */
}

/* 右側のテキストと上下の線 */
.title-text {
flex-grow: 1;
border-top: 1px solid #b39c7d;
border-bottom: 1px solid #b39c7d;
margin-left: -20px;        /* 線を丸の内側へめり込ませる */
padding: 15px 0 15px 28px;   /* 上下の空きを小さく・文字が被らないよう左は広めに */
font-size: 20px;
font-weight: 600;
font-family: YakuHanJPs, "CustomSymbolFont", "Lato", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
color: #000;
line-height: 1;
}

/* --------------------------------------
   リストコンテナ
-------------------------------------- */

#back-number-list {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* --------------------------------------
   リストコンテナ
-------------------------------------- */
.book-list-container {
	display: flex;
	flex-direction: column;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	}

/* --------------------------------------
   各カード（行）
-------------------------------------- */
	
.book-card {
	position: relative;
	display: flex;
	align-items: flex-start; /* 全体のベースは上揃え */
	background-color: transparent;
	border-bottom: 1px dashed #b39c7d;
	color: inherit;
	padding: 0; 
	/* ★全面リンク（.base-link）は完全に撤去しました */
	}

.book-card:last-child {
	border-bottom: none;
	margin-bottom: 20px;
	}

.detail-link {
	text-decoration: none;
	color: inherit;
	display: block;
	transition: opacity 0.2s ease;
	}
	/* 写真やタイトルにマウスを乗せた時だけ、少し透明にしてクリックできることを伝えます */
.detail-link:hover {
	opacity: 0.85;
	}

/* サムネイル（本の表紙） */
.book-card-thumbnail {
  flex-shrink: 0;
  width: 110px;
  height: 157px;
  border: solid 0px #e6e6e6;
  overflow: hidden;
  background-color: #e6e6e6;
  box-shadow: 0 1px 7px rgba(0,0,0,0.15);
  margin-left: 2px;
  margin-right: 30px; /* 写真右側の確実な余白 */
  margin-top: 24px;
  margin-bottom: 24px;
}

.book-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストコンテンツエリア */
.book-card-content {
  flex-grow: 1;
  min-width: 0;
  margin-top: 16px;
  margin-bottom: 24px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 発行年月・号ラベル */
.issue-label {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  line-height: 1.2;
  padding: 0 0 5px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #e55c00;
}

/* タイトル（全文字表示） */
.book-card-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: #000;
	margin: 0;
	word-wrap: break-word;
	width: 100%;
	}

.book-card-title .main-title {
	font-size: 24px;
	line-height: 1.4;
	}

/* ボトムエリア（3つのボタンと、右下の矢印ボタンを横並びにする器） */
.book-card-bottom-area {
  display: flex;
  align-items: flex-end; /* 矢印やボタンを下揃えにして右下に綺麗に収める */
  width: 100%;
  padding-top: 8px; /* タイトルとの間の確実な隙間 */
}

/* ボタンを横並びにするためのコンテナ（左側に配置） */
.book-card-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-grow: 1; /* 余った幅をすべて使い、右下の矢印ボタンを右端へ押し出す */
	}

/* ★ボタンの共通基本スタイル（天地センター化の指定） */
.action-button {
  display: inline-flex;     /* ★文字を上下左右中央に配置するためにフレックスに変更 */
  align-items: center;      /* ★文字の上下（天地）中央揃え */
  justify-content: center;  /* ★文字の左右中央揃え */
  height: 26px;             /* ★高さを固定して中央の基準を作ります */
  font-size: 12px;
  font-weight: 400;
  padding: 0 12px;          /* ★上下を0にして、左右の余白だけをコントロール */
  border-radius: 4px;
  text-decoration: none;
  line-height: 1;
  margin-right: 8px;
  margin-bottom: 6px;       /* 折り返した際の隙間 */
  transition: opacity 0.2s ease;
}

.action-button:hover {
	opacity: 0.8 !important; /* 親のhoverを打ち消してボタン独自のhover度合いを維持 */
	}

/* 各ボタンの色（青・金・灰） */
.toc-button {
  color: #e55c00;
  background-color: #fff;
  border: 1px solid #e55c00;
}
.notice-button {
  color: #b45309;
  background-color: #fef3c7;
  border: 1px solid #fde68a;
}
.apology-button {
  color: #4b5563;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
}

/* --------------------------------------
   右端の矢印ボタン（右下配置）
-------------------------------------- */
.book-arrow-button {
  flex-shrink: 0;
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid #e55c00;
  border-radius: 50%;
  background-color: #fff;
  margin-left: 24px;  /* 左側のアクションボタン群との確実な隙間 */
  margin-bottom: 5px; /* アクションボタンのmargin-bottomと高さを揃えるための調整 */
  transition: background-color 0.2s ease; 

}

.book-arrow-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 30%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #e55c00;
  border-right: 2px solid #e55c00;
  transform: translateY(-50%) rotate(45deg);
  transition: border-color 0.2s ease; 
}


/* --------------------------------------
   ★重要：PC（マウス操作環境）だけホバーを有効にする
-------------------------------------- */
@media (hover: hover) {
  /* 写真やタイトルにマウスを乗せた時は全体を少し透明に */
  .detail-link:hover {
    opacity: 0.85;
  }

  /* ボタン群にマウスを乗せた時 */
  .action-button:hover {
    opacity: 0.8;
  }

  /* 矢印ボタンにマウスを乗せた時の色反転 */
  .detail-link:hover .book-arrow-button {
    background-color: #e55c00; 
  }
  .detail-link:hover .book-arrow-button::after {
    border-top-color: #ffffff; 
    border-right-color: #ffffff;
  }
}

/* --------------------------------------
   ★重要：スマホやタブレット（タップ環境）の時だけの調整
-------------------------------------- */
@media (hover: none) {
  /* タップした一瞬だけ全体を少し薄くして反応（フィードバック）を返す設定 */
  .detail-link:active {
    opacity: 0.6;
  }
  .action-button:active {
    opacity: 0.6;
  }
}

/* --------------------------------------
   レスポンシブ表示（画面幅480px以下）
-------------------------------------- */
@media (max-width: 480px) {
  .book-card-thumbnail {
    width: 90px;
    height: 128px;
    margin-left: 1px;
    margin-right: 16px;
    margin-top: 22px;
    margin-bottom: 14px;
  }
  .book-card-content {
    margin-top: 12px;
    margin-bottom: 14px;
  }
  .book-card-bottom-area {
    padding-top: 5px;
  }
  .book-arrow-button {
    width: 28px;
    height: 28px;
    margin-left: 12px;
    margin-bottom: 6px;
  }
  .book-card-title {
    font-size: 16px;
  }
  .book-card-title .main-title {
    font-size: 20px;
  }
  .issue-label {
    font-size: 16px;
    margin-bottom: 6px;
  }
  /* ★スマホ向けのボタンサイズ微調整 */
  .action-button {
    height: 24px;       /* スマホ向けに高さを少しタイトに */
    font-size: 12px;
    padding: 0 10px;
  }
  .book-arrow-button::after {
    width: 6px;
    height: 6px;
  }
}