@charset "utf-8";

.fuw-bnr-txt {
    color: var(--fuw-text-color);
    font-size: 16px;
    text-align: center;
    letter-spacing: .08em;
    margin: 0 auto 160px;
}

.fuw-page-top-area {
    max-width: 1072px;
    padding: 0 24px;
    margin: 0 auto;
}

/* タブ */
.fuw-tab-cont {
    display: flex;
    margin-bottom: 112px;
}

.fuw-tab {
    height: 56px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--fuw-main-color);
    background-color: rgb(from #FFFFFF r g b / 90%);
    font-size: 16px;
    padding: 0 16px;
    border: solid 1px var(--fuw-main-color);
    --tw-duration: .3s;
    transition-duration: .3s;
    cursor: pointer;
}

.fuw-tab:not(:last-child) {
    border-right: none;
}

.fuw-tab:first-child {
    color: #fff;
    background-color: var(--fuw-main-color);
}

.fuw-down-arrow {
    fill: var(--fuw-main-color);
    position: absolute;
    top: 50%;
    right: 16px;
    translate: 0 -50%;
    --tw-duration: .3s;
    transition-duration: .3s;
}

.fuw-tab:first-child .fuw-down-arrow {
    fill: #fff;
}

.fuw-tab:hover {
    color: #fff;
    background-color: var(--fuw-main-color);
}

.fuw-tab:hover .fuw-down-arrow {
    fill: #fff;
}

/* コンテンツ */
.fuw-content-title {
    color: var(--fuw-main-color);
    font-size: 24px;
    font-family: var(--fuw-font-mincho);
    line-height: 1.4;
    margin-bottom: 48px;
}

/* カレンダー */
.fuw-search {
    display: flex;
    gap: 56px;
    margin-bottom: 112px;
}

.fuw-calendar-month {
    font-size: 24px;
    color: #fff;
}

.fuw-calendar-prev svg {
    --tw-scale-x: -1;
    scale: -1 1;
}

.fuw-calendar {
    width: 560px;
    border: solid 1px var(--fuw-main-color);
    background-color: #fff;
}

.fuw-calendar-header {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background-color: var(--fuw-main-color);
}

