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

/*--------------------------------------
 ヘッダー
---------------------------------------*/
#headerWrap {
    width: 100%;
    border-bottom: 1px solid #eee;
}

#headerWrap #headerTop {
    position: relative;
    width: 100%;
    height: 800px;
    background: url(../img/header_img_l.jpg) center top no-repeat;
}

#headerWrap #headerTop #logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    margin: auto;
}


#headerWrap #header {
    width: 100%;
    max-width: 1125px;
    height: 90px;
    position: relative;
    margin: 0 auto;
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
}

#headerWrap #header #headerLeft {
    position: absolute;
    width: 700px;
    top: 30px;
    left: 0;
}


#headerWrap #header #headerRight {
    position: absolute;
    width: 500px;
    top: 30px;
    right: 10px;
}

#headerWrap #header #navi {
    float: left;
}

#headerWrap #header #navi li {
    float: left;
    font-size: 1rem;
    font-size: 16px;
    padding: 2px 15px;
}

#headerWrap #header #navi li a:hover {
    text-decoration: underline;
}

/*#headerWrap #header #navi li:after{
    content: "/";
    margin-left: 20px;
}*/

#headerWrap #header #navi li:last-child:after {
    content: "";
}

#headerWrap #header #info {
    float: right;
    margin-right: 20px;
}

#headerWrap #header #info li {
    float: left;
    padding: 5px 7px;
    font-size: 0.81rem;
    font-size: 13px;
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

/*----- ヘッダー追記分（2025/01/20） -----*/
#headerWrap #headerPage {
    position: relative;
    width: 100%;
    height: 320px;
    background: url(../img/header_img_l.jpg) center 40% no-repeat;
}

#headerWrap #headerPage #logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    margin: auto;
}

/*----- 検索ボックス -----*/
#header #search {
    position: relative;
    width: 180px;
    float: right;
}

#header #search #keywords {
    width: 180px;
    height: 30px;
    padding-left: 10px;
    font-size: 14px; // IE8
    font-size: 0.875rem;
    outline: none;
    /*border-radius: 15px;検索ボックスの角を丸める*/
    box-sizing: border-box;
    border: 1px solid #ccc;
}

#header #search placeholder {
    color: #ccc;
}

#header #search input {
    border: none;
    background: none;
}

#header #search input:focus {
    /*フォーカスした時に枠線を太く濃く*/
    border: solid 1px #ccc;
}

#header #search button {
    position: absolute;
    top: 0;
    right: 5px;
    height: 28px;
    font-size: 16px; // IE8
    font-size: 1rem;
    border: none;
    background: none;
    outline: none;
    color: #005bac;
}



/*--------------------------------------
 トップスライダー
---------------------------------------*/
#topslide {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#topslide img {
    width: 100%;

}

#topslide .slick-slide {
    margin: 0 5px;
}


#topslide .carousel_area .slick-prev,
#topslide .carousel_area .slick-next {
    top: 40%;
    z-index: 9999;
}

#topslide .slick-prev:before,
#topslide .slick-next:before {
    font-size: 48px; // IE8
    font-size: 3rem;
    color: #fff;
}

#topslide .slick-prev:before {
    font-family: 'FontAwesome';
    content: "\f053";
}

#topslide .slick-next:before {
    font-family: 'FontAwesome';
    content: "\f054";
}

#topslide .slick-prev {
    left: 50px;
}

#topslide .slick-next {
    right: 50px;
}

#topslide .carousel_area a:hover {
    opacity: 1;
}

#topslide .slick-slider {
    margin-bottom: 0;
}

/*--------------------------------------
 コンテナー共通
---------------------------------------*/

#container {
    overflow: hidden;
}


/*--------------------------------------
 ランキング
---------------------------------------*/
#container .title {
    text-align: center;
}

#container .itemWrap {
    width: 1060px;
    margin: 0 auto;
}

#container .item .text {
    margin-top: 10px;
}

#container .item .img img {
    width: 100%;
}

#container .item .price {
    margin-top: 10px;
}

