/* matech-k デザイン（design-e.html 準拠、青メタリック×金アクセント） */

:root {
  --accent:      #2838A8;
  --accent-deep: #1E2B8A;
  --accent-mid:  #3549CF;
  --gold:        #F5C030;
  --text:        #1A1C28;
  --muted:       #5A6075;
  --faint:       #7A82A8;
  --bg-tint:     #EEF0FB;
  --line:        #DDE0F4;
  --ma-hero-h:   320px;	/* ヒーローの写真の高さ（見出しの重ね・スライドショー・No Image で共通） */
}
@media screen and (max-width: 767px) {
  :root { --ma-hero-h: 220px; }
}

* { box-sizing: border-box; }

img { max-width: 100%; height: auto; display: block; }

body {
  margin: 0;
  font-family: 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  line-height: 1.8;
  color: var(--text);
  background: #fff;
  overflow-x: clip;
}

main { max-width: 1200px; margin: 0 auto; padding: 0 40px 0; }

a { color: inherit; text-decoration: none; }

.ma-breadcrumb {
  padding: 12px 0 0;
  font-size: 13px;
}

.ma-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-light);
}

.ma-breadcrumb-item + .ma-breadcrumb-item::before {
  content: '›';
  margin: 0 6px;
  color: var(--border);
}

.ma-breadcrumb-link {
  color: var(--text-mid);
  text-decoration: none;
}

.ma-breadcrumb-link:hover {
  text-decoration: underline;
}

.ma-page-h1 {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-size: 36px;
  font-weight: 400;
  margin: 32px 0 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* h1をヒーロー画像に重ねて表示（画像のある下層ページ限定）。bloxの構造上
   h1と.ma-heroは兄弟要素のままなので、h1を写真の高さ（--ma-hero-h）ぶん
   引き伸ばし、負のmargin-bottomで.ma-heroを引き上げて重ねる。
   .ma-heroはposition:staticのままなので、h1にz-indexを与えるだけで
   自動的に手前に描画される */
.ma-page-h1:has(+ .ma-hero) {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: var(--ma-hero-h);
  margin: 0 0 calc(-1 * var(--ma-hero-h));
  padding: 0 32px 22px;
  border-bottom: none;
  line-height: 1.4;	/* 3行の見出し（galvano 等）の行間を詰める */
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.ma-block-h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 30px;
  font-weight: 400;
  margin: 40px 0 16px;
}

/* lab.htmlの見出し行用。現在マークアップ側は未使用だが再利用の可能性が
   あるため残置 */
.ma-case-widget-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.ma-case-widget-header .ma-block-h2 { margin: 40px 0 16px; }
.ma-case-widget-more {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.ma-case-widget-more:hover { color: var(--accent-deep); }

.ma-case-subcategory-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-deep);
  margin: 32px 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--accent);
}

/* 見出し無しで隣接するグループ同士が詰まって見えるのを防ぐ */
.ma-grid-row + .ma-grid-row {
  margin-top: 32px;
}

.ma-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.ma-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ma-logo { display: flex; align-items: center; gap: 12px; }
.ma-logo-img { height: 36px; flex-shrink: 0; }

.ma-logo-group {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #8082A0;
  display: block;
  margin-bottom: 1px;
}

.ma-logo-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: 0.03em;
  line-height: 1.15;
  display: block;
}

.ma-header-right { display: flex; align-items: center; gap: 2px; }

.header-cta {
  margin-left: 14px;
  background: var(--accent);
  color: #fff;
  padding: 9px 22px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* header/footerのホバー定義。レイアウトはdesign-e.html準拠のインライン
   styleで持たせ、:hoverだけここで補う */
.nav-link          { transition: color 0.15s; }
.nav-link:hover    { color: var(--accent-deep) !important; }

.header-cta        { transition: filter 0.18s, box-shadow 0.18s; }
.header-cta:hover  { filter: brightness(1.33);
                     box-shadow:
                       0 0 3px 2px rgba( 80,  80,  80, 0.95),
                       0 0 3px 3px rgba(220,  30,  10, 0.33),
                       0 0 3px 3px rgba(255, 210,  40, 0.33); }

.footer-link       { transition: color 0.15s; }
.footer-link:hover { color: #fff; }

/* design-e-config.yaml override: footer: で使用 */
.cta-btn           { transition: filter 0.2s, box-shadow 0.2s; }
.cta-btn:hover     { filter: brightness(1.16);
                     box-shadow: 0 0 12px 8px rgba(220, 220, 220, 0.30); }

.cta-phone         { transition: color 0.18s; }
.cta-phone:hover   { color: #fff !important; }

/* ボタン左のアイコン。maskとcurrentColorで色はボタンの文字色に追従させる。
   ::afterはレーザースキャン演出で使用済みのため::beforeを使う。
   既定は丸囲みの矢印、問い合わせ系は塗りつぶしの封筒、外部サイトへのリンクは丸囲みの外部リンクの印、
   本文に HTML で書くボタンとお知らせの添付（a.mk-btn）の PDF へのリンクは丸囲みの書類の印 */
.cta-btn,
[data-blox-link],
.ma-more-link,
:is(.ma-cell-text-text, .ma-news-file) a.mk-btn,
.footer-contact-btn {
  --mk-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='a'%3E%3Ccircle cx='12' cy='12' r='11.2' fill='%23fff'/%3E%3Cpath d='M7.6 12h8.2M13.1 8.7l3.3 3.3-3.3 3.3' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='24' height='24' fill='%23000' mask='url(%23a)'/%3E%3C/svg%3E");
}
.header-cta[href*="contact"],
.cta-btn[href*="contact"],
.footer-contact-btn[href*="contact"] {
  --mk-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
[data-blox-link][data-blox-external],
:is(.ma-cell-text-text, .ma-news-file) a.mk-btn[target="_blank"] {
  --mk-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='a'%3E%3Ccircle cx='12' cy='12' r='11.2' fill='%23fff'/%3E%3Cpath d='M11 7.6H8.6A1.6 1.6 0 0 0 7 9.2v6.2A1.6 1.6 0 0 0 8.6 17h6.2a1.6 1.6 0 0 0 1.6-1.6V13' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.4 6.8h4v4M17.2 7l-5.6 5.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='24' height='24' fill='%23000' mask='url(%23a)'/%3E%3C/svg%3E");
}
:is(.ma-cell-text-text, .ma-news-file) a.mk-btn:is([href$=".pdf"], [href*="mode=pdf"]) {
  --mk-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='a'%3E%3Ccircle cx='12' cy='12' r='11.2' fill='%23fff'/%3E%3Cpath d='M9 6.6h4.4l2.6 2.6v8.2H9z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M13.2 6.8v2.6h2.6M10.6 12.4h3.8M10.6 14.8h3.8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='24' height='24' fill='%23000' mask='url(%23a)'/%3E%3C/svg%3E");
}
.header-cta { display: inline-flex; align-items: center; gap: 7px; }
/* 「加工受付・お問い合わせ」。幅 1080px 以上は1行、それより狭い幅（ハンバーガーメニューになる
   768px まで）はメニューと並ばなくなるので「加工受付／お問い合わせ」の2行にする（2026-10-09） */
.header-cta-label { font-size: 12.5px; line-height: 1.3; letter-spacing: 0.04em; }
.header-cta-br { display: none; }
@media screen and (max-width: 1079px) {
  .header-cta:has(.header-cta-label) { padding: 6px 18px; }
  .header-cta-sep { display: none; }
  .header-cta-br { display: inline; }
}
.header-cta::before,
.cta-btn::before,
[data-blox-link]::before,
.ma-more-link::before,
:is(.ma-cell-text-text, .ma-news-file) a.mk-btn::before,
.footer-contact-btn::before {
  content: '';
  flex: none;
  width: 1.8em;
  height: 1.8em;
  background: currentColor;
  -webkit-mask: var(--mk-btn-icon) center / contain no-repeat;
  mask: var(--mk-btn-icon) center / contain no-repeat;
  order: -1;
}
/* 封筒は丸枠がないぶん大きく見えるので、丸囲みの矢印と印象が揃うよう少し小さく */
.header-cta[href*="contact"]::before,
.cta-btn[href*="contact"]::before,
.footer-contact-btn[href*="contact"]::before {
  width: 1.45em;
  height: 1.45em;
}

.header-cta,
.cta-btn,
[data-blox-link],
.ma-more-link,
:is(.ma-cell-text-text, .ma-news-file) a.mk-btn,
.footer-contact-btn {
  position: relative;
  overflow: hidden;
}

@keyframes ma-laser-scan {
  0%   { left: -20px; opacity: 1; }
  80%  { left: calc(100% + 20px); opacity: 1; }
  100% { left: calc(100% + 20px); opacity: 0; }
}

.header-cta::after,
.cta-btn::after,
[data-blox-link]::after,
.ma-more-link::after,
:is(.ma-cell-text-text, .ma-news-file) a.mk-btn::after,
.footer-contact-btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  width: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 1.0),
    transparent
  );
  filter: blur(1px);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}

.header-cta:hover::after,
.cta-btn:hover::after,
[data-blox-link]:hover::after,
.ma-more-link:hover::after,
:is(.ma-cell-text-text, .ma-news-file) a.mk-btn:hover::after,
.footer-contact-btn:hover::after {
  animation: ma-laser-scan 0.38s ease-out forwards;
}

.ma-laser-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 2px rgba(200, 200, 200, 0.8);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: ma-particle-fly 0.55s ease-out forwards;
  z-index: 2;
}

@keyframes ma-particle-fly {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.1); opacity: 0; }
}

.ma-nav { display: flex; align-items: center; }

.ma-nav-brand {
  font-weight: 700;
  color: var(--accent-deep);
  white-space: nowrap;
}

.ma-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.ma-nav-link {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--faint);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}

.ma-nav-link:hover { color: var(--accent-deep); }

.ma-nav-link-current { color: var(--text); }

/* 新着が一定期間あるときだけ表示する赤丸。件数は出さない */
.ma-nav-badge {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: #E0483C;
  vertical-align: super;
}

/* カード・一覧の各タイトル左に付ける「NEW」タグ。ma-nav-badgeと同じ判定
   期間・同系色 */
.ma-new-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #E0483C;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}

/* カテゴリバッジが直前にある一覧では先頭でなく末尾表示 */
.ma-new-badge--after {
  margin-right: 0;
  margin-left: 6px;
}

.ma-footer {
  position: relative;     /* anodized-darkより前面に描画するため */
  padding: 60px 0 32px;
  border-top: none;
  /* CTAとの継ぎ目の斜めカット。向きは--mk-cut-l/--mk-cut-r経由
     （design/matech-k.jsが交互パターンを継続して設定） */
  margin-top: -26px;
  clip-path: polygon(0% var(--mk-cut-l, 26px), 100% var(--mk-cut-r, 0px), 100% 100%, 0% 100%);
  background-color: #1A268A;
  background-image:
    repeating-linear-gradient(0deg, transparent 0px, rgba(255,255,255,0.055) 0.5px, rgba(255,255,255,0.02) 1px, rgba(0,0,20,0.04) 1.5px, transparent 2px, transparent 5px),
    linear-gradient(160deg, #14206A 0%, #2535A4 22%, #1A268A 44%, #283AB6 65%, #14206A 84%, #1C2890 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 -1px 0 rgba(0,0,0,0.18) inset;
}

.ma-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.ma-footer-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 28px;
}

/* ヘッダーの.ma-logoと同じくトップページへのリンク（260925） */
.ma-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  width: fit-content;
  text-decoration: none;
  transition: opacity 0.18s;
}
.ma-footer-logo:hover { opacity: 0.78; }

.ma-footer-logo-img { height: 34px; flex-shrink: 0; filter: brightness(0) invert(1); }

.ma-footer-logo-group {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(200,210,255,0.5);
  display: block;
  margin-bottom: 3px;
}

.ma-footer-logo-name {
  font-size: 16px;
  font-weight: 700;
  color: #EDF0FF;
  letter-spacing: 0.03em;
}

.ma-footer-address {
  font-size: 13px;
  line-height: 2.1;
  color: rgba(200,210,255,0.65);
  margin: 0 0 20px;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.ma-footer-copyright {
  font-size: 12px;
  color: rgba(180,190,255,0.45);
  display: block;
}

/* flex+min-widthだと長いテキストが列を押し出して意図せず折り返すためgrid化。
   列幅比は各列の項目の多さ・長さに応じて調整済み */
.ma-footer-sitemap {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr 2fr;
  gap: 24px;
}

.ma-footer-sitemap-title {
  display: block;
  min-height: 1.2em; /* 空の<span>は行ボックスが生成されず高さ0になるため保証 */
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #F5C030;
  margin-bottom: 12px;
  transition: color 0.15s;
}

a.ma-footer-sitemap-title:hover { color: #F8D060; }

.ma-footer-sitemap-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ma-footer-sitemap-col li { margin-bottom: 8px; }

.ma-footer-sitemap-col a {
  display: inline-block;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(200,210,255,0.65);
  transition: color 0.15s;
}

/* line-heightを明示しないと.ma-footer-sitemap-col aの1.6が勝り、ダミー
   タイトル<span>と高さがずれる */
.ma-footer-sitemap-col a.ma-footer-sitemap-title {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: #F5C030;
}

.ma-footer-sitemap-col a:hover { color: #EDF0FF; }

.ma-back-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ヒーローは写真だけを幅いっぱいに置く（2026-10-14、修正依頼1011「枠不要、画像を大きく」で
   紺の背景と余白をやめた） */
.ma-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  margin: 24px 0;
}

/* h1をヒーロー画像に重ねる場合（.ma-page-h1直後の.ma-hero）のみ、画像の
   下側だけに薄暗いグラデーションを重ねて、写真の内容によらず文字の
   可読性を確保する。高さは写真に合わせる（下に文が続くラボのヒーローでも写真の範囲だけ） */
.ma-page-h1 + .ma-hero {
  position: relative;
}
.ma-page-h1 + .ma-hero::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: var(--ma-hero-h);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.18) 45%, transparent 70%);
  pointer-events: none;
}

.ma-hero-image { color: rgba(237, 240, 255, 0.5); font-size: 14px; }

/* ヒーローのスライドショー（レーザ製品・レーザLab。design-e-config.yaml の override:）。
   写真を重ねてフェードで切り替える。高さは単写真のヒーローと同じ（--ma-hero-h）に固定し、
   見出しの重ね（.ma-page-h1:has(+ .ma-hero)）をそのまま使う */
.ma-hero-slides { position: relative; }
.ma-hero-slides-track {
  position: relative;
  width: 100%;
  height: var(--ma-hero-h);
  overflow: hidden;
}
.ma-hero-slides img.ma-hero-image {
  position: absolute;
  inset: 0;
  height: 100%;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.ma-hero-slides img.ma-hero-image.is-active { opacity: 1; }
/* 1枚ずつのスライド（レーザ製品は写真と製品名、レーザLab は写真と設備名。design-e-config.yaml の override:） */
.ma-hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
}
.ma-hero-slides .ma-hero-slide img.ma-hero-image { opacity: 1; transition: none; }
/* 写真は右から左へスライドする。待機中は右の外、表示中は枠内、出ていくときは左の外。
   待機中に戻るときは動かさない（transition は向かう先の状態のものが使われる） */
