@charset "utf-8";
/* CSS Document */
/********* 共通 *********/

a {
    color: #4d4d4d;
}

html, body section, body, p, div, span, dl, dt, dd, ol, ul, li, select {
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
    font-weight: 500;
    font-size:  0.99em;
}

html{
    font-size: 1.3em
}

@media print {
    html {
        font-size: 0.75em;
    }
}

::-webkit-calendar-picker-indicator{
    margin-left: 0px;
}

div a{
    text-decoration: none;
    /*    padding-right: 15px; */
}

p{
    margin: 0px;
}

ul {
    list-style: none;
    padding-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

h2{
    font-size: 1.2em;
    margin-top: 0em;
    margin-bottom: 0em;
    padding-left: 0.2em;
    color: #000000;
}

h3{
    color: #be0811;
    border-bottom: solid 2px #fbc98e;
    padding-bottom: 11px;
    font-size: 1em;
    padding-left: 1em;
}

h4{
    margin: 0;
}

img {
    max-width: 100%;
}

.hidden {
    display: none !important;
}

input[type="button"],
input[type="submit"],
input[type="reset"] {
    cursor: pointer;
}

.icon{
    width: 1.1em;
    padding: 0.1em;
}
.text-center{
    text-align: center;
}

.text-right{
    text-align: right;
}

.text-left{
    text-align: left;
}

.font-bold{
    font-weight: bold;
}
.bg-lightgray {
    background-color: #ddd;
}
.text-gray {
    color: #b3b3b3;
}
.text-white {
    color: #ffffff;
}
.text-danger {
    color: #C1272D
}
.text-warning {
    color: #ffbb00
}
.text-xs {
    font-size: 0.9em;
}
.text-lg {
    font-size: 1.3em;
}
.text-line-through {
    text-decoration: line-through;
}
.aspect4x3 {
    position: relative;
    width: 100%;
    padding-top: 75%;
}
.aspect4x3 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flex {
    display: flex;
}

.flex-width {
    flex: 1;
    width: 0;
}
.items-center {
    align-items: center !important;
}
.flex.column {
    flex-direction: column;
    flex-flow: column;
}
.sketched {
    align-self: stretch;
}
.self-center {
    align-self: center;
}

input[type="radio"].input-lg {
    width: 1.2em;
    height: 1.2em;
}

.radio-min-width{
    min-width: 1.2em;
}

.input-range-mark,
.form-control:not(button):not(.button):not([type=submit]):not([type=reset]):not([type=button]):not([type=checkbox]):not([type=radio]) {
    padding: 0.25em 0.5em;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: 0;
    min-height: 33px;
    border-width: 2px;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
}

.form-control.form-label {
    display: inline-block;
    width: fit-content;
    border: none;
    background-color: transparent;
    outline: none;
}

textarea.form-control:not(.densed) {
    min-height: 12em !important;
    min-width: 100% !important;
    max-height: auto !important;
}

textarea.form-control.h-md {
    min-height: 6em !important;
    min-width: 100% !important;
    max-height: auto !important;
}

tr.deleted > td:not(.action){
    text-decoration: line-through !important;
}

tr.deleted *:not(.visible):not(td) {
    opacity: 0.6;
}

tr.deleted td {
    background: rgb(255, 219, 219) !important;
}

tr.deleted .delete-toggle {
    background: #fff !important;
}

td.content-stretch {
    position: relative;
}

td.content-stretch > * {
    position: absolute;
    left: 0.5em;
    top: 0.5em;
    width: calc(100% - 1em);
    height: calc(100% - 1em);
}

.money-prefix:not(:empty) {
    display: flex;
    align-items: center;
    /* gap: 0.5em; */
    justify-content: flex-end;
}

.money-prefix:not(:empty)::before {
    content: "\000a5";
}

.money-postfix:not(:empty) {
    display: flex;
    align-items: center;
    /* gap: 0.5em; */
    justify-content: flex-end;
}

.money-postfix:not(:empty)::after {
    content: "円";
}

.input-range-mark {
    width: min-content;
    display: flex;
    justify-content: center;
    flex-flow: column;
    padding-left: 0;
    padding-right: 0;
}

select.form-control {
    border-style: inset;
}

select.form-control:not([multiple]) {
    padding-right: 3.5em !important;

    background-image:
        linear-gradient(45deg, transparent 50%, gray 50%),
        linear-gradient(135deg, gray 50%, transparent 50%),
        linear-gradient(to right, #ccc, #ccc);
    background-position:
        calc(100% - 20px) calc(0.65em + 2px),
        calc(100% - 15px) calc(0.65em + 2px),
        calc(100% - 2.5em) 0.2em;
    background-size:
        5px 5px,
        5px 5px,
        1px 80%;
    background-repeat: no-repeat;
}
button.form-control.block,
.button.form-control.block {
    width: 100%;
}
button.form-control.rounded,
.button.form-control.rounded {
    border-radius: 10000px;
}
button.form-control:hover,
.button.form-control:hover,
input[type="button"].form-control:hover,
input[type="submit"].form-control:hover,
input[type="reset"].form-control:hover {
    /* opacity: 0.75; */
    box-shadow: inset 0px 0px 1000px 1000px rgba(0, 0, 0, 0.10);
}

button.form-control,
.button.form-control,
input[type="button"].form-control,
input[type="submit"].form-control,
input[type="reset"].form-control {
    box-sizing: border-box;
    padding: .25em .5em;
    /* transition: all 0.5s; */
    transition-property: box-shadow;
    transition-duration: 0.5s;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    border-width: 1px;
    line-height: 1.15;
}

button.primary,
.button.primary,
input[type="button"].primary,
input[type="submit"].primary,
input[type="reset"].primary {
    color: #ffffff;
    border: 1px solid #be0811;
    background-color: #be0811;
}

button.danger,
.button.danger,
input[type="button"].danger,
input[type="submit"].danger,
input[type="reset"].danger {
    color: #ffffff;
    border: 1px solid #C1272D;
    background-color: #C1272D;
}

button.primary:hover,
.button.primary:hover,
input[type="button"].primary:hover,
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
button.danger:hover,
.button.danger:hover,
input[type="button"].danger:hover,
input[type="submit"].danger:hover,
input[type="reset"].danger:hover {
    /* opacity: 0.75; */
    box-shadow: inset 0px 0px 1000px 1000px rgba(255, 255, 255, 0.25);
}

input[type=checkbox].button {
    appearance: none;
}
input[type=checkbox].button.delete-toggle {
    color: #ffffff;
    border: 1px solid #C1272D;
    background-color: #C1272D;
}
input[type=checkbox].button.delete-toggle:checked {
    color: unset;
    border: 1px solid initial;
    background-color: initial;
}
input[type=checkbox].button.delete-toggle::before {
    content: "✕";
}
input[type=checkbox].button.delete-toggle:checked::before {
    content: "↶";
}

.alert {
    padding: 1em;
    border: 1px solid #C1272D;
    background-color: #C1272D;
    color: #fff;
}

.toolbar {
    display: flex;
    /* align-self: flex-start; */
    align-items: center;
    gap: 0.5em;
    width: 100%;
    white-space: nowrap;
    margin-top: 0.5em;
}

.bordered {
    border: 1px solid #ccc;
}

.bordered.dashed {
    border-style: dashed;
}
.bordered.rouned {
    border-radius: 0.1em;
}

.bt-none {
    border-top: none !important;
}


.gap-lg {
    gap: 1em !important;
}

.gap-md {
    gap: 0.5em !important;
}

.gap-none {
    gap: 0 !important;
}

.w-100 {
    width: 100%;
}

.pointer {
    cursor: pointer;
}

.height-fit-content {
    height: fit-content;
}

.width-fit-content {
    width: fit-content;
}

th.width-fit-content,
td.width-fit-content {
    width: 1%;
}

.page-title {
    /* text-gray text-xs px-lg */
    color: #b3b3b3;
    font-size: 0.9em;
}
.page-heading {
    border-bottom: 2px solid #be0811;
    padding-bottom: 0.8em;
    white-space: nowrap;
}
.page-heading.layout-horizontal {
    align-items: center;
}

.white-nomal{
    white-space: normal
}

.px-md {
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}
.px-lg {
    padding-left: 1em !important;
    padding-right: 1em !important;
}
.py-md {
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
}
.py-lg {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}
.pa-md {
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
}
.pa-lg {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    padding-left: 1em !important;
    padding-right: 1em !important;
}
.pt-md {
    padding-top: 0.5em !important;
}
.pb-md {
    padding-bottom: 0.5em !important;
}
.pl-md {
    padding-left: 0.5em !important;
}
.pr-md {
    padding-right: 0.5em !important;
}
.pa-none {
    padding: 0 !important;
}
.mx-md {
    margin-left: 0.5em !important;
    margin-right: 0.5em !important;
}
.mx-lg {
    margin-left: 1em !important;
    margin-right: 1em !important;
}
.my-md {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}
.my-lg {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}
.ma-md {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
    margin-left: 0.5em !important;
    margin-right: 0.5em !important;
}
.ma-lg {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    margin-left: 1em !important;
    margin-right: 1em !important;
}
.mt-md {
    margin-top: 0.5em !important;
}
.mb-md {
    margin-bottom: 0.5em !important;
}
.ml-md {
    margin-left: 0.5em !important;
}
.mr-md {
    margin-right: 0.5em !important;
}
.ma-none {
    margin: 0 !important;
}
.btn_block {
    display: block;
    width: 100%;
}
.form-horizontal .input-box {
    flex-direction: row;
    gap: 0.5em;
}

.form-readonly .form-control:not(button):not(.button):not([type=submit]):not([type=reset]):not([type=button]) {
    user-select: none;
    border-color: transparent !important;
    resize: none;
}

.form-control[readonly],
.form-control[disabled],
.form-readonly .form-control:not(button):not(.button):not([type=submit]):not([type=reset]):not([type=button]):disabled {
    background: #eee;
    opacity: 1;
}
.form-readonly .form-control:not(button):not(.button):not([type=submit]):not([type=reset]):not([type=button]):hover,
.form-readonly .form-control:not(button):not(.button):not([type=submit]):not([type=reset]):not([type=button]):focus,
.form-readonly .form-control:not(button):not(.button):not([type=submit]):not([type=reset]):not([type=button]):focus-visible {
    border-color: transparent !important;
    outline: none;
}

.form-readonly .readonly-input-style-none .form-control[readonly],
.form-readonly .readonly-input-style-none .form-control[disabled] {
    background: transparent !important;
    color: #000 !important;
}

.page-container {
    /* px-lg */
    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box;
}
.page-container.densed {
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.layout-vertical {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
}

.layout-horizontal {
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: 100%;
}

.grid-product-detail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "A A B"
        "A A B"
        "C C C";
    gap: 1.5em;
}
.grid-product-detail > *:nth-child(1) {
    grid-area: A;
}

.grid-product-detail > *:nth-child(2) {
    grid-area: B;
}

.grid-product-detail > *:nth-child(3) {
    grid-area: C;
}

.grid-product-detail-more {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}

.grid-product-detail-more p {
    margin-top: 0.2em;
}

.grid-product-detail .product-img {
    width: 100%;
    object-fit: contain;
}

/********* ヘッダー *********/
header{
    background: #000000;
    display: flex;
    align-items: center;
}

header img{
    padding: 1.2em 0em 0.8em 0.8em;
}

.logolabo{
    width: 5em;
}

.logo{
    width: 10em;
}

.header_btn{
    align-self: stretch;
    min-width: 4.75em;
}
.header_btn + .header_btn{
    margin-left: 1em;
}
.header_cart, .header_logout{
    background-color: #be0811;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2em;
    height: 100%;
    width: 100%;
    margin-left: auto;
    box-sizing: border-box;
}

.header_cart p{
    color: #fff;
    font-weight: bold;
    padding-left: 1em;
}
.header_logout p{
    color: #fff;
    font-weight: bold;
}

.header_name{
    color: #fff;
    margin-left: 1.5em;
}

.icon-cart{
    width: 1.5em;
    padding: 0;
}
.hamburger-menu{
    position: relative;
    width: 4.75em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-logout{
    width: 2em;
    padding: 0;
}

/********* メニュー *********/
#head-menu{
    padding: 1em;
    background-color: #E6E6E6;
    color: #000000;
}

#head-menu ul{
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 1.5em;
}

.border-right{
    border-right: 1px solid;
    padding: 0 2em;
}

.head-menu-guid{
    padding: 0 2em;
}

/********* ユーザー *********/

.user{
    display: flex;
    justify-content: center;
    background-color: #E6E6E6;
    padding: 1em;
}

#user{
    display: grid;
    grid-template-areas:
        "instock info    order"
        "instock history contact"
        "claim   history account";
    grid-template-rows: 1fr auto auto ;
    grid-template-columns: 1fr 2fr 1fr ;
    gap: 0.5em;
    color: #4D4D4D;
    letter-spacing:-0.05em;
    width: 100%;
    max-width: 1100px;
}

