@charset "utf-8";

:root {
    --main-color: #fff025;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (min-width: 981px) {
    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */

    /*common //////////////////////*/
    body {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.08em;
    }

    .pc {
        display: block;
    }

    .sp {
        display: none;
    }

    .inner {
        width: 100%;
        max-width: 1366px;
        margin: 0 auto;
    }

    /*//////////////////////*/
    /*------*/
    #end {
        display: block;
        text-align: center;
        padding: 1em 0;
        color: #FFFFFF;
        width: 100%;
        margin: 0 auto;
        font-size: 125%;
        font-weight: bold;
        background: #333;
    }

    /*------*/
    header .topvisual {
        /* margin-top: 74px; */
        width: 100%;
        max-width: none;
        height: auto;
        position: relative;
    }

    header h1 {
        /*width: 120px;*/
        width: 8.7%;
        height: auto;
        position: absolute;
        top: 20px;
        right: 20px;
    }

    header .date {
        position: absolute;
        bottom: 161px;
        left: 939px;
        width: 379px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: auto;
        bottom: -6px;
        color: #000;
        z-index: 11;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        width: 10px;
        height: 14px;
        font-size: 14px;
        font-weight: 600;
    }

    .swiper-button-next {
        right: calc(49% - 80px);
    }

    .swiper-button-prev {
        left: calc(49% - 80px);
    }

    .swiper-pagination {
        bottom: 20px;
    }

    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        border: 1px solid #000;
        border-radius: 50%;
        background-color: #fff;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        background-color: #000;
    }

    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 7px;
    }

    /*------*/
    #content {}

    /*------*/
    #content .lead {
        text-align: center;
        margin: 50px auto 30px;
    }

    #content .lead .l1 {
        margin: 0 auto 10px;
    }

    #content .lead .l2 {
        margin: 0 auto;
        font-weight: 900;
        font-size: 32px;
        letter-spacing: 0.075em;
    }

    #content .lead .l2 span {
        font-size: 46px;
        color: #e54490;
    }

    /*------*/
    #content .note {
        text-align: center;
        font-size: 12px;
        margin: 0 auto 44px;
    }

    #content .note li {
        margin: 0 auto 10px;
    }

    /*------*/
    #content .link {
        display: flex;
        column-gap: 15px;
        margin: 0 auto;
        padding-inline: 20px;
    }

    #content .modal {
        display: flex;
        column-gap: 15px;
        margin-top: 40px;
        margin-bottom: 80px;
        padding-inline: 20px;
        text-align: center;
        justify-content: space-around;
    }

    #content .link_btn {
        box-sizing: border-box;
        text-align: center;
        line-height: 1;
        position: relative;
        border: 1.5px solid #000;
    }

    #content .link_btn.--column {
        width: 33.333%;
    }

    /* #content .link_btn.ilumine{
    background-image: url(../images/bg_ilumine.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: .5s;
} */
    #content .link_btn.--modal {
        display: inline-block;
        width: 50%;
        cursor: pointer;
        transition: 0.5s;
    }

    #content .link_btn a,
    #content .link_btn .modal_open {
        position: relative;
        display: block;
        width: 100%;
        color: #000;
    }

    /* #content .link_btn.ilumine a{
    color: #fff;
} */
    #content .link_btn a {
        display: grid;
        grid-template-rows: auto auto auto;
        padding: 24px 20px 17px;
        height: 100%;
    }

    #content .link_btn.--modal a {
        padding: 0;
    }

    #content .newshop_text {
        position: absolute;
        top: 122px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.08em;
    }

    #content .link_btn .modal_open {
        padding: 30px 20px 31px;
    }

    #content .link_btn.--column .txt {
        order: 1;
        margin-bottom: 20px;
    }

    #content .link_btn.--column .txt .sub_txt {
        padding: 5px 12px;
        border-radius: 30px;
        background-color: #fff025;
        font-size: clamp(10px, -0.192px + 1.04vw, 14px);
        font-weight: 700;
        transition: background-color 0.2s;
    }

    #content .link_btn.--column a:hover .txt .sub_txt {
        background-color: #fff;
    }

    #content .link_btn.--modal .txt {
        margin: 0 auto 13px;
    }

    #content .link_btn .main_txt {
        display: block;
        margin-top: 24px;
        font-weight: 900;
    }

    #content .link_btn.--column .main_txt {
        font-size: 20px;
    }

    #content .link_btn.--modal .main_txt {
        font-size: 24px;
    }

    #content .link_btn .icon {
        order: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        border: 1.5px solid #000;
        border-radius: 50%;
        text-align: center;
        transition: 0.5s;
    }

    #content .link_btn.--column .icon {
        width: 53px;
        height: 53px;
        background-color: var(--main-color);
    }

    #content .link_btn.--modal .icon {
        position: absolute;
        top: 50%;
        left: 36px;
        transform: translateY(-50%);
        width: 70px;
        height: 70px;
        background-color: #fff;
    }

    #content .link_btn .icon.card img {
        width: 28px;
    }

    #content .link_btn .icon.ilumine img {
        width: 27px;
    }

    #content .link_btn .icon.webpay img {
        margin-right: 5px;
        width: 25px;
    }

    #content .link_btn .icon.shop img {
        width: 46px;
    }

    #content .link_btn a:after {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        border-top: 2px solid #000;
        border-right: 2px solid #000;
        -webkit-transform: rotate(45deg) translateY(-50%);
        transform: rotate(45deg) translateY(-50%);
        position: absolute;
        top: 50%;
        right: 30px;
    }

    /* #content .link_btn.ilumine a:after{
    border-color: #fff;
} */
    #content .link_btn.--modal a:after {
        display: none;
    }

    #content .link_btn.--column a,
    #content .link_btn.--column a .icon,
    #content .link_btn.--column a:after {
        transition: 0.5s;
    }

    #content .link_btn.--column a:hover {
        background: var(--main-color);
    }

    /* #content .link_btn.ilumine:hover{
    opacity: 0.7;
} */
    /* #content .link_btn.ilumine a:hover{
    background: transparent;
} */
    #content .link_btn.--column a:hover .icon {
        background-color: #fff;
    }

    #content .link_btn.--column a:hover:after {
        right: 25px;
    }

    #content .link_btn.--modal:hover {
        opacity: 0.6;
    }

    /* modal */
    .modal_container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        background: rgba(0, 0, 0, 45%);
        padding: 40px 20px;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        box-sizing: border-box;
        z-index: 2;
    }

    .modal_container:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

    .modal_container.active {
        opacity: 1;
        visibility: visible;
    }

    .modal_body {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        max-width: 880px;
        width: 90%;
    }

    .modal_close {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 40px;
        right: 40px;
        width: 40px;
        height: 40px;
        font-size: 37px;
        color: #000;
        cursor: pointer;
    }

    .modal_content {
        border: 3px solid #000;
        background: #fff;
        text-align: left;
        padding: 45px 72px 32px;
    }

    .modal_icon {
        display: block;
        margin: 0 auto;
        width: 70px;
        height: auto;
    }

    .modal_ttl {
        margin-top: 15px;
        font-size: 19px;
        text-align: center;
        line-height: 1;
        letter-spacing: 0.08em;
        font-weight: 900;
    }

    .shop {
        padding: 39px 0;
        background-color: #333;
    }

    .shop_list {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        width: 78.74%;
        max-width: 1085px;
    }

    .shop_item {
        width: 70%;
    }

    .shop_item.newman {
        flex-shrink: 0;
        width: auto;
    }

    .shop_list dt {
        margin-bottom: 12px;
        font-size: 16px;
        letter-spacing: 0.02em;
        font-weight: 600;
        color: #fff;
    }

    .shop_area {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }

    .shop_item.newman .shop_area {
        flex-wrap: wrap;
        width: 265px;
    }

    .shop_area dd {
        position: relative;
        margin-top: 10px;
        margin-right: 10px;
        padding-left: 11px;
        width: 122px;
        font-size: 12px;
        line-height: 1.3;
    }

    .shop_area dd:nth-of-type(5n+3) {
        width: 176px;
    }

    .shop_item.newman .shop_area dd:last-of-type {
        margin-right: 0;
        width: auto;
    }

    .shop_area.colum3 dd {
        margin-right: 15px;
    }

    .shop_area dd:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%) rotate(45deg);
        width: 4px;
        height: 4px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }

    .shop_area dd a {
        display: block;
        width: 100%;
        color: #fff;
    }

    .coordination_ttl,
    .recommend_ttl {
        font-size: 32px;
        text-align: center;
        letter-spacing: 0.075em;
        font-weight: 900;
    }

    .coordination_ttl span,
    .recommend_ttl span {
        font-size: 44px;
        color: #e54490;
    }

    /* coordination */
    .coordination {
        padding: 55px 0 83px;
        background-color: #eeeeee;
    }

    .recommend_list,
    .coordination_list {
        display: flex;
        justify-content: space-between;
        margin: 55px auto 0;
        width: 78.74%;
        max-width: 1085px;
    }

    .coordination_list {
        column-gap: 25px;
    }

    .recommend_item,
    .coordination_item {
        transition: .3s;
    }

    .recommend_item:hover,
    .coordination_item:hover {
        opacity: 0.6;
    }

    .coordination_name {
        margin-top: 15px;
        font-size: 14px;
        line-height: 1.57;
        letter-spacing: 0.02em;
        color: #000;
    }

    /* recommend */
    .recommend {
        padding: 55px 0 83px;
        background-color: #f4f2e5;
    }

    .recommend_list {
        column-gap: 40px;
    }

    .recommend_item img {
        width: 100%;
    }

    .recommend_name {
        margin-top: 15px;
        font-size: 16px;
        letter-spacing: 0.02em;
        color: #000;
    }


    /* band */
    #wrap .band {
        position: fixed;
        top: 0;
        padding: 18px 0;
        width: 100vw;
        background-color: #c69e61;
        z-index: 12;
    }

    #wrap .band .row {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #wrap .band .row:hover {
        opacity: 0.7;
        transition: 0.5s;
    }

    #wrap .band .text {
        display: flex;
        align-items: center;
        padding: 0 33px;
        font-size: 32px;
        letter-spacing: 0.2em;
        line-height: 1;
        font-weight: bold;
        color: #000;
    }

    #wrap .band .text span {
        font-size: 0.85em;
        padding-right: 6px;
    }

    #wrap .band .text.pre {
        font-size: 32px;
        letter-spacing: 0.2em;
    }

    #wrap .band .btn {
        display: inline-block;
        position: relative;
        padding: 11px 5px 11px 0;
        border-radius: 20px;
        width: 237px;
        background-color: #fff;
        font-size: 17px;
        text-align: center;
        letter-spacing: 0.2em;
        line-height: 1;
        color: #000;
        font-weight: bold;
    }

    #wrap .band .btn:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%) rotate(45deg);
        width: 8px;
        height: 8px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
    }

    /* xmas */
    /* #content .modal{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
}
#content .link_btn.--modal{
    width: auto;
}
#content .link_btn.--xmas{
    display: inline-block;
    background-color: #24976c;
    transition: 0.5s;
}
#content .link_btn.--xmas:hover{
    opacity: 0.6;
}
#content .link_btn.--xmas a{
    display: flex;
    align-items: center;
    justify-content: center;
}
#content .link_btn.--xmas a:after{
    display: none;
}
#content .link_btn.--xmas .icon{
    position: absolute;
    top: 50%;
    left: 36px;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    background-color: #fff;
}
#content .link_btn .icon.xmas img{
    width: 33px;
}
#content .link_btn.--xmas .main_txt{
    margin-top: 0;
    font-size: 24px;
}
#content .link_btn.--xmas .main_txt br{
    display: none;
} */



    /*------*/
    footer {
        text-align: right;
        padding: 20px 30px 20px 0;
        background-color: #333;
        color: #fff;
    }

    footer .copyright {
        font-size: 10px;
    }

    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
}

