@charset "utf-8";



/*  Modules menu
*/

.childcare-menu {
    margin: 10em 0 3em;
    padding-bottom: 3em;
    background-color: var(--bg-color-childcare-oragne);
}

.menu-title-image img {
    margin-top: -3em;
}

.menu-top-link-box .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-top-link-box {
    margin: 3em 0 10em;
}

.menu-top-link {
    text-align: center;
    margin: 0 1em;
    padding: 1em 2em;
    position: relative;
    width: fit-content;
    background-color: var(--color-white);
    border: 2px var(--color-dark-glay) solid;

    font-size: 1.6em;
}

.menu-top-link .bg {
    letter-spacing: 1px;
}

.menu-top-link:first-child .bg {
    background: var(--bgcolor-half-red);
}

.menu-top-link:last-child .bg {
    background: var(--bgcolor-half-blue);
}

.menu-top-link img {
    position: absolute;
    top: 0.5em;
    right: 1em;
}



.menu-body {
    padding: 0;
    border: 2px var(--color-dark-glay) solid;
    background-color: var(--color-white);
}

.menu-body-inner {
    width: 70%;
    margin: 3em auto;
}

.menu-body-head {
    margin: -1.5em auto 0 auto;
    padding: 1em 6em;
    letter-spacing: 3px;
    width: fit-content;
    font-size: 1.4em;
    background: url(../images/childcare/h09.png) center center no-repeat transparent;
}

.menu-body-title {
    font-size: 1.2em;
    letter-spacing: 2px;
}

.menu-body-text {
    font-size: 0.9em;
    padding-left: 1.5em;
    line-height: 2.4em;
}

.menu-body-description {
    font-size: 0.95em;
    line-height: 2.4em;
}




.menu-body-inner .wp-block-group__inner-container {
    position: relative;
}

.menu-body-image {
    position: absolute;
    top: 10%;
    right: 0;
}



/*  Modules  contract
*/

.contract {
    margin: 5em 0;
}

.contract-list > .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    align-items: top;

    position: relative;
    padding-top: 20px;
}

.contract-one {
    max-width: 400px;
    width: 29.333%;
    margin: 1em 2%;
    border: 3px var(--color-dark-glay) solid;
    border-radius: 1em;
}

.contract-one > .wp-block-group__inner-container{
    position: relative;
    padding: 3em 2em 4em;
}

.contract-one-title {
    min-height: 68px;
    margin-bottom: 2em;
}

.contract-one-title span.bg {
    display: inline;
    font-size: 1.2em;
    color: var(--color-dark-glay);
    background: var(--bgcolor-half-green);
}

.contract-one-text {
    line-height: 2em;
    font-size: 0.9em;
    color: var(--color-dark-glay);
}

.contract-one-image-1 {
    position: absolute;
    right: 20%;
    bottom: -3.6em;
    margin: 0;
}



/*  Modules childcare contact
*/

.childcare-contact > .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(var(--color-white) 0% 4.999%, var(--bg-color-primary) 5% 90%, var(--color-white) 90.001% 100%);
}

.childcare-contact-half:first-child {
    width: 45%;
    min-width: 556px;
    text-align: right;
}

.childcare-contact-half:last-child {
    width: 45%;
    padding-bottom: 1em;
    text-align: center;
}

.childcare-contact-telmsg,
.childcare-contact-telnumber,
.childcare-contact-openhours,
.childcare-contact-message {
    margin: 0.1em 0;
    line-height: 1em;
}

.childcare-contact-telmsg {
    font-weight: bold;
    font-size: 1.5em;
    color: var(--color-dark-glay);
}

.childcare-contact-telnumber {
    font-weight: bold;
    font-size: 4em;
    color: var(--color-white);
}

.childcare-contact-openhours {
    color: var(--color-dark-glay);
}

.childcare-contact-message {
    margin: 1em 0;
    font-weight: bold;
    font-size: 1.5em;
    color: var(--color-dark-glay);
}



.childcare-contact:last-child > .wp-block-group__inner-container {
    background: linear-gradient(var(--color-white) 0% 4.999%, var(--bg-color-primary) 5% 90%, var(--bg-color-primary) 90.001% 100%);
}



/*  Modules establish
*/

.establish {
    margin: 6em 0;
}

.establish-new,
.establish-review {
    text-align: center;
}

.establish-title-sub {
    margin: 0;
    font-weight: bold;
    font-size: 1.3em;
    color: var(--font-color-primary);
}

.establish-new-title {
    margin: 3em auto 1em;
    width: fit-content;
    position: relative;
    background: var(--bgcolor-half-red);
}

.establish-new-title img {
    position: absolute;
    top: -1em;
    left: -2em;
}

.establisih-new-body > .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.establisih-one {
    position: relative;
    margin: 2%;
    width: 150px;
    height: 150px;
    border: 2px var(--color-dark-glay) solid;
    border-radius: 50%;
    background-color: var(--color-white);

    display: flex;
    justify-content: center;
    align-items: center;
}

.establisih-one:nth-child(n - 8) {
    margin-bottom: 3.5%;
}

.establisih-one:nth-child(n + 8) {
    margin-top: 3.5%;
}

.establisih-one::after {
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2.5em;

    position: absolute;
    top: 0;
    bottom: 0;
    right: -0.68em;
    width: 1em;
    height: 1em;
    margin: auto;
}


.establisih-one:last-child {
    border: none;
    border-radius: 0;
    width: 331px;
    height: 138px;
    font-size: 1.5em;
}

.establish-new .establisih-one:last-child {
    background: url(../images/childcare/h18.png) center center no-repeat transparent;
    background-size: contain;
}

.establisih-one.autoline-start::after,
.establisih-one:last-child::after {
    display: none;
}



.establish-review-title {
    margin: 3em auto 1em;
    width: fit-content;
    position: relative;
    background: var(--bgcolor-half-blue);
}

.establish-review-title img {
    position: absolute;
    top: -1em;
    left: -2em;
}

.establish-review .establisih-one:last-child {
    background: url(../images/childcare/h19.png) center center no-repeat transparent;
    background-size: contain;
}



/*  Modules nursery school
*/

.nursery-school {
    margin: 12em 0;
    text-align: center;
}

.nursery-school .link {
    position: relative;
    padding: 2em 10em;
    background-color: var(--bg-color-primary);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5em;
}

.nursery-school .text {
    width: 100%;
    margin: 0.2em auto;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--color-white);
}



.nursery-school .link::before {
    content: "";

    position: absolute;
    top: -14px;
    right: calc(5% - 5px);
    bottom: 0;
    width: 20px;
    height: 2px;
    margin: auto;
    background-color: var(--color-white);
    transform: rotate(45deg);
}

.nursery-school .link::after {
    content: "";

    position: absolute;
    top: 0;
    right: 5%;
    bottom: 0;
    width: 13%;
    height: 2px;
    margin: auto;
    background-color: var(--color-white);
}



/*  pc x-small : pc small ((1024 + 1366) / 2)
*/

@media screen and (max-width: 1195px) {
    /*  contract
    */
    .contract-one > .wp-block-group__inner-container {
        position: relative;
        padding: 3em 1em 4em;
    }

    .contract-one-image-1 {
        bottom: -7.2em;
    }

    .childcare-contact-half:last-child {
        padding-right: 1%;
    }

    .childcare-contact-telnumber {
        font-size: 3em;
    }
}



/*  new iPad portrate : pc x-small ((810px + 1024px) / 2)
*/
@media screen and (max-width: 917px) {
    /*  menu
    */
    .menu-body-image {
        right: -20%;
    }

    /*  contract
    */
    .contract-one-image-1 {
        bottom: -11.2em;
    }

    /*  contact
    */
    .childcare-contact > .wp-block-group__inner-container {
        justify-content: space-evenly;
        background: var(--bg-color-primary);
        padding: 1em 0;
    }

    .childcare-contact-half:first-child {
        width: 48%;
        min-width: initial;
    }

    .childcare-contact-half:first-child .childcare-footer-image {
        margin: 1em 0 0 0;
    }

    .childcare-contact-half:first-child img {
        object-fit: contain;
        height: 300px;
    }

    .childcare-contact-half:last-child {
        width: 48%;
        margin-right: 0;
    }

    .wp-block-buttons > .wp-block-button:last-child {
        margin-left: 1.25em;
    }

}



/*  iPhone 12 pro Max : iPad portrate ((428px + 768px) / 2)
*/

