@charset "utf-8";

/*----------------------------------------------------------------------
* index
--------------------------------------------------------------------- */
/* mv */
.mv {
    position: relative;
}
.mv-txt01 {
    opacity: 0;
    transform: translate(0, 20px);
    transition: all 1.0s ease 0.5s;
}
.mv-txt02 {
    opacity: 0;
    transform: translate(0, 20px);
    transition: all 1.0s ease 1.0s;
}
.mv-txt03 {
    opacity: 0;
    transform: translate(0, 20px);
    transition: all 1.0s ease 2s;
}
.mv-logo {
    opacity: 0;
    transform: translate(0, 20px);
    transition: all 1.0s ease 1.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.2rem;
}
.mv-logo .mv-logo-panjo {
    width: 18.7rem;
}
.mv-logo .mv-logo-takashimaya {
    width: 21.2rem;
}

.mv.active .mv-txt01,
.mv.active .mv-txt02,
.mv.active .mv-txt03,
.mv.active .mv-logo {
    opacity: 1;
    transform: translate(0, 0);
}


/* mv-illust */
/* .mv .mv-illust {
    opacity: 0;
    transition: all 1.0s ease 3s;
}
.mv.active .mv-illust {
    opacity: 1;
} */
.mv-illust p {
    position: absolute;
    z-index: 100;
}
.mv-illust-01 {
    top: 3.3rem;
    left: 2.6rem;
    width: 7.1rem;
}
.mv-illust-02 {
    top: 14rem;
    left: 3.6rem;
    width: 4.6rem;
}
.mv-illust-03 {
    top: 63.9rem;
    left: 2.6rem;
    width: 6.9rem;
}
.mv-illust-04 {
    top: 76.5rem;
    left: 4rem;
    width: 4.2rem;
}
.mv-illust-05 {
    top: 88.5rem;
    left: 3rem;
    width: 6.2rem;
}
.mv-illust-06 {
    top: 3.7rem;
    right: 2.5rem;
    width: 7.2rem;
}
.mv-illust-07 {
    top: 12.9rem;
    right: 3.2rem;
    width: 6.4rem;
}
.mv-illust-08 {
    top: 64.6rem;
    right: 3.4rem;
    width: 6.7rem;
}
.mv-illust-09 {
    top: 76.3rem;
    right: 2.8rem;
    width: 5.8rem;
}
.mv-illust-10 {
    top: 87.9rem;
    right: 1.9rem;
    width: 8.1rem;
}
.mv-illust-anime {
    animation: swing 1s steps(2) infinite alternate;
}
@keyframes swing {
    from {
        transform: rotate(-20deg);
    }
    to {
        transform: rotate(20deg);
    }
}


/* search-area
========================================= */
.search-area {
    width: 71.6rem;
    margin: 0 auto 4rem;
    background-color: #fff;
    border: 1px solid #b3b3b3;
    border-radius: 1rem;
}
.search-area-ttl {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    padding: 2rem 0;
    border-bottom: 1px solid #b3b3b3;
}
.search-content {
    padding: 3rem 5rem;
}
.search-block {
    margin: 0 0 3rem;
}
.search-block-ttl {
    margin: 0 0 1rem;
    font-size: 2.4rem;
}

/* select-list */
.select-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.2rem 3.6rem;
}
.select-list li {
    position: relative;
}
.select-list li.w1 {
    width: 26rem;
}
.select-list li.w2 {
    width: 28rem;
}
.select-list li.w3 {
    width: 36rem;
}
.select-list li.w4 {
    width: 29.4rem;
}

.select-list input[type="checkbox"] {
    appearance: none;
    display: flex;
    width: 100%;
    height: 7.4rem;
    margin: 0;
    padding: 2rem 3rem;
    background-color: #fff;
    border: 1px solid #b3b3b3;
    border-radius: 100vh;
}
.select-list label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    cursor: pointer;
}
.select-list input[type="checkbox"]:checked {
    background-color: #d8d9da;
}
.icon-bento {
    background: url(../img/icon_bento.svg) no-repeat left 2.8rem center;
    background-size: 5rem;
    padding-left: 6rem;
}
.icon-bread {
    background: url(../img/icon_bread.svg) no-repeat left 2.8rem center;
    background-size: 5.5rem;
    padding-left: 6.5rem;
}
.icon-sweet {
    background: url(../img/icon_sweet.svg) no-repeat left 2.8rem center;
    background-size: 4.8rem;
    padding-left: 5.8rem;
}
.icon-takeout {
    background: url(../img/icon_takeout.svg) no-repeat left 2.8rem center;
    background-size: 4.2rem;
    padding-left: 5.2rem;
}
.icon-delivery {
    background: url(../img/icon_delivery.svg) no-repeat left 2.8rem center;
    background-size: 5.7rem;
    padding-left: 6.7rem;
}
.icon-mobile {
    background: url(../img/icon_mobile.svg) no-repeat left 3.2rem center;
    background-size: 3.4rem;
    padding-left: 4.4rem;
}

/* search-keyword */
.search-keyword input[type=text] {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 2.4rem;
    width: 100%;
    padding: 2.3rem 3rem 2.3rem 9rem;
    background-image: url(../img/icon_keyword.svg);
    background-size: 5rem;
    background-position: left 2rem center;
    background-repeat: no-repeat;
    background-color: #e6e6e6;
    border: 1px solid #cccccc;
    border-radius: 0.5rem;
}
.search-keyword input::placeholder {
    color: #999;
    font-size: 2.8rem;
}

