@charset "UTF-8";
//*---------------------------------------------------------
ALL
---------------------------------------------------------*/
.w-900{max-width:900px;}
.w-900{
    margin:0 auto;
    width:95%;
}
.flex-col30{width:30% !important;}
.flex-col40{width:40% !important;}
.i-block{display: inline-block !important;}
.p-1p{padding:1%;}
.p-1{padding: 1vh 1vw;}.p-2{padding: 2vh 2vw;}.p-3{padding: 3vh 3vw;}
.pl-1{padding-left:1vw;}.pl-2{padding-left:2vw;}.pl-3{padding-left:2vw;}.pl-4{padding-left:4vw;}.pl-5{padding-left:5vw;}

.pr-1{padding-right:1vw;}.pr-2{padding-right:2vw;}.pr-3{padding-right:3vw;}.pr-4{padding-right:4vw;}.pr-5{padding-right:5vw;}
.pt-1{padding-top: 1vh;}.pt-2{padding-top: 2vh;}.pt-3{padding-top: 3vh;}.pt-4{padding-top: 4vh;}
.pb-1{padding-bottom: 1vh;}.pb-2{padding-bottom: 2vh;}.pb-3{padding-bottom: 3vh;}.pb-4{padding-bottom: 4vh;}
.flex-box{display: flex;}
.calc-3-column{
    width: calc(100% + 20px); 
    overflow: hidden;　/* 3つ目のmargin-right分は隠す */
}
.calc-3-column > li,.calc-3-column > div{width: calc(33.3333% - 20px); /* margin-right分を引きます */}

.calc-2-column{
    width: calc(100% + 20px); 
    overflow: hidden;　/* 3つ目のmargin-right分は隠す */
}
.calc-2-column > li,.calc-2-column > div{width: calc(50% - 20px); /* margin-right分を引きます */}
.col,.col-row{flex-direction: column;}
.wrap{flex-wrap: wrap;}
.flex-box-align-center{align-items: center;}
.flex-box-justify-center{justify-content: center;}
.pc_only02{display:block;}
.tab-sp_only{display:none;}
.tab_only{display:none;}
.border-r10{border-radius: 1vh;}
.float-r{
    float: right;
    margin-left: 2vw;
    margin-bottom: 3vh;
}
.float-l{
    float: left;
    margin-right: 2vw;
    margin-bottom: 3vh;
}
.cb {clear: both;}
.shadow-box{
    background: #fff;
    border-radius: 1vh;
    box-shadow: 0px 3px 6px 0px #ccc;
}
.shadow-box-inner{
    padding:2vh 2vw;
}
.shadow-box-ttl-r{
    border-top-left-radius: 1vh;
    border-top-right-radius: 1vh;
}

@media screen and (max-width: 912px) {
/* 912pxまでの幅の場合に適応される */
.tab-sp_only{display:block;}
.pc_only02{display:none;}
}

@media screen and (min-width:641px) and ( max-width:911px) {
/*　画面サイズが768pxから911pxまではここを読み込む　*/
.tab_only{display:block;}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.wid-30-sp{width:30% !important;}
.wid-40-sp{width:40% !important;}
.wid-50-sp{width:50% !important;}
.flex-col30,.flex-col40{width:100% !important;}
.sp-col{flex-direction: column;}
.col-row{flex-direction: row;}
.tab_only{display:none;}
.calc-3-column,.calc-3-column > li,.calc-3-column > div,.calc-2-column,.calc-2-column > li,.calc-2-column > div{width:100%;}
.sp-t-l{text-align: left;}
.sp-ml-2{margin-left: 2vw;}
.order-01{order: 1;}
.order-02{order: 2;}
.order-03{order: 3;}
.float-r,.float-l{
    width: 100%;
    float: unset;
    margin-left: 0;
    margin-right: 0;}
}

/*---------------------------------------------------------
font
---------------------------------------------------------*/
.zen-maru-gothic-light {
  font-family: "Zen Maru Gothic", serif !important;
  font-weight: 300 !important;
  font-style: normal;
}
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", serif !important;
  font-weight: 400 !important;
  font-style: normal;
}
.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", serif !important;
  font-weight: 500 !important;
  font-style: normal;
}
.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", serif !important;
  font-weight: 700 !important;
  font-style: normal;
}
.zen-maru-gothic-black {
  font-family: "Zen Maru Gothic", serif !important;
  font-weight: 900 !important;
  font-style: normal;
}

