/* カテゴリ_迷ったらコレ！のコーナー  ふせん*/
.category_recommend_list{
    display: flex;
    flex-wrap: wrap;
    background: transparent;
    border: none;
    border-radius: 8px;
    gap: 10px;
    overflow: hidden;
    margin:15px 0 50px;
}
.category_recommend_list > li{
    width: 100%;
    border: none;
    background: #fff3cf;
    border-radius: 10px;
}
/*.category_recommend_list > li:nth-child(n+2){
    border-top: solid 1px #222;
}*/
.category_recommend_list > li a{
    display: flex;
    flex-wrap: wrap;
    gap:10px;
    padding: 20px 10px;
    color:#222;
    transition:all 0.2s;
}
.category_recommend_list > li a:hover{
    opacity: 0.7;
}
.category_recommend_list > li img{
    width: 100%;
    vertical-align: bottom;
}
.left-box{
    width: 43%;
}
.right-box{
    width: calc(57% - 10px);
    display: flex;
    flex-direction: column;
}
.category_recommend_list p{
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 25px;
}
.icon-list{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 100%;
}
.icon-list span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc((100% - 5px) / 2);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px 1px;
    text-align: center;
    color: #555;
    line-height: 1.4;
    font-size: 1rem;
    font-weight: bold;
    word-break: keep-all;
    box-sizing: border-box;
}
.category_explanation h3{
    font-size: 1.7rem;
    font-weight: bold;
}
.category_explanation{
    margin-top: 1rem;
}
.sp_pc_on{
    display: block!important;
}

