/*ページ上部説明　section.description*/
section.description{
	padding-top: 32px;
}
.description h3{
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
text-align: center;
font-size: 32px;
color: #333;
}
.description p{
	max-width:610px;
	width: 100% ;
	margin: 0 auto;
	padding-top: 30px;
	font-size: 14px;
	font-weight: 500;
}

/*メニュー　section.menus*/
section.menus{
	margin-top: 100px 
}

main .flexBox{
	flex-wrap: wrap;/*2カラム以上*/
	justify-content: space-between;
}

main .flexBox2{
margin-bottom:100px;
max-width: 310px;
width: 100%;
}
.menu1{

width: 100%;
position: relative;
background-color: #F5F5F5;
}
.menu1:hover{
opacity: 0.8;
transition-duration: 0.7s

}
.menu1 img{
	width: 100%;
height: auto;
}
.menu1 .text{
	height: 140px;
	display: flex;
	 flex-direction: column;/*縦一列*/
	     justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
}
.menu1 p{
	padding:50px 20px 0;
	font-size: 12px;
	font-weight: 500
}
@media all and (-ms-high-contrast: none) {
.menu1 p{
	max-width: 280px
}

}
.menu2{
	position: absolute;
	top: 59%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	width: 266px;
	height: 100px;
text-align: center;
padding:20px;
box-sizing: border-box; 
}
.tri{
width: 0;
height: 0;
border-style: solid;
border-width: 21px 21px 0 21px;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 100%;
	left: 50%;
		transform: translate(-50%, -50%);
}
a .menu2,a:visited .menu2{
	color: #333;


}

.menu2 h3{
	padding: 11px;
	font-size: 17px;
	font-weight: 700;

}
.ruby{
	font-weight: 500;
}

.line{
	border-top:1px solid #C1DF8F;
	width: 34px;
	margin: 0 auto
}

/*--------------------------------------------------- */
/* 4列時に最後の行を左寄せ
/*--------------------------------------------------- */
main .flexBox::before{
		content: "";
		display: block;
		width: calc(310px );
		order: 1;
	}
main .flexBox::after{
		content: "";
		display: block;
		width: calc(310px);
}

/*レスポンシブ*/
@media screen and (min-width: 641px) and (max-width:987px){
    div div.flexBox2{
max-width: 987px;
width: 48.8%;
}
}


@media only screen and (max-width: 640px) {
    

/*ページ上部説明　section.description*/

.description h3{
font-size: 24px;

}
.description p{
	max-width:auto;
	width: 100% ;

	padding-top: 20px;
	font-size: 12px;
}

/*メニュー　section.menus*/
main section.menus{
	margin-top: 50px 
}

main div.flexBox{
display: block;
}

main div.flexBox2{
margin-bottom:50px;
max-width:initial;
width: 100%
}

.menu1 img{
	display: block;
	margin: 0 auto;
	padding: 0;
}
.menu1 div.text{
	height: auto;

}
div.menu1 p{
	padding:30px;
	font-size: 12px;

}
div.menu2{
	position: relative;
	top: 0;
	left: 0;
	transform: translate(0, 0);
	width: 90%;
	margin: 0 auto;
	height: auto;
padding:16px;
}
.tri{
}


.menu2 h3{
	padding: 6px;
	font-size: 17px;

}


}