/* =============================================================
   SANKYOFOODS株式会社（外食事業）TOPページ｜土台CSS
   -------------------------------------------------------------
   ここは「器」です。骨格・帯・配置だけを決めてあります。
   配色の詰め・書体まわりの調整・余白の追い込み・装飾・動きは
   デザイン担当（那尚香さん）の領分として空けてあります。

   ルール
     1. 色は必ず :root の変数を使う。ここ以外に色コードを書かない
     2. !important は使わない
     3. 幅の基準はワイヤーと同じ 1920px。--w-max で調整できる
   ============================================================= */

/* ---------- 1. 土台の変数 ---------- */
:root{
  /* 色 ── 赤は現行サイトの logo.svg から取った実値 */
  --red:            #f3011a;
  --ink:            #221f20;
  --ink-soft:       #707070;
  --ink-invert:     #ffffff;

  --bg:             #ffffff;
  --bg-grey:        #e8e8e8;
  --bg-grey-2:      #e3e2e2;
  --bg-box:         #b4b4b4;
  --bg-circle:      #e7e7e7;
  --panel:          #4b4b4b;

  --line:           #707070;
  --line-soft:      #d5d5d5;

  /* 書体 ── ワイヤー原本は全67箇所が Source Han Sans JP（源ノ角ゴシック）。
     Web で使える近似として Noto Sans JP を当てている */
  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;

  /* 大きさ */
  --w-max:      1920px;
  --header-h:   120px;
  --panel-w:    600px;

  /* 余白 */
  --gap-xs:  8px;
  --gap-s:  16px;
  --gap-m:  32px;
  --gap-l:  64px;
  --gap-xl:120px;

  /* 角丸 */
  --r-s:  8px;
  --r-m: 15px;
  --r-l: 30px;
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-ja);
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

/* =============================================================
   ここから下が今回の作業場所です。自由に書き換えてかまいません。

   上（色・書体・余白のまとめ と 土台の初期化）は弊社が固めた場所です。
   色や書体を変えたくなったら、上の一覧の値を変えてください。
   下の帯や部品は「たたき台」なので、形を変えても大丈夫です。

   ひとつだけお願い：同じ名前の指定を二回書かず、もとの指定を書き換えてください。
   ============================================================= */

/* ---------- 3. 共通の入れ物 ---------- */
.inner{ width:min(100% - var(--gap-m)*2, 1500px); margin-inline:auto; }

.sec{ padding-block:var(--gap-xl); }
.sec__title{
  font-family:var(--font-en);
  font-size:clamp(28px,2.4vw,44px);
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

/* 画像がまだ入っていない枠に出るプレースホルダ */
.ph{
  display:grid;
  place-items:center;
  background:var(--bg-box);
  color:var(--ink-invert);
  overflow:hidden;
}
.ph img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 4. ヘッダー ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  height:var(--header-h);
  /* 常に白。スクロール量やメニューの開閉で色を変えない（2026-08-20 那尚香さんの申し送り 2-1）。
     半円メニューは z-index:20、ヘッダーは 30 なので、白で塗っておけばメニューを開いても白のまま重なる */
  background:var(--bg);
  box-shadow:0 2px 14px rgb(34 31 32 / .1);
  display:flex;
  align-items:center;
  gap:var(--gap-m);
  padding-inline:var(--gap-m);
}
.site-header__logo{ display:block; }
.site-header__logo img{ width:min(31vw,600px); }
.site-header__right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:var(--gap-s);
}
.btn-recruit{
  display:grid;
  place-items:center;
  min-width:150px;
  height:44px;
  border:0;
  border-radius:999px;
  background:var(--pop-yellow);
  color:var(--ink);
  font-weight:700;
  font-size:17px;
  box-shadow:0 4px 0 rgb(34 31 32 / .14);
  transition:transform .18s;
}
.btn-recruit:hover{ transform:translateY(-2px); }
.lang{
  display:flex;
  align-items:center;
  gap:var(--gap-xs);
  height:44px;
  padding-inline:var(--gap-s);
  background:var(--bg);
  border:2px solid var(--line-soft);
  border-radius:999px;
  font-weight:700;
  font-size:18px;
}
.lang__flag{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--red);
}
.lang__caret{ font-size:16px; }

/* ハンバーガーのボタン */
.menu-btn{
  width:44px; height:44px;
  padding:0;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:7px;
  background:var(--red);
  border:0;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 4px 0 rgb(34 31 32 / .14);
}
.menu-btn span{
  display:block;
  width:22px; height:3px;
  border-radius:2px;
  background:var(--ink-invert);
  transition:transform .28s, opacity .28s;
}
/* ×にするときは、上下の線を**まんなかの線とぴったり同じ高さ**まで動かす。
   3本は 3px の線＋7px のすきま＝中心どうしが 10px 離れているので、寄せる量も 10px。
   🔴 9px だと 1px ずれて交点が中心から外れ、**右上と右下の腕だけ短い×**になる
   （2026-08-20 前田社長ご指摘） */
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* ---------- 追加の色と書体（今回のデザインで足したもの） ---------- */
:root{
  --pop-pink:      #e12645;
  --pop-ring:      #c4102f;
  --header-h:      78px;
  --pop-yellow:    #ffd23f;
  --pop-sky:       #4ec3e0;
  --pop-mint:      #7ed6a5;
  --pop-cream:     #f6f1e2;
  --pop-orange:    #ff8a3d;
  /* 見出し用の極太。読み込み先は既存と同じところ（無料で使えるもの） */
  --font-pop: "Dela Gothic One", var(--font-ja);
  --font-pop-en: "Poppins", var(--font-en);
  --font-round: "M PLUS Rounded 1c", var(--font-ja);
}

