/* ============================================================
   株式会社アービンズ ── 2026 サイトリニューアル 共通スタイル
   既存サイト(earvins / Wix)のトーン・配色・レイアウトに準拠
   ・配色や余白は :root の変数でまとめて調整可能
   ・トップページ(index.php)の各セクションを section.block-XX で分離
   ============================================================ */

/* ---- カラー / 基本設定 ---- */
:root{
  --orange:      #F08325;   /* アクセント */
  --orange-dark: #d76c14;
  --ink:         #262626;   /* 見出し帯・濃いグレー */
  --ink-soft:    #333333;
  --gray-band:   #eeeeee;   /* 薄いグレー帯 */
  --gray-bg:     #f5f5f5;
  --gray-mid:    #6b6b6b;
  --text:        #444444;   /* 本文 */
  --text-light:  #666666;
  --line:        #dddddd;
  --white:       #ffffff;
  --maxw:        1080px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Meiryo","游ゴシック","Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.9;
  font-size:16px;
  letter-spacing:.08em;   /* 全体の字間を少しゆったりと */
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

.inner{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

section{ padding:80px 0; }

/* 共通見出し ------------------------------------------------ */
.sec-heading{
  text-align:center;
  color:var(--ink);
  font-size:clamp(24px,4vw,38px);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.5;
  margin:0 0 40px;
}
.sec-heading.on-dark{ color:var(--white); }
.sec-lead{
  text-align:center;
  max-width:760px;
  margin:-16px auto 48px;
  font-size:16px;
  color:var(--ink-soft);
  line-height:2;
}
.sec-lead.on-dark{ color:#f2f2f2; }

/* 英語ラベル付き見出し（Service / MISSION 等） */
.label-heading{ text-align:center; margin:0 0 44px; }
.label-heading .en{
  display:block;
  font-size:clamp(30px,5vw,46px);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink);
  line-height:1.1;
}
.label-heading .ja{
  display:block;
  font-size:15px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--ink);
  margin-top:6px;
}
.label-heading.on-dark .en{ color:rgba(255,255,255,.9); }
.label-heading.on-dark .ja{ color:#fff; }

/* 共通ボタン ------------------------------------------------ */
.btn{
  display:inline-block;
  border:1px solid currentColor;
  padding:14px 44px;
  font-size:14px; font-weight:700; letter-spacing:.08em;
  border-radius:2px;
  transition:background .2s, color .2s;
}
.btn-light{ color:#fff; border-color:rgba(255,255,255,.7); }
.btn-light:hover{ background:#fff; color:var(--ink); }
.btn-orange{
  background:var(--orange); color:#fff; border-color:var(--orange);
}
.btn-orange:hover{ background:var(--orange-dark); border-color:var(--orange-dark); }

/* ============================================================
   ヘッダー / ナビ
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.2) blur(4px);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px; max-width:1200px;
}
.logo{ display:flex; align-items:center; }
.logo img{ height:34px; width:auto; display:block; }
.gnav{ margin-right:56px; }
.gnav > ul{ display:flex; gap:36px; list-style:none; margin:0; padding:0; height:64px; }
.gnav > ul > li{ position:relative; display:flex; align-items:center; }
.gnav a{ font-size:13px; color:var(--ink); letter-spacing:.04em; transition:color .2s; }
.gnav a:hover{ color:var(--orange); }
.nav-toggle{ display:none; }
body.nav-open{ overflow:hidden; }
/* モバイル専用パーツはデスクトップでは非表示 */
.gnav-head, .gnav-close, .sub-toggle{ display:none; }
.gnav .sub-parent{ display:flex; align-items:center; height:100%; }
.gnav .sub-parent > a{ display:flex; align-items:center; height:100%; }

/* デスクトップ：カーソルを合わせるとサブメニューが降りてくる（ドロップダウン） */
.gnav .submenu{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:232px; margin:0; padding:8px 0; list-style:none;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:130;
}
.gnav .has-sub:hover .submenu,
.gnav .has-sub:focus-within .submenu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.gnav .submenu li{ margin:0; }
.gnav .submenu a{ display:block; white-space:nowrap; padding:12px 24px; font-size:13px; color:var(--ink); text-align:left; }
.gnav .submenu a:hover{ color:var(--orange); background:var(--gray-bg); }

/* ============================================================
   ヒーロー
   ============================================================ */
.hero{
  position:relative;
  background:var(--ink) center/cover no-repeat;   /* 背景画像はHTML側で指定 */
  color:#fff;
  text-align:center;
  padding:130px 0 120px;
  overflow:hidden;
}
.hero::before{        /* 可読性確保のための暗いオーバーレイ */
  content:""; position:absolute; inset:0;
  background:rgba(20,20,20,.68); z-index:0;
}
.hero .circle{        /* オレンジ円（オーバーレイの上・文字の下） */
  position:absolute;
  top:6%; left:42%;
  width:360px; height:360px;
  transform:translateX(-50%);
  background:var(--orange);
  border-radius:50%;
  opacity:.95;
  z-index:1;
}
.hero .inner{ position:relative; z-index:2; }
.hero h1{
  font-size:clamp(30px,6vw,54px);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.45;
  margin:0 0 120px;   /* 段落をオレンジ円の下へ逃がすための間隔 */
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.hero p{
  font-size:clamp(15px,2.4vw,18px);
  font-weight:700;
  line-height:2;
  margin:0 auto;
  max-width:680px;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.hero .chevron{
  margin-top:44px; font-size:26px; color:#fff; opacity:.8;
  animation:bob 2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} }

/* ============================================================
   NEWS
   ============================================================ */
.block-news{ background:var(--white); }
.news-inner{ max-width:1000px; margin:0 auto; }
.news-body{ display:flex; gap:28px; align-items:flex-start; }
.news-thumb{
  position:relative;                       /* バッジの絶対配置の基準 */
  flex:0 0 400px; border:1px solid var(--line); border-radius:4px;
  background:var(--gray-bg);
}
.news-thumb > img{ border-radius:4px; }
.news-badge{                               /* 星形NEWSアイコンを写真の左上角に重ねる */
  position:absolute; top:-38px; left:-38px;
  width:140px; z-index:3; margin:0; line-height:0;
}
.news-badge img{ width:100%; height:auto; display:block; }
.news-thumb img{ width:100%; }
.news-text h3{ font-size:18px; font-weight:700; color:var(--ink); margin:0 0 14px; line-height:1.6; }
.news-text p{ font-size:14px; color:var(--text); margin:0 0 12px; line-height:1.9; }
.news-meta{ font-size:13px; color:var(--text-light); line-height:1.9; }
.news-meta a{ color:var(--orange); text-decoration:underline; }

/* ============================================================
   オレンジ帯（DXはビジネスモデルの変革である）
   ============================================================ */
.block-message{ background:var(--orange); color:#fff; text-align:center; }
.block-message h2{
  font-size:clamp(22px,4vw,34px); font-weight:700; letter-spacing:.06em;
  line-height:1.5; margin:0 0 28px;
}
.block-message p{
  max-width:820px; margin:0 auto; font-size:16px; line-height:2.1; color:#fff;
  font-weight:700;
}

/* ============================================================
   Service（4カード）
   ============================================================ */
.block-service{ background:var(--gray-bg); }
.service-lead{
  text-align:center; font-size:16px; color:var(--ink); font-weight:700; margin:0 0 12px;
}
.service-desc{
  text-align:center; max-width:1000px; margin:0 auto 48px; font-size:14.5px;
  color:var(--text); line-height:2;
}
.service-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  max-width:1200px; margin:0 auto; box-shadow:0 2px 14px rgba(0,0,0,.06);
}
.svc{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:46px 24px;
}
.svc .ico{ width:52px; height:52px; margin-bottom:22px; }
.svc .ico svg{ width:100%; height:100%; }
.svc .ico img{ width:100%; height:100%; object-fit:contain; }
/* 黒い線画アイコンを、暗い背景のカードでは白く反転（明るいグレー③はそのまま黒） */
.svc-dark .ico img,
.svc-gray1 .ico img,
.svc-orange .ico img{ filter:invert(1); }
.svc h3{ font-size:16px; font-weight:700; margin:0 0 12px; letter-spacing:.03em; }
.svc p{ font-size:14px; line-height:1.9; margin:0; }
.svc-btn{                 /* MORE DETAIL ボタン（ホバーで白背景に） */
  margin-top:auto;        /* カード下部に揃える */
  padding-top:28px;       /* 説明文との最低余白 */
}
.svc-btn span{
  display:inline-block;
  border:1px solid currentColor;
  padding:11px 26px;
  font-size:12.5px; font-weight:700; letter-spacing:.1em;
  transition:background .2s, color .2s, border-color .2s;
}
.svc-btn span:hover{ background:#fff; color:#111; border-color:#fff; }
.svc-dark{ background:#000000; color:#fff; }
.svc-gray1{ background:#605E5E; color:#fff; }
.svc-gray2{ background:#EDEDED; color:#000000; }   /* 明るい背景のみ文字を黒に */
.svc-orange{ background:#F08325; color:#fff; }
.svc .ico svg *{ stroke:currentColor; }

/* ============================================================
   Vision（人の幸せ）── 背景写真＋ダークオーバーレイ
   ============================================================ */
.block-vision{
  position:relative; color:#fff; text-align:center;
  background:#2b2b2b center/cover no-repeat;
}
.block-vision::before{
  content:""; position:absolute; inset:0; background:rgba(20,20,20,.72); z-index:0;
}
.block-vision .inner{ position:relative; z-index:1; }
.block-vision h2{
  font-size:clamp(20px,3.4vw,30px); font-weight:700; letter-spacing:.05em;
  line-height:1.7; margin:0 0 28px;
}
.block-vision h2 .accent{
  display:inline-block;
  color:#fff;                              /* 白文字に統一 */
  font-size:clamp(30px,5.4vw,48px);        /* 上の行より大きく */
  letter-spacing:.06em;
  margin-top:10px;
}
.block-vision p{ max-width:760px; margin:0 auto; font-size:15px; line-height:2.1; color:#eee; }

/* ============================================================
   BLOG（note 代表ブログ）
   ============================================================ */
.block-blog{ background:var(--white); }
.blog-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  max-width:1080px; margin:0 auto;
}
.blog-card{
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:var(--white); display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.blog-card:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.08); }
.blog-thumb{ aspect-ratio:16/9; background:var(--gray-band); overflow:hidden; }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.blog-date{ font-size:12px; color:var(--text-light); letter-spacing:.04em; margin-bottom:8px; }
.blog-card h3{ font-size:15.5px; font-weight:700; color:var(--ink); margin:0 0 10px; line-height:1.6; }
.blog-card p{ font-size:13px; color:var(--text); margin:0 0 16px; line-height:1.8; flex:1; }
.blog-more{ font-size:13px; font-weight:700; color:var(--orange); }
.blog-empty{ text-align:center; color:var(--text-light); }
.blog-foot{ text-align:center; margin-top:44px; }
.blog-foot .btn{ color:var(--ink); }
.blog-foot .btn:hover{ background:var(--ink); color:#fff; }

/* ============================================================
   MISSION ── 背景写真（風景）＋ダークオーバーレイ
   ============================================================ */
.block-mission{
  position:relative; color:#fff; text-align:center;
  background:#5a5a5a center/cover no-repeat;
}
.block-mission::before{           /* グレーのヴェール（黒すぎず・明るすぎず・白文字が読める濃さ） */
  content:""; position:absolute; inset:0; background:rgba(70,70,70,.38); z-index:0;
}
.block-mission .inner{ position:relative; z-index:1; }
.block-mission .copy{
  font-size:clamp(20px,3.6vw,32px); font-weight:700; letter-spacing:.05em;
  line-height:1.7; margin:0 0 36px;
}

/* ============================================================
   RECRUIT / ABOUT US ── 写真2分割
   ============================================================ */
.block-split{ padding:0; }
/* 1枚の画像を左右パネルにまたがって全幅に敷く（背景は親のgridが持つ） */
.split-grid{
  display:grid; grid-template-columns:1fr 1fr;
  background:#2b2b2b center/cover no-repeat;
}
.split-panel{
  position:relative; min-height:480px; color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:70px 8%;
  overflow:hidden;
}
.split-panel::before{
  content:""; position:absolute; inset:0; background:rgba(20,20,20,.55); z-index:0;
  transition:background .3s;
}
.split-panel:hover::before{ background:rgba(20,20,20,.4); }
.split-panel > *{ position:relative; z-index:1; }
.split-panel h2{ font-size:clamp(26px,4vw,40px); font-weight:700; letter-spacing:.06em; margin:0 0 18px; line-height:1.2; }
.split-panel p{ font-size:15.5px; line-height:2; margin:0 0 24px; color:#f0f0f0; max-width:440px; }
.split-panel .btn{ align-self:flex-start; }   /* パネル幅いっぱいに伸ばさず内容幅に */

/* ============================================================
   CONTACT
   ============================================================ */
.block-contact{ background:var(--ink); color:#fff; text-align:center; }
.block-contact p{ max-width:680px; margin:0 auto 34px; font-size:15px; line-height:2; color:#eee; }

/* ============================================================
   フッター
   ============================================================ */
.site-footer{ background:var(--white); border-top:1px solid var(--line); padding:56px 0 30px; }
.footer-top{ display:flex; gap:56px; align-items:flex-start; justify-content:space-between; }

/* 左：ブランド */
.footer-brand{ flex:0 0 auto; }
.footer-logo{ display:inline-block; }
.footer-logo img{ height:42px; width:auto; display:block; }
.footer-brand .company{ font-size:15px; font-weight:700; color:var(--ink); margin-top:10px; }
.footer-brand address{ font-style:normal; font-size:14px; color:var(--ink); margin-top:40px; line-height:1.95; }
.footer-brand address a{ color:var(--ink); }
.footer-brand address a:hover{ color:var(--orange); }

/* 右：ナビ／認証／ポリシー */
.footer-main{ flex:1; min-width:0; }
.footer-nav > ul{ list-style:none; display:flex; justify-content:space-between; gap:20px; margin:0; padding:0; }
.footer-nav > ul > li{ position:relative; text-align:center; }
.footer-nav > ul > li > a{
  display:block; border-top:2px solid var(--line);
  padding:18px 8px 0; font-size:13px; color:var(--ink); letter-spacing:.04em; white-space:nowrap;
  transition:color .2s, border-color .2s;
}
.footer-nav > ul > li > a:hover{ color:var(--orange); border-top-color:var(--orange); }
.footer-nav > ul > li.current > a{ border-top-color:var(--ink); }

/* フッターナビ：ホバーで上方向にサブメニュー */
.footer-nav .submenu{
  position:absolute; bottom:100%; left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:224px; margin:0; padding:8px 0; list-style:none;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  box-shadow:0 -14px 34px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:30;
}
.footer-nav .has-sub:hover .submenu,
.footer-nav .has-sub:focus-within .submenu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.footer-nav .submenu li{ margin:0; }
.footer-nav .submenu a{ display:block; white-space:nowrap; padding:12px 22px; font-size:13px; color:var(--ink); text-align:left; }
.footer-nav .submenu a:hover{ color:var(--orange); background:var(--gray-bg); }

/* 認証・資格バンド */
.footer-certs{
  position:relative;
  display:flex; justify-content:center; align-items:center; gap:60px;
  margin-top:52px;
}
.cert-item{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.cert-badge{ height:64px; width:auto; }
.cert-tableau{ height:36px; width:auto; }
.cert-label{ font-size:13px; color:var(--text-light); letter-spacing:.04em; text-align:center; line-height:1.6; }
.cert-label.strong{ font-weight:700; color:var(--ink); letter-spacing:.08em; }
.to-top{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:inline-flex; line-height:0; }
.to-top svg{ width:42px; height:22px; fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s; }
.to-top:hover svg{ stroke:var(--orange); }

/* ポリシーリンク（右下） */
.footer-policy{ text-align:right; margin-top:38px; font-size:13.5px; color:var(--ink); }
.footer-policy a{ color:var(--ink); }
.footer-policy a:hover{ color:var(--orange); }
.footer-policy .sep{ margin:0 8px; color:var(--text-light); }

.footer-bottom{
  margin-top:44px;
  text-align:center; font-size:13px; color:var(--text-light);
}

/* ============================================================
   下層ページ共通
   ============================================================ */
/* ページ見出し（ダーク帯） */
.page-hero{
  position:relative; background:var(--ink); color:#fff; text-align:center;
  padding:74px 0 66px; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:300px; height:300px; background:var(--orange); border-radius:50%; opacity:.9; z-index:0;
}
.page-hero .inner{ position:relative; z-index:1; }
.page-hero .en{ display:block; font-size:clamp(30px,5vw,46px); font-weight:700; letter-spacing:.08em; line-height:1.1; }
.page-hero .ja{ display:block; font-size:14px; font-weight:700; letter-spacing:.2em; margin-top:10px; color:#f2f2f2; }

/* パンくず */
.breadcrumb{ background:var(--gray-bg); border-bottom:1px solid var(--line); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:16px 24px; max-width:var(--maxw); margin:0 auto; font-size:12.5px; color:var(--text-light); }
.breadcrumb a:hover{ color:var(--orange); }
.breadcrumb .sep{ color:var(--line); }
.breadcrumb li[aria-current]{ color:var(--ink); }

/* 本文プロース */
.prose{ max-width:860px; margin:0 auto; }
.prose p{ font-size:16px; line-height:2.1; color:var(--ink-soft); margin:0 0 24px; }
.prose p:last-child{ margin-bottom:0; }
.lead-copy{ text-align:center; font-size:clamp(20px,3.4vw,28px); font-weight:700; color:var(--ink); line-height:1.7; letter-spacing:.04em; margin:0 auto 40px; max-width:900px; }
.lead-copy .accent{ color:var(--orange); }

/* セクション見出し（左寄せ＋オレンジ下線） */
.blk-heading{ font-size:clamp(20px,3vw,26px); font-weight:700; color:var(--ink); letter-spacing:.04em; margin:0 0 28px; padding-bottom:14px; border-bottom:2px solid var(--line); position:relative; }
.blk-heading::after{ content:""; position:absolute; left:0; bottom:-2px; width:64px; height:2px; background:var(--orange); }

/* 会社概要テーブル（現行サイト＝クリーン。枠線・背景なし） */
.info-table{ width:100%; max-width:860px; margin:0 auto; border-collapse:collapse; }
.info-table th, .info-table td{ text-align:left; padding:16px 20px; font-size:15px; line-height:1.9; vertical-align:top; }
.info-table th{ width:220px; color:var(--text-light); font-weight:400; white-space:nowrap; }
.info-table td{ color:var(--ink-soft); }
.info-table a{ color:var(--ink-soft); text-decoration:underline; }
.info-table a:hover{ color:var(--orange); }

/* 価値カード（HUMAN/SOLUTION/APPLICATION 等） */
.value-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:960px; margin:0 auto; }
.value-card{ border:1px solid var(--line); border-top:4px solid var(--orange); border-radius:6px; padding:32px 28px; text-align:center; background:var(--white); }
.value-card .vc-en{ font-size:18px; font-weight:700; letter-spacing:.04em; color:var(--orange); margin:0 0 14px; }
.value-card p{ font-size:14.5px; line-height:1.9; color:var(--text); margin:0; }
a.value-card{ transition:transform .2s, box-shadow .2s; }
a.value-card:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.08); }

/* 箇条書き（チェック/番号） */
.check-list{ list-style:none; margin:0 auto; padding:0; max-width:820px; }
.check-list li{ position:relative; padding:14px 0 14px 34px; border-bottom:1px solid var(--line); font-size:15.5px; color:var(--ink-soft); line-height:1.7; }
.check-list li::before{ content:"✓"; position:absolute; left:6px; top:14px; color:var(--orange); font-weight:700; }

/* 番号付きプロセス（縦フロー） */
.flow-list{ list-style:none; margin:0 auto; padding:0; max-width:760px; counter-reset:flow; }
.flow-list li{ position:relative; padding:16px 0 16px 56px; border-bottom:1px solid var(--line); font-size:15px; color:var(--ink-soft); line-height:1.7; }
.flow-list li::before{ counter-increment:flow; content:counter(flow); position:absolute; left:0; top:14px; width:34px; height:34px; border-radius:50%; background:var(--orange); color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.flow-list li.note{ padding-left:0; text-align:center; color:var(--text-light); font-size:13px; border-bottom:none; }
.flow-list li.note::before{ display:none; }

/* ポリシー（規程本文） */
/* アクセスマップ（全幅） */
.about-map{ line-height:0; }
.about-map iframe{ display:block; width:100%; height:400px; border:0; }

/* ============================================================
   お問い合わせフォーム
   ============================================================ */
.form-lead{ text-align:center; font-size:15px; line-height:2; color:var(--ink-soft); margin:0 auto 44px; }
.contact-form{ max-width:720px; margin:0 auto; }
.contact-form .field{ margin:0 0 24px; border:0; padding:0; min-width:0; }
.contact-form label, .contact-form legend{ display:block; font-size:14px; font-weight:700; color:var(--ink); margin:0 0 10px; padding:0; }
.contact-form .req{ color:var(--orange); }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea{
  width:100%; border:1px solid #ccc; border-radius:3px; padding:12px 14px;
  font-size:15px; font-family:inherit; color:var(--ink); background:#fff; letter-spacing:.02em;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 2px rgba(240,131,37,.15);
}
.contact-form textarea{ resize:vertical; line-height:1.8; }
.checkgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px 24px; }
.radiogroup{ display:flex; flex-direction:column; gap:12px; }
.contact-form .chk{ display:flex; align-items:flex-start; gap:9px; font-weight:400; font-size:14px; color:var(--ink-soft); margin:0; cursor:pointer; }
.contact-form .chk input{ margin:3px 0 0; flex:0 0 auto; width:16px; height:16px; }
/* チェックボックスは塗りつぶさず、チェックマークだけ表示 */
.contact-form .chk input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  border:1px solid #999; border-radius:3px; background:#fff; position:relative; cursor:pointer;
}
.contact-form .chk input[type=checkbox]:checked::after{
  content:""; position:absolute; left:4px; top:0; width:5px; height:9px;
  border:solid #333; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.contact-form .chk input[type=checkbox]:focus-visible{ outline:2px solid var(--orange); outline-offset:1px; }
/* カジュアル面談などの説明ブロック */
.form-notes{ max-width:720px; margin:0 auto 40px; background:#fff; border:1px solid var(--line); border-radius:6px; padding:26px 30px; }
.form-notes h3{ font-size:15px; font-weight:700; color:var(--ink); margin:20px 0 10px; letter-spacing:.03em; }
.form-notes h3:first-child{ margin-top:0; }
.form-notes p{ font-size:14px; line-height:1.9; color:var(--ink-soft); margin:0 0 10px; }
.form-notes ul{ margin:0 0 6px; padding-left:1.3em; }
.form-notes li{ font-size:14px; line-height:1.9; color:var(--ink-soft); }
.field-confirm{ margin-top:8px; }
.form-submit{ text-align:center; margin-top:38px; }
.form-submit .btn{ min-width:240px; cursor:pointer; }
/* チェック未入力時のエラーメッセージ（現行サイト同様） */
.chk-error{ display:flex; align-items:center; gap:8px; margin:10px 0 0; color:#d0342c; font-size:14px; }
.chk-error[hidden]{ display:none; }
.chk-error::before{
  content:"!"; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:1.5px solid currentColor; border-radius:50%;
  font-size:12px; font-weight:700; line-height:1;
}
/* ハニーポット（画面外に隠す） */
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
/* エラー表示 */
.form-errors{ max-width:720px; margin:0 auto 30px; background:#fff3ef; border:1px solid var(--orange); border-radius:4px; padding:18px 22px; color:#c0501a; }
.form-errors p{ margin:0 0 8px; font-weight:700; }
.form-errors ul{ margin:0; padding-left:1.2em; }
.form-errors li{ font-size:14px; line-height:1.9; }

/* サンクスページ */
.thanks-box{ text-align:center; max-width:720px; }
.thanks-lead{ font-size:clamp(18px,2.4vw,22px); font-weight:700; color:var(--ink); margin:0 0 24px; }
.thanks-box p{ font-size:15px; line-height:2; color:var(--ink-soft); margin:0 0 18px; }
.thanks-note{ font-size:13px; color:var(--text-light); }
.thanks-box .btn{ margin-top:20px; cursor:pointer; }

.policy{ max-width:860px; margin:0 auto; }
.policy p{ font-size:15px; line-height:1.75; color:var(--ink-soft); margin:0 0 13px; }
.policy h2{ font-size:18px; font-weight:700; color:var(--ink); margin:28px 0 12px; letter-spacing:.03em; padding-bottom:10px; border-bottom:1px solid #2a2a2a; }
.policy ol{ margin:0 0 14px; padding-left:1.2em; list-style:none; counter-reset:item; }
.policy ol > li{ counter-increment:item; position:relative; padding-left:2em; font-size:15px; line-height:1.75; color:var(--ink-soft); margin-bottom:7px; }
.policy ol > li::before{ content:counter(item) "."; position:absolute; left:0; top:0; }
.policy ul{ margin:6px 0 20px; padding-left:1.4em; }
.policy ul > li{ font-size:15px; line-height:1.9; color:var(--ink-soft); margin-bottom:8px; }
.policy .signoff{ margin-top:40px; text-align:right; font-size:15px; color:var(--ink-soft); line-height:2; }

/* チップ型リスト（業種一覧など） */
.chip-list{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0 auto; padding:0; max-width:900px; justify-content:center; }
.chip-list li{ font-size:13px; color:var(--ink-soft); background:var(--gray-bg); border:1px solid var(--line); border-radius:40px; padding:8px 16px; }

/* 事例ハイライトボックス */
.case-box{ border:1px solid var(--line); border-left:6px solid var(--orange); border-radius:6px; background:var(--gray-bg); padding:32px 34px; max-width:860px; margin:0 auto; }
.case-box h3{ font-size:18px; font-weight:700; color:var(--ink); margin:0 0 12px; letter-spacing:.03em; }
.case-box p{ font-size:15px; line-height:2; color:var(--ink-soft); margin:0; }

/* CTAバンド（下層共通の問い合わせ導線） */
.cta-band{ background:var(--gray-bg); text-align:center; }
.cta-band h2{ font-size:clamp(20px,3vw,26px); font-weight:700; color:var(--ink); margin:0 0 18px; letter-spacing:.05em; }
.cta-band p{ font-size:15px; color:var(--ink-soft); margin:0 0 30px; line-height:1.9; }

/* ============================================================
   下層ページ共通：シンプルな中央タイトル（現行サイト準拠）
   ============================================================ */
.page-title-bar{ padding:56px 0 40px; text-align:center; }
.page-title-bar .pt{ font-size:clamp(28px,4vw,40px); font-weight:700; color:var(--ink); letter-spacing:.14em; margin:0; }
/* 写真背景のページタイトル（FV） */
.page-title-bar.has-photo{ position:relative; padding:110px 0; background:#333 center/cover no-repeat; }
.page-title-bar.has-photo::before{ content:""; position:absolute; inset:0; background:rgba(20,20,20,.5); }
.page-title-bar.has-photo .inner{ position:relative; z-index:1; }
.page-title-bar.has-photo .pt{ color:#fff; }
.center-heading{ text-align:center; font-size:clamp(20px,3vw,26px); font-weight:700; color:var(--ink); letter-spacing:.12em; margin:0 0 36px; }

/* ============================================================
   ABOUT US ページ ── 現行サイト忠実再現
   ============================================================ */
.about-intro{ background:var(--gray-band); padding:66px 0; }
.about-intro-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:50px; align-items:center; max-width:1080px; margin:0 auto; }
.about-brand{ text-align:center; }
.about-brand .company-name{ font-size:19px; font-weight:700; color:var(--ink); margin:0 0 18px; letter-spacing:.06em; }
.about-brand .brand-logo{ height:66px; width:auto; margin:0 auto; display:block; }
.about-photo{ background:#cfcfcf; aspect-ratio:16/10; overflow:hidden; }
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 沿革テーブル */
.history-table{ width:100%; max-width:900px; margin:0 auto; border-collapse:collapse; border:1px solid #999; }
.history-table th, .history-table td{ border:1px solid #c4c4c4; padding:11px 16px; font-size:13.5px; line-height:1.7; vertical-align:top; text-align:left; color:var(--ink-soft); }
.history-table td{ background:#fff; }
.history-table thead th{ background:var(--gray-bg); text-align:center; font-weight:700; color:var(--ink); }
.history-table td:first-child, .history-table th:first-child{ white-space:nowrap; width:96px; text-align:center; }

/* ============================================================
   ミッション（MVV）ページ ── 現行サイト忠実再現
   ============================================================ */
/* 左右分割ヒーロー */
.mv-split{
  display:grid; grid-template-columns:1fr 1fr; padding:0;
  background-color:#2b3a42; background-position:center; background-size:cover; background-repeat:no-repeat;
}
.mv-split .mv-left{
  background:rgba(233,120,26,.92); color:#fff; text-align:center;   /* 橋写真の上に半透明オレンジ（濃いめ） */
  display:flex; flex-direction:column; justify-content:center;
  padding:90px 7%; min-height:560px;
}
.mv-left .mv-en{ font-size:clamp(40px,4.6vw,66px); font-weight:700; letter-spacing:.03em; line-height:1; margin:0 0 34px; }
.mv-left .mv-ja{ font-size:clamp(22px,2.8vw,36px); font-weight:700; line-height:1.55; margin:0; }
.mv-left .mv-ja .mv-ja-big{ font-size:1.24em; display:inline-block; margin-top:6px; }
.mv-split .mv-right{
  position:relative; color:#fff; background:transparent;
  display:flex; flex-direction:column; justify-content:center; padding:90px 7%;
}
.mv-split .mv-right::before{ content:""; position:absolute; inset:0; background:rgba(22,31,40,.55); }
.mv-right > *{ position:relative; z-index:1; }
.mv-right h2{ text-align:center; font-size:clamp(19px,2.2vw,26px); font-weight:700; line-height:1.6; margin:0 0 26px; }
.mv-right p{ font-size:14px; line-height:1.95; margin:0; font-weight:700; }

/* VISION（ダーク＋3カード） */
.sec-vision{ position:relative; background:var(--ink) center/cover no-repeat; color:#fff; text-align:center; padding:0 0 100px; }
.sec-vision::before{ content:""; position:absolute; inset:0; background:rgba(20,24,32,.5); }
.sec-vision .inner{ position:relative; z-index:1; padding-top:70px; }
.sec-vision .v-en{ font-size:clamp(30px,4vw,44px); font-weight:700; letter-spacing:.1em; margin:0 0 34px; }
.sec-vision .v-lead-sm{ font-size:clamp(18px,2.4vw,24px); font-weight:700; margin:0 0 8px; }
.sec-vision .v-lead-lg{ font-size:clamp(28px,4.4vw,46px); font-weight:700; margin:0 0 40px; }
.sec-vision .v-sub{ font-size:16px; font-weight:700; margin:0 0 14px; }
.sec-vision .v-desc{ font-size:14px; font-weight:700; color:#e8eaec; line-height:1.9; max-width:640px; margin:0 auto 50px; }
.mvv-cards{ display:grid; grid-template-columns:repeat(3,1fr); max-width:900px; margin:0 auto; text-align:left; }
.mvv-card{ padding:46px 32px; }
.mvv-card .mc-en{ font-size:19px; font-weight:700; letter-spacing:.06em; margin:0 0 18px; text-align:center; }
.mvv-card .mc-sub{ font-size:15px; font-weight:700; line-height:1.6; margin:0 0 18px; text-align:center; }
.mvv-card .mc-desc{ font-size:13.5px; line-height:1.9; margin:0; color:#e7e7e7; font-weight:700; }
.mvv-card.is-human{ background:rgba(240,131,37,.65); }
.mvv-card.is-solution{ background:rgba(193,193,194,.55); color:#fff; }
.mvv-card.is-app{ background:rgba(18,22,29,.3); }

/* VALUE（写真背景＋5カード） */
.sec-value{ position:relative; color:#fff; text-align:center; background:#2c2f3a center/cover no-repeat; padding:96px 0 100px; }
.sec-value::before{ content:""; position:absolute; inset:0; background:rgba(30,34,44,.5); }
.sec-value .inner{ position:relative; z-index:1; }
.sec-value .v-en{ font-size:clamp(30px,4vw,44px); font-weight:700; letter-spacing:.1em; margin:0 0 26px; }
.sec-value .v-desc{ font-size:15px; line-height:1.9; margin:0 0 22px; }
.sec-value .v-doer{ font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:.04em; margin:0 0 50px; }
.value5{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; max-width:1120px; margin:0 auto; }
.value5 .v5{ background:rgba(232,115,37,.82); min-height:150px; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px 14px; font-size:15px; font-weight:700; line-height:1.6; }

/* ============================================================
   サービス詳細ページ（develop / collaboration / bridge）── 現行サイト忠実再現
   ============================================================ */
.pt-sub{ font-size:18px; color:var(--ink-soft); letter-spacing:.1em; margin:12px 0 0; }
/* オレンジ／ダークのメッセージ帯 */
.catch-band{ background:var(--orange); color:#fff; text-align:center; padding:56px 0; }
.band-heading{ text-align:center; font-size:clamp(19px,2.8vw,30px); font-weight:700; line-height:1.6; margin:0; letter-spacing:.04em; }
.band-body{ margin-top:30px; }
.band-body p{ color:#fff; font-size:14.5px; line-height:2; margin:0 auto 20px; max-width:820px; }
.catch-band .band-body p{ text-align:left; }
.band-body p:last-child{ margin-bottom:0; }
.dark-band{ background:var(--ink); color:#fff; text-align:center; padding:64px 0; }
.dark-band .bullets{ list-style:none; margin:0 auto; padding:0; max-width:640px; text-align:left; display:inline-block; }
.dark-band .bullets li{ font-size:15px; line-height:2.1; padding-left:1.2em; text-indent:-1.2em; }
.dark-band .bullets li::before{ content:"・"; }
/* 2カラム分割（新規／アップデート等） */
.split2{ display:grid; grid-template-columns:1fr 1fr; padding:0; }
.split2 > div{ padding:56px 6% 60px; }
.split2 .col-gray{ background:var(--gray-band); color:var(--ink-soft); }
.split2 .col-orange{ background:var(--orange); color:#fff; }
.split2 h3{ text-align:center; font-size:clamp(20px,2.6vw,26px); font-weight:700; margin:0 0 38px; letter-spacing:.03em; }
.split2 .point{ font-size:15px; font-weight:700; margin:0 0 18px; }
.split2 .col-gray .point{ color:var(--ink); }
.split2 p{ font-size:14px; line-height:2; margin:0 0 22px; }
.split2 .steps{ list-style:none; margin:0; padding:0; font-size:14px; line-height:2; }
.split2 .steps li.note{ font-size:13px; opacity:.9; }
/* コンテンツのまとまりを列の中央へ（テキストは左揃えのまま：コラボレーション） */
.split2.sp2-center .col-body{ max-width:420px; margin:0 auto; text-align:left; }
/* 特徴セクションの見出し（小ラベル＋大見出し・中央） */
.feature-label{ text-align:center; font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.1em; margin:0 0 14px; }
.feature-heading{ text-align:center; font-size:clamp(22px,3.4vw,32px); font-weight:700; color:var(--ink); letter-spacing:.03em; line-height:1.5; margin:0 0 40px; }
/* 業種テキスト */
.industries{ max-width:860px; margin:0 auto; border-top:1px solid var(--line); padding-top:26px; }
.industries .ind-label{ font-size:14px; font-weight:700; color:var(--ink); margin:0 0 8px; }
.industries .ind-list{ font-size:13.5px; color:var(--text); line-height:2; margin:0; }
/* ショーケース（スタッフレスショップ等・写真＋グレー背景） */
.showcase{ position:relative; text-align:center; color:#fff; overflow:hidden; background:#3a3a3a; }
.showcase-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.showcase-overlay{ position:absolute; inset:0; background:rgba(70,70,70,.5); z-index:1; }
.showcase-body{ position:relative; z-index:2; padding:100px 20px 108px; }
/* 旧・写真帯レイアウト（未使用） */
.showcase-photo{ height:230px; background:#555 center/cover no-repeat; }
.showcase .sc-en{ font-size:14px; letter-spacing:.22em; margin:0 0 14px; }
.showcase .sc-ja{ font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:.04em; margin:0 0 30px; }
.showcase .sc-desc{ font-size:14.5px; line-height:2; margin:0 0 36px; }

/* アウトライン（枠線）ボタン */
.btn-outline{ color:var(--ink); border-color:#9a9a9a; }
.btn-outline:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ダーク帯・本文左寄せ版（コラボ） */
.dark-band.text-left .band-body p{ text-align:left; }
/* 番号リスト（①②… テキスト） */
.num-list{ list-style:none; margin:0 auto; padding:0; max-width:720px; text-align:left; display:inline-block; }
.num-list li{ font-size:14.5px; line-height:1.95; }
.num-list li.note{ font-size:13px; color:var(--text-light); }
/* 2カラム：クリーム列 */
.split2 .col-cream{ background:#fbf4ea; color:var(--ink-soft); }
.split2 .col-cream .point, .split2 .col-cream h3{ color:var(--ink); }
/* 新規事業開発のフロー（チェブロン矢印） */
.sec-flow{ background:linear-gradient(to right, #ffffff 0%, #ffffff 12%, #d3ebec 100%); }
.pmf-flow{ max-width:1080px; margin:0 auto; text-align:center; }
.pmf-flow img{ max-width:100%; height:auto; margin:0 auto; }
.pmf-col{ flex:1; text-align:center; }
.pmf-arrow{
  background:#1F3964; color:#fff; min-height:184px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px 26px 16px 18px;
  /* 右向き五角形（左辺はまっすぐ／右辺が尖る） */
  clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}
.pmf-arrow .pa-title{ font-size:16px; font-weight:700; line-height:1.3; letter-spacing:.02em; }
.pmf-arrow .pa-en{ font-size:11px; margin-top:8px; opacity:.9; line-height:1.45; }
.pmf-cap{ font-size:13px; color:#1F3964; font-weight:700; margin:16px 0 0; line-height:1.5; }

/* ============================================================
   RECRUIT ページ ── 現行サイト忠実再現
   ============================================================ */
/* 代表メッセージ */
.rec-message{ background:var(--gray-band); padding:56px 0; }
.rec-message .inner{ max-width:1360px; }
/* 代表挨拶：1枚の白カード（左＝文章／右＝全高写真） */
.rec-card{ display:grid; grid-template-columns:1.5fr 1fr; align-items:stretch; background:#fff; overflow:hidden; }
.rec-msg-text{ padding:52px 48px; }
.rec-msg-text h2{ text-align:center; font-size:clamp(20px,2.6vw,26px); font-weight:700; color:var(--ink); line-height:1.5; margin:0 0 24px; }
.rec-msg-text p{ font-size:14px; line-height:1.75; color:var(--ink-soft); margin:0 0 13px; }
.rec-msg-text .sign{ text-align:right; margin-top:26px; line-height:1.9; }
.rec-photo{ background:#cfcfcf; overflow:hidden; }
.rec-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* スキル2カラム（ダーク） */
.skill-cols{ display:grid; grid-template-columns:1fr 1fr; gap:56px; max-width:1000px; margin:0 auto; text-align:left; }
.skill-cols h3{ font-size:clamp(19px,2.4vw,25px); font-weight:700; margin:0 0 26px; }
.skill-cols ul{ list-style:none; margin:0; padding:0; }
.skill-cols li{ font-size:14.5px; line-height:2.15; padding-left:1.5em; text-indent:-1.5em; }
.skill-cols li::before{ content:"●"; font-size:10px; margin-right:.6em; vertical-align:middle; }
/* 募集職種 */
.jobs-title{ text-align:center; font-size:clamp(26px,4vw,38px); font-weight:700; color:var(--ink); letter-spacing:.06em; margin:78px 0 48px; }
.job-row{ display:grid; grid-template-columns:1fr 1fr; }
.job-side{ display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 6%; }
.job-side h3{ font-size:clamp(20px,2.4vw,26px); font-weight:700; line-height:1.6; margin:0; letter-spacing:.03em; }
.job-row.orange .job-side{ background:var(--orange); color:#fff; }
.job-row.gray .job-side{ background:var(--gray-band); color:var(--ink); }
.job-body{ padding:66px 6%; }
.job-body .job-lead{ font-size:clamp(17px,2.1vw,21px); font-weight:700; color:var(--ink); line-height:1.6; margin:0 0 34px; }
.job-block{ margin:0 0 22px; }
.job-block .lb{ font-size:14px; color:var(--ink); margin:0 0 4px; }
.job-block p{ font-size:13.5px; line-height:1.85; color:var(--ink-soft); margin:0; }
.job-btns{ margin-top:32px; display:flex; flex-direction:column; gap:14px; max-width:440px; }
.job-btns .btn{ text-align:center; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:900px){
  .service-grid{ grid-template-columns:1fr 1fr; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  section{ padding:60px 0; }
  /* スマホ：サービスカード（DX人材育成）下の白余白を詰める */
  .block-service{ padding-bottom:0; }
  /* スマホではヘッダーの backdrop-filter を無効化（fixed ドロワーの基準を画面にするため） */
  .site-header{ backdrop-filter:none; }
  .nav-toggle{
    display:inline-flex; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:8px;
  }
  .nav-toggle span{ width:24px; height:2px; background:var(--ink); display:block; }

  /* オレンジのスライドインメニュー（右から） */
  .gnav{
    position:fixed; top:0; right:0; z-index:200; margin-right:0;
    width:min(80vw,360px); height:100vh; height:100dvh;
    background:var(--orange); color:#fff;
    transform:translateX(100%); transition:transform .3s ease;
    overflow-y:auto; padding:0 0 48px;
  }
  .gnav.open{ transform:translateX(0); box-shadow:-8px 0 30px rgba(0,0,0,.2); }
  .gnav-head{ display:flex; justify-content:flex-end; align-items:center; height:64px; padding:0 20px; }
  .gnav-close{ display:inline-flex; background:none; border:none; cursor:pointer; color:#fff; font-size:30px; line-height:1; padding:4px 8px; }
  .gnav > ul{ display:block; margin:0; padding:0 30px; height:auto; }
  .gnav ul{ list-style:none; margin:0; padding:0; }
  .gnav > ul > li{ display:block; border-top:1px solid rgba(255,255,255,.45); }
  .gnav > ul > li:first-child{ border-top:none; }
  /* 親項目：テキスト中央＋その下に▼トグル（縦並び・中央寄せ） */
  .gnav .sub-parent{ display:flex; flex-direction:column; align-items:center; height:auto; }
  .gnav .sub-parent > a{ display:block; height:auto; padding:20px 0 4px; }
  .gnav a{ display:block; text-align:center; color:#fff; font-size:15px; font-weight:700; letter-spacing:.06em; padding:20px 0; }
  .gnav > ul > li.current > a{ color:rgba(255,255,255,.6); }
  /* ▼／▲トグル（サブメニューの開閉） */
  .sub-toggle{ order:2; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; padding:2px 20px 16px; }
  .sub-toggle .plus{
    display:block; width:0; height:0;
    border-left:6px solid transparent; border-right:6px solid transparent;
    border-top:7px solid #fff; transition:transform .25s;
  }
  .has-sub.sub-open .sub-toggle .plus{ transform:rotate(180deg); }
  /* ドロワー内：サブメニューはアコーディオン（▼で開く）。PC用ドロップダウン指定を全て打ち消す */
  .gnav .submenu{
    position:static; left:auto; right:auto; top:auto; transform:none;
    width:100%; min-width:0; max-width:none;
    opacity:1; visibility:visible; pointer-events:auto;
    background:transparent; border:none; box-shadow:none; border-radius:0;
    display:none; padding:0 0 10px;
  }
  .has-sub.sub-open .submenu{ display:block; }
  /* PC用の hover/focus-within ドロップダウン指定（transform で左へずれる）を打ち消す */
  .gnav .has-sub:hover .submenu,
  .gnav .has-sub:focus-within .submenu{ transform:none; opacity:1; visibility:visible; }
  .gnav .submenu li{ border-top:1px solid rgba(255,255,255,.25); }
  .gnav .submenu a{ display:block; width:100%; white-space:normal; font-size:13px; font-weight:400; letter-spacing:.08em; padding:13px 8px; opacity:.95; text-align:center; color:#fff; }

  .news-inner{ flex-direction:column; gap:24px; }
  .news-body{ flex-direction:column; }
  .news-thumb{ flex-basis:auto; width:100%; }
  /* スマホ：NEWSアイコン（星形バッジ）を約半分に */
  .news-badge{ width:70px; top:-19px; left:-19px; }
  .split-grid{ grid-template-columns:1fr; }

  /* RECRUIT */
  /* スマホは縦1列：文章 → 名前 → 写真（名前の下・中央） */
  .rec-card{ display:block; }
  .rec-msg-text{ padding:40px 24px 16px; }
  .rec-photo{ background:transparent; overflow:visible; padding:0 24px 40px; text-align:center; }
  .rec-photo img{ width:100%; max-width:300px; height:auto; margin:0 auto; object-fit:initial; }
  .skill-cols{ grid-template-columns:1fr; gap:36px; }
  .job-row{ grid-template-columns:1fr; }
  .job-side{ padding:48px 8%; }
  .job-body{ padding:48px 8%; }

  /* サービス詳細 */
  .split2{ grid-template-columns:1fr; }
  .split2 > div{ padding:56px 8%; }
  /* 新規事業開発フローは画像（pmf-flow.png）。スマホは幅いっぱいに表示 */
  .pmf-flow img{ width:100%; }

  /* ミッションページ */
  /* スマホ：上に横長写真の帯（専用の::beforeで位置調整）＋単色オレンジのMISSION。「テクノロジー…」文章は非表示 */
  .mv-split{ grid-template-columns:1fr; padding-top:173px; background-image:none !important; position:relative; }
  .mv-split::before{
    content:""; position:absolute; top:0; left:0; right:0; height:173px; z-index:0;
    background:
      linear-gradient(rgba(120,120,120,.28), rgba(120,120,120,.28)),
      url('../img/mission.jpg') center 41%/175% auto no-repeat;
  }
  .mv-split .mv-right{ display:none; }
  .mv-split .mv-left{ position:relative; z-index:1; background:#e9781a; min-height:320px; padding:56px 7%; }
  .mv-split .mv-left .mv-ja{ font-size:18px; letter-spacing:.02em; }
  .mvv-cards{ grid-template-columns:1fr; max-width:420px; }
  /* スマホ：5ブロックを縦1列に。左右に余白を出してオレンジ幅を細く */
  .value5{ grid-template-columns:1fr; gap:14px; padding:0 24px; }
  .value5 .v5{ min-height:104px; }

  /* 下層ページ */
  .value-cards{ grid-template-columns:1fr; }
  .info-table th{ width:120px; padding:14px; font-size:13.5px; }
  .info-table td{ padding:14px; font-size:14px; }
  .page-hero::before{ width:220px; height:220px; }

  /* モバイル用フッター（縦積み・ナビ非表示・バッジ中央・戻るボタン非表示） */
  .footer-top{ flex-direction:column; gap:36px; }
  .footer-nav{ display:none; }
  .footer-certs{ flex-direction:column; align-items:center; gap:34px; margin-top:8px; }
  .to-top{ display:none; }
  .footer-policy{ text-align:left; margin-top:32px; }
  .footer-brand address{ margin-top:22px; }
}
@media (max-width:560px){
  .service-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .hero .circle{ width:250px; height:250px; }
  /* ABOUT US：スマホでは会社ロゴ・会社名を消して写真だけ表示 */
  .about-brand{ display:none; }
}

/* ============================================================
   DX支援トップ：サービス分割行（左カラー名／右説明＋MORE DETAIL）
   ============================================================ */
.dx-rows{ }
.dx-row{ display:grid; grid-template-columns:1fr 1fr; }
.dx-panel{
  display:flex; align-items:center; justify-content:center;
  padding:96px 6%; min-height:340px; text-align:center;
}
.dx-panel .dx-name{
  font-size:clamp(24px,3vw,36px); font-weight:700; letter-spacing:.1em; margin:0; line-height:1.4;
}
.dx-panel-dark{ background:#1a1a1a; }
.dx-panel-dark .dx-name{ color:#fff; }
.dx-panel-gray{ background:#EDEDED; }
.dx-panel-gray .dx-name{ color:var(--ink); }
.dx-panel-orange{ background:var(--orange); }
.dx-panel-orange .dx-name{ color:#fff; }
.dx-content{
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 8% 80px 6%; background:#fff;
}
.dx-content .dx-heading{
  font-size:clamp(18px,2.2vw,23px); font-weight:700; color:var(--ink);
  line-height:1.6; letter-spacing:.03em; margin:0 0 26px;
}
.dx-content .dx-desc{ font-size:14.5px; line-height:2; color:var(--text); margin:0 0 22px; max-width:520px; }
.dx-content .btn{ align-self:flex-start; margin-top:14px; }
/* 研修トップの左パネル（サブ／大名称／英字／ピル） */
.dx-panel .dx-inner{ width:100%; max-width:520px; }
.dx-panel .dx-sub{ font-size:clamp(14px,1.6vw,17px); font-weight:700; letter-spacing:.06em; margin:0 0 18px; }
.dx-panel .dx-name-lg{ font-size:clamp(30px,4.4vw,48px); font-weight:700; letter-spacing:.08em; margin:0 0 12px; line-height:1.2; }
.dx-panel .dx-en{ font-size:clamp(15px,1.8vw,20px); font-weight:700; letter-spacing:.04em; margin:0 0 34px; }
.dx-pill{
  display:inline-block; border:1.5px solid currentColor; border-radius:999px;
  padding:16px 40px; font-size:13.5px; font-weight:700; line-height:1.7; letter-spacing:.02em;
}
.dx-panel-dark .dx-sub, .dx-panel-dark .dx-name-lg, .dx-panel-dark .dx-en, .dx-panel-dark .dx-pill{ color:#fff; }
.dx-panel-gray .dx-sub, .dx-panel-gray .dx-name-lg, .dx-panel-gray .dx-en, .dx-panel-gray .dx-pill{ color:var(--ink); }
@media (max-width:820px){
  .dx-row{ grid-template-columns:1fr; }
  .dx-panel{ min-height:200px; padding:56px 6%; }
  .dx-content{ padding:44px 7%; }
  .dx-panel .dx-pill{ padding:14px 26px; }
  /* ABOUT US：ブランド＋写真を縦積みにして崩れ防止 */
  .about-intro-grid{ grid-template-columns:1fr; gap:28px; }
}

/* ============================================================
   DX人材育成研修 下層ページ（seminar-dx / output / japanusa）
   ============================================================ */
/* ダークヒーロー */
.sem-hero{ background:#1a1a1a; color:#fff; text-align:center; padding:88px 24px 96px; }
.sem-hero .sh-lead{ font-size:clamp(18px,2.4vw,26px); font-weight:700; letter-spacing:.08em; margin:0 0 34px; }
.sem-hero .sh-title{ font-size:clamp(40px,6vw,68px); font-weight:700; letter-spacing:.1em; margin:0 0 20px; line-height:1.1; }
.sem-hero .sh-en{ font-size:clamp(16px,2vw,22px); font-weight:700; letter-spacing:.06em; margin:0 0 14px; }
.sem-hero .sh-ja{ font-size:clamp(15px,1.8vw,19px); letter-spacing:.08em; margin:0; }
/* 写真背景ヒーロー（タイトルのみ） */
.sem-hero.has-photo{ position:relative; padding:120px 24px; background:#333 center/cover no-repeat; }
.sem-hero.has-photo::before{ content:""; position:absolute; inset:0; background:rgba(20,20,20,.55); }
.sh-only{ position:relative; z-index:1; font-size:clamp(30px,5vw,50px); font-weight:700; letter-spacing:.12em; margin:0; }

/* ヒーロー〜スライドまで一枚の写真背景（アウトプット） */
.output-cover{ position:relative; background:#2a2a2a center/cover no-repeat; }
.output-cover::before{ content:""; position:absolute; inset:0; background:rgba(18,18,18,.48); }
.output-cover.cover-dark::before{ background:rgba(18,18,18,.6); }
.output-cover > *{ position:relative; z-index:1; }
/* ラッパー内の各セクションは自前の背景色を消す */
.sem-hero.is-clear{ background:transparent; padding-bottom:44px; }
.sem-intro.is-clear{ background:transparent; }

/* ダーク・イントロ（見出し＋本文） */
.sem-intro{ background:#1f1f1f; color:#fff; }
.sem-intro .si-head{ text-align:center; font-size:clamp(18px,2.6vw,26px); font-weight:700; letter-spacing:.06em; margin:0 0 34px; }
.sem-intro .si-body{ max-width:840px; margin:0 auto; }
.sem-intro .si-body p{ font-size:14.5px; line-height:2; margin:0 0 18px; color:#eaeaea; }
/* ヒーローのサブ見出し（日米ページ） */
.sem-hero .sh-sub{ font-size:clamp(16px,2.2vw,22px); font-weight:700; letter-spacing:.06em; margin:22px 0 0; }
/* 写真＋本文の2カラム（ダーク） */
.sem-split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; max-width:1000px; margin:0 auto; }
.sem-split .ss-photo img{ width:100%; border-radius:2px; }
.sem-split .ss-text p{ font-size:14px; line-height:2; margin:0; color:#eaeaea; }
/* 分割内スライド：画像比率に合わせて左右の黒余白をなくす */
.ss-slide .slideshow{ aspect-ratio:840/622; background:transparent; }
.ss-slide .slideshow .slide img{ object-fit:cover; }
/* 全幅スライド（アウトプット）：スライド比率に合わせて余白なし */
.slideshow.ss-wide{ aspect-ratio:1326/728; background:transparent; }
.slideshow.ss-wide .slide img{ object-fit:cover; }

/* スライドショー */
.slideshow{ position:relative; max-width:820px; margin:0 auto; aspect-ratio:16/9; background:#111; }
.slideshow .slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.slideshow .slide.is-active{ opacity:1; }
.slideshow .slide img{ width:100%; height:100%; object-fit:contain; }

/* 3カラム情報（セミナーの内容／効果／セミナー情報）── 白カード */
.info3{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; max-width:1040px; margin:0 auto; align-items:stretch; }
.info3 > div{ background:#fff; }
.info3 .col-head{ background:#1a1a1a; color:#fff; text-align:center; font-size:18px; font-weight:700; letter-spacing:.1em; padding:22px 12px; margin:0; }
.info3 ul{ list-style:none; margin:0; padding:32px 34px 42px; }
.info3 li{ font-size:14px; line-height:2.35; color:var(--ink-soft); }

/* きっかけ（白・中央見出し＋本文） */
.sem-kikkake .kk-title{ text-align:center; font-size:clamp(20px,3vw,26px); font-weight:700; color:var(--ink); letter-spacing:.1em; margin:0 0 40px; }
.sem-kikkake .kk-body{ max-width:900px; margin:0 auto; }
.sem-kikkake .kk-body p{ font-size:14.5px; line-height:2; color:var(--ink-soft); margin:0 0 22px; }

/* 3円フロー（MX→CX→DX 等） */
.mind-flow{ text-align:center; }
.mind-flow .mf-track{ max-width:660px; margin:0 auto; }
.mind-flow .mf-track img{ max-width:100%; height:auto; margin:0 auto; }
.mind-col{ flex:0 0 auto; width:220px; display:flex; flex-direction:column; align-items:center; }
.mind-col .mc-head{ display:flex; flex-direction:column; justify-content:flex-end; min-height:74px; margin-bottom:26px; }
.mind-col .mc-ja{ font-size:15px; font-weight:700; color:#E97131; margin:0 0 5px; line-height:1.35; }
.mind-col .mc-en{ font-size:11.5px; color:#E97131; letter-spacing:.02em; margin:0; }
.mind-col .mc-circle{
  width:140px; height:140px; border-radius:50%; background:#E97131; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:42px; font-weight:700; letter-spacing:.06em;
}
.mind-arrow{ flex:0 0 auto; margin-bottom:51px; }
.mind-arrow svg{ display:block; width:44px; height:38px; fill:#d2d2d2; }

/* 目指すところ（番号リスト・グレー） */
.aim-sub{ text-align:center; font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.06em; margin:0 0 30px; }
.aim-list{ max-width:640px; margin:0 auto; list-style:none; padding:0; }
.aim-list li{ display:flex; align-items:center; gap:20px; padding:22px 6px; border-bottom:1px solid #ddd; }
.aim-list li:first-child{ border-top:1px solid #ddd; }
.aim-list .num{ font-size:30px; font-weight:700; color:var(--orange); flex:0 0 auto; min-width:44px; }
.aim-list .txt{ font-size:14.5px; line-height:1.8; color:var(--ink-soft); }

/* カリキュラム（DAYカード） */
.curr-band{ background:#1f1f1f; color:#fff; }
.curr-band .cb-title{ text-align:center; font-size:clamp(28px,4.4vw,44px); font-weight:700; letter-spacing:.06em; line-height:1.3; margin:0 0 10px; }
.curr-band .cb-sub{ text-align:center; font-size:clamp(17px,2vw,21px); font-weight:700; letter-spacing:.08em; margin:0 0 26px; }
.curr-band .cb-head{ text-align:center; font-size:clamp(17px,2.4vw,22px); font-weight:700; line-height:1.6; margin:0 auto 44px; max-width:760px; }
.day-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; max-width:1000px; margin:0 auto; }
.day-card{ position:relative; padding:54px 44px 60px; color:#fff; overflow:hidden; background:#333 center/cover no-repeat; min-height:330px; }
.day-card::before{ content:""; position:absolute; inset:0; z-index:0; }
.day-card.ov-orange::before{ background:rgba(190,95,20,.68); }
.day-card.ov-dark::before{ background:rgba(18,26,40,.64); }
.day-card.ov-gray::before{ background:rgba(70,72,76,.66); }
.day-card > *{ position:relative; z-index:1; }
.day-card .day-no{ text-align:center; font-size:14px; font-weight:700; letter-spacing:.14em; margin:0 0 14px; }
.day-card .day-title{ text-align:center; font-size:clamp(17px,2vw,20px); font-weight:700; line-height:1.5; margin:0 0 26px; }
.day-card .day-list{ list-style:none; margin:0; padding:0; }
.day-card .day-list li{ font-size:13.5px; line-height:1.7; padding:6px 0 6px 1.1em; text-indent:-1.1em; }
.day-card .day-list li::before{ content:"・"; }

/* 背景セクション（淡いブルー／背景画像対応） */
.sem-bg{ position:relative; background:#eef4f8 center/cover no-repeat; }
.sem-bg.has-bg::before{ content:""; position:absolute; inset:0; background:rgba(249,251,252,.85); }
.sem-bg > .inner{ position:relative; z-index:1; }
.sem-bg .bg-title{ text-align:center; font-size:clamp(20px,3vw,26px); font-weight:700; color:var(--ink); letter-spacing:.1em; margin:0 0 44px; }
.sem-bg .bg-block{ max-width:900px; margin:0 auto 34px; }
.sem-bg .bg-h{ font-size:clamp(16px,2vw,19px); font-weight:700; color:var(--ink); margin:0 0 12px; letter-spacing:.03em; }
.sem-bg .bg-p{ font-size:14.5px; line-height:2; color:var(--ink-soft); margin:0; }

/* おすすめ企業（箇条書き中央） */
.sem-target .st-title{ text-align:center; font-size:clamp(20px,3vw,26px); font-weight:700; color:var(--ink); letter-spacing:.1em; margin:0 0 40px; }
.sem-target .st-list{ max-width:820px; margin:0 auto; list-style:none; padding:0; }
.sem-target .st-list li{ font-size:15px; line-height:1.9; color:var(--ink-soft); padding:8px 0 8px 1.4em; text-indent:-1.4em; }
.sem-target .st-list li::before{ content:"●"; color:var(--ink-soft); margin-right:.5em; }

/* 講座概要（ダーク・仕様リスト） */
.sem-outline{ background:#1f1f1f; color:#fff; }
.sem-outline .so-title{ text-align:center; font-size:clamp(20px,3vw,26px); font-weight:700; letter-spacing:.1em; margin:0 0 40px; }
.sem-outline .so-list{ max-width:720px; margin:0 auto; list-style:none; padding:0; }
.sem-outline .so-list > li{ font-size:15px; line-height:1.9; padding:9px 0; }
.sem-outline .so-list .note{ display:block; font-size:12.5px; color:#bbb; padding-left:1.4em; line-height:1.8; }

/* 講師プロフィール */
.sem-prof{ background:var(--gray-bg); }
.sem-prof .sp-title{ text-align:center; font-size:clamp(20px,3vw,26px); font-weight:700; color:var(--ink); letter-spacing:.1em; margin:0 0 40px; }
.sem-prof .sp-photo{ width:400px; max-width:90%; margin:0 auto 26px; }
.sem-prof .sp-photo img{ width:100%; border-radius:2px; }
.sem-prof .sp-name{ text-align:center; font-size:16px; font-weight:700; color:var(--ink); line-height:1.7; margin:0 0 30px; }
.sem-prof .sp-body{ max-width:820px; margin:0 auto; }
.sem-prof .sp-body p{ font-size:14px; line-height:2; color:var(--ink-soft); margin:0 0 22px; }
.sem-prof .sp-roles{ list-style:none; margin:14px 0 0; padding:0; font-size:13.5px; color:var(--text-light); line-height:2; }

@media (max-width:820px){
  /* スマホでも横1列（丸＋矢印）を維持し、小さく表示 */
  /* マインドフローは画像（mind-flow.png）。スマホは少し小さめに */
  .mind-flow .mf-track img{ width:86%; }
  /* 見出し「すべての変革はマインドから始まる」を1行に収める */
  .mind-flow .center-heading{ font-size:17px; letter-spacing:.02em; white-space:nowrap; }
  .day-grid{ grid-template-columns:1fr; }
  .day-card{ min-height:0; padding:40px 18px 46px; }
  /* スマホは左右余白を詰めて文字スペースを広く */
  .curr-band .inner{ padding:0 12px; }
  .info3{ grid-template-columns:1fr; gap:26px; max-width:420px; }
  .sem-split{ grid-template-columns:1fr; gap:26px; }
}