@charset "utf-8";

.desc p {
    font-size: 20px;
    font-size: clamp(1.125rem, 1.095rem + 0.13vw, 1.25rem);
    line-height: 2;
    font-weight: 700;
}

.sec-intro .inner-16 {
    padding-bottom: 83px;
}

.sec-intro .desc {
    text-align: center;
}


.infinite-slider {
    margin-bottom: 122px;
}

.class {
    border-radius: 100px 100px 0px 0px;
    background: #fffddd;
}

.class .inner-12 {
    padding: 120px 0 160px;
}

.class .sec-head .desc {
    text-align: center;
    margin-bottom: 80px;
}

.class .main-container {
    display: flex;
    flex-direction: column;
    gap: 42px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

/* --- サイドメニュー --- */
.class .sidebar {
    display: flex;
    justify-content: center;
    border-radius: 20px;
    background-color: #FFF;
    text-align: center;
    flex-shrink: 0;
}

/* 全てのメニュー項目 */
.class .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    max-width: 214px;
    width: 100%;
    cursor: pointer;
    font-family: var(--main);
    font-weight: 700;
    font-size: 28px;
    font-size: clamp(1.125rem, 0.973rem + 0.65vw, 1.75rem);
    letter-spacing: 0.08em;
    text-align: center;
    color: #000;
    padding: 0 76px;
}

.class .nav-item:nth-child(1) {
    border-radius: 20px 0 0 20px;
}

.class .nav-item:last-child {
    border-radius: 0 20px 20px 0;
}

/* 選択中のメニュー項目 */
.class .nav-item.active {
    background-color: #D32E26;
    color: #fff;
    position: relative;
}



.class .nav-item.active::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 12px solid #d32e26;
    border-bottom: 0;
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
    margin: auto;
}

/* --- コンテンツエリア --- */
.class .content-area {
    flex: 1;
}

/* 全てのカード（最初は消しておく） */
.class .class-card {
    display: none;
    flex-direction: column;
    background: #fff;
    padding: 42px 72px 39px;
    border-radius: 30px;
    animation: fadeIn 0.4s ease forwards;
    gap: 20px;
    margin-bottom: 80px;
}

.class .class-card .main-ttl {
    font-family: var(--main);
    font-weight: 700;
    font-size: 40px;
    font-size: clamp(1.5rem, 1.257rem + 1.04vw, 2.5rem);
    letter-spacing: 0.08em;
    text-align: center;
    color: #000;
    margin-bottom: 40px;
    grid-area: 1 / 1 / 2 / 5;
}

.class .class-card .box {
    border-radius: 20px;
    background: #fffeea;
    padding: 24px 40px 33px;

}

.class .class-card .box .box-ttl {
    font-family: var(--main);
    font-weight: 700;
    font-size: 20px;
    font-size: clamp(1.125rem, 1.095rem + 0.13vw, 1.25rem);
    letter-spacing: 0.08em;
    line-height: calc(24/20);
    text-align: left;
    margin-bottom: 17px;
    color: #212121;
}

.class .class-card .box .box-ttl::before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50px;
    vertical-align: bottom;
    display: inline-block;
    margin-right: 8px;
}

.class .class-card .box .desc p {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: calc(20/14);
    color: #212121;
}

.class .class-card .box .box-ttl.red::before {
    background-color: #D32E26;
}

.class .class-card .box .box-ttl.yellow::before {
    background-color: #FDF250;
}

.class .class-card .box .box-ttl.blue::before {
    background-color: #489FE4;
}

.class .class-card .box:nth-child(2) {
    grid-area: 2 / 1 / 3 / 3;
}

.class .class-card .box:nth-child(3) {
    grid-area: 2 / 3 / 3 / 5;
}

.class .class-card .box:nth-child(4) {
    grid-area: 3 / 1 / 4 / 5;
}

.class .class-card .kome {
    grid-area: 4 / 1 / 5 / 5;
}

.class .class-card .box .column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 53px;
}

