@charset "UTF-8";
/* =====================================================================
   CMC エクスマニコム コーポレートサイト  —  共通スタイル
   Theme: cmc-xmanicom
   このファイルは WordPress テーマと preview.html で共有されます。
   ===================================================================== */

/* ---- Design tokens ---- */
:root{
  --blue:            #2f74c0;   /* 基本ブルー（リンク・アクセント）*/
  --blue-dark:       #1f5fa8;   /* 見出しの英字ラベル */
  --blue-deep:       #123f7d;   /* サービス背景の濃色 */
  --blue-teal:       #0b6fa4;   /* サービス背景の明色 */
  --btn-from:        #5aa0dd;   /* ボタングラデ 明 */
  --btn-to:          #2f74c0;   /* ボタングラデ 濃 */
  --navy:            #0c1f42;   /* お問い合わせ背景 */
  --navy-2:          #0a1730;
  --ink:             #222528;   /* 本文の濃い文字 */
  --ink-soft:        #4a4f55;   /* 本文 */
  --ink-mute:        #7a8088;   /* 補助テキスト */
  --line:            #e3e6ec;   /* 罫線 */
  --bg-hero:         #eaf1f8;   /* ヒーロー背景 */
  --bg-news:         #ebedf2;   /* ニュース背景 */
  --bg-recruit:      #e9eaec;   /* 採用背景 */
  --bg-foot:         #ececef;   /* フッター背景 */
  --white:           #ffffff;
  --wrap:            1120px;    /* コンテンツ最大幅 */
  --radius:          12px;
  --shadow:          0 6px 24px rgba(20,40,80,.06);
  --shadow-card:     0 2px 14px rgba(20,40,80,.05);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.9;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.85; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }

/* 英字ラベル（NEWS / SERVICE …）*/
.eyebrow{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--blue-dark);
  margin-top:2px;
}
/* セクション和文見出し */
.sec-title{
  font-size:26px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
  margin:0;
  line-height:1.4;
}

/* 汎用ボタン ------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:190px;
  padding:12px 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  border:none;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn .chev{ font-size:12px; opacity:.9; }
.btn--primary{
  color:#fff;
  background:linear-gradient(120deg, var(--btn-from), var(--btn-to));
  box-shadow:0 6px 16px rgba(47,116,192,.28);
}
.btn--primary:hover{ transform:translateY(-1px); opacity:1; box-shadow:0 10px 22px rgba(47,116,192,.34); }
.btn--outline{
  color:var(--blue);
  background:#fff;
  border:1.5px solid var(--blue);
}
.btn--outline .chev{ color:var(--blue); }
.btn--outline:hover{ background:var(--blue); color:#fff; opacity:1; }
.btn--outline:hover .chev{ color:#fff; }
.btn--ghost-line{
  color:var(--blue);
  background:transparent;
  border:1.5px solid var(--blue);
}

/* =====================================================================
   ヘッダー
   ===================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--wrap); margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; }
.brand img{ height:42px; width:auto; }
.header-right{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.header-utils{ display:flex; align-items:center; gap:18px; }
.util-contact{
  background:#22262b; color:#fff; font-size:13px; font-weight:700;
  padding:9px 20px; border-radius:4px; white-space:nowrap;
}
.util-contact:hover{ opacity:.9; }
.util-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--ink-soft); font-weight:500; white-space:nowrap;
}
.util-link svg{ width:15px; height:15px; }
.gnav{ display:flex; align-items:center; gap:34px; }
.gnav > .menu-item{ position:relative; }
.gnav a.top,
.gnav .top{
  display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:700; color:var(--ink); padding:6px 0;
}
.gnav .top .caret{ font-size:9px; color:var(--blue); transform:translateY(1px); }
/* ドロップダウン */
.submenu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:8px; min-width:210px;
  opacity:0; visibility:hidden; transition:.18s ease; z-index:120;
}
.menu-item:hover .submenu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(4px); }
.submenu a{ display:block; padding:9px 14px; font-size:14px; border-radius:7px; color:var(--ink-soft); white-space:nowrap; }
.submenu a:hover{ background:var(--bg-hero); color:var(--blue); opacity:1; }

/* ハンバーガー（モバイル）*/
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.2s; }

/* =====================================================================
   ヒーロー
   ===================================================================== */
.hero{
  /* スライド素材の比率。ヒーローの高さはウィンドウ幅からこの比率で決まります。
     素材を別サイズに差し替えたら、この値も合わせて変更してください */
  --hero-ratio: 1490 / 540;
  position:relative; overflow:hidden;
  background:#fff;
  display:grid; grid-template-columns:minmax(0,1fr);
}
/* 比率どおりの高さを確保するためのスペーサー。
   キャッチコピーのほうが高くなる（＝画面が狭い）ときは、そちらに合わせて伸びます */