.ma-hero-slide-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateX(100%);
}
.ma-hero-slide.is-active .ma-hero-slide-media,
.ma-hero-slide.is-leaving .ma-hero-slide-media { transition: transform 0.8s ease; }
.ma-hero-slide.is-active .ma-hero-slide-media { transform: translateX(0); }
.ma-hero-slide.is-leaving .ma-hero-slide-media { transform: translateX(-100%); }
/* 製品名は写真の下の中央（暗いグラデーションの帯の中）。ページの見出しは左下に重ねたまま */
.ma-hero-slide-caption {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 1;	/* 見出し用の暗いグラデーション（.ma-page-h1 + .ma-hero::after）より手前 */
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-size: 24px;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.9s ease;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* 写真を切り抜かずに収めるスライド（ガルバノ。ヘッド全体を見せる）。余白は同じ写真をぼかして埋める */
.ma-hero-slide.is-active .ma-hero-slide-caption { opacity: 1; }
.ma-hero-slide-contain { overflow: hidden; }
.ma-hero-slide-bg {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  max-width: none;
  object-fit: cover;
  filter: blur(18px) brightness(0.85);
}
.ma-hero-slides .ma-hero-slide-contain img.ma-hero-image { object-fit: contain; }
@media screen and (max-width: 767px) {
  /* スマホは左下の見出しと重なるので右下に寄せる */
  .ma-hero-slide-caption { left: auto; right: 16px; bottom: 36px; transform: none; font-size: 15px; text-align: right; }
}
.ma-hero-dots {
  position: absolute;
  right: 16px;
  top: calc(var(--ma-hero-h) - 26px);
  z-index: 2;	/* 見出し用の暗いグラデーション（.ma-page-h1 + .ma-hero::after）より手前 */
  display: flex;
  gap: 8px;
}
.ma-hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.ma-hero-dot[aria-current="true"] { background: #fff; }
.ma-hero-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ma-hero-slides img.ma-hero-image,
  .ma-hero-slide .ma-hero-slide-media,
  .ma-hero-slide-caption { transition: none !important; }
}

/* ヒーローの写真の下に置く一文（レーザLab） */
.ma-hero-caption {
  position: relative;
  z-index: 1;
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  color: var(--text);
  font-weight: 400;
  margin: 0;
  max-width: 640px;
}

.ma-stats {
  background-color: #1A268A;
  background-image: linear-gradient(160deg, #14206A 0%, #2333A4 22%, #1A268A 44%, #2A3CB6 65%, #14206A 84%, #1C2890 100%);
  padding: 24px 0;
  margin-bottom: 24px;
}

.ma-stats-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.ma-stats-item { text-align: center; padding: 0 8px; }

.ma-stats-num {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #EDF0FF;
  line-height: 1.2;
}

.ma-stats-label {
  display: block;
  font-size: 11px;
  color: rgba(200, 210, 255, 0.7);
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.anodized-dark {
  /* main の max-width を突き破って全幅にする（.ma-page-cta と同じ手法） */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 50px 0 60px;
  position: relative;
  overflow: hidden;
  /* 直前セクションとの継ぎ目の斜めカット。向きは--mk-cut-l/--mk-cut-r経由
     （design/matech-k.js参照） */
  margin-top: -26px;
  clip-path: polygon(0% var(--mk-cut-l, 26px), 100% var(--mk-cut-r, 0px), 100% 100%, 0% 100%);
}

.ma-cta-glow {
  position: absolute;
  left: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(255,175,25,0.048) 0%, transparent 65%);
  pointer-events: none;
}

.ma-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.ma-cta-label-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.ma-gold-rule { display: block; width: 36px; height: 1px; background: rgba(245,192,48,0.4); }

.ma-cta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #F5C030;
}

.ma-cta-desc {
  font-size: 15px;
  color: var(--faint);
  margin: 0 auto 44px;
  max-width: 540px;
  line-height: 1.9;
}

.ma-cta-btns {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  padding: 16px 44px;
  border-radius: 2px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cta-phone {
  font-size: 22px;
  font-weight: 700;
  color: #EDF0FF;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ma-cta-phone-icon { color: #F5C030; }

.anodized-dark {
  background-color: #070C38;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent             0px,
      rgba(255,255,255,0.015) 0.5px,
      rgba(255,255,255,0.006) 1px,
      rgba(0,0,0,0.022)       1.5px,
      transparent             2px,
      transparent             8px
    ),
    linear-gradient(148deg,
      #050930 0%, #0B1248 25%, #060A34 50%,
      #0D1450 72%, #040828 100%);
}

/* カード・本文内リンクボタン。.ma-more-linkはblox管理外の動的テンプレート
 * （system/html/配下）用。data-blox-link属性はblox生成ページ専用のため
 * blox管理外ファイルには付けない方針（docs/phinagata.md参照） */
[data-blox-link],
.ma-more-link,
:is(.ma-cell-text-text, .ma-news-file) a.mk-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 16px auto 22px;
  padding: 7px 22px;
  background: var(--accent);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  transition: filter 0.18s, box-shadow 0.18s;
}

[data-blox-link]:hover,
.ma-more-link:hover,
:is(.ma-cell-text-text, .ma-news-file) a.mk-btn:hover {
  filter: brightness(1.33);
  box-shadow:
    0 0 3px 2px rgba( 80,  80,  80, 0.95),
    0 0 3px 3px rgba(220,  30,  10, 0.33),
    0 0 3px 3px rgba(255, 210,  40, 0.33);
}

/* トップページ以外の共通ページ末尾CTA。design-e-config.yaml override: cta:
   で挿入される。.anodized-darkより簡素な1行レイアウト */
.ma-page-cta {
  /* main の max-width を突き破って全幅にする */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: #070C38;
  background-image: linear-gradient(148deg, #050930 0%, #0B1248 25%, #060A34 50%, #0D1450 72%, #040828 100%);
  padding: 40px 24px;
  box-sizing: border-box;
  margin-top: -26px;
  clip-path: polygon(0% var(--mk-cut-l, 26px), 100% var(--mk-cut-r, 0px), 100% 100%, 0% 100%);
}

.ma-page-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  text-align: center;
}

.ma-page-cta-text {
  font-size: 16px;
  color: #EDF0FF;
  letter-spacing: 0.02em;
}
/* ページ名（{{title}}）の見出し用の改行（<br class="ma-br-h1">）は、帯の文では使わない */
.ma-page-cta-text br.ma-br-h1 { display: none; }

.ma-cta {
  background-color: #070C38;
  background-image: linear-gradient(148deg, #050930 0%, #0B1248 25%, #060A34 50%, #0D1450 72%, #040828 100%);
  color: #EDF0FF;
  text-align: center;
  padding: 56px 24px;
  margin: 24px 0;
}

.ma-cta-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 48px;
  font-weight: 400;
  color: #EDF0FF;
  margin: 0 0 18px;
  letter-spacing: 0.02em;
}

.ma-col,
.ma-grid,
.ma-steps {
  position: relative;
  /* z-index:autoのままだと内部の::before（z-index:-1、斜めカット背景）が
     親の重なり文脈まで抜けてしまい、DOM順によらず他の通常要素より必ず
     奥に描画される（ヒーロー写真の下に斜めカットが隠れる不具合の原因）。
     z-indexを明示してこの要素自体をスタッキングコンテキスト化する */
  z-index: 0;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* H1直後の最初のセクションは導入部として上下余白を控えめに */
.ma-page-h1 + .ma-col,
.ma-page-h1 + .ma-grid,
.ma-page-h1 + .ma-steps {
  padding-top: 10px;
  padding-bottom: 30px;
}

/* セクションのpadding-topが既に上の余白を作っているため、セクション内
   最初の子要素がh2の場合はmargin-topを打ち消す（二重の余白を防ぐ） */
.ma-col > .ma-block-h2:first-child,
.ma-grid > .ma-block-h2:first-child,
.ma-steps > .ma-block-h2:first-child {
  margin-top: 0;
}

/* 全セクションに full-bleed 背景。白/グレー交互、区切りは斜めカット。
   下端ではなく各セクションの上端だけをカットし、直前セクションに重ねる
   方式（下端側は後続要素に隠れて見えなくなるため使わない） */
.ma-col::before,
.ma-grid::before,
.ma-steps::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: 0;
  z-index: -1;
  /* 向き・角度はdesign/matech-k.jsがページ読み込み時に--mk-cut-l/--mk-cut-r
     （どちらかが0px、もう片方が16〜34pxのランダム値）を設定する。
     JS未実行時のフォールバックは既定の右上がり26px */
  clip-path: polygon(0% var(--mk-cut-l, 26px), 100% var(--mk-cut-r, 0px), 100% 100%, 0% 100%);
}

/* 奇数: 白 / 偶数: 中立グレー */
.ma-col:nth-of-type(odd)::before,
.ma-grid:nth-of-type(odd)::before,
.ma-steps:nth-of-type(odd)::before  { background: #ffffff; }

.ma-col:nth-of-type(even)::before,
.ma-grid:nth-of-type(even)::before,
.ma-steps:nth-of-type(even)::before { background: #F4F5F7; }

/* 角度の最大値(34px)を確実にカバーする重なり量。これより小さいと、
   角度が重なり量を超えた回だけ継ぎ目に隙間が見えてしまう */
:is(.ma-col, .ma-grid, .ma-steps) + :is(.ma-col, .ma-grid, .ma-steps) {
  margin-top: -36px;
}

.ma-steps { }

.ma-steps-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 72px;
}

.ma-steps-item { position: relative; text-align: center; max-width: 220px; padding: 0 12px; }

/* ステップ間の矢印（最後の項目には付けない）。軸＋矢じりをclip-pathで
   描画。モバイル（768px以下）は90度回転して下向きに切り替える */
.ma-steps-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 24px;
  right: -54px;
  width: 36px;
  height: 22px;
  background: var(--accent);
  opacity: 0.4;
  clip-path: polygon(0% 38%, 62% 38%, 62% 12%, 100% 50%, 62% 88%, 62% 62%, 0% 62%);
  transform: translateY(-50%);
}

.ma-steps-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
  box-shadow: 0 0 0 6px rgba(40, 56, 168, 0.12);
}

.ma-steps-title { display: block; font-weight: 700; margin-bottom: 6px; }

.ma-steps-text { display: block; font-size: 16px; color: var(--faint); }

/* レーザサービス「導入から運用までの流れ」（override: service_flow、
   design-e-config.yaml参照）。縦タイムライン＋右カラム写真 */
.ma-service-flow-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px 48px;
  align-items: start;
}

.ma-service-flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ma-service-flow-item {
  position: relative;
  margin-left: 24px;
  padding: 2px 0 48px 32px;
}

.ma-service-flow-item:last-child {
  padding-bottom: 0;
}

/* 番号バッジ間の矢印。top/bottom両方を指定しheightを省略することで、
   liの高さに応じて自動伸縮する */
.ma-service-flow-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -14px;
  top: 78px;    /* バッジ下端(48px)から30px */
  bottom: 30px; /* 次のバッジ上端から30px */
  width: 26px;
  background: rgba(40, 56, 168, 0.4);
  clip-path: polygon(38% 0%, 38% 62%, 12% 62%, 50% 100%, 88% 62%, 62% 62%, 62% 0%);
}