.icon-list .color-popular{
    color:#fff;
    background: #e11b1b;
}
.icon-list .color-bestprice{
    color:#cd0000;
    background: #fff81d;
}
.icon-list .color-new{
    color:#fff;
    background: #3981d1;
}
.icon-list .color-standard{
    color:#fff;
    background: #28b06e;
}
.category_recommend_list > li .block-items__item__tags{
    display: flex;
    justify-content: end;
    margin: auto 0 7px;
}
.category_recommend_list > li .block-items__item__tag{
    font-size: 1.1rem;
    color: #222;
    padding: 5px 10px 5px 21px;
    align-items: center;
    line-height: 1;
    border: 1px solid #ccc;
    margin: 0;
}
.category_recommend_list > li .block-items__item__tag:before {
    width: 13px;
    height: 11px;
    left: 8px;
}
.item-comment{
    background: #ffdb18;
    color: #222;
    border-radius: 50px;
    margin-bottom: 10px;
    padding: 6px;
    text-align: center;
    line-height: 1.4;
    font-size: 1.3rem;
    font-weight: bold;
}
.item-name{
    line-height: 1.4;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.item-price{
    color: #ff0000;
    text-align: right;
    line-height: 1;
    font-size: 2rem;
    font-weight: bold;
}
.item-price span{
    line-height: 1;
    font-size: 2.2rem;
}
.item-lot{
    color:#353535;
    text-align: right;
    font-size: 1.3rem;
}
.link-btn{
    position: relative;
    background: #f47807;
    color: #fff;
    text-align: center;
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    font-size: 1.3rem;
    font-weight: bold;
}
.link-btn:after{
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    width: 5px;
    height: 5px;
    transform: rotate(-45deg) translate(0, -50%);
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}
.category_recommend_catch{
    width: auto;
    position: relative;
    text-align: center;
    line-height: 1.4;
    font-size: 2.3rem;
    font-weight: bold;
    padding: 13px 0 8px;
}
.category_recommend_catch:before, .category_recommend_catch:after{
    content: none;
}
.color_1{
    background-color: #ffeded;
}
.color_2{
    background-color: #edf5ff;
}
.color_3{
    background-color: #e4f9e6;
}
.color_4{
    background-color: #f9f8e4;
}
.category_recommend_catch span{
    padding:0 5px;
    font-size: 2rem;
}
.category_recommend_catch .catch_red{
    color:#d72323;
}
.category_recommend_catch .catch_blue{
    color:#0060d7;
}
.category_recommend_catch .catch_green{
    color:#0aa326;
}
.category_recommend_catch .catch_yellow{
    color:#ffa000;
}
.category_recommend_list > li.last-anchor{
    width: 100%;
}
.category_recommend_list > li.last-anchor span{
    position: relative;
    margin: auto;
    padding: 15px 60px 15px 30px;
    color: #4572c9;
    border: 1px solid #ccc;
    background: #ffffff;
    border-radius: 5px;
    font-size: 1.8rem;
    font-weight: bold;
}
.category_recommend_list > li.last-anchor span:after{
    position: absolute;
    transform: translateY(-25%) rotate(45deg);
    width: 10px;
    height: 10px;
    top: 38%;
    right: 20px;
    margin-left: 10px;
    border-bottom: 3px solid #222;
    border-right: 3px solid #222;
    content: '';
}
.col-4{
    width: calc((100% - 10px) / 2);
}
.category_recommend_list > li:nth-child(n+2){
    border-top: none;
}
@media screen and (min-width: 768px){
    .last-anchor p{
        font-size: 1.6rem;
        font-weight: bold;
        text-align: center;
    }
    .category_recommend_list > li{
        width: calc((100% - 10px) / 2);
    }
    .category_recommend_list > li:nth-child(n+2){
        border-top: none;
    }
    .category_recommend_list > li:nth-child(2n){
        border-right: none;
    }
    .category_recommend_list > li:nth-child(n+3){
        border-top: none;
    }
    .category_recommend_list > li a{
        gap:15px;
        padding: 25px 17px 15px;
    }
    .last-anchor an{
        gap:15px;
        padding: 25px 17px 13px;
    }
    .left-box{
        width: 200px;
    }
    .right-box{
        width: calc(100% - 215px);
    }
    .icon-list span{
        width: 50px;
        max-width: calc((100% - 15px) / 4);
        padding: 7px 3px;
        font-size: 1.15rem;
    }
    .sp_on{
        display: none;
    }
    .item-comment{
        font-size: 1.4rem;
    }
    .item-name{
        font-size: 1.7rem;
    }
    .item-price span{
        font-size: 3.3rem;
    }
    .item-lot{
        font-size: 1.4rem;
    }
    .link-btn{
        margin-top:10px;
        padding: 7px;
        font-size: 1.4rem;
    }
    .category_recommend_catch{
        margin: auto;
        font-size:3.4rem;
    }

    .midashi_big:before, .midashi_big:after {
        height: 5.8rem;
    }

    .category_recommend_list > li.last-anchor{
        width: 100%;
        border-right:none;
    }
    .category_recommend_list > li.last-anchor span{
        font-size: 2rem;
    }
    .category_explanation h3{
        font-size: 2rem;
        font-weight: bold;
    }
    .col-4{
        width: calc((100% - 45px) / 4);
    }
    .head_anchor .contents_text::after {
        content: '';
        width: 6px;
        height: 6px;
        border: 0;
        border-top: solid 2px #bbb;
        border-right: solid 2px #bbb;
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -5px;
        transform: rotate(135deg);
    }
}

/* おススメカイロ2 */
.cairo_recommend{
    background: #ffeae6;
    padding: 15px;
    margin-bottom: 50px;
}
.cairo_recommend_inr{
    display: flex;
    flex-wrap: wrap;
    gap:15px;
}
.cairo_recommend_inr li{
    background:#fff;
}
.cairo_recommend_inr li a{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    color: #222;
    box-sizing: border-box;
    transition: all 0.2s;
}
.cairo_recommend_inr li a:hover{
    opacity: 0.7;
}
.product-type{
    background: #ffdb18;
    color: #222;
    border-radius: 50px;
    margin-bottom: 10px;
    padding: 6px;
    text-align: center;
    line-height: 1.4;
    font-size: 1.5rem;
    font-weight: bold;
}
.product-name{
    font-size: 1.35rem;
}
.cairo_recommend_inr .icon-list {
    margin-top: -20px;
}
.price-block{
    width: 100%;
    line-height: 1;
}
.price-main{
    padding: 15px 0;
    border-top: solid;
    border-bottom: solid;
    border-width: 1px;
    border-color: #ccc;
}
.price-total{
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}
.price-total .lot{
    font-size: 1.4rem;
}
.price-total .total{
    color:#df0000;
    font-size: 2.5rem;
    font-weight: bold;
}
.price-main .price-single{
    display: flex;
    justify-content: end;
    align-items: baseline;
    font-size: 1.4rem;
    font-weight: bold;
}
.price-sub{
    padding-top: 10px;
}
.price-sub_step{
    display: flex;
    gap:10px;
    justify-content: flex-end;
    margin-bottom: 5px;
}
.price-sub .lot{
    font-size: 1.2rem;
}
.price-sub .price-single{
    font-size: 1.4rem;
    font-weight: bold;
}
@media screen and (min-width: 1023px) {
    .cairo_recommend{
        padding: 30px;
    }
    .cairo_recommend_inr{
        gap: 30px 20px;
    }
    .cairo_recommend_inr li{
        width: calc((100% - 40px) / 3);
    }
    .cairo_recommend_inr li.col-2{
        width: calc((100% - 20px) / 2);
    }
    .price-total .lot{
        font-size: 1.6rem;
    }
    .price-total .total{
        font-size: 2.8rem;
    }
    .cairo_recommend_inr li.col-2 .product-type{
        font-size: 2rem;
    }
    .cairo_recommend_inr li.col-2 .price-total .lot{
        font-size: 2rem;
    }
    .cairo_recommend_inr li.col-2 .price-total .total{
        font-size: 3.2rem;
    }
    .cairo_recommend_inr li.col-2 .product-name{
        font-size: 1.5rem;
    }
}

.col-2 {
    position: relative;
}

.col-2 a::before {
    content: "60%\AOFF";
    white-space: pre;
    
    position: absolute;
    top: -6px;
    left: -20px;
    
    background-color: #df0000;
    color: white;
    
    width: 80px;
    height: 80px;
    border-radius: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    
    z-index: 10;
}

.off_text {
    font-size: 23px;
    font-weight: bold;
    text-align: right;
    margin: 15px 0;
    color: #df0000;
}

/* 関連特集 */
.feature_list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 30px 20px;
    padding-bottom: 50px;
}
@media screen and (min-width: 600px) {
    .feature_list > li {
        width: calc((100% - 20px) / 2);
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
.feature_list > li a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: center;
    color: #333;
}
@media screen and (min-width: 600px) {
    .feature_list > li .tmb_box, .feature_list > li .txt_box {
        width: 100%;
    }
}
.feature_list > li .tmb_box img {
    width: 100%;
    vertical-align: bottom;
}
@media screen and (min-width: 600px) {
    .feature_list > li .tmb_box, .feature_list > li .txt_box {
        width: 100%;
    }
}
.feature_list > li .txt_box {
    width: 100%;
    padding-top: 7px;
}
@media screen and (min-width: 600px) {
    .feature_list > li .txt_box .name {
        font-size: 1.8rem;
    }
}
.feature_list > li .txt_box .name {
    margin-bottom: 5px;
    line-height: 1.4;
    font-size: 1.6rem;
    font-weight: bold;
}
@media screen and (min-width: 600px) {
    .feature_list > li .txt_box .comment {
        font-size: 1.3rem;
    }
}
.feature_list > li .txt_box .comment {
    line-height: 1.4;
    color: #555;
    font-size: 1.2rem;
}

li {
    position: relative;
    list-style: none; 
}

.out-of-stock-overlay {
    position: absolute;
    top: 60px;
    left: 22px;
    width: 85%;
    height: 38%;
    background-color: rgba(128, 128, 128, 0.7);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
.out-of-stock-overlay {
    position: absolute;
    top: 54px;
    left: 0;
    width: 100%;
    height: 48%;
    background-color: rgba(128, 128, 128, 0.7);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
}

.out-of-stock-content {
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
}

.ranking-list_inr .out-of-stock-content {
    text-align: center;
    color: #ffffff; 
    font-weight: bold;
    font-size: 15px; /* ★ここを変更したいサイズに指定します★ */
    line-height: 1.6;
    padding: 10px;
}

.ranking-list_inr .out-of-stock-overlay {
    position: absolute;
    top: 45px;
    left: 11px;
    width: 87%;
    height: 36%;
    background-color: rgba(128, 128, 128, 0.7);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}


.out-of-stock-overlay .out-of-stock-content a {
    color: #ffd700; 
    text-decoration: underline;
    pointer-events: auto; 
    display: block; 
    margin-top: 10px;
}