/* tech
=============================================== */

.tech-index #page-header { background-image:url(../img/tech/bg_header.jpg); }
.tech-rd #page-header { background-image:url(../img/tech/bg_header_rd.jpg); }
.tech-product #page-header { background-image:url(../img/tech/bg_header_product.jpg); }
.tech-broadcast #page-header { background-image:url(../img/tech/bg_header_broadcast.jpg); }
.tech-it #page-header { background-image:url(../img/tech/bg_header_it.jpg); }
.tech-ott #page-header { background-image:url(../img/tech/bg_header_ott.jpg); }

#tech .contents-box .ttl { margin-bottom:1.0em; font-size:150%; line-height:140%; }
#tech .contents-box .subttl { margin-bottom:0.5em; font-size:130%; line-height:140%; }
#tech .contents-box .sttl { margin-bottom:0.5em; font-size:115%; line-height:140%; }

.tc-box { margin-bottom:2.0em; padding:1.0em; box-sizing:border-box; border:#ddd 1px solid; border-radius:0.5em; }

.tc-pic { margin:auto; background-color:#efefef; }
.tc-pic.bgtp { background:transparent; }
.tc-pic span { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.pic2col { display:flex; flex-wrap:wrap; }
.pic2col figure { width:49%; }
.pic2col figure:nth-child(even) { margin-left:2%; }

.tc-column { max-width:860px; margin:0 auto 1.0em auto; box-sizing:border-box; }

hr.tc-hr { all:unset; max-width:860px; margin:1.5em auto 2.5em auto; display:block; border:0; border-top:#ddd 1px solid;box-sizing: border-box; }

.tc-yt-box { max-width:860px; margin:0 auto 1.0em auto; }

/* -- Media Queries -- */

@media all and (max-width: 767px) {

#tech .contents-box .ttl { font-size:120%; }
#tech .contents-box .subttl { font-size:105%; }
#tech .contents-box .sttl { font-size:95%; }

hr.tc-hr { margin:1.0em auto 2.0em auto }


}


/* btn
-------------------------------- */

.tc-btn { margin-bottom:1.0em; text-align:center; }
.tc-btn a { position:relative; display:inline-block; margin-bottom:1.0em; padding:1.0em 0; background-color:#fff; border-radius:1000px; border:var(--cl-tbsblue) 2px solid; box-shadow:2px 2px 4px rgba(0, 0, 0, 0.4); color:var(--cl-tbsblue); font-weight:700; text-decoration:none; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) { .tc-btn a:hover { transform:translateX(4px); opacity:0.7; } }
.btn-detail a { width:14.0em; }
#btn-backtop a { width:17.0em; }


/* index
-------------------------------- */

/* tc-field-list */

.tc-field-list { width:80%; margin:0 10% 2.0em; padding:1.0em 1.0em 0 1.0em; box-sizing:border-box; border:#ddd 1px solid; border-radius:0.5em; }
.tc-field-thumb { margin:-1.0em -1.0em 1.0em -1.0em; aspect-ratio:3 / 1; background-color:#efefef; border-radius:0.5em 0.5em 0 0; }
.tc-field-thumb span { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; border-radius:0.5em 0.5em 0 0; }
.tc-field-ttl { margin-bottom:0.5em; font-size:150%; line-height:140%; }

/* -- Media Queries -- */

@media all and (max-width: 767px) {

.tc-field-list { width:100%; margin:0 0 2.0em; }
.tc-field-ttl { font-size:130%; }

}

/* faq  */

.qa-ttl { margin-bottom:1.0em; font-size:200%; color:var(--cl-tbsblue); text-align:center; }
.qa-item { margin:auto; display:flex; border-top:var(--cl-tbsblue) 2px solid; text-align:left; font-weight:bold; line-height:180%; }
.qa-q,
.qa-a { display:flex; align-items:center; box-sizing:border-box; background-position:left center; background-repeat:no-repeat; }
.qa-q { width:30%; padding:80px 20px 80px 80px; background-image:url(../img/tech/index_qa_q.png); background-size:auto 167px; }
.qa-a { width:70%; padding:80px; background-image:url(../img/tech/index_qa_a.png); background-size:auto 164px; color:var(--cl-tbsblue); /* for toggle */ display:block; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

.qa-ttl { margin-bottom:0.5em; font-size:130%; }
.qa-item { display:block; border-top:none; margin-bottom:30px; }
.qa-q,
.qa-a { display:block; width:100%; padding:0; cursor:pointer; background-position:left top; }
.qa-q { display:flex; min-height:120px; background-size:auto 102px; }
.qa-q p { position:relative; width:100%; padding:0 6vw 2vw 2vw; box-sizing:border-box; border-bottom:#000 2px solid; }
.qa-q p::before { position:absolute; right:1vw; bottom:3vw; display:inline-block; content:""; width:1.0em; height:1.0em; background:url(../img/tech/index_qa_arrow.png) center center no-repeat; background-size:auto 100%; }
.qa-q.active p::before { transform: rotate(90deg); }
.qa-a { padding:2vw; background-position:right 1.0em; background-size:auto 97px; /* for toggle */ display:none; }

}


/* detail
-------------------------------- */

/* rd */

#rd_mirai1 { margin:1.0em auto 1.0em auto; max-width:860px; aspect-ratio:790 / 527; }
#rd_mirai2col { margin:auto; max-width:860px; }
#rd_mirai2,
#rd_mirai3 { aspect-ratio:456 / 337; }
#rd_media1 { margin:0 auto 1.0em auto; max-width:860px; aspect-ratio:790 / 444; }
#rd_media_uzit { margin:1.0em auto 1.0em auto; width:200px; aspect-ratio:368 / 176; }
@media all and (max-width: 767px) {
#rd_media_uzit { width:120px; }
}
#rd_media_uzit_dgm { margin:1.0em auto 2.0em auto; max-width:500px; aspect-ratio:786 / 592; }
#rd_media_branch { margin:1.0em auto 0 auto; max-width:500px; aspect-ratio:837 / 592; }
#btn-tdl { width:15.0em; height:3.5em; margin:auto; text-align:center; }
#btn-tdl a { display:flex; justify-content:center; align-items:center; position:relative; width:100%; height:100%; padding-left:1.0em; box-sizing:border-box; border-radius:1000px; border:var(--cl-tbsblue) 2px solid; text-decoration:none; color:#000; font-weight:700; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) { #btn-tdl a:hover { transform:translateX(4px); opacity:0.7; } }
#btn-tdl a::before,
#btn-tdl a::after { display:block; position:absolute; content:""; background-position:center center; background-repeat:no-repeat; background-size:100% auto; }
#btn-tdl a::before { width:2.4em; height:2.4em; left:0.8em; top:calc(50% - 1.2em);  background-image:url(../img/tech/rd_mirai_tdl.png); }
#btn-tdl a::after { width:1.2em; height:1.2em; right:1.0em; top:calc(50% - 0.6em);  background-image:url(../img/tech/rd_mirai_exlink.png); }
@media all and (max-width: 767px) {
#btn-tdl { font-size:90%; }
}

.it-dvlp-box { display:flex; padding-top:0.5em; }
.it-dvlp-box:last-child { padding-bottom:0; }
.it-dvlp-box-t { flex:1; }
#it_dx_dvlp1 { margin:7px 15px auto 0; width:150px; aspect-ratio:520 / 272; }
#it_dx_dvlp2 { margin:25px 25px auto 10px; width:130px; aspect-ratio:512 / 208; }
#it_dx_dvlp3 { margin:0 25px 15px 10px; width:130px; aspect-ratio:1 / 1; }
@media all and (max-width: 500px) {
#it_dx_dvlp1 { width:120px; }
#it_dx_dvlp2 { width:100px; }
#it_dx_dvlp3 { width:100px; }
}


/* product */

#product_camera1 { margin:0 auto 1.0em auto; max-width:860px; aspect-ratio:790 / 526; }
#product_camera2 { margin:0 auto; max-width:860px; aspect-ratio:784 / 440; }
#product_ve { margin:0 auto; max-width:860px; aspect-ratio:790 / 445; }
#product_sound { margin:0 auto; max-width:860px; aspect-ratio:790 / 445; }
#product_light { margin:0 auto; max-width:860px; aspect-ratio:790 / 593; }
#product_td { margin:0 auto; max-width:860px; aspect-ratio:790 / 593; }


/* broadcast */

#broadcast_p1,
#broadcast_p2 { margin:0 auto 1.0em auto; max-width:860px; aspect-ratio:790 / 435; }
#broadcast_p3 { margin:0 auto 1.0em auto; max-width:860px; aspect-ratio:1185 / 888; }


/* it */

#it_ict { margin:0 auto; max-width:860px; aspect-ratio:1280 / 720; }
#it_dx_paperless { margin:0 auto; max-width:860px; aspect-ratio:992 / 316; }
#it_dx_ai1,
#it_dx_ai2,
#it_dx_ai3 { margin-right:0.5em; width:100px; aspect-ratio:1 / 1; }
#it_csirt { margin:1.0em auto; width:500px; aspect-ratio:940 / 180; }
@media all and (max-width: 767px) {
#it_csirt { margin:1.0em 10%; width:80%; }
}
#it_infra { margin:0 auto; max-width:860px; aspect-ratio:1048 / 384; }
#it-ai { width:65%; margin:0 20% 2.0em 20%; }
@media all and (max-width: 767px) {
#it-ai { width:100%; margin:0 0 2.0em 0; }
}
.it-ai-box { display:flex; padding-bottom:0.5em; }
.it-ai-box:last-child { padding-bottom:0; }
.it-ai-box-t { flex:1; }


/* ott */

#ott-p1-box { max-width:860px; margin:0 auto 2.0em auto; }
#ott_p1 { aspect-ratio:1280 / 720; }
#ott_p2 { margin:0 auto; max-width:860px; aspect-ratio:746 / 528; }
#ott_p3 { margin:0 auto; max-width:860px; aspect-ratio:800 / 450; }
#ott_tbsid { margin:0.5em auto 1.5em auto; width:300px; aspect-ratio:662 / 176; }
@media all and (max-width: 767px) {
#ott_tbsid { width:170px; }
}
#ott_voxx { margin:1.5em auto; width:400px; aspect-ratio:1474 / 505; }
@media all and (max-width: 767px) {
#ott_voxx { width:250px; }

}

/*eof*/