.from-tb {
    display: block;
}

.non-from-tb {
    display: none;
}

.row-tb {
    display: flex;
}

.flex-tb {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    padding-left: 50px;

    >div {
        &:nth-of-type(1) {
            &:not(:has(#blog-content)) {
                width: fit-content;
                margin: 0 auto;
            }
        }

        &:nth-of-type(2) {
            background-color: var(--iroha-mint);
        }
    }
}

.mandarin-btn {
    font-size: 18px;
    width: 289px;
    height: 75px;
}

.wpcf7-form-control-wrap {
    &:has(textarea) {
        width: unset;
    }
}

h1 {
    width: 190px;
    height: 60px;
}

.sprout {
    font-size: 30px;
    width: 494px;
    height: 124px;

    &.small {
        font-size: 22px;
    }

    &:not(:has(span)) {
        padding-top: 32px;
    }

    span {
        font-size: 20px;
    }
}

header {
    height: 100px;
    padding-left: 20px;
    padding-right: 124px;
    box-shadow: 0 4px 4px #00000040;


    .from-tb {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;

        >img {
            display: block;
            width: 70px;
            height: 70px;
        }

        >div {
            .tel {
                font-size: 30px;
                font-weight: 500;

                div {
                    img {
                        width: 18px;
                        height: 22px;
                    }
                }
            }

            small {
                font-size: 14px;

                &:last-of-type {
                    font-size: 16px;
                }
            }
        }
    }
}

#ham-menu {
    top: 100px;
    gap: 7.4svh;
    height: calc(100svh - 100px);

    nav {
        ul {
            position: relative;
            left: 40px;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 60px 0;
            width: 476px;

            li {
                font-size: 20px;
                gap: 10px;
                width: 232px;

                >a,
                >span {

                    &::before,
                    &::after {
                        content: "-";
                    }
                }
            }
        }
    }

    >div {
        &:has(.mandarin-btn) {
            display: flex;
            justify-content: center;
            gap: 4.8vw;

            .mandarin-btn {
                margin: 0;
            }
        }
    }

    .from-tb {
        display: flex;
    }

    .non-from-tb {
        display: none;
    }
}

footer {

    >div {
        position: relative;
        width: 650px;
    }

    iframe {
        height: 238px;
        margin-bottom: 41px;
    }

    .logo {
        position: absolute;
        top: 0;
        right: 0;
        width: 182px;
        height: 210px;
        margin: 0;
    }

    nav {
        ul {
            width: 650px;
            padding-right: 50px;
            margin: 0 auto 20px;

            :last-of-type {

                a,
                span {
                    width: fit-content;
                }
            }

            a,
            span {
                width: 160px;


            }
        }
    }
}

#info {
    font-size: 18px;

    >span {
        font-size: 20px;

        &:first-of-type {
            font-size: 26px;
            padding-bottom: 20px;
        }
    }

    address {
        font-size: 20px;
        line-height: 1.8em;
    }
}

#about-eye-catch,
#flow-eye-catch,
#qanda-eye-catch,
#staff-eye-catch,
#blog-eye-catch,
#recruit-eye-catch,
#contact-eye-catch,
#anxiety-eye-catch,
#developmental-eye-catch,
#bipolar-eye-catch {
    align-items: flex-end;
    width: 660px;
    height: 240px;
    padding-left: 30px;
    padding-bottom: 30px;
    margin: 50px auto;

    h2 {
        font-size: 32px;
        width: 221px;
        height: 86px;
        margin: 0;
    }
}

#blog-eye-catch {
    background-image: url("../assets/imgs/スケッチ.jpg");
}

#hero-img {
    padding-top: 28.4svh;
    height: calc(100svh - 100px);

    .line {
        width: 681px;
        height: 336px;

        &:first-of-type {
            top: calc(28.4svh - 81px);
        }

        &:nth-of-type(2) {
            top: calc(28.4svh - 81px + 93px);
        }
    }

    strong {
        font-size: 54px;
    }

    p {
        font-size: 24px;
        position: relative;
        left: 60px;
    }

    .leaf {
        &:nth-last-of-type(5) {
            width: 65px;
        }

        &:nth-last-of-type(4) {
            width: 35px;
        }

        &:nth-last-of-type(3) {
            width: 60px;
        }

        &:nth-last-of-type(2) {
            width: 50px;
        }

        &:nth-last-of-type(1) {
            width: 40px;
        }
    }
}