.user-flex{
    display: flex;
    align-items: center;
    padding-bottom: 0.5em;
}

.user_info{
    line-height:1.3em;
}

.user-common{
    padding: 1em;
}

.money{
    color: #be0811;
    font-size: 1.5em;
    font-weight:bold;
    letter-spacing:0.05em;
    padding: 0.3em 0px;
    margin: 0px;
    position: relative;
}

.next{
    color: #0071bc;
    content: "";
    display: block;
    width: 1.4em;
    height: 1.4em;
    border-top: solid 3px;
    border-right: solid 3px;
    transform: rotate(45deg);
}

.next-white{
    color: #fff;
    width: 0.5em;
    height: 0.5em;
    margin-left: auto;
}

/* ----- instock ----- */
.instock{
    grid-area: instock;
    background-color: #fff;
}

.between_flex{
    display: flex;
    justify-content: space-between;
}

.adjust-instock{
    margin-top: 0.5em;
}

.adjust_goods_name{
    width: 8em;
}

.index-list {
    box-sizing: border-box;
    border: 1px solid #be0811;
    background-color: #be0811;
    color: #ffffff;
    transition: all 0.5s;
    margin: 0.25em;
}

/* ----- claim ----- */
.claim{
    grid-area: claim;
    background-color: #fff;
}

.adjust-claim{
    margin-top: 0.7em;
    display: flex;
    align-items: center;
}

.claim-data{
    width: 9.5em;
}

/* ----- info ----- */
.info{
    grid-area: info;
    background-color: #fff;
}

.adjust-info{
    margin-top: 0.5em;
}

.info-flex{
    display: flex;
    margin-bottom: 0.25em;
}

.info-title{
    padding-left: 0.7em;
    width: 11em;
}
.info-at, .info-title{
    color: #0071bc;
}

.top-info-icon{
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: flex-end;
}

.page-info .item {
    display: grid;
    grid-template-areas:
        "date title icon";

    grid-template-columns: min-content auto min-content;
    gap: 0.5em;
}

.page-info .item-date {
    white-space: nowrap;
    grid-area: date;
}

