@charset "UTF-8";

/* Common 
=================================== */
.goods-order__title,
.goods-order__app-text {
    font-family: "Bree Serif", serif;
    text-align: center;
}
.goods-order p {
    color: #333;
}
.goods-order img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.goods-order__lead-notice {
    color: #FF4E51;
}
#howto-step1 .splide__arrow,
#howto-step2 .splide__arrow,
#howto-step3 .splide__arrow{
    background: none;
    border-radius: 0;
    opacity: 1;
}
#howto-step1 .splide__arrow svg,
#howto-step2 .splide__arrow svg,
#howto-step3 .splide__arrow svg {
    display: none;
}
.goods-order__member-link:link,
.goods-order__member-link:visited {
    color: #106635;
}
.goods-order__caution {
    font-weight: bold;
    color: #ff0000;
}
.goods-order__footer small {
    width: 100%;
    color: #fff;
    text-align: center;
    position: absolute;
    bottom: 7%;
}

/* SP
=================================== */
@media screen and (max-width:767px) {
    .goods-order {
        overflow: hidden;
    }
    .goods-order section {
        width: 90.133vw;
        margin: 0 auto;
    }

    /* hero */
    .goods-order__hero {
        padding-top: 8.266vw;
        width: 100% !important;
        background: url(/static/ebidan/fanclub/feature/goods_order/img/hero-bg.jpg) no-repeat bottom left / cover;
    }
    .goods-order__hero-subtitle {
        font-size: 17px;
        font-weight: bold;
        line-height: 1.4;
        text-align: center;
    }
    .goods-order__title {
        font-size: 36px;
        line-height: 1;
        padding-top: 5.333vw;
    }
    .goods-order__app-icon {
        padding-top: 5.333vw;
    }
    .goods-order__app-text {
        font-size: 17px;
    }
    .goods-order__app-list {
        padding-top: 2.933vw;
        width: 70.133vw;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        gap: 5.066vw;
    }
    .goods-order__hero-image {
        width: 51.733vw;
        margin: 0 auto;
        padding-top: 5.066vw;
    }
    .goods-order__lead {
        width: 90.133vw;
        margin: 0 auto;
        padding: 3.2vw 4vw;
        border: 2px solid #106635;
        background: #FFFFF5;
        border-radius: 15px;
    }
    .goods-order__lead-title {
        font-size: 13px;
        letter-spacing: .01em;
        line-height: 1.4;
        text-align: center;
    }
    .goods-order__lead-text {
        padding-top: 2.133vw;
        font-size: 12px;
        line-height: 1.3;
    }
    .goods-order__lead-title,
    .goods-order__lead-text {
        position: relative;
        z-index: 1;
    }

    /* howto */
    .goods-order__howto-bg {
        background: #106635;
        padding: 9.866vw 0 8vw;
    }
    .goods-order__howto-title {
        width: fit-content;
        margin: 0 auto;
        font-size: 20px;
        color: #FFFFF5;
        text-align: center;
        padding-bottom: 2.666vw;
        border-bottom: 2px solid;
    }

    /* slide */
    .goods-order__howto-content {
        margin-top: 5.333vw;
        background: #fffff5;
        padding: 5vw 10vw;
        border-radius: 10px;
    }
    .goods-order__step-title {
        font-size: 19px;
        line-height: 1;
        text-align: center;
        position: relative;
    }
    .goods-order__howto-step {
        height: 15vw;
        width: 12vw;
        background: url(/static/ebidan/fanclub/feature/goods_order/img/step-bg.png) no-repeat top left / cover;
        color: #FFFFF5;
        position: absolute;
        top: -7vw;
        left: -8vw;
        font-family: 'Bree Serif';
        font-size: 3vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        line-height: 1;
    }
    .goods-order__step-number {
        font-size: 7vw;
    }
    .goods-order__howto-text {
        padding-top: 6.133vw;
        font-size: 12px;
        line-height: 1.3;
    }
    #howto-step1,
    #howto-step2,
    #howto-step3 {
        padding-top: 3vw;
    }
    #howto-step1 .splide__arrow--prev,
    #howto-step2 .splide__arrow--prev,
    #howto-step3 .splide__arrow--prev {
        left: -9vw;
    }
    #howto-step1 .splide__arrow--next,
    #howto-step2 .splide__arrow--next,
    #howto-step3 .splide__arrow--next {
        right: -9vw;
    }
    
    /* operation */
    .goods-order__operation {
        padding-top: 7.2vw;
    }
    .goods-order__section-title {
        font-size: 19px;
        text-align: center;
        color: #fff;
        padding: 4vw;
        border-radius: 15px;
    }
    .goods-order__operation .goods-order__section-title {
        background: #AAD497;
    }
    .goods-order__section-content {
        margin-top: 2.666vw;
        border-radius: 15px;
        padding: 5.333vw 2.933vw;
    }
    .goods-order__operation .goods-order__section-content {
        border: 2px solid #AAD497;
    }
    .goods-order__text-list {
        display: flex;
        flex-direction: column;
        gap: 1.333vw;
    }
    .goods-order__text-item {
        font-size: 12px;
        line-height: 1.4;
        padding-left: 2.5vw;
        position: relative;
    }
    .goods-order__text-item::before {
        display: inline-block;
        content: '';
        height: 3px;
        width: 3px;
        background: #333;
        border-radius: 100%;
        position: absolute;
        top: 2vw;
        left: 0;
    }
    .goods-order__member-link:link {
        font-size: 12px;
        font-weight: bold;
    }

    /* notice */
    .goods-order__notice {
        padding: 7.2vw 0 4vw;
    }
    .goods-order__notice .goods-order__section-title {
        background: #F6AE66;
    }
    .goods-order__notice .goods-order__section-content {
        border: 2px solid #F6AE66;
    }

    /* contact */
    .goods-order__contact {
        padding-bottom: 1rem;
    }
    .goods-order__contact-title {
        font-size: 14px;
    }
    .goods-order__contact-text {
        font-size: 12px;
    }
    .goods-order__contact-text a {
        font-weight: bold;
        text-decoration: underline;
    }

    /* footer */
    .goods-order__footer {
        background: #106635;
        height: 55.733vw;
        position: relative;
    }
    .goods-order__footer::before {
        display: block;
        content: '';
        height: 19.133vw !important;
        width: 114.933vw;
        border-radius: 0 0 100% 100%;
        background: #FFFFF5;
        position: absolute;
        top: -2vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
    }
}

