@charset "utf-8";
@import url('/common/reset.css');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://use.fontawesome.com/releases/v5.14.0/css/all.css');



/*=======================================*/
/* common */
/*=======================================*/
/* font ==============================*/
html { font-size: 62.5%; }
body { position: relative; font-size: 1.8em; font-family: 'Raleway', sans-serif; font-weight: 300; color:#707070;}
label[for]{ cursor:default; }
@media screen and ( max-width: 767px ) {
  body { font-size: 1.6em; }
}
/* flexbox ==============================*/
.flb{ display: flex; }
@media screen and ( max-width:767px ){
  .flb-sp-col{ flex-direction: column; }
} 

/* parts ==============================*/
img{ width: 100%; }

.fz-large{ font-size: 110%; }
.fz-small{ font-size: 90%; }

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

.icon-list{ justify-content: center; }

@media screen and ( max-width: 767px ) {
  .pc-display{ display: none; }
  .sp-display{ display: block; }
}

section,
header,
.section-inner{ max-width: 920px; margin: auto; }

/*=======================================*/
/* header */
/*=======================================*/
header{ padding-top: 90px ;  padding-bottom: 20px;}
.header-firstarea{ justify-content: space-between; align-items: center; margin-bottom: 80px; }
h1{ font-size: 5.7rem ; letter-spacing:0.2rem; font-weight: 200; }
.by-name{ font-size: 40%; }
.header-nav-list{ font-size: 1.7rem; justify-content: flex-end; }
.header-nav-list-item{ font-size: 1.6rem; }
.header-nav-list-item::after{ content: " ｜ "; }
.header-nav-list-item:last-child::after{ content: ""; }
@media screen and ( max-width:767px ){
  h1{ font-size: 3.5rem ; }
  .header-nav-list{ margin-right: 1em; margin-left: 1em; }
  .header-firstarea{ margin-bottom: 15px; }
  .header-nav-list-item a{ display: block; font-size: 1.8rem; text-align: right; border-bottom: 1px solid #f5f5f5; padding: 0.5em; }
  .header-nav-list-item::after{ content: none; }
}
@media screen and ( max-width:768px ){
  header{ padding-top: 20px; margin-left: 0.5em; padding-bottom: 18px; padding-right: 0.5em; line-height: 1.5em;}
}
/*=======================================*/
/* footer */
/*=======================================*/
footer{ padding: 2em 0; background-color: #707070; }
.footer-copy{ text-align: center; color: #FFF; }

/*=======================================*/
/* section */
/*=======================================*/
section{ margin-bottom: 140px; }
.section-mv{ max-width: 100%; background-image: url(/img/mv.png); background-position: center; background-size: cover;}
.section-inner{ position: relative; height: 780px;}
.mv-catch-area{ position: absolute; color: #FFF; top:80px; right: 55px;}
.mv-catch-text{ margin-bottom: 55px; line-height: 2em; letter-spacing:0.05em;}
.mv-catch-copy{ position: absolute; bottom: -5px; width: 100%;}
.mv-catch-copy-text{ color: #FFF; font-size: 10.0rem; font-weight: 600; line-height: 0.8em; letter-spacing:1rem;}
.mv-catch-copy-text-second{ text-align: right; }
@media screen and ( max-width:767px ){
  section{ margin-left: 2rem; margin-right: 2rem; }
  .section-mv{ position: relative; margin-left: 0; margin-right: 0; background-image: url(/img/mv-sp.png); }
  .section-mv::before{ position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.33); top:0; left:0; }
  .section-inner{ height: 354px;}
  .mv-catch-area{ position: static; font-size: 1.4rem; color: #FFF; text-align: center; top:auto; right: auto; padding-top: 37px;}
  .mv-catch-text{ margin-bottom: 10px; line-height:3rem;}
  .mv-catch-copy{ bottom: -3px;}
  .mv-catch-copy-text{ font-size: 5.0rem; letter-spacing:0.2rem;}
}
@media screen and ( max-width:768px ){
  section{ margin-left: 2rem; margin-right: 2rem; }
  .section-mv{ margin-left: 0; margin-right: 0; }

}
.sec-tit{ font-size: 5.0rem; font-weight: 200; letter-spacing:0.1em;text-align: center; margin-bottom: 80px;}
.sec-txt-area{ line-height: 1.8em; }
.sec-txt-paragraph{ margin-bottom: 2em; }
@media screen and ( max-width:767px ){
  .sec-tit{ font-size: 4.0rem;}
}

.card li{ width: 280px; border: 1px solid #656565; padding: 25px;}
@media screen and ( max-width:767px ){
  .card li{ margin-bottom: 1.5em; width: 100%; }
  .card li:last-child{ margin-bottom: 0; }

}

/*=======================================*/
/* service */
/*=======================================*/
.card-service{ justify-content: space-between; margin-bottom: 25px;}
.card-service-tit{ font-size: 2.2rem; margin-bottom: 20px; justify-content: center; align-items: center;}
.card-service-tit::before{ margin-right: 25px; }
.card-service-txt{ font-size: 1.5rem; line-height: 1.7em;}
.card-service-tit-lp::before{ content: url(/img/file-regular.png); }
.card-service-tit-dire::before{ content: url(/img/pencil-alt-solid.png); }
.card-service-tit-wp::before{ content: url(/img/wordpress-brands.png); }
.service-other-tit{ border-bottom: 1px solid #656565; padding-bottom: 0.5em; margin-bottom: 0.5em;}
.service-other-tit-alphabet{ display: inline-block; margin-left: 10px; font-size: 90%;}
.other-list{ font-size: 1.5rem; line-height: 1.5em; list-style: square; margin-left: 20px;}
@media screen and ( max-width:767px ){
  .card-service-txt{ font-size: 1.4rem;}
}

/*=======================================*/
/* skill */
/*=======================================*/
.skill-list{ flex-wrap: wrap; justify-content: space-between;}
.skill-list-items{ flex-basis: 48%; margin-bottom: 25px;}
.skill-list-items::before{ content: ""; width: 84px; background-size: contain; background-repeat: no-repeat; vertical-align: middle; margin-right: 30px; }
.skill-list-items-html::before{ background-image: url(/img/icon-html.png); }
.skill-list-items-js::before{ background-image: url(/img/icon-js.png); }
.skill-list-items-wp::before{ background-image: url(/img/icon-wp.png); }
.skill-list-items-ps::before{ background-image: url(/img/icon-ps.png); }
.skill-list-items-xd::before{ background-image: url(/img/icon-xd.png); }
.skill-list-items-ai::before{ background-image: url(/img/icon-ai.png); }
.skill-list-items-bs::before{ background-image: url(/img/icon-bs.png); }
.skill-list-items-dw::before{ background-image: url(/img/icon-dw.png); }
.skill-list-items-inner{ font-size: 1.6rem; height: 70px; flex-basis:130%;}
.skill-list-item-tit{ font-weight: 600; margin-bottom: 0.3em;}
.skill-list-item-txt{ line-height: 1.5em; }
@media screen and ( max-width:767px ){
  .skill-list-items{ flex-basis:100%; }
  .skill-list-items-inner{ font-size: 1.4rem; }

}

/*=======================================*/
/* works */
/*=======================================*/
.section-wrap{ padding-bottom: 140px; }
.section-works{ margin-bottom: 0; }
.works-list-items{ position: relative; }
.works-list-items-mask{ position: absolute; width: 94%; height: 90%; top:5%; left: 3%; opacity: 0; background-color: rgba(0,0,0,0.6); transition:		all 0.6s ease; -webkit-transition:	all 0.6s ease; }
.works-list-items-mask-inner{ color: #FFF; text-align: center; text-shadow: 0 2px 3px #000000;}
.works-list-items-mask-tit{ font-size: 2.6rem; font-weight: 600; letter-spacing: 0.2em; margin-bottom: 0.5em;}
.works-list-items-mask-caption{ font-size: 1.6rem;  letter-spacing: 0.1em;}
.works-list-items:hover .works-list-items-mask{ cursor: pointer; opacity: 1; padding-top: 10%; }
.works-icon{ margin-top: 1.5em; justify-content: center; margin-right: 0.5em; text-shadow: none;}
.works-icon-item a{ display: block; width: 2em; height: 2em; background-color: #FFF; border-radius: 1.5em;  margin-right: 0.25em; margin-left: 0.25em;}
.works-icon-item a i{ color: #464646; padding: 0.5em 0.2em;}
@media screen and ( max-width:767px ){
  .works-list-items-mask-caption{ font-size: 1.4rem; letter-spacing: 0; }
}
/*=======================================*/
/* contact */
/*=======================================*/
.contact-items{ align-items: center; margin-bottom: 1em;}
.contact-items-textarea{ align-items: end; }
.contact-label{ width: 7em; margin-right: 30px; }
.contact-input{ width: 100%; border:1px solid #656565; border-radius: 5px; padding: 0.5em;}
.contact-input-textarea{ resize: vertical; line-height: 1.3em; height: calc( 1.3em * 5 + 1em);}
input::placeholder,textarea::placeholder { color: #b9b9b9; }
input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #b9b9b9; }/* IE */
input::-ms-input-placeholder,textarea::-ms-input-placeholder { color: #b9b9b9;}/* Edge */
.form-required{ display: block; color: #ff8080; font-size: 80%; margin-top: 0.2em;}
.end-message,
.false-message { display: none; font-weight: 600; text-align: center;}
@media screen and ( max-width:767px ){
  .contact-label{ width: 100%; margin-bottom: 0.2em;}
  .contact-items{ align-items: flex-start;}
  .form-required{ display: inline-block; margin-left:0.5em}
}

/* button ==============================*/
.btn{ width: 100%; text-align: center;}
.btn-submit{ color: #FFF; background-color: #707070; border: 1px solid #ffffff; border-radius: 2px; padding: 10px; }
.btn-submit:hover{ transition:all .6s ease; color: #707070; background-color: #FFF; border: 1px solid #707070; }

/*=======================================*/
/* SNS area */
/*=======================================*/
.sns-area{ text-align: center;}
.sns-list{ justify-content: center; margin: 1em auto ;}
.sns-list-item-icon{ margin-left: 0.25em; margin-right: 0.25em; }
/* SNS area contact ==============================*/
.contact-sns-area{ margin-bottom: 60px;}
/* SNS area footer ==============================*/
.footer-sns-list{ margin: 1em auto 0;}

/*=======================================*/
/* hamburger */
/*=======================================*/
@media screen and ( max-width:767px ){
  .hamburger-menu{
    position: fixed;
    top: 6vw;
    right: 15px;
    width: 32px;
    height: 40px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
  }
  .hamburger-menu span{
    position: absolute;
    width: 32px;
    height: 5px;
    background: #4B4B4B;
    border-radius: 2px;
    -webkit-transition: all 400ms;
    transition: all 400ms;
  }
  .hamburger-menu span:nth-child(1){top:0;}
  .hamburger-menu span:nth-child(2){top:9px;}
  .hamburger-menu span:nth-child(3){top:18px;}
  .hamburger-menu span:nth-child(4){
    top:23px;
    background: none;
    font-size: 1.1rem;
    height: 20px;
    text-align: center;
  }
  .hamburger-menu.open span:nth-child(1){
    background-color: #f5f5f5;
    -webkit-transform: translateY(5px) rotate(-45deg);
    transform: translateY(5px) rotate(-45deg);
  }
  .hamburger-menu.open span:nth-child(2){
    opacity: 0;
  }
  .hamburger-menu.open span:nth-child(3){
    background-color: #f5f5f5;
    -webkit-transform: translateY(-13px) rotate(45deg);
    transform: translateY(-13px) rotate(45deg);
  }
  .hamburger-menu.open span{
    color: #f5f5f5;
    width: 35px;
  } 
  .header-nav{
    color: #f5f5f5;
    position: fixed;
    top: 0;
    right: -200px;
    width: 200px;
    height: 100%;
    padding-top: 80px;
    background:rgb(0, 0, 0,0.9);
    opacity: 0.9;
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2
  }
  .header-nav.open{
    right:0;
  }
  .header-nav.close{
    right:-200px;
  }
}

/*---------------------------------------
scrollボタン
---------------------------------------*/
.page-top{width: 40px; height: 40px; position: fixed; right: 1.5vw; bottom: 1.5vw; background: #4B4B4B; opacity: 0.7; border-radius: 50%; }
.page-top a{position: relative; display: block; width: 40px; height: 40px; text-decoration: none; }
.page-top a::before{font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f106'; font-size: 20px; color: #fff; position: absolute; width: 40px; height: 40px; top: 39%; bottom: 0; right: 0; left: 2%; margin: auto; text-align: center;}