/* リセット & 基本 */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Noto Sans JP", sans-serif; background:#1236B3; color:#333; position:relative; }

/* ------------------------------
   言語切替スイッチ（右上）
------------------------------ */
input[name="lang"] { display:none; }

.lang-switch {
  position: fixed;
  top: 10px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 100;
}

.lang-label {
  padding: 6px 12px;
  background: #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

/* 選択中の言語 */
#lang-jp:checked ~ .lang-switch label[for="lang-jp"] { background:#ff7e00; color:#fff; }
#lang-en:checked ~ .lang-switch label[for="lang-en"] { background:#ff7e00; color:#fff; }

/* タイトルの言語切替 */
.page-title .title { display: none; }
#lang-jp:checked ~ .page-title .jp {display: block;}
#lang-en:checked ~ .page-title .en {display: block;}

.page-title .title-desc { display: none; }
#lang-jp:checked ~ .page-title .jp {display: block;}
#lang-en:checked ~ .page-title .en {display: block;}

.page-title {
  max-width: 1200px;
  margin: 80px auto 20px; /* 上：スイッチとの間、下：グリッドとの間 */
  padding: 0 20px;
  text-align: center;
}

.page-title .title {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.page-title .title-desc {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.footer{
   text-align: center;
   color: #FFF;
} 

.footer .ver {
   text-align: right;
   font-size: 10px;
   margin-bottom:30px;
   padding: 0 20px;
} 

a {
  text-decoration: none;
  color: yellow;
}

a:hover {
  text-decoration: underline;
  color: yellow
}

/* モーダル内テキスト */
.text { display: none; }
#lang-jp:checked ~ .grid-container ~ .modal .jp { display: block; }
#lang-en:checked ~ .grid-container ~ .modal .en { display: block; }
.modal-title { font-weight: bold; font-size: 18px; margin-bottom: 8px; }
.modal-desc { font-weight: normal; font-size: 14px; line-height: 1.5; }


/* ------------------------------
   グリッド
------------------------------ */
.grid-container { display:flex; flex-wrap:wrap; gap:10px; max-width:1200px; margin:60px auto 20px; justify-content:center; }
.grid-item { width:calc(20% - 10px); aspect-ratio:1/1; overflow:hidden; border-radius:10px; cursor:pointer; transition:transform .3s ease, box-shadow .3s ease; }
.grid-item img { width:100%; height:100%; object-fit:cover; }
.grid-item:hover { transform:scale(1.04); box-shadow:0 4px 12px rgba(0,0,0,0.3); }


/* ------------------------------
   モーダル
------------------------------ */
.modal-toggle { display:none; }
.modal { position:fixed; inset:0; display:flex; justify-content:center; align-items:center; background:rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:opacity .3s; }
.modal-toggle:checked + .modal { opacity:1; pointer-events:auto; }

.modal-bg { position:absolute; inset:0; cursor:pointer; }
.modal-content { background:#fff; padding:20px; border-radius:10px; position:relative; max-width:600px; width:90%; }
.modal-image { width:100%; border-radius:6px; margin-bottom:15px; }
.close-btn { position:absolute; top:10px; right:12px; cursor:pointer; font-size:26px; }


/* ------------------------------
   レスポンシブ
------------------------------ */
@media(max-width:900px) { .grid-item { width:calc(25% - 10px); } }
@media(max-width:600px) { .grid-item { width:calc(33.33% - 10px); } }
@media(max-width:480px) { .grid-item { width:calc(50% - 10px); } }
@media(max-width:600px) { .page-title .title {font-size: 22px;  }}
@media(max-width:600px) { .page-title .title-desc {font-size: 8px;  }}