h1#intoro{
	text-align: center;
	padding: 1em 1.5em;
	margin: 0 auto 3em;
	font-family: "Ryumin Regular KL";
	line-height: 1.6em;
	background: rgba(255, 228, 217, 0.6);
	font-size: 14px;
}

@media screen and (max-width: 767px) {
	h1#intoro{text-align: left;padding: 1.5em;}
	h1#intoro br{display: none}
}	

@media print, screen and (min-width: 768px) {
	h1#intoro{font-size: 20px}
}	

@media print, screen and (min-width: 1024px) {}	

/* ************************************************ 
 *	index
 * ************************************************ */

#slides_container{
	position: relative;
	overflow: hidden
}


#slides_container .concept{
	position: absolute;
	z-index: 10;
}

ul.slick_top img{
	width: 100%;
	height: auto
}


.topsec{
	margin: 0 auto;
	width: 90%
}

.topsec h2{
	margin-bottom: 1em;
	border-top: 1px solid #CCD3DC;
	border-bottom: 1px solid #CCD3DC;
	padding: 1em 5px;
	color: #336699;
	font-size: 1.6em;
	text-align: center;
	letter-spacing: .1em;
	font-weight: 400
}


@media screen and (max-width: 667px) {
	#slides_container .concept{
		width: 40%;
		left: 5%;
		top: 40px;
	}
}	

@media print, screen and (min-width: 668px) {
	#slides_container .concept{
		left: 10%;
		top: 120px;}
	.topsec{width: 94%;}
}	

@media print, screen and (min-width: 1000px) {
	.topsec{width: 90%;}
	.topsec h2{margin-bottom: 2em;font-size: 1.8em;}
}	

/* ------------------------------
 #recommend
------------------------------ */

#recommend{}



#recommend_ban{padding: 3em 0 3em}

#recommend_ban img{
	width: 100%;
	height: auto
}



@media screen and (max-width: 480px) {
	
	#recommend_ban{
		display: flex;
		flex-wrap:wrap;}
	#recommend_ban{width: 90%;margin: 0 auto}
	#recommend_ban div{
	width: calc(( 100% - 15px ) / 2 );
	margin: 0 15px 1.5em 0;
	}
	
	
	#recommend_ban div:nth-child( 2n ) {margin-right: 0;}
}		

@media print, screen and (min-width: 481px) {
	#recommend{margin-bottom: 2em}
	#recommend_ban{padding: 3em 0}
	.ban{padding: 0 1em 2em;}
}	

/* ------------------------------
 #profile
------------------------------ */
#profile{
	background: rgba(238, 238, 238, 0.5);
	padding: 2em;
	margin-bottom: 3em
}

#keireki h3{
	color: #c4000b;
	font-size: 1.3em;
	margin:0 0 1em;
	font-family: 'Quicksand';
	letter-spacing: .1em
}

#keireki ul li{font-size: .9em;
	margin-bottom: .1em
}


@media screen and (max-width: 667px) {
	#prof_photo{
		width: 30%;
		float: left;
		margin-top: -3em;
		margin-right: 2em;
		-webkit-box-shadow:1px 1px 6px #ccc;
		-moz-box-shadow:1px 1px 6px #ccc;
		box-shadow: 1px 1px 6px #ccc;
		position: relative;
	}
}		

@media print, screen and (min-width: 668px) {
	#profile{padding: 4em 0;margin-bottom: 5em}
	#prof_inner{
	display: flex;
	justify-content: center;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto}

	#prof_photo{width: 20%;margin-right: 5%;text-align: right}
	#keireki{}
}	



/* ------------------------------
 lesson_list
------------------------------ */

#lesson_list{margin-bottom: 4em;}


#lesson_list ul{
	width: 98%;
	margin: 0 auto}

#lesson_list ul li{
	display: flex;
	flex-wrap:wrap;
	position: relative
}
	
		
		
