@charset "utf-8";

/* ----- keyVisual ------*/

#keyVisual{
	display: block;
	position: relative;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}
#keyVisual .keyVisualFront{
	width: 100%;
	display: block;
	position: absolute;
	top:0;
	left: 0;
	z-index: 50;
}

#keyVisual .keyVisualImg{
	width: 100%;
	display: block;
	position: relative;
	top:0;
	left: 0;
	z-index: 40;
}

	#spTopTitle{
	display:none;
}

#kyoshitsu{
	display: block;
	position: relative;
	width: auto;
	height: auto;
	max-width: 1000px;
	padding-left: 50px;
	padding-right: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -15rem;
	z-index: 100;

}




#kyoshitsu{
	display: block;
	position: relative;
	width: auto;
	height: auto;
	max-width: 1000px;
	padding-left: 50px;
	padding-right: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -15rem;
	z-index: 100;

}

#kyoshitsu li{
	display: block;
	position: relative;
	width: 100%;
	height: 200px;
	margin-top: 30px;
}

#kyoshitsu li a{
	padding-left: 30px;
	padding-right: calc(55% - 30px;);
	width: 100%;
	height: 200px;
	position: relative;
	display: flex; /* 子要素をflexboxで揃える */
	flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
	justify-content: center; /* 子要素をflexboxにより中央に配置する */
	align-items:flex-start;  /* 子要素をflexboxにより中央に配置する */

	z-index: 130;
	background-repeat: no-repeat;
	background-size: cover;
	transition: 0.2s ease-in-out;

}

#kyoshitsu li a:hover{
	opacity:0.6 !important;
}

#kyoshitsu li:first-of-type{
	margin-top: 0px;
}

#kyoshitsu li h3{
	font-family: "TsukuOldMinPro-R";
	font-size: 3.6rem;
	line-height: 4.0rem;
	color: #3d0700;
}





#kyoshitsu li p{
font-family: "TsukuGoPr5-D";
	margin-top: 1rem;
font-size: 1.6rem;
line-height: 2.6rem;
	letter-spacing: 0.02rem;
color: #3d0700;
}


#kyoshitsu .kyoshitsuOkashi a{
	background-image: url(../img/top/top-img-okashi.png);
}

#kyoshitsu .kyoshitsuRyori a{
	background-image: url(../img/top/top-img-ryori.png);
}

#kyoshitsu .kyoshitsuTable a{
	background-image: url(../img/top/top-img-table.png);
}

#kyoshitsu li.online{
	height: auto;
	overflow: visible;
}
#kyoshitsu li.online a{
	width: 100%;
	height: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-right:30px;
	text-align: center;
	background-color: #FFF;
	border:1px solid #be0081;
	overflow: visible;

	background-image: url(../img/top/top-img-online.png);
	background-position: center center;
}

#kyoshitsu .online h3{
	font-family: "TsukuGoPr5-D";
	color: #be0081;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 15px;
	margin-bottom: 5px;
	border-bottom: solid 1px #be0081;
	width: 100%;
}


#kyoshitsu .online h3 .mark{
	display:inline-table;
	vertical-align:super;
	font-family: "TsukuGoPr5-D";
	font-size: 1.2rem;
	margin-right: 0.7rem;
	background-color: #be0081;
	line-height: 1rem;
	padding-left: 1.1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-right: 1rem;
	border-radius: 1.2rem;
	color: #FFF;
}

#kyoshitsu .online p{
	color: #be0081;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.9rem;
	line-height: 2.8rem;
}




#special{
	display: block;
	position: relative;
	width: auto;
	height: auto;
	max-width: 1000px;
	padding-left: 50px;
	padding-right: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0rem;
	z-index: 100;
}

#special::before{
	display: block;
	position: relative;
	content: url(../img/top/top-mark-1.svg);
	width: 240px;
	height: 66px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5rem;
	margin-bottom: 6rem;
}


