:root{
    --linkColor: #6f6f5d;
    --linkColorHover: #dfdfcd;
    --linkColor: #6f6f5d;
    --linkColorHover: #dfdfcd;
    --linkColorHoverDark: #2f2f1d;
    --defaultBGColor: #fafaf8;
    --productBoxBGColor: #e8e8e3;
    --productBoxBorderColor: #cecec9;
    --tableProductBGColor: #D6C9BE;
    --tableRowDark: rgba(0,0,0,0.04);
    --grayPurple: #494D61;
    --grayPurple2: #797D91;
    --BG: #F8F8F5;
    --BG2: #E5E5DE;
    --BG3: #848795;
    --BG4: #DACDC2;
    --BG5: #312F2B;
    --areaBoxBG: #CCCBC9;
}

body{
    background-image: url('../img/web/webBG.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.posArea{
    background-color: var(--BG);
    font-family: 'メイリオ';
}
.posArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 20.25px 0;
}
.posFlex{
    display: flex;
    align-items: center;
}
.posBlock1{
    width: 618.75px;
    padding: 0px 63px;
}
.posCaption{
    font-size: 3.45em;
    font-weight: 800;
    margin-bottom: 20.25px;
}
.posSummary{
    font-size: 1.1em;
    margin-bottom: 20.25px;
}
.posItemFlex{
    display: flex;
    gap: 10.25px;
    margin-bottom: 20.25px;
}
.posItem{
    padding: 9px 16px;
    text-align: center;
    min-width: 136px;
    box-shadow: inset 0 0 0 0.125em var(--linkColor);
    border-radius: 8px;
    color: var(--linkColor);
    font-weight: bold;
    font-size: 1.1em;
    background-color: #fff;
}
.posItem:hover{
    background-color: var(--linkColorHover);
    color: var(--linkColor);
}
.posBlock2{
    width: calc(100% - 618.75px);
    height: 462px;
    background-image: url('../img/pos/pos.webp');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}

.cashierArea{
    background-color: var(--BG);
}
.cashierArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.cashierCaption{
    font-size: 3.45em;
    margin-bottom: 20.25px;
    letter-spacing: 8px;
}
.cashierSummary{
    font-size: 1.1em;
    margin-bottom: 20.25px;
}
.cashierFlex{
    display: flex;
    justify-content: space-between;
}
.cashierItem{
    width: 260px;
}
.cashierItemImage{
    width: 100%;
    height: 119.58px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 20.25px;
}
.cashierItemCaption{
    font-size: 1.45em;
    font-weight: 400;
    margin-bottom: 10.25px;
}
.cashierItemSummary{
    font-size: 1.1em;
}

.posresiArea{
    background-image: url('../img/pos/posresiBG.webp');
    background-size: cover;
    background-position: center;
}
.posresiArea > .inner{
    padding: 85.5px 0px;
}
.posresiBox{
    width: 990px;
    margin: 0 auto;
    padding: 49.5px 67.5px;
    background-color: rgba(255,250,250,0.8);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}
.posresiCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.posresiFlex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.posresiItem{
    width: 418.5px;
    padding: 18px;
    background-color: var(--productBoxBGColor);
    border: var(--productBoxBorderColor) 1px solid;
    border-radius: 10px;
    margin-bottom: 20.25px;
}
.posresiItemImage{
    height: 197.72px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 20.25px;
}
.posresiItemCaption{
    font-size: 1.4em;
    margin-bottom: 10.25px;
}
.posresiItemSummary{
    font-size: 1.1em;
}
.posresiItemGrid{
    display: grid;
    place-content: center;
}
.posresiItemDetail{
    padding: 10px 16px;
    background-color: #fff;
    border: var(--linkColor) 1px solid;
    border-radius: 8px;
}
.posresiItemDetail:hover{
    background-color: var(--linkColorgover);
}

.rendoArea{
    background-color: var(--BG);
}
.rendoArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.rendoCaption{
    font-size: 2.8em;
    margin-bottom: 20.25px;
}

.methodArea{
    background-color: var(--BG);
}
.methodArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.methodCaption{
    font-size: 2.8em;
    margin-bottom: 20.25px;
}
.methodFlowFlex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20.25px;
}
.methodFlowNumber{
    display: grid;
    place-content: center;
    width: 40.5px;
    height: 40.5px;
    border: var(--productBoxBorderColor) 1px solid;
    background-color: var(--productBoxBGColor);
    border-radius: 8px;
}
.methodFlowContent{
    width: 360px;
}
.methodFlowCaption{
    font-size: 1.4em;
    margin-bottom: 10.25px;
    font-weight: 800;
}

.spArea{
    background-color: var(--BG);
}
.spArea > .inner{
    padding: 85.5px 63px;
    width: 990px;
    margin: 0 auto;
}
.spCaption{
    font-size: 2.8em;
    margin-bottom: 20.25px;
}
.aboutSpOrder{
    margin-bottom: 20.25px;
}
.aboutSpOrderImage{
    width: 100%;
    height: auto;
}
.spSummary{
    font-size: 1.1em;
}

.resultArea{
    background-color: var(--BG);
}
.resultArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 20.25px 0;
}
.resultFlex{
    display: flex;
}
.resultBlock1{
    width: 618.75px;
    padding: 85.5px 63px;
}
.resultCaption{
    font-size: 2.6em;
    margin-bottom: 20.25px;
}
.resultSummary{
    font-size: 1.1em;
}
.btnViewResult{
    display: inline-block;
    padding: 10px 16px;
    background-color: var(--linkColor);
    border-radius: 8px;
    color: #fff;
}
.btnViewResult:hover{
    background-color: var(--linkColorHover);
}
.resultBlock2{
    width: calc(100% - 618.75px);
    background-image: url('../img/pos/resultBG.webp');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}


.recapArea{
    background-color: var(--BG);
}
.recapArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 20.25px 0;
}
.recapFlex{
    display: flex;
}
.recapBlock2{
    width: 618.75px;
    padding: 85.5px 63px;
}
.recapCaption{
    font-size: 2.6em;
    margin-bottom: 20.25px;
}
.recapSummary{
    font-size: 1.1em;
}
.btnViewRecap{
    display: inline-block;
    padding: 10px 16px;
    background-color: var(--linkColor);
    border-radius: 8px;
    color: #fff;
}
.btnViewRecap:hover{
    background-color: var(--linkColorHover);
}
.recapBlock1{
    width: calc(100% - 618.75px);
    background-image: url('../img/pos/recapBG.webp');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}