@charset "UTF-8";
/* ==========================================================================
   エスケイ・インターナショナル株式会社
   配色：ネイビー（信頼）＋ ターコイズ（海・アクセント）＋ 白
   設計：モバイルファースト / BEM / ブレークポイント 768px・1024px
   ========================================================================== */

/* ★★本文を中太にする（2026-09-18 河内様「文字が薄く、40〜60代には読みづらい」への対応・B案）。
   Windows では本文が「游ゴシック Regular」で描かれ、線が細く薄く見える。
   "Yu Gothic" の 400 を Medium、700 を Bold に割り当て直す。
   ・書体指定の先頭は Hiragino なので Mac / iPhone は影響なし。Android（Noto）も影響なし。
   ・700 も必ず書く。400 だけだと見出しが Medium を疑似的に太らせた字になる。
   ・実測（記事本文）：文字の濃い画素が 7,083 → 13,487（色の変更と合わせて約1.9倍）。 */
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"), local("YuGothic-Bold"); font-weight: 700; }

:root {
	--navy-900: #06192a;
	--navy-800: #0a2740;
	--navy-700: #0c3552;
	--navy-600: #124b6d;
	--navy-100: #e7eef4;
	--navy-050: #f4f8fb;

	--teal-600: #0f8489;
	--teal-500: #17a2a8;
	--teal-400: #2bbcc0;
	--teal-050: #e8f6f7;

	--warm-500: #c2703a;

	--ink: #16232e;
	--ink-70: #323d46;
	--ink-50: #515f6a;
	--ink-50-deco: #6f8291; /* 矢印など線の色（文字色を濃くした 2026-09-18 に旧色を退避） */
	--line: #dfe6ec;
	--white: #fff;

	--wrap: 1140px;
	--radius: 10px;
	--shadow-sm: 0 2px 10px rgba(12, 53, 82, .06);
	--shadow-md: 0 12px 34px rgba(12, 53, 82, .10);
	--shadow-lg: 0 26px 60px rgba(6, 25, 42, .18);

	--font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
	--font-en: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 68px; }

body {
	margin: 0;
	font-family: var(--font-ja);
	font-size: 15px;
	line-height: 1.95;
	color: var(--ink);
	background: var(--white);
	-webkit-text-size-adjust: 100%;
	overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-600); text-decoration: none; transition: color .2s, opacity .2s; }
a:hover { color: var(--teal-500); }
h1, h2, h3, h4 { line-height: 1.5; margin: 0; font-weight: 700; letter-spacing: .02em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

.icon { flex: none; vertical-align: middle; }
.pc { display: none; }
.sp { display: inline; }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--navy-700); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; color: #fff; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 40px, 860px); }

/* ---------- ボタン ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
	letter-spacing: .04em; border: 1.5px solid transparent; cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
	text-align: center;
}
.btn--accent { background: var(--teal-500); color: #fff; box-shadow: 0 8px 20px rgba(23, 162, 168, .28); }
.btn--accent:hover { background: var(--teal-600); color: #fff; transform: translateY(-2px); }
.btn--outline { border-color: rgba(12, 53, 82, .28); color: var(--navy-700); background: rgba(255, 255, 255, .7); }
.btn--outline:hover { border-color: var(--navy-700); color: var(--navy-700); background: #fff; }
.btn--outline-light { border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn--outline-light:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .1); }
.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn--lg { padding: 17px 32px; font-size: 15.5px; }
.btn--block { display: flex; width: 100%; }
.btn small { display: block; font-weight: 500; font-size: 12px; opacity: .85; }

/* ---------- ヘッダー ---------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .94);
	border-bottom: 1px solid var(--line);
	backdrop-filter: saturate(150%) blur(8px);
}
.site-header__inner {
	width: min(100% - 32px, 1280px); margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 62px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--navy-700); min-width: 0; }
.brand .logomark { flex: none; width: 34px; height: 34px; display: block; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__ja { font-size: 14.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.35; }
.brand__en {
	font-family: var(--font-en); font-size: 9.5px; font-weight: 500; letter-spacing: .17em;
	color: var(--ink-50); line-height: 1.4; white-space: nowrap;
}

.gnav { display: none; }
.head-cta { display: none; }

.navtoggle {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	background: none; border: 0; padding: 6px 2px; cursor: pointer; color: var(--navy-700);
}
.navtoggle__bars { display: block; width: 24px; }
.navtoggle__bars i {
	display: block; height: 2px; background: currentColor; border-radius: 2px;
	margin: 5px 0; transition: transform .25s, opacity .2s;
}
.navtoggle__label { font-family: var(--font-en); font-size: 9px; letter-spacing: .16em; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 幅の狭い端末では社名が2行になってヘッダーが間延びするので、英字表記を落として詰める */
@media (max-width: 479px) {
	.brand .logomark { width: 30px; height: 30px; }
	.brand__ja { font-size: 13px; line-height: 1.3; }
	.brand__en { display: none; }
}

/* ---------- ドロワー ---------- */
.drawer {
	position: fixed; inset: 62px 0 0; z-index: 99;
	background: var(--navy-800); overflow-y: auto; padding: 24px 20px 40px;
}
.drawer[hidden] { display: none; }
.drawer__nav { border-top: 1px solid rgba(255, 255, 255, .14); }
.drawer__nav li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.drawer__nav a { display: flex; align-items: baseline; gap: 12px; padding: 16px 4px; color: #fff; }
.drawer__ja { font-size: 15px; font-weight: 700; }
.drawer__en { font-family: var(--font-en); font-size: 10.5px; letter-spacing: .14em; color: rgba(255, 255, 255, .75); }
.drawer__cta { display: grid; gap: 10px; margin-top: 26px; }

/* ---------- セクション共通 ---------- */
.sec { padding: 56px 0; position: relative; }
.sec--tight { padding: 44px 0; }
.sec--light { background: var(--navy-050); }
.sec--navy { background: var(--navy-800); color: rgba(255, 255, 255, .93); }
.sec--navy a { color: var(--teal-400); }

.sec-head { margin-bottom: 28px; }
.sec-head--center { text-align: center; }
.sec-head__en {
	font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .24em;
	color: var(--teal-600); margin: 0 0 8px;
}
.sec--navy .sec-head__en { color: var(--teal-400); }
.sec-head__ja { font-size: 22px; letter-spacing: .01em; }
.sec-head__lead { margin: 14px auto 0; font-size: 14.5px; color: var(--ink-70); max-width: 780px; }
.sec--navy .sec-head__lead { color: rgba(255, 255, 255, .88); }
.sec-head--center .sec-head__en { letter-spacing: .3em; }

/* ---------- ヒーロー ---------- */
.hero {
	position: relative; overflow: hidden;
	background: linear-gradient(165deg, #0a2740 0%, #0c3552 46%, #124b6d 100%);
	color: #fff; padding: 44px 0 52px;
}
.hero__bg { position: absolute; inset: auto 0 -2px; height: 60%; pointer-events: none; }
.hero__wave { width: 100%; height: 100%; display: block; }
.hero__inner { position: relative; z-index: 1; }

.hero__eyebrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.hero__eyebrow span {
	font-size: 11.5px; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .2);
	color: rgba(255, 255, 255, .9);
}
.hero__title { font-size: 25px; line-height: 1.45; letter-spacing: .005em; margin: 0 0 18px; }
.hero__title em { font-style: normal; color: var(--teal-400); }
.hero__lead { font-size: 14.5px; color: rgba(255, 255, 255, .91); margin-bottom: 20px; }
.hero__lead strong { color: #fff; }

.hero__points { display: grid; gap: 9px; margin: 0 0 26px; }
.hero__points li {
	display: flex; align-items: flex-start; gap: 9px;
	font-size: 13.5px; color: rgba(255, 255, 255, .93);
}
.hero__points .icon { color: var(--teal-400); margin-top: 4px; }
.hero__points li > span { flex: 1; }
.hero__points strong { color: #fff; white-space: nowrap; }

.hero__cta { display: grid; gap: 10px; margin-bottom: 22px; }
.hero__tel { margin: 0; }
.hero__tel a {
	display: inline-flex; align-items: center; gap: 9px; color: #fff;
	font-family: var(--font-en); font-size: 25px; font-weight: 600; letter-spacing: .04em;
}
.hero__tel .icon { color: var(--teal-400); }
.hero__tel-note { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .78); letter-spacing: .04em; }

.hero__visual { margin-top: 32px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; align-items: end; }
.hero__figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }
.hero__figure--main img { aspect-ratio: 4 / 3.4; }
.hero__figure--sub img { aspect-ratio: 4 / 3.4; }
.hero__figure figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 7px;
	font-size: 10.5px; letter-spacing: .06em; color: #fff;
	background: linear-gradient(to top, rgba(6, 25, 42, .78), rgba(6, 25, 42, 0));
}

/* ---------- メインビジュアルを入れたとき ----------
   assets/images/mv-pc.* / mv-sp.* を置くと .hero--mv になる。
   ★画像は width:100% / height:auto。上下も左右も切らない（焼き込み文字が切れないように）。
   ヘッダーは position: sticky なので画像の上端に被らない。 */
.hero.hero--mv { padding-top: 0; }
/* メイン画像がまだ無い状態（?hero=new のプレビュー）では上の余白を残す */
.hero.hero--mv:not(:has(.hero__mv)) { padding-top: 44px; }
.hero__mv { position: relative; z-index: 1; margin: 0 0 30px; }
.hero__mv img { width: 100%; height: auto; display: block; }
.hero--mv .hero__inner { display: block; }
.hero--mv .hero__body { max-width: 820px; margin-inline: auto; text-align: center; }
.hero--mv .hero__kicker { justify-content: center; }
.hero--mv .hero__lead--mv { margin-inline: auto; }
.hero--mv .hero__actions { margin-inline: auto; }
.hero--mv .hero__actions__tel { text-align: center; }
.hero--mv .hero__actions__tel-num { justify-content: center; }

/* ---------- メインビジュアル併用時の見出し・CTA ----------
   ★訴求コピー（業務用の甲殻類加工原料を、〜／3つの点）は画像側に焼き込む前提。
     ここは画像と重複しない見出し1本＋一言＋CTAだけに絞る。 */
