@charset "UTF-8";

#menu_button_clk{
    display: none;
}

#header{
    --menu-height:56px;

    background-color: var(--key-hd-bg-color);
    color:var(--light-text-color);
    position: sticky;
    z-index: 9999;
    top:0;
    height:var(--menu-height);
    width:100vw;
}

#logo > div.img{
    width:200px;
    height:var(--menu-height);
}

#logo div.img  img{
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border: none;
	vertical-align:top;
}

#contact{
    text-align: center;
}

#contact a{
    display: inline-block;
    padding: 1em 1.5em;
    width: 100%;
    height:100%;
    background-color: var(--main-color);
    color:var(--light-text-color);
}

#header a.ext_website{
    position: relative;
}

#header a.ext_website::after{
    --size:1.2rem;
    display: block;
    position: absolute;
    content: '';
    width:var(--size);
    height:var(--size);
    right:-1.5rem;
    top:-0.05rem;
    background-image: url('/itp/images/ico/ico_newwindow_dark.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
}


@media screen and (min-width:769px) {
    header > div.wl,
    div.header-top, div#logo, div#navi, div#contact,
    div#navi > nav,
    ul.header_items,
    ul.header_items > li{
        height:100%;
    }

    header > div.wl{
        position: relative;
    }

    #contact a:hover{
        text-decoration-line: underline;
        text-decoration-thickness: 0.2em;
        text-underline-offset: 0.15em;
    }

    .header-top{
        display: grid;
        grid-template-columns: 200px 1fr 110px;
    }

    #navi{
        text-align: center;
    }

    #navi > nav{
        margin:0 auto;
        padding:0;
        text-align: center;
    }

    #navi > nav > ul.header_items{
        text-align: center;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    ul.header_items > li{
        --item_margin:0.5rem;
        text-align: center;
        z-index: 999;
        padding-left:var(--item_margin);
        padding-right:var(--item_margin);
        color:#fff;
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;

        --offset:6px;
    }

    ul.header_items > li:hover > a,
    ul.header_items > li > a:hover > span{
        text-decoration: underline;
    }

    ul.header_items > li:not(.dr) > a{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
    }

    ul.header_items > li:not(.dr) > a:hover::after{
        content: '';
        display: block;
        position: absolute;
        outline:1px #fff dashed;
        width:calc(100% + var(--offset) * 2);
        height:calc(100% - var(--offset) * 2);
    }

    ul.header_items > li.dr::after{
        content: '';
        display: block;
        position: relative;
        width: 0.4rem;
        height:0.4rem;
        top:-0.15rem;
        border-right:  3px #fff solid;
        border-bottom: 3px #fff solid;
        margin-left:0.2rem;
        transform:rotate(45deg);
        transition: all 0.2s;
    }

    ul.header_items > li.dr:hover{
        outline:1px #fff dashed;
        outline-offset: calc(-1 * var(--offset));
    }

    ul.header_items > li.dr:hover::after{
        transform: rotate(-135deg);
        top:0.1rem;
    }

    ul.header_items > li:hover div.content-expand{
        display: block;
    }

    /* 共通インナーメニュー */
    div.content-expand{
        position: absolute;
        display: none;

        z-index: 100;
        background-color: #fafafa;
        color:#333;
        left:0;
        top:100%;
        width:100%;
        max-width:1080px;
        padding: 1rem;
        box-shadow: 0 3px 5px -1px rgba(0,0,0,.25);
    }

    .inner_items{
        display: flex;
        justify-content: center;
    }

    #navi > nav li.wbr span,
    #contact span{
        /* headerメニュー内の改行を強引に阻止する */
        white-space: nowrap;
        display: inline-block;
    }

    .minbutu{
        position: relative;
    }
    .minbutu::after{
        --size:1.2rem;
        position: absolute;
        display: block;
        width:var(--size);
        height:var(--size);
        content: url("/itp/images/ico/ico_newwindow.svg");
        right:0.4rem;
    }

    /* 車載機インナーメニュー */
    #products-dropdown ul{
        --item-margin:10px;

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

    #products-dropdown li{
    margin-left:var(--item-margin);
    margin-right: var(--item-margin);
    position: relative;
    }

    #products-dropdown li a{
        display: block;
        width: 100%;
        height: 100%;
        padding: 12px 6px;
    }

    #products-dropdown li a:hover{
        background-color: #fff;
        filter: drop-shadow(0 3px 5px rgb(0 0 0 / 14%));
        text-decoration: underline;
        outline: 1px var(--sub-color) solid;
    }

    #products-dropdown li a:hover span:first-of-type{
        text-decoration: underline;
    }

    #products-dropdown div.img > img{
        height: 64px;
        width: auto;
        object-fit: contain;
    }

    span.header_bold{
        font-weight: bold;
        font-size: 1rem;
    }

    span.header_icon{
        background-color: var(--base-bg-color);
        color: var(--sub-color);
        border: 1px var(--sub-color) solid;
        font-size:0.66rem;
        font-weight: bold;
        padding:0;
        position: absolute;
        overflow: hidden;
        white-space:nowrap;
        word-break: keep-all;
        word-wrap: normal;
        text-align: center;

        width:3.5rem;
        height: 1rem;

        top:0.5rem;
        left:0.5rem;
    }

    span.header_icon.ico_dr{
        left:3px;
    }

    span.header_icon.ico_navi{
        left: calc(3.5rem + 3px + 3px);
    }

    /* ITP */
    #itp-dropdown .inner_items{
        display: grid;
        grid-template-columns: repeat(4, max-content);
        column-gap: 60px;
        row-gap:1rem;
        text-align: left;

        font-size: 0.95rem;
    }

    #itp-dropdown .inner_items li,#case-dropdown .inner_items li{
        line-height: 1.5rem;
    }

    #itp-dropdown .inner_items > div > div,#case-dropdown .inner_items > div > div{
        font-weight: bold;
        margin-bottom: 0.6rem;
        position: relative;
    }

    #itp-dropdown .inner_items > div > div::after,#case-dropdown .inner_items > div > div::after{
        content: '';
        position: absolute;
        display: block;

        height:1px;
        width:3rem;
        background-color: var(--border-color);
    }

    #itp-dropdown .inner_items > div > div+ul, #case-dropdown .inner_items > div > div+ul{
        margin-bottom:0.6rem;
    }

    #itp-dropdown .inner_items li a:hover,#case-dropdown .inner_items li a:hover{
        text-decoration: underline;
    }

    .inner_grid{
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        grid-auto-flow: column;
        column-gap: 16px;
        row-gap:0.5rem;
    }

    /* 物流展SP告知 */
    div.spannounce{
        position: absolute;
        width:100%;
        left:0;
        top:56px;
        padding:3px 0;
        background-color: var(--main-color);
        color:var(--light-text-color);
        border-top:1px #fff solid;
        border-bottom:1px #fff solid;
    }
    div.spannounce a{
        position: relative;
        display: block;
        width:1080px;
        margin: 0 auto 0 auto;
        padding-right:1.25rem;
        text-align: right;
        text-decoration: underline;
    }

    div.spannounce a::after{
        --size:0.6rem;
        content: '';
        display: inline-block;
        position: absolute;
        width:0;
        height: 0;
        top:calc(var(--size) / 2);
        right: 4px;

        border-left:var(--size) #fff solid;
        border-top: calc(var(--size) / 1.41) transparent solid;
        border-bottom: calc(var(--size) / 1.41) transparent solid;
    }

    div.spannounce a:hover::after{
        right:0;
    }
    /* 物流展SP告知 */
	
	
	/* 導入事例 下拉菜单  20260518 */
	.dr_case{position: relative;}
	.dr_case .content-expand{width: 180px;}
}
@media screen and (max-width:1019px) {
    ul.header_items > li.dr{
        grid-row: 1 / span 2;
    }

    .minbutu::after{
        display: none;
    }
}
@media screen and (max-width:768px){

    /* control button類 */
    .menu_button{
        position: absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
    }

    .menu_button, .menu_button::before, .menu_button::after{
        content: '';
        display:block;
        width:40px;
        height:3px;
        position: absolute;
        top:24px;
        left:10px;
        background-color: var(--light-bg-color);
        transition: all var(--delay);
    }

    .menu_button::before{
        top:-12px;
        left:0px;
    }
    .menu_button::after{
        top:12px;
        left:0px;
    }

    #contact{
        width:60px;
        height:var(--menu-height);
        padding: 0;
        margin: 0;
        overflow: hidden;
        position: absolute;
        right:60px;
        top:0px;
    }

    #contact a{
        padding:0;
    }

    #contact a::before{
        content: '';
        display: block;
        margin-left:auto;
        margin-right:auto;
        width:60px;
        height:var(--menu-height);
        background-image: url('../images/common/contact.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position:0px center;
    }

    #menu_button_clk:checked~#navi .menu_button{
        content: '';
        background-color: transparent;
    }

    #menu_button_clk:checked~#navi .menu_button::before{
        transform: rotate(40deg);
        top:0;
        left:0;
    }

    #menu_button_clk:checked~#navi .menu_button::after{
        transform: rotate(-40deg);
        top:0;
        left:0;
    }

    .header-top{
        display: block;
    }

    #navi{
        width:60px;
        height:var(--menu-height);
        overflow: hidden;
        padding: 0;
        margin: 0;
        border:0;
        background-color: var(--middle-bg-color);
        position: absolute;
        right:0px;
        top:0px;
    }

    #navi > nav{
        position: fixed;
        left: 100vw;
        width:100vw;
        height: 100vh;
        top:var(--menu-height);
        transition: all .5s;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* カットイン */
    #menu_button_clk:checked~#navi > nav{
        display: block;
        position: fixed;
        background-color: var(--light-bg-color);
        color:var(--dark-text-color);
        width:100vw;
        height: 100%;
        left:0;
        top:var(--menu-height);
        z-index: 9999;
        transition: all .3s;
        overflow-x: hidden;
    }

    
    /* 中身 */
    #navi > nav{
        padding-bottom:10rem;
    }

    #navi > nav a,
    #navi > nav a:visited,
    #navi > nav a:active,
    #navi > nav a:hover
    {
        text-decoration: underline;
        text-underline-offset: 0.2rem;
    }

    .header_bold{
        font-weight: 700;
        position: relative;
    }

    .header_bold::after{
        content: '';
        position: absolute;
        display: block;
        top:calc(0.3rem + 3px / 2);
        right: 1rem;
        width:0.6rem;
        height:0.6rem;
        border-right:  3px var(--sub-color) solid;
        border-bottom: 3px var(--sub-color) solid;
        transform: rotate(-45deg);
    }


    .header_items > li{
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .header_items > li > a:only-child{
        position: relative;
        display: block;
        padding:1rem 0;
        font-weight: 700;
        text-align: center;
    }

    .header_items > li.dr > a:first-child > span{
        display: block;
        font-size: 1.25rem;
        margin:1rem 0;
    }

    .inner_items > div > div{
        margin-top:0.5rem;
    }

    .inner_items > div > div::before{
        content: "■";
    }

    #products-dropdown .inner_items > ul > li{
        background-color: #fafafa;
        margin-bottom:3px;
        border-radius: var(--border-radius);
    }

    #products-dropdown .inner_items > ul > li > a > div{
        position: relative;
        display: grid;
        grid-template-columns: 3fr 2fr;
        align-items: center;
    }

    span.header_icon{
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width:3.5rem;
        font-size:0.75rem;
        padding-left: 3px;
        padding-right: 3px;
        white-space: nowrap;
        background-color: var(--base-bg-color);
        color: var(--sub-color);
        border: 1px var(--sub-color) solid;
        top:6px;
    }

    span.header_icon.ico_dr{
        left:6px;
    }

    span.header_icon.ico_navi{
        left:calc(6px + 3.5rem + 6px);
    }

    #itp-dropdown .inner_items > div > div,#case-dropdown .inner_items > div > div{
        margin-bottom:0.5rem;
    }

    #itp-dropdown .inner_items > div > ul,#case-dropdown .inner_items > div > ul{
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 6px;
        column-gap: 9px;
        margin-bottom: 1rem;
    }

    #itp-dropdown .inner_items > div > ul > li,#case-dropdown .inner_items > div > ul > li{
        position: relative;
        font-size:0.85rem;
        padding:0.75rem 10px 0.75rem 6px;
        margin-top:3px;
        background-color: var(--base-bg-color);
        border-radius: var(--border-radius);
    }

    #itp-dropdown .inner_items > div > ul > li::after,#case-dropdown .inner_items > div > ul > li::after{
        content: '';
        position: absolute;
        display: inline-block;

        border-right:2px var(--border-color) solid;
        border-bottom:2px var(--border-color) solid;
        transform: rotate(-45deg);
        width:0.4rem;
        height:0.4rem;
        top:calc(50% - 0.4rem / 2 - 1px);
        right:10px;
    }

    .header_items > li:nth-of-type(n + 4){
        position: relative;
        color:var(--sub-color);
        border: 1px var(--sub-color) solid;
        width: calc(100% - 2rem);
        padding: 0rem 0.2rem;
        margin:0 auto 1rem auto;
        border-radius: var(--border-radius);
        background-color: var(--base-bg-color);
    }

    .header_items > li:nth-of-type(n + 3)::after{
        content: '';
        position: absolute;
        display: block;
        top:calc(50% - (0.6rem + 3px) / 2);
        right: 1rem;
        width:0.6rem;
        height:0.6rem;
        border-right:  3px var(--sub-color) solid;
        border-bottom: 3px var(--sub-color) solid;
        transform: rotate(-45deg);
    }

    .minbutu{
        position: relative;
    }
    .minbutu::before{
        --size:1.5rem;
        position: absolute;
        display: block;
        width:var(--size);
        height:var(--size);
        content: url("/itp/images/ico/ico_newwindow_dark.svg");
        left:calc(50% + 5rem);
        top:calc(50% - var(--size) / 2 - 2px);
    }

    /* 物流展SP告知 */
    div.spannounce{
        position: absolute;
        width:100%;
        left:0;
        top:56px;
        padding:3px 0;
        background-color: var(--main-color);
        color:var(--light-text-color);
        font-size:0.9rem;
    }
    div.spannounce a{
        position: relative;
        display: block;
        margin: 0 auto 0 auto;
        padding-right:1.25rem;
        text-align: right;
        text-decoration: underline;
    }

    div.spannounce a::after{
        --size:0.6rem;
        content: '';
        display: inline-block;
        position: absolute;
        width:0;
        height: 0;
        top:calc(50% - var(--size) / 2 - 2px);
        right: 4px;

        border-left:var(--size) #fff solid;
        border-top: calc(var(--size) / 1.41) transparent solid;
        border-bottom: calc(var(--size) / 1.41) transparent solid;
    }
    /* 物流展SP告知 */
}