@charset "utf-8";

/* dx-top */

.smp-b-lyt-kv-dx h1 {
  opacity: 0;
  scale: 1;
}

.smp-b-lyt-kv-dx {
  display: grid;
  place-items: center;
  height: 50vh;
  padding: 1em;
  background: url(/dx/assets/img/img-kv-dx-top-01.webp) no-repeat center;
  background-size: cover;
  position: relative;
}

.smp-b-lyt-kv-dx::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 1;
}

.smp-b-lyt-kv-dx h1 {
  font-size: 60px;
  color: #fff;
  letter-spacing: 0.07em;
  line-height: 1.4;
  z-index: 2;
}

.smp-scrolldown {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  left: 50%;
  bottom: 10px;
  /*全体の高さ*/
  height: 50px;
  opacity: 0;
}

/*Scrollテキストの描写*/
.smp-scrolldown span {
  /*描画位置*/
  position: absolute;
  left: -15px;
  top: -15px;
  /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* 線の描写 */
.smp-scrolldown::after {
  content: "";
  /*描画位置*/
  position: absolute;
  top: 0;
  /*線の形状*/
  width: 1px;
  height: 30px;
  background: #eee;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 30px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 50px;
    opacity: 0;
  }
}

/* .smp-c-lyt-dx-pc {
  display: block;
  margin: 0 auto;
  width: 80%;
} */


.smp-c-box-content-01{
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 30px;

  border: 3px solid #007a4c;
}


@media screen and (min-width: 1280px) {
  .smp-c-lyt-dx-pc {
    display: block;
    margin: 0 auto;
    width: 80%;
  }
}

.smp-c-lyt-glid {
  display: grid;
  place-items: center;
}

@media screen and (max-width: 769px) {
  .smp-c-lyt-glid.smp-lyt-top-sp {
    height: 30vh;
  }
}


.font-small {
  display: block;
  font-size: 70%;
  text-align: center;
}

.smp-c-bg-media-01 {
  background: url(/dx/assets/img/bg-top-01.webp) no-repeat center;
  background-size: contain;
}

.smp-c-lyt-block01 {
  border-bottom: 3px solid #007a4c;
  margin-bottom: 3em;

  /* background-image: linear-gradient(
    132deg,
    rgba(255, 255, 255, 1),
    rgba(194, 255, 233, 0.5)
  ); */
}

.smp-lyt-column-dx {
  margin-right: 1em;
  margin-left: 1em;
  padding-top: 0.3em;
  padding-bottom: 2em;
}

@media screen and (max-widht: 1280px) {
}

.section {
  margin-top: 90px;
}


.c-img-wrap-01._smp-dx1:before,
.c-img-wrap-02._smp-dx1:before {
  background-image: url(/dx/assets/img/bg-sec005.webp);
}
@media screen and (max-width: 768px) {
  .c-img-wrap-01._smp-dx1:before,
  .c-img-wrap-02._smp-dx1:before {
    background-image: url(/dx/assets/img/bg-sec005.webp);
  }
}


.c-img-wrap-01._smp-dx2:before,
.c-img-wrap-02._smp-dx2:before {
  background-image: url(/dx/assets/img/bg-sec003.webp);
}
@media screen and (max-width: 768px) {
  .c-img-wrap-01._smp-dx2:before,
  .c-img-wrap-02._smp-dx2:before {
    background-image: url(/dx/assets/img/bg-sec003.webp);
  }
}

.c-img-wrap-01._smp-dx3:before,
.c-img-wrap-02._smp-dx3:before {
  background-image: url(/dx/assets/img/bg-sec003.webp);
}
@media screen and (max-width: 768px) {
  .c-img-wrap-01._smp-dx2:before,
  .c-img-wrap-02._smp-dx2:before {
    background-image: url(/dx/assets/img/bg-sec003.webp);
  }
}

.smp-icon-check-inline {
  height: 3rem;
  vertical-align: middle;
  margin-right: 0.78125vw;
  margin-top: -1.041666666666667vw;
}

@media screen and (max-width: 768px) {
  .smp-icon-check-inline {
    height: 2.5rem;
    vertical-align: middle;
    margin-right: 0.78125vw;
    margin-top: -1.041666666666667vw;
  }
}

