@charset "UTF-8";
/*
  ミッションページ専用（inc/head.php が page id = mission のときだけ読む）
*/

/* ==========================================================
   ミッション本文：黒いタイヤ跡の背景（TOP の .top-dark と同じ敷き方）
   PC（1100px〜）は六角形の写真 4 枚を左右に絶対配置。
   位置・大きさはデザイン（1280px 幅）の値を vw に換算し、1280px より広い画面は px で固定（左右の端に寄せたまま）
   ========================================================== */
.msn-sec {
  position: relative;
  overflow: hidden;
  padding: 90px 0 100px;
  background: #1c1c1c url(../images/common/bg_black.jpg) repeat-y center top;
  /* WebP 対応ブラウザは WebP（IE11 は image-set を知らないので上の JPG のまま） */
  background-image: -webkit-image-set(url(../images/common/bg_black.webp) type("image/webp"), url(../images/common/bg_black.jpg) type("image/jpeg"));
  background-image: image-set(url(../images/common/bg_black.webp) type("image/webp"), url(../images/common/bg_black.jpg) type("image/jpeg"));
  background-size: 1400px auto;
  color: #fff;
}
@media (min-width: 1401px) {
  .msn-sec {
    background-size: 100% auto;
  }
}

/* ---------- 文章（中央） ---------- */
.msn-body {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  margin: 0 auto;
  text-align: center;
}
.msn-title {
  letter-spacing: 0.1em;
}
.msn-text {
  margin-top: 22px;
  font-size: 19px;
  font-size: clamp(15px, 12.69px + 0.616vw, 19px); /* SP 15px 〜 PC 19px */
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.08em;
}
.msn-title + .msn-text {
  margin-top: 26px;
}
.msn-slogan {
  margin-top: 50px;
}
.msn-slogan img {
  display: inline-block;
  width: 360px;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* ---------- 六角形の写真（透過 PNG） ---------- */
.msn-photo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1100px) {
  .msn-photo {
    position: absolute;
  }
  /* 左上：タイヤ交換の作業（左端は画面の端で切れる形） */
  .msn-photo--01 {
    top: 0;
    left: 0;
    width: 21.8vw;   /* 279px */
  }
  /* 左下：タイヤチェンジャーの作業 */
  .msn-photo--02 {
    top: 23.3vw;     /* 298px */
    left: 11.8vw;    /* 151px */
    width: 14.1vw;   /* 181px */
  }
  /* 右下：トラックの前の 2 人 */
  .msn-photo--03 {
    top: 16.3vw;     /* 209px */
    right: 5.2vw;    /* 66px */
    width: 18.9vw;   /* 242px */
  }
  /* 右上：タイヤの前の後ろ姿 */
  .msn-photo--04 {
    top: 3.2vw;      /* 41px */
    right: 3vw;      /* 38px */
    width: 11.1vw;   /* 142px */
  }
}
@media (min-width: 1281px) {
  .msn-photo--01 { width: 279px; }
  .msn-photo--02 { top: 298px; left: 151px; width: 181px; }
  .msn-photo--03 { top: 209px; right: 66px; width: 242px; }
  .msn-photo--04 { top: 41px; right: 38px; width: 142px; }
}

/* ---------- タブレット・SP（〜1099px）：文章の下に写真を 2 列で。右の列は少し下げて蜂の巣風に ---------- */
@media (max-width: 1099px) {
  .msn-sec {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;

    padding: 60px 0 70px;
  }
  .msn-photos {
    -ms-flex-order: 2;
    order: 2;
    width: calc(100% - 40px);
    max-width: 560px;
    margin: 40px auto 0;
    font-size: 0; /* inline-block の隙間を消す */
    text-align: center;
  }
  .msn-photo {
    display: inline-block;
    width: 46%;
    margin: 0 2%;
    vertical-align: top;
  }
  /* 右の列を下げ、2 段目を上へ詰めて六角形どうしを近づける */
  .msn-photo--02 {
    margin-top: 14%;
  }
  .msn-photo--03 {
    margin-top: -12%;
  }
  .msn-photo--04 {
    margin-top: 2%;
  }
}
@media (max-width: 767px) {
  .msn-title + .msn-text {
    margin-top: 20px;
  }
  .msn-text {
    margin-top: 16px;
    letter-spacing: 0.05em;
  }
  .msn-slogan {
    margin-top: 36px;
  }
  .msn-slogan img {
    width: 260px;
  }
}

/* ==========================================================
   より安心してご依頼いただくために：白い箱（デザイン 1280px 幅で箱の幅 1066px）
   左に写真（250px）、右に緑の小見出し＋説明。動画がある項目は写真の上に動画を重ねて流す
   ========================================================== */
.msn-safety {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: 1066px;
  margin: 100px auto 0; /* PC：左下の六角形の写真より下から始める */
  padding: 58px 60px 72px 70px;
  background: #fff;
  color: #333333;
}
/* 見出し：緑の文字に黄色の蛍光ペン（下半分） */
.msn-safety-title {
  color: #239615;
  text-align: center;
  letter-spacing: 0.05em;
}
.msn-safety-title span {
  background: linear-gradient(transparent 55%, #f6f59c 55%);
}
.msn-safety-list {
  margin-top: 34px;
}
.msn-safety-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}
.msn-safety-item + .msn-safety-item {
  margin-top: 40px;
}
.msn-safety-img {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 250px;
}
.msn-safety-img img {
  display: block;
  width: 100%;
  height: auto;
}
/* 動画は写真と同じ比率に切り抜いてあるので、写真の上にぴったり重ねる（object-fit 不要＝IE11 も同じ見た目） */
.msn-safety-movie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 右の文章：IE11 は flex: 1 だと折り返さないことがあるので幅を calc で決める */
.msn-safety-body {
  width: calc(100% - 279px);
  margin-left: 29px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.1em;
  font-feature-settings: "palt"; /* 「」や句読点の空きを詰める（デザインの字詰めに近づける） */
}
.msn-safety-head {
  margin: 4px 0 6px;
  color: #239615;
  font-size: 20px;
  font-size: clamp(17px, 15.27px + 0.462vw, 20px); /* SP 17px 〜 PC 20px */
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 1099px) {
  .msn-safety {
    -ms-flex-order: 3;
    order: 3;
    margin-top: 60px;
    padding: 48px 40px 56px;
  }
}
/* SP：写真を上、文章を下に縦に並べる */
@media (max-width: 767px) {
  .msn-safety {
    padding: 36px 20px 40px;
  }
  .msn-safety-list {
    margin-top: 26px;
  }
  .msn-safety-item {
    display: block;
  }
  .msn-safety-item + .msn-safety-item {
    margin-top: 32px;
  }
  .msn-safety-img {
    width: 100%;
  }
    .msn-safety-body {
    width: auto;
    margin: 14px 0 0;
  }
  .msn-safety-head {
    margin-top: 0;
    font-size: 17px;
  }
}