@charset 'UTF-8';

/*  top
--------------------------------------- */

#content {
position: relative;
overflow-x: hidden;
}

.msg {
padding: 10px 20px;
font-size: 18px;
line-height: 1.12;
text-align: center;
letter-spacing: 2px;
background: #f3f3f3;
}

.kv {
position: relative;
padding: 215px 0 0;
min-height: 736px;
background: url("/ja/assets/img/bg_main_01.png") no-repeat center;
box-sizing: border-box;
z-index: 2;
}

.kv:after {
content: '';
position: absolute;
left: 0;
bottom: -392px;
width: 100%;
height: 717px;
background: url("/ja/assets/img/bg_main_04.png") no-repeat center;
}

.kv h1 {
max-width: 1040px;
margin: 0 auto 45px;
padding: 0 20px;
color: #fff;
font-size: 80px;
font-weight: bold;
line-height: 1.17;
box-sizing: border-box;
}

.kv p {
max-width: 1040px;
margin: 0 auto;
padding: 0 20px;
color: #fff;
font-size: 18px;
font-weight: bold;
letter-spacing: 5px;
box-sizing: border-box;
}


.news {
position: absolute;
top: 697px;
left: 0;
right: 0;
width: 100%;
max-width: 880px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
z-index: 5;
}

.news h2 span {
color: #fff;
font-size: 31px;
font-weight: bold;
line-height: 1;
letter-spacing: 5px;
}

.news h2 a {
position: relative;
display: inline-block;
width: 107px;
margin: 0 0 0 14px;
padding: 6px 10px;
color: #fff;
font-size: 12px;
font-weight: bold;
background: url("/ja/assets/img/ico_arw_05.png") no-repeat right 6px center;
border: 1px solid #fff;
box-sizing: border-box;
overflow: hidden;
}

.news h2 a:hover {
border: 1px solid #034a96;
}

.news h2 a::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: '';
background: #034a96;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .3s;
}
.news h2 a:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}

.news .newsList {
height: 110px;
margin: 27px 0 0;
overflow-y: auto;
}

.news dl {
display: flex;
align-items: center;
margin: 0 0 9px;
}

.news dl dt {
width: 232px;
color: #fff;
font-size: 14px;
letter-spacing: 1px;
}

.news dl dt span {
display: inline-block;
width: 100px;
margin: 0 8px 0 16px;
color: #fff;
font-size: 12px;
text-align: center;
border: 1px solid #fff;
box-sizing: border-box;
}

.news dl dd {
width: calc(100% - 242px);
overflow: hidden;
}

.news dl dd a {
display: block;
color: #fff;
font-size: 14px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
transition: 0.3s opacity;
}

.news dl dd a:hover {
color: #fff;
opacity: 0.7;
}

.product {
position: relative;
min-height: 778px;
margin: 0 0 543px;
background: #000;
}

.product:after {
content: '';
position: absolute;
left: 0;
bottom: -142px;
width: 100%;
height: 543px;
background: url("/ja/assets/img/bg_main_05.png") no-repeat center;
z-index: 2;
}

.product .bg01 {
display: block;
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 378px;
background: url("/ja/assets/img/bg_main_02.png") no-repeat center;
z-index: 1;
}
.product .bg02 {
display: none;
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 378px;
background: url("/ja/assets/img/bg_main_03.png") no-repeat center;
z-index: 1;
}

.product .inner {
position: relative;
width: 100%;
max-width: 880px;
margin: 0 auto;
padding: 208px 20px 0 20px;
box-sizing: border-box;
z-index: 4;
}

.product h2 span {
color: #fff;
font-size: 31px;
font-weight: bold;
line-height: 1;
letter-spacing: 5px;
}

.product h2 a {
position: relative;
display: inline-block;
width: 107px;
margin: 0 0 0 14px;
padding: 6px 10px;
color: #fff;
font-size: 12px;
font-weight: bold;
background: url("/ja/assets/img/ico_arw_05.png") no-repeat right 6px center;
border: 1px solid #fff;
box-sizing: border-box;
}

.product h2 a:hover {
border: 1px solid #034a96;
}

.product h2 a::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: '';
background: #034a96;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .3s;
}
.product h2 a:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}

.product .lead {
margin: 20px 0 0;
color: #fff;
font-size: 14px;
line-height: 1.65;
}

.product ul li ,
.company,
.products,
.recruit,
.partner,
.contact {
opacity: 0;
}

.product ul li.up-start ,
.company.right-start ,
.products.left-start ,
.recruit.right-start ,
.partner.left-start ,
.contact.right-start {
opacity: 1;
}

.product .img01 {
position: absolute;
top: 298px;
left: 21px;
}
.product .img02 {
position: absolute;
top: 298px;
left: 274px;
}
.product .img03 {
position: absolute;
top: 298px;
left: 523px;
}