#container .item .price:before {
    margin-right: 8px;
    font-size: 1em;
    content: "寄付金額";
}

#container .item .price:after {
    font-size: 1em;
    content: "円";
}


/*--------------------------------------
 新着
---------------------------------------*/

#newitem {
    width: 100%;
    margin: 0 auto;
    padding: 50px 0;
}

#newitem .title {
    width: 330px;
    height: 80px;
    margin: 0 auto;
    background: url(../img/title_new.png) no-repeat;
    background-size: contain;
}

#newitem .item {
    width: 20%;
    padding: 10px;
    float: left;
    box-sizing: border-box;
    position: relative;
}

#newitem .item .img img {
    border-radius: 100%;
    /* CSS3草案 */
    -webkit-border-radius: 100%;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 100%;
    /* Firefox用 */
}

#newitem .btn a {
    width: 320px;
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
    height: 70px;
    font-size: 1.5rem;
    font-size: 24px;
    text-align: center;
    line-height: 70px;
    margin: 20px auto;
    color: #000;
    border: 1px #000 solid;
    box-sizing: border-box;
    border-radius: 35px;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    display: block;
}

#newitem .btn a:hover {
    color: #fff;
    border: 1px #000 solid;
    background: #000;
    opacity: 1;
}

#newitem .btn a:after {
    font-family: 'FontAwesome';
    content: "\f105";
    margin-left: 20px;
}

/*== SP用 ================*/
@media screen and (max-width:650px) {
    .newitem {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0 10px 0 10px;
    }

    .newitem .item {
        width: 32%;
        height: auto;
        margin-right: 2%;
        padding: 0;
        float: left;

        display: inline-block;
        vertical-align: top;
        text-align: left;

    }

    #pickup .newitem .title {
        width: 80%;
        height: 60px;
        margin: 0 auto 0;
        background: url(../../sitedesign/img/title_new.png) no-repeat;
        background-size: contain;
    }

    /* PCの設定をクリア */
    .newitem .item:nth-child(5n) {
        margin-right: 2%;
    }

    .newitem .item:nth-child(n + 6) {
        margin-top: 0;
    }

    /* 6番目以降からマージントップ */
    .newitem .item:nth-child(3n) {
        margin-right: 0;
    }

    /* 4番目以降からマージントップ */
    .newitem .item:nth-child(n + 4) {
        margin-top: 6%;
    }

    /* SPは9個まで表示 */
    .newitem .item:nth-child(n+10) {
        display: none;
    }

    .newitem .item .name {
        font-size: 0.9rem;
    }

    .newitem .item .price {
        font-size: 0.8rem;
    }

    .newitem .item .price .free {
        font-size: 0.8rem;
    }
}

/*--------------------------------------
 返礼品ランキング
---------------------------------------*/

#ranking {
    width: 100%;
    margin: 0 auto;
    padding: 50px 0;
}

#ranking .title {
    width: 330px;
    height: 80px;
    margin: 0 auto 20px;
    background: url(../img/title_rank.png) no-repeat;
    background-size: contain;
}

#ranking .item {
    width: 20%;
    padding: 10px;
    float: left;
    box-sizing: border-box;
    position: relative;
}

#ranking .item .img img {
    border-radius: 100%;
    /* CSS3草案 */
    -webkit-border-radius: 100%;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 100%;
    /* Firefox用 */
}

#ranking .item span {
    position: absolute;
    left: 0px;
    top: 0px;
    font-family: Montserrat, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 24px; // IE8
    font-size: 1.5rem;
    text-align: center;
    line-height: 60px;
    width: 60px;
    height: 60px;
    font-weight: normal;
    z-index: 999;
    border-radius: 100%;
    /* CSS3草案 */
    -webkit-border-radius: 100%;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 100%;
    /* Firefox用 */
}

#ranking .item.rank1 > span {
    color: #fff;
    background: #d9b340;
}

#ranking .item.rank2 > span {
    color: #fff;
    background: #aaa;
}

#ranking .item.rank3 > span {
    color: #fff;
    background: #a15326;
}

#ranking .item.rank5 > span {
    color: #000;
    background: #d2c8aa;
}

