/* =====================================================================
   mk-inc.co.jp  Framer流リデザイン 2026-07-07（夜勤A）
   4要素: 1)大胆タイポ詰め 2)ガラス質バー 3)スプリング微動 4)スタッガー出現
   ブランド赤: #b23030 ／ 自己完結（外部CDN・外部フォントなし）
   ===================================================================== */
:root{
  --mk-ink:#16181d;
  --mk-sub:#666a72;
  --mk-faint:#9a9ea6;
  --mk-line:rgba(0,0,0,.08);
  --mk-soft:#f6f6f4;
  --mk-brand:#b23030;
  --mk-brand-d:#8f2626;
  --mk-brand-tint:rgba(178,48,48,.08);

  /* 余白（フィボナッチ継承） */
  --sp-1:8px; --sp-2:13px; --sp-3:21px; --sp-4:34px; --sp-5:55px; --sp-6:89px;
  --measure:680px;

  /* Framer流：スプリング & 出現イージング */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --easeout:cubic-bezier(.22,1,.36,1);

  /* 角丸（Framer流：柔らかいカード） */
  --r-card:16px;
  --r-img:10px;
  --r-btn:10px;

  --shadow-rest:0 1px 2px rgba(20,22,28,.05);
  --shadow-lift:0 2px 6px rgba(20,22,28,.06),0 14px 34px rgba(20,22,28,.12);
}
/* =====================================================================
   Lightning 本体への Framer流上書き（子テーマ mk-lightning-child-framer）
   ・CSS上書き＋JS1本のみ。子テーマを無効化すれば即原状復帰（可逆）
   ・ブランド赤 #b23030
   ===================================================================== */

/* Lightning のブランド変数を差し替え */
:root{
  --vk-color-primary:#b23030;
  --vk-color-primary-dark:#8f2626;
  --vk-color-primary-vivid:#b23030;
  --color-key:#b23030;
  --color-key-dark:#8f2626;
  --wp--preset--color--vk-color-primary:#b23030;
}

/* ---------- ベース ---------- */
body{ color:var(--mk-ink); letter-spacing:.01em; -webkit-font-smoothing:antialiased; }
body a:not(.btn){ color:var(--mk-brand-d); }
body a:not(.btn):hover{ color:var(--mk-brand); }

/* ---------- 1) 大胆タイポ（Lightning側の見出し） ---------- */
h1,h2,h3,.entry-title,.page-header_pageTitle,
.mainSection-title,.subSection-title,.slide-text-title{
  font-feature-settings:"palt";
  letter-spacing:-.03em;
  line-height:1.12;
  font-weight:800;
}
.page-header_pageTitle{ font-size:clamp(1.6rem,3.6vw,2.4rem) !important; }
.slide-text-title{ font-size:clamp(1.8rem,4.2vw,3.2rem) !important; letter-spacing:-.04em; line-height:1.06; }
.slide-text-caption{ font-size:clamp(12.5px,3.4vw,15px) !important; line-height:1.55; opacity:.92; letter-spacing:.01em; }

/* ---------- 2) ガラス質バー（Lightning .siteHeader） ----------
   position:sticky（fixedより安全：本文の高さ計算を壊さない） */
/* Lightning本体が html/body に overflow-x:hidden を掛けており、bodyのそれが
   スクロールコンテナを作って sticky のピン留めを無効化する（2026-07-08 本番実測）。
   clip はスクロールコンテナを作らないため sticky が生きる。横はみ出し防止効果は同じ。
   非対応ブラウザは従来どおり（＝ヘッダーが流れるだけで実害なし） */
@supports (overflow: clip){
  body{ overflow-x:clip !important; overflow-y:visible !important; }
}
/* ヘッダー縮小（在フロー高さ変化）とスクロールアンカリングの相互発振防止 */
html{ overflow-anchor:none; }
.siteHeader{
  position:sticky !important; top:0; z-index:1000;
  background:rgba(255,255,255,.68) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:none;
  transition:box-shadow .35s ease;
}
@supports not ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){
  .siteHeader{ background:rgba(255,255,255,.97) !important; }
}
.siteHeadContainer{ padding-top:12px; padding-bottom:12px; transition:padding .35s cubic-bezier(.22,1,.36,1); }
.siteHeader_logo img{ max-height:44px; width:auto; transition:max-height .35s cubic-bezier(.22,1,.36,1); }
/* JS（mk-framer-reveal.js）が付与する2段階クラス：縮小＋影 */
.siteHeader.fh--s1{ box-shadow:0 1px 0 rgba(0,0,0,.04),0 4px 14px rgba(20,22,28,.06); }
.siteHeader.fh--s1 .siteHeadContainer{ padding-top:7px; padding-bottom:7px; }
.siteHeader.fh--s1 .siteHeader_logo img{ max-height:38px; }
.siteHeader.fh--s2{ box-shadow:0 1px 0 rgba(0,0,0,.05),0 12px 32px rgba(20,22,28,.10); }
.siteHeader.fh--s2 .siteHeadContainer{ padding-top:5px; padding-bottom:5px; }
.siteHeader.fh--s2 .siteHeader_logo img{ max-height:34px; }

