@charset "utf-8";

.inBgWr {
    padding: 9rem 0 12rem;
}

.inBgTit {
    display: flex;
    margin: 0 auto;
    max-width: max-content;
}

/* メニュー */
.cmnMenu {
    margin: 12.5rem 0 0;
}

.cmnMenuAr {
    width: 100%;
    max-width: 135rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.cmnMenuBx {
    padding: 6.5rem 1.5rem 5rem;
}

.cmnMenuIn {
    width: 100%;
    max-width: 115rem;
    margin: 0 auto;
}

.cmnMenuTit {
    width: 100%;
    padding: 0 0 1.8rem 0;
    border-bottom: .3rem solid var(--quaternary);
    text-align: center;
    color: var(--white);
}

.cmnMenuTit br {
    display: none;
}

.cmnMenuFl {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    margin: 5rem 0 0
}

.cmnMenuFlTxtBx {
    width: 48%;
    max-width: 53rem;
}

.cmnMenuTxt {
    color: var(--white);
}

.cmnMenuTxt span {
    padding: 0 .3rem;
    color: var(--primary);
    background: var(--white);
}

.cmnMenuFlImg {
    width: 48%;
    max-width: 53rem;
}

.cmnMenuPlanBx {
    display: flex;
    margin: 2rem 0 0;
    padding: 1.5rem 0;
    border-radius: 1rem;
    background: var(--white);
}

.cmnMenuPlanBxL {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36%;
    padding: 0 1.5rem;
    border-right: 1px solid var(--primary);
}

.cmnMenuPlanBxR {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1.5rem;
}

.cmnMenuPlanTit {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--primary);
}

.cmnMenuPlanTxtBx {
    display: flex;
    align-items: center;
    margin: .8rem 0 0;
}

.cmnMenuPlanTxt {
    font-weight: 600;
    line-height: 1.45;
}

.cmnMenuPlanSlash {
    padding: 0 1.6rem;
}

/* リード */
.inRead {
    margin: 12rem 0 0;
}

.inReadAr {
    width: 100%;
    max-width: 153rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.inReadBx {
    position: relative;
}

.inReadTxtBx {
    text-align: center;
}

.inReadTit {
    line-height: 2;
}

.inReadTit .none {
    display: none;
}

.inReadTit span {
    color: var(--primary);
}

.inReadTxt {
    margin: 5rem 0 0;
}

.inReadTxt:nth-of-type(n+2) {
    margin: 3rem 0 0;
}

.inReadTxt span {
    color: var(--primary);
}

.inReadImgBx {
    display: contents;
}

.inReadImgBxL {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 22%;
    max-width: 32.3rem;
    aspect-ratio: 323/451;
}

.inReadImgBxR {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 22%;
    max-width: 33.1rem;
    aspect-ratio: 331/458;
}

.inReadImg01 {
    position: relative;
    width: 100%;
    height: 100%;
}

.inReadImg01 img {
    position: absolute;
    width: 77%;
    bottom: 0;
    right: 1.5rem;
}

.inReadImg01::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.5rem;
    z-index: 0;
    width: 55.7%;
    aspect-ratio: 15/19;
    border-radius: 1rem;
    background: var(--primary);
}

.inReadImg02 {
    position: relative;
    width: 100%;
    height: 100%;
}

.inReadImg02 img {
    position: absolute;
    width: 74.9%;
    top: 0;
    right: 1.5rem;
}

.inReadImg02::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    z-index: 0;
    width: 55.7%;
    aspect-ratio: 15/19;
    border-radius: 1rem;
    background: var(--primary);
}

.inReadImgWide {
    width: 100%;
    margin: 7rem 0 0;
}

/* 特徴 */
.inPoint {
    padding: 9rem 0 12rem;
}

.inPtTit {
    display: flex;
    max-width: max-content;
    margin: 0 auto;
    text-align: center;
}

.inPtBx {
    margin: 10rem 0 0;
}

.inPtFl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.inPtFl:nth-of-type(n+2) {
    margin: 7rem 0 0;
}

.inPtFlImg {
    width: 50%;
    max-width: 66rem;
    overflow: hidden;
    clip-path: polygon(0% 0%, 100% 0, 96% 100%, 0% 100%);
}

.inPtTxtBx {
    width: 48%;
    max-width: 60rem;
}

.inPtTitBx {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.inPtTitNum {
    font-size: 5rem;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--primary);
}

.inPtTxt01 {
    line-height: 1.45;
    color: var(--primary);
}

.inPtTxt01 span {
    margin: 0 1rem 0 0;
}