#lesson_list ul li img{
		border-radius: 5px;
		position: relative;
		width: 100%;
		height: auto
	}

#lesson_list ul li div:nth-child(1){width: 100px;}


#lesson_list ul li dl{
	width: calc(100% - 100px);
	padding: 0 0 0 2em;
}

#lesson_list ul li dl dt{
	font-size: 1.3em;
	margin-bottom: .5em;
}

#lesson_list ul li dl dt a{color: #c4000a}

#lesson_list ul li dl dd{
	line-height: 1.4em;
	font-size: .9em;
	color: #999
}
#lesson_list ul li dl dd br{display: none}


@media screen and (max-width: 667px) {
	
	#lesson_list ul{margin: 0 auto}
	
	#lesson_list ul li{margin-bottom: 1.5em}
	
	#lesson_list ul li dl dt a:after{
	font-family: icomoon;
	content: "\e977";
	padding-left: 5px;
	}	
}	


@media print, screen and (min-width: 668px) {
	#lesson_list{margin-bottom: 5em;}
		
	#lesson_list ul{
		display: flex;
		flex-wrap:wrap;
	}
	
	#lesson_list ul li{
		width: calc( ( 100% - 50px ) / 2 );
		margin: 0 50px 3.5em 0;
	}
	
	#lesson_list ul li:after{
	font-family: icomoon;
	content: "\e977";
	position: absolute;
	bottom: 0;
	right: 0;
	color: #c4000a;
	font-size: 1.6em
	}		
	#lesson_list ul li:nth-child( 2n ) {margin-right: 0;}
	
	#lesson_list ul li div:nth-child(1){width: 140px;}
	#lesson_list ul li dl{
	width: calc(100% - 140px);
	padding: .5em 0 0 2em;
	}
	#lesson_list ul li dl dt{font-size: 1.6em;}
	#lesson_list ul li dl dd{line-height: 1.6em;}
}	

@media print, screen and (min-width: 1000px) {}	

/* ------------------------------
 atelier
------------------------------ */

#atelier{
	margin-bottom: 30px
}

#atelier a:hover img {
	opacity:0.8;
	filter: alpha(opacity=80);
	text-decoration: none;
	}


#atelier_inner{margin: 0 auto;}

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

@media print, screen and (min-width: 668px) {
	#atelier_inner{
		display: flex;
		justify-content: center;
		flex-wrap:wrap;
		flex-flow: row-reverse
	}
	
	#pr_contents{width: 210px;}
	#atelier_menu{width: calc(( 100% - 210px ));padding-left: 30px}
}

@media print, screen and (min-width: 1000px) {
	#atelier_inner{width: 96%;}
	#atelier_menu{width: calc(( 100% - 210px ));padding-left: 50px}
}	


/*アトリエメニューの新着*/
#atelier_menu{
	margin-top: 8px;
	/* 	color: #993333; */
}

#menu_g{
	padding: 1em 0 0;
	margin-bottom: 4em;
	color: #c4000a;}

#menu_g a,
#menu_g a:visited{
	text-decoration: none;
	color: #c4000a;
}

#menu_g a:hover{
	background: #FEF4F3;
	text-decoration: underline;
}



#menu_g dl{
	padding: 0 0 1em;
}


#menu_g dl:nth-child(3){border-bottom: dotted 1px #ccc;
	margin-bottom: 1em
}


#menu_g dl dt{
	font-weight:bold;
	text-align:left}
	
#menu_g dl dd{
	line-height:1.5em;
	text-indent: -1em;
    margin-left: 1em;
}	

#menu_g dl dd:before{
	font-family: icomoon;
	content: "\e974";
	color: #f0c7c7
}


#info_hl dl{
	position: relative;
	margin-bottom: 2em
}



#info_hl dt{
	font-family: 'Quicksand';
	font-weight: 400;
	letter-spacing: .1em;
	font-size:1.3em;
	border-right: solid 1px #fed8ca;
	color: #c4000a;
}

