@charset "utf-8";
/* CSS Document */

small{
    display: inline-block;
    font-size:80%;
}

#main-visual{
    height:600px;
}

#main-visual span{
    margin-top:135px;
    margin-bottom:30px;
}

#main-visual span img:nth-of-type(1){
    width:550px;
    height: auto;
    margin:0.5em auto;
    display:block;
}

#main-visual span+img{
    margin-top:50px;
}

#cloud1 img{
    width:100px;
    height:auto;
}

#cloud2 img{
    width:85px;
    height:auto;
}

#global-nav{
    position:relative;
    margin-top:0px;
}

@media screen and (max-width: 640px) {
    #global-nav{
        margin-top:-50px;
    }

    #main-visual{
        height: 500px;
    }

    #main-visual span+img{
        width:1500px;
        left: 50%;
        margin-top:0;
        margin-left: -750px; 
    }

    #main-visual span{
        position:relative;
        z-index:10;
        display:block;
        text-align:center;
        font-size:100%;
        margin:150px 0 30px ;
    }

    #main-visual span img:nth-of-type(1){
        width:400px;
        margin:0.5em auto;
    }

    /* #main-visual span img:nth-of-type(1){
        display:none;
    } */
    /* #sp_logo2{
        position:relative;
        display:block;
        z-index:10;
        margin:0.5em auto 0;
        width:150px;
        height:auto;
    } */

    #cloud1{
        position:absolute;
        z-index:1;
        top:80px;
        left:20px;
    }

    #cloud1 img{
        width:70px;
        height:auto;
    }
    
    #cloud2{display:none;}

    @keyframes translate { 
        0%  { transform:  translate(0px, 15px); } 
        15% { transform:  translate(40px, 0px);}
        30% { transform:  translate(30px, 15px);}
        45% { transform:  translate(20px, 25px);} 
        60% { transform:  translate(-50px, 15px);}
        75% { transform:  translate(-10px, 8px);} 
        85% { transform:  translate(-50px, 0px);} 
        100%{ transform:  translate(0px, 15px);} 
    } 
    @-webkit-keyframes translate { 
        0%  { transform:  translate(0px, 15px); } 
        15% { transform:  translate(40px, 0px);}
        30% { transform:  translate(30px, 15px);}
        45% { transform:  translate(20px, 25px);} 
        60% { transform:  translate(-50px, 15px);}
        75% { transform:  translate(-10px, 8px);} 
        85% { transform:  translate(-50px, 0px);} 
        100%{ transform:  translate(0px, 15px);} 
    } 
}

@media screen and (max-width: 480px) {
    #main-visual{
        height: 500px;
    }

    #main-visual span+img{
        width:1200px;
        margin-top:50px;
        margin-left: -600px; 
    }

    #main-visual span img:nth-of-type(1){
        width:90%;
    }
}

#top_message{
    width:100%;
    max-width:720px;
    display:block;
    position:relative;
    left: 50%;
    margin:0 0 0 -360px; 
    padding:0;
}

#ukiha{
    display:inline-block;
    vertical-align:middle;
    padding-top:3em;
}

#top_copy{
    position:relative;
    font-size:260%;
    display:inline-block;
    vertical-align:middle;
    font-weight:400;
    line-height:1.2;
    padding-left:1em;
    padding-bottom:0.5em;
    padding-top:0.5em;
    z-index:10;
}

#top_copy span{
    color: #ff6f00;
}

#top_copy span:nth-of-type(2){
    width: 4em;
    height: 4em;
    display: block;
    border-radius: 50%;
    position: absolute;
    bottom: -1em;
    left: -0.5em;
    border: 1px solid #ff6f00;
}

@media screen and (max-width: 900px) {
    #top_message{
        width:100%;
        max-width:570px;
        display:block;
        margin:0 0 0 -285px;
    }

    #top_copy{font-size:200%;}
    #ukiha{padding-top:2em;font-size:85%;}
}

