@charset "UTF-8";
/* ============================================================
   GROOVE X 準拠モック — 株式会社カルテ庫
   数値は groove-x.com の styles.css から実測して移植している。
   GX は html{font-size:62.5%} = 1rem 10px。ここでは px に直して書く。
   ============================================================ */

:root {
  --c-white: #ffffff;
  --c-black: #000000;
  --c-text: #333333;
  --c-gray-bg: #f2f2f2;
  --c-border: #dedede;
  --c-muted: #707f89;

  --c-accent: #E60016;   /* karteco-corp の :root 準拠 */
  --c-sub1: #FFAA00;

  --header-h: 70px;

  /* 画面端からの余白（ヘッダーのロゴ・メニューボタン・ドロワー）。
     20px 固定だと PCで1.4%・狭幅で4.0%となり、狭いほど内側へ寄って見えた。
     1.4vw を基準に、狭幅は14pxを下限、広い画面は20pxを上限にする
     （1440pxで 1.4vw=20.16 → 20px に収まるので、この1本で全幅をまかなえる）。
     ここを1か所にまとめる前は、ヘッダーだけ直してドロワーを取りこぼす、を
     3回繰り返した（ロゴの影・ロゴの余白・ドロワー。2026-09-03）。 */
  --edge-gap: clamp(14px, 1.4vw, 20px);

  --font-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* GX: 下層は .l-main{padding-top:80px}、トップだけ .p-top .l-main{padding-top:0} で
     ヘッダーがメインビジュアルに重なる。ここも同じ構造にする */
  padding-top: var(--header-h);
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-text);
  background: var(--c-white);
  letter-spacing: 0.04em;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* ol を外していたため .c-bread に既定の margin 1em が残り、top:-30px が -15px 相当になっていた */
ul, ol { list-style: none; margin: 0; padding: 0; }
dl, dd { margin: 0; }
.en { font-family: var(--font-en); letter-spacing: 0.12em; }

.inner { width: min(1080px, 88%); margin-inline: auto; }
.inner--narrow { width: min(840px, 88%); margin-inline: auto; }

.section { padding: 120px 0; }
.section--gray { background: var(--c-gray-bg); }
@media (max-width: 1023px) {
  .section { padding: 72px 0; }
}

/* ---------- 見出し ---------- */
.sec-head { margin: 0 0 56px; }
.sec-head__en {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-accent);
  margin-bottom: 14px;
}
.sec-head__jp {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
@media (max-width: 1023px) {
  .sec-head { margin-bottom: 36px; }
  .sec-head__jp { font-size: 22px; }
}

/* ============================================================
   ヘッダー（白背景・ロゴは濃色版）
   ============================================================ */
/* ロゴの margin box(80px) がヘッダー高(70px)を超えて行ボックスが伸び、
   vertical-align:middle の JP/EN がヘッダー外へ落ちていたので flex で揃える */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--c-white);
  z-index: 2000;
}
/* GX のヘッダーは fixed ではなく absolute。つまり**ページと一緒にスクロールして消える**。
     .l-header       { position: absolute; top: 0; }
     .l-header.fixed { position: fixed; background-color: #fff; }   ← JS が後から付与
   こちらを fixed のままにしていたので、ヘッダーが常時 MV の上に居座っていた。同じ構造に直す。 */
