body{
  display: block;
  text-align: center;
  margin:0;
  /* padding-bottom: 120px; */
  width: 100%;
  height:100%;
  background-size:100%;
  background-image: url(../resources/pg.png);
  background-color: #7CE2C5;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
}
.main{
  vertical-align:top;
}

.pc-only{
  display: block;
}

.sp-only{
  display: none;
}

.relative {
  position: relative;
}

.main_img{
  width: auto;
}

.pc_img{
  max-width:1000px;
  width:95%;
  height:auto;
  padding:10px;
}

.logo_img{
  max-width: 500px;
  width:39vw;
  height: auto;
}

.title_img{
  max-width:400px;
  width:31.2vw;
  height:auto;
}

.big_title_img{
  max-width:700px;
  width:54vw;
  height:auto;
}

.corporate_img{
  max-width:1280px;
  width:100%;
  height:auto;
  vertical-align: bottom;
}

.header{
  width: 100%;
  text-align: center;
  display: table;
  table-layout: fixed;
  margin:0 auto;
  vertical-align:top;
}

.header_back{
  margin: 0px;
  padding: 0px;
  background-color: #FFFFFF;
  display: flex;
  vertical-align:top;
}

.tcm_img{
  margin-left: auto;
  vertical-align: middle;
  width:13.6vw;
}

.tcm_img_align{
  text-align: left;
  display: table-cell;
  padding-left: 30px;
  width:13.6vw;
  vertical-align: middle;
}

.contact_form{
  margin:0 auto;
  max-width:1000px;
  width:95%;
  height:auto;
  padding:10px;
}

.btn_align{
  text-align: right; 
}

.title{
  position: relative;
}

.title1{
  margin:50px 0 50px;
}

.btn {
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  color: #004D6A;
  background: #FFF;
  transition: .4s;
  padding:5px 10px 5px;
}

p{
  margin:0 0 0;
}

.btn-top{
  text-align: center;
  font-size: 25px;
}

.btn-bottom{
  text-align: center;
  font-size:13px;
}

.key_visual{
  position: relative;
}

.human01{
  position: absolute;
  top: 71%;
  left: 22%;
}

.human02{
  position: absolute;
  top: 78.5%;
  left: 75%;
}

.key_visual_text{
  font-weight: bold;
  font-size:22px;
  line-height:45px;
  color: #004D6A;
  margin:50px 0 150px;
}

.syoki{
  background-color: #F9F27F;
}

.about-_title{
  margin:0px 0 50px;
}

.about_point01{
  position: relative;
  max-width:1000px;
  margin:0px auto 30px;
}

.about_point02{
  position: relative;
  max-width:1000px;
  margin:0px auto 30px;
}

.about_point03{
  position: relative;
  max-width:1000px;
  margin:0px auto 30px;
}

.about_point04{
  position: relative;
  max-width:1000px;
  margin:0px auto 150px;
}

.about_point01_title{
  position: absolute;
  top: 30%;
  left: 7%;
  font-size:43px;
  font-weight: 700;
  color:#004D6A;
}

.about_point01_text{
  position: absolute;
  top: 50%;
  left: 7%;
  font-size: 20px;
  font-weight: medium;
  line-height:40px;
  text-align: left;
}

.about_point02_title{
  position: absolute;
  top: 30%;
  left: 7%;
  font-size:43px;
  font-weight: 700;
  color:#004D6A;
}

.about_point02_text{
  position: absolute;
  top: 50%;
  left: 7%;
  font-size: 20px;
  font-weight: medium;
  line-height:40px;
  text-align: left;
}

.about_point03_title{
  position: absolute;
  top: 30%;
  left: 7%;
  font-size:43px;
  font-weight: 700;
  color:#004D6A;
}

.about_point03_text{
  position: absolute;
  top: 50%;
  left: 7%;
  font-size: 20px;
  font-weight: medium;
  line-height:40px;
  text-align: left;
}

.about_point04_title{
  position: absolute;
  top: 30%;
  left: 7%;
  font-size:43px;
  font-weight: 700;
  color:#004D6A;
}

.about_point04_text{
  position: absolute;
  top: 50%;
  left: 7%;
  font-size: 20px;
  font-weight: medium;
  line-height:40px;
  text-align: left;
}

.advantage_title{
  margin:0px 0 50px;
}

.advantage_point01{
  display: flex;
  justify-content: center;
  margin:0px 0 50px;
}

.advantage_point01_text{
  font-size: 35px;
  font-weight: 700;
  line-height:59px;
  color:#004D6A;
  text-align: left;
  padding-left: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.advantage_point01_picture{
  margin:0px 0 30px;
}

.advantage_point01_picture_text{

  background: linear-gradient(to bottom, #00000000 0%, #00000000 50%, #F9F27F 50%, #F9F27F 100%);
  font-size: 35px;
  font-weight: 700;
  line-height:59px;
  color:#004D6A;
  margin:0px 0 50px;
}

.advantage_point02{
  display: flex;
  justify-content: center;
  margin:150px 0 50px;
}

.advantage_point02_text{
  font-size: 35px;
  font-weight: 700;
  line-height:59px;
  color:#004D6A;
  padding-left: 40px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.advantage_point02_picture{
  margin:0px 0 50px;
}

.advantage_point02_picture_text{
  font-size: 24px;
  font-weight: 700;
  line-height:43px;
  margin:0px 0 150px;
}

.advantage_point02_picture_text2{
  background: linear-gradient(to bottom, #00000000 0%, #00000000 50%, #F9F27F 50%, #F9F27F 100%);
  font-size: 35px;
  line-height:59px;
  color:#004D6A;

}

.advantage_point03{
  display: flex;
  justify-content: center;
  margin:0px 0 50px;
}

.advantage_point03_text{
  font-size: 35px;
  font-weight: 700;
  line-height:59px;
  padding-left: 40px;
  color:#004D6A;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.advantage_point03_text2{
  font-size: 50px;
  font-weight: 800;
  line-height:69px;
  text-align: left;
}

.advantage_point03_picture{
  margin:0px 0 50px;
}

.advantage_point03_picture_text{

  font-size: 35px;
  line-height:59px;
  font-weight: 700;
  color:#004D6A;
  margin:0px 0 150px;
  
}

.advantage_point03_picture_text2{
  background: linear-gradient(to bottom, #00000000 0%, #00000000 50%, #F9F27F 50%, #F9F27F 100%);
}

.member_title{
  margin:0px 0 50px;
}

.member01{
  margin:0px 0 30px;
}

.member02{
  margin:0px 0 30px;
}

.member03{
  margin:0px 0 30px;
}

.member04{
  margin:0px 0 30px;
}

.member05{
  margin:0px 0 30px;
}

.member06{
  margin:0px 0 150px;
}

.member_secret{
  position:relative;
  top:-120px;
  text-align:right;
  padding-right:4em;
}
.member_secret_sp{
  position:relative;
  font-size:.8em;
  /*top:-100px;*/
  text-align:right;
}

.case_title{
  margin:0px 0 30px;
}

.case{
  margin:0px 0 100px;
}

.relative_case{
  position: relative;
  margin:0 auto;
  max-width:1280px;
}

.corporate_bg{
  position: relative;
  width:auto;
  margin:0 auto;
}

.corporate_logo02{
  position: absolute;
  left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  top:15%;
}

.mashup{
  position: absolute;
  left: 50%;
  top: 52%;
}

.corporate_text{
  position: absolute;
  left: 10%;
  top:30%;
  text-align: left;
  font-size: 14px;
  line-height:21px;
  font-weight: 300;
  background-color: #0080CB;
  color: #FFFFFF;
  width: 400px;
  height: 380px;
  padding : 10px ;
}

.corporate_text2{
  position: absolute;
  left: 50%;
  top:28%;
  font-size: 18px;
  line-height:34px;
  font-weight: 400;
  width: 450px;
  height: 300px;
  padding : 15px ;
  text-align: left;
}

.copy_right_align{
  display: flex;
  justify-content: center;
  align-items: center;
}

.copy_right{
  font-size: 16px;
  padding:30px 0 30px;
}


@media screen and (max-width: 1280px){
    .pc-only{
      display: block;
    }

    .sp-only{
      display: none;
    }

    .btn-top{
      text-align: center;
      font-size:1.9vw;
    }

    .btn-bottom{
      text-align: center;
      font-size:1vw;
    }

    .key_visual_text{
      font-size:1.7vw;
      line-height:3.5vw;
    }

    .about_point01_title{

      font-size:3.3vw;
    }

    .about_point01_text{
      font-size: 1.5vw;
      line-height:3.1vw;
    }

    .about_point02_title{
      font-size:3.3vw;
    }

    .about_point02_text{
      font-size: 1.5vw;
      line-height:3.1vw;
    }

    .about_point03_title{
      font-size:3.3vw;
    }

    .about_point03_text{
      font-size: 1.5vw;
      line-height:3.1vw;
    }

    .about_point04_title{
      font-size:3.3vw;
    }

    .about_point04_text{
      font-size: 1.5vw;
      line-height:3.1vw;
    }



    .advantage_point01_text{
      font-size: 2.7vw;
      line-height:4.6vw;
    }

    .advantage_point01_picture_text{
      font-size: 2.7vw;
      line-height:4.6vw;
    }

    .advantage_point02_text{
      font-size: 2.7vw;
      line-height:4.6vw;
    }

    .advantage_point02_picture_text{
      font-size: 1.8vw;
      line-height:3.3vw;
    }

    .advantage_point02_picture_text2{
      font-size: 2.7vw;
      line-height:4.6vw;
    }

    .advantage_point03_text{
      font-size: 2.7vw;
      line-height:4.6vw;
    }

    .advantage_point03_text2{
      font-size: 3.9vw;
      line-height:4.6vw;
    }

    .advantage_point03_picture_text{
      font-size: 2.7vw;
      line-height:4.6vw;
    }


    .mashup{
      position: absolute;
      left: 50%;
      top: 52%;
    }

    .corporate_text{
      position: absolute;
      left: 10%;
      top:30%;
      font-size: 1.1vw;
      line-height:1.6vw;
      width: 35vw;
      height: 27.3vw;
      padding : 1.1vw ;
    }

    .corporate_text2{
      position: absolute;
      left: 50%;
      top:28%;
      font-size: 1.4vw;
      line-height:2.6vw;
      width: 35vw;
      height: 200px;
      padding : 15px ;
    }

    .copy_right{
      font-size: 16px;
      padding:30px 0 30px;
    }
  }

  @media screen and (max-width: 750px){
    body{
      display: block;
      background-color: #7CE2C5;
      max-width:750px;
      background-clip: border-box;
      margin-left: none;
      margin-right: none;
    }

    .sp_img{
      max-width:750px;
      width:95%;
      height:auto;
      padding:0 10px;
    }

    .logo_img{
      max-width: 500px;
      width:80%;
      height: auto;
    }

    .title_img{
      width:50%;
      height: auto;

    }

    .corporate_img{
      max-width:750px;
      width:100%;
      height:auto;
      vertical-align: bottom;
    }

    .contact_form{
      margin:0 auto;
      max-width:750px;
      width:95%;
      height:auto;
      padding:10px;
    }
    
    .header{
      max-width: 750px;
      width:100%;
      text-align: center;
      display: table;
      table-layout: fixed;
      margin:0 auto;
      padding:10px 0 10px;
    }


    .pc-only{
      display: none;
    }
  
    .sp-only{
      display: block;
    }
  
    .header_back{
      background-color: rgba(255,255,255,0.5);
    }
  
    .tcm_img{
      min-width: 100px;
    }

    .hamburger_btn{
      max-width:40px;
    }
  
    .tcm_img_align{
      padding-left: 5px;
    }

  
    .title1{
      margin:30px 0 10px;
    }
  
    .btn {
      padding:0 10px 0;
    }
  
    p{
      margin:0 0 0;
    }
  
    .btn-top{
      font-size:25px;
    }
  
    .btn-bottom{
      font-size:13px;
    }

  
    .human01{
      position: absolute;
      top: 58%;
      left: 12%;
    }
  
    .human02{
      position: absolute;
      top: 78.5%;
      left: 85%;
    }

    .human01_img{
      max-width:40px;
      width:100%;
      height:auto;
    }
  
    .human02_img{
      max-width:25px;
      width:100%;
      height:auto;
    }
  
    .key_visual_text{
      font-size:4.2vw;
      line-height:8.2vw;
      margin:50px 0 50px;
    }
  
    .about-_title{
      margin:0px 0 20px;
    }

    .about_point01{
      position: relative;
      max-width:750px;
      margin:0px auto 30px;
    }
  
    .about_point02{
      position: relative;
      max-width:750px;
      margin:0px auto 30px;
    }
  
    .about_point03{
      position: relative;
      max-width:750px;
      margin:0px auto 30px;
    }

    .about_point04{
      position: relative;
      max-width:750px;
      margin:0px auto 30px;
    }
  
    .about_point01_title{
      position: absolute;
      top: 15%;
      left: 7%;
      font-size:5.8vw;
      font-weight: 700;
    }
  
    .about_point01_text{
      position: absolute;
      width:86.6vw;
      top: 25%;
      left: 7%;
      font-size: 3.8vw;
      font-weight: medium;
      line-height:8.2vw;
    }
  
    .about_point02_title{
      position: absolute;
      top: 15%;
      left: 7%;
      font-size:5.8vw;
      font-weight: 700;
    }
  
    .about_point02_text{
      position: absolute;
      width:86.6vw;
      top: 25%;
      left: 7%;
      font-size: 3.8vw;
      font-weight: medium;
      line-height:8.2vw;
    }
  
    .about_point03_title{
      position: absolute;
      top: 15%;
      left: 7%;
      font-size:5.8vw;
      font-weight: 700;
      color:#004D6A;
    }
  
    .about_point03_text{
      position: absolute;
      width:86.6vw;
      top: 25%;
      left: 7%;
      font-size: 3.8vw;
      font-weight: medium;
      line-height:8.2vw;
      text-align: left;
    }
  
    .about_point04_title{
      position: absolute;
      top: 15%;
      left: 7%;
      font-size:5.3vw;
      font-weight: 700;
    }
  
    .about_point04_text{
      position: absolute;
      width:86.6vw;
      top: 25%;
      left: 7%;
      font-size: 3.8vw;
      font-weight: medium;
      line-height:8.2vw;
    }

    .advantage_title{
      margin:180px 0 40px;
    }
  
    .advantage_point01{
      display: block;
      margin:0px 0px 30px;
    }
  
    .advantage_point01_text{
      font-size: 5.2vw;
      font-weight: 700;
      line-height:7.8vw;
      padding-left: 0px;
      text-align: center;
      margin:50px 0 0px;
    }
  
    .advantage_point01_picture{
      margin:10px 0 10px;
    }
  
    .advantage_point01_picture_text{
  
      font-size: 5.2vw;
      font-weight: 700;
      line-height:7.8vw;
      margin:0px 0 30px;
    }
  
    .advantage_point02{
      display: block;
      margin:180px 0 40px;
    }
  
    .advantage_point02_text{
      font-size: 5.2vw;
      font-weight: 700;
      line-height:7.8vw;
      padding-left: 0px;
      text-align: center;
      margin:50px 0 0px;
    }
  
    .advantage_point02_picture{
      margin:0px 0 30px;
    }
  
    .advantage_point02_picture_text{
      font-size: 4.2vw;
      font-weight: 700;
      line-height:6.8vw;
      margin:0px 0 180px;
    }
  
    .advantage_point02_picture_text2{
      background: linear-gradient(to bottom, #00000000 0%, #00000000 50%, #F9F27F 50%, #F9F27F 100%);
      font-size: 5.2vw;
      line-height:7.8vw;
    }
  
    .advantage_point03{
      display: block;
      margin:0px 0 50px;
    }
  
    .advantage_point03_text{
      font-size: 5.2vw;
      font-weight: 700;
      line-height:7.8vw;
      padding-left: 0px;
      text-align: center;
      margin:50px 0 0px;
    }
  
    .advantage_point03_text2{
      font-size: 6.6vw;
      font-weight: 800;
      line-height:7.8vw;
    }
  
    .advantage_point03_picture{
      margin:0px 0 30px;
    }
  
    .advantage_point03_picture_text{
  
      font-size: 5.2vw;
      line-height:7.8vw;
      font-weight: 700;
      margin:0px 0 70px;
    }
  
  
    .member_title{
      margin:180px 0 40px;
    }
  
    .member01{
      margin:0px 0 30px;
    }
  
    .member02{
      margin:0px 0 30px;
    }
  
    .member03{
      margin:0px 0 30px;
    }
  
    .member04{
      margin:0px 0 30px;
    }
  
    .member05{
      margin:0px 0 30px;
    }
  
    .member06{
      /*margin:0px 0 100px;*/
    }
  
    .case_title{
      margin:180px 0 40px;
    }
  
    .case{
      margin:0px 0 100px;
    }
  
    .corporate_bg{
      position: relative;
      width:auto;
    }
  
    .corporate_logo02{
      position: absolute;
      top:3%;
      left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    }
  
    .mashup{
      position: static;
      text-align: left;
      width: 100%;
      height: auto;
    }
  
    .corporate_text{
      position: static;
      text-align: left;
      font-size: 3.2vw;
      line-height:5.6vw;
      font-weight: 300;
      width: auto;
      height: auto;
      padding : 10px;
    }
  
    .corporate_text2{
      position: absolute;
      left: 0%;
      top:6%;
      font-size: 3.3vw;
      line-height:9.4vw;
      font-weight: 400;
      width: 90%;
      height: 200px;
      padding : 15px;
    }
  
    .copy_right_text{
      font-size: 18px;
      margin-top: 50px;
    }

    .copy_right_align{
      background-color: #FFFFFF;
    }
    
    .case_img{
      max-width:300px;
      width: 100%;
      padding:0 30px
    }

    .global-nav {
      position: fixed;
      right: -750px; /* これで隠れる */
      top: 0;
      width: 100%; /* スマホに収まるくらい */
      height: 100vh;
      padding-top: 40px;
      background-color: #fff;
      transition: all .6s;
      z-index: 200;
      overflow-y: auto; /* メニューが多くなったらスクロールできるように */
      font-size: 40px;
      line-height:69px;
    }
    .hamburger {
      position: absolute;
      right: 0;
      top: 0;
      width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
      height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
      cursor: pointer;
      z-index: 300;
    }
    .global-nav__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .global-nav__item {
      text-align: center;
      padding: 0 14px;
    }
    .global-nav__item a {
      display: block;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
      text-decoration: none;
      color: #111;
    }
    .global-nav__item a:hover {
      background-color: #eee;
    }
    .hamburger__line {
      position: absolute;
      left: 11px;
      width: 18px;
      height: 1px;
      background-color: #111;
      transition: all .6s;
    }
    .hamburger__line--1 {
      top: 14px;
    }
    .hamburger__line--2 {
      top: 20px;
    }
    .hamburger__line--3 {
      top: 26px;
    }
    .black-bg {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      z-index: 100;
      background-color: #000;
      opacity: 0;
      visibility: hidden;
      transition: all .6s;
      cursor: pointer;
    }
    /* 表示された時用のCSS */
    .nav-open .global-nav {
      right: 0;
    }
    .nav-open .black-bg {
      opacity: .8;
      visibility: visible;
    }
    .nav-open .hamburger__line--1 {
      transform: rotate(45deg);
      top: 20px;
    }
    .nav-open .hamburger__line--2 {
      width: 0;
      left: 50%;
    }
    .nav-open .hamburger__line--3 {
      transform: rotate(-45deg);
      top: 20px;
    }
  }