body {
    padding-bottom: 60px;
    /* フッターの高さ分の余白 */
}

footer {
    height: 60px;
    /* フッターの高さ */
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.absoluteAll {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.main-title {
    padding: 8rem 6.4rem 4.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-title>img {
    width: 63.28rem;
}

.main-title>.text {
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1.5;
}

.main-visual {
    background-image: url(images/main-visual-1-pc.webp);
    background-size: 100% 100%;
    padding: 1.28rem 7.76rem 0 10rem;
    aspect-ratio: 1920 / 879;
}

.main-visual .text {
    font-size: 2.56rem;
    margin-top: 1.84rem;
    font-weight: 600;
}

.main-visual .text>h4 {
    font-size: 4.48rem;
    line-height: 1.5;
    font-weight: 700;
}

.main-visual .text>h5 {
    font-size: 3.2rem;
    line-height: 1.5;
    font-weight: 700;
}

.mySlider {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 3.2rem 0;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.4s ease;
}

.slide {
    flex-shrink: 0;
}

.slide img {
    width: 100%;
    display: block;
}

.slide {
    width: calc((100% - 3.84rem) / 3);
    /* 3 张 + 两个间距 */
    margin-right: 1.92rem;
}

.slide:last-child {
    margin-right: 0;
}

.mySlider.dragging,
.mySlider.dragging * {
    user-select: none;
    -webkit-user-select: none;
}

.mySlider .slider-wrapper {
    cursor: grab;
}

.mySlider.dragging .slider-wrapper {
    cursor: grabbing;
}

.video-container {
    display: flex;
    justify-content: space-between;
    max-width: 140.56rem;
    margin: 0 auto;
}

.main-video {
    width: 49%;
    aspect-ratio: 353 / 199;
}

.support-plan {
    margin-top: 6.4rem;
    display: flex;
    flex-direction: column;
}

.support-plan-title {
    margin: 0 0 3.2rem 6.56rem;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
}

.support-plan-title>img {
    max-width: 56.8rem;
}

.support-plan-card {
    background: #fff;
    padding-left: 5.28rem;
    padding-bottom: 3.84rem;
    background-image: url(images/plan-1-2.webp);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: right top;
    width: 116rem;
    margin: 0 auto 5.36rem;
}

.support-plan-card.two {
    background-image: url(images/plan-2-2.webp);
}

.card-header {
    display: flex;
    align-items: center;
}

.support-plan-price {
    font-weight: 900;
    font-size: 3.2rem;
    line-height: 1.5;
    margin-left: 3.28rem;
    display: flex;
    gap: 1.92rem;
    padding: 16px 0;
}

.support-plan-card .card-number {
    width: 11.84rem;
    height: 11.2rem;
    background: #163882;
    display: flex;
    justify-content: center;
    align-items: center;
}

.support-plan-card .card-number>img {
    width: 50%;
}

.support-plan-description h3 {
    font-size: 1.92rem;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 1.28rem;
}

.support-plan-description {
    margin: 3.2rem 0;
    font-size: 1.6rem;
    font-weight: 500;
    padding-right: 50%;
}

.plan-3 {
    height: 36rem;
    display: flex;
    flex-direction: row-reverse;
}

.plan-3>img {
    width: auto;
    transform: translateY(24%);
}

.product-detail {
    padding: 6.4rem;
    display: flex;
    flex-direction: column;
    gap: 6.4rem;
}

.product-detail .header {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 3.2rem;
}

.product-detail .header img {
    width: 26.88rem;
}

.q-a .header img {
    width: 15.76rem;
}

.row:before,
.row::after {
    display: none;
}

.spec-table {
    width: 100%;
    max-width: 116rem;
    margin: 0 auto;
    box-sizing: border-box;
    border: 0.64rem solid #163882;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.row {
    display: flex;
    gap: 0.32rem;
    border-bottom: none;
    height: 10.08rem;
    line-height: 10.08rem;
    margin-right: 0;
    margin-left: 0;
}

.cell {
    font-size: 2.56rem;
    font-weight: 700;
    color: #163882;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell.left {
    width: 35%;
    background: #FFFBCA;
}

.cell.right {
    width: 65%;
}

.faq-wrap {
    width: 100%;
    max-width: 116rem;
    margin: 3.52rem auto;
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
}

.faq-item {
    background: #FFFBCA;
    overflow: hidden;
}

.faq-title {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    height: 10.88rem;
    padding: 0 4.24rem 0 2.56rem;
}

.faq-icon {
    width: 4.24rem;
}

.faq-text {
    font-size: 2.56rem;
    font-weight: bold;
    flex: 1;
    margin-left: 2.96rem;
}

.faq-toggle {
    font-size: 4rem;
    transition: transform 0.25s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-content {
    padding: 1.6rem;
    font-size: 1.6rem;
    display: none;
}

.is-sp-show {
    display: none;
}

@media (max-width: 767.9px) {
    .main-title {
        padding: 0.48rem 0.22rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .main-title>img {
        width: 5.7rem;
        margin-top: 0;
        margin-bottom: 0.32rem;
    }

    .main-title>.text {
        font-size: 0.32rem;
    }

    .main-visual {
        background-image: url(images/main-visual-1-sp.webp);
        height: 13rem;
        padding: 0.48rem 0.22rem 0;
        aspect-ratio: inherit;
    }

    .main-visual .text {
        font-size: 0.32rem;
        font-weight: 600;
        color: #fff;
        margin-top: 0.474rem;
    }

    .main-visual .text>h4 {
        font-size: 0.46rem;
        margin-bottom: 0.18rem;
    }

    .main-visual .text>h5 {
        font-size: 0.36rem;
    }

    .main-video {
        width: 90%;
        margin: 0 auto;
        margin-top: 0.8rem;
    }

    .support-plan {
        margin-top: 0.8rem;
    }

    .support-plan-title {
        margin: 0 0 0.48rem 0.22rem;
        font-size: 0.36rem;
    }

    .support-plan-title>img {
        max-width: 5.12rem;
    }

    .support-plan-card {
        background: #fff;
        padding: 0 0.32rem 0.3rem 0.32rem;
        background-image: none;
        width: calc(100% - 0.44rem);
        margin: 0 auto 0.48rem;
    }

    .support-plan-card,
    .support-plan-card.two {
        background-image: none;
    }

    .support-plan-card>img {
        margin-top: 0.2rem;
    }

    .card-header {
        display: flex;
        align-items: center;
    }

    .support-plan-price {
        font-size: 0.36rem;
        margin-left: 0.32rem;
        gap: 0.16rem;
    }

    .support-plan-card .card-number {
        width: 1.06rem;
        height: 1rem;
    }

    .support-plan-description h3 {
        font-size: 0.36rem;
        margin: 0.16rem 0;
    }

    .support-plan-description {
        margin: 0 0 0.48rem;
        font-size: 0.32rem;
        padding-right: 0;
    }

    .plan-3 {
        height: 2.46rem;
    }

    .product-detail {
        padding: 2rem 0.22rem 0.8rem 0.22rem;
        gap: 0.8rem;
    }

    .spec-table {
        border: 0.04rem solid #163882;
        gap: 0.04rem;
    }

    .row {
        gap: 0.04rem;
        height: auto;
        flex-direction: column;
    }

    .cell {
        height: 1.4rem;
        line-height: 1.4rem;
        font-size: 0.28rem;
    }

    .cell.left,
    .cell.right {
        width: 100%;
    }

    .product-detail .header {
        font-size: 0.36rem;
        margin-bottom: 0.48rem;
    }

    .product-detail .header img {
        width: 2.42rem;
    }

    .q-a .header img {
        width: 1.42rem;
    }

    .faq-wrap {
        margin: 0.48rem auto;
        gap: 0.06rem;
    }

    .faq-title {
        height: 1.42rem;
        padding: 0 0.6rem 0 0.48rem;
    }

    .faq-icon {
        width: 0.34rem;
    }

    .faq-text {
        font-size: 0.28rem;
        margin-left: 0.24rem;
    }

    .faq-toggle {
        font-size: 0.6rem;
    }

    .faq-content {
        padding: 0.28rem;
        font-size: 0.28rem;
    }

    .is-sp-show {
        display: block;
    }

    .support-plan-card .donation-btn {
        width: 100%;
        height: 1.46rem;
        font-size: 0.32rem;
    }

    .slide {
        width: 100%;
        margin-right: 0;
    }

    .mySlider {
        margin: 0.8rem 0;
    }

    .video-container {
        display: block;
        max-width: 100%;
    }
}