body.page-top { padding-top: 0; }
.page-top .header {
  position: absolute;
  background: transparent;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* ヒーローを通り過ぎたら白い固定ヘッダーとして戻ってくる（GX .fixed 相当）。
   keyframes で translateY(-100%) から入れると fill-mode の都合で
   付与直後に画面外へ吸い込まれるため、transition で素直に出す。 */
.page-top .header.is-fixed {
  position: fixed;
  background: var(--c-white);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

.header__logo { display: block; margin: 0 0 0 var(--edge-gap); flex: none; }
.header__logo img { width: 173px; height: auto; }

/* ---------- 言語切替（GX .head__language） ---------- */
.head__language {
  display: inline-block;
  /* <p> の既定 margin 1em が残るとヘッダーからはみ出して次行に落ちるので明示的に消す */
  margin: 0 0 0 37px;
  vertical-align: middle;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: bold;
  color: #ccc;
  letter-spacing: 0.08em;
}
.head__language a { color: #ccc; transition: color 0.3s; }
.head__language a:hover { color: #888; }
.head__language a.is-curr { color: #333; }
/* ドロワー内は反転（GX .openheader__head .head__language） */
.drawer__head .head__language a { color: #333; }
.drawer__head .head__language a:hover { color: #777; }
.drawer__head .head__language a.is-curr { color: #fff; }

.footer__language { margin: 0 0 20px; font-family: var(--font-en); font-size: 12px; font-weight: bold; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); }
.footer__language a { color: rgba(255, 255, 255, 0.45); transition: color 0.3s; }
.footer__language a.is-curr { color: #fff; }

@media (max-width: 1023px) {
  .head__language { margin-left: 16px; }
}

@media (max-width: 1023px) {
  :root { --header-h: 60px; }
  .header__logo img { width: 140px; }
  /* 2026-09-03：ヘッダーの左右余白を画面幅に連動させる（りょうた指摘）。
     20px 固定だと PC で 1.4%、狭幅では 6.0% にあたり、狭いほどロゴが
     内側へ寄って見えていた。1.4vw を基準にし、狭幅では詰まりすぎないよう
     14px を下限、PC では従来どおり 20px を上限にする。
     右のメニューボタンも同じ値にして左右対称を保つ。 */
}

/* ---------- ハンバーガー（GX: 50×50 / top10 right20 / 2本線） ---------- */
.menubtn {
  position: fixed;
  top: 10px;
  right: var(--edge-gap);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3001;
}
/* GX は背景色・線の色・太さにトランジションを掛けていない（transform だけ .3s）。
   ＝ 四角と白線は瞬時に切り替わり、×への回転だけがアニメーションする。 */
.menubtn__border { position: relative; width: 20px; height: 12px; }
.menubtn__border span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #444;
  transition: transform 0.3s;
}
.menubtn__border span:nth-of-type(1) { top: 0; }
.menubtn__border span:nth-of-type(2) { bottom: 0; }

/* 開いている間は #222 の四角に白い × （GX と同じ） */
.menubtn[aria-expanded="true"] { background-color: #222; }
.menubtn[aria-expanded="true"] .menubtn__border { width: 19px; height: 19px; }
.menubtn[aria-expanded="true"] .menubtn__border span { background-color: #fff; height: 1px; }
.menubtn[aria-expanded="true"] .menubtn__border span:nth-of-type(1) { top: 9px; transform: rotate(45deg); }
.menubtn[aria-expanded="true"] .menubtn__border span:nth-of-type(2) { bottom: 9px; transform: rotate(-45deg); }

/* ============================================================
   ドロワー（GX: 黒地・左寄せ・破線プレフィックス）
   ============================================================ */
/* GX の開閉は jQuery の slideDown(800) / slideUp(800)。
   ＝ opacity のフェードではなく **高さ（と padding）が 0 から伸びる**。
   黒い面がブラインドのように上から降りてきて、中身が上から順に現れる。
   jQuery 既定の easing "swing" は 0.5 - cos(p*PI)/2 ＝ easeInOutSine なので
   CSS では cubic-bezier(0.37, 0, 0.63, 1) が等価。 */
/* height を 0 → 100% で動かす実装を試したが、この環境では inline 指定ですら
   computed height が 0px のままになり（実測済み）動かなかった。
   そこでパネルは常に全画面サイズのまま置き、**clip-path で上から露出させる**。
   中身は動かず露出面だけ増えるので、slideDown と同じ「ブラインドが降りる」見え方になる。 */
.drawer {
  position: fixed;
  inset: 0;
  padding-bottom: 50px;
  background-color: #000;
  overflow-y: auto;
  z-index: 3000;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s cubic-bezier(0.37, 0, 0.63, 1),
              visibility 0s linear 0.8s;
}
.drawer.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.37, 0, 0.63, 1),
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer.is-open { transition: none; }
}

.drawer__head { display: flex; align-items: center; height: var(--header-h); }
.drawer__head .drawer__logo { display: block; margin: 0 0 0 var(--edge-gap); flex: none; }
.drawer__head .drawer__logo img { width: 173px; height: auto; }

.drawer__inner { position: relative; padding-left: var(--edge-gap); }

.drawer__menu { margin-top: 45px; }
.drawer__menu li {
  position: relative;
  padding-left: 25px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
}
.drawer__menu li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 18px;
  height: 1px;
  background-color: #fff;
}
.drawer__menu li + li { margin-top: 35px; }
.drawer__menu li a { color: #fff; transition: opacity 0.3s; }
.drawer__menu li a:hover { opacity: 0.55; }

@media (max-width: 1023px) {
  .drawer__head .drawer__logo img { width: 140px; }
  /* 2026-09-03：ヘッダーのロゴを clamp(14px,1.4vw,20px) にしたのに
     ドロワー側が 20px 固定のままで、メニューを開くとロゴが6pxずれていた
     （りょうた指摘・狭幅で実測）。同じ値に揃える。 */
}

/* ============================================================
   ヒーロー
   ============================================================ */
/* GX .p-top__mv--video: height 960px / video は object-fit: cover
   コピーは黒・右寄せ・right 56px・top 60% で縦中央合わせ */
/* 仮当ての動画が 1920×1920 の正方形のため、GX と同じ cover だと高さ 960px の枠に
   切り抜かれて頭が見切れる（1117px 幅で上下 78px ずつカット）。
   動画の地は白なのでページ背景と同色 → contain にすると余白が見えず全体が入る。
   本番用の 16:9 動画に差し替えたら GX と同じ cover に戻す。 */
/* GX と同値：`.p-top__mv--video { height: 960px }` ＋ `video { object-fit: cover }`。
   全面トリミングなので左右に余白は出ず、被写体は大きく、上端は多少切れる。
   ＝ groove-x.com のトップと同じ見え方。
   （contain に逃がしていた版は、左右に白余白が出て被写体も小さく、GX と別物だった） */
.hero { position: relative; height: 768px; overflow: hidden; background: #fff; }   /* 960→768（80%） */
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }

.hero__copy {
  position: absolute;
  right: 56px;
  top: 60%;
  transform: translateY(-50%);
  text-align: right;
  color: #000;
  z-index: 2001;
}
.hero__catch {
  margin: 0;
  font-family: "Helvetica Neue", "Arial Black", Arial, var(--font-jp);
  font-size: 60px;
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: 0.01em;
}
.hero__catch span { display: block; }
.hero__catch span + span { margin-top: 16px; }
/* GX は 4 行すべて 60px の塊。こちらは 3 行目が確定していないので、
   塊としての重さを揃えるところまで（14px → 26px）寄せてある。
   タグラインが決まったら 60px の 4 行構成にすれば完全に一致する。 */
.hero__sub { margin: 16px 0 0; font-family: var(--font-en); font-size: 26px; font-weight: 500; letter-spacing: 0.1em; }

/* GX: @media(max-width:1023px) で .p-top__mv--video { height:620px }、コピーは左上へ */
@media (max-width: 1023px) {
  .hero { height: 496px; }   /* 620→496（80%） */
  .hero__copy { right: 16px; top: 36px; bottom: auto; transform: none; width: calc(100% - 32px); }
  .hero__catch { font-size: 20px; line-height: 1.08; }
  .hero__catch span + span { margin-top: 10px; }
}

/* ============================================================
   NEWS 枠（GX の「販売中」ブロックの構造をそのまま踏襲）
     .lovot        → border 10px #000 / padding 20px / width 960px
     .lovot__wrap  → 白地 / box-shadow 0 2px 21px rgba(0,0,0,.1) / padding 40px 45px
     .lovot__frame → 34×25 のカギ括弧（2px）
   ============================================================ */
.framebox {
  border: #000 10px solid;
  padding: 20px;
  width: 960px;
  max-width: 100%;
  margin: 120px auto 0;
}
.framebox__wrap {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 21px rgba(0, 0, 0, 0.1);
  padding: 40px 45px;
}
.framebox__frame { position: absolute; width: 34px; height: 25px; }
.framebox__frame::before { content: ""; position: absolute; width: 2px; height: 25px; background-color: #000; }
.framebox__frame::after  { content: ""; position: absolute; width: 25px; height: 2px; background-color: #000; }
.framebox__frame--tl { top: 0; left: 0; }
.framebox__frame--tl::before { top: 0; left: 0; }
.framebox__frame--tl::after  { top: 0; left: 10px; }
.framebox__frame--tr { top: 0; right: 0; }
.framebox__frame--tr::before { top: 0; right: 0; }
.framebox__frame--tr::after  { top: 0; right: 10px; }
.framebox__frame--bl { bottom: 0; left: 0; }
.framebox__frame--bl::before { bottom: 0; left: 0; }
.framebox__frame--bl::after  { bottom: 0; left: 10px; }
.framebox__frame--br { bottom: 0; right: 0; }
.framebox__frame--br::before { bottom: 0; right: 0; }
.framebox__frame--br::after  { bottom: 0; right: 10px; }

.framebox__inner { position: relative; }

/* GX .lovot__ttl / .lovot__read と同値 */
.framebox__ttl {
  margin: 0;
  color: #100d00;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 0.3em;
  text-align: center;
}
.framebox__read {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: normal;
  line-height: 2;
  text-align: center;
}

@media (max-width: 1023px) {
  .framebox { border-width: 6px; padding: 14px; margin-top: 64px; width: calc(100% - 24px); }
  .framebox__wrap { padding: 28px 18px; }
  .framebox__ttl { font-size: 22px; letter-spacing: 0.2em; }
  .framebox__read { font-size: 14px; }
}

/* ---------- 枠内の News 一覧 ---------- */
.news-list { margin: 36px 0 0; border-top: 1px solid var(--c-border); }
.news-item {
  display: grid;
  grid-template-columns: 116px 108px 1fr;
  align-items: center;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--c-border);
  transition: background-color 0.3s var(--ease);
}
.news-item:hover { background: rgba(0, 0, 0, 0.02); }
.news-item__date { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.1em; color: var(--c-muted); }
.news-item__cat {
  justify-self: start;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--c-muted);
  border: 1px solid var(--c-border);
  padding: 1px 10px;
  white-space: nowrap;
}
.news-item__title { font-size: 15px; line-height: 1.7; }

@media (max-width: 1023px) {
  .news-item { grid-template-columns: auto 1fr; gap: 6px 12px; padding: 14px 2px; }
  .news-item__title { grid-column: 1 / -1; font-size: 14px; }
}

/* ---------- ボタン（GX .c-btn と同値） ---------- */
.btn-row { display: flex; gap: 24px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
/* GX は PRODUCT 1本で 400px。2本並べる枠内では 1行に収まる幅に落とす */
.framebox .btn-row .c-btn { width: min(400px, calc(50% - 12px)); }

.c-btn {
  width: 400px;
  max-width: 100%;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
}
.c-btn a {
  position: relative;
  display: block;
  border: #cfcfcf 1px solid;
  padding: 8px 10px;
  transition: color 0.8s;
}
.c-btn a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #333;
  transition: width 0.8s;
}
.c-btn a span { position: relative; }
.c-btn a:hover { color: #fff; }
.c-btn a:hover::before { width: 100%; }

@media (max-width: 1023px) {
  .btn-row { gap: 12px; }
  /* 枠内の 2 分割指定を打ち消して縦積みに戻す（実測 125px まで痩せていた） */
  .c-btn, .framebox .btn-row .c-btn { width: 100%; font-size: 14px; }
}

/* ============================================================
   ABOUT（GX の about ページ構造を移植）
   ============================================================ */

/* ---------- MV（GX .p-about__mv / .mv__ttl / .mv__photo） ---------- */
/* GX は 500px。こちらは写真が未支給でプレースホルダのため、その高さがそのまま暗色になる。
   写真が入ったら 500px に戻してよい。 */
.about-mv { position: relative; height: 380px; overflow: hidden; }
/* GX と同じく写真を枠より 10% 高く敷き、その差分ぶんだけスクロールで動かす（パララックス）。
   横幅を合わせて縦は cover で切る。 */
.about-mv__photo {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 110%;
  background: url("about-mv.jpg") no-repeat center center;
  background-size: cover;
  will-change: transform;
}
/* 写真が未支給のページ用（PRODUCT 等） */
.about-mv__photo--plain {
  background: linear-gradient(135deg, #2b3648 0%, #1c2636 60%, #12181f 100%);
  display: grid;
  place-items: center;
}
.about-mv__ttl {
  position: absolute;
  top: 17px;
  margin: 0;
  padding: 5px 40px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0.1em;
  text-align: center;
  z-index: 2;
}
@media (max-width: 1023px) { .about-mv { height: 280px; } .about-mv__ttl { padding: 5px 24px; font-size: 15px; } }

/* ---------- パンくず（GX .c-bread / .p-about .c-bread） ---------- */
.c-bread {
  position: absolute;
  top: -30px;
  left: calc((100% - 960px) / 4);
  width: calc(100% - ((100% - 960px) / 4));
  height: 30px;
  padding: 6px 20px;
  background-color: #333;
  border-bottom: #000 1px solid;
  z-index: 1001;
}
.c-bread__page { display: inline-block; font-family: var(--font-en); font-size: 12px; font-weight: bold; color: #fff; }
/* flex にしたことで、テキスト由来の空白（" / " の前後）が潰れて
   「HOME/ NEWS/」のように左だけ詰まって見えるようになった。
   区切りは余白で作る（2026-09-03）。 */
.c-bread__page + .c-bread__page::before { content: "/"; font-weight: normal; margin: 0 6px; }
.c-bread__page a { font-weight: normal; transition: opacity 0.3s; }
.c-bread__page a:hover { opacity: 0.6; }
@media (max-width: 1023px) { .c-bread { left: 0; width: 100%; } }

/* 2026-09-03：高さ30px固定なのに overflow の指定が無く、記事タイトルのような
   長いパンくずが2行になると溢れて下の暗色帯に重なっていた（りょうた指摘）。
   1行に収め、はみ出した末尾を「…」で省略する。
   記事タイトルの全文はすぐ下の h1 に出るので、パンくず側は短くてよい。 */
.c-bread {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  overflow: hidden;
}
.c-bread__page { flex: 0 0 auto; }
.c-bread__page:last-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* padding は overflow の外側なので、右端の 20px ぶんを内側で確保しないと
     省略記号が出る前に切れてしまう（2026-09-03 実測）。 */
  padding-right: 20px;
  box-sizing: content-box;
}
/* 右padding は最終要素側で持つので、コンテナ側からは外す */
.c-bread { padding-right: 0; }

/* ---------- MISSION / VISION 帯（GX .aboutintro）
     黒帯の上を #f2f2f2 の面が覆っていて、表示領域に入ると幅 0 まで引いて中身が現れる ---------- */
.aboutintro { position: relative; margin: 0 auto; padding-left: calc((100% - 960px) / 4); }
/* GX 実CSS（common/css/styles.css）の実装に合わせた。要点は2つ。
   (1) left を指定しない。静的位置＝padding-left の内側なので、暗色帯は左の余白の分だけ
       右へ寄る。幅を calc(100% - 余白) にしてあるので右端はちょうど 100% に収まり、
       横スクロールは出ない（left:0 + width:100% だと余白が塗り潰される＝以前の状態）。
   (2) height は 100% ではなく 570px の固定。要素の高さより低い／高いに関わらず
       570px の矩形になるので、要素より下へはみ出し、後続の白タイルがその上に乗る。
       「白タイルが受けに乗る」見え方はこの overhang で作られている。 */
.aboutintro::before {
  content: "";
  position: absolute;
  top: 0;
  width: calc(100% - ((100% - 960px) / 4));
  /* GX は 570px の固定値。ただしGXは帯の中身が長く（MISSION／VISION／PHILOSOPHY…）
     570px がほぼ埋まる。こちらは中身が短いページが多く、固定にすると
     ページごとに 173〜276px の空きが出た（about 173 / product 276 / 開発 237）。
     中身に追従させ、はみ出し量だけを固定にする。 */
  height: calc(100% + 120px);
  background-color: #333;
}
/* GX と同じブレイクポイント。1135px 以下では余白を作らず全幅に戻す */
@media (max-width: 1135px) {
  .aboutintro::before { left: 0; width: 100%; }
}
.aboutintro::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  /* GX と同じ「画面いっぱいの白幕」。height:100vh で最初の1画面を丸ごと覆い、
     is-visible で width:0 まで引いて左→右に全体が現れる。帯だけを覆っていた前の実装だと、
     下のタイルが別々にフェードしてバラバラに見えていた（頭の見切れの原因）。 */
  height: 100vh;
  width: calc(100% - ((100% - 960px) / 4));
  background-color: #f2f2f2;
  z-index: 1001;
  transition: width 0.9s ease 0.6s;   /* 白モヤに合わせ全体を伸ばした：0.6s待って0.9sで引く（終了≈1.55s） */
}
.aboutintro.is-visible::after { width: 0; }

.aboutintro__inner {
  position: relative;
  width: 960px;
  max-width: 100%;
  margin-left: calc((100vw - 960px) / 4);
  /* GX は 70px 0 120px。こちらは帯の中身が2〜3行と短く、同じ余白だと黒が余る。詰めた */
  padding: 44px 0 56px;
  text-align: center;
}
.aboutintro__label { margin: 0; color: #fff; font-family: var(--font-en); font-size: 20px; line-height: 2; letter-spacing: 0.1em; }
.aboutintro__inner h3 { margin: 24px 0 0; color: #fff; font-size: 22px; font-weight: normal; letter-spacing: 0.1em; line-height: 1.8; }
.aboutintro__inner h3 + .aboutintro__label { margin-top: 64px; }

@media (max-width: 1023px) {
  /* GX 実CSS と同じ：狭幅では ::before を捨て、要素自身を暗色にする。
     margin-bottom を負にして padding-bottom で相殺すると、要素の下端が
     見た目より上がるので、後続の白タイルが暗色の上に乗る（PC の overhang と同じ効果）。 */
  .aboutintro { padding-left: 0; background-color: #333; margin-bottom: -110px; padding-bottom: 110px; }
  .aboutintro::before { display: none; }
  .aboutintro::after { width: 100%; }
  .aboutintro__inner { margin-left: 0; padding: 32px 20px 40px; }
  .aboutintro__label { font-size: 15px; }
  .aboutintro__inner h3 { font-size: 17px; }
}

/* ---------- 白いカード（GX .contentsbox） ---------- */
.contentsbox {
  position: relative;
  width: 960px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 70px 40px;
  background-color: #fff;
  box-shadow: 0 2px 21px rgba(0, 0, 0, 0.1);
}
/* 帯のはみ出し 120px のうち 28px 下がった位置にタイルが来る＝重なり 92px。 */
.contentsbox--first { margin-top: 28px; }
.contentsbox + .contentsbox { margin-top: 110px; }

.contentsbox__ttl {
  margin: 0;
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: center;
}
.contentsbox__ttl--jp { font-family: var(--font-jp); }
.contentsbox__catch { margin: 20px 0 0; font-size: 24px; letter-spacing: 0.1em; text-align: center; }
.contentsbox figure { margin: 30px 0 0; }
.contentsbox figure figcaption { margin-top: 35px; }
.contentsbox__photo { text-align: center; }
.contentsbox__text { margin: 0; font-size: 16px; line-height: 2; letter-spacing: 0.11em; }
.contentsbox__ttl + .contentsbox__text { margin-top: 20px; }

@media (max-width: 1023px) {
  .contentsbox { padding: 40px 20px; }
  .contentsbox--first, .contentsbox + .contentsbox { margin-top: 56px; }
  .contentsbox__ttl { font-size: 16px; }
  .contentsbox__catch { font-size: 18px; }
  .contentsbox__text { font-size: 14px; }
}

/* ---------- コントローラーあいさつ本文
     行頭の全角字下げが強調の意味を持つので、字下げ段は別クラスで幅と大きさを変える ---------- */
.message__body { margin-top: 30px; }
.message__p { margin: 0; font-size: 16px; line-height: 2; letter-spacing: 0.11em; text-indent: 1em; }
.message__p + .message__p { margin-top: 1.4em; }
.message__lead { margin: 1.8em 0 0; font-size: 16px; line-height: 2; letter-spacing: 0.11em; }

/* 字下げ1段 */
.message__catch {
  margin: 0.8em 0 0;
  padding-left: 1em;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.14em;
}
/* 字下げ2段（最大の見せ場） */
.message__catch--strong {
  margin: 1.2em 0;
  padding-left: 2em;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.14em;
  color: var(--c-accent);
}
/* 字下げ3段（箇条） */
.message__catch--item {
  margin: 0.4em 0 0;
  padding-left: 3em;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.12em;
}
.message__sign { margin: 2.4em 0 0; text-align: right; font-size: 16px; letter-spacing: 0.14em; }
.message__sign strong { font-size: 20px; font-weight: 600; margin-left: 14px; }

@media (max-width: 1023px) {
  .message__p, .message__lead { font-size: 14px; }
  .message__catch { font-size: 16px; padding-left: 0.8em; }
  .message__catch--strong { font-size: 18px; padding-left: 1.2em; }
  .message__catch--item { font-size: 15px; padding-left: 1.8em; }
}

.placeholder {
  border: 1px dashed rgba(0, 0, 0, 0.3);
  color: var(--c-muted);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-align: center;
  padding: 18px 20px;
  line-height: 1.8;
  margin: 0;
  display: inline-block;
}
.placeholder--dark { border-color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.8); }
.placeholder strong { display: block; font-size: 13px; color: var(--c-accent); margin-bottom: 6px; }
.placeholder--dark strong { color: var(--c-sub1); }
.placeholder span { font-family: var(--font-jp); letter-spacing: 0.04em; }

/* ---------- 部署ページ（ワンダー配下） ---------- */
.dept-list { display: grid; gap: 12px; margin: 24px 0 0; }
.dept-list li { position: relative; padding-left: 28px; font-size: 16px; line-height: 2; letter-spacing: 0.08em; }
.dept-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 16px;
  height: 2px;
  background: var(--c-accent);
}

/* ---------- 部署ページ本文の小見出し ---------- */
.subhead {
  position: relative;
  margin: 64px 0 20px;
  padding-left: 16px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.subhead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 4px;
  height: 1.2em;
  background: var(--c-accent);
}
.subhead--sub { font-size: 17px; margin-top: 40px; }
.note { margin: 16px 0 0; font-size: 13px; line-height: 1.9; color: var(--c-muted); }

/* ---------- 番号付きカード（安全のための仕組み / 4本柱） ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0 0; }
.card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 22px 22px;
  background: #fafafa;
  border-left: 4px solid var(--c-accent);
}
.card__no { font-family: var(--font-en); font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--c-accent); }
.card__ttl { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: 0.06em; }
.card__txt { margin: 0; font-size: 14px; line-height: 1.9; color: #555; }

/* ---------- 5レイヤー ---------- */
.layers { display: grid; gap: 8px; margin: 24px 0 0; }
.layer {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  background: #1c2636;
  color: #fff;
}
.layer:nth-child(2) { background: #24324a; }
.layer:nth-child(3) { background: #2b3b57; }
.layer:nth-child(4) { background: #334464; }
.layer:nth-child(5) { background: #3b4d71; }
.layer__no { font-family: var(--font-en); font-weight: 700; opacity: 0.6; }
.layer__name { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; }
.layer__sub { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.06em; opacity: 0.8; }

/* ---------- 1時間パイプライン ---------- */
.pipeline { margin: 24px 0 0; overflow-x: auto; padding-bottom: 6px; }
/* PC（カード内幅 880px）で 8 列が収まる上限は (880 - gap 8×7) / 8 = 103px。
   min を 112px に取っていたため 952px に膨らみ、⑧ 監視が枠から溢れていた。 */
.pipeline__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(94px, 1fr); gap: 8px; min-width: 760px; }
.step { position: relative; padding: 14px 12px 16px; background: #fafafa; border-top: 3px solid var(--c-border); text-align: center; }
.step--human { border-top-color: var(--c-accent); background: #FDF1F2; }
.step--auto  { border-top-color: #1c2636; }
.step--ai    { border-top-color: var(--c-sub1); background: #FFF8E8; }
.step__no { font-family: var(--font-en); font-size: 12px; font-weight: 700; color: var(--c-muted); }
.step__name { margin: 6px 0 8px; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0.04em; }
.step__by { font-size: 11px; letter-spacing: 0.08em; color: var(--c-muted); }
.step__min { display: block; font-family: var(--font-en); font-size: 15px; font-weight: 700; color: var(--c-text); margin-top: 2px; }

.pipeline__legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: 12px; color: var(--c-muted); }
.pipeline__legend span { display: inline-flex; align-items: center; gap: 7px; }
.pipeline__legend i { width: 14px; height: 3px; display: inline-block; }
.pipeline__total {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 18px;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ---------- 2カラムリスト（安全装置 / 品質ゲート） ---------- */
.twocol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 24px 0 0; }
.twocol h4 { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; }
.twocol ul { display: grid; gap: 10px; }
.twocol li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.9; }
.twocol li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 12px;
  height: 2px;
  background: var(--c-accent);
}
.twocol code {
  font-family: var(--font-en);
  font-size: 12px;
  background: #f0f0f0;
  padding: 1px 6px;
}

/* ---------- ロードマップ表 ----------
   狭幅で表がカード幅を 32px 超えていたので、表だけ独立して横スクロールさせる */
.roadmap-wrap { overflow-x: auto; margin: 24px 0 0; }
.roadmap { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.roadmap th, .roadmap td { padding: 14px 12px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.roadmap thead th { border-bottom: 2px solid var(--c-text); font-size: 13px; letter-spacing: 0.08em; white-space: nowrap; }
.roadmap tbody th { font-weight: 600; white-space: nowrap; }
.roadmap td:last-child { font-family: var(--font-en); white-space: nowrap; }

/* ---------- まとめ ---------- */
.summary { margin: 40px 0 0; padding: 28px 28px; background: #FDF1F2; border-left: 4px solid var(--c-accent); }
.summary ul { display: grid; gap: 12px; }
.summary li { position: relative; padding-left: 24px; font-size: 16px; font-weight: 600; line-height: 1.8; letter-spacing: 0.04em; }
.summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 14px;
  height: 2px;
  background: var(--c-accent);
}

@media (max-width: 1023px) {
  .subhead { font-size: 17px; margin-top: 44px; }
  .cards, .twocol { grid-template-columns: 1fr; gap: 12px; }
  .twocol { gap: 28px; }
  .layer { grid-template-columns: 32px 1fr; }
  .layer__sub { grid-column: 2; }
  .roadmap { font-size: 13px; }
  .roadmap th, .roadmap td { padding: 12px 8px; }
  .summary { padding: 20px 18px; }
  .summary li { font-size: 14px; }
}

/* 5部署を行き来するためのタブ（v17 で製品詳細ページの「製品メニュー」にも同じ形で流用） */
.dept-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 48px; }
.dept-nav a {
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  border: 1px solid var(--c-border);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.dept-nav a:hover { color: var(--c-accent); border-color: var(--c-accent); }
.dept-nav a.is-curr { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

@media (max-width: 1023px) {
  .dept-list li { font-size: 14px; padding-left: 22px; }
  .dept-nav { gap: 8px; margin-top: 32px; }
  .dept-nav a { font-size: 12px; padding: 7px 12px; }
}

/* ---------- NEWS 一覧ページ ---------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.pager a, .pager span {
  min-width: 40px;
  padding: 9px 12px;
  border: 1px solid var(--c-border);
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-align: center;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.pager a:hover { color: var(--c-accent); border-color: var(--c-accent); }
.pager .is-curr { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.pager .is-disabled { color: var(--c-text3, #d8dbdd); }

/* ---------- 記事詳細 ---------- */
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 18px; }
.article__date { font-family: var(--font-en); font-size: 14px; letter-spacing: 0.1em; color: var(--c-muted); }
.article__cat {
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--c-muted);
  border: 1px solid var(--c-border);
  padding: 1px 12px;
}
.article__ttl { margin: 0 0 32px; font-size: 26px; font-weight: 600; line-height: 1.7; letter-spacing: 0.06em; }
.article__thumb { margin: 0 0 32px; background: #eef0f2; display: grid; place-items: center; aspect-ratio: 16 / 9; }
@media (max-width: 1023px) { .article__ttl { font-size: 19px; } }

/* ---------- ACCESS ---------- */
.map-wrap { margin: 24px 0 0; aspect-ratio: 16 / 9; background: #eef0f2; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1023px) { .map-wrap { aspect-ratio: 4 / 3; } }

/* ---------- CONTACT ---------- */
.contact-note { margin: 24px 0 0; padding: 22px 24px; background: #fafafa; border-left: 4px solid var(--c-sub1); font-size: 14px; line-height: 1.9; }

/* ---------- 会社概要（GX .company / .company__outline） ---------- */
.company { margin-top: 120px; }
/* access のように .company が暗色帯の直後に来るページは、`.aboutintro::before` の
   +120px overhang と margin-top:120px が相殺して見出しの上に余白が残らない
   （PC は可視ゼロ、狭幅は帯に潜って見出しが読めなくなっていた）。
   overhang ぶんを足して、見た目の余白を作る。 */
.aboutintro + .company { margin-top: 200px; }   /* 120px overhang + 80px */
.company__inner { width: 960px; max-width: calc(100% - 32px); margin: 0 auto; }
.company__ttl { margin: 0 0 40px; font-family: var(--font-en); font-size: 25px; font-weight: normal; letter-spacing: 0.1em; }
.company__outline {
  position: relative;
  margin: 0;
  padding: 30px 0;
  border-top: #ccc 1px solid;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.company__outline:last-of-type { border-bottom: #ccc 1px solid; }
/* GX の特徴的な右端の縦バー */
.company__outline::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  margin: auto;
  width: 5px;
  height: 98%;
  background-color: #1c2636;
}
.company__outline dt { font-weight: 600; }
.company__outline dd { margin: 10px 0 0; position: relative; }
.company__outline dd p { margin: 0; font-size: 14px; }

@media (max-width: 1023px) {
  .company { margin-top: 64px; }
  /* 狭幅の overhang は margin-bottom:-110px ぶん。110px + 48px */
  .aboutintro + .company { margin-top: 158px; }
  .company__ttl { font-size: 20px; margin-bottom: 24px; }
  .company__outline { padding: 20px 0; font-size: 14px; }
}

/* ---------- ペンタゴン ---------- */
.pentagon-lead { font-size: 17px; margin: 0 0 48px; }
/* `.contentsbox figure { margin: 30px 0 0 }` に詳細度で負けて auto が 0 になり
   図が左に 130px ずれていたため、同等以上の詳細度で中央寄せを指定する */
.pentagon-fig,
.contentsbox .pentagon-fig { max-width: 620px; margin: 30px auto 60px; }
.pentagon-fig svg { width: 100%; height: auto; display: block; }

/* 案D：ノード＆リンク
   ・部署どうしを結ぶ線（旧 .pentagon-web）は指示により削除した
   ・中心は丸ではなく五角形（.pentagon-core を polygon にしてある） */
.pentagon-link { stroke: var(--c-accent); stroke-width: 2.5; }          /* コントローラ → 各部署 */
.pentagon-core { fill: var(--c-accent); }                               /* 中心は赤系の五角形 */

/* 各部署ノード（ワンダー）は個別ページへのリンク */
.pentagon-node { cursor: pointer; }
.pentagon-node circle {
  fill: #ffffff;
  stroke: var(--c-accent);
  stroke-width: 2.5;
  transition: fill 0.3s ease, stroke-width 0.3s ease;
}
.pentagon-node text { transition: fill 0.3s ease; }
.pentagon-node:hover circle { fill: #FDF1F2; stroke-width: 4; }
.pentagon-node:hover text { fill: var(--c-accent); }
.pentagon-node:focus-visible circle { stroke-width: 4; }
.pentagon-node:focus { outline: none; }

.pentagon-fig svg .p-label { font-family: var(--font-jp); font-size: 19px; font-weight: 600; fill: #333333; }
.pentagon-fig svg .p-center {
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 600;
  fill: #ffffff;                                                        /* 赤地に白抜き */
  letter-spacing: 1;
}
.pentagon-fig--en svg .p-label { font-family: var(--font-en); font-size: 17px; }
.pentagon-fig--en svg .p-center { font-family: var(--font-en); font-size: 15px; letter-spacing: 0.8; }

/* 狭幅は viewBox 縮小で実効サイズが落ちるため user unit を拡大して補正
   （ノード直径 112 / 中心円直径 160 を超えない上限で調整・実測済み）。
   2026-09-03 修正：25px まで上げていたが、2行組みのラベル（事業／企画・事業企画／運営）の
   行送りが tspan の dy="20" 固定なので、文字が20pxを超えると行同士が重なっていた。
   dy はSVGの属性でCSSから動かせないため、行送りに収まる 18px を上限にする。 */
@media (max-width: 1023px) {
  .pentagon-fig svg .p-label { font-size: 18px; }
  .pentagon-fig svg .p-center { font-size: 20px; }
  .pentagon-fig--en svg .p-label { font-size: 19px; }
  .pentagon-fig--en svg .p-center { font-size: 19px; }
}

/* 役職はペンタゴンと同じ面で見せたいのでカード化し、左に階層を示すアクセントバーを立てる */
.roles { display: grid; gap: 12px; margin-top: 30px; }
.roles__row {
  display: grid;
  grid-template-columns: 190px 220px 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  background: #fafafa;
  border-left: 4px solid var(--c-accent);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.roles__row:hover { background: #FBE9EB; transform: translateX(3px); }
.roles__row:nth-child(2) { border-left-color: #F2454F; }
.roles__row:nth-child(3) { border-left-color: #F97E85; }
.roles__row:nth-child(4) { border-left-color: #FBB3B8; }
.roles__name { font-family: var(--font-en); font-size: 17px; font-weight: 700; letter-spacing: 0.14em; color: var(--c-accent); }
.roles__pos { font-weight: 600; }
.roles__desc { color: var(--c-muted); font-size: 14px; }
@media (max-width: 1023px) {
  .roles__row { grid-template-columns: 1fr; gap: 4px; padding: 16px 16px; }
  .roles__name { font-size: 15px; }
}

/* ============================================================
   事業企画ページ用の部品（WEB画面イメージ pptx の構成に対応）
   ============================================================ */

/* 番号付きの節見出し */
.sec-num{position:relative;margin:0 0 8px;padding-left:46px;font-size:24px;font-weight:600;
  line-height:1.5;letter-spacing:.06em}
.sec-num__n{position:absolute;left:0;top:.32em;font-family:var(--font-en);font-size:14px;
  font-weight:700;color:var(--c-accent);letter-spacing:.06em}
.sec-lead{margin:0 0 8px;padding-left:46px;font-size:15px;color:#555}
@media (max-width:1023px){
  .sec-num{font-size:18px;padding-left:34px}
  .sec-num__n{font-size:12px}
  .sec-lead{padding-left:34px;font-size:13px}
}

/* 01：本文＋右サイドの見出し語 */
.philo-top{display:grid;grid-template-columns:1fr 260px;gap:48px;align-items:start;margin-top:8px}
.philo-top__catch{margin:0 0 26px;font-size:38px;font-weight:600;line-height:1.45;letter-spacing:.04em}
.philo-top__lead{margin:0 0 14px;font-size:19px;font-weight:600;line-height:1.9}
.philo-top__sub{margin:0;font-size:14px;line-height:2;color:#666}
.side-note__label{margin:0 0 6px;font-family:var(--font-en);font-size:13px;font-weight:700;
  letter-spacing:.14em;color:var(--c-accent)}
.side-note__big{margin:0;font-size:40px;font-weight:600;color:#c9ced6;line-height:1.2}
.side-note__rule{margin:14px 0;height:2px;background:var(--c-accent)}
.side-note__txt{margin:0;font-size:13px;font-weight:600;line-height:1.9}
@media (max-width:1023px){
  .philo-top{grid-template-columns:1fr;gap:26px}
  .philo-top__catch{font-size:24px}
  .philo-top__lead{font-size:16px}
  .side-note__big{font-size:30px}
}

/* 02：中央のビジネスストーリー箱から4社へ枝が伸びる */
.story{margin-top:30px}
.story__box{max-width:520px;margin:0 auto;padding:22px 24px;background:#f6f7f9;
  border:1px solid #e4e7ec;text-align:center}
.story__box .lb{margin:0 0 8px;font-family:var(--font-en);font-size:12px;font-weight:700;
  letter-spacing:.12em;color:var(--c-accent)}
.story__box .tx{margin:0;font-size:22px;font-weight:600;line-height:1.6}
.story__stems{display:grid;grid-template-columns:repeat(4,1fr);height:56px}
.story__stems span{justify-self:center;width:1px;height:100%;background:#d7dbe1}
.story__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.story__cards div{padding:20px 12px;background:#fff;border:1px solid #e4e7ec;
  box-shadow:0 1px 4px rgba(0,0,0,.05);text-align:center;font-size:14px;font-weight:600}
.story__close{margin:30px 0 0;text-align:center;font-size:17px;font-weight:600}
@media (max-width:1023px){
  .story__box .tx{font-size:16px}
  .story__stems{grid-template-columns:repeat(2,1fr);height:28px}
  .story__cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .story__cards div{font-size:12.5px;padding:14px 8px}
  .story__close{font-size:14px}
}

/* 03：「無理」→ 変える勇気 */
.courage{display:grid;grid-template-columns:1fr 56px 1.15fr;gap:0;align-items:center;margin-top:30px}
.courage__muri{display:grid;gap:18px}
.courage__muri span{font-size:16px;color:#8a9099}
.courage__arrow{justify-self:center;width:38px;height:1.5px;background:#c2c7ce;position:relative}
.courage__arrow::after{content:"";position:absolute;right:0;top:-4px;
  border-top:1.5px solid #c2c7ce;border-right:1.5px solid #c2c7ce;width:9px;height:9px;
  transform:rotate(45deg)}
.courage__box{padding:26px 28px;background:#f6f7f9;border:1px solid #e4e7ec;
  box-shadow:0 1px 4px rgba(0,0,0,.05)}
.courage__box .lb{margin:0 0 8px;font-family:var(--font-en);font-size:12px;font-weight:700;
  letter-spacing:.12em;color:var(--c-accent)}
.courage__box .tx{margin:0 0 10px;font-size:30px;font-weight:600;letter-spacing:.04em}
.courage__box .sb{margin:0;font-size:13.5px;line-height:1.9;color:#666}
.courage__close{margin:30px 0 0;font-size:17px;font-weight:600;line-height:1.9}
@media (max-width:1023px){
  .courage{grid-template-columns:1fr;gap:20px}
  .courage__arrow{transform:rotate(90deg);margin:4px 0}
  .courage__muri span{font-size:14px}
  .courage__box .tx{font-size:22px}
  .courage__close{font-size:14px}
}

/* 04：3者の価値カード（左に赤いバー） */
.value-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.value-cards div{padding:22px 22px;background:#fff;border:1px solid #e8eaee;
  border-left:5px solid var(--c-accent);box-shadow:0 1px 4px rgba(0,0,0,.05)}
.value-cards h4{margin:0 0 10px;font-size:18px;font-weight:600;letter-spacing:.04em}
.value-cards p{margin:0;font-size:13px;line-height:1.9;color:#666}
.bigred{margin:26px 0 8px;text-align:center;font-size:32px;font-weight:700;
  letter-spacing:.08em;color:var(--c-accent)}
.center-close{margin:0 0 4px;text-align:center;font-size:17px;font-weight:600}
.center-note{margin:0;text-align:center;font-size:13px;color:#707f89}
@media (max-width:1023px){
  .value-cards{grid-template-columns:1fr;gap:12px}
  .value-cards h4{font-size:15px}
  .bigred{font-size:20px}
  .center-close{font-size:14px}
}

/* 05：5ステップ */
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin:36px 0 0}
.steps::before{content:"";position:absolute;left:10%;right:10%;top:29px;height:3px;
  background:#e4e7ec;z-index:0}
.steps__item{position:relative;z-index:1;text-align:center}
.steps__n{width:58px;height:58px;margin:0 auto;border-radius:50%;background:#fff;
  border:2px solid var(--c-accent);display:grid;place-items:center;
  font-family:var(--font-en);font-size:16px;font-weight:700;color:var(--c-accent)}
.steps__t{margin:12px 0 0;font-size:14px;font-weight:600}
@media (max-width:1023px){
  .steps{grid-template-columns:repeat(5,1fr)}
  .steps::before{top:19px;left:8%;right:8%;height:2px}
  .steps__n{width:38px;height:38px;font-size:13px}
  .steps__t{font-size:11px;margin-top:8px}
}

/* ---------- 役職の解説ブロック（組織図 文章.docx に対応） ---------- */
.role-block{margin-top:20px;padding:26px 28px;background:#fafafa;border-left:5px solid var(--c-accent)}
.role-block[data-tone="2"]{border-left-color:#F2454F}
.role-block[data-tone="3"]{border-left-color:#F97E85}
.role-block[data-tone="4"]{border-left-color:#FBB3B8}
.role-block__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin:0 0 6px}
.role-block__en{font-family:var(--font-en);font-size:19px;font-weight:700;letter-spacing:.12em;
  color:var(--c-accent)}
.role-block__tag{font-size:16px;font-weight:600;letter-spacing:.04em}
.role-block__pos{margin:0 0 12px;font-size:12.5px;color:var(--c-muted)}
.role-block__body p{margin:0;font-size:14px;line-height:2}
.role-block__body p + p{margin-top:1.1em}
.role-block__body .q{display:grid;gap:4px;margin:1.1em 0;padding-left:18px;
  border-left:2px solid var(--c-border);font-size:13.5px;color:#666}
@media (max-width:1023px){
  .role-block{padding:20px 18px}
  .role-block__en{font-size:16px}
  .role-block__tag{font-size:14px}
  .role-block__body p{font-size:13px}
}

/* ---------- フッター ---------- */
.footer { background: #1c2636; color: var(--c-white); padding: 72px 0 32px; margin-top: 120px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 48px; }
.footer__nav a { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.16em; opacity: 0.85; transition: opacity 0.3s var(--ease); }
.footer__nav a:hover { opacity: 1; color: var(--c-sub1); }
.footer__copy { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.1em; opacity: 0.55; }

/* ============================================================
   英語ページ（GX も EN では字間を詰める。例: .lovot__ttl .3em → .lovot__ttl--en .1em）
   ============================================================ */
.lang-en body,
body.lang-en {
  font-family: var(--font-en);
  letter-spacing: 0.01em;
}
body.lang-en .framebox__ttl { letter-spacing: 0.1em; }
body.lang-en .framebox__read { letter-spacing: 0.1em; }
body.lang-en .hero__catch { letter-spacing: 0.01em; }
body.lang-en .aboutintro__inner h3 { letter-spacing: 0.04em; line-height: 1.6; }
body.lang-en .contentsbox__text,
body.lang-en .message__p,
body.lang-en .message__lead { letter-spacing: 0.02em; }
body.lang-en .message__catch,
body.lang-en .message__catch--strong,
body.lang-en .message__catch--item { letter-spacing: 0.02em; }
body.lang-en .company__outline { letter-spacing: 0.04em; }
/* 英語は語が長いので字下げは em ではなく固定幅で揃える */
body.lang-en .message__p { text-indent: 1.5em; }

/* ペンタゴンの英語ラベルは語長が 2〜3 倍になるため縮めて枠を広げる */
.pentagon-fig--en svg .p-label { font-size: 15px; }
.pentagon-fig--en svg .p-center { font-size: 14px; }
@media (max-width: 1023px) {
  /* EN は 21px のままでよい。2026-09-03 に一度 15px へ下げたが、それは
     ヘッドレスで Montserrat が読み込まれず幅の広い代替フォントで描画されたのを
     「はみ出し」と誤判定したもの。実ブラウザで測り直すと最大でも
     Development 107 / 円の直径112 で収まっている。 */
  .pentagon-fig--en svg .p-label { font-size: 21px; }
  .pentagon-fig--en svg .p-center { font-size: 18px; }
}

/* ---------- スクロール表示 ---------- */
.reveal { opacity: 0; transition: opacity 1s ease; }
.reveal.is-visible { opacity: 1; }
/* aboutintro は「面が横に引く」演出そのものが出現アニメなので、透過での出現は使わない */
.aboutintro.reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   v16 追記
   ============================================================ */

/* あいさつの見せ場を2行に割ったときの続き行。
   字下げの 1em / 2em / 3em は強調の段（.message__catch 系）を表す「はしご」なので、
   続き行はその段のどれとも重ならない位置（段の外側）に置いて、新しい段と読まれないようにする。
   さらに「このように、」→ 1行目 → 2行目 が右へ下りていく「階段」に見えるところまで深くした（v17）。 */
.message__cont { display: inline-block; margin-left: 16em; }
@media (max-width: 1023px) {
  /* 狭幅は段の幅も詰めてあるので続き行も詰める。
     3em(54px) だと右端の余裕が 3px しかなく、実機の書体差で折り返して階段が崩れる。
     2em(36px) にして余裕を 21px 確保した（段差は 36px 残るので階段は見える）。 */
  .message__cont { margin-left: 2em; }
}

/* 英字見出しに日本語を併記するときの日本語部分。
   .contentsbox__ttl--jp（見出し全体を和文書体にする既存モディファイア）と同じ考えで
   書体を和文に落とし、英字より一段小さく・字間を詰める。 */
.contentsbox__ttl .ttl-jp {
  font-family: var(--font-jp);
  font-size: 0.72em;
  font-weight: normal;
  letter-spacing: 0.02em;
}

/* PRODUCT ページの数値（10秒 / 0個 / 11種+ / 90–99%）。
   既存の .card は数値欄が 44px 固定・.steps__n は 58px の円で、
   「10秒」「90–99%」のような2〜6字の数値が入らないため専用に足した。 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 28px 0 0; }
.stat { padding: 22px 18px; background: #fafafa; border-top: 3px solid var(--c-accent); text-align: center; }
.stat__n { margin: 0; font-family: var(--font-en); font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; color: var(--c-accent); }
.stat__t { margin: 10px 0 0; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }
.stat__s { margin: 6px 0 0; font-size: 12px; line-height: 1.8; color: var(--c-muted); }
@media (max-width: 1023px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 16px 10px; }
  .stat__n { font-size: 24px; }
  .stat__t { font-size: 12.5px; }
  .stat__s { font-size: 11px; }
}
body.lang-en .stat__t { letter-spacing: 0.02em; }

/* 製品カード：製品名（和）＋英字表記を1行に収めるための行。既存の .card__ttl は1語想定 */
.card__ttl .card__ttl-en { margin-left: 10px; font-family: var(--font-en); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--c-muted); }

/* ---------- v17：製品カードをクリック可にする / 製品詳細ページ ---------- */

/* 製品カード全体をリンクにする（NEWS 一覧の .news-item と同じ「<a> でブロック全体を包む」型）。
   既存の .card は div 前提で、文字色・下線・ホバー・フォーカスリングの指定が無かったため
   a.card だけに足す。div の .card（パイプライン①〜④など）の見た目は変えない。 */
a.card {
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
a.card:hover { background: #FDF1F2; }               /* .pentagon-node:hover と同じ淡い赤 */
a.card:hover .card__ttl { color: var(--c-accent); }
a.card:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
/* カード内の「詳細へ」導線。.c-btn は 200px 超の独立ボタンでカード内に置けないため行として足す */
.card__more { margin: 14px 0 0; font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--c-accent); }
.card__more::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform 0.3s var(--ease); }
a.card:hover .card__more::after { transform: translateX(4px); }

/* 製品詳細ページ：中央揃えの .contentsbox__catch の直下に置くリード文。
   既存の .sec-lead は .sec-num と対で左寄せ＋46px の字下げ、.contentsbox__text は本文用で
   どちらも中央の見出し直下には合わなかった。 */
.contentsbox__lead { margin: 14px 0 0; font-size: 16px; line-height: 2; letter-spacing: 0.08em; color: #555; text-align: center; }
@media (max-width: 1023px) {
  .contentsbox__lead { font-size: 14px; letter-spacing: 0.04em; text-align: left; }
}
body.lang-en .contentsbox__lead { letter-spacing: 0.02em; }

/* ---------- v18：製品カードを画像つきの1×4に ---------- */

/* 4製品を縦1列に並べる列指定だけの派生。.cards（2列）は他ページのパイプライン等が使うので触らない。 */
.cards--single { grid-template-columns: 1fr; }

/* 画像（または受け皿）を左、既存のカード中身を右に置く行。
   既存の .card は「44px の番号 ＋ 本文」の2列固定で、画像列を差し込む余地が無かったため
   .card--media で外側の列を作り、元の2列は .card__body に移した（見た目は据え置き）。
   gap 28px は焼き込み文字とライブテキストが続けて読まれないようにするための間。 */
.card--media { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 28px; align-items: center; }
.card__body { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }

/* 画像は実比率のまま出す（height:auto）。この2枚は文字が焼き込まれたバナーなので
   object-fit: cover で切ると文言が欠ける。枠線・背景色は足さない（画像の紺／ミントを持ち込まない）。 */
.card__media { min-width: 0; }
.card__media img { display: block; width: 100%; height: auto; }
/* 画像がまだ無い製品の受け皿。画像行と高さ・幅を揃えるため実素材と同じ比率で列いっぱいに置く。
   既存の .placeholder は inline-block で中身なりの幅になり、2枚並ぶと幅が揃わなかった。 */
.card__media--todo { aspect-ratio: 2048 / 994; }
.card__media--todo .placeholder {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; height: 100%; box-sizing: border-box;
}

@media (max-width: 1023px) {
  /* 1023px 以下は画像が上・テキストが下の縦積み */
  .card--media { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== v19：営業ページ（既存で表現できなかった3点だけを足す） ===== */

/* 04 の Wonder Process は4プロセス。既存 .steps は grid-template-columns が
   repeat(5,1fr) 固定で、::before の連結線が left:10%〜right:10% に伸びるため、
   4つ並べると線が空の5列目まで飛び出す。列数だけの派生を作る。 */
.steps--4 { grid-template-columns: repeat(4, 1fr); }

/* 既存 .steps__item には見出し（.steps__t）しか無く、原文の各プロセスの説明文を
   入れるスロットが無かったため足す。中央寄せの .steps__item の中で本文だけ左寄せ。 */
.steps__d { margin: 10px auto 0; max-width: 15em; font-size: 12.5px; line-height: 1.9;
  color: #666; text-align: left; }

@media (max-width: 1023px) {
  /* 4つを2×2に。連結線は2段になると意味が崩れるので消す */
  .steps--4 { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .steps--4::before { display: none; }
  .steps__d { max-width: none; font-size: 11px; line-height: 1.8; }
}

/* 04 の ABOUT / ROLE への参照リンク。基底の `a { color: inherit; text-decoration: none }`
   のままだと本文中でリンクだと分からないため、.note の中だけ下線と赤を戻す。 */
.note a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.note a:hover { text-decoration-thickness: 2px; }
.note a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* 英文の見出しは2行になるものがあり、揃えないと説明文の上端がステップごとにずれる。
   和文は全て1行なので lang-en だけに効かせる。 */
body.lang-en .steps--4 .steps__t { min-height: 2.6em; }

/* ===== v20：管理ページ（既存で表現できなかったものだけを足す） ===== */

/* 01 DECISION：「一般的な流れ」と「カルテ庫」の2本を左右に並べ、各流れは縦の連鎖にする。
   外枠は既存 .twocol（2列 → 1023px 以下で1列）をそのまま使い、中の連鎖だけを足す。
   既存 .steps は grid-template-columns が固定の横並び＋横の連結線なので、
   半幅の列に入れられず、縦にもできなかった。
   矢印の色（#c2c7ce）と形（9px の45度回転）は既存 .courage__arrow と同値。 */
.flow { display: grid; }
.flow__item {
  position: relative;
  padding: 12px 14px;
  background: #f6f7f9;
  border: 1px solid #e4e7ec;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}
.flow__item + .flow__item { margin-top: 26px; }
.flow__item + .flow__item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -26px;
  width: 1.5px;
  height: 26px;
  background: #c2c7ce;
  transform: translateX(-50%);
}
.flow__item + .flow__item::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid #c2c7ce;
  border-bottom: 1.5px solid #c2c7ce;
  transform: translateX(-50%) rotate(45deg);
}
/* カルテ庫側。色は既存トークンの赤と、既出の淡い赤（.step--human / a.card:hover と同値）だけ。 */
.flow--accent .flow__item { background: #FDF1F2; border-color: var(--c-accent); }

/* 02 GOVERNANCE：守る対象6つは .value-cards（3列）に h4 だけで入る。
   原稿に説明文が無いので、h4 単独のときだけ下マージンを落とす。 */
.value-cards h4:only-child { margin-bottom: 0; }

/* 02 GOVERNANCE：境界の流れは3つ。既存 .steps は repeat(5,1fr) 固定で、
   連結線 left:10%/right:10% を3列で使うと外側の円の中心（16.6%）から
   線が 30px はみ出す（1200px で実測）。列数と線の端だけの派生。 */
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps--3::before { left: 16.6%; right: 16.6%; }

/* 03 INFORMATION：原稿の矢印は「3つの必要 → CONTROLLER 判断 → WONDER 実行」の下向き。
   既存 .story は box → stems → cards の順（上から下）なので、向きを保つには
   DOM を cards → stems → box に並べ替える必要がある。並べ替えは HTML 側で行い、
   CSS は 3列版・1列版の列指定だけを足す（.story__cards / .story__stems は 4列固定）。 */
.story__cards--3, .story__stems--3 { grid-template-columns: repeat(3, 1fr); }
.story__stems--1 { grid-template-columns: 1fr; }
/* 既定の .story__stems は gap 0、.story__cards は gap 16px なので、列の中心が
   1200px で 5.4px ずれる（4列版も同じずれを持っている）。3列版は縦線が3本しか無く
   ずれが目立つので、stems 側に cards と同じ gap を入れて中心を一致させる。 */
.story__stems--3 { gap: 16px; }
@media (max-width: 1023px) { .story__stems--3 { gap: 10px; } }

/* ===== v21：PRODUCT 1層目（場面ラベル先出しのカード）＋ SENSING TECHNOLOGY ページ ===== */

/* 支給原稿の方針「まず『誰の、どのような場面で使われる商品なのか』が分かる構成」を満たすため、
   場面ラベル（日常 / 職場 / 健診 / 介護）を商品名より先・かつ大きく出す行。
   既存 .card__no は Montserrat 24px を 44px 幅の列に置く枠で、和文2文字（実測 48px）が折り返す。
   色は既存トークン var(--c-accent) のみ。新しい色は足していない。 */
.card__scene { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; color: var(--c-accent); }
.card__scene::after { content: ""; display: block; width: 34px; height: 2px; margin: 10px 0 14px; background: var(--c-accent); }

/* 場面ラベルが先頭に来たので、番号列（44px）を使わない1列の本文にする。
   既存 .card__ttl は 16px 固定で、24px の場面ラベルの下では本文と区別が付かないため一段上げる。 */
.card--product .card__body { grid-template-columns: 1fr; gap: 0; }
.card--product .card__ttl { font-size: 20px; line-height: 1.6; }

@media (max-width: 1023px) {
  .card__scene { font-size: 18px; letter-spacing: 0.1em; }
  .card__scene::after { margin: 8px 0 10px; }
  .card--product .card__ttl { font-size: 16px; }
}

/* 原稿の図では、4カードの下の共通テクノロジーの箱だけが赤枠になっている。
   既存 .story__box は #f6f7f9 ＋ #e4e7ec の弱い枠で、この強調が出せないため枠色だけの派生。 */
.story__box--accent { background: #fff; border: 2px solid var(--c-accent); }
.story__box--accent .lb { font-size: 18px; letter-spacing: 0.14em; }
.story__box--accent .tx { font-size: 17px; }
@media (max-width: 1023px) {
  .story__box--accent .lb { font-size: 14px; }
  .story__box--accent .tx { font-size: 14px; }
}

/* 02 TECHNOLOGY の SENSING → PHR → AI。「3つの箱を矢印でつなぐ横並び」は既存に無い。
   .steps は 58px の円＋番号で英字ラベルが入らない。.courage は「並列 → 矢印 → 1箱」の2枠固定。
   .story__cards--3 は矢印を持たない。よって列組みだけを足し、
   箱は .courage__box（.lb / .tx / .sb の3スロットが原稿のラベル／見出し／説明2行にそのまま対応）、
   矢印は .courage__arrow を流用する（狭幅で 90deg 回る既存ルールもそのまま効く）。 */
.techflow { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr; align-items: stretch; margin-top: 30px; }
.techflow .courage__arrow { align-self: center; }
/* .courage__box .tx は 30px（1枠を大きく見せる用）。3列に並べると列幅 280px 弱に収まらない */
.techflow .courage__box .tx { font-size: 20px; }
@media (max-width: 1023px) {
  .techflow { grid-template-columns: 1fr; gap: 14px; }
  .techflow .courage__box .tx { font-size: 17px; }
}

/* ===== v23：PRODUCT 1層目 01節 — 4製品を1行にして下の箱へつなぐ ===== */

/* レビュー指摘：「4つの商品と センシング×PHR×AI がブツギレになってしまう」。
   原因は 1×4 の縦1列（1行 229〜261px × 4 ＝ 997px）で、4製品と箱が同時に視野に入らないこと。
   サムネ画像を全廃して1枚の縦の情報量を落とし、4枚を1行に並べる列指定。
   既存 .cards は repeat(2,1fr) で他ページのパイプライン等が使うので触らない。
   .cards--single（v18 の1列）はもう 01節では使わないが、他が参照するので残してある。 */
.cards--flow { grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }

/* 画像列が無くなったので、カードは「44px の番号 ＋ 本文」の2列ではなく1列の縦積み。
   4枚の高さを揃えるのは grid の stretch（.cards--flow の align-items）に任せ、
   flex column ＋ .card__more の margin-top:auto で VIEW MORE の行を4枚とも下端に揃える。
   （高さを揃えるだけなら stretch で足りるが、それだと VIEW MORE の y が製品ごとにずれる。） */
.card--flow { display: flex; flex-direction: column; padding: 22px 16px 22px; }
.card--flow .card__more { margin-top: auto; padding-top: 14px; }

/* 4列にすると列幅は 1200px で約 208px しかない。
   `カルテコ 健診サービス` ＋ `KarteCo Health Checkup Service` を1行に並べる v21 の型
   （.card__ttl-en が inline で右に付く）では英字が3行に割れて商品名が読めなくなるため、
   この節限定で英字を商品名の**下の行**に落とす。文言は変えていない。

   `カルテコ 健診サービス` は 208px の列に1行では入らないので2行になる。既定の和文改行は
   どこでも折れるため貪欲に詰めて `カルテコ 健診サー / ビス` と語中で割れた（1200px 実測）。
   word-break: keep-all は和文の文字間の改行を禁じるので、折れる位置が語間の空白だけになり
   `カルテコ / 健診サービス` と割れる。禁則の効かない狭い箱は無いことを確認済み
   （最長語 `健診サービス` = 6字・実測 102px < 内容幅 172px）。 */
.card--flow .card__ttl { font-size: 17px; line-height: 1.6; margin-bottom: 8px; word-break: keep-all; }
.card--flow .card__ttl .card__ttl-en { display: block; margin-left: 0; margin-top: 3px; word-break: normal; }
.card--flow .card__scene { font-size: 21px; letter-spacing: 0.1em; }
/* 英語版だけ `Health checkup` が2行に折れて、3枚目の商品名の開始 y が他の3枚と 27px ずれる
   （和文の場面ラベルは 4枚とも2文字で必ず1行）。場面ラベルの高さを2行分で予約して4枚を揃える。
   内訳＝文字 2行×1.3em ＋ ::after の赤いルール（margin 10+14 ＋ height 2 = 26px）。
   和文には掛けない（4枚とも1行なので、掛けると 27px の空白が増えるだけ）。 */
body.lang-en .card--flow .card__scene { min-height: calc(2 * 1.3em + 26px); }
/* 「誰に」は原稿が <br> で2行に割ってある。13px だと `AI・ロボット・センシングで` が
   列幅を 1px 超えて `で` だけが3行目に落ちるため 12.5px（既存 .story__cards div と同値）。 */
.card--flow .card__txt { font-size: 12.5px; line-height: 1.85; }

/* 4カード → 箱 の接続。.story__stems は「箱 → 下のカード」の向き（列の中心に縦線を落とすだけ）で、
   横に渡すバスと矢印の先端を持たないため、逆向き（カード → 下の箱）の派生として新設した。
   色は既存トークンのみ（線 var(--c-border)、集束線と矢印 var(--c-accent)）。 */
.converge { position: relative; height: 76px; margin: 0; }
/* 縦枝は .cards--flow と同じ 4列・同じ gap にしてカード中心と x を一致させる
   （v22 で .story__stems--3 が gap 違いで 5.4px ずれた件と同じ対処） */
.converge__stems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; height: 38px; }
.converge__stems span { justify-self: center; width: 1px; height: 100%; background: var(--c-border); }
/* バスは 1列目の中心から 4列目の中心まで。列幅 w =（100% − gap 合計 48px）/ 4 なので w/2 =（100% − 48px）/ 8 */
.converge__bus { position: absolute; top: 38px; left: calc((100% - 48px) / 8); right: calc((100% - 48px) / 8); height: 1px; background: var(--c-border); }
.converge__drop { position: absolute; top: 38px; left: 50%; width: 1px; height: 38px; background: var(--c-accent); }
.converge__drop::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--c-accent);
}
/* 矢印の先端が箱の上辺に触るよう、.story の 30px の上マージンをこの並びだけ 0 に倒す */
.converge + .story { margin-top: 0; }

@media (max-width: 1023px) {
  /* 狭幅はカードが縦積みになる。レビュー指摘の核心が「縦になると切れる」なので、
     左に1本の背骨を通し、各カードから短い横枝を出し、そのまま箱へ落とす。
     背骨は .cards--flow の top:0〜bottom:0（＝1枚目の上端〜4枚目の下端）を1本で覆うので
     カード間の gap でも途切れない。.converge__drop を同じ left:10px、top:0 に置くことで
     背骨の下端と集束線の上端が同じ y・同じ x で接続する。 */
  .cards--flow { grid-template-columns: 1fr; gap: 12px; position: relative; padding-left: 34px; }
  .cards--flow::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: var(--c-border); }
  .card--flow { position: relative; padding: 18px 16px; }
  .card--flow::before { content: ""; position: absolute; left: -24px; top: 50%; width: 24px; height: 1px; background: var(--c-border); }
  .card--flow .card__scene { font-size: 18px; }
  .card--flow .card__ttl { font-size: 16px; }
  .card--flow .card__more { padding-top: 10px; }
  .converge { height: 44px; }
  .converge__stems, .converge__bus { display: none; }
  .converge__drop { top: 0; left: 10px; height: 44px; }
}

/* ===== v24：workwell B案 — 説明文を図に置き換える（2レーン ＋ つなぐ） ===== */

/* 原稿の「できること」5項目は
     従業員（セルフケア）2件 ／ 企業（ラインケア）2件 ／ その2つをつなぐ 1件
   という3段の構造を持っている。上段レーン → 下向きの連結 → 下段レーン で出す。

   既存クラスで代用できなかった理由：
   - .layers   … 紺の帯を積むだけ。1本の帯の中に複数のノードを置く器が無い（1帯1行）
   - .twocol   … 2列に割るだけ。列にレーン名を持てず、列と列を結ぶ線も持たない
   - .courage  … 「並列 → 矢印 → 1箱」の 1fr/56px/1.15fr 固定。上下の関係が作れない
   - .converge … 4列固定の下向き集束専用（.cards--flow の列数・gap と結びついている）
   - .story    … 箱 → 縦線 → 4カード の一方向。中段に「つなぎの箱」を挟む形が無い

   色は既存の値だけを使う（--c-accent / --c-border / --c-muted /
   #f6f7f9・#e4e7ec・#c2c7ce・#FDF1F2・#1c2636・#fff）。新しい色は 0件。 */
.lanes { margin: 30px 0 0; }
.lane { padding: 18px 20px 20px; background: #f6f7f9; border: 1px solid #e4e7ec; }

/* レーン名。「誰の」（従業員／企業）を大きく、「何のケアか」（セルフケア／ラインケア）を
   塗りタグで出す。4語とも原稿（01 商品概要・できること 05）に出てくる語。
   line-height を本文の 1.9 から落としてあるのは、この行が図の見出しであって本文ではないため
   （既定のままだと1レーンあたり 12px 高くなり、図の縦が説明文より長くなる）。 */
.lane__label { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; }
.lane__who { font-size: 19px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.5; }
.lane__care { padding: 3px 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
  line-height: 1.7; color: #fff; background: var(--c-accent); }
.lane__care--org { background: #1c2636; }

.lane__nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
/* 上段だけは 02 が下に4項目の流れ図（.chain）を抱えるので列幅を割り振り直す。
   均等2列（1200px で 410px）だと .chain の1枠が 83px になり「継続的に計測」（実測 75px ＋
   左右パディング 16px ＝ 91px）が2行に折れる。36/64 なら1枠 102px で1行に収まり、
   かつ 01 の見出し（実測 270px）が 2行に収まる（30/70 だと 3行に折れて図が 32px 伸びる）。 */
.lane__nodes--split { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
/* 番号は既存 .card と同じ「44px の列 ＋ 本文」の型。番号を見出しの上に積むと
   1ノードあたり 34px 高くなる。 */
.lane__node { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 14px 16px 15px; background: #fff; border: 1px solid #e4e7ec; }
.lane__node .card__no { margin: 0; line-height: 1.35; }
.lane__node .card__ttl { margin: 0; font-size: 17px; line-height: 1.55; }
/* 流れ図はノードの全幅を使う（番号列の分だけ右に寄せると1枠が 91px を切って折れる） */
.lane__node .chain { grid-column: 1 / -1; }

/* 見出しの下に置く、原稿由来の語（スマートフォン／自律神経）。
   .dept-nav a が同じ「細い枠の小さな箱」だが、あちらはリンク専用で hover/current の
   状態色を持つため、非リンクに流用すると押せそうに見える。 */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.tags li { padding: 2px 10px; border: 1px solid var(--c-border);
  font-size: 12px; line-height: 1.8; letter-spacing: 0.04em; color: var(--c-muted); }

/* 横の鎖。既存 .flow は縦専用、.steps は 58px の番号円が必須（原稿のこの流れに番号は無い）、
   .techflow は 3枠固定。狭幅では .flow と同じ縦の鎖に倒す。
   線と矢じりの色・形（#c2c7ce ／ 9px の45度）は既存 .flow__item と同値。 */
.chain { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 26px; align-items: stretch; margin: 12px 0 0; }
.chain__i { position: relative; padding: 8px; background: #fff; border: 1px solid #e4e7ec;
  text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.7; }
.chain__i + .chain__i::before { content: ""; position: absolute; left: -26px; top: 50%;
  width: 26px; height: 1.5px; background: #c2c7ce; transform: translateY(-50%); }
.chain__i + .chain__i::after { content: ""; position: absolute; left: -11px; top: 50%;
  width: 9px; height: 9px; border-right: 1.5px solid #c2c7ce; border-bottom: 1.5px solid #c2c7ce;
  transform: translateY(-50%) rotate(-45deg); }

/* レーン間の矢印。向きは原稿 05「従業員自身の気づきだけで終わらせず、企業側の対応へつなげます」
   に合わせて下向き（＝上段 従業員 → 下段 企業）。 */
.lanes__arrow { position: relative; height: 26px; margin: 0; }
.lanes__arrow::before { content: ""; position: absolute; left: 50%; top: 0;
  width: 1.5px; height: 26px; background: var(--c-accent); transform: translateX(-50%); }
.lanes__arrow::after { content: ""; position: absolute; left: 50%; bottom: 0;
  width: 10px; height: 10px; border-right: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent);
  transform: translateX(-50%) rotate(45deg); }

/* つなぎの箱。1層目・2層目で「唯一の赤枠」として使ってきた .story__box--accent と同じ強さで、
   2本のレーン（灰）より一段上に立たせる。番号と見出しは1行に並べる。 */
.bridge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  max-width: 560px; margin: 0 auto; padding: 13px 22px 14px;
  background: #FDF1F2; border: 2px solid var(--c-accent); }
.bridge .card__no { margin: 0; line-height: 1.35; }
.bridge__ttl { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.6; }

@media (max-width: 1023px) {
  .lane { padding: 16px 14px 18px; }
  .lane__who { font-size: 16px; }
  .lane__care { padding: 2px 10px; font-size: 12px; }
  .lane__nodes, .lane__nodes--split { grid-template-columns: 1fr; gap: 10px; }
  .lane__node { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 12px 14px 14px; }
  .lane__node .card__no { font-size: 20px; }
  .lane__node .card__ttl { font-size: 15px; }
  /* 狭幅は鎖を縦に倒す。矢じりも下向きに回す（.courage__arrow / .flow__item と同じ考え） */
  .chain { grid-auto-flow: row; gap: 22px; }
  .chain__i + .chain__i::before { left: 50%; top: -22px; width: 1.5px; height: 22px;
    transform: translateX(-50%); }
  .chain__i + .chain__i::after { left: 50%; top: -9px; transform: translateX(-50%) rotate(45deg); }
  .lanes__arrow { height: 22px; }
  .lanes__arrow::before { height: 22px; }
  .bridge { gap: 10px; padding: 11px 14px 12px; }
  .bridge__ttl { font-size: 15px; }
}

/* ============================================================
   NEWS — 実データ移行（2026-08-31）で足した分
   ============================================================ */

/* 実サイト（src/pages/news/index.astro）は年ごとに区切って新しい順に出す。
   既存 .subhead は赤い縦棒付きの「節見出し」で、年ラベルには強すぎるため別に立てる。 */
.news-year + .news-year { margin-top: 56px; }
.news-year__ttl {
  margin: 0 0 4px;
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--c-text);
}

/* 実サイトの NewsItem.astro は description を出している（.news-item__text）。
   モックの .news-item は grid 3列のテキスト行なので、右列の2行目として足す。
   原稿は 150〜200 字あるため 2行で clamp する（行の高さが記事ごとに揃う）。 */
.news-item__desc {
  grid-column: 3;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* PDF直リンクであることを一覧の見た目で示す。
   既存 .news-item__cat は「カテゴリ」用の灰枠ラベルなので、色で役割を分ける
   （accent は既存トークン。新しい色は足していない）。

   2026-08-31 追記: 3件すべてを記事ページ化したので、いまこのクラスの使用箇所は 0 件。
   PDF直リンクの記事が再び載るときのために残してある（削除は りょうた判断待ち）。
   記事内の元資料PDFへの導線は .article__pdfdl（このファイル末尾）を使う。 */
.news-item__pdf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 0 6px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  white-space: nowrap;
  vertical-align: 2px;
}
/* 外部/別タブを示す斜め矢じり。文字（↗）はフォント依存があるので枠線で描く */
.news-item__pdf::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  margin-bottom: 1px;
}

@media (max-width: 1023px) {
  .news-item__desc { grid-column: 1 / -1; font-size: 12px; }
}

/* 記事本文中の図。md の ![alt](...) をそのまま figure に落とす */
.article__fig { margin: 40px 0 0; }
.article__fig img { width: 100%; }

/* 本文末尾の問い合わせ先（md の水平線 + 太字ブロックに対応） */
.article__contact {
  margin: 56px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--c-border);
  font-size: 14px;
  line-height: 2.1;
}
.article__contact strong { font-weight: 600; }

/* スクリーンリーダー専用テキスト（PDFが別タブで開くことの補足に使う） */
.u-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   NEWS — PDF記事のページ化（2026-08-31）で足した分
   ・対象: news-2026-07-24-sensing.html / news-2026-04-02-innovation.html
   ・新しい色は増やしていない（--c-accent / --c-muted / --c-border / --c-text のみ）
   ============================================================ */

/* PDF 1ページ目のヘッダ（PRESSRELEASE / 日付 / 発行元）に対応。
   日付が frontmatter（一覧の並び順に使う日付）と食い違う記事があるため、
   PDF側の日付表記をここに残す。既存 .note は灰色の小注記で、発行元の明示には弱い。 */
.article__source {
  margin: 0 0 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-muted);
}
.article__source-label {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-accent);
}

/* PDF 中の URL 行。.message__p は 1em の字下げが付くので、URL だけ外す */
.message__p--url { text-indent: 0; word-break: break-all; }
.article__link {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article__link:hover { text-decoration-thickness: 2px; }

/* スマホ画面のキャプチャ（351〜387px 幅）。既存 .article__fig img は width:100% なので、
   そのままだと 1200px 幅で 3.4倍に引き伸ばされる。原寸を超えないよう抑える */
.article__fig--shot { text-align: center; }
.article__fig--shot img { width: auto; max-width: min(320px, 100%); height: auto; }
.article__figcap {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--c-muted);
}

/* PDF 下部の画像3点の横並び。375px では縦積みにして原寸を超えないようにする */
.article__figs {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
}
.article__figs .article__fig { margin: 0; min-width: 0; }
.article__figs img { width: 100%; height: auto; }

@media (max-width: 767px) {
  .article__figs { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .article__figs img { max-width: 260px; }
  .article__source { margin-bottom: 26px; }
}

/* 元資料PDFへの導線（記事本文の末尾）。一覧のPDFバッジを落とした代わりに、
   記事の中から元のプレスリリースPDFへ辿れるようにする */
.article__pdfdl { margin: 28px 0 0; font-size: 14px; }
.article__pdfdl a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  letter-spacing: 0.08em;
  transition: background-color 0.2s, color 0.2s;
}
.article__pdfdl a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  margin-bottom: 2px;
}
.article__pdfdl a:hover { background: var(--c-accent); color: #fff; }

/* ---------- 下層ページの地色（GX の `.p-about .l-main` 等と同じ #f2f2f2） ----------
   GX は下層ページの main を #f2f2f2 にしており、白い .contentsbox がその上に浮く。
   暗色帯の左に空く余白も、この地色が見える。body を白のままにすると余白が白く抜けて
   帯だけが浮いて見えるので、main に敷く。トップ（.page-top）は対象外。 */
body:not(.page-top) main { background-color: #f2f2f2; }

/* ============================================================
   v17 追記 — トップのヒーローを自社写真に差し替え ＋ かるる
   ============================================================ */

/* ---------- ヒーロー写真（2400×1800 / 4:3） ----------
   枠は高さ 960px 固定。1200px 幅では枠比 1.25 < 画像比 1.333 なので
   高さが基準になり、横が 80px だけ切れる。広い画面（>1280px）では逆に
   幅が基準になり上下が切れる。
   「KarteCo」の切り文字は画像の縦 49〜86% / 横 21〜100% にあるので、
   横は右端寄せ（100%）で「K」の左を残し、縦は 70% で文字の下端を残す。
   （50% だと 1920px 幅で文字の足元が 38px 欠ける。実測して 70% にした） */
.hero__pic { display: block; width: 100%; height: 100%; }
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 70%;
  display: block;
}

/* 写真が明るいのでコピーは白に反転し、暗幕を重ねて読ませる。
   右へ向かって濃くなる幕（コピー側）＋ 上端の薄い幕（ヘッダーのロゴ側）の2枚。
   文字のある帯（横 21〜62% の "Karte"）は 30% 以下しか落とさない。 */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.26) 58%, rgba(0, 0, 0, 0.66) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 24%);
}
.hero__copy { color: var(--c-white); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }

/* 上端に暗幕を敷いた分、ヒーローに重なっている間のヘッダーは白へ反転する。
   スクロールして .is-fixed（白地）になったら元の濃色ロゴに戻す。 */
/* 2026-09-03：ヒーロー上のロゴ。
   以前は logo-dark.svg に brightness(0) invert(1) を掛けて真っ白にしていたが、
   赤・オレンジ・白の塗り分けが全部つぶれて人型が消えていた（りょうた指摘）。
   白文字版の logo.svg（人型が背景に透ける）に差し替える。
   CSSでは img の src を変えられないので、ヘッダーに2枚置いて切り替える。 */
.header__logo--light { display: none; }
.page-top .header:not(.is-fixed) .header__logo--dark { display: none; }
.page-top .header:not(.is-fixed) .header__logo--light { display: block; }
.page-top .header:not(.is-fixed) .head__language a { color: rgba(255, 255, 255, 0.6); }
.page-top .header:not(.is-fixed) .head__language a.is-curr { color: var(--c-white); }

@media (max-width: 1023px) {
  /* 375px 幅で「KarteCo」を全部入れるには、枠比 ≧ 画像比 か、横の切れ幅が
     文字の左端（横 21%）より小さい必要がある。
     h = 40vw + 190px なら 375px→340px（横の切れ 78px < 文字左端 95px）、
     1023px→470px（幅基準・横は全部入る）で、どちらも文字が収まる。 */
  .hero { height: clamp(256px, calc(32vw + 152px), 376px); }   /* 80% */
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.18) 46%, rgba(0, 0, 0, 0) 72%);
  }
}

/* ============================================================
   かるる（karteco-app-mono の体調モード画像を再エンコードしたもの）
   GIF 自体が動くので、CSS 側の移動はゆっくりにして散らかさない。
   v21：りょうた指摘により、同時に見えるのは「お知らせ枠の1体」だけにした。
   .karuru--hero / .karuru--peek の定義と GIF は後で使う可能性があるので残してあるが、
   現在どの HTML からも参照されていない。
   ============================================================ */
.karuru { position: absolute; z-index: 2; pointer-events: none; }
.karuru img { width: 100%; height: auto; display: block; }

/* ① ヒーロー下辺を左から右へゆっくり歩く。コピーは右上寄りなので当たらない。
   .hero は overflow:hidden なので横あふれは出ない。 */
.karuru--hero {
  left: 4%;
  bottom: 16px;
  width: 132px;
  animation: karuru-walk 30s ease-in-out infinite alternate;
}
@keyframes karuru-walk {
  from { transform: translateX(0); }
  to   { transform: translateX(210px); }
}

/* ② お知らせ枠の見出し右脇。見出しは中央寄せなので右側は空いている。 */
.karuru--news {
  top: 2px;
  right: 4px;
  width: 108px;
  animation: karuru-float 5.6s ease-in-out infinite alternate;
}
@keyframes karuru-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}

/* ③ 枠の左下から覗く。.framebox__wrap は overflow:hidden なので下が切れて「覗き」になる。 */
.karuru--peek {
  left: 34px;
  bottom: -20px;
  width: 96px;
  animation: karuru-peek 7.4s ease-in-out infinite alternate;
}
@keyframes karuru-peek {
  from { transform: translateY(16px); }
  to   { transform: translateY(-2px); }
}

@media (max-width: 1023px) {
  .karuru--hero { width: 88px; bottom: 10px; left: 5%; }
  @keyframes karuru-walk {
    from { transform: translateX(0); }
    to   { transform: translateX(110px); }
  }
  /* 見出しの下の 2 行リードに当たらない高さ（60×45px）まで落とす */
  .karuru--news { width: 58px; top: 6px; right: 8px; }
  /* 2026-09-03：狭幅でも覗きを出す（りょうた要望）。
     枠の余白は足さず、既存の下端からそのまま覗かせる。
     .framebox__wrap は overflow:hidden なので、はみ出したぶんは切れて「覗き」になる。 */
  .karuru--peek { display: block; left: 14px; bottom: -14px; width: 68px; }
}

/* GIF はコード側で止められないため、reduce のときは非表示にする
   （静止画を別途足すとファイルが増えるので採らない） */
@media (prefers-reduced-motion: reduce) {
  .karuru { display: none; }
}

/* ハンバーガーの線も #444 のままでは上端の暗幕に沈むので、ヒーロー上にいる間は白にする */
.page-top .header:not(.is-fixed) + .menubtn .menubtn__border span { background-color: var(--c-white); }

/* 狭幅のコピー：写真の「KarteCo」は縦 49% から始まるので、
   コピーの塊をその上（ヘッダー 70px 〜 ヒーロー高の 49%）に収める。
   sub 26px は 375px で 2 行に折れて文字の上に被っていたため 15px に落とす。 */
@media (max-width: 1023px) {
  /* 2026-09-03：狭幅だけ固定値(78px)で上端寄りに置いていたため、
     ヒーロー高さ496pxに対して上から16%の位置になり、コピーが上に寄って見えていた。
     PC と同じく割合で中央寄りに置く（りょうた指摘）。 */
  .hero__copy { top: 58%; transform: translateY(-50%); right: 18px; width: calc(100% - 36px); }
  .hero__sub { margin-top: 8px; font-size: 15px; }
}

/* ============================================================
   v21 追記 — りょうた指摘6件の是正
   ============================================================ */

/* ---------- (4) ABOUT の MV を WebP 優先で読ませる ----------
   背景画像のままパララックス（height:110% を敷いて transform で動かす）を維持したいので、
   <picture> には変えず image-set() で切り替える。上の .about-mv__photo が持つ
   background: url("about-mv.jpg") はそのまま残してあるので、image-set() を
   解釈しないブラウザは jpg（1692KB）へ落ちる。対応ブラウザは webp（631KB）を読む。 */
.about-mv__photo {
  background-image: image-set(
    url("about-mv.webp") type("image/webp"),
    url("about-mv.jpg")  type("image/jpeg")
  );
}

/* ---------- (5) 下層ページの白い帯を消す ----------
   .footer は margin-top:120px を持つ。main に地色を敷いても、この 120px と
   main より下の余りは body の色（白）が出る。body 自体を地色にして白を消す。
   トップ（.page-top）は .framebox が白地の上に乗る作りなので白のまま。 */
body:not(.page-top) { background: #f2f2f2; }

/* ---------- (6) プレースホルダ MV を外したページの見出しと余白 ----------
   .about-mv ごと消したので .about-mv__ttl の <h1> が無くなる。
   代わりに暗色帯（.aboutintro）の中の見出しを h3 → h1 へ昇格させた。
   見た目は h3 のときと同じにする。 */
.aboutintro__inner h1 { margin: 24px 0 0; color: #fff; font-size: 22px; font-weight: normal; letter-spacing: 0.1em; line-height: 1.8; }
.aboutintro__inner h1 + .aboutintro__label { margin-top: 64px; }
body.lang-en .aboutintro__inner h1 { letter-spacing: 0.04em; line-height: 1.6; }

/* パンくず（.c-bread）は .aboutintro に対して top:-30px の絶対配置。MV が無くなると
   30px ぶん上へはみ出して、absolute なヘッダー（70px / 狭幅 60px）の下端に重なる。
   帯を 30px 下げて、パンくずの居場所を作る。 */
main > .aboutintro:first-child { margin-top: 30px; }
/* パンくずを置かないページ（404）は、その30pxの逃げが不要。
   残すと暗色帯の上に灰色の隙間が出る（2026-09-02）。 */
main > .aboutintro--nobread:first-child { margin-top: 0; }

@media (max-width: 1023px) {
  .aboutintro__inner h1 { font-size: 17px; }
}

/* ---------- (2) TODO_COPY 削除の訂正 ----------
   トップの TODO_COPY の <p> は消したが、.hero__todo クラス自体は
   EN 12ページの TODO_TRANSLATION バッジが流用していた（grep で実測）。
   一度消した定義をそのまま戻す。ヒーロー限定だった text-shadow 打ち消しも含む。 */
.hero__todo {
  display: inline-block;
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #7a5a00;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--c-sub1);
  padding: 4px 12px;
}
.hero__copy .hero__todo { text-shadow: none; }
@media (max-width: 1023px) {
  .hero__todo { margin-top: 8px; font-size: 10px; padding: 3px 10px; }
}

/* ---------- ページ読み込みの白ベール（GX：全体が白く覆われ、フワッと消えて現れる） ---------- */
.page-veil {
  position: fixed; inset: 0; background: #fff; z-index: 6000; pointer-events: none;
  /* 右へ引く幕(is-visible≈0.05s + 遅延0.5s + 0.6s = ≈1.15sで終了)と同時に消えるよう合わせた。
     開始0.05s → 終了1.15s。引き終わりの瞬間に白モヤも消える。 */
  animation: page-veil-out 1.5s ease 0.05s forwards;   /* 薄めに長く。終了は右引き幕(≈1.55s)と同時 */
}
@keyframes page-veil-out {
  /* 濃い白を長めに保ち、最後にスッと消す。序盤で一気に薄まらないので“濃いモヤ”がはっきり見える。
     終了(100%)は右へ引く幕と同じ1.15s。 */
  0%   { opacity: 0.85; }
  55%  { opacity: 0.7; }
  100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .page-veil { display: none; } }

/* ---------- ヒーローの2枚クロスフェード（A=オレンジ壁ロゴ を先に、時間経過でB=木の切り文字へ） ---------- */
.hero__pic--a, .hero__pic--b {
  position: absolute; inset: 0;   /* 2枚を重ねる。既存の .hero__pic の cover 指定はそのまま効く */
}
.hero__pic--b { z-index: 0; }                 /* 木の切り文字：奥 */
.hero__pic--a .hero__img { object-position: 50% 46%; transform: scale(1.45); transform-origin: 50% 46%; }   /* ロゴ中心に寄せて拡大（遠くから撮ったぶんアップ） */
.hero__pic--a { z-index: 1;                   /* オレンジ壁ロゴ：手前（最初に見える） */
  /* 1回だけ。白モヤが晴れる≈1.5s のあと、Aを約2秒見せて Bへクロスフェード（戻さない）。 */
  animation: hero-cross-once 4.2s ease 1.7s forwards;   /* かるる→ロゴのpop後に余韻→B */
}
@keyframes hero-cross-once {
  0%, 66% { opacity: 1; }   /* Aを約2秒保持（3sの66%≈2s） */
  100%    { opacity: 0; }   /* 約1秒でBへフェードし、そのまま固定 */
}
@media (prefers-reduced-motion: reduce) {
  .hero__pic--a { animation: none; opacity: 1; }   /* モーション抑制時はA固定 */
}


/* ---------- ヒーローA：Claude Design由来のオレンジ壁グラフィック（文言なし） ---------- */
/* 白モヤをロゴごと全体に被せる（ロゴ z2 より上の z3）。彩度ダウンと合わせてやわらかく。 */
.hero__graphic::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: rgba(255, 255, 255, 0.12);
}
.hero__graphic {
  background: linear-gradient(180deg,#F99900 0%,#FFAA00 9%,#FFC800 20%,#FDE9B8 32%,#FBF6EE 42%,#FFFFFF 50%,#FBF6EE 58%,#FDE9B8 70%,#FFC800 82%,#FFB300 92%,#F99900 100%);
  overflow: hidden;
}
.hero__graphic .hg__glow { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 60% at 50% 50%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.35) 38%,rgba(255,255,255,0) 62%); }
.hero__graphic .hg__noise { position:absolute; inset:-10%; opacity:.5; mix-blend-mode:multiply; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='420' height='420' filter='url(%23n)' opacity='0.16'/></svg>");
  background-size:420px 420px; }
.hero__graphic .hg__blobs { position:absolute; inset:0; opacity:.55; mix-blend-mode:multiply; pointer-events:none;
  background-image:radial-gradient(45% 22% at 18% 12%,rgba(230,0,22,.10) 0%,rgba(230,0,22,0) 70%),radial-gradient(50% 18% at 82% 88%,rgba(249,153,0,.22) 0%,rgba(249,153,0,0) 72%),radial-gradient(38% 14% at 70% 22%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 75%); }
.hero__graphic .hg__logo { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 6vw; }
.hero__graphic .hg__logo svg { width:min(48%,620px); height:auto; animation: karteco-float 9s ease-in-out infinite; }
/* 2026-09-03：ロゴの drop-shadow は外した。
   もともと SVG 全体にかけていたが、中に かるるの GIF が <image> で5枚入っているため
   iOS Safari が画像の矩形のまま影を落とし、ロゴ背後に横長の四角が出ていた。
   影を .kc-pop（ベクター部分）だけに移すと iOS は直ったが、今度は PC で
   ロゴの背後が四角く明るく抜けた。フィルタが独立レイヤーを作り、下にある
   mix-blend-mode:multiply の層（.hg__noise / .hg__blobs）がその範囲に届かなくなるため。
   両方で副作用が出るので影自体をやめる。オレンジ背景の上でコントラストは足りている。 */

/* ---------- トップページ：ロゴ(A)の間はヘッダー・ハンバーガー・コピーを隠し、木の切り文字(B)に切替わる頃に出す ----------
   A→Bのクロスフェードは 3.5s〜4.5s（hero-cross-once: 遅延1.5s＋2s保持＋1sフェード）。
   それに合わせ 3.6s まで隠し、0.8sかけて現す。トップページ(.page-top)だけに適用。 */
.page-top .header,
.page-top .menubtn,
.page-top .hero__copy,
.page-top .hero__scrim {
  animation: hero-intro-in 0.8s ease 4.8s both;
}
@keyframes hero-intro-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .page-top .header,
  .page-top .menubtn,
  .page-top .hero__copy,
  .page-top .hero__scrim { animation: none; }
}

/* ---------- ロゴを1文字ずつ「ぽん」と出す（アイコン→カ→ル→テ→庫）。最初は非表示 ---------- */
.hero__graphic .kc-pop {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: kc-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero__graphic .kc-c0 { animation-delay: 1.60s; }  /* アイコン */
.hero__graphic .kc-c1 { animation-delay: 2.02s; }  /* カ */
.hero__graphic .kc-c2 { animation-delay: 2.44s; }  /* ル */
.hero__graphic .kc-c3 { animation-delay: 2.86s; }  /* テ */
.hero__graphic .kc-c4 { animation-delay: 3.28s; }  /* 庫 */
@keyframes kc-pop {
  0%   { opacity: 0; transform: scale(0.2); }
  55%  { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__graphic .kc-pop { animation: none; opacity: 1; transform: none; }
}

/* ---------- 各文字の位置に違うかるるを置き、ぽん→その文字に変わる ---------- */
.hero__graphic .kc-karuru {
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: kk-morph 0.75s ease both;
}
.hero__graphic .kk0 { animation-delay: 1.15s; }  /* → アイコン(1.60) */
.hero__graphic .kk1 { animation-delay: 1.57s; }  /* → カ(2.02) */
.hero__graphic .kk2 { animation-delay: 1.99s; }  /* → ル(2.44) */
.hero__graphic .kk3 { animation-delay: 2.41s; }  /* → テ(2.86) */
.hero__graphic .kk4 { animation-delay: 2.83s; }  /* → 庫(3.28) */
@keyframes kk-morph {
  0%   { opacity: 0; transform: scale(0.6); }
  30%  { opacity: 1; transform: scale(1); }
  68%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }   /* ぽんと弾けて消える＝文字に変わる */
}
@media (prefers-reduced-motion: reduce) {
  .hero__graphic .kc-karuru { display: none; }
}

/* ============================================================
   PRODUCT トップ ― シンプル項目リスト（Pattern A / 罫線・余白多め）
   旧 .cards--flow / .converge / .story を置換。白基調＋赤で統一。
   ============================================================ */
.prodlist { margin: 60px 0 0; border-top: 1px solid #e4e4e4; }
.prodlist__row {
  display: grid;
  grid-template-columns: minmax(310px, 0.95fr) 1.15fr;
  gap: 44px;
  align-items: center;
  padding: 52px 10px;
  border-bottom: 1px solid #e4e4e4;
  text-decoration: none;
  color: inherit;
  transition: background .3s ease;
}
.prodlist__row:hover { background: #faf7f4; }
.prodlist__row > div:first-child { padding-left: 16px; }
.prodlist__scene {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: #fff; background: #E60016; padding: 4px 13px; border-radius: 2px;
  margin-bottom: 18px;
}
.prodlist__nm {
  margin: 0;
  font-size: 30px; font-weight: 700; color: #1a1311;
  letter-spacing: .02em; line-height: 1.35;
}
.prodlist__en {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 500; color: #99a0a7;
  letter-spacing: .08em; margin-top: 9px;
}
.prodlist__right { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.prodlist__desc { margin: 0; font-size: 15px; line-height: 2.05; color: #555; }
.prodlist__more {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; color: #E60016;
  display: inline-flex; align-items: center; gap: 10px;
}
.prodlist__more::after {
  content: ""; width: 26px; height: 1px; background: #E60016; transition: width .3s ease;
}
.prodlist__row:hover .prodlist__more::after { width: 46px; }

/* 少し間を空けて SENSING TECHNOLOGY（白×赤の帯） */
.prodsens { margin: 84px 0 0; text-align: center; padding: 46px 24px;
  border: 1px solid #f0d9db; border-top: 3px solid #E60016; background: #fdf7f7; }
.prodsens__lb {
  margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 20px; letter-spacing: .06em; color: #E60016;
}
.prodsens__tx { margin: 12px 0 26px; font-size: 15px; color: #555; letter-spacing: .02em; }

/* その下に、スクロールで現れるビジョンの締め */
.prodvision { margin: 0 0 60px; text-align: center; }
.prodvision__catch {
  margin: 0; font-size: clamp(22px, 3.4vw, 34px); font-weight: 700;
  color: #1a1311; letter-spacing: .04em; line-height: 1.7;
}
.prodvision__lead { margin: 22px 0 0; font-size: 15px; color: #707f89; line-height: 2; letter-spacing: .02em; }
.prodvision.reveal { transition: opacity 1.1s ease, transform 1.1s ease; transform: translateY(24px); }
.prodvision.reveal.is-visible { transform: translateY(0); }

@media (max-width: 767px) {
  .prodlist__row {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 40px 4px;
  }
  .prodlist__nm { font-size: 24px; }
  /* 2026-09-03：1カラムに落ちると、右カラムだった説明と VIEW MORE が
     左のグループと同じ位置に並んで区別がつかなくなる（りょうた指摘）。
     右寄せにして「元は右側だったもの」と分かるようにする。 */
  .prodlist__right { align-items: flex-end; text-align: right; padding-right: 16px; }
  .prodsens { margin-top: 64px; padding: 38px 18px; }
  .prodvision { margin: 0 0 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .prodvision.reveal { transform: none; transition: none; }
}

/* ============================================================
   v25：カルテコ PRODUCT 2層目「章立て版」（product-karteco-b.html 専用）
   ・既存 .html は一切変更していない（product-karteco.html は無改変）
   ・新規クラスは全て pk2- 接頭辞
   ・章別の色分けはしない。丸バッジ・罫線・矢印は全て var(--c-accent) / var(--c-border) のみ
   ・図はインラインSVG（前例: .pentagon-fig と同じ「classはCSS側で持つ」方式）。
     長い説明文はSVG内に押し込まず、SVG直下のHTML（.pk2-fig-cap）に必ず同文を出す。
     SVGはその複製なので aria-hidden="true" にしてある（読み上げの二重化を避ける）。
   ============================================================ */

/* ---------- 章の2カラム（左：番号+本文 / 右：図） ---------- */
.pk2-chapters { }
.pk2-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 44px;
  align-items: center;
  padding-top: 56px;
  margin-top: 56px;
  border-top: 1px solid var(--c-border);
}
.pk2-chapters > .pk2-chapter:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

.pk2-chapter__no { margin: 0 0 20px; }
.pk2-chapter__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-accent);
}
.pk2-chapter__label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--c-muted);
}
.pk2-chapter__ttl { margin: 0 0 14px; font-size: 21px; font-weight: 600; line-height: 1.7; letter-spacing: 0.06em; }
.pk2-chapter__body { margin: 0; font-size: 15px; line-height: 2; color: #333; letter-spacing: 0.04em; }

@media (max-width: 1023px) {
  .pk2-chapter { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; margin-top: 40px; }
  /* 2026-09-03：狭幅は1カラムで図が下に来るため、番号の下に章ラベルを置くと
     縦に伸びるだけで意味がない。番号の横に並べる（りょうた指摘）。PCは従来どおり縦。 */
  .pk2-chapter__no { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .pk2-chapter__num { width: 50px; height: 50px; font-size: 18px; flex: 0 0 auto; }
  .pk2-chapter__label { display: inline; margin-top: 0; font-size: 12px; }
  .pk2-chapter__ttl { font-size: 17px; }
  .pk2-chapter__body { font-size: 14px; }
}

/* ---------- 図（SVG）とキャプション ---------- */
.pk2-fig svg { display: block; width: 100%; height: auto; }
.pk2-fig-ttl { margin: 0 0 14px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: #333; text-align: center; }

.pk2-fig-cap { margin: 18px 0 0; display: grid; gap: 10px; }
.pk2-fig-cap > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12.5px; line-height: 1.8; }
.pk2-fig-cap dt { margin: 0; font-weight: 600; color: #333; }
.pk2-fig-cap dd { margin: 0; color: var(--c-muted); }

@media (max-width: 1023px) {
  .pk2-fig-ttl { font-size: 13px; }
  .pk2-fig-cap { gap: 8px; }
  .pk2-fig-cap > div { font-size: 12px; }
}

/* SVG内部の要素はCSS側でクラスを持たせる（.pentagon-fig svg .p-label と同じ方式）。
   base値は「カード内幅(約470px)÷ viewBox幅」の縮小率(≈0.7)で desktop 上の見えを想定した値。
   1023px以下は1カラムになり図の実寸が縮む一方でカラム自体は広くなる（カード全幅）ため、
   .pentagon-fig と同じ考えで mobile側は user-unit を引き上げて実効サイズを補う。
   （実機・スクリーンショットでの検証はしていない。推定値。） */
.pk2-fig svg .fig-box { fill: #fff; stroke: var(--c-border); stroke-width: 1.5; }
.pk2-fig svg .fig-box--accent { fill: #FDF1F2; stroke: var(--c-accent); stroke-width: 2; }
.pk2-fig svg .fig-line { stroke: var(--c-border); stroke-width: 2; fill: none; }
.pk2-fig svg .fig-line--accent { stroke: var(--c-accent); }
.pk2-fig svg .fig-arrow { fill: var(--c-border); }
.pk2-fig svg .fig-arrow--accent { fill: var(--c-accent); }
.pk2-fig svg .fig-num-c { fill: #fff; stroke: var(--c-accent); stroke-width: 2; }
.pk2-fig svg .fig-num-t { font-family: var(--font-en); font-size: 18px; font-weight: 700; fill: var(--c-accent); }
.pk2-fig svg .fig-ttl { font-family: var(--font-jp); font-size: 15px; font-weight: 600; fill: #333333; }
.pk2-fig svg .fig-sub { font-family: var(--font-jp); font-size: 12px; fill: var(--c-muted); }
.pk2-fig svg .fig-val { font-family: var(--font-en); font-size: 22px; font-weight: 700; fill: var(--c-accent); }
.pk2-fig svg .fig-lbl { font-family: var(--font-jp); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; fill: var(--c-muted); }
.pk2-fig svg .fig-track { fill: none; stroke: #e8eaee; stroke-width: 10; }
.pk2-fig svg .fig-arc { fill: none; stroke: var(--c-accent); stroke-width: 10; stroke-linecap: round; }
.pk2-fig svg .fig-chart-bg { fill: #fafafa; stroke: var(--c-border); stroke-width: 1; }
.pk2-fig svg .fig-chart-line { fill: none; stroke: var(--c-accent); stroke-width: 2.5; }
.pk2-fig svg .fig-chart-dot { fill: var(--c-accent); }

@media (max-width: 1023px) {
  .pk2-fig svg .fig-num-t { font-size: 26px; }
  .pk2-fig svg .fig-ttl { font-size: 21px; }
  .pk2-fig svg .fig-sub { font-size: 16px; }
  .pk2-fig svg .fig-val { font-size: 30px; }
  .pk2-fig svg .fig-lbl { font-size: 15px; }
}

/* ---------- 締めの見出し（.contentsbox__catch をそのまま使うが、直後に来る余白だけ調整） ---------- */
.pk2-closing .contentsbox__catch { margin-top: 0; }

/* ---------- product-karteco-c.html（支給図版そのまま版）専用。pk2- は書き換えない ---------- */
.pk2c-fig__img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ---------- pk2c-chapter：テキストを上・図を下に全幅で積む版
   .pk2-chapter は2カラム（1fr / 1.15fr）で図が960pxカードの35%（約447px）まで縮み
   支給PPT画像の文字が読めなくなる問題があったため、product_service/karteco/ 専用に新設。
   .pk2-chapter__no/__num/__label/__ttl/__body は幅指定を持たないタイポグラフィのみの
   クラスなのでそのまま流用し、ここでは外枠（.pk2c-chapter）と図の全幅化（.pk2c-fig）だけ追加する。 ---------- */
.pk2c-chapter {
  padding-top: 56px;
  margin-top: 56px;
  border-top: 1px solid var(--c-border);
  /* 2026-09-02：左テキスト／右に図の2カラムへ戻した（りょうた指示）。
     .pk2-chapter と同じ比率。HTMLは触らず、直下の子を明示配置で振り分ける。 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: 44px;
  align-items: start;
}
/* 本文側は .pk2c-chapter__text で1つにまとめてある。
   まとめずに直下の子を並べると、図の高さぶん行が引き伸ばされて
   見出しと本文の間に大きな隙間ができた（2026-09-02 実測）。 */
.pk2c-chapter__text { min-width: 0; grid-column: 1; grid-row: 1; }
.pk2c-chapter > .pk2c-fig { grid-column: 2; grid-row: 1; align-self: center; }

/* 2026-09-02：workwell の章は図が情報量に対して大きすぎたので右カラムを絞る（りょうた指示）。 */
.pk2c-chapter--compact { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }

/* 補足枠と締めの帯は左カラムに閉じ込めず、2カラム幅いっぱいを使う（りょうた指示）。 */
.pk2c-chapter__full { grid-column: 1 / -1; margin-top: 28px; }

/* 2026-09-02：章番号・見出し・本文は全幅にし、「1｜…」のステップから2カラムにする（りょうた指示）。
   テキスト全体を左カラムに入れていたときは、左が縦に長くなって図が中央で浮いていた。 */
.pk2c-chapter__head { grid-column: 1 / -1; margin-bottom: 28px; }
/* __text と .pk2c-fig は row:1 を明示しているので、見出しブロックにも行を割り当てないと
   自動配置で2行目へ回り、図とステップが見出しより上に出てしまう（2026-09-02 実測）。 */
.pk2c-chapter--compact > .pk2c-chapter__head { grid-row: 1; }
.pk2c-chapter--compact > .pk2c-chapter__text { grid-row: 2; }
.pk2c-chapter--compact > .pk2c-fig { grid-row: 2; }
/* 図の見出しは全幅ブロックの中で本文と頭を揃える（中央寄せをやめる） */
.pk2c-chapter__head .pk2-fig-ttl { margin-top: 22px; text-align: left; }
.pk2c-chapter__full .story__box { margin: 0; max-width: none; }
/* 章の外に置く締めの帯用。.story__box の既定は max-width:520px なので、
   カード幅いっぱいに使いたいときはこの修飾子を付ける（2026-09-02）。 */
.story__box--wide { max-width: none; }

/* 図をコンテナ幅の80%に収める修飾子。
   karteco-patient のASPIC画像が本文幅いっぱい（880px）で大きすぎたため（2026-09-03 りょうた指示）。
   .article__fig 自体は他ページでも使うので直接は変えない。 */
.article__fig--80 img { max-width: 80%; height: auto; display: block; margin-inline: auto; }

/* 補足枠。問い合わせページ用の .contact-note を流用していたため、
   意味の無いオレンジ（--c-sub1）の左罫線が入っていた（2026-09-02 指摘）。
   色はサイトのアクセント色（赤 #E60016）の左罫線にした（2026-09-02 りょうた指示）。 */
.ww2-note { margin: 0; padding: 22px 24px; background: #fafafa; border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); font-size: 14px; line-height: 1.9; }
.ww2-note p { margin: 0; }
.ww2-note p + p { margin-top: 6px; color: var(--c-muted); }
.pk2c-chapters > .pk2c-chapter:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

/* 2カラムに戻したため、カード幅いっぱいへの食い込み（margin: -40px）はやめた。
   図は右カラムの幅に収める。 */
.pk2c-fig { margin: 0; position: relative; z-index: 1; }

/* 図は元画像1400pxをカラム幅（約400px）まで縮めているため、拡大すると実際に細部が読める。
   transform で拡大するのでレイアウトは動かない（周囲を押し出さない）。
   ホバーできる環境だけに限定し、タッチ端末では効かせない。 */
/* 1023px以下は1カラムに落ちて図が920px前後まで広がる（実測）。
   ホバー拡大時の741pxより大きいので、拡大が要るのは2カラムの1024px以上だけ。 */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .pk2c-fig__img { transition: transform 0.25s ease, box-shadow 0.25s ease; transform-origin: center right; }
  .pk2c-fig:hover { z-index: 30; }
  .pk2c-fig:hover .pk2c-fig__img { transform: scale(1.85); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .pk2c-fig__img { transition: none; }
}

@media (max-width: 1023px) {
  /* 狭幅は1カラムに落として、図は本文の下 */
  .pk2c-chapter, .pk2c-chapter--compact { padding-top: 40px; margin-top: 40px; grid-template-columns: 1fr; }
  .pk2c-chapter__text { grid-row: auto; }
  .pk2c-chapter > .pk2c-fig { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .pk2c-chapter__full { margin-top: 20px; }
}

/* ---------- 本文中のリンクの可視化（2026-09-03）
   基底の a{color:inherit} のままだと本文に埋まったリンクが黒字のまま押せるか分からない。
   ナビ・ボタン・カード全体リンクは枠や配置で分かるため対象外とし、
   文章の中に埋まったリンクだけ .note a と同じ赤＋下線にする。 ---------- */
.contentsbox p a:not(.news-item),
.contentsbox li a:not(.news-item),
.contentsbox dd a:not(.news-item),
.contentsbox td a:not(.news-item),
.message__body a:not(.news-item),
.company__outline a:not(.news-item),
.pk2-fig-cap a:not(.news-item),
.ww2-note a:not(.news-item),
.story__box a:not(.news-item) {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contentsbox p a:not(.news-item):hover,
.contentsbox li a:not(.news-item):hover,
.contentsbox dd a:not(.news-item):hover,
.contentsbox td a:not(.news-item):hover,
.message__body a:not(.news-item):hover,
.company__outline a:not(.news-item):hover,
.pk2-fig-cap a:not(.news-item):hover,
.ww2-note a:not(.news-item):hover,
.story__box a:not(.news-item):hover {
  text-decoration-thickness: 2px;
}
.contentsbox p a:not(.news-item):focus-visible,
.contentsbox li a:not(.news-item):focus-visible,
.contentsbox dd a:not(.news-item):focus-visible,
.contentsbox td a:not(.news-item):focus-visible,
.message__body a:not(.news-item):focus-visible,
.company__outline a:not(.news-item):focus-visible,
.pk2-fig-cap a:not(.news-item):focus-visible,
.ww2-note a:not(.news-item):focus-visible,
.story__box a:not(.news-item):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* 記事内のPDF導線（.article__pdfdl a）は枠と矢印を持つボタンとして作ってある。
   本文リンクの着色規則（上）が後から当たって下線が乗っていたので打ち消す（2026-09-03 指摘）。
   色は元から赤なので、下線だけ外す。
   .contentsbox p a:not(.news-item) と詳細度を合わせないと打ち消せない（実測）。 */
.contentsbox p.article__pdfdl a,
.contentsbox p.article__pdfdl a:hover,
.contentsbox p.article__pdfdl a:focus-visible,
.article__pdfdl a { text-decoration: none; }

/* ---------- フッター下段：サイトポリシー導線（このサイトについて／個人情報保護）----------
   .footer__nav（5本）はそのまま。その下に別行として追加する。
   色は既存の .footer__language と同じ rgba(255,255,255,0.45) / hover #fff を流用し、
   新しい色は足さない。文字サイズは .footer__nav（13px）より一段小さい12px。 */
.footer__sub-nav { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 24px; }
.footer__sub-nav a { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); transition: color 0.3s; }
.footer__sub-nav a:hover { color: #fff; }

/* ============================================================
   2026-09-03 スマホ表示の調整（りょうた指摘）
   ============================================================ */

/* 1) 氏名など、途中で折り返されると読みにくいものを1語として扱う */
.u-nowrap { white-space: nowrap; }

/* 2) 暗色帯の下の余白。狭幅では中身が2〜3行と短いのに
      padding-bottom:110px（後続の白タイルを乗せるための逃げ）が効いて
      黒が大きく余っていた。逃げの量ごと詰める。 */
@media (max-width: 1023px) {
  /* 逃げ（後続の白タイルを乗せるぶん）と中身の下余白。
     2026-09-03 二度目の調整：上余白28pxに対して下が空きすぎていたので、
     「上と同じ＋50px」を目安に詰めた（28 + 50 = 78 が帯の下端までの余白）。 */
  .aboutintro { margin-bottom: -50px; padding-bottom: 50px; }
  .aboutintro__inner { padding: 28px 20px 28px; }
}

/* 3) 日本語の折り返しを文節単位にする。
      対応していないブラウザは無視するだけなので安全。
      見出しは行の長さを揃える（text-wrap: balance）。 */
.contentsbox__text, .message__p, .message__sign, .card__txt, .note,
.aboutintro__inner h1, .company__outline dd, .pk2-chapter__body,
.prodlist__desc, .sec-lead, .story__box .tx {
  word-break: auto-phrase;
}
.contentsbox__ttl, .contentsbox__catch, .sec-num, .pk2-chapter__ttl,
.aboutintro__inner h1, .framebox__ttl, .prodvision__catch {
  text-wrap: balance;
}