/* common */
h6.small_tit { font-size: 2rem; font-weight: 700; line-height: 3.2rem; margin-bottom: 1.4rem; } 
.gray_bg { background-color: #F5F5F5; margin-bottom: 2rem; } 
.p-bt { padding-bottom: 8.6rem; } 
.img-obj { width: 100%; height: 100%; object-fit: cover; object-position: center; } 
.mt-5 { margin-top: 5rem; } 

@media all and (max-width:640px) { 
 .p-bt { padding-bottom: 6.5rem } 
 .sub04_pg .sec02 { padding-top: 7rem } 
 .sub04_pg .flex-wr .info-bx p br.br_pc { display: none; } 
 } 

ul.sensor_list { display: grid; grid-gap: 2rem } 
ul.sensor_list > li:last-child::after { display: none; } 
ul.sensor_list img.sensor_img { width: auto; } 

ul.sensor_list.arrow-bx > li { position: relative; } 
ul.sensor_list.arrow-bx > li::after { position:absolute; content: ''; top: 50%; right: -3.4rem; transform: translateY(-50%); background: url('/theme/basic/img/sub04/ico_arrow_o.svg') no-repeat center / contain; width: 3.4rem; height: 3.4rem; } 

.grid-2 { grid-template-columns: repeat(2,1fr); } 
.grid-3 { grid-template-columns: repeat(3,1fr); } 
.grid-4 { grid-template-columns: repeat(4,1fr); } 
.grid-5 { grid-template-columns: repeat(5,1fr); } 
.grid-6 { grid-template-columns: repeat(6,1fr); } 

@media all and (max-width:640px) { 
 ul.sensor_list { grid-gap: 1.5rem } 
 } 


.product { padding-top: 14.3rem; } 
.service-wr .box-wr { grid-gap: 1.5rem; } 
.service-wr .box-wr .box .box-img { height: 25.3rem; } 
.service-wr .box-wr .box .box-txt { height: 7.1rem; padding: 2rem 3.2rem; } 
.service-wr .box-wr .border { border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border) } 


@media all and (max-width:1280px) { 
 .service-wr .box-wr { grid-template-columns: repeat(3,1fr) } 
 } 
@media all and (max-width:960px) { 
 .service-wr .box-wr { grid-template-columns: repeat(2,1fr) } 
 } 
@media all and (max-width:640px) { 
 .product { padding-top: 10.3rem; } 
 .service-wr .box-wr .box .box-txt { padding: 2rem; height: 10rem; } 
 ul.sensor_list.arrow-bx > li::after { width: 2.5rem; height: 2.5rem; right: -3rem; } 
 .grid-2, .grid-3 { grid-template-columns: 1fr } 
 } 
@media all and (max-width:480px) { 
 .service-wr .box-wr { grid-template-columns: 1fr } 
 .service-wr .box-wr .box .box-txt { height: 8rem; } 
 } 




.inquiry-wr { margin: 1.7rem 0 12rem } 

.slide-wr.pt-160 { padding-top: 16rem } 
.slide-wr .swiper { height: 40.4rem } 
.slide-wr .swiper-wrapper { height: 34.4rem } 
/* .slide-wr .swiper-slide { background-color: #f5f5f5 } */

@media all and (max-width:960px) { 
 .slide-wr.pt-160 { padding-top: 9rem } 
 } 

@media all and (max-width:640px) { 
 .slide-wr.pt-160 { padding-top: 5rem; } 
 .slide-wr .swiper { height: 31.4rem; } 
 .slide-wr .swiper-wrapper { height: 25.4rem } 
 .slide-wr .swiper-slide { padding: 1rem 0; } 
 .slide-wr .swiper-slide img { object-fit: inherit; } 
 } 
@media all and (max-width:480px) { 
 .slide-wr { padding-top: 5rem } 
 } 



