@charset "Shift_JIS";

@media only screen and (max-width: 640px) {
	div#container {
		width : 100%;
	}

	div#content-inner table{
		width : 100%;
	}

	div#content-inner p,
	div#content-inner table th,
	div#content-inner table td{
		font-size: 1.0em;
		line-height: 1.4em;
	}

	input, button, textarea, select {
		font-size: 24px;
		line-height: 28px;
	}

	div#content-inner form#form_top table th,
	div#content-inner form#form_top table td{
		display: block;
		width: 100%;
		border: solid 0px #999999;
		font-size: 1.0em;
		line-height: 1.4em;
	}
	div#content-inner form#form_top table td{
		padding-bottom: 2.0em;
	}
	label{
		font-size: 24px;
		margin-bottom: 20px;
	}

	input[type="text"],
	textarea {
		outline: none;
		padding: 10px 10px;
		border-radius:3px;
		width : auto;
		max-width: 480px;
		border: 1px solid #aaa;
		-webkit-transition: all .3s;
		transition: all .3s;
	}
	input[type="text"]:focus,
	textarea:focus {
		box-shadow: 0 0 7px #1abc9c;
		border: 1px solid #1abc9c;
	}

	input[type="radio"] {
		display: none;
	}
	input[type="radio"] + label {
		position: relative;
		display: inline-block;
		padding: 3px 40px 3px 40px;
		cursor: pointer;
	}
	input[type="radio"] + label::before,
	input[type="radio"] + label::after {
		position: absolute;
		content: '';
		top: 50%;
		border-radius: 100%;
		-webkit-transition: all .2s;
		transition: all .2s;
	}
	input[type="radio"] + label::before {
		left: 0;
		width: 36px;
		height: 36px;
		margin-top: -16px;
		background: #f3f3f3;
		border: 1px solid #ccc;
	}
	input[type="radio"] + label:hover::before {
		background: #fff;
	}
	input[type="radio"] + label::after {
		opacity: 0;
		left: 3px;
		width: 32px;
		height: 32px;
		margin-top: -13px;
		background: #3498db;
		-webkit-transform: scale(2);
		transform: scale(2);
	}
	input[type="radio"]:checked + label::before {
		background: #fff;
		border: 1px solid #3498db;
	}
	input[type="radio"]:checked + label::after {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}


	input[type="checkbox"] {
		display: none;
	}
	input[type="checkbox"] + label {
		position: relative;
		display: inline-block;
		padding: 3px 3px 3px 34px;
		cursor: pointer;
		-webkit-transition: all .2s;
		transition: all .2s;
	}
	input[type="checkbox"] + label::before,
	input[type="checkbox"] + label::after {
		position: absolute;
		content: '';
		-webkit-transition: all .2s;
		transition: all .2s;
	}
	input[type="checkbox"] + label::before {
		top: 50%;
		left: 0;
		width: 28px;
		height: 28px;
		margin-top: -16px;
		background: #f4f4f4;
		border: 1px solid #ccc;
		border-radius: 3px;
	}
	input[type="checkbox"] + label::after {
		opacity: 0;
		top: 30%;
		left: 3px;
		width: 16px;
		height: 8px;
		margin-top: -4px;
		border-left: 2px solid #3498db;
		border-bottom: 2px solid #3498db;
		-webkit-transform: rotate(-45deg) scale(.5);
		transform: rotate(-45deg) scale(.5);
	}
	input[type="checkbox"] + label:hover::before {
		background: #fff;
	}
	input[type="checkbox"]:checked + label::before {
		background: #fff;
		border: 1px solid #3498db;
	}
	input[type="checkbox"]:checked + label::after {
		opacity: 1;
		-webkit-transform: rotate(-45deg) scale(1);
		transform: rotate(-45deg) scale(1);
	}


	select{
		outline:none;
		text-overflow: '';
		vertical-align: middle;
		color: inherit;
		padding: 8px 10px;
		border:1px solid #aaa;
		width:100%;
		border-radius:3px;
	}

	input[type="submit"] {
		display : inline-block;
		font-size : 1.0em;
		text-align : center;
		cursor : pointer;
		padding : 20px 40px;
		background : #eee;
		color : #000000;
		line-height : 1em;
		transition : .3s;
		border : 1px solid #999999;
		border-radius:3px;
	}
	input[type="submit"]:hover {
		color : #fff;
		background : #666;
	}


}