.m-panel-nav-list-01 > li {
  display: flex;
  flex-direction: column;
}

.m-panel-nav-list-01 > li .smp-text {
  flex-grow: 1;
  padding-bottom: 20px;
}

.smp-btn {
  margin-top: auto;
  padding-bottom: 9%;
}

/* dx01 */

.dx_inner {
  display: block;
  display: none;
}

@media screen and (max-width: 768px) {
  .dx_inner {
    display: block;
    position: relative;
    width: 30%;
  }
}

@media screen and (max-width: 768px) {
  .dx_inner {
    content: "";
    position: absolute;
    z-index: 10;
  }
}

.dx_back_end {
  display: block;
  display: none;
}

@media screen and (max-width: 768px) {
  .dx_back_end {
    display: block;
    margin-top: 30px;
    width: 30%;
  }
}

.smp-c-img-wrap-kv01 {
  background: url(/dx/assets/img/bg-sec005.webp) no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 769px) {
  .smp-c-img-wrap-kv01 {
    background: url(/dx/assets/img/bg-sec005.webp) no-repeat center center;
    background-size: cover;
  }
}

.smp-c-img-wrap-bg01 {
  background: url(/dx/assets/img/bg-dx01-1-2.webp) center center;
  background-size: cover;
  border-radius: 10px;
}

.smp-c-img-wrap-bg02 {
  background: url(/dx/assets/img/bg-dx01-2.webp) no-repeat center center;
  background-size: cover;
  border-radius: 10px;
}

.smp-c-img-wrap-bg03 {
  background: radial-gradient(
    circle,
    rgba(115, 248, 224, 0.3) 60%,
    rgba(150, 167, 241, 0.3)
  );
  border-radius: 10px;
}

/* dx02 */

.smp-c-img-wrap-kv02 {
  background: url(/dx/assets/img/bg-sec003.webp) no-repeat center center;
  background-size: cover;
}

@media screen and (min-width: 769px) {
  .smp-c-img-wrap-kv02 {
    background: url(/dx/assets/img/bg-sec003.webp) no-repeat center center;
    background-size: cover;
  }
}

.smp-right {
  text-align: right !important;
}

@media screen and (max-width: 769px) {
  .smp-right {
    text-align: left !important;
  }
}

@media screen and (min-width: 1280px) {
  .smp-dx-column {
    display: flex;
    align-items: center;
    width: 80%;
    margin: 0 auto;
  }
}
.smp-c-bg-media-02 {
  background: url(/dx/assets/img/img-dx02-01.webp) no-repeat center;
  background-size: cover;
}

@media screen and (max-width: 769px) {
  .smp-c-bg-media-02 {
    background: none;
  }
}

.smp-c-bg-media-03 h4 {
  display: block;
  padding: 50px;
  background: hwb(300 37% 63% / 0.7);
  border-radius: 20px;
  color: #fff;
  line-height: 1.2;
}

/* dx03_index */

.smp-c-img-wrap-kv03 {
  background: url(/dx/assets/img/img-kv-dx03.webp) no-repeat center center;
  background-size: cover;
}

@media screen and (min-width: 769px) {
  .smp-c-img-wrap-kv03 {
    background: url(/dx/assets/img/img-kv-dx03.webp) no-repeat center center;
    background-size: cover;
  }
}

/* dx03 Domestic Sales and Marketing */

.smp-c-img-wrap-dx03-bg01 {
  background: url(/dx/assets/img/domestic-sales-and-marketing/bg_dx03-01.webp)
    center center;
  background-size: cover;
  border-radius: 10px;
}

.smp-c-img-wrap-dx03-bg02 {
  background: url(/dx/assets/img/domestic-sales-and-marketing/bg_dx03-02.webp)
    center center;
  background-size: cover;
  border-radius: 10px;
}

.smp-c-img-wrap-dx03-bg03 {
  background: url(/dx/assets/img/domestic-sales-and-marketing/bg_dx03-03.webp)
    center center;
  background-size: cover;
  border-radius: 10px;
}