.ma-service-flow-num {
  position: absolute;
  top: 0;
  left: -25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 0 0 6px rgba(40, 56, 168, 0.12);
}

.ma-service-flow-title {
  margin: 0 0 8px;
  padding-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.ma-service-flow-detail {
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.ma-service-flow-photos {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ma-service-flow-photos .ma-noimage {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}

@media screen and (max-width: 768px) {
  .ma-service-flow-grid {
    grid-template-columns: 1fr;
  }
}

.ma-grid { }

.ma-grid-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* 加工事例（lab.html）のカード一覧は常に4カラム固定 */
.ma-case-grid .ma-grid-row {
  grid-template-columns: repeat(4, 1fr);
}

.ma-col { }

.ma-col-row {
  display: grid;
  gap: 32px;
  align-items: start;
  margin-bottom: 12px;
  grid-template-columns: repeat(var(--ma-col-total, 12), 1fr);
}

.ma-col-cell { grid-column: span var(--ma-col-span, 12); }

/* data-blox-cols / data-blox-span の実値をCSS変数として反映（12列グリッド） */
.ma-col[data-blox-cols="1"]  { --ma-col-total: 1; }
.ma-col[data-blox-cols="2"]  { --ma-col-total: 2; }
.ma-col[data-blox-cols="3"]  { --ma-col-total: 3; }
.ma-col[data-blox-cols="4"]  { --ma-col-total: 4; }
.ma-col[data-blox-cols="5"]  { --ma-col-total: 5; }
.ma-col[data-blox-cols="6"]  { --ma-col-total: 6; }
.ma-col[data-blox-cols="7"]  { --ma-col-total: 7; }
.ma-col[data-blox-cols="8"]  { --ma-col-total: 8; }
.ma-col[data-blox-cols="9"]  { --ma-col-total: 9; }
.ma-col[data-blox-cols="10"] { --ma-col-total: 10; }
.ma-col[data-blox-cols="11"] { --ma-col-total: 11; }
.ma-col[data-blox-cols="12"] { --ma-col-total: 12; }

.ma-col-cell[data-blox-span="1"]  { --ma-col-span: 1; }
.ma-col-cell[data-blox-span="2"]  { --ma-col-span: 2; }
.ma-col-cell[data-blox-span="3"]  { --ma-col-span: 3; }
.ma-col-cell[data-blox-span="4"]  { --ma-col-span: 4; }
.ma-col-cell[data-blox-span="5"]  { --ma-col-span: 5; }
.ma-col-cell[data-blox-span="6"]  { --ma-col-span: 6; }
.ma-col-cell[data-blox-span="7"]  { --ma-col-span: 7; }
.ma-col-cell[data-blox-span="8"]  { --ma-col-span: 8; }
.ma-col-cell[data-blox-span="9"]  { --ma-col-span: 9; }
.ma-col-cell[data-blox-span="10"] { --ma-col-span: 10; }
.ma-col-cell[data-blox-span="11"] { --ma-col-span: 11; }
.ma-col-cell[data-blox-span="12"] { --ma-col-span: 12; }

/* img/text ペアが複数row続くcolセクションで偶数行の配置を反転。
   rows[].title:（h3、.ma-col-rowと同階層の別要素）が挟まると:nth-child
   の数が狂うため、同じタグ(div)だけを数える:nth-of-typeを使う。
   説明の欄（本文・表のセル・写真の入っていない group）だけを先頭に出し、写真や幅いっぱいのセル（機種の表など）は HTML の順のまま。
   欄の選び方は :where で詳細度に数えず、互い違いにしない所（採用事例の一覧・拠点情報）の指定が勝つようにする */
.ma-col-row:nth-of-type(even) > :where(.ma-cell-text, .ma-cell-table, .ma-cell-group:not(:has(> .ma-cell-img))):not(:where([data-blox-span="12"])) { order: -1; }

/* 機種・保有設備の段（YAML のブロックの id: models / equipment）。1行が1機種・1装置なので、行の間に線を引く。
   線は前の行の下に引く。行の題（rows[].title、h3）が行の前に入るため */
:is(#models, #equipment) .ma-col-row:has(+ :is(.ma-col-row, .ma-col-row-title)) { margin-bottom: 0; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
:is(#models, #equipment) .ma-col-row + .ma-col-row { margin-top: 36px; }
:is(#models, #equipment) .ma-col-row + .ma-col-row-title { margin-top: 36px; }

/* 採用事例一覧・拠点情報は互い違いにせず画像/地図を常に左に固定 */
.ma-case-grid .ma-col-row:nth-of-type(even) > .ma-cell-text,
.ma-location-grid .ma-col-row:nth-of-type(even) > .ma-cell-text {
  order: initial;
}

/* 採用事例の一覧（article/prod.html）。小さな画像の右にタイトルと採用・導入機種を置き、2列に並べる。
   詳細ページと見分けがつくよう本文の抜粋は出さない（2026-10-13） */
.ma-case-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.ma-case-list .ma-block-h2 { grid-column: 1 / -1; }
.ma-case-list .ma-col-row {
  grid-template-columns: 180px 1fr;
  gap: 18px;
  margin: 0;
  padding: 20px 8px;
  border-bottom: 1px solid var(--line);
}
/* 1段目の2件の上にも線 */
.ma-case-list .ma-block-h2 + .ma-col-row,
.ma-case-list .ma-block-h2 + .ma-col-row + .ma-col-row { border-top: 1px solid var(--line); }
.ma-case-list .ma-col-cell { grid-column: auto; }
.ma-case-list img.ma-cell-img-image { box-shadow: none; border-radius: 6px; }
.ma-case-list .ma-cell-text-title { margin: 0 0 6px; font-size: 16px; }
.ma-case-list .ma-more-link { margin: 10px 0 0; }
.ma-case-model { margin: 0; font-size: 14px; color: var(--muted); }
/* 詳細ページ（article/show.html）ではタイトルの下に副題として */
.ma-news-title:has(+ .ma-case-model) { margin-bottom: 6px; }
.ma-news-title + .ma-case-model { margin-bottom: 16px; font-size: 15px; }
@media screen and (max-width: 767px) {
  .ma-case-list { display: block; }
  .ma-case-list .ma-block-h2 + .ma-col-row + .ma-col-row { border-top: 0; }
  .ma-case-list .ma-col-row { grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 4px; }
  .ma-case-list .ma-cell-text-title { font-size: 15px; }
}

.ma-cell-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 18px rgba(30, 43, 138, 0.08);
  overflow: hidden;
  transition: box-shadow 0.22s;
}
.ma-cell-card > * { flex-shrink: 0; }
/* 「詳しく見る」等のボタンはカードの下端にそろえる（文の量が違っても横に並ぶカードで高さが合う） */
.ma-cell-card > :is([data-blox-link], .ma-more-link) { margin-top: auto; }

/* 写真下端のフェード。<img>自体へのinset box-shadowは画像の描画に隠れて
   見えないため、親(.ma-cell-card)側に疑似要素で重ねる（ヒーロー画像と
   同じ手法）。aspect-ratioを画像と揃えて高さを追従させる。
   blox の aspect_ratio: は<img>側にCSS変数で出力されるため、ここからは参照できない。
   カードで比率を変える場合はこのフェードの高さがずれる点に注意 */
.ma-cell-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 3 / 2;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, transparent 30%);
  pointer-events: none;
}

.ma-cell-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 8px 28px rgba(30, 43, 138, 0.13);
}

.ma-cell-card-image,
.ma-cell-img-image {
  /* blox の aspect_ratio:（--blox-aspect）があればその比率、無ければ3:2 */
  aspect-ratio: var(--blox-aspect, 3 / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1E2B8A;
  background-image: linear-gradient(155deg, #162278 0%, #2535A0 28%, #1C2888 52%, #2838A8 73%, #162278 100%);
  color: rgba(200, 210, 255, 0.55);
  font-size: 13px;
}

img.ma-cell-card-image,
img.ma-cell-img-image {
  display: block;
  width: 100%;
  object-fit: cover;
}

img.ma-cell-img-image {
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 28px rgba(30, 43, 138, 0.12);
}

/* 記事詳細のメイン画像（article/show.html）。一覧はカードの高さを揃えるため
   3:2でトリミングするが、詳細は1件しか出ないので原寸比のまま見せる */
img.ma-article-image {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* 採用事例・加工事例カードの画像プレースホルダー（記事に画像未設定の場合。
   article/配下のPHPテンプレートがdiv要素に付与） */
.ma-noimage {
  flex-direction: column;
  gap: 10px;
  background-color: #EEF0FB;
  background-image: none;
}

.ma-noimage::before {
  content: '';
  width: 44px;
  height: 44px;
  background: url("../common/logo-mark.svg") center / contain no-repeat;
  opacity: 0.35;
}

.ma-noimage::after {
  content: 'No Image Available';
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8082A0;
}

/* blox の画像のない欄（画像があれば <img>、無ければ欄の名前を書いた <div>）も
   No Image の表示にそろえる。欄の名前の文字は隠す */
div.ma-cell-img-image,
div.ma-cell-card-image,
div.ma-hero-image {
  flex-direction: column;
  gap: 10px;
  background-color: #EEF0FB;
  background-image: none;
  font-size: 0;
}
/* No Image の箱は常に 3:2。aspect_ratio: auto（原寸比）の欄は、画像が無いと高さが中の文字の分しか無くなるため */
div.ma-cell-img-image,
div.ma-cell-card-image {
  aspect-ratio: 3 / 2;
}
div.ma-cell-img-image::before,
div.ma-cell-card-image::before,
div.ma-hero-image::before {
  content: '';
  width: 44px;
  height: 44px;
  background: url("../common/logo-mark.svg") center / contain no-repeat;
  opacity: 0.35;
}
div.ma-cell-img-image::after,
div.ma-cell-card-image::after,
div.ma-hero-image::after {
  content: 'No Image Available';
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8082A0;
}
/* ヒーローは写真に見出しを重ねる作りなので、画像のないときも同じ高さにする */
div.ma-hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ma-hero-h);
  /* 見出しを白で重ねるので、背景は紺のまま（ロゴと文字を明るくする） */
  background-color: #1E2B8A;
  background-image: linear-gradient(155deg, #162278 0%, #2535A0 28%, #1C2888 52%, #2838A8 73%, #162278 100%);
}
div.ma-hero-image::before { filter: brightness(0) invert(1); opacity: 0.3; }
div.ma-hero-image::after { color: rgba(200, 210, 255, 0.6); }

.ma-cell-img figure {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* 画像のキャプション。機種名などは写真の上の中央に置き、左右に黄色の短い線を付けて写真の題にする
   （HTML では写真の後ろ） */
.ma-cell-img figcaption {
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}
.ma-cell-img figcaption::before,
.ma-cell-img figcaption::after {
  content: "";
  flex: none;
  width: 1.2em;
  height: 2px;
  background: var(--gold);
}
/* 説明のキャプション（YAML でセルの id の末尾を -note にしたもの）は写真の下に、中央そろえ・マーカー（下の指定）で */
.ma-cell-img[id$="-note"] figcaption {
  order: 0;
  display: block;
  margin: 10px 0 0;
  text-align: center;
}
.ma-cell-img[id$="-note"] figcaption::before,
.ma-cell-img[id$="-note"] figcaption::after { content: none; }

/* GoogleMap埋め込み（about.html override: about_location: で使用） */
.ma-cell-map {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  border-radius: 8px;
}

img.ma-hero-image {
  display: block;
  width: 100%;
  height: var(--ma-hero-h);
  object-fit: cover;
}

/* products.htmlのヒーロー画像は銘板が上部寄りにあり、既定の中央クロップだと
   隠れるためこのスロットだけ上寄りに調整 */
img.ma-hero-image[data-blox-slot="products__hero1-image"] {
  object-position: center 30%;
}

/* カード内のカテゴリ・サブカテゴリバッジ（加工事例一覧、main/cases/）。
   カテゴリ＝機種系統／サブカテゴリ＝加工内容で色を分ける */
.ma-case-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 16px 0;
}
.ma-case-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ma-case-badge-category { background: var(--bg-tint); color: var(--accent-deep); }
.ma-case-badge-subcategory { background: #FBF0D9; color: #8A6710; }
.ma-case-badges + .ma-cell-card-title { margin-top: 8px; }

.ma-cell-card-title { font-size: 18px; font-weight: 700; margin: 16px 16px 6px; }

.ma-cell-card-text { font-size: 16px; color: var(--muted); margin: 0 16px 18px; }

/* kind: group（blox v2.3）。1つのセル枠に画像などを縦に積む。
   中の要素が詰まって見えるので間隔を空ける */
.ma-cell-group {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* 本文に HTML で書くボタン（a.mk-btn）の段落。1つの段落に複数書いたボタンは横に並べる。
   余白はほかの段落と同じく、最後の段落なら下を0にして行の側に任せる */
.ma-cell-text-text > p:has(> a.mk-btn) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 16px;
  row-gap: 12px;
  margin: 16px 0;
}
.ma-cell-text-text > p:has(> a.mk-btn):last-child { margin-bottom: 0; }
.ma-cell-text-text > p:has(> a.mk-btn) > a.mk-btn { margin: 0; }

.ma-cell-text-title,
.ma-news-body h3 {
  font-size: 20px;
  font-weight: 700;
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin-bottom: 8px;
}

/* rows[].title:（blox、画像+テキストのペア行全体の見出しh3） */
.ma-col-row-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin: 28px 0 14px;
}
.ma-block-h2 + .ma-col-row-title {
  margin-top: 0;
}

.ma-cell-text-text { font-size: 16px; color: var(--muted); }

/* 本文は div の中に <p> で段落化される（blox の Markdown サブセット）。
   段落間は p 既定の 1em より詰める */
.ma-cell-text-text > p,
.ma-cell-card-text > p { margin: 0 0 0.6em; }
.ma-cell-text-text > p:last-child,
.ma-cell-card-text > p:last-child { margin-bottom: 0; }
/* 本文の中の小見出し（Markdown の「#### 」。原稿の「■ 主な特徴」等）。印の ■ は CSS で付ける */
/* 表のセルの題（title:）は本文の見出しと同じ見た目 */
:is(.ma-cell-text-text > h4, .ma-cell-table-title, .ma-news-body h4) { margin: 1.2em 0 0.4em; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--text); }
.ma-cell-text-text > h4:first-child { margin-top: 0; }
.ma-cell-table-title { margin-top: 0; }
:is(.ma-cell-text-text > h4, .ma-cell-table-title, .ma-news-body h4)::before { content: ""; display: inline-block; box-sizing: border-box; width: 0.65em; height: 0.65em; margin: 0 0.55em 0 0.1em; border: 2px solid var(--gold); background: var(--accent); vertical-align: 0.05em; transform: rotate(45deg); }
/* 箇条書き（Markdown の「- 」）。段落と同じ間隔で詰める */
:is(.ma-cell-text-text, .ma-cell-card-text) > :is(ul, ol) { margin: 0 0 0.6em; padding-left: 1.5em; }
:is(.ma-cell-text-text, .ma-cell-card-text) > :is(ul, ol):last-child { margin-bottom: 0; }

/* 260928 段落頭の一字下げは、段落間の余白と区切りが二重になるため一旦外す（先方確認中）。
   戻す場合はこのコメントを外す。<br>を含む段落は「✔ …」等の列挙なので除外している
.ma-cell-text-text > p { text-indent: 1em; }
.ma-cell-text-text > p:has(br) { text-indent: 0; }
*/

/* 会社沿革（about.htmlのoverride）。日付の幅を揃えて本文の頭を整列する。
   狭い画面では2カラムだと本文が細くなるため、日付を上に載せた1カラムに畳む。
   日付列の右に縦罫を通し、各項目にドットを置いて年表らしく見せる */
.ma-history {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 22px;
  row-gap: 9px;
  margin: 0;
  font-size: 16px;
  color: var(--muted);
  /* dtの中身はinline-blockの箱なので、そのままだとddの素のテキストと
     ベースラインの取り方が食い違う。行ごとにベースラインで揃える */
  align-items: baseline;
}
/* 日付は0埋めせず「2011年8月」と自然に書き、桁合わせは組版側で行う
   （印刷物でアキを入れて揃えるのと同じ考え方） */
.ma-history-date {
  position: relative;
  white-space: nowrap;
  padding-right: 18px;
  color: var(--faint);
}
/* 縦罫。日付列の右端に1本通す。最初と最後は半分だけ描いて線の端を締める */
.ma-history-date::before {
  content: '';
  position: absolute;
  top: -9px;
  bottom: -9px;
  right: 3px;
  width: 1px;
  background: var(--line);
}
/* 年の変わり目はmargin-topを足しているので、その分も伸ばさないと線が途切れる */
.ma-history-newyear.ma-history-date::before { top: -19px; }
.ma-history-date:first-of-type::before { top: 0.75em; }
.ma-history-date:last-of-type::before  { bottom: auto; height: 0.75em; }
/* 各項目のドット。年が変わる行だけアクセント色で塗って塊の頭を示す */
.ma-history-date::after {
  content: '';
  position: absolute;
  top: 0.68em;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
}
.ma-history-newyear.ma-history-date::after {
  background: var(--accent);
  border-color: var(--accent);
}
/* 同じ年が続く行は年を伏せ、月だけを並べて年ごとの塊を作る */
.ma-history-y-repeat { visibility: hidden; }
/* 年が変わるところで余白を足し、時代の区切りを見せる */
.ma-history-newyear { margin-top: 10px; }
.ma-history-date:first-of-type,
.ma-history-body:first-of-type { margin-top: 0; }
/* 年は全項目が「4桁＋年」で文字数が同じなので、均等割りすれば数字の
   字幅差だけが吸収されて揃う。月は8月/11月と文字数が異なり、均等割りだと
   短い方の字間が開きすぎるため右揃えでアキを左に送る */
.ma-history-y {
  display: inline-block;
  width: 4.1em;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
}
.ma-history-m {
  display: inline-block;
  min-width: 2.4em;
  margin-left: 0.25em;
  text-align: right;
}
.ma-history-body { margin: 0; color: var(--text); }

@media screen and (max-width: 600px) {
  .ma-history { grid-template-columns: 1fr; row-gap: 0; }
  .ma-history-date {
    font-weight: 700;
    color: var(--text);
    margin-top: 14px;
    padding-right: 0;
  }
  .ma-history-date::before,
  .ma-history-date::after { display: none; }
  .ma-history-y-repeat { visibility: visible; }
  .ma-history-newyear { margin-top: 14px; }
  .ma-history-date:first-of-type { margin-top: 0; }
  .ma-history-body:first-of-type { margin-top: 0; }
}

.ma-cell-list-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.ma-cell-list-ul,
.ma-cell-list-ol { padding-left: 1.25em; color: var(--muted); font-size: 16px; }
/* 会社情報（about.html）。項目名の幅を内容に合わせて揃え、値の頭を整列する。
   狭い画面では項目名を上に載せた1カラムに畳む */
.ma-cell-list-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 28px;
  row-gap: 10px;
  margin: 0;
}
.ma-cell-list-dt { font-weight: 700; }
.ma-cell-list-dd { margin: 0; color: var(--muted); font-size: 16px; }

@media screen and (max-width: 600px) {
  .ma-cell-list-dl { grid-template-columns: 1fr; row-gap: 0; }
  .ma-cell-list-dt { margin-top: 14px; }
  .ma-cell-list-dt:first-of-type { margin-top: 0; }
}


/* トップページ お知らせ抜粋（罫線ありの通常テーブルより軽い一覧表示） */
.ma-page-news-list { list-style: none; margin: 0; padding: 0; }

.ma-page-news-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.ma-page-news-item:hover .ma-page-news-title { color: var(--accent); text-decoration: underline; }

.ma-page-news-date {
  flex-shrink: 0;
  width: 84px;
  font-size: 13px;
  color: var(--faint);
  letter-spacing: 0.02em;
}

.ma-page-news-category {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--bg-tint);
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.ma-page-news-title {
  font-size: 15px;
  color: var(--text);
}

.ma-form-row { margin-bottom: 16px; }
.ma-form-label,
.ma-form-checkbox-label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.ma-form-input-text,
.ma-form-input-email,
.ma-form-input-tel,
.ma-form-input-password,
.ma-form-input-file,
.ma-form-textarea,
.ma-form-select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  background: #fafbff;
}
.ma-form-checkbox-row,
.ma-form-radio-row { display: flex; flex-direction: column; gap: 6px; }
.ma-form-policy { margin: 0 0 16px; font-size: 14px; color: var(--muted); text-align: center; }
.ma-form-policy a { color: var(--accent); text-decoration: underline; }
.ma-form-buttons-row { display: flex; gap: 12px; justify-content: center; }
.ma-form-button {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: filter 0.18s;
}
.ma-form-button:hover { filter: brightness(1.12); }
.ma-form-button-ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.ma-form-button-ghost:hover { background: var(--accent); color: #fff; filter: none; }
/* 必須の印（現行サイトに合わせ「必須」のラベル。2026-10-09） */
.ma-form-required {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 2px;
  background: #C0392B;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: 0.1em;
}
/* お問い合わせページの電話・FAX */
.ma-contact-tel { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
.ma-contact-tel dt { font-weight: 700; }
.ma-contact-tel dd { margin: 0; }
.ma-form-hint { font-size: 14px; color: #666; margin: 6px 0 0; }
.ma-form-confirm-value { margin: 0; padding: 10px 12px; background: #fafbff; border: 1px solid var(--line); border-radius: 2px; font-size: 16px; }
.ma-form-error {
  background: #FDECEA;
  border: 1px solid #F5C6C0;
  color: #C0392B;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 16px;
}
.ma-form-error ul { margin: 0; padding-left: 1.2em; }

/* 加工事例一覧（main/cases/）の絞り込みフォーム。部品は既存の.ma-form-*系を
 * 流用し、ここでは横並びレイアウトのみ追加 */
.ma-case-filter {
  background: var(--bg-tint);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 24px;
}
.ma-case-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}
.ma-case-filter-field { flex: 1 1 200px; min-width: 160px; }
.ma-case-filter-field .ma-form-label { margin-bottom: 6px; }
.ma-case-filter-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ma-case-filter-submit { padding: 10px 28px; }
.ma-case-filter-reset { font-size: 14px; padding: 10px 20px; }
.ma-case-empty { padding: 24px 0; color: var(--muted); }
.ma-case-more { margin: 24px 0 0; text-align: center; }

.ma-index-list { list-style: none; margin: 0; padding: 0; }
.ma-index-item { margin-bottom: 10px; }
.ma-index-link { display: inline-flex; align-items: center; gap: 10px; }
.ma-index-link:hover { color: var(--accent-deep); }
.ma-index-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
}

.footer-contact-btn {
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(200, 210, 255, 0.55);
  transition: border-color 0.2s, color 0.2s;
}
.footer-contact-btn:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: #EDF0FF;
}

footer .ma-nav-link {
  color: rgba(200, 210, 255, 0.65);
  font-size: 13px;
  font-weight: 400;
}
footer .ma-nav-link:hover { color: #fff; }
footer .ma-nav-link-current { color: rgba(200, 210, 255, 0.9); font-weight: 700; }

.ma-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.ma-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--accent-deep);
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}

.ma-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ma-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.ma-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.ma-mobile-nav {
  display: none;
  padding: 0 20px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
}

.ma-mobile-nav.is-open {
  display: block;
}

.ma-mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ma-mobile-nav-list .ma-nav-link {
  display: block;
  padding: 14px 4px;
  font-size: 16px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.ma-mobile-nav-list .ma-nav-link:hover {
  color: var(--accent-deep);
}

.ma-mobile-cta {
  display: block;
  text-align: center;
  margin-top: 16px;
  background: var(--accent);
  color: #fff;
  padding: 12px 22px;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ヘッダーはメニュー5項目・会社名・ボタンが1行に並ぶ 1024px 以上でだけ横並びにし、
   それより狭い幅はハンバーガーメニューにする（768px だと 769〜1000px くらいで折り返して崩れていた。2026-10-09） */
@media screen and (max-width: 1023px) {
  .ma-header-right { display: none; }
  .ma-hamburger { display: flex; }
}

@media screen and (max-width: 768px) {
  main { padding: 0 20px 40px; }
  .ma-stats-row { flex-wrap: wrap; gap: 16px; }
  .ma-col-row { grid-template-columns: 1fr; }
  .ma-col-cell { grid-column: 1 / -1; }
  /* 1カラム化に伴い偶数行の左右反転を解除、出力順(画像→テキスト)で表示 */
  .ma-col-row:nth-of-type(even) > :where(.ma-cell-text, .ma-cell-table, .ma-cell-group:not(:has(> .ma-cell-img))):not(:where([data-blox-span="12"])) { order: initial; }
  /* 写真を積んだ group は枠を外し、機種などの写真・説明（表・ボタンを含む）・説明のキャプションの写真
     （id の末尾が -note）の順にする */
  .ma-col-row > .ma-cell-group:has(> .ma-cell-img) { display: contents; }
  .ma-col-row:has(> .ma-cell-group > .ma-cell-img) > :is(.ma-cell-text, .ma-cell-table, .ma-cell-group:not(:has(> .ma-cell-img))) { order: 1; }
  .ma-col-row > .ma-cell-group > .ma-cell-img[id$="-note"] { order: 2; }
  .ma-case-grid .ma-grid-row { grid-template-columns: repeat(2, 1fr); }
  .ma-footer-body { flex-direction: column; gap: 32px; }
  .ma-footer-sitemap { grid-template-columns: repeat(2, 1fr); }
  .ma-footer-inner { padding: 0 20px; }
  .ma-cta-inner { padding: 0 20px; }
  .ma-page-cta-inner { flex-direction: column; gap: 16px; }
  /* mainのpadding-bottom(40px)がCTA直後にそのまま白い隙間になるため打ち消す */
  .ma-page-cta,
  .anodized-dark { margin-bottom: -40px; }

  .ma-steps-row { flex-direction: column; align-items: center; }
  .ma-steps-item:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -54px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}

.ma-totop-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 90px;
  height: 90px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.ma-totop-container.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.ma-totop-btn {
  width: 60px;
  height: 60px;
  background-color: var(--accent);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(40, 56, 168, 0.3);
  transition: transform 0.2s, background-color 0.5s, color 0.3s, box-shadow 0.5s;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ma-totop-gauge {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.ma-totop-gauge circle {
  fill: none;
  stroke-linecap: round;
  transform-origin: 45px 45px;
}

.ma-totop-gauge-bg {
  stroke: var(--line);
  stroke-width: 4;
  opacity: 0;
}

/* 高速回転フェーズの発光・ぼかしレイヤー */
.ma-totop-gauge-blur {
  stroke: #00ff41;
  stroke-dasharray: 11 4 6 2 22 4 9 2 17 6;
  opacity: 0;
}

/* 充填フェーズはstroke-dashoffsetで充填量を制御 */
.ma-totop-gauge-main {
  stroke: #00ff41;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  opacity: 0;
}

.ma-totop-container.is-cooling .ma-totop-btn {
  transition: transform 0.2s, background-color 3s, color 2.5s, box-shadow 3s;
}

.ma-totop-laser {
  position: fixed;
  bottom: 75px;
  right: 74px;
  width: 3px;
  height: 0;
  background-color: var(--gold);
  box-shadow: 0 0 8px rgba(245, 192, 48, 0.8);
  z-index: 9998;
  pointer-events: none;
}

.ma-totop-laser.shoot {
  animation: ma-totop-beam 0.11s ease-out forwards;
}

@keyframes ma-totop-beam {
  0%   { height: 0; opacity: 1; }
  50%  { height: 100vh; opacity: 1; }
  100% { height: 100vh; opacity: 0; }
}

/* 事例（cases）のYouTube動画モーダル。system/html/cases/view.html内で
 * サムネイルを.ma-case-thumbでラップし、クリックで#ma-case-modalを開く。
 * 開閉・iframe制御はdesign/matech-k.js側 */
.ma-case-thumb {
  position: relative;
  cursor: pointer;
  display: block;
}

.ma-case-thumb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(10, 12, 40, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.85);
  transition: background 0.18s, transform 0.18s;
}

.ma-case-thumb::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% + 3px);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  z-index: 1;
  transition: border-color 0.18s;
}

.ma-case-thumb:hover::after {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.ma-case-thumb:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.ma-case-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ma-case-modal.is-open { display: flex; }

.ma-case-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 30, 0.88);
}

.ma-case-modal-body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
}

