@charset "UTF-8";
/* ===================================================================
   共立機巧株式会社 Webサイト
   デザイン正本: Clientdata/260916_kyoritsukiko_web_data (Illustrator 1366pt 幅)
   すべての座標・寸法・色は正本レンダーからの実測値。
   =================================================================== */

/* ---------- design tokens ---------- */
:root {
  --navy: #344A60;          /* 見出し・ボタン・Contact帯 */
  --navy-deep: #2C3F52;
  --red: #E60012;           /* お問い合わせボタン */
  --teal: #85F5ED;          /* Contact 欧文見出し */
  --green: #50CDB8;         /* カテゴリ矢印 */
  --blue: #1977BA;          /* リンク */
  --ink: #333333;           /* 本文 */
  --ink-mid: #666666;
  --ink-light: #999999;
  --ghost: #E1E4E7;         /* KYORITSU KIKO 背面文字 */
  --band-grey: #EFF1F2;     /* 製品情報帯 */
  --footer-grey: #EFF0F2;
  --tint-blue: #E4EFFE;     /* 実現できること帯 */
  --tint-recruit: #F1F6FF;
  --line: #CCCCCC;

  /* Illustrator のトラッキング実測値（本文・見出しとも ≒ +80/1000em）
     和文の字送りは書体を変えても 1em なので、これは書体置換の補正ではなく
     デザイナーが設定したトラッキングそのもの。フォントを差し替えても残すこと。 */
  --track: .085em;

  --page-w: 1366px;
  --content-x: 183px;       /* 本文左端（実測） */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.75;
  letter-spacing: var(--track);
  /* 約物半角: Illustrator は行末約物のみ半角にする。palt は仮名まで詰めるので使わない */
  font-feature-settings: "halt" 1;
  text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; border: 0; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* 欧文見出しは Noto Serif JP のラテン、和文見出しは Noto Sans JP。
   支給フォント 游ゴシック体 Pr6N は Web フォント配信不可のため
   Noto Sans JP で代替（申し送り #3）。和文の字送りは 1em で同一。 */
.serif { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }

/* ---------- layout ---------- */
.l-inner {
  width: var(--page-w);
  margin-inline: auto;
  position: relative;
}
/* ヘッダーは position:absolute で FV の上に重なるため、
   main 側にオフセットを与えない（正本どおり FV は y=0 から始まる）。 */
.l-main { display: block; }

/* 固定キャンバス方式: 帯ごとに実測高さを与え、子は帯の中で絶対配置する。
   フロー計算で積むと 1 箇所の誤差が下の全セクションへ波及するため。
   正本では装飾がアートボード外へ裁ち落とされるので、帯で必ずクリップする
   （しないと横スクロールが出る）。 */
.band { position: relative; width: 100%; overflow-x: clip; }
.band > .l-inner { height: 100%; }

/* =====================================================
   ヘッダー（全ページ共通 / パーツ_共立機巧_ヘッダー.ai）
   正本実測: FV の上に浮く角丸の白いカード x=10 y=10 w=1346 h=80。
   全幅の帯ではないので、ページ先頭に高さを占有させない。
   ===================================================== */
.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 100px;            /* カード 10+80 + 影ぶんの余白 */
  pointer-events: none;     /* カード外のクリックは下の FV へ通す */
}
.header__inner {
  position: relative;
  width: var(--page-w);
  margin-inline: auto;
  height: 100%;
}
/* 白いカード本体 */
.header__inner::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 1346px;
  height: 80px;
  background: #fff;
  border-radius: 6px;
  pointer-events: auto;
}
.header > .header__inner > * { pointer-events: auto; }

/* 実測 x=35 w=291.8 h=30。height は line-box ではなく画像なので固定してよいが、
   中身があふれないよう object-fit で収める。 */
.header__logo {
  position: absolute;
  left: 35px;
  top: 35px;          /* カード中央: 10 + (80-30)/2 */
  width: 291.8px;
  height: 30px;
  z-index: 1;
  display: block;
  line-height: 0;     /* インライン画像の行送りぶんのはみ出しを消す */
}
.header__logo img { width: 100%; height: 100%; object-fit: contain; }

.gnav { position: absolute; left: 424px; top: 35px; z-index: 1; }
.gnav__list { display: flex; align-items: center; gap: 32px; height: 30px; }
.gnav__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: color .3s ease;   /* 「ふわっと」= 瞬時に切り替えない */
}
.gnav__link:hover,
.gnav__link[aria-current="page"] { color: var(--blue); }

/* SP メニュー内のお問い合わせボタン。PC では出さない */
.gnav__sp-contact { display: none; }

/* 実測: x=1171 y=25 w=170 h=50 */
.header__contact {
  position: absolute;
  left: 1171px;
  top: 25px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 170px;
  height: 50px;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 4px;
  transition: opacity .3s ease;
}
.header__contact:hover { opacity: .82; }
.header__contact .icon { width: 22px; height: 16px; fill: currentColor; flex: none; }

