: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;
}

.webWorksArea{
    background-color: var(--BG);
    font-family: 'メイリオ';
}
.webWorksArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 10.25px 0;
}
.webWorksFlex{
    display: flex;
    align-items: center;
}
.webWorksBlock1{
    width: 618.75px;
    padding: 0px 63px;
}
.webWorksCaption{
    font-size: 3.45em;
    font-weight: 800;
    margin-bottom: 20.25px;
}
.webWorksSummary{
    font-size: 1.1em;
    margin-bottom: 20.25px;
}
.webWorksItemFlex{
    display: flex;
    gap: 10.25px;
    margin-bottom: 20.25px;
}
.webWorksItem{
    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;
}
.webWorksItem:hover{
    background-color: var(--linkColorHover);
    color: var(--linkColor);
}
.webWorksBlock2{
    width: calc(100% - 618.75px);
    height: 462px;
    background-image: url('../img/web/webWorksImage.webp');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}

.websiteArea{
    background-color: var(--BG);
}
.websiteArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.websiteCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.websiteFlex{
    display: flex;
    justify-content: space-between;
}
.websiteItem{
    width: 193.5px;
}
.websiteItemImage{
    width: 100%;
    height: 119.58px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 20.25px;
}
.websiteItemCaption{
    font-size: 1.45em;
    font-weight: 800;
    margin-bottom: 10.25px;
}
.websiteItemSummary{
    font-size: 1.1em;
}

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

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

.lpArea{
    background-color: var(--BG);
}
.lpArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.lpCaption{
    font-size: 3em;
    margin-bottom: 40.5px;
}
.lpFlex{
    display: flex;
    justify-content: space-between;
}
.lpItem{
    width: 193.5px;
}
.lpItemCaption{
    font-size: 1.25em;
    font-weight: 800;
    margin-bottom: 10.25px;
}
.lpItemSummary{
    font-size: 1.1em;
}

.portalArea{
    background-color: var(--BG);
}
.portalArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.portalCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.portalFlex{
    display: flex;
    justify-content: space-between;
}
.portalItem{
    width: calc(50% - 10px);
}
.portalItemCaption{
    font-size: 1.45em;
    margin-bottom: 10.25px;
}
.portalItemSummary{
    margin-bottom: 20.25px;
    font-size: 1.1em;
}
.portalItemList > li{
    list-style: disc;
    font-size: 1.1em;
    margin-left: 20.25px;
}

