:root{
  --header-h: 52px;
  --gap: 12px;
  --card-w: 360px;              /* fixed width */
  --card-h: calc(var(--card-w) * 1.78); /* fixed 16:9 portrait */
}

/* Layout wrappers (no viewport dependency) */
#strip-wrap{ width:100%; min-height: calc(100vh - var(--header-h)); overflow-x:hidden; overflow-y:visible; display:flex; align-items:center; }
#strip{
  display: flex;
  gap: var(--gap);
  padding: var(--gap);
  align-items: center;
  height: auto;
  will-change: transform;
  transform: translateZ(0);
}

/* Cards fixed size */
#strip .card{
  z-index: 1;
  width: var(--card-w) !important;
  height: var(--card-h) !important;
  flex: 0 0 var(--card-w) !important;
  position: relative;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  backface-visibility: hidden;
  contain: paint layout style;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  transition: transform .32s ease, opacity .32s ease, filter .32s ease;
}
#strip .card.is-center{ transform: scale(1.1) !important; filter: brightness(1) saturate(1); opacity:1; }
#strip .card:not(.is-center){ opacity:.95; filter: saturate(.9) brightness(.95); }

/* Media fill */
.media{ position: absolute; inset: 0; }
.media img, .media video{ width:100%; height:100%; object-fit: cover; display:block; }

/* Overlay fixed to card */
.overlay{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: calc(var(--card-w) - 40px); max-width: calc(var(--card-w) - 40px); z-index:9; }
.overlay h2{ margin:0 0 8px 0; font-size:18px; font-weight:600; }
.overlay p{ margin:0; font-size:13px; line-height:1.5; }
.badge{ position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.65); padding:4px 8px; border-radius:12px; font-size:12px; }

/* Text overlay board */
.text-overlay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width: calc(var(--card-w) - 40px);
  max-width: calc(var(--card-w) - 40px);
  height: calc((var(--card-h) - 80px) * 0.7);
  overflow:auto; padding:20px 20px 72px; /* 72px bottom for buttons */
  background:rgba(0,0,0,0.78); border-radius:10px; text-align:left; line-height:1.7;
  box-sizing:border-box; word-break:break-word; z-index:10;
}
.text-overlay h1{ text-align:center; margin:0 0 8px 0; font-size:26px; font-weight:600; line-height:1.25; min-height:38px; }
.text-overlay h3{ text-align:center; margin:0 0 4px 0; color:#e94619; font-weight:500; font-size:18px; letter-spacing:0.03em; }
.text-overlay p{ margin:0; font-size:11px; line-height:1.9; }

/* Bottom buttons fixed center */
.text-overlay .button-container{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:auto; display:flex; gap:10px; justify-content:center; }
.text-overlay .sample-button{ background:transparent; color:#fff; border:2px solid #fff; border-radius:10px; padding:8px 16px; font-size:14px; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.35); }

/* SNS grid fixed columns */
.sns-grid-static{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 88px; gap:12px; margin-top:12px; width: calc(var(--card-w) - 40px); }
.sns-grid-static .sns-panel{ display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:10px; padding:8px 6px; text-decoration:none; color:#fff; border:1px solid rgba(255,255,255,.7); box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.06); background:rgba(0,0,0,.6); transition:transform .12s ease, box-shadow .12s ease; }


/* ==== global & header (restored) ==== */
html, body{ margin:0; padding:0; color:#fff; font-family: "Zen Old Mincho", serif; min-height:100vh; overflow-x:hidden; }
header{ position:sticky; top:0; background:rgba(0,0,0,0.6); backdrop-filter: blur(6px); padding:10px 16px; z-index:10; display:flex; align-items:center; gap:12px; }
header h1{ font-size:16px; font-weight:500; margin:0; }

/* ==== text overlay refinements (restored) ==== */
.text-overlay{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.55) rgba(255,255,255,.12); }
.text-overlay::-webkit-scrollbar{ width: 10px; }
.text-overlay::-webkit-scrollbar-track{ background: rgba(255,255,255,.08); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.text-overlay::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.25)); border-radius: 8px; border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 0 6px rgba(0,0,0,.25); }
.text-overlay::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.35)); border-color: rgba(255,255,255,.55); }

