.wrapper
{
	clear: both;
	width: 980px ;
	margin:  0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 5px ;		 /*上下左右の余白を0にしておく */
}
.container
{
	display: grid;
	gap: 5px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto auto auto auto auto auto;
}
.item
{
/*	background: #ddd; #e7f7e4;*/
	padding: 0;
	border-radius: 0px;
/*	border: 2px solid #abdfa1; */
}
/**** 画像切り替えエリア　****/
.box-item1
{
	grid-column: 1 / 11;
	grid-row: 1 ;
	padding: 3px;
}
/**** 切り替わりの画面の高さはここのheightで指定 ****/
#photo {
	width: 975px;
	height: 300px; 
	text-align: center;
	overflow: hidden;
	position: relative;
}

#photo img 
{
	top: 0;
	left: 0;
	position: absolute;
}
/*****************************/

/**** お知らせのエリア　****/

.box-item2
{
	background:#edeaff;
	grid-column: 1 / 9;
	grid-row: 4;
	margin: 0 0;
	padding: 0 15px;
/*	background: url("../images/info-back.jpg") repeat-y 0 0; */
	color: #2c2c2f;
	border-top: solid 3px #8e91de;
	border-bottom: solid 3px #8e91de;
}
.listinfo h1
{
	position: relative;
	padding: 0;
	font-size: 18px;
}
.listinfo p
{
	text-align: right;
}
.listinfo dt
{
	font-size: 12px;
	padding: 1px 0 0 20px;
	float:left;
	clear:left;
	width:auto;
	background: url("../images/dt.gif") no-repeat 0 0;
}

.listinfo dd
{
	text-align: left;
	font-size: 14px;
/*	float:left;*/
	padding: 1px 0 10px 60px;
}
.listinfo dd a {
	text-decoration: none;
	font-weight: bold;
	color: #0360ed;
}
.listinfo dd a:hover {
	text-decoration: underline;
	font-weight: bold;
  	color: #f35;
}
.listinfo p a {
	font-weight: bold;
	color: #0360ed;
}
.listinfo p a:hover {
	font-weight: bold;
  	color: #f35;
}
/*****************************/

/**** プログラムお誘いのエリア　****/
.box-item3
{
	background: #edeaff;
	grid-column: 1 / 11;
	grid-row: 2;
	margin: 0 0;
	padding: 0 15px;
	border-top: solid 3px #8e91de;
	border-bottom: solid 3px #8e91de;
}
.program
{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}
.program-box31
{
}
.program-box31 h1
{
	padding: 0;
	font-size: 18px;
}
.program-box31 p
{
	font-size: 14px;
	line-height: 1.6em;
	padding-left: 15px;
}
.program-box31 p a
{
	color: #0360ed;
	font-weight: bold;
	text-decoration: none;
}
.program-box31 p a:hover
{
  	color: #f35;
	font-weight: bold;
	text-decoration: underline;
}
.program-box32
{
	margin-left: 3%;
	padding-top: 50px;
}
.program-box32 img
{
	width: 380px;
	height: auto;
}
/*****************************/

/**** YouTubeのエリア　****/
.box-item6
{
	background: #edeaff;
	grid-column: 1 / 11;
	grid-row: 3;
	margin: 0 0;
	padding: 0 15px;
	border-top: solid 3px #8e91de;
	border-bottom: solid 3px #8e91de;
}
.youtube
{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}
.program-box61
{
}
.program-box61 h1
{
	padding: 0;
	font-size: 18px;
}
.program-box61 p
{
	font-size: 14px;
	line-height: 1.6em;
	padding-left: 15px;
}
.program-box61 p a
{
	color: #0360ed;
	font-weight: bold;
	text-decoration: none;
}
.program-box61 p a:hover
{
  	color: #f35;
	font-weight: bold;
	text-decoration: underline;
}
.program-box62
{
	margin-left: 3%;
	padding-top: 50px;
	padding-bottom: 20px;
}
.program-box62 img
{
	width: 340px;
	height: auto;
	border-radius: 20px;       /* 角丸のサイズ指定 */	

}
/*****************************/