@media screen and (min-width:981px) and (max-width:1366px) {

    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
    header .date {
        position: absolute;
        bottom: 27%;
        left: 68.8%;
        width: 27.75%;
    }

    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
}

@media screen and (min-width:981px) and (max-width:1053px) {

    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
    #content .link_btn.--xmas .main_txt br {
        display: block;
    }


    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
}

@media (max-width: 980px) {
    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */

    /*common //////////////////////*/
    html {}

    body {
        font-size: 3.466666666666667vw;
        font-weight: 500;
        letter-spacing: 0.08em;
    }

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .inner {
        width: 90vw;
        margin: 0 auto;
    }

    /*//////////////////////*/
    .wrap {}

    main {}

    /*------*/
    #end {
        display: block;
        text-align: center;
        padding: 1em 0;
        color: #FFFFFF;
        width: 100%;
        margin: 0 auto;
        font-size: 125%;
        font-weight: bold;
        background: #333;
    }

    /*------*/
    header .topvisual {
        /* margin-top: 19.6vw; */
        padding-bottom: 6vw;
        width: 100%;
        height: auto;
        position: relative;
    }

    header h1 {
        width: 20vw;
        height: auto;
        font-size: 0;
        position: absolute;
        top: 2.6666666666666665vw;
        left: 2.6666666666666665vw;
    }

    header .date {
        position: absolute;
        bottom: 13%;
        left: 6%;
        width: 53.33vw;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: 1.5vw;
    }

    .swiper-pagination-bullet {
        margin: 0 7px;
        width: 10px;
        height: 10px;
        border: 1px solid #000;
        border-radius: 50%;
        background-color: #fff;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        background-color: #000;
    }

    /*------*/
    #content {}

    /*------*/
    #content .lead {
        text-align: center;
        margin: 6vw auto 5.333333333333333vw;
    }

    #content .lead .l1 {
        margin: 0 auto 1.3333333333333333vw;
        font-size: 3.47vw;
        line-height: 1.5;
    }

    #content .lead .l2 {
        margin: 0 auto;
        font-weight: 900;
        font-size: 4.8vw;
        letter-spacing: 0.05em;
    }

    #content .lead .l2 span {
        font-size: 7.2vw;
        color: #e54490;
    }

    /*------*/
    #content .note {
        text-align: center;
        font-size: 2.6666666666666665vw;
        margin: 0 auto 6vw;
        line-height: 1.5;
    }

    #content .note li {
        margin: 0 auto 1.3333333333333333vw;
    }

    /*#content .note li a:hover{
    opacity: 0.7;
    transition: 0.5s;
}*/
    /*------*/
    #content .link {
        width: 100%;
        margin: 0 auto;
    }

    #content .modal {
        margin-top: 9.73vw;
        text-align: center;
    }

    #content .link_btn {
        width: 100%;
        margin: 0 auto 1.47vw;
        border: 0.4vw solid #000;
        box-sizing: border-box;
        text-align: center;
        line-height: 1;
        position: relative;
    }

    /* #content .link_btn.ilumine{
    background-image: url(../images/bg_ilumine.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    transition: .5s;
} */
    /* #content .link_btn.ilumine:hover{
    opacity: 0.7;
} */
    #content .link_btn.--modal {
        margin-bottom: 13.47vw;
        cursor: pointer;
        transition: .5s;
    }

    #content .link_btn.--modal:not(:last-of-type) {
        margin-bottom: 1.87vw;
    }

    #content .link_btn.--modal:hover {
        opacity: 0.6;
    }

    #content .link_btn a,
    #content .link_btn .modal_open {
        display: flex;
        text-align: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 5.6vw 9.73vw 5.6vw 5.33vw;
        color: #000;
    }

    #content .link_btn.--modal a {
        padding: 0;
    }

    .newshop_text {
        position: absolute;
        top: 17.8vw;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2.67vw;
        font-weight: 900;
        letter-spacing: 0.02em;
    }

    #content .link_btn .txt {
        width: 68vw;
        font-size: 2.6vw;
        font-weight: 700;
    }

    /* #content .link_btn.ilumine .txt{
    color: #fff;
} */
    #content .link_btn.--modal .txt {
        letter-spacing: 0.08em;
    }

    #content .link_btn .main_txt {
        display: block;
        font-size: 4vw;
        margin-top: 3.8vw;
        font-weight: 900;
    }

    #content .link_btn.--column .txt .sub_txt {
        padding: 0.93vw 2vw;
        letter-spacing: 0.04em;
        border-radius: 30px;
        background-color: #fff025;
    }

    #content .link_btn .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        /* margin: 0 auto; */
        border: 1px solid #000;
        border-radius: 50%;
        width: 9.4vw;
        height: 9.4vw;
        text-align: center;
    }

    #content .link_btn.--column .icon {
        margin-top: 0.6vw;
        background-color: var(--main-color);
    }

    #content .link_btn.--modal .icon {
        background-color: #fff;
    }

    #content .link_btn .icon.card img {
        width: 5.07vw;
    }

    #content .link_btn .icon.ilumine img {
        width: 4.67vw;
    }

    #content .link_btn .icon.webpay img {
        margin-right: 1vw;
        width: 4.4vw;
    }

    #content .link_btn .icon.shop img {
        width: 6.8vw;
    }

    #content .link_btn a:after {
        content: "";
        display: inline-block;
        width: 2.6666666666666665vw;
        height: 2.6666666666666665vw;
        border-top: 0.4vw solid #000;
        border-right: 0.4vw solid #000;
        -webkit-transform: rotate(45deg) translateY(-50%);
        transform: rotate(45deg) translateY(-50%);
        position: absolute;
        top: 50%;
        right: 5.333333333333333vw;
    }

    /* #content .link_btn.ilumine a:after{
    border-color: #fff;
} */
    #content .link_btn.--modal a:after {
        display: none;
    }

    #content .link_btn a:hover {
        background: #ffec4f;
        /*transition: 0.5s;*/
    }

    /* #content .link_btn.ilumine a:hover{
    background: transparent;
} */
    #content .link_btn.--xmas a:hover {
        background: inherit;
    }

    #content .link_btn a:hover .icon,
    #content .link_btn .modal_open:hover .icon {
        background-color: #fff;
    }

    /* modal */
    .modal_container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        background: rgba(0, 0, 0, 45%);
        padding: 3% 3%;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        box-sizing: border-box;
        z-index: 2;
    }

    .modal_container:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

    .modal_container.active {
        opacity: 1;
        visibility: visible;
    }

    .modal_body {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        width: 97%;
        height: 80vh;
        min-height: 500px;
        max-height: 620px;
    }

    .modal_close {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 3.34%;
        right: 3.6vw;
        width: 6.13vw;
        font-size: 6.13vw;
        color: #000;
        cursor: pointer;
    }

    .modal_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1.5px solid #000;
        background: #fff;
        text-align: left;
        padding: 0 7.33vw;
        height: 80vh;
        min-height: 500px;
        max-height: 620px;
    }

    .modal_icon {
        display: block;
        margin: 0 auto;
        width: 10.67vw;
        height: auto;
    }

    .modal_ttl {
        margin-top: 1.89%;
        font-size: 2.93vw;
        text-align: center;
        line-height: 1;
        letter-spacing: 0.08em;
        font-weight: 900;
    }

    .shop {
        padding: 7.2vw 5vw 16.27vw;
        background-color: #333;
    }

    .shop_item:not(:first-of-type) {
        margin-top: 9.33vw;
    }

    .shop_list dt {
        font-size: 3.73vw;
        line-height: 1;
        letter-spacing: 0.02em;
        font-weight: 600;
        color: #fff;
    }

    .shop_area {
        display: grid;
        grid-template-columns: 53% 1fr;
        gap: 4.27vw;
        margin-top: 4.13vw;
    }

    .shop_area dd {
        position: relative;
        padding-left: 3vw;
        font-size: 3.2vw;
        line-height: 1.59;
        font-weight: 600;
    }

    .shop_area dd:after {
        content: "";
        display: block;
        position: absolute;
        top: 52%;
        left: 0;
        transform: translateY(-50%) rotate(45deg);
        width: 1vw;
        height: 1vw;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
    }

    .shop_area dd a {
        display: block;
        width: 100%;
        color: #fff;
    }

    .coordination_ttl,
    .recommend_ttl {
        font-size: 4.8vw;
        text-align: center;
        letter-spacing: 0.05em;
        font-weight: 900;
    }

    .coordination_ttl span,
    .recommend_ttl span {
        margin: 0 auto;
        font-size: 7.07vw;
        line-height: 1.7;
        color: #e54490;
    }

    /* coordination */
    .coordination {
        padding: 7.73vw 5vw 11.2vw;
        background-color: #eeeeee;
    }

    .recommend_list,
    .coordination_list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 6.8vw auto 0;
        width: 100%;
        gap: 9vw 0;
    }

    .coordination_list {}

    .recommend_item,
    .coordination_item {
        width: calc(100% / 2 - 4.4vw / 2);
    }

    .coordination_name {
        margin-top: 15px;
        font-size: 14px;
        line-height: 1.57;
        letter-spacing: 0.02em;
        color: #000;
    }

    .recommend_name,
    .coordination_name {
        margin-top: 2vw;
        font-size: 3.2vw;
        letter-spacing: 0.02em;
        color: #000;
    }

    /* recommend */
    .recommend {
        padding: 7.73vw 5vw 11.2vw;
        background-color: #f3f2e5;
    }

    .recommend_item img {
        width: 100%;
    }

    #wrap .band {
        position: fixed;
        top: 0;
        padding: 2.93vw 0;
        width: 100vw;
        background-color: #c69e61;
        z-index: 12;
    }

    #wrap .band .row {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
    }

    #wrap .band .text {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 2.53vw;
        font-size: 5.07vw;
        text-align: center;
        letter-spacing: 0;
        line-height: 1.4;
        font-weight: bold;
        color: #000;
    }

    #wrap .band .text.pre {
        font-size: 4.3vw;
    }

    #wrap .band .btn {
        display: inline-block;
        position: relative;
        padding: 1.47vw 7.47vw;
        border-radius: 20px;
        background-color: #fff;
        font-size: 2.53vw;
        text-align: center;
        letter-spacing: 0;
        line-height: 1;
        color: #000;
        font-weight: bold;
    }

    #wrap .band .btn:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%) rotate(45deg);
        width: 1.1vw;
        height: 1.1vw;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
    }

    /* xmas */
    /* #content .modal{
    display: block;
}
#content .link_btn.--xmas{
    display: inline-block;
    background-color: #24976c;
    margin-bottom: 9.73vw;
}
#content .link_btn.--xmas a:after{
    display: none;
}
#content .link_btn.--xmas .icon{
    background-color: #fff;
}
#content .link_btn .icon.xmas img{
    width: 4.53vw;
}
#content .link_btn.--xmas .main_txt{
    width: 66vw;
}
#content .link_btn.--xmas .main_txt br{
    display: none;
} */

    /*------*/
    footer {
        text-align: center;
        padding: 0 0 3.33vw;
        background-color: #333;
        color: #fff;
    }

    footer .copyright {
        font-size: 2.6666666666666665vw;
    }

    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
}

@media screen and (min-width:520px) and (max-width:980px) {
    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
    /* .modal_body{
    max-width: 560px;
    min-height: 565px;
    max-height: 785px;
}
.modal_content{
    max-width: 560px;
    min-height: 565px;
    max-height: 785px;
}
.modal_icon{
    width: 50px;
}
.modal_ttl{
    font-size: 14px;
}
.shop_list dt{
    font-size: 16px;
}
.shop_area dd{
    font-size: 14px;
}
.shop_area dd:after{
    width: 7px;
    height: 7px;
} */

    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
}

/* end of media query */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */