/********************************************************************************************************************************
*                                                             property                                                          *
********************************************************************************************************************************/
/* ######## display ######## */
.dp-block{
    display:block;
}
.dp-none{
    display:none;
}
.dp-flex{
    display:flex;
}
.dp-grid{
    display:grid;
}
.dp-inline{
    display: inline;
}
.dp-unset{
    display:unset;
}
/* ######## flex-direction ######## */
.fd-column{
    flex-direction: column;
}
/* ######## align-items ######## */
.ai-center{
    align-items: center;
}
/* ######## align-items ######## */
.as-center{
    align-self: center;
}
.as-self-end{
    align-self: self-end;
}
/* ######## justify-content ######## */
.jc-left{
    justify-content: left;
}
.jc-flex-end{
    justify-content: flex-end;
}
.jc-center{
    justify-content: center;
}
.jc-space-between{
    justify-content: space-between;
}
.jc-space-evenly{
    justify-content: space-evenly;
}
/* ######## grid-template-columns ######## */
.gtc-1-2 {
    grid-template-columns: 1fr 2fr;
}
.gtc-2-3 {
    grid-template-columns: 2fr 3fr;
}
/* ######## position ######## */
.p-absolute{
    position: absolute;
}
.p-relative{
    position: relative;
}
.p-fixed{
    position: fixed;
}
/* ######## white space ######## */
.ws-pre-line{
    white-space: pre-line;
}
/* ######## height ######## */
.h-1-v {
    height: 1vw;
}
.h-7-v {
    height: 1vh;
}
.h-100 {
    height: 100%;
}
.h-10 {
    height: 10%;
}
.ht-80 {
    height: 80%;
}
.ht-10 {
    height: 10%;
}
.h-unset {
    height: unset;
}
/* ######## width ######## */
.w-5{
    width: 5%;
}
.w-10{
    width: 10%;
}
.w-15{
    width: 15%;
}
.w-18{
    width: 18%;
}
.w-20{
    width: 20%;
}
.w-25{
    width: 25%;
}
.w-30{
    width: 30%;
}
.w-40{
    width: 40%;
}
.w-45{
    width: 45%;
}
.w-50{
    width: 50%;
}
.w-55{
    width: 55%;
}
.w-60{
    width: 60%;
}
.w-70{
    width: 70%;
}
.w-75{
    width: 75%;
}
.w-65{
    width: 65%;
}
.w-80{
    width: 80%;
}
.w-90{
    width: 90%;
}
.w-100{
    width: 100%;
}
.w-auto{
    width: auto;
}
.w-40-vw{
    width: 40vw;
}
.w-70-vw{
    width: 70vw;
}
.wh-80{
    width: 80%;
}
.wh-20{
    width: 20%;
}
/* ######## flex-wrap ######## */
.fw-wrap{
    flex-wrap: wrap
}
/* ######## word-wrap ######## */
.ww-break-word{
    word-wrap: break-word;
}
/* ######## color ######## */
.fc-unset {
    color: unset;
}
.fc-808080 {
    color: #808080;
}
.fc-9cccb4 {
    color: #9cccb4;
}
.fc-a3a3a3 {
    color: #a3a3a3;
}
.fc-ff0000 {
    color: #ff0000;
}
.fc-eb6032 {
    color: #eb6032;
}
.fc-ffffff {
    color: #ffffff;
}
.fc-ced4da {
    color: #ced4da;
}
.fc-f7e900 {
    color: #f7e900;
}
.fc-83A2E1 {
    color: #83A2E1;
}
.fc-495057{
    color: #495057;
}
.fc-756f6f {
    color: #756f6f;
}
.fc-2e8b57{
    color: #2e8b57;
}
.fc-3e5148{
    color: #3e5148;
}
.fc-424242{
    color: #424242;
}
.fc-C00000 {
    color: #C00000;
}
.fc-FFFF00 {
    color: #FFFF00;
}
.fc-B4B4B4 {
    color: #B4B4B4;
}
.fc-000{
    color: #000;
}
.fc-red {
    color: red;
}
.fc-gray {
    color: gray;
}
.fc-FF7E26{
    color: #FF7E26;
}
.fc-ff3241{
    color: #ff3241;
}
.fc-FFAE15{
    color: #FFAE15;
}
.fc-5697ff{
    color: #5697ff;
}
.fc-a9d18e{
    color: #a9d18e;
}
.fc-E00011{
    color: #E00011;
}
.fc-07963F{
    color: #07963F;
}
/* ######## background-color ######## */
.bgc-ffffff{
    background-color: #ffffff;
}
.bgc-F5F7FA{
    background-color: #F5F7FA;
}
.bgc-cccccc{
    background-color:#cccccc;
}
.bgc-9CCCB4{
    background-color: #9CCCB4;
}
.bgc-EC847C{
    background-color: #EC847C;
}
.bgc-A9D18E {
    background-color: #A9D18E;
}
.bgc-87CEFA {
    background-color: #87CEFA;
}
.bgc-D0D0D0 {
    background-color: #D0D0D0;
}
.bgc-FAD8C2 {
    background-color: #FAD8C2;
}
.bgc-FFE699 {
    background-color: #FFE699;
}
.bgc-FFAE15{
    background-color: #FFAE15;
}
.bgc-66f1d1 {
    background-color: #66f1d1;
}
.bgc-c1f3a2 {
    background-color: #c1f3a2;
}
.bgc-c5e0b4 {
    background-color: #c5e0b4;
}
.bgc-b4c7e7 {
    background-color: #b4c7e7;
}
.bgc-ff0000 {
    background-color: #ff0000;
}
.bgc-e72510 {
    background-color: #e72510;
}
.bgc-505050 {
    background-color: #505050;
}
.bgc-08bf5b {
    background-color: #08bf5b;
}
.bgc-fe0132 {
    background-color: #fe0132;
}
.bgc-0099D9 {
    background-color: #0099D9;
}
.bgc-0051EA{
    background-color: #0051EA;
}
.bgc-b5b5b6{
    background-color: #b5b5b6;
}
.bgc-faeb97{
    background-color: #faeb97;
}
.bgc-000000{
    background-color: #000000;
}
.bgc-78909C{
    background-color: #78909C;
}
.bgc-transparent {
    background-color: transparent;
}
/* ######## <i>タグ用font-size ######## */
.icon-fs-S{
    font-size: 1.5rem;
}
.icon-fs-M{
    font-size: 2.0rem;
}
.icon-fs-L{
    font-size: 2.5rem;
}
.icon-fs-XL{
    font-size: 3.0rem;
}
.icon-fs-XXL{
    font-size: 3.5rem;
}
.icon-fs-XXXL{
    font-size: 4.0rem;
}
/* ######## font-size ######## */
.fs-XS{
    font-size: 0.625rem;/* 10px */
}
.fs-S{
    font-size: 0.8125rem;/* 13px */
}
.fs-M{
    font-size: 1rem;/* 16px */
}
.fs-L{
    font-size: 1.1875rem;/* 19px */
}
.fs-20{
    font-size: 1.25rem;/* 20px */
}
.fs-XL{
    font-size: 1.375rem;/* 22px */
}
.fs-XXL{
    font-size: 1.5625rem;/* 25px */
}
.fs-XXXL{
    font-size: 1.75rem;/* 28px */
}
/* ######## font-weight ######## */
.fw-normal {
    font-weight: normal;
}
.fw-bold {
    font-weight: bold;
}
/* ######## text-align ######## */
.ta-center {
    text-align: center;
}
.ta-end {
    text-align: end;
}
.ta-left {
    text-align: left;
}
.ta-right {
    text-align: right;
}
.ta-initial{
    text-align: initial;
}
/* ######## text-decoration ######## */
.td-underline {
    text-decoration: underline;
}
/* ######## margin ######## */
.m-auto{
    margin: auto;
}
.m-0-auto-8{
    margin: 0 auto 8vw;
}
.m-1-0-1 {
    margin: 1vw 0 1vw;
}
.m-0 {
    margin: 0;
}
.m-2 {
    margin: 2vw;
}
.m-3 {
    margin: 3vw;
}
.m-4 {
    margin: 4vw;
}
.m-0-3-0 {
    margin: 0 3vw 0vw;
}
.m-3-0-3 {
    margin: 3vw 0 3vw;
}
.m-0-4-0 {
    margin: 0 4vw 0vw;
}
.m-5-0-5 {
    margin: 5vw 0 5vw;
}
.m-15-0-5 {
    margin: 15vw 0 5vw;
}
.m-0-1-2 {
    margin: 0 1vw 2vw;
}
.m-0-15 {
    margin: 0 15vw;
}
.ml-0 {
    margin-left: 0;
}
.ml-3 {
    margin-left: 3vw;
}
.ml-2 {
    margin-left: 2vw;
}
.ml-10{
    margin-left: 10vw;
}
.ml-20{
    margin-left: 20vw;
}
.ml-35{
    margin-left: 35vw;
}
.mt-2{
    margin-top: 2vw;
}
.mt-3{
    margin-top: 3vw;
}
.mt-5{
    margin-top: 5vw;
}
.mt-10{
    margin-top: 10vw;
}
.mt-15{
    margin-top: 15vw;
}
.mt-20{
    margin-top: 20vw;
}
.mt-25{
    margin-top: 25vw;
}
.mt-30{
    margin-top: 30vw;
}
.mt-31{
    margin-top: 31vw;
}
.mt-per-25{
    margin-top: 25%;
}
.mr-2{
    margin-right: 2vw;
}
.mb-1{
    margin-bottom: 1vw;
}
.mb-2{
    margin-bottom: 2vw;
}
.mb-5{
    margin-bottom: 5vw;
}
.mb-15{
    margin-bottom: 15vw;
}
.mb-24{
    margin-top: 24vw;
}
/* ######## margin percent ######## */
.m-per-0-1 {
    margin: 0 1%;
}
.m-per-20-10 {
    margin: 20% 10%;
}
/* ######## padding ######## */
.p-1 {
    padding: 1vw;
}
.p-2 {
    padding: 2vw;
}
.p-3 {
    padding: 3vw;
}
.p-1-0-1 {
    padding: 1vw 0 1vw;
}
.p-3-0-3 {
    padding: 3vw 0 3vw;
}
.p-0-3-0-3 {
    padding: 0 3vw 0 3vw;
}
.pt-2 {
    padding-top :2vw;
}
.pl-1 {
    padding-left :1vw;
}
.pl-2 {
    padding-left :2vw;
}
.pl-3 {
    padding-left: 3vw;
}
.pl-4 {
    padding-left: 4vw;
}
.pl-20 {
    padding-left: 20vw;
}
.pr-4 {
    padding-right: 4vw;
}
.pb-1 {
    padding-bottom: 1vw;
}
.pb-3 {
    padding-bottom: 3vw;
}
.pb-per-60 {
    padding-bottom: 60%;
}
/* ######## padding percent ######## */
.p-per-5 {
    padding: 5%;
}
.pl-per-15 {
    padding-left: 15%;
}
.pl-per-20 {
    padding-left: 20%;
}
.pl-per-10 {
    padding-left: 10%;
}
.pb-per-10 {
    padding-left: 10%;
}
.pr-per-10{
    padding-right: 10%;
}
/* ######## float ######## */
.f-left {
    float: left;
}
.f-right {
    float: right;
}
/* ######## opacity ######## */
.o-0 {
    opacity: 0;
}
.o-1 {
    opacity: 1;
}
/* ######## object-fit ######## */
.of-contain {
    object-fit: contain;
}
/* ######## pointer-events ######## */
.pe-auto {
    pointer-events: auto;
}
.pe-none {
    pointer-events: none;
}
/* ######## border ######## */
.b-none {
    border: none;
}
/* ######## border-top ######## */
.bt-none{
    border-top: none;
}
/* ######## border-bottom ######## */
.bb-none {
    border-bottom: none;
}
.b-0_5-solid-cccccc{
    border: 0.5vw solid #cccccc;
}
.bb-1-solid-9cccb4{
    border-bottom: 1vw solid #9cccb4;
}
/* ######## border-radius ######## */
.br-10{
    border-radius: 10px;
}
.br-3{
    border-radius: 3px;
}
/* ######## visibility ######## */
.v-hidden {
    visibility: hidden;
}
/* ######## background attributes ######## */
.bg-repeat-no-repeat{
    background-repeat:no-repeat;
}
.bg-size-cover{
    background-size:cover;
}
.bg-position-center{
    background-position:center;
}
.bg-size-100-100{
    background-size: 100% 100%;
}
/********************************************************************************************************************************
*                                                            component                                                          *
********************************************************************************************************************************/
/* ######## image color #9cccb4 ######## */
.component-image-9cccb4 {
    filter: hue-rotate(46deg);
    opacity: 0.5;
}
/* ######## input ######## */
.component-input-text {
    border: 0.1vw solid #ced4da;
    padding: 2vw;
    border-radius: 2px;
}
.component-input-select {
    border: 0.1vw solid #ced4da;
    padding: 2vw;
    border-radius: 2px;
}
/* ######## button ######## */
.component-button {
    text-align: center;
    background-color: #9cccb4;
    padding: 3vw;
    border-radius: 5px;
}

