* {
     margin: 0;
     padding: 0;
 }

 html {
     font-size: 12px;
 }

 body {
     font-size: 12px;
     line-height: 1.5;
     //color: #000;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

 ol,
 ul {
     list-style: none
 }

 select,
 input,
 img,
 textarea {
     vertical-align: middle;
     outline: 0
 }

 a {
     text-decoration: none;
     color: #000
 }

 a:hover {
     text-decoration: none
 }

 fieldset,
 img,
 input {
     border: 0
 }

 i,
 em {
     font-style: normal
 }

 .indexHtml {
     background: url('../images/indexBg.jpg') no-repeat;
     position: fixed;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     background-size: 45vw;
     background-position: left center;
 }

 .logo {
     margin: 5vw 0 0 4vw;
     a{
        display: inline-block;
        position: relative;
        &:after{
            position: absolute;
            content: '';
            left: -5vw;
            top: -1vw;
            bottom: 1vw;
            width: 3vw;
            background: rgba(255, 255, 255, 0.8);
            transform: skewX(-20deg);
        }
        &:hover:after{
            animation:logo 1s infinite;
        }
     }
     img {
         width: 11vw
     }
 }

 @keyframes logo
    {
     from {left:-5vw;}
     to {left:50vw;}
 }


 .nav {
     position: fixed;
     right: 0;
     top: 0;
     width: 22vw;
     height: 90%;
     box-sizing: border-box;
     background: #3eff8b;
     padding: 5vw 2vw;
     font-size: 2vw;
     z-index: 9999;
     visibility: hidden;
     opacity: 0;
     transition: all 0.3s;

     section {
         font-size: 2.5vw;
         position: absolute;
         top: 1.5vw;
         right: 1.5vw;
         transition: all 0.3s;
         cursor: pointer;
         &:hover{
            transform: rotate(-180deg);
         }
     }

     a {
         display: block;
         margin-bottom: 0.5vw;
         transition: all 0.3s;

         &:hover {
             margin-left: 0.5vw
         }
     }

     &.on {
         visibility: visible;
         opacity: 1
     }
 }


 .navIcon {
     position: fixed;
     right: 6vw;
     top: 4.2vw;
     width: 2.5vw;
     display: grid;
     grid-row-gap: 0.25vw;
     cursor: pointer;
     transition: all 0.3s;
     z-index: 99999;

     span {
         background: #3eff8b;
         display: block;
         height: 0.4vw;
         //border-radius: 0.5vw;
     }

     &.on {
         opacity: 0
     }
 }


 .indexC {
     position: fixed;
     left: 50%;
     top: 48%;
     right: 0;
     transform: translate(-63%, -50%);
     font-size: 2.5vw;
     width: 70%;
 }

 .indexB {
     padding: 2vw 6vw 2vw 4.5vw;
     display: flex;
     font-size: 0.9vw;
     justify-content: space-between;
 }

 .indexBL {
     display: flex;
     align-items: center;

     img {
         width: 1.2vw;
         margin-right: 0.3vw;
     }
 }

 .indexBR {
     display: flex;
     align-items: center;

     span {
         padding-right: 0.3vw;
     }

     a {
         margin-left: 0.5vw;
         transition: all 0.2s;

         img {
             width: 1.8vw;
         }

         &:hover {
             margin-top: -0.3vw;
         }
     }
 }

.indexBb {
     padding: 2vw 6vw 2vw 4.5vw;
     display: flex;
     font-size: 0.9vw;
     justify-content: space-between;
	 background-color: #000;
 }

 .indexBbL {
     display: flex;
     align-items: center;
	 color: #fff;
     img {
         width: 1.2vw;
         margin-right: 0.3vw;
     }
 }

 .indexBbR {
     display: flex;
     align-items: center;
	 background-color: #fff;
	 padding-left: 3vw;
	 padding-right: 3vw;
	 padding-top: 0.5vw;
	 padding-bottom: 0.5vw;
     span {
         padding-right: 0.3vw;
     }

     a {
         margin-left: 0.5vw;
         transition: all 0.2s;

         img {
             width: 1.8vw;
         }

         &:hover {
             margin-top: -0.3vw;
         }
     }
 }

 .worksNav {
     margin: 8vw 0 5vw 4.5vw;
     display: flex;
     align-items: center;

     dd {
         font-size: 1.8vw;
         font-weight: bold;
         margin-right: 3vw;
         position: relative;

         &:before {
             position: absolute;
             content: "";
             left: -0.2vw;
             bottom: 19%;
             right: -0.2vw;
             background: #3eff8b;
             z-index: -1;
             height: 0.3vw;
         }
     }

     dt {
         font-size: 1.2vw;
         display: flex;
         align-items: center;
         flex-wrap: wrap;

         a {
             position: relative;

             &.on:before {
                 content: "";
                 position: absolute;
                 left: -0.1vw;
                 bottom: 20%;
                 right: -0.1vw;
                 background: #3eff8b;
                 z-index: -1;
                 height: 0.2vw;
             }

             &:hover:before {
                 content: "";
                 position: absolute;
                 left: -0.1vw;
                 bottom: 20%;
                 right: -0.1vw;
                 background: #3eff8b;
                 z-index: -1;
                 height: 0.2vw;
             }
         }
         span{
            margin: 0 0.3vw;
         }
     }
 }

 .works {
     display: grid;
     grid-template-columns: 1fr 1fr;
     //grid-gap: 0.5%;
	 grid-gap: 1vh;
     justify-content: space-between;
     overflow: hidden;
 }

 .worksL {
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     height: 55vh;
     position: relative;
     display: grid;
     text-align: center;
     color: #fff;

     span {
         align-self: end;
         font-size: 2.2vw;
         position: relative;
         bottom: 0;
         font-weight: bold;
         // transform: translate(-10%, 0);
         // opacity: 0;
         // animation: worksSpan 1s ease-in-out forwards;
     }

     p {
         font-size: 5vw;
         font-weight: bold;
         position: relative;
         top: -1.8vw;
         // transform: translate(10%, 0);
         // opacity: 0;
         // animation: worksP 1s ease-in-out forwards;
         &.narrow{
            font-size: 3.5vw;
            top: -1vw;
         }
     }

     section {
         position: absolute;
         content: "";
         bottom: 0;
         right: 0;
         left: 0;
         padding: 1vw;
         // background: rgba(62, 255, 139, 0.7);
		 background: rgba(62, 255, 139, 1);
         text-align: left;
         line-height: 1.5vw;
         height: 0.7vw;
         overflow-y: hidden;
         transition: all 0.3s;

         b {
             color: #000;
             font-size: 1.4vw;
             display: block;
             opacity: 0;
             transition: all 0.3s;
         }

         s {
             color: #000;
             font-size: 1vw;
             text-decoration: none;
             opacity: 0;
             transition: all 0.3s;
         }
     }

     &:hover {
         section {
             height: 6.5vw;
             transition: all 0.3s;

             b {
                 opacity: 1;
             }

             s {
                 opacity: 1;
             }
         }
     }
 }

 .worksR {
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     height: 55vh;
     position: relative;
     display: grid;
     text-align: center;
     color: #fff;

     span {
         align-self: end;
         font-size: 2.2vw;
         position: relative;
         bottom: 0;
         font-weight: bold;
         // transform: translate(0, -10%);
         // opacity: 0;
         // animation: worksSpan 1s ease-in-out forwards;
     }

     p {
         font-size: 5vw;
         font-weight: bold;
         position: relative;
         top: -1.8vw;
         &.narrow{
            font-size: 3.5vw;
            top: -1vw;
         }
         // transform: translate(0, 10%);
         // opacity: 0;
         // animation: worksP 1s ease-in-out forwards;
     }

     section {
         position: absolute;
         content: "";
         bottom: 0;
         right: 0;
         left: 0;
         padding: 1vw;
         background: rgba(62, 255, 139, 1);
         text-align: left;
         line-height: 1.5vw;
         height: 0.7vw;
         overflow-y: hidden;
         transition: all 0.3s;

         b {
             color: #000;
             font-size: 1.4vw;
             display: block;
             opacity: 0;
             transition: all 0.3s;
         }

         s {
             color: #000;
             font-size: 1vw;
             text-decoration: none;
             opacity: 0;
             transition: all 0.3s;
         }
     }

     &:hover {
         section {
             height: 6.5vw;
             transition: all 0.3s;

             b {
                 opacity: 1;
             }

             s {
                 opacity: 1;
             }
         }
     }
 }

 .worksLoad{
    display: none;
 }

 .worksMore{
    text-align: center;
    font-size: 1.2vw;
    padding: 3vw;
    font-weight: bold;
 }

	 .keeptouchA{
        padding: 2vw 6vw 2vw 4.5vw;
        a{
            font-size: 1.4vw;
            em{
                position: relative;
                &:before{
                    position: absolute;
                    content: "";
                    left: -0.2vw;
                    bottom: 10%;
                    right: 0;
                    background: #3eff8b;
                    z-index: -1;
                    height: 0.3vw;
                }
            }
		      span {
                width: 4.5vw;
                transition: all 0.2s;
                background: url('../images/arrow.png') left center no-repeat;
                background-size: contain;
                height: 2vw;
                display: inline-block;
                vertical-align: middle;
                
            }
            &:hover span{
                 width: 5.3vw;
                }
         }
	 }
 // @keyframes worksSpan {
 //     from {
 //         opacity: 0;
 //     }

 //     to {
 //         opacity: 1;
 //         transform: translate(0);
 //     }
 // }

 // @keyframes worksP {
 //     from {
 //         opacity: 0;
 //     }

 //     to {
 //         opacity: 1;
 //         transform: translate(0);
 //     }
 // }

 .toughts {
     margin: 10vw 0 5vw;
     position: relative;
     padding: 0 1%;

     .toughtsTitle {
         font-size: 1.8vw;
         position: absolute;
         left: 4vw;
         top: -2.8vw;

         &:before {
             position: absolute;
             content: "";
             left: -0.2vw;
             bottom: 18%;
             right: -0.2vw;
             background: #3eff8b;
             z-index: -1;
             height: 0.4vw;
         }
     }

     ul {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-column-gap: 1%;

         h2 {
             font-size: 1.5vw;
             margin: 1.2vw 0 0.3vw;
         }

         p {
             font-size: 1.2vw;
             color: #74777a;
             margin-bottom: 1.5vw;
         }

         span {
             display: block;
             width: 5.5vw;
             transition: all 0.2s;
             background: url('../images/toughts4.png') left center no-repeat;
             background-size: contain;
             height: 2vw;

             &:hover {
                 width: 6.5vw;
             }
         }
     }
 }

 .allbirdsT {
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     height: 40vw;
     position: relative;
     display: grid;
     text-align: center;
     color: #fff;

     span {
         align-self: end;
         font-size: 4vw;
         position: relative;
         bottom: -1.2vw;
         font-weight: bold;
     }

     p {
         font-size: 8vw;
         font-weight: bold;
         position: relative;
         top: 0;
     }
 }

 .allbirdsIntroduce {
     font-size: 1.5vw;
     padding: 3%;
	 width: 60%;
 }

 .allbirdsB {
     display: grid;
     grid-template-columns: 49.5% 49.5%;
     padding-bottom: 2vw;
     justify-content: space-between;
 }

 .allbirdsBL {
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     height: 55vh;
     position: relative;
     display: grid;
     text-align: center;
     color: #fff;
 }

 .allbirdsBR {
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     height: 55vh;
     position: relative;
     display: grid;
     text-align: center;
     color: #fff;
 }

 .allbirdsThank {
     padding: 1vw 3vw 3vw;
     display: grid;
     justify-content: space-between;
     grid-template-columns: 49.5% 49.5%;

     .allbirdsThankL {
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
     }

     .allbirdsThankR {
         padding: 35% 20% 35% 5%;

         p {
             font-size: 3vw;
             margin-bottom: 2vw;
         }

         section {
             font-size: 1vw;

             b {
                 font-size: 2vw;
                 font-weight: bold;
                 display: block;
             }
         }
     }
 }

 .allbirdsBack {
     section {
         background: #fff;
         padding: 4vw;
         display: flex;
         justify-content: space-between;

         a {
             display: flex;
             align-items: center;
             transition: all 0.3s;

             p {
                 background: url("../images/toughts4.png") left center no-repeat;
                 background-size: contain;
                 width: 5vw;
                 height: 2vw;
                 transform: rotate(-180deg);
             }

             &:hover {
                 transform: translate(-1vw, 0);
             }

             span {
                 font-size: 1.8vw;
                 margin-left: 0.8vw;
             }
         }
     }
 }

 .allbirdsYouLike {
     background: #eee;
     padding: 5vw 3vw;

     h2 {
         font-size: 2.2vw;
         margin-bottom: 2vw;
     }
 }

 .allbirdsYouLikeC {
     display: grid;
     grid-template-columns: 49.5% 49.5%;
     justify-content: space-between;

     .allbirdsYouLikeList {
         em {
             font-size: 1.8vw;
             padding: 1vw 0;
             display: block;
         }

         p {
             font-size: 1.2vw;
             color: #9b9b9c;
         }

         span {
             display: block;
             width: 4.5vw;
             transition: all 0.2s;
             background: url('../images/arrow.png') left center no-repeat;
             background-size: contain;
             height: 1.5vw;
             margin-top: 1.5vw;

             &:hover {
                 width: 5.3vw;
             }
         }
     }
 }

 .jobs {
     padding: 4vw;
 }

 .jobsList {
     border-bottom: 1px solid #c6c6c6;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 2vw 0;

     &:nth-last-child(1) {
         border: 0
     }

     a {
         font-size: 2.3vw;
         font-weight: bold;
         position: relative;

         &:hover:before{
             content: "";
             position: absolute;
             left: -0.1vw;
             bottom: 20%;
             right: -0.1vw;
             background: #3eff8b;
             z-index: -1;
             height: 0.4vw;
         }
     }

     p {
         font-size: 1.3vw;
         width: 15%;
         span {
             color: #262222;
             display: block;
         }
         b{
            color: #ccc;
            font-weight: normal;
         }
     }
 }

 .toughtsDetail {
     padding: 5% 35% 5% 5%;

     h2 {
         font-size: 3.2vw;
         margin-bottom: 1vw;
     }

     p {
         font-size: 1.4vw;
         color: #898989;
         margin-bottom: 5vw;
     }

 }

 .toughtsDetailBack {
     background: #fff;
     padding-top: 4vw;
     display: flex;
     justify-content: space-between;

     a {
         display: flex;
         align-items: center;
         transition: all 0.3s;

         i {
             background: url("../images/toughts4.png") left center no-repeat;
             background-size: contain;
             width: 5vw;
             height: 2vw;
             transform: rotate(-180deg);
             display: block;
         }

         span {
             font-size: 1.8vw;
             margin-left: 0.8vw;
         }

         &:hover {
             transform: translate(-1vw, 0);
         }
     }
 }

 .aboutC {
     margin: 3vw 4.5vw 8vw 4.5vw;
     font-size: 4vw;
     font-weight: bold;
 }

 .aboutRange {
     margin: 0 0 5vw 4.5vw;
     font-size: 1.8vw;
	 font-weight: bold;
 }

 .aboutRangeC {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-column-gap: 2vw;
     justify-content: space-between;
     margin: 0 4.5vw 10vw 4.5vw;

     dl {
         dd {
             margin-bottom: 1vw;

             text {
                 font-size: 1.8vw;
                 position: relative;

                 &:before {
                     position: absolute;
                     content: "";
                     left: -0.2vw;
                     bottom: 8%;
                     right: -0.2vw;
                     background: #3eff8b;
                     z-index: -1;
                     height: 0.3vw;
                 }
             }

         }

         dt {
             font-size: 1.3vw;
         }
     }
 }

 .aboutRangeCMarginT {
     margin-top: 4vw;
 }


 .aboutRangeMail {
     
 }
.aboutRangeMail:hover a{ color: #3eff8b; font-weight: bold}

 .jobsDetailsT{
    background: #3eff8b;
    font-size: 6.5vw;
    padding: 4.5vw;
 }

 .jobsDetails{
    padding: 4vw;
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 30%;
    grid-column-gap: 5%;
 }

 .jobsDetailsL{
    line-height: 2vw;
    h2{
        font-size: 1.3vw;
    }

    p{
        font-size: 1vw;
        display: flex;
        span{
            margin-right: 0.5vw;
        }
        b{
            font-weight: normal;
        }
    }

    h3{
        font-size: 1.3vw;
        margin-top: 1.5vw;
    }
 }

 .jobsDetailsR{
    font-size:1.3vw;
    span{
        color: #ccc;
    }
 }

 .jobsDetailsLB{
    padding: 2vw 0;
    a{
        border: 1px solid #3eff8b;
        font-size: 1.2vw;
        padding: 1vw 1.5vw;
        display: inline-block;
        transition: all 0.3s;
        &:hover{
            background: #3eff8b
        }
    }
 }

 // @media screen and (min-width: 1499px) and (max-width: 1920px) {
 //     .indexC {
 //         left: 8.5rem;
 //         top: 29rem;
 //         right: 30%;
 //         font-size: 3rem;
 //     }

 //     .indexB {
 //         left: 6rem;
 //         right: 6rem;
 //         bottom: 3%;
 //         font-size: 1.2rem;
 //     }
 // }

 // @media screen and (min-width: 1200px) and (max-width: 1499px) {
 //     .indexHtml {
 //         background-size: 40rem;
 //     }

 //     .logo {
 //         left: 4.8rem;
 //         top: 4.5rem;

 //         img {
 //             width: 13rem
 //         }
 //     }

 //     .nav {
 //         right: 4.8rem;
 //         top: 4.5rem;
 //         width: 3.2rem;

 //         .navIcon {
 //             span {
 //                 height: 0.4rem;
 //                 border-radius: 0.2rem
 //             }
 //         }
 //     }

 //     .indexC {
 //         left: 5.5rem;
 //         top: 22rem;
 //         right: 25%;
 //         font-size: 2.5rem;
 //     }

 // }


 @media screen and (max-width: 768px) {
     .logo {
         margin: 7vw 0 0 6.5vw;

         img {
             width: 25vw
         }
     }


     .nav {
         width: 35vw;
         height: 90%;
         padding: 10vw 3vw;
         font-size: 4.5vw;

         section {
             font-size: 4.5vw;
             position: absolute;
             top: 2vw;
             right: 2vw;
         }

         a {
             margin-bottom: 1vw;
         }

     }

     .navIcon {
         right: 6.5vw;
         top: 7vw;
         width: 7vw;
         grid-row-gap: 1vw;

         span {
             height: 1.2vw;
         }

         &.on {
             opacity: 0
         }
     }

     .indexC {
         position: fixed;
         left: 50%;
         top: 48%;
         transform: translate(-50%, -50%);
         font-size: 4.5vw;
         width: 85%;
     }

     .indexHtml {
         background-size: 100%;
     }

     .indexB {
         font-size: 2.5vw;
     }

     .indexBL {
         img {
             width: 2.5vw;
             margin-right: 0.6vw;
         }
     }

     .indexBR {

         span {
             padding-right: 0.6vw;
         }

         a {
             margin-left: 1vw;
             transition: all 0.2s;

             img {
                 width: 4vw;
             }
         }
     }

     .worksNav {
         margin: 12vw 0 5vw 7.5vw;

         dd {
             font-size: 4vw;

             &:before {
                 left: -0.4vw;
                 right: -0.4vw;
                 height: 0.8vw;
             }
         }

         dt {
             font-size: 3vw; 

             a {
                 &.on:before {
                     left: -0.2vw;
                     right: -0.2vw;
                     height: 0.6vw;
                 }

                 &:hover:before {
                     left: -0.2vw;
                     right: -0.2vw;
                     height: 0.6vw;
                 }
             }
         }
     }

     .works {
         display: block;
         position: initial;
     }

     .worksL {
         height: 35vh;
         margin-bottom: 1vw;

         span {
             font-size: 5.5vw;
         }

         p {
             font-size: 9vw;
             top: -2.5vw;
             &.narrow{
                font-size: 6vw;
                top: -1.5vw;
             }
         }

         section {
             padding: 2vw;
             line-height: 2.2vw;
             height: auto;
             b {
                 font-size: 2vw;
                 opacity: 1
             }

             s {
                 font-size: 1.8vw;
                 opacity: 1
             }
         }
     }

     .worksR {
         height: 35vh;

         span {
             font-size: 5.5vw;
         }

         p {
             font-size: 9vw;
             top: -2.5vw;
             &.narrow{
                font-size: 6vw;
                top: -1.5vw;
             }
         }

         section {
             padding: 2vw;
             line-height: 2.2vw;
             height: auto;

             b {
                 font-size: 2vw;
                 opacity: 1
             }

             s {
                 font-size: 1.8vw;
                 opacity: 1
             }
         }
     }

     .toughts {
         margin-top: 20vw;
     }

     .toughts {
         .toughtsTitle {
             left: 6.5vw;
             top: -6.5vw;
             font-size: 4vw;

             &:before {
                 height: 0.8vw;
                 bottom: 1vw;
             }
         }
     }

     .toughts {
         ul {
             display: block;

             li {
                 margin-bottom: 3vw;
             }

             h2 {
                 font-size: 4.5vw;
                 margin: 2vw 1vw 1vw;
             }

             p {
                 font-size: 3vw;
                 margin: 0 1vw 1vw;
             }

             a {
                 margin-left: 1vw;
                 width: 12vw;
                 height: 8vw;
             }
         }
     }

     .allbirdsB {
         display: block;
         padding-bottom: 1.5vw;

         .allbirdsBL {
             margin-bottom: 1.5vw;
             height: 50vw;
         }

         .allbirdsBR {
             height: 50vw;
         }
     }

     .toughtsDetail {

         h2 {
             font-size: 4vw;
         }

         p {
             font-size: 1.6vw;
             margin-bottom: 5vw;
         }

         h3 {
             font-size: 2.4vw;
             margin-bottom: 1.2vw;
         }

         section {
             font-size: 1.6vw;
             display: grid;
             grid-row-gap: 1.7vw;

             span {
                 display: block;
             }
         }

         img {
             display: block;
             margin: 2vw 0;
         }

     }


     .aboutRange {
         font-size: 2.5vw;
     }

     .aboutRangeC dl dd text {
         font-size: 2.5vw;
     }

     .aboutRangeC dl dt {
         font-size: 1.8vw;
     }

     .jobsList{
        a{
            font-size: 4vw;
        }
        p{
            font-size: 3vw  
        }
     }

     .jobsDetails{
        grid-template-columns: 1fr 20%;
     }

     .jobsDetailsL{
        line-height: 5vw;
        h2{
            font-size: 4vw;
        }

        p{
            font-size: 3vw;
            span{
                margin-right: 0.5vw;
            }
        }

        h3{
            font-size: 4vw;
            margin-top: 3vw;
        }
     }

     .jobsDetailsR{
        font-size: 4vw;
     }

     .jobsDetailsLB{
        padding: 4vw 0;
        a{
            font-size: 3vw;
            padding: 2.5vw 4.5vw;
        }
     }
 }



 @media screen and (min-width: 960px) and (max-width: 1199px) {}

 @media screen and (width: 1024px) {
     .logo {
         margin: 6vw 0 0 5vw;

         img {
             width: 15vw
         }
     }


     .nav {
         width: 25vw;
         height: 90%;
         padding: 7vw 3vw;
         font-size: 3.5w;

         section {
             font-size: 3vw;
             position: absolute;
             top: 2vw;
             right: 2vw;
         }

         a {
             margin-bottom: 1vw;
         }

     }

     .navIcon {
         right: 5vw;
         top: 6vw;
         width: 5vw;
         grid-row-gap: 0.5vw;

         span {
             height: 0.8vw;
         }

         &.on {
             opacity: 0
         }
     }

     .indexC {
         position: fixed;
         left: 50%;
         top: 48%;
         transform: translate(-50%, -50%);
         font-size: 3vw;
         width: 85%;
     }

     .indexHtml {
         background-size: 60%;
     }

     .indexB {
         font-size: 1.5vw;
     }

     .indexBL {
         img {
             width: 1.5vw;
             margin-right: 0.6vw;
         }
     }

     .indexBR {

         span {
             padding-right: 0.6vw;
         }

         a {
             margin-left: 1vw;
             transition: all 0.2s;

             img {
                 width: 3vw;
             }
         }
     }

     .worksNav {
         margin: 10vw 0 5vw 4.5vw;

         dd {
             font-size: 2.5vw;

             &:before {
                 height: 0.6vh;
             }
         }

         dt {
             font-size: 2vw;

             a {
                 &:hover:before {
                     height: 0.5vh;
                 }
                 &.on:before{
                    height: 0.3vw;
                 }
             }
         }
     }

     .aboutC {
         font-size: 4vw;
     }

     .aboutRange {
         font-size: 2.6vw;
     }

     .aboutRangeC {
         grid-gap: 2vw;
     }

     .aboutRangeC dl dd text {
         font-size: 2.6vw;
     }

     .aboutRangeC dl dd text:before {
         height: 0.5vw;
     }

     .aboutRangeC dl dt {
         font-size: 2vw;
     }

     .worksL{
        section{
            height: auto;
            padding: 1.5vw;
            b{
                opacity: 1;
                font-size: 1.8vw;
            }
            s{
                opacity: 1;
                font-size: 1.4vw;
            }
        }
     }
     .worksR{
        section{
            height: auto;
            padding: 1.5vw;
            b{
                opacity: 1;
                font-size: 1.8vw;
            }
            s{
                opacity: 1;
                font-size: 1.4vw;
            }
        }
     }
 }

 @media only screen and (min-width: 480px) and (max-width: 767px) {}


 @media only screen and (max-width: 479px) {
     .logo {
         margin: 7vw 0 0 6.5vw;

         img {
             width: 25vw
         }
     }


     .nav {
         width: 35vw;
         height: 90%;
         padding: 10vw 3vw;
         font-size: 4.5vw;

         section {
             font-size: 4.5vw;
             position: absolute;
             top: 2vw;
             right: 2vw;
         }

         a {
             margin-bottom: 1vw;
         }

     }

     .navIcon {
         right: 6.5vw;
         top: 7vw;
         width: 7vw;
         grid-row-gap: 1vw;

         span {
             height: 1.2vw;
         }

         &.on {
             opacity: 0
         }
     }

     .indexC {
         position: fixed;
         left: 50%;
         top: 48%;
         transform: translate(-50%, -50%);
         font-size: 4.5vw;
         width: 85%;
     }

     .indexHtml {
         background-size: 100%;
     }

     .indexB {
         font-size: 2.5vw;
     }

     .indexBL {
         img {
             width: 2.5vw;
             margin-right: 0.6vw;
         }
     }

     .indexBR {

         span {
             padding-right: 0.6vw;
         }

         a {
             margin-left: 1vw;
             transition: all 0.2s;

             img {
                 width: 4vw;
             }
         }
     }

     .worksNav {
         margin: 12vw 0 5vw 7.5vw;

         dd {
             font-size: 4vw;

             &:before {
                 left: -0.4vw;
                 right: -0.4vw;
                 height: 0.8vw;
             }
         }

         dt {
             font-size: 3vw;

             a {
                 &.on:before {
                     left: -0.2vw;
                     right: -0.2vw;
                     height: 0.6vw;
                 }

                 &:hover:before {
                     left: -0.2vw;
                     right: -0.2vw;
                     height: 0.6vw;
                 }
             }
         }
     }

     .works {
         display: block;
         position: initial;
     }

     .worksL {
         height: 40vh;
         margin-bottom: 2vw;

         span {
             font-size: 5.5vw;
         }

         p {
             font-size: 9vw;
             top: -2.5vw;
             &.narrow{
                font-size: 7vw;
             }
         }

         section {
             padding: 2.5vw;
             line-height: 2.2vw;

             b {
                 font-size: 3vw;
             }

             s {
                 font-size: 2.5vw;
             }
         }
     }

     .worksR {
         height: 40vh;

         span {
             font-size: 5.5vw;
         }

         p {
             font-size: 9vw;
             top: -2.5vw;
             &.narrow{
                font-size: 7vw;
             }
         }

         section {
             padding: 2.5vw;
             line-height: 2.2vw;

             b {
                 font-size: 3vw;
             }

             s {
                 font-size: 2.5vw;
             }
         }
     }

     .toughts {
         margin-top: 20vw;

         ul {
             li {
                 margin-bottom: 3vw;
             }
         }
     }

     .toughts {
         .toughtsTitle {
             left: 6.5vw;
             top: -6.5vw;
             font-size: 4vw;

             &:before {
                 height: 0.8vw;
                 bottom: 1vw;
             }
         }
     }

     .toughts {
         ul {
             display: block;

             li {
                 margin-bottom: 3vw;
             }

             h2 {
                 font-size: 4.5vw;
                 margin: 2vw 1vw 1vw;
             }

             p {
                 font-size: 3vw;
                 margin: 0 1vw 1vw;
             }

             a {
                 margin-left: 1vw;
                 width: 12vw
             }
         }
     }

     .allbirdsB {
         display: block;
         padding-bottom: 1.5vw;

         .allbirdsBL {
             margin-bottom: 1.5vw;
             height: 50vw;
         }

         .allbirdsBR {
             height: 50vw;
         }
     }

     .indexB {
         padding: 4vw 6vw 4vw 4.5vw;
         font-size: 3vw;
     }

     .allbirdsIntroduce {
         font-size: 3vw;
         padding: 5% 3%;
		 width: 50%
     }

     .allbirdsThank {
         .allbirdsThankR {
             padding: 35% 5% 35% 8%;

             p {
                 font-size: 4.5vw;
             }

             section {
                 b {
                     font-size: 3vw;
                 }

                 font-size: 2vw;

             }
         }
     }

     .allbirdsBack {
         section {
             padding: 5vw;

             a {
                 p {
                     width: 8vw;
                     height: 3vw;
                 }

                 span {
                     font-size: 4vw;
                     margin-left: 2vw;
                 }
             }
         }
     }

     .allbirdsYouLike {
         h2 {
             font-size: 4vw;
         }
     }

     .allbirdsYouLikeC {
         grid-template-columns: 1fr;

         .allbirdsYouLikeList {
             margin-bottom: 5vw;

             em {
                 font-size: 4vw;
                 padding: 2vw 0;
             }

             p {
                 font-size: 3vw;
             }

             a {
                 width: 12vw;
                 height: 4vw;
                 margin-top: 3vw;
             }
         }
     }
	 

     .toughtsDetail {
         padding: 5%;

         h2 {
             font-size: 4.6vw;
             margin-bottom: 1vw;
         }

         p {
             font-size: 3.2vw;
             margin-bottom: 5vw;
         }

         h3 {
             font-size: 3.6vw;
             margin-bottom: 1vw;
         }

         section {
             font-size: 3.2vw;
             display: grid;
             grid-row-gap: 3vw;

             span {
                 display: block;
             }
         }

         img {
             margin: 4vw 0;
         }

     }

     .toughtsDetailBack {
         padding-top: 4vw;

         a {
             i {
                 width: 8vw;
                 height: 3vw;
             }

             span {
                 font-size: 4vw;
                 margin-left: 2vw;
             }
         }
     }

     .aboutC {
         font-size: 4.5vw;
     }

     .aboutRange {
         font-size: 3.5vw;
     }

     .aboutRangeC {
         grid-template-columns: 1fr 1fr;
         grid-gap: 2vw;
     }

     .aboutRangeC dl dd text {
         font-size: 3.5vw;
     }

     .aboutRangeC dl dd text:before {
         height: 0.8vw;
         left: -0.4vw;
         right: -0.4vw;
     }

     .aboutRangeC dl dt {
         font-size: 3vw;
     }

     .jobsList{
        a{
            font-size: 4vw;
        }
        p{
            font-size: 3vw  
        }
     }

     .jobsDetails{
        grid-template-columns: 1fr 20%;
     }

     .jobsDetailsL{
        line-height: 5vw;
        h2{
            font-size: 4vw;
        }

        p{
            font-size: 3vw;
            span{
                margin-right: 0.5vw;
            }
        }

        h3{
            font-size: 4vw;
            margin-top: 3vw;
        }
     }

     .jobsDetailsR{
        font-size: 4vw;
     }

     .jobsDetailsLB{
        padding: 4vw 0;
        a{
            font-size: 3vw;
            padding: 2.5vw 4.5vw;
        }
     }

 }