.hero__kicker {
	display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
	font-size: 11.5px; font-weight: 600; letter-spacing: .13em; color: var(--teal-400);
}
.hero__kicker::before,
.hero__kicker::after {
	content: ""; flex: none; width: 26px; height: 1px; background: var(--teal-400); opacity: .7;
}
.hero__title--mv { font-size: 27px; line-height: 1.44; margin-bottom: 14px; }
.hero__title--mv em {
	font-style: normal; color: var(--teal-400); position: relative; white-space: nowrap;
}
.hero__title--mv em::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -.14em; height: 2px;
	background: linear-gradient(90deg, rgba(43, 188, 192, 0), var(--teal-400) 50%, rgba(43, 188, 192, 0));
}
.hero__lead--mv { font-size: 14.5px; color: rgba(255, 255, 255, .88); margin-bottom: 24px; max-width: 640px; }

.hero__actions {
	display: grid; gap: 18px; padding: 20px; border-radius: 14px;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
	backdrop-filter: blur(2px);
}
.hero__actions__btns { display: grid; gap: 10px; }
.hero__actions .btn { white-space: nowrap; }
.hero__actions__sep { display: block; height: 1px; background: rgba(255, 255, 255, .16); }
.hero__actions__tel { display: block; color: #fff; }
.hero__actions__tel:hover { color: #fff; }
.hero__actions__tel-label {
	display: block; font-size: 11px; letter-spacing: .12em; color: rgba(255, 255, 255, .78);
	margin-bottom: 2px;
}
.hero__actions__tel-num {
	display: flex; align-items: center; gap: 9px;
	font-family: var(--font-en); font-size: 27px; font-weight: 600; letter-spacing: .03em; line-height: 1.15;
}
.hero__actions__tel-num .icon { color: var(--teal-400); }
.hero__actions__tel-note {
	display: block; font-size: 11.5px; color: rgba(255, 255, 255, .78); margin-top: 4px;
	letter-spacing: .02em; white-space: nowrap;
}
.hero__actions__tel-org {
	display: block; font-size: 11px; color: rgba(255, 255, 255, .68); letter-spacing: .02em;
	white-space: nowrap;
}

/* ---------- 30秒で分かる ---------- */
.glance__grid { display: grid; gap: 12px; }
.glance__item {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 22px 14px 18px; box-shadow: var(--shadow-sm);
	border-top: 3px solid var(--teal-500);
}
.glance__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%; background: var(--teal-050);
	color: var(--teal-600); margin-bottom: 10px;
}
.glance__q {
	font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--teal-600);
	margin: 0 0 6px;
}
.glance__a { margin: 0; font-size: 13px; line-height: 1.85; color: var(--ink-70); letter-spacing: 0; }
.glance__a strong { color: var(--ink); }

/* ---------- 文字は中央寄せを基本に ----------
   ★長い本文まで中央にすると読みにくいので、カードの「見出し・短い文」を中央に、
     読ませる本文は中央のブロックの中で左揃えにしている。表・FAQ・住所は左のまま。 */
.glance__item,
.pcard__body,
.rolecard,
.ucard,
.scard,
.ccard,
.fstep,
.ocard__body,
.use__targets,
.products__note,
.flow__after,
.wrights__body { text-align: center; }

.products__note p,
.flow__after { margin-inline: auto; max-width: 900px; }

