@charset "utf-8";

#pagetitle {
    .pagetitle {
        h1 {
            .obj {
                right:-110px;
                top:-15px;
            }
        }
    }
}

#childcare {
    .wrap {
        .contents {
            max-width:1000px;
            h2 {
                margin-bottom:2.25em;
            }
            & > p {
                font-size:2.0rem;
                font-weight:600;
                text-align:center;
                margin-bottom:4em;
                font-family: "dnp-shuei-mgothic-std", sans-serif;
            }
            .contents_inner {
                display:grid;
                grid-template-columns:35% 1fr 35%;
                .img_box {
                    display:grid;
                    align-content:start;
                    grid-row-gap:45px;
                    &:last-child {
                        padding-top:120px;
                    }
                    dl {
                        font-size:1.4rem;
                        dt {
                            font-size:1.6rem;
                            color:var(--color_main);
                            font-weight:600;
                            line-height:1.6;
                            padding:1em 0 .2em;
                        }
                        dd {
                            line-height:1.6;
                            font-weight:500;
                        }
                    }
                }
                .timeline {
                    display:grid;
                    align-content:start;
                    justify-items:center;
                    grid-row-gap:170px;
                    padding-top:60px;
                    dl {
                        position:relative;
                        dt {
                            color:var(--color_main);
                            font-size:3.0rem;
                            font-weight:600;
                            font-family: "dnp-shuei-mgothic-std", sans-serif;
                            letter-spacing:.1em;
                            padding:.1em 0;
                        }
                        dd {
                            position:absolute;
                            white-space:nowrap;
                            font-size:1.7rem;
                            font-weight:600;
                            line-height:1.35;
                            font-family: "dnp-shuei-mgothic-std", sans-serif;
                        }
                    }
                    & > dl {
                        &:not(:last-child) {
                            &::before {
                                content:'';
                                width:3px;
                                border-radius:1.5px;
                                height:150px;
                                background-color:var(--color_sub);
                                position:absolute;
                                left:50%;
                                top:3em;
                            }
                        }
                        &:first-child {
                            & > dd {
                                &:nth-child(2) {
                                    left:50%;
                                    transform:translateX(-50%);
                                    top:-60px;
                                    font-weight:500;
                                    font-family: "Zen Kaku Gothic New", sans-serif;
                                    text-align:center;
                                }
                                &:last-child {
                                    left:calc(50% + 1em);
                                    top:6.5em;
                                }
                            }
                        }
                        &:nth-child(2) {
                            & > dd {
                                left:calc(50% + 1em);
                                top:5.5em;
                            }
                        }
                        &:nth-child(3) {
                            & > dd {
                                left:calc(50% + 1em);
                                &:nth-child(2) {
                                    top:2.75em;
                                }
                                &:last-child {
                                    left:calc(50% + 1em);
                                    top:6.5em;
                                }
                            }
                        }
                        &:nth-child(4) {
                            & > dd {
                                &:nth-child(2) {
                                    left:calc(50% + 1em);
                                    top:2.75em;
                                }
                                &:last-child {
                                    right:calc(50% + 1em);
                                    top:6.5em;
                                }
                            }
                        }
                        &:nth-child(5) {
                            & > dd {
                                &:nth-child(2) {
                                    left:calc(50% + 1em);
                                    top:2.75em;
                                }
                                &:last-child {
                                    right:calc(50% + 1em);
                                    top:6.5em;
                                }
                            }
                        }
                        &:nth-child(6) {
                            & > dd {
                                left:calc(50% + 1em);
                                &:nth-child(2) {
                                    top:4.5em;
                                }
                                &:last-child {
                                    left:calc(50% + 1em);
                                    top:8.75em;
                                }
                            }
                        }
                        &:nth-child(7) {
                            & > dd {
                                &:nth-child(2) {
                                    right:calc(50% + 1em);
                                    text-align:right;
                                    top:5.5em;
                                }
                                &:last-child {
                                    left:calc(50% + 1em);
                                    top:10em;
                                }
                            }
                        }
                        &:nth-child(8) {
                            & > dd {
                                left:calc(50% + 1em);
                                top:6.5em;
                            }
                        }
                        &:last-child {
                            text-align:center;
                            & > dt {
                                margin-bottom:.66em;
                                text-align: center;
                            }
                            & > dd {
                                position:relative;
                                letter-spacing:.08em;
                            }
                        }
                    }
                }
            }
        }
    }
}

