@charset "UTF-8";

/*==============================================
 共通 ここから
================================================*/

/* フェードイン用アニメーション */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 変数指定 */
:root {
    --margin-bottom: min(4cqw, 1.5rem);
    --margin-bottom-min: min(2cqw, .8rem);
    --gap: min(3.6cqw, 1.6rem);
    
    --active-color: #0072ff;
    --aside-width: 22%;
    --aside-max-width: 350px;
}

#auto_template * {
    box-sizing: border-box;
}

/* パンくず削除 */
#pankuzu {
    display: none;
}
/* body {
    background-color: #f9f9f9;
} */
#auto_template img {
  width: 100%;
  height: auto;
  display: block;
}
.header-info-red {
    display: none !important;
}
#auto_template a {
    display: block;
}
#auto_template a:hover {
    opacity: 1 !important;
    color: #222 !important;
}
#auto_template a:hover p{
    color: #222;
}
#auto_template a.link-none:hover {
    opacity: 1;
    color: #222 !important;
}
article#contents {
    padding-bottom: 0 !important;
}
/* main */
/* main, main#wrapper {
    max-width: none;
    padding: 0;
} */
/* フッター */
footer  {
    position: relative;
    z-index: 1000;
}
footer .bottom {
    margin-top: 0;
    padding: 20px 0;
}

/* 価格プロリセット */
.buy_price>ul .price.sale+.intax,.buy_price>ul .intax {
    display: none !important;
}
.spesicalprice {
    display: none !important;
}
#auto_template .buy_price>ol, .buy_price>ul {
    margin: 0;
}

.emozi {
    font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}

/*==============================================
 共通 ここまで
================================================*/

/*==============================================
 #auto_template ここから
================================================*/
#auto_template {
    position: relative;
    width: 100%;
    padding-bottom: 2%;
    background-color: #f9f9f9;

    .auto_template__inner {
        width: 100%;
        max-width: 750px;
        margin: 0 auto;

        /* コンテナクエリを指定 */
        container-type: inline-size;  /* または size */
    }

}

/* 共通 */
#auto_template .row {
    position: relative;
    width: 95%;
    margin: 0 auto var(--margin-bottom);
}

/* TOPに戻るボタン */
#auto_template .top-back {
    position: fixed;
    bottom: calc(52px + 1em);
    right: 1em;
    width: 3.5em;
    height: 3.5em;
    font-size: min(3.3cqw,14px);
    color: #FFF !important;
    background: #000000bf;
    border-radius: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Lato;
    font-weight: 700;
    z-index: 10000;

    &:hover {
        color: #FFF !important;
        opacity: 1;
    }
}

/* 看板 */
#auto_template .auto_template__top {
    width: 100%;

    & h1 {
        display: block;
        overflow: hidden;
    }
}

/* 画像-1カラム */
#auto_template .banner-cal-1 {
    .img {
        border-radius: 5px;
        overflow: hidden;
    }
}

/* 画像-正方形カルーセル */
#auto_template .banner-carousel {
    width: 97.5%;
    margin: 0 auto 0 2.5%;
    
    .carousel-inner {
        position: relative;
        display: flex;
        gap: 2cqw;
        overflow-x: scroll;

        /* スクロールバーあるときは余白を小さく */
        margin-bottom: var(--margin-bottom-min);

        /* スクロールバーの余白 */
        padding-bottom: 3%;

        .carousel-item {
            position: relative;
            min-width: 38cqw;
            width: 38cqw;
            border-radius: 5px;
            overflow: hidden;
    
            & a {
                width: 100%;
                display: block;
            }

            &:nth-last-of-type(1) {
                margin-right: 2.5%;
            }
        }

        /* アイテム数が少なく、スマホでスライダーにならない場合の処理 */
        &.itemcount-1-2 {
            padding: 0;

            /* スクロールバーがない分余白を大きく */
            margin-bottom: var(--margin-bottom); 
        }   
        /* アイテム数が少ない場合の処理 */
        &.item-width-max {
            overflow-x: auto;
        }
    }

    .slider-arrow,.slider-radio-wrap {
        display: none;
    }
}
/* 画像-長方形カルーセル */
#auto_template .banner-carousel.banner-carousel__category {

    .carousel-inner {
        position: relative;
        display: flex;
        gap: 2cqw;
        overflow-x: scroll;

        .carousel-item {
            position: relative;
            min-width: 90cqw;
            width: 90cqw;
            border-radius: 5px;
            overflow: hidden;
    
            & a {
                width: 100%;
                display: block;
            }

            &:nth-last-of-type(1) {
                margin-right: 2.5%;
            }
        }

        /* アイテム数が少ない場合の処理 */
        &.item-width-max {
            padding: 0;
            overflow-x: auto;

            .carousel-item {
                width: 100%;
            }
        }
    }


}
/* 画像-カルーセル カテゴリページ用 */
#auto_template.category .banner-carousel {
    width: 100%;
    margin: 0 auto;

    .carousel-inner {
        .carousel-item {
            &:nth-last-of-type(1) {
                margin-right: 0;
            }
        }
    }
}