/*---------------------------------------------------------
header-gnavi
---------------------------------------------------------*/
.anchorlink {
    scroll-margin-top: 60px;
}
.anchorlink {
    padding-top: 60px; /* ヘッダーの高さ分のスペースを追加 */
    margin-top: -60px; /* 負のマージンで実際の位置を調整 */
}
.gakudo-head{
background: #fff;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
    margin: 0 0 10px;
    position: sticky;
    width: 100%;
    z-index: 10;
}
.gakudo-gnav{
    display: flex;
    justify-content: center;
    align-items: center;
        width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.gakudo-gnav > li{
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #ccc;
}
.gakudo-gnav > li:last-child{
    border-right: 1px solid #ccc;
}
.gakudo-gnav > li > a{
    padding: 1.5vh 1vw;
    color: #000;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: center;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    line-height: 1.3;
}
.gakudo-gnav > li >:hover{
background: rgba(255, 247, 153, 1);
}
.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

@media screen and (max-width: 640px) {
.gakudo-gnav > li:last-child{
    border-right: transparent;
}
.gakudo-gnav > li:first-child{
    border-left: transparent;
}
}

/*---------------------------------------------------------
学童
---------------------------------------------------------*/
.bg-gakudo01{background:rgba(255,247,153,1);}
.bg-gakudo02{background:rgba(255,247,153,0.3);}
.bg-gakudo03{background:rgb(255,252,216);}
.fc-gakudo{color: rgba(255,247,153,1) !important;}
.fc-gakudo-main{color: rgba(231,51,110,1) !important;}
.bg-gakudo-main01{background:rgba(231,51,110,1);}
.bg-gakudo-main02{background:rgba(231,51,110,0.5);}
.bg-gakudo-main03{background:rgba(231,51,110,0.2);}
.bg-gakudo-main04{background:rgba(231,51,110,0.1);}


.fv-area{
    width:100%;
    margin:0 auto;
    background:#F6F8F9;
}
 .fv-area-contents{
    position: relative;
    width:100%;
    margin:0 auto;
    max-width:1400px;
    position: relative;
    height: auto;
}
.float-r-fv{float: right;}
.fv-area-contents-inner{
    width: 100%;
    margin: 0 auto;
    /*display: flex;
    align-items: center;
    justify-content: center;*/
    position: relative;
}
.fv-area-contents-innerbox{
    width: 100%;
    max-width: 500px;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

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

}

@media screen and (max-width: 912px) {
/* 912pxまでの幅の場合に適応される */

}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */

}
/*---------------------------------------------------------
about-gakudo
---------------------------------------------------------*/
.about-gakudo{
    padding: 6vh 0;
}
.decoration-ttl01{
    position: relative;
    display: inline-block;
}
/*.decoration-ttl01:before{
    position: absolute;
    left: -2rem;
    top: 0;
    content: "";
    width: 3px;
    height: 100%;
    background: rgba(231,51,110,1);
    border-radius: 3px;
    transform: rotate(-25deg);
}
.decoration-ttl01::after {
    position: absolute;
    content: "";
    right: -2rem;
    top: 0;
    width: 3px;
    height: 100%;
    background: rgba(231,51,110,1);
    border-radius: 3px;
    transform: rotate(25deg);
}*/
.about-gakudo-ttlbox{
    background: #fff;
    padding: 1vh 3vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    border: 2px solid rgba(231,51,110,1);
    border-radius: 50vh;
    margin:0 0 1vh;
}
.about-gakudo-ttlboxTtl{
	font-size: clamp(1.6rem, 2.5vw, 2.25rem);
}

