button {
	padding: 0;
	border: none;
}

/*背景(透過)*/
.layer{
	display: flex;
	background: rgba(0, 0, 0, 0.3);
	width: 100%;
	height: 100%;
	position: fixed; /* 画面固定用 */
	top: 0;
	left: 0;
	z-index: 1000; /*ヘッダーよりも前配置*/
	justify-content: center;
	align-items: center;
	/*表示・非表示用アニメーション*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

/*モーダル*/
.modal {
	overflow: scroll;
	position: relative;
	display: flex;
	padding: 20px;
	width: 80%;
	max-width: 330px;
	height: 80%;
	background-color: rgb(240, 240, 240);
	border-radius: 10px;
	/*表示・非表示用アニメーション*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

/*モーダル　中身*/
.modal_text{
	margin: auto;
}

.modal_title{
	display: flex;
	justify-content: space-between; /*横軸*/
	align-items: center; /*縦軸*/
	position: relative;
	font-size: 18px;
	margin-bottom: 10px;
}

.modal_title:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(50, 50, 50);
	bottom: -5px;
	width: 100%;
}

/*モーダル内画像*/
.modal_img{
	width: 100%; /*モーダルのサイズに合わせる*/
	/*max-width: 400px;*/
    	height: auto;
    	margin-top: 5px;
    	margin-bottom: 10px;
}

/*閉じるボタン*/
.close_button{
	position: absolute;
	top: 5px;
	left: 90%;
}

/*閉じるアイコン*/
.close{
	width: 100%;
	height: 30px;
	display: block;
	text-align: center;
}

.close::before, .close::after{
	content: "";
	width: 3px; /*線の太さ*/
	height: 30px; /*線の大きさ*/
	background: rgb(80, 80, 80);
	border-radius: 5px;
	position: absolute;
	margin-top: 10px;
	margin-bottom: 10px;
}

.close::before{
	transform: rotate(45deg);
}

.close::after{
	transform: rotate(-45deg);
}