/* =====================================================================
   CODECRAFT INC. コーポレートサイト (cocra.co.jp クローン)
   Prj_cocra 用に再構築。オリジナル(STUDIO製)を可能な限り再現。
   カラー / フォント / モーションは実サイトの計測値に準拠。
   ===================================================================== */

:root {
  --bg:          #f8f7f6;   /* body 背景 */
  --ink:         #333333;   /* 基本テキスト */
  --ink-strong:  #1a1a1a;   /* 見出し濃色 */
  --ink-soft:    #616161;   /* 補助テキスト */
  --white:       #ffffff;
  --teal:        #17a2b8;   /* ロゴマーク色 */
  --accent:      #f84f65;   /* アクセント(ピンク) */
  --blue-a:      #0acffe;   /* 青ボタン グラデ開始 */
  --blue-b:      #495aff;   /* 青ボタン グラデ終端 */
  --green-a:     #a9f453;   /* 緑ボタン グラデ開始 */
  --green-b:     #25b354;   /* 緑ボタン グラデ終端 */
  --cta-overlay: rgba(30, 90, 159, .5); /* CTA/フッターの青被せ */
  --header-h:    84px;
  --maxw:        1180px;
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --sans-en:     "Montserrat", sans-serif;
  --sans-jp:     "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans-jp);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

/* 画像が取得できなかった場合のフォールバック（灰色エリア＋サイズ表記） */
.img-placeholder {
  background: #cccccc;
  color: #555;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans-en); font-size: 13px; letter-spacing: .05em;
}

/* 英字ラベル（OUR PURPOSE 等） */
.eyebrow {
  font-family: var(--sans-en);
  font-weight: 600;
  letter-spacing: .22em;
  font-size: 14px;
  color: var(--ink);
}

/* 大見出し（英字ディスプレイ） */
.display {
  font-family: var(--sans-en);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.05;
  color: var(--ink-strong);
}

/* =========================== ボタン =========================== */
.btn {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--sans-jp);
  font-size: 15px; font-weight: 500;
  padding: 15px 30px;
  border-radius: 10px;
  color: #333;
  cursor: pointer; border: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s;
  will-change: transform;
}
.btn .mi { font-size: 18px; }
.btn:hover { transform: translateY(-3px); }