#ranking .btn a {
    width: 320px;
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
    height: 70px;
    font-size: 1.5rem;
    font-size: 24px;
    text-align: center;
    line-height: 70px;
    margin: 20px auto;
    color: #000;
    border: 1px #000 solid;
    box-sizing: border-box;
    border-radius: 35px;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    display: block;
}

#ranking .btn a:hover {
    color: #fff;
    border: 1px #000 solid;
    background: #000;
    opacity: 1;
}

#ranking .btn a:after {
    font-family: 'FontAwesome';
    content: "\f105";
    margin-left: 20px;
}





/*--------------------------------------
 コンテナー共通
---------------------------------------*/

#container {
    overflow: hidden;
}


/*--------------------------------------
ランキング2
---------------------------------------*/
.pop_rank {
    display: flex;
    padding-bottom: 70px;
    width: 100%;
    max-width: 1360px;
    overflow: hidden;
    margin: 30px auto 40px;

}



.pop_rank .title:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: '';
    background: #000;
    width: 70px;
    height: 3px;
}

/*
        .pop_rank ul {
            display: flex;
            text-align: left;
            list-style: none;
        }
*/

.pop_rank ul {
    display: flex;
    text-align: left;
    list-style: none;
    /*    max-width: 1400px;*/
    /*    overflow: hidden;*/
}

.pop_rank ul li {
    /*            width: 20%;*/
    width: 335px;
    position: relative;
    margin-right: 10px;
}

/*
        .pop_rank ul li .ico {
            position: absolute;
            top: -10px;
            left: -10px;
            z-index: 2;
        }
*/

/*
        .pop_rank ul li .ico img {
            width: 70px;
            height: 32px;
        }
*/

.pop_rank ul li .ribbon {
    display: inline-block;
    position: relative;
    height: 32px;
    line-height: 32px;
    text-align: left;
    padding: 0 25px 0 15px;
    font-size: 1em;
    font-family: serif;
    background: #165a87;
    color: #FFF;
    box-sizing: border-box;
    margin-bottom: 10px
}

.pop_rank ul li .ribbon:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

.pop_rank ul li .ribbon:after {
    top: 0;
    right: 0;
    border-width: 16px 10px 16px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}


.pop_rank ul li .img {
    margin-bottom: 20px;
    width: 315px;
    height: 315px;
}

.pop_rank ul li .ttl {
    margin: 0 10px 15px;
    padding-bottom: 10px;
    /*    border-bottom: 1px solid #000;*/
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}

.pop_rank ul li .price {
    margin: 0 10px 15px;
    font-weight: normal;
    /*            line-height: 1.5;*/
    color: #af0000;
}

.pop_rank .box1 {
    padding: 0.5em 0.5em;
    margin: 1.5em auto;
    font-weight: normal;
    border: solid 1px #005bac;
    color: #005bac;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    text-align: center;
    width: 50%;

}

/*--------------------------------------
レビュー高評価
---------------------------------------*/
#review {
    width: 100%;
    margin: auto;
    padding: 50px 0 30px;
    background-color: #f7f7f7;
}

#review #product-list li a {
    float: left;
    width: 33.333%;
    padding: 0;
    margin: 0;
    line-height: 0;
    box-sizing: border-box;
}

#review #product-list li img {
    width: 100%;
}

#review .title {
    width: 635px;
    height: 75px;
    margin: auto;
    background: url(../img/title_product.jpg) no-repeat;
    background-size: contain;
}

#review #product-list {
    width: 100%;
    max-width: 1400px;
    margin: 20px auto 0;
}

#review #product-list li {
    float: left;
    margin: 15px;
    box-sizing: border-box;
}

#review .item {
    width: 33.33%;
    height: 700px;
    padding: 50px 15px 0 15px;
    float: left;
    box-sizing: border-box;
    position: relative;
}


#review #review-list li a {
    float: left;
    width: 33.333%;
    padding: 0;
    margin: 0;
    line-height: 0;
    box-sizing: border-box;
}

#review #review-list li img {
    width: 100%;
}