/* btn-search */
.btn-search {
    width: 100%;
    margin: 3rem auto 0;
}
.btn-search button {
    display: block;
    width: 100%;
    padding: 2.3rem 4rem;
    text-align: center;
    font-size: 3.2rem;
    background-color: #ff8e0d;
    color: #fff;
    border-radius: 0.5rem;
    transition: opacity 0.4s;
}
.btn-search button:hover {
    opacity: 0.6;
}

/* btn-reset */
.btn-reset {
    width: 100%;
    margin: 3rem auto 0;
}
.btn-reset button {
    display: block;
    width: 100%;
    padding: 1.2rem 4rem;
    text-align: center;
    font-size: 3.2rem;
    border: 1px solid #ff8e0d;
    color: #ff8e0d;
    border-radius: 0.5rem;
    transition: opacity 0.4s;
}
.btn-reset button:hover {
    opacity: 0.6;
}


/* shop-area
========================================= */
.shop-area {
    padding: 0 0 5rem;
    background-color: #f2f2f2;
}
.shop-list-panjo {
    padding: 0 0 2rem;
}
.shop-area-ttl {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    padding: 2rem 0;
}

.shop-list-head {
    padding: 0 1.7rem;
}
.shop-list-head button {
    position: relative;
    display: block;
    width: 100%;
    font-size: 3.8rem;
    font-weight: 700;
    padding: 1.3rem 2rem;
    border-radius: 0.5rem;
    color: #fff;
    box-shadow: 0 0 0.8rem rgba(0,0,0,0.15);
}
.shop-list-head.is-open button {
    background-image: url(../img/arrow01_w.svg);
}
.shop-list-panjo .shop-list-head button {
    background-color: #61bc32;
}
.shop-list-panjo .shop-list-head button::after {
    content: '';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4.2rem;
    height: 4.2rem;
    background-image: url(../img/arrow01_b.svg);
    background-repeat: no-repeat;
    background-size: 4.2rem;
}
.shop-list-takashimaya .shop-list-head button {
    background-color: #ff4300;
}
.shop-list-takashimaya .shop-list-head button::after {
    content: '';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4.2rem;
    height: 4.2rem;
    background-image: url(../img/arrow02_b.svg);
    background-repeat: no-repeat;
    background-size: 4.2rem;
}
.shop-list-head.is-open button::after {
    transform: translateY(-50%) rotate(180deg);
}

.shop-list-wrapper {
    overflow-y: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}
.shop-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    padding: 1.7rem;
}
.shop-list li {
    width: calc(50% - 0.8rem);
}
.shop-list li a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.8rem rgba(0,0,0,0.2);
}

.shop-list-item .floor {
    padding: 0.5rem 0;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
}
.shop-list-item .image {
    position: relative;
}
.shop-list-item .image .image-box {
    width: 100%;
    aspect-ratio: 530 / 380;
}
.shop-list-item .image .image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-list-item .image .category-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #808080;
    border-radius: 0.5rem 0 0 0;
    padding: 0.5rem 1rem 0.5rem 4.5rem;
    color: #fff;
    font-size: 2.3rem;
}
.shop-list-item .image .category-icon.category-icon-bento {
    background-image: url(../img/icon_bento2.svg);
    background-size: 2.5rem;
    background-position: left 1rem center;
    background-repeat: no-repeat;
}
.shop-list-item .image .category-icon.category-icon-bread {
    background-image: url(../img/icon_bread2.svg);
    background-size: 2.6rem;
    background-position: left 1rem center;
    background-repeat: no-repeat;
}
.shop-list-item .image .category-icon.category-icon-sweet {
    background-image: url(../img/icon_sweet2.svg);
    background-size: 2.2rem;
    background-position: left 1.2rem center;
    background-repeat: no-repeat;
    padding-left: 4.2rem;
}
.shop-list-item .txt {
    padding: 1.6rem 1.4rem;
}
.shop-list-item .shop {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
}
.shop-list-item .type {
    text-align: center;
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.3;
    padding: 0.5rem 0;
}
.shop-list-item .use-icon {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 1rem;
    padding: 1rem 0 0;
}
.shop-list-item .use-icon li {
    background-color: #f2f2f2;
    border-radius: 100vh;
    padding: 0.7rem 1rem 0.7rem 4.5rem;
    font-size: 1.8rem;
}
.shop-list-item .use-icon li.use-icon-takeout {
    width: 16rem;
    background-image: url(../img/icon_takeout.svg);
    background-size: 1.8rem;
    background-position: left 1.5rem center;
    background-repeat: no-repeat;
}
.shop-list-item .use-icon li.use-icon-delivery {
    width: 15rem;
    background-image: url(../img/icon_delivery.svg);
    background-size: 2.7rem;
    background-position: left 1.5rem center;
    background-repeat: no-repeat;
    padding-left: 5rem;
}
.shop-list-item .use-icon li.use-icon-mobile {
    width: 21rem;
    background-image: url(../img/icon_mobile.svg);
    background-size: 1.5rem;
    background-position: left 1.7rem center;
    background-repeat: no-repeat;
}

.shop-note {
    padding: 4rem 4rem 0;
    font-size: 2.3rem;
}

.no-result {
    width: calc(100% - 3.4rem);
    margin: 1.7rem auto 0;
    padding: 2rem;
    text-align: center;
    font-size: 2.3rem;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.8rem rgba(0,0,0,0.2);
}