@media screen and (max-width: 640px) {
    #top_message{
        text-align:center;
        width:100%;
        left:0;
        right:0;
        margin:0; 
    }

    #ukiha{
        display:block;
        padding:0 0 1em;
        font-size:70%;
    }

    #top_copy{
        font-size:160%;
        display:inline-block;
        vertical-align:middle;
        font-weight:300;
        line-height:1.2;
        padding-left:0;
    }

    #top_copy span:nth-of-type(2){
        width:3.5em;
        height:3.5em;
        display:block;
        border-radius:50%;
        position:absolute;
        bottom:-0.6em;
        left:-1.2em;
    }
}
@media screen and (max-width: 480px) {
    #top_copy{
        font-weight:500;
    }
}

h3{
    text-align:center;
    font-size:90%;
    vertical-align:middle;
}

h3 img{
    vertical-align:middle;
    margin:0 1em 5px;
}

#news{
    color:#5eb500;
}
#blog{
    color:#09a2dc;
}

#contents dt{
    text-align:center;
    font-size:170%;
    font-weight:normal;
}

#contents div{
    margin-top:4em;
}

#contents dt img{
    vertical-align:top;
    margin:0 20px;
}

#contents dt br{
    display:none;
}

@media screen and (max-width: 640px) {
    #contents dt{
        font-size:130%;
    }

    #contents dt span,
    #contents dt img{
        display:none;
    }

    #contents div:nth-of-type(2){
        margin-top:2em;
    }
}

#contents dl {
    position:relative;
    width:620px;
    margin:0 auto;
}

#contents dd ul{
    text-align:center;
    width:620px;
    margin:15px auto 0;
    position:relative;
}

#news  dd li{
    padding:1.5em 0;
    margin:0 2em;
    border-top:1px dotted #555;
}

#news  dd li:nth-child(n+4){
    display:none;
}

#contents dd li:nth-of-type(1) {
    border:none;
}

#contents dd li a{
    color:#555;
    border:none;
}

#news dd ul{
    background:url(../img/k12.jpg) no-repeat;
    border-radius: 20px 20px 0 0;
}

#contents div p.illust{
    position:absolute;
    bottom:0;
}

#contents div p.illust1{
    left:-56px;
}

#contents div p.illust2{
    right:-56px;
}

#blog dd ul{
    background:url(../img/k13.jpg) no-repeat;
    border-radius: 20px 20px 0 0;
}

#blog li {
    width:220px;
    margin: 40px 15px 30px;
    text-align:left;
    display:inline-block;
}

#blog li img{
    width:210px;
    height:auto;
    padding-bottom:8px;
}

#blog li p{
    text-align:left;
}

@media screen and (max-width: 750px) {
    #contents dl{
        width:510px;
    }

    #contents dd ul{
        width:510px;
    }
}

@media screen and (max-width: 640px) {
    #contents div p.illust{
        display:none;
    }

    #contents dl{
        width:100%;
    }

    #contents dd ul{
        width:100%;
    }

    #contents dd ul{
        border-radius:10px;
    }

    #contents dd li{
        font-size:90%;
        padding:1em 0;
        margin:0 1em;
        text-align:center;
    }

    #blog dd li{
        padding:2em 0 0;
    }

    #blog dd ul{
        background-size: cover;
        padding:0 0 1em;
    }

    #blog li p{
        text-align:center;
    }
}

#recruit{
    margin:0 0 1em;
    padding-top:6em;
    text-align:center;
    position:relative;
}

#recruit dt a{
    font-weight:bold;
    font-size:24px;
    display:block;
    margin-bottom:0.5em;
    padding:7em 0 1em;
    background:url(../img/kourin60.jpg);
    background-size:cover;
    border:none;
    background-position:center center;
}

#recruit dt span{
    display:inline-block;
    padding:0.5em 1em;
    background:#fff;
    border-radius:10px;
}

#recruit dd:nth-of-type(2){
    line-height:1.2;
    position:absolute;
    display:block;
    color:#fff;
    background:#ff6f00;
    border-radius:50%;
    width:5em;
    height:5em;
    padding-top:1.3em;
    right:-1em;
    top:3em;
}

@media screen and (max-width:768px){#recruit dt a{padding:6em 0 2em;}}
@media screen and (max-width:640px){
    #recruit{
        margin:1em 0 1em;
    }

    #recruit dt a{
        font-size:16px;
        padding:10em 0 5em;
        background:url(../img/kourin61.jpg);
        background-size:cover;
        background-position:center center;
    }

    #recruit dd{
        font-size:90%;
        text-align:left;
    }

    #recruit dd:nth-of-type(2){
        text-align:center;
    }
}

