@charset "UTF-8";
/* =========================================================================
   株式会社真紀設備設計事務所 サイトリニューアル 静的プレビュー 共通スタイル
   方針：白基調＋紺(#15314E)を軸に、真鍮色(#A9803F)をごく控えめなアクセント。
        見出しは明朝(Noto Serif JP)で50年企業の落ち着き／本文はゴシックで可読性。
        余白広め・1カラム＋エディトリアルな非対称レイアウト。
        グラデ多用・絵文字・カードに絵文字アイコンの量産はしない（AI感を避ける）。
   制作：制作部 / フロントエンドコーダー
   ========================================================================= */

:root{
  /* --- 配色（絞る） --- */
  --navy:#15314E;        /* メイン（信頼・技術） */
  --navy-deep:#0E2238;   /* 濃 */
  --navy-soft:#5C7790;   /* 淡（補助・英字ラベル） */
  --brass:#A9803F;       /* アクセント（真鍮・温かみ）控えめに */
  --brass-deep:#8C672E;
  --ink:#1D2630;         /* 本文 */
  --ink-2:#51606E;       /* 副次 */
  --ink-3:#838F99;       /* 補助・キャプション */
  --line:#E4E9EE;        /* 罫線（淡） */
  --line-2:#CFD8E0;
  --bg:#FFFFFF;
  --bg-tint:#F5F7F9;     /* ごく淡いグレー */
  --bg-cool:#EDF1F5;     /* ごく淡い水色 */
  --bg-ink:#11253B;      /* 反転背景（紺） */
  --error:#B23B3B;       /* 【要確認】等のフラグ */

  /* --- タイポ --- */
  --font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-en:"Inter","Helvetica Neue",Arial,sans-serif;
  --fs-body:16px;
  --lh-body:1.95;
  --ls-head:0.06em;

  /* --- 余白（8px基準・広め） --- */
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:72px;--s8:104px;--s9:140px;
  --gutter:20px;
  --maxw:1140px;
  --maxw-narrow:780px;
  --header-h:64px;

  --radius:4px;
  --radius-lg:8px;
  --shadow-soft:0 18px 50px rgba(21,49,78,.08);
  --shadow-card:0 6px 22px rgba(21,49,78,.06);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.5s;

  --z-header:40;--z-fixed:50;--z-drawer:60;--z-skip:70;
}
@media (min-width:768px){:root{--gutter:32px;}}
@media (min-width:1024px){:root{--gutter:44px;--header-h:78px;}}