.fuw-calendar-prev,
.fuw-calendar-next {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fuw-calendar-prev {
    padding-left: 24px;
}

.fuw-calendar-next {
    padding-right: 24px;
}

.fuw-calendar-prev.fuw-disable,
.fuw-calendar-next.fuw-disable {
    cursor: not-allowed;
}

.fuw-calendar-prev-txt {
    font-size: 15px;
    padding-left: 12px;
}

.fuw-calendar-next-txt {
    font-size: 15px;
    padding-right: 12px;
}

.fuw-calendar-prev-svg {
    --tw-rotate: 180deg;
    rotate: 180deg;
}

.fuw-calendar-prev-svg,
.fuw-calendar-next-svg {
    fill: #fff;
    --tw-duration: .3s;
    transition-duration: .3s;
}

.fuw-calendar-prev:not(.fuw-disable):hover .fuw-calendar-prev-svg {
    --tw-translate-x: -4px;
    translate: -4px;
}

.fuw-calendar-next:not(.fuw-disable):hover .fuw-calendar-next-svg {
    --tw-translate-x: 4px;
    translate: 4px;
}

.fuw-calendar-week {
    display: flex;
    border-bottom: 1px solid var(--fuw-main-color);
}

.fuw-calendar-row {
    display: flex;
    align-items: center;
}

.fuw-calendar-week-day {
    width: 80px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fuw-calendar-date {
    width: 80px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fuw-calendar-date.fuw-has-event {
    cursor: pointer;
}

.fuw-calendar-date.fuw-has-event:not(.fuw-selected):hover {
    background-color: var(--fuw-main-color-alpha5);
}

.fuw-calendar-date.fuw-selected {
    background-color: var(--fuw-main-color-alpha20);
}

.fuw-calendar-week-day.fuw-sun,
.fuw-calendar-date.fuw-sun,
.fuw-calendar-date.fuw-holiday {
    color: #ad0003;
}

.fuw-calendar-week-day.fuw-sat,
.fuw-calendar-date.fuw-sat {
    color: #0075ce;
}

.fuw-calendar-date.fuw-disabled {
    color: #d9d9d9;
}

.fuw-categories-and-btns {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fuw-categories-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.fuw-categories-item {
    font-size: 13px;
    padding: 2px 8px;
    color: var(--fuw-sub-color2);
    background-color: #fff;
    border: solid 1px var(--fuw-sub-color);
    border-radius: 1px;
    cursor: pointer;
}

.fuw-categories-item:hover {
    background-color: var(--fuw-sub-color-alpha20);
}

.fuw-categories-item.fuw-selected {
    color: #fff;
    background-color: var(--fuw-sub-color);
}

.fuw-search-btn-cont {
    display: flex;
    gap: 24px;
}

.fuw-search-btn {
    width: 280px;
    height: 56px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background-color: var(--fuw-main-color);
    border: 1px solid var(--fuw-main-color);
    cursor: pointer;
    --tw-duration: .3s;
    transition-duration: .3s;
}

.fuw-search-btn:hover {
    color: var(--fuw-main-color);
    background-color: #fff;
}

.fuw-reset-btn {
    flex: 1;
    height: 56px;
    font-size: 16px;
    text-align: center;
    color: var(--fuw-main-color);
    background-color: #fff;
    border: 1px solid var(--fuw-main-color);
    cursor: pointer;
    --tw-duration: .3s;
    transition-duration: .3s;
}

.fuw-reset-btn:hover {
    color: #fff;
    background-color: var(--fuw-main-color);
}

.fuw-recommend-area {
    display: flow-root;
    background-color: var(--fuw-gray-color-alpha10);
}

.fuw-recommend-section {
    background-color: #fff;
    margin-block: 50px;
    margin-left: 50px;
    padding-top: 112px;
    padding-bottom: 128px;
}

.fuw-recommend-wrap {
    max-width: 1072px;
    padding: 0 24px;
    margin: 0 auto;
    --tw-translate-x: -25px;
    translate: -25px;
}

.fuw-result {
    max-width: 1072px;
    padding: 0 24px;
    margin: 112px auto;
}

.fuw-result-count {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 48px;
}

.fuw-fair-cards {
    display: flex;
    border: 1px solid var(--fuw-main-color);
    border-top: none;
    margin-bottom: 32px;
    background-color: #fff;
}

.fuw-fair-cards.fuw-hide-by-limit {
    display: none !important;
}

.fuw-fair-card-wrap {
    border-top: solid 1px var(--fuw-main-color);
}

.fuw-fair-cards-header {
    width: 94px;
    border-top: solid 1px var(--fuw-main-color);
    border-right: solid 1px var(--fuw-main-color);
    text-align: center;
}

.fuw-fair-cards-header.Sat {
    background-color: rgb(from #0075CE r g b / 10%);
    .fuw-fair-cards-date {
        color: #0075CE;
    }
}

.fuw-fair-cards-header.Sat .fuw-fair-cards-date {
    color: #0075CE;
}

.fuw-fair-cards-header.Sun,
.fuw-fair-cards-header.holiday {
    background-color: rgb(from #AD0003 r g b / 10%);
}

.fuw-fair-cards-header.Sun .fuw-fair-cards-date,
.fuw-fair-cards-header.holiday .fuw-fair-cards-date {
    color: #AD0003;
}

.fuw-fair-cards-date {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    color: var(--fuw-main-color);
    margin: 24px 0 12px;
}

.fuw-fair-cards-count {
    font-size: 12px;
}

.fuw-fair-cards-body {
    flex: 1;
}

.fuw-fair-cards-accordion-toggle {
    position: relative;
    width: 100%;
    height: 40px;
    color: var(--fuw-main-color);
    border-top: solid 1px var(--fuw-main-color);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    --tw-duration: .3s;
    transition-duration: .3s;
    cursor: pointer;
}

.fuw-fair-cards-accordion-toggle-arrow {
    fill: var(--fuw-main-color);
    position: absolute;
    top: 50%;
    right: 16px;
    translate: 0 -50%;
    --tw-duration: .3s;
    transition-duration: .3s;
}

.fuw-is-open .fuw-fair-cards-accordion-toggle-arrow {
    --tw-rotate: 180deg;
    rotate: 180deg;
}

.fuw-fair-cards-accordion-toggle:hover {
    color: #fff;
    background-color: var(--fuw-main-color);
}

.fuw-fair-cards-accordion-toggle:hover .fuw-fair-cards-accordion-toggle-arrow {
    fill: #fff;
}

.fuw-fair-more-btn {
    width: 280px;
    height: 56px;
    font-size: 16px;
    color: var(--fuw-main-color);
    background-color: #fff;
    border: 1px solid var(--fuw-main-color);
    border-radius: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 16px;
    margin: 32px auto 0;
    position: relative;
    --tw-duration: .3s;
    transition-duration: .3s;
}

.fuw-fair-more-btn:hover {
    color: #fff;
    background-color: var(--fuw-main-color);
}

.fuw-fair-more-btn .fuw-fair-more-btn-svg {
    position: absolute;
    top: 50%;
    right: 16px;
    translate: 0 -50%;
    fill: var(--fuw-main-color);
    --tw-duration: .3s;
    transition-duration: .3s;
}

.fuw-fair-more-btn:hover .fuw-fair-more-btn-svg {
    fill: #fff;
}

.fuw-page-bottom-area {
    background-color: var(--fuw-gray-color-alpha10);
    padding: 108px 0 112px;
}

.fuw-tour-txt {
    display: inline-block;
    width: 100%;
    color: var(--fuw-text-color);
    font-size: 15px;
    text-align: center;
    margin: 0 auto 16px;
}

.fuw-contact-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 40px;
}

.fuw-contact-btn {
    display: flex;
    width: 320px;
    align-items: center;
    padding: 16px 16px 18px;
    color: var(--fuw-main-color);
    background-color: #fff;
    font-size: 15px;
    border: solid 1px var(--fuw-main-color);
    position: relative;
    --tw-duration: .3s;
    transition-duration: .3s;
}

.fuw-contact-btn-svg {
    position: absolute;
    right: 16px;
    fill: var(--fuw-main-color);
    rotate: 180deg;
    --tw-duration: .3s;
    transition-duration: .3s;
}

.fuw-contact-btn:hover {
    color: #fff;
    background-color: var(--fuw-main-color);
}

.fuw-contact-btn:hover .fuw-contact-btn-svg {
    fill: #fff;
}

.fuw-tour-btn {
    display: inline-block;
    width: 664px;
    display: flex;
    border: solid 1px var(--fuw-main-color);
    margin: 0 auto;
    background-color: #fff;
}

.fuw-tour-btn-img-wrap {
    width: 210px;
    height: 140px;
    overflow: hidden;
}

.fuw-tour-btn-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    --tw-duration: 1s;
    transition-duration: 1s;
}

.fuw-tour-btn:hover .fuw-tour-btn-img {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: 110%;
}

.fuw-tour-btn-txt-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 32px;
}

.fuw-tour-btn-heading {
    font-size: 20px;
    color: var(--fuw-main-color);
    font-family: var(--fuw-font-mincho);
    margin-bottom: 8px;
}

.fuw-tour-btn-heading-svg {
    display: none;
}

.fuw-tour-btn-txt {
    font-size: 12px;
    color: var(--fuw-text-color);
}

@media (max-width: 834px) {
    .fuw-bnr-txt {
        font-size: 15px;
        text-align: left;
        padding: 0 24px;
        margin-bottom: 64px;
    }

    .fuw-tab-cont {
        flex-direction: column;
        margin-bottom: 64px;
    }

    .fuw-tab {
        height: 48px;
        font-size: 14px;
        flex: none;
        color: var(--fuw-main-color) !important;
        background-color: #fff !important;
    }

    .fuw-tab:not(:last-child) {
        border-right: solid 1px var(--fuw-main-color);
        border-bottom: none;
    }

    .fuw-tab .fuw-down-arrow {
        fill: var(--fuw-main-color) !important;
    }

    .fuw-content-title {
        font-size: 20px;
        margin-bottom: 32px;
    }

    .fuw-search {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 64px;
    }

    .fuw-calendar {
        width: 100%;
    }

    .fuw-calendar-month {
        font-size: 22px;
        color: #fff;
    }

    .fuw-calendar-prev {
        padding-left: 16px;
    }

    .fuw-calendar-next {
        padding-right: 16px;
    }

    .fuw-calendar-prev-svg,
    .fuw-calendar-next-svg {
        --tw-translate-x: 0 !important;
        translate: 0 !important;
    }

    .fuw-calendar-week-day {
        width: calc(100% / 7);
        height: 40px;
        font-size: 15px;
    }

    .fuw-calendar-date {
        width: calc(100% / 7);
        height: 56px;
    }

    .fuw-calendar-date .fuw-date-number {
        font-size: 15px;
    }

    .fuw-calendar-date .fuw-stock {
        font-size: 12px;
    }

    .fuw-categories-and-btns {
        gap: 24px;
    }

    .fuw-categories-list {
        gap: 8px;
    }

    .fuw-search-btn-cont {
        gap: 16px;
    }

    .fuw-search-btn {
        width: 224px;
    }

    .fuw-search-btn:hover {
        color: #fff;
        background-color: var(--fuw-main-color);
    }

    .fuw-reset-btn:hover {
        color: var(--fuw-main-color);
        background-color: #fff;
    }

    .fuw-recommend-section {
        margin-left: 0;
        margin-block: 40px;
        padding-block: 48px;
    }

    .fuw-recommend-wrap {
        --tw-translate-x: 0;
        translate: 0;
    }

    .fuw-result {
        margin: 64px auto;
    }

    .fuw-result-count {
        margin-bottom: 32px;
    }

    .fuw-fair-cards {
        flex-direction: column;
    }

    .fuw-fair-cards-header {
        width: 100%;
        height: 48px;
        border-right: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
    }

    .fuw-fair-cards-date {
        flex-direction: row;
        font-size: 18px;
        margin: 0;
    }

    .fuw-fair-cards-count {
        font-size: 13px;
    }

    .fuw-fair-cards-accordion-toggle:hover {
        color: var(--fuw-main-color) !important;
        background-color: #fff !important;
    }

    .fuw-fair-cards-accordion-toggle:hover .fuw-fair-cards-accordion-toggle-arrow {
        fill: var(--fuw-main-color) !important;
    }

    .fuw-fair-more-btn {
        width: 100%;
        margin-top: 40px;
    }

    .fuw-fair-more-btn:hover {
        color: var(--fuw-main-color) !important;
        background-color: #fff !important;
    }

    .fuw-fair-more-btn:hover .fuw-fair-more-btn-svg {
        fill: var(--fuw-main-color) !important;
    }

    .fuw-page-bottom-area {
        padding: 48px 24px;
    }

    .fuw-contact-btns {
        flex-direction: column;
        gap: 16px;
    }

    .fuw-contact-btn {
        width: 100%;
    }

    .fuw-contact-btn:hover {
        color: var(--fuw-main-color);
        background-color: #fff;
    }

    .fuw-contact-btn:hover .fuw-contact-btn-svg {
        fill: var(--fuw-main-color);
    }

    .fuw-tour-btn {
        width: 100%;
        flex-direction: column;
    }

    .fuw-tour-btn-img-wrap {
        width: 100%;
        height: auto;
    }

    .fuw-tour-btn:hover .fuw-tour-btn-img {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: 100%;
    }

    .fuw-tour-btn-txt-wrap {
        padding: 24px;
    }

    .fuw-tour-btn-heading {
        position: relative;
        display: flex;
        align-items: center;
    }

    .fuw-tour-btn-heading-svg {
        display: inline-block;
        fill: var(--fuw-main-color);
        position: absolute;
        right: 0;
        rotate: 180deg;
    }

    .fuw-tour-btn-txt {
        font-size: 14px;
        letter-spacing: 0.08em;
    }
}