@charset "UTF-8";
@import url(./common.css);

/* ------------------------------
ページ内リンク
------------------------------ */
.inside_nav > ul > li {
    width: 33%;
}

/* ------------------------------
各カテゴリー
------------------------------ */
.sec_h3 h3 {
    font-family: var(--font-mincho);
    font-size: 150%;    /* 上書き */
    font-weight: normal;
}
.sec_h3 h3 > span {
    display: block;
    line-height: 1.5;
}
.sec_h3 h3 > .en {
    font-size: 160%;
}
.sec_h3 h3 > .ja {
    font-size: 60%;
}

/* ------------------------------
各商品（item_wrapper）
------------------------------ */
.item_wrapper {
    border-top: dotted 1px var(--main-color);
}
.item_wrapper > .sec_h4 {
    border-bottom: dotted 1px var(--main-color);
}
.item_wrapper h4 {
    display: flex;
    justify-content: space-between;
    font-family: serif;
    font-weight: normal;
    font-size: 120%;
    padding: 0 8px;
    border-left: solid 5px var(--main-color);
    margin-bottom: 1rem;
}
.item_wrapper h4 > span {
    display: block;
}
/* 価格部分 */
.item_wrapper h4 > .item_price {
    position: relative;
}
.item_wrapper h4 > .item_price::before {
    content: "￥";
    display: inline-block;
    position: absolute;
    top: 0;
    left: -22px;
    color: var(--main-color);
}

/* ------------------------------
スマホ版
------------------------------ */
@media screen and (max-width: 800px) {

    /* ------------------------------
    ページ内リンク
    ------------------------------ */
    .inside_nav > ul > li::before {
        right: calc(6vw + 8px);
    }
    .inside_nav > ul > li::after {
        right: 6vw;
    }

    /* ------------------------------
    各商品（item_wrapper）
    ------------------------------ */
    .item_wrapper > .sec_h4 {
        padding: 2rem 0 1.5rem;
    }
}

/* ------------------------------
PC版
------------------------------ */
@media screen and (min-width: 801px) {

    /* ------------------------------
    ページ内リンク
    ------------------------------ */
    .inside_nav > ul > li::before {
        right: calc(5vw + 8px);
    }
    .inside_nav > ul > li::after {
        right: 5vw;
    }

    /* ------------------------------
    各カテゴリー
    ------------------------------ */
    .sec_h3 {
        display: flex;
        justify-content: space-between;
    }
    .sec_h3 > .h3_block {
        width: 20vw;
    }
    .sec_h3 > .item_wrapper {
        width: 80vw;
    }
    .sec_h3 h3 {
        text-align: left;   /* 上書き */
    }

    /* ------------------------------
    各商品（item_wrapper）
    ------------------------------ */
    .item_wrapper > .sec_h4 {
        padding: 3rem 0 2.5rem;
        margin-bottom: 0;   /* 上書き */
    }
}