@charset "utf-8";
/**/

.header-img {
	max-width: 100%;
}

/*placeholderのスタイル設定*/
input::-webkit-input-placeholder {
	font-size:0.8em;
}
input:-moz-placeholder {
	font-size:0.8em;
}

input[readonly] {
	background-color:#DCDCDC;
}

/**メアド入力画面用**/
ul {
	list-style:none;
	margin: 0 auto;
	padding-left: 0;
	border-top:1px black solid; 
	border-left:1px black solid;
	/* widthだけデバイス毎に設定 */
}

li {
	border-bottom:1px black solid;
	border-right:1px black solid;
	line-height:14px;
	text-align:left; 
	padding:5px;
}

.label {
	color:#FFF;
	font-weight:bold;
	background-color:#333333;
}

/**完了画面用**/
table {
	margin:0px;
	padding:0px;
	border-top:1px black solid;
	border-left:1px black solid;
	border-collapse:collapse;
}

td {
	margin:0px;
	padding:5px;
	border-right:1px black solid;
	border-bottom:1px black solid;
	line-height:1.3em;
}
.listtitle {
	font-weight:bold;
	text-align:center;
	background-color:#333333;
	color:#FFF;
}

/*===============================================
画面の横幅が769px以上（パソコン用）
===============================================*/
@media screen and (min-width: 769px){

body {
	width:700px;
	margin: 0 auto;
	text-align: center;
	font-size:14px;
}

.annotation {
	position:relative;
	right:310px;
}

ul {
	width:590px; 
}

dl {
	margin:0px;
	padding:0px;
	border-left:1px black solid;
	border-collapse:collapse;
	background-color:#333333;
}

.dl-last {
	border-bottom:1px black solid;
}

dt {
	float:left;/* 左に寄せる */
	clear : both;/* フロートの解除 */
	padding:5px;
	border-top:1px black solid;
	width:150px;
	background-color:#333333;
	font-weight:bold;
	text-align:left;
	color:#FFF;
}

#reminder dt {
	float:left;/* 左に寄せる */
	clear : both;/* フロートの解除 */
	padding:5px;
	border-top:1px black solid;
	width:175px;
	background-color:#333333;
	font-weight:bold;
	text-align:left;
	color:#FFF;
}

dd {
	margin-left:160px;
	padding:5px;
	border-top:1px black solid;
	border-right:1px black solid;
	border-left:1px black solid;
	text-align:left;
	background-color:#fff;
	min-height:1.5em;
	word-wrap: break-word;
}

#reminder dd {
	margin-left:185px;
	padding:5px;
	border-top:1px black solid;
	border-right:1px black solid;
	border-left:1px black solid;
	text-align:left;
	background-color:#fff;
}

.bottom-space {
	margin-bottom:5px;
}

.required {
	color:#ff952b;
	font-size:0.8em;
}

.fontsmall {
	font-size:80%;
}

.attention {
	font-size:80%;
	color:red;
}

.inputsize-long {
	width:100%;
	height:22px;
	border:1px #9f9f9f solid;
	font-size: 14px;
}

.inputsize-half {
	width:40%;
	height:22px;
	border:1px #9f9f9f solid;
	font-size: 14px;
}

.inputsize-short {
	width:10em;
	height:22px;
	border:1px #9f9f9f solid;
	font-size: 14px;
}

.inputsize-school {
	width:90%;
/**/	height:22px;
	border:1px #9f9f9f solid;
	font-size: 14px;
}

.pcNone {
	display: none; /*PCでは非表示*/
}

}



/*===============================================
画面の横幅が768pxまで（タブレット用）
===============================================*/
/*
@media screen and (max-width: 768px){

}
*/

/*===============================================
画面の横幅が640pxまで（スマホ用）
===============================================*/
/*@media screen and (max-width:640px){*/
@media screen and (max-width: 768px){


body {
/*	width:700px; */
/*	margin: 5 auto;
	text-align: center; */
	font-size:18px;
}
/*
.annotation {
	position:relative;
	right:310px;
}
*/

dl, dt, dd {
  margin : 0;
  padding : 0;
}


ul {
	width:100%; 
}

dl {
	width:100%;
/*	background-color:#333333; */
}
/*
.dl-last {
	border-bottom:1px black solid;
}
*/
dt {
	margin-top:30px;
	width:100%;
/*	padding:5px; */
	text-indent : 5px;
	border-top:1px black solid;
	border-right:1px black solid;
	border-left:1px black solid;
	border-bottom:1px black solid;
	background-color:#333333;
	font-weight:bold;
	text-align:left;
	color:#FFF;
}

dd {
/*	margin-left:160px; */
	padding:5px;
	text-align:left;
	background-color:#fff;
	word-wrap: break-word;
}

.top-space {
	margin-top:5px;
}

.bottom-space {
	margin-bottom:5px;
}

.required {
	color:#ff952b;
	font-size:0.8em;
}

.fontsmall {
	font-size:80%;
}

.attention {
	font-size:80%;
	color:red;
}

/*
input[type="text"] {
	height:40px;
}

input[type="email"] {
	height:40px;
}

input[type="tel"] {
	height:40px;
}
*/
select {
	-webkit-appearance: none;
	height:40px;
	border:1px #9f9f9f solid;
	font-size: 16px; /* iPhoneの入力時拡大阻止対応 */
	scale(0.8); /* iPhoneの入力時拡大阻止対応 */
}

.inputsize-long {
	width:100%;
	height:40px;
	border:1px #9f9f9f solid;
	font-size: 16px; /* iPhoneの入力時拡大阻止対応 */
	scale(0.8); /* iPhoneの入力時拡大阻止対応 */
}

.inputsize-half {
	width:75%;
	height:40px;
	border:1px #9f9f9f solid;
	font-size: 16px; /* iPhoneの入力時拡大阻止対応 */
	scale(0.8); /* iPhoneの入力時拡大阻止対応 */
}

.inputsize-short {
	width:25%;
	height:40px;
	border:1px #9f9f9f solid;
	font-size: 16px; /* iPhoneの入力時拡大阻止対応 */
	scale(0.8); /* iPhoneの入力時拡大阻止対応 */
}

.inputsize-school {
	width:100%;
	height:40px;
	border:1px #9f9f9f solid;
	font-size: 16px; /* iPhoneの入力時拡大阻止対応 */
	scale(0.8); /* iPhoneの入力時拡大阻止対応 */
}

.br:before {
	content: "\A" ;
	white-space: pre ;
}

.spNone {
	display: none; /*スマホでは非表示*/
}

}