/* ---------- 商品カード ---------- */
.products__grid { display: grid; gap: 18px; }
.pcard {
	background: #fff; border: 1px solid var(--line); border-radius: 14px;
	overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
	transition: box-shadow .3s, transform .3s; position: relative;
}
.pcard::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2;
	background: var(--navy-600);
}
.pcard--taste::before { background: linear-gradient(90deg, #d98544, var(--warm-500)); }
.pcard--texture::before { background: linear-gradient(90deg, var(--navy-600), var(--teal-500)); }
.pcard:hover { box-shadow: 0 18px 44px rgba(12, 53, 82, .16); transform: translateY(-4px); }
.pcard__media { position: relative; background: var(--navy-100); overflow: hidden; }
.pcard__media img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	transition: transform .5s ease;
}
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__media::after {
	content: ""; position: absolute; inset: auto 0 0; height: 42%;
	background: linear-gradient(to top, rgba(6, 25, 42, .55), rgba(6, 25, 42, 0));
}
.pcard__origin {
	position: absolute; left: 12px; top: 12px; z-index: 1; font-size: 11px; font-weight: 700;
	letter-spacing: .06em; color: #fff; background: rgba(6, 25, 42, .72);
	padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(2px);
}
.pcard__roletag {
	position: absolute; right: 12px; bottom: 12px; z-index: 1;
	font-size: 11.5px; font-weight: 700; color: #fff; background: var(--navy-600);
	padding: 5px 12px; border-radius: 999px; letter-spacing: .06em;
	box-shadow: 0 4px 12px rgba(6, 25, 42, .3);
}
.pcard--taste .pcard__roletag { background: var(--warm-500); }
.pcard__body { padding: 20px 18px 22px; display: flex; flex-direction: column; flex: 1; }
.pcard__group { margin: 0 0 4px; font-size: 11px; letter-spacing: .12em; color: var(--ink-50); }
.pcard__name { font-size: 22px; margin: 0 0 2px; color: var(--navy-700); letter-spacing: .01em; }
.pcard__en {
	margin: 0 0 12px; font-family: var(--font-en); font-size: 11.5px; font-weight: 500;
	letter-spacing: .16em; color: var(--teal-600);
}
.pcard__role {
	margin: 0 0 12px; font-size: 12.5px; color: var(--ink-70); letter-spacing: .02em;
	padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.pcard__lead { font-size: 13.5px; color: var(--ink-70); margin-bottom: 14px; text-align: left; }
.pcard__spec { margin: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.pcard__spec > div { display: flex; gap: 10px; font-size: 12.5px; padding: 3px 0; text-align: left; }
.pcard__spec dt { flex: none; width: 4.5em; color: var(--ink-50); margin: 0; }
.pcard__spec dd { margin: 0; color: var(--ink-70); }
.pcard__notice {
	margin: 12px 0 0; font-size: 12.5px; font-weight: 700; color: #a8392f;
	background: #fdf1ef; border: 1px solid #f3d8d3; border-radius: 6px; padding: 9px 12px;
}
.products__note {
	margin-top: 22px; padding: 18px 20px; background: #fff;
	border: 1px solid var(--line); border-left: 3px solid var(--teal-500);
	border-radius: 6px; font-size: 13px; color: var(--ink-70);
}
.products__note p:last-child { margin-bottom: 0; }

/* ---------- 役割の違い ---------- */
.roles__grid { display: grid; gap: 16px; }
.rolecard {
	border-radius: var(--radius); padding: 24px 20px; border: 1px solid var(--line);
	background: #fff; box-shadow: var(--shadow-sm);
}
.rolecard--taste { border-top: 4px solid var(--warm-500); }
.rolecard--texture { border-top: 4px solid var(--navy-600); }
.rolecard__label {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
	padding: 4px 12px; border-radius: 999px; margin: 0 0 10px; color: #fff;
}
.rolecard--taste .rolecard__label { background: var(--warm-500); }
.rolecard--texture .rolecard__label { background: var(--navy-600); }
.rolecard__title { font-size: 20px; color: var(--navy-700); margin-bottom: 6px; }
.rolecard__products { font-size: 12.5px; color: var(--ink-50); margin: 0 0 14px; }
.rolecard__products span { margin: 0 4px; }
.rolecard__media { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.rolecard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.rolecard__body { margin: 0 auto; font-size: 13.5px; color: var(--ink-70); max-width: 32em; text-align: left; }

.roles__combo {
	display: block; text-align: center; margin: 18px auto 0; max-width: 860px;
	background: var(--teal-050); border-radius: var(--radius); padding: 22px 24px;
	font-size: 13.5px; color: var(--ink-70);
}
.roles__combo-mark {
	width: 38px; height: 38px; border-radius: 50%; background: var(--teal-500);
	color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
	margin: 0 auto 10px; font-size: 17px;
}
.roles__combo-text { display: block; }
.roles__combo-text br { display: none; }
.roles__combo strong { display: block; color: var(--navy-700); margin-bottom: 6px; font-size: 14.5px; }
.roles__combo-text { max-width: 40em; margin-inline: auto; }

/* ---------- 用途 ---------- */
.use__list { display: grid; gap: 14px; }
.ucard {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 24px 20px; box-shadow: var(--shadow-sm);
}
.ucard__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%; background: var(--teal-050);
	color: var(--teal-600); margin-bottom: 12px;
}
.ucard__title { font-size: 16.5px; color: var(--navy-700); margin-bottom: 7px; }
.ucard__body { margin: 0 auto; font-size: 13.5px; color: var(--ink-70); max-width: 26em; text-align: left; }

.use__band { display: grid; gap: 18px; margin-top: 26px; }
.use__figure { margin: 0; }
.use__figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.use__figure figcaption { font-size: 11.5px; color: var(--ink-50); margin-top: 6px; text-align: center; }
.use__targets { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.use__targets-head { font-size: 13px; font-weight: 700; color: var(--navy-700); margin: 0 0 10px; letter-spacing: .04em; }
.use__targets ul { display: grid; gap: 7px; margin: 0 auto 14px; max-width: 460px; text-align: left; }
.use__targets li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--ink-70); }
.use__targets li::before {
	content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px;
	border-radius: 50%; background: var(--teal-500);
}
.use__targets-note { margin: 0 auto; font-size: 12.5px; color: var(--ink-50); max-width: 620px; text-align: left; }

/* ---------- 強み ---------- */
.strength__grid { display: grid; gap: 16px; }
.scard {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
	display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s;
}
.scard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.scard__media { position: relative; background: var(--navy-100); }
.scard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scard__no {
	position: absolute; left: 0; bottom: 0; margin: 0;
	font-family: var(--font-en); font-size: 15px; font-weight: 600; line-height: 1;
	color: #fff; background: rgba(12, 53, 82, .88); padding: 7px 14px 6px;
	border-radius: 0 8px 0 0; letter-spacing: .06em;
}
.scard__body { padding: 20px 18px 22px; }
.scard__title { font-size: 17px; color: var(--navy-700); margin-bottom: 8px; }
.scard__text { margin: 0 auto; font-size: 13.5px; color: var(--ink-70); max-width: 26em; text-align: left; }
.strength__note { margin: 16px 0 0; font-size: 11.5px; color: var(--ink-50); text-align: center; }


/* ---------- 産地 ---------- */
.origin__photo {
	margin: 0 auto 26px; max-width: 640px; border-radius: 14px; overflow: hidden;
	box-shadow: 0 22px 50px rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .14);
}
.origin__photo img { width: 100%; display: block; }
.origin__photo figcaption {
	font-size: 11px; color: rgba(255, 255, 255, .75); text-align: center;
	padding: 8px 10px; background: rgba(255, 255, 255, .05);
}

.origin__grid { display: grid; gap: 16px; }
.ocard {
	background: rgba(8, 32, 54, .55); border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px; overflow: hidden; backdrop-filter: blur(3px);
}
.ocard { padding: 26px 20px; text-align: center; }
.ocard__media { margin-bottom: 14px; }
.ocard__media img {
	width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin-inline: auto;
	border: 3px solid rgba(255, 255, 255, .2);
}
.ocard__body { padding: 0; }
.ocard__country {
	font-family: var(--font-en); font-size: 11px; letter-spacing: .28em;
	color: var(--teal-400); margin: 0 0 6px;
}
.ocard__title { font-size: 18px; color: #fff; margin-bottom: 8px; }
.ocard__text { margin: 0 auto; font-size: 13.5px; color: rgba(255, 255, 255, .89); max-width: 32em; text-align: left; }

.origin__flow { display: grid; gap: 10px; margin-top: 22px; counter-reset: oflow; }
.origin__flow li {
	display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto;
	gap: 2px 12px; align-items: center; padding: 14px 16px;
	background: rgba(255, 255, 255, .05); border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .1);
}
.origin__flow-icon {
	grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%;
	background: rgba(23, 162, 168, .18); color: var(--teal-400);
	display: flex; align-items: center; justify-content: center;
}
.origin__flow-label { font-size: 14px; font-weight: 700; color: #fff; }
.origin__flow-text { font-size: 12.5px; color: rgba(255, 255, 255, .82); }

/* ---------- 流れ ---------- */
.flow__list { display: grid; gap: 14px; position: relative; }
.fstep {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 22px 20px; box-shadow: var(--shadow-sm);
}
.fstep__icon {
	position: relative; width: 58px; height: 58px; border-radius: 50%;
	background: var(--navy-050); border: 1px solid var(--navy-100); color: var(--navy-600);
	display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.fstep__badge {
	position: absolute; right: -4px; top: -4px; min-width: 24px; height: 24px; padding: 0 5px;
	border-radius: 999px; background: var(--teal-500); color: #fff;
	font-family: var(--font-en); font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
	display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
.fstep__step {
	margin: 0 0 4px; font-family: var(--font-en); font-size: 10.5px; font-weight: 600;
	letter-spacing: .22em; color: var(--teal-600);
}
.fstep__title { font-size: 16.5px; color: var(--navy-700); margin-bottom: 5px; }
.fstep__text { margin: 0 auto; font-size: 13.5px; color: var(--ink-70); max-width: 28em; text-align: left; }
.flow__after {
	margin: 24px auto 0; padding: 20px 22px; background: var(--navy-050);
	border-radius: var(--radius); font-size: 13.5px; color: var(--ink-70);
}
.flow__after strong { display: block; color: var(--navy-700); margin-bottom: 4px; }

/* ---------- 制約 ---------- */
.constraints__grid { display: grid; gap: 12px; }
.ccard {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 24px 20px; border-top: 3px solid var(--navy-600); box-shadow: var(--shadow-sm);
}
.ccard__title { font-size: 15.5px; color: var(--navy-700); margin-bottom: 6px; }
.ccard__body { margin: 0 auto; font-size: 13.5px; color: var(--ink-70); max-width: 26em; text-align: left; }
.constraints__note { margin: 18px 0 0; font-size: 13px; color: var(--ink-50); text-align: center; }

/* ---------- FAQ ---------- */
.faq__list { display: grid; gap: 10px; }
.faq__item {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq__q {
	list-style: none; cursor: pointer; padding: 16px 46px 16px 46px; position: relative;
	font-size: 14.5px; font-weight: 700; color: var(--navy-700);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
	content: "Q"; position: absolute; left: 18px; top: 15px;
	font-family: var(--font-ja); font-size: 15px; color: var(--teal-600); font-weight: 700;
}
.faq__q::after {
	content: ""; position: absolute; right: 20px; top: 24px; width: 9px; height: 9px;
	border-right: 2px solid var(--ink-50-deco); border-bottom: 2px solid var(--ink-50-deco);
	transform: rotate(45deg); transition: transform .2s;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a {
	padding: 0 20px 18px 46px; font-size: 13.5px; color: var(--ink-70); position: relative;
}
.faq__a::before {
	content: "A"; position: absolute; left: 18px; top: 0;
	font-family: var(--font-ja); font-size: 15px; color: var(--warm-500); font-weight: 700;
}

/* ---------- 会社案内 ---------- */
.company__msg {
	font-size: 14.5px; color: var(--ink-70); margin: 0 auto 30px; max-width: 800px; text-align: center;
}
.company__layout { display: grid; gap: 20px; align-items: stretch; }

.cpanel {
	background: #fff; border: 1px solid var(--line); border-radius: 14px;
	box-shadow: var(--shadow-sm); overflow: hidden;
}
.cpanel__head {
	padding: 18px 22px 16px; border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, #fff, var(--navy-050));
}
.cpanel__en {
	display: block; font-family: var(--font-en); font-size: 10px; font-weight: 600;
	letter-spacing: .26em; color: var(--teal-600); margin-bottom: 3px;
}
.cpanel__title { font-size: 17px; color: var(--navy-700); letter-spacing: .04em; }

.company__table { background: transparent; border: 0; border-radius: 0; }
.company__table th,
.company__table td { padding: 14px 16px; font-size: 13.5px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.company__table th { width: 32%; color: var(--ink-50); font-weight: 700; white-space: nowrap; font-size: 12.5px; }
.company__table td { color: var(--ink); }
.company__table tr:last-child th,
.company__table tr:last-child td { border-bottom: 0; }
.company__table td .company__en {
	font-family: var(--font-en); font-size: 11px; letter-spacing: .12em; color: var(--ink-50);
}

.hist { padding: 20px 22px 24px 34px; display: grid; gap: 18px; position: relative; }
.hist::before {
	content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px;
	background: linear-gradient(180deg, var(--teal-400), var(--navy-100));
}
.hist__item { position: relative; }
.hist__item::before {
	content: ""; position: absolute; left: -12px; top: 6px; width: 10px; height: 10px;
	border-radius: 50%; background: #fff; border: 2px solid var(--teal-500); z-index: 1;
}
.hist__date {
	display: block; font-family: var(--font-en), var(--font-ja); font-size: 12.5px;
	font-weight: 700; color: var(--navy-700); letter-spacing: .06em; margin-bottom: 2px;
}
.hist__body { display: block; font-size: 13px; color: var(--ink-70); }

/* ---------- 展示会・ニュース ---------- */
.news__grid { display: grid; gap: 16px; }
.ncard {
	background: #fff; border: 1px solid var(--line); border-radius: 14px;
	box-shadow: var(--shadow-sm); overflow: hidden;
	transition: box-shadow .3s, transform .3s;
}
.ncard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ncard__link { display: block; color: inherit; }
.ncard__link:hover { color: inherit; }
.ncard__media { overflow: hidden; background: var(--navy-100); }
.ncard__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.ncard:hover .ncard__media img { transform: scale(1.05); }
.ncard__body { padding: 18px 18px 20px; }
.ncard__date {
	display: block; font-family: var(--font-en); font-size: 11.5px; font-weight: 600;
	letter-spacing: .1em; color: var(--teal-600); margin-bottom: 6px;
}
.ncard__title { font-size: 16px; color: var(--navy-700); margin-bottom: 8px; }
.ncard__excerpt { margin: 0 0 12px; font-size: 13px; color: var(--ink-70); }
.ncard__more {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 12.5px; font-weight: 700; color: var(--teal-600);
}

.news__empty {
	text-align: center; background: var(--navy-050); border: 1px dashed var(--line);
	border-radius: 14px; padding: 40px 24px;
}
.news__empty-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 58px; height: 58px; border-radius: 50%; background: #fff;
	border: 1px solid var(--line); color: var(--teal-600); margin-bottom: 14px;
}
.news__empty-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--navy-700); }
.news__empty-text { margin: 0 auto 18px; max-width: 34em; font-size: 13.5px; color: var(--ink-70); }

/* ==========================================================================
   下層ページ共通パーツ（.pg 系）
   ★写真は既存の実写だけを、実寸に近いサイズで使う（支給画像は解像度が低い）。
     画像に頼らず、罫・番号・帯・表で「組んである」印象をつくる。
   ========================================================================== */
.pg { padding: 48px 0; }
.pg--light { background: var(--navy-050); }
.pg__block + .pg__block { margin-top: 40px; }

.pg__h2 {
	position: relative; margin: 0 0 6px; padding-top: 14px;
	font-size: 20px; line-height: 1.5; letter-spacing: .01em;
}
.pg__h2::before {
	content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 3px;
	background: var(--teal-500); border-radius: 2px;
}
.pg__eyebrow {
	font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .24em;
	color: var(--teal-600); margin: 0 0 14px;
}
.pg__lead { margin: 0 0 18px; font-size: 15px; line-height: 2; color: var(--ink-70); }
.pg__p { margin: 0 0 14px; font-size: 14.5px; line-height: 2; color: var(--ink-70); }
.pg__p strong, .pg__lead strong { color: var(--ink); }
.pg__p:last-child { margin-bottom: 0; }

/* 写真＋本文の2カラム（写真は小さく使う） */
.pg__split { display: grid; gap: 20px; }
.pg__figure { margin: 0; }
.pg__figure img {
	display: block; width: 100%; height: auto; border-radius: 10px;
	border: 1px solid var(--line); background: #fff;
}
.pg__cap { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink-50); }

/* 原料カード */
.pg__prods { display: grid; gap: 18px; margin-top: 18px; }
.prod {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; box-shadow: var(--shadow-sm);
}
.prod__media { margin: 0; background: var(--navy-050); border-bottom: 1px solid var(--line); }
.prod__media img { display: block; width: 100%; height: 220px; object-fit: cover; }

/* ★商品そのもの（パッケージ）を見せる写真は切り取らない。
 *   原料の写真は「中身のアップ」なので cover で切ってよいが、WRIGHT'S は容器の商品なので
 *   フタ・ラベル・底まで写っていないと商品に見えない。
 *   2026-09-18 実測：枠 418x220（比1.90）に元 346x282（比1.23）を cover で入れていたため
 *   上下35%が切れ、容器の底が欠けて「ラベルの寄り」になっていた。
 * ★このクラスを付けた図だけに効かせる（ブラウンクラブ・ロブスターの原料写真は cover のまま）。 */
.prod__media--pack { background: #fff; }
.prod__media--pack img { height: 236px; padding: 14px; object-fit: contain; }
.prod__body { padding: 20px; }
.prod__tag {
	display: inline-block; margin: 0 0 10px; padding: 4px 11px; border-radius: 999px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}
.prod__tag--taste { background: #fbeee4; color: #9a5326; }
.prod__tag--texture { background: var(--teal-050); color: var(--teal-600); }
.prod__name { margin: 0 0 2px; font-size: 18px; }
.prod__name span { display: block; font-family: var(--font-en); font-size: 12px; letter-spacing: .1em; color: var(--ink-50); font-weight: 500; }
.prod__role { margin: 10px 0 12px; font-size: 13px; font-weight: 700; color: var(--navy-700); }
.prod__text { margin: 0 0 14px; font-size: 14px; line-height: 1.95; color: var(--ink-70); }
/* ★項目名の列は一番長い項目名に合わせる（「欧州での使用例」が固定幅だと2行に折れた） */
.prod__dl {
	margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px;
	border-top: 1px dashed var(--line); padding-top: 14px; font-size: 13px;
}
.prod__dl > div { display: contents; }
.prod__dl dt { color: var(--ink-50); }
.prod__dl dd { margin: 0; color: var(--ink); }
.prod__notice {
	margin: 14px 0 0; padding: 12px 14px; border-radius: 8px;
	background: #fdf3ec; border: 1px solid #f0d8c6; color: #8c4a1d;
	font-size: 13px; font-weight: 700; line-height: 1.8;
}

/* 役割のマトリクス（画像を使わない見せ場） */
.pg__roles { display: grid; gap: 16px; margin-top: 18px; }
.rolebox { border-radius: var(--radius); padding: 22px 20px; border: 1px solid var(--line); background: #fff; }
.rolebox--taste { border-color: #ecd5c2; background: #fdf7f2; }
.rolebox--texture { border-color: #cfe9ea; background: #f2fafb; }
.rolebox__label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.rolebox--taste .rolebox__label { color: #9a5326; }
.rolebox--texture .rolebox__label { color: var(--teal-600); }
.rolebox__title { margin: 0 0 10px; font-size: 18px; }
.rolebox__text { margin: 0 0 12px; font-size: 14px; line-height: 1.95; color: var(--ink-70); }
.rolebox__items { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rolebox__items li { font-size: 13.5px; font-weight: 700; color: var(--navy-700); }
.rolebox__items span { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-50); }

/* 用途チップ */
.pg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.pg__chips li {
	font-size: 12.5px; padding: 5px 12px; border-radius: 999px;
	background: var(--navy-050); border: 1px solid var(--line); color: var(--ink-70);
}

/* 表（会社概要・規格） */
.pg__table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.pg__table th, .pg__table td { border-bottom: 1px solid var(--line); padding: 14px 12px; text-align: left; vertical-align: top; line-height: 1.9; }
.pg__table th { width: 12em; color: var(--ink-50); font-weight: 700; background: var(--navy-050); }
.pg__table td { color: var(--ink); }
.pg__tablewrap { overflow-x: auto; }

/* 注記・警告 */
.pg__note {
	margin-top: 18px; padding: 18px 18px; border-radius: var(--radius);
	background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.pg__note p { margin: 0 0 10px; font-size: 14px; line-height: 1.95; color: var(--ink-70); }
.pg__note p:last-child { margin-bottom: 0; }
.pg__warn {
	margin-top: 18px; padding: 18px; border-radius: var(--radius);
	background: #fdf3ec; border: 1px solid #f0d8c6;
}
.pg__warn-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #8c4a1d; }
.pg__warn p { margin: 0; font-size: 14px; line-height: 1.95; color: #7a4a26; }

/* 番号つきの並び（流れ・考え方） */
.pg__steps { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: pgstep; }
.pg__steps li {
	display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
}
.pg__steps li::before {
	counter-increment: pgstep; content: counter(pgstep, decimal-leading-zero);
	font-family: var(--font-en); font-size: 19px; font-weight: 700; color: var(--teal-500);
	line-height: 1.35;
}
/* ★grid の2列目に置く。指定しないと span が次の行（46px列）に落ちて1文字ずつ折り返す */
.pg__steps li > strong, .pg__steps li > span { grid-column: 2; }
.pg__steps strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--ink); }
.pg__steps span { font-size: 13.5px; line-height: 1.9; color: var(--ink-70); }

/* 箇条書き（先にお伝えしたいこと 等） */
.pg__list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pg__list li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.pg__list b { display: block; margin-bottom: 5px; font-size: 15px; color: var(--navy-700); }
.pg__list span { font-size: 13.5px; line-height: 1.9; color: var(--ink-70); }

/* アイコンつきカード */
.pg__icons { display: grid; gap: 14px; margin-top: 18px; }
.igcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.igcard__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
	border-radius: 50%; background: var(--teal-050); color: var(--teal-600); margin-bottom: 12px;
}
.igcard__title { margin: 0 0 8px; font-size: 16px; }
.igcard__text { margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--ink-70); }

/* 沿革 */
.pg__timeline { margin: 18px 0 0; padding: 0 0 0 4px; list-style: none; }
.pg__timeline li { position: relative; padding: 0 0 22px 26px; border-left: 2px solid var(--navy-100); }
.pg__timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.pg__timeline li::before {
	content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px;
	border-radius: 50%; background: #fff; border: 3px solid var(--teal-500);
}
.pg__timeline time { display: block; margin-bottom: 4px; font-family: var(--font-en); font-size: 14px; font-weight: 700; color: var(--navy-700); letter-spacing: .02em; }
.pg__timeline p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--ink-70); }

/* Q&A */
.pg__qa { margin-top: 18px; display: grid; gap: 12px; }
.pg__qa > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.pg__qa dt { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--navy-700); }
.pg__qa dd { margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--ink-70); }

/* 関連ページ */
.pg__links { display: grid; gap: 12px; margin-top: 18px; }
.pglink {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 16px 18px; text-decoration: none; color: var(--navy-700); font-weight: 700; font-size: 14.5px;
}
.pglink:hover { border-color: var(--teal-400); }
/* ★見出しが長いと2語で折り返して矢印がずれるので、補足は必ず改行して下段に置く */
.pglink span { flex: 1 0 100%; order: 3; color: var(--ink-50); font-weight: 400; font-size: 12.5px; }
/* リンク名を折り返し位置つきで出すときの span は、下の小さい説明文（.pglink span）の見た目にしない */
.pglink span.expo-label { flex: 0 1 auto; order: 0; color: inherit; font-weight: inherit; font-size: inherit; }
.pglink .expo-label span { color: inherit; font-weight: inherit; font-size: inherit; }
.pglink svg { order: 2; margin-left: auto; color: var(--teal-600); flex: 0 0 auto; }

@media (min-width: 768px) {
	.pg { padding: 60px 0; }
	.pg__block + .pg__block { margin-top: 52px; }
	.pg__h2 { font-size: 23px; }
	.pg__split { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
	.pg__split--wide { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
	.pg__prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.pg__roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pg__icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pg__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pg__qa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.pg__h2 { font-size: 25px; }
	.pg__icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ★SPは表をカード型に。4列を 390px に押し込むと2〜4文字で折り返して読めない。
     横スクロールする表は見落とされるので、行ごとのカードにする。 */
@media (max-width: 767px) {
	.pg__table, .pg__table tbody, .pg__table tr, .pg__table th, .pg__table td { display: block; width: auto; }
	.pg__table thead { display: none; }
	.pg__table { margin-top: 14px; }
	.pg__table tr {
		background: #fff; border: 1px solid var(--line); border-radius: 10px;
		overflow: hidden; margin-bottom: 12px;
	}
	.pg__table tr:last-child { margin-bottom: 0; }
	.pg__table th, .pg__table td { border-bottom: 1px solid var(--line); padding: 12px 14px; }
	.pg__table tr > *:last-child { border-bottom: 0; }
	.pg__table th { background: var(--navy-050); color: var(--navy-700); font-size: 14.5px; }
	.pg__table td[data-label]::before {
		content: attr(data-label); display: block; margin-bottom: 3px;
		font-size: 11.5px; letter-spacing: .04em; color: var(--ink-50);
	}
}

/* ---------- 展示会の出展報告（hero の直下） ---------- */
.exhibition { background: var(--navy-050); padding: 40px 0; }
.exhibition__inner {
	display: grid; gap: 20px; align-items: center;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 20px; box-shadow: var(--shadow-sm);
}
.exhibition__media {
	margin: 0; border-radius: 8px; overflow: hidden; background: var(--navy-100);
	max-width: 420px; width: 100%; justify-self: center;
}
.exhibition__media img { display: block; width: 100%; height: auto; }
/* ★2026-09-17：写真が 721×1000 から 632×673 のほぼ正方形になったので、SPの高さ切りをやめた。
   縦長だった頃は260pxで切らないと写真だけで画面が埋まったが、いまは全体が入っても373px程度。
   「ブラウンクラブとロブスターの両方が写っている」ことが伝わらないと差し替えの意味がないので切らない。 */
.exhibition__label {
	font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .24em;
	color: var(--teal-600); margin: 0 0 8px;
}
.exhibition__date {
	display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px;
	background: var(--teal-050); color: var(--navy-700); font-size: 12px; font-weight: 700;
	letter-spacing: .04em;
}
.exhibition__title { font-size: 19px; line-height: 1.55; margin: 0 0 14px; }
.exhibition__text { margin: 0 0 12px; font-size: 14.5px; line-height: 1.95; color: var(--ink-70); }
.exhibition__text strong { color: var(--ink); }
/* 公式の出展者ページ（外部リンク）。ボタンと競合しないよう文字リンクで出す */
.exhibition__ext { margin: 0 0 18px; font-size: 13.5px; line-height: 1.7; }
.exhibition__ext a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.exhibition__ext .icon { flex: none; transition: transform .25s ease; }
.nowrap-chunk { display: inline-block; }
.exhibition__ext a:hover .icon { transform: translateX(3px); }

@media (min-width: 768px) {
	.exhibition { padding: 52px 0; }
	.exhibition__inner { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; padding: 26px; }
	.exhibition__media { max-width: none; }
	.exhibition__title { font-size: 21px; }
}

@media (min-width: 1024px) {
	.exhibition__inner { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 36px; padding: 32px; }
	.exhibition__title { font-size: 24px; }
}

/* ---------- WRIGHT'S ---------- */
.wrights__inner {
	display: grid; gap: 20px; background: var(--navy-050); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 24px 20px;
}
.wrights__label { font-family: var(--font-en); font-size: 11px; letter-spacing: .24em; color: var(--ink-50); margin: 0 0 6px; }
.wrights__title { font-size: 19px; color: var(--navy-700); margin-bottom: 10px; }
.wrights__text { font-size: 13.5px; color: var(--ink-70); margin-inline: auto; max-width: 40em; text-align: left; }
.wrights__link a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; }
.wrights__media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.wrights__media img { width: 100%; background: #fff; border-radius: 8px; border: 1px solid var(--line); }

/* ---------- お問い合わせ ---------- */
.contact__cards { display: grid; gap: 14px; margin-bottom: 22px; }
.ctcard {
	display: block; text-align: center; color: #fff;
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px; padding: 26px 20px 24px;
	transition: background-color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.ctcard:hover {
	color: #fff; transform: translateY(-3px); background: rgba(255, 255, 255, .11);
	border-color: rgba(255, 255, 255, .32); box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}
.ctcard--accent { background: rgba(23, 162, 168, .16); border-color: rgba(43, 188, 192, .45); }
.ctcard--accent:hover { background: rgba(23, 162, 168, .24); border-color: rgba(43, 188, 192, .7); }
.ctcard__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .12);
	color: var(--teal-400); margin-bottom: 12px;
	transition: background-color .25s;
}
.ctcard:hover .ctcard__icon { background: rgba(255, 255, 255, .2); }
.ctcard__label {
	display: block; font-size: 11.5px; letter-spacing: .14em;
	color: rgba(255, 255, 255, .81); margin-bottom: 6px;
}
.ctcard__main {
	display: block; font-family: var(--font-en); font-size: 30px; font-weight: 600;
	letter-spacing: .03em; line-height: 1.2; margin-bottom: 8px;
}
.ctcard__main--mail { font-size: 17px; word-break: break-all; letter-spacing: .01em; }
.ctcard__note { display: block; margin: 0; font-size: 12px; color: rgba(255, 255, 255, .79); }

.contact__ask {
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px; padding: 26px 22px; max-width: 700px; margin-inline: auto; text-align: center;
}
.contact__ask-head { font-size: 13.5px; font-weight: 700; color: #fff; margin: 0 0 14px; letter-spacing: .04em; }
.contact__chips {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px;
}
.contact__chips li {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; color: rgba(255, 255, 255, .9);
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
	padding: 7px 14px; border-radius: 999px;
}
.contact__chips .icon { color: var(--teal-400); }
.contact__ask-note { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .77); }

/* ---------- フッター ---------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .85); font-size: 13px;
	padding: 40px 0 calc(96px + env(safe-area-inset-bottom, 0px)); }
.site-footer__top { display: grid; gap: 30px; }
.site-footer__alt { color: rgba(255, 255, 255, .9); font-weight: 700; }
.site-footer__tag { margin: 0 0 10px; font-size: 12.5px; color: rgba(255, 255, 255, .78); line-height: 1.8; }
.site-footer__meta { margin: 14px 0 0; display: grid; gap: 6px; }
.site-footer__meta > div { display: flex; gap: 10px; font-size: 11.5px; line-height: 1.7; }
.site-footer__meta dt { flex: none; width: 12.5em; color: rgba(255, 255, 255, .68); margin: 0; }
.site-footer__meta dd { margin: 0; color: rgba(255, 255, 255, .82); }
.site-footer__cta { }
.site-footer__tel {
	display: inline-flex; align-items: center; gap: 8px; color: #fff;
	font-family: var(--font-en); font-size: 23px; font-weight: 600; letter-spacing: .03em;
}
.site-footer__tel .icon { color: var(--teal-400); }
.site-footer__mail { margin: 6px 0 14px; }
.site-footer__mail a { color: rgba(255, 255, 255, .89); }
.site-footer__cta .btn { margin-top: 2px; }
.site-footer__lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.site-footer__lockup .logomark { flex: none; width: 44px; height: 44px; display: block; }
.site-footer__name { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 2px; }
.site-footer__en { font-family: var(--font-en); font-size: 10.5px; letter-spacing: .18em; color: rgba(255, 255, 255, .70); margin: 0; }
.site-footer__addr { margin: 0 0 12px; }
.site-footer__contact { margin: 0 0 6px; }
.site-footer__contact a { color: #fff; }
.site-footer__hours { margin: 4px 0 0; font-size: 12px; color: rgba(255, 255, 255, .72); }
.site-footer__navhead {
	font-size: 11.5px; letter-spacing: .16em; color: var(--teal-400); margin: 0 0 14px;
	padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-weight: 700;
}
.site-footer__nav ul { display: grid; gap: 10px; }
.site-footer__nav a { display: inline-block; }
.site-footer__nav a { color: rgba(255, 255, 255, .88); font-size: 13px; }
.site-footer__nav a:hover { color: #fff; }
.site-footer__bottom {
	margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.site-footer__note { margin: 0 0 6px; font-size: 11.5px; color: rgba(255, 255, 255, .70); }
.site-footer__copy { margin: 0; font-size: 11.5px; color: rgba(255, 255, 255, .70); }

/* ---------- スマホ固定バー ---------- */
.spbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	display: grid; grid-template-columns: 1fr 1fr;
	box-shadow: 0 -6px 20px rgba(6, 25, 42, .18);
}
.spbar a {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	/* ★iPhoneのホームバー分を各ボタンの背景ごと下へ伸ばす */
	padding: 14px 6px calc(14px + env(safe-area-inset-bottom, 0px));
	font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.3;
	letter-spacing: .02em; white-space: nowrap;
}
.spbar a + a { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16); }
.spbar .icon { flex: none; }
.spbar__tel { background: var(--navy-700); }
.spbar__form { background: var(--teal-500); }

/* ---------- 下層・404 ---------- */
.page-body { padding: 44px 0 60px; }
.page-body--center { text-align: center; }
.entry__title { font-size: 22px; color: var(--navy-700); margin-bottom: 18px; }
.entry__content img { margin: 1em 0; }
.err404__code { font-family: var(--font-en); font-size: 60px; color: var(--navy-100); margin: 0; line-height: 1; }

/* ---------- 出現アニメーション ----------
   ★JSが動いているときだけ隠す（.js が付く）。
     JS無効・prefers-reduced-motion では最初から見えている状態にする。 */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .reveal,
	.js .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
	.btn { transition: none; }
}


/* ==========================================================================
   下層ページ（用語解説・業務用原料をお探しの方へ）
   ========================================================================== */
.phero {
	position: relative; overflow: hidden;
	background: linear-gradient(165deg, #0a2740 0%, #0c3552 50%, #124b6d 100%);
	color: #fff; padding: 36px 0 44px;
}
.phero__bg { position: absolute; inset: auto 0 -2px; height: 70%; pointer-events: none; }
.phero__inner { position: relative; z-index: 1; text-align: center; }
.crumb { font-size: 11.5px; color: rgba(255, 255, 255, .78); margin-bottom: 16px; }
.crumb a { color: rgba(255, 255, 255, .90); }
.crumb a:hover { color: #fff; }
.crumb span { margin: 0 7px; }
.crumb > span:last-child { margin: 0; color: rgba(255, 255, 255, .78); }
.phero__en {
	font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .28em;
	color: var(--teal-400); margin: 0 0 8px;
}
.phero__title { font-size: 24px; line-height: 1.45; letter-spacing: .01em; margin: 0 0 14px; }
.phero__lead {
	margin: 0 auto; max-width: 720px; font-size: 14px; color: rgba(255, 255, 255, .89); text-align: left;
}

/* ---------- 用語解説 ---------- */
.gloss-index {
	background: var(--navy-050); border: 1px solid var(--line); border-radius: 12px;
	padding: 20px 22px; margin-bottom: 34px;
}
.gloss-index__head {
	margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--teal-600);
}
.gloss-index ul { display: flex; flex-wrap: wrap; gap: 8px; }
.gloss-index li a {
	display: inline-block; font-size: 13px; font-weight: 700; color: var(--navy-700);
	background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
}
.gloss-index li a:hover { border-color: var(--teal-500); color: var(--teal-600); }

.gloss-list { display: grid; gap: 24px; }
.gloss {
	background: #fff; border: 1px solid var(--line); border-radius: 14px;
	box-shadow: var(--shadow-sm); padding: 26px 24px 24px; scroll-margin-top: 90px;
	border-top: 3px solid var(--teal-500);
}
.gloss__term { font-size: 21px; color: var(--navy-700); margin-bottom: 4px; }
.gloss__read {
	display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
	color: var(--ink-50); margin-top: 4px;
}
.gloss__lead {
	margin: 12px 0 14px; font-size: 14.5px; font-weight: 700; color: var(--teal-600);
	padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.gloss__body { margin: 0 0 .9em; font-size: 14px; color: var(--ink-70); }
.gloss__body:last-of-type { margin-bottom: 0; }
.gloss__note {
	margin: 14px 0 0; font-size: 13px; font-weight: 700; color: #a8392f;
	background: #fdf1ef; border: 1px solid #f3d8d3; border-radius: 8px; padding: 10px 14px;
}
.gloss__warn {
	margin: 14px 0 0; font-size: 12.5px; color: var(--ink-70);
	background: var(--navy-050); border-left: 3px solid var(--navy-600); border-radius: 0 8px 8px 0;
	padding: 10px 14px;
}
.gloss-foot {
	margin-top: 32px; background: var(--teal-050); border-radius: 14px; padding: 24px 22px;
	font-size: 13.5px; color: var(--ink-70); text-align: center;
}
.gloss-foot p { margin: 0 auto 14px; max-width: 44em; text-align: left; }
.gloss-foot__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; text-align: center; }
.gloss-foot__links a {
	display: inline-block; font-size: 13px; font-weight: 700; background: #fff;
	border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; color: var(--navy-700);
}
.gloss-foot__links a:hover { border-color: var(--teal-500); color: var(--teal-600); }

/* ---------- 業務用原料をお探しの方へ ---------- */
.bu__h2 {
	font-size: 21px; color: var(--navy-700); margin: 40px 0 16px; text-align: center;
	padding-bottom: 12px; position: relative;
}
.bu__h2:first-child { margin-top: 0; }
.bu__h2::after {
	content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 46px; height: 3px; border-radius: 2px; background: var(--teal-500);
}
.bu__cases { display: grid; gap: 10px; }
.bu__cases li {
	position: relative; padding: 14px 16px 14px 44px; font-size: 14px; color: var(--ink-70);
	background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.bu__cases li::before {
	content: "✓"; position: absolute; left: 16px; top: 13px; color: var(--teal-500); font-weight: 700;
}
.bu__grid { display: grid; gap: 14px; }
.bu__item {
	background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px;
	border-top: 3px solid var(--navy-600);
}
.bu__origin { margin: 0 0 4px; font-size: 11.5px; letter-spacing: .08em; color: var(--ink-50); }
.bu__name { font-size: 18px; color: var(--navy-700); margin-bottom: 6px; }
.bu__name span {
	display: block; font-family: var(--font-en); font-size: 11.5px; font-weight: 500;
	letter-spacing: .14em; color: var(--teal-600); margin-top: 2px;
}
.bu__role { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-50); }
.bu__lead { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-70); }
.bu__state { margin: 0; font-size: 12.5px; color: var(--ink-50); }
.bu__notice {
	margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: #a8392f;
	background: #fdf1ef; border: 1px solid #f3d8d3; border-radius: 6px; padding: 9px 12px;
}
.bu__small { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-50); }
.bu__note {
	background: var(--navy-050); border-radius: 12px; padding: 22px; font-size: 13.5px; color: var(--ink-70);
}
.bu__note p:last-child { margin-bottom: 0; }
.bu__constraints { display: grid; gap: 12px; }
.bu__constraints > div {
	background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy-600);
	border-radius: 10px; padding: 18px 20px;
}
.bu__ctitle { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--navy-700); }
.bu__cbody { margin: 0; font-size: 13.5px; color: var(--ink-70); }
.bu__flow { display: grid; gap: 10px; counter-reset: bu; }
.bu__flow li {
	display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
	background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px;
}
.bu__flow-no {
	width: 44px; height: 44px; border-radius: 50%; background: var(--navy-700); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-en); font-size: 14px; font-weight: 600;
}
.bu__flow-body { font-size: 13.5px; color: var(--ink-70); }
.bu__flow-body strong { display: block; color: var(--navy-700); font-size: 15px; margin-bottom: 3px; }
.bu__company {
	margin-top: 34px; padding: 20px 22px; background: var(--navy-050); border-radius: 12px;
	font-size: 13px; color: var(--ink-70);
}
.bu__company p { margin: 0; }

