/*
Theme Name: AZ AEON
Theme URI: https://az-aeon.com/
Author: Rinrinta
Description: エーズィー・イオン株式会社 コーポレートサイト用オリジナルテーマ（図工室風ミニマルデザイン）
Version: 1.9.5
Requires PHP: 7.4
Text Domain: azaeon
*/

:root{
  --az-gray-text:#595656;
  --gray:#777777;
  --line:#e3e3e3;
  --az-red:#E60012;
  --az-red-dark:#B8000E;
  --az-red-pale:#FDEEEF;
  /* rgba()用チャンネル値（--az-red / --az-red-dark と必ず同じ色に保つこと） */
  --az-red-rgb:230,0,18;
  --az-red-dark-rgb:184,0,14;
  /* ロゴの縁取り用（基本色＝落ち着いた金／lite＝ハイライト） */
  --az-gold:#D4AF37;
  --az-gold-lite:#F3D77A;
  /* ヘッダーロゴの高さ。ヘッダー高さ・ナビ高さ・下層ページの
     タイトル位置は、すべてこの値から計算する（下の --az-header-h）。
     ロゴは 396:70（=5.6635:1）の横長なので、110px にすると幅 623px になる。
     引く 1004px の内訳＝左右 padding 40 ＋ ロゴと社名の gap 16 ＋ 社名 238
     （17px・1行）＋ ナビ〜言語切替 694 ＋ 余裕 16。
     ※マークと社名の間隔はロゴ画像内に持たせている（2026-09-20 に +29px 拡張）。
     画面幅が足りない帯域では min()／calc() で自動的に縮める。
       min(100vw,1560px) … .header-inner の max-width:1560px に合わせた上限
       1004px            … ナビ＋検索＋言語＋社名＋左右パディングの実測値＋余裕 */
  --az-logo-h:min(110px, calc((min(100vw, 1560px) - 1004px) / 5.6635));
  --az-logo-pad:36px;                       /* ロゴ上下の余白（上下合計） */
  --az-header-h:calc(var(--az-logo-h) + var(--az-logo-pad));
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:100%;}
body{
  font-family:"Noto Sans JP","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--az-gray-text);background:#fff;font-size:16px;line-height:1.8;
}
:lang(zh){font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* === 日本語の改行ルール START ===========================================
   和文は既定だと文字と文字の間ならどこでも改行できるため、放っておくと
   「国際バルクコモディティー・石油事 / 業部」「非鉄材 / 料」のように
   語の途中で割れる。事業部名・カテゴリ名は PHP 側の azaeon_soft_wrap() で
   「・」「／」の直後・「ソリューション」の直前だけを区切りにした
   <span class="kw"> の並びとして出力し、ここでその塊を改行の最小単位にする。

   .kw … inline-block ＋ word-break:keep-all。塊ごと次の行に送られるので、
         「事業部」「ション」だけが 2 行目に落ちることがない。
         どうしても 1 行に収まらないときだけ overflow-wrap で逃がす
         （横はみ出しを起こさないための保険）。
   .nw … 人名・役職など、その場で切りたくない短い文字列用。
   ※ <wbr> は空要素なので閉じタグは書かないこと（</wbr> は不正なHTML）。 */
.kw{display:inline-block;word-break:keep-all;overflow-wrap:anywhere;}
.nw{white-space:nowrap;}
/* === 日本語の改行ルール END ============================================= */
/* 英字は Oswald で出す。子要素（.nw / .kw などの span）にも継承させること。
   :lang(zh) は子の span に「直接」当たるため、継承だけだと中国語版で
   入れ子部分（例: High-Performance）だけ Noto Sans SC になってしまう。 */
.en,.en *{font-family:"Oswald",Arial,"Helvetica Neue",sans-serif;}
.en{letter-spacing:.14em;}

/* header（赤×白基調） */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(var(--az-red-rgb),.8);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:background-color .3s;
}
header.is-scrolled{background:rgba(var(--az-red-dark-rgb),.94);}
.header-inner{max-width:1560px;margin:0 auto;padding:0 20px;height:var(--az-header-h);display:flex;align-items:center;justify-content:space-between;gap:28px;transition:height .3s ease;}
.header-right{display:flex;align-items:center;gap:18px;}
.logo{display:flex;align-items:center;gap:16px;}
.logo-img{height:var(--az-logo-h);width:auto;display:block;transition:height .3s ease;}
/* 社名：太字・白。以前は max-width:8em で 2 行に固定していたが、
   「エーズィー・イ／オン株式会社」と語の途中で割れるためクライアント指摘。
   white-space:nowrap で常に 1 行にする。
   1 行にすると 20px では 280px、17px では 238px 必要になる。ヘッダーの
   コンテンツ幅は最大 1520px（max-width:1560 − padding 40）しかなく、
   ロゴ 623px ＋ gap 16px ＋ ナビ側 694px を引くと 20px 版は入らないため、
   表示するときは 17px に落とす。17px でも入らない 1400px 以下では
   従来どおり非表示（下の 901〜1400px / 900px 以下のブロック）。 */
/* ヘッダー左の社名は 3 言語で同じ見え方にする。
   :lang(zh) の本文フォント（Noto Sans SC）が直接当たると中国語版だけ字形と太さが
   変わってしまうため、ここでフォントを明示して上書きする。
   高さ・ベースラインは .logo の align-items:center と line-height で揃う。 */
.logo .name{
  font-family:"Noto Sans JP","Noto Sans","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:17px;font-weight:700;color:#fff;letter-spacing:.08em;line-height:1.25;
  white-space:nowrap;align-self:center;
}
/* === LOGO PLAN START === */
/* ロゴ視認性：背景を敷かず、ロゴ自体に金の縁を付けて浮かせる。
   基本色 #D4AF37（--az-gold）を 1px ずつ 2 枚重ねて芯のある縁にし、
   その外側に #F3D77A（--az-gold-lite）を 2px 置いて金属のハイライトにする。
   最後に暗い影を 1 枚敷き、白背景・写真の上でも輪郭が残るようにする。
   縁は細く保つ（エンブレム内側の白い曲線が潰れないため）。
   社名は 8 方向の text-shadow（ぼかし 0）で縁取る。-webkit-text-stroke は
   グリフの内側を削って和文が痩せるため使わない。
   ※スマホ幅・スクロール後の調整はファイル末尾の「LOGO PLAN RESPONSIVE」ブロックで行う。 */
/* ロゴは絶対に潰さない。
   グローバルナビの横幅は言語で違う（EN の OUR BUSINESS が最も長い）ため、
   img{max-width:100%} が効くとロゴだけが横方向に縮み、高さ 110px のまま
   横だけ潰れて 3 言語でサイズが揃わなくなる（JP 623 / EN 578 / CN 608 で確認）。
   max-width:none と flex-shrink:0 で本来の縦横比（1784:315）を保つ。 */
