@charset "UTF-8";
/* ----入力フォーム共通--- */
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
input[type="submit"], input[type="button"] {
    -webkit-appearance: none;
    border-radius: 4px;
}
button {
    -webkit-appearance: none;
    border-radius: 0;
}
input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="password"], input[type="url"], input[type="number"] {
    padding: 8px;
    border: 1px solid #CCC;
    background-color: #fff;
    width: 100%;
    border-radius: 5px;
    -webkit-appearance: none;
    margin: 0 5px 0 0;
}
select, textarea {
    height: 37px;
    padding: 8px;
    border: 1px solid #CCC;
    background-color: #fff;
    max-width: 100%;
    border-radius: 5px;
}
input[type="text"]:hover, input[type="tel"]:hover, input[type="email"]:hover, input[type="search"]:hover, input[type="password"]:hover, input[type="url"]:hover, input[type="number"]:hover {
    border: 1px solid #666;
}
select:hover, textarea:hover {
    border: 1px solid #666;
}
input[type="radio"], input[type="checkbox"] {
    width: 26px;
    height: 24px;
    vertical-align: bottom;
	margin-top: 3px;
    margin-right: 2px;
    accent-color: coral;
}
label.radio, label.checkbox {
    cursor: pointer;
}
input[type="radio"], input[type="checkbox"] {
    cursor: pointer;
}
input[type="radio"] + label, input[type="checkbox"] + label {
    cursor: pointer;
}
select {
    cursor: pointer;
}
input[type="text"][disabled] {
    background: #dcdcdc;
    cursor: not-allowed;
}
/* ----ボタン--- */
.btn {
    display: inline-block;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 4px;
}
.btn:hover, .btn:focus {
    text-decoration: none;
}
.btn:active, .btn.active {
    outline: 0;
    -webkit-box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.125);
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.125);
}
.btn.disabled, .btn[disabled], .btn.disabled:hover, .btn[disabled]:hover, .btn.disabled:active, .btn[disabled]:active {
    cursor: not-allowed;
    opacity: 0.65;
    filter: progid:DXImageTransform.Microsoft.BasicImage(opacity=65);
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.btn-default {
    color: #458b13;
    border: solid 2px #458b13;
    background-color: #fff;
}
#modal-overlay-btn {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #444;
}
.variation #modal-overlay-btn {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #444;
    border: none;
    width: 100%;
    height: 100%;
    background: transparent;
}
.btn-primary {
    color: #fff;
    border: solid 1px #e8731c;
    background-color: #e8731c;
}
.btn-primary-regular {
    color: #fff;
    border: solid 2px #458b13;
    background-color: #458b13;
}
.btn-secondary {
    color: #458b13;
    border: solid 2px #458b13;
    background-color: #fff;
}
.btn-secondary[name='btncancel'] {
    color: #fff;
    border: solid 2px #9a9a9a;
    background-color: #9a9a9a;
}
.btn-danger {
    color: #fff;
    border: solid 2px #df253b;
    background-color: #df253b;
}
.hidden-btn {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}
.input-group {
    display: table;
    width: 100%;
}
.input-group > span {
    display: table-cell;
    width: 100%;
}
.input-group-btn {
    display: table-cell;
    white-space: nowrap;
}
/* ----画面上部メッセージー--- */
.alert {
    margin-top: 5px;
    padding: 10px 10px 10px 30px;
    margin-bottom: 5px;
    position: relative;
    border: 1px solid #ebccd1;
    color: #a94442;
    background-color: #f2dede;
}
.alert:before {
    font-family: FontAwesome;
    content: "\f071";
    position: absolute;
    left: 10px;
}
.success {
    margin-top: 5px;
    padding: 10px 10px 10px 30px;
    margin-bottom: 5px;
    position: relative;
    border: 1px solid #bce8f1;
    color: #31708f;
    background-color: #d9edf7;
}
.success:before {
    font-family: FontAwesome;
    content: "\f05a";
    position: absolute;
    left: 10px;
}
/* ----横型入力フォーム--- */
.fieldset-mail {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}
.customer .fieldset-mail {
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
}
.fieldset-mail .form-group {
    display: table;
    width: 100%;
    border-left: #c9c9c9 1px solid;
    border-right: #c9c9c9 1px solid;
    border-bottom: #c9c9c9 1px solid;
}
.fieldset-mail .form-group:nth-of-type(1) {
    border-top: #c9c9c9 1px solid;
}
.fieldset-mail .form-label, .fieldset-mail .constraint, .fieldset-mail .form-control {
    display: table-cell;
}
.fieldset-mail .form-label {
    width: 46%;
    padding: 8px 5px 8px 8px;
    text-align: left;
    background: #f3f3f3;
    word-break: break-word;
}
.fieldset-mail .form-label label {
    font-weight: bold;
}
.fieldset-mail .constraint {
    width: 65px;
    padding: 5px;
    background: #f3f3f3;
}
.fieldset-mail .form-control {
    padding: 5px 0 5px 8px;
}
.fieldset-mail .form-control label.radio::after {
    content: '\A';
    white-space: pre;
}
.fieldset-mail .form-control .btn {
    width: 100%;
}
/* .fieldset-mail.block-member-info--items-magazineline .form-control {
  padding: 5px 20px 5px 20px;
} */
/* ----入力フォームタイトル--- */
.legend {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    margin: 10px 0;
    padding: 5px 0;
    border-bottom: 2px solid #444;
}
/* ----縦型入力フォーム--- */
.fieldset-vertical {
    margin-top: 10px;
    margin-bottom: 10px;
}
.fieldset-vertical .form-group {
    margin: 5px 0 10px 0;
}
.fieldset-vertical .form-label, .fieldset-vertical .constraint {
    float: left;
    margin: 0 0 5px 0;
}
.fieldset-vertical .form-label {
    margin: 0 5px 0 0;
}
.fieldset-vertical .form-label label {
    font-weight: bold;
}
.fieldset-vertical .form-control {
    clear: both;
}
/* ----入力支援--- */
.form-error {
    display: block;
    color: #a94442;
}
.required:after {
    display: inline;
    padding: 0.2em 0.6em;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
    color: #fff;
    background-color: #d9534f;
    content: "必須";
}
.help-block {
    display: block;
    font-size: 10px;
    margin-top: 5px;
    text-align: justify;
    /*white-space: nowrap;*/
    color: #737373;
}
.help-block br {
    display: none;
}
.count-msg-another {
    display: block;
    font-size: 11px;
    margin-top: 5px;
    color: #555;
}
.count-msg {
    display: block;
    font-size: 11px;
    margin-top: 5px;
    color: #f66;
}
/* ----入力フォームボタン--- */
.action-buttons {
    width: 95%;
    margin: 0 auto 30px;
    display: block;
}
.action .btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px 0;
}
/* ----ラジオボタン、チェックボックス--- */
.radio, .checkbox {
    margin-right: 10px;
}
/* ----EFO--- */
.efo-icon {
    border: none;
    vertical-align: middle;
}
input[type="text"].efo-error, input[type="tel"].efo-error, input[type="email"].efo-error, input[type="search"].efo-error, input[type="password"].efo-error, input[type="url"].efo-error, input[type="number"].efo-error {
    background-color: #f2dede;
}
select.efo-error, textarea.efo-error {
    background-color: #f2dede;
}
input[type="text"].efo-valid, input[type="tel"].efo-valid, input[type="email"].efo-valid, input[type="search"].efo-valid, input[type="password"].efo-valid, input[type="url"].efo-valid, input[type="number"].efo-valid {
    background-color: #e9f2d7;
}
select.efo-valid, textarea.efo-valid {
    background-color: #e9f2d7;
}
input[name="addr2"].efo-caution, input[name="s_addr2"].efo-caution, input[name="d_addr2"].efo-caution {
    background-color: #fbf5c0;
}
.page-category input[type="text"], .page-goods input[type="text"], .page-review input[type="text"], .page-category input[type="tel"], .page-goods input[type="tel"], .page-review input[type="tel"], .page-category input[type="email"], .page-goods input[type="email"], .page-review input[type="email"], .page-category input[type="search"], .page-goods input[type="search"], .page-review input[type="search"], .page-category input[type="password"], .page-goods input[type="password"], .page-review input[type="password"], .page-category input[type="url"], .page-goods input[type="url"], .page-review input[type="url"], .page-category input[type="number"], .page-goods input[type="number"], .page-review input[type="number"] {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 11px 1em;
    border-radius: 4px;
    max-width: 100%;
}
.page-category select, .page-goods select, .page-review select, .page-category textarea, .page-goods textarea, .page-review textarea {
    padding: 4px;
    border: 1px solid #999;
    background-color: #fff;
    max-width: 100%;
}
.page-category input[type="text"]:hover, .page-goods input[type="text"]:hover, .page-review input[type="text"]:hover, .page-category input[type="tel"]:hover, .page-goods input[type="tel"]:hover, .page-review input[type="tel"]:hover, .page-category input[type="email"]:hover, .page-goods input[type="email"]:hover, .page-review input[type="email"]:hover, .page-category input[type="search"]:hover, .page-goods input[type="search"]:hover, .page-review input[type="search"]:hover, .page-category input[type="password"]:hover, .page-goods input[type="password"]:hover, .page-review input[type="password"]:hover, .page-category input[type="url"]:hover, .page-goods input[type="url"]:hover, .page-review input[type="url"]:hover, .page-category input[type="number"]:hover, .page-goods input[type="number"]:hover, .page-review input[type="number"]:hover {
    border: 1px solid #666;
}
.page-category select:hover, .page-goods select:hover, .page-review select:hover, .page-category textarea:hover, .page-goods textarea:hover, .page-review textarea:hover {
    border: 1px solid #666;
}
.page-category input[type="radio"], .page-goods input[type="radio"], .page-review input[type="radio"], .page-category input[type="checkbox"], .page-goods input[type="checkbox"], .page-review input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 5px;
    cursor: pointer;
}
.page-category input[type="radio"] + label, .page-goods input[type="radio"] + label, .page-review input[type="radio"] + label, .page-category input[type="checkbox"] + label, .page-goods input[type="checkbox"] + label, .page-review input[type="checkbox"] + label {
    cursor: pointer;
}
.page-category input[type="radio"], .page-goods input[type="radio"], .page-review input[type="radio"] {
    display: none;
}
.page-category input[type="radio"] + label:before, .page-goods input[type="radio"] + label:before, .page-review input[type="radio"] + label:before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    border: 1px solid #bfbfbf;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: calc(50% - 14px);
}
.page-category input[type="radio"]:checked + label:before, .page-goods input[type="radio"]:checked + label:before, .page-review input[type="radio"]:checked + label:before {
    background: #458b13;
    border: 1px solid #458b13;
}
.page-category input[type="radio"] + label:after, .page-goods input[type="radio"] + label:after, .page-review input[type="radio"] + label:after {
    content: '';
    display: block;
    width: 8px;
    height: 14px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: calc(50% - 2px);
    left: 10px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}
.page-category input[type="radio"]:checked + label:after, .page-goods input[type="radio"]:checked + label:after, .page-review input[type="radio"]:checked + label:after {
    opacity: 1;
}
.page-category .checktype_custappend, .page-goods .checktype_custappend, .page-review .checktype_custappend {
    display: block;
    padding: 10px 0px 5px;
}
.page-category .form-control, .page-goods .form-control, .page-review .form-control {
    margin-top: 10px;
    margin-bottom: 10px;
}
.page-category label.radio, .page-goods label.radio, .page-review label.radio, .page-category label.checkbox, .page-goods label.checkbox, .page-review label.checkbox {
    cursor: pointer;
}
.page-category select, .page-goods select, .page-review select {
    cursor: pointer;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    width: auto;
    padding: 11px 2.5em 11px 1.5em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("../../img/usr/common/icon_delta.png");
    background-position: calc(100% - 1em) center;
    background-size: 12px 10px;
    background-repeat: no-repeat;
}
.page-category input[type="text"][disabled], .page-goods input[type="text"][disabled], .page-review input[type="text"][disabled] {
    background: #dcdcdc;
    cursor: not-allowed;
}
.page-category .radio, .page-goods .radio, .page-review .radio {
    margin-right: 10px;
}
.page-category input[type="checkbox"], .page-goods input[type="checkbox"], .page-review input[type="checkbox"] {
    margin: 0;
    display: none;
}
.page-category input[type="checkbox"]:checked ~ label:before, .page-goods input[type="checkbox"]:checked ~ label:before, .page-review input[type="checkbox"]:checked ~ label:before {
    background: #458b13;
    border: 1px solid #458b13;
}
.page-category input[type="checkbox"]:checked ~ label:after, .page-goods input[type="checkbox"]:checked ~ label:after, .page-review input[type="checkbox"]:checked ~ label:after {
    opacity: 1;
}
.page-category input ~ label, .page-goods input ~ label, .page-review input ~ label {
    cursor: pointer;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: auto;
    padding-left: 50px;
    line-height: 40px;
    margin: 0;
}
.page-category input ~ label:before, .page-goods input ~ label:before, .page-review input ~ label:before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
}
.page-category input ~ label:after, .page-goods input ~ label:after, .page-review input ~ label:after {
    content: '';
    display: block;
    width: 8px;
    height: 14px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: calc(50% - 2px);
    left: 16px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}
/* 会員登録住所2の※ */
.block-member-info--addr2 .block-member-info--item-message {
    font-size: 12px;
    color: #f00;
}
/* 調整 */
.block-login--member-info-name .form-control {
    width: 100%;
    display: -webkit-flex;	
    display: flex;
    align-content: center;
    align-items: stretch;
    padding-left: 5px;
}
.block-login--member-info-kana .form-control {
    width: 100%;
    display: -webkit-flex;	
    display: flex;
    align-content: center;
    align-items: stretch;
    padding-left: 5px;
}
.block-login--member-info-name .form-control span {
    margin: -5px 5px 0 0;
}
.block-login--member-info-kana .form-control span {
    margin: -5px 5px 0 0;
}
.block-member-info--use-spoofing-protection span {
    margin: -5px 5px 0 0;
}
.checkbox {
    padding-top: 7px;
}
.checkbox span {
    vertical-align: middle;
}
.block-order-estimate--pwd input {
  margin-top: 3px;
}
/*# sourceMappingURL=sb_base_form.css.map */