/* ハンバーガー（SP のみ表示） */
.header__burger {
  display: none;
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 44px;
  z-index: 110;
}
.header__burger span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--navy);
  transition: transform .3s ease, opacity .3s ease;
}
.header__burger span:nth-child(1) { top: 15px; }
.header__burger span:nth-child(2) { top: 21px; }
.header__burger span:nth-child(3) { top: 27px; }
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================
   共通パーツ
   ===================================================== */
/* セクション見出し「製品情報  Product」 */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 22px;
}
.sec-head__ja {
  font-size: 38px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .12em;
  line-height: 1.35;          /* 1.2 だと全角の上下が切れる */
}
.sec-head__en {
  font-size: 30px;
  font-weight: 400;
  color: #9AA7B1;
  letter-spacing: .06em;
}

/* 丸ボタン（ネイビー） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 270px;
  height: 64px;
  padding-inline: 34px;
  background: var(--navy);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 999px;
  transition: opacity .3s ease, transform .3s ease;
}
.btn:hover { opacity: .85; }
.btn .chev { width: 9px; height: 15px; flex: none; }
.btn .chev path { stroke: currentColor; stroke-width: 2; fill: none; }
.btn--white { background: #fff; color: var(--navy); }
.btn--center { position: absolute; left: 50%; translate: -50% 0; }

/* =====================================================
   Contact 帯（全ページ共通・フッター直前）
   実測: h=440, bg #344A60, 見出し Contact #85F5ED
   ===================================================== */
.contact-band {
  height: 440px;
  background: var(--navy);
  overflow: hidden;
  text-align: center;
  color: #fff;
}
/* 正本の帯はネイビー地に水のテクスチャを合成済み。
   プレートがそのまま最終の見え方なので、CSS 側で不透明度を足さない。 */
.contact-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-band__inner { position: relative; z-index: 1; }
.contact-band__en {
  position: absolute;
  left: 50%; top: 66px;
  translate: -50% 0;
  font-size: 64px;
  font-weight: 300;
  color: var(--teal);
  letter-spacing: .14em;
  line-height: 1.3;           /* 1 だと descender が切れる */
  white-space: nowrap;
}
.contact-band__ja {
  position: absolute;
  left: 50%; top: 168px;
  translate: -50% 0;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .18em;
  white-space: nowrap;
}
.contact-band__lead {
  position: absolute;
  left: 50%; top: 228px;
  translate: -50% 0;
  font-size: 16px;
  white-space: nowrap;
}
.contact-band .btn { position: absolute; left: 50%; top: 298px; translate: -50% 0; }

/* =====================================================
   フッター（パーツ_共立機巧_フッター.ai 実測 h=1030 のうち可視部）
   ===================================================== */
.footer { background: var(--footer-grey); }
.footer__inner { position: relative; height: 490px; }
.footer__logo { position: absolute; left: var(--content-x); top: 60px; width: 340px; }
.footer__company {
  position: absolute;
  left: var(--content-x);
  top: 128px;
  font-size: 14px;
  line-height: 2.1;
  color: var(--ink);
}
.footer__map {
  position: absolute;
  left: var(--content-x);
  top: 268px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  transition: color .3s ease;
}
.footer__map:hover { color: var(--blue); }
.footer__map .pin { width: 13px; height: 17px; fill: var(--navy); flex: none; }
.footer__contact {
  position: absolute;
  left: var(--content-x);
  top: 318px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding-inline: 22px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 3px;
  transition: opacity .3s ease;
}
.footer__contact:hover { opacity: .82; }
.footer__contact .icon { width: 19px; height: 14px; fill: currentColor; flex: none; }
.footer__rule {
  position: absolute;
  left: 503px; top: 60px;
  width: 1px; height: 320px;
  background: #D5D9DB;
}
.footer__nav { position: absolute; top: 58px; font-size: 15px; }
.footer__nav--1 { left: 585px; }
.footer__nav--2 { left: 805px; }
.footer__nav--3 { left: 1084px; }
.footer__nav-head { margin-bottom: 14px; letter-spacing: .14em; }
.footer__nav-head a { transition: color .3s ease; }
.footer__nav-head a:hover { color: var(--blue); }
.footer__sub li { margin-bottom: 6px; }
.footer__sub a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  transition: color .3s ease;
}
.footer__sub a::before {
  content: "";
  width: 9px; height: 1px;
  background: var(--green);
  translate: 0 -5px;
  flex: none;
}
.footer__sub a:hover { color: var(--blue); }
.footer__policy { margin-top: 44px; }
.footer__policy a { font-size: 14px; transition: color .3s ease; }
.footer__policy a:hover { color: var(--blue); }
.copyright {
  height: 100px;
  display: grid;
  place-items: center;
  background: #fff;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--ink);
}

/* =====================================================
   下層ページ共通のヒーロー（写真 + 半透明のタイトル板）
   正本実測: 写真 1366x585、板 x=0 y=151.5 w=530 h=336
   ===================================================== */
