@charset "utf-8";

/*====================================================================================================

  施工例

====================================================================================================*/

/*--------------------------------------------------------------------------------
  ページタイトル
--------------------------------------------------------------------------------*/

#pgTtl {
  background-image:url(../image/pgTtl_bg.jpg);
}

#pgTtl h2 {
  background-image:url(../image/pgTtl.png);
}


/*--------------------------------------------------------------------------------
  カテゴリ
--------------------------------------------------------------------------------*/

.s-cate {
  display:inline-block;
  line-height:1;
  padding:0.4em;
  color:#fff;
  font-size:0.9em;
}


/*--------------------------------------------------------------------------------
  エラー
--------------------------------------------------------------------------------*/

.wrk-err { line-height:2; }

@media print,screen and (min-width:641px) {
  .wrk-err {
    padding-top:40px;
    padding-bottom:20px;
    font-size:1.1em;
  }
}

@media screen and (max-width:640px) {
  .wrk-err {
    padding:12% 6%;
  }
}


/*----------------------------------------------------------------------------------------------------

  一覧
  
----------------------------------------------------------------------------------------------------*/

.wrkList a { display:block; }
.wrkList a,
.wrkList a:visited,
.wrkList a:hover { color:inherit; text-decoration:none; }

.wrkList {
  list-style:none;
  text-align:left;
}

.wrkList li {
  position:relative;
  line-height:1.5;
}

.wrkList li a:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.wrkList li a {
  display:block;
}

.wrkList .list__photo {
  position:relative;
}

.wrkList .list__photo .photoItem {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  overflow:hidden;
}

.ua-pc.csstransitions .wrkList .list__photo .photoItem img {
  -webkit-transition:transform 0.3s ease-out;
  transition:transform 0.3s ease-out;
}
    
.ua-pc.csstransitions .wrkList li a:hover .list__photo .photoItem img {
  transform:scale(1.05);
}
    
.ua-pc.csstransitions .wrkList .list__photo .photoItem:before {
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background-color:rgba(70,65,55,0.2);
  z-index:1;
  -webkit-transition:background 0.3s ease-out;
  transition:background 0.3s ease-out;
}
  
.ua-pc.csstransitions .wrkList li a:hover .list__photo .photoItem:before {
  background-color:rgba(70,65,55,0.0);
}

.wrkList .list__data {
  background-color:#fff;
  position:relative;
  z-index:2;
}

.wrkList .list__data .ttl {
  font-weight:500;
  font-size:1.1em;
  display:block;
  padding-top:1.4rem;
}

.wrkList .list__data .ttl .p-iconTxt__mk {
  display:block;
  height:100%;
}

.ua-pc.csstransitions .wrkList .list__data .ttl .p-iconTxt__mk:before {
  -webkit-transition:width 0.2s ease-out;
  transition:width 0.2s ease-out;
}

.ua-pc.csstransitions .wrkList li:hover .list__data .ttl .p-iconTxt__mk:before {
  width:45px;
}

@media print,screen and (min-width:641px) {
  .wrkList-lo {
    padding-top:90px;
    padding-bottom:115px;
  }
  
  .wrkList {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
  }

  .wrkList .list__photo {
    height:360px;
  }
    
  .wrkList li {
    width:540px;
    float:left;
  }
  
  .wrkList li:nth-child(n+3) {
    margin-top:80px;
  }
  
  .wrkList li:nth-child(even) {
    margin-left:100px;
  }

  .wrkList .list__data {
    margin-left:120px;
    margin-right:-30px;
    margin-top:-60px;
    padding:30px;
    box-shadow:0px 0px 10px 0 rgba(50,45,35, 0.05);
  }
}

@media screen and (max-width:640px) {
  .wrkList-lo {
    padding-top:2%;
    padding-bottom:10%;
    padding-left:6%;
    padding-right:6%;
  }
  
  .wrkList li {
    margin-top:8%;
  }
  
  .wrkList .list__photo {
    height:-webkit-calc(300 / 640 * 100vw);
    height:calc(300 / 640 * 100vw);
  }
  
  .wrkList .list__data {
    padding:6%;
  }
}


