/*
Theme Name:みどり幼稚園  ページ用CSS
*/

@charset "UTF-8";
.page_head{
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.3em;
    text-align: center;
    padding: 50px 0;
}
.page_head .en{
    font-size: 1.2rem;
    display: block;
    line-height: 1.3em;
    margin-top: 10px;
    font-weight: normal;
}
h3{
    margin-bottom: 20px;
}
h3 span{
    background: #a2deac;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 10px 20px;
}
/*
  concept
===========================================================================================================*/
#concept .page_head{
    background: url("../images/illust/title_bg01.png") no-repeat center;
    background-size: 90% auto;
}
#concept01{
    padding: 30px 0;
    background: url("../images/bg.png") repeat;
    background-size: 1.5% auto;
}
#concept01 dl{
    margin: 30px 0;
}
#concept01 dt{
    margin-bottom: 20px;
}
#concept01 dt span{
    display: block;
    background: #fff;
    padding: 0 5px;
    margin: 0 auto 5px;
    font-weight: bold;
    width: fit-content;
}
#concept02 figure{
    margin:10px 0; 
}
#concept02 dt{
    font-size: 1.6rem;
    font-weight: bold;
}
#concept02 .flex_child{
    margin: 50px 0;
}
#overview{
    padding: 30px 0;
    background: url("../images/bg.png") repeat;
    background-size: 1.5% auto;
    position: relative;
}
#overview h3{
    margin-top: -50px;
}
#overview h4 span{
    background: #fff;
    padding: 10px 20px;
    font-weight: bold;
}
#overview .circle{
    color: #a2deac;
    font-size: 2rem;
    margin-right: 10px;
}
#overview dt::after{
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: url("../images/line.png") left center no-repeat;
    background-size: contain;
    margin-left: 30px;
    margin-bottom: 5px;
}
#overview dd{
    margin-left: 30px;
}
#overview figure {
    padding: 30px 0 70px;
    text-align: center;
    background-image: url("../images/illust/butterfly.png"),url("../images/illust/leaf.png");
    background-position: top right,bottom left;
    background-repeat: no-repeat,no-repeat;
    background-size: 15% auto,30% auto;
}
#overview figure img{
    width: 80%;
}
#access{
    padding: 30px 0;
}
#access .map{
    aspect-ratio: 3 / 2;
    width: 100% ;
    height: 100% ;
    margin-bottom: 20px;
}
#access .map iframe{
    width: 100% ;
    height: 100% ;
}
#access li:first-child::after{
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: url("../images/line.png") left center no-repeat;
    background-size: contain;
    margin: 5px 0;
}
#facility{
    background: url("../images/bg.png") repeat;
    background-size: 1.5% auto;
    padding: 30px 0;
}
.slider{
    margin-top: 30px;
}
.slick-list img {
  width: 100%;
}
.slick-dots{
    text-align: left !important;
}
.slick-dots li{
    margin: 0 !important;
}
.slick-dots .slick-active button:before{
    color: #a2deac !important;
}
/*
  approach
===========================================================================================================*/
#approach .page_head{
    background: url("../images/illust/title_bg02.png") no-repeat center;
    background-size: 90% auto;
}
#approach_text h3{
    text-align: center;
}
#approach_text dt{
    text-align: center;
    margin-bottom: 20px;
}
#approach_text #text01 dt span{
    background: url("../images/bg.png") repeat;
    background-size: 1.5% auto;
    display: block;
    padding: 0 5px;
    margin: 0 auto 5px;
    font-weight: bold;
    width: fit-content;
}
#approach_text dt span.br,#approach_text #text01 dt .pc_br{
    display: block;
    background: none;
}
#approach_text #text02{
    margin-top: 50px;
}
#approach_text #text02 dt{
    font-size: 1.6rem;
    font-weight: bold;
}
#approach_text #text02 li{
    width: 60%;
}
#approach_text #text02 li:nth-child(2){
    margin-left: auto;
}
#days{
    background: url("../images/bg.png") repeat;
    background-size: 1.5% auto;
    margin: 70px 0;
    padding: 70px 0 30px;
}
#days figure{
    display: none;
}
#days h3{
    margin-top: -85px;
}
#days li{
    margin-bottom: 20px;
}
#days ul dl{
    display: flex;
    align-items: center;
}
#days ul dl dt{
    width: 15%;
    max-width: 78px;
    margin-right: 3%;
}
#days ul dl dd{
    width: 82%;
    position: relative;
}
#days ul dl dd li{
    position: relative;
    margin: 0;
}
#days ul dl dd span.or{
    color: #f2cb76;
    width: 1em;
}
#days ul dl dd .cat{
    background: #f2cb76;
    color: #fff;
    padding: 0 5px;
    position: absolute;
    right: 0;
    top: 5px;
    font-size: 1.2rem;
    line-height: 1.5em; 
}
#schedule{
    background: url("../images/approach/line.png") left 7% top repeat-y;
    background-size: 1px auto;
}
#event{
    margin:50px auto;
}
#event .inner{
    background: url("../images/illust/sun2.png") right bottom 20px no-repeat;
    background-size: 50% auto;
}
#event h3{
    text-align: center;
    margin-bottom: 30px;
}
#event_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#event_wrap dl{
    width: 47%;
    margin-bottom: 30px;
}
#event_wrap dt{
    display: flex;
    justify-content: space-between;
    font-size: 2rem;
    font-weight: bold;
    border-bottom: 1px solid #b5b5b6;
    margin-bottom: 10px;
}
#event_wrap dt .month{
    font-size: 1.4rem;
}
#event_wrap dd::before{
    content: "-";
    color: #b5b5b6;
}
#event_wrap dt .en_month{
    width: 30px;
    display: flex;
    align-items: center;
}
#event_end dt{
    font-size: 1.4rem;
    border: none;
    margin: 0;
}
/*
  guidance
===========================================================================================================*/
#guidance .page_head{
    background: url("../images/illust/title_bg01.png") no-repeat center;
    background-size: 90% auto;
}
#guidance h3{
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
}
#guidance .inner{
    margin-top: 50px;
}
#guidance #guidance01{
    background-image : linear-gradient(to right, #a2deac 4px, transparent 4px),linear-gradient(to bottom, #a2deac 4px, transparent 4px),linear-gradient(to left, #a2deac 4px, transparent 4px),linear-gradient(to top, #a2deac 4px, transparent 4px);
    background-size: 10px 2px,2px 10px,10px 2px,2px 10px;
    background-repeat: repeat-x,repeat-y,repeat-x,repeat-y;
    background-position:left top,right top,right bottom,left bottom;
    border-radius: 15px;
    padding: 50px 20px 30px;
    position: relative;
}
#guidance01 h3{
    width: 80%;
    position: absolute;
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    background: #a2deac;
    color: #FFF;
    box-sizing: border-box;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
}
#guidance01 h3::before, #guidance01 h3::after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}
#guidance01 h3::before {
    top: 0;
    left: 0;
    border-width: 25px 0px 25px 15px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
}

