@charset "UTF-8";
/* Scss Document */
/* Scss Document */
.content {
  padding: 50px 0; }
  .content .inner {
    padding: 0 30px; }

/*----------------------------
一覧ページ　index.html
----------------------------*/
.post-type-archive-project .ttl,
.index .ttl {
  color: #1F1F1F;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: .1em;
  line-height: 1.2;
  text-align: center; }

.post-type-archive-project .project_list,
.index .project_list {
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  -o-display: flex;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .post-type-archive-project .project_list::after,
  .index .project_list::after {
    content: "";
    display: block;
    width: 30%; }
  .post-type-archive-project .project_list li,
  .index .project_list li {
    position: relative;
    margin-top: 40px;
    width: 370px; }
    .post-type-archive-project .project_list li figure,
    .index .project_list li figure {
      margin-bottom: 10px; }
    .post-type-archive-project .project_list li h3,
    .index .project_list li h3 {
      margin-bottom: 10px;
      color: #1F1F1F;
      font-size: 1.6rem;
      font-weight: bold;
      letter-spacing: .1em;
      line-height: 1.2;
      text-align: center; }
    .post-type-archive-project .project_list li .btn a,
    .index .project_list li .btn a {
      width: 95px;
      font-size: 1.4rem;
      line-height: 30px; }
  .post-type-archive-project .project_list .ico,
  .index .project_list .ico {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 10px;
    background: #B20000;
    color: #FFF;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: .2em;
    line-height: 1.6; }

#works h3 {
  margin-top: 40px;
  padding: 1em 1.5em;
  border-top: dotted 1px rgba(0, 0, 0, 0.2);
  color: #0A377F;
  font-size: 2rem;
  position: relative; }
  #works h3 span {
    position: relative;
    z-index: 1; }
  #works h3:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 60px 150px 0 0;
    border-color: #F3F5F8 transparent transparent transparent;
    z-index: 0; }

#works ul {
  margin: 0 0 3em 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  #works ul li {
    padding-right: 1em;
    width: 50%;
    letter-spacing: 0; }
    #works ul li:before {
      content: '・'; }
  #works ul.col3 li {
    width: 33.33333%; }
  #works ul.col4 li {
    width: 25%; }