#review .title {
    width: 635px;
    height: 75px;
    margin: auto;
    background: url(../img/title_review.jpg) no-repeat;
    background-size: contain;
}

#review #review-list {
    width: 100%;
    max-width: 1400px;
    margin: 20px auto 0;
}

#review #review-list li {
    float: left;
    margin: 15px;
    box-sizing: border-box;
}




.review_rank {
    display: flex;
    padding-bottom: 80px;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #f7f7f7;

}

.review_rank .title {
    position: relative;
    margin-bottom: 40px;
    padding-bottom: 25px;
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1;
    color: #000000;
    text-align: center;
    font-family: 'Noto Serif JP', serif;
}


.review_rank .title:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: '';
    background: #000;
    width: 70px;
    height: 3px;
}

.review_rank ul {
    display: flex;
    text-align: left;
    list-style: none;
    /*
    max-width: 1200px;
    overflow: hidden;
*/
}

.review_rank ul li {
    width: 330px;
    position: relative;
    /*    margin-right: 27px;*/
    margin-right: 10px;
}

#review .item .star {
    margin: 0 auto 15px;
    font-size: 1.3em;
    font-family: serif;
    color: #e29b00;
    text-align: center;
}

.review_rank .star {
    margin: 0 auto 10px;
    font-size: 1em;
    font-family: serif;
    color: #e29b00;
    text-align: center;
}

.review_rank ul li .img {
    margin-bottom: 15px;
    width: 315px;
    height: 315px;
}

#review .cmt {
    /*    margin: 0 10px 15px;*/
    margin: 0 5px 10px;
    /*
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
*/
    color: #165a87;
    font-size: 0.9em;
    font-weight: bold;
    /*    font-size: 14px;*/

    /*
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
*/
    line-height: 1.6;
    text-align: left;
}


.review_rank ul li .ttl {
    margin: 0 5px 15px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
}

/*--------------------------------------
 カテゴリへのリンク（共通）
---------------------------------------*/
.cate_link a {
    display: block;
    width: 40%;
    /*            width: 310px;*/
    padding: 15px 30px;
    background: #165a87;
    color: #fff;
    text-align: center;
    transition: all 0.5s;
    margin: 0 auto 30px;
    font-family: serif;
    font-size: 1.4em;
}

.cate_link a:after {
    margin-left: 15px;
    content: "\f105";
    font-family: "FontAwesome";
}



/*--------------------------------------
ピックアップ
---------------------------------------*/
#pickup {
    width: 100%;
    margin: auto;
    padding: 20px 0 0;
}

#pickup #product-list li a {
    float: left;
    width: 33.333%;
    padding: 0;
    margin: 0;
    line-height: 0;
    box-sizing: border-box;
}

#pickup #product-list li img {
    width: 100%;
}

#pickup .title {
    width: 635px;
    height: 75px;
    margin: auto;
    background: url(../img/title_product.jpg) no-repeat;
    background-size: contain;
}

#pickup #product-list {
    width: 100%;
    max-width: 1400px;
    margin: 20px auto 0;
}

#pickup #product-list li {
    float: left;
    margin: 15px;
    box-sizing: border-box;
}

#pickup .item {
    width: 33.33%;
    height: 700px;
    padding: 50px 15px 0 15px;
    float: left;
    box-sizing: border-box;
    position: relative;
}

#pickup .box1 {
    padding: 0.5em 0.5em;
    margin: 1.5em auto;
    font-weight: normal;
    border: solid 1px #005bac;
    color: #005bac;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    text-align: center;
    width: 50%;

}

.box1 p {
    margin: 0;
    padding: 0;
    color: #005bac;
}


.name {
    margin: 0;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    margin: 1.0em auto;
    font-size: 1.25rem;
    padding: 0;
    color: #000;
}

#pickup p {
    color: #000;
    font-size: 16px;
    line-height: 1.8rem;
}




/*--------------------------------------
 ブランド
---------------------------------------*/
#brand {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 0px 0;
}

#brand .title {
    width: 175px;
    height: 75px;
    margin: 0 auto 30px;
    background: url(../img/title_brand.png) no-repeat;
    background-size: contain;
}