.ma-case-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.ma-case-modal-close:hover { background: var(--gold); color: var(--text); }

.ma-case-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ma-case-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 768px) {
  .ma-case-modal-close { top: -40px; width: 32px; height: 32px; font-size: 18px; }
}

@media print {
  .ma-case-thumb::after,
  .ma-case-thumb::before,
  .ma-case-modal {
    display: none !important;
  }
}

/* NEWS一覧・詳細（system/html/news/view.html・show.html）。
 * articleテーブル（type=1）を参照する動的ページ */
.ma-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ma-news-list-item { border-bottom: 1px solid var(--line); }
.ma-news-list-item:first-child { border-top: 1px solid var(--line); }

.ma-news-list-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  color: var(--text);
}
.ma-news-list-link:hover .ma-news-list-title { color: var(--accent); text-decoration: underline; }

.ma-news-list-date {
  flex: 0 0 auto;
  width: 6.5em;
  color: var(--muted);
  font-size: 14px;
}
.ma-news-list-category {
  flex: 0 0 auto;
  padding: 2px 12px;
  background: var(--bg-tint);
  border-radius: 999px;
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ma-news-list-title {
  flex: 1 1 240px;
  font-size: 16px;
}

@media screen and (max-width: 480px) {
  .ma-news-list-link { gap: 6px 10px; }
  .ma-news-list-date { width: auto; }
}

.ma-news-empty,
.ma-news-error {
  padding: 24px 12px;
  color: var(--muted);
  text-align: center;
}
.ma-news-error { color: #C0392B; }

.ma-pager { margin-top: 20px; }
.ma-pager-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.ma-pager-item a,
.ma-pager-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 14px;
}
.ma-pager-item a { color: var(--text); }
.ma-pager-item a:hover { background: var(--bg-tint); border-color: var(--accent); }
.ma-pager-item.is-current span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

.ma-news-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
}
.ma-news-meta-category {
  padding: 2px 12px;
  background: var(--bg-tint);
  border-radius: 999px;
  color: var(--accent-deep);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* お知らせカテゴリの色分け（1=トピックス 2=展示会 3=作ってみた）。
   .ma-news-meta-categoryは採用事例・加工事例の詳細ページとクラスを共有
   するため、data-type="1"（お知らせ）に限定する */
.ma-page-news-category[data-category="1"],
.ma-news-list-category[data-category="1"],
.ma-news-meta-category[data-type="1"][data-category="1"] {
  background: #FCE0C8;
  color: #B94A0A;
}
.ma-page-news-category[data-category="2"],
.ma-news-list-category[data-category="2"],
.ma-news-meta-category[data-type="1"][data-category="2"] {
  background: #FBF0D9;
  color: #8A6710;
}
/* 作ってみた動画（type=4。2026-10-09、お知らせのカテゴリ「作ってみた」から独立）。
   カテゴリ番号は1なので、上のトピックス（data-category="1"）より後ろに置いて上書きする */
.ma-page-news-category[data-type="4"],
.ma-news-list-category[data-type="4"],
.ma-news-meta-category[data-type="4"] {
  background: #DFF3EC;
  color: #157A5C;
}

.ma-news-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px;
}
.ma-news-image {
  display: block;
  max-width: 100%;
  margin-bottom: 16px;
}
.ma-news-body {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 24px;
}
/* 本文は Markdown を変換した HTML（system/inc/article_text.php） */
.ma-news-body > :first-child { margin-top: 0; }
.ma-news-body > :last-child { margin-bottom: 0; }
.ma-news-body p { margin: 0 0 1em; }
/* 見出しは ### から（# と ## は article_text.php で文字のまま表示） */
/* h3・h4 の見た目は本文の中見出し（.ma-cell-text-title）・小見出し（.ma-cell-text-text > h4）と共通 */
.ma-news-body h3 { line-height: 1.5; margin: 1.6em 0 0.6em; }
.ma-news-body h5,
.ma-news-body h6 { font-size: 16px; font-weight: 700; line-height: 1.5; margin: 1.6em 0 0.6em; }
.ma-news-body ul,
.ma-news-body ol { margin: 0 0 1em; padding-left: 1.5em; }
.ma-news-body a { color: var(--accent); text-decoration: underline; }
/* 表（仕様表など。お知らせの本文、ページの本文の Markdown の表、表のセル）。幅が足りない画面では表だけ横スクロール。
   欄（グリッドの項目）は既定で中身より縮まないので、表の幅で欄が画面からはみ出さないよう縮めてよいことにする */
.ma-col-cell { min-width: 0; }
:is(.ma-news-body, .ma-cell-text-text, .ma-cell-table) table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1em;
  line-height: 1.6;
}
:is(.ma-news-body, .ma-cell-text-text, .ma-cell-table) :is(th, td) { border: 1px solid var(--line); padding: 6px 12px; vertical-align: top; }
:is(.ma-news-body, .ma-cell-text-text, .ma-cell-table) th { background: var(--bg-tint); font-weight: 700; white-space: nowrap; }
/* 行見出し <th scope="row">（表のセルの row_headers: true、記事の本文の表の1列目）は左寄せ */
:is(.ma-news-body, .ma-cell-table) th[scope="row"] { text-align: left; }
/* 列の見出し（1行目）は行の見出しより濃くして見分ける */
:is(.ma-news-body, .ma-cell-text-text, .ma-cell-table) thead th { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--text); }
:is(.ma-news-body, .ma-cell-text-text, .ma-cell-table) th[scope="row"] { background: color-mix(in srgb, var(--bg-tint) 60%, #fff); }
.ma-cell-table table { margin-bottom: 0; }
.ma-cell-table { font-size: 16px; color: var(--muted); }

/* 一覧カードの本文の抜粋（サーバー側で約150字に切ったうえで、行数を揃える） */
.ma-article-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
/* 抜粋は Markdown を生かした HTML（article_excerpt_html）。一覧の中では見出しも本文と同じ大きさにし、
   段落・箇条書きの間は詰める */
.ma-article-excerpt :is(p, ul, ol, blockquote) { margin: 0; }
.ma-article-excerpt :is(h3, h4, h5, h6) { margin: 0; font-size: inherit; font-weight: 700; }
.ma-article-excerpt :is(ul, ol) { padding-left: 1.4em; }
.ma-article-excerpt blockquote { padding-left: .8em; border-left: 2px solid currentColor; }
.ma-article-excerpt hr { display: none; }

/* サブ画像（本文下に3カラムで並べる） */
.ma-subimage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
/* 枚数で列を変える（show.html の data-count）。1枚は2枚のときと同じ大きさで中央に */
.ma-subimage-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.ma-subimage-grid[data-count="1"] { grid-template-columns: calc((100% - 16px) / 2); justify-content: center; }
.ma-subimage-grid-item { margin: 0; }
.ma-subimage-grid-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;	/* 切り抜かずに枠へ収める（管理画面の表示と揃える。縦長は左右に余白） */
  border-radius: 2px;
}
/* キャプションの下半分に薄い色を敷く（マーカー風）。下線は文字の下に描かれるので、
   太くして文字側へずらすと行ごとにマーカーになる（要素を増やさずに済む） */
.ma-cell-img[id$="-note"] figcaption,
.ma-subimage-grid-caption {
  text-decoration-line: underline;
  text-decoration-color: rgba(245, 192, 48, 0.5);	/* color-mix 非対応のブラウザ用（--gold の 50%） */
  text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent);
  text-decoration-thickness: 0.4em;
  text-underline-offset: -0.15em;
  text-decoration-skip-ink: none;
}
.ma-subimage-grid-caption {	/* .ma-cell-img figcaption と揃える */
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  margin-top: 10px;
  text-align: center;
}
@media screen and (max-width: 600px) {
  .ma-subimage-grid,
  .ma-subimage-grid[data-count] { grid-template-columns: 1fr; }
}

