:root{font-family:"Inter","Noto Sans JP",system-ui}
*{box-sizing:border-box}
body{margin:0;background:#f8fafc;color:#0f172a;line-height:1.7}
a{color:#0ea5e9;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
header{background:#0a2240;color:#e2e8f0}
nav{display:flex;gap:14px;align-items:center;padding:14px 0}
footer{background:#0b1220;color:#cbd5e1;padding:24px 0;margin-top:24px}
h1{font-size:clamp(1.6rem,2.5vw + 1rem,2.4rem)}
label{display:block;margin:.6rem 0 .2rem}
input,textarea{width:100%;padding:.6rem .8rem;border:1px solid #cbd5e1;border-radius:10px}

/* 2枚交互フェードとキャプションをまとめるラッパ */
.swap2-block { --interval: 5s; }  /* ←切替間隔。8s等に変更OK */

/* 上部キャプション（画像の外側） */
.swap2-caption{
  position: relative;
  min-height: 28px;              /* 行の高さを確保してレイアウトのガタつきを防止 */
  margin: 4px 0 8px;
  display: flex;
  justify-content: flex-start;   /* 左寄せ */
}
.swap2-caption.center{ justify-content: center; } /* 中央寄せにしたい時 */

.swap2-caption .cap{
  position: absolute; left: 0;   /* 中央寄せ時は JS不要。位置は親のjustifyで制御 */
  transform: translateX(0);
  padding: 6px 10px; border-radius: 10px;
  background: #0b1220; color:#fff; font-weight:700; font-size:.95rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  opacity: 0; transition: opacity .3s ease;
  animation: qtSwap2 calc(var(--interval) * 2) infinite ease-in-out;
}
.swap2-caption .cap:nth-child(1){ animation-delay: 0s; }
.swap2-caption .cap:nth-child(2){ animation-delay: var(--interval); }

/* 既存の2枚交互フェード（画像側） */
.swap2{
  position: relative; border-radius:14px; overflow:hidden; background:#0b1220; aspect-ratio:16/9;
}
.swap2 img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .6s ease;
  animation: qtSwap2 calc(var(--interval) * 2) infinite ease-in-out;
}
.swap2 img:nth-child(1){ animation-delay: 0s; }
.swap2 img:nth-child(2){ animation-delay: var(--interval); }

/* 表示/非表示の同期アニメーション（画像/キャプション共通） */
@keyframes qtSwap2{
  0%,45%   { opacity:1; }
  50%,95%  { opacity:0; }
  100%     { opacity:1; }
}

/* === Qurio: 2枚交互フェード + 上部キャプション（安全フォールバック付き） === */
.swap2-block{ --interval: 5s; } /* ←間隔を変える場合はここを 8s などに */

.swap2-caption{
  position: relative;
  min-height: 28px;
  margin: 4px 0 8px;
  display: flex;
  justify-content: flex-start;          /* 左寄せ。中央にしたい時は .center を追加 */
}
.swap2-caption.center{ justify-content: center; }
.swap2-caption .cap{
  position: absolute; left: 0;
  padding: 6px 10px; border-radius: 10px;
  background:#0b1220; color:#fff; font-weight:700; font-size:.95rem;
  line-height:1; box-shadow:0 6px 16px rgba(0,0,0,.15);
  opacity:0; transition:opacity .3s ease;
  animation: qtSwap2 calc(var(--interval, 5s) * 2) infinite ease-in-out;
}
.swap2-caption .cap:nth-child(1){ animation-delay: 0s; }
.swap2-caption .cap:nth-child(2){ animation-delay: var(--interval, 5s); }

.swap2{
  position: relative; border-radius:14px; overflow:hidden; background:#0b1220;
  aspect-ratio:16/9;
}
.swap2 img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .6s ease;
  animation: qtSwap2 calc(var(--interval, 5s) * 2) infinite ease-in-out;
}
.swap2 img:nth-child(1){ animation-delay: 0s; }
.swap2 img:nth-child(2){ animation-delay: var(--interval, 5s); }

@keyframes qtSwap2{
  0%,45%   { opacity:1; }
  50%,95%  { opacity:0; }
  100%     { opacity:1; }
}

/* スクロールアップボタンのスタイル */
#scrollUpBtn {
  position: fixed;
  bottom: 20px; 
  right: 20px; 
  font-size: 24px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s;
  display: none; /* 初期は非表示 */
  z-index: 99999; /* モーダルより前に表示 */
}

#scrollUpBtn:hover {
  background-color: #0056b3;
}

#scrollUpBtn i {
  font-size: 30px; /* アイコンのサイズ調整 */
}

/* 新着情報を3列表示に設定 */
#news {
  display: block;  
}

.news-wrapper {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* 小さい画面では1列に表示 */
@media (max-width: 768px) {
  #news {
    grid-template-columns: 1fr; /* 小さい画面では1列表示 */
  }
}