#guidance01 h3::after {
    top: 0;
    right: 0;
    border-width: 25px 15px 25px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}
#guidance01 dl dt{
    color: #d15a2c;
}
#guidance01 dl dt a{
    background: #d15a2c;
    color: #fff;
    padding: 3px 5px;
}
#guidance thead,#guidance02 dl dt{
    background: #a2deac;
    text-align: center;
}
#guidance thead th,#guidance02 dl dt{
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 1.6rem;
    font-weight: bold;
}
#guidance table{
    width: 100%;
    margin: 20px 0;
}
#guidance tbody th{
    background: #dff4e3;
    width: 50%;
    padding: 5px 10px;
    box-sizing: border-box;
    border-collapse: collapse;
    border: 2px solid #fff;
    vertical-align: middle;
}
#guidance tbody td,#guidance02 dl dd{
    background: #eff9f1;
    padding: 5px 10px;
    box-sizing: border-box;
    border-collapse: collapse;
    border: 2px solid #fff;
}
#guidance02 dl dd{
    text-align: center;
}
#guidance .no_head th{
    background: #a2deac;
}
#guidance .col3 tbody th{
    width: auto;
}
#guidance .col3 tbody td{
    background: #dff4e3;
}
#guidance .col3 tbody td+ td{
    background: #eff9f1;
}
#guidance_contact > dl > dt{
    margin-bottom: 20px;
}
#guidance_contact dd dl{
    border: 4px solid #cbebdc;
    padding: 20px;
    text-align: center;
}
/*
  privacy
===========================================================================================================*/
#privacy .page_head{
    background: url("../images/illust/title_bg02.png") no-repeat center left;
    background-size: 90% auto;
}
#privacy .caption{
    color: #a2deac;
    font-size: 1.6rem;
    font-weight: bold;
}
#privacy .inner > dl{
    margin-bottom: 30px;
}
#privacy .inner > dl > dd{
    margin-bottom: 30px;
}
#privacy .inner > dl > dd ul,#privacy .inner > dl > dd dl{
    background: #f6fcf7;
    padding: 20px;
    
}
.tel{
    background: #fffed9;
    padding: 20px;
}
.tel dt{
    font-weight: bold;
    text-align: center;
}
#privacy_wrap .tel dd{
    font-size: 1.2rem;
    text-align: center;
    margin: 0;
}
.tel dd span{
    color: #a2deac;
    font-family: "gill-sans-nova", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 30px;
    display: block;
    text-align: center;
}
#privacy .inner .tel dd{
    margin: 0;
}
/*
  contact
===========================================================================================================*/
#contact .page_head{
    background: url("../images/illust/title_bg01.png") no-repeat center;
    background-size: 90% auto;
}
#contact .text{
    text-align: center;
    margin: 30px 0 50px;
}
#contact_form{
    min-height: 50vh;
}
#contact dl{
    margin-bottom: 30px;
}
#contact dl p{
    margin-bottom: 10px;
}
#contact #post_num{
    width: 50%;
    display: flex;
    line-height: 40px;
}
#contact #post_num input{
    margin-left: 10px;
    width: 100%;
    border: 1px solid #b5b6b6;
    border-radius: 5px;
    padding: 0 10px;
}
#contact input[type="text"],#contact input[type="email"],#contact select{
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #b5b6b6;
    border-radius: 5px;
    line-height: 40px;
}
#contact .select_list{
    position: relative;
}
#contact .select_list::after{
    position: absolute;
    right: 15px;
    top: 18px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}