/* ---------- 5. FV ---------- */
/* 表紙とごあいさつをつなぐ赤い帯。円はこの中を通る */
.band-pop{
  position:relative;
  overflow:hidden;
  background:var(--pop-pink);
}
.fv{
  position:relative;
  /* FVの高さ。ヘッダーの分を引かない＝以前より 78px ぶん広い（2026-08-20 前田社長のご指示）。
     回る円がここに収まるかを決める基準なので、円の側もこの変数を見ている */
  --fv-h:100dvh;
  /* 🔴 円の「箱」の外まで文字が描かれる。実測で箱の直径の 1.343 倍（SVGの文字が円弧の外側へ伸びるため）。
     箱の大きさだけ見て収まったと判断すると、文字は切れたままになる（2026-08-20 に一度これで外した） */
  --ring-paint:1.35;
  min-height:var(--fv-h);
  display:grid;
  background:transparent;
  overflow:hidden;
}
/* 円になって回る看板文字 */
.fv__ring{
  position:absolute;
  left:50%; top:50%;
  /* 直径は「横幅」だけでなく「FVの高さ」にも連動させる（2026-08-20 那尚香さんの申し送り 2-2）。
     `.fv{overflow:hidden}` は商品を画面外へ見切れさせるために要るので外せない。だから円の側を収める。
     🔴 判定は「箱」ではなく「実際に塗られる文字の外径」で行う＝箱を --ring-paint で割る。
        0.98 は上下にわずかな余白を残すため */
  width:min(100vw, var(--fv-h) / var(--ring-paint) * 0.98, 1000px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  animation:fv-spin 34s linear infinite;
  pointer-events:none;
  z-index:0;
}
.fv__ring svg{ width:100%; height:100%; overflow:visible; }
.fv__ring text{
  font-family:var(--font-pop-en);
  font-size:78px;
  font-weight:800;
  fill:var(--pop-ring);
}
@keyframes fv-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.fv__stage{
  position:relative;
  z-index:1;
  width:min(100%,1440px);
  height:100%;
  margin-inline:auto;
}

/* まんなかのキャッチコピー */
.fv__copy{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  z-index:5;
  font-family:var(--font-pop);
  font-size:clamp(26px,4.2vw,74px);
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.8;
  color:var(--ink-invert);
  text-align:center;
  text-shadow:0 6px 20px rgb(34 31 32 / .22);
  animation:fv-copy-in 1s cubic-bezier(.2,1.1,.3,1) .1s both;
}
/* キャッチコピーの中身はひとかたまりで扱う */
.fv__copy-inner{ display:block; }

/* かぎかっこごと、左右にすこし間をあける */
.fv__copy-q{ margin-inline:.2em; }
/* 「わくわく」の上の点 */
.fv__copy-em{
  -webkit-text-emphasis:filled dot currentColor;
          text-emphasis:filled dot currentColor;
  -webkit-text-emphasis-position:over right;
          text-emphasis-position:over right;
}
/* キャッチコピーの上の小さな英字（仮の文言） */
.fv__copy-en{
  display:block;
  font-family:var(--font-pop-en);
  font-size:clamp(12px,1.15vw,16px);
  font-weight:700;
  letter-spacing:.3em;
  line-height:1;
  margin-top:1.5em;
  opacity:.92;
}
@keyframes fv-copy-in{
  from{ opacity:0; transform:translateY(18px) scale(.94); }
  to  { opacity:1; transform:none; }
}

/* 丸い写真。回る英字より手前、いまの写真やイラストより奥 */
.fv__photo{
  position:absolute;
  z-index:1;
  display:block;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 14px 26px rgb(34 31 32 / .18);
  opacity:0;
  animation:fv-pop .85s cubic-bezier(.18,1.35,.35,1) both;
}
.fv__photo img{ width:100%; height:100%; object-fit:cover; }
.fv__photo--a{ left:-3.1%; top:-6.9%; width:32.3%; --fx:150%;  --fy:120%; animation-delay:.16s; }
.fv__photo--b{ left:83.3%; top:64%;   width:15.6%; --fx:-190%; --fy:-90%; animation-delay:.30s; }
@keyframes fv-photo-in{
  from{ opacity:0; transform:scale(.82); }
  to  { opacity:1; transform:none; }
}

/* まんなかから飛び出して、その位置に落ち着く */
.fv__pop{
  position:absolute;
  z-index:2;
  display:block;
  opacity:0;
  animation-name:fv-pop, fv-sway;
  animation-duration:.8s, var(--sway,3.6s);
  animation-timing-function:cubic-bezier(.18,1.35,.35,1), ease-in-out;
  animation-iteration-count:1, infinite;
  animation-fill-mode:forwards, none;
  animation-delay:var(--d,0s), calc(var(--d,0s) + .8s);
}
@keyframes fv-sway{
  0%,100%{ transform:translateY(0) rotate(var(--pop-rot,0deg)); }
  50%    { transform:translateY(-11px) rotate(calc(var(--pop-rot,0deg) + 2deg)); }
}
.fv__pop img{ display:block; width:100%; height:auto; }
.fv__pop--item img{ filter:drop-shadow(0 14px 20px rgb(34 31 32 / .3)); }
.fv__pop--chara img{ filter:drop-shadow(0 8px 12px rgb(34 31 32 / .22)); }
@keyframes fv-pop{
  0%  { opacity:0; transform:translate(var(--fx),var(--fy)) scale(.15) rotate(0deg); }
  55% { opacity:1; }
  100%{ opacity:1; transform:translate(0,0) scale(1) rotate(var(--pop-rot,0deg)); }
}
.fv__pop--p1{ left:13.80%; top:57.60%; width:8.30%;  --pop-rot:-15deg; --fx:180%;  --fy:210%;  --d:.10s; --sway:3.8s; }
.fv__pop--p2{ left:1.60%;  top:76.40%; width:8.90%;  --pop-rot:-12deg; --fx:330%;  --fy:-140%; --d:.22s; --sway:4.2s; }
.fv__pop--p4{ left:73.50%; top:69.50%; width:8.20%;  --pop-rot:-16deg; --fx:-270%; --fy:-150%; --d:.46s; --sway:4.4s; }
.fv__pop--p5{ left:23.60%; top:77.60%; width:5.70%;  --pop-rot:5deg;   --fx:290%;  --fy:-160%; --d:.54s; --sway:3.2s; }
/* ギフトボックス。z-index はあえて書かない＝.fv__pop の 2 のまま。
   シェフ（--c4）が 4 なので、書かないことでシェフが手前になる */
/* 左右の位置は画素で詰めてある。86.6% より左だとシェフに重なり、右だと箱の右壁が画面で切れる */
.fv__pop--p6{ left:86.60%; top:31.00%; width:14.00%; --pop-rot:-6deg;  --fx:-310%; --fy:20%;   --d:.34s; --sway:4.0s; }
/* 2026-08-25 前田社長ご指示でFV左のキャラクター（--c2）を削除。FVのおじさんは --c4 の1体だけ */
.fv__pop--c4{
  left:71.50%; top:9.40%;
  width:23.00%;
  z-index:4;
  --pop-rot:9deg;
  --fx:-110%; --fy:-120%;
  animation-name:fv-pop, fv-hop;
  animation-duration:.8s, 2.2s;
  animation-timing-function:cubic-bezier(.18,1.35,.35,1), ease-in-out;
  /* 出るタイミングは、削除した左のキャラクター（旧 --c2）と同じ .68s にそろえてある
     （2026-08-25 前田社長ご指示）。ふわふわは登場が終わる .68+.8=1.48s ちょうどから始める */
  animation-delay:.68s, 1.48s;
  animation-iteration-count:1, infinite;
  animation-fill-mode:forwards, none;
}
/* 🔴 0% は「登場アニメが終わった姿」と同じにしておく。
   ここが登場の終わり（rotate は --pop-rot）と違う値だと、ふわふわに切り替わる1コマで
   角度だけが飛んで「ガクっ」と見える（実測：縦は0.01pxしか動かないのに角度が1.5度飛んでいた）。
   他の商品が使う fv-sway も同じ作りで、あちらは元から飛んでいない */
@keyframes fv-hop{
  0%,100%{ transform:translateY(0) rotate(var(--pop-rot,0deg)); }
  50%    { transform:translateY(-12px) rotate(calc(var(--pop-rot,0deg) + 3deg)); }
}

/* 紙吹雪 */
.fv__conf{
  position:absolute;
  left:50%; top:50%;
  z-index:0;
  width:16px; height:23px;
  border-radius:3px;
  opacity:0;
  animation:fv-conf .78s cubic-bezier(.12,.95,.25,1) forwards;
}
@keyframes fv-conf{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.1) rotate(0deg); }
  10% { opacity:1; }
  62% { transform:translate(calc(var(--cx) * 1.06),calc(var(--cy) * 1.06)) scale(1.18) rotate(calc(var(--cr) * .8)); }
  100%{ opacity:1; transform:translate(var(--cx),var(--cy)) scale(1) rotate(var(--cr)); }
}
.fv__conf--1 { background:var(--pop-yellow); --cx:3750%; --cy:0%; --cr:-100deg; animation-delay:0.02s; }
.fv__conf--2 { background:var(--ink-invert); --cx:2135%; --cy:449%; --cr:37deg; animation-delay:0.027s; }
.fv__conf--3 { background:var(--pop-sky); --cx:3984%; --cy:460%; --cr:-26deg; animation-delay:0.034s; }
.fv__conf--4 { background:var(--red); --cx:1557%; --cy:1074%; --cr:-89deg; animation-delay:0.041s; }
.fv__conf--5 { background:var(--pop-mint); --cx:1590%; --cy:429%; --cr:48deg; animation-delay:0.048s; }
.fv__conf--6 { background:var(--pop-yellow); --cx:1368%; --cy:1390%; --cr:-15deg; animation-delay:0.055s; }
.fv__conf--7 { background:var(--ink-invert); --cx:1687%; --cy:867%; --cr:-78deg; animation-delay:0.062s; }
.fv__conf--8 { background:var(--pop-sky); --cx:-349%; --cy:1719%; --cr:59deg; animation-delay:0.069s; }
.fv__conf--9 { background:var(--red); --cx:-864%; --cy:837%; --cr:-4deg; animation-delay:0.076s; }
.fv__conf--10{ background:var(--pop-mint); --cx:-283%; --cy:1396%; --cr:-67deg; animation-delay:0.083s; }
.fv__conf--11{ background:var(--pop-yellow); --cx:-2187%; --cy:1347%; --cr:70deg; animation-delay:0.09s; }
.fv__conf--12{ background:var(--ink-invert); --cx:-952%; --cy:968%; --cr:7deg; animation-delay:0.097s; }
.fv__conf--13{ background:var(--pop-sky); --cx:-2617%; --cy:575%; --cr:-56deg; animation-delay:0.104s; }
.fv__conf--14{ background:var(--red); --cx:-4250%; --cy:0%; --cr:81deg; animation-delay:0.111s; }
.fv__conf--15{ background:var(--pop-mint); --cx:-2068%; --cy:307%; --cr:18deg; animation-delay:0.118s; }
.fv__conf--16{ background:var(--pop-yellow); --cx:-3424%; --cy:-424%; --cr:-45deg; animation-delay:0.125s; }
.fv__conf--17{ background:var(--ink-invert); --cx:-2629%; --cy:241%; --cr:92deg; animation-delay:0.132s; }
.fv__conf--18{ background:var(--pop-sky); --cx:-3508%; --cy:-771%; --cr:29deg; animation-delay:0.139s; }
.fv__conf--19{ background:var(--red); --cx:-1747%; --cy:-1117%; --cr:-34deg; animation-delay:0.146s; }
.fv__conf--20{ background:var(--pop-mint); --cx:-1597%; --cy:-519%; --cr:-97deg; animation-delay:0.153s; }
.fv__conf--21{ background:var(--pop-yellow); --cx:-1381%; --cy:-1475%; --cr:40deg; animation-delay:0.16s; }
.fv__conf--22{ background:var(--ink-invert); --cx:-1470%; --cy:-905%; --cr:-23deg; animation-delay:0.167s; }
.fv__conf--23{ background:var(--pop-sky); --cx:495%; --cy:-1739%; --cr:-86deg; animation-delay:0.174s; }
.fv__conf--24{ background:var(--red); --cx:98%; --cy:-1212%; --cr:51deg; animation-delay:0.181s; }
.fv__conf--25{ background:var(--pop-mint); --cx:2124%; --cy:-1131%; --cr:-12deg; animation-delay:0.188s; }
.fv__conf--26{ background:var(--pop-yellow); --cx:620%; --cy:-933%; --cr:-75deg; animation-delay:0.195s; }
.fv__conf--27{ background:var(--ink-invert); --cx:2880%; --cy:-1118%; --cr:62deg; animation-delay:0.202s; }
.fv__conf--28{ background:var(--pop-sky); --cx:1678%; --cy:-1073%; --cr:-1deg; animation-delay:0.209s; }
.fv__conf--29{ background:var(--red); --cx:3517%; --cy:-378%; --cr:-64deg; animation-delay:0.216s; }
.fv__conf--30{ background:var(--pop-mint); --cx:2173%; --cy:-341%; --cr:73deg; animation-delay:0.223s; }

@media (prefers-reduced-motion:reduce){
  .fv__ring{ animation:none; }
  .spin-badge__ring{ animation:none; }
  .movie__tv{ animation:none; }
  .fv__pop,.fv__copy,.fv__conf{ opacity:1; animation:none; }
}

/* ---------- 5-2. メニューの中身 ----------
   ワイヤーは「メニューを開いた状態」で描かれています。
   その開いた見た目をそのまま、右から出るパネルとして置いてあります。
   見せ方（出方・並べ方・大きさ）は変えてかまいません。
   行き先と項目の数は変えないでください（16枠）。
   開け閉めの仕組みは assets/js/menu.js です。 */
.site-menu{
  position:fixed;
  top:var(--header-h);
  right:0;
  z-index:20;
  width:var(--panel-w);
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--panel);
  padding-bottom:var(--gap-m);
  box-shadow:-18px 0 40px rgb(0 0 0 / .12);
  opacity:0;
  transform:translateX(16px);
  transition:opacity .28s, transform .28s;
}
body.is-menu-open .site-menu{ opacity:1; transform:none; }
body.is-menu-open{ overflow:hidden; }
/* 🔴 メニューを開くと本文のスクロールを止める（上の `overflow:hidden`）。
   そのままだと**スクロールバーが消え、その幅ぶん中身が右へ広がって全体がガクッと動く**
   （2026-08-20 前田社長ご指摘。ヘッダーのロゴだけ動かないのは左端に寄っているから）。
   スクロールバーの居場所を最初から空けておけば、消えても幅が変わらない。
   `html` の指定だが、確定ゾーンのSHA256を変えないよう作業ゾーン側に書いている */