#brand .title1 {
    width: 97px;
    height: 404px;
    margin: 0px 0px 0px 10px;
    background: url(../img/title_bra1.png) no-repeat;
    background-size: contain;
}

#brand .title2 {
    width: 97px;
    height: 404px;
    margin: 0 auto 20px;
    background: url(../img/title_bra2.png) no-repeat;
    background-size: contain;
}

#brand .title3 {
    width: 97px;
    height: 404px;
    margin: 0 auto 20px;
    background: url(../img/title_bra3.png) no-repeat;
    background-size: contain;
}

#brand .title4 {
    width: 97px;
    height: 404px;
    margin: 0 auto 20px;
    background: url(../img/title_bra4.png) no-repeat;
    background-size: contain;
}



#brand .item .img img {
    width: 100%;
}

#brand .brand1 {
    display: flex;
    width: 450px;
    margin: 0 0 80px 0;
    clear: both;
}

#brand .brand1 .left {
    margin-right: 150px;
}

#brand .brand1 .right {
    max-width: 100%;
    min-width: 50%;
    margin-right: 80px;

}

#brand .brand2 {
    display: flex;
    width: 450px;
    margin: 0 0 80px 0;
}

#brand .brand2 .left {
    margin-right: 150px;
}

#brand .brand2 .right {
    max-width: 100%;
    min-width: 50%;
    margin-right: 80px;

}


#brand .brand3 {
    display: flex;
    width: 450px;
    margin: 0 0 80px 0;
}

#brand .brand3 .left {
    margin-right: 150px;
}

#brand .brand3 .right {
    max-width: 100%;
    min-width: 50%;
    margin-right: 80px;

}


#brand .brand4 {
    display: flex;
    width: 450px;
    margin: 0 0 80px 0;
}

#brand .brand4 .left {
    margin-right: 150px;
}

#brand .brand4 .right {
    max-width: 100%;
    min-width: 50%;
    margin-right: 80px;

}



#brand .item {
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}



#brand .carousel_area .slick-prev,
#brand .carousel_area .slick-next {
    top: 30%;
    z-index: 9999;
}

#brand .slick-prev:before,
#brand .slick-next:before {
    font-size: 32px; // IE8
    font-size: 3rem;
    color: #000;
}

#brand .slick-prev:before {
    font-family: 'FontAwesome';
    content: "\f053";
}

#brand .slick-next:before {
    font-family: 'FontAwesome';
    content: "\f054";
}

#brand .slick-prev {
    left: -50px;
}

#brand .slick-next {
    right: -50px;
}

#brand .slick-slider {
    margin-bottom: 0;
}







/*--------------------------------------
 寄附金の使い道
---------------------------------------*/
#usage {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 50px 0 50px 0;
    background: #f9f5f1
}

#usage .title {
    width: 500px;
    height: 80px;
    margin: 50px auto 0;
    background: url(../img/title_usage.png) no-repeat;
    background-size: contain;
}

#usage .title2 {
    width: 200px;
    height: 50px;
    margin: 50px auto 10px;
    background: url(../img/title_usage2.png) no-repeat;
    background-size: contain;
}

#usage .movie-wrap {
    width: 100%;
    height: 500px;
    min-width: 10px;
    position: relative;
    top: auto;
    left: auto;

}

#usage .movie-wrap iframe {
    position: relative;
    text-align: center;
    margin: 0 auto;
    padding: 0 auto;

}



#usage #usage-list {
    width: 1200px;
    margin: 30px auto;
}

#usage #usage-list li {
    float: left;
    margin: 6px;
}

.ss-navi {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px 50px;
    justify-content: center;
}


#usage p {
    color: #000;
    font-size: 1.125rem;
    font-size: 18px;
    line-height: 2.0rem;
    margin: 0 0 50px;
}




/*--------------------------------------
カテゴリーから選ぶ
---------------------------------------*/
#category {
    width: 1150px;
    text-align: center;
    margin: 0 auto;
    padding: 50px 0 100px;
}


