/* ===== 全体 ===== */
body {
  margin: 0;
  background-color: #f5f1e8; /* 薄いベージュ */
  background-image: url('back.jpg');
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-position: center; /* 中央に配置 */
  background-size: cover; /* 領域に合わせてカバー（トリミングあり） */
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* ←これ重要 */
  /* background-size: contain; 領域に合わせて全体表示（余白あり） */
  font-family: "DotGothic16", monospace;
  color: #222;
}


img {
  max-width: 100%;
  height: auto;
}


.main-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 34px;
  margin-top:-20px;
  letter-spacing: 0.15em;
  text-shadow: 
    0 2px 0 rgba(0,0,0,0.08);
}

.section-title {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.18em;
  position: relative;
  display: inline-block;
  margin-bottom: 36px;
}

/* 下ライン */
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 140px;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,0.25),
    transparent
  );
}


.card:hover {
  animation: popon 0.28s ease;
}



.gallery-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}

/* ===== タイトル ===== */
.gallery-title {
  font-size: 28px;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}

.gallery-intro {
  font-size: 14px;
  color: #383838;
  margin-bottom: 50px;
}

/* ===== セクション ===== */
.gallery-section {
  margin-bottom: 70px;
}

.section-title {
  font-size: 18px;
  letter-spacing: 0.2em;
  margin-bottom: 30px;
}

/* ===== グリッド ===== */


.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 30px;
}

/* ===== カード本体 ===== */
.leader-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 16px 20px;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ポコン感（控えめ） */
.leader-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.12);
}

/* ===== アイコン ===== */
.leader-card img {
  width: 700px;
  height: auto;
  margin-bottom: 12px;
}

/* ===== 名前・補足 ===== */
.leader-name {
  font-size: 14px;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.leader-meta {
  font-size: 11px;
  color: #666;
}



.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px;
  min-width: 300px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease;
}

.modal.is-open {
  display: flex;
}


/* ===== 文字が浮かび上がる ===== */

.imghover {
	width:			100px;
	height:			5px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.imghover .caption {
	font-size:		130%;
	color:			#fff;
	padding-top:		80px;
	padding-left:		0px;
}
.imghover .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.imghover:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-left:		90px;	/* 右にずらす */
}


@keyframes popon {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-6px) scale(1.03); }
  70%  { transform: translateY(-2px) scale(0.99); }
  100% { transform: translateY(-4px) scale(1); }
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}




/* ===== ホバー画像ラップ ===== */
.hover-card{
  position:relative;
  display:inline-block;
  overflow:hidden;
  border-radius:16px;
}

/* 画像 */
.hover-card img{
  display:block;
  width:100%;
  height:auto;
}

/* ===== 浮き出るテキスト ===== */
.hover-text{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
  color:#fff;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center; /* ← 左寄せ */
  text-align:left; /* ← 左揃え */
  padding:22px;

  opacity:0;
  transform:translateY(10px);
  transition:.25s ease;
  
  font-size:12px; /* ← 少し小さく */
}

/* 見出し */
.hover-text h4{
  margin:0 0 10px;
  font-family:'Share Tech Mono',monospace;
}

/* 装飾テキスト */
.hover-text pre{
  margin:0;
  font-family:inherit;
  white-space:pre;
}

/* ===== ホバー時 ===== */
.hover-card:hover .hover-text{
  opacity:1;
  transform:translateY(0);
}



/* ===== 超重要（スマホ対応） ===== */

@media(max-width:700px){
  .hover-text{
    opacity:1;
    background:rgba(0,0,0,0.6);
  }
}



/* ===== 陣営ごと色変化 ===== */

.hover-card.allied .hover-text{
  background:rgba(40,60,120,0.8);
}

.hover-card.axis .hover-text{
  background:rgba(120,40,40,0.8);
}


/* ===== ソフビ人形 ===== */

.material-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.material-grid img {
  width: 200px;
  height: auto;
}