/* =========================
   店舗案内ページ（Npage）専用
   ========================= */
.Npage *{ box-sizing:border-box; }

/* ========== 店舗画像スライダー（5枚／オート＋手動） ========== */
.Npage .shopSlider{
  --dot-size:12px;
  --gap:8px;
  --btn-size:44px;
  position:relative;
  width:100%;
  max-width:1024px;
  margin:16px auto;
  border-radius:12px;
  overflow:hidden;
  background:#000;
}
.Npage .shopSlider input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none;
}

/* トラック */
.Npage .shopSlides{
  display:flex; width:500%;                      /* 5枚 */
  transform: translateX(0%);
  transition: transform .55s ease;
}
.Npage .shopSlide{
  width:100%; flex:0 0 20%;                      /* 100 / 5 */
  aspect-ratio: 16 / 9;
  position:relative;
}
.Npage .shopSlide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ドット */
.Npage .shopDots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; gap:var(--gap); z-index:2;
}
.Npage .shopDots label{
  width:var(--dot-size); height:var(--dot-size);
  border-radius:50%; background:rgba(255,255,255,.5);
  cursor:pointer; border:1px solid rgba(255,255,255,.7);
}

/* 前後ボタン（表示先は checked に応じて切替） */
.Npage .shopArrows label{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--btn-size); height:var(--btn-size); border-radius:50%;
  background:rgba(255,255,255,.85); color:#111; cursor:pointer; z-index:3;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.Npage .shopArrows .prev{ left:10px; }
.Npage .shopArrows .next{ right:10px; }
.Npage .shopArrows .prev::before,
.Npage .shopArrows .next::before{
  content:""; position:absolute; inset:0;
  margin:auto; width:10px; height:10px; border:2px solid currentColor;
  border-top:none; border-right:none;
}
.Npage .shopArrows .prev::before{ transform: rotate(45deg); }
.Npage .shopArrows .next::before{ transform: rotate(-135deg); }

/* ラジオ選択に合わせてトラック移動 */
.Npage #ss1:checked ~ .shopSlides{ transform: translateX(  0%); }
.Npage #ss2:checked ~ .shopSlides{ transform: translateX(-20%); }
.Npage #ss3:checked ~ .shopSlides{ transform: translateX(-40%); }
.Npage #ss4:checked ~ .shopSlides{ transform: translateX(-60%); }
.Npage #ss5:checked ~ .shopSlides{ transform: translateX(-80%); }

/* ドットのアクティブ色 */
.Npage #ss1:checked ~ .shopDots label[for="ss1"],
.Npage #ss2:checked ~ .shopDots label[for="ss2"],
.Npage #ss3:checked ~ .shopDots label[for="ss3"],
.Npage #ss4:checked ~ .shopDots label[for="ss4"],
.Npage #ss5:checked ~ .shopDots label[for="ss5"]{
  background:#fff;
}

/* 前後ボタンの行き先を checked に応じて出し分け */
.Npage .shopArrows label{ display:none; }
.Npage #ss1:checked ~ .shopArrows .p1,
.Npage #ss2:checked ~ .shopArrows .p2,
.Npage #ss3:checked ~ .shopArrows .p3,
.Npage #ss4:checked ~ .shopArrows .p4,
.Npage #ss5:checked ~ .shopArrows .p5,
.Npage #ss1:checked ~ .shopArrows .n1,
.Npage #ss2:checked ~ .shopArrows .n2,
.Npage #ss3:checked ~ .shopArrows .n3,
.Npage #ss4:checked ~ .shopArrows .n4,
.Npage #ss5:checked ~ .shopArrows .n5{ display:block; }

/* ===== オートプレイ（任意：.is-auto が付いている時だけ動く） ===== */
@keyframes ssAuto5{
  0%   { transform: translateX(  0%); }   /* 1 */
  18%  { transform: translateX(  0%); }
  20%  { transform: translateX(-20%); }   /* 2 */
  38%  { transform: translateX(-20%); }
  40%  { transform: translateX(-40%); }   /* 3 */
  58%  { transform: translateX(-40%); }
  60%  { transform: translateX(-60%); }   /* 4 */
  78%  { transform: translateX(-60%); }
  80%  { transform: translateX(-80%); }   /* 5 */
  98%  { transform: translateX(-80%); }
  100% { transform: translateX(  0%); }   /* 戻る */
}
/* 自動再生ON（マウスホバーで一時停止） */
.Npage .shopSlider.is-auto .shopSlides{
  animation: ssAuto5 25s infinite;
}
@media (hover:hover){
  .Npage .shopSlider.is-auto:hover .shopSlides{ animation-play-state: paused; }
}

