@charset "UTF-8";
/*レスポンシブ*/
/*レイアウト*/
/*限定br指定*/
/*スマホだけbr*/
/*タブレットだけbr*/
/*パソコンだけbr*/
/*背景画像*/
/*文字サイズ*/
/*三角作る*/
/*マージン下レスポンシブ一括*/
/*アニメーション*/
/*カラーセット*/
/*グラデーション*/
/*書体*/
/*エフェクト・ぼかし*/
/*エフェクト・スクリーン*/
/*エフェクト・スケール*/
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,400&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;700&display=swap");
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga'; }

/****************************************************************************************************/
/*
/*　ブラウザスタイルをリセットする（※基本的に編集しない）
/*
/****************************************************************************************************/
/*body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tdタグのマージン、パディングを0pxにする*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, figure, button {
  margin: 0px;
  padding: 0px;
  background: none;
  border: 0; }

/*tableタグのcellspacingとcellpaddingを0pxにする*/
table {
  border-collapse: collapse;
  border-spacing: 0px; }

/*javascriptのfieldsetタグとimg(aタグ内のimg)、abbr,acronymタグに表示されるボーダーを0pxにする*/
fieldset, img, abbr, acronym {
  border: 0px; }

/*address,caption,cite,code,dfn,em,strong,th,varタグのfontスタイルを通常にする*/
address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: normal; }

/*ol,ulタグのリストスタイル（アローやマージンなど）を無くす*/
ol, ul, li {
  list-style: none;
  padding: 0px;
  margin: 0px; }

/*caption,thタグを左に寄せる*/
caption, th {
  text-align: left; }

/*hタグの表示を通常のテキストと同じにする*/
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

img {
  display: inline-block;
  vertical-align: middle; }

/*qタグの前後にキーワードを配置しない*/
q:before, q:after {
  content: ''; }

main {
  display: block; }

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: #565656;
  font-family: 'Noto Serif JP', serif;
  list-style: none; }

html {
  overflow-y: scroll; }

body {
  width: 100%;
  overflow: hidden; }

.company,
.services,
.works,
.contact,
.privacy {
  margin-top: 104px; }
  @media screen and (max-width:896px) {
    .company,
    .services,
    .works,
    .contact,
    .privacy {
      margin-top: 104px; } }
  @media screen and (max-width:480px) {
    .company,
    .services,
    .works,
    .contact,
    .privacy {
      margin-top: 94px; } }
@media screen and (max-width:480px) {
  .pc {
    display: none; } }

.sp {
  display: none; }
  @media screen and (max-width:480px) {
    .sp {
      display: block; } }
.anchor {
  position: relative;
  top: -155px; }
  @media screen and (max-width:480px) {
    .anchor {
      top: -55px; } }
.slider, .sp_slide {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 45px; }
  .slider .slick-list, .slider .slick-dots, .sp_slide .slick-list, .sp_slide .slick-dots {
    width: 49%; }
    @media screen and (max-width:480px) {
      .slider .slick-list, .slider .slick-dots, .sp_slide .slick-list, .sp_slide .slick-dots {
        width: 100%;
        margin-bottom: 30px; } }
  .slider .slick-dots, .sp_slide .slick-dots {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;
    bottom: inherit; }
    @media screen and (max-width:480px) {
      .slider .slick-dots, .sp_slide .slick-dots {
        display: none !important; } }
    .slider .slick-dots li, .sp_slide .slick-dots li {
      width: 49%;
      height: 48%;
      margin: 0 0 12px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
      .slider .slick-dots li:hover button:before, .sp_slide .slick-dots li:hover button:before {
        opacity: .6; }
    .slider .slick-dots button, .sp_slide .slick-dots button {
      height: 100% !important;
      width: 100% !important;
      background-repeat: no-repeat;
      background-size: contain;
      padding: 0; }
      .slider .slick-dots button:before, .sp_slide .slick-dots button:before {
        content: "" !important;
        display: block;
        height: 100% !important;
        width: 100% !important;
        opacity: 1; }
  .slider .slick-arrow, .sp_slide .slick-arrow {
    z-index: 10; }
    .slider .slick-arrow:before, .slider .slick-arrow:after, .sp_slide .slick-arrow:before, .sp_slide .slick-arrow:after {
      position: absolute;
      content: "";
      -webkit-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
      top: 50%;
      display: block; }
    .slider .slick-arrow:before, .sp_slide .slick-arrow:before {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #000; }
    .slider .slick-arrow:after, .sp_slide .slick-arrow:after {
      opacity: .6; }
  .slider .slick-prev, .sp_slide .slick-prev {
    left: 3%; }
    @media screen and (max-width:480px) {
      .slider .slick-prev, .sp_slide .slick-prev {
        left: 7%; } }
    .slider .slick-prev:after, .sp_slide .slick-prev:after {
      width: 0;
      height: 0;
      border-width: 4px 5px 4px 0;
      border-color: transparent #fff transparent transparent;
      border-style: solid; }
  .slider .slick-next, .sp_slide .slick-next {
    right: 52%; }
    @media screen and (max-width:480px) {
      .slider .slick-next, .sp_slide .slick-next {
        right: 0; } }
    .slider .slick-next:after, .sp_slide .slick-next:after {
      width: 0;
      height: 0;
      border-width: 4px 0 4px 5px;
      border-color: transparent transparent transparent #fff;
      border-style: solid; }

.sp_slide .slick-list {
  margin-bottom: 0; }

.index {
  /*-----------------------------------
          イントロムービー
     -----------------------------------*/
  /*-----------------------------------
          主な施工事例
     -----------------------------------*/ }
  .index .intro {
    position: relative;
    height: 70vh;
    margin-bottom: 120px;
    overflow: hidden; }
    @media screen and (max-width: 1120px) {
      .index .intro {
        height: 400px; } }
    @media screen and (max-width: 850px) {
      .index .intro {
        height: 350px; } }
    @media screen and (max-width: 700px) {
      .index .intro {
        height: 300px; } }
    @media screen and (max-width:480px) {
      .index .intro {
        height: 70vh;
        margin-bottom: 60PX; } }
    .index .intro:before {
      position: absolute;
      content: "";
      -webkit-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
      background-image: url("/images/index/main.svg");
      background-size: contain;
      background-repeat: no-repeat;
      top: 50%;
      left: 50%;
      width: 360px;
      height: 145px;
      z-index: 100; }
      @media screen and (max-width:896px) {
        .index .intro:before {
          width: 300px;
          height: 125px; } }
      @media screen and (max-width:480px) {
        .index .intro:before {
          width: 180px;
          height: 75px; } }
    .index .intro > div {
      position: relative;
      width: 100%;
      padding-top: 56.25%; }
      .index .intro > div video {
        position: absolute;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        top: 30%;
        left: 50%;
        width: 100%; }
        @media screen and (max-width:896px) {
          .index .intro > div video {
            top: 45%; } }
        @media screen and (max-width:480px) {
          .index .intro > div video {
            width: 350%;
            top: 100%; } }
  .index .sec01 {
    margin-bottom: 200px; }
    @media screen and (max-width:480px) {
      .index .sec01 {
        margin-bottom: 120px; } }
    .index .sec01 h2 {
      margin-bottom: 80px; }
    .index .sec01 .item {
      position: relative;
      margin-bottom: 120px; }
      @media screen and (max-width:480px) {
        .index .sec01 .item {
          margin-bottom: 60px; } }
      .index .sec01 .item > a {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10; }
      .index .sec01 .item .flex {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 30px; }
        .index .sec01 .item .flex p {
          width: 25%; }
          @media screen and (max-width:480px) {
            .index .sec01 .item .flex p {
              width: 100%; } }
          .index .sec01 .item .flex p img {
            width: 100%; }
      .index .sec01 .item .text {
        max-width: 960px;
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap; }
        .index .sec01 .item .text h3 {
          width: 35%; }
          @media screen and (max-width:896px) {
            .index .sec01 .item .text h3 {
              width: 30%; } }
          @media screen and (max-width:480px) {
            .index .sec01 .item .text h3 {
              width: 100%;
              margin-bottom: 15px; } }
        .index .sec01 .item .text p {
          width: 65%;
          font-size: .9rem;
          line-height: 2em;
          font-weight: 300;
          letter-spacing: .12em; }
          @media screen and (max-width:896px) {
            .index .sec01 .item .text p {
              width: 70%;
              font-size: .8rem; } }
          @media screen and (max-width:480px) {
            .index .sec01 .item .text p {
              width: 100%; } }
    .index .sec01 .co_common_button {
      max-width: 400px;
      width: 90%;
      font-size: 1rem;
      letter-spacing: 0.12em; }

header {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px 0;
  width: 100%;
  z-index: 1000;
  -webkit-transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); }
  @media screen and (max-width:480px) {
    header {
      padding: 15px 0; } }
  header > section {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; }
  header .logo {
    width: 40%;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width:896px) {
      header .logo {
        width: 70%; } }
    @media screen and (max-width:480px) {
      header .logo {
        width: 85%; } }
    header .logo a {
      display: block;
      max-width: 50px;
      width: 100%;
      margin-right: 18px; }
      @media screen and (max-width:896px) {
        header .logo a {
          width: 250px; } }
      @media screen and (max-width:480px) {
        header .logo a {
          width: 150px; } }
    header .logo img {
      width: 100%;
      max-width: 50px;
      -webkit-transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
      transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); }
    header .logo .black {
      position: absolute;
      opacity: 0;
      top: -1000px; }
  header nav {
    -webkit-transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    max-width: 500px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width:896px) {
      header nav {
        max-width: 1000px;
        position: absolute;
        right: -1000px;
        top: 80px;
        background: #000;
        padding: 30px; } }
    @media screen and (max-width:480px) {
      header nav {
        top: 59px;
        right: -500px; } }
    header nav.active {
      top: 90px;
      right: 0; }
      @media screen and (max-width:480px) {
        header nav.active {
          top: 94px;
          right: 0; } }
      header nav.active a {
        color: #fff; }
  header ul {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap; }
    @media screen and (max-width:896px) {
      header ul {
        justify-content: center; } }
  header li {
    margin-right: 10%; }
    header li:last-of-type {
      margin: 0; }
    @media screen and (max-width:480px) {
      header li {
        width: 100%;
        margin: 0 0 12px 0; } }
    header li a {
      color: #fff;
      font-size: .9rem;
      font-family: 'Noto Sans JP', sans-serif; }
      header li a:hover {
        color: #888; }
  header.active {
    padding: 20px 0;
    background: #fff;
    border-bottom: solid 1px #676767; }
    @media screen and (max-width:480px) {
      header.active {
        padding: 15px 0; } }
    header.active .logo .white {
      position: absolute;
      opacity: 0;
      top: -1000px; }
    header.active .logo .black {
      position: inherit;
      opacity: 1; }
    header.active .logo h1 {
      color: #565656; }
    @media screen and (max-width:896px) {
      header.active nav {
        top: 120px; } }
    @media screen and (max-width:480px) {
      header.active nav {
        top: 94px; } }
    header.active nav a {
      color: #565656; }
      @media screen and (max-width:896px) {
        header.active nav a {
          color: #fff; } }
      @media screen and (max-width:480px) {
        header.active nav a {
          display: block; } }
    header.active .hmbg span {
      background: #000; }
  header .hmbg {
    display: none; }
    @media screen and (max-width:896px) {
      header .hmbg {
        display: block;
        width: 30px; }
        header .hmbg span {
          -webkit-transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
          transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
          display: block;
          height: 1px;
          width: 100%;
          background: #fff;
          margin-bottom: 9px;
          opacity: 1;
          top: 0; }
          header .hmbg span:last-of-type {
            margin: 0; } }
    header .hmbg.active span {
      position: relative; }
      header .hmbg.active span:first-of-type {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        top: 1px; }
        @media screen and (max-width:480px) {
          header .hmbg.active span:first-of-type {
            top: 10px; } }
      header .hmbg.active span:nth-of-type(2) {
        top: -10px;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg); }
        @media screen and (max-width:480px) {
          header .hmbg.active span:nth-of-type(2) {
            top: 0; } }
      header .hmbg.active span:last-of-type {
        opacity: 0; }

footer {
  background: #e6e1e9; }
  footer .status {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 80px 0 65px;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto; }
  footer .address {
    width: 50%; }
    @media screen and (max-width:480px) {
      footer .address {
        width: 100%; } }
    footer .address > a {
      display: block;
      max-width: 50px;
      width: 100%;
      margin-bottom: 20px; }
      @media screen and (max-width:480px) {
        footer .address > a {
          width: 80%;
          margin-bottom: 30px; } }
      footer .address > a img {
        width: 100%; }
    footer .address p {
      font-size: .8rem;
      line-height: 1.6em; }
  footer .footer_contact {
    max-width: 340px;
    width: 100%; }
    footer .footer_contact > p {
      font-size: .8rem;
      margin-bottom: 18px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 600; }
    footer .footer_contact > a {
      margin-bottom: 12px; }
    footer .footer_contact .flex {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      width: 100%; }
      footer .footer_contact .flex p {
        font-size: .8rem; }
      footer .footer_contact .flex a {
        font-weight: 400;
        font-size: 1.4rem; }
  footer .sitemap {
    background: #484848;
    padding: 45px 0 60px; }
    footer .sitemap ul {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      max-width: 1000px;
      width: 90%;
      margin: 0 auto; }
    footer .sitemap li {
      margin-right: 26px; }
      @media screen and (max-width:480px) {
        footer .sitemap li {
          width: 50%;
          margin: 0 0 9px; } }
    footer .sitemap a {
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
      color: #fff;
      font-size: .9rem; }
      footer .sitemap a:hover {
        color: #888; }
  footer .copy {
    background: #484848;
    padding-bottom: 80px; }
    footer .copy p {
      max-width: 1000px;
      width: 90%;
      margin: 0 auto;
      text-align: right;
      color: #fff;
      font-size: .7rem;
      font-family: 'Open Sans', sans-serif;
      font-weight: 300; }

h2.co_h2_common {
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: .05em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700; }
  h2.co_h2_common span {
    position: relative;
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-weight: 200;
    font-size: .9rem;
    padding-top: 35px; }
    h2.co_h2_common span:before {
      position: absolute;
      content: "";
      -webkit-transform: translateY(0) translateX(-50%);
      transform: translateY(0) translateX(-50%);
      top: 18px;
      left: 50%;
      height: 1px;
      background: #565656;
      width: 60px;
      letter-spacing: .15em; }

h3.co_h3_common {
  position: relative;
  width: 100%;
  font-size: 1.4rem;
  letter-spacing: .05em;
  font-weight: 300;
  line-height: 1.3em; }
  @media screen and (max-width:896px) {
    h3.co_h3_common {
      font-size: 1.2rem; } }
  h3.co_h3_common span {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    color: #bcb8b7; }
    @media screen and (max-width:896px) {
      h3.co_h3_common span {
        font-size: .7rem; } }
.second_intro {
  background: #e6e1e9;
  padding: 80px 0;
  margin-bottom: 60px; }

.co_common_button {
  -webkit-transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  display: block;
  margin: 0 auto;
  padding: 17px 0;
  text-align: center;
  font-size: .8rem;
  border: solid 1px #565656;
  font-family: 'Noto Serif JP', serif;
  font-weight: 200; }
  .co_common_button_gray {
    background: #ececec; }

.gotop {
  position: fixed;
  bottom: 10vh;
  right: 5%;
  z-index: 500; }
  @media screen and (max-width:896px) {
    .gotop {
      right: 30px; } }
  @media screen and (max-width:480px) {
    .gotop {
      right: 20px; } }
  .gotop span {
    display: block;
    width: 20px;
    height: 20px;
    border-top: solid 2px #565656;
    border-left: solid 2px #565656;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg); }
    @media screen and (max-width:480px) {
      .gotop span {
        width: 15px;
        height: 15px; } }
.works {
  /*-----------------------------------
          共通
     -----------------------------------*/
  /*-----------------------------------
          item
     -----------------------------------*/
  /*-----------------------------------
          スポーツ関連施設
     -----------------------------------*/
  /*-----------------------------------
          飲食店舗
     -----------------------------------*/
  /*-----------------------------------
          結婚式場パーティースペース
     -----------------------------------*/
  /*-----------------------------------
          製造会社オフィスショールーム
     -----------------------------------*/
  /*-----------------------------------
          sec05
     -----------------------------------*/
  /*-----------------------------------
          sec06
     -----------------------------------*/
  /*-----------------------------------
          sec07
     -----------------------------------*/ }
  .works > p, .works .item {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    font-weight: 300;
    line-height: 1.8em; }
  .works > p {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 60px; }
    @media screen and (max-width:480px) {
      .works > p {
        font-size: .9rem;
        margin-bottom: 30px; } }
  .works .item {
    margin-bottom: 120px; }
    @media screen and (max-width:480px) {
      .works .item {
        margin-bottom: 60px; } }
    .works .item .text h3 {
      margin-bottom: 18px; }
      @media screen and (max-width:480px) {
        .works .item .text h3 {
          margin-bottom: 9px; } }
    .works .item .text p {
      font-size: .9rem; }
  .works .sec01 .slick-dots li:nth-of-type(1) button:before {
    background-image: url("/images/works/item01-1.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec01 .slick-dots li:nth-of-type(2) button:before {
    background-image: url("/images/works/item01-2.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec01 .slick-dots li:nth-of-type(3) button:before {
    background-image: url("/images/works/item01-3.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec01 .slick-dots li:nth-of-type(4) button:before {
    background-image: url("/images/works/item01-4.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec02 .slick-dots li:nth-of-type(1) button:before {
    background-image: url("/images/works/item02-1.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec02 .slick-dots li:nth-of-type(2) button:before {
    background-image: url("/images/works/item02-2.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec02 .slick-dots li:nth-of-type(3) button:before {
    background-image: url("/images/works/item02-3.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec02 .slick-dots li:nth-of-type(4) button:before {
    background-image: url("/images/works/item02-4.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec03 .slick-dots li:nth-of-type(1) button:before {
    background-image: url("/images/works/item03-1.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec03 .slick-dots li:nth-of-type(2) button:before {
    background-image: url("/images/works/item03-2.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec03 .slick-dots li:nth-of-type(3) button:before {
    background-image: url("/images/works/item03-3.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec03 .slick-dots li:nth-of-type(4) button:before {
    background-image: url("/images/works/item03-4.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec04 .slick-dots li:nth-of-type(1) button:before {
    background-image: url("/images/works/item04-1.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec04 .slick-dots li:nth-of-type(2) button:before {
    background-image: url("/images/works/item04-2.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec04 .slick-dots li:nth-of-type(3) button:before {
    background-image: url("/images/works/item04-3.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec04 .slick-dots li:nth-of-type(4) button:before {
    background-image: url("/images/works/item04-4.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec05 .slick-dots li:nth-of-type(1) button:before {
    background-image: url("/images/works/item05-1.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec05 .slick-dots li:nth-of-type(2) button:before {
    background-image: url("/images/works/item05-2.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec06 .slick-dots li:nth-of-type(1) button:before {
    background-image: url("/images/works/item06-1.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec06 .slick-dots li:nth-of-type(2) button:before {
    background-image: url("/images/works/item06-2.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec07 .slick-dots li:nth-of-type(1) button:before {
    background-image: url("/images/works/item07-1.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec07 .slick-dots li:nth-of-type(2) button:before {
    background-image: url("/images/works/item07-2.jpg");
    background-size: contain;
    background-repeat: no-repeat; }
  .works .sec07 .slick-dots li:nth-of-type(3) button:before {
    background-image: url("/images/works/item07-3.jpg");
    background-size: contain;
    background-repeat: no-repeat; }


    /* ギャラリー */
    .environment_intro{
      margin-bottom: 30px;
    }

    .environment_intro h3{
      font-size: 1.4rem;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #aaa;
    }

    .environment_gallery {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    @media screen and (max-width:480px) {
      .environment_gallery {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .environment_gallery li img{
      width: 100%;
    }



.company {
  /*-----------------------------------
          共通
     -----------------------------------*/
  /*-----------------------------------
          sec01
     -----------------------------------*/
  /*-----------------------------------
          地図
     -----------------------------------*/ }
  .company .sec01 {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto 120px; }
    @media screen and (max-width:480px) {
      .company .sec01 {
        margin-bottom: 60px; } }
    .company .sec01 dl {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      flex-wrap: wrap; }
      .company .sec01 dl dt, .company .sec01 dl dd {
        padding: 30px 0 30px 30px;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 1.8em;
        font-weight: 300;
        letter-spacing: .05em; }
        @media screen and (max-width:480px) {
          .company .sec01 dl dt, .company .sec01 dl dd {
            font-size: .9rem; } }
      .company .sec01 dl dt {
        width: 20%;
        border-bottom: solid 1px #7d7d7d; }
        @media screen and (max-width:896px) {
          .company .sec01 dl dt {
            padding-left: 15px; } }
        @media screen and (max-width:480px) {
          .company .sec01 dl dt {
            width: 100%;
            border-bottom: 0;
            border-left: solid 3px #7d7d7d;
            padding: 3px 0 3px 9px; } }
      .company .sec01 dl dd {
        width: 80%;
        border-bottom: solid 1px #ccc; }
        @media screen and (max-width:480px) {
          .company .sec01 dl dd {
            width: 100%;
            margin-bottom: 30px;
            padding: 12px 0 30px 9px; } }
        .company .sec01 dl dd p {
          margin-bottom: 30px; }
  .company .map .gmap {
    height: 0;
    overflow: hidden;
    padding-bottom: 30.25%;
    position: relative; }
    @media screen and (max-width:480px) {
      .company .map .gmap {
        padding-top: 120%; } }
  .company .map .gmap iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%; }

.services {
  /*-----------------------------------
          共通
     -----------------------------------*/ }
  .services .sec01, .services .sec02 {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto 120px;
    font-weight: 300;
    letter-spacing: .08em;
    line-height: 1.8em; }
    @media screen and (max-width:480px) {
      .services .sec01, .services .sec02 {
        margin-bottom: 60px;
        line-height: 1.6em; } }
    .services .sec01 h4, .services .sec02 h4 {
      font-size: 1.8rem;
      margin-bottom: 35px; }
      @media screen and (max-width:480px) {
        .services .sec01 h4, .services .sec02 h4 {
          font-size: 1.5rem;
          margin-bottom: 24px; } }
    .services .sec01 img, .services .sec02 img {
      width: 100%;
      margin: 0 auto; }
      @media screen and (max-width:480px) {
        .services .sec01 img, .services .sec02 img {
          width: 80%; } }
    .services .sec01 p, .services .sec02 p {
      margin-bottom: 30px;
      font-size: 1rem; }
      @media screen and (max-width:480px) {
        .services .sec01 p, .services .sec02 p {
          font-size: .8rem; } }
    .services .sec01 div, .services .sec02 div {
      margin-bottom: 75px; }
      @media screen and (max-width:480px) {
        .services .sec01 div, .services .sec02 div {
          margin-bottom: 45px; } }
    .services .sec01 dt, .services .sec02 dt {
      font-size: 1.3rem;
      border-left: solid 4px #565656;
      padding-left: 12px;
      padding-bottom: 3px;
      margin-bottom: 15px; }
      @media screen and (max-width:480px) {
        .services .sec01 dt, .services .sec02 dt {
          font-size: 1rem;
          margin-bottom: 9px; } }
    .services .sec01 dd, .services .sec02 dd {
      margin-bottom: 45px;
      padding-left: 1em; }
      @media screen and (max-width:480px) {
        .services .sec01 dd, .services .sec02 dd {
          font-size: .8rem;
          margin-bottom: 30px; } }
.contact {
  /*-----------------------------------
          共通
     -----------------------------------*/
  /*-----------------------------------
          フォーム
     -----------------------------------*/ }
  .contact > p, .contact .form, .contact .sec01 {
    max-width: 680px;
    width: 90%;
    margin: 0 auto 120px;
    font-weight: 300;
    font-size: .9rem;
    letter-spacing: .08em;
    line-height: 1.8em; }
    @media screen and (max-width:480px) {
      .contact > p, .contact .form, .contact .sec01 {
        margin-bottom: 60px;
        line-height: 1.6em; } }
    .contact > p span, .contact .form span, .contact .sec01 span {
      color: #c83131; }
  .contact > p {
    margin-bottom: 45px; }
    .contact > p a {
      color: #b55f76; }
  .contact .form dl {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 30px; }
  .contact .form dt, .contact .form dd {
    margin-bottom: 30px; }
  .contact .form dt {
    width: 30%;
    font-size: 1rem; }
    @media screen and (max-width:480px) {
      .contact .form dt {
        width: 100%;
        margin-bottom: 9px; } }
    .contact .form dt.required:after {
      content: "*";
      color: #c83131; }
  .contact .form dd {
    width: 70%; }
    @media screen and (max-width:480px) {
      .contact .form dd {
        width: 100%;
        margin-bottom: 18px; } }
    .contact .form dd input, .contact .form dd textarea {
      -webkit-box-sizing: border-box;
      -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      border: solid 1px #d1d1d1;
      padding: 9px; }
    .contact .form dd textarea {
      height: 150px; }
    .contact .form dd p {
      font-size: .8rem; }
  .contact .form .submit {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap; }
    .contact .form .submit input {
      max-width: 280px;
      width: 100%;
      font-size: .9rem;
      letter-spacing: .08em;
      margin: 0 9px; }
      @media screen and (max-width:480px) {
        .contact .form .submit input {
          margin-bottom: 12px; } }
.contact_check dt, .contact_check dd {
  padding: 12px 0; }

.contact_check dd {
  border-bottom: solid 1px #d1d1d1; }

.contact_thanks .sec01 p {
  margin-bottom: 60px; }

.contact_thanks .sec01 .co_common_button {
  max-width: 300px;
  width: 100%; }

.privacy {
  /*-----------------------------------
          共通
     -----------------------------------*/ }
  .privacy .sec01 {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto 120px;
    font-weight: 300;
    letter-spacing: .08em;
    line-height: 1.8em; }
    @media screen and (max-width:480px) {
      .privacy .sec01 {
        margin-bottom: 60px;
        line-height: 1.6em; } }
    .privacy .sec01 > p {
      margin-bottom: 90px;
      text-align: center; }
      @media screen and (max-width:480px) {
        .privacy .sec01 > p {
          font-size: .9rem; } }
    .privacy .sec01 dt {
      font-size: 1.1rem;
      border-left: solid 4px #565656;
      padding-left: 12px;
      padding-bottom: 3px;
      margin-bottom: 12px; }
      @media screen and (max-width:480px) {
        .privacy .sec01 dt {
          font-size: 1rem;
          margin-bottom: 9px; } }
    .privacy .sec01 dd {
      margin-bottom: 60px;
      padding-left: 1em;
      line-height: 2em;
      font-size: .9rem; }
      @media screen and (max-width:480px) {
        .privacy .sec01 dd {
          margin-bottom: 45px;
          font-size: .8rem;
          padding-left: 0; } }
      .privacy .sec01 dd p {
        margin-bottom: 18px; }
      .privacy .sec01 dd li {
        position: relative;
        padding-left: 1.5em;
        margin-bottom: 9px; }
        .privacy .sec01 dd li:before {
          position: absolute;
          content: "・";
          left: 0; }