@charset "utf-8";

/* =========================
shop
========================= */
.shopArea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.shop__img__frame {
    width: 357px;
    height: 320px;
    position: relative;
}

.shop__img__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 0.5px solid var(--textColor-bk);
    pointer-events: none;
    z-index: 10;
}

.shop__img {
    width: 357px;
    height: 320px;
    object-fit: cover;
    object-position: 0 25%;
    /* ↑要調整 */
}

.shop__img01,
.shop__img02 {
    width: 206px;
    height: 231px;
}

.shop__img01 {
    position: absolute;
    top: 0;
    right: 0;
}

.shop__img02 {
    position: absolute;
    bottom: 0;
    left: 0;
}

.shop__textArea {
    align-items: center;
    text-align: center;
    width: 337px;
    margin-top: 10px;
}

.shop__textArea1 {
    width: 297px;
}

.shop__title {
    font-size: 2.0rem;
    letter-spacing: 0.10em;
}

.shop__text {
    margin-top: 10px;
}

.shop__textSup {
    font-size: 1.0rem;
    letter-spacing: 0.10em;
    text-align: right;
    margin-top: 10px;
}

.item:nth-of-type(2),
.item:nth-of-type(3) {
    margin-top: 80px;
}

.shop__title a,
.shop__textSup a {
    position: relative;
    display: inline-block;
}

.shop__title a::after {
    background: var(--linkMarker);
    content: "";
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    bottom: 5px;
    transform-origin: left top;
    z-index: -1;
}

.shop__textSup a::after {
    background: var(--linkMarker);
    content: "";
    width: 100%;
    height: 3px;
    position: absolute;
    left: 0;
    bottom: 3px;
    transform-origin: left top;
    z-index: -1;
}

.shop__title a.animate::after,
.shop__textSup a.animate::after {
    animation: linkLine 0.8s forwards;
}

@keyframes linkLine {
    0% {
        transform-origin: right top;
        transform: scaleX(1);
        /* 全表示 */
    }

    40% {
        transform-origin: right top;
        transform: scaleX(0);
        /* 右方向へ消える */
    }

    41% {
        transform-origin: left top;
        transform: scaleX(0);
        /* ここで起点を左に切替 */
    }

    100% {
        transform-origin: left top;
        transform: scaleX(1);
        /* 左→右へ再表示 */
    }
}

/* PC 769px */
@media screen and (min-width: 769px) {
    .shopArea {
        flex-direction: row;
        align-items: flex-start;
        margin-top: 100px;
        gap: 85px;
    }

    .shop__img__frame {
        height: 407px;
    }

    .shop__img {
        height: 407px;
        object-position: 0 25%;
        /* ↑要調整 */
    }

    .shop__img01,
    .shop__img02 {
        width: 215px;
        height: 245px;
    }

    .shop__textArea1 {
        width: 317px;
    }

    .shop__title {
        font-size: 2.4rem;
    }

    .shop__text {
        font-size: 1.6rem;
        letter-spacing: 0.10em;
    }

    .item:nth-of-type(2),
    .item:nth-of-type(3) {
        margin-top: 0px;
    }
}

/* PC 769px */