@charset "utf-8";

/* ===== Theme & Calc ===== */
:root{
  --bg:#fff; --text:#222; --muted:#6B6B6B;
  --railW:1080px;                 /* ブロック幅 */
  --gap:12px;                     /* 画像間隔 */
  --radius:12px;
  --itemW:calc((var(--railW) - 4*var(--gap)) / 5); /* 5枚ぴったり幅 */
	--captionGap: 16px; /* 12〜24px お好みで */
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
.n1-hero{font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif}

/* ===== Hero：フルブリード→内側1180pxセンター ===== */
.n1-hero{
  background:var(--bg);
  width:100vw;
  left:50%;
  margin-left:-50vw;
  right:50%; margin-right:-50vw;
  position:relative; text-align:center;
  padding:52px 0 64px;
  margin-top: 40px; /* ← メニューバーとの間隔。好みにより20〜60px程度調整 */
}
.n1-hero__inner{ width:var(--railW); margin:0 auto }

/* Copy */
.n1-ttl{ font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:42px; line-height:1.3; color:var(--text); margin:0 0 12px }
.n1-lead{ font-size:16px; color:var(--muted); margin:0 0 50px ;line-height: 1.5rem; }

/* ===== Rail（5列） ===== */
.n1-railwrap{ position:relative; width:var(--railW); margin:0 auto }
.n1-rail{
  width:var(--railW);
  display:flex; gap:var(--gap);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-left: 20px;   /* 左端を常に20px空ける */
  box-sizing: border-box;
}
.n1-rail::-webkit-scrollbar{display:none}
.n1-rail{scrollbar-width:none; -ms-overflow-style:none}

.n1-item{
  flex:0 0 var(--itemW); min-width:var(--itemW);
  scroll-snap-align:start;
  position:relative; border-radius:var(--radius); overflow:hidden;
  transition:transform .25s ease;
}
.n1-item:hover{ transform:translateY(-3px) }
.n1-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  margin-bottom: var(--captionGap); /* ←ココを足す：画像と文字の間隔 */
}

.n1-item figcaption{
  position: static;
  font-size:14px;
  color:var(--text);
  margin: 0;                 /* 既定の余白をリセット */
  text-align: center;        /* お好みで */
  line-height: 1.6;          /* お好みで */
}

/* ===== 矢印ナビ（Apple風・半透明サークル） ===== */
.n1-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%;
  border:none; cursor:pointer;
  background:rgba(0,0,0,.06);
  color:#444; font-size:32px; line-height:56px;
  text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.10);
  transition:background .2s ease, opacity .2s ease, transform .2s ease;
  backdrop-filter:saturate(120%) blur(4px);
}
.n1-nav:hover{ background:rgba(0,0,0,.10) }
.n1-nav:disabled{ opacity:.3; cursor:default; pointer-events:none }
.n1-nav--prev{ left:-70px }     /* 1180pxコンテナの外側に半分だけはみ出す */
.n1-nav--next{ right:-70px }

/* CTA */
.n1-cta{ margin-top:44px; display:flex; justify-content:center; gap:16px }
.n1-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:8px; text-decoration:none;
  font-weight:600; border:1px solid transparent; transition:all .25s ease;
}
.n1-btn--black{
  background:#2B2B2B;
  color:#fff;
  padding:14px 28px; /* ← 少しだけ広げる */
  border-radius:999px; /* ← Apple風の滑らか感 */
  font-size:15px;      /* ← 若干大きめに */
}
.n1-btn--black:hover{
  background:#fff;
  color:#c93c3c;
  border:1px solid #c93c3c;
  transition: all .3s ease;
}
.n1-btn--ghost{
  border:1px solid rgba(0,0,0,0.25); /* ← 薄く柔らかく */
  color:#2B2B2B;
  background:transparent;
  padding:14px 28px;
  border-radius:999px;
  font-size:15px;
  transition: all .25s ease;
}

.n1-btn--ghost:hover{
  background:#2B2B2B;
  color:#fff;
}