@charset "UTF-8";

html{
    scroll-behavior:smooth;
}

.to_details_block > a{
    text-align: left;
}

/* 比較表 */
.comp{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: row;
    column-gap: 4rem;
    row-gap: 1rem;
}

.multi_row{
    text-align: center;
    grid-column: span var(--span);
}

.comp_hd{
    grid-column: 1/-1;
    margin-top:3rem;
    font-weight: bolder;
    text-align: left;
    font-size:1.25rem;
    border-bottom:1px var(--border-color) solid;
    padding:0.3rem 0;
}

.comp_item{
    position: relative;
}

.comp_item:not(.comp_hd){
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size:0.9375rem;
}

.comp_item.kisyu_hd > div:first-child{
    font-size:1.125rem;
    font-weight: bold;
    margin-bottom:1rem;
}

.comp_item.no_info{
    font-size:1.5rem;
    color:var(--middle-text-color);
}

.comp_item strong{
    text-decoration: none;
    font-size:var(--fs-larger);
}

.comp_item a.cta_button::after{
    content: '';
}

.comp_item .to_details{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom:0;
    width:100%;
    left:0;
    border: 1px var(--sub-color) solid;
    color: var(--sub-color);
}

.comp_item a:hover .to_details{
    background-color: var(--sub-color);
    color: var(--light-text-color);
}

.comp_item .to_details::after{
    content: "";
    position: relative;
    display: block;
    width: 0.5rem;
    height:0.5rem;
    border-right: 2px var(--sub-color) solid;
    border-bottom: 2px var(--sub-color) solid;
    transform: rotate(-45deg);
    top:0;
    right: 0;
}

.comp_item a:hover .to_details::after{
    border-right-color: var(--base-bg-color);
    border-bottom-color: var(--base-bg-color);
    right:-4px;
}


@media screen and (max-width:768px){
    .comp{
        column-gap: 1%;
    }
}


/* デジタコとはブロック */
.whtis:nth-of-type(n+2){
    margin-top:4rem;
}

.whtis .whtis_comp img{
    height:180px;
    object-fit: contain;
}

.whtis img+div{
    text-align: center;
    font-size:93%;
}

.whtis_comp{
    display: flex;
    justify-content: space-between;
    flex:0 0 50%;

    gap:2rem;
}

.whtis_comp > .whtis_comp_item{
    width:50%;
}

.whtis_comp_item{
    background-color: var(--base-bg-color);
    padding:1rem;
    border-radius: 1rem;;
    display: flex;
    flex-direction: column;
    gap:2rem;
    font-size:93%;
    margin-top:2rem;
}

.whtis_comp_table{
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: 1.5fr 2fr 2fr;
    column-gap: 2rem;
    row-gap:1rem;
}

.whtis_comp_table_item{
    text-align: center;
    align-self: center;
}

.whtis_comp_table_item:nth-last-of-type(3n){
    font-weight: bold;
}

.whtis_comp_item_hd{
    border-bottom:1px var(--border-color) solid;
    padding:0.25rem 0;
    margin-bottom:0.5rem;
    text-align: center;
}

.whtis > div > div > p{
    line-height: 1.75rem;
    margin-bottom:1.5rem;
    text-indent: 1em;
}

.whtis > div > div > p:last-of-type{
    margin-bottom: 0;
}

@media screen and (max-width:768px) {
    .whtis_comp_item{
        flex-direction: column;
        width:100%;
    }

    .whtis_comp_item > div:first-of-type{
        text-align: center;
    }
}


/* catalog */
.catalog{
    --catalog-img-size:220px;
}

.catalog > div{
    margin-top: 3em;
}

.catalog_item{
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:20px;
}

.catalog_item::before,
.catalog_item::after{
    content: '';
    display: block;
    width:var(--catalog-img-size);
    order: 999;
}

.catalog_image{
    width:var(--catalog-img-size);
}

.catalog_image > img{
    filter: drop-shadow(2px 2px 4px var(--shadow-color));
}

.catalog_image > h6{
    font-size:120%;
    text-align: center;
    margin:1em 0.5em auto;
}

.catalog_image > .dl_link{
    font-size:120%;
    text-align: center;
    margin:0.5em auto;
}

.catalog_image > .dl_link > a{
    color:var(--sub-color);
    font-weight: bold;
}