.class .class-card .box .column .item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.class .class-card .box .column .item .icon {
    width: 74px;
    height: 73px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.class .class-card .box .column .item .sub-ttl {
    font-family: var(--main);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.08em;
    line-height: calc(40/18);
    text-align: center;
    color: #212121;
    margin-bottom: 16px;
}

.class .class-card .kome {
    font-family: var(--main);
    font-weight: 400;
    font-size: 14px;
    line-height: calc(20/14);
    text-align: left;
    color: #212121;
    padding-left: 1em;
    text-indent: -1em;

}

/* 選択中のカードだけ出す */
.class .class-card.active {
    display: grid;
}

.class .morebtn {
    margin: 0 auto 120px;
}

.class .attention {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 72px;
}

.class .attention .box {
    border-radius: 30px;
    border: 2px solid transparent;

    background-image:
        linear-gradient(#FFFDDD, #FFFDDD),
        repeating-linear-gradient(-45deg,
            #489FE4,
            #489FE4 8px,
            transparent 8px,
            transparent 16px);

    background-origin: border-box;
    background-clip: padding-box, border-box;

    /* 追加：背景のサイズを固定してループを安定させる */
    background-size: auto, 22.6px 22.6px;
}

.class .attention .box.red {
    background-image:
        linear-gradient(#FFFDDD, #FFFDDD),
        /* 45度傾けることで、1つの指定で上下左右をカバー */
        repeating-linear-gradient(-45deg,
            #D32E26, #D32E26 8px,
            transparent 8px, transparent 16px);
}

.class .attention .box .box-inner {
    padding: 42px 56px 55px;
}

.class .attention .box .box-ttl {
    font-family: var(--main);
    font-weight: 700;
    font-size: 32px;
    font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
    letter-spacing: 0.08em;
    text-align: center;
    color: #000;
    margin-bottom: 40px;
}

.class .attention .box .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--main);
    font-weight: 400;
    font-size: 20px;
    font-size: clamp(1.125rem, 1.095rem + 0.13vw, 1.25rem);
    letter-spacing: 0.08em;
    color: #212121;
    gap: 18px;
}

.class .attention .box .list p::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50px;
    display: inline-block;
    margin-right: 16px;
}

.class .attention .box .list .red::before {
    background-color: #D32E26;
}

.class .attention .box .list .yellow::before {
    background-color: #FDF250;
}

.class .attention .box .list .blue::before {
    background-color: #489FE4;
}

.class .attention .box .desc p {
    font-family: var(--main);
    font-weight: 400;
    font-size: 18px;
    font-size: clamp(1rem, 0.97rem + 0.13vw, 1.125rem);
    letter-spacing: 0.04em;
    line-height: calc(30/18);
    color: #000;
}

.voice {
    border-radius: 0px 0px 100px 100px;
    background: #fffeea;
    padding: 82px 0 99px;
    overflow: hidden;
}

.voice .sec-head {
    margin-bottom: 56px;
}

.voice .voice-nav-wrapper {
    position: relative;
    max-width: 152px;
    width: 100%;
    height: 56px;
    margin: 0 auto;
}

.voice-swiper {
    overflow: visible;
    margin-bottom: 80px;
}

.voice .swiper-button-next,
.voice .swiper-button-prev {
    width: 56px;
    height: 56px;
    background: #d32e26;
    border: 2px solid #d32e26;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .4s ease;
}

.voice .swiper-button-next:hover,
.voice .swiper-button-prev:hover {
    background-color: #FFF;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: "";
    background: url(/system_panel/uploads/images/20260211044618651726.svg) no-repeat center / contain;
    width: 11px;
    height: 9px;
}

.swiper-button-prev:hover:after,
.swiper-rtl .swiper-button-next:hover:after,
.swiper-button-next:hover:after,
.swiper-rtl .swiper-button-prev:hover:after {
    background: url(/system_panel/uploads/images/20260211045916539537.svg) no-repeat center/contain;
}


.voice .swiper-button-prev::after {
    transform: scale(-1);
}

.voice .swiper-slide {
    padding-top: 27px;
    width: 681px;
    position: relative;
}

.voice .swiper-slide::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 0;
    width: 48px;
    height: 43px;
    z-index: 10;
}

.voice .swiper-slide.red::before {
    background: url(/system_panel/uploads/images/20260212061539813581.svg) no-repeat center/contain;
}

.voice .swiper-slide.blue::before {
    background: url(/system_panel/uploads/images/20260212061539572603.svg) no-repeat center/contain;
}

.voice .swiper-slide.yellow::before {
    background: url(/system_panel/uploads/images/20260212061539518577.svg) no-repeat center/contain;
}

.voice .swiper-slide .box-inner {
    background-color: #FFF;
    border-radius: 30px;
    padding: 40px;
}

.voice .swiper-slide .title {
    font-family: var(--main);
    font-weight: 700;
    font-size: 18px;
    font-size: clamp(1rem, 0.97rem + 0.13vw, 1.125rem);
    letter-spacing: 0.04em;
    line-height: calc(30/18);
    text-align: left;
    color: #000;
    padding-bottom: 34px;
    margin-bottom: 34px;
    position: relative;
}

.voice .swiper-slide .title::after {
    content: "";
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.voice .swiper-slide.red .title::after {
    background-image: repeating-linear-gradient(to right, #c84a3b, #c84a3b 8px, transparent 8px, transparent 16px);
}

.voice .swiper-slide.yellow .title::after {
    background-image: repeating-linear-gradient(to right, #F2E300, #F2E300 8px, transparent 8px, transparent 16px);
}

.voice .swiper-slide.blue .title::after {
    background-image: repeating-linear-gradient(to right, #489FE4, #489FE4 8px, transparent 8px, transparent 16px);
}

.voice .swiper-slide .desc {
    margin-bottom: 22px;
}

.voice .swiper-slide .desc p {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 24px;
    color: #000;
}

.voice .swiper-slide .name {
    font-family: var(--main);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 32px;
    text-align: right;
    color: #000;
}

.faq .inner-12 {
    padding-bottom: 161px;
}

.faq .sec-head {
    margin-bottom: 56px;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-question {
    padding: 23px 40px 17px;
    color: #fff;
    font-weight: bold;
    display: grid;
    grid-template-columns: 90% auto;
    justify-content: space-between;
    cursor: pointer;
    align-items: center;
    z-index: 2;
    position: relative;
}

.faq-item.red .faq-question {
    background: #d32e26;
}

.faq-item.blue .faq-question {
    background: #489fe4;
}



.faq-question .text {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-family: var(--main);
    font-weight: 700;
    font-size: 20px;
    font-size: clamp(1.125rem, 1.095rem + 0.13vw, 1.25rem);
    letter-spacing: 0.08em;
    line-height: 2;
    color: #fff;
}

.faq-question .text .ttl {
    font-size: 24px;
    font-size: clamp(1.125rem, 1.034rem + 0.39vw, 1.5rem);
    letter-spacing: 0.04em;
    line-height: 1;
    margin-top: 5px;
}

.faq-item {
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box, border-box;
    transition: all 0.3s ease;
}

/* 回答エリアのアニメーション設定 */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease;
    padding: 0 40px 0;
    border-radius: 0px 0px 20px 20px;
    background: #fff;
}

/* active時の回答エリア */
.faq-item.active .faq-answer {
    max-height: 1000px;
    visibility: visible;
    opacity: 1;
    padding: 22px 40px 33px;

}

.faq-item.red .faq-answer {
    border: 1px solid #d32e26;
}

.faq-item.blue .faq-answer {
    border: 1px solid #489fe4;
}

.faq-item .faq-answer .column {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}





.faq-item .faq-answer .column .ttl {
    font-family: var(--eng);
    color: #d32e26;
    font-weight: 700;
    font-size: 24px;
    font-size: clamp(1.125rem, 1.034rem + 0.39vw, 1.5rem);
    letter-spacing: 0.04em;
    line-height: calc(30/24);
}

.faq-item .faq-answer .column p {
    font-family: var(--main);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 26px;
    color: #212121;
}



.faq .icon {
    font-family: var(--eng);
    font-weight: 700;
    font-size: 32px;
    font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
    letter-spacing: 0.04em;
    color: #fff;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



@media (max-width: 960px) {

    .class .class-card.active,
    .class .attention {
        display: flex;
        flex-direction: column;
    }

    .class .class-card .box .column {
        grid-template-columns: 1fr;
    }

    .class .content-area {
        width: 100%;
    }

    .class .class-card {
        padding: 40px 20px;
    }

    .class .class-card .box {
        width: 100%;
        padding: 20px;
    }

    .class {
        border-radius: 40px 40px 0 0;
    }

    .class .sidebar {
        width: 90%;
        margin: 0 auto;

    }

    .class .nav-item {
        padding: 0;
    }

    .class .attention .box .box-inner {
        padding: 40px 20px;
    }

    .class .morebtn {
        margin-bottom: 80px;
    }

    .voice {
        border-radius: 0 0 40px 40px;
    }

    .voice .sec-body {
        width: 90%;
        margin: 0 auto;
    }

    .class .inner-12 {
        padding: 100px 0;
    }

    .voice .swiper-slide {
        width: 90%;
    }

    .voice .swiper-slide .box-inner {
        border-radius: 20px;
        padding: 40px 20px;
    }

    .class .attention .box .list {
        gap: 15px;
        margin-bottom: 20px;
    }

    .faq-question {
        padding: 20px 17px 20px 10px;
    }

    .faq-item.active .faq-answer {
        padding: 40px 17px 40px 20px;
    }

    .faq-item .faq-answer {
        padding: 0 17px 0 20px;
    }
}



.gjs-dashed .class .class-card {
    display: block;
}

.gjs-dashed .infinite-slider {
    overflow: visible;
    height: auto;
}

.gjs-dashed .infinite-slider .slider-inner {
    animation: none;
    flex-wrap: wrap;
    height: auto;
}

.gjs-dashed .infinite-slider .slide-item {
    width: calc(100%/4);
}

.gjs-dashed .infinite-slider .slide-item img {
    height: auto;
}

.gjs-dashed .faq-item {
    overflow: visible;
}

/* 回答エリアのアニメーション設定 */
.gjs-dashed .faq-answer {
    max-height: auto;
    overflow: visible;
    visibility: visible;
    opacity: 1;
}

.gjs-dashed .faq-item .faq-answer {
    max-height: none;
}