/* =========================================================
   三共食品 調味料サイト — 土台
   2026-08-07 作成 / 2026-08-09 お手本として作り直し

   ここに入っているのは「11枚で共通の器」だけです。
     ・いちばん上の帯（ヘッダー）
     ・表紙の大きい写真のところ（ファーストビュー）
     ・下層ページの見出しの帯
     ・お問い合わせの帯
     ・いちばん下の帯（フッター）
     ・見出しの型と、色・書体・余白の決めごと

   ⚠️ これは「たたき台」です。気に入らないところは全部変えてかまいません。
      色・書体・余白・並べ方、どれも動かせます。
      ただし変えるときは、下の :root の値を書き換えてください。
      そうすれば11枚ぜんぶに一度に効きます。

   ⚠️ 各セクションの中身（メッセージ・新着情報・事業内容 …）は
      まだ何も作っていません。そこが今回つくっていただくところです。
   ========================================================= */

/* ---------------------------------------------------------
   1. 決めごと（色・書体・余白）
   ここだけ書き換えれば全ページに効きます
   --------------------------------------------------------- */
:root{
  /* 色 ------------------------------------------------- */
  --red:#f3011a;          /* ロゴの赤。アクセント専用。面で広く塗らない */
  --red-deep:#c6001d;     /* 押したとき・ホバーの赤 */
  --ink:#1a1a1a;          /* 本文の黒 */
  --ink-soft:#4a4a4a;     /* すこし弱い黒 */
  --sub:#7a7a7a;          /* 補助の文字 */
  --line:#e6e6e6;         /* 罫線 */
  --bg:#ffffff;           /* 地色 */
  --bg-soft:#f4f4f4;      /* グレーの帯 */
  --bg-image:#c9c9c9;     /* 写真が入る前のグレー */
  --bg-grey:#efefef;      /* Business・About us の灰色の地 */
  --bg-msg:#fff5f5;       /* お知らせカードの淡いピンク */
  --line-soft:#f2dcdc;    /* お知らせカードの中の罫線 */
  --sub-invert:#f0f0f0;   /* 濃い地の上に置く、弱い文字 */
  --red-glow:rgba(243,1,26,.12); /* 入力欄を選んだときの、まわりのぼんやりした赤 */

  /* 書体 ----------------------------------------------- */
  --font-base:"Noto Sans JP","源ノ角ゴシック",sans-serif;

  /* 英字の大見出しの書体。下の2行は「どちらか片方だけ」を生かします。
     A ＝ 既存サイト準拠（Noto Sans JP）
     B ＝ Montserrat（2026-08-10 に那尚香さんが作られた見た目）… いま有効
     入れ替えるときは、生きている行をコメントにして、もう片方のコメントを外すだけ。
     11ページすべてが一度に切り替わります。書体の読み込み（<link>）は
     両方入れてあるので、HTML側は触らなくて大丈夫です。
     （使われないほうの書体はブラウザが取りに行かないので、通信の無駄も出ません） */
  /* --font-en:"Noto Sans JP","源ノ角ゴシック",sans-serif; */      /* A */
  --font-en:"Montserrat","Noto Sans JP",sans-serif;            /* B ← いま有効 */

  /* 余白（8の倍数で揃えています） --------------------- */
  --gap-xs:8px;
  --gap-s:16px;
  --gap-m:32px;
  --gap-l:56px;
  --gap-xl:88px;          /* セクションとセクションのあいだ */

  /* 幅 ------------------------------------------------- */
  --maxw:1200px;
  --pad-x:40px;

  /* 文字と文字のあいだ（先方のご要望） ----------------- */
  --track-wide:.28em;     /* 社名など、うんと広げるところ */
  --track-mid:.10em;      /* 英字の小見出し */
  --track-tight:.01em;    /* 大きな英字見出し */

  --header-h:96px;
}

@media (max-width:900px){
  :root{
    --gap-xl:56px;
    --gap-l:36px;
    --pad-x:20px;
    --header-h:64px;
  }
}

/* ---------------------------------------------------------
   2. 土台
   --------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--font-base);
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* ワイヤーで「テキストが入ります」になっている＝本番の文章がまだ届いていない箇所 */
.is-dummy{color:var(--sub)}

/* ---------------------------------------------------------
   3. いちばん上の帯（11枚で共通）
   --------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-m);
  padding-inline:var(--pad-x);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--red);
}

.site-header__logo img{height:32px;width:auto}
@media (max-width:900px){.site-header__logo img{height:22px}}

.site-header__right{
  display:flex;
  align-items:center;
  gap:var(--gap-s);
}

/* 「採用情報」「JA」＝細い枠のボタン */
.pill{
  display:inline-flex;
  align-items:center;
  gap:var(--gap-xs);
  height:44px;
  padding-inline:22px;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:14px;
  letter-spacing:var(--track-mid);
  white-space:nowrap;
  transition:border-color .25s,color .25s;
}
.pill:hover{border-color:var(--red);color:var(--red)}

.pill__flag{
  width:14px;height:14px;border-radius:50%;
  background:var(--red);
  flex:none;
}

/* ハンバーガー＝円のなかに3本線 */
.menu-btn{
  width:52px;height:52px;
  display:grid;place-content:center;gap:5px;
  border:1px solid var(--line);
  border-radius:50%;
  background:none;
  cursor:pointer;
  transition:border-color .25s;
}
.menu-btn:hover{border-color:var(--red)}
.menu-btn span{display:block;width:20px;height:1px;background:var(--ink)}

@media (max-width:900px){
  .site-header__right .pill--recruit{display:none}
}

/* ハンバーガーを押したときの3本線（真ん中が消えて上下が交差） */
.menu-btn span{transition:transform .3s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------
   3-2. メニューの中身（11枚で共通・たたき台）
   ワイヤーの「開いた状態」をそのまま置いています。
   見せ方（出方・並べ方・大きさ）は変えてかまいません。
   行き先と項目の数は変えないでください。
   --------------------------------------------------------- */
.site-menu{
  position:fixed;
  inset:var(--header-h) 0 auto 0;
  z-index:99;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .28s,transform .28s;
  max-height:calc(100vh - var(--header-h));
  overflow-y:auto;
}
body.is-menu-open .site-menu{opacity:1;transform:none}
body.is-menu-open{overflow:hidden}

.site-menu__inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:var(--gap-l) var(--pad-x);
  display:flex;
  flex-direction:column;
  gap:var(--gap-m);
}

.site-menu__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap-s) var(--gap-l);
}
.site-menu__cols a{
  display:block;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:17px;
  letter-spacing:var(--track-mid);
  transition:color .25s;
}
.site-menu__cols a:hover{color:var(--red)}

.site-menu__contact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  min-width:260px;
  height:56px;
  padding-inline:32px;
  border:1px solid var(--red);
  border-radius:999px;
  color:var(--red);
  font-weight:700;
  letter-spacing:var(--track-mid);
  transition:background .25s,color .25s;
}
.site-menu__contact:hover{background:var(--red);color:var(--bg)}

.site-menu__group{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap-s);
}
.site-menu__group a{
  display:inline-flex;
  align-items:center;
  height:44px;
  padding-inline:20px;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:14px;
  color:var(--sub);
  transition:border-color .25s,color .25s;
}
.site-menu__group a:hover{border-color:var(--red);color:var(--red)}

@media (max-width:900px){
  .site-menu__cols{grid-template-columns:1fr}
  .site-menu__contact{width:100%;min-width:0}
}

/* ---------------------------------------------------------
   4. 表紙の大きいところ（ファーストビュー）
   --------------------------------------------------------- */
.fv{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:var(--bg-image) center/cover no-repeat;
  padding:0;
  overflow:hidden;
}
.fv__inner{
  position:relative;
  z-index:3;
  width:100%;
  padding-left:clamp(24px,12vw,240px);
  padding-right:clamp(24px,4vw,60px);
}

