@charset "utf-8";
/* CSS Document */


/* ************************************************ 
 *	
 *	トップページ
 *	
 * ************************************************ */

.top_contents{
	margin-bottom:4em;
}
.top_contents section{
	margin-bottom:3em;
}
@media only screen and  ( max-width : 768px ) {
	.top_contents{
		margin-bottom:0em;
	}
	.top_contents section{
		margin-bottom:0em;
	}
	.top_contents{
		padding-top:1em;
	}
	/* スマホでは文字を小さく */
	.smp_small_title{
		zoom:0.7;
	}
}

@media only screen and  ( max-width : 768px ) {
	#pc_only{
		display:none;
		height:0;
	}
}
@media print, screen and ( min-width : 768px ) {
	#sp_only{
		display:none;
		height:0;
	}
}


/* -------------------------ギャラリー------------------------- */

#top_gallery{
	background:url(images/top/gallery_bg.png) bottom center repeat-x;
	padding-bottom:100px;
}

@media only screen and  ( max-width : 768px ) {
	#top_gallery{
		background:url(images/top/gallery_bg.png) bottom center repeat-x;
		-moz-background-size:160px 27px;
		background-size:160px 27px;
		margin-bottom:1em;
		padding-bottom:40px;
	}
}

/* -------------------------作品例------------------------- */
#top_product{
	background:url(images/top/top_product_all_bg.png);
	padding-top:10px;
	position: relative;
}
#top_product .inner_block{
	padding:3em 0em 4em 0em;
}

#top_product:before{
	content: "";
	position: absolute;
	top: 10px
	left: 0;
	width: 100%;
	height: 29px;
	background:url(images/top/top_product_bg.png);
}
#top_product:after{
	content: "";
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	height: 29px;
	background:url(images/top/top_product_bg.png);
}



/* -------------------------カレンダー------------------------- */
#top_calendar{
	background:url(images/top/top_calender.png);
	position: relative;
}
#top_calendar .inner_block{
	padding:3em 0em;
}
@media only screen and  ( max-width : 768px ) {
	#top_calendar{
		margin-bottom:2em;
	}
}

/* -------------------------ミシンクラフトについて------------------------- */
#top_about .inner_block{
	background:url(images/top/top_about_bg.jpg) top center no-repeat;
	background-size: cover;
	-moz-background-size:cover;
	position: relative;
}
/* クラフト教室 */
.top_imgback_block{
	background-color: rgba(255,255,255,0.8);
}

/* 点線 */
.top_imgback_block_inner{
	border:2px dashed #c59c66;
	padding:2em;
}

@media print, screen and ( min-width : 768px ) {
	#top_about .inner_block,
	#top_craftclass .inner_block{
		padding:5em 0em;
	}
	/* クラフト教室 */
	.top_imgback_block{
		width:55%;
		margin-left:8%;
		background-color: rgba(255,255,255,0.8);
		padding:1%;
	}
	/* それぞれのリンク */
	.top_about_mess{
		position: absolute;
		bottom:2em;
		right:2em;
		width:23%;
	}
}

@media only screen and  ( max-width : 768px ) {
	#top_about .inner_block,
	#top_craftclass .inner_block{
		padding:3em 0em;
		width:100%;
	}
	.top_imgback_block{
		width:90%;
		margin-left:5%;
		padding:1%;
		font-size:80%;
	}

	.top_about_mess{
		width:40%;
		margin-top:-2em;
		margin-left:57%;
		text-align:center;
	}
}

/* -------------------------クラフト教室------------------------- */
#top_craftclass .inner_block{
	background:url(images/top/top_class_bg.jpg) top center no-repeat;
	background-size: cover;
	-moz-background-size:cover;
	position: relative;
}







/* -------------------------バナー3列------------------------- */
@media print, screen and ( min-width : 1180px ) {
	ul.top_banner_banner li{
		width:33.3%;
		float:left;
	}
}

@media ( max-width : 1180px ) and  ( min-width : 768px ) {
	ul.top_banner_banner li{
		width:33%;
		float:left;
		margin-right:0.5%;
	}
	ul.top_banner_banner li:last-child{
		margin-right:0%;
		float:right;
	}
}
@media only screen and  ( max-width : 768px ) {
	ul.top_banner_banner li{
		text-align:center;
		margin-bottom:1em;
	}
	ul.top_banner_banner li img{
		width:90%;
		margin-left:5%;
	}
	.one_banner{
		width:90%;
		margin-left:5%;
	}

}