.catalog_image > .dl_link > a:hover{
    text-decoration: underline;
}

.catalog_image > .dl_link > a::before{
    content: "\01F5C5";
    font-size:150%;
    margin-right:0.5rem;
}

.catalog_image > .dl_link + .remarks{
    padding:0.5rem 0.5rem;
    text-align: center;
}

.catalog_remark{
    margin-top:3em;
    padding:1em 0;
    border:1px #aaa solid;
    border-radius: 1em;
    text-align: center;
}

.catalog_remark img{
    width:112px;
    margin-right:1rem;
}

@media screen and (max-width:768px) {
    .catalog_item{
        justify-content: center;
    }
}


/* 製品個別ページ */
h2{
    background-color: var(--light-bg-color);
    border-radius: var(--border-radius);
    padding-left:1rem;
    margin-bottom:1rem;
}

.products_bg{
    background-color: var(--light-bg-color);
    padding-top:5rem;
    padding-bottom: 5rem;
}

.products_hd{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.products_hd_desc{
    margin-top:2rem;
}

.products_hd_desc ul:nth-of-type(n + 2){
    margin-top:1rem;
}

.products_hd_desc li{
    line-height: 175%;
}

.products_hd_img{
    text-align: center;
    font-weight: bold;
}

.products_item{
    --sub_box_size:50%;

    width: 100%;
    margin:2rem auto;
    display: flex;
    column-gap: 2rem;
}


.products_item div.img{
    position: relative;
}

.products_item div.img > img > span{
    position: absolute;
    right:0;
    bottom:0;
    z-index: 10;
    background-color: rgba(0,0,0,0.8);
    color:var(--light-text-color);
    padding:0.25rem 0.5rem;
}

.products_item h4{
    border-bottom:1px var(--border-color) solid;
}

.products_item h4:nth-of-type(n + 2){
    margin-top: 2rem;
}

.products_item_hd{
    text-align: center;
    flex:0 0 var(--sub_box_size, 50%);
    align-self: center;
}

.products_item_desc{
    align-self: center;
    flex:1 1 calc(100% - var(--sub_box_size), 50%);
}

.products_item_desc h4{
    position: relative;
}

.products_item_desc h4 > span{
    position: relative;
    display: inline-block;
    
    white-space: nowrap;
    background-color: var(--dark-bg-color);
    color: var(--light-text-color);
    right:-1rem;
    font-size:0.8rem;
    padding:3px 6px;
    border-radius: vaR(--border-radius);
}

.products_item_desc h4 > span.d2x{
    background-color: var(--main-color);

}

.products_item_desc h4 > span.d2d{
    background-color: var(--sub-color);

}

.products_item_desc p{
    line-height: 175%;
    margin-top:1rem;
}

.products_item:nth-of-type(even){
    flex-direction: row-reverse;
}

.douga{
    margin:1.5rem auto;
    text-align:center;
    width:100%;
    aspect-ratio: 16 / 9;
}

.douga > iframe{
    width:100%;
    height: 100%;
}


.dr_cameras{
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap:10px;
    row-gap:2rem;
}

.dr_cameras > div{
    position: relative;
}

.dr_cameras > div > ul{
    position: relative;
    bottom:0;
}

.dr_cameras > div > div:nth-of-type(1){
    text-align: center;
    border: 1px var(--border-color) solid;
}

.dr_cameras > div > div:nth-of-type(2){
    text-align: center;
    margin: 0.5rem auto;
}

.dr_cameras > div > div:nth-of-type(2) > img{
    width:180px;
    height:120px;
    object-fit: contain;
}


@media screen and (max-width:768px){
    .products_item{
        display: grid;
        grid-template-columns: repeat(var(--cols, 1), 1fr);
    }

    .products_item_hd{
        order: 999;
    }

    .products_item_desc{
        order: -1;
    }

    .products_hd{
        grid-template-columns: 1fr;
    }

    .products_hd_desc{
        margin-top:0;
        order:999;
    }

    .douga{
        width:100%;
    }


    .dr_cameras{
        display: grid;
        grid-template-columns: repeat(2, 1fr);

    }

    .dr_cameras > div > div:nth-of-type(2) > img{
        width:140px;
        height:100px;
        object-fit: contain;
    }
}

div.item_hd{
    padding:0.2rem;
    margin-bottom:1rem;
    border-bottom:1px var(--border-color) solid;
    text-align:center;
    font-weight: bold;
}

.dekirukoto_box{
    --desc-width:50%;

    display: flex;
}
@media screen and (max-width:768px){
    .dekirukoto_box{
        --desc-width:100%;
    }
}

.products_itp_desc{
    width:var(--desc-width);
    order: -1;
}

.products_itp_img{
    width:calc(100% - var(--desc-width));
    
}

.products_itp_img::after{
    content: '';
    display: block;
    position: absolute;
    width:calc(45vw);
    max-width: 885px;
    height: 500px;
    left: 55%;

    background-image: url('../images/itp/img_itp_background_pc_s.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}


.products_itp_img > img{
    /* 
    width:800px;
    position:absolute;
    left:10%;
    top:-4rem;
    filter: drop-shadow(-30px 20px 20px var(--shadow-color));
    */

    display: none;
}

.dekirukoto_item{
    padding: 1rem;
    background-color: var(--base-bg-color);
    border-radius: var(--border-radius);
    margin-top:1rem;
    margin-bottom: 1rem;
}

.dekirukoto_item+.to_details_block > a{
    grid-column-start: 1;
    grid-column: span 2;
}

.dekirukoto_item > div:first-child{
    font-weight: bold;
}

@media screen and (max-width:768px){
    div.products_itp_img{
        display: none;
        width:0;
        height:0;
    }
}

table.spec{
    table-layout: fixed;

}

table.spec th,
table.spec td{
    margin:0.25rem 0;
    padding:0.25rem 0;
}

table.spec tr{
    border-bottom: 1px var(--border-color) solid;
}

table.spec th{
    vertical-align: middle;
}

table.spec.d2d{
    text-align: center;
    vertical-align: middle;
}

table.spec.d2d :is(th:nth-of-type(2),th:nth-of-type(3),th:nth-of-type(4)){
    width:calc((100% - 30%) / 3);
}




table.basic{
    width:100%;
    text-align: center;
}

table.basic tr{
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
}

table.basic tr,
table.basic th,
table.basic td{
    vertical-align: middle;
    align-self: center;
}

table.basic th{
    display: grid;
    align-items: center;
    justify-items: center;
}

table.basic tr.table_hd{
    background-color: var(--light-bg-color);
    border-bottom: 1px var(--border-color) solid;
}


table.basic tr:not(.table_hd){
    padding:0.5rem 0;
}

table.basic tr.table_hd ~ tr:not(.table_hd):nth-of-type(odd){
    background-color: var(--light-bg-color);
}

.dr_meyasu+h4{
    margin-top:3rem;
}

.dr_meyasu + .footnote{
    margin-top:1rem;

    text-align: right;
}



/* 周辺機器 */
.grid.ext{
    width:100%;
    display: grid;
    grid-template-columns: 0.7fr repeat(3, 1fr);
    row-gap: 2rem;
    column-gap: 1rem;
}

.grid.ext .grid_hd{
    background-color: var(--light-bg-color);
    border-radius: var(--border-radius);

    grid-column-start: 1;
    grid-row: span var(--rowspan);
}

.grid.ext :is(.grid_item, .grid_hd){
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.grid.ext .noimg{
    width:120px;
    height:120px;
    color: var(--border-color);
    border: 1px var(--border-color) dashed;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    border-radius: calc(var(--border-radius) * 3);
}

.grid.ext img{
    width:120px;
    height:120px;
    object-fit: contain;
}

/* header shortcut*/
.hd_sc_items{
    --item-width:25%;
    margin-top: 1rem;
    margin-bottom: 1rem;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.hd_sc_item{
    flex:0 0 var(--item-width);
}

.hd_sc_items::before,
.hd_sc_items::after{
    content: '';
    width:var(--item-width);
    order:999;
    display: inline-block;
}

@media screen and (max-width:768px){
    .grid_ext{
        grid-template-columns: repeat(3, 1fr);

        column-gap:6px;
        row-gap:1rem;
    }

    .grid_ext .grid_hd{
        grid-column: span 3;
        flex-direction: row;
    }

    .grid_ext img{
        width:100px;
        height:100px;
        object-fit: contain;
    }

    .hd_sc_items{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .content h2{
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }
}