/* pickup-columns (2024/05/11) H.Shigeta
---------------------------------------- */
@media screen and (max-width:768px) {
    .pickup-columns {
        color:black;
        text-decoration:none;
        width:100%;
        padding-bottom:30px;
        display:flex;
        overflow-x: auto;
        gap:3px;
    }
    .pickup-column-item {
        color:black;
        text-decoration:none;
        display:block;
        cursor: pointer;
        box-sizing: border-box;
        width: calc(50vw - 25px);
        max-width: 166px;
        min-width: 135px;
        flex-shrink: 0;
        font-size: 10px !important;
    }
    .pickup-column-thumbnail {
        width: calc(50vw - 25px);
        max-width: 166px;
        min-width: 135px;
        height: calc(50vw - 25px);
        max-height: 166px;
        min-height: 135px;
    }
    .pickup-column-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .pickup-columns-read-more {
        display: block;
        text-align: right;
        font-size: 10px;
        color:black;
        text-decoration: none;
        cursor:pointer;
        transform: translate(-1em, -2.6em);
        height:0px;
    }
    .pickup-columns-read-more:hover {
        color:black;
    }    
}
@media screen and (min-width:768px) {
    .pickup-columns {
        width:100%;
        display:flex;
        gap:10px;
        padding-bottom:40px;
    }
    .pickup-column-item {
        transition:all 0.5s;
        color:black;
        text-decoration:none;
        display:block;
        cursor: pointer;
        width: calc(20% - 10px);
        flex-shrink: 0;
        box-sizing: border-box;
    }
    .pickup-column-item:hover {
        opacity:80%;
    }
    .pickup-column-title {
        height:70px;
    }
    .pickup-column-thumbnail {
        max-width:100%;
        overflow:hidden;
    }
    .pickup-column-item img {
        width: 240px;
        height: 240px;
        object-fit: cover;
    }
    .pickup-columns-read-more {
        color: black;
        text-decoration: none;
        text-align: right;
        width: 100%;
        display: block;
        height: 0px;
        transform: translate(-10px, -2em);
    }
}
@media screen and (max-width:768px) {
	.wrap-product-detail {
		width: 100%;
		box-sizing: border-box;
		margin: 0 auto;
		clear: both;
	}
}
@media screen and (min-width:768px) {
	.wrap-product-detail {
        width: 100%;
		max-width: 1200px;
		box-sizing: border-box;
		margin: 0 auto;
		clear: both;
	}
}