#contact textarea{
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #b5b6b6;
    border-radius: 5px;

}
#submit input{
    background: #a2deac;
    text-align: center;
    color: #fff;
    font-weight: bold;
    width: 100%;
    border-radius: 30px;
    padding: 10px 0;
    
}
.mw_wp_form_complete{
    text-align: center;
    margin-top: 100px;
}
/*
  news
===========================================================================================================*/
#news .page_head{
    background: url("../images/illust/title_bg02.png") no-repeat center;
    background-size: 90% auto;
}
.single_wrap{
    border-bottom: 1px dashed #bfbfbf;
    padding: 0 0 30px;
}
#news input[type="password"]{
    border: 1px solid #b5b6b6;
    padding: 0 10px;
}
#news input[type="submit"]{
    background: #a2deac;
    text-align: center;
    color: #fff;
    padding: 0 20px;
    margin: 20px 0;
}
#news form p{
    margin-bottom: 40px;
}
.archive .single_wrap{
    margin-bottom: 30px;
}
.single_wrap figure{
    margin-bottom: 30px;
}
.single_wrap ul{
    display: flex;
} 
.single_wrap ul li{
    font-weight: bold;
}
.single_wrap ul li:last-child{
    background: #efc144;
    color: #fff;
    text-align: center;
    width: fit-content;
    font-size: 1.2rem;
    line-height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    padding: 0 10px;
}
.single_wrap dt{
    font-size: 1.6rem;
    font-weight: bold;
    padding: 10px 0;
    margin-bottom: 10px;
}
.sidebar{
    display: flex;
    margin-top: 50px;
    justify-content: space-between;
}
.sidebar .widget{
    width: 48%;
}
.widget_title{
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.3em;
    border-bottom: 1px solid #b5b5b6;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.widget_title span{
    font-size: 1rem;
    margin-left: 10px;
    background: none;
    display: inline-block;
    color: #a2deac;
    padding: 0;
}
.pagenation {
    display: flex;
    margin-top: 30px;
}
.pagenation li{
    line-height: 20px;
    width: 50%;
}
.pagenation li img{
    width: 20px;
    margin: 0 5px;
}
.pagenation li.next{
    text-align: right;
}

.news_list li{
    margin-bottom: 15px;
}
.news_list li dl{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
}
.news_list li dt{
    background: #ffe1ff;
    color: #e11f7f;
    text-align: center;
    width: 20%;
    border-radius: 5px;
    font-size: 1.2rem;
    line-height: 1.5em;
}
.news_list li dd{
    line-height: 1em;
}
.news_list li dt+dd{
    width: 25%;
    border-right: 1px solid #333;
}
.news_list li dd+dd{
    width: 50%;
}
.sidebar #category li:last-child a{
    display: flex;
    align-items: center;
}
.sidebar li img{
    width: 20.5px;
    height: 20.5px;
    margin-left: 10px;
}

/*
  responsive
===========================================================================================================*/
/*
  tb
===================================================================================================*/