.company {
position: relative;
width: 820px;
margin: -583px auto 30px;
border-left: none !important;
z-index: 5;
}


.company a {
position: relative;
display: block;
padding: 50px 0 63px;
background: url("/dxs/assets/img/bg_company_01.png") no-repeat center left;
}

.company a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: url("/dxs/assets/img/bg_company_01_ov.png") no-repeat center left;
z-index: 0;
transition: 0.3s all;
}
.company a:hover::before {
width: 100%;
}

.company h2 .hel {
color: #00a0ea;
font-size: 31px;
font-weight: bold;
letter-spacing: 5px;
}

.company h2 .sub {
display: inline-block;
padding: 0 52px 0 0;
color: #00a0ea;
font-size: 14px;
font-weight: bold;
background: url("/ja/assets/img/ico_arw_06.png") no-repeat right center;
}

.company p {
margin: 20px 0 0;
font-size: 14px;
line-height: 1.65;
}

.list {
display: flex;
flex-wrap: wrap;
padding: 0 0 40px;
}

.list .lefts {
width: 50%;
margin: 0 0 20px;
}

.list .rights {
width: 50%;
margin: 0 0 20px;
padding: 0 0 0 40px;
box-sizing: border-box;
}
.list .products a {
position: relative;
display: block;
padding: 40px 0 42px;
background: url("/dxs/assets/img/bg_products_01.png") no-repeat right center;
}
.list .recruit a {
position: relative;
display: block;
padding: 40px 0 42px;
background: url("/dxs/assets/img/bg_recruit_01.png") no-repeat left center;
}
.list .partner a {
position: relative;
display: block;
padding: 40px 0 42px;
background: url("/dxs/assets/img/bg_partner_01.png") no-repeat right center;
}
.list .contact a {
position: relative;
display: block;
padding: 40px 0 42px;
background: url("/dxs/assets/img/bg_contact_01.png") no-repeat left center;
}
.list .products a::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
background: url("/dxs/assets/img/bg_products_01_ov.png") no-repeat right center;
z-index: 0;
transition: 0.3s all;
}
.list .products a:hover::before {
width: 100%;
}
.list .recruit a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: url("/dxs/assets/img/bg_recruit_01_ov.png") no-repeat left center;
z-index: 0;
transition: 0.3s all;
}
.list .recruit a:hover::before {
width: 100%;
}
.list .partner a::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
background: url("/dxs/assets/img/bg_partner_01_ov.png") no-repeat right center;
z-index: 0;
transition: 0.3s all;
}
.list .partner a:hover::before {
width: 100%;
}
.list .contact a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: url("/dxs/assets/img/bg_contact_01_ov.png") no-repeat left center;
z-index: 0;
transition: 0.3s all;
}
.list .contact a:hover::before {
width: 100%;
}

.list .txtBox {
width: 240px;
margin: 0 0 0 auto;
}

.list h2 .hel {
color: #00a0ea;
font-size: 31px;
font-weight: bold;
letter-spacing: 5px;
}

.list h2 .sub {
display: inline-block;
padding: 0 52px 0 0;
color: #00a0ea;
font-size: 14px;
font-weight: bold;
background: url("/ja/assets/img/ico_arw_06.png") no-repeat right center;
}

.list p {
margin: 20px 0 0;
font-size: 14px;
line-height: 1.65;
}

@keyframes fadeInUp{
0%{
opacity:0;
-webkit-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0)
}
to{
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}

@keyframes fadeInRight{
0%{
opacity:0;
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0);
border-left:none;
}
99%{
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0);
border-left:none;
}
100%{
border-left:1px solid #221815;
}
}

