@charset "utf-8";

/*------------------------------------------------------------
    template-base
------------------------------------------------------------*/
/* base */
.static.static-md {
    font-family: inherit;
    font-weight: 400;
    margin-bottom: 16rem;
}

.comTagBox,
.comTagBox .tagList,
.comTagBox .tagList li {
    margin: 0;
}

.comTagBox {
    margin-top: 1.6rem;
}

.comTagBox .tagList {
    gap: 0.4rem;
}

.comTagBox .tagList .list01 {
    color: #000;
}

.comTagBox .tagList .order {
    background-color: #fff;
}

.static.static-md .content_block:not(:first-of-type) {
    margin-top: 8rem;
    padding-top: 8rem;
    border-top: 1px solid #ccc;
}

.static.static-md .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.33;
    font-family: "Lato", sans-serif;
}

.static.static-md .price.-soldout {
    color: rgba(0, 0, 0, 0.3);
}

.static.static-md .price.-soldout::after {
    content: "品切れ";
    margin-left: 0.8rem;
    padding: 0.2rem 0.3rem;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    align-self: center;
    line-height: 1.6rem;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.3);
}

.static.static-md .price>span {
    margin-left: 0.4rem;
    font-size: 1.2rem;
    line-height: 2;
    letter-spacing: -0.01em;
    font-family: "Noto Sans JP", sans-serif;
}

.static.static-md .btn_area .btn {
    box-shadow: none;
    font-weight: 500;
    height: 5rem;
    border-width: 1px;
}

.static.static-md .content_block .block_title {
    text-align: center;
    margin-bottom: 4.0rem;
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 2.9rem;
}

.static.static-md .content_block .btn_area {
    margin-top: 4rem;
}

@media all and (max-width: 519px) {
    .static.static-md {
        margin-bottom: 8rem;
    }

    .comTagBox {
        padding-bottom: 0;
        border-bottom: none;
    }

    .static.static-md .content_block {
        margin-left: 1.6rem;
        margin-right: 1.6rem;
    }

    .static.static-md .content_block:not(:first-of-type) {
        margin-top: 4.8rem;
        padding-top: 4.8rem;
    }

    .static.static-md .btn_area .btn {
        width: 100%;
    }

    .static.static-md .content_block .block_title {
        font-size: 1.8rem;
        line-height: 2.6rem;
    }
}

/* kv_area */
.kv_area .-img {
    height: 50rem;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.kv_area .-img>img {
    padding: 0 calc((100% - 50rem) / 2);
    backdrop-filter: blur(50px) brightness(1.2);
    background: rgba(255, 255, 255, 0.35);
}

.kv_area .-lead {
    padding: 4.8rem 0 5.6rem;
    background-position: left top;
    background-repeat: repeat;
    background-size: 5.5rem;
}

.kv_area .-lead.bg-light {
    background-image: url(../../common/images/bg_lead-light.png);
    color: #000;
}

.kv_area .-lead.bg-dark {
    background-image: url(../../common/images/bg_lead-dark.png);
    color: #fff;
}

.kv_area .-lead .-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 3.7rem;
}

.kv_area .-lead .-title .-date {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.7rem;
    text-shadow: 0 0 0.3rem rgba(255, 255, 255, 0.6);
}

.kv_area .-lead.bg-light .-title .-date {
    color: rgba(0, 0, 0, 0.5);
}

.kv_area .-lead .-txt {
    margin-top: 3.2rem;
    font-size: 1.6rem;
}

@media all and (max-width: 519px) {
    .kv_area .-img {
        height: auto;
    }

    .kv_area .-img>img {
        padding: 0;
        backdrop-filter: none;
        background: transparent;
    }

    .kv_area .-lead {
        padding: 3.2rem 0 4.8rem;
    }

    .kv_area .-lead .-title {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 2.2rem;
        line-height: 3.2rem;
    }

    .kv_area .-lead .-title .-date {
        margin-top: 0.8rem;
    }

    .kv_area .-lead .-txt {
        margin-top: 3.2rem;
        font-size: 1.6rem;
    }

}

/* main */
.content_wrapper.-main {
    padding: 8rem 0 9.6rem;
}

@media all and (max-width: 519px) {
    .content_wrapper.-main {
        padding: 4.8rem 0 6.4rem;
    }
}

/* main_introduction */

.introduction .intro_list {
    display: flex;
    flex-direction: column;
    gap: 8rem 0;
}

.introduction .intro_list .item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 5.6rem;
}

.introduction .intro_list .item.col_l {
    flex-direction: row;
}

.introduction .intro_list .item.col_r {
    flex-direction: row-reverse;
    justify-content: space-between;
}

.introduction .intro_list .item .-img,
.introduction .intro_list .item .-video {
    width: 43.5rem;
    flex-shrink: 0;
}

