*{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
    }
    a{ color:inherit; text-decoration:none; }

    /* ===== Layout (Desktop) ===== */
    .layout{
      display:grid;
      grid-template-columns: var(--sidebar-w) 1fr;
      min-height:100vh;
    }

    /* ===== Sidebar ===== */
    .sidebar{
      padding:26px 18px 18px;
      position:sticky;
      top:0;
      height:100vh;
      overflow:auto;
      z-index: 999;
  /* 右へ5px、上下への広がり0、ぼかし5px、色 */
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
    }

    .brand{
      align-items:center;
      gap:12px;
      padding:8px;
      margin-bottom:18px;
    }
    footer .logo{
      place-items:left;
    }
    aside .logo{
      place-items:center;
    }
    .logo{
      border-radius:14px;
      display:grid;
      letter-spacing:.08em;
      margin-bottom: 10px;
    }
    header h1 a.logo img{
      height: 80px;
      width: auto;
    }
    .brand .name{
      line-height:1.2;
      font-weight:700;
    }
    .brand .sub{
      font-size:12px;
      color:var(--muted);
      margin-top:4px;
    }

    .nav{
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:10px 6px 18px;
    }
    .nav a{
      padding:12px 12px;
      border-radius:12px;
      transition:.15s;
      letter-spacing:.02em;
    }

    .sidebar-bottom{
      margin-top:18px;
      display:grid;
      gap:12px;
      padding:10px 6px;
    }

    .btn-card{
      border-radius:16px;
      padding:14px 14px;
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:700;
    }

    .call-card{
      border-radius:16px;
      padding:16px 14px;
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }
    .call-card .tel{
      font-size:18px;
      font-weight:900;
      letter-spacing:.04em;
    }
    .call-card .time{
      font-size:12px;
      opacity:.9;
      margin-top:6px;
    }

    /* ===== Main ===== */
    main,
    .main{
      background:#fff;
      min-height:100vh;
    }
    
    #imageMain-edit {
	margin:0px auto;
	position: relative;
	display: flex;
}
#imageMain-edit video {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;

}


    /* ===== Mobile top bar (shown only on small screens) ===== */
    .topbar{
      display:none;
      position:sticky;
      top:0;
      z-index:50;
      padding:14px 14px;
      box-shadow: 0 10px 22px rgba(0,0,0,.12);
    }
    .topbar-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .topbar .mini-brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      letter-spacing:.02em;
    }
    .hamburger{
      width:44px; height:44px;
      border:0;
      border-radius:4px;
      color:#fff;
      display:grid;
      place-items:center;
      cursor:pointer;
      z-index: 9;
    }
    .hamburger:active{ transform: translateY(1px); }

    /* ===== Mobile drawer ===== */
    .overlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.35);
      opacity:0;
      pointer-events:none;
      transition:.2s;
      z-index:60;
    }
    .drawer{
      position:fixed;
      top:0; left:0;
      height:100vh;
      width:min(84vw, 340px);
      color:#fff;
      transform: translateX(-102%);
      transition:.25s;
      z-index:70;
      padding:18px 14px;
      overflow:auto;
    }
    body.is-open .overlay{ opacity:1; pointer-events:auto; }
    body.is-open .drawer{ transform: translateX(0); }

    .drawer .close{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:14px;
    }
    .drawer .close button{
      width:44px; height:44px;
      border:0;
      border-radius:4px;
      color:#fff;
      cursor:pointer;
    }

    /* ===== Responsive ===== */
    @media (max-width: 900px){
      .layout{ grid-template-columns: 1fr; }
      .sidebar{ display:none; }      /* hide desktop sidebar */
      .topbar{ display:block; }      /* show topbar */
      .hero{
        height: 360px;
        grid-template-columns: 1fr;  /* 1 column on mobile */
      }
      .hero .col:nth-child(2),
      .hero .col:nth-child(3){ display:none; }

      .hero-copy{
        left:18px;
        bottom:20px;
        max-width: 92%;
      }
      .hero-copy h1{ font-size:28px; }
      .about h2{ font-size:26px; }
    }


    /* === Accordion menu === */
.nav-group{ margin: 6px 0; }

.nav-parent{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border:0;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
}

.chev{ transition: transform .18s; }

.nav-children{
  display:grid;
  gap:6px;
  padding: 4px 6px 0 18px; /* インデント */
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition: max-height .22s ease, opacity .22s ease;
}

.nav-child{
  padding:10px 12px;
  border-radius:12px;
  color: rgba(255,255,255,.92);
}
.nav-child:hover{ background: rgba(255,255,255,.10); }

/* open state */
.nav-group.is-open .nav-children{
  max-height: 240px; /* 子の数に合わせて増やす */
  opacity:1;
}
.nav-group.is-open .chev{ transform: rotate(180deg); }

/* 単独リンク用（既存の .nav a と被るならこれで統一してもOK） */
.nav-single{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  opacity:.92;
}
.nav-single:hover{ background: rgba(255,255,255,.10); }