@charset "UTF-8";
/**　mv **/
.mainvisual {
  /*overflow: hidden;*/
  padding-bottom: 30px;
  margin-bottom: 100px; }
  .mainvisual .main-slider .slideItem {
    width: 100%;
    height: 700px;
    max-height: 80vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center; }
  .mainvisual .main-slider video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    min-height: 100%; }
  .mainvisual .main-slider img {
    width: 100%;
    margin: 0 auto;
    object-fit: cover;
    transition: all .3s ease; }

.slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  border: 30px;
  margin: auto;
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
  margin-top: 6px;
  z-index: 1; }

.slick-dots li {
  margin: 5px; }

.slick-dots button {
  width: 10px;
  height: 10px;
  background-color: #DBDBDB;
  border-radius: 50%;
  overflow: hidden;
  text-indent: -150%;
  cursor: pointer; }

.slick-active button {
  background-color: #568FCC;
  color: #fff; }

.slick-arrow {
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  text-indent: -150%;
  filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0px 0px 4px rgba(73, 73, 73, 0.64));
  transition: all .3s ease;
  z-index: 1; }
  .slick-arrow:hover {
    opacity: .7; }
  .slick-arrow.prev {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 60px;
    height: 60px;
    background: url("/image/icon_arrow_w.svg") center center no-repeat;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 50px;
    transform: scale(-1, 1); }
  .slick-arrow.next {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 60px;
    height: 60px;
    background: url("../image/icon_arrow_w.svg") center center no-repeat;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 50px; }

/**　 共通 **/
h2 {
  font-size: 40px;
  font-weight: normal;
  text-align: center;
  margin-bottom: 1em; }

p {
  text-align: justify;
  text-justify: inter-ideograph; }

dt, dd {
  text-align: justify;
  text-justify: inter-ideograph; }

/**　intro **/
section.intro {
  margin-bottom: 180px; }
  section.intro h2 {
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em; }
  section.intro p {
    font-size: 22px;
    width: 80%;
    margin: 0 auto;
    line-height: 2; }
    section.intro p:not(:first-child) {
      margin-bottom: 2em; }

/**　business **/
.parallax-mirror {
  display: block; }

section.business li {
  color: #fff;
  height: calc(100vh - 70px); }
  section.business li > div {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center; }
  section.business li:nth-child(even) > div {
    justify-content: flex-start; }
  section.business li dl {
    width: 60%;
    background: rgba(0, 0, 0, 0.3);
    padding: 46px; }
    section.business li dl dt .badge {
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background: url("/image/icon_odm_w.svg") center center no-repeat;
      background-size: 100px 100px;
      overflow: hidden;
      text-indent: -250%; }
    section.business li dl dd {
      font-size: 20px;
      line-height: 1.6; }
      section.business li dl dd .btnWrap {
        margin-top: 1.4em; }

/** company **/
.company > div {
  position: relative; }
  .company > div a {
    color: #fff;
    font-size: 24px;
    text-align: center;
    display: block;
    width: 100%;
    padding: 12px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); }
    .company > div a span {
      display: inline-block;
      padding: 12px 46px 12px 12px;
      background: url("/image/icon_arrow_cWhite.svg") right center no-repeat;
      background-size: 30px 30px; }

/** recruit **/
.recruit .innerWrap {
  padding: 100px 0;
  background: url("/image/top/img_recruit.png") right bottom no-repeat;
  background-size: 520px auto; }

.recruit h2 {
  text-align: left;
  margin-bottom: 16px; }

.recruit h2 + p {
  font-size: 20px;
  line-height: 1.4;
  position: relative;
  margin-bottom: 50px; }
  .recruit h2 + p::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    height: 1px;
    width: 80px;
    background: #000; }

.recruit .recInfo {
  width: 50%; }
  .recruit .recInfo p {
    font-size: 18px;
    margin-bottom: 1em; }
  .recruit .recInfo .btnWrap {
    margin-top: 50px; }

@media screen and (min-width: 1200px) {
  /** ヘッダ **/ }
@media screen and (max-width: 768px) {
  /**　mv **/
  .mainvisual {
    padding-bottom: 0;
    margin-bottom: 80px; }
    .mainvisual .main-slider .slideItem {
      width: 100%;
      height: auto; }
    .mainvisual .main-slider video {
      position: inherit;
      width: 100%;
      min-height: inherit;
      top: 0;
      left: 0;
      transform: translateX(0) translateY(0); }

  .slick-arrow.prev {
    top: 0;
    width: 40px;
    height: 40px;
    background: url("/image/icon_arrow_w.svg") center center no-repeat;
    background-size: auto 40px; }
  .slick-arrow.next {
    width: 40px;
    height: 40px;
    background-size: auto 40px; }

  /**　 共通 **/
  h2 {
    font-size: 30px; }

  /**　intro **/
  section.intro {
    margin-bottom: 70px; }
    section.intro h2 {
      font-size: 26px;
      line-height: 1.4;
      margin-bottom: 1.4em; }
    section.intro p {
      font-size: 16px;
      width: 90%; }
      section.intro p:not(:first-child) {
        margin-bottom: 2em; }

  /**　business **/
  .parallax-mirror {
    display: none; }

  section.business li {
    color: #343434;
    height: auto;
    padding-top: calc(100%*778/1920); }
    section.business li > div {
      height: auto;
      display: block; }
    section.business li:nth-child(even) > div {
      justify-content: flex-start; }
    section.business li dl {
      width: 100%;
      background: none;
      padding: 30px 0; }
      section.business li dl dt .badge {
        width: 60px;
        height: 60px;
        background: url("/image/icon_odm_b.svg") center center no-repeat;
        background-size: 60px 60px;
        text-indent: -300%; }
      section.business li dl dd {
        font-size: 14px;
        line-height: 1.6; }
        section.business li dl dd .btnWrap {
          margin-top: 1.4em; }
        section.business li dl dd a.boxBtn {
          border: 2px solid #333; }
          section.business li dl dd a.boxBtn.white {
            color: #333; }
            section.business li dl dd a.boxBtn.white::after {
              background: url(/image/icon_arrow_b.svg) center no-repeat; }

  section.business .aero {
    background-image: url("/image/top/bg_aero.jpg");
    background-position: left top !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat; }

  section.business .prop {
    background-image: url("/image/top/bg_prop.jpg");
    background-position: left top !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat; }

  section.business .chem {
    background-image: url("/image/top/bg_chem.jpg");
    background-position: left top !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat; }

  /** company **/
  .company > div .comImg {
    width: 100%;
    height: auto;
    object-fit: cover; }
  .company > div a {
    position: inherit;
    font-size: 20px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.6); }
    .company > div a span {
      padding: 24px;
      padding-right: 46px;
      background: url("/image/icon_arrow_cWhite.svg") right center no-repeat;
      background-size: 30px 30px; }

  /** recruit **/
  .recruit .innerWrap {
    padding: 40px 0 100px;
    background: url("/image/top/img_recruit.png") right 102% no-repeat;
    background-size: auto 180px; }

  .recruit h2 {
    text-align: left;
    margin-bottom: 16px; }

  .recruit h2 + p {
    font-size: 16px;
    margin-bottom: 30px; }

  .recruit .recInfo {
    width: 100%; }
    .recruit .recInfo p {
      font-size: 14px;
      margin-bottom: 1em; }
    .recruit .recInfo .btnWrap {
      margin-top: 30px;
      justify-content: flex-start; }
      .recruit .recInfo .btnWrap .boxBtn {
        width: 50%; } }