@charset "utf-8";
/* ==========================================================================
   リア透過フィルム サンプル案内モジュール
   マークアップの正本は /0_parts/parts_sample_rear.php

   /p_rear/ は自前の css/style.css に同じ内容を持っているため、この CSS を
   読み込むのは /p_rear/ 以外のページ（現在は /p_rear-projection/）だけ。
   見た目を /p_rear/ と揃えるため、ルールは同ファイルからそのまま写している。
   ========================================================================== */
.sample {
  margin-top: 5em;
  margin-bottom: 4em;
  padding: 1.6em;
  background-color: #f2f2f2;
}
.sampleTitle {
  position: relative;
  padding: 0.8em 1.5em;
}
.sampleTitle__sub {
  font-size: 24px;
  color: #d50000;
}
.sampleTitle__main {
  color: #000;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.3;
}
.sampleTitle__fig {
  position: absolute;
  bottom: 0;
  right: 15px;
}
.sample__in {
  display: flex;
  justify-content: space-between;
  padding: 1.6em;
  background-color: #fff;
}
.sample__img {
  max-width: 330px;
}
.sample__img p {
  margin-top: 0.5em;
  font-size: 15px;
}
.sample__img p span {
  display: block;
}

/*===========================================================================*/
/*  media quary:767px  */
/*===========================================================================*/
@media screen and (max-width: 767px) {
  .sample {
    margin-top: 3em;
    padding: 1em;
  }
  .sampleTitle {
    padding: 0.8em 4.8em 0.8em 0;
  }
  .sampleTitle__sub {
    font-size: 16px;
    white-space: nowrap;
  }
  .sampleTitle__main {
    font-size: 24px;
  }
  .sampleTitle__main span {
    display: block;
  }
  .sampleTitle__fig {
    right: 0;
  }
  .sampleTitle__fig img {
    max-width: 94px;
  }
  .sample__in {
    flex-wrap: wrap;
    padding: 1em;
  }
  .sample__img:not(:last-of-type) {
    margin-bottom: 1em;
  }
  .sample__img p {
    font-size: 14px;
  }
}