@charset "utf-8";

@media screen and (max-width:750px) {


    .content-page .wrapper {
        width: 89%;
    }

    .content-page .main .page_list {
        margin-top: 1rem;
    }





    /*====================================================
                  content_ex
====================================================*/

    .content_ex {
        margin-top: 2.4rem;
    }

    .content_ex .text_img {
        width: 100%;
        height: 31px;
        margin-right: 0;
        margin-bottom: 1.6rem;
    }

    .content_ex .text_img img {
        width: 265px;
        position: absolute;
        top: 0;
        right: 0;
    }


    .content_ex .content.box .txt {
        width: 100%;
        margin-left: 0;
        margin-top: 3rem;
    }

    .content_ex .content.box .txt p {
        line-height: 2.2;
        font-size: 14px;
        letter-spacing: -0.025rem;
    }

    .content_ex .content.box .txt h4 img {
        width: 235px;
    }

    .content_ex .content.box .image img {
        width: 100%;
    }

    .content_ex .image.only_sp {
        width: 100%;
        margin: 2.8rem 0 3rem;
    }

    .content_ex .image.only_sp img {
        width: 100%;
    }


    .content-page .main .title_img,
    #brand.content-page .main .title_img,
    #company.content-page .main .title_img,
    #shop.content-page .main .title_img,
    #news.content-page .main .title_img {
        width: 100%;
        height: 53vw;
        background-size: cover;
        background-position: top center;
    }


    /*====================================================
                  lineup
====================================================*/

    .lineup {
        background-size: cover;
        height: auto;
        padding-bottom: 2.3rem;
    }

    .lineup .wrapp {
        width: 91%;
    }

    .lineup .wrapp h4 {
        margin: 2.5rem auto 1.9rem;
    }

    .lineup .wrapp h4 img {
        width: 127px;
        margin-left: -1rem;
    }

    .lineup .wrapp .box {
        width: 83%;
        flex-direction: row;
    }

    .lineup .wrapp .box li {
        margin-right: 0;
        margin-bottom: 1.3rem;
    }

    .lineup .wrapp .box li img {
        width: 112px;
    }

    .lineup .wrapp .box li p {
        font-size: 14px;
    }

    .lineup .wrapp .box li p span {
        font-size: 12px;
    }


    .link_btn.brand {
        width: 84%;
        height: 75px;
    }

    .link_btn.brand span {
        content: url(../img/SVG/link_btn_brand_off_sp.svg);
        width: 190px;
        margin-left: 1rem;
    }


    .link_btn.brand:hover span {
        content: url(../img/SVG/link_btn_brand_off_sp.svg);
    }



    /*====================================================
                  items
====================================================*/

    .items .wrapp {
        margin: 3.6rem auto 1.8rem;
    }

    .items .wrapp h4 img {
        width: 116px;
    }

    .items .wrapp .box {
        margin-top: 2.4rem;
    }

    .items .wrapp .box div {
        width: 100%;
        margin-bottom: 2rem;
    }

    .items .wrapp .box div p:nth-child(3) {
        font-size: 14px;
        line-height: 1.75;
        margin-top: 0.6rem;
    }


    /*====================================================
                  support_service
====================================================*/

    #support_service {
        padding-top: 3rem;
        margin-top: -3rem;
    }

    .support_service .wrapp {
        width: 100%;
    }

    .support_service .wrapp .box .txt {
        width: 100%;
    }

    .support_service .wrapp .box .txt {
        width: 100%;
        margin-left: 0;
    }

    .support_service .wrapp .text_img {
        right: 0;
    }

    /*====================================================
                  mechanic
====================================================*/

    .mechanic {
        background: url(../img/about/mechanic_bg_sp.png);
        background-size: cover;
        padding: 1.2rem 1.2rem 4.8rem;
        height: auto;
    }

    .mechanic h4 img {
        width: 262px;
    }

    .mechanic .wrapp {
        width: 100%;
    }

    .mechanic .wrapp .txt {
        width: 100%;
        margin-top: 20.8rem;
    }

    .mechanic .wrapp .txt img.txt_img02 {
        width: 258px;
    }

    .mechanic .wrapp .txt p {
        width: 100%;
        font-size: 14px;
        line-height: 2.1;
        margin-top: 1.2rem;
        margin-bottom: 1.5rem;
    }

    .mechanic .wrapp .txt img.txt_img03 {
        width: 325px;
        display: block;
        margin: 0 auto;
    }


    .mechanic .wrapp .txt a {
        display: block;
        margin-top: 2.3rem;
        margin-bottom: 0;
    }

    .mechanic .wrapp .txt a img {
        margin: 0 auto;
    }

    /*====================================================
                cycle-simulator
====================================================*/

    .cycle-simu .wrap {
        margin: 60px 20px 10px 20px;
    }

    .cycle-simu .title {
        row-gap: 20px;
    }

    .cycle-simu .title h4::after {
        margin-top: 10px;
    }

    .cycle-simu .content {
        flex-direction: column-reverse;
        justify-content: start;
        margin: 30px 0 50px 0;
        column-gap: 0%;
    }

    .cycle-simu .content .text_wrap {
        width: 100%;
        margin-top: 30px;
    }

    .cycle-simu .content .text_wrap img {
        width: 84vw;
    }

    .cycle-simu .content .text_wrap h5 {
        margin-top: 20px;
        font-size: 1.3em;
        text-align: left;
        letter-spacing: normal;
    }

    .cycle-simu .content .text_wrap p {
        font-size: 0.9em;
        margin-top: 20px;
    }

    .cycle-simu .content .image_wrap {
        width: 100%;
    }

    .cycle-simu .content .image_wrap img {
        width: 100%;
    }

    .cycle-simu .detail {
        row-gap: 26px;
    }

    .cycle-simu .detail-title::after {
        margin-top: 20px;
    }

    .cycle-simu .menu-item_wrap {
        flex-direction: column;
        width: 70.67%;
        column-gap: normal;
        row-gap: 25px;
        margin: 35px 0;
    }

    .cycle-simu .menu-item {
        width: 100%;
    }

    .cycle-simu .menu-item img {
        width: 100%;
    }

    .cycle-simu .menu-item p {
        font-size: 0.9em;
    }

    .cycle-simu .price-item_wrap {
        row-gap: 30px;
        margin: 30px 0;
    }

    .cycle-simu .price-item {
        width: 100%;
        flex-direction: column;
        align-items: flex-end;
        column-gap: 0;
        row-gap: 16px;
    }

    .cycle-simu .price-title_wrap {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        column-gap: 0;
        row-gap: 20px;
    }

    .cycle-simu .price-title {
        width: 100%;
        font-size: 0.9em;
        text-align: center;
        padding: 12px 14px 10px 14px;
    }

    .cycle-simu .price-title::before {
        background: linear-gradient(75deg, #120f11 0%, #120f11 96%, transparent 96%, transparent 100%);
    }

    .cycle-simu .price-text {
        font-size: 0.9em;
    }

    .cycle-simu .price-text-sub {
        font-size: 0.8em;
        margin-top: 5px;
    }

    .cycle-simu .price {
        font-size: 1.3em;
    }

    .cycle-simu .price-yen {
        font-size: 1em;
    }

    .cycle-simu .price-tax {
        font-size: 0.8em;
    }

    .cycle-simu .info {
        flex-direction: column;
        padding: 20px;
        row-gap: 10px;
        margin-top: 0;
    }


    /*====================================================
            .support_service
====================================================*/

    .support_service .wrapp {
        width: 80%;
        margin: 3.9rem auto 4.5rem;
    }

    .support_service .wrapp h4 {
        margin-bottom: 2.3rem;
    }

    .support_service .wrapp h4 img {
        width: 146px;
        margin-left: -1rem;
    }

    .support_service .wrapp .box .txt h5 {
        padding-bottom: 0.8rem;
        padding-top: 1rem;
        margin-bottom: 0.6rem;
    }

    .support_service .wrapp .box {
        margin-top: 2.7rem;
    }

    .support_service .wrapp .box li {
        margin-bottom: 0.5rem;
        font-size: 14px;
    }

    .support_service .wrapp .box li p:nth-child(2) {
        margin-left: 0.4rem;
    }

    .support_service .wrapp .box p {
        font-size: 14px;
        text-align: justify;
    }

    .support_service .wrapp .box .image {
        width: 78%;
        margin: 0 auto;
    }

    .support_service .wrapp .box .txt h5 img {
        height: 53px;
        margin: 0 auto;
    }



    /*====================================================
                  brand
====================================================*/

    #brand h2 img {
        width: 103px;
    }

    #brand .brand_list {
        width: 89%;
        margin: 2.3rem auto 3.9rem;
    }

    #brand .brand_list .wrapp {
        flex-direction: row;
        justify-content: space-between;
    }

    #brand .brand_list p {
        font-size: 13px;
    }

    #brand .brand_list .txt .mark01 {
        width: 6px;
        margin-left: 0;
        margin-right: 0.2rem;
    }

    #brand .brand_list .txt .mark02 {
        width: 14px;
    }

    #brand .brand_list .txt {
        margin-top: 0.3rem;
        flex-direction: row;
    }

    #brand .brand_list a:nth-child(3n),
    #brand .brand_list a:nth-child(4n) {
        margin-right: 0;
    }

    #brand .brand_list a {
        width: 47.5%;
        margin-right: 0;
        margin-bottom: 1.9rem;
    }


    #brand .brand_list .image {
        width: 100%;
        border: 1px solid #d6d5d6;
    }



    /*====================================================
                  company
====================================================*/

    #company h2 img {
        width: 158px;
    }


    #company :where(.address, .history) .wrapp {
        width: 90%;
    }

    #company .history h5 {
        font-size: 14px;
        margin-bottom: 1.2rem;
    }

    #company :where(.address, .history) .wrapp dl {
        flex-direction: column;
        font-size: 14px;
        padding: 0.7rem 0;
    }

    #company .address .wrapp dt {
        font-size: 14px;
        padding-left: 0;
        width: auto;
    }

    #company .address {
        margin-top: 2.5rem;
        margin-bottom: 2.7rem;
    }

    #company .history {
        margin-bottom: 3rem;
    }

    #company .history .wrapp {
        padding: 1.6rem 1.3rem 2.4rem;
    }

    #company .history .wrapp dl {
        padding: 0.75rem 0;
    }


    #company .history .wrapp dt {
        font-size: 14px;
        padding-left: 0;
        margin-bottom: 0.3rem;
    }

    #company .history .wrapp dd {
        text-indent: 1rem;
    }

    #company .history .wrapp dd::before {
        left: -1rem;
    }


    /*====================================================
                  shop
====================================================*/
    #shop .wrapp {
        width: 89%;
        margin: 2.6rem auto 0;
    }

    #shop h2 img {
        width: 82px;
    }

    #shop .wrapp .image img {
        width: 100%;
    }

    #shop .wrapp .image .logo_img {
        margin: 1.8rem 0;
        width: 253px;
    }

    #shop .address dl {
        flex-direction: column;
        font-size: 14px;
        line-height: 1.75;
        padding: 0.7rem 0;
    }

    #shop .address dt {
        padding-left: 0;
    }


    #shop .anniversary {
        width: 89%;
        border: 1px solid #d4d1d3;
        margin: 0 auto 3.7rem;
    }

    #shop .anniversary h4 {
        margin: 2.1rem auto 1.8rem;
    }

    #shop .anniversary h4 img {
        width: 212px;
    }

    #shop .anniversary .box {
        width: 85%;
        margin: 0 auto 2.4rem;
    }

    #shop .anniversary .box .image {
        width: 202px;
        margin: 0 auto 2rem;
    }

    #shop .anniversary .box .image img {
        width: 100%;
    }

    #shop .anniversary .box .txt {
        font-size: 14px;
        width: 100%;
        line-height: 2.2;
        text-align: justify;
    }

    #shop .link_bnr {
        width: 100%;
        margin: 1.9rem auto;
    }

    #shop .link_bnr .link_btn.Aboutus:hover span {
        content: url(../img/shop/link_bnr_aboutus_off.svg);
    }

    #shop .link_bnr .link_btn.Support:hover span {
        content: url(../img/shop/link_bnr_support_off.svg);
    }

    #shop .link_bnr .link_btn.Brand:hover span {
        content: url(../img/shop/link_bnr_brand_off.svg);
    }

    #shop .link_bnr .link_btn.News:hover span {
        content: url(../img/shop/link_bnr_news_off.svg);
    }





    #shop .anniversary .link_btn.Aniv {
        width: 185px;
        height: 50px;
        margin: 0 auto 2.8rem;
    }


    #shop .anniversary .link_btn.Aniv span {
        content: url(../img/shop/link_bnr_aniv_off_sp.svg);
        width: 97px;
        margin-left: 1.9rem;
    }



    #shop .anniversary .link_btn.Aniv:hover span {
        content: url(../img/shop/link_bnr_aniv_off_sp.svg);
    }


    .map iframe {
        height: 375px;
    }


    /*====================================================
                  news
====================================================*/

    #news .news {
        margin-top: 3rem;
        margin-bottom: 3.4rem;
    }


    #news .news .content {
        width: 88%;
        margin: 0 auto;
    }

    #news .news .wrapper .content {
        justify-content: center;
    }

    #news .news .content .detail {
        margin-right: 0;
        width: 100%;
        margin-bottom: 2.3rem;
    }

    #news .news .content .detail a .title {
        height: auto;
    }


    #news.content-page .main h2 img {
        width: 85px;
    }


    #news .category_list p {
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: italic;
        font-size: 18px;
        text-align: center;
        letter-spacing: 0.03rem;
    }



    .dropmenu {
        width: 295px;
        height: 40px;
        margin: 0.5rem auto 3.2rem;
    }

    .dropmenu li {
        position: relative;
    }

    .dropmenu li a {
        display: block;
        margin: 0;
        padding: 13px 15px;
        font-size: 14px;
        line-height: 1;
        background: #fff;
        border: 1px solid #d1d1d1;
        color: #252124;
        cursor: pointer;
        font-family: "Zen Kaku Gothic Antique", sans-serif;
        font-weight: 700;
        letter-spacing: 0.05rem;

    }

    .dropmenu li a:after {
        content: '';
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 40%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 5px 0 5px;
        border-color: #ed8000 transparent transparent transparent;
    }

    .dropmenu li ul {
        position: absolute;
        width: 100%;
        z-index: 9999;
        top: 100%;
        left: 0;
    }

    .dropmenu li ul li {
        overflow: hidden;
        height: 0;
        transition: .2s;
    }

    .dropmenu li ul li a {
        border-top: 1px solid #d1d1d1;
        background: #fff;
        color: #252124;
        font-weight: 400;
    }

    .dropmenu li ul li a:after {
        content: none;
    }

    .dropmenu li ul li:first-child a {
        border-top: none;
    }

    @media screen and (min-width: 601px) {
        .dropmenu li:hover a:after {
            transform: rotate(180deg);
            transition: .1s;
        }

        .dropmenu li:hover ul li {
            overflow: visible;
            height: 40px;
        }

        .dropmenu li ul li a:hover {
            background: #ffd999;
            transition: .5s;
        }
    }

    @media screen and (max-width: 600px) {
        .dropmenu li.active_sp a:after {
            transform: rotate(180deg);
            transition: .1s;
        }

        .dropmenu li.active_sp ul li {
            overflow: visible;
            height: 40px;
        }
    }


    /* singleページ */
    .content-page.single .main .page_list li.arrow {
        margin: -0.05rem 0.35rem 0;
    }

    #news.content-page.single .txt {
        width: 100%;
        padding-bottom: 1.1rem;
        margin-bottom: 2.4rem;
    }

    #news.content-page.single .txt .box {
        flex-direction: row;
    }

    #news.content-page.single .content {
        width: 100%;
    }

    #news.content-page.single .txt .title {
        text-align: justify;
        font-size: 24px;
        line-height: 1.5;
        margin-top: 1.6rem;
    }

    #news.content-page.single .txt .day {
        letter-spacing: 0.1rem;
    }

    #news.content-page.single .text h2 {
        text-align: justify;
        line-height: 1.3;
        padding: 1.1rem 0.8rem;
    }

    #news.content-page.single .text {
        text-align: justify;
    }


    #news.content-page.single .page_navi.box {
        flex-direction: row;
        margin: 0 auto;
    }

    #news.content-page.single .page_navi .link_btn {
        position: relative;
        display: block;
        width: 91px;
        height: 50px;
    }

    #news.content-page.single .page_navi .link_btn.list {
        width: 120px;
        height: 50px;
    }

    #news.content-page.single .page_navi .link_btn.list span {
        width: 40px;
    }

    #news.content-page.single .page_navi li {
        margin-right: 5vw;
    }

    #news.content-page.single .page_navi li:last-child {
        margin-right: 0
    }


    #news.content-page.single .page_navi .link_btn.prev span {
        content: url(../img/news/category_prev_off_sp.svg);
        width: 66px;
        margin-left: 0;
    }

    #news.content-page.single .page_navi .link_btn.prev:hover span {
        content: url(../img/news/category_prev_off_sp.svg);
    }

    #news.content-page.single .page_navi .link_btn.next span {
        content: url(../img/news/category_next_off_sp.svg);
        width: 61px;
        margin-left: 0;
    }

    #news.content-page.single .page_navi .link_btn.next:hover span {
        content: url(../img/news/category_next_off_sp.svg);
    }



    /* ページネーション */

    .pnavi {
        width: 80%;
        margin: 0 auto;
    }

    .page-numbers li {
        margin-right: 1.3vw;
        margin-bottom: 1.3vw;
    }

    #news .news .wrapper>.box {
        margin-bottom: 1.5rem;
    }

    .page-numbers a,
    .page-numbers li span.current {
        width: 45px;
        height: 50px;
        padding: 1rem;
        font-size: 14px;
    }

    .page-numbers li span.dots {
        width: 45px;
        height: 50px;
    }

    .page-numbers.prev,
    .page-numbers.next {
        width: 88px;
        height: 50px;
    }

    .page-numbers.prev::before,
    .page-numbers.next::before {
        background: #fff;
    }

    #news.content-page.single .page_navi .link_btn:hover:before {
        background: #fff;
    }


    #news.content-page.single .page_navi .link_btn.list:hover span {
        content: url(../img/news/ic_list_off.svg);
    }

    .page-numbers.prev span {
        content: url(../img/news/category_prev_off_sp.svg);
        width: 66px;
    }

    .page-numbers.prev:hover span {
        content: url(../img/news/category_prev_off_sp.svg);
    }

    .page-numbers.next span {
        content: url(../img/news/category_next_off_sp.svg);
        width: 61px;
    }

    .page-numbers.next:hover span {
        content: url(../img/news/category_next_off_sp.svg);
    }

    .page-numbers a:hover {
        color: #252124;
        background: #fff;
    }




}