@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;500;900&display=swap');


body{
    
    background: #ffebee url("../image/jobsbg.png");
    background-repeat: repeat;
    background-position: 1;
    background-size: 50px;
}

#pageWrapper{
    
    position:relative;
    width:90%;
    max-width:751px;
    
    margin-left:auto;
    margin-right:auto;

    /* background-color: rgba(0,0,0,0.2); */
}

#headButton{
    position:sticky;
    top:1rem;
    left: 100%;
    margin-right:.5rem;
    width: 6rem;
    height:2rem;
    background-color:#ec8080;
    border-width:0 0 0.5rem 0;
    border-style: solid;
    border-color:#d60000;


    border-radius: .2rem;;
    color:white;
    text-align: center;
    z-index: 960;
}

#headButton:hover{
    cursor: pointer;
    background-color:#ffb2b2;
    border-color: #ec8080;
}

#pageTitle{
    text-align: center;
    font-size: 1.2rem;
    font-weight: 300;
    padding:0;
    padding-top:1rem;
    margin:0;
}

#pageTitleBig{
    font-family: 'Gochi Hand', cursive;
    text-align: center;
    font-size: 5rem;
    letter-spacing: .5rem;
    padding:0;
    margin:0;
    margin-top:-.5rem;
    padding-bottom:2rem;
}

.jobsTitleFont{
    font-family: 'Gochi Hand', cursive;
    font-size:2.2rem;
}

.fontsizeLarge{
    font-size:1.2rem;
}

.article{
    
    position:relative;
    max-width:751px;
    text-align: center;
    padding-bottom: .2rem;
    margin-left:auto;
    margin-right:auto;
}

.dayRoutine{
}

.recruitment{
    color: #d60000;
    text-decoration: underline;
}

#receptable{

}

#ribbon{
    position:relative;
    width:100%;
    max-width: 751px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    
}

#verticalRibbonCatchCopy{
    font-family: 'Gochi Hand', cursive;
    position: absolute;
    width:10rem;
    top:.2rem;
    left:0rem;
    text-align:center;
    font-size:3rem;
    color:#F0F0F0;
    z-index: 501;
}



#vrdrWrapper{
    position:relative;
    display: table;
    width: 10rem;
    height: 4rem;
}

#vrdrRectangle{
    top:0;
    position: absolute;
    width:10rem;
    height: 4rem;
    background-color: #d60000;
    z-index:500;
}

#vrdrLeftTriangle{
    position: absolute;
    transform-origin: left bottom;
    top:3rem;
    left:0;
    border-top: 2rem solid #d60000;
    border-left:  0rem solid transparent;
    border-right: 10rem solid transparent;
    z-index:500;
}

#vrdrRightTriangle{    
    position: absolute;
    top:3rem;
    right:0;
    border-top: 2rem solid #d60000;
    border-left:  10rem solid transparent;
    border-right: 0rem solid transparent;
    z-index:500;
}

#vrdrBehindTriangle{
    position:absolute;
    left:10rem;
    border-bottom: 2rem solid #660606;
    border-left:  0rem solid transparent;
    border-right: 1rem solid transparent;
    z-index: 300;
}

.vrdrDot{
    position:absolute;
    width:10rem;
    height:.5rem;
    background-color: transparent;
    background-image:
        radial-gradient(#F0F0F0 30%, transparent 30%);
    background-size:.5rem;
    z-index:501;
}



#horizontalRibbonRed{
    top:1rem;
    position: absolute;
    left:10rem;
    width:100%;
    min-height:2rem;
    background-color:#ec8080;
    z-index:400;
}

#HorizontalRibbonCatchCopy{
    position:absolute;
    color:#FDFDFD;
    letter-spacing: .1rem;
    left:0;
}

.gridList{
    display:grid;
    text-align:left;
    grid-template-columns: 1fr;
    
}

.cloudBoxWrapper{
    margin-top:5rem;
    position:relative;
    width:80%;
    min-height:9rem;
    max-width: 751px;
    max-height: 500px;
    min-width:400px;
}

.cloudBox{
    position:absolute;
    left:50%;
    transform:translate(-50%);
    width:80%;
    height:100%;
    z-index:-1;
    background: white;
    
}

.cloudBox .cloudColumn:nth-Child(2){
    position:absolute;
    transform-origin: center center;
    transform:
        rotate(180deg)
        ;
    top:120%;
}

.cloudBox .cloudColumn:nth-Child(3){
    position:absolute;
    top:25%;
}



.cloudColumn{
    width: 100%;
}

.cloudColumn :nth-child(1n){
    position:absolute;
    width:25%;
    aspect-ratio: 1/1;
    top:0%;
    left:0%;
    border-radius: 50%;
    background-color: white;
}

.cloudColumn :nth-child(1n)::after{
    content:"";
    position:absolute;
    width:120%;
    aspect-ratio: 1/1;
    top:-10%;
    left:-10%;
    border-radius: 50%;
    z-index: -1;
    background-color: #b94047;
}

.cloudColumn :nth-child(1){
    top:-10%;
    left:-12.5%; }
.cloudColumn :nth-child(2){
    top:-25%;
    left:5%; }
.cloudColumn :nth-child(3){
    top:-35%;
    left:25%; }
.cloudColumn :nth-child(4){
    top:-30%;
    left:45%; }
.cloudColumn :nth-child(5){
    top:-20%;
    left:65%; }
.cloudColumn :nth-child(6){
    top:-10%;
    left:80%; }

.cloudBg{
    width: 100%;
    height: 100%;
    position:absolute;
    left:0;
    top:0;
    background:white;
}

.innerCloud{
    position:absolute;
    width:80%;
    min-height:2rem;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index: 100;
    /* background-color: white; */
    background-color: transparent;
    color:rgb(255, 132, 17);
}

.redCircle{
    font-family: 'Gochi Hand', cursive;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size:2rem;
    height:1.5rem;
    width:1.5rem;
    margin:auto;
    background-color:#d60000;
    color:white;
    border-radius: 50%;
    aspect-ratio: 1/1;
    
}

.divWrapper{
    /* display:inline-block; */
}

.tgbImageWrapper{
    margin-top:2rem;
}

/* tgb = three Good Point */
.tgpTopImage{
    width:32%;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.threePointTitle{
    font-size:1.2rem;
    color:#b94047;
    font-weight: 900;
    padding-bottom:.7rem;
}

.threeGoodPoint{
    line-height:1.5rem;
    font-weight: 300;
    width:100%;
    height:100%;
    margin-bottom:3rem;
    margin-left:auto;
    margin-right:auto;
    max-width: 400px;
}

.catchImageWrapper{
    position:relative;
    max-width: 100%;
}

.catchImageLeft, .catchImageRight{
    position:absolute;
    width:25%;
    bottom:100%;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.catchImageLeft{
    left:-15%;
}

.catchImageRight{
    right:-15%;
}


#jobs_loop{
    z-index: 1;
    margin-top:4rem;
    position:relative;
    width:60vw;
    max-width:300px;
    aspect-ratio: 1/1;
    margin-left:auto;
    margin-right:auto;
    font-family: "Zen Maru Gothic";
    font-weight: 300;
}

.circleWrapper{
    position:absolute;
    width:40%;
    height:70%;
    left:50%;
    top:50%;
    transform-origin: center bottom;
    transform:
        translate(-50%, -100%)
        ;
    z-index: 61;
}

#jobs_loop .circleWrapper.cclTop{
    transform:
    translate(-50%, -100%)
    rotate(0deg)
    ;
    
}

#jobs_loop .circleWrapper.cclLeft{
    transform:
    translate(-50%, -100%)
    rotate(120deg)
    ;
}
#jobs_loop .circleWrapper.cclLeft img{
    transform-origin: middle middle;
    transform:
        translate(-50%, -50%)
        rotate(-120deg);
}


#jobs_loop .circleWrapper.cclRight{
    transform:
    translate(-50%, -100%)
    rotate(240deg)
    ;
}

#jobs_loop .circleWrapper.cclRight img{
    transform-origin: middle cclRight;
    transform:
        translate(-50%, -50%)
        rotate(-240deg);
}

.circle{
    position:absolute;
    width:100%;
    aspect-ratio: 1/1;
    border-radius:50%;
    background-color:#fff2b7;
    box-shadow: 0 0 0 .2rem #660606;
    overflow: hidden;
}

.circle img{
    position:absolute;
    left:50%;
    top:50%;
    transform-origin: center center;
    transform: translate(-45%, -45%);
    max-width: 65%;
    aspect-ratio: 1/1;
}

.curvedRectangle{
    content:"";
    position:absolute;
    width:85%;
    aspect-ratio: 1/1;
    background-color: transparent;
    left: 50%;
    top: 50%;
    border-left     :2em solid transparent;
    border-top      :2em solid green;
    border-right    :2em solid transparent;
    border-bottom   :2em solid transparent;
    border-radius: 50% 50% 50% 50%;
    transform-origin: center center;
    z-index:60;
}

#jobs_loop .curvedRectangle.cclGreenBack{
    transform:
    translate(-50%, -50%)
    rotate(310deg)
    ;
    background-color: rgba(0, 255, 0, 0.3);
    border:none;
}

#jobs_loop .curvedRectangle.crYellow{
    transform:
        translate(-50%, -50%)
        rotate(-45deg)
        ;

        border-top: 2em solid #ffb300;
}

#jobs_loop .curvedRectangle.crOrange{
    transform:
        translate(-50%, -50%)
        rotate(-165deg)
        ;

        border-top: 2em solid #ff5722;
}

#jobs_loop .curvedRectangle.crBrown{
    transform:
        translate(-50%, -50%)
        rotate(-285deg)
        ;

        border-top: 2em solid #A04940;
}

.curvedRectangleArrowWrapper{
    position:absolute;
    transform-origin: 100% 100%;
    left:50%;
    top:50%;
    transform-origin: center bottom;
    transform:
        translate(-50%, -100%)
        rotate(0deg)
        ;
    background-color: transparent;
    height:42%;
    width:2rem;
    z-index: 600;
}

.curvedRectangleArrow{
    position:absolute;
    width:0;
    height:0;
    left: 50%;
    top:-2em;
    border-style: solid;
    border-width: 2rem;
    border-color: transparent transparent yellow transparent;
    z-index: 62;
    transform-origin: center center;
    /* background-color: green; */
}

#jobs_loop .curvedRectangleArrowWrapper.craYellow{
    transform:
        translate(-50%, -100%)
        rotate(-92deg)
        ;
}

#jobs_loop .curvedRectangleArrowWrapper.craOrange{
    transform:
        translate(-50%, -100%)
        rotate(-212deg)
        ;
}

#jobs_loop .curvedRectangleArrowWrapper.craBrown{
    transform:
        translate(-50%, -100%)
        rotate(-332deg)
        ;
}

#jobs_loop .curvedRectangleArrow.craYellow{
    transform: 
        translate(-75%, -25%)
        rotate(-90deg)
    ;
    border-color: transparent transparent #ffb300 transparent;
}

#jobs_loop .curvedRectangleArrow.craOrange{
    transform: 
        translate(-75%, -25%)
        rotate(-90deg)
    ;
    border-color: transparent transparent #ff5722 transparent;

}

#jobs_loop .curvedRectangleArrow.craBrown{
    transform: 
        translate(-75%, -25%)
        rotate(-90deg)
    ;
    border-color: transparent transparent #A04940 transparent;
    
}

.curvedRectangleText{
    position: absolute;
    /* background-color: rgba(80, 194, 86, 0.438); */
    color: white;
    transform-origin: 50% 100%;
    left: 50%;
    bottom: 50%;
    height: 52%;
    width:100%;
    z-index: 65;
    transform: 
        translate(-50%, 0%) 
        rotate(0deg)
        ;

    font-weight: 900;

}

#jobs_loop .curvedRectangleText.cratTop{
    
    transform: 
        translate(-50%, 0%) 
        rotate(-58deg)
        ;
}

#jobs_loop .curvedRectangleText.cratLeft{
    
    transform-origin: 50% -100%;
    transform: 
        translate(-50%, 180%) 
        rotate(3deg)
        ;
        height:55%;
}

#jobs_loop .curvedRectangleText.cratRight{
    transform: 
        translate(-50%, 0%) 
        rotate(65deg)
        ;
}

#loopCenterText{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    color:#b94047;
    font-size:1.1rem;
    font-weight: 500;
}

.loopText{
    font-size:1rem;
    text-decoration: underline;
    color: #b94047;
}

#loopLeftText{
    position:absolute;
    left:-20%;
    bottom:-20%;
}

#loopRightText{
    position:absolute;
    right:-20%;
    bottom:-20%;
}

.octagonBalloonWrapper{
    position:relative;
    height:4rem;
    max-width: 32rem;
    left:50%;
    transform:translate(-50%);
    margin-top:8vh;
}

.octagonBalloon{
    
    position:absolute;
    left:50%;
    transform:translate(-50%);
    content: "";
    height:4rem;
    width:20rem;
    background-color: white;
    padding:0;
    margin:0;
    z-index:65;
}

.octagonBalloon::before{
    content:"";
    position:absolute;
    background-color: transparent;
    height:2.5rem;
    width:0rem;
    border-style:solid;
    border-width: .8rem 2.1rem .8rem 0rem;
    border-color: transparent white transparent transparent;
    /* border-color:yellow white red pink; */
    top:50%;
    transform:translate(0%, -50%);
    left:-2rem;
}

.octagonBalloon::after{
    content:"";
    position:absolute;
    background-color: transparent;
    height:2.5rem;
    width:0rem;
    border-style:solid;
    border-width: .8rem 0rem .8rem 2.1rem;
    border-color: transparent  transparent transparent white;
    /* border-color:yellow white red pink; */
    top:50%;
    transform:translate(0%, -50%);
    right:-2rem;
}


.octaShadow{
    position:absolute;
    left:51%;
    top:5%;
    transform:translate(-50%);
    content: "";
    height:4rem;
    width:20rem;
    background-color: rgba(0,0,0,0.2);
    padding:0;
    margin:0;
    z-index:63;
    filter:blur(1rem);
}

.octaShadow::before{
    content:"";
    position:absolute;
    background-color: transparent;
    height:2.5rem;
    width:0rem;
    border-style:solid;
    border-width: .8rem 2rem .8rem 0rem;
    border-color: transparent rgba(0,0,0,0.2) transparent transparent;
    /* border-color:yellow white red pink; */
    top:50%;
    transform:translate(0%, -50%);
    left:-2rem;
}

.octaShadow::after{
    content:"";
    position:absolute;
    background-color: transparent;
    height:2.5rem;
    width:0rem;
    border-style:solid;
    border-width: .8rem 0rem .8rem 2rem;
    border-color: transparent  transparent transparent rgba(0,0,0,0.2);
    /* border-color:yellow white red pink; */
    top:50%;
    transform:translate(0%, -50%);
    right:-2rem;
}

.octagonBalloonTextBox{
    position:absolute;
    text-align: center;
    width:100%;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}


.timeFlagWrapper{
    position:relative;
    z-index: 80;
}

.tfPoleTopBall{
    position:absolute;
    left:0;
    top:0;
    background-color:#ffb300;
    Height:1rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border-style: solid;
    border-color:#464646;
    border-width:0.16rem;
}

.tfPole{
    position:absolute;
    left:0.516rem;
    top:1.166rem;
    height:4rem;
    border-style: solid;
    border-color:#464646;
    border-width:.133rem;
    z-index:75;
}

.tfFlag{
    position:absolute;
    left:0.516rem;
    top:1.33rem;
    height:1.66rem;
    width:6.66rem;
    border-style: solid;
    border-color:#464646;
    border-width:.133rem 0 .133rem .144rem;
    background-color:#ff5722;
    z-index:74;
}

.tfFlagEndTop{
    position:absolute;
    height:1.66rem;
    left:7rem;
    top:1.466rem;
    background-color: transparent;
    border-style: solid;
    border-color:#ff5722 transparent transparent transparent;
    border-width:1.66rem 1.66rem 0vw 0vw;
    
}

.tfFlagEndTop::after{
    content:"";
    position:absolute;
    left:.266rem;
    top:-1.77rem;
    height:1.66;
    background-color: transparent;
    border-style: solid;
    border-color:#464646 transparent transparent transparent;
    border-width:1.66rem 1.66rem 0rem 0rem;
    z-index: -1;
}

.tfFlagEndBottom{
    position:absolute;
    height:0rem;
    left:7rem;
    top:1.5rem;
    background-color: transparent;
    border-style: solid;
    border-color: transparent transparent #ff5722 transparent ;
    border-width:0rem 1.66rem 1.66rem 0rem;
    
    
}

.tfFlagEndBottom::after{
    content:"";
    position:absolute;
    left:.266rem;    
    top:-1.56rem;
    height:1.66rem;
    background-color: transparent;
    border-style: solid;
    border-color:transparent transparent #464646 transparent;
    border-width:0rem 1.66rem 1.66rem 0rem;
    z-index: -1;
}

.tfFlagTextBox{
    font-size:.93rem;
    position:absolute;
    left:1rem;
    top:1.5rem;
    color:white;
    white-space: nowrap;
    z-index: 76;
}

.tfLeft{
    position:absolute;
    left:2rem;
    top:-1.66rem;
    transform:rotate(-15deg);
}

.tfRight{
    position:absolute;
    right:8.66rem;
    top:-2.66rem;
    transform:rotate(15deg);
}

.smallText, .smallTextCenter{
    padding-top:-.33rem;
    font-size:.8rem;
    line-height: .33rem;
}

.smallTextCenter{
    position:relative;
    display:inline-block;
    left:50%;
    transform:translate(-50%);
}

.cloverTitle{
    position:relative;
    margin-left:1.66rem;
    max-width:100%;
    text-align: left;
    padding-top:.33rem;
}

.cloverLeafWrapper{
    position:relative;
    display:inline-block;
    min-width: 1.2rem;
    left:0;
    height:2rem;
    transform:translate(0, 15%);
    aspect-ratio: 1/1;
}

.cloverLeaf{
    position:absolute;
    height:55%;
    aspect-ratio: 1/1;
}

.cloverLeaf::before,
.cloverLeaf::after{
    content: "";
    width:50%;
    height:80%;
    background-color: #66bb6a;
    border-radius: 45% 45% 0 0;
    display:block;
    position:absolute;
}

.cloverLeaf::before{
    transform:rotate(-45deg);
    left:14%;
}

.cloverLeaf::after{
    transform:rotate(45deg);
    right:14%;
}

/* ４つのハートマーク（cloverlef)にnthchildで命令だしてクローバーのかたちをつくる */

.cloverLeafWrapper .cloverLeaf:nth-child(1){
    left:50%;
    transform:translate(-50%);
}
.cloverLeafWrapper .cloverLeaf:nth-child(2){
    right:0;
    top:50%;
    transform:translate(0%, -50%)
        rotate(90deg);
}
.cloverLeafWrapper .cloverLeaf:nth-child(3){
    left:50%;
    bottom:0;
    transform:translate(-50%)
        rotate(180deg);
}
.cloverLeafWrapper .cloverLeaf:nth-child(4){
    left:0;
    top:50%;
    transform:translate(0%, -50%)
        rotate(-90deg);
}

.cloverText{
    position:absolute;
    left:2rem;
    top:50%;
    transform:translate(0, -40%);
    font-size:1.5rem;
}

.whiteBox_pinkBorder{
    position:relative;
    left:50%;
    transform:translate(-50%);
    padding:1.66rem;
    border-style: solid;
    border-width: .1rem;
    border-color: #ff80ab;

    background-color:white;
    width:21rem;
    min-height:6.66rem;

    text-align:left;
    
    font-family: 'Kiwi Maru', serif;
    color: #b94047;
}

.black{
    color:#242424;
}

.octaImageLeft, .octaImageRight{
    position:absolute;
    aspect-ratio: 1/1;
    object-fit: contain;
    width:5rem;
    top:-1.66rem;
    z-index:75;
}

.octaImageLeft{
    left:3.33rem;
}

.octaImageRight{
    right:3.33rem;
}

/* ifm = iframeMap */
.iframeMap{
    position:relative;
    
}

.ifmMap{
    border-color: #b94047;
    border-width: 3;
    border-style: double;
}

#iframeMap{
    max-width:100%;
}

.ifmTitle{
    position:relative;
    font-size:1.2rem;
    left:50%;
    transform:translate(-50%);
}

.catchCopyWrapper{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    height:20rem;
}
.catchCopy{
    position:absolute;
    left:50%;
    line-height: 3rem;
    letter-spacing: .1rem;
    transform:translate(-50%);
    font-weight:300;
    writing-mode: vertical-rl;
    text-align: left;
}

.rainbowRed{
    color:#b94047;
}
.rainbowOrange{
    color:#ffa726;
}
.rainbowPink{
    color:#f48fb1;
}
.rainbowLightGreen{
    color:#aed581;
}
.rainbowGreen{
    color:#43a047;
}
.rainbowBlue{
    color:#4fc3f7;
}
.rainbowPurple{
    color:#3f51b5;
}