#brochure {
    position: absolute;
    right: 0;
    bottom: 40px;

    .mandarin-btn {
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;

        &.from-tb {
            display: flex;
            width: 187px;
            margin-right: 0;
            margin-bottom: 11px;
        }
    }
}

#worries {
    .smoke-container {
        font-size: 18px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        width: 669px;
        height: 415px;
        padding: 0;

        &::before {
            content: none;
        }

        p {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            background-image: url("../assets/imgs/もあもあ.png");
            background-position: center center;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            &:nth-of-type(1),
            &:nth-of-type(3),
            &:nth-of-type(4) {
                width: 190px;
                height: 128px;
            }

            &:nth-of-type(2),
            &:nth-of-type(5) {
                width: 241px;
                height: 162px;
            }

            &:nth-of-type(1) {
                top: 30px;
            }

            &:nth-of-type(2) {
                margin: 0 24px;
                align-self: flex-start;
            }

            &:nth-of-type(4) {
                left: 41px;

                span {
                    &::after {
                        width: 108px;
                    }
                }
            }

            &:nth-of-type(5) {
                left: 30px;

                span {
                    &::after {
                        width: 105px;
                    }
                }
            }
        }

        .worries-person {
            position: absolute;
            bottom: 0;
            left: 50%;
            translate: -50%;
        }
    }

    .arrow {
        width: 48px;
        height: 83px;
    }

    >p {
        font-size: 36px;

        &::before,
        &::after {
            width: 3px;
            height: 45px;
        }

        &::before {
            left: -27px;
        }

        &::after {
            right: -27px;
        }

        span {
            font-size: 48px;

            &::before {
                width: 16px;
                height: 11px;
            }
        }
    }
}

#about {
    >p {
        font-size: 20px;
        margin-right: 104px;
        margin-left: 104px;
    }

    .img-container {

        &:first-of-type,
        &:last-of-type {
            width: 220px;
            height: 173px;
        }

        &:first-of-type {
            margin-bottom: -90px;
        }

        &:last-of-type {
            bottom: 81px;
        }
    }

    article {
        width: 625px;
        padding-left: 143px;

        &::after {
            right: unset;
            left: 36px;
            bottom: 31px;
            width: 79px;
            height: 101px;
        }

        h3 {
            font-size: 24px;
        }

        p {
            font-size: 18px;
        }
    }
}

#feature {
    article {
        width: 560px;
        padding-right: 50px;
        padding-left: 50px;
    }
}

#blog {
    width: 640px;

    article {
        display: flex;
        align-items: center;
        gap: 37px;
        width: 511px;

        .thumb {
            width: 237px;
            height: 198px;
        }

        h3 {
            font-size: 20px;
        }
    }
}

#greeting {
    strong {
        width: 431px;
        height: 80px;
    }

    >div {
        display: flex;
        align-items: center;
        padding: 0 55px;

        p {
            margin-right: 0;
        }

        .img-container {
            order: -1;
            flex-shrink: 0;
            margin: 0;
        }
    }

    >p {
        margin-right: 55px;
    }
}

#info-corpo,
#info-office {
    width: 568px;

    dl {
        width: 368px;
        padding: 30px 0;
        margin: 0 auto;

        dt {
            width: 163px;
        }
    }

    small {
        width: 348px;
        margin: 0 auto;
    }

    >div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 35px;

        a {
            padding-top: 0;

            &::before {
                width: 33px;
                height: 35px;
            }

            &:first-of-type {
                margin-bottom: 20px;
            }
        }
    }
}

#flow {
    width: 660px;
    padding-bottom: 99px;

    article {
        width: 564px;
        padding: 43px 42px 23px 58px;
        animation-name: none;

        .count {
            font-size: 32px;

            div {
                width: 46px;
            }
        }

        h4 {
            font-size: 28px;
        }

        p {
            font-size: 20px;
        }
    }

    .arrow {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

#location {
    padding-top: 205px;

    .img-container {
        width: 660px;
        height: 327px;
    }

    p {
        width: 680px;

        &:last-of-type {
            font-size: 20px;
        }

        span {
            font-size: 26px;
        }
    }

    div {
        font-size: 20px;
        width: 510px;
        padding: 17px 32px;

        dl {
            gap: 28px;

            &:first-of-type {
                dd {
                    letter-spacing: 0;
                }
            }

            dt {
                padding: 4px 0;
            }
        }
    }
}