/* 見出し h2*/
#auto_template .h2 {
    font-size: min(6cqw, 30px);
    text-align: center;
    /* border-top: 1px solid #dddddd; */
    /* padding-top: .8em; */
    margin: 0 auto .3em;

    /* &:nth-of-type(1) {
        border-top: none;
        padding-top: 0;
    } */

    .h2-mainText {
        display: block;
        font-size: 1em;
    }

    .h2-subText {
        display: block;
        font-size: min(.55em, 13px);
        color: #222;
        font-weight: 300;
        line-height: 1;
    }
}

/* 見出し サブタイトル*/
#auto_template .h2-text {
    font-size: 3.6cqw;
    color: #7e8189;
    text-align: center;
    margin: 0 auto min(2cqw, 15px);
}

/* 特集一覧 */
#auto_template .article-wrap {
    display: flex;
    gap: 4%;
    justify-content: start;
    flex-wrap: wrap;

    .article {
        width: 48%;
        text-align: center;
        box-sizing: border-box;
        color: #222;
        margin-top: 2%;
        position: relative;

        &:nth-of-type(1),&:nth-of-type(2) {
            margin-top: 0;
        }
    }

    .article-img {
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 1cqw;
    }

    .article-name {
        font-size: min(3.6cqw, 18px);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .article-cap {
        font-size: min(3.1cqw, 14px);
        color: #7e8189;
    }

    .article-more {
        position: relative;
        background-color: #FFF;
        color: #4d4d4d;
        border: 1px solid #e8e8ed;
        line-height: 1;
        box-sizing: border-box;
        padding: .7em;
        border-radius: 100cqw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: min(3.1cqw, 14px);

        &::after {
            position: absolute;
            right: 1em;
            content: "";
            width: .35em;
            height: .35em;
            margin-bottom: -.1em;
            margin-left: -.1em;
            color: #e8e8ed;
            border-top: 2px solid;
            border-right: 2px solid;
            transform: rotate(45deg);
            transition: all 0.3s ease 0s;
        }
    }
}

