/*  仮のスタイル 多分後で消す？  */
/*  MS Pゴシックがチャームっぽいらしい  */
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    /* margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    border-style: none; */
/*    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", 'Meiryo UI', 'メイリオ', 'arial', "游ゴシック", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic Medium", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN W3", "Meiryo UI", "メイリオ", Meiryo, Osaka, sans-serif;*/
    /* font-weight: 500; */
}


/*  仮のスタイルここまで  */



/* 共通化部分の上書き ここから */

.move-page-top,
#sp_logo {
/*    background: #549100;*/
}

div.head h1 {
    width: 1040px;
}

.head {
    position: absolute;
    top: 0;
}

.page-top p {
    right: 5.6%;
    bottom: 20px;
}


/* 共通化部分の上書き ここまで */

/* html,
body {
    background-image: url(../img/bg.gif);
    background-repeat: repeat;
    position: relative;
    min-width: 1040px;
} */

.mainContainer .header {
    position: relative;
    background-color: antiquewhite;
    background-image: url(../img/head_bg.gif);
    height: 122px;
    padding-top: 22px;
}
.mainContainer .header > div > img:first-of-type {
    width: 150px;
    height: auto;
}
.mainContainer .header > div > img + img {
    width: 86px;
    height: 97px;
    position: absolute;
    bottom: 0;
    left: 149px;
}

.mainContainer .header > div {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 1040px;
    ;
    height: 100px;
    align-items: center;
}

.mainContainer .header > div > div {
    height: 100%;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}

.mainContainer .header > div > div > ul {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row nowrap;
    text-align: right;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.mainContainer .header > div > div > ul > li:not(:first-child):before {
    content: ">";
    padding: 0px 8px;
    color: #329800;
}

.mainContainer .header > div > div > ul > li a {
    color: #329800;
    text-decoration: none;
}

.mainContainer .header > div > div > ul + ul > li > a {
    background-color: rgba(106, 185, 0, 0.8);
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    text-decoration: underline;
}

.mainContainer .header > div > div > ul + ul {
    padding: 4px 0px;
    margin-bottom: 6px;
}

.mainContainer nav {
    width: 100%;
    height: 58px;
    background-color: #f0f0f0;
    background: linear-gradient(-45deg, #97e331 25%, #b6ff54 25%, #b6ff54 50%, #97e331 50%, #97e331 75%, #b6ff54 75%, #b6ff54);
    background-size: 12px 12px;
    overflow: hidden;
    padding: 4px 0px;
}

.mainContainer nav>div {
    width: 100%;
    height: 50px;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.18);
    background-color: #6ab900;
}

.mainContainer nav>div>ul {
    overflow: hidden;
    width: 1040px;
    margin: 0px auto;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #6ab900;
    height: 50px;
}

.mainContainer nav>div>ul>li {
    width: 208px;
    height: 50px;
    flex-flow: row nowrap;
    justify-content: center;
    display: table;
    transition: 0.4s;
    box-sizing: border-box;
    border-left: solid 1px #549100;
}

.mainContainer nav>div>ul>li:last-child {
    border-right: solid 1px #549100;
}

.mainContainer nav>div>ul>li:hover {
    background-color: #a2e34b;
}

.mainContainer nav>div>ul>li>a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: #FFFFFF;
    text-shadow: 1px 1px 2px rgba(5, 5, 5, 0.3);
}

.mainContainer nav>div>ul>li>a:hover {
    text-decoration: none;
    color: #FFFFFF;
}

article.mainContainer {
    position: relative;
    width: 1040px;
    height: auto;
    margin: 0px auto;
    box-shadow: 0 0 10px rgba(0, 75, 100, 0.2);
    background-color: #FFFDEC;
    z-index: 1;
}

div.mainImg,
.mainImg img {
    width: 100%;
    line-height: 0;
}

.mainContainer section {
    width: 1020px;
    margin: 100px auto 0px;
}

section.landing {
    width: 100%;
    height: auto;
    margin: 0px;
}