.page-info .item-title {
    grid-area: title;
}

.page-info .item-icon-group {
    grid-area: icon;
}

.page-info .item-icon {
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;
    justify-content: flex-end;
}

.page-info .item-icon > * {
    width: 100%;
    height: 100%;
}

.paragraph br {
    display: block;
    margin-top: 10px;
    content: "";
}

.info-color{
    color: #fff;
    border-radius: 20px;
    padding: 0.25em 0.5em;
}

.pd-none {
    padding: 0;
}

.btn---red{
    background-color: #ff0000;
}

.btn--green{
    background-color: #24b44c;
}

.btn--yellow{
    background-color: #fccc0c;
}

.btn--blue{
    background-color: #9cdcec;
}

.btn--purple{
    color: #fff;
    background-color: #ccbce4;
}

.info_div{
    width: 3em;
}

.info_kind_div{
    width: 8em;
}

.info-detail-icon{
    width: 15em;
}

/* ----- history ----- */
.history{
    grid-area: history;
    background-color: #fff;
}

.adjust-history{
    display: grid;
    grid-template-areas:
        "history-1 history-2  history-flex";
    grid-template-columns: 1fr 1fr 0.5fr;
    justify-content: flex-start;
    margin-top: 0.5em;
    position: relative;
    padding: 0px;
    gap: 0.5em;
}

.history-1{
    grid-area: history-1;
}

.history-2{
    grid-area: history-2;
}

.align-center{
    align-self: center;
}

.align-items-center{
    align-items: center;
}

.adjust-history p{
    font-size: 0.8em;
    margin-top: 1em;
}

.history-flex{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.adjust-history a{
    color: #0071bc;
}

.partition{
    border-right: 2px solid #ddd;
    padding: 0px 0.5em 0 0;
}

.font-small{
    font-size: 0.8em;
}

.detail{
    padding-top: 1em;
    padding-bottom: 1em;
}

.detail a{
    color: #0071bc;
    letter-spacing: -0.2em;
}

.history_goods_name{
    width: 7.5em;
}


/* ----- order ----- */
.order{
    grid-area: order;
    background-color: #be0811;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-a{
    color: #fff;
    display: block;
    padding: 3.2em 2.7em;
    font-size: 1.2em;
}

/* ----- contact ----- */
.contact{
    grid-area: contact;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.mail ,.line{
    padding: 0.2em 0.6em;
    border: solid 2px #999999;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    margin: 0 1em;
}

.mail p{
    color: #fbb03b;
}

.line p{
    color: #39b54a;
}

/* ----- account ----- */
.account{
    grid-area: account;
    background-color: #fff;
}

.adjust-account{
    display: flex;
    justify-content:  space-around;
    align-items: center;
    position: relative;
}

.adjust-account p{
    font-size: 0.9em;
    width: 10.5em;
    margin: 0px;
}

/********* main *********/
.main{
    display: flex;
    justify-content: center;
    padding: 1em;
}

#main{
    display: grid;
    grid-template-areas:
        "sidebar goods";
    grid-template-columns: 1fr 3fr;
    gap: 0.5em;
    margin-bottom: 2em;
    margin-top: 1.5em;
    width: 100%;
    max-width: 1100px;
}

/********* サイドバー *********/
#sidebar{
    grid-area: sidebar;
}

#sidebar a{
    font-weight: bold;
}

#sidebar p{
    font-weight: bold;
    padding-left: 0.2em;
}

.side-flex{
    display: flex;
    align-items: flex-end;
    border-bottom: 1.3px solid #999;
}

.menu{
    background-color: #4D4D4D;
    padding: 0.7em;
    margin: 0px;
    margin-bottom: 0.3em;
    color: #fff;
    font-size: 1.3em;
}

.list{
    display: block;
    background-color: #be0811;
    margin: 0px;
    margin: 0.5em 0;
}

.list a{
    display: block;
    color:#fff;
    font-size: 1.3em;
    padding: 1.4em;
}

.sidebar-list{
    background-color: #E6E6E6;
    margin: 0px;
}

.sidebar-list li{
    font-size: 1em;
    text-align: left;
}

.sidebar-list a{
    padding: 1em;
}

/********* goods *********/
.goods-img {
    width: 12.5em;
    height: 8.5em;
    object-fit: cover;
    padding: 0.5em 0em;
}
.goods-name{
    padding-left: 0.5em;
}

.goods-price{
    font-weight: bold;
    color: #C1272D;
    padding-right: 0.5em;
}

.goods h2{
    padding: 0.5em 1em;
}

del{
    margin-right: 0.5em;
    color: #4d4d4d;
}

.subHeading{
    background: #4D4D4D;
    color: #fff;
    text-align: left;
    padding: 0.75em 1.1em;
    margin-bottom: 1em;
}

.product{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 1em;
    padding-left: 1em;
    gap: 0.5em;
}

.burisuke{
    margin: 0 auto;
    width: 26em;
}

.suggestion_goods{
    font-size: 1.3em;
    padding: 0.5em;
    padding-bottom: 1em;
}

.suggestion-goods-price{
    margin-left: auto;
}


.description{
    background-color: #E6E6E6;
    margin: 1em auto;
    padding: 1em 1.3em;
}

.for-detail{
    background: #be0811;
    padding: 1.5em 1em;
    width: 16em;
    margin: 1em auto;
}

/********* detail *********/

.screen-name{
    font-size: 0.9em;
    color: #4D4D4D;
    margin: 0.5em;
}

.screen-title{
    font-size: 1.3em;
    padding: 0.5em;
}

.border-bottom{
    border-bottom: 1px solid #be0811;
    margin-bottom: 0.5em;
}

.detail-grid{
    display: grid;
    grid-template-areas:
        "goods-main-img   goods-calc";
    grid-template-columns: 2fr 1fr ;
    width: 40em;
}

.goods-main-img{
    grid-area: goods-main-img;
    width: 25em;
    height: 18em;
    margin: 0.5em auto;
    object-fit: contain;

}

.flex-column{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.count-btn{
    padding: 1em 0;
}

.goods-calc{
    grid-area: goods-calc;
    background-color: #E6E6E6;
    margin: 0.5em 0;
    padding: 2em 0;
}

.goods_num{
    width: 6em;
}

.goods-price_detail{
    padding: 0.5em;
    font-size: 1.2em;
    white-space: nowrap;
}

.btn--cart{
    display: flex;
    align-items: flex-end;
    margin: 0.5em auto;
}

.btn--orange{
    display: flex;
    align-items: center;
    margin: 0.5em auto;
    border-radius: 1.5em;
    padding: 0.5em;
    width: 10em;
    justify-content: center;
}

.after-calc{
    font-size: 0.7em;
}

.number{
    margin: 0.5em;
}

/********* splash *********/
#splash {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #FFF;
    z-index: 100;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

#splash .logolabo {
    display: block !important;
    position: absolute;
    top: 1em;
    left: 1em;
}

#splash .logo {
    width: 30%;
    display: block !important;
}
/********* /splash *********/


/********* dialog *********/
.dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    padding: 0.5em;
    box-sizing: border-box;
    z-index: 9999;
    overflow:auto;
}

.dialog .window {
    padding: 0.5em;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: auto;
    /* max-height: calc(100vh - 1em); */
}

.window .header {
    padding-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: unset;
}
.window .header .ctrl-close {
    min-height: 0;
}
.window .body {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* height: 0; */
    /* overflow: auto; */
}
/********* /dialog *********/


/********* cart *********/
.cart-grid {
    display: grid;
    grid-template-areas:
        "cart-goods  total";
    grid-template-columns: 2fr 1fr ;
    gap: 1em;
}

/* .cart-items-grid {
    display: grid;
    grid-template-areas:
        "cart-goods  total";
    grid-template-columns: 2fr 1fr ;
    gap: 1em;
} */

.cart-goods{
    grid-area: cart-goods;
}

.cart-goods-enclose {
    border: 1px solid #E6E6E6;
    padding: 0.5em;
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.cart-goods-enclose .img {
    flex: 1;
}

.cart-goods-img, .calc {
    width: 50%;
}

.cart-goods_num {
    width: 5em;
}

.goods-price-large {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.25em 0;
}

.goods-price-xlarge {
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.25em 0;
}

.total {
    grid-area: total;
    padding: 0.5em;
}

.total-flex{
    display: flex;
    justify-content: flex-end;
}

.total-tax{
    width: 5.5em;
}

.rate_tax{
    width: 5em;
}

.total-font{
    font-weight: bold;
}

.sidebar-right {
    height: fit-content;
    background-color: #ddd;
}

.btn_delete {
    background: #fff;
    color: #4D4D4D;
    border: none;
    border-bottom: 1px solid #4D4D4D;
    font-size: 0.8em;
}

.btn-spin-group {
    display: flex;

}
.btn-spin-group button {
    box-sizing: border-box;
    width: 3em;
    background: #4D4D4D;
    border: none;
    color: #fff;
}
.btn-spin-group button:first-of-type {
    border-radius: .25em 0 0 .25em;
}
.btn-spin-group button:last-of-type {
    border-radius: 0 .25em .25em 0;
}
.btn-spin-group input {
    flex: 1;
    border: 1px solid #4D4D4D;
    outline: none;
}
/********* pay *********/

.expire_month{
    width: 5em;
}

.expire_year {
    width: 7em;
}

/********* conf *********/
.cart-goods-enclose-grid{
    border: 1px solid #E6E6E6;
    margin-bottom: 0.5em;
    /* width: 25em; */
    display: grid;
    grid-template-areas:
        "enclose-goods-name  enclose-goods-num   enclose-goods-price";
    grid-template-columns: 6fr 2fr 5fr ;
    align-items: center;
    padding: 0.5em;
    /* margin: 0.5em ; */
}

.enclose-goods-name{
    grid-area: enclose-goods-name;
}

.enclose-goods-num{
    grid-area: enclose-goods-num;
    color: #C1272D;
    border-right: 1px solid #C1272D;
    text-align: center;

}

.enclose-goods-price{
    grid-area: enclose-goods-price;
}

.change-product{
    font-size: 0.7em;
    color: #0071bc;
    border-bottom: 1px solid #0071bc;
    margin-left: 1em;
    width: 10em;
}

.address-pay{
    margin: 0.5em;
}

.opinion{
    height: 12em !important;
}

/********* comp *********/
.comp-msg{
    margin: 2.5em;
}

.comp-attention{
    border: 1px solid #be0811;
    color: #be0811;
    font-size: 0.7em;
    padding: 2em;
    width: 35em;
    margin: 0 auto;
}

/********* delivery *********/

.delivery{
    padding: 0 0.5em;
}

/********* inquiry *********/
.inquiry_title, .inquiry_text{
    margin: 0.5em;
}

/* #inquiry_text{
    height: 5em;
    width: 12em;
} */

/********* 検索 *********/
.st_order_at, .ed_order_at{
    margin: 0 0.25em;
}

/********* order-list  *********/
.order-list{
    display: grid;
    grid-template-areas:
        "order_id  order_id    status"
        "order_at  total_price settlement";
    grid-template-rows: 1fr 1fr ;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid #4D4D4D;
    /* margin: 0.5em; */
}

.order-br{
    display: none;
}

.order-container{
    padding: 0.5em;
}

.order_id{
    grid-area: order_id;
}

.order_at{
    grid-area: order_at;
}

.total_price{
    grid-area: total_price;
}

.status{
    grid-area: status;
}

.settlement{
    grid-area: settlement;
}

/********* body *********/
.btn--red{
    color: #fff;
    font-weight: bold;
    background-color: #C1272D;
    padding: 1em 1.5em;
    border: none;
    margin-bottom: 0.5em;
}

.btn--white {
    border: 1px solid;
    border-color: #b7282d;
    color: #b7282d;
    text-align: center;
    background-color: #fff;
}

.btn--white a{
    padding: 0px;
}

.btn--dli{
    padding: 0px;
    margin:  0px;
    margin-left: 5px;
}

.btn_right{
    margin-left: 7em;
}

#total{
    margin: 0.5em 0;
}

/* ----- delivary ----- */
.postal{
    margin-right: 6.25em;
}

.list_delivery{
    margin: 1em 0.5em;
}

/* ----- cart ----- */

.turn {                               /*  折り返す（左から右）*/
    -webkit-flex-wrap: wrap;          /* Safari etc. */
    -ms-flex-wrap    : wrap;          /* IE10        */
    flex-wrap        : wrap;
}

.nothing{
    display: none;
}

/* ----- flex(項目) ----- */

.dt{
    width: 8%;
}

.dt-pass{
    width: 25%;
}
.w--2{
    width: 2em;
}

.w--6{
    width: 6em;
}

/* ----- table ----- */

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    line-height: 2;
    margin: 10px;
    margin:0 auto;
}

table th {
    white-space: nowrap;
    width: 100px;
    padding: 10px;
    font-weight: bold;
    border : 1px solid #bababa;
    border-top: 1px solid #ccc;
    border-bottom: 2px solid #bababa;
    background: #ccc;
}

table td {
    border: 1px solid #ccc;
    font-size: 0.85em;
    padding: 0.25em;
}

.nowrap{
    white-space: nowrap;
}
.wrap {
    white-space: normal;
}


/* ----- 件数 ----- */
.number{
    margin: 0.5em;
}

.pager{
    /* margin-left: 1em; */
}

/* ----- 納品書 ----- */

.title {
    text-align-last: justify;       /* Chrome・Firefox用 */
    text-justify: inter-ideograph;  /* IE・Edge用 */
    margin: 0px auto;
    width: 220px;
    text-align: center;
    font-size: 30px;
    font-weight: normal;
    border-bottom: 1px #333 solid;
}

.client{
    width: 500px;
}

.client_name{
    font-weight: normal;
    font-size: 1.5em;
}

.description{
    width: 660px;
}

.text-description{
    white-space: pre-wrap;
}

.manage_name{
    font-weight: normal;
    font-size: 1.2rem;
}

.charge{
    width: 400px;
    margin-left: 40px;
    height: 150px;
}

.charge p{
    line-height: 100px;
    margin: 5px;
}

.manage ul{
    margin: 5px 0px;
}

.companyMark img{
    width: 75px;
    height: 75px;
    margin-left: 120px;
    margin-top: -10px;
}


.tax{
    justify-content: flex-end;
}


/* ----- footer ----- */
footer{
    background-color: #4D4D4D;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 9em;
}

footer img{
    width: 10rem;
    padding: 1em 0em;
}
.footer-link{
    color: #ffffff;
    margin-top: .5em;
    font-size: .8rem;
}

.m-flex,.m-block,.m-inline, .m-list-item, .sscreen-block{
    display:none;
}

/********* 届け先 *********/
.page-delivery .form-horizontal .input-box > *:first-child {
    width: 20%;
}
/********* /届け先 *********/

/********* アカウント管理 *********/
.account__link__block{
    display:grid;
    gap: 1em;
}

.account__link{
    padding: 1em;
    box-sizing: border-box;
    border: 1px solid #000000;
}

