.triangleTopBG {
    background: url("../images/news/content-bg.png") no-repeat;
    background-size: 100%;
}

.shopArea {
    padding: 103px 0 60px;
    position: relative;
    z-index: 11;
}

.shopArea .inner {
    max-width: 1139px;
    margin: 0 auto;
    padding: 0 30px;
}

.shopArea .pageTitle {
    font-size: 80px;
    line-height: 1.2;
    margin-bottom: 79px;
    letter-spacing: -0.5px;
    padding-left: 109px;
    text-align: start;
    text-shadow: 7px 7px 8px rgba(0, 0, 0, 0.3);
}

.shopArea .shopList {
    display: flex;
    flex-wrap: wrap;
    gap: 92px 80px;
    transform: translateX(27px);
}

.shopArea .shopList > li {
    width: calc(50% - 40px);
    display: flex;
    flex-direction: column;
}

.shopArea .shopList .shopImgWrap {
    position: relative;
    margin-bottom: 37px;
}

.shopArea .shopList .shopImg > img {
    width: 100%;
    display: block;
    height: auto;
    object-fit: cover;
    aspect-ratio: 439/287;
}

.shopArea .shopList .shopTags {
    position: absolute;
    top: -27px;
    left: -68px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.shopArea .shopList .shopTags li {
    max-width: 101px;
    width: 100%;
}
.shopArea .shopList .shopTags li:last-child {
    margin-left: -33px;
    display: flex;
    align-self: flex-start;
}
.shopArea .shopList .shopTags li img {
    height: auto;
    width: 100%;
    display: block;
}

.shopArea .shopList .shopName {
    font-size: 25px;
    text-align: center;
    justify-content: center;
    margin-bottom: 17px;
    letter-spacing: 0.2px;
    font-weight: bold;
    display: flex;
    flex-grow: 1;
}

.shopArea .shopList .shopInfo {
    margin-bottom: 16px;
    padding: 0 35px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.shopArea .shopList .shopInfo > li {
    display: flex;
    /* margin-bottom: auto; */
}
.shopArea .shopList .shopInfo > li:not(:last-child) {
}
.shopArea .shopList .shopInfo > li:last-child {
    margin-top: 22px;
}
.shopArea .shopList .infoTitle {
    width: 103px;
    font-size: 16px;
    color: #000;
    flex-shrink: 0;
}

.shopArea .shopList .infoText {
    /* flex: 1; */
    font-size: 16px;
    line-height: 1.3;
    align-self: flex-start;
}
.shopArea .shopList .infoText span {
    display: block;
}
.shopArea .shopList .shopMap {
    margin-bottom: 0;
    margin-top: auto;
}

.shopArea .shopList .shopMap iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 438/135.6;
    display: block;
}

.shopArea .shopList .shopBtns {
    display: flex;
    margin-top: 12px;
    gap: 4px;
}

.shopArea .shopList .btnPhone {
    flex: 1;
    margin: 0;
    min-width: 0;
    width: auto;
}

.shopArea .shopList .btnPhone a {
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26.44px;
    text-decoration: none;
    padding: 9px 5px;
    transition: 0.3s;
    height: 100%;
    box-sizing: border-box;
    line-height: 1;

    font-weight: normal;
}

.shopArea .shopList .btnPhone a .txtBtnLink {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.shopArea .shopList .btnPhone a .txtBtnLink::after {
    display: none;
}

.shopArea .shopList .btnPhone a img {
    margin-right: 5px;
    width: 27px;
    margin-top: -3px;
    transition: 0.3s;
}

.shopArea .shopList .btnReserve {
    flex: 1;
    margin: 0;
    min-width: 0;
    width: auto;
}

.shopArea .shopList .btnReserve a {
    background: #e60012;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26.44px;
    text-decoration: none;
    padding: 10px 5px 14px;
    transition: 0.3s;
    height: 100%;
    box-sizing: border-box;
    line-height: 1;
}
.shopArea .shopList .btnReserve a .txtBtnLink {
    padding: 0 46px 0 0;
}
.shopArea .shopList .btnReserve a .txtBtnLink::after {
    top: 52%;
    width: 32px;
    height: 12px;
}


.infoArea {
    padding: 112px 0 102px;
}

.infoArea.bgMarble {
    background: url(../images/shop/info-bg.png) no-repeat center / 100% 100%;
}

.infoArea .inner {
    max-width: 921px;
    margin: 0 auto;
}

.infoArea .infoAreaTitle {
    font-size: 80px;
    text-align: justify;
    letter-spacing: 0.7px;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    margin-bottom: 93px;
    line-height: 1;
}

.infoArea .infoBox {
    width: 100%;
}

.infoArea .infoSubTitle {
    font-size: 32px;
    margin-bottom: 3px;
    padding-left: 75px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.infoArea .infoList {
    max-width: 766px;
    width: 100%;
    margin: 0 auto;
}

.infoArea .infoList li {
    display: flex;
    padding: 32px 0 8px;
    border-bottom: 1px solid #ccc;
}

.infoArea .infoList .infoLabel {
    width: 140px;
    font-size: 16px;
    display: flex;
    align-items: end;
    justify-content: end;
    text-align: left;
    font-size: 20px;
    padding: 0 22px;
    flex-direction: column;
}
.infoArea .infoList .infoLabel span {
    display: block;
}
.infoArea .infoList .infoValue {
    flex: 1;
    font-size: 20px;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-self: flex-end;
    align-items: center;
    padding: 0 28px 0 65px;
}
.infoArea .infoList .infoValue span {
    display: inline-block;
}
.infoArea .infoList .infoValue a {
    color: #000;
    text-decoration: none;
}

.infoArea .infoList .infoValue a:hover {
    text-decoration: underline;
}
.shopArea.bgRainBow:after {
    z-index: -1;
    top: 9.2%;
    right: -7.3%;
}

.shopArea.bgDiamond::before {
    top: 40.6%;
    left: -3.6%;
    /* width: 91.8%; */
    height: 53%;
    transform: rotate(337.6deg);
}
.showWrap.bgDiamond::before {
    bottom: -9.2%;
    top: unset;
    background-position: bottom;
    left: unset;
    right: -16.5%;
    width: 100%;
    max-width: 555px;
    height: 53%;
    background: url("../images/shop/bgDiamond-alt.png") no-repeat center;
    background-size: 100%;
}
/* @media (max-width: 1078px) and (min-width: 769px) {
    .shopArea .pageTitle {
        transform: translateX(-30px);
        padding-left: 109px;
    }
} */
@media (max-width: 1024px) and (min-width: 901px) {
    .shopArea .shopList .shopTags {
        top: -2.7vw;
        left: -6.8vw;
    }
    .shopArea .shopList .shopTags li {
        max-width: 10.1vw;
    }
    .shopArea .shopList .shopTags li:last-child {
        margin-left: -3.3vw;
    }
    .shopArea .shopList .btnPhone a {
        font-size: 2.444vw;
    }
    .shopArea .shopList .btnPhone a img {
        width: 2.5vw;
        margin-top: 0;
    }
    .shopArea .shopList .btnReserve a {
        font-size: 2.54vw;
    }
    .shopArea .shopList .btnReserve a .txtBtnLink {
        padding: 0 4.6vw 0 0;
    }
    .shopArea .shopList .btnReserve a .txtBtnLink::after {
        top: 61%;
        width: 3.2vw;
    }
    .shopArea .shopList .shopInfo {
        padding: 2.5vw;
    }
    .shopArea .shopList .infoTitle {
        width: 10.3vw;
    }
    .shopArea .shopList .infoText {
        font-size: 16px;
    }
}
@media (max-width: 900px) {
    .shopArea .shopList {
        flex-direction: column;
        margin: 0 auto;
        gap: 59px;
        width: 79.9%;
        transform: translateX(0);
    }
    .shopArea .shopList > li {
        width: 100%;
    }

}
@media (min-width: 769px) {
    .shopArea .shopList {
        padding: 0px 60px;
    }
    
    .infoArea .infoList .infoValue .tel {
        pointer-events: none;
    }
    /* .shopArea .shopList .btnPhone a:hover {
        background: #fff;
        color: #000;
        border: 2px solid #000;
        padding: 7px 3px;
        opacity: 1;
    }
    .shopArea .shopList .btnPhone a:hover img {
        content: url('../images/shop/icon-phone-black.svg');
    } */

    .shopArea .shopList .btnReserve a:hover {
        background: #000;
        color: white;
        opacity: 1;
    }
    /* .shopArea .shopList .btnReserve a:hover .txtBtnLink::after {
        background-image: url('../images/shop/icon-arrow-red.svg');
    } */
    .main .wrapMain .mainPhoto img {
        aspect-ratio: 1280 / 645;
        min-height: 645px;
    }
    body:not(:has(.mainSlash)) .main .wrapMain .mainPhoto img {
        clip-path: unset
    }
    .shopArea .shopList .btnPhone a {
        pointer-events: none;
    }
}
@media (max-width: 768px) {
    .main .wrapMain .mainPhoto img {
        aspect-ratio: 450/ 227;
    }
    .shopArea {
        padding: clamp(29px, 6.444vw, 49.49px) 0 clamp(24px, 5.333vw, 40.96px);
    }

    .shopArea .inner {
        padding: 0 11%;
    }

    .shopArea .pageTitle {
        font-size: clamp(33px, 7.333vw, 56.32px);
        margin-bottom: clamp(43px, 9.556vw, 73.39px);
        padding-left: 0;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .shopArea .shopList {
        transform: translateX(0);
    }

    .shopArea .shopList > li {
        width: 100%;
    }

    .shopArea .shopList .shopTags {
        left: -47px;
        top: -18px;
    }

    .shopArea .shopList .shopTags li img {
        /* width: 54px; */
        height: auto;
    }

    .shopArea .shopList .shopName {
        font-size: clamp(16px, 3.556vw, 27.31px);
        margin-bottom: clamp(10px, 2.222vw, 17.07px);
    }

    .shopArea .shopList .infoTitle,
    .shopArea .shopList .infoText {
        font-size: clamp(12px, 2.667vw, 20.48px);
        width: clamp(67px, 14.889vw, 114.35px);
    }

    .shopArea .shopList .shopInfo {
        padding: 0 clamp(21px, 4.811vw, 39.25px);
        margin-bottom: clamp(11px, 2.444vw, 18.77px);
    }

    .shopArea .shopList .infoText {
        width: auto;
    }

    .shopArea .shopList .btnPhone a,
    .shopArea .shopList .btnReserve a {
        font-size: clamp(16.7px, 3.711vw, 28.50px);
        padding: clamp(8px, 1.7776vw, 11.95px) clamp(5px, 1.111vw, 8.53px) clamp(9px, 2vw, 17.07px);
    }

    .shopArea .shopList .btnReserve a .txtBtnLink::after {
        width: 20px;
        height: 7px;
        top: 54%;
    }

    .shopArea .shopList .btnReserve a {
        font-size: clamp(16.7px, 3.711vw, 28.50px);
        letter-spacing: 0;
        padding: clamp(6px, 1.333vw, 10.24px) clamp(5px, 1.111vw, 8.53px) clamp(9px, 2vw, 15.36px);
    }

    .shopArea .shopList .shopTags li {
        max-width: 64.6px;
    }

    .shopArea .shopList .btnPhone a img {
        width: clamp(17px, 3.778vw, 29.01px);
        margin-right: clamp(4px, 0.889vw, 6.83px);
        margin-top: clamp(1px, 0.222vw, 1.71px);
    }

    .infoArea {
        padding: clamp(56px, 12.444vw, 95.57px) 0 clamp(43px, 9.556vw, 73.39px);
    }

    .infoArea .inner {
        padding: 0 10.1%;
    }

    .infoArea .infoAreaTitle {
        font-size: clamp(32px, 7.111vw, 54.61px);
        /* font-weight: bold; */
        margin-bottom: clamp(32px, 7.111vw, 54.61px);
    }

    .infoArea .infoSubTitle {
        padding-left: 0;
        text-align: start;
        margin-bottom: -1px;
        text-indent: clamp(4px, 0.889vw, 6.83px);
        font-size: clamp(16.5px, 3.667vw, 28.16px);
        letter-spacing: 0;
        margin-left: -3px;
    }

    .infoArea .infoList li {
        /* flex-direction: column; */
      padding: clamp(14px, 3.111vw, 23.89px) 0 clamp(5px, 1.111vw, 8.53px);
    }

    .infoArea .infoList .infoLabel {
        text-align: right;
        font-size: clamp(12px, 2.67vw, 23.89px);
        padding: 0 clamp(3px, 0.667vw, 5.12px) 0 clamp(7px, 1.556vw, 11.95px);
        width: clamp(64px, 14.222vw, 124.59px);
        align-self: self-end;
    }

    .infoArea .infoList .infoValue {
        font-size: clamp(12px, 2.67vw, 23.89px);
        padding: 0 clamp(16px, 3.444vw, 34.13px) 0;
    }

    .shopArea .shopList .shopImgWrap {
        margin-bottom: clamp(23px, 5.111vw, 39.25px);
    }

    .shopArea .shopList .shopMap iframe {
        aspect-ratio: 280.3 / 86.67;
    }

    .shopArea .shopList .shopBtns {
        margin-top: clamp(7px, 1.556vw, 11.95px);
        gap: clamp(3px, 0.667vw, 5.12px);
    }

    .shopArea .shopList .shopTags li:last-child {
        margin-left: clamp(-25px, -5.556vw, -42.67px);
    }

    .shopArea .shopList .btnReserve a .txtBtnLink {
        padding-right: clamp(28px, 6.222vw, 47.79px);
    }

    .infoArea.bgMarble {
        background: url(../images/shop/info-bg-sp.png) no-repeat center / 100% 100%;
    }

    .shopArea.bgRainBow:after {
        top: 13.6%;
        right: -23%;
    }

    .shopArea.bgDiamond::before {
        top: 33.7%;
        left: 4%;
        width: 84.8%;
        height: 53%;
    }

    .showWrap.bgDiamond::before {
        bottom: 4.1%;
        right: -29.1%;
        width: 95.86vw;
    }
}
@media (max-width: 430px) {
    .shopArea .shopList .btnPhone a, .shopArea .shopList .btnReserve a {
        font-size: 3.71vw;
    }
    .shopArea .shopList .btnPhone a img {
        width: 3.78vw;
    }
}

@media (max-width: 390px) {
    .shopArea .inner {
        padding: 0 6%;
    }
    .infoArea .inner {
        padding: 0 6%;
    }
    .shopArea .shopList {
        width: 100%;
    }
    .shopArea .shopList .shopTags {
        left: -5.3vw;
    }
    .shopArea .shopList .btnPhone a, .shopArea .shopList .btnReserve a {
        font-size: 18px;
        padding: 9px 5px 8px;
    }
    .shopArea .shopList .btnPhone a img {
        margin-top: 2px;
    }
}