@charset "Shift_JIS";
/* CSS Document */
/*==============================================
共通 ここから
================================================*/

/* デフォルトの余白リセット */
footer .footer-inner, header .header, header .information, main, main#wrapper, nav .category_nav {
    margin: 0;
    padding: 0;
    max-width: none;
    overflow: hidden;
}
article#contents {
    padding-bottom: 0;
}
footer {
    position: relative;
    z-index: 1000;
    border-top: 2px solid #222;
}
footer .footer-inner {
    padding: 30px 0 !important;
}

/* br用クラス */
.smp-none {
    display: block;
}
.pc-none {
    display: none;
}

/* 変数上書き */
:root {
    /* 共通フォントサイズ(ディスプレイが900px以上の場合に14pxとなる) ※.smartyell-innerの中の要素のみ */
    --font-size-text: 2cqw;

    /* 横の余白 上書き */
    --margin-space-beside: 3.5em;

    /* 縦の余白 上書き */
    --margin-space-vertical: 2em;
}

.smartyell .pc_none {
    display: none;
}
/*==============================================
共通 ここまで
================================================*/

/*==============================================
.smartyell 共通 STR
================================================*/
.smartyell {
    background-color: #f0e7d8;
}
.smartyell .contents {
    margin: 0 auto;
    text-align: center;
    max-width: 900px;
}
.smartyell .contents section {
    width: 90%;
    margin: 2em auto 0;
}
.smartyell .contents .compact {
    font-size: 2em;
    padding: 0 1em 1px;
}
.smartyell .contents .other_btn a {
    font-size: 1.6em;
}
/*==============================================
.smartyell 共通 END
================================================*/

/*==============================================
看板 STR
================================================*/
.automatic-slider .automatic-slider-area .slider-item img {
    height: 12em;
    width: auto;
}
.kanban {
    margin: 0 auto;
    text-align: center;
}
.kanban img {
    max-width: 800px;
    margin: 0 auto;
}
/*==============================================
看板 END
================================================*/

/*==============================================
PICKUP STR
================================================*/
.smartyell .contents h2 {
    font-size: 3em;
}
.smartyell .contents .pickup-item .col_5 {
    width: 150em;
}
.smartyell .contents .pickup-item li {
    width: 30em;
}
/*==============================================
PICKUP END
================================================*/

/*==============================================
商品一覧 STR
================================================*/
.smartyell .contents .item-list .col_2 li dt {
    font-size: 1.5em;
}
.smartyell .contents .item-list .col_2 li .btn {
    font-size: 1.5em;
}
.smartyell .contents .item-list .col_2 li .auto-cart-in p {
    font-size: 1.5em;
}
/*==============================================
商品一覧 END
================================================*/

/*==============================================
カテゴリから探す STR
================================================*/
.smartyell .contents .category .col_3 {
    grid-template-columns: repeat(4,1fr);
}
.smartyell .contents .category .col_3 li dt {
    font-size: 1.2em;
    line-height: 1.5em;
    padding: 8px 0;
}

/*==============================================
smartyell-campaign TOPへ戻る STR
================================================*/
.smartyell .contents .top-back {
    right: 2em;
    z-index: 10;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #181818a1;
    color: #ffffff;
    width: 6rem;
    height: 6rem;
    border-radius: 100vw;
    bottom: 54px;
    font-size: 1.2em;
    line-height: 1.4em;
}
.smartyell .contents .top-back a:hover {
    color: #fff !important;
}
.smartyell .contents .top-back i {
    font-size: 1rem;
    line-height: 0;
}
.smartyell .contents .pagetop a:hover {
    color: #fff !important;
}
/*==============================================
smartyell-campaign TOPへ戻る END
================================================*/