@media (min-width: 768px) {
	.phero { padding: 48px 0 60px; }
	.phero__title { font-size: 32px; }
	.phero__lead { text-align: center; font-size: 15px; }
	.gloss__term { font-size: 24px; }
	.bu__grid { grid-template-columns: repeat(2, 1fr); }
	.bu__constraints { grid-template-columns: repeat(3, 1fr); }
	.bu__h2 { font-size: 24px; }
}

/* ==========================================================================
   セクション背景の写真（支給素材）
   ★文字を読ませるのが最優先。写真は必ずベタ塗り／グラデーションの下に敷き、
     ネイビー面は暗く、白面はごく薄い透かしにする。
   ========================================================================== */
.sec--photo { position: relative; isolation: isolate; overflow: hidden; }
.sec--photo > .wrap { position: relative; z-index: 1; }
.sec--photo::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-position: center; background-size: cover; background-repeat: no-repeat;
}
.sec--photo::after { content: ""; position: absolute; inset: 0; z-index: 0; }

/* 産地（ネイビー面）＝夕暮れの港 */
.origin.sec--photo::before { background-image: url("../images/bg-harbor.webp"); opacity: .38; }
.origin.sec--photo::after {
	background: linear-gradient(180deg, rgba(10, 39, 64, .92) 0%, rgba(10, 39, 64, .74) 45%, rgba(6, 25, 42, .95) 100%);
}