.introduction .intro_list .item .-video {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
}

.introduction .intro_list .item .-video > video {
    width: 100%;
    height: 100%;
    background-color: #B5B4B4;
    border-radius: 1.2rem;
}

.introduction .intro_list .item .-video>iframe {
    width: 100%;
    height: 100%;
    border-radius: 1.2rem;
}

.introduction .intro_list .item .-txt .inner_title {
    display: inline-block;
    padding: 0 0.4rem 0.8rem;
    margin-bottom: 2.4rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.6rem;
    border-bottom: 3px solid #FFCB03;
}

.introduction .intro_list .item .-txt .inner_title + .item_name {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1em;
}

.introduction .intro_list .item .-txt .inner_txt {
    font-size: 1.6rem;
}

.introduction .intro_list .item .-txt .inner_txt + .item_name {
    margin-top: 1.6rem;
    font-size: 1.4rem;
    line-height: 2rem;
}

.introduction .intro_list .item .-txt .price {
    margin-top: 1.2rem;
}

@media all and (max-width: 519px) {
    .introduction .intro_list {
        display: flex;
        flex-direction: column;
        gap: 5.6rem 0;
    }

    .introduction .intro_list .item {
        position: relative;
        display: block;
        margin-top: 6.1rem;
    }

    .introduction .intro_list .item .-img,
    .introduction .intro_list .item .-video {
        width: 100%;
    }

    .introduction .intro_list .item .-txt {
        margin-top: 2.4rem;
        display: flex;
        flex-direction: column;
    }

    .introduction .intro_list .item .-txt .inner_title {
        font-size: 1.8rem;
        display: block;
        position: absolute;
        margin: 0 auto;
        top: -6.1rem;
        align-self: center;
    }
}

/* main_lineup */
.lineup .lineup_list {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4.0rem;
}

.lineup .lineup_list .item {
    width: calc((100% - (4.0rem * 2)) / 3);
}

.lineup .lineup_list .item .-img>a {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 0.8rem;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.2);
    background-color: #fff;
    overflow: hidden;
    transition: .3s;
}

.lineup .lineup_list .item .-img>a:hover {
    transform: translateY(-1rem);
}

.lineup .lineup_list .item .-img>a>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lineup .lineup_list .item .-txt {
    margin-top: 2.4rem;
}

.lineup .lineup_list .item .-txt .item_name {
    display: block;
    font-size: 1.4rem;
    line-height: 2.0rem;
}

.lineup .lineup_list .item .-txt .price {
    margin-top: 1.6rem;
}

.lineup .lineup_list .item .-txt .tag_list {
    margin-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
}

.lineup .lineup_list .item .-txt .tag_list>li {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.lineup .lineup_list .item .-txt .tag_list .new {
    padding: 0.1rem 0.4rem;
    color: #fff;
    font-weight: 400;
    line-height: 1.6rem;
    border-radius: 0.2rem;
    background-color: #dc2204;
    font-family: "Lato", sans-serif;
}

.lineup .lineup_list .item .-txt .tag_list .restock {
    color: rgba(220, 34, 0, 0.6);
}

.lineup .lineup_list .item .-txt .tag_list .order {
    color: #dc2201;
}

.lineup .lineup_list .item .-txt .tag_list .reserve {
    color: #71c311;
}

.lineup .note_area {
    margin-top: 4rem;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.7);
}

@media all and (max-width: 519px) {

    .lineup .lineup_list {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 4.0rem 0.9rem;
    }

    .lineup .lineup_list .item {
        width: calc((100% - 0.9rem) / 2);
    }

    .lineup .lineup_list .item .-txt {
        margin-top: 1.2rem;
        padding: 0 0.4rem;
    }

    .lineup .lineup_list .item .-txt .price {
        margin-top: 1.2rem;
    }


}

/* feature */
.content_wrapper.-yellow {
    padding: 4.8rem 0 5.6rem;
    background: url(../../common/images/bg_feature.png) repeat top left / 2.1rem;
}

.feature .banner_list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 4.0rem;
}

.feature .banner_list .item {
    width: calc((100% - (4.0rem * 2)) / 3);
}

.feature .banner_list .item .-img {
    display: block;
    overflow: hidden;
    border-radius: 1.6rem;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
    transition: .3s;
}

.feature .banner_list .item .-img:hover {
    transform: translateY(-1rem);
}

@media all and (max-width: 519px) {
    .content_wrapper.-yellow {
        padding: 3.2rem 0 4.8rem;
    }

    .static.static-md .content_block.feature .block_title {
        margin-bottom: 3.2rem;
    }

    .feature .banner_list {
        flex-direction: column;
        gap: 3.2rem;
    }

    .feature .banner_list .item {
        width: 100%;
    }
}