.fv__copybox{
  position:relative;
  display:inline-block;
  background:transparent;
  padding:0;
  box-shadow:none;
  max-width:none;
}
.fv__copy{position:relative;z-index:2}
.fv__copy span{display:block}
.fv__copy-en{
  color:var(--bg);
  font-family:var(--font-en);
  font-size:clamp(48px,6.4vw,118px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:.005em;
  white-space:normal;
  text-shadow:0 3px 24px rgba(0,0,0,.35);
}
.fv__copy-ja{
  position:relative;
  isolation:isolate;
  margin-top:.5em;
  color:var(--bg);
  font-size:clamp(22px,2.6vw,46px);
  font-weight:700;
  letter-spacing:.18em;
  text-shadow:0 2px 22px rgba(0,0,0,.55);
}

/* FVの装飾：赤い丸2つ（コピー基準で相対配置＝どの窓幅でも同じいち） */
.fv__dot{
  position:absolute;
  border-radius:50%;
  background:var(--red);
  z-index:1;
  pointer-events:none;
}
.fv__dot--big{
  width:4em;
  height:4em;
  top:-.6em;
  left:-.6em;
  font-size:clamp(48px,6.4vw,118px);
}
.fv__dot--small{
  width:2.4em;
  height:2.4em;
  top:-.25em;
  /* 2026-08-31 キャッチコピー変更（12文字→8文字）に伴い位置を出し直した。
     旧 7.9em は旧コピー「食の新しいを『創造』する」の『創 の位置。そのままだと文末の「る」から半分はみ出す。
     新コピー「食の基盤を支える」では中心が来てほしいのは 基盤（3〜4文字目）。
     1文字の送り＝1em＋letter-spacing .18em＝1.18em なので、基盤の中心は 3.54em。丸の半径 1.2em を引いて 2.34em。 */
  left:2.34em;
  z-index:-1;
}

@media (max-width:900px){
  .fv{min-height:auto;padding:180px 0 220px}
  .fv__inner{padding-left:24px;padding-right:24px}
}

/* ---------------------------------------------------------
   5. 下層ページの見出しの帯
   左：小さい英字ラベル（赤）＋大きな日本語見出し（黒）を縦積み
   右：大きな写真（左辺を斜めにカット）
   日本語見出しの左に赤い丸二つ（少しかぶる）
   --------------------------------------------------------- */
.page-hero{
  position:relative;
  background:var(--red-deep);
  color:var(--bg);
  padding-block:var(--gap-l) var(--gap-m);
  padding-inline:max(var(--pad-x), calc(50vw - var(--maxw) / 2));
  display:grid;
  grid-template-columns:minmax(280px,46%) 1fr;
  align-items:center;
  gap:var(--gap-l);
}

/* h1 を一つの箱に。中で英字ラベル→日本語見出しを縦に積む */
.page-hero__title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.9em;
}

/* 上：小さい英字ラベル（白）＋ 左に白い横線 */
.page-hero__en{
  position:relative;
  display:inline-block;
  padding-left:48px;
  font-family:var(--font-en);
  font-size:clamp(14px,1.1vw,16px);
  font-weight:700;
  line-height:1;
  letter-spacing:.14em;
  color:var(--bg);
  text-transform:none;
}
.page-hero__en::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:2px;
  background:var(--bg);
}
.page-hero__en::after{content:none}

/* 下：大きな日本語見出し（白）＋ 右上に白い丸ふたつ */
.page-hero__ja{
  position:relative;
  display:inline-block;
  margin:0;
  padding-right:.7em;
  white-space:nowrap;
  font-size:clamp(28px,3.6vw,60px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:.04em;
  color:var(--bg);
}
/* 先頭の「-」は装飾扱いで小さく添える（文言は残す） */
.page-hero__ja::first-letter{
  font-size:.14em;
  vertical-align:.6em;
  color:var(--sub-invert);
  margin-right:.05em;
}
/* 日本語見出しの右上に白い丸ふたつ（表紙のContactと同じ形） */
.page-hero__ja::before,
.page-hero__ja::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--bg);
}
.page-hero__ja::before{
  width:.2em;height:.2em;
  top:.18em;right:.28em;
}
.page-hero__ja::after{
  width:.12em;height:.12em;
  top:.46em;right:.1em;
}

/* 右：写真（角丸の四角。控えめな縦幅） */
.page-hero__visual{
  align-self:center;
  height:clamp(200px,20vw,260px);
  border-radius:20px;
  clip-path:none;
  overflow:hidden;
  background:var(--bg-image) center/cover no-repeat;
}

.breadcrumb{
  padding-block:var(--gap-m) var(--gap-s);
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--ink-soft);
}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb a:hover{color:var(--red)}

@media (max-width:900px){
  .page-hero{
    grid-template-columns:1fr;
    gap:var(--gap-m);
  }
  .page-hero__visual{
    height:180px;
  }
}

/* ---------------------------------------------------------
   6. セクションと見出しの型
   （中身は未着手。ここは「型」だけ置いています）
   --------------------------------------------------------- */
main{display:block}

.sec{padding-block:var(--gap-xl)}
.sec--soft{background:var(--bg-soft)}

.sec__head{
  margin-bottom:var(--gap-l);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.sec__head--center{align-items:center;text-align:center}
/* 見出しの箱。日本語と英字をひとつの h2/h3 にまとめるためだけの器で、
   display:contents なので見た目には一切影響しません */
.sec__title{display:contents}

/* 日本語小（赤・上）→ 英字大（黒太・下）。左に赤い横棒 */
.sec__en{
  order:2;
  position:relative;
  display:inline-block;
  font-family:var(--font-en);
  font-size:clamp(32px,4vw,58px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--ink);
  text-transform:uppercase;
}
.sec__en::before,
.sec__en::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--red);
}
.sec__en::before{width:11px;height:11px;top:.18em;right:-.42em}
.sec__en::after{width:7px;height:7px;top:.46em;right:-.62em}

.sec__ja{
  order:1;
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 14px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--red);
}
.sec__ja::before{
  content:"";
  width:34px;
  height:3px;
  background:var(--red);
  flex:none;
}

/* 「Seasoning ▎調味料事業」型の小見出し（赤い縦棒つき） */
.lead-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--gap-s);
  font-family:var(--font-en);
  font-size:clamp(24px,2.6vw,36px);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
}
.lead-title::before{
  content:"";
  width:3px;height:1.05em;
  background:var(--red);
  order:1;
}
.lead-title em{
  font-family:var(--font-base);
  font-style:normal;
  order:2;
  font-size:.72em;
  font-weight:700;
  letter-spacing:var(--track-mid);
}

.sec p{margin-top:var(--gap-s)}

/* 文中の「more」「〜はこちら」＝矢印つきのテキストリンク */
.more{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:var(--gap-m);
  font-size:14px;
  letter-spacing:var(--track-mid);
}
.more::after{
  content:"";
  width:38px;height:38px;
  border:1px solid var(--line);
  border-radius:50%;
  background:
    linear-gradient(var(--ink),var(--ink)) center/9px 1px no-repeat;
  transition:border-color .25s,background-color .25s;
}
.more:hover{color:var(--red)}
.more:hover::after{border-color:var(--red)}

/* ---------------------------------------------------------
   7. Contact：赤い角丸カード、内側に白の角丸カード２つ
   --------------------------------------------------------- */
#contact{padding-block:var(--gap-l) var(--gap-xl)}
.contact-card{
  background:var(--red-deep);
  border-radius:22px;
  padding:56px clamp(28px,4vw,64px);
  color:var(--bg);
}
.contact-card .sec__head{align-items:center;text-align:center}
.contact-card .sec__ja{color:var(--bg)}
.contact-card .sec__ja::before{background:var(--bg)}
.contact-card .sec__en{color:var(--bg)}
.contact-card .sec__en::before,
.contact-card .sec__en::after{background:var(--bg)}

.contact-card__lead{
  margin:var(--gap-m) auto 0;
  text-align:center;
  color:var(--bg);
  max-width:640px;
  font-weight:500;
}
/* 2026-08-25 三上様のご指示で電話の枠を削除。メール1枠だけになったので、
   リード文と同じ幅（640px）にそろえて中央に置く。電話を戻すときは 1fr 1fr へ */
