@charset "UTF-8";


.viewall-btn {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #000;
  transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  /* easeOutCubic */ }
  .viewall-btn .veil {
    width: 0%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
	color: #000;
    z-index: 1;
    background-color: #000; }
  .viewall-btn p {
    opacity: 1;
    padding-top: 2.018%;
    padding-bottom: 2.018%;
    font-size: 0.5rem;
    line-height: 1;
    letter-spacing: 0.025em;
    text-align: center; }
    @media screen and (max-width: 767px) {
      .viewall-btn p {
        padding-top: 5%;
        padding-bottom: 5%;
        font-size: 1.7rem; } }
  .viewall-btn:hover {
    opacity: 1 !important;
    background-color: #202020;
    color: #fff; }
    @media screen and (max-width: 767px) {
      .viewall-btn:hover {
        background-color: #fff;
        color: #202020; } }

#casestudy1 {
  position: relative; }
  #casestudy1 .content-wrap {
    width: 100%;
    padding-left: 7.46%;
    padding-right: 7.46%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative; }
    @media screen and (max-width: 767px) {
      #casestudy1 .content-wrap {
        padding-left: 30px;
        padding-right: 30px; } }
    #casestudy1 .content-wrap .content {
      max-width: 1440px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 8.4%;
      padding-bottom: 4rem; }
      #casestudy1 .content-wrap .content:after {
        content: "";
        display: table;
        clear: both; }
      @media screen and (max-width: 767px) {
        #casestudy1 .content-wrap .content {
          padding-top: 14.66667vw;
          padding-bottom: 0%; } }
      #casestudy1 .content-wrap .content > p {
        margin-bottom: 3.4%;
        font-size: 0.5rem; }
        @media screen and (max-width: 767px) {
          #casestudy1 .content-wrap .content > p {
            padding-top: 31.33333vw;
            padding-left: 5.33%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            font-size: 1.5rem;
            line-height: 1.7; } }
  #casestudy1 h2 {
    margin-bottom: 1.65%;
    box-sizing: border-box;
    font-weight: normal;
    line-height: 1; }
    @media screen and (max-width: 767px) {
      #casestudy1 h2 {
        width: 100%;
        padding-top: 16vw;
        padding-left: 5.33%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0; } }
    #casestudy1 h2 span {
      vertical-align: bottom;
      letter-spacing: 0.06em; }
      #casestudy1 h2 span:nth-child(1) {
        margin-right: 1.4%;
        font-size: 1rem;
        font-weight: bold; }
        @media screen and (max-width: 767px) {
          #casestudy1 h2 span:nth-child(1) {
            font-size: 3rem;
            letter-spacing: 0; } }
      #casestudy1 h2 span:nth-child(3) {
        font-size: 0.4rem; }
        @media screen and (max-width: 767px) {
          #casestudy1 h2 span:nth-child(3) {
            font-size: 1.3rem;
            line-height: 2.5; } }
  #casestudy1 .wrap {
    padding-top: 17.5%;
    margin-bottom: 4.5%;
    position: relative; }
    @media screen and (max-width: 767px) {
      #casestudy1 .wrap {
        padding-top: 26.66667vw;
        margin-bottom: 4%; } }
    #casestudy1 .wrap .paging .page.all {
      color: #ccc; }
    #casestudy1 .wrap .paging .slash {
      color: #ccc; }
  #casestudy1 .imgs {
    width: 104.3%;
    position: absolute;
    left: 10%;
    top: 0;
    z-index: 1;
    overflow: hidden; }
    @media screen and (max-width: 767px) {
      #casestudy1 .imgs {
        opacity: 1;
        width: 95%;
        left: 5.33%;
        position: relative; } }
    #casestudy1 .imgs .img-slide:after {
      content: "";
      display: table;
      clear: both; }
    #casestudy1 .imgs .img-wrap {
      display: block;
      position: relative;
      float: left; }
    #casestudy1 .imgs .img {
      width: 100%;
      padding-top: 55.8%;
      position: relative;
      background-size: cover;
      background-position: 50% 50%; }
      #casestudy1 .imgs .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0; }
  #casestudy1 .base {
    width: 100%;
    padding-top: 47.5%;
    position: absolute;
    left: 0;
    top: 28.5%;
    z-index: 0;
    background-color: #e6e6e6; }
    @media screen and (max-width: 767px) {
      #casestudy1 .base {
        padding-top: 117%;
        top: 32.5%; } }
  #casestudy1 .text-wrap {
    width: 40.4%;
    padding-top: 41%;
    position: relative; }
    @media screen and (max-width: 767px) {
      #casestudy1 .text-wrap {
        width: 89.34%;
        padding-top: 0;
        margin-left: auto;
        margin-right: auto; } }
  #casestudy1 .text {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    box-sizing: border-box;
    background-color: #fff;
    transition: height 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    /* easeOutCubic */ }
    @media screen and (max-width: 767px) {
      #casestudy1 .text {
        position: static;
        bottom: auto; } }
    #casestudy1 .text .case {
      width: 100%;
      padding: 6.5% 11% 6.5% 11%;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0; }
      @media screen and (max-width: 767px) {
        #casestudy1 .text .case {
          padding: 6% 5% 7% 6%;
          position: static; } }
    #casestudy1 .text h3 {
      margin-bottom: 4%;
      box-sizing: border-box;
      font-weight: normal;
      line-height: 0; }
      #casestudy1 .text h3 span {
        display: inline-block;
        vertical-align: bottom;
        letter-spacing: 0.06em;
        line-height: 1; }
        #casestudy1 .text h3 span:nth-child(1) {
          font-size: 0.5rem;
          font-weight: bold;
          line-height: 3; }
          @media screen and (max-width: 767px) {
            #casestudy1 .text h3 span:nth-child(1) {
              font-size: 1.8rem;
              line-height: 2.2; } }
        #casestudy1 .text h3 span:nth-child(3) {
          font-size: 0.4rem; }
          @media screen and (max-width: 767px) {
            #casestudy1 .text h3 span:nth-child(3) {
              font-size: 1.2rem; } }
    #casestudy1 .text p.title {
      margin-bottom: 2%;
      font-size: 0.65rem;
      line-height: 1.5;
      font-weight: bold;
      letter-spacing: 0.02em; }
      @media screen and (max-width: 767px) {
        #casestudy1 .text p.title {
          margin-bottom: 2.8%;
          font-size: 2.25rem;
          line-height: 1.55; } }
    #casestudy1 .text p.detail {
      font-size: 0.43rem;
      line-height: 1.8; }
      @media screen and (max-width: 767px) {
        #casestudy1 .text p.detail {
          margin-bottom: 0;
          font-size: 1.5rem; } }
    #casestudy1 .text .detail-btn {
      display: inline-block;
      width: 100%;
      background-color: #fff;
      color: #202020;
      font-size: 0.38rem;
      font-weight: bold;
      letter-spacing: 0.025em;
      text-align: center; }
      #casestudy1 .text .detail-btn span {
        display: inline-block;
        padding-top: 8.5%;
        padding-bottom: 8.5%; }
  #casestudy1 .viewall-btn {
    border: 0; }
    @media screen and (max-width: 767px) {
      #casestudy1 .viewall-btn {
        width: 89.34%;
        font-size: 0.38rem; } }
  #casestudy1 .paging {
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    text-align: right;
    vertical-align: middle; }
    @media screen and (max-width: 767px) {
      #casestudy1 .paging {
        right: 4.5%;
        top: 1%;
        bottom: auto; } }
    #casestudy1 .paging.sp {
      padding-top: 4%;
      position: static;
      text-align: center; }
      #casestudy1 .paging.sp .page {
        font-size: 1.2rem; }
        #casestudy1 .paging.sp .page.all {
          color: #999; }
      #casestudy1 .paging.sp .slash {
        padding-left: 1.5%;
        padding-right: 1.5%;
        color: #999;
        font-size: 1.2rem; }
    #casestudy1 .paging .page {
      display: inline-block;
      vertical-align: middle;
      font-size: 0.45rem; }
      #casestudy1 .paging .page.all {
        color: #e6e6e6; }
    #casestudy1 .paging .slash {
      display: inline-block;
      vertical-align: middle;
      padding-left: 0.25%;
      padding-right: 0.25%;
      font-size: 0.45rem;
      color: #e6e6e6; }
    #casestudy1 .paging .prev {
      display: inline-block;
      vertical-align: middle;
      width: 4.38%;
      padding-top: 4.38%;
      margin-left: 1.8%;
      position: relative;
      border-radius: 50px;
      background-color: #fff;
      cursor: pointer;
      transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
      /* easeOutCubic */ }
      @media screen and (max-width: 767px) {
        #casestudy1 .paging .prev {
          width: 10%;
          padding-top: 10%;
          margin-right: 1.2%;
          background-color: #e6e6e6; } }
      #casestudy1 .paging .prev:hover {
        background-color: #202020; }
        #casestudy1 .paging .prev:hover p {
          border-left: 3px solid #fff;
          border-bottom: 3px solid #fff; }
        @media screen and (max-width: 767px) {
          #casestudy1 .paging .prev:hover {
            background-color: #e6e6e6; }
            #casestudy1 .paging .prev:hover p {
              border-left: 3px solid #202020;
              border-bottom: 3px solid #202020; } }
      #casestudy1 .paging .prev p {
        left: 3px;
        width: 15%;
        padding-top: 15%;
        position: absolute;
        left: 54%;
        top: 50%;
        z-index: 0;
        border-left: 3px solid #202020;
        border-bottom: 3px solid #202020;
        transform: translate(-50%, -50%) rotate(45deg); }
        @media screen and (max-width: 767px) {
          #casestudy1 .paging .prev p {
            border-left: 2px solid #202020;
            border-bottom: 2px solid #202020; } }
    #casestudy1 .paging .next {
      display: inline-block;
      vertical-align: middle;
      width: 4.38%;
      padding-top: 4.38%;
      position: relative;
      border-radius: 50px;
      background-color: #fff;
      cursor: pointer;
      transition: all 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
      /* easeOutCubic */ }
      @media screen and (max-width: 767px) {
        #casestudy1 .paging .next {
          width: 10%;
          padding-top: 10%;
          margin-right: 1.2%;
          background-color: #e6e6e6; } }
      #casestudy1 .paging .next:hover {
        background-color: #202020; }
        #casestudy1 .paging .next:hover p {
          border-top: 3px solid #fff;
          border-right: 3px solid #fff; }
        @media screen and (max-width: 767px) {
          #casestudy1 .paging .next:hover {
            background-color: #e6e6e6; }
            #casestudy1 .paging .next:hover p {
              border-top: 3px solid #202020;
              border-right: 3px solid #202020; } }
      #casestudy1 .paging .next p {
        left: 3px;
        width: 15%;
        padding-top: 15%;
        position: absolute;
        left: 48%;
        top: 50%;
        z-index: 0;
        border-top: 3px solid #202020;
        border-right: 3px solid #202020;
        transform: translate(-50%, -50%) rotate(45deg); }
        @media screen and (max-width: 767px) {
          #casestudy1 .paging .next p {
            border-top: 2px solid #202020;
            border-right: 2px solid #202020; } }

.carousel {
  display: block;
  position: relative; }
  .carousel .imgs-wrap {
    width: 100%;
    height: 796px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 0;
    overflow: hidden; }
    .carousel .imgs-wrap .leftbtn {
      display: none; }
    .carousel .imgs-wrap .rightbtn {
      display: none; }
    .carousel .imgs-wrap .imgs {
      width: 100%;
      height: 100%;
      margin-top: 0;
      margin-bottom: 0; }
      .carousel .imgs-wrap .imgs:after {
        content: "";
        display: table;
        clear: both; }
      .carousel .imgs-wrap .imgs .img {
        width: 100%;
        height: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 0;
        float: left;
        background-size: cover;
        background-position: 50% 50%; }
        .carousel .imgs-wrap .imgs .img img {
          width: 100%;
          height: auto;
          margin-bottom: 0; }
  .carousel.fadepager .imgs-wrap .imgs .img {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    float: none; }
  .carousel .menu {
    width: 100%;
    padding-right: 30px;
    box-sizing: border-box;
    position: absolute;
    bottom: 25px;
    text-align: right;
    line-height: 0; }
    @media screen and (max-width: 767px) {
      .carousel .menu {
        padding-right: 17px;
        bottom: 12px; } }
    .carousel .menu .icon {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 6px;
      margin-left: 6px;
      border: 0px;
      box-sizing: border-box;
      vertical-align: top; }
      @media screen and (max-width: 767px) {
        .carousel .menu .icon {
          width: 4px;
          height: 4px;
          margin-left: 3px;
          margin-right: 3px; } }
      .carousel .menu .icon:first-child {
        margin-left: 0; }
      .carousel .menu .icon:last-child {
        margin-right: 0; }
      .carousel .menu .icon.active, .carousel .menu .icon:hover {
        border: 1px solid #fff;
        background-color: transparent; }
      .carousel .menu .icon img {
        display: none; }