/* =========================================================
   Casa Mia Home - TOP only CSS (from current top.css)
   Top専用：Hero / Sections / Staff / Process / CTA 
   ========================================================= */

/* =========================
   Sections
   ========================= */
section{ padding:56px 0; }
.section-title{
  text-align:center;
  margin:0 0 26px;
  font-size:26px;
  letter-spacing:.02em;
  font-weight:800;
}

/* =========================
   Hero
   ========================= */
.hero{
  position:relative;
  background:#000;
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.2)),
    url("images/main.jpg") center/cover no-repeat;
  transform: scale(1.02);
}
.hero .content{
  position:relative;
  padding:0 0 220px;
  text-align:center;
}
.hero p{
  margin:0;
  font-size:42px;
  letter-spacing:.01em;
  font-weight:800;
  line-height: 1.3em;
}
.hero h1{
  margin:10px 0 0;
  font-size:15px;
  opacity:.95;
  letter-spacing:.02em;
}

/* =========================
   Staff cards
   ========================= */
.staff-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
  align-items:stretch;
}
.staff-card{ text-align:center; }
.staff-card .photo{
  width:180px;
  aspect-ratio: 3/4;
  margin:0 auto 12px;
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow);
  background:#ddd;
}
.staff-card .name{
  font-weight:800;
  margin:6px 0 2px;
}
.staff-card .role{
  font-size:14px;
  color:var(--muted);
  margin:0;
}

/* =========================
   CTA image section
   ========================= */
.cta-img{
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:0;
  background:#000;
}
.cta-img::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.08)),
    url("images/lets-get-started.jpg") center/cover no-repeat;
}
.cta-img .inner{
  position:relative;
  padding:70px 0 270px;
}
.cta-img .headline{
  font-size:42px;
  font-weight:900;
  margin:0;
  text-shadow: 1px 3px 2px rgba(0, 0, 0, .25);
  text-align:right;
}
.cta-img .subcopy{
font-size: 17px;
    margin: 0;
    text-shadow: 1px 3px 2px rgba(0, 0, 0, .25);
    text-align: right;
    margin-top: .8em;
    margin-right: .3em;
}
/* =========================
   Responsive (tablet)
   ========================= */
@media (max-width: 920px){
  .hero p{ font-size:34px; }
  .cta-img .headline{ font-size: 5vw; }
  .cta-img .subcopy {
        font-size: 2.5vw;
        margin-top: .7em;
      }
}

/* =========================
   Responsive (mobile)
   ========================= */
@media (max-width: 760px){
  section{ padding:44px 0; }

  /* layout */
  .hero .content{ padding:0px 0 142px; }
  .cta-img .inner{ padding:10vw 0 26vw; }
  .cta-img .headline,.cta-img  .subcopy{ text-align:right; }

  .staff-grid{ grid-template-columns:1fr; gap:18px; }

  .steps{ grid-template-columns:1fr; }
  .step{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .step:last-child{ border-bottom:none; }

  /* staff slider */
  .staff-grid{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding-bottom:10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .staff-card{
    flex:0 0 224px;
    scroll-snap-align:start;
  }
  .staff-grid::-webkit-scrollbar{ height:6px; }
  .staff-grid::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.15);
    border-radius:3px;
  }
}

/* =========================
   PC staff drag scroll (現行の挙動維持)
   ========================= */
@media (min-width: 761px){
  .staff-grid{
    display:flex;
    gap:22px;
    overflow-x:auto;
    padding-bottom:10px;
    cursor: grab;
    user-select: none;
    max-width: 830px;
    margin: auto;
  }
  .staff-grid.is-dragging{ cursor: grabbing; }

  .staff-card{ flex:0 0 260px; }

  .staff-grid img{
    pointer-events: none;
  }

}