.logo-img{flex-shrink:0;max-width:none;}
.logo{flex-shrink:0;}
.logo-img{
  filter:
    drop-shadow(0 0 1px var(--az-gold))
    drop-shadow(0 0 1px var(--az-gold))
    drop-shadow(0 0 2px var(--az-gold-lite))
    drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.logo .name{
  text-shadow:
    1px 0 0 var(--az-gold), -1px 0 0 var(--az-gold),
    0 1px 0 var(--az-gold), 0 -1px 0 var(--az-gold),
    1px 1px 0 var(--az-gold), -1px 1px 0 var(--az-gold),
    1px -1px 0 var(--az-gold), -1px -1px 0 var(--az-gold),
    0 0 3px var(--az-gold-lite),
    0 1px 4px rgba(0,0,0,.55);
}
/* === LOGO PLAN END === */
/* ここから下はヘッダーのグローバルナビ専用。セレクタは必ず header で始めること。
   素の nav ... で書くと footer.php の <nav class="foot-sitemap"> にも当たり、
   サイトマップが横一列の flex＋縦罫線になって「非鉄材 / 料」のように割れる。 */
header nav ul{display:flex;gap:0;list-style:none;}
header nav li{border-left:1px solid rgba(255,255,255,.25);}
header nav li:last-child{border-right:1px solid rgba(255,255,255,.25);}
header nav a{display:flex;align-items:center;height:var(--az-header-h);position:relative;font-size:20px;font-weight:700;letter-spacing:.08em;padding:0 16px;color:#fff;white-space:nowrap;transition:opacity .25s,height .3s ease,font-size .3s ease;}
header nav a:hover,header nav a:focus-visible{opacity:.7;}
header nav a.current::after{
  content:"";position:absolute;left:16px;right:16px;bottom:10px;height:2px;background:#fff;
}
.menu-btn{display:none;}

/* スクロール後：ヘッダーを縮小（大きさと閲覧の邪魔にならなさを両立）。
   --az-logo-h を差し替えるだけで、ヘッダー高さ・ナビ高さ・メニューの
   開始位置まで追従する。 */
header.is-scrolled{--az-logo-h:min(70px, calc((min(100vw, 1560px) - 1004px) / 5.6635));}
header.is-scrolled nav a{font-size:18px;}

/* 言語スイッチャー */
.lang-switch{display:flex;align-items:center;gap:14px;font-size:16px;letter-spacing:.06em;}
.lang-switch a{color:rgba(255,255,255,.6);transition:color .25s;}
.lang-switch a:hover,.lang-switch a:focus-visible{color:#fff;}
.lang-switch a.is-current{color:#fff;font-weight:700;border-bottom:1px solid #fff;padding-bottom:2px;}

/* WP管理者バー分のオフセット */
body.admin-bar header{top:32px;}
@media(max-width:782px){
  body.admin-bar header{top:46px;}
}

/* main visual */
.mv{position:relative;overflow:hidden;}
.mv img{
  width:100%;height:70vh;min-height:420px;object-fit:cover;
  animation:mvKenBurns 18s ease-out forwards;
  will-change:transform;
}
.mv .catch{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(var(--az-red-dark-rgb),.78));color:#fff;padding:70px 20px 26px;}
.mv .catch-inner{max-width:1560px;margin:0 auto;}
.mv .catch h1{
  font-size:clamp(20px,2.8vw,33px);font-weight:700;letter-spacing:.14em;text-shadow:0 1px 8px rgba(0,0,0,.5);
  opacity:0;transform:translateY(24px);
  animation:catchFadeUp .8s ease-out .3s forwards;
}
.mv .catch .sub{
  font-size:13px;letter-spacing:.28em;color:rgba(255,255,255,.85);margin-top:4px;font-weight:400;
  opacity:0;transform:translateY(24px);
  animation:catchFadeUp .8s ease-out .6s forwards;
}
@keyframes mvKenBurns{
  from{transform:scale(1.08);}
  to{transform:scale(1);}
}
@keyframes catchFadeUp{
  to{opacity:1;transform:translateY(0);}
}

/* マーキーストリップ */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;white-space:nowrap;background:#fff;
}
.marquee-track{
  display:inline-flex;width:max-content;
  animation:marqueeScroll 28s linear infinite;
  will-change:transform;
}
.marquee-item{display:inline-block;padding:14px 0;font-size:13px;letter-spacing:.12em;color:#c8cdd4;}
.marquee-item .dot{color:var(--az-red);padding:0 18px;}
@keyframes marqueeScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* 下層ページヘッダー（写真に赤グラデーションを重ねる） */
.page-header{position:relative;overflow:hidden;}
/* 固定ヘッダーが乗る分だけ写真を高くし、タイトルはヘッダーの下で中央に置く */
.page-header img{width:100%;height:calc(var(--az-header-h) + 150px);object-fit:cover;filter:brightness(.68);}
.page-header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(var(--az-red-dark-rgb),.6),rgba(var(--az-red-rgb),.68));
}
.page-header .txt{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;color:#fff;padding:var(--az-header-h) 20px 0;text-shadow:0 1px 6px rgba(0,0,0,.4);}
.page-header .en-title{font-size:35px;font-weight:700;letter-spacing:.26em;}
.page-header .ja{font-size:14px;letter-spacing:.2em;}
.breadcrumb{max-width:1100px;margin:0 auto;padding:14px 20px;font-size:12.5px;color:var(--gray);letter-spacing:.08em;}
.breadcrumb a:hover{color:var(--az-red);text-decoration:underline;}

/* 記事タイトル用ページヘッダー（NEWS個別：可変高さ・折返し前提） */
.page-header--article{overflow:visible;min-height:calc(var(--az-header-h) + 150px);}
.page-header--article img{position:absolute;inset:0;width:100%;height:100%;}
.page-header--article .txt{position:relative;inset:auto;z-index:1;padding:calc(var(--az-header-h) + 24px) 20px 40px;}
.page-header--article .post-title{
  font-size:clamp(16px,3.6vw,24px);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.6;
  max-width:760px;
  text-align:center;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}

/* services (top) */
.services{padding:0;}
.service{display:grid;grid-template-columns:420px 1fr;min-height:340px;border-bottom:1px solid var(--line);}
.service:nth-child(even){grid-template-columns:1fr 420px;}
.service:nth-child(even) .txt{order:2;}
.service .txt{display:flex;flex-direction:column;justify-content:center;padding:40px 44px;}
.service .num-line{display:flex;align-items:baseline;gap:14px;}
.service .num{font-size:16px;color:var(--gray);letter-spacing:.2em;font-weight:700;}
.service .en-name{font-size:33px;font-weight:700;letter-spacing:.1em;color:var(--az-gray-text);}
.service h2{font-size:18px;font-weight:700;letter-spacing:.12em;margin-top:6px;}
.service h2::after{content:"";display:block;width:36px;height:2px;background:var(--az-red);margin-top:14px;transition:width .4s;}
.service:hover h2::after{width:64px;}
.view-more{display:inline-block;margin-top:26px;font-size:12.5px;font-weight:700;letter-spacing:.24em;border:1px solid var(--az-red);background:var(--az-red);color:#fff;padding:12px 40px;align-self:flex-start;transition:background .25s,border-color .25s;}
.view-more:hover{background:var(--az-red-dark);border-color:var(--az-red-dark);}
.service .ph{position:relative;overflow:hidden;}
.service .ph img{width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:transform .5s,filter .5s;}
.service .ph::after{
  content:attr(data-en);
  position:absolute;right:16px;bottom:8px;
  font-family:"Oswald",Arial,sans-serif;
  font-size:44px;font-weight:700;letter-spacing:.04em;line-height:1;
  color:rgba(255,255,255,.28);
  transition:color .5s;
  pointer-events:none;
}
.service:hover .ph img{transform:scale(1.05);filter:brightness(1);}
.service:hover .ph::after{color:rgba(255,255,255,.55);}
.service:hover .view-more{background:var(--az-red-dark);border-color:var(--az-red-dark);}

/* stats band */
.stats{border-bottom:1px solid var(--line);}
.stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;}
.stat{text-align:center;padding:44px 20px;border-left:1px solid var(--line);}
.stat:first-child{border-left:none;}
.stat-num{display:block;font-family:"Oswald",Arial,sans-serif;font-size:clamp(26px,4vw,44px);font-weight:700;color:var(--az-red);letter-spacing:.02em;line-height:1;}
.stat-label{display:block;margin-top:12px;font-size:13px;letter-spacing:.18em;color:var(--gray);}
.stat-label-ja{display:block;margin-top:4px;font-size:12px;letter-spacing:.12em;color:var(--gray);}

/* wide banner（写真に赤グラデーションを重ねる） */
.wide-banner{position:relative;display:block;overflow:hidden;}
.wide-banner img{width:100%;height:300px;object-fit:cover;filter:brightness(.65);transition:filter .5s,transform .5s;}
.wide-banner:hover img{filter:brightness(.9);transform:scale(1.03);}
.wide-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(var(--az-red-dark-rgb),.58),rgba(var(--az-red-rgb),.66));
}
.wide-banner .txt{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:#fff;text-align:center;padding:0 20px;text-shadow:0 1px 6px rgba(0,0,0,.4);}
.wide-banner .en-title{font-size:32px;font-weight:700;letter-spacing:.26em;}
.wide-banner .ja{font-size:14px;letter-spacing:.2em;}
.wide-banner .vm{font-size:12px;letter-spacing:.26em;border:1px solid rgba(255,255,255,.8);padding:10px 34px;margin-top:12px;transition:background .25s;}
.wide-banner:hover .vm{background:rgba(255,255,255,.18);}

/* news */
.news{padding:64px 20px;}
.news .inner{max-width:1100px;margin:0 auto;}
.news--archive{padding:0;}
.news--archive .inner{max-width:none;}
.news .head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px;}
.news .head .en-title{font-size:32px;font-weight:700;letter-spacing:.18em;}
.news .head .ja-title{font-size:14px;color:var(--gray);letter-spacing:.16em;}
.news ul{list-style:none;border-top:1px solid var(--line);}
.news li{
  display:flex;gap:26px;align-items:baseline;
  padding:18px 6px 18px 8px;
  border-bottom:1px solid var(--line);font-size:16px;
  transition:background .25s,padding-left .25s;
}
.news li:hover{background:var(--az-red-pale);padding-left:18px;}
.news time{color:var(--gray);font-size:14px;white-space:nowrap;letter-spacing:.06em;}
/* ニュースのカテゴリ（お知らせ／プレスリリース／採用 など）。
   付いている投稿だけ日付の右に小さく出す。未分類は出さない。 */
.news-cat{
  display:inline-block;flex:0 0 auto;padding:3px 10px;border:1px solid var(--az-red);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--az-red);
  white-space:nowrap;border-radius:2px;
}
.news .cat-none{color:var(--gray);}
.news-single .date .news-cat{margin-left:10px;}
@media(max-width:600px){
  .news-cat{font-size:11px;padding:2px 8px;}
}
.news li:hover a{color:var(--az-red);text-decoration:underline;}
.news .all{margin-top:24px;text-align:center;}
.news .all a{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.24em;border:1px solid var(--az-red);background:var(--az-red);color:#fff;padding:12px 46px;transition:background .25s,border-color .25s;}
.news .all a:hover{background:var(--az-red-dark);border-color:var(--az-red-dark);}

/* CTA（写真に赤グラデーションを重ねる） */
.cta{display:grid;grid-template-columns:1fr 1fr;}
.cta a{position:relative;display:block;overflow:hidden;}
.cta a img{width:100%;height:250px;object-fit:cover;filter:brightness(.65);transition:filter .5s,transform .5s;}
.cta a:hover img{filter:brightness(.9);transform:scale(1.04);}
.cta a::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(var(--az-red-dark-rgb),.58),rgba(var(--az-red-rgb),.66));
}
.cta .txt{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4);}
.cta .en-title{font-size:26px;font-weight:700;letter-spacing:.24em;}
.cta .ja{font-size:14px;letter-spacing:.2em;}
.cta .vm{font-size:12px;letter-spacing:.26em;border:1px solid rgba(255,255,255,.8);padding:8px 28px;margin-top:10px;transition:background .25s;}
.cta a:hover .vm{background:rgba(255,255,255,.18);}