html{ scrollbar-gutter:stable; }
.site-menu__head{
  background:var(--bg);
  padding:var(--gap-s) var(--gap-m);
}
.site-menu__head img{ width:100%; }
.site-menu__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line-soft);
  border-block:1px solid var(--line-soft);
}
.site-menu__item{
  background:var(--bg);
  min-height:148px;
  padding:13px 4px;
  display:grid;
  grid-template-rows:auto 1fr;
  justify-items:center;
  gap:var(--gap-xs);
  text-align:center;
  font-size:15px;
  line-height:1.3;
}
.site-menu__icon{
  width:90px; height:90px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--bg-circle);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.site-menu__icon img{ width:100%; height:100%; object-fit:cover; }
.site-menu__item--sns .site-menu__icon img{ width:56%; height:56%; object-fit:contain; }
.site-menu__contact{
  grid-column:1 / -1;
  display:grid;
  place-items:center;
  width:min(100% - var(--gap-m)*2, 356px);
  height:60px;
  margin:var(--gap-m) auto var(--gap-s);
  background:var(--bg);
  border-radius:var(--r-l);
  font-size:20px;
}
.site-menu__bnr{
  display:flex;
  align-items:center;
  gap:var(--gap-s);
  width:calc(100% - var(--gap-m)*2);
  min-height:98px;
  margin:var(--gap-s) auto;
  padding:10px;
  background:var(--bg);
  font-size:20px;
  line-height:1.4;
}
.site-menu__bnr .ph{ width:78px; height:78px; flex:0 0 auto; }
.site-menu__bnr span{ flex:1; text-align:center; }
.site-menu__ec{
  display:block;
  width:calc(100% - var(--gap-m)*2 - 60px);
  margin:var(--gap-s) auto 0;
}

/* 広い画面のメニュー。上から大きな半円がどさっと降りてくる */
@media (min-width:761px){
  .site-menu{
    --mi:clamp(58px,5vw,80px);
    top:0; right:auto; left:50%;
    /* 🔴 上限（旧 `min(1680px,150vw)`）を付けない。
       付けると 1680px より広い画面で**半円が画面の左右に届かず、両脇に地の色が見えて不格好**になる。
       画面幅の1.5倍にしておけば、どの広さでも左右の端まで赤がかかり、
       画面のふちでも高さの約89%が埋まる（中身は下の `76vw` 指定で中央にまとまる） */
    width:150vw;
    height:min(790px,90vh);
    max-height:none;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:clamp(48px,6.4vh,96px) 0 0;
    background:var(--red);
    border-radius:0 0 50% 50% / 0 0 44% 44%;
    box-shadow:0 22px 44px rgb(34 31 32 / .18);
    opacity:1;
    transform:translateX(-50%) translateY(-104%);
    transition:transform .62s cubic-bezier(.22,.92,.3,1.08);
  }
  body.is-menu-open .site-menu{ transform:translateX(-50%) translateY(0); }
  /* 上の帯は出さない。いちばん上の帯はそのまま見せる */
  .site-menu__head{ display:none; }
  /* 下の階のページを、丸いしるしで並べる */
  /* 下の階のページ。点線で細かく区切る */
  .site-menu__grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:0;
    width:min(900px,76vw);
    margin-top:clamp(14px,2.6vh,34px);
    background:transparent;
    border:0;
  }
  .site-menu__item{
    position:relative;
    min-height:0;
    padding:clamp(10px,1.5vh,18px) clamp(4px,.6vw,10px);
    background:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(6px,.9vh,11px);
    color:var(--ink-invert);
    font-family:var(--font-round);
    font-weight:800;
    font-size:clamp(12px,.92vw,15px);
    line-height:1.35;
  }
  .site-menu__item:not(:nth-child(6n)):not(:last-child){
    border-right:2px dashed rgb(255 255 255 / .45);
  }
  .site-menu__item:nth-child(-n+12){
    border-bottom:2px dashed rgb(255 255 255 / .45);
  }
  .site-menu__icon{
    width:var(--mi);
    height:auto;
    aspect-ratio:1;
    background:var(--pop-cream);
    border:3px solid var(--ink);
    transition:transform .24s;
  }
  /* 押したら飛ぶことが分かるように、丸の右下に矢印 */
  .site-menu__item::after{
    content:"→";
    position:absolute;
    top:calc(clamp(10px,1.5vh,18px) + var(--mi) - 24px);
    left:calc(50% + var(--mi) / 2 - 20px);
    display:grid;
    place-items:center;
    width:28px; height:28px;
    border:3px solid var(--ink);
    border-radius:50%;
    background:var(--bg);
    color:var(--red);
    font-size:13px;
    line-height:1;
    transition:transform .24s;
  }
  .site-menu__item:hover .site-menu__icon{ transform:translateY(-6px) rotate(-6deg); }
  .site-menu__item:hover::after{ transform:translate(3px,-3px); }
  /* 下層ページの下に、お問い合わせと帯をまとめて置く */
  .site-menu__foot{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(10px,1.6vh,20px);
    margin-top:clamp(14px,2.6vh,32px);
  }
  /* ほかのお問い合わせと同じ形。赤の上でも見えるように白ぬき */
  .site-menu__contact{
    grid-column:span 2;
    justify-self:center;
    align-self:center;
    display:inline-flex;
    align-items:center;
    gap:clamp(10px,1vw,18px);
    width:auto;
    height:auto;
    margin:0;
    padding:clamp(8px,1vh,12px) clamp(8px,.7vw,12px) clamp(8px,1vh,12px) clamp(18px,1.8vw,30px);
    border:3px solid var(--ink);
    border-radius:999px;
    background:var(--bg);
    font-family:var(--font-round);
    font-weight:800;
    font-size:clamp(13px,1vw,17px);
    letter-spacing:.03em;
    color:var(--ink);
    transition:transform .2s;
  }
  .site-menu__contact-i{
    display:grid;
    place-items:center;
    width:clamp(28px,2.4vw,38px);
    aspect-ratio:1;
    border-radius:50%;
    background:var(--red);
    color:var(--ink-invert);
    font-size:clamp(12px,1vw,16px);
    line-height:1;
    transition:transform .22s;
  }
  .site-menu__contact:hover{ transform:translateY(-3px); }
  .site-menu__contact:hover .site-menu__contact-i{ transform:translateX(3px); }
  .site-menu__foot-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(10px,1.2vw,20px);
    width:min(880px,76vw);
  }
  .site-menu__bnr{
    width:auto;
    min-width:0;
    min-height:0;
    margin:0;
    flex:0 1 236px;
    gap:10px;
    padding:10px 14px 10px 10px;
    border:0;
    border-radius:0;
    background:var(--bg);
    font-family:var(--font-round);
    font-weight:800;
    font-size:clamp(12px,.85vw,14px);
    line-height:1.35;
    transition:transform .2s;
  }
  .site-menu__bnr:hover{ transform:translateY(-3px); }
  .site-menu__bnr .ph{ width:38px; height:38px; }
  .site-menu__ec-link{
    display:block;
    flex:0 1 228px;
    border:0;
    border-radius:0;
    overflow:hidden;
    transition:transform .2s;
  }
  .site-menu__ec-link:hover{ transform:translateY(-3px); }
  .site-menu__ec{
    width:100%;
    margin:0;
  }
}

/* ---------- 6. MESSAGE ---------- */
/* 表紙の赤からそのままつながる帯。中に黄色の枠を置く */
.message{
  padding-block:var(--gap-m) var(--gap-xl);
  background:transparent;
}
.message__box{
  position:relative;
  width:min(100% - var(--gap-m)*2, 1320px);
  margin-inline:auto;
  padding:var(--gap-l);
  border:5px solid var(--red);
  border-radius:44px;
  background:var(--bg);
  box-shadow:0 10px 0 rgb(34 31 32 / .12);
}
.message__head{
  display:block;
  gap:0;
  padding-bottom:0;
  border-bottom:0;
  margin-bottom:var(--gap-m);
  text-align:left;
}
.message__en{
  position:relative;
  display:inline-block;
  font-family:var(--font-pop);
  font-size:clamp(34px,4vw,64px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--ink);
  padding-right:.95em;
}
/* 見出しの右の赤い丸ふたつ（大きいのが上、小さいのが右下） */
.message__en::before,
.message__en::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--red);
}
.message__en::after{ right:.46em;  top:.23em;  width:.25em; height:.25em; }
.message__en::before{ right:.165em; top:.575em; width:.15em; height:.15em; }
.message__ja{
  display:block;
  margin-top:var(--gap-xs);
  font-family:var(--font-round);
  font-size:clamp(17px,1.6vw,26px);
  font-weight:800;
  color:var(--ink);
}
.message__body{
  font-size:clamp(15px,1.15vw,18px);
  line-height:2.05;
  text-align:left;
}
/* キャラクターは右下にひとりだけ */
.message__chara{
  z-index:2;
  position:absolute;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 8px 12px rgb(34 31 32 / .18));
}
/* ヤミーおじさん01。両手を上げた姿で絵の横幅が広いので、旧アセット3（少女）より画布は広い。
   位置は「絵の右端・下端が前と同じところに来る」よう画素で合わせてある */
/* 壺を抱えた姿。透明の余白が無い画像なので、画布＝絵の大きさで指定できる（縦長・比 0.547）。
   🔴 幅は固定pxにしない。ステッカーが vw で縮むのにキャラだけ固定だと、
   タブレット幅（761〜1280px）でキャラがステッカーに覆いかぶさる（画素で実測して発見） */
.message__chara--chef { right:clamp(-20px,-0.6vw,-4px); bottom:-9%; width:clamp(78px,8vw,116px); }