#special li{
	display: block;
	position: relative;
	width: 100%;
	height: 160px;
	margin-top: 30px;
}

#special li a{
	width: 100%;
	height: 160px;
	position: relative;
	display: flex; /* 子要素をflexboxで揃える */
	/*flex-direction: column; *//* 子要素をflexboxにより縦方向に揃える */
	justify-content:space-between; /* 子要素をflexboxにより中央に配置する */
	/*align-items:flex-start; */ /* 子要素をflexboxにより中央に配置する */

	z-index: 130;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top left;
}





#special li a .specialWord{
	width: calc( 100% - 370px);
	height: 160px;
	padding-left: 30px;
	position: relative;
	display: flex; /* 子要素をflexboxで揃える */
	flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
	justify-content:center; /* 子要素をflexboxにより中央に配置する */
	align-items:flex-start;  /* 子要素をflexboxにより中央に配置する */

	z-index: 130;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top left;

	transition: 0.2s ease-in-out;

}

#special li  a:hover .specialWord{
	opacity:0.6;
}



#special a h3{
	font-family: "TsukuOldMinPro-R";
	font-size: 3.0rem;
	line-height: 4.0rem;
	letter-spacing: 0.01rem;
	color: #f8ecf1;
}

#special a h3 em{
	display: block;
	font-family: "TsukuOldGothicStd-B";
font-size: 2rem;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.2;
letter-spacing: normal;
color: #f8ecf1;
}

#special a p{
	font-family: "TsukuGoPr5-D";
	font-size: 3.0rem;
	line-height: 4.0rem;
	letter-spacing: 0.01rem;
	color: #f8ecf1;
	font-size: 1.6rem;
	line-height: 1.5;
	color: #f8ecf1;
	margin-top: 1rem;

}


#special li a .specialImg{
	display: block;
	width: 370px;
	height: 100%;
}

#special li a .specialImg img{
	width: 100%;
}


#special li.specialSetsumeikai a{
	background-image: url(../img/top/top-back-long-pink.png);
}

#special li.specialKigyo a{
	background-image: url(../img/top/top-back-long-gold.png);
}




#other{
display: block;
position: relative;
margin-top: 80px;
padding-top: 65px;
padding-bottom: 65px;
padding-left: 50px;
padding-right: 50px;
width: 100%;
min-height: 500px;
background-color: #fffef2;
background-image:
/* 1枚目の背景画像のパス */
url(../img/top/top-decoration-left-top.svg),
/* 2枚目の背景画像のパス */
url(../img/top/top-decoration-right-top.svg),
/* 3枚目の背景画像のパス */
url(../img/top/top-decoration-left-bottom.svg),
/* 4枚目の背景画像のパス */
url(../img/top/top-decoration-right-bottom.svg);

background-position:
/* 1枚目の背景画像の表示位置 */
left 20px top 20px,
/* 2枚目の背景画像の表示位置 */
right 20px top 20px,
/* 3枚目の背景画像の表示位置 */
left 20px bottom 20px,
/* 4枚目の背景画像の表示位置 */
right 20px bottom 20px;

background-repeat:
no-repeat;

background-size:
/* 1、2枚目の背景画像の共通サイズ */
200px;
}

#other .otherContents{
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	display: flex; /* 子要素をflexboxで揃える */
	/*flex-direction: column;*/ /* 子要素をflexboxにより縦方向に揃える */
	justify-content:center;/* 子要素をflexboxにより中央に配置する */
	align-items:center;  /* 子要素をflexboxにより中央に配置する */
}

#other .otherContents2{
	border-top: 1px solid #EA80AE;
	padding-top: 45px;
	margin-top: 45px;
}


#other li{
	display: block;
	position: relative;
	width: 280px;
	height: 267px;
	margin-top: 15px;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
}

#other li a{
	width: 280px;
	height: 267px;
	position: relative;
	display: flex; /* 子要素をflexboxで揃える */
	flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
	justify-content:space-between; /* 子要素をflexboxにより中央に配置する */
   align-items:center;  /* 子要素をflexboxにより中央に配置する */

	z-index: 130;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top left;
}