#annual_event {
    .wrap {
        .contents {
            h2 {
                margin-bottom: 2.75em;
            }
            & > p {
                font-size:2.0rem;
                font-weight:600;
                text-align:center;
                margin-bottom:3.5em;
                font-family: "dnp-shuei-mgothic-std", sans-serif;
            }
            .contents_inner {
                background-color:#FFFFFF;
                padding:60px;
                border-radius:20px;
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-column-gap:5%;
                .item {
                    display:grid;
                    grid-row-gap:40px;
                    dl {
                        font-size:1.7rem;
                        display:grid;
                        grid-template-columns:3.5em 1fr 46%;
                        grid-column-gap:1em;
                        align-items:center;
                        padding-bottom:40px;
                        border-bottom:2px dashed var(--color_sub);
                        .month {
                            font-family: "dnp-shuei-mgothic-std", sans-serif;
                            font-size:5.3rem;
                            font-weight:600;
                            display:grid;
                            justify-items:center;
                            grid-row-gap:.1em;
                            color:var(--color_main);
                            span {
                                font-size:1.8rem;
                                font-weight:600;
                                letter-spacing:.08em;
                            }
                        }
                        dt {
                            line-height:1.75;
                            font-weight:600;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1150px){
    
    #annual_event {
        .wrap {
            .contents {
                .contents_inner {
                    padding:5.2vw;
                    .item {
                        grid-row-gap:3.47vw;
                        dl {
                            font-size:1.47vw;
                            padding-bottom:3.47vw;
                            .month {
                                font-size:4.6vw;
                                span {
                                    font-size:1.47vw;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:1060px){

    #childcare {
        .wrap {
            .contents {
                .contents_inner {
                    .img_box {
                        grid-row-gap:4.25vw;
                        &:last-child {
                            padding-top:11.3vw;
                        }
                        dl {
                            font-size:1.32vw;
                            dt {
                                font-size:1.51vw;
                            }
                        }
                    }
                    .timeline {
                        grid-row-gap:16vw;
                        padding-top:5.66vw;
                        dl {
                            dt {
                                font-size:2.8vw;
                            }
                            dd {
                                font-size:1.6vw;
                            }
                        }
                        & > dl {
                            font-size:1.51vw;
                            &:not(:last-child) {
                                &::before {
                                    height:14.15vw;
                                }
                            }
                            &:first-child {
                                & > dd {
                                    &:nth-child(2) {
                                        top:-5.66vw;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}

@media screen and (max-width:1024px){
}

@media screen and (max-width:768px){
    
    #pagetitle {
        .pagetitle {
            h1 {
                .obj {
                    right:-90px;
                }
            }
        }
    }
    
    #childcare {
        .wrap {
            .contents {
                h2 {
                    margin-bottom:2em;
                }
                & > p {
                    font-size:1.6rem;
                    margin-bottom:2em;
                }
                .contents_inner {
                    grid-template-columns:36% 1fr 36%;
                    .img_box {
                        grid-row-gap:8vw;
                        &:first-child {
                            padding-top:9vw;
                        }
                        &:last-child {
                            padding-top:22vw;
                        }
                        img {
                            display:block;
                            border-radius:6px;
                        }
                        dl {
                            font-size:1.1rem;
                            font-size:2.934vw;
                            dt {
                                font-size:1.25rem;
                                font-size:3.334vw;
                                line-height:1.35;
                                padding:.75em 0 .15em;
                            }
                            dd {
                                line-height:1.4;
                                margin-right:-.5em;
                            }
                        }
                    }
                    .timeline {
                        grid-row-gap:30vw;
                        dl {
                            position:relative;
                            dt {
                                font-size:5.647vw;
                            }
                            dd {
                                font-size:1.1rem;
                                font-size:2.934vw;
                                color:var(--color_main);
                            }
                        }
                        & > dl {
                            &:not(:last-child) {
                                &::before {
                                    height:27vw;
                                    top:7.8vw;
                                }
                            }
                            &:first-child {
                                & > dd {
                                    &:nth-child(2) {
                                        left:calc(100% + 1.5em);
                                        transform:translateX(0);
                                        top:0;
                                        font-size:1.2rem;
                                        font-size:3.2vw;
                                        color:#000000;
                                    }
                                    &:last-child {
                                        left:auto;
                                        right:calc(50% + .2em);
                                        top:18vw;
                                    }
                                }
                            }
                            &:nth-child(2) {
                                & > dd {
                                    left:calc(50% + .5em);
                                    &:nth-child(2) {
                                        top:15vw;
                                    }
                                }
                            }
                            &:nth-child(3) {
                                & > dd {
                                    left:calc(50% + .5em);
                                    &:nth-child(2) {
                                        top:8vw;
                                    }
                                    &:last-child {
                                        left:calc(50% + .5em);
                                        top:19vw;
                                    }
                                }
                            }
                            &:nth-child(4) {
                                & > dd {
                                    &:nth-child(2) {
                                        left:calc(50% + .5em);
                                        top:8vw;
                                    }
                                    &:last-child {
                                        right:calc(50% + .2em);
                                        top:19vw;
                                    }
                                }
                            }
                            &:nth-child(5) {
                                & > dd {
                                    &:nth-child(2) {
                                        left:auto;
                                        right:calc(50% + .2em);
                                        top:8vw;
                                    }
                                    &:last-child {
                                        right:calc(50% + .2em);
                                        top:19vw;
                                    }
                                }
                            }
                            &:nth-child(6) {
                                & > dd {
                                        left:calc(50% + .5em);
                                    &:nth-child(2) {
                                        top:12vw;
                                    }
                                    &:last-child {
                                        left:auto;
                                        right:calc(50% + .2em);
                                        top:27vw;
                                        text-align:right;
                                    }
                                }
                            }
                            &:nth-child(7) {
                                & > dd {
                                    &:nth-child(2) {
                                        right:calc(50% + .2em);
                                        text-align:right;
                                        top:10vw;
                                    }
                                    &:last-child {
                                        left:calc(50% + .5em);
                                        top:30vw;
                                    }
                                }
                            }
                            &:nth-child(8) {
                                & > dd {
                                    left:calc(50% + .5em);
                                    top:18vw;
                                }
                            }
                            &:last-child {
                                & > dt {
                                    margin-bottom:0;
                                }
                                & > dd {
                                    color:#000000;
                                    position:absolute;
                                    right:auto;
                                    left:calc(100% + 1.5em);
                                    transform:translateX(0);
                                    bottom:0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    #annual_event {
        .wrap {
            .contents {
                h2 {
                    margin-bottom:2em;
                }
                & > p {
                    font-size:1.6rem;
                    margin-bottom:2em;
                }
                .contents_inner {
                    padding:20px;
                    border-radius:15px;
                    grid-template-columns:1fr;
                    grid-row-gap:20px;
                    .item {
                        grid-row-gap:20px;
                        max-width:520px;
                        margin:0 auto;
                        dl {
                            font-size:1.224rem;
                            font-size:min(3.26vw,1.6rem);
                            grid-template-columns:3.3em 1fr 44%;
                            grid-column-gap:.5em;
                            padding-bottom:20px;
                            .month {
                                font-size:3.434rem;
                                min(9.16vw,4.5rem);
                                span {
                                    font-size:1.16rem;
                                    font-size:min(3.1vw,1.6rem);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}