body{
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.trans{
  animation-name: fadein;
  animation-duration: 1s; 
  animation-delay: .5s;
  animation-fill-mode: forwards;
  position: relative;
  opacity: 0; 
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/*common*/
#main_contents{
  position: relative;
  margin-top: 80px;
  overflow-x: hidden;
}
.inner{
  width: 90%;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
}
.inner02{
  width: 90%;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}
.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.en{
  font-family: Poppins;
  font-weight: 500;
}
img,
video{
  max-width: 100%;
}

.txt01{
  font-weight: bold;
  font-size: 16px;
  text-align: justify;
}
.btn01,
.btn01.sp_none{
  height: 81px;
  color: #fff;
  max-width: 320px;
  border-radius: 40px;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  border: 3px solid #D3D3D3;
  position: relative;
  transition: all .3s;
}
.btn01::after{
  content: '';
  position: absolute;
  left: -3px;
  bottom: -10px;
  background-color: #D3D3D3;
  width: calc(100% + 6px);
  height: 100%;
  z-index: -1;
  border-radius: 50px;
  transition: all .3s;
}
.btn01:hover{
  border-bottom-width: 3px;
  border-color: var(--color-primary);
  background-color: #fff;
  color: var(--color-primary);
}
.btn01:hover::after{
  bottom: 0;
}
.btn01 span{
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(/solutions/dx_offering/img/icon_link.svg);
  display: inline-block;
  margin-left: 10px;
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  transition: all .3s;
}
.btn01:hover span{
  background-image: url(/solutions/dx_offering/img/icon_link_hover.svg);
}
.txt_red{
  color: var(--color-primary);
}
.txt_line{
  padding-bottom: 6px;
  border-bottom: 4px solid var(--color-primary);
}
.pc_none{
  display: none;
}
.sp_none{
  display: block;
}
/*component*/
.head01{
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 180px;
  position: relative;
}
.head01::after{
  content: '';
  width: 2px;
  height: 80px;
   background-color: var(--color-primary);
   left: 50%;
   transform: translateX(-50%);
   bottom: -130px;
   position: absolute;
}
.head02{
  text-align: center;
  margin-bottom: 60px;
}
.head02 .en{
  font-size: 88px;
  display: block;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: 30px;
}
.head02 .jp{
  font-size: 24px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.head03{
  font-size: 56px;
  line-height: 1;
  margin-bottom: 25px;
}
/*mv*/
#mv{
  position: relative;
  border-bottom: 2px solid var(--color-primary);
}
.mv_txt_box{
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
}
.mv_box{
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  padding: 70px 0 50px;
}
.mv_box .box_l{
  width: 48%;
}
.mv_box .box_r{
  width: 52%;
}
.mv_txt01{
  font-size: 40px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin-bottom: 35px;
}
.mv_txt02{
  font-size: 32px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 30px;
}
.mv_txt02 span{
  display: inline-block;
  padding: 4px 10px 10px 15px;
  line-height: 1;
  border-radius: 21px;
  color: #fff;
  font-size: 28px;
  text-align: center;
  margin-right: 5px;
}
.mv_txt02 span.cat01{
  background-color: var(--color-blue01);
}
.mv_txt02 span.cat02{
  background-color: var(--color-pink01);
}
.mv_txt02 span.cat03{
  background-color: var(--color-green01);
}
#top01{
  padding: 120px 0 130px;
}
.assign_list01 .box_in{
  width: calc((100% - 40px) / 3);
  margin-top: 50px;
  position: relative;
  background-color: #fff;
  position: relative;
  border-radius: 15px;
  padding: 65px 20px 15px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .1));
}
.roboto{
  font-family: "Roboto", sans-serif;
  font-weight: bold;
}
.num{
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 800;
  border-radius: 50%;
}
.num.num01{
  background-color: var(--color-blue01);
}
.num.num02{
  background-color: var(--color-pink01);
}
.num.num03{
  background-color: var(--color-green01);
}
.assign_list01 .num{
  width: 80px;
  height: 80px;
  font-size: 48px;
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);

}
.w_box{
}
.ttl01{
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  margin-bottom: 25px;
}
.ttl01 span{
  display: block;
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 1;
  position: relative;
  margin-top: 35px;
}
.ttl01 span::after{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 16px;
  background-color: #000;
  top: -22px;
}
.cat01 .ttl01 span{
  color: var(--color-blue01);
}
.cat02 .ttl01 span{
  color: var(--color-pink01);
}
.cat03 .ttl01 span{
  color: var(--color-green01);
}
.assign_list01 .img{
  display: flex;
  align-items: center;
  justify-content: center;
}
.about_list01 li{
  width: 100%;
  border-radius: 20px;
  font-size: 16px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 5px;

}
.about_list01 li:last-child{
  margin-bottom: 0;
}
.cat01 .about_list01 li{
  background-color: var(--color-blue02);
}
.cat02 .about_list01 li{
  background-color: var(--color-pink02);
}
.cat03 .about_list01 li{
  background-color: var(--color-green02);
}
#top02{
  background-color: var(--color-blue02);
}
#top03{
  background-color: var(--color-pink02);
}
#top04{
  background-color: var(--color-green02);
}
.ttl_box01{
  margin-top: -64px;
  text-align: center;
  margin-bottom: 95px;
}
.ttl_box01 .num{
  width: 64px;
  height: 64px;
  font-size: 38px;
  margin: 0 auto 10px;
}
.section_all{
  padding: 32px 0 125px;
}
.ttl03{
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.cat01 .ttl03{
  color: var(--color-blue01);
}
.cat02 .ttl03{
  color: var(--color-pink01);
}
.cat03 .ttl03{
  color: var(--color-green01);
}
.ttl_box01 .txt01{
  text-align: center;
}
.offer_box01{
  display: block;
  max-width: 440px;
  width: 100%;
  position: relative;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  margin: 0 auto 75px;
  z-index: 1;
}
.cat01 .offer_box01{
  background-color: var(--color-blue02);
}
.cat02 .offer_box01{
  background-color: var(--color-pink02);
}
.cat03 .offer_box01{
  background-color: var(--color-green02);
}
.offer_box01 .box_in{
  padding: 10px 20px;
  position: relative;
}
.offer_box01::before,
.offer_box01::after,
.offer_box01 .box_in::before,
.offer_box01 .box_in::after{
  width: 20px;
  height: 1px;
  background-color: #000;
  position: absolute;
  content: '';
}
.offer_box01::before,
.offer_box01::after{
  left: 0;
}

.offer_box01::before{
  top: 0;
}
.offer_box01::after{
  bottom: 0;
}
.offer_box01 .box_in::before,
.offer_box01 .box_in::after{
  right: 0;
}
.offer_box01 .box_in::before{
  top: 0;
}
.offer_box01 .box_in::after{
  bottom: 0;
}
.ttl02{
  font-size: 24px;
  line-height: 2;
  text-align: center;
  margin-bottom: 45px;
  position: relative;
}
.ttl02::after{
  content: '';
  width: 1px;
  height: 16px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -26px;
  background-color: #000;
}
.offer_box01 .txt01{
  text-align: center;
}
.line_box{
  position: relative;
  margin-bottom: 45px;
}
.line_box::after{
  content: '';
  width: 300vw;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: -50%;
  top: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.offer_list01.flex{
  margin-bottom: 80px;
  justify-content: center;
}
.offer_list01.last{
  margin-bottom: 0;
}
.offer_list01 li{
  width: calc((100% - 55px) / 2);
  margin-right: 55px;
}
.offer_list01 li:last-child{
  margin-right: 0;
}
.offer_list01 .box{
  background-color: #fff;
  padding-top: 50px;
  position: relative;
  border-radius: 15px;

}
.head04{
  width: 90%;
  min-height: 66px;
  border-radius: 37px;
  font-size: 24px;
  letter-spacing: 0;
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
}
.cat01 .head04{
  border: 10px solid var(--color-blue02);
}
.cat02 .head04{
  border: 10px solid var(--color-pink02);
}
.cat03 .head04{
  border: 10px solid var(--color-green02);
}
.cat01 .head04 span{
  border: 5px solid var(--color-blue01);
}
.cat02 .head04 span{
  border: 5px solid var(--color-pink01);
}
.cat03 .head04 span{
  border: 5px solid var(--color-green01);
}
.head04 span{
  padding: 5px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center; 
  border-radius: 56px;
}
.offer_list01 .img{
  width: 90%;
  max-width: 240px;
  margin: 0 auto;
}
.offer_txt01{
  padding: 0 20px;
}
.offer_txt01 a{
  color: #00aaff;
  transition: all .4s;
}
.offer_txt01 a:hover{
  opacity: 0.8;
}
.offer_txt02{
  margin-top: 20px;
  padding: 7px 20px;
  border-radius: 0 0 15px 15px;
  display: flex;
  flex-wrap: wrap;
}
.cat01 .offer_txt02{
  background-color: var(--color-blue03);
}
.cat02 .offer_txt02{
  background-color: var(--color-pink03);
}
.cat03 .offer_txt02{
  background-color: var(--color-green03);
}
.offer_txt02 span{
  font-size: 14px;
  background-color: #fff;
  width: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  height: 30px;
  margin-right: 10px;
}


#top05{
  padding: 100px 0 75px;
}

.btn01.small{
  height: 57px;
  max-width: 300px;
  font-size: 18px;
  border-radius: 10px;
  margin: 0 auto;
  border-width: 2px;
}
.btn01.small::after{
  border-radius: 10px;
  width: calc(100% + 4px);
  left: -2px;
}
.btn01.small span{
  width: 25px;
  height: 25px;
}
#top06{
  padding: 100px 0 115px;
}

