.s2-microsoft .jb-background { padding: 100px 0px 100px 0px }
.s2-microsoft .jb-background-top { padding: 200px 0px 100px 0px }
.s2-microsoft .jb-background-bottom { padding: 100px 0px 200px 0px }



.s2-microsoft h2 {margin: 0px 0px 20px 0px; text-align: center; font-size: 48px; font-weight: 700; line-height: 1.7; }
.s2-microsoft h3 { margin: 0px 0px 0px 0px; text-align: center; font-size: 40px; font-weight: 600; }
.s2-microsoft h4 { margin: 0px 0px 50px 0px; text-align: left; font-size: 34px; font-weight: 600; }
.s2-microsoft h5 { margin: 100px 0px 50px 0px; text-align: left; font-size: 32px; font-weight: 600; }
.s2-microsoft h6 { margin: 0px 0px 60px 0px; text-align: center; font-size: 40px; font-weight: 600; }



.s2-microsoft .s2-paragraph-01 {font-size: 32px; font-weight: 600; margin-top: 100px; margin-bottom: 60px; }
.s2-microsoft .s2-paragraph-02 {font-size: 18px; font-weight: 100; margin-top: 20px; margin-bottom: 50px; text-align: center; }

.s2-microsoft .s2-paragraph-04 {font-size: 18px; font-weight: 100; margin-top: 60px; margin-bottom: 50px; text-align: left; }
.s2-microsoft .s2-paragraph-05 {font-size: 18px; font-weight: 100; margin-top: 60px; margin-bottom: 50px; text-align: center; }



.s2-microsoft .s2-paragraph-06 {font-size: 24px; font-weight: 300; margin: 20px 0px 60px 0px; text-align: center; }
.s2-microsoft .s2-paragraph-07 {font-size: 18px; font-weight: 100; margin: 20px 0px 0px 0px; text-align: center; }
.s2-microsoft .s2-paragraph-08 {font-size: 18px; font-weight: 100; margin: 20px 0px 0px 0px; text-align: center; }
.s2-microsoft .s2-paragraph-09 {font-size: 18px; font-weight: 100; margin-top: 20px; margin-bottom: 0px; text-align: center; }

.s2-microsoft .s2-grid-logo img { width: 65px; }






/* 3x1 */

.s2-microsoft .s2-grid-box-3x1-number { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; grid-column-gap: 20px; grid-row-gap: 20px; }
@media ( max-width: 767px ) {
	.s2-microsoft .s2-grid-box-3x1-number { grid-template-columns: 1fr;  grid-column-gap: 20px; grid-row-gap: 20px; }
}

