@charset "utf-8";
/* CSS Document */
/*header
======================================================*/
#head{
	position: absolute;
	width: 100%;
	height: 80px;
	top: 0;
	left: 0;
	z-index: 999;
}

.h-logo{
	width: 20%;
	max-width: 250px;
	min-width: 120px;
	padding: 20px;
}
.h-logo img{
	width: 100%;
	object-fit: contain;
}
.top_btn{
	position: absolute;
	top:0;
	right: 2vw;
}
.top_btn ul{
	display: flex;
	gap:15px;
}
.top_btn li{
	width: 200px;
}
.top_btn li img{
	vertical-align: top;
	width: 100%;
	object-fit: contain;
}
@media(max-width:899px){
	.top_btn{
		display: none;
	}
}
/*menu
======================================================*/
.gnav ul{
	display: flex;
	/*gap:15px;*/
	justify-content: center;
}
.gnav li{
	position: relative;
}
.gnav li a{
	display: block;
	color: #666;
	font-size: clamp(1rem, -0.054rem + 1.74vw, 1.25rem);
	padding:0 1.2rem;
}

.gnav li{
	height: 66px;
	border-right: 1px dashed #999;
}
.gnav li:last-child{
	border-right: none;
}
.gnav li span{
	display: block;
	text-align: center;
	height: 40px;
	line-height: 1;
}
.gnav li span img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gnav.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff; 
	box-shadow: 0 2px 10px rgba(255,204,245,0.2);
	z-index: 1000;
	padding: 10px 0;
}

.gnav li a:hover{
	color:#FF9EEC;
}

.gnav li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:0;
	top:70px;
	z-index: 4;
    /*形状を指定*/
	width: max-content;
	background: #fff;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
	display: block;
	box-shadow: 0 2px 2px #ffc4d8;
}

/*hoverしたら表示*/

.gnav li.has-child:hover > ul,
.gnav li.has-child ul li:hover > ul,
.gnav li.has-child:active > ul,
.gnav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
.gnav li.has-child ul li{
	height: auto;
	border-right: none;
}
.gnav li.has-child ul li a{
	padding-top: 5px;
	padding-left: 2.5rem;
	border-bottom:solid 1px #ffc4d8;;
}

.gnav li.has-child ul li:last-child > a{
 border-bottom:none;
 }

.gnav li.has-child ul li:hover,
.gnav li.has-child ul li:active{
	background: rgba(239,144,160,0.2);
}
.gnav li.has-child li::before{
	position: absolute;
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	top: 50%;
	left: 5px;
	transform: translateY(-50%);
	z-index: 0;
}
.gnav li.has-child li:nth-child(1)::before{
	background: url("../img/icon01.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.gnav li.has-child li:nth-child(2)::before{
	background: url("../img/icon02.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.gnav li.has-child li:nth-child(3)::before{
	background: url("../img/icon03.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.gnav li.has-child li:nth-child(4)::before{
	background: url("../img/icon04.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.gnav li.has-child li:nth-child(5)::before{
	background: url("../img/icon05.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.gnav li.has-child li:nth-child(6)::before{
	background: url("../img/icon06.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.gnav li.has-child li:hover::before{
	transform: translateY(-50%) rotate(360deg) ;
	transition: .5s;
}
@media(max-width:899px){
	.gnav{
		display: none;
	}
}


/*mobilmenu
======================================================*/
@media(min-width:900px){
	.openbtn{
		display: none;
	}
}

.openbtn{
	position:fixed;
	top:10px;
	right: 10px;
	z-index: 999;/*ボタンを最前面に*/
	cursor: pointer;
    width: 50px;
    height:50px;
	background: #fff url("../img/bg02.png");
	background-size: cover;
	border-radius: 50%;
	border: 1px solid #FF87C2;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 25%;
    height: 3px;
    border-radius: 2px;
	background-color: #FF87C2;
  	width: 50%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 50%;
    left: 30%;
    transform: translateY(0) rotate(-45deg);
    width: 40%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 50%;
    left: 30%;
    transform: translateY(0) rotate(45deg);
    width: 40%;
}

/*naviarea*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 888;
	top: 0;
	width:100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
	z-index:3;
    /*丸の形*/
    width: 300px;
    height: 180px;
    border-radius: 50%;
   background: #fff url("../img/bg02.png");
	background-size: contain;
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
	right:-50px;
    top:-50px;
    transition: all .6s;/*0.6秒かけてアニメーション*/
	    z-index: 777;
}

.circle-bg.circleactive{
	transform: scale(20);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
    opacity:0;	
	padding-top: 90px;
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*リストのレイアウト設定*/
#g-nav li{
	text-align: center; 
	list-style: none;
	background: rgba(255,255,255,.60);
	border: 1px solid #eee;
}
#g-nav li:not(:first-child){
	border-top: none;
}

#g-nav li a{
	color: #666;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}
#g-nav li ul.g_child{
	display: flex;
	width: 100%;
	padding-top: 0px;
}
#g-nav li ul.g_child li{
	width: calc(100% / 3);
	border: 1px solid #eee;
	font-size: clamp(15px,2vw,18px);
}
#g-nav ul.g_con,#g-nav ul.g_sns{
	padding-top: 20px;
}
#g-nav li a:hover{
	background: rgba(247,255,233,.8);
}
@media(max-width:450px){
	#g-nav li ul.g_child li a{
		padding: 5px;
		font-weight: 500;
	}
}