/* footer（深めの赤・白文字） */
footer{padding:52px 20px 24px;background:var(--az-red-dark);}
.foot-inner{max-width:1560px;margin:0 auto;text-align:center;}

/* footer サイトマップ */
.foot-sitemap{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;text-align:left;padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid rgba(255,255,255,.2);}
.foot-sitemap-title{display:block;padding:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.03em;line-height:1.5;color:#fff;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.25);transition:opacity .25s;}
.foot-sitemap-title:hover{opacity:.75;}
.foot-sitemap-title .ja{display:block;font-size:14px;font-weight:400;letter-spacing:.06em;color:rgba(255,255,255,.7);margin-top:3px;}
.foot-sitemap-col{min-width:0;}
.foot-sitemap-col ul{display:block;list-style:none;}
.foot-sitemap-col li{display:block;margin:6px 0;border:none;}
.foot-sitemap-col .cat-link{display:block;padding:0;font-size:14px;font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.72);transition:color .25s;word-break:normal;overflow-wrap:normal;line-break:strict;}
.foot-sitemap-col .cat-link:hover{color:#fff;}

/* PC(1200px以上)=5カラム / タブレット(768〜1199px)=3カラム / SP(767px以下)=1カラム縦積み */
@media(max-width:1199px){
  .foot-sitemap{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:767px){
  .foot-sitemap{grid-template-columns:repeat(1,1fr);gap:32px;}
}
.foot-logo{display:flex;justify-content:center;}
.footer-logo-img{height:36px;width:auto;}
/* 住所（トライセブンロッポンギ）が「トライ／セブンロッポンギ」と割れないよう、
   仮名の途中改行を止める。収まらないときだけ overflow-wrap で逃がす。 */
.foot-info{margin-top:16px;font-size:14px;color:rgba(255,255,255,.85);line-height:2;word-break:keep-all;overflow-wrap:anywhere;}
.foot-info a{color:#fff;}
.foot-links{margin-top:24px;display:flex;justify-content:center;gap:8px;list-style:none;flex-wrap:wrap;}
.foot-links li{padding:0 14px;border-right:1px solid rgba(255,255,255,.25);}
.foot-links li:last-child{border-right:none;}
.foot-links a{font-size:12.5px;letter-spacing:.16em;color:rgba(255,255,255,.85);}
.foot-links a:hover{color:#fff;}
.copy{margin-top:34px;font-size:12px;color:rgba(255,255,255,.68);letter-spacing:.1em;text-align:center;}

/* 下層共通 */
.content{max-width:1100px;margin:0 auto;padding:56px 20px 80px;}
/* index.php（404 のフォールバック）のようにページヘッダー無しで本文が始まる場合、
   固定ヘッダーの下に潜り込まないよう先頭に余白を足す */
header + .content{padding-top:calc(var(--az-header-h) + 56px);}
.sec-title{display:flex;align-items:baseline;gap:16px;margin-bottom:30px;}
.sec-title .en-title{font-size:30px;font-weight:700;letter-spacing:.18em;}
.sec-title .ja-title{font-size:14px;color:var(--gray);letter-spacing:.16em;}
.lead{font-size:16px;color:#444;margin-bottom:44px;line-height:1.9;}

/* company */
.greeting{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;margin-bottom:70px;}
.greeting .ph img{filter:brightness(.85);}
.greeting p{font-size:16px;color:#444;margin-bottom:1.2em;}
.greeting .sign{text-align:right;font-size:15px;font-weight:700;margin-top:10px;}
.company-table{width:100%;border-collapse:collapse;font-size:16px;}
.company-table th,.company-table td{border-bottom:1px solid var(--line);padding:18px 12px;text-align:left;vertical-align:top;}
/* 住所・社名などの固有名詞を語の途中で割らない（.foot-info と同じ考え方） */
.company-table td{word-break:keep-all;overflow-wrap:anywhere;}
.company-table th{width:200px;font-weight:700;letter-spacing:.1em;color:var(--az-gray-text);background:var(--az-red-pale);white-space:nowrap;}
/* アクセス行：駅ごとに 1 行。折り返したときの 2 行目は字下げして、
   スマホでも「どこからどこまでが 1 駅分か」が目で追えるようにする。 */
.access-cell .access-line{display:block;padding-left:1em;text-indent:-1em;}
.access-cell .access-line + .access-line{margin-top:6px;}
/* スマホ幅では 2 カラムだと本文側が狭くなりすぎ、事業部名が語の途中で割れる。
   見出しを上・内容を下の縦積みに切り替えて、どちらにも十分な幅を与える。 */
@media(max-width:600px){
  .company-table,.company-table tbody,.company-table tr,
  .company-table th,.company-table td{display:block;width:auto;}
  .company-table tr{border-bottom:1px solid var(--line);}
  .company-table th{border-bottom:none;padding:14px 12px 6px;}
  .company-table td{border-bottom:none;padding:0 12px 16px;}
}

/* services 下層 */
.service-detail{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);margin-bottom:44px;}
.service-detail .ph{overflow:hidden;max-height:520px;}
/* 縦長写真でも本文カラムが間延びしないよう高さを抑える */
@media(max-width:900px){.service-detail .ph{max-height:320px;}}
.service-detail .ph img{width:100%;height:100%;min-height:280px;object-fit:cover;filter:brightness(.62);transition:filter .5s,transform .5s;}
.service-detail:hover .ph img{filter:brightness(1);transform:scale(1.03);}
/* 縦長写真を 4:3 の枠に cover で収めるときの寄せ位置。
   既定の center だと被写体（床置きの機器）が下に切れるので、少し下寄りを中央にする。
   枠の大きさ・比率は共通指定のまま変えないこと。 */
.service-detail .ph img.is-lower-focus{object-position:center 55%;}
.service-detail .txt{padding:38px 40px;display:flex;flex-direction:column;justify-content:center;}
.service-detail .num-line{display:flex;align-items:baseline;gap:12px;}
.service-detail .num{font-size:15px;color:var(--gray);letter-spacing:.2em;font-weight:700;}
.service-detail .en-name{font-size:26px;font-weight:700;letter-spacing:.1em;}
.service-detail h2{font-size:17px;font-weight:700;letter-spacing:.12em;margin-top:4px;}
.service-detail h2::after{content:"";display:block;width:36px;height:2px;background:var(--az-red);margin-top:12px;transition:width .4s;}
.service-detail:hover h2::after{width:64px;}
.service-detail p{font-size:16px;color:#555;margin-top:14px;}

/* services 下層：詳細情報（取引先・製品ポートフォリオ・競争優位性） */
.service-extra{grid-column:1 / -1;padding:0 40px 40px;}
.service-extra h3{font-size:14px;font-weight:700;letter-spacing:.1em;margin-top:28px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.service-extra h3:first-child{margin-top:4px;}
.partner-list{font-size:15px;color:#555;letter-spacing:.04em;line-height:2;}
.tag-list{font-size:15px;color:#555;line-height:2.2;}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;}
.portfolio-grid h4{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--az-gray-text);margin-bottom:8px;}
.portfolio-grid ul{list-style:none;font-size:14px;color:#666;line-height:1.9;}
.col-list{list-style:none;columns:2;column-gap:32px;font-size:15px;color:#555;line-height:2.2;}
.advantage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;}
.advantage-grid h4{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--az-red);}
.advantage-grid p{font-size:14px;color:#555;margin-top:6px;}

/* services 下層：ブランド公式サイトへの誘導カード（beauty） */
.brand-links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.brand-link-card{border:1px solid var(--line);padding:22px 24px;display:flex;flex-direction:column;}
.brand-link-card h4{font-size:16px;font-weight:700;letter-spacing:.06em;}
.brand-link-card p{font-size:14px;color:#555;margin-top:10px;line-height:1.8;flex:1;}
.brand-link-card .view-more{margin-top:18px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:11.5px;padding:11px 24px;}
.brand-link-card .ext-icon{width:13px;height:13px;flex:none;}

/* services 下層：主要取扱コモディティ ギャラリー（commodities） */
.commodity-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.commodity-card{border:1px solid var(--line);overflow:hidden;}
.commodity-card img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:brightness(.92);transition:filter .4s,transform .4s;}
.commodity-card:hover img{filter:brightness(1);transform:scale(1.03);}
/* 白背景の製品写真（クライアント支給の IGBT 等）。
   枠の大きさ（4:3）は他の品目カードと同じまま、中身だけ contain にして
   被写体が切れないようにする。風景写真に掛けている暗さも外す。 */
.commodity-card img.is-cutout{object-fit:contain;background:#fff;padding:10px;filter:none;}
.commodity-card:hover img.is-cutout{filter:none;transform:none;}
/* 1 品目に写真が 2 枚あるとき（IGBT ウェハー＝ウェハーとチップ）。
   カード 1 枚ぶんの 4:3 の枠を横に 2 分割するので、他のカードと大きさは変わらない。 */
.commodity-card .commodity-ph-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  aspect-ratio:4/3;background:#fff;
}
.commodity-card .commodity-ph-pair img{
  width:100%;height:100%;aspect-ratio:auto;object-fit:cover;filter:brightness(.92);
}
.commodity-card .commodity-ph-pair.is-cutout img{object-fit:contain;background:#fff;padding:8px;filter:none;}
.commodity-card:hover .commodity-ph-pair.is-cutout img{filter:none;transform:none;}
.commodity-card figcaption{padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.04em;}
.commodity-card figcaption .en{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--gray);letter-spacing:.06em;}
@media(max-width:640px){
  .commodity-gallery{grid-template-columns:repeat(2,1fr);}
}

/* services 下層：グローバルソーシング図（commodities） */
.sourcing-diagram{margin:8px auto 0;max-width:700px;}
.sourcing-tier{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.sourcing-connector{width:1px;height:22px;background:var(--line);margin:0 auto;}
.sourcing-node{border:1px solid var(--line);padding:14px 18px;text-align:center;min-width:150px;flex:1;}
.sourcing-node .en{display:block;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--az-gray-text);}
.sourcing-node .sub{display:block;font-size:12.5px;color:var(--gray);margin-top:4px;}
.sourcing-node.hub{max-width:220px;margin:0 auto;background:var(--az-red);border-color:var(--az-red);}
.sourcing-node.hub .en{color:#fff;font-size:15px;}

/* services 下層：即納在庫体制などの補足ボックス */
.note-box{margin-top:24px;padding:16px 20px;background:var(--az-red-pale);border-left:2px solid var(--az-red);font-size:14px;color:#555;line-height:1.9;}
.note-box .en{letter-spacing:.1em;color:var(--az-red);font-size:12px;}

/* カテゴリ（第3階層）：取扱品目テーブル（簡易一覧・非構造化データ用） */
.product-table{width:100%;border-collapse:collapse;font-size:14px;}
.product-table td{padding:12px 4px;border-bottom:1px solid var(--line);color:#444;}
.product-table tr:first-child td{border-top:1px solid var(--line);}

/* カテゴリ冒頭のリード文 */
.category-lead{margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--line);}

/* カテゴリ（第3階層）：製品アコーディオン */
.product-accordion-list{border-top:1px solid var(--line);}
.product-accordion{border-bottom:1px solid var(--line);}
.product-accordion-trigger{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 4px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:inherit;transition:color .25s;
}
.product-accordion-trigger:hover{color:var(--az-red);}
.product-accordion-name{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.product-accordion-name .en{font-size:15px;font-weight:700;letter-spacing:.04em;}
.product-accordion-name .ja{font-size:14px;color:var(--gray);}
.accordion-icon{position:relative;flex:none;width:14px;height:14px;margin-left:16px;}
.accordion-icon::before,.accordion-icon::after{content:"";position:absolute;top:50%;left:50%;background:var(--az-gray-text);transition:transform .3s;}
.accordion-icon::before{width:14px;height:1.5px;transform:translate(-50%,-50%);}
.accordion-icon::after{width:1.5px;height:14px;transform:translate(-50%,-50%);}
.product-accordion-trigger[aria-expanded="true"] .accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}

.product-accordion-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.product-accordion-panel > .product-accordion-inner{overflow:hidden;}
.product-accordion.is-open .product-accordion-panel{grid-template-rows:1fr;}
.accordion-overview{font-size:16px;color:#555;padding:0 4px 14px;}
.accordion-meta{padding:0 4px 14px;font-size:14px;}
.accordion-meta dt{font-weight:700;letter-spacing:.06em;color:var(--az-gray-text);margin-top:8px;}
.accordion-meta dt:first-child{margin-top:0;}
.accordion-meta dd{color:#555;margin-top:3px;}
.tag-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px 18px;}
.tag-chip{font-size:12px;letter-spacing:.06em;color:var(--gray);border:1px solid var(--line);padding:4px 10px;}

.spec-disclaimer{margin-top:24px;font-size:13px;color:var(--gray);}

/* 事業部ページ：カテゴリ一覧カードナビ */
.category-nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.category-nav-card{display:block;border:1px solid var(--line);padding:20px 22px;transition:border-color .25s,background .25s;}
.category-nav-card:hover{border-color:var(--az-red);background:var(--az-red-pale);}
.category-nav-card .num{display:block;font-size:13px;color:var(--gray);letter-spacing:.15em;}
.category-nav-card .en-name{display:block;margin-top:6px;font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1.5;}
.category-nav-card .ja-name{display:block;margin-top:4px;font-size:13px;color:var(--gray);}
.category-nav-card .vm{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--az-red);}

/* カテゴリページ：同事業部内の他カテゴリ */
.sibling-categories{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);}
.sibling-list{list-style:none;border-top:1px solid var(--line);margin-bottom:28px;}
.sibling-list li{border-bottom:1px solid var(--line);}
.sibling-list a{display:flex;align-items:baseline;gap:14px;padding:16px 6px;font-size:15px;transition:color .25s,padding-left .25s;}
.sibling-list a:hover{color:var(--az-red);padding-left:10px;}
.sibling-list .num{font-size:13px;color:var(--gray);letter-spacing:.1em;}

/* services 下層：他の事業部ナビ */
.other-divisions{padding:70px 20px;background:var(--az-red-pale);border-top:1px solid var(--line);}
.other-divisions .sec-title{max-width:1100px;margin:0 auto 30px;}
.other-divisions-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.other-division-card{display:block;position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;transition:border-color .25s;}
.other-division-card:hover{border-color:var(--az-gray-text);}
.other-division-card img{width:100%;height:130px;object-fit:cover;filter:brightness(.62);transition:transform .5s,filter .5s;}
.other-division-card:hover img{transform:scale(1.05);filter:brightness(1);}
.other-division-card .num{position:absolute;top:10px;left:10px;color:#fff;font-size:13px;letter-spacing:.15em;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.other-division-card .en-name{display:block;padding:14px 14px 2px;font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1.5;}
.other-division-card .ja-name{display:block;padding:0 14px 16px;font-size:12px;color:var(--gray);}

/* services 下層：CONTACT CTA */
.service-cta{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:16px 20px 18px;}
.service-cta .en-title{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:.2em;color:var(--az-gray-text);}
.service-cta .ja{font-size:13px;line-height:1.6;color:var(--gray);}
.service-cta .vm{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:700;letter-spacing:.24em;border:1px solid var(--az-red);background:var(--az-red);color:#fff;padding:9px 32px;transition:background .25s,border-color .25s;}
.service-cta:hover .vm{background:var(--az-red-dark);border-color:var(--az-red-dark);}
.cta-mail{margin:-6px 0 22px;text-align:center;font-size:12.5px;letter-spacing:.04em;color:var(--gray);}
.cta-mail a{color:var(--gray);text-decoration:underline;transition:color .25s;}
.cta-mail a:hover{color:var(--az-red);}

/* contact */
.contact-form{max-width:720px;margin:0 auto;}
.form-row{margin-bottom:26px;}
.form-row label{display:block;font-size:15px;font-weight:700;letter-spacing:.1em;margin-bottom:8px;}
.form-row .req{font-size:11px;color:#fff;background:var(--az-red);padding:2px 8px;margin-left:10px;letter-spacing:.14em;vertical-align:middle;}
.form-row input,.form-row textarea{
  width:100%;border:1px solid var(--line);padding:13px 14px;font-size:16px;
  font-family:inherit;background:var(--az-red-pale);
}
.form-row input:focus,.form-row textarea:focus{outline:2px solid var(--az-red);background:#fff;}
.form-row textarea{min-height:180px;resize:vertical;}
.form-submit{text-align:center;margin-top:38px;}
.form-submit button,
.form-submit input[type="submit"]{
  font-size:13px;font-weight:700;letter-spacing:.26em;border:1px solid var(--az-red);
  background:var(--az-red);color:#fff;padding:15px 70px;cursor:pointer;transition:background .25s,border-color .25s;font-family:inherit;
}
.form-submit button:hover,
.form-submit input[type="submit"]:hover{background:var(--az-red-dark);border-color:var(--az-red-dark);}
.contact-note{font-size:14px;color:var(--gray);margin-bottom:34px;text-align:center;}
.contact-note a{color:var(--az-red);text-decoration:underline;}
/* お問い合わせページの所在地・アクセス。会社概要と同じ文言を中央寄せで出す。 */
.contact-address{
  max-width:720px;margin:0 auto 34px;padding:22px 20px;
  border:1px solid var(--line);background:var(--az-red-pale);text-align:center;
}
.contact-address p{margin:0;word-break:keep-all;overflow-wrap:anywhere;}
.contact-address-name{font-size:15px;font-weight:700;letter-spacing:.06em;}
.contact-address-line{font-size:14px;color:var(--gray);margin-top:6px!important;}
.contact-access{margin-top:14px!important;font-size:13px;color:var(--gray);}
.contact-access .access-label{
  display:block;font-weight:700;letter-spacing:.14em;color:var(--az-gray-text);margin-bottom:6px;
}
.contact-access .access-line{display:block;}
/* 英語版の住所も 1 行 1 要素で出す（.contact-access 以外にも効かせる） */
.contact-address-line .access-line{display:block;}
.contact-address-line .access-line + .access-line{margin-top:4px;}
.contact-access .access-line + .access-line{margin-top:4px;}

/* Contact Form 7 調整 */
.wpcf7-form-control-wrap{display:block;}
.wpcf7-not-valid-tip{color:#c0392b;font-size:13px;margin-top:6px;}
.wpcf7 .wpcf7-response-output{
  margin-top:26px;border:1px solid var(--line);padding:14px 18px;font-size:14px;text-align:center;
}
.wpcf7-mail-sent-ok{border-color:var(--az-gray-text)!important;color:var(--az-gray-text);}
.wpcf7-validation-errors,.wpcf7-mail-sent-ng{border-color:#c0392b!important;color:#c0392b;}
.wpcf7-spinner{margin:0 0 0 10px;}

/* タブレット横〜小型PC：ナビとの衝突回避 */
/* 901〜1400px：ロゴ・ナビ・社名の 3 つは並びきらない帯域。
   社名を隠し、空いた分をロゴに回す（ロゴ高さの計算式から社名の 160px を外す）。
   ナビの詰め（20px／padding 16px）は基本スタイル側に移したのでここでは触らない。 */
@media(min-width:901px) and (max-width:1400px){
  .logo .name{display:none;}
  .header-right{gap:16px;}
  /* 901px 付近は幅が足りないので下限を置かず、はみ出す前にロゴ側を縮める
     （max-width:100% で潰れて縦横比が崩れるのを避けるため、床は作らない） */
  :root{--az-logo-h:min(110px, calc((100vw - 745px) / 5.6635));}
  header.is-scrolled{--az-logo-h:min(70px, calc((100vw - 745px) / 5.6635));}
}

/* ハンバーガーメニュー */
@media(max-width:900px){
  .service,.service:nth-child(even){grid-template-columns:1fr;}
  .service:nth-child(even) .txt{order:0;}
  .service .ph img{height:230px;}
  .cta{grid-template-columns:1fr;}
  header nav{display:none;}
  .logo .name{display:none;}
  header nav.is-open{
    display:block;position:fixed;top:var(--az-header-h);left:0;right:0;
    /* header に backdrop-filter が掛かっているため、position:fixed の基準は
       ビューポートではなく header ボックスになる。bottom:0 だと
       「ヘッダーの高さ − ヘッダーの高さ」で高さ 0 になりメニューが出ないので、
       高さはビューポートから直接引いて出す（dvh 非対応ブラウザ向けに vh も残す）。 */
    height:calc(100vh - var(--az-header-h));
    height:calc(100dvh - var(--az-header-h));
    background:rgba(var(--az-red-dark-rgb),.96);backdrop-filter:blur(2px);
    z-index:99;overflow-y:auto;
    animation:navFadeIn .25s ease;
  }
  header nav.is-open ul{flex-direction:column;}
  header nav.is-open li{border-left:none;border-bottom:1px solid rgba(255,255,255,.15);}
  header nav.is-open li:last-child{border-right:none;}
  header nav.is-open a{display:block;height:auto;padding:22px 24px;font-size:19px;}
  header nav.is-open a.current::after{left:24px;right:auto;bottom:14px;width:20px;}
  .menu-btn{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;background:none;color:#fff;border:1px solid rgba(255,255,255,.5);padding:8px 16px;cursor:pointer;}
  .menu-btn.is-active{background:#fff;color:#000;border-color:#fff;}
  body.nav-open{overflow:hidden;}
  .service .txt{padding:30px 20px;}
  .greeting{grid-template-columns:1fr;}
  .service-detail{grid-template-columns:1fr;}
  /* 事業部名の日本語見出し。スマホ幅では字間を詰めて1行に収め、折り返すときは
     <wbr> を入れた意味の切れ目（「ブランド／ソリューション事業部」）で割る。
     keep-all で仮名の途中改行を止め、どうしても収まらないときだけ
     overflow-wrap で逃がす（はみ出し防止の保険）。 */
  .service-detail .txt h2{font-size:16px;letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere;}
  /* ヒーローの事業部名も同じ規則。こちらは1行に収まるので字送りは変えず、
     折り返す場合の位置だけ <wbr> の意味の切れ目に寄せる。 */
  .page-header .ja{word-break:keep-all;overflow-wrap:anywhere;}
  /* 「メールアドレス」が 2 行に割れないよう、狭い幅では見出し列を広げる
     （th 側の white-space:nowrap と合わせて最低幅を確保する） */
  .company-table th{width:150px;}
  .service .ph::after{font-size:32px;right:12px;bottom:6px;}
  .stats-inner{grid-template-columns:1fr;}
  .stat{border-left:none;border-top:1px solid var(--line);}
  .stat:first-child{border-top:none;}
  .service-extra{padding:0 20px 30px;}
  .col-list{columns:1;}
  .other-divisions-grid{grid-template-columns:repeat(2,1fr);}
  .sourcing-node{min-width:100%;}
}
/* iPhone SE 幅（320px）。事業部名をもう1段詰めて、「国際バルクコモディティー・」が
   割れて中黒が行頭に来るのを防ぐ。375px 以上には影響しない。 */
@media(max-width:374px){
  .service-detail .txt h2{font-size:15px;letter-spacing:0;}
}
@keyframes navFadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* スクロール出現（IntersectionObserverでis-visibleを付与） */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease-out,transform .8s ease-out;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition:none!important;
  }
}

/* WP調整 */
.wp-block-image img{height:auto;}
.news-single{max-width:800px;margin:0 auto;padding:56px 20px 80px;}
.news-single .date{color:var(--gray);font-size:14px;letter-spacing:.06em;}
.news-single .body{margin-top:30px;font-size:16px;color:#444;}
.news-single .body p{margin-bottom:1.4em;}
.back-link{display:inline-block;margin-top:40px;font-size:12.5px;font-weight:700;letter-spacing:.24em;border:1px solid var(--az-red);background:var(--az-red);color:#fff;padding:12px 40px;transition:background .25s,border-color .25s;}
.back-link:hover{background:var(--az-red-dark);border-color:var(--az-red-dark);}

/* privacy */
.privacy-content{max-width:900px;font-size:16px;}
.privacy-heading{font-size:17px;font-weight:700;letter-spacing:.08em;margin:34px 0 10px;}

/* AI コンシェルジュ */
.az-concierge-btn{
  position:fixed;right:24px;bottom:24px;z-index:200;
  display:flex;align-items:center;gap:9px;
  padding:14px 22px 14px 18px;border-radius:999px;
  background:var(--az-red);color:#fff;border:none;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  transition:background .25s,transform .25s;
}
.az-concierge-btn:hover{background:var(--az-red-dark);transform:translateY(-2px);}
.az-concierge-btn.is-active{background:var(--az-red-dark);}
.az-concierge-btn svg{width:17px;height:17px;flex:none;}
.az-concierge-btn .label{font-size:11px;font-weight:700;letter-spacing:.2em;}

.az-concierge-panel{
  position:fixed;right:24px;bottom:92px;z-index:201;
  width:360px;max-width:calc(100vw - 40px);height:520px;max-height:calc(100vh - 140px);
  background:#fff;border:1px solid var(--line);border-radius:6px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.18);
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.az-concierge-panel.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}

.az-concierge-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--az-red-dark);color:#fff;flex:none;}
.az-concierge-head .ttl{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;}
.az-concierge-head .sub{display:block;font-size:10.5px;color:#ddd;letter-spacing:.04em;margin-top:3px;}
.az-concierge-close{background:none;border:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:4px;}

.az-concierge-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.az-msg{max-width:86%;font-size:14.5px;line-height:1.75;padding:10px 13px;border:1px solid var(--line);white-space:pre-wrap;word-break:break-word;}
.az-msg.user{align-self:flex-end;background:var(--az-gray-text);color:#fff;border-color:var(--az-gray-text);}
.az-msg.bot{align-self:flex-start;background:var(--az-red-pale);color:var(--az-gray-text);}
.az-msg a{color:inherit;text-decoration:underline;}
.az-msg.error{border-color:#c0392b;color:#c0392b;background:#fff5f5;}

.az-concierge-typing{align-self:flex-start;padding:0 4px;}
.az-typing-dots{display:inline-flex;gap:4px;padding:10px 13px;}
.az-typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--gray);animation:az-typing-bounce 1.2s infinite ease-in-out;}
.az-typing-dots span:nth-child(2){animation-delay:.15s;}
.az-typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes az-typing-bounce{0%,80%,100%{opacity:.3;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}

.az-concierge-foot{flex:none;border-top:1px solid var(--line);padding:12px;display:flex;gap:8px;align-items:flex-end;}
.az-concierge-input{flex:1;resize:none;border:1px solid var(--line);padding:10px 12px;font-size:13px;font-family:inherit;max-height:80px;line-height:1.5;}
.az-concierge-input:focus{outline:none;border-color:var(--az-gray-text);}
.az-concierge-send{flex:none;border:1px solid var(--az-gray-text);background:none;padding:10px 16px;font-size:11px;font-weight:700;letter-spacing:.16em;cursor:pointer;transition:background .25s,color .25s;}
.az-concierge-send:hover:not(:disabled){background:var(--az-gray-text);color:#fff;}
.az-concierge-send:disabled{opacity:.35;cursor:not-allowed;}

@media(max-width:680px){
  .az-concierge-panel{right:0;left:0;bottom:0;top:0;width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;border:none;}
  .az-concierge-btn{right:16px;bottom:16px;padding:12px 18px 12px 14px;}
  .az-concierge-btn .label{font-size:10px;}
}

/* サイト内検索 */
.search-toggle{background:none;border:none;color:#fff;cursor:pointer;padding:10px;display:flex;align-items:center;transition:opacity .25s;}
.search-toggle:hover,.search-toggle.is-active{opacity:.7;}

.search-bar{max-height:0;overflow:hidden;background:rgba(var(--az-red-dark-rgb),.96);transition:max-height .35s ease;}
.search-bar.is-open{max-height:96px;}
.search-bar .site-search-form{max-width:1560px;margin:0 auto;padding:22px 20px;}

.site-search-form{display:flex;align-items:center;gap:14px;}
.site-search-input{
  flex:1;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.4);
  color:#fff;font-size:15px;font-family:inherit;padding:8px 2px;
}
.site-search-input::placeholder{color:rgba(255,255,255,.5);}
.site-search-input:focus{outline:none;border-bottom-color:#fff;}
.site-search-submit{background:none;border:1px solid rgba(255,255,255,.5);color:#fff;font-size:11px;font-weight:700;letter-spacing:.18em;padding:10px 20px;cursor:pointer;transition:background .25s,color .25s;white-space:nowrap;}
.site-search-submit:hover{background:#fff;color:#000;}

.nav-search{display:none;}

/* 検索結果ページ */
.search-results-head{font-size:14px;color:var(--gray);letter-spacing:.04em;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line);}
.search-results-head strong{color:var(--az-gray-text);font-weight:700;}

.search-results-list{list-style:none;}
.search-result-item{padding:26px 0;border-bottom:1px solid var(--line);}
.search-result-breadcrumb{font-size:12px;color:var(--gray);letter-spacing:.06em;margin-bottom:6px;}
.search-result-title{display:inline-block;font-size:17px;font-weight:700;letter-spacing:.02em;color:var(--az-gray-text);transition:color .25s;}
.search-result-title:hover{color:var(--az-red);text-decoration:underline;}
.search-result-excerpt{margin-top:8px;font-size:15px;color:#555;line-height:1.8;}

.search-no-results{padding:40px 0;text-align:center;}
.search-no-results-msg{font-size:16px;color:var(--az-gray-text);margin-bottom:36px;}
.search-popular{margin-bottom:36px;}
.search-popular-label{display:block;font-size:12px;letter-spacing:.14em;color:var(--gray);margin-bottom:14px;}
.search-popular ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.search-popular a{display:inline-block;font-size:13.5px;border:1px solid var(--line);padding:9px 18px;transition:border-color .25s,color .25s;}
.search-popular a:hover{border-color:var(--az-gray-text);color:var(--az-red);}

/* ページネーション（NEWS一覧・検索結果で共通利用） */
.pagination,.navigation.pagination{display:flex;justify-content:center;gap:6px;margin-top:40px;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;font-size:12.5px;border:1px solid var(--line);color:var(--az-gray-text);transition:background .25s,color .25s;}
.pagination .page-numbers.current{background:var(--az-gray-text);color:#fff;border-color:var(--az-gray-text);}
.pagination .page-numbers:not(.current):not(.dots):hover{border-color:var(--az-gray-text);}
.pagination .page-numbers.dots{border:none;}

@media(max-width:900px){
  .search-toggle,.search-bar{display:none;}
  .nav-search{display:block;padding:22px 24px 4px;}
  .nav-search .site-search-form{gap:10px;}
  .nav-search .site-search-input{border-bottom-color:rgba(255,255,255,.4);}
  .search-popular ul{gap:8px;}
}

/* 事業部の写真・見出しから事業部ページへ。ホバーで見出しが赤くなる */
.service-detail .division-ph{display:block;}
.division-link{display:block;}
.division-link .num-line{display:flex;align-items:baseline;gap:12px;}
.division-link h2,
.division-link .en-name,
.division-link .num{transition:color .25s;}
.division-link:hover h2,
.division-link:hover .en-name,
.division-link:focus-visible h2,
.division-link:focus-visible .en-name{color:var(--az-red);}
.division-link:focus-visible{outline:2px solid var(--az-red);outline-offset:4px;}

/* 英語ページだけ、同じ語が 2 度並ぶ小見出しを出さない（クライアント指示）。
   日本語・中国語では「英語の大見出し＋日本語(中国語)の小見出し」で意味があるので触らない。
   body.azaeon-en は functions.php の body_class フィルタで付けている。 */
.azaeon-en .sec-title .ja-title{display:none;}
.azaeon-en .cat-card-head .en-name{display:none;}
.azaeon-en .category-nav-card .ja-name{display:none;}
.azaeon-en .steel-group-head .en-name{display:none;}
/* 見出しと品目タグの間が空きすぎるのを詰める（英語版のみ） */
.azaeon-en .service-extra h3{margin-bottom:14px;}
.fuel-sub{display:block;margin-top:2px;font-size:11.5px;color:var(--gray);letter-spacing:.04em;}
/* 英語版の署名は氏名・役職・社名を 3 行で右寄せにする */
.sign--en{text-align:right;font-size:15px;font-weight:700;line-height:1.9;margin-top:10px;}
/* 英語版フォーム直前の必須項目の案内 */
.form-required-note{max-width:720px;margin:0 auto 12px;font-size:13.5px;color:var(--gray);text-align:center;}
/* ラベルと入力欄の間隔をそろえる */
.contact-form .form-row p{margin:0;}
.contact-form label{display:inline-block;margin-bottom:6px;}

/* === CATEGORY CARD START === */
/* /services/ のカテゴリカード：写真（左）＋リンク見出し＋品目タグ／一行説明 */
/* ★写真枠は「カードの高さ」から切り離し、ここ 1 か所だけで決める。
   以前は写真がセルいっぱいに広がる作りだったため、品目タグが 2 行になるカードだけ
   写真も大きくなっていた（2026-09-26 クライアント指摘）。
   いまは .cat-card-ph 自身が 280px × aspect-ratio 4/3 を持ち、カードの高さ・
   タグの行数・事業部にかかわらず必ず同じ大きさ・同じ位置に出る。
   カード個別に width / height / margin を当てる指定は絶対に足さないこと。
   （事業部ページ側のカード .category-nav-card .ph も 4:3・角丸 8px で揃えてある） */
.cat-card-list{display:grid;grid-auto-rows:1fr;gap:16px;}
.cat-card{
  display:grid;grid-template-columns:308px 1fr;
  border:1px solid var(--line);overflow:hidden;
  transition:border-color .25s;
}
.cat-card:hover{border-color:var(--az-red);}
.cat-card{min-height:238px;}
.cat-card-ph{
  display:block;overflow:hidden;background:#fff;grid-row:1 / span 2;
  align-self:start;justify-self:start;
  width:280px;aspect-ratio:4/3;margin:14px;border-radius:8px;
}
.cat-card-ph img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  filter:brightness(.62);transition:filter .5s,transform .5s;
}
.cat-card:hover .cat-card-ph img{filter:brightness(1);transform:scale(1.04);}
/* 白背景の製品写真のカードだけ、暗さ（brightness）を外す。
   白が灰色に沈んで汚れて見えるため。幅・高さ・aspect-ratio・object-fit・角丸は
   5 事業部で共通のまま変えないこと（枠の大きさは必ず揃える）。 */
.cat-card-ph.is-plain img{filter:none;background:#fff;}
.cat-card:hover .cat-card-ph.is-plain img{filter:none;}
.cat-card-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:16px 18px 10px;border-bottom:1px solid var(--line);
  transition:color .25s;
}
.cat-card-head .num{font-size:12px;font-weight:700;letter-spacing:.15em;color:var(--gray);transition:color .25s;}
.cat-card-head .ja-name{font-size:16px;font-weight:700;letter-spacing:.04em;transition:color .25s;}
.cat-card-head .en-name{font-size:11px;letter-spacing:.12em;color:var(--az-red);}
/* カード内のどこにホバーしても見出しが赤くなり、リンクだと分かるようにする */
.cat-card:hover .cat-card-head .ja-name,
.cat-card:hover .cat-card-head .num,
.cat-card-head:hover .ja-name,
.cat-card-head:focus-visible .ja-name{color:var(--az-red);}
.cat-card-head:focus-visible{outline:2px solid var(--az-red);outline-offset:-2px;}
.cat-card-body{grid-column:2;padding:12px 18px 6px;}
.cat-card-body .tag-chips{padding:0 0 10px;}
.cat-card-lead{font-size:14px;color:#555;line-height:1.9;padding-bottom:10px;}

/* /services/steel/ の区分見出し：サムネイル＋リンク */
.steel-table-head{align-items:center;}
.steel-head-ph{display:block;width:150px;flex:0 0 150px;overflow:hidden;background:#000;}
.steel-head-ph img{
  /* 鉄鋼ページは CATEGORIES を文字だけにしてある（同じ写真がページ内で 2 度出るのを
     避けるため azaeon_category_nav('steel', false)）。このサムネイルが実質の
     カテゴリ写真なので、他事業部のカード写真と同じ 4:3・角丸 8px に揃える。 */
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:8px;
  filter:brightness(.62);transition:filter .5s,transform .5s;
}
.steel-table-block:hover .steel-head-ph img{filter:brightness(1);transform:scale(1.04);}
.steel-head-link{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;transition:color .25s;}
.steel-head-link .num{color:var(--gray);transition:color .25s;}
.steel-head-link h4{transition:color .25s;}
.steel-table-block:hover .steel-head-link h4,
.steel-table-block:hover .steel-head-link .num,
.steel-head-link:hover h4,
.steel-head-link:focus-visible h4{color:var(--az-red);}
.steel-head-link:focus-visible{outline:2px solid var(--az-red);outline-offset:2px;}

/* 事業部ページの CATEGORIES グリッド：写真付き版。
   カード写真の見え方（幅・高さ・角丸・object-fit）は 5 事業部で必ず揃えること。
   以前は化粧品だけ .division-beauty 側で 4:3・角丸8px を上書きしていて、
   他の 4 事業部（16:10・角丸なし）と食い違っていた。共通ルールに一本化した。
   幅はグリッドが決め、高さは aspect-ratio が決めるので、
   カード個別に width / height を当てる指定は足さないこと。 */
.category-nav-grid.has-ph .category-nav-card{padding:0;display:flex;flex-direction:column;}
.category-nav-card .ph{display:block;overflow:hidden;background:#000;}
.category-nav-card .ph img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:8px;
  filter:brightness(.62);transition:filter .5s,transform .5s;
}
.category-nav-card:hover .ph img{filter:brightness(1);transform:scale(1.04);}
.category-nav-card .ph.is-plain img{filter:none;background:#fff;}
.category-nav-card:hover .ph.is-plain img{filter:none;}
.category-nav-grid.has-ph .category-nav-card .txt{display:block;padding:18px 20px 20px;}
.category-nav-card .txt .ja-name,
.category-nav-card .txt .en-name{transition:color .25s;}
.category-nav-card:hover .txt .ja-name{color:var(--az-red);}

@media(max-width:700px){
  .cat-card-list{grid-auto-rows:auto;}
  .cat-card{grid-template-columns:1fr;}
  .cat-card{min-height:0;}
  .cat-card-ph{grid-row:auto;width:auto;justify-self:stretch;aspect-ratio:4/3;margin:12px;}
  .cat-card-body{grid-column:auto;}
  .steel-table-head{align-items:flex-start;}
  .steel-head-ph{width:110px;flex:0 0 110px;}
}
/* === CATEGORY CARD END === */

/* === CLIENT ASSETS START === */
/* ブランドロゴ（支給PNG）と本文の並び */
.brand-logo-row{display:flex;align-items:flex-start;gap:20px;}
.brand-logo{width:104px;height:auto;flex-shrink:0;border:1px solid var(--line);}
.brand-logo-row .tag-list{margin:0;}

/* 製品特長の箇条書き（チラシ記載事項） */
.feature-list{list-style:none;margin:0 0 4px;}
.feature-list li{position:relative;padding:7px 0 7px 20px;font-size:15px;color:#555;line-height:1.85;border-bottom:1px solid var(--line);}
.feature-list li:first-child{border-top:1px solid var(--line);}
.feature-list li::before{content:"";position:absolute;left:4px;top:1.15em;width:6px;height:6px;background:var(--az-red);}

/* 取扱美容機器カード：機器は白背景の商品写真なので暗く落とさず等倍で見せる。
   支給写真は縦横比がバラバラ（横長バナー／縦長／ほぼ正方形）で、object-fit:contain
   だと 1 枚ずつ見えている大きさが変わってしまっていた。素材側を 4:3 に整えたうえで
   cover にし、3 枚が必ず同じ大きさで並ぶようにする。 */
.device-gallery .device-card img{aspect-ratio:4/3;object-fit:cover;background:#fff;filter:none;}
.device-gallery .device-card:hover img{transform:none;}
.device-card figcaption .desc{display:block;margin-top:6px;font-size:12.5px;font-weight:400;color:var(--gray);line-height:1.8;}

@media(max-width:700px){
  .brand-logo-row{flex-direction:column;gap:12px;}
  .brand-logo{width:88px;}
}
/* === CLIENT ASSETS END === */

/* === BEAUTY PHOTO SET START === */
/* 化粧品・ビューティーソリューション事業部の写真は、MACHIKO の写真（1.02:1）・
   カテゴリカード（16:10）・美容機器（4:3）と比率も角もバラバラだった。
   クライアント指示により「4:3・角丸 8px」に統一している。
   ※カテゴリカード（.category-nav-card .ph img）はサイト共通ルール側に移したので、
     ここでは事業部ページ本文の写真と美容機器カードだけを指定する。
     化粧品だけを狙った上書きを再び足さないこと（他事業部とズレる原因になる）。 */
.division-beauty .service-detail .ph img,
.device-gallery .device-card img{aspect-ratio:4/3;border-radius:8px;}

/* 本文横の写真はセルいっぱいに引き伸ばさず、4:3 のまま縦中央に置く */
.division-beauty .service-detail .ph{max-height:none;align-self:center;}
.division-beauty .service-detail .ph img{height:auto;min-height:0;}

/* MACHIKO の写真ブロックだけ、PC 幅で 32px 右に寄せる（意図的なオフセット）。
   スマホ幅は 1 カラムに積むので、シフトは掛けない。 */
@media(min-width:901px){
  .service-detail .ph.is-shifted{padding-left:32px;}
}
/* === BEAUTY PHOTO SET END === */

/* === BRAND / BEAUTY START === */
/* ブランド公式サイトへの大きな導線（赤ベタ・外部リンクアイコン付き） */
.official-site-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 44px;text-align:center;}
.official-site-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  background:var(--az-red);border:1px solid var(--az-red);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.18em;
  padding:20px 52px;min-width:min(420px,100%);
  box-shadow:0 4px 16px rgba(var(--az-red-rgb),.22);
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
}
.official-site-btn:hover,.official-site-btn:focus-visible{
  background:var(--az-red-dark);border-color:var(--az-red-dark);
  transform:translateY(-2px);box-shadow:0 8px 22px rgba(var(--az-red-rgb),.3);
}
.official-site-btn .ext-icon{width:19px;height:19px;flex-shrink:0;}
.official-site-url{font-size:12px;letter-spacing:.08em;color:var(--gray);}

/* 「すべて日本製」の帯（ヒーロー直下） */
.mij-band{background:var(--az-red);color:#fff;}
.mij-inner{
  max-width:1560px;margin:0 auto;padding:22px 20px;
  display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;text-align:center;
}
.mij-en{font-size:clamp(20px,3vw,32px);font-weight:700;letter-spacing:.22em;line-height:1.2;}
.mij-ja{font-size:15px;letter-spacing:.3em;padding-left:22px;border-left:1px solid rgba(255,255,255,.5);}

/* 競争優位性のうち 1 項目を強調する */
.advantage-grid .is-primary{
  background:var(--az-red-pale);border-left:3px solid var(--az-red);
  padding:16px 18px;margin:-16px -18px;
}
.advantage-grid .is-primary h4{font-size:16px;}

/* カテゴリページの補足写真 */
.category-sub-photo{margin-top:26px;}
.category-sub-photo img{width:100%;aspect-ratio:16/7;object-fit:cover;border:1px solid var(--line);}

@media(max-width:700px){
  .official-site-btn{width:100%;min-width:0;padding:17px 22px;font-size:13.5px;letter-spacing:.12em;gap:10px;}
  .mij-inner{gap:8px;padding:18px 16px;}
  .mij-ja{padding-left:0;border-left:none;font-size:13px;letter-spacing:.24em;}
  .advantage-grid .is-primary{margin:0;}
  .category-sub-photo img{aspect-ratio:4/3;}
}
/* === BRAND / BEAUTY END === */

/* === COMMODITIES START === */
/* エネルギー：FUEL LIST の取引条件（見出し＋値の 2 カラム） */
.trade-terms{list-style:none;border-top:1px solid var(--line);margin-bottom:26px;}
.trade-terms li{display:flex;gap:18px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px;}
.trade-terms .term-label{flex:0 0 150px;font-weight:700;letter-spacing:.06em;color:var(--az-gray-text);}
.trade-terms .term-value{flex:1;color:#555;}

/* FUEL LIST テーブル。列幅以外は鉄鋼の .spec-table を共用する。
   数量列（最小・最大）はクライアント指示で廃止し、「製品名｜英語名」の 2 列。 */
.fuel-table thead th:nth-child(2){width:46%;}

@media(max-width:700px){
  .trade-terms li{flex-direction:column;gap:2px;padding:10px 4px;}
  .trade-terms .term-label{flex:none;font-size:11.5px;letter-spacing:.1em;color:var(--az-red);}
  /* .spec-table のカード積み指定を共用するため、fuel-table 側の個別指定は不要 */
}
/* === COMMODITIES END === */

/* === STEEL TABLE / ANCHOR NAV START === */

/* 事業内容ページ：事業部アンカーナビ（html{scroll-behavior:smooth} でスムーズスクロール） */
.division-anchor-nav{margin:0 0 48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.division-anchor-nav ul{display:flex;flex-wrap:wrap;list-style:none;}
.division-anchor-nav li{flex:1 1 0;min-width:130px;border-left:1px solid var(--line);}
.division-anchor-nav li:first-child{border-left:none;}
.division-anchor-nav a{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 10px;transition:background .25s,color .25s;}
.division-anchor-nav a:hover,.division-anchor-nav a:focus-visible{background:var(--az-red-pale);color:var(--az-red);}
.division-anchor-nav .num{font-size:12px;font-weight:700;letter-spacing:.15em;color:var(--az-red);}
.division-anchor-nav .ja-name{font-size:14px;font-weight:700;letter-spacing:.06em;}
/* 固定ヘッダー（--az-header-h）にアンカー先が隠れないようにする */
.service-detail[id]{scroll-margin-top:calc(var(--az-header-h) + 16px);}

/* 事業内容ページ・鉄鋼セクション：4大区分＋品目名タグ */
.steel-group-list{display:flex;flex-direction:column;gap:16px;}
.steel-group{border:1px solid var(--line);padding:16px 18px 6px;}
.steel-group-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.steel-group-head .num{font-size:12px;font-weight:700;letter-spacing:.15em;color:var(--gray);}
.steel-group-head .ja-name{font-size:15px;font-weight:700;letter-spacing:.04em;}
.steel-group-head .en-name{font-size:11px;letter-spacing:.12em;color:var(--az-red);}
.steel-group .tag-chips{padding:0 0 10px;}

/* 事業部ページ：大区分ごとの見出し＋一覧表 */
.steel-table-block{margin-bottom:34px;}
.steel-table-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.steel-table-head .num{font-size:12px;font-weight:700;letter-spacing:.15em;color:var(--gray);}
.steel-table-head h4{font-size:16px;font-weight:700;letter-spacing:.06em;}
.steel-table-head .series{font-size:11px;letter-spacing:.12em;color:var(--az-red);}
.steel-table-head .to-category{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--az-red);border-bottom:1px solid currentColor;transition:opacity .25s;}
.steel-table-head .to-category:hover{opacity:.65;}

/* 「品種区分｜日本語名｜英語名｜規格」の一覧表（Excel の表構造をそのまま踏襲） */
.spec-table{width:100%;border-collapse:collapse;font-size:14px;}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
.spec-table thead th{background:var(--az-red-pale);font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--az-gray-text);white-space:nowrap;}
.spec-table th.series{width:170px;background:#fafafa;font-weight:700;font-size:13.5px;color:var(--az-gray-text);}
.spec-table th.series .ja{display:block;}
.spec-table th.series .en{display:block;margin-top:3px;font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--gray);}
.spec-table td.name-ja{color:#333;}
.spec-table td.name-en{color:#555;letter-spacing:.02em;}
.spec-table td.spec{color:var(--gray);font-size:13px;letter-spacing:.02em;}
.spec-table tbody tr:hover td{background:#fcfcfc;}

/* 一覧表ページは写真を持たないため 1 カラムで組む（同一ページ内での画像重複も回避） */
.service-detail.is-table{grid-template-columns:1fr;}
.service-detail.is-table .txt{padding-bottom:6px;}
.service-detail.is-table .service-extra h3:first-child{margin-top:18px;}
.series-code{margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--az-red);}

/* スマホ幅：横スクロールさせず、1行＝1カードに積み替える */
@media(max-width:700px){
  .division-anchor-nav li{flex:1 1 33%;min-width:0;border-bottom:1px solid var(--line);}
  .division-anchor-nav a{flex-direction:column;gap:2px;padding:12px 6px;}
  .division-anchor-nav .ja-name{font-size:12px;}
  .steel-table-head .to-category{margin-left:0;}

  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table td{display:block;width:auto;}
  .spec-table thead{display:none;}
  .spec-table th.series{display:none;}
  .spec-table tbody{margin-bottom:22px;}
  /* 品種区分は行ごとに繰り返さず、グループの見出しとして 1 回だけ出す */
  /* 品種区分を持たない表（FUEL LIST 等）では見出し行を出さない */
  .spec-table tbody:not([data-series]){margin-bottom:0;}
  .spec-table tbody:not([data-series])::before{display:none;}
  .spec-table tbody[data-series]::before{
    content:attr(data-series);
    display:block;margin-bottom:8px;padding-bottom:6px;
    border-bottom:1px solid var(--az-red);
    font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--az-red);
  }
  .spec-table tr{border:1px solid var(--line);padding:11px 14px;margin-bottom:8px;}
  .spec-table td{border:none;padding:3px 0;font-size:14px;}
  .spec-table td::before{
    content:attr(data-label);
    display:inline-block;width:5.5em;
    font-size:11px;letter-spacing:.06em;color:var(--gray);
  }
  .spec-table td.spec{font-size:13px;}
}
/* === STEEL TABLE / ANCHOR NAV END === */

/* === LOGO PLAN RESPONSIVE START === */
/* ハンバーガー帯（900px 以下）のロゴサイズ。
   ロゴタイプは 390:70 の横長で、52px にすると幅 290px になる。375px 幅では
   言語スイッチャー（JP/EN/CN）と MENU ボタンと並べられないため、
     ・言語スイッチャーと MENU を一段小さくして右側の占有幅を詰める
     ・残った幅からロゴ高さを逆算する（上限 52px）
   という形にした。480px 以上では上限の 52px に届く。
   ※375px でも 52px にするには、スマホだけロゴをエンブレム（logo-mark.png）
     だけに差し替えるか、ヘッダーを 2 段組みにする必要がある。 */
@media(max-width:900px){
  /* 168px＝左右パディング＋言語スイッチャー＋MENU＋すき間の実測値＋余裕 */
  :root{--az-logo-h:min(52px, calc((100vw - 168px) / 5.6635));}
  header.is-scrolled{--az-logo-h:min(44px, calc((100vw - 168px) / 5.6635));}
}
@media(max-width:480px){
  .header-inner{padding:0 10px;}
  .header-right{gap:10px;}
  .lang-switch{gap:9px;font-size:13px;}
  .menu-btn{padding:8px 10px;letter-spacing:.16em;}
  /* 小さいロゴでは縁がにじむので、重ねる枚数とぼかし半径を詰める */
  .logo-img{
    filter:
      drop-shadow(0 0 .5px var(--az-gold))
      drop-shadow(0 0 .5px var(--az-gold))
      drop-shadow(0 0 1.5px var(--az-gold-lite))
      drop-shadow(0 1px 3px rgba(0,0,0,.6));
  }
}
/* === LOGO PLAN RESPONSIVE END === */