.btn-blue  { background: linear-gradient(90deg, var(--blue-a) 0%, var(--blue-b) 100%); color:#fff; box-shadow: 0 12px 24px rgba(73,90,255,.28); }
.btn-blue:hover { box-shadow: 0 18px 30px rgba(73,90,255,.40); }

.btn-green { background: linear-gradient(90deg, var(--green-a) 0%, var(--green-b) 96%, #20b054 100%); color:#333; box-shadow: 0 12px 24px rgba(37,179,84,.25); }
.btn-green:hover { box-shadow: 0 18px 30px rgba(37,179,84,.38); }

.btn-white { background:#fff; color:#333; box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.btn-white:hover { box-shadow: 0 18px 30px rgba(0,0,0,.28); }

.btn-outline {
  background: rgba(0,0,0,.28);
  color:#fff; border:1px solid rgba(255,255,255,.75);
  border-radius: 4px; padding: 13px 26px;
  font-family: var(--sans-en); font-weight:600; letter-spacing:.15em; font-size:13px;
}
.btn-outline:hover { background: rgba(0,0,0,.5); }

/* =========================== ヘッダー =========================== */
/* 本番同様：常時「上が黒→下が透明」のグラデーション・スクリム。文字は常に白。 */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  color: #fff;
}
.site-header::before {
  content:""; position:absolute; left:0; top:0; right:0; height: 170px; z-index:-1;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(102,102,102,0) 100%);
  pointer-events:none;
}
.site-header .container { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:14px; }
.brand__mark { width: 34px; height: auto; }
.brand__name {
  margin:0; font-family: var(--sans-en); font-weight:600;
  letter-spacing:.16em; font-size:22px; line-height:1;
  transition: color .4s var(--ease);
}
.gnav ul { display:flex; align-items:center; gap:34px; margin:0; padding:0; list-style:none; }
.gnav a {
  font-family: var(--sans-en); font-weight:600; letter-spacing:.15em; font-size:14px;
  display:inline-flex; align-items:center; gap:5px;
  position:relative; padding: 4px 0;
  transition: opacity .3s;
}
.gnav a .mi { font-size:16px; }
.gnav a::after {
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin:left; transition: transform .35s var(--ease);
}
.gnav a:hover::after { transform: scaleX(1); }

/* ハンバーガー（SP） */
.nav-toggle { display:none; background:none; border:none; cursor:pointer; width:34px; height:26px; position:relative; color:#fff; }
.nav-toggle span { position:absolute; left:0; width:100%; height:2px; background: currentColor; transition: .3s var(--ease); }
.nav-toggle span:nth-child(1){ top:2px; } .nav-toggle span:nth-child(2){ top:12px; } .nav-toggle span:nth-child(3){ top:22px; }
body.nav-open .nav-toggle span:nth-child(1){ top:12px; transform:rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ top:12px; transform:rotate(-45deg); }

/* =========================== ヒーロー =========================== */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: calc(var(--header-h) + 60px);
  color:#fff;
  overflow: hidden;
}
/* 背景は固定レイヤー（STUDIO同様）＋読み込み時に 1.05→1 のケンバーンズ・ズーム */
.hero__bg {
  position:fixed; inset:0; height:100vh; z-index:-2;
  background: url('/assets/cocra/img/hero-bg.webp') center 35% / cover no-repeat;
  transform: scale(1.05);
  transition: transform 3000ms cubic-bezier(.42, 0, .6, 1.19) 500ms;
  filter: brightness(.8);   /* 本番同様の控えめな暗さ（薄いブラー） */
}
body.loaded .hero__bg { transform: scale(1); }

.hero__title {
  font-family: var(--sans-en); font-weight:700;
  letter-spacing:.06em; line-height:1.12;
  font-size: clamp(40px, 6vw, 86px);
  margin:0; text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero__title span { display:block; overflow:hidden; }
/* 見出し：teal(#9bc8da)→白 ＋ 下72pxから上昇 ＋ フェード（1行ずつ段階表示） */
.hero__title span > b {
  font-weight:700; display:block;
  color:#9bc8da; opacity:0; transform: translateY(72px);
  transition: color .8s var(--ease), opacity .8s var(--ease), transform .8s var(--ease);
}
body.loaded .hero__title span > b { color:#fff; opacity:1; transform:none; }
body.loaded .hero__title span:nth-child(1) > b { transition-delay:.6s; }
body.loaded .hero__title span:nth-child(2) > b { transition-delay:.8s; }
body.loaded .hero__title span:nth-child(3) > b { transition-delay:.8s; }

.hero__with {
  font-family: var(--sans-en); font-weight:600; letter-spacing:.2em; font-size:clamp(13px,1.4vw,16px); margin:14px 0 0;
  opacity:0; transform: translateY(48px);
  transition: opacity .8s var(--ease) 1.2s, transform .8s var(--ease) 1.2s;
}
body.loaded .hero__with { opacity:1; transform:none; }

/* OUR PURPOSE ブロック（読み込み時に下48pxからフェードアップ / delay 1.2s） */
.purpose { max-width: 560px; margin-top: 90px; opacity:0; transform: translateY(48px); transition: opacity 1s var(--ease) 1.2s, transform 1s var(--ease) 1.2s; }
body.loaded .purpose { opacity:1; transform:none; }
.purpose__label { color:#fff; }
.purpose__head { font-family: var(--sans-jp); font-weight:700; font-size: clamp(22px,2.4vw,30px); margin:14px 0 22px; letter-spacing:.02em; }
.purpose__text { font-size:15px; line-height:2; color: rgba(255,255,255,.92); margin:0 0 30px; }

/* 15周年ロゴ（おかげさまで15周年ブロックの先頭に配置） */
.anniv-logo {
  display:block; width: min(46vw, 520px); height:auto; aspect-ratio: 1536 / 1024; margin: 0 auto 4px;
  pointer-events:none; filter: drop-shadow(0 8px 24px rgba(0,0,0,.5));
}

/* SCROLL インジケータ */
.scroll-ind {
  position:absolute; right:34px; top:42%; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  writing-mode: vertical-rl;
  font-family: var(--sans-en); font-weight:600; letter-spacing:.35em; font-size:12px; color:#fff;
  opacity:0; transform: translateY(48px);
  transition: opacity .8s var(--ease) 1.4s, transform .8s var(--ease) 1.4s;
}
body.loaded .scroll-ind { opacity:1; transform:none; }
.scroll-ind__line { position:relative; width:1px; height:120px; background: rgba(255,255,255,.4); overflow:hidden; }
.scroll-ind__line::after { content:""; position:absolute; left:0; top:0; width:100%; height:40%; background:#fff; animation: scrollDot 2.2s var(--ease) infinite; }
@keyframes scrollDot { 0%{ transform: translateY(-100%);} 100%{ transform: translateY(320%);} }

/* =========================== 15周年テキスト帯 =========================== */
/* ヘッダー画像（固定の小石背景）の上に重ねる：透明背景＋白文字（本番同様） */
.anniv-note { background: transparent; padding: 0 0 130px; text-align:center; position:relative; color:#fff; }
.anniv-note h2 { font-family: var(--sans-jp); font-weight:700; font-size: clamp(24px,3vw,34px); margin:0 0 30px; letter-spacing:.04em; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.45); }
.anniv-note p { max-width: 820px; margin:0 auto; font-size:15px; line-height:2.1; color: rgba(255,255,255,.94); text-shadow:0 1px 14px rgba(0,0,0,.45); }

/* =========================== OUR SERVICES =========================== */
.services { background: var(--bg); padding: 40px 0 130px; }
.services__head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 70px; }
.services__head h2 { font-size: clamp(36px,5vw,64px); margin:0; }
.view-more { font-family: var(--sans-en); font-weight:600; letter-spacing:.12em; font-size:14px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.view-more .mi { font-size:18px; }

.service {
  display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center;
  margin-bottom: 120px;
}
.service:last-child { margin-bottom:0; }
.service__media {
  border-radius: 6px; overflow:hidden; aspect-ratio: 16/11;
  box-shadow: 0 30px 60px rgba(0,0,0,.14);
}
.service__media img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.service:hover .service__media img { transform: scale(1.06); }
.service__body { text-align:center; padding: 0 20px; }
.service__title { font-family: var(--sans-en); font-weight:700; letter-spacing:.02em; font-size: clamp(28px,3vw,40px); margin:0; color: var(--ink-strong); }
.service__title .jp { font-family: var(--sans-jp); }
.service__sub { font-family: var(--sans-jp); font-size:13px; color: var(--ink-soft); margin:6px 0 22px; letter-spacing:.06em; }
.service__text { font-size:14.5px; line-height:2; color: var(--ink); margin:0 auto 28px; max-width:420px; text-align:left; }

/* 交互レイアウト：偶数番目は文章を左・画像を右 */
.service--reverse .service__media { order:2; }
.service--reverse .service__body  { order:1; }

/* =========================== CTA + フッター =========================== */
.footer-cta { position:relative; color:#fff; overflow:hidden; }
.footer-cta__bg { position:absolute; inset:0; z-index:-2; background: url('/assets/cocra/img/hero-bg.webp') center / cover no-repeat; }
.footer-cta__bg::after { content:""; position:absolute; inset:0; background: var(--cta-overlay); }

.cta-inner { display:grid; grid-template-columns: 1.4fr auto; align-items:center; gap:40px; padding: 120px 0 90px; }
.cta-inner__lead h2 { font-family: var(--sans-jp); font-weight:700; font-size: clamp(22px,2.6vw,32px); line-height:1.5; margin:0 0 22px; }
.cta-inner__lead p { font-size:14.5px; color: rgba(255,255,255,.9); margin:0; }

.footer-brand { text-align:center; padding: 30px 0 60px; }
.footer-brand__mark { width:52px; margin:0 auto 16px; }
.footer-brand__name { font-family: var(--sans-jp); font-size:18px; letter-spacing:.08em; margin:0; }
.footer-brand__tag { font-family: var(--sans-en); font-size:13px; letter-spacing:.14em; color: rgba(255,255,255,.85); margin:4px 0 0; }

.footer-nav { display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 26px 0; border-top:1px solid rgba(255,255,255,.18); }
.footer-nav ul { display:flex; gap:28px; margin:0; padding:0; list-style:none; }
.footer-nav a { font-family: var(--sans-en); font-weight:600; letter-spacing:.12em; font-size:13px; display:inline-flex; align-items:center; gap:5px; opacity:.9; transition: opacity .3s; }
.footer-nav a:hover { opacity:1; }
.footer-nav .privacy { font-size:12px; letter-spacing:.12em; }
.copyright { text-align:center; font-family: var(--sans-en); letter-spacing:.14em; font-size:12px; color: rgba(255,255,255,.8); padding: 24px 0 40px; }

/* =========================== スクロール演出 =========================== */
/* 下48pxからフェードアップ（STUDIO: translate 0 48px / opacity 0 / dur 1s） */
.reveal { opacity:0; transform: translateY(48px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.15s; } .reveal.d2 { transition-delay:.3s; } .reveal.d3 { transition-delay:.45s; }

/* =========================== オープニング・ブラックワイプ（STUDIO animation-object） =========
   画面全体を覆う黒が scaleX:1→0 / transform-origin:right で右へ収縮＝左から右へ開く。
   delay 500ms / duration 1000ms。ヘッダーごと覆うため全画面固定オーバーレイで実装。 */
.intro-veil {
  position:fixed; inset:0; background:#000; z-index:9999; pointer-events:none;
  transform-origin: center right; transform: scaleX(1);
  transition: transform 1000ms cubic-bezier(.76, 0, .24, 1) 500ms;
}
body.loaded .intro-veil { transform: scaleX(0); }

/* サービス画像：スクロールインで黒ワイプ（右へ）＋ 1.05→1 のケンバーンズ */
.service__media { position:relative; }
.service__media::after {
  content:""; position:absolute; inset:0; background:#000; z-index:3;
  transform-origin: center right; transform: scaleX(1);
  transition: transform 1000ms cubic-bezier(.76, 0, .24, 1);
  pointer-events:none;
}
.service__media.is-in::after { transform: scaleX(0); }
.service__media img { transform: scale(1.05); }
.service__media.is-in img { transform: scale(1); transition: transform 3000ms ease-in-out; }
.service:hover .service__media img { transform: scale(1.06); transition: transform 1.2s var(--ease); }

/* 動きを控える設定のユーザーには即時表示 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity:1; transform:none; }
  .intro-veil, .service__media::after, .proc-media::after { display:none; }
  .hero__bg, .page-hero__bg { transform:none; }
  .hero__title span > b, .hero__with, .purpose, .scroll-ind { opacity:1; transform:none; }
  .service__media img, .proc-media img { transform:none; }
}

/* Material Icons 補助 */
.mi { font-family:"Material Icons"; font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; -webkit-font-feature-settings:"liga"; }

/* =========================== レスポンシブ =========================== */
@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .site-header::before { height: 88px; }   /* モバイルはスクリムを低く（本番同様） */
  .hero { min-height: 100vh; }
  /* モバイルはタイトルを大きく（本番同様、1単語ずつ改行される大きさ） */
  .hero__title { font-size: clamp(54px, 20vw, 92px); line-height: 1.04; }
  .scroll-ind { display:none; }
  .anniv-logo { width: 64vw; }
  .purpose { margin-top:60px; }

  .nav-toggle { display:block; z-index:120; }
  .gnav {
    position:fixed; inset:0; background: rgba(20,20,22,.96); backdrop-filter: blur(6px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:.4s var(--ease); z-index:110;
  }
  body.nav-open .gnav { opacity:1; visibility:visible; }
  .gnav ul { flex-direction:column; gap:30px; }
  .gnav a { color:#fff; font-size:18px; }

  .services__head { flex-direction:column; align-items:flex-start; gap:14px; }
  .service { grid-template-columns: 1fr; gap: 30px; margin-bottom: 80px; }
  .service--reverse .service__media { order:0; }
  .service--reverse .service__body  { order:0; }
  .service__text { max-width:none; }

  .cta-inner { grid-template-columns: 1fr; gap:26px; padding: 80px 0 60px; text-align:center; }
  .footer-nav { flex-direction:column; gap:18px; }
  .footer-nav ul { flex-wrap:wrap; justify-content:center; }
}

@media (max-width: 480px) {
  .container { padding: 0 20px; }
  .brand__name { font-size:18px; }
}

/* =====================================================================
   下層ページ共通（SYSTEM / COMPANY / CONTACT / PRIVACY）
   ===================================================================== */

/* ページヒーロー（帯） */
.page-hero { position:relative; min-height: 58vh; display:flex; align-items:center; color:#fff; overflow:hidden; }
/* 背景は固定レイヤー＋読み込み時 1.05→1 のケンバーンズ縮小 ＋ brightness(.8) の薄い暗がり（本番同様） */
.page-hero__bg {
  position:fixed; inset:0; height:100vh; z-index:-2;
  background: url('/assets/cocra/img/hero-bg.webp') center 40% / cover no-repeat;
  transform: scale(1.05);
  transition: transform 3000ms cubic-bezier(.42, 0, .6, 1.19) 500ms;
  filter: brightness(.8);
}
body.loaded .page-hero__bg { transform: scale(1); }
/* 下へ向かって黒くなるグラデーション・スクリム（本番同様の「薄い黒いブラー」） */
.page-hero::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
}
/* ページ別ヒーロー背景（本番と同一の写真） */
.page-hero__bg--system  { background-image: url('/assets/cocra/img/hero-system.webp'); }
.page-hero__bg--company { background-image: url('/assets/cocra/img/hero-company.webp'); background-position: center 60%; }
.page-hero__bg--contact { background-image: url('/assets/cocra/img/hero-contact.webp'); }
.page-hero__bg--privacy { background-image: url('/assets/cocra/img/hero-privacy.webp'); }
.page-hero .container { padding-top: var(--header-h); }
/* 本番同様：英字(SYSTEM等)を主役の大見出し(72px)、日本語をサブ(28px) */
.page-hero__en { font-family: var(--sans-en); font-weight:600; letter-spacing:.01em; font-size: clamp(44px,6vw,72px); line-height:1.05; margin:0 0 8px; text-shadow:0 2px 22px rgba(0,0,0,.35); }
.page-hero__jp { font-family: var(--sans-jp); font-weight:700; font-size: clamp(19px,2.2vw,28px); margin:0; letter-spacing:.08em; text-shadow:0 2px 20px rgba(0,0,0,.4); }

/* セクション */
.sec { padding: 100px 0; background: var(--bg); }
.sec--alt { background: #f0efed; }
.container.narrow { max-width: 900px; }
.center { text-align:center; }
.eyebrow.center { display:block; text-align:center; color: var(--accent); letter-spacing:.2em; }
.sec__title { font-family: var(--sans-jp); font-weight:700; font-size: clamp(22px,2.8vw,32px); line-height:1.5; margin:14px 0 40px; color: var(--ink-strong); letter-spacing:.03em; }
.prose { font-size:15px; line-height:2.1; color: var(--ink); margin:0 0 20px; }
.prose.center { text-align:center; }
.prose:last-child { margin-bottom:0; }
.muted { color: var(--ink-soft); }
.note { font-size:13px; color: var(--ink-soft); line-height:1.9; }

/* 行動指針カード */
.conduct-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:28px; margin-top:20px; }
.conduct { background:#fff; border-radius:10px; padding: clamp(32px,4vw,48px); box-shadow:0 30px 40px rgba(0,0,0,.08); }
.conduct__no { display:none; }                          /* 本番に番号は無い */
.conduct__en { font-family: var(--sans-en); font-weight:700; letter-spacing:.02em; font-size: clamp(20px,2vw,30px); color: var(--blue-deep); margin:0 0 14px; }
.conduct__jp { font-family: var(--sans-jp); font-weight:700; font-size:16px; margin:0 0 18px; color:#000; }
.conduct__text { font-size:14px; line-height:1.9; color:#555; margin:0; }

/* 中央の大見出し（英字黒64px ＋ 日本語サブ）— 本番COMPANY準拠 */
.sec-head { text-align:center; margin-bottom:64px; }
.head-en { font-family: var(--sans-en); font-weight:600; font-size: clamp(38px,5vw,64px); line-height:1.08; letter-spacing:.02em; color:#111; margin:0; }
.head-jp { font-family: var(--sans-jp); font-weight:700; font-size: clamp(20px,2.4vw,28px); color:#111; margin:14px 0 0; }

/* ABOUT：会社概要テーブル（左）＋ ビル写真（右）の2カラム */
.about-grid { display:grid; grid-template-columns: 0.67fr 1fr; gap:44px; align-items:start; }
/* 1枚目(700×466)の比率に固定したスライドボックス。2枚目も同じ枠に object-fit:cover で収める */
.about-figure { margin:0; position:relative; aspect-ratio:700/466; border-radius:8px; overflow:hidden; box-shadow:0 24px 48px rgba(0,0,0,.14); }
.about-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity 1.2s ease; }
.about-slide.is-active { opacity:1; }
/* 2枚目（看板）を右へ約50pxずらして表示 */
.about-slide--sign { object-position: calc(50% + 50px) center; }

/* 会社概要テーブル */
/* 会社概要テーブル（本番準拠：罫線なし / ラベル右寄せ / 行間24px） */
.about-table { margin:0; }
.about-row { display:flex; gap:28px; margin-bottom:24px; padding:0; border:0; }
.about-row:last-child { margin-bottom:0; }
.about-table dt { flex:0 0 100px; text-align:right; font-family: var(--sans-jp); font-weight:700; color:#000; font-size:16px; line-height:1.9; }
.about-table dd { flex:1; margin:0; font-size:15px; line-height:1.9; color: var(--ink); }
.biz-list { margin:0; padding-left:1.4em; }
.biz-list li { margin-bottom:8px; }

/* システム: 開発対象タグ */
.tag-list { list-style:none; margin:30px 0 14px; padding:0; display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
.tag-list li { background:#fff; border-left:3px solid var(--blue-b); border-radius:6px; padding:16px 20px; box-shadow:0 10px 24px rgba(0,0,0,.05); }
.tag-list b { display:block; font-size:15px; color: var(--ink-strong); }
.tag-list span { font-family: var(--sans-en); font-size:12px; color: var(--ink-soft); letter-spacing:.03em; }

/* 開発の流れ */
.process { max-width: 1040px; margin: 20px auto 50px; }
/* 番号 | 本文 | 画像 の3カラム（本番同様、各ステップに写真） */
.step { display:grid; grid-template-columns: 84px 1fr 300px; gap:30px; padding:40px 0; border-bottom:1px solid #e2e0dd; align-items:center; }
.step:first-child { border-top:1px solid #e2e0dd; }
.step__no { font-family: var(--sans-en); font-weight:700; font-size:44px; color: var(--blue-b); line-height:1; }
.step__no span { color: var(--accent); }
.step__title { font-family: var(--sans-jp); font-weight:700; font-size:20px; margin:0 0 16px; color: var(--ink-strong); }
.step__en { display:block; font-family: var(--sans-en); font-weight:600; font-size:12px; letter-spacing:.08em; color: var(--ink-soft); margin-top:4px; }
.step__body p { font-size:14.5px; line-height:2; color: var(--ink); margin:0 0 12px; }
.step__body p:last-child { margin-bottom:0; }
.step__media { border-radius:6px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 16px 34px rgba(0,0,0,.12); }
.step__media img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.step:hover .step__media img { transform: scale(1.05); }

/* 2カラムカード */
.two-col { display:grid; grid-template-columns: repeat(2,1fr); gap:26px; margin-top:20px; }
/* 3カラムカード（HARDWARE 対応内容） */
.svc-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:26px; margin-top:20px; }
/* SOFTWARE: AI開発カード（アイコン付きテキストカード） */
.card__icon {
  display:block; margin:36px 32px 0; font-size:44px; line-height:1;
  background: linear-gradient(135deg, var(--blue-a), var(--blue-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.card--text .card__icon + .card__title { margin-top:16px; }
/* SOFTWARE: AI活用シーン（お悩み→AIで解決） */
.scene-grid .case-label--do { margin-top:22px; }
/* HARDWARE: 見える化の接続フロー（PLC→サーバー→LAN→PC/スマホ） */
.mon-flow {
  display:flex; align-items:center; justify-content:center; gap:8px 14px; flex-wrap:wrap;
  font-family:var(--sans-jp); font-weight:700; font-size:15px; color:var(--ink-strong);
  margin:0 0 40px; text-align:center;
}
.mon-flow .mi { font-size:20px; color:var(--blue-b); }
/* HARDWARE: ラダー図解析の納品物リスト */
.ladder-deliv { max-width:760px; margin:48px auto 0; }
.ladder-deliv__title { font-family:var(--sans-jp); font-weight:700; font-size:17px; color:var(--ink-strong); text-align:center; margin:0 0 6px; }
/* SOFTWARE: FAQ */
.faq { max-width:860px; margin:0 auto; }
.faq-item { background:#f6f8fb; border-radius:10px; padding:24px 28px; margin-bottom:16px; }
.faq-q { font-family:var(--sans-jp); font-weight:700; font-size:16px; color:var(--ink-strong); margin:0 0 10px; }
.faq-q::before { content:"Q. "; font-family:var(--sans-en); color:var(--blue-b); }
.faq-a { font-size:14px; line-height:1.95; color:var(--ink); margin:0; }
.faq-a::before { content:"A. "; font-family:var(--sans-en); font-weight:700; color:var(--accent); }
/* 画像出典クレジット（CC BY-SA 帰属表示） */
.img-credit { margin:56px 0 0; font-size:11px; line-height:1.7; color:#9aa3ad; text-align:center; }
.img-credit a { color:#8a94a0; text-decoration:underline; }
.card { background:#fff; border-radius:10px; padding:0 0 34px; box-shadow:0 20px 40px rgba(0,0,0,.06); overflow:hidden; }
.card__media { aspect-ratio:16/10; overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__title { font-family: var(--sans-jp); font-weight:700; font-size:19px; margin:26px 32px 14px; color: var(--ink-strong); }
.card p { font-size:14px; line-height:1.95; color: var(--ink); margin:0 32px; }
.card--text { padding-top:8px; }
.card--text .card__title { margin-top:36px; }

/* SYSTEM: モバイル節のフルワイド・バナー（LaunchTable）＋App Storeバッジ */
.mobile-banner { margin: 0 auto 44px; max-width:760px; border-radius:12px; overflow:hidden; box-shadow:0 22px 48px rgba(0,0,0,.15); }
.mobile-banner img { width:100%; display:block; }
.appstore-badge { display:inline-block; margin:22px 32px 0; }
.appstore-badge img { height:44px; width:auto; box-shadow:none; }

/* COMPANY: OUR PURPOSE 直下の全幅画像 */
.purpose-figure { margin: 30px 0 38px; border-radius:8px; overflow:hidden; aspect-ratio:16/7; box-shadow:0 20px 45px rgba(0,0,0,.12); }
.purpose-figure img { width:100%; height:100%; object-fit:cover; }

/* =========================== お問い合わせフォーム =========================== */
.contact-form { max-width: 720px; margin: 40px auto 0; }
.field { margin-bottom: 26px; }
.field label { display:block; font-family: var(--sans-jp); font-weight:700; font-size:14px; color: var(--ink-strong); margin-bottom:10px; }
.field .req { color: var(--accent); }
.field input, .field textarea {
  width:100%; font-family: var(--sans-jp); font-size:15px; color: var(--ink);
  padding:15px 16px; border:1px solid #d8d6d3; border-radius:8px; background:#fff;
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus { outline:none; border-color: var(--blue-b); box-shadow: 0 0 0 3px rgba(73,90,255,.12); }
.field textarea { resize:vertical; line-height:1.8; }
.field-error { color: var(--accent); font-size:13px; margin:8px 0 0; }
.field-error.center { text-align:center; }
.consent { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; font-size:14px; color: var(--ink); }
.consent input { width:18px; height:18px; accent-color: var(--blue-b); }
.consent a { color: var(--blue-b); text-decoration:underline; }

.form-alert { display:flex; align-items:center; gap:10px; border-radius:8px; padding:16px 20px; margin:26px auto 0; max-width:720px; font-size:14px; line-height:1.7; }
.form-alert .mi { font-size:20px; }
.form-alert--ok { background:#e8f7ee; color:#1c7a3e; border:1px solid #b7e3c6; }
.form-alert--ng { background:#fdeaed; color:#c0334a; border:1px solid #f3c0c9; }

/* =========================== 法務ページ（プライバシー） =========================== */
.legal { max-width: 900px; }
.legal .lead { font-size:15px; line-height:2.1; color: var(--ink); margin:0 0 40px; }
.legal-article { margin-bottom:38px; }
.legal-article h3 { font-family: var(--sans-jp); font-weight:700; font-size:18px; color: var(--ink-strong); border-left:4px solid var(--blue-b); padding-left:12px; margin:0 0 16px; }
.legal-article p { font-size:14.5px; line-height:2; color: var(--ink); margin:0 0 12px; }
.legal-article ol, .legal-article ul { font-size:14.5px; line-height:2; color: var(--ink); margin:0 0 12px; padding-left:1.5em; }
.legal-article li { margin-bottom:6px; }
.legal__meta { font-size:13px; color: var(--ink-soft); border-top:1px solid #e2e0dd; padding-top:24px; margin-top:10px; }

@media (max-width: 900px) {
  .page-hero { min-height: 46vh; }
  .sec { padding: 64px 0; }
  .conduct-grid, .tag-list, .two-col, .svc-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap:36px; }
  .about-figure { order:-1; }
  .sec-head { margin-bottom:40px; }
  .about-table dt { flex-basis:88px; }
  .step { grid-template-columns: 1fr; gap:14px; padding:26px 0; }
  .step__no { font-size:34px; }
  .step__media { max-width:420px; }
}

/* =====================================================================
   SYSTEM ページ（本番準拠：白カード構成 / 青見出し / 左右交互2カラム）
   計測値: カード radius10px pad96px shadow(rgba0,0,0,.1 40 50 30) / 見出し #1e5a9f
   ===================================================================== */
:root { --blue-deep: #1e5a9f; --blue-light: #4299fd; }

.sys-wrap { background: var(--bg); padding: 100px 0 120px; }

/* OUR SERVICE 見出し（中央） */
.sys-intro { text-align:center; margin-bottom: 80px; }
.sys-intro .eyebrow { display:block; color: var(--blue-deep); letter-spacing:.22em; }
.sys-lead { font-family: var(--sans-jp); font-weight:700; font-size: clamp(22px,2.6vw,28px); line-height:1.6; margin:18px 0 0; color:#000; }

/* 白カード */
.panel { background:#fff; border-radius:10px; padding: clamp(36px,6vw,96px); box-shadow: 0 40px 60px rgba(0,0,0,.08); margin-bottom: clamp(48px,8vw,96px); }
.panel:last-child { margin-bottom:0; }
.panel-head { text-align:center; margin-bottom:56px; }
.panel-title-en { font-family: var(--sans-en); font-weight:600; font-size: clamp(30px,4vw,48px); color: var(--blue-deep); letter-spacing:.02em; margin:0; text-align:center; }
.panel-title-jp { font-family: var(--sans-jp); font-weight:700; font-size: clamp(28px,4vw,48px); color: var(--blue-deep); margin:0; text-align:center; }
.panel-title-jp + .panel-title-en { font-size: clamp(22px,2.6vw,32px); margin-top:8px; }
.panel-sub { text-align:center; font-family: var(--sans-jp); font-weight:700; font-size:15px; color:#000; margin:16px 0 0; }
.panel-intro { font-size:15px; line-height:2.1; color: var(--ink); text-align:center; max-width:820px; margin:0 auto 44px; }

/* SYSTEMS DEVELOPED：中央1列の太字テキスト */
.sys-list { list-style:none; margin:40px 0 26px; padding:0; text-align:center; }
.sys-list li { font-family: var(--sans-jp); font-weight:600; font-size:17px; color:#000; padding:15px 0; }

/* 開発フロー / モバイル：左右交互2カラム */
.proc { display:flex; flex-direction:column; gap: clamp(52px,7vw,90px); margin: 24px 0 52px; }
.proc:last-child { margin-bottom:0; }
.proc-row { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.proc-media { position:relative; border-radius:6px; overflow:hidden; aspect-ratio:16/11; box-shadow:0 24px 48px rgba(0,0,0,.14); }
.proc-media img { width:100%; height:100%; object-fit:cover; transform: scale(1.05); }
/* 黒幕ワイプ：スクロールインで黒パネルが右へ収縮＝左から右へ画像が現れる（STUDIO animation-object） */
.proc-media::after {
  content:""; position:absolute; inset:0; background:#000; z-index:3;
  transform-origin: center right; transform: scaleX(1);
  transition: transform 1000ms cubic-bezier(.76, 0, .24, 1);
  pointer-events:none;
}
.proc-media.is-in::after { transform: scaleX(0); }
.proc-media.is-in img { transform: scale(1); transition: transform 3000ms ease-in-out; }
.proc-row:hover .proc-media img { transform: scale(1.06); transition: transform 1.2s var(--ease); }
.proc-row--rev .proc-media { order:-1; }        /* 画像を左側へ */
.proc-no { font-family: var(--sans-en); font-weight:600; font-size:20px; color: var(--blue-deep); display:block; margin-bottom:8px; }
.proc-title { font-family: var(--sans-jp); font-weight:700; font-size:22px; color:#111; margin:0 0 4px; }
.proc-en { font-family: var(--sans-en); font-weight:600; font-size:15px; color: var(--blue-light); margin:0 0 20px; }
.proc-body p { font-size:14.5px; line-height:2; color: var(--ink); margin:0 0 14px; }
.proc-body p:last-child { margin-bottom:0; }
.proc-body .note { font-size:13px; color: var(--ink-soft); }
.proc-body .appstore-badge { margin:22px 0 0; }
.proc-body .appstore-badge img { height:44px; width:auto; box-shadow:none; }

@media (max-width: 820px) {
  .sys-wrap { padding: 64px 0 72px; }
  .panel-head { margin-bottom:36px; }
  .proc-row { grid-template-columns: 1fr; gap:24px; }
  .proc-row--rev .proc-media { order:0; }
}

/* =====================================================================
   HARDWARE ページ（レトロフィット開発）
   ===================================================================== */
.page-hero__bg--hardware { background-image: url('/assets/cocra/img/hw-hero.webp'); background-position:center 55%; }

/* メリット・チェックリスト */
.hw-benefits { list-style:none; margin:26px 0 0; padding:0; }
.hw-benefits li { position:relative; padding:11px 0 11px 32px; font-size:14.5px; line-height:1.7; color:var(--ink); border-bottom:1px solid #eee; }
.hw-benefits li:last-child { border-bottom:0; }
.hw-benefits li::before { content:"\2713"; position:absolute; left:2px; top:11px; color:var(--blue-deep); font-weight:700; }
.hw-benefits b { color:var(--ink-strong); }

/* 導入事例 */
.case-figure { margin:0 0 44px; border-radius:8px; overflow:hidden; aspect-ratio:16/7; box-shadow:0 20px 45px rgba(0,0,0,.12); }
.case-figure img { width:100%; height:100%; object-fit:cover; }
.case-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.case-item { background:#f6f8fb; border-radius:10px; padding:30px 26px; }
.case-label { display:inline-block; font-family:var(--sans-jp); font-weight:700; font-size:14px; color:#fff; padding:5px 18px; border-radius:20px; margin-bottom:16px; letter-spacing:.04em; }
.case-label--issue  { background:#dd6178; }
.case-label--do     { background:var(--blue-deep); }
.case-label--result { background:#2e9e5b; }
.case-item p { font-size:14px; line-height:1.95; color:var(--ink); margin:0; }
.case-note { text-align:center; font-size:13px; color:var(--ink-soft); margin:36px 0 0; line-height:1.8; }

@media (max-width:820px){ .case-grid { grid-template-columns:1fr; gap:18px; } .case-figure { aspect-ratio:16/9; margin-bottom:28px; } }