/* グローバルメニュー */
.gMenu > li > a{ padding:8px 13px; border-radius:9px;
  transition:transform .5s var(--spring),background .2s ease; }
.gMenu > li > a:hover{ background:var(--mk-brand-tint); transform:translateY(-2px) scale(1.02); }
.gMenu > li > a:active{ transform:scale(.97); }
.gMenu_name{ font-weight:700; font-size:14px; letter-spacing:.01em; color:var(--mk-ink); }
.gMenu > li > a:hover .gMenu_name,
.gMenu > li.current-menu-item > a .gMenu_name{ color:var(--mk-brand); }
.gMenu > li:before,
.gMenu > li.menu-item-has-children::after{ border-bottom-color:var(--mk-brand) !important; }
@media (min-width:768px){
  .gMenu li li{ background-color:var(--mk-brand) !important; }
  .gMenu li li a:hover{ background-color:var(--mk-brand-d) !important; }
}

/* ---------- トップ カルーセル ---------- */
.slide-cover{ background-color:var(--mk-brand) !important; }
.mini-content-container-1 .btn:hover,
.mini-content-container-2 .btn:hover{
  background-color:var(--mk-brand) !important;
  border-color:var(--mk-brand) !important;
}

/* ---------- サブページ見出し帯 ---------- */
.page-header{
  background:#fff !important;
  border-bottom:1px solid var(--mk-line);
  position:relative;
}
.page-header_pageTitle{
  color:var(--mk-ink) !important;
  padding-left:18px; position:relative;
}
.page-header_pageTitle::before{
  content:""; position:absolute; left:0; top:.14em; bottom:.14em;
  width:5px; background:var(--mk-brand); border-radius:3px;
}

/* ---------- 見出しアクセント ---------- */
h2,.mainSection-title{ border-top-color:var(--mk-brand) !important; }
h3:after,.subSection-title:after{ border-bottom-color:var(--mk-brand) !important; }
dt{ border-left-color:var(--mk-brand) !important; }

/* ---------- 3) スプリング感（ボタン・カード） ---------- */
.btn,.veu_card,.vk_prBlocks_item,.prBlock_icon_outer,.contact_bt{
  transition:transform .5s var(--spring),box-shadow .5s var(--spring),
             background .25s ease,border-color .25s ease,color .25s ease !important;
  will-change:transform;
}
.btn:hover,.contact_bt:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 24px rgba(178,48,48,.26);
}
.btn:active,.contact_bt:active{ transform:scale(.97); }
.veu_card:hover,.vk_prBlocks_item:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 2px 6px rgba(20,22,28,.06),0 14px 34px rgba(20,22,28,.12);
}
.veu_card{ border:1px solid var(--mk-line); border-radius:16px; overflow:hidden; }
.prBlock_icon_outer{ border-color:var(--mk-brand) !important; }
.prBlock_icon{ color:var(--mk-brand) !important; }
.prBlock_icon_outer:hover{ transform:translateY(-2px) scale(1.02); }

.btn{ border-radius:10px; font-weight:700; letter-spacing:.02em; }
.btn-primary,.wp-block-search__button{
  background-color:var(--mk-brand) !important;
  border-color:var(--mk-brand) !important;
}
.btn-primary:hover,.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.wp-block-search__button:hover,.wp-block-search__button:focus{
  background-color:var(--mk-brand-d) !important;
  border-color:var(--mk-brand-d) !important;
}
.btn-default,.btn-outline-primary{
  color:var(--mk-brand) !important; border-color:var(--mk-brand) !important;
}
.btn-default:hover,.btn-default:focus,
.btn-outline-primary:hover,.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active{
  color:#fff !important;
  background-color:var(--mk-brand) !important; border-color:var(--mk-brand) !important;
}

/* ---------- ページャ等キーカラー ---------- */
ul.page-numbers li span.page-numbers.current,
.page-link dl .post-page-numbers.current{ background-color:var(--mk-brand) !important; }
.pager li > a{ border-color:var(--mk-brand) !important; color:var(--mk-brand) !important; }
.pager li > a:hover{ background-color:var(--mk-brand) !important; color:#fff !important; }
.media .media-body .media-heading a:hover{ color:var(--mk-brand) !important; }
.veu_color_txt_key{ color:var(--mk-brand) !important; }
.veu_color_bg_key{ background-color:var(--mk-brand) !important; }
.veu_color_border_key{ border-color:var(--mk-brand) !important; }

/* ---------- フッター ---------- */
.siteFooter{
  border-top:4px solid var(--mk-brand) !important;
  background:#16181d;
}
.siteFooter,.siteFooter p,.siteFooter li,.siteFooter td{ color:#c9cbd0; }
.siteFooter a{ color:#fff; }
.siteFooter a:hover{ color:var(--mk-brand) !important; opacity:.85; }
.copySection p:nth-of-type(2){ display:none; }

/* ---------- 扉（トップスライド）演出 ----------
   ①写真がバンッと鮮明に登場（1.3s）→ ②にじみ2.5px＋白ベール（1.8s〜）
   → ③文字が下からフェードアップ（2.5s〜）。2026-07-08 社長確定（ライブ調整）。
   ベールは中央が薄くサイドほど濃い楕円＝周辺を沈めて文字を立たせる */
@keyframes mkHeroPunch{ 0%{opacity:0; transform:scale(1.07);} 30%{opacity:1;} 100%{opacity:1; transform:scale(1);} }
@keyframes mkHeroBlur{ from{ filter:none; } to{ filter:blur(2.5px) saturate(.95); } }
@keyframes mkHeroVeil{ from{opacity:0;} to{opacity:1;} }
@keyframes mkHeroTextFade{ from{opacity:0;} to{opacity:1;} }
@keyframes mkHeroTextUp{ from{transform:translateY(16px);} to{transform:none;} }
.slide-main .slide-item-img{ animation: mkHeroPunch 1.3s cubic-bezier(.22,.9,.3,1) both, mkHeroBlur 1.5s ease 1.8s both; }
.slide-main .slide-cover{
  background: radial-gradient(ellipse 62% 58% at 50% 60%, rgba(255,255,255,.28), rgba(255,255,255,.5)) !important;
  opacity:1 !important;
  animation: mkHeroVeil 1.5s ease 1.8s both;
}
/* .slide-text-set はLightningが transform:translate(-50%,-50%) で中央寄せしている。
   アニメでtransformを触ると中央寄せが消えて文字が右へ953px飛ぶ（v1.0.4の事故・実測）。
   親はフェードのみ・浮き上がり(translateY)は子要素に掛ける */
.slide-main .slide-text-set{ animation: mkHeroTextFade 1.1s cubic-bezier(.22,.9,.3,1) 2.5s both; }
.slide-main .slide-text-set > *{ animation: mkHeroTextUp 1.1s cubic-bezier(.22,.9,.3,1) 2.5s both; }
.slide-main .slide-text-title{ color:#16181d !important; }
.slide-main .slide-text-caption{ color:rgba(22,24,29,.78) !important; }
@media (prefers-reduced-motion: reduce){
  .slide-main .slide-item-img,
  .slide-main .slide-cover,
  .slide-main .slide-text-set,
  .slide-main .slide-text-set > *{ animation:none !important; }
  /* 動きなしでも完成形（にじみ＋ベール＋文字表示）を静止表示 */
  .slide-main .slide-item-img{ filter:blur(2.5px) saturate(.95); }
}

/* ---------- 「最新の投稿」news風 ---------- */
.wp-block-latest-posts.wp-block-latest-posts,
.widget_recent_entries ul{
  list-style:none; margin:0 auto; padding:0; max-width:var(--measure);
}
.wp-block-latest-posts > li,
.widget_recent_entries li{ border-top:1px solid var(--mk-line); }
.wp-block-latest-posts > li:last-child,
.widget_recent_entries li:last-child{ border-bottom:1px solid var(--mk-line); }
.wp-block-latest-posts > li > a,
.widget_recent_entries li > a{
  display:flex; align-items:baseline; gap:14px; padding:15px 6px;
  text-decoration:none; color:var(--mk-ink); font-size:15px; font-weight:600;
  border-radius:10px;
  transition:color .2s,background .2s,padding .45s var(--spring);
}
.wp-block-latest-posts > li > a:hover,
.widget_recent_entries li > a:hover{ color:var(--mk-brand-d); background:var(--mk-brand-tint); padding-left:14px; }
.wp-block-latest-posts > li > a::before,
.widget_recent_entries li > a::before{
  content:"NEWS"; flex:0 0 auto;
  font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--mk-brand); border:1px solid rgba(178,48,48,.35); border-radius:999px; padding:2px 10px;
  /* ピルとタイトルの間隔。本番はLightning common.cssの display:block が
     上の display:flex を同詳細度・後読みで上書きし gap が効かないため、
     ::before自身のmarginで空ける（2026-07-08 社長指示・1文字ぶん） */
  margin-right:1em;
}
.wp-block-latest-posts__post-date{ color:var(--mk-sub); font-size:12px; }
/* =====================================================================
   framer_kit — .mkp コンポーネント（Framer流）＋ reveal ＋ CF7
   （プレビューと子テーマで共用）
   ===================================================================== */
.mkp{
  color:var(--mk-ink);
  line-height:1.75; letter-spacing:.01em; -webkit-font-smoothing:antialiased;
  margin:0 auto; max-width:1080px;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}
.mkp *{ box-sizing:border-box; }

/* ---------- 1) 大胆なタイポの詰め ----------
   見出し: clamp(1.8rem,4.2vw,3.2rem) / palt / ls -0.03〜-0.05em / lh 1.05〜1.15
   ※本文・リード文は詰めない（可読性優先） */
.mkp h1,.mkp h2,.mkp h3,
.mkp .sec-head h2,.mkp .strip .stat .v{
  font-feature-settings:"palt";
  text-wrap:balance;
}
.mkp .hero,.mkp .home-hero{ padding:var(--sp-6) var(--sp-2) var(--sp-5); }
.mkp .eyebrow{ font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--mk-brand); margin:0 0 var(--sp-3); font-weight:700; }
.mkp .hero h1,.mkp .home-hero h1{
  font-size:clamp(1.8rem,4.2vw,3.2rem);
  line-height:1.06; font-weight:800; margin:0;
  letter-spacing:-.035em; border:0; padding:0;
}
.mkp h1 .dot{ color:var(--mk-brand); }
.mkp h1 .en{
  display:block; font-size:clamp(.95rem,1.6vw,1.25rem); font-weight:600;
  color:var(--mk-sub); margin-top:var(--sp-2);
  letter-spacing:-.01em; line-height:1.3;
}
.mkp .lead{ font-size:16.5px; color:var(--mk-sub); max-width:var(--measure); margin:var(--sp-4) 0 0; letter-spacing:.01em; }
.mkp .lead-en{ font-size:13px; color:var(--mk-faint); max-width:var(--measure); margin:var(--sp-2) 0 0; line-height:1.6; }

/* セクション */
.mkp section{ padding:var(--sp-5) var(--sp-2); border-top:1px solid var(--mk-line); }
.mkp .sec-head{ margin:0 0 var(--sp-4); }
.mkp .sec-head .num{ font-size:13px; letter-spacing:.18em; color:var(--mk-brand); font-weight:700; font-variant-numeric:tabular-nums; }
.mkp .sec-head h2{
  font-size:clamp(1.25rem,2.3vw,1.6rem); font-weight:800; margin:6px 0 0;
  letter-spacing:-.03em; line-height:1.12; position:relative; padding-left:var(--sp-3); border:0;
}
.mkp .sec-head h2::before{ content:""; position:absolute; left:0; top:.14em; bottom:.14em; width:5px; background:var(--mk-brand); border-radius:3px; }
.mkp .sec-head .en{ font-size:13.5px; color:var(--mk-sub); font-weight:600; letter-spacing:.02em; margin-top:6px; padding-left:var(--sp-3); }

/* ---------- カード群（Framer流：角丸＋浮遊） ---------- */
/* 拠点カード（quote） */
.mkp .loc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.mkp .loc{
  background:#fff; padding:26px; display:flex; flex-direction:column; min-height:200px;
  border:1px solid var(--mk-line); border-radius:var(--r-card); box-shadow:var(--shadow-rest);
}
.mkp .loc .photo{ aspect-ratio:1.618; background:var(--mk-soft); border-radius:var(--r-img); margin-bottom:18px; background-size:cover; background-position:center; position:relative; overflow:hidden; }
.mkp .loc .photo .hov{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .5s ease; }
.mkp .loc:hover .photo .hov{ opacity:1; }
.mkp .loc h3{ font-size:21px; font-weight:800; margin:0 0 3px; letter-spacing:-.02em; }
.mkp .loc .h-en{ font-size:13px; color:var(--mk-brand); font-weight:600; letter-spacing:.02em; margin-bottom:11px; }
.mkp .loc address{ font-style:normal; color:var(--mk-ink); font-size:15px; }
.mkp .loc .addr-en{ color:var(--mk-sub); font-size:13px; margin-top:2px; }
.mkp .loc .tel{ margin-top:auto; padding-top:14px; font-size:14px; color:var(--mk-sub); }
.mkp .loc .tel b{ color:var(--mk-ink); font-weight:700; }

/* 定義リスト */
.mkp .dl{ display:grid; grid-template-columns:220px 1fr; gap:0; }
.mkp .dl>div{ display:contents; }
.mkp .dl dt{ padding:21px 0 13px; border-top:1px solid var(--mk-line); font-weight:700; font-size:15px; margin:0; border-left:0; background:transparent; }
.mkp .dl dd{ padding:21px 0 13px 21px; border-top:1px solid var(--mk-line); border-left:0; margin:0; font-size:16px; }
.mkp .dl dd .en{ color:var(--mk-sub); font-size:13px; display:block; margin-top:2px; }

/* 機能モジュール */
.mkp .mods{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.mkp .mod{ background:#fff; border:1px solid var(--mk-line); border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-rest); }
.mkp .mod .ic{ width:42px; height:42px; margin-bottom:14px; color:var(--mk-brand); }
.mkp .mod h3{ font-size:19px; font-weight:800; margin:0 0 8px; letter-spacing:-.02em; }
.mkp .mod p{ margin:0; color:var(--mk-sub); font-size:15px; }
.mkp .mod .en{ display:block; color:var(--mk-faint); font-size:12px; margin-top:6px; letter-spacing:.02em; }

/* 製品リスト */
.mkp .prod{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; }
.mkp .prod .row{ display:flex; gap:16px; padding:16px 6px; border-top:1px solid var(--mk-line); align-items:baseline; border-radius:8px; }
.mkp .prod .row .n{ font-size:13px; color:var(--mk-brand); font-weight:700; min-width:24px; font-variant-numeric:tabular-nums; }
.mkp .prod .row .t b{ display:block; font-size:16px; font-weight:700; }
.mkp .prod .row .t .en{ color:var(--mk-sub); font-size:13px; }

/* 認証バッジ */
.mkp .cert{ display:flex; flex-wrap:wrap; gap:12px; }
.mkp .badge{ border:1px solid rgba(178,48,48,.4); background:#fff; color:var(--mk-brand-d); border-radius:999px; padding:11px 22px; font-size:14px; font-weight:700; box-shadow:var(--shadow-rest); }
.mkp .badge span{ color:var(--mk-sub); font-weight:500; margin-left:8px; }

/* 数字ストリップ（黒帯） */
.mkp .strip{ background:var(--mk-ink); color:#fff; border-radius:var(--r-card); margin:var(--sp-4) var(--sp-2); overflow:hidden; position:relative; }
.mkp section.strip{ padding:0; border-top:0; }
.mkp .strip::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--mk-brand); }
.mkp .strip .inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); padding:var(--sp-4); }
.mkp .strip .inner:has(> .stat:nth-child(4)){ grid-template-columns:repeat(4,1fr); }
.mkp .strip .stat .v{ font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; letter-spacing:-.045em; line-height:1.05; font-variant-numeric:tabular-nums; }
.mkp .strip .stat .v .u{ font-size:.42em; font-weight:700; margin-left:4px; letter-spacing:0; }
.mkp .strip .stat .k{ font-size:13px; color:#b0b3ba; margin-top:6px; letter-spacing:.04em; }

/* 沿革タイムライン */
.mkp .tl{ list-style:none; margin:0; padding:0; max-width:var(--measure); }
.mkp .tl li{ position:relative; padding:0 0 var(--sp-4) var(--sp-4); border-left:1px solid var(--mk-line); }
.mkp .tl li:last-child{ padding-bottom:4px; }
.mkp .tl li::before{ content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--mk-brand); box-shadow:0 0 0 4px var(--mk-brand-tint); }
.mkp .tl .yr{ font-size:13px; font-weight:700; color:var(--mk-brand); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.mkp .tl h3{ font-size:18px; font-weight:800; margin:2px 0 4px; letter-spacing:-.02em; }
.mkp .tl p{ margin:0; color:var(--mk-sub); font-size:14px; max-width:var(--measure); }
/* 章ラベル・転換点強調・締めノード＋採用導線（2026-07-08 v1.0.6） */
.mkp .tl .tl-era{ padding-top:var(--sp-4); padding-bottom:var(--sp-2); }
.mkp .tl .tl-era:first-child{ padding-top:2px; }
.mkp .tl .tl-era::before{ left:-5px; top:.5em; width:9px; height:9px; border-radius:2px; background:var(--mk-ink); box-shadow:0 0 0 4px #fff; }
.mkp .tl .tl-era .era-k{ display:block; font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--mk-faint); text-transform:uppercase; }
.mkp .tl .tl-era .era-t{ display:block; font-size:clamp(15px,2.4vw,17px); font-weight:800; color:var(--mk-ink); letter-spacing:-.01em; margin-top:3px; }
.mkp .tl .is-key::before{ width:13px; height:13px; left:-7px; top:5px; box-shadow:0 0 0 5px var(--mk-brand-tint); }
.mkp .tl .is-key .yr{ font-size:15px; }
.mkp .tl .is-key h3{ font-size:clamp(18px,2.6vw,20px); }
.mkp .tl .tl-end::before{ width:11px; height:11px; left:-6px; box-shadow:0 0 0 5px var(--mk-brand-tint); }
.mkp .tl .tl-end .yr{ color:var(--mk-brand); }
.mkp .tl-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:11px 22px; border:1px solid var(--mk-brand); border-radius:var(--r-btn); color:var(--mk-brand-d); font-weight:700; font-size:14px; letter-spacing:.02em; text-decoration:none; box-shadow:var(--shadow-rest); transition:transform .5s var(--spring),box-shadow .5s var(--spring),background .25s ease,color .25s ease; will-change:transform; }
.mkp .tl-cta::after{ content:"\2192"; display:inline-block; transition:transform .5s var(--spring); }
.mkp .tl-cta:hover{ background:var(--mk-brand); color:#fff; transform:translateY(-2px) scale(1.02); box-shadow:0 10px 24px rgba(178,48,48,.26); }
.mkp .tl-cta:hover::after{ transform:translateX(4px); }
.mkp .tl-cta:active{ transform:scale(.97); transition-duration:.15s; }

/* ナビカード（トップ事業案内） */
.mkp .navcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mkp .navcard{
  background:#fff; padding:32px 28px; display:flex; flex-direction:column;
  text-decoration:none; color:var(--mk-ink); min-height:210px;
  border:1px solid var(--mk-line); border-radius:var(--r-card); box-shadow:var(--shadow-rest);
}
.mkp .navcard:hover{ color:var(--mk-ink); }
.mkp .navcard .ic{ color:var(--mk-brand); margin-bottom:16px; width:46px; height:46px; display:grid; place-items:center; background:var(--mk-brand-tint); border-radius:12px; }
.mkp .navcard h3{ font-size:20px; font-weight:800; margin:0 0 8px; letter-spacing:-.02em; }
.mkp .navcard p{ margin:0; color:var(--mk-sub); font-size:14px; }
.mkp .navcard .more{ margin-top:auto; padding-top:16px; color:var(--mk-brand); font-weight:700; font-size:13px; letter-spacing:.02em; }
.mkp .navcard .more::after{ content:" \2192"; display:inline-block; transition:transform .5s var(--spring); }
.mkp .navcard:hover .more::after{ transform:translateX(4px); }

/* 動画・ヒーロー画像 */
.mkp .video{ width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r-card); display:block; box-shadow:var(--shadow-rest); }
.mkp .heroimg{ width:100%; aspect-ratio:1.618; object-fit:cover; border-radius:var(--r-card); display:block; margin-top:var(--sp-4); box-shadow:var(--shadow-rest); }

/* お知らせリスト */
.mkp .news{ list-style:none; margin:0; padding:0; }
.mkp .news li{ border-top:1px solid var(--mk-line); }
.mkp .news li:last-child{ border-bottom:1px solid var(--mk-line); }
.mkp .news a{ display:flex; align-items:baseline; gap:14px; padding:15px 6px; text-decoration:none; color:var(--mk-ink); border-radius:10px; transition:color .2s,background .2s,padding .45s var(--spring); }
.mkp .news a:hover{ color:var(--mk-brand-d); background:var(--mk-brand-tint); padding-left:14px; }
.mkp .news a .tag{ font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--mk-brand); border:1px solid rgba(178,48,48,.35); border-radius:999px; padding:2px 10px; flex:0 0 auto; }
.mkp .news a .t{ font-size:15px; font-weight:600; }

/* フィーチャー行（技術・製品） */
.mkp .frow{ display:grid; grid-template-columns:89px 1fr; gap:var(--sp-4); padding:var(--sp-4) 0; border-top:1px solid var(--mk-line); align-items:start; }
.mkp .frow .fnum{ font-size:13px; color:var(--mk-brand); font-weight:700; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.mkp .frow .fic{ width:56px; height:56px; color:var(--mk-brand); margin-top:10px; }
.mkp .frow h3{ font-size:clamp(1.2rem,2vw,1.45rem); font-weight:800; margin:0 0 4px; letter-spacing:-.03em; line-height:1.15; }
.mkp .frow .h-en{ font-size:13px; color:var(--mk-brand); font-weight:600; letter-spacing:.02em; margin-bottom:14px; }
.mkp .frow p{ margin:0 0 12px; color:#3a3d43; font-size:15.5px; max-width:var(--measure); }
.mkp .frow p.en{ color:var(--mk-sub); font-size:13px; }

/* コールアウト */
.mkp .callout{ background:var(--mk-soft); border:1px solid var(--mk-line); border-left:5px solid var(--mk-brand); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-card); }
.mkp .callout .k{ font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--mk-brand); text-transform:uppercase; }
.mkp .callout h3{ font-size:20px; font-weight:800; margin:6px 0 8px; letter-spacing:-.02em; }
.mkp .callout p{ margin:0; color:#3a3d43; font-size:15px; }

/* 共通CTA帯 */
.mkp .cta{ background:var(--mk-ink); color:#fff; border-radius:var(--r-card); margin:var(--sp-4) var(--sp-2) var(--sp-5); overflow:hidden; position:relative; }
.mkp .cta::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--mk-brand); }
.mkp .cta .inner{ padding:var(--sp-5) var(--sp-4); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.mkp .cta h3{ font-size:clamp(1.25rem,2.3vw,1.6rem); font-weight:800; margin:0; color:#fff; letter-spacing:-.03em; font-feature-settings:"palt"; }
.mkp .cta p{ margin:6px 0 0; color:#b0b3ba; font-size:14px; }
.mkp .cta .btns{ display:flex; gap:12px; flex-wrap:wrap; }
.mkp .cta a{ display:inline-block; padding:14px 28px; border-radius:var(--r-btn); font-weight:700; font-size:15px; text-decoration:none; }
.mkp .cta a.primary{ background:var(--mk-brand); color:#fff; }
.mkp .cta a.primary:hover{ background:#c53a3a; color:#fff; }
.mkp .cta a.ghost{ border:1px solid #5a5e66; color:#fff; }
.mkp .cta a.ghost:hover{ border-color:#fff; color:#fff; }

/* 注意書き・対応データ形式（contact） */
.mkp .notes{ display:grid; gap:var(--sp-3); }
.mkp .note{ background:#fff; border:1px solid var(--mk-line); border-radius:var(--r-card); padding:22px 26px; box-shadow:var(--shadow-rest); }
.mkp .note h3{ font-size:18px; font-weight:800; margin:0 0 4px; letter-spacing:-.02em; }
.mkp .note .h-en{ font-size:12px; color:var(--mk-brand); font-weight:600; letter-spacing:.02em; }
.mkp .note p{ margin:6px 0 0; color:#3a3d43; font-size:15px; max-width:var(--measure); }
.mkp .spec-table{ width:100%; border-collapse:collapse; max-width:var(--measure); margin-top:12px; }
.mkp .spec-table th,.mkp .spec-table td{ text-align:left; padding:12px 14px; border-top:1px solid var(--mk-line); font-size:15px; vertical-align:top; border-left:0; border-right:0; border-bottom:0; background:transparent; }
.mkp .spec-table th{ width:38.2%; font-weight:700; color:var(--mk-brand-d); white-space:nowrap; }
.mkp .spec-table tr:last-child td,.mkp .spec-table tr:last-child th{ border-bottom:1px solid var(--mk-line); }

/* ---------- 3) スプリング感マイクロインタラクション（CSSのみ） ---------- */
.mkp .navcard,.mkp .loc,.mkp .mod,.mkp .badge,.mkp .note,
.mkp .cta a,.wpcf7-form input[type=submit],.wpcf7-form button[type=submit]{
  transition:transform .5s var(--spring),box-shadow .5s var(--spring),
             background .25s ease,border-color .25s ease,color .25s ease;
  will-change:transform;
}
.mkp .navcard:hover,.mkp .loc:hover,.mkp .mod:hover,.mkp .note:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:var(--shadow-lift);
  border-color:rgba(178,48,48,.28);
}
.mkp .badge:hover{ transform:translateY(-2px) scale(1.02); box-shadow:var(--shadow-lift); }
.mkp .cta a:hover,
.wpcf7-form input[type=submit]:hover,.wpcf7-form button[type=submit]:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 24px rgba(178,48,48,.28);
}
.mkp .navcard:active,.mkp .loc:active,.mkp .mod:active,.mkp .note:active,.mkp .badge:active,
.mkp .cta a:active,
.wpcf7-form input[type=submit]:active,.wpcf7-form button[type=submit]:active{
  transform:scale(.97);
  transition-duration:.15s;
}

/* ---------- 4) スタッガー出現（.reveal はJSが付与＝JS無効でも安全） ---------- */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .65s var(--easeout),transform .65s var(--easeout);
  transition-delay:0ms;
}
.reveal.in{ opacity:1; transform:none; }

/* ---------- CF7 フォーム（マークアップ不変・見た目のみ） ---------- */
.wpcf7{ max-width:var(--measure); margin:0 auto; }
.wpcf7-form p{ margin:0 0 var(--sp-3); }
.wpcf7-form label{ font-weight:700; font-size:14px; color:var(--mk-ink); display:block; }
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=url],
.wpcf7-form input[type=number],
.wpcf7-form input[type=date],
.wpcf7-form input[type=file],
.wpcf7-form select,
.wpcf7-form textarea{
  width:100%; margin-top:6px;
  padding:13px 15px;
  border:1px solid var(--mk-line);
  border-radius:var(--r-btn);
  background:#fff;
  font-size:16px; color:var(--mk-ink);
  transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none; appearance:none;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus{
  outline:0; border-color:var(--mk-brand);
  box-shadow:0 0 0 4px var(--mk-brand-tint);
}
.wpcf7-form textarea{ min-height:160px; resize:vertical; }
.wpcf7-list-item{ margin:0 1.2em 0 0; }
.wpcf7-form input[type=submit],
.wpcf7-form button[type=submit]{
  width:auto; background:var(--mk-brand); color:#fff;
  border:0; border-radius:var(--r-btn);
  padding:15px 40px; font-size:16px; font-weight:700; letter-spacing:.02em;
  cursor:pointer;
}
.wpcf7 .wpcf7-spinner{ margin-left:10px; }

/* ---------- スマホ ---------- */
@media(max-width:760px){
  .mkp .hero,.mkp .home-hero{ padding:var(--sp-5) var(--sp-2) var(--sp-4); }
  .mkp .loc-grid,.mkp .mods,.mkp .prod,.mkp .navcards{ grid-template-columns:1fr; }
  .mkp .dl{ grid-template-columns:1fr; }
  .mkp .dl dt{ padding-bottom:0; }
  .mkp .dl dd{ padding-top:4px; border-top:0; padding-left:0; }
  .mkp .strip{ margin:var(--sp-3) var(--sp-2); }
  .mkp .strip .inner{ grid-template-columns:repeat(2,1fr) !important; }
  .mkp .frow{ grid-template-columns:1fr; gap:14px; }
  .mkp .navcard{ min-height:auto; }
  .mkp .cta .inner{ flex-direction:column; align-items:flex-start; padding:var(--sp-4); }
  .mkp .cta .btns a{ padding:13px 22px; }
}

/* ---------- 全アニメ無効（必須） ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}


/* ================================================================
   ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
   ★  社長調整パネル — ここの数字だけ変えて保存 → ブラウザ再読込  ★
   ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
   ■大きさ: clamp(最小, 画面連動, 最大) → ふだんは「3つ目の最大値」だけ
     変えればOK（例 3.2rem → 2.8rem で一回り小さく）。1rem=16px。
   ■位置・余白: px の数字を 大きく=広がる／小さく=詰まる。
   このブロックはCSSの最後にあるので、ここの値が必ず勝ちます。
   ================================================================ */
:root{
  /* ─── 大きさ ─── */
  --mk-adj-hero:      clamp(1.8rem, 4.2vw, 3.2rem);  /* ① トップ大見出し */
  --mk-adj-pagetitle: clamp(1.6rem, 3.6vw, 2.4rem);  /* ② 下層ページタイトル */
  --mk-adj-h2:        clamp(1.4rem, 2.8vw, 2rem);    /* ③ セクション見出し */
  --mk-adj-stat:      clamp(1.6rem, 3vw, 2.4rem);    /* ④ 実績ストリップの数字 */
  --mk-adj-h3:        clamp(1.2rem, 2vw, 1.45rem);   /* ⑤ カード見出し */
  --mk-adj-cta:       clamp(1.25rem, 2.3vw, 1.6rem); /* ⑥ CTA帯見出し */
  --mk-adj-lead:      16.5px;                        /* ⑦ リード文（本文導入） */
  /* ─── 位置・余白 ─── */
  --mk-adj-hero-top:    72px;   /* ⑧ トップ見出し帯の上余白 */
  --mk-adj-hero-bottom: 56px;   /* ⑨ 同・下余白 */
  --mk-adj-sec-py:      56px;   /* ⑩ 各セクションの上下余白 */
  --mk-adj-head-gap:    32px;   /* ⑪ セクション見出しと中身の間隔 */
  --mk-adj-width:       1080px; /* ⑫ コンテンツの最大幅 */
}
/* ↓適用先（ここは触らなくてよい） */
.mkp .hero h1,.mkp .home-hero h1{ font-size:var(--mk-adj-hero); }
.slide-text-title{ font-size:var(--mk-adj-hero) !important; }
.page-header_pageTitle{ font-size:var(--mk-adj-pagetitle) !important; }
.mkp .sec-head h2{ font-size:var(--mk-adj-h2); }
.mkp .strip .stat .v{ font-size:var(--mk-adj-stat); }
.mkp .frow h3{ font-size:var(--mk-adj-h3); }
.mkp .cta h3{ font-size:var(--mk-adj-cta); }
.mkp .lead{ font-size:var(--mk-adj-lead); }
.mkp .hero,.mkp .home-hero{ padding-top:var(--mk-adj-hero-top); padding-bottom:var(--mk-adj-hero-bottom); }
.mkp section:not(.strip){ padding-top:var(--mk-adj-sec-py); padding-bottom:var(--mk-adj-sec-py); }
.mkp .sec-head{ margin-bottom:var(--mk-adj-head-gap); }
.mkp{ max-width:var(--mk-adj-width); }
/* ★調整パネルここまで */