.component-button-nobgc {
    text-align: center;
    padding: 3vw;
    border-radius: 5px;
    border: 1px solid #9cccb4;
}

/* ######## order button ######## */
.order-btn {
    margin: 0px auto;
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    align-items: center;
    width: 100%;
    border-radius: 10px;
}
.order-btn >div {
    padding: 5px;
    width: 90%;
    border-radius: 2px;
    background-color: #b5b5b6;
    text-align: center;
    line-height: 3;
}
.order-btn >div.btn-green {
    font-size: 1.1rem;
    background-color: white;
    border-radius: 10px;
    border: 3px solid #9cccb4;
}
.order-btn >div.btn-red {
    font-size: 1.1rem;
    background-color: #ff5050;
}
.order-btn >div.btn-grey {
    font-size: 1.1rem;
    background-color: #b5b5b6;
    color: black;
    border-radius: 10px;
}
.order-btn >div.btn-orange {
    font-size: 1.1rem;
    background-color: #f4502e;
}
.order-btn >div.align-button {
    border-radius: 8px;
}
/* ######## hr ######## */
.component-hr-1 {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
}
.title-border-bottom{
    border-bottom: 0.05vh solid #e1d6cf;
    box-shadow: 0 0.05vh 0 rgb(170 170 170);
}
.custom-text-area {
    width: 100%;
    height: 10vh;
    padding: 1% 1%;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #ccc inset;
    resize:vertical;
}
.custom-text-area:focus {
    outline: 0;
    box-shadow: 0 0 0 2px #9CCCB4 inset;
}
.btn-order {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 10px;
    background-color: #9CCCB4;
    padding: 2vw;
}
.btn-order-nobgc {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 10px;
    border: 2px solid #9cccb4;
    padding: 2vw;
}
.common_footer_btn {
    border: 1px solid #9cccb4;
    width: 30vw;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8vh;
}
.common_footer_btn a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-num{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #212529;
    background-color: #e4e4e4;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
}
/* ######## payment select button ######## */
.pay-select-btn {
    margin: 0px auto;
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    align-items: center;
    width: 90%;
    border-radius: 10px;
    border: 3px solid #9cccb4;
}
.pay-select-btn >div {
    padding: 5px;
    width: 90%;
    border-radius: 2px;
    text-align: center;
    height: 12vh;
}
.zIndex1 {
    z-index: 1;
}
.zIndex2 {
    z-index: 2;
}