#other li a .contentsWord{
	width:100%;
	height: calc(100% - 191px);
	position: relative;
	display: flex; /* 子要素をflexboxで揃える */
	flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
	justify-content:center; /* 子要素をflexboxにより中央に配置する */
	align-items:center;  /* 子要素をflexboxにより中央に配置する */

	z-index: 130;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top left;

	transition: 0.2s ease-in-out;

}

#other li  a:hover .contentsWord{
	opacity:0.6;
}



#other a h3{
	font-family: "TsukuOldMinPro-R";
	font-size: 2.4rem;
	line-height:3rem;
	letter-spacing: 0.01rem;
	color: #f8ecf1;
}



#other a p{
	font-family: "TsukuGoPr5-D";
	font-size: 1.4rem;
	line-height: 2.0rem;
	letter-spacing: 0.01rem;
	color: #f8ecf1;
	color: #f8ecf1;
	margin-top: 0.5rem;

}


#other li a .contentsImg{
	display: block;
	width: 100%;
	height: 191px;
}

#other li a .contentsImg img{
	width: 100%;
}


#other li.purple a{
	background-image: url(../img/top/top-back-purple.png);
}

#other li.pink a{
	background-image: url(../img/top/top-back-pink.png);
}






/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* for tablet */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */

@media screen and (max-width:799px) and (min-width:600px){

	#keyVisual{
		display: block;
		position: relative;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50px;
		overflow: hidden;
	}
	#keyVisual .keyVisualFront{
		width: 110%;
		display: block;
		position: absolute;
		top:0%;
		left: -5%;
		z-index: 50;
	}

	#keyVisual .keyVisualImg{
		width: 110%;
		display: block;
		position: relative;
		top:0%;
		left: -5%;
		z-index: 40;
	}

	#spTopTitle{
	display: block;
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: -18rem;
	z-index: 100;
	color: #3d0700;
	}

#spTopTitle::before{
	content: "";
	display: block;
	width: 236px;
	height: 34px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../img/top/top-title-sp-top.svg);
	background-repeat: no-repeat;
	background-position: center top;
	}