.contact-cols{
  margin-top:var(--gap-l);
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  max-width:640px;
  margin-inline:auto;
}
.contact-cols__col{
  background:var(--bg);
  border-radius:16px;
  padding:36px 28px;
  text-align:center;
  color:var(--ink);
}
.contact-cols__title{
  position:relative;
  margin:0;
  padding-bottom:0;
  font-family:"Noto Sans JP",sans-serif;
  font-size:clamp(16px,1.6vw,20px);
  font-weight:800;
  letter-spacing:.04em;
  color:var(--ink);
}
.contact-cols__col .more-pill{margin-top:20px}
.contact-cols__sub{
  margin:10px 0 0;
  font-size:14px;
  font-weight:400;
  color:var(--ink);
}
.contact-cols__tel{
  margin:18px 0 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family:var(--font-en);
  font-size:clamp(24px,2.8vw,36px);
  font-weight:800;
  letter-spacing:.04em;
  color:var(--red);
}
.contact-cols__tel-icon{
  display:inline-grid;
  place-items:center;
  width:.9em;
  height:.9em;
  color:var(--red);
}
.contact-cols__tel-icon svg{width:100%;height:100%}

@media (max-width:900px){
  .contact-card{padding:36px 20px}
  .contact-cols{grid-template-columns:1fr;gap:16px}
}

/* ---------------------------------------------------------
   8. いちばん下の帯（11枚で共通）
   --------------------------------------------------------- */
.site-footer{
  background:var(--bg);
  border-top:1px solid var(--line);
  padding-block:var(--gap-l) var(--gap-m);
}

.site-footer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-m);
  flex-wrap:wrap;
}
.site-footer__logo img{height:34px;width:auto}

.sns{display:flex;align-items:center;gap:18px}
.sns img{height:26px;width:auto;transition:opacity .25s}
.sns a:hover img{opacity:.6}

.site-footer__cols{
  margin-top:var(--gap-l);
  display:grid;
  grid-template-columns:1fr 1fr auto 240px;
  gap:var(--gap-m) var(--gap-l);
  font-size:14px;
  line-height:2.1;
}
.site-footer__cols address{font-style:normal;color:var(--ink-soft)}
.site-footer__cols address b{font-weight:500;color:var(--ink)}

.foot-nav{display:grid;grid-template-columns:auto auto;gap:0 var(--gap-m)}
.foot-nav div{display:grid;align-content:start}
.foot-nav a{color:var(--ink-soft);white-space:nowrap}
.foot-nav a:hover{color:var(--red)}

.group-links{display:grid;gap:12px;align-content:start}
.group-links a{
  display:grid;
  place-content:center;
  min-height:60px;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  text-align:center;
  font-size:14px;
  line-height:1.6;
  transition:border-color .25s,color .25s;
}
.group-links a:hover{border-color:var(--red);color:var(--red)}

.copyright{
  margin-top:var(--gap-l);
  text-align:center;
  font-size:12px;
  letter-spacing:var(--track-mid);
  color:var(--sub);
}

@media (max-width:900px){
  .site-footer__cols{grid-template-columns:1fr 1fr;gap:var(--gap-m)}
  .foot-nav{grid-column:1/-1}
  .group-links{grid-column:1/-1;grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .site-footer__cols{grid-template-columns:1fr}
  .group-links{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   9. 表紙の中身（Message / News / Business / About us / Catalog / Sustainability）
   --------------------------------------------------------- */

/* お知らせ：赤枠の角丸カード、薄ピンク背景、中央、赤字ミニマム */
#message{padding-block:var(--gap-l) var(--gap-m)}
#news{padding-block:var(--gap-m) var(--gap-xl)}
.msg-card{
  max-width:none;
  margin:0 auto;
  padding:32px clamp(28px,4vw,56px);
  border:2px solid var(--red);
  border-radius:16px;
  background:var(--bg-msg);
  text-align:center;
  color:var(--red);
}
.msg-card__label{
  margin:0 0 14px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--red);
}
.msg-card__body{
  margin:0;
  color:var(--red);
  font-size:14px;
  font-weight:500;
  line-height:1.9;
}
.msg-card__body+.msg-card__body{margin-top:.7em}

/* News：左に見出し＋ボタン、右にリスト */
.news-layout{
  display:grid;
  grid-template-columns:minmax(240px,300px) 1fr;
  grid-template-areas:
    "head list"
    "btn  list";
  grid-template-rows:auto 1fr;
  column-gap:var(--gap-l);
  row-gap:var(--gap-m);
  align-items:start;
}
.news-layout__head{grid-area:head}
.news-layout__btn{grid-area:btn;justify-self:start}
.news-list{grid-area:list}
.news-list{display:block;margin:0;padding:0;list-style:none}
.news-item{
  padding:22px 0;
  border-bottom:1px solid var(--line-soft);
}
.news-item:first-child{padding-top:0}
.news-item__meta{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:10px;
}
.news-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 18px;
  background:var(--red);
  color:var(--bg);
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  min-height:26px;
}
.news-item time{
  color:var(--red);
  font-weight:600;
  letter-spacing:.06em;
  font-size:14px;
  font-family:var(--font-en);
}
.news-item__title{
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
  margin:0;
}

/* 赤枠の楕円ボタン（ホバーで赤背景に反転／矢印付き） */
.more-pill{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:52px;
  padding:0 12px 0 34px;
  border-radius:999px;
  border:2px solid var(--red);
  background:var(--bg);
  color:var(--red);
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  transition:background .25s,color .25s;
}
.more-pill__arrow{
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--red);
  color:var(--bg);
  font-size:16px;
  line-height:1;
  transition:background .25s,color .25s;
}
.more-pill:hover{background:var(--red);color:var(--bg)}
.more-pill:hover .more-pill__arrow{background:var(--bg);color:var(--red)}

@media (max-width:900px){
  .news-layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "list"
      "btn";
    row-gap:var(--gap-m);
  }
  .news-layout__btn{justify-self:end}
}

/* Business の背景（SANKYOFOODS 大ロゴ） */
.bg-sankyo{
  position:relative;
  background:var(--bg-grey) url(../images/bg-sankyofoods-band.png) center top / 100% auto no-repeat;
  padding-top:300px;
}
@media (max-width:900px){
  .bg-sankyo{background-size:100% auto;background-position:center top;padding-top:40px}
}

/* About us：グレー背景 */
.bg-grey,
section.bg-grey{background-color:var(--bg-grey)}

/* Business：3カード（ホバーで表裏反転） */
.biz-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.biz-card{
  position:relative;
  aspect-ratio:3/4;
  perspective:1200px;
  display:block;
  color:var(--bg);
}
.biz-card__inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.4,.2,.2,1);
}
@media (hover:hover){
  .biz-card:hover .biz-card__inner{transform:rotateY(180deg)}
}
.biz-card:focus-visible .biz-card__inner{transform:rotateY(180deg)}
.biz-card__face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:var(--bg-image) center/cover no-repeat;
  display:flex;
  align-items:flex-end;
  padding:26px;
  overflow:hidden;
}
.biz-card__face::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.08) 55%);
}
.biz-card__face--back{transform:rotateY(180deg)}
.biz-card__labels{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.biz-card__en{
  font-family:var(--font-en);
  font-size:22px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.biz-card__ja{
  font-size:13px;
  letter-spacing:.18em;
  color:var(--sub-invert);
}
.biz-card__arrow{
  position:absolute;
  right:22px;
  bottom:22px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--red);
  color:var(--bg);
  font-size:18px;
  line-height:1;
  z-index:2;
}
@media (max-width:900px){
  .biz-cards{grid-template-columns:1fr;gap:14px}
  .biz-card{aspect-ratio:16/9}
  .biz-card__face{padding:22px}
}

/* About us：互い違い3ブロック */
.about-block{padding:var(--gap-xl) var(--pad-x)}
.about-block>.container{max-width:var(--maxw);margin-inline:auto}
.about-block>.container>.sec__head{margin-bottom:var(--gap-l)}
.about-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
}
.about-row+.about-row{margin-top:var(--gap-m)}
.about-row__text{
  color:inherit;
  text-decoration:none;
  position:relative;
  padding:var(--gap-l);
  background:var(--bg);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-row__arrow{
  position:absolute;
  right:24px;
  bottom:24px;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--red);
  color:var(--bg);
  font-size:18px;
  line-height:1;
}
.about-row__text .sec__head{margin-bottom:var(--gap-s)}
.about-row__text > p{color:var(--ink-soft)}
.about-row__img{
  min-height:300px;
  background:var(--bg-image) center/cover no-repeat;
}
.about-row--reverse .about-row__text{order:2}
.about-row--reverse .about-row__img{order:1}
@media (max-width:900px){
  .about-row{grid-template-columns:1fr}
  .about-row--reverse .about-row__text,
  .about-row--reverse .about-row__img{order:initial}
  .about-row__img{min-height:220px}
  .about-row__text{padding:var(--gap-m) var(--gap-m) 84px}
  .about-row__arrow{right:20px;bottom:20px}
}

