@charset "utf-8";

/*==============================

		kotone.css

==============================*/


/*------------------------------
	common
------------------------------*/
h3{
    font-size: 2em;
    font-weight: 600;
    color: #666;
    text-align: center;
    margin-bottom: 1em;
}

/*------------------------------
	SLIDE
------------------------------*/
/* pc */
#slide{
    background-color: #fff6ee;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 40px;
}
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}
/*sp*/
@media screen and (max-width: 640px) { 
    #slide{ padding-top: 7vh; margin-bottom: 0.5vh;}
    .slider .slick-slide { margin: 0 5px;}
}

/*------------------------------
	ENTRY
------------------------------*/
/* pc */
#entryWrap{
    max-width: 1200px;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    font-size: 0;
}

@media all and (-ms-high-contrast:none){
    #entryWrap{
        margin-top: 150px;
    }
}
#entryWrap .entryBlock{
    display: inline-block;
    width: 100%;
}
#entryWrap .entryBlock:nth-of-type(2){
    margin-right: 0;
}
#entryWrap .entryBlock h2.entryTitle{
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #333;
    position: relative;
    text-indent: 40px;
    position: relative;
    border-bottom: solid 1px #525252;
    padding-bottom: 5px;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 0;
}

#entryWrap .entryBlock ul{
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
}
#entryWrap .entryBlock li{
    position: relative;
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 1px dashed #999999;
}
#entryWrap .entryBlock ul.blog li{
    padding-bottom: 24px;
    padding-top: 23px;
}
#entryWrap .entryBlock li a:hover{
    color: #8E8E8E;
}
#entryWrap .entryBlock li a{
    font-size: 1.6rem;
    color: #212121;
    margin-left: 0.8em;
}
#entryWrap .entryBlock li span {
    display: inline-block;
}
#entryWrap .entryBlock li span.updata{
    font-weight: 200;
    font-size: 1.6rem;
    margin-right: 1em;
}
#entryWrap .entryBlock li span.icon{
    line-height: 1.45;
}
#entryWrap .entryBlock li span.icon a{
    display: block;
    width: 6rem;
    text-indent: -9999px;
}
.secretariat{
    background-image: url(../images/hottocan/icon_c_sec.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.after-school-days, .after-school{
    background-image: url(../images/hottocan/icon_c_as.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.early-childhood-days, .early-childhood{
    background-image: url(../images/hottocan/icon_c_ecec.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#entryWrap .entryBlock li span.new{
    color: #FF4F50;
    font-size: 1.5rem;
    padding-left: 0.5rem;
}
#entryWrap .entryBlock .link a{
    width: 160px;
    height: 50px;
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-size: 1.5rem;
    color:#333;
    text-align: center;
    line-height: 50px;
    border:solid 1px #333;
    border-radius: 25px;
    background-color: #fff;
}
.arw{
    font-size: 2rem;
}
#entryWrap .entryBlock .link a:hover{
    background-color: #ee9d78;
}

/*sp*/
@media screen and (max-width: 640px) { 
    #entryWrap .entryBlock h2.entryTitle{ text-indent: 5px;}
    #entryWrap .entryBlock ul{ padding: 5px;}
    #entryWrap .entryBlock li{
        line-height:inherit;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #entryWrap .entryBlock .link a{
        width: 120px;
        height: 40px;
        line-height: 40px;
    }
}
/*------------------------------
	WARABE
------------------------------*/
/* pc */
#warabe{
    background: url(../images/kotone/bg_t.gif);
    background-repeat: repeat-x;
    background-color: #fff6ee;
}
#warabe #warabeWrap{
    max-width: 1000px;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    padding-top: 60px;
}
#warabe #warabeWrap h3{
    font-size: 1.6em;
    margin-bottom: 0.5em;
}
#warabe #warabeWrap h3 .b{
    font-weight: bold;
    font-size: 1.1em;
    color: #686868;
}
#warabe #warabeWrap h3 .pk{
    font-weight: bold;
    font-size: 1.1em;
    color: #ee9d78;
}
#warabe #warabeWrap h3 .gr{
    font-weight: bold;
    font-size: 1.1em;
    /*color: #ee9d78;*/
}
#warabe #warabeWrap .moviebox{
    border: 3px dotted #ee9d78;
    border-radius: 20px;
    width: 560px;
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
}
#warabe #warabeWrap .warabeLink a{
    width: 25%;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    background-color: #ee9d78;
    padding: 0.6vw 0.6vw 0.6vw 0.6vw;
    border-radius: 20px;
    color:#fff;
}
#warabe #warabeWrap .warabeLink a:hover{
    opacity: 0.8;
}

/*------------------------------
	CAREPOLICY
------------------------------*/
/* pc */
#carepolicy{
    background-color: #fff6ee;
    position: relative;
}
#carepolicy .usagi{
    position: absolute;
    bottom:0;
    right: 5%;
    z-index: 1;
}
#carepolicy .risu{
    position: absolute;
    top:-30px;
    left: 5%;
    z-index: 1;
}
#carepolicy .usagi img{ width: 150px;}
#carepolicy .risu img{ width: 150px;}
#carepolicy .policyWrap{
    max-width: 1000px;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}