.hero::before{
  content:""; grid-area:1 / 1;
  width:100%; aspect-ratio:var(--hero-ratio);
}
.hero-inner{
  grid-area:1 / 1;
  /* グリッドアイテムは margin:auto があると内容幅に縮んでしまうため、
     width:100% を明示してコンテンツ最大幅まで広げる */
  width:100%; max-width:var(--wrap); margin:0 auto; padding:0 32px;
  display:flex; align-items:center;
}
.hero-carousel{
  position:absolute; inset:0; pointer-events:none;
}
.hero-illust{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center;
  opacity:0; transition:opacity .8s ease;
}
.hero-illust.is-active{ opacity:1; }
.hero-dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:18px;
  display:flex; gap:10px; z-index:3;
}
.hero-dot{
  width:10px; height:10px; border-radius:5px; border:none; padding:0;
  background:#c3d2e2; cursor:pointer; transition:background .3s, width .3s;
}
.hero-dot.is-active{ background:var(--blue); width:26px; }
/* キャッチコピーは data-hero-copy を付けたスライドの表示中だけ見せる
   （JS が動かない環境では常に表示されたままになります） */
/* キャッチコピーの各寸法はウィンドウ幅に連動させ、どの幅でも比率どおりの高さ
   （＝素材が切れない高さ）に収まるようにしています。
   コンテンツ最大幅 1120px 以上では従来と同じ 56px / 40px / 26px / 15px です */
.hero-copy{
  position:relative; z-index:2; max-width:560px;
  padding:clamp(20px, 5vw, 56px) 0;
  transition:opacity .8s ease;
}
/* 非表示のときは高さも占有しないよう、レイアウトから外す。
   こうしないと、文章の出ないスライド（トンガルLABO・動画）でも
   隠れた文章の分だけヒーローが縦に伸び、その差だけ素材が切り取られてしまう */
.hero-copy.is-hidden{
  opacity:0; pointer-events:none;
  position:absolute; top:0; left:0;
}
/* 英語版は1行が長く、560px幅だと折り返しが増えてヒーローが比率より縦に伸び、
   素材が切れてしまう。<br> で意図した行数のまま収まる幅まで広げる */
html[lang="en"] .hero-copy{ max-width:700px; }
.hero-copy h1{
  font-size:clamp(22px, 3.57vw, 40px);
  font-weight:700; line-height:1.5; letter-spacing:.03em;
  margin:0 0 clamp(14px, 2.32vw, 26px); color:#1c2a3a;
  text-shadow:0 0 12px #fff, 0 0 12px #fff, 0 1px 2px rgba(255,255,255,.9);
}
.hero-lead{ font-size:clamp(12px, 1.34vw, 15px); color:var(--ink-soft); line-height:2.1; margin:0;
  text-shadow:0 0 10px #fff, 0 0 10px #fff, 0 1px 2px rgba(255,255,255,.9);
}

/* =====================================================================
   ニュース
   ===================================================================== */