.footer{
    padding-top: 2rem;
    padding-bottom: 1rem;
    color:#444444;
    text-align: center;
    font-size:.8rem;
}

.experiment, .experiment2, .experiment3{
    content:"";
    position:absolute;

    background-color: transparent;

    border-left     :2em solid transparent;
    border-top      :2em solid green;
    border-right    :2em solid transparent;
    border-bottom   :2em solid transparent;
    border-radius: 50% 50% 50% 50%;
    transform-origin: center center;
    z-index:600;
    background-color: #3f51b5;
}

.experiment{
    left:0;
    height:200px;
    width:200px;
}
.experiment2{
    right:0;
    height:200px;
    aspect-ratio: 1/1;
    background-color: #66bb6a;
}

.experiment3{
    left:0;
    top:450px;
    width:200px;
    aspect-ratio: 1/1;
    background-color: #ff5722;
}

#flowToServe{
    width:60vw;
    max-width:751px;
    background: white;
    border-color:#FFA000;
    border-radius:2rem;
    border-width: .2rem;
    border-style: solid;
    padding:2rem;
}

.yellowBack{
    font-size: 1.2rem;
    background-color: #FFA000;
    color:white;
    border-radius:.5rem;
    padding:.5rem;
}

#flowToServe .flowOverView{
    
    text-align:left;
    border-color:#242424;
    margin-top:1rem;
    background-image:linear-gradient(180deg, rgba(0,0,0,.6) 1px, transparent 1px);
    background-size:100% 2em;
    line-height: 2em;
    padding-bottom:1rem;
}

#flowToServe .subArticle{
    display:grid;
    grid-template-columns: 3rem auto;
    padding-bottom:1rem;

}

.numberCircleWrapper{
    grid-column:1/2;
    width:3rem;
    height:3rem;
}

#flowToServe .subArticle .numberCircleWrapper{
    position:relative;
    grid-row: 1/2;
}

#flowToServe .subArticle .numberCircle::before{
    position:absolute;
    content:"";
    width:2.4rem;
    height:2.4rem;
    top:.12rem;
    left:.12rem;
    background-color: transparent;
    border-radius:50%;
    border-style:solid;
    border-width: .2rem;
    border-color: white;
}

#flowToServe .subArticle .numberCircle{
    position:absolute;
    left:0;
    width:3rem;
    height:3rem;
    background-color:#FB8C00;
    border-radius:50%;
}

#flowToServe .subArticle .numberCircle span{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -60%);
    color:white;
    font-size:1.5rem;
}

#flowToServe .subArticle .numberDottedLineWrapper{
    position:relative;
    grid-column:1/2;
    grid-row:2/3;
}
#flowToServe .subArticle .numberDottedLine{
    position:absolute;
    border-width: 0px;
    border-left-width: .3rem;
    border-style: dotted;
    border-color: transparent transparent transparent #FB8C00;
    height:85%;
    width:0;
    left:50%;
    transform:translate(-50%);
}

#flowToServe .subArticle .numberArrowHead{
    position:absolute;
    width:2rem;
    height:2rem;
    background-color: transparent;
    left:50%;
    bottom:.5rem;
    transform-origin: center center;
    transform:
        translate(-50%)
        rotate(45deg);
    
    border-color:#FB8C00;
    border-style:solid;
    border-width: .2rem;
    border-left-width: 0rem;
    border-top-width: 0rem;



}



#flowToServe .subArticle .titleWrapper{
    position:relative;
    grid-column: 2/3;
    grid-row:1/2;
}

#flowToServe .subArticle .titleWrapper .title{
    position:absolute;
    font-size:1.3rem;
    left:5%;
    top:50%;
    transform:translate(0%,-50%);
}

#flowToServe .subArticle .overView{
    padding-left:1rem;
    font-weight: 300;
    text-align: left;
    grid-column: 2/3;
    grid-row:2/3;
}

.cloverBorder{
    padding-top:1rem;
    padding-bottom:1rem;
    display:flex;
    justify-content: center;
}

.cloverBorder .cloverLeafWrapper{
    margin-left: auto;
    margin-right: auto;
    height:1rem;
}