/* お問い合わせ（ネイビー面）＝コンテナ船 */
.contact.sec--photo::before { background-image: url("../images/bg-ship.webp"); opacity: .3; }
.contact.sec--photo::after {
	background: linear-gradient(180deg, rgba(10, 39, 64, .94) 0%, rgba(12, 53, 82, .86) 50%, rgba(6, 25, 42, .96) 100%);
}

/* お取引の流れ（白面）＝世界地図の透かし */
.flow.sec--photo::before {
	background-image: url("../images/bg-worldmap.webp"); opacity: .1;
	background-size: contain; background-position: center 58%;
}
.flow.sec--photo::after {
	background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .55) 30%, rgba(255, 255, 255, .55) 70%, #fff 100%);
}

/* 強み（白面）＝コンテナヤードをごく薄く */
.strength.sec--photo::before { background-image: url("../images/bg-terminal.webp"); opacity: .1; }
.strength.sec--photo::after {
	background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .72) 40%, rgba(255, 255, 255, .78) 60%, #fff 100%);
}

/* その他取扱商品（白面）＝空と海の輸送をごく薄く */
.wrights.sec--photo::before { background-image: url("../images/bg-airsea.webp"); opacity: .12; }
.wrights.sec--photo::after {
	background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .8) 50%, #fff 100%);
}
.wrights.sec--photo .wrights__inner { background: rgba(255, 255, 255, .86); backdrop-filter: blur(2px); }

@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
	/* PCだけ、背景をわずかに固定して奥行きを出す（スマホは負荷とバグが多いので付けない） */
	.origin.sec--photo::before,
	.contact.sec--photo::before { background-attachment: fixed; }
}

/* ==========================================================================
   仕上げ（2026-09-09）
   ・見出しと短文の折り返しを整える／セクションの境目に波／角丸と影の統一
   ・ホバーと操作感／キーボード操作の見え方
   ========================================================================== */

/* ── 見出し・短文の折り返し。「す。」だけが2行目に落ちるのを止める ── */
.sec-head__ja,
.sec-head__lead,
.hero__title,
.hero__lead,
.phero__title,
.phero__lead,
.glance__a,
.pcard__lead,
.ucard__title,
.scard__title,
.ccard__title,
.fstep__title,
.gloss__lead,
.bu__h2,
.news__empty-text,
.constraints__note,
.products__note p,
.company__msg { text-wrap: pretty; }

.sec-head__ja,
.hero__title,
.phero__title,
.ucard__title,
.scard__title,
.ccard__title,
.fstep__title,
.pcard__name,
.gloss__term { text-wrap: balance; }

/* ── セクションの境目に波を1本 ──
   ロゴとヒーローの波と呼応させる。白→淡い青の切り替わりだけに使う（写真背景の面には出さない）。 */
.sec--light:not(.sec--photo)::before {
	content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 34px; z-index: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v10c-180 22-320-6-520 2S620 34 420 28 120 6 0 14Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat top center / 100% 34px;
	pointer-events: none;
}
.sec--light:not(.sec--photo) > .wrap { position: relative; z-index: 1; }

/* ── ヒーロー画像の下端をネイビーへなじませる（段差が見えていた） ── */
.hero__mv { position: relative; }
.hero__mv::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
	background: linear-gradient(to bottom, rgba(10, 39, 64, 0), rgba(10, 39, 64, .55) 60%, rgba(10, 39, 64, .9));
	pointer-events: none;
}

/* ── 英字ラベルを少しだけ強く ── */
.sec-head__en {
	display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .26em;
}
.sec-head--center .sec-head__en::before,
.sec-head--center .sec-head__en::after {
	content: ""; width: 18px; height: 1px; background: currentColor; opacity: .5;
}

/* ── 角丸と影を統一 ── */
.glance__item, .ucard, .scard, .ccard, .fstep, .rolecard,
.ncard, .use__targets, .products__note, .company__table,
.cpanel, .gloss, .bu__item, .bu__note, .news__empty { border-radius: 14px; }
.use__figure img, .origin__photo, .glance__photo img { border-radius: 14px; }

/* ── ホバーの手ざわりを揃える ── */
.glance__item, .ucard, .ccard, .fstep {
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.glance__item:hover, .ucard:hover, .ccard:hover, .fstep:hover {
	box-shadow: var(--shadow-md); transform: translateY(-3px);
}
.rolecard { transition: box-shadow .3s ease, transform .3s ease; }
.rolecard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ── ボタンの矢印がホバーで少し進む ── */
.btn .icon { transition: transform .25s ease; }
.btn:hover .icon { transform: translateX(3px); }
.ncard__more .icon, .wrights__link .icon { transition: transform .25s ease; }
.ncard:hover .ncard__more .icon,
.wrights__link a:hover .icon { transform: translateX(3px); }

/* ── キーボード操作のときだけ、はっきりした枠を出す ── */
a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 3px solid var(--teal-400); outline-offset: 3px; border-radius: 4px;
}
.sec--navy a:focus-visible, .hero a:focus-visible, .phero a:focus-visible {
	outline-color: #fff;
}

/* ── ヒーロー下端のスクロール誘導 ── */
.hero__scroll {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
	display: none; flex-direction: column; align-items: center; gap: 6px;
	font-family: var(--font-en); font-size: 9.5px; letter-spacing: .24em;
	color: rgba(255, 255, 255, .75);
}
.hero__scroll span {
	display: block; width: 1px; height: 34px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}

/* ── 用途セクション：写真と右のボックスの高さをそろえる ── */
.use__figure img { aspect-ratio: 16 / 11; object-fit: cover; }

/* ── 数字は欧文フォントでそろえる ── */
.hist__date, .bu__state, .company__table td { font-feature-settings: "palt"; }

/* ── 本文の読みやすさを少しだけ ── */
.gloss__body, .bu__lead, .bu__cbody, .scard__text, .ucard__body { line-height: 1.95; }