/* --------- リセット／基礎 --------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;vertical-align:middle;}
a{color:var(--navy);text-underline-offset:.18em;}
p{margin:0 0 var(--s3);}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.5;color:var(--ink);}
ul{margin:0;}

.mss-en{
  display:block;
  font-family:var(--font-en);
  font-size:12px;
  font-weight:600;
  letter-spacing:.24em;
  color:var(--navy-soft);
  text-transform:uppercase;
}
.mss-flag{color:var(--error);font-weight:700;font-size:.8em;letter-spacing:0;}
.mss-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden;}
.mss-skip{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:var(--navy);color:#fff;padding:10px 18px;border-radius:0 0 6px 0;text-decoration:none;}
.mss-skip:focus{left:0;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--navy-soft);outline-offset:2px;}

/* --------- プレビュー注記バナー --------- */
.mss-preview-note{
  background:#FBF3E6;color:#6B4E22;
  font-size:13px;line-height:1.8;
  padding:10px var(--gutter);
  text-align:center;border-bottom:1px solid #E8D9BC;
}
.mss-preview-note strong{color:#5A3F18;}

/* --------- レイアウト --------- */
.mss-container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.mss-container--narrow{max-width:var(--maxw-narrow);}
.mss-section{padding-block:var(--s7);}
@media (min-width:1024px){.mss-section{padding-block:var(--s8);}}
.mss-section--tint{background:var(--bg-tint);}
.mss-section--cool{background:var(--bg-cool);}

/* セクション見出し（番号＋英字ラベル＋和文見出し） */
.mss-head{margin-bottom:var(--s6);}
.mss-head__no{
  font-family:var(--font-en);font-weight:600;font-size:13px;letter-spacing:.2em;
  color:var(--brass);display:inline-block;margin-bottom:var(--s2);
}
.mss-head__ttl{
  font-family:var(--font-serif);
  font-size:clamp(24px,4.6vw,36px);
  letter-spacing:var(--ls-head);
  line-height:1.5;
  font-weight:600;
  color:var(--navy);
}
.mss-head__ttl .mss-head__en{margin-top:var(--s2);font-size:12px;}
.mss-head__lead{margin-top:var(--s4);color:var(--ink-2);font-size:15.5px;line-height:2;max-width:46em;}
.mss-head--center{text-align:center;}
.mss-head--center .mss-head__lead{margin-inline:auto;}

/* --------- ボタン --------- */
.mss-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 32px;
  font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:.06em;line-height:1.4;white-space:nowrap;
  text-decoration:none;border:1.5px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.mss-btn:hover{transform:translateY(-2px);}
.mss-btn--primary{background:var(--navy);color:#fff;}
.mss-btn--primary:hover{background:var(--navy-deep);}
.mss-btn--accent{background:var(--brass);color:#fff;}
.mss-btn--accent:hover{background:var(--brass-deep);}
.mss-btn--outline{background:transparent;color:var(--navy);border-color:var(--line-2);}
.mss-btn--outline:hover{border-color:var(--navy);background:var(--navy);color:#fff;}
.mss-btn--ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.45);}
.mss-btn--ghost:hover{background:#fff;color:var(--navy);}
.mss-btn--sm{min-height:44px;padding:10px 20px;font-size:13.5px;}
.mss-btn--block{display:flex;width:100%;}
.mss-ico{width:1.1em;height:1.1em;flex:none;}

/* =========================================================================
   ヘッダー
   ========================================================================= */
.mss-header{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-header);
  height:var(--header-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid transparent;
  transition:height var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.mss-header.is-scrolled{box-shadow:0 1px 0 var(--line),0 10px 30px rgba(21,49,78,.05);border-bottom-color:var(--line);}
.mss-header__inner{display:flex;align-items:center;justify-content:space-between;height:100%;}

.mss-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);}
.mss-logo__mark{
  width:40px;height:40px;flex:none;border:1.5px solid var(--navy);
  display:grid;place-items:center;font-family:var(--font-serif);font-weight:600;font-size:20px;color:var(--navy);
}
.mss-logo__txt{display:flex;flex-direction:column;line-height:1.25;}
.mss-logo{flex:none;}
.mss-logo__name{font-family:var(--font-serif);font-weight:600;font-size:17px;letter-spacing:.04em;white-space:nowrap;}
.mss-logo__sub{font-family:var(--font-en);font-size:9.5px;letter-spacing:.18em;color:var(--navy-soft);}
@media (max-width:413px){.mss-logo__sub{display:none;}}

.mss-gnav{display:none;}
@media (min-width:1024px){
  .mss-gnav{display:block;margin-left:auto;margin-right:var(--s4);}
  .mss-gnav__list{display:flex;gap:18px;list-style:none;padding:0;margin:0;}
  .mss-gnav a{position:relative;white-space:nowrap;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:500;letter-spacing:.02em;padding-block:6px;}
}
@media (min-width:1200px){
  .mss-gnav{margin-right:var(--s5);}
  .mss-gnav__list{gap:24px;}
  .mss-gnav a{font-size:14px;letter-spacing:.04em;}
  .mss-gnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--brass);transition:width var(--dur) var(--ease);}
  .mss-gnav a:hover::after{width:100%;}
}

