@charset "UTF-8";
:root{
  --mainColor:#007ac4;
  --mainColorRGB:0,122,196;
  --subColor:#009ee0;
  --subColorRGB:0,158,224;
  --pointColor:#f56634;
  --pointColorRGB:245,102,52;
  --ttlColor:#a64f30;
  --ttlColorRGB:166,79,48;
  --shadow:0 4px 8px 0 rgba(74,85,99,.2);
  --GRY:#757575;
  --GRN:#00892E;
  --RED:#D8000C;
  --BLU:#1077CF;
  --mainAnime:all .3s ease;
  --kodomo:#E2770A;
  --kodomo2:#BF5800;
  --kodomo3:#B95200;
  --txtShadow:0 2px 0 #B95200, 2px 0 0 #B95200, 0 -2px 0 #B95200, -2px 0 0 #B95200, -2px -2px 0 #B95200, 2px -2px 0 #B95200, -2px 2px 0 #B95200, 2px 2px 0 #B95200

}
/*----------------------------------------------- アクセシビリティ用 */
.noScript, a.skip{text-align:center}
.skip, a.skip{background-color:#FFF}
.skip{width:1px;color:#000;font-size:.1%;line-height:.1;position:absolute;left:-3000px;z-index:9999}
a.skip{padding:2px 0;top:auto}
a.skip:active, a.skip:focus,a.skipShow{position:relative;display:block;width:99.99%;left:auto;background:#000;color:#FFF;font-size:100%;line-height:1.6}

/*----------------------------------------------- base */
body{
  background-color:#fff5d0;
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.8;
  color:#000;
  font-weight:400
}
#container{
  position:relative;
  width:100%;
  overflow-x:hidden;
}
header{
  position:relative;
  width:100%;
  height:145px;
  z-index:100;
  margin-bottom:min(6vw,40px);
  background:url(../img/bg_head.svg) repeat-x bottom center/auto 146px;
}
header .headInner{
  padding:0 3vw 15px;
	transition:var(--mainAnime)
}
#navToggle{
  position:fixed;top:0;right:0;
  z-index:1001;
  width:64px;
  height:64px;
  padding:10px 5px;
  background:#FFF;
  box-shadow:var(--shadow);
  transition:var(--mainAnime);
  color:var(--kodomo2);
  text-align:center;
}
#navToggle:after{font-size:34px}
#navToggle span{display:block;font-size:10px;font-weight:bold;line-height:1}
body.open #navToggle,.fixed #navToggle{
  height:50px;
  padding:8px 10px;
}
body.open #navToggle span,.fixed #navToggle span{
  display:none
}
body.open #navToggle{
  background:var(--kodomo2);
  color:#FFF
}
#gNav a{
  display:block;
  color:var(--kodomo2);
  font-weight:bold
}
#gNav a:hover{
	color:var(--mainColor);
}
#gNav > ul > li{
  position:relative;
  /* background:url("../img/gNav_border.png") repeat-x bottom left;
  background-size:auto 3px; */
  padding:0
}
#gNav > ul > li > a{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  padding:.2em 0;
}
#gNav > ul > li a:after{
  font-size:20px;
}
#navArea{
  visibility:hidden;
  position:fixed;
  top:0;left:0;right:0;
  z-index:-1;
  opacity:0;
  width:100%;
  height:100%;
  overflow-y:scroll;
  background:#FFF;
  padding:80px min(6vw,40px) 24px;
}
body.open #navArea{
  visibility:visible;
  z-index:99;
  opacity:1;
  animation:fadeUP .6s ease;
}

