@charset "UTF-8";

.p_prd_other-image img {
 transition: all 0.8s ease;
}
.p_ec_prd {
  position: relative;
}
.p_ec_prd-image {
  height: 101.73333vw;
  min-height: 27.28571rem;
}
.p_ec_prd-header {
  width: 7.28571rem;
  position: absolute;
  top: 14.6789%;
  right: 10.93333%;
  display: block;
}
.p_ec_prd-heading {
  font-feature-settings: "pkna";
  position: relative;
}
.p_ec_prd-heading .-text {
  color: #fff;
  font-size: 4.8vw;
  font-weight: 700;
  display: inline-block;
  margin: 0 0 0 0.57143rem;
  padding: 0.57143rem 0.35714rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
.p_ec_prd-body {
  position: absolute;
  left: 3.73333%;
  bottom: 7.8637%;
  display: block;
}
.p_ec_prd-descript {
  width: 33.86667vw;
  min-width: 9.07143rem;
  padding: 1.07143rem;
}
.p_ec_prd-descript-heading {
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0 0 0.92857rem;
}
.p_ec_prd-descript-heading .-name {
  font-size: 1.5rem;
  font-family: "Pathway Gothic One",sans-serif;
  display: block;
}
.p_ec_prd-descript-heading .-pos {
  font-size: 0.92857rem;
  display: block;
}
.p_ec_prd-descript-text {
  color: #fff;
  line-height: 1.38889;
  font-size: 0.85714rem;
}
.p_prd_container-palet1 .p_prd_container-ec {
  background: url("../images/product/eyecatch_sp.jpg") center top no-repeat;
  background-size: cover;
}
.p_prd_container-palet1 .p_prd_container-bg,
.p_prd_container-palet1 .p_prd_container-bg-bf::before {
  background: #3da71f;
}
.p_prd_container-palet1 .p_prd_container-palet {
  color: #3da71f;
}
.p_prd_container-palet2 .p_prd_container-ec {
  background: url("../images/feature/eyecatch_sp_swift.jpg") center top no-repeat;
  background-size: cover;
}
.p_prd_container-palet2 .p_prd_container-bg,
.p_prd_container-palet2 .p_prd_container-bg-bf::before {
  background: #222222;
}
.p_prd_container-palet2 .p_prd_container-palet {
  color: #222222;
}
.p_prd_container-palet3 .p_prd_container-ec {
  background: url("../images/feature/eyecatch_sp_gr86.jpg") center top no-repeat;
  background-size: cover;
}
.p_prd_container-palet3 .p_prd_container-bg,
.p_prd_container-palet3 .p_prd_container-bg-bf::before {
  background: #222222;
}
.p_prd_container-palet3 .p_prd_container-palet {
  color: #222222;
}
.p_prd_container-palet4 .p_prd_container-ec {
  background: url("../images/product/eyecatch_sp.jpg") center top no-repeat;
  background-size: cover;
}
.p_prd_container-palet4 .p_prd_container-bg,
.p_prd_container-palet4 .p_prd_container-bg-bf::before {
  background: #e5107d;
}
.p_prd_container-palet4 .p_prd_container-palet {
  color: #e5107d;
}
.p_prd_feature-image,
.p_prd_prd-image,
.p_prd_vision-image,
.p_prd_works-image {
  line-height: 0;
}
.media_prd_other .media-header {
  color: #404040;
  padding: 4.28571rem 0 2.14286rem;
}
.media_prd_other .media-body {
  padding: 0 0 2.28571rem;
  position: relative;
}
.media_prd_other .media-body::before {
  content: "";
  display: block;
  width: 100%;
  height: 17.33333vw;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
}
.media_prd .media-inner,
.p_prd_other-list {
  width: 72.72727%;
  margin: 0 auto;
  position: relative;
}
.p_prd_other-image {
  line-height: 0;
  position: relative;
  z-index: -1;
  background: #fff;
  overflow: hidden;
}
.p_prd_other-body {
  min-height: 7.35714rem;
  padding: 1.60714rem 0;
  position: relative;
  background: #fff;
}
.p_prd_other-body-inner {
  width: 81.25%;
  margin: 0 auto;
}
.p_prd_other-tag {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-50%);
  padding: 0.5rem 1.07143rem;
  z-index: 3;
}
.p_prd_other-tag-text {
  font-family: "Pathway Gothic One",sans-serif;
  color: #fff;
  letter-spacing: 0.2em;
  font-size: 0.85714rem;
}
.p_prd_other-text-heading {
  font-size: 0.92857rem;
  font-weight: 700;
}
.p_prd_other-descript {
  font-size: 0.92857rem;
  text-align: right;
  margin: 1.07143rem 0 0;
}
.p_prd_other-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}
.p_prd_other-btn-inner {
  width: 1.28571rem;
  height: 1.28571rem;
  display: block;
  border-color: #fff;
}
.p_prd_other-btn-next {
  right: -11.68224%;
  display: block;
}
.p_prd_other-btn-prev {
  left: -11.68224%;
  display: block;
}
.p_prd_other-btn-palet1 {
  border-color: #2457ab;
}
.media_prd .media-inner {
  width: 100%;
  max-width: 1680px;
}
.p_prd {
  width: 100%;
  position: relative;
  margin: 3.35714rem 0 0;
  background: #fff;
  padding: 3.21429rem 2.14286rem 2.5rem;
}
.p_prd-tag {
  transform: translateY(-50%);
  position: absolute;
  top: 0;
  display: block;
}
.p_prd-tag .-text {
  font-family: "Pathway Gothic One",sans-serif;
  letter-spacing: 0.1em;
  font-size: 2.78571rem;
  display: inline-block;
  line-height: 1;
}
.p_prd-body {
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 0 0;
}
.p_prd-body:first-child {
  padding: 0;
}
.p_prd-header {
  margin: 0 0 1.78571rem;
}
.p_prd-heading {
  font-size: 1.07143rem;
  font-weight: 700;
  line-height: 1.84615;
}
.p_prd-text {
  font-size: 0.92857rem;
}
.p_prd-text p {
  margin: 0 0 1.35714rem;
  line-height: 1.6;
}
.p_prd-text p:last-child {
  margin: 0;
}