.mss-header__right{display:flex;align-items:center;gap:14px;}
.mss-header__tel{display:none;text-decoration:none;color:var(--navy);text-align:right;line-height:1.25;}
@media (min-width:1200px){.mss-header__tel{display:block;}}
.mss-header__tel-num{display:flex;align-items:center;gap:7px;justify-content:flex-end;white-space:nowrap;font-family:var(--font-en);font-weight:600;font-size:18px;letter-spacing:.01em;}
.mss-header__tel-time{font-size:10.5px;color:var(--ink-3);letter-spacing:.02em;}
.mss-header__cta{display:none;flex:none;}
@media (min-width:768px){.mss-header__cta{display:inline-flex;}}

.mss-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;}
@media (min-width:1024px){.mss-burger{display:none;}}
.mss-burger__bar{display:block;width:24px;height:2px;background:var(--navy);margin-inline:auto;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);}
.mss-burger[aria-expanded="true"] .mss-burger__bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mss-burger[aria-expanded="true"] .mss-burger__bar:nth-child(2){opacity:0;}
.mss-burger[aria-expanded="true"] .mss-burger__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* モバイルドロワー */
.mss-drawer{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:var(--bg-ink);color:#fff;
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  transform:translateX(100%);transition:transform var(--dur) var(--ease);
  overflow-y:auto;
}
.mss-drawer.is-open{transform:translateX(0);}
.mss-drawer__close{position:absolute;top:18px;right:18px;width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:30px;line-height:1;cursor:pointer;}
.mss-drawer__list{list-style:none;padding:0;margin:0 0 var(--s6);}
.mss-drawer__list li{border-bottom:1px solid rgba(255,255,255,.14);}
.mss-drawer__list a{display:block;padding:16px 4px;color:#fff;text-decoration:none;font-size:16px;letter-spacing:.04em;}
.mss-drawer__list a span{display:block;font-family:var(--font-en);font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.55);margin-top:2px;}
.mss-drawer__meta{font-size:13px;color:rgba(255,255,255,.7);line-height:1.9;margin-bottom:var(--s5);}
.mss-drawer .mss-btn{margin-bottom:12px;}

/* =========================================================================
   ヒーロー
   ========================================================================= */
.mss-hero{
  position:relative;overflow:hidden;color:#fff;background:#0E2238;
  padding-top:calc(var(--header-h) + 76px);padding-bottom:var(--s8);
}
/* 背景写真（本番は実績建物・社屋へ差し替え） */
.mss-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("../images/hero-building.jpg") center 28%/cover no-repeat;
}
/* 文字可読性のための紺のオーバーレイ（左を濃く） */
.mss-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(9,22,37,.30),rgba(9,22,37,.72)),
    linear-gradient(100deg,rgba(9,22,37,.93) 16%,rgba(13,32,53,.55) 58%,rgba(13,32,53,.18) 100%);
}
.mss-hero__inner{position:relative;z-index:2;}
.mss-hero__lead-col{max-width:40em;}
@media (min-width:1024px){.mss-hero{padding-top:calc(var(--header-h) + 104px);padding-bottom:calc(var(--s8) + 16px);}}

.mss-hero__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:var(--s4);}
.mss-hero__eyebrow .mss-en{color:#9CB6CE;}
.mss-hero__eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);}
.mss-hero__ttl{
  font-family:var(--font-serif);font-weight:600;
  font-size:clamp(28px,5.4vw,46px);line-height:1.5;letter-spacing:.04em;color:#fff;
  word-break:keep-all;line-break:strict;
}
.mss-hero__line{display:block;}
.mss-hero__ttl .accent{color:#E8C58A;}
.mss-hero__lead{margin-top:var(--s4);font-size:16px;line-height:2.1;color:rgba(255,255,255,.86);max-width:30em;}
.mss-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--s6);}