/**** スタッフブログのエリア　****/
.box-item4
{
	background: #edeaff;
	grid-column: 9 / 11;
	grid-row:4;
	margin: 0 0;
	padding: 0 15px;
	border-top: solid 3px #8e91de;
	border-bottom: solid 3px #8e91de;
}
.item
{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	background: #f7f5ff;
}
.blog
{
	padding: 0;
}
.blog-box1
{
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 0;
}
.blog-box1 h1
{
	padding: 0;
	font-size: 18px;
}
.blog-box2
{
	grid-column: 1;
	grid-row: 2;
}
.link
{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto auto auto auto;
	padding-bottom: 15px;
}
.link-box1
{
	grid-column: 1;
	grid-row: 1;
	padding: 0px 15px 2px 15px;
}
.link-box1 h3
{
	padding: 0;
	font-size: 16px;
	border-bottom: solid 2px #a8aade; 
}
.link-box1 img
{
	width: 120px;
	height: auto;
}
.link-box2
{
	grid-column: 1;
	grid-row: 2;
	padding: 2px 15px;
}
.link-box2 h3
{
	padding: 0;
	font-size: 16px;
	border-bottom: solid 2px #a8aade; 
}
.link-box2 img
{
	width: 120px;
	height: auto;
}
.link-line2
{
	border-bottom: solid 2px #a8aade; 
}
.link-box3
{
	grid-column: 1;
	grid-row: 3;
	padding: 2px 15px;
}
.link-box3 h3
{
	padding: 0;
	font-size: 16px;
	border-bottom: solid 2px #a8aade; 
}
.link-box3 img
{
	width: 120px;
	height: auto;
}
.link-line3
{
	border-bottom: solid 2px #a8aade; 
}
.link-box4
{
	grid-column: 1;
	grid-row: 4;
	padding: 2px 15px;
}
.link-box4 h3
{
	padding: 0;
	font-size: 16px;
	border-bottom: solid 2px #a8aade; 
}
.link-box4 img
{
	width: 120px;
	height: auto;
}
.link-line4
{
	border-bottom: solid 2px #a8aade; 
}
.link-box5
{
	grid-column: 1;
	grid-row: 5;
	padding: 2px 15px;
}
.link-box5 h3
{
	padding: 0;
	font-size: 12px;
	border-bottom: solid 2px #a8aade; 
}
.link-box5 img
{
	width: 120px;
	height: auto;
}
.link-box6
{
	grid-column: 1;
	grid-row: 6;
	padding: 2px 15px;
}
.link-box6 h3
{
	padding: 0;
	font-size: 16px;
	border-bottom: solid 2px #a8aade; 
}
.link-box6 img
{
	width: 120px;
	height: auto;
}


/*

.list li 
{
	list-style-type: none;
	padding: 0;
}
.list li h3
{
	font-size: 16px;
	font-weight: bold;
	border-bottom: solid 2px #a8aade; 
}
.list li img
{
	width: 220px;
	height: auto;
	color: #000;
	text-decoration: none;
}
*/

/*****************************/
.box-item5
{
	background: #edeaff;
	grid-column: 5 / 7;
	grid-row: 7 / 9;
	margin: 0 0;
	padding: 0 15px;
	border-top: solid 3px #8e91de;
	border-bottom: solid 3px #8e91de;
}
.father
{
}
.father h4
{
	position: relative;
	padding: 0;
}
.father dt
{
	font-size: 12px;
	padding: 5px 0 0 20px;
	float:left;
	clear:left;
	width:100px;
	background: url("../images/dd.gif") no-repeat 0 0;
}

.father dd
{
	text-align: left;
	font-size: 14px;
	float:left;
	width:200px;
	padding: 3px 0 5px 5px;
}









@media screen and ( max-width:769px )
{
	.wrapper
	{
		clear: both;
		width: 97% ;
		margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
 		padding: 5px ;		/* 上下左右の余白を0にしておく */
	}
	.container
	{
		display: grid;
		gap: 5px 0;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto;
	}
	.item
	{
	/*	background: #ddd; #e7f7e4;*/
		border-radius: 0px;
	/*	border: 2px solid #abdfa1; */
	}
	/**** 画像切り替えエリア　****/
	.blog
	{
		padding: 0;
	}
	.box-item1
	{
/*
		grid-column: 1 / 2;
		grid-row: 1 ;
		padding: 3px;
*/
		display: none;
	}

	#photo
	{
/*
		width: 100%;
		height: auto;
		margin: 0 auto;
		text-align: center;
		overflow: hidden;
		position: relative;
*/
		display: none;
	}

	#photo img 
	{
/*
		top: 0;
		left: 0;
		position: absolute;
*/
		display: none;
	}

	/*****************************/

	/**** お知らせのエリア　****/

	.box-item2
	{
		background:#edeaff;
		grid-column: 1;
		grid-row: 4;
		margin: 0 0;
		padding: 0 5px;
	/*	background: url("../images/info-back.jpg") repeat-y 0 0; */
		color: #2c2c2f;
		border-bottom: solid 3px #8e91de;
	}
	.listinfo
	{
		position: relative;
		padding: 20px;
	}
	.listinfo h1
	{
		font-size: 18px;
	}
	.listinfo p
	{
		text-align: right;
	}
	.listinfo dt
	{
		font-size: 12px;
		padding: 1px 5px 0 20px;
		float:left;
		clear:left;
		background: url("../images/dt.gif") no-repeat 0 0;
	}

	.listinfo dd
	{
		text-align: left;
		font-size: 14px;
		padding: 1px 0 10px 5px;
	}
	.listinfo dd a
	{
		text-decoration: none;
		font-weight: bold;
		color: #0360ed;
	}
	.listinfo dd a:hover
	{
		text-decoration: underline;
		font-weight: bold;
	  	color: #f35;
	}
	.listinfo p a
	{
		font-weight: bold;
		color: #0360ed;
	}
	.listinfo p a:hover
	{
		font-weight: bold;
	  	color: #f35;
	}
	/*****************************/

	/**** プログラムお誘いのエリア　****/
	.box-item3
	{
		background: #edaaff;
		grid-column: 1;
		grid-row: 2;
		margin: 0 0;
		padding: 0 5px;
		border-bottom: solid 3px #8e91de;
	}
	.program
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		position: relative;
		padding: 20px;
	}
	.program-box31
	{
		grid-column: 1;
		grid-row: 1;
	}
	.program-box31 h1
	{
		padding: 0;
		font-size: 18px;
	}
	.program-box31 p
	{
		font-size: 14px;
		line-height: 1.6em;
	}
	.program-box32
	{
		grid-column: 1;
		grid-row: 2;
	}
	.program-box32 img
	{
		width: 100%;
		height: auto;
	}
