@charset "utf-8";

form#form1 {
    border: 1px solid #ccc;
    background: #F5F9FF;
    /*↓背景グラデーションの指定*/
    background: -moz-linear-gradient(top, #FDFEFF, #E6F0FF);
    background: -webkit-linear-gradient(top, #FDFEFF, #E6F0FF);
    background: linear-gradient(#FDFEFF, #E6F0FF);
    padding: 15px 20px;
    margin-bottom: 15px;
	margin-top: 30px;
}

form#form1_m {
    border: 1px solid #ccc;
    background: #EBFDE9;
    /*↓背景グラデーションの指定*/
    background: -moz-linear-gradient(top, #FDFEFD, #EBFDE9);
    background: -webkit-linear-gradient(top, #FDFEFD, #EBFDE9);
    background: linear-gradient(#FDFFFD, #EBFDE9);
    padding: 15px 20px;
    margin-bottom: 15px;
	margin-top: 30px;
}

form#form1 ul,
form#form1_m ul { /*リスト要素ulを初期化*/
    padding:0;
    margin:0;
}
form#form1 ul li,
form#form1_m ul li { /*liも初期化し、ボーダーなどを指定*/
    list-style:none;
    margin:0px;
    padding:5px;
    border-top: 2px solid #FFF;
}
form#form1 ul li:first-child,
form#form1_m ul li:first-child { /*最初のliにはボーダーをつけない*/
    border-top:none;
}

/* span要素をブロック化しフロートでフォーム部品と横に並べる*/
form#form1 ul li span.sp,
form#form1_m ul li span.sp {
    width: 10em;
    margin:0px;
    display:block;
    float:left;
/* floatでなく、CSS3 の「display: inline-block」を使う手もアリ */
}

/*チェックボックス、ラジオボタンの label要素を横に並べる*/
form#form1 ul li p label,
form#form1_m ul li p label {
    margin-right: 1em;
    display: block;
    float: left;
}
/*チェックボックスのlabelの横幅を統一する（pにクラス名.checkをつけて）*/
form#form1 ul li p.check label,
form#form1_m ul li p.check label {
    width: 9em;
}
/*ラジオボタンの方は、labelの横幅指定はしていません*/

form#form1 ul li:after,
form#form1_m ul li:after {
    content:".";
    display:block;
    height:0;
    visibility:hidden;   /*←ココまでは不可視のエレメントを作っています*/
    clear:both;     /*←フロートをクリア*/
}

form#form1 ul li p label:hover,
form#form1_m ul li p label:hover {
    background: #FFF;
    color: #096;
    font-weight:bold;
}

form#form1 input.ipt01,
form#form1 input.ipt02,
form#form1_m input.ipt01,
form#form1_m input.ipt02 {
border:0;
padding:5px;
font-size:120%;
border:solid 1px #ccc;
border-radius: 5px;
}

form#form1 input.ipt01,
form#form1_m input.ipt01 {
width:150px;
}

form#form1 input.ipt02,
form#form1_m input.ipt02 {
width:350px;
}

form#form1 textarea.ara01,
form#form1_m textarea.ara01 {
border:0;
padding:5px;
font-size:120%;
border:solid 1px #ccc;
border-radius: 5px;
width: 500px;
}

form#form1 input[type="submit"],
form#form1 input[type="reset"],
form#form1_m input[type="submit"],
form#form1_m input[type="reset"]{
padding: 10px 30px;
font-size: 110%;
}