/*--------------------------------------------------------------------------------
  ページネーション
--------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .wrkList-lo .p-pagination {
    padding-top:80px;
  }
}

@media screen and (max-width:640px) {
  .wrkList-lo .p-pagination {
    padding-bottom:0;
  }
}


/*----------------------------------------------------------------------------------------------------

  詳細
  
----------------------------------------------------------------------------------------------------*/

.detail__data {
  text-align:left;
}
  
.detail__data .ttl {
  font-weight:700;
  padding-top:0.8rem;
}

@media print,screen and (min-width:641px) {
  .detail {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
    padding-top:90px;
    padding-bottom:90px;
  }
  
  .detail__photo {
    max-width:560px;
    float:right;
  }
  
  .detail__photo img {
    max-height:420px;
  }
  
  .detail__data {
    width:560px;
    float:left;
  }
  
  .detail--noPhoto .detail__data {
    width:100%;
    float:none;
  }
  
  .detail__data .ttl {
    font-size:1.8em;
  }

  .detail__data .cmt {
    padding-top:3rem;
  }
}

@media screen and (max-width:640px) {
  .detail {
    padding:8% 6%;
  }
  
  .detail__data {
    padding-top:8%;
    padding-bottom:2%;
  }
  
  .detail__photo img {
    max-height:-webkit-calc(400 / 640 * 100vw);
    max-height:calc(400 / 640 * 100vw);
  }
  
  .detail__data .ttl {
    font-size:1.6em;
  }
  
  .detail__data .cmt {
    padding-top:2rem;
  }
}


/*--------------------------------------------------------------------------------
  photo gallery
--------------------------------------------------------------------------------*/

.gallery {
  background-color:rgba(70,65,55,0.08);
  overflow:hidden;
}

.gallery__hdline:before {
  content:"";
  width:100%;
  height:50px;
  display:block;
  background:url(../image/gallery_hdImg.gif) no-repeat center center;
  background-size:contain;
}

.gallery__main {
  position:relative;
  width:100%;
}

#mainSlider,
#thumbSlider {
  list-style:none;
  display:none;
}

#mainSlider.slick-initialized,
#thumbSlider.slick-initialized {
  display:inherit;
}

#mainSlider li .photo {
  width:100%;
  height:100%;
  display:block;
  position:relative;
  overflow:hidden;
  text-align:center;
}
  
#mainSlider li .photo img {
  width:auto;
  max-width:inherit;
  margin-left:auto;
  margin-right:auto;
}

#mainSlider li .cp {
  width:100%;
  text-align:left;
  background-color:rgba(50,45,35,0.72);
  color:#fff;
  padding:1.8rem 2.2rem;
  font-size:0.9em;
}

#thumbSlider li {
  position:relative;
  cursor:pointer;
}

#thumbSlider li .photo {
  display:block;
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
}

#thumbSlider li img {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:auto;
  max-width:inherit;
  height:100%;
}

#thumbSlider li.thumbnail-current .photo:after {
  content:"";
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  left:0;
  top:0;
  border:3px solid #464137;
  z-index:2;
}

@media print,screen and (min-width:1681px) {
  #thumbSlider li {
    height:150px;
  }
}

@media screen and (max-width:1680px) {
  #thumbSlider li {
    height:140px;
  }
}

@media print,screen and (min-width:641px) {
  .gallery {
    padding-top:80px;
    padding-bottom:90px;
    position:relative;
  }
  
  .gallery__hdline {
    padding-bottom:60px;
    font-size:1.5em;
  }
  
  .gallery__hdline:before {
    margin-bottom:30px;
  }
  
  .gallery__main {
    width:880px;
    margin-left:auto;
    margin-right:auto;
  }
  
  #mainSlider li .photo img {
    height:590px;
  }
  
  #thumbSlider {
    padding-left:30px;
    padding-right:30px;
    padding-top:60px;
  }
  
  #thumbSlider li {
    padding:0 10px;
  }
}