@media screen and (max-width: 598px) {
    /*  menu
    */
    .childcare-menu {
        padding-bottom: 2em;
        margin-bottom: 0;
    }

    .menu-title-image img {
        width: 80px;
        height: 45px;
        margin-top: -1.5em;
    }

    .menu-title-sub-text {
        font-size: var(--font-size-subtitle-nano);
    }

    .menu-top-link-box {
        margin: 1.5em auto 4em;
    }

    .menu-top-link-box .wp-block-group__inner-container {
        justify-content: space-evenly;
    }

    .menu-top-link {
        margin: 0;
        padding: 25px 40px;

        font-weight: bold;
        font-size: 1em;
    }

    .menu-top-link img {
        width: 22px;
        height: 22px;
    }

    .menu-body  {
        margin-top: 4em;
    }

    .menu-body-head {
        padding: 0.7em 0;
        width: 90%;
        background-size: contain;

        letter-spacing: 1px;
        font-size: var(--font-size-body-nano);
    }

    .menu-body-inner {
        width: 100%;
        margin: 0;
        padding: 0.5em 2em;
    }

    .menu-body-title {
        width: fit-content;

        background:
            linear-gradient(to right, #fff 0% 2.999%, transparent 3% 100%),
            linear-gradient(to bottom, transparent 0% 49.999%, #fcd13e 50% 100%);

        letter-spacing: 1px;
        font-size: var(--font-size-body);
    }

    .menu-body-text {
        margin-bottom: 2em;
        padding: 0;
        font-size: var(--font-size-body-micro);
    }

    .menu-body-description {
        font-size: var(--font-size-body-micro);
    }

    .menu-body-image {
        right: -5%;
        top: 55%;
    }

    .menu-body-image img {
        width: 60px;
        height: 82px;
    }

    /*  contract
    */
    .contract {
        margin: 2em auto;
    }

    .contract-title-image img {
        object-fit: contain;
        width: 190px;
        height: 50px;
    }

    .contract-list > .wp-block-group__inner-container {
        flex-direction: column;
    }

    .contract-one {
        width: 90%;
        max-width: initial;
        margin: 1em 5%;
    }

    .contract-one-title {
        letter-spacing: 3px;
        font-size: var(--font-size-main);
    }

    .contract-one-title span.bg {
        font-size: var(--font-size-subtitle-micro);
    }

    .contract-one-text {
        margin: 0.5em;
        line-height: 2.4em;
    }

    .contract-one:last-child {
        padding-bottom: 5em;
    }

    .contract-one-image-1 {
        bottom: -5em;
    }

    /*  childcare contact
    */
    .childcare-contact > .wp-block-group__inner-container {
        display: block;
        position: relative;
        padding: 2em 0;
        height: 236px;
    }

    .childcare-contact-half:first-child {
        position: absolute;
        top: 0;
        left: 2%;
        right: auto;
        bottom: 0;
        width: 42%;
        height: 42%;
        margin: auto;
        padding: 0;
    }

    .childcare-contact-half:first-child img {
        height: auto;
    }

    .childcare-contact-half:last-child {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: fit-content;
        height: fit-content;
        margin: auto;
        padding: 0;
    }

    .childcare-contact-telmsg {
        font-size: var(--font-size-main);
    }

    .childcare-contact-telnumber {
        font-size: var(--font-size-main-big);
    }

    .childcare-contact-openhours {
        font-size: var(--font-size-body-nano);
    }

    .childcare-contact-message {
        margin: 2.5em 2% 2.5em 44%;
        letter-spacing: 0;
        line-height: 1.6em;
        font-size: var(--font-size-main);
    }

    .contact-button .wp-block-button__link {
        font-size: var(--font-size-body-big);
    }

    /*  establish
    */
    .establish-title-sub {
        font-size: var(--font-size-subtitle-nano);
    }

    .establish-new-title img,
    .establish-review-title img {
        top: -0.7em;
        left: -1.4em;
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .establish-new-title,
    .establish-review-title {
        font-weight: bold;
        font-size: var(--font-size-subtitle-nano);
    }

    .establish-title-main-image {
        margin: auto 10%;
    }

    .establish-title-main-image img {
        object-fit: contain;
    }

    .autoline .autoline-parent canvas {
        display: none;
    }

    .establisih-new-body > .wp-block-group__inner-container {
        font-weight: bold;
        position: relative;
    }

    .establisih-new-body > .wp-block-group__inner-container::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 13%;
        height: 98%;

        background:
            linear-gradient(30deg, #fff 0% 30px, transparent 30px 100%),
            linear-gradient(330deg, #fff 0% 30px, transparent 30px 100%),
            linear-gradient(to bottom, #e4f7ff 30%, #e8f2d2 60%);

        background-position: bottom left, bottom right, center;
    }

    .establisih-one {
        margin: 0.5em auto 0.5em 10%;
        padding: 0;
        width: 100%;
        height: 5em;
        border: 2px var(--color-bright-silver) solid;
        border-radius: 1em;
        box-shadow: -3px 0 3px var(--color-bright-silver2);
        text-align: center;
    }

    .establisih-one:last-child {
        box-shadow: none;
        font-size: 1em;
    }

    .establisih-one::after {
        display: none;
    }

    .establish-new .establisih-one:last-child {
        height: 95px;
        background: url(../images/childcare/red@2x.png) center center no-repeat transparent;
        background-size: contain;
    }

    .establish-review .establisih-one:last-child {
        height: 95px;
        background: url(../images/childcare/blue@2x.png) center center no-repeat transparent;
        background-size: contain;
    }



    /*  nursery school
    */
    .nursery-school {
        margin: 7em auto;
    }

    .nursery-school .link {
        padding: 0.8em 0;
        width: 90%;
        margin: auto;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .nursery-school .link img {
        width: fit-content;
        height: 10px;
        object-fit: contain;
    }

    .nursery-school .link::before {
        right: 10%;
        top: -8px;
        width: 10px;
        height: 1px;
    }

    .nursery-school .link::after {
        right: 10%;
        height: 1px;
    }

    .nursery-school .text {
        width: 100%;
        margin: 0;
        font-size: 15px;
    }

    .site-footer {
        margin-top: -1px;
    }
}