/*****************************/

/**** YouTubeのエリア　****/
	.box-item6
	{
		background: #edeaff;
		grid-column: 1 / 11;
		grid-row: 3;
		margin: 0 0;
		padding: 0 15px;
		border-top: solid 3px #8e91de;
		border-bottom: solid 3px #8e91de;
	}
	.youtube
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		position: relative;
		padding: 20px;
	}
	.program-box61
	{
		grid-column: 1;
		grid-row: 1;
	}
	.program-box61 h1
	{
		padding: 0;
		font-size: 18px;
	}
	.program-box61 p
	{
		font-size: 14px;
		line-height: 1.6em;
		padding-left: 15px;
	}
	.program-box61 p a
	{
		color: #0360ed;
		font-weight: bold;
		text-decoration: none;
	}
	.program-box61 p a:hover
	{
	  	color: #f35;
		font-weight: bold;
		text-decoration: underline;
	}
	.program-box62
	{
		margin-left: 3%;
		padding-top: 50px;
	}
	.program-box62 img
	{
		width: 100%;
		height: auto;
		border-radius: 20px;       /* 角丸のサイズ指定 */	

	}
	/*****************************/

	/**** スタッフブログのエリア　****/
	.box-item4
	{
		background: #edeaff;
		grid-column: 1 / 2;
		grid-row:5;
		margin: 0 0;
		padding: 0 5px;
		border-bottom: solid 3px #8e91de;
	}
	.item
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		background: #f7f5ff;
	}
	.blog
	{
		padding: 0;
	}
	.blog-box1
	{
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}
	.blog-box1 h1
	{
		padding: 0;
		font-size: 18px;
	}
	.blog-box2
	{
		grid-column: 1;
		grid-row: 2;
	}
	.link
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto auto;
		padding-bottom: 15px;
	}
	.link-box1
	{
		grid-column: 1;
		grid-row: 1;
		padding: 0px 15px 2px 15px;
	}
	.link-box1 h3
	{
		padding: 0;
		font-size: 16px;
		border-bottom: solid 2px #a8aade; 
	}
	.link-box1 img
	{
		width: 200px;
		height: auto;
	}
	.link-box2
	{
		grid-column: 1;
		grid-row: 2;
		padding: 2px 15px;
	}
	.link-box2 h3
	{
		padding: 0;
		font-size: 16px;
		border-bottom: solid 2px #a8aade; 
	}
	.link-box2 img
	{
		width: 200px;
		height: auto;
	}
	.link-line2
	{
		border-bottom: solid 2px #a8aade; 
	}
	.link-box3
	{
		grid-column: 1;
		grid-row: 3;
		padding: 2px 15px;
	}
	.link-box3 h3
	{
		padding: 0;
		font-size: 16px;
		border-bottom: solid 2px #a8aade; 
	}
	.link-box3 img
	{
		width: 200px;
		height: auto;
	}
	.link-line3
	{
		border-bottom: solid 2px #a8aade; 
	}
	.link-box4
	{
		grid-column: 1;
		grid-row: 4;
		padding: 2px 15px;
	}
	.link-box4 h3
	{
		padding: 0;
		font-size: 16px;
		border-bottom: solid 2px #a8aade; 
	}
	.link-box4 img
	{
		width: 200px;
		height: auto;
	}
	.link-line4
	{
		border-bottom: solid 2px #a8aade; 
	}
	.link-box5
	{
		grid-column: 1;
		grid-row: 5;
		padding: 2px 15px;
	}
	.link-box5 h3
	{
		padding: 0;
		font-size: 16px;
		border-bottom: solid 2px #a8aade; 
	}
	.link-box5 img
	{
		width: 200px;
		height: auto;
	}
	.link-box6
	{
		grid-column: 1;
		grid-row: 6;
		padding: 2px 15px;
	}
	.link-box6 h3
	{
		padding: 0;
		font-size: 16px;
		border-bottom: solid 2px #a8aade; 
	}
	.link-box6 a {
		text-decoration: none;
		font-weight: bold;
		color: #0360ed;
	}
	.link-box6 a:hover {
		text-decoration: underline;
		font-weight: bold;
	  	color: #f35;
	}

	/*****************************/
	.box-item5
	{
		background: #edeaff;
		grid-column: 1;
		grid-row: 6;
		margin: 0 0;
		padding: 0 15px;
		border-top: solid 3px #8e91de;
		border-bottom: solid 3px #8e91de;
	}
	.father
	{
	}
	.father h4
	{
		position: relative;
		padding: 0;
	}
}