/********* お支払い方法管理 *********/
.payment__block, .credit__block {
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
}
.payment__info, .credit__info{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 80%;
    /*margin: auto;*/
    margin: 0.5em 0;
}
.payment__info .credit__info{
    width: 100%;
}
.payment__info .credit__block{
    margin-top: 1em;
    margin-bottom: 0;
}
.payment__info--line{
    padding: 1em;
    border: 1px solid #000000;
    box-sizing: border-box;
    border-radius: .25em;
}
.credit__info{
    margin-bottom: 1em;
}
.credit__form{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    width: 80%;
    margin: 0.5em auto;
}
.payment__link, .credit__link{
    box-sizing: border-box;
    padding: .5em 1em;
    border:1px solid #be0811;
    background-color: #be0811;
    color: #ffffff;
    transition: all 0.5s;
}
.credit__link + .credit__link{
    margin: 1em;
}
.payment__link:hover, .credit__link:hover{
    background-color: #f9b362;
    border-color: #f9b362;
}
.credit__link--red{
    background-color: #ea5532;
    border-color: #ea5532;
}
.credit__link--red:hover{
    background-color: #f08870;
    border-color: #f08870;
}

.credit_cardno{
    display: flex;
    gap: 2em;
}

.credit_expire{
    display: flex;
    gap: 3em;
}

/********* 汎用 *********/
.mb--05{
    margin-bottom: 0.5em;
}

.mb--1{
    margin-bottom: 1em;
}

.mb--2{
    margin-bottom: 2em;
}

.ml--07{
    margin-left: 0.7em;
}

.ml-1{
    margin-left: 1em;
}

.ml--2{
    margin-left: 2em;
}

.mt--2{
    margin-top: 2em;
}

.mr--05{
    margin-right: 0.5em;
}

.m-0{
    margin: 0em;
}


.m-05{
    margin: 0.5em;
}

.m-1{
    margin: 1em;
}

.spacer{
    flex: 1 1;
}


/********* パンくずリスト *********/
.breadcrumb{
    /* margin-left: auto; */
    flex: 1;
    width: 100%;
}

em{
    font-style: normal;
}

ol{
    margin: 0;
}

/********* 汎用フォーム *********/

.input-box{
    display: flex;
    flex-direction: column;
}
.input-label{
    font-size: .8rem;
    font-weight: bold;
    padding: .5rem 0;
    box-sizing: border-box;
    padding-top: 0;
}
.input-text{
    padding: 1em;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn--round{
    padding: 1.5em;
    border: 1px solid #000000;
    border-radius: 3em;
    width: 60%;
    font-size: 1rem;
    font-weight: bold;
}
.btn--orange{
    background-color: #f7931e;
    border-color: #f7931e;
    color: #ffffff;
}
.btn--shimuja{
    background-color: #be0811;
    border-color: #be0811;
    color: #ffffff;
}

.login-form{
    width: 80%;
    max-width: 500px;
    margin: auto;
}

.control {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}
.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.control__text{
    order: 2;
}
.control__indicator {
    height: 1.5em;
    width: 1.5em;
    border: 1px solid #000000;
    background: #ffffff;
    display: block;
    margin-right: .5em;
    order: 1;
    transition-property: background, border;
    transition-duration: 0.25s;
}
.control--radio .control__indicator {
    border-radius: 50%;
}
.control input:checked ~ .control__indicator {
    background: #EC8D26;
}
.control input:disabled ~ .control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control__indicator:after {
    display: block;
}
.control--checkbox .control__indicator:after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    width: 0.5em;
    height: 1em;
    left: .5em;
    bottom: .5em;
}
.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
    left: 7px;
    top: 7px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
    background: #7b7b7b;
}


/********* ログイン *********/
.login-header{
    font-size: 1.75rem;
    font-weight: bold;
    text-align: center;
}

.login-link{
    border-bottom: 1px solid #106AAE;
    color: #106AAE;
    padding: 0 .5rem .1rem;
}

/********* カレンダー *********/

.calender{
    display: grid;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    grid-template-rows: auto repeat(6,minmax(100px, auto));
    width: 100%;
    gap: 1px;
    background-color: #000000;
    border: 1px solid #000000;
}
.calender--r4{
    grid-template-rows: auto repeat(4,minmax(100px, auto));
}
.calender--r5{
    grid-template-rows: auto repeat(5,minmax(100px, auto));
}
.calender--r6{
    grid-template-rows: auto repeat(6,minmax(100px, auto));
}

.calender--sun{
    color: #EA5532;
}

.calender--sat{
    color: #00AFEC;
}

.calender__title{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}
.calender__month{
    font-weight: bold;
}
.calender__prev,
.calender__next{
    color: inherit;
    margin: 0 .5em;
}
.calender__prev{
    margin-left: auto;
}
.calender__header{
    text-align: center;
    padding: .5rem;
}

.calender__cell {
    box-sizing: border-box;
    background-color: #ffffff;
    padding: .25rem;
    display: flex;
    flex-direction: column;
}

.calender__cell--disabled{
    background-color: #e6e6e6;
}

.calender__day {
    margin-bottom: .25rem;
}

.calender__weekday{
    display: none;
}
.calender__order{
    font-size: .6rem;

}
.calender__row--0 {
    grid-row: 1;
}
.calender__row--1 {
    grid-row: 2;
}
.calender__row--2 {
    grid-row: 3;
}
.calender__row--3 {
    grid-row: 4;
}
.calender__row--4 {
    grid-row: 5;
}
.calender__row--5 {
    grid-row: 6;
}
.calender__row--6 {
    grid-row: 7;
}

.calender__col--0 {
    grid-column: 1;
}
.calender__col--1 {
    grid-column: 2;
}
.calender__col--2 {
    grid-column: 3;
}
.calender__col--3 {
    grid-column: 4;
}
.calender__col--4 {
    grid-column: 5;
}
.calender__col--5 {
    grid-column: 6;
}
.calender__col--6 {
    grid-column: 7;
}

.toolbar > * {
    /* align-self: stretch; */
    align-self: center;
}

.toolbar > *.stretched {
    align-self: stretch;
}

.toolbar.pills > * {
    flex: 1 1 0px;
}

.w-1em {
    width: 1em !important;
}
.w-2em {
    width: 2em !important;
}
.w-3em {
    width: 3em !important;
}
.w-4em {
    width: 4em !important;
}
.w-5em {
    width: 5em !important;
}
.w-6em {
    width: 6em !important;
}
.w-7em {
    width: 7em !important;
}
.w-8em {
    width: 8em !important;
}
.w-9em {
    width: 9em !important;
}
.w-10em {
    width: 10em !important;
}
.w-11em {
    width: 11em !important;
}

/********* responsive *********/
/* ---------------
Small devices (landscape phones, 576px and up)
Medium devices (tablets, 768px and up)
Large devices (desktops, 992px and up)
Extra large devices (large desktops, 1200px and up)
-------------------- */
@media screen and (max-width: 1530px){
    .border-right {
        padding: 0 0.5em;
    }
    .head-menu-guid {
        padding: 0 0.5em;
    }
}

@media screen and (max-width: 1200px){
    #head-menu ul{
        font-size: 0.9em;
    }

    .order-a{
        white-space: nowrap;
    }

    .money {
        font-size: 1.2em;
    }

    .cart-goods_num {
        width: 4em;
    }

}

@media screen and (max-width: 1200px){
    .new-line{
        display: block;
    }
    .click-button {
        margin: 0.5em 0;
    }
    .goods_num {
        width: 5em;
    }
    .btn--cart {
        font-size: 0.9em;
    }

}

@media screen and (max-width: 769px){

    /* ----- 表示 ----- */
    .m-flex{
        display: flex;
        align-items: center;
    }
    .m-block{
        display: block;
    }
    .m-inline{
        display:inline;
    }
    .m-list-item{
        display: list-item;
    }
    #head-menu, .m-none, p.m-none{
        display:none !important;
    }

    .block{
        display: block;
    }

    /* ----- 共通 ----- */

    html, body section, body, p, div, span, dl, dt, dd, ol, ul, li, select {
        font-size:  0.99em;
    }

    h1{
        text-align: center;
        font-size: 1.3em;
        margin: 0;
        padding: 0.7em;
    }

    h2{
        font-size: 0.8em;
        white-space: nowrap;
    }

    h3 {
        text-align: center;
        padding-left: 0;
        padding-bottom: 3px;
        margin-bottom: 0;
    }



    /* ----- ハンバーガーボタン ----- */
    .menu-btn {
        position: absolute;
        /*right: 2.5em;*/
        display: flex;
        height: 4em;
        justify-content: center;
        align-items: center;
        z-index: 90;
    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;
    }
    .menu-btn span:before {
        bottom: 8px;
    }
    .menu-btn span:after {
        top: 8px;
    }
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }
    #menu-btn-check {
        display: none;
    }
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 80;
        background-color: #3584bb;
    }
    .menu-content ul {
        padding: 70px 10px 0;
    }
    .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 15px;
        box-sizing: border-box;
        color:#ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
    }
    .menu-content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;
    }
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;/*leftの値を変更してメニューを画面外へ*/
        z-index: 80;
        background-color: #000;
        transition: all 0.5s;/*アニメーション設定*/
    }
    #menu-btn-check:checked ~ .menu-content {
        left: 0;/*メニューを画面内へ*/
    }
    /* ----- header ----- */

    .logo {
        width: 10em;
    }

    .sp_logo{
        width: 10em;
    }

    .account__link--orange{
        font-size: 0.7em;
        margin: 0;
        margin-right: 7em;
        padding: 2em;
        display: flex;
        align-items: center;
    }

    /* ----- head-menu ----- */
    .main-page{
        background-color: #ddd;
    }
    /* ----- user ----- */

    #user{
        grid-template-areas:
            "info    info    info"
            "instock claim   order"
            "history account contact";

        grid-template-rows: 1.5fr auto auto;
        grid-template-columns: 4fr 1fr 1fr;
        gap: 0.2em;
    }

    .block.square:before {
        content: "";
        display: block;
        height: 0;
        width: 0;
        padding-bottom: 100%;
    }

    .user{
        background-color: #808080;
        padding: 0.5em;
    }

    .user-common {
        padding: 0.5em;
    }

    .user-flex {
        padding-bottom: 0.2em;
    }

    .m-flex-column{
        display: flex;
        flex-direction: column;
        padding: 0;
        align-content: center;
        justify-content: center;
    }

    .user-height{
        height: 2.5em;
        justify-content: space-between;
        padding-right: 0.5em;
    }

    .user-common{
        justify-content: space-between;
    }

    .icon{
        width: 1.3em;
    }
    .icon-mini{
        width: 1em;
    }


    /* info */

    .info{
        grid-area: info;
    }

    .adjust-info{
        margin: 0;
    }


    /* instock */

    .instock{
        grid-area: instock;
    }

    .m-adjust-instock{
        padding: 1em 0.5em;
        color: #0071bc;
    }



    /* claim */

    .claim{
        grid-area: claim;
    }

    .claim h2, .account h2, .contact h2{
        margin-top: 0.5em;
    }

    /* order */

    .order{
        grid-area: order;
    }

    .order-a{
        padding: 0.5em;
        font-size: 0.8em;
    }

    /* history */

    .history{
        grid-area: history;
    }

    .adjust-history{
        display: none;
    }

    .adjust-history ul {
        padding: 0 0.5em;
    }

    .money{
        font-size: 1.2em;
        padding: 0;
        white-space: nowrap;
    }

    .history li{
        border: none;
    }

    .m-adjust-history{
        padding: 0.5em;

    }
    /* account */

    .account{
        grid-area: account;
    }

    .account h2,.contact h2,.claim h2{
        font-size: 0.5em;
    }

    /* contact */

    .contact{
        grid-area: contact;
    }

    /* ----- main ----- */
    #main{
        display: block;
        /* padding: 0.5em; */
        margin: 0;
    }

    .list-goods-img {
        width: 9.5em;
    }

    .goods-name{
        font-size: 0.7em;
        padding-left: 2.5em;
    }

    .goods-price{
        font-size: 0.8em;
        font-weight: bold;
        color: #d54031;
        padding-right: 0.5em;
    }

    .top-goods-price{
        margin-right: 2em;
    }

    del {
        margin-right: 0;
    }

    .product{
        display: grid;
        padding-left: 0;
        margin-bottom: 1em;
        justify-content: center;
        gap: 1em;
    }

    .subHeading{
        font-size: 1.3em;
        justify-content: space-between;
        background: #be0811;
    }

    .header_cart p {
        padding: 0;
        font-size: 0.9em;
    }

    .next{
        color: #0071bc;
        width: 0.6em;
        height: 0.6em;
    }
    .next-white{
        color: #fff;
    }

    .suggestion-title{
        background: #be0811;
        color: #fff;
        padding: 0.5em;
        font-size: 0.8em;
    }

    .suggestion_goods{
        display: block;
    }

    .suggestion-goods-name{
        padding-bottom: 0.2em;
        text-align: center;
    }

    .suggestion-goods-price{
        font-weight: bold;
        color: #d54031;
        text-align: center;
    }

    .burisuke{
        width: 18em;
        margin: 0 auto;
    }

    .suggestion img{
        padding-top: 0.1em;
    }

    .suggestion li p{
        font-size: 0.6em;
    }

    .description{
        font-size: 0.8em;
        background-color: #E6E6E6;
        margin: 0 auto;
        font-size: 0.7em;
        width: 27em;
        padding: 1em 1.3em;
    }

    .for-detail {
        padding: 0.5em;
        font-size: 0.9em;
    }

    /* detail */
    .detail-grid {
        width: auto;
    }

    .goods-main-img{
        width: 18em;
    }
    .goods_num {
        width: 5em;
    }

    .btn--cart {
        font-size: 0.8em;
    }

    /* pay */
    .change-product{
        width: 11em;
    }

    .ml--07{
        margin: 0;
    }


}


@media screen and (max-width: 690px){
    .order-list{
        grid-template-areas:
            "order_id order_id   "
            "order_at total_price"
            "status   settlement";
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr ;
    }

}


@media screen and (max-width: 576px){
    .sscreen-block{
        display: block;
    }

    td.content-stretch > * {
        position: relative;
    }

    .toolbar {
        align-self: unset;
        width: 100%;
    }

    .toolbar > * {
        flex: 1 1 0px;
    }

    .calender{
        display: flex;
        flex-direction: column;
    }
    .calender__header, .calender__cell--disabled{
        display: none;
    }
    .calender__weekday{
        display: inline;
    }

    .calender__title{
        padding:.5em;
        justify-content: space-between;
        margin-bottom: 1em;
    }
    .calender__month{
        order: 2;
        font-size: 1.2em;
    }
    .calender__prev{
        order: 1;
        margin-left: .5em;
    }
    .calender__next{
        order: 3;
    }

    .goods-img {
        width: 10em;
        height: 7em;
    }

    .goods-name{
        font-size: 0.7em;
        padding-left: 0.5em;
    }
    .top-goods-price{
        margin-right: 0;
    }

    .order-br{
        display: block;
    }

}


@media screen and (max-width: 480px){

    .icon-cart, .icon-logout{
        width: 2.5em;
    }

    .header_cart, .header_logout{
        font-size: 0.6em;
        /*padding: 0 3em;*/
        padding: 0;
    }

    /* detail */

    .detail-grid{
        align-items: center;
    }

    .goods-img {
        width: 6.5em;
        height: 5.5em;
    }


    .goods-main-img {
        height: 7em;
        width: 100%;
        margin: 0 auto;
    }

    .goods-calc {
        margin: 0.5em auto;
        padding: 0.5em;
        width: 10em;
    }

    .goods_num {
        width: 2em;
    }

    .btn--red {
        padding: 1em;
        margin: 0.5em;
    }

    .btn--cart {
        align-items: center;
    }

    /* cart */
    .cart-goods-img{
        width: 7em;
    }

    /* .cart-goods-enclose {
        width: 21em;
        margin: 0.5em auto;
        padding: 0.5em;
    } */

    .cart-grid {
        display: block;
    }

    .total {
        /* width: 11em; */
        margin: 0.5em auto;
    }

    /* delivery */
    .btn--white {
        margin: 0.25em 0;
    }

    /* pay */
    .cart-goods-enclose-grid {
        width: auto;
    }

    /* conf */
    .order-comment{
        width: 16.5em;
    }

    /* comp */
    .comp-msg {
        margin: 2em;
        font-size: 0.8em;
    }

    .comp-attention {
        width: 18em;
    }

    .st_order_at, .ed_order_at {
        width: 8em;
    }

    .charge p{
        line-height: 1em;
    }

    .order-his-detail{
        font-size: 0.7em;
    }

    .tax{
        display:block;
    }

    .w--2, .w--6{
        width: auto;
    }

    .title{
        font-size: 2em;
        margin-bottom: 0.5em;
    }

    .companyMark img {
        width: 4em;
        height: 4em;
    }

    .charge {
        width: auto;
        margin-left: auto;
        height: auto;
    }

}

@media screen and (max-width: 350px){

    header {
        height: 4em;
    }

    .header_cart p{
        display: none;
    }

    .header_cart{
        width: 5em;
        padding: 0 1em;
    }

    .menu-btn{
        right: 2em;
    }

    .account__link--orange{
        margin-right: 5.5em;
        padding: 1.8em;
    }

    #user{
        font-size: 0.7em;
    }
    .user {
        padding: 0.25em;
    }
    .icon{
        width: 0.9em;
    }
    .icon-mini{
        width: 0.7em;
    }

    .m-adjust-history {
        padding: 0.5em;
    }
    .money{
        font-size: 0.8em;
        padding: 0;
    }
    .subHeading {
        font-size: 1em;
    }

    .description {
        width: 20em;
    }
    .burisuke {
        width: 15em;
    }
    h1 {
        padding: 0.7em 2em;
    }

    .header_btn{
    }

    .logo{
        display: flex;
    }

    .list-goods-img {
        width: 7.5em;
    }

    .goods-img {
        width: 5.5em;
        height: 4.5em;
    }

    .cart-goods-enclose {
        width: 18em;
    }


    /*pay*/
    .expire_month {
        width: 4em;
    }
    .expire_year {
        width: 6em;
    }

    /*conf*/
    .order-comment {
        width: 17em;
    }

    .order-list{
        font-size: 0.8em;
    }

    .layout-horizontal {
        gap: 0.5em;
    }

    .credit_cardno{
        display: flex;
        gap: 1em;
    }

    .credit_expire{
        display: flex;
        gap: 2em;
    }

}

@media screen and (max-width: 280px){
    header {
        height: 3.5em;
    }

    .sp_logo {
        width: 5.5em;
    }

    .header_cart {
        width: 3.5em;
    }

    .account__link--orange {
        padding: 1.4em;
    }

    .menu-btn {
        height: 3.5em;
    }

    h1 {
        padding: 0.7em;
    }

    .btn--red {
        margin: 0 auto;
    }

    .goods-img {
        width: 4.5em;
        height: 3.5em;
    }

    .cart-goods-enclose {
        width: 15em;
    }

    .cart-goods_num {
        width: 3em;
    }

    .expire_year {
        width: 4em;
    }

    .order-comment {
        width: 15em;
    }
}




@media only screen and (min-width:0px){
    .cd-breadcrumb::after{clear:both;content:"";display:table}
    .cd-breadcrumb li{display:inline-block;float:left;margin:.5em 0}
    .cd-breadcrumb li::after{display:inline-block;content:'\00bb';margin:0 .6em;color:#4D4D4D}
    .cd-breadcrumb li:last-of-type::after{display:none}
    .cd-breadcrumb li>*{display:inline-block;font-size:1.4rem;color:#2c3f4c}
    .cd-breadcrumb li.current>*{color:#999}
    .cd-breadcrumb a:hover{color:#999}
    .cd-breadcrumb.custom-separator li::after{content:'';height:16px;width:16px;background:url(../img/cd-custom-separator.svg) no-repeat center center;vertical-align:middle}
    .cd-breadcrumb.custom-icons li>*::before{content:'';display:inline-block;height:20px;width:20px;margin-right:.4em;margin-top:-2px;background:url(../img/cd-custom-icons-01.svg) no-repeat 0 0;vertical-align:auto}
    .cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2)>*::before{background-position:-20px 0}
    .cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3)>*::before{background-position:-40px 0}
    .cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4)>*::before{background-position:-60px 0}
    .cd-breadcrumb.custom-icons li.current:first-of-type>*::before{background-position:0 -20px}
    .cd-breadcrumb.custom-icons li.current:nth-of-type(2)>*::before{background-position:-20px -20px}
    .cd-breadcrumb.custom-icons li.current:nth-of-type(3)>*::before{background-position:-40px -20px}
    .cd-breadcrumb.custom-icons li.current:nth-of-type(4)>*::before{background-position:-60px -20px}
    .cd-breadcrumb{padding:0 1.2em}
    .cd-breadcrumb li{margin:1.2em 0}
    .cd-breadcrumb li::after{margin:0 1em}
    .cd-breadcrumb li>*{font-size:1.6rem}
    .cd-breadcrumb.triangle{background-color:transparent;padding:0}
    .cd-breadcrumb.triangle li{position:relative;padding:0;margin:4px 4px 4px 0}
    .cd-breadcrumb.triangle li:last-of-type{margin-right:0}
    .cd-breadcrumb.triangle li>*{font-size: 0.7em;position:relative; padding: 0.55em 0 0.55em 0;color:#fff;background-color:#4D4D4D;border-color:#4D4D4D;display: block;text-align: center;}
    .cd-breadcrumb.triangle li.current>*{color:#fff;background-color:#999;border-color:#999}
    .cd-breadcrumb.triangle li:first-of-type>*{border-radius:.25em 0 0 .25em}
    .cd-breadcrumb.triangle li:last-of-type>*{border-radius:0 .25em .25em 0}
    .cd-breadcrumb.triangle a:hover{color:#fff;background-color:#2c3f4c;border-color:#2c3f4c}
    .cd-breadcrumb.triangle li::after,.cd-breadcrumb.triangle li>*::after{content:'';position:absolute;top:0;left:100%;content:'';height:0;width:0;border:15px solid transparent;border-right-width:0;border-left-width:10px}
    .cd-breadcrumb.triangle li::after{z-index:1;-webkit-transform:translateX(4px);-moz-transform:translateX(4px);-ms-transform:translateX(4px);-o-transform:translateX(4px);transform:translateX(4px);border-left-color:#fff;margin:0}
    .cd-breadcrumb.triangle li>*::after{z-index:2;border-left-color:inherit}
    .cd-breadcrumb.triangle li:last-of-type::after,
    .cd-breadcrumb.triangle li:last-of-type>*::after{display:none}
    .cd-breadcrumb.triangle.custom-separator li::after{background-image:none}
    .cd-breadcrumb.triangle.custom-icons li::after,
    .cd-breadcrumb.triangle.custom-icons li>*::after{border-top-width:25px;border-bottom-width:25px}

    .cd-breadcrumb.triangle {
        display: grid;
        grid-template-columns: repeat(5,1fr);
    }
}
@-moz-document url-prefix(){
    .cd-breadcrumb.triangle li::after,
    .cd-breadcrumb.triangle li>*::after{border-left-style:dashed}
}


@media only screen and (min-width:0px){
    .no-touch .cd-breadcrumb.triangle.custom-icons li:first-of-type a:hover::before,.cd-breadcrumb.triangle.custom-icons li.current:first-of-type em::before,.no-touch .cd-multi-steps.text-center.custom-icons li:first-of-type a:hover::before,.cd-multi-steps.text-center.custom-icons li.current:first-of-type em::before{background-position:0 -40px}
    .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(2) a:hover::before,.cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(2) em::before,.no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(2) a:hover::before,.cd-multi-steps.text-center.custom-icons li.current:nth-of-type(2) em::before{background-position:-20px -40px}
    .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(3) a:hover::before,.cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(3) em::before,.no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(3) a:hover::before,.cd-multi-steps.text-center.custom-icons li.current:nth-of-type(3) em::before{background-position:-40px -40px}
    .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(4) a:hover::before,.cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(4) em::before,.no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(4) a:hover::before,.cd-multi-steps.text-center.custom-icons li.current:nth-of-type(4) em::before{background-position:-60px -40px}
}


@media only screen and (max-width: 768px){

    .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li>*::after {
        border: 11.5px solid transparent;
    }

    .cd-breadcrumb.triangle li>*::after {
        z-index: 2;
        border-left-color: inherit;
    }

    .cd-breadcrumb.triangle li::after {
        z-index: 1;
        -webkit-transform: translateX(4px);
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -o-transform: translateX(4px);
        transform: translateX(4px);
        border-left-color: #fff;
        margin: 0;
    }

    .cd-breadcrumb.triangle {
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }

    /* .cd-breadcrumb.triangle a {
        font-size: 1em;
    } */

    .page-heading .text {
        align-self: flex-start;
    }

    .page-container {
        padding-left: 0;
        padding-right: 0;
    }

    .grid-product-detail {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas:
            "A"
            "B"
            "C";
        gap: 1em;
    }

    .grid-product-detail .btn--red {
        margin: 0 auto 0.5em auto;
        width: 15em;
        justify-content: center;
    }

    .page-product-detail .description {
        margin: 0;
        width: auto;
    }

    /* cart */
    .page-cart .page-heading.layout-horizontal {
        flex-direction: column;
    }
}

@media only screen and (max-width: 576px){

    .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li>*::after {
        border: 8.5px solid transparent;
    }

    .cd-breadcrumb.triangle li>*::after {
        z-index: 2;
        border-left-color: inherit;
    }

    .cd-breadcrumb.triangle li::after {
        z-index: 1;
        -webkit-transform: translateX(4px);
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -o-transform: translateX(4px);
        transform: translateX(4px);
        border-left-color: #fff;
        margin: 0;
    }

    .cd-breadcrumb.triangle li>* {
        font-size: 0.7em;
        position: relative;
        padding: 0.3em 1em 0.3em 1.5em;
        color: #fff;
        background-color: #4D4D4D;
        border-color: #4D4D4D;
    }

    .page-info .item {
        grid-template-areas:
            "date icon"
            "title title";

        grid-template-columns: auto min-content;
    }
}

@media only screen and (max-width: 480px){

    .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li>*::after {
        border: 7.5px solid transparent;
    }

    .cd-breadcrumb.triangle li>*::after {
        z-index: 2;
        border-left-color: inherit;
    }

    .cd-breadcrumb.triangle li::after {
        z-index: 1;
        -webkit-transform: translateX(4px);
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -o-transform: translateX(4px);
        transform: translateX(4px);
        top: 0px;
        border-left-color: #fff;
        margin: 0;
    }

    .cd-breadcrumb.triangle li>* {
        font-size: 0.7em;
        position: relative;
        padding: 0.2em 1em 0.2em 1.5em;
        color: #fff;
        background-color: #4D4D4D;
        border-color: #4D4D4D;
    }

    .form-horizontal .input-box {
        flex-direction: column;
        gap: 0.5em;
    }

    .form-horizontal .input-box input,
    .form-horizontal .input-box select,
    .form-horizontal .input-box textarea {
        width: 100%;
    }

    .page-delivery .form-horizontal .input-box > *:first-child {
        width: auto;
    }

    .page-delivery .button-group {
        display: flex;
        flex-direction: column;
        gap: 0.25em;
    }
}

@media only screen and (max-width: 280px){
    .cd-breadcrumb.triangle {
        grid-template-columns: repeat(3,1fr);
    }

    .cd-breadcrumb.triangle li:last-of-type {
        grid-column: span 2;
    }

    .cart-goods-enclose {
        flex-direction: column;
    }

    .cart-goods-enclose .img {
        width: 100%;
    }
    .hidden-xs {
        display: none;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .sm-w-10 {
        width: 10%;
    }
    .sm-w-20 {
        width: 20%;
    }
    .sm-w-30 {
        width: 30%;
    }
    .sm-w-40 {
        width: 40%;
    }
    .sm-w-50 {
        width: 50%;
    }
    .sm-w-60 {
        width: 60%;
    }
    .sm-w-70 {
        width: 70%;
    }
    .sm-w-80 {
        width: 80%;
    }
    .sm-w-90 {
        width: 90%;
    }
    .sm-w-100 {
        width: 100%;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .md-w-10 {
        width: 10%;
    }
    .md-w-20 {
        width: 20%;
    }
    .md-w-30 {
        width: 30%;
    }
    .md-w-40 {
        width: 40%;
    }
    .md-w-50 {
        width: 50%;
    }
    .md-w-60 {
        width: 60%;
    }
    .md-w-70 {
        width: 70%;
    }
    .md-w-80 {
        width: 80%;
    }
    .md-w-90 {
        width: 90%;
    }
    .md-w-100 {
        width: 100%;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .lg-w-10 {
        width: 10%;
    }
    .lg-w-20 {
        width: 20%;
    }
    .lg-w-30 {
        width: 30%;
    }
    .lg-w-40 {
        width: 40%;
    }
    .lg-w-50 {
        width: 50%;
    }
    .lg-w-60 {
        width: 60%;
    }
    .lg-w-70 {
        width: 70%;
    }
    .lg-w-80 {
        width: 80%;
    }
    .lg-w-90 {
        width: 90%;
    }
    .lg-w-100 {
        width: 100%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .xl-w-10 {
        width: 10%;
    }
    .xl-w-20 {
        width: 20%;
    }
    .xl-w-30 {
        width: 30%;
    }
    .xl-w-40 {
        width: 40%;
    }
    .xl-w-50 {
        width: 50%;
    }
    .xl-w-60 {
        width: 60%;
    }
    .xl-w-70 {
        width: 70%;
    }
    .xl-w-80 {
        width: 80%;
    }
    .xl-w-90 {
        width: 90%;
    }
    .xl-w-100 {
        width: 100%;
    }
}