/* ===== ここから下が今回の作業場所。自由に書き換えてよい ===== */
/* =============================================================
   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; }



/* ---------- 色・書体・余白の一覧 ---------- */
/* 赤は会社のしるしの絵から取った色。ほかの色と同じくたたき台 */
:root{
  /* 色 ── 赤は現行サイトの logo.svg から取った実値 */
  --red:            #f3011a;
  --ink:            #221f20;
  --ink-soft:       #707070;
  --ink-invert:     #ffffff;

  --bg:             #ffffff;
  --bg-grey:        #e8e8e8;
  --bg-grey-2:      #e3e2e2;
  --bg-grey-3:      #f2f2f2;
  --insta-1:        #f9a43c;  /* 公式Instagramのボタンの色（左から右へ） */
  --insta-2:        #ee2a7b;
  --insta-3:        #8a3ab9;  /* メンバーの投稿カードの絵の地と同じ灰色 */
  --bg-box:         #b4b4b4;
  --bg-circle:      #e7e7e7;
  --panel:          #4b4b4b;
  --panel-deep:     #353133;  /* 黒い地の上に置く枠（オリジナルブランドの商品ラインナップ） */

  --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;
  /* 下層の見出しの帯の地。ごく薄い生成り（2026-10-21 追加） */
  --bg-soft:       #f5f3f0;
  /* 会社案内のビジョンの角丸の箱の地（2026-10-21 追加） */
  --bg-card:       #f4f4f4;
  --red-pale:       #fdeeef;  /* 赤のごく薄い地（しくみの図の矢印） */
  --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{ display:block; }
.fv__en-l2{ display:block;
  /* 二行目だけ斜体にして、すこし右へずらす */
  font-style:italic;
  font-size:1.03em;
  margin-left:calc(var(--fv-en) * .30);
}
.fv__en-l3{ display:block;
  /* 三行目は小さく、さらに右へ。ここで大小の差をつける */
  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);
  /* 角はほぼ落とす。丸みはほんの少しだけ残して、かたくなりすぎないようにする */
  border-radius:3px;
  /* 影は落とさない。浮かせずに、地の上へ静かに置く */
  box-shadow:none;
  /* 赤い太枠の箱をやめ、白い面と広い余白だけで見せる */
  border:0;
  padding:clamp(48px,6vw,110px) clamp(28px,5vw,96px);
}
.message__head{
  display:block;
  gap:0;
  padding-bottom:0;
  border-bottom:0;
  margin-bottom:var(--gap-m);
  text-align:left;
  /* 見出しも本文も中央ぞろえ（2026-09-05 決定）。
   本文は <br> を文の切れ目 3か所だけに減らしてある（文字は一字も変えていない） */
  text-align:center;
}
.message__en,
.lw-title__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;
  /* 見出しの英字は、頭の一文字だけ大文字。文言そのものは一文字も変えていない（見え方の指定だけ） */
  text-transform:lowercase;
}
/* 見出しの右の赤い四角ひとつ。文字の足もとにそろえて置く */
.message__en::before,
.lw-title__en::before{ display:none; }
.message__en::after,
.lw-title__en::after{
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
}
.message__ja,
.lw-title__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);
  /* 見出しの下の日本語は、小さく・赤く・字間をあけて、左に短い赤棒を添える。
   調味料サイトの見出しと同じ組み方（あちらは日本語が上。こちらは英字が主役なので下に置く） */
  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);
  justify-content:center;
}
.message__body{
  font-size:clamp(15px,1.15vw,18px);
  line-height:2.05;
  text-align:left;
  /* 一行が長すぎると中央ぞろえが読みにくい。1行を 40 文字前後に収める */
  max-width:44em;
  margin-inline:auto;
  text-align:center;
  line-height:2.15;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

/* ---------- 7. ABOUT US ---------- */
/* セクションの地は流れる帯の中と同じ生成り */
.about{ overflow:hidden; padding-block:0 var(--gap-s); background:var(--pop-cream);
  /* 地を写真＋黒マスクにする（2026-09-05 決定。参考＝出前館の採用サイト）。
   写真は届いている食べ物の写真。本番の写真が決まったら、下の url を差しかえるだけでよい
   （2026-09-05 差しかえ：仮の事務所写真 → キーの2番＝白い角皿がたくさん並んだ俯瞰） */
  position:relative;
  background-color:var(--ink);
  background-image:url("../images/kv-002.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.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);
  border-radius:3px;
  /* 見出しが箱の中に入ったぶん、上下のあきは箱の側で取る */
  padding-block:clamp(52px,6vw,110px) clamp(44px,5vw,90px);
}
/* 見出しの帯。前の赤い帯にすき間なくつけ、すこしだけ傾ける */
.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);
  border-block:1px solid rgb(34 31 32 / .16);
  /* 流れる帯は、太い黒字から細い墨字へ。傾きも取ってまっすぐにする */
  transform:none;
  padding-block:clamp(16px,1.6vw,28px);
}
.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;
  font-family:var(--font-en-geo);
  font-weight:400;
  font-size:clamp(28px,3.8vw,64px);
  letter-spacing:.12em;
  color:var(--ink-soft);
}
@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;
  /* 左に「会社案内」の大きい一枚、右に細い四枚。この並びで決定（2026-09-05） */
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,2.4vw,48px);
  align-items:stretch;
  /* キャッチコピーを右の段の上へ移した（2026-09-06 決定）。
   左の段は 見出し＋会社案内 だけになるので、会社案内が上へ上がって背が伸びる。
   右の四枚は、上に文字が入ったぶん自然に下がる */
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "col lead"
    "col cards";
}
/* 大きな縦長の雲。中にキャッチコピーと会社案内を入れる */
.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%;
  display:none;
}
.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;
  color:var(--ink-invert);
  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-06 決定）。
   下のあきを同じぶん詰めているので、四枚の位置は動かない */
  grid-area:lead; margin:clamp(14px,1.8vw,32px) 0 clamp(6px,.7vw,14px);
}
/* 「食」「世」の頭を、もう一文字ぶん左へ（2026-08-20 要望）。
   🔴 広い画面だけに当てる。1440px 未満で当てると、雲の左余白が足りず
   「食」「世」が画面の外へ 12px はみ出して欠ける（2026-08-20 実測） */
@media (min-width:1441px){
  .about__lead{ margin-left:-14%; margin:0 0 clamp(26px,3vw,52px); margin:clamp(14px,1.8vw,32px) 0 clamp(6px,.7vw,14px); }
}
/* 案内の四角。赤地に白い見出しと丸い矢印、下に写真。境目は波 */
.about__cards{
  position:relative;
  display:grid;
  gap:var(--gap-m);
  align-content:center;
  display:grid;
  gap:clamp(12px,1.3vw,22px);
  align-content:start;
  grid-area:cards;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.5vw,26px);
}
.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);
  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--main{ aspect-ratio:26/18; margin:0 7% 0 -7%;
  /* もとは雲の中で左へ 7% はみ出させていた。いまは箱の中なので、はみ出しは戻す */
  margin:0;
  aspect-ratio:auto;
  flex:1 1 auto;
  min-height:clamp(240px,22vw,380px);
  /* 名前・英字・矢印をひとまわり大きく、写真はそのぶん小さく、まわりのあきも広く
   （2026-09-05 決定） */
  --card-p:clamp(17px,1.6vw,26px);
  /* 会社案内は右の高さに合わせて伸ばさず、下ばしを上げる（2026-09-06 決定）。
   段の高さいっぱいに伸びる指定をやめ、丈をこちらで決める */
  flex:0 0 auto;
  min-height:0;
  /* 下の終わりをもうすこし下へ（2026-09-06 決定） */
  height:clamp(356px,42vw,548px);
  /* 見出しとのあいだをあけて、札そのものもすこし下げる */
  margin-top:clamp(16px,2.2vw,40px);
}
.about__card:hover{ transform:translateY(-12px) scale(1.015);
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgb(0 0 0 / .28);
}
/* キャッチコピーは一文字ずつ跳ねて出る */
.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);
  /* もとは「跳ねて出る」「ふわふわ揺れる」。跳ねをやめ、すっと現れるだけにする。
   跳ねはポップの正体そのものなので、見た目だけ静かにしても動くと元に戻ってしまう */
  animation-name:lead-slide;
  animation-duration:.72s;
  animation-timing-function:cubic-bezier(.2,.7,.3,1);
  animation-delay:calc(var(--i) * .028s);
}
@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; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
  .about__lead-ch{ opacity:1; }
  .about__lead.is-in .about__lead-ch{ animation:none; animation-name:lead-slide; animation-duration:.72s; animation-timing-function:cubic-bezier(.2,.7,.3,1); animation-delay:calc(var(--i) * .028s); }
  /* 動きを減らす設定の人には、カテゴリの並びも動かさずに見せる */
  .cat-panel{ transition:none; }
}
.about__card--sub { aspect-ratio:5/2;
  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);
  aspect-ratio:1/1;
  /* 札が小さくなったぶん、名前と英字もひとまわり落とす。
     切り抜く幅はこの二つから組み立てているので、ここを直せば白い面も一緒に縮む */
  --nt:clamp(13px,1.05vw,17px);
  --ne:clamp(12px,.8vw,13px);
  --notch-h:clamp(48px,4.2vw,60px);
}
.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;
  /* 赤い丸に白い矢印 */
  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-photo{
  position:absolute;
  inset:auto clamp(6px,.55vw,9px) clamp(6px,.55vw,9px);
  display:block;
  height:60%;
  overflow:hidden;
  border-radius:34px;
  /* 写真。札の角丸より内側なので、丸みはひとまわり小さくする */
  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;
  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;
  text-transform:lowercase;
}
.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);
  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);
}

.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{ position:relative; z-index:1;
  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__tag{ position:relative; z-index:1;
  /* 上下の細い英字 */
  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 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;
  /* 楕円のボタンをやめ、角を落とした帯に。白い丸は外して矢印だけ残す */
  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{
  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;
  width:auto;
  aspect-ratio:auto;
  border-radius:0;
  background:none;
  color:var(--ink-invert);
  font-size:1em;
}
.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;
  display: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);
  border-radius:3px;
}
.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;
  text-transform:lowercase;
}
.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);
  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);
}
/* テレビの絵ぜんたいが、動画の置き場へ行くボタン。
   絵の画面部分はすき通った穴なので、うしろに黄色い面を敷いて画面にする */
.movie__tv{
  z-index:2;
  position:relative;
  flex:0 0 auto;
  width:min(26vw,310px);
  /* テレビの絵をやめ、見出しのとなりに置くボタンにする（2026-09-05 決定。文言はそのまま） */
  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;
}
/* もとはずっと揺れていた。2026-09-06 の決定で、動きはすべてやめた */
.movie__tv img{ position:relative; z-index:1; display:block; width:100%;
  display:none;
}
/* 画面。まわりのふちが上にかぶさって、穴の形に切り抜かれて見える */
.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%;
  display:none;
}
.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);
  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);
}
/* 画面の下の赤いボタン */
.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;
  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: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;
  position:static;
  transform:none;
  width:auto;
  aspect-ratio:auto;
  border-radius:0;
  background:none;
  color:var(--ink-invert);
  font-size:1em;
}

/* まんなかを大きく、両わきに次のものを少しだけ見せる */
.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);
  /* 太い黒のふちは引く。線を引くときは髪の毛ほどの細さで */
  border:0;
  border-radius:3px;
}
.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);
  /* 再生の丸は赤い面だけ。送りの矢印は白い丸に細い線 */
  border:0;
}
.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;
  border:1px solid rgb(34 31 32 / .16);
  background:var(--bg);
  color:var(--ink);
}
/* 両わきの小さい四角と、まんなかの四角のあいだにまたがせる */
.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);
  border:0;
  border-radius:3px;
}
.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;
  text-transform:lowercase;
}
.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);
  letter-spacing:.04em;
}
.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; }


/* 手作りの文字のシール。かたむけて、ぽんと置く */
.sticker{
  position:absolute;
  z-index:3;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 8px 16px rgb(34 31 32 / .16));
  /* 貼り紙・くるくる回る丸・雲のかたち。写真の波形はカードのデザインごと元に戻したので残す */
  display:none;
}
.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); padding:clamp(48px,6vw,110px) clamp(28px,5vw,96px); }
  .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);
  border-radius:3px;
  /* 白い面は、左右をすこしだけ詰める（2026-09-05 決定） */
  width:min(100%, 1080px);
  margin-inline:auto;
}
/* 見出しはほかのかたまりと同じ組み方（赤い四角ひとつ） */
.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;
  text-transform:lowercase;
}
.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;
  letter-spacing:.04em; color:var(--ink-soft);
}
.contact__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,1.8vw,32px);
  margin-top:clamp(24px,2.8vw,46px);
  gap:0;
}
/* ふたつの小箱。生成り＋黒ふちの角丸 */
.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);
  border:0;
  border-radius:3px;
  /* ふたつの小箱の生成りをやめ、白い面のまま。分けるのは真ん中の細い線1本だけ */
  background:none;
  padding:clamp(20px,2.4vw,40px) clamp(20px,2.6vw,44px);
}
.contact__col + .contact__col{ border-left:3px solid var(--ink);
  border-left:1px solid rgb(34 31 32 / .12);
}
.contact__col h3{
  font-family:var(--font-ja);
  font-size:clamp(14px,1.15vw,19px);
  font-weight:700;
  letter-spacing:.02em;
  font-weight:700; letter-spacing:.14em; font-size:clamp(13px,1vw,15px);
}
.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-10-21 先方の希望）。
   上の赤い帯の続き（::before）の上に、横幅より少し大きい白い円（::after）を重ね、中身は真ん中にそろえる */
.site-footer{
  position:relative;
  background:var(--bg);
  padding-block:clamp(56px,6vw,100px) var(--gap-m);
  padding-inline:clamp(24px,5.4vw,96px);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:
    ".    logo   ."
    ".    office ."
    ".    nav    ."
    "sns  bnr    ."
    ".    copy   .";
  justify-items:center;
  align-items:center;
  text-align:center;
  column-gap:var(--gap-m);
  row-gap:clamp(24px,2.6vw,40px);
}
.site-footer::before,
.site-footer::after{ content:""; position:absolute; z-index:0; pointer-events:none; }
.site-footer::before{ left:0; top:0; width:100%; aspect-ratio:100 / 40; background:var(--red); }
.site-footer::after{ left:-4%; top:0; width:108%; aspect-ratio:1; border-radius:50%; background:var(--bg); }
.site-footer > *{ position:relative; z-index:1; }
.site-footer__logo{ grid-area:logo; }
.site-footer__logo img{ width:clamp(230px,25vw,380px); }
.footer__sns{ grid-area:sns; justify-self:start; display:flex; gap:var(--gap-s); }
.footer__sns img{ width:32px; height:32px; }
.footer__offices{
  grid-area:office;
  display:flex;
  justify-content:center;
  gap:clamp(24px,4vw,72px);
  text-align:left;
  font-size:15px;
}
.footer__nav{
  grid-area:nav;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  max-width:640px;
  gap:var(--gap-xs) clamp(14px,1.6vw,24px);
  font-size:13px;
}
.footer__nav a{ white-space:nowrap; transition:color .2s; }
.footer__nav a:hover{ color:var(--red); }
.footer__bottom{
  grid-area:bnr;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  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;
  transition:border-color .2s, color .2s;
}
.footer__bnr:hover{ border-color:var(--red); color:var(--red); }
.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);
    grid-template-areas:
      "logo"
      "office"
      "nav"
      "sns"
      "bnr"
      "copy";
    row-gap:var(--gap-m);
    /* 細い画面では円の頂上がとがって見えるので、しるしを少し下げて円の中に収める */
    padding-top:clamp(90px,24vw,140px);
  }
  .footer__sns{ justify-self:center; }
  .footer__bnr{ flex:1 1 240px; }
}
@media (max-width:760px){
  .footer__offices{ flex-direction:column; gap:var(--gap-m); }
  .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{ grid-template-columns:1fr; }
.about__grid{ grid-template-columns:1fr; grid-template-columns:1.1fr .9fr;
  grid-template-rows:auto auto auto;
    grid-template-areas:"col" "lead" "cards";
  /* 縦に積む幅では、左右の二段組みをやめて、大きい一枚の下に細い四枚を並べる */
  grid-template-columns:1fr;
}
.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; margin:0 0 clamp(26px,3vw,52px); margin:clamp(14px,1.8vw,32px) 0 clamp(6px,.7vw,14px);
  margin:clamp(26px,4vw,46px) 0 clamp(20px,3vw,38px);
}
  .about__card--main{ margin:0 4% 0 0; margin:0; margin-top:clamp(16px,2.2vw,40px);
  min-height:clamp(220px,42vw,340px);
}
  .contact__col + .contact__col{ border-left:0; border-top:1px solid var(--line); padding-top:var(--gap-m); margin-top:var(--gap-m); border-left:1px solid rgb(34 31 32 / .12);
  /* 横に並べるための縦線は消し、上のふちだけの線に置きかえる */
  border-left:0;
    border-top:1px solid rgb(34 31 32 / .12);
    padding-top:var(--gap-m);
    margin-top:var(--gap-m);
}
  .movie__tv{ width:min(32vw,260px); width:auto; }
}

/* ---------- ヘッダーのロゴを「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; border-radius:3px; border:0; padding:clamp(48px,6vw,110px) clamp(28px,5vw,96px); }
  /* 狭い画面では決まった位置での改行をやめて、自然に折り返す */
  .message__body br{ display:none; }
  .message__body{ line-height:1.95; line-height:2.15; }
  /* ステッカーはさらに左へ64px。キャラに隠れて「SANKY」で切れていた文字を全部見せるための最小値
     （左48pxだと ENJOY が隠れることを画素で確認済み） */
  .sticker--message{ bottom:-26px; right:104px; }
  .about__box{ padding:var(--gap-m) var(--gap-s); padding-block:clamp(52px,6vw,110px) clamp(44px,5vw,90px); }
  .about__card--sub{ aspect-ratio:26/13; aspect-ratio:2.9/1; aspect-ratio:1/1;
  aspect-ratio:26/13;
    --nt:clamp(15px,4.2vw,20px);
    --ne:clamp(12px,3vw,13px);
    --notch-h:clamp(58px,15vw,72px);
  /* 狭い画面では札の横幅が足りず、白いところが札のほとんどを占めてしまう。すこし縦を足す */
  aspect-ratio:2.4/1;
  --nt:14px; --ne:12px;
}
  .about__card{ border-radius:30px; border:0; border-radius:var(--card-r); }
  .about__card-photo{ border-radius:24px; border-radius:calc(var(--card-r) - 7px); }
  .cloud{ padding:22% 15% 20% 3%; }
  .about__lead{ margin:-2% 0 var(--gap-m); font-size:clamp(23px,6.8vw,32px); margin:0 0 clamp(26px,3vw,52px); font-size:clamp(24px,3.1vw,50px); margin:clamp(14px,1.8vw,32px) 0 clamp(6px,.7vw,14px); margin:clamp(26px,4vw,46px) 0 clamp(20px,3vw,38px); }
  .about__card--main{ margin:0; margin:0; margin-top:clamp(16px,2.2vw,40px);
  height:auto; min-height:clamp(240px,60vw,380px); margin-top:0; min-height:clamp(220px,42vw,340px); }
  .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; width:auto; }
  .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; border-radius:3px; }
  .sus__panel{ border-radius:26px; border:0; border-radius:3px; }
  .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); border-left:1px solid rgb(34 31 32 / .12); border-left:0; }
  .contact__panel{ border-radius:26px; border-radius:3px; }
  .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. 出さないもの ---------- */


/* ---------- 15-2. 見出し ---------- */
/* 英字のよこの赤い丸ふたつは、決定によりそのまま残す（2026-09-05）。
   ABOUT US の見出しにも同じ丸をつけて、5つのかたまりでそろえる */