.gSearch form.gsc-search-box{
  padding:0;
  margin:0;
  font-size:1rem
}
.gSearch table.gsc-search-box{
  margin-bottom:0
}
.gSearch table.gsc-search-box td.gsc-input{
  padding:0
}
.gSearch .gsc-input-box{
  border-radius:100px 0 0 100px;
  padding:2px 5px;
  box-shadow:0px 4px 8px 0px rgba(0, 53, 118, 0.2);
}
.gSearch .gsc-search-button-v2{
  height:100%;
  margin:0;
  padding:10px 27px;
  border-radius:0 100px 100px 0;
  box-shadow:0px 4px 8px 0px rgba(0, 53, 118, 0.2);
}
.gSearch .gsib_a{
  padding:2px 9px 1px 9px
}
.gSearch .gsib_b{
  height:auto;
}
footer{
  position:relative;
  margin:0;
  background-color:var(--mainColor);
  text-align:center;
  color:#FFF;
}
.goTopBtn{
  position:fixed;
	z-index:98;
  bottom:20px;right:20px;
	background:var(--kodomo2);
	width:48px;height:48px;
	border-radius:48px;
	line-height:48px;
	text-align:center;
	color:#FFF !important;
	text-decoration:none
}
a.goTopBtn:hover{
	background:#f56634;
}
.footWrap{
  padding:min(3vw,24px);
}
#siteLogo{
  max-width:300px;
	padding:0;
	margin:0 auto min(3vw,16px);
  background-color:#FFF;
  border-radius:8px;
  padding:16px;
}
footer #copyright{
	margin-bottom:0;
  font-size:.875em;
  font-weight:bold
}
/* SP only */
@media screen and (max-width:767px){}
/* SP+TB   */
@media screen and (max-width:959px){
  body.open{
    overflow:hidden;
  }
  body.open header,.fixed header{
    position:fixed;
    top:0;left:0;right:0;
    height:50px;
    overflow:hidden;
    background-position:top center;
    box-shadow:var(--shadow);
  }
  body.open header .headInner, .fixed header .headInner{
    padding:3px 3vw;
  }
  body.open header h1 img,.fixed header h1 img{
    height:44px;
  }
  header #headUtility{
    display:none;
  }
  #wrap{
    display:flex;
    flex-flow:column;
    margin:0 3vw
  }
  #headUtility{
    padding-top:min(6vw,40px)
  }
  #navArea .gSearch{
    margin-top:5vw
  }
  .gSearch .gsc-input-box{
    border:1px solid var(--kodomo2);
  }
}
/* TB only */
@media screen and (min-width:768px) and (max-width:959px){
  #subArea{
    display:flex;
    flex-wrap:wrap;
  }
  #navArea{
    padding:12vw 16vw 24px
  }
}

/* PC over */
@media screen and (min-width:960px){
  header .headInner{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    width:auto;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
  }
  #headUtility{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:flex-start;
    width:calc(100% - 460px);
    padding:24px 0;
  }
  .fontSize{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    width:14.5em;
  }
  .fontSize .ttl{
    margin-right:.5em;
  }
  .fontSize a{
    width:4rem;
    height:2.4rem;
    background-color:var(--kodomo2);
    box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.25);
    color:#FFF;
    text-align:center;
    font-weight:bold;
    line-height:2.4rem;
    transition:none;
    text-decoration:none
  }
  .fontSize a:hover{
    height:calc(2.4rem - 3px);
    transform:translateY(1px);
    box-shadow:inset 0 0 0 0 rgba(0,0,0,.25);
    line-height:calc(2.4rem - 3px);
    text-decoration:none
  }
  .fontSize a.active{
    box-shadow:inset 0 3px 0 0 rgba(0,0,0,.25);
    background-color:#D38D64;
    text-shadow:var(--txtShadow);
  }
  .fontSize a.active:hover{
    box-shadow:inset 0 0 0 0 rgba(0,0,0,.25);
  }
  #fsNormal{
    border-radius:100px 0 0 100px
  }
  #fsLarge{
    border-radius:0 100px 100px 0;
    font-size:1.25em
  }
  .gSearch{
    width:calc(100% - 14.5em);
    padding-left:16px;
  }
  #navToggle{
    display:none
  }
  main{
    width:100%;
  }
  #wrap{
    display:flex;
    flex-wrap:wrap;
    max-width:1000px/*1400px*/;
    margin:0 4vw;
    padding:0;
  }
  #gNav{
    overflow:hidden;
    border-radius:8px;
    background-color:#FFF;
    box-shadow:var(--shadow);
    padding:2px 16px;
    margin-bottom:40px;
  }
  #gNav > ul > li:last-child{
    background:none
  }
  #gNav > ul > li > a{
    font-size:1.2em;
  }
  .footWrap{
    display:flex;
    justify-content:space-between;
    max-width: 1000px /*1400px*/;
    margin: 0 4vw;
    padding-left:0;
    padding-right:0;
  }
  #siteLogo{
    margin:0;
  }

}
/* PC over */
@media screen and (min-width:1240px){
  header,#wrap,.footWrap{
    margin-left:auto;
    margin-right:auto;
  }
  #headPickUP ul li a{
    font-size:min(4.2vw,1.25em);
  }
  #headUtility{
    width: calc(100% - 480px);
    max-width:600px
  }

}
@media screen and (min-width:1441px){
}
@media screen and (min-width:1560px){
}