:root{ --max:1100px; --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --accent:#06b6d4; }
*{box-sizing:border-box}
body{margin:0;background:#f8fafc;color:var(--ink);line-height:1.7;font-family:"Inter","Noto Sans JP",system-ui}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.header{background:#0b1220;color:#cbd5e1;position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height: clamp(48px, 18vw, 96px); width:auto; display:block;}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:#cbd5e1}
.menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #334155;border-radius:10px;background:transparent;color:#e2e8f0}
.menu-toggle .bars{width:18px;height:2px;background:#e2e8f0;position:relative}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#e2e8f0}
.menu-toggle .bars::before{top:-6px}.menu-toggle .bars::after{top:6px}
@media (max-width: 768px){
  .menu-toggle{display:inline-flex}
  .nav{display:none;position:absolute;top:60px;left:0;right:0;background:#0b1220;border-top:1px solid #334155;flex-direction:column;gap:12px;padding:12px 16px}
  .nav.open{display:flex}
  .header-inner{align-items:center}
}
.hero{padding:28px 0 12px}
.hero h1{font-size:clamp(1.3rem,2.6vw + 1rem,2.2rem);margin:.2em 0}
.section{padding:22px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width: 720px){ .grid-2{grid-template-columns:1fr} }
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:#06b6d4;color:#fff;font-weight:700}
.small{color:#475569}
.footer{background:#0b1220;color:#cbd5e1;padding:24px 0;margin-top:24px}

/* --- Sticky footer additions --- */
html, body{ height:100%; }
body{ min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1; }
/* -------------------------------- */
/* --- Footer center alignment --- */
.footer .container{ text-align:center; }
/* --- Header logo styling --- */
.brand img{height: clamp(48px, 18vw, 96px); width:auto; display:block;}
@media (min-width: 1024px){
  .header-inner{ padding: 12px 0; }
  .brand{ padding: 4px 0; }
}

/* === Stacked header: top logo centered, bottom nav centered === */
.header{background:#0b1220;color:#cbd5e1;position:sticky;top:0;z-index:10}
.header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 0 10px;
}
.brand{display:flex;align-items:center;justify-content:center}
.brand img{height: clamp(48px, 18vw, 96px); width:auto; display:block;}
.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}
.nav a{
  color:#cbd5e1;
  font-weight:600;
  padding:10px 8px;            /* bigger tap targets */
  line-height:1;
  border-radius:8px;
}
.nav a:hover, .nav a:focus-visible{
  background:rgba(255,255,255,0.08);
  outline:none;
}
/* Mobile: add horizontal breathing room */
@media (max-width:560px){
  .nav{ gap:10px }
  .nav a{ padding:10px 6px }
}
/* Sticky footer remains effective if present */

.header{ padding-top: max(0px, env(safe-area-inset-top)); }

/* Featured image cards */
.card.featured{padding:0; overflow:hidden}
.card.featured a{display:block; color:inherit; text-decoration:none}
.card-media{
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background:#000;
}
.card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
}
.card-body{padding:14px}
.card-body h3{margin:.2em 0}
.card:hover .card-media img{ transform: scale(1.06); transition: transform .25s ease }

/* === 2枚だけの交互フェード === */
.swap2{ 
  /* 間隔：5秒（片方の表示時間）。変えたい場合は 3s / 8s などに */
  --interval: 5s;

  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background:#0b1220;
  aspect-ratio: 16 / 9;        /* 高さを一定に：不要なら消してOK */
}
.swap2 img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .6s ease;
  animation: qtSwap2 calc(var(--interval) * 2) infinite ease-in-out;
}
.swap2 img:nth-child(1){ animation-delay: 0s; }
.swap2 img:nth-child(2){ animation-delay: var(--interval); }

@keyframes qtSwap2{
  0%, 45%   { opacity: 1; }  /* 前半は表示 */
  50%, 95%  { opacity: 0; }  /* 後半は非表示 */
  100%      { opacity: 1; }
}

/* grid-3 に2列表示のスタイル */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列表示 */
  gap: 20px;
  margin-top: 20px;
}

/* スマートフォンで1列表示 */
@media (max-width: 600px) {
  .grid-3 {
    grid-template-columns: 1fr; /* 1列表示 */
  }
}

/* モーダルの背景 */
.modal {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  z-index: 10000; /* ヘッダーや他のコンテンツより前に表示 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 中央に配置 */
  width:40%; /* 画面の80%を使用 */
  height: auto;
  background-color: rgba(0, 0, 0, 0.8); /* 背景を薄く暗くする */
  overflow: hidden;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* モーダル内の画像 */
.modal-content {
  display: block;
  width: 100%;
  max-width: 700px; /* 最大幅を設定 */
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

/* モーダルを閉じるボタン */
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 9998; /* モーダルより前に表示 */
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* モーダル内のキャプション（画像の説明文） */
#caption {
  text-align: center;
  color: white;
  font-size: 18px;
  margin-top: 10px;
}

/* 画像を親要素の10%に縮小 */
.featured-img {
  width: 10%;  /* 親要素に対して幅を10%に設定 */
  height: auto; /* 高さは自動で調整 */
  object-fit: contain; /* アスペクト比を保ちながら収める */
}