.p_contact_top-btn {
  width: 100%;
  padding: 2.64286rem 0;
  text-align: center;
}
.p_contact_top-btn-text {
  font-family: "Pathway Gothic One",sans-serif;
  font-size: 1.3rem;
  color: #fff;
  transition: all 0.3s ease;
}
.p_contact_top-btn {
  background: #222;
  padding: 2rem 0;
  transition: all 0.3s ease;
}
.p_contact_top-btn:hover {
  background: #6e6e6e;
}
.media_contact_top {
  padding: 3.21429rem 0;
  background: #fff;
}

.media_contact_top-pt {
  padding: 3.21429rem 0 0;
}

@media only screen and (max-width:768px) {

  .media_prd_other .media-body {
    background: #2457ab;
  }
  .media_prd {
    padding: 3.78571rem 0 0;
  }
  .media_prd:first-child {
    padding: 4.21429rem 0 0;
  }
  .media_prd-last {
    padding: 3.78571rem 0 2.14286rem;
  }
  .p_prd-tag {
    left: 0;
    right: 0;
    text-align: center;
  }
}
@media only screen and (min-width:769px) {
  .p_ec_prd-inner {
    height: 57.73913vw;
    min-height: 47.42857rem;
    position: relative;
  }
  .p_ec_prd-image {
    width: 100%;
    height: 54.34783vw;
    min-height: 44.64286rem;
    position: absolute;
    left: 0;
    top: 0;
  }
  .p_ec_prd-header {
    width: 12.69565vw;
    right: 50%;
    top: 50%;
  }
  .p_ec_prd-heading .-text {
    font-size: 2.17391vw;
  }
  .p_ec_prd-body {
    left: 8.26087%;
    bottom: 0;
  }
  .p_ec_prd-descript {
    width: 33.95652vw;
    min-width: 13.92857rem;
    padding: 1.78571rem 2rem 2rem;
  }
  .p_ec_prd-descript-heading .-name {
    font-size: 2.14286rem;
  }
  .p_ec_prd-descript-heading .-pos {
    font-size: 1.1rem;
  }
  .p_ec_prd-descript-text {
    font-size: 0.92857rem;
  }
  .p_prd_container-palet1 .p_prd_container-ec {
    background: url("../images/product/eyecatch.jpg") center bottom no-repeat;
    background-size: cover;
  }
  .p_prd_container-palet2 .p_prd_container-ec {
    background: url("../images/feature/eyecatch_swift.jpg") center bottom no-repeat;
    background-size: cover;
  }
  .p_prd_container-palet3 .p_prd_container-ec {
    background: url("../images/feature/eyecatch_gr86.jpg") center bottom no-repeat;
    background-size: cover;
  }
  .p_prd_container-palet4 .p_prd_container-ec {
    background: url("../images/product/eyecatch.jpg") center bottom no-repeat;
    background-size: cover;
  }
  .p_prd_prd {
    padding: 5.92857rem 0 7.35714rem;
  }
  .p_prd_prd-inner {
    width: 100%;
    height: 56.44531vw;
    min-height: 41.28571rem;
    max-height: 56.42857rem;
    position: relative;
  }
  .p_prd_prd-image {
    width: 64.35547%;
    position: relative;
    z-index: 1;
  }
  .p_prd_prd-image::before,
  .p_prd_vision-image::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 9.20245%;
  }
  .p_prd_prd-image::before {
    left: 5.31108%;
    z-index: 0;
  }
  .p_prd_prd-body {
    width: 53.22266%;
    right: 0;
    bottom: 0;
    z-index: 2;
    position: absolute;
  }
  .p_prd_prd-tag {
    right: 3.66972%;
  }
  .p_prd_works-body {
    width: 73.97461%;
    margin: 0 auto;
    transform: translateY(-30%);
  }
  .p_prd_works-tag {
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
    padding: 0 3.21429rem;
    left: 0;
    right: 0;
  }
  .p_prd_vision {
    padding: 0 0 7.85714rem;
  }
  .p_prd_vision-inner {
    width: 100%;
    height: 47.3913vw;
    min-height: 38.92857rem;
    max-height: 53.21429rem;
    position: relative;
  }
  .p_prd_vision-image {
    width: 64.35547%;
    z-index: 1;
    right: 0;
    bottom: 6.88073%;
    position: absolute;
  }
  .p_prd_vision-image::before {
    right: 5.31108%;
    z-index: -1;
  }
  .p_prd_vision-body {
    width: 56.15234%;
    position: relative;
    z-index: 2;
  }
  .p_prd_vision-tag {
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
    padding: 0 3.21429rem;
    left: 0;
    right: 0;
  }
  .p_prd_feature-body {
    width: 73.97461%;
    margin: 0 auto;
    transform: translateY(-10%);
  }
  .p_prd_feature-tag {
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
    padding: 0 3.21429rem;
    left: 0;
    right: 0;
  }
  .p_prd_other:hover .p_prd_other-image img {
    transform: scale(1.04);
  }
  .p_prd_other-list {
    width: 100%;
  }
  .p_prd_other-list-item {
    width: 30%;
    padding: 0 1.42857rem;
  }
  .p_prd_other-body {
    min-height: 8rem;
  }
  .p_prd_other-body-inner {
    width: 100%;
    padding: 0 1.42857rem;
  }
  .p_prd_other-btn {
    top: 40%;
    transform: translateY(0);
  }
  .p_prd_other-btn-next {
    right: -2%;
  }
  .p_prd_other-btn-prev {
    left: -2%;
  }
  .p_prd {
    padding: 4.64286rem 3.21429rem 5rem;
  }
  .p_prd-tag .-text {
    font-size: 2.71429rem;
  }
  .p_prd-body {
    max-width: 600px;
  }
}
@media only screen and (max-width:378px) {
  .p_ec_prd-heading .-text {
    font-size: 1.14286rem;
  }
}