.about__title-en{
  position:relative;
  display:inline-block;
  padding-right:.34em;
  text-transform:lowercase;
  /* 沈めた地の上なので、見出しとキャッチコピーは白で */
  color:var(--ink-invert);
}
.about__title-en::before{
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
  /* 数値はほかの見出し（.message__en）とまったく同じ */
  display:none;
}
.about__title-en::after{
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
  content:"";
  position:absolute;
  border-radius:0;
  background:var(--red);
  right:.11em; top:.685em; width:.135em; height:.135em;
}



.message__en::first-letter,
.lw-title__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;
}


.about__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,
.lw-title__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. ふち・角・影 ---------- */






/* ---------- 15-4. ボタン ---------- */


/* ---------- 15-5. MESSAGE ---------- */



/* ---------- 15-6. ABOUT US ---------- */

/* 黒マスク。写真の上に一枚かぶせて、白い文字が読めるところまで沈める */
.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; }



/* 流れる帯はやめ、ほかのかたまりと同じ見出しにした（2026-09-05 決定） */
/* 🔴 見出しは左の段の中へ入れた（2026-09-05 決定）。
   これで「右の一枚目の上ばし」と「見出しの上ばし」が、計算せずに同じ高さでそろう。
   左はしがキャッチコピーとそろうのも、同じ段の中にいるので自動 */
.about__head{
  padding-bottom:clamp(14px,1.8vw,30px);
}

.about__title{ display:block; }



.about__col{
  display:flex;
  flex-direction:column;
  grid-area:col;
}

/* ---------- 案内の札（2026-09-05 決定で作り直し） ----------
   白い角丸の札。中は 写真 と 日本語（墨）＋英字（赤・小さめ）、赤い丸に白い矢印。
   左の一枚は写真が上・文字が下。右の四枚は写真が全面で、左上に白い面をのせて文字を置く */

.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:hover .about__card-arrow{ background:var(--red-deep); }

/* ---------- 左の大きい一枚（写真が上・文字が下） ---------- */
.about__card--main .about__card-photo{
  /* 🔴 もとの寸法を基準にすると、写真そのものの縦横比で札の高さが決まってしまい、
     右の四枚より背が高くなって下ばしがそろわない。基準を持たせずに、あまりを埋めさせる */
  flex:1 1 0;
  min-height:0;
}

.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 .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)));
  /* 左の列（一枚目と三枚目）だけ下へずらして、段ちがいにする */
  margin-top:clamp(40px,5.4vw,96px);
}
.about__cards .about__card--sub:nth-child(2){ --notch-w:calc(var(--npad) + max(4.11 * var(--nt), 8.95 * var(--ne)));
  /* 右の列も、もうすこしだけ下げる（2026-09-06 決定） */
  margin-top:clamp(16px,2vw,36px);
}
.about__cards .about__card--sub:nth-child(3){ --notch-w:calc(var(--npad) + max(4.11 * var(--nt), 6.55 * var(--ne)));
  margin-top:clamp(40px,5.4vw,96px);
}
.about__cards .about__card--sub:nth-child(4){ --notch-w:calc(var(--npad) + max(6.2 * var(--nt), 4.8 * var(--ne)));
  margin-top:clamp(16px,2vw,36px);
}
.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 決定・見本あり） ----------
   会社案内を左の大きい一枚のまま残し、右の四枚を「横長」から「正方形に近い小ぶり」に変えて
   たて二列に組み、左の列だけ下へずらす。
   🔴 白い角丸の札・切り抜いた写真・赤い丸の矢印の見た目は一切さわらない（お気に入りとのこと）。
   変えているのは、並べかたと大きさ、文字のひとまわり小さい指定だけ */






/* 画面が狭いときは、見出し＋会社案内 → キャッチコピー → 四枚 のたて積みにする */

@media (max-width:760px){
  /* 携帯は二列だと札が小さすぎるので、もとの横長一列に戻す */
  .about__cards{ grid-template-columns:1fr;
  /* 狭い画面では札は二枚ずつ。見出しの左はしも、キャッチコピーと同じ縦線にそろえ直す
     （この幅では .about__box の左右あきが --gap-s に変わるため） */
  gap:12px;
}
  .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; }
    }

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

/* ---------- 15-8. MOVIE ---------- */

.movie__tv:hover{ background:var(--red-deep); }
/* 絵の中では3行に折っていた文言。1本の線として読ませたいので折り返しを解く
   （文字は一字も足していない・へらしていない） */
.movie__tv-text br{ display:none; }



/* ---------- 15-9. Sustainability ---------- */

/* ---------- 15-10. Contact ---------- */



/* ---------- 15-11. 動きも静かにする ---------- */

@keyframes lead-slide{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
/* ---------- 15-12. 画面が狭いとき ---------- */
@media (max-width:1200px){
  
      .about__cards{ align-content:start; }
  /* 縦に積むときは、上のふちだけの線になる。角丸が残ると線の両はしが浮くので落とす */
  .contact__col{ border-radius:0; padding-inline:0; }
  
  }
@media (max-width:760px){
  
    
    /* 見出しの左はしも、キャッチコピーと同じ縦線にそろえ直す
     （この幅では .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-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,
  .lw-title__ja,
  .about__title-ja,
  .catalog__title-ja,
  .movie__title-ja{ font-size:13px; letter-spacing:.12em; gap:10px; }
  .message__ja::before,
  .lw-title__ja::before,
  .about__title-ja::before,
  .catalog__title-ja::before,
  .movie__title-ja::before{ width:24px; }
}









/* =============================================================
   下層ページ（2026-10-20 追加）
   ワイヤーの配置をそのまま写した下地です。見た目はまだ何も決めていません。
   灰色の枠・細い線は「ここに何が入るか」の目印なので、全部自由に作り変えてかまいません。
   スマホは縦に積んであるだけです。
   ============================================================= */
/* 見出しの帯（2026-10-21）。薄い地に、ページ名を左に大きく、道しるべをその下に。
   右に、赤と灰色の丸と楕円を斜めにつらねた飾り（写真を使わず色と形だけで作る） */
.lw-pagehead{
  position:relative;
  overflow:clip;
  min-height:clamp(260px,24vw,340px);
  background:var(--bg-soft);
  border-bottom:1px solid var(--line-soft);
}
.lw-pagehead__inner{
  position:relative; z-index:1;
  width:min(100% - var(--gap-m)*2, 1500px);
  min-height:inherit;
  margin-inline:auto;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:var(--gap-l) var(--gap-m);
}
.lw-pagehead__title{ display:flex; flex-direction:column; gap:clamp(10px,1vw,16px); }
/* ページ名は英字を大きく、その下に日本語を小さく（2026-10-21） */
.lw-pagehead__en{
  font-family:var(--font-en-grot);
  font-size:clamp(52px,6.4vw,100px);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--ink);
}
.lw-pagehead__ja{
  font-family:var(--font-ja);
  font-size:clamp(17px,1.4vw,20px);
  font-weight:700;
  letter-spacing:.18em;
  line-height:1.6;
  color:var(--ink);
}
.lw-crumb{ margin-top:auto; padding-top:var(--gap-l); font-size:13px; letter-spacing:.06em; color:var(--ink); }
.lw-crumb a{ color:inherit; }
.lw-crumb__current{ color:var(--red); }
.lw-pagehead__deco{
  position:absolute; right:clamp(-120px,-4vw,-20px); top:-90px;
  width:clamp(320px,42vw,640px); aspect-ratio:1;
  pointer-events:none;
  container-type:inline-size;
}
/* 開いたとき、右上の外から一枚ずつ、カードを配るように順に飛んできて置かれる */
.lw-pagehead__deco i{
  position:absolute; display:block; border-radius:50%;
  --from-x:44cqw; --from-y:-40cqw;
  animation:lw-deco-deal .55s cubic-bezier(.3,1.25,.5,1) both;
}
.lw-pagehead__deco i:nth-child(1){ z-index:2; }
.lw-pagehead__deco i:nth-child(2){ --from-x:64cqw; --from-y:-70cqw; animation-delay:.18s; }
.lw-pagehead__deco i:nth-child(3){ --from-x:86cqw; --from-y:-90cqw; animation-delay:.36s; }
@keyframes lw-deco-deal{
  from{ translate:var(--from-x) var(--from-y); rotate:50deg; scale:.85; }
}
@media (prefers-reduced-motion: reduce){
  .lw-pagehead__deco i{ animation:none; }
}
.lw-pagehead__deco i:nth-child(1){ left:56%; top:0; width:42%; aspect-ratio:1; background:linear-gradient(160deg,var(--pop-pink),var(--red)); opacity:.85; }
.lw-pagehead__deco i:nth-child(2){ left:36%; top:30%; width:32%; height:20%; transform:rotate(-45deg); background:var(--bg-grey-2); }
.lw-pagehead__deco i:nth-child(3){ left:14%; top:50%; width:38%; aspect-ratio:1; background:linear-gradient(200deg,var(--red),var(--red-deep)); opacity:.9; }

/* セクション */
.lw-sec{ padding-block:var(--gap-l); }
/* 塊の見出しは、表紙の MESSAGE と同じ形（英字の大見出し＋赤い四角＋赤い小さな日本語） */
.lw-title{ display:block; text-align:center; margin-bottom:var(--gap-l); }
.lw-title__sep{ display:none; }
/* 略語（CSR・SDGs）は小文字にしない */
.lw-title__keep{ text-transform:none; }
.lw-lead{ text-align:center; font-size:clamp(15px,1.15vw,17px); font-weight:500; line-height:2.1; letter-spacing:.06em; color:var(--ink); }
.lw-sub{ font-weight:700; color:var(--ink-soft); margin-bottom:var(--gap-xs); }

/* 並べ方 */
.lw-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap-m); align-items:start; }
.lw-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-m); }
.lw-grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap-m); }
.lw-stack > * + *{ margin-top:var(--gap-m); }
.lw-box{ border:1px solid var(--line); border-radius:var(--r-s); padding:var(--gap-m); }

/* 画像の枠 */
.lw-ph{ width:100%; position:relative; }
.lw-ph--circle{ border-radius:50%; }
.lw-ph__label{ position:relative; z-index:1; font-weight:700; text-align:center; padding:var(--gap-xs); }
.lw-fig{ display:block; margin-inline:auto; max-width:100%; }

/* 表・ボタン */
.lw-table{ width:100%; border-collapse:collapse; font-size:14px; }
.lw-table th{ border-bottom:1px solid var(--line-soft); padding:var(--gap-xs) var(--gap-s); text-align:left; vertical-align:top;
  width:30%; font-weight:400; color:var(--ink-soft);
}
.lw-table td{ border-bottom:1px solid var(--line-soft); padding:var(--gap-xs) var(--gap-s); text-align:left; vertical-align:top; }
.lw-btn{ display:inline-block; border:1px solid var(--line); border-radius:999px; padding:6px 28px; }

@media (max-width:760px){
  .lw-cols, .lw-grid-3, .lw-grid-4{ grid-template-columns:minmax(0,1fr); }
  .lw-pagehead{ min-height:220px; }
  .lw-pagehead__en{ font-size:35px; }
  .lw-pagehead__ja{ font-size:15px; letter-spacing:.12em; }
  .lw-crumb{ padding-top:var(--gap-m); font-size:12px; }
  .lw-pagehead__deco{ width:200px; right:-90px; top:-50px; }
}

/* ---------- 事業紹介（business.html） ---------- */
/* 上段：左に文章、右に写真二枚。その下に中央ぞろえの技術の話 */
.p-business__intro-text{ padding:clamp(28px,3.6vw,52px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 2px 24px rgba(0,0,0,.08); }
.p-business__intro{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center; max-width:1200px; margin:var(--gap-l) auto 0; }
.p-business__lead{ font-size:15px; line-height:2.1; letter-spacing:.04em; color:var(--ink); text-align:center; }
.p-business__cat{ margin-top:0; font-size:clamp(20px,1.9vw,28px); font-weight:700; line-height:1.5; letter-spacing:.06em; color:var(--ink); }
.p-business__cat::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
.p-business__cat-sub{ display:block; margin-top:6px; font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--red); }
.p-business__intro .p-business__list{ margin-top:var(--gap-m); padding:clamp(20px,2.4vw,32px) clamp(20px,2.6vw,36px); border-radius:var(--r-m); background:var(--bg-soft); }
.p-business__list-title{ display:inline-block; padding:6px 18px; border-radius:999px; background:var(--red); color:var(--ink-invert); font-size:14px; font-weight:700; letter-spacing:.08em; }
.p-business__items{ list-style:none; margin:var(--gap-s) 0 0; padding:0; }
.p-business__items li{ position:relative; padding-left:1.2em; font-size:15px; line-height:2; color:var(--ink); }
.p-business__items li::before{ content:""; position:absolute; left:0; top:.8em; width:.45em; height:.45em; border-radius:50%; background:var(--red); }
/* 文章の下の赤い線＝ひと区切りの線。中身の幅いっぱいに引き、画面に入ると左から右へしゅっと引かれる */
.p-business__lead::after,
.p-business__tech p::after{ content:""; display:block; height:2px; margin-block:clamp(48px,5vw,80px) clamp(16px,2vw,32px); margin-inline:calc(50% - min(600px, 50vw - 32px)); background:var(--red); transform-origin:left center; }
.js-reveal .p-business__lead[data-reveal]::after,
.js-reveal .p-business__tech p[data-reveal]::after{ transform:scaleX(0); transition:transform .7s cubic-bezier(.65,0,.35,1) .2s; }
.js-reveal .p-business__lead.is-in::after,
.js-reveal .p-business__tech p.is-in::after{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .js-reveal .p-business__lead[data-reveal]::after,
  .js-reveal .p-business__tech p[data-reveal]::after{ transform:none; transition:none; }
}
.p-business__tech + .p-business__intro{ margin-top:clamp(80px,9vw,140px); }
.p-business__tech{ max-width:860px; margin:clamp(64px,7vw,var(--gap-xl)) auto 0; text-align:center; }
.p-business__tech-head{ font-size:clamp(22px,2.2vw,32px); font-weight:700; line-height:1.5; letter-spacing:.06em; color:var(--ink); }
.p-business__tech-en{ display:block; margin-bottom:10px; font-family:var(--font-en-geo); font-size:14px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.p-business__tech-head::after{ content:""; display:block; width:40px; height:3px; margin:var(--gap-s) auto 0; background:var(--red); }
.p-business__tech p{ margin-top:var(--gap-m); font-size:15px; line-height:2.2; letter-spacing:.04em; color:var(--ink); }
.p-business__row{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--gap-l); margin-top:var(--gap-xl); align-items:center; }
.p-business__row.is-flip{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.p-business__row.is-flip .p-business__photos{ order:2; }
.p-business__photos{ position:relative; display:grid; }
.p-business__photos .lw-ph:first-child{ width:85%; }
.p-business__photos .lw-ph:last-child{ width:55%; margin-top:-18%; }
.p-business__row.is-flip .p-business__photos .lw-ph:first-child{ justify-self:end; }
.p-business__row.is-flip .p-business__photos .lw-ph:last-child{ justify-self:end; margin-right:-5%; }
.p-business__head{ font-size:18px; color:var(--ink-soft); margin-block:var(--gap-s) var(--gap-xs); }
.p-business__list{ margin-top:var(--gap-s); }
/* 上段の写真二枚は、右上に大きい一枚、その左下に小さい一枚をずらして重ねる（下の段のずらし配置より後ろに置いて上書き） */
.p-business__intro .p-business__photos{ grid-template-columns:minmax(0,1fr); }
.p-business__intro .p-business__photos .lw-ph{ border-radius:var(--r-m); overflow:hidden; }
.p-business__intro .p-business__photos .lw-ph:first-child{ width:76%; justify-self:end; margin:0; }
.p-business__intro .p-business__photos .lw-ph:last-child{ position:relative; z-index:1; width:54%; justify-self:start; margin:-22% 0 0; }
@media (max-width:760px){
  .p-business__row, .p-business__row.is-flip{ grid-template-columns:minmax(0,1fr); }
  .p-business__intro{ grid-template-columns:minmax(0,1fr); }
  .p-business__lead br, .p-business__tech p br{ display:none; }
  .p-business__lead{ text-align:left; }
  .p-business__tech p{ text-align:left; }
  .p-business__row.is-flip .p-business__photos{ order:0; }
}

/* ---------- 会社案内（company.html） ---------- */
.p-company-greeting{ padding-bottom:0; }
/* 代表の写真は角丸の四角。スクロールにつれて大きくなり、画面の幅いっぱいまで広がる（2026-10-21） */
.p-company__greeting{
  width:min(100% - var(--gap-m)*2, 992px);
  margin-inline:auto;
  border-radius:var(--r-l);
  overflow:clip;
}
.p-company__greeting img{
  display:block; width:100%; height:auto;
  aspect-ratio:1200 / 621;
  max-height:calc(100svh - var(--header-h));
  object-fit:cover;
}
@supports (animation-timeline: view()){
  .p-company__greeting{
    animation:p-company-greeting-grow linear both;
    animation-timeline:view();
    animation-range:entry 10% cover 50%;
  }
  @keyframes p-company-greeting-grow{
    to{ width:100%; border-radius:0; }
  }
}
@media (prefers-reduced-motion: reduce){
  .p-company__greeting{ animation:none; }
}
/* ビジョン：上に赤い大きな見出し、下に灰色の角丸の箱を三つ（2026-10-21） */
.p-company__vision-lead{
  font-family:var(--font-en-grot);
  font-size:clamp(56px,6.4vw,100px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--red);
  margin-bottom:clamp(40px,5vw,80px);
}
.p-company__vision{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,9fr);
  gap:var(--gap-m) var(--gap-l); align-items:center;
  padding:clamp(40px,4.4vw,72px) clamp(32px,5vw,96px);
  background:var(--bg-card);
  border-radius:var(--r-l);
}
.p-company__vision + .p-company__vision{ margin-top:14px; }
.p-company__vision-no{ font-family:var(--font-en-grot); font-size:clamp(18px,1.5vw,22px); font-weight:700; letter-spacing:.02em; color:var(--red); line-height:1.3; }
.p-company__vision-title{ margin-top:var(--gap-xs); font-size:clamp(20px,1.7vw,26px); font-weight:700; line-height:1.6; color:var(--red); }
.p-company__vision > p{ font-size:15px; font-weight:500; line-height:2.1; color:var(--ink); }
/* 本文の改行はワイヤーの横幅に合わせたものなので、箱の中では折り返しにまかせる */
.p-company__vision > p br{ display:none; }
/* 我々の誓い：灰色の地の上に赤の角丸のボード、そこに白い紙を五枚ピンで留めた見え方（2026-10-21） */
.p-company-oath{ background:var(--bg); }
.p-company__board{
  width:min(100%, 1040px); margin-inline:auto;
  /* ワイヤーの置き方：上に三枚、下に二枚を間に。上の左右と下の二枚は大きく傾ける */
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:clamp(28px,4vw,56px) clamp(20px,3vw,44px);
  padding:clamp(40px,5vw,72px) clamp(32px,5vw,80px);
  background:var(--red); border-radius:var(--r-l);
}
.p-company__card{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center;
  padding:clamp(40px,3.2vw,52px) var(--gap-s) clamp(28px,2.6vw,40px);
  background:var(--bg);
}
/* ボードにピンで紙を留めた見え方：札ごとに少し傾け、上のまんなかに赤いピン、下に影 */
.p-company__card{
  position:relative;
  border-radius:var(--r-s);
  box-shadow:0 10px 18px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.12);
  grid-column:span 2;
  aspect-ratio:1;
  rotate:-14deg;
  transition:rotate .3s ease, translate .3s ease;
}
.p-company__card:nth-child(2){ rotate:0deg; translate:0 12px; }
.p-company__card:nth-child(3){ rotate:14deg; }
.p-company__card:nth-child(4){ grid-column:2 / 4; rotate:7deg; }
.p-company__card:nth-child(5){ grid-column:4 / 6; rotate:-8deg; translate:0 -8px; }
.p-company__card:hover{ rotate:0deg; }
/* 画面に入ると、札が一枚ずつ上から置かれ、少し遅れてピンが刺さる */
.js-reveal .p-company__card{ opacity:0; }
.js-reveal .p-company__card::before{ scale:0; }
.js-reveal .is-in .p-company__card{ animation:p-company-note .5s cubic-bezier(.3,1.3,.5,1) both; }
.js-reveal .is-in .p-company__card::before{ animation:p-company-pin .25s cubic-bezier(.3,1.6,.5,1) both; }
.js-reveal .is-in .p-company__card:nth-child(2){ animation-delay:.3s; }
.js-reveal .is-in .p-company__card:nth-child(3){ animation-delay:.6s; }
.js-reveal .is-in .p-company__card:nth-child(4){ animation-delay:.9s; }
.js-reveal .is-in .p-company__card:nth-child(5){ animation-delay:1.2s; }
.js-reveal .is-in .p-company__card:nth-child(1)::before{ animation-delay:.4s; }
.js-reveal .is-in .p-company__card:nth-child(2)::before{ animation-delay:.7s; }
.js-reveal .is-in .p-company__card:nth-child(3)::before{ animation-delay:1s; }
.js-reveal .is-in .p-company__card:nth-child(4)::before{ animation-delay:1.3s; }
.js-reveal .is-in .p-company__card:nth-child(5)::before{ animation-delay:1.6s; }
@keyframes p-company-note{
  from{ opacity:0; transform:translateY(-40px) scale(1.15); }
  to{ opacity:1; }
}
@keyframes p-company-pin{
  from{ scale:2.2; opacity:0; }
  to{ scale:1; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .js-reveal .p-company__card{ opacity:1; }
  .js-reveal .p-company__card::before{ scale:1; }
  .js-reveal .is-in .p-company__card,
  .js-reveal .is-in .p-company__card::before{ animation:none; }
}
.p-company__card::before{
  content:""; position:absolute; top:12px; left:50%; translate:-50% 0;
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.7) 0 18%, transparent 22%), linear-gradient(160deg, var(--red), var(--red-deep));
  box-shadow:2px 3px 3px rgba(0,0,0,.3);
}
.p-company__card-title{
  font-size:clamp(20px,1.6vw,24px); font-weight:700; letter-spacing:.1em; line-height:1.4;
  color:var(--red);
}
.p-company__card-title::after{
  content:""; display:block; width:24px; height:2px; margin:var(--gap-s) auto;
  background:var(--red);
}
.p-company__card p{ font-size:15px; font-weight:500; line-height:2; letter-spacing:.06em; color:var(--ink); }

