@charset "UTF-8";

.body {
	opacity: 0;
	transition: .6s;
}
.body.is-renew {
	opacity: 1;
	transition: opacity .6s ease, transform .6s ease;
}
@media (min-width: 801px) {
    .header .header__logo {
        line-height: 1;
        opacity: 1;
        transition: opacity .3s ease
    }
}
.c-footer__floating-img {
    opacity: 1;
}
@media screen and (min-width: 769px) {
	.content {
		padding-top: calc(110vw / 19.2);
	}
}
#kv-end {
    position: absolute;
    margin-top: 170%;
}
.sec__ttl.shoplist_title {
    margin: 30% 0 10%;
}
.product-purchase__link {
    min-width: calc(max(1px, 35.6234vw) * 1);
    min-height: calc(max(1px, 11.4504vw) * 1);
    font-family: Commissioner, sans-serif;
    font-size: max(1px, 4.0712vw);
    font-style: normal;
    font-weight: 700;
}
.product-purchase__list {
    gap: calc(clamp(1px, 1.3132vw, 25.2143104624px) * 1) calc(clamp(1px, 1.1381vw, 21.8524024007px) * 1);
}
.product-purchase__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.product-purchase__link {
    border-radius: calc(clamp(1px, 7.0136vw, 38.661942709px) * 1);
}
@media (min-width: 801px) { 
    .product-purchase__link {
        min-width: calc(clamp(1px, 12.257vw, 235.3335643155px) * 1);
    }
    .product-purchase__link {
        min-height: calc(clamp(1px, 3.9397vw, 75.6429313871px) * 1);
    }
    .product-purchase__link {
        border-radius: calc(clamp(1px, 2.0136vw, 38.661942709px) * 1);
    }
    .product-purchase__link {
        font-family: Commissioner, sans-serif;
        font-size: clamp(1px, 1.4008vw, 26.8952644932px);
        font-style: normal;
        font-weight: 700;
    } 
}
.product-purchase__link {
    align-items: center;
    background-color: transparent;
    display: flex;
    padding: calc(max(1px, calc(0 / 1px)vw)*1) calc(max(1px, 4.5802vw)*1);
}

.product-purchase__link {
    padding-left: 1em;
    padding-right: 1em;
    position: relative;
    transition: transform .3s ease;
    z-index: 1;
}
.product-purchase__link:before {
    background-color: #fff;
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
    transition: transform .3s ease;
    z-index: -1;
}
.product-purchase__link:after {
    content: "";
    display: block;
    position: absolute;
    right: calc(max(1px, 4.1221vw)*1);
    top: 50%
}

@media (min-width:801px) {
    .product-purchase__link:after {
        right: calc(clamp(1px, 1.4183vw, 27.2314552994px)*1)
    }
}

@media (min-width:801px) and (max-width:1366px) {
    .product-purchase__link:after {
        right: 19.3740458015px
    }
}

@media (min-width:801px) and (max-width:1223px) {
    .product-purchase__link:after {
        right: calc(max(1px, 1.5841vw)*1)
    }
}

    .product-purchase__link:after {
    transform: translateY(-50%);
    width: calc(max(1px, 3.8931vw)*1)
}

@media (min-width:801px) {
    .product-purchase__link:after {
        width: calc(clamp(1px, 1.3395vw, 25.7185966716px)*1)
    }
}

@media (min-width:801px) and (max-width:1366px) {
    .product-purchase__link:after {
        width: 18.2977099237px
    }
}

@media (min-width:801px) and (max-width:1223px) {
    .product-purchase__link:after {
        width: calc(max(1px, 1.4961vw)*1)
    }
}

.product-purchase__link:after {
    height: calc(max(1px, 2.9771vw)*1)
}

@media (min-width:801px) {
    .product-purchase__link:after {
        height: calc(clamp(1px, 1.0243vw, 19.6671621607px)*1)
    }
}

@media (min-width:801px) and (max-width:1366px) {
    .product-purchase__link:after {
        height: 13.9923664122px
    }
}

@media (min-width:801px) and (max-width:1223px) {
    .product-purchase__link:after {
        height: calc(max(1px, 1.1441vw)*1)
    }
}

.product-purchase__link:after {
    background-color: #000;
    -webkit-mask: url(../img/ico_purchase_arrow.svg) no-repeat center/contain;
    mask: url(../img/ico_purchase_arrow.svg) no-repeat center/contain;
    transition: transform .3s ease
}

@media (min-width:801px) {
    .product-purchase__link:hover:after {
        transform: translate(calc(max(1px, 3.0534vw)*1), -50%)
    }
}

@media (min-width:801px) and (min-width:801px) {
    .product-purchase__link:hover:after {
        transform: translate(calc(clamp(1px, 1.0506vw, 20.1714483699px)*1), -50%)
    }
}

@media (min-width:801px) and (min-width:801px) and (max-width:1366px) {
    .product-purchase__link:hover:after {
        transform: translate(14.3511450382px, -50%)
    }
}

@media (min-width:801px) and (min-width:801px) and (max-width:1223px) {
    .product-purchase__link:hover:after {
        transform: translate(calc(max(1px, 1.1734vw)*1), -50%)
    }
}
.shoplist-block {
        margin: 0 calc(80vw / 19.2) calc(130vw / 19.2);
}
.shoplist-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(40vw / 19.2);
    margin-bottom: calc(50vw / 3.2);
}
.product-purchase__link:hover:before {
    transform: scaleX(1.1);
}
.product-purchase__panel {
    margin-bottom: 30%;
}
.product-purchase__list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(max(1px, 3.8168vw) * 1) calc(max(1px, 3.3079vw) * 1);
    justify-content: center;
}
.shoplist-list li{
    margin: 0 auto;
}
.product-purchase__link-large {
    min-width: calc(max(1px, 74.5547vw) * 1);
    justify-content: center;
}
@media (min-width: 801px) {
    .product-purchase__link-large {
        min-width: calc(clamp(1px, 28.6521vw, 492.5195310317px) * 1);
    }
}

@media screen and (min-width: 769px) {
    .shoplist-list {
        gap: calc(40vw / 19.2);
        margin-bottom: calc(50vw / 8.2);
    }
}
.shoplist-list li {
    font-size: calc(30vw / 6.28);
    line-height: 1.4;
    letter-spacing: 0.1em;
    overflow-wrap: break-word;
    position: relative;
    padding-left: 1em;
}
@media screen and (min-width: 769px) {
    .shoplist-list li {
        font-size: calc(28vw / 19.2);
    }
}
/* cap */
.cap {
	font-size: calc(20vw / 8.28);
	font-weight: 300;
	line-height: 2;
	letter-spacing: 0.025em;
}

@media screen and (min-width: 769px) {
    	.cap {
		font-size: calc(17vw / 19.2);
	}
}
.shoplist-list li:before
 {
    content: "";
    display: inline-block;
    width: calc(14vw / 8.28);
    height: calc(14vw / 8.28);
    border-radius: 50%;
    background-color: #333;
    position: absolute;
    top: calc(24vw / 8.28);
    left: 1vw;
}

@media screen and (min-width: 769px) {
    .shoplist-list li:before {
        width: calc(11vw / 19.2);
        height: calc(11vw / 19.2);
        top: calc(14vw / 19.2);
        left: 0;
    }
}