/* =====================================================
特産品ページ
===================================================== */

.product-page{
  background:#fff;
  color:#2f3a40;
  /* margin:109px 0 0; */
  overflow:hidden;
}

.product-page img{
  max-width:100%;
  height:auto;
  vertical-align:bottom;
}

.product-page .container{
  width:min(100% - 32px, 1180px);
  margin:0 auto;
}



/* =====================================================
intro
===================================================== */

.product-intro{
  padding:70px 0 60px;
}

.product-intro__head{
  text-align:center;
}

.product-intro__head h2{
  margin:0;
  font-size:1.9rem;
  line-height:1.6;
  font-weight:500;
  color:#2f4149;
}

.product-intro__text{
  margin:30px auto 0;
  max-width:860px;
}

.product-intro__text p{
  margin:0;
  font-size:1rem;
  line-height:2.1;
  text-align:center;
  color:#53636a;
}



/* =====================================================
feature（つらさげ芋）
===================================================== */

.product-feature{
  padding:30px 0 100px;
}

.product-feature .container{
  display:flex;
  flex-direction:column;
  gap:36px;
}

.product-feature__media{
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:18px;
}

.product-feature__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.product-feature__label{
  display:inline-block;
  margin:0 0 16px;
  padding:6px 14px;
  font-size:.75rem;
  letter-spacing:.14em;
  color:#4f8395;
  background:#edf7fa;
  border-radius:999px;
}

.product-feature__content h2{
  margin:0 0 18px;
  font-size:2rem;
  line-height:1.45;
  font-weight:500;
  color:#283940;
}

.product-feature__content p{
  margin:0;
  font-size:1rem;
  line-height:2.05;
  color:#4a5961;
}



/* =====================================================
一覧カード
===================================================== */

.product-list{
  padding:95px 0;
  background:#f7fbfc;
}

.product-list__head{
  margin-bottom:40px;
  text-align:center;
}

.product-list__sub{
  margin:0 0 10px;
  font-size:.8rem;
  letter-spacing:.16em;
  color:#7ba3b1;
}

.product-list__head h2{
  margin:0;
  font-size:1.9rem;
  line-height:1.6;
  font-weight:500;
  color:#2f4149;
}

.product-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

.product-card{
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  border:1px solid #e3edf1;
  transition:.3s;
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(28,65,83,.08);
}


/* 画像サイズ統一 */

.product-card__image{
  aspect-ratio:4 / 3;
  overflow:hidden;
}

.product-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.product-card__body{
  padding:20px 18px 22px;
}

.product-card__body h3{
  margin:0 0 14px;
  font-size:1.35rem;
  font-weight:600;
  color:#2f4149;
}

.product-card__body p{
  margin:0;
  font-size:.97rem;
  line-height:1.95;
  color:#5a6870;
}



/* =====================================================
詳細
===================================================== */

.product-detail{
  padding: 110px 15px;
  max-width: 1200px;
  margin: 0 auto;
}

.product-detail__item{
  display:flex;
  flex-direction:column;
  gap:28px;
  margin-bottom:90px;
}


/* 画像サイズ統一 */

.product-detail__image{
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:16px;
}

.product-detail__image img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* テキスト */

.product-detail__content h3{
  margin:0 0 16px;
  font-size:1.8rem;
  font-weight:600;
  color:#2f4149;
}

.product-detail__content h4{
  margin:26px 0 10px;
  font-size:1.4rem;
  font-weight:600;
  color:#2f4149;
}

.product-detail__content p{
  margin:0;
  font-size:1.45rem;
  line-height:2;
  color:#5a6870;
}



/* =====================================================
tablet
===================================================== */

@media screen and (min-width:768px){

  .product-page{
    margin:83px 0 0;
  }

  .product-intro{
    padding:90px 0 70px;
  }

  .product-intro__head h2,
  .product-list__head h2{
    font-size:2.3rem;
  }

  .product-feature .container{
    gap:48px;
  }

  .product-feature__content h2{
    font-size:2.4rem;
  }

  .product-cards{
    grid-template-columns:repeat(2,1fr);
    gap:28px;
  }

}



/* =====================================================
pc
===================================================== */

@media screen and (min-width:1024px){

  .product-page{
    margin:109px 0 0;
  }

  .product-feature{
    padding:20px 0 120px;
  }

  .product-feature .container{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:72px;
  }


  /* 一覧 */

  .product-cards{
    grid-template-columns:repeat(4,1fr);
    gap:26px;
  }


  /* 詳細 */

  .product-detail__item{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
  }

  .product-detail__item--reverse .product-detail__image{
    order:2;
  }

}