@charset "utf-8";

/* ============================================================== form */
.frm input,
.frm select,
.frm textarea,
.frm dl,
.frm dt,
.frm dd                  {-moz-box-sizing:border-box;box-sizing:border-box;}
.frm input[type=password],
.frm input[type=text],
.frm select,
.frm textarea            {font-size:16px;min-height:1em;padding:0.8em;line-height:1.5em;background:#fff;outline:none;border:1px solid #ccc;border-radius:0;}
.frm input[type=password],
.frm input[type=text],
.frm select,
.frm textarea            {width:100%;}
.frm select              {line-height:3em;} /* for safari */

.frm textarea.on_focus,
.frm input.on_focus      {border-color:#0c9;}

/* ----------------------------------------------- frame */
.frm dd span             {margin-bottom:0.5em;display:block;}

/* ----------------------------------------------- radio button */
.frm input[type=radio]                           {opacity:0;position:absolute;}
.frm input[type=radio] + label                   {position:relative;display:inline-block;padding-left:28px;line-height:1.5em;vertical-align:top;cursor:pointer;}
.frm input[type=radio] + label:after,
.frm input[type=radio] + label:before            {border:1px solid #ccc;background:#fff;content:"";position:absolute;display:block;-moz-box-sizing:border-box;box-sizing:border-box;transition:0.2s ease;}
.frm input[type=radio] + label:before            {z-index:3;width:18px;height:18px;top:5px;left:0;}
.frm input[type=radio] + label:after             {z-index:5;width:0;height:0;top:14px;left:9px;opacity:0;}
.frm input[type=radio]:checked + label:after     {background:#ccc;width:12px;height:12px;top:8px;left:3px;opacity:1;}

.frm input[type=radio] + label:after,
.frm input[type=radio] + label:before            {border-color:#ccc;border-radius:50%;}
.frm input[type=radio] + label                   {color:#666;}
.frm input[type=radio] + label:hover             {color:#000;}
.frm input[type=radio]:checked + label:after     {background:#0c9;}

/* ----------------------------------------------- checkbox */
.frm input[type=checkbox]                           {opacity:0;position:absolute;}
.frm input[type=checkbox] + label                   {position:relative;display:inline-block;padding-left:28px;line-height:1.5em;vertical-align:top;cursor:pointer;}
.frm input[type=checkbox] + label:after,
.frm input[type=checkbox] + label:before            {border:1px solid #ccc;background:#fff;content:"";position:absolute;display:block;-moz-box-sizing:border-box;box-sizing:border-box;transition:0.2s;}
.frm input[type=checkbox] + label:before            {z-index:3;width:18px;height:18px;top:5px;left:0;}
.frm input[type=checkbox] + label:after             {z-index:5;width:0;height:0;top:14px;left:9px;}
.frm input[type=checkbox] + label:after             {border:0 none;border-left:0 solid #111;border-bottom:0 solid #111;left:3px;width:0;height:0;margin-top:0;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
.frm input[type=checkbox]:checked + label:after     {border-left:3px solid #111;border-bottom: 3px solid #111;background:transparent;left:3px;width:16px;height:8px;margin-top:-8px;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}

.frm input[type=checkbox] + label                   {color:#666;}
.frm input[type=checkbox] + label:hover             {color:#000;}
.frm input[type=checkbox]:checked + label:after     {border-color:#0c9;}

/* ----------------------------------------------- elements */
.frm .btns               {clear:both;}
.frm .recube_copy        {display:none;}

/* ----------------------------------------------- error */
.ErrorMessage            {color:#fff;background:#d12;margin-bottom:1em;padding:1em;line-height:1.5;font-weight:bold;}
.frm .error              {color:#d12;margin-bottom:0.5em;line-height:1.5;font-weight:bold;}
.frm .error + select,
.frm .error + input,
.frm .error + textarea   {border-color:#e34;}

/* ============================================================== media query */
@media screen and (min-width: 640px){
}
@media screen and (min-width: 1280px){
}

.frm .caution {color:#f60;font-weight:bold;}
.frm .caution br {display:none;}
@media screen and (min-width: 760px){
	.frm .caution br {display:inline;}
}