@charset "UTF-8";
@font-face {
  font-family: 'GenJyuuGothic';
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/GenJyuuGothic-P-Normal.ttf") format("truetype"), url("../webfonts/GenJyuuGothic-P-Normal.woff") format("woff"); }
@font-face {
  font-family: 'GenJyuuGothic';
  font-style: normal;
  font-weight: 500;
  src: url("../webfonts/GenJyuuGothic-P-Medium.ttf") format("truetype"), url("../webfonts/GenJyuuGothic-P-Medium.woff") format("woff"); }
a {
  opacity: 1;
  transition: opacity .3s; }
  a img {
    filter: opacity(1);
    transition: filter .3s; }
  a:hover {
    opacity: .7;
    transition: opacity .3s; }
    a:hover img {
      filter: opacity(0.7);
      transition: filter .3s; }

.wrapper {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  font-family: 'Noto Sans JP', 'Open Sans', sans-serif; }

.animation {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  transform: translateY(30px); }

.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); }

/*ヘッダー*/
.logo {
  margin-top: 0; }
  @media (max-width: 767px) {
    .logo {
      width: 80%;
      padding-top: 2%; } }

.header_img {
  margin-top: 0; }
  @media (max-width: 767px) {
    .header_img {
      margin-top: 3%; } }

.header_wrap {
  display: flex;
  background-color: #fff;
  padding: 1% 0;
  max-width: 1024px;
  width: 100%;
  justify-content: space-between; }
  @media (min-width: 1281px) {
    .header_wrap {
      position: fixed;
      z-index: 999; } }

.header {
  max-width: 1024px;
  margin: 0 auto;
  /*height: 68rem;*/
  /*background-image: url("../img/home/header_img.png");*/
  background-repeat: no-repeat;
  position: relative; }

.headerNavWrap {
  display: none;
  margin-top: 1%; }
  @media (min-width: 1281px) {
    .headerNavWrap {
      position: relative;
      width: 65%;
      display: block; } }

.headerNavLi {
  display: flex;
  position: absolute;
  top: 0;
  right: 18%; }

.headerNavList {
  margin-left: 10%;
  font-size: 18px; }

.headerNavList:hover {
  color: #EA5404; }

.main-catch {
  position: relative;
  display: block;
  padding-top: 3%; }

.main-catch_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  max-width: 90%; }

.main-catch_txt {
  font-family: "Helvetica Neue LT Std";
  text-align: inherit;
  color: #fff;
  font-size: 65px;
  letter-spacing: 3px; }
  @media (min-width: 1281px) {
    .main-catch_txt {
      font-size: 76px; } }

.main-catch_span {
  margin-left: 4%; }

.main-catch_txt2 {
  font-size: 28px;
  text-align: center;
  margin: 5% 8%;
  letter-spacing: 3px; }
  @media (max-width: 767px) {
    .main-catch_txt2 {
      font-size: 14px; } }

.main-catch_sp {
  position: relative;
  display: none; }
  @media (max-width: 767px) {
    .main-catch_sp {
      display: block; } }

.main-catch_txt_sp {
  text-align: inherit;
  color: #fff;
  font-size: 27px;
  letter-spacing: 3px; }

/*ハンバーガー*/
.hamburger_sp {
  display: block; }
  @media (min-width: 1281px) {
    .hamburger_sp {
      display: none; } }

.hamburger {
  display: block;
  position: fixed;
  z-index: 3;
  right: 13px;
  top: 1px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  text-align: center; }

.hamburger span {
  display: block;
  position: absolute;
  width: 30px;
  height: 5px;
  left: 6px;
  background: #EA5404;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out; }

.hamburger span:nth-child(1) {
  top: 10px; }

.hamburger span:nth-child(2) {
  top: 20px; }

.hamburger span:nth-child(3) {
  top: 30px; }

.NuvMenu {
  color: #EA5404;
  line-height: 300%;
  margin-top: 27px;
  font-weight: bold;
  font-size: 13px; }

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top: 16px;
  left: 6px;
  background: #fff;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  transform: rotate(315deg); }

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background: #fff;
  -webkit-transform: rotate(-315deg);
  -moz-transform: rotate(-315deg);
  transform: rotate(-315deg); }

nav.globalMenuSp {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  color: #fff;
  background: #ea5404;
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
  visibility: hidden; }

nav.globalMenuSp.active {
  opacity: 100;
  visibility: visible; }

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%; }

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all; }

nav.globalMenuSp ul li:last-child {
  padding-bottom: 0; }

nav.globalMenuSp ul li:hover {
  background: #ddd; }

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration: none;
  font-size: 25px; }

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100; }

/*共通*/
.main_wrap {
  display: flex;
  padding: 8% 4% 6%;
  justify-content: end;
  align-items: baseline; }
  @media (max-width: 767px) {
    .main_wrap {
      margin: 8% 0 5% 2%;
      padding: 8% 4% 0; } }

.header-3 {
  font-size: 50px; }
  @media (max-width: 767px) {
    .header-3 {
      font-size: 28px; } }

.header_txt {
  font-size: 30px;
  margin-left: 1%; }
  @media (max-width: 767px) {
    .header_txt {
      font-size: 10px; } }

@media (max-width: 767px) {
  .concept_img {
    width: 60%; } }

.main_txt01 {
  font-size: 20px;
  font-weight: bold;
  width: 81%;
  margin: 10% auto 6%; }
  @media (max-width: 767px) {
    .main_txt01 {
      font-size: 13px;
      margin: 10% auto 12%; } }

.main_txt02 {
  line-height: 3rem;
  margin-bottom: 5%; }

/*私たちのクリエイト*/
#concept .concept_wrap {
  background-image: url("../img/home/concept-bg.png");
  padding-bottom: 1%; }
#concept .concept_img {
  margin: 0 auto; }
#concept .letter_space {
  letter-spacing: 3px; }
#concept .header-4 {
  text-align: center;
  font-size: 30px;
  color: #EA5404; }
  @media (max-width: 767px) {
    #concept .header-4 {
      font-size: 14px; } }
#concept .header-txt {
  text-align: center;
  font-size: 28px;
  color: rgba(84, 82, 82, 0.75);
  margin-bottom: 5%;
  margin-top: -1%;
  font-weight: bold; }
  @media (max-width: 767px) {
    #concept .header-txt {
      font-size: 12px;
      margin-bottom: 12%;
      margin-top: 1%; } }
#concept .concept_txt_wrap {
  width: 81%;
  margin: 0 auto; }
  @media (max-width: 767px) {
    #concept .concept_txt_wrap {
      font-size: 14px; } }
#concept .concept_span {
  color: #EA5404;
  font-weight: 500; }

#service {
  /*.btn::before{
    background:#fff;
    content: "";
    position: absolute;
    left: -10px;
    top: 0px;
    height: 100%;
    width: 0;
    transform: skewX(20deg);
    transition: all .2s ease-in;
    z-index: -1;
  }*/
  /*.btn:hover::before{
    width: 110%;
    transition: all .2s ease-in;
    z-index: -1;
  }*/
  /*.btn02::before{
    background:#fff;
    content: "";
    position: absolute;
    left: -10px;
    top: 0px;
    height: 100%;
    width: 0;
    transform: skewX(20deg);
    transition: all .2s ease-in;
    z-index: -1;
  }*/
  /*.btn02:hover::before{
    width: 110%;
    transition: all .2s ease-in;
    z-index: -1;
  }*/ }
  #service .service {
    display: flex; }
    @media (max-width: 767px) {
      #service .service {
        display: block; } }
  @media (max-width: 767px) {
    #service .service_content {
      width: 80%;
      margin: 0 auto; } }
  #service .service_wrap {
    margin-bottom: 5%;
    padding: 2%;
    width: 100%;
    position: relative; }
    @media (min-width: 1281px) {
      #service .service_wrap {
        height: 600px; } }
  #service .service_header_img {
    margin: 0 auto;
    height: 16rem;
    background-image: url(../img/home/service-img01.png);
    background-repeat: no-repeat;
    position: relative; }
  #service .header-4 {
    color: #000;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 46%;
    width: 95%;
    text-align: center;
    transform: translateY(-50%) translateX(-50%); }
    @media (min-width: 1281px) {
      #service .header-4 {
        left: 43%; } }
  #service .header-4:before {
    content: url(../img/home/villa_logo_service.png);
    vertical-align: middle;
    line-height: 2rem;
    display: inline-block; }
  #service .service_sentence_wrap {
    margin-left: 3%;
    letter-spacing: 3px; }
  #service .header-5_service {
    color: #EA5404;
    font-size: 16px; }
  #service .main_txt03 {
    line-height: 3rem;
    margin-bottom: 1%;
    margin-top: -1%; }
  #service .main_txt03:before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 0.8em;
    height: 0.8em;
    background: #000;
    margin-right: 1%; }
  #service .service_header_img02 {
    width: 100%;
    margin: 0 auto;
    height: 16rem;
    background-image: url(../img/home/service-img02.png);
    background-repeat: no-repeat;
    position: relative; }
  #service .hudousan-pro_img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%); }
    @media (min-width: 1281px) {
      #service .hudousan-pro_img {
        left: 45%; } }
  #service .service_header_img03 {
    margin: 0 auto;
    height: 16rem;
    background-image: url(../img/home/service-img03.png);
    background-repeat: no-repeat;
    position: relative; }
  #service .header-4_02 {
    color: #000;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    text-align: center;
    transform: translateY(-50%) translateX(-50%); }
  #service a:visited {
    color: #fff; }
  #service a {
    text-decoration: none; }
  @media (max-width: 767px) {
    #service .position {
      height: 100%;
      width: 50%;
      margin: 0 auto; } }
  #service .btn {
    color: #fff;
    font-weight: bold;
    position: absolute;
    right: 7%;
    bottom: 0;
    text-align: center;
    display: inline-block;
    width: 140px;
    height: 40px;
    border: 2px solid #000;
    padding: 5px;
    overflow: hidden;
    margin-top: 15%;
    background-color: #000; }
    @media (max-width: 767px) {
      #service .btn {
        position: unset; } }
  #service .btn:hover {
    color: #000;
    background-color: #fff; }
  #service a:visited {
    color: #fff; }
  #service a {
    text-decoration: none; }
  @media (max-width: 767px) {
    #service .position02 {
      height: 100%;
      width: 50%;
      margin: 0 auto; } }
  #service .btn02 {
    color: #fff;
    font-weight: bold;
    position: absolute;
    right: 7%;
    bottom: 0;
    text-align: center;
    display: inline-block;
    width: 140px;
    height: 40px;
    border: 2px solid #000;
    padding: 5px;
    overflow: hidden;
    margin-top: 15%;
    background-color: #000; }
    @media (max-width: 767px) {
      #service .btn02 {
        position: unset; } }
  #service .btn02:hover {
    color: #000;
    background-color: #fff; }
  #service .handling_wrap {
    border: solid 1px #EA5404;
    padding: 1% 6%;
    width: 80%;
    margin: 0 auto; }
    @media (max-width: 767px) {
      #service .handling_wrap {
        font-size: 13px; } }
  #service .handling_txt01 {
    font-weight: bold;
    color: #EA5404; }
  #service .main_txt04 {
    line-height: 2rem; }