/* ---------- 7. ABOUT US ---------- */
/* セクションの地は流れる帯の中と同じ生成り */
.about{ overflow:hidden; padding-block:0 var(--gap-s); background:var(--pop-cream); }
.about__box{
  position:relative;
  width:min(100% - var(--gap-m)*2, 1320px);
  margin-inline:auto;
  padding:var(--gap-l) var(--gap-m);
  border:0;
  border-radius:var(--r-l);
}
/* 見出しの帯。前の赤い帯にすき間なくつけ、すこしだけ傾ける */
.marquee{
  position:relative;
  z-index:2;
  width:108vw;
  margin-inline:calc(50% - 54vw);
  margin-block:-11px 0;
  padding-block:14px;
  overflow:hidden;
  background:var(--pop-cream);
  border-block:3px solid var(--ink);
  transform:rotate(.62deg);
}
.marquee__inner > span{ white-space:pre; }   /* 末尾の全角あきを消さない */
.marquee__inner{
  display:flex;
  /* 🔴 これが無いと、入れ物の幅（108vw で頭打ち）に対して 50% が計算されるので、
     文字1本分ではなく中途半端な量だけ戻ってしまい、1周ごとに文字がガタッとずれる。
     実測（1440px）＝正しい戻し量 2013.94px に対し、いまは 794.09px しか戻っていなかった。
     幅を中身なりにすると、下の -50% - すきま/2 がちょうど「1本分＋すきま」になる */
  width:max-content;
  /* 🔴 つなぎ目のあきは **CSSの隙間ではなく文字側**（末尾の全角あき）で作る。
     隙間で作ると、1周の戻し量が「幅の50%＋隙間の半分」になり、
     幅の % の丸めのぶんだけ毎周1pxほどずれる（実測1920pxで1.15px）。
     文字側に持たせれば、戻し量はちょうど「幅の50%」＝帯1本ぶんになる */
  gap:0;
  white-space:nowrap;
  font-family:var(--font-pop-en);
  font-size:clamp(38px,6vw,104px);
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.15;
  color:var(--ink);
  /* 1周で戻す量。JSが帯1本の実寸を入れる。JSが動かないときは幅の半分で近似する
     （🔴 `max-content` の幅は中身の合計より1pxほど小さく丸められるため、
        % のままだと1周ごとに1pxだけカクッと動く。実測1920pxで1.14px） */
  --marquee-shift:50%;
  animation:marquee-run 26s linear infinite;
}
@keyframes marquee-run{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-1 * var(--marquee-shift))); }
}
.about__grid{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:var(--gap-l);
  align-items:stretch;
}
/* 大きな縦長の雲。中にキャッチコピーと会社案内を入れる */
.cloud{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--gap-m);
  min-height:100%;
  padding:22% 13% 20% 1%;
}
.cloud__shape{
  position:absolute;
  z-index:0;
  overflow:visible;
  left:-106%; top:-30%;
  width:217%; height:126%;
}
.cloud__shape path{
  fill:var(--bg);
  stroke:var(--ink);
  stroke-width:10;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.cloud__inner{ position:relative; z-index:1; }
.about__lead{
  /* 右は詰めて横幅をかせぐ。左をさらに寄せるのは、画面からはみ出さない広い画面だけ（下の指定） */
  margin:-7% 0 var(--gap-l) -7%;
  font-family:var(--font-pop);
  font-size:clamp(28px,4.5vw,72px);
  line-height:1.55;
  text-align:left;
  /* 🔴 折り返しは <br> の1か所だけにする。
     1文字ずつ span で包んでいるので、幅が足りないと**どこでも改行できてしまう**。
     文字は 4.5vw で伸びるのに入れ物の幅は伸びないため、1600px 以上で
     「食べる”わくわく”」「を」「世界中に」の3行に割れていた（2026-08-20 実測） */
  white-space:nowrap;
}
/* 「食」「世」の頭を、もう一文字ぶん左へ（2026-08-20 前田社長のご要望）。
   🔴 広い画面だけに当てる。1440px 未満で当てると、雲の左余白が足りず
   「食」「世」が画面の外へ 12px はみ出して欠ける（2026-08-20 実測） */
@media (min-width:1441px){
  .about__lead{ margin-left:-14%; }
}
.about__chara{ position:absolute; z-index:3; right:-2%; top:clamp(-104px,-8vw,-64px); width:clamp(96px,10vw,148px); margin:0; }
/* 案内の四角。赤地に白い見出しと丸い矢印、下に写真。境目は波 */
.about__cards{
  position:relative;
  display:grid;
  gap:var(--gap-m);
  align-content:center;
}
.about__card{
  transition:transform .26s cubic-bezier(.18,.9,.3,1.5);
  position:relative;
  display:block;
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:42px;
  background:var(--red);
}
.about__card--main{ aspect-ratio:26/18; margin:0 7% 0 -7%; }
.about__card:hover{ transform:translateY(-12px) scale(1.015); }
.about__chara{ transition:transform .26s cubic-bezier(.18,.9,.3,1.5); }
.about__chara:hover{ transform:translateY(-14px) scale(1.06); }
/* キャッチコピーは一文字ずつ跳ねて出る */
.about__lead-ch{ display:inline-block; opacity:0; }
.about__lead.is-in .about__lead-ch{
  opacity:1;
  animation:lead-pop .52s cubic-bezier(.2,.9,.3,1.6) both;
  animation-delay:calc(var(--i) * .045s);
}
@keyframes lead-pop{
  0%  { opacity:0; transform:translateY(26px) scale(.9); }
  60% { opacity:1; transform:translateY(-6px) scale(1.02); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .about__card, .about__chara{ transition:none; }
  .about__lead-ch{ opacity:1; }
  .about__lead.is-in .about__lead-ch{ animation:none; }
  /* 動きを減らす設定の人には、カタログの縦フォルダを動かさずに最初から見せる。
     🔴 ここを書き忘れると「動かない」ではなく「見えない」になる */
  .catalog__cats.is-armed .cat-panel{
    opacity:1; --enter:0px; --enter-r:0deg; transition-delay:0s;
  }
  /* 持ち上がりも動かさない（高さは変えるが、途中の動きを見せない） */
  .cat-panel{ transition:none; }
}
.about__card--sub { aspect-ratio:5/2; }
.about__card-head{
  position:absolute;
  z-index:2;
  inset:0 0 auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-s);
  padding:5% 6% 0;
  color:var(--ink-invert);
  font-family:var(--font-ja);
  font-weight:900;
  font-size:clamp(19px,2.1vw,34px);
  letter-spacing:.02em;
  line-height:1.25;
}
.about__card-arrow{
  flex:0 0 auto;
  display:grid;
  place-content:center;
  width:clamp(38px,3.8vw,62px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--bg);
  color:var(--red);
  font-size:.72em;
  line-height:1;
}
.about__card-photo{
  position:absolute;
  inset:auto clamp(6px,.55vw,9px) clamp(6px,.55vw,9px);
  display:block;
  height:60%;
  overflow:hidden;
  border-radius:34px;
}
.about__card-photo img{ width:100%; height:100%; object-fit:cover; }
.about__card-wave{
  position:absolute;
  left:0; top:-1px;
  width:100%;
  height:clamp(26px,3.6vw,54px);
  fill:var(--red);
}

/* ---------- 8. CATALOG ---------- */
/* 全体をフォルダに見立てる。左上に「つまみ」が出て、その下からが白い面。
   輪郭は黒い線でぐるっと見せる */
.catalog{
  position:relative;
  background:var(--pop-cream);
  padding-block:clamp(46px,5vw,96px) 0;
  --fold-h:  clamp(36px,3.6vw,68px);
  --fold-w:  clamp(190px,26%,460px);
  --fold-r:  clamp(14px,1.6vw,28px);
  --fold-f:  clamp(16px,1.8vw,32px);
  --fold-b:  3px;
}
.catalog__folder{
  position:relative;
  margin-top:var(--fold-h);
  padding-block:clamp(38px,4.2vw,78px) 0;
  background:var(--bg);
  border-top:var(--fold-b) solid var(--ink);
}
/* つまみ本体。下だけ線を抜いて、白い面の線とつなげる */
.catalog__folder::before{
  content:"";
  position:absolute;
  left:0; top:calc(-1 * var(--fold-h));
  width:var(--fold-w); height:var(--fold-h);
  background:var(--bg);
  border:var(--fold-b) solid var(--ink);
  border-bottom:0;
  border-radius:var(--fold-r) var(--fold-r) 0 0;
}
/* つまみの右のくぼみ。中を抜いて、ふちに黒い線を回す */
.catalog__folder::after{
  content:"";
  position:absolute;
  left:calc(var(--fold-w) - var(--fold-b));
  top:calc(-1 * var(--fold-f));
  width:var(--fold-f); height:var(--fold-f);
  background:radial-gradient(circle at 100% 0,
    #0000 calc(var(--fold-f) - var(--fold-b)),
    var(--ink) calc(var(--fold-f) - var(--fold-b)),
    var(--ink) var(--fold-f),
    var(--bg) var(--fold-f));
}
/* 見出しはごあいさつの見出しと同じ組み方（赤い丸ふたつ） */
/* 見出しは message と同じ組み方。英字の下に日本語を一行 */
.catalog__title{
  display:block;
  font-family:var(--font-pop);
  font-size:clamp(34px,4vw,64px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--ink);
}
.catalog__title-en{
  position:relative;
  display:inline-block;
  padding-right:.95em;
}
.catalog__title-en::before,
.catalog__title-en::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--red);
}
.catalog__title-en::after { right:.46em;  top:.23em;  width:.25em; height:.25em; }
.catalog__title-en::before{ right:.165em; top:.575em; width:.15em; height:.15em; }
.catalog__title-ja{
  display:block;
  margin-top:var(--gap-xs);
  font-family:var(--font-round);
  font-size:clamp(17px,1.6vw,26px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:.02em;
  color:var(--ink);
}

.catalog__grid{
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:clamp(24px,3.4vw,72px);
  align-items:end;
  margin-top:clamp(24px,2.6vw,48px);
}
.catalog__left{
  display:grid;
  justify-items:start;
  gap:clamp(20px,2.4vw,40px);
  padding-bottom:clamp(38px,4.2vw,78px);
}
.catalog__visual{
  width:100%;
  aspect-ratio:4/4.15;
  border:3px solid var(--ink);
  border-radius:26px;
  overflow:hidden;
  background:var(--pop-cream);
  transform:rotate(-1.1deg);
  box-shadow:9px 11px 0 rgb(34 31 32 / .13);
}
/* 仮画像がA4縦のカタログ表紙なので、枠も縦長にして切らずに収める。
   本番写真（横位置）が届いたら aspect-ratio を 4/3 に戻し cover にしてよい */
.catalog__visual img{ width:100%; height:100%; object-fit:contain; }
/* 赤い楕円のボタン。右はしに白い丸、その中に赤い矢印 */
.btn-round{
  display:inline-flex;
  align-items:center;
  gap:clamp(14px,1.4vw,24px);
  height:clamp(58px,4.6vw,76px);
  padding-inline:clamp(24px,2.4vw,40px) clamp(8px,.7vw,12px);
  border:0;
  border-radius:999px;
  background:var(--red);
  color:var(--ink-invert);
  font-family:var(--font-round);
  font-weight:800;
  font-size:clamp(16px,1.35vw,21px);
  letter-spacing:.05em;
  margin-left:clamp(20px,5%,64px);
  transition:transform .2s;
}
.btn-round__arrow{
  display:grid;
  place-items:center;
  width:clamp(42px,3.4vw,56px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--bg);
  color:var(--red);
  font-size:clamp(15px,1.2vw,20px);
  transition:transform .22s;
}
.btn-round:hover{ transform:translateY(-3px); }
.btn-round:hover .btn-round__arrow{ transform:translateX(3px); }

/* 縦のフォルダ。右へずらして重ねて積む。
   マウスをのせると前に出て持ち上がり、上のつまみが見える */
.catalog__cats{
  position:relative;
  align-self:stretch;
  /* 🔴 カテゴリの枚数はここだけで決まる（2026-08-20 可変化）。
     ＝＝ 増やし方 ＝＝
       ① index.html の `.cat-panel`（<a>1行）をコピーして枚数を増やす
       ② この `--cat-n` を新しい枚数にする
     この2手だけ。幅・ずらし量・色・重ね順は下で自動で決まる。
     現行サイトのカタログは7カテゴリあるので、5枚のままだと足りない見込み（実測 2026-08-20） */
  --cat-n: 5;
  --cat-band: calc(100% / var(--cat-n));        /* 見えている帯1本の幅 */
  --cat-s: var(--cat-band);                     /* 1枚ずつ右へずらす量 */
  --cat-w: calc(var(--cat-band) * 1.4);         /* フォルダ1枚の幅（帯＋隣に隠れる分）。
                                                   1.4 は「帯 : 隠れる分 = 5 : 2」。枚数が変わっても比率は保たれる */
  --cat-h: clamp(30px,3.2vw,58px);
  --cat-r: clamp(12px,1.3vw,22px);
  --cat-f: clamp(14px,1.5vw,26px);
  /* くぼみの弧の半径。黒ふちの中心を通す半径なので、ふちの半分だけ内側に取る */
  --cat-nr: calc(var(--cat-f) - var(--cat-b) / 2);
  --cat-b: 3px;    /* 黒いふちの太さ */
  --cat-tw: 58%;   /* つまみの幅（フォルダ1枚に対して）。
                      見えている帯（--cat-band ÷ --cat-w ＝ 71.4%）より狭くしないと、
                      つまみの右端が隣のフォルダの後ろに隠れる */
  --cat-pr: 8%;   /* 隠れている分。中身を「見えている帯」のまんなかに寄せる */
  /* つまみの分（--cat-h）＋ 持ち上がる分（--cat-h）の場所を空けておく。
     参考サイトも `--offset:6rem` に対して `padding-top:8rem` と、持ち上がる分より多く取っている */
  margin-top:calc(var(--cat-h) * 2);
}
.cat-panel{
  position:absolute;
  top:0; bottom:0;
  left:calc(var(--i) * var(--cat-s));
  width:var(--cat-w);
  z-index:var(--z);
  display:flex;
  flex-direction:column;
  align-items:center;
  /* 中身は「見えている帯」のまんなかに来るように寄せる */
  padding:clamp(22px,2.4vw,44px) var(--cat-pr) clamp(22px,2.4vw,44px) 0;
  /* 🔴 上ふちは `border-top` で引かない。引くと**つまみの下を黒い線が横切る**。
     つまみの右側だけに上ふちが要るので、背景の帯として必要な範囲にだけ描く。
     左上の丸みは**つまみ側**が持つので、帯の左上は角のまま（参考サイトも `border-radius:0 1.5rem 0 0`） */
  background-color:var(--c);
  /* 上ふちを引き始めるのは**くぼみが終わったところ**（つまみの幅＋くぼみの幅）。
     🔴 `background-position` で位置を決めてはいけない。
        位置指定の % は「入れ物の幅」ではなく「**入れ物の幅 − 画像の幅**」に対して効くので、
        同じ数字を書いても線が左へずれる（実測：131pxのつもりが95pxから引かれていた・2026-08-20）。
        グラデーションの**色の切り替わり位置**で決めれば、% は素直に入れ物の幅に対して効く */
  background-image:linear-gradient(to right,
    #0000 calc(var(--cat-tw) - var(--cat-b) / 2 + var(--cat-nr) - var(--cat-b) / 2), var(--ink) 0);
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:100% var(--cat-b);
  border:var(--cat-b) solid var(--ink);
  border-top:0;
  border-bottom:0;
  /* 🔴 角を丸めない。丸めると背景で引いた上ふちが角で切られ、**右上に線の欠け**ができる。
     丸みはつまみ側が持っているので、本体は角のままでよい（紙のフォルダも本体は直角） */
  border-radius:0;
  /* 動きは2つある。
     ①持ち上がる … `top` を上へ伸ばす。**下辺は動かさない**。
        🔴 transform で持ち上げると (a) 下が次の赤いセクションから離れて浮く
           (b) 図形がカーソルの下から逃げて hover が外れ、戻り、また外れ…と高速で往復する
           （2026-08-20 実測：下端から46px以内にカーソルを置くと再現）
        参考サイトは transform ＋ 下に同色の板を継ぎ足す方式だが、
        `top` で伸ばせば継ぎ足し自体が要らないので、こちらを採る
     ②画面に入ったときにめくれて出てくる … transform（下の `--enter` 系）
     ①と②で使う仕組みを分けてあるので、互いを打ち消さない */
  --lift:0px;
  --enter:0px;     /* 登場のときだけ下にずらす分 */
  --enter-r:0deg;  /* 登場のときだけ傾ける分 */
  top:var(--lift);
  transform-origin:bottom left;
  transform:translateY(var(--enter)) rotate(var(--enter-r));
  transition:top .8s cubic-bezier(.19,1,.22,1), transform .34s cubic-bezier(.2,.9,.3,1.35),
             opacity .34s ease;
}
/* 何枚目か（左からの位置と重ね順）。12枚ぶん用意してある。
   JSでは決めていない＝**JavaScriptが動かない環境でも並ぶ** */
.cat-panel:nth-child(1){ --i:0;  --z:1;  }
.cat-panel:nth-child(2){ --i:1;  --z:2;  }
.cat-panel:nth-child(3){ --i:2;  --z:3;  }
.cat-panel:nth-child(4){ --i:3;  --z:4;  }
.cat-panel:nth-child(5){ --i:4;  --z:5;  }
.cat-panel:nth-child(6){ --i:5;  --z:6;  }
.cat-panel:nth-child(7){ --i:6;  --z:7;  }
.cat-panel:nth-child(8){ --i:7;  --z:8;  }
.cat-panel:nth-child(9){ --i:8;  --z:9;  }
.cat-panel:nth-child(10){ --i:9;  --z:10; }
.cat-panel:nth-child(11){ --i:10; --z:11; }
.cat-panel:nth-child(12){ --i:11; --z:12; }
/* 色は5色を順に繰り返す。何枚でも自動で色がつく（参考サイトも同じやり方で6色を回している） */
.cat-panel:nth-child(5n+1){ --c:var(--pop-sky); }
.cat-panel:nth-child(5n+2){ --c:var(--pop-mint); }
.cat-panel:nth-child(5n+3){ --c:var(--pop-yellow); }
.cat-panel:nth-child(5n+4){ --c:var(--pop-orange); }
.cat-panel:nth-child(5n+5){ --c:var(--red); }
/* いちばん右の1枚だけは、隠れる分が無いので帯の幅ちょうど */
.cat-panel:last-child{ width:var(--cat-band); padding-right:0; }
/* つまみ本体。**常に出ている**（2026-08-20 前田社長判断・参考サイト踏襲）。
   出したり消したりしないので、残像の起きる余地がそもそも無い */
.cat-panel::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--cat-b)); top:calc(-1 * var(--cat-h));
  width:calc(var(--cat-tw) + var(--cat-b));
  height:var(--cat-h);
  background:var(--c);
  /* 帯の側に上ふちが無いので、つまみは重ねず**ぴったり接する**だけでよい。
     🔴 過去に試して外した2案：
        ・つまみを3px下へ伸ばす → つまみの右ふちも下へ出て**黒い点**になる
        ・つまみに影を落として上ふちを塗りつぶす → 帯の左ふちが3px**欠ける**
        どちらも画素で確認済み（2026-08-20） */
  border:var(--cat-b) solid var(--ink);
  border-bottom:0;
  border-radius:var(--cat-r) var(--cat-r) 0 0;
  /* つまみの出し方（2026-08-20 前田社長ご指摘で2回直した箇所）
     ① `transform:translateY(12px)` … つまみの上ふちが帯の中に入り込み、
        カテゴリ名の上を黒い線が横切って見えた → やめた
     ② 透明度だけで出す … 帯が降りきる前につまみだけ先に消え、宙に浮いた黒いふちが残った → やめた
     ③ 帯の上ふちで切り抜く … 今度は出るときに黒いふちが残った → やめた
     ④ いま＝**そもそも出し入れしない（常設）**。参考サイト（フェリシモ GO PEACE）と同じ考え方。
        出入りの瞬間が無いので、残像が起きる余地が構造的に無い */
}
/* つまみの右のくぼみ ── **塗りだけ**を受け持つ。
   🔴 黒い弧をグラデーションで描いてはいけない。
      グラデーションの色の切り替わりは**なめらかに処理されない**ので、弧がガビガビになる
      （2026-08-20 前田社長ご指摘）。線は下の `.cat-panel__notch`（SVG）が描く。
   塗りの境目は弧の**真ん中**に置いてあるので、ギザつきは線の下に隠れる */