#info_hl dt a{
	font-size: .8em;color: #c4000a;
	letter-spacing: 0
}

#info_hl dt a:after{
	font-family: icomoon;
	content: "\ea32";
	padding-left: 3px;
	font-size: .6em;
	-webkit-transition: all .3s;
	transition: all .3s;
}

#info_hl dt a:hover:after{
	padding-left: 5px;
}


#info_hl dd li{margin-bottom:.8em}
#info_hl dd li a{color: #444;}
#info_hl dd li a:hover{text-decoration: underline}
#info_hl dd li .date{display: block;font-size: .9em;line-height: 1.2em;letter-spacing: .1em;margin-bottom: 3px;}
#info_hl dd li:last-child{margin-bottom: 0}


@media screen and (max-width: 667px) {
	#menu_g{margin-bottom: 2em}
	#info_hl dl{border-bottom: dotted 1px #ccc;
	margin-bottom: 1em;padding:0 .5em 1em}
	#menu_g dl dt{margin-bottom: .5em;font-size: 1.2em}
	#info_hl dt{margin-bottom: .5em;}
	#info_hl dt a{display: inline-block;margin-left: 1em}
}	

@media print, screen and (min-width: 668px) {
	#menu_g dl{
	padding: 0 0 1em;
	display: flex;
	flex-wrap:wrap;
	}


	#menu_g dl dt{
	width:28%;
	padding: 0 .5em;}
	
	#menu_g dl dd{
		width: 70%;
	}	


	#info_hl dl{
		display: flex;
		justify-content: center;
		flex-wrap:wrap;
	}
	
	#info_hl dl dt{width: 80px;}
	#info_hl dt a{display: block;}
	#info_hl dl dd{width: calc(100% - 80px)}
	
	#info_hl dl dd ul{padding-left: 2em}
	
}	

@media print, screen and (min-width: 1000px) {}	








#pr_contents{
	margin-top:25px;
}




#pr_contents a{
	display: block;
	-webkit-transition: all .3s;
	transition: all .3s;
	text-decoration: none
}

#prbanner,
#prbanner_sp{
	overflow: visible;
	height: 180px;
	position: relative
}

#prbanner_sp{margin-bottom: 2em}


#gpt{position: absolute;left: 0px;}
#gpt a:hover{opacity: 0.4;}

#taiken{
	position: absolute;
	top: 70px;left: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: #ffe5da;
}
#taiken a{
	color: #993333;
	text-align: center;
	width: 100%;
	font-weight: bold;
	font-size: 16px
}


#taiken a span{
	display: block;
	font-size: .6em
}
#taiken:hover{
	background: #993333;
	
}
#taiken:hover a{color: #ffe5da}



@media screen and (max-width: 667px) {
	#prbanner{display: none}
}	

@media print, screen and (min-width: 668px) {
	#prbanner_sp{display: none}
}	

@media print, screen and (min-width: 1000px) {}	


ul#snsbtn{
		display: flex;
		justify-content: center;
		flex-wrap:wrap;
	}

ul#snsbtn li{font-size: 1.2em;margin-bottom: .8em}


ul#snsbtn li a{
	display: block;
	position:relative;
	color: #fff;
	padding: .7em .8em;
	border-radius: 5px;
	line-height: 1em
}


ul#snsbtn li#fbook a:before{
	font-family: icomoon;
	content: "\e93d";
	font-size: 21px;
	margin-right: 8px;
	color: #1777f1;
}


ul#snsbtn li#insta a:before{
	font-family: icomoon;
	content: "\ea92";
	font-size: 20px;
	margin: 0 8px 0 0;
	color: #b21254
}

ul#snsbtn li#line a:before{
	font-family: icomoon;
	content: "\e937";
	font-size: 24px;
	margin: 0 8px 0 0;
	color: #00b900
}



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

@media print, screen and (min-width: 668px) {}	

@media print, screen and (min-width: 1000px) {}	

