/* ================================
   クラージュデザイン 会社サイト
   ================================ */
:root{
  --bg:        #070b14;   /* 最も暗い紺 */
  --bg-2:      #0c1424;   /* 段の切り替え */
  --panel:     #101a2e;   /* カード */
  --line:      #1f2d47;
  --ink:       #e8eef8;
  --ink-soft:  #9fb0c9;
  --cyan:      #58c4ff;   /* ジャービスの光 */
  --cyan-deep: #1f8fd6;
  --gold:      #f0b35a;   /* 強調は1色だけ */
  --light-bg:  #f5f7fa;   /* 本業・会社概要の段 */
  --light-panel:#ffffff;
  --light-ink: #1b2433;
  --light-soft:#5a6678;
  --light-line:#dde3ec;

  --font-sans: "Noto Sans JP", "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --max-w: 1080px;
  --r-s: 8px;
  --r-m: 16px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-head); font-weight:700; line-height:1.4; margin:0; letter-spacing:.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 20px; }
.section{ padding:80px 0; }
.section-dark{ background:var(--bg); }
.section-dark2{ background:var(--bg-2); }
.section-light{ background:var(--light-bg); color:var(--light-ink); }

.eyebrow{ font-size:13px; letter-spacing:.2em; color:var(--cyan); text-transform:uppercase; margin-bottom:10px; }
.section-light .eyebrow{ color:var(--cyan-deep); }
.section-title{ font-size:30px; margin-bottom:12px; }
.section-lead{ color:var(--ink-soft); max-width:680px; margin-bottom:36px; }
.section-light .section-lead{ color:var(--light-soft); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-weight:700; font-size:15px;
  border:1px solid var(--cyan); color:var(--cyan); transition:.2s;
}
.btn:hover{ background:rgba(88,196,255,.12); }
.btn-solid{ background:var(--cyan); color:#06111f; }
.btn-solid:hover{ background:#7fd3ff; }
.btn-light{ border-color:var(--cyan-deep); color:var(--cyan-deep); }
.btn-light:hover{ background:rgba(31,143,214,.08); }
.btn-disabled{ opacity:.55; pointer-events:none; }

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(7,11,20,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo img{ height:30px; width:auto; }
.nav{ display:flex; gap:24px; font-size:14px; }
.nav a{ color:var(--ink-soft); }
.nav a:hover{ color:var(--ink); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:6px 10px; font-size:13px; }

/* ---------- hero（3枚が時間で入れ替わる） ---------- */
.hero{ position:relative; overflow:hidden; height:clamp(560px, 82vh, 760px); background:#05080f; touch-action:pan-y; }
.slide{
  position:absolute; top:0; left:0; right:0; bottom:0; inset:0; display:flex; align-items:flex-start;
  transform:translateX(100%); visibility:hidden;
  transition:none;   /* 待機位置へ戻すときは動かさない（横切って見えるのを防ぐ） */
  background-position:100% center; background-size:cover; background-repeat:no-repeat;
}
/* ページごと横に動く: 入る側は端から、出る側は反対の端へ */
.slide.is-active{ transform:translateX(0); visibility:visible; transition:transform .45s cubic-bezier(.22,.72,.2,1), visibility 0s; }
.slide.leave-left{ transform:translateX(-100%); visibility:visible; transition:transform .45s cubic-bezier(.22,.72,.2,1), visibility 0s linear .45s; }
.slide.leave-right{ transform:translateX(100%); visibility:visible; transition:transform .45s cubic-bezier(.22,.72,.2,1), visibility 0s linear .45s; }
.slide.from-right{ transform:translateX(100%); transition:none; }
.slide.from-left{ transform:translateX(-100%); transition:none; }
@media (prefers-reduced-motion: reduce){ .slide,.slide.is-active,.slide.leave-left,.slide.leave-right{ transition:none; } }
.slide::before{
  content:""; position:absolute; top:0; left:0; right:0; bottom:0; inset:0;
  background:linear-gradient(90deg, rgba(5,8,15,.97) 0%, rgba(5,8,15,.95) 50%, rgba(5,8,15,.7) 68%, rgba(5,8,15,.15) 100%);
}
.slide-ai{ background-image:url("images/jarvis_hero.jpg"); }
/* ペット・パレット: 商品を切り出した写真を右に浮かせ、縁を暗い背景へ溶かす */
.slide-pet{ background:#05080f radial-gradient(ellipse at 75% 50%, rgba(240,179,90,.16) 0%, rgba(5,8,15,0) 55%); }
.slide-pallet{ background:#05080f radial-gradient(ellipse at 75% 50%, rgba(88,196,255,.14) 0%, rgba(5,8,15,0) 55%); }
.slide-pet::before,.slide-pallet::before{ background:linear-gradient(90deg, rgba(5,8,15,.92) 0%, rgba(5,8,15,.75) 42%, rgba(5,8,15,0) 62%); }
.slide-cut{
  position:absolute; right:2%; top:50%; transform:translateY(-50%);
  width:min(58vw, 820px); max-height:88%; object-fit:contain; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%, #000 48%, rgba(0,0,0,.6) 66%, transparent 82%);
          mask-image:radial-gradient(ellipse 62% 60% at 50% 50%, #000 48%, rgba(0,0,0,.6) 66%, transparent 82%);
  filter:saturate(1.05) contrast(1.05) drop-shadow(0 0 40px rgba(88,196,255,.18));
}
.slide-pet .slide-cut{ filter:saturate(1.05) contrast(1.05) drop-shadow(0 0 40px rgba(240,179,90,.18)); }
.slide .wrap{ z-index:1; }
@media (max-width:640px){
  /* スマホ: 写真は上の 360px いっぱいに（上下の黒を出さない）。下だけ暗く溶かす */
  .slide-cut{ position:absolute; left:0; right:0; top:0; transform:none; width:100%; height:300px; max-height:none; object-fit:cover; object-position:center 60%; display:block; margin:0; -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); filter:none; }
  .slide-pet .slide-cut{ filter:none; }
}

/* 商品写真の共通「切り抜き風」: 縁を暗い背景へ溶かす */
.cut{ -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, rgba(0,0,0,.5) 75%, transparent 100%); mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, rgba(0,0,0,.5) 75%, transparent 100%); }
.biz-photo{ padding-top:0; overflow:hidden; }
.biz-img{ width:calc(100% + 52px); margin:0 -26px 14px; aspect-ratio:16/9; object-fit:cover; display:block;
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%); mask-image:linear-gradient(180deg, #000 55%, transparent 100%); }
.biz-img-ai{ object-position:0% center; }   /* 左端の J.A.R.V.I.S. を切らない */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.g-item{ margin:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
.g-wide{ grid-column:1 / -1; }
.g-item img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.g-wide img{ aspect-ratio:16/9; }
/* ウッドデッキは写真を丸ごと使い、家の屋根からデッキの階段まで入る位置で見せる */
img[src*="pallet_deck_recolor"]{ object-position:center 75%; }
.g-item figcaption{ padding:14px 18px; font-weight:700; }
.g-item figcaption small{ display:block; font-weight:400; color:var(--ink-soft); font-size:13px; }
@media (max-width:640px){ .gallery{ grid-template-columns:1fr; } .g-wide img{ aspect-ratio:16/9; } }
.slide .wrap{ position:relative; padding-top:clamp(64px, 11vh, 110px); padding-bottom:80px; width:100%; }
.hero h1{ min-height:2.6em; }          /* 見出しは2行ぶんの高さをそろえる */
.hero-lead{ min-height:3.8em; }        /* 説明は2行ぶんの高さをそろえる */
.hero-dots{ position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; gap:10px; z-index:2; }
.dot{ width:10px; height:10px; border-radius:50%; border:1px solid var(--cyan); background:transparent; padding:0; cursor:pointer; }
.dot.is-active{ background:var(--cyan); }
.dot-label{ display:none; }
.hero-arrow{ display:none; }
/* パソコン: 左右の矢印ボタンと、名前付きの切り替えボタン */
@media (min-width:901px){
  .hero-arrow{ display:flex; align-items:center; justify-content:center; position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:48px; height:48px; border-radius:50%; border:1px solid rgba(88,196,255,.5); background:rgba(7,11,20,.55); color:var(--cyan); font-size:30px; line-height:1; cursor:pointer; padding:0 0 4px; transition:.2s; }
  .hero-arrow:hover{ background:rgba(88,196,255,.18); border-color:var(--cyan); }
  .hero-prev{ left:18px; } .hero-next{ right:18px; }
  .hero-dots{ gap:10px; }
  .dot{ width:auto; height:auto; border-radius:999px; padding:7px 16px; background:rgba(7,11,20,.55); color:var(--ink-soft); font-size:13px; font-family:var(--font-sans); letter-spacing:.04em; }
  .dot:hover{ color:var(--ink); border-color:var(--cyan); }
  .dot.is-active{ background:var(--cyan); color:#06111f; font-weight:700; }
  .dot-label{ display:inline; }
}
.hero-tag{ display:inline-block; font-size:12px; letter-spacing:.18em; color:var(--cyan); border:1px solid rgba(88,196,255,.4); border-radius:999px; padding:4px 14px; margin-bottom:22px; }
.hero h1{ font-size:44px; line-height:1.3; margin-bottom:18px; }
.hero h1 span{ color:var(--cyan); }
.hero-lead{ color:var(--ink-soft); max-width:560px; font-size:17px; margin-bottom:30px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-note{ margin-top:26px; font-size:12px; color:#6f819c; }

/* ---------- business ---------- */
.biz-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.biz{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); padding:26px; transition:.2s; }
.biz:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.biz-ai{ background:linear-gradient(160deg, #122441 0%, #0f1a2e 100%); }
.biz-icon{ font-size:30px; line-height:1; margin-bottom:14px; }
.biz h3{ font-size:19px; margin-bottom:8px; }
.biz p{ color:var(--ink-soft); font-size:14px; margin-bottom:14px; }
.biz-tag{ display:inline-block; font-size:12px; color:var(--cyan); border:1px solid rgba(88,196,255,.35); border-radius:999px; padding:3px 12px; }
@media (max-width:900px){ .biz-grid{ grid-template-columns:1fr; } }

/* ---------- web service (banner) ---------- */
.biz-no{ display:inline-block; font-size:12px; letter-spacing:.2em; color:var(--cyan); margin-right:10px; vertical-align:middle; }
.banner{ display:flex; align-items:center; justify-content:space-between; gap:28px; background:var(--light-panel); border:1px solid var(--light-line); border-radius:var(--r-m); padding:28px 32px; }
.banner-lead{ color:var(--light-soft); font-size:15px; max-width:640px; }
@media (max-width:760px){ .banner{ flex-direction:column; align-items:flex-start; } }

/* ---------- web service ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.step{ background:var(--light-panel); border:1px solid var(--light-line); border-radius:var(--r-m); padding:22px; position:relative; }
.step-no{ display:inline-flex; width:32px; height:32px; border-radius:50%; background:var(--cyan-deep); color:#fff; align-items:center; justify-content:center; font-weight:700; font-size:15px; margin-bottom:12px; }
.step h3{ font-size:17px; margin-bottom:6px; }
.step p{ color:var(--light-soft); font-size:14px; }
.price-row{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:28px; background:#fff; border:1px solid var(--light-line); border-radius:var(--r-m); padding:22px 26px; }
.price{ display:grid; line-height:1.3; min-width:200px; }
.price-label{ font-size:12px; color:var(--light-soft); letter-spacing:.1em; }
.price strong{ font-size:34px; font-family:var(--font-head); color:var(--light-ink); }
.price strong small{ font-size:15px; margin-left:2px; }
.price .todo-strong{ font-size:22px; color:#b8860b; }
.price-note{ font-size:12px; color:var(--light-soft); }
.fine{ margin-top:16px; font-size:13px; color:var(--light-soft); }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .steps{ grid-template-columns:1fr; } .price-row{ padding:18px; } }

/* ---------- jarvis ---------- */
.jarvis-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:center; }
.jarvis-figure{ border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line); box-shadow:0 0 60px rgba(88,196,255,.12); }
.jarvis-figure{ position:relative; }
.jarvis-figure img,.jarvis-figure video{ width:100%; display:block; aspect-ratio:606/700; object-fit:cover; background:#05080f; }

/* 軽い動き（CSS だけ）: ヒーローの光がゆっくり脈打つ。動きを減らす設定の人には止める */
.hero::after{
  content:""; position:absolute; right:-10%; top:-20%; width:60%; height:140%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(88,196,255,.22) 0%, rgba(88,196,255,0) 60%);
  animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce){
  .hero::after{ animation:none; }
  .biz:hover{ transform:none; }
  html{ scroll-behavior:auto; }
}
.points{ display:grid; gap:16px; }
.point{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-s); padding:18px 20px; }
.point h3{ font-size:17px; margin-bottom:6px; color:var(--cyan); }
.point p{ color:var(--ink-soft); font-size:15px; }
.voice-note{ margin-top:18px; font-size:13px; color:#6f819c; }

/* ---------- videos ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.video-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
.video-card img{ aspect-ratio:9/16; object-fit:cover; width:100%; }
.video-card .cap{ padding:12px 14px; font-size:14px; }
.video-card .cap small{ display:block; color:#6f819c; font-size:12px; margin-top:4px; }
.sns-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; align-items:center; }
.sns-row .hint{ font-size:13px; color:#6f819c; }

/* ---------- note ---------- */
.note-box{
  display:grid; grid-template-columns:1.4fr 1fr; gap:36px; align-items:center;
  background:linear-gradient(135deg, #101a2e 0%, #0c1424 100%);
  border:1px solid var(--line); border-radius:var(--r-m); padding:40px;
}
.note-box h2{ font-size:28px; margin-bottom:10px; }
.note-box .series{ color:var(--gold); font-size:14px; letter-spacing:.08em; margin-bottom:12px; }
.note-box p{ color:var(--ink-soft); margin-bottom:22px; }
.note-list{ display:grid; gap:10px; }
.note-list a{ display:block; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--r-s); padding:14px 16px; font-size:14px; }
.note-list a:hover{ border-color:var(--cyan); }
.note-list small{ display:block; color:#6f819c; font-size:12px; }

/* ---------- how (AI company) ---------- */
.how-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.how{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); padding:22px; position:relative; }
.how .num{ font-family:var(--font-head); font-size:12px; letter-spacing:.2em; color:var(--cyan); margin-bottom:8px; }
.how h3{ font-size:17px; margin-bottom:8px; }
.how p{ color:var(--ink-soft); font-size:14px; }

/* ---------- ai.html ---------- */
.page-head{ padding:72px 0 24px; background:radial-gradient(ellipse at 80% 0%, rgba(88,196,255,.12) 0%, rgba(7,11,20,0) 55%), var(--bg); }
.how-grid-3{ grid-template-columns:repeat(3,1fr); }
.org{ display:grid; gap:0; justify-items:center; }
.org-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; width:100%; }
.org-box{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-s); padding:14px 20px; text-align:center; font-weight:700; min-width:140px; }
.org-box small{ display:block; font-weight:400; font-size:12px; color:var(--ink-soft); margin-top:2px; }
.org-boss{ border-color:var(--gold); color:var(--gold); }
.org-hq{ border-color:var(--cyan); color:var(--cyan); }
.org-voice,.org-room{ color:var(--ink); }
.org-depts .org-box{ min-width:110px; font-weight:500; }
.org-line{ width:1px; height:26px; background:var(--line); }
.note-box .jarvis-figure{ box-shadow:none; }
@media (max-width:900px){ .how-grid-3{ grid-template-columns:1fr; } }

/* ---------- tools (PR) ---------- */
.pr{ display:inline-block; font-size:10px; letter-spacing:.1em; border:1px solid var(--gold); color:var(--gold); border-radius:4px; padding:1px 6px; margin-left:8px; vertical-align:middle; }
.tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tool{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); padding:22px; display:flex; flex-direction:column; }
.tool-kind{ font-size:12px; letter-spacing:.12em; color:var(--cyan); margin-bottom:6px; }
.tool h3{ font-size:17px; margin-bottom:8px; }
.tool p{ color:var(--ink-soft); font-size:14px; flex:1; margin-bottom:14px; }
.tool-link{ font-size:12px; color:#6f819c; border:1px dashed var(--line); border-radius:999px; padding:4px 12px; align-self:flex-start; }
.tool-free{ border-style:solid; color:var(--ink-soft); }
@media (max-width:900px){ .tools-grid{ grid-template-columns:1fr; } }

/* ---------- services (light) ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc{ background:var(--light-panel); border:1px solid var(--light-line); border-radius:var(--r-m); padding:26px; }
.svc .icon{ width:44px; height:44px; border-radius:12px; background:#e6f3fc; color:var(--cyan-deep); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
.svc h3{ font-size:18px; margin-bottom:10px; }
.svc ul{ color:var(--light-soft); font-size:14px; line-height:1.8; }
.svc ul li::before{ content:"・"; }
.svc-note{ margin-top:28px; background:#eaf1f8; border-radius:var(--r-s); padding:18px 22px; font-size:15px; }
.svc-note strong{ color:var(--cyan-deep); }

/* ---------- works ---------- */
.works-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.work{ background:var(--light-panel); border:1px solid var(--light-line); border-radius:var(--r-s); padding:16px; font-size:14px; }
.work strong{ display:block; margin-bottom:4px; }
.work span{ color:var(--light-soft); font-size:13px; }

/* ---------- company ---------- */
.company-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.company-table{ width:100%; border-collapse:collapse; font-size:15px; }
.company-table th,.company-table td{ text-align:left; padding:12px 8px; border-bottom:1px solid var(--light-line); vertical-align:top; }
.company-table th{ width:7em; color:var(--light-soft); font-weight:500; }
.todo{ color:#b8860b; font-size:12px; }

/* ---------- form ---------- */
.form{ display:grid; gap:14px; }
.form label{ font-size:14px; font-weight:700; }
.form input,.form textarea{
  width:100%; font:inherit; padding:12px 14px; border:1px solid var(--light-line); border-radius:var(--r-s); background:#fff; color:var(--light-ink);
}
.form textarea{ min-height:140px; resize:vertical; }
.form .consent{ font-size:13px; color:var(--light-soft); display:flex; gap:8px; align-items:flex-start; }
.form button{ font:inherit; cursor:pointer; }

/* ---------- footer ---------- */
.footer{ background:#04070d; border-top:1px solid var(--line); padding:40px 0 28px; font-size:13px; color:#8292ad; }
.footer .wrap{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start; }
.footer .logo img{ height:26px; margin-bottom:12px; }
.footer-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-links a:hover{ color:var(--ink); }
.footer .credit{ margin-top:16px; font-size:12px; color:#5c6c87; line-height:1.7; }
.footer .copy{ margin-top:14px; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .video-grid{ grid-template-columns:repeat(2,1fr); }
  .how-grid{ grid-template-columns:repeat(2,1fr); }
  .svc-grid{ grid-template-columns:1fr; }
  .works-grid{ grid-template-columns:repeat(2,1fr); }
  .jarvis-grid,.note-box,.company-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:34px; }
}
/* タブレット（641〜900px）: メニューはボタンで開く。最初の画面は PC と同じ横並び（写真は右に大きく） */
@media (min-width:641px) and (max-width:900px){
  .nav{ display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; background:#0b1322; border-bottom:1px solid var(--line); }
  .nav a{ padding:14px 20px; border-top:1px solid var(--line); }
  .nav.open{ display:flex; }
  .nav-toggle{ display:inline-block; }
  .hero{ height:clamp(600px, 80vh, 760px); }
  .hero h1{ font-size:36px; }
  .hero-lead{ max-width:50%; font-size:16px; }
  /* ① AI: 写真を右に寄せ、暗い覆いを左半分だけにして顔を見せる */
  .slide-ai{ background-position:calc(100% + 80px) center; }   /* 少しだけ右へ */
  .slide-ai::before{ background:linear-gradient(90deg, rgba(5,8,15,.97) 0%, rgba(5,8,15,.92) 36%, rgba(5,8,15,.45) 56%, rgba(5,8,15,.08) 100%); }
  /* ②③: 写真を右に大きく浮かせる。文章と同じ高さに中央揃え */
  .slide-cut{ width:70vw; right:-10%; aspect-ratio:16/10; height:auto; max-height:none; object-fit:cover; object-position:center; }   /* ②③は同じ大きさ・同じ形の枠 */
  .slide-pallet .slide-cut-table{ width:70vw; right:-10%; aspect-ratio:16/10; height:auto; max-height:none; object-fit:cover; object-position:center 22%; }   /* ②と同じ枠。天板が見えるよう上寄り */
  .slide-pet::before,.slide-pallet::before{ background:linear-gradient(90deg, rgba(5,8,15,.95) 0%, rgba(5,8,15,.8) 40%, rgba(5,8,15,.1) 62%, rgba(5,8,15,0) 100%); }
}

@media (max-width:640px){
  .section{ padding:56px 0; }
  .section-title{ font-size:24px; }
  .hero{ height:820px; }
  .hero-actions .btn{ padding:11px 18px; font-size:14px; }
  .hero h1,.hero-lead{ min-height:0; }
  /* スマホ: AI の場面はジャービスの顔を上に大きく見せ、下へ暗く溶かす */
  .slide-ai{ background:#05080f url("images/jarvis_face.jpg") center -20px/100% auto no-repeat; }
  .slide-ai::before{ background:linear-gradient(180deg, rgba(5,8,15,.03) 0%, rgba(5,8,15,.2) 30%, rgba(5,8,15,.9) 50%, rgba(5,8,15,.97) 100%); }
  .slide .wrap{ padding-top:270px; padding-bottom:56px; }
  .hero-dots{ bottom:16px; }
  .hero h1{ font-size:28px; }
  .nav{ display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; background:#0b1322; border-bottom:1px solid var(--line); }
  .nav a{ padding:14px 20px; border-top:1px solid var(--line); }
  .nav.open{ display:flex; }
  .nav-toggle{ display:inline-block; }
  .works-grid{ grid-template-columns:1fr; }
  .note-box{ padding:26px 20px; }
  .footer .wrap{ grid-template-columns:1fr; }
}

/* パレットのスライドはテーブル（縦長寄り）なので少し小さく中央寄せ */
.slide-cut-table{ width:min(44vw, 620px); right:8%; }
@media (max-width:640px){ .slide-cut-table{ width:100%; right:0; } }

/* パソコン（901px〜）: すべて画面幅に対する割合（%）で決め、どのパソコンでも同じ構図にする */
@media (min-width:901px){
  /* 中央寄せの割合: トップは画面幅の 86%、下の段（と上のメニュー）は 72% */
  .hero{ width:86%; max-width:none; margin:0 auto; height:calc(86vw * 600 / 1366); min-height:560px; max-height:none; border-radius:0 0 18px 18px; }   /* 01〜03 のボタンは JS で説明文の下に固定し、必要な高さも JS で確保 */   /* 高さは幅から計算（古い Safari でも効く） */
  .wrap{ max-width:72%; }
  .header .wrap{ max-width:86%; }
  .slide .wrap{ max-width:79%; padding:0 1.5%; padding-top:6.5%; }
  .slide-cut{ top:50%; }
  .hero-tag{ font-size:clamp(11px, .9vw, 16px); padding:.3em 1.1em; margin-bottom:1.6vw; }
  .hero h1{ font-size:clamp(30px, 3.1vw, 50px); margin-bottom:1.1vw; min-height:2.6em; }
  .hero-lead{ font-size:clamp(14px, 1.2vw, 19px); max-width:max(41%, 420px); margin-bottom:1.8vw; min-height:5.7em; }   /* 説明文は 3 行ぶんの高さに固定（ボタンの位置を 3 枚で揃える） */
  .hero-actions .btn{ font-size:clamp(13px, 1.1vw, 19px); padding:.8em 1.5em; }
  .hero-note{ font-size:clamp(11px, .9vw, 15px); margin-top:1.9vw; }
  /* ① ジャービス: 右端から 12.4% 内側に（右の帯は暗く溶かす） */
  .slide-ai{ background-position:right 12.4% center; }
  .slide-ai::before{ background:linear-gradient(90deg, rgba(5,8,15,.97) 0%, rgba(5,8,15,.95) 50%, rgba(5,8,15,.7) 66%, rgba(5,8,15,.12) 76%, rgba(5,8,15,.12) 83%, rgba(5,8,15,.5) 87%, rgba(5,8,15,.92) 91%, rgba(5,8,15,.98) 100%); }   /* 右の影は少し右から */
  /* ②③: 同じ枠（幅 50%・16:10）を右端から 10% 内側に */
  .slide-cut,.slide-pallet .slide-cut-table{ width:50%; right:10%; aspect-ratio:16/10; height:auto; max-height:none; object-fit:cover; object-position:center; }
  .slide-pallet .slide-cut-table{ object-position:center 22%; }
  .slide-pet .hero-lead,.slide-pallet .hero-lead{ max-width:max(44%, 420px); }
  .slide-pet::before,.slide-pallet::before{ background:linear-gradient(90deg, rgba(5,8,15,.96) 0%, rgba(5,8,15,.85) 38%, rgba(5,8,15,.15) 56%, rgba(5,8,15,0) 100%); }
  .hero-arrow{ width:clamp(40px, 3.5vw, 60px); height:clamp(40px, 3.5vw, 60px); font-size:clamp(24px, 2.2vw, 38px); }
  .hero-prev{ left:1.3%; } .hero-next{ right:1.3%; }
  .hero-dots{ bottom:18px; }
  .dot{ font-size:clamp(12px, .95vw, 16px); }
}