@media screen and (max-width:640px) {
  .gallery {
    padding-top:10%;
    padding-bottom:10%;
  }
  
  .gallery__hdline {
    padding-bottom:7%;
    font-size:1.4em;
  }
  
  .gallery__hdline:before {
    margin-bottom:5%;
  }
  
  #mainSlider {
    padding-left:4%;
    padding-right:4%;
  }
  
  #mainSlider li .photo img {
    height:-webkit-calc(400 / 640 * 100vw);
    height:calc(400 / 640 * 100vw);
  }
  
  #thumbSlider {
    padding-top:6%;
    padding-left:4%;
    padding-right:4%;
    margin-left:-0.5rem;
    margin-right:-0.5rem;
  }
  
  #thumbSlider li {
    padding:0 0.5rem;
    height:-webkit-calc(100 / 640 * 100vw);
    height:calc(100 / 640 * 100vw);
  }
}

@media screen and (max-width:500px) {
  .gallery__hdline {
    font-size:4.4vw;
  }
  
  .gallery__hdline:before {
    padding-bottom:8%;
    height:-webkit-calc(50 / 500 * 100vw);
    height:calc(50 / 500 * 100vw);
  }
}


/* arrow
----------------------------------------------------------------------*/

.mainSlider-arrow .slick-prev,
.mainSlider-arrow .slick-next {
  width:60px;
  height:60px;
  position:absolute;
  top:-webkit-calc(590px / 2 - 30px);
  top:calc(590px / 2 - 30px);
  z-index:3;
}

.mainSlider-arrow .slick-prev { left:-90px; }
.mainSlider-arrow .slick-next { right:-90px; }

.mainSlider-arrow .slick-prev:after,
.mainSlider-arrow .slick-next:after {
  content:"";
  display:inline-block;
  width:30px;
  height:30px;
  border-right:3px solid rgba(70,65,55,1);
  border-bottom:3px solid rgba(70,65,55,1);
  -webkit-transition:border 0.15s ease;
  transition:border 0.15s ease;
}

.mainSlider-arrow .slick-next:after { -webkit-transform:rotate(-45deg); transform:rotate(-45deg); margin-left:-3px; }
.mainSlider-arrow .slick-prev:after { -webkit-transform:rotate(135deg); transform:rotate(135deg); margin-left:3px; }

@media print,screen and (min-width:641px) {
  .ua-pc .mainSlider-arrow .slick-prev:hover:after,
  .ua-pc .mainSlider-arrow .slick-next:hover:after {
    border-right-color:rgba(70,65,55,0.5);
    border-bottom-color:rgba(70,65,55,0.5);
  }
}

@media screen and (max-width:640px) {
  .mainSlider-arrow .slick-arrow {
    background-color:#fff !important;
  }
  
  .mainSlider-arrow .slick-prev,
  .mainSlider-arrow .slick-next {
    width:-webkit-calc(50 / 640 * 100vw);
    width:calc(50 / 640 * 100vw);
    height:60px;
    top:-webkit-calc(400 / 640 * 50vw - 25 / 640 * 100vw);
    top:calc(400 / 640 * 50vw - 25 / 640 * 100vw);
  }

  .mainSlider-arrow .slick-prev { left:0; }
  .mainSlider-arrow .slick-next { right:0; }
  
  .mainSlider-arrow .slick-prev:after,
  .mainSlider-arrow .slick-next:after {
    width:-webkit-calc(17 / 640 * 100vw);
    width:calc(17 / 640 * 100vw);
    height:-webkit-calc(17 / 640 * 100vw);
    height:calc(17 / 640 * 100vw);
    border-right-width:2px;
    border-bottom-width:2px;
  }
}


/*--------------------------------------------------------------------------------
  戻るボタン
--------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .backBtn {
    padding-bottom:115px;
  }
  
  .gallery + .backBtn {
    padding-top:90px;
  }
}

@media screen and (max-width:640px) {
  .backBtn {
    padding-bottom:10%;
  }
  
  .gallery + .backBtn {
    padding-top:10%;
    padding-bottom:2%;
    background-color:#fff;
  }
}