/* 会社概要：項目名は赤の太字、行は細い線で区切る。写真は角丸 */
/* 会社概要と会社沿革は、灰色の地でひと続きにし、中身は白の角丸の四角にのせる */
.p-company-outline,
.p-company-history{ background:var(--bg-grey); }
.p-company-history{ padding-top:0; }
.p-company__outline,
.p-company__history{ padding:clamp(28px,4.4vw,72px) clamp(20px,4.4vw,80px); background:var(--bg); border-radius:var(--r-l); }
.p-company__outline{ width:min(100%, 1320px); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap-m) clamp(32px,4vw,72px); align-items:start; }
.p-company__outline .lw-table,
.p-company__history-table{ font-size:15px; border-top:1px solid var(--line-soft); }
.p-company__outline .lw-table th,
.p-company__history-table th{ width:32%; padding:20px var(--gap-xs); font-weight:700; letter-spacing:.06em; color:var(--red); }
.p-company__outline .lw-table td,
.p-company__history-table td{ padding:20px var(--gap-xs); line-height:1.9; color:var(--ink); }
.p-company__outline-photos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap-s); margin-top:var(--gap-m); }
.p-company__outline-photos .lw-ph{ border-radius:var(--r-m); overflow:clip; }

/* 会社沿革：年月の右に赤い点と細い縦線でつなぐ */
.p-company__history{ width:min(100%, 1320px); margin-inline:auto; }
.p-company-history .lw-title{ padding-top:var(--gap-xl); }
/* 会社概要と会社沿革の見出しは、白い四角の左はしにそろえて左寄せ */
.p-company-outline .lw-title,
.p-company-history .lw-title{ width:min(100%, 1320px); margin-inline:auto; text-align:left; }
.p-company-outline .lw-title__ja,
.p-company-history .lw-title__ja{ justify-content:flex-start; }
.p-company__history-table th{ width:20%; white-space:nowrap; }
.p-company__history-table td{ position:relative; padding-left:var(--gap-m); border-left:1px solid var(--line-soft); }
.p-company__history-table td::before{
  content:""; position:absolute; left:-5px; top:29px;
  width:9px; height:9px; border-radius:50%; background:var(--red);
}

/* Webパンフレット：灰色の角丸の地にのせる */
.p-company-pamphlet .lw-lead,
.p-company-csr .lw-lead,
.p-company-inhouse .lw-lead{ font-size:15px; line-height:2.1; color:var(--ink); }
.p-company__pamphlet{
  width:min(100%, 1000px); margin:var(--gap-l) auto 0;
  padding:clamp(24px,4vw,64px);
  background:var(--bg-card); border-radius:var(--r-l);
}
.p-company__pamphlet img{ width:min(100%, 747px); height:auto; }

/* CSR活動：薄い地の上に白の角丸の札を三枚 */
.p-company-csr{ background:var(--bg-soft); }
.p-company__csr{ width:min(100%, 1320px); margin:var(--gap-l) auto 0; text-align:center; gap:clamp(16px,2vw,32px); }
.p-company__csr-item{ padding:clamp(28px,3vw,48px) clamp(20px,2vw,36px); background:var(--bg); border-radius:var(--r-l); }
.p-company__csr-photo{ position:relative; width:min(100%, 220px); margin-inline:auto; }
.p-company__csr-icons{ display:flex; justify-content:space-between; margin-top:-36px; position:relative; z-index:1; }
/* 写真の左右のしるし：白い丸の中に入れて、押せるボタンに見せる */
.p-company__csr-icons a{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--bg); box-shadow:0 4px 14px rgba(0,0,0,.12); outline:2px solid transparent; outline-offset:-2px; transition:transform .25s, box-shadow .25s, outline-color .25s; }
.p-company__csr-icon{ width:28px; height:28px; object-fit:contain; transition:transform .25s; }
.p-company__csr-icons a:hover,
.p-company__csr-icons a:focus-visible{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.16); outline-color:var(--red); }
.p-company__csr-icons a:hover .p-company__csr-icon,
.p-company__csr-icons a:focus-visible .p-company__csr-icon{ transform:scale(1.12); }
.p-company__csr-title{ font-size:19px; font-weight:700; line-height:1.6; color:var(--ink); margin-block:var(--gap-m) var(--gap-s); }
.p-company__csr-item p{ font-size:14px; line-height:2; color:var(--ink); }

/* 自社開発：写真は角丸、商品名は赤の太字 */
.p-company__inhouse{ width:min(100%, 1000px); margin-inline:auto; text-align:center; }
.p-company__inhouse .lw-ph{ border-radius:var(--r-l); overflow:clip; }
.p-company__inhouse-title{ font-size:clamp(22px,2vw,28px); font-weight:700; letter-spacing:.06em; color:var(--red); margin-block:var(--gap-m) var(--gap-s); }
@media (max-width:760px){
  .p-company__vision, .p-company__outline{ grid-template-columns:minmax(0,1fr); }
  .p-company__vision{ padding:var(--gap-m) var(--gap-m); gap:var(--gap-s); }
  .p-company__history-table th{ width:30%; white-space:normal; }
  .p-company__board{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap-m) var(--gap-s); padding:var(--gap-m) var(--gap-s); }
  .p-company__card{ grid-column:auto; aspect-ratio:auto; padding-inline:var(--gap-xs); rotate:-5deg; }
  .p-company__card:nth-child(2){ rotate:4deg; }
  .p-company__card:nth-child(3){ rotate:3deg; }
  .p-company__card:nth-child(4){ grid-column:auto; rotate:-4deg; }
  .p-company__card:nth-child(5){ grid-column:1 / -1; justify-self:center; width:calc(50% - 8px); rotate:-3deg; translate:none; }
  .p-company__card-title{ font-size:17px; letter-spacing:.04em; }
  .p-company__card p{ font-size:12px; letter-spacing:0; white-space:nowrap; }
  .p-company__history-table td{ padding-left:var(--gap-s); }
  .p-company__outline .lw-table th{ width:30%; }
}

/* ---------- 三共食品について（about.html） ---------- */
.p-about__center{ text-align:center; }
/* 小見出し：頭に赤い丸（体制の見出しとそろえる） */
.p-about__head{ font-size:clamp(18px,1.7vw,24px); font-weight:700; line-height:1.6; letter-spacing:.06em; color:var(--ink); margin-block:0 var(--gap-s); }
.p-about__head::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
/* 経営理念の塊だけ、後ろを赤のグラデーション＋上から消えていく白ドットに。見出し・文章は白、箱は白のまま */
.p-about__sec--philo{ position:relative; padding-block:clamp(64px,7vw,var(--gap-xl)); background:linear-gradient(180deg, var(--red) 0%, var(--pop-ring) 100%); color:var(--ink-invert); }
/* 上から細かい白のドット。下へいくほど消えていく */
.p-about__sec--philo::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.28) 1.2px, transparent 1.6px); background-size:12px 12px; -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 75%); mask-image:linear-gradient(180deg, #000 0%, transparent 75%); }
.p-about__sec--philo > .inner{ position:relative; }
.p-about__sec--philo .lw-title__en,
.p-about__sec--philo .lw-title__ja,
.p-about__sec--philo .p-about__philo-title,
.p-about__sec--philo .p-about__philo-title em,
.p-about__sec--philo .p-about__philo-lead{ color:var(--ink-invert); }
.p-about__sec--philo .lw-title__en::after,
.p-about__sec--philo .lw-title__ja::before{ background:var(--ink-invert); }
.p-about__sec--philo .p-about__steps{ box-shadow:0 12px 32px rgba(0,0,0,.12); }
/* 経営理念：まんなかぞろえ。見出し→文章→白い角丸の箱に三つの段階（見本あり） */
.p-about__philo{ max-width:760px; margin-inline:auto; text-align:center; }
.p-about__philo-title{ font-size:clamp(24px,2.6vw,38px); font-weight:700; line-height:1.4; letter-spacing:.06em; color:var(--ink); }
.p-about__philo-title em{ font-style:normal; color:var(--red); }
.p-about__philo-lead{ margin-top:clamp(20px,2.4vw,36px); font-family:var(--font-ja); font-size:15px; font-weight:500; line-height:2.4; letter-spacing:.06em; color:var(--ink); }
.p-about__steps{ list-style:none; width:min(100%, 620px); margin:clamp(32px,3.6vw,56px) auto 0; padding:clamp(24px,2.8vw,40px) clamp(20px,3.6vw,56px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 2px 14px rgba(0,0,0,.07); text-align:left; }
.p-about__step{ display:flex; align-items:center; gap:clamp(16px,2vw,28px); }
.p-about__step + .p-about__step{ margin-top:14px; }
.p-about__step-no{ flex:0 0 auto; white-space:nowrap; padding:10px 22px; border-radius:999px; background:var(--red); color:var(--ink-invert); font-size:15px; font-weight:700; letter-spacing:.08em; }
.p-about__step-text{ flex:1; padding-bottom:6px; border-bottom:2px dotted var(--ink); font-size:18px; font-weight:700; letter-spacing:.06em; color:var(--ink); }
/* 体制：経営理念と同じ組み方（太い見出し→ゆったりの文章→白い角丸の箱に図） */
.p-about__structure-title{ margin-bottom:0; font-size:clamp(20px,2.2vw,32px); line-height:1.5; letter-spacing:.06em; color:var(--ink); }
.p-about__structure-title em{ font-style:normal; color:var(--red); }
.p-about__structure-lead{ margin-top:clamp(20px,2.4vw,36px); font-family:var(--font-ja); font-size:15px; font-weight:500; line-height:2.4; letter-spacing:.06em; color:var(--ink); }
.p-about__chart{ width:min(100%,880px); margin:clamp(32px,3.6vw,56px) auto 0; }
/* しくみの図（見本＝丸が輪に並ぶ図）：左＝しるしのまわりに九つの丸、まんなか＝薄い赤の矢印、右＝赤い輪の中にしくみの名前 */

.p-about__system-head{ font-size:clamp(20px,2.2vw,32px); font-weight:700; line-height:1.5; letter-spacing:.06em; text-align:center; color:var(--ink); }
/* 見出し感を出すため、二つの見出しの頭に赤い丸 */
.p-about__structure-title::before,
.p-about__system-head::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
.p-about__system-body{ display:grid; grid-template-columns:minmax(0,560px) minmax(60px,120px) minmax(0,360px); justify-content:center; align-items:center; gap:clamp(12px,2vw,32px); margin-top:clamp(32px,4vw,64px); }
.p-about__ring{ position:relative; aspect-ratio:1; }
.p-about__ring::before{ content:""; position:absolute; inset:12%; border:3px dotted var(--red); border-radius:50%; }
.p-about__ring-logo{ position:absolute; left:50%; top:50%; width:44%; height:auto; transform:translate(-50%,-50%); }
.p-about__nodes{ list-style:none; margin:0; padding:0; }
.p-about__node{ --a:calc(var(--i) * 40deg - 90deg); position:absolute; left:calc(50% + 38% * cos(var(--a))); top:calc(50% + 38% * sin(var(--a))); display:grid; place-items:center; width:22%; aspect-ratio:1; border-radius:50%; background:var(--bg); box-shadow:0 0 0 6px rgba(243,1,26,.05), 0 4px 20px rgba(243,1,26,.18); transform:translate(-50%,-50%); font-size:clamp(12px,1.05vw,15px); font-weight:500; line-height:1.4; text-align:center; letter-spacing:.02em; color:var(--ink); }
.p-about__system-arrow{ display:block; height:clamp(56px,6vw,96px); background:var(--red-pale); clip-path:polygon(0 28%, 58% 28%, 58% 0, 100% 50%, 58% 100%, 58% 72%, 0 72%); }
.p-about__goal{ position:relative; display:grid; place-items:center; aspect-ratio:1; color:var(--red); }
.p-about__goal-ring{ position:absolute; inset:0; width:100%; height:100%; }
.p-about__goal-text{ position:relative; font-size:clamp(16px,1.6vw,24px); font-weight:700; line-height:1.6; letter-spacing:.04em; text-align:center; color:var(--red); }
/* しくみの図の動き（画面に入ったら）：しるし→まわりの丸がしゅんしゅん→点線の輪→矢印→しあわせのしくみ→赤い輪がえがかれて回り続ける */
.p-about__ring-logo{ animation:about-logo-in .7s cubic-bezier(.22,.9,.3,1) both; }
.p-about__ring::before{ animation:about-fade-scale .8s .6s ease-out both; }
.p-about__node{ animation:about-node-in .6s calc(.7s + var(--i) * .1s) cubic-bezier(.34,1.56,.64,1) both; }
.p-about__system-arrow{ animation:about-arrow-in .6s 1.8s cubic-bezier(.22,.9,.3,1) both; }
.p-about__goal-text{ animation:about-pop-in .7s 2.2s cubic-bezier(.34,1.56,.64,1) both; }
.p-about__goal-ring{ animation:about-spin 14s 3.6s linear infinite; }
.p-about__goal-ring path{ stroke-dasharray:1; stroke-dashoffset:1; animation:about-draw 1s 2.5s cubic-bezier(.65,0,.35,1) forwards; }
.p-about__goal-heads{ animation:about-fade 1ms 3.4s both; }
.js-reveal .p-about__system-body:not(.is-in) *,
.js-reveal .p-about__system-body:not(.is-in) .p-about__ring::before{ animation-play-state:paused; }
@keyframes about-logo-in{ from{ opacity:0; transform:translate(-50%,-50%) scale(.6); } }
@keyframes about-fade-scale{ from{ opacity:0; transform:scale(.7) rotate(-40deg); } }
@keyframes about-node-in{ from{ opacity:0; left:50%; top:50%; transform:translate(-50%,-50%) scale(.2); } }
@keyframes about-arrow-in{ from{ opacity:0; translate:-40px 0; } }
@keyframes about-pop-in{ from{ opacity:0; transform:scale(.5); } }
@keyframes about-draw{ to{ stroke-dashoffset:0; } }
@keyframes about-fade{ from{ opacity:0; } }
@keyframes about-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .p-about__ring-logo, .p-about__ring::before, .p-about__node, .p-about__system-arrow, .p-about__goal-text, .p-about__goal-ring, .p-about__goal-heads{ animation:none; }
  .p-about__goal-ring path{ animation:none; stroke-dashoffset:0; }
}
/* 中くらいの幅では、図を縦に積む（矢印は下向き） */
@media (max-width:1000px){
  .p-about__system-body{ grid-template-columns:minmax(0,1fr); justify-items:center; }
  .p-about__ring{ width:100%; max-width:480px; }
  .p-about__system-arrow{ width:64px; height:56px; transform:rotate(90deg); }
  @keyframes about-arrow-in{ from{ opacity:0; translate:0 -40px; } }
  .p-about__goal{ width:min(100%, 280px); }
}
/* しくみの説明：左に文章、右に絵（見本あり。赤い帯と線は外した） */
/* 体制の塊：表紙のアバウトと同じく、写真＋黒いマスクの地。その上に白い角丸の箱を三つ地続きに重ねる */
.p-about__sec--structure{ position:relative; padding-block:clamp(64px,7vw,var(--gap-xl)); background:var(--ink) url("../images/kv-008.webp") center / cover no-repeat; }
.p-about__sec--structure::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgb(16 13 13 / .82) 0%, rgb(16 13 13 / .72) 100%); -webkit-backdrop-filter:grayscale(.6); backdrop-filter:grayscale(.6); }
.p-about__sec--structure > .inner{ position:relative; }
.p-about__sec--structure .lw-title__en,
.p-about__sec--structure .lw-title__ja{ color:var(--ink-invert); }
.p-about__sec--structure .lw-title__ja::before{ background:var(--ink-invert); }
.p-about__panel{ width:min(100%, 1240px); margin-inline:auto; padding:clamp(36px,5vw,88px) clamp(20px,4.4vw,80px); border-radius:var(--r-m); background:var(--bg); }
.p-about__panel + .p-about__panel{ margin-top:clamp(12px,1.4vw,20px); }
.p-about__happy-en{ margin-bottom:clamp(20px,2.4vw,36px); font-family:var(--font-en-grot); font-size:clamp(26px,3vw,48px); font-weight:700; line-height:1.1; letter-spacing:-.01em; color:var(--red); }
.p-about__happy{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(32px,5vw,96px); align-items:center; }
.p-about__happy-text > p:not(.p-about__happy-en){ font-family:var(--font-ja); font-size:15px; font-weight:500; line-height:2.4; letter-spacing:.06em; color:var(--ink); }
.p-about__happy-text > p:not(.p-about__happy-en) br{ display:none; }  /* 決め打ちの改行は、幅が変わると変な所で切れるので外して流す */
.p-about__happy-fig{ position:relative; }
.p-about__happy-fig img{ position:relative; z-index:1; width:100%; padding:clamp(20px,3vw,48px); border-radius:var(--r-s); background:var(--bg); box-shadow:0 12px 32px rgba(0,0,0,.1); }
/* 行動憲章：宣言は薄い地の角丸の箱、行動規範は白い札を二列に（七つ目は横いっぱい） */
.p-about__declare{ width:min(100%, 1100px); margin-inline:auto; padding:clamp(32px,4.4vw,72px) clamp(20px,4.4vw,72px); border-radius:var(--r-m); background:var(--bg-soft); text-align:center; }
.p-about__declare p,
.p-about__code-intro p,
.p-about__haccp-text p{ font-family:var(--font-ja); font-size:15px; font-weight:500; line-height:2.4; letter-spacing:.06em; color:var(--ink); }
.p-about__declare p{ max-width:46em; margin-inline:auto; }
.p-about__declare p br{ display:none; }
.p-about__code-intro{ width:min(100%, 1100px); margin:clamp(56px,6vw,96px) auto 0; text-align:center; }
.p-about__rules{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px); width:min(100%, 1100px); margin:clamp(28px,3vw,48px) auto 0; }
.p-about__rule{ padding:clamp(24px,2.6vw,40px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 2px 14px rgba(0,0,0,.07); }
.p-about__rule:last-child{ grid-column:1 / -1; }
.p-about__rules dt{ display:flex; align-items:baseline; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); font-size:clamp(16px,1.3vw,19px); font-weight:700; letter-spacing:.04em; color:var(--ink); }
.p-about__rule-no{ font-family:var(--font-en-grot); font-size:clamp(28px,2.6vw,40px); font-weight:700; line-height:1; color:var(--red); }
.p-about__rules dd{ margin:14px 0 0; font-size:14px; line-height:2.1; color:var(--ink); }
/* 安心・安全：薄い地の塊。左に文章、右に写真（角丸） */
.p-about__sec--haccp{ padding-block:clamp(64px,7vw,var(--gap-xl)); background:var(--bg-soft); }
.p-about__haccp{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:clamp(32px,5vw,96px); align-items:center; width:min(100%, 1100px); margin-inline:auto; }
.p-about__haccp-text p br{ display:none; }
.p-about__haccp > .lw-ph{ border-radius:var(--r-m); overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.1); }
/* 認証取得：三枚を白い札に入れて、少し浮かせる */
.p-about__certs{ display:grid; grid-template-columns:repeat(3,minmax(0,300px)); justify-content:center; gap:clamp(16px,3vw,48px); margin-top:clamp(28px,3vw,48px); }
.p-about__certs > .lw-ph{ background:none; }
.p-about__certs > .lw-ph img{ position:static; height:auto; border-radius:var(--r-s); }
@media (max-width:760px){
  .p-about__happy, .p-about__haccp, .p-about__certs, .p-about__rules{ grid-template-columns:minmax(0,1fr); }
  .p-about__declare, .p-about__code-intro{ text-align:left; }
  .p-about__declare p, .p-about__code-intro p, .p-about__haccp-text p{ font-size:13px; line-height:2.1; }
  .p-about__haccp > .lw-ph{ width:min(100%, 280px); justify-self:center; }
  .p-about__certs{ grid-template-columns:minmax(0,260px); }
  .p-about__happy-text > p:not(.p-about__happy-en){ font-size:13px; line-height:2.1; }
  .p-about__philo-lead{ font-size:13px; line-height:2.1; text-align:left; }
  .p-about__structure-title{ font-size:17px; letter-spacing:.02em; }
  .p-about__structure-title em{ display:block; }
  .p-about__structure-lead{ font-size:13px; line-height:2.1; text-align:left; }
  .p-about__structure-lead br{ display:none; }
  .p-about__philo-lead br{ display:none; }
  .p-about__step{ gap:12px; }
  .p-about__step-no{ padding:8px 14px; font-size:12px; }
  .p-about__step-text{ font-size:15px; }
  .p-about__ring::before{ inset:10%; }
  .p-about__ring-logo{ width:50%; }
  .p-about__node{ left:calc(50% + 40% * cos(var(--a))); top:calc(50% + 40% * sin(var(--a))); width:23%; font-size:12px; letter-spacing:-.03em; box-shadow:0 0 0 4px rgba(243,1,26,.05), 0 3px 12px rgba(243,1,26,.18); }
}