#company .company_wrap {
  width: 55%;
  margin: 0 auto; }
  @media (max-width: 767px) {
    #company .company_wrap {
      width: 80%; } }
#company .company_img {
  margin: 0 auto;
  margin-bottom: 6%; }
#company .company_title {
  font-weight: bold;
  border-left: solid 7px #EA5404;
  padding-left: 1.5%;
  height: 29px;
  font-size: 20px;
  font-weight: bold; }
  @media (max-width: 767px) {
    #company .company_title {
      font-size: 14px;
      height: 20px; } }
#company .company_data {
  margin: 3% 3% 4%;
  font-size: 20px; }
  @media (max-width: 767px) {
    #company .company_data {
      font-size: 14px; } }
#company .company_span {
  font-weight: bold;
  font-size: 20px; }
  @media (max-width: 767px) {
    #company .company_span {
      font-size: 14px;
      color: #707070; } }
@media (max-width: 767px) {
  #company .company_span:before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 0.8em;
    height: 0.8em;
    background: #707070;
    margin-right: 1%; } }
@media (max-width: 767px) {
  #company .company_span02 {
    font-weight: bold;
    color: #707070; } }
#company .g-mapsp {
  padding: 5% 0; }
#company .g-map {
  max-width: 1024px;
  margin-top: 5%;
  overflow: hidden;
  /*padding-bottom: 57.25%;*/ }
#company .g-map_txt {
  text-align: center;
  height: 100%;
  width: 100%;
  display: block; }
  @media (max-width: 767px) {
    #company .g-map_txt {
      display: none; } }
#company .g-map_txt_SP {
  display: none; }
  @media (max-width: 767px) {
    #company .g-map_txt_SP {
      text-align: center;
      height: 100%;
      width: 100%;
      display: block; } }
#company .map {
  margin: 10% 0 16%; }

