@charset "UTF-8";
/* CSS Document */
/* Scss Document */
/* Scss Document */
/* アニメーション記述用 */
@keyframes headerFixed {
  0% {
    transform: translateY(-80px); }
  100% {
    transform: translateY(0px); } }
@keyframes loop {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
@keyframes loop2 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-200%); } }
#works {
  background: #F2F2F2; }

.header {
  background: #fff; }
  .header .header__wrap {
    height: 100px; }
  .header .header__logo {
    top: 50%; }
    .header .header__logo .header__logo-img {
      display: none; }
    .header .header__logo .header__logo-img-on {
      flex: 0 1 25%;
      width: 25%;
      max-width: 25%;
      display: block; }
  .header .header__menu-btn span {
    background: #2E2E2E; }
  .header .header__title {
    color: #737373; }
  .header .header__menu-nav .active {
    color: #737373; }
  .header .header__contact {
    right: 0; }

.open .header .header__menu-btn {
  background: #2E2E2E;
  height: 65px;
  width: 65px; }
  .open .header .header__menu-btn span {
    background: #fff; }

#contents {
  display: block;
  margin-top: 100px; }

.titleimg {
  background: url("/img/works/titleimg.jpg") center/cover no-repeat; }

.works_ttl {
  margin-bottom: 50px; }
  .works_ttl .works__txt {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 35px;
    letter-spacing: 0.05em; }
    @media (min-width: 769px) {
      .works_ttl .works__txt {
        font-size: calc( 1.4rem + ( 1vw - 7.69px ) * 3.2258064516 ); } }
    @media (min-width: 800px) {
      .works_ttl .works__txt {
        font-size: 1.5rem; } }
  .works_ttl .works__btn li {
    margin-bottom: 20px; }
    .works_ttl .works__btn li a {
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative;
      background: #fff; }
      .works_ttl .works__btn li a figure {
        flex: 0 1 30%;
        width: 30%;
        max-width: 30%; }
      .works_ttl .works__btn li a div {
        font-size: 1.6rem;
        flex: 0 1 70%;
        width: 70%;
        max-width: 70%;
        text-align: center; }
        @media (min-width: 769px) {
          .works_ttl .works__btn li a div {
            font-size: calc( 1.6rem + ( 1vw - 7.69px ) * 6.4516129032 ); } }
        @media (min-width: 800px) {
          .works_ttl .works__btn li a div {
            font-size: 1.8rem; } }
        .works_ttl .works__btn li a div p {
          display: block;
          width: 90%; }
      .works_ttl .works__btn li a::before {
        position: absolute;
        content: "";
        display: block;
        top: 45%;
        right: 20px;
        width: 7px;
        height: 7px;
        border-bottom: solid 1px #2E2E2E;
        border-right: solid 1px #2E2E2E;
        transform: rotate(45deg) translate(0, -50%); }
    .works_ttl .works__btn li:last-child {
      margin-bottom: 0; }

.works {
  padding-top: 100px;
  margin-top: -90px; }
  .works .works__all-wp {
    background: #fff;
    padding: 40px 25px; }
    .works .works__all-wp .con__ttl-wp {
      margin-bottom: 35px; }
      .works .works__all-wp .con__ttl-wp .con__ttl {
        font-size: 2.2rem; }
        @media (min-width: 768px) {
          .works .works__all-wp .con__ttl-wp .con__ttl {
            font-size: calc( 2.2rem + ( 1vw - 7.68px ) * 2.0408163265 ); } }
        @media (min-width: 1160px) {
          .works .works__all-wp .con__ttl-wp .con__ttl {
            font-size: 3rem; } }
      .works .works__all-wp .con__ttl-wp .con__txt {
        font-size: 1.4rem;
        text-align: center; }
        @media (min-width: 768px) {
          .works .works__all-wp .con__ttl-wp .con__txt {
            font-size: calc( 1.4rem + ( 1vw - 7.68px ) * 0.2551020408 ); } }
        @media (min-width: 1160px) {
          .works .works__all-wp .con__ttl-wp .con__txt {
            font-size: 1.5rem; } }
    .works .works__all-wp .works__ttl-wp {
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: solid 1px #DBDBDB; }
      .works .works__all-wp .works__ttl-wp .works__ttl-en {
        letter-spacing: 0.15em;
        font-size: 1.3rem;
        color: #737373; }
      .works .works__all-wp .works__ttl-wp .works__ttl {
        font-size: 1.8rem; }
        @media (min-width: 769px) {
          .works .works__all-wp .works__ttl-wp .works__ttl {
            font-size: calc( 1.8rem + ( 1vw - 7.69px ) * 22.5806451613 ); } }
        @media (min-width: 800px) {
          .works .works__all-wp .works__ttl-wp .works__ttl {
            font-size: 2.5rem; } }
    .works .works__all-wp .works__flex-wp {
      margin-bottom: 50px; }
      .works .works__all-wp .works__flex-wp .works__con-wp {
        margin-bottom: 35px; }
        .works .works__all-wp .works__flex-wp .works__con-wp figure {
          margin-bottom: 10px; }
        .works .works__all-wp .works__flex-wp .works__con-wp .works__case {
          font-size: 1.2rem;
          display: inline-block;
          margin-bottom: 10px;
          padding: 2px 10px 0px;
          color: #737373;
          letter-spacing: 0.15em;
          border: solid 1px #DBDBDB; }
          @media (min-width: 769px) {
            .works .works__all-wp .works__flex-wp .works__con-wp .works__case {
              font-size: calc( 1.2rem + ( 1vw - 7.69px ) * 0.2557544757 ); } }
          @media (min-width: 1160px) {
            .works .works__all-wp .works__flex-wp .works__con-wp .works__case {
              font-size: 1.3rem; } }
          .works .works__all-wp .works__flex-wp .works__con-wp .works__case .num {
            padding-left: 2px;
            letter-spacing: normal;
            font-family: "Roboto", sans-serif; }
        .works .works__all-wp .works__flex-wp .works__con-wp .works__sab-ttl {
          font-size: 1.4rem;
          margin-bottom: 3px; }
          @media (min-width: 769px) {
            .works .works__all-wp .works__flex-wp .works__con-wp .works__sab-ttl {
              font-size: calc( 1.4rem + ( 1vw - 7.69px ) * 0.5115089514 ); } }
          @media (min-width: 1160px) {
            .works .works__all-wp .works__flex-wp .works__con-wp .works__sab-ttl {
              font-size: 1.6rem; } }
        .works .works__all-wp .works__flex-wp .works__con-wp .works__txt {
          font-size: 1.4rem;
          line-height: 1.6;
          font-family: "Yu Gothic Pr6N M", "游ゴシック体 Pr6N M", "YuGothic", "ヒラギノ角ゴ Pro W3", "Meiryo", sans-serif;
          text-align: justify; }
          @media (min-width: 769px) {
            .works .works__all-wp .works__flex-wp .works__con-wp .works__txt {
              font-size: calc( 1.4rem + ( 1vw - 7.69px ) * 0.2557544757 ); } }
          @media (min-width: 1160px) {
            .works .works__all-wp .works__flex-wp .works__con-wp .works__txt {
              font-size: 1.5rem; } }
        .works .works__all-wp .works__flex-wp .works__con-wp:last-child {
          margin-bottom: 0; }
      .works .works__all-wp .works__flex-wp:last-child {
        margin-bottom: 0; }

.consultation {
  margin-bottom: 3%; }
  .consultation .consultation__txt {
    margin-bottom: 5px;
    text-align: center; }
    .consultation .consultation__txt p {
      font-size: 1.4rem;
      position: relative;
      display: inline; }
      @media (min-width: 769px) {
        .consultation .consultation__txt p {
          font-size: calc( 1.4rem + ( 1vw - 7.69px ) * 12.9032258065 ); } }
      @media (min-width: 800px) {
        .consultation .consultation__txt p {
          font-size: 1.8rem; } }
      .consultation .consultation__txt p span {
        font-size: 1.8rem; }
        @media (min-width: 769px) {
          .consultation .consultation__txt p span {
            font-size: calc( 1.8rem + ( 1vw - 7.69px ) * 22.5806451613 ); } }
        @media (min-width: 800px) {
          .consultation .consultation__txt p span {
            font-size: 2.5rem; } }
      .consultation .consultation__txt p::before {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        left: -20px;
        width: 1px;
        height: 100%;
        background: #2E2E2E;
        transform: rotate(-30deg) translate(0, -50%); }
      .consultation .consultation__txt p::after {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        right: -35px;
        width: 1px;
        height: 100%;
        background: #2E2E2E;
        transform: rotate(30deg) translate(0, -50%); }
  .consultation .consultation__img {
    margin: auto;
    width: 65%;
    max-width: 350px; }

/*------------------------------
		769px以上
------------------------------*/
@media screen and (min-width: 769px) {
  .works_ttl .works__txt {
    margin-bottom: 50px; }
  .works_ttl .works__btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .works_ttl .works__btn li {
      flex: 0 1 31%;
      width: 31%;
      max-width: 31%;
      margin-bottom: 0; }
      .works_ttl .works__btn li a {
        display: block; }
        .works_ttl .works__btn li a figure {
          flex: 0 1 100%;
          width: 100%;
          max-width: 100%; }
        .works_ttl .works__btn li a div {
          flex: 0 1 100%;
          width: 100%;
          max-width: 100%;
          padding: 20px 0 35px; }
          .works_ttl .works__btn li a div p {
            width: 100%; }
        .works_ttl .works__btn li a::before {
          top: auto;
          bottom: 10px;
          right: auto;
          left: 50%;
          width: 10px;
          height: 10px;
          transform: rotate(45deg) translate(-50%, 0); }
        .works_ttl .works__btn li a:hover {
          opacity: 1;
          background: #2E2E2E; }
          .works_ttl .works__btn li a:hover p {
            color: #fff; }
          .works_ttl .works__btn li a:hover::before {
            border-color: #fff; }

  .works {
    padding-top: 120px;
    margin-top: -110px; }
    .works .works__all-wp {
      padding: 50px 50px; }
      .works .works__all-wp .con__ttl-wp {
        margin-bottom: 50px; }
      .works .works__all-wp .works__ttl-wp {
        margin-bottom: 30px;
        padding-bottom: 5px; }
      .works .works__all-wp .works__flex-wp {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 70px; }
        .works .works__all-wp .works__flex-wp .works__con-wp {
          flex: 0 1 48%;
          width: 48%;
          max-width: 48%;
          margin-bottom: 50px; }
          .works .works__all-wp .works__flex-wp .works__con-wp figure {
            margin-bottom: 15px; }
          .works .works__all-wp .works__flex-wp .works__con-wp.mb_0 {
            margin-bottom: 0; }

  .consultation {
    margin-bottom: 3%; }
    .consultation .consultation__txt {
      margin-bottom: 25px; } }
/*------------------------------
		961px以上
------------------------------*/
/*------------------------------
		1181px以上
------------------------------*/
@media screen and (min-width: 1181px) {
  .works .works__all-wp {
    padding: 50px 100px; } }
/*------------------------------
		1600px以上
------------------------------*/

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