.s2-microsoft .s2-grid-box-3x1-number .s2-grid-item-01 { padding: 20px 30px 45px 30px; background-color: #ffffff; border-radius: 10px; overflow-x: auto; box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border: 1px solid #eeeeee;}


.s2-microsoft .s2-grid-box-3x1-number .s2-grid-item-01:hover { background-color: #30A8FB; transition: 0.5s; }


.s2-microsoft .s2-grid-box-3x1-number .s2-grid-item-01 .s2-grid-icon { font-size: 50px; font-weight: 700; color: #30A8FB; }
.s2-microsoft .s2-grid-box-3x1-number .s2-grid-item-01 p.s2-grid-title { margin: 0px; text-align: left; font-weight: 600; font-size: 24px; }
.s2-microsoft .s2-grid-box-3x1-number .s2-grid-item-01 .s2-grid-txt { margin-top: 20px; font-weight: 200; font-size: 16px; line-height: 26px; color: #212121; }


.s2-microsoft .s2-grid-box-3x1-number .s2-grid-item-01:hover .s2-grid-icon { color: #ffffff; }
.s2-microsoft .s2-grid-box-3x1-number .s2-grid-item-01:hover p.s2-grid-title { color: #ffffff; }
.s2-microsoft .s2-grid-box-3x1-number .s2-grid-item-01:hover .s2-grid-txt { color: #ffffff; }

/* 3x1 */









/* 5x3 */

.s2-microsoft .s2-grid-box-5x3-ex-eos { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; grid-column-gap: 20px; grid-row-gap: 20px; }
@media ( max-width: 767px ) {
	.s2-microsoft .s2-grid-box-5x3-ex-eos { grid-template-columns: 1fr 1fr;  grid-column-gap: 20px; grid-row-gap: 20px; }
}

.s2-microsoft .s2-grid-box-5x3-ex-eos .s2-grid-item-01 { padding: 15px 15px 30px 15px; background-color: #ffffff; border-radius: 10px; overflow-x: auto; box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border: 1px solid #eeeeee; text-align: center; }



.s2-microsoft .s2-grid-box-5x3-ex-eos .s2-grid-item-01 p.s2-grid-title {text-align: center;}
.s2-microsoft .s2-grid-box-5x3-ex-eos .s2-grid-item-01 p.s2-grid-title img { width: 80%;  margin-top: 0px; }
.s2-microsoft .s2-grid-box-5x3-ex-eos .s2-grid-item-01 .s2-grid-txt { margin: 0px; text-align: center; font-weight: 400; font-size: 17px; }


/* 5x3 */









/* 3x2-img */

.s2-microsoft .s2-grid-box-3x2-img { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 20px; }
@media ( max-width: 767px ) {
	.s2-microsoft .s2-grid-box-3x2-img { grid-template-columns: 1fr 1fr;  grid-column-gap: 20px; grid-row-gap: 20px; }
}

.s2-microsoft .s2-grid-box-3x2-img .s2-grid-item-01 { background-color: #ffffff; border-radius: 10px; overflow-x: auto; box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border: 1px solid #eeeeee;}


.s2-microsoft .s2-grid-box-3x2-img .s2-grid-txt-group { padding: 20px; }





.s2-microsoft .s2-grid-box-3x2-img .s2-grid-item-01 .s2-grid-icon { font-size: 65px; font-weight: 700; color: #30A8FB; }
.s2-microsoft .s2-grid-box-3x2-img .s2-grid-item-01 .s2-grid-img { margin: 0px; }


.s2-microsoft .s2-grid-box-3x2-img .s2-grid-item-01 p.s2-grid-title { margin: 0px; text-align: center; font-weight: 400; font-size: 18px; }
.s2-microsoft .s2-grid-box-3x2-img .s2-grid-item-01 .s2-grid-txt { margin-top: 20px; font-weight: 200; font-size: 14px; line-height: 26px; color: #212121; }


.s2-microsoft .s2-grid-ex-se p {font-size: 20px; font-weight: 600; margin-top: 50px; color: #183C6E;}

.s2-microsoft .s2-grid-ex-se ul li { position: relative; list-style: none; font-size: 16px; font-weight: 100; }
.s2-microsoft .s2-grid-ex-se ul li::before { content: ''; position: absolute; left: -15px; top: 10px; width: 4px; height: 4px; background-color: #183C6E; border-radius: 50%; }



/* 3x2-img */














/* 3x2 */

.s2-microsoft .s2-grid-box-3x2-step { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; grid-column-gap: 20px; grid-row-gap: 20px;  margin-top: 80px; }
@media ( max-width: 767px ) {
	.s2-microsoft .s2-grid-box-3x2-step { grid-template-columns: 1fr;  grid-column-gap: 20px; grid-row-gap: 20px; }
}

.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 { padding: 20px 5px 30px 5px; background-color: #ffffff; border-radius: 10px; overflow-x: auto; box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border: 1px solid #eeeeee; text-align: center;}



.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 p.s2-grid-title {text-align: center; font-size: 18px;}
.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 p.s2-grid-title-number {text-align: center; font-size: 26px; font-weight: 600; color: #32BBF5;}




.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 .s2-grid-box-step-group { padding: 0px 30px; }

.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 .s2-grid-box-step-ul-01 { column-count: 2;
column-gap: 40px; padding-left: 20px; }
.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 .s2-grid-box-step-ul-01 li { position: relative; list-style: none; font-size: 15px; font-weight: 100;  text-align: left; break-inside: avoid; margin-bottom: 10px;}
.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 .s2-grid-box-step-ul-01 li::before { content: ''; position: absolute; left: -15px; top: 10px; width: 4px; height: 4px; background-color: #183C6E; border-radius: 50%; }




.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 .s2-grid-box-step-ul-02 li { position: relative; list-style: none; font-size: 15px; font-weight: 100;  text-align: left; }
.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 .s2-grid-box-step-ul-02 li::before { content: ''; position: absolute; left: -15px; top: 10px; width: 4px; height: 4px; background-color: #183C6E; border-radius: 50%; }




/* 3x2 */












/* 3x2 */

.s2-microsoft .s2-grid-box-3x2-next { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; grid-column-gap: 20px; grid-row-gap: 20px; }
@media ( max-width: 767px ) {
	.s2-microsoft .s2-grid-box-3x2-next { grid-template-columns: 1fr 1fr;  grid-column-gap: 20px; grid-row-gap: 20px; }
}

.s2-microsoft .s2-grid-box-3x2-next .s2-grid-item-01 { padding: 20px; background-color: #ffffff; border-radius: 10px; overflow-x: auto; box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border: 1px solid #eeeeee;     min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;}


.s2-microsoft .s2-grid-box-3x2-next .s2-grid-item-01:hover { background-color: #30A8FB; transition: 0.5s; }


.s2-microsoft .s2-grid-box-3x2-next .s2-grid-item-01 .s2-grid-icon {  margin-left: 20px; font-size: 35px; font-weight: 600; color: #30A8FB; text-align: left; }
.s2-microsoft .s2-grid-box-3x2-next .s2-grid-item-01 p.s2-grid-title { margin: 0px; text-align: center; font-weight: 600; font-size: 20px; }
.s2-microsoft .s2-grid-box-3x2-next .s2-grid-item-01 .s2-grid-txt { margin-top: 20px; font-weight: 200; font-size: 16px; line-height: 26px; color: #212121; }


.s2-microsoft .s2-grid-box-3x2-next .s2-grid-item-01:hover .s2-grid-icon { color: #ffffff; }
.s2-microsoft .s2-grid-box-3x2-next .s2-grid-item-01:hover p.s2-grid-title { color: #ffffff; }
.s2-microsoft .s2-grid-box-3x2-next .s2-grid-item-01:hover .s2-grid-txt { color: #ffffff; }

/* 3x2 */












/* 5x3 */

.s2-microsoft .s2-grid-box-5x1-ex-eos { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; grid-column-gap: 20px; grid-row-gap: 20px; }
@media ( max-width: 767px ) {
	.s2-microsoft .s2-grid-box-5x1-ex-eos { grid-template-columns: 1fr 1fr;  grid-column-gap: 20px; grid-row-gap: 20px; }
}

.s2-microsoft .s2-grid-box-5x1-ex-eos .s2-grid-item-01 { padding: 15px 15px 15px 15px; background-color: #ffffff; border-radius: 10px; overflow-x: auto; box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border: 1px solid #eeeeee; text-align: center; }



.s2-microsoft .s2-grid-box-5x1-ex-eos .s2-grid-item-01 p.s2-grid-title { }
.s2-microsoft .s2-grid-box-5x1-ex-eos .s2-grid-item-01 p.s2-grid-title img { width: 85%;  margin-top: 0px; }
.s2-microsoft .s2-grid-box-5x1-ex-eos .s2-grid-item-01 .s2-grid-txt-01 { margin: 0px; text-align: center; font-weight: 600; font-size: 20px; }
.s2-microsoft .s2-grid-box-5x1-ex-eos .s2-grid-item-01 .s2-grid-txt-02 { margin-top: 20px; text-align: center; font-weight: 100; font-size: 14px; }

/* 5x3 */











@media ( max-width: 1280px ) {
	.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 {padding: 20px 15px 30px 15px;}
	.s2-microsoft .s2-grid-box-3x2-next .s2-grid-item-01 p.s2-grid-title {font-size: 18px;}
.s2-microsoft .s2-grid-box-5x1-ex-eos .s2-grid-item-01 .s2-grid-txt-01 {font-size: 18px;}
.s2-microsoft .s2-grid-box-3x2-img .s2-grid-item-01 p.s2-grid-title {font-size: 16px;}
}

@media ( max-width: 1024px ) {


}

@media ( max-width: 767px ) {
	.s2-microsoft .s2-paragraph-06 {font-size: 22px;}
	.s2-microsoft .s2-paragraph-07,
	.s2-microsoft .s2-paragraph-08 {font-size: 16px;}


}


@media ( max-width: 430px ) {
	.s2-microsoft h2 {font-size: 38px;}
	.s2-microsoft h3 {font-size: 30px;}
	.s2-microsoft .s2-paragraph-06 {font-size: 20px;}
	.s2-microsoft .s2-paragraph-07,
	.s2-microsoft .s2-paragraph-08 {font-size: 15px;}
	.s2-microsoft .s2-paragraph-02,
	.s2-microsoft .s2-paragraph-09 {font-size: 16px;}
	.s2-microsoft .s2-grid-box-3x1-number .s2-grid-item-01 .s2-grid-icon {font-size: 45px;}
	.s2-microsoft .s2-grid-box-3x1-number .s2-grid-item-01 p.s2-grid-title {font-size: 22px;}
	.s2-microsoft .s2-grid-box-5x3-ex-eos .s2-grid-item-01 .s2-grid-txt,
	.s2-microsoft .s2-grid-box-3x2-img .s2-grid-item-01 p.s2-grid-title {font-size: 15px;}
	.s2-microsoft .s2-grid-box-3x2-step .s2-grid-item-01 .s2-grid-box-step-ul-01 li {font-size: 14px;}
	.s2-microsoft .s2-grid-box-3x2-img,
	.s2-microsoft .s2-grid-box-3x2-next,
	.s2-microsoft .s2-grid-box-5x1-ex-eos {
        grid-template-columns: 1fr;
    }
.s2-microsoft .s2-grid-box-5x1-ex-eos .s2-grid-item-01 p.s2-grid-title img {width: 50%;}
}