#top07{
  padding: 100px 0;
}
#top07 .head02{
  margin-bottom: 60px;
}
#top07 .btn01{
  max-width: 440px;
  margin: 0 auto;
  position: relative;
}
#top07 .btn01 span{
  background-image: url(/solutions/dx_offering/img/icon_detail.svg);
}
#top07 .btn01:hover span{
  background-image: url(/solutions/dx_offering/img/icon_detail_hover.svg);
}
.btn_box01{
  position: relative;
}
.btn_box01 .fukidashi{
  position: absolute;
  right: 25px;
  top: -150px;
  width: 190px;
}
.anchor{
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}
.anchor02{
    display: block;
    padding-top: 150px;
    margin-top: -150px;
}
@media screen and (max-width: 1300px) {
}
@media screen and (max-width: 1200px) {
.mv_txt_box{
  zoom: 80%;
  left: 5%;
}
}
@media screen and (max-width: 1024px) {
.mv_txt_box{
  zoom: 60%;
}
.assign_list01 .num{
  width: 60px;
  height: 60px;
  top: -30px;
  font-size: 30px;
}
.ttl01{
  font-size: 22px;
}
.ttl02::after{
  height: 11px;
  bottom: -13px;
}
.about_list01 li{
  font-size: 14px;
}
.head03{
  font-size: 40px;
}
.head04{
  font-size: 18px;
}
.offer_list01 li{
  width: calc((100% - 30px) / 2);
  margin-right: 30px;
}
}
@media screen and (max-width: 768px) {
#main_contents{
  margin-top: 50px;
}
.pc_none{
  display: block;
}
.sp_none{
  display: none;
}