/*----------------------------
詳細ページ
----------------------------*/
.single-project .ttl,
.detail .ttl {
  margin-bottom: 2.0rem;
  color: #1F1F1F;
  font-size: 3.2rem;
  font-weight: normal;
  letter-spacing: .1em;
  line-height: 1.2;
  text-align: center; }
  .single-project .ttl .shubetsu,
  .detail .ttl .shubetsu {
    display: inline-block;
    margin-bottom: 3.0rem;
    padding: 0 2em;
    background: #0A377F;
    color: #FFF;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 3.0rem; }

.single-project .outline,
.detail .outline {
  margin-bottom: 5.0rem;
  text-align: center; }
  .single-project .outline dt, .single-project .outline dd,
  .detail .outline dt,
  .detail .outline dd {
    display: inline-block;
    color: #1F1F1F;
    font-size: 1.4rem;
    font-weight: normal; }
  .single-project .outline dt,
  .detail .outline dt {
    margin-left: 1em;
    font-weight: bold; }
    .single-project .outline dt:after,
    .detail .outline dt:after {
      content: '/';
      display: inline-block;
      margin-right: .5em; }
  .single-project .outline dd,
  .detail .outline dd {
    margin-right: 1em; }

.single-project .slide, .single-project .thumb,
.detail .slide,
.detail .thumb {
  width: 1045px; }

.single-project .slide,
.detail .slide {
  position: relative;
  margin: 0 auto 30px; }
  .single-project .slide .slick-slide img,
  .detail .slide .slick-slide img {
    margin: 0 auto; }
  .single-project .slide .slide-arrow,
  .detail .slide .slide-arrow {
    width: 48px;
    height: 48px;
    border: none;
    z-index: 99; }
    .single-project .slide .slide-arrow.next-arrow,
    .detail .slide .slide-arrow.next-arrow {
      position: absolute;
      top: 50%;
      right: 0;
      -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
      transform: translate(50%, -50%);
      background: url(../images/project/slide_arrow_prev.png) top center no-repeat; }
    .single-project .slide .slide-arrow.prev-arrow,
    .detail .slide .slide-arrow.prev-arrow {
      position: absolute;
      top: 50%;
      left: 0;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background: url(../images/project/slide_arrow_next.png) top center no-repeat; }

.single-project .thumb,
.detail .thumb {
  margin: 0 auto 80px;
  text-align: center;
  letter-spacing: -.5em; }
  .single-project .thumb li,
  .detail .thumb li {
    letter-spacing: normal;
    display: inline-block;
    margin: 0 2px;
    padding-top: 70px;
    border-top: #FFF 2px solid;
    width: 99px;
    overflow: hidden;
    position: relative; }
    .single-project .thumb li:before,
    .detail .thumb li:before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      border-top: #fff 2px solid;
      width: 99px;
      height: 6px;
      background: #fff;
      z-index: 1; }
    .single-project .thumb li img,
    .detail .thumb li img {
      padding-top: 8px;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
      -webkit-transform: translateY(-50%) translateX(-50%);
      z-index: 0; }
  .single-project .thumb .thumb-current,
  .detail .thumb .thumb-current {
    position: relative; }
    .single-project .thumb .thumb-current:before,
    .detail .thumb .thumb-current:before {
      border-top: #0A377F 2px solid; }
    .single-project .thumb .thumb-current:after,
    .detail .thumb .thumb-current:after {
      position: absolute;
      top: 7px;
      left: 0;
      content: '';
      width: 100%;
      height: calc(100% - 7px);
      background: rgba(0, 0, 0, 0.5);
      z-index: 99; }

@media screen and (max-width: 640px) {
  .content {
    padding: 6.57895vw 0; }
    .content .inner {
      padding: 0 2.63158vw; }
  /*----------------------------
	一覧ページ　index.html
	----------------------------*/
  .index .ttl {
    margin-bottom: 5.26316vw;
    font-size: 5.26316vw; }
  .index .project_list {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap; }
    .index .project_list li {
      margin-top: 4vw;
      width: 48%;
      margin-bottom: 4.73684vw; }
      .index .project_list li figure {
        margin-bottom: 2.63158vw; }
      .index .project_list li h3 {
        margin-bottom: 2.63158vw;
        font-size: 3.15789vw;
        letter-spacing: 0; }
      .index .project_list li .btn a {
        width: 26.31579vw;
        font-size: 3.15789vw;
        line-height: 5.26316vw; }
    .index .project_list .ico {
      padding: 0 1.31579vw;
      font-size: 1.31579vw; }
  #works h3 {
    margin-top: 20px;
    padding: 1em 1.5em;
    color: #0A377F;
    font-size: 3.94737vw; }
  #works ul {
    margin: 0 0 3em 2em; }
    #works ul li {
      width: 100%;
      font-size: 3.15789vw; }
    #works ul.col3 li {
      width: 100%; }
    #works ul.col4 li {
      width: 50%; }
  /*----------------------------
	詳細ページ
	----------------------------*/
  .detail .ttl {
    margin-bottom: 2.63158vw;
    font-size: 5.26316vw; }
    .detail .ttl .shubetsu {
      margin-bottom: 3.94737vw;
      padding: 0 2em;
      font-size: 3.15789vw;
      line-height: 5.26316vw; }
  .detail .outline {
    margin-bottom: 5.26316vw; }
    .detail .outline dt, .detail .outline dd {
      font-size: 2.63158vw; }
  .detail .slide, .detail .thumb {
    width: 100%; }
  .detail .slide {
    margin: 0 0 5.26316vw; }
    .detail .slide .slick-slide img {
      width: auto;
      height: 59.5vw; }
    .detail .slide .slide-arrow {
      width: 6.57895vw;
      height: 6.57895vw; }
      .detail .slide .slide-arrow.prev-arrow {
        background-size: contain; }
      .detail .slide .slide-arrow.next-arrow {
        background-size: contain; }
  .detail .thumb {
    margin: 0 auto 10.52632vw; }
    .detail .thumb li {
      width: 18vw;
      margin: 0 .15vw 3px;
      padding-top: 12vw; }
    .detail .thumb .thumb-current:after {
      top: 7px;
      height: calc(100% - 7px); } }