/* メディアナビ 共通スタイル(ひな形案 2026-11-03)
   考え方: スマートフォンの幅を基本に書き、広い画面で段を増やす。色と文字の大きさは下の変数だけで決める。 */
:root {
  --ink: #1c2230;        /* 本文の文字 */
  --muted: #5b6474;      /* 補足の文字 */
  --line: #e1e5eb;       /* 区切り線 */
  --bg: #ffffff;
  --tint: #f4f6f9;       /* 薄い背景の帯 */
  --accent: #0b5cad;     /* リンク・ボタン */
  --accent-ink: #ffffff;
  --alert: #c8102e;      /* 「重要」「新発売」など */
  --radius: 10px;
  --wrap: 1120px;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}

/* 要素への指定は、今のページの本文(.legacy の中。移し替え ②)には効かせない。:where で強さは 0 のまま */
:where(*:not(.legacy *)), :where(*:not(.legacy *))::before, :where(*:not(.legacy *))::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.8; color: var(--ink); background: var(--bg); }
:where(img:not(.legacy img)) { max-width: 100%; height: auto; display: block; }
:where(a:not(.legacy a)) { color: var(--accent); text-underline-offset: .2em; }
:where(a:not(.legacy a)):hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:where(h1, h2, h3, h4):where(:not(.legacy *)) { line-height: 1.4; text-wrap: balance; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; z-index: 100; background: #fff; padding: 8px; }

/* ヘッダー: 公式ロゴは画像のまま、余白と配置だけを調整する。 */
:root { --header-height: 60px; }  /* 11/8 ロゴを小さく(デザイン担当の案)。前は 72px */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: var(--wrap); height: calc(var(--header-height) - 1px); margin: 0 auto; padding-inline: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 44px; text-decoration: none; }
.brand__image { display: block; width: 168px; max-width: 100%; height: auto; }
.brand--footer { justify-self: start; margin-bottom: 4px; }
.brand--footer .brand__image { width: 168px; }
.nav-toggle { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; position: relative; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { position: absolute; left: 11px; width: 20px; height: 2px; background: var(--ink); content: ""; transition: transform .2s; }
.nav-toggle__bar { top: 21px; } .nav-toggle__bar::before { left: 0; top: -6px; } .nav-toggle__bar::after { left: 0; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }
.global-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 8px 16px rgba(0,0,0,.06); }
.global-nav.is-open { display: block; }
.global-nav ul { list-style: none; margin: 0; padding: 8px 16px 16px; }
.global-nav a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.global-nav a[aria-current="page"] { color: var(--accent); }
.global-nav__shop a { color: var(--accent); }
@media (min-width: 1100px) {
  :root { --header-height: 80px; }
  .site-header .brand { flex-shrink: 0; }
  .site-header .brand__image { width: 208px; }
  .brand--footer .brand__image { width: 224px; }
  .nav-toggle { display: none; }
  .global-nav { display: block; position: static; border: 0; box-shadow: none; background: none; }
  .global-nav ul { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 0; }
  .global-nav a { white-space: nowrap; border: 0; padding: 10px 10px; border-radius: 6px; font-size: 15px; }
  .global-nav a:hover { background: var(--tint); }
  .global-nav__shop a { border: 1px solid var(--accent); }
}

/* パンくず */
.breadcrumb ol { max-width: var(--wrap); margin: 0 auto; padding: 10px 16px; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin: 0 8px; color: var(--muted); }
.breadcrumb a { color: var(--muted); text-decoration: underline; }
/* お問い合わせフォームのページが読み込む Bootstrap の .breadcrumb(灰色の帯)を打ち消す */
nav.breadcrumb { display: block; margin: 0; padding: 0; background: none; border-radius: 0; }

