@charset "utf-8" ;    /* 全体 */
    :root { --pink:#D40986; --blue:#0C93D3; }

    /* 見出し */
    article h2 { 
        font-size: 46px; 
        text-shadow: -2px -2px 0 var(--blue), 2px 2px 0 var(--pink);
    }
    article h2.title_black { position: relative; }
    article h2.title_black:before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-right: 50px solid #000;
        border-top: 50px solid var(--pink); 
        left: 0;
        top: 0;
    }
    article h2.title_black:after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-left: 50px solid #000;
        border-bottom: 50px solid var(--pink); 
        right: 0;
        bottom: 0;
    }
    .triangle{
        content: "";
        position: absolute;
        bottom: -29px;
        left: calc((100% - 100px) / 2);
        width:0;
        height:0;
        border-style:solid;
        border-width: 30px 50px 0 50px;
        border-color: #000 transparent transparent transparent;
    }

    article h3 { font-size: 33px; }
    article h3.title_gtune{ position: relative; font-size: 36px; font-style: italic;}
    article h3.title_gtune:before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-left: 3em solid #910000;
        border-bottom: 3.5em solid #000;
        right: 0;
        top: 0;
    }

    article h3.title_nextgear{ position: relative; font-size: 36px; font-style: italic;}
    article h3.title_nextgear:before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-right: 3em solid #BE008C;
        border-top: 3.5em solid #000;
        left: 0;
        top: 0;
    }

    /* ボタン */
    a.button_w { position: relative; transition: 0.3s; }
    a.button_w:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        left: -5px;
        top: -5px;
        background-color: var(--blue);
        z-index: -1;
        transition: 0.3s;
    }
    a.button_w:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        right: -5px;
        bottom: -5px;
        background-color: var(--pink);
        z-index: -1;
        transition: 0.3s;
    }
    a.button_w:hover{
        letter-spacing: 0.05em;
        text-shadow: -2px -2px 0 var(--blue), 2px 2px 0 var(--pink);
        transition: 0.3s;
    }
    a.button_w:hover::before {
        left: 0; 
        top: 0;
        letter-spacing: 0.05em;
        transition: 0.3s;
    }
    a.button_w:hover::after{
        right: 0;
        bottom: 0;
        transition: 0.3s;
    }
    a.button_pink { position: relative; transition: 0.3s;}
    a.button_pink:after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-left: 2em solid #fff;
        border-bottom: 2em solid var(--pink);
        right: 0;
        bottom: 0;
        transition: 0.3s;
    }
    a.button_pink:hover {
        letter-spacing: 0.05em;
        color: #fff;
        border-color: #fff;
        background-color: var(--pink);
        transition: 0.3s;
    }
    a.button_pink:hover::after{
        border-left: 2.5em solid #b30771;
        border-bottom: 2.5em solid #fff;
        transition: 0.3s;
    }

    article a.button_brand:hover {   
        transition: 1s;     
        -webkit-transform: rotateX(360deg);
        transform: rotateX(360deg);
    }

    a.button_white {
        border: 1px solid #fff;
        position: relative;
        transition: 0.3s;
    }
    a.button_white:after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-left: 2.5em solid #3C3C3C;
        border-bottom: 2.5em solid #fff;
        right: 0;
        bottom: 0;
        transition: 0.3s;
    }
    a.button_white:hover {
        color: #3C3C3C;
        border-color: #3C3C3C;;
        background-color: #fff;
        transition: 0.3s;   
    }
    a.button_white:hover::after{
        transition: 0.3s;
        border-left: 3em solid #2c2c2c;
        border-bottom: 3em solid #3C3C3C;
    }

    /* ブランド */
    article ._lineup img{ width: auto; max-height: 300px; }
    a.button_pink {
        color: var(--pink);
        border: 1px solid var(--pink);
        overflow: hidden;
        background-color: #fff;
    }

    @media(max-width:699px){
        article h2 { font-size: 35px; }
        article h2.title_black:before {
        border-right: 40px solid #000;
        border-top: 40px solid var(--pink); 
    }
    article h2.title_black:after {
        border-left: 40px solid #000;
        border-bottom: 40px solid var(--pink); 
    }
        article h3 { font-size: 25px; } 
        article ._lineup img{ width: auto; max-height: 250px; }
        article h3.title_gtune:before { display: none;}
        article h3.title_nextgear:before { display: none;}
        article ._text {position: absolute; z-index: 2;}
    }