/* 商品リスト */
#auto_template .item-wrap-var-2 {
    display: flex;
    justify-content: start;
    column-gap: 5%;
    row-gap: 5cqw;
    flex-wrap: wrap;
    box-sizing: border-box;
    border-radius: 5px;
    padding: var(--margin-bottom);
    background-color: #FFF;

    .item {
        box-sizing: border-box;
        color: #222;
        position: relative;
    }

    /* smp 1カラム */
    &.smpColumn-1 .item{
        width: 100%;

        .price-wrap {
            display: inline-flex;
        }
        .item-promo {
            display: inline-block;
        }
    }

    /* smp 2カラム */
    &.smpColumn-2 .item{
        width: 47.5%;
    }

    /* smp 3カラム */
    &.smpColumn-3 {
        column-gap: 3%;
        .item{
            width: calc((100% - 6%) / 3);
    
            .normal-price {
                display: none;
            }
        }
    }


    .item-img {
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 2%;
        filter: brightness(0.98);
    }

    .item-name {
        font-size: min(3.4cqw, 14px);
        font-weight: 500;
        margin-bottom: .2em;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 2行でカット */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: start;
    }

    .item-promo {
        background-color: #fa374712;
        color: #eb0012;
        max-width: fit-content;
        line-height: 1;
        padding: .3em .8em;
        font-size: min(3cqw, 13px);
        font-weight: bold;
        border-radius: 5px;
        margin-top: 0.6em;

        &.coupon {
            background-color: #4E83EB12;
            color: #4E83EB;
        }
        &.point {
            background-color: #eee32d52;
            color: #fd4e05;
        }
        .num {
            font-size: 1.2em;
            font-family: Lato;
            line-height: 1;
            margin: 0 .05em;
        }
    }

    .price-wrap {
        display: flex;
        margin-bottom: .2em;

        .buy_price {
            /* margin-bottom: .1em; */
            text-align: start;

            .price {
                font-size: min(5cqw, 22px);
                color: #eb0012;

            }
        }

        .normal-price {
            display: flex;
            align-items: end;

            .buy_price .price {
                font-size: min(3.3cqw, 14px);
                color: #a9a9a9 !important;
                margin-left: .5em;
                text-decoration: line-through;
            }
        }
    }


    .item-more {
        position: relative;
        background-color: #FFF;
        color: #4d4d4d;
        border: 1px solid #e8e8ed;
        line-height: 1;
        box-sizing: border-box;
        padding: .7em;
        border-radius: 100cqw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: min(3.1cqw, 14px);

    }

}


/* 商品スライダー */
#auto_template .item-wrap.slider {
    row-gap: 1cqw;

    .slider-inner {
        display: flex;
        overflow-x: scroll;
        position: relative;
        padding-bottom: 3cqw;

        .item {
            min-width: min(35cqw, 200px);
            margin-right: 3cqw;
            display: flex;
            flex-direction: column;

            &:nth-of-type(1) {
                margin-left: 0cqw;
            }
            &:nth-last-of-type(1) {
                margin-right: 0cqw;
            }
        }
    }

    .slider-arrow,.slider-radio-wrap {
        display: none;
    }

}

/* ボックス-1 */
#auto_template .box-type-1 {
    .box {
        border: 1px solid #dbdbdb;
        border-radius: 5px;
        overflow: hidden;
    }
    .box-name {
        background-color: #222;
        color: #222;
        font-size: min(4cqw, 18px);
        text-align: center;
        padding: .5em 0;
        background: #ededed;
    }
    .box-contents {
        background-color: #FFF;

        .box-contents__text {
            font-size: min(3.4cqw, 16px);
            white-space: pre-line;
            color: #4b4b4b;
            padding: .8em;
            text-align: center;

            .min {
                font-size: .9em;
            }

            & a {
                display: inline;
                font-size: 1em;
                color: var(--active-color);

                &:hover {
                    opacity: .8;
                    color: var(--active-color) !important;
                }
            }
        }
    }
}

/* もっとみるボタン */
#auto_template .more-link {
    display: flex;
    justify-content: center;
    align-items: center;



    .more-link__btn {
        width: 100%;
        color: #222;
        background-color: #FFF;
        border: 1px solid #e8e8ed;
        border-radius: 100cqw;
        text-align: center;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: min(3.85cqw, 16px);
        margin: 0 auto;
        box-sizing: border-box;
        color: var(--active-color);

        .more-link__text {
            width: 100%;
            font-size: 1em;
            padding: .5em 0;
            border-radius: 100vw;
        }
    }
}

/* カテゴリ一覧 */
#auto_template .category-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #efefef;
    box-sizing: border-box;
    padding: min(3.6cqw, 16px) min(3.6cqw, 16px) 0;

    .category {
        position: relative;
        width: max-content;
        background-color: #FFF;
        border: 1px solid #e6e6e8;
        color: #222;
        border-radius: 100cqw;
        font-size: min(3.3cqw, 16px);
        line-height: 1;
        padding: .8em 1.2em;
        margin-right: 1em;
        margin-bottom: min(3.6cqw, 16px);
    }
}

/*==============================================
 #auto_template ここまで
================================================*/

#auto_template .item-wrap.swiper {
    .swiper-wrapper {
        overflow-x: scroll !important;
    }
}