@media only screen and (max-width: 767px), only screen and (max-device-width: 1024px){
    #ukiha{
        font-size:65%;
    }

    #top_copy{
        font-size:155%;
    }
}

#ug{
    text-align:center;
    padding-top:2em;
}

#ug div{
    margin-top:2em;
}

#ug h4{
    font-size:1.4rem;
    font-weight: 500;
}

#ug div{
    display: flex;
    justify-content: center;
    align-items: center;
}

#ug p{
    margin-right: 30px;
}

#ug p img{
    width:180px;
    height: auto;
}

#ug ul{
    width:65%;
    display:flex;
    flex-wrap:wrap;
}

#ug li{
    font-size:24px;
    margin:0.75em 0 0.75rem 2rem;
}

#ug li img{
    margin-right:10px;
    vertical-align:middle;
}

#ug li a{
    border:none;
    border-radius:5px;
}

#ug li span{
    font-size:50%;
    display:inline-block;
    margin-bottom:-0.1em;
    margin-right:0.2em;
}

@media screen and (max-width:640px){
    #ug h4{
        font-size:1.2rem;
    }

    #ug div{
        display: block;
        margin-top: 1rem;
    }

    #ug p{
        margin-right: 0;
        margin-bottom: 1rem;
    }

    #ug p img{
        width:140px;
    }

    #ug ul{
        width: 100%;
        display: block;
    }

    #ug li{
        font-size:20px;
        margin:0.5em 0 ;
    }
}

#hirokawa{
    margin:8rem auto 5rem;
    width:90%;
    max-width: 800px;
    text-align: center;
    font-weight: 500;
}

#hirokawa h2{
    font-size:2.5rem;
    margin-bottom:1rem;
}

#hirokawa p{
    font-size:1.1rem;
    line-height:2;
    margin-bottom:3rem;
}

#hirokawa p:nth-of-type(1){
    margin-bottom:1rem;
}

#hirokawa p:nth-of-type(2){
    font-size:0.9rem;
}

#hirokawa ul{
    display: flex;
    justify-content: space-between;
}

#hirokawa li{
    width:30%;
}

#hirokawa li img{
    width:100%;
    height: auto;
}

#preschool{
    margin:2rem auto 3rem;
    width:90%;
    max-width: 1000px;
    text-align: center;
    font-weight: 500;
}

#preschool h1{
    font-size:2rem;
    color:#ff6f00;
    border-radius: 30px;
    line-height: 1.3;
    padding:1rem 1.5rem;
    width: max-content;
    margin:0 auto 2rem;
}

#preschool p img{
    width:200px;
    margin-bottom:1rem;
}

#preschool ul{
    display: flex;
    justify-content: space-between;
    margin-bottom:2rem;
}

#preschool li{
    width:48%;
}

#preschool li img{
    width:100%;
    height: auto;
    border-radius: 15px;
}

.tab{
    display: none;
}

.tab2{
    display: none;
}

#preschool div:nth-of-type(1){
    display: flex;
    justify-content: center;
    margin:0 auto 3rem;
}

#preschool div:nth-of-type(1) h2{
    font-size:3.5rem;
    display: flex;
    flex-direction: column;
    margin-right:1rem;
}

#preschool div:nth-of-type(1) h2 span{
    font-size:40%;
}

#preschool div:nth-of-type(1) p{
    padding:1.5rem 1.7rem;
    background:#ff6f00;;
    color:#fff;
    border-radius: 50%;
}

#preschool div:nth-of-type(1) + p{
    font-size:1.1rem;
    line-height:2;
}

#preschool table:nth-of-type(1){
    width:620px;
    margin:1rem auto 3rem;
    border-radius: 15px;
    border-spacing: 0;
    border: none;
    border-top:2px solid #ff6f00;
    border-left:2px solid #ff6f00;
    font-size:1.1rem;
}

#preschool table:nth-of-type(1) tr>*{
    padding:1rem;
    border-right:2px solid  #ff6f00;
    border-bottom:2px solid #ff6f00;
    vertical-align: middle;
}

#preschool table:nth-of-type(1) small{
    display: inline-block;
    font-size:80%;
}

#preschool table:nth-of-type(1) tr:first-child>*:first-child{
    border-radius: 15px 0 0 0;
}

#preschool table:nth-of-type(1) tr:first-child>*:last-child{
    border-radius: 0 15px 0 0;
}

#preschool table:nth-of-type(1) tr:last-child>*:first-child{
    border-radius: 0 0 0 15px;
}

#preschool table:nth-of-type(1) tr:last-child>*:last-child{
    border-radius: 0 0 15px 0;
}

#preschool table:nth-of-type(1) th{
    background: #fa8830;
    color:#fff;
    border-bottom:2px solid #fff;
}

#preschool table:nth-of-type(1) tr:nth-last-of-type(1) th{
    border-bottom:2px solid #ff6f00;
}

#preschool table:nth-of-type(1) td a{
    background:#1da3fc;
    color:#fff;
    padding:0.25rem 0.75rem;
    border-radius: 15px;
    letter-spacing: -0.1rem;
    display: inline-block;
    margin:0.5rem 0;
    border:none;
}

#preschool table:nth-of-type(1) td a:hover{
    background:#1c7ad1;
}

#preschool > section{
    display: flex;
    justify-content: space-evenly;
    max-width:680px;
    margin:0 auto;
}

#preschool > section p:nth-of-type(1) img{
    width:50px;
    height: auto;
}

#preschool > section p:nth-of-type(2) img{
    width:70px;
    height: auto;
}

#preschool h3{
    font-size:2rem;
}

#preschool h3 + p{
    font-size:110%;
    text-align: center;
}

#preschool table:nth-of-type(2){
    width:620px;
    margin:1rem auto 3rem;
    border-radius: 15px;
    border-spacing: 0;
    border: none;
    border-top:2px solid #ff6f00;
    border-left:2px solid #ff6f00;
    font-size:1.1rem;
}

#preschool table:nth-of-type(2) tr > *{
    padding:1rem 0.5rem;
    border-right:2px solid #ff6f00;
    border-bottom:2px solid #ff6f00;
    vertical-align: middle;
}

#preschool table:nth-of-type(2) th{
    background: #fa8830;
    color:#fff;
    border-bottom:1px solid #fff;
}

#preschool table:nth-of-type(2) tr:nth-of-type(1) th:nth-of-type(1){
    border-radius: 15px 0 0 0;
}

#preschool table:nth-of-type(1) tr:first-child>*:first-child{
    border-radius: 15px 0 0 0;
}

#preschool table:nth-of-type(2) tr:first-child>*:last-child{
    border-radius: 0 15px 0 0;
}

#preschool table:nth-of-type(2) tr:last-child>*:first-child
{
    border-radius: 0 0 0 15px;
    border-bottom:1px dotted #ff6f00;
}

#preschool table:nth-of-type(2) tr:last-child th{
    border-bottom:1px dotted #ff6f00;
}

#preschool table:nth-of-type(2) tr:last-child>*:last-child{
    border-radius: 0 0 15px 0;
}

#preschool table:nth-of-type(2) th{
    border-right:1px dotted #ff6f00;
}

#preschool table:nth-of-type(2) + p img{
    width:300px;
    height: auto;
    margin:0 auto 0;
}

#nintei{
    text-align: center;
}

#nintei h2{
    background: #ff6f00;
    color:#fff;
    width: fit-content;
    margin:0 auto 1rem;
    padding:0.75rem 1rem;
    border-radius:15px;
    font-size:1.5rem;
}

#nintei dl{
    text-align: left;
    width:max-content;
    margin:0 auto;
}

#nintei dt{
    font-size:1.2rem;
    margin-bottom:0.5rem;
    margin-left:-1.5rem;
}

#nintei ul{
    line-height: 2;
}

#nintei ul li{
    text-align: left;
    list-style:disc;
    text-indent: -1rem;
    padding-left:0.5rem;
}

