/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
video::-webkit-media-controls{display:none !important}

/* ===== Theme ===== */
:root{
  --bg:#fff;
  --soft:#f6f7f8;
  --text:#0b0f14;
  --muted:rgba(11,15,20,.62);
  --line:rgba(11,15,20,.10);

  --accent:#6ED3E6;      /* 宮古の海色 */
  --accent-soft:#E9FAFD; /* 透明感 */

  --container:1120px;
  --pad:24px;

  --headerH:76px;

  --onHero: rgba(255,255,255,.92);
  --onHeroDim: rgba(255,255,255,.78);
}

html{scroll-behavior:smooth}

body{
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing:-0.01em;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
}

/* ===== Header ===== */
.siteHeader{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--headerH);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--pad);
  z-index:50;

  background:transparent;
  color:var(--onHero);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

/* Scroll: ガラスっぽい白 */
.siteHeader.is-scrolled{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  border-bottom: 1px solid rgba(11,15,20,.08);
}

/* Logo */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.18em;
  white-space:nowrap;
}

.brand__mark{
  width:28px;height:28px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  display:grid;
  place-items:center;
  line-height:1;
  transform: translateZ(0);
}
.brand__text{
  font-size:12px;
  font-weight:700;
  opacity:.92;
  display:inline-block;
}

/* スクロールで文字だけ少し小さく */
.siteHeader.is-scrolled .brand__text{
  transform: scale(0.94);
  transform-origin: left center;
}

/* スクロール後の色 */
.siteHeader.is-scrolled .brand__mark{ border-color: rgba(11,15,20,.18); }
.siteHeader.is-scrolled .brand__text{ color:var(--text); opacity:.92; }

/* Desktop Nav */
.nav{
  display:flex;
  gap:28px;
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease, color .25s ease;
}
.nav__link{
  font-size:11px;
  letter-spacing:.35em;
  font-weight:700;
  color:var(--onHeroDim);
}
.nav__link:hover{color:var(--onHero)}
.siteHeader.is-scrolled .nav{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.siteHeader.is-scrolled .nav__link{
  color: rgba(11,15,20,.64);
}
.siteHeader.is-scrolled .nav__link:hover{
  color: var(--text);
}

/* Mobile menu button */
.menuBtn{
  display:none;
  align-items:center;
  gap:10px;
  background:transparent;
  border:0;
  color:var(--onHero);
  cursor:pointer;
}
.menuBtn__label{
  font-size:11px;
  letter-spacing:.35em;
  font-weight:700;
  opacity:.95;
}

/* ===== Hamburger -> X ===== */
.hamburger{
  width:22px;
  height:16px;
  position:relative;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1.6px;
  background:rgba(255,255,255,.92);
  transition:transform .25s ease, top .25s ease, bottom .25s ease, opacity .25s ease;
}
.hamburger::before{ top:0; }
.hamburger::after{ bottom:0; }

/* OPEN状態（×） */
.menuBtn.is-open .hamburger::before{
  top:7px;
  transform:rotate(45deg);
}
.menuBtn.is-open .hamburger::after{
  bottom:auto;
  top:7px;
  transform:rotate(-45deg);
}

/* スクロール後のSPボタン色 */
.siteHeader.is-scrolled .menuBtn{ color:var(--text); }
.siteHeader.is-scrolled .hamburger::before,
.siteHeader.is-scrolled .hamburger::after{
  background: rgba(11,15,20,.9);
}

/* ===== Drawer ===== */
.drawer{
  position:fixed;
  inset:0;
  background:rgba(8,10,14,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.drawer.is-open{
  opacity:1;
  pointer-events:auto;
}
.drawer__inner{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:22px;
}
.drawer__link{
  color:#fff;
  letter-spacing:.18em;
  font-size:14px;
  font-weight:700;
  opacity:.9;
}
.drawer__link:hover{opacity:1}

/* ===== Hero ===== */
.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
  background:#000;
}

/* ほんのり光を足す（透明感） */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.08),
    rgba(255,255,255,0)
  );
  pointer-events:none;
}

.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:transparent;
}
.hero__video--sp{ display:none; }
.hero__video--pc{ display:block; }

/* Scroll UI */
.scrollDown{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.85);
}
.scrollDown__line{
  width:1px;
  height:36px;
  background:rgba(255,255,255,.85);
  animation: scrollLine 1.6s ease-in-out infinite;
}
.scrollDown__text{
  font-size:11px;
  letter-spacing:.35em;
  font-weight:700;
}
@keyframes scrollLine{
  0%{transform:translateY(-6px);opacity:.25}
  50%{transform:translateY(6px);opacity:1}
  100%{transform:translateY(-6px);opacity:.25}
}