/* */
.sub04_1 .video-bx { } 
.sub04_1 .video-bx video { width: 100%; height: 39.4rem; } 
.sub04_1 .sec01 .slide-wr { padding-top: 16rem } 
.sub04_1 .sec02 .gray_bg { padding: 7.8rem 5.9rem; } 
.sub04_1 .sec04 .gray_bg { padding: 6rem 0 8rem } 
.sub04_1 .sec04 .gray_bg img.related_img { width: auto; margin: 0 auto; } 
.sub04_1 .sec04 ul.sensor_list span { display: block; font-size: 1.8rem; font-weight: 500; font-weight: 500; color: #3C3C3C; text-align: center; margin-top: .7rem; line-height: 3.2rem; } 
.sub04_1 .p_list { grid-gap: 3.1rem } 

@media all and (max-width:1280px) { 
 .sub04_1 .video-bx video { height: 100%; } 
 .sub04_1 .sec02 .gray_bg { padding: 3.8rem } 
 } 
@media all and (max-width:960px) { 
 .sub04_1 .sec01 .slide-wr { padding-top: 9rem } 
 .sub04_1 .sec02 ul.sensor_list { grid-template-columns: repeat(3, 1fr); grid-gap:3rem; } 
 } 
@media all and (max-width:640px) { 
 .sub04_1 .sec02 .gray_bg { margin-bottom: 0 } 
 .sub04_1 .sec04 .gray_bg { padding: 3rem 2rem; } 
 .sub04_1 .sec01 .slide-wr { padding-top: 5rem; } 
 .sub04_1 .sec04 ul.sensor_list span { padding-bottom: 1.8rem } 
 } 
@media all and (max-width:480px) { 
 .sub04_1 .sec02 ul.sensor_list { grid-template-columns: repeat(2, 1fr); } 
 .sub04_1 .sec02 .gray_bg { padding: 3rem; } 
 } 




/* */
.sub04_2 .sec02 ul.sensor_list { grid-gap: 3rem; } 
.sub04_2 .sec02 ul.sensor_list > li { display: flex; grid-gap: .5rem; } 
.sub04_2 .sec02 .brfore { position: relative; } 
.sub04_2 .sec02 .brfore:after { position:absolute; content: 'Before'; background-color: #000; padding: .5rem .9rem; top: 0; right: 0; font-size: 1.6rem; font-weight: 500; color: #fff; } 
.sub04_2 .sec02 .after { position: relative; } 
.sub04_2 .sec02 .after:after { position:absolute; content: 'After'; background-color: var(--color-point01); padding: .5rem .9rem; top: 0; right: 0; font-size: 1.6rem; font-weight: 500; color: #fff; } 


@media all and (max-width:640px) { 
 .sub04_2 .sec02 ul.sensor_list { grid-gap: 2rem } 
 } 


/* */
.sub04_3 .gray_bg1 { padding: 6.2rem 10.2rem; margin-top: 16rem; } 
.sub04_3 .gray_bg1 ul.sensor_list { grid-gap: 4rem; } 
.sub04_3 .gray_bg1 ul.sensor_list img.ms_img { width: auto } 
.sub04_3 .gray_bg1 span { display: block; font-size: 1.8rem; font-weight: 500; color: #3C3C3C; text-align: center; line-height: 3.2rem; margin-top: .7rem; } 
.sub04_3 .gray_bg2 { padding: 5rem 3.2rem 6.5rem } 
.sub04_3 .gray_bg2 ul.sensor_list { display: flex; align-items: center; justify-content: space-between; } 
.sub04_3 .gray_bg2 ul.sensor_list > li.tcp_line { position:relative; margin-top: 3rem } 
.sub04_3 .gray_bg2 ul.sensor_list > li.tcp_line::after { position:absolute; content: ''; background-color: var(--color-point01); width: 9.1rem; height: 2px; top: -3px; left: -13px } 
.sub04_3 .gray_bg2 ul.sensor_list span { display: inline-block; font-size: 2rem; font-weight: 900; line-height: 3.2rem; text-align: center; } 
.sub04_3 img.ms_img.cn_img { margin-top: 2rem } 

@media all and (max-width:960px) { 
 .sub04_3 .gray_bg1,
 .sub04_3 .gray_bg2 { padding: 3rem 2rem; } 

 } 
@media all and (max-width:640px) { 
 .sub04_3 .gray_bg1 { margin-top: 9rem } 
 .sub04_3 .gray_bg1 ul.sensor_list { grid-template-columns: 1fr } 
 .sub04_3 .gray_bg1 ul.sensor_list img.ms_img { margin: 0 auto; } 
 .sub04_3 .gray_bg1 ul.sensor_list img.cn_img { transform: rotate(90deg); } 

 .sub04_3 .gray_bg2 ul.sensor_list { flex-direction: column; grid-gap:5.5rem; } 
 .sub04_3 .gray_bg2 ul.sensor_list > li.tcp_line { margin-left: 10rem } 
 .sub04_3 .gray_bg2 ul.sensor_list > li.tcp_line::after { width: 2px; height: 9.1rem; top: -22px; } 
 } 




/* */
.sub04_7 .slide-wr .swiper-slide { background-color: #F5F5F5; } 
.sub04_7 .slide-wr span.name { display: block; font-size: 1.8rem; font-weight: 500; color: #3C3C3C; margin-top: .8rem; text-align: center; } 
.sub04_7 ul.pd_list { width: calc(100% - 23.3rem); } 
.sub04_7 ul.pd_list > li { font-size: 1.8rem; color: #3C3C3C; font-weight: 500; line-height: 3rem; list-style: disc; } 
.sub04_7 ul.pd_list > li::marker { color: var(--color-point01); } 
.sub04_7 .slide-wr .swiper-slide img { width: auto; object-fit: contain; } 


.sub04_7 img.tit { padding-bottom: 4.5rem } 
.sub04_7 img.mo_tit { display: none; } 
.sub04_7 .list-bx { display: grid; grid-template-columns: repeat(2,1fr); } 
.sub04_7 .list-bx .p_list { padding-left: 6.7rem } 
.sub04_7 .list-bx .p_list > li { font-size: 1.8rem; color: var(--color-txt); line-height: 30px; list-style: disc; } 
.sub04_7 .list-bx .p_list > li::marker { color: var(--color-point01); } 


@media all and (max-width:640px) { 
 .sub04_7 img.pc_tit { display: none; } 
 .sub04_7 img.mo_tit { display: block;; } 

 .sub04_7 ul.pd_list { width: 100%; margin-top: 2rem; padding-left: 2.5rem } 
 .sub04_7 .slide-wr .swiper-slide img { margin: 0 auto; height: 18rem; } 

 .sub04_7 .list-bx { grid-template-columns: 1fr; } 
 .sub04_7 .list-bx .p_list { padding-left: 4rem } 
 } 
@media all and (max-width:450px) { 
 .sub04_7 .slide-wr .swiper-slide { padding: 0; } 
 .sub04_7 .slide-wr .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } 
 } 
@media all and (max-width:360px) { 
 .sub04_7 ul.pd_list > li { font-size: 1.7rem } 
 } 




/* */

.ta-st { width: 100%; font-size: 1.8rem; } 
.ta-st td,.ta-st th {padding: 1rem; text-align: center; border-bottom: 1px solid var(--color-border); } 
.ta-st td:not(:last-child) { border-right: 1px solid var(--color-border); } 
.ta-st th { height: 7rem; line-height: 2.5; background: #000; color: #fff; } 
.ta-st .t-tit { background: #f5f7f8; font-weight: 500; } 
.ta-st th.hise { border: 3px solid var(--color-point01); border-bottom: 0;}
.ta-st td.hise {color: var(--color-point);  border-right: 3px solid var(--color-point01); border-left: 3px solid var(--color-point01);}
.ta-st tr:last-child td.hise {border-bottom: 3px solid var(--color-point01);}


.sub04_8 .video-wr { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); } 
.sub04_8 .video-wr .video { display: grid; grid-template-columns: repeat(2, 1fr); } 
.sub04_8 .video-wr .video li { border: 1px solid var(--color-border); } 
.sub04_8 .video-wr .video li .vi-box { height: 30rem; } 
.sub04_8 .video-wr .video li .tit { line-height: 1.2; padding: 1rem; text-align: center; font-size: 2rem; font-weight: 300; } 
.sub04_8 .video-wr .vi-hi .tit { background: var(--color-point); color: #fff; } 
.sub04_8 .video-wr .vi-ot .tit { background: #ddd; } 


@media all and (max-width:960px) { 
  .ta-scroll {overflow-x: scroll;}
  .ta-st {width: 122rem;padding: 1rem 0;}

  .sub04_8 .video-wr {grid-template-columns: 1fr;}
}

@media all and (max-width:460px) { 
.sub04_8 .video-wr .video {    grid-template-columns: 1fr;}
}
/* */