/*--------------------------
     新製品 赤アイコン
--------------------------*/

.brand_new_red {
    position: relative;
}

.brand_new_red::after {
    content: "";
    background: url('../img/new_red.png') no-repeat;
    background-size: 70px 70px;
    /* 画像の幅に合わせて調整 */
    width: 70px;
    /* 画像の高さに合わせて調整 */
    height: 70px;
    /* 画像が見出しに重なるように調整 */
    position: absolute;
    top: -25px;
    right: -10px;
    display: block;
    z-index: 10;
}

@media (max-width: 800px) {
    .brand_new_red::after {
        /* 画像のサイズを調整 */
        background-size: 50px 50px;
        /* 画像の幅に合わせて調整 */
        width: 50px;
        /* 画像の高さに合わせて調整 */
        height: 50px;
        /* 画像が見出しに重なるように調整 */
        top: -15px;
        right: -5px;
    }
}

/*--------------------------
     新製品 緑アイコン
--------------------------*/

/* 各製品ページの新製品は見出しに new_green.png(size:432*138)を重ねて表示する*/
.brand_new_green {
    position: relative;
}

.brand_new_green::after {
    content: "";
    background: url('../img/new_green.png') no-repeat;
    background-size: 130px 60px;
    /* 画像の幅に合わせて調整 */
    width: 130px;
    /* 画像の高さに合わせて調整 */
    height: 60px;
    /* 画像が見出しに重なるように調整 */
    position: absolute;
    top: -25px;
    right: -10px;
    display: block;
    z-index: 10;
}

/* 幅を小さくしたとき右がwindowからはみ出るので調整する。*/
@media (max-width: 1100px) {
    .brand_new_green::after {
        right: 3px;
    }
}

/* 幅を小さくしたとき文字に重ならないようにする。*/
@media (max-width: 700px) {
    .brand_new_green::after {
        /* 画像のサイズを調整 */
        background-size: 65px 30px;
        /* 画像の幅に合わせて調整 */
        width: 65px;
        /* 画像の高さに合わせて調整 */
        height: 30px;
        /* 画像が見出しに重なるように調整 */
        top: -15px;
        /* 画像が見出しに重なるように調整 */
        right: 3px;
    }

}

/* 長い文章の場合の調整 */
@media (max-width: 800px) {
    .brand_new_green.long-text::after {
        /* 画像のサイズを調整 */
        background-size: 65px 30px;
        /* 画像の幅に合わせて調整 */
        width: 65px;
        /* 画像の高さに合わせて調整 */
        height: 30px;
        /* 画像が見出しに重なるように調整 */
        top: -15px;
        /* 画像が見出しに重なるように調整 */
        right: 3px;
    }
}

/*--------------------------
     その他コンポーネント
--------------------------*/

/* ハッシュリンクの位置調整用要素 */

.hash_link_anchor {
    display: block;
    position: relative;
    top: -65px;
    visibility: hidden;
}

/* 発売予定の文字の装飾 */

.upcoming_release {
    color: red;
    font-weight: bold;
}


/* 外部リンクのアイコン */

.material-icons.external-link-icon {
    /* 任意のサイズに変更 */
    transform: scale(0.9);
    /* 位置の微調整 */
    position: relative;
    top: 6px;
    left: 1px;
}



/* 番号の箇条書きの見た目の調整 */
.numbered_list li {
    counter-increment: item;
    margin-right: 20px;
    margin-left: 40px;
    padding-left: 20px;
    text-indent: -30px;
}

.numbered_list li:before {
    content: "(" counter(item) ")";
    margin-right: 5px;
}