@charset "utf-8";
/* 【 background-color 】背景色 ****************/
/* 【 background-image 】　*********************/


/* 【 background-repeat 】　********************/
/* 【 background-size 】　*********************/
/* 【 border 】線　****************************/
/* 【 color 】色 *****************************/
/* 【 display 】 *****************************/

.mente_yoko, .mente_yoko1, .mente_yoko2, .mente_yoko3{
	display: flex;
}




/* 【 font-size 】文字の大きさ ***************/
/* 【 font-weight 】 ************************/

.mente_mix .p2 span{
	font-weight: bold;
}

/* 【 height 】高さ *************************/
/* 【 justify-content   ********************/
/* 【 line-height 】 ************************/
/* 【 left 】 ******************************/

.mente_mix p{
	left: 30%;
}


/* 【 margin 】 ***************************/

.mente_kami{
	margin: 0 auto;
}

.mainte_area{
	margin-bottom: 25px;
}


/* 【 max-height 】 *************************/
/* 【 max-width 】 **************************/


.mente_kami{
	max-width: 500px;
}

/* 【 opacity 】 ****************************/
/* 【 overflow 】 ***************************/
/* 【 padding 】 ****************************/
/* 【 position 】************************** */
.mente_box, .mente_box1, .mente_box2, .mente_box3{
	position: relative;
}

.mente_box p, .mente_box1 p, .mente_box2 p, .mente_box3 p{
	position: absolute;
}


/* 【 text-align 】 *************************/
/* 【 text-indent 】 ************************/
/* 【 top 】 ********************************/

.mente_box .mente_mix p, .mente_box1 .mente_mix .p1, .mente_box2 .mente_mix .p1, .mente_box3 .mente_mix .p1{
	top:0;
}



.mente_box1 .mente_mix .p2{
	top: 65px;
}

/* 【 vertical-align 】 *********************/
/* 【 width 】横幅 **************************/

.mente_img2{
	width:30%;
}

.mente_img2 img, .mente_kami img{
	width: 100%;
}

.mente_mix{
	width: 44%;
}

.mente_mix img{
	width: 100%;
}

.mente_box1 .mente_mix, .mente_box2 .mente_mix{
	width: 50%;
}

.mente_come2{
	width: 70%;
}

.mente_box3 .mente_mix{
	width: 47.4%;
}


/* 【 other or special CSS 】 *****************/














































/*　▽▽▽▽▽▽ レスポンシブ CSS (画面サイズが(max-width: XXXpx) XXX以下で下記効果を適用します。)　▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽　*/
@media screen and (max-width: 640px){
	/* 【 ［SP］/ background-color 】背景色  ****/
	/* 【 ［SP］/ background-image 】　*********/
	/* 【 ［SP］/ background-repeat 】　********/
	/* 【 ［SP］/ background-size 】　**********/
	/* 【 ［SP］/ border 】線　*****************/
	/* 【 ［SP］/ color 】色 ******************/
	/* 【 ［SP］/ display 】 ******************/

	.mente_yoko, .mente_yoko1, .mente_yoko2, .mente_yoko3{
		display: block;
	}

	/* 【 ［SP］/ font-size 】文字の大きさ *****/
	/* 【 ［SP］/ font-weight 】 **************/
	/* 【 ［SP］/ height 】高さ ***************/
	/* 【 ［SP］/ justify-content 】 **********/
	/* 【 ［SP］/ line-height 】 *************/
	/* 【 ［SP］/ left 】 ********************/
	/* 【 ［SP］/ margin 】 ******************/

	/* 【 ［SP］/ max-height 】 **************/
	/* 【 ［SP］/ max-width 】 ***************/
	/* 【 ［SP］/ opacity 】 *****************/
	/* 【 ［SP］/ overflow 】 ****************/
	/* 【 ［SP］/ padding 】 *****************/
	/* 【 ［SP］/ position 】 ****************/

	.mente_box p, .mente_box1 p, .mente_box2 p, .mente_box3 p{
		position: static;
	}


	/* 【 ［SP］/ text-align 】 **************/
	/* 【 ［SP］/ text-indent 】 *************/
	/* 【 ［SP］/ top 】 *********************/
	/* 【 ［SP］/ vertical-align 】 **********/
	/* 【 ［SP］/ width 】横幅 ***************/

	.mente_img2{
		width: 68%;
	}

	.mente_mix, .mente_box1 .mente_mix, .mente_come2, .mente_box2 .mente_mix, .mente_box3 .mente_mix{
		width: 100%;
	}





	/* 【 ［SP］other or special CSS 】 ******/
}
/*************** レスポンシブ E ***************/