/* Catalog：左テキスト＋右画像 */
.catalog-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap-l);
  align-items:center;
}
.catalog-cols__text > p{color:var(--ink-soft)}
.catalog-cols__text .more,
.catalog-cols__text .more-pill{margin-top:var(--gap-m)}
.catalog-cols__img{
  min-height:280px;
  background:var(--bg-image) center/cover no-repeat;
}
@media (max-width:900px){
  .catalog-cols{grid-template-columns:1fr;gap:var(--gap-m)}
  .catalog-cols__img{min-height:200px}
}

/* Sustainability：グレー帯（画像＋テキスト） */
.sust-band{
  background:var(--bg-soft);
  padding:var(--gap-l);
  display:grid;
  grid-template-columns:220px 1fr;
  gap:var(--gap-l);
  align-items:center;
}
.sust-band__img{
  aspect-ratio:1;
  background:var(--bg-image) center/cover no-repeat;
}
.sust-band__body .sec__head{margin-bottom:var(--gap-s)}
.sust-band__body > p{color:var(--ink-soft)}
.sust-band__body .more,
.sust-band__body .more-pill{margin-top:var(--gap-m)}
@media (max-width:900px){
  .sust-band{grid-template-columns:1fr;padding:var(--gap-m)}
  .sust-band__img{width:100%;max-width:none;aspect-ratio:16/10}
}

/* 下層ページの小見出し（class を持たない h3）。
   2026-08-10 の納品で .sec h3 が消え、10ページで既定スタイルに戻っていたため復活。
   :not([class]) を付けているので .contact-cols__title などには当たりません */
.sec h3:not([class]){
  font-size:18px;
  margin-top:24px;
}

/* お問い合わせ完了ページの主見出し。
   2026-08-31 に見出し帯（.page-hero）を新設したので h1 → h2 に降格した。
   ページ全体の中央寄せなどは「17. お問い合わせのページ」を見てください */
.thanks__title{
  font-size:clamp(24px,2.6vw,34px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:var(--track-tight);
  margin-bottom:var(--gap-m);
}

/* ---------------------------------------------------------
   10. 事業内容ページ
   Intro（Seasoning｜調味料事業）→ 三つの製品セクション
   （Extract / Oil flavor / Dried food）
   各セクションは大きな英字マークを背景に、
   上段：写真＋商品例カード／下段：中見出し＋本文＋写真
   の二段構成。左右交互配置。
   --------------------------------------------------------- */

/* Intro：中央寄せの一段 */
.biz-intro{
  padding-block:var(--gap-l) var(--gap-m);
  text-align:center;
}
.biz-intro .lead-title{margin-bottom:var(--gap-m)}
.biz-intro__body{
  margin:var(--gap-m) auto 0;
  max-width:820px;
  color:var(--ink-soft);
  line-height:2;
}

/* 各製品セクションの器（すべて白背景で統一） */
.biz-product{
  position:relative;
  padding-block:clamp(80px,10vw,140px);
  background:var(--bg);
  overflow:hidden;
}
.biz-product + .biz-product{padding-top:var(--gap-xl)}

/* 大英字マーク：大きい写真のすぐ上・右寄せ・超大・薄い灰色 */
.biz-product__mark{
  position:absolute;
  left:0;
  right:max(var(--pad-x), calc(50vw - var(--maxw) / 2 + var(--pad-x)));
  bottom:calc(100% - clamp(42px,4.5vw,72px));
  font-family:var(--font-en);
  font-size:clamp(96px,16vw,240px);
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink);
  opacity:.055;
  line-height:1;
  text-align:right;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
}

/* ---- 上段：左（写真、画面左端まで）＋右（見出し＋商品例カード） ---- */
.biz-product__hero{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,62%) minmax(0,38%);
  align-items:start;
  gap:0;
  margin-top:clamp(80px,10vw,180px);
}
.biz-product__photo{
  aspect-ratio:16/9;
  background:var(--bg-image) center/cover no-repeat;
  border-radius:22px;
  position:relative;
  z-index:1;
  margin-top:clamp(42px,4.5vw,72px);
}
.biz-product__side{
  padding-right:max(var(--pad-x), calc(50vw - var(--maxw) / 2 + var(--pad-x)));
  padding-left:clamp(56px,6.5vw,110px);
  display:flex;
  flex-direction:column;
  gap:var(--gap-l);
  position:relative;
  z-index:2;
}
/* 左右交互：オイルフレーバーは写真右、サイド左 */
.biz-product--reverse .biz-product__hero{
  grid-template-columns:minmax(0,38%) minmax(0,62%);
}
.biz-product--reverse .biz-product__photo{order:2}
.biz-product--reverse .biz-product__side{
  order:1;
  padding-right:clamp(56px,6.5vw,110px);
  padding-left:max(var(--pad-x), calc(50vw - var(--maxw) / 2 + var(--pad-x)));
}

/* 見出し：英字大（上）→ タグ（すぐ下）／日本語は非表示 */
.biz-product__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin:0;
}
.biz-product__head .sec__en{
  order:1;
  font-size:clamp(36px,4vw,58px);
  font-weight:800;
  color:var(--ink);
  letter-spacing:.02em;
  line-height:1.1;
  margin-bottom:.6em;
}
/* 英字右上の赤い丸ふたつ（大＋小） */
.biz-product__head .sec__en::before,
.biz-product__head .sec__en::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--red);
}
.biz-product__head .sec__en::before{
  width:.18em;height:.18em;
  top:.05em;right:-.35em;
}
.biz-product__head .sec__en::after{
  width:.11em;height:.11em;
  top:.32em;right:-.55em;
}
/* 「エキス製品」などの日本語は非表示 */
.biz-product__head .sec__ja{
  display:none;
}
/* タグはカード内の見出しと同じ太さ・濃さ・大きさで、英字のすぐ下に配置 */
.biz-product__tag{
  order:2;
  margin:0;
  padding-left:14px;
  border-left:3px solid var(--red);
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
}

/* 商品例カード：白背景・うすい影・角丸。カードは写真の上に重ねる */
.biz-product__catalog{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(22px,2.6vw,36px);
  box-shadow:0 18px 46px rgba(0,0,0,.08);
  margin-left:calc(-1 * (var(--gap-l) + 6vw));
}
.biz-product--reverse .biz-product__catalog{
  margin-left:0;
  margin-right:calc(-1 * (var(--gap-l) + 6vw));
}
@media (max-width:900px){
  .biz-product__catalog,
  .biz-product--reverse .biz-product__catalog{
    margin-left:0;
    margin-right:0;
  }
}
/* カード内の見出し：先頭に赤いチェックマーク、ダッシュ記号は非表示扱い */
.biz-product__catalog-title{
  position:relative;
  margin:0 0 var(--gap-s);
  padding-left:26px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
}
.biz-product__catalog-title::before{
  content:"";
  position:absolute;
  left:0;
  top:.28em;
  width:14px;
  height:10px;
  border-left:2.5px solid var(--red);
  border-bottom:2.5px solid var(--red);
  transform:rotate(-50deg);
  transform-origin:left bottom;
}
.biz-product__catalog-title::first-letter{
  font-size:0;
}
.biz-product__catalog-list{
  margin:0;
  padding:0;
  list-style:none;
}
.biz-product__catalog-list li{
  padding:8px 0;
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.7;
  display:flex;
  align-items:flex-start;
  gap:6px;
}
.biz-product__catalog-list li::before{
  content:"・";
  color:var(--red);
  font-weight:700;
  flex:none;
}
.biz-product__catalog-list--grouped li{padding:4px 0}
.biz-product__catalog-list--grouped li.biz-product__catalog-group{
  padding-top:14px;
  font-weight:700;
  color:var(--ink);
}
.biz-product__catalog-list--grouped li.biz-product__catalog-group::before{content:none}
.biz-product__catalog-list--grouped li.biz-product__catalog-group:first-child{padding-top:0}