/* Bottom buttons (white outline) */
.text-overlay .button-container{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:auto; display:flex; gap:10px; justify-content:center; }
.text-overlay .sample-button{ background:transparent; color:#fff; border:2px solid #fff; border-radius:10px; padding:8px 16px; font-size:14px; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.text-overlay .sample-button:hover{ background:rgba(255,255,255,.12); }

/* SNS grid hover */
.sns-grid-static .sns-panel:hover{ transform: translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.12); }


body{ background-color:#222; }

/* ==== Modal (restored + fixed) ==== */
body.modal-open{ overflow:hidden; touch-action:none; overscroll-behavior:none; }
.content-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:10000; padding:16px; box-sizing:border-box; }
.modal-content{ width:min(92vw, 720px); max-height:85vh; background:rgba(0,0,0,.86); border:1px solid rgba(255,255,255,.18); border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.5); color:#fff; overflow:hidden; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.12); }
.modal-title{ font-size:18px; margin:0; }
.modal-close{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:6px; padding:2px 8px; cursor:pointer; }
.modal-body{ padding:12px 14px; max-height:calc(85vh - 56px - 16px); overflow:auto; }
.modal-button, .modal-experience-button{ background:#e94619; color:#fff; border:none; border-radius:8px; padding:8px 12px; margin:10px auto; display:inline-block; }
.modal-media-container img, .modal-media-container video{ max-width:100%; height:auto; display:block; border-radius:6px; }

#strip .card.is-center{ z-index: 100 !important; }
#strip .card[data-clone="1"]{ z-index: 0; }

/* == Board 30% shrink (override) == */
.text-overlay{
  height: calc((var(--card-h) - 80px) * 0.7) !important;
}

/* == SNS/Research buttons fit inside card (override) == */
/* Prevent any horizontal scroll inside overlay */
.text-overlay{ overflow-x: hidden !important; }

/* SNS grid: allow wider cells and avoid wrapping long names */
.sns-grid-static{
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; /* 3列相当 on 360px card */
  grid-auto-rows: 84px !important;
  width: calc(var(--card-w) - 40px) !important;
  max-width: calc(var(--card-w) - 40px) !important;
  box-sizing: border-box !important;
}
.sns-grid-static .sns-panel{
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sns-grid-static .sns-name{ font-size: 11px !important; }
.sns-grid-static .sns-icon{ font-size: 18px !important; }

/* Research button container: wrap into grid within overlay width */
#strip .card[data-card-id="card-research"] .text-overlay .button-container{
  position: static !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important;
  width: 100% !important; max-width: calc(var(--card-w) - 40px) !important; margin: 10px auto 0 !important;
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; gap: 10px !important;
}
#strip .card[data-card-id="card-research"] .text-overlay .button-container .sample-button{
  width: 100% !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* Inline link paragraphs for SNS & Research cards */



/* Inline button containers (non-centered) */
.text-overlay .button-container.inline-links{
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: calc(var(--card-w) - 40px) !important;
  margin: 14px auto 0 !important;
  padding: 0 !important;
}
.text-overlay .button-container.inline-links .sample-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 18px !important;
  background: var(--color-primary, #e94619) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.35) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.text-overlay .button-container.inline-links .sample-button:hover{
  background: var(--color-primary-dark, #c93416) !important;
}
.text-overlay .button-container.inline-links .sample-button[data-link]{
  min-width: 120px !important;
}
@media (max-width: 768px){
  .text-overlay .button-container.inline-links{
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .text-overlay .button-container.inline-links .sample-button[data-link]{
    min-width: 0 !important;
    width: auto !important;
  }
}
/* Darken non-center cards and buttons */
#strip .card:not(.is-center) .text-overlay {
  background: rgba(0, 0, 0, 0.88) !important;
  filter: brightness(0.55) contrast(0.95);
}
#strip .card:not(.is-center) .button-container.inline-links .sample-button {
  background: rgba(20, 20, 20, 0.85) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: none !important;
}
#strip .card:not(.is-center) .button-container.inline-links .sample-button:hover {
  background: rgba(50, 50, 50, 0.9) !important;
  color: #ffffff !important;
}
/* Smaller service/one-off labels */
.service-label{
  display:inline-block;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.08em;
  padding:2px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.85);
}