/* =============================================================
   SANKYOFOODS株式会社（外食事業）トップページ｜デザイン別案
   -------------------------------------------------------------
   いまのトップページを土台にして、見た目をがらっと変える回です。
   文章と写真の入る場所・並び順はそのまま、見え方だけを作り変えます。

   ルール
     1. 色は必ず下の一覧にある名前で呼ぶ。ここ以外に色コードを書かない
     2. !important は使わない
     3. 同じ名前の指定を二回書かない。直すときは、もとの指定を書きかえる
   ============================================================= */

/* ---------- 土台の初期化（ここは変えない） ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
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; }


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

   色・書体・余白の一覧も、今回は作業場所に置いてあります。
   見た目を大きく変える回なので、書体も余白もここで決めてください。

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

/* ---------- 色・書体・余白の一覧 ---------- */
/* 🔴 --red だけは会社のしるしの色なので変えない。ほかは自由 */
: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:    78px;
  --panel-w:    600px;

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

  /* 追加の色と書体（いまのデザインで足したもの。総入れ替えしてかまわない） */
  --pop-pink:      #e12645;
  /* 別案の表紙で使う、奥に沈めるための深い赤（2026-09-05 追加） */
  --red-deep:      #9d0413;
  --pop-ring:      #c4102f;
  --pop-yellow:    #ffd23f;
  --pop-sky:       #4ec3e0;
  --pop-mint:      #7ed6a5;
  --pop-cream:     #f6f1e2;
  /* カタログのかたまりの地。うすい灰色（2026-09-06 追加） */
  --bg-grey:       #ededed;
  --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);

  /* 今回のために足した書体。使うものを選んで、上の --font-ja などに入れかえて使う。
     使わないものはそのままにしておいてよい（読み込むだけで見た目は変わらない） */
  --font-mincho:    "Noto Serif JP", "Hiragino Mincho ProN", serif;      /* 明朝。和のおちつき */
  --font-gothic-th: "Zen Kaku Gothic New", var(--font-ja);               /* 細身のゴシック。すっきり */
  --font-en-geo:    "Montserrat", "Helvetica Neue", Arial, sans-serif;   /* 幾何学の欧文。つよい */
  --font-en-serif:  "Playfair Display", Georgia, serif;                  /* 欧文の明朝。上質 */
  --font-en-grot:   "Helvetica Neue", "Helvetica", Arial, "Noto Sans JP", sans-serif; /* 欧文のグロテスク。しめて速い。表紙の大きな一行に使う */

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



/* ---------- 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-grot);
  font-size:clamp(40px,7.6vw,116px);
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--ink-soft);
  line-height:1.1;
}

/* 画像がまだ入っていない枠に出るプレースホルダ */
.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);
  border-bottom:1px solid var(--red);
  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:46px;
  border:1px solid var(--line-soft);
  border-radius:2px;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ja);
  font-weight:500;
  font-size:16px;
  letter-spacing:.12em;
  transition:border-color .2s, color .2s;
}
.btn-recruit:hover{ border-color:var(--red); color:var(--red); }
.lang{
  display:flex;
  align-items:center;
  gap:var(--gap-xs);
  height:46px;
  padding-inline:var(--gap-s);
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:2px;
  font-family:var(--font-ja);
  font-weight:500;
  font-size:16px;
  letter-spacing:.1em;
}
.lang__flag{
  width:18px; height:18px;
  border-radius:50%;
  background:var(--red);
}
.lang__caret{ font-size:12px; color:var(--ink-soft); }

/* ハンバーガーのボタン */
.menu-btn{
  width:46px; height:46px;
  padding:0;
  display:grid;
  align-content:center;
  justify-items:center;
  /* 🔴 3px の線＋7px のすきま＝中心どうしが 10px。×にするときの寄せ量と対になっているので変えない */
  gap:7px;
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:2px;
  cursor:pointer;
  transition:border-color .2s;
}
.menu-btn:hover{ border-color:var(--red); }
.menu-btn span{
  display:block;
  width:20px; height:3px;
  border-radius:2px;
  background:var(--ink);
  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); }

/* ---------- 5. FV ---------- */
/* 表紙とごあいさつをつなぐ赤い帯。奥から手前へ、深い赤からしるしの赤へ流す */
.band-pop{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, var(--red) 0%, transparent 62%),
    linear-gradient(158deg, var(--red-deep) 0%, var(--pop-pink) 52%, var(--red-deep) 100%);
}
.fv{
  position:relative;
  /* FVの高さ。ヘッダーの分を引かない＝以前より 78px ぶん広い（2026-08-20 前田社長のご指示） */
  --fv-h:100dvh;
  --ring-paint:1.35;
  min-height:var(--fv-h);
  display:grid;
  background:transparent;
  overflow:hidden;
}

/* 円になって回る看板文字。別案では画面の左側に寄せて置く。
   🔴 円の「箱」の外まで文字が描かれる。実測で箱の直径の 1.343 倍（SVGの文字が円弧の外側へ伸びるため）。
      箱の大きさだけ見て収まったと判断すると、文字は切れたままになる */
.fv__ring{
  position:absolute;
  left:31%; top:50%;
  width:min(96vw, var(--fv-h) / var(--ring-paint) * 0.98, 1000px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  animation:fv-spin 44s linear infinite;
  pointer-events:none;
  z-index:0;
}
.fv__ring svg{ width:100%; height:100%; overflow:visible; }
.fv__ring text{
  font-family:var(--font-en-geo);
  font-size:70px;
  font-weight:800;
  letter-spacing:.02em;
  fill:var(--pop-ring);
}
@keyframes fv-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

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

/* まんなかのキャッチコピー。別案では英字を主役に立て、和文をその下に細く置く */
.fv__copy{
  grid-area:1/1;
  align-self:center;
  justify-self:start;
  z-index:5;
  padding-inline:clamp(24px,5.6vw,96px);
  max-width:min(100%,1040px);
  font-family:var(--font-ja);
  font-size:clamp(22px,2.6vw,48px);
  font-weight:700;
  letter-spacing:.18em;
  line-height:1.9;
  color:var(--ink-invert);
  text-align:left;
  translate:0 calc(-1 * clamp(24px,4.4vw,64px));
  animation:fv-copy-in 1.1s cubic-bezier(.2,.9,.25,1) .1s both;
}
/* 英字を上、和文を下に積む。文言も並び順も変えずに、見え方だけを入れかえている */
.fv__copy-inner{
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  gap:clamp(16px,2vw,30px);
}
/* 和文はひとかたまりで扱う。ここを包まないと、改行のところで行がばらけて逆さに積まれる */
.fv__copy-ja{
  display:block;
  /* 英字だけを持ち上げたいので、和文はもとの高さへ戻している */
  translate:0 clamp(24px,3.05vw,45px);
}

/* かぎかっこごと、左右にすこし間をあける */
.fv__copy-q{ margin-inline:.12em; }
/* 「わくわく」の上の点 */
.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{
  --fv-en:clamp(58px,10.4vw,158px);
  display:block;
  max-width:none;
  font-family:var(--font-en-grot);
  font-size:var(--fv-en);
  font-weight:700;
  letter-spacing:-.028em;
  line-height:.86;
  opacity:1;
}
/* 三行に組む。文言はそのまま、折り返す位置だけを決めている */
.fv__en-l1,
.fv__en-l2,
.fv__en-l3{ display:block; }
/* 二行目だけ斜体にして、すこし右へずらす */
.fv__en-l2{
  font-style:italic;
  font-size:1.03em;
  margin-left:calc(var(--fv-en) * .30);
}
/* 三行目は小さく、さらに右へ。ここで大小の差をつける */
.fv__en-l3{
  font-size:.38em;
  letter-spacing:-.012em;
  margin-top:calc(var(--fv-en) * .14);
  margin-left:calc(var(--fv-en) * .68);
}
@keyframes fv-copy-in{
  from{ opacity:0; transform:translateY(22px); }
  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 34px 70px rgb(34 31 32 / .3);
  opacity:0;
  animation:fv-photo-in 1.2s cubic-bezier(.2,.85,.25,1) both;
}
.fv__photo img{ width:100%; height:100%; object-fit:cover; }
.fv__photo--a{ left:auto; right:-2%; top:1%;  width:40%; animation-delay:.18s; }
.fv__photo--b{ left:43%;  top:55%; width:21%; animation-delay:.42s; }
@keyframes fv-photo-in{
  from{ opacity:0; transform:scale(.9); }
  to  { opacity:1; transform: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(--bg);
  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 前田社長ご指摘。ヘッダーのロゴだけ動かないのは左端に寄っているから）。
   スクロールバーの居場所は、いちばん上の土台のところで最初から空けてある */
.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(2,1fr);
  gap:1px;
  background:var(--line-soft);
  border-block:1px solid var(--line-soft);
}
.site-menu__item{
  background:var(--bg);
  min-height:0;
  padding:14px var(--gap-s);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  text-align:left;
  font-family:var(--font-ja);
  font-weight:500;
  font-size:15px;
  letter-spacing:.04em;
  line-height:1.5;
}
/* しるしの絵は出す。枠と地の色をやめて、写真だけの小さな丸にしてある */
.site-menu__icon{
  width:52px; height:52px;
  flex:0 0 auto;
  border:0;
  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:flex;
  align-items:center;
  justify-content:center;
  gap:var(--gap-s);
  width:min(100% - var(--gap-m)*2, 356px);
  height:58px;
  margin:var(--gap-m) auto var(--gap-s);
  background:var(--bg);
  border:1px solid var(--red);
  border-radius:var(--r-s);
  font-family:var(--font-ja);
  font-weight:700;
  font-size:16px;
  letter-spacing:.1em;
  color:var(--red);
}
.site-menu__contact-i{
  display:grid;
  place-items:center;
  width:30px;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--red);
  color:var(--ink-invert);
  font-size:13px;
  line-height:1;
}
.site-menu__bnr{
  display:flex;
  align-items:center;
  gap:var(--gap-s);
  width:calc(100% - var(--gap-m)*2);
  min-height:76px;
  margin:var(--gap-s) auto;
  padding:10px 14px;
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:2px;
  font-family:var(--font-ja);
  font-weight:500;
  font-size:15px;
  line-height:1.45;
}
.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%;
    width:100vw;
    height:auto;
    max-height:min(880px,94vh);
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:calc(var(--header-h) + clamp(22px,3.2vh,42px)) 0 clamp(22px,3.2vh,42px);
    background:var(--bg);
    border-radius:0;
    border-bottom:1px solid var(--red);
    box-shadow:0 22px 44px rgb(34 31 32 / .14);
    opacity:1;
    transform:translateX(-50%) translateY(-101%);
    transition:transform .52s cubic-bezier(.22,.9,.3,1);
  }
  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(980px,80vw);
    margin-top:0;
    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;
    justify-content:flex-start;
    gap:clamp(6px,.9vh,11px);
    text-align:center;
    border:0;
    color:var(--ink);
    font-family:var(--font-ja);
    font-weight:500;
    font-size:clamp(12px,.95vw,15px);
    letter-spacing:.06em;
    line-height:1.5;
    transition:color .22s;
  }
  .site-menu__item:hover{ color:var(--red); }
  /* 区切りは細い実線。点線はやめた */
  .site-menu__item:not(:nth-child(6n)):not(:last-child){
    border-right:1px solid var(--line-soft);
  }
  .site-menu__item:nth-child(-n+12){
    border-bottom:1px solid var(--line-soft);
  }
  .site-menu__icon{
    width:var(--mi);
    height:auto;
    aspect-ratio:1;
    border:0;
    background:var(--bg-circle);
    transition:transform .26s;
  }
  /* 押したら飛ぶことが分かるように、丸の右下に矢印 */
  .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:26px; height:26px;
    border:0;
    border-radius:50%;
    background:var(--red);
    color:var(--ink-invert);
    font-size:12px;
    line-height:1;
    transition:transform .24s;
  }
  .site-menu__item:hover .site-menu__icon{ transform:translateY(-4px); }
  .site-menu__item:hover::after{ transform:translate(2px,-2px); }
  /* 下層ページの下に、お問い合わせと帯をまとめて置く */
  .site-menu__foot{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(10px,1.6vh,20px);
    margin-top:clamp(16px,2.2vh,28px);
    width:min(1120px,84vw);
  }
  /* ほかのお問い合わせと同じ形。赤の細い枠だけで見せる */
  .site-menu__contact{
    grid-column:span 2;
    justify-self:center;
    align-self:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:clamp(8px,.9vw,15px);
    width:min(100% - 16px,300px);
    height:auto;
    margin:0;
    padding:13px 14px 13px 22px;
    border:1px solid var(--red);
    border-radius:var(--r-s);
    background:var(--bg);
    font-family:var(--font-ja);
    font-weight:700;
    font-size:clamp(14px,1.05vw,17px);
    letter-spacing:.12em;
    color:var(--red);
    transition:background .22s, color .22s;
  }
  .site-menu__contact-i{
    display:grid;
    place-items:center;
    width:clamp(26px,2.2vw,34px);
    aspect-ratio:1;
    border-radius:50%;
    background:var(--red);
    color:var(--ink-invert);
    font-size:clamp(12px,1vw,15px);
    line-height:1;
    transition:transform .22s, background .22s, color .22s;
  }
  .site-menu__contact:hover{ background:var(--red); color:var(--ink-invert); }
  .site-menu__contact:hover .site-menu__contact-i{ transform:translateX(3px); background:var(--bg); color:var(--red); }
  .site-menu__foot-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(12px,1.4vw,22px);
    width:100%;
  }
  .site-menu__bnr{
    width:auto;
    min-width:0;
    min-height:0;
    margin:0;
    flex:0 1 252px;
    gap:12px;
    padding:12px 16px;
    border:1px solid var(--line-soft);
    border-radius:var(--r-s);
    background:var(--bg);
    font-family:var(--font-ja);
    font-weight:500;
    font-size:clamp(12px,.9vw,15px);
    line-height:1.4;
    transition:border-color .2s;
  }
  .site-menu__bnr:hover{ border-color:var(--red); }
  .site-menu__bnr .ph{ width:36px; height:36px; }
  .site-menu__ec-link{
    display:block;
    flex:0 1 240px;
    border:1px solid var(--line-soft);
    border-radius:var(--r-s);
    overflow:hidden;
    transition:border-color .2s;
  }
  .site-menu__ec-link:hover{ border-color:var(--red); }
  .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-en-grot);
  font-size:clamp(40px,7.6vw,116px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
  padding-right:.34em;
}
/* 見出しの右の赤い四角ひとつ。文字の足もとにそろえて置く */
.message__en::before{ display:none; }
.message__en::after{
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
}
.message__ja{
  display:block;
  margin-top:var(--gap-xs);
  font-family:var(--font-ja);
  font-size:clamp(17px,1.6vw,26px);
  font-weight:700;
  color:var(--ink);
}
.message__body{
  font-size:clamp(15px,1.15vw,18px);
  line-height:2.05;
  text-align:left;
}