/* ---- 下段：中見出し＋本文＋サブ写真（小さめ） ---- */
.biz-product__body{
  position:relative;
  z-index:1;
  margin-top:clamp(60px,7vw,120px);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--gap-l);
  align-items:center;
}
.biz-product--reverse .biz-product__body{
  grid-template-columns:.9fr 1.1fr;
}
.biz-product--reverse .biz-product__body > *:first-child{order:2}
.biz-product--reverse .biz-product__body > *:last-child{order:1}

.biz-product__photo--sub{
  aspect-ratio:4/3;
  border-radius:18px;
  width:100%;
  max-width:460px;
  justify-self:end;
}
.biz-product--reverse .biz-product__photo--sub{justify-self:start}

.biz-product__subtitle{
  font-size:clamp(20px,2vw,26px);
  font-weight:700;
  line-height:1.55;
  letter-spacing:.03em;
  margin-bottom:var(--gap-m);
  color:var(--red);
}
.biz-product__subtitle::before{content:none}
.biz-product__text p{
  margin:0;
  color:var(--ink-soft);
  line-height:2;
  font-size:15px;
}

@media (max-width:900px){
  .biz-product{padding-block:var(--gap-l)}
  .biz-product__mark{
    font-size:clamp(64px,18vw,120px);
    top:auto;
    opacity:.07;
  }
  .biz-product__hero,
  .biz-product--reverse .biz-product__hero{
    grid-template-columns:1fr;
    gap:var(--gap-m);
    margin-top:var(--gap-l);
  }
  .biz-product__side,
  .biz-product--reverse .biz-product__side{
    padding-inline:var(--pad-x);
    margin:0;
    order:initial;
  }
  .biz-product__photo{border-radius:16px}
  .biz-product__body,
  .biz-product--reverse .biz-product__body{
    grid-template-columns:1fr;
    gap:var(--gap-m);
    margin-top:var(--gap-l);
  }
  .biz-product--reverse .biz-product__body > *:first-child,
  .biz-product--reverse .biz-product__body > *:last-child{order:initial}
  .biz-product__photo--sub{max-width:none;justify-self:stretch}
  .biz-product__subtitle{padding-left:20px}
  .biz-product__subtitle::before{width:2px}
}

/* ---------------------------------------------------------
   11. 会社案内ページ
   代表挨拶 → 我々の誓い → 会社概要 → 歩み → パンフレット
   見出しは事業内容ページと同じ「英字＋赤い縦棒＋日本語」の型。
   --------------------------------------------------------- */

/* 左寄せの見出し（事業内容ページの中央寄せ版と対） */
.lead-title--left{justify-content:flex-start}

/* 会社案内の各かたまり：セクション同士を詰めすぎない */
.comp-sec{padding-block:var(--gap-l)}
.comp-sec .lead-title{margin-bottom:var(--gap-l)}

/* ---- 代表挨拶：左に文章／右に横長写真 ---- */
.greeting{
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);
  gap:var(--gap-l);
  align-items:center;
  max-width:880px;
  margin-inline:auto;
}
.greeting__text p{margin:0}
.greeting__text .is-dummy{line-height:2.1}.greeting__name.greeting__name{
  margin-top:var(--gap-m);
  text-align:right;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
}
.greeting__photo{
  aspect-ratio:3/4;
  border-radius:0;
  background:var(--bg-image) center/cover no-repeat;
}

/* ---- ヴィジョン：灰色の地に、見出し＋白いカード三枚 ---- */
.vision-band{background:var(--bg-grey)}
.vision__en{letter-spacing:.1em}
.vision{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-m);
  align-items:stretch;
}
.vision-card{
  background:var(--bg);
  border-radius:22px;
  padding:var(--gap-s);
}
.vision-card__photo{
  aspect-ratio:4/3;
  border-radius:16px;
  background:var(--bg-image) center/cover no-repeat;
  margin-bottom:var(--gap-s);
}
.vision-card__title{
  margin:0 0 var(--gap-xs);
  font-size:clamp(15px,1.4vw,17px);
  font-weight:700;
  line-height:1.8;
  letter-spacing:.04em;
  color:var(--ink);
}
.vision-card p{
  margin:0;
  font-size:13px;
  line-height:2;
  color:var(--ink-soft);
}

/* ---- 我々の誓い：灰色の地に、白い角丸のカード ---- */
.oath-band{background:var(--bg-grey)}
.oath{
  max-width:780px;
  margin-inline:auto;
  background:var(--bg);
  border-radius:22px;
  padding:var(--gap-l) var(--gap-m);
}
.oath__list{
  margin:0;
  max-width:640px;
  margin-inline:auto;
}
.oath__item{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:var(--gap-m);
  align-items:baseline;
  padding-block:20px;
}
.oath__item + .oath__item{border-top:1px solid var(--red)}
.oath__item dt{
  font-size:18px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--ink);
}
.oath__item dd{
  margin:0;
  font-size:14px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

/* ---- 会社概要：左右二つの表＋左下に写真二枚 ---- */
.outline{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-l);
  align-items:start;
}
.spec{
  margin:0;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.spec__row{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
}
.spec__row + .spec__row{border-top:1px solid var(--line)}
.spec__row dt{
  padding:14px 18px;
  background:var(--bg-soft);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
}
.spec__row dd{
  margin:0;
  padding:14px 18px;
  font-size:13px;
  line-height:1.9;
  color:var(--ink-soft);
}
.outline__photos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-s);
  margin-top:var(--gap-m);
}
.outline__photo{
  aspect-ratio:4/3;
  border-radius:18px;
  background:var(--bg-image) center/cover no-repeat;
}

/* ---- 歩み：年月の帯＋出来事 ---- */
.history{
  list-style:none;
  margin:0;
  padding:0;
}
.history__row{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.history__row + .history__row{margin-top:10px}
.history__date{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 16px;
  background:var(--ink-soft);
  color:var(--bg);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
}
.history__text{
  padding:14px 22px;
  font-size:14px;
  line-height:1.8;
  color:var(--ink-soft);
}.history__more.history__more{
  margin-top:var(--gap-m);
  text-align:center;
  line-height:1.4;
  letter-spacing:.1em;
  color:var(--sub);
}

/* ---------------------------------------------------------
   12. 三共食品についてのページ
   経営理念 → テーマ → 行動憲章 → 安心安全 → 認証取得
   --------------------------------------------------------- */
#about.comp-sec{padding-bottom:0}
#about .lead-title{margin-bottom:0}

/* うすい灰色の地 */
.abt-band-soft{background:var(--bg-soft)}

/* 左に文章／右に写真の二段組み（経営理念・安心安全で共用） */
.abt-cols{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--gap-l);
  align-items:center;
}

/* 写真を文章に少し重ねる（文章のカードが手前） */
.abt-cols--overlap{align-items:center}
.abt-cols--overlap .abt-cols__text{
  position:relative;
  z-index:2;
}
.abt-cols--overlap .abt-cols__photo{
  margin-left:calc(-1 * clamp(48px,6vw,110px));
  z-index:1;
}
.abt-cols__text p{
  margin:0;
  font-size:14px;
  line-height:2.1;
  color:var(--ink-soft);
}
.abt-cols__text p + .abt-step{margin-top:var(--gap-m)}
.abt-cols__photo{
  aspect-ratio:16/9;
  border-radius:18px 0 0 18px;
  background:var(--bg-image) center/cover no-repeat;
  margin-right:calc(-1 * max(var(--pad-x), calc(50vw - var(--maxw) / 2 + var(--pad-x))));
}

/* しあわせ作戦の三段階 */
.abt-step{
  list-style:none;
  margin:0 0 var(--gap-m);
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.abt-step li{
  padding:11px 26px;
  border-radius:8px;
  background:var(--red);
  color:var(--bg);
  font-size:14px;
  font-weight:700;
  letter-spacing:.1em;
}

/* 中見出しと本文 */
.abt-subtitle{
  position:relative;
  margin:0 0 var(--gap-s);
  padding-left:18px;
  font-size:clamp(17px,1.7vw,21px);
  font-weight:700;
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--ink);
}
.abt-subtitle::before{
  content:"";
  position:absolute;
  left:0;
  top:.28em;
  width:3px;
  height:1.1em;
  background:var(--red);
}
.abt-subtitle--center{text-align:center;padding-left:0}
.abt-subtitle--center::before{content:none}
.abt-subtitle--quote::before,
.abt-subtitle--quote::after{
  content:"”";
  position:static;
  width:auto;
  height:auto;
  background:none;
  color:var(--ink);
}.abt-subtitle + .abt-text.abt-text,
.abt-subtitle + .abt-lead.abt-lead{margin-top:0}
.abt-text,
.abt-lead{
  font-size:14px;
  line-height:2.1;
  color:var(--ink-soft);
}
.abt-lead--center{text-align:center}
.abt-text + .abt-subtitle{margin-top:var(--gap-l)}

/* テーマの図 */
.abt-figure{
  margin-top:var(--gap-l);
  aspect-ratio:16/9;
  border-radius:18px;
  background:var(--bg-image) center/cover no-repeat;
}
.abt-figure img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* テーマの中央ブロック */
.abt-theme-center{
  margin-top:var(--gap-xl);
  text-align:center;
}.abt-band.abt-band{
  display:inline-block;
  margin:var(--gap-s) 0 0;
  padding:11px 40px;
  border-radius:8px;
  background:var(--red);
  color:var(--bg);
  font-size:15px;
  font-weight:700;
  letter-spacing:.14em;
}.abt-items.abt-items{
  margin-top:var(--gap-m);
  font-size:15px;
  font-weight:700;
  line-height:2;
  letter-spacing:.04em;
  color:var(--red);
}.abt-note.abt-note{
  margin-top:var(--gap-m);
  font-size:13px;
  line-height:2.1;
  color:var(--ink-soft);
}

/* 行動規範の囲み */
.abt-conduct{
  margin-top:var(--gap-m);
  padding:var(--gap-m);
  border-radius:14px;
  background:var(--bg);
}
.abt-conduct p{
  margin:0;
  font-size:13px;
  line-height:2.1;
  color:var(--ink-soft);
}

/* 本文を角丸のカードに収める */
.abt-card{
  padding:var(--gap-m);
  border-radius:18px;
  background:var(--bg);
}
.abt-card p{
  margin:0;
  font-size:14px;
  line-height:2.1;
  color:var(--ink-soft);
}

/* 認証取得の写真（本社工場の2点） */
.abt-cert{
  margin-top:var(--gap-m);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-s);
}
.abt-cert__photo{
  /* 登録証の画像そのものの縦横比。ここを変えると証書の端が切れます */
  aspect-ratio:1156/815;
  border-radius:14px;
  background:var(--bg-image) center/cover no-repeat;
}

@media (max-width:900px){
  .abt-cols{grid-template-columns:1fr;gap:var(--gap-m)}
  .abt-cols--overlap .abt-cols__photo{margin-left:0}
  .abt-figure{aspect-ratio:4/3}
  .abt-theme-center{margin-top:var(--gap-l)}
  .abt-conduct{padding:var(--gap-s)}
  .abt-cert{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   13. 新着情報の一覧ページ
   左：記事のカードを二列／右：新着一覧と月間アーカイブ
   --------------------------------------------------------- */
.news-page{
  display:grid;
  grid-template-columns:minmax(0,1fr) 296px;
  gap:var(--gap-l);
  align-items:start;
}
.news-cards{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-l) var(--gap-m);
}
.news-card__link{
  display:grid;
  color:var(--ink);
}
.news-card__photo{
  aspect-ratio:16/10;
  border-radius:14px;
  background:var(--bg-image) center/cover no-repeat;
}
.news-card__date{
  margin-top:14px;
  font-family:var(--font-en);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--sub);
}
.news-card__title{
  margin-top:6px;
  font-size:15px;
  font-weight:700;
  line-height:1.7;
}
.news-card__text{
  margin-top:8px;
  font-size:13px;
  line-height:1.9;
  color:var(--ink-soft);
}
.news-card__link:hover .news-card__title{color:var(--red)}.pager.pager{
  margin-top:var(--gap-xl);
  text-align:center;
  font-family:var(--font-en);
  font-size:15px;
  letter-spacing:.26em;
  color:var(--ink);
}/* ---- 新着情報の中身のページ ---- */
.news-detail__date.news-detail__date{
  margin:0;
  font-family:var(--font-en);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--sub);
}
.news-detail__title{
  margin:6px 0 0;
  padding-bottom:12px;
  border-bottom:1px solid var(--red);
  font-size:clamp(18px,1.8vw,22px);
  font-weight:700;
  line-height:1.7;
}
.news-detail__photo{
  margin-top:var(--gap-m);
  aspect-ratio:16/9;
  border-radius:14px;
  background:var(--bg-image) center/cover no-repeat;
}.news-detail__body.news-detail__body{
  margin-top:var(--gap-m);
  font-size:14px;
  line-height:2.1;
}.news-detail__nav.news-detail__nav{
  display:flex;
  justify-content:center;
  gap:var(--gap-m);
  margin-top:var(--gap-xl);
  font-size:13px;
  letter-spacing:.06em;
}
.news-detail__nav a{color:var(--ink-soft)}
.news-detail__nav a:hover{color:var(--red)}.news-detail__back.news-detail__back{
  margin-top:var(--gap-m);
  text-align:center;
}

/* 右の欄：見出しの帯＋線で区切った一覧 */
.side-box + .side-box{margin-top:var(--gap-l)}
.side-box__title{
  margin:0;
  padding:12px 18px;
  background:var(--bg-soft);
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink);
}
.side-list{
  list-style:none;
  margin:0;
  padding:0;
}
.side-list li{border-bottom:1px solid var(--line)}
.side-list a{
  display:block;
  padding:13px 6px;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-soft);
}
.side-list a:hover{color:var(--red)}

@media (max-width:900px){
  .news-page{
    grid-template-columns:1fr;
    gap:var(--gap-l);
  }
  .news-cards{
    grid-template-columns:1fr;
    gap:var(--gap-m);
  }.pager.pager{margin-top:var(--gap-l)}
}

/* ---- ページの終わりの二つは灰色の地でつなげる ---- */
.tail-band{background:var(--bg-grey)}
.tail-band + .tail-band{padding-top:0}

/* ---- パンフレット：枠の中に表紙、下に取得のボタン ---- */
.pamphlet{
  display:grid;
  place-items:center;
  max-width:920px;
  margin-inline:auto;
  background:var(--bg);
  border-radius:22px;
  padding:var(--gap-l) var(--gap-m);
}
.pamphlet__cover{
  width:min(340px,38%);
  aspect-ratio:210/297;
  border-radius:0;
  background:var(--bg-image) center/cover no-repeat;
}.pamphlet__action.pamphlet__action{
  margin-top:var(--gap-l);
  text-align:center;
}

@media (max-width:900px){
  .comp-sec{padding-block:var(--gap-m)}
  .greeting{grid-template-columns:1fr;gap:var(--gap-m)}
  .vision{
    grid-template-columns:1fr;
    gap:var(--gap-m);
  }
  .oath{padding:var(--gap-m) var(--gap-s)}
  .oath__item{
    grid-template-columns:1fr;
    gap:6px;
    padding-block:16px;
  }
  .oath__item dd{padding-left:0}
  .outline{grid-template-columns:1fr;gap:var(--gap-m)}
  .spec__row{grid-template-columns:104px minmax(0,1fr)}
  .spec__row dt,
  .spec__row dd{padding:12px 14px}
  .history__row{grid-template-columns:1fr}
  .history__date{justify-content:flex-start;padding:10px 16px}
  .pamphlet{padding:var(--gap-m) var(--gap-s)}
  .pamphlet__cover{width:min(320px,78%)}
}