.cat-panel::after{
  content:"";
  position:absolute;
  /* 🔴 左端は**つまみの右ふちの内側**まで伸ばす。
     ここまで覆わないと、つまみの右ふちが弧の始まりより下へ 1.5px はみ出して細い線に見える */
  left:calc(var(--cat-tw) - var(--cat-b));
  top:calc(var(--cat-b) / 2 - var(--cat-nr));
  width:calc(var(--cat-nr) + var(--cat-b) / 2);
  /* 下端は上ふちの線の**下**まで伸ばす。線のちょうど真ん中で切ると、
     弧の終わり際（線がほぼ水平になるところ）に細いトゲが残る */
  height:calc(var(--cat-nr) + var(--cat-b) / 2);
  /* 半径は数値で指定する。`closest-side` は中心が角にあると距離0になり、
     まっ平らに塗りつぶされてしまう（2026-08-20 実際にそうなった） */
  /* 境目は弧の中心より 1px 内側。ここを弧のちょうど真ん中に置くと、
     弧の終わり際（線がほぼ水平になるところ）で境目が長く寝てしまい、
     細いトゲのように見える（2026-08-20 実際に出た） */
  background:radial-gradient(circle calc(var(--cat-nr) - 1px) at 100% 0, #0000 100%, var(--c) 100%);
}
/* くぼみの黒い弧。SVGなので、始まりも終わりも途中もなめらかに出る。
   参考サイト（フェリシモ GO PEACE）も、この形はSVGのパスで描いている。
   位置は「つまみの右ふちの中心」から「上ふちの線の中心」へ、ちょうど渡るように取ってある */
.cat-panel__notch{
  position:absolute;
  /* 🔴 `::after` は**中身より後**に描かれるので、指定しないと塗りが弧の上に乗って線が消える
     （2026-08-20 実際に弧が 0.25px まで削れた）。弧は必ず塗りより前に出す */
  z-index:1;
  left:calc(var(--cat-tw) - var(--cat-b) / 2);
  top:calc(var(--cat-b) / 2 - var(--cat-nr));
  width:var(--cat-nr); height:var(--cat-nr);
  overflow:visible;      /* 線の太さぶんが外へ出るので切らない */
  pointer-events:none;
}
.cat-panel__notch path{
  fill:none;
  stroke:var(--ink);
  stroke-width:var(--cat-b);
  /* 拡大しても線の太さを変えない（＝どの画面幅でも黒ふちと同じ太さ） */
  vector-effect:non-scaling-stroke;
  /* 🔴 継ぎ目に髪の毛ほどの隙間が残らないよう、パス側に**のりしろ**を足してある
     （`M0,-22 L0,0 … L122,100`）。つまみの右ふちと上ふちの線に少しずつ重ねる。
     端の形（`stroke-linecap`）で寄せる手もあるが、重なる量を数値で決められるこちらにした
     （2026-08-20 8倍に拡大して画素で確認） */
}

/* ---- 持ち上がり方（2026-08-20 参考サイト踏襲に切り替え） ----
   🔴 `:hover` を**動く要素に付けない**。板が動くとカーソルの下から逃げてホバーが外れ、
      戻ってまた外れ…と往復する。参考サイトは判定を**動かない親**に持たせ、
      状態を `data-distance` 属性で配っている。それをそのまま踏襲した。
   当てた板が0、その隣が1。0はいちばん高く、1は控えめに持ち上がる（波のように動く）。
   解除は**帯全体からカーソルが出たときだけ**なので、板から板へ移っても途切れない */
.catalog__cats .cat-panel[data-distance="0"]{ --lift:calc(-1 * var(--cat-h)); z-index:9; }
.catalog__cats .cat-panel[data-distance="1"]{ --lift:calc(-0.38 * var(--cat-h)); }
/* キーボードで辿るときも同じ高さまで上げる */
.cat-panel:focus-visible{ --lift:calc(-1 * var(--cat-h)); z-index:9; }

/* ---- 画面に入ったときの登場（JSが `is-armed` を付けたときだけ効く） ----
   JSが動かない環境では `is-armed` が付かないので、最初から見えている＝消えない */
.catalog__cats.is-armed .cat-panel{
  opacity:0;
  --enter:52px;
  --enter-r:-4deg;
  transition-delay:calc(var(--i) * .09s);
}
.catalog__cats.is-armed.is-in .cat-panel{
  opacity:1;
  --enter:0px;
  --enter-r:0deg;
}
.cat-panel__label{
  writing-mode:vertical-rl;
  font-family:var(--font-round);
  font-weight:800;
  font-size:clamp(15px,1.3vw,23px);
  letter-spacing:.24em;
  line-height:1;
  color:var(--ink);
}
.cat-panel__arrow{
  margin-top:auto;
  display:grid;
  place-items:center;
  width:clamp(30px,2.5vw,44px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--bg);
  color:var(--ink);
  font-size:clamp(13px,1vw,17px);
  transition:transform .26s;
}
/* 矢印も、当てた1枚だけ（`:hover` ではなく親が配る印で判定する。上と同じ理由） */
.cat-panel[data-distance="0"] .cat-panel__arrow{ transform:scale(1.14); }

/* 表紙と同じ、くるくる回る丸。うすい色の空間にひとつ置く */
.spin-badge{
  position:absolute;
  z-index:4;
  right:clamp(18px,5vw,110px);
  top:calc(clamp(46px,5vw,96px) + var(--fold-h));
  transform:translateY(-50%);
  width:clamp(112px,12vw,186px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--pop-cream);
  box-shadow:0 6px 0 rgb(34 31 32 / .13);
  pointer-events:none;
}
.spin-badge__ring{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  animation:spin-badge 22s linear infinite;
}
@keyframes spin-badge{ to{ transform:rotate(360deg); } }
.spin-badge__ring text{
  font-family:var(--font-pop-en);
  font-size:40px;
  font-weight:800;
  fill:var(--pop-ring);
}
.spin-badge__chara{ position:relative; width:46%; }

/* ---------- 9. MOVIE ---------- */
/* 赤い地の上に、白い大きな角丸の四角。中身はその中に入れる */
.movie{
  /* 上は赤、途中から生成りに切りかわる（境目はきっぱり） */
  background:linear-gradient(var(--red) 0 var(--m-split), var(--pop-cream) var(--m-split) 100%);
  --m-split:62%;
  padding-block:clamp(56px,6vw,110px);
}
.movie__panel{
  position:relative;
  background:var(--bg);
  border:0;
  border-radius:clamp(28px,3.4vw,56px);
  padding:clamp(28px,3.2vw,58px) clamp(18px,2.4vw,50px) clamp(34px,3.8vw,66px);
}
.movie__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-m);
  margin-bottom:clamp(18px,2.2vw,38px);
}
/* 見出しはほかのかたまりと同じ組み方（赤い丸ふたつ） */
.movie__title{
  display:block;
  font-family:var(--font-pop);
  font-size:clamp(34px,4vw,64px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--ink);
  margin-left:clamp(10px,2vw,42px);
}
.movie__title-en{
  position:relative;
  display:inline-block;
  padding-right:.95em;
}
.movie__title-en::before,
.movie__title-en::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--red);
}
.movie__title-en::after { right:.46em;  top:.23em;  width:.25em; height:.25em; }
.movie__title-en::before{ right:.165em; top:.575em; width:.15em; height:.15em; }
.movie__title-ja{
  display:block;
  margin-top:var(--gap-xs);
  font-family:var(--font-round);
  font-size:clamp(17px,1.6vw,26px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:.02em;
  color:var(--ink);
}
/* テレビの絵ぜんたいが、動画の置き場へ行くボタン。
   絵の画面部分はすき通った穴なので、うしろに黄色い面を敷いて画面にする */
.movie__tv{
  z-index:2;
  position:relative;
  flex:0 0 auto;
  width:min(26vw,310px);
  animation:tv-bob 3.2s ease-in-out infinite;
}
/* ずっとぴこぴこ揺れる。マウスをのせると大きく速くなる */
@keyframes tv-bob{
  0%,100%{ transform:translateY(0) rotate(-1.3deg); }
  50%    { transform:translateY(-9px) rotate(1.3deg); }
}
@keyframes tv-hop{
  0%,100%{ transform:translateY(-5px) rotate(-2.6deg); }
  50%    { transform:translateY(-17px) rotate(2.6deg); }
}
.movie__tv:hover{ animation-name:tv-hop; animation-duration:.9s; }
.movie__tv img{ position:relative; z-index:1; display:block; width:100%; }
/* 画面。まわりのふちが上にかぶさって、穴の形に切り抜かれて見える */
.movie__tv-screen{
  position:absolute;
  inset:29% 25% 17% 5%;
  border-radius:10%;
  background-color:var(--pop-yellow);
  background-image:
    radial-gradient(circle, rgb(255 255 255 / .48) 22%, #0000 23%),
    radial-gradient(circle, rgb(255 255 255 / .48) 22%, #0000 23%);
  background-size:30% 34%, 30% 34%;
  background-position:0 0, 15% 17%;
}
.movie__tv-text{
  position:absolute;
  z-index:2;
  left:7%; right:28.3%; top:39%;
  text-align:center;
  font-family:var(--font-pop);
  font-weight:400;
  font-size:clamp(12px,.88vw,15px);
  line-height:1.62;
  letter-spacing:.01em;
  color:var(--ink);
}
/* 画面の下の赤いボタン */
.movie__tv-go{
  position:absolute;
  z-index:2;
  left:11%; right:32%;
  bottom:23%;
  display:flex;
  align-items:center;
  justify-content:center;
  height:clamp(28px,2.6vw,38px);
  padding-inline:3px;
  border-radius:999px;
  background:var(--red);
  color:var(--ink-invert);
  font-family:var(--font-round);
  font-weight:800;
  font-size:clamp(12px,.95vw,15px);
  line-height:1;
  transition:transform .22s;
}
/* 丸は右はしに置いて、文字はボタンのまんなかにそろえる */
.movie__tv-go-i{
  position:absolute;
  right:3px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:clamp(20px,1.8vw,28px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--bg);
  color:var(--red);
  font-size:clamp(12px,.95vw,15px);
  line-height:1;
}
.movie__tv:hover .movie__tv-go{ transform:scale(1.06); }

/* まんなかを大きく、両わきに次のものを少しだけ見せる */
.movie__carousel{
  position:relative;
  --m-w:   58%;   /* まんなかの1枚の幅 */
  --m-gap: -18%;  /* 1枚どうしの寄せ。両わきを近くに置くためマイナス */
  --m-pad: 21%;   /* まんなかに来るまでの寄せ */
  --m-step:40%;   /* 1枚送るときに動く量（幅＋寄せ） */
  --m-side:.32;   /* 両わきの小ささ。切らずに全部見せる */
  --m-navw:clamp(44px,4.2vw,68px); /* 送りの丸の大きさ */
}
.movie__stage{
  overflow:hidden;
  padding-block:clamp(8px,1vw,18px);
}
.movie__track{
  display:flex;
  width:100%;
  transform:translateX(calc(var(--m-pad) - var(--n,0) * var(--m-step)));
  transition:transform .55s cubic-bezier(.3,.9,.3,1);
}
.movie__slide{
  flex:0 0 var(--m-w);
  margin-right:var(--m-gap);
  transform:scale(var(--m-side));
  opacity:.82;
  transition:transform .55s cubic-bezier(.3,.9,.3,1), opacity .45s;
}
.movie__slide.is-on{ transform:scale(1); opacity:1; z-index:1; }
/* 端まで送って先頭へ戻すときは、位置も大きさも「瞬間で」戻す。
   🔴 トラックだけ止めてもだめ。`is-on` が別の要素へ移るので、
   止め忘れると**前の1枚が縮み、次の1枚が膨らむ**動きが一瞬見えてしまう
   （2026-08-20 前田社長ご指摘の「一瞬縮小して元に戻る」の正体）。
   `!important` は使わない決まりなので、クラスを重ねて詳細度で勝たせている */
.movie__carousel.is-snapping .movie__track,
.movie__carousel.is-snapping .movie__slide{ transition:none; }
/* 小さいほうは黒いふちが細くなりすぎるので、縮む分だけ先に太くしておく */
.movie__slide:not(.is-on) .movie__frame{ border-width:calc(3px / var(--m-side)); }
.movie__slide:not(.is-on) .movie__play{ display:none; }
.movie__frame{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:clamp(14px,1.8vw,28px);
  background:var(--bg-grey);
}
.movie__frame img{ width:100%; height:100%; object-fit:cover; }
/* まんなかの再生の丸 */
.movie__play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:block;
  width:clamp(46px,5vw,84px);
  aspect-ratio:1;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--red);
}
.movie__play::after{
  content:"";
  position:absolute;
  left:54%; top:50%;
  transform:translate(-50%,-50%);
  width:34%; height:38%;
  background:var(--ink-invert);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
/* 送りの矢印 */
.movie__nav{
  position:absolute;
  z-index:2;
  top:50%;
  display:grid;
  place-items:center;
  width:var(--m-navw);
  aspect-ratio:1;
  padding:0;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--pop-yellow);
  color:var(--ink);
  font-family:var(--font-round);
  font-weight:800;
  font-size:clamp(17px,1.5vw,24px);
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
  transition:transform .2s, opacity .2s;
}
/* 両わきの小さい四角と、まんなかの四角のあいだにまたがせる */
.movie__nav--prev{ left:calc(var(--m-pad) - 1% - var(--m-navw) / 2); }
.movie__nav--next{ right:calc(var(--m-pad) - 1% - var(--m-navw) / 2); }
.movie__nav:hover{ transform:translateY(-50%) scale(1.12); }

/* ---------- 10. Sustainability ---------- */
/* 動画のところの下半分と同じ生成りを、切れ目なくそのまま続ける */
.sustainability{
  background:var(--pop-cream);
  padding-block:0 clamp(56px,6vw,110px);
}
/* 大きな角丸の写真そのものが入れもの。中身はこの上に置く */
.sus__panel{
  position:relative;
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:clamp(28px,3.4vw,56px);
}
.sus__photo{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* 写真の上に暗い幕。左が濃く、右へ抜ける */
.sus__panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    rgb(24 20 20 / .84) 0 34%,
    rgb(24 20 20 / .64) 64%,
    rgb(24 20 20 / .42) 100%);
}
.sus__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:clamp(340px,33vw,520px);
  padding:clamp(34px,4.4vw,80px) clamp(24px,4vw,78px);
  color:var(--ink-invert);
}
/* 見出しはほかのかたまりと同じ組み方（赤い丸ふたつ） */
.sus__title{
  display:block;
  font-family:var(--font-pop);
  font-size:clamp(30px,3.4vw,54px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.02em;
  color:var(--ink-invert);
}
.sus__title-en{
  position:relative;
  display:inline-block;
  padding-right:.95em;
}
.sus__title-en::before,
.sus__title-en::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--red);
}
.sus__title-en::after { right:.46em;  top:.23em;  width:.25em; height:.25em; }
.sus__title-en::before{ right:.165em; top:.575em; width:.15em; height:.15em; }
.sus__title-ja{
  display:block;
  margin-top:var(--gap-xs);
  font-family:var(--font-round);
  font-size:clamp(17px,1.6vw,26px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:.02em;
  color:var(--ink-invert);
}
.sus__body{
  max-width:34em;
  margin-block:clamp(16px,1.8vw,30px) clamp(22px,2.6vw,40px);
  font-family:var(--font-round);
  font-size:clamp(14px,1.05vw,17px);
  font-weight:500;
  line-height:2.1;
  color:var(--ink-invert);
}
.sus__btn{ margin-left:0; }
.btn-more{
  display:inline-grid;
  place-items:center;
  width:92px; height:38px;
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:var(--bg);
  font-family:var(--font-en);
  font-size:17px;
}

/* ---------- 11. バナー2枚 ---------- */
/* 取り組みのところから生成りをそのまま続ける */
.bnr-sec{
  position:relative;
  background:var(--pop-cream);
  padding-block:clamp(34px,4vw,72px) clamp(56px,6vw,110px);
}
.bnr-stack{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(20px,2.4vw,40px);
}
/* 帯そのものが押せる。もらった帯をそのまま置くだけ */
.bnr{
  display:block;
  width:min(100%,900px);
  transition:opacity .2s;
}
.bnr img{
  display:block;
  width:100%; height:auto;
}
.bnr:hover{ opacity:.86; }

/* 1枚の帯を左右2つの行き先に分けている間だけの指定。
   本番バナー2枚が届いたら、このブロックごと消して .bnr を2つ並べる */
.bnr--split{ position:relative; }
.bnr--split:hover{ opacity:1; }   /* 帯ぜんたいは暗くしない。押した先が2つあるので範囲ごとに反応させる */
.bnr__area{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  transition:background-color .2s;
}
.bnr__area--l{ left:0; }
.bnr__area--r{ right:0; }
.bnr__area:hover{ background-color:rgb(255 255 255 / .18); }
.bnr__area:focus-visible{ outline:3px solid var(--red); outline-offset:-3px; }

/* 那尚香さんが作った文字のシール。かたむけて、ぽんと置く */
.sticker{
  position:absolute;
  z-index:3;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 8px 16px rgb(34 31 32 / .16));
}
.sticker--message{
  z-index:1;
  width:clamp(104px,13vw,200px);
  right:clamp(40px,10vw,150px);
  bottom:clamp(18px,3.6vw,64px);
  transform:rotate(7deg);
}
/* 761〜900px は本文が最終行まで伸びてステッカーに届き、末尾の文字が隠れる。
   ステッカーを下げるだけだと箱からのはみ出しが41%になり、760px以下の24%より目立つ。
   そこで箱の下に余白を足してステッカーの居場所を作り、はみ出し量は760px以下に揃える。
   900pxを超えると本文の最終行が短くなって当たらなくなるので、そこは元のまま。 */
@media (min-width:761px) and (max-width:900px){
  .message__box{ padding-bottom:calc(var(--gap-l) + 44px); }
  .sticker--message{ bottom:-26px; }
}
.sticker--movie{
  z-index:1;
  width:clamp(92px,10.5vw,162px);
  left:clamp(180px,71%,920px);
  top:clamp(26px,4.4vw,104px);
  transform:rotate(-8deg);
}
.sticker--bnr{
  width:clamp(104px,12vw,186px);
  right:clamp(6px,4vw,90px);
  bottom:clamp(-48px,-3.4vw,-20px);
  transform:rotate(9deg);
}

/* ---------- 12. Contact ---------- */
/* 赤い地の上に、白い大きな角丸の四角。中身はその中に入れる */
.contact{
  background:var(--red);
  padding-block:clamp(48px,5.4vw,96px) clamp(56px,6vw,110px);
  text-align:center;
}
.contact__panel{
  background:var(--bg);
  border-radius:clamp(28px,3.4vw,56px);
  padding:clamp(34px,4vw,72px) clamp(20px,3vw,60px) clamp(38px,4.4vw,78px);
}
/* 見出しはほかのかたまりと同じ組み方（赤い丸ふたつ） */
.contact__title{
  display:block;
  font-family:var(--font-pop);
  font-size:clamp(30px,3.6vw,58px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.02em;
  color:var(--ink);
}
.contact__title-en{
  position:relative;
  display:inline-block;
  padding-right:.95em;
}
.contact__title-en::before,
.contact__title-en::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--red);
}
.contact__title-en::after { right:.46em;  top:.23em;  width:.25em; height:.25em; }
.contact__title-en::before{ right:.165em; top:.575em; width:.15em; height:.15em; }
.contact__lead{
  margin-top:clamp(10px,1.2vw,18px);
  font-family:var(--font-round);
  font-weight:500;
  font-size:clamp(13px,1vw,17px);
  line-height:1.95;
}
.contact__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,1.8vw,32px);
  margin-top:clamp(24px,2.8vw,46px);
}
/* ふたつの小箱。生成り＋黒ふちの角丸 */
.contact__col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,2.6vw,44px) clamp(14px,1.8vw,30px);
  background:var(--pop-cream);
  border:3px solid var(--ink);
  border-radius:clamp(20px,2.2vw,38px);
}
.contact__col + .contact__col{ border-left:3px solid var(--ink); }
.contact__col h3{
  font-family:var(--font-round);
  font-size:clamp(14px,1.15vw,19px);
  font-weight:800;
  letter-spacing:.02em;
}
.contact__btn{ margin-left:0; margin-top:clamp(14px,1.6vw,26px); }
.contact__note{
  margin-top:clamp(10px,1vw,16px);
  font-family:var(--font-round);
  font-weight:500;
  font-size:clamp(12px,.85vw,14px);
}
.contact__tel{
  margin-top:clamp(8px,1vw,16px);
  font-family:var(--font-pop);
  font-size:clamp(22px,2.4vw,40px);
  line-height:1.15;
  letter-spacing:.01em;
}
.contact__hours{
  margin-top:clamp(6px,.7vw,12px);
  font-family:var(--font-round);
  font-weight:700;
  font-size:clamp(12px,.9vw,15px);
}
.btn-contact{
  display:grid;
  place-items:center;
  width:min(100%,264px);
  height:56px;
  margin:var(--gap-s) auto 0;
  background:var(--bg);
  border-radius:var(--r-l);
  font-size:18px;
}