@media screen and (min-width: 768px) {
    .goods-order {
        overflow: hidden;
        max-width: 800px;
        width: 55.5555555556vw;
        margin: 0 auto;
        container-type: inline-size;
    }
    .goods-order section {
        width: 90.133cqw;
        margin: 0 auto;
    }

    /* hero */
    .goods-order__hero {
        padding-top: 8.266cqw;
        width: 100% !important;
        background: url(/static/ebidan/fanclub/feature/goods_order/img/hero-bg.jpg) no-repeat bottom left / cover;
    }
    .goods-order__hero-subtitle {
        font-size: 4.533cqw;
        font-weight: bold;
        line-height: 1.4;
        text-align: center;
    }
    .goods-order__title {
        font-size: 9.6cqw;
        padding-top: 5.333cqw;
    }
    .goods-order__app-icon {
        padding-top: 5.333cqw;
    }
    .goods-order__app-text {
        font-size: 4.533cqw;
    }
    .goods-order__app-list {
        padding-top: 2.933cqw;
        width: 70.133cqw;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        gap: 5.066cqw;
    }
    .goods-order__hero-image {
        width: 51.733cqw;
        margin: 0 auto;
        padding-top: 5.066cqw;
    }
    .goods-order__lead {
        width: 90.133cqw;
        margin: 0 auto;
        padding: 3.2cqw 4cqw;
        border: 0.533cqw solid #106635;
        background: #FFFFF5;
        border-radius: 4cqw;
    }
    .goods-order__lead-title {
        font-size: 2.933cqw;
        letter-spacing: .01em;
        line-height: 1.4;
        text-align: center;
    }
    .goods-order__lead-text {
        padding-top: 2.133cqw;
        font-size: 2.4cqw;
        line-height: 1.3;
    }
    .goods-order__lead-title,
    .goods-order__lead-text {
        position: relative;
        z-index: 1;
    }

    /* howto */
    .goods-order__howto-bg {
        background: #106635;
        padding: 9.866cqw 0 8cqw;
    }
    .goods-order__howto-title {
        width: fit-content;
        margin: 0 auto;
        font-size: 5.333cqw;
        color: #FFFFF5;
        text-align: center;
        padding-bottom: 2.666cqw;
        border-bottom: 0.533cqw solid;
    }

    /* slide */
    .goods-order__howto-content {
    margin-top: 42.67px;
    background: #fffff5;
    padding: 40px 80px;
    border-radius: 10px;
    }
    .goods-order__step-title {
    font-size: 25.33px;
    line-height: 1.4;
    text-align: center;
    position: relative;
    }
    .goods-order__howto-step {
    height: 120px;
    width: 96px;
    background: url(/static/ebidan/fanclub/feature/goods_order/img/step-bg.png) no-repeat top left / cover;
    color: #FFFFF5;
    position: absolute;
    top: -56px;
    left: -64px;
    font-family: 'Bree Serif';
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
    }
    .goods-order__step-number {
    font-size: 36px;
    }
    .goods-order__howto-text {
    padding-top: 49px;
    font-size: 14.67px;
    line-height: 1.3;
    }
    #howto-step1,
    #howto-step2,
    #howto-step3 {
    padding-top: 24px;
    visibility: visible !important;
    }
    #howto-step1 .splide__list,
    #howto-step2 .splide__list,
    #howto-step3 .splide__list {
    display: flex!important;
    justify-content: space-between;
    }
    #howto-step3 .splide__list {
        justify-content: center;
    }
    #howto-step1 .splide__slide,
    #howto-step2 .splide__slide,
    #howto-step3 .splide__slide {
    width: calc(50% - 20px)!important;
    }
    #howto-step1 .splide__arrows,
    #howto-step2 .splide__arrows,
    #howto-step3 .splide__arrows {
    display: none;
    }


    /* operation */
    .goods-order__operation {
        padding-top: 7.2cqw;
    }
    .goods-order__section-title {
        font-size: 5.067cqw;
        text-align: center;
        color: #fff;
        padding: 4cqw;
        border-radius: 4cqw;
    }
    .goods-order__operation .goods-order__section-title {
        background: #AAD497;
    }
    .goods-order__section-content {
        margin-top: 2.666cqw;
        border-radius: 4cqw;
        padding: 5.333cqw 2.933cqw;
    }
    .goods-order__operation .goods-order__section-content {
        border: 0.533cqw solid #AAD497;
    }
    .goods-order__text-list {
        display: flex;
        flex-direction: column;
        gap: 1.333cqw;
    }
    .goods-order__text-item {
        font-size: 3.2cqw;
        line-height: 1.4;
        padding-left: 2.5cqw;
        position: relative;
    }
    .goods-order__text-item::before {
        display: inline-block;
        content: '';
        height: 0.8cqw;
        width: 0.8cqw;
        background: #333;
        border-radius: 100%;
        position: absolute;
        top: 2cqw;
        left: 0;
    }
    .goods-order__member-link:link {
        font-size: 3.3cqw;
        font-weight: bold;
    }

    /* notice */
    .goods-order__notice {
        padding: 7.2cqw 0 4cqw;
    }
    .goods-order__notice .goods-order__section-title {
        background: #F6AE66;
    }
    .goods-order__notice .goods-order__section-content {
        border: 0.533cqw solid #F6AE66;
        background: #fff6ed;
    }

    /* contact */
    .goods-order__contact {
        padding-bottom: 1rem;
    }
    .goods-order__contact-title {
        font-size: 20px;
    }
    .goods-order__contact-text {
        font-size: 16px;
    }
    .goods-order__contact-text a {
        font-weight: bold;
        text-decoration: underline;
    }

    /* footer */
    .goods-order__footer {
        background: #106635;
        height: 55.733cqw;
        position: relative;
    }
    .goods-order__footer::before {
        display: block;
        content: '';
        height: 19.133cqw !important;
        width: 114.933cqw;
        border-radius: 0 0 100% 100%;
        background: #FFFFF5;
        position: absolute;
        top: -2cqw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
    }
}