@charset "UTF-8";

:root{
    --gt-main:23, 115, 134;
}

/* ITP-GeoTracer */
/* COMMON */
.uq_itpgt_title1{
    display: flex;
    align-items: center;
    padding: 1.5rem 0 0.5rem 0;
    font-size: 2rem;
    font-weight: bold;
    color: rgb(var(--gt-main));

    &::before{
        --size:2rem;
        display: inline-block;
        content: "";
        width: var(--size);
        height:var(--size);
        margin-top:-0.25rem;
        margin-right: 0.5rem;
        background-image: url("/itp/images/itp-geotracer/logomark.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    @media (width < 768px) {
        font-size: 1.25rem;
    }
}

.uq_itpgt_title2{
    padding: 0.25rem 0;
    font-size: 1.25rem;
    font-weight: bold;
    color:rgb(var(--gt-main));
}

.uq_itpgt_bg{
    background-color: rgba(var(--gt-main), 0.1);
}

.uq_itpgt_bb{
    border-bottom:1px rgb(var(--gt-main)) solid;
}

.uq_itpgt_flex{
    --gap: 16px;

    display: flex;
    justify-content: space-between;
    column-gap: var(--gap);

    --size:calc(100% - var(--gap) * var(--elm));

    & *{
        min-width: 0;
    }

    & > *{
        width: var(--size);
    }

    & img{
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
    }

    @media (width < 768px) {
        flex-direction: column;
        column-gap:0;
        row-gap: 16px;

        & > * {
            width:100%;
        }
    }
}

.uq_itpgt_card{
    display: grid;

    & .uq_itpgt_cardImg{
        width: 100%;
        object-fit: cover;
        aspect-ratio: 16/9;
        grid-column: 1/-1;
        grid-row: 1;
    }

    & .uq_itpgt_cardFooter{
        grid-column: 1/-1;
        grid-row: 1;
        align-self: flex-end;

        background-color: rgba(var(--gt-main), 0.9);
        color: #fff;
        padding: 0.3rem 0.3rem 0.3rem 0.3rem;
        width: 16rem;
        clip-path: polygon(0% 0%, 0% 100%, 85% 100%, 80% 0%);
    }
}

/* SECTION */
.uq_itpgt_hero{
    background-color: #ccc;
    background-image:url("/itp/images/itp-geotracer/itp-gt-heroBG.jpg");
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
    height: calc(100vh - (60px * 2)); /* headerの2倍くらい引いて下に空白を作っておく */
    
    @media (width < 768px) {
        height: 52vh;    
    }
}

.uq_itpgt_hero_bgeff{
    width: 100%;
    height: 100%;
    backdrop-filter: blur(7px);
    background-color: rgba(0, 0, 0, 0.4);
    display: grid;
    position: relative;
}

.uq_itpgt_hero_container{
    justify-self:center;
    align-self: center;
    grid-column: 1/-1;
    grid-row: 1;
    width: 100%;
    text-align: center;
}

.uq_itpgt_hero_inner{
    width: 100%;
    max-width:1080px;
    margin-left: auto;
    margin-right: auto;
    padding: 5rem;

    @media (width < 768px) {
        padding:1rem;
    }
}

.uq_itpgt_hero_title{
    font-size: 6rem;
    font-weight: bold;
    color: #fff;

    & img{
        width:100%;
        filter: drop-shadow(1px 1px 3px #fff);
    }

    @media (width < 768px) {
        font-size: 1.75rem;
    }
}

.uq_itpgt_hero_subTitle{
    font-size:2rem;
    color: #fff;

    @media (width < 768px) {
        font-size: 1rem;
    }
}


.uq_itpgt_hero_container::after{
    --size:2rem;
    display: block;
    content: "";
    width: var(--size);
    aspect-ratio: 1/1;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    background-color: #fff;
    position: absolute;
    left:calc(50% - var(--size)/2);
    bottom:5rem;
    transition: all 0.3s;
}

.uq_itpgt_hero:hover .uq_itpgt_hero_container::after{
    bottom: 3rem;
}

.uq_itpgt_ctopnav_container{
    background-color: rgba(var(--gt-main), 0.33);
    
    & > div{
        display: flex;
        align-items: center;
        
        & > div{
            margin-top:12px;
            margin-left: 1rem;
        }

        @media (width < 768px) {
            flex-direction: column;  
            
            & > div{
                margin-left: 0;
            }
        }
    }

    & a{
        text-decoration: underline;

        &:is(:hover, :focus){
            color: rgb(var(--gt-main));
        }
    }

    & a.uq_itpgt_cta_btn{
        display: inline-block;
        background-color: rgb(var(--gt-main));
        color: #fff;
        padding: 0.25rem 1rem 0.15rem 1rem;
        text-decoration: none;
        border-radius: 6px;

        &:is(:hover, :focus){
            text-decoration: underline;
        }
    }
}


.uq_itpgt_hcard_conatiner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    
    @media (width < 768px) {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    
    @media (width >= 768px) {   
        & .uq_itpgt_hcard:nth-of-type(even){
            & .uq_itpgt_hcardImg{
                order: 2;
            }
        }
    }
}

.uq_itpgt_hcard{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;

    @media (width < 768px) {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap:1rem;
    }

    & .uq_itpgt_hcardTitle{
        padding-bottom: 0.25rem;
        margin-bottom:0.5rem;
        border-bottom:1px rgb(var(--gt-main)) solid;
        font-size: 1.25rem;
    }

    & .uq_itpgt_hcardTxt{
        line-height: 1.75;
    }

    & .el_checkList{
        margin-top: 1rem;
    }
}

.uq_itpgt_feature_container{
    counter-reset: point;

}

.uq_itpgt_featureItem{
    counter-increment: point;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;

    @media (width < 768px) {
        grid-template-columns: 1fr;
    }

    & *{
        min-width: 0;
    }

    &:nth-last-of-type(n + 2){
        margin-bottom: 2rem;
    }

    & .uq_itpgt_featureImg{
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
    
    & .uq_itpgt_featureDesc{
        padding-left: 1rem;

        @media (width < 768px) {
            padding:1rem 0;
        }
    }

    & .uq_itpgt_featureTitle{
        font-size: 2rem;
        font-weight: bold;
        color: rgb(var(--gt-main));

        &::before{
            content: "Point：" counter(point);
            display: block;
            margin-top: -0.5rem;
        }

        @media (width < 768px) {
            font-size: 1.5rem;
        }
    }

    & .uq_itpgt_featureTxt{
        font-size: 1.25rem;
        line-height: 2;
        text-wrap:balance;

        @media (width < 768px) {
            line-height: 1.75;
            font-size: 1rem;
        }
    }
}


.uq_itpgt_other_container{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5%;
    row-gap: 2rem;

    & .uq_itpgt_otherItem{
        border: 1px rgb(var(--gt-main)) solid;
    }

    & .uq_itpgt_otherItemTitle{
        padding: 0.5rem;
        background-color: rgba(var(--gt-main), 0.8);
        color: #fff;
    }
    
    & .uq_itpgt_otherItemDesc{
        padding:0.5rem;
    }
}

.uq_itpgt_seihinImg_container{
    display: grid;
    grid-template-columns: repeat(auto-fill, clamp(180px, 22%, 100%));
    column-gap: 16px;

    & img{
        width: 100%;
        max-height:200px;
    }

    @media (width < 768px) {
        grid-template-columns: 1fr 1fr;
    }
}

.uq_itpgt_spec_container{
    & .uq_itpgt_specTable{
        margin-bottom: 3rem;
    }

    & .uq_itpgt_specTable > table{
        width: auto;
        table-layout: fixed;

        & :is(th, td){
            border: 1px #ccc solid;
        }

        & th{
            font-weight: bold;
            padding:0.5rem 1rem;
            background-color: rgba(var(--gt-main), 0.1);

            vertical-align: middle;
        }
        
        & td{
            padding:0.5rem 1rem;
            background-color: #fff;
        }
    }
}

.uq_itpgt_cta_container{
    padding: 3rem;
    background-color: rgba(var(--gt-main), 0.33);

    @media (width < 768px) {
        padding:1rem;
    }

    & .ly_container{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & a.uq_itpgt_cta_btn{
        position: relative;
        display: flex;
        justify-content: center;
        align-items:center;
        text-align: center;
        
        background-color: rgb(var(--main));
        color: #eee;
        border-radius: 1rem;

        margin-left: auto;
        margin-right: auto;
        padding: 1.25rem 4rem 1rem 2rem;
        
        font-size: 1.5rem;
        font-weight: bold;

        @media (width < 768px) {
            width: 100%;
            font-size: 1rem;
        }
        
        &::after{
            --size:1.5rem;
            display: block;
            content: "";
            position: absolute;
            width: var(--size);
            height: var(--size);
            
            top:calc(50% - var(--size)/2);
            right:var(--size);
            
            background-color: #fff;
            clip-path: polygon(0% 0%, 0% 100%, 90% 50%);
            transition: all 0.25s;
        }

        &:is(:hover, :focus)::after{
            right:calc(var(--size) - 0.25rem);
        }
    }
}