/* ---------- 13. フッター ---------- */
/* 上のかたまりの赤をそのまま続けて、大きな白い半円で切り取る */
.site-footer{
  position:relative;
  background:var(--red);
  padding-block:clamp(120px,13vw,240px) var(--gap-m);
  text-align:center;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  left:50%; top:0;
  width:150vw;
  aspect-ratio:1;
  transform:translateX(-50%);
  background:var(--bg);
  border-radius:50%;
  pointer-events:none;
}
.site-footer > *{ position:relative; }
.site-footer__logo img{ width:min(60vw,818px); }
.footer__offices{
  display:flex;
  justify-content:center;
  gap:var(--gap-xl);
  margin-top:var(--gap-m);
  text-align:left;
  font-size:17px;
}
.footer__nav{
  margin-top:var(--gap-m);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap-xs) var(--gap-s);
  max-width:900px;
  margin-inline:auto;
  font-size:15px;
}
.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--gap-m);
  margin-top:var(--gap-m);
}
.footer__sns{ display:flex; gap:var(--gap-s); }
.footer__sns img{ width:38px; height:38px; }
.footer__bnr{
  display:flex;
  align-items:center;
  gap:var(--gap-s);
  min-width:290px;
  min-height:78px;
  padding:10px;
  border:1px solid var(--line);
  font-size:19px;
  line-height:1.4;
}
.footer__bnr .ph{ width:58px; height:58px; flex:0 0 auto; }
.footer__bnr span{ flex:1; text-align:center; }
.footer__copy{
  margin-top:var(--gap-m);
  font-family:var(--font-en);
  font-size:15px;
  color:var(--ink-soft);
}