/* ---------- 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-ja);
  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__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__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{ transition:none; }
  .about__lead-ch{ opacity:1; }
  .about__lead.is-in .about__lead-ch{ animation:none; }
  /* 動きを減らす設定の人には、カテゴリの並びも動かさずに見せる */
  .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 ==============================================
   2026-09-06 那尚香さんのご指示で組み直し。
   残したのは「左にカタログの表紙、右にカテゴリの並び」というしくみだけ。
   紙のフォルダのつまみ・重なる色板・太い黒ふちは、すべてやめている
   ========================================================== */
.catalog{
  position:relative;
  background:var(--bg-grey);
  padding-block:clamp(64px,6.6vw,124px);
}
/* もとは紙のフォルダに見せるための入れ物。いまはただの入れ物 */
.catalog__folder{
  position:relative;
  background:none;
  border:0;
}
/* 見出しは message と同じ組み方。英字の下に日本語を一行 */
.catalog__title{
  display:block;
  /* 赤い面の中の細い英字と左はしをそろえる（＝ .catalog__left の内側の余白と同じ値） */
  margin-left:clamp(26px,3vw,56px);
  font-family:var(--font-en-grot);
  font-size:clamp(40px,7.6vw,116px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.catalog__title-en{
  position:relative;
  display:inline-block;
  padding-right:.34em;
}
.catalog__title-en::before{ display:none; }
.catalog__title-en::after{
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
}
.catalog__title-ja{
  display:block;
  margin-top:var(--gap-xs);
  font-family:var(--font-ja);
  font-size:clamp(17px,1.6vw,26px);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.02em;
  color:var(--ink);
}

.catalog__grid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:clamp(28px,4vw,88px);
  align-items:stretch;
  margin-top:clamp(30px,3.4vw,64px);
}
/* 左＝赤い面。上と下に細い英字、まんなかにカタログの表紙 */
.catalog__left{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(26px,3vw,54px);
  padding:clamp(26px,3vw,56px);
  background:var(--red);
}
/* 表紙のうしろに敷く、大きな縦組みの英字。うすい白をかぶせた色で、飾りとして置いている */
.catalog__ghost{
  position:absolute;
  z-index:0;
  inset:clamp(18px,2.2vw,40px) clamp(14px,1.8vw,34px);
  writing-mode:vertical-rl;
  font-family:var(--font-en-grot);
  font-weight:700;
  font-size:clamp(58px,8.2vw,132px);
  letter-spacing:.01em;
  line-height:1.04;
  color:rgb(255 255 255 / .17);
  /* 折り返させない。一本の帯にして、はみ出したところは赤い面で切る
     （折り返すと二列になり、写真の左右に切れはしが顔を出して散らかる） */
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}
/* 表紙と細い英字は、うしろの大きな英字より前に置く */
.catalog__visual,
.catalog__tag{ position:relative; z-index:1; }
/* 上下の細い英字 */
.catalog__tag{
  font-family:var(--font-en-grot);
  font-weight:300;
  font-size:clamp(12px,.95vw,14px);
  letter-spacing:.22em;
  line-height:1;
  color:rgb(255 255 255 / .82);
}
.catalog__tag:last-child{ align-self:end; text-align:right; }
.catalog__visual{
  justify-self:center;
  align-self:center;
  /* 🔴 縦横の比は写真そのままにする。切らない・つぶさない（2026-09-06 なおた様ご指示） */
  width:min(100%,clamp(195px,22vw,356px));
  background:var(--bg);
  transform:rotate(-4deg);
  /* ぼかさない影。深い赤をそのままずらして置く */
  box-shadow:clamp(10px,1.2vw,22px) clamp(12px,1.4vw,26px) 0 var(--red-deep);
}
.catalog__visual img{ display:block; width:100%; height:auto; }
/* 赤い楕円のボタン。右はしに白い丸、その中に赤い矢印 */
.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-ja);
  font-weight:700;
  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__right{
  display:grid;
  grid-template-rows:1fr auto;
  align-content:center;
  gap:clamp(24px,2.8vw,48px);
}
/* ボタンは右下。白い地に赤いふち、右に赤い丸の白い矢印（2026-09-06 見本どおり） */
.catalog__right .btn-round{
  justify-self:end;
  margin-left:0;
  height:clamp(58px,4.6vw,76px);
  padding-inline:clamp(26px,2.6vw,44px) clamp(8px,.7vw,12px);
  gap:clamp(14px,1.4vw,24px);
  border:0;
  border-radius:999px;
  background:var(--bg);
  color:var(--red);
  font-weight:700;
  font-size:clamp(15px,1.2vw,19px);
  letter-spacing:.08em;
}
.catalog__right .btn-round__arrow{
  width:clamp(38px,3.2vw,50px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--red);
  color:var(--ink-invert);
  font-size:clamp(14px,1.1vw,18px);
}
.catalog__right .btn-round:hover{ transform:translateY(-2px); }

/* カテゴリの並び。一段ずつ細い線で区切る */
.catalog__cats{
  display:flex;
  /* 上から A・B・C… の順に見えるようにする（HTML の並びは変えていない） */
  flex-direction:column-reverse;
  justify-content:center;
  /* 番号は並びから自動で出している。HTML には数字を一文字も書いていない */
  counter-reset:cat 6;
}
.cat-panel{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(16px,2vw,40px);
  padding:clamp(16px,1.8vw,30px) clamp(14px,1.6vw,30px);
  counter-increment:cat -1;
  color:var(--ink);
  border-bottom:1px solid rgb(34 31 32 / .16);
  transition:background .3s, color .3s, box-shadow .3s, border-color .3s;
}
.cat-panel::before{
  content:counter(cat, decimal-leading-zero);
  font-family:var(--font-en-grot);
  font-size:clamp(11px,.95vw,14px);
  letter-spacing:.16em;
  color:rgb(34 31 32 / .42);
  transition:color .3s;
}
/* 左の赤い棒。当てた一段だけ立ち上がる */
.cat-panel::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--red);
  transform:scaleY(0);
  transition:transform .3s;
}
/* 紙のフォルダのくぼみは、もう使わない */
.cat-panel__notch{ display:none; }
.cat-panel__label{
  font-family:var(--font-ja);
  font-weight:500;
  font-size:clamp(16px,1.4vw,22px);
  letter-spacing:.12em;
  line-height:1.4;
}
.cat-panel__arrow{
  display:grid;
  place-items:center;
  width:clamp(32px,2.8vw,44px);
  aspect-ratio:1;
  border-radius:50%;
  font-size:clamp(14px,1.1vw,18px);
  color:rgb(34 31 32 / .45);
  background:#0000;
  transition:background .3s, color .3s;
}
/* 当てた一段は、白い面に赤い文字。
   いちばん上の一段（HTML では最後の一行）は、はじめからこの見え方にしておく */