.mss-hero__card{
  background:rgba(9,22,37,.46);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius-lg);padding:28px;backdrop-filter:blur(6px);
}
.mss-hero__card-ttl{font-size:13px;letter-spacing:.14em;color:#9CB6CE;margin-bottom:var(--s4);font-weight:600;}
.mss-hero__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;}
.mss-hero__stat dt{font-size:12px;color:rgba(255,255,255,.62);letter-spacing:.04em;}
.mss-hero__stat dd{margin:2px 0 0;font-family:var(--font-serif);font-weight:600;line-height:1.2;}
.mss-hero__stat dd b{font-size:30px;letter-spacing:.02em;color:#fff;font-weight:600;}
.mss-hero__stat dd span{font-size:13px;color:rgba(255,255,255,.7);margin-left:3px;}

/* アクティブなナビ */
@media (min-width:1024px){
  .mss-gnav a[aria-current="page"]{color:var(--navy);font-weight:600;}
  .mss-gnav a[aria-current="page"]::after{width:100%;}
}
.mss-drawer__list a[aria-current="page"]{color:#E8C58A;}

/* =========================================================================
   下層ページ・ヘッダー（写真バンド＋パンくず）
   ========================================================================= */
.mss-pagehero{
  position:relative;overflow:hidden;color:#fff;background:#0E2238;
  padding-top:calc(var(--header-h) + 44px);padding-bottom:var(--s6);
}
.mss-pagehero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("../images/hero-building.jpg") center 22%/cover no-repeat;
}
.mss-pagehero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,22,37,.74),rgba(9,22,37,.88));
}
.mss-pagehero__inner{position:relative;z-index:2;}
.mss-pagehero__no{font-family:var(--font-en);font-weight:600;font-size:12px;letter-spacing:.22em;color:#E8C58A;display:block;margin-bottom:var(--s2);}
.mss-pagehero__ttl{font-family:var(--font-serif);font-weight:600;font-size:clamp(26px,5.2vw,42px);letter-spacing:.05em;line-height:1.45;color:#fff;}
.mss-pagehero__lead{margin-top:var(--s4);font-size:15px;line-height:2;color:rgba(255,255,255,.85);max-width:44em;}

.mss-crumb{padding:14px 0 0;}
.mss-crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:0;margin:0;font-size:12.5px;}
.mss-crumb li{display:flex;align-items:center;gap:9px;color:var(--ink-3);}
.mss-crumb li::after{content:"／";color:var(--line-2);}
.mss-crumb li:last-child::after{content:"";}
.mss-crumb a{color:var(--ink-2);text-decoration:none;}
.mss-crumb a:hover{color:var(--navy);text-decoration:underline;}
.mss-crumb [aria-current="page"]{color:var(--ink-3);}
/* ページヘッダー内に置く場合は淡色に */
.mss-pagehero .mss-crumb{padding:0 0 18px;}
.mss-pagehero .mss-crumb li{color:rgba(255,255,255,.6);}
.mss-pagehero .mss-crumb li::after{color:rgba(255,255,255,.4);}
.mss-pagehero .mss-crumb a{color:rgba(255,255,255,.82);}
.mss-pagehero .mss-crumb [aria-current="page"]{color:rgba(255,255,255,.6);}

/* =========================================================================
   トップ：下層ページへの誘導カード
   ========================================================================= */
.mss-navcards{display:grid;gap:16px;margin-top:var(--s6);}
@media (min-width:640px){.mss-navcards{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.mss-navcards{grid-template-columns:repeat(3,1fr);}}
.mss-navcard{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  padding:28px 26px;text-decoration:none;color:inherit;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.mss-navcard:hover{border-color:var(--navy);box-shadow:var(--shadow-card);transform:translateY(-3px);}
.mss-navcard__no{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--brass);}
.mss-navcard__ttl{font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--navy);letter-spacing:.03em;}
.mss-navcard__txt{font-size:13.5px;line-height:1.85;color:var(--ink-2);margin:0;}
.mss-navcard__more{margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;color:var(--brass-deep);letter-spacing:.04em;}
.mss-navcard__more::after{content:"　→";}

/* ページ下部の次ページ誘導 */
.mss-pagenav{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);}