/* 手動操作（ラジオが効いた瞬間は transform 指定が勝つので、オートの上書きに） */
.Npage #ss1:checked ~ .shopSlides,
.Npage #ss2:checked ~ .shopSlides,
.Npage #ss3:checked ~ .shopSlides,
.Npage #ss4:checked ~ .shopSlides,
.Npage #ss5:checked ~ .shopSlides{
  animation: none;
}

/* レスポンシブ微調整 */
@media (max-width:640px){
  .Npage .shopArrows label{ --btn-size:40px; }
  .Npage .shopDots{ bottom:8px; }
}


/* ===============================
   Staff Detail（Npageにスコープ）
   =============================== */
.Npage .staffDetail *{ box-sizing:border-box; }
.Npage .staffDetail{
  --line:#e6e6e6; --ink:#111; --muted:#6b7280;
  --bg:#fff; --bg-soft:#f7f8fa; --brand:#111;
  --r:14px; --gap:16px;
  color:var(--ink);
}

/* 見出し */
.Npage .staffDetail-head{ margin: 6px 0 10px; }
.Npage .staffDetail-name{ font-size: clamp(22px, 3.6vw, 30px); margin:0 0 4px; }
.Npage .staffDetail-role{ color:var(--muted); margin:0; }

/* 上段レイアウト */
.Npage .staffDetail-top{
  display:grid; gap:var(--gap);
  grid-template-columns: 1fr;        /* SP: 1カラム */
  margin: 14px 0 22px;
}

/* 画像エリア */
#main section.staffDetail-media{
	padding:0px;
}
@media screen and (min-width:641px){
	#main section.staffDetail-media{
		padding: 0px 10px;
	}
	.Npage .staffDetail-top{ grid-template-columns: minmax(0, 52%) minmax(0, 48%); }
}
.Npage .staffDetail-media{ display:grid; gap:12px; align-content:start; }
.Npage .staffDetail-main{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#000;
}
.Npage .staffDetail-main img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio: 4 / 3;                 /* 推奨比率 */
}
/* サブ0〜2枚。要素が無ければ自動で詰まる */
.Npage .staffDetail-subWrap{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.Npage .staffDetail-sub{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#000;
}
.Npage .staffDetail-sub img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio: 4 / 3;
}

/* プロフィールカード */
.Npage .staffDetail-profile{
  border:1px solid var(--line); border-radius:12px; background:#fff;
  padding:16px; display:grid; gap:14px; align-content:start;
}
.Npage .staffDetail-dl{
  display:grid; gap:8px;
}
.Npage .staffDetail-dl > div{
  display:grid; grid-template-columns: 110px 1fr; gap:8px;
  padding:8px 0; border-bottom:1px dashed #eee;
}
.Npage .staffDetail-dl > div:last-child{ border-bottom:0; }
.Npage .staffDetail-dl dt{ color:#555; font-weight:700; }
.Npage .staffDetail-dl dd{ margin:0; line-height:140%; }

/* タグ */
.Npage .staffDetail-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin: 2px 0 0; padding:0; list-style:none;
}
.Npage .staffDetail-tags li{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:var(--bg-soft); border:1px solid #999;
}

/* CTA ボタン */
.Npage .staffDetail-cta{ display:flex; flex-wrap:wrap; gap:10px; }
.Npage .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 14px; border-radius:999px; font-weight:800; font-size:14px;
  text-decoration:none; cursor:pointer; transition: filter .2s ease, transform .05s ease;
  border:1px solid #ddd; background:#fff; color:var(--ink);
}
.Npage .btn:active{ transform: translateY(1px); }
.Npage .btn.-primary{ background:var(--brand); color:#fff; }
.Npage .btn.-ghost{ background:#00b900; color:#fff; }
.Npage .btn.-link{ background:#4d4d77; color:#fff; }
.Npage .btn.{ height:auto; padding:0; border:0; color:#0f62fe; }

.Npage .staffDetail-cta a:hover{ background-color:#ccc; }

/* 下段セクション */
.Npage .staffDetail-section{ margin: 26px 0 10px; }
.Npage .staffDetail-h2{ font-size: clamp(18px, 2.6vw, 20px); margin:0 0 10px; }
.Npage .staffDetail-text{ line-height:1.9; margin:0; }
.Npage .staffDetail-list{ margin:0; padding-left: 1.2em; }

iframe.StMap{
	width:100%;
	height:auto;
	min-height:280px;
}

.SLink{ margin:10px 0; }
.SLink a{
	display: inline-block; 
	padding:10px 12px;
	border:1px solid #eee;
	border-radius: 5px;
	background-color:#14988d;
	color:#fff;
	margin-bottom:5px;
}
.SLink a.-tel{
	background-color:#333;
}
.SLink a.-res{
	background-color:#4d4d77;
}
.SLink a.-req{
	background-color:#ff9900;
}
.SLink a:hover{
	background-color:#ccc;
	text-decoration:none;
}