@media screen and (min-width:769px) {

html
{
    background-color:rgb(233, 84, 5);
    color: aliceblue;
    overflow-x: hidden;
    font-family: "agency-fb", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

.container {  
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 0.5fr 3fr 0.5fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-template-areas:
        "header header header"
        ". topbanner ."
        "S1 S1 S1"
        "S2 S2 S2"
        "S3 S3 S3"
        "footer footer footer"
}

.header { 
    grid-area: header; 
    position: fixed;
    height: 65px;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: rgba(233, 84, 5, 0);
}

.toplogo {
    position: fixed;
    top: 1vw;
    left: 2vw;
    width: 20%;
}

.topbanner {
    position: relative;
    grid-area: topbanner;
    text-align: center;
    padding: 15vw;
}

.topbannerlogo {
    width: 80%;
}

.companyinfo {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 3vw;
}

.title {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 3vw;
    color: aliceblue;
}

.subtitle {
    /* font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700; */
    margin-top: 6vw;
    margin-bottom: 2vw;
    font-size: 5vw;
    background-color: aliceblue;
    color: rgb(111, 185, 44);
    padding-left: 3vw;
    border-radius: 1vw;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.vi {
    text-align: right;
    padding-right: 3vw;
}

.sentence {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vw;
    color: aliceblue;
}

.S1 {  
    background-color: rgb(0, 152, 216);
    position: relative;
    grid-area: S1;
    display: grid;
    grid-template-columns: 0.5fr 3fr 0.5fr;
    grid-template-rows: auto;
    gap: 0;
    grid-auto-flow: row;
    grid-template-areas:
    "S1_wrapperA S1_wrapperA S1_wrapperA"
    ". S1_wrapperB ."
}

.S1_wrapperA {
    grid-area: S1_wrapperA;
    text-align: center;
    padding-top: 3vw;
}

.S1_wrapperB {
    grid-area: S1_wrapperB;
    padding-bottom: 7vw;
}

.S2 {  
    background-color: rgb(111, 185, 44);
    position: relative;
    grid-area: S2;
    display: grid;
    grid-template-columns: 1.5fr 3fr 3fr 3fr 1.5fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-template-areas:
    ". S2_top S2_top S2_top ."
    ". mission mission . ."
    ". . vision vision ."
    ". vision_wrapper vision_wrapper vision_wrapper ."
}

.S2_top {
    position: relative;
    grid-area: S2_top;
}

.S2_title {
    padding-top: 3vw;
    text-align: center;
}

.mission {
    position: relative;
    grid-area: mission;
}

.vision {
    position: relative;
    grid-area: vision;
}

.vision_wrapper {
    position: relative;
    grid-area: vision_wrapper;
    margin-top: 5vw;
    margin-bottom: 10vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 1.5vw ;
    grid-auto-flow: row;
    grid-template-areas:
    "grow genuine global"
}

.grow {
    position: relative;
    grid-area: grow;
    background-color: aliceblue;
    border-radius: 1vw;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 0.5fr 1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "grow_title"
    "grow_sentence";
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.grow_title {
    background-color: rgb(153, 212, 51);
    border-radius: 1vw 1vw 0 0;
    /* padding-bottom: 6vw; */
}

.subtitle2 {
    /* font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700; */
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 3.5vw;
    margin: 0;
    padding-top: 3vw;
    line-height: 1;
}

.subtitle3 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    color: rgb(255, 255, 255);
    font-size: 1.6vw;
    text-align: center;
    margin: 0;
    padding-top: 2vw;
}

.subtitle1 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    color: rgb(255, 255, 255);
    font-size: 1.6vw;
    text-align: center;
    margin: 0;
    padding-top: 5.8vw;
    padding-bottom: 4vw;
}

.sentence2 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 1.5vw;
    color: rgb(55, 55, 55);
    margin-top: 3vw;
    padding-left: 2vw;
    padding-right: 2vw;
}

.genuine {
    position: relative;
    grid-area: genuine;
    background-color: aliceblue;
    border-radius: 1vw;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 0.5fr 1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "genuine_title"
    "genuine_sentence";
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.genuine_title {
    background-color: rgb(153, 212, 51);
    border-radius: 1vw 1vw 0 0;
    padding-bottom: 3vw;
}

.global {
    position: relative;
    grid-area: global;
    background-color: aliceblue;
    border-radius: 1vw;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 0.5fr 1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "global_title"
    "global_sentence";
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.global_title {
    background-color: rgb(153, 212, 51);
    border-radius: 1vw 1vw 0 0;
    padding-bottom: 3vw;
}

.S3 {  
    position: relative;
    grid-area: S3;
    background-color: rgb(235, 190, 0);
    padding: 10vw;
    display: grid;
    grid-template-columns:2fr 10fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    gap: 2vw;
    grid-template-areas:
    "company_title company_sentence"
    "est_title est_sentence"
    "address_title address_sentence"
    "business_title business_sentence"
    "member_title member_sentence"

}

.c_title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 1.5vw;
    color: rgb(235, 190, 0);
    margin: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.c_sentence {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2vw;
    text-align: right;
    color: rgb(235, 190, 0);
    margin: 2vw;
}

.company_title {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: company_title;
    position: relative;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.company_sentence {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: company_sentence;
    position: relative;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.est_title {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: est_title;
    position: relative;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.est_sentence {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: est_sentence;
    position: relative;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.address_title {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: address_title;
    position: relative;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.address_sentence {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: address_sentence;
    position: relative;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.business_title {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: business_title;
    position: relative;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.business_sentence {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: business_sentence;
    position: relative;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.member_title {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: member_title;
    position: relative;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.member_sentence {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: member_sentence;
    position: relative;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}


.footer { 
    grid-area: footer; 
    padding-top: 5vw;
    padding-bottom: 3vw;
    background-color: gray;
}

.gatewayarch_logoL {
    width: 40vw;
    padding-left: 4vw;
}

.gatewayarch_name {
    font-size: 2.5vw;
    padding-left: 6vw;
    margin-bottom: 0;
}

.address {
    display: block;
    font-family: noto-sans;
    font-weight: 600;
    font-size: 1.5vw;
    border-bottom: 0.2vw solid aliceblue;
    width: fit-content;
    margin-top: 0;
    margin-left: 6vw;
    padding-right: 11vw;
}

a.address {
    text-decoration: none;
    color: aliceblue;
}

a.address:hover {
    color: rgb(233, 84, 5);
}

.footer_title_left {
    display: inline-block;
    font-size: 2vw;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 6vw;
}

a.menulink {
    color: aliceblue;
}

.footer_title {
    display: inline-block;
    font-size: 2vw;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 1.5vw;
}

.copyrights {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1vw;
    margin-left: 6vw;
    margin-top: 4vw;
    margin-bottom: 0;
}

}

@media screen and (max-width:768px) {

    html
{
    background-color:rgb(233, 84, 5);
    color: aliceblue;
    overflow-x: hidden;
    font-family: "agency-fb", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

.container {  
    position: absolute;
    top: 0;
    left: 0;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: 0.5fr 3fr 0.5fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-template-areas:
        "header header header"
        ". topbanner ."
        "S1 S1 S1"
        "S2 S2 S2"
        "S3 S3 S3"
        "footer footer footer"
}

.header { 
    grid-area: header; 
    position: fixed;
    height: 65px;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: rgba(233, 84, 5, 0);
}

.toplogo {
    position: fixed;
    top: 1vw;
    left: 2vw;
    width: 35%;
}

.topbanner {
    position: relative;
    grid-area: topbanner;
    text-align: center;
    padding: 15vw;
}

.topbannerlogo {
    width: 120%;
    transform: translate(-10%);
    margin-top: 7vw;
}

.companyinfo {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 4vw;
    margin-top: 0;
}

.title {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 4.5vw;
    color: aliceblue;
}

.subtitle {
    /* font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700; */
    margin-top: 6vw;
    margin-bottom: 2vw;
    font-size: 5vw;
    background-color: aliceblue;
    color: rgb(111, 185, 44);
    padding-left: 3vw;
    border-radius: 1vw;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.vi {
    text-align: right;
    padding-right: 3vw;
}

.sentence {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 3vw;
    color: aliceblue;
}

.S1 {  
    background-color: rgb(0, 152, 216);
    position: relative;
    grid-area: S1;
    display: grid;
    grid-template-columns: 0.5fr 3fr 0.5fr;
    grid-template-rows: auto;
    gap: 0;
    grid-auto-flow: row;
    grid-template-areas:
    "S1_wrapperA S1_wrapperA S1_wrapperA"
    ". S1_wrapperB ."
}

.S1_wrapperA {
    grid-area: S1_wrapperA;
    text-align: center;
    padding-top: 3vw;
}

.S1_wrapperB {
    grid-area: S1_wrapperB;
    padding-bottom: 7vw;
}

.S2 {  
    background-color: rgb(111, 185, 44);
    position: relative;
    grid-area: S2;
    display: grid;
    grid-template-columns: 1.5fr 3fr 3fr 3fr 1.5fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-template-areas:
    ". S2_top S2_top S2_top ."
    ". mission mission mission ."
    ". vision vision vision ."
    ". vision_wrapper vision_wrapper vision_wrapper ."
}

.S2_top {
    position: relative;
    grid-area: S2_top;
}

.S2_title {
    padding-top: 3vw;
    text-align: center;
}

.mission {
    position: relative;
    grid-area: mission;
}

.vision {
    position: relative;
    grid-area: vision;
}

.vision_wrapper {
    position: relative;
    grid-area: vision_wrapper;
    margin-top: 5vw;
    margin-bottom: 10vw;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 8vw ;
    grid-auto-flow: row;
    grid-template-areas:
    "grow"
    "genuine"
    "global"
}

/* .slide_wrap{
   display:-webkit-box;
   display:-ms-flexbox;
   display: flex;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
   overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
   padding:0 0 1em;
   margin:0 0 2em 0;
   scroll-behavior: smooth;
}

.slide_wrap .slide_content{
   flex: 0 0 90%;
   margin: 0 10px;
   height:100%;
}

@media screen and (max-width: 768px){
.slide-wrap .slide-content {
    flex: 0 0 88%;
    margin: 0px 5px;
    scroll-snap-align:center;
}
} */

.grow {
    position: relative;
    grid-area: grow;
    background-color: aliceblue;
    border-radius: 2vw;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 0.5fr 1.1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "grow_title"
    "grow_sentence";
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.grow_title {
    background-color: rgb(153, 212, 51);
    border-radius: 2vw 2vw 0 0;
}

.subtitle2 {
    /* font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700; */
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 6vw;
    margin: 0;
    padding-top: 3vw;
    line-height: 1;
}

.subtitle3 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    color: rgb(255, 255, 255);
    font-size: 4vw;
    text-align: center;
    margin: 0;
    padding-top: 2vw;
    padding-bottom: 2vw;
}

.subtitle1 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    color: rgb(255, 255, 255);
    font-size: 4vw;
    text-align: center;
    margin: 0;
    padding-top: 1vw;
    padding-bottom: 2vw;
}

.sentence2 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 3vw;
    color: rgb(55, 55, 55);
    margin-top: 3vw;
    padding-left: 4vw;
    padding-right: 4vw;
}

.genuine {
    position: relative;
    grid-area: genuine;
    background-color: aliceblue;
    border-radius: 2vw;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 0.5fr 1.1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "genuine_title"
    "genuine_sentence";
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.genuine_title {
    background-color: rgb(153, 212, 51);
    border-radius: 2vw 2vw 0 0;
}

.global {
    position: relative;
    grid-area: global;
    background-color: aliceblue;
    border-radius: 2vw;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 0.5fr 1.1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "global_title"
    "global_sentence";
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}

.global_title {
    background-color: rgb(153, 212, 51);
    border-radius: 2vw 2vw 0 0;
}

.S3 {  
    position: relative;
    grid-area: S3;
    background-color: rgb(235, 190, 0);
    padding: 10vw;
    display: grid;
    grid-template-columns:3fr 10fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    gap: 2vw;
    grid-template-areas:
    "company_title company_sentence"
    "est_title est_sentence"
    "address_title address_sentence"
    "business_title business_sentence"
    "member_title member_sentence"

}

.c_title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.1vw;
    color: rgb(235, 190, 0);
    margin: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.c_sentence {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-style: normal;
    text-align: right;
    color: rgb(235, 190, 0);
    margin: 2vw;
}

.company_title {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: company_title;
    position: relative;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}

.company_sentence {
    background-color: aliceblue;
    border-radius: 1vw;
    font-size: 2vw;
    grid-area: company_sentence;
    position: relative;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}

.est_title {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: est_title;
    position: relative;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}

.est_sentence {
    background-color: aliceblue;
    border-radius: 1vw;
    font-size: 2vw;
    grid-area: est_sentence;
    position: relative;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}

.address_title {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: address_title;
    position: relative;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}

.address_sentence {
    background-color: aliceblue;
    border-radius: 1vw;
    font-size: 1.7vw;
    grid-area: address_sentence;
    position: relative;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}

.business_title {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: business_title;
    position: relative;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}

.business_sentence {
    background-color: aliceblue;
    border-radius: 1vw;
    font-size: 1.2vw;
    grid-area: business_sentence;
    position: relative;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}

.member_title {
    background-color: aliceblue;
    border-radius: 1vw;
    grid-area: member_title;
    position: relative;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}

.member_sentence {
    background-color: aliceblue;
    border-radius: 1vw;
    font-size: 1.5vw;
    grid-area: member_sentence;
    position: relative;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}


.footer { 
    grid-area: footer; 
    padding-top: 5vw;
    padding-bottom: 3vw;
    background-color: gray;
    z-index: 1;
}

.gatewayarch_logoL {
    width: 40vw;
    padding-left: 4vw;
    z-index: 1;
}

.gatewayarch_name {
    font-size: 4vw;
    padding-left: 6vw;
    margin-bottom: 0.5vw;
    z-index: 1;
}

.address {
    display: block;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 2.8vw;
    border-bottom: 0.2vw solid aliceblue;
    width: fit-content;
    margin-top: 0;
    margin-left: 6vw;
    padding-right: 30vw;
    z-index: 1;
}

a.address {
    text-decoration: none;
    color: aliceblue;
}

a.address:hover {
    color: rgb(233, 84, 5);
}

.footer_title_left {
    display: inline-block;
    font-size: 4vw;
    margin-top: 1vw;
    margin-bottom: 10px;
    margin-left: 6vw;
    z-index: 1;
}

.footer_title {
    display: inline-block;
    font-size: 4vw;
    margin-top: 1vw;
    margin-bottom: 10px;
    margin-left: 1.5vw;
    z-index: 1;
}

a.menulink {
    color: aliceblue;
}

.copyrights {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
    margin-left: 6vw;
    margin-top: 4vw;
    margin-bottom: 3vw;
    z-index: 1;
}

}