@charset "UTF-8";
/* ==========================================================
Name:
    module.css

Description:
    サイトで共通使用する汎用モジュールのスタイルを記述する
    アルファベット降順(A->Z)に記述する

Contents:
    layout
    component
    utility
========================================================== */
/* ==========================================================
*
*   component
*
========================================================== */
/* ---------------------------------------------
*   js-include
--------------------------------------------- */
@media screen and (min-width: 751px) {
    .js-include--footer {
        height: auto;
    }
}

/* ---------------------------------------------
*   sp js-include
--------------------------------------------- */
@media screen and (max-width: 750px) {
    .js-include--footer {
        position: static;
    }
}

/* ---------------------------------------------
*   footer
--------------------------------------------- */
@media screen and (min-width: 751px) {
    .footer-wrap {
        position: relative;
    }
    .footer {
        position: relative;
    }
    .footer-pagetop {
        position: fixed;
        right: 24px;
        bottom: 30px;
        z-index: 999;
        display: none;
        width: 68px;
        height: 68px;
    }
    .footer-pagetop--icon {
        right: 30px;
        bottom: 100px;
        z-index: 1000;
        width: 156px;
        height: auto;
    }
    .footer-pagetop--icon.is-absolute {
        top: -247px !important;
        bottom: auto;
    }
    .footer-pagetop--use {
        right: 30px;
        bottom: 100px;
        z-index: 1000;
        width: 98px;
        height: auto;
        -webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
    }
    .footer-pagetop--use.is-absolute {
        top: -210px !important;
        bottom: auto;
    }
    .footer-pagetop.is-absolute {
        position: absolute;
        top: -110px;
        bottom: auto;
    }
    .footer-pagetop__link {
        display: block;
    }
    .footer-pagetop__link-txt {
        display: block;
    }
    .footer-pagetop__link-txt::before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(/msppoint/membersprogram/202205img/icon_pagetop_hover.png);
        background-position: 0 0;
        background-size: contain;
        background-repeat: no-repeat;
        content: "";
        opacity: 0;
    }
    .footer-pagetop__link-txt:hover {
        opacity: 1;
    }
    .footer-pagetop__link-txt:hover::before {
        opacity: 1;
    }
    .footer-pagetop--icon .footer-pagetop__link-txt::before {
        background-image: url(/msppoint/membersprogram/202205img/img_fixed_btn_hover.png);
    }
    .footer-pagetop--use .footer-pagetop__link-txt::before {
        background-image: url(/msppoint/membersprogram/202205img/mfgroup/btn_benefit_use_hover.png);
    }
    .footer-facility {
        margin: 0 auto;
        padding: 32px 0;
        width: 100%;
        background: #0068b7;
        color: #fff;
    }
    .footer-facility__list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: start;
        margin: 0 auto;
        max-width: 1080px;
        width: 100%;

        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: start;
        justify-content: flex-start;
    }
}

@media screen and (min-width: 751px) and (max-width: 1234px) {
    .footer-facility__list {
        max-width: 900px;
    }
}

@media screen and (min-width: 751px) and (max-width: 1028px) {
    .footer-facility__list {
        max-width: 720px;
    }
}

@media screen and (min-width: 751px) and (max-width: 822px) {
    .footer-facility__list {
        max-width: 540px;
    }
}