/* ---------------------------------------------------------
   14. SDGsへの取り組みのページ
   SDGsとは → 17のゴール → 取り組み事例（食品ロス削減）
   --------------------------------------------------------- */
/* 「SDGs」は略語なので、この見出しだけ大文字に変えない */
#sdgs .sec__en{text-transform:none}/* ---- SDGsとは：中央に置く説明文と、右下の出典 ---- */
.sdgs-lead.sdgs-lead{
  margin-top:0;
  text-align:center;
  font-size:14px;
  line-height:2.1;
  color:var(--ink-soft);
}
.sdgs-source{
  text-align:right;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--sub);
}

/* ---- 17のゴール（ロゴとアイコンが一枚になった図） ---- */
.sdgs-goals{
  margin:var(--gap-l) auto 0;
  width:min(880px,100%);
}

/* ---- 三共食品が対象とするゴール（2026-08-31 確定）----
   メイン＝12 を大きいアイコン＋説明文で1つ、関連＝2/8/13/15/17 をアイコンだけ横一列。
   旧 .sdgs-goal-list（同じ大きさの3行）はダミー用だったので廃止した。 */
.sdgs-target{
  margin-top:var(--gap-l);
  width:min(880px,100%);
  margin-inline:auto;
}
/* 「———メインで取り組む目標」ラベルは #case-study と同じ .sdgs-label を使い回す。
   ただし1本目は 17ゴール図とのあいだが空きすぎるので詰める。 */
.sdgs-target .sdgs-label:first-child{
  margin-top:0;
}
.sdgs-target__main{
  margin-top:var(--gap-s);
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:var(--gap-m);
  align-items:center;
}
.sdgs-target__icon{
  width:200px;
  height:auto;
  border-radius:8px;
}
.sdgs-target__text.sdgs-target__text{
  margin:0;
  font-size:14px;
  line-height:2.1;
}
.sdgs-target__related{
  margin:var(--gap-s) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  /* 幅いっぱいに広げると1枚 163px になり、メインの 200px との差が出ずに格が伝わらない。
     120px 固定＋左寄せにして、メインとの大小をはっきりさせる（5枚＋余白で 664px・880px の枠に収まる）。 */
  grid-template-columns:repeat(5,120px);
  justify-content:start;
  gap:var(--gap-s);
}
.sdgs-target__related img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}

/* ---- 取り組み事例：見出しと、横棒つきの小見出し ---- */
.sdgs-case-title{
  margin-bottom:var(--gap-m);
  font-size:clamp(20px,2.2vw,26px);
  font-weight:700;
  letter-spacing:.06em;
}.sdgs-label.sdgs-label{
  margin-top:var(--gap-l);
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink);
}

/* ---- 循環型製造システム：左に文章、右に丸い図 ---- */
.sdgs-cycle{
  margin-top:var(--gap-xs);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:var(--gap-l);
  align-items:start;
}.sdgs-cycle__text.sdgs-cycle__text{margin-top:0}
.sdgs-cycle__figure{
  width:100%;
  align-self:start;
  margin-top:calc(-1 * var(--gap-xl));
}

/* ---- 年間食品ロス削減量：左に濃い灰色のラベル、右に説明 ---- */
.sdgs-loss{margin:var(--gap-s) 0 0}
.sdgs-loss__row{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.sdgs-loss__row + .sdgs-loss__row{margin-top:10px}
.sdgs-loss__row dt{
  display:flex;
  align-items:center;
  padding:14px 18px;
  background:var(--ink-soft);
  color:var(--bg);
  font-size:13px;
  font-weight:700;
  line-height:1.7;
  letter-spacing:.06em;
}
.sdgs-loss__row dd{
  margin:0;
  padding:14px 22px;
  font-size:13px;
  line-height:1.9;
  color:var(--ink-soft);
}/* ---- 締めの一文 ---- */
.sdgs-total.sdgs-total{
  margin-top:var(--gap-l);
  text-align:center;
  font-size:15px;
  font-weight:700;
  line-height:1.9;
}

@media (max-width:900px){
  .sdgs-lead br,
  .sdgs-text br{display:none}
  .sdgs-lead.sdgs-lead{text-align:left}
  /* メインは1カラムに積む（アイコン → 説明文）。関連は5列だと1枚が小さくなりすぎるので3列。 */
  .sdgs-target__main{grid-template-columns:1fr;gap:var(--gap-s);justify-items:start}
  .sdgs-target__icon{width:150px}
  /* 🔴 幅いっぱいの3列にすると、タブレット幅で1枚 232px になりメイン(150px)より大きくなって格が逆転する。
     上限 110px を付けて左寄せにし、狭い画面では自動で縮む（SP390 で 106px）。 */
  .sdgs-target__related{grid-template-columns:repeat(3,minmax(0,110px));justify-content:start}
  .sdgs-cycle{grid-template-columns:1fr;gap:var(--gap-m)}
  .sdgs-cycle__figure{width:min(380px,94%);margin-top:0;margin-inline:auto}
  .sdgs-loss__row{grid-template-columns:1fr}
  .sdgs-loss__row dt{padding:10px 16px}
  .sdgs-loss__row dd{padding:12px 16px}
  .sdgs-loss__row dd br{display:none}
}

/* ---------------------------------------------------------
   15. オフィス紹介のページ
   本社オフィス → 東京オフィス → 本社工場 → 認証取得
   --------------------------------------------------------- */
#office{padding-bottom:0}
#office .lead-title{margin-bottom:0}

/* ---- 紹介のかたまり：片側に文章、片側に写真 ---- */
.office-point{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.office-point + .office-point{margin-top:var(--gap-xl)}
.office-point--reverse .office-point__body{order:2}
.office-point--reverse .office-point__photos{order:1}

.office-point__title{
  margin-bottom:var(--gap-s);
  font-size:clamp(16px,1.7vw,19px);
  font-weight:700;
  line-height:1.8;
  letter-spacing:.04em;
}.office-point__text.office-point__text{
  margin-top:0;
  font-size:13px;
  line-height:2.1;
}

/* 大きい写真の左下に、小さい写真を重ねる */
.office-point__photos{
  position:relative;
  padding:0 0 clamp(36px,4.5vw,64px) clamp(36px,4.5vw,64px);
}
.office-point__photos--single{padding:0}
.office-point__photo{
  border-radius:18px;
  background:var(--bg-image) center/cover no-repeat;
}
.office-point__photo--main{aspect-ratio:4/3}
.office-point__photo--sub{
  position:absolute;
  left:0;
  bottom:0;
  width:46%;
  aspect-ratio:1/1;
}
.office-point__photo--portrait{
  width:36%;
  aspect-ratio:3/4;
}

/* ---- 東京オフィス：下にもう二枚ならべる ---- */
.office-gallery{
  margin-top:var(--gap-m);
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:var(--gap-m);
  align-items:stretch;
}
.office-gallery__photo{
  aspect-ratio:16/9;
  border-radius:18px;
  background:var(--bg-image) center/cover no-repeat;
}
.office-gallery__photo--square{aspect-ratio:1/1}

@media (max-width:900px){
  .office-point{grid-template-columns:1fr;gap:var(--gap-m)}
  .office-point--reverse .office-point__body,
  .office-point--reverse .office-point__photos{order:0}
  .office-point + .office-point{margin-top:var(--gap-l)}
  .office-point__photos{padding:0 0 40px 40px}
  .office-gallery{grid-template-columns:1fr;gap:var(--gap-s)}
}

/* ---------------------------------------------------------
   16. 上のメニューを開いたときの見せ方
   左にしるし・お問い合わせ・グループ会社／右にページの一覧
   ⚠️ 行き先と項目の数は一つも変えていません（見せ方だけ）
   --------------------------------------------------------- */
.site-menu{
  inset:var(--header-h) 0 auto 0;
  height:auto;
  max-height:calc(100vh - var(--header-h));
}

.site-menu__inner{
  min-height:100%;
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  grid-template-rows:auto auto auto;
  gap:var(--gap-m) clamp(40px,6vw,88px);
  align-items:start;
  align-content:center;
  padding-block:var(--gap-l);
}

/* 左上：会社のしるし */
.site-menu__inner::before{
  content:"";
  grid-area:1 / 1;
  width:min(240px,80%);
  aspect-ratio:774/80;
  background:url(../images/logo-sankyofoods.png) left center/contain no-repeat;
}

/* 右：ページの一覧。左側とのあいだに細い区切り */
.site-menu__cols{
  grid-area:1 / 2 / 4 / 3;
  align-self:stretch;
  padding-left:clamp(32px,5vw,72px);
  border-left:1px solid var(--line);
  gap:0 var(--gap-l);
}
.site-menu__cols a{
  padding:15px 0;
  font-size:18px;
}

/* 左：お問い合わせ（お問い合わせの帯のボタンと同じ形） */
.site-menu__contact{
  grid-area:2 / 1;
  align-self:start;
  justify-content:space-between;
  gap:14px;
  width:min(280px,100%);
  min-width:0;
  height:auto;
  min-height:52px;
  padding:0 12px 0 34px;
  border:2px solid var(--red);
  background:var(--bg);
  font-size:14px;
  letter-spacing:.14em;
}
.site-menu__contact::after{
  content:"→";
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--red);
  color:var(--bg);
  font-size:16px;
  line-height:1;
  transition:background .25s,color .25s;
}
.site-menu__contact:hover::after{background:var(--bg);color:var(--red)}

/* 左：グループ会社 */
.site-menu__group{
  grid-area:3 / 1;
  align-self:start;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  width:min(280px,100%);
}
.site-menu__group a{
  justify-content:space-between;
  gap:12px;
  height:52px;
  padding:0 14px 0 20px;
  border-radius:8px;
}
.site-menu__group a::after{
  content:"→";
  display:inline-grid;
  place-items:center;
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--sub);
  font-size:13px;
  line-height:1;
  transition:border-color .25s,color .25s,transform .25s;
}
.site-menu__group a:hover::after{
  border-color:var(--red);
  color:var(--red);
  transform:translateX(3px);
}