@media (min-width: 1024px) {
	.hero--mv .hero__scroll { display: flex; }
	.sec--light:not(.sec--photo)::before { height: 46px; background-size: 100% 46px; }
	.sec-head__en { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.glance__item:hover, .ucard:hover, .ccard:hover, .fstep:hover,
	.rolecard:hover, .pcard:hover, .scard:hover, .ncard:hover, .ctcard:hover { transform: none; }
	.btn:hover .icon { transform: none; }
	.pcard:hover .pcard__media img, .ncard:hover .ncard__media img { transform: none; }
}

/* ==========================================================================
   タブレット 768px〜
   ========================================================================== */
@media (min-width: 768px) {
	body { font-size: 15.5px; }
	.pc { display: inline; }
	.sp { display: none; }
	.wrap { width: min(100% - 64px, var(--wrap)); }
	.wrap--narrow { width: min(100% - 64px, 860px); }

	.sec { padding: 80px 0; }
	.sec--tight { padding: 60px 0; }
	.sec-head { margin-bottom: 40px; }
	.sec-head__ja { font-size: 29px; }

	.hero { padding: 60px 0 70px; }
	.hero__title { font-size: 38px; }
	.hero__lead { font-size: 15.5px; max-width: 640px; }
	.hero__cta { display: flex; flex-wrap: wrap; }
	.hero__title--mv { font-size: 38px; }
	.hero__visual { grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 40px; }

	.glance__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
	.products__grid { grid-template-columns: repeat(2, 1fr); }
	.roles__grid { grid-template-columns: repeat(2, 1fr); }
	.strength__grid { grid-template-columns: repeat(2, 1fr); }
	.origin__grid { grid-template-columns: repeat(2, 1fr); }
	.origin__flow { grid-template-columns: repeat(3, 1fr); }
	.constraints__grid { grid-template-columns: repeat(3, 1fr); }
	.contact__cards { grid-template-columns: repeat(2, 1fr); }
	.contact__ask ul { grid-template-columns: repeat(2, 1fr); }
	.use__list { grid-template-columns: repeat(2, 1fr); }
	.news__grid { grid-template-columns: repeat(3, 1fr); }
	.use__band { grid-template-columns: 1.05fr .95fr; align-items: start; gap: 24px; }
	.wrights__inner { grid-template-columns: 1.4fr 1fr; align-items: center; padding: 30px; }
	.company__layout { grid-template-columns: 1.1fr .9fr; gap: 24px; }
	.site-footer__top { grid-template-columns: 1.35fr .85fr .95fr; gap: 40px; }
	.contact__cards { grid-template-columns: 1fr 1fr; }
	.site-footer { padding-bottom: 40px; }
	.spbar { display: none; }
	.faq__q { font-size: 15.5px; }
}

/* ==========================================================================
   PC 1024px〜
   ========================================================================== */
@media (min-width: 1024px) {
	html { scroll-padding-top: 84px; }
	.site-header__inner { min-height: 76px; }
	.brand__logo { height: 30px; }
	.navtoggle { display: none; }
	.drawer { display: none !important; }

	.gnav { display: block; margin-left: auto; }
	.gnav ul { display: flex; align-items: center; gap: 26px; }
	.gnav a { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--navy-700); }
	.gnav__ja { font-size: 13.5px; font-weight: 700; }
	.gnav__en { font-family: var(--font-en); font-size: 9.5px; letter-spacing: .12em; color: var(--ink-50); }
	.gnav a:hover .gnav__ja { color: var(--teal-600); }

	.head-cta { display: flex; align-items: center; gap: 14px; margin-left: 26px; }
	.head-cta__tel { display: flex; flex-direction: column; align-items: flex-end; color: var(--navy-700); }
	.head-cta__tel-label { font-size: 10px; letter-spacing: .06em; color: var(--ink-50); }
	.head-cta__tel-num { font-family: var(--font-en); font-size: 20px; font-weight: 600; letter-spacing: .03em; }

	.hero { padding: 76px 0 88px; }
	.hero__inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
	.hero--mv .hero__inner { display: block; }
	.hero__visual { margin-top: 0; }
	.hero__title { font-size: 44px; }
	.hero__title--mv { font-size: 42px; }

	/* CTAは1024以上で横一列。768〜1023 は縦積みのまま（横一列だとはみ出す） */
	.hero__actions {
		display: flex; align-items: center; gap: 26px; padding: 22px 26px;
		width: fit-content; max-width: 100%;
	}
	.hero__actions__btns { display: flex; gap: 12px; }
	.hero__actions__btns .btn { flex: none; }
	.hero__actions__sep { width: 1px; height: 62px; background: rgba(255, 255, 255, .18); }
	.hero__figure--main img { aspect-ratio: 4 / 4.2; }
	.hero__figure--sub img { aspect-ratio: 4 / 3.2; }

	.glance__grid { grid-template-columns: repeat(5, 1fr); }
	.use__list { grid-template-columns: repeat(4, 1fr); }
	.products__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.pcard__name { font-size: 18px; }
	.strength__grid { grid-template-columns: repeat(4, 1fr); }
	.flow__list { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
	.fstep::before { display: none; }
	.site-footer__nav ul { grid-template-columns: 1fr; }
}

/* 1024〜1279：ナビ・電話・ボタンが並ぶと社名が2行になってヘッダーが間延びする。詰める */
@media (min-width: 1024px) and (max-width: 1279px) {
	.brand .logomark { width: 32px; height: 32px; }
	.brand__ja { font-size: 13px; }
	.brand__en { font-size: 8.5px; letter-spacing: .14em; }
	.gnav ul { gap: 18px; }
	.gnav__ja { font-size: 12.5px; }
	.head-cta { gap: 10px; margin-left: 16px; }
	.head-cta__tel-num { font-size: 18px; }
	.head-cta .btn--sm { padding: 9px 14px; font-size: 12.5px; }
}

/* 1024〜1099：さらに狭い。ヘッダーの電話は落とす（ヒーローとフッターに出ているので導線は残る） */
@media (min-width: 1024px) and (max-width: 1199px) {
	.head-cta__tel { display: none; }
	.brand__ja { font-size: 12.5px; }
	.gnav ul { gap: 15px; }
}

/* ---------- お問い合わせフォーム（/contact/） ----------
   クラス接頭辞は sk 固定。.contact / .form のような一般名は body クラスや
   他セクションと当たるので使わない（別案件で実際に衝突した）。 */
.skphone {
	margin-top: 16px; background: var(--navy-050); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 18px 20px; text-align: center;
}
.skphone__num {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-en); font-size: 30px; font-weight: 600; letter-spacing: .02em;
	color: var(--navy-700); line-height: 1.2;
}
.skphone__num:hover { color: var(--teal-600); }
.skphone__num .icon { flex: none; color: var(--teal-600); }
.skphone__note { margin: 8px 0 0; font-size: 13px; color: var(--ink-50); }

.skform { margin-top: 20px; }
.skform__row + .skform__row { margin-top: 22px; }
.skform__label {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.skform__req {
	display: inline-block; padding: 2px 8px; border-radius: 3px;
	background: #fbeee4; color: #9a5326; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.skform__req-mark { color: #9a5326; }
.skform__note { margin: -2px 0 8px; font-size: 12.5px; line-height: 1.8; color: var(--ink-50); }

.skform input[type="text"],
.skform input[type="email"],
.skform input[type="tel"],
.skform textarea,
.skform select {
	width: 100%; padding: 13px 14px; font-family: inherit; font-size: 16px; line-height: 1.7;
	color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px;
	transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.skform select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f8291' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.skform textarea { resize: vertical; min-height: 150px; }
.skform input:focus, .skform textarea:focus, .skform select:focus {
	outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(23, 162, 168, .16);
}
.skform ::placeholder { color: #a9b5bf; }

.skform__checks { display: grid; gap: 8px; }
@media (min-width: 768px) {
	.skform__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.skcheck {
	display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
	background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px;
	font-size: 14px; line-height: 1.7; color: var(--ink-70); transition: border-color .2s, background .2s;
}
.skcheck:hover { border-color: var(--teal-400); background: var(--teal-050); }
.skcheck input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--teal-500); }
.skcheck--agree { justify-content: center; align-items: center; background: var(--navy-050); font-weight: 700; color: var(--ink); }
.skcheck--agree .skform__req { margin-left: 8px; }

.skform__privacy {
	margin-top: 26px; background: var(--navy-050); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 18px 20px;
}
.skform__privacy-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--navy-700); }
.skform__privacy p { margin: 0; font-size: 13px; line-height: 1.95; color: var(--ink-70); }

.skform__submit { margin-top: 26px; text-align: center; }
.skform__submit .btn { min-width: 260px; justify-content: center; }
.skform__submit-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-50); }