/* ---------- 部門紹介（division.html） ---------- */
.p-division__sec--teams{ position:relative; padding-block:clamp(64px,7vw,var(--gap-xl)); background:linear-gradient(180deg, var(--red) 0%, var(--pop-ring) 100%); color:var(--ink-invert); }
.p-division__sec--teams::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.28) 1.2px, transparent 1.6px); background-size:12px 12px; -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 75%); mask-image:linear-gradient(180deg, #000 0%, transparent 75%); }
.p-division__sec--teams > .inner{ position:relative; max-width:1300px; margin-inline:auto; }
.p-division__sec--teams .lw-title{ text-align:left; margin-bottom:var(--gap-m); }
.p-division__sec--teams .lw-title__ja{ justify-content:flex-start; }
.p-division__sec--teams .lw-title__en,
.p-division__sec--teams .lw-title__ja,
.p-division__teams-lead{ color:var(--ink-invert); }
.p-division__sec--teams .lw-title__en::after,
.p-division__sec--teams .lw-title__ja::before{ background:var(--ink-invert); }
.p-division__teams-lead{ font-size:clamp(15px,1.2vw,18px); letter-spacing:.06em; }
.p-division__org{ margin-top:clamp(32px,3.6vw,56px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 12px 32px rgba(0,0,0,.12); padding:clamp(24px,3vw,48px); }
.p-division__org-name{ margin-bottom:clamp(16px,2vw,28px); font-size:clamp(17px,1.4vw,20px); font-weight:700; letter-spacing:.08em; color:var(--ink); }
.p-division__org-name::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
.p-division__cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border-radius:var(--r-m); box-shadow:0 2px 14px rgba(0,0,0,.08); }
.p-division__card{ position:relative; display:block; overflow:hidden; color:var(--ink-invert); }
.p-division__card + .p-division__card{ border-left:1px solid rgba(255,255,255,.7); }
.p-division__card .lw-ph{ border-radius:0; }
.p-division__card .lw-ph img{ transition:transform .6s cubic-bezier(.22,.9,.3,1); }
.p-division__card::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); transition:opacity .3s; }
.p-division__card::after{ content:""; position:absolute; right:var(--gap-s); bottom:var(--gap-s); z-index:2; width:36px; height:36px; border-radius:50%; background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / 42% no-repeat; transition:transform .3s; }
.p-division__card-name{ position:absolute; z-index:2; left:var(--gap-s); right:64px; bottom:72px; font-size:clamp(16px,1.3vw,19px); font-weight:700; letter-spacing:.08em; }
.p-division__card-name::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
.p-division__card-text{ position:absolute; z-index:2; left:var(--gap-s); right:60px; bottom:var(--gap-s); font-size:13px; line-height:1.7; letter-spacing:.04em; }
.p-division__card:hover .lw-ph img{ transform:scale(1.06); }
.p-division__card:hover::before{ opacity:.85; }
.p-division__card:hover::after{ transform:translateX(4px); }
.p-division__sec{ position:relative; z-index:0; overflow-x:clip; }
.p-division__row{ position:relative; display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); align-items:center; gap:clamp(32px,5vw,80px); max-width:1100px; margin:clamp(56px,6vw,96px) auto 0; padding:clamp(32px,4.4vw,72px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 2px 24px rgba(0,0,0,.05); --c-y:clamp(-80px,-6vw,-40px); --c-x:clamp(-100px,-7vw,-24px); --c-size:clamp(200px,24vw,340px); }
/* カードの奥にのぞく赤の丸と点線の輪。左上と右下に交互に出し、ゆっくり回す */
.p-division__row::before,
.p-division__row::after{ content:""; position:absolute; z-index:-1; top:var(--c-y); left:var(--c-x); width:var(--c-size); aspect-ratio:1; border-radius:50%; }
.p-division__row::before{ background:linear-gradient(135deg, var(--pop-pink) 0%, var(--red) 50%, var(--red-deep) 100%); animation:spin-badge 12s linear infinite; }
.p-division__row::after{ top:calc(var(--c-y) - 18px); left:calc(var(--c-x) - 18px); width:calc(var(--c-size) + 36px); border:2px dotted var(--red); animation:spin-badge 30s linear infinite reverse; }
.p-division__row.is-flip::before{ top:auto; left:auto; bottom:var(--c-y); right:var(--c-x); }
.p-division__row.is-flip::after{ top:auto; left:auto; bottom:calc(var(--c-y) - 18px); right:calc(var(--c-x) - 18px); }
@media (prefers-reduced-motion: reduce){
  .p-division__row::before, .p-division__row::after{ animation:none; }
}
.p-division__row .lw-ph{ grid-column:1; grid-row:1; }
.p-division__box{ grid-column:2; grid-row:1; padding:0; border:0; border-radius:0; }
.p-division__box p{ font-size:15px; line-height:2; color:var(--ink); }
.p-division__box p br{ display:none; }
.p-division__row.is-flip{ grid-template-columns:minmax(0,1fr) minmax(0,320px); }
.p-division__row.is-flip .lw-ph{ grid-column:2; }
.p-division__row.is-flip .p-division__box{ grid-column:1; }
.p-division__head{ font-size:clamp(19px,1.7vw,24px); font-weight:700; line-height:1.6; letter-spacing:.06em; color:var(--red); margin-bottom:var(--gap-m); }
.p-division__head::after{ content:""; display:block; width:40px; height:3px; margin-top:var(--gap-s); background:var(--red); }
/* 外食事業へのリンク札。左＝赤地に文章、右＝写真、境目はカーブ */
.p-division__more{ position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); max-width:1100px; min-height:clamp(200px,20vw,280px); margin-inline:auto; border-radius:var(--r-m); overflow:hidden; background:var(--red); color:var(--ink-invert); outline:3px solid transparent; outline-offset:5px; transition:outline-color .3s; }
.p-division__more-body{ position:relative; z-index:1; grid-column:1; grid-row:1; display:flex; flex-direction:column; justify-content:center; gap:var(--gap-s); padding:clamp(28px,3.6vw,56px) clamp(48px,6vw,96px) clamp(28px,3.6vw,56px) clamp(28px,4vw,64px); margin-right:-12%; background:linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%); clip-path:ellipse(100% 120% at 0% 50%); }
.p-division__more-title{ font-size:clamp(19px,1.8vw,26px); font-weight:700; letter-spacing:.06em; line-height:1.5; }
.p-division__more-text{ font-size:15px; line-height:1.9; letter-spacing:.04em; }
.p-division__more-arrow{ width:48px; height:48px; margin-top:var(--gap-xs); border-radius:50%; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3011a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / 42% no-repeat; transition:transform .3s; }
.p-division__more-photo{ grid-column:2; grid-row:1; position:relative; }
.p-division__more-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.9,.3,1); }
.p-division__more:hover{ outline-color:var(--red); }
.p-division__more:hover .p-division__more-arrow{ transform:translateX(6px); }
.p-division__more:hover .p-division__more-photo img{ transform:scale(1.05); }
@media (max-width:1000px){
  .p-division__cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .p-division__card:nth-child(3){ border-left:0; }
  .p-division__card:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.7); }
}
@media (max-width:760px){
  .p-division__org{ padding:var(--gap-s); }
  .p-division__card-name{ right:var(--gap-xs); bottom:64px; }
  .p-division__card-text{ left:12px; right:12px; bottom:12px; font-size:12px; line-height:1.6; }
  .p-division__card-text br{ display:none; }
  .p-division__card::after{ top:12px; right:12px; bottom:auto; width:28px; height:28px; }
  .p-division__row, .p-division__row.is-flip{ grid-template-columns:minmax(0,1fr); gap:var(--gap-m); }
  .p-division__row .lw-ph, .p-division__row.is-flip .lw-ph{ grid-column:1; grid-row:1; width:min(100%,260px); justify-self:center; }
  .p-division__box, .p-division__row.is-flip .p-division__box{ grid-column:1; grid-row:2; }
  .p-division__row{ padding:var(--gap-m) var(--gap-s); --c-y:-32px; --c-x:-24px; --c-size:160px; }
  .p-division__more{ grid-template-columns:minmax(0,1fr); }
  .p-division__more-photo{ grid-column:1; grid-row:1; aspect-ratio:16/9; }
  .p-division__more-body{ grid-column:1; grid-row:2; margin:-14% 0 0; padding:var(--gap-l) var(--gap-s) var(--gap-m); clip-path:ellipse(130% 100% at 50% 100%); }
}

/* ---------- 商品カタログ（catalog.html） ---------- */
/* カタログ一覧の帯：赤の地に、上から消えていく白い細かい点（三共食品について・部門紹介と同じ） */
.p-catalog__list{ position:relative; padding-block:clamp(64px,7vw,var(--gap-xl)); background:linear-gradient(180deg, var(--red) 0%, var(--pop-ring) 100%); }
.p-catalog__list::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.28) 1.2px, transparent 1.6px); background-size:12px 12px; -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 75%); mask-image:linear-gradient(180deg, #000 0%, transparent 75%); }
.p-catalog__list > .inner{ position:relative; }
.p-catalog__list .lw-title__en,
.p-catalog__list .lw-title__ja,
.p-catalog__list .lw-lead{ color:var(--ink-invert); }
.p-catalog__list .lw-title__en::after,
.p-catalog__list .lw-title__ja::before{ background:var(--ink-invert); }
/* カタログ一覧：真ん中に総合カタログの大きな丸、まわりに五つの丸を輪のように並べる。押すと下の該当カタログへ飛ぶ */
.p-catalog__orbit{ position:relative; width:min(100%, 820px); aspect-ratio:1; margin:var(--gap-l) auto 0; }
.p-catalog__orbit::before{ content:""; position:absolute; inset:13%; border:2px dotted rgba(255,255,255,.8); border-radius:50%; animation:spin-badge 60s linear infinite; }
.p-catalog__hub{ position:absolute; left:50%; top:50%; display:block; width:40%; transform:translate(-50%,-50%); }
.p-catalog__sats{ list-style:none; margin:0; padding:0; }
.p-catalog__sat{ --a:calc(var(--i) * 72deg - 90deg); position:absolute; left:calc(50% + 37% * cos(var(--a))); top:calc(50% + 37% * sin(var(--a))); width:23%; transform:translate(-50%,-50%); }
.p-catalog__sat a{ position:relative; display:block; }
.p-catalog__hub .lw-ph, .p-catalog__sat .lw-ph{ border:6px solid var(--bg); box-shadow:0 12px 32px rgba(0,0,0,.18); transition:transform .4s cubic-bezier(.22,.9,.3,1), border-color .3s; }
.p-catalog__pill{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); white-space:nowrap; padding:6px 16px; border:2px solid var(--red); border-radius:999px; background:var(--bg); color:var(--red); font-size:14px; font-weight:700; letter-spacing:.06em; box-shadow:0 4px 12px rgba(0,0,0,.15); transition:background .3s, color .3s; }
.p-catalog__pill--hub{ bottom:2%; padding:10px 28px; font-size:clamp(16px,1.5vw,20px); }
.p-catalog__hub:hover .lw-ph, .p-catalog__sat a:hover .lw-ph{ transform:scale(1.05); border-color:var(--pop-yellow); }
.p-catalog__hub:hover .p-catalog__pill, .p-catalog__sat a:hover .p-catalog__pill{ background:var(--red-deep); color:var(--ink-invert); }
@media (prefers-reduced-motion: reduce){
  .p-catalog__orbit::before{ animation:none; }
}
.p-catalog__head{ width:min(100%, 1310px); margin-inline:auto; }
/* 総合カタログ：薄い地の角丸の台に、見開きのページを影つきで置く */
.p-catalog__viewer{ width:min(100%, 960px); margin-inline:auto; padding:clamp(24px,4vw,56px) clamp(16px,4vw,56px) var(--gap-m); border-radius:var(--r-m); background:var(--bg-soft); }
.p-catalog__spread{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%, 680px); margin-inline:auto; box-shadow:0 12px 32px rgba(0,0,0,.12); }
.p-catalog__bar{ display:block; width:min(100%, 334px); margin:var(--gap-m) auto 0; }
/* カテゴリ別・輸入品：白い角丸の札を三列。札ごと少し浮く */
.p-catalog__cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,44px); max-width:1100px; margin:var(--gap-l) auto 0; }
.p-catalog__item{ display:flex; flex-direction:column; padding:clamp(20px,2vw,28px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 2px 20px rgba(0,0,0,.07); transition:box-shadow .3s, transform .3s; }
.p-catalog__item:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.1); }
.p-catalog__card{ flex:1; padding:0; border:0; border-radius:0; }
.p-catalog__card .lw-ph{ border-radius:var(--r-s); overflow:hidden; background:var(--bg-soft); }
.p-catalog__card-title{ margin-bottom:var(--gap-s); font-size:clamp(16px,1.3vw,18px); font-weight:700; letter-spacing:.06em; color:var(--ink); }
.p-catalog__card-title::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
.p-catalog__item .lw-btn{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:var(--gap-s); padding:12px 24px; border:0; background:var(--red); color:var(--ink-invert); font-size:15px; font-weight:700; letter-spacing:.08em; transition:background .3s; }
.p-catalog__item .lw-btn::before{ content:""; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; }
.p-catalog__item .lw-btn:hover{ background:var(--red-deep); }
/* 輸入品は薄い地で区切る */
.p-catalog__import{ background:var(--bg-soft); }
.p-catalog__import .lw-lead{ color:var(--ink); line-height:2; }
.p-catalog__ask{ font-size:clamp(16px,1.5vw,20px); font-weight:700; letter-spacing:.06em; color:var(--red); }
@media (max-width:760px){
  .p-catalog__orbit{ aspect-ratio:auto; }
  .p-catalog__orbit::before{ display:none; }
  .p-catalog__hub{ position:relative; left:auto; top:auto; width:min(100%,240px); margin-inline:auto; transform:none; }
  .p-catalog__sats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap-m) var(--gap-s); margin-top:var(--gap-m); }
  .p-catalog__sat{ position:static; width:auto; transform:none; }
  .p-catalog__sat .lw-ph{ width:min(100%,150px); margin-inline:auto; }
  .p-catalog__pill{ font-size:13px; padding:5px 12px; }
  .p-catalog__cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap-s); }
  .p-catalog__item{ padding:12px; }
  .p-catalog__card-title{ font-size:14px; }
  .p-catalog__item .lw-btn{ padding:10px 12px; font-size:13px; }
}

