@charset "utf-8";
/* CSS Document */

#top-nav .nav-item .active {
    color: #fff;
    background-color: #2f8fc0;
}

.list-arrow > li {
    padding: 8px 0 8px 28px;
    text-indent: -20px;
}
.list-arrow > li > a { 
    font-size: 14px;
    text-decoration: none;
}
.list-arrow > li > a:hover { text-decoration: underline; }
#products .arrow {
    margin-right: 6px;
    margin-bottom: 3px;
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
    line-height: 1;
    vertical-align: middle;
    color: #3090c3;
    background: currentColor;
    border: 1px solid currentColor;
    border-radius: 2px;
    box-sizing: content-box;
}
#products a:hover .arrow {
    opacity: .8;
}
#products .arrow::before {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 1px;
    width: calc(tan(60deg)* 8px / 2);
    height: 8px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #fff;
    content: '';
}
/* 詳細情報ボタン */
a.btn-products {
    padding: 4px 4px 5px 9px;
    color: #fff;
    background-color: #3090c3;
    text-decoration: none;
}
a:hover.btn-products {
    opacity: .8;
}
.btn-products .btn-arrow {
    margin-bottom: 4px;
    margin-left: 4px;
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    line-height: 1;
    vertical-align: middle;
}

.btn-products > .btn-arrow::after {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 1px;
    width: calc(tan(60deg)* 12px / 2);
    height: 12px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #fff;
    content: '';
}

/* print */
@media print {
    a.btn-products {
        color: #000!important;
    }
}