


/* ====================　MO　==================== */


div.guardwrap{
    position:relative;
    width:100%;
    height:100%;
}
span.guard{
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-image:url(../blank.gif);
z-index:1;
}


.en{text-align:right;}

.slickimg{
      width:100%;
      margin:0 auto;
	height:auto;
	overflow: hidden;
position:relative;

}



.imgtxt{

posityon:absolute;background-color:rgba(255,255,255,0.8);color:#000;position:absolute;bottom:0;left:0;display:none;line-height:50px;width:100%;padding-left:10px;
}


.fade img{
	width:100%;
	margin:0 auto;
}



h2.none{display:none;}


div.clear{clear:both;}

span.new{
	margin-left:2px;
	color:#fff;
	font-size:0.6em;
	font-weight:bold;
	background-color:#cc0000;
	padding-right:2px;
	padding-left:2px;
	display: inline-block;
    transform: rotate(-8deg);
    vertical-align : 0.5em;
	}
	
span.member{
	color:#cc0000;
	font-size:1em;
	font-weight:bold;
	border:solid 1px #cc0000;
	padding-right:5px;
	padding-left:5px;
	margin-bottom: 10px;
	display: inline-block;
	}

/* flex設定 */

.flex_test-box {
    background-color: #fff;     /* 背景色指定 */
    padding-bottom: 10px;             /* 余白指定 */
    height: ;              /* 高さ指定 */
    display: flex;              /* フレックスボックスにする */
    justify-content:center;    /* 中央揃え */
    flex-wrap: wrap;            /* 折り返し指定 */
    align-content:stretch;      /* 折り返し時の配置指定 */
    align-items:stretch;        /* 縦の位置指定 */
}
 
.flex_test-item {
    padding: 10px;
    color: ;               /* 文字色 */
    margin:  5px;              /* 外側の余白 */
    border-radius:  10px;        /* 角丸指定 */
    font-size:          /* 文字サイズ */
    width: 200px;               /* 幅指定 */
    text-align:  center;        /* 文字中央揃え */
}
.flex_test-item a{
	color:#008000;
	text-decoration:none;
}
.flex_test-item a:hover{
	color:#008000;
	background-color:#CCFF66;
}
 
.flex_test-item:nth-child(1) {
    background-color:  #fff; /* 背景色指定 */
    border:3px solid #663300; /* 枠線指定 */
    width: 40%;
}
 
.flex_test-item:nth-child(2) {
    background-color:  #fff; /* 背景色指定 */
    border:3px solid #990033; /* 枠線指定 */
    width: 40%;
}
 
.flex_test-item:nth-child(3) {
    background-color:  #fff; /* 背景色指定 */
    border:3px solid #663399; /* 枠線指定 */
    width: 40%;
}
 
.flex_test-item:nth-child(4) {
    background-color:  #fff; /* 背景色指定 */
    border:3px solid #336600; /* 枠線指定 */
    width: 40%;
}

/* ここまで */


div.news{
	text-align:center;
	padding:4px;
	margin-bottom:10px;
	border:4px double #cc0000;

	}
div.news a{
	color:#cc0000;
	text-decoration:none;
	}
div.news a:hover{
	display: block;
	color:#fff;
	background-color:#cc0000;
	}

div.news1{
	width:80%;
	text-align:center;
	padding:10px 4px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom:10px;
	background-color:#fffff0; /* クリーム色 */
	border:2px solid #99cc99; /* 枠線　少し薄いミドリ */
	border-radius: 10px;/*角丸*/
	}
div.news1 a{
	color:#008000; /* 文字色ミドリ */
	text-decoration:none;
	}
div.news1 a:hover{
	color:#008000; /* 文字色ミドリ */
	background-color:#CCFF66; /* カーソルが乗ると黄ミドリ */
	}

div.news2{
	display:block;
	width:80%;
	text-align:center;
	padding:10px 4px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom:10px;
	background-color:#f0ffff ; /* 薄水色 */
	border:2px solid #87ceeb; /* 枠線　水色 */
	border-radius: 10px; /*角丸*/
	}	
div.news2 a{
	color:#663300; /* 茶色 */
	text-decoration:none;
	}
div.news2 a:hover{
	color:#663300; /* 茶色 */
	background-color:#afeeee  ; /* カーソルが乗ると薄い蒼 */
	text-decoration:none;
	}

div.news3{
	display:block;
	width:80%;
	text-align:center;
	padding:10px 4px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom:10px;
	background-color:#ffe0e0; /*パステルピンク*/
	border-radius: 10px; /*角丸*/
	background-image: url(../img/online_sakura.png), url(../img/online_sakura_right.png); /* 桜画像あり */
	background-position: 2% 2%,98% 98%;
	background-repeat: no-repeat;
	background-size: 15%,15%;
	}
div.news3 a{
	color:#008000;
	text-decoration:none;
	}
div.news4{
	width:80%;
	text-align:center;
	padding:10px 4px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom:10px;
	background-color:#cce5ff; /*パステルブルー（水色）*/
	border-radius: 10px; /*角丸*/
	}