#contact_wrap {
  /*a:visited{
    color: #fff;
  	
  }
  a{
    text-decoration: none;
  }
  .btn03{
    color: #fff;
    font-weight: bold;
    position: relative;
    text-align: center;
    display: inline-block;
    width: 360px;
    height: 40px;
    border: 2px solid #EA5404;
    padding: 5px;
    overflow: hidden;
    margin: 5% auto;;
    background-color: #EA5404;
    margin-top: 10%;
  }
  .btn03::before{
    background:#fff;
    content: "";
    position: absolute;
    left: -10px;
    top: 0px;
    height: 100%;
    width: 0;
    transform: skewX(20deg);
    transition: all .2s ease-in;
    z-index: -1;
  	
  	
  }
  .btn03:hover{
    color: #EA5404;
  }
  .btn03:hover::before{
    width: 110%;
    transition: all .2s ease-in;
    z-index: -1;
  }*/ }
  #contact_wrap .header-3 {
    font-size: 50px;
    text-align: center;
    margin: 5% 0 1%; }
    @media (max-width: 767px) {
      #contact_wrap .header-3 {
        font-size: 28px; } }
  #contact_wrap .contact_txt {
    text-align: center;
    font-size: 30px; }
    @media (max-width: 767px) {
      #contact_wrap .contact_txt {
        font-size: 12px; } }
  #contact_wrap .contact_wrap {
    width: 42%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 10%;
    text-align: center; }
    @media (max-width: 767px) {
      #contact_wrap .contact_wrap {
        width: 100%; } }
  #contact_wrap .kakko_img_wrap {
    position: absolute;
    left: 0; }
  #contact_wrap .kakko_img2 {
    position: absolute;
    right: 0;
    bottom: 0; }
  #contact_wrap .btn03 {
    color: #fff;
    font-weight: bold;
    position: relative;
    text-align: center;
    display: inline-block;
    width: 360px;
    height: 40px;
    border: 2px solid #EA5404;
    padding: 5px;
    overflow: hidden;
    margin: 5% auto;
    background-color: #EA5404; }
  #contact_wrap .btn03:before {
    content: url(../img/home/icon-mail.png);
    vertical-align: middle;
    line-height: 2rem;
    display: inline-block;
    margin-left: 1%; }
  #contact_wrap .btn03:hover {
    background-color: #fff;
    color: #EA5404; }
  #contact_wrap .btn03:hover:before {
    content: url(../img/home/hover-icon-mail.png);
    vertical-align: middle;
    line-height: 2rem;
    display: inline-block;
    margin-left: 1%; }
  #contact_wrap .btn04 {
    color: #fff;
    font-weight: bold;
    position: relative;
    text-align: center;
    display: inline-block;
    width: 360px;
    height: 40px;
    border: 2px solid #EA5404;
    padding: 5px;
    overflow: hidden;
    margin: 5% auto;
    background-color: #EA5404; }
  #contact_wrap .btn04:before {
    content: url(../img/home/Icon-phone.png);
    vertical-align: middle;
    line-height: 2rem;
    display: inline-block;
    margin-left: 1%; }
  #contact_wrap .btn04:hover {
    background-color: #fff;
    color: #EA5404; }
  #contact_wrap .btn04:hover:before {
    content: url(../img/home/hover-icon-phone.png);
    vertical-align: middle;
    line-height: 2rem;
    display: inline-block;
    margin-left: 1%; }

#footer .footer {
  margin-top: 10%;
  position: relative;
  background-color: #F9F8F6;
  padding: 2% 4%; }
  @media (max-width: 767px) {
    #footer .footer {
      height: 385px;
      margin-bottom: 10%; } }
#footer .footer_wrap {
  display: flex; }
  @media (max-width: 767px) {
    #footer .footer_wrap {
      display: block; } }
#footer .footer_txt {
  margin: 7% 0;
  width: 105%;
  font-size: 12px; }
  @media (max-width: 767px) {
    #footer .footer_txt {
      width: 100%;
      padding: 2%; } }
#footer .footer_txt2 {
  font-size: 12px; }
#footer .footer_link {
  position: relative;
  width: 70%; }
#footer .footerNavLi {
  display: flex;
  justify-content: end;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 18px;
  margin-left: 10%;
  flex-wrap: wrap;
  margin-left: 15%;
  width: 100%; }
  @media (max-width: 767px) {
    #footer .footerNavLi {
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: inherit;
      font-size: 18px;
      margin-left: 0;
      width: 96%;
      margin-top: 7%; } }
#footer .footerNavList {
  color: #EA5404;
  margin-left: 5%; }
  @media (max-width: 767px) {
    #footer .footerNavList {
      margin-left: 0;
      margin-bottom: 2%; } }
#footer .footerNavList:hover {
  color: #EBA33E; }
#footer .top_back {
  display: block;
  width: 35px;
  height: 35px;
  background-color: #EA5404;
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 2%;
  padding: 2% 0 0 1px; }
  @media (min-width: 1281px) {
    #footer .top_back {
      display: none; } }
#footer .top_back_txt {
  text-align: center;
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%); }

/*# sourceMappingURL=common.css.map */