@media screen and (max-width:768px){
    .tab{
        display: inline-block;
    }

    .tab2{
        display: inline;
    }

    #preschool h1{
        font-size:2rem;
    }

    #preschool div:nth-of-type(1) h2{
        font-size:3rem;
        margin-right:1rem;
    }
    
    #preschool div:nth-of-type(1) p{
        padding:1.25rem 1.5rem;
    }
    
    #preschool div:nth-of-type(1) + p{
        font-size:1rem;
    }

    #preschool h3{
        font-size:1.8rem;
    }
    
    #preschool h3 + p{
        font-size:100%;
    }

    #hirokawa{
        margin:7rem auto 3rem;
    }

    #nintei h2{
        border-radius:10px;
        font-size:1.25rem;
        margin-bottom:1.5rem;
    }

    #nintei dl{
        width:70%;
        font-size:0.9rem;
    }
}

@media screen and (max-width:750px){
    #preschool table:nth-of-type(1){
        width:510px;
    }
}

@media screen and (max-width:640px){
    #preschool table:nth-of-type(1){
        width:100%;
    }

    #preschool div:nth-of-type(1){
        flex-direction: column;
        align-items: center;
    }

    #preschool div:nth-of-type(1) h2{
        margin-right:0;
    }

    #preschool div:nth-of-type(1) p{
        width:max-content;
        padding:1.5rem 1.7rem;
        border-radius: 50%;
        margin:1rem 0 0;
    }

    #preschool div:nth-of-type(1) + p{
        text-align: justify;
    }
    #preschool div:nth-of-type(1) + p br{
        display: none;
    }

    #preschool table:nth-of-type(2){
        width:100%;
    }

    #preschool h1{
        font-size:1.8rem;
    }

    #preschool div:nth-of-type(1) h2{
        font-size:2.5rem;
    }

    #preschool div:nth-of-type(1) + p{
        font-size:1rem;
        line-height:2;
    }

    #preschool h1 span span{
        font-size:60%;
    }

    #preschool table:nth-of-type(1){
            font-size:1rem;
    }

    #preschool > section{
        flex-direction: column;
    }

    #preschool > section section{
        padding:1rem 0;
    }

    #preschool table:nth-of-type(2){
            font-size:0.6rem;
    }

    #preschool table:nth-of-type(1) tr>*{
        padding:0.25rem;
    }

    #preschool table:nth-of-type(2) + p img{
        width:220px;
    }
}

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

    .pc2{
        display: none;
    }

    .tab2{
        display: none;
    }

    #preschool{
        margin:1rem auto 0;
    }
    
    #preschool div:nth-of-type(1){
        margin:0 auto 1rem;
    }

    #preschool div:nth-of-type(1) p{
        font-size:90%;
        padding:1rem 1.25rem;
    }
    #preschool h3{
        font-size:1.25rem;
    }

    #preschool table:nth-of-type(1){
            margin:1rem auto 2rem;
    }

    #preschool table:nth-of-type(2){
        margin:1rem auto ;
    }

    #preschool > section p:nth-of-type(1) img{
        width:40px;
    }

    #preschool > section section{
        padding:1rem 0 0;
    }

    #preschool section p img{
        margin-bottom:0;
    }

    #recruit{
        padding-top:3em;
    }

    #recruit dd:nth-of-type(2){
        top:1em;
    }

    #preschool h1{
        font-size:1.5rem;
        padding:0;
        line-height: 1.7;
        margin-bottom:1rem;
    }

    #preschool p img{
        width:170px;
    }

    #preschool div:nth-of-type(1) h2{
        font-size:2.25rem;
    }

    #preschool div:nth-of-type(1) + p{
        font-size:0.9rem;
        line-height: 1.7;
    }

    #preschool table:nth-of-type(1){
            font-size:0.9rem;
    }

    #preschool > p:nth-of-type(2){
        text-align: justify;
        font-size:90%;
        line-height: 2;
    }

    #preschool > p br{
        display: none;
    }

    #preschool ul{
        margin-bottom:1rem;
    }

    #hirokawa{
        margin:5rem auto 2rem;
    }

    #hirokawa h2{
        font-size:1.8rem;
    }

    #hirokawa p{
        text-align: justify;
        margin-bottom:1.5rem;
    }

    #hirokawa p:nth-of-type(1){
        font-size:90%;
    }

    #hirokawa p:nth-of-type(2){
        font-size:70%;
    }

    #hirokawa p br{
        display: none;
    }

        #nintei h2{
        font-size:1.1rem;
    }
}