#spTopTitle::after{
	content: "";
	display: block;
	width: 236px;
	height: 34px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../img/top/top-title-sp-bottom.svg);
	background-repeat: no-repeat;
	background-position: center bottom;
	}

	#spTopTitle .spTopTitleTop{
	font-family: "TsukuAntiqueLGoStd-B";
	font-size: 1.4rem;

	}

	#spTopTitle .spTopTitleCenter{
	font-family: "TsukuMinPro-B";
	font-size: 1.8rem;
		margin-top: 0.5rem;

	}

	#spTopTitle .spTopTitleBottom{
	font-family: "TsukuAntiqueLGoStd-B";
		margin-top: 0.5rem;
	font-size: 1.2rem;
	}

	#spTopTitle .spTopTitleBottom br{
		display: none;
	}


	#kyoshitsu{
		display: block;
		position: relative;
		width: auto;
		height: auto;
		max-width: 700px;
		padding-left: 30px;
		padding-right: 30px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 6rem;
		z-index: 100;

	}

	#kyoshitsu li{
		display: block;
		position: relative;
		width: 100%;
		height: 200px;
		margin-top: 20px;
	}

	#kyoshitsu li a{
		padding-left: 25px;
		padding-right: calc(55% - 30px;);
		width: 100%;
		height: 200px;

		z-index: 130;
		background-repeat: no-repeat;
		background-size: cover;
		transition: 0.2s ease-in-out;

	}

	#kyoshitsu li a:hover{
		opacity:0.6 !important;
	}

	#kyoshitsu li:first-of-type{
		margin-top: 0px;
	}

	#kyoshitsu li h3{
		font-size: 3.0rem;
		line-height: 3.3rem;
	}

	#kyoshitsu li p{
		font-family: "TsukuGoPr5-D";
		margin-top: 1rem;
		font-size: 1.5rem;
		line-height: 2.6rem;
		letter-spacing: 0.02rem;
		color: #3d0700;
	}

	#kyoshitsu li.online a{
		background-position: left center;
		background-size: cover;
	}

	#kyoshitsu .online h3 .mark{
		font-size: 1.1rem;
		margin-right: 0.7rem;
		line-height: 1rem;
		padding-left: 1.1rem;
		padding-top: 0.4rem;
		padding-bottom: 0.4rem;
		padding-right: 1rem;
		border-radius: 1.2rem;
	}

	#kyoshitsu .online p{
		font-size: 1.7rem;
		line-height: 2.6rem;
	}


	#special{
		display: block;
		position: relative;
		width: auto;
		height: auto;
		max-width: 700px;
		padding-left: 30px;
		padding-right: 30px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0rem;
		z-index: 100;
	}

	#special::before{
		display: block;
		position: relative;
		content: url(../img/top/top-mark1-sp.svg);
		width: 151px;
		height: 41px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 4.5rem;
		margin-bottom: 4.5rem;
	}


	#special li{
		display: block;
		position: relative;
		width: 100%;
		height: 160px;
		margin-top: 20px;
	}



	#special li a .specialWord{
		width: calc( 100% - 330px);
		height: 160px;
		padding-left: 20px;

	}

	#special li  a:hover .specialWord{
		opacity:0.6;
	}



	#special a h3{
		font-family: "TsukuOldMinPro-R";
		font-size: 2.1rem;
		line-height: 2.6rem;
	}

	#special a h3 em{
		font-size: 1.4rem;
		margin-bottom: 0.5rem;

	}

	#special a p{
		font-size: 1.3rem;
		line-height: 1.5;
		margin-top: 0.8rem;

	}


	#special li a .specialImg{
		display: block;
		position: relative;
		overflow: hidden;
		width: 315px;
		height: 100%;
	}

	#special li a .specialImg img{
		width: 100%;
	}


	#special li.specialSetsumeikai a{
		background-image: url(../img/top/top-back-long-pink.png);
	}

	#special li.specialKigyo a{
		background-image: url(../img/top/top-back-long-gold.png);
	}




	#other{
		display: block;
		position: relative;
		margin-top: 60px;
		padding-top: 45px;
		padding-bottom: 45px;
		padding-left: 30px;
		padding-right: 30px;
		width: 100%;
		min-height: 500px;
		background-color: #fffef2;
		background-image:
			/* 1枚目の背景画像のパス */
			url(../img/top/top-decoration-left-top.svg),
			/* 2枚目の背景画像のパス */
			url(../img/top/top-decoration-right-top.svg),
			/* 3枚目の背景画像のパス */
			url(../img/top/top-decoration-left-bottom.svg),
			/* 4枚目の背景画像のパス */
			url(../img/top/top-decoration-right-bottom.svg);

		background-position:
			/* 1枚目の背景画像の表示位置 */
			left 20px top 20px,
			/* 2枚目の背景画像の表示位置 */
			right 20px top 20px,
			/* 3枚目の背景画像の表示位置 */
			left 20px bottom 20px,
			/* 4枚目の背景画像の表示位置 */
			right 20px bottom 20px;

		background-repeat:
			no-repeat;

		background-size:
			/* 1、2枚目の背景画像の共通サイズ */
			150px;
	}

	#other .otherContents{
		width: 100%;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
		display: flex; /* 子要素をflexboxで揃える */
		/*flex-direction: column;*/ /* 子要素をflexboxにより縦方向に揃える */
		justify-content:center;/* 子要素をflexboxにより中央に配置する */
		align-items:center;  /* 子要素をflexboxにより中央に配置する */
	}

	#other .otherContents2{
		border-top: 1px solid #EA80AE;
		padding-top: 35px;
		margin-top: 35px;
	}


	#other li{
		display: block;
		position: relative;
		width: 200px;
		height: 220px;
		margin-top: 5px;
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 5px;
	}

	#other li a{
		width: 200px;
		height: 220px;
		position: relative;
		display: flex; /* 子要素をflexboxで揃える */
		flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
		justify-content:space-between; /* 子要素をflexboxにより中央に配置する */
		align-items:center;  /* 子要素をflexboxにより中央に配置する */

		z-index: 130;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top left;
	}





	#other li a .contentsWord{
		width:100%;
		height: calc(100% - 160px);
		padding-left: 10px;
		padding-right: 10px;

	}

	#other li  a:hover .contentsWord{
		opacity:0.6;
	}



	#other a h3{
		font-family: "TsukuOldMinPro-R";
		font-size: 1.6rem;
		line-height:2.4rem;
		letter-spacing: 0.01rem;
		color: #f8ecf1;
	}



	#other a p{
		font-family: "TsukuGoPr5-D";
		font-size: 1.2rem;
		line-height: 1.6rem;
		letter-spacing: 0.01rem;
		color: #f8ecf1;
		color: #f8ecf1;
		margin-top: 0.2rem;

	}


	#other li a .contentsImg{
		display: block;
		position: relative;
		width: 100%;
		height: 160px;
		overflow: hidden;
	}

	#other li a .contentsImg img{
		width: 100%;
		height: auto;
		display: block;
		position: absolute;
		bottom: -5%;
	}



}/*----- end for tablet ------*/