/* ---------- オフィス紹介（office.html） ---------- */
/* 流れる英字の帯。中身を二本つなげて半分ずらすと切れ目なく回る。上の帯は左へ、下の帯は右へ */
.p-office__band{ overflow:hidden; margin-block:var(--gap-m); font-family:var(--font-en-geo); font-size:clamp(40px,6vw,104px); font-weight:600; line-height:1.15; letter-spacing:.08em; color:var(--bg-grey-2); }
.p-office__band-inner{ display:flex; width:max-content; white-space:nowrap; animation:p-office-band 40s linear infinite; }
.p-office__band-inner > span{ white-space:pre; }
.p-office__band.is-rev .p-office__band-inner{ animation-direction:reverse; }
@keyframes p-office-band{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .p-office__band-inner{ animation:none; }
}
.p-office__area.is-tokyo{ position:relative; background:linear-gradient(180deg, var(--red) 0%, var(--pop-ring) 100%); }
.p-office__area.is-tokyo::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.28) 1.2px, transparent 1.6px); background-size:12px 12px; -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 75%); mask-image:linear-gradient(180deg, #000 0%, transparent 75%); }
.p-office__area.is-tokyo > *{ position:relative; }
.p-office__area.is-tokyo .p-office__band{ color:rgba(255,255,255,.3); }
.p-office__area.is-tokyo .p-office__name{ color:var(--ink-invert); }
.p-office__area.is-tokyo .p-office__name::before{ background:var(--ink-invert); }
.p-office__name{ font-size:clamp(22px,2.2vw,34px); font-weight:700; letter-spacing:.08em; color:var(--ink); margin-bottom:var(--gap-m); }
.p-office__name::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
.p-office__point{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr) minmax(0,3fr); gap:var(--gap-m); align-items:center; margin-top:var(--gap-l); }
.p-office__circle{ width:min(100%, var(--d)); }
.p-office__circle .lw-ph, .p-office__top .lw-ph{ box-shadow:0 8px 28px rgba(0,0,0,.12); }
.p-office__left{ display:flex; justify-content:center; }
.p-office__right{ display:flex; flex-direction:column; align-items:center; gap:var(--gap-m); }
.p-office__top{ max-width:100%; margin:0 auto var(--gap-m); }
/* 本社・東京：ポイントの箱二つを真ん中に縦に並べ、まわりに丸写真五つ（右上に二つ重ね・左の中ほど・右下・左下） */
.p-office__stage{ position:relative; max-width:1500px; margin:var(--gap-l) auto 0; padding-block:var(--gap-m) clamp(80px,9vw,140px); }
.p-office__boxes{ display:grid; gap:clamp(64px,6vw,96px); width:56%; margin-inline:auto; }
.p-office__ph{ position:absolute; }
.p-office__ph .lw-ph{ box-shadow:0 8px 28px rgba(0,0,0,.12); }
.p-office__ph.is-tr1{ top:0; right:0; width:17%; }
.p-office__ph.is-tr2{ --pop-delay:.15s; z-index:1; top:clamp(150px,15vw,230px); right:10%; width:12%; }
.p-office__ph.is-ml{ top:50%; left:0; width:17%; transform:translateY(-50%); }
.p-office__ph.is-br{ --pop-delay:.1s; bottom:0; right:1%; width:16%; }
.p-office__ph.is-bl{ --pop-delay:.25s; bottom:clamp(20px,3vw,48px); left:4%; width:12%; }
.p-office__box{ position:relative; text-align:center; padding:clamp(64px,6vw,80px) clamp(24px,3vw,44px) clamp(24px,3vw,44px); border-radius:var(--r-m); background:var(--bg-soft); }
/* 丸写真は画面に入るとぽんっと弾んで出てくる。並びの順に少しずつ遅らせる */
.js-reveal .p-office__ph[data-reveal] .lw-ph,
.js-reveal .p-office__circle[data-reveal] .lw-ph{ transform:scale(0); }
.js-reveal .p-office__ph.is-in .lw-ph,
.js-reveal .p-office__circle.is-in .lw-ph{ animation:p-office-pop .7s cubic-bezier(.34,1.56,.64,1) var(--pop-delay, 0s) both; }
@keyframes p-office-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
  .js-reveal .p-office__ph[data-reveal] .lw-ph,
  .js-reveal .p-office__circle[data-reveal] .lw-ph{ transform:none; animation:none; }
}
/* ポイントの番号：箱の左上の角にかかる、細い赤の欠けた輪の中に「Point／番号」 */
.p-office__no{ position:absolute; top:clamp(-44px,-3.4vw,-32px); left:clamp(-44px,-3.4vw,-24px); display:grid; place-content:center; width:clamp(108px,10vw,140px); aspect-ratio:1; font-family:var(--font-en-geo); font-size:clamp(15px,1.3vw,19px); font-weight:700; line-height:1.4; letter-spacing:.08em; text-align:center; color:var(--red); }
.p-office__no::before{ content:""; position:absolute; inset:0; border:1px solid var(--red); border-right-color:transparent; border-radius:50%; transform:rotate(20deg); }
.p-office__no b{ display:block; font-weight:700; }
/* 東京は赤の地と白い箱にまたがるので、白い丸の台にのせて赤字で見せる。外側の欠けた輪は白 */
.p-office__area.is-tokyo .p-office__no{ border-radius:50%; background:var(--bg); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.p-office__area.is-tokyo .p-office__no::before{ inset:-8px; border-color:var(--ink-invert); border-right-color:transparent; }
.p-office__area.is-tokyo .p-office__box{ background:var(--bg); }
.p-office__box p{ font-size:15px; line-height:2; color:var(--ink); }
.p-office__box-title{ font-size:clamp(17px,1.4vw,20px); font-weight:700; line-height:1.6; letter-spacing:.04em; color:var(--red); margin-bottom:var(--gap-m); }
.p-office__box-title::after{ content:""; display:block; width:40px; height:3px; margin:var(--gap-s) auto 0; background:var(--red); }
@media (max-width:760px){
  .p-office__point{ grid-template-columns:minmax(0,1fr); }
  .p-office__stage{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap-s); padding-block:0; }
  .p-office__boxes{ grid-column:1 / -1; width:auto; gap:var(--gap-m); margin-bottom:var(--gap-s); }
  .p-office__ph{ position:static; width:auto; transform:none; }
  .p-office__ph.is-tr1, .p-office__ph.is-tr2, .p-office__ph.is-ml, .p-office__ph.is-br, .p-office__ph.is-bl{ width:auto; }
  .p-office__ph:last-child{ grid-column:1 / -1; width:50%; justify-self:center; }
  .p-office__left, .p-office__right{ flex-direction:row; justify-content:center; gap:var(--gap-s); }
  .p-office__circle, .p-office__top{ width:min(40vw, var(--d, 200px)); }
}

/* ---------- アクセス（access.html） ---------- */
/* アクセス：赤＋上から消える白い点の帯。白い角丸の台に点で描いた日本地図。拠点の赤い点から点線で丸ボタンへつなぎ、押すと詳細の窓が開く。下に拠点一覧の白い箱 */
.p-access{ position:relative; padding-block:clamp(64px,7vw,var(--gap-xl)); background:linear-gradient(180deg, var(--red) 0%, var(--pop-ring) 100%); color:var(--ink-invert); }
.p-access::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.28) 1.2px, transparent 1.6px); background-size:12px 12px; -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 75%); mask-image:linear-gradient(180deg, #000 0%, transparent 75%); }
.p-access > .inner{ position:relative; }
.p-access .lw-title__en,
.p-access .lw-title__ja{ color:var(--ink-invert); }
.p-access .lw-title__en::after,
.p-access .lw-title__ja::before{ background:var(--ink-invert); }
.p-access__board{ position:relative; width:min(100%, 1000px); margin:var(--gap-l) auto 0; padding:clamp(28px,4vw,56px) clamp(16px,4vw,56px) clamp(32px,4vw,56px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 2px 24px rgba(0,0,0,.07); }
.p-access__board-title{ position:absolute; top:clamp(24px,3.4vw,48px); left:clamp(20px,4vw,56px); font-family:var(--font-en-geo); font-size:clamp(24px,3vw,44px); font-weight:700; line-height:1.15; letter-spacing:.04em; color:var(--ink); }
.p-access__map{ position:relative; width:86%; margin:0 0 0 auto; padding-bottom:12%; }
.p-access__map-img{ display:block; width:100%; height:auto; }
.p-access__layer{ position:absolute; left:0; top:0; width:100%; aspect-ratio:921/662; }
.p-access__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.p-access__lines line{ stroke:var(--red); stroke-width:2; stroke-dasharray:4 5; vector-effect:non-scaling-stroke; }
.p-access__pin{ position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--red); }
.p-access__pin::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--red); animation:p-access-pulse 2s ease-out infinite; }
@keyframes p-access-pulse{ from{ transform:scale(1); opacity:.5; } to{ transform:scale(3); opacity:0; } }
.p-access__spot{ position:absolute; left:var(--mx, var(--x)); top:var(--y); display:grid; place-content:center; gap:4px; width:clamp(100px,17%,150px); aspect-ratio:1; padding:0; transform:translate(-50%,-50%); border:2px solid var(--red); border-radius:50%; background:var(--bg); color:var(--red); font:inherit; text-align:center; cursor:pointer; transition:background .3s, color .3s, transform .3s; }
.p-access__spot-ja{ font-size:clamp(12px,1.3vw,16px); font-weight:700; line-height:1.35; letter-spacing:.06em; }
.p-access__spot-en{ font-family:var(--font-en-geo); font-size:clamp(8px,.8vw,10px); font-weight:600; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; }
.p-access__spot:hover{ transform:translate(-50%,-50%) scale(1.08); background:var(--red); color:var(--ink-invert); }
.p-access__tap{ position:absolute; right:clamp(20px,4vw,56px); bottom:clamp(24px,3vw,44px); font-weight:700; letter-spacing:.06em; color:var(--ink); }
.p-access__tap::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
/* 詳細の窓 */
.p-access__dialog{ width:min(100% - 32px, 560px); padding:clamp(32px,4vw,48px) clamp(20px,4vw,44px); border:0; border-radius:var(--r-m); background:var(--bg); color:var(--ink); box-shadow:0 24px 64px rgba(0,0,0,.25); }
.p-access__dialog::backdrop{ background:rgba(34,31,32,.55); }
.p-access__dialog[open]{ animation:p-access-open .35s cubic-bezier(.22,.9,.3,1); }
@keyframes p-access-open{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
.p-access__close{ position:absolute; top:14px; right:14px; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 44% no-repeat; cursor:pointer; transition:background-color .3s; }
.p-access__close:hover{ background-color:var(--red-deep); }
.p-access__dialog-name{ font-size:clamp(19px,1.8vw,24px); font-weight:700; letter-spacing:.08em; text-align:center; color:var(--red); }
.p-access__dialog-name::after{ content:""; display:block; width:40px; height:3px; margin:var(--gap-s) auto 0; background:var(--red); }
.p-access__dialog-info{ margin-top:var(--gap-m); font-size:15px; line-height:2; }
.p-access__gmap{ margin-top:var(--gap-m); border-radius:var(--r-s); overflow:hidden; }
/* 拠点の一覧：白い角丸の札を三列 */
.p-access__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px); width:min(100%, 1000px); margin:clamp(24px,3vw,40px) auto 0; }
.p-access__base{ padding:clamp(20px,2.4vw,32px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 2px 24px rgba(0,0,0,.07); }
.p-access__base p{ font-size:14px; line-height:1.9; color:var(--ink); }
.p-access__base .p-access__base-name{ margin-bottom:var(--gap-xs); font-size:17px; font-weight:700; letter-spacing:.06em; }
.p-access__base-name::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
@media (max-width:760px){
  .p-access__grid{ grid-template-columns:minmax(0,1fr); }
  .p-access__board-title{ position:static; margin-bottom:var(--gap-s); }
  .p-access__map{ width:100%; padding-bottom:16%; }
  .p-access__spot{ width:80px; gap:2px; border-width:1.5px; }
  .p-access__spot[data-open="access-head"]{ --mx:36%; }
  .p-access__spot[data-open="access-terasawa"]{ --mx:66%; }
  .p-access__spot-ja{ font-size:12px; }
  .p-access__spot-en{ display:none; }
  .p-access__tap{ position:static; display:block; text-align:right; margin-top:var(--gap-xs); }
}

/* ---------- 顧問弁護士について（attorney.html） ---------- */
/* 薄い地の帯に、白い角丸の台。項目名は赤丸＋赤字 */
.p-attorney{ background:var(--bg-soft); }
.p-attorney .lw-lead{ line-height:2.2; color:var(--ink); }
.p-attorney__table{ position:relative; width:min(100%, 900px); margin:var(--gap-l) auto 0; padding:clamp(24px,4vw,48px) clamp(20px,5vw,64px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 2px 24px rgba(0,0,0,.07); }
.p-attorney__table .lw-table{ font-size:15px; }
.p-attorney__table .lw-table th,
.p-attorney__table .lw-table td{ padding:clamp(18px,2vw,24px) var(--gap-s); border-bottom:1px solid var(--line-soft); background:none; }
.p-attorney__table .lw-table tr:last-child th,
.p-attorney__table .lw-table tr:last-child td{ border-bottom:0; }
.p-attorney__table .lw-table th{ width:22%; font-weight:700; letter-spacing:.06em; color:var(--red); white-space:nowrap; }
.p-attorney__table .lw-table th::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
.p-attorney__table .lw-table td{ letter-spacing:.04em; color:var(--ink); }
.p-attorney__table .lw-table a{ color:inherit; text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:.3em; }
@media (max-width:760px){
  .p-attorney .lw-lead br{ display:none; }
  .p-attorney .lw-lead{ text-align:left; }
  .p-attorney__table .lw-table th,
  .p-attorney__table .lw-table td{ display:block; width:auto; padding-inline:0; }
  .p-attorney__table .lw-table th{ padding-bottom:4px; border-bottom:0; }
  .p-attorney__table .lw-table td{ padding-top:0; }
}

/* ---------- お問い合わせ（contact.html） ---------- */
.p-contact__form{ width:min(100%, 1200px); margin:var(--gap-l) auto 0; padding:var(--gap-m) clamp(var(--gap-s), 8%, 100px); }
.p-contact__field + .p-contact__field{ margin-top:var(--gap-s); }
.p-contact__field label{ display:block; }
.p-contact__input{ display:block; width:100%; min-height:56px; border:1px solid var(--line); padding:var(--gap-xs); font:inherit; }
.p-contact__textarea{ min-height:220px; resize:vertical; }
.p-contact__policy{ width:min(100%, 750px); min-height:200px; margin:var(--gap-m) auto 0; display:flex; align-items:center; justify-content:center; }
.p-contact__policy-title{ font-weight:700; font-size:20px; }
.p-contact__agree{ display:flex; justify-content:center; align-items:center; gap:var(--gap-xs); margin-top:var(--gap-s); font-weight:700; }
.p-contact__submit{ text-align:center; margin-top:var(--gap-s); }
.p-contact__submit .lw-btn{ font:inherit; font-weight:700; background:none; cursor:pointer; }

/* ---------- お問い合わせ（thanks.html） ---------- */
.p-thanks{ text-align:center; }
.p-thanks__title{ font-size:clamp(24px,2.4vw,40px); font-weight:400; color:var(--ink-soft); }
.p-thanks__text{ margin-top:var(--gap-l); }
.p-thanks__text p + p{ margin-top:1.5em; }
.p-thanks__back{ margin-top:var(--gap-l); }
.p-thanks__back .lw-btn{ font-weight:700; }

/* ---------- SDGsへの取り組み（sdgs.html） ---------- */
.p-sdgs__leadwrap{ display:grid; place-items:center; }
.p-sdgs__leadwrap > *{ grid-area:1/1; }
.p-sdgs__recycle{ width:min(433px,60%); height:auto; opacity:.35; }
.p-sdgs__lead{ position:relative; line-height:2.2; }
/* 四つの取り組みへの入口：赤＋上から消える白い点の帯に、写真カードを隙間なくつなげた一枚の帯（部門紹介と同じ見せ方） */
.p-sdgs__band{ position:relative; padding-block:clamp(64px,7vw,var(--gap-xl)); background:linear-gradient(180deg, var(--red) 0%, var(--pop-ring) 100%); }
.p-sdgs__band::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.28) 1.2px, transparent 1.6px); background-size:12px 12px; -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 75%); mask-image:linear-gradient(180deg, #000 0%, transparent 75%); }
.p-sdgs__band > .inner{ position:relative; max-width:1300px; margin-inline:auto; }
.p-sdgs__cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border-radius:var(--r-m); box-shadow:0 8px 32px rgba(0,0,0,.18); }
.p-sdgs__card{ position:relative; display:block; overflow:hidden; color:var(--ink-invert); }
.p-sdgs__card + .p-sdgs__card{ border-left:1px solid rgba(255,255,255,.7); }
.p-sdgs__card .lw-ph{ border-radius:0; }
.p-sdgs__card .lw-ph img{ transition:transform .6s cubic-bezier(.22,.9,.3,1); }
.p-sdgs__card::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%); transition:opacity .3s; }
.p-sdgs__card::after{ content:""; position:absolute; right:var(--gap-s); bottom:var(--gap-s); z-index:2; width:40px; height:40px; border-radius:50%; background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / 42% no-repeat; transition:transform .3s; }
.p-sdgs__en{ position:absolute; z-index:2; left:var(--gap-s); right:72px; bottom:calc(var(--gap-s) + 34px); font-family:var(--font-en-geo); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.p-sdgs__ja{ position:absolute; z-index:2; left:var(--gap-s); right:72px; bottom:var(--gap-s); font-size:clamp(18px,1.5vw,22px); font-weight:700; letter-spacing:.08em; line-height:1.4; }
.p-sdgs__ja::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.5em; border-radius:50%; background:var(--red); vertical-align:.15em; }
.p-sdgs__card:hover .lw-ph img{ transform:scale(1.06); }
.p-sdgs__card:hover::before{ opacity:.85; }
.p-sdgs__card:hover::after{ transform:translateX(4px); }
.p-sdgs__source{ text-align:right; margin-top:var(--gap-s); font-size:13px; }
.p-sdgs__source a{ color:var(--red); text-decoration:underline; text-underline-offset:.25em; }
.p-sdgs__goals{ display:block; box-sizing:border-box; width:min(930px,100%); height:auto; margin:var(--gap-l) auto 0; padding:clamp(20px,3vw,40px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 2px 24px rgba(0,0,0,.07); }
@media (max-width:760px){
  .p-sdgs__cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .p-sdgs__card:nth-child(3){ border-left:0; }
  .p-sdgs__card:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.7); }
  .p-sdgs__en{ left:12px; right:12px; bottom:40px; font-size:10px; }
  .p-sdgs__ja{ left:12px; right:12px; bottom:12px; font-size:15px; }
  .p-sdgs__card::after{ top:12px; right:12px; bottom:auto; width:28px; height:28px; }
  .p-sdgs__intro .lw-lead br,
  .p-sdgs__what .lw-lead br{ display:none; }
  .p-sdgs__intro .lw-lead,
  .p-sdgs__what .lw-lead{ text-align:left; }
}

