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

/* -----------------------------------------------------------------------------
	schoool labo スクール ラボ タイトル 
--------------------------------------------------------------------------------*/
.title_recipes {margin-bottom:1rem; clear:both; position:relative; padding:0rem 0 0rem;}

.title_recipes .title-in{width: 100%; height: 20%;overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
 font-size:4rem; font-weight:700; color:#fff;}
 
 .title_recipes .title-inFCS{width: 100%; height: 20%;overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
 font-size:4rem; font-weight:700; color:#fff; text-shadow: 1px 1px 13px rgba(15, 15, 15, 0.55);}

@media (max-width: 767px) {
	.title_recipes {padding:5.7rem 0 0rem;}
	.title_recipes .title-in{width: 100%; height: 20%;overflow: auto; position: absolute; top: 4rem; left: 0; bottom: 0; right: 0; margin: auto;
     font-size:3rem;	}
	.title_recipes .title-inFCS{width: 100%; height: 20%;overflow: auto; position: absolute; top: 4rem; left: 0; bottom: 0; right: 0; margin: auto;
     font-size:3rem;	}
	}
	
.scholllabo_h2 {margin-bottom:2rem;}
.scholllabo_h2 h2{text-align:center; font-size:1.8rem; }
@media (max-width: 359px) {
.scholllabo_h2 h2{text-align:center; font-size:1.6rem; }
.title_recipes .title-inFCS{width: 100%; height: 20%;overflow: auto; position: absolute; top: 4rem; left: 0; bottom: 0; right: 0; margin: auto;
     font-size:2rem;	}	
}

/* -----------------------------------------------------------------------------
	school 説明 
--------------------------------------------------------------------------------*/

.school {margin-bottom:3rem;}

.school .intro{ font-size:1.6rem; line-height:1.5;}

.school .signature { font-size:1.6rem; text-align:right;}

.guide_1day {font-size:1.6rem; line-height:1.5; margin-bottom:3rem; border:#ccc 1px solid; padding:1rem; }

.school_staff { padding:2rem 0; font-size:1.4rem;}
.school_staff img{ padding: 0 2rem; width:90%; height:auto; display: block; margin-right: auto; margin-left: auto;}

@media (max-width: 640px) {
.school_staff img{ width:50%;}	
}

.school_guide {font-size:1.4rem; margin-top:1rem; margin-bottom:3rem; border:#ccc 1px solid; padding:.5rem 1rem 0; text-align:center;background:rgba(255,255,255,0.8);}
.school_guide h3 {font-size:1.8rem;}
.school_guide h3 span {font-size:1.6rem;}

.school_guide h3 img{ vertical-align:middle; width:10rem; height:auto;}

.school_guide .address {font-size:1.6rem;}


/* -----------------------------------------------------------------------------
	labo 説明 
--------------------------------------------------------------------------------*/

.lead .intro{ font-size:1.4rem;}
.end {font-size:1.4rem; margin-top:1rem; margin-bottom:3rem; border:#ccc 1px solid; padding:2rem 1rem 0; text-align:center; }


/* -----------------------------------------------------------------------------
	shcool labo リンクボタン 
--------------------------------------------------------------------------------*/

.button {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	height: 54px;
	line-height: 54px;
	outline: none;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


.button_1 {
	background-color: #669933;
	border: 2px solid #669933;
	color: #fff;
	font-size:14px;
	margin:1rem;
	width: 200px;
}
.button_1:hover {
	background-color: #fff;
	border-color: #669933;
	color: #669933;
	text-decoration:none;
}

.button_2 {
	background-color: #900020;
	border: 2px solid #900020;
	color: #fff;
	font-size:14px;
	margin:1rem;
	width: 300px;
}
.button_2:hover {
	background-color: #fff;
	border-color: #900020;
	color: #900020;
	text-decoration:none;
}

@media (max-width: 359px) {
.button_2 {
	font-size:12px;
	width: 200px;
}
}

/* -----------------------------------------------------------------------------
	my-gallery マイギャラリー 
--------------------------------------------------------------------------------*/

.my-gallery {margin:0 auto;}
.my-gallery img {width:220px; height:auto; margin:1rem .5rem;}
.my-gallery figure {width: 25%; float:left; text-align:center; margin-bottom:1.5rem;}
.my-gallery figcaption{font-size:1.4rem;}

@media screen and (max-width : 1024px) {
	.my-gallery img {width:220px; height:auto;}
	
	}

@media screen and (max-width : 800px) {
	.my-gallery img {width:80%; height:auto;}
	.my-gallery figure {width: 50%; float:left;}
	
	}
	
.mb3 {margin-bottom:3rem;}