.about-gakudo-img{
    border: 8px solid #fff;
    border-radius: 5%;
    -moz-border-radius: 5%;
    -webkit-border-radius: 5%;
    box-shadow: 0px 1px 5px 0px #ccc; 
    width: 90%;
    display: block;margin-left: auto;margin-right: auto;
}
.about-gakudo-txt{
    margin-top: 1vh;
    text-align: center;
}
.about-gakudo-meritarea{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: calc(100% + 10px);
    overflow: hidden;
}
.about-gakudo-meritarea > div{
    border: 2px solid #007440;
    border-radius: 1vh;
    margin: 1%;
    color: #007440;
    font-weight: 700;
    width: calc(29% - 10px);
}
.about-gakudo-meritbox{
    display: flex;
    align-items: center;
}
.about-gakudo-meritbox > li{

}
.about-gakudo-meritboxtxt{
    font-size: clamp(1.2rem, 2vw, 2rem);
    line-height:1.3;
}
.about-gakudo-meritbox-pct{
    width: 20%;
    margin-right: 10px;
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.about-gakudo-img{
    border: 4px solid #fff;
    width: 90%;
}
.about-gakudo-txt{
    margin: 0 0 0 2vw;
    text-align: left;
    font-size: clamp(1.3rem, 2vw, 2rem);
}
.about-gakudo-meritarea{
    width: calc(100% + 10px);
}
.about-gakudo-meritarea > div{
    width: calc(46% - 10px);
}
.about-gakudo-meritbox-pct{
    margin-right: 5px;
}
}
/*---------------------------------------------------------
個別型学童保育とは？
---------------------------------------------------------*/
.shadow-boxttl{
    padding: 1vh 1vw;
    text-align: center;
    color: #fff;
    border-top-left-radius: 1vh;
    border-top-right-radius: 1vh;
}
.list-box{
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-box > li{
  text-indent: -1em;
  padding-left: 1em;
      line-height: 1.5;
}
.list-box > li:before {
  content: ""; /* 空の要素作成 */
  width: 8px; /* 幅指定 */
  height: 8px; /* 高さ指定 */
  display: inline-block; /* インラインブロックにする */
  border-radius: 50%; /* 要素を丸くする */
  position: relative;
  top: -1px;
  margin-right: 5px;
}
.green-ttl{background: #00A33E;}
.list-green{color: #00A33E;}
.list-green > li:before {
  background-color: #00A33E; /* 背景色指定 */
}
.orange-ttl{background: #ED6C00;}
.list-orange{color: #ED6C00;}
.list-orange > li:before {
  background-color: #ED6C00; /* 背景色指定 */
}
.pink-ttl{background: #E7336E;}
.list-pink{color: #E7336E;}
.list-pink > li:before {
  background-color: #E7336E; /* 背景色指定 */
}
.role-icon{font-size: 2rem;color: #E7336E;}

/*---------------------------------------------------------
学童特徴
---------------------------------------------------------*/
/*grid*/
.content{
  display:grid;
  grid-template-rows: auto auto auto;
  /*grid-template-columns: 1fr 40%;*/
  grid-template-areas:
    "area1 area2"
    "area3 area2";
  grid-gap: 10px;
  .item1{
    grid-area: area1;
    height:auto;
  }
  .item2{
    grid-area: area2;
    width: auto;   
  }
  .item3{
    grid-area: area3;
    height:auto;  
  }
}
.content-grid40{
  grid-template-columns: 1fr 40%;
}
.content-grid30{
  grid-template-columns: 1fr 30%;
}
.content-grid25{
  grid-template-columns: 1fr 25%;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
  .content{
    grid-template-areas:
      "area1 area1"
      "area2 area2"
      "area3 area3";
 
    .item2{
      width: 100%;
      height: auto;
    }
  }
}

/*コンテンツ*/
.graph-pct{
    width: 50%;
}
.line-pink{
    margin: 2vh 0 4vh;
    border-top: 1px solid rgba(231, 51, 110, .7);
}
.icon-number{
    display: inline-block;
    background: rgba(231,51,110,1);
    color:#fff;
    border-radius: 50%;
    margin: 0 0 1vh;
    font-weight:700;
     margin: 0 10px 0 0;
}
.icon-number > span{
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-number,.icon-number > span{
    width:40px;
    height:40px;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.graph-pct{
    width: 80%;
    display: block;margin-left: auto;margin-right: auto;
}
}