/* ---------- 社会貢献への取り組み（sdgs-social.html） ---------- */
/* メンバーズのページと同じ作り：白い角丸カード＋影、赤い点の輪、角丸の写真 */
.p-sdgs-social__study::before,
.p-sdgs-social__study::after{ content:""; position:absolute; z-index:0; aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(var(--red) 2.4px, transparent 3px) 0 0 / 14px 14px; -webkit-mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); animation:p-sankyomembers-dots 60s linear infinite; }
.p-sdgs-social__goals{ width:min(100%, 880px); margin-inline:auto; }
.p-sdgs-social__goals img{ display:block; width:100%; height:auto; }
.p-sdgs-social__study{ position:relative; overflow-x:clip; background:var(--bg-grey-3); }
.p-sdgs-social__study::before{ top:46%; right:max(-140px, calc(50% - 780px)); width:clamp(240px,26vw,400px); }
.p-sdgs-social__study::after{ bottom:12%; left:max(-140px, calc(50% - 780px)); width:clamp(260px,30vw,440px); animation-direction:reverse; }
.p-sdgs-social__study > .inner{ position:relative; z-index:1; }
.p-sdgs-social__cases{ width:min(100%, 1320px); margin-inline:auto; padding-inline:clamp(24px,3.4vw,44px); }
.p-sdgs-social__cases > * + *{ margin-top:clamp(48px,6vw,96px); }
.p-sdgs-social__case{ display:grid; grid-template-columns:minmax(0,724fr) minmax(0,120fr) minmax(0,530fr); align-items:start; }
.p-sdgs-social__case.is-flip{ grid-template-columns:minmax(0,530fr) minmax(0,120fr) minmax(0,724fr); }
.p-sdgs-social__photo{ grid-row:1; grid-column:2 / 4; }
.p-sdgs-social__photo .lw-ph{ border:0; border-radius:var(--r-m); overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.14); }
.p-sdgs-social__photo .lw-ph > img{ transition:transform .6s; }
.p-sdgs-social__case:hover .p-sdgs-social__photo .lw-ph > img{ transform:scale(1.04); }
.p-sdgs-social__body{ grid-row:1; grid-column:1 / 3; position:relative; z-index:1; margin-top:clamp(56px,6.4vw,120px); padding:clamp(88px,7.4vw,112px) clamp(24px,3vw,44px) clamp(24px,3vw,44px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 12px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04); }
.p-sdgs-social__case.is-flip .p-sdgs-social__photo{ grid-column:1 / 3; }
.p-sdgs-social__case.is-flip .p-sdgs-social__body{ grid-column:2 / 4; padding-top:clamp(32px,3.6vw,52px); }
.p-sdgs-social__case.is-flip .p-sdgs-social__head{ padding-right:clamp(72px,6.4vw,100px); }
.p-sdgs-social__head, .p-sdgs-food__head{ margin-bottom:var(--gap-s); font-size:clamp(22px,2.2vw,34px); font-weight:700; line-height:1.4; color:var(--ink); }
/* 番号はオフィス紹介の「Point 01」の丸と同じ形 */
.p-sdgs-social__num, .p-sdgs-food__num{ position:absolute; top:clamp(-44px,-3.4vw,-32px); left:clamp(-44px,-3.4vw,-24px); display:grid; place-content:center; width:clamp(108px,10vw,140px); aspect-ratio:1; font-family:var(--font-en-geo); font-size:clamp(15px,1.3vw,19px); font-weight:700; line-height:1.4; letter-spacing:.08em; text-align:center; color:var(--red); }
.p-sdgs-social__num::before, .p-sdgs-food__num::before{ content:""; position:absolute; inset:0; border:1px solid var(--red); border-right-color:transparent; border-radius:50%; transform:rotate(20deg); }
.p-sdgs-social__num::after, .p-sdgs-food__num::after{ content:"Point"; order:-1; }
.p-sdgs-social__case.is-flip .p-sdgs-social__num{ left:auto; right:clamp(-44px,-3.4vw,-24px); }
.p-sdgs-social__sep, .p-sdgs-food__sep{ display:none; }
.p-sdgs-social__box .lw-sub{ margin-bottom:var(--gap-xs); font-size:clamp(15px,1.2vw,18px); letter-spacing:.06em; color:var(--red); }
.p-sdgs-social__box p:not(.lw-sub){ line-height:2; }
.p-sdgs-social__box br{ display:none; }
@media (prefers-reduced-motion:reduce){
  .p-sdgs-social__study::before, .p-sdgs-social__study::after{ animation:none; }
}
@media (max-width:760px){
  .p-sdgs-social__case, .p-sdgs-social__case.is-flip{ grid-template-columns:minmax(0,1fr); }
  .p-sdgs-social__photo, .p-sdgs-social__case.is-flip .p-sdgs-social__photo{ grid-column:1; grid-row:auto; }
  .p-sdgs-social__body, .p-sdgs-social__case.is-flip .p-sdgs-social__body{ grid-column:1; grid-row:auto; margin:calc(var(--gap-m) * -1) var(--gap-s) 0; padding-top:clamp(24px,3vw,44px); }
  .p-sdgs-social__case.is-flip .p-sdgs-social__head{ padding-right:0; }
  .p-sdgs-social__num, .p-sdgs-social__case.is-flip .p-sdgs-social__num, .p-sdgs-food__num{ position:relative; top:auto; left:auto; right:auto; width:96px; margin-bottom:var(--gap-xs); font-size:14px; }
  .p-sdgs-social__study::before, .p-sdgs-social__study::after{ width:200px; }
  .p-sdgs-social__study::after{ left:-90px; }
  .p-sdgs-social__study::before{ right:-90px; }
}

/* ---------- 食品安全への取り組み（sdgs-food.html） ---------- */
/* 地域環境のページと同じ作り：白い角丸カード＋影、角に「Point」の丸、灰色の地に赤い点の輪 */
.p-sdgs-food__goals{ width:min(100%, 600px); margin-inline:auto; }
.p-sdgs-food__goals img{ display:block; width:100%; height:auto; }
.p-sdgs-food__study{ position:relative; overflow-x:clip; background:var(--bg-grey-3); }
.p-sdgs-food__study::before,
.p-sdgs-food__study::after{ content:""; position:absolute; z-index:0; aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(var(--red) 2.4px, transparent 3px) 0 0 / 14px 14px; -webkit-mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); animation:p-sankyomembers-dots 60s linear infinite; }
.p-sdgs-food__study::before{ top:34%; right:max(-140px, calc(50% - 780px)); width:clamp(240px,26vw,400px); }
.p-sdgs-food__study::after{ bottom:10%; left:max(-140px, calc(50% - 780px)); width:clamp(260px,30vw,440px); animation-direction:reverse; }
.p-sdgs-food__study > .inner{ position:relative; z-index:1; }
.p-sdgs-food__block{ position:relative; width:min(100% - clamp(48px,6.8vw,88px), 1200px); margin-inline:auto; padding:clamp(88px,7.4vw,112px) clamp(24px,4vw,64px) clamp(32px,4vw,64px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 12px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04); }
.p-sdgs-food__block + .p-sdgs-food__block{ margin-top:clamp(72px,8vw,120px); }
.p-sdgs-food__block .p-sdgs-food__head{ display:flex; align-items:center; gap:14px; margin-bottom:var(--gap-m); }
.p-sdgs-food__block .p-sdgs-food__head::before{ content:""; flex:none; width:.6em; aspect-ratio:1; border-radius:50%; background:var(--red); }
.p-sdgs-food__block .lw-lead{ text-align:center; line-height:2; }
.p-sdgs-food__block .ph{ border:0; border-radius:var(--r-m); overflow:hidden; }
.p-sdgs-food__cert{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,48px); margin-bottom:var(--gap-m); }
.p-sdgs-food__cert > .ph{ box-shadow:0 12px 32px rgba(0,0,0,.14); }
/* 寺沢工場の証明書：左右の矢印で切りかえ */
.p-sdgs-food__slider{ display:flex; flex-direction:column; justify-content:center; gap:var(--gap-s); padding:clamp(16px,2vw,28px); border-radius:var(--r-m); background:var(--bg-grey-3); }
.p-sdgs-food__slides{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:var(--r-s); }
.p-sdgs-food__slides::-webkit-scrollbar{ display:none; }
.p-sdgs-food__slides > .ph{ flex:0 0 100%; scroll-snap-align:start; border-radius:var(--r-s); }
.p-sdgs-food__arrows{ display:flex; justify-content:center; gap:var(--gap-s); }
.p-sdgs-food__arrow{ position:relative; width:44px; height:44px; border:1px solid var(--red); border-radius:50%; background:var(--bg); cursor:pointer; transition:background .3s; }
.p-sdgs-food__arrow::before{ content:""; position:absolute; top:50%; left:50%; width:9px; height:9px; border-top:2px solid var(--red); border-right:2px solid var(--red); transform:translate(-65%,-50%) rotate(45deg); transition:border-color .3s; }
.p-sdgs-food__arrow.is-prev::before{ transform:translate(-35%,-50%) rotate(-135deg); }
.p-sdgs-food__arrow:hover{ background:var(--red); }
.p-sdgs-food__arrow:hover::before{ border-color:var(--ink-invert); }
.p-sdgs-food__policy-photo{ max-width:800px; margin:0 auto var(--gap-m); }
.p-sdgs-food__policy-photo .ph{ box-shadow:0 12px 32px rgba(0,0,0,.14); }
.p-sdgs-food__policy{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap-m) clamp(24px,4vw,56px); margin-top:var(--gap-m); padding:clamp(24px,3.4vw,48px); border-radius:var(--r-m); background:var(--bg-grey-3); font-size:15px; }
.p-sdgs-food__col > * + *{ margin-top:var(--gap-m); }
.p-sdgs-food__item{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--gap-s); align-items:start; }
.p-sdgs-food__item p{ line-height:1.9; }
.p-sdgs-food__item br{ display:none; }
.p-sdgs-food__item-num{ font-family:var(--font-en-geo); font-size:clamp(24px,2.4vw,34px); font-weight:700; line-height:1; color:var(--red); }
.p-sdgs-food__sign{ padding-top:var(--gap-s); border-top:1px solid rgba(0,0,0,.12); text-align:right; line-height:1.9; }
@media (prefers-reduced-motion:reduce){
  .p-sdgs-food__study::before, .p-sdgs-food__study::after{ animation:none; }
}
@media (max-width:760px){
  .p-sdgs-food__cert, .p-sdgs-food__policy{ grid-template-columns:minmax(0,1fr); }
  .p-sdgs-food__block{ width:100%; padding-top:clamp(24px,3vw,44px); }
  .p-sdgs-food__block .lw-lead{ text-align:left; }
  .p-sdgs-food__block .lw-lead br{ display:none; }
  .p-sdgs-food__study::before, .p-sdgs-food__study::after{ width:200px; }
  .p-sdgs-food__study::before{ right:-90px; }
  .p-sdgs-food__study::after{ left:-90px; }
}

/* ---------- 環境保全への取り組み（sdgs-env.html） ---------- */
/* 社会貢献のページと同じ作り：白い角丸カード＋影、赤い点の輪、角丸の写真 */
.p-sdgs-env__study::before,
.p-sdgs-env__study::after{ content:""; position:absolute; z-index:0; aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(var(--red) 2.4px, transparent 3px) 0 0 / 14px 14px; -webkit-mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); animation:p-sankyomembers-dots 60s linear infinite; }
.p-sdgs-env__goals{ width:min(100%, 1020px); margin-inline:auto; }
.p-sdgs-env__goals img{ display:block; width:100%; height:auto; }
.p-sdgs-env__study{ position:relative; overflow-x:clip; background:var(--bg-grey-3); }
.p-sdgs-env__study::before{ top:46%; right:max(-140px, calc(50% - 780px)); width:clamp(240px,26vw,400px); }
.p-sdgs-env__study::after{ bottom:12%; left:max(-140px, calc(50% - 780px)); width:clamp(260px,30vw,440px); animation-direction:reverse; }
.p-sdgs-env__study > .inner{ position:relative; z-index:1; }
.p-sdgs-env__cases{ width:min(100%, 1320px); margin-inline:auto; padding-inline:clamp(24px,3.4vw,44px); }
.p-sdgs-env__cases > * + *{ margin-top:clamp(48px,6vw,96px); }
.p-sdgs-env__case{ display:grid; grid-template-columns:minmax(0,724fr) minmax(0,120fr) minmax(0,530fr); align-items:start; }
.p-sdgs-env__case.is-flip{ grid-template-columns:minmax(0,530fr) minmax(0,120fr) minmax(0,724fr); }
.p-sdgs-env__photo{ grid-row:1; grid-column:2 / 4; }
.p-sdgs-env__photo .lw-ph{ border:0; border-radius:var(--r-m); overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.14); }
.p-sdgs-env__photo .lw-ph > img{ transition:transform .6s; }
.p-sdgs-env__case:hover .p-sdgs-env__photo .lw-ph > img{ transform:scale(1.04); }
.p-sdgs-env__body{ grid-row:1; grid-column:1 / 3; position:relative; z-index:1; margin-top:clamp(56px,6.4vw,120px); padding:clamp(88px,7.4vw,112px) clamp(24px,3vw,44px) clamp(24px,3vw,44px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 12px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04); }
.p-sdgs-env__case.is-flip .p-sdgs-env__photo{ grid-column:1 / 3; }
.p-sdgs-env__case.is-flip .p-sdgs-env__body{ grid-column:2 / 4; padding-top:clamp(32px,3.6vw,52px); }
.p-sdgs-env__case.is-flip .p-sdgs-env__head{ padding-right:clamp(72px,6.4vw,100px); }
.p-sdgs-env__head{ margin-bottom:var(--gap-s); font-size:clamp(22px,2.2vw,34px); font-weight:700; line-height:1.4; color:var(--ink); }
/* 番号はオフィス紹介の「Point 01」の丸と同じ形 */
.p-sdgs-env__num{ position:absolute; top:clamp(-44px,-3.4vw,-32px); left:clamp(-44px,-3.4vw,-24px); display:grid; place-content:center; width:clamp(108px,10vw,140px); aspect-ratio:1; font-family:var(--font-en-geo); font-size:clamp(15px,1.3vw,19px); font-weight:700; line-height:1.4; letter-spacing:.08em; text-align:center; color:var(--red); }
.p-sdgs-env__num::before{ content:""; position:absolute; inset:0; border:1px solid var(--red); border-right-color:transparent; border-radius:50%; transform:rotate(20deg); }
.p-sdgs-env__num::after{ content:"Point"; order:-1; }
.p-sdgs-env__case.is-flip .p-sdgs-env__num{ left:auto; right:clamp(-44px,-3.4vw,-24px); }
.p-sdgs-env__sep{ display:none; }
.p-sdgs-env__box .lw-sub{ margin-bottom:var(--gap-xs); font-size:clamp(15px,1.2vw,18px); letter-spacing:.06em; color:var(--red); }
.p-sdgs-env__box p:not(.lw-sub){ line-height:2; }
.p-sdgs-env__box br{ display:none; }
@media (prefers-reduced-motion:reduce){
  .p-sdgs-env__study::before, .p-sdgs-env__study::after{ animation:none; }
}
@media (max-width:760px){
  .p-sdgs-env__case, .p-sdgs-env__case.is-flip{ grid-template-columns:minmax(0,1fr); }
  .p-sdgs-env__photo, .p-sdgs-env__case.is-flip .p-sdgs-env__photo{ grid-column:1; grid-row:auto; }
  .p-sdgs-env__body, .p-sdgs-env__case.is-flip .p-sdgs-env__body{ grid-column:1; grid-row:auto; margin:calc(var(--gap-m) * -1) var(--gap-s) 0; padding-top:clamp(24px,3vw,44px); }
  .p-sdgs-env__case.is-flip .p-sdgs-env__head{ padding-right:0; }
  .p-sdgs-env__num, .p-sdgs-env__case.is-flip .p-sdgs-env__num{ position:relative; top:auto; left:auto; right:auto; width:96px; margin-bottom:var(--gap-xs); font-size:14px; }
  .p-sdgs-env__study::before, .p-sdgs-env__study::after{ width:200px; }
  .p-sdgs-env__study::after{ left:-90px; }
  .p-sdgs-env__study::before{ right:-90px; }
}

/* ---------- 職場環境への取り組み（sdgs-working.html） ---------- */
/* 社会貢献のページと同じ作り：白い角丸カード＋影、赤い点の輪、角丸の写真 */
.p-sdgs-working__study::before,
.p-sdgs-working__study::after{ content:""; position:absolute; z-index:0; aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(var(--red) 2.4px, transparent 3px) 0 0 / 14px 14px; -webkit-mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); animation:p-sankyomembers-dots 60s linear infinite; }
.p-sdgs-working__goals{ width:min(100%, 440px); margin-inline:auto; }
.p-sdgs-working__goals img{ display:block; width:100%; height:auto; }
.p-sdgs-working__study{ position:relative; overflow-x:clip; background:var(--bg-grey-3); }
.p-sdgs-working__study::before{ top:70%; right:max(-140px, calc(50% - 780px)); width:clamp(240px,26vw,400px); }
.p-sdgs-working__study::after{ bottom:-6%; left:max(-140px, calc(50% - 780px)); width:clamp(260px,30vw,440px); animation-direction:reverse; }
.p-sdgs-working__study > .inner{ position:relative; z-index:1; }
.p-sdgs-working__cases{ width:min(100%, 1320px); margin-inline:auto; padding-inline:clamp(24px,3.4vw,44px); }
.p-sdgs-working__cases > * + *{ margin-top:clamp(48px,6vw,96px); }
.p-sdgs-working__case{ display:grid; grid-template-columns:minmax(0,724fr) minmax(0,120fr) minmax(0,530fr); align-items:start; }
.p-sdgs-working__case.is-flip{ grid-template-columns:minmax(0,530fr) minmax(0,120fr) minmax(0,724fr); }
.p-sdgs-working__photo{ grid-row:1; grid-column:2 / 4; }
.p-sdgs-working__photo .lw-ph{ border:0; border-radius:var(--r-m); overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.14); }
.p-sdgs-working__photo .lw-ph > img{ transition:transform .6s; }
.p-sdgs-working__case:hover .p-sdgs-working__photo .lw-ph > img{ transform:scale(1.04); }
.p-sdgs-working__body{ grid-row:1; grid-column:1 / 3; position:relative; z-index:1; margin-top:clamp(56px,6.4vw,120px); padding:clamp(88px,7.4vw,112px) clamp(24px,3vw,44px) clamp(24px,3vw,44px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 12px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04); }
.p-sdgs-working__case.is-flip .p-sdgs-working__photo{ grid-column:1 / 3; }
.p-sdgs-working__case.is-flip .p-sdgs-working__body{ grid-column:2 / 4; padding-top:clamp(32px,3.6vw,52px); }
.p-sdgs-working__case.is-flip .p-sdgs-working__head{ padding-right:clamp(72px,6.4vw,100px); }
.p-sdgs-working__head{ margin-bottom:var(--gap-s); font-size:clamp(22px,2.2vw,34px); font-weight:700; line-height:1.4; color:var(--ink); }
/* 番号はオフィス紹介の「Point 01」の丸と同じ形 */
.p-sdgs-working__num{ position:absolute; top:clamp(-44px,-3.4vw,-32px); left:clamp(-44px,-3.4vw,-24px); display:grid; place-content:center; width:clamp(108px,10vw,140px); aspect-ratio:1; font-family:var(--font-en-geo); font-size:clamp(15px,1.3vw,19px); font-weight:700; line-height:1.4; letter-spacing:.08em; text-align:center; color:var(--red); }
.p-sdgs-working__num::before{ content:""; position:absolute; inset:0; border:1px solid var(--red); border-right-color:transparent; border-radius:50%; transform:rotate(20deg); }
.p-sdgs-working__num::after{ content:"Point"; order:-1; }
.p-sdgs-working__case.is-flip .p-sdgs-working__num{ left:auto; right:clamp(-44px,-3.4vw,-24px); }
.p-sdgs-working__sep{ display:none; }
.p-sdgs-working__box .lw-sub{ margin-bottom:var(--gap-xs); font-size:clamp(15px,1.2vw,18px); letter-spacing:.06em; color:var(--red); }
.p-sdgs-working__box p:not(.lw-sub){ line-height:2; }
.p-sdgs-working__box br{ display:none; }
@media (prefers-reduced-motion:reduce){
  .p-sdgs-working__study::before, .p-sdgs-working__study::after{ animation:none; }
}
@media (max-width:760px){
  .p-sdgs-working__case, .p-sdgs-working__case.is-flip{ grid-template-columns:minmax(0,1fr); }
  .p-sdgs-working__photo, .p-sdgs-working__case.is-flip .p-sdgs-working__photo{ grid-column:1; grid-row:auto; }
  .p-sdgs-working__body, .p-sdgs-working__case.is-flip .p-sdgs-working__body{ grid-column:1; grid-row:auto; margin:calc(var(--gap-m) * -1) var(--gap-s) 0; padding-top:clamp(24px,3vw,44px); }
  .p-sdgs-working__case.is-flip .p-sdgs-working__head{ padding-right:0; }
  .p-sdgs-working__num, .p-sdgs-working__case.is-flip .p-sdgs-working__num{ position:relative; top:auto; left:auto; right:auto; width:96px; margin-bottom:var(--gap-xs); font-size:14px; }
  .p-sdgs-working__study::before, .p-sdgs-working__study::after{ width:200px; }
  .p-sdgs-working__study::after{ left:-90px; }
  .p-sdgs-working__study::before{ right:-90px; }
}

