@charset "utf-8"; /* CSS Document */ /* ------------------------------------- フォームの装飾 -------------------------------------- */ .f_item { padding: 0.5em 1em; margin: 1px; background-color: #FFF; background-image: none; border: 1px solid #CCC; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .f_item:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } .f_item::-moz-placeholder { color: #999; opacity: 1; } .f_item:-ms-input-placeholder { color: #999; } .f_item::-webkit-input-placeholder { color: #999; } .f_item[disabled], .f_item[readonly], fieldset[disabled] .f_item { background-color: #eee; opacity: 1; } .f_item[disabled], fieldset[disabled] .f_item { cursor: not-allowed; } textarea.f_item { height: auto; } @media (min-width: 810px) { .f_wrap .w30 { width: 30%; } .f_wrap .w50 { width: 50%; } .f_wrap .w80 { width: 80%; } .f_wrap .w100 { width: 95%; } } @media (max-width: 809px) { .f_wrap .w30, .f_wrap .w50, .f_wrap .w80, .f_wrap .w100 { width: 95%; } .f_wrap textarea { width: 95%; } } input.btn { display: inline-block; border-radius: 4px; padding: 0.5em 2em; min-width: 5em; margin: 0 4px; color: #FFF; cursor: pointer; background-color: #005EAE; border: 1px solid #005EAE; } input.btn:hover { background-color: rgba(0,94,174,0.8); } input.btn.gray { background-color: #CCC; border: 1px solid #666; color: #000; } input.btn.green { background-color: #209439; border: 1px solid #209439; } input.btn.green:hover { background-color: rgba(32,148,57,0.8); } input.btn.green[disabled] { opacity: 0.5; }