/*----------------------------------------------- home */
.kodomo h2{
  margin-bottom:.4em;
  color:var(--kodomo2);
}
.kod-point{
  font-weight:bold;
  color:var(--kodomo3)
}
#kodomoLead{
  margin-bottom:min(6vw,40px)
}
#kodomoLead h3{
  border-radius:8px;
  padding:.3em min(2vw,.5em);
  margin-bottom:12px;
  background-color:#ffd795;
  font-size:min(5vw,137.5%);
  color:#63392D;
}
#kodomoMap{
  margin-bottom:min(6vw,40px)
}
#kodomoMap iframe{
  margin-bottom:16px;
  border:none;
}
#kodomoList{
  margin-bottom:min(6vw,40px)
}
#kodomoList ul{
  list-style:none;
  padding:0;
}
#kodomoList li a{
  display:block;
  color:#000;
  text-decoration:none;
}
#kodomoList li a:hover {
  transform: translateY(.2em);
  opacity: .8;
}
#kodomoList li a h4{
  padding:.3em .5em;
  margin-bottom: .5em;
  border-radius: 4px;
  background-color:var(--kodomo);
  text-shadow:var(--txtShadow);
  color:#FFF;
}
#kodomoList li h4::before{
  display:none;
}
#kodomoList li h4::after{
  display:inline-block;
  margin-left:.5em;
  font-size:.75em;
  font-weight:normal;
}
#kodomoList li dl{
  display:flex;
  flex-wrap:wrap;
}
#kodomoList li dl dt{
  display: flex;
  align-items: center;
  justify-content:center;
  width:5em;
  border:1px solid #bebaa3;
  padding:2px 0;
  margin-right:.5em;
  text-align:center;
}
#kodomoList li dl dd{
  width:calc(100% - 5.5em) ;
}
.kodomoBox{
  border-radius: 8px;
  background-color: #FFF;
  box-shadow: var(--shadow);
  margin-bottom:min(6vw,40px);
  padding:min(4vw,32px) min(4vw,32px) 1px;
}
.kodomoBox h3{
  color:var(--kodomo);
}
.kodomoBox table{
  width:100%;
}
.koBoxImg ul{
  list-style:none;
  margin:0;
  padding:0;
}
.btnSlide{
  position:absolute;
  right:10px;bottom:10px;
  line-height:1;
  padding:10px;
  text-align:center;
  border-radius:100px;
  background:var(--kodomo2);
}
.btnSlide.active{
  display:none
}
/* SP only */
@media screen and (max-width:767px){
  #mainArea .kodomoBox th,#mainArea .kodomoBox td{
    padding:.3em .5em;
  }
  .kodLeadImg{
    width:60%;
    margin:0 auto 16px;
  }
  .koBoxImg{
    margin-bottom:16px;
  }
}
/* TB over */
@media screen and (min-width:768px){
  #kodomoLead .kodLeadImg{
    order:1;
  }
  #kodomoList ul{
    display:flex;
    flex-wrap:wrap;
    margin-left:-8px;
    margin-right:-8px;
  }
  #kodomoList ul li{
    width:50%;
    padding-left:8px;
    padding-right:8px;
  }
  .kodomoBox{
    padding-bottom:16px;
  }
  .kodomoBox .colGroup{
    display:block;
    margin-bottom:24px;
  }
  .kodomoBox h3{
    float:left;
  }
  .koBoxImg{
    float:right;
  }
}
/* PC over */
@media screen and (min-width:1240px){
  #kodomoList ul{
    margin-left:-16px;
    margin-right:-16px;
  }
  #kodomoList ul li{
    width:33.333333%;
    padding-left:16px;
    padding-right:16px;
  }
}
/*
#kodomo.bodyL header .inner{padding:0}
#kodomo.bodyL header .inner,#kodomo.bodyL #kodomoMap,#kodomo.bodyL #kodomoList,#kodomo.bodyL .koDetails{width:98%}
#kodomo.bodyL #headerBox{position:relative;top:auto;right:auto}