/* ---------- 新着情報（info.html） ---------- */
.p-info__list{ list-style:none; margin:0 auto; padding:0; width:min(100%, 1200px); }
.p-info__item + .p-info__item{ margin-top:var(--gap-m); }
/* 白い箱に、うすい影だけ（線なし）。写真は角丸 */
.p-info__card{ display:grid; grid-template-columns:minmax(0,275px) minmax(0,1fr) auto; gap:clamp(24px,3vw,44px); align-items:center; padding:clamp(24px,3.2vw,48px); border-radius:var(--r-s); background:var(--bg); box-shadow:0 2px 14px rgba(0,0,0,.07); color:inherit; text-decoration:none; transition:box-shadow .3s; }
.p-info__photo{ display:block; overflow:hidden; border-radius:var(--r-m); }
.p-info__photo .lw-ph{ border-radius:0; }
.p-info__photo img{ transition:transform .6s cubic-bezier(.22,.9,.3,1); }
.p-info__text{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.p-info__date{ font-family:var(--font-en-grot); font-size:16px; letter-spacing:.04em; color:var(--ink); }
.p-info__title{ font-size:18px; font-weight:500; color:var(--ink); padding-bottom:4px; border-bottom:1px solid var(--ink); transition:color .25s, border-color .25s; }
.p-info__body{ margin-top:var(--gap-xs); font-size:15px; line-height:1.9; color:var(--ink); }
/* 右はしの赤い丸に白い矢印 */
.p-info__card::after{ content:""; width:48px; height:48px; border-radius:50%; background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / 42% no-repeat; transition:transform .3s; }
.p-info__card:hover{ box-shadow:0 8px 28px rgba(0,0,0,.1); }
.p-info__card:hover::after{ transform:translateX(6px); }
.p-info__card:hover .p-info__photo img{ transform:scale(1.05); }
.p-info__card:hover .p-info__title{ color:var(--red); border-color:var(--red); }
/* ページ送り：丸い札。いまのページは赤丸に白い字（右の矢印とそろえる） */
.p-info__pager{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:var(--gap-l); font-family:var(--font-en-grot); font-size:15px; letter-spacing:.04em; color:var(--ink-soft); }
.p-info__pager a,
.p-info__pager span{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--bg); box-shadow:0 2px 14px rgba(0,0,0,.07); color:var(--ink); transition:color .25s, box-shadow .25s; }
.p-info__pager span{ background:var(--red); color:var(--ink-invert); }
.p-info__pager a:hover{ color:var(--red); box-shadow:0 8px 28px rgba(0,0,0,.1); }
@media (max-width:760px){
  .p-info__card{ grid-template-columns:minmax(0,1fr); }
  .p-info__card::after{ justify-self:end; width:40px; height:40px; }
}

/* ---------- 新着情報（info-detail.html） ---------- */
/* 一覧の箱と同じ調子：白地にうすい影、写真は角丸、矢印は赤丸に白の山形 */
.p-info-detail__article{ width:min(100%, 960px); margin-inline:auto; padding:clamp(28px,4.4vw,72px); border-radius:var(--r-s); background:var(--bg); box-shadow:0 2px 14px rgba(0,0,0,.07); }
.p-info-detail__title{ font-size:clamp(20px,1.7vw,28px); font-weight:500; line-height:1.6; color:var(--ink); padding-bottom:var(--gap-s); border-bottom:1px solid var(--line-soft); }
.p-info-detail__photo{ width:min(100%, 720px); margin:clamp(32px,4vw,var(--gap-l)) auto 0; overflow:hidden; border-radius:var(--r-m); }
.p-info-detail__photo .lw-ph{ border-radius:0; }
.p-info-detail__body{ margin-top:clamp(32px,4vw,var(--gap-l)); font-size:15px; line-height:2; color:var(--ink); }
.p-info-detail__nav{ text-align:center; margin-top:var(--gap-l); }
.p-info-detail__pn{ display:flex; justify-content:center; gap:clamp(24px,4vw,64px); font-size:14px; letter-spacing:.04em; }
.p-info-detail__pn a{ color:var(--ink); transition:color .25s; }
.p-info-detail__pn a:hover{ color:var(--red); }
.p-info-detail__back{ margin-top:var(--gap-m); }
.p-info-detail__back .lw-btn{ display:inline-flex; align-items:center; gap:var(--gap-s); padding:10px 10px 10px 32px; border:0; background:var(--bg); box-shadow:0 2px 14px rgba(0,0,0,.07); font-weight:500; color:var(--ink); transition:color .25s, box-shadow .25s; }
.p-info-detail__back .lw-btn span{ width:36px; height:36px; border-radius:50%; font-size:0; background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / 42% no-repeat; transition:transform .3s; }
.p-info-detail__back .lw-btn:hover{ color:var(--red); box-shadow:0 8px 28px rgba(0,0,0,.1); }
.p-info-detail__back .lw-btn:hover span{ transform:translateX(4px); }

/* ---------- オリジナルブランド（brand.html） ---------- */
/* 食＝赤い地、ファッション＝黒い地で二つのブランドを分ける。写真は角丸＋影、文章は白い角丸カード */
.p-brand__intro{ position:relative; overflow-x:clip; }
.p-brand__cross{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; row-gap:var(--gap-s); width:min(100%, 1100px); margin:var(--gap-m) auto var(--gap-l); }
.p-brand__cross-en{ font-family:var(--font-en-geo); font-size:clamp(56px,8vw,140px); font-weight:800; letter-spacing:.02em; line-height:1; }
.p-brand__cross-en.is-food{ grid-column:1 / span 2; grid-row:1; justify-self:start; color:var(--red); }
.p-brand__cross-catch{ grid-column:1 / -1; grid-row:2; display:flex; align-items:center; gap:var(--gap-m); font-size:clamp(18px,1.8vw,26px); font-weight:700; letter-spacing:.08em; text-align:center; color:var(--ink); }
.p-brand__cross-catch::before,
.p-brand__cross-catch::after{ content:""; flex:1; height:1px; background:var(--ink); }
.p-brand__cross-en.is-fashion{ grid-column:2 / span 2; grid-row:3; justify-self:end; color:var(--ink); }
.p-brand__intro .lw-lead{ text-align:center; line-height:2; }
/* 画面に入ったら：キャッチが出る → 左右の線が外へ伸びる → FOODとFASHIONがふわっと */
.js-reveal .p-brand__cross-catch{ opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s ease; }
.js-reveal .p-brand__cross-catch::before,
.js-reveal .p-brand__cross-catch::after{ transform:scaleX(0); transition:transform 1s cubic-bezier(.65,0,.35,1) .7s; }
.js-reveal .p-brand__cross-catch::before{ transform-origin:right center; }
.js-reveal .p-brand__cross-catch::after{ transform-origin:left center; }
.js-reveal .p-brand__cross-en{ opacity:0; transform:translateY(28px); filter:blur(8px); transition:opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease; }
.js-reveal .p-brand__cross-en.is-food{ transition-delay:1.6s; }
.js-reveal .p-brand__cross-en.is-fashion{ transition-delay:1.95s; }
.js-reveal .p-brand__cross.is-in .p-brand__cross-catch,
.js-reveal .p-brand__cross.is-in .p-brand__cross-en{ opacity:1; transform:none; filter:none; }
.js-reveal .p-brand__cross.is-in .p-brand__cross-catch::before,
.js-reveal .p-brand__cross.is-in .p-brand__cross-catch::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  .js-reveal .p-brand__cross-catch, .js-reveal .p-brand__cross-catch::before, .js-reveal .p-brand__cross-catch::after, .js-reveal .p-brand__cross-en{ transition:none; }
}

.p-brand__food-sec,
.p-brand__fashion-sec{ position:relative; overflow-x:clip; padding-block:clamp(64px,7vw,var(--gap-xl)); color:var(--ink-invert); }
.p-brand__food-sec{ background:linear-gradient(180deg, var(--red) 0%, var(--pop-ring) 100%); }
.p-brand__fashion-sec{ background:var(--ink); }
.p-brand__food-sec::after,
.p-brand__fashion-sec::before,
.p-brand__fashion-sec .p-brand__lineup::after{ content:""; position:absolute; z-index:0; top:6%; right:max(-140px, calc(50% - 780px)); width:clamp(260px,30vw,440px); aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(rgba(255,255,255,.35) 2.4px, transparent 3px) 0 0 / 14px 14px; -webkit-mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); animation:p-sankyomembers-dots 60s linear infinite; }
/* 黒い地の点の輪は、商品ラインナップの枠の右上の奥からのぞかせる */
.p-brand__fashion-sec .p-brand__lineup{ position:relative; background:var(--panel-deep); }
.p-brand__fashion-sec .p-brand__lineup::after{ z-index:-1; top:clamp(-170px,-12vw,-90px); right:clamp(-150px,-10vw,-70px); background:radial-gradient(var(--red) 2.4px, transparent 3px) 0 0 / 14px 14px; animation-direction:reverse; }
.p-brand__food-sec > .inner,
.p-brand__fashion-sec > .inner{ position:relative; z-index:1; width:min(100% - var(--gap-m)*2, 1320px); }
.p-brand__big{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; line-height:1; }
.p-brand__big-en{ font-family:var(--font-en-geo); font-size:clamp(56px,7vw,120px); font-weight:800; letter-spacing:.02em; }
.p-brand__big-en:last-child{ padding-left:clamp(32px,6vw,96px); color:rgba(255,255,255,.4); }
.p-brand__big-sub{ padding-left:clamp(32px,6vw,96px); font-family:var(--font-en-geo); font-size:clamp(16px,1.5vw,22px); font-weight:700; letter-spacing:.12em; }
.p-brand__fashion-sec .p-brand__big-en:first-child{ color:var(--red); }
/* ファッションの見出しは右寄せ。左に赤い章と同じ白い点の輪 */
.p-brand__fashion-sec .p-brand__big{ align-items:flex-end; text-align:right; }
.p-brand__fashion-sec .p-brand__big-sub, .p-brand__fashion-sec .p-brand__big-en:last-child{ padding-left:0; padding-right:clamp(32px,6vw,96px); }
.p-brand__fashion-sec::before{ top:6%; right:auto; left:max(-140px, calc(50% - 780px)); }
/* 食の見出し：With Three×金そぼろ が先に出て、そのあと FOOD・BRAND がふわっと */
.js-reveal .p-brand__big .p-brand__big-sub{ opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s ease; }
.js-reveal .p-brand__big .p-brand__big-en{ opacity:0; transform:translateY(28px); filter:blur(8px); transition:opacity 1.1s ease .7s, transform 1.1s ease .7s, filter 1.1s ease .7s; }
.js-reveal .p-brand__big .p-brand__big-en:last-child{ transition-delay:1s; }
.js-reveal .p-brand__big.is-in > *{ opacity:1; transform:none; filter:none; }
.p-brand__fig{ margin:0; }
.p-brand__fig .ph{ border:0; border-radius:var(--r-m); overflow:hidden; box-shadow:0 14px 36px rgba(0,0,0,.24); }
.p-brand__fashion-sec .p-brand__fig .ph{ background:var(--panel); }
.p-brand__cap{ margin-top:var(--gap-s); font-family:var(--font-en-geo); font-size:clamp(14px,1.1vw,17px); font-weight:700; letter-spacing:.12em; }
.p-brand__cap::before{ content:""; display:inline-block; width:.55em; aspect-ratio:1; margin-right:10px; border-radius:50%; background:currentColor; vertical-align:.1em; }
.p-brand__fashion-sec .p-brand__cap::before{ background:var(--red); }
.p-brand__concept{ border:0; border-radius:var(--r-m); padding:clamp(24px,3vw,44px); background:var(--bg); color:var(--ink); box-shadow:0 14px 36px rgba(0,0,0,.18); }
.p-brand__concept p{ line-height:2; }
.p-brand__concept br{ display:none; }
.p-brand__catch{ font-size:clamp(26px,3vw,46px); font-weight:800; letter-spacing:.06em; line-height:1.5; }
.p-brand__catch-line{ display:block; }
.p-brand__catch.is-fashion .p-brand__catch-line:last-child{ color:var(--red); }
.p-brand__food{ display:grid; grid-template-columns:minmax(0,500fr) minmax(0,450fr) minmax(0,800fr); gap:var(--gap-m) clamp(24px,3vw,48px); margin-top:var(--gap-l); align-items:start; }
.p-brand__fig.is-withthree{ grid-column:1; grid-row:1 / span 2; }
.p-brand__concept.is-food{ grid-column:2 / span 2; grid-row:1; margin-top:var(--gap-l); }
.p-brand__fig.is-kinsoboro{ grid-column:2; grid-row:2; }
.p-brand__catch.is-food{ grid-column:3; grid-row:2; align-self:center; justify-self:center; position:relative; isolation:isolate; padding:clamp(40px,4vw,64px) clamp(16px,2vw,32px); text-align:center; }
/* 後ろで点の輪が回る */
.p-brand__catch.is-food::before{ content:""; position:absolute; z-index:-1; top:50%; left:50%; aspect-ratio:1; border-radius:50%; pointer-events:none; -webkit-mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); }
.p-brand__catch.is-food::before{ width:clamp(300px,30vw,440px); background:radial-gradient(rgba(255,255,255,.45) 2.4px, transparent 3px) 0 0 / 14px 14px; animation:p-brand-spin 40s linear infinite; }
@keyframes p-brand-spin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
/* 画面に入ったら一行ずつ下から出る。「笑い」「食」の行は少し遅れて弾む */
.js-reveal .p-brand__catch.is-food .p-brand__catch-line{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.34,1.56,.64,1); }
.js-reveal .p-brand__catch.is-food .p-brand__catch-line:last-child{ transition-delay:.45s; }
.js-reveal .p-brand__catch.is-food.is-in .p-brand__catch-line{ opacity:1; transform:none; }
.js-reveal .p-brand__catch.is-food::before{ opacity:0; transition:opacity 1.2s ease .2s; }
.js-reveal .p-brand__catch.is-food.is-in::before{ opacity:1; }
.p-brand__fashion{ display:grid; grid-template-columns:minmax(0,200fr) minmax(0,750fr) minmax(0,700fr); gap:var(--gap-m) clamp(24px,3vw,48px); margin-top:var(--gap-l); align-items:start; }
.p-brand__concept.is-fashion{ grid-column:1 / span 2; grid-row:1; }
.p-brand__fig.is-goodfood{ grid-column:3; grid-row:1 / span 2; }
.p-brand__fig.is-smile{ grid-column:2; grid-row:2; }
.p-brand__catch.is-fashion{ grid-column:1; grid-row:2 / span 2; align-self:center; writing-mode:vertical-rl; justify-self:center; }
.p-brand__fig.is-true{ grid-column:2 / span 2; grid-row:3; width:70%; justify-self:center; }
/* 商品ラインナップ：横に並べて左右の矢印で送る */
.p-brand__lineup{ margin-top:var(--gap-xl); padding:clamp(28px,3.4vw,52px) clamp(20px,3vw,48px); border-radius:var(--r-l); background:rgba(255,255,255,.1); }
.p-brand__lineup-title{ display:flex; align-items:center; gap:14px; font-size:clamp(20px,1.8vw,28px); font-weight:700; letter-spacing:.08em; }
.p-brand__lineup-title::before{ content:""; flex:none; width:.6em; aspect-ratio:1; border-radius:50%; background:var(--ink-invert); }
.p-brand__fashion-sec .p-brand__lineup-title::before{ background:var(--red); }
.p-brand__lineup-list{ display:flex; align-items:center; gap:var(--gap-s); margin-top:var(--gap-m); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.p-brand__lineup-list::-webkit-scrollbar{ display:none; }
.p-brand__lineup-item{ flex:0 0 calc((100% - var(--gap-s) * 3) / 4); scroll-snap-align:start; }
.p-brand__lineup-item .ph{ border:0; border-radius:var(--r-m); overflow:hidden; background:rgba(255,255,255,.14); }
.p-brand__lineup-nav{ display:flex; justify-content:center; gap:var(--gap-s); margin-top:var(--gap-m); }
.p-brand__arrow{ position:relative; width:48px; height:48px; border:1px solid var(--ink-invert); border-radius:50%; background:transparent; cursor:pointer; transition:background .3s; }
.p-brand__arrow::before{ content:""; position:absolute; top:50%; left:50%; width:10px; height:10px; border-top:2px solid var(--ink-invert); border-right:2px solid var(--ink-invert); transform:translate(-65%,-50%) rotate(45deg); transition:border-color .3s; }
.p-brand__arrow.is-prev::before{ transform:translate(-35%,-50%) rotate(-135deg); }
.p-brand__arrow:hover{ background:var(--ink-invert); }
.p-brand__arrow:hover::before{ border-color:var(--red); }
@media (prefers-reduced-motion:reduce){
  .p-brand__food-sec::after, .p-brand__fashion-sec::before, .p-brand__fashion-sec .p-brand__lineup::after, .p-brand__catch.is-food::before{ animation:none; }
  .js-reveal .p-brand__catch.is-food .p-brand__catch-line, .js-reveal .p-brand__big > *{ transition:none; }
}
@media (max-width:760px){
  .p-brand__cross, .p-brand__food, .p-brand__fashion{ grid-template-columns:minmax(0,1fr); }
  /* 子の配置は .p-brand__concept.is-food などクラス二つで指定しているので、こちらも [class] を足して同じ強さにし、後ろに置いて勝たせる */
  .p-brand__cross > [class], .p-brand__food > [class], .p-brand__fashion > [class]{ grid-column:auto; grid-row:auto; justify-self:stretch; }
  .p-brand__cross-en.is-food{ justify-self:start; }
  .p-brand__cross-en.is-fashion{ justify-self:end; }
  .p-brand__catch.is-food{ justify-self:center; text-align:center; }
  .p-brand__catch.is-fashion{ writing-mode:horizontal-tb; }
  .p-brand__fig.is-true{ width:auto; }
  .p-brand__concept.is-food{ margin-top:0; }
  .p-brand__intro .lw-lead br{ display:none; }
  .p-brand__intro .lw-lead{ text-align:left; }
  .p-brand__lineup-item{ flex-basis:calc((100% - var(--gap-s)) / 1.6); }
  .p-brand__food-sec::after, .p-brand__fashion-sec::before, .p-brand__fashion-sec .p-brand__lineup::after{ width:200px; }
  .p-brand__fashion-sec::before{ left:-90px; }
  .p-brand__food-sec::after{ right:-90px; }
  .p-brand__fashion-sec .p-brand__lineup::after{ top:-80px; right:-50px; }
}

/* ---------- SankyoMembers（sankyomembers.html） ---------- */
/* WHAT'S：赤＋上から消える白い点の帯。中央に英字＋文章、まわりに丸写真を散らす（ワイヤーの位置を百分率で）。画面に入ると丸が中央から外へ広がって位置に着く */
.p-sankyomembers__what{ position:relative; padding-block:clamp(64px,7vw,var(--gap-xl)); background:linear-gradient(180deg, var(--red) 0%, var(--pop-ring) 100%); color:var(--ink-invert); overflow-x:clip; }
.p-sankyomembers__what::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.28) 1.2px, transparent 1.6px); background-size:12px 12px; -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 75%); mask-image:linear-gradient(180deg, #000 0%, transparent 75%); }
.p-sankyomembers__what > *{ position:relative; }
.p-sankyomembers__what .lw-title__en,
.p-sankyomembers__what .lw-title__ja{ color:var(--ink-invert); }
.p-sankyomembers__what .lw-title__en::after,
.p-sankyomembers__what .lw-title__ja::before{ background:var(--ink-invert); }
.p-sankyomembers__scatter{ position:relative; width:min(100%, 1920px); margin-inline:auto; aspect-ratio:1920/820; }
.p-sankyomembers__dot{ position:absolute; display:block; left:var(--x); top:var(--y); width:var(--w); border-radius:50%; box-shadow:0 6px 20px rgba(0,0,0,.22); transition:left 1.1s cubic-bezier(.22,.9,.3,1), top 1.1s cubic-bezier(.22,.9,.3,1), opacity .6s ease, transform 1.1s cubic-bezier(.22,.9,.3,1); }
.js-reveal .p-sankyomembers__scatter:not(.is-in) .p-sankyomembers__dot{ left:calc(50% - var(--w) / 2); top:42%; opacity:0; transform:scale(.4); }
.p-sankyomembers__dot:nth-child(2){ transition-delay:.05s; }
.p-sankyomembers__dot:nth-child(3){ transition-delay:.1s; }
.p-sankyomembers__dot:nth-child(4){ transition-delay:.15s; }
.p-sankyomembers__dot:nth-child(5){ transition-delay:.2s; }
.p-sankyomembers__dot:nth-child(6){ transition-delay:.25s; }
.p-sankyomembers__dot:nth-child(7){ transition-delay:.3s; }
.p-sankyomembers__dot:nth-child(8){ transition-delay:.35s; }
.p-sankyomembers__dot:nth-child(9){ transition-delay:.4s; }
.p-sankyomembers__dot:nth-child(10){ transition-delay:.45s; }
.p-sankyomembers__dot:nth-child(11){ transition-delay:.5s; }
.p-sankyomembers__what-body{ position:absolute; left:50%; top:50%; z-index:1; width:min(92%, 760px); transform:translate(-50%,-50%); text-align:center; }
.p-sankyomembers__what-en{ font-family:var(--font-en-geo); font-size:clamp(28px,3.6vw,56px); font-weight:700; line-height:1.1; letter-spacing:.08em; color:var(--ink-invert); }
.p-sankyomembers__what-en::after{ content:""; display:block; width:48px; height:3px; margin:var(--gap-s) auto 0; background:var(--ink-invert); }
.p-sankyomembers__what .p-sankyomembers__what-text{ margin-top:var(--gap-m); font-size:clamp(14px,1.1vw,17px); font-weight:500; line-height:2.2; letter-spacing:.06em; text-align:center; color:var(--ink-invert); }
@media (prefers-reduced-motion:reduce){
  .p-sankyomembers__dot{ transition:none; }
}
@media (max-width:1100px){
  .p-sankyomembers__scatter{ aspect-ratio:1920/1100; }
}

/* SPECIAL AMBASSADOR：上段＝左に金田さんの写真、右に英字の札・名前・特設サイトのバナー。下段＝赤い角丸の帯、左に活動内容（白字）、右に写真が立体的な輪になって回る */
/* 上段＝左に金田さんの写真、右に英字の札・名前・バナーを中央ぞろえ。下段＝横長の赤い角丸の帯、左に活動内容、右に写真がらせん状の輪になって回る */
.p-sankyomembers__amb{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,4vw,64px); align-items:center; width:min(100%,1200px); margin:var(--gap-l) auto 0; }
.p-sankyomembers__amb-info{ text-align:center; }
.p-sankyomembers__amb-photo{ order:2; }
.p-sankyomembers__amb-photo img{ display:block; width:100%; height:auto; border-radius:var(--r-m); }
.p-sankyomembers__amb-label{ font-family:var(--font-en-geo); font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--red); }
.p-sankyomembers__amb-label::before{ content:""; display:inline-block; width:.5em; height:.5em; margin-right:.6em; border-radius:50%; background:var(--red); vertical-align:.1em; }
.p-sankyomembers__amb-info .p-sankyomembers__name{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:var(--gap-s); font-size:clamp(28px,2.8vw,42px); font-weight:700; letter-spacing:.1em; line-height:1.3; color:var(--ink); }
.p-sankyomembers__amb-info .p-sankyomembers__name-en{ font-family:var(--font-en-geo); font-size:clamp(13px,1vw,15px); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.p-sankyomembers__amb-info .p-sankyomembers__banner{ display:block; width:min(100%, 360px); margin:var(--gap-m) auto 0; border-radius:var(--r-s); overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.08); transition:transform .3s, box-shadow .3s; }
.p-sankyomembers__amb-info .p-sankyomembers__banner img{ display:block; width:100%; height:auto; }
.p-sankyomembers__amb-info .p-sankyomembers__banner:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.14); }
.p-sankyomembers__name{ font-size:clamp(22px,2vw,36px); font-weight:400; color:var(--ink-soft); }
.p-sankyomembers__name-en{ color:var(--line-soft); }
.p-sankyomembers__acts-title{ font-size:clamp(24px,2.4vw,34px); font-weight:700; letter-spacing:.12em; }
.p-sankyomembers__acts-title::after{ content:""; display:block; width:48px; height:3px; margin-top:var(--gap-s); background:var(--ink-invert); }
.p-sankyomembers__acts p + p{ margin-top:var(--gap-m); font-size:clamp(14px,1.1vw,16px); font-weight:500; line-height:2.2; letter-spacing:.06em; }
.p-sankyomembers__acts-band{ position:relative; display:flex; align-items:center; justify-content:flex-end; width:min(100%,1200px); min-height:clamp(420px,42vw,560px); margin:clamp(40px,5vw,72px) auto 0; padding:clamp(40px,5vw,64px) clamp(28px,6vw,80px); border-radius:var(--r-m); overflow:hidden; isolation:isolate; background:linear-gradient(115deg, var(--red) 0%, var(--pop-ring) 100%); color:var(--ink-invert); }
.p-sankyomembers__acts-band::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(270deg, rgba(196,16,47,.55) 0%, rgba(196,16,47,0) 48%); -webkit-mask-image:linear-gradient(270deg, #000 0%, #000 30%, transparent 60%); mask-image:linear-gradient(270deg, #000 0%, #000 30%, transparent 60%); }
.p-sankyomembers__acts{ position:relative; z-index:4; width:min(42%, 420px); }
.p-sankyomembers__ring-scene{ position:absolute; inset:0; z-index:2; pointer-events:none; perspective:var(--ring-perspective,1140px); perspective-origin:55% 50%; --ring-radius:440px; --ring-width:273px; }
.p-sankyomembers__ring-tilt,
.p-sankyomembers__ring-scroll,
.p-sankyomembers__ring{ position:absolute; display:block; width:0; height:0; transform-style:preserve-3d; }
.p-sankyomembers__ring-tilt{ left:55%; top:50%; transform:rotateZ(-10deg) rotateY(-30deg); }
.p-sankyomembers__ring-scroll{ transform:rotateX(var(--ring-orbit,0deg)); }
.p-sankyomembers__ring{ animation:p-sankyomembers-ring 58s linear infinite; }
/* 点でうめた太い輪（ドーナツ形）。赤い帯の右下の角と、スポンサーのカードの奥で、ゆっくり回る */
.p-sankyomembers__sponsor{ position:relative; overflow-x:clip; }
.p-sankyomembers__sponsor > *{ position:relative; z-index:1; }
.p-sankyomembers__sponsor::before,
.p-sankyomembers__sponsor::after,
.p-sankyomembers__acts-band::after{ content:""; position:absolute; aspect-ratio:1; border-radius:50%; pointer-events:none; -webkit-mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); mask-image:radial-gradient(circle closest-side, transparent 50%, #000 51%, #000 99%, transparent 100%); animation:p-sankyomembers-dots 60s linear infinite; }
.p-sankyomembers__acts-band::after{ right:clamp(-150px,-11vw,-90px); bottom:clamp(-150px,-11vw,-90px); z-index:1; width:clamp(240px,30vw,380px); background:radial-gradient(rgba(255,255,255,.35) 2.4px, transparent 3px) 0 0 / 14px 14px; }
.p-sankyomembers__sponsor::before,
.p-sankyomembers__sponsor::after{ z-index:0; background:radial-gradient(var(--red) 2.4px, transparent 3px) 0 0 / 14px 14px; }
.p-sankyomembers__sponsor::before{ top:15%; right:max(-120px, calc(50% - 720px)); width:clamp(240px,26vw,380px); }
.p-sankyomembers__sponsor::after{ bottom:-2%; left:max(-120px, calc(50% - 740px)); width:clamp(260px,30vw,440px); animation-direction:reverse; }
@keyframes p-sankyomembers-dots{ to{ transform:rotate(360deg); } }
.p-sankyomembers__ring-card{ position:absolute; display:block; width:var(--ring-width); height:0; left:calc(var(--ring-width) / -2); top:0; transform-style:preserve-3d; transform:rotateX(var(--card-angle)) translateZ(var(--ring-radius)) rotateY(26deg); }
.p-sankyomembers__ring-face,
.p-sankyomembers__ring-back{ position:absolute; left:0; right:0; top:0; display:block; border-radius:6px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.p-sankyomembers__ring-face{ transform:translateY(-50%) translateZ(.2px); overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.2); }
.p-sankyomembers__ring-face img{ display:block; width:100%; height:auto; }
.p-sankyomembers__ring-back{ height:calc(var(--ring-width) * .7); transform:translateY(-50%) rotateY(180deg) translateZ(.2px) scale(.78); background:var(--red-deep); opacity:.5; filter:blur(2px); }
@keyframes p-sankyomembers-ring{ from{ transform:rotateX(8deg); } to{ transform:rotateX(368deg); } }
@media (prefers-reduced-motion:reduce){
  .p-sankyomembers__ring{ animation:none; transform:rotateX(8deg); }
  .p-sankyomembers__acts-band::after, .p-sankyomembers__sponsor::before, .p-sankyomembers__sponsor::after, .p-sankyomembers__band-track, .p-sankyomembers__finger, .p-sankyomembers__insta-btn{ animation:none; }
}

/* SPONSOR：写真（493）が左右どちらか・SNSの丸と名前・灰色のプロフィール枠（1075） */
.p-sankyomembers__sp{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-areas:"photo head" "box box"; gap:var(--gap-m) clamp(24px,4vw,56px); align-items:center; width:min(100%, 1100px); margin:var(--gap-l) auto 0; padding:clamp(24px,4vw,56px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 12px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04); }
.p-sankyomembers__sp-photo{ grid-area:photo; }
.p-sankyomembers__sp-photo img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:50% 12%; border-radius:var(--r-m); }
.p-sankyomembers__sp-head{ grid-area:head; display:flex; flex-direction:column-reverse; align-items:flex-start; gap:var(--gap-m); }
.p-sankyomembers__sp-box{ grid-area:box; }
.p-sankyomembers__sp-box p{ line-height:2; }
.p-sankyomembers__sp-box br{ display:none; }
.p-sankyomembers__sp .p-sankyomembers__name{ font-size:clamp(26px,2.6vw,40px); font-weight:700; color:var(--ink); line-height:1.4; }
.p-sankyomembers__sp .p-sankyomembers__name-en{ display:inline-block; margin-top:6px; font-size:clamp(14px,1.1vw,17px); font-weight:500; color:var(--red); }
.p-sankyomembers__sns{ display:flex; align-items:center; gap:var(--gap-s); }
.p-sankyomembers__sns-link{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--bg); border:1px solid rgba(0,0,0,.08); box-shadow:0 4px 14px rgba(0,0,0,.08); transition:transform .3s, box-shadow .3s, border-color .3s; }
.p-sankyomembers__sns-link:hover{ transform:translateY(-4px) scale(1.06); border-color:var(--red); box-shadow:0 10px 24px rgba(0,0,0,.16); }
.p-sankyomembers__sns-icon{ display:block; width:30px; height:30px; object-fit:cover; }
.p-sankyomembers__sns-icon.is-left{ object-position:0% 50%; }
.p-sankyomembers__sns-icon.is-right{ object-position:100% 50%; }

