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

  .pc-dsp { display:none; }
  .sp-dsp { display:block; }

/* ---- HEADER ---------------------------- */

.br_pc{
  display: none;
}

*{
  letter-spacing: 0;
}

a {
   color: #fff;
   position: relative;
   display: inline-block;
   text-decoration: none;
}

header li a{
   margin: 0 0 0 25px;
   font-size: 4vw !important;
}

 .pc-nav {
    display: none;
 }

 .sp-nav {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    height: 100vh;
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, .8);
    opacity: 0;
    transform: translateY(-100%);
    transition: all .2s ease-in-out;
 }

 #hamburger {
    position: relative;
    display: block;
    width: 70px;
    height: 25px;
    margin: 0 0 0 auto;
 }

 #hamburger span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: translateY(-50%);
 }

 #hamburger::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
 }

 #hamburger::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
 }

 .sp-nav ul {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
 }

 .sp-nav li {
    margin: 0;
    padding: 0;
 }

 .sp-nav li span {
    font-size: 15px;
    color: #fff;
 }
 .sp-nav li a, .sp-nav li span {
    display: block;
    padding: 20px 0;
 }

 .sp-nav .close {
    position: relative;
    padding-left: 20px;
 }
 .sp-nav .close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 16px;
    height: 1px;
    background: #fff;
    transform: rotate( 45deg );
 }
 .sp-nav .close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 16px;
    height: 1px;
    background: #fff;
    transform: rotate( -45deg );
 }
 .toggle {
    transform: translateY( 0 );
    opacity: 1;
 }
 .main-visual {
    padding: 0 4%;
 }

 /* ---- TOP AREA ---------------------------- */


 #topArea{
   width: 100%;
   height: 100vh;
   margin: 0;
   position: relative;
   overflow: hidden;
 }

 .mainCpy{
     position: relative;
     top: 40%;
     left: 10%;
 }

 h2{
   color: #fff;
   font-size: 1.4em
   font-weight: 600;
   line-height: 1.2em;
   clear: both;
 }

 #topArea ul span{
   display: inline-block;
   width: 70%;
   border-bottom: 1px solid #fff;
 }

 #topArea li img{
   width: 20%;
   height: auto;
   margin: 1.5% 0;
   float: left;
 }

 #topArea ul .text{
    margin: 2.5% 23%;
    font-size: 0.7em;
    color: #fff;
 }


 #topArea video {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-size: cover;
   z-index: -999;
 }

 #copyright{
   position: fixed;
   font-weight: 700;
   right: 4%;
   bottom: 3%;
   font-size: 0.8vw;
   color: #fff;
 }



 .scroll a {
   font-weight: 700;
   display: inline-block;
   position: absolute;
   left: 20px;
   bottom: 20px;
   z-index: 2;
   padding: 10px 10px 110px;
   overflow: hidden;
   color: #fff;
   font-size: 0.6em;
   font-family: 'Josefin Sans', sans-serif;
   line-height: 1;
   letter-spacing: .2em;
   text-transform: uppercase;
   text-decoration: none;
   writing-mode: vertical-lr;
 }

 .scroll a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   width: 1px;
   height: 100px;
   background: #fff;
 }


 .scroll a::after {
   animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
 }
 @keyframes sdl {
   0% {
     transform: scale(1, 0);
     transform-origin: 0 0;
   }
   50% {
     transform: scale(1, 1);
     transform-origin: 0 0;
   }
   50.1% {
     transform: scale(1, 1);
     transform-origin: 0 100%;
   }
   100% {
     transform: scale(1, 0);
     transform-origin: 0 100%;
   }
 }




 /* ---- MissionStrongth ---------------------------- */

 #missionStrongth{
   width: 100%;
   height: auto;
   padding: 15% 0;
   background: rgba(0,0,0,0.8);
 }

 .missionStrongthWrapper{
   padding: 0 10% 10% 10%;
   color: #fff;
 }

 .mStitle{
   width: 100%;
   height: auto;
 }

 .mStitle .en{
   font-size: 1.5em;
   font-weight: 700;
 }

 .mStitle .jp{
   margin: 0 1% 0 4%;
   font-size: 0.9em;
   color: #555555;
   line-height: 2em;
 }

 .border {
     display: flex;
     align-items: center;
 }

 .border:after {
     content: "";
     height: 1px;
     flex-grow: 1;
     background-color: #555555;
 }

 .border:after {
     margin-left: 1rem;
 }

 #missionContent{
   width: 100%;
   margin: 7% auto;
   text-align: center;
 }

 #missionContent .title{
   font-size: 1.2em;
   font-weight: 600;
 }

 #missionContent .text{
   margin: 10% 0 0 0;
   font-size: 0.9em;
   line-height: 1.4em;
 }


 #strongthContent{
   width: 100%;
   height: auto;
 }

 #missionStrongth br{
   display: none;
 }

 #strongthContent ul{
   margin: 10% auto;
   width: 100%;
   padding: 8%;
   background: #0D0D0D;
   text-align: center;
 }

 #strongthContent .title{
   font-size: 1em;
   font-weight: 700;
 }

 #strongthContent span{
   width: 40%;
   margin: 8% 0;
   border-bottom: 1px solid #555555;
   display: inline-block;
 }

 #strongthContent .text{
   font-size: 0.7em;
 }



 /* ---- SERVICE ---------------------------- */

 #service{
   width: 100%;
   height: 100%;
   padding: 10% 0;
   background-image: url("../img/serviceBg.png");
   background-size: cover;
 }

 .serviceWrapper{
   padding: 0 5%;
   color: #fff;
   text-align: center;
 }