.inPtTxt02 {
    max-width: 60rem;
    margin: 3rem 0 0;
}

.inPtTxt02 span {
    font-weight: 700;
    color: var(--primary);
}

.inPtTxtBx .btn01 {
    margin: 4rem 0 0 auto;
}

/* 生徒様の声 */
.inVoice {
    padding: 9rem 4rem 10rem;
    background: #FFF07E;
}

.inVoTit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 35.4rem;
    gap: 2rem;
    margin: 0 auto;
    color: var(--primary);
}

.inVoTit.inVoTit02 {
    max-width: 43rem;
}

.inVoAr {
    width: 100%;
    max-width: 129rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.inVoTit::before,
.inVoTit::after {
    content: "";
    display: flex;
    height: 4rem;
    width: .3rem;
    background: var(--primary);
}

.inVoTit::before {
    transform: rotate(-22deg);
    transform-origin: center;
    order: -1;
}

.inVoTit::after {
    transform: rotate(22deg);
    transform-origin: center;
}

.inVoBx {
    margin: 5rem 0 0;
}

/* 時間割 */
.inTable {
    padding: 12rem 0 24rem;
}

.inTableTit {
    width: 100%;
    padding: 0 0 1rem 0;
    border-bottom: 2px solid var(--primary);
    text-align: center;
    line-height: 1.45;
}

.timeTableBx {
    margin: 2rem 0 0;
    overflow-x: auto;
}

.timeTable01 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    width: 122rem;
}

.timeTWeek {
    width: 8.2%;
    padding: 0 .9rem;
    border-radius: .8rem;
    background: var(--primary);

}

.timeTWeek .timeTWeekCel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}

.timeTWeek .timeTWeekCel:nth-of-type(n+2) {
    border-top: 1px solid var(--white);
}

.timeTWeek .timeTWeekCel p {
    line-height: 1.45;
    font-size: 2rem;
    color: var(--white);
}

.timeTMain {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex: 1;
}

.timeTable01 .timeTc {
    width: 32%;
}

.timeTh01 {
    padding: 1rem;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--white);
    text-align: center;
    border-radius: .8rem;
    background: var(--primary);
}

.timeTh02 {
    padding: 1rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    color: var(--primary);
}

.timeTdBx {
    border-radius: .8rem;
    background: var(--secondary);
    padding: 0 2rem;
}

.timeTd {
    padding: 2rem 0;
}

.timeTd:nth-of-type(n+2) {
    border-top: 1px solid #B2C5EC;
}

.timeTdFl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.timeTdFl p {
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.45;
}

.timeTdFl p:first-of-type {
    color: var(--primary);
}

.tableMt {
    margin: 7rem 0 0;
}

.timeTable02 {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    width: 122rem;
}

.timeTable02 .timeTc {
    width: 49%;
}

.timeTable02 .timeTdBx {
    margin: 2rem 0 0;
}

.timeTable02 .timeTdFl p {
    width: 50%;
    text-align: center;
}

.timeTable02 .timeTdFl p.w-100 {
    width: 100%;
}

.timeTable03 {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    width: 122rem;
}

.timeTcL {
    display: flex;
    flex-direction: column;
    width: 38%;
}

.timeTable03 .timeTcL .timeTdBx {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2.5rem 0 0;
    flex: 1;
}

.timeTcR {
    flex: 1;
}

.timeTable03 .timeTdFl {
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.timeTable03 .timeTc {
    width: 32%;
}

.timeTable04 {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    width: 122rem;
}

.timeTable04 .timeTdBx {
    margin: 2rem 0 0;
}

.timeTable05 {
    width: 100%;
}

.timeTable05 .timeTdBx {
    margin: 2rem 0 0;
}

.timeTableBx .black {
    color: var(--black) !important;
}

.timeTable01.timeTable06 .timeTc {
    width: 24%;
}

.timeTdAddTxtBx {
    display: flex;
    margin: 1rem 0 0;
}

/* 流れ */

.inFlowTitBx {
    position: relative;
}

.inFlowTitBx .bgTxt01 {
    position: absolute;
    z-index: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
    bottom: -3.5rem;
}

.inFlowTit {
    text-align: center;
}

.inFlowFl {
    display: flex;
    gap: 1rem;
    margin: 7rem 0 0;
}

.inFlowItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22%;
    max-width: 29rem;
}

.inFlowStepBx {
    width: 100%;
    max-width: 25rem;
    margin: 0 auto;
    padding: 0.8rem 1.5rem;
    aspect-ratio: 50/21;
    background: url(../../../../uploads/cmn_flow_fukidashi.svg)no-repeat center /contain;
    filter: drop-shadow(0 .3rem .6rem rgba(0, 0, 0, 0.16));
    position: relative;
    z-index: 3;
}