/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */
/* ======================================================================================================================= */

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

	#keyVisual{
		overflow: hidden;

	}
	#keyVisual .keyVisualFront{
		width: 130%;
		display: block;
		position: absolute;
		top:-5%;
		left: -15%;
		z-index: 50;
	}

	#keyVisual .keyVisualImg{
		width: 130%;
		display: block;
		position: relative;
		margin-top:-5%;
		left: -15%;
		z-index: 40;
	}

 #spTopTitle{
	display: block;
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: -14rem;
	z-index: 100;
	color: #3d0700;
	}

#spTopTitle::before{
	content: "";
	display: block;
	width: 236px;
	height: 34px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../img/top/top-title-sp-top.svg);
	background-repeat: no-repeat;
	background-position: center top;
	}

#spTopTitle::after{
	content: "";
	display: block;
	width: 236px;
	height: 34px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../img/top/top-title-sp-bottom.svg);
	background-repeat: no-repeat;
	background-position: center bottom;
	}

	#spTopTitle .spTopTitleTop{
	font-family: "TsukuAntiqueLGoStd-B";
	font-size: 1.3rem;

	}

	#spTopTitle .spTopTitleCenter{
	font-family: "TsukuMinPro-B";
	font-size: 1.7rem;
		margin-top: 0.5rem;

	}

	#spTopTitle .spTopTitleBottom{
	font-family: "TsukuAntiqueLGoStd-B";
		margin-top: 0.5rem;
	font-size: 1.1rem;

	}


	#kyoshitsu{
		display: block;
		position: relative;
		width: auto;
		height: auto;
		max-width: 100%;
		padding-left: 30px;
		padding-right: 30px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 3rem;
		z-index: 100;

	}

	#kyoshitsu li{
		display: block;
		position: relative;
		width: 100%;
		height: 31rem;
		margin-top: 20px;
	}

	#kyoshitsu li a{
		padding-top: 25px;
		padding-left: 20px;
		padding-right: 20px;
		width: 100%;
		height: 31rem;
		position: relative;
		display: flex; /* 子要素をflexboxで揃える */
		flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
		justify-content: flex-start; /* 子要素をflexboxにより中央に配置する */
		align-items:flex-start;  /* 子要素をflexboxにより中央に配置する */

		z-index: 130;
		background-repeat: no-repeat;
		background-size: cover;
		transition: 0.2s ease-in-out;

	}



	#kyoshitsu li h3{
		font-size: 2.4rem;
		line-height: 3.0rem;
	}

	#kyoshitsu li p{
		margin-top: 1rem;
		font-size: 1.3rem;
		line-height: 2.3rem;
		color: #3d0700;
	}


	#kyoshitsu .kyoshitsuOkashi a{
		background-image: url(../img/top/top-img-okashi-sp.png);
	}

	#kyoshitsu .kyoshitsuRyori a{
		background-image: url(../img/top/top-img-ryori-sp.png);
	}

	#kyoshitsu .kyoshitsuTable a{
		background-image: url(../img/top/top-img-table-sp.png);
	}


	#kyoshitsu li.online a{
		background-position: left center;
		background-size: cover;
	}


	#kyoshitsu .online h3{
		padding-bottom: 12px;
		margin-bottom: 3px;
		text-align: left;
	}


	#kyoshitsu .online h3 .mark{
		display: table;

		margin-bottom: 0.5rem;
		font-size: 1.0rem;
		line-height: 1rem;
		padding-left: 1.0rem;
		padding-top: 0.3rem;
		padding-bottom: 0.4rem;
		padding-right: 1rem;
		border-radius: 2rem;
	}

	#kyoshitsu li.online{

	}

	#kyoshitsu li.online a{
		padding: 1.5rem;
	}
	#kyoshitsu .online p{
		font-size: 1.4rem;
		line-height: 2.3rem;
		text-align: justify;
	}

	#kyoshitsu .online p br{
		display: none;
	}




	#special{
		display: block;
		position: relative;
		width: auto;
		height: auto;
		max-width: 100%;
		padding-left: 30px;
		padding-right: 30px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0rem;
		z-index: 100;
	}

	#special::before{
		display: block;
		position: relative;
		content: url(../img/top/top-mark1-sp.svg);
		width: 151px;
		height: 41px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 4rem;
		margin-bottom: 4rem;
	}


	#special li{
		display: block;
		position: relative;
		width: 100%;
		height:auto;
		margin-top: 30px;
	}

	#special li a{
		width: 100%;
		min-height: auto;
		height: auto;
		position: relative;
		display: flex; /* 子要素をflexboxで揃える */
		flex-direction: column;/* 子要素をflexboxにより縦方向に揃える */
		justify-content:space-between; /* 子要素をflexboxにより中央に配置する */
		/*align-items:flex-start; */ /* 子要素をflexboxにより中央に配置する */

		z-index: 130;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top left;
	}





	#special li a .specialWord{
		width: 100%;
		height: calc(100% - 160px);
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 15px;
		position: relative;
		display: flex; /* 子要素をflexboxで揃える */
		flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
		justify-content:center; /* 子要素をflexboxにより中央に配置する */
		align-items:flex-start;  /* 子要素をflexboxにより中央に配置する */

		z-index: 130;
	}

	#special li  a:hover .specialWord{
		opacity:0.6;
	}



	#special a h3{
		font-size: 2.1rem;
		line-height: 3.0rem;
		letter-spacing: 0.01rem;
	}

	#special a h3 em{
		font-size: 1.5rem;
		line-height: 1.2;
	}

	#special a p{
		font-family: "TsukuGoPr5-D";
		letter-spacing: 0.01rem;
		color: #f8ecf1;
		font-size: 1.3rem;
		line-height: 1.5;
		color: #f8ecf1;
		margin-top: 0.5rem;

	}


	#special li a .specialImg{
		display: block;
		position:relative;
		bottom: 0px;
		width: 100%;
		height: auto;
		margin-top: 1em;
		overflow: hidden;
	}

	#special li a .specialImg img{
		width: 100%;
		height: auto;
	}


	#special li.specialSetsumeikai a{
		background-image: url(../img/top/top-back-long-pink-sp.png);
	}

	#special li.specialKigyo a{
		background-image: url(../img/top/top-back-long-gold-sp.png);
	}









	#other{
		display: block;
		position: relative;
		margin-top: 40px;
		padding-top: 25px;
		padding-bottom: 25px;
		padding-left: 30px;
		padding-right: 30px;
		width: 100%;
		min-height: 300px;
		background-color: #fffef2;
		background-image:none;
	}

	#other .otherContents{
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		display: block; /* 子要素をflexboxで揃える */
	}

	#other .otherContents2{
		border-top: 1px solid #EA80AE;
		padding-top: 45px;
		margin-top: 45px;
	}


	#other li{
		display: block;
		position: relative;
		width: 100%;
		height: 100px;
		margin-top: 5px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 5px;
	}

	#other li a{
		width: 100%;
		height: 100px;
		position: relative;
		display: flex; /* 子要素をflexboxで揃える */
		flex-direction:row-reverse; /* 子要素をflexboxにより縦方向に揃える */
		justify-content:space-between; /* 子要素をflexboxにより中央に配置する */
		align-items:center;  /* 子要素をflexboxにより中央に配置する */

		z-index: 130;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top left;
	}





	#other li a .contentsWord{
		width:calc(100% - 100px);
		padding-left: 15px;
		padding-right: 10px;
		height: 100px;
		position: relative;
		display: flex; /* 子要素をflexboxで揃える */
		flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
		justify-content:center; /* 子要素をflexboxにより中央に配置する */
		align-items:flex-start;  /* 子要素をflexboxにより中央に配置する */

		z-index: 130;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top left;

		transition: 0.2s ease-in-out;

	}

	#other li  a:hover .contentsWord{
		opacity:0.6;
	}



	#other a h3{
		font-family: "TsukuOldMinPro-R";
		font-size: 2.0rem;
		line-height:2.6rem;
		letter-spacing: 0.01rem;
		color: #f8ecf1;
	}



	#other a p{
		font-family: "TsukuGoPr5-D";
		font-size: 1.3rem;
		line-height: 1.8rem;
		letter-spacing: 0.01rem;
		color: #f8ecf1;
		margin-top: 0.5rem;

	}


	#other li a .contentsImg{
		display: block;
		width: 100px;
		height: 100px;
	}

	#other li a .contentsImg img{
		width: 100px;
		height: auto;
	}


	#other li.purple a{
		background-image: url(../img/top/top-back-purple.png);
	}

	#other li.pink a{
		background-image: url(../img/top/top-back-pink.png);
	}
}




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




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

	#spTopTitle{
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
		margin-top: -14rem;
		z-index: 100;
		color: #3d0700;
	}

	#spTopTitle::before{
		content: "";
		display: block;
		width: 236px;
		height: 34px;
		margin-left: auto;
		margin-right: auto;
		background-image: url(../img/top/top-title-sp-top.svg);
		background-repeat: no-repeat;
		background-position: center top;
	}

	#spTopTitle::after{
		content: "";
		display: block;
		width: 236px;
		height: 34px;
		margin-left: auto;
		margin-right: auto;
		background-image: url(../img/top/top-title-sp-bottom.svg);
		background-repeat: no-repeat;
		background-position: center bottom;
	}

	#spTopTitle .spTopTitleTop{
		font-family: "TsukuAntiqueLGoStd-B";
		font-size: 1.1rem;

	}

	#spTopTitle .spTopTitleCenter{
		font-family: "TsukuMinPro-B";
		font-size: 1.3rem;
		margin-top: 0.5rem;

	}

	#spTopTitle .spTopTitleBottom{
		font-family: "TsukuAntiqueLGoStd-B";
		margin-top: 0.5rem;
		font-size: 1rem;
	}

	#spTopTitle .spTopTitleBottom br{
		display: block;
	}
}

/*----- end for sp ------*/

/* ======================================================================================================================= */
/* for IE */
/* ======================================================================================================================= */
@media screen\0 {
  #block-course .list-course > li .content{margin:0;}
}