.txt01{
  font-size: 13px;
}
.mv_box{
  padding: 50px 0 40px;
}
.mv_box .box_l,
.mv_box .box_r{
  width: 100%;
}
.mv_box .box_l{
  margin-bottom: 30px;
}
.mv_box .box_r{
  padding: 0 5%;
}
.mv_txt_box{
  zoom: 100%;
  position: relative;
  left: auto;
  top: auto;
  transform: translateY(0);
  padding: 0 10%;
}
.mv_txt01{
  font-size: 26px;
  margin-bottom: 20px;
}
.mv_txt02{
  font-size: 20px;
}
.mv_txt02 span{
  font-size: 18px;
  padding: 5px 5px 8px 10px;
}
.btn01, .btn01.sp_none{
  height: 50px;
  max-width: 100%;
  font-size: 18px;
}
.btn01 span{
  width: 15px;
  height: 15px;
}
#top01{
  padding: 60px 0;
}
.head02{
  margin-bottom: 40px;
}
.head02 .en{
  font-size: 45px;
  margin-bottom: 15px;
}
.head02 .jp{
  font-size: 20px;
}
.assign_list01 .box_in{
  width: 100%;
  margin-bottom: 15px;
  padding-bottom: 30px;
}
.assign_list01 .img{
  width: 80%;
  margin: 0 auto 20px;
}
.about_list01 li{
  min-height: 30px;
}
.ttl_box01{
  margin-bottom: 50px;
}
.ttl_box01 .num{
  font-size: 30px;
}
.ttl03{
  font-size: 20px;
  margin-bottom: 10px;
}
.head03{
  font-size: 28px;
  margin-bottom: 20px;
}
.offer_list01.flex{
  margin-bottom: 30px;
}
.offer_list01 li{
  width: 100%;
  margin-right: 0;
  margin-bottom: 50px;
}
.ttl02{
  font-size: 18px;
  margin-bottom: 20px;
}
.head04{
  font-size: 16px;
}
.offer_txt02 span{
  width: 60px;
  height: 25px;
  font-size: 12px;
}
.section_all{
  padding: 32px 0 50px;
}
#top07{
  padding: 60px 0;
}
.anchor{
    display: block;
    padding-top: 60px;
    margin-top: -60px;
}
.anchor02{
    display: block;
    padding-top: 120px;
    margin-top: -120px;
}
}