@charset "UTF-8";

/* **************************************************

Name: titleStyle.css
Description: CSS for Pages Title Style
Create: 2023.12.07
Update: 

***************************************************** */
@media screen and (max-width: 767px) {
  .JS body {
    background-color: initial;
  }
}

/* PageTitleStyle3
------------------------------------------------------------------------------------------- */
.JS .PageTitleStyle3 {
    height: 300px;
    overflow: hidden;
}

.JS #Contents .PageTitleStyle3 img.Img {
  width: 100%;
}

@media screen and (min-width: 1275px) {
  .JS #Contents .PageTitleStyle3 img.ImgText {
    left: calc((100% - 1275px) / 2);
    max-width: 700px;
    height: 300px;
    object-fit: cover;
  }
}

@media screen and (max-width: 1275px) {
  .JS #Contents .PageTitleStyle3 img.Img {
    height: 300px;
    object-fit: cover;
    object-position: right;
  }
  .JS #Contents .PageTitleStyle3 img.Img.leftAdjust {
    object-position: left;
  }

}

@media screen and (min-width: 995px) {
  .JS #Contents .PageTitleStyle3 img.ImgText.rightAdjust {
    left : initial;
    right: calc((100% - 1275px) / 2);
  }
}

@media screen and (max-width: 994px) {
  .JS #Contents .PageTitleStyle3 img.ImgText.rightAdjust {
    left : initial;
    right: -150px;
  }
}

@media screen and (max-width: 994px) {
  .JS #Contents .PageTitleStyle3 img.ImgText {
    width: auto;
  }
}

@media screen and (max-width: 767px) {
  .JS .PageTitleStyle3 {
    height: auto;
    overflow: visible;
}
  .JS #Contents .PageTitleStyle3 img.Img {
    height: auto;
  }
  .JS #Contents .PageTitleStyle3 img.ImgText {
    height: 100%;
  }
}

@media screen and (max-width: 579px) {
  .JS .PageTitleStyle3 {
    background-color: #fff;
  }

  .JS  #Contents .PageTitleStyle3 img.ImgText {
    display: none;
  }
}