@charset "UTF-8";

h1,dl,dt,dd{margin: 0;padding: 0;}
/* 今回使用のタグの余白をなくす */

body {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
	color: #444444;
}

*{box-sizing: border-box;
}

/*wrapper設定*/
.form_style {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
	border:#525f66 solid 1px;
}

h1 {font-size: 30px;
}

dl {width: 100%;/* 幅を.form_styleに合わせる */
	padding: 20px 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap; /*これがないと全て
	横並びになってしまう*/
}

/* 左の見出し部分 */
dt {width: 25%;
}

/* 右の記述部分 */
dd{width: 75%;
}

dt,dd{padding: 10px 10px 20px 10px;
}/* 両方の項目を同じ余白設定にする */


/* フォームのスタイル設定 */

label{display: block;
}/* このデザイン上でラジオボタンとチェックボックスの項目を縦で表示をするため */


/* 各フォームの設定 */
input[type="text"],input[type="email"],textarea {
	width: 100%;
	padding: 10px;
	color: #444444;
	border: solid 1px #cccccc;
	outline: none;/* 選択した時に周りに枠がつくのでそれを消す */
	transition: ease 0.3s;
	border-radius: 10px/*箱の角を丸くする*/
}

input[type="radio"],input[type="checkbox"]{margin-right: 10px;
}/* ラジオボタンとチェックボックスと文字の間の余白 */

/* フォーカス時の色変更 */
input[type="text"]:focus,input[type="email"]:focus,textarea:focus {
	box-shadow: 0 0 7px #528fcc;
	border: 1px solid #528fcc;
}

textarea {
	resize: none;
}/* textareaの大きさを固定させるため */

/* セレクタの設定 */
select {
	padding: 0px;
	color: #444444;
	border: solid 1px #cccccc;
	border-radius: 3px;
	font-size:14px;
}

::placeholder{font-size: 14px;
}/* input箇所の薄い文字の大きさを設定 */

/* 確認ボタン */
button {
	background: #06668c;
	border: none;
	color: #ffffff;
	padding:10px;
	display: block;/*ブロック要素として表示する*/
	margin: 0 auto;/*センターに表示*/
	border-radius : 10px;
	cursor: pointer;/*カーソルの変更*/
	transition: 0.5s ease;
}

button:hover {
	background: #aed1e8;
	color: #000000;
}