@media screen and (min-width: 768px) {
    /*
      concept
    ===========================================================================================================*/
    #concept .page_head{
        background-position: center;
        background-size: 70% auto;
    }
    #concept .flex_wrapPC{
        display: flex;
    }
    #concept01{
        background-size: 0.8% auto;
        margin-top: -30px;
        position: relative;
        z-index: 0;
    }
    #concept01 .flex_wrapPC{
        justify-content: space-around;
        padding: 40px 0;
        margin: 0 auto;
        background: url("../images/concept/bg.png") bottom right no-repeat;
        background-size: 25% auto;
    }
    #concept01 dl{
        margin: 0;
        min-width: 550px;
        max-width: 846px;
    }
    #concept01 dt{
        font-size: 1.8rem;
        margin-bottom: 50px;
    }
    #concept01 dd{
        width: 70%;
        margin: 0 auto;
    }
    #concept01 dt span{
        padding: 0 10px;
    }
    #concept01 figure{
        max-width: 333px;
    }
    #concept01 .left{
        display: flex;
        align-items: flex-end;
        background: url("../images/illust/flower.png") center top no-repeat;
        background-size: 70% auto;
    }
    #concept01 .right{
        margin-top: 5%;
    }
    #concept02{
        padding: 50px 0;
    }
    #concept02 .flex_wrapPC{
        max-width: 1200px;
        margin: 0 auto;
        justify-content: space-between;
    }
    #concept02 .flex_wrapPC div{
        width: 46%;
    }
    #concept02 figure{
        margin:30px 0; 
    }
    #concept02 dt{
        font-size: 1.8rem;
        margin-bottom: 10px;
    }
    #concept02 div{
        margin: 50px 0;
    }

    #overview .flex_wrapPC{
        margin: 0 auto;
        flex-wrap: wrap;
        align-items: center;
    }
    #overview section{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 63%;
    }
    #overview h3{
        width: 100%;
        margin: -50px auto 50px;
    }
    #overview section div{
        width: 50%;
    }
    #overview h4{
        width: 100%;
        margin: 30px 0;
    }
    #overview dt::after{
        margin-left: 35px;
    }
    #overview dd{
        margin-left: 30px;
    }
    #overview figure {
        width: 37%;
        max-width: 438px;
        padding: 100px 0 70px 100px;
        background-position: top right 80px,bottom left ;
        background-size: 20% auto,40% auto;
    }
    #facility{
        background-size: 0.8% auto;
        padding: 30px 5%;
    }
    #facility{
        padding: 50px 0;
        margin: 100px 0;
    }
    #facility h3{
        margin-bottom: 30px;
    }
    #facility .inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #facility #facility_text{
        width: 40%;
    }
    #facility .slider{
        width: 50%;
        margin:0;
    }
    #overview{
        background-size: 0.8% auto;
        padding-bottom: 60px;
    }
    #access{
        padding: 80px 0;
    }
    #access h3{
        width: 100%;
        margin: 0 auto 30px;
    }
    #access .flex_wrapPC{
        align-items: center;
    }
    #access .map{
        width: 63%;
        max-width: 890px;
        margin-bottom: 0;
        margin-right: 50px;
    }

    /*
      approach
    ===========================================================================================================*/
    #approach .page_head{
        background-position: center;
        background-size: 70% auto;
    }
    #approach_text #text02 ul{
        display: flex;
        justify-content: center;
        gap: 0 50px;
    }
    #approach_text #text02 li{
        width: 30%;
        max-width: 296px;
    }
    #approach_text #text02 li:nth-child(2){
        margin-left: 0;
    }
    #days{
        background-size: 0.8% auto;
        margin: 70px 0;
        padding: 70px 0 30px;
    }
    #days .flex_wrapPC{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    #days h3{
        width: 100%;
        margin-top: -125px;
    }
    #days figure{
        display: block;
        width: 32%;
    }
    #days #schedule{
        width: 50%;
    }
    #days li{
        margin-bottom: 30px;
    }
    /*
      guidance
    ===========================================================================================================*/
    #guidance .page_head{
        background-position: center;
        background-size: 70% auto;
    }
    /*
      contact
    ===========================================================================================================*/
    #contact .page_head{
        background-position: center;
        background-size: 70% auto;
    }

}

@media screen and (min-width: 959px) {
    .flex_wrapPC{
        display: flex;
    }
    .page_head{
        padding: 100px 0;
        position: relative;
        z-index: 1;
    }
    .page_head .en{
        font-size: 1rem;
        margin-top: 20px;
    }
    .inner{
        max-width: 1200px;
        margin: 0 auto;
    }
    h3 span{
        font-size: 1.8rem;
        padding: 10px 20px;
    }
    /*
      concept
    ===========================================================================================================*/

    #concept .page_head{
        background-position: left 20vw bottom;
        background-size: 916px auto;
    }

