@charset "utf-8";

.ma-head {
    background: var(--fs-blue);
    text-align: center;
}
.ma-head__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}
.ma-head__logo img { display: block; height: auto }

.ma-head__logo .ma {
    display: inline-block;
    background: var(--fs-white);
    color: var(--fs-blue);
    font-family: var(--en);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
}

.ma-bk { background: var(--fs-sky) }

.ma-bk__panel { margin-left: auto; margin-right: auto }

.ma-steps { display: flex; justify-content: center }
.ma-steps li {
    position: relative;
    text-align: center;
    color: var(--fs-navy);
    font-weight: 900;
}
.ma-steps li .no {
    display: block;
    font-family: var(--en);
    color: var(--fs-blue);
    line-height: 1;
}
.ma-steps li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 2.4em;
    transform: translateY(-50%);
    background: #b9cede;
}

.ma-widget {
    min-width: 320px;
    margin-left: auto;
    margin-right: auto;
    background: var(--fs-white);
    border-radius: 14px;
    box-shadow: 0 6px 0 rgba(27, 45, 65, .08);
}

.ma-widget .spir-widget { width: 100% !important }
.ma-widget .spir-widget iframe { display: block; border: 0 }

.ma-widget__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #eef5f9;
    border: 2px dashed #a8c6d8;
    border-radius: 12px;
    color: #46505f;
    line-height: 1.9;
}
/* 読み込み中は日程表の上に重ねて出す（白い枠だけが見える時間をなくす） */
.ma-widget { position: relative }
.ma-widget__load {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1em;
    padding-top: 30% !important;
    text-align: center;
    color: #46505f;
    font-weight: 700;
    background: var(--fs-white);
    border-radius: 14px;
}
.ma-widget__load[hidden] { display: none }
.ma-widget__load::before {
    content: "";
    width: 2.4em;
    height: 2.4em;
    border: .3em solid #d6e6f0;
    border-top-color: var(--fs-blue);
    border-radius: 50%;
    animation: maSpin .9s linear infinite;
}
@keyframes maSpin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
    .ma-widget__load::before { animation: none }
}

.ma-thanks { background: var(--fs-white); text-align: center }
.ma-thanks__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fs-blue);
    color: var(--fs-white);
    font-family: var(--en);
    font-weight: 700;
    line-height: 1;
}
.ma-thanks__ttl { font-weight: 900; color: var(--fs-navy); line-height: 1.5 }
.ma-thanks__txt { color: #33465c; line-height: 1.9 }
.ma-thanks__card {
    background: var(--fs-sky);
    border-radius: 14px;
    text-align: left;
}
.ma-thanks__card .ttl { font-weight: 900; color: var(--fs-navy) }

.ma-thanks__card li { color: #33465c; line-height: 1.9; position: relative; padding-left: 1.1em }
.ma-thanks__card li::before { content: "・"; color: var(--fs-blue); position: absolute; left: 0; top: 0 }

@media (min-width: 768px) {

    .ma-head { padding: calc(var(--w) * 20 / 1440) 0 }
    .ma-head__logo img { width: calc(var(--w) * 180 / 1440); min-width: 140px }
    .ma-head__logo .ma {
        font-size: max(14px, calc(var(--w) * 20 / 1440));
        padding: calc(var(--w) * 5 / 1440) calc(var(--w) * 10 / 1440) calc(var(--w) * 6 / 1440);
        border-radius: 5px;
    }

    .ma-bk__panel { max-width: 940px; margin-top: calc(var(--w) * 34 / 1440) }

    .ma-steps { gap: calc(var(--w) * 44 / 1440); margin-top: calc(var(--w) * 26 / 1440) }
    .ma-steps li { font-size: max(14px, calc(var(--w) * 17 / 1440)) }
    .ma-steps li .no { font-size: max(18px, calc(var(--w) * 26 / 1440)); margin-bottom: .2em }
    .ma-steps li + li::before { left: calc(var(--w) * -22 / 1440) }

    .ma-widget {
        max-width: 940px;
        margin-top: calc(var(--w) * 26 / 1440);
        padding: calc(var(--w) * 22 / 1440);
    }
    .ma-widget .spir-widget { height: 650px !important }
    .ma-widget__ph { height: 260px; padding: 0 calc(var(--w) * 30 / 1440); font-size: max(15px, calc(var(--w) * 18 / 1440)) }
    .ma-widget__load { font-size: max(14px, calc(var(--w) * 17 / 1440)); padding: calc(var(--w) * 40 / 1440) 0 }

    .ma-thanks__mark {
        width: calc(var(--w) * 84 / 1440); height: calc(var(--w) * 84 / 1440);
        min-width: 64px; min-height: 64px;
        font-size: max(28px, calc(var(--w) * 40 / 1440));
    }
    .ma-thanks__ttl { font-size: max(22px, calc(var(--w) * 38 / 1440)); margin-top: calc(var(--w) * 22 / 1440) }
    .ma-thanks__txt { font-size: max(15px, calc(var(--w) * 19 / 1440)); margin-top: calc(var(--w) * 20 / 1440) }
    .ma-thanks__card {
        max-width: 760px;
        margin: calc(var(--w) * 40 / 1440) auto 0;
        padding: calc(var(--w) * 30 / 1440) calc(var(--w) * 34 / 1440);
    }
    .ma-thanks__card .ttl { font-size: max(16px, calc(var(--w) * 21 / 1440)) }
    .ma-thanks__card ul { margin-top: calc(var(--w) * 12 / 1440) }
    .ma-thanks__card li { font-size: max(14px, calc(var(--w) * 17 / 1440)) }
}

@media (max-width: 767px) {

    .ma-head { padding: 4vw 0 }
    .ma-head__logo img { width: 34vw }
    .ma-head__logo .ma { font-size: 4vw; padding: 1vw 2.2vw 1.2vw; border-radius: 4px }

    .ma-bk__panel { margin-top: 6vw }

    .ma-steps { gap: 6vw; margin-top: 5vw }
    .ma-steps li { font-size: 3.4vw; line-height: 1.6 }
    .ma-steps li .no { font-size: 5.4vw; margin-bottom: .2em }
    .ma-steps li + li::before { left: -3vw }

    .ma-widget { margin-top: 5vw; padding: 3vw }

    .ma-widget .spir-widget { height: 720px !important }
    .ma-widget__ph { height: 44vw; padding: 0 4vw; font-size: 3.8vw }
    .ma-widget__load { font-size: 3.6vw; padding: 10vw 0 }

    .ma-thanks__mark { width: 17vw; height: 17vw; font-size: 8vw }
    .ma-thanks__ttl { font-size: 6vw; margin-top: 5vw }
    .ma-thanks__txt { font-size: 3.9vw; margin-top: 4.5vw; text-align: left }
    .ma-thanks__card { margin-top: 8vw; padding: 5.5vw 5vw }
    .ma-thanks__card .ttl { font-size: 4.3vw }
    .ma-thanks__card ul { margin-top: 3vw }
    .ma-thanks__card li { font-size: 3.7vw }
}