/* ----------------------------------------- */
/* 取扱品目・商品詳細専用スタイル */
/* ----------------------------------------- */

/* ----------------------------------------- */
/* 取扱品目 start */
/* ----------------------------------------- */
.archive_item_content {
    width: 100%;
    min-height: 50vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 2.5% 0 5%;
}

@media screen and (max-width:600px) {
    .archive_item_content {
        min-height: 52.5vh;
        padding: 4vh 0;
    }
}

.archive_item {
    width: 22.5vw;
    height: 9.5vw;
    margin-left: 2vw;
    margin-top: 2.5vw;
}

@media screen and (max-width:600px) {
    .archive_item {
        width: 40vw;
        height: 18vw;
        margin-left: 6.66vw;
        margin-top: 6.0vw;
    }
}

.archive_item_img {
    width: 22.5vw;
    height: 7.5vw;
    background-color: rgba(179, 179, 179, 0.7);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.archive_item_img img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

@media screen and (max-width:600px) {
    .archive_item_img {
        width: 40vw;
        height: 14vw;
        border-radius: 10px;
    }

    .archive_item_img img {
        border-radius: 10px;
    }
}

.archive_item h2 {
    color: white;
    /* 文字のサイズ */
    letter-spacing: 4px;
    text-shadow:
        0.1vw 0.1vw 0.05vw black,
        -0.1vw 0.1vw 0.05vw black,
        0.1vw -0.1vw 0.05vw black,
        -0.1vw -0.1vw 0.05vw black,
        0.1vw 0px 0.05vw black,
        0px 0.1vw 0.05vw black,
        -0.1vw 0px 0.05vw black,
        0px -0.1vw 0.05vw black;
    /* 文字の影 */
    font-size: 1.4vw;
    font-weight: 600;
    text-align: center;
}

@media screen and (max-width:600px) {
    .archive_item h2 {
        /* 文字のサイズ */
        letter-spacing: 4px;
        text-shadow:
            0.23vw 0.23vw 0.13vw black,
            -0.23vw 0.23vw 0.13vw black,
            0.23vw -0.23vw 0.13vw black,
            -0.23vw -0.23vw 0.13vw black,
            0.23vw 0px 0.13vw black,
            0px 0.23vw 0.13vw black,
            -0.23vw 0px 0.13vw black,
            0px -0.23vw 0.13vw black;
        /* 文字の影 */
        font-size: 3.0vw;
    }

}

.archive_item h3 {
    color: white;
    /* 文字のサイズ */
    letter-spacing: 4px;
    font-size: 1.4vw;
    font-weight: 600;
    text-align: center;
}

@media screen and (max-width:600px) {
    .archive_item h3 {
        letter-spacing: 4px;
        font-size: 2.8vw;
    }

}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* 取扱品目 end */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* ----------------------------------------- */
/* 商品詳細 start */
/* ----------------------------------------- */
.item_content {
    width: 100%;
    min-height: 50vh;
    padding: 2.5% 0 5%;
    background-color: #dcf9ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:600px) {
    .item_content {
        min-height: 42.5vh;
        padding: 4vh 0;
    }
}

.item_container {
    width: 75%;
    height: auto;
    min-height: 65vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@media screen and (max-width:600px) {
    .item_container {
        min-height: 52.5vh;
        width: 92vw;
    }
}

.item_card {
    width: 22vw;
    height: 28vw;
    background-color: white;
    position: relative;
    margin: 2.5vw 1.47vw 0;
}

@media screen and (max-width:600px) {
    .item_card {
        width: 42vw;
        height: 48vw;
        background-color: white;
        position: relative;
        margin: 4vw 2vw 0;
    }
}

.item_image {
    width: 100%;
    height: 65%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.item_name {
    position: absolute;
    top: 0.5vw;
    left: 1vw;
    color: white;
    /* 文字のサイズ */
    text-shadow:
        0.32vw 0.15vw 0.075vw black,
        -0.15vw 0.15vw 0.075vw black,
        0.15vw -0.15vw 0.075vw black,
        -0.15vw -0.15vw 0.075vw black,
        0.15vw 0px 0.075vw black,
        0px 0.15vw 0.075vw black,
        -0.15vw 0px 0.075vw black,
        0px -0.15vw 0.075vw black;
    /* 文字の影 */
    font-size: 2.5vw;
    line-height: 3.5vw;
    font-weight: 600;
    background-color: transparent;
}

@media screen and (max-width:600px) {
    .item_name {
        text-shadow:
            0.32vw 0.32vw 0.12vw black,
            -0.32vw 0.32vw 0.12vw black,
            0.32vw -0.32vw 0.12vw black,
            -0.32vw -0.32vw 0.12vw black,
            0.32vw 0px 0.12vw black,
            0px 0.32vw 0.12vw black,
            -0.32vw 0px 0.12vw black,
            0px -0.32vw 0.12vw black;
        /* 文字の影 */
        font-size: 4vw;
        line-height: 5vw;
    }
}

.item_price {
    width: 100%;
    position: absolute;
    top: 65%;
    color: white;
    transform: translateY(-100%);
    font-size: 1.7vw;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
}

@media screen and (max-width:600px) {
    .item_price {
        font-size: 3.5vw;
        font-weight: 600;
        letter-spacing: 0.5vw;
    }
}

.item_text {
    position: absolute;
    top: 70%;
    color: black;
    font-size: 0.8vw;
    background-color: transparent;
    padding: 0 1vw;
}

@media screen and (max-width:600px) {
    .item_text {
        top: 70%;
        font-size: 1.9vw;
        padding-left: 1.5vw;
    }
}

.breadcrumb_area {
    width: 8vw;
    height: 3vw;
    background-color: #FFE55E;
    text-align: center;
    border-radius: 20px;
    margin-top: 5vw;
    margin-bottom: 0.5vw;
}

.breadcrumb_area a {
    font-size: 1.3vw;
    font-weight: 500;
}

.breadcrumb_area:hover {
    background-color: #a2913e;
    margin-top: 5.5vw;
    margin-bottom: 0vw;
}

@media screen and (max-width:600px) {
    .breadcrumb_area {
        width: 18vw;
        height: 8vw;
        margin-top: 12vw;
        margin-bottom: 0.5vw;
    }

    .breadcrumb_area a {
        font-size: 3.5vw;
        font-weight: 500;
    }

    .breadcrumb_area:hover {
        margin-top: 12.5vw;
        margin-bottom: 0vw;
    }
}

#item_nothing_message{
position: absolute;          /* 位置指定 */
   top:  0;                     /* 位置指定 */
   bottom:  0;                  /* 位置指定 */
   left:  0;                    /* 位置指定 */
   right:  0;                   /* 位置指定 */
   margin:  auto;               /* 中央寄せ */
   width:  100vw;               /* 幅指定（必須） */
   height: 80px;   
   text-align: center; 
   padding-top: 20%;
   font-size: 1.5vw;
}
@media screen and (max-width:600px) {
    #item_nothing_message{
        padding-top: 50%;
           font-size: 3.5vw;
        }
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* 商品詳細 end */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */