*, *::before, *::after { box-sizing: border-box; }

:root{
  --gap: 12px;
  --border: #e5e5e5;
  --panel: #ffffff;
  --card: #ffffff;
  --text: #111111;
  --muted: #555555;
}

html,body {
  overscroll-behavior: none;
}
body{
  margin:0;
/*  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;*/
  background:#ffffff;
  color:var(--text);
}

/* モーダル中はスライダー操作を無効化 */
body.modal-open .track {
  pointer-events: none;
}

/* 念のためボタンも止める */
body.modal-open [data-prev],
body.modal-open [data-next] {
  pointer-events: none;
}

/* ホバー系も無効化（PC対策） */
body.modal-open [data-slider] {
  pointer-events: none;
}

.wrapm{max-width:1100px;margin:20px auto;padding:0 16px;}

/* ===== Slider 1（左固定2枚 / 右スライダー）高さ揃え ===== */
.slider1-container{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:20px;
  gap:0;
  align-items:stretch;
}

@media(max-width:520px){
  .slider1-container{ grid-template-columns: 1fr; }
}

/* 左：固定2枚（ヘッダー付き） */
.fixed-wrapper{
  background:var(--panel);
  /*border:1px solid var(--border);*/
  /*border-radius:16px;*/
  padding:14px;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.fixed-two{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap:12px;
}

@media(max-width:520px){
  .fixed-two{ grid-template-columns:1fr; }
}

.fixed-card{
  background:var(--card);
  /*border:1px solid var(--border);
  border-radius:12px;*/
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* 右＋下：スライダー共通 */
.slider{
  background:var(--panel);
  /*border:1px solid var(--border);*/
  /*border-radius:16px;*/
  padding:14px;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.slider.three{ margin-top:20px; }

.slider-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2px;
}

.nav{ display:flex; gap:8px; }
.nav button{
  background:#fff;
/*  border:1px solid var(--border);*/
  color:var(--text);
  padding:5px;
  border-radius:8px;
  cursor:pointer;
}
.nav button:hover{/* background:#f0f0f0; */}

.nav--ghost{ visibility:hidden; }

/* track / rail */
.track{
  overflow:hidden;
  flex:1;
  min-height:0;
  touch-action: pan-y;
}

.rail{
  display:flex;
  gap:var(--gap);
  transition:transform .35s ease;
  will-change: transform;
}

/* ===== Slider 1 は必ず1枚表示（重要） ===== */
.slider.one .rail{
  gap: 0; /* 1枚表示では隙間を消す（ズレ防止） */
}
.slider.one{
    padding: 10px;
    margin-top: 3px;
}
.slider.one .slide{
  flex: 0 0 100%; /* track幅ぴったり1枚 */
  width: auto;
}

/* ===== Slider 2（3枚表示） ===== */
.slider.three .slide{
  flex: 0 0 auto;
  width: calc((100% - (var(--gap) * 2)) / 3);
}

/* レスポンシブ：2枚/1枚 */
@media(max-width:860px){
  .slider.three .slide{ width: calc((100% - var(--gap)) / 2); }
}
@media(max-width:520px){
  .slider.three .slide{ width: 100%; }
}

/* slide card */
.slide{
  background:var(--card);
  /*border:1px solid var(--border);
  border-radius:12px;*/
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}

/* ===== card inner ===== */
.thumb{ position:relative; aspect-ratio:16/9; background:#000; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }

.play{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:rgba(0,0,0,.1);
  pointer-events:none;
}
.play svg{ width:140px; height:140px; }

.meta{ padding:10px; text-align:center; }
.meta .s{ font-size:13px; color:var(--muted); line-height:1.4; }

/* ===== Modal ===== */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}
.modal[aria-hidden="false"]{ display:flex; }

.modal-card{
  width:min(900px, 96vw);
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}

.modal-head{
  display:flex;
  justify-content:flex-end;
  padding:10px;
  background:#f5f5f5;
  border-bottom:1px solid var(--border);
}

.modal-close{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:0 10px;
  cursor:pointer;
  border-radius:8px;
}

.modal-body{
  aspect-ratio:16/9;
  background:#000;
}
.modal-body iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.p-top-video__box {
    padding: 10px 20px;
}
.nav-btn svg, .nav.nav--ghost svg{
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke: #825d2c;
  stroke-width: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.slider.one {
  position: relative;
}

.slider.one .nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.slider.one .nav-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  pointer-events: auto;

  width: 45px;
  height: 40px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;

}

.slider.one .nav-btn[data-prev] {
  left: -22px;
}

.slider.one .nav-btn[data-next] {
  right: -22px;
}
@media(max-width:520px){
.slider.one .nav-btn {
  top: 44%;
}
.slider.one .nav-btn[data-prev] {
  left: -30px;
}

.slider.one .nav-btn[data-next] {
  right: -30px;
}
}
.slider.one .nav-btn svg {
  width: 46px;
  height: 46px;
  stroke: currentColor;
  fill: none;
  stroke-width: 0.5;
}

.slider.three {
  position: relative;
  padding: 10px;
}

.slider.three .nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.slider.three .nav-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  pointer-events: auto;

  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.slider.three .nav-btn[data-prev] {
  left: -30px;
}

.slider.three .nav-btn[data-next] {
  right: -30px;
}

.slider.three .arrow {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  fill: none;
  stroke: #825d2c;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}