.appArea{
    background-color: var(--BG2);
}
.appArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.appCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.appFlex{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.appItem1{
    width: 425.533px;
    padding-right: 20.5px;
    font-size: 1.1em;
}
.appItem2{
    width: calc(100% - 425.533px - 20.25px);
    border-radius: 10px;
    background-image: url('../img//web/app.jpg');
    background-size: cover;
    background-position: center;
    height: 277.47px;
}

.webAppArea{
    
}
.webAppArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.webAppCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.webAppFlex{
    display: flex;
    justify-content: space-between;
}
.webAppItem{
    width: 273px;
    padding: 18px;
    border: var(--productBoxBorderColor) 1px solid;
    border-radius: 8px;
    background-color: var(--productBoxBGColor);
}
.webAppItemCaption{
    font-size: 1.45em;
    font-weight: 400;
    line-height: 1.15em;
    margin-bottom: 20.25px;
}
.webAppItemSummary{
    font-size: 1.1em;
}

.basArea{
    background-color: var(--BG);
}
.basArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.basCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.basFlex{
    display: flex;
    justify-content: space-between;
}
.basItem{
    width: 193.5px;
}
.basItemImage{
    width: 100%;
    height: 119.58px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 20.25px;
}
.basItemCaption{
    font-size: 1.45em;
    font-weight: 800;
    margin-bottom: 10.25px;
}
.basItemSummary{
    font-size: 1.1em;
}

.printingArea{
    background-color: var(--BG);
}
.printingArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.printingCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.printingFlex{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.printingItem1{
    width: 425.533px;
    padding-right: 20.5px;
    font-size: 1.1em;
}
.printingItem2{
    width: calc(100% - 425.533px - 20.25px);
    border-radius: 10px;
    background-image: url('../img//web/printing.webp');
    background-size: cover;
    background-position: center;
    height: 360px;
}

.brochureArea{
    background-color: var(--BG);
}
.brochureArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.brochureCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.brochureFlex{
    display: flex;
    justify-content: space-between;
}
.brochureItem{
    width: 273px;
    padding: 18px;
    border: var(--productBoxBorderColor) 1px solid;
    border-radius: 8px;
    background-color: var(--productBoxBGColor);
}
.brochureItemCaption{
    font-size: 1.45em;
    font-weight: 400;
    line-height: 1.15em;
    margin-bottom: 20.25px;
}
.brochureItemSummary{
    font-size: 1.1em;
}

.leafArea{
    background-color: var(--BG4);
}
.leafArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.leafCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.leafFlex{
    display: flex;
    justify-content: space-between;
}
.leafItem{
    width: 193.5px;
}
.leafItemImage{
    width: 100%;
    height: 119.58px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 20.25px;
}
.leafItemCaption{
    font-size: 1.45em;
    font-weight: 800;
    margin-bottom: 10.25px;
}
.leafItemSummary{
    font-size: 1.1em;
}

.bcardArea{
    background-color: var(--BG5);
}
.bcardArea > .inner{
    padding: 85.5px 0px;
}
.bcardBox{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
    background-color: var(--areaBoxBG);
    border-radius: 16px;
}
.bcardCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.bcardFlex{
    display: flex;
    justify-content: space-between;
}
.bcardItem{
    width: 273px;
    padding: 18px;
    padding-top: 0;
    border-radius: 8px;
}
.bcardItem3{
    height: 200px;
    background-image: url('../img/web/bcard.jpg');
    background-size: cover;
    background-position: center;
}
.bcardItemCaption{
    font-size: 1.45em;
    font-weight: 400;
    line-height: 1.15em;
    margin-bottom: 20.25px;
}
.bcardItemSummary{
    font-size: 1.1em;
}


.posterArea{
    background-color: var(--BG5);
}
.posterArea > .inner{
    padding: 85.5px 0px;
}
.posterBox{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
    background-color: var(--areaBoxBG);
    border-radius: 16px;
}
.posterCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.posterFlowFlex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20.25px;
}
.posterFlowNumber{
    display: grid;
    place-content: center;
    width: 36px;
    height: 36px;
    border: var(--productBoxBorderColor) 1px solid;
    background-color: var(--productBoxBGColor);
    border-radius: 8px;
}
.posterFlowContent{
    width: 232px;
}
.posterFlowCaption{
    font-size: 1.4em;
    margin-bottom: 10.25px;
    font-weight: 800;
}
.posterFlowSummary{
    font-size: 1.1em;
}


.scardArea{
    background-color: var(--BG2);
}
.scardArea > .inner{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
}
.scardCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.scardFlex{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.scardItem1{
    width: 425.533px;
    padding-right: 20.5px;
    font-size: 1.1em;
}
.scardItem2{
    width: calc(100% - 425.533px - 20.25px);
    border-radius: 10px;
    background-image: url('../img//web/scard.jpg');
    background-size: cover;
    background-position: center;
    height: 277.47px;
}


















.scardDesignArea{
    background-color: var(--BG5);
}
.scardDesignArea > .inner{
    padding: 85.5px 0px;
}
.scardDesignBox{
    width: 990px;
    margin: 0 auto;
    padding: 85.5px 63px;
    background-color: var(--areaBoxBG);
    border-radius: 16px;
}
.scardDesignCaption{
    font-size: 3em;
    margin-bottom: 20.25px;
}
.scardDesignFlex{
    display: flex;
    justify-content: space-between;
}
.scardDesignItem{
    width: 193.5px;
}
.scardDesignItemImage{
    width: 100%;
    height: 119.58px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 20.25px;
}
.scardDesignItemCaption{
    font-size: 1.45em;
    font-weight: 400;
    margin-bottom: 10.25px;
}
.scardDesignItemSummary{
    font-size: 1.1em;
}