#category .title {
    width: 280px;
    height: 75px;
    margin: 50px auto 100px;
    background: url(../img/title_cate.png) no-repeat;
    background-size: contain;
}

#category #category-list {
    width: 1200px;
    margin: 20px auto 0;
}

#category #category-list li {
    float: left;
    margin: 6px;
    box-sizing: border-box;
}


#category .img {
    width: 50%;
    text-align: center;
    margin: 10px auto;
}



.ss-navi {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px 50px;
    justify-content: center;
}

.ss-navi-item {
    flex-basis: 15%;
    box-sizing: border-box;
    text-align: center;
    color: #000 !important;
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pr6 W6", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "ＭＳ Ｐ明朝", "MS PMincho", "Meiryo", "serif";
    font-weight: normal;
    font-size: 20px;
    letter-spacing: -1px;
    text-decoration: none;
    background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 4px);
    background-size: 5px 1px;
    background-position: bottom;
    background-repeat: repeat-x;
    /* border-right:#000 2px dotted;
	border-bottom:#000 2px dotted; */
    position: relative;
    padding-bottom: 10px;
}

.ss-navi-item::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(to bottom, #000, #000 1px, transparent 1px, transparent 4px);
    background-size: 1px 5px;
    background-position: right;
    background-repeat: repeat-y;
}

.ss-navi-item:nth-child(6n)::before {
    background: none;
}

.ss-navi-item:nth-child(n+13):nth-child(-n+18) {
    background: none;
}

.ss-navi-item img {
    display: block;
    margin: auto;
}



/*--------------------------------------
 金額から選ぶ
---------------------------------------*/
#price {
    width: 100%;
    padding: 50px 0;
    border-top: 1px solid #ddd;
}

#price .title {
    width: 270px;
    height: 55px;
    margin: 0 auto 50px;
    background: url(../img/title_sub1.png) no-repeat;
    background-size: contain;
}

#price #price-list {
    width: 1060px;
    margin: 0 auto;
}

#price #price-list li a {
    float: left;
    width: 31%;
    padding: 1.5%;
    margin: 1%;
    font-size: 1.25rem;
    font-size: 20px;
    text-align: center;
    color: #000;
    box-sizing: border-box;
    border: 1px #ddd solid;
    border-radius: 35px;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
}



/*--------------------------------------
 スライダー共通
---------------------------------------*/
.carousel_area .slick-slider {
    margin-bottom: 25px;
}

.carousel_area .slick-prev,
.carousel_area .slick-next {
    top: 40%;
    z-index: 9999;
    width: 40px;
    height: 96px;
}

.carousel_area .slick-prev:before,
.carousel_area .slick-next:before {
    font-size: 96px; // IE8
    font-size: 6rem;
    color: #fff;
}

.carousel_area .slick-prev:before {
    font-family: 'FontAwesome';
    content: "\f104";
}

.carousel_area .slick-next:before {
    font-family: 'FontAwesome';
    content: "\f105";
}

.carousel_area .slick-prev {
    left: 20px;
}

.carousel_area .slick-next {
    right: 20px;
}

.carousel_area .slick-dots li {
    margin: 0 2px;
}

.carousel_area .slick-dots li button:before {
    font-family: 'FontAwesome';
    font-size: 1rem;
    content: '\f111';
    opacity: 1;
    color: #ccc;
}

.carousel_area .slick-dots {
    position: absolute;
    bottom: 20px;
}

.carousel_area .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #a86018;
}



/*--------------------------------------
 フッター
---------------------------------------*/
#footerTopWrap {
    background: #005bac;
}

#footerTopWrap #footerTop {
    width: 1060px;
    margin: 0 auto;
    text-align: center;
}

#footerWrap {
    width: 100%;
    background: #fff;
}

#footerWrap #footer {
    width: 1060px;
    margin: 0 auto;
    padding: 50px 0;
}

#footerWrap #footer .footer-box {
    width: 50%;
    padding: 0 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    float: left;
}

#footerWrap #footer .footer-box .title {
    color: #005bac;
    font-size: 1.25rem;
    font-size: 20px;
    margin-bottom: 5px;
}

#footerWrap #footer .footer-box .subTitle {
    color: #000;
    font-weight: 700;
    margin-top: 10px;
}

#footerWrap #footer .footer-box p {
    color: #000;
    text-align: left;
    margin-bottom: 10px;
    line-height: 1.5rem;
}

#footerWrap #footer .footer-box .subTitle:before {
    font-family: 'FontAwesome';
    content: "\f111";
    margin-right: 3px;
}

#footerWrap #footer .footer-box ul li {
    color: #000;
    text-align: left;
    line-height: 1.5rem;
}

#footerWrap #footer .footer-box a {
    color: #999;
}

#footerBottomWrap {
    background: #222;
}

#footerBottomWrap #footerBottom {
    width: 620px;
    padding: 15px 0 20px;
    margin: 0 auto;
    text-align: center;
}

#footerBottomWrap #footerBottom ul#info {
    font-size: 14px; // IE8
    font-size: 0.875rem;
    font-weight: 400;
    margin: 0 auto;
}

#footerBottomWrap #footerBottom ul#info li {
    float: left;
    padding: 0 20px;
    border-left: 1px solid #fff;
}

#footerBottomWrap #footerBottom ul#info li a {
    color: #fff;
}

#footerBottomWrap #footerBottom ul#info li:first-child {
    border: none;
}

#footerBottomWrap #footerBottom ul#info li:last-child {
    padding-right: 0;
}

#footerBottomWrap #footerBottom ul#info li a:hover {
    text-decoration: underline;
}


/*--------------------------------------
 特集系とピックアップバナー
---------------------------------------*/
#feature_area{
    width: 100%;
        padding: 30px 0;
}

.feature_warap{
    max-width:1200px;
    margin: 0 auto;
    overflow: hidden;
}


.feature_box{
   float: left;
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
}

.feature_box img{
    vertical-align: bottom;
    width: 100%;
}

.feature_box:nth-of-type(even){
    margin-right: 0;
}

.feature_box_left{
   float: left;
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
}

.feature_box_left img{
    vertical-align: bottom;
    width: 100%;
}


.feature_box_right{
   float: left;
    width: 49%;
    margin-right: 0;
    margin-bottom: 2%;
}

.feature_box_right img{
    vertical-align: bottom;
    width: 100%;
}
/*--------------------------------------
 左追従スライドバナー 20250127
---------------------------------------*/
  #floating_pc_left {
    position: fixed;
    left: 0;
    top: 267px;
    z-index: 9999;
  }
  #floating_pc_left .wrap {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto;
    position: relative;
    left: -15.9%;
  }
  #floating_pc_left .wrap div:first-child {
    padding: 0 11.189% 3.5%;
  }
  #floating_pc_left .wrap div:nth-child(2) {
    padding: 0 11.189% 3.5%;
  }
  #floating_pc_left .wrap div {
    width: 230px;
    max-width: 223px;
  }
  #floating_pc_left a {
    display: block;
    position: relative;
    left: 0;
    transition: left 0.6s;
  }
  #floating_pc_left a:hover {left: 5%;}
  #leftSticky {
    max-width: 12vw;
    position: fixed;
    top: 200px;
    left: 0px;
    z-index: 200;
    line-height: 0; }
  #leftSticky ul {
    animation-delay: .8s;
    bottom: auto;
    left: 0;
    overflow: visible;
    top: 100px;
    transform: translateX(-100%);
    width: 0; }
  #leftSticky ul li {
    margin-bottom: 0.8rem; }
  #leftSticky ul li a {
    display: block;
    max-width: 20vw;
    position: relative;
    transform: translateX(-78.95%);
    transition: .5s ease-in-out;
    width: 320px; }
  #leftSticky ul li a::before {
    content: "";
    display: block;
    padding-top: 65.78%;
    width: 100%; }
  #leftSticky ul li a img {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; }
  #leftSticky ul li a:hover {
    transform: translateX(0); opacity: 1 !important;}
  #leftSticky ul li a img:hover {
    opacity: 1 !important; }