/* ---------- 14. 画面が狭いとき ---------- */
@media (max-width:1200px){
  /* タブレット以下は、FVの高さを従来どおり（ヘッダー分を引いた高さ）に戻す。
     円の側は --fv-h を見ているので、これだけで両方そろう */
  .fv{ --fv-h:calc(100dvh - var(--header-h)); }
  .catalog__grid,
  .about__grid,
  .contact__cols{ grid-template-columns:1fr; }
  .catalog__cats{ height:clamp(300px,42vw,440px); }
  .cloud__shape{ left:-62%; top:-22%; width:172%; height:132%; }
  .about__lead{ margin:-4% 4% var(--gap-l) 0; }
  .about__card--main{ margin:0 4% 0 0; }
  .contact__col + .contact__col{ border-left:0; border-top:1px solid var(--line); padding-top:var(--gap-m); margin-top:var(--gap-m); }
  .movie__tv{ width:min(32vw,260px); }
  .footer__offices{ gap:var(--gap-l); }
}

/* ---------- ヘッダーのロゴを「S」マークだけにする幅 ---------- */
/* 🔴 社名まで出すと、右の3点（採用情報・言語・ハンバーガー）に押されて潰れる。
   実測（2026-08-20）＝390pxで 68×4px／375pxで 53×3px／**761pxでも 236×15px、900pxで 279×18px**。
   読めるようになるのは 1000px から（310×20px）。
   そこで**999px以下はマークだけ**にする（当初は760px以下にしていたが、
   タブレット縦（761〜999px）で同じことが起きていたため 2026-08-20 に引き上げ・前田社長判断）。
   仕組み＝ロゴ画像は 1234×80 の横並び。マークは x5〜69、社名は x97 から始まるので、
   高さ40px（＝実寸の半分）に縮めて、枠を40pxで切ればマークだけが残る。
   読み上げ用の説明（alt）は社名のまま変えていない */
@media (max-width:999px){
  .site-header__logo{ flex:0 0 auto; width:40px; overflow:hidden; }
  .site-header__logo img{ width:auto; height:40px; max-width:none; }
}

@media (max-width:760px){
  :root{ --header-h:80px; --gap-xl:64px; }
  .site-header{ gap:var(--gap-s); padding-inline:var(--gap-s); }
  .btn-recruit{ min-width:0; width:96px; height:44px; font-size:14px; }
  .lang{ height:44px; font-size:16px; padding-inline:10px; }
  .lang__flag{ width:18px; height:18px; }
  .menu-btn{ width:44px; height:44px; gap:5px; }
  .menu-btn span{ width:20px; }
  /* 画面が狭いときはメニューを全幅で出す */
  .site-menu{ width:100%; }
  .site-menu__grid{ grid-template-columns:repeat(2,1fr); }
  .message__box{ padding:var(--gap-m) var(--gap-s) calc(var(--gap-l) + var(--gap-s)); }
  /* 狭い画面では決まった位置での改行をやめて、自然に折り返す */
  .message__body br{ display:none; }
  .message__body{ line-height:1.95; }
  /* SPでは3体とも枠の上に並べる。枠の中に置くと本文に重なって読めなくなる */
  .message__box{ border-radius:28px; border-width:4px; }
  /* ステッカーとキャラを下げて、MESSAGE本文の最後まで読めるようにする
     （2026-08-20 前田社長ご指摘）。下げ幅は「本文の文字に1画素も重ならない最小値」を
     画素の差分で探して決めた。キャラ36px・ステッカー44px */
  .message__chara--chef { width:76px; right:2%; bottom:calc(-4% - 30px); }
  /* ステッカーはさらに左へ64px。キャラに隠れて「SANKY」で切れていた文字を全部見せるための最小値
     （左48pxだと ENJOY が隠れることを画素で確認済み） */
  .sticker--message{ bottom:-26px; right:104px; }
  .about__box{ padding:var(--gap-m) var(--gap-s); }
  .about__card--sub{ aspect-ratio:26/13; }
  .about__card{ border-radius:30px; }
  .about__card-photo{ border-radius:24px; }
  .cloud{ padding:22% 15% 20% 3%; }
  .about__lead{ margin:-2% 0 var(--gap-m); font-size:clamp(23px,6.8vw,32px); }
  .about__card--main{ margin:0; }
  .catalog__left{ padding-bottom:0; }
  .catalog__cats{ height:clamp(280px,62vw,380px); }
  .cat-panel{ padding-top:18px; padding-bottom:18px; }
  .cat-panel__label{ font-size:14px; letter-spacing:.16em; }
  .movie__head{ flex-direction:column; align-items:flex-start; gap:var(--gap-s); }
  .movie__tv{ width:min(72vw,290px); align-self:center; }
  .movie__carousel{ --m-w:64%; --m-gap:-23%; --m-pad:18%; --m-step:41%; --m-side:.24; --m-navw:42px; }
  .movie__nav--prev{ left:calc(var(--m-pad) + 2%); }
  .movie__nav--next{ right:calc(var(--m-pad) + 2%); }
  .movie__panel{ border-radius:26px; }
  .sus__panel{ border-radius:26px; }
  .sus__inner{ min-height:0; padding-block:clamp(40px,9vw,64px); }
  .sus__panel::after{ background:linear-gradient(180deg, rgb(24 20 20 / .74) 0 100%); }
  .sus__body{ line-height:1.95; }
  .sus__title{ font-size:clamp(24px,6.6vw,36px); }
  .contact__cols{ grid-template-columns:1fr; }
  .contact__col + .contact__col{ border-left:3px solid var(--ink); }
  .contact__panel{ border-radius:26px; }
  .site-footer{ padding-top:clamp(90px,26vw,150px); }
  .site-footer::before{ width:210vw; }
  .bnr-row{ grid-template-columns:1fr; }
  .footer__offices{ flex-direction:column; gap:var(--gap-m); align-items:center; }
  .site-footer::before{ width:300vw; }
  .fv__ring{ width:112vw; }
  .fv__ring text{ font-size:96px; }
  .fv__copy{ font-size:clamp(26px,9vw,44px); }
  .fv__pop--p1{ left:3%;   top:12%; right:auto; bottom:auto; width:19%; --pop-rot:-5deg;  --fx:300%; --fy:150%;  --d:.1s;  --sway:3.8s; }
  .fv__pop--p2{ left:2%;   top:62%; right:auto; bottom:auto; width:15%; --pop-rot:-12deg; --fx:330%; --fy:-140%; --d:.22s; --sway:4.2s; }
  .fv__pop--p4{ left:74%;  top:64%; right:auto; bottom:auto; width:19%; --pop-rot:-7deg;  --fx:-270%;--fy:-150%; --d:.46s; --sway:4.4s; }
  .fv__pop--p5{ left:17%;  top:66%; right:auto; bottom:auto; width:16%; --pop-rot:5deg;   --fx:290%; --fy:-160%; --d:.54s; --sway:3.2s; }
  /* 携帯では見出しが画面いっぱいに広がり、シェフの右にも余地が無いので、
     PCのような「シェフに重ねる」置き方ができない。空いた右上へ単独で置く（暫定・SPの追い込み時に見直す） */
  .fv__pop--p6{ left:70%;  top:20%; right:auto; bottom:auto; width:26%; --pop-rot:-6deg;  --fx:-190%;--fy:210%;  --d:.34s; --sway:4.0s; }
  .fv__pop--c4{ left:56%;  top:56%; right:auto; bottom:auto; width:34%; --pop-rot:9deg; }
  .fv__conf{ width:10px; height:14px; }
}