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

/*===========================================
	faq62.css
=============================================*/

ul.flex {
    display: flex;
    justify-content: space-around;
	margin-bottom: 3em;
}

ul.flex li{
    width: 300px;
}

@media (max-width: 640px){
	ul.flex {
		flex-direction: column;
    	align-items: center;
		margin-bottom: 1em;
	}
	
	ul.flex li{
		margin-bottom: 1.5em;
		max-width: 300px;
		width: 100%;
	}
}


/*モーダルウィンドウコンテンツ*/
button{
	background-color: #fff;
	text-align: left;
}
    
button:hover{
	opacity: 0.7;
	text-decoration: underline;
}

button > span{
	padding-top: 0.3em!important;
	display: block;
}

.modalArea{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 150;
    box-sizing: border-box;
    width: 90%;
    max-width: 840px;
    padding: 1.5em;
    background: #FFF;
    transform: translate(-50%, -50%);
}

.modalArea p{
    margin:  2em 1em 1em;
}

.modalArea p a span{
    text-indent: -1.4em;
    padding-left: 1em;
    display: block;
}

.modalArea p a span::before{
    display: inline-block;
    content: '';
    background-image: url(/share5/svg/icon/angle-right.svg);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    height: 0.6em;
    width: 0.6em;
    margin-left: 0.5em;
}

@media (max-width: 890px) {	
	.modalArea{
		top: 65%;
	}
}