/* 共通の部品 */
.section { padding-block: 40px; }
.section--tint { background: var(--tint); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section__head h2 { margin: 0; font-size: 22px; }
.more { font-size: 14px; white-space: nowrap; }
.tag { display: inline-block; justify-self: start; font-size: 12px; font-weight: 700; color: var(--accent); background: #e8f0fa; border-radius: 999px; padding: 2px 10px; }
.label { display: inline-block; justify-self: start; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 8px; white-space: nowrap; }
.label--alert { color: #fff; background: var(--alert); }
.label--plain { color: var(--muted); background: var(--tint); border: 1px solid var(--line); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--accent); color: var(--accent); font-weight: 700; text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }

/* トップ: 注目の製品 */
.hero { padding-block: 24px 32px; background: linear-gradient(180deg, var(--tint), #fff); }
.hero__title { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--muted); }
.feature-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.feature-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.feature-card img { aspect-ratio: 800 / 306; object-fit: cover; width: 100%; }
.feature-card__body { display: grid; gap: 6px; padding: 14px 16px 18px; }
.feature-card__name { font-size: 18px; line-height: 1.4; }
.feature-card__catch { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* お知らせ */
.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news-list li { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.news-list time { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.news-list a, .news-list span:last-child { min-width: 0; }
@media (max-width: 599px) { .news-list li { grid-template-columns: auto 1fr; } .news-list li > :last-child { grid-column: 1 / -1; } }

/* 製品をさがす */
.group-title { font-size: 17px; margin: 24px 0 12px; padding-left: 10px; border-left: 4px solid var(--accent); }
.cat-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.cat-card h4 { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.cat-card ul { list-style: none; margin: 0; padding: 0; }
.cat-card li { padding: 3px 0; line-height: 1.5; }

.two-col { display: grid; gap: 32px; }
@media (min-width: 840px) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col h2 { font-size: 22px; margin: 0 0 12px; }
.link-list, .shop-list { list-style: none; margin: 0; padding: 0; }
.link-list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
.shop-list { display: grid; gap: 12px; }
.shop-list a { display: grid; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.shop-list span { font-size: 14px; color: var(--muted); }

/* 製品ページ */
.product-head { background: var(--tint); padding-top: 20px; }
.product-head__cat { margin: 0; font-size: 13px; color: var(--muted); }
.product-head h1 { margin: 4px 0 6px; font-size: 28px; }
.product-head__kana { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.product-head__catch { margin: 0; font-size: 17px; font-weight: 700; }
.product-head__release { margin: 4px 0 0; font-size: 14px; color: var(--alert); font-weight: 700; }
.product-head__hero { max-width: var(--wrap); margin: 16px auto 0; padding-inline: 16px; }
.product-head__hero img { width: 100%; border-radius: var(--radius) var(--radius) 0 0; }
.product-tabs { position: sticky; top: var(--header-height); z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.product-tabs ul { list-style: none; display: flex; gap: 4px; overflow-x: auto; padding-block: 0; scrollbar-width: none; }
.product-tabs a { display: block; padding: 14px 14px 12px; white-space: nowrap; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; }
.product-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
@media (min-width: 960px) { .product-head h1 { font-size: 34px; } }

.product-body { padding-block: 24px 48px; }
.updates { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; margin-bottom: 32px; }
.updates summary { padding: 10px 0; font-weight: 700; cursor: pointer; }
.updates ul { list-style: none; margin: 0 0 12px; padding: 0; }
.updates li { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.updates time { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .updates li { grid-template-columns: auto 1fr; } .updates li > :last-child { grid-column: 1 / -1; } }
.prose { max-width: 880px; margin: 0 auto; }
.block { margin-bottom: 48px; }
.block h2 { font-size: 22px; margin: 0 0 12px; }
.block figure { margin: 16px 0 0; }
.block figure img { border-radius: var(--radius); border: 1px solid var(--line); }
.block--media { display: grid; gap: 16px; align-items: center; }
.block--media figure { margin: 0; }
@media (min-width: 840px) { .block--media { grid-template-columns: 1.1fr 1fr; gap: 32px; } .block--reverse figure { order: 2; } }
.block--note { background: var(--tint); border-radius: var(--radius); padding: 20px 24px; }
.spec { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.spec dt { font-weight: 700; }
.spec dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cta { max-width: 880px; margin: 0 auto; text-align: center; border: 2px solid var(--accent); border-radius: var(--radius); padding: 24px 16px; }
.cta__title { margin: 0 0 16px; font-weight: 700; font-size: 18px; }
.cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* フッター */
.site-footer { background: #1c2230; color: #d7dce4; font-size: 14px; }
.site-footer a { color: #d7dce4; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 40px 16px 24px; }
.site-footer__cols { display: grid; gap: 24px; }
@media (min-width: 600px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .site-footer__cols { grid-template-columns: repeat(5, 1fr); } }
.site-footer h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
.site-footer ul { list-style: none; margin: 0 0 16px; padding: 0; }
.site-footer li { padding: 2px 0; line-height: 1.6; }

.site-footer__company { margin-top: 24px; padding-top: 16px; border-top: 1px solid #39414f; display: grid; gap: 8px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.site-footer__copy { color: #9aa3b2; margin: 0; }

/* InkSaver 6 のカタログ(2026-11-07) */
.product-head > .wrap { padding-bottom: 12px; }
.product-head:has(.product-head__hero) > .wrap { padding-bottom: 0; }
.product-body .block h3 { font-size: 17px; margin: 24px 0 8px; }
.product-body .block figure img { max-width: 100%; height: auto; width: auto; }
.is6-note { font-size: 14px; color: var(--muted); line-height: 1.7; }
.is6-scroll { overflow-x: auto; }
.is6-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.is6-table th, .is6-table td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: middle; }
.is6-table thead th { background: var(--tint); font-weight: 700; }
.is6-table tbody th { font-weight: 600; background: #fff; }
.is6-table ul { margin: 0; padding-left: 1.2em; }
.is6-table--compare { min-width: 620px; }
.is6-table--compare td { text-align: center; white-space: nowrap; }
.is6-table--compare tbody th[scope="row"] { min-width: 13em; }
.is6-table--compare thead th:not(:first-child) { text-align: center; white-space: nowrap; }
.is6-table__group th { background: var(--tint); text-align: left; font-weight: 700; }
.is6-table--trial .btn { white-space: nowrap; }
@media (max-width: 719px) {
  .is6-table--trial thead { display: none; }
  .is6-table--trial, .is6-table--trial tbody, .is6-table--trial tr, .is6-table--trial th, .is6-table--trial td { display: block; }
  .is6-table--trial tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .is6-table--trial th, .is6-table--trial td { border: 0; padding: 4px 0; }
}
.is6-cards { display: grid; gap: 16px; }
@media (min-width: 720px) { .is6-cards { grid-template-columns: repeat(3, 1fr); } }
.is6-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.is6-card img { display: block; margin: 0 auto 8px; }
.product-body .is6-card h3 { margin: 0 0 6px; text-align: center; }
.is6-card__price { margin: 0; font-weight: 700; }
.is6-card__price small { display: block; font-weight: 400; }
.is6-card__sub { margin: 2px 0 8px; font-size: 14px; color: var(--muted); }
.is6-card ul { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.7; }
.is6-two { display: grid; gap: 24px; }
@media (min-width: 720px) { .is6-two { grid-template-columns: 1fr 1fr; } }
.is6-buybox { display: grid; gap: 16px; align-items: center; }
.is6-buybox > * { min-width: 0; }
@media (min-width: 720px) { .is6-buybox { grid-template-columns: 120px minmax(0, 1fr); } }
.is6-buy .btn { min-height: 40px; margin: 2px 4px 2px 0; padding: 0 14px; font-size: 14px; }
.is6-buybox .is6-table tbody th { white-space: nowrap; }
@media (max-width: 719px) {
  .is6-buybox .is6-table, .is6-buybox .is6-table tbody, .is6-buybox .is6-table tr, .is6-buybox .is6-table th, .is6-buybox .is6-table td { display: block; }
  .is6-buybox .is6-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .is6-buybox .is6-table th, .is6-buybox .is6-table td { border: 0; padding: 2px 0; }
}
.is6-calc { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 16px 16px; }
.is6-calc__row { display: grid; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
@media (min-width: 720px) { .is6-calc__row { grid-template-columns: 1fr 12em; } }
.is6-calc small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.is6-calc__in input[type="number"] { width: 6.5em; min-height: 40px; padding: 4px 8px; font-size: 16px; border: 1px solid var(--line); border-radius: 6px; }
.is6-calc__in input:disabled { background: var(--tint); }
.is6-calc__in select { min-height: 40px; font-size: 16px; padding: 4px 8px; }
.is6-calc__go { margin: 16px 0 0; text-align: center; }
.is6-result { margin-top: 24px; padding: 20px 24px; background: var(--tint); border-radius: var(--radius); }
.is6-result__big { color: var(--alert); font-size: 20px; }
.is6-result__list { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 12px 0 0; }
.is6-result__list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ===== B 案: コーポレートサイト型のトップ(事業の軸ごとに紹介) =====
   第 4 版(2026-11-03): 写真を使った見せ方。デザインの軸
   - 印象: 信頼できる・技術に強い・現場に近い。製品広告のにぎやかさは避ける
   - 写真: 写実・ドキュメンタリー調(自然光、彩度やや低め)。写真の上の文字は濃紺のグラデーションを敷いて白で
   - 色: 濃紺(--b-navy)を写真と暗い帯の土台に、青(--accent)をリンクとボタンに。市場ごとの差し色は 3 色だけ
   - 余白: 8px 刻み。段の上下はパソコン 88px、スマホ 56px
   B 案だけの部品は .page-top-b の中だけで効くようにし、A 案と製品ページには影響させない */
.page-top-b {
  --b-navy: #0e1522;
  --b-navy-2: #172033;
  --academic: #c4561a;  --academic-light: #f5a46c;
  --broadcast: #0f7a83; --broadcast-light: #63d2da;
  --partners: #3b4a8f;  --partners-light: #aebaf6;
  --license: #1f64a8;   --license-light: #8ec3f2;
  --direct: #2f7a5a;    --direct-light: #84d6ad;
  --personal: #4b7d33;
  --photo-radius: 6px;
}
.eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .24em; color: var(--accent); }
.eyebrow--light { color: #8fb8e8; }
.focus-lead { max-width: 38em; margin: 0 0 40px; font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.75; color: var(--ink); word-break: auto-phrase; } /* 導入実績の上に置く会社の紹介の一文 */
.page-top-b .section { padding-block: 56px; }
.page-top-b .section__head { margin-bottom: 12px; }
.page-top-b .section__head h2 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: .02em; }
@media (min-width: 900px) { .page-top-b .section { padding-block: 88px; } }

/* ---- 事業のスライド: 写真を全面に敷き、左に文字。JS がないときは 3 枚を縦に並べ、JS があるときは 1 枚ずつ切り替える ---- */
.stage { background: var(--b-navy); }
.slide { --s-light: #8fb8e8; position: relative; overflow: hidden; background: var(--b-navy); color: #fff; isolation: isolate; }
.slide--academic  { --s-light: var(--academic-light); }
.slide--broadcast { --s-light: var(--broadcast-light); }
.slide--partners  { --s-light: var(--partners-light); }
.slide--license   { --s-light: var(--license-light); }
.slide--direct    { --s-light: var(--direct-light); }
.slide__photo { position: relative; aspect-ratio: 3 / 2; max-height: 420px; width: 100%; overflow: hidden; }
.slide__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* スマホ: 写真を上に全部見せ、文字はその下の濃紺の地に置く(写真の下端だけ地になじませる) */
.slide__photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,21,34,0) 60%, rgba(14,21,34,1) 100%); }
.slide__inner { max-width: var(--wrap); margin: 0 auto; padding: 4px 16px 32px; min-height: 368px; display: grid; gap: 20px; align-content: start; }
@media (max-width: 899px) { .slide__visual { display: none; } }
@media (min-width: 900px) {
  /* パソコン: 写真は右 7 割に敷き、左の文字の下は濃紺の地にする(人物に文字が重ならない) */
  .slide__photo { position: absolute; inset: 0 0 0 30%; z-index: -1; aspect-ratio: auto; max-height: none; width: auto; }
  .slide__photo::after { background:
      linear-gradient(90deg, rgba(14,21,34,1) 0%, rgba(14,21,34,.75) 22%, rgba(14,21,34,.2) 48%, rgba(14,21,34,0) 70%),
      linear-gradient(0deg, rgba(14,21,34,.4) 0%, rgba(14,21,34,0) 28%); }
  .slide__photo img { object-position: 50% 50%; }
  .slide__inner { min-height: 600px; padding: 72px 16px; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; align-content: center; align-items: center; }
}
.slide__text { min-width: 0; }
.slide__label { margin: 0 0 16px; display: flex; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--s-light); }
.slide__no { font-size: 30px; font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; padding-right: 12px; border-right: 1px solid rgba(255,255,255,.35); }
.slide__title { margin: 0 0 16px; font-size: clamp(25px, 3.2vw, 38px); line-height: 1.4; letter-spacing: .03em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.slide__title span { display: inline-block; }
.slide__lead { margin: 0 0 24px; font-size: 15px; line-height: 1.95; color: rgba(255,255,255,.88); max-width: 32em; }
.slide__link { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 24px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; transition: background .2s, color .2s; }
.slide__link::after { content: "→"; transition: transform .2s; }
.slide__link:hover { background: #fff; color: var(--b-navy); }
.slide__link:hover::after { transform: translateX(4px); }
.slide__visual { min-width: 0; }

/* スライド 03 の図: 写真の上に、すりガラスの板で */
.bridge { display: grid; grid-template-columns: 1fr 32px auto 32px 1fr; align-items: center; padding: 20px 14px; background: rgba(14,21,34,.55); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bridge__node { display: grid; gap: 2px; text-align: center; padding: 12px 6px; border: 1px solid rgba(255,255,255,.55); border-radius: 10px; font-size: 12px; color: rgba(255,255,255,.75); }
.bridge__node strong { font-size: 14px; color: #fff; }
.bridge__link { height: 1px; background: var(--s-light); position: relative; }
.bridge__link::before, .bridge__link::after { content: ""; position: absolute; top: -4px; width: 0; height: 0; border: 4.5px solid transparent; }
.bridge__link::before { left: -3px; border-right-color: var(--s-light); border-left: 0; }
.bridge__link::after { right: -3px; border-left-color: var(--s-light); border-right: 0; }
.bridge__hub { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--partners); box-shadow: 0 0 0 6px rgba(174,186,246,.18); color: #fff; font-weight: 800; font-size: 13px; text-align: center; }
@media (min-width: 900px) {
  .slide--partners .slide__visual { align-self: end; justify-self: end; width: 100%; max-width: 500px; }
  .bridge { grid-template-columns: 1fr 44px auto 44px 1fr; padding: 28px 20px; }
  .bridge__hub { width: 104px; height: 104px; font-size: 14px; }
  .bridge__node { font-size: 13px; } .bridge__node strong { font-size: 15px; }
}

/* 切り替えのタブ: 写真の下の濃紺の帯 */
.stage__bar { background: var(--b-navy); border-top: 1px solid rgba(255,255,255,.10); }
.stage__tabs { display: flex; overflow-x: auto; scrollbar-width: none; max-width: var(--wrap); margin: 0 auto; padding-inline: 16px; }
.stage__tabs[hidden] { display: none; }
.stage__tab { flex: 1 0 auto; display: flex; align-items: baseline; gap: 8px; min-height: 52px; padding: 16px 14px 14px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.6); cursor: pointer; position: relative; white-space: nowrap; text-align: left; }
.stage__tab:hover { color: #fff; }
.stage__tab-no { font-size: 12px; font-variant-numeric: tabular-nums; }
.stage__tab-no { margin-right: 2px; }
@media (max-width: 759px) {
  /* 5 枚になるのでスマホでは番号だけを並べる(名前は読み上げ用に残す。今の名前はスライドの中の見出しの上に出ている) */
  .stage__tabs { padding-inline: 8px; }
  .stage__tab { flex: 1 1 0; justify-content: center; min-width: 44px; min-height: 48px; padding: 14px 4px 12px; }
  .stage__tab .stage__tab-no { font-size: 15px; font-weight: 700; margin: 0; }
  .stage__tab-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.stage__tab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.18); }
.stage__tab[aria-selected="true"] { color: #fff; }
.stage__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: #fff; transform-origin: left; animation: stage-progress var(--stage-interval, 7s) linear forwards; }
.stage.is-paused .stage__tab[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes stage-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stage.is-carousel .slide { display: none; }
.stage.is-carousel .slide.is-current { display: block; animation: stage-fade .6s ease; }
.stage.is-carousel .slide.is-current .slide__photo img { animation: stage-zoom 9s ease-out forwards; }
@keyframes stage-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stage-zoom { from { transform: scale(1.05); } to { transform: scale(1); } }

/* ---- メディアナビについて: 文と写真を左右に ---- */
.about { padding-block: 56px; }
.about__inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .about { padding-block: 96px; } .about__inner { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
.about__title { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: .02em; }
.about__text { margin: 0; font-size: 16px; line-height: 2; }
.about__photo { margin: 0; position: relative; }
.about__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--photo-radius); }
@media (min-width: 900px) { .about__photo::before { content: ""; position: absolute; inset: 24px -24px -24px 24px; z-index: -1; border-radius: var(--photo-radius); background: var(--tint); } }
.about__photo { isolation: isolate; }

/* ---- 事業のしくみ: ソフト → 販売チャネル → お客様。狭い画面では縦に並べ、矢印を下向きにする ---- */
.model__lead { margin: 0 0 28px; color: var(--muted); }
.model { display: grid; gap: 8px; }
.model__col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.model__head { margin: 0 0 2px; display: flex; align-items: baseline; gap: 8px; font-size: 16px; }
.model__head span { font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.model__box { background: #fff; border-radius: var(--radius); padding: 14px 16px; border-left: 4px solid var(--accent); box-shadow: 0 1px 2px rgba(20,34,58,.05); }
.model__box--soft { border-left-color: var(--partners); }
.model__box strong { font-size: 17px; }
.model__box p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; }
.model__sub { margin-left: 8px; font-size: 12px; color: var(--muted); }
.model__ex { color: var(--muted); font-size: 13px !important; }
.model__customers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.model__customers li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(135deg, #0e1a30, #0d2f5e); color: #fff; font-weight: 700; font-size: 16px; }
.model__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); color: #a9d2ff; }
.model__box--channel:nth-of-type(1) { --ch: #0b5cad; }
.model__box--channel:nth-of-type(2) { --ch: #5a49b8; }
.model__box--channel:nth-of-type(3) { --ch: #0f93a0; }
.model__box--channel { border-left-color: var(--ch); }
.model__to { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.model__to li { padding: 2px 10px; border-radius: 999px; background: #e9f1fb; color: #0b4f96; font-size: 12px; font-weight: 700; }
.model__lines { display: none; }
@media (max-width: 575px) {
  .model__customers { grid-template-columns: 1fr 1fr; }
  .model__customers li { padding: 10px; gap: 8px; font-size: 14px; }
  .model__icon { width: 34px; height: 34px; }
}
.model__arrow { display: grid; place-items: center; min-height: 28px; }
.model__arrow::before { content: ""; width: 14px; height: 14px; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(45deg); }
@media (min-width: 960px) {
  /* PC は矢印の代わりに、site.js が線を引く */
  .model { position: relative; grid-template-columns: 1fr 96px 1.05fr 96px .85fr; gap: 0; align-items: stretch; }
  .model__arrow { visibility: hidden; }
  .model__col { display: flex; flex-direction: column; }
  .model__box { flex: 1 1 auto; }
  .model__customers { flex: 1 1 auto; grid-auto-rows: 1fr; }
  .model__sub { display: block; margin: 2px 0 0; }
  .model__to { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .model__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .model__lines path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---- 個人向け販売・法人向け販売: 写真つきの大きなカードを 2 枚 ---- */
.sales { display: grid; gap: 20px; }
@media (min-width: 820px) { .sales { grid-template-columns: 1fr 1fr; gap: 24px; } }
.sales__card { --c: var(--accent); display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sales__card--personal { --c: var(--personal); }
.sales__card--business { --c: var(--accent); }
.sales__photo { position: relative; aspect-ratio: 16 / 9; background: var(--b-navy); }
.sales__photo img { width: 100%; height: 100%; object-fit: cover; }
.sales__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,21,34,.82) 0%, rgba(14,21,34,.25) 45%, rgba(14,21,34,0) 70%); }
.sales__label { position: absolute; left: 20px; bottom: 16px; z-index: 1; margin: 0; padding-left: 14px; border-left: 4px solid var(--c); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.3; color: #fff; }
.sales__card--personal .sales__label { border-left-color: #8cc56c; }
.sales__card--business .sales__label { border-left-color: #6fa8e6; }
.sales__body { padding: 20px 20px 24px; display: grid; gap: 14px; align-content: start; }
@media (min-width: 900px) { .sales__body { padding: 24px 28px 28px; } }
.sales__text { margin: 0; font-size: 15px; line-height: 1.9; }
.sales__points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sales__points li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; line-height: 1.6; }
.sales__points li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 10px; height: 6px; border-left: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(-45deg); }

/* ---- パートナーとともに: 写真の帯の見出し + 開発パートナー ⇄ メディアナビ ⇄ 販売パートナー ---- */
.section--partners { background: var(--tint); }
.partner-banner { position: relative; overflow: hidden; border-radius: 12px; background: var(--b-navy); color: #fff; margin-bottom: 24px; isolation: isolate; }
.partner-banner__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.partner-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,21,34,.25) 0%, rgba(14,21,34,.88) 55%); }
.partner-banner__text { padding: 150px 20px 24px; max-width: 560px; }
.partner-banner h2 { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 30px); color: #fff; letter-spacing: .02em; }
.partner-banner p:last-child { margin: 0; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.88); }
@media (min-width: 760px) {
  .partner-banner { min-height: 300px; display: flex; align-items: center; }
  .partner-banner::after { background: linear-gradient(90deg, rgba(14,21,34,.92) 0%, rgba(14,21,34,.78) 38%, rgba(14,21,34,.15) 72%, rgba(14,21,34,0) 100%); }
  .partner-banner__text { padding: 40px 48px; }
}
.partner { display: grid; gap: 12px; }
.partner__side { background: #fff; border-radius: 12px; padding: 20px 22px; display: grid; gap: 12px; min-width: 0; border: 1px solid var(--line); }
.partner__side h3 { margin: 0; font-size: 19px; display: flex; align-items: baseline; gap: 10px; }
.partner__side h3 span { font-size: 13px; font-weight: 600; color: var(--muted); }
.partner__side--dev h3 { color: var(--partners); }
.partner__side--sales h3 { color: var(--accent); }
.partner__item { background: var(--tint); border-radius: var(--radius); padding: 12px 14px; }
.partner__item strong { font-size: 13px; letter-spacing: .1em; color: var(--muted); }
.partner__item p { margin: 2px 0 0; font-size: 14px; line-height: 1.7; }
.partner__item .partner__names { margin-top: 6px; font-size: 13px; color: var(--muted); }
.partner__hub { display: grid; justify-items: center; gap: 4px; }
.partner__arrow { font-size: 26px; color: var(--accent); line-height: 1; transform: rotate(90deg); }
.partner__core { background: var(--b-navy); color: #fff; border-radius: 12px; padding: 18px 18px 14px; text-align: center; width: 100%; max-width: 320px; }
.partner__core strong { font-size: 18px; }
.partner__core ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: #c9d0db; line-height: 1.6; }
.partner__core li { padding: 4px 0; border-top: 1px solid #2c3547; }
.partner__lines { display: none; }
@media (min-width: 960px) {
  /* PC は矢印の代わりに、site.js が線を引く(事業のしくみの図と同じ見せ方) */
  .partner { position: relative; grid-template-columns: 1fr minmax(240px, .72fr) 1fr; gap: 0 88px; align-items: stretch; }
  .partner__side { display: flex; flex-direction: column; }
  .partner__item { flex: 1 1 auto; }
  .partner__arrow { display: none; }
  .partner__hub { display: flex; }
  .partner__core { display: flex; flex-direction: column; justify-content: center; max-width: none; padding: 28px 16px; background: linear-gradient(160deg, #0e1a30 0%, #0d2f5e 70%, #0b5cad 135%); box-shadow: 0 10px 28px rgba(14,30,60,.22); }
  .partner__core strong { font-size: 24px; letter-spacing: .04em; }
  .partner__core ul { margin-top: 16px; font-size: 13px; }
  .partner__core li { padding: 10px 0; border-top-color: rgba(255,255,255,.16); }
  .partner__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .partner__lines path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---- 重点市場: 2 つを写真つきで大きく、そのほかは小さく ---- */
.market-grid { display: grid; gap: 20px; }
@media (min-width: 760px) { .market-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1000px) { .market-grid { grid-template-columns: repeat(3, 1fr); } .market__num { font-size: clamp(48px, 5vw, 64px); } }
@media (min-width: 760px) and (max-width: 999px) { .market:nth-child(3) { grid-column: 1 / -1; } }
.market { --c: var(--accent); --c-light: #8fb8e8; display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; min-width: 0; box-shadow: 0 1px 2px rgba(20,34,58,.06), 0 12px 32px rgba(20,34,58,.06); }
.market--academic { --c: var(--academic); --c-light: var(--academic-light); }
.market--broadcast { --c: var(--broadcast); --c-light: var(--broadcast-light); }
.market--backup { --c: var(--license, #2f6fb0); --c-light: var(--license-light, #8ec3f2); }
.market__photo { position: relative; aspect-ratio: 16 / 7; background: var(--b-navy); }
@media (max-width: 759px) { .market__photo { aspect-ratio: 16 / 9; } }
.market__photo img { width: 100%; height: 100%; object-fit: cover; }
.market__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,21,34,.80) 0%, rgba(14,21,34,.2) 50%, rgba(14,21,34,0) 75%); }
.market__tag { position: absolute; left: 20px; bottom: 14px; z-index: 1; padding: 4px 12px; border-radius: 999px; background: rgba(14,21,34,.55); border: 1px solid var(--c-light); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.market__body { padding: 20px 24px 18px; }
.market__title { word-break: auto-phrase; margin: 0 0 14px; font-size: clamp(18px, 1.8vw, 20px); line-height: 1.5; color: var(--ink); }
.market__stat { margin: 0; display: flex; align-items: baseline; gap: 6px; color: var(--c); }
.market__num { font-size: clamp(52px, 7vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.market__unit { font-size: 18px; font-weight: 700; color: var(--ink); }
.market__note { margin: 6px 0 12px; font-size: 13px; color: var(--muted); }
.market__text { margin: 0 0 12px; font-size: 15px; line-height: 1.8; }
.market ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.market li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.market li:last-child { border-bottom: 0; }
.others-panel { margin-top: 32px; padding: 24px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.others-panel__title { margin: 0 0 12px; font-size: 17px; }
.others-panel__list { margin: 0; display: grid; gap: 0; }
@media (min-width: 760px) { .others-panel__list { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.others-panel__list > div { padding: 12px 0; border-top: 1px solid var(--line); }
.others-panel__list dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.others-panel__list dd { margin: 2px 0 0; font-size: 15px; line-height: 1.7; }

/* 事業紹介(前の版の部品。今の版では使っていない) */
.biz-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .biz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .biz-grid { grid-template-columns: repeat(4, 1fr); } }
.biz-card { --c: var(--accent); background: #fff; border-radius: var(--radius); padding: 20px 20px 16px; border-top: 4px solid var(--c); min-width: 0; }
.biz-card h3 { margin: 2px 0 6px; font-size: 19px; }
.biz-card ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.biz-card li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }

/* ---- 受賞・メディア掲載 ---- */
.award-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .award-list { grid-template-columns: repeat(2, 1fr); } }
.award-list li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; line-height: 1.6; }
.award-list img { width: 96px; height: 64px; object-fit: contain; }
.award-list img.is-photo { object-fit: cover; border-radius: 6px; } /* メダルではなく番組の画面など、写真のとき */
.award-list strong { display: block; font-size: 13px; color: var(--muted); }
.award-list span { min-width: 0; }
.award-list__mark { display: grid; place-items: center; width: 96px; height: 64px; border-radius: 8px; background: var(--tint); font-weight: 800; color: var(--muted); letter-spacing: .1em; }

/* ---- 直営ストア: 濃紺の帯。パソコンでは右半分に写真を敷き、スマホでは上に写真 ---- */
.store { position: relative; overflow: hidden; background: var(--b-navy, #0e1522); color: #fff; isolation: isolate; }
.store__photo { position: relative; height: 240px; }
.store__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.store__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--b-navy) 0%, rgba(14,21,34,0) 55%); }
.store__inner { position: relative; padding-block: 32px 56px; }
.store__text { max-width: 540px; }
@media (min-width: 900px) {
  .store__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; height: auto; z-index: -1; }
  .store__photo::after { background: linear-gradient(90deg, var(--b-navy) 0%, rgba(14,21,34,.55) 22%, rgba(14,21,34,0) 55%); }
  .store__inner { padding-block: 88px; }
  .store__text { max-width: 500px; }
}
.store__title span { display: inline-block; }
.store__title { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: .02em; }
.store__lead { margin: 0 0 20px; color: #c9d0db; line-height: 1.9; }
.store__cards { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 600px) { .store__cards { grid-template-columns: 1fr 1fr; } }
.store__cards li { padding: 16px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); background: rgba(255,255,255,.05); }
.store__cards strong { font-size: 15px; }
.store__cards p { margin: 4px 0 0; font-size: 13px; color: #c9d0db; line-height: 1.7; }
.store__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; transition: background .2s; }
.store__btn:hover { background: #e3ecf8; }
.store__btn::after { content: "→"; }

/* ---- 入口(製品・会社案内など) ---- */
.gateways { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 600px) { .gateways { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gateways { grid-template-columns: repeat(4, 1fr); } }
.gateways a { display: grid; gap: 2px; padding: 22px 20px; min-height: 100%; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; position: relative; transition: border-color .2s, box-shadow .2s; }
.gateways a::after { content: "→"; position: absolute; right: 18px; top: 22px; color: var(--accent); }
.gateways a:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.gateways strong { font-size: 18px; }
.gateways span { font-size: 13px; color: var(--muted); }
.shop-band { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 22px 24px; border-radius: var(--radius); background: var(--ink); color: #fff; text-decoration: none; }
.shop-band strong { font-size: 20px; }
.shop-band span { font-size: 14px; color: #c9d0db; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .stage.is-carousel .slide.is-current, .stage.is-carousel .slide.is-current .slide__photo img { animation: none; }
  .stage__tab[aria-selected="true"]::after { animation: none; transform: none; }
}

/* 11/3 第 6 版: B 案の見出しを文節で折り返す(スマホで「ディストリビュ/ーター」のように切れないように)。実績のカードは見出しの高さをそろえて数字の位置を合わせる */
.page-top-b h2, .page-top-b h3, .slide__title span { word-break: auto-phrase; }
@media (min-width: 1000px) { .market__title { min-height: 4.5em; } }

/* ===== B′ 案(11/3): 動く写真のトップ・事業紹介のページ ===== */
.kv { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: calc(100svh - var(--header-height)); min-height: 560px; max-height: 920px; overflow: hidden; background: var(--b-navy); color: #fff; }
.kv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kv::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(14,21,34,.8) 0%, rgba(14,21,34,0) 30%), linear-gradient(90deg, rgba(14,21,34,.62) 0%, rgba(14,21,34,.34) 42%, rgba(14,21,34,0) 70%); }
/* 見出しは映像の縦のまん中あたりに置き、下の番号とのあいだを空ける(11/3 長沢さん「下の方にあって窮屈」) */
.kv__inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px 32px; }
.kv__now { display: grid; margin-block: auto; padding-block: 40px; }
.kv__title { grid-area: 1 / 1; margin: 0; color: #fff; font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; line-height: 1.5; letter-spacing: .04em; word-break: auto-phrase; text-shadow: 0 2px 16px rgba(0,0,0,.35); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.kv__title span { display: block; }
.kv.is-still .kv__now { row-gap: 16px; } /* 映像が動かないときは、2 枚のメッセージを並べて見せる */
.kv.is-still .kv__title { grid-area: auto; opacity: 1; transform: none; }
/* 前の見出しが消えてから次を出す(重なって読めなくなるのを避ける) */
.kv__title.is-current { opacity: 1; transform: none; transition: opacity .8s ease .45s, transform .8s ease .45s; }
.kv__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.kv__list a { position: relative; display: flex; gap: 8px; align-items: baseline; padding-top: 12px; color: rgba(255,255,255,.62); text-decoration: none; font-size: 14px; font-weight: 700; }
.kv__list a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.28); }
.kv__list a::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: #fff; }
.kv__list .is-current a { color: #fff; }
.kv__list .is-current a::after { width: 100%; transition: width var(--kv-step, 3.8s) linear; }
.kv.is-still .kv__list .is-current a::after { transition: none; }
.kv__list a:hover, .kv__list a:focus-visible { color: #fff; }
.kv__no { font-family: Outfit, var(--font); font-size: 12px; letter-spacing: .08em; opacity: .8; }
.kv__news { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.14); background: rgba(14,21,34,.72); backdrop-filter: blur(6px); }
.kv__news-inner { max-width: var(--wrap); margin: 0 auto; padding: 12px 16px; display: flex; gap: 14px; align-items: baseline; font-size: 14px; min-width: 0; }
.kv__news-head { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--academic-light); }
.kv__news time { flex: none; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.kv__news a, .kv__news span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
@media (max-width: 759px) {
  .kv { min-height: 520px; max-height: none; }
  .kv::before { background: linear-gradient(0deg, rgba(14,21,34,.95) 0%, rgba(14,21,34,.6) 40%, rgba(14,21,34,0) 70%); }
  .kv__title { font-size: 19px; } /* 11/6 牧野さんの文(長い 1 文)に合わせて小さくした */
  .kv__title { word-break: keep-all; } /* スマホは行を固定せず、文節(<wbr>)で折り返す。Safari でも同じになる */
  .kv__title span { display: inline; }
  .kv__now { margin-block: auto 52px; padding-block: 0; } /* スマホは縦長の写真の人物にかからないよう下寄りのまま、番号とのあいだを広げる */
  .kv__list { gap: 6px; }
  .kv__list a { flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.4; }
  .kv__name { display: none; }
  .kv__list .is-current .kv__name { display: block; position: absolute; top: -26px; left: 0; white-space: nowrap; font-size: 13px; }
  .kv__list li:nth-child(n+4).is-current .kv__name { left: auto; right: 0; }
  .kv__news-inner { flex-wrap: wrap; row-gap: 2px; font-size: 13px; }
  .kv__news a, .kv__news span:last-child { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kv__title { transition: none; } }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.tiles a { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.tiles__photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: var(--b-navy); margin-bottom: 8px; }
.tiles__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tiles a:hover img { transform: scale(1.04); }
.tiles strong { font-size: 16px; }
.tiles a:hover strong { color: var(--accent); }
.tiles__text { font-size: 13px; line-height: 1.6; color: var(--muted); }

.page-hero { background: var(--b-navy, #0e1522); color: #fff; padding-block: 56px 48px; }  /* B′ 案以外のページでも同じ濃紺 */
.page-hero h1 { margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 40px); }
.page-hero p:last-child { margin: 0; color: rgba(255,255,255,.8); }
.pillar-rows { display: grid; gap: 56px; }
.pillar-row { --c: var(--accent); display: grid; gap: 20px; align-items: center; scroll-margin-top: calc(var(--header-height) + 16px); }
@media (min-width: 860px) { .pillar-row { grid-template-columns: 1.1fr 1fr; gap: 48px; } .pillar-row:nth-child(even) .pillar-row__photo { order: 2; } }
.pillar-row--academic { --c: var(--academic); } .pillar-row--broadcast { --c: var(--broadcast); } .pillar-row--license { --c: var(--license); }
.pillar-row--direct { --c: var(--direct); } .pillar-row--partners { --c: var(--partners); }
.pillar-row__photo { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; }
.pillar-row__photo img { width: 100%; height: 100%; object-fit: cover; }
.pillar-row__label { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--c); }
.pillar-row__label span { margin-right: 10px; font-family: Outfit, var(--font); letter-spacing: .08em; }
.pillar-row h2 { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.45; word-break: auto-phrase; }
.pillar-row h2 span { display: block; }
.pillar-row p { margin: 0 0 12px; line-height: 1.9; }
.page-top-b #business, .page-top-b #sales, .page-top-b #partners, .page-top-b #store, .page-top-b #results { scroll-margin-top: var(--header-height); }

/* 今のページの本文を新しい枠に入れたもの(移し替え ②、11/3)。
   本文は今の見た目のまま(CSS は .legacy を付けた写し)。文字の既定はブラウザの初期値に戻す。
   幅の決まった古いページは、スマートフォンでは本文の中だけ横に動かせる */
.product-bar { border-bottom: 1px solid var(--line); background: var(--tint); }
.product-bar:has(+ .product-tabs) { border-bottom: 0; }
.product-bar__inner { max-width: var(--wrap); margin: 0 auto; padding: 14px 16px 6px; }
.product-bar__cat { margin: 0; font-size: 13px; color: var(--muted); }
.product-bar__name { margin: 0; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; font-weight: 700; }
/* 製品タブは、スクロールしてもヘッダーの下に残る(.product-tabs の sticky) */
.product-tabs--bar { background: var(--tint); }
.product-tabs--bar ul { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.legacy-wrap { position: relative; padding: 24px 16px 48px; overflow-x: auto; }  /* position: 本文の中の絶対配置の要素も、この枠の中で横に動かす */
.legacy { max-width: 900px; margin: 0 auto; font: initial; font-size: 16px; line-height: normal; color: #000; text-align: left; }

/* ふつうのページ・製品の一覧・サポートの入口(移し替え ③、11/3) */
.page-body { padding-bottom: 24px; }
.jumpnav { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jumpnav a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; }
.jumpnav a:hover { border-color: var(--accent); color: var(--accent); }
.plist { scroll-margin-top: var(--header-height); }
.plist__title { margin: 0 0 4px; font-size: 24px; }
.plist__cat { margin: 28px 0 12px; font-size: 16px; padding-left: 10px; border-left: 4px solid var(--accent); }
.pcard-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.pcard { display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.pcard__img { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; }
.pcard__img img { max-width: 80px; max-height: 80px; width: auto; height: auto; object-fit: contain; }
.pcard__name { margin: 0 0 4px; font-size: 16px; line-height: 1.5; }
.pcard__name a { color: var(--ink); text-decoration: none; }
.pcard__name a:hover { color: var(--accent); text-decoration: underline; }
.pcard__catch { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.pcard__links { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
@media (min-width: 720px) { .pcard-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .pcard-grid { grid-template-columns: 1fr 1fr 1fr; } }

.noticebox { margin: 24px 0 0; padding: 14px 16px; border: 1px solid var(--alert); border-radius: var(--radius); background: #fff6f7; line-height: 1.8; }
.noticebox strong { color: var(--alert); }
.helpnav { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.helpnav a { display: grid; justify-items: center; align-content: start; gap: 8px; height: 100%; padding: 18px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; text-align: center; font-weight: 700; line-height: 1.5; }
.helpnav a:hover { border-color: var(--accent); color: var(--accent); }
.helpnav img { width: 52px; height: 52px; object-fit: contain; }
@media (min-width: 768px) { .helpnav { grid-template-columns: repeat(3, 1fr); } }
.qa { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.qa summary { display: grid; gap: 4px; padding: 14px 44px 14px 16px; font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "＋"; position: absolute; right: 16px; top: 14px; color: var(--accent); }
.qa[open] summary::after { content: "－"; }
.qa[open] summary { border-bottom: 1px solid var(--line); }
.qa__body { padding: 4px 16px 12px; font-size: 15px; }
.qa__body img { margin: 8px 0; }
.linkrow { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.infocard-row { display: grid; gap: 16px; }
@media (min-width: 768px) { .infocard-row { grid-template-columns: 1fr 1fr; } }
.infocard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.infocard h3 { margin: 0 0 8px; font-size: 17px; }
.infocard p { margin: 0 0 8px; }
.press-list li { grid-template-columns: 7.5em 1fr auto; }
@media (max-width: 599px) { .press-list li { grid-template-columns: 1fr auto; } .press-list time { grid-column: 1 / -1; } }
.company-table { display: grid; grid-template-columns: 1fr; margin: 0; border-top: 1px solid var(--line); }
.company-table dt { padding: 14px 0 0; font-weight: 700; color: var(--muted); font-size: 14px; }
.company-table dd { margin: 0; padding: 4px 0 14px; border-bottom: 1px solid var(--line); line-height: 1.8; }
@media (min-width: 720px) {
  .company-table { grid-template-columns: 10em 1fr; }
  .company-table dt, .company-table dd { padding: 16px 0; border-bottom: 1px solid var(--line); }
}
.company-table__list { list-style: none; margin: 0; padding: 0; }
.company-table__note { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.press-year { margin-top: 40px; }
.policy { max-width: 820px; }
.policy h2 { margin: 0 0 16px; font-size: 22px; }
.policy h3 { margin: 32px 0 8px; font-size: 17px; padding-left: 10px; border-left: 4px solid var(--accent); }
.policy ul { margin: 0; padding-left: 1.4em; }
.policy li { margin-bottom: 8px; }
.policy a { word-break: break-all; }
.policy__sign { margin-top: 40px; text-align: right; }
.shopcards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .shopcards { grid-template-columns: repeat(3, 1fr); } }
.shopcard { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; }
.shopcard:hover { border-color: var(--accent); }
.shopcard__sub { font-size: 13px; color: var(--muted); }
.shopcard__name { font-size: 19px; line-height: 1.4; }
.shopcard__note { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 10px; }
.shopcard__go { margin-top: auto;  padding: 8px 16px; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
.shopcard:hover .shopcard__go { filter: brightness(1.1); }
.pcard__tags { margin: 2px 0 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.hojin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* 11/6 全員会議の反映: トップの主な製品(映像のすぐ下)と、主な事業(5 つ) */
.fprod { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .fprod { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.fprod a { display: grid; gap: 2px; color: var(--ink); text-decoration: none; }
.fprod__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--tint); border: 1px solid var(--line); margin-bottom: 8px; }
.fprod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fprod a:hover img { transform: scale(1.04); }
.fprod strong { font-size: 16px; line-height: 1.4; }
.fprod a:hover strong { color: var(--accent); }
.fprod__label { font-size: 13px; line-height: 1.6; color: var(--muted); }
@media (min-width: 1000px) { .tiles--5 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 999px) { .tiles--5 li:last-child:nth-child(odd) { grid-column: 1 / -1; } .tiles--5 li:last-child:nth-child(odd) .tiles__photo { aspect-ratio: 3 / 1; } }

/* 古いページの中の「このページの内容」(11/8 GitMind Chat の二重メニューを基本メニューへまとめたとき) */
.legacy .ptoc { margin: 16px 0 24px; padding: 12px 16px; background: var(--tint); border-radius: var(--radius); font-family: var(--font); }
.legacy .ptoc__title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.legacy .ptoc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legacy .ptoc li { margin: 0; padding: 0; background: none; }
.legacy .ptoc a { color: var(--accent); font-size: 15px; line-height: 1.6; }
/* 製品のタブがあるページで、見出しへ飛んだときにヘッダーとタブに隠れないように */
.product-tabs ~ .legacy-wrap [id] { scroll-margin-top: calc(var(--header-height) + 64px); }

/* 古いページの本文を、スマホやタブレットの幅に収める(11/8 長沢さん「はみ出しを直して」)。
   古いページは横幅 750〜960px の固定なので、960px 以下では、どの要素も枠の幅を超えないようにする。
   画像は width/height 属性の縦横比のまま縮む。縮められない表は、これまでどおり枠の中で横に動かせる */
@media (max-width: 960px) {
  .legacy *, .legacy *::before, .legacy *::after { max-width: 100%; box-sizing: border-box; }
  .legacy img, .legacy video, .legacy svg, .legacy canvas { height: auto; }
  .legacy iframe, .legacy embed, .legacy object { height: auto; aspect-ratio: 16 / 9; }
  .legacy * { overflow-wrap: break-word; }  /* 長い URL など */
  /* 表とセルの px の幅の指定は縮まないので外す(幅 100% の表は残す) */
  .legacy table { table-layout: auto !important; width: auto !important; }
  .legacy table[width="100%"], .legacy table[style*="100%"] { width: 100% !important; }
  .legacy td, .legacy th, .legacy nobr { width: auto !important; white-space: normal !important; }
  /* 表の中では「枠の幅を超えない」が効かないので、画像など以外の固定幅も外す(幅 590px の横線など) */
  .legacy :is(td, th) :not(img, video, iframe, svg, canvas, embed, object, input, select, textarea, button) { width: auto !important; min-width: 0 !important; }
  .legacy input, .legacy select, .legacy textarea { max-width: 100%; }
  .legacy pre { white-space: pre-wrap; }
  /* site.js が付ける: はみ出す表は文字を小さくし、それでも収まらなければ表だけを横に動かす */
  .legacy table.legacy-tight, .legacy table.legacy-tight * { font-size: 12px !important; line-height: 1.4 !important; overflow-wrap: anywhere; }
  .legacy table.legacy-tight :is(td, th) { padding: 3px !important; }
  .legacy .legacy-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1em; }
  .legacy .legacy-scroll > table { max-width: none; }
}

/* 大項目のトップの写真(11/8 長沢さん「全て同じテイストで画像を」)。見出しの帯の中に写真を組み込む。スマホは写真の下に見出し */
.page-hero--photo { position: relative; overflow: hidden; isolation: isolate; padding-block: 0; }
.page-hero__photo { display: block; width: 100%; height: 200px; object-fit: cover; object-position: 85% 50%; }
.page-hero--photo .wrap { padding-block: 16px 20px; }
.page-hero--photo h1 { margin-bottom: 0; }
.page-hero--photo p:last-child { margin-top: 8px; }
.page-hero__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 1.3; }
@media (min-width: 768px) {
  .page-hero--photo { display: flex; align-items: center; min-height: 280px; }
  .page-hero__photo { position: absolute; top: 0; right: 0; z-index: -2; width: min(70%, 900px); height: 100%; }
  .page-hero--photo::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; width: min(70%, 900px);
    background: linear-gradient(90deg, #0e1522 0%, rgba(14,21,34,.7) 16%, rgba(14,21,34,0) 44%); }
  .page-hero--photo .wrap { width: 100%; padding-block: 40px; }
  .page-hero--photo h1, .page-hero--photo p:last-child, .page-hero__title { max-width: 36%; }
}
@media (min-width: 1100px) { .page-hero--photo h1, .page-hero--photo p:last-child, .page-hero__title { max-width: 400px; } }

/* サイトマップ(11/8) */
.sitemap { display: grid; gap: 40px 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .sitemap { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sitemap { grid-template-columns: repeat(3, 1fr); } }
.sitemap__group--wide { grid-column: 1 / -1; }
.sitemap h2 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--accent); font-size: 20px; }
.sitemap h2.sitemap__next { margin-top: 28px; }
.sitemap h2 a { color: var(--ink); text-decoration: none; }
.sitemap h2 a:hover { color: var(--accent); }
.sitemap h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap li a { display: inline-block; padding: 5px 0; color: var(--ink); }
.sitemap li a:hover { color: var(--accent); }
.sitemap__top { margin-bottom: 16px !important; }
.sitemap__cols { display: grid; gap: 24px 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

/* 表が中心のページ(ダウンロード、動作確認表、よくあるご質問。11/8 tools/rebuild_table_pages.py) */
.dtpage h2 { margin: 40px 0 12px; font-size: 22px; }
.dtpage > h2:first-child, .dtpage > .dtpage__updated + h2 { margin-top: 0; }
.dtpage h3 { margin: 32px 0 10px; padding-left: 10px; border-left: 4px solid var(--accent); font-size: 18px; }
.dtpage p { margin: 0 0 12px; line-height: 1.8; }
.dtpage__updated { color: var(--muted); font-size: 13px; }
.dtpage__note { margin-top: 12px !important; color: var(--muted); font-size: 13px; }
.dtpage [id] { scroll-margin-top: calc(var(--header-height) + 16px); }
.dtnews { padding: 16px 20px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--tint); }
.dtnews h2 { margin: 0 0 8px !important; font-size: 16px; }
.dtnews p { margin: 0; }
.dt-red { color: var(--alert); }
.dtpage .jumpnav { margin: 0 0 8px; }
.dt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dt { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; line-height: 1.6; }
.dt th, .dt td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: middle; }
.dt thead th { background: var(--tint); font-weight: 700; text-align: center; }
.dt td.is-na { color: var(--muted); text-align: center; background: #fbfcfd; }
.dt--matrix th, .dt--matrix td { padding: 8px 4px; text-align: center; }
.dt--matrix td:first-child { padding-inline: 10px; text-align: left; }
@media (max-width: 767px) {
  .dt--matrix { font-size: 12px; line-height: 1.4; }
  .dt--matrix th, .dt--matrix td { padding: 5px 1px; }
  .dt--matrix thead th { font-size: 10px; }
  .dt--matrix td:first-child { padding-inline: 5px; min-width: 84px; overflow-wrap: anywhere; }
  /* 列の多い表は、スマホでは 1 行ずつカードにする */
  .dt--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dt--stack, .dt--stack tbody, .dt--stack tr, .dt--stack td { display: block; width: 100%; }
  .dt--stack tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .dt--stack td { border: 0; padding: 6px 14px; }
  .dt--stack td:first-child { padding-block: 10px; background: var(--tint); font-weight: 700; }
  .dt--stack td:not(:first-child)::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; }
  .dt--stack td.is-na { display: none; }
}

/* ライセンス取得ページ(/dl/ 11/8) */
.dlform { max-width: 640px; }
.dlform__lead { margin: 0 0 28px; line-height: 1.9; }
.dlform__row { margin-bottom: 20px; }
.dlform__row label { display: block; margin-bottom: 6px; font-weight: 700; }
.dlform__row input, .dlform__row select { display: block; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid #b9c1cc; border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.dlform__check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 28px; line-height: 1.6; }
.dlform__check input { margin-top: 5px; }
.dlform__submit { width: 100%; font: inherit; font-weight: 700; cursor: pointer; }
.dlmodal { display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: 16px; background: rgba(14,21,34,.55); }
.dlmodal.is-open { display: flex; }
.dlmodal__panel { width: 100%; max-width: 480px; max-height: 80vh; overflow: auto; padding: 24px; border-radius: var(--radius); background: #fff; line-height: 1.8; }
.dlmodal__panel #result { margin-bottom: 20px; overflow-wrap: anywhere; }
.dlmodal__panel .btn { width: 100%; background: #fff; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; }

.pillar-lead { margin: 0 0 28px; line-height: 1.9; }

/* フォームの終了画面(/support/supform_complete*.html) */
.formdone { max-width: 640px; }
.formdone p { margin: 0 0 16px; line-height: 1.9; }
.formdone__back { margin: 32px 0 0 !important; }

/* お問い合わせの確認画面・エラー画面(/support/form/form-*.php) */
.formconfirm { max-width: 760px; }
.formconfirm h2 { margin: 0 0 12px; font-size: 22px; }
.formconfirm p, .formconfirm li { line-height: 1.9; }
.formconfirm p { margin: 0 0 12px; }
.formconfirm ul { margin: 0 0 16px; padding-left: 1.4em; }
.formconfirm .noticebox { margin: 0 0 16px; line-height: 1.8; }
.formconfirm .error_messe { margin: 6px 0; color: var(--alert); }
.formconfirm .formTable { width: 100%; margin: 20px 0 0; border-collapse: collapse; border-top: 1px solid var(--line); }
.formconfirm .formTable th, .formconfirm .formTable td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.7; overflow-wrap: anywhere; }
.formconfirm .formTable th { width: 32%; background: #f5f7fa; font-weight: 700; }
.formconfirm__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0 !important; }
.formconfirm__actions input.btn { min-width: 180px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.formconfirm__actions input.btn--primary { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 572px) {
  .formconfirm .formTable th, .formconfirm .formTable td { display: block; width: auto; border-bottom: 0; }
  .formconfirm .formTable th { padding: 12px 0 2px; background: none; color: var(--muted); font-size: 14px; }
  .formconfirm .formTable td { padding: 0 0 12px; border-bottom: 1px solid var(--line); }
  .formconfirm__actions input.btn { width: 100%; }
}

/* トップの主な製品: マウスを乗せると製品ロゴがふわっと浮かぶ */
.fprod__overlay { display: none; }
@media (hover: hover) {
  .fprod__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 9%; background: linear-gradient(135deg, rgba(10,18,36,.9), rgba(11,60,120,.8)); -webkit-backdrop-filter: blur(4px) saturate(1.2); backdrop-filter: blur(4px) saturate(1.2); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
  .fprod__img .fprod__overlay img, .fprod__wordmark { opacity: 0; transform: translateY(16px) scale(.95); transition: opacity .6s cubic-bezier(.22,.61,.36,1) .08s, transform .8s cubic-bezier(.22,.61,.36,1) .08s, filter .8s ease .08s; }
  .fprod__img .fprod__overlay img { width: 84%; height: auto; max-height: 46%; object-fit: contain; }
  .fprod__wordmark { color: #fff; font-size: clamp(22px, 2.5vw, 32px); font-weight: 800; letter-spacing: .02em; text-align: center; line-height: 1.3; word-break: keep-all; }
  .fprod a:hover .fprod__overlay, .fprod a:focus-visible .fprod__overlay { opacity: 1; }
  .fprod a:hover .fprod__overlay img, .fprod a:focus-visible .fprod__overlay img, .fprod a:hover .fprod__wordmark, .fprod a:focus-visible .fprod__wordmark { opacity: 1; transform: none; filter: drop-shadow(0 0 16px rgba(130,195,255,.6)); }
}
@media (prefers-reduced-motion: reduce) {
  .fprod__overlay, .fprod__img .fprod__overlay img, .fprod__wordmark { transition: opacity .2s linear; transform: none; }
}

/* ヘッダーのオンラインストア: 左にカートのアイコン */
.global-nav__shop a { display: flex; align-items: center; gap: 6px; }
.global-nav__cart { flex: none; }

/* 大学生協向け製品情報への案内(11/9) */
.infocard--wide { grid-column: 1 / -1; }
.market__more { margin: 12px 0 0; font-size: 14px; font-weight: 700; }
.market__more a::after { content: " →"; }