/* 記事本文に付く参考リンク。内部・外部のどちらでも使うため記号は
   リンク（鎖）で共通にし、本文の直後に置いて浮かないようにする */
.ma-news-link {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ma-news-link-a {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}
.ma-news-link-a::before {
  content: '';
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.2em;
  background: currentColor;
  -webkit-mask: var(--mk-link-icon) center / contain no-repeat;
  mask: var(--mk-link-icon) center / contain no-repeat;
  --mk-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 13.7a4.6 4.6 0 0 0 6.5 0l3-3a4.6 4.6 0 1 0-6.5-6.5l-1.2 1.2'/%3E%3Cpath d='M13.7 10.3a4.6 4.6 0 0 0-6.5 0l-3 3a4.6 4.6 0 1 0 6.5 6.5l1.2-1.2'/%3E%3C/svg%3E");
}
.ma-news-link-a:hover { text-decoration: underline; }
/* 添付ファイル（PDF）。リンクと並ぶときは区切り線を1本にする */
.ma-news-link + .ma-news-link { margin-top: 8px; padding-top: 0; border-top: 0; }
.ma-news-file .ma-news-link-a::before {
  --mk-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

.ma-news-back { margin-top: 8px; }
.ma-news-back-link { color: var(--muted); }
.ma-news-back-link:hover { color: var(--accent); }

/* 印刷用スタイル（A4）。画面の見た目のまま印刷する（2026-10-15）。
 * 白黒・装飾なしの旧版は design/print-plain.css（読み込まない。戻すときはこのブロックと差し替える） */
@media print {
  /* 用紙の大きさは印刷する側で選ぶ（CSS で A4 に決めると、PDF を大きな用紙で作るときに中身が A4 の大きさで組まれる） */
  @page {
    margin: 8mm;
  }
  /* 背景の色・画像も印刷する */
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* PC の並び（幅1000px）で組み、用紙より広い分はブラウザの印刷画面に自動で縮めてもらう（倍率はデフォルトのまま）。
     自動の縮小には上限があり、1200px だと A4 で右が切れたため 1000px にしている。
     CSS の zoom で縮めると、文字の折り返しと枠の位置がずれて重なるため使わない */
  html { width: 1000px; }

  /* 紙では使わないもの（メニュー・トップへ戻る・お問い合わせの帯・フッターのリンク集など） */
  .ma-header-right,
  .ma-hamburger,
  .ma-mobile-nav,
  .ma-mobile-cta,
  .ma-totop-container,
  .ma-totop-laser,
  .ma-back-btn,
  .ma-page-cta,
  .ma-hero-dots,
  .ma-footer-sitemap,
  .footer-contact-btn {
    display: none !important;
  }
  .ma-header { position: static; }
  .anodized-dark { display: none !important; }	/* トップページのお問い合わせの帯 */

  /* 全幅に広げる部分は 100vw・calc(50% - 50vw) で幅を決めているが、印刷では vw が縮める前の
     用紙の幅になって合わない。main の左右の余白（40px）まで広げる形に置き換える */
  .ma-col::before,
  .ma-grid::before,
  .ma-steps::before {
    left: -40px;
    right: -40px;
  }
  /* セクションとフッターの斜めの区切りはやめて、まっすぐにする */
  .ma-col::before,
  .ma-grid::before,
  .ma-steps::before,
  .ma-footer {
    clip-path: none;
  }
  .ma-footer { margin-top: 0; }

  /* フッターはサイトマップを外した分、住所をロゴの右（サイトマップの位置）に置き、高さを詰める */
  .ma-footer { padding: 22px 0 14px; }
  .ma-footer-body {
    padding-bottom: 14px;
    margin-bottom: 12px;
  }
  .ma-footer-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .ma-footer-logo { margin-bottom: 0; }
  .ma-footer-address {
    margin: 0;
    line-height: 1.7;
    text-align: right;
  }
  main .d-hero {	/* top.css（後から読み込む）の .d-hero より強くする */
    width: auto;
    margin-left: -40px;
    margin-right: -40px;
  }

  /* 影は印刷すると濃い灰色の帯になり枠が重なって見えるので外す（細い枠線は残す） */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* ヒーローに重ねる白い文字は、影の代わりに下の暗いグラデーションで読ませる */
  .ma-page-h1:has(+ .ma-hero),
  .ma-hero-slide-caption {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  }

  /* ページの境目で切らない（小さい部品だけ。行やセクションごと送ると大きな空白ができる） */
  .ma-cell-card,
  .ma-cell-img,
  figure,
  img,
  .ma-news-list-item,
  tr {
    break-inside: avoid;
  }
  .ma-page-h1,
  .ma-block-h2,
  .ma-cell-text-title,
  .ma-cell-card-title {
    break-after: avoid;
  }

  /* スライドショーは表示中の1枚のまま（動きは止める） */
  .ma-hero-slides img.ma-hero-image,
  .ma-hero-slide-media,
  .ma-hero-slide-caption {
    transition: none !important;
  }
}

/* ================================================================
   404（ページが見つかりません）。design-e-config.yaml override: not_found
   ================================================================ */
.ma-404 {
  position: relative;
  overflow: hidden;
  padding: 64px 24px 110px;
  text-align: center;
  background: radial-gradient(ellipse 70% 60% at 50% 38%, var(--bg-tint) 0%, transparent 72%);
}
.ma-404-inner { max-width: 720px; margin: 0 auto; }

.ma-404-label-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.ma-404-rule { display: block; width: 36px; height: 1px; background: rgba(245,192,48,0.7); }
.ma-404-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

/* 大きな「404」。文字にグラデーションを掛け、レーザ光（.ma-404-beam）を走査させる */
.ma-404-code {
  position: relative;
  display: inline-block;
  margin: 12px 0 24px;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(104px, 24vw, 200px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: transparent;
  background: linear-gradient(160deg, var(--accent-mid) 0%, var(--accent) 45%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.ma-404-beam {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  box-shadow: 0 0 10px 2px rgba(245,192,48,0.55), 0 0 28px 6px rgba(255,120,30,0.22);
  animation: ma-404-scan 3.6s ease-in-out infinite;
}
@keyframes ma-404-scan {
  0%   { top: 12%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 88%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ma-404-beam { animation: none; top: 56%; }
}

.ma-404-title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: clamp(20px, 3.2vw, 28px);
  color: var(--text);
  margin: 0 0 16px;
}
.ma-404-desc {
  text-wrap: pretty;   /* 行末に1〜2文字だけ残らないように（非対応ブラウザは通常の折り返し） */
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  margin: 0 0 36px;
}

@media (max-width: 600px) {
  .ma-404 { padding: 44px 16px 80px; }
}

/* galvano MOPG の基板写真は資料の画像が小さい（225×185）ため、引き伸ばさず等倍で中央に置く。
   大きな元データが届いたらこの指定は外す */
img[data-blox-slot="galvano__mopg__cell1-2"] {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* 取り扱いメーカーのカードは3列（6社が3列×2段）。スマホは他のカードと同じく並べられるだけ */
@media screen and (min-width: 769px) {
  #makers .ma-grid-row { grid-template-columns: repeat(3, 1fr); }
}
/* レーザ製品のページの取り扱いメーカーのカードは、上の製品のカードと同じ幅 */
@media screen and (min-width: 769px) {
  #maker_band .ma-grid-row { grid-template-columns: repeat(4, 1fr); }
}

/* 取り扱いメーカーのカードの題のロゴ。表示する大きさは YAML の img の width・height 属性 */
.mk-maker-logo { display: block; max-width: 100%; height: auto; }