/* =========================================================================
   汎用：リード／2カラム
   ========================================================================= */
.mss-lead-row{display:grid;gap:var(--s6);}
@media (min-width:1024px){.mss-lead-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--s8);}}

.mss-figure{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-cool);}
.mss-figure__ph{
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--navy-soft);text-align:center;padding:24px;
  background:
    repeating-linear-gradient(45deg,rgba(92,119,144,.06) 0 12px,transparent 12px 24px),
    var(--bg-cool);
}
.mss-figure__ph svg{width:46px;height:46px;opacity:.6;}
.mss-figure__ph span{font-size:12.5px;line-height:1.7;}

/* =========================================================================
   設備設計とは（人体メタファー）
   ========================================================================= */
.mss-meta{display:grid;gap:18px;margin-top:var(--s6);}
@media (min-width:768px){.mss-meta{grid-template-columns:repeat(3,1fr);}}
.mss-meta__item{padding:26px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;}
.mss-meta__item--on{border-color:var(--navy);box-shadow:var(--shadow-card);position:relative;}
.mss-meta__item--on::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brass);border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.mss-meta__role{font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:var(--navy-soft);}
.mss-meta__name{font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--navy);margin:6px 0 4px;}
.mss-meta__body-part{font-size:13px;color:var(--brass-deep);font-weight:600;margin-bottom:var(--s3);}
.mss-meta__txt{font-size:14px;line-height:1.95;color:var(--ink-2);margin:0;}

/* =========================================================================
   私たちの仕事（機械／電気）
   ========================================================================= */