.page-hero {
  position: relative;
  height: 585px;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__plate {
  position: absolute;
  left: 0;
  top: 151.5px;
  width: 530px;
  height: 336px;
  background: rgba(20, 42, 58, .62);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 100px;
}
.page-hero__ja {
  margin: 0;
  font-size: 38px;
  font-weight: 400;
  color: #fff;
  letter-spacing: .14em;
  line-height: 1.3;
}
.page-hero__en {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 400;
  color: var(--teal);
  letter-spacing: .06em;
}

/* パンくず */
.crumb {
  height: 90px;
  display: flex;
  align-items: center;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--ink);
}
.crumb__list { display: flex; align-items: center; gap: 12px; }
.crumb__list li + li::before { content: "/"; margin-right: 12px; color: var(--ink-light); }
.crumb a { transition: color .3s ease; }
.crumb a:hover { color: var(--blue); }

/* 下層ページの共通セクション見出し（左に縦並びのラベル） */
.sec {
  position: relative;
  padding-block: 0;
}
.sec__label {
  font-size: 30px;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: .14em;
  line-height: 1.4;
}

/* =====================================================
   レスポンシブ: 1366px 固定キャンバスを等倍縮小し、
   SP では絶対配置を解除して1カラムに流す
   ===================================================== */
@media (max-width: 1365px) {
  /* タブレット〜小型PC: デザインの比率を保ったまま縮小 */
  .l-inner, .header__inner { width: 100%; }
}

@media (max-width: 900px) {
  :root { --content-x: 20px; }

  /* SP はカードをやめ、全幅の白い固定ヘッダーにする */
  .header { position: sticky; top: 0; height: 64px; background: #fff; pointer-events: auto; }
  .header__inner { width: 100%; }
  .header__inner::before { display: none; }
  /* 高さは固定しない（ロゴの比率で決まる）。固定すると中身があふれる。 */
  .header__logo { left: 16px; top: 20px; width: 190px; height: auto; }
  .header__contact { display: none; }
  .header__burger { display: block; }

  /* 画面外に待機するメニューが横スクロールを作らないよう、
     body 側でクリップする（translate だけではスクロール領域が残る）。 */
  html, body { overflow-x: clip; }
  .gnav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    padding: 88px 24px 40px;
    background: #fff;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .12);
    translate: 100% 0;                 /* 右側からスライドイン */
    transition: translate .35s ease;
    overflow-y: auto;
    z-index: 105;
  }
  .gnav.is-open { translate: 0 0; }
  .gnav__list { display: block; }
  .gnav__list li + li { border-top: 1px solid #E5E8EA; }
  .gnav__link { display: block; padding: 16px 4px; font-size: 15px; }
  .gnav__sp-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 22px;
    background: var(--red);
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
  }
  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    z-index: 104;
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }

  /* 帯の絶対配置を解除して縦積みへ */
  .band { height: auto !important; }
  .band > .l-inner { height: auto; }

  .sec-head { flex-wrap: wrap; gap: 10px; }
  .sec-head__ja { font-size: 26px; }
  .sec-head__en { font-size: 18px; }

  .contact-band { height: auto; padding: 56px 20px 64px; }
  .contact-band__en,
  .contact-band__ja,
  .contact-band__lead,
  .contact-band .btn {
    position: static;
    translate: none;
    white-space: normal;
  }
  .contact-band__en { font-size: 40px; }
  .contact-band__ja { font-size: 22px; margin-top: 8px; }
  .contact-band__lead { font-size: 14px; margin-top: 12px; }
  .contact-band .btn { margin-top: 28px; }

  .footer__inner { height: auto; padding: 48px 20px 40px; }
  .footer__logo,
  .footer__company,
  .footer__map,
  .footer__contact,
  .footer__nav { position: static; }
  .footer__logo { width: 250px; }
  .footer__company { margin-top: 20px; }
  .footer__map { margin-top: 18px; }
  .footer__contact { margin-top: 18px; }
  .footer__rule { display: none; }
  .footer__nav { margin-top: 36px; }
  .footer__policy { margin-top: 24px; }
  .copyright { height: 72px; font-size: 11px; text-align: center; padding-inline: 16px; }

  .page-hero { height: 220px; }
  .page-hero__plate {
    top: auto; bottom: 0;
    width: 100%; height: auto;
    padding: 16px 20px;
  }
  .page-hero__ja { font-size: 22px; }
  .page-hero__en { font-size: 17px; margin-top: 4px; }
  .crumb { height: auto; padding: 16px 20px; font-size: 12px; }
  .sec__label { font-size: 21px; }

  .btn { min-width: 0; width: 100%; max-width: 320px; height: 56px; }
  .btn--center { position: static; translate: none; }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================
   hover のフィードバックを「リンク要素そのもの」に持たせる。
   子要素だけを変えると、リンク全体をポイントしても反応が無いように見える
   （検品の HOVER_NONE）。指示レイヤーの「ふわっと」に合わせ transition 付き。
   ===================================================== */
a { transition: opacity .3s ease, color .3s ease; }
.header__logo:hover,
.pcat a:hover,
.plist__item a:hover,
.nlist__link:hover,
.news__link:hover,
.footer__sub a:hover,
.footer__nav-head a:hover,
.crumb a:hover,
.office__map:hover,
.banner:hover { opacity: .78; }
/* キーボード操作でも同じ手がかりを出す */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }