@charset "UTF-8";
/*
# =================================================================
# 製品ラインアップ
# =================================================================*/
.newsContact {
  margin: -300px 0 0 0;
  background: url(../../img/common/bg1.png) no-repeat center top / 100%;
  position: relative;
  overflow: hidden;
}
.newsContact .waveBg {
  width: 100%;
  margin: 0 0 90px 0;
  aspect-ratio: 1920 / 332;
  background: url(../../img/common/wave1.png) no-repeat left top / 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s ease;
}
.newsContact .waveBg.is-show {
  clip-path: inset(0 0 0 0);
}
.product .mv {
  height: calc(100svh - 88px);
  margin: 0 0 88px 0;
  padding: 150px 0 0 200px;
  position: relative;
  top: 88px;
}
.product.xf .mv {
  background: url(../img/xfMvTxt1.svg) no-repeat left 80px top 150px / 50px,
              url(../img/xfMv1.png) no-repeat center top / cover;
}
.product.xp .mv {
  background: url(../img/xpMvTxt1.svg) no-repeat left 80px top 150px / 50px,
              url(../img/xpMv1.png) no-repeat center top / cover;

}
.product .mv .inner {
  width: calc(50% - 80px);
}
.product .mv .inner img {
  width: 150px;
  margin: 0 0 35px 0;
}
.product .mv .inner h2 {
  margin: 0 0 30px 0;
  font-size: 4rem;
  color: #fff;
  line-height: 1;
  letter-spacing: .16em;
}
.product .mv .inner p {
  font-size: 1.6rem;
  color: #fff;
  line-height: 1.9;
  letter-spacing: .1em;
}
.product .features {
  margin: -275px 0 0 0;
  padding: 0 0 400px 0;
  background-image: url(../img/featuresBg1.png),
                    url(../../img/common/bg1.png);
  background-repeat: no-repeat,no-repeat;
  background-position: center 500px,center top;
  background-size: 400px,100%;
  position: relative;
  overflow: hidden;
}
.product .features .waveBg {
  width: 100%;
  margin: 0 0 90px 0;
  aspect-ratio: 1920 / 332;
  background: url(../../img/common/wave1.png) no-repeat left top / 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s ease;
}
.product .features .waveBg.is-show {
  clip-path: inset(0 0 0 0);
}
.product .features .inner {
  max-width: 1366px;
  width: 90%;
  margin: 0 auto;
}
.product .features .inner h2 {
  max-width: 280px;
  width: 100%;
  margin: 0 auto;
}
.product .features .inner p {
  margin: 0 0 60px 0;
  font-size: 1.5rem;
  text-align: center;
  line-height: 2;
  letter-spacing: .06em;
}
.product .features .inner .box1 {
  max-width: 960px;
  width: 100%;
  margin: 0 auto 100px auto;
}
.product .features .inner .box1 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 2%;
}
.product .features .inner .box1 ul li {
  width: 31.33%;
  text-align: center;
}
.product .features .inner .box1 ul li img {
  margin: 0 0 20px 0;
}
.product .features .inner .box1 ul li h3 {
  height: 130px;
  margin: 0 0 20px 0;
  font-size: 2.3rem;
  line-height: 1.6;
  letter-spacing: .14em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product .features .inner .box1 ul li p {
  margin: 0;
  font-size: 1.5rem;
  text-align: left;
  line-height: 1.6;
  letter-spacing: .07em;
}
.product .features .inner .box2 {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 50px 40px;
  position: relative;
  z-index: 1;
}
.product .features .inner .box2::before {
  content: '';
  background: linear-gradient(150deg, #f9fafe, #c8d7ec);
  filter: blur(10px);
  inset: -10px;
  position: absolute;
  z-index: -2;
}
.product .features .inner .box2::after {
  content: '';
  background: #dfe7f2;
  border-radius: 10px;
  inset: 0;
  position: absolute;
  z-index: -1;
}
.product .features .inner .box2 h3 {
  width: 210px;
  margin: 0 auto 50px auto;
  font-size: 2.5rem;
  text-align: center;
  letter-spacing: .16em;
  position: relative;
}
.product .features .inner .box2 h3::before,
.product .features .inner .box2 h3::after {
  content: '';
  width: 7px;
  height: 7px;
  background: #5d5f68;
  border-radius: 50%;
  position: absolute;
  top: 10px;
}
.product .features .inner .box2 h3::before {
  left: 0;
}
.product .features .inner .box2 h3::after {
  right: 0;
}
.product .features .inner .box2 .boxYoutube {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.product .features .inner .box2 .boxYoutube iframe {
  width: 100%;
  aspect-ratio: 800 / 450;
  display: block;
}
.product .lineup {
  margin: -300px 0 0 0;
  padding: 0 0 400px 0;
  background-image: url(../img/lineupBg1.png),
                    url(../../img/common/bg2.png);
  background-repeat: no-repeat,no-repeat;
  background-position: center 500px,center top;
  background-size: 400px,100%;
  position: relative;
  overflow: hidden;
}
.product .lineup .waveBg {
  width: 100%;
  margin: 0 0 30px 0;
  aspect-ratio: 1920 / 332;
  background: url(../../img/common/wave2.png) no-repeat left top / 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s ease;
}
.product .lineup .waveBg.is-show {
  clip-path: inset(0 0 0 0);
}
.product .lineup .inner {
  max-width: 1366px;
  width: 90%;
  margin: 0 auto;
}
.product .lineup .inner h2 {
  max-width: 220px;
  width: 100%;
  margin: 0 auto;
}
.product .lineup .inner table {
  max-width: 960px;
  width: 100%;
  margin: 0 auto 100px auto;
}
.product .lineup .inner table th {
  padding: 20px 25px;
  background: #d5ddea;
  border-right: 1px solid #fff;
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.8;
}
.product .lineup .inner table th:nth-of-type(2) {
  border-right: none;
  text-align: left;
}
.product .lineup .inner table td {
  padding: 20px 25px;
  background: #fff;
  border-right: 1px solid #d5ddea;
  border-bottom: 1px solid #d5ddea;
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.8;
}
.product .lineup .inner table td:nth-of-type(2) {
  border-right: none;
  text-align: left;
}
.product .lineup .inner .boxDownload {
  max-width: 960px;
  width: 100%;
  margin: 0 auto 100px auto;
}
.product .lineup .inner .boxDownload a {
  height: 220px;
  background: url(../img/lineupTxt1.png) no-repeat left 30px top 20px / 105px,
  linear-gradient(to right, #4bb6d6, #61b73a);
  box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.14);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  transition: .3s;
}
.product .lineup .inner .boxDownload a:hover {
  box-shadow: 0 7px 15px 0 rgba(255,255,255,1);
}
.product .lineup .inner .boxDownload a h3 {
  width: 100%;
  margin: 0 0 25px 0;
  font-size: 2rem;
  color: #fff;
  text-align: center;
  letter-spacing: .2em;
}
.product .lineup .inner .boxDownload a h3 img {
  width: 120px;
  margin: 0 10px 0 0;
}
.product .lineup .inner .boxDownload a p {
  width: 100%;
  margin: 0 0 25px 0;
  font-size: 1.5rem;
  color: #fff;
  text-align: center;
  letter-spacing: .06em;
}
.product .lineup .inner .boxDownload a .btn {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  padding: 15px;
  border: 1px solid #fff;
  border-radius: 10px;
  display: block;
  position: relative;
  transition: .3s;
}
.product .lineup .inner .boxDownload a:hover .btn {
  background: #fff;
}
.product .lineup .inner .boxDownload a .btn span {
  font-size: 1.5rem;
  color: #fff;
  text-align: center;
  letter-spacing: .06em;
  display: block;
}
.product .lineup .inner .boxDownload a:hover .btn span {
  background: linear-gradient(to right, #4bb6d6, #61b73a);
  background-clip: text;
  color: transparent;
}
.product .lineup .inner .boxDownload a .btn span::after {
  content: '';
  width: 15px;
  height: 15px;
  background: url(../img/lineupIcon1.png) no-repeat left top / 15px;
  position: absolute;
  top: calc(50% - 8px);
  right: 20px;
  transition: .3s;
}
.product .lineup .inner .boxDownload a:hover .btn span::after {
  background: url(../img/lineupIcon1_o.png) no-repeat left top / 15px;
}
.product .lineup .inner .box1 {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 50px 40px;
  position: relative;
  z-index: 1;
}
.product .lineup .inner .box1::before {
  content: '';
  background: linear-gradient(150deg, #f9fafe, #c8d7ec);
  filter: blur(10px);
  inset: -10px;
  position: absolute;
  z-index: -2;
}
.product .lineup .inner .box1::after {
  content: '';
  background: #dfe7f2;
  border-radius: 10px;
  inset: 0;
  position: absolute;
  z-index: -1;
}
.product .lineup .inner .box1 h3 {
  max-width: 405px;
  width: 100%;
  margin: 0 auto 30px auto;
}
.product .lineup .inner .box1 h4 {
  margin: 0 0 25px 0;
  font-size: 2.5rem;
  color: #868aa2;
  text-align: center;
  letter-spacing: .16em;
}
.product .lineup .inner .box1 p {
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.8;
  letter-spacing: .06em;
}

/*
# =================================================================
# XPシリーズページ
# =================================================================*/



/*
# =================================================================
# レスポンシブ要素
# =================================================================*/
/* 4K:2560px */
@media screen and (min-width: 1921px) {
  .newsContact {
    margin: -400px 0 0 0;
  }
  .product .features {
    margin: -370px 0 0 0;
  }
  .product .lineup {
    margin: -400px 0 0 0;
  }
}
@media screen and (min-width: 1600px) {
  .product .features {
    background-position: center 300px, center top;
  }
  .product .lineup {
    background-position: center 300px, center top;
  }
}
/* PC:1920px */

/* laptop NotePC L */
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1366px) {
  .newsContact {
    background-size: 1366px;
  }
  .newsContact .waveBg {
    width: 1366px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .product .features {
    margin: -210px 0 0 0;
    background-size: 400px, 1366px;
  }
  .product .features .waveBg {
    width: 1366px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .product .lineup {
    background-size: 400px, 1366px;
  }
  .product .lineup .waveBg {
    width: 1366px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 1310px) {
  .product .mv {
    height: calc(100svh - 78px);
    top: 78px;
  }
}
@media screen and (max-width: 1120px) {
  .product .mv {
    padding: 150px 0 0 100px;
  }
  .product.xf .mv {
    background: url(../img/xfMvTxt1.svg) no-repeat left 30px top 150px / 50px,
              url(../img/xfMv1.png) no-repeat center top / cover;
  }
  .product.xp .mv {
    background: url(../img/xpMvTxt1.svg) no-repeat left 30px top 150px / 50px,
              url(../img/xpMv1.png) no-repeat center top / cover;
  }
}

/* laptop NotePC */
@media screen and (max-width: 1024px) {
  .product .features .inner .box1 ul li h3 {
    font-size: 2rem;
  }
  .product .lineup .inner .boxDownload a {
    height: 260px;
    padding: 40px 5% 0 5%;
  }
}

/* tablet */
@media screen and (max-width: 768px) {
  .product .mv {
    height: auto;
    margin: 0 0 78px 0;
    padding: 110vw 0 150px 5%;
    top: 78px;
  }
  .product.xf .mv {
    background: url(../img/xfMvTxt1.svg) no-repeat right top 100vw / 40px,
                url(../img/xfMv1_sp.png) no-repeat center top / 100%;
  }
  .product.xp .mv {
    background: url(../img/xpMvTxt1.svg) no-repeat right top 100vw / 40px,
                url(../img/xpMv1_sp.png) no-repeat center top / 100%;
  }
  .product .mv .inner {
    width: 100%;
    padding: 0 45px 0 0;
  }
  .product .mv .inner h2 {
    font-size: 3rem;
  }
  .product .features {
    margin: -200px 0 0 0;
  }
  .product .features .inner .box1 ul li {
    width: 100%;
    margin: 0 0 30px 0;
  }
  .product .features .inner .box1 ul li h3 {
    height: auto;
  }
  .product .lineup .inner table th {
    display: none;
  }
  .product .lineup .inner table td {
    width: 100%;
    padding: 20px;
    display: block;
  }
  .product .lineup .inner table td:nth-of-type(1) {
    background: #d3dce9;
    text-align: left;
  }
  .product .lineup .inner .boxDownload a {
    height: 320px;
    padding: 50px 5% 0 5%;
  }
  .product .lineup .inner .boxDownload a h3 img {
    margin: 0 0 25px 0;
  }
  .product .lineup .inner .boxDownload a p {
    line-height: 1.8;
  }
}

/* mobile L */
@media screen and (max-width: 480px) {
  .newsContact {
    background-image: url(../../img/common/bg1_sp.png);
    background-size: 100%;
  }
  .newsContact .waveBg {
    width: 100%;
    margin: 0 0 30px 0;
  }
  .product .mv {
    margin: 0 0 57px 0;
    top: 57px;
  }
  .product .mv .inner img {
    margin: 0 0 30px 0;
  }
  .product .mv .inner h2 {
    margin: 0 0 30px 0;
    font-size: 6.9vw;
  }
  .product .mv .inner p {
    font-size: 4vw;
    letter-spacing: .06em;
  }
  .product .features {
    margin: -120px 0 0 0;
    padding: 0 0 160px 0;
    background-image: url(../img/featuresBg1.png),
                      url(../../img/common/bg1_sp.png);
    background-position: center 70px, center top;
    background-size: 240px,100%;
  }
  .product .features .waveBg {
    width: 100%;
    margin: 0 0 30px 0;
  }
  .product .features .inner h2 {
    max-width: 200px;
  }
  .product .features .inner p {
    margin: 0 0 30px 0;
    font-size: 3.7vw;
    text-align: left;
  }
  .product .features .inner .box1 {
    margin: 0 auto 10px auto;
  }
  .product .features .inner .box1 ul li {
    margin: 0 0 30px 0;
  }
  .product .features .inner .box1 ul li img {
    width: 100%;
  }
  .product .features .inner .box1 ul li h3 {
    font-size: 4.6vw;
    letter-spacing: .06em;
  }
  .product .features .inner .box1 ul li p {
    font-size: 3.7vw;
    letter-spacing: .06em;
  }
  .product .features .inner .box2 {
    padding: 35px 20px;
  }
  .product .features .inner .box2 h3 {
    width: 37vw;
    margin: 0 auto 20px auto;
    font-size: 4.8vw;
  }
  .product .features .inner .box2 h3::before,
  .product .features .inner .box2 h3::after {
    width: 5px;
    height: 5px;
    top: 8px;
  }
  .product .lineup {
    margin: -120px 0 0 0;
    padding: 0 0 360px 0;
    background-image: url(../img/lineupBg1.png),
                      url(../../img/common/bg2_sp.png);
    background-position: center 70px, center top;
    background-size: 240px,100%;
  }
  .product .lineup .waveBg {
    width: 100%;
    margin: 0 0 30px 0;
  }
  .product .lineup .inner h2 {
    max-width: 150px;
  }
  .product .lineup .inner table {
    margin: 0 auto 40px auto;
  }
  .product .lineup .inner table td {
    padding: 10px 15px;
  }
  .product .lineup .inner table td:nth-of-type(1) {
    letter-spacing: .06em;
  }
  .product .lineup .inner .boxDownload {
    margin: 0 auto 40px auto;
  }
  .product .lineup .inner .boxDownload a {
    height: auto;
    padding: 80px 5% 30px 5%;
  }
  .product .lineup .inner .boxDownload a h3 {
    font-size: 4.6vw;
  }
  .product .lineup .inner .boxDownload a p {
    font-size: 3.8vw;
  }
  .product .lineup .inner .boxDownload a .btn {
    padding: 15px 45px 15px 15px;
  }
  .product .lineup .inner .boxDownload a .btn span {
    font-size: 3.8vw;
  }
  .product .lineup .inner .box1 {
    padding: 40px 20px;
  }
  .product .lineup .inner .box1 h3 {
    max-width: 270px;
  }
  .product .lineup .inner .box1 h4 {
    font-size: 5.6vw;
  }
  .product .lineup .inner .box1 p {
    font-size: 3.8vw;
  }
}

/* mobile M */
@media screen and (max-width: 375px) {
}

/* mobile S */
@media screen and (max-width: 320px) {
}