@media (max-width:900px){
  .site-menu__inner{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:var(--gap-m);
    align-content:start;
    padding-block:var(--gap-m);
  }
  .site-menu__inner::before,
  .site-menu__cols,
  .site-menu__contact,
  .site-menu__group{grid-area:auto}
  .site-menu__cols{
    padding-left:0;
    border-left:0;
  }
  .site-menu__cols a{font-size:17px;padding:12px 0}
  .site-menu__contact,
  .site-menu__group{width:100%}
}

/* ---------------------------------------------------------
   17. お問い合わせのページ／お問い合わせ完了のページ
   2026-08-31 追加（三上様より「ワイヤー通りに」とのご指示）

   ワイヤー（P5・P6）の構成:
     お問い合わせ … 見出し帯 → パンくず → 中央寄せの小見出し＋リード文
                     → 枠で囲んだ縦一列のフォーム → お問い合わせ帯
     完了         … 見出し帯 → 中央寄せのお礼文 → TOPへ戻る → お問い合わせ帯

   ⚠️ ワイヤーのお問い合わせ帯には電話のカードが残っていますが、
      2026-08-25 のご指示で削除済みなので戻していません。
   --------------------------------------------------------- */

/* ---- 冒頭：中央寄せの小見出し＋リード文（事業内容ページと同じ型） ---- */
.form-intro{text-align:center}
.form-intro .lead-title{margin-bottom:var(--gap-m)}
.form-intro__body{
  color:var(--ink-soft);
  line-height:2;
}

/* ---- フォームの枠 ---- */
.contact-form{
  max-width:1000px;
  margin:var(--gap-l) auto 0;
  padding:clamp(28px,4vw,64px) clamp(20px,4vw,72px);
  border:1px solid var(--line);
  text-align:left;
}

.form-row + .form-row{margin-top:var(--gap-m)}

.form-label{
  display:block;
  margin-bottom:10px;
  font-size:15px;
  font-weight:700;
  letter-spacing:var(--track-mid);
  color:var(--ink);
}
/* 必須の「※」だけ赤にする（文言は変えていません） */
.form-req{color:var(--red);margin-left:.15em}

.form-input{
  display:block;
  width:100%;
  min-height:56px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-base);
  font-size:16px;
  line-height:1.6;
  transition:border-color .25s,box-shadow .25s;
}
.form-input--area{
  min-height:220px;
  resize:vertical;
}
.form-input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-glow);
}

/* ---- 個人情報保護方針：中でスクロールする枠 ---- */
.form-policy{
  max-width:750px;
  margin:var(--gap-l) auto 0;
  padding:28px clamp(20px,3vw,32px);
  border:1px solid var(--line);
  max-height:220px;
  overflow-y:auto;
  text-align:center;
}
.form-policy__title{
  font-size:18px;
  font-weight:700;
  letter-spacing:var(--track-mid);
  color:var(--ink);
}
.form-policy__body{
  margin-top:var(--gap-s);
  text-align:left;
  font-size:14px;
  line-height:2;
  color:var(--ink-soft);
}
/* 「個人情報の利用目的」「個人情報保護」の小見出しと箇条書き
   （現行サイトと同じ、見出し＋箇条書きの並びです） */
.form-policy__sub{
  margin-top:var(--gap-s);
  text-align:left;
  font-size:15px;
  font-weight:700;
  letter-spacing:var(--track-mid);
  color:var(--ink);
}
.form-policy__list{
  margin-top:6px;
  padding-left:1.35em;
  list-style:disc;
  text-align:left;
  font-size:14px;
  line-height:2;
  color:var(--ink-soft);
}

/* ---- 同意のチェック ---- */
.form-agree{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:var(--gap-m);
  font-size:15px;
}
.form-agree label{cursor:pointer}
.form-check{
  width:22px;
  height:22px;
  flex:none;
  accent-color:var(--red);
  cursor:pointer;
}

/* ---- 送信ボタン ---- */
.form-send{
  margin-top:var(--gap-m);
  text-align:center;
}
.form-submit{
  min-width:300px;
  min-height:64px;
  padding:0 var(--gap-m);
  border:0;
  border-radius:4px;
  background:var(--red);
  color:var(--bg);
  font-family:var(--font-base);
  font-size:17px;
  font-weight:700;
  letter-spacing:var(--track-mid);
  cursor:pointer;
  transition:background .25s;
}
.form-submit:hover{background:var(--red-deep)}
.form-submit:focus-visible{outline:3px solid var(--red-deep);outline-offset:3px}

/* ---- 完了ページ：まるごと中央寄せ ---- */
.thanks{text-align:center}
.thanks__body{
  color:var(--ink-soft);
  line-height:2;
}
.thanks__body + .thanks__body{margin-top:var(--gap-m)}
.thanks__back{margin-top:var(--gap-l)}

@media (max-width:900px){
  .contact-form{
    margin-top:var(--gap-m);
    padding:var(--gap-m) var(--gap-s);
  }
  .form-input{min-height:52px;font-size:16px}
  .form-input--area{min-height:180px}
  /* 本文が入って中身が長くなったので、スマホでは枠を少し高くしています
     （2026-08-31・本文支給前は 200px でした） */
  .form-policy{
    margin-top:var(--gap-m);
    padding:var(--gap-s);
    max-height:280px;
  }
  .form-agree{
    align-items:flex-start;
    text-align:left;
    font-size:14px;
  }
  .form-submit{
    width:100%;
    min-width:0;
    min-height:58px;
    font-size:16px;
  }
  .thanks__back{margin-top:var(--gap-m)}
}

/* 「Contact form｜お問い合わせフォーム」は他ページの小見出しより長いので、
   スマホの幅では二行に割れます。このページだけ少し小さくして一行に収めます。
   （他の下層ページの小見出しは 46px の一行のままで、影響しません） */
@media (max-width:480px){
  .form-intro .lead-title{font-size:clamp(16px,4.6vw,20px);gap:10px}
}