@media screen and (min-width: 751px) {
    .footer-facility__list li {
        margin: 5px;
        width: 170px;
        height: 70px;
        border-radius: 5px;
        background-color: #fff;
    }
    .footer-facility__list li a,
    .footer-facility__list li span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        -ms-flex-align: center;
        width: 100%;
        height: 100%;

        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
    }
    .num_01 {
        width: 119px;
    }
    .num_02 {
        width: 117px;
    }
    .num_03 {
        width: 117px;
    }
    .num_04 {
        width: 88px;
    }
    .num_05 {
        width: 83px;
    }
    .num_06 {
        width: 120px;
    }
    .num_07 {
        width: 90px;
    }
    .num_08 {
        width: 155px;
    }
    .num_09 {
        width: 125px;
    }
    .num_10 {
        width: 127px;
    }
    .num_11 {
        width: 115px;
    }
    .num_12 {
        width: 78px;
    }
    .num_15 {
        width: 89px;
    }
    .num_16 {
        width: 94px;
    }
    .num_17 {
        width: 94px;
    }
    .num_18 {
        width: 113px;
    }
    .num_19 {
        width: 113px;
    }
    .num_20 {
        width: 130px;
    }
    .num_21 {
        width: 148px;
    }
    .num_22 {
        width: 91px;
    }
    .num_23 {
        width: 144px;
    }
    .footer-facility__txtlink-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        margin-top: 25px;
        margin-right: auto;
        margin-left: auto;
        max-width: 1080px;

        -webkit-box-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .footer-facility__txtlink {
        margin-top: 15px;
        padding: 0 12px;
        border-left: 1px solid #fff;
        font-weight: normal;
        font-size: 14px;
        line-height: 1;
    }
    .footer-facility__txtlink:nth-child(4) {
        border-right: 1px solid #fff;
    }
    .footer-facility__txtlink:last-child {
        border-right: 1px solid #fff;
    }
    .footer_bottom .footer_bottom_wrap {
        position: relative;
        margin: 30px auto 0;
        padding-bottom: 30px;
        width: 810px;
        background: #ffffff;
        font-size: 12px;
    }
    .mf-logo {
        position: absolute;
        top: 5px;
        right: 0;
        transition: opacity 500ms;
    }
    .mf-logo:hover {
        opacity: 0.7;
    }
    .mf-logo img {
        width: 255px;
        height: auto;
    }

    .ipad .mf-logo img {
        width: 208px;
    }
    .footer_bottom_list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: #908d7d;
        font-weight: normal;
    }
    .footer_bottom_list li {
        margin-right: 1em;
    }
    .footer_bottom_list li:first-child {
        color: #000;
    }
    #footer .copyright {
        min-width: auto;
        height: auto;
        background: none;
        color: #d2cdba;
    }
    #footer .copyright span {
        display: inline;
        padding-top: 0;
        color: #d2cdba;
        text-align: left;
    }
    .footer__bnr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        -ms-flex-align: center;
        height: 90px;
        background-color: #77c2dd;

        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
    }
    .footer__bnr-item {
        width: 450px;
        height: 45px;
    }
    .footer__bnr-item--large {
        width: 530px;
    }
    .footer__bnr-link {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        -ms-flex-align: center;
        margin: 0 auto;
        height: 100%;
        background-color: white;
        color: #77c2dd;
        font-size: 18px;
        -webkit-transition: .3s;
        transition: .3s;

        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
    }
    .footer__bnr-link:after {
        position: absolute;
        top: 50%;
        right: 6%;
        width: 10px;
        height: 10px;
        border-top: 2px solid #77c2dd;
        border-right: 2px solid #77c2dd;
        content: '';
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
        -webkit-transform-origin: center;
        transform-origin: center;
    }
    .footer__bnr-link:hover {
        background-color: #0068b7;
        color: white;
    }
    .footer__bnr-link:hover:after {
        border-top: 2px solid white;
        border-right: 2px solid white;
    }
    .footer__bnr-link--rounded {
        border-radius: 5px;
    }
}

