@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&family=Nunito+Sans:wght@200&display=swap');

@media screen and (min-width: 794px) {
    * {
        margin: 0;
        padding: 0;
    }

    :root {
        --upperblue: #05253b;
        --darkblue: #1C3D52;
        --midblue: #3E849E;
        --blue: #51ACC5;
        --light: #66D7EB;
        --white: white;
        --gray: gray;
    }

    .page-wrapper nav:nth-child(1) {
        border-bottom: #1C3D52 0.2rem solid;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 0.9rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background-color: var(--upperblue);
    }

    .nav-logo-title {
        display: flex;
        margin-left: 0.3rem;
    }

    .page-wrapper nav:nth-child(1) li {

        align-content: right;
        padding: 30px;
        justify-content: space-between;
        display: inline-block;
    }

    .page-wrapper nav:nth-child(1) li a {

        color: var(--white);
        list-style: none;
        text-decoration: none;
        font-size: 0.9rem;
        ;
    }

    .page-wrapper {
        color: white;
        background-color: var(--darkblue);
    }

    #header {
        padding: 5rem;
        background-color: var(--upperblue);
    }

    .header-texts {
        align-content: center;
        border: #3E849E solid 0.1rem;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: auto;
        width: 30rem;
        height: 25rem;
        padding: 0.7rem;
        border-radius: 1rem;
        right: 50%;
    }

    .header-texts h1,
    h3,
    p {
        font-family: 'Nunito Sans', sans-serif;
        justify-content: space-between;
        padding: 1rem;
    }

    .header-texts h1,
    h3 {
        font-weight: 3rem;
        font-size: 1.6rem;
        color: white
    }

    .header-texts p {
        font-size: 1.2rem;
        text-align: justify;
        color: grey;
    }

    .header-texts:hover {
        /* box-shadow: 13px 10px 17px 5px rgba(1,34,53,0.69);
    -webkit-box-shadow: 13px 10px 17px 5px rgba(1,34,53,0.69);
    -moz-box-shadow: 13px 10px 17px 5px rgba(1,34,53,0.69); */
        box-shadow: 13px 10px 17px 5px rgba(255, 255, 255, 0.69);
        -webkit-box-shadow: 13px 10px 17px 5px rgba(255, 255, 255, 0.69);
        -moz-box-shadow: 13px 10px 17px 5px rgba(255, 255, 255, 0.69);
    }

    .nav-logo-title img {
        content: url('https://withpropel.com/images/globe-art.svg');
        max-width: 5rem;
        max-height: 3rem;
    }

    .content {}

    .content-first {

        margin-top: 5%;
        margin-bottom: 5%;
        padding: 1.5rem;
        font-family: 'Nunito Sans', sans-serif;
        color: grey;
        padding: 2rem;
        width: 70rem;
        height: 15rem;
        border-radius: 0.3rem;
        border: #3E849E solid 0.1rem;
        text-align: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        /* transform:rotate(90deg) */
    }

    .content-first h2 {

        color: white;

        text-align: center;

    }

    .content-first:hover {
        box-shadow: -10px 9px 17px -1px rgba(0, 0, 0, 0.69);
        -webkit-box-shadow: -10px 9px 17px -1px rgba(0, 0, 0, 0.69);
        -moz-box-shadow: -10px 9px 17px -1px rgba(0, 0, 0, 0.69);
    }

    .content-second {
        border: #3E849E solid 0.1rem;
        border-radius: 0.3rem;

        /* margin-left:5%; */
        margin-top: 5%;
        margin-bottom: 5%;
        background-color: var(--upperblue);
        color: grey;
        padding: 0.8rem;
        font-size: 1rem;
    }

    .content-second:hover h2 {
        color: var(--blue);
        text-decoration: underline;
    }

    .content-second:hover {
        color: white;

    }

    .content-second h2 {
        text-align: center;
        color: white;
        font-size: 1.6rem;
    }

    .content-aside {
        display: flex;
    }

    aside {
        padding: 3rem;
        border: var(--darkblue) solid 0.1rem;
        box-shadow: -8px 1px 0px -5px rgba(81, 172, 197, 0.61);
        -webkit-box-shadow: -8px 1px 0px -5px rgba(81, 172, 197, 0.61);
        -moz-box-shadow: -8px 1px 0px -5px rgba(81, 172, 197, 0.61);
    }

    aside ul li {
        font-style: none;
        text-decoration: none;
    }

    aside h2 {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 1.0rem;
        padding: 1rem;
        box-shadow: 1px white;
        justify-content: space-between;
        text-align: center;
    }

    aside ul li a {
        text-decoration: none;
        color: white;
        font-family: 'Nunito Sans', sans-serif;
        font-size: 0.8rem
    }

    .articles {
        padding: 3rem;
    }

    .row-first .article {
        width: 25rem;
        border: var(--upperblue) 1rem solid;
        border-radius: 1rem;
        background-color: var(--upperblue);

        justify-content: space-between;
        padding: 1rem;
    }

    .row-first .article h3,
    .row-first .article a {
        color: white;
        text-align: center;
        float: right;

    }

    .row-first .article p {
        visibility: hidden;
        color: var(--gray);

    }

    .row-first .article:hover p {
        visibility: visible;

    }

    .row-first .article:nth-child(1) img {
        max-width: 60%;
        height: auto;
        border: 1rem solid #ffffff;
        border: var(--upperblue) 0.2rem solid;
        border-radius: 1rem;
        margin: auto;
        display: block;
        -webkit-box-flex: 0;

        content: url('https://withpropel.com/images/globe-art.svg');


    }

    .row-first .article:nth-child(2) img {
        max-width: 60%;
        height: auto;
        border: 1rem solid #ffffff;
        border: var(--upperblue) 0.2rem solid;
        border-radius: 1rem;
        margin: auto;
        display: block;
        -webkit-box-flex: 0;

        content: url('https://withpropel.com/images/globe-art.svg');


    }

    .row-first .article:nth-child(3) img {
        max-width: 60%;
        height: auto;
        border: 1rem solid #ffffff;
        border: var(--upperblue) 0.2rem solid;
        border-radius: 1rem;
        margin: auto;
        display: block;
        -webkit-box-flex: 0;

        content: url('https://withpropel.com/images/globe-art.svg');


    }

    .row-first .article h3 {
        border-top: white 0.2rem solid;
    }

    .row-second td:nth-child(1) {
        border: var(--upperblue) 1rem solid;
        border-radius: 1rem;
        background-color: var(--upperblue);
        width: 25rem;
        height: 1rem;
        justify-content: space-between;
    }

    .row-second td:nth-child(2) img {
        content: url('https://withpropel.com/images/globe-art.svg');
        max-width: 60%;
        height: auto;
        border: 1rem solid #ffffff;
        border: 0.2rem solid var(--darkblue);
        border-radius: 1rem;
        margin: auto;
        display: block;

    }

    footer {
        display: flex;
        background-color: var(--gray);
        padding: 1rem;
        justify-content: space-between;

    }

    .footer-form {

        padding: 1rem;
    }

    .footer-logo {
        box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -webkit-box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -moz-box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);

        padding: 1rem;
    }

    .footer-credit {
        position: relative;
        font-size: 0.3rem;

    }


    .footer-form {
        box-shadow: -13px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -webkit-box-shadow: -13px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -moz-box-shadow: -13px 1px 0px -2px rgba(0, 0, 0, 0.72);
        box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -webkit-box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -moz-box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);
    }

    .creativity-wrapper {}

    .mini-one,
    .mini-two,
    .mini-three,
    .mini-four {
        display: flex;
        padding: 3rem;
    }

    .mini-one .mini-content,
    .mini-two .mini-content,
    .mini-three .mini-content,
    .mini-four .mini-content {
        width: 30rem;
        height: 1rem;
        border: var(--upperblue) 1rem solid;
        background-color: var(--upperblue);

        transition: height 4s, width 4s border 4s;
    }

    .mini-content p {
        visibility: hidden;
    }

    .mini-one:hover .mini-content,
    .mini-two:hover .mini-content,
    .mini-three:hover .mini-content,
    .mini-four:hover .mini-content {
        width: auto;
        height: auto;
    }

    .mini-one:hover p,
    .mini-one:hover img,
    .mini-two:hover p,
    .mini-two:hover img,
    .mini-three:hover p,
    .mini-three:hover img,
    .mini-four:hover p,
    .mini-four:hover img {
        visibility: visible;
    }

    .mini-one img,
    .mini-two img,
    .mini-three img,
    .mini-four img {

        border: var(--upperblue) 0.2rem solid;

    }

    .mini-one img {
        content: url('https://source.unsplash.com/random/160x160?car');
    }

    .mini-two img {
        content: url('https://source.unsplash.com/random/160x160?car');
    }

    .mini-three img {
        content: url('https://source.unsplash.com/random/160x160?car');
    }

    .mini-four img {
        content: url('https://source.unsplash.com/random/160x160?car');
    }

    .mini-one:hover h2,
    .mini-two:hover h2,
    .mini-three:hover h2,
    .mini-four:hover h2 {
        color: var(--blue);
    }
}





@media screen and (max-width: 794px) {
    * {
        margin: 0;
        padding: 0;
    }

    :root {
        --upperblue: #05253b;
        --darkblue: #1C3D52;
        --midblue: #3E849E;
        --blue: #51ACC5;
        --light: #66D7EB;
        --white: white;
        --gray: gray;
    }

    .page-wrapper nav:nth-child(1) {
        border-bottom: #1C3D52 0.2rem solid;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 0.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background-color: var(--upperblue);
    }

    .nav-logo-title {
        display: flex;
        margin-left: 0.1rem;
    }

    .page-wrapper nav:nth-child(1) li {

        align-content: right;
        padding: 10px;
        justify-content: space-between;
        display: inline-block;
    }

    .page-wrapper nav:nth-child(1) li a {

        color: var(--white);
        list-style: none;
        text-decoration: none;
        font-size: 0.4rem;
        ;
    }

    .page-wrapper {
        color: white;
        background-color: var(--darkblue);
    }

    #header {
        padding: 5rem;
        background-color: var(--upperblue);
    }

    .header-texts {
        align-content: center;
        border: #3E849E solid 0.1rem;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: auto;
        width: 10rem;
        height: 10rem;
        padding: 0.7rem;
        border-radius: 1rem;
        right: 50%;
    }

    .header-texts h1,
    h3,
    p {
        font-family: 'Nunito Sans', sans-serif;
        justify-content: space-between;
        padding: 0.5rem;
    }

    .header-texts h1,
    h3 {
        font-weight: 3rem;
        font-size: 0.5rem;
        color: white
    }

    .header-texts p {
        font-size: 0.4rem;
        text-align: justify;
        color: grey;
    }

    .header-texts:hover {
        /* box-shadow: 13px 10px 17px 5px rgba(1,34,53,0.69);
        -webkit-box-shadow: 13px 10px 17px 5px rgba(1,34,53,0.69);
        -moz-box-shadow: 13px 10px 17px 5px rgba(1,34,53,0.69); */
        box-shadow: 13px 10px 17px 5px rgba(255, 255, 255, 0.69);
        -webkit-box-shadow: 13px 10px 17px 5px rgba(255, 255, 255, 0.69);
        -moz-box-shadow: 13px 10px 17px 5px rgba(255, 255, 255, 0.69);
    }

    .nav-logo-title img {
        content: url('https://withpropel.com/images/globe-art.svg');
        max-width: 2rem;
        max-height: 2rem;
    }

   

    .content-first {

        margin-top: 5%;
        margin-bottom: 5%;

        font-family: 'Nunito Sans', sans-serif;
        color: grey;

        width: 18rem;
        height: auto;
        border-radius: 0.3rem;
        border: #3E849E solid 0.1rem;
        text-align: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        /* transform:rotate(90deg) */
        font-size: 0.4rem;
    }

    .content-first h2 {
        font-size: 0.5rem;
        color: white;

        text-align: center;

    }

    .content-first:hover {
        box-shadow: -10px 9px 17px -1px rgba(0, 0, 0, 0.69);
        -webkit-box-shadow: -10px 9px 17px -1px rgba(0, 0, 0, 0.69);
        -moz-box-shadow: -10px 9px 17px -1px rgba(0, 0, 0, 0.69);
    }

    .content-second {
        border: #3E849E solid 0.1rem;
        border-radius: 0.3rem;

        /* margin-left:5%; */
        margin-top: 5%;
        margin-bottom: 5%;
        background-color: var(--upperblue);
        color: grey;
        padding: 0.2rem;
        font-size: 0.4rem;
    }

    .content-second:hover h2 {
        font-size: 0.5rem;
        color: var(--blue);
        text-decoration: underline;
    }

    .content-second:hover {
        color: white;

    }

    .content-second h2 {
        font-size: 0.5rem;
        text-align: center;
        color: white;

    }

    .content-aside {
        display: flex;
    }

    aside {
        padding: 1rem;

        border: var(--darkblue) solid 0.1rem;
        box-shadow: -8px 1px 0px -5px rgba(81, 172, 197, 0.61);
        -webkit-box-shadow: -8px 1px 0px -5px rgba(81, 172, 197, 0.61);
        -moz-box-shadow: -8px 1px 0px -5px rgba(81, 172, 197, 0.61);
    }

    aside ul li {
        font-style: none;
        text-decoration: none;
    }

    aside h2 {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 0.4rem;
        padding: 0.1rem;
        box-shadow: 1px white;
        justify-content: space-between;
        text-align: center;
    }


    aside ul li a {
        text-decoration: none;
        color: white;
        font-family: 'Nunito Sans', sans-serif;
        font-size: 0.3rem;
    }

    .articles {
        padding: 0.3rem;
    }

    .row-first .article {
        width: 22rem;
        border: var(--upperblue) 1rem solid;
        border-radius: 1rem;
        background-color: var(--upperblue);

        justify-content: space-between;
     
    }

    .row-first .article h3,
    .row-first .article a {
        font-size: 0.4rem;
        color: white;
        text-align: center;
        float: right;

    }

    .row-first .article p {
        font-size: 0.3rem;
        visibility: hidden;
        color: var(--gray);

    }

    .row-first .article:hover p {
        visibility: visible;

    }

    .row-first .article:nth-child(1) img {
        max-width: 60%;
        height: auto;
        border: 1rem solid #ffffff;
        border: var(--upperblue) 0.2rem solid;
        border-radius: 1rem;
        margin: auto;
        display: block;
        -webkit-box-flex: 0;

        content: url('https://withpropel.com/images/globe-art.svg');


    }

    .row-first .article:nth-child(2) img {
        max-width: 60%;
        height: auto;
        border: 1rem solid #ffffff;
        border: var(--upperblue) 0.2rem solid;
        border-radius: 1rem;
        margin: auto;
        display: block;
        -webkit-box-flex: 0;

        content: url('https://withpropel.com/images/globe-art.svg');


    }

    .row-first .article:nth-child(3) img {
        max-width: 60%;
        height: auto;
        border: 1rem solid #ffffff;
        border: var(--upperblue) 0.2rem solid;
        border-radius: 1rem;
        margin: auto;
        display: block;
        -webkit-box-flex: 0;

        content: url('https://withpropel.com/images/globe-art.svg');


    }

    .row-first .article h3 {
        border-top: white 0.2rem solid;
    }

    .row-second td:nth-child(1) {
        font-size: 0.3rem;
        border: var(--upperblue) 1rem solid;
        border-radius: 1rem;
        background-color: var(--upperblue);
        width: 25rem;
        height: 1rem;
        justify-content: space-between;
    }

    .row-second td:nth-child(2) img {
        content: url('https://withpropel.com/images/globe-art.svg');
        max-width: 60%;
        height: auto;
        border: 1rem solid #ffffff;
        border: 0.2rem solid var(--darkblue);
        border-radius: 1rem;
        margin: auto;
        display: block;

    }

    footer {
        display: flex;
        background-color: var(--gray);
        padding: 0.1rem;
        justify-content: space-between;

    }

    .footer-form {
        font-size: 0.4rem;
        padding: 1rem;
    }

    .footer-logo {
        font-size: 0.4rem;
        box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -webkit-box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -moz-box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);

        padding: 1rem;
    }

    .footer-credit {
        position: relative;
        font-size: 0.4rem;

    }


    .footer-form {
        font-size: 0.4rem;
        box-shadow: -13px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -webkit-box-shadow: -13px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -moz-box-shadow: -13px 1px 0px -2px rgba(0, 0, 0, 0.72);
        box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -webkit-box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);
        -moz-box-shadow: 9px 1px 0px -2px rgba(0, 0, 0, 0.72);
    }

    .creativity-wrapper {}

    .mini-one,
    .mini-two,
    .mini-three,
    .mini-four {
        display: flex;
        padding: 0.3rem;
    }

    .mini-one .mini-content,
    .mini-two .mini-content,
    .mini-three .mini-content,
    .mini-four .mini-content {
        width: 30rem;
        height: 0.3rem;
        border: var(--upperblue) 1rem solid;
        background-color: var(--upperblue);

        transition: height 4s, width 4s border 4s;
    }

    .mini-content p {
        visibility: hidden;
    }

    .mini-one:hover .mini-content,
    .mini-two:hover .mini-content,
    .mini-three:hover .mini-content,
    .mini-four:hover .mini-content {
        width: auto;
        height: auto;
    }

    .mini-one:hover p,
    .mini-one:hover img,
    .mini-two:hover p,
    .mini-two:hover img,
    .mini-three:hover p,
    .mini-three:hover img,
    .mini-four:hover p,
    .mini-four:hover img {
        visibility: visible;
    }

    .mini-one img,
    .mini-two img,
    .mini-three img,
    .mini-four img {

        border: var(--upperblue) 0.2rem solid;

    }

    .mini-one img {
        content: url('https://source.unsplash.com/random/50x50?car');
    }

    .mini-two img {
        content: url('https://source.unsplash.com/random/50x50?car');
    }

    .mini-three img {
        content: url('https://source.unsplash.com/random/50x50?car');
    }

    .mini-four img {
        content: url('https://source.unsplash.com/random/50x50?car');
    }

    .mini-one:hover h2,
    .mini-two:hover h2,
    .mini-three:hover h2,
    .mini-four:hover h2 {

        color: var(--blue);
    }

    .mini-content h2 {
        font-size: 0.4rem;
    }

    .mini-content p {
        font-size: 0.3rem;
    }

}