@charset "UTF-8";

body{
	background-image:url("");
	background-repeat: repeat;
	color: #3355aa;
	background-color: #ffffff;
}

a:link{color: #8866aa;}
a:visited{color: #66aa88;}
a:active{color: #aa6688;}
a:hover{
	color: #aa33aa;
	position:relative;
	top:1px;
	left:1px;
}

.haku{
	border: solid 0px #333333;
	width: 480px;
	height: 50px;
}

/* ========================================================================== */
.container {
      /* 横幅は画面いっぱいに広げつつ、最大でも500pxに制限 */
      width: 100%;
      max-width: 500px;
      
      /* 枠を画面の中央に配置 */
      margin: 0 auto;
      
      /* 見た目の装飾（分かりやすいように枠線と背景を配置） */
      background-color: #fafafa;
      border: 2px solid #aaccff;
      padding: 20px;
      box-sizing: border-box; /* パディングを含めたサイズ計算 */
      border-radius: 8px;
    }

@media screen and (min-width: 600px) {
	.container {
		/* PCの時は最大幅を800pxに広げる */
		max-width: 800px;
		background-color: #f3faff; /* PCに切り替わったのが分かりやすいよう色を変更 */
	}
}
/* ========================================================================== */

.tit1{
	text-align: center;
	font-size: 30px;
	padding: 10px;
	margin: 0 auto;
}

.osirase{
	text-align: center;
	font-size: 16px;
	line-height: 1.8;
	color: #aa66aa;
	margin: 0 auto;
	border: dotted #aaccff;
	border-width: 2px 0px 2px 0px;
	padding: 20px;
	box-sizing: border-box; /* パディングを含めたサイズ計算 */
	border-radius: 0px;
}

.con1{
	text-align: left;
	font-size: 16px;
	line-height: 1.8;
	padding: 10px;
	margin: 0 auto;
}

.asiato{
	border: none 1px #aaaaaa;
	text-align: center;
	font-size: 15px;
	color: #5599bb;
	padding: 10px;
	margin: 0 auto;
}