#carepolicy .policy1, #carepolicy .policy2, #carepolicy .policy3, #carepolicy .policy4, #carepolicy .policy5{
    border:dotted 2px;
    border-radius: 1em;
    padding: 0.5em;
    margin-bottom: 1em;
}
#carepolicy .policy1{ border-color: #ee9d78; background-color: #fef9f5;}
#carepolicy .policy2{ border-color: #eac43b; background-color: #fdf8e6;}
#carepolicy .policy3{ border-color: #fabc74; background-color: #fef2dd;}
#carepolicy .policy4{ border-color: #7dc4ed; background-color: #eaf7fd;}
#carepolicy .policy5{ border-color: #8de0b0; background-color: #ecfef5;}

/* tablet */
@media screen and (max-width: 1024px) { 
    #carepolicy .usagi{ right: 2%;}
    #carepolicy .usagi img{ width: 90px;}
    #carepolicy .risu{  top: -40px; left: 5%;}
    #carepolicy .risu img{ width: 80px;}
}
/*sp*/
@media screen and (max-width: 640px) { 
    #carepolicy .policyWrap{ padding-top:4.5vh;}
    #carepolicy .usagi{ right: 2%;}
    #carepolicy .usagi img{ width: 20vw;}
    #carepolicy .risu{ left: 4%;}
    #carepolicy .risu img{ width: 18vw;}
}
/*------------------------------
	TIMEFLOW
------------------------------*/
/* pc */
#timeflow{ 
    background-color: #fef3d0;
    position: relative;
}
#timeflow .baloon{
    position: absolute;
    bottom: -10px;
    right: 5%;
    z-index: 1;
}
#timeflow .baloon img{ width: 150px;}
#timeflow .flowWrap{
    max-width: 1000px;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 60px;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}
#timeflow li{
    border:dotted 2px;
    padding: 1em;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
    background-color: #fff;
    border-color: #b6a25c;
    align-items: center;
}
#timeflow li:first-child{border-radius: 1em 1em 0 0;}
#timeflow li:last-child{border-radius: 0 0 1em 1em;}
#timeflow li p.timeflag{
    width: 11%;
    margin-left: -2em;
    background: url(../images/kotone/flag_time.png) no-repeat;
    background-size: contain;
    background-position: center;
    height: 4em;
    padding-top: 2.3em;
    font-size: 1.2em;
}
#timeflow li img{ width:100%;}
#timeflow li p.flowimg{ width: 20%;}
#timeflow li dl{width: 65%;}
#timeflow li dt{
    border-bottom:solid 2px; 
    border-color:#eac43b; 
    padding-bottom: 1em;
    padding-left: 0.5em;
    margin-bottom: 1em; 
    font-size: 1.5em;
    text-align: left;
}
#timeflow li dd{
    text-align: left;
    padding-left: 0.5em;
}

/* tablet */
@media screen and (max-width: 1024px) { 
    #timeflow .baloon img{ width: 90px;}
}
/*sp*/
@media screen and (max-width: 640px) { 
    #timeflow li img{ width:100%;}
    #timeflow li p.timeflag{width: 18%; font-size: 1em;}
    #timeflow li p.flowimg{ width: 22%;}
    #timeflow li dl{width: 60%;}
    #timeflow li dt{
        font-size: 1.25em;
        margin-bottom:0.3em;
        padding-bottom: 0.5em;
    }
    #timeflow li dd{line-height: 1.4;}
    #timeflow .baloon{ right: 2%;}
    #timeflow .baloon img{ width: 18vw;}
    #timeflow .flowWrap{ padding-top: 5vh; padding-bottom: 5vh;}
}
/*------------------------------
	EVENT
------------------------------*/
/* pc */
#event .eventBox{
    max-width: 1000px;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 60px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
    justify-content: space-around;
    font-size: 0;
}
#event .eventBox figure img{ width: 80%;}

/*sp*/
@media screen and (max-width: 640px) { 
    #event .eventBox{ margin-bottom: 30px;}
    #event .eventBox{
        flex-wrap: wrap;
    }
    #event .eventBox figure img{ width: 100%; margin-bottom: 2vh;}
}
/* IE10ハック */
@media all and (-ms-high-contrast:none){
  #event .eventBox div {
      display: inline-block;
      width: 42%;
  }
}

/*------------------------------
	OVERVIEW
------------------------------*/
/* pc */
#overview{
    background-color: #fff6ee;
    margin-bottom: 2em;
    position: relative;
}
#overview .overviewWrap{
    max-width: 1000px;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}
#overview .kuma{
    position: absolute;
    bottom:0;
    left: 5%;
    z-index: 1;
}
#overview .kuma img{ width: 120px;}
#overview .overviewBox{
    border: solid 1px #957d27;
    border-radius: 1.5em;
    margin:0 auto;
    width: 80%;
    background-color: #fff;
}
#overview table{
    width: 100%;
}
#overview tr{
    border-bottom: solid 1px #957d27;
}
#overview tr:last-child{border-bottom: none;}
#overview th, #overview td{
    padding:1em;
    text-align: left;
}

/* tablet */
@media screen and (max-width: 1024px) { 
    #overview .kuma img{ width: 90px;}
}
/*sp*/
@media screen and (max-width: 640px) { 
    #overview .overviewBox{width: 100%;}
    #overview .kuma img{ width: 17vw;}
}

.contact_t{
    margin: 2em auto;
    width: 21em;
    background-color: #f19279;
    border-radius: 1.5em;
    padding: 0.5em;
}
.contact_t a{
    font-size: 1.5em;
    color: #fff;
    text-align: center;
    display: block;
}