body {
    padding: 0 20px;
    color: #333;
    line-height: 1.5;

    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "ヒラギノ角ゴ ProN","Yu Gothic", "Yu Gothic Medium", "メイリオ", Meiryo, sans-serif;
}

.form-area {
    background-color: #FFF;
    max-width: 1200px;
    margin: 60px auto;
    padding: 40px;
    border-radius: 10px;
}

.form__logo {
    margin-bottom: 10px;
}
.form__logo img{
    width: 135px;
}

.form__upper {
    margin-bottom: 40px;
}

.form__upper .-title {
    font-size: 32px;
    margin: 0 auto 36px;
    text-align: center;
}

.form__upper .-progressbar {
    display: flex;
    flex-wrap: wrap;
}

.form__upper .-progressbar .-progressitem {
    position: relative;
    width: 25%;
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 13px 0;
    background: #F5F5F5;
    color: #999999;
}

.form__upper .-progressbar .-progressitem:not(:last-child)::before,
.form__upper .-progressbar .-progressitem:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 37px solid transparent;
    border-left: 20px solid #F5F5F5;
    margin: auto;
}

.form__upper .-progressbar .-progressitem:not(:last-child)::before {
    margin-left: 1px;
    border-left-color: #FFF;
}

.form__upper .-progressbar .-progressitem.active {
    z-index: 1;
    background: #ffa012;
    color: #FFF;
    font-weight: 700;
}

.form__upper .-progressbar .-progressitem.active:not(:last-child)::after {
    border-left-color: #ffa012;
}

.form__upper .-progressbar .-progressitem.active:not(:last-child)::before {
    border-left: none;
}

.form__main {
    font-weight: 700;
}

.form__main.-contact table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1em 0;
}
.form__main.-order table{
    width: 100%;
    border-spacing: 1em 0;
}

/*
.form__main.-contact table ,
.form__main.-order table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 1em 0;
}
*/

.form__main.-order th,
.form__main.-order td {
    padding: 30px 0;
}  

.form__main.-order tr:first-child th,
.form__main.-order tr:first-child td {
    padding-top: 0;
}

.form__main.-order th {
    text-align: left;
    font-size: 20px;
    font-weight: 700;
}

.form__main.-order td {
    display: flex;
    flex-direction: column;
    align-items: end;
    font-size: 16px;
}

.form__main.-order .-price {
    font-size: 20px;
}

.form__main.-order .-note {
    font-size: 16px;
}

.form__main.-order .-action,
.form__main.-contact .-action {
    display: flex;
    gap: 12px;
    justify-content: end;
    margin-top: 20px;
}

.form__error {
    color: #CC0000;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 26px;
}

.form__main.-contact tr .form__error,
.form__main.-order tr .form__error {
    font-size: 16px;
    margin-bottom: 0;
}

.form__btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    border: none;

    color: #FFF;
    border: 2px solid #eb6100;
    background-color: #eb6100;
    padding: 10px 26px;
    border-radius: 6px;
    transition: 0.3s all;
    font-weight: 700;
    font-size: 18px;
}

.form__btn.-white {
    background-color: #FFF;
    color: #eb6100;
}

.form__btn:hover {
    background: #f57b25;
    border-color: #f57b25;
}

.form__btn.-white:hover {
    background: #fff2e8;
}

.form__btn.form_thanks{
    margin-top: 5px;
}

.product_description {
    color: #666;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 12px;
}
.product_description .-notes{
    line-height: 1.8em;
    margin-bottom: 10px;
}
.product_description .-notes > span{
    font-size: 14px;
    font-weight: 700;
}

.form__lower .-notes {
    color: #CC0000;
    margin-top: 30px;
    font-size: 12px;
}

.form__text {
    font-size: 14px;
}

.form__text.-thanks {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 40px;
}

.form__text.-error {
    text-align: center;
    font-size: 1.em;
    font-weight: normal;
    margin-bottom: 40px;
}

.form__text.info {
    background: #F8F8F8;
    padding: 15px 15px 3px 15px;
    margin-bottom: 40px;
    line-height: 1.8em;
}

.form__orderlist {
    width: 100%;
    margin: 0 auto 40px;
}

.form__orderlist tr + tr {
    border-top: 1px solid #e4e4e4;
}

.form__orderlist tr:first-child {
    border-top: 1px solid #e4e4e4;
}

.form__orderlist tr:last-child {
    border-bottom: 1px solid #e4e4e4;
}

.form__orderlist th + th,
.form__orderlist td + td {
    border-left: 1px solid #e4e4e4;
}

