@charset "utf-8";
html {font-size: 62.5%;}
body {padding:0; margin:0;/* background-color: #eae5e3;*/}
a{text-decoration: none; color: #000;}
#HE_wrap p {padding:0;margin:0;}
.content {
	width: 100%;
	margin:0 auto; 
	padding: 0;
}
#HE_wrap {
	clear: both;
	width:100%;
	max-width: 1200px;
	padding: 5% 0 ;
	margin:0 auto 0;
	/*font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";*/
	/*font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";*/
	/* font-family: "Montserrat", sans-serif;*/
	 font-family: "Noto Serif", serif;
	font-style: normal;
	/*color: #252525;	*/
	background-color: #ebe7e4;
}



/*.brand-header{background-color: #f9f4ea;}*/

.main {
	width: 40%;
	margin:0 auto 5%;
}

.sp {display:none;}	
.clear {clear:both;}

/*.Lead_pc {
	width: 100%;
	margin: 0 auto 10%;
	display: block;
	text-align:center;
	font-size:1.6rem;
	padding:0 ;
	line-height:2em;
}

.Lead_sp {display: none;}*/
.bold{font-weight: 600;}
.sml{font-size: 70%; display: block; margin-top: 3%; line-height: 1.6em;}
h2{width: 100%; margin: 10% auto 0; padding: 5px 0; font-size: 18px; background-color: #000; color: #fff; /*border-top: 1px solid #353535; border-bottom: 1px solid #353535;*/ font-weight: 400; text-align: center; }

/*h1{width: 100%; font-size: 55px; margin: 5% auto 3%; font-weight: 500; text-align: center; }
h3{width: 100%; font-size: 28px; margin: 10% auto 7%; font-weight: 500; text-align: center; }
p.sub_txt{width: 100%; font-size: 25px; margin: 0 auto 3%; font-weight: 400; text-align: center; }
*/

/*ITEM*/
.index_box{width: 58%; margin: 0 auto 10%; display:flex; flex-wrap:wrap; justify-content: space-between;}
.index1{width: 20%; margin: 5% 0 0;}
.index2{width: 22%; margin: 2% 0 0;}
.index3{width: 18%; margin: 10% 0 0;}
.index4{width: 16%; margin: 0;}

.staff_wrap{width: 60%; margin: 0 auto 10%;}
.staff_box{width: 100%; margin: 0 auto 5%;/* display:flex; flex-wrap:wrap; justify-content: space-between;*//* align-items: center;*/}
.staff1{width: 60%; margin: 0; display:flex; flex-wrap:wrap; justify-content: space-between; align-items: center;}
.staff2{width: 100%; margin: 2% 0 0 ; font-size: 16px; line-height: 1.6em; text-align: left; font-weight: 400;}

.staff_n{width: 45%; margin: 0;}

.sns_box{width: 45%; margin: 0; display:flex; flex-wrap:wrap; justify-content: space-between;}
.sns1{width: 30%; margin: 5% 0 0;}

.credit{width: 100%; margin: 5% auto; font-size: 18px; text-align: center; line-height: 2em; font-family: "Noto Sans", sans-serif;}

/* スライダ―のCSS */
.slider { width: 100%; margin: 5 auto 0; display: flex;  gap: 15px; overflow-x: auto;}
.slide {width: 300px;}
.slide img { width: 250px;}


/* General button style (reset) */
.btn {
	border: none;
	font-family: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	letter-spacing: 1px;
	font-weight: 600;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	/*text-transform: uppercase;*/
	
}


/* Button 1 */
.btn-1 {
	width: 10%;
    display: inline;
    margin: 0 0 0 5%;
    padding: 13px 0px;
    font-size: 16px;
    color: #E3D7D7;
    background-color: #555555;
	border-radius: 80px;
}

.btn-1:hover {
	color: #fff;
	background-color: #909090;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}


@media only screen and (max-width: 750px) {
	/*body {padding:0; margin:0; background-color: #fff;}*/
	.content {width: 100%; margin:0 auto; padding: 0;}
	#HE_wrap {width:100%; padding: 10% 0 5%; margin:0 auto -5%;}
	.pc {display:none;}
	.sp {display:block;}

	.main {width: 80%; margin:0 auto 10%;}
	/*.content {width: 100%; margin:1% auto 10%;}*/
	.Lead_pc {display: none;}

	.Lead_sp {
		width: 100%;
		display: block;
		text-align:center;
		font-size:15px;
		margin:0 auto 15%;
		line-height:1.7em;
	}

/*ITEM*/
	.index_box{width: 80%; margin: 0 auto 25%; display:flex; flex-wrap:wrap; justify-content: space-between;}
	.index1{width: 42%; margin: 6% 0 0;}
	.index2{width: 44%; margin: 2% 0 0;}
	.index3{width: 40%; margin: 15% 0 0;}
	.index4{width: 38%; margin: 0;}

	.staff_wrap{width: 95%; margin: 0 auto 25%;}
	.staff_box{width: 98%; margin: 0 auto 5%; display:block;}
	.staff1{width: 100%; margin: 0; display:flex; flex-wrap:wrap; justify-content: space-between;}
	.staff2{width: 100%; margin: 0; font-size: 14px; line-height: 1.5em; text-align: left;}

	.staff_n{width: 40%; margin: 0;}

	.sns_box{width: 50%; margin: 0; display:flex; flex-wrap:wrap; justify-content: space-between;}
	.sns1{width: 30%; margin: 5% 0 0;}
	
	.slider { width: 100%; display: flex; gap: 15px; overflow-x: auto;}
	/*.slide {width: 300px;}*/
	.slide img { width: 240px;}

	h2{width: 100%; margin: 10% auto 0; padding: 5px 0; font-size: 15px; }
	
	.credit{width: 100%; margin: 5% auto; font-size: 16px; text-align: center;}
	.btn-1 {
		width: 20%;
		margin: 3% 0 0 2%;
		padding: 8px 0px;
		font-size: 14px;
		border-radius: 80px;
	}

}