@charset "UTF-8";
/* ------------------------------------------------------------------
   多言語版LPの上書きスタイル（自動生成: build/lp-i18n/build.py）
   共用の ../../../lp/micromachining/css/style.css を読み込んだ後に適用する。
   日本語版のCSSには一切手を入れていない。
   ------------------------------------------------------------------ */

/* ---- 言語別のフォントと折り返し ---- */
/* 見出しが右の写真に重ならない大きさ（実測値から算出。詳細は build.py の MV_TITLE_PX）*/
.mv__slide-title {
  font-size: 62px;
}
@media screen and (max-width: 1440px) {
  .mv__slide-title {
    font-size: 4.306vw;
  }
}
@media screen and (max-width: 767px) {
  /* スマホは写真が下に回り込むので重ならない。ただし繁体字は
     11.79vw だと「越是我們的專長。」が「專／長。」に割れるので少しだけ詰める */
  .mv__slide-title {
    font-size: 11.7948717949vw;
  }
}
/* 大きい相談ボタンの黒い枠は幅162px。"Free consultation" は24pxでは入らないので
   2行に落として収める（無料なのが「相談」であることを明示するため短縮しない） */
.consultation__btn-sub {
  font-size: 19px;
  line-height: 1.25;
  text-align: center;
  padding: 0 10px;
}
/* 設備数の円（直径270px）に収める。英語は見出しが長い。
   台数の対象が分かるよう見出しを機器名にしたので、その分小さくする */
.problem04__title {
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  padding: 0 26px;
}
:root {
  /* style.css が読み込んでいる Roboto をそのまま使う */
  --font-jp: "Roboto", "Helvetica Neue", Arial, sans-serif;
}
/* 共用CSSは全体に word-break: break-word を掛けている。日本語なら問題ないが
   ラテン文字では単語が途中で割れるので、通常の単語区切りに戻す */
*, *:before, *:after {
  word-break: normal;
  overflow-wrap: break-word;
}

/* ---- 言語切替バー（多言語版のみ。日本語ページには置いていない） ---- */
.langbar {
  background: #f2f2f2;
  border-bottom: 1px solid #e3e3e3;
}
.langbar__list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 35px;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  font-size: 13px;
  line-height: 1.6;
}
.langbar__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.langbar__item + .langbar__item::before {
  content: "/";
  color: #b7b7b7;
  margin: 0 10px;
}
.langbar__link {
  color: #333;
  text-decoration: none;
}
.langbar__link:hover {
  color: var(--color-main);
  text-decoration: underline;
}
.langbar__current {
  color: var(--color-main);
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .langbar__list {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 6px 12px;
    font-size: 12px;
  }
  .langbar__item + .langbar__item::before {
    margin: 0 8px;
  }
}

/* メインビジュアルのリード文。日本語より長くなると右の写真の下に潜るので、
   写真の斜辺に掛からない幅で折り返させる（PCレイアウトのみ） */
@media screen and (min-width: 768px) {
  .mv__slide-text {
    max-width: 430px;
  }
}

/* スマホでは各カードの右下に矢印アイコンが重なる。日本語は1行で収まるが
   文字数が増える言語では2行目が矢印の下に潜るので、右側に逃げを作る */
@media screen and (max-width: 767px) {
  .trouble__item-text,
  .header__menu-item-text,
  .problem01Sp-navi__link {
    padding-right: 9vw;
  }
}

/* ---- 文字数が増えても箱から出ないようにする ----
   日本語より字数が増える言語では、高さ固定のボックスで文字が切れる。
   高さを min-height に緩めて、上下の余白で受けるようにする。 */
.problem01__navi-link {
  height: auto;
  min-height: 70px;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.4;
}
.problem__title-text {
  line-height: 1.25;
}
.trouble__item-text,
.header__menu-item-text {
  line-height: 1.35;
}
.problem01__answer-spec__title {
  line-height: 1.35;
}
.problem02__table td,
.problem02__table th {
  line-height: 1.5;
}
.mailform-area th {
  line-height: 1.5;
}
.privacy-box__text {
  line-height: 1.8;
}