: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;
    --BG6: #393936;
    --areaBoxBG: #CCCBC9;
    --numBG: #e5e0df;
    --itemBorder: #CECEC9;
    --itemBG: #E8E8E3;
    --itemBorder2:#5E5E53;
    --itemBG2:#45453A;
}

.mainTitleArea{
    background-image: url('../img/camera/mainTitleBG.webp');
    background-size: cover;
    background-position: center;
}
.mainTitleArea > .inner{
    background-color: rgba(0,0,0,0.8);
}
.mainTitleArea > .inner > .mainTitleItem{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 67.5px;
}
.mainTitleCaption{
    color: #fff;
    font-weight: 800;
    font-size: 3.45em;
    margin-bottom: 20.25px;
}
.mainTitleSummary{
    font-size: 1.05em;
    margin-bottom: 20.25px;
    color: var(--BG2);
}
.btnAbout{
    display: inline-block;
    margin-right: 20.25px;
    padding: 10px 16px;
    border-radius: 6px;
    background-color: var(--BG2);
    font-weight: 800;
}
.btnAbout:hover{
    background-color: var(--BG);
}

.cameraArea{
    background-color: var(--BG);
}
.cameraArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.cameraCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.cameraCaptionSmall{
    font-size: 0.7em;
    color: var(--grayPurple);
}

.cameraFlowFlex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20.25px;
}
.cameraFlowNumber{
    display: grid;
    place-content: center;
    width: 40.5px;
    height: 40.5px;
    border: var(--productBoxBorderColor) 1px solid;
    background-color: var(--productBoxBGColor);
    border-radius: 8px;
    font-weight: 400;
    font-size: 1.2em;
}
.cameraFlowContent{
    width: 360px;
}
.cameraFlowCaption{
    font-size: 1.4em;
    margin-bottom: 10.25px;
    font-weight: 800;
}

.kindCameraArea{
    background-color: var(--BG);
}
.kindCameraArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.kindCameraCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.kindCameraFlex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20.25px;
}
.kindCameraItem{
    width: 267px;
}
.kindCameraItemImage{
    width: 100%;
    height: 165.02px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 20.25px;
}
.kindCameraItemCaption{
    font-size: 1.45em;
    font-weight: 800;
    margin-bottom: 10.25px;
}
.kindCameraItemSummary{
    font-size: 1.1em;
}
.contactLink{
    text-align: right;
}
.btnContactLink{
    display: inline-block;
    padding: 10px 12px;
    background-color: var(--linkColor);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 800;
    color: #fff;
}
.btnContactLink:hover{
    background-color: var(--linkColorHover);
}

.signageArea{
    background-color: var(--BG2);
}
.signageArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.signageCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.signageCaptionSmall{
    font-size: 0.7em;
    color: var(--grayPurple);
}

.signageFlowFlex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20.25px;
}
.signageFlowNumber{
    display: grid;
    place-content: center;
    width: 40.5px;
    height: 40.5px;
    border: var(--productBoxBorderColor) 1px solid;
    background-color: var(--productBoxBGColor);
    border-radius: 8px;
    font-weight: 400;
    font-size: 1.2em;
}
.signageFlowContent{
    width: 360px;
}
.signageFlowCaption{
    font-size: 1.4em;
    margin-bottom: 10.25px;
    font-weight: 800;
}

.kindSignageArea{
    background-color: var(--BG6);
}
.kindSignageArea > .inner{
    width: 990px;
    padding: 20.25px 0;
    margin: 0 auto;
}
.kindSignageFlex{
    display: flex;
}
.kindSignageBlock1{
    width: 618.75px;
    padding: 85.5px 63px;
}
.kindSignageCaption{
    font-size: 2.8em;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 20.25px;
}
.kindSignageItem{
    padding: 16px;
    border-radius: 10px;
    border: var(--itemBorder2) 1px solid;
    background-color: var(--itemBorder2);
    margin-bottom: 20.25px;
}
.kindSignageItemCaption{
    font-size: 1.4em;
    color: #fff;
    margin-bottom: 10.25px;
}
.kindSignageItemSummary{
    font-size: 1.1em;
    color: #fff;
}
.kindSignageBlock1 > .contactLink{
    text-align: left;
}
.kindSignageBlock1 > .contactLink > .btnContactLink{
    background-color: var(--BG2);
    color: #000;
}
.kindSignageBlock2{
    width: calc(100% - 618.75px);
    background-image: url('../img/camera/kindSignageBG.webp');
    background-position: center;
    background-size: cover;
    border-radius: 10px;
}

.resultArea{
    background-color: var(--BG5);
}
.resultArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 0;
}
.resultBox{
    padding: 85.5px 63px;
    background-color: var(--areaBoxBG);
    border-radius: 20px;
}
.resultCaption{
    font-size: 2.6em;
    margin-bottom: 20.25px;
}
.resultFlex{
    display: flex;
}
.resultArrow{
    width: 32px;
    background-image: url('../img/common/flowArrowH.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
.resultItem{
    width: 249px;
    margin-right: 10.25px;
}
.resultItemNumber{
    display: grid;
    place-content: center;
    font-size: 1.6em;
    height: 110px;
}
.resultItemCaption{
    font-size: 1.4em;
    margin-bottom: 10.25px;
}
.resultItemSummary{
    font-size: 1.1em;
}

.selectArea{
    background-color: var(--BG);
}
.selectArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 20.25px 0;
}
.selectFlex{
    display: flex;
}
.selectBlock1{
    width: 618.75px;
    padding: 85.5px 63px;
}
.selectCaption{
    font-size: 2.6em;
    margin-bottom: 20.25px;
}
.howtoSelect{
    font-size: 1.1em;
}
.selectExplanation{
    margin-bottom: 10.25px;
}
.selectExplanationControl{
    display: flex;
    align-items: flex-start;
    margin-bottom: 10.25px;
    cursor: pointer;
    user-select: none;
}
.btnOpenClose{
    margin-right: 10.25px;
    cursor: pointer;
}
.openCloseTriangle{
    transform: rotate(90deg);
    user-select: none;
}
.selectExplanationSummary{
    max-height: 0;
    overflow: hidden;
    transition: 200ms;
    margin-left: 10px;
    border-left: 1px solid var(--linkColorHover);
    padding-left: 10.25px;
}
.selectExplanationSummary.on{
    max-height: 100vh;
    font-size: 1.1em;
}
.selectExplanationSummary > ul{
    padding-left: 20px;
}
.selectExplanationSummary > ul > li{
    list-style: disc;
}
.selectBlock2{
    width: calc(100% - 618.75px);
    background-image: url('../img/camera/selectBG.webp');
    background-size: cover;
    background-position: center;
    border-radius: 16px;
}

.operationArea{
    background-color: var(--BG);
}
.operationArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.operationCaption{
    font-size: 2.8em;
    margin-bottom: 30.25px;
}
.operationFlex{
    display: flex;
}
.operationItem1{
    padding-top: 16px;
    width: 328.5px;
}
.operationTree{
    width: 162px;
    background-image: url('../img/camera/2024-08-07_161045.png');
    background-position: top center;
    background-size: 100%;
    background-repeat: no-repeat;
}
.operationItem2{
    padding-top: 106.5px;
    width: 328.5px;
}
.operationItemCaption{
    font-size: 1.4em;
    margin-bottom: 10.25px;
}
.operationItemSummary{
    font-size: 1.1em;
}
.operationItemBox1{
    margin-bottom: 32.25px;
    text-align: right;
}
.operationItemBox2{
    text-align: right;
}
.operationItemBox3{
    margin-bottom: 54.25px;
}


.contactArea{
    background-color: var(--BG);
}
.contactArea > .inner{
    width: 990px;
    padding: 85.5px 63px;
    margin: 0 auto;
}
.contactCaption{
    font-size: 2.6em;
}