/* =========================
   WORK SINGLE
========================= */

.p-work{
  padding:20px 15px 100px;
}

.p-work__head{
  display:flex;

  flex-direction:column;

  gap:10px;
}

/* タイトル行 */
.p-work__titleWrap{

  text-align:center;
  margin:10px auto;

}

/* タイトル */
.p-work__title{
  font-size:1.1em;
  font-weight:700;
  line-height:1.4;

  color:#222;
}

/* customer */
.p-work__customer{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:10px;
  background:#f3f5f7;
  font-size:12px;
  font-weight:700;
  color:#555;
}

/* エリア */
.p-work__area{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  width:95%;
}

/* 共通badge */
.p-work__badge{
  display:flex;

  align-items:center;
  justify-content:center;

  padding:6px 12px;

  border-radius:10px;

  font-size:12px;
  font-weight:700;

  color:#fff;
}

/* 県 */
.p-work__badge--pref{
  background:#2e7d32;
}

/* 市 */
.p-work__badge--city{
  background:#66bb6a;
}


.p-work__title span{
  display:inline-block;
  margin-left:6px;
  font-size:14px;
  font-weight:500;
  color:#666;
}

/* AFTER */
.p-work__after{
  margin-top:24px;
  
  border-radius:18px;
  box-shadow:
    0 8px 24px rgba(0,0,0,.12);
  
}

.p-work__after_img{
  display:flex;
  justify-content:center;
  align-items:center;
  aspect-ratio:4 / 3;
  overflow:hidden;
}

@media (min-width:768px){
  .p-work__after{
    margin:0;
}
  .p-work__beforeWrap{
    padding:0 10% 0;
    
  }

  .p-work__hero .discount-label{
    width: 100px;
    height:100px;

  }

  .p-work__hero .discount-text{
    font-size:1.2em;
  }

  .p-work__hero .discount-num{
    font-size:1.5em;
  }

  .p-work__hero .discount-unit{
    font-size:1.2em;
  }

  .p-work__hero .discount-off{
    font-size:1em;
  }

  .p-work__hero .p-card__series{
    font-size:1em;
  }

  .p-work__hero .p-card__model{
    font-size:1.2em;
  }

  .p-work__hero .p-card__p-card__label{
    font-size:1.1em;
  }

  .p-work__hero .p-card__p-card__price{
    font-size:1.8em;
  }

}

.p-work__after_img img{
  width:90%;
  height:90%;
  display:block;
  object-fit:cover;
}

/* BEFORE */
.p-work__beforeWrap{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:20px;
}

.p-work__beforeLabel{
  width:100%;
  max-width:60%;
  flex-shrink:0;
  aspect-ratio:3 / 1;
  background:
    url("../img/work-befor.webp")
    no-repeat
    center / contain;

  text-indent:-9999px;
  overflow:hidden;
}

.p-work__before{
  width:100%;
  max-width:40%;
  margin-left:auto;
  overflow:hidden;
  border-radius:14px;
  opacity:.92;
  aspect-ratio:4 / 3;
}

.p-work__before img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;

}

/* リード */
.p-work__lead{
  margin-top:28px;

  padding:18px;

  border-radius:16px;

  background:#fff;

  font-size:15px;
  line-height:1.9;

  box-shadow:
    0 2px 10px rgba(0,0,0,.06);
}

/* セクション */
.p-work__product,
.p-work__comment,
.p-work__related{
  margin-top:40px;
}

@media (min-width:768px){
  .p-work__product,
.p-work__comment,
.p-work__related{
  margin:0 0 10px 0;
}
}

/* 見出し */
.p-work__heading{
  margin-bottom:14px;

  font-size:18px;
  font-weight:700;

  color:#2e7d32;
}

/* 商品カード */
.p-work__productCard{
  overflow:hidden;

  border-radius:10px;

  background:#fff;

  box-shadow:
    0 4px 14px rgba(0,0,0,.08);
}

.p-work__productThumb img{
  width:100%;

  display:block;
}

/* 商品ボタン */
.p-work__productBtn{
  display:flex;

  align-items:center;
  justify-content:center;

  padding:16px;

  background:
    linear-gradient(
      135deg,
      #66bb6a,
      #2e7d32
    );

  color:#fff;

  text-decoration:none;

  font-weight:700;
}

/* コメント */
.p-work__commentBox{
  padding:18px;

  border-radius:16px;

  background:#fff;

  font-size:14px;
  line-height:2;

  box-shadow:
    0 2px 10px rgba(0,0,0,.06);
}

/* 関連施工 */
.p-work__grid{
  display:grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:10px;
}

.p-work__relatedItem{
  overflow:hidden;

  border-radius:10px;

  box-shadow:
    0 2px 10px rgba(0,0,0,.08);
}

.p-work__relatedItem img{
  width:100%;

  aspect-ratio:1 / 1;

  object-fit:cover;

  display:block;

  transition:
    transform .3s ease;
}

.p-work__relatedItem:hover img{
  transform:scale(1.05);
}

/* 一覧ボタン */
.p-work__archiveBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:40px;
  padding:16px;
  border-radius:10px;
  background:
    linear-gradient(
      135deg,
      #66bb6a,
      #2e7d32
    );

  color:#fff;

  text-decoration:none;

  font-weight:700;

  box-shadow:
    0 8px 20px rgba(46,125,50,.25);

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.p-work__archiveBtn:active{
  transform:scale(.98);
}

@media(min-width:768px){

    .p-work__hero{

        display:flex;
        gap:32px;
        align-items:flex-start;

    }

    .p-work__heroMain{

        flex:2;

    }

    .p-work__heroSide{

        flex:1;

        display:flex;
        flex-direction:column;
        gap:20px;

    }

}