@charset "UTF-8";



/*=============================
  各テーマクラス
=============================*/
:root {
  /* 現在のベースカラー */
  --base-dark:   #202A5C;
  --base-light1: #E9F1F5; /* より薄く */
  --base-light2: #F4F9FB; /* さらに薄く */
  
  /* イエロー・テーマ */
  --yellow-dark:  #927A13;  /* 変更なし */
  --yellow-base:  #F3CB20;  /* 変更なし */
  --yellow-light1:#ffeda6;  /* 85% F3CB20 + 15% white */
  --yellow-light2:#FCF3D0;  /* 30% F3CB20 + 70% white */
  
  /* オレンジ・テーマ */
  --orange-dark:  #7F4C18;  /* 変更なし */
  --orange-base:  #D47E28;  /* 変更なし */
  --orange-light1:#E8BF98;  /* 85% D47E28 + 15% white */
  --orange-light2:#F4DFCC;  /* 30% D47E28 + 70% white */
  
  /* グリーン・テーマ */
  --green-dark:   #135533;  /* 変更なし */
  --green-base:   #1F8D55;  /* 変更なし */
  --green-light1: #A1D1B9;  /* 85% 1F8D55 + 15% white */
  --green-light2: #D0E8DC;  /* 30% 1F8D55 + 70% white */
  
  /* トロピカルピンク・テーマ */
  --tropical-pink-dark:   #84343E;  /* 変更なし */
  --tropical-pink-base:   #DC5767;  /* 変更なし */
  --tropical-pink-light1: #EFAFB7;  /* 85% DC5767 + 15% white */
  --tropical-pink-light2: #F7D7DB;  /* 30% DC5767 + 70% white */
  
  /* ピンク・テーマ */
  --pink-dark:    #88586D;  /* 変更なし */
  --pink-base:    #E292B6;  /* 変更なし */
  --pink-light1:  #F1CBE1;  /* 85% E292B6 + 15% white */
  --pink-light2:  #F8E5F0;  /* 30% E292B6 + 70% white */
  
  /* レッド・テーマ */
  --red-dark:     #83231E;  /* 変更なし */
  --red-base:     #DA3B32;  /* 変更なし */
  --red-light1:   #EDABA7;  /* 85% DA3B32 + 15% white */
  --red-light2:   #F6D5D3;  /* 30% DA3B32 + 70% white */
  
  /* ライムグリーン・テーマ */
  --lime-green-dark:  #677711;  /* 変更なし */
  --lime-green-base:  #ABC61C;  /* 変更なし */
  --lime-green-light1:#D4E391;  /* 85% ABC61C + 15% white */
  --lime-green-light2:#EAF1C8;  /* 30% ABC61C + 70% white */
  
  /* ロイヤルブルー・テーマ */
  --royal-blue-dark:  #0E4A60;  /* 変更なし */
  --royal-blue-base:  #187BA0;  /* 変更なし */
  --royal-blue-light1:#97C9D8;  /* 85% 187BA0 + 15% white */
  --royal-blue-light2:#CBEDF9;  /* 30% 187BA0 + 70% white */
}






/*--------------------------
.topHeaderMain
---------------------------- */
.top_mainContent_inner{
	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:50px;
}

/*--------------------------
.topHeaderMain
---------------------------- */
.topHeaderMain{
	position:relative;
}
.topHeaderMain span.logo{
	position:absolute;
	text-align:center;
	width:100%;
	display:block;
	top:40px;
}
.topHeaderMain span.logo img{
	width:100%;
	max-width:275px;
	height:auto;
}
.topHeaderMain img.gaikan{
	width:100%;
	height:auto;
}
@media screen and (max-width: 767px) {
	.topHeaderMain{
		height:100vh;
		position:relative;
	}

	.topHeaderMain span.logo {
		position: absolute;
		text-align: center;
		width: 100%;
		display: block;
		top: 50%;
		transform: translateY(-50%);
	}

	.topHeaderMain img.gaikan{
		display:none;
	}
}
/*--------------------------
topNavPics
---------------------------- */
.topNavPics{
	width:100%;
	max-width:calc( 100% - 40px);
	margin:0px auto ;

	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:43px;
}
.topNavPics li{
}
/* ----- */
.topNavPics_tit{
	margin-bottom:15px;
}
.topNavPics_tit .ja{
	display:block;
	font-size:24px;
}
.topNavPics_tit .en{
	display:block;
	font-size:16px;
}
/* ---- */
.topNavPics .pic{
	position:relative;
}
.topNavPics .pic:before{
	display:block;
	content:"";
	width:39px;
	height:39px;
	background:url(../img/topNavPics.png) no-repeat center center;
	background-size:100% auto;
	position:absolute;
	bottom:10px;
	left:10px;
	z-index:10;
}
.topNavPics .pic a{
	position:relative;
	z-index:1;
}
.topNavPics .pic a img{
	width:100%;
	height:auto;
	vertical-align:bottom;
	transition: opacity 0.5s ease;
}
.topNavPics .pic a:hover img{
      opacity: 0.8;
}
@media screen and (max-width: 767px) {
	.topNavPics{
		position:relative;
	}
}

/*--------------------------
topBtnLnk
---------------------------- */
.topBtnLnkBox{
	background:#D8E7EE;
	padding:30px 0;
}
.topBtnLnk{
	width:195px;
	margin:0 auto;

	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:10px;
}
.topBtnLnk li{
}
.topBtnLnk li a{

	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;

	font-size:16px;
	color:#000;
	text-decoration:none;
}
.topBtnLnk li a:hover{
	color:#f00;
}

/*--------------------------
.topBanners{
---------------------------- */
.topBanners{
	width:100%;
	max-width:290px;
	margin:0 auto;

	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
}
.topBanners li{
}
.topBanners li a{
	display:block;
	text-decoration:none;
}
.topBanners li a img{
	width:100%;
	height:auto;

	transition: opacity 0.5s ease;
}
.topBanners li a:hover img{
      opacity: 0.8;
}

/*--------------------------
topInfo
---------------------------- */
.topInfo{
	width:100%;
	max-width:calc( 100% - 40px);
	margin:0 auto ;
	font-size:14px;

	background: #D8E7EE;
    padding: 15px;
}

/*--------------------------
.pageHeader
---------------------------- */
.pageHeader{
	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	justify-content:center;
	align-items:center;
	gap:9px 0;

	height:225px;
}
.pageHeader_tit{
}
.pageHeader_tit .logo{
	display:block;
	text-align:center;
}
.pageHeader_tit .logo img{
	width:100%;
	max-width:275px;
	height:auto;
}
.pageHeader_tit .ja{
	display:block;
	text-align:center;
	color:var(--base-dark);
	font-size:27px;
}
.pageHeader_tit .en{
	display:block;
	text-align:center;
	color:#858585;
	font-size:18px;
}

/* 1.保護者支援プログラム */
body.page-support .pageHeader_tit .ja{ color:var( --yellow-base); }
body.page-support .pageHeader_tit .en{ color:var( --yellow-base); }

/* 2.採用情報 */
body.page-recruit .pageHeader_tit .ja{ color:var( --orange-base); }
body.page-recruit .pageHeader_tit .en{ color:var( --orange-base); }

/* 3.保育・教育方針 */
body.page-houshin .pageHeader_tit .ja{ color:var( --green-base); }
body.page-houshin .pageHeader_tit .en{ color:var( --green-base); }

/* 4.保育プログラム */
body.page-hoiku .pageHeader_tit .ja{ color:var( --royal-blue-base); }
body.page-hoiku .pageHeader_tit .en{ color:var( --royal-blue-base); }

/* 6.お問い合わせ */
body.page-contact .pageHeader_tit .ja{ color:var( --red-base); }
body.page-contact .pageHeader_tit .en{ color:var( --red-base); }

/* 7.入園案内 */
body.page-admissions .pageHeader_tit .ja{ color:var( --pink-base); }
body.page-admissions .pageHeader_tit .en{ color:var( --pink-base); }

/* 8.交通アクセス */
body.page-access .pageHeader_tit .ja{ color:var( --lime-green-base); }
body.page-access .pageHeader_tit .en{ color:var( --lime-green-base); }



@media screen and (max-width: 767px) {
	.pageHeader{
		height:120px;
		position:relative;
	}
	.pageHeader:before{
		position:absolute;
		top:-25px;
		display:block;
		content:"";
		width:200px;
		height:50px;
		background:url(../img/sp/sp_down.png) no-repeat center center;
		background-size:100% auto;
		cursor: pointer;
		pointer-events: auto; /* 疑似要素のクリックを有効化 */
	}
	.pageHeader_tit .logo{
		text-align:center;
	}
	.pageHeader_tit .logo img{
		max-width:150px;
	}
	.pageHeader_tit .ja{
		font-size:20px;
	}
	.pageHeader_tit .en{
		display:none;
	}
}