.skform__alert {
	margin-top: 18px; border: 1px solid #e3bfae; background: #fdf3ee; border-radius: var(--radius);
	padding: 14px 18px; font-size: 14px; line-height: 1.9; color: #8c4a1d;
}
.skform__err { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: #a8392f; }
.skform__row.is-error input,
.skform__row.is-error textarea,
.skform__row.is-error select { border-color: #cf7b6c; background: #fffaf9; }

/* ハニーポット。視覚的にも支援技術的にも触らせない */
.skform__hp {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skdone {
	background: var(--teal-050); border: 1px solid #bfe4e6; border-radius: var(--radius);
	padding: 32px 24px; text-align: center;
}
.skdone__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: var(--navy-700); }
.skdone__text { margin: 0 0 14px; font-size: 14.5px; line-height: 2; color: var(--ink-70); }
.skdone__note { margin: 0 0 22px; font-size: 13px; line-height: 1.9; color: var(--ink-50); }
.skdone__back { margin: 0; }

/* ==========================================================================
   記事（一覧・カテゴリー・記事ページ）
   ========================================================================== */

/* 一覧・記事の見出し帯 */
.phero--list .phero__title, .phero--post .phero__title { max-width: 22em; }
.phero__title--post { font-size: 22px; line-height: 1.6; }
@media (min-width: 768px) { .phero__title--post { font-size: 28px; } }
@media (min-width: 1024px) { .phero__title--post { font-size: 32px; } }
.phero__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	margin: 0 0 12px; font-size: 13px; color: rgba(255, 255, 255, .88);
}
.phero__meta time { font-family: var(--font-en); letter-spacing: .06em; }
.phero__cat {
	display: inline-block; padding: 3px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .14); color: #fff; font-size: 12px; font-weight: 700;
}
.phero__cat:hover { background: rgba(255, 255, 255, .26); color: #fff; }

/* カテゴリーの絞り込み */
.catnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.catnav__item {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
	background: #fff; color: var(--ink-70); font-size: 13.5px; font-weight: 700;
	transition: border-color .2s, color .2s, background .2s;
}
.catnav__item:hover { border-color: var(--teal-400); color: var(--teal-600); }
.catnav__item.is-current { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.catnav__count { font-family: var(--font-en); font-size: 11.5px; opacity: .7; }

/* 記事カード。★クラス名は acard。pcard はトップの「主な取り扱い原料」の商品カードが
   先に使っている名前で、あとから同じ名前で書くと商品カードの見た目まで巻き込む
   （2026-09-18 に実際に上書きしていた）。 */
.plist { display: grid; gap: 16px; }
@media (min-width: 768px) { .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.acard {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.acard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-400); }
.acard__link { display: block; padding: 22px 20px; color: inherit; height: 100%; }
.acard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.acard__date { font-family: var(--font-en); font-size: 12.5px; letter-spacing: .06em; color: var(--ink-50); }
.acard__cat {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	background: var(--teal-050); color: var(--teal-600); font-size: 11.5px; font-weight: 700;
}
.acard__title { font-size: 16.5px; line-height: 1.65; margin: 0 0 10px; color: var(--navy-700); }
.acard:hover .acard__title { color: var(--teal-600); }
.acard__excerpt { margin: 0 0 14px; font-size: 13.5px; line-height: 1.9; color: var(--ink-70); }
.acard__more {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 700; color: var(--teal-600);
}
.acard__more .icon { transition: transform .25s ease; }
.acard:hover .acard__more .icon { transform: translateX(3px); }
.plist--compact .acard__excerpt { display: none; }

/* ページ送り */
.pager { margin-top: 30px; }
.pager__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pager__item .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 14px; border-radius: 6px;
	border: 1px solid var(--line); background: #fff; color: var(--ink-70);
	font-family: var(--font-en); font-size: 14px; font-weight: 600;
	transition: border-color .2s, background .2s, color .2s;
}
.pager__item .page-numbers:hover { border-color: var(--teal-400); color: var(--teal-600); }
.pager__item .page-numbers.current { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.pager__item .page-numbers.dots { border-color: transparent; background: transparent; }

/* 記事の前後・関連 */
.pnav { display: grid; gap: 12px; margin-top: 36px; }
@media (min-width: 768px) { .pnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pnav__item {
	display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
	background: #fff; color: inherit; transition: border-color .2s, box-shadow .2s;
}
.pnav__item:hover { border-color: var(--teal-400); box-shadow: var(--shadow-sm); }
.pnav__item--next { text-align: right; }
.pnav__label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--teal-600); margin-bottom: 6px; }
.pnav__title { display: block; font-size: 14px; line-height: 1.7; color: var(--navy-700); font-weight: 700; }

.related { margin-top: 44px; }
.related__head {
	font-size: 18px; margin: 0 0 16px; padding-left: 12px;
	border-left: 4px solid var(--teal-500); line-height: 1.4;
}
.entry__back { margin: 36px 0 0; text-align: center; }

/* ==========================================================================
   記事本文（旧テーマ smart260 由来のHTML）
   既存記事には旧テーマの水色 2a9fd6 がインラインstyleで直書きされている
   （本文だけで382か所）。記事を書き換えずに配色を合わせるため、
   ここだけ属性セレクタと important でインラインstyleを上書きしている。
   記事本文を書き換えて直そうとしないこと。正本は本番のWordPress。
   ========================================================================== */
.entry__content { font-size: 15.5px; line-height: 2.05; color: var(--ink-70); }
.entry__content > *:first-child { margin-top: 0; }
.entry__content p { margin: 0 0 1.4em; }
.entry__content strong, .entry__content b { color: var(--ink); font-weight: 700; }
.entry__content a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.entry__content a:hover { text-decoration: none; }
.entry__content img { max-width: 100%; height: auto; }

/* 冒頭のバナー（毎回入る div.box） */
.entry__content .box { text-align: center; margin: 0 0 28px; }
.entry__content .box img { width: 100%; height: auto; border-radius: 8px; }

/* 見出し。旧テーマは h2 に背景色をインラインで持たせている */
.entry__content h2 {
	font-size: 19px; line-height: 1.55; margin: 2.4em 0 .9em; color: var(--ink);
}
.entry__content h2[style] {
	padding: 13px 18px !important; border-radius: 6px !important;
	background: var(--navy-700) !important; color: #fff !important;
	font-size: 19px !important;
}
@media (min-width: 768px) {
	.entry__content h2, .entry__content h2[style] { font-size: 21px !important; }
}
.entry__content h3 {
	font-size: 17px; line-height: 1.55; margin: 2em 0 .7em; color: var(--navy-700);
}
.entry__content h3[style] {
	font-size: 17px !important; color: var(--teal-600) !important;
	border-bottom: 2px dotted var(--teal-400) !important; padding-bottom: 8px !important;
}
.entry__content h4 { font-size: 15.5px; margin: 1.6em 0 .6em; color: var(--navy-700); }

/* 本文中の小見出し（span にインラインで色が付いている） */
.entry__content span[style*="2a9fd6"],
.entry__content span[style*="2A9FD6"] { color: var(--teal-600) !important; }
/* 旧記事の本文に直書きされたグレーの注記（#777 が2記事・#666 が1記事）。
   2026-09-18 河内様「グレーの文字が薄い」への対応で、ほかの小さい説明文字と同じ濃さに揃える。
   ★記事本文は書き換えない（正本は本番のWordPress）。水色と同じく属性セレクタで上書きする。 */
.entry__content [style*="color:#777"], .entry__content [style*="color: #777"],
.entry__content [style*="color:#666"], .entry__content [style*="color: #666"] { color: var(--ink-50) !important; }

/* リスト */
.entry__content ul, .entry__content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.entry__content ul { list-style: disc; }
.entry__content ol { list-style: decimal; }
.entry__content li { margin-bottom: .5em; line-height: 1.95; }
.entry__content li::marker { color: var(--teal-500); }

/* 表。素の table は枠線が無いので当てる */
.entry__content table {
	width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 14.5px;
	background: #fff;
}
.entry__content table th, .entry__content table td {
	border: 1px solid var(--line); padding: 12px 14px; text-align: left;
	vertical-align: top; line-height: 1.9;
}
.entry__content table th { background: var(--navy-050); color: var(--ink); font-weight: 700; }

/* table.onayamai は表ではなく「画像＋本文」のかたまり。枠線を出すと表に見えるので消す。
 *
 * ★★横に並べてはいけない（2026-09-18 の見た目チェックで是正）。
 *   旧サイトのHTMLは <tr><th>画像</th><td>本文ぜんぶ</td></tr> という**1行だけの2列表**。
 *   これを PC で横並び（flex）にすると、画像の列だけ先に終わって、その下から表の最後まで
 *   左側が真っ白になる。実測で最大 947px（/import-seafood-traceability/）。
 *   PCでは「画像が読み込めていない」ようにしか見えなかった。
 *   → **全画面幅で縦積み（画像 → 本文）に統一する。** こうすると画面幅ごとの分岐が無くなり、
 *     どの幅でも同じ積み方になるので崩れる余地が無い。
 * ★画像は元データより大きく引き伸ばさないよう、幅の上限を付ける
 *   （記事の画像は元が 390〜786px。本文幅 860px いっぱいに広げるとぼやける）。 */
.entry__content table.onayamai { border: 0; background: transparent; }
.entry__content table.onayamai th,
.entry__content table.onayamai td { border: 0; background: transparent; padding: 0; }
.entry__content table.onayamai th { padding-bottom: 24px; }
.entry__content table.onayamai th img { border-radius: 8px; }
.entry__content table.onayamai ul { list-style: none; padding-left: 0; margin: 0; }
.entry__content table.onayamai > tbody > tr,
.entry__content table.onayamai > tr { display: block; }
.entry__content table.onayamai > tbody > tr > th,
.entry__content table.onayamai > tbody > tr > td,
.entry__content table.onayamai > tr > th,
.entry__content table.onayamai > tr > td { display: block; width: auto !important; }
.entry__content table.onayamai > tbody > tr > th,
.entry__content table.onayamai > tr > th { max-width: 440px; }

/* 広い表は横スクロール（onayamai は対象外） */
.entry__content > table:not(.onayamai) { display: block; overflow-x: auto; }

.news__more { margin: 26px 0 0; text-align: center; }

/* ★ナビが7項目になって（ニュースを足した）ヘッダーが2行に折り返した。2026-09-18 実測で是正。
   - 社名とナビの文字は語の途中で折らない（折り返すくらいなら詰める）
   - 1200px以上はナビの間隔を詰め、1400px以上はヘッダーの幅そのものを広げる */
.brand__ja, .gnav__ja { white-space: nowrap; }
@media (min-width: 1200px) {
	.gnav ul { gap: 20px; }
}
@media (min-width: 1400px) {
	.site-header__inner { width: min(100% - 32px, 1360px); }
	.gnav ul { gap: 24px; }
}

/* 続き。1280〜1399 には詰めの指定が無く、英字ラベル・電話番号・ボタンが折り返していた。
   ★電話番号とボタンの文字は絶対に折らない（「0774-66-」で改行すると番号に見えない）。 */
.head-cta__tel-num, .head-cta .btn, .gnav__en { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1399px) {
	.brand .logomark { width: 32px; height: 32px; }
	.brand__ja { font-size: 13px; }
	.brand__en { font-size: 8.5px; letter-spacing: .14em; }
	.gnav ul { gap: 16px; }
	.gnav__ja { font-size: 12.5px; }
	.gnav__en { font-size: 9px; letter-spacing: .08em; }
	.head-cta { gap: 10px; margin-left: 16px; }
	.head-cta__tel-num { font-size: 18px; }
	.head-cta .btn--sm { padding: 9px 14px; font-size: 12.5px; }
}
/* 1200〜1279 は既存の詰め（1024〜1279）が効くが、英字ラベルを折らない分だけ足りない */
@media (min-width: 1200px) and (max-width: 1279px) {
	.gnav ul { gap: 14px; }
	.gnav__en { font-size: 9px; letter-spacing: .06em; }
}