div.news4 a{
	color:#0033cc; /*青*/
	text-decoration:none;
	}
div.news4 a:hover{
	color:#fff; /*白*/
	background-color:#0033cc; /*青*/
	}
div.news5{
	display:block;
	width:80%;
	text-align:center;
	padding:10px 4px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom:10px;
	background-color:#ffe0e0; /*パステルピンク*/
	border:2px solid #ffc0cb; /* 枠線　薄ピンク */
	border-radius: 10px;/*角丸*/
	}
div.news5 a{
	color:#663300; /* 茶色 */
	text-decoration:none;
	}
div.news5 a:hover{
	color:#663300; /* 茶色 */
	background-color:#ffc0cb; /* カーソルが乗ると薄ピンク */
	}
div.news5-flex_list {
	 display: flex; /* display: flexで横並び　250702 */
	justify-content: center; /* 真ん中配置 */
	}
div.news5-flex_list dt,dd {
	margin:0 10px; /*間にスペースを加える */
	}
ul.list{
	display:block;
	padding:0;
	margin:0 auto;
	text-align:center;
}

ul.list li{
	display:inline-block;
	vertical-align: top;
	list-style-type:none;
	margin:0.2em;
	width:30%;
}
.list a:link{
	display:block;
	border:1px solid #cc0066;
	color:#cc0066;
	padding:0.5em;
	text-decoration:none;
	background-color:#fff;
}
.list a:hover{
	border:1px solid #cc0066;
	background-color:#cc6699;
	color:#fff;
	font-weight:bold;
}




/* ==========================　サブイメージ　========================== */


.subimg{width: 100%;}

.subimg a:hover img{
    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;
}

.disp-inBlock{display:inline-block;}
.subimg img{width:100%;}

.itemBox{margin:3%;width:42%;}
div.box{display:block;margin:0 auto;}

.subimg p.title{
	display:inline-block;
	margin:0;padding:0;
	color:#cc0033;
	font-weight:normal;
	font-size:0.9em;
	background-color:#FFFFFF;
	padding:2px;
	position:relative;
	top:20px;
	left:-5px;
	z-index:1;
    transform: rotate(-15deg); 
    -moz-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg);
	text-align:center;
}

/* サブイメージ２段目　Kidsコース テーブル仕様*/
.table-container {
	display: grid;
	gap: 5px;
	grid-template-rows: 1;
	grid-template-columns: repeat(2, 1fr);
	}
.cell {
	margin:6%;
	width:auto;
	
	}

.table-container a:hover img{
    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;
}

.table-container p.title{
	display:inline-block;
	margin:0;padding:0;
	color:#cc0033;
	font-weight:normal;
	font-size:0.9em;
	background-color:#FFFFFF;
	padding:2px;
	position:relative;
	top:20px;
	left:-5px;
	z-index:1;
    transform: rotate(-15deg); 
    -moz-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg);
}

.table-container p.comment{
	font-weight:normal;
	font-size:0.8em;
	text-decoration:none;
	line-height:1.5em;
	padding:10px 0px;
	position:relative;
	text-align:left;
	}
.table-container p.comment a:link{
	color:#cc0033;
	font-weight:normal;
	text-decoration:none;
	}
.table-container p.comment a:hover{
	color:#cc0033;
	}
.table-container p.comment a:visited{
	color:#cc0033;
	}
	


/* ====================　サブイメージここまで　==================== */

/* ==========================　アクティビティ　========================== */
.activities{width: 100%;margin-top:-20px;}

.activities a:hover img{

    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;

}

.disp-inBlock2{display:inline-block;}
.activities img{width:100%;}
.itemBox2{margin:5%;width:39%;}
div.box2{display:block;margin:0 auto;}

.activities p.title2{
	display:inline-block;
	margin:0;padding:0;
	color:#cc0033;
	font-weight:normal;
	font-size:0.9em;
	background-color:#FFFFFF;
	padding:2px;
	position:relative;
	top:20px;
	left:-5px;
	z-index:1;
    transform: rotate(-15deg); 
    -moz-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg);
	text-align:center;
}


/* ====================　アクティビティここまで　==================== */

/* ==========================　instagram　========================== */

.instagram a:hover img{

    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;

}

.instagram{width: 100%; text-align:center;}
.disp-inBlock3{display:inline-block;}
.instagram img{width:100%;}
.itemBox3{margin:2%;width:28%;}
div.box3{display:block;margin:0 auto;}

/* ====================　instagram　==================== */


.snappc{display:none;}

.instalink{display:block;overflow:hidden;}
.instaimg{position:absolute;width:100%;}



h4.contentstitle{
	clear:both;
	color:#000;
	border-top:1px solid #cc0033;
	border-bottom:1px solid #cc0033;
	margin:0 0 10px 0;
	padding:5px 0;


	}
	
	ul#activities{
		list-style-type:none;
		margin:0;
		padding:0;
		width:100%;
		text-align:center;

		}




/* ===========================　ipad　=========================== */

