@charset "UTF-8";
/* ************************************************
 *	書体・文字の大きさ・余白（2026-10-01）
 *
 *	参考: https://re-presentation.jp/ の実測値（パソコン 1100px 幅・スマホ 390px 幅）にピクセル単位で合わせる。
 *	inc/head.php が全ページで最後に読み込む。元に戻すときは head.php の $css[] = 'type'; を外す。
 *
 *	本文          15px / 行間 31.5px / 字間 0.6px / #151619
 *	大見出し      40px / 60px / 5.6px / 500（スマホ 26px / 39px / 3.64px）  … 事例名・実績一覧のグループ名
 *	項目の見出し  24px / 38.4px / 2.4px（スマホも同じ） … 業務紹介のサービス名など
 *	ボタン        12px / 24px / 3.6px
 *	セクション    上下 160px・64px / 左右 44px（スマホ 20px） / 文章の幅 最大 600px
 *	書体（2026-10-01 ユーザー指示）：日本語 IBM Plex Sans JP（見出し・本文とも 300）、本文の英数字 Inter、
 *	見出しの英文（装飾）は Adobe Fonts の DIN Condensed / Oswald（head.php の $typekit_id。未導入の間は Google の Oswald）
 * ************************************************ */

/* ---- 本文 ---- */
body {
  font-family: "Inter", "IBM Plex Sans JP", sans-serif;   /* 英数字は Inter、日本語は IBM Plex Sans JP */
  font-weight: 300;                 /* 本文 300 */
  font-size: 15px;
  letter-spacing: 0.6px;
  color: #151619;
}
p,
li {
  line-height: 31.5px;
}

/* ---- 見出しはすべて 300 ---- */
h1, h2, h3, h4, h5, h6,
.heading,
hgroup.heading,
hgroup.heading > h2,
.case__title,
.copy,
.page-head__name {
  font-weight: 300;
}
.works-card__title,
.check,
.btn {
  font-weight: 300;
}

/* ---- 見出し・ボタンは語の途中で折り返さない（空白・「/」・「・」で折り返す。入りきらないときだけ途中で折る） ---- */
.heading,
hgroup.heading,
.copy,
.case__title,
.works-card__title,
.page-head__name,
.btn,
.case__back a {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.nowrap {                           /* 製品名（Type-L/H など）を「-」で折り返さない */
  white-space: nowrap;
}

/* ---- 項目の見出し（業務紹介・TOP のサービス名など） ---- */
.heading,
hgroup.heading {
  font-size: 24px;
  line-height: 38.4px;
  letter-spacing: 2.4px;
  margin-bottom: 60px;              /* 下の短いライン（-20px）＋ 40px */
}
.caption,
.case__caption {                    /* 英語の飾り（お試し 2026-10-01）：Oswald Light 300・16px・本文と同じ色、字間は見出しと同じ 0.1em */
  font-family: "oswald", "Oswald", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 1.6px;
  color: #151619;
}
.copy {
  font-size: 24px;
  line-height: 38.4px;
  letter-spacing: 2.4px;
}
.service-columns h3 {
  font-size: 15px;
  line-height: 31.5px;
}

/* ---- 大見出し（事例名・実績一覧のグループ名） ---- */
.case__title,
.works hgroup.heading {
  font-size: 40px;
  line-height: 60px;
  letter-spacing: 5.6px;
}

/* ---- ボタン ---- */
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:active,
.btn:focus,
.case__back a {
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 3.6px;
}

/* ---- セクションの余白（業務紹介・TOP） ---- */
#flex_2col {
  margin: 0;
  padding: 32px 44px;                /* 上下 32px（2026-10-02 見出し帯との間を 160px から縮める。文章を上下中央にそろえているため見た目は約 50px） */
}
#flex_2col .text-content {
  max-width: 600px;
  font-size: 15px;
  line-height: 31.5px;
}
#service {
  padding: 64px 0 160px;
}
.service-columns {
  margin: 0 44px;
}
.service-columns + .service-columns {
  margin-top: 64px;
}
#service2 {
  padding: 160px 44px;
}
#service2 h2 {
  margin-left: 0;
}
#service2 .service-columns {
  margin: 0;
}
#features {
  margin: 0;
  padding: 160px 44px;
}

/* ---- セクションの余白（事例・実績一覧・その他のページ） ---- */
.case-page {
  padding: 64px 44px 160px;
}
.works {
  padding: 64px 44px 160px;
}
.works-group {
  margin-bottom: 160px;
}
.works-group:last-of-type {
  margin-bottom: 64px;
}
#contentbody:not(:has(#flex_2col)) {   /* 会社概要・お問い合わせ・計測支援機器・W-series など */
  margin: 0;
  padding: 64px 44px 160px;
}
#contentbody:not(:has(#flex_2col)) #maincol {
  padding-left: 0;
  padding-right: 0;
}

/* ************************************************
 *	スマホ（幅 767px 以下）
 * ************************************************ */
@media (max-width: 767px) {
  .case__title,
  .works hgroup.heading {
    font-size: 26px;
    line-height: 39px;
    letter-spacing: 3.64px;
  }
  #flex_2col {
    padding: 32px 20px;
  }
  .service-columns {
    margin: 0 20px;
  }
  #service2,
  #features,
  .case-page,
  .works,
  #contentbody:not(:has(#flex_2col)) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ************************************************
 *	テキストの表示モーション（js/reveal.js、2026-10-02）
 *	参考: https://re-presentation.jp/work.html
 *	見出し：左からのワイプ 1 秒／本文・リスト：14px 浮き上がりながらフェードイン 0.8 秒
 *	html.js が付いたとき（JS が動いたとき）だけ隠す。動きを減らす設定の人には動かさない
 * ************************************************ */
html.js [data-rv] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s cubic-bezier(.22, .7, .3, 1) var(--d, 0s),
              transform .8s cubic-bezier(.22, .7, .3, 1) var(--d, 0s);
}
html.js [data-rv].in {
  opacity: 1;
  transform: none;
}
html.js [data-rv="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(-40px 100% -40px 0);     /* 上下は見出し下の短いラインまで含めるため広めに */
  transition: clip-path 1s cubic-bezier(.22, .7, .3, 1) var(--d, 0s);
}
html.js [data-rv="wipe"].in {
  clip-path: inset(-40px -40px -40px 0);
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-rv],
  html.js [data-rv="wipe"] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}