.mss-svc{display:grid;gap:var(--s5);margin-top:var(--s6);}
@media (min-width:900px){.mss-svc{grid-template-columns:repeat(2,1fr);gap:var(--s6);}}
.mss-svc__card{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;overflow:hidden;display:flex;flex-direction:column;}
.mss-svc__hd{display:flex;align-items:center;gap:18px;padding:26px 28px;background:var(--navy);color:#fff;}
.mss-svc__hd-no{font-family:var(--font-serif);font-size:30px;font-weight:600;color:#E8C58A;line-height:1;flex:none;}
.mss-svc__hd-en{font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:#9CB6CE;}
.mss-svc__hd-ttl{font-family:var(--font-serif);font-size:21px;font-weight:600;letter-spacing:.04em;color:#fff;}
.mss-svc__bd{padding:28px;flex:1;}
.mss-svc__bd>p{font-size:14.5px;color:var(--ink-2);margin-bottom:var(--s4);}
.mss-svc__list{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.mss-svc__list li{padding-left:0;}
.mss-svc__list dt{font-weight:600;color:var(--navy);font-size:15px;display:flex;align-items:baseline;gap:10px;}
.mss-svc__list dt b{font-family:var(--font-en);font-size:12px;color:var(--brass);font-weight:600;letter-spacing:.04em;}
.mss-svc__list dd{margin:4px 0 0;font-size:13.5px;line-height:1.85;color:var(--ink-2);}

/* =========================================================================
   実績
   ========================================================================= */
.mss-works__cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s6);}
.mss-works__cat{
  font-size:13px;letter-spacing:.04em;color:var(--navy);
  border:1px solid var(--line-2);border-radius:9999px;padding:8px 16px;background:#fff;
}
.mss-works__grid{display:grid;gap:16px;}
@media (min-width:640px){.mss-works__grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.mss-works__grid{grid-template-columns:repeat(3,1fr);}}
.mss-work{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy-deep);color:#fff;
  min-height:200px;display:flex;align-items:flex-end;
  border:1px solid var(--line);
}
.mss-work__ph{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,#173657,#0E2238);
}
.mss-work__body{position:relative;padding:20px;width:100%;background:linear-gradient(180deg,transparent,rgba(8,20,34,.75));}
.mss-work__cat{font-family:var(--font-en);font-size:10.5px;letter-spacing:.18em;color:#E8C58A;}
.mss-work__ttl{font-family:var(--font-serif);font-size:17px;font-weight:600;margin-top:4px;line-height:1.5;color:#fff;}
.mss-work__loc{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;}

.mss-works__note{margin-top:var(--s5);font-size:13px;color:var(--ink-3);}

/* 分野別リスト */
.mss-catlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
@media (min-width:768px){.mss-catlist{grid-template-columns:repeat(2,1fr);}}
.mss-catitem{background:#fff;padding:24px 26px;}
.mss-catitem__ttl{font-family:var(--font-serif);font-size:17px;font-weight:600;color:var(--navy);margin-bottom:6px;padding-left:14px;position:relative;}
.mss-catitem__ttl::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--brass);border-radius:50%;}
.mss-catitem__txt{margin:0;font-size:13.5px;line-height:1.85;color:var(--ink-2);}

/* =========================================================================
   ZEB
   ========================================================================= */
.mss-zeb{display:grid;gap:var(--s6);}
@media (min-width:1024px){.mss-zeb{grid-template-columns:1fr 1fr;align-items:start;gap:var(--s8);}}
.mss-zeb__points{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;gap:16px;}
.mss-zeb__points li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.9;color:var(--ink-2);}
.mss-zeb__points li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:14px;border:2px solid var(--brass);border-radius:50%;}
.mss-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);}
.mss-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:440px;background:#fff;}
.mss-table caption{text-align:left;font-size:13px;color:var(--ink-3);padding:14px 16px;border-bottom:1px solid var(--line);}
.mss-table th,.mss-table td{padding:13px 14px;text-align:center;border-bottom:1px solid var(--line);}
.mss-table thead th{background:var(--bg-tint);color:var(--navy);font-weight:600;font-size:12.5px;}
.mss-table tbody th{text-align:left;background:#fff;color:var(--ink);font-weight:600;white-space:nowrap;}
.mss-table tbody tr:last-child th,.mss-table tbody tr:last-child td{border-bottom:0;}

/* =========================================================================
   理念（反転）
   ========================================================================= */
.mss-philosophy{background:var(--bg-ink);color:#fff;position:relative;overflow:hidden;}
.mss-philosophy::before{
  content:"同心協力";position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  font-family:var(--font-serif);font-weight:600;font-size:clamp(90px,20vw,260px);
  color:rgba(255,255,255,.035);white-space:nowrap;pointer-events:none;letter-spacing:.05em;
}
.mss-philosophy .mss-head__ttl{color:#fff;}
.mss-philosophy .mss-head__no{color:#E8C58A;}
.mss-philo__inner{position:relative;display:grid;gap:var(--s6);}
@media (min-width:1024px){.mss-philo__inner{grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center;}}
.mss-philo__motto{font-family:var(--font-serif);font-size:clamp(32px,7vw,56px);font-weight:600;letter-spacing:.18em;color:#fff;line-height:1.4;}
.mss-philo__motto small{display:block;font-size:14px;letter-spacing:.2em;color:#9CB6CE;margin-top:14px;font-family:var(--font-en);}
.mss-philo__txt{color:rgba(255,255,255,.85);font-size:15px;line-height:2.05;}
.mss-philo__txt strong{color:#E8C58A;font-weight:600;}
.mss-message{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.16);}
.mss-message__sign{display:flex;align-items:center;gap:14px;margin-top:var(--s4);}
.mss-message__sign .ph{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:11px;color:rgba(255,255,255,.6);flex:none;}
.mss-message__sign b{font-family:var(--font-serif);font-size:17px;font-weight:600;color:#fff;}
.mss-message__sign span{display:block;font-size:12px;color:rgba(255,255,255,.65);}

/* 社長挨拶ブロック */
.mss-portrait{margin:0;}
.mss-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:var(--radius-lg);display:block;background:var(--bg-cool);box-shadow:var(--shadow-card);}
.mss-portrait figcaption{margin-top:12px;font-size:13px;color:var(--ink-3);text-align:center;}
.mss-portrait.is-empty img{display:none;}
.mss-portrait.is-empty{
  aspect-ratio:4/5;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:var(--navy-soft);font-size:12.5px;line-height:1.8;
  background:repeating-linear-gradient(45deg,rgba(92,119,144,.06) 0 12px,transparent 12px 24px),var(--bg-cool);
}
.mss-portrait.is-empty figcaption{display:none;}
.mss-portrait.is-empty::after{content:"代表取締役 片峯 章雅の写真\A（images/president.jpg を設置すると表示されます）";white-space:pre-line;}
.mss-message-block{display:grid;gap:var(--s6);}
@media (min-width:900px){.mss-message-block{grid-template-columns:.8fr 1.2fr;gap:var(--s7);align-items:start;}}
.mss-message-block__sign{margin-top:var(--s5);color:var(--ink-2);font-size:14px;line-height:1.9;}
.mss-message-block__sign b{font-family:var(--font-serif);font-size:18px;color:var(--navy);font-weight:600;}

/* =========================================================================
   採用
   ========================================================================= */
.mss-recruit__banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;
  padding:24px 28px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--brass),var(--brass-deep));color:#fff;margin-bottom:var(--s6);
}
.mss-recruit__banner b{font-family:var(--font-serif);font-size:clamp(19px,3.6vw,26px);font-weight:600;letter-spacing:.04em;}
.mss-recruit__banner span{display:block;font-size:13px;color:rgba(255,255,255,.9);margin-top:4px;font-weight:400;}
.mss-recruit__cols{display:grid;gap:var(--s6);}
@media (min-width:1024px){.mss-recruit__cols{grid-template-columns:1.3fr 1fr;gap:var(--s7);}}
.mss-terms{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line);}
.mss-terms>div{display:grid;grid-template-columns:9.5em 1fr;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);}
@media (max-width:519px){.mss-terms>div{grid-template-columns:1fr;gap:2px;}}
.mss-terms dt{font-weight:600;color:var(--navy);font-size:14px;}
.mss-terms dd{margin:0;font-size:14px;color:var(--ink-2);line-height:1.85;}
.mss-career{background:var(--bg-tint);border-radius:var(--radius-lg);padding:28px;}
.mss-career__ttl{font-family:var(--font-serif);font-size:18px;font-weight:600;color:var(--navy);margin-bottom:var(--s4);}
.mss-steps{list-style:none;padding:0;margin:0;counter-reset:step;display:grid;gap:0;}
.mss-steps li{position:relative;padding:0 0 22px 40px;counter-increment:step;}
.mss-steps li::before{
  content:counter(step);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--font-en);font-size:12px;font-weight:600;
}
.mss-steps li::after{content:"";position:absolute;left:13px;top:30px;bottom:0;width:1px;background:var(--line-2);}
.mss-steps li:last-child{padding-bottom:0;}
.mss-steps li:last-child::after{display:none;}
.mss-steps b{display:block;font-size:15px;color:var(--navy);font-weight:600;}
.mss-steps span{font-size:13px;color:var(--ink-2);line-height:1.8;}

/* =========================================================================
   会社概要
   ========================================================================= */
.mss-company{display:grid;gap:var(--s6);}
@media (min-width:1024px){.mss-company{grid-template-columns:1.1fr .9fr;gap:var(--s7);}}
.mss-profile{list-style:none;padding:0;margin:0;border-top:1px solid var(--line);}
.mss-profile>div{display:grid;grid-template-columns:8.5em 1fr;gap:16px;padding:15px 4px;border-bottom:1px solid var(--line);}
@media (max-width:519px){.mss-profile>div{grid-template-columns:1fr;gap:2px;}}
.mss-profile dt{font-weight:600;color:var(--navy);font-size:14px;}
.mss-profile dd{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.85;}
.mss-map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);min-height:280px;}
.mss-map iframe{display:block;width:100%;height:100%;min-height:280px;border:0;}

/* =========================================================================
   お問い合わせ
   ========================================================================= */
.mss-contact{background:var(--bg-ink);color:#fff;}
.mss-contact .mss-head__ttl{color:#fff;}
.mss-contact .mss-head__no{color:#E8C58A;}
.mss-contact .mss-head__lead{color:rgba(255,255,255,.8);}
.mss-contact__grid{display:grid;gap:var(--s6);}
@media (min-width:1024px){.mss-contact__grid{grid-template-columns:.85fr 1.15fr;gap:var(--s7);}}
.mss-contact__aside p{color:rgba(255,255,255,.8);font-size:14.5px;}
.mss-contact__tel{display:inline-flex;flex-direction:column;margin-top:var(--s4);text-decoration:none;color:#fff;}
.mss-contact__tel b{font-family:var(--font-en);font-size:32px;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:10px;}
.mss-contact__tel span{font-size:12.5px;color:rgba(255,255,255,.6);}

.mss-form{background:#fff;border-radius:var(--radius-lg);padding:28px;color:var(--ink);}
.mss-form__row{margin-bottom:var(--s4);}
.mss-form label{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:8px;}
.mss-form label .req{color:var(--error);font-size:.85em;margin-left:6px;}
.mss-form input,.mss-form textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  padding:13px 14px;border:1.5px solid var(--line-2);border-radius:var(--radius);background:#fff;
  transition:border-color var(--dur) var(--ease);
}
.mss-form input:focus,.mss-form textarea:focus{border-color:var(--navy);outline:none;}
.mss-form textarea{min-height:128px;resize:vertical;}
.mss-form__note{font-size:12px;color:var(--ink-3);margin:0 0 var(--s4);line-height:1.8;}
.mss-form--bordered{border:1px solid var(--line);box-shadow:var(--shadow-card);}

/* お問い合わせ：白背景（明色）版 */
.mss-contact__tel--light{color:var(--navy);}
.mss-contact__tel--light b{color:var(--navy);}
.mss-contact__tel--light span{color:var(--ink-3);}

/* =========================================================================
   フッター
   ========================================================================= */
.mss-footer{background:var(--navy-deep);color:rgba(255,255,255,.8);padding-block:var(--s7) var(--s5);}
.mss-footer__top{display:grid;gap:var(--s5);margin-bottom:var(--s6);}
@media (min-width:768px){.mss-footer__top{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6);}}
.mss-footer__brand .mss-logo__name{color:#fff;}
.mss-footer__brand .mss-logo__mark{border-color:rgba(255,255,255,.5);color:#fff;}
.mss-footer__brand p{margin-top:var(--s3);font-size:13px;line-height:1.9;color:rgba(255,255,255,.62);}
.mss-footer__col h3{font-size:12px;letter-spacing:.16em;color:#E8C58A;font-family:var(--font-en);margin-bottom:var(--s3);text-transform:uppercase;}
.mss-footer__col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.mss-footer__col a{color:rgba(255,255,255,.8);text-decoration:none;font-size:14px;}
.mss-footer__col a:hover{color:#fff;text-decoration:underline;}
.mss-footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s4);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;}
.mss-footer__copy{font-family:var(--font-en);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.55);}

/* モバイル追従バー */
.mss-mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-fixed);
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-2);
  box-shadow:0 -4px 20px rgba(21,49,78,.12);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:1024px){.mss-mobilebar{display:none;}}
.mss-mobilebar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.04em;}
.mss-mobilebar__tel{background:#fff;color:var(--navy);}
.mss-mobilebar__cta{background:var(--brass);color:#fff;}
body{padding-bottom:58px;}
@media (min-width:1024px){body{padding-bottom:0;}}

/* スクロール演出 */
.mss-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.mss-reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .mss-reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}