.inFlowStep {
    line-height: 1.65;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary);
}

.inFlowImg {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 18rem;
    margin: -0.8rem auto 0;
}

.inFlowTxt {
    margin: 3rem 0 0;
}

.inFlowItem .btn01 {
    margin: 3rem auto 0;
}

.inFlowArrow {
    width: 4.3rem;
    margin: 17.5rem 0 0;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=1024px) {


    .cmnMenuTit br {
        display: block;
    }

    /* リード */
    .inReadImgBx {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        margin: 4rem 0 0;
    }

    .inReadImgBxL {
        position: static;
        width: 47%;
    }

    .inReadImgBxR {
        position: static;
        width: 47%;
    }

    .inPtTitNum {
        font-size: 4rem;
    }

    .inFlowTitBx .bgTxt01 {
        bottom: -2rem;
    }

    /* 流れ */
    .inFlowItem {
        width: 24%;
    }

    .inFlowStep {
        font-size: 1.8rem;
    }

    .inFlowArrow {
        width: 3rem;
        margin: 14.5rem 0 0;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=768px) {

    .inBgWr {
        padding: 5rem 0 6rem;
    }

    .cmnMenu {
        margin: 5rem 0 0;
    }

    .cmnMenuBx {
        padding: 2.5rem 1.5rem 4rem;
    }

    .cmnMenuTit {
        padding: 0 0 1.5rem 0;
    }

    .cmnMenuFl {
        flex-direction: column-reverse;
        align-items: center;
        margin: 3rem 0 0;
    }

    .cmnMenuFlTxtBx {
        width: 100%;
    }

    .cmnMenuFlImg {
        width: 100%;
    }

    .cmnMenuPlanBx {
        flex-direction: column;
        padding: 0 1.5rem;
    }

    .cmnMenuPlanBxL {
        width: 100%;
        padding: 2.5rem 0 2rem;
        border-bottom: 1px solid var(--primary);
        border-right: none;
    }

    .cmnMenuPlanBxR {
        width: 100%;
        padding: 2rem 0 3rem;
    }

    .cmnMenuPlanTit {
        font-size: 1.8rem;
    }

    .cmnMenuPlanTxtBx {
        flex-direction: column;
    }

    .cmnMenuPlanTxt {
        font-size: 1.8rem;
        font-weight: 700;
    }

    .cmnMenuPlanSlash {
        display: none;
    }

    /* リード */
    .inRead {
        margin: 8rem 0 0;
    }

    .inReadTit .none {
        display: block;
    }

    .inReadTxt {
        margin: 3rem 0 0;
        text-align: start;
    }

    .inReadTxt:nth-of-type(n+2) {
        margin: 2rem 0 0;
    }

    .inReadTxt br {
        display: none;
    }

    .inReadImgWide {
        margin: 4rem 0 0;
    }

    /* 特徴 */
    .inPoint {
        padding: 5rem 0 6rem;
    }

    .inPtBx {
        margin: 6rem 0 0;
    }

    .inPtFl {
        flex-direction: column;
    }

    .inPtFl:nth-of-type(n+2) {
        margin: 5rem 0 0;
    }

    .inPtFlImg {
        width: 100%;
    }

    .inPtTxtBx {
        width: 100%;
        max-width: 66rem;
    }

    .inPtTitNum {
        font-size: 3rem;
    }

    .inPtTxt02 {
        max-width: 66rem;
        margin: 2rem 0 0;
    }

    .inPtTxtBx .btn01 {
        margin: 3rem auto 0;
    }

    /* 生徒様の声 */
    .inVoice {
        padding: 5rem 3rem;
    }

    /* 時間割 */
    .inTable {
        padding: 6rem 0 12rem;
    }

    .tableMt {
        margin: 4rem 0 0;
    }



    /* 流れ */

    .inFlowFl {
        flex-direction: column;
        align-items: center;
        margin: 3rem 0 0;
    }

    .inFlowStep {
        font-size: 2.2rem;
    }

    .inFlowImg {
        margin: -0.4rem auto 0;
    }

    .inFlowTxt {
        margin: 2rem 0 0;
    }

    .inFlowItem .btn01 {
        margin: 2rem auto 0;
    }

    .inFlowArrow {
        margin: 0;
    }

    .inFlowArrow img {
        transform: rotate(90deg);
    }

    .inFlowItem {
        width: 100%;
        padding: 2.5rem 0;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */