html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background-color: #FCFCF7;
}

@media screen and (max-width: 800px) {
    :root {
        --scale-factor: 0.8px;
          }

    img[src^="name-jp.svg"] {
        width: calc(var(--scale-factor) * 52);
    }
    img[src^="name-en.svg"] {
        width: calc(var(--scale-factor) * 149);
        margin-left: auto;
        display: block;
    }
    img[src^="story.svg"] {
        width: calc(var(--scale-factor) * 225);
    }
    img[src^="description.svg"] {
        content: url("description-mobile.svg");
        width: calc(var(--scale-factor) * 380 * 1.12085);
    }
    img[src^="members.svg"] {
        width: calc(var(--scale-factor) * 173);
    }
    img[src^="contact.svg"] {
        width: calc(var(--scale-factor) * 181);
    }
    img[src^="locations"] {
        width: calc(var(--scale-factor) * 169);
    }
    img[src^="rights.svg"] {
        width: calc(var(--scale-factor) * 414);
    }

    .outer
    {
        flex: 1 1 auto;
    }
    body
    {
        min-height: 98vh;
        display: flex;
        flex-direction: column;
        text-align: left;
    }
    .container {  display: grid;
                  grid-template-columns: 1fr;
                  grid-template-rows: 0.3fr 0.1fr 0.5fr 0.15fr 0.1fr 0.2fr 0.05fr;
                  gap: 0px 0px;
                  grid-auto-flow: row;
                  grid-template-areas:
                      "name"
                      "story"
                      "description"
                      "members"
                      "contact"
                      "locations"
                      "rights";
                  padding-left:20;
               }

    .name {  display: grid;
             grid-template-columns: 1fr 1fr;
             grid-template-rows: 1fr;
             gap: 0px 0px;
             grid-auto-flow: row;
             grid-template-areas:
                 "name-jp name-en-mobile";
             grid-area: name;
             padding-top: 28px;
          }

    .name-jp { grid-area: name-jp; }

    .name-en-mobile { grid-area: name-en-mobile;
                      padding-right:20;}
    .name-en { grid-area: name-en;
               display: None;}

    .story { grid-area: story;
             padding-top: calc(max(4vh, 30px));
             text-align: left;
           }

    .description { grid-area: description;
                   padding-top: calc(max(4vh, 30px));
                 }

    .members { grid-area: members;
               padding-top: calc(max(4vh, 30px));
             }

    .contact { grid-area: contact;
               padding-top: 4vh;}

    .locations { grid-area: locations;
                 line-height: 8px;
                 padding-top: calc(max(4vh, 30px));
               }

    .rights { grid-area: rights;
              display: None;
            }

    .rights-mobile {
              padding-bottom: 2vh;
              padding-left:20;
              padding-top:2vh;
            }
}
@media screen and (min-width: 800px)
{
    :root {--scale-factor: 0.70145px;
          }

    img[src^="name-jp.svg"] {
        width: calc(var(--scale-factor) * 52);
    }
    img[src^="name-en.svg"] {
        width: calc(var(--scale-factor) * 149);
        /* margin-left: auto; */
        /* display: block; */
    }
    img[src^="story.svg"] {
        width: calc(var(--scale-factor) * 225);
    }
    img[src^="description.svg"] {
        width: calc(var(--scale-factor) * 579);
    }
    img[src^="members.svg"] {
        width: calc(var(--scale-factor) * 173);
    }
    img[src^="contact.svg"] {
        width: calc(var(--scale-factor) * 181);
    }
    img[src^="locations.svg"] {
        width: calc(var(--scale-factor) * 169);
    }
    img[src^="rights.svg"] {
        width: calc(var(--scale-factor) * 414);
    }



    /* img[src^="name-jp.svg"] { */
    /*     /\* width: calc(var(--scale-factor) * 32.9px); *\/ */
    /*     width: calc(var(--scale-factor) * 52px); */
    /* } */
    /* img[src^="name-en.svg"] { */
    /*     width: calc(var(--scale-factor) * 104.3px); */
    /*     margin-left: 0; */
    /*     display: block; */
    /* } */
    /* img[src^="story.svg"] { */
    /*     width: calc(var(--scale-factor) * 157.5px); */
    /* } */
    /* img[src^="description.svg"] { */
    /*     width: calc(var(--scale-factor) * 405.3px); */
    /* } */
    /* img[src^="members.svg"] { */
    /*     width: calc(var(--scale-factor) * 121.1px); */
    /* } */
    /* img[src^="contact.svg"] { */
    /*     width: calc(var(--scale-factor) * 126.7px); */
    /* } */
    /* img[src^="tokyo.svg"] { */
    /*     width: calc(var(--scale-factor) * 88.9px); */
    /* } */
    /* img[src^="losangeles.svg"] { */
    /*     width: calc(var(--scale-factor) * 118.3px); */
    /* } */
    /* img[src^="rights.svg"] { */
    /*     width: calc(var(--scale-factor) * 289.8px); */
    /* } */

.container {  display: grid;
  grid-template-columns: 1.0fr 1.0fr;
  /* grid-template-rows: 0.38fr 0.28fr 1.53fr 2.39fr 0.4fr; */
  grid-template-rows:  auto 0.28fr 0.6fr 2.39fr 0.2fr;
  gap: 0px 0px;
  grid-auto-flow: col;
  grid-template-areas:
    "name blank"
    "name-en story"
    "b description"
    "locations members"
    "rights contact";
  max-width: 1600px;
}

    .name {  display: grid;
             grid-template-columns: 1fr 1fr;
             grid-template-rows: 1fr;
             gap: 0px 0px;
             grid-auto-flow: row;
             grid-template-areas:
                 "name-jp name-en-mobile";
             grid-area: name;
          }

.name-jp { grid-area: name-jp;
           padding-top: 50px;
           padding-left: 60px;
         }

.name-en-mobile { grid-area: name-en-mobile;
                  display: None;
         }

.name-en { grid-area: name-en;
           /* padding-top: 173.1px; */
           display: block;
           padding-top: 8vh;
           padding-left: 60px;
           padding-bottom:10px;
         }

.story { grid-area: story;
         /* padding-top: 173.1px; */
           padding-top: 8vh;
           padding-left: 50px;
       }

.description { grid-area: description;
               padding-top: min(max(2.5vh, 10px), 50px);
               padding-left: 50px;
             }

.locations { grid-area: locations;
             line-height: 10px;
             padding-top: min(max(20px, 3vh), 60px);
             padding-left: 60px;
             padding-bottom: 60px;
           }

.members { grid-area: members;
           padding-top: min(max(20px, 3vh), 60px);
           padding-left: 50px;
           padding-bottom: 30px;
         }

.rights { grid-area: rights;
          padding-left: 60px;
          /* position: relative; */
          /* bottom: None; */
          /* padding-top:  */0;
          padding-bottom:20px;
        }

.rights-mobile {
    display: None;
}

.contact { grid-area: contact;
           padding-left: 50px;
         }

.blank { grid-area: blank; }

.b { grid-area: b; }


.container {
  height: 100%;
  margin: 0;
}

}