@keyframes fadeInLeft{
0%{
opacity:0;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
to{
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}

.up-start{
-webkit-animation-name:fadeInUp;
animation-name:fadeInUp;
animation-duration: 1s;
}
.right-start{
-webkit-animation-name:fadeInRight;
animation-name:fadeInRight;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.left-start{
-webkit-animation-name:fadeInLeft;
animation-name:fadeInLeft;
animation-duration: 1s;
}


@media screen and (max-width: 1500px) {

.product .bg01 {
height: 51.86vw;
background: url("/ja/assets/img/bg_main_02.png") no-repeat center top;
background-size: auto 100%;
}
.product .bg02 {
height: 51.86vw;
background: url("/ja/assets/img/bg_main_03.png") no-repeat center top;
background-size: auto 100%;
}
}


@media screen and (max-width: 1200px) {

.product .bg01 {
height: 622px;
background: url("/ja/assets/img/bg_main_02.png") no-repeat center top;
background-size: auto 100%;
}
.product .bg02 {
height: 622px;
background: url("/ja/assets/img/bg_main_03.png") no-repeat center top;
background-size: auto 100%;
}

.product .img01 {
left: 5.75vw;
width: 18.5vw;
}
.product .img02 {
left: 26.83vw;
width: 18.75vw;
}
.product .img03 {
left: 47.58vw;
width: 25vw;
}

.company {
position: relative;
width: 100%;
max-width: 750px;
margin: -153px auto 40px;
padding: 0 0 0 40px;
box-sizing: border-box;
z-index: 5;
}

.list {
display: block;
max-width: 750px;
margin: 0 auto;
padding: 0 0 35px;
}

.list .lefts {
width: 100%;
margin: 0 0 40px;
}

.list .rights {
width: 100%;
margin: 0 0 40px;
border-left: none !important;
}

}



@media screen and (max-width: 750px) {

.msg {
padding: 3% 6%;
font-size: 12px;
line-height: 1.18;
text-align: center;
letter-spacing: 2px;
background: #f3f3f3;
}

.kv {
position: relative;
width: 100%;
padding: 30vw 0 0;
min-height: 89.6vw;
background: url("/ja/assets/img/bg_main_01_sp.png") no-repeat center;
background-size: cover;
box-sizing: border-box;
z-index: 2;
}

.kv:after {
display: none;
}

.kv h1 {
width: 73.33%;
max-width: inherit;
margin: 0 auto 5vw;
padding: 0;
color: #fff;
font-size: 9.9vw;
font-weight: bold;
line-height: 1.17;
box-sizing: border-box;
}

.kv p {
width: 73.33%;
max-width: inherit;
margin: 0 auto;
padding: 0;
color: #fff;
font-size: 2.66vw;
font-weight: bold;
letter-spacing: 2px;
box-sizing: border-box;
}

.news {
position: static;
width: 100%;
max-width: inherit;
margin: 0 auto;
padding: 4.2vw 9.33vw;
background: #00a0ea;
box-sizing: border-box;
}

.news h2 {
position: relative;
text-align: center;
}

.news h2 span {
color: #fff;
font-size: 5.06vw;
font-weight: bold;
line-height: 1.1;
letter-spacing: 3px;
}

.news h2 a {
position: absolute;
top: 0;
right: 0;
display: block;
width: 70px;
margin: 0;
padding: 2px 6px;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: left;
background: url("/ja/assets/img/ico_arw_05.png") no-repeat right 4px center;
background-size: 23px auto;
border: 1px solid #fff;
box-sizing: border-box;
}

.news h2 a:before {
display: none;
}
.news h2 a:hover {
border: 1px solid #fff;
}

.news .newsList {
height: 53.333vw;
margin: 3.5vw 0 0;
overflow-y: auto;
}

.news dl {
display: block;
margin: 0 0 2vw;
padding: 0 0 2vw;
border-bottom: 1px solid #fff;
}

.news dl dt {
width: 100%;
color: #fff;
font-size: 3.2vw;
letter-spacing: 1px;
}

.news dl dt span {
display: inline-block;
width: 75px;
margin: 0 0 0 6px;
color: #00a0ea;
font-size: 10px;
line-height: 1.3;
text-align: center;
vertical-align: middle;
letter-spacing: 0;
border: none;
background: #fff;
box-sizing: border-box;
}

.news dl dd {
width: 100%;
overflow: hidden;
}

.news dl dd a {
display: block;
color: #fff;
font-size: 3.2vw;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.news dl dd a:hover {
opacity: 1;
}

.product {
position: relative;
min-height: 125.6vw;
margin: 0 0 10vw;
background: url("/ja/assets/img/bg_main_05_sp.png") no-repeat top;
background-size: cover;
}

.product:after {
display: none;
}

.product .bg01 {
display: block;
position: absolute;
top: 28.93vw;
left: 0;
width: 100%;
height: 100vw;
background: url("/ja/assets/img/bg_main_02_sp.png") no-repeat center;
background-size: cover;
z-index: 1;
}
.product .bg02 {
display: none;
position: absolute;
top: 28.93vw;
left: 0;
width: 100%;
height: 100vw;
background: url("/ja/assets/img/bg_main_03_sp.png") no-repeat center;
background-size: cover;
z-index: 1;
}
.product .bg03 {
display: none;
position: absolute;
top: 28.93vw;
left: 0;
width: 100%;
height: 100vw;
background: url("/ja/assets/img/bg_main_04_sp.png") no-repeat center;
background-size: cover;
z-index: 1;
}

.product .inner {
position: relative;
width: 100%;
max-width: inherit;
margin: 0 auto;
padding: 16vw 0 0;
text-align: center;
box-sizing: border-box;
z-index: 4;
}

.product h2 span {
color: #fff;
font-size: 5.06vw;
font-weight: bold;
line-height: 1;
letter-spacing: 3px;
}

.product h2 a {
display: block;
width: 120px;
margin: 2.5vw auto 0;
padding: 2px 6px;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: left;
background: url("/ja/assets/img/ico_arw_05.png") no-repeat right 4px center;
background-size: 23px auto;
border: 1px solid #fff;
box-sizing: border-box;
}

.product h2 a:before {
display: none;
}
.product h2 a:hover {
border: 1px solid #fff;
}

.product .lead {
margin: 30vw 0 0;
color: #fff;
font-size: 3.2vw;
line-height: 1.65;
}

.product .img01 {
position: absolute;
top: 32vw;
left: 4.13vw;
width: 24.8vw;
}
.product .img02 {
position: absolute;
top: 32vw;
left: 28.93vw;
width: 24.8vw;
}
.product .img03 {
position: absolute;
top: 32vw;
left: 53.73vw;
width: 24.8vw;
}

.company {
position: relative;
width: 100%;
margin: -47vw auto 12vw;
padding: 0;
z-index: 8;
box-sizing: border-box;
}

.company:after {
display: none;
}

.company a {
display: block;
padding: 48vw 0 0 6.66vw;
background: url("/dxs/assets/img/bg_company_01_sp.png") no-repeat center;
background-size: 100% auto;
}
.company a:before {
display: none;
}

.company h2 .hel {
color: #00a0ea;
font-size: 4.8vw;
font-weight: bold;
letter-spacing: 3px;
}

.company h2 .sub {
display: inline-block;
margin: -0.5vw 0 0;
padding: 0 25px 0 0;
color: #00a0ea;
font-size: 2.67vw;
font-weight: bold;
background: url("/ja/assets/img/ico_arw_06.png") no-repeat right center;
background-size: 20px auto;
}

.company p {
margin: 0.5vw 0 0;
font-size: 2.933vw;
line-height: 1.46;
}

.list {
display: block;
padding: 0 0 4.66vw;
}

.list .lefts {
width: 100%;
margin: 0 0 5.33vw;
}

.list .rights {
width: 100%;
margin: 0 0 5.33vw;
padding: 0;
box-sizing: border-box;
}

.list .products a {
display: block;
padding: 2vw 0 2vw 6.66vw;
background: url("/dxs/assets/img/bg_products_01_sp.png") no-repeat left center;
background-size: 100% auto;
}
.list .partner a {
display: block;
padding: 2vw 0;
background: url("/dxs/assets/img/bg_partner_01_sp.png") no-repeat right center;
background-size: 100% auto;
}
.list .recruit a {
display: block;
padding: 2vw 0 2vw 6.66vw;
background: url("/dxs/assets/img/bg_recruit_01_sp.png") no-repeat left center;
background-size: 100% auto;
}
.list .contact a {
display: block;
padding: 2vw 0;
background: url("/dxs/assets/img/bg_contact_01_sp.png") no-repeat right center;
background-size: 100% auto;
}
.list .products a:before {
display: none;
}
.list .partner a:before {
display: none;
}
.list .recruit a:before {
display: none;
}
.list .contact a:before {
display: none;
}
  
.list .txtBox {
width: 34.66vw;
margin: 0 0 0 auto;
}

.list h2 .hel {
color: #00a0ea;
font-size: 4.8vw;
font-weight: bold;
letter-spacing: 3px;
}

.list h2 .sub {
display: inline-block;
margin: -0.5vw 0 0;
padding: 0 25px 0 0;
color: #00a0ea;
font-size: 2.67vw;
font-weight: bold;
background: url("/ja/assets/img/ico_arw_06.png") no-repeat right center;
background-size: 20px auto;
}

.list p {
margin: 0.5vw 0 0;
font-size: 2.933vw;
line-height: 1.46;
}

.relate {
width: 81.33vw;
max-width: inherit;
margin: 0 auto 20vw;
padding: 0;
box-sizing: border-box;
}

.relate h2 {
margin: 0 0 4vw;
padding: 0;
color: #00a0ea;
font-size: 3.466vw;
font-weight: bold;
border-bottom: 1px solid #5282b7;
}

.relate ul {
display: block;
}

.relate ul li {
width: 66.666vw;
margin: 0 auto 3vw;
}

.relate ul li h3 {
margin: 0 0 1vw;
color: #00a0ea;
font-size: 3.2vw;
font-weight: bold;
}

.relate ul li .note {
margin: 1vw 0 0;
color: #00a0ea;
font-size: 10px;
line-height: 1.34;
}

}

@media screen and (max-width: 374px) {
.news h2 a {
position: static;
margin: 2.5vw auto 0;
}
}