/*--------------------------
.pageNav
---------------------------- */
.pageNav{
	background: linear-gradient(to bottom right, #C8EDFF, #D8E7EE);
	padding:30px 25px;
}
.pageNav_lst{
	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:9px 0;
}
.pageNav_lst_item{
}
.pageNav_lst_item a{
	display:block;
	background-color:#fff;
	background-image:url(../img/marker_pagedown.png);
	background-repeat:no-repeat;
	background-position:right 15px center;
	color:var(--base-dark);
	text-decoration:none;
	padding:8px 20px 8px 20px;
	font-weight:bold;
	font-size:14px;
}
.pageNav_lst_item a:hover{
	background-color:#94d5f3;
}

/* 1.保護者支援プログラム */
body.page-support .pageNav{ background:var( --yellow-light2); }
body.page-support .pageNav a{ color:var( --yellow-base); }
body.page-support .pageNav a{ background-image:url(../img/marker_pagedown_yellow.png); }
body.page-support .pageNav_lst_item a:hover{ background-color:var(  --yellow-light1); }


/* 2.採用情報 */
body.page-recruit .pageNav{ background:var( --orange-light2); }
body.page-recruit .pageNav a{ color:var( --orange-base); }
body.page-recruit .pageNav a{ background-image:url(../img/marker_pagedown_orange.png); }
body.page-recruit .pageNav_lst_item a:hover{ background-color:var(  --orange-light1); }

/* 3.保育・教育方針 */
body.page-houshin .pageNav{ background:var( --green-light2); }
body.page-houshin .pageNav a{ color:var( --green-base); }
body.page-houshin .pageNav a{ background-image:url(../img/marker_pagedown_green.png); }
body.page-houshin .pageNav_lst_item a:hover{ background-color:var( --green-light1); }

/* 4.保育プログラム */
body.page-hoiku .pageNav{ background:var( --royal-blue-light2); }
body.page-hoiku .pageNav a{ color:var( --royal-blue-base); }
body.page-hoiku .pageNav a{ background-image:url(../img/marker_pagedown_royal-blue.png); }
body.page-hoiku .pageNav_lst_item a:hover{ background-color:var(  --royal-blue-light1); }

/* 6.お問い合わせ */
body.page-contact .pageNav{ background:var( --red-light2); }
body.page-contact .pageNav a{ color:var( --red-base); }
body.page-contact .pageNav a{ background-image:url(../img/marker_pagedown_red.png); }
body.page-contact .pageNav_lst_item a:hover{ background-color:var(  --red-light1); }

/* 7.入園案内 */
body.page-admissions .pageNav{background:var( --pink-light2); }
body.page-admissions .pageNav a{ color:var( --pink-base); }
body.page-admissions .pageNav a{ background-image:url(../img/marker_pagedown_pink.png); }
body.page-admissions .pageNav_lst_item a:hover{ background-color:var(  --pink-light1); }

/* 8.交通アクセス */
body.page-access .pageNav{ background:var( --lime-green-light2); }
body.page-access .pageNav a{ color:var( --lime-green-base); }
body.page-access .pageNav a{ background-image:url(../img/marker_pagedown_lime-green.png); }
body.page-access .pageNav_lst_item a:hover{ background-color:var(  --lime-green-light1); }


/*--------------------------
.box
---------------------------- */
.accordion-content{
	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:20px 0;
	padding-bottom:40px;
}
.accordion-content .box{
	width:100%;
	max-width:calc( 100% - 40px);
	margin:20px auto ;

	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:25px 0;
}
/*--------------------------
.sectionArea
---------------------------- */
.section-title{
	color:#fff;
	background:#77ABDA url(../img/section-title-down.png) no-repeat right 10px center;
	font-size:22px;
	padding:11px 15px;
	border-bottom:solid 2px #fff;
}
.section-title.active{
	background-image:url(../img/section-title-up.png);
}
.section-title:hover{
	background-color:#67b4f9;
	cursor:pointer;
}

/* 1.保護者支援プログラム */
body.page-support .section-title{ background-color:var( --yellow-base); }

/* 2.採用情報 */
body.page-recruit .section-title{ background-color:var( --orange-base); }

/* 3.保育・教育方針 */
body.page-houshin .section-title{ background-color:var( --green-base); }

/* 4.保育プログラム */
body.page-hoiku .section-title{ background-color:var( --royal-blue-base); }

/* 6.お問い合わせ */
body.page-contact .section-title{ background:-colorvar( --red-base); }

/* 7.入園案内 */
body.page-admissions .section-title{background-color:var( --pink-base); }

/* 8.交通アクセス */
body.page-access .section-title{ background-color:var( --lime-green-base); }


@media screen and (max-width: 767px) {
	.section-title{
		font-size:19px;
		padding:8px 12px;
	}
}
/*--------------------------
.contentBox
---------------------------- */
.contentBox{
}
.contentBox .txt{
	font-size:14px;
}
.contentBox .pic img{
	width:100%;
	height:auto;
	vertical-align:bottom;
}
/*--------------------------
.contentLst_tit
---------------------------- */
.contentLst_tit{
	text-align:center;
	font-weight:bold;
	font-size:16px;
	color:var(--base-dark);
}

.box-red .contentLst_tit{
	color:#752222;
}



/* 1.保護者支援プログラム */
body.page-support .contentLst_tit{ color:var( --yellow-base); }

/* 2.採用情報 */
body.page-recruit .contentLst_tit{ color:var( --orange-base); }

/* 3.保育・教育方針 */
body.page-houshin .contentLst_tit{ color:var( --green-base); }

/* 4.保育プログラム */
body.page-hoiku .contentLst_tit{ color:var( --royal-blue-base); }

/* 6.お問い合わせ */
body.page-contact .contentLst_tit{ color:var( --red-base); }

/* 7.入園案内 */
body.page-admissions .contentLst_tit{ color:var( --pink-base); }

/* 8.交通アクセス */
body.page-access .contentLst_tit{ color:var( --lime-green-base); }



/*--------------------------
.contentLst
---------------------------- */
.contentLst{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:25px 0;
}
.contentLst_item{
}
.contentLst_item_tit{
	font-weight:bold;
	font-size:14px;
	margin-bottom:8px;
	color:#1A1A1A;
}
.contentLst_item_cnt{
	background:#D8E7EE;
	padding:15px;
}
.box-red .contentLst_item_cnt{
	background:#FFE4D1;
}
.box-red02 .contentLst_item_cnt{
	background:#EEE4D8;
}
.box-green .contentLst_item_cnt{
	background:#D8EEDD;
}
/* --- */
.contentLst_item_cnt_tit{
	margin-bottom:0px !important;
}
.contentLst_item_cnt * {
	font-size:14px;
	margin-bottom:1em;
}
.contentLst_item_cnt *:last-child {
	margin-bottom:0;
}


.contentLst_item_cnt_sub{
	margin-top:8px;
	background:#FFE4D1;
	padding:5px 15px;
}
.contentLst_item_cnt_sub .txt{
	font-size:14px;
}



/* 1.保護者支援プログラム */
body.page-support .contentLst_item_cnt{ background:var( --yellow-light2); }

/* 2.採用情報 */
body.page-recruit .contentLst_item_cnt{ background:var( --orange-light2); }

/* 3.保育・教育方針 */
body.page-houshin .contentLst_item_cnt{ background:var( --green-light2); }

/* 4.保育プログラム */
body.page-hoiku .contentLst_item_cnt{ background:var( --royal-blue-light2); }

/* 6.お問い合わせ */
body.page-contact .contentLst_item_cnt{ background:var( --red-light2); }

/* 7.入園案内 */
body.page-admissions .contentLst_item_cnt{background:var( --pink-light2); }

/* 8.交通アクセス */
body.page-access .contentLst_item_cnt{ background:var( --lime-green-light2); }




@media screen and (max-width: 767px) {
	.contentLst_item_cnt{
		padding:10px;
	}
}

/*--------------------------
.btnArea
---------------------------- */
.btnArea{
	width:95%;
	margin:0 auto;
}
.btnArea a{
	display:block;
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	padding:10px 20px;
	background-color:var(--base-dark);
	background-image:url(../img/section-title-down.png);
	background-repeat:no-repeat;
	background-position:right 15px center;
}
.btnArea a:hover{
	background-color:#810303;
}


/*--------------------------
.child-accordion
---------------------------- */
.child-accordion{
}
.child-section-title{
	color:var(--base-dark);
	border-bottom:solid 2px var(--base-dark);
	padding-bottom:5px;
	margin-bottom:15px;
	font-size:16px;
	font-weight:bold;
	background-image:url(../img/child-section-title-down.png);
	background-repeat:no-repeat;
	background-position:right 5px center;

}
.child-section-title.active{
	background-image:url(../img/child-section-title-up.png);
}



body.page-support .child-section-title{ background-image:url(../img/child-section-title-down-yellow.png); }
body.page-support .child-section-title.active{ background-image:url(../img/child-section-title-up-yellow.png); }


.child-section-title:hover{
	cursor:pointer;
}
.child-accordion-content{
}
.child-accordion-content .contentBox{
	margin-bottom:10px;
}


/* 1.保護者支援プログラム */
body.page-support .child-section-title{ color:var( --yellow-base); }

/* 2.採用情報 */
body.page-recruit .child-section-title{ color:var( --orange-base); }

/* 3.保育・教育方針 */
body.page-houshin .child-section-title{ color:var( --green-base); }

/* 4.保育プログラム */
body.page-hoiku .child-section-title{ color:var( --royal-blue-base); }

/* 6.お問い合わせ */
body.page-contact .child-section-title{ color:var( --red-base); }

/* 7.入園案内 */
body.page-admissions .child-section-title{ color:var( --pink-base); }

/* 8.交通アクセス */
body.page-access .child-section-title{ color:var( --lime-green-base); }



/*--------------------------
.galleryLst
---------------------------- */
.galleryLst{
	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:10px 0;
}
.galleryLst li{
}
.galleryLst li img{
	width:100%;
	height:auto;
	vertical-align:bottom;
	border:solid 1px #ccc;
}
/*--------------------------
.dayflow
---------------------------- */
.dayflow{
	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:15px 0;
}
.dayflow li{
}
.dayflow li .tit{
	font-weight:bold;
	margin-bottom:10px;
}
.dayflow li .tit .tit-main{
	color:var(--base-dark);
	font-size:16px;
}
.dayflow li .tit .tit-sub{
	color:#7B7B7B;
	font-size:15px;
}
.dayflow li .cnt{
	border-left: solid 3px var(--base-dark);
	padding-left:10px;
	margin-left:10px;
	font-size:14px;
}
/*--------------------------
.otherClassLst
---------------------------- */
.otherClassLst{
}
.otherClassLst_item{
	padding:15px 0;
	background:#fff;
}
.otherClassLst_item:nth-child(even){
	background:#D8E7EE;
}
.otherClassLst_item .box{
	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:15px 0;
}
.otherClassLst_item .pic{
}
.otherClassLst_item .pic img{
	width:100%;
	height:auto;
}
.otherClassLst_item .tit{
	text-align:center;
	color:var(--base-dark);
	font-weight:bold;
	font-size:20px;
}
.otherClassLst_item .txt{
	font-size:14px;
}

/*  otherClass_tbl  */
.otherClass_tbl{
	width:100%;
}
.otherClass_tbl tr{
	border-bottom:solid 1px #CCCCCC;
}
.otherClass_tbl tr:first-child{
	border-top:solid 1px #CCCCCC;
}
.otherClass_tbl tr th{
	padding:8px 7px;
	background:#202a5c;
	color:#fff;
	font-size:14px;
	font-weight:bold;
}
.otherClass_tbl tr td{
	padding:8px 7px;
	background:#fff;
	font-size:14px;
}
/*--------------------------
yearSchedules
---------------------------- */
.yearSchedules{
	margin-top:20px;
	display:flex;
	flex-wrap:wrap;
	flex-flow: column;	
	gap:9px 0;
}
.yearSchedules li{
	background-image:url(../img/circle-mark-yellow.png);
	background-repeat:no-repeat;
	background-position:0 7px;
	padding-left:17px;
}
.yearSchedules li .tit{
	font-weight:bold;
	font-size:14px;
}
.yearSchedules li .txt{
	font-size:14px;
}


/*--------------------------
 RightBox（画像ポップアップ）
---------------------------- */
.galleryLst {
  list-style: none;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0;
}

.galleryLst li img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.galleryLst li img:hover {
  transform: scale(1.03);
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.modal-content {
  max-width: 80%;
  max-height: 80%;
  border-radius: 0.5rem;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  color: white;
  cursor: pointer;
  user-select: none;
  padding: 0 15px;
}

.modal-nav.prev { left: 20px; }
.modal-nav.next { right: 20px; }

.modal-caption {
  color: #fff;
  text-align: center;
  margin-top: 1rem;
  font-size: 1.1rem;
}