/* MEMBER：Instagram投稿のカード群（ワイヤーの実寸 1102） */
.p-sankyomembers__cards{ max-width:1102px; margin:var(--gap-m) auto 0; padding:clamp(16px,2.4vw,32px); border-radius:var(--r-m); background:var(--bg-grey-3); }
.p-sankyomembers__cards img{ display:block; width:100%; height:auto; }

/* RECIPE：写真の帯（回転はさせず並べるだけ） */
.p-sankyomembers__band.p-sankyomembers__band--a,
.p-sankyomembers__band.p-sankyomembers__band--c{ display:block; overflow:hidden; padding:clamp(20px,2.4vw,32px) 0; background:linear-gradient(115deg, var(--red) 0%, var(--pop-ring) 100%); border:0; }
.p-sankyomembers__band-track{ display:flex; gap:var(--gap-s); width:max-content; padding-right:var(--gap-s); animation:p-sankyomembers-flow 50s linear infinite; }
.p-sankyomembers__band--c .p-sankyomembers__band-track{ animation-direction:reverse; }
.p-sankyomembers__band:hover .p-sankyomembers__band-track{ animation-play-state:paused; }
.p-sankyomembers__band-track .p-sankyomembers__band-item{ flex:none; width:clamp(130px,13vw,200px); }
.p-sankyomembers__band-track .lw-ph{ border:0; border-radius:var(--r-s); overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.18); }
@keyframes p-sankyomembers-flow{ to{ transform:translateX(-50%); } }
.p-sankyomembers__band{ display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:var(--gap-m); padding:var(--gap-s) var(--gap-m); background:var(--bg-grey); border-block:1px solid var(--line); }
.p-sankyomembers__band--b{ grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); }
.p-sankyomembers__band-item{ display:block; }
.p-sankyomembers__recipe-mid{ display:grid; justify-items:center; width:100%; padding:clamp(8px,1.2vw,16px) var(--gap-m); text-align:center; background:linear-gradient(115deg, var(--red) 0%, var(--pop-ring) 100%); }
.p-sankyomembers__recipe-text{ width:min(100%, 960px); padding:clamp(32px,4vw,56px) clamp(20px,4vw,64px); border-radius:var(--r-m); background:var(--bg); box-shadow:0 12px 32px rgba(0,0,0,.16); }
.p-sankyomembers__recipe-head{ margin-bottom:var(--gap-s); font-size:clamp(24px,2.4vw,36px); font-weight:700; letter-spacing:.08em; line-height:1.4; color:var(--red); }
.p-sankyomembers__recipe-btn{ display:block; max-width:520px; margin:var(--gap-m) auto 0; }
.p-sankyomembers__recipe-btn img{ width:100%; height:auto; }

/* ハッシュタグ：左＝文・#の丸2つ・写真（767）／右＝公式Instagramのボタン（596）＋指アイコン */
.p-sankyomembers__tag{ width:min(100% - var(--gap-m)*2, 1080px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; margin-top:var(--gap-l); }
.p-sankyomembers__tag-main{ position:relative; padding-right:14%; }
.p-sankyomembers__tag-photo{ margin:0; }
.p-sankyomembers__tag-photo img{ display:block; width:100%; height:auto; border-radius:var(--r-m); }
.p-sankyomembers__hash{ position:absolute; z-index:1; width:23%; aspect-ratio:1/1; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-size:clamp(12px,1vw,16px); font-weight:700; letter-spacing:.04em; color:var(--ink-invert); box-shadow:0 10px 28px rgba(0,0,0,.14); }
.p-sankyomembers__hash--l{ top:8%; right:0; }
.p-sankyomembers__hash--r{ top:46%; right:10%; }
.p-sankyomembers__tag-side{ text-align:center; }
.p-sankyomembers__tag-side .p-sankyomembers__insta{ margin:var(--gap-m) auto 0; }
.p-sankyomembers__insta{ position:relative; display:block; width:min(100%,480px); }
.p-sankyomembers__insta-btn{ display:flex; align-items:center; gap:16px; padding:22px 26px; border-radius:var(--r-s); background:linear-gradient(100deg, var(--insta-1) 0%, var(--insta-2) 50%, var(--insta-3) 100%); color:var(--ink-invert); box-shadow:0 10px 28px rgba(238,42,123,.28); transition:transform .3s, box-shadow .3s; animation:p-sankyomembers-press 1.3s ease-in-out infinite; }
.p-sankyomembers__insta:hover .p-sankyomembers__insta-btn{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(238,42,123,.38); }
.p-sankyomembers__insta-logo{ position:relative; flex:none; width:34px; height:34px; border:3px solid var(--ink-invert); border-radius:10px; }
.p-sankyomembers__insta-logo::before{ content:""; position:absolute; inset:0; margin:auto; width:12px; height:12px; border:3px solid var(--ink-invert); border-radius:50%; }
.p-sankyomembers__insta-logo::after{ content:""; position:absolute; top:4px; right:4px; width:4px; height:4px; border-radius:50%; background:var(--ink-invert); }
.p-sankyomembers__insta-label{ flex:1; font-size:clamp(18px,1.6vw,22px); font-weight:700; letter-spacing:.06em; text-align:left; }
.p-sankyomembers__insta-arrow{ position:relative; flex:none; width:34px; height:34px; border-radius:50%; background:var(--ink-invert); }
.p-sankyomembers__insta-arrow::before{ content:""; position:absolute; top:50%; left:54%; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--insta-3); transform:translate(-50%,-50%); }
.p-sankyomembers__finger{ position:absolute; right:-26px; bottom:-56px; width:96px; height:auto; transform-origin:50% 0; filter:drop-shadow(0 8px 12px rgba(0,0,0,.22)); animation:p-sankyomembers-tap 1.3s ease-in-out infinite; pointer-events:none; }
@keyframes p-sankyomembers-tap{ 0%,60%,100%{ transform:translate(0,0) scale(1); } 30%{ transform:translate(-12px,-20px) scale(.86); } }
@keyframes p-sankyomembers-press{ 0%,22%,46%,100%{ scale:1; } 32%{ scale:.96; } }

@media (max-width:760px){
  .p-sankyomembers__scatter{ aspect-ratio:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap-s); padding-inline:var(--gap-s); }
  .p-sankyomembers__dot{ position:static; width:64px; }
  .p-sankyomembers__what-body{ position:static; order:-1; flex-basis:100%; width:auto; margin-bottom:var(--gap-s); transform:none; }
  .p-sankyomembers__what .p-sankyomembers__what-text br{ display:none; }
  .p-sankyomembers__amb{ grid-template-columns:minmax(0,1fr); }
  .p-sankyomembers__amb-photo{ order:0; }
  .p-sankyomembers__acts-band::after{ width:220px; right:-90px; bottom:-90px; }
  .p-sankyomembers__sponsor::before, .p-sankyomembers__sponsor::after{ width:200px; }
  .p-sankyomembers__sponsor::before{ right:-90px; }
  .p-sankyomembers__sponsor::after{ left:-90px; }
  .p-sankyomembers__acts-band{ flex-direction:column; align-items:flex-start; min-height:0; padding-bottom:360px; }
  .p-sankyomembers__acts-band::before{ -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 25%, transparent 55%); mask-image:linear-gradient(180deg, #000 0%, #000 25%, transparent 55%); }
  .p-sankyomembers__acts{ width:100%; }
  .p-sankyomembers__ring-scene{ perspective-origin:58% 76%; }
  .p-sankyomembers__ring-tilt{ left:58%; top:76%; }
  .p-sankyomembers__acts p + p{ font-size:13px; letter-spacing:.02em; line-height:2; }
  .p-sankyomembers__sp{ grid-template-columns:minmax(0,1fr); grid-template-areas:"photo" "head" "box"; padding:var(--gap-s); }
      .p-sankyomembers__band{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-s); padding:var(--gap-s); }
  .p-sankyomembers__band.p-sankyomembers__band--a, .p-sankyomembers__band.p-sankyomembers__band--c{ padding:var(--gap-s) 0; }
  .p-sankyomembers__band--b{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .p-sankyomembers__recipe-mid, .p-sankyomembers__tag{ grid-template-columns:minmax(0,1fr); }
  .p-sankyomembers__tag-main{ padding-right:0; text-align:center; }
  .p-sankyomembers__hash{ position:static; display:inline-flex; width:104px; margin:calc(var(--gap-s) * -1) var(--gap-xs) 0; font-size:13px; }
}

/* 灰色の枠に入れた仮画像。枠いっぱいに敷く（枠の中の文字は画像の上に出す） */
.lw-ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }