:root{
  --ink:#0d1321;
  --muted:#5b6573;
  --line:#e7eaf0;
  --accent:#185adb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:18px}

.topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:20}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:700;text-decoration:none;color:var(--ink)}
.topbar nav a{margin-left:12px;text-decoration:none;color:var(--ink)}
.topbar nav a.btn{margin-left:16px}
.btn{display:inline-block;padding:.55rem .9rem;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

.hero.white{background:#fff}
.hero-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
.title{font-size:clamp(22px,4vw,36px);margin:.2em 0 .2em}
.price{margin:.2rem 0 .8rem;color:var(--muted)}
.badge{display:inline-block;margin-left:.4rem;background:#eef3ff;color:#143b8a;border:1px solid #d6e4ff;padding:.15rem .4rem;border-radius:8px;font-size:.9em}
.cta-row .btn{margin-right:8px}

.section{padding:24px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:none}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.list{margin:.2rem 0 0 1rem}
.list li{margin:.3rem 0}
.list.cols{columns:2}
.note{margin:.2rem 0 0 1rem}

.gallery-section{background:#fff}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gallery-grid a{display:block}
.gallery-grid img{border:1px solid var(--line);border-radius:10px;transition:transform .15s ease}
.gallery-grid img:hover{transform:scale(1.02)}

.contact .muted{color:var(--muted)}
.field{margin:12px 0; display:flex; flex-direction:column; align-items:stretch;}
label{display:block;font-weight:600;margin:0 0 6px 0}
input[type="text"],input[type="email"],input[type="tel"],textarea{
  width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;font:inherit
}
textarea{resize:vertical}
.form-status{margin-top:10px;font-weight:600}
.form-status.ok{color:#1b7f37}
.form-status.err{color:#b00020}

.btn.phone{border-color:#18a558}
.btn:hover{filter:brightness(0.98)}
/* ===== Gallery Slider: PC/スマホ共通 ===== */
.gallery-slider-wrapper{ position: relative; }
.gallery-slider-wrapper .gallery-grid{
  display: flex;                   /* JSでも指定するが保険として */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;           /* Firefox */
}
.gallery-slider-wrapper .gallery-grid::-webkit-scrollbar{ display: none; } /* WebKit */

.gallery-slider-wrapper .gallery-grid > *{
  flex: 0 0 70%;                   /* PCの1枚幅 */
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
@media (max-width: 860px){
  .gallery-slider-wrapper .gallery-grid > *{ flex: 0 0 88%; } /* モバイルは少し大きめ */
}

.gallery-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; border: none; background: rgba(0,0,0,.45); color: #fff;
  width: 42px; height: 42px; border-radius: 999px; font-size: 24px;
  line-height: 42px; text-align: center; cursor: pointer; user-select: none;
}
.gallery-nav.prev{ left: 6px; }
.gallery-nav.next{ right: 6px; }

.gallery-dots{
  position: absolute; left: 0; right: 0; bottom: -2px;
  display: flex; justify-content: center; gap: 6px; padding: 8px 0;
}
.gallery-dots button{
  width: 8px; height: 8px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.3); cursor: pointer;
}
.gallery-dots button[aria-current="true"]{ background: rgba(0,0,0,.75); }