.news{ background:var(--bg-news); padding:70px 0 84px; }
.news-head{ display:flex; align-items:flex-start; gap:36px; margin-bottom:34px; }
.news-head .titles{ min-width:150px; }
.news-list{ display:flex; flex-direction:column; gap:20px; }
.news-item{
  display:flex; align-items:center; gap:26px;
  background:#fff; border-radius:14px; padding:24px 30px;
  box-shadow:var(--shadow-card);
  transition:transform .15s ease, box-shadow .15s ease;
}
.news-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.news-meta{ flex:0 0 auto; width:96px; text-align:left; }
.news-date{ font-size:13px; font-weight:700; color:var(--ink); }
.news-cat{
  display:inline-block; margin-top:8px; padding:3px 12px;
  font-size:11px; font-weight:700; color:var(--blue);
  border:1px solid var(--blue); border-radius:999px;
}
.news-text{ flex:1; font-size:14px; color:var(--ink-soft); line-height:1.85; }
.news-arrow{ flex:0 0 auto; color:#c2c8d2; font-size:20px; }

/* ニュース一覧ページ（年ごとのグループ）*/
.news-group + .news-group{ margin-top:52px; }
.news-year{
  display:flex; align-items:center; gap:18px;
  margin:0 0 22px; font-size:22px; font-weight:700; letter-spacing:.1em; color:var(--ink);
}
.news-year::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ニュース記事ページ */
.article{ max-width:860px; margin:0 auto; }
.article-head{ border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:36px; }
.article-date{ font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--ink-mute); }
.article-title{
  font-size:26px; font-weight:700; line-height:1.75; letter-spacing:.02em;
  margin:12px 0 0; color:var(--ink); text-wrap:pretty;
}
.article-meta{ margin:40px 0 0; padding:22px 26px; background:var(--bg-news); border-radius:12px; }
.article-meta dt{ font-size:14px; font-weight:700; color:var(--ink); }
.article-meta dd + dt{ margin-top:20px; }
.article-h3{
  font-size:18px; font-weight:700; letter-spacing:.04em; color:var(--ink);
  margin:44px 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.article .spec-list--ruled{ max-width:none; }
.article-meta dd{ margin:8px 0 0; font-size:14px; word-break:break-all; }
.article-meta a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.article-meta a:hover{ opacity:.75; }
.article-figure{ margin:0 0 34px; border-radius:14px; overflow:hidden; background:var(--bg-news); }
.article-figure img{ display:block; width:100%; height:auto; }

/* =====================================================================
   サービス
   ===================================================================== */
.service{
  padding:76px 0;
  background:linear-gradient(135deg, var(--blue-teal) 0%, #12579a 55%, var(--blue-deep) 100%);
}
.service-panel{
  max-width:var(--wrap); margin:0 auto;
  padding:0 32px;
  display:grid; grid-template-columns:0.9fr 1.25fr; gap:48px;
  color:#fff;
}
.service-lead h2{ color:#fff; }
.service-lead .eyebrow{ color:#cfe4f6; }
.service-lead p{ font-size:14px; line-height:2.1; color:#e7f0f9; margin:28px 0 0; }
.service-cards{ display:flex; flex-direction:column; gap:18px; }
.svc-card{
  display:flex; gap:22px; align-items:stretch;
  background:#fff; border-radius:14px; overflow:hidden; padding:18px;
}
.svc-thumb{ flex:0 0 150px; border-radius:10px; overflow:hidden; background:#dfe7f0; }
.svc-thumb img{ width:100%; height:100%; object-fit:cover; }
.svc-thumb--brand{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#d5e2ee; color:#2b5a86; font-size:13px; font-weight:700; letter-spacing:.06em;
  padding:10px;
}
.svc-body{ flex:1; display:flex; flex-direction:column; }
.svc-body h3{ margin:4px 0 10px; font-size:18px; font-weight:700; color:var(--ink); }
.svc-body p{ margin:0 0 16px; font-size:13px; line-height:1.8; color:var(--ink-soft); }
.svc-body .btn{ align-self:flex-end; margin-top:auto; min-width:150px; padding:10px 18px; }

/* =====================================================================
   会社案内
   ===================================================================== */
section.company{ padding:80px 0; background:#fff; }
.company-grid{ display:grid; grid-template-columns:0.9fr 1.15fr; gap:56px; align-items:start; }
.company-lead p{ font-size:14px; color:var(--ink-soft); line-height:2.1; margin:26px 0 30px; }
.company-card{ background:#f5f6f8; border-radius:16px; padding:34px 36px; }
.company-name{ font-size:22px; font-weight:700; color:var(--ink); margin:0; letter-spacing:.02em; }
.company-name-en{ font-size:13px; color:var(--ink-mute); margin:4px 0 22px; letter-spacing:.04em; }
/* 英文名の併記がない場合（英語版）は社名の下に同じ余白を確保する */
.company-name + .company-addr{ margin-top:26px; }
.company-addr{ display:flex; gap:16px; font-size:14px; color:var(--ink-soft); align-items:flex-start; }
.company-addr .lbl{ position:relative; font-weight:700; color:var(--ink); padding-bottom:6px; }
.company-addr .lbl::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--blue); }
.company-map{ margin-top:20px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.company-map img{ width:100%; }
.company-map iframe{ display:block; width:100%; height:260px; border:0; }
.company-map-link{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px; font-weight:700; color:var(--blue); }
.company-map-link .chev{ font-size:11px; }
.company-map-link:hover{ text-decoration:underline; }

/* =====================================================================
   採用情報
   ===================================================================== */
.recruit{ padding:70px 0; background:var(--bg-recruit); }
.recruit-grid{ display:grid; grid-template-columns:0.8fr 1.3fr; gap:44px; align-items:center; }
.recruit-cards{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.recruit-card{
  background:#fff; border-radius:14px; padding:40px 30px;
  text-align:center; box-shadow:var(--shadow-card);
}
.recruit-card h3{ margin:0 0 26px; font-size:19px; font-weight:700; color:var(--ink); }
.recruit-card .btn{ min-width:200px; justify-content:space-between; }

/* =====================================================================
   お問い合わせ
   ===================================================================== */
.contact{
  background:linear-gradient(120deg, var(--navy) 0%, #10254c 45%, var(--navy-2) 100%);
  color:#fff; padding:74px 0;
}
.contact-grid{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:44px; align-items:center; }
.contact-lead .eyebrow{ color:#7fb0e6; }
.contact-lead p{ font-size:14px; color:#cdd6e4; line-height:2; margin:24px 0 0; }
.contact-card{
  /* 中身が「フォームからのお問い合わせ」1列だけのため、右の列いっぱいに広げると
     カードが空いて見えます。幅を決めて列の中央に置いています。
     カードを大きく／小さくしたいときは width の値を変えてください
     （max-width:100% は、画面が狭いときにカードが画面からはみ出さないための保険です）。 */
  width:360px; max-width:100%; margin:0 auto;
  background:#fff; color:var(--ink); border-radius:16px;
  padding:30px 36px; display:grid; grid-template-columns:1fr; align-items:center;
}
.contact-col{ text-align:center; }
/* 見出しにあたる文字。小さすぎるとボタンだけが目立って浮いて見えるため、
   本文と同じくらいの大きさにして、ボタンとの間隔も詰めています */
.contact-col .label{ font-size:15px; font-weight:500; color:var(--ink-soft); margin-bottom:16px; }
.contact-card .btn{ min-width:210px; }

/* =====================================================================
   フッター
   ===================================================================== */
.site-footer{ background:var(--bg-foot); padding:56px 0 30px; color:#33435f; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-brand img{ height:42px; margin-bottom:18px; }
.footer-brand .addr{ font-size:13px; line-height:1.9; color:#5a6579; }
.footer-brand .copy{ font-size:12px; color:#8a93a3; margin-top:22px; }
.footer-col h4{ font-size:14px; font-weight:700; color:var(--blue-dark); margin:0 0 16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:3px; }
.footer-col li a{ font-size:13px; color:#4a566b; position:relative; padding-left:12px; }
.footer-col li a::before{ content:"-"; position:absolute; left:0; color:#9aa4b4; }
.footer-col li a:hover{ color:var(--blue); opacity:1; }
.footer-links-plain{ margin-top:18px; }
.footer-links-plain a{ display:block; font-size:13px; color:var(--blue-dark); font-weight:700; margin-bottom:10px; }

/* =====================================================================
   下層ページ共通パーツ
   （マニュアル制作など全ての下層ページで共有。ページ固有CSSは作りません）
   ===================================================================== */

/* ページヘッダー（下層ページのタイトル帯）*/
.page-hero{
  position:relative; overflow:hidden;
  min-height:320px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-hero);
}
.page-hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(224,238,248,.86), rgba(214,234,246,.42));
}
.page-hero-inner{ position:relative; z-index:2; text-align:center; padding:56px 20px; }
.page-hero h1{
  font-size:34px; font-weight:700; letter-spacing:.18em;
  margin:0; color:#20303f;
}
.page-hero .eyebrow{
  margin-top:10px; letter-spacing:.24em; font-size:14px; color:#fff;
  text-shadow:none;
}
/* 淡色ヒーロー画像のページ（ニュース・マニュアル制作など）*/
.page-hero.page-hero--light .eyebrow{ color:var(--blue); }

/* パンくず */
.breadcrumb{ border-bottom:1px solid var(--line); background:#fff; }
.breadcrumb ol{
  max-width:var(--wrap); margin:0 auto; padding:12px 32px;
  list-style:none; display:flex; flex-wrap:wrap; gap:10px;
  font-size:12px; color:var(--ink-mute);
}
.breadcrumb li{ display:flex; align-items:center; gap:10px; }
.breadcrumb li + li::before{ content:"\203A"; color:#b6bdc7; }
.breadcrumb a{ color:var(--blue); }

/* 導入リード（薄いブルー背景の本文ブロック）*/
.lead-block{ background:linear-gradient(180deg, #edf5fb, #f7fbfe); }
.lead-block .wrap{ padding-top:56px; padding-bottom:56px; }
.lead-catch{
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size:27px; font-weight:500; line-height:1.7; letter-spacing:.04em;
  text-align:center; margin:0 0 30px; color:var(--ink);
}
.lead-body{
  max-width:860px; margin:0 auto;
  font-size:15px; color:var(--ink-soft); line-height:2.05; text-wrap:pretty;
}
.lead-body p{ margin:0 0 14px; }
.lead-body p:last-child{ margin-bottom:0; }

/* 中央寄せセクション見出し */
.sec-head-c{ text-align:center; margin-bottom:38px; }
.sec-head-c .sec-title{ line-height:1.6; }
.sec-title--serif{
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight:500; letter-spacing:.12em;
}

/* セクションの余白（下層ページ共通）*/
.sec-pad{ padding:74px 0; }
.sec-pad--tight{ padding:56px 0; }
.bg-tint{ background:var(--bg-news); }

/* お悩みカード */
.issue-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.issue-card{
  display:flex; align-items:flex-start; gap:14px;
  background:#e8f6fb; border-radius:6px; padding:20px 22px;
  font-size:14px; line-height:1.8; color:var(--ink);
}
.issue-card::before{
  content:"\2713"; flex:0 0 auto; color:#1c6a5e; font-weight:700; font-size:15px; line-height:1.7;
}

/* 特長カード（画像＋番号＋見出し＋本文）*/
.feature-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:52px 44px;
}
.feature-card img{ border-radius:4px; margin-bottom:22px; }
.feature-num{
  font-size:19px; font-weight:400; color:var(--ink);
  font-family:"Times New Roman", "Noto Serif JP", serif; margin:0 0 6px;
}
.feature-card h3{
  font-size:21px; font-weight:500; line-height:1.6; letter-spacing:.02em;
  margin:0 0 18px; color:var(--ink);
  font-family:"Times New Roman", "Noto Serif JP", serif;
}
.feature-body{ font-size:13.5px; color:var(--ink-soft); line-height:2; text-wrap:pretty; }
.feature-body p{ margin:0 0 12px; }
.note-list{
  list-style:none; margin:16px 0 0; padding:0;
  font-size:12.5px; color:var(--ink-mute); line-height:1.9;
}

/* サービス詳細（画像＋テキストの横並び、交互反転）*/
.detail-row{
  display:grid; grid-template-columns:420px 1fr; gap:52px; align-items:start;
  padding:44px 0;
}
.detail-row + .detail-row{ border-top:1px solid var(--line); }
.detail-row img{ border-radius:4px; }
.detail-title{
  font-size:23px; font-weight:500; letter-spacing:.04em;
  color:var(--blue); margin:0 0 16px;
}
.detail-catch{
  font-size:15px; line-height:1.9; color:var(--ink); margin:0 0 20px; text-wrap:pretty;
}
.detail-text{ font-size:13.5px; color:var(--ink-soft); line-height:2; text-wrap:pretty; }
.detail-text p{ margin:0 0 12px; }
.detail-list{
  list-style:none; margin:18px 0 0; padding:0 0 0 22px;
  font-size:13.5px; color:var(--ink-soft); line-height:2;
}
.detail-list li{ position:relative; padding-left:14px; }
.detail-list li::before{ content:"\30FB"; position:absolute; left:0; color:var(--ink-mute); }
.detail-list li + li{ margin-top:8px; }
.detail-list strong{ color:var(--ink); font-weight:700; }
.detail-lead-sm{ font-size:13.5px; font-weight:700; color:var(--ink); margin:16px 0 0; }
.detail-actions{ margin-top:24px; }

/* 文章主体のページ用カード（トップメッセージ・理念など）*/
.doc-card{
  max-width:900px; margin:20px auto;
  background:#fff; border-radius:0; box-shadow:var(--shadow);
  padding:120px 72px;
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.doc-body{ font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size:15.5px; color:var(--ink-soft); line-height:2.2; text-wrap:pretty; }
.doc-body p{ margin:0 0 26px; }
.doc-body p:last-child{ margin-bottom:0; }
.doc-sign{
  display:flex; flex-direction:column;  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  margin-top:52px; font-size:15.5px; line-height:2.1; color:var(--ink);
}
.doc-sign .company{ font-weight:700; padding:0; background:none; }
.doc-sign .name{ display:block; }
.doc-sign .name .role{ color:var(--ink-mute); font-size:14px; margin-right:12px; }

/* 汎用：ボタンの中央寄せ */
.btn-center{ display:flex; justify-content:center; margin-top:44px; }

/* 定義リスト（会社概要・事業所情報などの項目表）*/
.spec-list{
  display:grid; grid-template-columns:150px 1fr; gap:14px 24px;
  margin:0; font-size:14px; line-height:1.95;
}
.spec-list dt{ color:var(--blue); font-weight:700; }
.spec-list dd{ margin:0; color:var(--ink-soft); }
.spec-list dd a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.spec-list dd a:hover{ opacity:.75; }
.spec-panel{ background:#f5f6f8; padding:38px 44px; margin:0 auto 46px; max-width:var(--wrap); }

/* 事業所（地図＋情報）*/
.office-row{
  display:grid; grid-template-columns:280px 1fr; gap:36px;
  align-items:start; margin-bottom:46px;
}
.office-map{ overflow:hidden; border:1px solid var(--line); }
.office-map iframe{ display:block; width:100%; height:200px; border:0; }
.office-name{
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size:20px; font-weight:500; letter-spacing:.03em; color:var(--ink);
  margin:0 0 22px;
}

/* 役員一覧（役職／氏名の一覧表）*/
.officer-list{
  max-width:820px; margin:0 auto; border-top:1px solid var(--line);
}
.officer-list-row{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:baseline;
  padding:22px 8px; border-bottom:1px solid var(--line);
}
.officer-role{ margin:0; font-size:14px; line-height:1.9; color:var(--ink-soft); }
.officer-name{
  margin:0; font-size:16px; font-weight:700; letter-spacing:.06em; color:var(--ink);
}


/* ページ内アンカーナビ（ページヘッダー直下の青帯）*/
.anchor-nav{ background:var(--blue); }
.anchor-nav ul{
  max-width:var(--wrap); margin:0 auto; padding:0 32px;
  list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
}
.anchor-nav li + li{ border-left:0; }
.anchor-nav a{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:15px 10px; font-size:13px; font-weight:700; letter-spacing:.06em; color:#fff;
}
.anchor-nav a::before{ content:"\2304"; font-size:15px; line-height:1; opacity:.9; transform:translateY(-3px); }
.anchor-nav a:hover{ opacity:1; background:rgba(255,255,255,.12); }


/* CMC GROUP Way など：3列カード＋番号 */
.value-grid--3{ }
.value-grid.value-grid--3{ grid-template-columns:repeat(3, 1fr); }
.value-num{
  display:block; font-size:14px; font-weight:700; letter-spacing:.1em;
  color:var(--blue); margin:0 0 10px; text-align:center;
}

/* ■付きリスト（募集職種など）*/
.sq-list{
  list-style:none; margin:0 auto; padding:0; max-width:860px;
  display:flex; flex-direction:column; gap:18px;
}
.sq-list > li{
  position:relative; padding-left:26px;
  font-size:16px; font-weight:700; color:var(--ink); line-height:1.9;
}
.sq-list > li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:11px; height:11px; background:currentColor;
}

/* バナー（外部サービス等）*/
.cta-note p{ color:#fff; }

.banner{ display:block; max-width:560px; margin:22px auto 0; }
.banner img{ display:block; width:100%; height:auto; }

/* 図版（1枚画像で見せるセクション）*/
.way-figure{ margin:0 auto; max-width:720px; }
.way-figure img{ display:block; width:100%; height:auto; }

/* 中央寄せのステートメント */
.statement{
  text-align:center; color:var(--blue);
  font-size:26px; font-weight:700; line-height:1.7; letter-spacing:.04em;
  margin:0;
}
.statement-core{
  display:flex; align-items:baseline; justify-content:center; gap:12px;
  font-size:40px; font-weight:700; color:var(--blue); letter-spacing:.06em;
  margin:0 0 44px;
}
.statement-core span{ font-size:26px; font-weight:500; }

/* 理念カード（4つのありたい姿など）*/
.value-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.value-card{
  background:#fff; border:1px solid var(--line); border-radius:4px;
  padding:30px 26px; box-shadow:var(--shadow-card);
}
.value-card h3{
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size:19px; font-weight:500; line-height:1.6; letter-spacing:.03em;
  margin:0 0 18px; color:var(--ink); text-align:center;
}
.value-card p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:2; text-wrap:pretty; }

/* 方針の箇条書き（品質方針など）*/
.policy-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:22px;
}
.policy-list > li{
  font-size:15px; color:var(--ink-soft); line-height:2.1; text-wrap:pretty;
}
.policy-sub{
  list-style:none; margin:16px 0 0; padding:0 0 0 22px;
  display:flex; flex-direction:column; gap:8px;
  font-size:14px; color:var(--ink-soft); line-height:1.95;
}
.policy-sub li{ position:relative; padding-left:16px; }
.policy-sub li::before{ content:"\30FB"; position:absolute; left:0; color:var(--ink-mute); }




/* 規程・方針など長文ページ（プライバシーポリシー等）*/
.legal{ max-width:900px; margin:0 auto; }
.legal-sec + .legal-sec{ margin-top:52px; }
.legal-h{
  font-size:17px; font-weight:700; letter-spacing:.04em; color:var(--ink);
  margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.legal-h .num{ color:var(--ink); margin-right:12px; }
.legal .spec-list dt{ color:var(--ink); }
.legal a{ color:var(--blue); text-decoration:underline; }
.legal a:hover{ opacity:.8; }
.legal-h4{ font-size:15px; font-weight:700; color:var(--ink); margin:28px 0 14px; }
.legal-ol, .legal-ul{
  margin:0; padding:0 0 0 24px;
  display:flex; flex-direction:column; gap:10px;
  font-size:14px; color:var(--ink-soft); line-height:2; text-wrap:pretty;
}
.legal-ul{ list-style:none; padding-left:0; }
.legal-ol--paren{ list-style:none; counter-reset:paren; padding-left:0; }
.legal-ol--paren > li{ position:relative; padding-left:44px; counter-increment:paren; }
.legal-ol--paren > li::before{
  content:"（" counter(paren) "）"; position:absolute; left:0; color:var(--ink);
}
.legal-ul > li{ position:relative; padding-left:16px; }
.legal-ul > li::before{ content:"\30FB"; position:absolute; left:0; color:var(--ink-mute); }
.legal-ul .legal-ul{ margin-top:10px; padding-left:18px; gap:8px; }
.legal-note{ font-size:13px; color:var(--ink-mute); line-height:1.95; margin:16px 0 0; }
.legal-meta{
  margin-top:56px; padding-top:26px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-mute); line-height:2;
}

/* 汎用テーブル（方針・仕様の対応表）*/
.data-table{
  width:100%; border-collapse:collapse; margin:0;
  font-size:14px; color:var(--ink-soft); line-height:1.95;
}
.data-table th, .data-table td{
  border:1px solid var(--line); padding:16px 18px; text-align:left; vertical-align:top;
  overflow-wrap:anywhere; /* 長いURL等でセルがはみ出さないように */
}
.data-table th{ background:#f5f6f8; color:var(--ink); font-weight:700; width:250px; }
/* 連番付きの見出しセル（例：1 共同利用する者の範囲）。折返し時は番号がぶら下がる */
.data-table .th-num{ padding-left:46px; text-indent:-28px; }
.data-table .th-num .cell-no{
  display:inline-block; width:28px; text-indent:0;
  font-weight:700; font-variant-numeric:tabular-nums;
}

/* テーブルセル内の番号リスト */
.cell-ol{ margin:0; padding:0 0 0 22px; display:flex; flex-direction:column; gap:6px; }
.cell-ol > li{ line-height:1.9; }

/* 罫線付き定義リスト（認証概要などの表）*/
.spec-list--ruled{ grid-template-columns:220px 1fr; gap:0; max-width:900px; margin:0 auto; }
.spec-list--ruled dt, .spec-list--ruled dd{ padding:20px 4px; border-bottom:1px solid var(--line); }
.spec-list--ruled dt:first-of-type, .spec-list--ruled dd:first-of-type{ border-top:1px solid var(--line); }

/* 小見出し（中央寄せ・ゴシック）*/
.subsec-title{
  text-align:center; font-size:17px; font-weight:700; letter-spacing:.06em;
  color:var(--ink); margin:0 0 34px;
}

/* CSRなど：見出し＋リード＋右寄せボタンのブロック */
.topic-block + .topic-block{ margin-top:64px; }
.topic-title{
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size:24px; font-weight:500; letter-spacing:.12em; line-height:1.6;
  margin:0 0 26px; color:var(--ink);
}
.topic-block .lead-body{ margin:0; max-width:none; }
.btn-right{ display:flex; justify-content:flex-end; margin-top:34px; }
.btn--wide{ min-width:275px; justify-content:space-between; padding:16px 22px; }

/* 番号付きリスト（企業行動憲章など）*/
.num-panel{ background:#f0f1f3; padding:44px 52px; }
.num-row{
  display:grid; grid-template-columns:96px 1fr; gap:24px; align-items:baseline;
  padding:24px 0;
}
.num-row + .num-row{ border-top:1px solid #d8dade; }
.num-index{
  font-family:"Times New Roman", "Noto Serif JP", serif;
  font-size:26px; font-weight:700; color:var(--ink); margin:0; letter-spacing:.02em;
}
.num-text{ margin:0; font-size:14px; color:var(--ink-soft); line-height:2; text-wrap:pretty; }

/* 沿革タイムライン */
.history{ max-width:820px; margin:0 auto; }
.history-row{ display:grid; grid-template-columns:110px 1fr; gap:24px; padding:0 0 26px; }
.history-year{
  font-size:17px; font-weight:700; color:var(--blue); margin:0; letter-spacing:.04em;
}
.history-list{
  list-style:none; margin:0; padding:0 0 0 22px;
  border-left:2px solid #cddfee;
  display:flex; flex-direction:column; gap:10px;
}
.history-list li{
  display:grid; grid-template-columns:74px 1fr; gap:10px;
  font-size:14px; line-height:1.9; color:var(--ink-soft); text-wrap:pretty;
}
.history-month{ color:var(--ink); font-weight:500; }

/* 下層ページ用 お問い合わせ帯 */
.cta-band{
  background:linear-gradient(115deg, #2f74c0, #4b8fd6 60%, #3f7fcb);
  padding:64px 0 72px;
}
.cta-band h2{
  font-size:24px; font-weight:700; letter-spacing:.06em;
  color:#fff; text-align:center; margin:0 0 26px;
}
.cta-card{
  max-width:820px; margin:0 auto; text-align:center;
  background:rgba(255,255,255,.86); border-radius:14px;
  padding:34px 32px 38px; box-shadow:var(--shadow);
}
.cta-card p{ margin:0 0 22px; font-size:14.5px; color:#1e3350; line-height:2; }

/* 白背景版のお問い合わせ帯 */
section.cta-band.cta-band--plain{ background:#fff; }
.cta-band--plain .cta-card{ background:#f5f6f8; box-shadow:none; }
.cta-band--plain .cta-note p{ color:var(--ink-soft); }
.btn--accent{
  color:#fff; min-width:300px; padding:15px 26px;
  justify-content:center; gap:14px;
  background:linear-gradient(100deg, #f57c00, #ffb300);
  box-shadow:0 8px 20px rgba(245,124,0,.3);
}
.btn--accent:hover{ transform:translateY(-1px); opacity:1; }

@media (max-width:1000px){
  .issue-grid{ grid-template-columns:1fr 1fr; }
  .detail-row{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:760px){
  .page-hero{ min-height:220px; }
  .page-hero h1{ font-size:24px; }
  .lead-catch{ font-size:20px; }
  .sec-pad{ padding:52px 0; }
  .issue-grid{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; gap:40px; }
  .detail-title{ font-size:20px; }
  .doc-card{ padding:80px 24px; }
  .spec-list{ grid-template-columns:1fr; gap:4px 0; }
  .spec-list--ruled dt{ padding-bottom:0; border-bottom:0; }
  .spec-list--ruled dd{ padding-top:6px; }
  .spec-list--ruled dt:first-of-type{ border-top:1px solid var(--line); }
  .spec-list--ruled dd:first-of-type{ border-top:0; }
  .spec-list dd{ margin-bottom:12px; }
  .spec-panel{ padding:28px 22px; }
  .office-row{ grid-template-columns:1fr; gap:20px; }
  .officer-list-row{ padding:16px 0; gap:12px; }
  .value-grid, .value-grid.value-grid--3{ grid-template-columns:1fr; gap:16px; }
  .statement{ font-size:20px; }
  .statement-core{ font-size:30px; }
  .num-panel{ padding:24px 22px; }
  /* 表組みは横並びをやめ、セルを縦積みにする（幅計算を安定させるため table 表示も解除）*/
  .data-table, .data-table thead, .data-table tbody, .data-table tr{
    display:block; width:100%;
  }
  .data-table th, .data-table td{
    display:block; width:auto; border-bottom:0;
    padding:14px 16px; overflow-wrap:anywhere;
  }
  .data-table tr:last-child > *:last-child{ border-bottom:1px solid var(--line); }
  .data-table .th-num{ padding-left:44px; }
  .num-row{ grid-template-columns:56px 1fr; gap:14px; }
  .num-index{ font-size:21px; }
  .btn-right{ justify-content:stretch; }
  .btn--wide{ min-width:0; width:100%; }
  .anchor-nav ul{ grid-auto-flow:row; }
  .anchor-nav li + li{ border-top:0; }
  .history-row{ grid-template-columns:1fr; gap:10px; }
  .history-list{ padding-left:16px; }
  .history-list li{ grid-template-columns:64px 1fr; }
  .btn--accent{ min-width:0; width:100%; }
}

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (max-width:1000px){
  .service-panel{ grid-template-columns:1fr; gap:32px; }
  .company-grid,.recruit-grid,.contact-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  body{ font-size:14px; }
  .wrap,.header-inner,.hero-inner{ padding-left:20px; padding-right:20px; }
  .header-right{ display:none; }
  .nav-toggle{ display:block; }
  .site-header.nav-open .header-right{
    display:flex; position:absolute; top:100%; right:0; left:0;
    background:#fff; border-bottom:1px solid var(--line);
    align-items:stretch; padding:18px 20px; gap:16px;
  }
  .site-header.nav-open .gnav{ flex-direction:column; align-items:flex-start; gap:14px; }
  .site-header.nav-open .submenu{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; padding:4px 0 4px 14px; min-width:0; }
  /* 文章はどの幅でも必ず素材の上に重ねる。
     幅が狭いとヒーローが縦長になり素材の左右が切れるため、
     文字サイズと余白を詰めて切れる量を抑え、切り取りは中央基準にしている */
  .hero-carousel{ position:absolute; inset:0; }
  .hero-illust{ opacity:0; object-position:center; }
  .hero-illust.is-active{ opacity:.9; }
  .hero-inner{ flex-direction:column; align-items:stretch; }
  .hero-copy{ padding:18px 0 26px; max-width:100%; }
  .hero-copy h1{ font-size:clamp(20px, 5.4vw, 29px); }
  .hero-lead{ font-size:clamp(13px, 3.5vw, 15px); line-height:1.9; }
  /* 英語版は文章量が多く、そのままだとヒーローが縦に伸びて素材が余計に切れるため、
     見出しを1段小さく、行間を詰めて日本語版と同程度の高さに揃える */
  html[lang="en"] .hero-copy h1{ font-size:clamp(19px, 5vw, 27px); }
  html[lang="en"] .hero-lead{ line-height:1.7; }
  .news-head{ flex-direction:column; gap:16px; }
  .news-item{ flex-wrap:wrap; gap:14px; padding:20px; }
  .news-meta{ width:auto; display:flex; align-items:center; gap:12px; }
  .news-cat{ margin-top:0; }
  .svc-card{ flex-direction:column; }
  .svc-thumb{ flex:0 0 160px; height:160px; }
  .svc-body .btn{ align-self:stretch; }
  .recruit-cards{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .sec-title{ font-size:22px; }
}