html{scroll-behavior: smooth;overflow-x: hidden;}
body{
    margin:0;padding:0;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    background: #F4F4F4;
    font-weight: 500;
    overflow-x: hidden;
}


h1,h2,h3,h4,h5,p{margin: 0;color:#000;}
p{font-size: 24px;font-weight: 500;letter-spacing: 2px;line-height: 60px;}
a:hover{opacity: 0.8;}
.navbar{
    padding-right: 40px;
    padding-top: 58px;
    padding-bottom: 10px;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    background: #f4f4f4;
    text-align: right;
}
.navbar a{margin-right: 76px;font-size: 18px;color:#000;font-family: 'Barlow'}
.navbar a:hover{opacity: 0.7;}
.navbar a:last-of-type{margin-right: 0;}
.wrapper{max-width: 1584px;margin:0 auto}
.sec-hero{

  padding: 0;
  height: 100vh;
  padding-top: 100px;

}
.sec-hero img{mix-blend-mode: multiply;}
.sec-hero .wrapper{max-width: 1200px;}
.sec-hero .bot{
    display: flex;margin: 0 40px;align-items: flex-end;
    margin-right: 22px;
    position: absolute;
    bottom: 40px;
    width: 96.2%;
}
.sec-hero .rights{font-size: 12px;font-family: 'Barlow';margin-bottom: 10px;font-weight: 700;}
.sec-hero a {margin-right: 0;margin-left: auto;text-align: center;}
.sec-hero h4{font-size: 15px;font-family: 'Barlow';margin-bottom: 25px;writing-mode: tb-rl;font-weight: 700;}
.sec1{margin-top: 313px;}
.sec h1{font-size: 100px;letter-spacing: 2px;font-weight: 700;}
.sec h3{font-size: 30px;font-weight: 700;letter-spacing: 2px;margin-top: 100px;}

.sec .wrapper{display: flex;justify-content: space-between;}
.sec .wrapper .right{max-width: 516px;}


.sec-message .sec-title{margin-top: 0;}
.sec-message{margin-top: -15vw;}
.sec-message p{margin-bottom: 90px;}

.service-bot{margin-top: 200px;}
.service-bot .item{display: grid;grid-template-columns: auto 1fr;column-gap: 30px;}
.service-bot .item .left{padding-right: 60px;border-right: 1px solid #000;}
.service-bot .item .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.service-bot h3{font-size: 24px; font-weight: 700;}
.service-bot h5{font-size: 12px;margin-top: 18px;}
.service-bot h4{font-size: 15px;margin-bottom: 30px;}
.service-bot h4:last-of-type{margin: 0;}
.service-bot .item:last-of-type{margin-top: 150px;}



#Contents{padding:0}
#FirstView{height: 40vh;}
#FirstView canvas{display: none;}

.sec-title{font-family: 'Barlow';font-size: 50px;text-align: center;margin-bottom: 145px;margin-top: 351px;}

.sec-company .text{display: grid;grid-template-columns: auto 1fr;column-gap: 24px;max-width: 830px;margin:0 auto}
.sec-company .text .left, .sec-company .text .right{padding-bottom: 30px;border-bottom: 1px solid #D8D8D9;padding-top: 32px;}
.sec-company .text .right:last-of-type{border: none!important}
.sec-company .text .left{font-weight: 700;width: 200px;}
.sec-company .text .left-last{border: none!important}



.sec-company img{vertical-align: initial;margin-right: 4px;}
.sec-company a{text-decoration: underline;}
.sec-company a:hover{opacity: 0.8;}
.form{margin:0 auto;max-width: 830px;}


.form .f{
    margin-bottom:50px;display: grid;
    grid-template-columns: 224px auto;

    align-items: center;
  }


  input[type=text],input[type=email], textarea, select {
    width: 100%;
    height: 64px;
    display: inline-block;
    box-sizing: border-box;
    padding-left: 23px;
    color:#B4B4B4;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    border: none;
  }


  label{font-size:16px;color:#333333;letter-spacing: 2px;font-weight: 700;}
  textarea{height: 250px;padding-top: 5px;}
  .form #txt{align-items: start;}

  ::placeholder{color:#B4B4B4;}


  #submit {
    background:#222222;
    border:0 none;
    cursor:pointer;
    max-width: 350px;
    height: 62px;
    font-size:15px;
    color:#fff;
    margin-left:20px;
    letter-spacing:2px;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  #submit:hover{opacity: 0.8;}

  input:focus {
    outline: none!important;
    border: 1px solid #333!important
  }


#submit:disabled{background:#fff;border:none;color:#333;cursor: default;}
#submit:disabled:hover{border:none;color:#B4B4B4;opacity:1}

#submit img{width: 14.67px;position: absolute;right: 20px;line-height: 60px;}

.form .info h4{font-size: 12px;font-weight: 400;letter-spacing: 1px;color:#222222;text-align: center;}
.form .f-btn{margin-bottom: 36px;}
.sec-contact{margin-bottom: 20vh;}

img[src$=".svg"], svg {
    display: inline-block;
    fill: #000;
    width: auto;
}

canvas,#FirstView{display: none;}
#Contents {height: 90vh;min-height: auto;}
#Services, #About, #Recruit {margin:0!important;padding:0!important}





#Services .bg .inline,#About .bg .inline,#Recruit .bg .inline  {
    width: 80vw;
    height: 40vw;
    top: 0vw;
    left:20vw!important;

}
#About .bg .inline{top:-15vw}
#Recruit .bg .inline{top:-10vw;left:40vw!important}
a.line_link.isHover:before{-webkit-animation:lineLink .5s;animation:lineLink .5s}
section .bg{opacity:0.9;mix-blend-mode: multiply}

h1{opacity: 0;}

section .lead svg{display: none;}


.ham{margin-right:0px;display: none;color:#433226;z-index: 99;font-size:30px;cursor: pointer;}
.overlay-ham {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.9);
    overflow-x: hidden;
    transition: 0.4s;


  }

  .overlay-content {
    position: relative;
    top: 50px;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }

  .overlay-content > a {
    padding: 13px 10px;
    text-decoration: none;
    font-size: 28px;
    color: #333;
    display: block;
    transition: 0.3s;
    letter-spacing: 5px;
    font-weight: 500;

  }

  .overlay-ham  a:hover, .overlay-ham  a:focus {
    color: #333;
  }

  .overlay-ham .closebtn {
    position: absolute;
    top: 0px;
    right: 20px;
    font-size: 30px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    color:#333;

  }
  .overlay-ham a{margin: 0;}

  #myNav a{text-decoration: none;}

.service-bot .item .left {max-width: 340px;padding-right: 30px;width: 100%;}

.service-bot .item .right h4{padding-left: 20px}
.sec-hero img {

    width: 85%;
    display: block;
    margin: 0 auto;
}


@media only screen and (max-width: 1600px) {
  .wrapper{padding:0 5vw}
  .sec h1 {font-size: 70px;}
  .sec-message p {  margin-bottom: 60px;}
  p{font-size:20px}
  .sec-title {font-size: 42px;}
  .sec h3 {font-size: 22px;}
}

@media only screen and (max-width: 1200px) {
.sec h1{font-size: 50px;}
.sec h3 {font-size: 18px;margin-top: 40px;}
}

@media only screen and (max-width: 1000px) {
  .sec h1{font-size: 34px;}
  p{font-size: 16px;line-height: 32px;}
  .sec-message p { margin-bottom: 30px;}

  #Contents { height: 50vh;}
  .sec1 {margin-top: 15vw;}


}

@media only screen and (max-width: 900px) {
  .sec h1{font-size: 30px;}
  p{font-size: 14px;}

  .ham{display: block;}
  .navbar a{display: none;}
.navbar {
    padding-top: 0;
    padding-right: 20px;
    background: transparent;
}
  .sec-hero .bot {
    display: flex;
    margin: 0 auto;
    width: 90%;
    right: 0;
    left: 0;
}
  .sec .wrapper .right {
    max-width: 400px;
}
#Contents{z-index: auto;}
}

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

  .sec h1 {font-size: 22px;}
  .service-bot h3 {font-size: 18px;}
  p {
    font-size: 13px;
    line-height: 28px;
}
.sec-title {margin-top: 100px;}
.lead:before{padding-top: 0!important;}
.sec h3 { font-size: 14px;margin-top: 20px;}
a.line_link:before {height: 2px;}
.sec1 {  margin-top: 10vw;}
.service-bot .item .left{padding-right: 20px}
.service-bot .item .left{max-width: 270px}
}

@media only screen and (max-width: 650px) {
.sec .wrapper{display:grid;grid-template-columns:1fr;row-gap: 40px;}
.service-bot .item{grid-template-columns: 1fr;row-gap: 20px;}
.service-bot .item .left{border:none;padding:0}
.service-bot,.service-bot .item:last-of-type{ margin-top: 50px;}

.sec-message .left{grid-row:1/2}
.sec-title {margin-bottom: 60px;}
#Services .bg .inline, #About .bg .inline, #Recruit .bg .inline{
  top:-35vw;
}
#Contents {height: 20vh;}


.sec-hero .bot {bottom:auto}
.sec-hero {
  padding: 0;
  height: 50vh;
  padding-top: 20px;
}
.sec-hero .wrapper{margin-top: 50px;margin-bottom: 30px;}
.form .f {
  display: grid;
  grid-template-columns: 180px auto;

}
.sec-company .text .left{width: 100px;}
.service-bot h4{font-size: 13px;}
.service-bot .item .right h4{padding-left: 0px}
}

@media only screen and (max-width: 500px) {
  .sec-title {
    font-size: 32px;
    margin-bottom: 60px;
    margin-top: 60px;
}
#Contents {height: 10vh};

.form .f {
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: 180px auto;
  align-items: center;
}
label,input[type=text], input[type=email], textarea, select{font-size: 14px;}
.form .f {grid-template-columns: 1fr;row-gap: 10px;}
textarea {height: 200px;}
.sec-hero .rights{margin-bottom: 0;}
.sec-company .text .left{width: 60px;}
.sec-company .text .left, .sec-company .text .right {
  padding-bottom: 15px;
  padding-top: 15px;
}
#submit {
  width: 100%;
  margin:0 auto;
  max-width: 260px;
}

}