@charset "utf-8";

/* v4テンプレート補填：ユーティリティクラス
--------------------------------------------*/
/* text-align */
.text__left {
    text-align: left !important;
}

/* font-size */
.text__xsmall {
    font-size: 0.6em;
}
@media screen and (max-width: 47.99em) {
    .text__xsmall {
        font-size: 0.8em;
    }
}

/* v4テンプレート補填：見出し
--------------------------------------------*/
.headline--h4 {
    margin-bottom: 36px;
}
.headline--h4 .headline__title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
}
@media screen and (max-width: 47.99em) {
    .headline--h4 {
        margin-bottom: 24px;
    }
    .headline--h4 .headline__title {
        font-size: 18px;
    }
}

/* v4テンプレート補填：グリッド（商品一覧で使用）
--------------------------------------------*/
@media print,screen and (min-width: 48em) {

    /* PCスタイル */
    .grid__col-2--border-pc {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        row-gap: 200px;
    }
    .grid__col-2--border-pc>.grid__item {
        padding: 0 100px;
        width: 50%;
        position: relative;
    }
    .grid__col-2--border-pc>.grid__item:nth-of-type(odd)::after {
        width: 1px;
        height: 100%;
        content: "";
        background: #e6e6e6;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }
    .grid__col-2--border-pc>.grid__item:not(.no-border-bottom)::before {
        width: 100%;
        height: 1px;
        content: "";
        background: #e6e6e6;
        display: block;
        position: absolute;
        left: 0;
        bottom: -100px;
    }
    .grid__col-2--border-pc>.grid__item .img {
        margin-bottom: 24px;
    }
    .grid__col-2--border-pc>.grid__item .lead {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 47.99em) {
    /* SPスタイル */
    .grid__col-1--border-sp {
        row-gap: 100px;
    }
    .grid__col-1--border-sp>.grid__item {
        position: relative;
    }
    .grid__col-1--border-sp>.grid__item:not(:last-of-type)::after {
        width: 100%;
        height: 1px;
        content: "";
        background: #e6e6e6;
        display: block;
        position: absolute;
        left: 0;
        bottom: -50px;
    }
    .grid__col-1--border-sp>.grid__item .img {
        margin-bottom: 20px;
    }
    .grid__col-1--border-sp>.grid__item .lead {
        margin-bottom: 0;
        padding: 0;
    }
    .u-tal-sp {
        text-align: left !important;
    }
}

/* その他
--------------------------------------------*/
@media screen and (max-width: 47.99em) {
    .scroll-overflow-image_in img {
        max-width: 500px;
    }
}