@media only screen and (min-width: 481px) {
	


.snappc{display:block;}
.snapmo{display:none;}


/* ==========================　サブイメージ　========================== */

.subimg{width: 100%;}
.disp-inBlock{display:inline-block;}
.subimg img{width:100%;}

.itemBox{margin:1%;width:28%;}
div.box{display:block;margin:0 auto;}

.subimg p.title{
	display:inline-block;
	margin:0;padding:0;
	color:#cc0033;
	font-weight:normal;
	font-size:0.9em;
	background-color:#FFFFFF;
	padding:2px;
	position:relative;
	top:20px;
	left:-5px;
	z-index:1;
    transform: rotate(-15deg); 
    -moz-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg);
}

.table-container {
	display: grid;
	gap: 0px;
	grid-template-rows: 1;
	grid-template-columns: repeat(3, 1fr);
	}
.cell {
	margin:5%;
	width:auto;
	}
	

/* ====================　サブイメージここまで　==================== */



/* ==========================　アクティビティ　========================== */
.activities{width: 100%;}
.disp-inBlock2{display:inline-block;}
.activities img{width:100%;}
.itemBox2{margin:3%;width:26%;}
div.box2{display:block;margin:0 auto;}

.activities p.title2{
	display:inline-block;
	margin:0;padding:0;
	color:#cc0033;
	font-weight:normal;
	font-size:0.9em;
	background-color:#FFFFFF;
	padding:2px;
	position:relative;
	top:20px;
	left:-5px;
	z-index:1;
    transform: rotate(-15deg); 
    -moz-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg);
}


/* ====================　アクティビティここまで　==================== */

/* ==========================　instagram　========================== */
.instagram{width: 100%; text-align:center;}
.disp-inBlock3{display:inline-block;}
.instagram img{width:100%;}
.itemBox3{margin:1%;width:15%;}
div.box3{display:block;margin:0 auto;}

/* ====================　instagram　==================== */



}






/* ===========================　PC　=========================== */

@media only screen and (min-width: 769px) {



#main{width:100%;margin:0;padding:0;}




/* ==========================　サブイメージ　========================== */

.subimg{width: 100%;}
.disp-inBlock{display:inline-block;}
.subimg img{width:100%;}

.itemBox{margin:1%;width:17.5%;}
div.box{display:block;margin:0 auto;}

.subimg p.title{
	display:inline-block;
	margin:0;padding:0;
	color:#cc0033;
	font-weight:normal;
	font-size:0.9em;
	background-color:#FFFFFF;
	padding:2px;
	position:relative;
	top:20px;
	left:-5px;
	z-index:1;
    transform: rotate(-15deg); 
    -moz-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg);
}

/* サブイメージ２段目　Kidsコース テーブル仕様*/

.table-container {
display: grid;
gap: 0px;
grid-template-rows: 1;
grid-template-columns: repeat(5, 1fr);
}
.cell {
margin:5%;
width:auto;
}

.table-container p.title{
	display:inline-block;
	margin:0;padding:0;
	color:#cc0033;
	font-weight:normal;
	font-size:0.9em;
	background-color:#FFFFFF;
	padding:2px;
	position:relative;
	top:20px;
	left:-5px;
	z-index:1;
    transform: rotate(-15deg); 
    -moz-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg);
}

.table-container p.comment{
	font-weight:normal;
	font-size:0.8em;
	text-decoration:none;
	line-height:1.5em;
	}
.table-container p.comment a:link{
	color:#cc0033;
	font-weight:normal;
	text-decoration:none;
	}
.table-container p.comment a:hover{
	color:#cc0033;
	}
.table-container p.comment a:visited{
	color:#cc0033;
	}
	


/* ====================　サブイメージここまで　==================== */



/* ==========================　アクティビティ　========================== */
.activities{width: 100%;}
.disp-inBlock2{display:inline-block;}
.activities img{width:100%;}
.itemBox2{margin:2.7%;width:14.5%;}
div.box2{display:block;margin:0 auto;}

.activities p.title2{
	display:inline-block;
	margin:0;padding:0;
	color:#cc0033;
	font-weight:normal;
	font-size:0.9em;
	background-color:#FFFFFF;
	padding:2px;
	position:relative;
	top:20px;
	left:-5px;
	z-index:1;
    transform: rotate(-15deg); 
    -moz-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg);
}


/* ====================　アクティビティここまで　==================== */

/* ==========================　instagram　========================== */
.instagram{width: 100%;text-align:center;}
.disp-inBlock3{display:inline-block;}
.instagram img{width:100%;}
.itemBox3{margin:0.5%;width:8%;}
div.box3{display:block;margin:0 auto;}

/* ====================　instagram　==================== */





/*  　テスト用    */


ul#nav2 li h3.nav3{background-color:#666;color:#FFFFFF;}
ul#nav2 li h3.nav4{border:1px solid #ccc;background-color:#fff;color:#cc0033;}
ul#nav2 li h3.nav5{border:1px solid #cc0033;background-color:#fff;color:#333;}


/*          テスト用終わり       */



<!--
	#wrapharf{
		clear:both;
		width:100%;


		}
		
	#wrapharf1{
		float:left;
		width:50%;


		}

	#wrapharf2{
		float:right;
		width:47%;

		}
-->

}