/*footer
======================================================*/

footer{
	background: #ffc4d8;
	color: #fff;
	padding: 40px 0;
}
footer h2{
	font-size: 3rem;
}
.flogo{
	max-width: 300px;
}
.f_btn{
	margin-top: 20px;
}
.f_btn .ftel,.f_btn .ftel2,.f_btn .line{
	display:flex;
    align-items: center;
	background: #fff;
	border-radius: 50px;
	padding: .3rem 1rem;
	padding-left: 2rem;
	max-width: 420px;
	font-size: clamp(1.6rem, 1.415rem + 0.78vw, 2rem);
	line-height: 50px;
	font-weight: 600;	
	transition: .4s;
	margin-left: auto;
}
.f_btn p{
	padding-bottom: 5px;
}
.f_btn i{
	padding: .5rem;
	margin-right: 2rem;
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 50%;
	font-size: 1.7rem;
	display: flex;
	align-items: center;
	justify-content: center
}
.f_btn .ftel{
	border: 2px solid #ff7bac;
	color: #ff7bac;
}

.f_btn .ftel2{
	border: 2px solid #3fa9f5;
	color: #3fa9f5;
}
.f_btn .line{
	border: 2px solid #06c755;
	color: #06c755;	
}
.f_btn .ftel i  {
	background: #ff7bac;
	color: #fff;
}
.f_btn .ftel2 i{
	background: #3fa9f5;
	color: #fff;	
}
.f_btn .line i{
	background: #06c755;
	color: #fff;
}
.f_btn .line i::before{
	position: absolute;
	width: 30px;
	height: 30px;
	content: '';
	background: url("../img/line-icon.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: .4s;
}
.f_btn .ftel:hover{
	background: #ff7bac;
	color: #fff;
	transition: .4s;
}
.f_btn .ftel:hover i{
	background: #fff;
	color: #ff7bac;
	transition: .4s;
}
.f_btn .ftel2:hover{
	background: #3fa9f5;
	color: #fff;
	transition: .4s;
}
.f_btn .ftel2:hover i{
	background: #fff;
	color:#3fa9f5;
	transition: .4s;
}
.f_btn .line:hover{
	background: #06c755;
	color: #fff;
	transition: .4s;
}
.f_btn .line:hover i{
	background: #fff;
	color: #06c755;
	transition: .4s;
}
.f_btn .line:hover i::before{
	background: url("../img/line-icon-hover.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: .4s;
}

.copy{
	padding: 5px 0;
	text-align: center;
	font-size: 13px;
}

@media(max-width:768px){
	.f_info{
		margin: 0 auto;
		text-align: center;
	}
	.flogo{
		margin: 0 auto;
	}
	.f_btn .ftel,.f_btn .ftel2,.f_btn .line{
	margin-right: auto;
}
}

/*フロートバナー
======================================================*/

.banner {
    position: fixed;
    margin: 15px 20px;
    z-index: 888;
    bottom: 2vw;
    right: 1vw;
	transition: top 0.5s ease, bottom 0.5s ease;
}
.banner a {
    text-decoration: none;
}

.banner-body {
    width: 250px;
}
.banner-body img{
	width: 100%;
	object-fit: contain;
}
.banner-body:hover {
    transition: opacity 0.3s ease;
    opacity: 0.7;
}

.banner-close {
    font-weight: bold;
    position: absolute;
    top: -2px;
    right: -4px;
    z-index: 889;
    padding: 0 8px;
    border: none;
    background-color: #f8f8f8;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0 0 7px rgb(0 0 0 / 40%);
    box-shadow: 0 0 7px rgb(0 0 0 / 40%);
}
@media(max-width:899px){
	.banner-body {
		width: 180px;
	}
}
@media screen and (max-width: 750px) {
    .banner {
        width: 100%;
        margin: 0px;
		display: none;
    }
    .banner-body {
        width: 100%;
        border-radius: 0px;
    }
    .banner-close {
        top: 5px;
        right: auto;
		left: 5px
    }
	.f_pc{
		display: none;
	}	
}


/*pagetop
======================================================*/

#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
	opacity: .7;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}


/*index
======================================================*/
/*Firstview*/
.tfv{
	position:relative;
	z-index: 0;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 95vh;
	z-index: 99;
}

.main-slider {
	position:relative;
	z-index: 0;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 95vh;
	background: url("../img/slide/slide_bg.png");
	background-size: contain;	
	background-repeat: no-repeat;
	background-position: center;
}
/*　背景画像設定　*/

.slider-item01 {
    background:url("../img/slide/slide_01.png");
}

.slider-item02 {
    background:url("../img/slide/slide_02.png");
}

.slider-item03 {
    background:url("../img/slide/slide_03.png");
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	aspect-ratio: 4 / 3;
	max-height: 95vh;
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: contain;/*背景画像が.slider-item全体を覆い表示*/
}
.main-slider::after{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url("../img/slide/slide_top.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	z-index: 3;
}
.slide_bg_img{
	position: absolute;
	content: '';
	z-index: -1;
}
.slide_bg_img._01{
	width: clamp(150px,23vw,300px);
	top: 20%;
	right: 5%;
}
.slide_bg_img._02{
	width: clamp(180px,25vw,380px);
	bottom: 8%;
	left: 5%;
}

/*CONCEPT*/
.t-const::before,.t-const::after{
	position: absolute;
	content: '';
	width: 20vw;
	height: 100%;
	top: 0;
}
.t-const::before{
	background: url("../img/concept_img_left.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	left: 3vw;
}
.t-const::after{
	background: url("../img/concept_img_right.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	right: 3vw;
}
.c_txt{
	text-align: center;
}

.c_txt h3{
	color: #f15a24;
	font-size:clamp(1.4rem, 1.307rem + 0.39vw, 1.6rem);
	margin: 20px auto;
}

.credo{
	background: #FAFFE4;
	padding: 1.3rem;
    max-width: 450px;
    margin: 0 auto 30px;
}
.credo h3{
	margin-bottom: 10px;
	color: #754c24;
	font-size: clamp(20px, 2.5vw, 30px);
	border-bottom: 1px dotted #754c24;
}

@media(max-width:749px){
	.t-const{
		padding: 200px 0;
	}
	.t-const::before{
		background: url("../img/concept_img_sptop.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
		width: 100%;
		height: 20vh;
		min-height: 150px;
		top: 0;		
	}	
	.t-const::after{
		background: url("../img/concept_img_spbottom.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center bottom;
		width: 100%;
		height: 20vw;
		min-height: 150px;
		right: 1vw;
		top: auto;
		bottom:0;
		
	}	
}

@media(max-width:549px){
	.c_txt p{
		text-align: left;
	}	
	.c_txt p .ib{
		display: inline!important;
	}
	.credo {
		padding: 1rem;
	}
}

/*service*/
.serv_warp{
	display: flex;
	flex-wrap: wrap;
	z-index: 5;
}

.serv_box{
	width: calc(100% / 3 - 20px);
	margin: 10px 10px;
	border-radius: 20px;
	background: #fff;
	z-index: 0;
	position: relative;
}
.serv_box figure{
	aspect-ratio: 7 / 5;
	overflow: hidden;
	background: #fffce0;
	border-radius: 20px 20px 0 0;
}
.serv_txt{
	padding: 10px 20px 20px;
	text-align: center;
	position: relative;
}
.serv_txt small{
	line-height: 1.3;
}

.morebtn{
	display: block;
	position: relative;
	background: #fcef4f;
	padding: 10px;
	margin-top: 20px;
	border-radius: 20px;
	z-index: 2;
}
.morebtn::before{
	position: absolute;
	top: 50%;
	right: 2rem;
	content: '\f061';
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
	transform: translateY(-50%);
	transition: .4s;
}
.morebtn:hover{
	background: #ffd255;
}
.morebtn:hover::before{
	right: 1rem;
	transition: .4s;	
}

/*施設slide*/
.min-slider2 .slick-slide{
    aspect-ratio: 7 / 5;
}
.min-slider2 li img{
	height: 100% !important;
	width: 100% !important;
	object-fit: cover!important;
}

.min-slider2 .slick-dots {
    text-align: center;
    margin: -20px 0 0 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.min-slider2 .slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.min-slider2 .slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.min-slider2 .slick-dots .slick-active button{
    background: #ff9800;/*ドットボタンの現在地表示の色*/
}

@media(max-width:959px){
	.serv_box{
		width: calc(100% / 2 - 20px);
		margin: 10px 10px;
		border-radius: 20px;
		background: #fff;
		z-index: 0;
	}
}
@media(max-width:768px){
	.t_servce .comn5 p{
		text-align: center;
	}

}
@media(max-width:759px){
	.serv_box{
		width:100%;
		display: flex;	
		margin: 10px 0;
	}
	.serv_box figure{
		width: 40%;
		min-width: 180px;
		aspect-ratio: 1 / 1;
		border-radius: 20px 0 0 20px;
	}
	.min-slider2 .slick-slide{
		aspect-ratio: 9 / 10;
	}	
	.serv_txt{
		width: 70%;
	}
	.serv_title span::before{
		width: 100%;
		left:0;
	}	
	.serv_title span{
		font-size: 1.3rem;
	}	
	.serv_title.tts span{
		font-size: 1.1rem!important;
	}	
}
@media(max-width:509px){
	.serv_box{
		display: block;
	}	
	.serv_box figure{
		width: 100%;
		min-width: 100;
		aspect-ratio: 16 / 9;
		border-radius: 20px 20px 0 0;
	}	
	.min-slider2 .slick-slide{
		aspect-ratio: 16 / 9;
	}		
	.serv_txt{
		width:100%;
	}	

}

/*region*/


.event_news{
	background: url("../img/illust/event_bg.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;	
	padding: 2rem 3rem ;
}

.eventimg{
	width: 100%;
	object-fit: contain;
	max-width: 280px;
	margin: 20px auto;
}

/*活動報告*/
.t_repor{
	padding-top: 0;
}
.report-title{
	display: flex;
	align-items: center;
}
.mbtn.resp{
	display: none;
}
@media(max-width:500px){
	.report-title .repc{
		display: none;
	}
	.mbtn.resp{
	display: block;
}
}

/*下層共通
======================================================*/
.kfv {
  position: relative;
  width: 100%;
  min-height: 420px;
  aspect-ratio: 1922 / 663;
  overflow: hidden; /* はみ出す画像を隠す */
}

.kfvbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.kfvbg img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
}
.kfvbg img.spimg{
	display: none;
}
.pagetitle{
	position: absolute;
	content: '';
	font-size: clamp(24px,4.5vw,45px);
	z-index: 5;
	bottom:20%;
	left: calc(40% - 200px);
	color: #794629;
}


@media(max-width:819px){
	.kfv {
	  position: relative;
	  width: 100%;
	  min-height: 200px;
	  aspect-ratio: 2 / 1;
	  overflow: hidden; /* はみ出す画像を隠す */
	}
	
	.kfvbg img.spimg{
		display: block;
	}
	.kfvbg img.pcimg{
		display: none;
	}	
	.pagetitle{
		bottom: 17%;
		left: 12%;
	}	
}

@media(max-width:480px){
	.pagetitle{
		bottom: 17%;
		left: 8%;
	}		
}

/*放課後児童クラブ&療育支援事業　共通
======================================================*/
.pcarea{
	display: flex;
	justify-content: flex-end;
}

.pc_main{
	width:calc(100% - 235px)
}
.childnav {
	position: absolute;
	top: 0; /* JavaScriptで設定 */
	left: 0;
	transition: position 0.3s;
	width: 225px;
	padding: 10px 8px;
	border: 1px solid #fbb03b;
	z-index: 99;
	background: #fff;
}

.childnav.fixed {
	position: fixed;
	top: 100px;
	left: 0;
	z-index: 99;
}
.childnav li a{
	display: block;
	padding: 8px 5px;
	border-bottom: 1px dotted #fdd03b;
}
.childnav li a:hover{
	background: #FFF9F0;
	color: #FBB03B;
}
@media(max-width:1023px){
	.pc_main{
		width:100%
	}
	 .childnav {
		 display: none;
	  }
}




/* 放課後児童クラブ
======================================================*/
.cherish p{
	font-size: 16px;
	line-height: 1.3;
}
.clubimg_sp{
	display: none;
}
@media(max-width:750px){
	.clubimg_sp{
		display: block;
	}
	.clubimg_pc{
		display: none;
	}
	
	
}

/*特徴*/
.pointflex {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 枠デザイン */
.point {
	position: relative;
	width: 100%;
	padding:40px 5% 3%;
	background: #f7fff0;
	display: flex;
	border-radius: 20px;
	margin-bottom: 50px;
	border: 3px dashed #00cf82
}


/* 偶数要素の色切り替え */
.point:nth-child(even){
  background: #fffaf2;
	border-color: #ff9933;
}


.point h2{
	position:absolute;
	white-space:nowrap;
	top:-20px;
	left: 10%;
	background: #fff;
	z-index: 1;
}


/*各施設概要*/
.pastel,.luminous {
	margin-bottom: 8vh;
}
.about_main{
	border-width: 30px;
    border-style: solid;
    border-radius: 30px;
    padding: 40px;
    background-color: #fff;
}
.about_main .about_box {
    padding-bottom: 30px;
}
.pastel .about_main{
	border-color: #cae9e8;
}

.vivid .about_main{
	border-color: #F8CED5;
}
.luminous .about_main,
.ryoiku .about_main{
	border-color: #FFD2A5;
}

.about_main .about_box:not(:last-child) {
    margin-bottom: 50px;
    border-bottom: 3px solid #F7F6F5;
}
.about_main .about_box .label {
    flex-basis: 25%;
    max-width: 25%;
    text-align: center;
}
.about_main .about_box .label img{
	width: 100%;
	max-width: 300px;
	object-fit: contain;
}
.about_main .about_box .contents {
    flex-basis: 75%;
    max-width: 75%;
}

.about_box .contents .tb_facility tr:nth-child(2n-1) th:before,
.about_box2 .contents .tb_facility tr:nth-child(2n-1) th:before {
    background-color: #7fd73f;
}
.about_box .contents .tb_facility tr:nth-child(2n) th:before,
.about_box2 .contents .tb_facility tr:nth-child(2n) th:before {
background-color: #F2B772; 
}

.tb_facility tr.bg {
    background-color: #E8F0EF;
}
.tb_facility .p-left{
	padding-left: 1.6em;
}

.vivid .tb_facility tr.bg {
    background-color: #FCECEF;
}
.luminous .tb_facility tr.bg,
.ryoiku .tb_facility tr.bg{
    background-color: #FFF0E1;
}
.about_box .contents .tb_facility th, 
.about_box2 .contents .tb_facility th, 
.about_box .contents .tb_facility td,
.about_box2 .contents .tb_facility td {
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 16px;
	letter-spacing: 0; 
}
.about_box .contents .tb_facility th,
.about_box2 .contents .tb_facility th{
	text-align: left;
	padding: .5em 1.6em;
	font-weight: bold;
	white-space: nowrap;
	width: 150px; 
}
.about_box .contents .tb_facility th:before,
.about_box2 .contents .tb_facility th:before {
	width: 10px;
	height: 10px;
	display: inline-block;
	vertical-align: middle;
	content: "";
	border-radius: 10px;
	margin-right: .5em; 
}
.about_box .contents .tb_facility tr.tr_contact td div,
.about_box2 .contents .tb_facility tr.tr_contact td div {
	display: inline-block; 
}
.about_box .contents .tb_facility tr.tr_contact td div span,
.about_box2 .contents .tb_facility tr.tr_contact td div span {
	background-color: rgba(89, 86, 82, 0.1);
	font-size: 13px;
	text-align: center;
	padding: 2px 5px;
	margin-right: 8px;
	border-radius: 3px; 
}
.about_box .contents .tb_facility tr table th,
.about_box2 .contents .tb_facility tr table th,
.about_box .contents .tb_facility tr table td,
.about_box2 .contents .tb_facility tr table td {
	padding-top: 5px;
	padding-bottom: 5px; 
}
.about_box .contents .tb_facility tr table th,
.about_box2 .contents .tb_facility tr table th {
	padding-left: 0;
	padding-right: 20px;
	text-align: left;
	width: 1px;
	white-space: nowrap; 
}
.about_box .contents .tb_facility tr table th:before,
.about_box2 .contents .tb_facility tr table th:before {
	display: none; 
}
.about_box .contents .tb_facility tr table td,
.about_box2 .contents .tb_facility tr table td {
	padding: .8em .5em;
	line-height: 1.2; 
}
.about_box .contents h4,
.about_box2 .contents h4 {
	font-size: 1.2rem;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	padding-bottom: 13px;
	margin-bottom: 2.1rem;
	line-height: 1.4; 
}
.about_box .contents h4 span {
	display: inline-block;
	font-weight: normal;
	font-size: 0.75rem;
	border-radius: 5px;
	padding: .2em 1em;
	letter-spacing: .05em;
	vertical-align: middle; 
}
.about_box.daycare td,
.about_box2.daycare td {
	border-bottom: 1px solid #e8e8e8; 
}
.about_box.access .contents .tb_facility th, 
.about_box.access .contents .tb_facility td {
	padding-top: 5px;
	padding-bottom: 5px; 
}
.about_box.access .contents .gmap {
	margin-top: 40px;
	border-radius: 20px;
	overflow: hidden; 
}
.about_box.access .contents .gmap iframe {
	width: 100%;
	border-radius: 20px;
	overflow: hidden; 
}

@media screen and (max-width: 897px) {
	.page_facility .facility_title {
		font-size: 1.8em;
	}
	.page_facility .inner .txt{
		font-size: 16px;
	}
	.txt h3 {
		font-size: 20px;
	}	
	.page_facility .facility_title .sm {
		font-size: 2rem;
	}	
	.page_facility .facility_title h3 {
		max-width: 370px;
		padding-top: 30px;
		padding-bottom: 30px;
		font-size: 1.75rem; 
	} 
	.about_main {
		border-width: calc( 10px + 2.22965vw );
		padding: calc( 15px + 2.22965vw ); 
	} 
	.about_main .about_box {
		display: block; 
	}
	.about_main .about_box .label {
		max-width: 100%;
		margin-bottom: 20px; 
	}
	.about_main .about_box .contents {
		max-width: 100%; 
	} 
	.about_box .contents .tb_facility tr table th {
		display: block;
		width: 100%; 
	}
	.about_box .contents .tb_facility tr table td {
		display: block;
		padding-top: 0;
		padding-left: calc( 8px + .5em); 
	} 
	.about_box .contents h4 {
		text-align: center;
		font-size: 1.8rem;
		border-bottom: none;
		margin-bottom: 1rem; 
	} 
	.about_box .contents h4 {
		font-size: 1.6rem; 
	} 
	.about_box.access {
		padding-bottom: 0; 
	}
	.about_box.access .contents .tb_facility th {
		padding-left: 0; 
	}	
}
@media screen and (max-width: 720px) {
	.page_facility #facility_top .flex{
		flex-direction: column;
		align-items: center;
	}
	.page_facility .inner .img_catch{
		width: 50%;
		margin-bottom: 20px;
	}
	.page_facility .inner .txt{
		width: 95%;
	}	
	.tb_facility .p-left{
		padding-left: 1em;
	}	
}
@media screen and (max-width: 480px) {
	.page_facility .facility_title {
		max-width: 80%;
		font-size: 1.2em;
		position: relative;
		margin-top: 5px; 
	} 
	.page_facility .facility_title .sm {
		font-size: 1.2rem;
	}	
	.page_facility .facility_title h3 {
		font-size: 1.57rem;
		max-width: 278px;
		padding-top: 20px;
		padding-bottom: 20px; 
	} 
	.about_main {
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 20px;
		border-width: calc( 7px + 1.458333vw ); 
	}
	.about_box .contents .tb_facility th, 
	.about_box .contents .tb_facility td {
		display: block; }
	.about_box .contents .tb_facility th {
		padding: 1.5em 0 0 1rem; 
	} 
	.about_box .contents .tb_facility th:before {
		position: relative;
		left: -3px;
		top: -3px;
	}
	.about_box .contents .tb_facility td {
		padding-left: calc( 1em + ( 8px + .5em ));
		padding-top: 5px;
		padding-right: 10px; } 
	.about_box .contents .tb_facility tr table th,
	.about_box .contents .tb_facility tr table td {
		display: block; 
	} 	
	.about_box.access .contents .gmap {
		height: 200px;
	}
	.tb_facility .p-left{
		padding-left: 10px!important;
	}		
}

/*療育支援
======================================================*/
.descflex {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.descflex div {
  position: relative;
  padding: 30px 20px 10px;
  background: #f7fff0;
  width: 23%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.descflex div::before, .descflex div::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  opacity: 0.2;
  border: 2px solid #00cf82;
}
.descflex div::before {
  top: 3px;
  left: 3px;
}
.descflex div::after {
  bottom: 3px;
  right: 3px;
}
.descflex div:nth-child(2n)::before, .descflex div:nth-child(2n)::after {
  border: 2px solid #ff9933;
}
.descflex div:nth-child(2n) {
  background: #fffaf2;
  bottom: 40px;
}
.descflex div h2::before {
  opacity: 0.7;
  content: url(../img/deco.svg);
  position: absolute;
  display: block;
  top: 2px;
  left: -9px;
  width: 21%;
  filter: invert(57%) sepia(85%) saturate(2575%) hue-rotate(119deg) brightness(100%) contrast(101%);
}
.descflex div:nth-child(2n) h2::before {
  filter: invert(43%) sepia(95%) saturate(1109%) hue-rotate(2deg) brightness(104%) contrast(108%);
}
.descflex div h2 span {
  font-size: 2rem;
  display: block;
  position: absolute;
  top: 8%;
  left: 7%;
}
.descflex div h2 {
  white-space: nowrap;
  line-height: 1.5;
  width: 100%;
  padding-bottom: 12px;
  margin-bottom: 15px;
  border-bottom: 2px dotted #00cf82;
  color: #00cf82;
  text-align: center;
  font-size: 1.7rem;
}
.descflex div:nth-child(2n) h2 {
  border-bottom: 2px dotted #ff9933;
  color: #ff9933;
}
.descflex div p {
  /*white-space: nowrap;*/
  line-height: 1.5;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media(max-width:1220px) {
  .descflex div h2 {
    font-size: 2.3vw;
  }
  .descflex div p {
    font-size: 100%;
  }
}
@media(max-width:950px) {
  .descflex div {
    width: 48%;
    margin-bottom: 30px;
  }
  .descflex div h2 {
    font-size: 1.65rem;
  }
  .descflex div p {
    font-size: 115%;
  }
}
@media(max-width:550px) {
  .descflex {
    display: block;
  }
  .descflex div:nth-child(2n) {
    bottom: 0 !important;
    margin-left: auto;
  }
  .descflex div {
    width: 85%;
    margin-bottom: 25px;
  }
  .descflex {
    margin-top: 40px;
  }
  .descflex div h2 span {
    top: 8%;
    font-size: 7vw;
  }
  .descflex div h2 {
    font-size: 7vw;
  }
  .descflex div p {
    font-size: 5.6vw;
  }
}

/*療育内容*/
.detail_contents{
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	gap:20px;
	position: relative;
}
.datail_box{
	width: 32%;
	background: #fff;
	border: 2px dashed #d35c47;
	padding: 20px;
	border-radius: 20px;
	margin-bottom: 20px;
	position: relative;
}

.w960{
	max-width: 960px;
	margin: 0 auto;
}

@media(max-width:768px){
	.datail_box{
		width: 90%;
		margin: 20px auto;
	}
}


/* 利用の流れ*/
.timeline{
	position: relative;
	width: calc(100% - 30px);
	margin: auto;
}
.timeline .timeline_inner{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 30px;
	position: relative;
}
.timeline .timeline_inner::before{
	position: absolute;
    content: "";
    height: 125%;
    width: 8px;
    top: 25px;
    left: 36px;
    background: #c0e2f0;
}
.timeline .timeline_inner:last-child::before{
	height: 5%;
	background-color: transparent;
}
.timeline .timeline_inner dt{
	width: 90px;
    height: 90px;
    line-height: 90px;
    /*background: #2e4b57;*/
    /*border-radius: 50%;*/
    color:#754c24;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    position: relative;
    z-index: 4;
    letter-spacing: 0.05em;
}
.timeline .timeline_inner dt._01{
	background: url("../img/step01.png");
	background-size: contain;
	background-position: center;
}
.timeline .timeline_inner dt._02{
	background: url("../img/step02.png");
	background-size: contain;
	background-position: center;
}
.timeline .timeline_inner dt._03{
	background: url("../img/step03.png");
	background-size: contain;
	background-position: center;
}
.timeline .timeline_inner dt._04{
	background: url("../img/step04.png");
	background-size: contain;
	background-position: center;
}
.timeline .timeline_inner dt._05{
	background: url("../img/step05.png");
	background-size: contain;
	background-position: center;
}
.timeline .timeline_inner dt._06{
	background: url("../img/step06.png");
	background-size: contain;
	background-position: center;
}
.timeline .timeline_inner dd{
	flex: 1;
    position: relative;
    left: 20px;
    margin-top: 10px;
    padding: 15px 10px 15px 30px;
    z-index: 2;
    background: #fff;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
	border-left: solid 5px #fff;
}
.timeline .timeline_inner dd::after{
	border: solid transparent;
	content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(255, 255, 255, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:20px;
    border-right-width:20px;
    margin-top: -8px;
    border-right-color:#fff;
    right:100%;
    top:2rem;
}
.timeline .timeline_inner dd span{
	font-size: 80%;
}
.timeline_inner h4{
	font-size: 110%;
	font-weight: 600;
}
.timesc{
	box-sizing:border-box;
}
.timesc table{
	border-collapse: collapse;
    border-spacing: 5px;
    margin: 0 auto;
    padding: 0;
	border-radius: 30px;
	overflow: hidden;
	background: rgba(248,244,230,0.5);
}
.timesc table tr{
	border-bottom: solid 1px #99d02c;
}
.timesc table tr:last-child{
	border:none;
}
.timesc table th,
.timesc table td{
	padding: 1rem;
}
.timesc table th{
	white-space: nowrap;
	font-weight: 700;
	font-size: 1.2rem;
	color: #2b78b0;
	background: rgba(153,208,44,0.5);
}
.timesc table td{
	color: #32a65d;
}
.timesc table td.t02{
	width: 30%;
	color: #666;
}
@media (max-width: 960px){
	.timesc table th,
	.timesc table td{
		font-size: 1rem;
		padding: 1rem 0.5rem;
	}
	.timesc table td.t02{
		width: 30%;
		font-size: 0.8rem;
	}
}
/*利用の流れ2*/
.flow-wrap{
	width: 100%;
	display: grid;
	gap:30px 0;
	grid-template-columns: 1fr 1fr; 
	position: relative;
	color: #754c24;
}
.flow-wrap .flow{
	border: 5px solid #cae9e8;
	padding: 1.5rem 2rem;
	background: #fff;
	border-radius: 20px;
	text-align: center;
	position: relative;
}
.flow-wrap .morebtn{
	text-align: left;
	padding-left: 20px;
	width: 160px;
	display: inline-block; 
}
.flow._01,.flow._02,.flow._03,.flow._06,.flow._08,.flow._09{
	grid-column:1 / 3;
}
.flow._04,.flow._05,.flow._07{
	grid-column:2 / 3;
}
.flow._02{
	margin-bottom: 20px
}
.flow-wrap::before,.flow-wrap::after{
	position: absolute;
	content: '';
	width: 13px;
	height: 80%;
	z-index: -1;	
	top: 20%;
}

.flow-wrap::before{
	background:  rgba(255,167,229,1.00);
	left: 25%;
    transform: translateX(-50%);
}
.flow-wrap::after{
	background:  rgba(137,255,209,1.00);
	right:25%;
    transform: translateX(50%);
}
.flow._02::before,.flow._02::after{
	position: absolute;
	content: '';
	width: clamp(50px, 15vw, 80px);
	aspect-ratio: 1 / 1;
	z-index: 1;
    bottom: -43px;
}


.flow._02::before{
	background: url("../img/ari.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	left: 25%;
    transform: translateX(-50%);
}
.flow._02::after{
	background: url("../img/nashi.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	right:25%;
    transform: translateX(50%);
}
/*====保育所等訪問支援===*/
.visitinbox{
	display:flex;
	flex-wrap: wrap;
}

.visitin{
   width:calc(100% / 4 - 20px); 
margin: 10px;    
background: #FFD7E4;
border-radius: 10px;    
padding: 1rem;   
position: relative;
}
.visitin .visitin_titl{
font-size: 1.3rem;
text-align: center; 
width: 120px;
height: 50px;
border-radius: 100px;    
position: absolute;
left: 50%;
top: 10px;  
-webkit-transform : translateX(-50%);
transform : translateX(-50%); 
line-height: 50px;  
}
.text_b{
color: #024D5E;      
}
.text_p{
color: #3A0212;      
}
.text_y{
color: #544A03;      
}
.text_g{
color: #013301;      
}
.visitin img{
width: 100%; 
margin-top: 20px;
margin-bottom: 5px;    
border-radius: 10px;      
}
ul.border_f {
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
ul.border_f li{
    margin: 0.5rem;
	font-size: 1rem;
	margin-bottom: 0.5rem;
	border-bottom: dashed 1px #ff9913;
	text-indent: -1.5em;
	padding-left: 1.5em;
}
ul.border_f li i{
	color: #ff9913;
	display: inline;
	font-size: 120%;
}

@media(max-width:899px){
	.visitin{
		width:calc(100% / 2 - 20px); 
	}	
}
@media(max-width:554px){
	.visitin{
		width:calc(100% - 20px); 
	}	
}
/*カウンセリングルーム
======================================================*/
.box{
	padding: 3vh 2vw;
	background: #fff;
	border: 3px dashed #DD69CE;
	border-radius: 30px;
	height: 88%;
	position: relative;
}

.box .inner{
	border-radius: 20px;
	background: #FFEDF5;
	padding: 15px;
	margin-bottom: 20px;
}
.text_box{
	padding-left: 1.5rem;
}

/* -- 料金表 -------------- */
.menu-list {
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 justify-content: space-between;
 padding: 15px 0 0;

}

.menu-list>li {
 width: 98%;
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 padding: 5px
}

.menu-list>li p {
 display: inline-block;
 line-height: 1.5;
 padding: 0px !important;
}

.menu-list>li:before {
 background: radial-gradient(#ccc 20%, transparent 0) center center/12px 6px;
 content: "";
 display: inline-block;
 flex: 1;
 height: 3px;
 margin: 0 1em
}

@media all and (max-width: 639px) {
 
 .menu-list>li {
     width: 100%
 }

 .menu-list>li:not(:last-child) {
     margin-bottom: 10px
 }

 .menu-list>li:before {
     margin: 0 5px
 }
}

.menu-list>li .info {
 flex-basis: 100%;
 font-size: 90%;
 color: #3f3830;
 margin-top: 5px;
 padding: 5px 10px
}

.menu-list>li .info.capt {
 margin-top: 5px;
 background: #f4f4f4
}

.menu-list>li .left {
 position: relative;
 order: -1;
 max-width: 75%
}

.menu-list>li .left:after {
 content: ".";
 display: inline-block;
 width: 0;
 color: rgba(0, 0, 0, 0);
 pointer-events: none
}

.menu-list>li .left span {
 font-size: 90%;
}

.menu-list>li .right {
 /* max-width: 25%; */
 max-width: 70%;
 text-align: right;
}

/*地域活動
======================================================*/
.gridbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 5%;
}

.room_box{
	border: 3px dashed #d35c47;
	padding: 1rem 2rem;
	padding-left: 1rem;
	border-radius: 30px;
	background: #fff;
	height: 100%;
}
.about_box2,.room_box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.room_box {
  flex: 1;
  position: relative;
}

@media all and (max-width: 768px) {
.gridbox {
  display: grid;
  grid-template-columns: repeat(1, 1fr); 
  gap: 30px;
}	
	.gridbox .serv_title span{
		padding: 0 1rem;
		
	}
	.gridbox .serv_title span {
        font-size: 1.3rem!important;
    }
	.gridbox .serv_title span::before {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
}

}
/*寄付・支援
======================================================*/
.kifu tr{
	border: 1px solid #777;
}
.kifu th{
	width: 30%;
	vertical-align: top;
	background: #fff0f5;
	border-right: 1px solid #777;
	font-weight: 400;
	padding: .5rem 1rem;
}
.kifu td{
	padding: .5rem 1rem;
	background: #fff;
}

.infobox{
	padding: 0 2rem;
}
.infobox p{
	padding: 0 2rem;
}
.alink{
	padding: 1rem;
	width: 80%;
	max-width: 600px;
}

.repo-box{
	display: flex;
	gap:20px;
	align-items: stretch;	
	flex-wrap: wrap;
}
.box-child{
	width: calc(100% / 4 - 20px);
}

@media(max-width:1089px){
.box-child{
	width: calc(100% / 2 - 20px);
}	
}

@media(max-width:500px){
.box-child{
	width: 100%;
}	
}
/*Counseling
======================================================*/

.min-slider{/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:80%;
    margin:0 auto;
}
.min-slider li{
	text-align: center;
}
.min-slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.min-slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ff7a75;/*矢印の色*/
    border-right: 2px solid #ff7a75;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}




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