.landing img {
    display: block;
    width: 100%;
}

.landing .btn {
    width: 400px;
    height: 60px;
    background: #549100;
    margin: 40px auto;
    position: relative;
}

.landing .btn:before,
.landing .btn:after {
    z-index: -1;
position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 50%;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-3deg);
    transition: 0.55s;
}

.landing .btn:after {
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

.btn a {
    display: block;
    line-height: 0;
    text-align: center;
    padding: 19px 0px;
    color: white;
    font-size: 2rem;
}

.btn a:hover {
    text-decoration: none;
}

.mainContainer section:nth-of-type(2)>h2 {
    position: relative;
    height: 50px;
    background: linear-gradient(-45deg, #47ba0e 25%, #43cc00 25%, #43cc00 50%, #47ba0e 50%, #47ba0e 75%, #43cc00 75%, #43cc00);
    background-size: 12px 12px;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    /* 2 */
    justify-content: left;
    /* 3 */
    align-items: center;
    color: white;
    font-size: 2rem;
    border-left: solid 20px #329800;
    border-radius: 5px;
}

.mainContainer section:nth-of-type(2)>h2:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 15px;
    border-color: transparent transparent transparent #329600;
    padding-right: 30px;
}

.mainContainer section:nth-of-type(2)>h2 img {
    margin: 0px 18px 0px auto;
    width: 349px;
}

.mainContainer section:nth-of-type(2)>h2 img:first-child,
.mainContainer section:nth-of-type(3)>h2 img:first-child {
    position: absolute;
    width: 78px;
    height: 123px;
    top: -97px;
    left: 10px;
}


/*
section:nth-of-type(3) {
    margin-top: 90px;
}
*/

.mainContainer section:nth-of-type(3)>h2 {
    position: relative;
    height: 50px;
    background: linear-gradient(-45deg, #00E2F0 25%, #00D4E3 25%, #00D4E3 50%, #00E2F0 50%, #00E2F0 75%, #00D4E3 75%, #00D4E3);
    background-size: 12px 12px;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    /* 2 */
    justify-content: left;
    /* 3 */
    align-items: center;
    color: white;
    font-size: 2rem;
    border-left: solid 20px #00BBC8;
    border-radius: 5px;
}

.mainContainer section:nth-of-type(3)>h2:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 15px;
    border-color: transparent transparent transparent #00BBC8;
    padding-right: 30px;
}

.mainContainer section:nth-of-type(3)>h2 img {
    margin: 0px 18px 0px auto;
    width: 349px;
}

/*
section:nth-of-type(3)>h2 img:first-child {
    position: absolute;
    width: 78px;
    height: 123px;
    top: -97px;
    left: 10px;
}
*/


/* 種別タブ ここから */

ul.tab {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 60px;
    cursor: pointer;
    margin-top: 60px;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.tab li {
    width: 330px;
    height: 100%;
    font-size: 1.4rem;
    color: #329800;
    text-align: left;
    line-height: 2rem;
    background: #92c37a;
    transition: 0.5s;
    box-sizing: border-box;
    border: solid 2px;
    border-color: #329800;
    border-radius: 10px 10px 0px 0px;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 20;
}

.tab li:hover {
    /*    opacity: 0.55;*/
    background: #FFFFFF;
}

li.select {
    background: #FFFFFF;
    border-bottom: none;
}

.tabTitleBar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 330px;
    height: 3px;
    background-color: #26C6DA;
    transition: .45s ease-in-out;
}

div.border {
    width: 100%;
    border: solid 1px #329800;
    position: absolute;
    bottom: 0;
    z-index: 10;
}


/* 種別タブ ここまで */


/* タブ内のタブ ここから */

ul.tab_child {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 60px;
    cursor: pointer;
    /*    margin-top: 60px;*/
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.tab_child li {
    width: 300px;
    height: 60px;
    font-size: 1.4rem;
    color: #329800;
    text-align: left;
    line-height: 2rem;
    background-color: #ccf3b9;
    transition: 0.5s;
    box-sizing: border-box;
    border-radius: 10px;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab_child li:hover {
    /*    opacity: 0.55;*/
    border: solid 1px #329800;
    background-color: transparent;
}

li.active {
    background: #FFFFFF;
    /*        border: solid 2px #329800;*/
    border: solid 1px #329800;
}

ul.content_child {
    position: relative;
/*    height: 440px;*/
    width: 100%;
    background-color: #ffe6c4;
    background: linear-gradient(-45deg, #FFE3BE 25%, #FDD7A7 25%, #FDD7A7 50%, #FFE3BE 50%, #FFE3BE 75%, #FDD7A7 75%, #FDD7A7);
    background-size: 16px 16px;
    border: solid 4px #F7C384;
    border-radius: 20px;
    margin-top: 100px;
    padding-bottom: 2%;
}

ul.content {
    background-color: #ffffff;
    box-sizing: border-box;
    border: solid 2px #329800;
    border-top: none;
}

.content article {
    width: 940px;
    margin: 0px auto;
    padding: 60px 0px 60px 0px
}

.content_child>img:nth-of-type(1) {
    position: absolute;
    width: 220px;
    height: 120px;
    top: -80px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100;
}

.content_child>img:nth-of-type(2) {
    position: absolute;
    width: 122px;
    height: 69px;
    right: 80px;
    top: -70px
}

li.change {
    width: 100%;
}
.change > img {
    display: block;
    width: auto;
    margin: auto;
    margin-top: 55px;
}
/* タブ内のタブ ここまで */


/* Swiper 上書き用 ここから */
.swiper-container {
    position: relative;
    width: 100%;
    height: 420px;
    padding-top: 20px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    /*    background: #fff;*/
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
}



.swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
    color: #fff;
    background: #007aff;
}


/* Swiper 上書き用　ここまで */

.mainContainer h3 {
    font-size: 2.2rem;
    color: #00b9c7;
    border-bottom: 4px solid #96f8ff;
    position: relative;
    margin: 60px 10px 5px 10px;
}

.mainContainer h3:before {
    content: "";
    display: block;
    width: 20%;
    border-bottom: 4px solid #00b9c7;
    position: absolute;
    bottom: -4px;
}


/* 商品のstyle */

section.lineup {
    position: relative;
    padding-bottom: 60px;
}

.lineup ul {
    width: 1000px;
    overflow: hidden;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin: 30px auto 0px;
    position: relative;
    -webkit-flex-wrap:  wrap;
        -ms-flex-wrap:  wrap;
            flex-wrap:  wrap;
}

.lineup ul li {
    width: 233px;
    height: 354px;
    background-color: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    border: solid 1px #00b9c7;
    margin-bottom:  20px;
}

.lineup ul li:not(:first-child) {
    margin-left: 22px;
}
.lineup ul li:nth-child(5n) {
    margin-left: 0;
}


.lineup ul li h4 {
    font-size: 1.2rem;
    font-weight: 100;
    text-align: center;
    letter-spacing: 0.1rem;
    height: 30px;
    color: #ffffff;
    background-color: #00b9c7;
    border-radius: 3px 3px 0px 0px;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: solid 1px #00b9c7;
}

.lineup ul li img {
    display: block;
    width: auto;
    height: 125px;
    margin: 10px auto 10px;
}

.lineup ul li p {
    width: 200px;
    height: auto;
    margin: 10px auto;
    color: #212121;
    font-size: 1.2rem;
    overflow: hidden;
}

.lineup ul li img + p {
    margin-top: 20px;
    height: 44px;
    width: 200px;
    text-overflow: ellipsis;
    line-height: 1.5rem;
}

.lineup ul li p:nth-of-type(2) {
    font-size: 2rem;
    color: #ecce00;
}

.lineup ul li p:nth-of-type(2) span {
    color: #212121;
    font-size: 1.4rem;
}

.mainContainer p > strong {
    font-size: 2.2rem;
    color: #dd0000;
    letter-spacing: 0.2rem;
}

div.button {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    text-align: center;
}

.button a {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    text-decoration: none;
    height: 30px;
}

.button a.favo {
    width: 30px;
    background-color: #7fe1e8;
    color: #ffe21f;
    box-shadow: 0px 3px 0px 0.00px #00acb8;
    font-size: 1.6rem;
}

.button a.cart {
    width: 160px;
    background-color: #ffe21f;
    color: #747f8b;
    margin-left: 14px;
    box-shadow: 0px 3px 0px 0.00px rgba(115, 100, 2, 0.4);
    letter-spacing: 0.2rem;
}

.button a:hover {
    margin-top: 3px;
    box-shadow: none;
}

/*
.lineup h3 + img {
    width: 74px;
    height: 172px;
    position: absolute;
    right: 66px;
    bottom: 278px;
}
*/

.mainContainer footer {
    border-top: solid 4px #6fb647;
    position: relative;
    background-color: #FFFFFF;
}

div.selectArea {
    position: relative;
    padding-bottom: 5px;
    width: 1040px;
    margin: auto;
}
.selectArea > img {
    padding-left: 20px;
}

.selectArea div {
    padding: 15px 0px 15px 30px;
}

.selectArea div h5 {
    font-size: 1.4rem;
    display: inline-block;
    width: 114px;
    margin-right: 41px;
    color: #a37637;
}
.mainContainer footer ul {
    display: inline-block;

}
.mainContainer footer ul li {


}
.selectArea div a {
    color: #333333;
    font-size: 1.2rem;
}

.selectArea div a:hover {
    text-decoration: none;
}

.selectArea div li:not(:first-of-type):before {
    content: "|";
    margin-left: 12px;
    padding-right: 12px;
}

.linkArea {
    padding: 15px 0px;
    text-align: center;
    background-color: #fff0c8;
    box-sizing: border-box;
    border-top: solid 1px #a88c40;
    border-bottom: solid 1px #a88c40;
}

.linkArea a {
    color: #333333;
}
.linkArea li:not(:first-of-type):before {
    content: "|";
    margin-left: 12px;
    padding-right: 12px;
}

.mainContainer footer small {
    display: inline-block;
    width: auto;
    margin: 0px 0px 0px 30px;
    text-align: left;
}

div.copy {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background-color: #ffffff;
    width: 1040px;
    margin: 5px auto 0px;
     padding-bottom: 5px;
}

div.corpoLogo {
    width: auto;
}
.corpoLogo img {
    width: 120px;
}


.mainContainer body > img {
    position: absolute;
    width: 102px;
    height: 154px;
    bottom: 0;
    right: 5%;
    z-index: 1000;
}

body > .move-page-top {
    position: absolute;
    margin: 0;
    padding: 0;
    right: 5.6%;
    bottom: 210px;
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3);
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    cursor: pointer;
    color: #fff;
    line-height: 58px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s;
    text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 1200;
    background: #549100;
}

body > .move-page-top a {
    color: white;
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3);
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    cursor: pointer;
    color: #fff;
    line-height: 58px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s;
    text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 1200;
    background: #549100;
}

@media screen and (max-device-width:767px) {
    body,html {
        /* min-width: 0px; */
    }
    /*  SP共通メニュー 上書き用 ここから  */
    #sp_header_menu-wrap li.sp_header-subwrap.rollover li {
        border-left: solid 5px #008ab2;
    }
    #sp_header_menu-area {
        position: fixed;
    }
    .mainContainer section:nth-of-type(2)>h2 img,
    .mainContainer section:nth-of-type(3)>h2 img {
        display: none;
    }
    .mainContainer section:nth-of-type(3)>h2:before {

        padding-right: 10px;
    }
    .mainContainer .header {
        padding-top: 0px;
    }
    .mainContainer nav {
        padding: 0px;
        background: none;
    }
    .mainContainer nav>div>ul {
        width: 100%;
        display: block;
        overflow: visible;
    }
    .mainContainer nav>div>ul>li {
        width: 100%;
        display: block;
        border-left: none;
        background-color: #00a9da;
    }
    .mainContainer nav>div>ul>li:hover {
        background-color: #00a9da;
    }
    .mainContainer nav>div>ul>li:active {
        background-color: #00a9da;
    }
    .mainContainer nav>div>ul>li.rollover {
        background-color: #38c7f0;
    }
    .mainContainer nav>div>ul>li>a {
        text-align: left;
    }
    header.rollover #sp_header-anchor.rollover {
        height: 200px;
    }
    header.rollover #sp_header-other.rollover {
        height: 300px;
    }
    #sp_header_menu-wrap > li > ul {
        background-color: #00a9da;
    }
    .mainContainer nav>div>ul {
        background-color: #00a9da;
    }

    /*  SP共通メニュー 上書き用 ここまで  */


    .tabTitleBar {
        position: absolute;
        left: 0;
        bottom: 0;
        width : calc(100% / 3) ;
        height: 3px;
        background-color: #26C6DA;
        -webkit-transition: .45s ease-in-out;
        -moz-transition: .45s ease-in-out;
        -o-transition: .45s ease-in-out;
        transition: .45s ease-in-out;
        z-index: 200;
    }



    .mainContainer .header {
        /* height: auto; */
    }

    article.mainContainer {
        width: 100%;
    }

    .mainContainer section {
        width: 100%;
        margin: 70px auto 0px;
    }

    .landing .btn {
        width: 96%;
    }
    ul.content {
        border: none;
        border-radius: 0 0 20px 20px
    }
    .content article {
        width: 100%;
        padding: 20px 0px 0px 0px;
    }
    .tab li {
        width : calc(100% / 3) ;
        padding: 10px;
        text-align: center;
        border: none;
        font-size: 1.2rem;
        line-height: 1.6rem;
        border-radius: 0 0 0 0;
        background: #92c37a;
        color: white;
    }
    .tab li:not(:first-child) {
        border-left: solid 1px #329800;
    }
    ul.tab_child {
        width: 96%;
        margin: auto;
    }
    .tab_child li {
        width: 30%;
        font-size: 1.2rem;
        text-align: center;
        padding: 10px;
    }
    .tab li:hover {
         opacity: 100;
        background: #92c37a;
    }



    /*  スライダ上書き ここから  */
    .content_child>img:nth-of-type(1) {
        width: 110px;
        height: auto;
        top: -30px;
    }
/*
    .content_child>img:nth-of-type(2) {
        width: 82px;
        height: auto;
        right: 40px;
        top: -50px;
    }
*/

    ul.content_child {
/*        height: 270px;*/
        border-radius: 20px;
        border-width: 3px;
        margin-top: 60px;
    }
    .swiper-container {
        height: 250px;
        padding-top: 0px;
    }
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: 0px;
    }
    .swiper-button-prev,
    .swiper-button-next {
        background-size: 20px 27px;
    }
    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
        left: 0;
    }
    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        right: 0px;
        left: auto;
    }
    div.swiper-slide {
        width: 100%;
    }
    .swiper-slide img {
        width: 94%;
        height: auto;
    }
    .change > img {
        width: 90%;
    }
    /*  スライダ上書き ここまで  */


    .mainContainer section:nth-of-type(3) {
        width: 96%
    }
    section.lineup {
        padding-bottom: 10px;
    }

    .mainContainer h3 {
        font-size: 2.2rem;
        color: #00b9c7;
        border-bottom: 4px solid #96f8ff;
        position: relative;
        margin: 40px 0 0;
    }

    .lineup ul {
        width: 100%;
        overflow: hidden;
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        margin: 30px auto 0px;
        position: relative;
    }

    .lineup ul li {
        width: 49%;
        height: 370px;
        background-color: #ffffff;
        border-radius: 4px;
        box-sizing: border-box;
        border: solid 1px #00b9c7;
        margin-bottom: 2%
    }

    .lineup ul li:not(:first-child) {
        margin-left: 0;
    }
    .lineup ul li img {
        display: block;
        width: auto;
        height: 125px;
        margin: 10% auto;
    }

    .lineup ul li img + p {
        margin-top: 20px;
        height: 13%;
        width: 96%;
        text-overflow: ellipsis;
        line-height: 1.5rem;
    }
    .lineup ul li p {
        width: 96%;
    }
    div.button {
        width: 96%;
        margin: auto;
        justify-content: space-between;
    }

    .button a.favo {
        width: 16%;
        background-color: #7fe1e8;
        color: #ffe21f;
        box-shadow: 0px 3px 0px 0.00px #00acb8;
        font-size: 1.6rem;
    }

    .button a.cart {
        width: 80%;
        background-color: #ffe21f;
        color: #747f8b;
        margin-left: 0;
        margin: auto;
        box-shadow: 0px 3px 0px 0.00px rgba(115, 100, 2, 0.4);
        letter-spacing: 0.2rem;
    }

    body > .move-page-top {
        display: none;
    }

    div.selectArea {
        width: 100%;
    }
    .selectArea div {
        padding: 0px;
        display: flex;
        flex-flow: row wrap;
    }
    .selectArea div:nth-of-type(2){
        display: none;
    }

    .selectArea div h5 {
        display: none;
    }

    .selectArea div li:not(:first-of-type):before {
        content: none;
    }


    .selectArea div ul {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        padding: 0;
    }
    .selectArea div ul li {
        font-size: 1.4rem;
        display: flex;
        width: 50%;
        height: 50px;
        text-align: center;
        justify-content: center;
        align-items: center;
        border-bottom: solid 1px #6fb647;
    }
    .selectArea div li:nth-child(2n) {
        border-left: solid 1px #6fb647;
    }
    .selectArea >img {
        display: none;
    }
    .linkArea {
        display: none;
    }

    div.copy {
        width: 96%;
        height: auto;
    }
    .mainContainer footer small {
        display: block;
        margin: 0 0 0 0;
    }
    .mainContainer footer small a {
        display: flex;
        flex-flow: column;
    }
    div.corpoLogo {
        display: flex;
        margin: 0px 0px 10px 0px;
        flex-flow: row;
        align-items: center;
    }
    .corpoLogo img {
        width: 45%;
        margin-right: 0;
        margin-left: auto;
    }
}