.form__orderlist .-item td:nth-child(1) {
    font-size: 18px;
    font-weight: 700;
}

.form__orderlist .-item td:nth-child(2),
.form__orderlist .-item td:nth-child(3),
.form__orderlist .-item td:nth-child(4) {
    text-align: center;
}

.form__orderlist .-total td:nth-child(1) {
    text-align: right;
}

.form__orderlist .-total td:nth-child(2) {
    text-align: center;
}

.form__orderlist .-total:last-child td:nth-child(2) {
    font-weight: 700;
    font-size: 20px;
}

.form__orderlist th {
    background-color: #ffe7b8;
    padding: 16px;
}

.form__orderlist td {
    padding: 12px;
}

/*スマホサイトのコピー*/
/*見出し*/
.c-heading--center {
    text-align: center;
}
.c-heading {
    margin-bottom: 24px;
    line-height: 1.3;
}
.c-heading__main {
    font-size: 1.8rem;
    padding-bottom: 4px;
    display: block;
}
.c-heading__sub {
    font-size: 1.4rem;
    color: #983146;
    padding-top: 5px;
    position: relative;
    display: inline-block;
}
/*見出し*/

.form__main.-contact th ,
.form__main.-order th {
    width: 23%;
    position: relative;
    text-align: left;
    padding: 30px 0;
    font-weight: 700;
    align-content: flex-start;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.form__main.-contact td ,
.form__main.-order td {
    padding: 30px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.form__main.-contact td .-input {
    display: flex;
    align-items: center; 
    gap: 8px;
}

.form__main.-contact tr .form__error {
    margin-top: 8px;
}

.form__main.-contact .-shippingnote {
    font-weight: 700;
    margin: 40px 0 20px;
    font-size: 20px;
    color: #ffa012;
}

.form__main.-contact .-required th:after {
    content: "※";
    color: #CC0000;
    font-weight: 700;
    margin-left: 8px;
}

.form__ordernote {
    margin-bottom: 30px;
}

.form-area a {
    color: #eb6100!important;
    font-weight: 700;
    text-decoration: underline!important;
}

.form-area a:hover {
    text-decoration: none;
}

.form__upper .-brief {
    background: #F8F8F8;
    padding: 15px 15px 3px 15px;
}
.form__upper .-brief p{
    font-size: 14px;
    line-height: 1.8em;
    margin-bottom: 1rem;
}
.form__upper .-brief a{
    margin-left: 2px;
    margin-right: 2px;
}
.form__upper .-brief .-attention {
    color: #CC0000;
}

.form__main.-contact .form__action {
    justify-content: flex-start;
}

input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    padding: 4px;
}
select {
    text-transform: none;
}

/*追加*/
.c-input__text {
    width: 100%;
    max-width: 600px;
    padding: 16px 18px;
    border: 1px solid #c2cddc;
    border-radius: 2px;
}

.c-input__textarea {
    resize: vertical;
    width: 100%;
    height: 200px;
    padding: 16px 18px;
    border-radius: 2px;
    border: 1px solid #c2cddc;
}

.c-input label {
    cursor: pointer;
    margin-right: 2rem;
}

.c-input__radio {
    cursor: pointer;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.c-input__radio + span {
    cursor: pointer;
    display: inline-block;
    padding: 0 0 0 42px;
    position: relative;
    line-height: 1.5;
}

.c-input__radio:checked + span::before {
    border-color: #0a499b;
}
.c-input__radio + span::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    top: -2px;
    border: 1px solid #c2cddc;
    border-radius: 50%;
    background: #fff;
}
.c-input__radio:checked + span::after {
    opacity: 1;
}
.c-input__radio + span::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #0a499b;
    position: absolute;
    top: 4px;
    left: 6px;
    opacity: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}

.c-input__select {
    width: 100%;
    max-width: 600px;
    border: 1px solid #c2cddc;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.c-input__select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    color: #061324;
    width: 100%;
    padding: 16px 32px 16px 18px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.c-input__select::after {
    content: "▼";
    font-size: 10px;
    color: #666;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 注文フォームの注文数のプルダウンの外側 */
.c-input__select-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

/* 注文フォームの注文数の「プルダウン */
.c-input__select--small {
    width: 90px;
    max-width: none;
}

/* 姓名 */
.form__main.-contact .-name td .-input > div,
.form__main.-contact .-furigana td .-input > div {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.form__main.-contact .-name td .-input > div .c-input__text,
.form__main.-contact .-furigana td .-input > div .c-input__text {
    width: 100%;
    max-width: none;
    margin-left: 5px;
}

/* 住所 */
.form__main.-contact .-address td .-input {
    flex-direction: column;
    align-items: flex-start;
}

.form__main.-contact .-address span.zipmark {
    margin-right: 5px;
}

/* 郵便番号 */
.form__main.-contact .-address td .-input > p{
    width: 100%;
}
.c-input__text.p-postal-code {
    width: 100%;
    min-width: 0;
    max-width: 200px;
    padding: 16px 8px;
}

/* 都道府県のプルダウン */
.form__main.-contact .-address .c-input__select {
    width: auto;
    max-width: 200px;
}

/* 住所入力欄 */
.form__main.-contact .-address td .-input > div {
    width: 100%;
}

.form__main.-contact .-address td .-input > div .c-input__text {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/*注文フォーム 完了画面*/
.form__text.account_info {
    line-height: 1.8em;
    margin-bottom: 15px;
}

.bank_account {
    padding: 0;
    margin: 0 0 40px 0;
}

/* 行 */
.account__row {
    display: grid;
    grid-template-columns: 100px 1fr;
    padding: 10px 0;
}

/* ラベル */
.account dt {
    font-size: 12px;
    color: #999;
}

/* 値 */
.account dd {
    margin: 0;
    font-size: 15px;
    color: #111;
}

/* 区切り（うっすら） */
.account__row + .account__row {
    border-top: 1px solid #f5f5f5;
}

input::placeholder {
    color: #999;
    opacity: 0.5;
}

@media screen and (max-width: 767px) {
    body {
        padding: 0;
        background-color: #FFF;
    }

    .form__logo {
        margin-bottom: 20px;
    }

    .form-area {
        margin: 0 auto;
        padding: 40px 10px;
    }

    .form__upper {
/*
        margin-bottom: 30px;
*/
        margin-bottom: 5px;
    }

    .form__upper .-title {
        font-size: 28px;
        margin: 0 auto 20px;
        text-align: center;
    }

    .form__upper .-progressbar .-progressitem {
        font-size: 11px;
        padding: 10px 0;
    }

    .form__upper .-progressbar .-progressitem:not(:last-child)::before,
    .form__upper .-progressbar .-progressitem:not(:last-child)::after {
        border-width: 25px;
        border-left-width: 8px;
    }

    .form__upper .-brief {
        margin-bottom: 30px;
    }

    .form__main.-order tr {
        display: flex;
        gap: 10px;
        justify-content: space-between;
    }

    .form__main.-order th,
    .form__main.-order td {
        padding: 12px 0;
    }
    
    .form__main.-order th {
        font-size: 16px;
    }

    .form__main.-order td {
        width: 130px;
    }

    .form__main.-order .-action,
    .form__main.-contact .-action {
        flex-direction: column;
    }

    .form__btn {
        padding: 8px 12px;
    }

    .form__main.-contact tr {
        display: flex;
        flex-direction: column;
    }

    .form__main.-contact th {
        width: 100%;
        padding-bottom: 0;
        border-bottom: none;
    }

    .form__main.-contact td {
        width: 100%;
    }

    .form__main.-contact textarea {
        width: 100%;
    }

    /* 姓名*/
    .form__main.-contact .-name td .-input > div,
    .form__main.-contact .-furigana td .-input > div {
        flex-direction: column;
        align-items: flex-start;
    }

    .form__main.-contact .-name td .-input,
    .form__main.-contact .-furigana td .-input {
        flex-wrap: nowrap;
    }

    .form__main.-contact .-name td .-input > div .c-input__text,
    .form__main.-contact .-furigana td .-input > div .c-input__text {
        width: 100%;
    }

    /* 郵便番号*/
    .c-input__text.p-postal-code {
        width: 7em;
    }

    .form__main.-contact .-shippingnote {
        margin: 30px 0 10px;
    }

    .form__orderlist th,
    .form__orderlist td {
        padding: 10px;
    }

    .form__orderlist .-item td:nth-child(1) {
        font-size: 16px;
    }

    .form__error {
        margin-bottom: 12px;
    }

    .form__btn.form_thanks{
        margin-top: 30px;
    }

    /*注文フォーム完了画面*/
    .form__text.-thanks {
        margin-top: 40px;
    }

    .bank_account {
        margin: 0;
    }

    .account__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .account dt {
        font-size: 11px;
    }

    .account dd {
        font-size: 14px;
    }

    /* 注文フォームの注文数のプルダウンの外側 */
    .c-input__select-wrap {
        display: block;
    }
}

@media screen and (min-width:767px){
  .sp_br {
    display: none;
  }
}