.cat-panel:hover,
.cat-panel:focus-visible,
.cat-panel:last-child{
  background:var(--bg);
  color:var(--red);
  border-bottom-color:transparent;
  box-shadow:0 clamp(6px,.8vw,14px) clamp(18px,2vw,34px) rgb(34 31 32 / .07);
}
.cat-panel:hover::after,
.cat-panel:focus-visible::after,
.cat-panel:last-child::after{ transform:scaleY(1); }
.cat-panel:hover::before,
.cat-panel:focus-visible::before,
.cat-panel:last-child::before{ color:var(--red); }
/* 当てた一段の矢印だけ、赤い丸に白い矢印 */
.cat-panel:hover .cat-panel__arrow,
.cat-panel:focus-visible .cat-panel__arrow,
.cat-panel:last-child .cat-panel__arrow{
  background:var(--red);
  color:var(--ink-invert);
}
/* ほかの段に当てているあいだは、いちばん上の一段はふつうの見え方に戻す */
.catalog__cats:hover .cat-panel:last-child:not(:hover){
  background:none;
  color:var(--ink);
  border-bottom-color:rgb(34 31 32 / .16);
  box-shadow:none;
}
.catalog__cats:hover .cat-panel:last-child:not(:hover)::after{ transform:scaleY(0); }
.catalog__cats:hover .cat-panel:last-child:not(:hover)::before{ color:rgb(34 31 32 / .42); }
.catalog__cats:hover .cat-panel:last-child:not(:hover) .cat-panel__arrow{
  background:#0000;
  color:rgb(34 31 32 / .45);
}
/* 横に並べられない幅では、赤い面の下にカテゴリを積む */
@media (max-width:900px){
  .catalog__grid{ grid-template-columns:1fr; }
}

/* 表紙と同じ、くるくる回る丸。うすい色の空間にひとつ置く */
.spin-badge{
  position:absolute;
  z-index:4;
  right:clamp(18px,5vw,110px);
  top:clamp(46px,5vw,96px);
  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);
}

/* ---------- 9. MOVIE ---------- */
/* 赤い地の上に、白い大きな角丸の四角。中身はその中に入れる */
.movie{
  /* 上は赤、途中から白に切りかわる（境目はきっぱり） */
  background:linear-gradient(var(--red) 0 var(--m-split), var(--bg) var(--m-split) 100%);
  --m-split:62%;
  padding-block:clamp(56px,6vw,110px);
}
.movie__panel{
  position:relative;
  background:var(--bg);
  border:0;
  box-shadow:0 clamp(10px,1.4vw,26px) clamp(30px,3.4vw,64px) rgb(34 31 32 / .14);
  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-en-grot);
  font-size:clamp(40px,7.6vw,116px);
  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:.34em;
}
.movie__title-en::before{ display:none; }
.movie__title-en::after{
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
}
.movie__title-ja{
  display:block;
  margin-top:var(--gap-xs);
  font-family:var(--font-ja);
  font-size:clamp(17px,1.6vw,26px);
  font-weight:700;
  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);
}
/* もとはずっと揺れていた。2026-09-06 那尚香さんのご指示で、動きはすべてやめた */
.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-ja);
  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-ja);
  font-weight:700;
  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__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-ja);
  font-weight:700;
  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(--bg);
  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-en-grot);
  font-size:clamp(40px,7.6vw,116px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink-invert);
}
.sus__title-en{
  position:relative;
  display:inline-block;
  padding-right:.34em;
}
.sus__title-en::before{ display:none; }
.sus__title-en::after{
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
}
.sus__title-ja{
  display:block;
  margin-top:var(--gap-xs);
  font-family:var(--font-ja);
  font-size:clamp(17px,1.6vw,26px);
  font-weight:700;
  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-ja);
  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(--bg);
  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-en-grot);
  font-size:clamp(40px,7.6vw,116px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.contact__title-en{
  position:relative;
  display:inline-block;
  padding-right:.34em;
}
.contact__title-en::before{ display:none; }
.contact__title-en::after{
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
}
.contact__lead{
  margin-top:clamp(10px,1.2vw,18px);
  font-family:var(--font-ja);
  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-ja);
  font-size:clamp(14px,1.15vw,19px);
  font-weight:700;
  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-ja);
  font-weight:500;
  font-size:clamp(12px,.85vw,14px);
}
.contact__tel{
  margin-top:clamp(8px,1vw,16px);
  font-family:var(--font-ja);
  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-ja);
  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. フッター ---------- */
/* 上のお問い合わせの赤とは、まっすぐな切れ目で分ける（2026-09-06 半円をやめた） */
.site-footer{
  position:relative;
  background:var(--bg);
  padding-block:clamp(48px,5vw,88px) var(--gap-m);
  padding-inline:clamp(24px,5.4vw,96px);
  text-align:left;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:
    "logo   .     sns"
    "office nav   bnr"
    "copy   copy  copy";
  align-items:start;
  column-gap:clamp(24px,3.6vw,64px);
  row-gap:clamp(28px,3.4vw,54px);
}
.site-footer > *{ position:relative; }
.site-footer__logo{ grid-area:logo; }
.site-footer__logo img{ width:clamp(230px,25vw,380px); }
.footer__sns{ grid-area:sns; display:flex; gap:var(--gap-s); align-self:center; }
.footer__sns img{ width:32px; height:32px; }
.footer__offices{
  grid-area:office;
  display:flex;
  justify-content:flex-start;
  gap:clamp(24px,3.4vw,60px);
  text-align:left;
  font-size:15px;
}
.footer__nav{
  grid-area:nav;
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(7,auto);
  justify-content:start;
  gap:var(--gap-xs) clamp(20px,2.8vw,52px);
  font-size:15px;
}
.footer__nav a{ white-space:nowrap; }
.footer__bottom{
  grid-area:bnr;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--gap-s);
}
.footer__bnr{
  display:flex;
  align-items:center;
  gap:var(--gap-s);
  min-width:250px;
  min-height:56px;
  padding:8px 12px;
  border:1px solid var(--line);
  font-size:15px;
  line-height:1.4;
}
.footer__bnr .ph{ width:38px; height:38px; flex:0 0 auto; }
.footer__bnr span{ flex:1; text-align:center; }
.footer__copy{
  grid-area:copy;
  margin-top:0;
  font-family:var(--font-en);
  font-size:13px;
  color:var(--ink-soft);
}

