/* ============================================================
   差し替えポイントはここだけ(:root)
   色・フォント・画像はこの変数を書き換えれば全体に反映されます
   画像は spo/images/ に置きます(ファイル名はここで指定)
   画像が無い場合は代わりにグラデーションが表示されます
   ※ トップ画像は --img-work1〜19 をすべて順に表示します
   ============================================================ */
:root {
  --accent: #2f6f4e;          /* ブランドカラー(緑) */
  --accent-soft: #e8f0ea;
  --ink: #1d1d1b;
  --muted: #77776f;
  --bg: #f8f6f1;
  --line: #e2dfd7;
  --font-ja: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;
  --row: clamp(180px, 29vw, 310px);   /* 作品グリッド1行の高さ */

  /* Photo(並び順 = index.html の並び順。トップ画像もこの順) */
  --img-work1:  url("images/HP284.jpg");              /* グラス */
  --img-work2:  url("images/83p83x835e00012.jpg");    /* ボロネーゼ */
  --img-work3:  url("images/HP218.jpg");              /* チョコレート */
  --img-work4:  url("images/HP377.jpg");              /* パンケーキ */
  --img-work5:  url("images/HP527.jpg");              /* ご飯・湯気 */
  --img-work6:  url("images/HP406.jpg");              /* ベリーパンケーキ */
  --img-work7:  url("images/HP447.jpg");              /* ミントドリンク */
  --img-work8:  url("images/HP687_1.jpg");            /* いちご・蜂蜜 */
  --img-work9:  url("images/HP492a.jpg");             /* とうもろこし */
  --img-work10: url("images/HP708_1.jpg");            /* いちご串 */
  --img-work11: url("images/HP767.jpg");              /* パイナップル */
  --img-work12: url("images/HP125.jpg");              /* クレームブリュレ */
  --img-work13: url("images/burger.jpg");             /* ハンバーガー */
  --img-work14: url("images/teriyaki.jpg");           /* テリヤキ丼 */
  --img-work15: url("images/test77.jpg");             /* クロワッサン */
  --img-work16: url("images/test56a.jpg");            /* パン */
  --img-work17: url("images/noodles.jpg");            /* 麺 */
  --img-work18: url("images/HP842.jpg");              /* ミルク・グラノーラ */
  --img-work19: url("images/instagram58954.jpg");     /* スパイス */

  /* Thumbnails(ギャラリー・スタジオ用の軽量画像。スマホでの表示安定・読み込み高速化のため。トップ画像は上の元画像を使用) */
  --thumb-work1:  url("images/thumb/HP284.jpg");
  --thumb-work2:  url("images/thumb/83p83x835e00012.jpg");
  --thumb-work3:  url("images/thumb/HP218.jpg");
  --thumb-work4:  url("images/thumb/HP377.jpg");
  --thumb-work5:  url("images/thumb/HP527.jpg");
  --thumb-work6:  url("images/thumb/HP406.jpg");
  --thumb-work7:  url("images/thumb/HP447.jpg");
  --thumb-work8:  url("images/thumb/HP687_1.jpg");
  --thumb-work9:  url("images/thumb/HP492a.jpg");
  --thumb-work10: url("images/thumb/HP708_1.jpg");
  --thumb-work11: url("images/thumb/HP767.jpg");
  --thumb-work12: url("images/thumb/HP125.jpg");
  --thumb-work13: url("images/thumb/burger.jpg");
  --thumb-work14: url("images/thumb/teriyaki.jpg");
  --thumb-work15: url("images/thumb/test77.jpg");
  --thumb-work16: url("images/thumb/test56a.jpg");
  --thumb-work17: url("images/thumb/noodles.jpg");
  --thumb-work18: url("images/thumb/HP842.jpg");
  --thumb-work19: url("images/thumb/instagram58954.jpg");
  --thumb-studio1: url("images/thumb/studio1.jpg");
  --thumb-studio2: url("images/thumb/studio2.jpg");
  --thumb-studio3: url("images/thumb/studio3.jpg");
  --thumb-studio4: url("images/thumb/studio4.jpg");

  /* Studio */
  --img-studio1: url("images/studio1.jpg");           /* 看板 */
  --img-studio2: url("images/studio2.jpg");           /* 入口 */
  --img-studio3: url("images/studio3.jpg");           /* スタジオ全景 */
  --img-studio4: url("images/studio4.jpg");           /* キッチン */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-ja); color: var(--ink); background: var(--bg);
  line-height: 2; letter-spacing: .05em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; justify-content: space-between;
  align-items: center; padding: 16px 32px; background: rgba(248,246,241,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.logo { font-family: var(--font-en); font-weight: 600; font-size: 1.35rem; letter-spacing: .4em; color: var(--accent); }
.nav { display: flex; gap: 28px; font-family: var(--font-en); font-size: 1rem; letter-spacing: .14em; }
.nav a { position: relative; display: inline-block; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.nav a:hover { transform: rotateX(360deg); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--accent); transition: width .3s; }
.nav a:hover::after { width: 100%; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center;
  background: #0e1511; color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(0,0,0,.62), rgba(0,0,0,.08) 72%),
              linear-gradient(to top, rgba(0,0,0,.45), transparent 40%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 1.5; letter-spacing: .14em; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hero p { margin-top: 20px; font-family: var(--font-en); font-style: italic; letter-spacing: .32em;
  font-size: 1rem; opacity: .9; }

/* トップ画像:3Dで回り込みながら切り替わる(JSで全写真を順に表示) */
.hero-slides { position: absolute; inset: -4%;
  transform: translate3d(calc(var(--mx, 0) * 30px), calc(var(--my, 0) * 20px + var(--sy, 0) * .3px), 0);
  transition: transform .25s ease-out; }
.hero-stage { position: absolute; inset: 0; perspective: 1800px; }
.slide { position: absolute; inset: 0; opacity: 0; backface-visibility: hidden;
  transition: transform 1.9s cubic-bezier(.65,0,.2,1), opacity 1.9s ease; }
.slide i { position: absolute; inset: 0; background-size: cover; background-position: center; }
.slide.enter  { opacity: 0; transform: translate3d(18%, 0, -420px) rotateY(55deg); }
.slide.active { opacity: 1; transform: none; }
.slide.out    { opacity: 0; transform: translate3d(-18%, 0, -420px) rotateY(-55deg); }
.slide.active i { animation: kb 10s ease-out forwards; }
@keyframes kb { from { transform: scale(1.12); } to { transform: scale(1); } }

.hero-meta { position: absolute; z-index: 2; left: max(24px, calc((100vw - 1080px) / 2 + 24px)); bottom: 6vh;
  display: flex; align-items: center; gap: 18px; font-family: var(--font-en); letter-spacing: .24em; font-size: .95rem; }
.hero-bar { position: relative; width: 120px; height: 1px; background: rgba(255,255,255,.3); overflow: hidden; }
.hero-bar i { position: absolute; inset: 0; background: #fff; transform-origin: left; animation: prog 6.5s linear forwards; }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Section 共通 ---------- */
section { padding: 120px 0; }
.eyebrow { font-family: var(--font-en); font-style: italic; font-size: 1.05rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--accent); }
.eyebrow::after { content: ""; display: inline-block; width: 48px; height: 1px; background: currentColor;
  margin-left: 18px; vertical-align: middle; opacity: .7; }
h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 8px 0 48px; letter-spacing: .14em; }
.note { margin-top: 22px; font-size: .75rem; letter-spacing: .1em; color: var(--muted); }

/* ---------- Photo(4列。.wide は横2列分) ---------- */
.works { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: var(--row);
  grid-auto-flow: dense; gap: 12px; perspective: 1600px; }
.work { position: relative; overflow: hidden; background-size: cover; background-position: center;
  background-color: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.work.wide { grid-column: span 2; }
.work::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.4), transparent 55%);
  transition: opacity .3s; }
