@charset "UTF-8";
#wrapper {
  width: 100%;
  text-align: center;
  padding-top: 90px; }
  @media screen and (max-width: 768px) {
    #wrapper {
      padding-top: 60px; } }
  #wrapper h2 {
    position: relative;
    line-height: 1;
    font-size: 28px;
    font-size: 2.8rem;
    text-align: center;
    font-weight: 700; }
    @media screen and (max-width: 768px) {
      #wrapper h2 {
        font-size: 20px;
        font-size: 2rem; } }
    #wrapper h2:after {
      content: "";
      width: 77px;
      height: 7px;
      background: #000;
      position: absolute;
      bottom: -20px;
      left: 50%;
      -moz-transform: translate(-50%, 0);
      -webkit-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0); }
      @media screen and (max-width: 768px) {
        #wrapper h2:after {
          width: 60px;
          height: 5px;
          bottom: -15px; } }
  #wrapper .kv_area {
    width: 100%;
    background: #f5f5f5;
    padding: 25px 0; }
    #wrapper .kv_area .inner {
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
      padding: 0 23% 0 5%;
      -js-display: flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: space-between;
      justify-content: -webkit- space-between;
      justify-content: space-between;
      -webkit-align-items: center;
      align-items: -webkit- center;
      align-items: center; }
      @media screen and (max-width: 768px) {
        #wrapper .kv_area .inner {
          padding: 0 5%;
          display: block;
          text-align: center; } }
      #wrapper .kv_area .inner h1 {
        position: relative;
        line-height: 1.4;
        font-size: 28px;
        font-size: 2.8rem;
        text-align: center;
        font-weight: bold; }
        @media screen and (max-width: 768px) {
          #wrapper .kv_area .inner h1 {
            font-size: 20px;
            font-size: 2rem;
            margin-bottom: 45px; } }
        #wrapper .kv_area .inner h1:after {
          content: "";
          width: 77px;
          height: 7px;
          background: #000;
          position: absolute;
          bottom: -12px;
          left: 50%;
          -moz-transform: translate(-50%, 0);
          -webkit-transform: translate(-50%, 0);
          -o-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
          @media screen and (max-width: 768px) {
            #wrapper .kv_area .inner h1:after {
              width: 60px;
              height: 5px;
              bottom: -15px; } }
        #wrapper .kv_area .inner h1 span {
          display: block;
          font-size: 16px;
          font-size: 1.6rem;
          margin-bottom: 3px; }
          @media screen and (max-width: 768px) {
            #wrapper .kv_area .inner h1 span {
              font-size: 12px;
              font-size: 1.2rem; } }
  #wrapper .contents {
    width: 100%;
    background: #fff;
    padding: 20px 0 80px; }
    @media screen and (max-width: 768px) {
      #wrapper .contents {
        padding: 30px 0 50px; } }
    #wrapper .contents > .inner {
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
      -js-display: flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      flex-direction: -webkit- column;
      flex-direction: column; }
      #wrapper .contents > .inner .main_contents {
        width: 100%;
        max-width: 1000px;
        margin: 55px auto 0;
        -js-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: -webkit- space-between;
        justify-content: space-between; }
        @media screen and (max-width: 768px) {
          #wrapper .contents > .inner .main_contents {
            margin: 0px auto 0;
            display: block;
            padding: 0 10%; } }
        #wrapper .contents > .inner .main_contents .desc {
          width: 310px;
          text-align: left; }
          @media screen and (max-width: 768px) {
            #wrapper .contents > .inner .main_contents .desc {
              width: 100%; } }
          #wrapper .contents > .inner .main_contents .desc dl {
            width: 100%; }
            #wrapper .contents > .inner .main_contents .desc dl dt {
              font-size: 20px;
              font-size: 2rem;
              margin: 55px 0 20px; }
              #wrapper .contents > .inner .main_contents .desc dl dt:first-of-type {
                margin-top: 0; }
            #wrapper .contents > .inner .main_contents .desc dl dd.txt {
              font-size: 14px;
              font-size: 1.4rem;
              letter-spacing: -1px;
              line-height: 1.8; }
			  #wrapper .contents > .inner .main_contents .desc dl dd.txt a {
				  text-decoration: underline;
			  }
              @media screen and (max-width: 768px) {
                #wrapper .contents > .inner .main_contents .desc dl dd.txt {
                  height: 63px;
                  overflow: hidden;
                  font-size: 12px;
                  font-size: 1.2rem;
                  position: relative; } }
  @media screen and (max-width: 768px) and (-ms-high-contrast: active), screen and (max-width: 768px) and (-ms-high-contrast: none) {
    #wrapper .contents > .inner .main_contents .desc dl dd.txt {
      height: 65px; } }
              @media screen and (max-width: 768px) {
                  #wrapper .contents > .inner .main_contents .desc dl dd.txt:after {
                    content: "…";
                    background: #fff;
                    display: inline-block;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 1.5em;
                    font-size: 12px; }
                  #wrapper .contents > .inner .main_contents .desc dl dd.txt.on {
                    height: auto; }
                    #wrapper .contents > .inner .main_contents .desc dl dd.txt.on:after {
                      display: none; } }
            #wrapper .contents > .inner .main_contents .desc dl dd.more {
              display: none; }
              @media screen and (max-width: 768px) {
                #wrapper .contents > .inner .main_contents .desc dl dd.more {
                  display: block;
                  margin-top: 15px; }
                  #wrapper .contents > .inner .main_contents .desc dl dd.more span {
                    font-size: 12px;
                    font-size: 1.2rem;
                    color: #000;
                    line-height: 1;
                    padding: 10px 15px;
                    background: #ff0; } }
    @media screen and (max-width: 768px) and (-ms-high-contrast: active), screen and (max-width: 768px) and (-ms-high-contrast: none) {
      #wrapper .contents > .inner .main_contents .desc dl dd.more span {
        padding: 10px 15px 8px; } }

        #wrapper .contents > .inner .main_contents .works {
          width: 650px; }
          @media screen and (max-width: 768px) {
            #wrapper .contents > .inner .main_contents .works {
              width: 100%;
              margin-top: 60px; } }
          #wrapper .contents > .inner .main_contents .works ul {
            width: 100%;
            -js-display: flex;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-justify-content: space-between;
            justify-content: -webkit- space-between;
            justify-content: space-between; }
            @media screen and (max-width: 768px) {
              #wrapper .contents > .inner .main_contents .works ul {
                display: block; } }
            #wrapper .contents > .inner .main_contents .works ul li {
              width: 46.5%;
              max-width: 300px;
              text-align: left; }
              @media screen and (min-width: 768px) {
                #wrapper .contents > .inner .main_contents .works ul li:nth-child(n+3) {
                  margin-top: 35px; } }
              @media screen and (max-width: 768px) {
                #wrapper .contents > .inner .main_contents .works ul li {
                  width: 100%;
                  max-width: 100%; }
                  #wrapper .contents > .inner .main_contents .works ul li:nth-child(n+2) {
                    margin-top: 20px; } }
              #wrapper .contents > .inner .main_contents .works ul li .img {
                margin-bottom: 15px; }
                #wrapper .contents > .inner .main_contents .works ul li .img a {
                  -moz-transition: all 0.3s;
                  -webkit-transition: all 0.3s;
                  -o-transition: all 0.3s;
                  -ms-transition: all 0.3s;
                  transition: all 0.3s; }
                  #wrapper .contents > .inner .main_contents .works ul li .img a:hover {
                    opacity: 0.7; }
                #wrapper .contents > .inner .main_contents .works ul li .img img {
                  width: 100%; }
              #wrapper .contents > .inner .main_contents .works ul li p.cat {
                font-size: 14px;
                font-size: 1.4rem;
                color: #c8c8c8;
                margin-bottom: 10px; }
              #wrapper .contents > .inner .main_contents .works ul li p.detail {
                font-size: 14px;
                font-size: 1.4rem;
                line-height: 1.8;
                letter-spacing: -1px; }
  #wrapper .design_link {
    display: none; }
    @media screen and (max-width: 768px) {
      #wrapper .design_link {
        display: block;
        padding-top: 0; } }

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