/* フッターは画面が狭くなったら縦に積む（しるしとソーシャルだけ横に残す） */
@media (max-width:1000px){
  .site-footer{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "logo   sns"
      "office office"
      "nav    nav"
      "bnr    bnr"
      "copy   copy";
    row-gap:var(--gap-m);
  }
  .footer__bottom{ flex-direction:row; flex-wrap:wrap; }
  .footer__bnr{ flex:1 1 240px; }
}
@media (max-width:760px){
  .footer__offices{ flex-direction:column; gap:var(--gap-m); }
  .footer__nav{
    grid-auto-flow:row;
    grid-template-rows:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .footer__bnr{ flex:1 1 100%; min-width:0; }
}

/* ---------- 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); }
}

/* ---------- ヘッダーのロゴを「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));
    border-radius:28px;
    border-width:4px;
  }
  /* 狭い画面では決まった位置での改行をやめて、自然に折り返す */
  .message__body br{ display:none; }
  .message__body{ line-height:1.95; }
  /* ステッカーはさらに左へ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(32px,9.6vw,40px); }
  .contact__cols{ grid-template-columns:1fr; }
  .contact__col + .contact__col{ border-left:3px solid var(--ink); }
  .contact__panel{ border-radius:26px; }
  .bnr-row{ grid-template-columns:1fr; }
  .fv__ring{ width:118vw; left:46%; }
  .fv__ring text{ font-size:86px; }
  /* 携帯は写真を上、文字を下に積む */
  .fv__copy{ align-self:end; padding-bottom:clamp(56px,16vw,112px); font-size:22px; letter-spacing:.18em; line-height:1.9; }
  .fv__copy-en{ --fv-en:50px; }
  .fv__photo--a{ right:-13%; top:3%;  width:72%; }
  .fv__photo--b{ left:8%; top:35%; width:39%; }
}

/* ==========================================================
   15. 別案のスタイリッシュ調整（2026-09-05）

   FV とヘッダー／メニューには手を触れない。MESSAGE から下だけを静かにする。

   考え方は「足す」ではなく「引く」。
     ・太い黒のふち／大きな角丸／貼り紙／テレビの絵／黄色 ── ぜんぶやめる
     ・残すのは 赤・白・墨 の三色と、まっすぐな線と、広い余白だけ
     ・形をつくり直すのではなく、飾りを外して間をあけることで静けさを出す
   もとに戻したいときは、この 15 のかたまりごと消せばよい。
   ========================================================== */

/* ---------- 15-1. 出さないもの ---------- */
/* 貼り紙・くるくる回る丸・雲のかたち。写真の波形はカードのデザインごと元に戻したので残す */
.sticker,
.spin-badge,
.cloud__shape{ display:none; }

/* ---------- 15-2. 見出し ---------- */
/* 英字のよこの赤い丸ふたつは、なおた様のご指示でそのまま残す（2026-09-05）。
   ABOUT US の見出しにも同じ丸をつけて、5つのかたまりでそろえる */
.about__title-en{
  position:relative;
  display:inline-block;
  padding-right:.34em;
}
.about__title-en::before,
.about__title-en::after{
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
}
/* 数値はほかの見出し（.message__en）とまったく同じ */
.about__title-en::before{ display:none; }
.about__title-en::after{
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
}

/* 見出しの英字は、頭の一文字だけ大文字。文言そのものは一文字も変えていない（見え方の指定だけ） */
.message__en,
.catalog__title-en,
.movie__title-en,
.sus__title-en,
.contact__title-en,
.about__title-en{
  text-transform:lowercase;
}
.message__en::first-letter,
.catalog__title-en::first-letter,
.movie__title-en::first-letter,
.sus__title-en::first-letter,
.contact__title-en::first-letter,
.about__title-en::first-letter{
  text-transform:uppercase;
}

/* 見出しの下の日本語は、小さく・赤く・字間をあけて、左に短い赤棒を添える。
   調味料サイトの見出しと同じ組み方（あちらは日本語が上。こちらは英字が主役なので下に置く） */
.message__ja,
.about__title-ja,
.catalog__title-ja,
.movie__title-ja{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:clamp(14px,1.4vw,20px);
  font-family:var(--font-ja);
  font-size:15px;
  font-weight:700;
  letter-spacing:.18em;
  line-height:1.6;
  color:var(--red);
}
.message__ja::before,
.about__title-ja::before,
.catalog__title-ja::before,
.movie__title-ja::before{
  content:"";
  flex:0 0 auto;
  width:34px;
  height:1px;
  background:var(--red);
}

/* ---------- 15-3. ふち・角・影 ---------- */
/* 太い黒のふちは引く。線を引くときは髪の毛ほどの細さで */
.movie__frame,
.sus__panel,
.contact__col{ border:0; }
.marquee{ border-block:1px solid rgb(34 31 32 / .16); }
.contact__col + .contact__col{ border-left:1px solid rgb(34 31 32 / .12); }

/* 角はほぼ落とす。丸みはほんの少しだけ残して、かたくなりすぎないようにする */
.message__box,
.about__box,
.movie__panel,
.movie__frame,
.sus__panel,
.contact__panel,
.contact__col{ border-radius:3px; }

/* 影は落とさない。浮かせずに、地の上へ静かに置く */
.message__box{ box-shadow:none; }

/* ---------- 15-4. ボタン ---------- */
/* 楕円のボタンをやめ、角を落とした帯に。白い丸は外して矢印だけ残す */
.btn-round{
  height:clamp(52px,4vw,64px);
  padding-inline:clamp(26px,2.4vw,42px) clamp(20px,2vw,32px);
  border-radius:2px;
  gap:clamp(16px,1.6vw,28px);
  font-size:clamp(14px,1.1vw,17px);
  font-weight:700;
  letter-spacing:.1em;
  /* 帯にしたぶん横幅がぎりぎりになる。文字は折らない */
  white-space:nowrap;
}
.btn-round__arrow{
  width:auto;
  aspect-ratio:auto;
  border-radius:0;
  background:none;
  color:var(--ink-invert);
  font-size:1em;
}

/* ---------- 15-5. MESSAGE ---------- */
/* 見出しも本文も中央ぞろえ（2026-09-05 なおた様ご指示）。
   本文は <br> を文の切れ目 3か所だけに減らしてある（文字は一字も変えていない） */