.work:hover::before { opacity: 1; }
.work::after { content: attr(data-title); position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 14px;
  z-index: 2; color: #fff; font-family: var(--font-en); font-style: italic; font-size: 1rem; letter-spacing: .2em;
  opacity: 0; transition: opacity .4s; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); }
.work:hover::after { opacity: 1; }
.work:nth-child(1)  { background-image: var(--thumb-work1),  linear-gradient(160deg,#cfe3d5,#8fb89d); }
.work:nth-child(2)  { background-image: var(--thumb-work2),  linear-gradient(160deg,#f1e6d0,#d9b97c); }
.work:nth-child(3)  { background-image: var(--thumb-work3),  linear-gradient(160deg,#e3d3d0,#b98d86); }
.work:nth-child(4)  { background-image: var(--thumb-work4),  linear-gradient(160deg,#d6e0e6,#8aa4b3); }
.work:nth-child(5)  { background-image: var(--thumb-work5),  linear-gradient(160deg,#e8e4cf,#b7ae7a); }
.work:nth-child(6)  { background-image: var(--thumb-work6),  linear-gradient(160deg,#dccfe0,#a58bb0); }
.work:nth-child(7)  { background-image: var(--thumb-work7),  linear-gradient(160deg,#cfe3d5,#8fb89d); }
.work:nth-child(8)  { background-image: var(--thumb-work8),  linear-gradient(160deg,#f1e6d0,#d9b97c); }
.work:nth-child(9)  { background-image: var(--thumb-work9),  linear-gradient(160deg,#e3d3d0,#b98d86); }
.work:nth-child(10) { background-image: var(--thumb-work10), linear-gradient(160deg,#d6e0e6,#8aa4b3); }
.work:nth-child(11) { background-image: var(--thumb-work11), linear-gradient(160deg,#e8e4cf,#b7ae7a); }
.work:nth-child(12) { background-image: var(--thumb-work12), linear-gradient(160deg,#dccfe0,#a58bb0); }
.work:nth-child(13) { background-image: var(--thumb-work13), linear-gradient(160deg,#cfe3d5,#8fb89d); }
.work:nth-child(14) { background-image: var(--thumb-work14), linear-gradient(160deg,#f1e6d0,#d9b97c); }
.work:nth-child(15) { background-image: var(--thumb-work15), linear-gradient(160deg,#e3d3d0,#b98d86); }
.work:nth-child(16) { background-image: var(--thumb-work16), linear-gradient(160deg,#d6e0e6,#8aa4b3); }
.work:nth-child(17) { background-image: var(--thumb-work17), linear-gradient(160deg,#e8e4cf,#b7ae7a); }
.work:nth-child(18) { background-image: var(--thumb-work18), linear-gradient(160deg,#dccfe0,#a58bb0); background-position: 45% 50%; }
.work:nth-child(19) { background-image: var(--thumb-work19), linear-gradient(160deg,#cfe3d5,#8fb89d); }

/* ---------- Studio(3Dカルーセル) ---------- */
.studio { background: #161b18; color: #fff; }
.studio .eyebrow { color: #8fb89d; }
.studio .lead { max-width: 660px; margin: -20px 0 44px; font-size: .95rem; color: rgba(255,255,255,.75); }
.stage { perspective: 1500px; display: flex; justify-content: center; padding: 20px 0 10px; }
.tilt { --w: min(760px, 82vw); position: relative; width: var(--w); height: calc(var(--w) * .62);
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ty, 0) * -12deg)) rotateY(calc(var(--tx, 0) * 16deg));
  transition: transform .25s ease-out; }
.ring { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--w) * -.6)) rotateY(calc(var(--k, 0) * -90deg));
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.panel { position: absolute; inset: 0; background-size: cover; background-position: center;
  backface-visibility: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.5);
  transform: rotateY(calc(var(--i) * 90deg)) translateZ(calc(var(--w) * .6)); }
.panel:nth-child(1) { --i: 0; background-image: var(--thumb-studio1), linear-gradient(160deg,#3a4a40,#1f2a24); }
.panel:nth-child(2) { --i: 1; background-image: var(--thumb-studio2), linear-gradient(160deg,#3a4a40,#1f2a24); background-position: center 35%; }
.panel:nth-child(3) { --i: 2; background-image: var(--thumb-studio3), linear-gradient(160deg,#3a4a40,#1f2a24); }
.panel:nth-child(4) { --i: 3; background-image: var(--thumb-studio4), linear-gradient(160deg,#3a4a40,#1f2a24); }
.stage-ctrl { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 40px; }
.stage-ctrl button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  background: transparent; color: #fff; cursor: pointer; font-size: 1rem; transition: background .3s, color .3s; }
.stage-ctrl button:hover { background: #fff; color: #161b18; }
#studio-caption { min-width: 200px; text-align: center; font-family: var(--font-en); font-style: italic;
  letter-spacing: .3em; font-size: 1rem; }
.specs { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 72px; }
.specs li { border-top: 1px solid rgba(255,255,255,.28); padding-top: 18px; }
.specs span { font-family: var(--font-en); font-style: italic; letter-spacing: .28em; font-size: .95rem; color: #8fb89d; }
.specs b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.1rem;
  margin: 4px 0 8px; letter-spacing: .12em; }
.specs p { font-size: .9rem; color: rgba(255,255,255,.78); line-height: 1.9; }

/* ---------- Services / Flow ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: #fff; border: 1px solid var(--line); padding: 40px 32px; }
.card .num { font-family: var(--font-en); font-weight: 300; font-size: 2.2rem; color: var(--accent); letter-spacing: .1em; }
.card h3 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; margin: 6px 0 14px; letter-spacing: .12em; }
.card p { font-size: .9rem; color: var(--muted); }
.online { margin-top: 36px; font-family: var(--font-serif); font-size: 1rem; letter-spacing: .12em; color: var(--accent); }
.flow { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
.flow li { list-style: none; border-top: 1px solid var(--accent); padding-top: 16px; font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: .1em; }
.flow li::before { counter-increment: step; content: "0" counter(step); display: block;
  font-family: var(--font-en); font-style: italic; font-size: 1.6rem; color: var(--accent); margin-bottom: 4px; }
.flow small { display: block; margin-top: 4px; font-family: var(--font-ja); font-size: .78rem; color: var(--muted); letter-spacing: .06em; }

/* ---------- Overseas ---------- */
.overseas { position: relative; overflow: hidden; background: var(--accent); color: #fff; }
.overseas .wrap { position: relative; z-index: 1; }
.overseas .eyebrow { color: #cfe3d5; }
.overseas h2 { font-family: var(--font-en); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: .06em; }
.overseas p { max-width: 640px; font-family: var(--font-en); font-size: 1.15rem; line-height: 1.9; opacity: .94; letter-spacing: .03em; }
.overseas p + p { margin-top: 12px; }
.btn { display: inline-block; margin-top: 32px; padding: 14px 40px; border: 1px solid currentColor;
  font-family: var(--font-en); letter-spacing: .24em; font-size: 1rem; transition: background .3s, color .3s; }
.btn:hover { background: #fff; color: var(--accent); }

/* ---------- Company / Contact / Footer ---------- */
dl { display: grid; grid-template-columns: 170px 1fr; border-top: 1px solid var(--line); }
dt, dd { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
dt { color: var(--muted); font-family: var(--font-serif); letter-spacing: .12em; }
.contact { text-align: center; background: var(--accent-soft); }
.contact .eyebrow::after { display: none; }
.contact p { margin-bottom: 4px; font-size: .95rem; }
.contact .tel { font-family: var(--font-en); font-size: 1.5rem; letter-spacing: .14em; color: var(--accent); }
.contact .btn { color: var(--accent); }
.contact .btn:hover { background: var(--accent); color: #fff; }
footer { text-align: center; padding: 30px; font-family: var(--font-en); font-size: .9rem; letter-spacing: .14em; color: var(--muted); }

/* ---------- Schedule(Googleカレンダー) ---------- */
.calendar-box { background: #fff; border: 1px solid var(--line); padding: 12px; }
.calendar-box iframe { display: block; width: 100%; height: 560px; border: 0; }
.calendar-note { padding: 48px 20px; text-align: center; font-size: .85rem; color: var(--muted); }
.calendar-link { display: block; text-align: right; padding: 10px 4px 0; font-size: .8rem; color: var(--accent); }

/* ============================================================
   3D演出
   ============================================================ */

/* --- ヒーロー:回転キューブ(白枠・透明。一定間隔で90°ずつ回転) --- */
.cube-scene { --s: 70px; z-index: 2; position: absolute; right: 9vw; bottom: 16vh;
  width: calc(var(--s) * 2); height: calc(var(--s) * 2); perspective: 800px;
  transform: translate3d(calc(var(--mx, 0) * -40px), calc(var(--my, 0) * -30px - var(--sy, 0) * .12px), 0);
  transition: transform .25s ease-out; }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: cubeTurn 12s ease-in-out infinite; }
.cube span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  font: 600 .85rem var(--font-en); letter-spacing: .3em;
  border: 1px solid rgba(255,255,255,.85); background: transparent; }
.cube span:nth-child(1) { transform: translateZ(var(--s)); }
.cube span:nth-child(2) { transform: rotateY(90deg)  translateZ(var(--s)); }
.cube span:nth-child(3) { transform: rotateY(180deg) translateZ(var(--s)); }
.cube span:nth-child(4) { transform: rotateY(-90deg) translateZ(var(--s)); }
.cube span:nth-child(5) { transform: rotateX(90deg)  translateZ(var(--s)); }
.cube span:nth-child(6) { transform: rotateX(-90deg) translateZ(var(--s)); }
@keyframes cubeTurn {   /* 約2秒止まり、約0.8秒、90°回転を繰り返す */
  0%, 18%   { transform: rotateX(-20deg) rotateY(0deg); }
  25%, 43%  { transform: rotateX(-20deg) rotateY(-90deg); }
  50%, 68%  { transform: rotateX(-20deg) rotateY(-180deg); }
  75%, 93%  { transform: rotateX(-20deg) rotateY(-270deg); }
  100%      { transform: rotateX(-20deg) rotateY(-360deg); }
}
@keyframes spin {
  from { transform: rotateX(-20deg) rotateY(0); }
  to   { transform: rotateX(-20deg) rotateY(360deg); }
}
.hero .wrap { transform: perspective(1000px) rotateY(calc(var(--mx, 0) * 9deg)) rotateX(calc(var(--my, 0) * -7deg));
  transition: transform .25s ease-out; }

/* --- 海外セクション:回転する地球儀ワイヤー --- */
.orbit-scene { position: absolute; z-index: 0; right: 9vw; top: 50%; width: 260px; height: 260px;
  margin-top: -130px; perspective: 900px; opacity: .75; }
.orbit { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: orbit 20s linear infinite; }
.orbit i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; }
.orbit i:nth-child(1) { transform: rotateY(0deg); }
.orbit i:nth-child(2) { transform: rotateY(45deg); }
.orbit i:nth-child(3) { transform: rotateY(90deg); }
.orbit i:nth-child(4) { transform: rotateY(135deg); }
.orbit i:nth-child(5) { transform: rotateX(90deg); }
@keyframes orbit {
  from { transform: rotateX(-24deg) rotateY(0); }
  to   { transform: rotateX(-24deg) rotateY(360deg); }
}

/* --- スクロール登場(要素ごとに違う3Dの出方) --- */
.reveal { opacity: 0; backface-visibility: hidden;
  transition: opacity .9s, transform 1s cubic-bezier(.2,.8,.2,1); }
.r-up    { transform: perspective(900px) translateY(40px) rotateX(-30deg); transform-origin: 50% 100%; }
.r-flip  { transform: perspective(900px) rotateY(80deg) translateZ(-200px); transform-origin: 0 50%; }
.work.r-flip:nth-child(even):not(.in) { transform: perspective(900px) rotateY(-80deg) translateZ(-200px); transform-origin: 100% 50%; }
.r-card  { transform: perspective(900px) rotateY(-65deg) translateX(-40px); transform-origin: 0 50%; }
.r-fold  { transform: perspective(700px) rotateX(-90deg); transform-origin: 50% 0; }
.r-tilt  { transform: perspective(1000px) rotateX(25deg) translateY(60px) scale(.92); transform-origin: 50% 100%; }
.r-slide { transform: perspective(900px) rotateY(20deg) translateX(60px); transform-origin: 100% 50%; }
.reveal.in { opacity: 1; transform: none; }

/* --- マウスで傾く(写真は大きく、ほかは控えめ) --- */
[data-tilt].ready { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
  translateZ(var(--tz, 0px)) scale(var(--sc, 1));
  transition: transform .15s ease-out, box-shadow .4s, opacity .8s, background .3s, color .3s; }
[data-tilt].ready:hover { box-shadow: 0 30px 60px rgba(0,0,0,.28); z-index: 3; }
.work.ready:hover { --sc: 1.05; box-shadow: 0 40px 80px rgba(0,0,0,.4); }

@media (prefers-reduced-motion: reduce) {
  .cube, .orbit { animation: none; }
  .slide.enter, .slide.out { transform: none; }
  .slide { transition: opacity 1.6s ease; }
  .slide.active i, .hero-bar i { animation: none; }
  .r-up, .r-flip, .r-card, .r-fold, .r-tilt, .r-slide, .work.r-flip:nth-child(even):not(.in) { transform: none; }
  .nav a:hover { transform: none; }
  .hero .wrap, .hero-slides, .cube-scene { transform: none; }
}

/* ---------- タッチ端末(スマホ・タブレット):軽くて安定した表現に ---------- */
/* 重い立体変形をやめ、フェード＋軽いせり上がりに。写真が白抜けすることを防ぎます */
@media (hover: none) {
  .reveal { backface-visibility: visible; }
  .r-up, .r-flip, .r-card, .r-fold, .r-tilt, .r-slide,
  .work.r-flip:nth-child(even):not(.in) { transform: translateY(28px); transform-origin: 50% 50%; }
  [data-tilt].ready { transform: none; }
  .works { perspective: none; }
  .slide.enter, .slide.out { transform: none; }
  .hero-slides { inset: 0; transform: none; }
  .hero .wrap { transform: none; }
}

/* ---------- スマホ ---------- */
@media (max-width: 760px) {
  :root { --row: 52vw; }
  .nav { display: none; }
  .works { grid-template-columns: 1fr 1fr; }
  .cards, .specs { grid-template-columns: 1fr; }
  dl { grid-template-columns: 100px 1fr; }
  section { padding: 76px 0; }
  .orbit-scene { width: 170px; height: 170px; margin-top: -85px; right: -30px; opacity: .45; }
  .calendar-box iframe { height: 440px; }
  .hero-bar { width: 70px; }
}
/* --- カレンダー注意書き --- */
.calendar-caution {
  margin-top: 16px;
  padding: 16px 20px;
  background: #eef2ee;
  border-left: 3px solid #6b8f71;
}
.calendar-caution p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #2f3b33;
}
.calendar-caution .cc-lead {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f3a2a;
}
.calendar-caution .btn {
  display: inline-block;
  margin-top: 12px;
}

.site-logo {
  position: relative;
  display: block;
  width: 110px;
  aspect-ratio: 8 / 5;
  perspective: 600px;
}

.site-logo .lg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 49%;
  opacity: 0;
  animation-name: letterSpin;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: forwards;
}

/* S */
.site-logo .lg-s {
  clip-path: inset(0 73% 0 0);
  transform-origin: 17% 50%;
  animation-delay: 0.2s;
}

/* p */
.site-logo .lg-p {
  clip-path: inset(0 42% 0 27%);
  transform-origin: 42% 50%;
  animation-delay: 0.9s;
}

/* O */
.site-logo .lg-o {
  clip-path: inset(0 0 0 58%);
  transform-origin: 77% 50%;
  animation-delay: 1.6s;
}

@keyframes letterSpin {
  from {
    opacity: 0;
    transform: rotateY(-180deg) scale(0.7);
  }
  to {
    opacity: 1;
    transform: rotateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  .site-logo {
    width: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-logo .lg {
    animation: none;
    opacity: 1;
  }
}