@media screen and (max-width: 750px) {
    #footer {
        padding-bottom: 0;
        background-color: #fffae6;
    }
    .footer--rower {
        margin-bottom: 17.53333vw;
    }
    .footer--type2 {
        margin-bottom: 17.33333vw;
    }
    .footer-wrap {
        position: relative;
    }
    .footer {
        position: relative;
    }
    .footer-pagetop {
        position: absolute;
        top: -33.33333vw;
        right: 1.73333vw;
        left: auto;
        z-index: 999;
        display: none;
        width: 18.13333vw;
        height: 18.13333vw;
    }
    .footer-pagetop--icon {
        position: fixed;
        top: auto;
        right: 3.2vw;
        right: 0;
        bottom: 16vw;
        bottom: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 12.8vw;
    }
    .windows .footer-pagetop--icon {
        bottom: -0.8vw;
    }
    .footer-pagetop--icon.is-absolute {
        position: absolute;
        top: auto !important;
        bottom: 100%;
    }
    .windows .footer-pagetop--icon.is-absolute {
        bottom: 99%;
    }
    .footer-pagetop--use {
        position: fixed;
        top: auto;
        right: 3.2vw;
        right: 0;
        bottom: 16vw;
        bottom: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 11.73333vw;
    }
    .windows .footer-pagetop--use {
        bottom: -0.8vw;
    }
    .footer-pagetop--use.is-absolute {
        position: absolute;
        top: auto !important;
        bottom: 99%;
    }
    .footer-pagetop__link {
        display: block;
    }
    .footer_bottom {
        background-color: #ffffff;
    }
    .footer-facility {
        padding-bottom: 3.33333vw;
        background: #0068b7;
    }
    .footer-facility__list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: start;
        margin: 0 auto;
        padding-top: 5.33333vw;
        width: 80vw;

        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: start;
        justify-content: flex-start;
    }
    .footer-facility__list li {
        margin: 0.66667vw;
        width: 25.33333vw;
        height: 9.33333vw;
        border-radius: 5px;
        background-color: #fff;
    }
    .footer-facility__list li a,
    .footer-facility__list li span {
        display: inline-block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        -ms-flex-align: center;
        width: 100%;
        height: 100%;

        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
    }
    .num_01 {
        width: 16.267vw;
    }
    .num_02 {
        width: 17.333vw;
    }
    .num_03 {
        width: 17.333vw;
    }
    .num_04 {
        width: 11.73333vw;
    }
    .num_05 {
        width: 11.06667vw;
    }
    .num_06 {
        width: 16vw;
    }
    .num_07 {
        width: 12vw;
    }
    .num_08 {
        width: 20.66667vw;
    }
    .num_09 {
        width: 16.66667vw;
    }
    .num_10 {
        width: 16.93333vw;
    }
    .num_11 {
        width: 15.33333vw;
    }
    .num_12 {
        width: 10.4vw;
    }
    .num_15 {
        width: 11.86667vw;
    }
    .num_16 {
        width: 12.53vw;
    }
    .num_17 {
        width: 12.53vw;
    }
    .num_18 {
        width: 15.07vw;
    }
    .num_19 {
        width: 15.07vw;
    }
    .num_20 {
        width: 18.1vw;
    }
    .num_21 {
        width: calc(83 / 375 * 100vw);
    }
    .num_22 {
        width: calc(51 / 375 * 100vw);
    }
    .num_23 {
        width: calc(81 / 375 * 100vw);
    }
    .footer-facility__txtlink-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        margin: 0 auto;
        margin-top: 3.33333vw;
        width: 80vw;

        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        justify-content: center;
    }
    .footer-facility__txtlink-list--facility {
        margin-top: 0;
        padding-top: 5.33333vw;
    }
    .footer-facility__txtlink {
        display: inherit;
        margin-bottom: 1.46667vw;
        padding: 0 1.46667vw;
        border-left: 1px solid #fff;
        font-weight: normal;
        line-height: 1;
    }
    .footer-facility__txtlink:nth-of-type(3n) {
        border-right: 1px solid #fff;
    }
    .footer-facility__txtlink:last-child {
        border-right: 1px solid #fff;
    }
    .footer-facility__txtlink a {
        color: #fff;
        font-size: 1.86667vw;
    }
    .footer_bottom .footer_bottom_wrap {
        position: relative;
        margin: 4vw auto;
        padding: 0 5.33333vw;
        width: 100%;
        background: #ffffff;
        font-size: 1.6vw;
    }
    .mf-logo {
        position: static;
        text-align: center;
        transition: opacity 500ms;
    }
    .mf-logo:hover {
        opacity: 0.7;
    }
    .mf-logo img {
        margin: 2.66667vh auto;
        max-width: none;
        width: 45vw;
        height: auto;
    }
    .footer_bottom_list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        margin: 0 auto;
        width: 66.66667vw;
        color: #908d7d;
        font-weight: normal;
        font-size: 1.6vw;

        -webkit-box-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .footer_bottom_list li {
        margin-right: 1em;
        margin-bottom: 1em;
    }
    .footer_bottom_list li:first-child {
        color: #000;
    }
    .footer_bottom_list li:last-of-type {
        margin-right: 0;
        margin-bottom: 0;
    }
    .footer_bottom_list li a {
        font-size: 1.6vw;
    }
    #footer .copyright {
        min-width: auto;
        height: auto;
        background: none;
        color: #d2cdba;
        text-align: center;
    }
    #footer .copyright span {
        display: inline;
        padding-top: 0;
        color: #d2cdba;
        text-align: left;
        font-size: 1.6vw;
    }
    .footer__bnr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        -ms-flex-align: center;
        height: 12vw;
        background-color: #77c2dd;

        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
    }
    .footer__bnr-item {
        width: 57.33333vw;
        height: 6vw;
    }
    .footer__bnr-item--large {
        width: 70.66667vw;
    }
    .footer__bnr-link {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        -ms-flex-align: center;
        margin: 0 auto;
        height: 100%;
        background-color: white;
        color: #77c2dd;
        font-size: 2.4vw;
        -webkit-transition: .3s;
        transition: .3s;

        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
    }
    .footer__bnr-link:after {
        position: absolute;
        top: 50%;
        right: 6%;
        width: 1.33333vw;
        height: 1.33333vw;
        border-top: 2px solid #77c2dd;
        border-right: 2px solid #77c2dd;
        content: '';
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
        -webkit-transform-origin: center;
        transform-origin: center;
    }
    .footer__bnr-link:hover {
        background-color: #0068b7;
        color: white;
    }
    .footer__bnr-link:hover:after {
        border-top: 2px solid white;
        border-right: 2px solid white;
    }
    .footer__bnr-link--rounded {
        border-radius: 5px;
    }
    .footer--top {
        margin-bottom: 15.33333vw;
    }
}