.message__head{ text-align:center; }
.message__ja{ justify-content:center; }
.message__body{
  /* 一行が長すぎると中央ぞろえが読みにくい。1行を 40 文字前後に収める */
  max-width:44em;
  margin-inline:auto;
  text-align:center;
}
/* 赤い太枠の箱をやめ、白い面と広い余白だけで見せる */
.message__box{
  border:0;
  padding:clamp(48px,6vw,110px) clamp(28px,5vw,96px);
}
.message__body{
  line-height:2.15;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

/* ---------- 15-6. ABOUT US ---------- */
/* 地を写真＋黒マスクにする（2026-09-05 なおた様ご指示。参考＝出前館の採用サイト）。
   写真は届いている食べ物の写真。本番の写真が決まったら、下の url を差しかえるだけでよい
   （2026-09-05 差しかえ：仮の事務所写真 → キーの2番＝白い角皿がたくさん並んだ俯瞰） */
.about{
  position:relative;
  background-color:var(--ink);
  background-image:url("../images/kv-002.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* 黒マスク。写真の上に一枚かぶせて、白い文字が読めるところまで沈める */
.about::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:linear-gradient(180deg, rgb(16 13 13 / .86) 0%, rgb(16 13 13 / .76) 100%);
  /* 色みも抜く。写真の色が残ると、上に乗る白い札とぶつかって騒がしくなる */
  -webkit-backdrop-filter:grayscale(.7) contrast(1.04);   /* Safari 用 */
  backdrop-filter:grayscale(.7) contrast(1.04);
}
/* 中身はマスクより前に出す */
.about > *{ position:relative; z-index:1; }

/* 沈めた地の上なので、見出しとキャッチコピーは白で */
.about__title-en,
.about__lead{ color:var(--ink-invert); }

/* 流れる帯はやめ、ほかのかたまりと同じ見出しにした（2026-09-05 なおた様ご指示） */
/* 🔴 見出しは左の段の中へ入れた（2026-09-05 なおた様ご指示）。
   これで「右の一枚目の上ばし」と「見出しの上ばし」が、計算せずに同じ高さでそろう。
   左はしがキャッチコピーとそろうのも、同じ段の中にいるので自動 */
.about__head{
  padding-bottom:clamp(14px,1.8vw,30px);
}
/* 見出しが箱の中に入ったぶん、上下のあきは箱の側で取る */
.about__box{
  padding-block:clamp(52px,6vw,110px) clamp(44px,5vw,90px);
}
.about__title{ display:block; }
/* 流れる帯は、太い黒字から細い墨字へ。傾きも取ってまっすぐにする */
.marquee{
  transform:none;
  padding-block:clamp(16px,1.6vw,28px);
}
.marquee__inner{
  font-family:var(--font-en-geo);
  font-weight:400;
  font-size:clamp(28px,3.8vw,64px);
  letter-spacing:.12em;
  color:var(--ink-soft);
}

/* 左に「会社案内」の大きい一枚、右に細い四枚。この並びはなおた様がお気に入り（2026-09-05） */
.about__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,2.4vw,48px);
  align-items:stretch;
}
.about__col{
  display:flex;
  flex-direction:column;
}
.about__lead{
  white-space:normal;
  margin:0 0 clamp(26px,3vw,52px);
  font-size:clamp(24px,3.1vw,50px);
  font-weight:700;
  line-height:1.7;
  letter-spacing:.02em;
}

/* ---------- 案内の札（2026-09-05 なおた様ご指示で作り直し） ----------
   白い角丸の札。中は 写真 と 日本語（墨）＋英字（赤・小さめ）、赤い丸に白い矢印。
   左の一枚は写真が上・文字が下。右の四枚は写真が全面で、左上に白い面をのせて文字を置く */
.about__cards{
  display:grid;
  gap:clamp(12px,1.3vw,22px);
  align-content:start;
}
.about__card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:0;
  /* 札の丸み。写真の丸みもここから引き算で出す */
  --card-r:clamp(14px,1.5vw,22px);
  --card-p:clamp(8px,.75vw,13px);
  border-radius:var(--card-r);
  background:var(--bg);
  padding:var(--card-p);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.about__card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgb(0 0 0 / .28);
}
/* 写真。札の角丸より内側なので、丸みはひとまわり小さくする */
.about__card-photo{
  position:static;
  inset:auto;
  display:block;
  height:auto;
  overflow:hidden;
  border-radius:calc(var(--card-r) - 7px);
}
.about__card-photo img{ width:100%; height:100%; object-fit:cover; }
.about__card-body{
  position:static;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.about__card-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4em;
  min-width:0;
}
/* 日本語は墨色 */
.about__card-title{
  font-family:var(--font-ja);
  font-weight:700;
  font-size:clamp(15px,1.25vw,20px);
  letter-spacing:.02em;
  line-height:1.4;
  color:var(--ink);
  white-space:nowrap;
}
/* 英字は赤く、ひとまわり小さく、字間をあけて */
.about__card-en{
  font-family:var(--font-en-geo);
  font-weight:600;
  font-size:clamp(12px,.85vw,13px);
  letter-spacing:.16em;
  line-height:1;
  color:var(--red);
}
/* 赤い丸に白い矢印 */
.about__card-arrow{
  flex:0 0 auto;
  display:grid;
  place-content:center;
  width:clamp(30px,2.6vw,40px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--red);
  color:var(--ink-invert);
  font-size:clamp(13px,1vw,16px);
  line-height:1;
  transition:background .22s;
}
.about__card:hover .about__card-arrow{ background:var(--red-deep); }

/* ---------- 左の大きい一枚（写真が上・文字が下） ---------- */
.about__card--main{
  /* もとは雲の中で左へ 7% はみ出させていた。いまは箱の中なので、はみ出しは戻す */
  margin:0;
  aspect-ratio:auto;
  flex:1 1 auto;
  min-height:clamp(240px,22vw,380px);
}
.about__card--main .about__card-photo{
  /* 🔴 もとの寸法を基準にすると、写真そのものの縦横比で札の高さが決まってしまい、
     右の四枚より背が高くなって下ばしがそろわない。基準を持たせずに、あまりを埋めさせる */
  flex:1 1 0;
  min-height:0;
}
/* 名前・英字・矢印をひとまわり大きく、写真はそのぶん小さく、まわりのあきも広く
   （2026-09-05 なおた様ご指示） */
.about__card--main{ --card-p:clamp(17px,1.6vw,26px); }
.about__card--main .about__card-body{
  padding:clamp(22px,2.1vw,34px) clamp(6px,.6vw,10px) clamp(6px,.6vw,10px);
}
.about__card--main .about__card-title{ font-size:clamp(21px,1.9vw,31px); }
.about__card--main .about__card-en{ font-size:clamp(14px,1.1vw,17px); }
.about__card--main .about__card-arrow{
  width:clamp(40px,3.4vw,54px);
  font-size:clamp(16px,1.3vw,21px);
}

/* ---------- 右の細い四枚（写真そのものを、文字のところだけ切り抜く） ----------
   🔴 「白い面を写真の上にのせる」のではなく、**写真の側を切り抜く**（2026-09-05 なおた様の絵のとおり）。
   写真を二枚かさねて置き、同じ位置・同じ大きさのまま、
   　・右の帯（左はしを --notch-w だけ削る）
   　・下の帯（上はしを --notch-h だけ削る）
   に切り抜いて、二枚あわせて逆エルの形にする。
   切り抜きは clip-path の round つきなので、**切り口の角も一つずつ丸められる**。
   二枚とも写真の枠いっぱい（inset:0）に置いてあるので、写真の見え方はぴったり重なる。
   左上に残る白いところは札の地。その右下だけ丸めれば、内がわの角も丸くなる */
.about__card--sub{
  display:block;
  aspect-ratio:2.9/1;
  /* 名前と英字の大きさ。切り抜く幅もここから組み立てるので、変数にして一か所で持つ */
  --nt:clamp(15px,1.25vw,20px);
  --ne:clamp(12px,.85vw,13px);
  /* 文字の左のあき（札のあきの外がわぶん）と、文字の右にあける分 */
  --npad:calc(clamp(9px,.85vw,15px) + clamp(18px,1.8vw,28px));
  /* 切り抜く高さと、切り口の丸み */
  --notch-h:clamp(58px,5.2vw,72px);
  --cut-r:clamp(20px,2vw,30px);
}
.about__card--sub .about__card-title{ font-size:var(--nt); }
.about__card--sub .about__card-en{ font-size:var(--ne); }
/* 🔴 切り抜く横幅は、札ごとに**文字の実寸**で決める（2026-09-05 なおた様ご指示。
   ぜんぶ同じ幅にしていたら、短い名前の札で白いところが余りすぎていた）。
   下の数は 1280px での実測から出した、文字一つぶんを1とした長さ。
   名前（日本語）と英字の、長いほうに合わせる */
.about__cards .about__card--sub:nth-child(1){ --notch-w:calc(var(--npad) + max(8.22 * var(--nt), 4.5 * var(--ne))); }
.about__cards .about__card--sub:nth-child(2){ --notch-w:calc(var(--npad) + max(4.11 * var(--nt), 8.95 * var(--ne))); }
.about__cards .about__card--sub:nth-child(3){ --notch-w:calc(var(--npad) + max(4.11 * var(--nt), 6.55 * var(--ne))); }
.about__cards .about__card--sub:nth-child(4){ --notch-w:calc(var(--npad) + max(6.2 * var(--nt), 4.8 * var(--ne))); }
.about__card--sub .about__card-photo{
  position:absolute;
  inset:var(--card-p);
  height:auto;
  overflow:visible;
  border-radius:0;
}
.about__card-photo-part{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
}
/* 右の帯。左上が「切り口の角」、右上と右下は写真の外まわりの角 */
.about__card-photo-part--r{
  clip-path:inset(0 0 0 var(--notch-w)
    round var(--cut-r) calc(var(--card-r) - 7px) calc(var(--card-r) - 7px) 0);
}
/* 下の帯。左上が「切り口の角」、左下と右下は写真の外まわりの角 */
.about__card-photo-part--b{
  clip-path:inset(var(--notch-h) 0 0 0
    round var(--cut-r) 0 calc(var(--card-r) - 7px) calc(var(--card-r) - 7px));
}
/* 🔴 切り口の内がわの角（白いところの右下）を丸くするための三枚目（2026-09-05 なおた様ご指示）。
   ここは右の帯にも下の帯にも入らない「すきま」なので、白い面の角を丸めただけでは
   下から写真が出てこず、角が立ったままに見えていた。
   そこで、その角のところだけを写真で埋める。
   　・clip-path で「その角の四角」だけに切る
   　・mask の円で、内がわの四分円をくり抜く（残るのは、まさに丸めたぶんの形）
   円の中心は、白い面の右下の丸みの中心とぴったり同じにしてある */
.about__card-photo-part--c{
  clip-path:inset(
    calc(var(--notch-h) - var(--cut-r))
    calc(100% - var(--notch-w))
    calc(100% - var(--notch-h))
    calc(var(--notch-w) - var(--cut-r))
  );
  -webkit-mask-image:radial-gradient(circle var(--cut-r)
    at calc(var(--notch-w) - var(--cut-r)) calc(var(--notch-h) - var(--cut-r)),
    rgb(0 0 0 / 0) calc(100% - .5px), rgb(0 0 0 / 1) 100%);
  mask-image:radial-gradient(circle var(--cut-r)
    at calc(var(--notch-w) - var(--cut-r)) calc(var(--notch-h) - var(--cut-r)),
    rgb(0 0 0 / 0) calc(100% - .5px), rgb(0 0 0 / 1) 100%);
}

/* 切り抜いたところに置く文字。地は札と同じ白なので、白い面が「のっている」ようには見えない。
   右下だけ丸めると、切り口の内がわの角も丸くなる */
.about__card--sub .about__card-body{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  display:block;
  width:calc(var(--card-p) + var(--notch-w));
  height:calc(var(--card-p) + var(--notch-h));
  padding:calc(var(--card-p) + clamp(11px,1.05vw,17px))
          clamp(14px,1.4vw,22px)
          0
          calc(var(--card-p) + clamp(9px,.85vw,15px));
  background:var(--bg);
  border-radius:var(--card-r) 0 var(--cut-r) 0;
}
/* 矢印は写真の上、右下に置く（2026-09-05 なおた様ご指示。まんなかから下げた）。
   大きさも、そのあとのご指示でひとまわり上げてある */
.about__card--sub .about__card-arrow{
  width:clamp(38px,3.2vw,50px);
  font-size:clamp(16px,1.3vw,20px);
  position:absolute;
  z-index:2;
  right:clamp(14px,1.4vw,24px);
  bottom:clamp(12px,1.2vw,20px);
}

/* ---------- 15-6b. ABOUT US の並べかえ（2026-09-06 なおた様ご指示・見本あり） ----------
   会社案内を左の大きい一枚のまま残し、右の四枚を「横長」から「正方形に近い小ぶり」に変えて
   たて二列に組み、左の列だけ下へずらす。
   🔴 白い角丸の札・切り抜いた写真・赤い丸の矢印の見た目は一切さわらない（お気に入りとのこと）。
   変えているのは、並べかたと大きさ、文字のひとまわり小さい指定だけ */
/* キャッチコピーを右の段の上へ移した（2026-09-06 なおた様ご指示）。
   左の段は 見出し＋会社案内 だけになるので、会社案内が上へ上がって背が伸びる。
   右の四枚は、上に文字が入ったぶん自然に下がる */
.about__grid{
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "col lead"
    "col cards";
}
.about__col{ grid-area:col; }
/* コピーだけをすこし下げる（2026-09-06 なおた様ご指示）。
   下のあきを同じぶん詰めているので、四枚の位置は動かない */
.about__lead{ grid-area:lead; margin:clamp(14px,1.8vw,32px) 0 clamp(6px,.7vw,14px); }
.about__cards{ grid-area:cards; }
.about__cards{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.5vw,26px);
}
.about__card--sub{
  aspect-ratio:1/1;
  /* 札が小さくなったぶん、名前と英字もひとまわり落とす。
     切り抜く幅はこの二つから組み立てているので、ここを直せば白い面も一緒に縮む */
  --nt:clamp(13px,1.05vw,17px);
  --ne:clamp(12px,.8vw,13px);
  --notch-h:clamp(48px,4.2vw,60px);
}
/* 左の列（一枚目と三枚目）だけ下へずらして、段ちがいにする */
.about__cards .about__card--sub:nth-child(1),
.about__cards .about__card--sub:nth-child(3){ margin-top:clamp(40px,5.4vw,96px); }
/* 右の列も、もうすこしだけ下げる（2026-09-06 なおた様ご指示） */
.about__cards .about__card--sub:nth-child(2),
.about__cards .about__card--sub:nth-child(4){ margin-top:clamp(16px,2vw,36px); }
/* 会社案内は右の高さに合わせて伸ばさず、下ばしを上げる（2026-09-06 なおた様ご指示）。
   段の高さいっぱいに伸びる指定をやめ、丈をこちらで決める */
.about__card--main{
  flex:0 0 auto;
  min-height:0;
  /* 下の終わりをもうすこし下へ（2026-09-06 なおた様ご指示） */
  height:clamp(356px,42vw,548px);
  /* 見出しとのあいだをあけて、札そのものもすこし下げる */
  margin-top:clamp(16px,2.2vw,40px);
}