.secTitle{
  margin: 0 0 10% 0;
}

 .secTitle .jp{
   font-size: 0.8em;
   color: #555555;
   line-height: 2em;
 }

 .secTitle .en{
   font-size: 1.7em;
   font-weight: 700;
 }

 .serviceCnt{
   background: rgba(255, 255, 255, 0.9);
   color: #000;
   margin: 5% 0;
 }

 .serviceCnt ul{
   width: 100%;
   padding: 4%;
 }

 .serviceCnt span{
   display: inline-block;
   width: 80%;
   border-bottom: 1px solid #000;
 }

 .serviceCnt .jp{
   margin: 2% 0;
   font-size: 0.8em;
 }

 .serviceCnt .en{
   font-size: 2em;
   font-weight: 700;
 }

 .serviceCnt .text{
   margin: 4% 0 0 0;
   font-size: 0.8em;
 }

 .serviceCnt .list{
   font-size: 0.8em;
   font-weight: 600;
   margin: 4%;
 }

 .contactBtn{
   width: 80%;
   display: block;
   margin: 4% auto 0 auto;
   text-align: center;
   background: #fff;
   padding: 5% 0;
   border-radius: 30px;
   border: none;
   font-weight: 700;
   color: #000;
 }

 .contactBtn a{
   color: #000;
 }



 /* ---- WORKS ---------------------------- */

 #works{
   width: 100%;
   height: auto;
   padding: 5% 0;
   background: rgba(0,0,0,0.95);
   border-bottom: 1px solid #707070;
 }

 .worksWrapper{
   color: #fff;
   width: 90%;
   margin: 5% auto;
   text-align: center;
 }

 .worksList{
   width: 100%;
   margin: 5% auto;
 }

 .worksList ul{
   width: 100%;
   padding: 5% 0;
 }

 .thumap{
   margin: 10% 0 10% 0;
 }

 .worksList .title{
   font-size: 1.4em;
   font-weight: 700;
 }

 .worksList .text{
   font-size: 0.8em;
   font-weight: 700;
   margin: 6% 0;
   line-height: 1.8em;
 }

 .worksList button{
   color: #fff;
   width: 100%;
   background: #000;
   border: 1px solid #fff;
   padding: 8% 70px;
   border-radius: 10px;
   font-weight: 600;
 }

 .worksList .category{
   text-align: right;
   font-size: 0.8em;
   font-weight: 500;
   margin: 0 0 3% 0;
 }



 /* ---- PROJECT ---------------------------- */

 #project{
   width: 100%;
   height: auto;
   padding: 5% 0 1% 0;
   background: rgba(0,0,0,0.95);
 }

 .projectWrapper{
   color: #fff;
   width: 90%;
   margin: 5% auto 2% auto;
   text-align: center;
 }

 .projectList{
   width: 100%;
   margin: 25% 0 0 0;
 }

 .projectList .title{
   font-size: 1.3em;
   font-weight: 700;
   margin: 0 0 1% 0;
 }

 .projectList .text{
   font-size: 0.8em;
   font-weight: 700;
 }

 .layoutVideo{
   width: 100%;
   margin: 10% 0 0 0;
 }

 .projectList video {
   width: 100%;
   height: auto;
 }

 .layoutVideo ul{
   width: 100%;
   margin: 10% 0;
 }

 .layoutVideo .title{
   text-align: center;
   font-size: 0.8em;
   margin: 2% 0;
   clear: both;
 }

 iframe{
   width: 100%;
   height: 210px;
 }


 /* ---- VOICE ---------------------------- */

 #voice{
   width: 100%;
   height: auto;
   padding: 3% 0 5% 0;
   background: rgba(0,0,0,0.95);
 }

 .voiceWrapper{
   color: #fff;
   width: 80%;
   margin: 0 auto;
 }

 .viceList{
   width: 100%;
   text-align: center;
 }

 .voiceWrapper ul{
   width: 100%;
   margin: 15% 0 ;
 }

 .voiceWrapper .title{
   font-size: 1.3em;
   font-weight: 600;
 }

 .voiceWrapper .text{
   margin: 3% 0;
   font-size: 0.95em;
 }


 /* ---- FLOW ---------------------------- */

 #flow{
   width: 100%;
   height: auto;
   padding: 10% 3%;
   background: rgba(0,0,0,0.8);
 }

 .flowWrapper{
   color: #fff;
   width: 90%;
   margin: 0 auto;
 }

 .flowList{
   width: 90%;
   margin: 4% auto;
   height: auto;
   text-align: center;
   color: #fff;
 }

 .flowList ul{
   width: 100%;
   border: 1px solid #fff;
   padding: 5%;
   margin: 5% 0;
 }

 .flowList .number{
   font-size: 0.8em;
   font-weight: 600;
 }

 .flowList .title{
   font-size: 1.2em;
   font-weight: 600;
   margin: 5% 0;
 }

 .flowList .text{
   font-size: 0.8em;
 }



 /* ---- COMPANY ---------------------------- */

 #company{
   width: 100%;
   height: auto;
   padding: 10% 0;
   background-image: url("../img/companyBg.png");
   background-size: cover;
 }

 .companyWrapper{
   color: #fff;
   width: 80%;
   margin: 0 auto;
 }

 .conpanyProfile{
   margin: 5% auto;
   width: 100%;
   height: auto;
 }

 .conpanyProfile{
   width: 100%;
   margin: 0 auto;
 }

 .conpanyProfile ul{
   font-size: 0.9em;
   width: 100%;
 }

 .conpanyProfile li{
   margin: 3% 0;
   border-bottom: 1px solid #272727;
   padding: 0 0 2% 0;
 }

 .conpanyProfile ul span{
   margin: 0 0 0 10%;
 }


 .iframe-wrp {
   margin: 10% 0;
   position: relative;
   width: 100%;
   padding-top: 50%; /* = height ÷ width × 100 */
 }

 .iframe-wrp iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

 .googlemap-bw iframe {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
 }



 /* ---- COMPANY ---------------------------- */

 #contact{
   width: 100%;
   height: auto;
   padding: 10% 0;
   background: rgba(0,0,0,0.95);
 }

 .contactWrapper{
   color: #fff;
   width: 80%;
   margin: 0 auto;
 }

 form{
   width: 100%;
   margin: 5% auto;
 }
 .item{
   overflow: hidden;
   margin-bottom: 20px;
 }
 .label{
   float: left;
   width: 100%;
   padding-left: 10px;
   margin: 1% 0;
 }
 .inputs{
   float: left;
   width: 100%;
   margin: 1% 0;
 }
 input[type="text"],input[type="email"],select{
   border: solid 1px #aaa;
   border-radius:5px;
   padding:10px;
   font-size: 15px;
   background: none;
   color: #fff;
 }

 input[type="radio"]{
   font-size: 0.8em;
 }

 textarea{
   border: solid 1px #aaa;
   border-radius:5px;
   padding: 10px;
   height: 160px;
   font-size: 15px;
   background: none;
   color: #fff;
 }

 .btn-area{
   text-align: center;
 }
 input[type="submit"]{
   background: #fff;
   border: none;
   color: #000;
   font-size: 0.8em;
   font-weight:bold;
   padding: 10px 80px;
   margin: 0 5px;
   border-radius:50px;
 }




/* ---- FOTTER ---------------------------- */

  footer{
    width: 100%;
    background: #000;
  }

  footer ul{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: center;
  }

  footer ul li{
    font-size: 12px;
    font-weight: 700;
    margin: 10% 3%;
  }

  #copyright{
    text-align: center;
    margin: 0 auto;
    font-size: 3vw;
  }

}