@media screen and (max-device-width:375px) {
    .lineup ul {
        flex-flow: column wrap;
    }
    .lineup ul li {
        width: 100%;
        height: 464px;
    }
    .lineup ul li p {
        font-size: 1.6rem;
        line-height: 3rem;
    }
    .lineup ul li img + p {
        height: 72px;
        line-height: 1.8rem;
    }
    .lineup ul li p:nth-of-type(2) {
        font-size: 3rem;
    }
    .lineup ul li p:nth-of-type(2) span {
        font-size: 1.8rem;
    }
    .mainContainer p > strong {
        font-size: 4rem;
    }
    .button a {
        height: 50px;
    }
    .button a.favo {
        height: 50px;
        font-size: 3rem;
    }
    .button a.cart {
        font-size: 1.8rem;
    }

}


@media screen and (max-device-width:320px) {
    header.rollover #sp_header-shopping.rollover {
        height: 240px;
    }
    .lineup ul {
    }
    .lineup ul li {
    }
    .lineup ul li h4 {
        font-size: 1.8rem;
        height: 40px;
    }
    .lineup ul li p {
    }
    .lineup ul li img + p {
    }
    .lineup ul li p:nth-of-type(2) {
    }
    .lineup ul li p:nth-of-type(2) span {
    }
    p > strong {
    }
    .button a {
    }
    .button a.favo {
        height: 47px;
    }
    .button a.cart {
        height: 47px;
    }
    .mainContainer nav>div {
        height: 40px;
    }


}
