/*@charset "UTF-8";*/
/*@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap');*/

/* body{*/
/*	font-family: "Kaisei Opti", serif;*/
/*	font-family: Arial;*/
/*	font-size: 20px;*/
/*	overflow: auto;*/
/*	background: repeating-linear-gradient(90deg, #ffc0cb, #ffc0cb 20px, #fffafa 20px, #fffafa 40px);*/
/*  }*/
  
/* .container {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    background: repeating-linear-gradient(90deg, #ffc0cb, #ffc0cb 20px, #fffafa 20px, #fffafa 40px);*/
/*    flex-direction: column; */
/*    flex-direction: row;  contents2を横に並べるための指定 */
/*    height: 100vh;*/
/* }*/
 
/* img{*/
/*	 width:200px;*/
/*	 height:150px;*/
/*	 margin-left:20px;*/
/* }*/
 
 
/* .contents1 {*/
/*    background-color: white;*/
/*    padding:40px 100px;*/
/*    margin:70px;*/
/*    border-radius: 30px;*/
/*    border: 2px solid #ffc0cb;*/
/* }*/
 

/* .contents2 {*/
/*	float:left;*/
/*    background-color: white;*/
/*    padding:40px 100px;*/
/*    margin:10px 10px;*/
/*    border-radius: 30px;*/
/*    border: 2px solid #ffc0cb; */
/* }*/
 
/* .contents3 {*/
/*	float:left;*/
/*	display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    background-image: url("image1.jpg");*/
/*    background-size:contain;*/
/*    background-repeat: no-repeat;*/
/*    background-position: center;*/
/*    padding:30px 10px;*/
/*    margin:10px;*/
/* }*/
 
/* h1{*/
/*    text-align: center;*/
/*    font-family: "Kaisei Opti", serif;*/
/* }*/
 
/* .button1{*/
/*	 width: 60px;*/
/*	 height: 30px;*/
/*	 margin-right:50px;*/
/*	 margin-left:85px;*/
/*	 font-family: "Kaisei Opti", serif;*/
/*	 font-size: 20px;*/
/*	 background-color:#ffc0cb ;*/
/*	 border: none;*/
/*	 border-radius: 5px;*/
/*	 color:white;*/
/* }*/
 
/* .button2{*/
/*	 width: 60px;*/
/*	 height: 30px;*/
/*	 margin-right:50px;*/
/*	 margin-left:65px;*/
/*	 font-family: "Kaisei Opti", serif;*/
/*	 font-size: 20px;*/
/*	 background-color:lightblue ;*/
/*	 border: none;*/
/*	 border-radius: 5px;*/
/*	 color:white;*/
/* }*/
 
/* #kekka{*/
/*	 text-align: center;*/
/*	 padding: 80px;*/
     
/* }*/
 
/*.error_massage{*/
/*	 font-size: 20px;*/
/*	 color:red;*/
/*}*/

/*以下　修正後*/

@charset "UTF-8";
/*@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

body {
	/*font-family: Arial, sans-serif;*/
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	margin: 0;
	padding: 0;
	background: repeating-linear-gradient(
	90deg,
#f5f5dc,
#f5f5dc 20px,
#fefefe 20px,
#fefefe 40px);
	overflow-x: hidden;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 20px;
}

img {
	width: 100%;
	max-width: 200px;
	height: auto;
	margin: 0 auto 20px auto;
	display: block;
}

.contents1,
.contents2,
.contents3{
	text-align: center;
	background-color: #ffffff;
	padding: 40px 20px;
	margin: 20px;
	border-radius: 30px;
	border: 2px solid #ffc0cb;
	width: 100%;
	max-width: 500px;
	box-sizing: border-box;
}

/*.contents3 {*/
/*	background-image: url("image1.jpg");*/
/*	background-size: contain;*/
/*	background-repeat: no-repeat;*/
/*	background-position: center;*/
/*	padding: 30px 10px;*/
/*	margin: 10px;*/
/*	display: flex;*/
/*	justify-content: center;*/
/*	align-items: center;*/
/*	width: 100%;*/
/*	max-width: 600px;*/
/*	box-sizing: border-box;*/
/*}*/

h1 {
	text-align: center;
	font-family: "Kaisei Opti", serif;
}

.button1,
.button2 {
	width: 100px;
	height: 40px;
	margin: 10px auto;
	display: block;
	font-family: "Kaisei Opti", serif;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	color: white;
	cursor: pointer;
}

.button1 {
	background-color: #ffc0cb;
}

.button2 {
	background-color: lightblue;
}

.input1 {
	font-size: 18px;
	padding: 5px;
	width: 65%;
	margin: 5px 0;
	text-align: center;
}

#error_massage,
.error_massage {
	font-size: 18px;
	color: red;
	text-align: center;
}

#kekka {
	text-align: center;
	padding: 20px;
	color: #333;
	background-color: rgba(255, 255, 255, 0.9);
/*	border-radius: 20px;*/
/*	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
}

@media (min-width: 768px) {
	.container {
		flex-direction: row;
	}

	.contents1,
	.contents2,
	.contents3 {
		margin: 20px;
	}

	.button1,
	.button2 {
		margin-left: auto;
		margin-right: auto;
	}
}