/* 画面が狭いときは、見出し＋会社案内 → キャッチコピー → 四枚 のたて積みにする */
@media (max-width:1200px){
  .about__grid{
    grid-template-rows:auto auto auto;
    grid-template-areas:"col" "lead" "cards";
  }
  .about__lead{ margin:clamp(26px,4vw,46px) 0 clamp(20px,3vw,38px); }
}
@media (max-width:760px){
  /* 携帯は二列だと札が小さすぎるので、もとの横長一列に戻す */
  .about__cards{ grid-template-columns:1fr; }
  .about__cards .about__card--sub:nth-child(1),
  .about__cards .about__card--sub:nth-child(2),
  .about__cards .about__card--sub:nth-child(3),
  .about__cards .about__card--sub:nth-child(4){ margin-top:0; }
  .about__card--main{ height:auto; min-height:clamp(240px,60vw,380px); margin-top:0; }
  .about__card--sub{
    aspect-ratio:26/13;
    --nt:clamp(15px,4.2vw,20px);
    --ne:clamp(12px,3vw,13px);
    --notch-h:clamp(58px,15vw,72px);
  }
}

/* ---------- 15-7. CATALOG ---------- */
/* カタログのかたまりは 2026-09-06 にまるごと組み直したので、ここでの調整はなくなった */

/* ---------- 15-8. MOVIE ---------- */
/* テレビの絵をやめ、見出しのとなりに置くボタンにする（2026-09-05 なおた様ご指示。文言はそのまま） */
.movie__tv{
  position:static;
  width:auto;
  animation:none;
  display:inline-flex;
  align-items:center;
  gap:clamp(14px,1.4vw,24px);
  padding:clamp(13px,1.2vw,19px) clamp(22px,2.2vw,36px);
  border-radius:2px;
  background:var(--red);
  color:var(--ink-invert);
  transition:background .22s;
}
.movie__tv:hover{ background:var(--red-deep); }
.movie__tv img,
.movie__tv-screen{ display:none; }
.movie__tv-text{
  position:static;
  text-align:right;
  font-family:var(--font-ja);
  font-size:clamp(13px,1vw,16px);
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.9;
  color:var(--ink-invert);
}
/* 絵の中では3行に折っていた文言。1本の線として読ませたいので折り返しを解く
   （文字は一字も足していない・へらしていない） */
.movie__tv-text br{ display:none; }
.movie__tv-go{
  position:static;
  /* 幅の狭い画面で「こ／ち／ら」と一字ずつ折れてしまうので、ここは折らない */
  white-space:nowrap;
  flex:0 0 auto;
  height:auto;
  padding:0;
  border-radius:0;
  background:none;
  color:var(--ink-invert);
  font-size:clamp(14px,1.1vw,17px);
  font-weight:700;
  letter-spacing:.08em;
  gap:.5em;
}
.movie__tv-go-i{
  position:static;
  transform:none;
  width:auto;
  aspect-ratio:auto;
  border-radius:0;
  background:none;
  color:var(--ink-invert);
  font-size:1em;
}

/* 再生の丸は赤い面だけ。送りの矢印は白い丸に細い線 */
.movie__play{ border:0; }
.movie__nav{
  border:1px solid rgb(34 31 32 / .16);
  background:var(--bg);
  color:var(--ink);
}

/* ---------- 15-9. Sustainability ---------- */
.sus__body{ letter-spacing:.04em; }

/* ---------- 15-10. Contact ---------- */
/* 白い面は、左右をすこしだけ詰める（2026-09-05 なおた様ご指示） */
.contact__panel{
  width:min(100%, 1080px);
  margin-inline:auto;
}
.contact__lead{ letter-spacing:.04em; color:var(--ink-soft); }
/* ふたつの小箱の生成りをやめ、白い面のまま。分けるのは真ん中の細い線1本だけ */
.contact__col{
  background:none;
  padding:clamp(20px,2.4vw,40px) clamp(20px,2.6vw,44px);
}
.contact__cols{ gap:0; }
.contact__col h3{ font-weight:700; letter-spacing:.14em; font-size:clamp(13px,1vw,15px); }

/* ---------- 15-11. 動きも静かにする ---------- */
/* もとは「跳ねて出る」「ふわふわ揺れる」。跳ねをやめ、すっと現れるだけにする。
   跳ねはポップの正体そのものなので、見た目だけ静かにしても動くと元に戻ってしまう */
.about__lead.is-in .about__lead-ch{
  animation-name:lead-slide;
  animation-duration:.72s;
  animation-timing-function:cubic-bezier(.2,.7,.3,1);
  animation-delay:calc(var(--i) * .028s);
}
@keyframes lead-slide{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
/* ---------- 15-12. 画面が狭いとき ---------- */
@media (max-width:1200px){
  /* 縦に積む幅では、左右の二段組みをやめて、大きい一枚の下に細い四枚を並べる */
  .about__grid{ grid-template-columns:1fr; }
  .about__card--main{ min-height:clamp(220px,42vw,340px); }
  .about__cards{ align-content:start; }
  /* 縦に積むときは、上のふちだけの線になる。角丸が残ると線の両はしが浮くので落とす */
  .contact__col{ border-radius:0; padding-inline:0; }
  /* 横に並べるための縦線は消し、上のふちだけの線に置きかえる */
  .contact__col + .contact__col{
    border-left:0;
    border-top:1px solid rgb(34 31 32 / .12);
    padding-top:var(--gap-m);
    margin-top:var(--gap-m);
  }
}
@media (max-width:760px){
  /* 狭い画面では札は二枚ずつ。見出しの左はしも、キャッチコピーと同じ縦線にそろえ直す
     （この幅では .about__box の左右あきが --gap-s に変わるため） */
  .about__cards{ gap:12px; }
  /* 狭い画面では札の横幅が足りず、白いところが札のほとんどを占めてしまう。すこし縦を足す */
  .about__card--sub{ aspect-ratio:2.4/1; }
  /* 見出しの左はしも、キャッチコピーと同じ縦線にそろえ直す
     （この幅では .about__box の左右あきが --gap-s に変わるため） */
  .about__head{ padding-inline:var(--gap-s); }
  /* 札が小さいぶん、名前と丸い矢印も小さくして一行に収める */
  .about__card-title{ font-size:14px; }
  .about__card-en{ font-size:12px; letter-spacing:.1em; }
  .about__card--sub{ --nt:14px; --ne:12px; }
  .about__card-arrow{ width:28px; font-size:13px; }
  .btn-round{
    padding-inline:clamp(18px,5vw,26px) clamp(14px,4vw,20px);
    gap:12px;
    font-size:14px;
  }
  /* 見出しの下の日本語は、狭い画面では字間を詰めて1行に収める */
  .message__ja,
  .about__title-ja,
  .catalog__title-ja,
  .movie__title-ja{ font-size:13px; letter-spacing:.12em; gap:10px; }
  .message__ja::before,
  .about__title-ja::before,
  .catalog__title-ja::before,
  .movie__title-ja::before{ width:24px; }
}