@charset "UTF-8";
html{
  font-size: 100%;
}
a{
  text-decoration: none;
}
img{
  max-width: 100%;
}
footer{
  background: #000;
  text-align: center;
  padding: 26px 0;
  position: relative;
  bottom: 0;

}
footer p{
  color: #fff;
  font-size: 0.875rem;
}
body{
  font-family:"Yu Gothic Medium","游ゴシック Medium","YuGothic","游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;
  line-height: 1.7rem;
  z-index: 0;
}
.load-view{
  position:fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  z-index: 4;
  background-color: white;
  }
  .load-view img{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20%;
  }
.page-header{
  display: flex;
  justify-content: space-between;
  font-family: 'Philosopher',serif;
}
/* @media screen and (min-width:769px){ */
.sns{
  text-align: center;
  margin-bottom: 70px;
}
.insta{
  width: 30px;
  margin-right: 5px;
}
.line{
  margin: auto auto;
  border-bottom: 1px #000 solid;
  width: 110px;
  margin-top: 8px;

}
.twitter{
  position: relative;
  width: 40px;
  top:5px;
  margin-left: 5px;
}
.wrapper{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}



  .service-title {
    font-size: 50px;
    color : #000;
    text-align: center;
text-transform: uppercase;
font-family: 'Philosopher',serif;
  }

  .design_p,.design_y,.design_b{
  background: rgba(220, 220, 220, 0.5);
  border-radius: 10px;
   padding: 50px 40px;
  }
  /* .designtrip{
    content: " ";
    width: 0px;
    border-bottom: 48px solid rgba(220, 220, 220, 0.5);
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    position: relative;

  } */

  .sub-title h2{
    font-size: 50px;
    color : #000;
    margin: 60px 0;
    text-transform: uppercase;
    font-family: 'Philosopher',serif;
}
.career p{
  padding: 10px 0;
}
.career{
  margin-bottom: 40px;
}

.profile-info p{
    padding: 5px 0;
}

.form,.form-text,.form-mail,.form-message {
    margin-bottom: 40px;
}
label {
    font-size: 1.125rem;
    display: block;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    background: #fff;
    border: 2px #000 solid;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
    width: 100%;
    max-width: 400px;
}
textarea {
    width: 100%;
    max-width: 600px;
    height: 6rem;
}
input[type="submit"] {
    border: none;
    cursor: pointer;
    line-height: 1;
}
.form-name{
  display: flex;
  margin-bottom: 5px;
}
.mandatory{
  font-size: 0.9rem;
  background: #ff0000;
  color: #fff;
  margin-left: 30px;
  padding: 3px 10px;
  margin-bottom: 3px;
}
.design_p,.design_y,.design_b{
  display: none;
}
form .button{
  color: #fff;
  font-size: 1.2rem;
  background: #000;
  padding: 20px 60px;
  margin-left: 50px;
  border-radius: 5px;
}
form .button:hover{
  background: rgba(0,0,0,.5);
}
.alert{
  color: #f00;
}
.ok{
  text-align: center;
  margin: 100px 0;
}
.return{
  margin-top: 50px;
}
.ok a{
  font-size: 1.25rem;
}
.ok p{
  margin: 5px 0;
}
.ok a:hover{
  text-decoration: underline;
}
.btn-trigger{
  position:fixed;
  width:40px;
  height:32px;
  top:50px;
  right: 0%;
  transform: translateX(-50%);
  z-index: 3;

}
.btn-trigger span{
  position:absolute;
  left: 0;
  width:100%;
  height:4px;
  background-color:#000;
  border-radius:4px;
}
.btn-trigger,.btn-trigger span{
  display:inline-block;
  transition:all .5s;
  -webkit-transition:all .5s;
  box-sizing:border-box;
}
.btn-trigger span:nth-of-type(1){
  top:0;
}
.btn-trigger span:nth-of-type(2){
  top:14px;
}
.btn-trigger span:nth-of-type(3){
  bottom:0;
}
.active span{
  
background-color: #000;
}
.active span:nth-of-type(1){
  -webkit-transform:translateY(14px) rotate(-45deg);
  transform:translateY(14px) rotate(-45deg);

}
.active span:nth-of-type(2){
  opacity:0;
}
.active span:nth-of-type(3){
  -webkit-transform:translateY(-14px) rotate(45deg);
  transform:translateY(-14px) rotate(45deg);
}
.button_black span{
background-color: #000;
}

@media screen and (min-width:769px){
  .logo{
    position: relative;
    width: 80%;
    object-fit: cover;
    top: 20px;

  }
  .main-nav{
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    list-style: none;
    margin-top: 90px;
    font-family: 'Philosopher',serif;
  }
  .main-nav li{
    margin-left: 36px;
  }
  .main-nav a{
    color: #000;
  }
  .main-nav a:hover{
    text-decoration: underline;
  }
.page-header button{
  display: none;
}
.big-bg{
  background-repeat: no-repeat;
  background-size: cover;
  margin: 50px 0;
}
#home{
  background-image: url(../img/bg-img.png);
  min-height: 70vh;
  }
  .home-content{
    margin-bottom: 300px;
  }
.service {
  margin: 100px 0;
  display: flex;
  justify-content:space-around;
}
.service_sp{
  display: none;
}
.pink p{
  font-size: 120%;
   border-radius: 50%;
  background-color: rgba(255,105,180,.5);
  padding: 60px 40px;
  white-space: nowrap;
}
.blue p{
  font-size: 120%;
  padding: 60px 30px;
  border-radius: 50%;
  background-color: rgba(0,255,255,.5);
  white-space: nowrap;
}
.yellow p{
  font-size: 120%;
  padding: 60px 20px;
  border-radius: 50%;
  background-color: rgba(255,255,0,.5);
  white-space: nowrap;
}
.profile{
  display: flex;

}
.profile-img{
  width: 30%;
  height: auto;
  object-fit: cover;
}
.profile-info{
  margin-left: 50px;
  margin-top:80px;
}
.workimg img{
  object-fit:contain;
}
.workimg img{
 width:100%;
}
.workimg li{
  position: relative;
  
  margin: 20px 0;
  /* text-align: center; */
}
.workimg div{
   position: absolute;
   width: 100%;
   height: 100%;
   display: none;
   top:0;
  left: 0;
  background: rgba(0,0,0,.7);
}
.workimg p{
  position: relative;
 color: #fff;
 text-align:center;
 font-size: 150%;
}
.work-text{
  display: none;
}
#page-top{
  display: none;
}
.sub-title{
  margin-top: 100px;
}
.main-nav_sp{
  display: none;
  /* position: absolute; */
}
}
/* } */
@media screen and (max-width:768px){
  .page-header{
    flex-direction: column;
  }
  .smart-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 4%;
    height: 120px;


  }
.main-nav_sp{
  display: none;
  position: fixed;
  background: rgba(240,240,240,.9);
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 30%;
  font-size: 1.5rem;
  z-index: 1;

}
.main-nav_sp a{
  margin: 40px 0;
  font-family: 'Philosopher',serif;
}
.main-nav_sp h3{
  margin: 40px 0;

}
.close-button{
  width: 40px;

}
  .logo{
    position: relative;
    width: 70%;
     height: 100%;
    object-fit: contain;

  }
  nav{
    width: 100%;
  }
.main-nav{
  display: none;
  width: 100%;
  background:  #fff;
  border-top:  2px #000 solid;
  text-transform: uppercase;
}
.main-nav li{

  border-bottom: 2px #000 solid;

  padding: 15px 0 10px;
color: #000;
}
.main-nav h3{
    margin-left: 20px;
}
.main-nav li:hover{
  background:  #000;
  color:#fff;
}

.page-header button{

width:100px;
height: 100%;


}
.wrapper{
  padding: 0;
}
.big-bg{
background-repeat: no-repeat;

}
#home{
  background-image: url(../img/bg-img_sp.png);
  min-height: 100vh;
  background-size: contain;
  height: 100px;
}
.home-content{
  margin:  4%;
}
.sub-content{
  position: relative;
  /* top: -250px; */
}
.sub-title{
  text-align: center;
}

.career{
  text-align: left;

}
.profile{
  text-align: center;
}

.profile-info{
  margin: 30px 0;
  /* text-align: left; */
}
.profile-img{
  margin-top: 50px;
  width: 50%;
  height: auto;
  object-fit: cover;
}


.workimg li{
  width: 100%;
  text-align: center;

}
.workimg div{
   position: absolute;
   width: 100%;
   height: 10%;
   display: inline;
   bottom:0;
  left: 0;
  background: rgba(0,0,0,.7);
}
.workimg img{
  z-index: -1;
}
.work-text{
  display: block;
  background: rgba(0,0,0,.7);
  position: relative;
  left:0;
  top:-25px;
  color: #fff;
  text-align:center;
  z-index: 0;

}
form{

margin: 0 10%;
}
label{
  text-align: center;
}

/* .form{
  text-align: center;
}
.form-name{
  text-align: center;
} */
textarea {
    width: 100%;
    max-width: 400px;
    height: 6rem;
}
.service{
  display: none;
}

.service_sp{
  margin: 70px 0;
  display: flex;
  flex-direction: column;
 text-align: left;
}

.pink p{
  border-radius: 50%;
  background-color: rgba(255,105,180,.5);
  white-space: nowrap;
  width:150px;
  padding:60px 0;
margin: 20px auto;
text-align: center;

}
.blue p{
  border-radius: 50%;
  background-color: rgba(0,255,255,.5);
  white-space: nowrap;
  width:150px;
  padding:60px 0;
margin: 20px auto;
text-align: center;}
.yellow p{
  border-radius: 50%;
  background-color: rgba(255,255,0,.5);
  white-space: nowrap;
  width:150px;
  padding:60px 0;
margin: 20px auto;
text-align: center;
}

.design_pink,.design_yellow,.design_blue{
  background: rgba(220, 220, 220, 0.5);
  border-radius: 10px;
 padding: 20px 20px;
 margin: 0 4%;
 margin-bottom: 70px;
}
#page-top{
  position: fixed;
  right: 25px;
  bottom: 80px;
  width: 50px;
  height: 50px;
  opacity: 0;
  transition:opacity 350ms ease;
}
.ok{
  text-align: center;
  margin: 100px 0 70%;

}
.return{
  margin-top: 50px;

}
.ok a{
  font-size: 1.25rem;
}
.ok p{
  margin: 5px 0;

}
.ok a:hover{
  text-decoration: underline;
}
form{
  margin-bottom: 100px;
}

}