/*
  approach
===========================================================================================================*/
    #approach .page_head{
        background-size: 846px auto;
    }
    #approach_text h3{
        margin-bottom: 20px;
    }
    #approach_text dt{
        margin-bottom: 40px;
    }
    #approach_text #text01 dt{
        background: url("../images/approach/bg.png") center no-repeat;
        background-size: 1100px auto;
        padding: 30px 0 0;
        font-size: 1.8rem;
    }
    #approach_text dt .pc_br{
        display: block;
        background: none;
    }
    #approach_text #text01 dt span{
        padding: 0 10px;
        margin: 0 auto 10px;
    }
    #approach_text #text01 dt span.br,#approach_text #text02 dt span.br{
        display: inline-block;
    }
    #approach_text #text01 dt span.left{
        padding-right: 0;
    }
    #approach_text #text01 dt span.right{
        padding-left: 0;
    }
    #approach_text #text01 dd{
        width: 60%;
        min-width: 800px;
        margin: 0 auto;
    }
    #approach_text #text02{
        margin-top: 80px;
    }
    #approach_text #text02 dt{
        font-size: 1.8rem;
        font-weight: bold;
    }
    #schedule{
        background-size: 1.5px auto;
    }
    #event{
        margin:80px auto;
    }
    #event .inner{
        background: url("../images/illust/sun2.png") right bottom no-repeat;
        background-size: 25% auto;
    }
    #event h3{
        margin-bottom: 50px;
    }
    #event_wrap{
        justify-content:flex-start;
        gap: 50px 2%;
    }
    #event_wrap dl{
        width: 18.4%;
        margin: 0;
    }

    /*
      guidance
    ===========================================================================================================*/
    #guidance .page_head{
        background-size: 916px auto;
    }
    #guidance .inner{
        margin-top: 80px;
    }
    #guidance01 h3{
        width: 40%;
    }
    #guidance01 dl{
        text-align: center;
    }
    #guidance table{
        margin: 40px 0;
    }
    #guidance .col3{
        margin: 40px 0 0;
    }
    #guidance tbody th{
        padding: 5px 30px 5px 10%;
    }
    #guidance tbody td,#guidance02 dl dd{
        padding: 5px 30px;
    }
    #guidance_contact > dl > dt{
        text-align: center;
    }
    #guidance_contact dd dl{
        width: 60%;
        margin: 0 auto;
    }
/*
  privacy
===========================================================================================================*/
    #privacy .page_head{
        background-position: center;
        background-size: 846px auto;
    }
    #privacy .inner > dl{
        margin-bottom: 60px;
    }
    #privacy .inner > dl > dd ul,#privacy .inner > dl > dd dl{
        padding: 30px;
    }
    .tel{
        width: 60%;
        min-width: 600px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .tel dt{
        margin-right: 30px;
    }
    .tel dd{
        font-size: 12px;
    }
    .tel dd span{
        font-size: 40px;
    }
/*
  contact
===========================================================================================================*/
    #contact .page_head{
        background-position: center;
        background-size: 916px auto;
    }
    #contact .text{
        margin: 60px 0 50px;
    }
    #contact dl{
        display: flex;
        margin-bottom: 30px;
    }
    #contact dl dt{
        width: 28%;
    }
    #contact dl dd{
        width: 72%;
    }
    #contact_form{
        max-width: 800px;
        margin: 0 auto;
    }
    #contact #post_num{
        width: 30%;
    }

/*
  news
===========================================================================================================*/
    #news .page_head{
        background-size: 846px auto;
    }
    #news section{
        margin: 50px 0;
        display: flex;
        justify-content: space-between;
    }
    .news_area{
        width: 75%;
    }
    .single_wrap{
        padding: 0 0 60px;
    }
    .archive .single_wrap{
        margin-bottom: 60px;
    }
    .single_wrap figure{
        margin-bottom: 60px;
    }
    .single_wrap ul li:last-child{
        margin-left: 20px;
    }
    .single_wrap dt{
        padding: 30px 0 20px;
        margin-bottom: 20px;
    }
    .sidebar{
        display: block;
        width: 20%;
        margin: 0;
    }
    .sidebar .widget{
        width: 100%;
        margin-bottom: 80px;
    }
    .pagenation li{
        line-height: 30px;
    }
    .pagenation li img{
        width: 30px;
        margin: 0 10px;
    }

    .news_list li{
        margin-bottom: 50px;
    }
    .news_list li dt{
        width: 15%;
    }
    .news_list li dt+dd{
        width: 13%;
    }
    .news_list li dd+dd{
        width: 68%;
    }

}