/* ===== Sections ===== */
.section{
  padding:160px 0; /* 余白で高級感 */
  background:var(--bg);
}
.section--soft{
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--accent-soft), rgba(255,255,255,0) 60%),
    radial-gradient(1000px 500px at 90% 0%, rgba(110,211,230,.18), rgba(255,255,255,0) 55%),
    var(--soft);
}

.section__title{
  margin:0 0 48px;
  font-size:56px;
  font-weight:800;
  letter-spacing:-0.03em;
}

.section__lead{
  margin:0;
  color:var(--muted);
  line-height:2;
  font-size:17px;
}

/* About */
.about__catch{
  font-size:42px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.02em;
  margin:0 0 32px;
}
.about__text{
  font-size:17px;
  line-height:2;
  color:var(--muted);
  margin:0;
}

/* Services cards（ガラス感） */
.cards{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.card{
  border:1px solid rgba(11,15,20,.07);
  border-radius:20px;
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding:32px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.06);
}
.card__title{
  margin:0 0 12px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
}
.card__text{
  margin:0;
  color:var(--muted);
  line-height:2;
  font-size:16px;
}

/* Works（余白多め・上品） */
.works{
  margin-top:10px;
  display:grid;
  gap:0;
}
.work{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:26px;
  padding:34px 0;
  border-bottom:1px solid rgba(11,15,20,.08);
  background:transparent;
  transition:transform .15s ease;
}
.work:hover{ transform: translateY(-2px); }

.work__thumb{
  background:linear-gradient(135deg, rgba(110,211,230,.22), rgba(0,0,0,.02));
  border-radius:16px;
  overflow:hidden;
  min-height:190px;
}
.work__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.work__body{padding:6px 0 0}
.work__title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.work__text{
  margin:0 0 6px;
  color:var(--muted);
  line-height:1.95;
  font-size:16px;
}
.work--placeholder{
  opacity:.78;
}
.work--placeholder .work__thumb{
  background:linear-gradient(135deg, rgba(11,15,20,.08), rgba(11,15,20,.02));
}

/* Contact */
.contactRow{
  margin-top:28px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Button（軽い＋アクセント） */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid rgba(11,15,20,.32);
  background:transparent;
  color:var(--text);
  letter-spacing:.22em;
  font-weight:700;
  font-size:12px;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform: translateY(-1px);
}
.btn--ghost{
  background:transparent;
  color:rgba(11,15,20,.75);
  border-color:rgba(11,15,20,.14);
}

/* Footer */
.footer{
  padding:40px 0 54px;
  border-top:1px solid rgba(11,15,20,.08);
  background:#fff;
}
.footer__inner{
  font-size:11px;
  letter-spacing:.2em;
  color:rgba(11,15,20,.45);
}

/* ===== Responsive ===== */
@media (max-width: 760px){
  :root{ --headerH:66px; --pad:18px; }

  .nav{display:none;}
  .menuBtn{display:flex;}

  .section{padding:110px 0}
  .section__title{font-size:34px; margin-bottom:34px;}

  .about__catch{font-size:26px; margin-bottom:22px;}
  .about__text{font-size:15.5px;}

  .cards{grid-template-columns:1fr}
  .card{padding:26px}

  .work{grid-template-columns:1fr; gap:16px; padding:26px 0;}
  .work__thumb{min-height:190px}
  .work__title{font-size:17px}
  .work__text{font-size:15.5px}
}

/* ===== SP video switch（全面表示：黒帯ゼロ方針） ===== */
@media (max-width: 768px){
  .hero__video--pc{ display:none !important; }
  .hero__video--sp{ display:block !important; }

  .hero__video--sp{
    object-fit:cover !important;  /* 黒帯ゼロ（ただし少し切れる） */
    object-position:50% 50%;
  }
}
/* ===== FIX: ドロワー中もヘッダー（×）が見えるようにする ===== */

/* ヘッダーをドロワーより前面に */
.siteHeader{
  z-index: 100; /* 50 → 100 */
}

/* ドロワーはヘッダーの背面に */
.drawer{
  z-index: 90;  /* 60 → 90 */
}

/* ===== FIX: ×を中央で確実に交差させる（端末差でズレない） ===== */
.menuBtn.is-open .hamburger::before,
.menuBtn.is-open .hamburger::after{
  top:50% !important;
  bottom:auto !important;
  transform-origin:center;
}

/* 45度の× */
.menuBtn.is-open .hamburger::before{
  transform: translateY(-50%) rotate(45deg) !important;
}
.menuBtn.is-open .hamburger::after{
  transform: translateY(-50%) rotate(-45deg) !important;
}