#target {
    padding-bottom: 293px;

    div {
        gap: 30px 24px;
        width: 768px;
        margin: 90px auto 0;

        a {
            &:last-of-type {
                width: 428px;
            }
        }
    }

    img {
        width: 660px;
        height: 348px;
    }
}

#price {
    padding-top: 281px;

    h3 {
        margin-bottom: 70px;
    }

    div {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    article {
        font-size: 30px;
        width: 212px;
        margin: 0 0 23px;

        &:last-of-type {
            strong {
                text-align: center;
                display: block;
            }
        }

        h4 {
            font-size: 20px;
        }

        strong {
            font-size: 18px;
            height: 69px;

            span {
                font-size: 24px;
            }
        }

        dl {
            font-size: 18px;
            width: 144px;
        }
    }

    p {
        font-size: 24px;
        width: 448px;

        span {
            display: inline-block;
            margin-right: 24px;
        }
    }
}

#qanda {
    dl {
        width: 588px;
        animation-name: none;
    }
}

.staff-article {
    &:nth-of-type(even) {
        .flex-box {
            flex-direction: row-reverse;
        }
    }

    .flex-box {
        display: flex;
        justify-content: space-between;
        margin: 0 108px 0 54px;
    }

    h3 {
        span {
            font-size: 18px;
        }
    }

    .img-container {
        margin-top: 0;

        &::before,
        &::after {
            width: 221px;
            height: 307px;
        }
    }

    .introduce {
        font-size: 20px;
        padding: 0 54px;
    }
}

#blog-search,
#blog-category,
#blog-tag,
#blog-archive {
    width: 375px;
}

#blog-tag {
    #more-tag {
        margin-left: 54.5px;
    }
}

#requirements {
    width: 568px;

    h3 {
        margin-bottom: 35px;
    }

    article {
        display: flex;
        gap: 45px;
        padding: 35px 86px;

        h4 {
            flex-shrink: 0;
            width: 97px;
        }

        div,
        time {
            padding-left: unset;
        }

        ul {
            padding-left: 16px;
        }
    }
}

#apply {
    width: 568px;
    margin-bottom: 200px;

    p {
        width: fit-content;
        margin-right: auto;
        margin-left: auto;
    }

    .mandarin-btn {
        width: 240px;
    }
}

.contact-nav {
    font-size: 20px;
    gap: 20px;

    div {
        width: 120px;
        height: 36px;
    }

    i {
        width: 26px;
        height: 28px;
    }
}

#contact {
    >p {
        text-align: center;
    }

    article {
        width: 372px;

        &:nth-of-type(2) {
            text-align: center;
        }

        >div {
            font-size: 20px;
            margin-top: 18px;
        }

        a {
            font-size: 36px;

            img {
                width: 21px;
                height: 25px;
            }
        }
    }

    form {
        font-size: 18px;
        width: 660px;
        padding-right: 30px;
        padding-left: 30px;

        .multi-selector {
            display: flex;

            >span {
                flex-shrink: 0;
                width: 217px;
            }

            .flex-box {
                margin-top: 0;
            }
        }

        >.flex-box {
            gap: unset;

            label {
                width: unset;

                >span {
                    flex-shrink: 0;
                    width: 217px;
                }
            }

            input {
                width: 171px;
            }
        }

        >label {
            &:has(textarea) {
                flex-direction: row;
                justify-content: space-between;
            }

            >span {
                &:first-of-type {
                    &:not(:has(textarea)) {
                        flex-shrink: 0;
                        width: 217px;
                    }
                }
            }

            textarea {
                width: 382px;
            }
        }

        .wpcf7-acceptance {
            label {
                gap: 9px;
    
                &::before,
                &::after {
                    scale: 1.2;
                }
            }
        }

        .mandarin-btn {
            height: 54px;
        }
    }
}

#confirm {
    >p {
        font-size: 24px;
    }

    >div {
        font-size: 18px;
        width: 660px;
        padding: 80px 40px;
    }

    dl {
        &:last-of-type {
            display: flex;

            dt {
                flex-shrink: 0;
                width: 303px;
            }
        }

        dt {
            width: 303px;
        }
    }

    .mandarin-btn {
        height: 54px;
    }
}

#thanks {
    >div {
        font-size: 18px;
        width: 660px;
        padding: 80px 40px;
    }
}